Logo JavaScript et les APIs Web

Formation JavaScript et les APIs Web

JavaScript est un langage de programmation de script côté client qui est principalement utilisé pour créer des pages web interactives et dynamiques. Il peut être utilisé pour ajouter de l'interactivité aux pages web en exécutant du code côté client lorsque des événements tels que le clic sur un bouton ou le chargement de la page se produisent. Les APIs Web (Application Programming Interfaces) sont des interfaces de programmation qui permettent aux développeurs de créer des applications qui interagissent avec d'autres services ou ressources sur le Web. Elles sont généralement définies avec des protocoles de communication tels que HTTP et permettent aux développeurs d'accéder à des données ou des fonctionnalités d'autres services à l'aide de requêtes et de réponses. JavaScript et les APIs Web sont souvent utilisés conjointement pour créer des applications Web avancées et interactives. Par exemple, une application peut utiliser une API Web pour accéder à des données stockées sur un serveur distant, puis utiliser du JavaScript pour afficher ces données de manière interactive à l'utilisateur. Les APIs Web sont également souvent utilisées pour ajouter des fonctionnalités telles que la géolocalisation, la notification de poussée et l'accès aux appareils de périphérique tels que la caméra ou le microphone.

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 26/12/2022