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

[解説] リテラル・定数

プログラム中の決まった値は，リテラル表現で与える．

例

整数値： 123　-273　など
実数値： 3.14　-9.99　など
文字列： "abc"　'123'　などのように "" や '' で括って表わす．

また，特殊な値など，特定の値に名前をつけたものもあり，これらは定数と呼ばれる．

例

真理値： true (真)， false (偽)
特殊な値： undefined (未定義)， NaN (非数)， Infinity (無限大)

(→ 数値・文字列・定数 by とほほ)

[解説] 式と計算

JavaScript においては，各種の演算子・関数・定数が用意されており． 先述のリテラル・定数や後述の変数と組み合わせて さまざまな計算を記述することができる．そのような記述を式と呼ぶ． 以下でその式の定義と，演算子・関数・定数の主なものを紹介する．

式の定義

JavaScript の式は，おおよそ以下のように定義することができる．

  1. リテラルや定数は式である．
  2. 式と演算子を組み合わせたものもまた式である．
  3. 式に関数 （ビルトイン関数，Math関数など） を適用したものも式である 関数と同じように，メソッドの呼び出しも式になりうるが， ここでは触れずにおく．．

2., 3. より，式は「入れ子」の構造（式の中にまた式があるような構造）を持つことがわかる． たとえば，前節のリテラル・定数の例は，すべて式ともみなすことができ， -273 や 123 は式でもあるが，それらを演算子と組み合わせた -273*123 もまた式である．

各種演算子

JavaScript であらかじめ用意されている演算子の多くはC言語のものと共通している． 通常の算術演算子の他に，比較演算子，論理演算子などがある． 代表的なものを下表に示す．

演算子値の型 意味
算術演算子
数 + 数 数加算．
数 - 数 数減算．
数 * 数 数乗算．
数 / 数 数除算．
数 % 数 数剰余 (除算の余り)．
-数 数符号の反転．
比較演算子
値 == 値 真理値等価性 「等しい」．
値 != 値 真理値非等価性 「等しくない」．
数 > 数 真理値不等号 「大なり」．
数 >= 数 真理値不等号 「大なりイコール」．
数 < 数 真理値不等号 「小なり」．
数 <= 数 真理値不等号 「小なりイコール」．
論理演算子
真理値 && 真理値  真理値論理積 「かつ」．
真理値 || 真理値  真理値論理和 「または」．
!真理値 真理値否定 「でない」．
条件演算子
真理値 ? 値1 : 値2  真理値条件（場合分け）
「もし〜ならば〜そうでなければ〜」．
文字列演算子
文字列 + 文字列  文字列連結．

演算子には優先順位があり，たとえば (一般の数式と同じく) 乗除算は加減算より優先されるし， 大概，論理演算子より比較演算子，比較演算子より算術演算子が優先される． 括弧を使えば，優先順位に関係なく計算の順序を決められるので， 紛らわしい場合には括弧をつけることを勧める．

なお，+ 演算子は，算術加算と文字列連結の両方に用いられるが， 数値と文字列で演算した場合は，数値を文字列に変換してから文字列連結が行われる．したがって， "abc"+123 は "abc"+String(123) （関数 String(…) は次項の「ビルトイン関数」を参照） と等価で，演算結果は文字列 "abc123" となる．

演算子 (in とほほのJavaScriptリファレンス) の項も参考にされたい．

ビルトイン関数

JavaScript にはいくつかのあらかじめ組み込まれている関数 (ビルトイン関数) がある．以下にそのいくつかを紹介する．

関数値の型意味
Number(値) 数  引数の値 を数値に変換する．変換に失敗した時は NaN という特別な値を返す．
String(値) 文字列  引数の値 を文字列に変換する．
isNaN(値) 真理値  引数が数値であるか，または数値に変換できる場合は 偽 (false)， そうでないときは 真 (true) を返す．
eval(文字列) 値  引数の文字列をJavaScript のコードとみなして実行する． 文字列が式の場合，実行した結果の値を返す．

なお，ビルトイン関数 (in とほほのJavaScriptリファレンス) も参考にされたい．

Math パッケージ

ビルトイン関数の他にも，いくつかの数学的な関数や定数が JavaScript の標準的な機能として提供されている．

これらの関数と定数は，Math と名付けられたパッケージに含まれており， 名前の前に Math. をつけて呼び出す 厳密には「パッケージ」ではなく「オブジェクト」であるが， この Math は名前空間としての役割が主であるので， ここでは「パッケージ」と呼んでおく．． 以下に代表的なものを示す．

