JavaScriptでのオブジェクト指向について学んでみた（DOM）についても少し

3つの重要すぎる用語

オブジェクト

データと機能が合わさったもの
データとは？　例で言うと人間、野球
機能とは？　　例で言うと食べる、寝る、打つ、走る

プロパティ

オブジェクトの中のデータの部分

メソッド

オブジェクトの中の機能の部分

考え方としてはオブジェクトの中にメソッドとプロパティがあるという感じでいいと思います！

私がファンのイチロー選手とローラさんで例で例えると

オブジェクト自体をさらにまとめてプロパティの中に入れるという表現ができます！

オブジェクトの作り方

let model = {}

今回はモデルという大きなオブジェクトの中にローラさんがいる感じにします。ここにプロパティを追加すると

let model = { 
    name: 'rola',
}

さらにメソッドも

let human = { 
    name: 'rola',
    teachWorkout: function(){},
}

こんな感じです。
ここにプロパティを追加と変更をしてみます！

model.age = 25
model.name = 'magi-'

この記述を先ほどの記述の下に入れてあげるだけです！
超簡単なやり方としてはこんな感じです。メゾットのfunctionの後に呼び出したい記述を入れてあげるとコンソールで呼び出せるので試してみてください！書き方は以前の記事でも紹介した${}を使うと楽です！

ブラウザで用意された最上位オブジェクトWindowについて

windowオブジェクトとはブラウザの情報を持っているオブジェクトです。ブラウザの情報をもつので、ブラウザオブジェクトと呼ばれます。
JavaScriptで予め定義されているメソッドやオブジェクトは全てwindowオブジェクトのプロパティであると言えます！
例えばこのように書くとブラウザにアラートを表示できます。

window.alert("エンジニアになるぞ！")

ちなみにwindowは省略できます！

alert("エンジニアになるぞ！")

これでも結果は一緒です！
console.logや次に紹介するdocumentもwindowというのがくっついていますがたいてい省略されています！

最も頻繁に使用するdocumentオブジェクトについて

このオブジェクトはブラウザ上で表示された情報(HTML)を操作する事ができるオブジェクトです。
このdocumentオブジェクトは非常に多くのプロパティやメソッドを持っています。したがって、documentオブジェクトはこれからHTMLに対して何か処理をする際は頻繁に使用するオブジェクトとなるので覚えておきましょう！
下記ではHTMLに処理する上での考え方と重要な"DOM"についてアウトプットしています！

DOM(HTMLの要素をJavaScript上で取得し操作)

DOMとはDocument Object Model(ドキュメントオブジェクトモデル)の略です。HTMLを解析し、データを作成する仕組みです。
HTMLやCSSがWebページとして閲覧されるまでの流れ
　　　　　　　⬇️
1, HTMLで書かれた単なる文字情報を解析してDOMに変換
2, そのままだととても見にくいのでCSSやJavaScriptによる装飾を行う
3, ユーザー(私たち)がみる画面に映す。

HTMLは階層構造になっていて、DOMによって解析されたHTMLは、階層構造のあるデータとなります。これを、DOMツリーやドキュメントツリーと呼びます！
JavaScriptのメソッドを使うと、DOMツリーを操作することができます!
HTMLの要素名や、「id、class」といった属性の情報を元にDOMツリーの一部を取得し、CSSを変更したり、要素を増やしたり、消したりできます。するとそれがブラウザに反映され、描画も変わります!これがJavaScriptの面白いところかなと思っています！

まとめ

オブジェクトについての考え方はRubyに比べてわかりやすいかなと感じました！
これからもっとJavaScriptの奥深くに入り込んでいきます！