おもしろwebサービス開発日記

Ruby や Rails を中心に、web技術について書いています

サイ本14章まとめ

javascript

windowオブジェクトについて書かれている章です。内容の要約と気になったところのメモを書きます。

タイマー

下記4つのタイマー関連のグローバル関数について解説しています。名前みれば何となく用途がわかると思います。setTimeout()は指定された関数を、指定した時間が経過した後に実行。setInterval()は指定された関数を、指定された時間が経過するたびに繰り返し実行。clear系はset系をキャンセルする関数です。

  • setTimeout()
  • clearTimeout()
  • setInterval()
  • clearInterval()

LocationオブジェクトとHistoryオブジェクト

location

locationオブジェクトのプロパティを列挙しています。search以外は名前で何となくわかると思います。searchはURLに含まれるクエリの部分*1が入っているようです。

  • href
  • protocol
  • host
  • pathname
  • search
history

セキュリティの関連から、Historyオブジェクトの配列にはアクセスできないようです。メソッドとして使えるのは下記の３つだけ。back()とforward()は見たままのメソッドです。go()は引数に正数をいれるとその分進み、負数を入れるとその分戻るメソッド。

  • back()
  • forward()
  • go()

JavaScriptで進んだり戻ったりは普通しないので、このメソッドは多分使わないでしょうね。

ウィンドウ、画面、ブラウザ情報の取得

ウィンドウ、画面、ブラウザ情報が入っているプロパティは、IEとそれ以外では格納場所が異なるようです。

DOCTYPE宣言がしてあるIE
document.documentElement
DOCTYPE宣言してないIE
document.body
IE以外
window

もちろんそれぞれの情報を取得するためのプロパティの名前も違います・・・詳細は書く気になれないので省略。

Screenオブジェクト

画面サイズや色数などの情報を持っているオブジェクトです。widthプロパティやheightプロパティなどを持っています。

Navigatorオブジェクト

ブラウザのバージョンやブラウザで表示可能なデータ形式などの、Webブラウザ全体に関する情報がNavigatorオブジェクトに格納されます。ブラウザ情報が入っているということは、このオブジェクトを使えばどのブラウザのどのバージョンを使っているか判別できるのかな？と思いきや、そうは問屋がおろさないようです。わかるのはIE系かNetscape系かくらいなよう。なぜブラウザの細かい判別ができないかというと、まず、昔は多くのWebページでNavigatorオブジェクトを利用してブラウザの種類やバージョンを判定し、挙動を変更することが行われていたそうです。新しいブラウザをリリースする際に、Navigatorプロパティの値を変更するとWebページ上での互換性を失ってしまうので、ブラウザベンダーはプロパティの値をそのまま据え置きにしたそうです。そのため、Navigatorオブジェクトはだんだん意味のないオブジェクトになっていったようです。

appName
ブラウザ 値
IE Microsoft Internet Explorer
Netscape系(Firefoxなど) Netscape
appVersion

ブラウザ内部で保持しているバージョン情報。一般的なバージョン情報とは違うので使うことはなさそう。

userAgent

ブラウザがHTTPのUSER-AGENTヘッダで送る文字列。ブラウザ毎で形式が異なるようなので、これも使わなそう。

appCodeName

ブラウザのコード名。IEでもFirefoxでも「Mozilla」が格納されている。

platform

ブラウザが実行されるハードウェア情報。

クライアントスニファ

オブジェクトを加工して使いやすい形式にすることをクライアントスニファと呼ぶようです。
下記はNavigatorオブジェクトのクライアントスニファ。

var browser = {
  version: parseInt(navigator.appVersion),
  isNetscape: navigator.appName.indexOf("Netscape") != 1,
  isMicrosoft: navigator.appName.indexOf("Microsoft") != 1
}

open()

新しいウィンドウをオープンするメソッド。

window.open(url, windowName, windowInfo, boolean)
url
ドキュメントのURL
windowName
ウィンドウの名前。既に存在する名前の場合は、新しいウィンドウは作成されない。
windowInfo
ウィンドウのサイズやGUIの詳細を指定。
boolean
ウィンドウの名前が他とかぶったときに、現在の履歴を置き換えるか追加するかを指定する。trueなら置き換え。falseなら追加。デフォルトはfalse。

close()

documentオブジェクトにもclose()メソッドがあるので、windowをクローズしたいときはwindow.close()などのように、オブジェクトを明示的に指定してあげるのがよいそうです。close()メソッドでウィンドウをクローズしても、windowオブジェクトが消えるわけではないようですが、closedプロパティ以外は使えないようになります。　

キーボードフォーカス

フォーカス関連のメソッド２つ。

focus()
ウィンドウにキーボードフォーカスを与える
blur()
ウィンドウのキーボードフォーカスを外す

スクロール

ドキュメントをスクロールさせるメソッド。

scrollBy()
ドキュメントを、指定されたピクセル数だけ上下左右にスクロールする
scrollTo()
ドキュメントを指定された位置までスクロール
scrollIntoView()
要素が見える位置にスクロールする
window.location.hash = "#top"
アンカーに移動する。
window.location.replace = "#top"
アンカーに移動。履歴には残らない。
HTML要素が持つ、座標情報プロパティ
offsetLeft
要素のx座標
offsetTop
要素のy座標

ダイアログボックス

これはJavaScriptやってる人ならみんな知ってそう。

alert()
メッセージを表示
prompt()
ユーザに文字列の入力を求める
confirm()
OKボタンとキャンセルボタンのどちらかを選ばせる

ステータス行の制御

defaultStatusプロパティに文字列を設定することで、URLを表示していないときのステータスバーの表示を設定できます。多分あんまり使わない。

エラー処理

onerrorプロパティに関数を格納すると、それをエラーハンドラとして使えます。(IE以外)でもtry/catchがあるから使わないんじゃないかなーという気がします。

複数のウィンドウとフレーム

フレームも使わないと思うので省略します。

*1:URLの?以降の文字。http://www.example.com/?hoge=fugaであればhoge=fugaの部分