-
[Javascript] 객체의 활용, 파일로 쪼개서 정리 정돈하기Web/Javascript 2020. 5. 16. 04:53
객체의 활용
1. 앞서 작성한 예제 코드
<script>
... 생략
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');
}
}
</script>
2. Body 변수에 객체 담기
<script>
var Body = {
}
function nightdayhandler(self){
...생략...
</script>
3. 객체에 setColor 프로퍼티 추가
<script>
...생략...
var Body : {
setColor = function(color) {
document.querySelector('body').style.color = color;}
}
4. 객체에 setBackgroundColor 프로퍼티 추가
<script>
var Body : {
setColor = function(color) {
document.querySelector('body').style.color = color;}
setBackgroundColor = function(color) {
document.querySelector('body').style.BackgroundColor = color;}
}
코드를 동작하면 오류 발생. 객체에서는 프로퍼티와 프로퍼티를 구분하기 위해 콤마를 사용함.
5. 프로퍼티 사이에 콤마(,) 추가
var Body : {
setColor = function(color) {
document.querySelector('body').style.color = color;},
setBackgroundColor = function(color) {
document.querySelector('body').style.BackgroundColor = color;}
}
6. LinksetColor()도 객체로 만들기
<script>
var Body : {
setColor = function(color) {
document.querySelector('body').style.color = color;},
setBackgroundColor = function(color) {
document.querySelector('body').style.BackgroundColor = color;}
}
var Links: {
setColor : function setColor(color){
var alist = document.querySelectorAll('a');
var i = 0;
while (i < alist.length){
alist[i].style.color= color;
i = i + 1;
}
}
}
지금까지 사용해온 document가 객체였고, querySelector()는 함수이며, 객체에 소속돼 있었기 때문에 메서드였음.
파일로 쪼개서 정리 정돈하기
정리 정돈 도구인 함수와 객체보다 더 큰 정리 정돈 도구. 서로 연관된 코드들을 파일로 묶어서 그루핑하는 것
1. color.js 파일 생성 후 스크립트 코드 붙여넣기
var Body = {
setColor : function(color) {
document.querySelector('Body').style.color = color;
},
setbackgroundColor : function(color) {
document.querySelector('body').style.backgroundColor = color;
},
titleColor : function(color){
document.querySelector('h1').style.color= color;
}
}
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;
}
}
}
function nightdayhandler(self) {
var target= document.querySelector('body');
if (self.value ==='야간 모드') {
Body.setbackgroundColor('#736D71');
Body.setColor('white');
Body.titleColor('yellow');
self.value='주간 모드';
Links.setColor('#BEF3E8');
}
else {
Body.setbackgroundColor('white');
Body.setColor('black');
Body.titleColor('purple');
self.value='야간 모드';
Links.setColor('gray');
}
}
2. 공통 코드를 지우고 color.js 파일 포함시키기
<head>
<title>김방울 - 방울위키</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css" />
<script src ="color.js"></script>
작성한 코드를 재사용하게 되는 것. color.js 파일을 수정하면 모든 웹 페이지에 동시에 변화가 반영.
www.evernote.com/l/Alcmnsb33dJL_7GnaOU0aqqraXQ8QpN4_oA/
객체의 활용, 파일로 쪼개서 정리 정돈하기
객체의 활용 1. 앞서 작성한 예제 코드
'Web > Javascript' 카테고리의 다른 글
[Javascript] 변수, 함수 기초 (0) 2020.05.19 [Javascript] 라이브러리와 프레임워크, 제이쿼리, UI, API (0) 2020.05.16 [Javascript] 객체 예고 (0) 2020.05.16 [Javascript] 함수 (0) 2020.05.16 [Javascript] 배열과 반복문 (0) 2020.05.16