JavaScript 第四回~ブラウザオブジェクト~<br />Slide Share<br />本間 皇成<br />
本日の予定<br />必要な環境の整備<br />ブラウザオブジェクト<br />イベントドリブンモデル<br />ソース読み<br />
必要な環境の整備<br />FireFox<br />Firebug<br />jsdo.it の登録<br />OpenIDで楽々サインイン!<br />
Firebug<br />便利なデバッグツール<br />コンソールを有効にして更新ボタンを押す<br />コードの中に console.log で確認の出力<br />その他 CSS 、DOM の確認等 (次回以降)<br />まとめてみまし...
HTML5 の外枠<br /><!doctype html><br /><html><br />  <head><br />    <meta http-equiv="Content-Language" content="ja"><br /> ...
イベントドリブンモデル<br />  ページ内で発生した出来事 (イベント)に<br />応じて対応する処理 (イベントハンドラ関数) を呼び出し、実行する<br />今までの1行ずつ実行していた形式とは違う!<br />
イベントドリブンモデル<br />Web ページ<br />ボタンがクリックされた!<br />onclick<br />キーが押された!<br />onkeydown<br />ページが読み込まれた!<br />onload<br />->そ...
イベントドリブンモデル<br />・HTML (表示側)<br />ぼたん<br />< input   type=“button”   value=“ぼたん” onclick=“btn_click()” /><br />・JavaScript...
前々回の復習(オブジェクト)<br />既に JavaScript で用意されているオブジェクト<br />組み込みオブジェクト<br /> (Global ) ,  Object  ,  Array  ,  String  ,  Boolea...
ブラウザオブジェクト<br />ブラウザの<br />基本操作<br />URLに関する情報<br />ブラウザ自身の情報<br />履歴管理<br />参考になるリファレンスページ<br />http://www.tohoho-web.com...
Window オブジェクト<br />グローバルオブジェクトである<br />window. という記述は不要<br />表示  alert  ,  confirm<br />タイマー setInterval , setTimeout  , c...
Location オブジェクト<br />URL に関する情報を取得する<br />location.<br />hostName<br />protocol<br />href        ・・リンク先へ飛ぶ<br />search			・...
History , Navigator オブジェクト<br />history.<br />go(num)	・・num 分進む or 戻る<br />navigator.<br />appName	・・ブラウザ名<br />platform		...
Document オブジェクト<br />HTTP 通信はページ遷移の際の値の保持が不可<br />Cookie と Session<br />クライアントかサーバーか<br />document.cookie  赤は必須、青は任意<br />...
今日知ってほしいこと<br />JavaScript でブラウザを操作できる<br />履歴、ブラウザの種類、URL 、 cookie<br />イベントドリブンモデルの概念<br />
参考文献<br />JavaScript マスターブック 山田祥寛(著)<br />とほほの JavaScript リファレンス<br />  http://www.tohoho-web.com/js/index.htm<br />
終わりに<br />参加型のプレゼンの方法を考えたのですが、良い方法が思いつきませんでした!すみません!次回:DOM<br />
Upcoming SlideShare
Loading in...5
×

Java Script4

921

Published on

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

  • Be the first to like this

No Downloads
Views
Total Views
921
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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 />
  1. A particular slide catching your eye?

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

×