ＪａｖａＳｃｒｉｐｔ講座
（メールマガジン編）
９/０４日発行 ヨッシーの”ホームページを作ろう！（JavaScript編）”★Vol.11★
| ★ 文字入力ダイアログ ★ |
今回は文字入力ダイアログについてやってみよう。
前回の"ＯＫ""キャンセル"ダイアログは、２つのボタンしかなかったよね。
今回の文字入力ダイアログはユーザに好きな文字を入力してもらえるんだ。
これを使えば、さらにいろいろな効果のプログラムを作ることができるよね。
まず、命令からやったみよう
prompt("表示するテキスト","初期値") |
| 文字入力ダイアログを表示する |
と書くんだ。
このprompt()という関数は、
入力されたテキスト(文字)が値として返ってくるんだ。
また、キャンセルを押したときには"null"(丸覚え)という値が返ってくるんだよ。
また、"初期値"というのは一番初めに表示しておくテキストのことだよ。
◆prompt()の役割◆
テキスト入力ダイアログが出る。
入力されたテキストが値として返ってくる。
キャンセルを押すと"null"という値が返ってくる。(丸覚え)
しかし、これもprompt()の命令だけじゃあまり意味が無いので、
ほかのif文や変数等と組み合わせて使ってやろう。
--テキスト入力ダイアログを使ったプログラム--
<HTML>
<HEAD>
<SCRIPT language="JavaScript">
<!--
function hello(){
name = prompt("あなたの名前を教えてください","名前");
alert("こんにちわ、"+name+"さん");
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<INPUT type="button" value="ボタンを押して！！" onClick="hello()">
</BODY>
</HTML>
≪結果≫
＜解説＞
<HTML>
<HEAD>
<SCRIPT language="JavaScript">
<!--
function hello(){
name = prompt("あなたの名前を教えてください","名前"); ←②テキスト入力によって入力された文字をnameに入れる。
alert("こんにちわ、"+name+"さん"); ←③nameと文字をつなげて、アラートで表示。
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<INPUT type="button" value="ボタンを押して！！" onClick="hello()">
↑①ボタンを押して、hello()の関数を呼び出す。
</BODY>
①：まず、今までのようにボタンを押すとhello()関数が呼び出される。
ここで次に、hello()関数を見てみよう。
②：name = prompt("あなたの名前を教えてください","名前");
これは、nameという変数にprompt()でユーザーが入力した結果が代入されるんだね。
(よくわからない人は、prompt()の部分が入力された文字に変わると考えよう)
③：alert("こんにちわ、"+name+"さん");
②でユーザーの入力した文字がnameいう変数に入ったよね。
そして、最後にそのname(=入力された文字)と好きな言葉を組み合わせて表示させているんだ。
※ちなみに"キャンセル"を押してみよう、”こんにちわ、nullさん”って出てくるね。
これは、キャンセルを押すとname=nullが入っているということだね。
| ＜問題＞ [命令]のところを埋めて、数字によっていろいろな色の背景に変えることができるプログラムを作れ。 ※"1"を入れると"赤"、"2"を入れると"青"、"3"を入れると"黄"になるように。 ～ここから～ |
解説・結果