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 タイプを指定する必要があります。例: </span><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&lt;script type=&quot;text/vbscript&quot;&gt; ... ... &lt;/script&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div></p><p>タイプのデフォルト値属性は「text/javascript」です。 </p><p><span style="color: #ff0000"></span>2——インライン <script> 要素</p><p><span style="color: #0000ff">例: </span><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'> &lt;script&gt; function displayTime(){ ... ... } window.onload = displayTime; &lt;/script&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div></p><p>3——Src 属性は外部を使用しますファイル内の script</p><p><span style="color: #0000ff"><script> タグは、JavaScript コードを含むファイルの URL を指定する src 属性をサポートしています。その使用法は次のとおりです。 </span><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&lt;script src=&quot;../../scripts/util.js&quot;&gt;&lt;/script&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div></p>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 サイトの他の関連記事を参照してください。