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.

Java Script4

1,106 views

Published on

  • Be the first to comment

  • Be the first to like this

Java Script4

  1. 1. JavaScript 第四回~ブラウザオブジェクト~<br />Slide Share<br />本間 皇成<br />
  2. 2. 本日の予定<br />必要な環境の整備<br />ブラウザオブジェクト<br />イベントドリブンモデル<br />ソース読み<br />
  3. 3. 必要な環境の整備<br />FireFox<br />Firebug<br />jsdo.it の登録<br />OpenIDで楽々サインイン!<br />
  4. 4. Firebug<br />便利なデバッグツール<br />コンソールを有効にして更新ボタンを押す<br />コードの中に console.log で確認の出力<br />その他 CSS 、DOM の確認等 (次回以降)<br />まとめてみました<br />http://bit.ly/9o4Cze<br />
  5. 5. 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 />
  6. 6. イベントドリブンモデル<br />  ページ内で発生した出来事 (イベント)に<br />応じて対応する処理 (イベントハンドラ関数) を呼び出し、実行する<br />今までの1行ずつ実行していた形式とは違う!<br />
  7. 7. イベントドリブンモデル<br />Web ページ<br />ボタンがクリックされた!<br />onclick<br />キーが押された!<br />onkeydown<br />ページが読み込まれた!<br />onload<br />->その時どうする?(イベントハンドラ)<br />
  8. 8. イベントドリブンモデル<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 />
  9. 9. 前々回の復習(オブジェクト)<br />既に JavaScript で用意されているオブジェクト<br />組み込みオブジェクト<br /> (Global ) , Object , Array , String , Boolean , Number ,<br /> Function , Math , Date , RegExp , Error<br />正規表現<br />ブラウザオブジェクト<br />Window , Navigator , Form , Document  etc..<br />9<br />
  10. 10. ブラウザオブジェクト<br />ブラウザの<br />基本操作<br />URLに関する情報<br />ブラウザ自身の情報<br />履歴管理<br />参考になるリファレンスページ<br />http://www.tohoho-web.com/js/index.htm<br />下部の「ブラウザオブジェクト」<br />
  11. 11. Window オブジェクト<br />グローバルオブジェクトである<br />window. という記述は不要<br />表示  alert , confirm<br />タイマー setInterval , setTimeout , clearInterval<br />ウィンドウサイズ moveTo , resizeBy , scrollTo <br />ちょっと危険なサイトです<br />       http://bit.ly/aIAmUx<br />
  12. 12. Location オブジェクト<br />URL に関する情報を取得する<br />location.<br />hostName<br />protocol<br />href      ・・リンク先へ飛ぶ<br />search ・・クエリ情報<br />reload() ・・現在ページを再読み込み<br />       http://bit.ly/9a23FR<br />
  13. 13. History , Navigator オブジェクト<br />history.<br />go(num) ・・num 分進む or 戻る<br />navigator.<br />appName ・・ブラウザ名<br />platform ・・プラットフォーム名<br />      http://bit.ly/bJxwWv<br />
  14. 14. Document オブジェクト<br />HTTP 通信はページ遷移の際の値の保持が不可<br />Cookie と Session<br />クライアントかサーバーか<br />document.cookie 赤は必須、青は任意<br />クッキー名 = 値 ; expires=有効期限; <br /> domain = ドメイン名 ; path = パス ; secure<br />作成、解析する必要がある<br />http://bit.ly/8Zyb8i<br />
  15. 15. 今日知ってほしいこと<br />JavaScript でブラウザを操作できる<br />履歴、ブラウザの種類、URL 、 cookie<br />イベントドリブンモデルの概念<br />
  16. 16. 参考文献<br />JavaScript マスターブック 山田祥寛(著)<br />とほほの JavaScript リファレンス<br />  http://www.tohoho-web.com/js/index.htm<br />
  17. 17. 終わりに<br />参加型のプレゼンの方法を考えたのですが、良い方法が思いつきませんでした!すみません!次回:DOM<br />

×