メディア芸術基礎 II
jQuery入門
2013年10月14日、10月21日
多摩美術大学情報デザイン学科メディア芸術コース
担当:田所淳
Webブラウザで、プログラミングするには?
Webブラウザで、プログラミングするには?
‣ この授業の目標
‣ 「Webブラウザで、動的な表現をしたい!!」
Webブラウザで、プログラミングするには?
‣ Webブラウザで動的な表現をするには…
‣ これまでは、Adobe Flashに代表される外部のプラグインを
Webブラウザに読み込む方法が一般的だった
プラグイン
外部プログラム
Flashなど...
Webブラウザで、プログラミングするには?
‣ しかし、この授業では、Webブラウザ自身の機能で、動的な表
現をしていきたい
‣ Webブラウザ本体でプログラムを実行する
‣ JavaScript - Webブラウザ自体をプログラミングする言語...
JavaScriptについて
‣ JavaScriptとは…
‣ プロトタイプベースのオブジェクト指向プログラミング言語
‣ 1995年に、Netscape Navigator 2.0用に開発
‣ 注意!!:サン・マイクロシステムズ(現在はオラ...
JavaScriptについて
‣ JavaScriptを使用することで、WebページのHTML要素を直接
操作することが可能となる
‣ 例えば「Webページの中のh1要素を探しだして、全てのh1要
素の文字の色を赤くする」
‣ それなりに、プロ...
jQueryとは
‣ もっと簡単な方法でプログラミングしたい!!
‣ jQueryを使うと便利!!
‣ jQuery:JavaScriptを簡単に使用するフレームワーク
‣ 「wriite less, do more. (短かい記述で、沢山のこ...
jQueryとは
‣ jQuery
‣ 2006年、John Resigが発表
‣ わずかな記述で、アニメーションなどの高度な表現が可能
‣ 現在、JavaScriptフレームワークの中では、圧倒的なシェア
jQueryとは
‣ さっきのJavaScriptのコードを、jQueryで書き換えてみる
‣ たった、これだけ。とてもシンプル。
var divs = document.getElementsByTagName("h1");
for(var ...
jQueryとは
‣ jQueryを使用するメリット
‣ ブラウザ依存を気にしなくてよい。jQuery側でブラウザによる
差異を吸収してくれる
‣ 軽くて速い!!
‣ オープンソース (MITライセンス + GPLライセンス)
‣ 情報が豊富:...
jQuery ≠ HTML5
‣ jQuery は HTML5 ではない
‣ しかし、jQueryでHTML5の要素(Canvasなどの画像データも含
めて)操作することも可能
‣ jQueryは、HTML5も含んだより広範な環境
HTML5 ...
jQueryとは
‣ jQuery日本語リファレンス
‣ http://semooh.jp/jquery/
jQuery入門
環境設定
jQuery 環境設定
‣ jQueryを使用するには、まずjQueryの環境を適用するHTML
ファイルに読み込まなくてはならない
‣ 方法は2種類
‣ 1. jQueryのファイルをダウンロードし、リンクする
‣ 2. CDN(Conten...
jQuery 環境設定
‣ まずは、ベースとなるHTML書類を用意する
‣ 今回はHTML5形式のテンプレートをベースにします
<!DOCTYPE html>
<html>
! <head>
! ! <meta charset="utf-8" ...
jQuery 環境設定
‣ ブラウザで確認
jQuery 環境設定
‣ jQueryの環境を読み込む
‣ jQueryのCDNとして、Google Library API を使用
‣ http://code.google.com/intl/ja/apis/libraries/
‣ バージ...
jQuery 環境設定
‣ head要素内に、jQueryをGoogleのCDNから読み込む
<!DOCTYPE html>
<html>
! <head>
! ! <meta charset="utf-8" />
! ! <title>jQu...
jQuery 環境設定
‣ これで、jQueryの環境設定は完了したはず
‣ さっそく、簡単なコードで動作確認
jQuery 環境設定
‣ 確認用のコードを記入
<!DOCTYPE html>
<html>
! <head>
! ! <meta charset="utf-8" />
! ! <title>jQueryのテスト</title>
! ! <s...
jQuery 環境設定
‣ ブラウザで確認
‣ 見出しの文字が、徐々に消えていくはず…
jQuery 環境設定
‣ ちょっとだけコードを追加
<script>
$(function() {
$("h1").fadeOut(3000);
});
</script>
<script>
$(function() {
$("h1").fa...
jQuery 環境設定
‣ いったんフェードアウトして…またフェードインしてくるはず
jQuery入門
基本文法
jQuery の基本文法
‣ jQueryのコードは、HTML文書の中で script 要素でマークアッ
プした中に記述する
<script>
$(function() {
$("h1").fadeOut(3000);
});
</script>
jQuery の基本文法
‣ 次にコード全体を、$(function() {..... }); という記述で囲むこれ
は、HTMLのロードか完了したら実行するという意味
<script>
$(function() {
$("h1").fadeO...
jQuery の基本文法
‣ どの要素に、処理を適用するかを指定する (セレクタ)
‣ この例の場合は、h1要素に命令
<script>
$(function() {
$("h1").fadeOut(3000);
});
</script>
jQuery の基本文法
‣ 処理の内容を記述 (メソッド)
‣ この例の場合は、3000ミリ秒 (= 3秒) かけてフェードアウト
<script>
$(function() {
$("h1").fadeOut(3000);
});
</sc...
jQuery の基本文法
‣ 「 . 」(ドット) でつないで、メソッドを連結可能
‣ メソッドチェーン
<script>
$(function() {
$("h1").fadeOut(3000)
.fadeIn(3000);
});
</sc...
いろいろなメソッド(命令)
‣ テキストの設定
‣ HTMLの要素のテキストを置換することができる
$(function() {
//h1のテキストを「こんにちは」に
$("h1").text("こんにちは");
});
いろいろなメソッド(命令)
‣ CSSスタイルの設定
‣ 選択した要素のCSSの値を変更することが可能
$(function() {
//h1の背景色を変更
$("h1").css("backgroundColor","#336699");
}...
いろいろなメソッド(命令)
‣ CSSスタイルの設定
‣ 複数の属性と値を変更することも可能
$(function() {
//h1のCSSの値を複数変更
$("h1").css({
backgroundColor:"#336699",
col...
いろいろなメソッド(命令)
‣ アニメーション
‣ CSSの数値化できる属性であればアニメーションできる
‣ たとえば、marginを操作して、位置を動かしてみる
//上の余白を500pxに → つまり下に500px移動
$("h1").ani...
いろいろなメソッド(命令)
‣ アニメーション
‣ テキストのサイズや透明度など複数の属性を一度にアニメー
ションさせてみる
$(function() {
//半透明になりながら拡大し、また元に戻る
$("h1").animate({
font...
いろいろなメソッド(命令)
‣ アニメーション
‣ 注意!! 数値化できない値(色など)はアニメーションできない
$(function() {
//このコードはNG、色をアニメーションできない
$("h1").animate({
color:"...
いろいろなメソッド(命令)
‣ 実習:とりあえずjQueryに慣れる
‣ テキストの置換、CSSの変更、アニメーションなどを駆使し
て、いろいろな動きを試してみる
‣ まずは、いろいろ楽しみながら遊んでみましょう
いろいろなメソッド(命令)
‣ 例:四隅に順番に移動する
$(function() {
//h1のCSSの値を複数変更
$("h1").css({
backgroundColor:"#6699cc",
color:"white",
size:"...
いろいろなメソッド(命令)
‣ 例:四隅に順番に移動する
イベント
「イベント」とは何か?
‣ 今日のテーマ
‣ jQueryの「イベント」を理解する
‣ イベントとは?
‣ 命令が実行されるタイミングを決める
「イベント」とは何か?
‣ イベントの例
‣ HTMLのページの読込が完了したら、○○を実行
‣ ユーザがマウスをクリックしたら、○○を実行
‣ キーボードからキーを入力したら、○○を実行
‣ 特定の要素にマウスポインタが重なったら、○○を実行...
「イベント」とは何か?
‣ 実は、既に一つイベントを使用している
‣ $(function(){ ... });
‣ Webページ全体の読込が終了したら、命令を実行
‣ 読込完了を「きっかけ」にしたイベントの一つ
$(function() {
...
「イベント」とは何か?
‣ $(function(){ ... }); は省略した記述
‣ 省略せずに書くと以下のようになる
‣ 「書類の読込みがおわったら」という意味
$(function() {
...
});
$(document).re...
「イベント」とは何か?
‣ 今日の最重要ポイント!!
‣ jQueryのイベントは全て以下の書式で記述する
‣ 実際に試していきましょう!
$(セレクター).イベント(function() {
$(セレクター).命令;
});
jQueryのスクリプトを別ファイルで
‣ 先週のやりかた
‣ jQueryのスクリプトを、HTMLファイルの head 要素の中で、
script要素を使用して内包していた
‣ 今回は、jQueryを別ファイルで記述したい
jQueryのスクリプトを別ファイルで
‣ jQueryを別ファイルにして読みこむには
‣ script要素のsrc属性でファイル名を指定する
‣ 例えば、jQueryのプログラムが「script.js」だったら
<script src="ファ...
HTMLファイルを用意する
‣ 外部スクリプト「script.js」を読みこむ設定でHTMLファイル
の雛形を作成
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQ...
HTMLファイルを用意する
‣ 今回はimg要素をjQueryで操作してみます。
‣ 例えば、test.jpgという画像ファイルを用意して…
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"...
HTMLファイルを用意する
‣ 画像が表示される
イベント - クリックした画像を隠す
‣ 「画像をクリックしたら、画像を隠す」というプログラムを作
成してみたい
‣ jQueryでの考え方
‣ 「画像をクリックしたら」→ イベント
‣ 「画像を隠す」→ 命令
イベント - クリックした画像を隠す
‣ ただし、実際には、HTML書類が全て読みこまれてからでない
と、「クリックしたら」を実現できない
‣ 下記のように考える
‣ 1.「書類が全て読み込まれたら、次の命令を実行」
‣ 2.「 画像をクリック...
イベント - クリックした画像を隠す
‣ まずはイベントを記述 (script.jsに記述する)
‣ 書類が読みこまれたら (イベント)
$(function(){
});
イベント - クリックした画像を隠す
‣ さらに追記
‣ img要素をクリックしたら、命令を実行 (イベント)
$(function(){
$("img").click(function(){
});
});
イベント - クリックした画像を隠す
‣ さらに、さらに追記
‣ img要素を隠す (命令)
$(function(){
$("img").click(function(){
$("img").hide();
});
});
イベント - クリックした画像を隠す
‣ クリックすると画像が消えるはず
イベント - クリックした画像をフェードアウト
‣ 単純に消えるだけでなく、エフェクトをかけることも可能
‣ 例:クリックすると1秒(1000msec)かけてフェードアウト
$(function(){
$("img").click(functi...
イベント - クリックした画像をフェードアウト
‣ イベントを適用した要素自身のセレクタは、$(this)と書き換え
ることもできる
$(function(){
$("img").click(function(){
$(this).fadeOu...
イベント - クリックした画像をフェードアウト
‣ HTML側を変更
‣ 複数の画像ファイルを並べて貼りつけてみる
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQ...
イベント - クリックした画像をフェードアウト
‣ ブラウザで表示
イベント - クリックした画像をフェードアウト
‣ クリックした画像がフェードアウトして消えていく
イベント - 画像を入れかえる
‣ HTMLファイルを再度修正、画像を1枚だけに
‣ a要素(リンク)を、写真の枚数分用意する
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<ti...
イベント - 画像を入れかえる
‣ Webブラウザで確認
イベント - 画像を入れかえる
‣ script.jsを編集
$(function(){
$("a:eq(0)").click(function(){
$("img").attr("src","test1.jpg");
});
$("a:eq(...
イベント - 画像を入れかえる
‣ リンクをクリックすると、写真が入れかわるはず!!
‣ ページを再読み込みすることなく画像だけが変化している
まとめ
‣ 今日はここまで
‣ jQueryのイベントの基本を理解する
‣ 次回は、このイベントの仕組みを応用して、jQueryを活用した
ナビゲーションメニューを作成します
Upcoming SlideShare
Loading in...5
×

メディア芸術基礎 II jQuery入門

1,679

Published on

0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,679
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
20
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

メディア芸術基礎 II jQuery入門

  1. 1. メディア芸術基礎 II jQuery入門 2013年10月14日、10月21日 多摩美術大学情報デザイン学科メディア芸術コース 担当:田所淳
  2. 2. Webブラウザで、プログラミングするには?
  3. 3. Webブラウザで、プログラミングするには? ‣ この授業の目標 ‣ 「Webブラウザで、動的な表現をしたい!!」
  4. 4. Webブラウザで、プログラミングするには? ‣ Webブラウザで動的な表現をするには… ‣ これまでは、Adobe Flashに代表される外部のプラグインを Webブラウザに読み込む方法が一般的だった プラグイン 外部プログラム Flashなど Webブラウザ
  5. 5. Webブラウザで、プログラミングするには? ‣ しかし、この授業では、Webブラウザ自身の機能で、動的な表 現をしていきたい ‣ Webブラウザ本体でプログラムを実行する ‣ JavaScript - Webブラウザ自体をプログラミングする言語 JavaScript Webブラウザ
  6. 6. JavaScriptについて ‣ JavaScriptとは… ‣ プロトタイプベースのオブジェクト指向プログラミング言語 ‣ 1995年に、Netscape Navigator 2.0用に開発 ‣ 注意!!:サン・マイクロシステムズ(現在はオラクル)が開発した プログラミング言語「Java」とは全く関係がない!!
  7. 7. JavaScriptについて ‣ JavaScriptを使用することで、WebページのHTML要素を直接 操作することが可能となる ‣ 例えば「Webページの中のh1要素を探しだして、全てのh1要 素の文字の色を赤くする」 ‣ それなりに、プログラミングの知識は必要… var divs = document.getElementsByTagName("h1"); for(var i = 0; i < divs.length; i++) { ! divs[i].style.color = "red"; }
  8. 8. jQueryとは ‣ もっと簡単な方法でプログラミングしたい!! ‣ jQueryを使うと便利!! ‣ jQuery:JavaScriptを簡単に使用するフレームワーク ‣ 「wriite less, do more. (短かい記述で、沢山のことを)」
  9. 9. jQueryとは ‣ jQuery ‣ 2006年、John Resigが発表 ‣ わずかな記述で、アニメーションなどの高度な表現が可能 ‣ 現在、JavaScriptフレームワークの中では、圧倒的なシェア
  10. 10. jQueryとは ‣ さっきのJavaScriptのコードを、jQueryで書き換えてみる ‣ たった、これだけ。とてもシンプル。 var divs = document.getElementsByTagName("h1"); for(var i = 0; i < divs.length; i++) { ! divs[i].style.color = "red"; } $("h1").css("color", "red");
  11. 11. jQueryとは ‣ jQueryを使用するメリット ‣ ブラウザ依存を気にしなくてよい。jQuery側でブラウザによる 差異を吸収してくれる ‣ 軽くて速い!! ‣ オープンソース (MITライセンス + GPLライセンス) ‣ 情報が豊富:試しにGoogleで「jQuery」で検索してみる
  12. 12. jQuery ≠ HTML5 ‣ jQuery は HTML5 ではない ‣ しかし、jQueryでHTML5の要素(Canvasなどの画像データも含 めて)操作することも可能 ‣ jQueryは、HTML5も含んだより広範な環境 HTML5 jQuery
  13. 13. jQueryとは ‣ jQuery日本語リファレンス ‣ http://semooh.jp/jquery/
  14. 14. jQuery入門 環境設定
  15. 15. jQuery 環境設定 ‣ jQueryを使用するには、まずjQueryの環境を適用するHTML ファイルに読み込まなくてはならない ‣ 方法は2種類 ‣ 1. jQueryのファイルをダウンロードし、リンクする ‣ 2. CDN(Content Delivery Network)を利用する ‣ 今回は、手軽に利用可能な2番目のCDNを利用する方法を解説 します ‣ CDNとは、CDNとは「Content Delivery Network」の略で、 ネットワーク経由でコンテンツを提供するサービス
  16. 16. jQuery 環境設定 ‣ まずは、ベースとなるHTML書類を用意する ‣ 今回はHTML5形式のテンプレートをベースにします <!DOCTYPE html> <html> ! <head> ! ! <meta charset="utf-8" /> ! ! <title>jQueryのテスト</title> ! </head> ! <body> ! ! <h1>jQueryのテスト</h1> ! </body> </html>
  17. 17. jQuery 環境設定 ‣ ブラウザで確認
  18. 18. jQuery 環境設定 ‣ jQueryの環境を読み込む ‣ jQueryのCDNとして、Google Library API を使用 ‣ http://code.google.com/intl/ja/apis/libraries/ ‣ バージョンとロードするライブラリの種類を指定すると、自動 的に最適なファイルにリンクしてくれる ‣ Version 1の中の最新のjQueryをロードする場合 ‣ HTMLファイルの、head要素内に書きこむ <script src="http://www.google.com/jsapi"></script> <script>google.load("jquery", "1");</script>
  19. 19. jQuery 環境設定 ‣ head要素内に、jQueryをGoogleのCDNから読み込む <!DOCTYPE html> <html> ! <head> ! ! <meta charset="utf-8" /> ! ! <title>jQueryのテスト</title> ! ! <script src="http://www.google.com/jsapi"></script> ! ! <script>google.load("jquery", "1");</script> ! </head> ! <body> ! ! <h1>jQueryのテスト</h1> ! </body> </html>
  20. 20. jQuery 環境設定 ‣ これで、jQueryの環境設定は完了したはず ‣ さっそく、簡単なコードで動作確認
  21. 21. jQuery 環境設定 ‣ 確認用のコードを記入 <!DOCTYPE html> <html> ! <head> ! ! <meta charset="utf-8" /> ! ! <title>jQueryのテスト</title> ! ! <script src="http://www.google.com/jsapi"></script> ! ! <script>google.load("jquery", "1");</script> ! ! <script> ! ! ! $(function() { ! ! ! $("h1").fadeOut(3000); ! ! ! }); ! ! </script> ! </head> ! <body> ! ! <h1>jQueryのテスト</h1> ! </body> </html>
  22. 22. jQuery 環境設定 ‣ ブラウザで確認 ‣ 見出しの文字が、徐々に消えていくはず…
  23. 23. jQuery 環境設定 ‣ ちょっとだけコードを追加 <script> $(function() { $("h1").fadeOut(3000); }); </script> <script> $(function() { $("h1").fadeOut(3000).fadeIn(3000); }); </script>
  24. 24. jQuery 環境設定 ‣ いったんフェードアウトして…またフェードインしてくるはず
  25. 25. jQuery入門 基本文法
  26. 26. jQuery の基本文法 ‣ jQueryのコードは、HTML文書の中で script 要素でマークアッ プした中に記述する <script> $(function() { $("h1").fadeOut(3000); }); </script>
  27. 27. jQuery の基本文法 ‣ 次にコード全体を、$(function() {..... }); という記述で囲むこれ は、HTMLのロードか完了したら実行するという意味 <script> $(function() { $("h1").fadeOut(3000); }); </script>
  28. 28. jQuery の基本文法 ‣ どの要素に、処理を適用するかを指定する (セレクタ) ‣ この例の場合は、h1要素に命令 <script> $(function() { $("h1").fadeOut(3000); }); </script>
  29. 29. jQuery の基本文法 ‣ 処理の内容を記述 (メソッド) ‣ この例の場合は、3000ミリ秒 (= 3秒) かけてフェードアウト <script> $(function() { $("h1").fadeOut(3000); }); </script>
  30. 30. jQuery の基本文法 ‣ 「 . 」(ドット) でつないで、メソッドを連結可能 ‣ メソッドチェーン <script> $(function() { $("h1").fadeOut(3000) .fadeIn(3000); }); </script>
  31. 31. いろいろなメソッド(命令) ‣ テキストの設定 ‣ HTMLの要素のテキストを置換することができる $(function() { //h1のテキストを「こんにちは」に $("h1").text("こんにちは"); });
  32. 32. いろいろなメソッド(命令) ‣ CSSスタイルの設定 ‣ 選択した要素のCSSの値を変更することが可能 $(function() { //h1の背景色を変更 $("h1").css("backgroundColor","#336699"); });
  33. 33. いろいろなメソッド(命令) ‣ CSSスタイルの設定 ‣ 複数の属性と値を変更することも可能 $(function() { //h1のCSSの値を複数変更 $("h1").css({ backgroundColor:"#336699", color:"white", size:"40px", padding:"20px" }) });
  34. 34. いろいろなメソッド(命令) ‣ アニメーション ‣ CSSの数値化できる属性であればアニメーションできる ‣ たとえば、marginを操作して、位置を動かしてみる //上の余白を500pxに → つまり下に500px移動 $("h1").animate({marginTop:"500px"}, 500); //下に500px移動して、1000ms静止して、また上に戻る $("h1").animate({marginTop:"500px"}, 500) .delay(1000) .animate({marginTop:"0px"}, 200);
  35. 35. いろいろなメソッド(命令) ‣ アニメーション ‣ テキストのサイズや透明度など複数の属性を一度にアニメー ションさせてみる $(function() { //半透明になりながら拡大し、また元に戻る $("h1").animate({ fontSize:"150px", opacity:0.2 }, 500) .delay(1000) .animate({ fontSize:"40px", opacity:1.0 }, 500); });
  36. 36. いろいろなメソッド(命令) ‣ アニメーション ‣ 注意!! 数値化できない値(色など)はアニメーションできない $(function() { //このコードはNG、色をアニメーションできない $("h1").animate({ color:"white", backgroundColor:"blue" }, 500)); });
  37. 37. いろいろなメソッド(命令) ‣ 実習:とりあえずjQueryに慣れる ‣ テキストの置換、CSSの変更、アニメーションなどを駆使し て、いろいろな動きを試してみる ‣ まずは、いろいろ楽しみながら遊んでみましょう
  38. 38. いろいろなメソッド(命令) ‣ 例:四隅に順番に移動する $(function() { //h1のCSSの値を複数変更 $("h1").css({ backgroundColor:"#6699cc", color:"white", size:"40px", padding:"20px", }) .animate({ paddingLeft:"640px", }).delay(200) .animate({ paddingLeft:"20px", marginLeft:"640px" }).delay(200) .animate({ paddingTop:"60%" }).delay(200) .animate({ marginLeft:"0" }).delay(200) .animate({ paddingTop:"20px" }); });
  39. 39. いろいろなメソッド(命令) ‣ 例:四隅に順番に移動する
  40. 40. イベント
  41. 41. 「イベント」とは何か? ‣ 今日のテーマ ‣ jQueryの「イベント」を理解する ‣ イベントとは? ‣ 命令が実行されるタイミングを決める
  42. 42. 「イベント」とは何か? ‣ イベントの例 ‣ HTMLのページの読込が完了したら、○○を実行 ‣ ユーザがマウスをクリックしたら、○○を実行 ‣ キーボードからキーを入力したら、○○を実行 ‣ 特定の要素にマウスポインタが重なったら、○○を実行 ‣ 命令を実行するための、様々な「きっかけ」がイベント
  43. 43. 「イベント」とは何か? ‣ 実は、既に一つイベントを使用している ‣ $(function(){ ... }); ‣ Webページ全体の読込が終了したら、命令を実行 ‣ 読込完了を「きっかけ」にしたイベントの一つ $(function() { ... });
  44. 44. 「イベント」とは何か? ‣ $(function(){ ... }); は省略した記述 ‣ 省略せずに書くと以下のようになる ‣ 「書類の読込みがおわったら」という意味 $(function() { ... }); $(document).ready(function() { ... });
  45. 45. 「イベント」とは何か? ‣ 今日の最重要ポイント!! ‣ jQueryのイベントは全て以下の書式で記述する ‣ 実際に試していきましょう! $(セレクター).イベント(function() { $(セレクター).命令; });
  46. 46. jQueryのスクリプトを別ファイルで ‣ 先週のやりかた ‣ jQueryのスクリプトを、HTMLファイルの head 要素の中で、 script要素を使用して内包していた ‣ 今回は、jQueryを別ファイルで記述したい
  47. 47. jQueryのスクリプトを別ファイルで ‣ jQueryを別ファイルにして読みこむには ‣ script要素のsrc属性でファイル名を指定する ‣ 例えば、jQueryのプログラムが「script.js」だったら <script src="ファイル名"></script> <script src="script.js"></script>
  48. 48. HTMLファイルを用意する ‣ 外部スクリプト「script.js」を読みこむ設定でHTMLファイル の雛形を作成 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jQueryのテスト</title> <script src="http://www.google.com/jsapi"></script> <script>google.load("jquery", "1");</script> <script src="script.js"></script> </head> <body> </body> </html>
  49. 49. HTMLファイルを用意する ‣ 今回はimg要素をjQueryで操作してみます。 ‣ 例えば、test.jpgという画像ファイルを用意して… <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jQueryのテスト</title> <script src="http://www.google.com/jsapi"></script> <script>google.load("jquery", "1");</script> <script src="script.js"></script> </head> <body> <img src="test.jpg" alt="jQueryテスト画像" /> </body> </html>
  50. 50. HTMLファイルを用意する ‣ 画像が表示される
  51. 51. イベント - クリックした画像を隠す ‣ 「画像をクリックしたら、画像を隠す」というプログラムを作 成してみたい ‣ jQueryでの考え方 ‣ 「画像をクリックしたら」→ イベント ‣ 「画像を隠す」→ 命令
  52. 52. イベント - クリックした画像を隠す ‣ ただし、実際には、HTML書類が全て読みこまれてからでない と、「クリックしたら」を実現できない ‣ 下記のように考える ‣ 1.「書類が全て読み込まれたら、次の命令を実行」 ‣ 2.「 画像をクリックしたら、画像を隠す」 ‣ この2つのイベントをまずはjQueryで記述してみる
  53. 53. イベント - クリックした画像を隠す ‣ まずはイベントを記述 (script.jsに記述する) ‣ 書類が読みこまれたら (イベント) $(function(){ });
  54. 54. イベント - クリックした画像を隠す ‣ さらに追記 ‣ img要素をクリックしたら、命令を実行 (イベント) $(function(){ $("img").click(function(){ }); });
  55. 55. イベント - クリックした画像を隠す ‣ さらに、さらに追記 ‣ img要素を隠す (命令) $(function(){ $("img").click(function(){ $("img").hide(); }); });
  56. 56. イベント - クリックした画像を隠す ‣ クリックすると画像が消えるはず
  57. 57. イベント - クリックした画像をフェードアウト ‣ 単純に消えるだけでなく、エフェクトをかけることも可能 ‣ 例:クリックすると1秒(1000msec)かけてフェードアウト $(function(){ $("img").click(function(){ $("img").fadeOut(1000); }); });
  58. 58. イベント - クリックした画像をフェードアウト ‣ イベントを適用した要素自身のセレクタは、$(this)と書き換え ることもできる $(function(){ $("img").click(function(){ $(this).fadeOut(1000); }); });
  59. 59. イベント - クリックした画像をフェードアウト ‣ HTML側を変更 ‣ 複数の画像ファイルを並べて貼りつけてみる <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jQueryのテスト</title> <script src="http://www.google.com/jsapi"></script> <script>google.load("jquery", "1");</script> <script src="script.js"></script> </head> <body> <img src="test1.jpg" alt="画像1" /><br /> <img src="test2.jpg" alt="画像2" /><br /> <img src="test3.jpg" alt="画像3" /><br /> <img src="test4.jpg" alt="画像4" /> </body> </html>
  60. 60. イベント - クリックした画像をフェードアウト ‣ ブラウザで表示
  61. 61. イベント - クリックした画像をフェードアウト ‣ クリックした画像がフェードアウトして消えていく
  62. 62. イベント - 画像を入れかえる ‣ HTMLファイルを再度修正、画像を1枚だけに ‣ a要素(リンク)を、写真の枚数分用意する <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jQueryのテスト</title> <script src="http://www.google.com/jsapi"></script> <script>google.load("jquery", "1");</script> <script src="script.js"></script> </head> <body> <nav> <ul> <li><a href="#">写真 1</a></li> <li><a href="#">写真 2</a></li> <li><a href="#">写真 3</a></li> <li><a href="#">写真 4</a></li> </ul> </nav> <img src="test1.jpg" alt="画像1" /><br /> </body> </html>
  63. 63. イベント - 画像を入れかえる ‣ Webブラウザで確認
  64. 64. イベント - 画像を入れかえる ‣ script.jsを編集 $(function(){ $("a:eq(0)").click(function(){ $("img").attr("src","test1.jpg"); }); $("a:eq(1)").click(function(){ $("img").attr("src","test2.jpg"); }); $("a:eq(2)").click(function(){ $("img").attr("src","test3.jpg"); }); $("a:eq(3)").click(function(){ $("img").attr("src","test4.jpg"); }); });
  65. 65. イベント - 画像を入れかえる ‣ リンクをクリックすると、写真が入れかわるはず!! ‣ ページを再読み込みすることなく画像だけが変化している
  66. 66. まとめ ‣ 今日はここまで ‣ jQueryのイベントの基本を理解する ‣ 次回は、このイベントの仕組みを応用して、jQueryを活用した ナビゲーションメニューを作成します
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×