Enviar pesquisa
Carregar
メディア芸術基礎 II jQuery入門
•
6 gostaram
•
4,466 visualizações
Atsushi Tadokoro
Seguir
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 66
Baixar agora
Baixar para ler offline
Recomendados
メディア芸術基礎 II 第11回:HTML5実践 表現のための様々なJavaScriptライブラリ
メディア芸術基礎 II 第11回:HTML5実践 表現のための様々なJavaScriptライブラリ
Atsushi Tadokoro
JavaScriptことはじめ
JavaScriptことはじめ
Yuki Ishikawa
⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2
Nishida Kansuke
はじめよう Backbone.js
はじめよう Backbone.js
Hiroki Toyokawa
クライアントサイドjavascript簡単紹介
クライアントサイドjavascript簡単紹介
しくみ製作所
Web制作勉強会 #2
Web制作勉強会 #2
Moto Yan
Scc2014 :jQueryの仕組みを完璧に理解する
Scc2014 :jQueryの仕組みを完璧に理解する
Jun Futakawa
⑳CSSでアニメーション!その1
⑳CSSでアニメーション!その1
Nishida Kansuke
Recomendados
メディア芸術基礎 II 第11回:HTML5実践 表現のための様々なJavaScriptライブラリ
メディア芸術基礎 II 第11回:HTML5実践 表現のための様々なJavaScriptライブラリ
Atsushi Tadokoro
JavaScriptことはじめ
JavaScriptことはじめ
Yuki Ishikawa
⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2
Nishida Kansuke
はじめよう Backbone.js
はじめよう Backbone.js
Hiroki Toyokawa
クライアントサイドjavascript簡単紹介
クライアントサイドjavascript簡単紹介
しくみ製作所
Web制作勉強会 #2
Web制作勉強会 #2
Moto Yan
Scc2014 :jQueryの仕組みを完璧に理解する
Scc2014 :jQueryの仕組みを完璧に理解する
Jun Futakawa
⑳CSSでアニメーション!その1
⑳CSSでアニメーション!その1
Nishida Kansuke
WebデザイナのためのjQuery入門。
WebデザイナのためのjQuery入門。
Yossy Taka
jQueryを中心としたJavaScript
jQueryを中心としたJavaScript
hideaki honda
WordPress を使いこなそう
WordPress を使いこなそう
Wataru OKAMOTO
⑮jQueryをおぼえよう!その1
⑮jQueryをおぼえよう!その1
Nishida Kansuke
むずかしくないJavaScriptのやさしい話 jQueryからの次のステップ #ndsmeetup8
むずかしくないJavaScriptのやさしい話 jQueryからの次のステップ #ndsmeetup8
civic Sasaki
Backbonejs @BuildInsiderOffline #1
Backbonejs @BuildInsiderOffline #1
daisuke shimizu
忙しい人のためのBackbone.jsとAngular.js入門
忙しい人のためのBackbone.jsとAngular.js入門
Toshiaki Maki
Angular js or_backbonejs
Angular js or_backbonejs
Omasa Yusaku
Webデザインの幅を広げる、jQuery【コードを記述する】 先生:保坂 庸介
Webデザインの幅を広げる、jQuery【コードを記述する】 先生:保坂 庸介
schoowebcampus
JavaScriptで出来る、あんなことこんなこと
JavaScriptで出来る、あんなことこんなこと
Mayu Kimura
JavaScript Basic 01
JavaScript Basic 01
Yossy Taka
Backbone.js入門
Backbone.js入門
AdvancedTechNight
2時間で学ぶjQuery
2時間で学ぶjQuery
Shumpei Shiraishi
20140523 jQuery基礎 (HTML5ビギナーズ)
20140523 jQuery基礎 (HTML5ビギナーズ)
Daisuke Yamazaki
jQueryで気をつけてほしいこと
jQueryで気をつけてほしいこと
良太 増子
backbone.jsの使用例 その1
backbone.jsの使用例 その1
Makoto Haruyama
Learning jQuery
Learning jQuery
taiju higashi
実践Backbone.Marionette 現場の悩みと解決まで
実践Backbone.Marionette 現場の悩みと解決まで
Ryuma Tsukano
モダンJavaScript環境構築一歩目
モダンJavaScript環境構築一歩目
大樹 小倉
これからのJSの話をしよう ~jQueryで作るTwitterアプリ~ (Gunma.web #2 2010/10/9)
これからのJSの話をしよう ~jQueryで作るTwitterアプリ~ (Gunma.web #2 2010/10/9)
parrotstudio
WordBench Saitama vol.6
WordBench Saitama vol.6
masaaki komori
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Shumpei Shiraishi
Mais conteúdo relacionado
Mais procurados
WebデザイナのためのjQuery入門。
WebデザイナのためのjQuery入門。
Yossy Taka
jQueryを中心としたJavaScript
jQueryを中心としたJavaScript
hideaki honda
WordPress を使いこなそう
WordPress を使いこなそう
Wataru OKAMOTO
⑮jQueryをおぼえよう!その1
⑮jQueryをおぼえよう!その1
Nishida Kansuke
むずかしくないJavaScriptのやさしい話 jQueryからの次のステップ #ndsmeetup8
むずかしくないJavaScriptのやさしい話 jQueryからの次のステップ #ndsmeetup8
civic Sasaki
Backbonejs @BuildInsiderOffline #1
Backbonejs @BuildInsiderOffline #1
daisuke shimizu
忙しい人のためのBackbone.jsとAngular.js入門
忙しい人のためのBackbone.jsとAngular.js入門
Toshiaki Maki
Angular js or_backbonejs
Angular js or_backbonejs
Omasa Yusaku
Webデザインの幅を広げる、jQuery【コードを記述する】 先生:保坂 庸介
Webデザインの幅を広げる、jQuery【コードを記述する】 先生:保坂 庸介
schoowebcampus
JavaScriptで出来る、あんなことこんなこと
JavaScriptで出来る、あんなことこんなこと
Mayu Kimura
JavaScript Basic 01
JavaScript Basic 01
Yossy Taka
Backbone.js入門
Backbone.js入門
AdvancedTechNight
2時間で学ぶjQuery
2時間で学ぶjQuery
Shumpei Shiraishi
20140523 jQuery基礎 (HTML5ビギナーズ)
20140523 jQuery基礎 (HTML5ビギナーズ)
Daisuke Yamazaki
jQueryで気をつけてほしいこと
jQueryで気をつけてほしいこと
良太 増子
backbone.jsの使用例 その1
backbone.jsの使用例 その1
Makoto Haruyama
Learning jQuery
Learning jQuery
taiju higashi
実践Backbone.Marionette 現場の悩みと解決まで
実践Backbone.Marionette 現場の悩みと解決まで
Ryuma Tsukano
モダンJavaScript環境構築一歩目
モダンJavaScript環境構築一歩目
大樹 小倉
これからのJSの話をしよう ~jQueryで作るTwitterアプリ~ (Gunma.web #2 2010/10/9)
これからのJSの話をしよう ~jQueryで作るTwitterアプリ~ (Gunma.web #2 2010/10/9)
parrotstudio
Mais procurados
(20)
WebデザイナのためのjQuery入門。
WebデザイナのためのjQuery入門。
jQueryを中心としたJavaScript
jQueryを中心としたJavaScript
WordPress を使いこなそう
WordPress を使いこなそう
⑮jQueryをおぼえよう!その1
⑮jQueryをおぼえよう!その1
むずかしくないJavaScriptのやさしい話 jQueryからの次のステップ #ndsmeetup8
むずかしくないJavaScriptのやさしい話 jQueryからの次のステップ #ndsmeetup8
Backbonejs @BuildInsiderOffline #1
Backbonejs @BuildInsiderOffline #1
忙しい人のためのBackbone.jsとAngular.js入門
忙しい人のためのBackbone.jsとAngular.js入門
Angular js or_backbonejs
Angular js or_backbonejs
Webデザインの幅を広げる、jQuery【コードを記述する】 先生:保坂 庸介
Webデザインの幅を広げる、jQuery【コードを記述する】 先生:保坂 庸介
JavaScriptで出来る、あんなことこんなこと
JavaScriptで出来る、あんなことこんなこと
JavaScript Basic 01
JavaScript Basic 01
Backbone.js入門
Backbone.js入門
2時間で学ぶjQuery
2時間で学ぶjQuery
20140523 jQuery基礎 (HTML5ビギナーズ)
20140523 jQuery基礎 (HTML5ビギナーズ)
jQueryで気をつけてほしいこと
jQueryで気をつけてほしいこと
backbone.jsの使用例 その1
backbone.jsの使用例 その1
Learning jQuery
Learning jQuery
実践Backbone.Marionette 現場の悩みと解決まで
実践Backbone.Marionette 現場の悩みと解決まで
モダンJavaScript環境構築一歩目
モダンJavaScript環境構築一歩目
これからのJSの話をしよう ~jQueryで作るTwitterアプリ~ (Gunma.web #2 2010/10/9)
これからのJSの話をしよう ~jQueryで作るTwitterアプリ~ (Gunma.web #2 2010/10/9)
Semelhante a メディア芸術基礎 II jQuery入門
WordBench Saitama vol.6
WordBench Saitama vol.6
masaaki komori
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Shumpei Shiraishi
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
Hiroaki Wakamatsu
レスポンシブWebデザイン【発展編】
レスポンシブWebデザイン【発展編】
Yasuhito Yabe
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
Yasuhito Yabe
HTML5 on ASP.NET
HTML5 on ASP.NET
Fujio Kojima
Angular js はまりどころ
Angular js はまりどころ
Ayumi Goto
SpringMVCとmixer2で作るWebアプリのキホン 2013-01-24 Spring勉強会 #jsug
SpringMVCとmixer2で作るWebアプリのキホン 2013-01-24 Spring勉強会 #jsug
Y Watanabe
React.jsでクライアントサイドなWebアプリ入門
React.jsでクライアントサイドなWebアプリ入門
spring_raining
20130924 Picomon CRH勉強会
20130924 Picomon CRH勉強会
Yukihiro Kitazawa
エンタープライズ分野での実践AngularJS
エンタープライズ分野での実践AngularJS
Ayumi Goto
Webapp startup example_to_dolist
Webapp startup example_to_dolist
Shinichiro Kumeuchi
LabVIEW NXG Web Module Training Slide
LabVIEW NXG Web Module Training Slide
Yusuke Tochigi
Rails初心者レッスン lesson3 3edition
Rails初心者レッスン lesson3 3edition
Satomi Tsujita
Canvas勉強会
Canvas勉強会
Tsutomu Kawamura
2016/12/17 ASP.NET フロントエンドタスク入門
2016/12/17 ASP.NET フロントエンドタスク入門
miso- soup3
jsライブラリで実装する効率的なWeb制作
jsライブラリで実装する効率的なWeb制作
西畑 一馬
Webデザイン 第10回:HTML5実践 Three.jsで3Dプログラミング
Webデザイン 第10回:HTML5実践 Three.jsで3Dプログラミング
Atsushi Tadokoro
Tamabi media131118
Tamabi media131118
Atsushi Tadokoro
WordPressプラグイン作成入門
WordPressプラグイン作成入門
Yuji Nojima
Semelhante a メディア芸術基礎 II jQuery入門
(20)
WordBench Saitama vol.6
WordBench Saitama vol.6
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
レスポンシブWebデザイン【発展編】
レスポンシブWebデザイン【発展編】
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
HTML5 on ASP.NET
HTML5 on ASP.NET
Angular js はまりどころ
Angular js はまりどころ
SpringMVCとmixer2で作るWebアプリのキホン 2013-01-24 Spring勉強会 #jsug
SpringMVCとmixer2で作るWebアプリのキホン 2013-01-24 Spring勉強会 #jsug
React.jsでクライアントサイドなWebアプリ入門
React.jsでクライアントサイドなWebアプリ入門
20130924 Picomon CRH勉強会
20130924 Picomon CRH勉強会
エンタープライズ分野での実践AngularJS
エンタープライズ分野での実践AngularJS
Webapp startup example_to_dolist
Webapp startup example_to_dolist
LabVIEW NXG Web Module Training Slide
LabVIEW NXG Web Module Training Slide
Rails初心者レッスン lesson3 3edition
Rails初心者レッスン lesson3 3edition
Canvas勉強会
Canvas勉強会
2016/12/17 ASP.NET フロントエンドタスク入門
2016/12/17 ASP.NET フロントエンドタスク入門
jsライブラリで実装する効率的なWeb制作
jsライブラリで実装する効率的なWeb制作
Webデザイン 第10回:HTML5実践 Three.jsで3Dプログラミング
Webデザイン 第10回:HTML5実践 Three.jsで3Dプログラミング
Tamabi media131118
Tamabi media131118
WordPressプラグイン作成入門
WordPressプラグイン作成入門
Mais de Atsushi Tadokoro
「クリエイティブ・ミュージック・コーディング」- オーディオ・ビジュアル作品のための、オープンソースなソフトウエア・フレームワークの現状と展望
「クリエイティブ・ミュージック・コーディング」- オーディオ・ビジュアル作品のための、オープンソースなソフトウエア・フレームワークの現状と展望
Atsushi Tadokoro
プログラム初級講座 - メディア芸術をはじめよう
プログラム初級講座 - メディア芸術をはじめよう
Atsushi Tadokoro
Interactive Music II ProcessingとSuperColliderの連携 -2
Interactive Music II ProcessingとSuperColliderの連携 -2
Atsushi Tadokoro
coma Creators session vol.2
coma Creators session vol.2
Atsushi Tadokoro
Interactive Music II ProcessingとSuperColliderの連携1
Interactive Music II ProcessingとSuperColliderの連携1
Atsushi Tadokoro
Interactive Music II Processingによるアニメーション
Interactive Music II Processingによるアニメーション
Atsushi Tadokoro
Interactive Music II Processing基本
Interactive Music II Processing基本
Atsushi Tadokoro
Interactive Music II SuperCollider応用 2 - SuperColliderとPure Dataの連携
Interactive Music II SuperCollider応用 2 - SuperColliderとPure Dataの連携
Atsushi Tadokoro
Media Art II openFrameworks アプリ間の通信とタンジブルなインターフェイス
Media Art II openFrameworks アプリ間の通信とタンジブルなインターフェイス
Atsushi Tadokoro
Interactive Music II SuperCollider応用 - SuperColliderと OSC (Open Sound Control)
Interactive Music II SuperCollider応用 - SuperColliderと OSC (Open Sound Control)
Atsushi Tadokoro
iTamabi 13 ARTSAT API 実践 5 - 衛星の軌道を描く
iTamabi 13 ARTSAT API 実践 5 - 衛星の軌道を描く
Atsushi Tadokoro
芸術情報演習デザイン(Web) 第8回: CSSフレームワークを使う
芸術情報演習デザイン(Web) 第8回: CSSフレームワークを使う
Atsushi Tadokoro
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 2
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 2
Atsushi Tadokoro
iTamabi 13 第9回:ARTSAT API 実践 3 ジオコーディングで衛星の位置を取得
iTamabi 13 第9回:ARTSAT API 実践 3 ジオコーディングで衛星の位置を取得
Atsushi Tadokoro
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 1
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 1
Atsushi Tadokoro
iTamabi 13 第8回:ARTSAT API 実践 2 衛星アプリを企画する
iTamabi 13 第8回:ARTSAT API 実践 2 衛星アプリを企画する
Atsushi Tadokoro
Media Art II openFrameworks 複数のシーンの管理・切替え
Media Art II openFrameworks 複数のシーンの管理・切替え
Atsushi Tadokoro
Interactive Music II SuperCollider実習 オリジナルの楽器を作ろう!
Interactive Music II SuperCollider実習 オリジナルの楽器を作ろう!
Atsushi Tadokoro
Geidai music131107
Geidai music131107
Atsushi Tadokoro
Interactive Music II SuperCollider入門 5 時間構造をつくる
Interactive Music II SuperCollider入門 5 時間構造をつくる
Atsushi Tadokoro
Mais de Atsushi Tadokoro
(20)
「クリエイティブ・ミュージック・コーディング」- オーディオ・ビジュアル作品のための、オープンソースなソフトウエア・フレームワークの現状と展望
「クリエイティブ・ミュージック・コーディング」- オーディオ・ビジュアル作品のための、オープンソースなソフトウエア・フレームワークの現状と展望
プログラム初級講座 - メディア芸術をはじめよう
プログラム初級講座 - メディア芸術をはじめよう
Interactive Music II ProcessingとSuperColliderの連携 -2
Interactive Music II ProcessingとSuperColliderの連携 -2
coma Creators session vol.2
coma Creators session vol.2
Interactive Music II ProcessingとSuperColliderの連携1
Interactive Music II ProcessingとSuperColliderの連携1
Interactive Music II Processingによるアニメーション
Interactive Music II Processingによるアニメーション
Interactive Music II Processing基本
Interactive Music II Processing基本
Interactive Music II SuperCollider応用 2 - SuperColliderとPure Dataの連携
Interactive Music II SuperCollider応用 2 - SuperColliderとPure Dataの連携
Media Art II openFrameworks アプリ間の通信とタンジブルなインターフェイス
Media Art II openFrameworks アプリ間の通信とタンジブルなインターフェイス
Interactive Music II SuperCollider応用 - SuperColliderと OSC (Open Sound Control)
Interactive Music II SuperCollider応用 - SuperColliderと OSC (Open Sound Control)
iTamabi 13 ARTSAT API 実践 5 - 衛星の軌道を描く
iTamabi 13 ARTSAT API 実践 5 - 衛星の軌道を描く
芸術情報演習デザイン(Web) 第8回: CSSフレームワークを使う
芸術情報演習デザイン(Web) 第8回: CSSフレームワークを使う
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 2
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 2
iTamabi 13 第9回:ARTSAT API 実践 3 ジオコーディングで衛星の位置を取得
iTamabi 13 第9回:ARTSAT API 実践 3 ジオコーディングで衛星の位置を取得
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 1
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 1
iTamabi 13 第8回:ARTSAT API 実践 2 衛星アプリを企画する
iTamabi 13 第8回:ARTSAT API 実践 2 衛星アプリを企画する
Media Art II openFrameworks 複数のシーンの管理・切替え
Media Art II openFrameworks 複数のシーンの管理・切替え
Interactive Music II SuperCollider実習 オリジナルの楽器を作ろう!
Interactive Music II SuperCollider実習 オリジナルの楽器を作ろう!
Geidai music131107
Geidai music131107
Interactive Music II SuperCollider入門 5 時間構造をつくる
Interactive Music II SuperCollider入門 5 時間構造をつくる
メディア芸術基礎 II jQuery入門
1.
メディア芸術基礎 II jQuery入門 2013年10月14日、10月21日 多摩美術大学情報デザイン学科メディア芸術コース 担当:田所淳
2.
Webブラウザで、プログラミングするには?
3.
Webブラウザで、プログラミングするには? ‣ この授業の目標 ‣ 「Webブラウザで、動的な表現をしたい!!」
4.
Webブラウザで、プログラミングするには? ‣ Webブラウザで動的な表現をするには… ‣ これまでは、Adobe
Flashに代表される外部のプラグインを Webブラウザに読み込む方法が一般的だった プラグイン 外部プログラム Flashなど Webブラウザ
5.
Webブラウザで、プログラミングするには? ‣ しかし、この授業では、Webブラウザ自身の機能で、動的な表 現をしていきたい ‣ Webブラウザ本体でプログラムを実行する ‣
JavaScript - Webブラウザ自体をプログラミングする言語 JavaScript Webブラウザ
6.
JavaScriptについて ‣ JavaScriptとは… ‣ プロトタイプベースのオブジェクト指向プログラミング言語 ‣
1995年に、Netscape Navigator 2.0用に開発 ‣ 注意!!:サン・マイクロシステムズ(現在はオラクル)が開発した プログラミング言語「Java」とは全く関係がない!!
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.
jQueryとは ‣ もっと簡単な方法でプログラミングしたい!! ‣ jQueryを使うと便利!! ‣
jQuery:JavaScriptを簡単に使用するフレームワーク ‣ 「wriite less, do more. (短かい記述で、沢山のことを)」
9.
jQueryとは ‣ jQuery ‣ 2006年、John
Resigが発表 ‣ わずかな記述で、アニメーションなどの高度な表現が可能 ‣ 現在、JavaScriptフレームワークの中では、圧倒的なシェア
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.
jQueryとは ‣ jQueryを使用するメリット ‣ ブラウザ依存を気にしなくてよい。jQuery側でブラウザによる 差異を吸収してくれる ‣
軽くて速い!! ‣ オープンソース (MITライセンス + GPLライセンス) ‣ 情報が豊富:試しにGoogleで「jQuery」で検索してみる
12.
jQuery ≠ HTML5 ‣
jQuery は HTML5 ではない ‣ しかし、jQueryでHTML5の要素(Canvasなどの画像データも含 めて)操作することも可能 ‣ jQueryは、HTML5も含んだより広範な環境 HTML5 jQuery
13.
jQueryとは ‣ jQuery日本語リファレンス ‣ http://semooh.jp/jquery/
14.
jQuery入門 環境設定
15.
jQuery 環境設定 ‣ jQueryを使用するには、まずjQueryの環境を適用するHTML ファイルに読み込まなくてはならない ‣
方法は2種類 ‣ 1. jQueryのファイルをダウンロードし、リンクする ‣ 2. CDN(Content Delivery Network)を利用する ‣ 今回は、手軽に利用可能な2番目のCDNを利用する方法を解説 します ‣ CDNとは、CDNとは「Content Delivery Network」の略で、 ネットワーク経由でコンテンツを提供するサービス
16.
jQuery 環境設定 ‣ まずは、ベースとなるHTML書類を用意する ‣
今回はHTML5形式のテンプレートをベースにします <!DOCTYPE html> <html> ! <head> ! ! <meta charset="utf-8" /> ! ! <title>jQueryのテスト</title> ! </head> ! <body> ! ! <h1>jQueryのテスト</h1> ! </body> </html>
17.
jQuery 環境設定 ‣ ブラウザで確認
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.
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.
jQuery 環境設定 ‣ これで、jQueryの環境設定は完了したはず ‣
さっそく、簡単なコードで動作確認
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.
jQuery 環境設定 ‣ ブラウザで確認 ‣
見出しの文字が、徐々に消えていくはず…
23.
jQuery 環境設定 ‣ ちょっとだけコードを追加 <script> $(function()
{ $("h1").fadeOut(3000); }); </script> <script> $(function() { $("h1").fadeOut(3000).fadeIn(3000); }); </script>
24.
jQuery 環境設定 ‣ いったんフェードアウトして…またフェードインしてくるはず
25.
jQuery入門 基本文法
26.
jQuery の基本文法 ‣ jQueryのコードは、HTML文書の中で
script 要素でマークアッ プした中に記述する <script> $(function() { $("h1").fadeOut(3000); }); </script>
27.
jQuery の基本文法 ‣ 次にコード全体を、$(function()
{..... }); という記述で囲むこれ は、HTMLのロードか完了したら実行するという意味 <script> $(function() { $("h1").fadeOut(3000); }); </script>
28.
jQuery の基本文法 ‣ どの要素に、処理を適用するかを指定する
(セレクタ) ‣ この例の場合は、h1要素に命令 <script> $(function() { $("h1").fadeOut(3000); }); </script>
29.
jQuery の基本文法 ‣ 処理の内容を記述
(メソッド) ‣ この例の場合は、3000ミリ秒 (= 3秒) かけてフェードアウト <script> $(function() { $("h1").fadeOut(3000); }); </script>
30.
jQuery の基本文法 ‣ 「
. 」(ドット) でつないで、メソッドを連結可能 ‣ メソッドチェーン <script> $(function() { $("h1").fadeOut(3000) .fadeIn(3000); }); </script>
31.
いろいろなメソッド(命令) ‣ テキストの設定 ‣ HTMLの要素のテキストを置換することができる $(function()
{ //h1のテキストを「こんにちは」に $("h1").text("こんにちは"); });
32.
いろいろなメソッド(命令) ‣ CSSスタイルの設定 ‣ 選択した要素のCSSの値を変更することが可能 $(function()
{ //h1の背景色を変更 $("h1").css("backgroundColor","#336699"); });
33.
いろいろなメソッド(命令) ‣ CSSスタイルの設定 ‣ 複数の属性と値を変更することも可能 $(function()
{ //h1のCSSの値を複数変更 $("h1").css({ backgroundColor:"#336699", color:"white", size:"40px", padding:"20px" }) });
34.
いろいろなメソッド(命令) ‣ アニメーション ‣ CSSの数値化できる属性であればアニメーションできる ‣
たとえば、marginを操作して、位置を動かしてみる //上の余白を500pxに → つまり下に500px移動 $("h1").animate({marginTop:"500px"}, 500); //下に500px移動して、1000ms静止して、また上に戻る $("h1").animate({marginTop:"500px"}, 500) .delay(1000) .animate({marginTop:"0px"}, 200);
35.
いろいろなメソッド(命令) ‣ アニメーション ‣ テキストのサイズや透明度など複数の属性を一度にアニメー ションさせてみる $(function()
{ //半透明になりながら拡大し、また元に戻る $("h1").animate({ fontSize:"150px", opacity:0.2 }, 500) .delay(1000) .animate({ fontSize:"40px", opacity:1.0 }, 500); });
36.
いろいろなメソッド(命令) ‣ アニメーション ‣ 注意!!
数値化できない値(色など)はアニメーションできない $(function() { //このコードはNG、色をアニメーションできない $("h1").animate({ color:"white", backgroundColor:"blue" }, 500)); });
37.
いろいろなメソッド(命令) ‣ 実習:とりあえずjQueryに慣れる ‣ テキストの置換、CSSの変更、アニメーションなどを駆使し て、いろいろな動きを試してみる ‣
まずは、いろいろ楽しみながら遊んでみましょう
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.
いろいろなメソッド(命令) ‣ 例:四隅に順番に移動する
40.
イベント
41.
「イベント」とは何か? ‣ 今日のテーマ ‣ jQueryの「イベント」を理解する ‣
イベントとは? ‣ 命令が実行されるタイミングを決める
42.
「イベント」とは何か? ‣ イベントの例 ‣ HTMLのページの読込が完了したら、○○を実行 ‣
ユーザがマウスをクリックしたら、○○を実行 ‣ キーボードからキーを入力したら、○○を実行 ‣ 特定の要素にマウスポインタが重なったら、○○を実行 ‣ 命令を実行するための、様々な「きっかけ」がイベント
43.
「イベント」とは何か? ‣ 実は、既に一つイベントを使用している ‣ $(function(){
... }); ‣ Webページ全体の読込が終了したら、命令を実行 ‣ 読込完了を「きっかけ」にしたイベントの一つ $(function() { ... });
44.
「イベント」とは何か? ‣ $(function(){ ...
}); は省略した記述 ‣ 省略せずに書くと以下のようになる ‣ 「書類の読込みがおわったら」という意味 $(function() { ... }); $(document).ready(function() { ... });
45.
「イベント」とは何か? ‣ 今日の最重要ポイント!! ‣ jQueryのイベントは全て以下の書式で記述する ‣
実際に試していきましょう! $(セレクター).イベント(function() { $(セレクター).命令; });
46.
jQueryのスクリプトを別ファイルで ‣ 先週のやりかた ‣ jQueryのスクリプトを、HTMLファイルの
head 要素の中で、 script要素を使用して内包していた ‣ 今回は、jQueryを別ファイルで記述したい
47.
jQueryのスクリプトを別ファイルで ‣ jQueryを別ファイルにして読みこむには ‣ script要素のsrc属性でファイル名を指定する ‣
例えば、jQueryのプログラムが「script.js」だったら <script src="ファイル名"></script> <script src="script.js"></script>
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.
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.
HTMLファイルを用意する ‣ 画像が表示される
51.
イベント - クリックした画像を隠す ‣
「画像をクリックしたら、画像を隠す」というプログラムを作 成してみたい ‣ jQueryでの考え方 ‣ 「画像をクリックしたら」→ イベント ‣ 「画像を隠す」→ 命令
52.
イベント - クリックした画像を隠す ‣
ただし、実際には、HTML書類が全て読みこまれてからでない と、「クリックしたら」を実現できない ‣ 下記のように考える ‣ 1.「書類が全て読み込まれたら、次の命令を実行」 ‣ 2.「 画像をクリックしたら、画像を隠す」 ‣ この2つのイベントをまずはjQueryで記述してみる
53.
イベント - クリックした画像を隠す ‣
まずはイベントを記述 (script.jsに記述する) ‣ 書類が読みこまれたら (イベント) $(function(){ });
54.
イベント - クリックした画像を隠す ‣
さらに追記 ‣ img要素をクリックしたら、命令を実行 (イベント) $(function(){ $("img").click(function(){ }); });
55.
イベント - クリックした画像を隠す ‣
さらに、さらに追記 ‣ img要素を隠す (命令) $(function(){ $("img").click(function(){ $("img").hide(); }); });
56.
イベント - クリックした画像を隠す ‣
クリックすると画像が消えるはず
57.
イベント - クリックした画像をフェードアウト ‣
単純に消えるだけでなく、エフェクトをかけることも可能 ‣ 例:クリックすると1秒(1000msec)かけてフェードアウト $(function(){ $("img").click(function(){ $("img").fadeOut(1000); }); });
58.
イベント - クリックした画像をフェードアウト ‣
イベントを適用した要素自身のセレクタは、$(this)と書き換え ることもできる $(function(){ $("img").click(function(){ $(this).fadeOut(1000); }); });
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.
イベント - クリックした画像をフェードアウト ‣
ブラウザで表示
61.
イベント - クリックした画像をフェードアウト ‣
クリックした画像がフェードアウトして消えていく
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.
イベント - 画像を入れかえる ‣
Webブラウザで確認
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.
イベント - 画像を入れかえる ‣
リンクをクリックすると、写真が入れかわるはず!! ‣ ページを再読み込みすることなく画像だけが変化している
66.
まとめ ‣ 今日はここまで ‣ jQueryのイベントの基本を理解する ‣
次回は、このイベントの仕組みを応用して、jQueryを活用した ナビゲーションメニューを作成します
Baixar agora