JavaScript は、Web デザインの分野で最も一般的に使用されるスクリプト言語です。 Web ページで JavaScript を使用する場合、通常、インラインとアウトバウンドの 2 つの方法があります。この記事ではアウトリーチにおけるJavaScriptの活用方法を中心に紹介します。 外部リンクとは 簡単に言えば、外部リンクとは、Web ページ内で外部 JavaScript ファイルを参照する方法です。 HTML ドキュメントでは、 タグを使用して外部 JavaScript ファイルを参照できます。外部 JavaScript ファイルを参照する場合、インライン メソッドとは異なり、コードは HTML ファイルに埋め込まれません。 </p> <ol> <li>保守が容易: JavaScript コードを HTML ドキュメントから分離するため、コードを変更する場合は別のファイルを変更するだけで済み、保守と管理が容易になります。 </li> <li>ページ コード サイズを減らす: すべての Web ページに JavaScript コードを記述すると、ページ サイズが大きくなりすぎ、Web サイトのパフォーマンスに影響を与える可能性があります。アウトリーチにより、ページ コードの量が削減され、Web サイトの応答速度が向上します。 </li> </ol> <p>外部 JavaScript ファイルを導入するコード形式は次のとおりです。 </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre><script type="text/javascript" src="js文件路径">ログイン後にコピー このうち、type 属性はスクリプト言語の種類を示し、src 属性は外部 JavaScript ファイルを指します。パス。次に、簡単な例を使用して、HTML ファイル内の JavaScript ファイルを外部リンクする方法を説明します。 例 HTML ファイル内で外部 JavaScript ファイルを参照するとします。ファイル名は「external.js」で、ディレクトリは「js」ディレクトリ内にあります。手順は次のとおりです。 「external.html」という名前の HTML ファイルを作成します。ファイル内のコードは次のとおりです。 JavaScript 外联 点击我 ログイン後にコピー 上記のコードでは、ボタン クリック イベントを定義し、「myFunction()」という名前の関数を呼び出します。 HTML コードの最後に、 タグを通じて「js/external.js」ファイルを導入します。 </p> <ol start="2"><li>「external.js」という名前の JavaScript ファイルを作成します。内容は次のとおりです: </li></ol> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>function myFunction() { alert("Hello World!"); }</pre><div class="contentsignin">ログイン後にコピー</div></div> <p>external.js ファイルは関数 myFunction() を定義します。 「Hello World!」というメッセージ ボックスが表示されます。 </p> <p>この時点で、2 つのファイルを同じフォルダーに保存し、「external.html」ファイルを開くと、ボタンのあるページが表示され、ボタンをクリックすると、次のようなダイアログ ボックスが表示されます。 「Hello World!」メッセージ。外部jsファイルを導入する方法が成功したということになります。 </p> <p>注意事項</p> <ol> <li>外部jsファイルで指定した関数名や変数名は、HTMLファイル内でも参照できます。 </li> <li>外部 js ファイルに同じ名前の関数が 2 つ以上定義されている場合、関数カバレッジや関数エラーが発生する可能性があります。名前を付けるときは、命名規則に従い、異なる関数に名前を付けるか、関数に異なる別名を付けることをお勧めします。 </li> <li>外部 JavaScript ファイルを導入する場合、導入される JavaScript コードは、HTML ドキュメント ページが配置されているファイルと同じドメインに存在する必要があります。そうしないと、クロスドメインの問題が発生します。 </li> </ol> <p>概要: </p> <p>外部 JavaScript を使用すると、コードの保守性が向上し、ページ コードの量が削減され、Web サイトの応答速度が向上します。申請にあたっては、間違いを避けるために注意してください。 </p>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
