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

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

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

<h3>・Windowオブジェクトのメソッド一覧</h3>

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

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

```JavaScript:Windowオブジェクトの例
    if( confirm("画面を閉じる") ) {

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

}
```

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


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

![windowプロ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2850098/762d4075-7920-ef32-49ce-4a3f6b7b102f.png)

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

<h3>・Dateオブジェクト</h3>

```JavaScript:Dateオブジェクトのインスタンス化
    let 変数名 = new Date();
    let 変数名 = mew Date (ミリ秒);
    let 変数名 = new Date ( "YYYY(--MM--DDTHH:mm:ss.ssTZD)");
    let 変数名 = new Date ( 年, 月(, 日, 時, 分, 秒, ミリ秒));
```

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

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

<h3>・Dateオブジェクトの値を設定するメソッド</h3>
　<b>setDate, setMonth, setFullYear, setHours, setMinutes, setSeconds, setMilliseconds, setTime()</b>を使う。

<h2>・正規表現（RegExp）オブジェクト</h2>

正規表現リテラル

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

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

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

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

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

<h3>・Storageコンストラクタのインスタンス</h3>
　Web Storage APIは、<b>localStorageオブジェクト</b>または<b>sessionStorageオブジェクト</b>に格納する。これはJavaScriptに備わった機能である。

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

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

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

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

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

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

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