ホームページ > 記事 > ウェブフロントエンド > JavaScriptを外部から呼び出す方法
JavaScriptを外部から呼び出す方法
- 王林オリジナル
- 2023-05-09 09:01:361004ブラウズ
現代の Web デザインにおいて、JavaScript は不可欠な部分になっています。 JavaScript は、ユーザー エクスペリエンスを向上させながら、Web ページの機能を簡単に拡張できます。 JavaScript は HTML に直接埋め込むこともできますが、同じ JavaScript コードを複数の Web ページで再利用する必要がある場合、JavaScript を別の外部ファイルとしてカプセル化し、外部から呼び出すと非常に便利です。
この記事では、HTML ドキュメントへの埋め込みやドキュメントへのリンクなど、JavaScript コードを外部から呼び出す方法について説明します。
- HTML ドキュメントへの JavaScript の埋め込み
最も簡単な方法は、JavaScript コードを HTML ドキュメントに直接埋め込むことです。 HTMLのヘッド領域またはボディ領域に3f1c4e4b6b16bbbd69b2ee476dc4f83aタグを記述し、そこにJavaScriptコードを直接埋め込むだけです。
たとえば、次は JavaScript コードが埋め込まれた単純な HTML ドキュメントです:
<!DOCTYPE html>
<html>
<head>
<title>嵌入JavaScript代码</title>
<script>
function sayHello() {
alert("Hello World!");
}
</script>
</head>
<body>
<button onclick="sayHello()">点击我</button>
</body>
</html>この例では、sayHello() という名前の単純な関数を定義します。警告アクションでユーザーを迎えます。この関数は、HTML ボタン タグで定義された onclick イベントを使用して呼び出します。
このアプローチは小規模なプロジェクトには適しているかもしれませんが、大規模なプロジェクトでは、すべての JavaScript コードを HTML ドキュメントに埋め込むとコードが乱雑になり、保守が困難になる可能性があります。
- JavaScript コードを別の外部ファイルとして保存する
この問題を解決するには、JavaScript コードを別の外部ファイルとして保存します。このアプローチにより、コードがより明確で読みやすくなり、異なる HTML ドキュメントで同じコードを再利用しやすくなります。同時にブラウザが外部ファイルをキャッシュするため、読み込み速度も速くなります。
これは簡単な例です。JavaScript コードを myscript.js というファイルに保存します。
function sayHello() {
alert("Hello World!");
}上記のコードを myscript.js として保存し、HTML ドキュメントにリンクします。
<!DOCTYPE html> <html> <head> <title>调用外部JavaScript文件</title> <script src="myscript.js"></script> </head> <body> <button onclick="sayHello()">点击我</button> </body> </html>
3f1c4e4b6b16bbbd69b2ee476dc4f83a タグと src 属性を使用すると、ファイル myscript.js を HTML ドキュメントにリンクできます。このようにして、HTML ドキュメント内の JavaScript ファイルで定義されたすべての関数と変数を呼び出すことができます。
外部 JavaScript ファイルを使用する場合、JavaScript ファイルが正しくロードできることを確認する必要があることに注意してください。ファイル パスが正しくない場合、ブラウザはファイルを見つけることができず、JavaScript ファイル内のコードは実行されません。
外部 JavaScript ファイルを HTML ドキュメントに含めることのもう 1 つの利点は、Web サイトの管理と保守が容易になることです。 JavaScript コードを更新する必要がある場合は、JavaScript ファイル内のコードを変更するだけで、そのファイルを使用するすべての HTML ドキュメントが自動的に更新されます。
- JavaScript ファイルでの複数の関数と変数の定義
一般的に、JavaScript ファイルには論理的に関連した関数と変数のセットを含めることができます。これにより、コードをより適切に整理し、より多くのアプリケーション シナリオで使用できるようになります。
たとえば、以下は複数の関数を含む myfunctions.js というファイルです:
function addNumber(a, b) {
return a + b;
}
function subtractNumber(a, b) {
return a - b;
}
function divideNumber(a, b) {
return a / b;
}この JavaScript ファイルを 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>
この例は次のとおりです。 myfunctions.js で定義された複数の関数を複数の HTML ドキュメントで使用する方法。これらの関数は、スクリプト ブロックで関数を呼び出すことで呼び出すことができます。
- JavaScript の非同期読み込みの使用
HTML ドキュメントに JavaScript ファイルを含めると、ブラウザはただちにファイルの読み込みを開始し、読み込みが終了するまでページのレンダリングをブロックします。ファイルが完全にロードされました。終了します。これにより、ページの読み込みが遅くなる可能性があります。
この問題を回避するには、JavaScript の非同期読み込みを使用します。具体的には、JavaScript のダウンロードを HTML ページの下部に配置し、script タグの async 属性を true に設定します。これにより、ページの読み込みが完了してコードのダウンロードが開始されるまで、ブラウザーは JavaScript ファイルのダウンロードを無視します。
たとえば、JavaScript ファイルを非同期でロードするための HTML ドキュメントを次に示します。
<!DOCTYPE html> <html> <head> <title>异步加载JavaScript</title> </head> <body> <h1>使用异步加载JavaScript进行页面优化</h1> <p>这里是页面的正文内容。</p> <script async src="myscript.js"></script> </body> </html>
JavaScript ファイル myscript.js を HTML ドキュメントにロードします。 async 属性を true に設定すると、ブラウザーはスクリプト コードを非同期で読み込み、ページのレンダリングを妨げなくなります。
概要
この記事では、JavaScript コードを HTML ドキュメントに埋め込み、外部から JavaScript コードを呼び出す方法について説明しました。また、JavaScript コードを別の外部ファイルとして保存する方法、JavaScript ファイル内で複数の関数と変数を定義する方法、ページの最適化のために JavaScript コードの非同期読み込みを使用する方法についても説明しました。
初心者でも専門家でも、この知識を理解すると、JavaScript コードをより適切に整理および管理し、Web サイトのパフォーマンスと保守性を向上させることができます。
以上がJavaScriptを外部から呼び出す方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。