関数・定数値の型意味
Math.random() 数 0以上1未満の乱数 (実数値) を返す．
Math.ceil(数) 数 数 の小数第1位を切り上げた値を返す．
Math.floor(数) 数 数 の小数第1位を切り捨てた値を返す．
Math.round(数) 数 数 の小数第1位を丸めた (四捨五入した) 値を返す．
Math.abs(数) 数 数 の絶対値を返す．
Math.max(数,数) 数 引数のうちの大きい方 (小さくない方) を返す．
Math.min(数,数) 数 引数のうちの小さい方 (大きくない方) を返す．
Math.sqrt(数) 数 数 の平方根を返す．
Math.PI 数 円周率 (π = 3.141592653589793)．

その他，三角関数，指数関数，対数関数などの初等関数もある． 詳細は 数学関数 (Math) (in とほほのJavaScriptリファレンス) 等を参照されたい．

式の役割

JavaScript のプログラム中では，式は，値を必要とするような計算のために用いられる． JavaScript のステートメント（命令）の多くには値を必要とする部分があり， 式は，そのような場所で値を表すものとして記述される．

たとえば，Part 1 の Hello world プログラム で出てきたステートメント（命令） document.writeln("<p>Hello world.</p>"); のうち，"<p>Hello world.</p>" の部分が式である．（→ 参考「ドキュメント出力」）

[タスク] 種々の計算

概要

Firebug のコンソールを使用して，各種の演算子や関数を用いたさまざまな式を計算するとともに， Firebug の使用法に慣れる．

