今回はオブジェクトという概念についてみていきます。

---

１　ユーザー定義オブジェクト

　オブジェクトには、もとから用意された「ビルトイン オブジェクト」があります。
　document や window などがそうですね。
　しかし、ユーザー側がある程度自分の好きなようにオブジェクトを作成することができます。

書式

let オブジェクトの名前 =｛
    プロパティの名前：値 ,
    メソッドの名前：function（引数）{
    ｝
};

　これを「ユーザー定義オブジェクト」といいます。
　なお、プロパティもメソッドも複数定義することができ、これらは変数に代入することになりますが、この変数の名前がオブジェクトの名前になります。

---

２　オブジェクトをつくる

　実際の例を見ていきましょう。
　関数の学習で作成した三角形の面積を求める関数をもとに、オブジェクトを作成してみます。
　なお複数のプロパティ、メソッドの間には「 , 」が必要です。

HTML（一部）

<script>
    let tri = {
        name : "",
        base : 0,
        height : 0,
        calcArea : function() {
            return ( this.base * this.height ) / 2 ;
        }
    }

    tri.name = "三角形";
    tri.base = 10;
    tri.height = 10;

    let area = tri.calcArea();
    document.write("<p>" + tri.name + "の面積は" + area + "です。</p>");
</script>

ブラウザ

　以下、全体を３つに分けてみていきましょう。

HTML（一部）

<script>
    let tri = {
        name : "",
        base : 0,
        height : 0,
        calcArea : function() {
            return ( this.base * this.height ) / 2 ;
        }
    }

　まず、tri という変数を宣言して、プロパティ三つとメソッド一つを定義しています。
　一つ目のプロパティは「 ”” 」が代入されていますが、これは空文字といって、データがない文字列です。
　次に二つ目と三つ目のプロパティでは、数値の「0」が代入されています。

　四つ目は、無名関数の定義と同様に、calcArea というメソッドが定義されています。
　この例では引数がありませんので（ ）内には何もありません。
　また、this という用語がありますが、このように記述することによって、自分自身の、つまり変数 tri のプロパティをなどを呼び出すことになります。
　最後に、定義の部分は いずれも「＝」ではなく「：」と記述することに注意です。

HTML（一部）

    tri.name = "三角形";
    tri.base = 10;
    tri.height = 10;

　ここではプロパティの値（文字列、数値）を変更しています。
　この場合は「：」ではなく、「＝」を使います。

HTML（一部）

    let area = tri.calcArea();
    document.write("<p>" + tri.name + "の面積は" + area + "です。</p>");
</script>

　最後は、このオブジェクト tri の calcArea メソッドを呼び出しています。
　このメソッドは、プロパティの値（数値）を定義に従って処理し、その結果を得るものです。上の例では、その結果を、変数 area に代入しています。
　そして最後に、結果を利用して write メソッドにより出力します。
　なお、name プロパティの値（文字列）はそのまま利用しています。

---

３　次回

　今回は重要な部分なので、じっくり見ていきました。
　次回は、プロパティとメソッドを追加したり、削除したりしてみます。