解説・結果

ヨッシーの”ホームページを作ろう(JavaScript編)”Vol.8

問題1

<FORM>
<INPUT TYPE="button" VALUE="ボタンに触って〜" onMouseOver="alert('hello!')">
</FORM>

《結果》


《解説》


<FORM>                                         ←フォームの始まり
<INPUT TYPE="button" VALUE="ボタンに触って〜" onMouseOver="alert('hello!')">
↑フォームは"button"、onMouseOver(ボタンに触ったときに)="alert('hello!')"(警告'hello!'を出す)

</FORM>                   ←フォームの終わり


新しく使った命令はonMouseOverだね。
これはマウスのカーソルが(今の場合)ボタンの上にきたときに""で囲まれた命令をするという命令だったね。
もう一度確認しておこう。
onMouseOver="命令"

 

サンプル1

Q、現在勉強している言語の名前は?<br>
1.ジャバスプリント 2.ジャバスクリプト 3.ジャパンスクリプト<p>
<FORM>
<INPUT TYPE="button" VALUE="1だと思う" onClick="alert('ブー!!間違いです。おしいねぇ!')">
<INPUT TYPE="button" VALUE="2だと思う" onClick="alert('正解!あなたはもう完璧です!')">
<INPUT TYPE="button" VALUE="3だと思う" onClick="alert('ブー!!間違いです。おしいねぇ!')">
</FORM>

《結果》

Q、現在勉強している言語の名前は?
1.ジャバスプリント 2.ジャバスクリプト 3.ジャパンスクリプト


《解説》


Q、現在勉強している言語の名前は?<br>
1.ジャバスプリント 2.ジャバスクリプト 3.ジャパンスクリプト<p>    ←この2行はただのHTMLで文字を表示
<FORM>
<INPUT TYPE="button" VALUE="1だと思う" onClick="alert('ブー!!間違いです。おしいねぇ!')">
<INPUT TYPE="button" VALUE="2だと思う" onClick="alert('正解!あなたはもう完璧です!')">
<INPUT TYPE="button" VALUE="3だと思う" onClick="alert('ブー!!間違いです。おしいねぇ!')">
↑上の3つはそれぞれ、VALUEでボタンに表示する言葉を指定、このボタンを選んだとき(onClick関数)のコメントを警告ウィンドウで表示。
</FORM>


今回のサンプルプログラムは三択問題だよ。
まだ点数とかはつけられないけど見ている人にある答えを選んでもらってそれが正解かどうかを教えてあげるプログラムだね。
上の結果のところで3択問題をやってみよう。
大体どんな感じかがわかるよ。
まずはじめの2行はただのHTML文だね。
このサンプルで重要なのは<FORM>〜</FORM>の間の3つのボタンなんだ。
まず、見ている人に選んでもらえるようにそれぞれのボタンに言葉を表示しておく。(VALUE="●だと思う"の部分)
そして、それぞれのボタンを押してもらったときに表示するコメントをそのあとに入れておくんだね。
onClick="alert('コメント')":ボタンを押したときにコメントを警告ウィンドウで表示)
これで正解の場合は"正解"と出すプログラムが作れたね。