Chapitre 1 : Introduction à JavaScript

Qu'est-ce que JavaScript ?

JavaScript est un langage de programmation utilisé principalement pour rendre les pages web interactives. Il est exécuté directement par le navigateur.

Par exemple, grâce à JavaScript, on peut :

Historique rapide

JavaScript côté client vs côté serveur

Côté client : s'exécute dans le navigateur, pour interagir avec la page.

Côté serveur : s'exécute sur un serveur via des environnements comme Node.js.

Comment intégrer JavaScript dans une page HTML ?

Il existe deux façons principales d'intégrer JavaScript dans une page HTML :

1. Code JavaScript directement dans le HTML

<script>
  alert("Bonjour !");
</script>

2. Code JavaScript dans un fichier externe

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

👉 Voyons cela plus en détail juste après.

Exemple interactif :

Le bouton ci-dessous affiche une alerte JavaScript quand on clique dessus :

Intégration d'un fichier JavaScript externe

Plutôt que d'écrire tout le code JavaScript dans la page HTML, on peut le mettre dans un fichier séparé, avec l'extension .js.

Avantages

Exemple complet :

Fichier HTML : index.html

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Exemple JS externe</title>
</head>
<body>
  <button onclick="direBonjour()">Dis bonjour</button>
  <script src="script.js"></script>
</body>
</html>

Fichier JavaScript : script.js

function direBonjour() {
  alert("Salut depuis un fichier externe !");
}

Astuce :

Placez toujours la balise <script src="..."> juste avant </body> pour éviter que le script ne s'exécute avant que la page soit chargée. Cela améliore les performances perçues par l'utilisateur.

Charger plusieurs fichiers :

<script src="config.js"></script>
<script src="app.js"></script>

Attention :

⚠️ L'ordre est important : un fichier dépendant d'un autre doit être chargé après lui ! Les fichiers sont chargés et exécutés dans l'ordre où ils apparaissent dans le HTML.

Utiliser defer (optionnel)

Pour charger un fichier JavaScript externe dans la balise <head> sans bloquer le chargement du HTML :

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

L'attribut defer indique au navigateur de continuer le chargement de la page tout en téléchargeant le script en arrière-plan, puis d'exécuter le script une fois le chargement de la page terminé.

Les outils du développeur

Chaque navigateur moderne possède une console JavaScript. Elle permet de tester rapidement du code JavaScript.

Essayons ensemble :

Ouvre la console (F12 ou clic droit > Inspecter > Console), puis tape :

console.log("Hello World !");

La console est un outil indispensable pour :

  • Tester des bouts de code rapidement
  • Déboguer vos scripts
  • Voir les erreurs et avertissements
  • Inspecter des variables et objets

Exercice pratique

Crée un fichier index.html et un fichier bonjour.js.

alert("Bienvenue sur mon site !");
<script src="bonjour.js"></script>

Ouvre le fichier dans ton navigateur : un message s'affichera 🎉

Résumé

Sommaire Chapitre suivant