반응형
제어할 태그 선택하기
1) <body> 선택
document.querySelector('body')
2) 자바스크립트 style.
(body 태그에 적을 때는 <body style="background-color:black;">)
document.querySelector('body').style.backgroundColor = "black";
비교 연산자와 Boolean 데이터 타입
1) === : 둘이 같나 비교
1 === 1 // output : True
2) < ; less than (<)
1 < 2 // 1 < 2 와 같은 의미
조건문의 활용
<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';
}
">
: value가 'night'일 때 클릭하면,
id가 'night_day'인 value를 'day'로 바꿈
리팩토링 (refactoring)
; 코드의 효율성 좋고, 읽기 좋게 개선
1) this 이용해 코드 간단히 작성 가능
<input id="night_day" type="button" value="night" onclick="
if (this.value === 'night') {
document.querySelector('body').style.backgroundColor = 'black';
document.querySelector('body').style.color = 'white'
this.value ='day';
}
">
2) target 변수 이용해 중복 코드 처리 가능
<input id="night_day" 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';
}
">
생활코딩 WEB2 JavaScript
반응형
'생활코딩 > JavaScript' 카테고리의 다른 글
| 200807 6일차 정리 - 객체, 메소드, 프로퍼티 (0) | 2020.08.07 |
|---|---|
| 200806 5일차 정리 - 함수 (0) | 2020.08.06 |
| 200805 4일차 정리 - 배열 (0) | 2020.08.05 |
| 200803 2일차 정리 (0) | 2020.08.03 |
| 200802 1일차 정리 (0) | 2020.08.02 |
