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

Transcription

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

2 4-4 window オブジェクト window オブジェクト Webブラウザのウィンドウを管理するオブジェクト Webブラウザで開いた段階で 動的に 成 新規のwindowオブジェクトを作成することができる

3 4-4-1 ウィンドウを参照するためのプロパティ window オブジェクトが複数存在する場合に それぞれを参 照するためのプロパティ プロパティ window 説明 現在の window オブジェクト 体を参照 self 現在の window オブジェクト 体を参照 (window と同等 ) top parent opener Web ブラウザで最初に開いた window オブジェクトを指し す フレーム機能を使 時, 親のウィンドウやフレームを指す open() メソッドで作成した新規ウィンドウを指す window オブジェクトが単体である場合 window, self, top, parent は 分 を指す

4 4-4-2 ステータスバー関連のプロパティ web ブラウザのウィンドウ下部に 意されるステータスバー に 字列を表 するためのプロパティ プロパティ 説明 defaultstatus ステータスバーにデフォルトで表 する 字列を設定 ( 他のメッセージに上書きされても, 表 後に指定した 字列を再表 する ) status ステータスバーに表 する 字列を設定 ( 他のメッセージに上書きされると以降再表 されない )

5 4-4-3 ダイアログボックス関連のメソッド ユーザに確認を求めたり テキストを させたりするた めのダイアログボックスを表 させるメソッド alert() メソッド 引数 : 説明 : window リファレンス.alert(message) message - ダイアログボックスに表 する 字列 引数 message として渡された 字列と, OK ボタンを表 するアラートダイアログボックスを作成

6 4-4-3 ダイアログボックス関連のメソッド confirm() メソッド 引数 : window リファレンス.confirm(message) message - ダイアログボックスに表 する 字列 戻り値 : true または false 説明 : 引数 message として渡された 字列と, YES ボタン, NO ボタンを表 し, 確認を求めるダイアログボックスを表

7 4-4-3 ダイアログボックス関連のメソッド prompt() メソッド 引数 : 戻り値 : 説明 : window リファレンス.prompt(message, default) message - ダイアログボックスに表 する 字列 default - デフォルトとして使 する 字列 された 字列または null ユーザに何らかの値を させるためのダイアログボックスを表. 引数 default では, ダイアログボックスのテキストボックスにデフォルトで表 される 字列を表.

8 4-4-4 新規のウィンドウをオープン / クローズする 新規のウィンドウを開いたり既存のウィンドウを閉じたり するためのメソッド open() メソッド window リファレンス.open(URL, name, "option") URL - 新規ウィンドウに表 する HTML ドキュメントの URL 引数 : name - ウィンドウ名 option - window の特性を表す 字列 戻り値 : 新規の window オブジェクトへの参照 説明 : 新規のウィンドウを開き, その window オブジェクトへの参照を戻り値とする.

9 4-4-4 新規のウィンドウをオープン / クローズする open() メソッドで指定可能なオプション オプション 値 説明 toolbar yes または no ツールバーを表示するか location yes または no アドレスバーを表示するか directories yes または no ディレクトリボタンを表示するか status yes または no ステータスバーを表示するか menubar yes または no メニューバーを表示するか scrollbars yes または no スクロールバーを表示するか resizable yes または no ウィンドウサイズを可変にするか width ピクセル値 ウィンドウの幅 height ピクセル値 ウィンドウの高さ

10 4-4-4 新規のウィンドウをオープン / クローズする close() メソッド window リファレンス.close() 説明 : window リファレンスで指定したウィンドウを閉じる

11 4-4-5 タイマー関連のメソッド 指定した時間後に処理をさせたり 定時間ごとに同じ処 理をさせたりするためのメソッド settimeout() メソッド window リファレンス.setTimeout("function", delay) 引数 : function - 指定した時間後に う処理 delay - function が実 されるまでの時間 ( ミリ秒単位 ) 戻り値 : 説明 : タイマーを識別する ID タイマーをスタートさせ,delay で指定した時間後に function で指定した処理を う.function には JacaScript のステートメントや関数などを指定. 戻り値としてタイマーを識別するための ID を戻す.

12 seti nterval() メソッド タイマー関連のメソッド window リファレンス.setInterval("function", delay) 引数 : 説明 : function - 指定した時間後に う処理 delay - function が実 するまでの時間 ( ミリ秒単位 ) タイマーをスタートさせ,delay で指定した時間後に function で指定した処理を う. タイマーを停 させるには cleartimeout() メソッドを使 する.

