JavaScript : Intégrer des scripts dans HTML

Introduction

Bienvenue dans votre premier laboratoire JavaScript ! JavaScript est un langage de script puissant qui vous permet de créer du contenu dynamique et interactif sur les pages web. Sans lui, les pages web seraient statiques et beaucoup moins attrayantes.

Dans ce laboratoire, vous apprendrez les deux méthodes fondamentales pour inclure du JavaScript dans une page web :

JavaScript interne : Écrire du code directement dans des balises <script> à l'intérieur d'un fichier HTML.
JavaScript externe : Placer du code dans un fichier .js séparé et le lier au fichier HTML.

Nous commencerons avec une page HTML de base et ajouterons progressivement des fonctionnalités JavaScript. Vous utiliserez le WebIDE intégré pour éditer vos fichiers et prévisualiser vos modifications en temps réel en utilisant l'onglet "Web 8080". Commençons !

Ceci est un Guided Lab, qui fournit des instructions étape par étape pour vous aider à apprendre et à pratiquer. Suivez attentivement les instructions pour compléter chaque étape et acquérir une expérience pratique. Les données historiques montrent que c'est un laboratoire de niveau intermédiaire avec un taux de réussite de 68%. Il a reçu un taux d'avis positifs de 98% de la part des apprenants.

Créer un fichier HTML avec une balise script

Dans cette étape, vous allez ajouter un bloc JavaScript interne à votre fichier HTML. Le processus de configuration a déjà créé un fichier index.html pour vous dans le répertoire ~/project. Nous allons maintenant y ajouter la balise <script>, qui est la manière standard de déclarer un bloc de code JavaScript.

Tout d'abord, localisez le fichier index.html dans l'explorateur de fichiers sur le côté gauche du WebIDE et double-cliquez dessus pour l'ouvrir.

Maintenant, ajoutez une balise <script> vide juste avant la balise fermante </body>. C'est la pratique recommandée car elle garantit que le contenu HTML est analysé et affiché à l'utilisateur avant que le navigateur ne commence à exécuter le JavaScript, améliorant ainsi le temps de chargement perçu de la page.

Votre fichier index.html devrait ressembler à ceci :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JavaScript Lab</title>
  </head>
  <body>
    <h1>Welcome to the JavaScript Lab!</h1>

    <script></script>
  </body>
</html>

Assurez-vous de sauvegarder le fichier après avoir effectué les modifications (vous pouvez utiliser Ctrl+S ou Cmd+S).

Écrire console.log pour afficher Hello World

Maintenant que vous avez un endroit pour écrire votre JavaScript, ajoutons votre première ligne de code. Nous utiliserons la fonction console.log(). C'est un outil fondamental pour tout développeur JavaScript, car il vous permet d'afficher des messages dans la console du développeur du navigateur. C'est incroyablement utile pour le débogage et pour comprendre comment votre code s'exécute.

Dans votre fichier index.html, ajoutez console.log('Hello World'); à l'intérieur des balises <script> que vous avez créées à l'étape précédente.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JavaScript Lab</title>
  </head>
  <body>
    <h1>Welcome to the JavaScript Lab!</h1>

    <script>
      console.log("Hello World");
    </script>
  </body>
</html>

Après avoir sauvegardé le fichier, voyons le résultat.

Cliquez sur l'onglet Web 8080 en haut de l'interface LabEx.
Vous verrez l'en-tête <h1>. Pour voir la sortie de la console, faites un clic droit n'importe où sur la page et sélectionnez "Inspecter" (ou "Inspect").
Un nouveau panneau s'ouvrira. Cliquez sur l'onglet "Console" dans ce panneau.
Vous devriez voir le message Hello World affiché dans la console.

Sortie de la console affichant Hello World

Lier un fichier JavaScript externe avec l'attribut src

