HTMLを外部JSに接続する方法

Apr 11, 2024 am 06:25 AM
非同期ロード

外部 JS ファイルに接続するには、src 属性を指定した <script> タグを使用します。通常、このタグはレンダリングのブロックを避けるために <body> の下部に配置されます。複数の <script> タグを追加して、複数の外部 JS ファイルを接続できます。 src 属性では、相対パス (HTML ファイルからの相対パス) または絶対パス (ルート ディレクトリから開始) を使用できます。タグには、async (非同期読み込み) や defer (遅延実行) などの他の属性も含めることができます。

HTMLを外部JSに接続する方法

#HTML を使用して外部 JS ファイルを接続する方法

外部 JS ファイルの紹介

外部 JavaScript ファイルを HTML ドキュメントに接続するには、

<script> タグを使用し、src 属性で JavaScript ファイルへのパスを指定します。

&lt;script src=&quot;path_to_javascript_file.js&quot;&gt;&lt;/script&gt;
ログイン後にコピー

<script> タグを配置する場所を選択してください

通常、

<script> タグは配置されます HTML ドキュメント <body> セクションで、ページ レンダリングのブロックを回避します:

<body>
  ... <!-- 网页内容 -->

  &lt;script src=&quot;path_to_javascript_file.js&quot;&gt;&lt;/script&gt;
</body>
ログイン後にコピー

複数の外部 JS ファイル

複数の外部 JS ファイルを連結する必要がある場合JS ファイルの場合、

<body> セクションに複数の <script> タグを追加するだけです:

&lt;script src=&quot;path_to_file1.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;path_to_file2.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;path_to_file3.js&quot;&gt;&lt;/script&gt;
ログイン後にコピー

相対パスと絶対パス

src 属性には、相対パス (HTML ファイルの場所を基準とした) または絶対パス (Web サイトのルートから開始) を含めることができます。

  • 相対パス: js/main.js
  • 絶対パス: /path/to/javascript_file.js

その他の属性

##<script>

タグには、次のような他の属性も含めることができます。

    async:
  • ページがレンダリングされる前に、スクリプトを非同期でロードして実行できるようにします。
  • defer:
  • ドキュメントの解析が完了するまでスクリプトの実行を遅らせます。

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

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

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Ajax 例外とエラーを解決する方法のリストを公開する Ajax 例外とエラーを解決する方法のリストを公開する Jan 30, 2024 am 08:33 AM

Ajax 例外とエラーを解決する方法のリストを公開する

jQuery .val() が機能しない状況に効果的に対処する jQuery .val() が機能しない状況に効果的に対処する Feb 20, 2024 pm 09:36 PM

jQuery .val() が機能しない状況に効果的に対処する

AjaxベースのScrapy非同期読み込み実装方法 AjaxベースのScrapy非同期読み込み実装方法 Jun 22, 2023 pm 11:09 PM

AjaxベースのScrapy非同期読み込み実装方法

htmlの読み方 htmlの読み方 Apr 05, 2024 am 08:36 AM

htmlの読み方

Vue3のサスペンド機能の詳細解説:非同期データロードの最適化 Vue3のサスペンド機能の詳細解説:非同期データロードの最適化 Jun 18, 2023 am 08:10 AM

Vue3のサスペンド機能の詳細解説:非同期データロードの最適化

Vue3のdefineAsyncComponent関数の詳細解説:非同期読み込みコンポーネントの応用 Vue3のdefineAsyncComponent関数の詳細解説:非同期読み込みコンポーネントの応用 Jun 18, 2023 pm 07:39 PM

Vue3のdefineAsyncComponent関数の詳細解説:非同期読み込みコンポーネントの応用

C# 委任とは何ですか? それによってどのような問題が解決されますか? C# 委任とは何ですか? それによってどのような問題が解決されますか? Apr 04, 2024 pm 12:42 PM

C# 委任とは何ですか? それによってどのような問題が解決されますか?

WordPress でページのリダイレクトを防ぐにはどうすればよいですか? WordPress でページのリダイレクトを防ぐにはどうすればよいですか? Mar 05, 2024 am 09:33 AM

WordPress でページのリダイレクトを防ぐにはどうすればよいですか?

See all articles