前ページのソースコードを小出しにして説明していきます。まずは青文字から。
| <img src="haikei.gif"
width="200" height="208"
name="haikei" style="position:absolute;left:270px;top:0px;"> <img src="usagi1a.gif" width="50" height="50" name="usa" style="position:absolute;left:290px;top:0px;"> <img src="kame1a.gif" width="50" height="50" name="kame" style="position:absolute;left:390px;top:0px;"> |
これは、背景とウサギとカメの画像を画面に表示するコードです。一番上の<img
src=から＞で囲まれた部分の意味は、幅(
width="200"）と高さ(height="208")の背景画像(haikei.gif)を座標(270
、0）の位置に配置する。という意味です。name="haikei"は変数と言って、プログラム中で背景画像に何らかの処理を施したいときに、背景画像を識別するための別名みたいなものだと思っておいてください。
以下、ウサギとカメの画像を同じ要領で表示します。
ユーザーが意識すべき点は、幅などの数字やファイル名だけで、それ以外のコードは、慣れない間は特に気にしない方が良いです。このコードをコピーして、ファイル名や数字の部分を変更するだけでいいです。
| <p>ウサギとカメ、勝つのはどっち？</p> <form name="RNAME"> <p><input type="radio" checked name="R1" value="0">ウサギ</p> <p><input type="radio" name="R1" value="1">カメ</p> </form> |
ウサギとカメ、どっちが勝つかを選択するためのラジオボタンを表示するためのコードです。選択肢はウサギとカメの２つでひとつのグループを形成しています。このグループ名をR1とし、このグループの中でのウサギの選択肢の背番号を0、カメの選択肢の背番号を1とします。さらにラジオボタンのグループよりもさらに上のグループのグループ名をRNAMEとし、これ以降のプログラムの中では、この２つのラジオボタンをRNAME.R1[0]とRNAME.R1[1]という名前を使って識別していく事になります。このRNAMEというグループ名のことをフォームネームと言いますが、現段階ではラジオボタングループの上にもさらに大きなグループがあるという程度の認識で留めて置いてください。住所で例えるなら、RNAMEが東京都、R1が千代田区、[0]が番地といったところです。
コンピューターは、ひらがなや漢字を読むことができないので、半角英数の別名をつけておく必要があるのです。
ここでは、このソースコードでラジオボタンを画面に表示して、コンピューターがラジオボタンを識別する為の別名をそれぞれRNAME.R1[0]とRNAME.R1[1]にしたという事だけ押さえておいてください。ちなみにこの別名のことを変数といいます。この変数という用語はこれから頻繁に出てきますので覚えておいてください。
| <p><input type="submit" value="スタート" onclick="move()"></p> |
青文字の最後になりますが、この部分はスタートボタンを表示するためのコ−ドです。onclick="move()"は、スタートボタンをクリックしたら、move()という関数を呼び出して括弧内の処理を行うという意味です。move()関数は次ページの赤文字部分の中にあります。