C'est quoi JavaScript, et ton premier script

Découvre le troisième langage du web et écris ton premier script qui parle à la console du navigateur.

Les trois langages du web

Du Niveau 1 tu connais deux langages :

HTML – le squelette de la page (ce qu’il y a dessus),
CSS – le look (comment ça apparaît).

Le troisième et dernier langage est JavaScript – le comportement (ce qui se passe quand…). Quand tu cliques sur ▶ sur YouTube et la vidéo démarre, quand une boutique en ligne calcule un prix, quand un jeu compte les points – c’est tout du JavaScript.

Où vit JavaScript

JavaScript vit dans son propre fichier, comme le CSS. Tu en parles à la page avec une balise <script> – place-la tout à la fin de <body>, juste avant </body> :

  ...page content...

  <script src="script.js"></script>
</body>

💡

Pourquoi à la fin ? Le navigateur lit la page de haut en bas. Quand le script est à la fin, toute la page existe déjà, et le script peut travailler avec tout de suite.

Montre-moi : ton premier script

Dans le dossier my-web, crée un fichier appelé script.js et écris dedans :
```
console.log("Hi, this is your website!");
```
Dans index.html, ajoute la ligne <script src="script.js"></script> juste avant </body> et enregistre les deux fichiers.
Ouvre la page dans ton navigateur et appuie sur F12 (sur Mac, Cmd+Alt+I). Un panneau développeur s’ouvre – clique sur l’onglet Console.

Tu vois « Hi, this is your website! » ? Ton premier JavaScript tourne ! 🎉

La console est une pièce secrète dans le navigateur où les programmeurs discutent avec la page. Les visiteurs ne la voient jamais – c’est juste pour toi. console.log(...) signifie « affiche ça dans la console. » Tu vas l’utiliser tout le temps : c’est la meilleure façon de savoir ce qui se passe dans ton script.

La console peut aussi faire des maths

Essaie de taper ça directement dans la console (appuie sur Entrée après chaque ligne) :

5 + 3
"Jake" + " is " + "awesome"
10 * 365

JavaScript est aussi une calculatrice – il additionne les nombres et colle les textes (appelés chaînes, tu les repères aux guillemets) bout à bout.

À toi 💪

Ajoute script.js à chaque page de ton site web (comme tu as ajouté style.css autrefois).
Fais afficher le nom de ton site web dans la console et calcule combien d’heures restent avant les vacances d’été – par exemple, console.log("Hours left until vacation:", 48 * 24);.
Fais exprès une erreur – supprime un guillemet et enregistre. Regarde à quoi ressemble l’erreur dans la console (texte rouge avec un numéro de ligne). Puis corrige-la. C’est une habitude importante : la console te dira toujours où est le problème.

✅

Vérifie : Quand tu ouvres n’importe quelle page de ton site web, ton message apparaît dans la console. Tu sais ouvrir la console et à quoi ressemble une erreur. C’est toute la fondation – à partir de la prochaine leçon, on commence à faire de la magie sur la page.

Ce que tu retiens de cette leçon

JavaScript = le troisième langage du web : le comportement. Il s’écrit dans un fichier script.js et se connecte avec une balise <script src="..."> avant </body>.
La console (F12) est ta fenêtre sur le script : console.log() affiche des choses, les erreurs apparaissent en rouge avec un numéro de ligne.
Le texte entre guillemets est une chaîne, et les chaînes peuvent être collées avec +. Les nombres peuvent être calculés.