1-5 HTMLを書き換える
JavaScriptを使えばブラウザに一旦表示された文章や画像を、ユーザー入力によって、あるいは時間の経過と共に変化させることができます。
これはJavaScriptでHTMLの中身を書き換えることで実現します。本項ではそのやり方を説明します。
(1)文章を変更する
JavaScriptでHTMLを書き換えるには、
1.要素に
id属性を記述する
2.そのidを持つ要素に対し処理を行う
という方法で行います。まずは現在の日時を表示する方法をみてみましょう。
example151.html ← 動作の確認
ソースコードは次のようになります。
| 01 | <!DOCTYPE html>
|
|---|
| 02 | <html lang="ja">
|
|---|
| 03 | <head>
|
|---|
| 04 | <meta charset="utf-8">
|
|---|
| 05 | <title>JavaScriptのテストプログラム</title>
|
|---|
| 06 | </head>
|
|---|
| 07 | <body>
|
|---|
| 08 | 現在の日時は<span id="output">ここを書き換えます</span>です
|
|---|
| 09 | <script>
|
|---|
| 10 | var da = new Date();
|
|---|
| 11 | document.getElementById("output").textContent = da;
|
|---|
| 12 | </script>
|
|---|
| 13 | </body>
|
|---|
| 14 | </html> |
|---|
ブラウザによって表示のされ方に多少違いはありますが
Thu Feb 02 2017 09:47:26 GMT+0900 (東京 (標準時))
という感じで表示されます。
ポイントは8行及び10～11行です。
8行のspanは文章の一部を記述する時に使うタグです。
この部分をJavaScriptで操作できるようにid属性を記述します。
idは要素を識別するためのもので、任意の名称を付けることができます。
10行で Dateオブジェクトにより現在の日時を取得し、11行で「ここを書き換えます」という箇所を書き換えています。
（Dateオブジェクトの詳細は次項
1-6 で説明します）
11行は
HTMLドキュメント document → の"output"とidが付けられている要素 .getElementById("output") →
の文章 .textContent → をdaにする = da;
とお考え頂くと判りやすいと思います。
getElementByIdという命令でidからその要素を取得します。
同一HTML内の複数の要素にidを設定できますが、複数設定する場合はidの名称が同じにならないようにします。
次は画像を変化させるソースコードです。画面上部のキャラクターをタップ（クリック）するとイラストが表示されます。
example152.html ← 動作の確認
| 01 | <!DOCTYPE html>
|
|---|
| 02 | <html lang="ja">
|
|---|
| 03 | <head>
|
|---|
| 04 | <meta charset="utf-8">
|
|---|
| 05 | <title>JavaScriptのテストプログラム</title>
|
|---|
| 06 | </head>
|
|---|
| 07 | <body style="background-color:#248; text-align:center;">
|
|---|
| 08 | <img src="example152_icon1.png" onclick="imgChange(1)">
|
|---|
| 09 | <img src="example152_icon2.png" onclick="imgChange(2)">
|
|---|
| 10 | <hr>
|
|---|
| 11 | <div id="illust"><img src="example152_illust0.png"</div>
|
|---|
| 12 | <hr>
|
|---|
| 13 | <script>
|
|---|
| 14 | function imgChange( val ) {
|
|---|
| 15 | var il = 'example152_illust' + val + '.png';
|
|---|
| 16 | document.getElementById("illust").innerHTML = '<img src=' + '"' + il + '"' + '>';
|
|---|
| 17 | }
|
|---|
| 18 | </script>
|
|---|
| 19 | </body>
|
|---|
| 20 | </html> |
|---|
ポイントは8、9行（キャラクターの画像の要素）、11行（イラストを表示する箇所を指定するdiv要素）、そして14～17行に記述した関数です。
8、9行はimgタグに
onclick属性 を記述し、画像がタップやクリックされた時に呼ばれる関数を指定しています。
onclickはボタンを押した時の処理でよく使われますが、画像(img)や文字列(span)、枠(table)など多くの要素で使うことができます。
onclickされた時に呼ばれる関数はimgChangeという名称にしました。この関数はイラストの番号を引数で受け取れるようにしてあります。
15行の変数ilがイラスト画像のファイル名です。16行でdiv内の記述をファイル名を指定したimg要素に書き換えています。
divは文章や画像を一つの範囲として定めるタグで、ここでは<div>から</div>の間に画像を表示する意味になります。
書き換える命令は
innerHTML を使っています。
innerHTMLで書き換えた文字列にタグが記述されていればそのタグの機能が働きます。
(1)で使ったtextContentは文字列がそのまま表示されタグの機能は働きません。
このソースコードの innerHTML を textContent に書き換えて実行すると、その違いが判ります。
textContentでは画像は表示されず、タグとファイル名がそのまま表示されます。
<hr>というタグは水平方向の罫線を表示します。<hr>は開始タグのみで記述します。
スタイルシート(CSS)について触れておきます。今回の例は背景を紺色にし、画像をセンタリング表示しており、それらをスタイルシートで行っています。
具体的には body要素の style= の部分で、背景色を background-color:#248;、画像のセンタリングを text-align:center; で設定しています。
さてHTML内にはsrc属性の指定のようにダブルクォート " で囲む記述があります。
HTMLやJavaScript、そして多くのプログラミング言語で " から次の " までが一つの文字列となる決まりで、
ダブルクォートで記述し始めた文字列は必ずダブルクォートで閉じるようにします。
innerHTML命令でそのような箇所を記述する場合はシングルクォートを使い
～.innerHTML = '<img src="ファイル名">';
あるいは
～.innerHTML = "<img src='ファイル名'>"
とします。どちらの記述でも大丈夫ですが、本講座ではHTMLの実際の記述に近い前者をお勧めします。
今回の例では画像のファイル名をダブルクォートで囲むため、16行にあるように '"' + ファイル名 + '"' と記述しています。
このように
' と " を同時に用いることがJavaScriptのポイントの一つとなります。
※補足としてダブルクォートとシングルクォートは、次のように連続して記述することはできません。
×～.innerHTML = "<img src="ファイル名">"
JavaScriptの利便性
タップやクリックした時に文章や画像をHTMLだけで変化させる方法として、
複数のリンク先を用意し、それぞれのHTMLのコードに違う文章や画像を記述するという力業的なやり方はあるでしょう。
しかしそれでは無駄なファイルやコードが生じ、リンク先にジャンプするごとに読み込みも発生するため、現実的ではありません。
JavaScriptを用いれば今回の例のように少ないソースコードで高度な処理が実現できます。
(3)JavaScriptのオブジェクトについて
本項では Date と document という記述が出てきました。
・Dateは日時に関するオブジェクト
・documentはHTMLのドキュメントを扱う際に使うオブジェクト
です。その他によく使われるものとして
・Math 数学に関するオブジェクトで乱数や三角関数、円周率などを扱う
・window ブラウザに関するオブジェクト
があります。
別ウィンドウでメッセージを表示するalert命令をこれまで何度か使いましたが、省略せずに記述すると window.alert("メッセージ"); となります。
windowの記述は省略できますが、それ以外のオブジェクトの記述は省略できません。
さて、プログラミングの世界ではオブジェクト指向という言葉がよく使われます。
最近のプログラミング言語の多くはオブジェクト指向言語であり、JavaScriptもそうです。
オブジェクトの意味は現実世界の物体（オブジェクト）とその形や色などの性質（プロパティ）の例で説明されることが多いですが、
そういった詳細を理解されなくてもJavaScriptのゲーム開発に差し障りはございません。
ですので本講座では詳しい話は割愛しますが、
オブジェクト指向のプログラミング言語はソースコードが判りやすく記述できるように各種の命令系統がまとまっており、
一度作ったソースコードを再利用しやすいとお考え頂くとよろしいかと思います。
ここで説明したDateやdocumentオブジェクトはJavaScriptに最初から備わっている機能（命令）ですが、
JavaScriptでは自分で使う機能をオブジェクトとして定義できるということを、一つの知識として記しておきます。
【オブジェクトの使い方はご要望が多ければ掲載致します】
