목차
JavaScript Conditions
- description : JavaScript if else and else if
- author : 오션
- email : shlim@repia.com
- lastupdate : 2021-04-21
The source of this article
JavaScript if else and else if
조건문(Conditional Statements)은 다양한 조건에 근거한 다양한 작업을 하는 데 사용합니다.
Conditional Statements
코드를 작성할 때 매우 자주, 다양한 결정에 대해 다양한 작업을 하려고 합니다.
이를 위해 코드에서 조건문을 사용할 수 있습니다.
JavaScript에는 다음과 같은 조건문이 있습니다.
- 지정된 조건이 참인 경우 실행할 코드 블록을 지정하려면
if를 사용합니다. - 동일한 조건이 거짓인 경우
else를 사용하여 실행할 코드 블록을 지정합니다. - 첫 번째 조건이 거짓인 경우, 테스트할 새로운 조건을 지정하려면
else if를 사용합니다. switch를 사용하여 실행할 다수의 대체 코드 블록을 지정합니다.
''switch'' 문은 다음 장에서 설명합니다.
The if Statement
조건이 true 인 경우 실행할 JavaScript 코드 블록을 지정하려면 if 문을 사용하십시오.
Syntax
if (condition) { // block of code to be executed if the condition is true }
if는 소문자로 되어 있습니다. 대문자 (If 또는 IF)는 JavaScript 오류를 생성합니다.
Example
시간이 18:00 이전이면 “Good day”인사를 합니다.
<!DOCTYPE html> <html> <body> <p>Display "Good day!" if the hour is less than 18:00:</p> <p id="demo">Good Evening!</p> <script> if (new Date().getHours() < 18) { document.getElementById("demo").innerHTML = "Good day!"; } </script> </body> </html>
The else Statement
조건이 거짓인 경우 실행될 코드 블록을 지정하려면 else 문을 사용합니다.
Syntax
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 }
Example
시간이 18 시간 이전이면 “Good day”인사말을 만들고, 그렇지 않으면 “Good evening”을 만듭니다.
<!DOCTYPE html> <html> <body> <p>Click the button to display a time-based greeting:</p> <button onclick="myFunction()">Try it</button> <p id="demo"></p> <script> function myFunction() { var hour = new Date().getHours(); var greeting; if (hour < 18) { greeting = "Good day"; } else { greeting = "Good evening"; } document.getElementById("demo").innerHTML = greeting; } </script> </body> </html>
The else if Statement
첫 번째 조건이 거짓인 경우, ''else if'' 문을 사용하여 새 조건을 지정합니다.
Syntax
if (condition01) { // block of code to be executed if the condition01 is true } else if (condition02) { // block of code to be executed if the condition01 is false and condition02 is true } else { // block of code to be executed if the condition01 is false and condition02 is false }
Example
시간이 10:00 이전이면 “Good morning”인사말을 만들고,
그렇지 않은 경우 20:00 이전이면 “Good day”인사말을 만들고,
그렇지 않으면 “Good Evening”을 만듭니다.
<!DOCTYPE html> <html> <body> <p>Click the button to display a time-based greeting:</p> <button onclick="myFunction()">Try it</button> <p id="demo"></p> <script> function myFunction() { var greeting; var time = new Date().getHours(); if (time < 10) { greeting = "Good morning"; } else if (time < 20) { greeting = "Good day"; } else { greeting = "Good evening"; } document.getElementById("demo").innerHTML = greeting; } </script> </body> </html>
More Examples
다음 예제는 W3Schools 또는 WWF (World Wildlife Foundation)에 대한 링크를 작성합니다.
임의의 숫자(random number)를 사용하면 각 링크에 대해 50 %의 확률이 있습니다.
if (Math.random() < 0.5) { text = "<a href='https://w3schools.com'>Visit W3Schools</a>"; } else { text = "<a href='https://wwf.org'>Visit WWF</a>"; } document.getElementById("demo").innerHTML = text;
