// 링크 색상 변경 함수
function setColor(color){
let alist = document.querySelectorAll('a');
let i = 0;
while(i < alist.length) {
alist[i].style.color = color;
i = i + 1;
}
}
// body 글씨 색상 변경 함수
function BodySetColor(color){
document.querySelector('body').style.color = color;
}
// body 배경색 변경 함수
function BodySetBackgroundColor((color){
document.querySelector('body').style.backgroundColor = color;
}
document.querySelector('body');
document
가 바로 객체이고, querySelector
가 객체에 속해있는 함수이다.객체 문법
let coworkers = {
"programmer" : "egoing",
"designer" : "leezche"
}
객체 사용
coworkers.programmer
coworkers["programmer"] // 이름에 공백이 있을 때
//결과
// 'egoing'
// 'egoing'
coworkers
라는 객체 안에서 programmer
이라는 이름을 가진 값을 가져와서 출력한다.객체 추가
coworkers.bookkeeper = "duru";
coworkers["bookkeeper"] = "duru"; // 이름에 공백이 있을 때
//결과
//coworkers {programmer: 'egoing', designer: 'leezche', bookkeeper: 'duru'}
coworkers
라는 객체 안에 bookkeeper
라는 이름으로 duru
값을 넣어준 것이다.for
문(반복문)을 사용했고, 객체에서는 for in
이라는 것을 사용한다.객체 이름 출력
let coworkers = {
"programmer": "egoing",
"designer": "leezche"
}
for(let key in coworkers){
console.log(key);
}
//결과
// programmer
// designer
객체 이름에 해당하는 값 출력
let coworkers = {
"programmer": "egoing",
"designer": "leezche"
}
for(let key in coworkers){
console.log(coworkers[key]);
}
//결과
// egoing
// leezche
메소드 추가
let coworkers = {
"programmer": "egoing",
"designer": "leezche"
}
coworkers.showAll = () =>{
for(let key in coworkers){
console.log(key + ':' + coworkers[key]);
}
}
//결과
//programmer:egoing
//designer:leezche
coworkers
라는 변수 이름이 바뀌면, 함수를 수정해야하기 때문에 좋은 방법은 아니다.this
를 사용한다.this
는 메소드가 쓰인 객체를 가리킨다.this를 사용한 메소드 추가
let coworkers = {
"programmer": "egoing",
"designer": "leezche"
}
coworkers.showAll = () => {
for (var key in this) {
document.write(key + ' : ' + this[key] + '<br>');
}
}
//결과
//programmer:egoing
//designer:leezche
showAll
이고, 객체에 해당하는 변수인 프로퍼티는 coworkers.programmer
에서 programmer
이 해당된다.객체 활용 전
// 링크 색상 변경 함수
function setColor(color){
let alist = document.querySelectorAll('a');
let i = 0;
while(i < alist.length) {
alist[i].style.color = color;
i = i + 1;
}
}
// body 글씨 색상 변경 함수
function BodySetColor(color){
document.querySelector('body').style.color = color;
}
// body 배경색 변경 함수
function BodySetBackgroundColor((color){
document.querySelector('body').style.backgroundColor = color;
}
객체 활용
// Body 객체
let Body = {
setColor : (color) => {
document.querySelector('body').style.color = color;
},
setBackgroundColor : (color) => {
document.querySelector('body').style.backgroundColor = color;
}
}
// Links 객체
let Links = {
setColor : (color) => {
let alist = document.querySelectorAll('a');
let i = 0;
while(i < alist.length) {
alist[i].style.color = color;
i = i + 1;
}
}
}
Body
와 Links
에 모두 setColor
라는 함수(메소드)가 존재하지만, 서로 다른 객체이기 때문에 이름이 동일해도 상관없다.Body.setColor('black');
Links.setColor('black');