JavaScript メッセージボックスの例

JavaScript では、警告ボックス、確認ボックス、プロンプトボックスの 3 種類のメッセージボックスを作成できます。

警告ボックス

アラートボックスは通常、ユーザーが特定の情報を確実に取得できるようにするために使用されます。

警告ボックスが表示されたら、ユーザーは操作を続行するために「OK」ボタンをクリックする必要があります。

構文形式:

window.alert("警告テキスト");

ソースコードの例:

<!DOCTYPE html>
<html>
<ヘッド>
<メタ文字セット="utf-8">
<title>JS アラート ボックスの例</title>
<スクリプト>
関数myFunction(){
 alert("へへ、これは警告ボックスだよ!");
}
</スクリプト>
</head>
<本文>
 
<input type="button" onclick="myFunction()" value="警告ボックスを表示" />
 
</本文>
</html>

名前を付けて保存: JS 警告ボックス example.html

ブラウザでテストを実行すると、結果は次のようになります。

確認ボックス

確認ボックスは、ユーザーのアクションが受け入れられたことを確認するためによく使用されます。

確認ボックスがポップアップ表示されたら、ユーザーは「確認」または「キャンセル」をクリックしてユーザー操作を確認できます。

「確認」をクリックすると確認ボックスに true が返され、「キャンセル」をクリックすると確認ボックスに false が返されます。

構文形式:

window.confirm("テキスト");

ソースコードの例:

<!DOCTYPE html>
<html>
<ヘッド>
<メタ文字セット="utf-8">
<title>JS 確認ボックスの例</title>
</head>
<本文>
 
<p>ボタンをクリックすると確認ボックスが表示されます。 </p>
<button onclick="myFunction()">クリックしてください</button>
<p id="デモ"></p>
<スクリプト>
関数myFunction(){
 var x;
 var r=confirm("へへ、これはボックスの例です!");
 （r==true）の場合{
  //x="「OK」ボタンを押しました!";
  x='「OK」ボタンを押しました!';
 }
 それ以外{
  //x="「キャンセル」ボタンを押しました!";
  x='「キャンセル」ボタンを押しました!';
 }
 document.getElementById("デモ").innerHTML=x;
}
</スクリプト>
 
</本文>
</html>

名前を付けて保存: JS 確認ボックス example.html

ブラウザでテストを実行すると、結果は次のようになります。

ヒントボックス

プロンプトボックスは通常、ページに入る前にユーザーに値を入力するよう促すために使用されます。

プロンプトボックスが表示されたら、ユーザーは値を入力し、[確認] または [キャンセル] ボタンをクリックして操作を続行する必要があります。

ユーザーが [OK] をクリックすると、入力した値が返されます。ユーザーが「キャンセル」をクリックした場合、戻り値は null になります。

構文形式:

window.prompt("プロンプトテキスト","デフォルト値");

ソースコードの例:

<!DOCTYPE html>
<html>
<ヘッド>
<メタ文字セット="utf-8">
<title>JS プロンプト ボックスの例</title>
</head>
<本文>
 
<p>ボタンをクリックすると入力ダイアログが表示されます。 </p>
<button onclick="myFunction()">クリックしてください</button>
<p id="デモ"></p>
<スクリプト>
関数myFunction(){
 var x;
 var person = prompt("お名前を入力してください", "Tom");
 if (person!=null && person!=""){
     x="こんにちは" + 人 + "！今日の気分はどうですか?";
     document.getElementById("デモ").innerHTML=x;
 }
}
</スクリプト>
 
</本文>
</html>

名前を付けて保存: JS プロンプトボックス example.html

ブラウザでテストを実行すると、結果は次のようになります。