목차

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에는 다음과 같은 조건문이 있습니다.

''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;
, , , , , , ,