Sc283(1); Part 3

コンピュータにさせる仕事は，基本的には情報処理 (≒計算) である．その手順には，いくつかの典型的なパターンがある．最も単純なものは，いくつかの作業を順に実行していくものである．このような処理は 順次処理 (あるいは 逐次処理) と呼ばれる．典型的な例としては，入力 - 計算 - 出力を順に行なうものがある．この入力 - 計算 - 出力のパターンは，例えば料理になぞらえるとわかりやすい．

Part 2. のタスク「BMIプログラム」の仕事手順を図式的に表わすと，おおむね下のようになる． (なお，このような図式は流れ図(フローチャート)と呼ばれる)

このように「BMIプログラム」では，全体が大きく入力 - 計算 - 出力の順次処理のパターンになっており，また，入力部分のように，部分が更に（代入などのステートメントの）順次処理となることもある．

ブロック

JavaScript においては，単にステートメントを並べれば，並べた順に実行されるので，順次処理を表す特別な表現はないが，複数のステートメントを { と } でくくって一つにまとめる表現はあり，それが順次処理を表す表現だと言えなくもない．このような表現を，ブロック と呼ぶ．厳密に言えば，ブロックもまた一つのステートメントである．つまり，ステートメントが「入れ子」になる．

先の「BMIプログラム」は，このブロックを用いて以下のように書いても差し支えない． (通常はこのような書き方はしないが)

<!DOCTYPE html>
<title>JavaScript Sample 2-2 (modified)</title>
<body>
<script type="text/javascript">
<!--
// 変数の宣言
var height, weight, bmi;

{
  { // 入力
    height = Number(prompt("身長をcmで入力してください．"));
    weight = Number(prompt("体重をkgで入力してください．"));
  }

  { // 計算
    bmi = 10000 * weight / (height * height);
  }

  { // 出力
    alert("BMI は " + bmi + " です．");
  }
}
// -->
</script>
</body>

[タスク] 標準体重プログラム (1)

概要

身長と体重を入力し，標準体重と肥満度を計算するプログラムを作成する．

なお，身長(cm)に対して，標準体重(kg)は以下の式で表わされるものとする．

方法

WZ Editor で，適切なプログラムを考えて作成し， マイドキュメント の sc283 の下に js03-1.html という名前で保存する．

入力には prompt(…); を，出力には document.writeln(…); を用いる．変数は，内容を表すような名前を付けるとわかりやすいので，下表のように名づけるものとする

変数名	内容
`height`	身長 (cm)
`weight`	体重 (kg)
`standard`	標準体重 (kg)
`factor`	肥満度 (%)

<!DOCTYPE html>
<title>JavaScript Sample 3-1</title>
<body>
<script type="text/javascript">
<!--
// 変数の宣言
var height, weight, standard, factor;

// 入力
//   prompt(…) を2回使って身長と体重を入力させ，
//   変数 height, weight に代入する．
//   prompt(…) の値は文字列なので，Number関数で数値に変換する方が無難．

// 計算
//   変数 height, weight に入っている身長と体重から標準体重と肥満度を計算し，
//   結果をそれぞれ変数 standard, factor に代入する．

//出力
//   変数 standard, factor に入っている標準体重と肥満度を，
//   document.writeln(…); を用いてページに表示する．
// -->
</script>
</body>

備考

例を以下に示す．リンクをクリックすれば実行できる．(別ウィンドウで実行される)

[解説] 仕事手順の典型的パターン（その2: 分岐処理）

プログラムが行なう仕事において，場合分けの必要がある時など，状況に応じて異なる処理をしたい場合がある．このような処理は，状況によって処理が枝分かれすることから 分岐処理 と呼ばれる．複数ある処理のうちの一つを選ぶことより 選択処理 と呼ばれることもある．

JavaScript では，この分岐処理のためのステートメントとして， if ステートメントと switch ステートメントが用意されている．他に，条件演算子 (? :) というものもある．これは，論理式 ? 式 1 : 式 2 のように書かれる3項の演算子で，論理式の値に応じて式 1 と式 2 のいずれか (論理式が真 (true) であれば式 1，偽 (false) であれば式 2) の値を全体の値とする． (参考：条件演算子 in とほほのJavaScriptリファレンス)

