外部JavaScriptファイルの使用方法-フロントエンドQ&A-php.cn

外部JavaScriptファイルの使用方法

PHPz

リリース： 2023-05-20 20:29:35

オリジナル

1740 人が閲覧しました

現代の Web 開発では、JavaScript (略して JS) が不可欠な部分になっています。 JS は、Web ページ上で動的な効果を実現できるだけでなく、コードのモジュール化を容易にし、外部 JavaScript ファイルを介して再利用することもできます。この記事では、外部 JavaScript ファイルの使用方法と、外部 JavaScript ファイルを使用する利点について説明します。

まず、外部 JavaScript ファイルが何であるかを理解する必要があります。外部 JavaScript ファイルとは、JS コードを別の JavaScript ファイルに保存し、<script> タグを通じて HTML に導入することを指します。外部 JS ファイルには個別のファイルパスとファイル名があり、複数の HTML ページ間で参照を共有できます。

次に、外部 JavaScript ファイルの使用方法を見てみましょう。

ステップ 1: 外部 JavaScript ファイルを作成する
外部 JavaScript ファイルを使用するには、最初に独立した .js ファイルを作成する必要があります。ファイルは、メモ帳や Sublime Text などのエディターを使用して作成できます。 JS コードをファイルに記述し、そのファイルをスタンドアロン JS ファイル (myscript.js など) として保存します。

ステップ 2: HTML に外部 JavaScript ファイルを導入する
外部 JavaScript ファイルを HTML ファイルに導入するには、<script> タグを使用する必要があります。タグには src と type という 2 つの属性があります。 src 属性は JS ファイルのパスを指定するために使用され、type 属性は JS ファイルのタイプを指定するために使用されます。通常は text/javascript に設定されます。 。以下は、外部 JavaScript ファイルを導入するコード例です。

<!DOCTYPE html>
<html>
<head>
  <script src="myscript.js" type="text/javascript"></script>
</head>
<body>

</body>
</html>

ログイン後にコピー

上記のコードは、<head> に myscript.js という名前の外部ファイルを導入します。 HTML JavaScript ファイルのタグ。このように、HTML が読み込まれると、JS ファイルも読み込まれ、その中のコードが実行されます。

利点分析: 外部 JavaScript ファイルを使用する利点
次に、外部 JavaScript ファイルを使用する利点を見てみましょう。

コードの保守性の向上
JS コードを独立したファイルに分割すると、コードがより構造化され、保守が容易になります。コードを変更する場合は、各 HTML ファイルのコードを変更するのではなく、別のファイルを変更するだけで済みます。
コードの再利用を容易にする
同じ JS コードを使用する必要がある HTML ファイルが複数ある場合、外部 JavaScript ファイルを使用すると、コードを簡単に再利用できます。同じ JS ファイルを異なる HTML ファイルに導入するだけです。
コードの読み込み時間を短縮する
外部 JS ファイルを使用すると、HTML ファイルのサイズが小さくなり、ページの読み込み時間を短縮できます。 JS ファイルはキャッシュできるため、複数の HTML ページが同じ JS ファイルを参照している場合、最初のページが JS ファイルをロードするときに、JS ファイルはすでにキャッシュされているため、後続のページのロード時にファイルが再度ダウンロードされることはありません。

概要
この記事では、外部 JavaScript ファイルの使用方法と、外部 JavaScript ファイルを使用する利点について学びました。大規模なプロジェクトの場合、外部 JavaScript ファイルを使用すると、コードがより構造化され、保守と再利用が容易になり、ページの読み込み時間の短縮にも役立ちます。したがって、プロジェクトでは外部 JavaScript ファイルを使用する必要があり、コードの管理と保守を改善するために、JavaScript コードを可能な限りモジュール化することをお勧めします。

以上が外部JavaScriptファイルの使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。