HTML, CSS et JavaScript sont les trois principaux langages utilisés dans le développement frontal. HTML est un langage de balisage, tandis que CSS est un langage de style.
JavaScript est un langage de programmation orienté objet principalement utilisé pour créer le côté client des applications Web et mobiles. Ce langage dynamique open-source est devenu l'un des plus utilisés langages de programmation en raison de sa flexibilité et de sa facilité de compréhension.
Avec HTML5 et CSS3, vous pouvez créer des sites Web statiques. Cependant, pour ajouter de l'interactivité à un tel site, vous devez utiliser un langage de programmation tel que JavaScript que les navigateurs comprennent.
Cet article explique pourquoi vous devez utiliser JavaScript avec HTML, les différentes approches pour ajouter du code JavaScript à HTML, et les meilleures pratiques pour combiner les deux langues.
Why it is crucial to use JavaScript in HTML
- Ajouter de l'interactivité: L'interactivité répond aux entrées/actions de l'utilisateur en temps réel sans recharger le navigateur. Par exemple, vous pouvez avoir un compteur qui augmente de un à chaque clic. Un autre exemple peut être une réponse qui indique aux utilisateurs que leurs commentaires ont été envoyés chaque fois qu'ils cliquent sur le bouton d'envoi.
- Validation côté client: Vous pouvez utiliser JavaScript pour capturer les données correctes sur les formulaires. Par exemple, vous pouvez utiliser ce langage de programmation pour valider les entrées de l'utilisateur sur une page d'inscription par le format de l'e-mail, la longueur du mot de passe et la combinaison de caractères à utiliser.
- Manipulation DOM : JavaScript propose le modèle d'objet de document (DOM), qui facilite la modification dynamique du contenu d'une page Web. Avec cette technologie en place, le contenu d'une page est mis à jour automatiquement en fonction des entrées de l'utilisateur sans recharger la page Web.
- Compatibilité entre navigateurs : JavaScript est compatible avec tous les navigateurs modernes. Les pages Web créées à l'aide de HTML, CSS et JavaScript fonctionneront donc parfaitement sur différents navigateurs.
Pré-requis
- Compréhension de base du HTML : Vous comprenez la base Balises HTML, peut ajouter des boutons et créer des formulaires en HTML.
- Compréhension de base de CSS : Vous comprenez les concepts CSS tels que les sélecteurs d'identifiant, de classe et d'élément.
- Un éditeur de code : Vous pouvez utiliser un éditeur de code comme VS Code ou Atom. Vous pouvez également utiliser un compilateur JavaScript en ligne si vous ne souhaitez pas installer de logiciel sur votre système.
How to use JavaScript in HTML
Vous pouvez utiliser trois approches principales pour ajouter du code JavaScript au HTML. Nous explorons chaque approche et là où elle convient le mieux.
# 1. Incorporation de code entre and étiqueter
Cette approche vous permet d'avoir des codes JavaScript et HTML dans le même fichier (fichier HTML). Nous pouvons commencer par créer un dossier de projet où nous montrerons comment cela fonctionne. Vous pouvez utiliser ces commandes pour commencer ;
mkdir javascript-html-playground
cd javascript-html-playgroundCréez deux fichiers ; index.html et style.css
Ajoutez ce code de démarrage au fichier HTML ;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div class="form-container">
<form>
<label for="name">Name:</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="Submit" />
</form>
</div>
</body>
</html>Ajoutez ce code de démarrage à votre fichier 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;
}Lorsque la page Web sera rendue, vous aurez quelque chose comme ça ;
Nous pouvons maintenant ajouter un simple code JavaScript qui dit "soumis" lorsque vous cliquez sur le bouton Soumettre. Le code HTML refactorisé avec JavaScript sera ;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div class="form-container">
<form>
<label for="name">Name:</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="Submit" onclick="submitted()" />
</form>
</div>
<script>
function submitted() {
alert("submitted");
}
</script>
</body>
</html>Lorsque vous cliquez sur le bouton Soumettre, vous obtiendrez quelque chose de similaire à ceci.
Avantages de l'intégration de code JavaScript entre … Mots clés
- Rapide à mettre en œuvre : Travailler sur le même fichier peut vous faire gagner du temps car vous pouvez référencer votre code JavaScript à partir du code HTML du même fichier.
- Code facile à lire : La présence de tags separates HTML from JavaScript codes, making it easier to read and debug.
Inconvénients de l'intégration de code JavaScript entre … Mots clés
- Rend difficile la réutilisation du code : Si vous avez plusieurs formulaires dans votre application, cela signifie que vous allez créer du code JavaScript pour chaque formulaire.
- Ralentit les performances : Les gros blocs de code sur le document HTML peuvent ralentir les vitesses de chargement.
# 2. Code en ligne en utilisant le code JavaScript directement dans HTML
Au lieu d'inclure le code JavaScript ci-dessus dans …. balises, vous pouvez l'ajouter directement au code HTML. Nous utiliserons le même code HTML et la même feuille de style (style.css).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div class="form-container">
<form>
<label for="name">Name:</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="Submit" onclick="alert('inline submit')" />
</form>
</div>
</body>
</html>Lorsque vous cliquez sur soumettre, une petite fenêtre sur votre navigateur avec les mots "soumettre en ligne" apparaît.
Avantages de l'ajout de JavaScript en tant que code en ligne
- Rapide à mettre en œuvre : Vous n'avez pas besoin de passer d'un document à un autre pour écrire du code HTML et JavaScript.
- Parfait pour une petite application : Si vous avez une petite application qui ne demande pas beaucoup d'interactivité, le JavaScript en ligne est un choix parfait.
Inconvénients de l'ajout de JavaScript en tant que code en ligne
- Le code n'est pas réutilisable : Si votre application comporte plusieurs formulaires, vous créerez du code JavaScript pour chaque formulaire.
- Ralentit les performances : Les gros blocs de code sur le document HTML peuvent ralentir les vitesses de chargement.
- Lisibilité du code : À mesure que la base de code continue de croître, la lisibilité du code diminue.
# 3. Création d'un fichier JavaScript externe
Au fur et à mesure que votre application grandit, vous remarquerez que l'ajout de code JavaScript directement dans un fichier HTML n'est pas une bonne idée. Vous êtes également susceptible d'avoir des pages Web avec des vitesses de chargement faibles lorsque vous avez beaucoup de code sur votre fichier HTML.
Créer un nouveau fichier script.js pour transporter votre code JavaScript.
Importez le fichier script.js sur le fichier HTML ;
<head>
<script src="script.js"></script>
</head>La nouvelle page HTML mise à jour aura ce code ;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="script.js"></script>
</head>
<body>
<div class="form-container">
<form>
<label for="name">Name:</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="Submit" />
</form>
</div>
</body>
</html>Ajoutez ce code au script.js fichier;
document.addEventListener("DOMContentLoaded", function() {
const form = document.querySelector("form");
form.addEventListener("submit", function(event) {
event.preventDefault();
alert("external JS sheet submit");
});
});Ce JavaScript fait ce qui suit ;
- Nous avons un écouteur d'événement qui attend le
DOMContentLoadedévénement à tirer. - Une fonction de rappel est exécutée après la
DOMContentLoadedl'événement est déclenché. - Le code utilise querySelector pour sélectionner un formulaire.
- Nous utilisons les
event.preventDefault()pour empêcher le DOM de choisir le comportement par défaut (actualiser la page ou naviguer vers une nouvelle page) lorsque l'événement de soumission est déclenché. - Un message "Soumission de feuille JS externe" est déclenché une fois l'événement submit déclenché.
JavaScript in HTML: Best Practices
- Réduire la taille des fichiers : Plus la taille du fichier est grande, plus le temps de chargement sur le navigateur est long. La réduction supprime tous les caractères indésirables dans le code source sans changer sa signification ou ses performances. Vous pouvez utiliser des outils tels que Yahoo YUI Compressor et HTMLMinifier pour créer une base de code compacte.
- Gardez votre code organisé : Cela rendra votre facile à lire et à entretenir. Vous pouvez utiliser des extensions telles que Plus jolie pour organiser votre code.
- Utilisez des bibliothèques externes : Si une bibliothèque peut effectuer une certaine tâche pour votre application, il n'est pas nécessaire d'écrire le code à partir de zéro. Cependant, évitez d'utiliser plusieurs bibliothèques qui atteignent les mêmes objectifs sur le même projet.
- Optimisez le placement JavaScript : Si vous avez l'intention d'ajouter du code JavaScript à votre fichier HTML, assurez-vous qu'il vient après le code HTML. Placez le JavaScript entre tags before closing the tag. This ensures that HTML content such as text, images, and table load first before JavaScript, improving loading speed.
Récapitulation
Vous pouvez maintenant utiliser confortablement JavaScript avec HTML pour créer des pages Web interactives. L'approche que vous utiliserez pour fusionner les deux technologies dépendra de la nature de l'application Web que vous créez. Par exemple, vous pouvez utiliser du code en ligne lors de la création d'une petite application. D'autre part, une grosse application a besoin d'un fichier JavaScript externe que vous importerez dans votre fichier HTML.
Check Out Bibliothèques de tables JavaScript que vous pouvez utiliser aujourd'hui.
