객체란
코드가 많아지면 함수를 써서 정리하는데, 그 함수가 많아지면 객체를 활용해서 정리
예시 : document.querySelector
document ➝ 객체
querySelector ➝ Method
기본
var coworkers = {
"programmer" : "marmot",
"designer" : "gooma"
};
document.write("programmer : "+ coworkers.programmer+"<br>");
document.write("designer : "+ coworkers.designer+"<br>");
coworkers.bookkeeper = 'ada';
document.write("bookkeeper : "+ coworkers.bookkeeper+"<br>");
/* 위 아래 같은 효과, 아래는 띄어쓰기가 필요해서 대괄호 사용*/
coworkers["data scientist"] = 'chris';
document.write("data scientist : "+ coworkers["data scientist"]+"<br>");
결과 :
programmer : marmot
designer : gooma
bookkeeper : ada
data scientist : chris
위 코드에서 document는 Object, programmer, marmot 등은 Property
반복(Iterate)
for (var key in coworkers) {
/*document.write(key+'<br>') // programmer, designer, bookke... */
/*document.write(coworkers[key]+'<br>') // marmot, gooma, ada, chris*/
document.write(key + ' : ' + coworkers[key]+'<br>') // 위 두개 다 출력
}
결과 :
programmer : marmot
designer : gooma
bookkeeper : ada
data scientist : chris
document.write(key) 실행 시 programmer, designer, bookkeeper, data scientist 출력
document.write(coworkers[key]) 실행 시 marmot, gooma, ada, chris 출력
두 코드를 응용해서 위와 같이 처음 기분 부분에서 적용한 코드와 똑같은 결과가 나오게 함
활용
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 === 'night') {
BodysetBackgroundColor('black');
BodysetColor('white');
self.value='day';
LinkssetColor('powderblue');
}
else {
BodysetBackgroundColor('white');
BodysetColor('black');
self.value='night';
LinkssetColor('blue');
}
}
위 코드의 LinkssetColor, BodysetColor 등을 하나의 객체로 묶어서 아래처럼 하나의 객체로 묶어서 정리 가능
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');
}
}
파일로 정리하기
<head>
<script src="colors.js"></script>
</head>
위에서 객체를 이용하여 정리한 코드를 문서들에 적용할때 수많은 파일이 있다면 colors.js(예시) 같이 자바스크립트 파일을 만들어서 그안에코드를 정리하고 위 코드로 연결시켜준다면 유지보수에 도움이 됨.
'JavaScript' 카테고리의 다른 글
| [JavaScript] Booleans (0) | 2023.11.07 |
|---|---|
| [JavaScript] Variables(변수 : var, let, const) (0) | 2023.11.05 |
| [JavaScript] 함수(Function) (0) | 2023.11.03 |
| JavaScript 배열, 반복문의 활용 (1) | 2023.11.02 |