WebページでJavaScriptを引用する方法-フロントエンドQ&A-php.cn

WebページでJavaScriptを引用する方法

Apr 24, 2023 pm 02:47 PM

ネットワーク技術の継続的な発展に伴い、Web ページはますますインタラクティブになってきており、Web ページのユーザーエクスペリエンスとインタラクティブ性を向上させるために、JavaScript スクリプトを使用してさまざまな機能を実装することがよくあります。ただし、Web ページで JavaScript を使用するには、Web ページ内で JavaScript を参照する必要があります。この記事では、Web ページが JavaScript スクリプトを参照する方法を紹介します。

1. HTML ファイルに JavaScript コードを直接記述する

JavaScript を参照する簡単な方法は、JavaScript コード全体を HTML ファイルに直接記述することです。 HTML ファイルでは、次に示すように、<Script> タグと </Script> タグを使用して JavaScript コードをラップし、それを HTML タグ内の <head> または <body> に追加できます。 #この例では、<head> タグに myFunction という名前の関数を定義する JavaScript コードが含まれていることがわかります。 <body> タグ内にボタンを追加し、その関数をボタンの onclick イベントにバインドしました。このイベントは、ユーザーがボタンをクリックしたときにトリガーされます。この方法はシンプルで理解しやすいですが、複雑な JavaScript コードのメンテナンスには適さない可能性があります。

2. HTML ファイルで外部 JavaScript ファイルを参照する

もう 1 つの方法は、JavaScript コードを独立した .js ファイルに個別に記述し、HTML ファイル内で参照することです。この方法の利点は、JavaScript コードと HTML コードが互いに独立しており、保守が容易であることです。参照する場合は、<script> タグを使用して外部 JavaScript ファイルを参照する必要があります。たとえば、前の JavaScript コードを test.js というファイルに保存し、次のコードを使用して HTML ファイル内で参照します。

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;网页引用JavaScript示例&lt;/title&gt;
    &lt;script&gt;
        function myFunction() {
            alert("请点击按钮！");
        }
    &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;button onclick=&quot;myFunction()&quot;&gt;点击我&lt;/button&gt;
&lt;/body&gt;
&lt;/html&gt;

ログイン後にコピー

この例では、<script&gt を追加したことがわかります。 ; タグを使用して、参照する外部 JavaScript ファイル (たとえば、ここでは test.js ファイル) の URL を指定すると、ページは対応する js ファイルを呼び出して JavaScript 関数を実装します。

外部 JavaScript ファイルと HTML ファイルが同じディレクトリにある場合、次のような相対パスを使用して js コードファイルの場所を指定できることに注意してください。

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;网页引用JavaScript示例&lt;/title&gt;
    &lt;script src=&quot;test.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;button onclick=&quot;myFunction()&quot;&gt;点击我&lt;/button&gt;
&lt;/body&gt;
&lt;/html&gt;

ログイン後にコピー

ここで ../ は、現在のディレクトリから飛び出し、その上のディレクトリにある js フォルダーに入り、test.js ファイルを見つけます。

3. HTML に外部 JavaScript ファイルを埋め込んで参照する

便宜上、外部 JavaScript ファイルを HTML ファイルで参照し、同時に埋め込み JavaScript を記述することがあります。実際、これも可能で、以下に示すように、<script> タグに type 属性を指定することで実現できます。 head> タグ <script> タグは 2 つあります。最初のタグは外部 JavaScript ファイル test.js を参照するために使用され、2 番目のタグは myFunction 関数を実装するための埋め込み JavaScript コードです。異なる type 属性を指定すると、同じ HTML ファイル内でインライン JavaScript ファイルと外部 JavaScript ファイルの両方を使用できます。

結論

上記は、Web ページ上で JavaScript スクリプトを参照する方法をいくつか紹介しました。それぞれの方法には、独自の利点と適用可能なシナリオがあります。最適な方法を選択することで、より多くのことを実現できます。 Web ページを適切に開発し、より良いユーザーエクスペリエンスを提供します。

以上がWebページでJavaScriptを引用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。