ＳＴＥＰ２では、ゲーム画面を途中まで作って、ＪａｖａＳｃｒｉｐｔをちょっとだけ使ってみますにゃ。できあがるものはこれですにゃ。
その前に、ひとつ大事なお願いがありますにゃ。この先、ＪａｖａＳｃｒｉｐｔの部分を書き換えるのに失敗した場合、運が悪いとプログラムが無限ループになってしまう恐れがありますにゃ。もしパソコンの画面に「ブラウザの実行速度を動作を遅くしています」とか「スクリプトを停止しますか」とかいう表示が出たら、「はい」を選択してくださいにゃ。そういう表示が出にゃくても、パソコンが反応しにゃくなったり、マウスカーソルが動かにゃくなったり、ハードディスクがにゃんか動き続ける状態になったり、そういう異常に気付いたらブラウザを閉じるか強制終了してくださいにゃ。
ＳＴＥＰ１で作ったＨＴＭＬに、いろいろ書き加えていきますにゃ。黒い文字は、ＳＴＥＰ１で書いたものですにゃ。青い文字が、今から書き加える部分ですにゃ。キーボードで入力してもいいんですけど、コピー→貼り付けでも大丈夫ですにゃ。
<html>
<head>
<title>神経衰弱♪</title>
<script language="JavaScript">
<!--
function main()
{
document.hyoji.h1.value="みなさん";
document.hyoji.h2.value="こんばんにゃ";
document.hyoji.text1.value="いっしょにがんばりましょにゃ♪";
}
// -->
</script>
</head>
<body bgcolor="A0FFA0">
<form name="hyoji">
<table border=1>
<tr>
<td colspan=2 bgcolor="FFC0C0">
<font size=6 color="0000FF">神経衰弱♪</font>
<input type=button name="st1" value="開始" onClick=main()>
</td>
</tr>
<tr>
<td bgcolor="00FFFF" align=center valign=top>
※ここにカードを表示しますにゃ
<table border=0 cellspacing=0 cellpadding=0>
<tr>
<td><img src="./card-0.gif"></td>
<td><img src="./card-1.gif"></td>
<td><img src="./card-2.gif"></td>
<td><img src="./card-3.gif"></td>
<td><img src="./card-4.gif"></td>
<td><img src="./card-5.gif"></td>
</tr>
<tr>
<td><img src="./card-6.gif"></td>
<td><img src="./card-7.gif"></td>
<td><img src="./card-8.gif"></td>
<td><img src="./card-9.gif"></td>
<td><img src="./card-10.gif"></td>
<td><img src="./card-0.gif"></td>
</tr>
</table>
</td>
<td bgcolor="FFFFA0" valign=top>
※ここには、いろんな情報を表示しますにゃ<br>
<input type=text size=40 name="h1" value=""><br>
<input type=text size=40 name="h2" value=""><br>
</td>
</tr>
<tr>
<td colspan=2 bgcolor="C0C0C0">
※ここは、本当は必要にゃいんですけど、作ってる途中で<br>いろいろ表示する場所ですにゃ<br>
<textarea cols=80 rows=10 name="text1"></textarea>
</td>
</tr>
</table><br>
<font size=4>
あなたの名前
<a href="http://bigchan.sakura.ne.jp/index.html">ホームページ</a>
</font>
</body>
</html>
青い部分を書き加えたら、上書き保存または名前を変えて保存してくださいにゃ。どっちでもいいんですけど、名前を変えて保存すると、運悪くバグが出てどうしようもにゃい状態になっちゃった時に前に作ったところからやり直せるっていうメリットがありますにゃ。名前を変えるっていっても、まったく新しい名前を考える必要はにゃくて、最後に「1」とか「a」とか付けるだけで大丈夫ですにゃ。保存したら、アップロードして実際に見に行ってみてくださいにゃ。こういうものができていると思いますにゃ。薄い黄色のところに白い帯のようなものが２本、薄い灰色のところに白い長方形、そして、タイトルの横（桃色のところ）に「開始」というボタンのようなものがありますにゃ。この「開始」のボタンをクリック（マウスで左クリック）してみてくださいにゃ。白い帯と長方形の中に、わたしからのメッセージが表示されると思いますにゃ。
ＳＴＥＰ１とおなじように、追加した部分について簡単に解説しますにゃ。わかってる人や、別にわからにゃくてもいい人は、読み飛ばしてくださいにゃ。全然わからにゃくても、ゲームはちゃんと作れますにゃ。
・「<script language="JavaScript">」
今から「ＪａｖａＳｃｒｉｐｔ」という言語でスクリプト（プログラム）を書き始めますっていう意味ですにゃ。
・「<!--」
「<!--」と「-->」で囲まれた部分を注釈文または注釈行と言いますにゃ。本来は、ＨＴＭＬを書く人がわかりやすくするために付け加えるメモのようなもので、その内容は実際の画面には表示されませんにゃ。今はそんなことはにゃいんですけど、昔はＨＴＭＬの中にＪａｖａＳｃｒｉｐｔを書くと書いた内容がそのまま画面に表示されてしまうことがありましたにゃ。当時はそれを防ぐためにＪａｖａＳｃｒｉｐｔを注釈行の中に書くというのが一般的で、これはその名残りですにゃ。
・「function main()」「{」「}」
「{」と「}」で囲んだ範囲が「main」という名前の関数ですよっていう意味ですにゃ。functionは、本当は関数にゃんですけど、わたしはメインルーチンまたはサブルーチンとして使ってますにゃ。どっちでもおなじようなものですから、気にしにゃいでくださいにゃ。functionの中身は呼び出されるまで実行されませんにゃ。「{」と「}」は、ＪａｖａＳｃｒｉｐｔを含む多くの言語ではいくつかの命令をまとめたものとして扱われますにゃ。基本的には、どこに書いてもいいんですけど、わたしはわかりやすいようにこういう書き方をしていますにゃ。「いくつかの」って言っても、１個でもいいですし、場合によっては０個（中に何もにゃい）でも構いませんにゃ。ここでは、３つ（３行分）の命令をまとめて「main」と呼んでいますにゃ。コピー→貼り付けじゃにゃくてキーボードから入力する時は、「{」と「}」は「Shift」を押しにゃがら「Ｅｎｔｅｒ」の左隣のキー（「む」とその上のキー）を押すと出ますにゃ。
・「document.hyoji.h1.value="みなさん";」
「hyoji」という名前のフォーム（ＨＴＭＬの中で入出力をする場所）の中にある「h1」というもの（この場合はinput）の値を「みなさん」という文字列にするっていう意味ですにゃ。英語の「value」にはいろんな意味があるみたいですけど、ここでは「値」っていう意味で、数値だけじゃにゃくて文字列も含まれますにゃ。にゃんだか難しいことを言ってるみたいですけど、ようするに「h1のところに『みなさん』って書くんだよ」っていうだけの話ですにゃ。行の頭のスペースは、別ににゃくてもいいんですけど、わたしはわかりやすいようにこういう書き方をしていますにゃ。行の最後にある「;」は「セミコロン」という特殊文字ですにゃ。夏の終わりに死んだ蝉が地面に転がってるみたいな名前ですにゃ。これは、命令の終わりを表すもので、付けるのを忘れたり、間違えて「:（コロン）」を付けてしまったりすると、エラーになってしまいますにゃ。キーボードから入力する時は「Ｅｎｔｅｒ」のちょっと左の方にある「れ」を押すと出るんですけど、隣にある「:」と間違えやすいですにゃ。「"」は「ダブルクォート」または「ダブルクォーテーション」という特殊文字で、名前を覚える必要はにゃいんですけど、２つの「"」で囲まれた文字は「文字列」とみなされるってことだけは覚えてくださいにゃ。キーボードから入力する時は「Ｓｈｉｆｔ」を押しにゃがら「２・ふ」（テンキーの「２」は不可）を押すと出ますにゃ。
・「document.hyoji.h2.value="こんばんにゃ";」
書く場所と内容が変わっただけで、さっきとおなじですにゃ。
・「document.hyoji.text1.value="いっしょにがんばりましょにゃ♪";」
「text1」というもの（この場合はtexrarea）に…あとはさっきとおなじですにゃ。
・「空行のあと // -->」
これは、実はわたしもよくわかってにゃいんですけど、昔は「おなじＪａｖａＳｃｒｉｐｔでもブラウザによっては動作しにゃい」っていうことが、今よりもっと多くて、その時にこういう書き方をすると動作する場合があるって聞いたから、その頃の名残りで今でもそうしてるだけですにゃ。一種のおまじないみたいなもので、今でも効果があるのかどうか、わたしも知りませんにゃ。「// 」は、ＪａｖａＳｃｒｉｐｔの注釈文・注釈行を表現する方法のひとつで、おなじ行でこれより右にある文字は注釈文とみなされて無視されますにゃ。「/」は「スラッシュ」という特殊文字で、割り算をする時にも使いますから、この機会に覚えてくださいにゃ。キーボードから入力する時は、右下のほうにある「？・め」を押すと出ますにゃ。他に「/*」と「*/」で囲む書き方もあるんですけど、意味はおなじですにゃ。その後に「-->」がありますから、ＨＴＭＬの注釈行として表示されにゃい範囲はここで終わりで、この後に書かれた内容は表示されますにゃ。今のところ、ＪａｖａＳｃｒｉｐｔはこれで終わりですにゃ。
・「</script>」
スクリプト（この場合はＪａｖａＳｃｒｉｐｔ）はこれで終わりですっていう意味ですにゃ。
・「<form name="hyoji">」
ここから「hyoji」という名前のフォーム（入出力をするための場所）が始まるっていう意味ですにゃ。わたしは「hyoji（表示）」っていう名前を付けてますけど、入力もできますにゃ。
・「<input type=button name="st1" value="開始" onClick=main()>」
ここに「st1」という名前で「開始」と書いてあるボタンを設置して、それがクリックされたら関数「main」を呼び出して実行するっていう意味ですにゃ。このサイトが最初にパソコンの画面に表示される時、３ヶ所ある白い部分（inputとtextarea）は空白で、ボタンを押して関数「main」の中身が実行されると命令に従って文字が表示されますにゃ。名前は便宜上付けてるだけで、意味はありませんにゃ。「開始」の文字は、変更しても問題ありませんにゃ。最後の「main()」の「(」と「)」の間ににゃにか書くと、その内容が関数「main」に渡されるんですけど、ここでは特に必要にゃいから省略していますにゃ。行の頭にある空白は、画面を見やすくすためのものですにゃ。
・「<br>」
画面を見やすくするために改行していますにゃ。この後、おなじものが何回も出てくるんですけど、意味はおなじですから説明は省略しますにゃ。
・「<input type=text size=40 name="h1" value="">」
ここに「h1」という名前の「input type=text（１行だけの文字の入出力をするための場所）」を置いて、そのサイズを４０文字分にして、今のところ中には何も書かにゃいっていう意味ですにゃ。サイズは、その文字数の半角文字を入力できるだけの横幅にゃんですけど、おなじように書いてもブラウザによって変わってしまうことがあるから、あてになりませんにゃ。「value=""」の２つの「"」の間に何か書くと、その内容を最初から表示しますにゃ。今回のように「"」を２個続けると、その文字列は何もにゃいことになって、そういう文字列のことを「ヌルストリング」って言うんですけど、それは覚えにゃくても大丈夫ですにゃ。ＪａｖａＳｃｒｉｐｔの「function main()」の中で指示されている場所は、今のところ、ここを含む３ヶ所ですにゃ。
・「<input type=text size=40 name="h2" value="">」
さっきとおなじですから、説明は省略しますにゃ。これで、文字を表示する場所が２つになりましたにゃ。
・「<textarea cols=80 rows=10 name="text1">」「</textarea>」
ここに「text1」という名前の「textarea（複数行の入出力をするための場所）」を置いて、その横サイズを８０、縦サイズを１０にして、今のところ中には何も書かにゃいっていう意味ですにゃ。横サイズは半角文字の文字数、縦サイズは行数にゃんですけど、「input type=text」とおなじ理由で、あてになりませんにゃ。「input type=text」と違うところは、「</textarea>」と書いてタグを閉じる必要があるってことですにゃ。忘れると、その後の表示がおかしくなってしまいますにゃ。最初からにゃにか書きたい時は、２つのタグの間に書きますにゃ。
ここまでの説明で、にゃんとなく、わかったような気がしますかにゃ？ 今はわからにゃくても、そのうちわかるようになりますから、心配することはにゃにもありませんにゃ。いい機会ですから、簡単な計算プログラムを作って変数と足し算を覚えましょにゃ。「function main()」の中身を書き換えてくださいにゃ。青い文字が、今から書き加える部分で、赤い文字は元の文字から書き換える部分ですにゃ。それ以外の部分はおなじですから、説明は省略しますにゃ。書き換えたら、保存してアップロードして、見に行ってくださいにゃ。こういうものができていると思いますにゃ。
function main()
{
document.hyoji.h1.value="";
document.hyoji.h2.value="";
document.hyoji.text1.value="";
a=1;b=1;
ans=a+b;
c="『 "+a+" + "+b+" = "+ans+" です』";
document.hyoji.text1.value=c;
}
・「document.hyoji.h1.value="";」
「h1」の値を「何もにゃい」にするっていう意味ですにゃ。「何も書かにゃい」とおなじみたいですけど、ちょっと違いますにゃ。何もしにゃいわけじゃにゃくて「何もにゃい」を書く、つまり、既ににゃにか書いてある場合はそれを消すことになりますにゃ。この後の２行も意味はおなじですから説明は省略しますにゃ。
・「a=1;b=1;」
１行の中に２つの命令を書いていますにゃ。こんな感じで、「;（セミコロン）」を付けた後にまた他の命令を書くことができますにゃ。まず、最初の「a=1;」にゃんですけど、これは数学でいう「ａ＝１（ａと１は同値である）」とは全然違う意味ですから、ここを間違えにゃいようにしてくださいにゃ。これは、本当に大事なことですから、この機会に覚えてくださいにゃ。後で出てくるんですけど、数学でいう「ａ＝１」は、多くのプログラミング言語では「a==1」と書きますにゃ。話を元に戻して、ここで出て来た「a」というのは変数名ですにゃ。変数（へんすう）は、変な数じゃにゃくて「変わる数」っていう意味で、基本的には数値でも文字でもにゃんでも好きな値を入れることができますにゃ。
既に他の値が入っていた場合、変数の中身は新しい値に書き換えられて、元の値は消えてしまいますにゃ。この「新しい値を入れる」ことを「代入（だいにゅう）」といいますにゃ。「a=1;」は変数「a」の値として数値「1」を代入するっていう意味ですにゃ。あなたがこれからもプログラミングの勉強を続けていきたいとお考えなら、変数がわからにゃいとこの先どうにもなりませんから、この機会に覚えてくださいにゃ。ちなみに、一部のプログラミング言語では、変数を使う前に「こういう名前の変数を使うという宣言」をする場合があるんですけど、ＪａｖａＳｃｒｉｐｔの変数は宣言する必要がありませんにゃ。その後の「b=1;」は変数「b」の値として数値「1」を代入するっていう意味ですにゃ。さっきとおなじ説明にゃんですけど、これは本当に大事なことですから、省略しにゃいでもう１回書きましたにゃ。
・「ans=a+b;」
変数「a」の値とと変数「b」の値の足し算をして、その答の値を変数「ans」に代入するっていう意味ですにゃ。「ans」は英語の「answer」をわたしが勝手に省略して変数名として使ったもので、他の名前でも問題ありませんにゃ。このひとつの命令で足し算と代入の２つのことをやっていますにゃ。
・「c="『 "+a+" + "+b+" = "+ans+" です』";」
わかりやすくするために、半角スペースを入れていますにゃ。意味は、変数「c」に「『 」という文字列に変数aの値を足してそこに「 + 」という文字列を足してそこに…ってず〜っと続くんですけど、基本的には文字列と数値を一緒にした足し算をしてるだけですにゃ。ちょっと長いですから、順番にみていきますにゃ。最初の部分は「c="『 ";」と書くのと同じ意味で、もしこれで終わっていれば、変数cの値は「『 」という文字列ですにゃ。そこに、変数aの値を足すんですけど、変数aは文字列じゃにゃくて数値ですにゃ。このように、文字列に数値を足すという計算をすると、答は文字列になりますにゃ。具体的に言うと、元の文字列の末尾に文字列に変換された数字が追加されますにゃ。もしこれで終わっていれば、変数cの値は「『 1」になりますにゃ。そこに、文字列「 + 」を足しますにゃ。文字列同士の足し算は簡単で、元の文字列の末尾に新しい文字列が追加されるだけですにゃ。もしここで終わっていれば、文字列cの値は「『1 + 」になりますにゃ。そこに、変数bの値を足しますにゃ。あとはさっきとおなじで、文字列cの値は「『1 + 1」になりますにゃ。そこに、文字列「 = 」を足して、文字列cの値は「『 1 + 1 = 」になりますにゃ。そこに、変数ansの値を足しますにゃ。変数ansは変数aと変数bの値を足した結果ですから、その値は「2」で、追加される文字列も「2」ですにゃ。そこに、文字列「 です』」を足して、これで文字列cの最終的な値は「『 1 + 1 = 2 です』」になりますにゃ。
・「document.hyoji.text1.value=c;」
変数cの値、つまりこの足し算の式と答を「text1」に表示しますにゃ。
簡単な計算プログラムにゃんですけど、こうして文章にすると、にゃんか長くて難しそうな感じになっちゃいますにゃ。でも、難しいことはにゃにもありませんにゃ。にゃんだかんだ言ったところで、結局１＋１＝２っていうだけの話ですにゃ。お暇なら、プログラムの中の「a=1;」「b=1;」の数字をいろいろ変えて、遊んでみてくださいにゃ。
今までは、変数aとbの値をプログラムの中で決めていましたにゃ。でも、簡単な足し算の実験をするのに、そのたびにプログラムを書き換えるのは、ちょっと面倒ですにゃ。そこで、formから入力する方法を、ちょっとだけ見てみましょにゃ。さっきとおなじように、「function main()」の中身を書き換えてくださいにゃ。灰色の部分は消してくださいにゃ。それ以外の部分はおなじですから、説明は省略しますにゃ。ただし、今回は説明の都合上、間違いじゃにゃいけど困った結果になるプログラムを書いていただきますにゃ。書き換えたら、保存してアップロードして、見に行ってくださいにゃ。こういうものができていると思いますにゃ。
function main()
{
document.hyoji.h1.value="";
document.hyoji.h2.value="";
document.hyoji.text1.value="";
a=1;b=1;
a=document.hyoji.h1.value;
b=document.hyoji.h2.value;
ans=a+b;
c="『 "+a+" + "+b+" = "+ans+" です』";
document.hyoji.text1.value=c;
}
・「a=document.hyoji.h1.value;」
変数aにform「hyoji」の中にある「h1」という名前のものの値を代入するっていう意味ですにゃ。formは表示だけじゃにゃくて入力もできるっていうのは、こういうことですにゃ。難しそうに聞こえるかもしれませんけど、にゃにも難しいことはありませんにゃ。薄黄色のところの白い帯に、キーボードで文字（この場合は数字）を書き込むと、プログラム（function main()の中身）が実行された時に、それを読み込んで自動的に処理してくれるっていうだけの話ですにゃ。
・「b=document.hyoji.h2.value;」
変数bに「h2」の値を代入しますにゃ。あとは、さっきとおなじですにゃ。
ここで書き換えたのは２行だけにゃんですけど、これで足し算しかできにゃい超シンプルな電卓ができた…はずにゃんですけどにゃ。実際にやってみてくださいにゃ。白い帯の中に半角文字の数字を書き込んで、「開始」をクリックすると、さっきとおなじように式と答が表示されるんですけど、例えば上の帯（h1）に「1」、下の帯（h2）にも「1」を入力して計算してみると、にゃんだか昭和時代の小学生みたいな答が返ってきますにゃ。にゃんでこんなことになるのか…それは、formから入力された値は、見た目は数字でもプログラム内では文字列とみなされるからですにゃ。さっきも説明したんですけど、文字列＋文字列の足し算の答は、元の文字列の末尾に新しい文字列を追加したものになりますにゃ。つまり、このプログラムでは変数aと変数bの値は両方とも文字列で、変数aと変数bを足した答のansも文字列になってしまう、だから「１＋１＝１１」という間違いじゃにゃいけど困った結果が出るんですにゃ。
期待通りの結果を出してくれるプログラムは、こんな感じですにゃ。さっきのプログラムの３行目と４行目の「value」と「;」の間に「*1」を追加するだけですにゃ。「*」は「アスタリスクまたはアステリスク」という特殊文字で、おもに掛け算をする時に使いますにゃ。キーボードから入力する時は、「Ｓｈｉｆｔ」を押しにゃがら、「Ｅｎｔｅｒ」のちょっと左側にある「け」を押すと出ますにゃ。セミコロンの右隣ですにゃ。３×２は「3*2」って書きますにゃ。どちらか一方または両方が変数でも問題ありませんにゃ。この場合は「value*1」ですから、意味は「h1の値に１を掛ける」になるんですけど、普通の計算だと、ある数に１を掛けてもにゃにも変わりませんにゃ。でも、元の値が数字のように見える文字列の時、１を掛けることでその文字列を数値に変えることができるんですにゃ。文字列を数値化する方法は他にもあるんですけど、この講座では、なるべくわかりやすくするために、この方法を使いますにゃ。プログラムを書き換えてアップロードすると、こういうものができますにゃ。
function main()
{
a=document.hyoji.h1.value*1;
b=document.hyoji.h2.value*1;
ans=a+b;
c="『 "+a+" + "+b+" = "+ans+" です』";
document.hyoji.text1.value=c;
}
・「*1」
すでに説明した通り、本当の意味は「ある値に１を掛ける」で、ここでは文字列を数値化するために使っていますにゃ。
さっきのプログラムとおなじように、２つの帯に「半角文字の1」を入力して、「開始」をクリックしてみてくださいにゃ。期待通りの結果が表示されるはずですにゃ。この講座では扱いませんけど、ボタンをあと３個追加して、それぞれのボタンが「＋」「−」×」「÷」に対応するようなプログラムを作ると、それだけで「基本的な計算ができる電卓」が作れますにゃ。興味のある人は、ご自身で研究してみてくださいにゃ。ちなみに、どちらか一方または両方に「aやbなど数字ではにゃい文字」を入力すると、「NaN」と表示されますにゃ。これは、その値が「数値ではにゃい」っていう意味で、そのまま計算すると答も「NaN」になりますにゃ。
話が脱線したような気もしますけど、ＪａｖａＳｃｒｉｐｔのプログラミングの基本みたいなものが、ちょっとはおわかりいただけましたかにゃ？