Web & AOR Music Blog

I'm Web Front-End Engineer. I like AOR music.

アプリ映像5 (JavaScript3 & jQuery)

 アプリ専攻 映像トレーニング 5回目。

■JavaScript基礎

(24)配列を使用する 【js15-2.html】

var weekDay = new Array();

weekDay[0] = “(日)”;
weekDay[1] = “(月)”;
weekDay[2] = “(火)”;
weekDay[3] = “(水)”;
weekDay[4] = “(木)”;
weekDay[5] = “(金)”;
weekDay[6] = “(土)”;

(25)getElementById()メソッドを使用する[1] 【cafe.html】

(26)getElementById()メソッドを使用する[2] 【cafe2.html】

function rollOver(){
document.getElementById( “cafeImg”).setAttribute( “src”, “img/photo01_s_on.jpg”);
}

function rollOut(){
  document.getElementById( “cafeImg”).setAttribute( “src”, “img/photo01_s.jpg”);
}

(27)画像のプリロードを行う 【cafe3.html】

var preImg = new Image();
preImg.src = “img/photo01_s_on.jpg”;

(28)JavaScriptを外部化する/イベントハンドラで動かす 【cafe3.html】

■jQuery基礎

(1)jQueryの概要

 jQueryは、「JavaScriptライブラリ」や「フレームワーク」と呼ばれるものの1つです。

フレームワーク ・・・ 枠組み・骨組み

 JavaScriptライブラリと呼ばれるモノには、他にも
 「prototype.js」や「Ext JS」「dojo」などがあります。

(2)jQueryを使用する準備 【start1.html】

 公式サイト http://jquery.com からダウンロード

 映像内 : 1.8.2

(3)JavaScriptをjQueryに置き換える[1] 【start2.html】

jQuery( function(){
} );

 ショートカットの $ で置き換える。
jQuery( function(){
} );

(4)JavaScriptをjQueryに置き換える[2] 【start2.html】

 メソッドチェーン

(5)JavaScriptをjQueryに置き換える[3] 【start2.html】

●JavaScript
document.getElementById( “cafeImg”).onmouseover = function(){
document.getElementById( “cafeImg”).setAttribute( “src”, “img/photo01_s_on.jpg”);
}

document.getElementById( “cafeImg”).onmouseout = function(){
document.getElementById( “cafeImg”).setAttribute( “src”, “img/photo01_s.jpg”);
}

 ●jQuery基本
$( “img[ src='img/photo01_s.jpg']“).hover( function(){
$( “img[ src='img/photo01_s.jpg']“).attr( “src”, “img/photo01_s_on.jpg”);
},function(){
$( “img[ src='img/photo01_s_on.jpg']“).attr( “src”, “img/photo01_s.jpg”);
});

●jQuery簡略化
$( “img[ src='img/photo01_s.jpg']“).hover( function(){
$( this).attr( “src”, “img/photo01_s_on.jpg”);
},function(){
$( this).attr( “src”, “img/photo01_s.jpg”);
});

(6)JavaScriptをjQueryに置き換える[4] 【start4.html】

// 画像のプリロード
$( ““).attr( “src”, “img/photo01_s_on.jpg”);
// 今から、img要素を作りますヨ!

 ●start3.html のJavaScriptでの記述の消したシンプルなモノ。
  → start4.html

(7)さまざまなセレクタを使用する[1] 【jQuery01.html】

Copyright © Web & AOR Music Blog, All Rights Reserve.