WEB2 - JavaScript 33 (객체의 활용)

728x90

객체의 활용

객체 예고 시간에 열어놨던 코드를 닫아보자.

3.html

<!DOCTYPE html>
<html>
  <head>
    <title>WEB1 - JavaScript</title>
    <meta charset="utf-8">
    <script>
    function LinksSetColor(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 === '开启'){
        Body.setBackgroundColor('black');
        Body.setColor('white');
        self.value = '关闭';

        Links.setColor('mediumspringgreen');

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

        Links.setColor('limegreen');
      }
    }
    </script>
  </head>
  <body>
    <h1><a href="index.html" title="到百科">WEB网络</a></h1>
    <input type="button" value="开启" onclick="
      nightDayHandler(this);
    ">
    <div id="grid">
      <ol>
        <h3>计算机语言-常见语言</h3>
        <li><a href="1.html" title="到HTML意义">HTML超文本标记语言</a></li>
        <li><a href="2.html" title="到CSS意义">CSS层叠样式表</a></li>
        <li><a href="3.html" title="到JavaScript意义">JavaScript</a></li>
      </ol>
      <div id="文章">
        <h3>-JavaScript</h3>
          <p style="margin-top:40px;">
              <strong><u>JavaScript</u></strong>即全球广域网，也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构。
          </p>
          <p>
            <a href="https://baike.baidu.com/item/JavaScript" target="_blank" title="到百科的JavaScript意义">更多>></a>
          </p>
          <img src="coding.jpg" width="50%">
        </div>
      </div>
      <input type="button" value="开启" onclick="
    </body>
</html>

이전 시간에 만들어 놓은, 아래와 같은 코드들을 사용하려면 어떻게 해야 할까?

Body.setBackgroundColor('black');
Body.setColor('white');

Body 라는 변수에 객체를 담아보자.
객체의 Property 로 setColor 를 지정한 다음 객체화시켜보자.

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

(여기서 주의할 점은 객체의 Property 와 Property 를 구분할 때 ,콤마를 사용한다.)

다음으로 function LinksSetColor 도 객체화시켜보자.

function LinksSetColor(color){
 var alist = document.querySelectorAll('a');
 var i = 0;
 while(i < alist.length){
  alist[i].style.color = color;
  i = i + 1;
 }
}

이렇게 작성했던 코드를

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;
  }
 }
}

이렇게 객체화시켰다.

이렇게 객체를 알게 되었고 사용했던

document.querySelector('body').style.color=color;

document 는 객체(Object)였고 querySelector('body') 는 함수이면서 객체에 소속되어 있기 때문에 메소드(Method) 라는 사실을 알게 되었다.

마무리

<!DOCTYPE html>
<html>
  <head>
    <title>WEB1 - JavaScript</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 === '开启'){
        Body.setBackgroundColor('black');
        Body.setColor('white');
        self.value = '关闭';

        Links.setColor('mediumspringgreen');

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

        Links.setColor('limegreen');
      }
    }
    </script>
  </head>
  <body>
    <h1><a href="index.html" title="到百科">WEB网络</a></h1>
    <input type="button" value="开启" onclick="
      nightDayHandler(this);
    ">
    <div id="grid">
      <ol>
        <h3>计算机语言-常见语言</h3>
        <li><a href="1.html" title="到HTML意义">HTML超文本标记语言</a></li>
        <li><a href="2.html" title="到CSS意义">CSS层叠样式表</a></li>
        <li><a href="3.html" title="到JavaScript意义">JavaScript</a></li>
      </ol>
      <div id="文章">
        <h3>-JavaScript</h3>
          <p style="margin-top:40px;">
              <strong><u>JavaScript</u></strong>即全球广域网，也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构。
          </p>
          <p>
            <a href="https://baike.baidu.com/item/JavaScript" target="_blank" title="到百科的JavaScript意义">更多>></a>
          </p>
          <img src="coding.jpg" width="50%">
        </div>
      </div>
      <input type="button" value="开启" onclick="
    </body>
</html>

( 다음 시간에는 객체보다 더 큰 정리 정돈의 도구를 살펴보자. )

저작자표시 (새창열림)

'youtube.com|user|egoing2 > WEB2 - JavaScript' 카테고리의 다른 글

WEB2 - JavaScript 35 (library VS framework) (3)	2021.10.02
WEB2 - JavaScript 34 (파일로 쪼개서 정리 정돈하기) (2)	2021.10.01
WEB2 - JavaScript 32 (객체프로퍼티와 메소드) (0)	2021.09.29
WEB2 - JavaScript 31 (객체와 반복문) (0)	2021.09.29
WEB2 - JavaScript 30 (객체, object) (1)	2021.09.28

'youtube.com|user|egoing2 > WEB2 - JavaScript' 카테고리의 다른 글

티스토리툴바