Si vous avez déjà visité un site où un menu s’ouvre sans recharger la page, où un formulaire vous indique immédiatement “email invalide”, ou encore où une liste se met à jour en direct… il y a de fortes chances que JavaScript soit derrière tout ça.
Dans cette première partie, on va parler de JavaScript comme un humain le ferait : sans jargon inutile, avec des exemples concrets, et surtout avec une idée claire en tête : comprendre à quoi ça sert avant de coder beaucoup.
1) Ce que fait vraiment JavaScript (en mots simples)
Imaginez une page web comme une vitrine :
- HTML = la structure (les titres, paragraphes, boutons, images…)
- CSS = le style (les couleurs, la mise en page, les animations visuelles…)
- JavaScript = le comportement (ce qui se passe quand on clique, tape, glisse, attend…)
En clair : JavaScript permet à une page web d’être interactive. Il peut :
- Réagir aux actions de l’utilisateur (clic, clavier, formulaire)
- Modifier le contenu de la page sans rechargement
- Créer des fonctionnalités “intelligentes” (validation, filtres, recherche en direct)
- Communiquer avec un serveur (charger des données via API)
Le but n’est pas de “faire joli” (ça c’est plutôt CSS), mais de faire fonctionner et réagir votre interface.
2) JavaScript vs HTML & CSS : la différence (très concrète)
Prenons un exemple simple : un bouton “Ajouter au panier”.
- HTML crée le bouton.
- CSS rend le bouton agréable (couleur, taille, hover).
- JavaScript fait réellement l’action : augmenter le compteur du panier, enregistrer l’article, afficher un message, etc.
Sans JavaScript, le bouton peut être beau… mais il ne “pense” pas. JavaScript lui donne une logique.
3) Où JavaScript s’exécute ? Navigateur, serveur, mobile
Beaucoup de débutants pensent que JavaScript vit uniquement dans le navigateur. C’était surtout vrai au début. Aujourd’hui, JavaScript est partout :
Dans le navigateur (Front-end)
C’est l’usage le plus courant : JavaScript contrôle la page web dans Chrome, Firefox, Safari, etc. Il gère le DOM (les éléments HTML), les événements (clics…), et l’affichage dynamique.
Sur le serveur (Back-end) avec Node.js
Oui, JavaScript peut aussi tourner “côté serveur”. Avec Node.js, vous pouvez créer des APIs, gérer des bases de données, authentifier des utilisateurs… exactement comme PHP, Python ou Java.
Sur mobile (React Native) et desktop (Electron)
JavaScript peut servir à créer des applications mobiles (Android/iOS) avec React Native, ou des apps desktop (Windows/Mac/Linux) avec Electron.
À retenir : JavaScript n’est pas seulement un langage “pour sites web”. C’est un langage de développement complet, utilisé sur plusieurs plateformes.
4) Des exemples de sites et produits qui utilisent JavaScript
Dès que vous voyez une interface moderne, des composants dynamiques, ou une application web “comme une app mobile”, JavaScript est très souvent au centre.
- Interfaces de tableau de bord (analytics, admin panels)
- Réseaux sociaux (fil d’actualité dynamique, likes, commentaires instantanés)
- Sites e-commerce (panier, filtres produits, paiement, recommandations)
- Applications web (messagerie, gestion de projets, éditeurs en ligne)
En bref : si vous visez le développement web moderne, JavaScript devient vite indispensable.
5) Votre tout premier exemple JavaScript (très petit)
On va faire un exemple volontairement simple : afficher un message dans la console du navigateur. C’est une étape classique, parce que la console est votre meilleur ami pour apprendre.
console.log("Bonjour ! Je commence JavaScript aujourd’hui.");
Comment tester ?
- Ouvrez une page web (n’importe laquelle)
- Faites clic droit → Inspecter → onglet Console
- Copiez/collez le code ci-dessus, puis appuyez sur Entrée
Si vous voyez le texte s’afficher, c’est parfait : vous venez d’exécuter votre premier code JavaScript.
Mini-défi (2 minutes)
- Changez le message par votre propre phrase.
- Essayez d’afficher un nombre :
console.log(2026); - Essayez d’afficher une addition :
console.log(10 + 5);
Dans la Partie 2, on installe un environnement simple pour coder proprement (fichier HTML + fichier JS), et on apprend les bases sans se perdre : où mettre le code, comment le charger, et comment éviter les erreurs les plus fréquentes.