JavaScript Basic 02 jQuery

JavaScript入門02
jQuery入門

JavaScriptへの
不満
Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved. 2

タグの指定方法してCSS変更
• <div id=“test”>の文字色を変更
var test = document.getElementsById(‘test’);
test.style.color = ‘#ff0000’;

タグの指定方法してCSS変更
• <div id=‘test’>の文字色を変更
ちょっと記述が長い

そこで
ライブラリと
プラグインの利用

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

jQueryの役割

JavaScriptの役割
簡単に短い記述で
HTML・CSSの内容を
書き換えること
Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights Reserved.
8

• JavaScriptを簡単に短く記述できる、
JavaScriptの命令集（ライブラリ）です。
• 多くのサイトで、jQueryを利用しています。
jQueryとは

• JavaScriptのセレクタ指定を簡単に使用
する
$(‘#test’).css(‘color’, ‘#ff0000’);
jQueryの例

とっても便利

• ダウンロードして外部読み込み
– http://jquery.com/
• リンク先を外部読み込み(CDN)
– https://developers.google.com/speed/libraries/#jquery
jQuery使用方法

書き方

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

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

• jQueryの記述の流れ
1. 要素(タグ)を指定する
→「セレクタ」と呼びます
2. セレクタの後に、「.やりたい事」と記述する
→やりたい事() メソッドと呼びます
→やりたい事プロパティと呼びます

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

• 次にやりたい事(メソッド)を指定
セレクタ.メソッド(引数);

• 次にやりたい事を指定
セレクタ.css(‘color’, ‘#ff0000’);

• 次にやりたい事をたくさん指定
セレクタ.メソッド(引数).メソッ
ド(引数).メソッド(引数)

• メソッドは調べて使おう
– 本家のリファレンス
• http://api.jquery.com/
– jQuery日本語リファレンス（情報が古い場合も・・）
• http://semooh.jp/jquery/

Copyright Ⓒ Yoshihiro Takahashi 2015 All Rights
22
基本はCSSの
変更

• CSSの設定/変更
セレクタ.css(‘color’, ‘#ff0000’);

• 複数のCSSを設定する場合
セレクタ.css({
‘color’ : ‘#ff0000’,
‘font-size’ : ‘24px’
});
複数の内容を設定する記述
{プロパティ：値 , プロパティ：値, プロパティ：値}

• 詳しくは
– 本家のリファレンス → CSS
• http://api.jquery.com/category/css/

HTMLも基本

• 属性の変更 attr
$(‘img’).attr(‘src’, ‘test.png’);
<img src= ‘test.png’>;

• 複数の属性も設定できる
セレクタ.attr({
‘src’ : ‘abc.jpg’,
‘title’ : ‘abc’
});
{プロパティ：値 , プロパティ：値, プロパティ：値}

• タグ内にタグを追加 html
$(‘div’).html(‘<p>よろしく</p>’);
<div><p>よろしく</p></div>

• タグ内に文字を設定 text
$(‘div’).text(‘よろしく’);
<div>よろしく</div>

• 詳しくは
– 本家のリファレンス → Manipulation
• http://api.jquery.com/category/manipulation/

イベントも
大事

• クリックした場合
セレクタ.on(‘click’, function(){
//実行したいことを記述
});
ユーザ操作などのイベント

• 主なイベント
– click() クリック
– dblclick() ダブルクリック
– mouseover() 要素上にマウスが乗った
– mouseenter()要素上にマウスが乗った (子要素に影響なし)
– mouseout() 要素上にあるマウスが離れた
– mouseleave()要素上にあるマウスが離れた (子要素に影響なし)
– mousedown() マウスボタン押した
– mouseup() マウスボタンを離した
– mousemove() マウスが動いた

• イベントの場合によくある記述
セレクタ.on(‘click’, function(){
$(this).css(‘color’, ‘#ff0000’);
});

セレクタ.on({
'mouseenter':function(){
実行したい内容;
},
'mouseleave':function(){
実行したい内容;
}
});
複数のイベント設定

• 詳しくは
– 本家のリファレンス → Events
• http://api.jquery.com/category/events/
イベントについて

• クリックしたら写真が変わる簡易ギャラリー
これまでの応用

ギャラリー
• 写真サムネイルにマウスを重ねるとサム
ネイルが半透明になる
– 半透明 → opacity : 0.5;
– 透明 → opacity : 0;
– 不透明 → opacity : 1;

ギャラリーの仕組み
• ギャラリーの仕組み
５番目のボタンを押すと、
５番目の写真に変わる
３番目のボタンを押すと、
３番目の写真に変わる
ボタンと写真の番号が
リンクしている

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

• 各ボタンに対して、写真変更の記述が必要となる
– ボタン１をクリックしたら、画像１を表示
ボタン２をクリックしたら、画像２を表示・・・
など、ボタンの数だけ記述する必要がある
• 同じような記述が多くなり、全体的にコードが長
くなる

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

• ギャラリーの仕組み
押されたタグの順番を調べ
その番号の写真に変える
押されたタグの順番を調べ
その番号の写真に変える
1番 2番 3番 4番 5番

• クリックしたタグの順番を調べる
– セレクタ.index( this );
• 調べた番号の画像に変更する
<img id=“img” src="images/img001.jpg" />

46
数値を
変更したい

47
変数

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

ポイント
= 値
代入
「＝」は、代入という意味です。
「＝」の左側は「入れ物」、「＝」の右側は「値」となります
数学の X=Y とは違います
XとYが等しいというイメージを捨てましょう
入れ物

変数名のルール
• 使用できる文字は半角英字数字＿＄のみ
• 先頭は半角英字＿＄のみ
• 半角英字の大文字・小文字は区別
– 例
• Abc と abc と abC は別の名前
• 3data はNG、data3 はOK
• $123 はOK、_abc はOK

値の変更
• 変数内の値の変更
変数 = 数字;
変数 = 変数 + 数字;
– 記述例
• 足し算 num = num + 1 ;
• 引き算 num = num − 1 ;
• かけ算 num = num ＊ 1 ;
• 割算 num = num / 1 ;

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

• 前と次の写真を表示してみよう。

• 写真を変更する処理が多い

55
処理を
まとめたい

56
関数

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

• 関数を作成して、前と次の写真を表示し
てみよう。

• 今までの仕組み
５番目のボタンを押すと、
５番目の写真に変わる
３番目のボタンを押すと、
リンクしている

• 今回の仕組み
NEXTボタンを押すと、
2番目の写真に変わる
リンクしていない

• この考え方
– NEXTボタン押したら、数字だけ変えたい

• 今回の仕組み NEXTボタンを押すと、
１番目の写真に変わる
２番目の写真に変わる
２番目の写真に変わる
番号が1増える
番号が1に変わる
番号が1増える

63
条件によって
処理を変えたい

64
条件分岐
if

条件分岐（if文）
if (条件式１) {
}
else if (条件式２) {
}
else{
}

if (条件式１) {
}
else if (条件式２) {
}
else{
}
条件式１が成立したとき、
｛｝の中を実行する
条件式１が成立せず、
条件式２が成立したとき、
｛｝の中を実行する
条件式１と条件式２が
成立しないとき、｛｝の
中を実行する

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

if (パソコンの価格＜５万円) {
パソコンを購入；
}
else{//条件を満たしていないとき
お店から出る；
}
• 普段から if は使っています

JavaScript Basic 02 jQuery

More Related Content

What's hot

Viewers also liked

Similar to JavaScript Basic 02 jQuery

More from Yossy Taka

Recently uploaded

JavaScript Basic 02 jQuery