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

投稿日：2020年3月21日

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

HTMLとJavaScriptを分離

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

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

	function tryFortune() {
	var resultInt = Math.floor(Math.random () * 7);
	var tryDay = new Date();
	var year = tryDay.getFullYear();
	var month = tryDay.getMonth() + 1;
	var day = tryDay.getDate();
	var ymdDate = "最後におみくじを引いた日：" + year + "年" + month + "月" + day + "日";
	switch (resultInt) {
	case 0 : resultText = "大凶"; resultClass = "bad"; break;
	case 1 : resultText = "凶"; resultClass = "bad"; break;
	case 2 : resultText = "末吉"; resultClass = "normal"; break;
	case 3 : resultText = "小吉"; resultClass = "normal"; break;
	case 4 : resultText = "中吉"; resultClass = "good"; break;
	case 5 : resultText = "吉"; resultClass = "good"; break;
	default : resultText = "大吉"; resultClass = "good"; break;
	}
	document.getElementById("result").textContent = resultText;
	document.getElementById("result").className = resultClass;
	document.getElementById("date").textContent = ymdDate;
	}

view raw tryFortune.js hosted with ❤ by GitHub

これで下準備完了。

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

	<!DOCTYPE html>
	<html>
	<head>
	<link rel = "stylesheet" href = "omikuji_element_center.css"/>
	<script src="tryFortune.js">
	</script>
	</head>
	<body>
	<div class="main">
	<h1>HTMLとJavaScriptによるWebおみくじ</h1>
	<p><img src="images/mouse.png"></p>
	<button class = "button_omikuji" onclick="tryFortune()">おみくじを引く</button>
	<p id = "result"></p>
	<p id = "date"></p>
	</div>
	</body>
	</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】HTML/CSS/JavaScriptでおみくじをつくろう日記

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