インタラクション: alert, prompt, confirm

デモ環境としてブラウザを使っているので、ユーザと対話するためのいくつかの関数を見ておきましょう: alert, prompt そして confirm です

alert

既にご覧になったと思いますが、メッセージを表示し、ユーザが “OK” をクリックするのを待ちます。

例:

alert("Hello");

メッセージのある小さいウィンドウは モーダルウィンドウ と呼ばれます。“モーダル” という言葉は、そのウィンドウを処理するまで（今の場合であれば、OKボタンを押すまで）、訪問者はページの他の部分と対話したり、他のボタンを押すことができないことを意味します。

prompt 機能は2つの引数を受け入れます:

result = prompt(title[, default]);

テキストメッセージ、訪問者のための入力フィールド、OK/CANCEL ボタンをもつ小窓を表示します。

構文中にある default を囲む角括弧は、パラメータがオプションであり必須ではないことを指します。

訪問者はプロンプトの入力フィールドに何か入力し、OKを押すかもしれません。または CANCEL ボタンの押下、もしくは Esc キーにより入力をキャンセルすることができます。

prompt の呼び出しはフィールドのテキスト、もしくは入力がキャンセルされた場合には null が返却されます。

例:

let age = prompt('How old are you?', 100);

alert(`You are ${age} years old!`); // You are 100 years old!

2つ目のパラメータは任意です。しかし、それを指定しない場合、Internet Explorer はプロンプトにテキスト "undefined" を挿入します。

確認する場合、Internet Explorer でこのコードを実行しましょう:

let test = prompt("Test");

なので IEで良く見えるようにするには、常に2つ目の引数を指定することが推奨されます。:

let test = prompt("Test", ''); // <-- for IE

構文:

result = confirm(question);

confirm 関数は question と 2つのボタンをもつモーダルウィンドウを表示します。: OK とキャンセル

OK が押された場合の結果は true で、それ以外は false です。

例:

let isBoss = confirm("Are you the boss?");

alert( isBoss ); // true OKが押された場合

訪問者とやり取りをするための3つのブラウザ固有の関数を説明しました。

alert: メッセージを表示します
prompt: ユーザにテキスト入力を求めるメッセージを表示します。テキスト、もしくはCANCEL/ Esc がクリックされた場合はすべてのブラウザは null を返します。
confirm: メッセージを表示し、ユーザが “OK” または “CANCEL” を押すのを待ちます。OKの場合は true を、CANCEL/Esc の場合は false を返します。

これらすべての関数はモーダルです: スクリプトの実行を中断し、メッセージが消えるまで訪問者がページの他の部分とやり取りするのを禁止します。

上のすべての関数で共有される2つの制限があります。:

それは単純化に対する代償です。より良いウィンドウを表示し、訪問者とのよりリッチなインタラクションを実現する方法もありますが、“必要以上の装飾” が重要でない場合、これらの方法が使えます。