ホームページ  >  記事  >  ウェブフロントエンド  >  HTMLに外部jsを導入する方法

HTMLに外部jsを導入する方法

下次还敢
下次还敢オリジナル
2024-04-11 06:18:32863ブラウズ

外部 JS ファイルを HTML に含めるには、<script> タグを使用して、読み込むファイルの URL を指定します。 type、defer、または async 属性を指定して、読み込みと実行の発生方法を制御することもできます。通常、<script> タグは、ページのレンダリングのブロックを避けるために、 セクションの下部に配置する必要があります。

HTMLに外部jsを導入する方法

外部 JS を HTML に導入する方法

外部 JS ファイルを HTML に導入することは一般的な方法です。 JavaScript コードを個別のファイルに整理し、複数のページで簡単に再利用できます。外部 JS ファイルをインポートする方法は次のとおりです。

  1. Use <script> tag

Use&lt ; script> タグで外部 JS ファイルを導入します。このタグの src 属性は、ロードするスクリプト ファイルの URL を指定します。

<code class="html"><script src="path/to/script.js"></script></code>
  1. type 属性を指定します (オプション)

ロードされるファイルのタイプを明示的に指定するには、type 属性を使用できます:

<code class="html"><script src="path/to/script.js" type="text/javascript"></script></code>
  1. Specify defer または async 属性 (オプション)

defer および async 属性はスクリプトの制御に使用されますロードと実行メソッド:

  • defer: ページ解析の完了後にスクリプトをロードできるが、DOMContentLoaded イベントがトリガーされる前に実行されることを示します。
  • async: スクリプトを非同期でロードして実行でき、ページ解析や DOMContentLoaded イベントの影響を受けないことを示します。
<code class="html"><script src="path/to/script.js" defer></script>
<script src="path/to/script.js" async></script></code>
  1. <script> タグを配置します

#通常、<script>#ページのレンダリングをブロックしないように、## タグを HTML ドキュメントの セクションの下部に配置する必要があります。これを行うと、スクリプトがロードされる前にすべての HTML 要素が確実に解析されます。

  1. 複数のスクリプトをロードする (オプション)
複数の外部 JS ファイルをロードするには、

に複数のスクリプトをロードするだけです。 または セクションに <script> タグを追加します。

注:

    外部 JS ファイルの URL が正しく、スクリプト ファイルにアクセスできることを確認してください。
  • スクリプト ファイルは、
  • .js 拡張子で終わる必要があります。
  • スクリプトが他のスクリプトに依存している場合は、それらが正しい順序でロードされていることを確認してください。

以上がHTMLに外部jsを導入する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。