Logo JavaScript et les APIs Web

Formation JavaScript et les APIs Web

JavaScript a été créé en 1995 par Netscape. A l’origine conçu comme un langage de script léger accompagnant Java, il le remplace aujourd’hui dans de nombreux domaines. Une norme appelée ECMAScript est créé en 1997, elle rend le langage industriel avec ECMAScript 6 ou ECMAScript 2015. Une nouvelle version d’ECMAScript sort désormais chaque année au mois de juin. Cette formation couvre les concepts du langage, notamment les différences au niveau du modèle objet par rapport à des langages comme Java. Puis nous nous attarderons sur le DOM et les autres APIs proposés par le navigateurs que l'on appelle plus communément les APIs Web.

Objectifs pédagogiques / Compétences visées

  • Développer des programmes en JavaScript
  • Comprendre les nouveaux API et nouvelles syntaxes
  • Connaître les différences entre le modèle objet de JavaScript et celui de Java
  • Manipuler le contenu de la page web avec le DOM
  • Connaître et écouter les événements du navigateur
  • Echanger des données avec le serveur

Pré-requis

  • Être au niveau de la formation HTML, CSS et les bases du web
  • Avoir quelques notions de programmation : variables, boucles, fonctions

Public

  • Développeurs
  • Chefs de projets

Programme

Jour 1

Introduction

  • Les IDE JavaScript : Visual Studio Code, WebStorm, EditorConfig
  • Historique et documentation
  • Fonctionnement d’un moteur JavaScript : interpretation, compilation JIT
  • Compatibilité des navigateurs, mode strict, transpilers, polyfills

Syntaxe et APIs JavaScript

  • Types primitifs : boolean, number, string
  • Types objets : array, object, function
  • Types spéciaux : undefined, null
  • Variables et portées : var, let, const
  • Les opérateurs et structures de contrôle
  • Les API du langage : String, Array, RegExp

Fonctions

  • Déclaration : function declaration, anonymous function expression, named function expression
  • Paramètres : nombre, options, valeur par défaut, fonctions variadiques
  • Gestion d’erreurs, exceptions
  • Scope et closure
  • Callbacks synchrones
  • Callbacks asynchrones et boucle d’événement
  • API Function : call, apply, bind

Jour 2

Programmation Orienté Objet

  • Modèle statique (classes en Java) vs Modèle dynamique (dictionnaires en Java)
  • Extensibilité des objets, get/set, defineProperty
  • Object Literal et JSON
  • Factory Function
  • Constructor Function et Prototype
  • Héritage

ECMAScript 6 / ECMAScript 2015

  • Portées de bloc : let, const
  • Default Params
  • Rest, Spread operators
  • Shorthand, method, computed properties
  • Template strings
  • Déstructuration des tableaux et des objets
  • Classes, héritage, super, static
  • Itérables, boucle for .. of
  • Générateurs, symboles
  • Modules ECMAScript
  • Nouveaux API : Map, Set, Reflect, Proxy, Object, String, Array…

ECMAScript 7, 8, 9, 10, 11, ESNext

  • ES7 / ES2016 : Exponentiation, Array.prototype.includes
  • ES8 / ES2017 : Virgules finales, async / await, Object.values/entries, String Padding, Atomics
  • ES9 / ES2018 : Object Rest/Spread, Nouveautés RegExp, Promise.prototype.finally...
  • ES10 / ES2019 : Optional catch binding, Array.prototype.{flat,flatMap}...
  • ESNext : le futur de JavaScript, TC39, processus de normalisation

Jour 3

Manipuler du HTML avec le DOM

  • Représentation du HTML sous la forme d’un arbre
  • Les interfaces Document, Node, Element, EventTarget
  • Les interface HTMLElement, SVGElement et leurs dérivés
  • Lire et modifier le contenu d’une page web

Les événements du web

  • Souscrire et se désabonner d’un événement
  • L’interface Event et ses dérivés : MouseEvent, KeyboardEvent…
  • Propagation et actions par défaut
  • Les événements des formulaires
  • Les événements mobiles : Touch et Pointer
  • Les événements Media
  • Le Drag and Drop

Jour 4

Modifier la mise en forme avec CSSOM

  • La propriété style de HTMLElement
  • Modifier des classes avec className et classList
  • Animer avec requestAnimationFrame
  • Animer avec l'API Web Animations

Communiquer avec le serveur

  • Requête AJAX avec XMLHttpRequest v2 et fetch
  • La bibliothèque axios pour des requêtes simplifiées
  • Echanges bi-directionnels avec les WebSockets
  • Server-sent events
  • L’API Beacon

API de stockage

  • Manipuler les cookies
  • API Storage : sessionStorage, localStorage
  • IndexedDB pour des données structurées
  • pushState et API History

Moyens pédagogiques et techniques

  • Formateur validé par nos équipes techniques et pédagogiques
  • Salle de formation informatisée
  • Support de cours numérique

Suivi et appréciation des résultats

  • Questions orales ou écrites (QCM)
  • Exercices pratiques
  • Formulaires d'évaluation
Dernière modification le 08/03/2020