JavaScriptでpromptを使って情報を受け取る方法【初心者向け】

JavaScriptで【prompt】を使って情報を受け取る方法をプログラミング初心者向けに解説した記事です。promptを使うと、ポップアップが表示され文字列や値が入力できるようになります。初期値の設定方法も合わせて紹介。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptをプログラミング初心者向けに紹介した記事です。

今回は、JavaScriptでpromptを使って情報を受け取る方法について解説します。

また、入門向けにJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

本記事では、テキストエディタのmiを使っていますが、JavaScriptの場合はWebブラウザとテキストエディタがあれば特別な開発環境がなくても開発することができます。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

今回の記事の内容は動画でもご覧いただけます。
テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。

 

入力ダイアログとは

Webサイトでユーザー情報を登録している時など、次のようなポップアップが表示され、文字列や値の入力を求められることがあるかと思います。これを入力ダイアログといいます。

入力ダイアログ

Webページを作る上では使用頻度の高い機能なので、alertconfirmなどと合わせ、是非作り方を覚えましょう。

 

田島悠介

今回は入力ダイアログを書いてみるよ!

大石ゆかり

前に警告ウィンドウを出すalert関数とOKかキャンセルかの確認を取るconfirm関数がありましたが、入力ダイアログというのは何でしょうか?

田島悠介

確認ダイアログに、文字列を入力することが出来るようになったものなんだよ。

大石ゆかり

ユーザーからの入力をJavaScriptで受け取ることが出来るんですねー。

 

promptを使って入力ダイアログを表示させる

JavaScriptで入力ダイアログを表示させるときは、promptを使って、単純に次のようなプログラムを書きます。

<script>
  var 変数 = prompt(‘表示させたい文字列、値’);
  document.write(変数);
</script>

 

 

では、ためしに「名前を入力してください」という文字列を表示させてみましょう。

<!DOCTYPE html>
<html lang = "ja">
  <head>
    <meta charset = "utf-8">
    <title>JavaScriptの練習</title>
  </head>
  <body>
    <script>
      var name = prompt("名前を入力してください");
      document.write(name);
    </script>
  </body>
</html>

 

PC画面上でほかのウィンドウよりも手前に入力ダイアログボックスがポップアップ表示されます。

入力ダイアログ

ここで入力欄に名前を入力します。

煌太郎

 

[OK]を押すとダイアログボックスが消え、ブラウザにそのまま「煌太郎」と返されました。

煌太郎ブラウザ

 

[キャンセル]を押すと、「Null」と返されました。

null

 

このように、confirmが[OK]と[キャンセル]どちらのボタンを押すかの二択だったのに対し、promptではユーザーに情報の入力を求めます

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

入力ダイアログに初期値を設定する

ちなみにpromptでは、入力ダイアログボックスの入力欄に、はじめから文字列や値(初期値)を入れておくこともできます。

その時は、promptの( )内に入力したい文字列や値を「,」で区切ってそのまま続けて加えましょう。

 

 

初期値に「キラメキタロウ」を設定すると……

<script>
  var name = prompt("名前を入力してください","キラメキタロウ");
  document.write(name);
</script>

 

このように表示されました。

キラメキタロウ

 

 

JavaScriptでpromptを使って情報を受け取る方法については以上です。

他に、JavaScriptでconfirmを使って確認ダイアログを表示させる方法もあるので合わせてご覧ください。

 

大石ゆかり

ユーザーからの入力をJavaScriptの変数で受け取ることが出来るので、応用が効きそうですね。

田島悠介

そうなんだ。それを元にして何かの処理をしてもいいしね。

大石ゆかり

ダイアログを表示できるのは、alert関数とconfirm関数とprompt関数ですね。

田島悠介

その通り!

 

[お知らせ]TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。プログラミングの初心者でも受講可能です。