DIU-EIL Lyon Bloc 1

Introduction à la programmation Web client en JavaScript

Romuald THION

Mercredi 24 avril 2019

Informations générales

Déroulé du mercredi 24/04/19, 10h-17h

  1. 10h00-11h00 Présentation générale plénière
  2. 11h00-13h00 Découverte de la programmation dans le navigateur
  3. 14h00-16h30 Interface dynamique
  4. 16h30-17h00 Restitution et retours

https://gonnord.gitlabpages.inria.fr/diu-lyon/bloc1/WEB/README.html

Objectifs pédagogiques

  • Découvrir les traits de JavaScript
    • pour la pratique, la culture et l’illustration de concepts
  • Découvrir la programmation front dans le navigateur
    • HTML5, CSS3 et JavaScript
    • les API du navigateur (DOM, CSS, XHR, …)
  • Présenter des références, bonnes pratiques et outils modernes
  • Pratiquer la programmation événementielle / asynchrone

Couverture du programme du DIU

  • 1.2.4. Diversité des langages de programmation
    • JavaScript : asynchrone, fermetures, …
  • 1.2.5. Langages du Web : HTML, CSS
    • Survol et des applications
  • 1.2.6. Programmation web côté client : Javascript
  • 1.2.7. Gestion des événements dans une interface web
    • Le coeur du sujet
  • 1.2.8. Spécification, prototypage et tests
    • Tests unitaires automatisés

Ressources Lyon 1

Introduction à la programmation Web

Architecture générale client/serveur

Le serveur (a.k.a. back)

Serveur Web : répond aux requêtes HTTP, sert des pages :

Serveur web statique

Serveur d’application : génère des pages, gère des applications Web :

Serveur d'application

Le client (a.k.a. front)

Le trio HTML5, CSS3 et JavaScript (ES6+)

Le trio HTML5, CSS3, JS

Guides tous niveaux

https://developer.mozilla.org/en-US/docs/Learn

Le langage du navigateur : JavaScript

Des origines à ECMAScript 6 (2015)

Quelques caractéristiques :

  • Inspiré par la programmation fonctionnelle
  • Un modèle objet basé sur les prototypes
  • Une API fournie par le navigateur
  • Un riche écosystème via NPM

La boucle d’évènements

Voir What the heck is the event loop anyway?, In The Loop et The browser event loop (source de l’image).

La boucle d'événements du navigateur

La boucle d’événement, grossièrement

Exemple avec setTimeout

Modèle objet basé sur les prototypes

Voir javascript.info, Chap. 4, 8 et 9 et Working with objects

La chaîne de prototypes

La chaîne de prototypes

Programmation fonctionnelle

Voir javascript.info, Chap. 6, First-class citizens functions, closures et arrows functions

Exemple de programmation fonctionnelle : l’usine à fonctions

Exemple de programmation fonctionnelle : les méthodes de Array

Exemple de programmation fonctionnelle : décorateur maybe

Exemple de programmation fonctionnelle : décorateur memoize

Document Object Model (DOM)

Le DOM fait le lien entre JavaScript et les documents (HTML, SVG, XML).

Voir Introduction to the DOM et Document Object Model (DOM)

Programmation asynchrone : CPS, callbacks

Voir javascript.info, Chap. 11, Overview of Events and Handlers et Callback function, Using Callbacks

Exemple AJAX avec l’API fetch

Activité pratique “programmation web”

  1. Matin : découverte de la programmation client
  2. Après-midi : interface dynamique

Documentation de référence

Outillage et bonne pratiques

Démonstration

les outils développeurs du navigateur

Réalisation des supports

Outils

Crédits images

Wikimedia Commons, Mozilla Developper Network, Node.js®, Ethan Bradley et Axel Rauschmayer.

Licence

CC BY-NC-SA 3.0 FR