recherche

Maison >interface Web >Questions et réponses frontales >Comment introduire javascript dans HTML

Comment introduire javascript dans HTML

WBOY
WBOYoriginal
2023-05-09 15:24:3716550parcourir

Dans le processus de développement Web, nous devons souvent utiliser JavaScript pour ajouter des effets dynamiques et des fonctions interactives aux pages Web. Alors, comment introduire JavaScript dans les fichiers HTML ? Cet article explique comment introduire JavaScript et à quoi il faut prêter attention.

1. Utilisez la balise script pour introduire JavaScript

Dans les fichiers HTML, nous pouvons utiliser la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a2cacc6d41bbb37262a98f745aa00fbf0 Les étapes spécifiques sont les suivantes :

  1. Trouvez la balise 93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1 dans le fichier HTML

  2. Ajoutez la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a2cacc6d41bbb37262a98f745aa00fbf0 à l'intérieur du fichier 93f0f5c25f18dab9d176bd4f6de5d30e Comme le montre le code ci-dessus, nous pouvons intégrer du code JavaScript dans des fichiers HTML à l'aide de la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a2cacc6d41bbb37262a98f745aa00fbf0, ou référencer le code en introduisant des fichiers js externes.

    3. Parmi eux, nous utilisons 352b1442a1f39d4f49881b7e5087d9182cacc6d41bbb37262a98f745aa00fbf0 pour introduire des fichiers JavaScript externes. Le fichier test.js est placé dans le même répertoire que la page HTML, et son contenu est le suivant : 
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>JavaScript引入</title>
  <script src="test.js"></script> 
<!-- 引入test.js文件 -->
</head>
<body>
  <h1>Hello World!</h1>
</body>
</html>

Lorsque le fichier HTML est chargé dans la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a le fichier test.js. À ce moment, une boîte de dialogue avec le contenu « Hello World » apparaît.

2. Introduction aux attributs de la balise script

Dans le code ci-dessus, nous utilisons l'attribut src de la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a Alors, quels sont les autres attributs de la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a Comment puis-je utiliser ces attributs pour inclure JavaScript ? Ci-dessous, nous présentons quelques attributs importants de la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a

Attribut src
  1. Cet attribut est utilisé pour spécifier le fichier JavaScript qui doit être lié. 
alert("Hello World!");

Comme le montre le code ci-dessus, nous pouvons spécifier le chemin du fichier JavaScript qui doit être importé dans l'attribut src.

Si le chemin est un chemin relatif, il s'agit d'un chemin relatif basé sur l'emplacement du fichier HTML. Lorsque vous spécifiez le chemin, vous devez faire attention à l'exactitude du chemin.

Attribut async
  1. Cet attribut est utilisé pour exécuter du code JavaScript de manière asynchrone sans bloquer la page. Par exemple : l'attribut 
<script src="test.js"></script>

async fait que le navigateur n'attend pas que le fichier JavaScript soit chargé avant de continuer à charger d'autres ressources et éléments dans la page Web, mais charge le fichier JS après avoir chargé d'autres ressources et éléments. En conséquence, le rendu des pages s'accélère et les utilisateurs peuvent voir le contenu de la page plus rapidement. Cependant, le JavaScript introduit par l'attribut async sera exécuté une fois le rendu de la page terminé, il peut donc avoir un impact sur le comportement ultérieur de la page.

attribut defer
  1. Cet attribut est également utilisé pour exécuter du code JavaScript de manière asynchrone. Contrairement à l'attribut async, il exécutera le code JavaScript après l'analyse du fichier HTML et avant l'événement "DOMContentLoaded" de la page. 
<script src="test.js" async></script>

Comparé à l'attribut async, l'attribut defer est plus adapté au JavaScript qui doit s'appuyer sur des éléments DOM, car lorsqu'il est exécuté, tous les éléments DOM ont été chargés. Par conséquent, nous ajoutons généralement l'attribut defer lors de l'introduction de fichiers JavaScript.

attribut type
  1. Cet attribut spécifie le type MIME du code JavaScript intégré ou lié. En HTML5, le type MIME de JavaScript est par défaut "text/javascript", nous n'avons donc généralement pas besoin d'afficher l'attribut de type spécifié dans la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a 
<script src="test.js" defer></script>

Cependant, si vous souhaitez introduire d'autres types de fichiers JavaScript (tels que les fichiers ts), vous devez spécifier le type de fichier correspondant via l'attribut type.

3. Choses à noter lors de l'introduction de JavaScript

Lors de l'introduction des fichiers JavaScript, nous devons également prêter attention aux points suivants :

Essayez de placer les fichiers JavaScript ensemble pour réduire le nombre de requêtes HTTP.
  1. Si vous pouvez utiliser l'accélération CDN, essayez d'utiliser les fichiers JavaScript de CDN.
  2. Introduisez les fichiers JavaScript au bas de la page ou marquez-les comme différés ou asynchrones.
  3. N'écrivez pas de JavaScript directement dans la page, mais importez-le dans un fichier JS externe.
  4. Dans l'ensemble, introduire JavaScript dans HTML est très simple, il suffit d'utiliser la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a2cacc6d41bbb37262a98f745aa00fbf0 Cependant, dans le développement réel, nous devons également utiliser divers attributs et précautions pour améliorer les performances et la qualité du code. J'espère que cet article pourra aider tout le monde à mieux comprendre et utiliser les méthodes d'introduction de JavaScript en HTML.

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!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：La syntaxe des commentaires en JavaScript estArticle suivant：La syntaxe des commentaires en JavaScript est

Articles Liés

Voir plus