Comment utiliser JavaScript en HTML pour créer des pages Web interactives

Photo of author

By pierre



HTML, CSS et JavaScript constituent le trio de langages fondamentaux pour le développement front-end. HTML est un langage de balisage, tandis que CSS est dédié à la mise en forme visuelle.

JavaScript, quant à lui, est un langage de programmation orienté objet, principalement employé pour dynamiser l’interface utilisateur des applications web et mobiles. Ce langage dynamique, open source, s’est imposé comme l’un des plus populaires grâce à sa grande souplesse et à sa relative simplicité.

Avec HTML5 et CSS3, il est possible de construire des sites web statiques. Toutefois, pour ajouter une dimension interactive, il est nécessaire d’intégrer un langage de programmation tel que JavaScript, que les navigateurs sont capables d’interpréter.

Cet article a pour objectif d’expliquer pourquoi l’utilisation conjointe de JavaScript et HTML est essentielle, de présenter les différentes manières d’intégrer du code JavaScript dans un document HTML, et de partager les bonnes pratiques pour une collaboration optimale entre ces deux langages.

Pourquoi l’intégration de JavaScript est indispensable dans HTML

  • Ajout d’interactivité : L’interactivité permet de répondre en temps réel aux actions et aux saisies de l’utilisateur, sans nécessiter un rechargement complet de la page. Prenons l’exemple d’un compteur qui s’incrémente à chaque clic, ou d’un message de confirmation signalant l’envoi réussi d’un commentaire.
  • Validation côté client : JavaScript permet de contrôler la validité des données saisies dans les formulaires. Il peut, par exemple, vérifier le format d’une adresse e-mail, la longueur d’un mot de passe ou la combinaison de caractères utilisés, directement lors de la saisie.
  • Manipulation du DOM : JavaScript met à disposition le modèle d’objet de document (DOM), qui simplifie la modification dynamique du contenu d’une page web. Grâce à cette technologie, le contenu se met à jour automatiquement en fonction des actions de l’utilisateur, sans rechargement de la page.
  • Compatibilité entre navigateurs : JavaScript est compatible avec tous les navigateurs modernes. Ainsi, les pages web développées avec HTML, CSS et JavaScript fonctionneront correctement quel que soit le navigateur utilisé.

Prérequis

  • Notions de base en HTML : Une connaissance des balises HTML essentielles, la capacité à ajouter des boutons et à créer des formulaires à l’aide d’HTML.
  • Notions de base en CSS : La compréhension des concepts CSS tels que les sélecteurs d’identifiant, de classe et d’élément.
  • Un éditeur de code : L’utilisation d’un éditeur de code tel que VS Code ou Atom, ou d’un compilateur JavaScript en ligne si vous ne souhaitez pas installer de logiciel.

Comment intégrer du JavaScript dans HTML

Il existe principalement trois manières d’ajouter du code JavaScript à un document HTML. Nous allons examiner chacune de ces approches et identifier leurs cas d’utilisation privilégiés.

#1. Intégration de code entre les balises <script> et </script>

Cette approche permet de regrouper le code JavaScript et HTML dans un même fichier (fichier HTML). Pour illustrer son fonctionnement, nous allons commencer par créer un dossier de projet :

mkdir javascript-html-playground
cd javascript-html-playground

Créez deux fichiers : index.html et style.css

Ajoutez le code HTML de base suivant à votre fichier index.html :

<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/style.css" type="text/css" />
  </head>
  <body>
    <div class="form-container">
      <form>
        <label for="name">Nom:</label>
        <input type="text" id="name" />
        <br />
        <label for="email">Email:</label>
        <input type="email" id="email" />
        <br />
        <label for="message">Message:</label>
        <textarea
          id="message"
          name="message"
          rows="5"
          cols="30"
          required
        ></textarea>
        <br />
        <input type="submit" value="Soumettre" />
      </form>
    </div>
  </body>
</html>

