HTML - JavaScript
UNE scriptest un petit programme qui peut ajouter de l'interactivité à votre site Web. Par exemple, un script peut générer un message de boîte d’alerte contextuelle ou fournir un menu déroulant. Ce script peut être écrit en utilisant JavaScript ou VBScript.
Vous pouvez écrire diverses petites fonctions, appelées gestionnaires d'événements à l'aide de n'importe quel langage de script, puis déclencher ces fonctions à l'aide d'attributs HTML.
De nos jours, seulement JavaScript et les frameworks associés sont utilisés par la plupart des développeurs Web, VBScript n'est même pas pris en charge par les principaux navigateurs.
Vous pouvez conserver le code JavaScript dans un fichier séparé, puis l'inclure là où c'est nécessaire, ou vous pouvez définir des fonctionnalités dans le document HTML lui-même. Voyons les deux cas un par un avec des exemples appropriés.
JavaScript externe
Si vous envisagez de définir une fonctionnalité qui sera utilisée dans divers documents HTML, il est préférable de conserver cette fonctionnalité dans un fichier JavaScript séparé, puis d'inclure ce fichier dans vos documents HTML. Un fichier JavaScript aura l'extension comme.js et il sera inclus dans les fichiers HTML en utilisant la balise <script>.
Exemple
Considérons que nous définissons une petite fonction en utilisant JavaScript dans script.js qui a le code suivant -
function Hello() {
alert("Hello, World");
}Utilisons maintenant le fichier JavaScript externe ci-dessus dans notre document HTML suivant -
<!DOCTYPE html>
<html>
<head>
<title>Javascript External Script</title>
<script src = "/html/script.js" type = "text/javascript"/></script>
</head>
<body>
<input type = "button" onclick = "Hello();" name = "ok" value = "Click Me" />
</body>
</html>Cela produira le résultat suivant, où vous pouvez essayer de cliquer sur le bouton donné -
Script interne
Vous pouvez écrire votre code de script directement dans votre document HTML. Habituellement, nous conservons le code de script dans l'en-tête du document en utilisant la balise <script>, sinon il n'y a aucune restriction et vous pouvez placer votre code source n'importe où dans le document, mais à l'intérieur de la balise <script>.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Internal Script</title>
<base href = "https://www.tutorialspoint.com/" />
<script type = "text/JavaScript">
function Hello() {
alert("Hello, World");
}
</script>
</head>
<body>
<input type = "button" onclick = "Hello();" name = "ok" value = "Click Me" />
</body>
</html>Cela produira le résultat suivant, où vous pouvez essayer de cliquer sur le bouton donné -
Gestionnaires d'événements
Les gestionnaires d'événements ne sont que des fonctions définies simplement qui peuvent être appelées contre n'importe quel événement de souris ou de clavier. Vous pouvez définir votre logique métier dans votre gestionnaire d'événements qui peut varier d'un simple à des milliers de code de ligne.
L'exemple suivant explique comment écrire un gestionnaire d'événements. Écrivons une fonction simple EventHandler () dans l'en-tête du document. Nous appellerons cette fonction lorsqu'un utilisateur amène la souris sur un paragraphe.
<!DOCTYPE html>
<html>
<head>
<title>Event Handlers Example</title>
<base href = "https://www.tutorialspoint.com/" />
<script type = "text/JavaScript">
function EventHandler() {
alert("I'm event handler!!");
}
</script>
</head>
<body>
<p onmouseover = "EventHandler();">Bring your mouse here to see an alert</p>
</body>
</html>Maintenant, cela produira le résultat suivant. Amenez votre souris sur cette ligne et voyez le résultat -
Masquer les scripts des anciens navigateurs
Bien que la plupart (sinon tous) des navigateurs de nos jours prennent en charge JavaScript, mais certains navigateurs plus anciens ne le font pas. Si un navigateur ne prend pas en charge JavaScript, au lieu d'exécuter votre script, il affichera le code à l'utilisateur. Pour éviter cela, vous pouvez simplement placer des commentaires HTML autour du script comme indiqué ci-dessous.
JavaScript Example:
<script type = "text/JavaScript">
<!--
document.write("Hello JavaScript!");
//-->
</script>
VBScript Example:
<script type = "text/vbscript">
<!--
document.write("Hello VBScript!")
'-->
</script>L'élément <noscript>
Vous pouvez également fournir des informations alternatives aux utilisateurs dont les navigateurs ne prennent pas en charge les scripts et aux utilisateurs qui ont désactivé l'option de script de leurs navigateurs. Vous pouvez le faire en utilisant le<noscript> marque.
JavaScript Example:
<script type = "text/JavaScript">
<!--
document.write("Hello JavaScript!");
//-->
</script>
<noscript>Your browser does not support JavaScript!</noscript>
VBScript Example:
<script type = "text/vbscript">
<!--
document.write("Hello VBScript!")
'-->
</script>
<noscript>Your browser does not support VBScript!</noscript>Langage de script par défaut
Il se peut que vous incluiez plusieurs fichiers de script et que vous utilisiez finalement plusieurs balises <script>. Vous pouvez spécifier un langage de script par défaut pour toutes vos balises de script . Cela vous évite de spécifier la langue à chaque fois que vous utilisez une balise de script dans la page. Voici l'exemple -
<meta http-equiv = "Content-Script-Type" content = "text/JavaScript" />Notez que vous pouvez toujours remplacer la valeur par défaut en spécifiant une langue dans la balise de script.