入力した値は文字列
新規のプログラム「keisan3.html」を作成し、次のプログラムを入力してください。
1 2 3 4 5 6 7 8 9 |
<meta charset="UTF-8"> <script type="text/javascript"> var suji = window.prompt("数値を入力してください。"); suji = suji + 20; document.write(suji); </script> |
入力が完了したら実行してください。入力パネルが開きますので「123」と入力し「OK」ボタンを押下してください。
予想した結果になりましたか?6行目では次のように計算しています。しかし計算されていないようです・・・。
6 |
suji = suji + 20; |
入力した「123」が変数sujiに格納されていますので、123+20の計算が実行されるように見えます。しかしwindow.promptで入力された値は文字列になります。従って、数値と文字列のプラス(+)になり文字列連結の命令が実行されます。
6 |
suji = "123" + "20"; |
数値に変換
入力した値を数値として扱いたい時があります。そんな時に便利な命令があります。プログラム「keisan3.html」へ次のように6行目を追加してください。
1 2 3 4 5 6 7 8 9 10 |
<meta charset="UTF-8"> <script type="text/javascript"> var suji = window.prompt("数値を入力してください。"); suji = Number(suji); suji = suji + 20; document.write(suji); </script> |
追加が完了したら保存し、ブラウザの更新ボタンを押下してプログラムを再読み込みしてください。入力パネルが開いたら「123」と入力して「OK」ボタンを押してください。
今度は計算できたようですね。追加した6行目が文字列を数値に変換する命令です。
6 |
suji = Number(suji); |
Number
文字列を数値に変換する命令が「Number」です。「Number」のかっこ()の中に変換する文字列を記述します。
この入力方法を利用し色々な数値を計算してみてください。まだ自信のない場合はこの後のチャレンジをやってみてください。