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

JavaScriptでテキストアラートを表示する方法｜alert()関数の使い方を解説

JavaScriptのalert()関数とは

JavaScriptのalert()関数は、ユーザーの画面上にポップアップメッセージを表示するために使用される関数です。簡単な通知や確認メッセージを伝えたい場面で活用でき、呼び出されるとユーザーが「OK」ボタンをクリックするまでスクリプトの処理が一時的に停止します。

サンプルコード

以下は、ボタンをクリックするとアラートポップアップを表示する具体的なコード例です。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
</style>
</head>
<body>
<h1>Javascript text alert</h1>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to trigger the alert popup</h3>
<script>
    let BtnEle = document.querySelector(".Btn");
    BtnEle.addEventListener("click", () => {
        alert("You pressed the button");
    });
</script>
</body>
</html>

実行結果

上記のコードをブラウザで開くと、次のような画面が表示されます。

JavaScriptでテキストアラートを表示する方法｜alert()関数の使い方を解説

続いて、「CLICK HERE」ボタンをクリックすると、以下のようなアラートポップアップが画面に現れます。

JavaScriptでテキストアラートを表示する方法｜alert()関数の使い方を解説

補足：alert()を使う際のポイント

alert()は非常に手軽な一方で、ダイアログが表示されている間はユーザーの操作がブロックされるため、頻繁に使用するとUX（ユーザー体験）を損なう可能性があります。開発中のデバッグ用途ではconsole.log()の方が便利なケースも多いため、目的に応じて適切に使い分けることをおすすめします。

  1. 【図解付き】JavaScriptにおけるオブジェクトの等価性をわかりやすく解説

    JavaScriptでは、文字列・数値・真偽値などのプリミティブ型はその「値」に基づいて比較されます。一方、オブジェクト(ネイティブオブジェクトでも独自に定義したカスタムオブジェクトでも)は「参照」に基づいて比較されます。 「参照による比較」とは、複数のオブジェクトがメモリ上の同じ場所を指しているかどうかを判定するという意味です。つまり、プロパティの中身が完全に一致していても、別々に生成された2つのオブジェクトは等しいとみなされません。 押さえておきたいポイント プリミティブ型: 値が同じであれば == や === の比較で true になる オブジェクト型: 同じインスタンス(同一の参照

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

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