この授業のゴール
クリックをきっかけに、ページの文字と色を自分の指示で変えられるようになる。
この授業のためし方 (共通): 2〜4章のコード見本は、それぞれが「
<body> の中に写せばそのまま動く」ひとまとまりです。VS Code で新しい HTMLファイルを作り (ひな形 ! + Tab)、<body> の中に写して、Ctrl + S で保存 → Go Live で動きを確かめます。1. おさらい ― 3点セットの形
授業1「JavaScriptの最初の一歩」から使ってきた、この形が今日の主役です。
var btn = document.getElementById("btn"); // ① 部品を探す
btn.addEventListener("click", function () { // ② きっかけを待つ
// ③ ここで何かをする
});
- ①
document.getElementById("名前")… ページの中から、idで部品を探してくる - ②
addEventListener("click", ...)… 「クリックされたら」というイベント(きっかけ)を待ち受ける - ③ 中身 … きっかけが起きたときにやること
きっかけは click のほかにも、input(入力されたら)、mouseover(マウスがのったら)などがあります。
2. 文字を書き換える ― textContent
探してきた部品の textContent に新しい文字を入れると、画面の文字がその場で変わります。
<h1 id="midashi">おはよう</h1>
<button id="btn">あいさつを変える</button>
<script>
var midashi = document.getElementById("midashi");
var btn = document.getElementById("btn");
btn.addEventListener("click", function () {
midashi.textContent = "こんばんは!";
});
</script>
ボタンを押すと、見出しの「おはよう」が「こんばんは!」に変わります。alert と違って、ページの一部が変わるところに注目してください。
3. 色やデザインを書き換える ― style
CSSで学んだプロパティは、JSからも変えられます。部品.style.プロパティ名 = "値"; の形です。
midashi.style.color = "tomato"; // 文字の色 midashi.style.backgroundColor = "#fff8e1"; // 背景色 midashi.style.fontSize = "40px"; // 文字の大きさ
名前の変換ルール: CSSで
background-color のようにハイフンが入る名前は、JSでは backgroundColor と「ハイフンを取って次の文字を大文字」にします。エラーの定番ポイントです。もう1つの定番:
部品.classList.add("クラス名") / classList.remove("クラス名") を使うと、「CSSで作っておいた着せ替えセット(クラス)」を付けたり外したりできます。デザインはCSS、きっかけはJS、という分業ができて、プロはこちらを好みます。4. 入力欄と組み合わせる
授業3「条件分岐」の合言葉チェッカーで使った .value(入力欄の中身)と合体させると、ぐっとアプリらしくなります。
<input type="text" id="namae-input" placeholder="名前を入れてね">
<button id="btn">表示する</button>
<p id="kekka"></p>
<script>
var btn = document.getElementById("btn");
btn.addEventListener("click", function () {
var namae = document.getElementById("namae-input").value;
var kekka = document.getElementById("kekka");
if (namae === "") {
kekka.textContent = "名前を入れてください。";
} else {
kekka.textContent = "ようこそ、" + namae + "さん!";
}
});
</script>
空っぽのときの案内(if)まで入った、ちゃんとした「気のきくプログラム」です。実は、このサイトの体験ゾーンやログインの仕組みも、これと同じ部品でできています。
5. やってみよう ― 着せ替えボタン
やってみよう
kisekae.html を作って、「押すたびにページの雰囲気が変わる」ボタンを作ります。
- 見出し(
h1)と、ボタンを3つ置く。(「昼」「夕方」「夜」) - 「昼」を押したら、body の背景を空色に、見出しの文字を「こんにちは」に変える。
document.body.style.backgroundColor = "skyblue";のように、body は探さなくてもdocument.bodyで触れます。 - 「夕方」「夜」のボタンにも、それぞれの色とあいさつをつける。
- 仕上げに、自分の好きな「4つ目のモード」を発明する。(雨の日、ゲームの世界、なんでも!)
- スタッフに見せて、一番気に入ったモードを説明する。
答え (3モードぶん・写してOK):
<h1 id="aisatsu">こんにちは</h1>
<button id="hiru">昼</button>
<button id="yuugata">夕方</button>
<button id="yoru">夜</button>
<script>
var aisatsu = document.getElementById("aisatsu");
document.getElementById("hiru").addEventListener("click", function () {
document.body.style.backgroundColor = "skyblue";
aisatsu.style.color = "black";
aisatsu.textContent = "こんにちは";
});
document.getElementById("yuugata").addEventListener("click", function () {
document.body.style.backgroundColor = "orange";
aisatsu.style.color = "black";
aisatsu.textContent = "こんばんは、そろそろ夕ごはん";
});
document.getElementById("yoru").addEventListener("click", function () {
document.body.style.backgroundColor = "#2b3a55";
aisatsu.style.color = "white"; // 暗い背景では文字を白に (読みやすさ!)
aisatsu.textContent = "おやすみなさい";
});
</script>
4つ目のモードは、この形をもう1ブロック増やせば作れます。夜モードで文字色も変えているのは、暗い背景に黒い文字だと読めなくなるからです。発展チャレンジ(慣れている方・A型の方向け)
発展チャレンジ
- ボタン3つを1つにまとめて、「押すたびに 昼 → 夕方 → 夜 → 昼…と一周する」ように作り変えてみましょう。今が何番目かを変数で数えるのがコツです。
classList.toggle("dark")を調べて、「ダークモード切り替えボタン」を作ってみましょう。本物のサイトにある機能が、もう作れます。inputイベント(入力のたびに発生)を使って、「入力した文字がそのまま下に大きく表示される」リアルタイムプレビューを作ってみましょう。