【レッスン#2】 「HTML要素の書き換え」を学ぶプログラミング教材

プログラミング教材#2ではinnerHTMLを使ってJavaScriptでHTMLを書き換える方法を学びます。これができるとウェブページの表示内容を自由に操れるようになります。

プログラミング教材#2でやること

プログラミング教材#2 サンプルコード

さっそくですがプログラミング教材#2のサンプルコードです。コードはHTML,CSS,JavaScriptそれぞれ書いてありますのでコード左上のボタンで切り替えて確認してください。※以降のサンプルについても同様です。

See the Pen 教材「導入」 by programmingbird (@programmingbird) on CodePen.

まずは右側の実行結果。ボタンの上にグレーの横長なボックスがありますね。では「ボタン」を押してみてください。※スマートフォン等で見ている場合は「Result」ボタンを押して実行画面に切り替えて。

プログラミング教材#1のときと異なりダイアログは出てきません。そのかわりグレーのボックス上に「Hello world!」が表示されました。※最初の状態に戻したい場合は右下の「Rerun」ボタンを押します。

JavaScriptでHTMLの書き換え

プログラミング教材#1では初回なのでできるだけ短いコードで要点を説明したかったため手軽に文字表示ができるダイアログを利用しましたが、実際にウェブサイトやウェブアプリを作る場合にはやはり普通の画面上に文字を表示する必要があります。

最初からHTMLに書いておけばもちろん画面に表示することはできますが、一度ブラウザで表示されたらその後は何もできません。今回のように「ボタンが押されたら、画面に表示する」という簡単なこともHTML単体ではできません

そこでJavaScriptの出番です。JavaScriptはブラウザで表示された後から、HTMLの内容を書き換えることができます。今回のサンプルコードでは、もともと空っぽだったHTMLの中身をボタンが押されたら「Hello world!」に書き換える処理をしています。画面に何かを表示する際はほとんどの場合この方法を使いますので今回の学習内容をよく理解し身に着けておいてください。

あらためて、今回学びたいことはこれです。

トリガー ⇒「ボタン」がクリックされたら (前回とまったく同じ)
アクション ⇒ 「Hello world!」を画面上に表示する (これを学ぶ)

トリガーについては前回と同じなので何も心配いりません。もしわからない方はプログラミング教材#1 はじめてのJavaScriptを読んでみてください。

プログラミング教材#2 サンプルコードの解説

HTML

1行目に<div id=”output”></div>が追加されています。divというのは文章の「ひとかたまり」を表す汎用的な要素です。本来は<div>あいうえお</div>のように、中身を持たせるものですが、サンプルコードでは空っぽになっています。

また、後からJavaScriptで扱うために”output”というidをつけてあります。今回はCSSでもこのidを参照しています。

2行目のボタンについてはプログラミング教材#1と全く同じです。

CSS

#output(“output”というidをつけたHTMLのdiv要素)の「高さ」と「背景色」を指定しています。

JavaScript //JSとHTMLの紐付け

var output = document.querySelector(“#output”); という1行が追加されています。これはプログラミング教材#1で学習した通り、HTML要素をJavaScriptの変数に入れています。ここではoutputという変数にHTML上のdiv要素を入れていますね。

JavaScript //トリガーの設定

ここはプログラミング教材#1と全く同じですね。

JavaScript //アクションの設定

アクションを設定するためのユーザー定義関数の中身が新しくなっています。output.innerHTML = “Hello world!”; の部分ですね。

output.innerHTMLは、直訳すると「outputの中身のHTML」です。JavaScriptでは、ピリオド(.)が日本語でいう「」の意味でよく使われます。また、イコール(=)は「左にあるものに右にあるものを入れる」という意味でよく使われます。ということで、文全体で「outputの中身のHTMLに”Hello world!”を入れる」という意味になります。

これが実行されることで、空っぽだったdiv要素の中に”Hello world!”が表示されるわけです。