Maison > Article > interface Web > Comment HTML appelle-t-il les résultats JavaScript ?
Comment HTML appelle-t-il les résultats JavaScript ?
- PHPzoriginal
- 2023-04-25 17:30:551312parcourir
Dans le développement Web, JavaScript est largement utilisé pour fournir des effets dynamiques et des fonctions d'interaction utilisateur. Mais pour que le code JavaScript prenne effet, il doit être appelé dans le fichier HTML. Cet article explique comment appeler JavaScript en HTML et donne un exemple de code.
1. En-tête du document
Avant d'appeler JavaScript dans un document HTML, vous devez déclarer le code JavaScript dans l'en-tête du document comme suit :
<head> <script type="text/javascript"> // JavaScript代码 </script> </head>
L'attribut type est obligatoire et est utilisé pour Spécifier. le type de langage de script, text/javascript représente le code JavaScript. Si vous utilisez HTML5, vous pouvez omettre l'attribut type. type属性是必填项，用于指定脚本语言的类型，text/javascript表示JavaScript代码。如果你使用的是HTML5，则可以省略type属性。
二、内部JavaScript代码
可以在HTML文件中直接编写JavaScript代码，存放在<script>标签内，例如：
<!DOCTYPE html>
<html>
<head>
<title>调用JavaScript的例子</title>
<meta charset="utf-8" />
</head>
<body>
<h1>内部JavaScript的例子</h1>
<script>
function showMessage() {
alert("你好，欢迎访问我的网站！");
}
showMessage();
</script>
</body>
</html>
上面的例子中，showMessage()函数用于弹出一个对话框，里面包含一条欢迎消息。最后一行代码调用了该函数，页面加载后会立即弹出对话框。
三、外部JavaScript文件
当JavaScript代码较长或需要反复使用时，一般会将它们存放在外部文件中，然后在HTML文件中引用这个文件。例如，可以将上面的例子的JavaScript代码保存在一个名为myscript.js的文件中。
在HTML文件中，使用<script>标签引用这个文件，方式如下所示：
<!DOCTYPE html> <html> <head> <title>调用JavaScript的例子</title> <meta charset="utf-8" /> <script src="myscript.js"></script> </head> <body> <h1>外部JavaScript的例子</h1> </body> </html>
文件名为myscript.js，放在HTML文件相同的目录下。<script>标签中的src属性用于指定外部文件路径。
四、事件处理器调用JavaScript
在HTML文档中，用户的交互事件（例如鼠标点击、鼠标悬停、键盘按键等）可以通过JavaScript来响应。本节将展示通过事件处理器调用JavaScript的方式。
1.指定事件处理器
下面是一个鼠标点击事件处理器的例子：
<!DOCTYPE html>
<html>
<head>
<title>event handling example</title>
<meta charset="utf-8" />
<script type="text/javascript">
function showMessage() {
alert("你好，欢迎访问我的网站！");
}
</script>
</head>
<body>
<h1>事件处理器调用JavaScript的例子</h1>
<button onclick="showMessage()">点击这里发送欢迎消息</button>
</body>
</html>
在这个例子中，我们为按钮元素添加了一个onclick属性，该属性的值是showMessage()函数。当按钮被点击时，浏览器会执行这个函数，弹出对话框。
2.DOM事件模型
在DOM事件模型中，通过添加事件监听器来响应用户交互事件。例如，以下代码将在鼠标悬停元素上时弹出消息：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>DOM事件模型的例子</title>
<script type="text/javascript">
function showMessage() {
alert("你好，欢迎访问我的网站！");
}
var myButton = document.getElementById("myButton");
myButton.addEventListener("mouseover", showMessage);
</script>
</head>
<body>
<h1>调用JavaScript的例子</h1>
<button id="myButton">鼠标悬停在此处弹出欢迎消息</button>
</body>
</html>
在这个例子中，我们使用了DOM方法addEventListener()来添加事件监听器，与前面的onclick方式不同。mouseover是事件类型，showMessage
<script>, par exemple : rrreee
Dans l'exemple ci-dessus,showMessage( ) est utilisée pour faire apparaître une boîte de dialogue contenant un message de bienvenue. La dernière ligne de code appelle cette fonction et la boîte de dialogue apparaît immédiatement après le chargement de la page. 🎜🎜3. Fichiers JavaScript externes🎜🎜Lorsque les codes JavaScript sont longs ou doivent être utilisés de manière répétée, ils sont généralement stockés dans des fichiers externes puis référencés dans le fichier HTML. Par exemple, vous pouvez enregistrer le code JavaScript de l'exemple ci-dessus dans un fichier appelé myscript.js. 🎜🎜Dans le fichier HTML, utilisez la balise <script> pour référencer ce fichier comme suit : 🎜rrreee🎜Le nom du fichier est myscript.js et placé dans le HTML fichier dans le même répertoire. L'attribut src dans la balise <script> est utilisé pour spécifier le chemin du fichier externe. 🎜🎜4. Le gestionnaire d'événements appelle JavaScript🎜🎜Dans les documents HTML, les événements d'interaction de l'utilisateur (tels que les clics de souris, les survols de la souris, les touches du clavier, etc.) peuvent recevoir une réponse via JavaScript. Cette section montrera comment appeler JavaScript via des gestionnaires d'événements. 🎜🎜1. Spécifier le gestionnaire d'événements🎜🎜Ce qui suit est un exemple de gestionnaire d'événements de clic de souris : 🎜rrreee🎜Dans cet exemple, nous avons ajouté un attribut onclick à l'élément bouton, ainsi que la valeur de celui-ci. attribut C'est la fonction showMessage(). Lorsque vous cliquez sur le bouton, le navigateur exécutera cette fonction et affichera la boîte de dialogue. 🎜🎜2.Modèle d'événement DOM🎜🎜Dans le modèle d'événement DOM, répondez aux événements d'interaction utilisateur en ajoutant des écouteurs d'événement. Par exemple, le code suivant fera apparaître un message lorsque la souris survole l'élément : 🎜rrreee🎜 Dans cet exemple, nous utilisons la méthode DOM addEventListener() pour ajouter un écouteur d'événement, le même comme le précédent onclick fonctionne différemment. mouseover est le type d'événement et showMessage est la fonction de réponse à l'événement. 🎜🎜Résumé🎜🎜Cet article présente différentes manières d'appeler JavaScript en HTML, notamment le code JavaScript interne, les fichiers JavaScript externes, les gestionnaires d'événements appelant JavaScript, etc. Ces méthodes permettent aux développeurs Web d'utiliser JavaScript pour obtenir de meilleurs effets dynamiques et expériences interactives. 🎜Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Articles Liés
Voir plus- Problème de transmission de la valeur du composant parent aux graphiques du composant enfant dans Vue
- Quelques réflexions sur React cette liaison
- Django utilise la requête pour obtenir les paramètres envoyés par le navigateur
- Opération DOM dans JQuery - wrap
- Explication du contenu associé du prototype et de la chaîne de prototypes