Movatterモバイル変換

JavaScript入門02jQuery入門

Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved. 6• JavaScriptを利用したコンテンツ制作方法– JavaScriptのみ• カレーライスだと、各種香辛料・小麦粉からルーを自作して、ゼロからカレーを作る感じ– ライブラリを利用（例：jQuery）• カレーライスだと、市販のルーを利用し、野菜や肉は自分で調理して、カレーを作る感じ– ライブラリとプラグインを利用（例：jQuery + lightbox2など）• カレーライスだと、市販のルーを利用し、カット野菜・冷凍シーフードなどを利用して、軽く調理して、カレーを作る感じJavaScriptの利用について

Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved. 10• JavaScriptのセレクタ指定を簡単に使用するvar test = document.getElementsById(‘test’);test.style.color = ‘#ff0000’;$(‘#test’).css(‘color’, ‘#ff0000’);jQueryの例

Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved. 14JavaScript記述場所• 要素（タグ）＝ DOM の構造を理解してからJSを実行しないと誤動作する– 要素の構造を理解してからJSを実行• </body>の直前に記述する• DOMContentLoadedを利用して実行– 要素や画像ファイルなど全てを読み込んでから実行• window.onloadを利用して実行– jQueryのreadyメソッドを利用する• 要素の構造を理解してから実行する• DOMContentLoadedを利用している

Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved. 15• 要素（DOM）の構造を理解して実行$(function() {// ここに実行したい内容を記述});jQueryの記述方法$(function(){ //実行内容 });$(document).ready(function(){ //実行内容});jQuery(function(){ //実行内容 });全て同じ意味の記述→DOMContentLoadedを利用

Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved. 17• セレクタの指定 → $(‘要素’)と記述$(‘div’) タグ名を選択$(‘#id’) id名を選択$(‘.class’) クラス名を選択$(‘p a’) 子孫要素を選択$(‘p, ul, div’) 複数要素の選択$(‘dt+dd’) 隣接要素の選択$(‘img[alt=“abc”] ’) 属性指定によるの選択$(‘dt’).next() 隣接要素の選択$(‘li:eq(0) ’) ○番目の選択など・・・CSSのセレクタと同じjQuery用セレクタまず要素（タグ）を選択

Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved. 34• 主なイベント– click() クリック– dblclick() ダブルクリック– mouseover() 要素上にマウスが乗った– mouseenter()要素上にマウスが乗った (子要素に影響なし)– mouseout() 要素上にあるマウスが離れた– mouseleave()要素上にあるマウスが離れた (子要素に影響なし)– mousedown() マウスボタン押した– mouseup() マウスボタンを離した– mousemove() マウスが動いたユーザ操作などのイベント

Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved. 41ギャラリー• サムネイルボタンをクリックすると大きな写真が変化– イベントを設定する要素と、変更する要素が異なるため、$(this)は使用できない– ボタンをクリックしたら、id=‘img’の要素を指定し、src属性を変更するボタン１.on(‘click’,function(){$(‘#img’).attr(‘src’,’ images/img001.jpg’);});

Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved. 43ギャラリーの仕組み• 各ボタンに対して、写真変更の記述が必要となる– ボタン１をクリックしたら、画像１を表示ボタン２をクリックしたら、画像２を表示・・・など、ボタンの数だけ記述する必要がある• 同じような記述が多くなり、全体的にコードが長くなる処理がまとまるようにロジックを検討する

Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved. 45ギャラリーの仕組み• クリックしたタグの順番を調べる– セレクタ.index( this );• 調べた番号の画像に変更する<img id=“img” src="images/img001.jpg" /><img id=“img” src="images/img002.jpg" />

Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved. 48変数について• 変数とは– 値を入れるための「入れ物」– 値（数字など）を変化させたい場合に使用する– 「 var 変数」で、変数の宣言（作成）– 「変数＝値」で、変数に値を代入• 記述例var 変数 = 値 ;var 変数 = ‘文字’ ; // 文字はシングルクォート ‘’ で囲むvar 変数 = 値, 変数 = ‘文字’； // カンマ, で複数宣言

文字表示の特長• 変数と文字の文字連結表示– プラス（＋）で連結する– 文字は ‘ ’ で囲う– ‘文字’ + 変数 + ‘文字’• 記述例var n = 1;n = n + 1;$(‘img’).attr(‘src’, ‘test’+n+’.jpg’);

Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved. 57function：処理をまとめる• ユーザーが事前に設定できる、命令文です。実行処理の再利用、一元管理するのに有効です。関数は、「作ること」と「使うこと」は別になりますので、勘違いしないよう気をつけてください。function 関数名(引数1,引数2,・・){実行したい処理；・・・return 戻り値;}

Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved. 61これまでの応用• この考え方– NEXTボタン押したら、数字だけ変えたい<img id=“img” src="images/img001.jpg" /><img id=“img” src="images/img002.jpg" /><img id=“img” src="images/img003.jpg" />

Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved. 66条件分岐（if文）if (条件式１) {実行したい処理；}else if (条件式２) {実行したい処理；}else{実行したい処理；}条件式１が成立したとき、｛｝の中を実行する条件式１が成立せず、条件式２が成立したとき、｛｝の中を実行する条件式１と条件式２が成立しないとき、｛｝の中を実行する

Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved. 67条件式の設定方法• 比較演算子A == B （等しい）’3’ == 3A === B （厳密に等しい）3 === 3A > B （より大きい）A < B （より小さい）A >= B （以上）A <= B （以下）A != B （等しくない）A !== B （厳密に等しくない）’3’ !== 3

Movatterモバイル変換

Change Language

JavaScript Basic 02 jQuery

Embed presentation

Recommended

More Related Content

What's hot

Viewers also liked

Similar to JavaScript Basic 02 jQuery

More from Yossy Taka

JavaScript Basic 02 jQuery