手順

  1. 右下のFirebugアイコンか F12 キーで Firebug を起動し，左上で「コンソール」を選ぶ． このとき「コンソール パネルは無効化されています」と表示される場合， 「コンソール」の右の小さな▼をクリックして， メニューから「有効」を選ぶ．
  2. Firebug のエリアが左右に分かれている場合，右下の 赤いアイコン をクリックする．
  3. 最下段の >>> の右に，下記の数式を1行ずつ入力し，結果を確認する． (結果を予想してから実行すること） 
    123
123+123
1+2*3
1+(2*3)
(1+2)*3
365/7
365%7
Math.floor(365/7)
Math.ceil(365/7)
1+1>=2
1+1>2
!(1+1>2)
1+1>=2 && 1+1>2
1+1>=2 || 1+1>2
10*10*Math.PI
Math.sqrt(2)
  4. 以下のものも試してみよ．(やはり結果を予想してから実行すること) 
    123+123
"123"+"123"
123+"123"
Number("123")+Number("123")
String(123)+String(123)
  5. 終了時には，Firebug の右上の 閉じる をクリックして， Firebug を閉じる．

[解説] ドキュメント出力 （document.write(…) 等）

計算した結果をなどを HTML ドキュメントの一部として出力する場合， document オブジェクトの write メソッドまたは writeln メソッドを用いたステートメントを記述する document オブジェクトは，JavaScript において文書全体を現すデータであり， メソッドとは，オブジェクトに働きかけて一定の仕事をするものである． 詳細は後述する．． 具体的には document.write(式); や document.writeln(式); のように書く． この場合，式 の部分が文字列として出力される．

例

document.writeln("<p>標準体重は" + standard + "kgです．</p>");

(→ document.write() by とほほ)

write と writeln の違いは， 出力後に改行するかどうかの違いである．前者は改行しないが，後者は改行する． （HTML 文書では，特別な場合を除き，改行は空白と同じ扱いを受けるので， 見かけ上，write と writeln の違いははっきりしないが， <pre>〜</pre> の間のように改行が意味を持つ場合は， その違いが現れる．下の例を参照．）

例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<title>Output as a Document</title>
<script type="text/javascript">
<!--
document.writeln("<pre>ドキュメント出力の例");
document.write("2 の平方根 = ");
document.writeln(Math.sqrt(2));
document.writeln("</pre>");
// -->
</script>

これは，下と（ほぼ）等価である．

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<title>Output as a Document</title>
<pre>ドキュメント出力の例
2 の平方根 = 1.4142135623730951
</pre>

なお，以下のようにしても同じような結果が得られる．（下線部に注意）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<title>Output as a Document</title>
<pre><script type="text/javascript">
<!--
document.writeln("ドキュメント出力の例");
document.write("2 の平方根 = ");
document.writeln(Math.sqrt(2));
// -->
</script></pre>

[解説] 変数と代入

変数とは，特定の値（データ）に結びつけることのできる名前である． 特定の値（データ）に結びつけられた変数は，式の中で，その値（データ）の代わりに用いることができる． （たとえば変数 ten と 10 が結びつけられているとき， 式の中に ten が現れれば，それは 10 を表す．）

変数の宣言

変数は，使用する前に var ステートメントであらかじめ宣言しておく． var ステートメントは，var の後に変数の名前をコンマ(,)で区切って並べ，最後にセミコロン(;)をつけたものである．

なお，JavaScriptにおいては， 変数の名前も含め大文字と小文字は別の文字として扱われる． したがって，height と Height と HEIGHT は全て異なる名前とみなされる．

例

var height, weight, standard, factor;

代入ステートメント

変数を値と結びつけるには，代入を行う．代入は，以下のような代入ステートメントとして書かれる．

変数 = 式;

この中の 変数 は，先に宣言しておいた変数の名前であり， 式 は，変数・定数・リテラルを演算子で組み合わせた計算式である． 式 の詳細については前述の解説 「式と計算」を参照されたい． (→ 数値・文字列・定数， 演算子，by とほほ)

例えば，代入ステートメント x = 1+1; を実行すると， まず右辺の式を計算して結果 2 を得， その 2 が変数 x に結び付けられる．

特殊な代入

JavaScript においては，(C言語同様に) 代入は実は演算子の一種である． したがって，(x=5)+x のような式も可能である． また = を含め，代入に類する演算子として以下の物がある．

演算子値の型 意味
変数 = 値  (値) 代入．値は右辺の値．
変数 += 数  数 変数 の値に 数 を足した結果を変数 に代入する．
値は足した後の変数の値．
変数 = 変数 + 数 と等価
変数 -= 数  数 変数 = 変数 - 数 と等価
変数 *= 数  数 変数 = 変数 * 数 と等価
変数 /= 数  数 変数 = 変数 / 数 と等価
++変数 数 変数 の内容に1を足す．値は足した後の値．
変数 = 変数 + 1 と等価
変数++ 数 変数 の内容に1を足す．値は足す前の値．
--変数 数 変数 の内容から1を引く．値は引いた後の値．
変数 = 変数 - 1 と等価
変数-- 数 変数 の内容から1を引く．値は引く前の値．

また，変数を定義して，すぐに初期値を与える場合， var ステートメントと代入を組み合わせて， var ステートメント中で直接初期値を与える（代入する）ことができる． 例えば以下の (A), (B) は等価である．

(A)
var x, y;
x = 1;
y = 2;
(B)
var x = 1, y = 2;

[タスク] 変数と代入

概要

さまざまな代入を行うプログラムにおいて，各段階での変数の値を Firebug でステップ実行プログラムを1行ずつ止めながら実行すること． をしながら確認することにより，変数の振る舞いを理解するとともに， Firebug のステップ実行に慣れる．

手順

  1. このリンクの先のページ（js02-1.html）を開く．ページの内容は以下の通り． 
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<title>JavaScript Sample 2-1</title>
<script type="text/javascript">
<!--
// 変数の宣言
var b, w, x, y, z;

// 計算と結果表示
w = 1; x = 2;   // w==1, x==2
y = x;          // y==2
z = w + y;      // z==3
w = w + 1;      // w==2
x = x + z;      // x==5
y = (w=3) * w;  // w==3, y==9
b = "<br>";     // b=="<br>"

document.writeln("<p>");
document.writeln("w = " + w + b);
document.writeln("x = " + x + b);
document.writeln("y = " + y + b);
document.writeln("z = " + z + "</p>");
// -->
</script>
  2. 右下のFirebugアイコンか F12 キーで Firebug を起動し，左上で「スクリプト」を選ぶ． このとき「スクリプト パネルは無効化されています」と表示される場合， 「コンソール」の右の小さな▼をクリックして， メニューから「有効」を選ぶ．
  3. 左上の次でブレークをクリックして点滅させ， ページを再読み込みする．
    （再読み込み後，左半部にプログラムが表示されない場合，Firefox のウィンドウを少し広げるとよい．）
  4. Firebug 左側，黄色い三角マーク の付いている行でプログラムが停止しているので， 中央上の（ステップ イン）ボタンで1命令ずつ進行させながら， Firebug 右側で変数の値を確認する．

発展 - やってみよう

[解説] ダイアログ入出力

alert(…)

window オブジェクトの alert メソッドを用いると， ダイアログ (ウィンドウ) による出力ができる． window.alert(式); のように書かれ，単独のステートメントとして用いることができる． 実行されると，式 が，文字列としてダイアログに表示される． また，window. の部分は省略可能である．

例

alert("標準体重は " + standard + "kg です．");

(→ window.alert() by とほほ)

prompt(…)

window オブジェクトの prompt メソッドを用いると， ダイアログ (ウィンドウ) による入力ができる． window.prompt(式) のように書かれ，式（の一部）として用いることができる． その場合，入力された文字列がこのメソッド呼び出しの値として（関数のように）返される． 返される値は文字列なので，数値を入力する場合は， Number(…) 関数で明示的に数値に変換するほうがよい． なお，式 は，文字列としてダイアログに表示される． また，window. の部分は省略可能である．

例

height = Number(prompt("身長を入力してください．"));

(→ window.prompt() by とほほ)

ステートメント

プログラム中で実行される命令の単位は ステートメント と呼ばれる． 式にセミコロンをつけたもの 式; は，もっとも単純なステートメントのひとつである． 例えば下のような代入ステートメントは，代入演算子を用いた式にセミコロンをつけたものと 考えることができる．

x = 1 + 2;

また，以下の各行もステートメントである．

var height, weight, standard, factor;
document.writeln("<p>標準体重は " + standard + "kg です．</p>");
alert("標準体重は " + standard + "kg です．");
height = prompt("氏名を入力してください．");

[タスク] BMIプログラム (1)

概要

身長と体重を入力し，BMI (Body Mass Index) を計算するプログラムを作成する．

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

BMI＝ 10000 × 体重
-------------
身長2

手順

  1. プログラムのファイル (ソースファイル) を作成する．

    WZ エディタを使用して，以下の内容のファイルを作成し， マイドキュメント の sc283 の下に js02-2.html という名前で保存する．

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<title>JavaScript Sample 2-2</title>
<script type="text/javascript">
<!--
// 変数の宣言
var height, weight, bmi;

// 入力
height = Number(prompt("身長をcmで入力してください．"));
weight = Number(prompt("体重をkgで入力してください．"));
// prompt(…) の値は文字列なので，Number関数で数値に変換する方が無難

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

//出力
alert("BMI は " + bmi + " です．");
// -->
</script>
  2. プログラムを実行する．

    上で保存したファイル js02-2.html を Firefox で開く．ファイルのアイコンをデスクトップの Firefox のアイコンにドラッグ&ドロップすればよい．

  3. プログラムの指示にしたがって身長と体重を入力する．

発展 - やってみよう

  1. document.write(…);やdocument.writeln(…);を使って， ページ上に表示するように書き換える．
  2. 身長を入力して，それにかぎかっこを付けて出力するプログラムを書いてみよう．
  3. BMIではなく，ローレル指数を出力するように書き換えてみる． なお，ローレル指数の計算式は以下の通り．
    ローレル指数＝ 1000000 × 体重
    ---------------
    身長3
  4. 身長（だけ）を入力して，標準体重（ブローカ式桂変法）を返すプログラムに書き直してみる． 計算式は以下の通り．
    標準体重 ＝ （身長 − 100） × 0.9

参考資料

データ型

料理中に材料によって入れ物の種類を使い分けるように， プログラミング言語によっては， 変数に入れる「データの種類」によって「変数の種類」を使い分ける必要がある． この「データの種類」(または「変数の種類」)はデータ型と呼ばれる．

厳格なデータ型を持つプログラミング言語では， 変数を宣言する時にデータ型も指定する必要があり， その変数には指定したデータ型のデータしか入れることができない．

JavaScript においては，基本的なデータ型である 「Number (数値)」，「String (文字列)」，「Boolean (真偽)」をはじめ， さまざまなデータ型が存在するが， 「変数の種類」は区別されない (変数には何でも入れられる)． 例えば数値の 123 と文字列の "123" は，本来別のものである （123 + 123 は 246 であるが， "123" + "123" は "123123" である） が，代入する変数の「種類」を分けるようなことはない．

また計算時には，必要に応じて自動的に変換される場合も多い． たとえば，文字列は掛け算や引き算ができないので， "169" という文字列に対して * や - の演算をしようとすると，自動的に数値の 169 に変換してから計算される．

[課題] 狂歌プログラム

課題番号： 2-1
課題名： 狂歌プログラム
ファイル名：task02-1.html
締切： 次の日曜日の次回の演習日の直前の日曜日，18:00まで

概要

俳句を入力し，その後に「それにつけても 金の欲しさよ」 と続けて狂歌にして出力するプログラムを作成する．

例

「古池や 蛙飛び込む 水の音」 → 「古池や 蛙飛び込む 水の音 それにつけても 金の欲しさよ」

方法

prompt(…) を用いて俳句を入力し， + 演算子で「 それにつけても 金の欲しさよ」を連結して出力する． 出力方法は alert(…) を用いても document.write(…) を用いてもよい．

作成するプログラムのファイル名は task02-1.html とする．

報告について

Moodle の課題ページからファイルを提出すること （→ファイルで提出する場合）． ファイル名は，必ずすべて半角文字とすること．