HTML5プロフェッショナル認定資格Level.2 覚えるべきことまとめ <様々なHTML5関連API>

[前回](http://qiita.com/aikumi/items/4000ee7cac6f61791f5d)、[前々回](http://qiita.com/aikumi/items/bcd480f10e34a2db705d)に引き続き、HTML5プロフェッショナル認定試験Level2のまとめです！
前回、前々回の文法だけではなく、以下のような様々なAPI関連の問題も出題範囲となっています。
以下、公式HPの出題範囲の中にあった重要度も参考程度に乗せながらまとめていこうと思います。

# webブラウザにおけるAPI

## ウィンドウオブジェクト ★★★★★★★★☆☆
* ウィンドウオブジェクトはブラウザのウィンドウのオブジェクト
* ウィンドウサイズなどの情報を持つ


### プロパティ(オブジェクト返すもの)

* document: documentオブジェクト
* frame: frameオブジェクト(配列)
* history: Historyオブジェクト
* location: Locationオブジェクト
* navigator: Navigatorオブジェクト
* opener: 親ウィンドウオブジェクト
* parent: 親ウィンドウのオブジェクト(フレーム利用時)
* screen: Screenオブジェクト
* self: 自分自身のオブジェクト
* top: トップウィンドウのオブジェクト(フレーム利用時)

### プロパティ(サイズや位置を返すもの)

* innerHeight: ウィンドウの内側の高さ(pixel)
* innerWidth: ウィンドウの内側の幅(pixel)
* outerHeight: ウィンドウの内側の高さ(pixel)
* outerWidth: ウィンドウの内側の幅(pixel)
* pageXOffset: スクロールで表示されている横位置(pixel)
* pageYOffset: スクロールで表示されている縦位置(pixel)
* screenLeft:  スクリーン上のウィンドウの横位置(pixel)
* screenTop:  スクリーン上のウィンドウの縦位置(pixel)
* screenX:  スクリーン上のウィンドウのX座標(pixel)
* screenY:  スクリーン上のウィンドウのY座標(pixel)

### プロパティ(その他)

* closed: windowが閉じられていた場合はtrue
* defaultStatus: デフォルトでウィンドウのステータスバーに表示される値
* status: ウィンドウのステータスバーに表示される値

### メソッド

* アラート出すもの
    * alert(): パラメーターに指定されたメッセージを警告ダイアログに出力
    * confirm(): パラメーターに指定されたメッセージを確認ダイアログに出力
    * prompt(): パラメーターに指定されたメッセージを入力ダイアログに出力
* フォーカス
    * focus(): ウィンドウをフォーカスする
    * blur(): ウィンドウをフォーカスから外す
* ウィンドウの操作
    * open(): ウィンドウを生成
    * createPopup(): ポップアップウィンドウを生成
    * close(): ウィンドウを閉じる
    * moveBy(): 現在位置からウィンドウを移動（相対指定, pixel）
    * moveTo(): ウィンドウを移動(絶対移動, pixel)
    * print(): ウィンドウを印刷
    * resizeBy(): 現在のウィンドウサイズから変更(相対指定, pixel)
    * resizeTop(): ウィンドウサイズを変更(絶対指定, pixel)
    * scrollBy(): 現在のスクロール位置からスクロール(相対指定, pixel)
    * scroll(): ウィンドウをスクロール(絶対指定, pixel)
    * scrollTo(): ウィンドウをスクロール(絶対指定, pixel)
* タイマー処理
    * setInterval(): 指定した処理を定期的に実行
    * clearInterval(): setInterval()の解除
    * setTimeout(): 指定した処理を指定時間後に実行
    * clearTimeout(): setTimeout()の解除
* メッセージ
    * postMassage(): メッセージを送信
        * 安全なクロスドメイン間通信
        * 例: postMassage([message], [targetOrigin])
        * targetOriginはスキーム + ホスト名 + ポート番号 で構成される
        * targetOriginで同じドメインか異なるドメインかを判断

## Selectors API ★★★★★★★☆☆☆
* CSSのセレクタで指定した要素を返す
* SelectersAPILevel1とSelectersAPILevel2がある
* Level2はAPIが追加されている。しかしブラウザによって挙動は異なる

* SelectersAPILevel1のメソッド
    * document.querySelectorAll(selectors)
        * 指定されたselectors(複数可)に合った文書中の全ての要素をリスト形式で返却
    * document.querySelectorAll(selectors)
        * 指定されたselectors(複数可)に合った文書中の最初の要素を返却

## History　API ★★★★★★★☆☆☆

* HistoryAPIはブラウザの履歴にアクセスできる
* ユーザー画面遷移するとpopStateイベントが発火する
* Location APIはURLの取得やページ移動を行える

### Hisotryオブジェクトのプロパティ

* length: 履歴にあるエントリ数
* state: ユーザーエージェントにより最後に設定された状態の値

### Hisotryオブジェクトのメソッド

* go(): 履歴上の指定した番目のページに遷移する
* back(): 履歴上の1つ前のページに遷移する
* forward(): 履歴上の1つ先のページに遷移する
* pushState(): 履歴上に新しいページを追加する
* replaceState(): 履歴上の現在のページ情報を書き換える

### LocationAPIのプロパティ

* href: URL全体
* protocol: URLのプロトコルスキーマ部
* host: URLのホスト名と':'とポート部
* hostname: URLのドメイン
* port: ポート番号
* pathname: URLの'/'以降のパス
* search: URLの'?'以降のパラメーター
* hash: URLの'#'以降のフラグメント識別子
* username: ユーザー名
* password: パスワード
* origin: オリジン


### Locationのメソッド

* assign(): 指定したURLのページをロードする
* replace(): 現在のページを履歴から削除し、指定したページをロードする
* reload(): 現在のページをリロードする
* toString(): 現在のページのURL全体を返す

## テスト・デバッグ ★★★★★★☆☆☆☆
* 主要なブラウザはデベロッパーツールなどの開発用機能を持っている
* consoleオブジェクトのメソッドでデバック用の機能を表示できる

### consoleオブジェクトのメソッド

* メッセージ
    * assert(): テスト結果で異なっていた場合にメッセージを出力
    * debug(): メッセージを出力
    * error(): メッセージ(error)を出力
    * info(): メッセージ(info)を出力
    * log(): メッセージ(フォーマット指定可能)を出力
    * trace(): stack trace を出力
    * warn(): メッセージ(warn)を出力
    * dir(): オブジェクトのプロパティと値を出力
    * dirxml(): HTML/XML要素のXMLツリーを出力
* それ以外
    * count(): 通過した回数を出力
    * group(): メッセージのグループ化開始
    * groupCollapsed(): メッセージ(初期状態は折りたたみ)のグループ化開始
    * groupEnd(): メッセージのグループ化終了
    * profile(): プロファイリング開始
    * profileEnd(): プロファイリング終了
    * time(): タイマー開始
    * timeEnd(): タイマー終了

# グラフィックス・アニメーション

## Canvas(2D) ★★★★★★★★☆☆
* 特徴
    * ピクセル形式(ビットマップ)で描画
    * プラグインを使わずにJavaScriptベースで図を書くことができる
    * アニメーションはできない
* CanvasRenderingContext2D
    * save(): 現在の描画状態を保持する
    * restore(): 描画状態を保存した時点のものに戻す
    * scale(): 拡大縮小する
    * rotate(): 回転する
    * translate(): 移動する
    * setTransform(): 現在の変換マトリクスをリセットして変換マトリクスで変形する
    * clearRect(): 四角形の形にクリアする
    * fillRect(): 塗りつぶしの四角形を描く
    * strokeRect(): 輪郭の四角形を描く
    * beginPath(): 現在のパスをリセットする
    * strole(): 現在の線スタイルでサブパスを塗りつぶす
    * clip(): パスで切り抜く
    * fillText: 塗りつぶしのテキストを指定座標に描画する
    * strokeText(): 輪郭のテキストを指定座標に描画する
    * moveTo(): 新しいサブパスの開始点を座標指定する
    * lineTo(): 直前の座標と指定座標を結ぶ線をひく
    * closePath(): 最終座標と開始座標を結ぶ線を引く
    * quadraticCurveTo(): 2次ベジェ曲線を引く
    * bezierCurveTo(): 3次ベジェ曲線を引く
    * arcTo(): 直前の座標と直線で繋がる円弧を作成する
    * rect(): 四角形を作成する
        * 第1引数: x座標
        * 第2引数: y座標
        * 第3引数: 幅
        * 第4引数: 高さ
    * arc(): 円弧を作成する

## SVG ★★☆☆☆☆☆☆☆☆

* ベクター形式での描画
* 変形に強い
* 描画範囲や解像度に依存しにくい
* XMLをつかって記述