[JS] 19. 객체의 활용

🔑 코인 투자 추천 링크 🔑

자바스크립트 강의 목차

0. 자바스크립트란 무엇인가?

1. Script 태그 (document.write)

2. 자바스크립트 이벤트란 무엇인가?

3. 자바스크립트를 크롬브라우저 콘솔에서 작성하고 실행해보기

4. 데이터 타입 문자열과 숫자

5. 변수와 대입연산자

6. 자바스크립트로 웹브라우저 제어하기

7. 비교연산자, Boolean 데이터타입

15. 함수의 기본사용법, 매개변수, 인자, 리턴

16. 함수의 활용

17. 객체는 왜 필요한가?

18. 객체란 무엇인가?(객체 생성, 추가, 추출방법)

19. 객체의 활용

20. 파일로 쪼개어 관리하기

21. 라이브러리와 프레임워크

22. API & UI 그리고 프로젝트 활용도구

이번시간에는 객체 처음시간에 객체에 대한 이해를 위해서 만들었던 코드를 완성하도록 하겠습니다.

하나씩 천천히 작성해보겠습니다.

먼저 객체를 만들어야겠죠?

Body라고 변수를 만들고 기존에 있던 BodySetColor()함수를 setcolor이라는 객체로 만들었습니다.

소스는 이렇습니다.

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

그리고 기존에 작성된 BodySetColor()함수는 삭제합니다.

이런식으로 하나씩 옮겨옵니다.

아래 내용도 추가해줍니다.

마지막으로 Links도 완성합니다.

아래와 같이요.

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

결과를 보면 처음과 같이 잘 동작합니다.

전체 소스는 아래와 같습니다.

<!doctype html>
<html>
<head>
  <title> Web1 - Web </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');
    Links.setColor('powderblue');
    self.value = 'day';
  } else {
    Body.setBackgroundColor('white');
    Body.setColor('black');
    Links.setColor('blue');
    self.value = 'night';
  }
}

</script>
</head>
<body>
  <input type="button" value="night" onclick="
  nightDayHandler(this);
  ">

  <h1><a href=index.html>Web</a></h1>
    <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>
      <li><a href=4.html>Node.js</a></li>
      <li><a href=5.html>Solidity</a></li>
    </ol>
      <h2> Web </h2>
      <p>
        The World Wide Web (abbreviated WWW or the Web) is an information space where documents and other web resources are identified by Uniform Resource Locators (URLs), interlinked by hypertext links, and can be accessed via the Internet.[1] English scientist Tim Berners-Lee invented the World Wide Web in 1989. He wrote the first web browser computer program in 1990 while employed at CERN in Switzerland.[2][3] The Web browser was released outside of CERN in 1991, first to other research institutions starting in January 1991 and to the general public on the Internet in August 1991.
      </p>

</body>
</html>

이제 처음에 작성한 페이지를 객체로 만들고 활용하는법까지 배웠습니다.

본 강의는 생활코딩 강의안을 바탕으로 재작성된 강의안입니다.

opentutorials.org/course/3085/18885