Study/JavaScript

조건문(3)__조건문의 응용

더 멋진 세상을 꿈꾸는 개발자 2020. 4. 14. 16:58

조건문(3)__조건문의 응용

변수와 비교연산자

앞서 배운 변수와 비교연산자, 그리고 조건문을 결합해보자.

a=1;
if(a===1){
   alert(1);
}

위의 값으로 경고창에 1이 출력됨.
a===1이라는 불린 값이 true이기 때문에.

즉, if의 값은 상황에 따라서 다른 실행의 값을 출력할 수 있는
가변적인 친구가 되는 것이다.

prompt

경고창에 입력창이 함께 떠서 사용자로부터 어떠한 값을 받아낼 수 있는 기능.

prompt('당신의 나이는?');
"20"   // 사용자가 입력창에 입력한 값.

이번에는 alert과 prompt기능을 같이 사용해보자.

alert(prompt('당신의 나이는?'));
  /*이렇게 입력할 경우 아래와 같이 연산되어*/
alert(사용자가 입력한 값);
  /*사용자가 입력한 값이 경고창으로 출력되게 된다.*/

이를 활용하여, 아래와 같이 해보자.

<script>
   var id = prompt('아이디를 입력해주세요.');
   if(id=='bonbon'){
       alert('아이디가 일치 합니다.');
   } else {
       alert('아이디가 일치하지 않습니다.');
   }
</script>

패스워드도 같이 입력받아서 확인하는 방법은??
(조건문 안에는 또다른 조건문이 들어갈 수 있다.)

<script>
   var id = prompt('아이디를 입력해주세요.');
   if(id=='bonbon'){
       var password = prompt('비밀번호를 입력해주세요.');
       if(password == '1111'){
           alert('로그인 하셨습니다.');
       } else {
           alert('비밀번호가 다릅니다.');
       }
   } else {
       alert('아이디가 일치하지 않습니다.')
   }
</script>

조금 더 친절해보자면, 이렇게 표현 할 수도 있다.

<script>
   var id = prompt('아이디를 입력해주세요.');
   if(id=='bonbon'){
       var password = prompt('비밀번호를 입력해주세요.');
       if(password == '1111'){
           alert('로그인 하셨습니다.'+id+'님 반갑습니다.');
       } else {
           alert('비밀번호가 다릅니다.');
       }
   } else {
       alert('아이디가 일치하지 않습니다.')
   }
</script>

👏👏👏 신기하고 재밌다.