4. Webブラウザのオブジェクト

Size: px

Start display at page:

Download "4. Webブラウザのオブジェクト"

あいりなつ
5 years ago
Views:

1 4. Web ブラウザのオブジェクト 4.1 Web ブラウザのオブジェクトの概要 4.2 navigator オブジェクト 4.3 document オブジェクト茨城大学工学部情報工学科 08T4038G 篠塚晃一

2 4.1 Web ブラウザのオブジェクトの概要 Web ブラウザに関するオブジェクトには階層関係がある Web ブラウザに HTML ドキュメントがロードされるとさまざまなオブジェクトが生成される例オブジェクト名 Windowオブジェクト documentオブジェクト formオブジェクト linkオブジェクト Imageオブジェクト navigatorオブジェクト説明 Webブラウザのウインドウを示し必ず生成される HTMLドキュメントを示し必ず生成される HTMLドキュメント内にフォームがあれば生成されるハイパーリンクが設定されていれば生成されるイメージがあれば生成される Webブラウザ自体に関する情報を管理する

3 4-1-1 オブジェクトの階層 DOM HTML や XML などにおいてのドキュメントを構成する各要素の階層構造とアクセス方法を定義したモデルのことを DOM と呼ぶ主要な Web ブラウザは W3C に準拠する方向に向かいつつあるこの章の JavaScript のオブジェクトモデルは W3C 以前の DOM なのでレベル 0 の DOM と呼ぶレベル 0 の場合ユーザが明示的に生成できるオブジェクトは window オブジェクトに限られる

4 4-1-1 オブジェクトの階層下位のオブジェクトは上位のオブジェクトのプロパティである例えば document オブジェクトは window オブジェクトの下に位置しているため window オブジェクトのプロパティと考えることができる第 3 階層のオブジェクトのメソッドにアクセスするためには次のように記述する最上位のオブジェクト. 第 2 階層のオブジェクト. 第 3 階層のオブジェクト. メソッド ()

5 4-1-2 Web ブラウザに関するオブジェクトの種類オブジェクト名説明属するオブジェクト anchor ハイパーリンクの飛び先となるアンカーを示す document オブジェクト anchors[] アンカーの配列 document オブジェクト Applet Java アプレットを示す document オブジェクト applets[] Applet オブジェクトの配列 Area イメージマップの領域を示す document オブジェクト button フォーム内のボタンを示す form オブジェクト checkbox フォーム内のチェックボックスを示す form オブジェクト document HTMLドキュメント自体を示す windowオブジェクトまたはframeオブジェクト elements[] ひとつのフォーム内のすべてのエレメントの配列 form オブジェクト form ドキュメント内のひとつのフォームを示す document オブジェクト forms[] ドキュメント内のすべてのフォームの配列 document オブジェクト

6 4-1-2 Web ブラウザに関するオブジェクトの種類オブジェクト名説明属するオブジェクト frame ウインドウ内のひとつのフレームを示す window オブジェクト frames[] ウインドウ内のすべてのフレームの配列 window オブジェクト hidden history フォーム内の不可視のテキストボックスを示す Web ブラウザが表示したページの履歴を示す form オブジェクト window オブジェクト Image イメージを管理するオブジェクト document オブジェクト Images[] Image オブジェクトの配列 document オブジェクト link ハイパーリンクテキストのリンクを示す document オブジェクト links[] link オブジェクトの配列 document オブジェクト location URL を示す window オブジェクト navigator Web ブラウザに関する情報を格納するオブジェクト最上位のオブジェクトである

7 4-1-2 Web ブラウザに関するオブジェクトの種類オブジェクト名説明属するオブジェクト options[] password select オブジェクトの選択項目を格納するオブジェクトフォーム内のパスワード入力用のテキストフィールドを示す select オブジェクト form オブジェクト radio フォーム内のラジオボタンを示す form オブジェクト reset フォーム内のリセットボタンを示す form オブジェクト select フォーム内の選択リストを示す form オブジェクト submit フォーム内のサブミットボタンを示す form オブジェクト text フォーム内のテキストフィールドを示す form オブジェクト textarea フォーム内のテキストエリアを示す form オブジェクト window Web ブラウザのウィンドウを示す最上位のオブジェクトである

