🔑 코인 투자 추천 링크 🔑
자바스크립트 강의 목차
3. 자바스크립트를 크롬브라우저 콘솔에서 작성하고 실행해보기
18. 객체란 무엇인가?(객체 생성, 추가, 추출방법)
프로그래밍언어중에서 자바스크립트는 쉬운편에 속하지만 그 개념은 다른 프로그래밍 언어랑 크게 다르진 않은거 같습니다. 지난시간에 배운 함수, 그리고 이번에 배울 객체까지 하게 되면 기본적인 프로그래밍언어에서 다루는 대부분의 개념은 다루었다고 볼 수 있습니다. 물론 이 외에도 더 많은 개념들이 있긴하지만..이정도만 알아도 기본적인 프로그래밍은 가능한것 같아요.
이번시간에는 지난번 작성된 예제를 함수로 바꾸고 그걸 객체로 바꾸는 과정을 통해서 객체가 무엇인지 개념을 파악하는 시간을 갖도록 하겠습니다.
일단 기존에 작성된 코드중에서 중복된 내용은 함수로 독립시키는 작업을 먼저 해보겠습니다.
먼저, Day 클릭시 타이틀의 문자를 powderblue로 바꾸는 부분을 아래와 같이 함수로 뺐습니다.
function LinksSetColor(color){
var alist=document.querySelectorAll('a');
var i = 0;
while(i < alist.length){
alist[i].style.color = color;
i = i + 1;
}그리고 nightDayHandler에 LinksSetColor('powderblue'), LinksSetColor('blue')요렇게 바꾸었어요.
이번에는 body 칼러를 바꿔주는 부분을 함수로 만들어 보겠습니다.
아래와 같이 만들었고,
function BodySetColor(color){
document.querySelector('body').style.color = color;
}nightDayHandler함수에는 아래와 같이 적용했습니다.
이번에는 배경색깔을 바꿔주는걸 함수로 만들었습니다.
function BodySetBackgroundColor(color){
document.querySelector('body').style.backgroundColor = color;
}그리고 이렇게 적용했습니다.
이제 nightDayHandler의 함수를 다 정리했네요!!!
자, 이제 본론으로 들어가서, 이렇게 작성된 함수를 어떻게 객체로 바꾸는지 보여드리겠습니다.
함수를 객체로 바꾸는건 수업 이후에 적용하도록 하고,
이번시간에는 함수를 객체로 바꾼 이후에 해당하는 객체를 어떻게 사용하는지에 대해서만 적용해보겠습니다.
위와 같이 객체를 사용합니다. 조금 더 직관적이고 구분이 잘 되죠?
컴퓨터에서 사용하는 디렉토리(저장장치)처럼 잘 정리된 느낌이 들죠?
그리고 우리가 기존에 사용했던 document.querySelector()같은것을 보니 뭔가 비슷하네요?
네 이 모든게 객체로 만들어진 겁니다.
그럼 객체에 대해서 간단히 살펴봤고 왜 써야하는지를 봤으니 다음시간에는 객체의 기본사용법과 적용방법에 대해서 배우도록 하겠습니다.
댓글