【JavaScript 入門講座】入力ダイアログを利用して、ユーザー入力値を変数へ代入する( prompt () )
[JavaScript 入門講座]入力ダイアログを利用して、ユーザー入力値を変数へ代入する( prompt () )
本講座は簡単な講座である。 こんかい、「入力ダイアログ」という新しい命令が登場する。 この入力ダイアログを利用すると、そこそこアプリっぽい物ができる。 そのため、講座の早い段階でご紹介する。
入力ダイアログを利用する
001<script>
002
003var a = prompt () ;
004
005alert ( a );
006
007</script>
002
003var a = prompt () ;
004
005alert ( a );
006
007</script>
プログラムを実行すると、入力ダイアログが表示する。 入力ダイアログのテキストボックスに文字を入力して 「OK」ボタンを押下すると、テキストボックスに入力した文字列が、ダイアログに表示する。
では解説する。3行目で、「var a = prompt () ;」というプログラムを記述している。
まず左の「var a ;」の部分を解説する。
これは「変数aを宣言するプログラム」である。
つぎに、
「prompt () ;」を解説する。初めて見るプログラムである。
難しい。初めて見るものはなんでも難しく見える。
いままでalert()という命令文を利用してきた。
ここで見る「prompt () ;」も命令文の一つである。
では「prompt () 」はどのような命令文なのだろうか？
prompt() 入力ダイアログを表示する命令文である。 入力ダイアログを表示して、ユーザーが文字を入力すると、 その文字を戻す。
prompt()は入力ダイアログを表示する命令文である。 以前「プログラム言語はコンピューターに命令するための言語」という話をした。 なるほど、コンピューターに命令をしたら、コンピューターから 「命令を実行しました」という返事がほしいものだ。 あるいは、「仕事をした結果、このような物が完成しました」という完成品がほしいものだ。
戻り値 コンピューターに命令をした結果、コンピューターから戻ってくる値
prompt()はコンピューターに対して、 「ユーザーから入力値を受け取って、それを戻して」と命令する命令文である。 つまり、prompt()を実行すると、その 実行結果が戻る。 では、prompt()という命令をした結果、どのような実行結果が戻るのだろうか？
prompt()の戻り値 ユーザーが入力ダイアログに入力した文字。
prompt()の実行結果は「ユーザーが入力ダイアログに入力した文字列」である。 prompt()を実行すると文字列が戻ってくるので、その文字列を受け取る。 どうやって受け取るのかというと、変数で受け取る。 もう一度、一から解説する。
001<script>
002
003var a = prompt () ;
004
005alert ( a );
006
007</script>
002
003var a = prompt () ;
004
005alert ( a );
006
007</script>
3行目だが、prompt()が実行すると、入力ダイアログが開く。 入力ダイアログには、文字を入力するテキストボックスが存在する。 私と貴方がテキストボックスに文字を入力して、 入力ダイアログの下についているボタンを押下すると、 テキストボックスに入力した文字が変数aに代入される。 つまり、prompt()の実行結果を変数aで受け取る。 たとえば、入力ダイアログのテキストボックスに、「IORI」と入力すると、 このプログラムは、
001<script>
002
003var a = "IORI" ;
004
005alert ( a );
006
007</script>
このように、変数aに「IORI」という文字列が代入される。
prompt()の利用方法はご理解頂けただろう。では、解説を進める。
5行目でalert()を利用して、変数aに入っている値を表示する。
このプログラムは、次のプログラムと同じである。
002
003var a = "IORI" ;
004
005alert ( a );
006
007</script>
001<script>
002
003var a = "IORI" ;
004
005alert ( "IORI" );
006
007</script>
002
003var a = "IORI" ;
004
005alert ( "IORI" );
006
007</script>
プログラムを実行すると、「IORI」と表示する。 プログラムの解説は以上である。 prompt()は、ユーザーが入力した文字を戻してくれるので、便利である。
入力ダイアログに文字を表記する
あまりプログラミングとは関係が無いが、少しだけprompt()の利用方法を学習する。
001<script>
002
003var name = prompt ( "名前を入力して下さい" ) ;
004
005alert ( name );
006
007</script>
002
003var name = prompt ( "名前を入力して下さい" ) ;
004
005alert ( name );
006
007</script>
プログラムを実行すると、「名前を入力して下さい」と記載された 入力ダイアログが表示する。 テキストボックスに名前を入力して「OK」ボタンを押下すると、 テキストボックスに入力した名前がダイアログに表示する。
では、プログラムを解説する。
こんかい変更した部分は、
「prompt ( "名前を入力して下さい" )」
この部分である。prompt()の括弧の中に文字列「"名前を入力して下さい"」を記述した。
入力ダイアログが表示した時に、括弧の中に記述した文字列が
テキストボックスの上に記載される。
便利である。
まとめ
var a = prompt ( "[ラベル]" ) ;
