promptJavaScript入門

インプットボックスの使い方

インプットボックスを出すにはprompt()を使います。

変数 = prompt( "質問文" , "最初に表示する文字" );

インプットボックスを出します。

カッコ内の最初の項目は質問文、2番目の項目は初期表示文字を指定します。

ユーザーの入力した文字列は、変数に代入されます。

以下のスクリプトは、promptを使って名前を入力してもらい、 入力文字をページ上に表示するサンプルです。

<script>

var str;  //入力文字を入れる変数

//インプットボックスの表示＆入力文字をstrに代入
str = prompt("お名前を教えて下さい。","");

//strが空の場合の処理
if (str == "") str = "名無しの権兵衛";

//名前を表示する
document.write("<center>");
document.write("ようこそ、<b>" + str + "</b>さん！");
document.write("</center>");

</script>

サンプル（別窓）

スクリプトの解説

var str;

上から順に解説してみましょう。 まず変数strを宣言します。 これはビジターが入力してくれた文字を入れるための変数です。

str = prompt("お名前を教えて下さい。","");

次にprompt()でインプットボックスを出します。 括弧内は２つの区分があります。 最初の部分は質問文を記入し、後ろの部分は入力枠に表示する文字を指定します。 今回は入力枠に何も表示する必要が無いので、空にしています。 文字列ですからクォーテーションで囲み、２つの区分の間は半角コンマで区切ります。

if (str == "") str = "名無しの権兵衛";

次に、ビジターが何も入力せずにＯＫを押した場合の処理を書きます。 if文でstrを調べ、空であれば「名無しの権兵衛」を代わりに代入します。

document.write("<center>");
document.write("ようこそ、<b>" + str + "</b>さん！");
document.write("</center>");

最後にdocument.writeで歓迎文を書き出します。 上のサンプルでは３回に分けて書いていますが、 これは画面の横幅の関係で１行で書けなかったためです。 別に１つにまとめて書いてくださって構いません。

キャンセルを押された時の処理

さて、上記のソースのままだと、 インプットボックス上でキャンセルを押された場合に不具合が出ます。 試しにやってみると分かりますが、nullと表示されると思います。

このnullというのは、データが無い状態を表します。 ＯＫを押した場合は、空ですが一応文字列データ""が代入されます。 しかしキャンセルを押された時はそのデータすら無い状態なのです。

ということで、上記ソースのif文の後に、もう１つチェック文を付け加えましょう。

if (str == "") str = "名無しの権兵衛";
if (str == null) str = "名無しの権兵衛";

以下のようにまとめて書くことも可能です。‘||’はor（どちらか）という意味です。

if ( (str == "") || (str == null) ) str = "名無しの権兵衛";

サンプル（別窓）

これでキャンセルを押されても大丈夫です。 promptでキャンセルを押された場合はnullという状態になることを覚えておきましょう。