20090121 J QueryからはじめるJava Script~初級編~
-
Upload
hiromu-shioya -
Category
Documents
-
view
6.364 -
download
3
Transcript of 20090121 J QueryからはじめるJava Script~初級編~
![Page 1: 20090121 J QueryからはじめるJava Script~初級編~](https://reader031.fdocument.pub/reader031/viewer/2022013122/55abb05e1a28abcf558b45ef/html5/thumbnails/1.jpg)
jQuery からはじめるJavaScript
〜初級編〜
![Page 2: 20090121 J QueryからはじめるJava Script~初級編~](https://reader031.fdocument.pub/reader031/viewer/2022013122/55abb05e1a28abcf558b45ef/html5/thumbnails/2.jpg)
1.JavaScript の基礎
![Page 3: 20090121 J QueryからはじめるJava Script~初級編~](https://reader031.fdocument.pub/reader031/viewer/2022013122/55abb05e1a28abcf558b45ef/html5/thumbnails/3.jpg)
JavaScript・ UpperCamelCase・間にスペース挟むな!! × javascript × Java Script × javaScript ・読み方は胸はって「じゃゔぁ」でお k
![Page 4: 20090121 J QueryからはじめるJava Script~初級編~](https://reader031.fdocument.pub/reader031/viewer/2022013122/55abb05e1a28abcf558b45ef/html5/thumbnails/4.jpg)
歴史(ググッたらわかるレベル)
誕生 (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 リリース。ブラウザ開発競争再燃
![Page 5: 20090121 J QueryからはじめるJava Script~初級編~](https://reader031.fdocument.pub/reader031/viewer/2022013122/55abb05e1a28abcf558b45ef/html5/thumbnails/5.jpg)
つまり… どういうこと?
1. モダン js 童貞が許されるのは小学生までだよね!・何回も蘇ってるばかりか若返ってる=時代が必要としてる ・各大型ベンダが盛り上がってる=そこにカネの匂いがある
→ガラパゴス開発ばっかやってる場合じゃねえ!
2. 今なら相当開発楽なんじゃねえの??・すごい人らが、すごいライブラリを沢山用意してくれてる・もういい加減クロスブラウザ気にしなくて良い…よね?
・開発環境もちっとはこなれてきてる…はず →機は熟してる!
![Page 6: 20090121 J QueryからはじめるJava Script~初級編~](https://reader031.fdocument.pub/reader031/viewer/2022013122/55abb05e1a28abcf558b45ef/html5/thumbnails/6.jpg)
改めまして…
![Page 7: 20090121 J QueryからはじめるJava Script~初級編~](https://reader031.fdocument.pub/reader031/viewer/2022013122/55abb05e1a28abcf558b45ef/html5/thumbnails/7.jpg)
JavaScript を知るキーワード
・プロトタイプベース・ ECMAScript・ DOM
個人的に知りたいものをチョイスしました
![Page 8: 20090121 J QueryからはじめるJava Script~初級編~](https://reader031.fdocument.pub/reader031/viewer/2022013122/55abb05e1a28abcf558b45ef/html5/thumbnails/8.jpg)
プロトタイプベース
・クラス / インスタンスの関係は(厳密には)無い ・オブジェクトの振る舞いを動的に変更できる ・スロット=可変の構造体としてオブジェクトは捉えられる
...プログラマーは概念よりコード見た方が理解が早い
![Page 9: 20090121 J QueryからはじめるJava Script~初級編~](https://reader031.fdocument.pub/reader031/viewer/2022013122/55abb05e1a28abcf558b45ef/html5/thumbnails/9.jpg)
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
|||||||||||||
![Page 10: 20090121 J QueryからはじめるJava Script~初級編~](https://reader031.fdocument.pub/reader031/viewer/2022013122/55abb05e1a28abcf558b45ef/html5/thumbnails/10.jpg)
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 にプロパティ追加する=継承
はいもうわけわかめ!!
![Page 11: 20090121 J QueryからはじめるJava Script~初級編~](https://reader031.fdocument.pub/reader031/viewer/2022013122/55abb05e1a28abcf558b45ef/html5/thumbnails/11.jpg)
ECMA って何なのさ?
・大人の事情です ・ ECMAScript は言語コアの規格名。仕様書もあるよ ・ JavaScript=ECMAScript で正しいんです ・ AdobeFlash での ECMAScript 実装は ActionScript と呼ばれてる ・ IE は実は今でも JScript が呼称 ・ getElementById メソッドとかは含まれてません
![Page 12: 20090121 J QueryからはじめるJava Script~初級編~](https://reader031.fdocument.pub/reader031/viewer/2022013122/55abb05e1a28abcf558b45ef/html5/thumbnails/12.jpg)
じゃあ DOM って何なのさ?
・ Document Object Model ・ W3C って組織が決めた API 仕様です ・実装方法はベンダまかせです
・ document オブジェクトがその実装 ・ JScript は KY だからみんな困ってる ・レベル 0 〜3までの規定がある ・ XML,HTML, イベントとか辺りを規定してる
![Page 13: 20090121 J QueryからはじめるJava Script~初級編~](https://reader031.fdocument.pub/reader031/viewer/2022013122/55abb05e1a28abcf558b45ef/html5/thumbnails/13.jpg)
だから何なのさ?
・一部の特殊な仕様を理解すればどうということはない ・ただ、 ECMA か DOM か、調べたいとこは見極めよう ・犯人は誰か、冷静に考えれば分かる ECMAScript 実装以外の処理系ごとの拡張 ... ベンダの DOM 実装 ... IE,IE,IE!!!
まあ、すぐに「ブラウザ依存だー!!」はやめよう
![Page 14: 20090121 J QueryからはじめるJava Script~初級編~](https://reader031.fdocument.pub/reader031/viewer/2022013122/55abb05e1a28abcf558b45ef/html5/thumbnails/14.jpg)
本題
![Page 15: 20090121 J QueryからはじめるJava Script~初級編~](https://reader031.fdocument.pub/reader031/viewer/2022013122/55abb05e1a28abcf558b45ef/html5/thumbnails/15.jpg)
2.jQuery の基礎
![Page 16: 20090121 J QueryからはじめるJava Script~初級編~](https://reader031.fdocument.pub/reader031/viewer/2022013122/55abb05e1a28abcf558b45ef/html5/thumbnails/16.jpg)
jQuery
・ John Resig と有志・ 18KB・クロスブラウザ IE6+ FF3+ Safari3+ Opera9+・最近 1.3 がリリースされた
・強力で爆速な CSS セレクタ
・メソッドチェーンによる直感的な API
・ prototype汚染の心配なしで、読み込むだけで使える
・アニメーションや ajax周りも最低限サポート
![Page 17: 20090121 J QueryからはじめるJava Script~初級編~](https://reader031.fdocument.pub/reader031/viewer/2022013122/55abb05e1a28abcf558b45ef/html5/thumbnails/17.jpg)
学習方法
・日本語のすばらしいリファレンス 正直それ読めばおk
・なにはともあれCSSセレクタの勘をつかむ それが全てといっても過言ではない
・メソッドチェーンにも慣れる それ一行で書けない?
要は使って慣れろです
![Page 18: 20090121 J QueryからはじめるJava Script~初級編~](https://reader031.fdocument.pub/reader031/viewer/2022013122/55abb05e1a28abcf558b45ef/html5/thumbnails/18.jpg)
実例紹介
![Page 19: 20090121 J QueryからはじめるJava Script~初級編~](https://reader031.fdocument.pub/reader031/viewer/2022013122/55abb05e1a28abcf558b45ef/html5/thumbnails/19.jpg)
次回予告
・ DOM詳しく ・イベントリスナーとか ・ jQuery のプラグイン ・ Ajax ・ YUI ・ Dojo・アニメーションライブラリ
![Page 20: 20090121 J QueryからはじめるJava Script~初級編~](https://reader031.fdocument.pub/reader031/viewer/2022013122/55abb05e1a28abcf558b45ef/html5/thumbnails/20.jpg)
付録 ~勉強のおともに~
・オライリー本「 JavaScript」と「 JavaScript クイックリファレンス」
・ ECMAScriptUnder Translation of ECMA-262 3rd Editionhttp://www2u.biglobe.ne.jp/~oz-07ams/prog/ecma262r3/
・ jQueryjQuery1.3日本語リファレンスhttp://semooh.jp/jquery/
![Page 21: 20090121 J QueryからはじめるJava Script~初級編~](https://reader031.fdocument.pub/reader031/viewer/2022013122/55abb05e1a28abcf558b45ef/html5/thumbnails/21.jpg)
ご清聴ありがとうございました。