Formation - Apprenez la programmation avec JavaScript

Définir le rôle de JavaScript dans le développement Web

• Comprendre l’architecture client / serveur
• Connaître les domaines d’intervention de JavaScript et les problématiques qu’il peut résoudre
• Appréhender la terminologie ECMAScript et le versioning (ES5, ES6, ES2018…)
• Maîtriser les outils de développement et le workflow
• Découvrir l’écosystème : communautés, librairies, frameworks et outils

Étude de cas : analyse de sites Internet et recommandations de sites / Mise en place des outils

Lire, comprendre, modifier et écrire du code JavaScript

• Maîtriser la syntaxe JavaScript et ses notions fondamentales
• Comprendre les notions de variables et de données, de lecture et d’écriture, les types primitifs et les objets de base (Number, String, Boolean…)
• Utiliser les opérateurs et les expressions
• Maîtriser les structures de contrôle : conditionnelles, boucles sur des tableaux
• Comprendre le fonctionnement des objets natifs en JavaScript : Date, Math, Array…
• Créer et utiliser des fonctions personnalisées
• Découvrir la structure Object

Exercice : prendre en main JavaScript à travers des exemples concrets

Interagir avec le DOM : manipulation et création des éléments de la page

• Comprendre l’arbre DOM, les noeuds parents et enfants
• Connaître les bases de la manipulation du DOM en JavaScript (getElementById, querySelector…)
• Maîtriser les sélecteurs : simples, multiples, d’attribut, de classe…
• Manipuler les éléments HTML de la page
• Manipuler les attributs, les classes et les styles des éléments HTML
• Générer du contenu HTML ou textuel : création de menus ou de listes dynamiques

Exercice : manipuler les éléments d’une page HTML avec JavaScript / Générer dynamiquement une barre de navigation…

Gérer les événements utilisateur

• Comprendre la notion d’événement pour gérer l’interactivité
• Maîtriser la syntaxe addEventListener
• Connaître les MouseEvents : click, mouseover, mouseout, mousemove…
• Créer des effets animés au rollover, déclencher des événements au click
• Interagir avec le clavier : KeyboardEvent
• Travailler avec les éléments de formulaire
• Utiliser des timers pour déclencher des événements

Exercice : création d’un formulaire avec vérification de saisie / Création d’une horloge digitale et animée…

Créer ses propres programmes

• Construire un programme et distribuer son code
• Découvrir les API HTML5 : balises Canvas, vidéo et audio
• Découvrir les librairies populaires : jQuery, Underscore…

Exercice : création d’un diaporama, d’un mini-site “one-page“…