新卒から文系エンジニア→人材業界に転職した人のブログ

新卒から文系エンジニア→人材業界に転職。技術・スキルがないためブログを通して勉強。その後、IT業界の業界知識が活かせる人材業界へ。異業種×異職種の転職経験有り。

このエントリーをはてなブックマークに追加

【Javascript(イベントハンドラ)】同一ページ内で指定した部分へ遷移する部品

今回は、イベントハンドラについて簡単なものを作ったので紹介します。

 

 

 

イベントハンドラとは】

ページを閲覧していて、

 

 ・プルダウンを選択したら、ページ繊維した

 ・文字や写真にマウスカーソルをあてたら、色が変わる写真が変わった

 ・ボタンをクリックしたら、、、

 

など、自分が起こしたアクションについて、まるでページと対話しているように様々な反応が返ってくると思います。

 

イベントハンドラとは、

「ユーザがおこしたアクションをイベントとして捉え、それに対して動的な動きをするというものだと思います。」

 

 例)・文字や写真にマウスカーソルをあてた(アクション)ら、色が変わる写真が変わった(動的な動きを返す)

 

 

 

この「イベントハンドラ」は、他の方のHPや会社のHPなどさまざまな場所に使用されています。

 

 

【いろんなイベントハンドラ

 onfocus:要素が入力フォーカスを得たとき

 onclick   :マウスでクリックされたとき

    onmouseover:マウスが要素に乗ったとき

 

 

 参考サイト:http://www.crystal-creation.com/web-appli/technical-information/programming/javascript/event/handler/

 

 

【処理の流れ】

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>

.hatena-module:nth-of-type(10) { background: transparent; } .hatena-module:nth-of-type(10) .hatena-module-title{ display: none; } .hatena-module:nth-of-type(10) .hatena-module-body { padding: 0; }