본문 바로가기
프로그래밍 개발/JS 기본 언어

Javascript 조건문의 문법

by Jinseok Kim 2020. 11. 3.
반응형

조건문이란?

 

 

조건문이란 주어진 조건에 따라서 에플리케이션을 다르게 동작하도록 하는 것이다.

 

 

 

 

 

조건문의 문법

 

 

if

true일때는 중괄호안에 있는 alert(1);이 실행되고 false일때는 중괄호안에 있는 것이 실행되지 않고 바로  alert(5);가 실행되는 것을 확인 할 수 있다.

 

 

  • 조건문은 if로 시작한다. if 뒤의 괄호에 조건이 오고, 조건이 될 수 있는 값는 Boolean이다. Boolean의 값이 true라면 조건이 담겨진 괄호 다음의 중괄호 구문이 실행된다.
  • if 문의 조건이 참이면 중괄호의 시작({}부터 중괄호의 끝(})까지의 구간이 실행되기 때문이다. 거짓이면 중괄호 구간이 실행되지 않기 때문에 alert(5); 구문만 실행된 것이다.

 

 

 

 

 

 

else if

 

  • if문의 조건이 false라면 else 이후의 중괄호 구간이 실행된다. 즉 else는 주어진 조건이 거짓일 때 실행할 구간을 정의하는 것이다.
  • 위의 코드를 보면 모든 if문의 조건이 false로 되어 있어 결국 맨 아래에 있는 else문 조건을 실행하게 되어 alert(4);가 발동된 것을 확인 할 수 있다.

 

 

 

 

 

 

 

 

논리 연산자

 

 

 

 

&&

 

  • &&는 좌항과 우항이 모두 참(true)일 때 참이된다.
  • 위의 이미지 속 코드 결과는 1이다. &&의 좌우항이 모두 true인 것은 첫번째 조건문 밖에 없기 때문이다. 이러한 논리 연산자를 and 연산자라고 한다.

 

 

 

 

 

 

 

||

 

  • '||''||'의 좌우항 중에 하나라도 true라면 true가 되는 논리 연산자다. or 연산자라고 부른다.
  • 위의 이미지 속 코드 결과는 1,2,3이 출력된다. 마지막 조건문의 '||'는 좌항과 우항이 모두 false이기 때문에 false가 된다.

 

 

 

 

 

 

 

!

 

  • '!'는 부정의 의미로, Boolean의 값을 역전시킨다. true를 false로 false를 true로 만든다. not 연산자라고 부른다.
  • 위 이미지 속 코드는 맨 아래에 있는 if문만이 '!'영향으로 좌우향 모두 부정으로 역전시켜 &&조건을 만족시킨다. 즉, alert(4);만이 true로 조건을 만족시켜 결과로 4가 나온다.

 

 

 

 

 

 

 

 

 

조건문과 논리연산자의 중첩과 응용 - 로그인 하기

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
    <script>
       id = prompt('아이디를 입력해주세요.');
password = prompt('비밀번호를 입력해주세요.');
if((id==='k0505s' || id==='k0502s' || id==='k0606s') && password==='111111'){
    alert('인증 했습니다.');
} else {
    alert('인증에 실패 했습니다.');
}
    </script>
</body>
</html>

 

  • prompt() 구문은 입력창을 만들어준다.
  • prompt()으로 아이디와 비밀번호를 입력할 수 있는 창을 만들었다.
  • if문과 else문의 참 거짓 결과를 이용하여 알맞는 아이디와 비밀번호를 입력에 따른 인증 확인을 알려주도록 설정해주었다. 참이면 if문 안에 있는 alert()을 실행하고 거짓이면 else문 안에 있는 alert()을 실행하도록 하였다.
  • ||을 이용하여 여러개의 아이디를 등록하여 등록한 아이디 중 한가지라도 만족하면 if문이 참으로 인식하도록 하였으며, &&을 이용하여 아이디가 참으로 만족하더라도 비밀번호가 틀리다면 if문이 결국은 거짓으로 만족할 수 없도록 구성하였다.

 

 

 

 

 

반응형

'프로그래밍 개발 > JS 기본 언어' 카테고리의 다른 글

Javascript 함수(Function)  (0) 2020.11.05
javascript 반복문(Loop)  (0) 2020.11.05
Javascript 비교 연산자  (0) 2020.11.03
Javascript 변수 Variable  (0) 2020.11.03
Javascript 숫자와 문자에 대한 기본  (0) 2020.11.03

댓글