jQuery からはじめるJavaScript

〜初級編〜

1.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!!!

                         まあ、すぐに「ブラウザ依存だー！！」はやめよう

本題　

2.jQuery の基礎

　

jQuery

・ John Resig  と有志・ 18KB・クロスブラウザ　 IE6+ FF3+ Safari3+ Opera9+・最近 1.3 がリリースされた

・強力で爆速な CSS セレクタ

・メソッドチェーンによる直感的な API

・ prototype汚染の心配なしで、読み込むだけで使える

・アニメーションや ajax周りも最低限サポート

学習方法

・日本語のすばらしいリファレンス　　正直それ読めばおｋ

・なにはともあれＣＳＳセレクタの勘をつかむ　　それが全てといっても過言ではない

・メソッドチェーンにも慣れる　　それ一行で書けない？　

　　　　　　　　　　　　　　　　　　　　　要は使って慣れろです

実例紹介　

次回予告

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

付録　～勉強のおともに～

・オライリー本「 JavaScript」と「 JavaScript クイックリファレンス」

・ ECMAScriptUnder Translation of ECMA-262 3rd Editionhttp://www2u.biglobe.ne.jp/~oz-07ams/prog/ecma262r3/

・ jQueryjQuery1.3日本語リファレンスhttp://semooh.jp/jquery/

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