JavaScript développer des applications web

Des bases solides pour développer des applications web en JavaScript

Description 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,...

Ce cours permet aux participants d'acquérir les compétences suivantes

  • 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

Prix: 1260€ HT
Durée: 2 jours
Modalité: Inter en présentiel (demander une formation en intra-entreprise)

Prochaines dates :

PROGRAMME DE LA FORMATION

Module 1

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
  • Atelier: Etudes de cas: intégration de code JavaScript
Module 2

Premières APIs

  • L’objet global window et ses propriétés principales
  • Interface Location
  • Interface History
  • Interface Navigator
  • Atelier: Obtenir les informations sur le contexte de navigation courant
  • Atelier: Gestion de la navigation
Module 3

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
  • Atelier: Manipulation dynamiques du DOM
Module 4

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
  • Atelier: Gestion des principaux évènements web: souris, clavier,...
  • Atelier: Implémentation du drag and drop
Module 5

Gestion des formulaires

  • Accéder aux éléments d’un formulaire
  • Les évènements des formulaires
  • Valider un formulaire
  • Atelier: Formulaires dynamiques
Module 6

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
  • Atelier: Consommation d’API RESTFul via XMLHttpRequest et Fetch
  • Atelier: Implémentation d’un client SSE
  • Atelier: Implémentation d’un client Web sockets
Module 7

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é
  • Atelier: Gestion des cookies
  • Atelier: Mise en oeuvre de web storage
  • Atelier: Mise en oeuvre de IndexedDB
Module 8

Exécution de scripts en tâche de fond

  • Introduction aux web workers
  • Infrastructure
  • APIs accessibles depuis les web workers
  • IndexedDB: APIs, gestion espace disque, vie privé et sécurité
  • Atelier: Création de web workers pour des tâches de calcul et pour de l’I/O web

Formations suggérées

JavaScript les fondamentaux du langage (JSFOND)

2 jours

ECMAScript (ECMASCRIPT)

2 jours

TypeScript (TYPESCRIPT)

2 jours

Node.js (NODEJS)

3 jours

Vue.js (VUEJS)

3 jours

Angular (ANGULAR)

3 jours

PWA - Progressive Web Applications (PWA)

2 jours

RxJS programmation réactive (RXJS)

2 jours

Nous contacter

Paris

48 Rue Jacques Dulud

92200 Neuilly-sur-Seine

+33 1 41 38 52 00

Lille

74 rue des Arts

59800 Lille

+33 3 66 72 61 32

Strasbourg

Crystal Park, 1 Avenue de l'Europe

67300 Schiltigheim

+33 3 88 47 04 38

Luxembourg

2, rue Drosbach

L-3372 Leudelange, Luxembourg

+352 26 54 47 1

Bordeaux

c/o Mama Works, 51 quai Lawton

33300 Bordeaux

Nantes

Zero Newton, 3 Rue Albert Camus

44000 Nantes

+33 2 55 59 07 00