Maison > Article > interface Web > Comment appeler javascript en externe

Comment appeler javascript en externe

王林original: 2023-05-09 09:01:36959parcourir

Dans la conception Web moderne, JavaScript est devenu un élément indispensable. JavaScript peut facilement étendre les fonctionnalités des pages Web tout en améliorant l'expérience utilisateur. Bien que JavaScript puisse être intégré directement dans HTML, lorsque vous devez réutiliser le même code JavaScript dans plusieurs pages Web, il devient très utile d'encapsuler le JavaScript dans un fichier externe distinct et de l'appeler en externe.

Cet article explique comment appeler du code JavaScript en externe, notamment en l'intégrant dans des documents HTML et en créant des liens vers des documents.

Intégrer JavaScript dans des documents HTML

L'intégration de code JavaScript directement dans des documents HTML est le moyen le plus simple. Il vous suffit d'écrire la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a dans la zone d'en-tête ou dans la zone de corps du HTML et d'y intégrer le code JavaScript directement.

Par exemple, ce qui suit est un simple document HTML avec du code JavaScript intégré :

<!DOCTYPE html>
<html>
<head>
  <title>嵌入JavaScript代码</title>
  <script>
    function sayHello() {
      alert("Hello World!");
    }
  </script>
</head>
<body>
  <button onclick="sayHello()">点击我</button>
</body>
</html>

Dans cet exemple, nous définissons une fonction simple appelée sayHello(). Il accueille l'utilisateur avec une action d'alerte. Nous appelons cette fonction en utilisant l'événement onclick défini sur la balise HTML Button.

Bien que cette approche puisse convenir aux petits projets, dans les projets plus importants, l'intégration de tout le code JavaScript dans le document HTML peut rendre le code encombré et difficile à maintenir.

Enregistrer le code JavaScript en tant que fichier externe distinct

Pour résoudre ce problème, nous pouvons enregistrer le code JavaScript en tant que fichier externe distinct. Cette approche rend le code plus clair et plus facile à lire, et facilite la réutilisation du même code dans différents documents HTML. Dans le même temps, étant donné que le navigateur met en cache les fichiers externes, les vitesses de chargement deviendront également plus rapides.

Voici un exemple simple : nous enregistrons le code JavaScript dans un fichier appelé myscript.js.

function sayHello() {
  alert("Hello World!");
}

Nous enregistrons le code ci-dessus sous myscript.js, puis le lions dans notre document HTML.

<!DOCTYPE html>
<html>
<head>
  <title>调用外部JavaScript文件</title>
  <script src="myscript.js"></script>
</head>
<body>
  <button onclick="sayHello()">点击我</button>
</body>
</html>

En utilisant la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a et l'attribut src, nous pouvons lier le fichier myscript.js dans le document HTML. De cette façon, nous pouvons appeler toutes les fonctions et variables définies dans le fichier JavaScript dans le document HTML.

Il convient de noter que lorsque vous utilisez des fichiers JavaScript externes, vous devez vous assurer que les fichiers JavaScript peuvent être chargés correctement. Si le chemin du fichier est incorrect, le navigateur ne pourra pas trouver le fichier et le code du fichier JavaScript ne sera pas exécuté.

Un autre avantage de l'inclusion de fichiers JavaScript externes dans les documents HTML est que cela facilite la gestion et la maintenance du site Web. Lorsque le code JavaScript doit être mis à jour, modifiez simplement le code dans le fichier JavaScript et tous les documents HTML qui utilisent le fichier peuvent être mis à jour automatiquement.

Définition de plusieurs fonctions et variables dans un fichier JavaScript

De manière générale, un fichier JavaScript peut contenir un ensemble de fonctions et de variables logiquement liées. Cela peut vous aider à mieux organiser votre code et à le rendre utilisable dans davantage de scénarios d'application.

Par exemple, voici un fichier appelé myfunctions.js qui contient plusieurs fonctions :

function addNumber(a, b) {
  return a + b;
}

function subtractNumber(a, b) {
  return a - b;
}

function divideNumber(a, b) {
  return a / b;
}

Nous introduisons ce fichier JavaScript dans notre document HTML :

<!DOCTYPE html>
<html>
<head>
  <title>在JavaScript文件中定义多个函数和变量</title>
  <script src="myfunctions.js"></script>
</head>
<body>
  <p>10 + 5 = <script>document.write(addNumber(10, 5));</script></p>
  <p>10 - 5 = <script>document.write(subtractNumber(10, 5));</script></p>
  <p>10 / 5 = <script>document.write(divideNumber(10, 5));</script></p>
</body>
</html>

Cet exemple montre comment utiliser plusieurs fonctions dans plusieurs documents HTML Utiliser plusieurs fonctions définies dans mesfonctions.js. Nous pouvons appeler ces fonctions en appelant des fonctions dans un bloc de script.

Utilisation du chargement asynchrone de JavaScript

Lorsque nous incluons un fichier JavaScript dans un document HTML, le navigateur commence immédiatement à charger le fichier et bloque le rendu de la page jusqu'à ce que le fichier soit complètement chargé. Cela peut ralentir le chargement des pages.

Pour éviter ce problème, nous pouvons utiliser le chargement asynchrone de JavaScript. Plus précisément, nous pouvons placer le téléchargement de JavaScript au bas de la page HTML et définir l'attribut async dans la balise script sur true. Cela amènera le navigateur à ignorer le téléchargement du fichier JavaScript jusqu'à ce que la page ait fini de se charger et commence à télécharger le code.

Par exemple, ci-dessous est un document HTML qui charge un fichier JavaScript de manière asynchrone :

<!DOCTYPE html>
<html>
<head>
  <title>异步加载JavaScript</title>
</head>
<body>
  <h1>使用异步加载JavaScript进行页面优化</h1>
  <p>这里是页面的正文内容。</p>
  <script async src="myscript.js"></script>
</body>
</html>

Nous chargeons le fichier JavaScript myscript.js dans le document HTML. En définissant l'attribut async sur true, le navigateur chargera le code du script de manière asynchrone et n'empêchera pas le rendu de la page.

Résumé

Dans cet article, nous avons expliqué comment intégrer du code JavaScript dans des documents HTML et appeler du code JavaScript en externe. Nous avons également expliqué comment enregistrer le code JavaScript en tant que fichier externe distinct, définir plusieurs fonctions et variables dans un fichier JavaScript et utiliser le chargement asynchrone du code JavaScript pour l'optimisation des pages.

Que vous soyez débutant ou professionnel, comprendre ces connaissances vous aidera à mieux organiser et gérer le code JavaScript, et à améliorer les performances et la maintenabilité de votre site Web.

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!

JavaScript html 封装 JS 事件异步

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：méthode d'écriture HTML CSSArticle suivant：méthode d'écriture HTML CSS

Articles Liés

Voir plus