조건문 활용
조건문은 if의 ( ) 안에 true or false 값이 오면 상황에 따라 실행되는 코드가
달라지는 걸 알게 되었다. 이러한 사용 방법과 형식에 대해 알게 되었으니
사용해보자.
IF
지난번엔 버튼 1과 2를 만들어서 각각의 버튼을 클릭하였을 때
웹페이지의 배경색이 바뀌도록 만들어 보았다.
이번엔 버튼 1개만으로 배경색을 변경할 수 있게 해 보았다.
좋은 예시로 들 수 있는 건 주간 모드와 야간모드를 설정하는 버튼을 만들어보는 것이다.
<body>
<input type="button" value="night" onclick="
document.querySelector('body').style.backgroundColor = 'black';
document.querySelector('body').style.color = 'white';
">
</body>위와 같이 만들게 되면 웹브라우저에 night라는 버튼이 생길 것이다.
눌렀을 때 배경색은 검정으로 변하고 텍스트가 있다면 하얀색으로 변경될 것이다.
그럼 다시 주간 모드로 바꿔야 할 텐데 그러면 버튼을 하나 더 만들어야 할 것이다. 하지만
if문(조건문)을 사용하면 하나의 버튼을 사용해서 변하게 할 수 있다.
<body>
<input type="button" value="night" 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';
}
">
</body>이와 같이 조건문을 사용하여 코드를 입력하게 되면 하나의 버튼으로 서로 상반되는 효과를 주는 버튼
즉 토글 버튼을 만들 수 있다.
하지만 저 코드를 사용하려면 조건문에 true 나 false값이 와야 실행이 된다.
그러기 위해선 저 버튼의 value값이 무엇인지 알아야 한다.
value값을 확인하는 방법은 콘솔을 사용하여 확인하는 방법이 있다.
또 위 코드의 input 태그에 id 값을 부여하여 콘솔 창에
document.querySelector('#toggle'). value 이처럼 입력하게 되면
우리가 만들었던 버튼의 value 값을 가져오게 된다.
저 코드가 value값을 가져온다는 걸 알게 됐으니 조건문에 적용해보자
<body>
<input type="button" value="night" onclick="
if(document.querySelector('#toggle').value === 'night'){
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';
}
">
</body>다음과 같이 조건문에 적용하여 비교 연산자를 통해 버튼의 값이 같으면 true 다르면 false를 인식하여
상황에 맞는 코드를 실행해 줄 것이다.
하지만 저 코드만으로는 실행이 안될 것이다. 버튼의 value가 night로 고정돼 있기 때문에 else문의 코드는
실행이 되지 않는다.
그럼 다음과 같이 적용해보자!
<input id="toggle" type="button" value="night" onclick="
if(document.querySelector('#toggle').value === 'night'){
document.querySelector('body').style.backgroundColor = 'black';
document.querySelector('body').style.color = 'white';
document.querySelector('#toggle').value = 'day';
} else {
document.querySelector('body').style.backgroundColor = 'white';
document.querySelector('body').style.color = 'black';
document.querySelector('#toggle').value = 'night';
}
">document.querySelector('#toggle'). value코드에 value값을 부여하게 되므로
버튼의 value값이 상황에 따라 바뀌게 되고 그에 따른 boolean 값으로
조건문을 실행하여 작동할 수 있게 한다.
'TIL > Javascript' 카테고리의 다른 글
| /JavaScript/배열 (0) | 2021.12.26 |
|---|---|
| /JavaScript/리팩토링 (0) | 2021.12.25 |
| /JavaScript/조건문 형식 (0) | 2021.12.23 |
| /JavaScript/비교 연산자,boolean (0) | 2021.12.22 |
| /JavaScript/태그 제어 (0) | 2021.12.21 |
