HTML ドキュメントに JavaScript を埋め込む 4 つの方法

この記事では主に、クライアント側の JavaScript コードを HTML ドキュメントに埋め込む 4 つの方法を紹介します。興味のある方は参考にしてください。

HTML への JavaScript の埋め込み

クライアント側の JavaScript コードを HTML ドキュメントに埋め込む方法は 4 つあります。

1. <script> タグと <script> タグの間に配置して埋め込みます。 ); <br/></script>

2. <script> タグの src 属性で指定された外部ファイルに配置します (詳細)。 onclick や onmouseover などの HTML 属性値で指定する HTML イベント ハンドラー (まれに); <br/></script>

4. 特別なプロトコル「javascript」プロトコルを使用する URL に配置します (まれに);

1——添付ファイル: スクリプト タイプ

JavaScript は、デフォルトでは Web のオリジナルのスクリプト言語です。以下の <script> 要素には JavaScript が含まれるか、JavaScript が参照されます。コード。 VBScript などの非標準のスクリプト言語を使用する場合は、type 属性を使用してスクリプトの MIME タイプを指定する必要があります。例: </script>

<script type="text/vbscript"> 
 ... ... 
</script>

タイプのデフォルト値属性は「text/javascript」です。

2——インライン <script> 要素</script>

例:

 <script> 
 function displayTime(){ 
 ... ... 
 } 
 window.onload = displayTime; 
</script>

3——Src 属性は外部を使用しますファイル内の script

<script> タグは、JavaScript コードを含むファイルの URL を指定する src 属性をサポートしています。その使用法は次のとおりです。 </script>

<script src="../../scripts/util.js"></script>

src 属性を使用する場合、<script></script> タグの間にあるものは無視されます。

src 属性を使用してページにスクリプトを含めると、そのスクリプトに Web ページに対する完全な制御を与えることになります。

4——HTML のイベント ハンドラー

スクリプトが含まれる HTML ファイルがブラウザに読み込まれると、このスクリプト内の JavaScript コードのみが実行されます。一度 。 JavaScript コードは、Element オブジェクトのプロパティに関数を割り当てることで、イベント ハンドラーを登録できます。この Element オブジェクトは、ドキュメント内の HTML 要素を表します。

例:

<input type="checkbox" name="options" value="giftwrap" onchange="order.options.giftwrap = this.checked;">

HTML で定義されたイベント ハンドラーの属性には、カンマで区切られた任意の JavaScript ステートメントを含めることができます。これらのステートメントは関数の本体を形成し、これが対応するイベント ハンドラー プロパティの値になります。

4 - URL 内の JavaScript

URL の後に javascript:protocol 修飾子を付けることは、JavaScript コードをクライアントに埋め込むもう 1 つの方法です。この特殊なプロトコル タイプは、URL コンテンツが任意の文字列、つまり JavaScript インタープリタによって実行される JavaScript コードであることを指定します。これは別のコード行として扱われます。つまり、ステートメントはセミコロンで区切られ、コメントは /**/ コメントに置き換えられる必要があります。 javascript:URLで認識されるリソースは、実行したコードを文字列に変換した戻り値です。コードが未定義を返す場合、リソースにはコンテンツがありません。

javascript: URL は、 タグの href 属性、

の action 属性、またはwindow.open() メソッド。

ハイパーリンク内の JavaScript URL は次のようになります:

<a href="javascript:new Date().toLocaleTimeString();" rel="external nofollow" > 
What time is it? 
</a>

上記はこの章の全内容です。その他の関連チュートリアルについては、

JavaScript ビデオ チュートリアルをご覧ください。

!

以上がHTML ドキュメントに JavaScript を埋め込む 4 つの方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。