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

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

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

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • JS でよく使われるメッセージ ボックスの概要
  • JavaScript メッセージ ボックス効果 [実装コード]
  • JavaScript のクライアント メッセージ フレームワークの設計原則の詳細な説明
  • Extjs4 メッセージ ボックスは閉じるボタンを削除します (Ext.Msg.alert と同様)

<<:  mysqladmin を使用して MySQL インスタンスの現在の TPS と QPS を取得する方法

>>:  Tomcatの起動が遅い問題を素早く解決、超簡単

推薦する

UDP シンプル サーバー クライアント コード例

UDP の理論については詳しく説明しません。UDP に関する HelloWorld プログラムを紹介...

MySQLインデックスに関する詳細を共有する

数日前、同僚からMySQLのインデックスについて質問を受けました。大体わかっているのですが、まだ練習...

マークアップ言語 - 画像の置き換え

123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...

vue+canvasでタイムラインを描く方法

この記事では、参考までにvueキャンバスのタイムライン描画の具体的なコードを紹介します。具体的な内容...

Vueのハッシュジャンプ原理の詳細な説明

目次ハッシュと履歴の違いハッシュ履歴getCurrentLocation の実装setupListe...

Mysql の使用法の概要

導入EXISTS は、サブクエリが少なくとも 1 行のデータを返すかどうかを確認するために使用されま...

ホバードロップダウンメニューを実装するためのネイティブJS

JS はホバー ドロップダウン メニューを実装します。これは、フロントエンドの面接で遭遇するシナリ...

JS 1次元配列を3次元配列に変換する例

今日、CSDN の Q&A セクションで友人が質問をしているのを見ました。彼は 1 次元配列...

HTML タグの表示モード (ブロックレベル タグ、インライン タグ、インライン ブロック タグ) に関する簡単な説明

今日の講義では、HTML におけるタグの表示モードについてお話ししましたが、これはブロックレベルタグ...

MySQL INT型の完全な分析

序文: Integer は MySQL で最もよく使用されるフィールド型の 1 つで、通常は整数を格...

MySQLでMyISAMストレージエンジンをInnodbに変更した操作記録のまとめ

一般的に、MySQL はデフォルトでさまざまなストレージ エンジンを提供しており、次のように表示され...

MySQL DISTINCTの基本実装原理の詳細な説明

序文DISTINCT は、GROUP BY 操作の実装と非常によく似ていますが、GROUP BY の...

Antd+vueは円形属性フォームの動的検証のアイデアを実現します

必要な項目をループして検証するために、クエリ フォームのいくつかのプロパティを実装したいと考えていま...

MySQL で結果を選択して更新を実行する例のチュートリアル

1. 単一テーブルクエリ -> 更新 テーブル名の更新 フィールド1=新しい値1、フィールド2...

JS Canvas インターフェースとアニメーション効果

目次概要Canvas API: グラフィックスの描画パス線種矩形アーク文章グラデーションと画像の塗り...