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

JavaScriptでアラートボックスを作成する方法

アラートボックスとは何ですか？

アラートボックスは、ある種のユーザーインタラクション（クリック、スクロール、入力など）への応答としてポップアップする小さなウィンドウです。アラートボックスは主に、問題についてユーザーに警告するために使用されます ただし、単にエンドユーザーに通知するためにも使用されます。

警告ボックスを使用する一般的な例は、ユーザーがフォームの送信ボタンをクリックしたが、必須フィールドに入力するのを忘れた場合です。アラートボックスには、問題をユーザーに説明するメッセージが表示されます。

JavaScriptでアラートボックスを作成する方法

アラートボックスの作成方法

上のスクリーンショットから正確なアラートボックスを複製しましょう。

まず、トリガーとして使用するボタン要素の作成を追加します：

<button onclick="missingFieldWarningPopup()">Submit form</button>

次に、このJavaScript関数を.jsに追加します。 ファイル：

function missingFieldWarningPopup() {
  alert("You forgot to fill out all the required input fields!")
}

コードで何が起こるか： ボタン要素にはonclickがあります クリックイベントトリガーとしての属性。ユーザーがボタンをクリックすると、クリックイベントがmissingFieldWarningPopup()を呼び出します。 alert()をポップアップする関数 プロンプトウィンドウが表示され、内部に文字列（テキスト）が表示されます。

JavaScript関数をインラインとして追加する場合は、 コードを作成し、これを<head>内に追加します HTMLドキュメントの要素：

<script type="text/javascript">
  function missingFieldWarningPopup() {
    alert("You forgot to fill out all the required input fields!")
  }
</script>

サンプルコード。


  1. JavaScriptで定数を作成するにはどうすればよいですか？例を挙げて説明します。

    以下は、JavaScriptで定数を作成するためのコードです- 例 <!DOCTYPE html> <html> <head> <style>    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    } </style> </head> <body> <h1>Const example</h1>

  2. CSSでフリップボックスを作成するにはどうすればよいですか？

    CSSでフリップボックスを作成するためのコードは次のとおりです- 例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style>    body {       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-seri