JavaScript アドバンス

JavaScript ポップアップボックス

1. JavaScriptのポップアップボックス

JavaScriptには、以下の3種類のポップアップボックスが用意されています。

  • Alert box (アラートボックス)
  • Confirm box (確認ボックス)
  • Prompt box (プロンプトボックス)

2. アラートボックス (Alert Box)

アラートボックスは、ユーザーに特定の情報を確実に伝えたい場合によく使用されます。
アラートボックスが表示されると、ユーザーは「OK」をクリックしなければ次の操作に進むことができません。

2.1 構文 (Syntax)

window.alert("表示するテキスト");

window.alert() メソッドは、window プレフィックスを省略して記述することも可能です。

2.2 実装コードの例

alert("私はアラートボックスです！");

3. 確認ボックス (Confirm Box)

確認ボックスは、ユーザーに何かを検証（確認）させたり、承認させたりする場合に使用されます。
確認ボックスが表示されると、ユーザーは「OK」または「キャンセル」のいずれかをクリックして続行します。

  • ユーザーが 「OK」 をクリックした場合、メソッドは true を返します。
  • ユーザーが 「キャンセル」 をクリックした場合、メソッドは false を返します。

3.1 構文 (Syntax)

window.confirm("表示するテキスト");

window.confirm() メソッドも、window プレフィックスを省略して記述可能です。

3.2 実装コードの例

if (confirm("ボタンを押してください！")) {
  txt = "OKが押されました！";
} else {
  txt = "キャンセルが押されました！";
}

4. プロンプトボックス (Prompt Box)

プロンプトボックスは、ユーザーがページに入る前に入力値を求めている場合によく使用されます。
プロンプトボックスが表示されると、ユーザーは値を入力した後、「OK」または「キャンセル」をクリックして続行します。

  • ユーザーが 「OK」 をクリックした場合、メソッドは 入力された値 を返します。
  • ユーザーが 「キャンセル」 をクリックした場合、メソッドは null を返します。

4.1 構文 (Syntax)

window.prompt("メッセージ","デフォルト値");

window.prompt() メソッドも、同様に window プレフィックスを省略できます。

4.2 実装コードの例

let person = prompt("名前を入力してください", "ハリー・ポッター");
let text;

if (person == null || person == "") {
  text = "ユーザーによってプロンプトがキャンセルされました。";
} else {
  text = "こんにちは、" + person + "さん！今日の調子はいかがですか？";
}

5. ポップアップ内での改行 (Line Breaks)

ポップアップボックス内で改行を表示するには、バックスラッシュ（逆斜線）の後に n を付けた改行コードを使用します。

5.1 実装コードの例

alert("こんにちは\n調子はいかがですか？");