第7回 場合分け

データの入力

人間がマウスやキーボードを操作してコンピュータに情報を伝えることを入力と呼びます。逆にコンピュータがディスプレイに文字や絵を表示したり、スピーカで音を鳴らしたりして人間に情報を伝えるのは出力です。なお、コンピュータの構造と入力・出力の関係については、第10回で勉強します。

文字列の入力

前回までは入力としてマウスをクリックするだけでしたが、今度はキーボードを使って文字を入力してみましょう。第2回でやったようにHTMLでテキスト入力欄を作り、JavaScriptでそこに入力された文字を読み取ることができます。

練習問題 07-1(☆)
  1. ファイルex07-1.htmlを次のように書きなさい。
  2. ファイルex07-1.jsを次のように書きなさい。
  3. テキスト入力欄に自分の名前を書いて、「あいさつ」ボタンをクリックしてみなさい。

利用者が入力したテキストをJavaScriptで読み書きするには、document.getElementById().valueを使います。前回のHTML要素を読み書きする場合とは、innerHTMLvalueになっている違いがあります。

innerHTML
HTMLファイルの中に書いてある要素の中身(開始タグと終了タグは含まない)を指します。
value
テキスト入力欄の場合は、利用者が入力したデータを指します。(ボタンやチェックボックスなど他の種類のinput要素にもvalue属性がありますが、それはちょっと違う意味になります)
練習問題 07-2(☆☆☆)

上の練習問題に、Helloに代わる挨拶の言葉を入力するためのテキスト入力欄を追加しなさい。例えば、言葉のところに「こんにちは」、誰のところに「花子」と入力してボタンを押すと「こんにちは, 花子!」と表示し、言葉のところに「よう」、誰のところに「太郎」と入力してボタンを押すと「よう, 太郎!」と表示されるようにしなさい。

数値の入力

テキスト入力欄のデータは、たとえ数字であっても文字列型になります。それを足したり引いたりする時は、第5回でやった Number() を使って、まず数値に変換しないといけません。

練習問題 07-3(☆☆)
  1. ファイルex07-3.htmlを次のように書きなさい。
  2. ファイルex07-3.jsを次のように書きなさい。
  3. テキスト入力欄に適当な数字を入れて、「計算」ボタンを押してみなさい。
  4. 数値の足し算になるようにプログラムを修正しなさい。
練習問題 07-4(☆☆☆☆)

身長と体重を入力するとボディマス指数を計算して表示するプログラムを作りなさい。

if文と条件式

if文の書き方

プログラムは原則として上から順に実行されていきますが、途中で二種類の命令を書いておいて、その時の状況によってどちらかを実行することもできます。これを場合分けあるいは条件分岐と呼び、JavaScriptではif文を使って書き表します。

練習問題 07-5(☆)
  1. ファイルex07-5.htmlを次のように書きなさい。
  2. ファイルex07-5.jsを次のように書きなさい。(2行目のイコールは二つ並んでいることに注意。)
  3. テキスト入力欄に正しい答えを書いて「解答」ボタンを押してみなさい。次に間違った答を書いて「解答」ボタンを押してみなさい。

if文には次の二種類の書き方があります。

  • 指定した条件が成り立つ時は「これ」をやって、そうでなければ何もしない。
  • 指定した条件が成り立つ時は「これ」をやって、そうでなければ「あれ」をやる。

それぞれ次のように書きます。

  • if ( 条件 ) { 処理 }
  • if ( 条件 ) { 処理1 } else { 処理2 }
練習問題 07-6(☆☆)

上の練習問題では間違った時に何も表示されないので、elseを使って、間違った時には「はずれ」と表示されるようにしなさい。

比較演算子

値が等しいかどうかや、どちらが大きいかということも、足し算や引き算と同じように演算として扱います。足し算の’+‘や引き算の’-‘を演算子と呼びますが、比較の場合には’==‘や’<‘が演算子になります。

二つの式の間に比較演算子を書くと、左右の値の比較を行って、結果を返します(参考資料を参照)。比較の結果は真偽値という型で、trueかfalseかのどちらかになります。

練習問題 07-7(☆☆)
  1. コンソールで次の式を計算してみなさい。
    • 2==2
    • 2==3
    • 2!=2
    • 2!=3
    • 2<2
    • 2<=2
    • 2<=3
    • '2'==2
    • '2'===2
  2. 練習問題07-6のプログラムを修正し、条件式のところは「等しくない」比較にし、「あたり」と「はずれ」の表示を入れ換えなさい。

等しいかどうかの演算子がイコール2個なのは、イコール1個だと代入になってしまうからです。

