WEB2 - JavaScript 33 (객체의 활용)

WEB2 - JavaScript 33 (객체의 활용)

객체의 활용

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

3.html

WEB1 - JavaScript 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'); } } WEB网络 计算机语言-常见语言 HTML超文本标记语言 CSS层叠样式表 JavaScript -JavaScript JavaScript即全球广域网，也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构。 更多>>

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

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) 라는 사실을 알게 되었다.

마무리

WEB1 - JavaScript 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'); } } WEB网络 计算机语言-常见语言 HTML超文本标记语言 CSS层叠样式表 JavaScript -JavaScript JavaScript即全球广域网，也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构。 更多>>

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

from http://livebyfaith117.tistory.com/34 by ccl(A) rewrite - 2021-09-30 16:27:11