🌈 조건문(Conditional statement)
주어진 조건에 따라 application을 다르게 동작하도록 하는 것
조건문의 문법
☀️ IF
if 뒤에 true가 나오면 실행이 된다.
if(true){
alert('result : true');
}
-> result : true 라는 경고문 나옴
if 뒤에 flase가 나오면 실행 되지 않는다.
if(false){
alert('result : true');
}
-> 아무것도 실행되지 않음
1,2,3,4,5가 차례대로 경고문이 나옴
if 문의 조건이 참이므로, {}중괄호 구간이 실행되고 5까지 구간이 실행된 것
if(true){
alert(1);
alert(2);
alert(3);
alert(4);
}
alert(5);
5 경고문만 나옴
if 문의 조건이 거짓이므로, {}중괄호 구간이 실행되지 않기 때문에
5만 실행된 것
if(false){
alert(1);
alert(2);
alert(3);
alert(4);
}
alert(5);
☀️ else
결과는 1 이다.
if 문의 조건이 참이므로, 1이 실행되고 else는 실행되지 않는다.
if(true){
alert(1);
} else {
alert(2);
}
결과는 2이다.
if 문의 조건이 거짓이므로, 첫번째 구간은 실행되지 않고 else 중괄호 구간의 2가 실행된다.
if(false){
alert(1);
} else {
alert(2);
}
☀️ else if
-> 결과 2가 나옴
if(false){
alert(1); -> if구문의 조건이 거짓이므로 실행되지 않고
}
else if(true){
alert(2); -> 앞에있는 if 구문이 실행되지 않을 때(else) if구문의 참이므로 2가 실행됨
}
else if(true){
alert(3); -> 앞에있는 if 구문이 실행되지 않을 때(else)이지만 앞에 이미 실행되었으므로 실행되지 않음
}
else {
alert(4);-> 앞에있는 if 구문이 실행되지 않을 때(else)이지만 앞에 이미 실행되었으므로 실행되지 않음
}
-> 결과 3 나옴
if(false){
alert(1);
} else if(false){
alert(2);
} else if(true){
alert(3);
} else {
alert(4);
}
-> 결과 4 나옴
if(false){
alert(1);
} else if(false){
alert(2);
} else if(false){
alert(3);
} else {
alert(4);
}
예제)
>a=1;
>if(a===1){
alert(1);
}-> 1이 출력 됨
a는 가변적인 변수이다, a 값이 변함에 따라 상황에 따라 if구문이 true,false일 수 있다.
>alert(1); -> 1 이 출력 됨
☀️ prompt
>prompt('당신의 나이는?');
->당신의 나이는? 이라는 경고문이 뜸
->18이라고 입력 시
>prompt('당신의 나이는?');
"20"
라고 개발자모드에 입력 됨
>alert(prompt('당신의 나이는?'));
->당신의 나이는? 이라는 경고문이 뜸
>alert(prompt('당신의 나이는?')*2);
->당신의 나이는? 이라는 경고문이 뜸
->20이라고 입력 시
->40이라고 뜸(*2의 값)예제)
-> '아이디를 입력해주세요.' 라는 경고창이 뜸
-> egoing 입력 시 '아이디가 일치 합니다.' 라는 경고창이 뜸
-> egoing외의 값 입력 시 '아이디가 일치하지 않습니다.' 라는 경고창이 뜸
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<script>
id = prompt('아이디를 입력해주세요.')
if(id=='egoing'){
alert('아이디가 일치 합니다.')
} else {
alert('아이디가 일치하지 않습니다.')
}
</script>
</body>
</html>☀️ 조건문의 중첩
-> '아이디를 입력해주세요.' 라는 경고창이 뜸
-> egoing 입력 시 '비밀번호를 입력해주세요.'라는 경고창이 뜸
-> 1111111 입력 시 '로그인 하셨습니다.prompt님 반갑습니다'라는 경고창이 뜸
-> 1111111 외의 값 입력 시 '비밀번호가 다릅니다.'라는 경고창이 뜸
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<script>
id = prompt('아이디를 입력해주세요.');
if(id=='egoing'){
password = prompt('비밀번호를 입력해주세요.');
if(password==='111111'){
alert('로그인 하셨습니다.'+id+'님 반갑습니다'.);
} else {
alert('비밀번호가 다릅니다.');
}
} else {
alert('아이디가 일치하지 않습니다.');
}
</script>
</body>
</html>
☀️ 논리 연산자
✅ &&
&&는 좌항과 우항이 모두 참(true)일 때 참이된다.
&&의 좌우항이 모두 true인 것은 첫번째 조건문 밖에 없기 때문이다.
-> 결과는 1이다.
if(true && true){
alert(1);
}
if(true && false){
alert(2);
}
if(false && true){
alert(3);
}
if(false && false){
alert(4);
}
예제)
논리연산자는 여러개의 Bolean 을 조합해서 하나의 Boloean으로 조합시킬 수 있는 연산자
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<script>
id = prompt('아이디를 입력해주세요.');
if(id=='egoing' && password==='111111'){
alert('인증 했습니다.'.);
}
} else {
alert('인증에 실패 했습니다.');
}
</script>
</body>
</html>
✅ ||
'||'는 '||'의 좌우항 중에 하나라도 true라면 true가 되는 논리 연산자
if(true || true){
alert(1);
}
if(true || false){
alert(2);
}
if(false || true){
alert(3);
}
if(false || false){
alert(4);
}-> 1,2,3,4 차례대로 나오고 4는 false이기 때문에 출력되지 않는다.
ID 가 egoing' ,'k8805' ,'sorialgi 3중 1를 입력하면 인증했습니다 가 출력 됨
id = prompt('아이디를 입력해주세요.');
if(id==='egoing' || id==='k8805' || id==='sorialgi'){
alert('인증 했습니다.');
} else {
alert('인증에 실패 했습니다.');
}
ID 가 egoing' ,'k8805' ,'sorialgi 3중 1를 입력하고 pw를 111111 로 입력하면
인증했습니다 가 출력 됨
id = prompt('아이디를 입력해주세요.');
password = prompt('비밀번호를 입력해주세요.');
if((id==='egoing' || id==='k8805' || id==='sorialgi') && password==='111111'){
alert('인증 했습니다.');
} else {
alert('인증에 실패 했습니다.');
}✅ !
'!'는 부정의 의미로, Boolean의 값을 역전시킨다.
if(!true && !true){
alert(1); ----------> false && false로 false이므로 출력 X
}
if(!false && !true){
alert(2); ----------> true && false 로 좌항 우항이 같지 않기때문에 출력X
}
if(!true && !false){
alert(3); ----------> false && true 로 좌항 우항이 같지 않기때문에 출력X
}
if(!false && !false){
alert(4); ----------> true && true로 true이기 때문에 4로 출력 됨
}
☀️ Boolean 의 대체제
0은 falase, 1은 true로 간주함
if(0){
alert(1)
}
if(1){
alert(2)
}
기타 false로 간주되는 데이터 형
if(!''){
alert('빈 문자열')
}
if(!undefined){
alert('undefined');
}
var a;
if(!a){
alert('값이 할당되지 않은 변수');
}
if(!null){
alert('null');
}
if(!NaN){
alert('NaN');
}
보라님 || 일때는 어떤 내용인지 궁금합니다! 🤔