자바스크립트 기본 - 조건문
조건문 - https://opentutorials.org/course/743/4724
조건문은 주어진 조건에 따라서 애플리케이션을 다르게 동작하도록 하는 것.
프로그램을 똑똑하게 만드는 것이다.
a. 조건문의 문법
- if
조건문은 if 로 시작한다.
if뒤에 있는 괄호에 true인 경우, 중괄호가 실행된다.
if뒤에 있는 괄호가 false인 경우 중괄호가 실행되지 않는다.
예제
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script>
if(true){
alert('result : true');
}
if(false){
alert('result : true');
}
</script>
</body>
</html>
예제를 크롬에서 열게 되면 첫번째 if문만 경고창이 실행된다.
경고창 답
1. result : true
예제2
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script>
if(true){
alert(1);
alert(2);
alert(3);
alert(4);
}
alert(5);
</script>
</body>
</html>
예제를 크롬에서 열게 되면 차례대로 경고창으로 나타난다.
경고창 답
1. 1
2. 2
3. 3
4. 4
5. 5
if뒤에 false가 온다면 중괄호가 실행되지 않고 alert(5); 만 실행된다.
- else, else if
if만으로는 복잡한 상황을 처리하는데 부족하다.
else는 true일때 어떤 일을 하고, false일때 어떤 일을 한다는 것을 지정해주는 것이다.
else if는 앞에 if가 실행되지 않을 때 실행됨.
예제3
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script>
if(false){ //중괄호는 무시되며 if는 실행되지 않음.
alert(1);
} else if(true){ // if가 실행되지 않을 때 실행되는데 if뒤에 true이기 때문에 실행됨. 만약 if뒤에 false이면 실행되지 않음.
alert(2);
} else if(true){ //앞에 else if가 실행되었으므로 실행되지 않음.
alert(3);
} else { //앞에 else if가 실행되었으므로 실행되지 않음.
alert(4);
}
</script>
</body>
</html>
예제를 크롬에서 열게 되면 경고창으로 나타난다.
경고창 답
2
b. 변수와 비교연산자
변수, 비교연산자, 조건문을 결합하여 코딩
prompt : 어떠한 값을 사용자로부터 받을 수 있다.
예제4
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<script>
id = prompt('아이디를 입력해주세요.') //prompt가 실행되어 경고창과 입력칸이 뜬다.
if(id=='egoing'){ //입력칸에 egoing을 입력하면 if문이 실행됨.
alert('아이디가 일치 합니다.')
} else { //입력칸에 egoing이 아닌 다른 값을 입력하면 else문이 실행됨.
alert('아이디가 일치하지 않습니다.')
}
</script>
</body>
</html>
예제5
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<script>
id = prompt('아이디를 입력해주세요.'); //prompt가 실행되어 경고창과 입력칸이 뜬다.
if(id=='egoing'){ //입력칸에 egoing을 입력하면 if문이 실행됨.
password = prompt('비밀번호를 입력해주세요.'); //비밀번호를 입력할 수 있는 입력칸이 뜬다.
if(password==='111111'){ //비밀번호가 같으면 if문이 실행됨.
alert('인증 했습니다.');
} else { //비밀번호가 다르면 else문이 실행됨.
alert('인증에 실패 했습니다.');
}
} else { //입력칸에 egoing이 아닌 다른 값을 입력하면 else문이 실행됨.
alert('인증에 실패 했습니다.');
}
</script>
</body>
</html>
b. 논리 연산자
조건문을 간결하고 다양한 방법으로 구사할 수 있게 도와준다.
- &&
&& : and, 좌항과 우항이 모두 참일 경우에 전체가 true가 됨.
예제6
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<script>
if(true && true){ // 좌항과 우항이 모두 true이므로 괄호는 true가 되므로 중괄호가 실행됨.
alert(1);
}
if(true && false){ // 좌항과 우항중 하나만 true이므로 괄호는 false가 되므로 중괄호가 실행되지 않음.
alert(2);
}
if(false && true){ // 좌항과 우항중 하나만 true이므로 괄호는 false가 되므로 중괄호가 실행되지 않음.
alert(3);
}
if(false && false){ // 좌항과 우항이 모두 false이므로 괄호는 false가 되므로 중괄호가 실행되지 않음.
alert(4);
}
</script>
</body>
</html>
- ||
|| : or, 좌항과 우항중 하나만 true여도 전체가 true가 됨. 좌항과 우항 모두 false여야 전체가 false가 됨.
예제7
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<script>
id = prompt('아이디를 입력해주세요.'); // id 값을 입력 받음
password = prompt('비밀번호를 입력해주세요.'); // password 값을 입력 받음
// id값이 세개의 값중 하나를 입력하면 true가 됨. password는 무조건 111111이여야 true가 됨.
// 그래서 id와 password 모두 true가 되면 if문이 실행되며 id와 password중 하나라도 false이면 else문이 실행됨.
if((id==='egoing' || id==='k8805' || id==='sorialgi') && password==='111111'){
alert('인증 했습니다.');
} else {
alert('인증에 실패 했습니다.');
}
</script>
</body>
</html>
- !
! : 부정의 의미. true 앞에 !true 처럼 붙이면 이 값은 false가 됨.
<!DOCTYPE html>
예제를 크롬에서 열게 되면 경고창으로 나타난다.
경고창 답
4
c. boolean의 대체제
숫자 1은 자바스크립트에서 true로 간주, 숫자 0은 false로 간주한다. (권장하는 방법은 아님 true, false를 사용하는게 더 좋음)
<!DOCTYPE html>
예제를 크롬에서 열게 되면 차례대로 경고창으로 나타난다.
경고창 답
1. 빈 문자열
2. undefined
3. 값이 할당되지 않은 변수
4. null
5. NaN