JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのダイアログボックス3種類（alert・confirm・prompt）の使い方

JavaScriptのダイアログボックスとは？

JavaScriptには、ブラウザに標準で組み込まれた3種類のダイアログボックスが用意されています。これらを活用することで、ユーザーへの警告表示、操作前の確認、簡単なテキスト入力の受け付けなどを、追加ライブラリなしで実現できます。

この記事では、それぞれのダイアログボックスの特徴と使い方を、サンプルコードと実行結果をもとに順番に解説していきます。

1. alert：警告・通知を表示する

メッセージと「OK」ボタンのみを表示する、最もシンプルなダイアログです。処理完了の通知やエラーの告知などに適しています。

2. confirm：処理の確認を行う

「OK」と「キャンセル」の2つのボタンを表示し、ユーザーの選択結果を真偽値として返します（「OK」なら true、「キャンセル」なら false）。データの削除など、取り消せない操作の前に確認を求める場面でよく使われます。

3. prompt：ユーザーから入力を受け取る

メッセージとテキスト入力欄を表示し、ユーザーが入力した文字列を取得できるダイアログです。「キャンセル」された場合は null が返ります。

なお、これらのダイアログはすべてモーダル型であり、ユーザーが応答するまでページ上の他の操作がブロックされる点に注意しましょう。近年の本格的なWebアプリケーションでは、デザインを自由にカスタマイズできる独自のモーダルウィンドウを採用するケースも増えています。

実装サンプル

次のコードは、3種類のダイアログボックスをボタンのクリックで呼び出すHTML＋JavaScriptの例です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ダイアログボックスのデモ</title>
<style>
body {
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.sample {
   font-size: 18px;
   font-weight: 500;
}
</style>
</head>
<body>
<h1>ダイアログボックス</h1>
<div class="sample"></div>
<button class="alert">アラートボックス</button>
<button class="confirm">確認ダイアログ</button>
<button class="prompt">入力ダイアログ</button>
<h3>上のボタンをクリックすると、それぞれのダイアログが表示されます</h3>
<script>
let fillEle = document.querySelector(".sample");
document.querySelector('.alert').addEventListener('click',()=>{
   alert('こんにちは、世界！');
});
document.querySelector('.confirm').addEventListener('click',()=>{
   confirm('よろしいですか？');
});
document.querySelector('.prompt').addEventListener('click',()=>{
   prompt('お名前を入力してください');
});
</script>
</body>
</html>

実行結果

ボタンをクリックする前の初期画面：

JavaScriptのダイアログボックス3種類（alert・confirm・prompt）の使い方

「アラートボックス」ボタンをクリックした場合：

JavaScriptのダイアログボックス3種類（alert・confirm・prompt）の使い方

「確認ダイアログ」ボタンをクリックした場合：

JavaScriptのダイアログボックス3種類（alert・confirm・prompt）の使い方

「入力ダイアログ」ボタンをクリックした場合：

JavaScriptのダイアログボックス3種類（alert・confirm・prompt）の使い方

  1. JavaScriptでボタンクリック時にli要素を削除する方法

    Webアプリケーションでは、リスト項目を動的に削除できるようにしたいケースはよくあります。この記事では、各要素（li）に配置した「削除」ボタンをクリックすることで、該当する要素をJavaScriptだけで削除する方法を解説します。 前提：対象となる順序なしリスト（ul） 例として、次のような順序なしリスト（ul）を想定します。 <ul> <li class="subjectName">JavaScript <button>Remove</button></li> <br> <

  2. JavaScriptでHTMLボタンをクリックしたときにアラートを表示する方法

    ボタンをクリックしたときにアラートを表示するには、JavaScriptのaddEventListener()メソッドを使用します。例として、HTMLページ上に以下のようなボタンが配置されている場合を考えてみましょう。<button type=button>Please Press Me</button>サンプルコード以下は、ボタンがクリックされたときにアラートを表示する完全なコード例です。<!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8> &