8 4.2 navigator オブジェクト JavaScript をサポートするためにほぼすべての Web ブラウザに実装されている window オブジェクトと同じくオブジェクト階層の最上位に位置するオブジェクトであるプロパティは次のようにして直接参照できる navigator. プロパティ名

9 navigator オブジェクトのメソッド用意されているメソッドは Java アプレットが現在使用可能かどうかを調べる javaenable() メソッドだけであるメソッド :JavaEnable() 構文 :nabigator.javaenable() 戻り値 :true または false 説明 :javaenable() メソッドは Java アプレットが使用可能であれば true をそうでなければ false を戻す

10 navigator オブジェクトのプロパティいずれも読み込み専用のプロパティであるのでユーザが値を設定することはできないプロパティ名 appcodename appname appversion useragent platform language 説明使用している Web ブラウザのコードネームを返す使用している Web ブラウザの名前を戻す使用している Web ブラウザのバージョン及び動作中のオペレーティングシステムの名前などが戻される主に実行中の Web ブラウザを特定するために使用される appcodename プロパティや appversion プロパティなどが組み合わされた値が戻される Web ブラウザが動作しているプラットフォーム名を戻す言語の設定日本語は ja になる

11 4.3 document オブジェクト window オブジェクトの下の階層に位置するため window オブジェクトのプロパティとしてアクセスできるメソッド及びプロパティにアクセスするためには以下のように記述する window リファレンス.document. メソッド名 () window リファレンス.document. プロパティ名ここで window リファレンスとは HTML ドキュメントが属する window オブジェクトへの参照である

12 document オブジェクトのプロパティ主なプロパティは次の 4 つのプロパティに分類できる色を表すプロパティ HTML ドキュメントの情報を保持するプロパティドキュメントの要素の配列データを一時的に保持する cookie プロパティ

13 4-3-2 色を表すプロパティすべて読み込み書き込みともに可能であるプロパティ名 alinkcolor linkcolor vlinkcolor bgcolor fgcolor 説明アクティリンク ( リンクをクリックした瞬間からデータを読み込んでいる間 ) の色デフォルトは <body> タグの alink アトリビュートの色リンク (<a href></a> タグの部分 ) のデフォルトの色デフォルトは <body> タグの link アトリビュートの値訪問済みのリンクの色デフォルトは <body> タグの vlink アトリビュートの値ウインドウの背景色デフォルトは <body> タグの bgcolor アトリビュートの値テキストのデフォルトの色デフォルトは <body> タグの text アトリビュートの値値を設定する場合には #RRGGBB 形式の文字列または色の名前で設定する

14 4-3-3 HTML ドキュメントの情報を保持するプロパティプロパティはいずれも読み出し専用でユーザがスクリプト内で書き換えることはできないプロパティ名 title lastmodified 説明 HTML ドキュメントのタイトル HTML の title エレメントで設定されている文字列 HTML ドキュメントの最終更新日 referrer HTML ドキュメントを呼び出したページの URL URL HTML ドキュメントの URL domain URL のドメイン部分 ( ローカルファイルから取得した場合には値はない )

15 4-3-4 プロパティを配列としてアクセスするドキュメント内の各要素にアクセスするには HTML の各タグの name アトリビュートで設定した名前あるいは配列としてアクセスできる主なオブジェクトの配列を示す配列名 forms links anchors images 説明 document オブジェクト内のすべての form オブジェクトを格納する配列 document オブジェクトのすべての link オブジェクトを格納する配列 document オブジェクト内のすべての anchor オブジェクトを格納する配列 document オブジェクト内の Image オブジェクトの配列 (HTML の img エレメントによって生成されたもの )

