ダイアログボックス

javascript

ダイアログボックス

ダイアログボックスを試してみます。
ダイアログボックスは画面表示時に、ユーザの操作に関係なく、メッセージを「表示/確認/入力」する為のダイアログを表示します。

具体的には、alert、confirm、propmtがあり、それぞれブラウザの表示またはロード中の状態を停止した上で、画面描画系の操作を受け付けない形で表示されます。

主に、alertはプレーンテキストによるメッセージ、confirmはOK/キャンセルの確認ボタン、promptはユーザの入力待ちのダイアログボックス、をそれぞれ表示します。
下記にシンプルな例を書いて試してみます。

alert('入力お願いします');

do {
    name = prompt("お名前を入力してください");
    conf = confirm(name + 'でよろしいですか?');
} while (!conf || (name == '' || name == 'null'));

alert('入力ありがとう' + name + 'さん');

ブラウザで実行すると、まず最初に「入力をお願いします」というメッセージダイアログが表示されます。
ダイアログ上の「OKボタン」を押すと次に、「お名前を入力してください」というメッセージとともに、テキスト入力欄があるダイアログボックスが表示されます。
その次に「(入力したお名前)でよろしいですか?」という確認ダイアログが表示されます。
確認ダイアログでOKボタンを押した場合は、最後に「入力ありがとう(入力したお名前)さん」のメッセージが表示されます。

サンプルなので、実用性はほぼ無く入力チェック等は甘いですが、必要最小限の動作の確認はできました。

最もシンプルなダイアログボックスの表示方法ですが、最近のjavascript界隈の動きでは、reactやvue、その他ライブラリを使ったダイアログボックス、ダイアログウィンドウ、モーダルウィンドウ、等の表示方法、利用方法が多数あります。
利用シーンは開発環境、開発体制等に応じて実装方法を合わせていくようにすると良いかと思います。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です