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

ブラウザをデモ環境として使用するため、ユーザーとやり取りするためのいくつかの関数を見てみましょう: alert, prompt, confirm です。

alert

これはすでに見てきました。メッセージを表示し、ユーザーが「OK」を押すのを待ちます。

例えば

alert("Hello");

メッセージ付きのミニウィンドウは、モーダルウィンドウと呼ばれます。「モーダル」という言葉は、訪問者がウィンドウを処理するまで、つまりこの場合は「OK」を押すまで、ページの残りの部分を操作したり、他のボタンを押したりすることができないことを意味します。

関数 prompt は2つの引数を受け取ります

result = prompt(title, [default]);

テキストメッセージ、訪問者用の入力フィールド、および OK/キャンセルボタンを備えたモーダルウィンドウが表示されます。

上記の構文の default の周りの角括弧は、パラメータがオプションであり、必須ではないことを示します。

訪問者はプロンプトの入力フィールドに何かを入力して [OK] を押すことができます。すると、そのテキストが result に入ります。または、[キャンセル] を押すか、Esc キーを押して入力をキャンセルすると、result として null が取得されます。

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 if OK is pressed

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

alert: メッセージを表示します。
prompt: ユーザーにテキストの入力を求めるメッセージを表示します。テキストを返すか、[キャンセル] ボタンまたは Esc をクリックした場合は null を返します。
confirm: メッセージを表示し、ユーザーが「OK」または「キャンセル」を押すのを待ちます。OK の場合は true、キャンセル/ Esc の場合は false を返します。

これらのメソッドはすべてモーダルです。スクリプトの実行を一時停止し、ウィンドウが閉じられるまで、訪問者がページの残りの部分を操作することはできません。

上記のすべてのメソッドに共通する 2 つの制限事項があります。

それがシンプルさの代償です。訪問者とのより優れたウィンドウとより豊かなインタラクションを表示する他の方法もありますが、「ベルやホイッスル」があまり重要でない場合は、これらのメソッドでうまく機能します。