L3 Miage 2021-2022 Introduction à JavaScript et aux API W3C standards

Séance 1 : introduction à JavaScript, rappels, outils, Moocs de référence

• GITHUB DE CE COURS : https://github.com/micbuffa/L3Miage2021-2022.git
  
  
  
• Transparents présentés dedans vous trouverez des liens vers les MOOCs dont on se servira comme référence dans les TPs.
   
• Vidéos du cours :
  • Partie 1 : https://youtu.be/xP4j5_aWTgY 
  • Partie 2 : https://youtu.be/EKc8npYuEvM
     
• Pour le premier TP, vous aurez besoin de regarder :
  1. comment fonctionnent les événements et le DOM (chapitre 2 "Adding Interactivity to HTML Documents") du MOOC JavaScript Introduction)
  2. Comment gérer le drag'n'drop (Chapitre 3.3 du Mooc "HTML5 Apps and Games")

Live coding : environnement de développement, rappel sur les fonctions, les objets, les classes, intro aux modules, le DOM, les événements...

Séance 2: rappels sur les éléments vus en TP (fonctions, callbacks, tableaux, classes), commentaire sur le TP (drag'n'drop, détection chaines de trois couleurs ou plus)

On reprends les transparents du cours et on fait du live coding. Les exemples faits en cours seront sur le github du cours dans COURS/Seance2.

Vidéos du cours :

• Partie 1 (à venir) : j'ai dû partir précipitemment loin de chez moi pour raisons personnelles et je n'ai pas pu uploader les vidéos. Ce sera fait à mon retour mercredi 19/1.
• Partie 3 (à venir) : idem

La correction du drag'n'drop et de la détection de groupes de cookies identiques dans la grille du TP1 est présente dans le github du cours (dans TPS/TP1/correctionFaiteEnLiveAvecGroupeTP1).

Les exemples jsbin montrés sont ici :

• Simple écouteur avec fonction flèche 
• Différence de traitement du this avec un écouteur dans une classe écrit avec une fonction flèche et de manière traditionnelle 
• Iterateur forEach() et map() sur un tableau 
• Exemple avec des classes, héritage propriété calculée, champs privés etc. 

Séance 3 : programmation du canvas HTML5, asset loader, gestion des événements etc.

Supports de cours dans les MOOCs :

• HTML5 Coding Essential and Best Practices : chapitres 2 (dessin dans Canvas) et 3 (animation)
• HTML5 Apps and Games, section sur la programmation de jeux (sprites, etc.) et sur WebAudio (fin du chapitre 1 sur le multimedia avancé)

Utilisation d'un canvas HTML5

1. Comprendre l'utilisation du canvas HTML5 : simple dessin
2. Animation à 60 images secondes avec requestAnimationFrame
3. Animer plusieurs objets,
4. Déclencher des animations (et les arrêter) à des fréquences < 60 images/s,
5. Avancé : gérer l'animation en fonction du temps,
6. Animer un joueur et gérer les événements clavier,
7. Gérer les événements souris,
8. Détecter les collisions entre objets et obstacles,
9. Utiliser des classes, faire un petit moteur de jeu
10. Travailler avec des images ou avec des sprites.

Exemples vus en classe :

• Exemple basique montrant une animation dans un canvas, le chargement et le dessin d'une image, la gestion de la souris, comment récupérer sa position exacte avec getBoundingRect(), etc. Pour aller plus loin, voir les chapitres 2 et 3 du MOOC "HTML5 coding essentials and best practices",
• Pour le chargement multiple d'images et de sons, le programme proposé en TP, sur lequel j'ai fait du live coding, propose un "asset loader" utilisant la librairie HowlerJS pour la gestion des sons et musiques. Vous trouverez l'exemple fait en live coding dans le repository github du cours, dans TP3/TP3_faitEnCours 
   

Exemples dont j'ai parlé en TP :

• Exemple simple d'animation et contrôle pour qu'un objet suive la souris : https://jsbin.com/jegamas/edit?js,output
  
   
• Petite évolution de l'exemple précédent : https://jsbin.com/voyowo/3/edit?js,output (montre un "monstre rectangulaire qui suit la souris. Animation à 60im/s avec request animation frame et "animation secondaire" à l'aide de setInterval pour qu'il change de couleur toutes les n secondes. Je montre aussi dans cet exemple comment on peut mesurer précisément le temps dans la boucle d'animation.
   
• Ici exemple de tests de collision, gestion du déplacement d'un objet, affichage d'obstacles : https://jsbin.com/gacezog/edit?output
   
• Ici un exemple de char qui tire (souris + barre espace et bouton 1 souris) :Projet zip avec un char qui tire et suit la souris. Dezipper, ouvrir le folder avec Visual Studio Code, ouvrir le fichier index.html et le lancer avec click droit/Open With Live Server (si vous n'avez pas cette option, installez l'extension VSCode "Live Server"). C'est un bon exemple de squelette de jeu minimal pour faire un jeu de chars. Montre les classes, les événements, le dessin et l'animation dans un canvas HTML5. Pour approfondir les fonctions de dessins dans le canvas, voir les chapitres 3 et 4 du MOOC HTML5 Coding Essentials and best practices.

Exemples de Snakes (à re-écrire avec des classes, ce serait génial d'avoir plusieurs serpents etc.)

• https://jsbin.com/mojape/3/<wbr/>edit?js,output
• https://jsbin.com/zokudaw/<wbr/>edit?output
• https://jsbin.com/bofimu/edit?<wbr/>js,output
• Variante d'un des précédents avec un "effet retard" https://jsbin.com/<wbr/>sipata/edit?html,css,js,output

 TP3 : le jeu du TP1 et TP2, mais cette fois-ci avec un canvas HTML5

• Sujet du TP 

Séance 4 : Persistence, Introduction à NodeJS et aux Web Services

Supports de cours :

• NodeJS et Express : transparents de présentation de NodeJSet transparents de présentation de Express
  • Sur le repository github du cours, regarder dans Cours/Seance4/exemple_api_WS.  Copier cet exemple dans un répertoire à vous,  faite "npm install" dans le dossier, puis "node server.js" et ouvrir localhost:8085. On va le modifier en live coding pendant le cours.
     
• Site web pour tester des Web Services : https://jsonplaceholder.typicode.com/
  • Exemple de fetch pour récupérer des données sur jsonplaceholder.typicode.com
     
• Présentation détaillée de la fetch API
  • Voir aussi fetch and await/async
    
    
• Outils pour le développeur Web (sélection perso...)