16 4-3-5 データを一時的に保持する cookie プロパティクライアントサイド JavaScript ではファイルの読み書きはできないようになっている cookie ファイルだけは例外で JavaScript から cookie プロパティとしてアクセスできる cookie の基礎知識 cookie ファイルはクライアント側のハードディスク内に置かれるテキストファイルでユーザ情報などのさまざまな情報を一時的に保持しておくことができる格納しておく情報の単位を cookie と呼ぶそれぞれの cookie には有効期限を設定できる JavaScript からは document オブジェクトの cookie プロパティとしてこの読み書きが行える

17 4-3-5 データを一時的に保持する cookie プロパティ cookie の基本的な使い方は次のようになる NAME は cookie の名前 VALUE は cookie に格納する実際の値を示す expires=date は cookie がいつまで有効かを指定する省略した場合には cookie は Web ブラウザを終了すると同時に消去される NAME=VALUE; expires=date

18 4-3-5 データを一時的に保持する cookie プロパティ cookie を登録するには document オブジェクトの cookie プロパティに格納するという名前の 3 日間有効な cookie を作成しそれにデータとして大津真という文字列を格納する例 var expire = new Date(); //cookie の賞味期限を 3 日間に設定 expire.settime(expire.gettime() + (3*24*60*60*1000)); // グリニッジ標準時形式の文字列に変換 var datestr = expire.togmtstring(); //cookie を焼く document.cookie + encodeuricomponent( 大津真 ) + ; + expires= + datestr ;

19 4-3-5 データを一時的に保持する cookie プロパティ cookie の書き換え cookie プロパティを設定しなおす前の例では最後のステートメントを次のようにする document.cookie + encodeuricomponent( 桜井弘 ) + ; + expires= + datestr; cookie の読み出しすべての cookie の名前とデータが連結され次のような形式で戻される NAME1=VALUE1; NAME2=VALUE2;....; 2

20 cookie の完全な書式と制限 cookie の完全な書式は次のようになる NAME=VALUE; expire=date; path=path; domain=domain; secure 書式 PATH DOMAIN secure 説明 cookie の有効なパスを示す省略された場合には HTML ドキュメントがロードされたパスになる cookie の有効なドメイン名を示す省略された場合は HTML ドキュメントがロードされたサーバのドメイン名になるセキュリティの設定値は true または false のどちらかでデフォルトでは false になる true に設定された場合には HTTPS サーバなど安全性が保証されている場合のみ送信される

21 cookie の完全な書式と制限それぞれのクライアントが格納できる cookie には次のような制限がある cookie の最大数は 300 個ひとつのドメインに対しての cookie の最大数は 20 個それぞれの cookie の容量は最大 4KB これらの制限を越えた場合使用されていないものから順に削除されていく

22 document オブジェクトのその他のメソッドメソッド :writeln() 構文 :document.writeln(expression1,,expressionn) 引数 :expression1,,expressionn 出力する式または文字列説明 :writeln() メソッドは引数として渡された式または文字列を改行つきでドキュメントに出力する

23 document オブジェクトのその他のメソッドメソッド :open() 構文 :document.open(mimetype) 引数 :mimetype MIME タイプ説明 :open() メソッドは引数 mimetype で指定した形式で出力ストリームを開く mimetype を省略した場合には text/html つまり HTML ドキュメントとみなされる現在のウインドウに出力する場合には open() メソッドは必要ない別のウインドウを開いた場合には open() メソッドと次に示す close() メソッドが必要になるメソッド :close() 構文 :document.close() 説明 :close() メソッドは出力ストリームを閉じ実際に画面に書き出す

24 課題 cookie を使ってページに訪問した回数を表示させるリセットボタンを押すことで訪問回数をリセットできるようにする

JavaScript プログラミング 4.Web ブラウザのオブジェクト 4-4 window オブジェクト 4-5 location オブジェクトと history オブジェクト 4-6 link オブジェクト 08T4082A 野太樹

JavaScript プログラミング 4.Web ブラウザのオブジェクト 4-4 window オブジェクト 4-5 location オブジェクトと history オブジェクト 4-6 link オブジェクト 08T4082A 野太樹 4-4 window オブジェクト window オブジェクト Webブラウザのウィンドウを管理するオブジェクト Webブラウザで開いた段階で動的に成新規のwindowオブジェクトを作成することができる