13 4-4-6 その他のメソッド blur() メソッド 説明 : window リファレンス.blur() ウィンドウのフォーカスを失わせる. フォーカスを失ったウィンドウは背 に移動する. focus() メソッド window リファレンス.focus() 説明 : フォーカスをウィンドウに移動する.

14 4-4-6 その他のメソッド scroll() メソッド window リファレンス.scroll(x-coodinate, y-coodinate) 引数 : x-coodinate - x 座標 ( ピクセル単位 ) y-coodinate - y 座標 ( ピクセル単位 ) 説明 : 指定した座標までウィンドウをスクロールする. 座標はウィンドウの左上隅を原点 (0, 0) としてピクセル単位で指定.

15 4-4-7 window オブジェクトのイベントハンドラ オプション onload onunload onblur onfocus onerror 説明 HTMLドキュメントがロードされたとき HTMLドキュメントがアンロードされたときウィンドウがフォーカスを失ったときウィンドウがフォーカスを得たとき JavaScript 実行中に何らかのエラーが生じたとき

16 4-5 location オブジェクトと history オブジェクト location オブジェクト 現在ページのURL 情報を管理する 指定したページにジャンプしたり 別ウィンドウURLを変更したりすることが可能

17 4-5-1 location オブジェクトの概要 location オブジェクトの主なプロパティ オプション hash host href hostname pathname port protocol search 説明 URLのアンカー部分 (# で始まる部分 ) URLのホストネームとポート番号の部分 URL 全て URLのホスト名の部分 URLのパス名の部分 URLのポート番号の部分 URLのプロトコルの部分 URLの検索キーワードなどを指定する部分 (? で始まる部分 )

18 4-5-2 location オブジェクトのメソッド reload() メソッド 引数 : 説明 : location.reload() location.reload(true) true - ブール値 現在のドキュメントを強制的にリロードする. このとき引数として true を指定した場合には, サーバからロードする.true を指定しない場合には, ロードはキャッシュから われる. replace() メソッド 引数 : 説明 : location.replace("url") URL - ロードする URL 現在の web ページを削除し, 新たに引数として指定された URL の Web ページをロードする.

19 4-5-3 history オブジェクト Webブラウザを起動してからこれまでに開いたWebページを覚えるオブジェクト Webブラウザの 戻る ボタン等 前後ページに移動する機能を実現 location オブジェクトのプロパティ オプション length 説明 history オブジェクトの履歴の深さを格納

20 4-5-3 history オブジェクトのメソッド back() メソッド history.back() 説明 : history オブジェクトに格納されている履歴を つ遡って Web ページを表 する.( 戻る ボタンをクリックするのと同等 ) forward() メソッド history.forward() 説明 : 履歴の中から次の Web ページを表 する.( 進む ボタンをクリックするのと同等 )

21 4-5-3 history オブジェクトのメソッド go() メソッド 引数 : history.go(pagenumber) pagenumber - 戻る, または進むページ数 説明 : 履歴の中の指定した Web ページを表 する.

22 4-6 link オブジェクト link オブジェクト HTMLの <a href></a> タグにより 成されるリンク先のURLを管理する リンク先をHTMLから取り出したり 動的に変更することが可能 ユーザがリンクをクリックしたときの処理を記述できる

23 4-6-1 link オブジェクトの参照 法 例 :2 つの <a href> タグ <a href= >Yahoo</a> <a href= > 茨城大学 </a> Yahoo の link オブジェクトにアクセスするには document.links[0] 茨城 学 の link オブジェクトにアクセスするには document.links[1]

24 4-6-2 link オブジェクトのプロパティ link オブジェクトの主なプロパティ オプション hash host href hostname pathname port protocol search target 説明 URL のアンカー部分 (# で始まる部分 ) URL のホストネームとポート番号の部分 URL 全て URL のホスト名の部分 URL のパス名の部分 URL のポート番号の部分 URL のプロトコルの部分 URL の検索キーワードなどを指定する部分 (? で始まる部分 ) リンク先の URL を表 するウィンドウの指定. デフォルトでは,<a href> タグの target アトリビュートの値

25 4-6-3 link オブジェクトのイベントハンドラ オプション onclick onmouseover onmouseout 説明 linkオブジェクトをクリックしたとき linkオブジェクトにマウスポインタが ったとき linkオブジェクトからマウスオブジェクトが出たとき

26 宿題 次のようなファイルを作成する あなたは茨城 学 ですか? と質問ダイアログを表 OK を押すと茨城 学へのリンクが表 される キャンセル を押すとグーグルへのリンクが表 される リンクをクリックすると別ウィンドウに指定されたリンク先が表 される (Window オブジェクトを利 )