2021年3月13日

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

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

alert

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

例:

alert("Hello");

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

prompt

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

result = prompt(title[, default]);

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

title
訪問者へ表示するテキストです。
default
任意の2つ目のパラメータで、入力フィールドの初期値です。
構文 [...] の角括弧

構文中にある 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!
IE: 常に デフォルト を設定してください

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

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

let test = prompt("Test");

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

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

confirm

構文:

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つの制限があります。:

  1. モーダルウィンドウの正確な位置はブラウザによって決定されます。通常それは中央です。
  2. ウィンドウの正確な見た目もまたブラウザに依存し、それを修正することはできません。

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

タスク

重要性: 4

名前を訪ねて、それを出力する web ページを作りなさい。

デモを実行

JavaScriptコード:

let name = prompt("What is your name?", "");
alert(name);

完全なページ:

<!DOCTYPE html>
<html>
<body>

  <script>
    'use strict';

    let name = prompt("What is your name?", "");
    alert(name);
  </script>

</body>
</html>
チュートリアルマップ