JavaScript　～組み込みオブジェクト編～ #JavaScript

・組み込みオブジェクトとは

　　組み込みオブジェクトとは、JavaScriptに備わっているオブジェクト群である。その中にはすでにインスタンス化されているものも、コンストラクタを呼び出して個別にインスタンス化をしてから使わなければならないものがある。

Windowオブジェクト

　Windowオブジェクトとは、開発者がブラウザを操作するためのWeb APIである。

・Windowオブジェクトのメソッド一覧

メソッド、構文	戻り値	説明
setTimeout(func, delay(, arg1, arg2...))	timeoutID	func()をミリ秒後(delayで指定)に実行する。arg1以下は引数となる。
setInterval(func, interval(, arg1, arg2...))	intervalID	func()をミリ秒後(intervalで指定)間隔に実行する。arg1以下は引数となる。
requestAnimationFrame(func)	requestID	func()を次の再描画の前に行うタスクを登録する。画面描画処理を邪魔したくないときに使う。
queueMicrotask(func)	定義しない	func()をマイクロタスクに登録する
clearTimeout(timeoutID)	定義しない	setTimeoutのtimeoutIDのタスクをキャンセルする
clearInterval(intervalID)	定義しない	setIntervalのintervalIDのタスクをキャンセルする
canceAnimationFrame(requestID)	定義しない	requestAnimationFrameのrequestIDのタスクをキャンセル
btoa(str)	encodedStr	文字列(str)をBase64形式のエンコード文字列(encodedStr)に変換する
atob(encodedStr)	str	Base64形式のエンコード文字列(encodedStr)を文字列(str)に変換する
alert(str)	定義しない	文字列(str)を画面のダイアログに表示する
confirm(str)	result	質問(str)とOK(キャンセル)ボタンを含むダイアログを画面に表示する。OKがクリックされた場合、resultにtrueが返される。
prompt(question(, default))	inputStr	質問(question)と入力可能なダイアログを出力する。defautにおいて入力欄のデフォルト値を設定できる。入力された文字(inputStr)が戻り値となる。
close()	定義しない	現在表示中のウィンドウを閉じる
open(URL(, windowName, windowFeatures))	定義しない	URLで指定したページをwindowNameで指定した画面で開く。新しい画面で開きたいときは、windowNameに_blankを入力する。また、表示画面や大きさを変える場合にはwindowFeaturesで指定する。
postMessage(message, targetOrigin(, transfer))	定義しない	Windowオブジェクト間のメッセージのやり取りを行う。主にページに埋め込まれたiframeのWindowオブジェクトと親のWindowオブジェクト間でのメッセージのやり取りに使われる。※iframeとは他のサイトのURLを埋め込む際に使う。`<iframe href="使いたいURL"></iframe>`のように使う。
scrollBy(x, y)	定義しない	現在の画面左上を基準としてx方向とy方向分だけスクロールする。xとyにはｐｘ（ピクセル数）を入力する。
scroll, scrollTo(x-coord, y-coord)	定義しない	HTMLの左上を基準としたx方向（x-coord）とy方向(y-coord)分だけスクロールする。
scroll系(option)	定義しない	上の引数がoption版。topは垂直方向、leftは水平方向のスクロール量を設定できる。behaiviorでは、スクロールの方法を決められる。autoでは自動的に、instantでは一瞬で、smoothでは滑らかにスクロールされる。

scrollBy(option)

    window.scrollBy({
          top: 100,
          left: 100,
          behavior: 'smooth'
});

Windowオブジェクトの例

    if( confirm("画面を閉じる") ) {

    //OKが押された場合、画面が閉じる。
    window.close();

}

・Windowオブジェクトのプロパティ一覧

プロパティ	説明
innerWidth	ブラウザウィンドウの内側境界の横幅
innerHeight	ブラウザウィンドウの内側境界の高さ
outerWidth	スクロールバーを含めたブラウザ全体の外側境界の横幅。ウィンドウ全体を含むため、基本的にブラウザウィンドウの横幅を取得するときにはinnerWidthを使う。
outerHeight	スクロールバーを含めたブラウザ全体の外側境界の高さ。
pageXOffsetscrollX	Webページのｘ軸へのスクロール幅をピクセルで表す。どれだけスクロールしたかがわかる。
pageYOffsetscrollY	Webページのｙ軸へのスクロール幅をピクセルで表す。どれだけスクロールしたかがわかる。
screenLeftscreenX	ディスプレイの左端からブラウザウィンドウの左端までをピクセル数で表す。
screenTopscreenY	ディスプレイの上端からブラウザウィンドウの上端までの高さをピクセル数で表す。
self	Windowオブジェクトのエイリアス
frames	window内のiframe(array-like)オブジェクトとして返す
parent	現在のWindowの親のWindowオブジェクトを返す。iframeなどのサブWindowで使用する。
top	ウィンドウの階層の最上位のWindowオブジェクトを返す
undefined	未定義を表す

・日付と時刻のオブジェクト

　Dateオブジェクトとは、協定世界時の1970年1月1日0時からの経過時間をミリ秒単位で保持し、それによって自国を計算している。

・Dateオブジェクト

