【JavaScript】JavaScriptまとめ⑥（ブラウザオブジェクト）

概要

JavaScriptの理解を深めるため、

で学習した内容を記載していく。

本記事では、ブラウザオブジェクトについて記載する。

ブラウザオブジェクト

ブラウザオブジェクトとは、ブラウザを使った様々な機能にアクセスするためのオブジェクト群のこと。
ブラウザオブジェクトはWindowオブジェクトを頂点に、いくつかの機能に分かれた階層構造になっている。例えばLocationオブジェクトは閲覧しているURLの操作や閲覧履歴の情報を提供する。Screenオブジェクトはブラウザウインドウの大きさに関する操作を提供する。

ブラウザオブジェクトの使い方

ブラウザオブジェクトをJavaScriptから使えるようにするために、ブラウザにはwindowというグローバルオブジェクトが用意されている。グローバルオブジェクトとは、どこからでも呼び出せる特別な変数のこと。
ブラウザオブジェクトの様々な機能はこのWindowオブジェクトに紐づいていて、例えばアラートを表示するalert()というメソッドがある。この機能を使うにはwindowにドット(.)でつなげてalert()というメソッドを呼び出す。

alert.js

window.alert('アラートです');

Windowオブジェクトの機能

「window」は省略できる

alert('windowを省略してもアラートを表示します');

確認ダイアログを表示する

confirm.js

confirm('本当に削除して良いですか？');

ユーザーが「OK」と「キャンセル」のどちらを選択したのか、その結果はconfirm()メソッドの戻り値として受け取れる。戻り値はboolean型のtrueかfalseが返ってくるのでif条件式で利用することができる。以下のようにresult変数で結果を受け取る。「OK」ならtrueが「キャンセル」ならfalseが入る。

confirm_if.js

const result = confirm('本当に削除してよいですか?');
if (result) {
    //　削除する処理
    console.log('削除しました');
} else {
    console.log('キャンセルしました');
}

指定した秒数後に実行する

setTimeout()を使うと、指定したミリ秒数が経過した後に任意の関数を実行することができる。

setTimeout(関数, ミリ秒数);

1秒後に関数を実行する(set_timeout.js)

function delayTask () {
    console.log('1秒後に実行する');
}

setTimeout(delayTask, 1000);

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

また、setTimeout()を実行すると数値が返ってくる。これはsetTimeout()で作成されたタイマーを識別できるIDである。このIDを使うことで未来に実行するタイマーをキャンセルすることができる。
キャンセルするにはclearTimeout()を使う。setTimeout()の戻り値をclearTimeout()に渡すと予約実行をキャンセルできる。

clear_timeout.js

function delayTask () {
    console.log('');
}

const timerId = setTimeout(delayTask, 5000);
clearTimeout(timerId);

指定した秒数ごとに繰り返し実行する

setInterval()は指定した秒数ごとに、任意の処理を繰り返し実行することができる。

setInterval(関数, ミリ秒数);

set_interval.js

function delayTask () {
    console.log('1秒ごとに繰り返し実行される');
}

setInterval(delayTask, 1000);

止めたい場合はclearInterval()を使う。

clear_interval.js

function delayTask () {
    console.log('1秒ごとに繰り返し実行される');
}

const timerId = setInterval(delayTask, 1000);
clearInterval(timerId);

ウインドウを開く

open()を使うことで新しいウインドウあるいはタブが立ち上がる。引数にパラメータを指定することで、指定したURLを開いたり、ウインドウの大きさや表示位置を指定することができる。

open(URL, ウインドウ名の指定, オプション);

open.js

open('https://example.com', 'window name', 'width=400, height=250');

ウインドウを閉じる

ウインドウを閉じるにはclose()を使う。ただしclose()で閉じられるウインドウはopen()で開いたものに限定される。open()の戻り値にウインドウのオブジェクトが返ってくるので、そのオブジェクトのclose()を呼び出すことで、開いたウインドウを閉じることができる。close()を実行する場所は、open()を実行したウインドウのデベロッパーツール上で行う必要がある。

close.js

// まず新しいウインドウを開く
const newWindow = open('https://example.com');

// 開いた後、close()を実行すると閉じる
newWindow.close();

Location/Historyオブジェクト

URLを操作するLocationオブジェクト

Locationオブジェクトを使うとURLを操作することができる。

console.log(location.href);

URLを表示するだけでなく、URLを指定するなどの操作もできる。

location.js

// 現在のページを再読み込みする 
location.reload();

//　指定のURLへ遷移する
location.href = 'https://www.google.co.jp/';

閲覧履歴を操作するHistoryオブジェクト

閲覧履歴はHistoryオブジェクトで操作ができる。

history.js

// 前のページに戻る
history.back();

//　次のページに進む
history.forward();

また、前後のページ遷移だけでなく、指定ページ数分の履歴を移動することもできる。その場合はgo()メソッドを使う。

// ２ページ先へ進む
history.go(2);

//　マイナスの数値を渡すと戻る
history.go(-2);