W3docs
fr
Se connecter

Commencer à utiliser JavaScript

Apprenez à ajouter JavaScript à une page web avec la balise script, à lier des fichiers .js externes, à contrôler le chargement avec defer et async, et à utiliser la console du navigateur.

Ce que couvre ce chapitre

Voici votre point de départ pour écrire du JavaScript. À la fin de ce chapitre, vous saurez comment :

  • ajouter JavaScript directement à une page HTML avec la balise <script>,
  • déplacer votre code dans un fichier .js séparé et le lier,
  • contrôler quand un script s'exécute avec les attributs defer et async,
  • écrire vos premières lignes de code, et
  • utiliser la console du navigateur pour afficher des résultats et trouver des erreurs.

Si vous êtes totalement débutant dans ce langage, lisez d'abord la courte Introduction à JavaScript pour avoir une vue d'ensemble, puis revenez ici pour commencer à écrire du code.

Pourquoi vous avez besoin de JavaScript

HTML décrit la structure d'une page et CSS la met en forme, mais ni l'un ni l'autre ne peut réagir à un visiteur. HTML seul permet aux utilisateurs de lire du texte, regarder des vidéos, voir des images et cliquer sur des liens — il ne peut pas effectuer des calculs, valider un formulaire, ni modifier la page après son chargement. JavaScript ajoute le comportement : il transforme un document statique en quelque chose d'interactif qui peut répondre aux clics, à la saisie et à d'autres événements.

Ajouter JavaScript à une page signifie que vous écrivez un programme informatique. La plupart des scripts pour débutants sont courts, mais ils partagent les mêmes blocs de construction que les programmes plus complexes : des valeurs, des conditions et des instructions étape par étape. Une bonne façon de réfléchir avant de coder est de décomposer une tâche en petites étapes. Par exemple, pour accueillir un visiteur par son nom — "Bienvenue, Jean Dupont !" — votre programme doit :

  1. demander au visiteur son nom,
  2. lire la réponse, et
  3. afficher le message sur la page.

Une fois les étapes claires, vous les traduisez en code. Apprendre le langage ressemble beaucoup à l'apprentissage d'une langue parlée : vous assimilez de nouveaux mots (let, if, function) et apprenez à les combiner.

Comment ajouter JavaScript à une page

Le navigateur lit le HTML de haut en bas. Pour lui indiquer "du JavaScript arrive", vous encadrez votre code dans la balise HTML <script>. Tout ce qui se trouve entre la balise ouvrante <script> et la balise fermante </script> est exécuté en tant que JavaScript :

Un script "Hello, world!" intégré dans le HTML

<!DOCTYPE HTML>
<html>
  <body>
    <p>Before the script...</p>
    <script>
      alert('Hello, world!');
    </script>
    <p>...After the script.</p>
  </body>
</html>
Essayez vous-même »

Une balise <script> peut contenir le code lui-même (appelé code inline) ou pointer vers un fichier externe via l'attribut src (abordé dans la section suivante). Vous pouvez placer des balises <script> dans le <head> de la page ou n'importe où dans le <body>.

Où placer la balise <script>

Un script bloque l'analyse pendant son exécution, donc le placement est important :

  • Juste avant la balise fermante </body> est l'endroit le plus simple et le plus sûr. Au moment où le script s'exécute, le HTML au-dessus existe déjà, de sorte que le code peut accéder aux éléments de la page.
  • Dans le <head> garde votre code organisé en un seul endroit, mais une balise <script> ordinaire placée là s'exécute avant que le corps ne soit analysé — elle ne peut donc pas encore voir les éléments de la page. Pour remédier à cela, utilisez l'attribut defer (voir ci-dessous).

Anciens attributs de <script> que vous pouvez encore rencontrer

