1. Webページで学ぶ
JavaScript 2013 第6回
tyage@KMC
6/25

2. どうも、アイスクリーム人間です
ぁっぅぃ...

3. いままでのあらすじ
JavaScriptの基本構文（第0回〜第2回）
↓
HTMLの基礎（第2回〜第3回）
↓
CSSの基礎（第4回）
↓
JavaScriptとDOM（第5回）
↓
今ココ！

4. かなりハードスケジュール
● だったような気がするので、復習会が立ち上
がったみたいです
● https://www.kmc.gr.jp/pukiwiki/?Web%
A5%DA%A1%BC%A5%B8%A4%C7%B3%
D8%A4%D6JavaScript%202013#p5f0e301
● まあ、のんびりやりましょうや

5. 今日の予定
● 前回はDOMの操作をJavaScriptでやりました
● 今回は、もっと簡単にDOM操作をするために
「jQuery」というライブラリを使います
● jQuery使ってサイトとか作ってみましょか
● 次回からどうするか、特に決まってないです・・・

6. 前回やったこと
● かなり重要なこと（function）をやりました
● JavaScriptをやる際に、functionがわからないと
詰むので、軽く見なおしておきましょう

7. jQuery
● こ↑れ↓
○ http://jquery.com/
● めちゃくちゃ使われているJavaScriptライブラリ
● 要は、これを使えばJavaScriptを使う際に色々
便利なことができるようになる

8. 例えば
前回のこれ
// プロフィール要素を取得してみよう
var profile = document.getElementById("profile");
console.log(profile);
// プロフィールのCSSを更新してみよう
profile.style.fontSize = "100px";

9. 例えば
jQueryだともっと簡単にかけるよ！
// プロフィール要素を取得してみよう
var profile = $("#profile");
console.log(profile);
// プロフィールのCSSを更新してみよう
profile.css('font-size', 100);

10. 例えば
jQueryだともっと簡単にかけるよ！
// プロフィール要素を取得してみよう
var profile = $("#profile");
console.log(profile);
CSSのセレクタが使える！！

11. 例えば
jQueryだともっと簡単にかけるよ！
CSSと同じプロパティ名でいい
// プロフィールのCSSを更新してみよう
profile.css('font-size', 100);

12. 例えば
前回の色を変える奴
var colors = ["red", "blue", "yellow", "green"],
i = 0;
profile.addEventListener("click", function() {
profile.style.backgroundColor = colors[++i % 4];
});

13. 例えば
前回の色を変える奴
var colors = ["red", "blue", "yellow", "green"],
i = 0;
profile.click(function() {
profile.css("background-color", colors[++i % 4]);
});

14. 要素の取得
● $("#id")
● $(".class")
● $("tag")
○ $("div"), $("p"), $("body")
● $("parent").find("children")
● $("something").each(function() {
$(this) // <=要素を一つずつ操作
})
● etc...

15. 要素の操作
● $("#hoge").fadeIn()
○ アニメーションも作れる
● $(".fuga").css("propaty", value)
● $("p").width(100).slideDown()
○ ドットでつなげて複数の操作をすることもできます（メソッ
ドチェーン）

16. その他いろいろ
● AjaxとかDeferredとか、数値・文字の判別とか

17. 書いてみよう
● 適当なHTMLファイルを書いて、scriptから
● http://code.jquery.com/jquery-2.0.2.min.js
● これを読み込んで使おう
$(function() {
// ここにコードを書くといいよ
});

18. 制作物はこちら
● https://www.kmc.gr.
jp/~tyage/uploader/

19. お疲れ様でした
● 次回は来週です