JS. 객체

※ 생활코딩 선생님의 "객체 활용" 강의를 수강하고 작성한 글입니다.

객체 프로퍼티 메소드 용어 정리

객체(Object)

이름과 값으로 구성된 성질(property)의 정렬되지 않은 집합입니다.

프로퍼티(property)

객체에 소속된 변수

메소드(method)

객체에 소속된 함수

<script>
  function LinkSetColor(color){
    var alist = document.querySelectorAll('a');
    var i = 0;
    while(i < alist.length){
    alist[i].style.color = color;
    i = i + 1;
    }
  }
  function BodySetColor(color){
    document.querySelector('body').style.color = color;
  }
  function BodySetBackgroundColor(color){
    document.querySelector('body').style.backgroundColor = color;
  }
  function nightDayHandler(self){
    var target = document.querySelector('body');
    if(self.value === 'night'){
    BodySetBackgroundColor('black');
    BodySetColor('white');
    self.value = 'day';

    LinkSetColor('powderblue');
    }
    else {
    BodySetBackgroundColor('white');
    BodySetColor('black');
    self.value = 'night';

    LinkSetColor('blue');
    }
  }
</script>

위 코드와 같이 객체를 사용하기 전에 함수로 중복을 정리해주는 작업을 했다.

객체 생성 방법

    <h2>Create</h2>
    <script>
      var 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>Interate</h2>
    <script>
      for(var key in coworkers){
        document.write(key+' : '+coworkers[key]+'<br>');
      }
    </script>

반복문을 사용하는 법

for(var key in coworkers)

key

programmer, designer 등

coworkers[key]

egoing, leezche 등

메소드 생성 방법

    <script>
      coworkers.showAll = function(){
        for(var key in this){
          document.write(key+' : '+this[key]+'<br>');
        }
      }
      coworkers.showAll();
    </script>

메소드란?

객체에 소속된 함수

객체 활용

Body와 Links라는 객체에 담을 것이다.
객체는 프로퍼티와 프로퍼티를 구분할 때 쉼표를 붙여주어야 한다.
Body라는 객체 안에 setColor와 setBackgroundColor라는 프로퍼티를 넣었고,
Links라는 객체 안에는 setColor라는 프로퍼티를 넣었다.

<!doctype html>
<html>
<head>
  <title>WEB1 - HTML</title>
  <meta charset="utf-8">
<script>
  var Links = {
    setColor:function(color){
      var alist = document.querySelectorAll('a');
      var i = 0;
      while(i < alist.length){
      alist[i].style.color = color;
      i = i + 1;
      }
    }
  }
  var Body = {
    setColor:function(color){
      document.querySelector('body').style.color = color;
    },
    setBackgroundColor:function(color){
      document.querySelector('body').style.backgroundColor = color;
    }
  }
  function nightDayHandler(self){
    var target = document.querySelector('body');
    if(self.value === 'night'){
    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 id="night_day" type="button" value="night" onclick="
    nightDayHandler(this);
  ">
  <div id="grid">
  <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>
  <div id="article">
  <h2>HTML</h2>
  <p>is the standard markup language for <strong>creating <u>web</u> pages</strong> and web applications.Web browsers receive HTML documents from a web server or from local storage and render them into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.
  </p><p style="margin-top:45px;">HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects, such as interactive forms, may be embedded into the rendered page. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. HTML elements are delineated by tags, written using angle brackets.
  </p>
</body>
</html>

위 코드를 보면 예전 코드보다 더 정리가 잘 된 모습이다.

저작자표시 (새창열림)

'🔤 Language > 🟨 JavaScript' 카테고리의 다른 글

JS. 라이브러리와 프레임워크, UI vs API (0)	2022.01.09
JS. 파일로 쪼개서 js코드 관리 (0)	2022.01.09
JS. 함수 (0)	2022.01.08
JS. 배열과 반복문 (0)	2022.01.08
JS. 리펙토링 중복제거 (0)	2022.01.07

객체 프로퍼티 메소드 용어 정리

객체(Object)

프로퍼티(property)

메소드(method)

객체 생성 방법

반복문

반복문을 사용하는 법

key

coworkers[key]

메소드 생성 방법

메소드란?

객체 활용

'🔤 Language > 🟨 JavaScript' 카테고리의 다른 글

티스토리툴바