STIC:STIC I - exercice 3 (Xerneas)

Cette page fait partie des cours STIC I et STIC II

Cet article est en construction: un auteur est en train de le modifier.

En principe, le ou les auteurs en question devraient bientôt présenter une meilleure version.

---

STIC

Introduction

Cet exercice introduit le développement de page/application web interactives avec JavaScript.

Connaissances/compétences envisagées

À l'issue de cet exercice vous devez avoir acquis les connaissances/compétences suivantes :

• Consolider les bases de la programmation et ses composantes principales (variables, types de données, structure de contrôle, etc.)
• Savoir reconnaître/identifier une API et comprendre que, au fond, une API signifie tout simplement: comment obtenir ce que je veux que la machine exécute
• 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
• Comprendre l'implémentation de JavaScript dans un navigateur web et sur des pages web dynamiques
• Créer des interactions simples à travers la combinaison gestionnaire d'événement + manipulation du DOM
• Savoir de l'existence des Web API du navigateur (Géolocalisation, Speech Recognition, Audio/Video -> ex4, ...)

Prérequis

• Tutoriel JavaScript de base
• Activité complémentaire avec exemples/hands-on/tâches sur JavaScript essentials

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 à JavaScript côté client
• -- pause --
• 11:00 - 12:30 : JavaScript et le DOM + Web API

Introduction à JavaScript côté client

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

Retour sur 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)
• Instructions
  1. Expressions : éléments individuels du langage, e.g. var, +, ., ...
  2. Statements : composition d'expressions, e.g. var cours = "STIC" + " I";
  3. Bloc de code : composition de statements qui partagent le même scope, e.g. function () { ... }
• Deux types d'instructions :
  1. Modifier l'état de la logique de l'application (i.e. "write")
  2. 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 :

• Tutoriel JavaScript de base

Exemple analysé

Problème : je veux obtenir l'inverse d'un mot. E.g. STIC --> CITS

Démarche :

1. Avec quelle type de données on a à faire ? Une suite de caractère --> String
2. 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
3. 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"]
4. 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"]
5. 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"
6. 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");

Extension de l'algorithme à une application concrète

À faire : compléter l'exemple avec Speech Recognition

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 :

1. Identifier un élément dans le DOM
2. Lui appliquer un gestionnaire d'événement
3. Créer une fonction qui :
   1. Identifie les éléments à modifier suite à l'événement
   2. 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 :

• Ajouter des éléments SVG
• Rendre des éléments SVG interactifs

Références :

• Tutoriel JavaScript côté client

Workshop

Workshop files from GitHub :

• https://github.com/MALTT-STIC/stic-1-javascript-client-side

Web API

Á faire : quelques exemples Géolocalisation, Canvas, ...

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 :

• voir STIC:Rapport STIC I et II

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 :

• STIC:Rapport STIC I et II#Contribution_Wiki

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

Ressources

Théoriques

• Introduction à la programmation
• Enseignement de l'informatique à l'école
  • Débat RTS

Techniques

Références de base

• JavaScript
• Tutoriel JavaScript de base
• Tutoriel JavaScript côté client
• Review de ressources pour débuter JavaScript
• 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.

Références plus avancées

• Canvas (HTML5) - API pour déssiner
• Géolocalisation sur MDN ou W3Schools
• Speech Recognition (very experimental)

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.

Livres sur informatique/codage (non techniques)

• Denning, P. J., & Martell, C. H. (2015). Great Principles of Computing. Cambridge, MA: MIT press.
• Petzold, C. (2000). Code. The Hidden Language of Computer Hardware and Software. Redmond, WA: Microsoft Press.