java script4

JavaScript 第四回

～ブラウザオブジェクト～

Slide Share

本間皇成

本日の予定

• 必要な環境の整備

• ブラウザオブジェクト

• イベントドリブンモデル

• ソース読み

必要な環境の整備

• FireFox

• Firebug

• jsdo.it の登録

– OpenIDで楽々サインイン！

Firebug

• 便利なデバッグツール

– コンソールを有効にして更新ボタンを押す

– コードの中に console.log で確認の出力

– その他 CSS 、DOM の確認等（次回以降）

まとめてみましたhttp://bit.ly/9o4Cze

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>

イベントドリブンモデル

ページ内で発生した出来事（イベント）に

応じて対応する処理（イベントハンドラ関数）を呼び出し、実行する

今までの1行ずつ実行していた形式とは違う！


Web ページ

ボタンがクリックされた！

onclick

ページが読み込まれた！

onload

キーが押された！onkeydown

→その時どうする？（イベントハンドラ）


ぼたん

< input type=“button” value=“ぼたん” onclick=“btn_click()” />

・HTML （表示側）

・JavaScript （処理側）

function btn_click(){alert(‘クリックされたよ！’);

}http://jsdo.it/cev/38pS

前々回の復習（オブジェクト）

• 既に JavaScript で用意されているオブジェクト

– 組み込みオブジェクト

• (Global ) , Object , Array , String , Boolean , Number ,

Function , Math , Date , RegExp , Error

正規表現

– ブラウザオブジェクト

• Window , Navigator , Form , Document etc..

9

ブラウザオブジェクトグローバルオブジェク

ト

（Window オブジェクト）

screen document

forms

buttoncheckbox

radio select text

images

location navigator history

URLに関する情報

ブラウザ自身の情報

履歴管理参考になるリファレンスページhttp://www.tohoho-web.com/js/index.htm下部の「ブラウザオブジェクト」

ブラウザの基本操作

http://www.tohoho-web.com/js/index.htm




Window オブジェクト

• グローバルオブジェクトである

– window. という記述は不要

– 表示 alert , confirm

– タイマーsetInterval , setTimeout , clearInterval

– ウィンドウサイズ moveTo , resizeBy , scrollTo

ちょっと危険なサイトです

http://bit.ly/aIAmUx

Location オブジェクト

• URL に関する情報を取得する

• location.hostName

protocol

href ・・リンク先へ飛ぶ

search ・・クエリ情報

reload() ・・現在ページを再読み込み

http://bit.ly/9a23FR

History , Navigator オブジェクト

• history.go(num) ・・num 分進む or 戻る

• navigator.appName ・・ブラウザ名

platform ・・プラットフォーム名

http://bit.ly/bJxwWv

Document オブジェクト

• HTTP 通信はページ遷移の際の値の保持が不可

• Cookie と Session– クライアントかサーバーか

• document.cookie 赤は必須、青は任意

クッキー名 = 値 ; expires=有効期限; domain = ドメイン名 ; path = パス ; secure

– 作成、解析する必要がある

http://bit.ly/8Zyb8i

今日知ってほしいこと

• JavaScript でブラウザを操作できる

– 履歴、ブラウザの種類、URL 、 cookie

• イベントドリブンモデルの概念

参考文献

• JavaScript マスターブック山田祥寛(著)

• とほほの JavaScript リファレンス





参加型のプレゼンの方法を考えたのですが、

良い方法が思いつきませんでした！

すみません！

次回：DOM

終わりに

java script4

Documents