【Javascript(イベントハンドラ)】同一ページ内で指定した部分へ遷移する部品
今回は、イベントハンドラについて簡単なものを作ったので紹介します。
【イベントハンドラとは】
ページを閲覧していて、
・プルダウンを選択したら、ページ繊維した
・文字や写真にマウスカーソルをあてたら、色が変わる写真が変わった
・ボタンをクリックしたら、、、
など、自分が起こしたアクションについて、まるでページと対話しているように様々な反応が返ってくると思います。
イベントハンドラとは、
「ユーザがおこしたアクションをイベントとして捉え、それに対して動的な動きをするというものだと思います。」
例)・文字や写真にマウスカーソルをあてた(アクション)ら、色が変わる写真が変わった(動的な動きを返す)
この「イベントハンドラ」は、他の方のHPや会社のHPなどさまざまな場所に使用されています。
【いろんなイベントハンドラ】
onfocus:要素が入力フォーカスを得たとき
onclick :マウスでクリックされたとき
onmouseover:マウスが要素に乗ったとき
【処理の流れ】
1、プルダウンで選択した時にイベントハンドラの発生
2、選択されているプルダウンのインデックス(順番)を取得
3、選択されているプルダウンのインデックス(順番)からvalueの取得
4、3で取得したvalueを指定したURLへ移動するオブジェクトに代入
※移動した先の微調整が課題
【静的なページから動的なページへ】
イベントハンドラを使用することによって、以下のような変化あると思います。
1、「一方向から双方向へ」
ページからユーザに一方的に配信される情報から、ユーザ と閲覧ページが 双方向になる
2、「単純に楽しい」
単純に楽しい作り手としては、ここをクリックしたらこうさせようとか、考え るのが単純に楽しい
【以下参考ソース】
<html>
<head></head>
<body>
<select onChange="location.href=this.options[this.selectedIndex].value" size="2">
<option value="#collect">あつめる</option>
<option value="#arrange">まとめる</option>
<option value="#learn">まなぶ</option>
<option value="#use">つかう</option>
<option value="#etc">おまけ</option>
</select>
<script Language="JavaScript" type="text/javascript">
</script>
<h1>あつめる</h1>
<a id="collect">
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
<h1>まとめる</h1>
<a id="arrange">
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
<h1>まなぶ
<a id="learn"></a>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
<h1>つかう</h1>
<a id="use">
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
<h1>おまけ</h1>
<a id="etc">
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</body>
</html>