【alert関数】JavaScriptによるダイアログの表示方法

JavaScriptのalert関数は、ブラウザでポップアップメッセージボックスを表示するために使用されます。このメッセージボックスにはOKボタンが含まれており、ユーザーがOKをクリックすると、ボックスは閉じます。

alert()の基本的な使い方

alert関数は、以下のように使用します。

alert("これはアラートボックスです！");

このコードは、テキスト「これはアラートボックスです！」を含むアラートボックスを表示します。

実際に使ってみる

ここからはHTMLと組み合わせて、実際にalertを最もシンプルに使ってみましょう。

1. HTMLファイルの準備

まず、シンプルなHTMLファイルを用意します。以下はその基本的な構造です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Alert Demo</title>
</head>
<body>
    <button onclick="showAlert()">アラートを表示</button>

    <script src="script.js"></script>
</body>
</html>

このHTMLファイルを開くと、ブラウザ上に次の画像のようなボタンが表示されます。

2. JavaScriptのコーディング

次に、script.jsという名前のJavaScriptファイルを作成し、以下のコードを書きます。

function showAlert() {
    alert("こんにちは！これはJavaScriptのアラートです。");
}

この関数showAlertは、先ほどのボタンがクリックされたときにアラートボックスを表示します。

3. テスト

上記のHTMLファイルとJavaScriptファイルを同じディレクトリに保存します。
HTMLファイルをブラウザで開きます。
「アラートを表示」ボタンをクリックして、アラートボックスが表示されることを確認します。

これで、JavaScriptのalert関数の基本的な使い方と、それを利用した小さなプロジェクトの作成方法について学ぶことができました。この基本をマスターすれば、より複雑なJavaScriptプログラミングに挑戦する基盤を築くことができます。