通常は，プログラム全体の構造というよりも，計算部分の中などで部分的に現われることが多い．

if ステートメント

if ステートメントは，真 (true) か偽 (false) を値として取るような式を計算し，その値によって実行する処理を変えるものである． JavaScript に限らず，多くのプログラミング言語に取り入れられている．言語によって構文が多少異なるが，JavaScript は C言語と同様の書き方になっている．

JavaScript の if ステートメントの基本的な書き方は以下の通りである．

if (論理式) trueパート else falseパート

このうち，論理式は，値として真理値 (true か false)を取る式で， trueパートと falseパートは各々単一のステートメントである（ブロックでもよい）．

この if ステートメントが実行される時は，まず論理式が計算され，その結果が真 (true) であれば trueパートが，偽 (false) であれば falseパートが実行される．右に流れ図を示す．

なお，途中で改行しても構わないので，以下のように書いても意味は変わらない．

if (論理式) trueパート
else falseパート

else 以降の部分は省略される場合もある．この場合，書き方は以下のようになる．また，流れ図を右に示す．

if (論理式) trueパート

さらに，より複雑な形として，falseパートを if ステートメントにすることで，if ステートメントの入れ子を構成することもできる．この場合，書き方は一般的には以下のようになる．

if (論理式 1) パート 1
else if (論理式 2) パート 2
～
else if (論理式 n) パート n
else パート n+1

なお，trueパートや falseパート等のパートは，ブロックを用いて複数のステートメントをまとめることが多い．先に述べた通り，プログラム中の空白や改行は比較的自由に入れることができるので，見やすくするために，例えば以下のような，インデンテーション (字下げ) を用いた書き方をすることも多い．

/* 単一のifステートメントの場合 */
if (論理式) {
    trueパートの複数ステートメント
        ～
} else {
    falseパートの複数ステートメント
        ～
}

/* ifステートメントの入れ子の場合 */
if (論理式 1)  {
    パート 1の複数ステートメント
       ～
} else if (論理式 2)  {
    パート 2の複数ステートメント
       ～
  ⋮
} else if (論理式 n)  {
    パート nの複数ステートメント
       ～
} else {
    パート n+1の複数ステートメント
       ～
}

例）（コード部分のみを示す．→ ファイルの全体と流れ図）
  if (signal == "R") {
      document.writeln("<p>止まれ</p>");
  } else if (signal == "B") {
      document.writeln("<p>進め</p>");
  } else if (signal == "Y") {
      document.writeln("<p>注意</p>");
  } else {
      document.writeln("<p>故障</p>");
  }

switch ステートメント

(論理式に限らない) 通常の式の値に応じて，複数の選択肢から一つを選んで実行する形式のステートメントもある． JavaScript の switch ステートメントはそのような多重分岐のステートメントで， C言語のものと同様の書き方になっている．

JavaScript の switch ステートメントの基本的な書き方と流れ図を下に示す．

switch (式) {
case 値 1: パート 1
case 値 2: パート 2
～
case 値 n: パート n
default: パート n+1
}

このうちのパート 1 ～パート n+1 は， if ステートメントとは異なり，各々複数のステートメントを ({ と } でくくらずに) 並べたものである「case 値:」も含めて， switch の { … } 全体を一つのブロックとみなすこともできる．．また各値 i は，本来は適当な値を取る式であるが，一般的には 定数値 を用いることが多く，また，処理系によっては定数値以外では誤動作を起こすことがあるので，定数値を用いる習慣にしておく方がよい．

流れ図からわかるように，式を計算した値が値 i に一致した場合，パート i ～パート n+1 が，この順に全て実行されることになる．これでは不便な場合が多いので，switch ステートメントを脱出する break ステートメント (break;) を各パートの末尾につけて，以下のように書くことが多い． (各パートの直前で改行して字下げしてある．右に流れ図を示す)

switch (式) {
case 値 1:
    パート 1
    break;
case 値 2:
    パート 2
    break;
～
case 値 n:
    パート n
    break;
default:
    パート n+1
}

例）（コード部分のみを示す．→ ファイルの全体と流れ図）
  switch (signal) {
  case "R":
      document.writeln("<p>止まれ</p>");
      break;
  case "B":
      document.writeln("<p>進め</p>");
      break;
  case "Y":
      document.writeln("<p>注意</p>");
      break;
  default:
      document.writeln("<p>故障</p>");
  }

