【JavaScript 入門講座】変数に算術演算子を適用（変数を含む計算式）
[JavaScript 入門講座]変数に算術演算子を適用（変数を含む計算式）
いままで変数の宣言と利用方法を学習した。
- 変数を利用するためには、変数を宣言する必要がある
- 変数の宣言と同時に、値を代入できる
- alert()の括弧の中に変数を記述すると、変数の中の値が表示する
本講座では、変数を利用するサンプルを見る。
文字列と変数の文字列結合
001<script>
002
003var name = prompt ( "名前を入力して下さい" ) ;
004
005alert ( "Hello!! " + name );
006
007</script>
002
003var name = prompt ( "名前を入力して下さい" ) ;
004
005alert ( "Hello!! " + name );
006
007</script>
プログラムを実行すると、入力ダイアログが表示する。 入力ダイアログに名前（たとえば「IORI」）を入力して「OK」ボタンを押下すると、 「Hello!! [入力した名前]」と表示する。 たとえば、入力ダイアログに「IORI」と入力した場合、 「Hello!! IORI」と表示する。
プログラムを解説する。プログラムを実行すると、 まず、prompt()が実行する。prompt()が実行すると、入力ダイアログが表示する。 入力ダイアログに名前を入力すると、 prompt()は、その名前（文字列）を実行した場所へ戻す。 入力した文字列が「IORI」の場合、 プログラムは次のようになる。
001<script>
002
003var name = "IORI" ;
004
005alert ( "Hello!! " + name );
006
007</script>
002
003var name = "IORI" ;
004
005alert ( "Hello!! " + name );
006
007</script>
prompt()はユーザー入力値を実行した場所へ戻すので、 入力した文字列が、変数nameに代入される。
prompt()の動作 prompt()を実行すると、入力ダイアログを表示する。 ユーザーがテキストボックスに文字を入力して「OK」ボタンを押下すると、 入力した文字列が実行元へ戻される
「実行元へ入力した文字列を戻す」という感覚を ご理解頂きたい。 さて、5行目が今回の学習内容である。
001<script>
002
003var name = "IORI" ;
004
005alert ( "Hello!! " + name );
006
007</script>
002
003var name = "IORI" ;
004
005alert ( "Hello!! " + name );
006
007</script>
5行目で、文字列「Hello!! 」と変数nameを「+」演算子で繋いでいる。
文字列と変数を加算する？そんな事ができるのだろうか？
このプログラムは、変数nameを利用している。
変数nameを利用する際、変数nameに入っている値が取り出される。
変数nameに入っている値は、「IORI」である。
つまり、このプログラムはつぎのプログラムと同じである。
001<script>
002
003var name = "IORI" ;
004
005alert ( "Hello!! " + "IORI" );
006
007</script>
002
003var name = "IORI" ;
004
005alert ( "Hello!! " + "IORI" );
006
007</script>
このように、変数を利用する場合、変数の中に入っている値が取り出される。 さて、alert()の括弧の中は、文字列結合する。
001<script>
002
003var name = "IORI" ;
004
005alert ( "Hello!! IORI" );
006
007</script>
002
003var name = "IORI" ;
004
005alert ( "Hello!! IORI" );
006
007</script>
このように、文字列「Hello!! 」と「IORI」が文字列結合する。 このプログラムを実行すると、「Hello!! IORI」と表示する。
変数に算術演算子を適用する
さきほど、文字列と変数の文字列結合を見た。こんかい、変数同士に算術演算子を適用する。
001<script>
002
003var a = 10 ;
004var b = 2 ;
005
006alert ( a + b );
007alert ( a - b );
008alert ( a * b );
009alert ( a / b );
010alert ( a % b );
011alert ( a ** b );
012
013</script>
002
003var a = 10 ;
004var b = 2 ;
005
006alert ( a + b );
007alert ( a - b );
008alert ( a * b );
009alert ( a / b );
010alert ( a % b );
011alert ( a ** b );
012
013</script>
プログラムを実行すると、つぎの順番でダイアログが表示する。
12
8
20
5
0
100
プログラムを解説する。3行目で変数aを宣言して、数値10を代入する。 4行目で、変数bを宣言して数値2を代入する。 ここまでは良い。つぎに、6行目から11行目まで、変数aと変数bに対して、 算術演算子を利用する。
変数と算術演算子 変数に算術演算子を適用すると、変数から値が取り出されて計算される。
変数に対して算術演算子を利用すると、 変数から値が取り出されて、計算する。つまり、プログラムは次のように変換される。
001<script>
002
003var a = 10 ;
004var b = 2 ;
005
006alert ( 10 + 2 );
007alert ( 10 - 2 );
008alert ( 10 * 2 );
009alert ( 10 / 2 );
010alert ( 10 % 2 );
011alert ( 10 ** 2 );
012
013</script>
002
003var a = 10 ;
004var b = 2 ;
005
006alert ( 10 + 2 );
007alert ( 10 - 2 );
008alert ( 10 * 2 );
009alert ( 10 / 2 );
010alert ( 10 % 2 );
011alert ( 10 ** 2 );
012
013</script>
変数を利用する場合、変数に入っている値が取り出される。 変数aには10が入っているので、変数aの部分は10に置き換わる。 変数bには2が入っていたので、変数bの部分は2に置き換わる。 このプログラムが実行すると、順番に計算結果がダイアログに表示される。
変数を活用する
徐々に、JavaScriptに慣れてきた。慣れてくると、色々と冒険したくなるものだ。 つぎのようなプログラムを記述したくなるだろう。
001<script>
002
003var a = prompt ( "[a]数字を入力して下さい" ) ;
004var b = prompt ( "[b]数字を入力して下さい" ) ;
005
006alert ( a + b );
007
008</script>
002
003var a = prompt ( "[a]数字を入力して下さい" ) ;
004var b = prompt ( "[b]数字を入力して下さい" ) ;
005
006alert ( a + b );
007
008</script>
このプログラムは冒険的である。 しかし、期待した結果にはならないだろう。
プログラムを実行すると、入力ダイアログが表示する。 ここで数値を入力して「OK」ボタンを押下すると、 さらに別の入力ダイアログが表示する。 さらに数値を入力して「OK」ボタンを押下すると、 最初に入力した数値と次に入力した数値が 文字列結合して表示される。
プログラムを詳しく見る。 プログラムが実行すると、3行目でprompt()が実行して、 入力ダイアログが表示する。ここで例えば、「5」を入力して「OK」ボタンを押下したとする。 その場合、5という値が変数aに代入する。
001<script>
002
003var a = "5" ;
004var b = prompt ( "[b]数字を入力して下さい" ) ;
005
006alert ( a + b );
007
008</script>
002
003var a = "5" ;
004var b = prompt ( "[b]数字を入力して下さい" ) ;
005
006alert ( a + b );
007
008</script>
すでにお気づきだろうが、prompt()から戻ってきた値「5」は文字列である。 「5」は数字だが、入力ダイアログから戻ってくる値は、 それが数字であっても文字列として扱われる。 つぎに、4行目のprompt()が実行する。 もう一度入力ダイアログが表示する。ここで「2」を入力したと仮定する。
001<script>
002
003var a = "5" ;
004var b = "2" ;
005
006alert ( a + b );
007
008</script>
002
003var a = "5" ;
004var b = "2" ;
005
006alert ( a + b );
007
008</script>
このように変数bに「2」が文字列として代入する。 ここまでは良い。問題は次だ。 6行目で変数aと変数bの値に「+」を適用する。 変数に演算子を利用すると、変数に入っている値が取り出される。 変数aと変数bに入っている値は、「5」と「2」である。 つまり、プログラムは次のプログラムと同じである。
001<script>
002
003var a = "5" ;
004var b = "2" ;
005
006alert ( "5" + "2" );
007
008</script>
002
003var a = "5" ;
004var b = "2" ;
005
006alert ( "5" + "2" );
007
008</script>
さすがに、5 + 2 = 7 で、ラッキーセブンが表示するだろう。 それぐらい、空気読むよね？
残念ながら、コンピューターは絶対に空気を読まない。 「5」も「2」も文字列なので、文字列結合する。
001<script>
002
003var a = "5" ;
004var b = "2" ;
005
006alert ( "52" );
007
008</script>
002
003var a = "5" ;
004var b = "2" ;
005
006alert ( "52" );
007
008</script>
このように、文字列結合する。 プログラムを実行すると、「52」と表示する。
変数の値を文字列から整数へ変換する
ユーザーが入力した二つの数字を 加算してダイアログに表示するには、どのようにすれば良いのだろうか？ 問題は、prompt()から戻ってくる値が、文字列として扱われる事である。 この部分を解決する必要がある。
001<script>
002
003var a = prompt ( "[a]数字を入力して下さい" ) ;
004var b = prompt ( "[b]数字を入力して下さい" ) ;
005
006var x = parseInt ( a ) ;
007var y = parseInt ( b ) ;
008
009alert ( x + y );
010
011</script>
002
003var a = prompt ( "[a]数字を入力して下さい" ) ;
004var b = prompt ( "[b]数字を入力して下さい" ) ;
005
006var x = parseInt ( a ) ;
007var y = parseInt ( b ) ;
008
009alert ( x + y );
010
011</script>
プログラムを実行すると、入力ダイアログが2回表示して、 それぞれ入力した数字が加算されて表示される。
プログラムを解説する。3行目と4行目で入力ダイアログを表示し、 ユーザーから入力値を受け取り、それぞれの値を変数aと変数bへ代入する。 ここまでは、前回と同じである。 6行目で、parseInt () という命令文を利用する。新しい命令文である。
parseInt() 数字の文字列を数値に変更する命令文である。 parseInt () の括弧の中には、整数へ変換できる文字列を記述する必要がある。 parseInt () の括弧の中に、整数へ変換できない文字列を記述すると、 エラーが発生する。
parseInt()の括弧の中に文字列を記述すると、parseInt()はその文字列を数値に変えてくれる。 parseInt()の括弧の中に記述する文字列は「数字」でなければならない。 数字以外の文字列、例えば「IORI」をparseInt()の括弧の中に記述すると、エラーが発生する。
001<script>
002
003var a = prompt ( "[a]数字を入力して下さい" ) ;
004var b = prompt ( "[b]数字を入力して下さい" ) ;
005
006var x = parseInt ( a ) ;
007var y = parseInt ( b ) ;
008
009alert ( x + y );
010
011</script>
002
003var a = prompt ( "[a]数字を入力して下さい" ) ;
004var b = prompt ( "[b]数字を入力して下さい" ) ;
005
006var x = parseInt ( a ) ;
007var y = parseInt ( b ) ;
008
009alert ( x + y );
010
011</script>
ユーザーが入力ダイアログで「5」と「2」を入力したと仮定する。
001<script>
002
003var "5" = prompt ( "[a]数字を入力して下さい" ) ;
004var "2" = prompt ( "[b]数字を入力して下さい" ) ;
005
006var x = parseInt ( "5" ) ;
007var y = parseInt ( "2" ) ;
008
009alert ( x + y );
010
011</script>
002
003var "5" = prompt ( "[a]数字を入力して下さい" ) ;
004var "2" = prompt ( "[b]数字を入力して下さい" ) ;
005
006var x = parseInt ( "5" ) ;
007var y = parseInt ( "2" ) ;
008
009alert ( x + y );
010
011</script>
もし、ユーザーが入力ダイアログに「5」と「2」を入力した場合、 プログラムはこのように書き換える事ができる。 6行目と7行目で、parseInt()という命令を実行している。 これは、括弧の中の文字列を数値に変換する命令である。 数値に変換した後、その数値を戻してくれる。
001<script>
002
003var "5" = prompt ( "[a]数字を入力して下さい" ) ;
004var "2" = prompt ( "[b]数字を入力して下さい" ) ;
005
006var 5 = parseInt ( "5" ) ;
007var 2 = parseInt ( "2" ) ;
008
009alert ( x + y );
010
011</script>
002
003var "5" = prompt ( "[a]数字を入力して下さい" ) ;
004var "2" = prompt ( "[b]数字を入力して下さい" ) ;
005
006var 5 = parseInt ( "5" ) ;
007var 2 = parseInt ( "2" ) ;
008
009alert ( x + y );
010
011</script>
変数xと変数yに数値「5」と「2」が代入される。 9行目で、変数xと変数yを加算する。これは、整数同士の加算処理なので、 「 5 + 2 = 7 」である。
001<script>
002
003var "5" = prompt ( "[a]数字を入力して下さい" ) ;
004var "2" = prompt ( "[b]数字を入力して下さい" ) ;
005
006var 5 = parseInt ( "5" ) ;
007var 2 = parseInt ( "2" ) ;
008
009alert ( 5 + 2 );
010
011</script>
002
003var "5" = prompt ( "[a]数字を入力して下さい" ) ;
004var "2" = prompt ( "[b]数字を入力して下さい" ) ;
005
006var 5 = parseInt ( "5" ) ;
007var 2 = parseInt ( "2" ) ;
008
009alert ( 5 + 2 );
010
011</script>
プログラムを実行すると、「7」と表示する。
変数を実践的に活用する
応用範囲の広いプログラムの考え方を学習する
001<script>
002
003var a = prompt ( "[a]数字を入力して下さい" ) ;
004var b = prompt ( "[b]数字を入力して下さい" ) ;
005
006var x = parseInt ( a ) ;
007var y = parseInt ( b ) ;
008
009var str = a + " + " + b + " = " ;
010var result = ( x + y ) ;
011
012alert ( str + result );
013
014</script>
002
003var a = prompt ( "[a]数字を入力して下さい" ) ;
004var b = prompt ( "[b]数字を入力して下さい" ) ;
005
006var x = parseInt ( a ) ;
007var y = parseInt ( b ) ;
008
009var str = a + " + " + b + " = " ;
010var result = ( x + y ) ;
011
012alert ( str + result );
013
014</script>
プログラムを実行すると、入力ダイアログが2回表示される。 それぞれのダイアログに数字を入力すると、その数字が加算されて表示される。
プログラムの動きは、前回と同じである。では、具体的な数値を当てはめながら解説する。
まずプログラムを実行すると、入力ダイアログが2回表示する。
それぞれのダイアログで「10」と「5」を入力したと仮定する。
001<script>
002
003var a = prompt ( "10" ) ;
004var b = prompt ( "5" ) ;
005
006var x = parseInt ( a ) ;
007var y = parseInt ( b ) ;
008
009var str = a + " + " + b + " = " ;
010var result = ( x + y ) ;
011
012alert ( str + result );
013
014</script>
002
003var a = prompt ( "10" ) ;
004var b = prompt ( "5" ) ;
005
006var x = parseInt ( a ) ;
007var y = parseInt ( b ) ;
008
009var str = a + " + " + b + " = " ;
010var result = ( x + y ) ;
011
012alert ( str + result );
013
014</script>
3行目と4行目で、文字列「10」と文字列「5」が変数aとbへ代入される。 6行目と7行目でparseInt()を利用して、文字列の数字を数値へ変換する。
001<script>
002
003var a = prompt ( "10" ) ;
004var b = prompt ( "5" ) ;
005
006var x = parseInt ( "10" ) ;
007var y = parseInt ( "5" ) ;
008
009var str = a + " + " + b + " = " ;
010var result = ( x + y ) ;
011
012alert ( str + result );
013
014</script>
002
003var a = prompt ( "10" ) ;
004var b = prompt ( "5" ) ;
005
006var x = parseInt ( "10" ) ;
007var y = parseInt ( "5" ) ;
008
009var str = a + " + " + b + " = " ;
010var result = ( x + y ) ;
011
012alert ( str + result );
013
014</script>
変数xとyには、数値の「10」と「5」が代入される。 次に、9行目に値を設定する。
001<script>
002
003var a = prompt ( "10" ) ;
004var b = prompt ( "5" ) ;
005
006var x = parseInt ( "10" ) ;
007var y = parseInt ( "5" ) ;
008
009var str = "10" + " + " + "5" + " = " ;
010var result = ( x + y ) ;
011
012alert ( str + result );
013
014</script>
002
003var a = prompt ( "10" ) ;
004var b = prompt ( "5" ) ;
005
006var x = parseInt ( "10" ) ;
007var y = parseInt ( "5" ) ;
008
009var str = "10" + " + " + "5" + " = " ;
010var result = ( x + y ) ;
011
012alert ( str + result );
013
014</script>
9行目のイコールの右側では、文字列結合をしている。
001<script>
002
003var a = prompt ( "10" ) ;
004var b = prompt ( "5" ) ;
005
006var x = parseInt ( "10" ) ;
007var y = parseInt ( "5" ) ;
008
009var str = "10 + 5 = " ;
010var result = ( x + y ) ;
011
012alert ( str + result );
013
014</script>
002
003var a = prompt ( "10" ) ;
004var b = prompt ( "5" ) ;
005
006var x = parseInt ( "10" ) ;
007var y = parseInt ( "5" ) ;
008
009var str = "10 + 5 = " ;
010var result = ( x + y ) ;
011
012alert ( str + result );
013
014</script>
9行目の変数strには、文字列「"10 + 5 = "」が代入する。 10行目で、変数xとyの値を加算して、変数resultへ代入する。
001<script>
002
003var a = prompt ( "10" ) ;
004var b = prompt ( "5" ) ;
005
006var x = parseInt ( "10" ) ;
007var y = parseInt ( "5" ) ;
008
009var str = "10 + 5 = " ;
010var result = ( 10 + 5 ) ;
011
012alert ( str + result );
013
014</script>
002
003var a = prompt ( "10" ) ;
004var b = prompt ( "5" ) ;
005
006var x = parseInt ( "10" ) ;
007var y = parseInt ( "5" ) ;
008
009var str = "10 + 5 = " ;
010var result = ( 10 + 5 ) ;
011
012alert ( str + result );
013
014</script>
変数xとyの中に入っている値は、それぞれ数値の「10」と「5」である。
どちらも数値なので、通常の加算処理が実行する。
変数resultには、「15」が代入する。
最後の12行目で、変数strと変数resultに「 + 」演算子を適用する。
001<script>
002
003var a = prompt ( "10" ) ;
004var b = prompt ( "5" ) ;
005
006var x = parseInt ( "10" ) ;
007var y = parseInt ( "5" ) ;
008
009var str = "10 + 5 = " ;
010var result = ( 10 + 5 ) ;
011
012alert ( "10 + 5 = " + 15 );
013
014</script>
002
003var a = prompt ( "10" ) ;
004var b = prompt ( "5" ) ;
005
006var x = parseInt ( "10" ) ;
007var y = parseInt ( "5" ) ;
008
009var str = "10 + 5 = " ;
010var result = ( 10 + 5 ) ;
011
012alert ( "10 + 5 = " + 15 );
013
014</script>
12行目で、文字列「"10 + 5 = "」と整数値「15」が文字列結合する。
001<script>
002
003var a = prompt ( "10" ) ;
004var b = prompt ( "5" ) ;
005
006var x = parseInt ( "10" ) ;
007var y = parseInt ( "5" ) ;
008
009var str = "10 + 5 = " ;
010var result = ( 10 + 5 ) ;
011
012alert ( "10 + 5 = 15" );
013
014</script>
002
003var a = prompt ( "10" ) ;
004var b = prompt ( "5" ) ;
005
006var x = parseInt ( "10" ) ;
007var y = parseInt ( "5" ) ;
008
009var str = "10 + 5 = " ;
010var result = ( 10 + 5 ) ;
011
012alert ( "10 + 5 = 15" );
013
014</script>
12行目が実行すると、「10 + 5 = 15」と表示する。
このプログラムの何がうれしいかというと、「計算式と計算結果が適切に表示する」という事である。
前回のサンプルプログラムだと、ユーザーが入力した2つの値を加算して、結果だけを
ダイアログに表示した。
こんかいは、計算式も正しく表示する。
たとえば、ユーザーが「2」と「3」を入力したとする。
001<script>
002
003var a = prompt ( "2" ) ;
004var b = prompt ( "3" ) ;
005
006var x = parseInt ( "2" ) ;
007var y = parseInt ( "3" ) ;
008
009var str = a + " + " + b + " = " ;
010var result = ( x + y ) ;
011
012alert ( str + result );
013
014</script>
002
003var a = prompt ( "2" ) ;
004var b = prompt ( "3" ) ;
005
006var x = parseInt ( "2" ) ;
007var y = parseInt ( "3" ) ;
008
009var str = a + " + " + b + " = " ;
010var result = ( x + y ) ;
011
012alert ( str + result );
013
014</script>
このように値が変数へ代入される。さらに進める。
001<script>
002
003var a = prompt ( "2" ) ;
004var b = prompt ( "3" ) ;
005
006var x = parseInt ( "2" ) ;
007var y = parseInt ( "3" ) ;
008
009var str = "2 + 3 = " ;
010var result = ( 2 + 3 ) ;
011
012alert ( "2 + 3 = 5" );
013
014</script>
002
003var a = prompt ( "2" ) ;
004var b = prompt ( "3" ) ;
005
006var x = parseInt ( "2" ) ;
007var y = parseInt ( "3" ) ;
008
009var str = "2 + 3 = " ;
010var result = ( 2 + 3 ) ;
011
012alert ( "2 + 3 = 5" );
013
014</script>
ユーザーが「2」と「3」を入力した場合、
「2 + 3 = 5」と表示される。計算式も計算結果も正しい文字列である。
本講座は以上である。
