JavaScript 공부는 '생활코딩! HTML+CSS+자바스크립트' 책을 보면서 공부하고 있다. 다음 글의 예제들도 모두 책에 있는 내용을 바탕으로 작성한 글이다.
그리고 JavaScript 실습을 하면서 사용한 예제는 밑의 링크에서 만들어 놓은 HTML 파일을 바탕으로 사용했다.
배열
var arr = ["arr0", "arr1"];다음과 같이 배열을 선언할 수 있다. JavaScript의 배열 역시 index는 0부터 시작한다.
배열 활용
배열을 이용해서 실습 예제에서 야간 모드로 화면이 전환되면 <a> 태그로 감싸져있는 글자색을 밝게, 주간 모드로 화면이 전환되면 어두운 색으로 만들 예정이다.
위와 같이 'querySelectorAll'을 이용하여 <a> 태그로 감싸져있는 값들을 모두 가져온다.
변수에 값들을 저장할 시에는 배열로 원하는 값을 가져올 수 있다.
배열과 반복문을 통해 실습 예제 코드를 추가해볼거다.
... 생략 ...
<input id="night_day" type="button" value="night" onclick="
var target = document.querySelector('body');
if (document.querySelector('#night_day').value == 'night') {
target.style.backgroundColor = 'black';
target.style.color = 'white';
this.value = 'day';
var list = document.querySelectorAll('a');
var i = 0;
while (i < list.length) {
list[i].style.color = 'powderblue';
i++;
}
}
else {
target.style.backgroundColor = 'white';
target.style.color = 'black';
this.value = 'night';
var list = document.querySelectorAll('a');
var i = 0;
while (i < list.length) {
list[i].style.color = 'blue';
i++;
}
}
">
... 생략 ...
야간모드로 바뀌니까 <a> 태그로 감싸져있는 글자색이 밝은색으로 변한걸 확인할 수 있다. 주간모드일때의 화면은 지금까지 했던 화면이랑 똑같기 때문에 생략한다.
함수
nightDayHandler() 함수를 만들고 <input> 버튼의 자바스크립트 코드 ㄴ엏기
... 생략 ...
<script>
function nightDayHandler(self) {
var target = document.querySelector('body');
if (document.querySelector('#night_day').value == 'night') {
target.style.backgroundColor = 'black';
target.style.color = 'white';
this.value = 'day';
var list = document.querySelectorAll('a');
var i = 0;
while (i < list.length) {
list[i].style.color = 'powderblue';
i++;
}
}
else {
target.style.backgroundColor = 'white';
target.style.color = 'black';
this.value = 'night';
var list = document.querySelectorAll('a');
var i = 0;
while (i < list.length) {
list[i].style.color = 'blue';
i++;
}
}
}
</script>
</head>
... 생략 ...함수 안에서 this 값이 input 버튼을 가리키도록 nightDayHandler() 함수가 실행될 때 this 값을 전달해준다. 그리고 script문 안에 있는 nightDayHandler 함수에 매개변수를 self로 만들어 준다.
script문을 위와 같이 head 사이에 넣고 코드를 작성했다. 그리고 button의 onclick 안에는 nightDayHandler 함수를 호출하도록 한다.
<input id="night_day" type="button" value="night" onclick="nightDayHandler();">위와 같이 코드를 구성하면 if문과 else문에 while문이 중복으로 들어가게 된다.
<a> 태그 안에 있는 글자색 바꿔주는 함수 만들기
<script>
function setColor(color) {
var list = document.querySelectorAll('a');
var i = 0;
while (i < list.length) {
list[i].style.color = color;
i++;
}
}
function nightDayHandler(self) {
var target = document.querySelector('body');
if (self.value == 'night') {
target.style.backgroundColor = 'black';
target.style.color = 'white';
self.value = 'day';
setColor('powderblue');
}
else {
target.style.backgroundColor = 'white';
target.style.color = 'black';
self.value = 'night';
setColor('blue');
}
}
</script>위와 같이 setColor 함수를 새로 만들어 매개변수에 색을 입력받고 <a> 태그로 감싸져있는 글자색이 바뀌게 만들면 코드가 더 간결해진 것을 확인할 수 있다. 하지만 여전히 <body> 태그의 배경색과 글자색을 바꿔주는 부분이 if문과 else문에 중복적으로 사용이 된다.
<body> 태그의 배경색과 글자색을 변경시키는 함수 만들기
<script>
function BodySetColor(backgroundColor, characterColor) {
document.querySelector('body').style.backgroundColor = backgroundColor;
document.querySelector('body').style.color = characterColor;
}
function LinkSetColor(color) {
var list = document.querySelectorAll('a');
var i = 0;
while (i < list.length) {
list[i].style.color = color;
i++;
}
}
function nightDayHandler(self) {
var target = document.querySelector('body');
if (self.value == 'night') {
BodySetColor('black', 'white');
self.value = 'day';
LinkSetColor('powderblue');
}
else {
BodySetColor('white', 'black');
self.value = 'night';
LinkSetColor('blue');
}
}
</script>
객체
객체는 객체에 관련있는 함수끼리 모아서 유지보수가 편하게 만들어주는 역할을 한다. 우선 객체를 만들기 앞서 'color.js'라는 파일을 만들어서 객체와 nightDayHandler 함수를 집어넣어 줄거다.
위와 같이 'color.js' 파일을 만들어 준다.
color.js 파일 생성 후 스크립트 코드 붙여넣기
var Body = {
setColor: function (backgroundColor, characterColor) {
document.querySelector('body').style.backgroundColor = backgroundColor;
document.querySelector('body').style.color = characterColor;
}
}
var Links = {
setColor: function (color) {
var list = document.querySelectorAll('a');
var i = 0;
while (i < list.length) {
list[i].style.color = color;
i++;
}
}
}
function nightDayHandler(self) {
var target = document.querySelector('body');
if (self.value == 'night') {
Body.setColor('black', 'white');
self.value = 'day';
Links.setColor('powderblue');
}
else {
Body.setColor('white', 'black');
self.value = 'night';
Links.setColor('blue');
}
}'color.js' 안의 코드는 위와 같이 구성해준다. 3.html에서 사용한 코드와 동일하지만 글자색을 바꿔주는 함수를 모두 객체화 시켰기 때문에 nightDayHandler 함수에서 색을 바꿔주는 함수를 호출할 때 객체를 통해서 함수를 호출해야 한다.
공통 코드를 지우고 color.js 파일 포함시키기
... 생략 ...
<head>
<title>JavaScript</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css"/>
<script src="color.js"></script>
</head>
... 생략 ...이 글을 마지막으로 html, css, JavaScript를 공부한 내용 정리를 마친다. 지금까지 했던 내용을 바탕으로 네이버 첫 화면을 만들어보려 한다. 책 설명이 정말 잘되어있긴 하지만 너무 기초적인 내용만 담겨져 있어서 네이버 화면을 만들 수 있을지는 모르겠지만... 도전!!
'WEB > JavaScript' 카테고리의 다른 글
| [JavaScript] HTML 예제 파일 자바스크립트 적용 (0) | 2020.01.19 |
|---|
