対話: alert, prompt, confirm

チュートリアルのこのパートは、環境依存なしでJavaScript “そのまま” を説明することを目的としています。

しかし、私たちはデモ環境としてブラウザを使っているので、最低限いくつかのユーザインタフェース機能について知っておく必要があります。このチャプターでは、ブラウザ機能である alert, prompt そして confirm について説明します。

alert

構文:

alert(message);

これはメッセージを表示し、ユーザが “OK” を押すまでスクリプトの実行を停止します。

例:

alert("Hello");

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

prompt

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

result = prompt(title[, default]);

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

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

訪問者はプロンプトの入力フィールドに何か入力し、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>
チュートリアルマップ

コメント

コメントをする前に読んでください…
  • 自由に記事への追加や質問を投稿をしたり、それらに回答してください。
  • 数語のコードを挿入するには、<code> タグを使ってください。複数行の場合は <pre> を、10行を超える場合にはサンドボックスを使ってください(plnkr, JSBin, codepen…)。
  • 記事の中で理解できないことがあれば、詳しく説明してください。