プレゼンテーションシナリオ: スライド15、16、17

スライド15、16、17から始めます。この部分では、VS Codeを使用してExternal JavaScriptの構造を作成する方法を説明します。

まず、"external_js"という名前のフォルダを作成します。VS Codeで、Open Folderボタンまたはショートカットキー Ctrl + K + O を使って、作成したexternal_jsフォルダを開きます。

次に、external_jsのディレクトリツリーで右クリックし、New Fileを選択して、index.htmlとscript.jsの2つのファイルを同じ階層に作成します。

事前にコードを準備しました。時間を節約するために、コピーして説明します。

index.htmlファイルの内容では、<script>タグにsrc属性を使用して.jsファイルをHTMLページに埋め込みます。

配置方法は2つあります：

方法1: 左の例のように<head>セクション内に配置します：

<script src="script.js" defer></script>

head内に配置する場合は、defer属性を追加して、HTMLの読み込みが完了した後にスクリプトが実行されるようにする必要があることに注意してください。

方法2: または、右の例のように</body>閉じタグの直前に配置することもできます：

<script src="script.js"></script>

body末尾に配置する場合は、deferは不要です。

次に、.jsファイルがHTMLファイルと同じ階層にない場合は、src内のパスを修正する必要があります。

例：

  • ケース1: .jsファイルがサブフォルダjs/内にある場合

    • 構造: external_js/ → index.html と js/ → script.js
    • 修正: <script src="js/script.js"></script>

  • ケース2: .jsファイルが親フォルダにある場合

    • 構造: external_js/ → script.js と html/ → index.html
    • 修正: <script src="../script.js"></script>

上記のような相対パスの取得方法については、以前に説明したHTMLファイルを参照してください。