자바스크립트를 통해 할 수 있는 일 가운데 하나는 웹 브라우저를 제어하는 것이다.
첫 번째, style 에 들어가는 CSS문을 알 필요가 있고
두 번째, 스타일 속성을 주기 위해 그 속성을 가지고 있는 태그를 웹 브라우저에게 알리는 방법을 자바스크립트 문법으로 알아야 한다.
제어할 태그 선택하기
글쓴이는 만들고자 하는 웹 페이지에서 누르는 버튼에 따라 다르게 동작하도록 하고 싶다.
먼저 <input>태그로 버튼을 추가한다.
... 생략...
<input type="button" value="night">
<input type="button" value="day">
...생략...
이 버튼을 클릭했을 때 이벤트가 필요하다.
따라서 onclick 속성을 추가한다.
...생략...
<input type="button" value="night" onclick="">
<input type="button" value="day" onclick="">
...생략...
이 버튼을 클릭했을 때 <body>태그에 style 속성을 동적으로, 프로그래밍적으로, 상호작용에 의해 넣으려고 한다.
그러기 위해서는 자바스크립트 문법에 따라 웹 브라우저에게 <body>태그를 선택하게 해야한다.
추천 검색어 ex) 'javascript select tag by css selector'
→ document.querySelector('body')
(여기서 괄호안에는 원하는 태그를 넣으면 된다. 클래스명이 'apple'이라면 document.querySelector(".apple")이라고 하면 되고, id값이 'target'이라면 document.querySelector('#target')이라 지정하면 된다.)
이제 선택했으니 <body>태그에 스타일 속성을 어떻게 자바스크립트로 넣을 수 있는지 알아봐야 한다.
추천 검색어 ex) 'javascript element style'
이를 참고해 document.querySelector('body').style 이라고 작성한다.
추천 검색어 ex) 'javascript style background-color'
이를 참고해 document.querySelector('body').style.backgroundColor = 'black'; 이라고 작성한다.
...생략...
<input type="button" value="night" onclick="
document.querySelector('body').style.backgroundColor='black';
document.querySelector('body').style.color='white';">
<input type="button" value="day" onclick="
document.querySelector('body').style.backgroundColor='white';
document.querySelector('body').style.color='black';">
...생략...
최종적으로 작성한 코드이다.
이렇게 사용자와 상호작용해서 HTML과 CSS를 동적으로 변경하는 방법을 알게 되었다.
조건문 활용
...생략...
<input id="night_day" type="button" value="night" onclick="
if (document.querySelector('#night_day').value === 'night'){
document.querySelector('body').style.backgroundColor='black';
document.querySelector('body').style.color='white';
document.querySelector('#night_day').value = 'day';
} else {
document.querySelector('body').style.backgroundColor='white';
document.querySelector('body').style.color='black';
document.querySelector('#night_day').value = 'night';}
">
...생략...
if else를 활용한 코드이다.
참고) === 는 좌항과 우항을 비교하는 비교연산자. 결과로 TRUE와 FALSE 가 나온다.
[if] id가 night_day인 태그의 value가 night 라면 배경색을 black로, 글자색을 흰색으로, value 값을 day로 바꾼다.
[else] 그것이 아니라면(value가 day라면) 배경색을 white로, 글자색을 검정색으로, value 값을 night로 바꾼다.
중복의 제거를 위한 리팩터링
코드의 가독성을 높이고, 유지보수를 편리하게 만들고, 중복된 코드를 줄이는 방향으로 코드를 개선하는 작업을 리팩터링(refactoring)이라 한다.
...생략...
<input type="button" value="night" onclick="
var target = document.querySelector('body');
if (this.value === 'night'){
target.style.backgroundColor='black';
target.style.color='white';
this.value = 'day';
} else {
target.style.backgroundColor='white';
target.style.color='black';
this.value = 'night';}
">
...생략...
앞서 작성했던 코드의 리팩터링 후 모습이다.
input 태그 안의 id를 삭제한 후
document.querySelector('#night_day')를 this (onclick과 같은 이벤트 안에서 실행되는 코드에서 현재 코드가 속해 있는 태그를 가리키도록 약속돼있는 특수한 키워드)로,
반복되는 body 태그 document.querySelector('body')를 target 으로 변경하였다.
배열과 반복문의 활용
야간 모드일 때는 링크들이 밝게 표시되고, 주간 모드일 때는 다소 어두운 계열로 링크가 표시되게 완성해 보자.
...생략...
<input type="button" value="night" onclick="
var target = document.querySelector('body');
if (this.value === 'night'){
target.style.backgroundColor='black';
target.style.color='white';
this.value = 'day';
var alist = document.querySelectorAll('a');
var i = 0;
while(i < alist.length){
alist[i].style.color = 'powderblue';
i = i + 1;
}
} else {
target.style.backgroundColor='white';
target.style.color='black';
this.value = 'night';
var alist = document.querySelectorAll('a');
var i = 0;
while(i < alist.length){
alist[i].style.color = 'blue';
i = i + 1;
}
}
">
...생략...
위 코드는 <a>태그에 있는 글자들을 찾아(var alist = document.querySelectorAll('a');) 배열과 반복문을 활용해서 글씨를 바꿔준(alist[i].style.color = 'blue';) 예시다.
함수의 활용
동작하는 내용은 똑같지만 코드를 효율적으로 만드는 것을 리팩터링이라고 했다.
...생략...
<head>
...생략...
<script>
function nightDayHandler(self){
var target = document.querySelector('body');
if (self.value === 'night'){
target.style.backgroundColor='black';
target.style.color='white';
self.value = 'day';
var alist = document.querySelectorAll('a');
var i = 0;
while(i < alist.length){
alist[i].style.color = 'powderblue';
i = i + 1;
}
} else {
target.style.backgroundColor='white';
target.style.color='black';
self.value = 'night';
var alist = document.querySelectorAll('a');
var i = 0;
while(i < alist.length){
alist[i].style.color = 'blue';
i = i + 1;
}
}
}
</script>
</head>
<body>
...생략...
<input type="button" value="night" onclick="nightDayHandler(this)">
...생략...
함수를 만들어 <head>태그 안에 넣어줬다.
원래 onclick 이벤트 안에서 this는 onclick 이벤트가 소속되어 있는 input 태그를 가리키도록 약속되어 있는데,
독립되어 있는 함수를 만들면 원래의 this는 더 이상 input 버튼이 아니고, 전역객체(윈도우)를 가리키게 된다.
따라서 함수는 매개변수를 self로 받고, 함수를 실행할 때는 this를 매개변수로 넣어 input 버튼을 가리키도록 했다.
이렇게 함으로써 코드의 효율성이 크게 증가한다.
객체의 활용
서로 연관된 함수와 서로 연관된 변수를 같은 이름으로 그룹핑하기 위한 도구를 객체라고 생각하면 쉽다.
객체에 소속된 함수를 메서드라고 하며, 객체에 소속된 변수를 프로퍼티라 한다.
...생략...
<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(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 === '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>
</head>
...생략...
주의할 점 : 객체에서는 프로퍼티와 프로퍼티를 구분하기 위해 콤마를 사용해야 한다.
파일로 쪼개서 정리 정돈 하기
<script>태그에 있는 내용들을 다른 웹 페이지에서도 구현하고 싶다.
따라서 <script>태그 안에 있는 내용을 따로 color.js라는 자바스크립트 파일로 저장한 뒤, 웹 페이지에서 링크를 불러올 거다.
↓color.js 코드
var Body ={
setColor: function(color){
document.querySelector('body').style.color = color;
},
setbackgroundColor: function(color){
document.querySelector('body').style.backgroundColor = 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 === '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="color.js"></script>
...생략...
</head>
이렇게 작성한 코드를 재사용하게 되는 것이며, color.js 파일을 수정하면 모든 웹 페이지에 동시에 변화가 반영이 된다.
가독성이 좋아지고, 코드가 훨씬 명확해지며, 코드의 의미를 파일의 이름을 통해 확인할 수 있게 된다.
그리고 이렇게 하면 좋은 점이 또 있다.
웹 페이지를 로드하면서 웹 페이지에 접속해서 자바스크립트 파일도 다운로드 해야하므로 2번 접속해야 한다. 웹 서버 입장에서는 나쁜 일이다. 그럼에도 이렇게 하는 게 훨씬 더 효율적이다. 왜냐하면 캐시 때문이다.
캐시는 '저장한다'는 의미인데, 한 번 웹 페이지에서 다운로드된 파일은 웹 브라우저가 보통 컴퓨터에 저장해놓는다. 따라서 다음에 접속할 때 저장된 파일을 읽어서 네트워크를 통하지 않게 한다. 서버 입장에서 훨씬 더 비용을 절감할 수 있고, 사용자 입장에서도 네트워크 트래픽을 절감할 수 있으며, 훨씬 더 빠르게 웹 페이지를 화면에 표시할 수 있다는 효과가 생기기 때문에 이렇게 파일로 쪼개는 것이 좋은 방법이다.
위 글은 「생활코딩! HTML+ CSS + 자바스크립트」의 내용을 참고하여 작성한 글입니다.
