JavaScript PR

JavaScriptを別ファイル(外部ファイル)に書く【JS】

記事内に商品プロモーションを含む場合があります

JavaScriptは前回紹介した「JavaScriptをhtmlに書く方法【JS】」のようにhtml内に記述できます。
しかし、別ファイルで管理したほうが、全体の見通しが良くなるのでおすすめです。

では早速JavaScriptを別ファイルに書いていきましょう!

JavaScriptを別ファイル(外部ファイル)に書く

JavaScriptを別のファイルに書くには、JavaScript専用のファイルを作成する必要があります。
名前は自由なのですが、今回は「script.js」という名前で作成しようと思います。

最後の「.js」で、JavaScriptのファイルだよとわかります。

では早速前回と同じ内容を表示させてみます。
「script.js」に書く内容はこちら

alert('にんじんみるく!');

 

前回はscriptというタグで囲んでいましたが、今回は必要ありません。
こちらのほうがスッキリ書けますね。

JavaScriptのファイルを読み込む

このままだとhtmlに読み込んでいないので、JavaScriptは実行されません。
そこでhtmlにscrで作成したファイルを読み込みます。

<!DOCTYPE html>
<html>
<head>
  <title>JSテスト</title>
  <meta charset="UTF-8">
</head>
<body>

<!-- JSファイルを読み込む -->
<script src="script.js"></script>
<!-- /JSファイルを読み込む -->
</body>
</html>

こんな感じ。
(htmlファイルと同一階層を想定)

これでhtmlを開いてみると同じく「にんじんみるく!」と表示されるはずです。

ABOUT ME
シラツキ
当ブログは同人サークル「にんじんみるく」のシラツキが運営する個人ブログです。 同人誌即売会の情報やネタ、技術的な内容など様々なコンテンツを配信しています。 普段はwebサイト作ってる人インターネッツお絵かきマン。 Webサイトの制作、ECサイトの運営、ブログ、イラスト制作など色々やってます。 個人でWeb技術ブログ、趣味のブログ、YouTube活動中。

COMMENT

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)