HTML5 の前のJavaScript 入門        ビーンズ株式会社 豊川
アウトライン         • スピーカーについて         • HTML5とは         • jQueryとは         • Lesson 1         • Lesson 2         • 役に立つWebサイト...
スピーカーについて         • 豊川 弘樹 (24歳)         • 19歳のときプログラミングを本格的に始める                                                       アルパカ...
HTML5 とはビーンズ株式会社 ( http://beanzinc.jp )   4   2012-11 HTML5の前のJavaScript入門
HTML5 とは      狭義: HTMLのバージョン5としての仕様      広義: CSS3やWebGLなどの周辺技術を含めた仕様群                           広義のHTML5に含まれる技術例          ...
カメラアクセス デモ         •    Dev.Operaビーンズ株式会社 ( http://beanzinc.jp )   6   2012-11 HTML5の前のJavaScript入門
WebGL デモ         •    Three.jsビーンズ株式会社 ( http://beanzinc.jp )   7   2012-11 HTML5の前のJavaScript入門
HTML5 がすごいのはわかったけど       なんで JavaScript なん?ビーンズ株式会社 ( http://beanzinc.jp )   8   2012-11 HTML5の前のJavaScript入門
HTML5 と言うけれど実際は...                                             JavaScript 必須!!                                  footerなどの新...
JavaScript の愉快な仲間たち      ショートコーディング                       モバイル用Web作成支援             iPhoneアプリ                   サーバーサイド    ...
アプリからサーバーまでなんでもできる...                                  そう、JavaScript ならねビーンズ株式会社 ( http://beanzinc.jp )      11   2012-11 ...
唐突ですが...             今日は jQuery を使います!!                                       Ω ΩΩ<な、なんだってー!?ビーンズ株式会社 ( http://beanzinc.jp...
jQuery とはビーンズ株式会社 ( http://beanzinc.jp )   13   2012-11 HTML5の前のJavaScript入門
jQuery とは         •    JavaScriptを素早く簡単に書くためのライブラリ         •    jQueryを使うことである程度クロスブラウザ(※1)              対応が可能            ...
jQuery を使って書くとどうなるの?ビーンズ株式会社 ( http://beanzinc.jp )   15   2012-11 HTML5の前のJavaScript入門
例えば...       クリックしたときに何かする!!ビーンズ株式会社 ( http://beanzinc.jp )   16   2012-11 HTML5の前のJavaScript入門
Native JavaScript       var  foo  =  function(){               alert(ʻ‘piyoʼ’);       };       var  hoge  =  document.getE...
jQuery       $(ʻ‘#hogeʼ’).click(function(){               alert(ʻ‘piyoʼ’);       });ビーンズ株式会社 ( http://beanzinc.jp )       ...
例えば...                      img要素を追加するビーンズ株式会社 ( http://beanzinc.jp )   19   2012-11 HTML5の前のJavaScript入門
Native JavaScript       window.onload  =  function(){               var  element  =  document.createElement(img);         ...
jQuery       $(function(){               $(<img  />).attr(src,  img/1.jpg).css({width:400px,  height:300px}).appendTo(body...
jQuery は公式サイトからダウンロードできます!!                                       http://jquery.com/              クリック → 名前を付けて保存ビーンズ株式会社 ...
本日のレシピ      • Lesson 1           マウスオーバーで画像を切り替える      • Lesson 2           画像を自動的に切り替えてスライドショーにするビーンズ株式会社 ( http://beanzi...
材料                                     Mac                Windows          ブラウザ                                     Google...
Lesson 1マウスオーバーで画像を切り替えるビーンズ株式会社 ( http://beanzinc.jp )   25   2012-11 HTML5の前のJavaScript入門
<作業フォルダ>     ├lesson1.html     ├img/     │├1.jpg     │└2.jpg     └js/       └jquery-‐‑‒1.8.1.min.js                  ※先ほどダ...
lesson1.html<!DOCTYPE  html><html>                                            HTML5の宣言        <head>                <meta ...
lesson1.html                                   追記していきます                <img  src="img/1.jpg"  width="400"  height="300"  i...
lesson1.htmlをブラウザで確認してみましょう!!                                       lesson1.htmlをブラウザで開きます           うまく動かないときは...        ...
HTML復習         <img  src=”img/1.jpg”  id=”alpaca”  class=”animals”  />       要素名       属性名          属性値     id名 (重複不可)    ...
マウスオーバー時は...し、マウスアウト時は...する      $(ʻ‘img#alpacaʼ’).hover(              function(){                            マウスオーバー時の処理理...
Lesson 1                   <!DOCTYPE  html>                           <html>ソースコード                             <head>     ...
Lesson 2画像を自動的に切り替えて	 	 	 	 	 	 	 スライドショーにするビーンズ株式会社 ( http://beanzinc.jp )   33   2012-11 HTML5の前のJavaScript入門
<作業フォルダ>                                       lesson1.htmlをコピーして新しく作ります    ├lesson1.html    ├lesson2.html    ├img/    │├1...
lesson2.html<!DOCTYPE  html><html>                                            Lesson 2に変更        <head>                <me...
               <script  type=”text/javascript”>                        var  imgs  =  [    //  画像リスト   追記していきます            ...
lesson2.htmlをブラウザで確認してみましょう!!                                       lesson2.htmlをブラウザで開きます           うまく動かないときは...        ...
変数  ...  ⽂文字列列や数値などに名前を付けたもの     var  hoge  =  ʻ‘あああʼ’;     var  foo  =  123;                変数は「var」を付けて宣言    例     var  ...
配列列  ...  同じ種類の要素を⼊入れておく箱                                                   配列                             要素         要素  ...
setInterval  ...  ⼀一定間隔で何かする(タイマー)     var  timer  =  setInterval(function(){             //  何かの処理理(⼀一定間隔で何度度も実⾏行行される)   ...
3秒間隔で繰り返し  if  (index  >  4)  {    //  インデックスが4より⼤大きいとき          index  =  0;    //  インデックスを0に戻す  }  $(img#alpaca).attr(sr...
Lesson 2                   <!DOCTYPE  html>                           <html>ソースコード                             <head>     ...
役に立つWebサイト・書籍のご紹介ビーンズ株式会社 ( http://beanzinc.jp )   43   2012-11 HTML5の前のJavaScript入門
jQuery の入門には...                           •      jQuery日本語リファレンス                                  http://semooh.jp/jquery/...
JavaScript の入門には...                           •      JavaScriptリファレンス | MDN                                  https://devel...
JavaScript を本格的に勉強するために...                           •      JavaScript 第6版                                  David Flanagan...
楽しい JavaScript ライブラリ & API ご紹介ビーンズ株式会社 ( http://beanzinc.jp )   47   2012-11 HTML5の前のJavaScript入門
jQuery Mobile                    http://jquerymobile.com/     こんなあなたにおすすめ                       難易度 ★☆☆☆☆        • 手軽にリッチな...
Titanium                    http://www.appcelerator.com/platform/titanium-sdk/     こんなあなたにおすすめ                            ...
Facebook SDK                         for JavaScript                                  http://developers.facebook.com/docs/r...
node.js                     http://nodejs.org/     こんなあなたにおすすめ                                   難易度 ★★★★☆        • リアルタイム...
three.js                    http://mrdoob.github.com/three.js/     こんなあなたにおすすめ                                難易度 ★★★★★   ...
以上です。本日はありがとうございました。                           スライドのURLは弊社Facebookページにて告知させて頂きます。                                   弊社では一緒...
おまけ・其の壱            Lesson 1のやつをCSSでやるビーンズ株式会社 ( http://beanzinc.jp )   54   2012-11 HTML5の前のJavaScript入門
・・・    CSSのhover疑似クラスを使うと    マウスオーバーしたときの    スタイルを指定できる                  !!              CSSではimg要素の                      ...
omake1.html<!DOCTYPE  html><html>        <head>                <meta  http-‐‑‒equiv="Content-‐‑‒Type"  content="text/html;...
おまけ・其の弐リアルタイムWebでよく出てくる                WebSocketってなんなん?ビーンズ株式会社 ( http://beanzinc.jp )   57   2012-11 HTML5の前のJavaScript入門
従来 ... クライアントがサーバーに問い合わせにいく(Pull型)       Webサーバー                                       クライアント                             ...
WebSocket                  ... サーバーからクライアントへのアクション(Push) が可能       Webサーバー                                           クライアン...
リアルタイムチャット デモ         •    node.js + Socket.IO              http://apps.alpacat.com/chat_room/              2つ以上のタブやブラウザを開...
fin.ビーンズ株式会社 ( http://beanzinc.jp )    61    2012-11 HTML5の前のJavaScript入門
Upcoming SlideShare
Loading in...5
×

HTML5の前のJavaScript入門

4,664

Published on

2012年11月29日(木)に飯田橋にて開催いたしました勉強会の資料になります。

Published in: Technology

HTML5の前のJavaScript入門

  1. 1. HTML5 の前のJavaScript 入門 ビーンズ株式会社 豊川
  2. 2. アウトライン • スピーカーについて • HTML5とは • jQueryとは • Lesson 1 • Lesson 2 • 役に立つWebサイト・書籍のご紹介 • 楽しいJavaScript ライブラリ & API ご紹介 • おまけビーンズ株式会社 ( http://beanzinc.jp ) 2 2012-11 HTML5の前のJavaScript入門
  3. 3. スピーカーについて • 豊川 弘樹 (24歳) • 19歳のときプログラミングを本格的に始める アルパカ好きって言うと • 好きな言語は JavaScript 好きな動物はアルパカ よくあぁ∼って言われます • その他扱える言語は PHP, Objective-C, C, Python, Ruby, 関西弁 など • これまで作ったものはポートフォリオに ( http://alpacat.com )ビーンズ株式会社 ( http://beanzinc.jp ) 3 2012-11 HTML5の前のJavaScript入門
  4. 4. HTML5 とはビーンズ株式会社 ( http://beanzinc.jp ) 4 2012-11 HTML5の前のJavaScript入門
  5. 5. HTML5 とは 狭義: HTMLのバージョン5としての仕様 広義: CSS3やWebGLなどの周辺技術を含めた仕様群 広義のHTML5に含まれる技術例 footerなどの新しいタグ WebGL CSS3 Canvas audio, video要素 マイク、カメラなどのデバイスアクセスビーンズ株式会社 ( http://beanzinc.jp ) 5 2012-11 HTML5の前のJavaScript入門
  6. 6. カメラアクセス デモ • Dev.Operaビーンズ株式会社 ( http://beanzinc.jp ) 6 2012-11 HTML5の前のJavaScript入門
  7. 7. WebGL デモ • Three.jsビーンズ株式会社 ( http://beanzinc.jp ) 7 2012-11 HTML5の前のJavaScript入門
  8. 8. HTML5 がすごいのはわかったけど なんで JavaScript なん?ビーンズ株式会社 ( http://beanzinc.jp ) 8 2012-11 HTML5の前のJavaScript入門
  9. 9. HTML5 と言うけれど実際は... JavaScript 必須!! footerなどの新しいタグ WebGL CSS3 Canvas audio, video要素 マイク、カメラなどのデバイスアクセス JavaScript で扱うことが多い!!ビーンズ株式会社 ( http://beanzinc.jp ) 9 2012-11 HTML5の前のJavaScript入門
  10. 10. JavaScript の愉快な仲間たち ショートコーディング モバイル用Web作成支援 iPhoneアプリ サーバーサイド &Androidアプリ &リアルタイムWebビーンズ株式会社 ( http://beanzinc.jp ) 10 2012-11 HTML5の前のJavaScript入門
  11. 11. アプリからサーバーまでなんでもできる... そう、JavaScript ならねビーンズ株式会社 ( http://beanzinc.jp ) 11 2012-11 HTML5の前のJavaScript入門
  12. 12. 唐突ですが... 今日は jQuery を使います!! Ω ΩΩ<な、なんだってー!?ビーンズ株式会社 ( http://beanzinc.jp ) 12 2012-11 HTML5の前のJavaScript入門
  13. 13. jQuery とはビーンズ株式会社 ( http://beanzinc.jp ) 13 2012-11 HTML5の前のJavaScript入門
  14. 14. jQuery とは • JavaScriptを素早く簡単に書くためのライブラリ • jQueryを使うことである程度クロスブラウザ(※1) 対応が可能 ※1 あらゆるブラウザで正常に動作すること “ 一人前のJavaScript使いになるためには、ブラウザの違いに 翻弄されて目を血走らせながら「IEがぁ、IEがあぁぁ」と ” 叫ぶ儀式を通過しなければいけない。 プログラミング言語人気TOP10の簡易解説より http://www.mwsoft.jp/column/program_top10.html • おそらく今最も使われているJavaScriptライブラリビーンズ株式会社 ( http://beanzinc.jp ) 14 2012-11 HTML5の前のJavaScript入門
  15. 15. jQuery を使って書くとどうなるの?ビーンズ株式会社 ( http://beanzinc.jp ) 15 2012-11 HTML5の前のJavaScript入門
  16. 16. 例えば... クリックしたときに何かする!!ビーンズ株式会社 ( http://beanzinc.jp ) 16 2012-11 HTML5の前のJavaScript入門
  17. 17. Native JavaScript var  foo  =  function(){        alert(ʻ‘piyoʼ’); }; var  hoge  =  document.getElementById(ʻ‘hogeʼ’); //  Chrome,  Firefox⽤用 hoge.addEventListener(ʻ‘clickʼ’,  foo,  false); //  IE,  Opera⽤用 hoge.attachEvent(ʻ‘onclickʼ’,  foo);ビーンズ株式会社 ( http://beanzinc.jp ) 17 2012-11 HTML5の前のJavaScript入門
  18. 18. jQuery $(ʻ‘#hogeʼ’).click(function(){        alert(ʻ‘piyoʼ’); });ビーンズ株式会社 ( http://beanzinc.jp ) 18 2012-11 HTML5の前のJavaScript入門
  19. 19. 例えば... img要素を追加するビーンズ株式会社 ( http://beanzinc.jp ) 19 2012-11 HTML5の前のJavaScript入門
  20. 20. Native JavaScript window.onload  =  function(){        var  element  =  document.createElement(img);        element.src  =  img/1.jpg;        element.style.width  =  400px;        element.style.height  =  300px;        var  body  =  document.getElementsByTagName("body").item(0);          body.appendChild(element); };ビーンズ株式会社 ( http://beanzinc.jp ) 20 2012-11 HTML5の前のJavaScript入門
  21. 21. jQuery $(function(){        $(<img  />).attr(src,  img/1.jpg).css({width:400px,  height:300px}).appendTo(body); });ビーンズ株式会社 ( http://beanzinc.jp ) 21 2012-11 HTML5の前のJavaScript入門
  22. 22. jQuery は公式サイトからダウンロードできます!! http://jquery.com/ クリック → 名前を付けて保存ビーンズ株式会社 ( http://beanzinc.jp ) 22 2012-11 HTML5の前のJavaScript入門
  23. 23. 本日のレシピ • Lesson 1 マウスオーバーで画像を切り替える • Lesson 2 画像を自動的に切り替えてスライドショーにするビーンズ株式会社 ( http://beanzinc.jp ) 23 2012-11 HTML5の前のJavaScript入門
  24. 24. 材料 Mac Windows ブラウザ Google Chrome Firefox など SakuraEditor メモ帳 TeraPad など CotEditor ライブラリ jQueryビーンズ株式会社 ( http://beanzinc.jp ) 24 2012-11 HTML5の前のJavaScript入門
  25. 25. Lesson 1マウスオーバーで画像を切り替えるビーンズ株式会社 ( http://beanzinc.jp ) 25 2012-11 HTML5の前のJavaScript入門
  26. 26. <作業フォルダ> ├lesson1.html ├img/ │├1.jpg │└2.jpg └js/   └jquery-‐‑‒1.8.1.min.js ※先ほどダウンロードしたものビーンズ株式会社 ( http://beanzinc.jp ) 26 2012-11 HTML5の前のJavaScript入門
  27. 27. lesson1.html<!DOCTYPE  html><html> HTML5の宣言        <head>                <meta  http-‐‑‒equiv="Content-‐‑‒Type"  content="text/html;  charset=UTF-‐‑‒8">                <title>Lesson  1</title>                <script  type="text/javascript"  src="js/jquery-‐‑‒1.8.1.min.js"></script>        </head> jQuery読み込み        <body>                <img  src="img/1.jpg"  width="400"  height="300"  id="alpaca"  />        </body></html> jQueryで操作するためにidを振っておく 文字コードをUTF-8にして保存するのを忘れないでください!!ビーンズ株式会社 ( http://beanzinc.jp ) 27 2012-11 HTML5の前のJavaScript入門
  28. 28. lesson1.html 追記していきます                <img  src="img/1.jpg"  width="400"  height="300"  id="alpaca"  />                                <script  type=”text/javascript”>                        $(ʻ‘img#alpacaʼ’).hover(                                function(){ 自分で付けたid名                                        $(ʻ‘img#alpacaʼ’).attr(ʻ‘srcʼ’,  ʻ‘img/2.jpgʼ’);                                },                              function(){                                        $(ʻ‘img#alpacaʼ’).attr(ʻ‘srcʼ’,  ʻ‘img/1.jpgʼ’);                                }                        );                </script>        </body>ビーンズ株式会社 ( http://beanzinc.jp ) 28 2012-11 HTML5の前のJavaScript入門
  29. 29. lesson1.htmlをブラウザで確認してみましょう!! lesson1.htmlをブラウザで開きます うまく動かないときは... • jQuery 読み込みのファイルパスがあっているか • { } や ( ) の数と位置があっているか • , (コンマ)や ’ (クォート)を忘れていないか • 行末の ; (セミコロン)を忘れていないか • id名の指定があっているかビーンズ株式会社 ( http://beanzinc.jp ) 29 2012-11 HTML5の前のJavaScript入門
  30. 30. HTML復習 <img  src=”img/1.jpg”  id=”alpaca”  class=”animals”  /> 要素名 属性名 属性値 id名 (重複不可) class名 (重複OK) alpacaというid名のimg要素のsrc属性に  img/2.jpg  を設定する $(ʻ‘img#alpacaʼ’).attr(ʻ‘srcʼ’,  ʻ‘img/2.jpgʼ’); 要素名 id or class名 属性名 属性値 id は「#」 属性を設定する (属性: attribute) class は「.」ビーンズ株式会社 ( http://beanzinc.jp ) 30 2012-11 HTML5の前のJavaScript入門
  31. 31. マウスオーバー時は...し、マウスアウト時は...する $(ʻ‘img#alpacaʼ’).hover(        function(){ マウスオーバー時の処理理                $(ʻ‘img#alpacaʼ’).attr(ʻ‘srcʼ’,  ʻ‘img/2.jpgʼ’);        }, alpacaというid名のimg要素のsrc属性に ‘img/2.jpg’ を設定する        function(){ マウスアウト時の処理理                $(ʻ‘img#alpacaʼ’).attr(ʻ‘srcʼ’,  ʻ‘img/1.jpgʼ’);        } alpacaというid名のimg要素のsrc属性に ‘img/1.jpg’ を設定する );ビーンズ株式会社 ( http://beanzinc.jp ) 31 2012-11 HTML5の前のJavaScript入門
  32. 32. Lesson 1 <!DOCTYPE  html> <html>ソースコード        <head>                <meta  http-‐‑‒equiv="Content-‐‑‒Type"  content="text/html;   charset=UTF-‐‑‒8">                <title>Lesson  1</title>                <script  type="text/javascript"  src="js/jquery-‐‑‒1.8.1.min.js"></script>        </head>        <body>                <img  src="img/1.jpg"  width="400"  height="300"  id="alpaca"  />                <script  type=”text/javascript”>                        $(ʻ‘img#alpacaʼ’).hover(                                function(){                                        $(ʻ‘img#alpacaʼ’).attr(ʻ‘srcʼ’,  ʻ‘img/2.jpgʼ’);                                },                              function(){                                        $(ʻ‘img#alpacaʼ’).attr(ʻ‘srcʼ’,  ʻ‘img/1.jpgʼ’);                                }                        );                </script>        </body> </html>ビーンズ株式会社 ( http://beanzinc.jp ) 32 2012-11 HTML5の前のJavaScript入門
  33. 33. Lesson 2画像を自動的に切り替えて スライドショーにするビーンズ株式会社 ( http://beanzinc.jp ) 33 2012-11 HTML5の前のJavaScript入門
  34. 34. <作業フォルダ> lesson1.htmlをコピーして新しく作ります ├lesson1.html ├lesson2.html ├img/ │├1.jpg 画像を追加します │├2.jpg │├3.jpg │├4.jpg │└5.jpg └js/   └jquery-‐‑‒1.8.1.min.jsビーンズ株式会社 ( http://beanzinc.jp ) 34 2012-11 HTML5の前のJavaScript入門
  35. 35. lesson2.html<!DOCTYPE  html><html> Lesson 2に変更        <head>                <meta  http-‐‑‒equiv="Content-‐‑‒Type"  content="text/html;  charset=UTF-‐‑‒8">                <title>Lesson  2</title>                <script  type="text/javascript"  src="js/jquery-‐‑‒1.8.1.min.js"></script>        </head> 5.jpgに変更        <body>                <img  src="img/5.jpg"  width="400"  height="300"  id="alpaca"  />                <script  type=”text/javascript”>                        //  次ページで                </script> 全て消去します        </body></html> 文字コードをUTF-8にして保存するのを忘れないでください!!ビーンズ株式会社 ( http://beanzinc.jp ) 35 2012-11 HTML5の前のJavaScript入門
  36. 36.                <script  type=”text/javascript”>                        var  imgs  =  [    //  画像リスト 追記していきます                                1.jpg,  //  0番⽬目                                2.jpg,  //  1                                3.jpg,  //  2                                4.jpg,  //  3                                5.jpg    //  4                        ];                        var  index  =  0;  //  画像リストのインデックス(0開始)                        var  timer  =  setInterval(function(){                                if  (index  >  4)  {    //  インデックスが4より⼤大きいとき                                        index  =  0;    //  インデックスを0に戻す                                } 自分で付けたid名                                $(img#alpaca).attr(src,  img/  +  imgs[index]);    //  画像切切り替え                                index  =  index  +  1;    //  インデックスを1増やす                        },  3000  /*  実⾏行行間隔[ミリ秒]  */);                </script>ビーンズ株式会社 ( http://beanzinc.jp ) 36 2012-11 HTML5の前のJavaScript入門
  37. 37. lesson2.htmlをブラウザで確認してみましょう!! lesson2.htmlをブラウザで開きます うまく動かないときは... • jQuery 読み込みのファイルパスがあっているか • { } や ( ) の数と位置があっているか • , (コンマ)や ’ (クォート)を忘れていないか • 行末の ; (セミコロン)を忘れていないか • id名の指定があっているかビーンズ株式会社 ( http://beanzinc.jp ) 37 2012-11 HTML5の前のJavaScript入門
  38. 38. 変数  ...  ⽂文字列列や数値などに名前を付けたもの var  hoge  =  ʻ‘あああʼ’; var  foo  =  123; 変数は「var」を付けて宣言 例 var  piyo  =  ʻ‘アルパカʼ’; alert(piyo); 「アルパカ」と表示される ※ alert はポップアップウィンドウを表示するビーンズ株式会社 ( http://beanzinc.jp ) 38 2012-11 HTML5の前のJavaScript入門
  39. 39. 配列列  ...  同じ種類の要素を⼊入れておく箱 配列 要素 要素 要素 要素 要素 0番目 1番目 2番目 3番目 4番目 var  imgs  =  [1.jpg,  2.jpg,  3.jpg,  4.jpg,  5.jpg]; 変数 配列を表す括弧 例 0番目 alert(imgs[0]); 要素はカンマで区切る 「1.jpg」と表示される カンマの後ろに改行を入れてもOKビーンズ株式会社 ( http://beanzinc.jp ) 39 2012-11 HTML5の前のJavaScript入門
  40. 40. setInterval  ...  ⼀一定間隔で何かする(タイマー) var  timer  =  setInterval(function(){        //  何かの処理理(⼀一定間隔で何度度も実⾏行行される) },  3000); タイマーの実⾏行行間隔[ミリ秒] タイマーを解除したいとき(上記の場合) clearInterval(timer); 解除したいタイマービーンズ株式会社 ( http://beanzinc.jp ) 40 2012-11 HTML5の前のJavaScript入門
  41. 41. 3秒間隔で繰り返し if  (index  >  4)  {    //  インデックスが4より⼤大きいとき        index  =  0;    //  インデックスを0に戻す } $(img#alpaca).attr(src,  img/  +  imgs[index]);    //  画像切切り替え index  =  index  +  1;    //  インデックスを1増やす つまり... インデックスは3秒間隔で次のように変化し、 0 → 1 → 2 → 3 → 4 → 0 → ... インデックスに対応した画像がセットされる imgs  =  [1.jpg,  2.jpg,  3.jpg,  4.jpg,  5.jpg]; 0番目 1番目 2番目 3番目 4番目ビーンズ株式会社 ( http://beanzinc.jp ) 41 2012-11 HTML5の前のJavaScript入門
  42. 42. Lesson 2 <!DOCTYPE  html> <html>ソースコード        <head>                <meta  http-‐‑‒equiv="Content-‐‑‒Type"  content="text/html;  charset=UTF-‐‑‒8">                <title>Lesson  2</title>                <script  type="text/javascript"  src="js/jquery-‐‑‒1.8.1.min.js"></script>        </head>        <body>                <img  src="img/5.jpg"  width="400"  height="300"  id="alpaca"  />                <script  type=”text/javascript”>                        var  imgs  =  [  1.jpg,  2.jpg,  3.jpg,  4.jpg,  5.jpg  ];    //  画像リスト                        var  index  =  0;  //  画像リストのインデックス(0開始)                        var  timer  =  setInterval(function(){                                if  (index  >  4)  {    //  インデックスが4より⼤大きいとき                                        index  =  0;    //  インデックスを0に戻す                                }                                $(img#alpaca).attr(src,  img/  +  imgs[index]);    //  画像切切り替え                                index  =  index  +  1;    //  インデックスを1増やす                        },  3000  /*  実⾏行行間隔[ミリ秒]  */);                </script>        </body> </html>ビーンズ株式会社 ( http://beanzinc.jp ) 42 2012-11 HTML5の前のJavaScript入門
  43. 43. 役に立つWebサイト・書籍のご紹介ビーンズ株式会社 ( http://beanzinc.jp ) 43 2012-11 HTML5の前のJavaScript入門
  44. 44. jQuery の入門には... • jQuery日本語リファレンス http://semooh.jp/jquery/ 情報は古いですが非常に見やすいです。 初めはここで。 • jQuery Docs http://docs.jquery.com/ jQuery公式ドキュメント。 英語ですが最新版のリファレンスはここで。ビーンズ株式会社 ( http://beanzinc.jp ) 44 2012-11 HTML5の前のJavaScript入門
  45. 45. JavaScript の入門には... • JavaScriptリファレンス | MDN https://developer.mozilla.org/ja/docs/JavaScript/ Reference 教科書的な。 • JavaScriptist http://javascriptist.net/ サンプル付き逆引きリファレンスがわかりやすいです。ビーンズ株式会社 ( http://beanzinc.jp ) 45 2012-11 HTML5の前のJavaScript入門
  46. 46. JavaScript を本格的に勉強するために... • JavaScript 第6版 David Flanagan 著、村上 列 訳 通称サイ本。 比較的難しいので自信がついてきた頃にどうぞ。 • JavaScript: The Good Parts ―「良い パーツ」によるベストプラクティス Douglas Crockford 著、水野 貴明 訳 実践的な内容。クロージャなどの勉強に。ビーンズ株式会社 ( http://beanzinc.jp ) 46 2012-11 HTML5の前のJavaScript入門
  47. 47. 楽しい JavaScript ライブラリ & API ご紹介ビーンズ株式会社 ( http://beanzinc.jp ) 47 2012-11 HTML5の前のJavaScript入門
  48. 48. jQuery Mobile http://jquerymobile.com/ こんなあなたにおすすめ 難易度 ★☆☆☆☆ • 手軽にリッチなスマホ用Webサイトを作りたい! • JavaScriptわからんけどHTMLならわかる!ビーンズ株式会社 ( http://beanzinc.jp ) 48 2012-11 HTML5の前のJavaScript入門
  49. 49. Titanium http://www.appcelerator.com/platform/titanium-sdk/ こんなあなたにおすすめ 難易度 ★★☆☆☆ • iPhone, Androidのネイティブアプリを作りたい! • インターフェースビルダー? 必要無いでござるビーンズ株式会社 ( http://beanzinc.jp ) 49 2012-11 HTML5の前のJavaScript入門
  50. 50. Facebook SDK for JavaScript http://developers.facebook.com/docs/reference/javascript/ こんなあなたにおすすめ 難易度 ★★★☆☆ • 俺はFacebookアプリを作るぞジョジョーッ!! • SSL? 大丈夫だ、問題ないビーンズ株式会社 ( http://beanzinc.jp ) 50 2012-11 HTML5の前のJavaScript入門
  51. 51. node.js http://nodejs.org/ こんなあなたにおすすめ 難易度 ★★★★☆ • リアルタイムWebを作りたい! • サーバサイドもJavaScriptで書いてやるぜ!ビーンズ株式会社 ( http://beanzinc.jp ) 51 2012-11 HTML5の前のJavaScript入門
  52. 52. three.js http://mrdoob.github.com/three.js/ こんなあなたにおすすめ 難易度 ★★★★★ • ブラウザで3Dやりたい!ビーンズ株式会社 ( http://beanzinc.jp ) 52 2012-11 HTML5の前のJavaScript入門
  53. 53. 以上です。本日はありがとうございました。 スライドのURLは弊社Facebookページにて告知させて頂きます。 弊社では一緒にモノ作りに チャレンジしたい!という 仲間を募集しています。 ご興味のある方はこちらから http://beanzinc.jp/contents/recruitビーンズ株式会社 ( http://beanzinc.jp ) 53 2012-11 HTML5の前のJavaScript入門
  54. 54. おまけ・其の壱 Lesson 1のやつをCSSでやるビーンズ株式会社 ( http://beanzinc.jp ) 54 2012-11 HTML5の前のJavaScript入門
  55. 55. ・・・ CSSのhover疑似クラスを使うと マウスオーバーしたときの スタイルを指定できる !! CSSではimg要素の src属性を指定できないが div要素などの背景画像なら...ビーンズ株式会社 ( http://beanzinc.jp ) 55 2012-11 HTML5の前のJavaScript入門
  56. 56. omake1.html<!DOCTYPE  html><html>        <head>                <meta  http-‐‑‒equiv="Content-‐‑‒Type"  content="text/html;  charset=UTF-‐‑‒8">                <title>Omake  1</title>                <style  type=”text/css”> CSS 指定                div#alpaca  {                        width:  400px;                        height:  300px; 背景画像に設定                        background-‐‑‒image:  url(ʻ‘img/1.jpgʼ’);                        background-‐‑‒position:  center  center;                        background-‐‑‒repeat:  no-‐‑‒repeat;                }                 hover疑似クラス                div#alpaca:hover  {                        background-‐‑‒image:  url(ʻ‘img/2.jpgʼ’);                }                </style>        </head> divに変更        <body>                <div  id="alpaca"></div>        </body></html>ビーンズ株式会社 ( http://beanzinc.jp ) 56 2012-11 HTML5の前のJavaScript入門
  57. 57. おまけ・其の弐リアルタイムWebでよく出てくる WebSocketってなんなん?ビーンズ株式会社 ( http://beanzinc.jp ) 57 2012-11 HTML5の前のJavaScript入門
  58. 58. 従来 ... クライアントがサーバーに問い合わせにいく(Pull型) Webサーバー クライアント 新しいメッセージありますか? ないよ 新しいメッセージありますか? ないってば 新しいメッセージありますか? ・・・ビーンズ株式会社 ( http://beanzinc.jp ) 58 2012-11 HTML5の前のJavaScript入門
  59. 59. WebSocket ... サーバーからクライアントへのアクション(Push) が可能 Webサーバー クライアント 新しいメッセージあったら言ってください わかった ・・・ 新しいメッセージほらよ (Push)ビーンズ株式会社 ( http://beanzinc.jp ) 59 2012-11 HTML5の前のJavaScript入門
  60. 60. リアルタイムチャット デモ • node.js + Socket.IO http://apps.alpacat.com/chat_room/ 2つ以上のタブやブラウザを開いてチャットしてみてくださいビーンズ株式会社 ( http://beanzinc.jp ) 60 2012-11 HTML5の前のJavaScript入門
  61. 61. fin.ビーンズ株式会社 ( http://beanzinc.jp ) 61 2012-11 HTML5の前のJavaScript入門
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×