第22回 DOM操作
「ついにJavaScriptが画面を動かした！」
第1話 で、ホームページはいつ動くんだ？
変数、if、関数、配列、for。ここまで覚えたKAZUには一つ疑問があった。
KAZU
俺はホームページを作ってるんだよな？ ずっとconsole.logばっかりじゃないか！
AI
では、いよいよJavaScriptからHTMLを動かします。DOMの登場です。
第2話 JavaScript、HTMLを発見する
<p id="message">ここが変わります</p>id="message" は目印。JavaScriptから次のように探せる。
document.getElementById("message");ざっくり言えば「このページの中から、messageというIDのものを探して」という命令だ。
document.getElementById("message").textContent =
"JavaScriptで変更しました！";これで画面の文字が実際に書き換わる。
第3話 ボタンを押した――動いた！
<button onclick="changeMessage()">押してみる</button>function changeMessage() {
document.getElementById("message").textContent =
"成功しました！";
}HTMLが骨組みを作る。CSSが見た目を整える。JavaScriptが動きを与える。変数がデータを覚え、ifが判断し、functionが仕事をまとめ、配列が整理し、forが繰り返し、DOMがHTMLとJavaScriptをつなぐ。
KAZU
最初はボタン一つ直すのにも苦労した。でも今なら、そのボタンがなぜ動くのか少し分かる。
プログラミングはコードを丸暗記することではない。「こうしたい」という人間の考えを、「こうしてください」というコンピュータの言葉へ変えていくことだ。
次回予告：習ったものを全部使って、自分で一つ作ってみる。物語は「ミニアプリ制作編」へ続く。