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

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

HTML への JavaScript の埋め込み

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

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

2. <script> タグの src 属性で指定される</p> <p style="text-align: left;">3. onclick または <a href="http://www.php.cn/code/8922.html" target="_blank">onmouseover によって処理される</a> から配置されます。このような HTML 属性値を持つ (まれに) <a href="http://www.php.cn/wiki/1457.html" target="_blank"></a> 4. URL に配置すると、この URL は特殊なプロトコル「JavaScript」を使用します (ほとんどありません) </p> <p style="text-align: left;"> </p> JavaScript がオリジナルです。デフォルトでは、<script> 要素には JavaScript コードが含まれるか、参照されます。 VBScript などの非標準のスクリプト言語を使用する場合は、type 属性を使用してスクリプトの MIME タイプを指定する必要があります。例: <p style="text-align: left;"></p> <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> <span style="color: #0000ff"></span> type 属性のデフォルト値は「text/javascript」です。 」。 <p style="text-align: left;"></p> <p style="text-align: left;">1 - インライン <script> 要素 <span style="color: #ff0000"></span></p> 例: <p style="text-align: left;"></p> <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> <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 href="javascript:new Date().toLocaleTimeString();" rel="external nofollow" > 
What time is it? 
</a>

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

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

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

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