[タスク] 最大値プログラム (1)

概要

2つの数値 x, y を入力し，その中の最大の値を答えるプログラム．

方法

WZ Editor で，適切なプログラムを考えて作成し， マイドキュメント の sc283 の下に js03-2.html という名前で保存する．

<!DOCTYPE html>
<title>JavaScript Sample 3-2</title>
<body>
<pre><script type="text/javascript">
<!--
// 変数の宣言
var x, y, m;

// 入力
x = Number(prompt("x = ?")); // 正しい比較(数値としての比較)ができるように
y = Number(prompt("y = ?")); // 入力データを陽に数値に変換しておく．

// 計算
//   ここは自分で考えよう．流れ図も考えてみよう．
//   x と y のどちらが大きいかを表す論理式を作ってifと組み合わせ，
//   大きい(小さくない)方を m に代入する．

// 出力
document.writeln(x + " と " + y + " の大きいほうは");
document.writeln(m + " です．");

// -->
</script></pre>
</body>

備考

比較演算子（>や<など）は，数値に対しては通常の大小関係，文字列に対しては辞書順の順序関係辞書順の順序関係では，まず1文字目を比較して大小(文字コードの大小≒アルファベット順/50音順)を定め， 1文字目が同じ文字で大小が決められないときには2文字目，2文字目まで共通なら3文字目，というように，最初の異なる文字で大小(文字コードの大小≒アルファベット順/50音順)を定める．を表す．したがって，11 < 100 と "11" > "100" は共に正しい． prompt(…) で入力されるデータは文字列なので，このプログラムでは，正しい比較(数値としての比較)ができるように，入力データを Number(…) を使って陽に数値に変換してから比較する．

また，表示を簡略化するために，<script …> ～ </script> の外側に <pre> ～ </pre> を置いているので注意すること．（上のコードの下線部，参考）

例を以下に示す．リンクをクリックすれば実行できる．（別ウィンドウで実行される）

※ 余裕があれば，3つの数値 x, y, z （あるいは，4つ以上の数値）の最大値を答えるプログラムも考えてみよう．
ヒント： if ステートメントを2つ(または3つ)組み合わせればできるはず．（組み合わせ方はいくつかある）（参考）

[タスク] 序数プログラム

概要

1～20 の自然数を入力し，その数に対応する序数を表わす，英語の略記表現を返すプログラム．
たとえば：

1　→　1st (first の略記)
2　→　2nd (second の略記)
3　→　3rd (third の略記)
4　→　4th (fourth の略記)

なお，（半角の）1～20の自然数以外の入力はないものと考えてよい．

方法

WZ Editor で，適切なプログラムを考えて作成し， マイドキュメント の sc283 の下に js03-3.html という名前で保存する．

<!DOCTYPE html>
<title>JavaScript Sample 3-3</title>
<body>
<pre><script type="text/javascript">
<!--
// 変数の宣言
var n, ord;     // n:   入力した自然数，
                // ord: 出力する文字列（n を序数に直したもの）
// 入力
n = prompt("n = ?");    // n は文字列

// 計算
//   ここは自分で考えよう．流れ図も考えてみよう．
//   if や switch を使って，n の値に応じて場合分けし，
//   出力する文字列を ord に代入する．

// 出力
document.writeln(n + " の序数の表記は " + ord + " です．");

// -->
</script></pre>
</body>

備考

先のタスクと同様に，表示を簡略化するために，<script …> ～ </script> の外側に <pre> ～ </pre> を置いている．（参考）

例を以下に示す．リンクをクリックすれば実行できる．(別ウィンドウで実行される)

※ 余裕があれば，（半角の）1～20の自然数以外に対してエラーメッセージを出すような処理を考えてみよう．

[課題] 分岐処理

概要

方法

報告について

Moodle の各々の課題ページからファイルを提出すること．ファイル名は各々指定どおり (task03-1.html, task03-2.html) とし，すべて半角文字とすること．

課題番号：	3-1，3-2
課題名：	分岐処理
ファイル名：	task03-1.html, task03-2.html

Sc283(1) 情報科学応用演習I 資料 (Part 3)

[解説] 仕事手順の典型的パターン（その1: 順次処理）