1. jQuery からはじめる JavaScript 〜初級編〜

2. 1.JavaScript の基礎

3. JavaScript ・ UpperCamelCase ・間にスペース挟むな！！ × javascript × Java Script × javaScript ・読み方は胸はって｢じゃゔぁ｣でお k

4. 歴史（ググッたらわかるレベル） 誕生 (1995) NetScape の中の人が開発。ネスケ 2.0 で LiveScript としてデビュー 発展 (1995-1996) Microsoft IE との開発競争。機能の増大、仕様の複雑化 統合 (1997) 国際団体の Ecma により ECMAScript として標準化される 普及 ( 〜 2005) web ページの装飾に。入力チェックに。補助的なポジション Ajax の登場 (2005) 非同期通信による新しい Web インタフェース。再評価高まる モダン js としての再出発 (2005 〜 ) rails とともに prototype .js 登場。新たなライブラリ群 V8 の登場 (2008) 爆速の google chrome リリース。ブラウザ開発競争再燃

5. つまり… どういうこと？ 1. モダン js 童貞が許されるのは小学生までだよね！ ・何回も蘇ってるばかりか若返ってる＝時代が必要としてる ・各大型ベンダが盛り上がってる＝そこにカネの匂いがある ->ガラパゴス開発ばっかやってる場合じゃねえ！ 2. 今なら相当開発楽なんじゃねえの？？ ・すごい人らが、すごいライブラリを沢山用意してくれてる ・もういい加減クロスブラウザ気にしなくて良い…よね？ ・開発環境もちっとはこなれてきてる…はず ->機は熟してる！

6. 改めまして…

7. JavaScript を知るキーワード ・プロトタイプベース ・ ECMAScript ・ DOM 個人的に知りたいものをチョイスしました

8. プロトタイプベース ・クラス / インスタンスの関係は（厳密には）無い ・オブジェクトの振る舞いを動的に変更できる ・スロット＝可変の構造体としてオブジェクトは捉えられる ... プログラマーは概念よりコード見た方が理解が早い

9. example: クラスベースなら… (PHP5) class Rectangle{ private $width; private $height; public function __construct($w,$h){ $this->setWidth($w); $this->setHeight($h); } /* accessor 定義は割愛 */ public function getArea(){ return $this->getWidth()* $this->getHeight(); } } $rectangle = new Rectangle(10,15); echo $rectangle->getArea(); // 150 ・ rectangle( 矩形 ) オブジェクトの実装例 プロトタイプベースなら… (js) // コンストラクタ関数 //this には生成されたインスタンスが代入 function Rectangle(w,h){ this.width = w; this.height = h; } Rectangle.prototype.getArea = function() { return this.width * this.height; } var rectangle = new Rectangle(10,15); alert(rectangle.getArea()); // 150 | | | | | | | | | | | | |

10. js におけるオブジェクト ・リテラルで書けちゃう（いきなりインスタンス生成） var rectangle = { width: 10, height: 15 } // 最後にピリオド入れちゃダメ！ ・プロパティだけだとハッシュ（配列もオブジェクト） alert(rectangle.width); //10 ・プロパティは文字列でもアクセスできる alert(rectangle.["width"]); //10 ・暗黙の constructor プロパティ＝コンストラクタ関数への参照 var rectangle = new Rectangle(10,15); rectangle.constructor == Rectangle; //true と評価される ・暗黙の prototype プロパティ ＝ constructor プロパティのみを持つオブジェクトへの参照 ・ prototype にプロパティ追加する＝継承 はいもうわけわかめ！！

11. ECMA って何なのさ？ ・大人の事情です ・ ECMAScript は言語コアの規格名。仕様書もあるよ ・ JavaScript=ECMAScript で正しいんです ・ AdobeFlash での ECMAScript 実装は ActionScript と呼ばれてる ・ IE は実は今でも JScript が呼称 ・ getElementById メソッドとかは含まれてません

12. じゃあ DOM って何なのさ？ ・ Document Object Model ・ W3C って組織が決めた API 仕様です ・実装方法はベンダまかせです ・ document オブジェクトがその実装 ・ JScript は KY だからみんな困ってる ・レベル 0 〜３までの規定がある ・ XML,HTML, イベントとか辺りを規定してる

13. だから何なのさ？ ・一部の特殊な仕様を理解すればどうということはない ・ただ、 ECMA か DOM か、調べたいとこは見極めよう ・犯人は誰か、冷静に考えれば分かる ECMAScript 実装以外の処理系ごとの拡張 ... ベンダの DOM 実装 ... IE,IE,IE!!! まあ、すぐに 「ブラウザ依存だー！！」 は やめよう

14. 本題

15. 2.jQuery の基礎

16. jQuery ・ John Resig と有志 ・ 18KB ・クロスブラウザ IE6+ FF3+ Safari3+ Opera9+ ・最近 1.3 がリリースされた ・強力で爆速な CSS セレクタ ・メソッドチェーンによる直感的な API ・ prototype 汚染の心配なしで、読み込むだけで使える ・アニメーションや ajax 周りも最低限サポート

17. 学習方法 ・日本語のすばらしいリファレンス 正直それ読めばおｋ ・なにはともあれＣＳＳセレクタの勘をつかむ それが全てといっても過言ではない ・メソッドチェーンにも慣れる それ一行で書けない？ 要は使って慣れろです

18. 実例紹介

19. 次回予告 ・ DOM 詳しく ・イベントリスナーとか ・ jQuery のプラグイン ・ Ajax ・ YUI ・ Dojo ・アニメーションライブラリ

20. 付録 ～勉強のおともに～ ・オライリー本 「 JavaScript 」と「 JavaScript クイックリファレンス」 ・ ECMAScript Under Translation of ECMA-262 3rd Edition http://www2u.biglobe.ne.jp/~oz-07ams/prog/ecma262r3/ ・ jQuery jQuery1.3 日本語リファレンス http://semooh.jp/jquery/

21. ご清聴ありがとうございました。