JavaScript ポップアップ・ボックス

❮ 前章へ 次章へ ❯

JavaScriptには、Alert ボックス、Confirm ボックス、Prompt ボックスという3種類のポップアップボックスがあります。


alert ボックス

情報がユーザに確実に届くようにするために、alert ボックスがよく使われます。

alert がポップアップしたときには、ユーザは "OK" をクリックして続行する必要があります。

構文

window.alert("sometext");

window.alert() メソッドは、windowの接頭辞を付けないで記述することができます。

alert("I am an alert box!");
Try it Yourself »

Confirm ボックス

ユーザが何かを確認したり受取る場合に、confirm ボックスを使用することがよくあります。

confirm ボックスがポップアップしたときには、ユーザは "OK" または "Cancel" のいずれかをクリックして続行する必要があります。

ユーザが "OK" をクリックすると、ボックスはtrueを返します。ユーザが "Cancel" をクリックすると、ボックスはfalseを返します。

構文

window.confirm("sometext");

window.confirm() メソッドは、windowの接頭辞を付けないで記述することができます。

var r = confirm("Press a button");
if (r == true) {
    x = "You pressed OK!";
} else {
    x = "You pressed Cancel!";
}
Try it Yourself »

Prompt ボックス

prompt ボックスは、ページに入る前に、ユーザに値を入力して欲しい場合によく使用されます。

prompt ボックスがポップアップしたときは、input に値を入力した後に、"OK" または "Cancel" をクリックして続行する必要があります。

ユーザが "OK" をクリックすると、ボックスは入力値を返します。ユーザが "Cancel" をクリックすると、ボックスはnullを返します。

構文

window.prompt("sometext","defaultText");

window.prompt() メソッドは、windowの接頭辞を付けないで記述することができます。

var person = prompt("Please enter your name", "Harry Potter");
if (person != null) {
    document.getElementById("demo").innerHTML =
    "Hello " + person + "! How are you today?";
}
Try it Yourself »

改行

ポップアップ・ボックス内に改行を表示するには、バックスラッシュに続けて文字 n を使用します。

alert("Hello\nHow are you?");
Try it Yourself »

❮ 前章へ 次章へ ❯