20090121 J QueryからはじめるJava Script～初級編～

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

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

歴史（ググッたらわかるレベル）誕生 (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 リリース。ブラウザ開発競争再燃

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

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

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

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 | | | | | | | | | | | | |

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 にプロパティ追加する＝継承　　　　　　　　　　　　　　　　　はいもうわけわかめ！！

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

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

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

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

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

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

付録　～勉強のおともに～・オライリー本「 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/

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

20090121 J QueryからはじめるJava Script～初級編～

More Related Content

What's hot (20)

Similar to 20090121 J QueryからはじめるJava Script～初級編～ (20)

More from Hiromu Shioya (20)

20090121 J QueryからはじめるJava Script～初級編～