JavaScript : comprendre le langage du web
Ce cours te fait découvrir JavaScript depuis zéro, sans aucun prérequis technique. Tu comprendras à quoi sert ce langage, comment il fonctionne, et quelles sont les notions de base indispensables. À la fin, tu sauras éviter les erreurs les plus communes chez les débutants.
1.Qu'est-ce que JavaScript exactement
JavaScript est un langage de programmation. Il permet de rendre les pages web interactives. Sans lui, un site web reste statique, comme une feuille de papier affichée à l'écran. Avec lui, tu peux faire apparaître un menu quand tu cliques, valider un formulaire avant de l'envoyer, ou afficher une alerte. Concrètement, quand tu vas sur un site de e-commerce et que le panier se met à jour sans recharger la page, c'est JavaScript qui agit en coulisses. Ce langage tourne dans ton navigateur, comme Chrome ou Firefox. Chaque navigateur possède un moteur qui lit le code JavaScript et l'exécute. Depuis 2009, JavaScript peut aussi fonctionner en dehors du navigateur, grâce à un outil appelé Node.js, ce qui permet de l'utiliser côté serveur, pour construire des applications complètes.
- JavaScript rend les pages web interactives et dynamiques.
- Il s'exécute dans le navigateur grâce à un moteur intégré.
- Node.js permet d'utiliser JavaScript hors du navigateur.
2.Les variables pour stocker des données
Une variable est un espace mémoire nommé, qui contient une valeur. Imagine une boîte étiquetée : tu écris "age" sur l'étiquette, et tu mets 25 à l'intérieur. En JavaScript, on déclare une variable avec les mots-clés let, const ou var. Par exemple, let age = 25 crée une variable nommée age contenant le nombre 25. Le mot const sert pour une valeur qui ne changera jamais, comme const pi = 3.14. Le mot let convient pour une valeur amenée à changer, comme un score dans un jeu. Le mot var est l'ancienne façon de faire, moins utilisée aujourd'hui car elle pose des problèmes de portée. Une variable peut contenir différents types de données : un nombre, un texte entre guillemets appelé chaîne de caractères, un booléen qui vaut vrai ou faux, ou encore une liste de valeurs.
- let et const sont les façons modernes de déclarer une variable.
- const empêche de réattribuer une nouvelle valeur.
- Les types courants sont nombre, texte, booléen et liste.
3.Les fonctions pour organiser le code
Une fonction est un bloc de code réutilisable, qui exécute une tâche précise. Elle évite de répéter le même code plusieurs fois. Par exemple, tu peux créer une fonction calculerPrixTTC qui prend un prix hors taxe et renvoie le prix avec la TVA ajoutée. En JavaScript, on l'écrit ainsi : function calculerPrixTTC(prix) { return prix * 1.2; }. Ensuite, tu appelles cette fonction autant de fois que nécessaire, avec des valeurs différentes : calculerPrixTTC(100) renverra 120. Ce mécanisme s'appelle un paramètre, la valeur que tu passes entre les parenthèses. Une fonction peut aussi ne rien renvoyer, et simplement afficher un message à l'écran. Les fonctions sont la base de tout programme structuré, car elles permettent de découper un problème complexe en petites étapes claires et testables séparément.
- Une fonction regroupe du code réutilisable pour une tâche précise.
- Les paramètres permettent d'adapter le résultat selon les données fournies.
- Le mot-clé return renvoie une valeur calculée par la fonction.
4.Manipuler le contenu d'une page web
Le DOM, pour Document Object Model, représente la structure d'une page web sous forme d'arbre. Chaque titre, chaque paragraphe, chaque bouton est un élément de cet arbre. JavaScript permet de lire et de modifier ce DOM en temps réel. Par exemple, document.getElementById("titre") récupère l'élément dont l'identifiant est "titre". Ensuite, tu peux changer son contenu avec .textContent = "Bonjour". C'est exactement ce mécanisme qui permet à un bouton "J'aime" de changer de couleur quand tu cliques dessus, sans recharger toute la page. On utilise aussi des événements, comme addEventListener("click", maFonction), pour dire au navigateur : quand l'utilisateur clique ici, exécute cette fonction. Cette interaction entre JavaScript et le DOM est ce qui rend les sites web modernes vivants et réactifs, plutôt que figés comme un simple document texte.
- Le DOM représente la page web comme un arbre d'éléments.
- JavaScript peut lire, modifier ou supprimer des éléments du DOM.
- Les événements déclenchent des fonctions suite à une action utilisateur.
5.Les conditions et les boucles essentielles
Les conditions permettent d'exécuter du code seulement si une situation précise se produit. Avec if (age >= 18) { console.log("majeur"); }, le programme affiche "majeur" uniquement si la variable age vaut 18 ou plus. On ajoute souvent un else pour gérer le cas contraire. Les boucles, elles, répètent une action plusieurs fois. Une boucle for est utile quand tu connais le nombre de répétitions à l'avance, par exemple afficher les nombres de 1 à 10. Une boucle while continue tant qu'une condition reste vraie, par exemple tant qu'un joueur a des vies restantes. Ces deux outils, conditions et boucles, forment la logique de base de presque tous les programmes informatiques. Sans eux, un programme ne pourrait ni réagir aux différentes situations, ni traiter efficacement de grandes quantités de données, comme une liste de mille clients.
- Les conditions if/else exécutent du code selon une situation donnée.
- Les boucles for et while répètent des actions automatiquement.
- Combiner conditions et boucles permet de traiter des listes de données.
6.Erreurs fréquentes et points d'examen
L'erreur la plus commune chez les débutants est de confondre le signe =, qui attribue une valeur, avec ==, qui compare deux valeurs. Écrire if (age = 18) au lieu de if (age == 18) change complètement le comportement du programme. Une autre confusion classique concerne == et ===. Le premier compare les valeurs sans vérifier le type, le second, plus strict, vérifie aussi que les types correspondent : "5" == 5 renvoie vrai, mais "5" === 5 renvoie faux. Les examens testent souvent la portée des variables, c'est-à-dire l'endroit où une variable reste accessible, ainsi que la différence entre let et var. On demande aussi fréquemment d'écrire une fonction simple, ou de corriger une boucle infinie, provoquée par une condition d'arrêt mal écrite qui ne devient jamais fausse.
- Ne confonds jamais = (attribution) avec == ou === (comparaison).
- Préfère toujours === à == pour éviter les conversions de type surprises.
- Vérifie que chaque boucle possède une condition d'arrêt atteignable.
À retenir
- 1JavaScript rend les pages web interactives en modifiant leur contenu en temps réel.
- 2Les variables déclarées avec let ou const stockent les données du programme.
- 3Les fonctions permettent de découper un programme en blocs réutilisables et testables.
- 4Le DOM est la représentation en arbre d'une page, que JavaScript peut lire et modifier.
- 5L'opérateur === doit être préféré à == pour comparer deux valeurs sans erreur de type.
Dix questions sur ce sujet démarrent tout de suite, corrigées et expliquées.
L'essentiel en six phrases, à relire la veille.
Cours rédigé par intelligence artificielle et relu au fil des retours. Pour un examen officiel, garde tes cours et les textes en vigueur comme référence.