[개발] - Front/Mega-JavaScript

5. 자바스크립트 기본 문법 (3) 조건문

완벽한 장면 2023. 5. 20. 00:42

조건문

1-1. if문과 if~else문

  • 스크립트 안에서 조건을 체크
  • if문에서는 괄호 안의 조건 체크해서 true면 if문 다음에 나오는 값을 실행하고, false면 아무 것도 하지 않는다.
  • 조건을 만족했을 때 실행할 명령이 여러 개라면 중괄호 { } 로 묶고, 그 안에 명령을 나열하여 순서대로 한꺼번에          처리하라고 표시한다.

기본형

if(조건) {
	조건 결괏값이 true 일 때 실행할 명령
}
if(조건) {
	조건 결과값이 true일 때 실행할 명령
} else {
	조건 결과값이 true일 때 실행할 명령
}

 

예제

3의 배수 확인하기 1

<body>
  <script>
    var userNumber = prompt("숫자를 입력하세요.");

    if(userNumber % 3 === 0) 
      alert("3의 배수입니다.");
    else 
      alert("3의 배수가 아닙니다.");
  </script>
</body>

실행 결과

 

 

1-2. 중첩 if문

- 조건이 하나의 if-else문으로 해결되지 않을 때 사용

- 다른 if~else문 안에 포함되는 if~else를 의미

 

예제 2 

3의 배수 확인하기에서 취소 버튼을 눌렀을 때 로직.

<body>
  <script>
    var userNumber = prompt("숫자를 입력하세요.");

    if (userNumber !== null) {       // 입력값이 null이 아니면 if 문을 실행
      if(userNumber % 3 === 0) 
        alert("3의 배수입니다.");
      else 
        alert("3의 배수가 아닙니다.");
    }
    else 
      alert("입력이 취소됐습니다.");  // 입력값이 null이면 알림 창을 보여 줌
  </script>
</body>

 

2. 조건 연산자로 조건 체크하기

기본형

（조건） ? true일 때 실행할 명령 : false일 때 실행할 명령
  • 조건이 하나, true 혹은 false일 때 실행할 명령이 각각 하나뿐이라면 if~else문보다는 조건 연산자 사용하기
  • 조건 연산자는 ? 와 : 기호로 이루어진다.

예제

<body>
  <script>
    var userNumber = prompt("숫자를 입력하세요.");

    if (userNumber !== null) 
      (userNumber % 3 === 0) ? alert("3의 배수입니다.") : alert("3의 배수가 아닙니다.");
    else 
      alert("입력이 취소됐습니다.");      
  </script>
</body>

 

3. 논리 연산자로 조건 체크하기

3-1. OR 연산자

  • 기호는 || 를 사용.

예제

OR 연산자를 사용해 50보다 작은 숫자 2개를 입력받아 둘 중 하나가 10보다 작은지를 판단.

<body>
  <script>
    var numberOne = prompt("50미만의 숫자를 입력하세요.");
    var numberTwo = prompt("50미만의 숫자를 입력하세요.");

    if(numberOne < 10 || numberTwo < 10) 
      alert("두 개의 숫자 중 최소한 하나는 10 미만이군요.");
    else 
      alert("두 개의 숫자 중 10 미만인 수는 없습니다.");
  </script>
</body>

실행 결과

 

3-2. AND 연산자

  • 기호는 && 를 사용.

예제

AND 연산자를 사용해 입력한 2개의 숫자가 50보다 작은지를 체크

<body>
  <script>
    var numberOne = prompt("50미만의 숫자를 입력하세요.");
    var numberTwo = prompt("50미만의 숫자를 입력하세요.");

    if(numberOne < 50 && numberTwo < 50) 
      alert("두 개의 숫자 모두 50 미만이군요.");
    else 
      alert("조건에 맞지 않는 숫자가 있습니다.")
  </script>
</body>

 

실행 결과

 

3-3. NOT 연산자

  • 기호는 && 를 사용.
  • true나 false를 반대로 뒤집는다.

예제

변수 userNumber의 입력값이 null이 아닌지를 체크

if(userNumber != null) {
	실행할 명령
}
// 입력값이 null이 아니면 if문을 실행

 

4. switch문

  • 조건을 체크할 때는 if~else문을 사용하는 게 일반적이지만, 처리할 명령이 많다면 switch문이 더 편리하다
  • switch문의 의 조건은 아래에 있는 case 문의 값과 일대일로 일치해야 한다.
  • 조건과 일치하는 case 문의 명령을 실행한 후에는 switch문을 완전히 빠져나온다.
  • 조건과 일치하는 것이 없다면 defalut문을 수행하고 나온다.

기본형

switch(조건) {
	case 값1: 명령1 
    break
	case 값2: 명령2
	break
	......
	default: 명령n 
}

예제

1, 2, 3 중에서 값을 하나만 입 력받아 session 변수에 저장하고, switch 문을 이용해 session값을 체크

<body>	
	<script>
		var session = prompt("관심 세션을 선택해 주세요. 1-마케팅, 2-개발, 3-디자인");
		
		switch(session) {
			case "1" : document.write("<p>마케팅 세션은 <strong>201호</strong>에서 진행됩니다.</p>")
				break;
			case "2" : document.write("<p>개발 세션은 <strong>203호</strong>에서 진행됩니다.</p>");
				break;
			case "3" : document.write("<p>디자인 세션은 <strong>205호</strong>에서 진행됩니다.</p>")
				break;
			default: alert("잘못 입력했습니다.");
		}
	</script>
</body>

실행 결과

 

 

728x90
반응형