JavaScript • Page 1 / Introduction

Découvrir JavaScript 💡

JavaScript est le langage qui donne de la vie à tes pages web : clics, animations, formulaires, jeux, timers… C’est le 3ᵉ pilier du web avec HTML (structure) et CSS (design).

1. C’est quoi JavaScript ?

JavaScript est un langage qui s’exécute principalement dans le navigateur (Chrome, Firefox, Edge…). Il permet de :

réagir aux actions de l’utilisateur (clic, clavier, souris…)
modifier le HTML/CSS en direct (le DOM)
créer des jeux, formulaires dynamiques, dashboards, etc.

Résumé : HTML = ce qui est affiché CSS = comment c’est affiché JS = ce qui bouge / réagit

Mini exemple

<button onclick="alert('Salut !')">
  Clique-moi
</button>

→ Quand tu cliques sur le bouton, une petite fenêtre “Salut !” s’ouvre.

Vidéo d’intro (FR)

JavaScript sert principalement à…

2. Où écrire le JavaScript ?

Il y a deux principales façons de mettre du JS dans ta page :

1) Dans une balise <script> (interne)

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Test JS</title>
</head>
<body>
  <h1>Bonjour</h1>

  <script>
    console.log("Hello depuis JS !");
  </script>
</body>
</html>

2) Dans un fichier .js externe (recommandé)

<!-- index.html -->
<script src="script.js"></script>

// script.js
console.log("Bonjour depuis un fichier externe !");

Comme pour le CSS, utiliser des fichiers séparés (ex : script.js) rend ton projet plus propre.

Comment relier un fichier JavaScript externe à une page HTML ?

3. Utiliser la console du navigateur

La console est un outil intégré dans ton navigateur pour voir les messages, erreurs, et tester du JS en direct.

Ouvre ta page dans Chrome / Firefox.
Appuie sur F12 ou Ctrl + Shift + I (ou clic droit > Inspecter).
Va dans l’onglet Console.
Tu peux taper :
```
console.log("Hello console");
```

Astuce : ouvre la console pendant que ta page se recharge, tu verras les messages venant de ton fichier script.js.

À quoi sert principalement console.log() ?

4. Ton premier script JavaScript

Exemple simple

// script.js
let pseudo = "Alex";
let age = 15;

console.log("Bienvenue", pseudo);
console.log("Tu as", age, "ans");

alert("Salut " + pseudo + " !");

let permet de créer une variable.
console.log() affiche dans la console.
alert() affiche une petite fenêtre modale.

Vidéo : JS en 1 heure

Devine ce qui sera affiché dans la console :

let x = 3;
let y = 4;
let z = x + y;

console.log(z);

5. Mini labo : écrire ton premier console.log

Écris ce que tu mettrais dans un fichier script.js pour afficher ton pseudo dans la console.

// Ton objectif :
// Afficher "Mon pseudo est XYZ" dans la console

Ce vérificateur ne “lit” pas vraiment tout le JavaScript, il vérifie juste si tu utilises console.log et des guillemets, histoire de prendre la bonne habitude.

6. Mini-projet : page HTML + JS reliés

Crée un petit projet avec :

un fichier index.html
un fichier script.js
Visual Studio Code + Live Server (comme pour HTML/CSS)

index.html

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Mon premier projet JS</title>
</head>
<body>
  <h1>Bienvenue sur ma page</h1>
  <p>Ouvre la console pour voir le message JS.</p>

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

script.js

console.log("Page chargée !");
console.log("Bonjour depuis script.js 🎉");

Sur les pages suivantes (JS 2, JS 3…), on va :

manipuler le DOM (modifier le HTML depuis JS),
réagir aux clics,
créer de petits mini-jeux interactifs.

← Retour à Python 3 Page suivante : JS 2 (DOM & événements) →