JavaScriptのWindowオブジェクト - あんみのの備忘録

WindowオブジェクトはWebブラウザ環境で動作するJavaScriptのグローバルオブジェクト。
WindowオブジェクトはWebブラウザを制御したりWebページのコンテンツにアクセスするためのさまざまなプロパティやメソッドを提供している。

ダイアログの表示

警告ダイアログ

alert()メソッドを使う。

確認ダイアログ

confirm()メソッドを使う。OKが押された場合は戻り値がtrue、キャンセルが押された場合は戻り値がfalseになる。
onsubmit属性はtrueを返す場合のみフォームを送信する。

入力ダイアログ

prompt()メソッドはユーザーからの入力値を取得するためのダイアログを表示する。
第一引数にはダイアログに表示するメッセージ、第二引数には初期値を指定する。

ウインドウの操作

新しいウインドウを開く

新しいウインドウを開くにはopen()メソッドを、開いたウインドウを閉じるにはclose()メソッドを使用する。

ウインドウの位置やサイズを変更する

現在の位置から相対位置でウインドウの位置を変更するにはmoveBy()メソッド
移動先を絶対座標で指定したいt場合moveTo()メソッドを使用する。
ウインドウのサイズを変更するにはresizeBy()メソッド、resizeTo()メソッドを使用する。
表示しているページをスクロールするにはscrollBy()メソッド、scrollTo()メソッドを使用する。

ウインドウ間の参照

親ウインドウと、open()メソッドで開いたサブウインドウの間で、お互いの変数やメソッドを参照できる。
元のウインドウから新しいウインドウを参照するにはopen()メソッドが返却するWindowオブジェクトを使用する。
新しいウインドウから元のウインドウを参照するにはWindowオブジェクトのopenerプロパティを使用する。

タイマー

指定時間後に処理を実行する

setTimeout()メソッドを使用する。第一引数には実行する関数、第二引数には遅延時間をミリ秒単位で指定する。

指定時間ごとに繰り返し処理する

setInterval()メソッドを使用する。

タイマー処理をキャンセルする

setTimeout()メソッドやsetInterval()メソッドによる処理をキャンセルするには、clearInterval()メソッドを使用する。
引数にはメソッドが戻すIDを指定する。

Navigatorオブジェクト

Webブラウザの種類やバージョン、プラットフォームの情報などWebブラウザそのものに関する情報を格納したオブジェクト。
Windowオブジェクトのnavigatorプロパティとして定義されている。

webブラウザの情報を取得する

alert('appCodeName:'+navigator.appCodeName+'\n'+
      'appName:'+navigator.appName+'\n'+
      'appVersion:'+navigator.appVersion+'\n'+
      'userAgent:'+navigator.userAgent+'\n'+
      'language:'+navigator.language+'\n'+
      'platform:'+navigator.platform+'\n');

Lacationオブジェクト

現在のWebブラウザで表示されているドキュメントのURLを表すオブジェクト。
Windowオブジェクトのlocationプロパティとして定義されている。

URL情報を取得する

LocationオブジェクトのプロパティによってURLの全体または一部を取得できる。

alert('href:'+location.href+'\n'+
      'protocol:'+location.protocol+'\n'+
      'host:'+location.host+'\n'+
      'hostname:'+location.hostname+'\n'+
      'port:'+location.port+'\n'+
      'pathname:'+location.pathname+'\n'+
      'search:'+location.search+'\n'+
      'pash:'+location.hash+'\n');

指定したURLに移動する

herfプロパティにURLを代入することでそのURLにジャンプできる。

Historyオブジェクト

Webブラウザの履歴を戻ったり進んだりするためのメソッドを提供する。
Windowオブジェクトのhistoryプロパティとして定義されている。

Screenオブジェクト

画面の情報にアクセスするためのプロパティを提供する。
Windowオブジェクトのscreenプロパティとして定義されている。

クッキー

クッキーの設定

JavaScriptではDocumentオブジェクトのcookieプロパティを使用してクッキーにアクセスできる。

//英数字以外の文字をクッキーの値として設定する
document.cookie='USER_NAME='+encodeURIComponent('あんみの');
document.cookie='COUNTRY='JAPAN';
//60日間有効なクッキーをセット
var expire=new Date();
expire.setTime(expire.getTime()+(60*24*60*60*1000));
document.cookie='; expires='+expire.toGMTString();
//有効範囲(path)を設定
document.cookie='; path=/'; //pathに/を設定すると同じサーバー内ならこのクッキーを読み取ることが可能

クッキーの参照

document.write(document.cookie);

クッキーの削除

expiresに過去の日付を設定する

var expires=new Date();
expires.setTime(expire.getTime()-1);
document.cookie='; expires='+expire.toGTMString();

フォーム

JavaScriptから入力フォームへのアクセス

入力項目のvalueプロパティで値の取得、設定が出来る

<form name="loginForm">
ユーザーID:<input type="text" name="userId"/><br>
パスワード:<input type="password" name="password"/><br>
<input type="submit" value="ログイン"/>
</form>

//document.フォーム名.入力項目名
//テキストフィールドの値を設定
var userId=document.loginForm.userId.value;
//テキストフィールドに値を設定
document.loginForm.userId.value='anmino';