Introduction : découvrir le JavaScript
Le JavaScript est le langage qui permet d’ajouter des comportements aux pages web : afficher un message après un clic, vérifier un formulaire ou mettre à jour une partie d’une page sans la recharger. Pendant cette formation de trois jours, vous découvrirez les bases du langage en avançant pas à pas, avec des exemples concrets et des exercices pratiques.
Vous travaillerez dans un navigateur et un éditeur de code, en vous concentrant sur la compréhension du fonctionnement plutôt que sur la mémorisation. Chaque notion sera mise en contexte : l’objectif est de pouvoir lire un petit script, l’adapter à un besoin simple et repérer les erreurs les plus courantes.
Module 1 : préparer son environnement et comprendre un script
Le JavaScript dans une page web
Vous verrez comment JavaScript complète le HTML et le CSS, où placer un script et comment l’exécuter dans un navigateur. Nous découvrirons la console du navigateur, qui permet d’afficher des informations et de comprendre ce que fait le code. Vous apprendrez à distinguer une instruction, un commentaire et une erreur signalée par le navigateur.
Exemple concret : afficher dans la console un message de bienvenue lorsque la page se charge, puis modifier ce message pour qu’il corresponde à différents visiteurs.
Exercice pratique
Créer une première page qui charge un fichier JavaScript, puis y ajouter quelques instructions et vérifier leur résultat dans la console.
Module 2 : variables, valeurs et opérations
Stocker et utiliser des informations
Vous apprendrez à créer des variables avec let et const, à choisir des noms explicites et à manipuler les principaux types de valeurs : texte, nombres, valeurs vrai ou faux, et absence de valeur. Nous verrons comment combiner des informations, effectuer des calculs et convertir une saisie lorsque cela est nécessaire.
Un point d’attention sera consacré aux erreurs fréquentes : confondre un nombre et un texte, réutiliser un nom peu clair ou modifier une valeur qui devrait rester constante. Ces habitudes influencent directement la lisibilité et la fiabilité d’un script.
Exemple concret : calculer le montant d’un panier à partir du prix de plusieurs articles, puis afficher un résumé lisible.
Exercice pratique
Créer un petit calculateur qui reçoit un prix et une quantité, calcule le total et présente le résultat dans un message.
Module 3 : conditions et répétitions
Faire des choix et automatiser des tâches
Vous découvrirez comment un programme prend des décisions avec if, else et les opérateurs de comparaison. Nous verrons aussi comment répéter une action à l’aide de boucles, tout en apprenant à choisir une condition d’arrêt pour éviter une répétition sans fin.
Exemple concret : afficher un message différent selon qu’un formulaire est complet ou qu’un champ obligatoire est vide. Pour les répétitions, vous pourrez parcourir une liste de tâches et afficher chaque élément sans recopier la même instruction plusieurs fois.
Exercice pratique
Écrire un script qui vérifie une valeur saisie, affiche un résultat adapté et parcourt une liste de produits afin d’en présenter les noms.
Module 4 : fonctions et tableaux
Organiser et réutiliser son code
Les fonctions permettent de regrouper des instructions qui répondent à un objectif précis. Vous apprendrez à les déclarer, à leur transmettre des paramètres et à récupérer une valeur produite. Nous verrons comment les tableaux servent à rassembler plusieurs éléments et comment accéder à leur contenu.
Vous vous exercerez à découper un problème en petites étapes. Par exemple, une fonction peut calculer le prix total d’une sélection d’articles, tandis qu’une autre prépare le texte à afficher. Cette organisation facilite les modifications et limite les répétitions.
Exercice pratique
Construire une liste de tâches sous forme de tableau et créer une fonction qui affiche chaque tâche dans la console ou dans la page.
Module 5 : interagir avec une page et corriger ses erreurs
Événements et éléments HTML
Vous apprendrez à sélectionner un élément HTML avec le DOM, à modifier son contenu et à réagir à un événement comme un clic ou la saisie dans un champ. Nous aborderons les bases de l’écoute d’événements et la manière de vérifier que l’élément visé existe avant de le modifier.
Exemple concret : créer un bouton qui affiche ou masque un texte, ou un formulaire qui vérifie qu’un champ est renseigné avant de présenter une confirmation. Vous observerez également comment utiliser la console et lire un message d’erreur pour retrouver l’instruction concernée.
Exercice pratique
Réaliser une interaction complète sur une page : récupérer le contenu d’un champ après un clic, vérifier qu’il n’est pas vide et afficher une réponse à l’écran.
À retenir
À la fin de la formation, vous aurez acquis des repères solides pour comprendre les fondamentaux de JavaScript et créer de petites interactions frontend. Vous saurez utiliser des variables, des conditions, des boucles, des fonctions et des tableaux, puis relier votre code à des éléments d’une page web. La pratique régulière vous aidera à gagner en autonomie et à aborder des projets plus complets.
Pour aller plus loin
Après cette première étape, vous pourrez approfondir la manipulation du DOM, découvrir les objets et les modules, puis apprendre à gérer des échanges avec des services web. Pour progresser, partez de petits besoins concrets, testez vos changements dans le navigateur et prenez l’habitude de lire les erreurs plutôt que de les contourner.
