☰
CreateLife ~AlwaysLatest~

ブラウザを操作するビルトインオブジェクト

JavaScript

ブラウザ操作のためのAPI

MDNのWindowインターフェイス内に記述してある プロパティやメソッドを使ってブラウザを操作する

*インターフェイス=オブジェクトと捉えて良い

メソッド（抜粋）

alert

画面にアラートを表示

alert('hoge');

confirm

返り値を受け取れる(trueかfalse)

let result = confirm('are you sure');
console.log(result); // ユーザーの返答でtrueかfalseに変わる

prompt

返り値を受け取れる(文字列)

let result = prompt('you name','hoge');
console.log(result); // ユーザーの入力値が返される

setTimeout

oo秒後に関数を実行

setTimeout(()=>{
	console.log('hello');
},1000);

取り消す

// setTimeoutにはユニークなIDが返される
let itmerID = setTimeout(()=>{
	console.log('hello');
},1000);
// 対象のIDを指定して削除できる
clearTimeout(timerID);

setInterval

oo秒ごとに繰り返す

// 1秒ごとに実行してずっと続く
setInterval(()=>{
	console.log('hello');
},1000);

取り消す

let itmerID = setInterval(()=>{
	console.log('hello');
},1000);
// 対象のIDを指定して削除できる
clearInterval(timerID);

プロパティ（抜粋）

navigator

ブラウザやOS情報を取得できるオブジェクト

navigator.userAgent; // OSやブラウザ情報を取得
navigator.languege; // 言語設定を取得
navigator.clipboard; // 保持情報を取得
navigator.credentials; // javaScriptから保存されているパスワードを取得

screen

デバイスの情報を取得

screen.width; // デバイスの横幅

location

URL情報を取得できる

location.href; // URLを取得
location.protocol; // プロトコルを取得
location.pathname; // ドメイン以降のパスを取得
location.port; // ポート番号を取得
location.host; // ポート番号含むドメイン
location.hostname; // ポート番号含まないドメイン
location.search; // クエリデータを取得
location.origin; // プロトコル+パス+ポート番号

URLを代入してリロードする

location.href = '<https://google.com>'; // Googleのページにリダイレクトされる
location.search = '?hoge=foo'; // クエリを付け足してリロード
location.pathname = 'hoge'; // パスを変更してリロード
location.origin = 'hoge'; // これだけは動かない

新しいページに移動する

location.assign('<https://google.com>');

現在のページ情報を残さずにページを移動

location.replace('<https://google.com>'); // ブラウザバック時に今のページに戻れない

ページの履歴は見れない！！！（プライバシーの問題）

操作することはできる↓

history

ページを戻る

history.back;

ページを進む

history.foward;

ooページ進む、戻る

history.go(4); // 4ページ分進む
history.go(-6); // 6ページ分戻る

URLを変えて何もしない

history.pushState(null,null,'/hoge');

URLを解析する

該当URLをインスタンス化してオブジェクトにしてくれる

let url = new URL('<https://google.com>');

いろいろな情報が取れる様になる

let url = new URL('<https://google.com/hoge>');
url.host; // google.com
url.pathname; // /hoge

パラメーターを取得できる

let url = new URL('<https://google.com/?q=javascript>');
url.searchParams.get('q'); // javascript

パラメータをセットできる

let url = new URL('<https://google.com/?q=javascript>');
url.searchParams.set('page','2');
console.log(url.search); // ?q=javascript&page=2

便利なAPI

IntersectionObserverAPI

スクロールした時に何かをしたい時に使う

PaymentRequestAPI

クレジットカード情報をブラウザで管理できる

WebCryptoAPI

暗号化のためのもの

PointerLockAPI

ゲームなどでマウスのポインタを見えないようにする

HOME >  JavaScript >  ブラウザを操作するビルトインオブジェクト