if文の条件のところには、普通は真偽値型の(値がtrueかfalseになる)式を書きます。しかし、それ以外の式を書いてもよくて、その場合は適当に真偽値へ変換されます。代入も式として書けるので、比較のつもりでうっかりイコール1個にすると、代入が実行されます。エラーは表示されないのですが、だいたい訳の分からない動きになります。

練習問題 07-8(☆☆☆)
  1. ファイルex07-8.htmlを次のように書きなさい。
  2. ファイルex07-8.jsを次のように書きなさい。
  3. テキスト入力欄に適当な文字列(間違った答)を入力して「解答」ボタンをクリックし、「あたり」が出るか「はずれ」が出るか確認しなさい。
  4. テキスト入力欄に書いた文字列が「夢」(正しい答)に書き換わりますが、なぜこのような動きになるか説明しなさい。
  5. ex07-8.jsを修正し、「夢」と入力した時だけ「あたり」、それ以外は「はずれ」となるようにしなさい。

複雑な比較

なぞなぞの答として、漢字の「夢」だけでなくひらがなの「ゆめ」でも正解になるようにしましょう。

そのためには、入力した文字列、「夢」という文字列、「ゆめ」という文字列の三つを比較しなければなりませんが、比較演算子は一度に二つしか比較できません。三つを比較する方法はいくつかありますが、まずif文を二つ組み合わせる方法でやってみます。

練習問題 07-9(☆☆☆)
  1. 紙に鉛筆で次の図を(箱と箱の間の隙間を大きく)描き、条件のところには「入力した文字列と’夢’が等しい」、処理1のところには「あたりと表示」と書きなさい。
  2. 処理2は「入力した文字列と’夢’が等しくない場合」ですが、’ゆめ’と等しいかもしれないのではずれとは限りません。処理2の箱を消しゴムで消して、代わりにif文の図形(条件、処理1、処理2を矢印で結んだもの)を書きなさい。この部分の条件’、処理1’、処理2’にはそれぞれ何と書けばよいでしょうか?
  3. なぞなぞのプログラムを、今描いた図に対応するよう修正しなさい。
    • document.getElementById('answer').valueを2回書くのは長いし面倒なので、最初に変数に代入すると短く書けます。
    • if文で入力した文字列と「夢」を比較し、違った場合(elseの後)にもう一つif文を書いて「ゆめ」と比較します。

if文の「処理」のところに書く { } は、処理の中身が文1個の時は省略できます(と言うか、本来は文1個しか書けないので、文が2個以上の時は { } で囲んで一つの複合文にしています)。

else の後に別の条件分岐をするif文を書くことはよくあります。その場合はif文が1個の文なので { } を書かず、次のような形式で書くのが普通です。

    if (条件1) {
       処理1
    } else if (条件2) {
       処理2
    } else if (条件3) {
       処理3
    } .....
       .....
    } else {
       処理n
    }
  
練習問題 07-10(☆☆☆☆)

練習問題07-4のボディマス指数を計算するプログラムを、指数だけでなく18.5未満は「低体重」、18.5以上25未満は「普通」、25以上は「肥満」と表示するように変更しなさい。

  • ひとつ目のif文では18.5未満かどうかで分けます。
  • 18.5以上の場合は、ふたつ目のif文で25未満かどうかで分けます。

論理演算子

三つのものを比較する別の方法は、二つずつの比較を「かつ」や「または」で組み合わせる方法です。

この考え方は論理学が基になっています。論理学はプログラミングだけでなく、あらゆる学問の基礎です。

(PPTX版ダウンロード)

JavaScriptで真偽値を組み合わせる論理演算子には、&&(〜かつ〜)、||(〜または〜)、!(〜でない)があります(参考資料参照)。

練習問題 07-11(☆☆)
  1. 次の条件を表す式を書きなさい。
    • xが1以上で10未満。
    • xは’夢’か’ゆめ’のどちらかと等しい。
  2. なぞなぞのプログラムを修正し、if文一つだけで「夢」でも「ゆめ」でも正解になるようにしなさい。

練習問題 07-12(☆☆☆☆☆)

下の参考資料を見て、西暦年を入力して閏年か平年かを表示するプログラムを作りなさい。

チェックポイント
  • document.getElementById().innerHTMLdocument.getElementById().value の違いは何でしょうか?
  • if文の二種類の書き方は何と何でしょうか?
  • 等しいかどうか比較する演算子は何でしょうか?
  • 比較演算子の計算結果は何になるでしょうか?
  • 三つのデータを比較するにはどんな方法があるでしょうか?