ブラウザ関連API #

ブラウザに関するAPIについて。

なお、ここではサンプルは一部割愛致します（ブラウザ遷移を伴ってしまうため・・・）

History API #

History APIは、ブラウザの履歴を提供するためのAPIである。また、ブラウザの戻る・進むボタンの様なページを遷移するためのイベントもここで行える。

主なプロパティ及びメソッドは以下の通り。

プロパティ名	意味
length	履歴の数
state	最後に設定された状態

メソッド	意味
go()	履歴において指定した番目のページへ遷移する
back()	1つ前のページへ遷移する
forward()	1つ後のページへ遷移する

これらをJavascript上で利用することで、ページの遷移も行える。

Location API #

Location APIは、画面のURLに関する操作を行うAPIである。

主なプロパティ及びメソッドは以下の通り。

プロパティ名	意味
href	URL全体
protocol	URLのプロトコル
host	URLのホストとポート番号
hostname	URLのドメイン
port	URLのポート番号
pathname	URLのパス
search	URLのクエリ
hash	URLのフラグメント識別子
username	ユーザ名
password	パスワード

メソッド	意味
assign()	指定したページをロードする
reload()	現在のページをリロードする
toString()	現在のページのURL全体を返す

ブラウザの開発ツールによるテスト #

Internet Explorer,Firefox,Google Chromeなどといった様なブラウザには、開発用のツールを有している物がある。

この開発ツールを用いて、画面に関するテストやデバッグを行うことができる。

これらの機能は、Javascriptのconsoleオブジェクトを用いる。

consoleオブジェクトの主なメソッドを以下に記載する。

メソッド	意味
assert()	テスト結果で異なっていた場合にエラーメッセージを出力
count()	通過した回数を出力
debug()	メッセージを出力
error()	エラーメッセージを出力
group()	以後に表示するメッセージをグループ化する
groupend()	グループ化する箇所を終了する
info()	メッセージ(info)を出力
time()	タイマー開始
timeEnd()	タイマー終了
warn()	メッセージ(warn)を出力

例えば、以下のプログラムをブラウザ上のコンソールで実行してみる。

var x = 1;
var y = 2;
var z = 2;
console.assert(x == y)
console.assert(z == y)
console.debug("デバッグメッセージ")
console.error("エラ〜メッセージ")
console.info("infoメッセージ")
console.warn("警告メッセージ")

コンソール上での実行結果（使用ブラウザ：Safari）

console