ステップ14 文字入力とエラー処理



プロンプトを利用するとは、キーボードから数値や文字を入力し、変数に代入することが可能となります。このステップでは、プロンプトを利用する方法、およびエラー対策用の処理について学習します。


14.1 プロンプトの利用方法


 ステップ13の「Sample13_2.html」では、2つの数値から最大公約数を求めるJavaScriptを作成しました。しかし、2つの数値を引数としてHTMLファイル内に記述しておく必要があるため、使い勝手はあまり良くありません。
 このような場合は、プロンプトを利用すると便利なホームページを作成できます。プロンプトは、キーボードから入力した数値や文字をJavaScriptの変数に代入できる機能で、たとえば、「2つの数値をキーボードから入力し、その最大公約数を求める」などの処理を実現することが可能となります。




 プロンプトを実行すると、上のボタンをクリックしたときのように数値や文字が入力できるウィンドウが表示されます。入力した数値や文字は、変数に代入されます。プロンプトを利用する場合は、以下のようにJavaScriptを記述します。


  変数名 = prompt("表示する文字","初期値");


 すると、「=」の左辺に記述した変数にプロンプトで入力した数値や文字が代入されます。表示する文字には、プロンプトウィンドウに表示する文字を指定します。また、初期値には、入力ボックスに初めから入力されている文字や数値を指定します。たとえば、以下のようにprompt( )を記述すると、入力ボックスに『ここに答えを入力』と表示されたプロンプトが表示されます。




 なお、入力ボックスを空白にしておく場合は、以下のように初期値を指定します。






14.2 プロンプトを活用したJavaScript


 続いては、プロンプトの活用例を紹介しておきましょう。以下は、「Sample13_2.html」を改良し、2つの数値をキーボードから入力すると、その最大公約数が表示されるようにしたものです。


Sample14_1.html


 この例では、ボタンをクリックすると関数「koyakusu( )」が実行されます。関数「koyakusu( )」では、プロンプトにより変数「a」「b」に値を代入し、求められた最大公約数をメッセージウィンドウに表示します。なお、最大公約数を求める処理方法は、基本的「Sample13_2.html」と同じです。


最大公約数

※以下のボタンをクリックし、2つの数値を入力すると、
最大公約数を表示できます。


図14-1 プロンプトの活用



14.3 エラー対策用の処理


 プロンプトを利用してホームページを作成する場合は、プロンプトに入力される内容にも注意しなければいけません。というのも、製作者が意図しない数値(または文字)をプロンプトに入力される場合もあるからです。
 このような状況に備えて、プロンプトを利用する際はエラー対策用の処理を講じておくのが基本です。たとえば、「Smaple14_1.html」の場合、以下のような状況に対応する処理を記述しておく必要があります。


 ①プロンプトに小数点以下を含む数値が入力された場合
 ②プロンプトに1未満の数値が入力された場合
 ③プロンプトに文字が入力された場合


 これらの入力に対してエラー対策用の処理を施したのが「Sample14_2.html」です。


Sample14_2.html(抜粋)

①小数点以下を含む数値の判別
 変数「a」「b」を1で割ったときの余り「ac」「bc」で判別できます。小数点以下を含む数値が入力された場合は、「ac」「bc」が0以外の数値になります。

②1未満の数値の判別
 「a<1」「b<1」の条件式で判別できます。

③文字の判別
 変数「a」「b」に文字が入力された場合は、それぞれを1で割った余り「ac」「bc」が0になりません。よって、「ac」「bc」が0以外であるかで判別できます。

 これらの判別を9行目のif文で行い、間違った入力であった場合は「1以上の整数を半角文字で入力してください!」というエラーメッセージを表示します。


最大公約数

※以下のボタンをクリックし、2つの数値を入力すると、
最大公約数を表示できます。


※文字や全角の数字を入力し、エラーメッセージが出るか確かめてください。

図14-2 エラー対策用の処理



演習


(1)以下のようなホームページを作成してみましょう。


問題

日本で最も面積が大きい“県”は何県でしょうか?



※答えは「岩手県」です。「北海道」やその他の県も入力してみて、どのように表示されるか確かめてみましょう。





※ここに直接入力できます。↓↓(テキストボックスのサイズは、右下の角をドラッグすると調節できます。)






→STEP13へ
→STEP15へ