IORI online School

JavaScript、html、css の無料学習サイト

【JavaScript 入門講座】数字と計算式の計算結果を表示する

[JavaScript 入門講座]数字と計算式の計算結果を表示する

前回の講座で、文字をダイアログに表示するプログラムを見た。

文字列をダイアログに表示する alert ( ★表示する文字★ ) ;

alert()を利用すると、文字をダイアログに表示できた。ここまでは大丈夫だろう。 本講座では、数値と計算式の計算結果をダイアログで表示するプログラムを学習する。

  1. 数字を表示する
  2. 計算式の計算結果を表示する

alert()を利用して数字をダイアログに表示する

数字をダイアログに表示するプログラムを学習する。 左側に記載された数字は行番号なので、気にせずともよい。

001<script>
002alert ( 10 ) ;
003</script>

このプログラムをテキストエディタに記述して保存しよう。 サンプルプログラムの左側に記載された数字は行番号である。 こちらはJavaScriptファイルに記載する必要は無い。 ファイルの名前は自由でよい。sample03.htmlなどでよいだろう。 ファイルを保存したら、ファイルのパスをWebブラウザのアドレス欄にコピーアンドペーストして JavaScriptを実行しよう。 どのような結果になっただろうか?「10」と記載されたダイアログが表示するはずである。 もし異なる結果になった方は手を上げてほしい。 いま手を上げた方。もう一度ファイルを書き直してJavaScriptを実行しよう。

alert()の解説

001<script>
002alert ( 10 ) ;
003</script>

alert()を利用して、数字の「10」をダイアログに表示するプログラムである。

数字をダイアログに表示する alert ( ★表示する数字★ ) ;

前講座で「文字を表示する場合、文字をダブルクォーテーションで囲む」と解説した。 こんかい、「10」をダブルクォーテーションで囲んでいない。 実は、ダブルクォーテーションで囲む必要があるのは、文字だけである。 そのほかの値(例えば数字)はダブルクォーテーションで囲む必要は無い。 プログラムを次のように変更して実行してみよう。

001<script>
002alert ( 100 ) ;
003</script>

ファイルの内容を変更して保存しよう。 その後、Webブラウザ上でキーボードの「F5」キーを押下すると、 変更後のJavaScriptが実行する。
ダイアログに「100」が表示するはずである。
ダイアログに数字を表示する方法は大丈夫だろう。

計算式の計算結果をダイアログに表示する

alert()を利用して、計算式の計算結果をダイアログに表示させる。

001<script>
002alert ( 10 + 5 ) ;
003</script>

alert()の中に「10+5」という計算式が入っている(記述されている)。

計算式の計算結果をダイアログに表示する alert ( ★計算式★ ) ;

alert()の括弧の中に、計算式を記述すると、 計算式の計算結果がダイアログに表示する。

001<script>
002alert ( 10 + 5 ) ;
003</script>

このプログラムは、まず「 10 + 5 」の計算式が計算される。 計算結果は「15」である。つまり、このプログラムは次のプログラムと同じである。

001<script>
002alert ( 15 ) ;
003</script>

alert()の括弧の中に計算式を記述する まず計算式が計算される。その計算結果がダイアログに表示する。

alert()の括弧の中に計算式を記述すると、まず計算式が計算され、 その後、計算結果がダイアログに表示する。

001<script>
002alert ( 10 + 5 ) ;
003</script>

このプログラムを実行すると「15」が表示する。
次のようにプログラムを変更してみよう。

001<script>
002alert ( 10 - 5 ) ;
003</script>

このプログラムを実行すると、「5」とダイアログに表示される。

  1. 計算式が計算される
  2. 計算結果がダイアログに表示する

プログラムが実行すると、まず「 10 - 5 」が計算される。 計算結果は「5」である。つまり、このプログラムは次のプログラムと同じである。

001<script>
002alert ( 5 ) ;
003</script>

プログラムが実行すると「5」と表示されたダイアログが表示する。
最初に計算式が計算されるという点が重要である。

計算式をダブルクォーテーションで囲む

非常に重要な事を解説する。

001<script>
002alert ( 10 - 5 ) ;
003</script>

このプログラムは先ほど見た。次のようにダブルクォーテーションで囲むとどうなるだろう?

001<script>
002alert ( "10 - 5" ) ;
003</script>

このプログラムは興味深い。 このプログラムを実行してみよう。
「10 - 5」とダイアログに表示する。 先ほど、「計算式は計算結果が表示する」と解説した。 しかし、実際はどうだろう? プログラムを実行すると、 計算結果が表示するのではなく、計算式がそのままダイアログに表示した。 なぜだろう?
実は、ダブルクォーテーションで囲むと、 ダブルクォーテーションで囲んだものは、 文字とみなされる。

ダブルクォーテーションで囲む ダブルクォーテーションで囲んだものは、文字として扱われる

つまり、ダブルクォーテーションで囲んでいない 「10 - 5」は計算式である。プログラムを実行すると、計算結果がダイアログに表示される。 しかし、「"10 - 5"」は文字だ。 正しく言い直すなら 「"10 - 5"」は文字列である。 この場合、計算式は計算されずに、計算式がそのままダイアログに表示する。 ちなみに、プログラミング用語では、文字が複数個繋がったものを、 文字列と言う(重要)。

プログラム 扱い 実行結果
alert ( 10 - 5 ) ; 計算式 「5」が表示
alert ( "10 - 5" ) ; 文字列 「10 - 5」が表示

このように扱われる。
さて、 プログラムを次のように変更して実行しよう。

001<script>
002alert ( "10 + 5" ) ;
003</script>

プログラムを実行すると、「10 + 5」とダイアログに表示する。 「15」が表示するわけではない。

プログラム 扱い 実行結果
alert ( 10 + 5 ) ; 計算式 「15」が表示
alert ( "10 + 5" ) ; 文字列 「10 + 5」が表示

では、次のプログラムはどのように動作するだろうか?

001<script>
002alert ( 20 + 10 ) ;
003</script>

このプログラムを実行すると、「30」とダイアログに表示する。

001<script>
002alert ( "20 + 10" ) ;
003</script>

このプログラムを実行すると、「20 + 10」とダイアログに表示する。

まとめ

数字をダイアログに表示する alert ( ★表示する数字★ ) ;

計算式の計算結果をダイアログに表示する alert ( ★計算式★ ) ;

計算式が計算されて、計算結果がダイアログに表示する。

ダブルクォーテーションで囲むと、 囲まれた部分は文字列となる。