イベントと実行タイミング

特定のタイミングで実行したいスクリプトをまとめる

関数：function
function myidEvent() {
    alert( '押されました' );
}
  • myidEvent() という名前でスクリプトをグループ化しました。
特定のイベントに関連づける
  1. HTML内に各要素の属性のonClickなどイベント用の属性に記述する
  2. DOMで取得した要素のonClickなどのプロパティに記述する
  3. DOMでaddListenerを使う


1. HTML内に属性としてonClick時に定義した関数を呼ぶ

<p onClick="myidEvent();">テスト</p>


この「テスト」という文字をクリックされたときにfunctionで定義した関数「myidEvent() 」の内容が実行されます。



【記述例】
この例では、HTMLの要素内にスクリプトを記述しているため振る舞いと文書構造が分離できません。

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>イベントとタイミングを記述</title>
<style>
p {
	cursor: pointer;
}
</style>
</head>
<body>
<p onClick="myidEvent()">テスト</p>
<script>
 function myidEvent() {
    alert( '押されました' );
 }
</script>
</body>
</html>

【記述例】
DOMを使い書き換えてみます。
「getElementById()」メソッドは、HTMLが読み込まれた後に実行する必要があります。

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>DOMでイベントとタイミングを記述</title>
<style>
p {
	cursor: pointer;
}
</style>
</head>
<body>
<p id="myID">テスト</p>
<script>
function myidEvent() {
    alert( '押されました' );
}
document.getElementById( 'myID' ).onclick = myidEvent;
</script>
</body>
</html>

window.onloadを利用する

  • HTMLの下のほうに記述することはメンテナンスの上でも不都合です。
  • 外部ファイルとして「.js」ファイルを読み込む場合も同じです。
ページが読み込まれた際に命令が実行されるようにする

《HTML》

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>DOMでイベントとタイミングを記述</title>
<style>
p {
	cursor: pointer;
}
</style>
<script src="dom_click.js"></script>
</head>
<body>
<p id="myID">テスト</p>
</body>
</html>


《外部JSファイル》

window.onload = function(){
    document.getElementById( 'myID' ).onclick = myidEvent;
}
function myidEvent() {
    alert( '押されました' );
}
応用：クリックする度に画像が切り替わる
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>クリック度に画像置換</title>
<style>
img {
  border: none;
  cursor: pointer;
}
p {
  text-align: center;
}
</style>
<script>
//画像を配列に格納する
var img = new Array();

img[0] = new Image();
img[0].src = 'img/01.png';
img[1] = new Image();
img[1].src = 'img/02.png';
img[2] = new Image();
img[2].src=  'img/03.png';
img[3] = new Image();
img[3].src=  'img/04.png';
img[4] = new Image();
img[4].src=  'img/05.png';
img[5] = new Image();
img[5].src=  'img/06.png';


//画像番号用のグローバル変数
var cnt=0;

//画像切り替え関数
function changeImg() {
  
  //画像番号を進める
  if (cnt == 5) {
    cnt=0;
    } else {
    cnt++;
    }

  //画像を切り替える
  document.getElementById('photo').src=img[cnt].src;
  
}
</script>
</head>
<body>
<p><img id="photo" onclick="changeImg()" src="img/01.png" width="640" height="426" alt=""></p>
</body>
</html>
img要素にid属性
  1. 画像を切り替える場合は、最初に見えている初期画像を表示します
  2. id属性を付けます
  3. id名は「photo」
  4. onclickイベントで、 クリックすると関数changeImg()を呼び出します
画像配列を作る
  1. まず、画像配列imgを作ります
  2. 配列オブジェクト = new Image() で、配列を画像用にする（画像オブジェクト）
  3. 配列オブジェクト.src = "画像ファイルのパス" で、画像のパスを指定する
グローバル変数で画像番号を指定する
  • 関数の外で変数cntを指定します（グローバル変数）
  • このcntは画像を表示する度に変化していきます
変数cntの値を切り替える
  • 画像変換関数changeImg()の最初に、 if文を使ってcntの値を変更します
  • cntが5の時は0に戻し、それ以外だと+1します
  • 表示する画像の配列番号をcntにすることによって、 画像が切り替わります
画像を切り替える
  • document.getElementById('id名').src = 配列オブジェクト.src
  • id名を付した画像タグの画像を切り替えます