본문 바로가기
LEARN/JAVASCRIPT

[JS] JavaScript 객체 소개

by 아이엠제니 2022. 3. 18.

 

 

29. 객체 예고

  • 개체는 함수의 기반 위에서 존재하는 개념
  • 서로 연관된 함수와 변수가 많아지면 이를 정리하기 위해 사용
document.querySelector('body');
  • document가 객체
  • querySelector는 document라는 객체에 속해 있는 함수
  • 객체에 속해 있는 함수들은 Method라는 이름으로 부름

 

 

 

30. 객체 (쓰기와 읽기)

  • 순서 없이 저장
<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="utf-8">
  <title></title>
</head>

<body>
  <h1>Object</h1>
  <h2>Create</h2>
  <script>
    let coworkers = { // 쓰기
      "programmer": "egoing",
      "designer": "leezche"
    };
    document.write("programmer : " + coworkers.programmer + '<br>');
    document.write("designer : " + coworkers.designer + '<br>');
    coworkers.bookkeeper = "duru"; // 넣기
    document.write("bookkeeper : " + coworkers.bookkeeper + '<br>');
    coworkers["data scientist"] = "taeho";
    document.write("data scientist : " + coworkers["data scientist"] + '<br>');
  </script>
</body>

</html>

 

 

 

31. 객체(순회)

  • 객체에 있는 모든 값들을 가져오기
  • 순회 iteration
  • for in 사용해서 가져오기
<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="utf-8">
  <title></title>
</head>

<body>
  <h1>Object</h1>
  <h2>Create</h2>
  <script>
    let coworkers = { // 쓰기
      "programmer": "egoing",
      "designer": "leezche"
    };
    document.write("programmer : " + coworkers.programmer + '<br>');
    document.write("designer : " + coworkers.designer + '<br>');
    coworkers.bookkeeper = "duru"; // 넣기
    document.write("bookkeeper : " + coworkers.bookkeeper + '<br>');
    coworkers["data scientist"] = "taeho";
    document.write("data scientist : " + coworkers["data scientist"] + '<br>');
  </script>
  <h2>Iterate</h2>
  <script>
    for (let key in coworkers) {
      document.write(key + ' : ' + coworkers[key] + '<br>')
    }
  </script>
</body>

</html>

 

 

 

32. 객체(프로퍼티와 메소드)

  • 객체에는 함수도 담을 수 있다
  • 객체에 메소드 추가
<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="utf-8">
  <title></title>
</head>

<body>
  <h1>Object</h1>
  <h2>Create</h2>
  <script>
    let coworkers = { // 쓰기
      "programmer": "egoing",
      "designer": "leezche"
    };
    document.write("programmer : " + coworkers.programmer + '<br>');
    document.write("designer : " + coworkers.designer + '<br>');
    coworkers.bookkeeper = "duru"; // 넣기
    document.write("bookkeeper : " + coworkers.bookkeeper + '<br>');
    coworkers["data scientist"] = "taeho";
    document.write("data scientist : " + coworkers["data scientist"] + '<br>');
  </script>
  <h2>Iterate</h2>
  <script>
    for (let key in coworkers) {
      document.write(key + ' : ' + coworkers[key] + '<br>')
    }
  </script>
  <h2>Property & Method</h2>
  <script>
    coworkers.showAll = function() {
      for (let key in this) {
        document.write(key + ' : ' + this[key] + '<br>')
      }
    }
    coworkers.showAll();
  </script>
</body>

</html>
  • 객체에 해당하는 함수를 '메소드'라고 부름
  • 객체에 해당하는 변수: coworkers.programmer 에서 programmer 가 변수임. property라고 부름

 

 

 

33. 객체의 활용

<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8" />
  <title>WEB1 - JavaScript</title>
  <script>
    let Links = {
      setColor: function(color) {
        let alist = document.querySelectorAll('a');
        let i = 0;
        while (i < alist.length) {
          alist[i].style.color = color;
          i = i + 1;
        }
      }
    }

    let Body = {
      setColor: function(color) {
        document.querySelector('body').style.color = color;
      },
      setBackgroundColor: function(color) {
        document.querySelector('body').style.backgroundColor = color;
      }
    }

    function nightDayHandler(self) {
      let target = document.querySelector('body'); // 변수 사용
      if (self.value === 'night') { // this 사용해서 코드 간결하게
        Body.setBackgroundColor('black');
        Body.setColor('white');
        self.value = 'day';

        Links.setColor('powderblue');

      } else {
        Body.setBackgroundColor('white');
        Body.setColor('black');
        self.value = 'night';

        Links.setColor('blue');
      }
    }
  </script>
</head>

<body>
  <h1><a href="index.html">WEB</a></h1>
  <input type="button" value="night" onclick="
      nightDayHandler(this)" />

  <ol>
    <li><a href="1.html">HTML</a></li>
    <li><a href="2.html">CSS</a></li>
    <li><a href="3.html">JavaScript</a></li>
  </ol>
  <h2>JavaScript</h2>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem
    accusantium quibusdam voluptatem consequuntur asperiores, dolores quam
    odio, illo necessitatibus quos et delectus aut. Blanditiis culpa ratione
    quibusdam, repellat ad iusto? Lorem ipsum dolor sit amet consectetur
    adipisicing elit. Exercitationem accusantium quibusdam voluptatem
    consequuntur asperiores, dolores quam odio, illo necessitatibus quos et
    delectus aut. Blanditiis culpa ratione quibusdam, repellat ad iusto?
  </p>
</body>

</html>

 

 

 

 

 

 

부스트코스 [자바스크립트의 시작] 강의 공부 기록

 

 

 

300x250

'LEARN > JAVASCRIPT' 카테고리의 다른 글

[JS] JavaScript 객체 기본  (0) 2022.03.20
[JS] JavaScript 활용  (0) 2022.03.19
[JS] Javascript 함수  (0) 2022.03.17
[JS] Javascript 제어문  (0) 2022.03.16
[JS] 웹과 JavaScript  (0) 2022.03.15

관련글

티스토리툴바