Java script4

1,142 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,142
On SlideShare
0
From Embeds
0
Number of Embeds
44
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Java script4

  1. 1. JavaScript 最終回~興味を持って頂いた方の為に~<br />本間 皇成<br />
  2. 2. 本日の予定<br />ブラウザで JavaScript<br />Web 2.0 と Ajax<br />ライブラリを用いる<br />ガジェット開発<br />HTML5<br />
  3. 3. ブラウザで JavaScript<br />JS だから当たり前のことですが。。<br />
  4. 4. 必要な環境の整備<br />FireFox<br />Firebug<br />jsdo.it<br />OpenIDで楽々サインイン!<br />
  5. 5. Firebug<br />便利なデバッグツール<br />コンソールを有効にして更新ボタンを押す<br />コードの中に console.log で確認の出力<br />その他 CSS 、DOM の確認等 <br />まとめてみました<br />http://bit.ly/9o4Cze<br />
  6. 6. HTML5 の外枠<br /><!doctype html><br /><html><br /> <head><br /> <meta http-equiv="Content-Language" content="ja"><br /> <script type="text/javascript" src="lesson1.js"></script><br /> <title>Sample Web Site</title><br /> </head><br /> <body><br /> </body><br /></html><br />
  7. 7. イベントドリブンモデル<br />  ページ内で発生した出来事 (イベント)に<br />応じて対応する処理 (イベントハンドラ関数) を呼び出し、実行する<br />今までの1行ずつ実行していた形式とは違う!<br />
  8. 8. イベントドリブンモデル<br />Web ページ<br />ボタンがクリックされた!<br />onclick<br />キーが押された!<br />onkeydown<br />ページが読み込まれた!<br />onload<br />->その時どうする?(イベントハンドラ)<br />
  9. 9. イベントドリブンモデル<br />・HTML (表示側)<br />ぼたん<br />< input type=“button” value=“ぼたん” onclick=“btn_click()” /><br />・JavaScript (処理側)<br />function btn_click(){<br /> alert(‘クリックされたよ!’);<br />}<br />http://jsdo.it/cev/38pS<br />
  10. 10. DOM (Document Object Model)<br /> JS で HTML をいじることが可能<br />  <br />要素の追加、削除、変更<br />  -> 動くウェブサイトが作れる!<br />
  11. 11. DOM (Document Object Model)<br />要素を作る、属性を設定する<br />var tag = document.createElement(タグ名);<br />tag.id = , tag.href = <br />現在存在する HTML の要素を得る<br />document.getElementById(要素名);<br />作成した要素を指定した要素の末尾に追加<br />追加される要素.appendChild(追加する要素);<br />例)http://www.sw.it.aoyama.ac.jp/2009/Mashup/homma/js_study/asobi/asobi.html<br />
  12. 12. Ajax<br />ブラウザからリクエストを送ってレスポンスを待つという方法でしか通信できなかった<br />JavaScript で HTTP 通信を可能にする<br />XMLHttpRequest オブジェクト<br />非同期通信+DOM でローカルのアプリケーションと変わらぬ感覚でウェブを利用できる<br />http://sw.it.aoyama.ac.jp/2009/Mashup/homma/ajax/ajax.html<br />
  13. 13. ライブラリ<br /> getElementById とか書くのメンドクサイ・・<br />クロスブラウザ問題。 こらっ IE !!<br />-> ライブラリがあります!<br />
  14. 14. 2 大ライブラリ<br />Prototype.js <br />速度が要求される演算<br />複雑なアルゴリズムを使用した計算<br />他のクラスを拡張した処理(google maps とか)<br />Ruby っぽく書ける (みんな大好き each も存在)<br />jQuery <br />簡単なDOM操作<br />イベント処理<br />ブログパーツ<br />http://jsdo.it/cev/8x96<br />
  15. 15. ガジェット開発<br /> iGoogle ,Yahoo! gadget, Windows gadget、<br />  Mixi アプリ 、 ブラウザ拡張<br />JS +@ で作ることが可能!<br />共通ではないので、<br />各規約を読みながらの開発となる<br />
  16. 16. HTML 5<br /> 新しいHTML 規格<br />注目すべきは canvas , video 要素<br />-> JS でいじれる!<br />canvas test<br />http://jsdo.it/cev/rKdL<br />興味深い新技術 O3D<br />http://jsdo.it/cev/21yg<br />
  17. 17. 参考文献<br />JavaScript マスターブック 山田祥寛(著)<br />Prototyperに贈るjQuerystからの手紙<br />http://tech.kayac.com/data/jquery-to-prototype/index.html<br />とほほの JavaScript リファレンス<br />  http://www.tohoho-web.com/js/index.htm<br />
  18. 18. まとめ<br />プログラミングの上達の秘訣は<br />自分で考えたものを<br />楽しんで作ることだって<br />偉い人が言ってた。<br />JavaScript でそれができるかも!<br />
  19. 19. ありがとうございました!<br />

×