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の起動が遅い問題を素早く解決、超簡単

推薦する

HTMLヘッダータグの使用に関する詳細な説明

HTMLはヘッドとボディの2つの部分で構成されています** ヘッド内のタグはヘッドタグです** タイ...

MySQL の自己結合重複排除に関する注意事項

機能シナリオを簡単に説明しましょう。データ行フィールドは次のとおりです。名前開始日時タイプこの表では...

インデックスは MySQL クエリ条件で使用されますか?

雇用主から MySQL クエリ条件でインデックスが使用されるかどうかを尋ねられた場合、どのように答え...

UbuntuでMySQLデータベースファイルディレクトリを変更する方法

序文同社の Ubuntu サーバーは、さまざまなシステムのディレクトリを異なる論理パーティションに配...

HTML と CSS の基礎 (必読)

(1) HTML: ハイパーテキストマークアップ言語。主に「ヘッダー」と「ボディ」の2つの部分で構...

Tomcat で JNDI データ ソースを構成する 3 つの方法

これまでの仕事では、開発サーバーは一般的にTomcatでした。データソースは、多くの場合、appli...

Mysqlの日付と時刻関数を扱う記事

目次序文1. 現在の時刻を取得する1.1 現在の日付と時刻を返す1.2 現在の日付を取得する1.3 ...

シンプルなカルーセル効果を実現するネイティブ js

この記事では、シンプルなカルーセル効果を実現するためのjsの具体的なコードを参考までに紹介します。具...

Linux デュアル ネットワーク カード バインディング スクリプト メソッドの例

Linux の操作と構成作業では、デュアル ネットワーク カードのバインディングがよく使用されます。...

Docker共通コマンドの詳しい解説 Study03

目次1. ヘルプコマンド2. ミラーコマンド3. コンテナコマンド1. ヘルプコマンド1. 現在のD...

CSSアニメーションがJSによってブロックされるかどうかについての簡単な議論

CSS のアニメーション部分は JS によってブロックされますが、transform のアニメーショ...

MySQL 外部キー設定方法の例

1. 外部キーの設定方法1. MySQL では、2 つのテーブルを関連付けるために、外部キー (FO...

Dockerコンテナの原理の分析

目次01 コンテナの本質とは何か? 02 Cgroupテクノロジーと名前空間テクノロジーの概要03 ...

MySQL5.7.27-winx64 バージョン win10 のダウンロードとインストールのチュートリアル図

MySQL 5.7 のインストール私たちは学校で MySQL データベースを学んでいます。先生は私た...

JavaScript を使用してハイパーリンクのリダイレクトを防ぐ方法 (複数の書き方)

JavaScript を使用すると、ハイパーリンクがジャンプするのを防ぐことができます。方法は次の...