第3回では、変数とfunction(関数)を使ったJavaScriptを覚えました。変数は何かを入れて名前を付けておけるマッチ箱のようなもの、関数は入り口から何かを入れると、出口から処理した結果が出てくるようなイメージでしたね。前回の課題の答えから見てみましょう。課題は、「足し算ができる関数」を使ったJavaScriptにチャレンジしてみてください。それができたら、変数や関数を使って、かけ算や割り算、入力された文字をつなげるなど、さまざまな関数を作って実験してください」ということでした。「足し算ができる関数」を使ったJavaScriptはこうなります。tasizanというのが足し算を行う関数です。c=Number(a)+Number(b);」がポイントです。「a+b」のままだと、例えば「123」と「456」を足そうとすると、「123456」のようになってしまいます。これはフォームに入力した「123」と「456」が文字として扱われてしまったためです(文字を足し算しようとするとつながって表示してしまうのは第1回でやりましたね)。文字を数字としてJavaScriptに計算させるために「Number(★)」を使います。「Number(★)」というのは★部分の文字を数字に変える関数です。この関数は自分で作らなくてもJavaScriptに最初から用意されています。「Numberなんてやってないから知らない!」という声が聞こえてきそうです。意地悪だったでしょうか......。Number関数を使わなくても文字を数字に変えることができます。c=(a/1)+(b/1);などという書き方をすることで、文字を数字として計算することができるようになります。Number関数以外にも文字を数字に変える「parseInt(★)」、「parseFloat(★)」という関数を使うことができます。「parseInt(★)」は★部分の文字を整数にします。小数を含む数字を扱うには「parseFloat(★)」を使います。課題がクリアできなかった人も気を取り直して、今回は条件によって動作を変えるJavaScriptをやってみましょう。人の場合で考えると、踏切を渡るときに「遮断機が降りていたら止まる」「遮断機が降りていなかったら進む」というように、「もし○○が▲▲だったら〜」という判断をJavaScriptにさせることができます。これをJavaScript風に書いてみましょう。{進む;}「そうじゃなかったら」というのは、「遮断機が降りていたら」という条件に当てはまらなかった場合、つまり「遮断機が降りていなかったら」ということになります。方法はあると思いますが、ここでは分かりやすく変数を使って表現してみます。変数「shadanki」の値が「1」だったら「遮断機は降りている」状態、それ以外だったら「遮断機は降りていない」状態とします。JavaScriptで書いてみましょう。テキストエディタを起動して、次のサンプルをコピー&ペーストして、「javascript4.html」などの名前を付けて保存してください。</body></html>Webブラウザで開くと、このような画面が出ていると思います。Explorerでは、PC上のJavaScriptを動かそうとするとセキュリティー警告が出ます。情報バーをクリックして、「ブロックされているコンテンツを許可」を選ぶとJavaScriptが実行されます。フォームに「0」を入力して「判断」ボタンを押してください。「進む」が表示されたでしょうか。次は、フォームに「1」を入力して「判断」ボタンを押してください。今度は「止まる」が表示されたでしょうか。サンプルを理解してみるサンプルをもう少し詳しく見てみましょう。3行目の<script>タグや、HTMLのタグについては説明を省きます(もし使い方が分からなかったら第1〜3回を復習してくださいね)。handan(shadanki){せっかくなので、前回覚えた「関数(function)」を使ってみましょう。ここでは、「handan」という名前の関数を作って、「入り口の変数(引数)」に「shadanki」という名前を付けます。1){ここで条件を判断しています。さっき、JavaScript風に書いた条件の「もし(遮断機が降りていたら){」という部分を思い出してください。「もし」はJavaScriptで書くと「if」になります。この「if」を使って条件を判断する文を「if文」と言います。if文では「if(★)」のようにカッコの中に判断するための条件を書きます。先ほど、変数「shadanki」の値が「1」だったら「遮断機は降りている状態」としましたね。この「==」は、プログラムの世界では「関係演算子」や「比較演算子」と呼ばれています。「演算子」なんて難しい言葉は覚えなくても大丈夫です。1」を日本語に訳すとすれば「shadankiが1」になります。「==」は「○○が▲▲」というときに使う「が」にあたる記号です。行の最後の「{」は7行目の「}」とセットになっていて、条件が当てはまったとき、ここでは「shadankiが1」のときに実行するJavaScriptを囲むのに使います。"止まる";新しいJavaScriptですね!しかし、詳しく説明しようとすると、軽く連載3回分ぐらいはかかってしまうのですが、すごく便利なJavaScriptなので、とりあえず細かいことは抜きに、使い方だけ覚えてしまいましょう。「document.getElementById("★").innerHTML」は、★部分の名前(id)のタグの中身(HTML)を書き換えてしまうという、すごいJavaScriptです。ここでは、「kekka」という名前(id)を持ったタグの中身を「止まる」に書き換えようとしています。書き換えの犠牲となる「kekka」は14行目にありますね。ここはまたあとで説明します。{最初の「}」はさっき説明したように、5行目のif文の最後の「{」とセットで、if文の条件があっていたときに実行するJavaScriptを囲んでいます。「else」は「そのほか」という意味ですが、if文と組み合わせて「if文の条件に合わなかったとき」、つまり「そうじゃなかったら」という処理をさせたいとき「else」を使います。if文の条件に合わなかったときに、特に何もさせたくない場合は書かないでも構いません。ここでは、「shadankiが1じゃないとき」ということになります。最後の「{」から9行目の「}」までが「shadankiが1じゃないとき」に実行されるJavaScriptになります。"進む";「shadankiが1じゃない=遮断機が降りていない」ときにこの8行目が実行されます。「kekka」という名前(id)を持ったタグの中身を「進む」に書き換えようとしています。id="num">「num」という名前(id)を持ったテキストフィールドを作っています。onclick="handan(num.value)">ボタンを作って、ボタンの表示を「判断」にしました。イベント「onclick」で、ボタンがクリックされたら関数「handan」を呼び出しています。関数「handan」を呼び出すときに、関数の入り口に「num.value」で、さっき作ったテキストフィールド「num」の値を渡しています(関数の使い方が分からなくなってしまったら、連載第3回を読んで思い出してくださいね)。最初は「ここに判断結果を表示します」と書いてありますが、関数「handan」が呼び出されると、ここの中身は書き換えられてしまう運命です。次は試しに、フォームに「2」を入力して「判断」ボタンを押してください。「進む」になってしまいました。「shadankiが1」じゃないときは「遮断機は降りていない」と判断されるからですね。今度は条件を変えてみましょう。さっきは、「shadankiが1」のときは「遮断機は降りている」という条件でしたが、これを「shadankiが0」じゃないときは「遮断機は降りている」という条件にしてみましょう。0」と書き換えました。この「!=」は、「shadankiが0じゃない」という意味で、「==」の反対の意味です。さっきは、「shadankiが1」のときは遮断機が降りているので「止まる」という条件でした。今度は逆に、「shadankiが0じゃない」ときは遮断機が降りているので「止まる」という条件になっています。ややこしいですね......。フォームに「0」を入力して「判断」ボタンを押してください。「shadankiが0じゃない」じゃないので(ややこしいですがつまり0なので)、else部分が実行されます。1」のときは「止まる」という動作は同じになります。フォームに「2」を入力して「判断」ボタンを押してください。答えは「止まる」ですね。メールマガジンをご購読ください。申し込みページへITmediaはアイティメディア株式会社の登録商標です。