Introduction à JavaScript

Le Web en trois langages

Pour faire une page web, on utilise trois langages. Chacun a un rôle précis.

Imagine une maison :

HTML, c'est la structure — les murs et le toit. Sans HTML, il n'y a rien.
CSS, c'est la décoration — les couleurs et le style. Sans CSS, c'est fonctionnel mais laid.
JavaScript, c'est l'électricité — les lumières qui s'allument, les portes qui s'ouvrent. Sans JavaScript, rien ne bouge.

JavaScript rend les pages web interactives. Il réagit quand tu cliques. Il vérifie les formulaires. Il affiche des menus et des messages.

À quoi sert JavaScript concrètement ?

Voici ce que JavaScript fait sur les sites du quotidien :

Sur Google : les suggestions qui apparaissent en temps réel quand tu tapes dans la barre de recherche
Sur YouTube : la vidéo qui démarre, se met en pause, passe à la suivante
Sur Amazon : ajouter un article au panier sans recharger la page
Sur Instagram : le compteur de likes qui se met à jour en direct
Sur les formulaires : le message "mot de passe trop court" qui apparaît avant même que tu envoies le formulaire

Tout ça, c'est JavaScript. JavaScript est partout : dans le navigateur, sur les serveurs, dans les apps mobiles. C'est le langage le plus utilisé au monde.

💡

Bonne nouvelle ! JavaScript tourne dans ton navigateur. Pas de serveur, pas de logiciel à installer. Un fichier texte et un navigateur — et c'est parti.

Comment intégrer JavaScript dans une page HTML ?

Il y a deux façons d'ajouter du JavaScript à une page HTML.

Méthode 1 — directement dans le HTML (balise script)

Écris ton code entre des balises <script>. Place-les juste avant </body>.

HTML

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Ma première page JS</title>
</head>
<body>
  <h1>Bonjour !</h1>

  <script>
    // Ici, j'écris du JavaScript
    console.log("Le JavaScript fonctionne !");
  </script>

</body>
</html>

console.log("...") affiche un message dans la console du navigateur. C'est ton outil principal pour tester le code.

Méthode 2 — dans un fichier séparé (recommandé)

Pour les vrais projets, mets tout le JavaScript dans un fichier .js séparé. Relie-le à ta page avec l'attribut src.

HTML — index.html

<!-- On lie le fichier script.js juste avant </body> -->
<script src="script.js"></script>
</body>

JavaScript — script.js

// Tout le code JavaScript est ici, dans script.js
console.log("Bonjour depuis script.js !");

✅

Pourquoi mettre le <script> avant </body> ? Le navigateur lit la page de haut en bas. Si le script est au début, il s'exécute avant que les boutons et textes existent. À la fin, tout le HTML est déjà chargé.

La console du navigateur — ton meilleur ami

La console est intégrée dans tous les navigateurs. Tu y vois les messages console.log() et les erreurs. Tu peux aussi y taper du JavaScript directement.

Pour ouvrir la console :

Chrome / Edge : F12 → onglet "Console"
Firefox : F12 → "Console"
Safari : active le menu Développement dans les préférences, puis Cmd+Alt+C

Ton premier playground JavaScript

Ce cours a un playground interactif. Écris du vrai JavaScript ici. Clique sur "Exécuter". Vois le résultat — sans rien installer !

Essaie :

Playground — modifie le code et clique sur Exécuter

Sortie

Lance le code avec le bouton ▶ Exécuter

Les commentaires en JavaScript

Un commentaire, c'est du texte que le navigateur ignore. C'est juste pour toi, pour expliquer ton code. Il y a deux façons d'écrire des commentaires :

JavaScript

// Commentaire sur une seule ligne — tout ce qui suit // est ignoré

/*
  Commentaire sur plusieurs lignes.
  Tout ce qui est entre /* et */ est ignoré.
  Utile pour expliquer quelque chose de plus long.
*/

console.log("Ce texte s'affiche"); // mais pas ce commentaire

Commente ton code dès le début. Dans 3 mois, tu seras content de comprendre ce que tu avais écrit.

⚠️

JavaScript ≠ Java ! Ce sont deux langages différents. Java sert à faire des apps Android. JavaScript sert pour le Web. Le nom similaire, c'est du marketing des années 90 — ne te laisse pas perturber.

// À retenir

JavaScript rend les pages web interactives — il réagit aux clics, aux saisies, aux événements
HTML = structure · CSS = style · JavaScript = comportement
Le code JS s'écrit entre <script></script> ou dans un fichier .js séparé
On place toujours le <script> juste avant </body>
console.log() affiche des messages dans la console du navigateur
La console s'ouvre avec F12 dans Chrome, Firefox et Edge
Contrairement à PHP, JavaScript ne nécessite aucun serveur — il tourne dans le navigateur