Les scripts modernes ont rarement besoin d'attributs, mais deux apparaissent dans du code plus ancien :

  • type — HTML4 exigeait type="text/javascript". Ce n'est plus nécessaire ; le standard moderne réutilise type uniquement pour les modules JavaScript (type="module"), un sujet avancé abordé plus tard.
  • language — language="javascript" déclarait autrefois le langage du script. JavaScript étant la valeur par défaut, cet attribut est désormais obsolète.

Vous pouvez lire tous les attributs disponibles dans le chapitre sur les attributs HTML.

Contrôler le chargement d'un script : defer et async

Lorsque le navigateur rencontre une balise <script src="..."> externe, il s'arrête normalement de construire la page, télécharge le fichier et l'exécute avant de continuer. Sur une page avec plusieurs scripts, cela ralentit le rendu. Deux attributs modifient ce comportement :

  • defer — télécharge le script en parallèle et ne l'exécute qu'après que le HTML est entièrement analysé, dans l'ordre d'apparition des scripts. C'est la valeur par défaut recommandée pour les scripts qui interagissent avec la page.
  • async — télécharge en parallèle et s'exécute dès que le fichier est prêt, sans garantir l'ordre. Idéal pour les scripts indépendants (analytics, publicités) qui ne dépendent pas d'autre code ni de la disponibilité de la page.
<!-- Runs after the page is parsed, keeps order -->
<script defer src="main.js"></script>

<!-- Runs whenever it finishes downloading, order not guaranteed -->
<script async src="analytics.js"></script>

Ces deux attributs s'appliquent uniquement aux scripts externes (src). Pour le code inline, placez simplement la balise <script> en bas du <body>.

Fichiers JavaScript externes

Le code inline convient pour une démonstration rapide, mais les projets réels conservent JavaScript dans des fichiers .js séparés. Copier le même code dans chaque page est difficile à maintenir — si vous corrigez un bug, vous devrez éditer chaque page. Un script externe réside dans un seul fichier .js que de nombreuses pages peuvent partager, vous l'écrivez une seule fois et le navigateur peut même le mettre en cache pour plus de rapidité.

Pour utiliser un fichier externe, faites pointer l'attribut src (source) de la balise <script> vers ce fichier et laissez la balise vide :

Lier un script situé dans le même dossier

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

Le chemin dans src fonctionne comme n'importe quelle autre URL en HTML. Il peut être :

  • Relatif à la page actuelle — my-script.js (même dossier) ou js/my-script.js (un sous-dossier).
  • Chemin absolu (depuis la racine du site) — commence par / :
<script src="/path/W3DocsScript.js"></script>
  • Une URL complète, utile pour les bibliothèques hébergées sur un CDN :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Pour charger plusieurs fichiers, utilisez une balise <script> par fichier. Ils s'exécutent de haut en bas :

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

Un piège courant : une seule balise <script> ne peut pas avoir à la fois un attribut src et du code inline. Si src est défini, tout ce qui se trouve entre les balises est ignoré :

src défini — l'alert inline ne s'exécute jamais

<!DOCTYPE HTML>
<html>
  <body>
    <p>Before the script...</p>
    <script src="W3DocsScript.js">
      alert("Hello, world!"); // the content is ignored, because src is set
    </script>
    <p>...After the script.</p>
  </body>
</html>
Essayez vous-même »

Pour utiliser à la fois un fichier externe et du code inline, divisez-les en deux balises séparées :

Deux balises : une externe, une inline

<!DOCTYPE HTML>
<html>
  <body>
    <p>Before the script...</p>
    <script src="W3DocsScript.js"></script>
    <script>
      alert("Hello, world!");
    </script>
    <p>...After the script.</p>
  </body>
</html>
Essayez vous-même »

Votre premier programme JavaScript

Écrivons un premier programme complet. Créez un fichier HTML et, juste avant la balise fermante </body>, ajoutez une balise <script> avec une seule ligne qui affiche une boîte de dialogue :

Une boîte de dialogue alert()

<!DOCTYPE HTML>
<html>
  <head>
    <title>My First Script</title>
  </head>
  <body>
    <p>Before the script...</p>
    <script>
      alert('Welcome to W3Docs');
    </script>
  </body>
