C'est quoi le JavaScript ?
JavaScript est le langage de programmation du web. Chaque navigateur (Chrome, Firefox, Safari) embarque un moteur JavaScript capable d'exécuter du code directement sur ton ordinateur.
Rappelez-vous la métaphore du bâtiment. Le HTML, ce sont les fondations et la structure : les murs, les portes, les fenêtres. Le CSS, c'est la façade : la peinture, le design intérieur. Et JavaScript ? C'est l'électricité : le courant qui rend le bâtiment vivant et interactif. (La plomberie, l'invisible derrière les murs, ce sera le serveur, avec PHP.)
Grâce à JavaScript, les lumières s'allument quand on appuie sur un interrupteur, les portes s'ouvrent automatiquement, l'ascenseur fonctionne. Sans JavaScript, ton site est beau mais inerte : rien ne bouge, rien ne réagit.
Pourquoi apprendre JavaScript avec l'IA ?
L'IA génère du JavaScript en quelques secondes. Mais le JavaScript est un vrai langage de programmation : avec des variables, des conditions, des boucles, des erreurs. Quand l'IA se trompe (et elle se trompe), il faut comprendre pourquoi.
Avec ces 8 leçons, tu vas apprendre à :
- Lire du JavaScript et comprendre ce qu'il fait
- Modifier le code généré par l'IA pour l'adapter
- Débugger quand quelque chose ne marche pas
console.log : ton premier JavaScript
console.log() est la commande la plus utile en JavaScript. Elle affiche un message dans la console du navigateur (l'outil de développement).
C'est l'équivalent de regarder ce qui se passe dans les tuyaux de ton bâtiment : un outil de diagnostic.
Ces deux lignes se ressemblent. Qu'affiche console.log(3 + 4) ? Et console.log("3" + 4) ? Avant de dérouler : pourquoi le résultat n'est-il pas le même ?
Voir la réponse
console.log(3 + 4) affiche 7 : addition de deux nombres. console.log("3" + 4) affiche "34" : dès qu'un des opérandes de + est une chaîne, JavaScript convertit l'autre en chaîne et concatène au lieu d'additionner. C'est la coercition de type, une source d'erreurs très fréquente en JS (surtout avec des valeurs venues d'un champ de saisie, qui sont des chaînes). Pour forcer un calcul numérique : convertir d'abord avec Number("3").
console.log("Bonjour le monde");Tu peux aussi modifier directement la page avec JavaScript :
document.getElementById("output").textContent = "Salut !";Où mettre le JavaScript ?
Deux options :
- Directement dans le HTML avec la balise
<script>:
<script>
console.log("Hello");
</script>- Dans un fichier externe (recommandé en production) :
<script src="app.js"></script>Place toujours tes balises <script> juste avant </body> pour que le HTML soit chargé avant le JavaScript.
Ton premier vrai duo : index.html + app.js
Le bac à sable de ce cours te permet de coder sans rien installer. Mais sur un vrai projet, tu travailles avec deux fichiers côte à côte dans le même dossier.
Crée un dossier mon-projet/, puis deux fichiers :
<!-- index.html -->
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Mon projet</title>
</head>
<body>
<h1>Bonjour</h1>
<script src="app.js"></script>
</body>
</html>// app.js
console.log('Bonjour depuis app.js');Le <script src="app.js"> est posé juste avant </body>. Pourquoi ? Parce que le HTML doit exister avant que le JavaScript tente de le manipuler. Si tu mets le script dans le <head>, il s'exécute trop tôt : le reste de la page n'est pas encore là.
Pour tester : double-clique sur index.html pour l'ouvrir dans le navigateur. Appuie sur F12 (ou clic droit → Inspecter), puis clique sur l'onglet Console. Tu vois :
Bonjour depuis app.jsModifie le texte dans app.js, sauvegarde, recharge la page : le message change. C'est le geste fondateur. Tout le reste du cours repose sur ce duo.
La console : ton premier outil de debug
console.log() te permet de voir la valeur d'une variable à un instant précis. Tu veux savoir ce que contient prix avant le calcul ?
console.log(prix); // affiche la valeur de prix dans la consoleQuand quelque chose plante, la console affiche une erreur en rouge. Exemple :
Uncaught ReferenceError: prxi is not defined app.js:3Deux informations essentielles : le message d'erreur, et le numéro de ligne (app.js:3). Lire ces deux éléments, c'est 80 % du débug. Le navigateur te dit exactement où chercher.
console.log juste avant la ligne suspecte pour voir les valeurs ; (3) déplace le log pour resserrer l'endroit exact. Pour les bugs plus complexes, l'onglet Sources du navigateur offre des points d'arrêt, mais le console.log suffit pour bien démarrer.
What is JavaScript?
JavaScript is the programming language of the web. Every browser — Chrome, Firefox, Safari — has a built-in JavaScript engine that can run code directly on your computer.
Remember the building metaphor. HTML is the foundations and structure — walls, doors, windows. CSS is the facade — paint, interior design. And JavaScript? It's the electricity — the current that makes the building alive and interactive. (The plumbing, the invisible behind the walls, will be the server, with PHP.)
Thanks to JavaScript, lights turn on when you flip a switch, doors open automatically, the elevator works. Without JavaScript, your site looks good but is inert — nothing moves, nothing reacts.
Why learn JavaScript with AI?
AI generates JavaScript in seconds. But JavaScript is a real programming language — with variables, conditions, loops, errors. When AI gets it wrong (and it does), you need to understand why.
In these 9 lessons, you'll learn to:
- Read JavaScript and understand what it does
- Modify AI-generated code to fit your needs
- Debug when something doesn't work
console.log — your first JavaScript
console.log() is the most useful command in JavaScript. It displays a message in the browser's console (the developer tool).
It's like looking at what's happening inside your building's pipes — a diagnostic tool.
These two lines look similar. What does console.log(3 + 4) print? And console.log("3" + 4)? Before unfolding: why isn't the result the same?
See the answer
console.log(3 + 4) prints 7: addition of two numbers. console.log("3" + 4) prints "34": as soon as one operand of + is a string, JavaScript converts the other to a string and concatenates instead of adding. This is type coercion, one of the most frequent sources of bugs in JS (especially with values from input fields, which are strings). To force a numeric calculation: convert first with Number("3").
console.log("Hello world");You can also modify the page directly with JavaScript:
document.getElementById("output").textContent = "Hi!";Where to put JavaScript?
Two options:
- Directly in HTML with the
<script>tag:
<script>
console.log("Hello");
</script>- In an external file (recommended in production):
<script src="app.js"></script>Always place your <script> tags just before </body> so the HTML loads before JavaScript runs.
Your first real pair: index.html + app.js
The sandbox in this course lets you practice without installing anything. But on a real project, you work with two files side by side in the same folder.
Create a folder my-project/, then two files:
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My project</title>
</head>
<body>
<h1>Hello</h1>
<script src="app.js"></script>
</body>
</html>// app.js
console.log('Hello from app.js');The <script src="app.js"> sits just before </body>. Why? Because the HTML must exist before JavaScript tries to manipulate it. If you put the script in the <head>, it runs too early — the rest of the page isn't there yet.
To test: double-click index.html to open it in the browser. Press F12 (or right-click → Inspect), then click the Console tab. You'll see:
Hello from app.jsEdit the text in app.js, save, reload the page — the message changes. This is the founding gesture. Everything in the rest of the course builds on this pair.
The console: your first debugging tool
console.log() lets you see what a variable contains at a precise moment. Want to know what price holds before a calculation?
console.log(price); // shows the value of price in the consoleWhen something crashes, the console shows an error in red. For example:
Uncaught ReferenceError: price is not defined app.js:3Two key pieces of information: the error message, and the line number (app.js:3). Reading those two things is 80% of debugging. The browser tells you exactly where to look.
console.log just before the suspect line to inspect the values; (3) move the log to narrow it down further. For more complex bugs, the browser's Sources tab offers breakpoints — but console.log is plenty to get started.
🎯 Pratique
S'entraîner (clique pour ouvrir) :
✨ Prompt IA
Copiez ce prompt dans Claude ou ChatGPT :
Explique-moi la différence entre HTML, CSS et JavaScript en utilisant la métaphore d'un bâtiment. Donne un exemple concret pour chaque langage.
💬 Ré-explique sans regarder
Sans relire la réponse de l'IA : avec tes mots, à quoi servent respectivement le HTML, le CSS et le JavaScript dans une page web ?
L'IA a généré ce code, mais elle a oublié les guillemets autour du texte dans console.log. Corrigez l'erreur.
⚖️ Juge le code de l'IA
L'IA te propose ce code pour afficher un message au chargement. Ton rôle de relecteur : l'accepter tel quel ou le rejeter, et dire pourquoi.
<head>
<script>
document.getElementById("titre").textContent = "Bienvenue !";
</script>
</head>
<body>
<h1 id="titre"></h1>
</body><script> est dans le <head> et s'exécute AVANT que le <h1 id="titre"> existe : getElementById renvoie null et le code plante (Cannot set properties of null). C'est exactement le piège vu dans la leçon : place le <script> juste avant </body> pour que le HTML soit chargé en premier.🧠 Rappel libre
Sans remonter dans la leçon : quelle commande affiche un message dans la console, et où faut-il placer la balise <script> dans le HTML ?
console.log("...") affiche un message dans la console du navigateur (visible avec F12). On place la balise <script> juste avant </body>, pour que tout le HTML soit chargé avant que le JavaScript ne tente d'y accéder.<script> dans le HTML ?Vous savez ce qu'est JavaScript et où il s'exécute. Maintenant, on stocke de l'information : les variables et les types de données, la matière première de tout programme.
Leçon 2 : Variables et types →