1. 2011/03/18 Mozi l l a & H TML5+α @福岡
jQuery事始め
by A B E H i rok i a k a h A Tra y f l ood

2. 2011/03/18 Mozi l l a & H TML5+α @福岡
自己紹介
・名前：アベヒロキ (@hATrayflood)
・職業：自宅サーバ管理者
・URL：http://rayflood.org/diary/
・住所：長野市 地元：東部町
by A B E H i rok i a k a h A Tra y f l ood

3. 2011/03/18 Mozi l l a & H TML5+α @福岡
まずは
by A B E H i rok i a k a h A Tra y f l ood

4. 2011/03/18 Mozi l l a & H TML5+α @福岡
Webページ
作ったこと
ない人？ by A B E H i rok i a k a h A Tra y f l ood

5. 2011/03/18 Mozi l l a & H TML5+α @福岡
HTMLやCSS
JavaScriptは
まあまあ？
by A B E H i rok i a k a h A Tra y f l ood

6. 2011/03/18 Mozi l l a & H TML5+α @福岡
jQueryはもちろん
prototypeやGWT
なんでもござれ？
by A B E H i rok i a k a h A Tra y f l ood

7. 2011/03/18 Mozi l l a & H TML5+α @福岡
jQuery?
by A B E H i rok i a k a h A Tra y f l ood

8. 2011/03/18 Mozi l l a & H TML5+α @福岡
http://jquery.com/
by A B E H i rok i a k a h A Tra y f l ood

9. 2011/03/18 Mozi l l a & H TML5+α @福岡
作った人
by A B E H i rok i a k a h A Tra y f l ood

10. 2011/03/18 Mozi l l a & H TML5+α @福岡
John Resig
by A B E H i rok i a k a h A Tra y f l ood

11. 2011/03/18 Mozi l l a & H TML5+α @福岡
Secrets of the
JavaScript Ninja
http://ejohn.org/
by A B E H i rok i a k a h A Tra y f l ood

12. 2011/03/18 Mozi l l a & H TML5+α @福岡
日本語リファレンス
http://semooh.jp/jquery/
by A B E H i rok i a k a h A Tra y f l ood

13. 2011/03/18 Mozi l l a & H TML5+α @福岡
主にDOM操作と
ajaxのライブラリ
by A B E H i rok i a k a h A Tra y f l ood

14. 2011/03/18 Mozi l l a & H TML5+α @福岡
つまり
by A B E H i rok i a k a h A Tra y f l ood

15. 2011/03/18 Mozi l l a & H TML5+α @福岡
動きのある
Webページを
簡単に作れます
by A B E H i rok i a k a h A Tra y f l ood

16. 2011/03/18 Mozi l l a & H TML5+α @福岡
デモ
http://rfgaepytest.appspot.com/
by A B E H i rok i a k a h A Tra y f l ood

17. 2011/03/18 Mozi l l a & H TML5+α @福岡
コード例
by A B E H i rok i a k a h A Tra y f l ood

18. 2011/03/18 Mozi l l a & H TML5+α @福岡
・素のDOM操作
var elem = document.getElementById("hoge");
elem.setAttribute("width", "200");
elem.setAttribute("style", "display:block;");
by A B E H i rok i a k a h A Tra y f l ood

19. 2011/03/18 Mozi l l a & H TML5+α @福岡
・jQuery
$("#hoge").attr("width", "200");
$("#hoge").css("display", "block");
by A B E H i rok i a k a h A Tra y f l ood

20. 2011/03/18 Mozi l l a & H TML5+α @福岡
・1行でも書ける
$("#hoge")
.attr("width", "200")
.css("display", "block");
by A B E H i rok i a k a h A Tra y f l ood

21. 2011/03/18 Mozi l l a & H TML5+α @福岡
・素のDOM操作では複数要素の操作が大変
var elms = document.getElementsByTagName("a");
for(var i = 0; i < elms.length; i++){
elms[i].setAttribute("target", "_blank");
}
by A B E H i rok i a k a h A Tra y f l ood