</html>
Essayez vous-même »

Lorsque vous ouvrez cette page dans un navigateur, une boîte de dialogue apparaît avec le texte Welcome to W3Docs. La page s'arrête jusqu'à ce que vous cliquiez sur OK ; une fois la boîte fermée, le reste de la page s'affiche. alert() est pratique pour des vérifications rapides pendant l'apprentissage, mais il interrompt l'utilisateur, donc le code de production l'utilise rarement.

Écrire du texte sur une page web

alert() affiche une fenêtre contextuelle, mais vous souhaitez souvent insérer du texte dans la page elle-même. La commande pédagogique classique pour cela est document.write(), qui insère directement dans le document la chaîne que vous lui passez, au fur et à mesure du chargement :

Utilisation de document.write()

<!DOCTYPE HTML>
<html>
  <head>
    <title>document.write demo</title>
  </head>
  <body>
    <h1>Writing to the document window</h1>
    <script>
      document.write('<p>Welcome to W3Docs!</p>');
    </script>
  </body>
</html>
Essayez vous-même »

Comme la fonction alert(), document.write() affiche ce que vous placez entre ses parenthèses — ici un élément <p>, de sorte que le navigateur ajoute un nouveau paragraphe sous le titre.

Attention : document.write() convient pour une première expérience, mais évitez-le dans de vrais projets. S'il s'exécute après que la page a fini de charger, il efface l'intégralité du document. Le code moderne met à jour la page via le DOM (par exemple element.textContent = '...') à la place.

La console JavaScript du navigateur

Chaque navigateur moderne est livré avec une console intégrée — l'outil le plus utile dont vous disposez pendant l'apprentissage. Elle affiche les messages que vous imprimez, signale les erreurs avec le numéro de ligne exact, et vous permet de taper du JavaScript et de l'exécuter instantanément.

Affichez-y des messages avec console.log(). Contrairement à alert(), elle n'interrompt pas la page, et contrairement à document.write(), elle n'écrase jamais votre document — c'est donc la méthode de référence pour inspecter des valeurs :

Affichage dans la console

<!DOCTYPE HTML>
<html>
  <head>
    <title>console.log demo</title>
  </head>
  <body>
    <p>Open the console to see the message.</p>
    <script>
      console.log('Welcome to W3Docs');
      console.log('2 + 2 =', 2 + 2);
    </script>
  </body>
</html>
Essayez vous-même »

Pour ouvrir la console :

  • Chrome / Edge : Ctrl + Shift + J (Windows/Linux) ou Cmd + Option + J (Mac), ou via le menu → Plus d'outils → Outils de développement et sélectionnez l'onglet Console.
  • Firefox : Ctrl + Shift + K (Windows/Linux) ou Cmd + Option + K (Mac).
  • Safari : activez le menu Développement dans Réglages → Avancé, puis appuyez sur Cmd + Option + C.

Pour une visite approfondie des outils de débogage, consultez DOM debugging and tools.

Résumé

  • Ajoutez JavaScript avec la balise <script> — le code inline va entre les balises ; un fichier externe va dans l'attribut src (jamais les deux dans une seule balise).
  • Placez les scripts ordinaires juste avant </body>, ou utilisez defer sur les scripts externes pour les exécuter après l'analyse de la page.
  • Les fichiers .js externes permettent la réutilisation et la mise en cache sur de nombreuses pages.
  • alert() affiche une fenêtre contextuelle, document.write() écrit dans la page (à utiliser avec parcimonie), et console.log() affiche dans la console sans perturber la page.

Apprenez ensuite à stocker des données dans les variables JavaScript et à documenter votre code avec les commentaires.

Entraînement

Pratique
Lesquelles des affirmations suivantes sont vraies concernant les débuts avec JavaScript dans le développement web ?
Lesquelles des affirmations suivantes sont vraies concernant les débuts avec JavaScript dans le développement web ?
Was this page helpful?