WEB2 - JavaScript 29 (객체 'object' 의 예고)

728x90

객체(object) 예고

객체는 함수와 대립되는 개념이 아니라 함수라는 것 기반 위에서 객체라고 하는 것이 존재하는 것이기 때문에 이제까지 배운 것의 다른 트랙이 아니라 그 트랙이 더 심화되는 것이라고 생각하면 되겠다.

객체는 여러 가지 다면적인 얼굴을 가지고 있는데 이 시간에는 그중에서 딱 하나만 배워볼 예정이다.

이 시간 제시할 객체의 얼굴 중 하나는 정리정돈의 수단이다.

3.html
예제를 함수로 정리정돈하면서 함수만으로 처리하는 것이 조금 우아하지 않은 단계까지 해보자.

<!DOCTYPE html>
<html>
  <head>
    <title>WEB1 - JavaScript</title>
    <meta charset="utf-8">
    <script>
    function nightDayHandler(self){
      var target = document.querySelector('body');
      if(self.value === '开启'){
        target.style.backgroundColor='black';
        target.style.color='white';
        self.value = '关闭';

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

      } else {
        target.style.backgroundColor='white';
        target.style.color='black';
        self.value = '开启';

        var alist = document.querySelectorAll('a');
        var i = 0;
        while(i < alist.length){
          alist[i].style.color = 'limegreen';
          i = i + 1;
        }
      }
    }
    </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>

예제에서 중복되는 코드가 보인다.

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

이 부분을 함수로 또 독립시켜보자.

function setColor 로 독립시킨 후 중복되는 컬러를 setColor( ); 로 입력하기.

<!DOCTYPE html>
<html>
  <head>
    <title>WEB1 - JavaScript</title>
    <meta charset="utf-8">
    <script>
    function setColor(color){
      var alist = document.querySelectorAll('a');
      var i = 0;
      while(i < alist.length){
        alist[i].style.color = color;
        i = i + 1;
      }
    }
    function nightDayHandler(self){
      var target = document.querySelector('body');
      if(self.value === '开启'){
        target.style.backgroundColor='black';
        target.style.color='white';
        self.value = '关闭';

        setColor('mediumspringgreen');

      } else {
        target.style.backgroundColor='white';
        target.style.color='black';
        self.value = '开启';

        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>

target.style.color='white'; 를 보면 이 웹페이지에 있는 <body> 태그의 폰트 컬러를 흰색으로 한다는 뜻.
한 줄 밖에 되지 않기 때문에 함수화 시키는 것은 별로 의미가 없을 수도 있겠지만, 이 코드는 의미가 명확하지만, 한 줄이라고 하더라도 그 의미가 불명확하거나 시간이 지나면 원래 무슨 뜻이었는지 파악하기 어려울 때는 함수를 통해 그 로직에 이름을 부여하는 것도 좋은 전략이다.

그리고 여기서 한줄의 코드가 아닌 여러 줄의 코드라고 가정해보자.

또 함수로 독립을 시킬건데 이미 function setColor 로 위에서 만들었기 때문에 이름을 바꿔준다.

~~(만약 function setColor 로 코드를 짠다면 기존에 짰던 코드가 그다음에 나오는 것에 의해서 덮어쓰기 되면서 삭제되는 결과를 갖게 된다.)~~

먼저 독립시킨 함수는 링크들에 대한 setColor 이다.
= function LinksSetColor(color)
다음으로 독립시키는 함수는 바디들에 대한 setColor 이다.
= function BodySetColor(color)

<!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){
      target.style.color=color;
    }
    function nightDayHandler(self){
      var target = document.querySelector('body');
      if(self.value === '开启'){
        target.style.backgroundColor='black';
        BodySetColor('white');
        self.value = '关闭';

        LinksSetColor('mediumspringgreen');

      } else {
        target.style.backgroundColor='white';
        BodySetColor('black');
        self.value = '开启';

        LinksSetColor('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>

리로드 해보면 제대로 실행되지 않는 것을 알 수 있다.
무엇이 문제인가?

function BodySetColor(color){

target.style.color=color;

}

안에 있는 target 은 함수 안에 소속되어 있지만 이 target 은 nightDayHandler 안의
var target = document.querySelectro('body'); 이다.

target 부분을 document.querySelector('body'); 로 교체.

<!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 nightDayHandler(self){
      var target = document.querySelector('body');
      if(self.value === '开启'){
        target.style.backgroundColor='black';
        BodySetColor('white');
        self.value = '关闭';

        LinksSetColor('mediumspringgreen');

      } else {
        target.style.backgroundColor='white';
        BodySetColor('black');
        self.value = '开启';

        LinksSetColor('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>

웹페이지의 배경색도 함수로 독립시켜준다.

function BodySetBackgroundColor (color)

<!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 === '开启'){
        BodySetBackgroundColor('black');
        BodySetColor('white');
        self.value = '关闭';

        LinksSetColor('mediumspringgreen');

      } else {
        BodySetBackgroundColor('white');
        BodySetColor('black');
        self.value = '开启';

        LinksSetColor('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>

자 여기서 함수로 독립시키는 것도 하나의 방법이지만 JS를 만든 사람들은 이런 경우에도 사용하라고 객체라고 하는 것을 만들었다.

객체를 도입하면 객체를 사용하는 쪽의 코드는 어떻게 바뀌는가 살펴보자.

Body 와 Links 라는 객체를 만들고 온점을 찍고 뒤에 소문자로 바꿔주자.

<!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>

아직 객체라는 것을 만드는 방법을 배우지 않았지만 폴더라는 관점으로 봐도 무방하다.

그리고 또 하나 중요한 것,

document 는 객체이다. querySelector('body')는 document 라는 객체에 속해 있는 함수이다.

그리고 객체에 속해 있는 함수는 함수라고 하지 않고 메소드(method)라고 부른다.

현재 작성한 코드는 동작하지 않는다. 다음 시간에 동작하는 코드로 바꿔보자.

저작자표시 (새창열림)

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

WEB2 - JavaScript 31 (객체와 반복문) (0)	2021.09.29
WEB2 - JavaScript 30 (객체, object) (1)	2021.09.28
WEB2 - JavaScript 28 (함수의 활용) (6)	2021.09.24
WEB2 - JavaScript 24 to 27 (함수, function) (4)	2021.09.23
WEB2 - JavaScript 23 (배열과 반복문의 활용) (5)	2021.09.19

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

티스토리툴바