JavaScript, développer des applications web

• Intégrer son code JavaScript dans une application web
• Maîtriser l’objet global window et les APIs de base
• Mettre en oeuvre l’API document afin de manipuler la structure d’une page web
• Réagir dynamiquement aux évènements
• Exploiter les formulaires
• Mettre en oeuvre les principales APIs (ajax, server-sent events, web sockets) de communication avec un backend
• Persister des données localement au sein d’un navigateur web
• Améliorer l’expérience utilisateur via l’exécution de code en tâche de fond

1. Introduction au développement web avec JavaScript

o Où et comment intégrer du code JavaScript

o Scripts et Modules

o APIs pour application Web: modèle de programmation, event loop et évènements.

o Ateliers:

§ Etudes de cas: intégration de code JavaScript

2. Premières APIs

o L’objet global window et ses propriétés principales

o Interface Location

o Interface History

o Interface Navigator

o Ateliers:

§ Obtenir les informations sur le contexte de navigation courant

§ Gestion de la navigation

3. Interagir le document

o L’interface Document, le DOM tree et les autres interfaces notables

o Créer, accéder, modifier, supprimer les éléments du DOM tree

o Modification d’attributs et de style

o Points d’attention concernant les performances

o Virtual DOMs

o Ateliers:

§ Manipulation dynamiques du DOM

4. Gestion d’évènements

o Principes de gestion des évènements: interfaces EventTarget et Event

o Les phases des événements: capture, bubble,…

o Gestion d’évènements via addEventListener ou on-event handlers.

o Gestion de this

o Principaux évènements associés aux éléments HTML.

o Ateliers:

§ Gestion des principaux évènements web: souris, clavier,…

§ Implémentation du drag and drop

5. Gestion des formulaires

o Accéder aux éléments d’un formulaire

o Les évènements des formulaires

o Valider un formulaire

o Ateliers:

§ Formulaires dynamiques

6. Communiquer avec un backend

o Comparaison des différentes stratégies possibles

o Le format JSON

o API RESTFul: consommation via XMLHttpRequest et Fetch

o Server-sent events: réagir à des push events server

o Web sockets: communication bidirectionnelle avec un backend

o Ateliers:

§ Consommation d’API RESTFul via XMLHttpRequest et Fetch

§ Implémentation d’un client SSE

§ Implémentation d’un client Web sockets

7. Persistance et interrogation de données

o Tour d’horizon des technologies de gestion des données dans un navigateur

o Cookies: APIs, gestion espace disque, vie privé et sécurité

o WebStorage: APIs, gestion espace disque, vie privé et sécurité

o IndexedDB: APIs, gestion espace disque, vie privé et sécurité

o Ateliers:

§ Gestion des cookies

§ Mise en oeuvre de web storage

§ Mise en oeuvre de IndexedDB

8. Exécution de scripts en tâche de fond

o Introduction aux web workers

o Infrastructure

o APIs accessibles depuis les web workers

o Ateliers:

§ Création de web workers pour des tâches de calcul et pour de l’I/O web