先ほどの四則演算は、変数に決まった値を初期値として入れていますので、違う計算を行おうと思ったら、スクリプトの初期値を書き直す必要があります。
WEB上では、いろんな計算をさせる場合、見る人がそれぞれのデータを入力することがほとんどです。
なので、データをブラウザから入力してもらうことが大切になります。
一般的には、フォームの値を読み取ってそこから始まることになると思います。

さらに、ブラウザから入力する一つの方法として、ポップアップ画面（入力ダイアログボックス）からデータを入力することができます。

今回はこの機能を使い、データを入力させ、そのデータを使って足し算、引き算、掛け算、割り算の結果を表示させてみましょう。

ポップアップ画面でデータを入力させる関数はprompt関数です。

(格納する変数) = prompt(入力を説明する文字列, 初期値);
 

記述例：
 answer = prompt(“答えを入力してください”, 10);

（初期値については省略可能です）

では、さっそく先ほどのpractice2.htmlをコピーしてpractice2-1.htmlを作ってみましょう。
そして、スクリプトを書き直して、以下のように記述してください。

var a= prompt("aを入力してください", 10);
var b = prompt("bを入力してください");

document.write("a = " + a + ", b = " + b + "の時<br>");
document.write("a + b = " + (a+b) + "<br>");
document.write("a - b = " + (ab) + "<br>");
document.write("a × b = " + (a*b) + "<br>");
document.write("a ÷ b = " + (a/b) + "<br>");

保存してブラウザでファイルを開いてください。
このような画面が出てきます。
 


aの入力については、初期値を設定していますので、初期値の10が表示されています。
そこで数値を入れてエンターキーを押すか、OKをクリックすると、aに入力舌データが格納され、次にbの入力を促す画面になります。
数値を入力して、エンターキーを押すかOKをクリックすると以下のような表示になるはずです。
（aに30、bに15を入力したと仮定します）


 
あれ？　a+bは3015じゃなくて45ですよね。

ほかの計算はいいのになんでここだけがおかしいのでしょうか。

実は、このprompt関数で入力されたものは、数字だろうとすべて「文字列として取り扱う」のです。
（それだけでなく、フォームのデータなどもすべて文字列として取り扱われます）

そのため、30と入力した場合、javascript側では「さんじゅう」ではなくて3という文字と0という文字の２文字と認識します。

前項で説明した通り、+は文字列の連結を行う記号でもありますから、”30”という文字列と”15”という文字列を連結させて、3015と表示されるわけです。

さて、じゃあなぜ引き算、掛け算、割り算は正しい数値になるのか？という疑問が起こります。
めんどくさいことですが、javascriptでは「-」は引き算演算子、「*」は掛け算演算子、「/」は割り算演算子以外の意味を持ちませんので、”30“ , ”15”という文字を数値に自動的に変換し、正しい演算子にしてくれます。（だから勘違いしてしまうんですが）
ためしに、aに30、bに1bという数字じゃない数を入れてみて演算結果を見てください。
 


と表示されます。NaNは、Not a Numberの略で、数値じゃないですという略語になります。
javascriptとしては足し算以外の演算子があったら、文字列でも数値化できないかを模索し、ダメなときはNaNを表示するのですね。

数値を入力しても文字列として扱われるわけですから、
入力されたデータが数値だったとしたら、文字列ではなく数値に変換させないと、いろんな演算において正しい結果になりません。

数字で書かれた文字列を数値に変換する関数を紹介します。
文字列を整数に変換したい場合は

parseInt(文字列);

文字列を実数（小数）に変換したい場合は

parseFloat(文字列);

を用います。IとFは大文字になりますので注意してください。大文字と小文字まですべて合わない限りは正しく動作しませんのでご注意ください。

さて今回は小数点なしの整数で考えることとします。そうなると

var a= prompt(“aを入力してください”, 10);

と書かれたスクリプトの後に

 a = parseInt(a);

と記述すると、文字列データだった変数aが数値データaに変換されます。

ちなみに、２行で書くのがめんどくさいと思われる場合は、以下のような形で１行で記述することができます。
 

var a= parseInt( prompt(“aを入力してください”, 10) );

さっそく、１行の形で最初の２行を変更しましょう。

var a= parseInt( prompt(“aを入力してください”, 10) );
var b= parseInt( prompt(“bを入力してください”) );

正しく表示されたことを確認してください。

数値を入力してくださいの時に数値じゃない文字を入力した際のエラー処理についてはまた後で学習しましょう。