オブジェクト・プロパティ・メソッドについて理解

1. 用語紹介

• オブジェクト データと機能をまとめたもの
• プロパティ オブジェクトないのデータに相当
• メソッド オブジェクトないの機能に相当

例

オブジェクトリテラルを宣言する方法

let englishTeacher = {
  name: "Taro", //プロパティ
  teachEnglish: function() { /* メソッド内容 */}  //メソッド
};

後から追加変更

englishTeacher.name = "Yamato" ; // 元のプロパティの編集
englishTeacher.age = 20 ; // 新しいプロパティの追加

2. 作り方

例

let teacher = {
  list: {
    language: {
      englishteacher: [
        {
          name: "Taro",
          sex: "man",
          teachEnglish: function() {},
        },
        {...}, //　別の英語の先生の分
      ],
      teach: function () {...},
    },
    mathteacher: { ... }, //数学でもlanguageと同様,今回は省略して表記
  },
  talk: function() {...},
  writeBlackboard: function() {...},
  doTest: function() {...},
}

3. アクセス方法

説明には2.作り方の例を用いる.

ドットを用いたアクセス

// "Taro"を取得する
// "Taro"はlistの先頭なので[0]と指定している
teacher["list"].["englishteacher"][0].name ; 

//talkを実行する
teaher.talk() ;

角括弧を用いたアクセス

// "Taro"を取得する
teacher["list"].["englishteacher"][0]["name"] ; 

//talkを実行する
teaher["talk"]() ;

Window, Document

JavaScriptはブラウザで動く言語。
ブラウザ自体もオブジェクトで定義されていて、メソッドやプロパティにアクセスできる。
その機能を使ってデータのやり取りやDOM操作を行う。

// 外部とデータをやり取りしている
window.feach();

//DOM要素(≒ HTML)のid="foo"を取得
window.document.getElementByID("foo");

注意)windowは省略可
console.log()やaleart()なども実はブラウザーのオブジェクト内にある機能となっている。次に記すようにwindowを省略せずに記述することでも動作する.

window.console.log("test");
window.alert("test");

windowの構造

window = {
  console: {
    log() {...},
  },
  alert() {...},
  document: {
    getElementByID() {...},
    /* ....
       ....
       .... */
  }
} // DOM(≒ HTML)へアクセス