Webデザインの勉強と製作 | あかとんぼ

フェリカテクニカルアカデミーの学習をベースに、Webについての勉強と製作の過程をまとめています。

[JavaScript]⑦イベント駆動型モデル

JavaScript
  • イベント駆動型モデル
  • clickイベント
  • loadイベント
  • thisキーワード
  • 課題：画像を置き換える

イベント駆動型モデル

  • 何かのきっかけで処理を行うことをイベントという
  • イベントが発生したときに対応する処理をよびだす仕組みをイベント駆動型モデルという
  • それぞれのイベントと任意の処理をあらかじめ関連付けると、イベントハンドラという機能がイベントの発生を検知し対応する処理を呼び出す
  1. イベント発生
  2. イベントハンドラがイベントの発生を検知
  3. イベントに関連付けられた処理を呼び出す
主なイベント
<body onLoad="alert('ページが表示されました');">
<!-- ページが表示されたとき -onLoad-->
<!-- 部品がクリックされたとき -onClick-->
<button onClick="alert('Hello');">クリック</button>
<!-- 部品にカーソルがのった/外れた -onmouseover/out-->
<a href="#" onmouseover="console.log('リンクにカーソル');" onmouseout="console.log('カーソルアウト');">リンク</a>
<!-- 部品にフォーカスが当たった/外れた -focus/blur-->
<input type="text" onfocus="console.log('フォーカス')" onblur="console.log('フォーカスオフ')">
<!-- セレクトボックスなどの選択肢が変更された -onchange--->
<input type="radio" name="name" value="val1" onChange="console.log('val1');">val1
<input type="radio" name="name" value="val2" onChange="console.log('val2');">val2
</body>
</html>

clickイベント

属性として直接記述
<body>
<button onClick=alert("こんにちは");>クリック</button>
</body>

loadイベント

  • Web表示されたタイミングで実行
  • 一般的にbody要素の属性として指定
  • head内に記述されたscriptはbody要素が読まれるまえに実行される
  • が、loadイベントに関連付けた処理はbody要素の読み込み後実行される

thisキーワード

  • ひとつの関数を複数のイベントから呼び出す時、呼び出された関数内で[どの部品から発生したイベントなのか知りたい]ときに利用
  • イベントハンドラに関連付けた処理のなかでthisキーワードを記述すると、thisはイベントハンドラ属性がつけられた要素自信をあらわす
  • イベント処理におけるthisキーワードは、イベントの発生元に関する情報をもつ
３つのボタンから関数を呼び、どれがクリックされたか特定
<script>
function buttonEv( n ){
     console.log(n.value+"が押されました");
}
</script>
<body>
<button onClick="buttonEv(this)" value="button1">ボタン1</button>
<button onClick="buttonEv(this)" value="button2">ボタン2</button>
<button onClick="buttonEv(this)" value="button3">ボタン3</button>
</body>
</html>

画像を置き換える

  • 要素にインラインで直接記述
  • onmouseover = “ this.src = ‘img/hoge.jpg'"
  • onmouseout = “ this.src = ‘img/hoge.jpg'"
  • 他の要素を置き換える時,
  • onmouseover = “document.hoge.src = ‘img/hoge.png’"
  • 置き換えるimgにname属性やid属性を記述する
    サムネイルにカーソルが乗ると中央の画像が置き換え
<style>
img{
  cursol:
}
body,html,div,img{
     margin: 0;
     padding: 0;
     line-height:1.0;
}
#container {
     width : 300px;
     margin: 20px auto;
}
#thumnail {
     overflow: hidden;
}
#thumnail img{
     float: left;
     display:inline;
     margin-right : 15px;
}
#thumnail img:last-child{
     margin-right: 0;
}
#mainImage{
     margin-top:20px;
     widht: 300px;
     height: 200px;
}
</style>
</head>
<body>
<div id="container">
<div id= "thumnail">
<img src="img/01s.png" alt="" onMouseOver="document.mainImage.src = 'img/01.png'" onMouseOut="document.mainImage.src = 'img/01.png'"><img src="img/02s.png" alt="" onMouseOver="document.mainImage.src = 'img/02.png'" onMouseOut="document.mainImage.src = 'img/01.png'"><img src="img/03s.png" alt="" onMouseOver="document.mainImage.src = 'img/03.png'" onMouseOut="document.mainImage.src = 'img/01.png'">
</div>
<div id = "mainImage">
<img src="img/01.png" alt="" name="mainImage">
</div>
</div>
</body>
</html>

d.hatena.ne.jp