Dateオブジェクトのインスタンス化

    let 変数名 = new Date();
    let 変数名 = mew Date (ミリ秒);
    let 変数名 = new Date ( "YYYY(--MM--DDTHH:mm:ss.ssTZD)");
    let 変数名 = new Date ( 年, 月(, 日, 時, 分, 秒, ミリ秒));

・Dateオブジェクトの値を取得するメソッド

メソッド	戻り値	説明
getDate()	dateInt	dateIntを数値で返す。
getDay()	dayInt	日付(dayInt)を数値で返す。0(日曜日)~6(土曜日)
getMonth()	monthInt	月(monthInt)を数値で返す。0(1月)~11(12月)
getFullYear()	yyyy	年(yyyy)を数値で返す。
getHours()	hourInt	時(hourInt)を数値で返す。
getMinutes()	minuteInt	分(minuteInt)を数値で返す。
getSeconds()	secondInt	秒(secondInt)を数値で返す。
getMilliseconds()	msInt	ミリ秒(msInt)を数値で返す。
getTime()	ms	1970年1月1日深夜0時からの経過時間をミリ秒(ms)で取得。
toString()	datetimeStr	Dateオブジェクトの日時を文字列(datetimeStr)で返す。
toISOString()	datetimeStr	Dateオブジェクトの日時をISO08601表記の文字列(datetimeStr)で返す。
toJSON	jsonStr	DateオブジェクトをJSONで使用するために文字列に変換する
toDateString()	dateStr	Dateオブジェクトの年月日、曜日を文字列(dateStr)で返す
toTimeString()	timeStr	Dateオブジェクトの現地時間を文字列(timeStr)で返す
toLocaleString([locales, options])	datetimeStr	場所(locals)と指定したタイムゾーン(options)に合わせたDateオブジェクトの日時を文字列(datetimeStr)で返す。
toLocaleDateString([locales, options])	dateStr	使い方はtoLocaleStringと同じ
toLocaleTimeString([locales, options])	timeStr	使い方はtoLocaleStringと同じ
toUTCString	utcDatetimeStr	Dateオブジェクトの現地時刻をUTC時刻でで表す文字列(utcDtetimeStr)に変換

・Dateオブジェクトの値を設定するメソッド

　setDate, setMonth, setFullYear, setHours, setMinutes, setSeconds, setMilliseconds, setTime()を使う。

・正規表現（RegExp）オブジェクト

正規表現リテラル

let RegExpオブジェクト = /正規表現/

RegExpオブジェクトのインスタンス化

let RegExpオブジェクト = new RegExp("正規表現" (, "フラグ"));

let RegExpオブジェクト = new RegExp(/正規表現/ (, "フラグ"));

・Storageオブジェクト

　Storageオブジェクトとは、Web Storage APIの機能によるものである。これは、通常、変数に格納されている値は、ブラウザを閉じたりすると消えてしまうが、Storageオブジェクトを使うとデータをブラウザに保存することができ、入力した情報を保持されてブラウザが消されてもデータを復元することができる。

・Storageコンストラクタのインスタンス

　Web Storage APIは、localStorageオブジェクトまたはsessionStorageオブジェクトに格納する。これはJavaScriptに備わった機能である。

・Storageオブジェクトのメソッドとプロパティ一覧

メソッド	戻り値	説明
setItem(key, value)	定義しない	setItem("water", "水(説明文)")
getItem(key)	value or null	ブラウザに保存されているデータを取得することができる。
removeItem(key)	定義しない	setItemでkeyに登録した単語をremoveItemで指定すると、その単語を削除する。
clear()	定義しない	setItemで登録したものをすべて削除する。
key(index)	keyName	indexを指定することによってキー(keyName)を取得する。setItemで登録したものはリストのように格納されていく。

・ローカルストレージにおける値

　ローカルストレージに入っている値はオリジン単位で保持されている。オリジンとはURLのプロトコルとドメイン、ポート番号によって定義され、それら全て一致した場合にのみ同じオリジンとなる。同じオリジンであれば、ブラウザのタブやウィンドウをまたいでデータの保存、取得、変更が可能である。

・ローカルストレージとセッションストレージ

　StorageオブジェクトにはlocalStorageのほかに、sessionStorageがある。これはセッションごとにデータを保存する。セッションとは、Webサイトにアクセスして行う一連の行動（サイトを開いて閉じるまで）のことである。つまり、このセッションストレージではブラウザのタブやウィンドウを閉じるまで値が保存される。値はタブごとに保存される。

・JSONオブジェクト

　JSON(JavaScript Object Notation)は、データをJavaSriptの記述方法で表したファイルのことである。表記の際の注意点として①キーは""(タブルクォート)で囲む、②'(シングルクォート)は使えないの２点の注意点がある。

JSONの表記法

[
        {
            "name": "田中 サネ",
            "age": 29,
            "team": {
                "league": "ブンデスリーガ",
                "team": "バイエルン・ミュンヘン"
            }
        },
        {
            "name": "吉田 デブライネ";
            "age": 30
        }
]

【参考】
独習JavaScript 新版
https://www.amazon.co.jp/dp/479816027X

JavaScript ～組み込みオブジェクト編～