SFEIR InstituteJSDEVWEB
JavaScript Développer des applications web
Des bases solides pour développer des applications web en JavaScript
2 jour(s) / 14h
Présentation du cours
Cette formation couvre les aspects fondamentaux du développement d’application Web avec JavaScript. Ces bases sont indispensables pour le développement d’applications front end en JavaScript.
Le modèle d’exécution de code basé sur la notion d’event loop sera vu en détail. Les APIs fondamentales disponibles au sein d’un navigateur web moderne seront mises en oeuvre: objet global window, le DOM, les évènements, la communication ajax, server-sent events, websockets, la persistance des données via web storage ou indexedDB, l’exécution de code en tâche de fond via web workers,…
Public cible
- 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
Programme
- Développeurs, intégrateurs, architectes logiciel, chefs de projet technique
Programme
- Avoir suivi le cours JavaScript: Les fondamentaux du langage ou avoir des connaissances équivalentes
- Connaissances de base en HTML
- Introduction au développement web avec JavaScript
- Où et comment intégrer du code JavaScript
- Scripts et Modules
- APIs pour application Web: modèle de programmation, event loop et évènements.
- Ateliers:
- Etudes de cas: intégration de code JavaScript
- Premières APIs
- L’objet global window et ses propriétés principales
- Interface Location
- Interface History
- Interface Navigator
- Ateliers:
- Obtenir les informations sur le contexte de navigation courant
- Gestion de la navigation
- Interagir le document
- L’interface Document, le DOM tree et les autres interfaces notables
- Créer, accéder, modifier, supprimer les éléments du DOM tree
- Modification d’attributs et de style
- Points d’attention concernant les performances
- Virtual DOMs
- Ateliers:
- Manipulation dynamiques du DOM
- Gestion d’évènements
- Principes de gestion des évènements: interfaces EventTarget et Event
- Les phases des événements: capture, bubble,…
- Gestion d’évènements via addEventListener ou on-event handlers.
- Gestion de this
- Principaux évènements associés aux éléments HTML.
- Ateliers:
- Gestion des principaux évènements web: souris, clavier,…
- Implémentation du drag and drop
- Gestion des formulaires
- Accéder aux éléments d’un formulaire
- Les évènements des formulaires
- Valider un formulaire
- Ateliers:
- Formulaires dynamiques
- Communiquer avec un backend
- Comparaison des différentes stratégies possibles
- Le format JSON
- API RESTFul: consommation via XMLHttpRequest et Fetch
- Server-sent events: réagir à des push events server
- Web sockets: communication bidirectionnelle avec un backend
- Ateliers:
- Consommation d’API RESTFul via XMLHttpRequest et Fetch
- Implémentation d’un client SSE
- Implémentation d’un client Web sockets
- Persistance et interrogation de données
- Tour d’horizon des technologies de gestion des données dans un navigateur
- Cookies: APIs, gestion espace disque, vie privé et sécurité
- WebStorage: APIs, gestion espace disque, vie privé et sécurité
- IndexedDB: APIs, gestion espace disque, vie privé et sécurité
- Ateliers:
- Gestion des cookies
- Mise en oeuvre de web storage
- Mise en oeuvre de IndexedDB
- Exécution de scripts en tâche de fond
- Introduction aux web workers
- Infrastructure
- APIs accessibles depuis les web workers
- Ateliers:
- Création de web workers pour des tâches de calcul et pour de l’I/O web