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

Séance 1

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)

Séance 3 : canvas HTML5, gestion des événements souris, clavier, animation, et persistence HTML5 dans browser 

Supports de cours :

• Modules 3 et 4 du MOOC (gratuit) "HTML5 Coding Essentials and Best Practices"
• Et si besoin : Module 2 du MOOC "JavaScript Introduction" (partie événements)
   
• Vidéo de la séance (14h-17h) 
  Fichier zip d'une correction partielle du TP ci-dessous, codée en live pendant le cours.

Séance 4 : suite animation dans le canvas, persistence côté serveur avec WebServices

• Support de cours : 
  
  
  • Vidéo de la première partie du cours (9h-10h30 animation d'explosions dans le canvas, états du jeu, du joueur, des cookies) et gestion des sons et musiques.
  • Vidéo de la seconde partie du cours (10h30-12h Introduction aux Web Services, NodeJS et Express)
     
  • Live coding "animation dans le canvas", principe des automates à états finis (états du jeu, état des cookies, etc.), télécharger cette archive codée live pendant la première partie du cours (de 9h à 10h30), la dezipper etc.
     
  • Ici un exemple d'animation de particules : https://jsbin.com/safuhim/edit?js,output
     
  • WebServices via github : https://jsonplaceholder.typicode.com/ 
     
  • ICI EXEMPLE FAIT EN LIVE CODING (node + express) très simple. Dezipper et faire "npm install" dans le dossier, puis "node server.js" et ouvrir localhost:8085.
     
  • NodeJS et Express : transparents de présentation de NodeJSet transparents de présentation de Express
    
    
  • 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...)