JavaScript 공부는 '생활코딩! HTML+CSS+자바스크립트' 책을 보면서 공부하고 있다. 다음 글의 예제들도 모두 책에 있는 내용을 바탕으로 작성한 글이다.
그리고 JavaScript 실습을 하면서 사용한 예제는 밑의 링크에서 만들어 놓은 HTML 파일을 바탕으로 사용했다.
'night', 'day'라는 버튼을 만들어서 'night' 버튼을 클릭하면 자바스크립트를 이용해서 웹 페잊디 배경을 검정화면으로 만들어줄거고 'day' 버튼을 누르면 배경을 다시 하얀화면으로 만들어주는 실습을 할 예정이다.
'night' 버튼과 'day' 버튼 만들기
3.html ( JavaScript 관련 페이지 )에 자바스크립트를 구현할 예정이다.
... 생략 ...
<body>
<h1><a href="index.html">WEB</a></h1>
<input type="button" value="night">
<input type="button" value="day">
... 생략 ...
위의 버튼을 클릭했을 때의 이벤트가 필요하다. onclick 속성을 추가한다.
버튼을 클릭하면 배경색이 바뀌도록 완성
... 생략 ...
<body>
<h1><a href="index.html">WEB</a></h1>
<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';">
... 생략 ...- <body> 태그를 선택하는 선택자를 이용해서 스타일 속성을 바꿀거다. <body> 태그에 스타일 속성을 변경시키기 위해 <body> 태그를 선택해줘야 한다.
- <body> 태그의 선택은 document.querySelector를 이용하면 되고 괄호안에 'body'를 추가해주면 된다.
- 배경색 바꾸기 위해서는 '.style.backgroundColor'를 이용하면 되고 글자색은 '.style.color'를 이용하면 된다.
버튼 하나로 만들기
'night' 버튼과 'day' 버튼을 하나로 합쳐서 기능을 구현할 예정이다.
... 생략 ...
<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 문을 이용해서 버튼을 하나로 만들었다.
- 버튼안의 글자가 'night'라 써있는 상태에서 클릭하면 배경이 검정화면으로 바뀌고 글자색은 하얀색, 버튼의 글씨는 'day'로 바뀌게 된다.
- 반대로 버튼안의 글자가 'day'라 써있는 상태에서 클릭하면 배경이 하얀화면으로 바뀌고 글자색은 검정색, 버튼의 글씨는 다시 'night'로 바뀌게 된다.
위의 코드를 살펴보면 'document.querySelector('body')' 코드가 중복이 되면서 코드가 복잡해 보이는 것을 확인할 수 있다. 이때 'target'이라는 변수에 <body> 태그를 할당해서 'target' 변수를 필요할 때마다 불러쓰면 코드는 훨씬 간결해질 것이다.
... 생략 ...
<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';
document.querySelector('#night_day').value = 'day';
}
else {
target.style.backgroundColor = 'white';
target.style.color = 'black';
document.querySelector('#night_day').value = 'night';
}
">
... 생략 ...그리고 위의 코드에서 'document.querySelector('#night_day')' 같은 경우에는 버튼 자기 자신을 뜻하는 코드이기 때문에 'this'로 바꿔줄 수 있다.
... 생략 ...
<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';
}
else {
target.style.backgroundColor = 'white';
target.style.color = 'black';
this.value = 'night';
}
">
... 생략 ...'WEB > JavaScript' 카테고리의 다른 글
| [JavaScript] HTML 예제 파일 자바스크립트 적용_(2) - 짱우의 코딩일기 - 티스토리 (0) | 2020.01.20 |
|---|
