Your SlideShare is downloading. ×
0
Java Script4
Java Script4
Java Script4
Java Script4
Java Script4
Java Script4
Java Script4
Java Script4
Java Script4
Java Script4
Java Script4
Java Script4
Java Script4
Java Script4
Java Script4
Java Script4
Java Script4
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Java Script4

908

Published on

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

  • Be the first to like this

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×