728x90
반응형
if와 else 구문
쉽다. 이미 안다. 그래서 코드만 간단히 적어보겠다
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1> Conditional Statesments </h1>
<script>
document.write("1<br>");
document.write("2<br>");
document.write("3<br>");
document.write("4<br>");
</script>
<h2>IF-true</h2>
<script>
document.write("1<br>");
if(true){
document.write("2<br>");
} else{
document.write("3<br>");
}
document.write("4<br>");
</script>
<h2>IF-false</h2>
<script>
document.write("1<br>");
if(false){
document.write("2<br>");
} else{
document.write("3<br>");
}
document.write("4<br>");
</script>
</body>
</html>처음 if true 조건문에서는 바로 뒤에 나온 .write("2";)가 true 이기 때문에 else인 3이 출력되지 않고,
다음 if false 조건문에서는 뒤에 나온 .write("2";)가 false 이기 때문에 else인 3이 출력되어 나온다.
음...
알고 있다.
그래서 이걸 실전에 적용해보면 어떻게 나오는지 한 번 봐야지
아래의 코드는 저번에 만들어 뒀던 야간모드 버튼을 하나로 퉁친 코드이다.
<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 = '#a9a9a9';
document.querySelector('body').style.color = 'black';
document.querySelector('#night_day').value = 'night';
}
">버튼 아이디 자체가 night_day 이기때문에 주야간모드를 넘나드는 버튼이라고 생각하면 된다.
버튼의 value가 night 일때는 바탕을 검정으로, 글자색을 하얀색으로 바꿔서 야간모드를 완성한다.
또 주간모드로 되돌리는 기능을 포함시켜야하기 때문에 value를 day로 바꿔준다.
그럼 이제 else로 넘어가서 night_day 버튼의 value가 day가 되었을때 다시 되돌려주는 코드를 실행한다.
또 value는 다시 night으로 바꿔준다. 그러면 주야간모드가 계속 바뀔 수 있는 버튼이 완성되는 것이다.
조건문은 여기까지?
728x90
반응형
'Javascript' 카테고리의 다른 글
| 반복문 (0) | 2020.12.07 |
|---|---|
| 반복문을 위한 배열 (array) 배우기 (0) | 2020.12.07 |
| Refactoring (0) | 2020.12.07 |
| 비교연산자와 불리언 (0) | 2020.12.03 |
| Javascript (0) | 2020.12.03 |