Computer Programing

2004-03


計算をしてみよう.

 コンピュータは数値を処理するために開発されましたので,計算処理はお手の物です.では,JavaScript を用いて計算をするにはどのようにするのでしょうか?たとえば次のコードは,3+5 の結果を表示します.

document.write( 3+5 );

次のコードは,12-5 の結果を表示します.

document.write( 12-5 );

これでわかると思いますが,JavaScript では,数学における数式をそのまま書くことができます.加算(+),減算(-)以外に乗算(*),除算(/),剰余算(%)などがあります.一般的な数式と同様,乗算と除算は加算と減算より優先されますので,

document.write( 12-5*3+6 );

は,3 と表示されます.優先順位を変えたい場合は,括弧()を使うことができます.

document.write( (12-5)*(3+6) );

は,63 と表示されます.


 前章では document.write は文字列を表示するものだと説明しましたが,数値など,あらゆるを表示することができます. JavaScript におけるには,数値,文字列,論理値などがあります.論理値とはあるものが真であるか偽であるかという二つの状態を表す値です.ここで,

document.write( 'Hello' );
document.write( 10 );

における 'Hello' は文字列リテラルと呼びます.一方,10 は数値リテラルと呼びます.リテラルとはプログラムの中に直接書いた値のことです.数値リテラルには 10 などという整数リテラルだけでなく, 3.14 のような少数リテラルもあります.ここで,論理値がとりうるのは true と false という二つのリテラルだけです.


 とは JavaScript が評価を行い値を生成するものです.もっとも単純な式は値です.値だけの式はその値そのものを生成します.そして,この値を演算子を用いて組み合わせたものも式です.たとえば,12-5 や (12-5)*(3+6) は,算術演算子を用いた式であり,数値を生成します.したがって,document.write( 12-5 ) とすると, 12-5 という式が評価され,12-5 が生成した値 7 が表示されます.他の演算子については順次説明していきます.


足し算プログラムを作ってみよう

 プログラムの中に式を埋め込んで表示するのでは,なにかものたりません.そこで,数値を入力させ,それを足し合わせたものを表示するプログラムを作ってみましょう.まずは,そのソースコードを見せてしまいます.

var a,b;
a = prompt( '一つ目の数値を入力してください', '' );
b = prompt( '二つ目の数値を入力してください', '' );
document.write( parseInt( a ) + parseInt( b ) );

これを実行すると,一つ目の数値を入力を要求するウィンドウ(ダイアログと呼びます)が表示されます.数値を入力し,OKボタンを押すか,リターンキーを押すと,二つ目の要求が行われます.同様にして数値を入力すると,入力した数値の和が表示されます.では,このプログラムの説明をしましょう.


変数

 変数とは値をしまうための箱のようなものです.そして,変数自体も値であり,変数は数値リテラルや文字列リテラルと同じように扱うことができます.変数を使うためには,まず変数宣言を行います. a という名前の変数を宣言するためには次のコードを書きます.

var a;

また,複数の変数を同時に宣言するときには次のように書くことができます.

var a, b, num, importantvalue;

変数名には半角英数字を組み合わしたもの(これを識別子と呼びます)をつけることができます.ただし,予約語と呼ばれる JavaScript で元々決められている名前(たとえば document とか for をつけることはできません.

 そして,変数に値を入れるには代入演算子を使います.

a = 10;
a = 20*3;
a = 'abc';

一つ目は 10 が a に入ります.二つ目は 20*3 という式の結果,つまり 60 が入ります.三つ目は abc という文字列が入ります.ここで,JavaScript には C 言語などにある変数の型はありません.したがって,数値でも文字列でもなんでも入れることができます.

 先に値と演算子を組み合わせたものは式であると説明しましたが,代入演算子を用いたものも式の一つです.

 ここで,次のように,宣言時に値をいれることもできます.

var a = 50;

 変数は数値リテラルや文字列リテラルと同じように扱えますので,たとえば,

var a = 'Hello';
document.write( a );

を実行すると Hello が表示されます.また,

var a = 50;
document.write( a*3 );

を実行すると 150 が表示されます.


文字列の入力

 文字列入力を行いたいときには prompt 関数を利用します.関数の説明は後で行いますが,関数は式と同じように値を生成します.そして,値として扱うことが可能です. prompt は入力された文字列を生成するものです.そこで,

a = prompt( '一つ目の数値を入力してください', '' );

のように書くと,入力された文字列が変数 a にしまわれます.括弧の中の一つ目は,ダイアログに表示されるコメント文字列を書くことができます.二つ目はダイアログ内の入力欄に表示される初期値を書くことができます.たとえば,

a = prompt( '一つ目の数値を入力してください', '10' );

とすると,入力欄にあらかじめ 10 が表示されます.


文字列から数値への変換

 prompt は文字列入力のための関数であると説明しました.つまり,

a = prompt( '一つ目の数値を入力してください', '' );

が実行されたときに 10 を入力したとすると,a には数値の 10 ではなく,文字列の '10' がしまわれます.ここで数値か文字列かの違いは,計算を行うときに大きな違いとなります.

var a = '10';
var b = '20';
document.write( a+b );

を実行すると 30 ではなく,1020 が表示されます.これは,演算子 + は,対象が文字列の場合,文字列の結合を行う演算子となるためです.

 prompt で表示された文字列を数値として加算するためには,文字列を数値に変換する必要があります.そのためには,parseInt 関数を利用します.parseInt( 文字列 ) は文字列が表す数値を生成します.たとえば,

var a = '10';
var b = '20';
document.write( parseInt( a ) + parseInt( b ) );

は,30 を表示するようになります.

 なお,計算させるときに文字列から数値に変換するのではなく,変数に入れるときに数値に変換してしまう方法もあります.次のプログラムは,そのように変更したものです.

var a,b;
a = parseInt( prompt( '一つ目の数値を入力してください', '' ) );
b = parseInt( prompt( '二つ目の数値を入力してください', '' ) );
document.write( a +  b );

関数 prompt は入力された文字列を生成します.それを,関数 parseInt が数値に変換し生成しますので,a には数値が入ることになります.


演習

 4つの数字を入力すると,(1つ目+2つ目)−(3つ目+4つ目)の計算結果を表示するプログラムを作りなさい.


発展課題

1,2,3,4 を入力すると

(1+2)-(3+4)=-4

と表示するプログラムを作りなさい.

ヒント:

var a = 10;
var b = '20';
document.write( 'a', ' ', 'b', ' ', a, ' ', b );

を実行すると,画面には

a b 10 20

が表示されます.