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

JavaScriptのprompt()メソッドとは？使い方とサンプルコードをわかりやすく解説

prompt()メソッドによるダイアログボックスは、テキスト入力欄をポップアップ表示してユーザーから入力を受け取りたい場合に非常に便利な機能です。これにより、Webページ上でユーザーとの対話的なやり取りが可能になります。ユーザーは表示された入力欄に文字を入力し、「OK」ボタンをクリックすることで値を送信できます。

このダイアログボックスは、JavaScriptのprompt()メソッドを呼び出すことで表示されます。戻り値としてユーザーが入力した文字列が返され、キャンセルボタンが押された場合はnullが返される点がポイントです。

サンプルコード

以下は、JavaScriptでプロンプトダイアログを表示する具体的なコード例です。

<!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;
}
.result {
    font-size: 18px;
    font-weight: 500;
    color: blueviolet;
}
</style>
</head>
<body>
<h1>JavaScript Prompt() method</h1>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to get the prompt dialogue box</h3>
<script>
let resultEle = document.querySelector(".result");
document.querySelector(".Btn").addEventListener("click", () => {
    let res = prompt("Are you sure");
    if (res === null) {
        resultEle.innerHTML = "You pressed cancel";
    } else {
        resultEle.innerHTML = "You entered " + res + " in the prompt box";
    }
});
</script>
</body>
</html>

コードのポイント

  • ボタンがクリックされると、prompt("Are you sure")によってダイアログが表示されます。
  • 戻り値がnullの場合（キャンセルが押された場合）は「キャンセルしました」というメッセージを表示します。
  • 値が入力されて「OK」が押された場合は、入力内容を画面に反映します。

実行結果

ページを読み込むと、次のような画面が表示されます。

JavaScriptのprompt()メソッドとは？使い方とサンプルコードをわかりやすく解説

「CLICK HERE」ボタンをクリックし、プロンプトボックスに任意の文字を入力した状態がこちらです。

JavaScriptのprompt()メソッドとは？使い方とサンプルコードをわかりやすく解説

続いて、プロンプトボックスで「OK」をクリックすると、入力した内容が画面に表示されます。

JavaScriptのprompt()メソッドとは？使い方とサンプルコードをわかりやすく解説

まとめ

prompt()メソッドを使えば、追加のUI要素を作成することなく、手軽にユーザーからの入力を受け取れます。ただし、キャンセル時にはnullが返るため、必ずnullチェックを行うことが実務上重要です。シンプルな確認や簡易的なデータ取得に活用してみてください。

  1. JavaScriptのunescape()関数とは？使い方とサンプルコードをわかりやすく解説

    JavaScriptのunescape()関数は、escape()関数によってエンコードされた文字列をデコード（元に戻す）ための関数です。ただし、この関数はECMAScript v3以降で非推奨（deprecated）とされており、現在では代わりにdecodeURI()やdecodeURIComponent()を使用することが推奨されています。レガシーなコードの理解や保守の際に役立つ知識なので、ここで基本的な動作を確認しておきましょう。unescape()関数の基本的な使い方以下のコードは、unescape()関数を使ってエンコードされたURL文字列をデコードする例です。ボタンをクリックすると

  2. JavaScriptにおける継承の基本を具体例で解説

    JavaScriptは、クラスベースではなくプロトタイプベースのオブジェクト指向言語です。そのため、継承はprototype（プロトタイプ）オブジェクトを通じて実現されます。コンストラクタ関数のprototypeプロパティにメソッドやプロパティを追加すると、そのコンストラクタから生成されたすべてのインスタンスが、それらを共有して利用できるようになります。 プロトタイプによる継承の仕組み JavaScriptでは、インスタンスからプロパティやメソッドが参照されるとき、まずオブジェクト自身を検索し、見つからなければプロトタイプチェーンをたどって上位のオブジェクトへと探しに行きます。これにより、各イ