Webページで学ぶJavaScript 2013 第6回

tyage@KMC6/25

どうも、アイスクリーム人間です

ぁっぅぃ...

いままでのあらすじ

JavaScriptの基本構文（第0回〜第2回）

↓HTMLの基礎（第2回〜第3回）

↓CSSの基礎（第4回）

↓JavaScriptとDOM（第5回）

↓今ココ！

かなりハードスケジュール

● だったような気がするので、復習会が立ち上がったみたいです

● https://www.kmc.gr.jp/pukiwiki/?Web%A5%DA%A1%BC%A5%B8%A4%C7%B3%D8%A4%D6JavaScript%202013#p5f0e301

● まあ、のんびりやりましょうや

今日の予定

● 前回はDOMの操作をJavaScriptでやりました● 今回は、もっと簡単にDOM操作をするために

「jQuery」というライブラリを使います● jQuery使ってサイトとか作ってみましょか

● 次回からどうするか、特に決まってないです・・・

前回やったこと

● かなり重要なこと（function）をやりました● JavaScriptをやる際に、functionがわからないと

詰むので、軽く見なおしておきましょう

jQuery● こ↑れ↓

○ http://jquery.com/● めちゃくちゃ使われているJavaScriptライブラリ● 要は、これを使えばJavaScriptを使う際に色々

便利なことができるようになる

例えば

前回のこれ

// プロフィール要素を取得してみよう

var profile = document.getElementById("profile");console.log(profile);

// プロフィールのCSSを更新してみよう

profile.style.fontSize = "100px";

例えば

jQueryだともっと簡単にかけるよ！

// プロフィール要素を取得してみよう

var profile = $("#profile");console.log(profile);

// プロフィールのCSSを更新してみよう

profile.css('font-size', 100);

例えば

jQueryだともっと簡単にかけるよ！

// プロフィール要素を取得してみよう

var profile = $("#profile");console.log(profile);

CSSのセレクタが使える！！

例えば

jQueryだともっと簡単にかけるよ！

CSSと同じプロパティ名でいい

// プロフィールのCSSを更新してみよう

profile.css('font-size', 100);

例えば前回の色を変える奴

var colors = ["red", "blue", "yellow", "green"],i = 0;

profile.addEventListener("click", function() {profile.style.backgroundColor = colors[++i % 4];

});

例えば前回の色を変える奴

var colors = ["red", "blue", "yellow", "green"],i = 0;

profile.click(function() {profile.css("background-color", colors[++i % 4]);

});

要素の取得

● $("#id")● $(".class")● $("tag")

○ $("div"), $("p"), $("body")● $("parent").find("children")● $("something").each(function() {

$(this) // <=要素を一つずつ操作

})● etc...

要素の操作

● $("#hoge").fadeIn()○ アニメーションも作れる

● $(".fuga").css("propaty", value)● $("p").width(100).slideDown()

○ ドットでつなげて複数の操作をすることもできます（メソッドチェーン）

その他いろいろ

● AjaxとかDeferredとか、数値・文字の判別とか

書いてみよう

● 適当なHTMLファイルを書いて、scriptから● http://code.jquery.com/jquery-2.0.2.min.js● これを読み込んで使おう

$(function() {// ここにコードを書くといいよ

});

制作物はこちら

● https://www.kmc.gr.jp/~tyage/uploader/

お疲れ様でした

● 次回は来週です