JavaScript を配置する場所
先ほど、最初の JavaScript プログラムを作成しましたが、JavaScript コードは <script>...</script> タグに配置する必要があることを強調しました。
コードを含む <script>...</script> タグを <body></body> タグ内に配置します。実際、これを実行できるだけでなく、HTML で JavaScript を使用する方法が他にも 2 つあります。
head 内の JavaScript
コードを含む <script> タグを <body>……</body> タグに置くこともできます。 /head> タグ、例:
<html>
<head>
<h1> JavaScript in head. </h1>
<script>
alert("hello word!");
</script>
</head>
<body></body>
</html> このプログラムの実行結果は前のプログラムと変わりませんが、実際には JavaScript コードが <head></head> に配置されています。 ;/body> には違いがあります
簡単に言えば、<head></head> に配置されたものは <body></body> に配置されたものよりも先に実行されます。 head タグ内のコードは、ページの描画が開始される前に解析されますが、body 内のコードは、ページのレンダリング中にこのコードが読み取られたときに実行されます。
外部 JavaScript
JavaScript コードを HTML に直接記述することに加えて、JavaScript コードを js ファイルに記述し、この js ファイルを HTML で呼び出すこともできます。 「Hello World」を例に考えてみましょう。
実験室環境で、次のコードを保存し、「out.js」という名前を付けてデスクトップに置きます。
alert("hello word!");
次のコードを保存し、「test2.js」という名前を付けます。 html" をデスクトップに置きます:
<html>
<head>
<h1> my JavaScript code in "out.js" </h1>
</head>
<body>
<script src="out.js"></script>
</body>
</html>
同様に、デスクトップ上の "test2.html" ファイルをダブルクリックし、ブラウザを呼び出して実行します。実行時の効果は最初の 2 つのプログラムと変わらないことがわかります。 。
実際、最初の 2 つの方法は、JavaScript コードを HTML に直接配置するもので、ページが読み込まれるときに、それらの JavaScript コードが解析されます。 JavaScript コードを外部ファイルに配置すると、イベントがトリガーされて JavaScript コードが必要になった場合にのみ呼び出され、実行されます。
これを行うと、ページが比較的複雑な場合、大量の JavaScript コードを外部ファイルに配置し、必要な場合にのみ実行することで、ページの読み込み速度が大幅に向上するという利点があります。
HTML ファイルの異なる場所に異なる JavaScript コードを追加し、実行して、異なる場所での JavaScript コードの実行順序を観察します。
参考は次のとおりです。ポップアップ ボックスの順序に従ってください:
りー
次のセクション