ホーム>Web デザインのチュートリアル>JavaScript チュートリアル

インタラクション: アラート、プロンプト、確認

著者：Eve Cole 更新時間：2025-01-13 13:06:04

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

警告

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

例えば：

アラート("こんにちは");

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

プロンプト

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

 result = プロンプト(タイトル, [デフォルト]);

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

  • title

  • 訪問者に表示するテキスト。

  • default

  • オプションの 2 番目のパラメーター。入力フィールドの初期値です。

構文内の角括弧[...]

上記の構文のdefaultを囲む角かっこは、パラメーターが必須ではなくオプションであることを示しています。

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

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

例えば：

 let age = プロンプト('あなたは何歳ですか?', 100);

alert(`あなたは ${age} 歳です!`); // あなたは100歳です！

IE の場合: 常にdefaultを指定します

2 番目のパラメータはオプションですが、これを指定しない場合、Internet Explorer はプロンプトに"undefined"テキストを挿入します。

Internet Explorer でこのコードを実行すると、以下が表示されます。

 let test = プロンプト("テスト");

したがって、IE でプロンプトを適切に表示するには、常に 2 番目の引数を指定することをお勧めします。

 let test = プロンプト("テスト", ''); // <-- IE の場合

確認する

構文:

結果 = 確認(質問);

関数confirm 、 questionと 2 つのボタン ([OK] と [キャンセル]) を備えたモーダル ウィンドウを表示します。

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

例えば：

 let isBoss =confirm("あなたはボスですか?");

アラート( isBoss ); // OK が押された場合は true

まとめ

訪問者と対話するための 3 つのブラウザー固有の機能について説明しました。

  • alert

  • というメッセージが表示されます。

  • prompt

  • ユーザーにテキストの入力を求めるメッセージを示します。テキストを返すか、「キャンセル」ボタンまたはEscがクリックされた場合はnull返します。

  • confirm

  • メッセージが表示され、ユーザーが「OK」または「キャンセル」を押すのを待ちます。 OK の場合はtrueを返し、 Cancel/ Escの場合はfalse返します。

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

上記のすべての方法に共通する 2 つの制限があります。

  1. モーダル ウィンドウの正確な位置はブラウザによって決まります。通常は中央にあります。

  2. ウィンドウの正確な外観はブラウザによっても異なります。それを変更することはできません。

それがシンプルさの代償なのです。より見栄えの良いウィンドウを表示し、訪問者とのより豊かなインタラクションを行う方法は他にもありますが、「付加機能」があまり重要でない場合は、これらの方法で問題なく機能します。

タスク

シンプルなページ

重要度: 4

名前を入力して出力する Web ページを作成します。

デモを実行する

JavaScript コード:

 let name = プロンプト("あなたの名前は何ですか?", "");
アラート(名前);

ページ全体:

 <!DOCTYPE html>
<html>
<本文>

  <スクリプト>
    '厳密を使用';

    let name = プロンプト("あなたの名前は何ですか?", "");
    アラート(名前);
  </script>

</body>
</html>
関連記事