フォームボタンにマウスを重ねると警告ウィンドウが開くプログラムを作れ。
＜ヒント＞
マウスがある場所の上に乗った時、ある命令をさせるための関数。
onMouseOver = "命令" |
ＪａｖａＳｃｒｉｐｔ講座
（メールマガジン編）
７/２０日発行 ヨッシーの”ホームページを作ろう！（JavaScript編）”★Vol.8★
| イベント(マウスに関するプログラム） |
今回は"イベント"というものをやってみよう。
イベントとはページを見ている人が何か動作をしたときに何か処理をする。
つまり、そのページを見てくれている人があることをすると、それに合わせてプログラムを動かすというものなんだ。
今回はその中でもマウスを使った操作に対するイベントのプログラムをやってみよう。
言葉だけではよくわからないと思うので下の説明を読んで実際に使ってみよう。
※このイベントにはたくさんの種類がありますが、ここで取り上げるのはその中のいくつかにしておきます。
あまり書きすぎるとしつこいのと、あまり使わない、難しいなどの理由です。
| ★ クリックしたらプログラムを実行 ★ |
ページに移動してきた時にプログラムを動かすのではなく、あるボタンを押した時に何かプログラムを動かしたい時もあるね。
例えば、マウスでホームページのリンクを押したり、フォームのボタンを押したりしたときに、
警告のウィンドウを出したりしてお知らせをしてあげるとかね。
じゃあ、まず次のプログラムを見てね。
--ボタンを押すと警告ウィンドウ--
<FORM> ←フォームの始まり
<INPUT TYPE="button" VALUE="ボタンを押して〜" onClick="alert('hello!')"> ←onClick関数の入ったボタン
</FORM> ←フォームの終わり
このプログラムを一度実行してごらん。
(このプログラムは<BODY>〜</BODY>に配置してね)
フォームのボタンが出てきたね、じゃあそのボタンをマウスでクリックしてみよう。
警告ウィンドウと共に"hello!"っていう文字が現れたね。
じゃあ、今から一行ずつ見ていこう。
まず気をつけてほしいのが<SCRIPT>〜</SCRIPT>のタグが無いところだね。
深く考える必要は無いと思うけどこのイベントハンドラ(今回やる命令)については
このようにＨＴＭＬのタグと組み合わせて使うのでそれを覚えておこう。
このあといろいろなプログラムを書いていくとわかってくると思うからね。
フォームの基本についてはＨＴＭＬ講座で解説しているので、そっちを見てね。
今回出てきた新しい命令は、
onClick = "命令" |
これはリンクやボタン(今回の場合はフォームボタン)がマウスで押されたときに"命令"を実行するという命令だよ。
今回は
onClick = "alert('hello!')"
という命令をフォームのタグの中に入れてるね。
これはonClick(ボタンを押したときに)alert(警告を出す)という命令だね。
だからこれは、
"ボタンを押したときに警告を出す"
というプログラムになるんだ。
| ＜問題＞ フォームボタンにマウスを重ねると警告ウィンドウが開くプログラムを作れ。 ＜ヒント＞
|
この問題はそんなに難しくないと思う。
上のプログラムをもう一度よく見て問題を考えてみよう。
今回使ったonClickを使ったサンプルプログラムだよ。
実際にブラウザで実行して試してみよう。
| ＜サンプルプログラム＞ Ｑ、現在勉強している言語の名前は？<br> |
※これは<BODY>〜</BODY>に書くんだよ。
その他、たくさんのイベントがあるからそのうちのいくつかをここで挙げておこう。
自分の使いたいイベントを下から選んで自分でいろいろ作ってみようね。
| onClick | :リンクやフォームボタンをクリックしたとき |
| onLoad | :ページがロード（表示）されたとき |
| onUnload | :ページが変わるとき(ページから出るとき) |
| onMouseOver | :マウスがその場所(領域)に重なったとき |
| onMouseOut | :マウスがその場所(領域)から離れたとき |
| onSubmit | :フォームのsubmitボタンを押したとき |
| onReset | :フォームのリセットボタンを押したとき |
解説・結果