JavaScript if/else 문

정의와 사용법

if/else 문은 지정된 조건이 참일 때 코드 블록을 실행합니다. 조건이 거짓이면 다른 코드 블록을 실행할 수 있습니다.

if/else 문은 JavaScript의 "조건" 문의 일부로, 다른 조건에 따라 다른 작업을 수행합니다.

JavaScript에서는 다음과 같은 조건 문이 있습니다：

  • 지정된 조건이 참일 경우 실행할 코드 블록을 if로 지정합니다
  • 같은 조건이 거짓일 경우 실행할 코드 블록을 else로 지정합니다
  • 첫 번째 조건이 거짓일 경우, else if를 사용하여 새로운 조건을 테스트할 것을 지정합니다
  • 使用 switch 선택할 수 있는 여러 코드 블록 중 하나를 실행합니다

예제

如果当前时间 (HOUR) 小于 20:00，则在 id="demo" 的元素中输出 "Good day"：

var time = new Date().getHours(); 
if (time < 20) {
  document.getElementById("demo").innerHTML = "Good day";
}

직접 시도해 보세요

页面下方有更多 TIY 实例。

문법

if 문은 조건이 참일 때 실행할 코드 블록을 지정합니다：

if (condition) {
  // 조건이 true일 때 실행할 코드 블록
}

else 문은 조건이 거짓일 때 실행할 코드 블록을 지정합니다：

if (condition) {
  // 조건이 true일 때 실행할 코드 블록
} else { 
  // 조건이 false일 때 실행할 코드 블록
}

첫 번째 조건이 거짓이면, else if 문이 새로운 조건을 지정합니다：

if (condition1) {
  // condition1이 true일 때 실행할 코드 블록
} else if (condition2) {
  // condition1이 false이고 condition2가 true일 때 실행할 코드 블록
} else {
  // condition1이 false이고 condition2가 false일 때 실행할 코드 블록
}

매개변수 값

매개변수 설명
condition 필수. 결과가 true 또는 false인 표현식.

기술 세부 사항

JavaScript 버전： ECMAScript 1

더 많은 예제

예제

만약 시간이 20:00보다 작다면, "Good day" 인사를 생성합니다. 그렇지 않으면 "Good evening"을 생성합니다：

var time = new Date().getHours(); 
if (time < 20) {
  greeting = "Good day";
} else {
  greeting = "Good evening";
}

직접 시도해 보세요

예제

만약 시간이 10:00보다 작다면, "Good morning" 인사를 생성합니다. 그렇지 않지만 시간이 20:00보다 작다면, "Good day" 인사를 생성합니다. 그렇지 않으면 "Good evening" 인사를 생성합니다：

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;
// 글자가 "c"라면
if (letter === "c") {
  text = "Spot on! Good job!";
// 글자가 "b" 또는 "d"라면
} else if (letter === "b" || letter === "d") {
  text = "Close, but not close enough.";
// 다른 글자라면
} else {
  text = "Waaay off..";
}

직접 시도해 보세요

예제

입력 데이터 확인:

var x, text;
// id="numb"의 입력 필드 값 가져오기
x = document.getElementById("numb").value;
// x가 숫자가 아니거나 1보다 작거나 10보다 크면 "input is not valid" 출력
// 如果 x는 1에서 10 사이의 숫자라면 "Input OK" 출력
if (isNaN(x) || x < 1 || x > 10) {
  text = "Input not valid";
} else {
  text = "Input OK";
}

직접 시도해 보세요

브라우저가 지원

문장 크롬 IE 파이어폭스 사파리 오페라
if/else 지원 지원 지원 지원 지원

관련 페이지

JavaScript 강의:JavaScript If...Else 문

JavaScript 강의:JavaScript Switch 문