HTML ページで JavaScript ファイルをリンクする方法-フロントエンドQ&A-php.cn

HTML ページで JavaScript ファイルをリンクする方法

PHPz

リリース： 2023-04-24 11:29:15

オリジナル

4899 人が閲覧しました

JavaScript は、HTML ページに埋め込むことができるスクリプト言語です。 Web 開発では、通常、JavaScript を使用して、コンテンツの動的読み込み、フォーム検証など、Web ページのいくつかの対話型機能を実装します。これらの関数を実装するときは、通常、複数の JavaScript ファイルをリンクする必要があります。

この記事では、HTML ページで JavaScript ファイルをリンクする方法を紹介し、JavaScript コードをより適切に管理および保守するのに役立つ実践的な経験とヒントを提供します。

1. HTML での JavaScript ファイルのリンク

HTML での JavaScript ファイルのリンクは非常に簡単で、<script> タグを使用するだけです。基本的な例を次に示します。

<!DOCTYPE html>
<html>
<head>
  <title>My Page</title>
  <script src="myscript.js"></script>
</head>
<body>
  <h1>Hello, world!</h1>
</body>
</html>

ログイン後にコピー

上記の例では、<script> タグを使用して myscript.js ファイルにリンクしました。 src 属性は、JavaScript ファイルへのパスを指定します。ブラウザが HTML ページを解析すると、JavaScript ファイルが自動的にダウンロードされて実行され、関連する機能が実装されます。

正確さと信頼性を確保するために、通常は JavaScript ファイルを <head> タグ内に配置することをお勧めします。他の要素の読み込みが完了する前に JavaScript ファイルが一部の操作を開始し、エラーまたは例外が発生する可能性があるためです。

2. 外部 JavaScript ライブラリを使用する

実際の開発では、通常、jQuery、React、Vue などの外部 JavaScript ライブラリを使用します。これらのライブラリは、複雑なインタラクティブなエフェクトを迅速に実装し、開発効率を向上させるのに役立ちます。

これらのライブラリを HTML ページでリンクする必要がある場合は、通常の JavaScript ファイルをリンクするのと同じように、<script> タグを使用してライブラリファイルへのパスを指定できます。たとえば、jQuery ライブラリは次のようにリンクされます。

<!DOCTYPE html>
<html>
<head>
  <title>My Page</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="myscript.js"></script>
</head>
<body>
  <h1>Hello, world!</h1>
</body>
</html>

ログイン後にコピー

上記の例では、jQuery ライブラリを独自の JavaScript ファイルにリンクしました。なお、外部JavaScriptライブラリと連携する場合は、CDN内のライブラリバージョンを最新のものにするため、公式CDN(Content Delivery Network)を利用することを推奨しており、ライブラリファイルの読み込み速度も高速化することができます。 Web ページのパフォーマンスを向上させます。

3. 複数の JavaScript ファイルをリンクする

複数の JavaScript ファイルをリンクする必要がある場合は、HTML ページで複数の <script> タグを使用できます。各タグはJavaScript ファイルをリンクするために使用されます。例:

<!DOCTYPE html>
<html>
<head>
  <title>My Page</title>
  <script src="jquery.min.js"></script>
  <script src="vue.min.js"></script>
  <script src="react.min.js"></script>
  <script src="myscript.js"></script>
</head>
<body>
  <h1>Hello, world!</h1>
</body>
</html>

ログイン後にコピー

上の例では、4 つの JavaScript ファイル (jQuery、Vue、React、および独自の JavaScript ファイル) をリンクしました。依存関係の問題による読み込みエラーや例外を避けるために、他の外部ライブラリが最初に読み込まれるように、最後に独自の JavaScript ファイルをリンクすることをお勧めします。

また、複数の JavaScript ファイル間に依存関係があり、あるファイルが別のファイルより先に読み込まれる場合、エラーまたは例外が発生する可能性があります。この場合、読み込み順序の問題を避けるために、Webpack、Rollup などのパッケージ化ツールを使用して複数の JavaScript ファイルを 1 つのファイルにパッケージ化することをお勧めします。

4. JavaScript ファイルの読み込み速度を高速化する

Web ページのパフォーマンスを向上させるには、通常、JavaScript ファイルの読み込み時間をできるだけ短縮する必要があります。以下に、JavaScript ファイルの読み込みを高速化するための実践的な経験とヒントを示します。

jQuery、Vue、React などのパブリック JavaScript ライブラリを使用することをお勧めします。ライブラリは CDN キャッシュで利用できるため、読み込み速度は一般的に速くなります。自分で作成した JavaScript ファイルの場合は、ファイルのダウンロード時間を短縮するために、CDNJS などのパブリック CDN の使用を検討できます。
ブラウザが JavaScript ファイルを読み込むと、他のリソースのダウンロードとレンダリングがブロックされ、ページの読み込みが遅くなるため、JavaScript ファイルをページの下部に配置することをお勧めします。 JavaScript ファイルをページの下部に配置すると、この問題を回避できます。
ファイルサイズを小さくし、ダウンロードを高速化するために、JavaScript ファイルを圧縮することをお勧めします。 JavaScript ファイルは、UglifyJS、Closure Compiler などのツールを使用して圧縮できます。
JavaScript ファイルをマージして HTTP リクエストの数を減らし、ダウンロードを高速化することをお勧めします。 Webpack、Rollup などのツールを使用して、複数の JavaScript ファイルを 1 つのファイルにパッケージ化できます。

要約すると、JavaScript ファイルのリンクは、Web 開発において非常に一般的で重要な操作です。外部 JavaScript ライブラリの使用、複数の JavaScript ファイルのリンク、JavaScript ファイルの読み込み速度の高速化などにより、JavaScript コードを効果的に管理および保守し、Web ページのパフォーマンスとユーザーエクスペリエンスを向上させることができます。

以上がHTML ページで JavaScript ファイルをリンクする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。