Scripts HTML
Un script est un petit morceau de code intégré dans les pages web pour les rendre dynamiques et interactives. Par exemple, avec des scripts, vous pouvez créer des messages de boîte de dialogue contextuelle, des menus déroulants, etc. JavaScript est le langage de script le plus couramment utilisé sur les sites web. Vous pouvez également utiliser l'élément <script> avec d'autres langages ou types (par exemple, le type module ou le type MIME text/javascript).
Comment ajouter des scripts
L'élément <script> est utilisé pour intégrer un script ou une référence à un script exécutable dans un document HTML. Les scripts sont souvent placés dans la balise <head> ou à la fin de la balise <body>. Pour éviter de bloquer le rendu de la page, utilisez les attributs defer ou async lorsque vous placez des scripts dans le head. L'attribut defer télécharge le script en parallèle de l'analyse HTML et l'exécute une fois l'analyse terminée, tandis que async télécharge le script en parallèle et met en pause l'analyse HTML uniquement lorsque le script est prêt à être exécuté. Cependant, il n'y a aucune restriction et le script peut être placé n'importe où dans le document.
Si vous avez besoin que les mêmes scripts soient disponibles sur plusieurs pages web, vous devriez les placer dans un fichier séparé, puis les appeler depuis le document HTML.
Vous pouvez insérer le morceau de code suivant avec la balise <script> dans votre code HTML :
Scripts HTML
<script src="scripts.js"></script>Remarque : En HTML5, l'attribut type est facultatif (par défaut text/javascript) et est considéré comme obsolète pour les scripts JavaScript.
Comment déclencher des scripts
Vous pouvez spécifier si un script doit s'exécuter automatiquement (dès le chargement de la page) ou après que l'utilisateur a effectué une action (comme survoler ou cliquer sur un lien). Si vous souhaitez que le script s'exécute lorsque l'utilisateur effectue une action (appelée événement), vous devez utiliser des gestionnaires d'événements pour informer le navigateur quel événement est responsable du déclenchement du script.
Les gestionnaires d'événements peuvent être spécifiés en tant qu'attributs dans les balises HTML, ou attachés via JavaScript en utilisant des méthodes comme addEventListener.
Exemple de la balise HTML <script> avec un gestionnaire d'événements :
Exemple de gestionnaire d'événements — Scripts HTML — W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Event Handler Example</title>
</head>
<body>
<span id="trigger">
Bring your mouse here to see an alert
</span>
<script>
function myAlert() {
alert("I am an event handler....");
}
document.getElementById('trigger').addEventListener('mouseover', myAlert);
</script>
</body>
</html>L'élément <noscript>
Bien que de nombreux navigateurs modernes prennent en charge JavaScript, certains navigateurs plus anciens ne peuvent pas exécuter de code JavaScript, et les utilisateurs peuvent également avoir désactivé JavaScript dans leur navigateur. Pour fournir des informations alternatives aux navigateurs ne prenant pas en charge JavaScript ou aux navigateurs où JavaScript est désactivé, utilisez la balise <noscript>. Le contenu de cette balise n'est affiché à l'utilisateur que lorsque JavaScript est désactivé ou lorsque le navigateur ne prend pas en charge JavaScript.
Exemple de la balise HTML <noscript> :
Mon premier exemple JavaScript ! — Scripts HTML — W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<script>
document.getElementById('output').textContent = "My first JavaScript example!";
</script>
<p id="output"></p>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
<p>In case JavaScript is disabled or the browser doesn't support it, the code will display the content inside the noscript element.</p>
</body>
</html>Résultat
Pratique
Où la balise <script> peut-elle être placée dans le HTML ?