Dans ce tutoriel, vous apprendrez à inclure du JavaScript dans un document HTML.
Travailler avec des scripts côté client
Les scripts côté client font référence au type de programmes informatiques qui sont exécutés par le navigateur web de l’utilisateur. JavaScript (JS) est le langage de script côté client le plus populaire sur le web.
L’élément <script> est utilisé pour intégrer ou référencer JavaScript dans un document HTML afin d’ajouter de l’interactivité aux pages web et d’offrir une expérience utilisateur nettement meilleure.
Certaines des utilisations les plus courantes de JavaScript sont la validation de formulaires, la génération de messages d’alerte, la création d’une galerie d’images, l’affichage du contenu caché, la manipulation du DOM, et bien d’autres encore.
Ajout de JavaScript aux pages HTML
JavaScript peut être soit intégré directement à l’intérieur de la page HTML, soit placé dans un fichier script externe et référencé à l’intérieur de la page HTML. Les deux méthodes utilisent l’élément <script>.
Intégrer du JavaScript
Pour intégrer du JavaScript dans un fichier HTML, il suffit d’ajouter le code comme contenu d’un élément <script>.
Le JavaScript de l’exemple suivant écrit une chaîne de texte dans une page Web.
Exemple
Essayez ce code »
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>Embedding JavaScript</title></head><body> <div></div> <script> document.getElementById("greet").innerHTML = "Hello World!"; </script></body></html>Conseil : Idéalement, les éléments de script doivent être placés en bas de la page, avant la balise fermante body, c’est-à-dire. </body>, car lorsque le navigateur rencontre un script, il met en pause le rendu du reste de la page jusqu’à ce qu’il analyse le script, ce qui peut avoir un impact significatif sur les performances de votre site.
Appeler un fichier JavaScript externe
Vous pouvez également placer votre code JavaScript dans un fichier séparé (avec une extension .js), et appeler ce fichier dans votre document HTML par le biais de l’attribut src de la balise <script>.
Ceci est utile si vous voulez que le même script soit disponible pour plusieurs documents. Cela vous évite de répéter la même tâche encore et encore et rend votre site Web beaucoup plus facile à maintenir.
L’exemple suivant démontre comment lier un fichier JS externe en HTML.
Exemple
Essayez ce code »
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>Linking External JavaScript</title></head><body> <div></div> <script src="hello.js"></script></body></html>Note : Lorsque l’attribut src est spécifié, l’élément <script> doit être vide. Cela signifie simplement que vous ne pouvez pas utiliser le même élément <script> à la fois pour intégrer le JavaScript et pour créer un lien vers un fichier JavaScript externe dans un document HTML.
.js extension, comme « hello.js ». De plus, le fichier JavaScript externe ne contient que des instructions JavaScript ; il ne contient pas l’élément <script>...</script> comme le JavaScript intégré. L’élément HTML noscript
L’élément <noscript> est utilisé pour fournir un contenu alternatif aux utilisateurs qui ont désactivé JavaScript dans leur navigateur ou dont le navigateur ne prend pas en charge le script côté client.
Cet élément peut contenir tous les éléments HTML, hormis <script>, qui peuvent être inclus dans l’élément <body> d’une page HTML normale. Vérifions un exemple :
Exemple
Essayez ce code »
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>Noscript Demo</title> </head><body> <div></div> <script> document.getElementById("greet").innerHTML = "Hello World!"; </script> <noscript> <p>Oops! This website requires a JavaScript-enabled browser.</p> </noscript></body></html>noscript ne sera affiché que si le navigateur de l’utilisateur ne prend pas en charge les scripts, ou si les scripts sont désactivés dans le navigateur. .