フロントサイドエンジニアという選択肢

HTMLコーダー → ECサイト運営 → システムエンジニア という経歴の著者がフロントサイトエンジニアという職業に今後の活路を見出し、その道に進むために取得した技術を貯めておくブログ

(Javascript)クライアントサイドの各オブジェクトについてのメモ

クライアントサイドJavascriptには、ブラウザを操作するためのオブジェクトが用意されています。これらのオブジェクトについて気がついたことをメモしておきます。

windowオブジェクト
  • クライアントサイドJavascriptの最上位オブジェクト。ブラウザ関連のオブジェクトは全てこのwindowオブジェクトから派生している。
  • 通常Javascriptを記述している部分は、windoオブジェクト直下となるので、グローバル変数として登録したものはすべてwindowオブジェクトのプロパティとなる。また、グローバルレベルでthisを使った場合は、windowオブジェクトを参照することになる。
  • innerWidth(height)やscreenX(Y)など、表示部分に関する情報を取得できる
Documentオブジェクト
  • コンテンツの内容に関する情報を保持するオブジェクト。
  • クッキーの操作なども行える。
  • 背景色やURLの情報なども持っているようだが、ここに保持されているものを使うことは推奨されていないので、本家のオブジェクトから取得したほうが良い。
  • コンテンツ内の要素を種類別に格納するコレクションもプロパティとして持っている。
    anchorsプロパティ
    ページ内アンカー(#name)を集めたコレクション
    formsプロパティ
    formタグとその配下を格納するコレクション
    imagesプロパティ
    ページ内の画像を集めたコレクション
    linksプロパティ
    ページ内のaタグを集めたコレクション

    参考サイト:MDN document
screenオブジェクト
  • 主にディスプレイサイズに関する情報を持つ。ブラウザ表示部分についての情報はwindowオブジェクトから取得する
    参考サイト:MDN window.screen
Historyオブジェクト
  • 閲覧履歴の情報が保持されるオブジェクトだが、Javascriptからアクセスすることは出来ない。
  • ブラウザの「戻る」「進む」ボタンに相当する機能は持っている
    参考サイト:MDN window.history
Navigatorオブジェクト
  • ブラウザの種類やバージョンなどの情報を保持しています。
  • クッキーの使用可否などの情報もここから取得する。プラグインの情報なども取得することが出来る。
  • プロパティをJavascriptから編集することは出来ないと思われる。
    参考サイト:MDN window.navigator
Locationオブジェクト
  • 現在表示しているページのURLに関する情報を保持しています。
  • クライアント部、ホスト部、パス、クエリ文字など部分ごとにプロパティが用意されています。
    参考サイト:MDN window.Location