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

티스토리 뷰

[개발] - 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

'[개발] - Front > Mega-JavaScript' 카테고리의 다른 글

7. 함수와 이벤트 (1) var을 사용한 변수의 특징 (1)	2023.05.20
6. 자바스크립트 기본 문법 (4) 반복문 (0)	2023.05.20
4. 자바스크립트 기본 문법 (2) 연산자 (0)	2023.05.19
3. 자바스크립트 기본 문법 (1) 변수, 자료형 (0)	2023.05.19
2. 자바스크립트 기본 입출력, 스타일 가이드 (0)	2023.05.17

공유하기 링크

Comments

Related Articles more

최근에 올라온 글

최근에 달린 댓글

TAG more

Total

Today

Yesterday

250x250

코드그라데이션

티스토리 뷰