Web Programming

この記事では「Web Programming」について、基本の意味と使い方を初心者向けにやさしく説明します。

This is a simple example where the background color changes step by step when you click the button.

クリックすると色が変わるボタン

ボタンをクリックするたびに、ボタンを囲む部分の背景色が「赤 → 青 → 緑 → オレンジ → 紫 → 赤…」と順番に変わります。

<div id="smp">
	<button id="colorButton">ここをクリック</button>
</div>

button {
	margin: 2em auto;
	display: block;
	padding: 1em 2em;
	font-size: large;
	cursor: pointer;
}

// ボタンの要素を取得
const button = document.getElementById("colorButton");

// 色のリストを用意
const colors = ["red", "blue", "green", "orange", "purple"];

// 今の色を管理するための番号
let index = 0;

// ボタンをクリックしたときの処理
button.addEventListener("click", function() {
	// 背景のdiv要素を取得
	const divSmp = document.getElementById("smp");

	// 背景色を変える
	divSmp.style.backgroundColor = colors[index];

	// 次の色に進める
	index++;

	// 色リストの最後まで行ったら最初に戻す
	if (index >= colors.length) {
		index = 0;
	}
});

コードの解説

HTML部分

<button id="colorButton">ここをクリック</button>

ユーザーが押すボタンを用意しています。id で名前を付けて、JavaScriptから呼び出せるようにしています。

CSS部分

margin: 2em auto; と display: block;

ボタンを横方向の中央に配置して、余白をつけています。

JavaScript部分

document.getElementById("colorButton")

HTMLで用意したボタンを取得しています。

const colors = ["red", "blue", "green", "orange", "purple"];

colors という配列に、"red" や "blue" などの文字を入れています。これらはCSSの色名として使えます。

addEventListener("click", function() {...})

ボタンがクリックされたときに実行する処理を書いています。

document.getElementById("smp");

HTMLで用意した <div id="smp">...</div>（ボタンを囲む箱）を取得しています。

divSmp.style.backgroundColor = colors[index];

div要素の背景色を変えています。

プログラムは上から順に実行されますが、クリックの処理はボタンが押されるまで待っていて、そのときに動きます。