조건문
2023. 1. 12. 12:03
자바스크립트에서의 조건문은 아래 코드와 같이 사용할 수 있다.
<script>
if(true or false) {
...
}
else {
...
}
</script>
비교연산자의 경우 다른 프로그래밍 언어들과는 다르게 '='기호를 세번 사용한다.
<script>
if(a === 3) {
...
}
else {
...
}
</script>
조건문을 사용해서 토글을 만들어보는 예제를 확인해보자.
버튼을 하나 만들어서 기능을 나눈다.
night 상태일 때 클릭하면 배경이 검은색으로, 폰트색은 하얀색으로 변경하고 버튼의 이름을 day로 변경한다.
day 상태일 때 클릭하면 배경이 하얀색으로, 폰트색은 검은색으로 변경하고 버튼의 이름을 night로 변경한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>if-else</title>
</head>
<body>
<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'
}
">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae et delectus, voluptates facere eaque architecto consequatur perferendis. Quas exercitationem, iusto voluptatem delectus minima quibusdam rem quis. Magnam error dolore inventore?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae et delectus, voluptates facere eaque architecto consequatur perferendis. Quas exercitationem, iusto voluptatem delectus minima quibusdam rem quis. Magnam error dolore inventore?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae et delectus, voluptates facere eaque architecto consequatur perferendis. Quas exercitationem, iusto voluptatem delectus minima quibusdam rem quis. Magnam error dolore inventore?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae et delectus, voluptates facere eaque architecto consequatur perferendis. Quas exercitationem, iusto voluptatem delectus minima quibusdam rem quis. Magnam error dolore inventore?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae et delectus, voluptates facere eaque architecto consequatur perferendis. Quas exercitationem, iusto voluptatem delectus minima quibusdam rem quis. Magnam error dolore inventore?
</p>
</body>
</html>
부스트코스의 강의 내용을 정리한 포스트입니다.
https://www.boostcourse.org/cs124
자바스크립트의 시작
부스트코스 무료 강의
www.boostcourse.org
'공부 > JavaScript' 카테고리의 다른 글
| 함수 (0) | 2023.01.26 |
|---|---|
| 반복문 (0) | 2023.01.12 |
| this와 리팩토링 (0) | 2023.01.12 |
| querySelector() (0) | 2023.01.11 |
| HTML에서 JavaScript 사용하기 (0) | 2023.01.10 |
