#52 JavaScriptアウトプット

こんにちは、hiroです😃
昨日MCU（マーベル・シネマティック・ユニバース）のテーマパークがディズニー・カリフォルニア・アドベンチャー・パークにオープンするという記事を見ました。非常に興奮しながら日本からカリフォルニアまでの旅費を調べた時に知ったのですが、ディズニーが世界各地にある事を初めて知りました。笑
日本はもちろんの事、カリフォルニア、フロリダ、上海、香港、パリの6拠点あるんですね！無知も良いとこです🙄この年齢で知れてよかったです！

まだまだ世界の知らない事をたくさん抱えながら、本日もアウトプットしていきたいと思います！

オブジェクトの概念

let 変数名 = {キー: バリュー, キー: バリュー}

・オブジェクトとは、データや処理といった情報を1つにまとめた集合体（{}内の記述）の事。
・データとは "キー" と "バリュー" のセット。 "プロパティ" とも言う。
・プロパティとは "ハッシュ形式" で記述される値の事。プロパティはオブジェクトの集合体から成り立っている。

console.log（オブジェクト名.プロパティ名）

・上記で、プロパティから値を取得出来る。

let 変数名 = {
  キー：バリュー
  キー： function（）{
     実行したい処理を記述
   }
}

・上記の様に、キーに対して関数を記述、呼び出す事も可能。

windowオブジェクト

・ブラウザの情報を持っているオブジェクト。JavaScriptで予め定義されているメソッドやオブジェクトは全てwindowオブジェクトのプロパティ。

documentオブジェクト

・ブラウザ上で表示された情報（HTML）を操作する事が出来るオブジェクト。

DOM（Document Object Model）

・HTMLを解析し、データを作成する仕組み。
・HTMLファイル → HTMLを解析しDOMに変換 → JavaScriptの読み込み・描画 → ユーザーが閲覧するページを表示。
・上記手順はブラウザ（Google Chrom や Safari）が実施している。 

document.getElementById（"id名"）

・引数に渡したidを持つ要素を取得するメソッド。

document.getElementsByClassName（"class名"）

・引数に渡したclassを持つ要素を取得するメソッド。

document.querySelectorAll（"セレクタ名"）

・引数に渡したセレクタ名を持つ要素を全て取得するメソッド。

Script要素

・実行できるコードを埋め込んだり参照したりするために使用されるHTML。JavaScriptのコードの埋め込みや参照に使用される。

イベント

・HTMLに対して行われた処理の要求の事。「ボタンをクリックした」「テキストを入力した」「マウスカーソルを要素に乗せた」などが対象。
・イベントを認識して、JavaScriptのコード（関数）が動く事を "イベント発火" という。

要素 . addEventListner（ 'イベント名', 関数 ）

・イベント発火の際に実行する関数を定義するメソッド。

window.addEventListner（' load ', function（）{
  関数の処理をこの中に記述
}）

・上記の関数処理に、要素の取得やイベント発火時の関数定義の処理を記述する事で、HTMLページが読み込まれた後にJavaScriptのコードが実行される様になる。記述が無いと、HTMLページを読み込む前にJavaScriptコードが読み込まれてしまい、"nill" と表示されてしまう。

インラインスタイル

・HTML要素の開始タグの中に直接CSSのソースコードを記述するプロパティの指定方法。

要素 . setAttribute（属性の名前を指定, 属性に設定したい値を指定）

・上記で、指定した要素上に新しい属性を追加、または既存の属性の値を変更できる。

要素 . removeAttribute（属性の名前を指定, 削除したい値を指定）

・上記で、指定した要素から、特定の属性を削除できる。

this.○○

・関数の中で使うと、イベント発火元となった要素を取得できる。

要素 . getAttribute（' 属性名 '） 

・上記で、要素上の指定した属性の値を戻り値として返す。

本日も最後まで読んで頂き、ありがとうございました！🙇‍♂️