2.6 alert、prompt、confirmによるインタラクション


プレゼンテーション環境としてブラウザを使用しているため、ブラウザ環境で使用される最低ユーザーインタフェース機能:alertpromptconfirmalertについて説明します.
alert확인(OK)関数を実行すると、ユーザーがpromptボタンを押すまでウィンドウが表示されます.
alert("Hello");
メッセージ付きの小さなウィンドウは、モールドウィンドウと呼ばれます.「モード」という言葉には、ページの残りの部分と対話できないという意味が含まれています.このため、ユーザは、モードウィンドウ外のボタンを押下するような行為をすることができない.確認ボタンを押すまで.
prompt
ブラウザが提供する**title**関数は、2つのパラメータを受け入れます.
result = prompt(title, [default]);
関数が実行されると、テキストメッセージと入力フィールド(inputfield)、OK(OK)、キャンセル(cancle)ボタンを含むモードウィンドウが表示されます.**default**ユーザーに表示する文字列[...]フィールドの初期値を入力(オプション)
括弧で囲まれた引数の意味defaultを含む括弧は、パラメータが必須値ではなくオプション値であることを示します.
プロンプト・ダイアログ・ボックスの入力フィールドに必要な値を入力して、「OK」をクリックします.値を入力したくない場合は、[キャンセル](Cancle)ボタンを押すか、ESCを押してダイアログボックスを終了します.prompt関数は、ユーザが入力フィールドに記録した文字列を返す.ユーザが入力をキャンセルすると、nullに戻ります.
例)
let age = prompt('나이를 입력해주세요.', 100);

alert('당신의 나이는 ${age}살 입니다.'); // 당신의 나이는 100살 입니다.
確認ダイアログ
構文:
result = confirm(question);
confirm関数には、パラメータが受信したquestion(질문)と、確認およびキャンセルボタン付きのモードウィンドウが表示されます.
ユーザは確認ボタンを押してtrueに戻り、その他の場合はfalseに戻る.
例)
let isBoss = confirm("당신이 주인인가요?");

alert(isBoss); // 확인 버튼을 눌렀다면 true가 출력된다.
サマリ
ブラウザは、ユーザーと対話できる3つの関数を提供します.alert-情報が表示されます.prompt−入力フィールドは、ユーザにテキストの入力を促すとともに提供される.「OK」をクリックしてユーザーが入力した文字列promptに戻り、「キャンセル」または「ESC」をクリックしてnullに戻ります.confirm−ユーザが確認またはキャンセルボタンを押す前に、メッセージがウィンドウに表示される.ユーザは確認ボタンを押してtrueに戻り、キャンセルボタンまたはESCを押してfalseに戻る.
これらの関数はすべてモードウィンドウを表示し、モードウィンドウが表示されるとスクリプトは実行を一時停止します.ユーザーがウィンドウを閉じるまで、残りのページはインタラクティブではありません.
3つの関数には2つの制約があります.
  • モードウィンドウの位置はブラウザによって決定され、通常はブラウザの中央に位置する.
  • モードウィンドウの外観はブラウザによって異なります.開発者はウィンドウのマスターを変更できません.
  • これらの制限は簡潔性のために払った代価である.ウィンドウをきれいにしたり、複雑にしたりする方法もありますが、「ファッションのための付加機能」が必要でなければ、基本的な方法で十分です.
    課題
    単純ページの作成
    ユーザーの名前を尋ね、入力した名前で出力するページを作成します.
    let name = prompt("이름을 입력해주세요!", "");
    
    alert(name);