Votre premier laboratoire JavaScript

Beginner

💡 Ce tutoriel est traduit par l'IA à partir de la version anglaise. Pour voir la version originale, vous pouvez cliquer ici

Introduction

Bonjour et bienvenue sur LabEx! Dans ce premier laboratoire, vous allez apprendre le programme classique "Hello, World!" en JavaScript.

Cliquez sur le bouton Continue ci-dessous pour commencer le laboratoire.


Skills Graph

Hello JavaScript

JavaScript est un langage de programmation qui vous permet d'ajouter de l'interactivité aux sites web. Il est utilisé pour créer des pages web dynamiques et interactives. C'est un langage de programmation interprété avec des capacités orientées objet.

Nous allons utiliser JavaScript pour créer une simple page web qui affichera un message lorsqu'un bouton sera cliqué.

index.html a été créé dans WebIDE. Ouvrez-le et ajoutez le code suivant :

<!doctype html>
<html>
  <head>
    <title>Hello, World!</title>
  </head>
  <body>
    <h1 id="message">Click the button to display the message!</h1>

    <button onclick="displayMessage()">Click me</button>

    <script>
      function displayMessage() {
        document.getElementById("message").textContent = "Hello, JavaScript!";
      }
    </script>
  </body>
</html>

Le code ci-dessus affichera un message lorsque le bouton sera cliqué. Le message est affiché dans l'élément h1 avec l'identifiant message.

L'attribut onclick est utilisé pour appeler la fonction displayMessage() lorsque le bouton est cliqué. La fonction displayMessage() changera le contenu texte de l'élément h1 en "Hello, JavaScript!".

HTML code for interactive button

Ensuite, cliquez sur le bouton Go Live en bas à droite. Cela lancera un serveur web local sur le port 8080.

Maintenant, vous pouvez passer à l'onglet Web 8080 et cliquer sur le bouton de rafraîchissement pour voir les modifications.

Web page displaying Hello JavaScript

Summary

Félicitations! Vous avez terminé votre premier laboratoire LabEx.

Si vous souhaitez en savoir plus sur LabEx et sur la façon de l'utiliser, vous pouvez visiter notre Support Center. Ou vous pouvez regarder la vidéo pour en savoir plus sur LabEx.

La programmation est un long chemin, mais le Prochain laboratoire n'est qu'à un clic de distance. Allons-y!