22. 2011/03/18 Mozi l l a & H TML5+α @福岡
・jQueryなら1行
$("a").attr("target", "_blank");
by A B E H i rok i a k a h A Tra y f l ood

23. 2011/03/18 Mozi l l a & H TML5+α @福岡
・eachで複雑な処理も可能
$("a").each(function(){
$(this).attr("target", "_blank");
// その他いろいろな処理
});
by A B E H i rok i a k a h A Tra y f l ood

24. 2011/03/18 Mozi l l a & H TML5+α @福岡
・classでも要素指定可能
$(".fuga").css("display", "none");
by A B E H i rok i a k a h A Tra y f l ood

25. 2011/03/18 Mozi l l a & H TML5+α @福岡
・要素の選択ルールはCSSと同じ
$("form > input[name="u rl"]")
.attr("disabled", true);
by A B E H i rok i a k a h A Tra y f l ood

26. 2011/03/18 Mozi l l a & H TML5+α @福岡
・独自の便利なセレクタも
$("#honge tr:odd")
.css("background-color", "lightcyan");
$("#honge tr:even")
.css("background-color", "lightgreen");
by A B E H i rok i a k a h A Tra y f l ood

27. 2011/03/18 Mozi l l a & H TML5+α @福岡
・ajaxでjson取得
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://hoge/json?id=99", "true");
xhr.onload = function(){
eval("(" + xhr.responseText + ")");
alert(data);
// jsonデータをfugafugaする…
};
xhr.send(null);
by A B E H i rok i a k a h A Tra y f l ood

28. 2011/03/18 Mozi l l a & H TML5+α @福岡
・取得からパースも込みで可能
$.getJSON("http://hoge/json", {id:99}, function(json){
alert(json.data);
// jsonデータをfugafugaする…
});
by A B E H i rok i a k a h A Tra y f l ood

29. 2011/03/18 Mozi l l a & H TML5+α @福岡
・POSTもできる
$.post("http://hoge/post", formdata, function(){
// POSTしたあとする処理…
});
by A B E H i rok i a k a h A Tra y f l ood

30. 2011/03/18 Mozi l l a & H TML5+α @福岡
他にもいろいろ
リファレンス
見てみてね～
by A B E H i rok i a k a h A Tra y f l ood

31. 2011/03/18 Mozi l l a & H TML5+α @福岡
その他
by A B E H i rok i a k a h A Tra y f l ood

32. 2011/03/18 Mozi l l a & H TML5+α @福岡
・ヒント1
UI周りはjQuery UI
が全面的に便利
http://jqueryui.com/
by A B E H i rok i a k a h A Tra y f l ood

33. 2011/03/18 Mozi l l a & H TML5+α @福岡
今まで苦労して作った画面を返せ
とかいいたくなります。多分
by A B E H i rok i a k a h A Tra y f l ood

34. 2011/03/18 Mozi l l a & H TML5+α @福岡
・ヒント2
テーブルも作れます
見栄えがすばらしい
http://flexigrid.info/
by A B E H i rok i a k a h A Tra y f l ood

35. 2011/03/18 Mozi l l a & H TML5+α @福岡
※ただし、ソートやページ割りが
やや面倒(都度リクエスト飛ばす)
by A B E H i rok i a k a h A Tra y f l ood

36. 2011/03/18 Mozi l l a & H TML5+α @福岡
・ヒント3
ajaxをもっと簡単かつ
詳細に制御できる
http://jquery.malsup.com/form/
by A B E H i rok i a k a h A Tra y f l ood

37. 2011/03/18 Mozi l l a & H TML5+α @福岡
本体に組み込んでも
いいんじゃないか？くらい
by A B E H i rok i a k a h A Tra y f l ood

38. 2011/03/18 Mozi l l a & H TML5+α @福岡
・リンク集
twitter @hATrayflood
http://twitter.com/hATrayflood
slideshare hATrayflood
http://www.slideshare.net/hATrayflood
Mozilla & HTML5+α @福岡
https://dev.mozilla.jp/events/workshop09/
by A B E H i rok i a k a h A Tra y f l ood