JavaScript をどこに置くか?

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 コードの実行順序を観察します。

参考は次のとおりです。ポップアップボックスの順序に従ってください:

りー

学び続ける

新しいファイル

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title> RunJS 演示代码 </title> <script> var ck = function(){ var x = prompt ("输入数据: ", ""); alert(x); } </script> </head> <body> <button onclick="ck();"> 输入按钮 </button> </body> </html>

提出するリセットコード

自動運転