HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLファイルで外部の.jsファイルを読み込む方法を解説

外部JavaScriptファイルの基本

HTMLファイルからJavaScriptのコードを分離して管理したい場合は、拡張子「.js」を持つ外部ファイルを作成します。作成したファイルは、HTML側のscriptタグを使って読み込みます。このときsrc属性にファイルパスを指定することで、外部JavaScriptファイルをページに組み込むことができます。

複数の外部ファイルを扱う場合

外部JavaScriptファイルが複数ある場合は、同じWebページ内に複数のscriptタグを記述することで、それぞれのファイルを読み込めます。用途ごとにコードを分割しておくと、メンテナンス性が向上します。

外部JavaScriptファイルの作成例

ここでは、次のような「new.js」という外部JavaScriptファイルを作成したものとします。

function display() {
    alert("Hello World!");
}

HTMLページへの読み込み方法

続いて、作成した外部JavaScriptファイルをHTMLページに読み込みます。scriptタグのsrc属性に「new.js」を指定してください。

<html>
    <body>
        <form>
            <input type="button" value="Result" onclick="display()"/>
        </form>
        <script src="new.js">
        </script>
    </body>
</html>

動作のポイント

上記の例では、ボタンをクリックするとonclickイベントによってdisplay()関数が呼び出され、「Hello World!」というアラートが表示されます。このようにsrc属性を利用すると、HTML構造とJavaScriptの処理を分離でき、コードの再利用性や保守性が大きく向上します。

  1. HTMLのmultiple属性とは？複数選択を可能にする使い方を徹底解説

    HTMLのmultiple属性は、ユーザーが複数の値を選択・入力できるようにするための属性です。この属性はブール型（真偽値）属性であり、<input>要素と<select>要素の両方で使用できます。特に、HTMLフォームで複数のファイルをアップロードしたい場合にmultiple属性が活躍します。また、この属性は「email」および「file」タイプの入力フィールドに対応しています。multiple属性の主な特徴fileタイプ：ファイル選択ダイアログで複数のファイルを同時に選択可能になります（CtrlキーやShiftキーを押しながらクリック）。emailタイプ：カンマ区切

  2. HTMLのlist属性とは？datalist要素で入力候補を表示する方法を解説

    HTMLのlist属性とはHTMLでは、<datalist>要素を使用して、あらかじめ定義された選択肢のリストを作成できます。このリストは<input>要素（入力欄）に対して適用され、ユーザーが文字を入力すると、定義済みの選択肢が候補として自動的に表示されます。<input>要素のlist属性は、対応する<datalist>要素のidを参照することで、入力欄と選択肢リストを関連付けます。このlist属性は、HTML5で新たに導入された機能です。list属性の基本的な使い方list属性を使うには、以下の2つのステップを行います。<datali