Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
jQuery からはじめる JavaScript 〜初級編〜
1.JavaScript の基礎  
JavaScript <ul><li>・ UpperCamelCase </li></ul><ul><li>・間にスペース挟むな!! </li></ul><ul><li>             ×   javascript </li></ul...
歴史(ググッたらわかるレベル) <ul><li>誕生 (1995) </li></ul><ul><li>NetScape の中の人が開発。ネスケ 2.0 で LiveScript としてデビュー </li></ul><ul><li>発展 (19...
つまり… どういうこと? <ul><li>1. モダン js 童貞が許されるのは小学生までだよね! </li></ul><ul><li>・何回も蘇ってるばかりか若返ってる=時代が必要としてる  </li></ul><ul><li>・各大型ベンダ...
改めまして…  
JavaScript を知るキーワード <ul><li>・プロトタイプベース </li></ul><ul><li>・ ECMAScript </li></ul><ul><li>・ DOM </li></ul><ul><li>個人的に知りたいもの...
プロトタイプベース <ul><li>・クラス / インスタンスの関係は(厳密には)無い </li></ul><ul><li>  </li></ul><ul><li>・オブジェクトの振る舞いを動的に変更できる </li></ul><ul><li>...
example: <ul><li>クラスベースなら… (PHP5) </li></ul><ul><li>  </li></ul><ul><li>class Rectangle{ </li></ul><ul><li>   private $wid...
js におけるオブジェクト <ul><li>・リテラルで書けちゃう(いきなりインスタンス生成) </li></ul><ul><li>  var rectangle = { width: 10, height: 15 } // 最後にピリオド入れ...
ECMA って何なのさ? <ul><li>・大人の事情です </li></ul><ul><li>  </li></ul><ul><li>・ ECMAScript は言語コアの規格名。仕様書もあるよ </li></ul><ul><li>  </l...
じゃあ DOM って何なのさ? <ul><li>・ Document Object Model  </li></ul><ul><li>  </li></ul><ul><li>・ W3C って組織が決めた API 仕様です </li></ul><...
だから何なのさ? <ul><li>・一部の特殊な仕様を理解すればどうということはない </li></ul><ul><li>  </li></ul><ul><li>・ただ、 ECMA か DOM か、調べたいとこは見極めよう  </li></ul...
本題  
2.jQuery の基礎  
jQuery <ul><li>・ John Resig  と有志 </li></ul><ul><li>・ 18KB </li></ul><ul><li>・クロスブラウザ </li></ul><ul><li>  IE6+ FF3+ Safari3...
学習方法 <ul><li>・日本語のすばらしいリファレンス </li></ul><ul><li>  正直それ読めばおk </li></ul><ul><li>・なにはともあれCSSセレクタの勘をつかむ </li></ul><ul><li>  それ...
実例紹介  
次回予告 <ul><li>    ・ DOM 詳しく </li></ul><ul><li>  ・イベントリスナーとか </li></ul><ul><li>  ・ jQuery のプラグイン </li></ul><ul><li>      ・ A...
付録 ~勉強のおともに~ <ul><li>・オライリー本 </li></ul><ul><li>「 JavaScript 」と「 JavaScript クイックリファレンス」 </li></ul><ul><li>・ ECMAScript </li...
ご清聴ありがとうございました。  
Upcoming SlideShare
Loading in …5
×

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

6,735 views

Published on

  • Be the first to comment

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

  1. 1. jQuery からはじめる JavaScript 〜初級編〜
  2. 2. 1.JavaScript の基礎  
  3. 3. JavaScript <ul><li>・ UpperCamelCase </li></ul><ul><li>・間にスペース挟むな!! </li></ul><ul><li>             ×   javascript </li></ul><ul><li>                 ×   Java Script </li></ul><ul><li>                 ×   javaScript </li></ul><ul><li>・読み方は胸はって「じゃゔぁ」でお k </li></ul>
  4. 4. 歴史(ググッたらわかるレベル) <ul><li>誕生 (1995) </li></ul><ul><li>NetScape の中の人が開発。ネスケ 2.0 で LiveScript としてデビュー </li></ul><ul><li>発展 (1995-1996) </li></ul><ul><li>Microsoft IE との開発競争。機能の増大、仕様の複雑化 </li></ul><ul><li>統合 (1997) </li></ul><ul><li>  国際団体の Ecma により ECMAScript として標準化される </li></ul><ul><li>普及 ( 〜 2005) </li></ul><ul><li>  web ページの装飾に。入力チェックに。補助的なポジション </li></ul><ul><li>Ajax の登場 (2005) </li></ul><ul><li>非同期通信による新しい Web インタフェース。再評価高まる </li></ul><ul><li>モダン js としての再出発 (2005 〜 )   </li></ul><ul><li>rails とともに prototype .js 登場。新たなライブラリ群 </li></ul><ul><li>V8 の登場 (2008) </li></ul><ul><li>爆速の google chrome リリース。ブラウザ開発競争再燃 </li></ul>
  5. 5. つまり… どういうこと? <ul><li>1. モダン js 童貞が許されるのは小学生までだよね! </li></ul><ul><li>・何回も蘇ってるばかりか若返ってる=時代が必要としてる </li></ul><ul><li>・各大型ベンダが盛り上がってる=そこにカネの匂いがある </li></ul><ul><li>        ->ガラパゴス開発ばっかやってる場合じゃねえ! </li></ul><ul><li>2. 今なら相当開発楽なんじゃねえの?? </li></ul><ul><li>・すごい人らが、すごいライブラリを沢山用意してくれてる </li></ul><ul><li>・もういい加減クロスブラウザ気にしなくて良い…よね? </li></ul><ul><li>・開発環境もちっとはこなれてきてる…はず </li></ul><ul><li>                       ->機は熟してる! </li></ul>
  6. 6. 改めまして…  
  7. 7. JavaScript を知るキーワード <ul><li>・プロトタイプベース </li></ul><ul><li>・ ECMAScript </li></ul><ul><li>・ DOM </li></ul><ul><li>個人的に知りたいものをチョイスしました </li></ul>
  8. 8. プロトタイプベース <ul><li>・クラス / インスタンスの関係は(厳密には)無い </li></ul><ul><li>  </li></ul><ul><li>・オブジェクトの振る舞いを動的に変更できる </li></ul><ul><li>  </li></ul><ul><li>・スロット=可変の構造体としてオブジェクトは捉えられる </li></ul><ul><li>  </li></ul><ul><li>            ... プログラマーは概念よりコード見た方が理解が早い </li></ul>
  9. 9. example: <ul><li>クラスベースなら… (PHP5) </li></ul><ul><li>  </li></ul><ul><li>class Rectangle{ </li></ul><ul><li>  private $width; </li></ul><ul><li>  private $height; </li></ul><ul><li>   public function __construct($w,$h){ </li></ul><ul><li>    $this->setWidth($w); </li></ul><ul><li>    $this->setHeight($h); </li></ul><ul><li>  } </li></ul><ul><li>  /* accessor 定義は割愛 */ </li></ul><ul><li>  public function getArea(){ </li></ul><ul><li>    return $this->getWidth()* </li></ul><ul><li>               $this->getHeight(); </li></ul><ul><li>  } </li></ul><ul><li>} </li></ul><ul><li>$rectangle = new Rectangle(10,15); </li></ul><ul><li>echo $rectangle->getArea(); // 150 </li></ul>・ 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. 10. js におけるオブジェクト <ul><li>・リテラルで書けちゃう(いきなりインスタンス生成) </li></ul><ul><li>  var rectangle = { width: 10, height: 15 } // 最後にピリオド入れちゃダメ! </li></ul><ul><li>・プロパティだけだとハッシュ(配列もオブジェクト) </li></ul><ul><li>  alert(rectangle.width); //10 </li></ul><ul><li>・プロパティは文字列でもアクセスできる </li></ul><ul><li>  alert(rectangle.[&quot;width&quot;]); //10 </li></ul><ul><li>・暗黙の constructor プロパティ=コンストラクタ関数への参照 </li></ul><ul><li>    var rectangle = new Rectangle(10,15); </li></ul><ul><li>     rectangle.constructor == Rectangle; //true と評価される </li></ul><ul><li>・暗黙の prototype プロパティ </li></ul><ul><li>  = constructor プロパティのみを持つオブジェクトへの参照 </li></ul><ul><li>・ prototype にプロパティ追加する=継承 </li></ul><ul><li>                  はいもうわけわかめ!! </li></ul>
  11. 11. ECMA って何なのさ? <ul><li>・大人の事情です </li></ul><ul><li>  </li></ul><ul><li>・ ECMAScript は言語コアの規格名。仕様書もあるよ </li></ul><ul><li>  </li></ul><ul><li>・ JavaScript=ECMAScript で正しいんです </li></ul><ul><li>  </li></ul><ul><li>・ AdobeFlash での ECMAScript 実装は ActionScript と呼ばれてる </li></ul><ul><li>  </li></ul><ul><li>・ IE は実は今でも JScript が呼称 </li></ul><ul><li>  </li></ul><ul><li>・ getElementById メソッドとかは含まれてません </li></ul>
  12. 12. じゃあ DOM って何なのさ? <ul><li>・ Document Object Model </li></ul><ul><li>  </li></ul><ul><li>・ W3C って組織が決めた API 仕様です </li></ul><ul><li>  </li></ul><ul><li>・実装方法はベンダまかせです  </li></ul><ul><li>・ document オブジェクトがその実装 </li></ul><ul><li>  </li></ul><ul><li>・ JScript は KY だからみんな困ってる </li></ul><ul><li>  </li></ul><ul><li>・レベル 0 〜3までの規定がある </li></ul><ul><li>  </li></ul><ul><li>・ XML,HTML, イベントとか辺りを規定してる </li></ul>
  13. 13. だから何なのさ? <ul><li>・一部の特殊な仕様を理解すればどうということはない </li></ul><ul><li>  </li></ul><ul><li>・ただ、 ECMA か DOM か、調べたいとこは見極めよう  </li></ul><ul><li>  </li></ul><ul><li>・犯人は誰か、冷静に考えれば分かる </li></ul><ul><li>  </li></ul><ul><li>           ECMAScript 実装以外の処理系ごとの拡張 ... </li></ul><ul><li>              ベンダの DOM 実装 ... </li></ul><ul><li>                 IE,IE,IE!!! </li></ul><ul><li>                         まあ、すぐに 「ブラウザ依存だー!!」 は やめよう </li></ul>
  14. 14. 本題  
  15. 15. 2.jQuery の基礎  
  16. 16. jQuery <ul><li>・ John Resig と有志 </li></ul><ul><li>・ 18KB </li></ul><ul><li>・クロスブラウザ </li></ul><ul><li>  IE6+ FF3+ Safari3+ Opera9+ </li></ul><ul><li>・最近 1.3 がリリースされた </li></ul><ul><li>・強力で爆速な CSS セレクタ </li></ul><ul><li>・メソッドチェーンによる直感的な API </li></ul><ul><li>・ prototype 汚染の心配なしで、読み込むだけで使える </li></ul><ul><li>・アニメーションや ajax 周りも最低限サポート </li></ul>
  17. 17. 学習方法 <ul><li>・日本語のすばらしいリファレンス </li></ul><ul><li>  正直それ読めばおk </li></ul><ul><li>・なにはともあれCSSセレクタの勘をつかむ </li></ul><ul><li>  それが全てといっても過言ではない </li></ul><ul><li>・メソッドチェーンにも慣れる </li></ul><ul><li>  それ一行で書けない? </li></ul><ul><li>  </li></ul><ul><li>                      要は使って慣れろです </li></ul>
  18. 18. 実例紹介  
  19. 19. 次回予告 <ul><li>    ・ DOM 詳しく </li></ul><ul><li>  ・イベントリスナーとか </li></ul><ul><li>  ・ jQuery のプラグイン </li></ul><ul><li>      ・ Ajax </li></ul><ul><li>      ・ YUI </li></ul><ul><li>      ・ Dojo </li></ul><ul><li>・アニメーションライブラリ </li></ul><ul><li>       </li></ul>
  20. 20. 付録 ~勉強のおともに~ <ul><li>・オライリー本 </li></ul><ul><li>「 JavaScript 」と「 JavaScript クイックリファレンス」 </li></ul><ul><li>・ ECMAScript </li></ul><ul><li>Under Translation of ECMA-262 3rd Edition </li></ul><ul><li>http://www2u.biglobe.ne.jp/~oz-07ams/prog/ecma262r3/ </li></ul><ul><li>・ jQuery </li></ul><ul><li>jQuery1.3 日本語リファレンス </li></ul><ul><li>http://semooh.jp/jquery/ </li></ul>
  21. 21. ご清聴ありがとうございました。  

×