Ajoutez ce code CSS de base à votre fichier style.css :

.form-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}
input[type="text"],
input[type="email"],
textarea {
  display: block;
  margin-bottom: 10px;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 8px;
}
input[type="submit"] {
  background-color: #4CAF50;
  color: white;
  padding: 5px 10px;
  border: none;
  border-radius: 2.5px;
  font-size: 8px;
  cursor: pointer;
}
input[type="submit"]:hover {
  background-color: #3e8e41;
}

Une fois la page web affichée, vous obtiendrez un formulaire simple.

Ajoutons maintenant un code JavaScript simple qui affichera une alerte « soumis » lorsque vous cliquerez sur le bouton Soumettre. Voici le code HTML modifié avec l’ajout de JavaScript :

<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/style.css" type="text/css" />
  </head>
  <body>
    <div class="form-container">
      <form>
        <label for="name">Nom:</label>
        <input type="text" id="name" />
        <br />
        <label for="email">Email:</label>
        <input type="email" id="email" />
        <br />
        <label for="message">Message:</label>
        <textarea
          id="message"
          name="message"
          rows="5"
          cols="30"
          required
        ></textarea>
        <br />
        <input type="submit" value="Soumettre" onclick="submitted()" />
      </form>
    </div>
    <script>
      function submitted() {
        alert("soumis");
      }
    </script>
  </body>
</html>

Lorsque vous cliquerez sur le bouton Soumettre, une alerte s’affichera.

Avantages de l’intégration de code JavaScript entre les balises <script> … </script>

  • Rapidité d’implémentation : Travailler dans un seul fichier facilite la référence au code JavaScript depuis le code HTML.
  • Lisibilité du code : La présence des balises <script> sépare clairement le code HTML du code JavaScript, améliorant ainsi la lisibilité et le débogage.

Inconvénients de l’intégration de code JavaScript entre les balises <script> … </script>

  • Difficulté de réutilisation du code : Si vous avez plusieurs formulaires dans votre application, vous devrez créer du code JavaScript spécifique pour chacun.
  • Impact sur les performances : Les blocs de code importants dans le document HTML peuvent ralentir la vitesse de chargement.

#2. Code en ligne en utilisant directement du code JavaScript dans HTML

Au lieu d’encadrer le code JavaScript précédent par des balises <script> …. </script>, vous pouvez l’ajouter directement dans le code HTML. Nous utiliserons le même code HTML et la même feuille de style (style.css).

<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/style.css" type="text/css" />
  </head>
  <body>
    <div class="form-container">
      <form>
        <label for="name">Nom:</label>
        <input type="text" id="name" />
        <br />
        <label for="email">Email:</label>
        <input type="email" id="email" />
        <br />
        <label for="message">Message:</label>
        <textarea
          id="message"
          name="message"
          rows="5"
          cols="30"
          required
        ></textarea>
        <br />
        <input type="submit" value="Soumettre" onclick="alert('soumettre en ligne')" />
      </form>
    </div>
  </body>
</html>

Lorsque vous cliquerez sur Soumettre, une fenêtre contextuelle affichera le message « soumettre en ligne ».

Avantages de l’ajout de JavaScript en tant que code en ligne

  • Implémentation rapide : Vous n’avez pas besoin de naviguer entre plusieurs documents pour écrire le code HTML et JavaScript.
  • Idéal pour les petites applications : Si votre application est simple et ne nécessite pas une grande interactivité, le JavaScript en ligne est un excellent choix.

Inconvénients de l’ajout de JavaScript en tant que code en ligne

  • Code non réutilisable : Si votre application comporte plusieurs formulaires, vous devrez créer du code JavaScript spécifique pour chacun.
  • Ralentissement des performances : Les blocs de code importants dans le document HTML peuvent ralentir les vitesses de chargement.
  • Lisibilité du code : Au fur et à mesure que la base de code grandit, la lisibilité du code diminue.

#3. Création d’un fichier JavaScript externe

