アプリ映像5 (JavaScript3 & jQuery)
2013/3/22 18:02 | Category アプリ開発実践フェーズ | Comment (0)
アプリ専攻 映像トレーニング 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ライブラリ」や「フレームワーク」と呼ばれるものの１つです。
フレームワーク ・・・ 枠組み・骨組み
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】