Résumé du cours
Le web est devenu très dynamique et interactif. Des interfaces utilisateurs (UI) riches sont désormais nécessaires à la fois pour les back-offices et le côté front. JavaScript, avec sa composante AJAX, sont donc aujourd'hui devenus indispensables dans le développement d'un site web. Et bien que jQuery reste un outil très intéressant et plus facile d'accès, on ne peut plus passer outre du JavaScript natif, notamment pour les nouveautés apportées par le HTML5 comme l’utilisation de la géolocalisation ou le stockage de données hors ligne. JavaScript est devenu l’élément central des applications web et apporte toute la couche réactive en temps réel.
Aujourd’hui la communauté JS est en pleine effervescence et de nombreux frameworks et technologies existent : React, Meteor, Node, Angular. Le cours abordera ces frameworks et leur fonctionnement interne, ainsi que les tendances émergentes. Les axes majeurs de JavaScript vous permettront de :
- Manipuler le contenu de la page
- Animer son aspect graphique
- Mettre en place l'aspect interactif grâce aux événements déclenchés par l'utilisateur
- Continuer à dialoguer avec le serveur sans recharger la page (AJAX)
- Utiliser des librairies comme jQuery et Angular au besoin
- Aborder sereinement tout nouveau framework JS et anticiper les effets de mode
Par ailleurs, c'est un langage complexe avec beaucoup de subtilités à connaître, et il faut désormais pousser l'abstraction et l'organisation à un niveau supérieur, via la Programmation Orientée Objet (POO).
Moyens d'évaluation :
- Quiz pré-formation de vérification des connaissances (si applicable)
- Évaluations formatives pendant la formation, à travers les travaux pratiques réalisés sur les labs à l’issue de chaque module, QCM, mises en situation…
- Complétion par chaque participant d’un questionnaire et/ou questionnaire de positionnement en amont et à l’issue de la formation pour validation de l’acquisition des compétences
A qui s'adresse cette formation
Cette formation s'adresse aux développeurs et chefs de projets.
Pré-requis
La connaissance des langages HTML, CSS et des bases de la programmation (variables, tests, boucles, fonctions).
Objectifs
Concrètement, a l'issue de cette formation JavaScript vous serez capable de :
- Bien comprendre les concepts asynchrones de JavaScript et la communication serveur
- Utiliser de manière détaillé et avancé JavaScript
- Faire de la Programmation Orientée Objet avec JavaScript
- Respecter les bonnes pratiques et veiller aux performances
- Réaliser toute la partie Front End d’une application Web
- Choisir un framework JS en fonction des besoins d’un projet
- Débuguer en toute sérénité vos applications
- Découvrir les nouveautés du langage avec EcmaScript 6 (2016) et EcmaScript 7 (2017)
Contenu
Introduction aux techniques http, aux navigateurs et leurs DOM
- Les principes de base des technologies clients serveurs
- Présentation des différentes possibilités avec illustration par des exemples complexes et concrets
- Mode d'appels des scripts depuis les pages HTML
- Comment créer une zone de saisie?
- Les différents modes de saisie HTML
- Introduction aux navigateurs, au JavaScript et au DOM
- Les principes d'utilisation des DOM
- Les différences principales entre les navigateurs et les conseils d'utilisation
- L'interpréteur JavaScript: entrées/sorties des programmes
Le langage JavaScript
- Introduction au langage JavaScript
- Présentation d'exemples simples
- Les versions de JavaScript
- JavaScript embarqué dans les pages HTML
- La grammaire du langage
- Les variables
- Les types de données
- Les opérateurs
- Les instructions
- Les structures de programmation
- La définition et l'utilisation de fonctions
- Les objets et leurs utilisations en JavaScript
- Les dialogues avec l'utilisateur
- Les tableaux
- La gestion des événements et les différences selon les navigateurs
- Les objets prédéfinis
- Les pièges classiques en JavaScript
Les objets du langage JavaScript
- Gestion des chaînes de caractères à travers l'objet String
- Les principales fonctions mathématiques dans l'objet Math
- Manipulation des dates via l'objet Date
- Manipulation des tableaux via l'objet Array
- Les expressions régulières dans le JavaScript
JavaScript : Les objets de la page HTML
- L'objet Windows : gestion des fenêtres et de leur communication
- Les pop-ups
- L'objet document : Le fonctionnement de l'objet document. Interactivité, contrôle et transformation des pages HTML
- L'objet form : Contrôle des données saisies dans un formulaire, gestion des contenus des champs de saisie
- Le Formulaire dynamique
- Manipulation de la page (DOM)
- Sélection d'éléments
- Modification du contenu HTML
- Modification du graphisme CSS
- Gestion des événements
JQuery
- Qu’est-ce que Jquery
- Chargement de Jquery dans la page ou via un CDN
- Bases de jQuery
- Effets
- Evènements
- Manipulation DOM
- AJAX
AJAX : dialoguer avec le serveur
- Pourquoi AJAX (Asynchronous Javascript And Xml) XMLHttpRequest
- Méthodes et en-têtes HTTP
- Récupération de contenus HTML, XML ou JSON
Nouvelles fonctions JavaScript apportées par HTML5
- Géolocalisation
- Glisser / Déposer
- Multi upload
- Historique (pushstate)
- Local Storage
- Web GL
- Web RTC
- Fullscreen
- API branchées mobile
- Détecteur de proximité
- Vibration API
- Utilisation du gyroscope du smartphone
- Accès à la webcam, au micro
- A l’avenir
- Shadow DOM
Développer avec JS
Les données et les boucles
- Types de données et subtilités
- Les différentes formes d'incrémentation
- Manipulation binaire
- Arrays : manipulation avancée
- Objets : les différentes syntaxes
- JSON et (dé)sérialisation
- Copie / référence
- Règles de transtypage et comparaisons
- Expressions Régulières
- Des constantes ?
- Problèmes d'énumération
Les fonctions
- Contrôle des paramètres
- Paramètres obligatoires / facultatifs / indéfinis
- Gestion intelligente des paramètres
- Fonctions anonymes, closures et callback
Outils, bonnes pratiques
- Les systèmes de gestion de paquets : NPM…
- Les polyfills
- Ecriture de JS avec Coffescript
- JSdoc et Closure Compiler
- JSHint
- Debugger
- Profiler et Navigation Timing API
- Gestion des erreurs : exceptions
- Performances
Utiliser la Programmation Orientée Objet : concepts avancés
- Les classes natives : String, Array, Object, etc.
- Augmenter ou réécrire JavaScript
- Visibilité : propriétés publiques / privées
- Visibilité : méthodes publiques / privées / privilégiées
- Les différentes formes d'héritage
- Appels parents : call / apply
- jQuery.extend()
- Méthodes et propriétés statiques
- Méthodes abstraites et interfaces
- Nouveaux outils des navigateurs modernes
Les nouveautés du langage EcmaScript
- De la stagnation du langage à son évolution
- Qu’est-ce que Ecmascript 6
- Les nouveautés apportées par ES6 (nouvelles syntaxes pour les fonctions, paramètres…)
- Les nouveautés à prévoir pour ES7
- La rétrocompatibilité du langage grâce à Babel
Design patterns
- Principes SOLID
- Implémentation / généralisation / spécification
- Polymorphisme et principe de substitution
- Association : composition / agrégation
- Principaux design patterns
- Structures de données avancées
Les Frameworks JS
- Qu’est-ce qu’un framework ?
- Les principaux frameworks et technologies : Angular, React, Meteor, Node
- Angular, les bases
- React, principe de fonctionnement
Le Métier de développeur JS
- Etat des lieux du JS en 2016, effervescence
- Evolution des performances JS dans le temps
- Le morcellement du aux nombreuses technologies.
Moyens Pédagogiques :