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 votre 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, votre 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, vous allez 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 : votre 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 votre bâtiment : un outil de diagnostic.
console.log("Bonjour le monde");Vous pouvez 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>Placez toujours vos balises <script> juste avant </body> pour que le HTML soit chargé avant le JavaScript.
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.
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.
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.
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.
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.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 ?You know what JavaScript is and where it runs. Next, we store information: variables and data types, the raw material of every program.
Lesson 2: Variables and types →