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

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (20)

Similaire à JavaScript Basic 02 jQuery

Similaire à JavaScript Basic 02 jQuery (20)

Plus de Yossy Taka

Plus de Yossy Taka (6)

Dernier

Dernier (10)

JavaScript Basic 02 jQuery