« STIC:STIC I - exercice 3 (Wall-e) » : différence entre les versions
m (→Contraintes) |
mAucun résumé des modifications |
||
(27 versions intermédiaires par 2 utilisateurs non affichées) | |||
Ligne 1 : | Ligne 1 : | ||
{{ | {{stic archive}} | ||
<categorytree mode="pages" depth="0" style="float:right; clear:right; margin-left:3px; border:1px solid gray; padding:0.7ex; background-color:#f9f9f9;">STIC</categorytree> | <categorytree mode="pages" depth="0" style="float:right; clear:right; margin-left:3px; border:1px solid gray; padding:0.7ex; background-color:#f9f9f9;">STIC</categorytree> | ||
Ligne 13 : | Ligne 14 : | ||
* Identifier des mécanismes de Input/Output et les rapporter à des actions de l'utilisateur, du système, etc. | * Identifier des mécanismes de Input/Output et les rapporter à des actions de l'utilisateur, du système, etc. | ||
* Reconnaître un gestionnaire d'événements et le type d'événement déclencheur | * Reconnaître un gestionnaire d'événements et le type d'événement déclencheur | ||
* Connaître les bases de la syntaxe JavaScript ( | * Connaître les bases de la syntaxe JavaScript (fondamentaux du langage) | ||
* Comprendre l'implémentation de JavaScript dans un navigateur web et sur des pages web dynamiques | * Comprendre l'implémentation de JavaScript dans un navigateur web et sur des pages web dynamiques | ||
* Savoir créer des interactions simples à travers la combinaison gestionnaire d'événement + manipulation du DOM | * Savoir créer des interactions simples à travers la combinaison gestionnaire d'événement + manipulation du DOM | ||
Ligne 24 : | Ligne 25 : | ||
* [[JavaScript]] (environ 10 minutes) | * [[JavaScript]] (environ 10 minutes) | ||
Logiciels | Logiciels utilisés pendant l'activité en salle de classe : | ||
* [[Brackets]] | * [[Brackets]] | ||
Ligne 36 : | Ligne 37 : | ||
* 09:30 - 10:30 : introduction à la syntaxe de JavaScript | * 09:30 - 10:30 : introduction à la syntaxe de JavaScript | ||
* -- pause -- | * -- pause -- | ||
* 11:00 - | * 11:00 - 12:30 : JavaScript et le DOM | ||
===Présentation de JavaScript=== | ===Présentation de JavaScript=== | ||
Ligne 43 : | Ligne 43 : | ||
Brève mise en contexte de JavaScript dans le développement web : | Brève mise en contexte de JavaScript dans le développement web : | ||
* Développement frontend et backend | * Programmation et EduTech | ||
* Interactivité | |||
* Développement web frontend et backend | |||
* Importance de l'environnement | * Importance de l'environnement | ||
* JavaScript côté client | * JavaScript côté client | ||
Les slides de la présentation sont disponibles dans Moodle. | |||
===Introduction à la syntaxe de JavaScript=== | ===Introduction à la syntaxe de JavaScript=== | ||
Ligne 53 : | Ligne 55 : | ||
Survol des éléments fondamentaux du langage : | Survol des éléments fondamentaux du langage : | ||
* Syntaxe | * Syntaxe : règles pour écrire/organiser le code source | ||
* | ** Variables : <code>var cours = "STIC I";</code> | ||
** Types de données : (1) primitives (i.e. string, number, boolean, null, undefined); (2) objects (objects, arrays, functions) | |||
** Opérateurs : (1) mathématiques (+, -, /, *, %), (2) logiques (&&, ||, ==, !=, ..), (3) autres (...) | |||
** Structure de contrôle (if... else if... else, switch) | |||
** Boucles (for, while) | |||
** Built-in objects (String, Math, Number, ...) -> properties (i.e. variables) & methods (i.e. functions) | |||
* Instructions | |||
*# Expressions : éléments individuels du langage, e.g. <code>var</code>, <code>+</code>, <code>.</code>, ... | |||
*# Statements : composition d'expressions, e.g. <code>var cours = "STIC" + " I";</code> | |||
*# Bloc de code : composition de statements qui partagent le même scope, e.g. <code>function () { ... }</code> | |||
* Deux types d'instructions : | |||
*# Modifier l'état de la logique de l'application (i.e. "write") | |||
*# Récupérer le résultat d'une manipulation/l'état d'un élément à un moment donné dans la logique de l'application (i.e. "read") | |||
Références : | Références : | ||
* [[Tutoriel JavaScript de base]] | * [[Tutoriel JavaScript de base]] | ||
==== Exemple analysé ==== | |||
'''Problème''' : je veux obtenir l'inverse d'un mot. E.g. STIC --> CITS | |||
Démarche : | |||
# Avec quelle type de données on a à faire ? Une suite de caractère --> String | |||
# Existe-t-il une fonctionnalité du langage qui fait ce que je veux ? | |||
#* Contrôler la [http://www.w3schools.com/jsref/jsref_obj_string.asp liste des propriétés/méthodes associés aux String] | |||
#* Il n'y a rien qui fait exactement ce dont j'ai besoin | |||
# Existe-t-il quelque chose qui pourrait être utile ? | |||
#* La méthode <code>split()</code> sépare une suite de caractère et en fait une liste indexée, i.e. un array ([http://www.w3schools.com/jsref/jsref_split.asp référence]) | |||
#* Donc je peux passer de "STIC" à ["S", "T", "I", "C"] | |||
# Maintenant je me retrouve avec un array. Existe-t-il une fonctionnalité du langage qui permet d'inverser un array? | |||
#* Contrôler la [http://www.w3schools.com/jsref/jsref_obj_array.asp liste des propriétés/méthode associés aux Array] | |||
#* La méthode <code>reverse()</code> s'occupe exactement de cela ([http://www.w3schools.com/jsref/jsref_reverse.asp référence]) | |||
#* Donc je peux passer de ["S", "T", "I", "C"] à ["C", "I", "T", "S"] | |||
# Maintenant je me retrouve avec un array qui a les lettres dans le bon ordre. Existe-t-il une fonctionnalité du langage qui permet de passer d'un Array à un String? | |||
#* Contrôler à nouveau la liste des propriétés/méthodes associés aux Array (vour plus haut) | |||
#* La méthode <code>join()</code> s'occupe exactement de cela ([http://www.w3schools.com/jsref/jsref_join.asp référence]) | |||
#* Donc je peux passer de ["C", "I", "T", "S"] à "CITS" | |||
# Résolution du problème | |||
Même passage en code : | |||
<source lang="JavaScript"> | |||
//Déclarer une variable avec le mot que je veux inverser | |||
var init= "STIC"; //--> "STIC" | |||
//Commencer par le traduir en array | |||
var singleLetters = init.split(""); //--> ["S", "T", "I", "C"] | |||
//Inverser l'ordre des éléments | |||
var reverseLetters = singleLetters.reverse(); //--> ["C", "I", "T", "S"] | |||
//Unire les lettres dans l'ordre inverse | |||
var end = reverseLetters.join(""); //--> "CITS" | |||
</source> | |||
Dans cet exemple de code on a utilisé beaucoup de variables qui en fait ne servent pas. Donc on peut améliorer le code (i.e. faire du '''refactoring''') : | |||
<source lang="JavaScript"> | |||
var init = "STIC"; //--> "STIC" | |||
var end = init.split("").reverse().join(""); //--> "CITS"; | |||
</source> | |||
À ce point on a un meilleur algorithme, mais si on voulait connaître l'inverse de "ERGO", il faudrait écrire à nouveau les mêmes passages juste avec une nouvelle valeur associée à la variable init. On peut faire mieux, on peut créer une '''fonction''' : | |||
<source lang="JavaScript"> | |||
//Déclarer une fonction avec un argument. Ce sera le mot initial | |||
function reverseWord(init) { | |||
//Renvoyer le mot inversée en utilisant l'aglorithme que nous avons créé | |||
return init.split("").reverse().join(""); | |||
} | |||
//Maintenant il sera suffisant d'invoquer cette fonction et lui passer le mot en tant qu'argument pour obtenir l'inverse | |||
var sticReverse = reverseWord("Sciences et Technologies de l’Information et de la Communication"); | |||
var ergoReverse = reverseWord("Design centré utilisateur et ergonomie"); | |||
</source> | |||
==== Workshop ==== | |||
Workshop files from GitHub : | |||
* https://github.com/MALTT-STIC/stic-1-javascript-essentials | |||
===JavaScript et le DOM=== | ===JavaScript et le DOM=== | ||
Ligne 69 : | Ligne 148 : | ||
* Gestionnaire d'événements | * Gestionnaire d'événements | ||
Principe de base : | |||
#Identifier un élément dans le DOM | |||
#Lui appliquer un gestionnaire d'événement | |||
#Créer une fonction qui : | |||
##Identifie les éléments à modifier suite à l'événement | |||
##Applique les modifications et met à jour le DOM | |||
Exemples Codepen.io : | |||
* [http://codepen.io/mafritz/pen/NNmgqG Démo : mise à jour du DOM après téléchargement de la page] | |||
* [http://codepen.io/mafritz/pen/vNRVxw Simple manipulation du DOM avec JavaScript] | |||
* [http://codepen.io/mafritz/pen/XdQZQR Modifier le comportement "normal" du navigateur web] | |||
* [http://codepen.io/mafritz/pen/NGzpEo Événements liés à la souris] | |||
* [http://codepen.io/mafritz/pen/JRVAGj L'object "event"] | |||
* [http://codepen.io/mafritz/pen/OyZzpw JavaScript et CSS] | |||
* [http://codepen.io/mafritz/pen/OyZJvx L'éléments this dans le DOM] | |||
* [http://codepen.io/mafritz/pen/PPeodJ JavaScript et formulaires HTML] | |||
* [http://codepen.io/mafritz/pen/NRvGJZ JavaScript et les événements lié au temps] | |||
Ces exemples (et plus) sont disponibles également ici http://codepen.io/collection/XgkejK/ | |||
* | Utiliser JavaScript avec SVG : | ||
* | * [http://tecfa.unige.ch/perso/mafritz/teaching/stic-1/svg/javascript-svg-ex1.html Ajouter des éléments SVG] | ||
* [http://tecfa.unige.ch/perso/mafritz/teaching/stic-1/svg/javascript-svg-ex2.html Rendre des éléments SVG interactifs] | |||
Références : | Références : | ||
* [[Tutoriel JavaScript | * [[Tutoriel JavaScript côté client]] | ||
=== | ==== Workshop ==== | ||
Workshop files from GitHub : | |||
* | * https://github.com/MALTT-STIC/stic-1-javascript-client-side | ||
== Projet 3 / Tâche == | == Projet 3 / Tâche == | ||
Ligne 105 : | Ligne 196 : | ||
==== Contraintes ==== | ==== Contraintes ==== | ||
* Contenu de la page selon vos | * Contenu de la page selon vos envies, mais en rapport avec une thématique MALTT | ||
* Vous devez inclure un fichier JavaScript externe et ''' | * Vous devez inclure un fichier JavaScript externe et '''éviter''' du code JavaScript dans les attributs (e.g. onclick="...") | ||
* La page doit contenir au moins deux éléments interactifs (e.g. bouton, zone de texte modifiable, ...) | * La page doit contenir au moins deux éléments interactifs (e.g. bouton, zone de texte modifiable, ...) | ||
* Vous devez créer au moins une manipulation du DOM qui modifie le contenu de la page sans actualiser la page ou pointer vers | * Vous devez créer au moins une manipulation du DOM qui modifie le contenu de la page sans actualiser la page ou pointer vers un autre lien | ||
* Vous pouvez utiliser du clipart (SVG ou autre) fait par d'autres, mais citez la source dans le rapport et dans la page de votre dispositif | * Vous pouvez utiliser du clipart (SVG ou autre) fait par d'autres, mais citez la source dans le rapport et dans la page de votre dispositif | ||
* Vous pouvez utiliser des bouts du code depuis les | * Vous pouvez utiliser des bouts du code depuis les exemples en cours, mais il faudra au moins adapter le code JavaScript (pas simplement changer/adapter le contenu HTML) | ||
=== Pour les plus ambitieux === | === Pour les plus ambitieux === | ||
En général : si vous maîtrisiez bien JavaScript, concentrez-vous sur les aspects interactifs/ergonomiques/pédagogiques de l'application : il ne suffit pas de savoir coder pour créer un bon dispositif ! | |||
;Niveau intermédiaire | |||
* Vous pouvez essayer l'une des [[Bibliothèques JavaScript]] listés ou en proposer une autre. | * Vous pouvez essayer l'une des [[Bibliothèques JavaScript]] listés ou en proposer une autre. | ||
* Vous pouvez utiliser [[jQuery]] (mais pas jQuery UI qu'on verra en P3) à condition que vous ayez compris les principes du "vanilla" JavaScript. | * Vous pouvez utiliser [[jQuery]] (mais pas jQuery UI qu'on verra en P3) à condition que vous ayez compris les principes du "vanilla" JavaScript. | ||
;Niveau avancé | |||
Si vous avez enfin un background informatique avec des bonnes connaissances d'un langage style C++, C#, Java, à la limite PHP, vous pouvez utiliser [https://www.typescriptlang.org/ TypeScript]. | |||
Dans ce cas, pensez à utiliser un éditeur de texte qui supporte cette syntaxe, à ma connaissance il n'y a pas de plugin Brackets satisfaisants pour l'instant. Je vous conseille [[Visual studio code]], dont la page sur ce Wiki pourrait être améliorée d'ailleurs - [[Utilisateur:Mattia A. Fritz|Mattia A. Fritz]] ([[Discussion utilisateur:Mattia A. Fritz|discussion]]) 1 novembre 2016 à 16:49 (CET) | |||
=== Critères d'évaluation === | === Critères d'évaluation === | ||
Ligne 130 : | Ligne 231 : | ||
* Code bien organisé et "élégant" | * Code bien organisé et "élégant" | ||
* Documentation du code (raisonnable : pas plus de commentaires que de code...) | |||
* Utilisation de techniques de programmation (cycles, structure de contrôle, etc.) | * Utilisation de techniques de programmation (cycles, structure de contrôle, etc.) | ||
* Indications pertinentes sur les interactions disponibles (e.g. guidage, texte descriptif, ...) | * Indications pertinentes sur les interactions disponibles (e.g. guidage, texte descriptif, ...) | ||
Ligne 143 : | Ligne 245 : | ||
En particulier pour cet exercice, essayez d'expliquer : | En particulier pour cet exercice, essayez d'expliquer : | ||
* En quoi les interactions que vous avez | * En quoi les interactions que vous avez créées soutiennent vos objectifs d'apprentissage/d'utilisation | ||
=== Contribution Wiki === | === Contribution Wiki === | ||
Ligne 163 : | Ligne 265 : | ||
== Liens == | == Liens == | ||
=== Théoriques === | |||
* [[Introduction à la programmation]] | |||
* [[Enseignement de l'informatique à l'école]] | |||
** [http://www.rts.ch/play/radio/forum/audio/faut-il-obliger-les-enfants-a-suivre-des-cours-de-programmation-informatique-a-lecole?id=7638246 Débat RTS] | |||
* [http://www.cs.cmu.edu/link/research-notebook-computational-thinking-what-and-why Computational Thinking: What and Why?] (Wing, 2011) | |||
* [https://www.google.com/edu/resources/programs/exploring-computational-thinking/ Google Computational Thinking] | |||
=== Technique === | === Technique === | ||
* [[JavaScript]] | * [[JavaScript]] | ||
* [[Tutoriel JavaScript de base]] | * [[Tutoriel JavaScript de base]] | ||
* [[Tutoriel JavaScript | * [[Tutoriel JavaScript côté client]] | ||
* [http://www.w3schools.com/js/ Tutoriel JavaScript sur W3schools] | * [http://www.w3schools.com/js/ Tutoriel JavaScript sur W3schools] | ||
* Il existe des dizaines de tutos sur le web et des livres | * Il existe des dizaines de tutos sur le web et des livres mais '''attention''' : contrôlez qu'il s'agit de '''ressources récentes''', si non il y a le risque de suivre des pratiques obsolètes. | ||
=== Bibliographie === | === Bibliographie === |
Dernière version du 28 septembre 2017 à 14:43
Cette page fait partie des archives des cours Cours STIC (STIC I, STIC II,STIC III,STIC IV)
Introduction
Cet exercice introduit la sensibilisation à la programmation avec JavaScript. Les concepts fondamentaux de la programmation seront abordés, et ensuite appliqués à l'interactivité des pages web.
Connaissances/compétences envisagées
À l'issue de cet exercice vous devez avoir acquis les connaissances/compétences suivantes :
- Connaître les bases de la programmation et ses composantes principales (variables, types de données, structure de contrôle, etc.)
- Identifier des mécanismes de Input/Output et les rapporter à des actions de l'utilisateur, du système, etc.
- Reconnaître un gestionnaire d'événements et le type d'événement déclencheur
- Connaître les bases de la syntaxe JavaScript (fondamentaux du langage)
- Comprendre l'implémentation de JavaScript dans un navigateur web et sur des pages web dynamiques
- Savoir créer des interactions simples à travers la combinaison gestionnaire d'événement + manipulation du DOM
Prérequis
Lectures conseillées (sans code !!!) :
- Introduction à la programmation (environ 20 minutes)
- JavaScript (environ 10 minutes)
Logiciels utilisés pendant l'activité en salle de classe :
- Brackets
- Outils de développement Google Chrome
Activité en salle de classe
Programme
- 09:00 - 09:30 : présentation de JavaScript dans le contexte du développement web
- 09:30 - 10:30 : introduction à la syntaxe de JavaScript
- -- pause --
- 11:00 - 12:30 : JavaScript et le DOM
Présentation de JavaScript
Brève mise en contexte de JavaScript dans le développement web :
- Programmation et EduTech
- Interactivité
- Développement web frontend et backend
- Importance de l'environnement
- JavaScript côté client
Les slides de la présentation sont disponibles dans Moodle.
Introduction à la syntaxe de JavaScript
Survol des éléments fondamentaux du langage :
- Syntaxe : règles pour écrire/organiser le code source
- Variables :
var cours = "STIC I";
- Types de données : (1) primitives (i.e. string, number, boolean, null, undefined); (2) objects (objects, arrays, functions)
- Opérateurs : (1) mathématiques (+, -, /, *, %), (2) logiques (&&, ||, ==, !=, ..), (3) autres (...)
- Structure de contrôle (if... else if... else, switch)
- Boucles (for, while)
- Built-in objects (String, Math, Number, ...) -> properties (i.e. variables) & methods (i.e. functions)
- Variables :
- Instructions
- Expressions : éléments individuels du langage, e.g.
var
,+
,.
, ... - Statements : composition d'expressions, e.g.
var cours = "STIC" + " I";
- Bloc de code : composition de statements qui partagent le même scope, e.g.
function () { ... }
- Expressions : éléments individuels du langage, e.g.
- Deux types d'instructions :
- Modifier l'état de la logique de l'application (i.e. "write")
- Récupérer le résultat d'une manipulation/l'état d'un élément à un moment donné dans la logique de l'application (i.e. "read")
Références :
Exemple analysé
Problème : je veux obtenir l'inverse d'un mot. E.g. STIC --> CITS
Démarche :
- Avec quelle type de données on a à faire ? Une suite de caractère --> String
- Existe-t-il une fonctionnalité du langage qui fait ce que je veux ?
- Contrôler la liste des propriétés/méthodes associés aux String
- Il n'y a rien qui fait exactement ce dont j'ai besoin
- Existe-t-il quelque chose qui pourrait être utile ?
- La méthode
split()
sépare une suite de caractère et en fait une liste indexée, i.e. un array (référence) - Donc je peux passer de "STIC" à ["S", "T", "I", "C"]
- La méthode
- Maintenant je me retrouve avec un array. Existe-t-il une fonctionnalité du langage qui permet d'inverser un array?
- Contrôler la liste des propriétés/méthode associés aux Array
- La méthode
reverse()
s'occupe exactement de cela (référence) - Donc je peux passer de ["S", "T", "I", "C"] à ["C", "I", "T", "S"]
- Maintenant je me retrouve avec un array qui a les lettres dans le bon ordre. Existe-t-il une fonctionnalité du langage qui permet de passer d'un Array à un String?
- Contrôler à nouveau la liste des propriétés/méthodes associés aux Array (vour plus haut)
- La méthode
join()
s'occupe exactement de cela (référence) - Donc je peux passer de ["C", "I", "T", "S"] à "CITS"
- Résolution du problème
Même passage en code :
//Déclarer une variable avec le mot que je veux inverser
var init= "STIC"; //--> "STIC"
//Commencer par le traduir en array
var singleLetters = init.split(""); //--> ["S", "T", "I", "C"]
//Inverser l'ordre des éléments
var reverseLetters = singleLetters.reverse(); //--> ["C", "I", "T", "S"]
//Unire les lettres dans l'ordre inverse
var end = reverseLetters.join(""); //--> "CITS"
Dans cet exemple de code on a utilisé beaucoup de variables qui en fait ne servent pas. Donc on peut améliorer le code (i.e. faire du refactoring) :
var init = "STIC"; //--> "STIC"
var end = init.split("").reverse().join(""); //--> "CITS";
À ce point on a un meilleur algorithme, mais si on voulait connaître l'inverse de "ERGO", il faudrait écrire à nouveau les mêmes passages juste avec une nouvelle valeur associée à la variable init. On peut faire mieux, on peut créer une fonction :
//Déclarer une fonction avec un argument. Ce sera le mot initial
function reverseWord(init) {
//Renvoyer le mot inversée en utilisant l'aglorithme que nous avons créé
return init.split("").reverse().join("");
}
//Maintenant il sera suffisant d'invoquer cette fonction et lui passer le mot en tant qu'argument pour obtenir l'inverse
var sticReverse = reverseWord("Sciences et Technologies de l’Information et de la Communication");
var ergoReverse = reverseWord("Design centré utilisateur et ergonomie");
Workshop
Workshop files from GitHub :
JavaScript et le DOM
Interaction de JavaScript avec le navigateur web :
- L'objet global window
- Inclure JavaScript dans une page HTML
- Manipulation du DOM
- Gestionnaire d'événements
Principe de base :
- Identifier un élément dans le DOM
- Lui appliquer un gestionnaire d'événement
- Créer une fonction qui :
- Identifie les éléments à modifier suite à l'événement
- Applique les modifications et met à jour le DOM
Exemples Codepen.io :
- Démo : mise à jour du DOM après téléchargement de la page
- Simple manipulation du DOM avec JavaScript
- Modifier le comportement "normal" du navigateur web
- Événements liés à la souris
- L'object "event"
- JavaScript et CSS
- L'éléments this dans le DOM
- JavaScript et formulaires HTML
- JavaScript et les événements lié au temps
Ces exemples (et plus) sont disponibles également ici http://codepen.io/collection/XgkejK/
Utiliser JavaScript avec SVG :
Références :
Workshop
Workshop files from GitHub :
Projet 3 / Tâche
Dispositif
Imaginez un design pédagogique interactif dans lequel l'utilisateur puisse déterminer des modifications par rapport au contenu initial.
- Créez une page HTML5/CSS qui contient des éléments interactifs (e.g. click, mouseover, etc.)
- Ajoutez une ou plusieurs manipulations du DOM suite à un événement (e.g. afficher un feedback, remplacer une image, etc.)
- Le tout doit servir à un objectif déclaré dans votre rapport (pas juste votre objectif d'apprentissage !)
Contraintes
- Contenu de la page selon vos envies, mais en rapport avec une thématique MALTT
- Vous devez inclure un fichier JavaScript externe et éviter du code JavaScript dans les attributs (e.g. onclick="...")
- La page doit contenir au moins deux éléments interactifs (e.g. bouton, zone de texte modifiable, ...)
- Vous devez créer au moins une manipulation du DOM qui modifie le contenu de la page sans actualiser la page ou pointer vers un autre lien
- Vous pouvez utiliser du clipart (SVG ou autre) fait par d'autres, mais citez la source dans le rapport et dans la page de votre dispositif
- Vous pouvez utiliser des bouts du code depuis les exemples en cours, mais il faudra au moins adapter le code JavaScript (pas simplement changer/adapter le contenu HTML)
Pour les plus ambitieux
En général : si vous maîtrisiez bien JavaScript, concentrez-vous sur les aspects interactifs/ergonomiques/pédagogiques de l'application : il ne suffit pas de savoir coder pour créer un bon dispositif !
- Niveau intermédiaire
- Vous pouvez essayer l'une des Bibliothèques JavaScript listés ou en proposer une autre.
- Vous pouvez utiliser jQuery (mais pas jQuery UI qu'on verra en P3) à condition que vous ayez compris les principes du "vanilla" JavaScript.
- Niveau avancé
Si vous avez enfin un background informatique avec des bonnes connaissances d'un langage style C++, C#, Java, à la limite PHP, vous pouvez utiliser TypeScript.
Dans ce cas, pensez à utiliser un éditeur de texte qui supporte cette syntaxe, à ma connaissance il n'y a pas de plugin Brackets satisfaisants pour l'instant. Je vous conseille Visual studio code, dont la page sur ce Wiki pourrait être améliorée d'ailleurs - Mattia A. Fritz (discussion) 1 novembre 2016 à 16:49 (CET)
Critères d'évaluation
- Malus
- Mauvais liens (fichier JavaScript, CSS)
- Utilisation de JavaScript dans les attributs HTML
- Copier/coller d'un snippet de code présenté au cours ou tiré d'internet sans aucune modification
- Agencement de la page approximatif
- Interaction pas claires/pas bien indiquées
- Bonus
- Code bien organisé et "élégant"
- Documentation du code (raisonnable : pas plus de commentaires que de code...)
- Utilisation de techniques de programmation (cycles, structure de contrôle, etc.)
- Indications pertinentes sur les interactions disponibles (e.g. guidage, texte descriptif, ...)
- Design graphique soigné (e.g. bonne utilisation CSS)
- Organisation du contenu
Rapport
Faites un rapport selon les guidelines habituelles :
En particulier pour cet exercice, essayez d'expliquer :
- En quoi les interactions que vous avez créées soutiennent vos objectifs d'apprentissage/d'utilisation
Contribution Wiki
Contribution libre comme d'habitude :
Quelques suggestions :
- Ajouter/améliorer Review de ressources pour débuter JavaScript
- Mettre à jour/contrôler les Liens JavaScript
- Cherchez des pages liées à JavaScript mais qui ne sont pas dans la Category:JavaScript
- Corrections/améliorations des pages JavaScript, Tutoriel JavaScript de base, Tutoriel JavaScript côté client
Délai
Lundi 08:59 avant la semaine des cours présentiels P3
Liens
Théoriques
- Introduction à la programmation
- Enseignement de l'informatique à l'école
- Computational Thinking: What and Why? (Wing, 2011)
- Google Computational Thinking
Technique
- JavaScript
- Tutoriel JavaScript de base
- Tutoriel JavaScript côté client
- Tutoriel JavaScript sur W3schools
- Il existe des dizaines de tutos sur le web et des livres mais attention : contrôlez qu'il s'agit de ressources récentes, si non il y a le risque de suivre des pratiques obsolètes.
Bibliographie
- Livre recommandé pour débutants
- JavaScript for Kids (Pas forcément pour enfants, pas super drôle, mais bien écrit). La version e-ebook ne coûte pas très cher et elle est partageable.
- Livres pour débutants/intermédiares avec aussi de la théorie (free on the web/pay printable version)
- Haverbeke, M. (2015). Eloquent JavaScript. A modern Introduction to Programming. Second Edition. San Francisco, CA: No Starch Press. Accès libre depuis internet: http://eloquentjavascript.net/
- Simpson, K. (2015). You Don’t Know JS: Up & Going. O’Reilly Media. Accès libre à la version non editée de toute la série de livres https://github.com/getify/You-Dont-Know-JS
- Livre sur les microinteractions (pas de code)
- Saffer, D. (2014). Microinteractions. Designing with details. Sebastopol, CA: O’Reilly Media.