JavaScript - Les fondamentaux : créer des sites web dynamiques et interactifs

Jour 1 :

Appréhender Javascript dans la construction de sites et applications web

• Rappels sur le fonctionnement d'un site internet ou d'une application web
• Environnement de développement
• Utiliser HTML5 avec CSS3 et Javascript
• Principes du DOM
• Exemples de travaux pratiques : le formateur montre la création d'une page HTML simple (ou page/site existant) avec l'utilisation de balises, d'éléments de style (CSS). Une touche de javascript permet d'identifier le rôle du langage et son utilisation, ainsi que sa relation avec le DOM.

Maîtriser les fonctionnalités essentielles (1/2)

• Exécution de Javascript
• Côté client : Appel d'un script dans une page web
• Côté serveur : Appel d'un script avec NodeJS
• Exemples de travaux pratiques : le formateur montre des exemples et exécutions de code JS dans une page web ou via NodeJS. Les participants peuvent créer une nouvelle page HTML et charger un script JS qui fait des actions simples (exemple message console ou alerte). Les participants peuvent lancer un script via NodeJS.

Maîtriser les fonctionnalités essentielles (2/2)

• Syntaxes de bases d'écriture du langage
• Mots-clés (let, const)
• Fonctions
• Les fonctions fléchées
• Les fonctions de manipulation de données : map, filter, forEach…
• La programmation orientée objet en ES6
• Définition des classes
• L'opérateur new
• Modification d'un objet : getter / setter
• Héritage
• Rétrocompatibilité
• Table des compatibilités
• Polyfills
• Compilateurs
• Exemples de travaux pratiques : le formateur réalise et explique différentes syntaxes que les participants reproduisent et exécutent sur leur poste de travail.

Jour 2 :

Manipuler les pages et les rendre dynamiques

• Introduction à l'API DOM
• Format de données JSON
• Insérer ou récupérer des données dans les pages (balises data, )
• Exemples de travaux pratiques : le formateur utilise l'API DOM pour sélectionner et modifier des balises. Il insère des données JSON dans la page. Les participants peuvent créer une nouvelle page HTML ou compléter leur page précédente en intégrant des données JSON dans la page. Par exemple : affichage d'une liste de produits, ou données météos.

Gérer les/Réagir aux événements et accroître l'interactivité

• Gérer les évènements
  • Ecouter les événements
  • Réagir aux événements
• Notion de callback
• Introduction aux traitements asynchrones et requêtes AJAX
• Exemples de travaux pratiques : le formateur utilise l'API DOM pour créer des écouteurs d'événements et traitements associés en callback. Il réalise une requête AJAX (par exemple pour l'envoi d'un formulaire). Les participants peuvent créer une nouvelle page HTML ou compléter leur page précédente en intégrant des évènements. Par exemple : chargement de données après un clic, envoi de formulaire, etc.

Jour 3 :

Développer en Responsive Design

• La méthode matchMedia (équivalent des Media Queries pour JavaScript)
• La détection des périphériques avec l'User-Agent
• Rétrocompatibilité (tables de compatibilité et polyfills)
• Exemples de travaux pratiques : le formateur utilise matchMedia et détecte le périphérique qui accède à la page web grâce à l'User-Agent. Les participants peuvent créer une nouvelle page HTML ou compléter leur page précédente en intégrant des traitements spécifiques à un type de périphérique (par exemple iOS ou Android) ou à une résolution (avec matchMedia). Il peut s'agir par exemple de créer un menu ou des onglets qui s'affichent différemment en fonction des résolutions et/ou types de périphériques.

Découvrir et utiliser une librairie ou un Framework Javascript

• Limites du JavaScript natif dans les projets complexes
• Les différences principales entre librairie et Framework
• Cas d'usage typiques des librairies et Frameworks : fonctionnalités types (agenda, graphiques…), SPA, DOM complexe, gestion de l'état, routing, accès API...
• Identifier et utiliser des annuaires et gestionnaires de dépendances pour installer des librairies en tout sécurité (npm,…)
• Exemples de travaux pratiques : le formateur utilise une librairie, selon les besoins ressentis par le groupe, par exemple Chart.js pour créer des graphiques sur une page web. Les participants peuvent créer une nouvelle page HTML en intégrant une librairie de leur choix.