ホームページ >ウェブフロントエンド >フロントエンドQ&A >HTMLにJavaScriptを導入する方法
HTMLにJavaScriptを導入する方法
- WBOYオリジナル
- 2023-05-09 15:24:3716550ブラウズ
Web 開発のプロセスでは、JavaScript を使用して Web ページに動的な効果やインタラクティブな機能を追加する必要がよくあります。では、HTML ファイルに JavaScript を導入するにはどうすればよいでしょうか?この記事ではJavaScriptの導入方法と注意点を紹介します。
1. script タグを使用して JavaScript を導入する
HTML ファイルでは、3f1c4e4b6b16bbbd69b2ee476dc4f83a2cacc6d41bbb37262a98f745aa00fbf0 タグを使用して JavaScript コードを導入できます。具体的な手順は次のとおりです:
- HTML ファイルで 93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1 タグを見つけます
-
3f1c4e4b6b16bbbd69b2ee476dc4f83a182c1f14dd1bf57cbad2e8e05ee78eb3 /script> タグ
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JavaScript引入</title> <script src="test.js"></script> <!-- 引入test.js文件 --> </head> <body> <h1>Hello World!</h1> </body> </html>
上記のコードに示すように、3f1c4e4b6b16bbbd69b2ee476dc4f83a2cacc6d41bbb37262a98f745aa00fbf0 タグを使用して JavaScript コードを HTML ファイルに埋め込んだり、次のようにコードを導入してコードを参照したりできます。外部のjsファイル。
このうち、352b1442a1f39d4f49881b7e5087d9182cacc6d41bbb37262a98f745aa00fbf0 を使用して外部 JavaScript ファイルを導入します。 test.js ファイルは HTML ページと同じディレクトリに配置され、その内容は次のとおりです:
alert("Hello World!");HTML ファイルが 3f1c4e4b6b16bbbd69b2ee476dc4f83a タグに読み込まれると、自動的に解釈されて実行されます。 test.js ファイルのコード内の JavaScript。このとき、「Hello World」という内容のダイアログボックスが表示されます。
2. script タグの属性の概要
上記のコードでは、3f1c4e4b6b16bbbd69b2ee476dc4f83a タグの src 属性を使用して外部 JavaScript ファイルを参照します。では、3f1c4e4b6b16bbbd69b2ee476dc4f83a タグの他の属性は何でしょうか?これらの属性を使用して JavaScript を組み込むにはどうすればよいですか?以下では、3f1c4e4b6b16bbbd69b2ee476dc4f83a タグの重要な属性をいくつか紹介します。
- src 属性
この属性は、リンクする必要がある JavaScript ファイルを指定するために使用されます。
<script src="test.js"></script>
上記のコードに示すように、インポートする必要がある JavaScript ファイルのパスを src 属性で指定できます。
パスが相対パスの場合は、HTML ファイルの場所を基準とした相対パスとなるため、パスの正確さに注意して指定する必要があります。
- async 属性
この属性は、ページをブロックせずに JavaScript コードを非同期に実行するために使用されます。例:
<script src="test.js" async></script>
async 属性により、ブラウザーは JavaScript ファイルがロードされるのを待たずに、Web ページ内の他のリソースや要素のロードを続行しますが、他のリソースや要素をロードした後に JS ファイルをロードします。要素。その結果、ページのレンダリングが高速化され、ユーザーはページのコンテンツをより速く表示できるようになります。ただし、async 属性によって導入された JavaScript はページのレンダリングが完了した後に実行されるため、その後のページの動作に影響を与える可能性があります。
- defer 属性
この属性は、JavaScript コードを非同期で実行するためにも使用されます。async 属性とは異なり、HTML ファイルの後に「DOMContentLoaded」ページに表示されます。 JavaScript コードはイベントの前に実行されます。
<script src="test.js" defer></script>
async 属性と比較すると、defer 属性は、実行時にすべての DOM 要素が読み込まれているため、DOM 要素に依存する必要がある JavaScript により適しています。したがって、通常は JavaScript ファイルを導入するときに defer 属性を追加します。
- type 属性
この属性は、埋め込みまたはリンクされた JavaScript コードの MIME タイプを指定します。 HTML5 では、JavaScript の MIME タイプはデフォルトで「text/javascript」であるため、通常、指定された type 属性を 3f1c4e4b6b16bbbd69b2ee476dc4f83a タグに表示する必要はありません。
<script type="text/javascript" src="test.js"></script>
ただし、他の種類の JavaScript ファイル (ts ファイルなど) を導入する場合は、type 属性で対応するファイルの種類を指定する必要があります。
3. JavaScript 導入時の注意点
JavaScript ファイルを導入する場合は、次の点にも注意する必要があります。
- JavaScript ファイルは、まとめて配置するようにしてください。 HTTPリクエストの数を減らします。
- CDN アクセラレーションを使用できる場合は、CDN の JavaScript ファイルを使用してみてください。
- JavaScript ファイルをページの下部に挿入するか、遅延または非同期としてマークします。
- JavaScript をページに直接記述せず、外部 JS ファイルに導入します。
つまり、JavaScript を HTML に導入するのは非常に簡単で、3f1c4e4b6b16bbbd69b2ee476dc4f83a2cacc6d41bbb37262a98f745aa00fbf0 タグを使用するだけです。ただし、実際の開発では、パフォーマンスやコードの品質を向上させるために、さまざまな属性や注意事項をうまく活用する必要もあります。この記事が、HTML での JavaScript 導入方法を皆さんがよりよく理解し、使用できるようになれば幸いです。
以上がHTMLにJavaScriptを導入する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。