Bien que les scripts internes soient suffisants pour de petites tâches, il est préférable de conserver votre JavaScript dans des fichiers séparés. Cela rend votre code plus propre, plus facile à gérer et réutilisable sur différentes pages HTML.

Dans cette étape, nous allons déplacer notre code vers un fichier externe nommé script.js (qui a déjà été créé pour vous) et le lier à index.html.

Tout d'abord, modifiez votre fichier index.html. Supprimez la ligne console.log entre les balises <script> et ajoutez l'attribut src à la balise ouvrante <script> pour qu'elle pointe vers votre fichier externe.

Votre index.html devrait maintenant ressembler à ceci :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JavaScript Lab</title>
  </head>
  <body>
    <h1>Welcome to the JavaScript Lab!</h1>

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

Ensuite, ouvrez le fichier script.js depuis l'explorateur de fichiers. Il est actuellement vide. Ajoutez la même instruction console.log à ce fichier.

Votre fichier script.js ne devrait contenir que cette ligne :

console.log("Hello World");

Sauvegardez les deux fichiers. Si vous retournez à l'onglet Web 8080 et actualisez la page, vous verrez exactement le même résultat dans la console. Le navigateur charge maintenant index.html, voit la balise <script src="script.js">, puis récupère et exécute le contenu de script.js.

Ajouter la fonction alert pour un message contextuel

En plus de l'affichage dans la console, JavaScript peut interagir plus directement avec l'utilisateur. L'une des façons les plus simples de le faire est d'utiliser la fonction alert(), qui affiche une boîte de message popup à l'utilisateur.

Ajoutons une alerte à notre script. Ouvrez le fichier script.js et ajoutez une nouvelle ligne de code pour créer une alerte de bienvenue.

Votre fichier script.js devrait maintenant ressembler à ceci :

console.log("Hello World");
alert("Welcome to JavaScript!");

La fonction alert() interrompra l'exécution du script et le rendu de la page jusqu'à ce que l'utilisateur clique sur "OK" dans la boîte popup. C'est donc un moyen très direct de communiquer des informations importantes.

Sauvegardez le fichier script.js. Nous verrons son effet à l'étape suivante.

Actualiser le navigateur pour exécuter le script

Vous avez maintenant ajouté à la fois un log dans la console et une alerte à votre fichier JavaScript externe. Il est temps de voir le résultat final.

Retournez à l'onglet Web 8080.

Pour voir les modifications que vous avez apportées au fichier script.js, vous devez actualiser l'onglet du navigateur. Cela indique au navigateur de re-télécharger le HTML et tous les fichiers liés, y compris votre script mis à jour.

Après l'actualisation, vous devriez immédiatement voir une boîte popup avec le message "Welcome to JavaScript!".

Après avoir cliqué sur "OK", la popup disparaîtra et le reste de la page se chargera. Si vous ouvrez à nouveau la console du développeur (clic droit -> Inspecter -> Console), vous verrez toujours le message "Hello World" y être enregistré. Cela démontre l'ordre d'exécution de votre script.

Félicitations, vous avez intégré avec succès JavaScript dans une page web en utilisant les méthodes internes et externes !

Résumé

Dans ce laboratoire, vous avez fait vos premiers pas dans le monde du scripting web avec JavaScript. Vous avez acquis une expérience pratique des concepts fondamentaux de l'intégration de JavaScript dans un projet web.

Vous avez appris :

Comment ajouter du JavaScript directement dans un fichier HTML à l'aide de la balise <script>.
Comment utiliser console.log() pour afficher des messages dans la console du développeur du navigateur à des fins de débogage.
Les avantages de séparer votre code dans des fichiers .js externes.
Comment lier un fichier JavaScript externe à votre HTML en utilisant l'attribut src de la balise <script>.
Comment créer un message popup destiné à l'utilisateur avec la fonction alert().

Cette base est cruciale pour construire des applications web plus complexes et interactives. Continuez à expérimenter et à approfondir ce que vous avez appris !

Introduction et intégration de JavaScript