Au fur et à mesure que votre application se développe, vous remarquerez que l’ajout de code JavaScript directement dans un fichier HTML n’est plus une bonne pratique. De plus, vous risquez de rencontrer des problèmes de vitesse de chargement si votre fichier HTML contient beaucoup de code.

Créez un nouveau fichier script.js pour héberger votre code JavaScript.

Importez le fichier script.js dans le fichier HTML :

<head>
  <script src="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/script.js"></script>
</head>

Le nouveau code HTML mis à jour ressemblera à ceci :

<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/style.css" type="text/css" />
    <script src="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/script.js"></script>
  </head>
  <body>
    <div class="form-container">
      <form>
        <label for="name">Nom:</label>
        <input type="text" id="name" />
        <br />
        <label for="email">Email:</label>
        <input type="email" id="email" />
        <br />
        <label for="message">Message:</label>
        <textarea
          id="message"
          name="message"
          rows="5"
          cols="30"
          required
        ></textarea>
        <br />
        <input type="submit" value="Soumettre" />
      </form>
    </div>
  </body>
</html>

Ajoutez ce code dans le fichier script.js :

document.addEventListener("DOMContentLoaded", function() {
  const form = document.querySelector("form");
  form.addEventListener("submit", function(event) {
    event.preventDefault();
    alert("soumission depuis fichier JS externe");
  });
});

Ce code JavaScript effectue les opérations suivantes :

  • Un écouteur d’événement attend le déclenchement de l’événement DOMContentLoaded.
  • Une fonction de rappel est exécutée après le déclenchement de l’événement DOMContentLoaded.
  • Le code utilise querySelector pour sélectionner le formulaire.
  • Nous utilisons event.preventDefault() pour empêcher le comportement par défaut du DOM (actualisation de la page ou redirection vers une nouvelle page) lorsque l’événement submit est déclenché.
  • Un message « soumission depuis fichier JS externe » s’affiche après le déclenchement de l’événement submit.

JavaScript en HTML : Bonnes pratiques

  • Réduire la taille des fichiers : Plus un fichier est volumineux, plus son chargement dans le navigateur sera long. La minification supprime les caractères inutiles dans le code source sans altérer son sens ni ses performances. Vous pouvez utiliser des outils comme Yahoo YUI Compressor et HTMLMinifier pour obtenir un code compact.
  • Organiser le code : Cela rendra votre code facile à lire et à maintenir. Vous pouvez utiliser des extensions comme Prettier pour organiser votre code.
  • Utiliser des bibliothèques externes : Si une bibliothèque peut effectuer une tâche spécifique pour votre application, il n’est pas nécessaire de réécrire le code à partir de zéro. Cependant, évitez d’utiliser plusieurs bibliothèques qui remplissent le même objectif dans un même projet.
  • Optimiser le placement de JavaScript : Si vous comptez ajouter du code JavaScript à votre fichier HTML, assurez-vous qu’il se trouve après le code HTML. Placez le code JavaScript entre les balises <script> juste avant la balise de fermeture </body>. Cela permet de garantir que le contenu HTML (texte, images, tableaux) est chargé en premier, ce qui améliore la vitesse de chargement.

Conclusion

Vous êtes désormais en mesure d’utiliser efficacement JavaScript avec HTML pour créer des pages web interactives. L’approche que vous adopterez pour combiner ces deux technologies dépendra de la nature de l’application web que vous développez. Par exemple, vous pouvez utiliser du code en ligne pour une petite application, alors qu’une application plus importante nécessitera un fichier JavaScript externe que vous importerez dans votre fichier HTML.

Découvrez également les bibliothèques de tableaux JavaScript que vous pouvez utiliser.



Tweetez
Partagez
Épingle
Partagez
Partagez
0 Partages

12 meilleures solutions de paie mondiales pour vos employés distants internationaux

Microsoft Loop for Collaboration et Adobe AI Tool for Editing