Points forts
- La formation a été conçue de manière à ce que l'assimilation des concepts se fassent rapidement, de nombreux exercices sont donnés afin que le stagiaire apprenne en pratiquant.
- Les fonctionnalités enseignées sont celles que l'on retrouve le plus souvent en entreprises.
Objectifs
- Créer un objet simple et complexe
- Créer une class et instancier
- Utiliser le système d'héritage simple et en cascade
- Créer une application en POO pour utiliser des frameworks JS
Programme
Jour 1 7h dont 1h30 pause
Introduction – 15 min
Les nouvelles fonctionnalités JS ES6 – 1h de théorie / 1h30 d’exercices
Rappels des fonctionnalités de base JS
Utilisation des variables et de leurs scopes.
Les nouvelles boucles (for in, for on, foreach et surtout map)
Exemple : Utilisation de chaque boucle
Les nouvelles fonctions filter, indexOf, etc.
Exemple : Utilisation des différentes fonctions
Exercice 1 & 2 : Exercice d’algorithmie utilisant les différentes notions apprises
Utilisation de l’asynchrone part 1 – 1h théorie / 1h30 d’exercices
Rappel des principes asynchrone
Exercice : utilisation des callbacks
Exemple : utilisation callback
Les promesses avec then, et avec async await
Exercices : utilisation des promesses
Devoir à la maison – 15 min
QCM
Code à compléter
Jour 2 7h dont 1h30 pause
Correction des devoirs & révisions – 45 min
Utilisation de l’asynchrone part 2 - 45 min de théorie / 1h30 d’exercices
Exemple : utilisation des promesses
Utilisation des API
Exemple : Utilisation de l’api de géolocalisation leaflet
Exercice : Exercice API avec l’API Movie DB
Utilisation des modules – 45 min de théorie / 1h30 d’exercices
Comprendre les modules
Exercice : utilisation des modules
Devoir à la maison – 15 min
QCM
Code à compléter
Jour 3 7h dont 1h30 pause
Correction des devoirs & révisions – 45 min
Les objets le fonctionnement – 45 min de théorie / 1h30 d’exercices
Rappels des bases de l’objet (système stockage de données)
Les attributs, fonctionnement des keys : values
Exemple : création de 3 objets avec 2 simples avec 2 notations différentes et un complexe avec récupération des données
Mini-exercice 1 : création d’un objet simple
Mini-exercice 2 : récupération des données d’un objet simple
Mini-exercice 3 : récupération des données d’un objet complexe
Les méthodes, utiliser des fonctions stockées dans un objet
Exemple : création de 2 objets avec des méthodes interne
Mini-exercice 4 : création d’un objet simple avec des méthodes
Mini-exercice 5 : création d’un objet complexe avec des méthodes
Mini-exercice 6 : récupération des données d’un objet complexe Méthodes et Attributs
Les class – 45min de théorie / 1h30 d’exercices
Problématique de dupliquer des objets ayant la même structure
Définition de la class un modèle de structure pour les objets, utilisation d’un constructeur, concept du this
Définition de l’instanciation d’une class à un objet
Exemple : création de deux class simples (attribut et constructeur) et instanciation à différents objets
Mini-exercice 1 : création d’une class simple et instanciation sur plusieurs objets
Exemple : création d’une class complexe (attribut, constructeur et méthode) et instanciation à différent s objets
Mini-exercice 2 : création d’une class complexe et instanciation sur plusieurs objets
Exemple : injecter des éléments HTML avec une class dans le dom (principe du component)
Projet : utilisation de 2 class complexes injectant des éléments HTML stylisés dans le DOM.
Devoir à la maison – 15 min
QCM
Code à compléter
Jour 4 7h dont 1h30 pause
Correction des devoirs & révisions – 45 min
Les événements dans le constructeur – 45 min de théorie / 1h30 d’exercices
Sélectionner des éléments du DOM dans le constructeur, ajouter un évènement dans le constructeur.
Exemple : utilisation d’un évènement dans une class
Mini-exercice 1 : utilisation de l’évènement dans le constructeur
Les problèmes de data binding (problème avec le this), utilisation des méthodes classiques avec bind() et des Arrow functions
Exemple : création d’un class avec évènement et utilisation de fonction classique
Mini-exercice 2 : création d’un class avec évènement et utilisation de fonction classique
Exemple : création d’un class avec évènement et utilisation des arrow functions
Mini-exercice 3 : création d’un class avec évènement et utilisation des arrow functions
Projet : utilisation de class complexes d’évènements
L’héritage – 45min de théorie / 1h30 d’exercices
Instanciation d’un objet dans un constructeur de class
Exemple : Instanciation dans le constructeur
Utilisation de l’héritage dans une class
Exemple : Utilisation d’un héritage simple
Exemple : Utilisation d’héritage en cascade de plusieurs class
Mini-exercice 1 : Utilisation héritage simple
Mini-exercice 2 Utilisation héritage multiple
Projet : Utilisation de l’héritage de manière pratique
Devoir à la maison – 15 min
QCM
Code à compléter
Jour 5 7h dont 1h30 pause
Correction des devoirs & révisions – 45 min
Les concepts de POO appliqués à JS un langage libre - 1h de théorie / 1h d’exercices
Concept d’encapsulation
Exemple : utilisation de l’encapsulation (private, public)
Mini-exercice 1 : utilisation de l’encapsulation simple
Mini-exercice 2 : quiz sur l’encapsulation
Les getters et les setters
Projet reprenant tout le module - 1h45 d’exercices
Création d’une petite librairie proposant de fonctionnalités fréquentes (slider, ancre à scroll, etc.
Evaluation finale 1h
Pré-requis
- Maîtrisez les fondamentaux de Javascript
Public visé
- Développeurs ayant une connaissance de base de Javascript
