STIC:STIC I - exercice 3 (Xerneas)

Cette page fait partie des archives des cours Cours STIC (STIC I, STIC II,STIC III,STIC IV)

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 : Retour sur la syntaxe de JavaScript et les exercices du Workshop (cf. prérequis)
• 09:30 - 10:30 : Introduction à JavaScript côté client
• -- pause --
• 11:00 - 12:00 : Activités/Workshop JavaScript côté client
• 12:00 - 12:30 : (s'il reste du temps) Démo Web API (géolocalisation, Speech Recognition, ...)

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

JavaScript et le DOM

Interaction de JavaScript avec le navigateur web, concepts principaux :

• L'objet global window
• JavaScript dans une page HTML
• Manipulation du DOM
• Gestionnaire d'événements :
  1. Identifier un élément dans le DOM
  2. Lui appliquer un gestionnaire d'événement
  3. Créer une fonction qui :
     • Identifie les éléments à modifier suite à l'événement
     • Applique les modifications et met à jour le DOM

Présentation interactive

Présentation avec bouts de code à tester dans la console de votre navigateur :

• Slides interactives JavaScript et le DOM

Analyse/Activité sur un exemple de base

Le "célèbre" compteur :

• Démo : mise à jour du DOM après téléchargement de la page

À essayer dans l'ordre, juste par analogie/intuition :

1. Faire diminuer au lieu d'augmenter le compteur à chaque clique d'une unité (hint: vous pouvez modifier le HTML pour être cohérents avec l'expérience utilisateur)
2. Faire démarrer le compteur à 100 (hint: vous devez modifier le HTML initial pour refléter le changement)
3. Faire diminuer le compteur de 5 unités à la fois
4. Placer le compteur à 1 et associer à chaque clique une multiplication de 10

Fix the problem: "Shouting App"

L'exemple suivant montre une petite application qui permet de crier (i.e. transformer un texte en majuscules). Le code JavaScript de l'exemple suivant est correct, mais l'application ne marche pas. Essayez par analogie à l'exemple du compteur de trouver ce qui manque dans le HTML pour que l'application marche :

• Application à corriger

Solution

• Voir la solution

API: Utilisation des éléments mis à disposition par le langage

Dans la "Shouting App" nous avons utilisé la méthode .toUpperCase() qui nous a permis d'obtenir exactement ce qui était dans nos intentions (i.e. crier). Bien évidemment, il n'y a pas toujours une méthode qui fait exactement ce qu'on veut, et il faut donc construire notre fonction en combinant plusieurs éléments.

C'est à ce moment qu'il est bien d'utiliser une référence aux élément que le langage et/ou l'environnement mettent à disposition pour obtenir ce qu'on veut, ce qu'on appelle une API, de l'anglais Application Programming Interface, ou Interface de programmation en français.

• Voir par exemple la référence sur W3Schools pour JavaScript et le DOM

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'exemple

Par extension de l'exemple fixé au point précédent, transformez l'application pour que l'utilisateur puisse obtenir l'envers de ce qu'il a écrit dans le textinput au lieu que la transformation en majuscules.

• Créez l'application avec des fichiers sur votre ordinateur (i.e. avec Brackets), pas dans Codepen.io
• Mettez le code JavaScript dans un fichier externe et incorporez le dans votre page html, e.g. :

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
</head>
<body>
<!-- Ajoutez le code HTML nécessaire ici -->

<!-- Laissez le lien au fichier JavaScript juste avant le tag de fermeture </body>. Modifiez l'attribut src pour pointer au fichier que vous avez créé -->
<script src="path/to/file.js"></script>
</body>
</html>

• Hint : récupérez la fonction qu'on a vu plus tôt pour inverser une suite de caractères

Solution de l'exemple

Code HTML

<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Reverse word</title>
</head>

<body>
    <!-- Ajoutez le code HTML nécessaire ici -->
    <!-- Something is mîssing in the HTML, see the JS code to find out what and correct it -->
    <h1>Fix this example</h1>
    <p>There is something missing in the HTML of this example to make it work, find and correct the problem.</p>

    <!-- Input + Element for the event listener -->
    <input id="shoutInput">
    <button id="shoutBtn">Shout it!</button>

    <!-- Output -->
    <p id="shoutOutput"></p>
    <!-- Laissez le lien au fichier JavaScript juste avant le tag de fermeture </body>. Modifiez l'attribut src pour pointer au fichier que vous avez créé -->
    <script src="app.js"></script>
</body>

</html>

Code JS

//The code here is good
//Identiy the interactive elements
var messageToShout = document.getElementById("shoutInput");
var clickToShout = document.getElementById("shoutBtn");
var shoutBox = document.getElementById("shoutOutput");

//Declaration of function
function reverseWord(init) {
    //Renvoyer le mot inversée en utilisant l'aglorithme que nous avons créé
    return init.split("").reverse().join("");
}

//Event listener and handler
clickToShout.onclick = function () {
    shoutBox.innerHTML = reverseWord(messageToShout.value);
};

Exemples

Vous pouvez vous appuyez sur les exemples suivantes pour vos applications à rendre sans la nécessité de les citer. Il faudra par contre les modifier/adapter aux objectifs de votre application.

Manipulation du DOM et événement

• 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/

Un autre exemple

Voici un exemple pour une fenêtre JavaScript qui permet de montrer la bonne réponse avec une fenêtre qui s'affiche et sur le bouton après avoir cliqué dessus :

nom du bouton à cliquer.onclick = function () {

this.innerHTML = "texte qui apparaît et qui reste après avoir cliqué sur le bouton.";

alert("texte qui apparaît sur la fenêtre qui s'affiche.");        

Utiliser JavaScript avec SVG

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

Workshop

Workshop files from GitHub :

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

Références

• Tutoriel JavaScript côté client
• JavaScript and HTML DOM reference on W3Schools (i.e. API de JavaScript côté client)

Web API (avancé)

Grâce à l'environnement du navigateur web, JavaScript a accès non seulement au DOM, mais également à d'autres éléments/informations. Pour les plus ambitieux, vous pouvez regarder/essayer :

• La géolocalisation : possibilité de récupérer la position de l'utilisateur (avec son consentement!)
  • Voir HTML5 Geolocation sur W3Schools
• Le canvas : possibilité de dessiner à travers JavaScript sur une "toile" représenté par l'élément HTML5 <canvas></canvas>. Utilisé souvent pour des jeux.
  • Voir Canvas (HTML5) sur ce wiki
  • HTML5 Canvas sur W3Schools

NB : on verra la possibilité d'interagir avec des éléments Audio/Video dans l'exercice 4 (voir également HTML5 audio et video)

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
• 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)
• 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

Dimanche 20:00 avant la semaine des cours présentiels P3

Feedback intermédiaire

Vous pouvez demander un feedback intermédiaire sur votre travail à travers la page discussion de cet exercice (voir Aide plus bas) au plus tard 2 semaines avant le délai.

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
• JavaScript and HTML DOM reference on 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)
• Vidéo sur le fonctionnement des événements en JavaScript par Philip Roberts (en anglais, environ 25min.)

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 (pas de code)

• 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.

Aide

Discussion de cette page

Utilisez la page discussion de cette page pour poser des questions. Pour insérer un nouveau titre, utilisez simplement le "+".

Important: Si vous cliquez sur l'étoile ("Ajouter cette page à votre liste de suivi"), le wiki vous enverra un mail après chaque modification de la page.

Séminaire de codage

Le lundi après la semaine des cours en présence (i.e. le lundi suivant le cours STIC du vendredi), un séminaire de codage est organisé par TECFA.

• voir Séminaire de codage sur Moodle TECFA

Quelques conseils

Voici quelques conseils pour cet exercice :

• Ne vous lancez pas tout de suite dans votre projet d'application. Essayez d'abord des exemples, donnez-vous un petit objectif atteignable (e.g. faire marcher un bouton) et gagnez confiance dans la compréhension du code.
• Commentez votre code, pas seulement/forcément en fonction de ce que le code fait, mais surtout pour la raison (quelle est l'intention du code?)
• Référez vous aux concepts constitutifs de la pensée computationnelle (voir Slide pour l'ex2)
• Par exemple, utilisez console.log("...") pour décomposer votre code et identifier la source du problème. Imaginez d'avoir un bouton qui déclenche une fonction quelconque. Vous cliquez sur le bouton et ça ne marche pas. Votre problème peut-être :
  1. Le gestionnaire d'événement associé au bouton ne marche pas
  2. La fonction déclenchée ne marche pas

var myBtn = document.getElementById("clickMe");
//Gestionnaire d'événement
myBtn.onclick = function () {
  //Mettez ici un console.log pour être sûr que votre événement est déclenché
  console.log("Le bouton clickMe marche!");
  //Puis votre fonction quelconque
  doSomething();
}

//Définissez votre fonction
function doSomething() {
  //Mettez ici un console.log pour être sûr que la fonction est invoquée
  console.log("doSomething a été invoquée!");
  //suite de votre code...
}

Avec ce type de décomposition vous pouvez savoir si le problème est dans le gestionnaire d'événement ou dans la fonction. Quand tout marche correctement, pensez à enlever les console.log().

Erreurs dans Brackets

À partir de la version 1.11 de Brackets, vous pouvez obtenir des alerts ou des erreurs du type :

• ERROR: 'document' is not defined. [no-undef]
• ERROR: 'console' is not defined. [no-undef]

À ce propos voir : Débug JavaScript sur la page de Brackets