【Web】JavaScriptの処理を外部ファイル化してHTMLと分離する (Web勉強記 9日目)

投稿日：2020年3月21日

最終更新日：2020年3月21日

HTMLとJavaScriptを分離

今までhtmlファイルの中にJavaScriptの処理を直書きしていたが、今回はJavaScriptの処理を外部ファイル化してHTMLと分離し、htmlの記述をスッキリさせてみる。

まず、JavaScriptの外部ファイルを作成する。といっても、今までhtmlに書いてきた部分を以下のように新しいファイルにコピペし、tryFortune.jsというファイル名で保存するだけ。

これで下準備完了。

前回作成したweb_omikuji_time.htmlを以下のように書き換える。

前回との差分は、<script></script>タグの中に直書きしていたJavaScriptのコードの代わりに、外部ファイルのtryFortune.jsを<script src=”tryFortune.js”>で呼び出している。

.htmlファイルと.jsファイルを同じディレクトリに置くなら上記のようにsrcでファイル名だけ指定すればよいが、.jsファイルを別のディレクトリに置く場合は、.htmlから見た相対パスで指定する。例えば<script src=”directory/tryFortune.js”>のような感じ。

今回の内容はgithub pagesにプッシュしたので、以下ページの「web_omikuji_time」のリンクから今回の内容が確認できる。

ページを開いても見た目上は前回と変わらないのだが、Google Chromeの「検証」機能を使ってhtmlコードを見てみると、JavaScriptの外部ファイルを呼び出していることを確認できる。

今までの勉強記は以下にまとめています。初学者の目線で色々つくったり、試してみたりしてるので、興味があればどうぞ。

【Web】Web勉強記 – HTMLやCSS、JavaScriptのTips

映画と旅行が大好きなエンジニア。お酒、ゲーム、読書も好き。