jquery入門 - 千葉商科大 web動画表現
TRANSCRIPT
![Page 1: jQuery入門 - 千葉商科大 Web動画表現](https://reader030.vdocuments.pub/reader030/viewer/2022013105/559794f01a28abe2108b479e/html5/thumbnails/1.jpg)
Web動画表現第2回:jQuery入門
千葉商科大学政策情報学部2011年10月5日担当:田所 淳
![Page 2: jQuery入門 - 千葉商科大 Web動画表現](https://reader030.vdocuments.pub/reader030/viewer/2022013105/559794f01a28abe2108b479e/html5/thumbnails/2.jpg)
Webブラウザで、プログラミングするには?
![Page 3: jQuery入門 - 千葉商科大 Web動画表現](https://reader030.vdocuments.pub/reader030/viewer/2022013105/559794f01a28abe2108b479e/html5/thumbnails/3.jpg)
Webブラウザで、プログラミングするには?
‣ この授業の目標‣ 「Webブラウザで、動的な表現をしたい!!」
![Page 4: jQuery入門 - 千葉商科大 Web動画表現](https://reader030.vdocuments.pub/reader030/viewer/2022013105/559794f01a28abe2108b479e/html5/thumbnails/4.jpg)
Webブラウザで、プログラミングするには?‣ Webブラウザで動的な表現をするには…‣ これまでは、Adobe Flashに代表される外部のプラグインをWebブラウザに読み込む方法が一般的だった
プラグイン
外部プログラムFlashなど
Webブラウザ
![Page 5: jQuery入門 - 千葉商科大 Web動画表現](https://reader030.vdocuments.pub/reader030/viewer/2022013105/559794f01a28abe2108b479e/html5/thumbnails/5.jpg)
Webブラウザで、プログラミングするには?‣ しかし、この授業では、Webブラウザ自身の機能で、動的な表現をしていきたい
‣ Webブラウザ本体でプログラムを実行する‣ JavaScript - Webブラウザ自体をプログラミングする言語
JavaScript
Webブラウザ
![Page 6: jQuery入門 - 千葉商科大 Web動画表現](https://reader030.vdocuments.pub/reader030/viewer/2022013105/559794f01a28abe2108b479e/html5/thumbnails/6.jpg)
JavaScriptについて‣ JavaScriptとは…‣ プロトタイプベースのオブジェクト指向プログラミング言語‣ 1995年に、Netscape Navigator 2.0用に開発
‣ 注意!!:サン・マイクロシステムズ(現在はオラクル)が開発したプログラミング言語「Java」とは全く関係がない!!
![Page 7: jQuery入門 - 千葉商科大 Web動画表現](https://reader030.vdocuments.pub/reader030/viewer/2022013105/559794f01a28abe2108b479e/html5/thumbnails/7.jpg)
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";}
![Page 8: jQuery入門 - 千葉商科大 Web動画表現](https://reader030.vdocuments.pub/reader030/viewer/2022013105/559794f01a28abe2108b479e/html5/thumbnails/8.jpg)
jQueryとは‣ もっと簡単な方法でプログラミングしたい!!‣ jQueryを使うと便利!!‣ jQuery:JavaScriptを簡単に使用するフレームワーク‣ 「wriite less, do more. (短かい記述で、沢山のことを)」
![Page 9: jQuery入門 - 千葉商科大 Web動画表現](https://reader030.vdocuments.pub/reader030/viewer/2022013105/559794f01a28abe2108b479e/html5/thumbnails/9.jpg)
jQueryとは‣ jQuery‣ 2006年、John Resigが発表‣ わずかな記述で、アニメーションなどの高度な表現が可能‣ 現在、JavaScriptフレームワークの中では、圧倒的なシェア
![Page 10: jQuery入門 - 千葉商科大 Web動画表現](https://reader030.vdocuments.pub/reader030/viewer/2022013105/559794f01a28abe2108b479e/html5/thumbnails/10.jpg)
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");
![Page 11: jQuery入門 - 千葉商科大 Web動画表現](https://reader030.vdocuments.pub/reader030/viewer/2022013105/559794f01a28abe2108b479e/html5/thumbnails/11.jpg)
jQueryとは‣ jQueryを使用するメリット
‣ ブラウザ依存を気にしなくてよい。jQuery側でブラウザによる差異を吸収してくれる
‣ 軽くて速い!!‣ オープンソース (MITライセンス + GPLライセンス)‣ 情報が豊富:試しにGoogleで「jQuery」で検索してみる
![Page 12: jQuery入門 - 千葉商科大 Web動画表現](https://reader030.vdocuments.pub/reader030/viewer/2022013105/559794f01a28abe2108b479e/html5/thumbnails/12.jpg)
jQuery ≠ HTML5‣ jQuery は HTML5 ではない‣ しかし、jQueryでHTML5の要素(Canvasなどの画像データも含めて)操作することも可能
‣ jQueryは、HTML5も含んだより広範な環境
HTML5 jQuery
![Page 13: jQuery入門 - 千葉商科大 Web動画表現](https://reader030.vdocuments.pub/reader030/viewer/2022013105/559794f01a28abe2108b479e/html5/thumbnails/13.jpg)
jQueryとは‣ jQuery日本語リファレンス‣ http://semooh.jp/jquery/
![Page 14: jQuery入門 - 千葉商科大 Web動画表現](https://reader030.vdocuments.pub/reader030/viewer/2022013105/559794f01a28abe2108b479e/html5/thumbnails/14.jpg)
jQuery入門環境設定
![Page 15: jQuery入門 - 千葉商科大 Web動画表現](https://reader030.vdocuments.pub/reader030/viewer/2022013105/559794f01a28abe2108b479e/html5/thumbnails/15.jpg)
jQuery 環境設定‣ jQueryを使用するには、まずjQueryの環境を適用するHTMLファイルに読み込まなくてはならない
‣ 方法は2種類‣ 1. jQueryのファイルをダウンロードし、リンクする‣ 2. CDN(Content Delivery Network)を利用する
‣ 今回は、手軽に利用可能な2番目のCDNを利用する方法を解説します
‣ CDNとは、CDNとは「Content Delivery Network」の略で、ネットワーク経由でコンテンツを提供するサービス
![Page 16: jQuery入門 - 千葉商科大 Web動画表現](https://reader030.vdocuments.pub/reader030/viewer/2022013105/559794f01a28abe2108b479e/html5/thumbnails/16.jpg)
jQuery 環境設定‣ まずは、ベースとなるHTML書類を用意する‣ 今回はHTML5形式のテンプレートをベースにします
<!DOCTYPE html><html>! <head>! ! <meta charset="utf-8" />! ! <title>jQueryのテスト</title>! </head>! <body>! ! <h1>jQueryのテスト</h1>! </body></html>
![Page 17: jQuery入門 - 千葉商科大 Web動画表現](https://reader030.vdocuments.pub/reader030/viewer/2022013105/559794f01a28abe2108b479e/html5/thumbnails/17.jpg)
jQuery 環境設定‣ ブラウザで確認
![Page 18: jQuery入門 - 千葉商科大 Web動画表現](https://reader030.vdocuments.pub/reader030/viewer/2022013105/559794f01a28abe2108b479e/html5/thumbnails/18.jpg)
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>
![Page 19: jQuery入門 - 千葉商科大 Web動画表現](https://reader030.vdocuments.pub/reader030/viewer/2022013105/559794f01a28abe2108b479e/html5/thumbnails/19.jpg)
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>
![Page 20: jQuery入門 - 千葉商科大 Web動画表現](https://reader030.vdocuments.pub/reader030/viewer/2022013105/559794f01a28abe2108b479e/html5/thumbnails/20.jpg)
jQuery 環境設定‣ これで、jQueryの環境設定は完了したはず‣ さっそく、簡単なコードで動作確認
![Page 21: jQuery入門 - 千葉商科大 Web動画表現](https://reader030.vdocuments.pub/reader030/viewer/2022013105/559794f01a28abe2108b479e/html5/thumbnails/21.jpg)
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>
![Page 22: jQuery入門 - 千葉商科大 Web動画表現](https://reader030.vdocuments.pub/reader030/viewer/2022013105/559794f01a28abe2108b479e/html5/thumbnails/22.jpg)
jQuery 環境設定‣ ブラウザで確認‣ 見出しの文字が、徐々に消えていくはず…
![Page 23: jQuery入門 - 千葉商科大 Web動画表現](https://reader030.vdocuments.pub/reader030/viewer/2022013105/559794f01a28abe2108b479e/html5/thumbnails/23.jpg)
jQuery 環境設定‣ ちょっとだけコードを追加<script> $(function() { $("h1").fadeOut(3000); });</script>
<script> $(function() { $("h1").fadeOut(3000).fadeIn(3000); });</script>
![Page 24: jQuery入門 - 千葉商科大 Web動画表現](https://reader030.vdocuments.pub/reader030/viewer/2022013105/559794f01a28abe2108b479e/html5/thumbnails/24.jpg)
jQuery 環境設定‣ いったんフェードアウトして…またフェードインしてくるはず
![Page 25: jQuery入門 - 千葉商科大 Web動画表現](https://reader030.vdocuments.pub/reader030/viewer/2022013105/559794f01a28abe2108b479e/html5/thumbnails/25.jpg)
jQuery入門基本文法
![Page 26: jQuery入門 - 千葉商科大 Web動画表現](https://reader030.vdocuments.pub/reader030/viewer/2022013105/559794f01a28abe2108b479e/html5/thumbnails/26.jpg)
jQuery の基本文法‣ jQueryのコードは、HTML文書の中で script 要素でマークアップした中に記述する
<script> $(function() {
$("h1").fadeOut(3000);
});
</script>
![Page 27: jQuery入門 - 千葉商科大 Web動画表現](https://reader030.vdocuments.pub/reader030/viewer/2022013105/559794f01a28abe2108b479e/html5/thumbnails/27.jpg)
jQuery の基本文法‣ 次にコード全体を、$(function() {..... }); という記述で囲むこれは、HTMLのロードか完了したら実行するという意味
<script> $(function() {
$("h1").fadeOut(3000);
});</script>
![Page 28: jQuery入門 - 千葉商科大 Web動画表現](https://reader030.vdocuments.pub/reader030/viewer/2022013105/559794f01a28abe2108b479e/html5/thumbnails/28.jpg)
jQuery の基本文法‣ どの要素に、処理を適用するかを指定する (セレクタ)‣ この例の場合は、h1要素に命令
<script> $(function() {
$("h1").fadeOut(3000);
});</script>
![Page 29: jQuery入門 - 千葉商科大 Web動画表現](https://reader030.vdocuments.pub/reader030/viewer/2022013105/559794f01a28abe2108b479e/html5/thumbnails/29.jpg)
jQuery の基本文法‣ 処理の内容を記述 (メソッド)‣ この例の場合は、3000ミリ秒 (= 3秒) かけてフェードアウト
<script> $(function() {
$("h1").fadeOut(3000);
});</script>
![Page 30: jQuery入門 - 千葉商科大 Web動画表現](https://reader030.vdocuments.pub/reader030/viewer/2022013105/559794f01a28abe2108b479e/html5/thumbnails/30.jpg)
jQuery の基本文法‣ 「 . 」(ドット) でつないで、メソッドを連結可能‣ メソッドチェーン
<script> $(function() {
$("h1").fadeOut(3000) .fadeIn(3000);
});</script>
![Page 31: jQuery入門 - 千葉商科大 Web動画表現](https://reader030.vdocuments.pub/reader030/viewer/2022013105/559794f01a28abe2108b479e/html5/thumbnails/31.jpg)
いろいろなメソッド(命令)‣ テキストの設定‣ HTMLの要素のテキストを置換することができる
$(function() { //h1のテキストを「こんにちは」に $("h1").text("こんにちは");});
![Page 32: jQuery入門 - 千葉商科大 Web動画表現](https://reader030.vdocuments.pub/reader030/viewer/2022013105/559794f01a28abe2108b479e/html5/thumbnails/32.jpg)
いろいろなメソッド(命令)‣ CSSスタイルの設定‣ 選択した要素のCSSの値を変更することが可能
$(function() { //h1の背景色を変更 $("h1").css("backgroundColor","#336699");});
![Page 33: jQuery入門 - 千葉商科大 Web動画表現](https://reader030.vdocuments.pub/reader030/viewer/2022013105/559794f01a28abe2108b479e/html5/thumbnails/33.jpg)
いろいろなメソッド(命令)‣ CSSスタイルの設定‣ 複数の属性と値を変更することも可能
$(function() { //h1のCSSの値を複数変更 $("h1").css({ backgroundColor:"#336699", color:"white", size:"40px", padding:"20px" })});
![Page 34: jQuery入門 - 千葉商科大 Web動画表現](https://reader030.vdocuments.pub/reader030/viewer/2022013105/559794f01a28abe2108b479e/html5/thumbnails/34.jpg)
いろいろなメソッド(命令)‣ アニメーション‣ CSSの数値化できる属性であればアニメーションできる‣ たとえば、marginを操作して、位置を動かしてみる
//上の余白を500pxに → つまり下に500px移動$("h1").animate({marginTop:"500px"}, 500);
//下に500px移動して、1000ms静止して、また上に戻る$("h1").animate({marginTop:"500px"}, 500).delay(1000).animate({marginTop:"0px"}, 200);
![Page 35: jQuery入門 - 千葉商科大 Web動画表現](https://reader030.vdocuments.pub/reader030/viewer/2022013105/559794f01a28abe2108b479e/html5/thumbnails/35.jpg)
いろいろなメソッド(命令)‣ アニメーション‣ テキストのサイズや透明度など複数の属性を一度にアニメーションさせてみる
$(function() { //半透明になりながら拡大し、また元に戻る $("h1").animate({ fontSize:"150px", opacity:0.2 }, 500) .delay(1000) .animate({ fontSize:"40px", opacity:1.0 }, 500);});
![Page 36: jQuery入門 - 千葉商科大 Web動画表現](https://reader030.vdocuments.pub/reader030/viewer/2022013105/559794f01a28abe2108b479e/html5/thumbnails/36.jpg)
いろいろなメソッド(命令)‣ アニメーション‣ 注意!! 数値化できない値(色など)はアニメーションできない
$(function() { //このコードはNG、色をアニメーションできない $("h1").animate({ color:"white", backgroundColor:"blue" }, 500));});
![Page 37: jQuery入門 - 千葉商科大 Web動画表現](https://reader030.vdocuments.pub/reader030/viewer/2022013105/559794f01a28abe2108b479e/html5/thumbnails/37.jpg)
いろいろなメソッド(命令)‣ 実習:とりあえずjQueryに慣れる
‣ テキストの置換、CSSの変更、アニメーションなどを駆使して、いろいろな動きを試してみる
‣ まずは、いろいろ楽しみながら遊んでみましょう
![Page 38: jQuery入門 - 千葉商科大 Web動画表現](https://reader030.vdocuments.pub/reader030/viewer/2022013105/559794f01a28abe2108b479e/html5/thumbnails/38.jpg)
いろいろなメソッド(命令)‣ 例:四隅に順番に移動する$(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" });});
![Page 39: jQuery入門 - 千葉商科大 Web動画表現](https://reader030.vdocuments.pub/reader030/viewer/2022013105/559794f01a28abe2108b479e/html5/thumbnails/39.jpg)
いろいろなメソッド(命令)‣ 例:四隅に順番に移動する