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
Avis
Chayma B.
Philippe G.
La formation
Beaucoup de mécanismes décrits dans les examples, mais pas dans les slides.
Les +
Bonne explication des concepts, et de leurs évolutions.
Des examples très concrets.
Laurent L.
Nicolas D.
Saifeddin D.
Ludovic R.
Safa A.
Rabii C.
Houda G.
Mouna N.
Nawres G.
Mohamed Ali B.
Aymen C.
Malek L.
Aymen C.
Ahmed Aziz B.
Sara B.
Louay G.
Mohamed Amine C.
Wassim A.
Abdeljabar M.
Les +
Niveau technique et disponibilité du formateur
Thomas D.
Sarra S.
Ines B.
Laurent L.
La formation
En tant que testeur, je n'ai pas eu connaissance de frameworks de tests existants pour tester les applis web, mais ca n'est pas le sujet de ce training.
Le formateur
Vraiment que des commentaires positifs à adresser à Romain, le formateur, toujours disponible, et répondant à toutes mes questions.
Gerald H.
Jingyi L.
Florent V.
La formation
Les travaux pratiques permettent de bien comprendre le contenu de la formation.
Le formateur
Rien à redire. Au top!
Thouraya A.
Asma Y.
Omar S.
Nabil B.
Lamia B.
Marwa A.
La formation
je suis satisfait
Le formateur
je suis satisfait
Nizar T.
Amani B.
Amel T.
Wissem A.
Alain L.
Intissar Z.
Claire R.
Hervé C.
Edin K.
Sébastien L.
Le formateur
Très bon formateur, pédagogue et avec des compétences élevéées.
Les +
Découverte du langage petit à petit et de façon chronologique.
François D.
Stéphane F.
Stéphane L.
La formation
Prestation tres appreciee au global. Le support de cours est perfectible (mise a jour faite en cours). Un document / resume avec Best practices/patterns et erreurs a eviter serait appreciable.
Pascal H.
Commentaire général
Pour ce qui est d'être opérationnel, c'est plutôt un oui/non car comme tout language cela necessite de la pratique derrière pour être à l'aise dans un développement.
Michel Z.
Vincent G.
Christophe M.
La formation
le rappel du matin sur ce qui a été vu la veille est le bienvenu, à garder ;-)
Le formateur
Ca va parfois tres vite, on a du mal à tout assimiler mais c est vrai que le contenu est dense
Quentin G.
Le formateur
Parfois un peu rapide sur des points difficile au moment des corrections d'exercices.
Eric A.
La formation
Je pense que je dois re travailler et que j'ai un peu decroche par moment car j'ai besoin de pratiquer et de comprendre.
Yosra G.
Maxime D.
Le formateur
Interactivité toujours très productive.
Plein d'infos complémentaires à fournir.
Frédéric C.
La formation
Je suis un peu dérouté par certains aspects de ces langages de programmation (pas uniquement esthétiques).
A voir avec la suite du programme.
Le formateur
Grace à Romain, je suis la formation.
Avec quelqu'un d'autre, j'aurais peut-etre décroché car c'est vraiment une maniere plutot speciale de coder tout cela (pour moi).
Les +
Le rythme avec les pauses regulieres et l'alternance Cours-TP.
Commentaire général
Ne sachant pas ce que je ferai sur le nouveau projet, j'ai besoin de voir/d'apprendre plus de choses pour avoir une meilleure apprehension.
Patrice M.
Pascale M.
Les +
L'illustration par des exemples.
La pratique apres la presentation des differents chapitres.
Catherine L.
La formation
J'ai mis "moyennement statisfaite" pour la qualité des TP car je n'ai pas eu assez de temps entre la formation théorique et le TP.
Je ne trouvais pas rapidement de moyens simples pour m'appuyer sur ce qui venait d'être expliqué pour faire les exercices. Il m'aurait fallu plus de temps pour le TP
De plus on ne manipule pas du tout pendant les explications donc arrivés au TP il faut gérer des petites choses quelques fois basiques mais vite bloquantes.
Ces problèmes sont principalement du au fait que la formation soit à distance
j'ai mis aussi "moyennement statisfaite" ds la qualité du support de cours mais plus sur le fait de ne pas retourver facilement ce que l'on venait de faire. Pour les slides je pense que cela pourrait etre bien de les splitter en petits paquets par sujet, car pas facile d'aller chercher info dedans
Donc le "moyennement satisfait" est plus dans l'utilisation des supports à distance que dans le contenu du support lui même ou les sujets des TPs qui sont bien
Le formateur
Le fait que la formation se soit déroulée à distance fait que l'on manque d'échanges spontanés avec le formateur
Les +
La volonté de Romain de vouloir bien faire en fonction du contexte
Amel L.
Khaoula E.
Les +
Les exercises
Nabil S.
Frédéric G.
Le formateur
très bonne connaissance du sujet
