【独学JavaScript入門③】HTMLファイルの実行

HTMLファイルとはWebページ(ホームページ)の書き方のルールに沿って書かれたファイルのことです。別の回で詳しくご紹介したいと思います。

今回はとりあえずHTMLファイルを実行してブラウザに表示するテストを行います。以下の「test1.html」のダウンロードをクリックして下さい。ファイル名をクリックするとファイルが即実行されますがそれでも構いません。スマホ、タブレットでご覧の方はダウンロードではなくファイル名の方をタッチしてみてください。

ダウンロードした「test1.html」を下の図のようにGoogle Chromeにドラッグ&ドロップしてください。

以下のページが開きますので「click here」を左クリックしてみて下さい。

このtest1.htmlは以下の記述がされています。ダウンロードしたtest.htmlを右クリックして「プログラムから開く」→「メモ帳」で開いてもらうと確認できます。現時点では理解できなくて全然構いませんし、理解できなくて当然ですので安心してください。

<!DOCTYPE html>
<html lang="ja">

<head>
	<meta charset="utf-8">
	<title>TECH FARM</title>
	<style>
		#display {
			width: 500px;
			margin: 0 auto;
			text-align: center;

			font-size: 1.5em;
		}
	</style>
</head>

<body>
	<div id="display">
		<h1>独学Java Script入門</h1>
		<button id="btn">click here</button>
	</div>
	<script>
		btn = document.getElementById("btn");
		btn.onclick = function () {
			alert("大きな初めの1歩 おめでとうございます")
		};
	</script>
</body>
</html>

<!--右が切れたら左にスワイプしてください-->

実はこのプログラム(ソースコード)の全てをJavaScriptで書かれているわけではありません。JavaScriptは以下の記述のみです。

btn = document.getElementById("btn");
btn.onclick = function () {
	alert("大きな初めの1歩 おめでとうございます")
};

<!--右が切れたら左にスワイプしてください-->

大半はHTMLというブラウザで見たときにどのように表示するか(文字の大きさ、中央寄せなど)の記述になります。まずはざっくりと「表示はHTML」「処理はJavaScript」で行うらしいと思ってもらえればと思います。

今回はブラウザに表示し、クリックによってイベントを実行することができました。JavaScriptの記述ルールを理解すると徐々に今回の処理を理解することができます。少しずつJavaScriptを学んでいきましょう。

JavaScript入門一覧に戻る