지금까지 배웠던 조건문은 if 괄호 조건 안에 항상 true/false가 있었다.
이는 if안에 boolean이 들어간 다는 것을 설명하기 위해서 이며, 괄호 안에 true/false가 고정돼어 있는 것은 조건문으로서는 소용이 없다.
다만, if 문 괄호 안에 boolean이 들어간 다는 것만 확실하게 알아두자!
이번에는 조건문과 변수가 결합하는 것을 확인할 수 있다.
a = 1;
if (a === 1){
alert(1)
}
이 코드에서는 a 변수의 값에 따라 if 문 괄호 안이 true도 될 수 있고, false도 될 수 있다.
조건문이 상황에 따라 다른 실행을 하는 가변적인 결과를 내보이는 것이다.
이제 설명할 부분을 알기 위해서 알아야 할 명령이 하나 있는데, 바로 prompt() 이다.
var age = prompt('당신의 나이는?')
을 입력 후 실행시키면 다음과 같이 뜬다 ( 콘솔에서는 안된다.. 따로 내가 페이지를 만들고 script 안에 내장한 prompt 명령만 실행된다. )
prompt는 우리가 어떤 값을 사용자로부터 받을 수 있는 창이다.
사용자가 여기서 20이라고 입력 후 확인버튼을 누르면 age는 20이 된다.
지금 본 prompt라는 부품과 지금까지 숱하게 본 alert이라는 부품을 조합해보자.
alert(prompt('당신의 나이는?'));
이라고 실행하면 어떻게 될까?
우선 alert안에 있는 prompt가 먼저 실행된다.
prompt 창 안에 20을 누르고 확인을 누르면
alert(20); 이라는 명령이 되고
경고창에 '20' 이라는 것이 뜰 것이다.
그럼 다음과 같은 코드를 입력해보자
<script>
var id = prompt('아이디를 입력해주세요.'); // id 값은 prompt 명령을 통해 사용자로부터 입력받은 값이다.
if (id === 'estelar') { // 만약 사용자가 prompt창에 estelar를 입력했다면
alert('아이디가 일치합니다.') // '아이디가 일치합니다'라는 경고창을 띄우고
}else { // 만약 사용자가 prompt창에 estelar가 아닌 다른 문자를 입력했다면,
alert('아이디가 일치하지 않습니다.') // '아이디가 일치하지 않습니다' 라는 경고창을 띄운다.
};
</script>
이는 로그인 할 때 사용하는 로직으로, 실질적으로는 이것보다 더 복잡하지만 본질적으로는 같다.
바로 이런 조건문이 있기 때문에 어떤 상황에서는 어떤 일이 일어나고, 어떤 상황에서는 어떤 일이 일어난다는 것을
컴퓨터 답게 처리할 수 있는 것이며,
이것이 계산기와 컴퓨터가 다른 이유이다.
하지만 id만 받는 것은 미완성이며, password도 입력 받는 코드를 한번 살펴보자.
var id = prompt('아이디를 입력해주세요.');
if (id === 'estelar') {
alert('아이디가 일치합니다.')
}else {
alert('아이디가 일치하지 않습니다.')
};
상단 코드에서 어느 시점에 password를 입력받아야 할까?
우선 id가 틀리면 password를 받을 필요도 없으니 패스할 수 있다.
따라서 아이디가 일치했을 때, 사용자에게 password를 받는다.
if (id === 'estelar') {
alert('아이디가 일치합니다.')
var password = prompt('패스워드를 입력하세요.');
}else {
alert('아이디가 일치하지 않습니다.')
};
패스워드를 입력 했으니, 패스워드가 맞으면 '로그인 하셨습니다.'를, 틀리면 '패스워드가 일치하지 않습니다.' 라는 경고창을 띄울것이다.
이 모든 조건문은 아이디가 일치했을 경우에만 뜨는 조건문이다.
if (id === 'estelar') {
alert('아이디가 일치합니다.')
var password = prompt('패스워드를 입력하세요.');
if (password === '12345') { //패스워드가 12345와 같으면
alert('로그인 하셨습니다.') // '로그인 하셨습니다.'라는 경고창을 띄우고
}else { //패스워드가 12345가 아닌 경우에는
alert('패스워드가 일치하지 않습니다.') // '패스워드가 일치하지 않습니다.'라는 경고창을 띄운다.
}
}else {
alert('아이디가 일치하지 않습니다.')
};
여기서 좀 더 응용해보면
var id = prompt('아이디를 입력해주세요.');
if (id === 'estelar') {
var password = prompt('비밀번호를 입력해주세요.')
if (password === '12345') {
alert('로그인 하셨습니다.'+id+'님 반갑습니다.') //입력된 id값을 통해 'estelar님 반갑습니다' 라는 메세지를 띄울 수 있다.
}else {
alert('패스워드가 일치하지 않습니다.')
}
}else {
alert('아이디가 일치하지 않습니다.')
};
'IT 인터넷 > javascript' 카테고리의 다른 글
| [javascript 언어공부] boolean의 대체제 (0) | 2018.05.28 |
|---|---|
| [javascript 언어공부] 논리 연산자 (0) | 2018.05.28 |
| [javascript 언어공부] 조건문(1) (0) | 2018.05.25 |
| [javascript 언어공부] 비교 (0) | 2018.05.25 |
| [javascript 언어공부] 세미콜론(;) (0) | 2018.05.25 |
