자바스크립트 if...else
예시
시간이 20보다 작으면 "Good day"를 출력합니다.
let hour = new Date().getHours();
if (hour < 20) {
document.getElementById("demo").innerHTML = "Good day";
}
"좋은 하루" 또는 "좋은 저녁" 출력:
let hour = new Date().getHours();
if (hour < 20) {
greeting = "Good day";
}
else {
greeting = "Good evening";
}
아래에 더 많은 예가 있습니다.
정의 및 사용
if/else 문은 지정된 조건이 true인 경우 코드 블록을 실행합니다. 조건이 거짓이면 다른 코드 블록을 실행할 수 있습니다.
if/else 문은 다른 조건에 따라 다른 작업을 수행하는 데 사용되는 JavaScript의 "조건부" 문의 일부입니다.
JavaScript에는 다음과 같은 조건문이 있습니다.
- 지정된 조건이 true인 경우 실행할 코드 블록을 지정 하려면 if 를 사용합니다.
- 동일한 조건이 false인 경우 else 를 사용 하여 실행할 코드 블록을 지정합니다.
- 첫 번째 조건이 false인 경우 테스트할 새 조건을 지정 하려면 else if 를 사용하십시오.
- 실행할 많은 코드 블록 중 하나를 선택 하려면 스위치 를 사용하십시오.
통사론
if 문 은 조건이 true인 경우 실행할 코드 블록을 지정합니다.
if (condition) {
// block of code to be executed if the condition is true
}
else 문 은 조건이 false인 경우 실행할 코드 블록을 지정합니다.
if (condition) {
// block of code to be executed if the condition is true
}
else {
// block of code to be executed if the condition is false
}
else if 문 은 첫 번째 조건이 false인 경우 새 조건을 지정합니다.
if (condition1) {
// block of code to be executed if condition1 is true
}
else if (condition2) {
// block of code to be executed if the condition1 is false and condition2 is true
} else {
// block of code to be executed if the condition1 is false and condition2 is false
}
매개변수 값
| Parameter | Description |
|---|---|
| condition | Required. An expression that evaluates to true or false |
더 많은 예
시간이 10:00 미만이면 "Good morning" 인사말을 만들고, 그렇지 않은 경우 시간이 20:00 미만이면 "Good day" 인사말을 만들고, 그렇지 않으면 "Good morning"을 만듭니다.
var time = new Date().getHours();
if (time < 10) {
greeting = "Good morning";
}
else if (time < 20) {
greeting = "Good day";
}
else {
greeting = "Good evening";
}
문서의 첫 번째 <div> 요소의 ID가 "myDIV"인 경우 해당 글꼴 크기를 변경합니다.
var x = document.getElementsByTagName("DIV")[0];
if (x.id === "myDIV") {
x.style.fontSize = "30px";
}
사용자가 이미지를 클릭하면 <img> 요소의 소스 속성(src) 값을 변경합니다.
<img id="myImage" onclick="changeImage()" src="pic_bulboff.gif" width="100" height="180">
<script>
function changeImage() {
var image = document.getElementById("myImage");
if (image.src.match("bulbon")) {
image.src = "pic_bulboff.gif";
} else {
image.src = "pic_bulbon.gif";
}
}
</script>
사용자 입력을 기반으로 메시지 표시:
var letter = document.getElementById("myInput").value;
var text;
// If the letter is "c"
if (letter === "c") {
text = "Spot on! Good job!";
// If the letter is "b" or "d"
} else if (letter === "b" || letter === "d") {
text = "Close, but not close enough.";
// If the letter is anything else
} else {
text = "Waaay off..";
}
입력 데이터 검증:
var x, text;
// Get the value of the input field with id="numb"
x = document.getElementById("numb").value;
// If x is Not a Number or less than 1 or greater than 10, output "input is not valid"
// If x is a number between 1 and 10, output "Input OK"
if (isNaN(x) || x < 1 || x > 10) {
text = "Input not valid";
} else {
text = "Input OK";
}
관련 페이지
JavaScript 자습서: JavaScript If...Else 문
JavaScript 자습서: JavaScript Switch 문
브라우저 지원
if...elseECMAScript1(ES1) 기능입니다.
ES1(JavaScript 1997)은 모든 브라우저에서 완벽하게 지원됩니다.
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes | Yes |