HTML文書にJSを埋め込む方法まとめ

今回はHTML文書にJSを埋め込む方法と、HTML文書にJSを埋め込む際の注意点についてまとめました。実際の事例を見てみましょう。

HTML への JavaScript の埋め込み

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

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

2. <script> タグの src 属性で指定される</script>

3. onclick または onmouseover によって処理される から配置されます。このような HTML 属性値を持つ (まれに) 4. URL に配置すると、この URL は特殊なプロトコル「JavaScript」を使用します (ほとんどありません)

JavaScript がオリジナルです。デフォルトでは、<script> 要素には JavaScript コードが含まれるか、参照されます。 VBScript などの非標準のスクリプト言語を使用する場合は、type 属性を使用してスクリプトの MIME タイプを指定する必要があります。例: <p style="text-align: left;"><pre class="brush:php;toolbar:false">&lt;script type=&quot;text/vbscript&quot;&gt; ... ... &lt;/script&gt;&lt;span style=&quot;color: #0000ff&quot;&gt;&lt;/span&gt; type 属性のデフォルト値は「text/javascript」です。 」。 &lt;p style=&quot;text-align: left;&quot;&gt;&lt;/p&gt; &lt;p style=&quot;text-align: left;&quot;&gt;1 - インライン &lt;script&gt; 要素 &lt;span style=&quot;color: #ff0000&quot;&gt;&lt;/script&gt;&lt;/p&gt; 例: &lt;p style=&quot;text-align: left;&quot;&gt;&lt;/p&gt; &lt;pre class=&quot;brush:php;toolbar:false&quot;&gt; &lt;script&gt; function displayTime(){ ... ... } window.onload = displayTime; &lt;/script&gt;</pre> <span style="color: #0000ff"></span>2 - src 属性は src 属性をサポートしており、この属性は URL を指定しますJavaScript コード ファイルの。使い方は以下の通りです: <p style="text-align: left;"></p>コードをコピーします<p style="text-align: left;"> コードは以下の通りです:<span style="color: #0000ff"></span><script src="../../scripts/util.js"></script>

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

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

3 - HTML のイベント ハンドラー

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

例:

コードをコピーします コードは次のとおりです:

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

4 - URL 内の JavaScript

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

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

の action 属性、または

window.open のパラメータなど、通常の URL を使用できる場所であればどこでも使用できます。 （） 方法。

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

<a> 
What time is it? 
</a>

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 推奨書籍:

Vue を使用してツリー ビュー データを実装する方法

V-Distpickerコンポーネントの使用方法

以上がHTML文書にJSを埋め込む方法まとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。