자바스크립트의 조건문은 if-else를 통해
자신이 원하는 값을 선택해서 출력할 수 있다.
아래와 같은 코드가 있다고 가정하자.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>조건문</h1>
<script>
document.write("1<br>");
document.write("2<br>");
document.write("3<br>");
document.write("4<br>");
</script>
</body>
</html>코드에 입력한 순서인 1 2 3 4가 줄바꿈을 해서 출력이 될 것이다.
만약, 위처럼 모든 숫자가 출력되는 것이 아니라
숫자들이 선택적으로 출력이 되게 하고 싶다면
조건문을 사용하면 된다.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>If-else문</h1>
<script>
document.write("1<br>");
if(true){
document.write("2<br>");
}else{
document.write("3<br>");
}
document.write("4<br>");
</script>
</body>
</html>앞에 보여준 코드와 큰 차이는 없지만
if문과 else문이 들어간 것을 볼 수 있다.
if옆의 괄호안에 값이 참이면 if문으로 감싼 코드가 출력이 되고
if옆의 괄호안에 값이 거짓이면 if문을 건너뛰고 else문을 출력하게 된다.
앞에서 배운 조건문을 통해 이전에 만든 주/야간 모드 설정을
조금 더 단순하게 만들 수 있다.
조건문을 통해
주간/야간 버튼을 아래처럼 따로 만들지 않고 하나의 버튼으로 만들어
만약, 주간일때는 야간으로
야간일때는 주간으로 바꿔주는 버튼을 만들 수 있다
우선 버튼을 하나 만들고
<input id = "day&night" type="button" value="야간모드로 변경">버튼을 눌렀을 때
만약,
배경색이 흰색이라면 검은색으로 바꾸고
배경색이 검은색이라면 흰색으로 바꿔주기 위해
if-else문을 사용한다면 이런 식으로 코드를 짜야 할 것이다.
<input id = "day_night" type="button" value="야간모드로 변경" onclick"
if(현재 배경색이 흰색){
document.querySelector('body').style.backgroundColor='black';
document.querySelector('body').style.color='white';
} else {
document.querySelector('body').style.backgroundColor='white';
document.querySelector('body').style.color='black';
}
">현재 배경색이 흰색이라면 if문을 출력하고
그렇지 않으면 else문을 출력하는 것이다.
현재 배경색이 흰색이라는 것을 자바스크립트 표현으로는
if (document.querySelector('#day_night').value === '야간모드로 변경')로 표현할 수 있다.
'만약, id값이 #day&night 이면서 value값이 야간모드로 변경이라면 현재 코드를 실행하여라' 라는 의미이다.
<input id = "day_night" type="button" value="야간모드로 변경" onclick ="
if(document.querySelector('#day_night').value === '야간모드로 변경'){
document.querySelector('body').style.backgroundColor = 'black';
document.querySelector('body').style.color = 'white';
document.querySelector('#day_night').value = '주간모드로 변경';
} else {
document.querySelector('body').style.backgroundColor='white';
document.querySelector('body').style.color='black';
document.querySelector('#day_night').value = '야간모드로 변경';
}
">결과를 보면 잘 동작하는 것을 볼 수 있다.
[참고]
코드를 조금 더 간결하게 만들기 위해서
id값을 지우고 document.querySelector('#day_night').value 대신에
this.value를 사용해도 결과는 똑같다.
<input type="button" value="야간모드로 변경" onclick ="
if(this.value === '야간모드로 변경'){
document.querySelector('body').style.backgroundColor = 'black';
document.querySelector('body').style.color = 'white';
this.value = '주간모드로 변경';
} else {
document.querySelector('body').style.backgroundColor='white';
document.querySelector('body').style.color='black';
this.value = '야간모드로 변경';
}">또한 여기서 더 간결하게 만든다면4번 중복되는 document.querySelector('body') 이것을 변수로 선언해 놓고간편하게 사용하는 것이다.
<input type="button" value="야간모드로 변경" onclick ="
var target = document.querySelector('body');
if(this.value === '야간모드로 변경'){
target.style.backgroundColor = 'black';
target.style.color = 'white';
this.value = '주간모드로 변경';
} else {
target.style.backgroundColor='white';
target.style.color='black';
this.value = '야간모드로 변경';
}">참고한 생활코딩 자료
https://opentutorials.org/course/3085/18878
조건문의 활용 - 생활코딩
조건문의 활용 소스코드 변경사항
opentutorials.org
'WEB' 카테고리의 다른 글
| [WEB/JS] 함수(function) 이해하기 (0) | 2022.07.12 |
|---|---|
| [WEB/JS] 배열/반복문(for문, while문) (0) | 2022.07.11 |
| [WEB/JS] 웹페이지 주/야간 모드 설정1 (0) | 2022.07.07 |
| [WEB/JS] 출력/이벤트 처리 (0) | 2022.07.06 |
| [WEB/CSS] 그리드(Grid) 사용하기 (0) | 2022.07.03 |
