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

Size: px

Start display at page:

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

のぶみつつちた
5 years ago
Views:

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 オブジェクトを利 )

Web データ管理 JavaScript (1) (4 章 ) 2011/12/7( 水 ) 湘南工科大学講義資料 Web データ管理 (2011) 阿倍 1/21

Web データ管理 JavaScript (1) (4 章 ) 2011/12/7( 水 ) 1/21 演習室の PC のハードディスクには演習で作成したデータは保管できません各 PC のネットワーク接続ショートカットからメディア情報センターのサーバーにアクセスしてください (Z ドライブとして使用できます ) 演習名使用するフォルダ演習 1 Z: Web データ管理 20111207 演習