조건문은 프로그래밍에서 가장 중요한 부분이다. HTML, CSS가 아닌 이상 조건문은 공통 분모이다.
Java, Python, Php, C 이런 언어를 배울 때도 사용한다. 다음 단원에서 배울 '반복문'도 프로그래밍의 양대산맥이다.
조건문 (conditional statement)
주어진 조건에 따라서 어플리케이션을 다르게 동작하도록 하는 것이다.
컴퓨터와 계산기와 구분되는 가장 중요한 차이. 비교라는 수업과 밀접하다.
조건문의 문법
#if
Boolean (true 냐 false냐) 과 땔 수 없는 사이이다.
if(true){
alert('result : true');
}if 뒤에 따라오는 ()에 true 가 오면 {} 안에 오는 부분이 실행이 된다.
if(false){
alert('result : true');
}false면 실행이 되지 않는다.
if(true){
alert(1);
alert(2);
alert(3);
alert(4);
}
alert(5);1~4가 true니까 다 출력되고 5는 if와 무관하니 또 출력된다.
if(false){
alert(1);
alert(2);
alert(3);
alert(4);
}
alert(5);()가 false여서 중괄호 {}가 실행이 안되고 밖에 있는 '5'만 출력된다.
#else
if만으로는 좀 더 복잡한 상황을 처리하기에는 무리가 있다.
if(true){
alert(1);
} else {
alert(2);
}
if의 조건이 true 일 때, 중괄호 { } 가 실행이 된고 else는 실행이 되지 않는다.
if(false){
alert(1);
} else {
alert(2);
}if의 조건이 false일 때는 else 이후의 { }가 실행 된다 = else는 주어진 조건이 false 일 때, 실행할 구간을 정의 할 때 사용
#else if
- else if를 쓰면 복잡한 상황을 좀 더 지능적으로 처리할 수 있게 된다.
- else if는 좀 더 다양한 조건을 검사할 수 있는 기회를 제공한다.
- else는 생략이 가능하다.
if(false){
alert(1);
} else if(true){
alert(2);
} else if(true){
alert(3);
} else {
alert(4);
}
2만 출력이 된다.
if(false){
alert(1);
} else if(false){
alert(2);
} else if(true){
alert(3);
} else {
alert(4);
}
3만 실행이 된다
if(false){
alert(1);
} else if(false){
alert(2);
} else if(false){
alert(3);
} else {
alert(4);
}4만 실행이 된다. 하지만 if(xx) xx에다가 false랑 ture만 넣어서는 의미가 없다.
변수와 비교연산자
변수(var) + 비교연산자(# >,<,== ) + 조건문 (if) 의 결합으로 우리가 로그인할 때 쓰는 ID , PASSWORD 코드구현이 가능하다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<script>
id = prompt('아이디를 입력해주세요.')
if(id=='egoing'){
alert('아이디가 일치 합니다.')
} else {
alert('아이디가 일치하지 않습니다.')
}
</script>
</body>
</html>prompt() 구문을 쓰면 텍스트 입력창이 나온다. 이 입력창에 사용자가 아무글을 쓰면 '아이디가 일치하지 않습니다'가 뜨고 만약에 'egoing'을 쓴다면 아이디가 일치 합니다가 뜰 것이다.
#참고
- "==" 의 경우 다른 언어에도 있는 연산자로서, 데이터 타입과는 관계 없이 값만 비교합니다. '1'과 1을 같게 봄.
허나 "===" 의 경우 데이터 타입까지 같이 비교하여, 값과 데이터 타입이 모두 같은 경우에만 참이 되는 겁니다. - ===이 ==보다 더 정확하게 두 데이터를 비교합니다. == 는 0과 ' ' 을 같은 것으로 보지만 ===는 다른 데이터로 인식합니다. ==는 숫자열과 문자열을 값만 같으면 같게 판단. ===는 데이터 타입이 다르니 다르게 판단.
조건문의 중첩
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<script>
id = prompt('아이디를 입력해주세요.');
if(id=='egoing'){
password = prompt('비밀번호를 입력해주세요.');
if(password==='111111'){
alert('인증 했습니다.');
} else {
alert('인증에 실패 했습니다.');
}
} else {
alert('인증에 실패 했습니다.');
}
</script>
</body>
</html>if문 안에 if문이 등장. 사용자가 입력한 값이 아이디의 값과 일치하는지를 확인한 후에 일치하다면 비밀번호가 일치하는지 확인하는 코드이다. 이렇게 조건문은 조건문 안에 중첩해서 사용이 가능하다.
alert('인증 했습니다.' + id +' 님 반갑습니다.') 이렇게도 가능하다.
논리 연산자
- 조건문을 좀더 간결하고 다양한 방법으로 구사할 수 있도록 도와준다
- 논리 연산자는 boolean을 조합해서 하나의 boolean으로 결합시킬 수 있다.
&&
- 'and' 라는 뜻
- 좌항과 우항, 양쪽 다 (true)일 때만 true가 된다
- 'and 연산자'라고 한다
if(true && true){
alert(1);
}
if(true && false){
alert(2);
}
if(false && true){
alert(3);
}
if(false && false){
alert(4);
}
=> 결과는 1이다. true/true는 1번 째 조건문 밖에 없기 때문예제
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<script>
id = prompt('아이디를 입력해주세요.');
password = prompt('비밀번호를 입력해주세요.');
if(id=='egoing' && password=='111111'){
alert('인증 했습니다.');
} else {
alert('인증에 실패 했습니다.');
}
</script>
</body>
</html>이런식으로 위의 중첩된 if문을 하나로 줄였다. 코드의 복잡성도 낮아졌다. 물론 로직에서 차이가 있기는 하지만..
뜻: "id의 값이 egoing 이고 password의 값이 111111 이면 참이다" 라는 뜻이다.
||
- 'or' 이라는 뜻
- ||(파이프) 라고 부른다
- 둘 중 하나라도 true일 때 true가 된다.
- 2개가 뿐만 아니라 3개도 되는 등 무한으로 가능하다
- 'or 연산자' 라고 한다
if(true || true){
alert(1);
}
if(true || false){
alert(2);
}
if(false || true){
alert(3);
}
if(false || false){
alert(4);
}
=> 결과는 1, 2, 3이 나온다. 마지막은 좌항과 우항 둘다 false이기 때문에 false가 된다.예제
id = prompt('아이디를 입력해주세요.');
if(id==='egoing' || id==='k8805' || id==='sorialgi'){
alert('인증 했습니다.');
} else {
alert('인증에 실패 했습니다.');
}3개의 id 중 어느 것을 사용해도 '인증 했습니다.' 가 뜰 것이고 아니면 '인증에 실패 했습니다.' 가 뜰 것
|| + && 예제
id = prompt('아이디를 입력해주세요.');
password = prompt('비밀번호를 입력해주세요.');
if((id==='egoing' || id==='k8805' || id==='sorialgi') && password==='111111'){
alert('인증 했습니다.');
} else {
alert('인증에 실패 했습니다.');
}or과 and를 혼합해서 사용이 가능하다. id 값 구간을 ( )로 묶었다. 이렇게 하면 사칙 연산을 할 때 괄호부터 계산하는 것과 같은 원리로 먼저 계산하라는 뜻이다.
원리
- id 3개 중 어느 값이 와도 true 가 된다.
- password는 무조건 111111 여야 한다. 아니면 양쪽다 참이어야 true인 && 만족을 못한다.
- id에 의한 true and password에 의한 true => true
!
- 'not' 이라는 뜻
- Boolean 값을 역전시킨다
- true면 false, false면 ture로 바꿔준다
- 'not 연산자' 라고 부른다
if(!true && !true){
alert(1);
}
if(!false && !true){
alert(2);
}
if(!true && !false){
alert(3);
}
if(!false && !false){
alert(4);
}
=>결과는 4이다. false를 뒤집으면 true 가 되는데 4번 밖에 없다. 다시. &&는 양쪽다 true 여야 한다.Boolean의 대체제
- 조건문에 사용될 수 있는 데이터형에 꼭 Boolean만 들어갈 필요는 없다
- JS에서 숫자 0은 false로, 0 제외 다른 숫자는 true로 간주된다.
- JS에서 false로 간주되는 것들: 빈 문자열인 '', 0, null, undefined, NaN
기타 false로 간주되는 데이터 형
if(!''){
alert('빈 문자열')
}
if(!undefined){
alert('undefined');
}
var a;
if(!a){
alert('값이 할당되지 않은 변수');
}
if(!null){
alert('null');
}
if(!NaN){
alert('NaN');
}!를 앞에 붙였으니 다 true로 나오지만, 원본은 false 이다.
한 번 해볼려면 F12누르고 console에서 실험을 해보자.
JAVASCRIPT 배우기
'[자기계발] > 유튜브로 코딩배우기' 카테고리의 다른 글
| [생활코딩] JavaScript 문법 - 함수 (0) | 2021.05.24 |
|---|---|
| [생활코딩] JavaScript 문법 - 반복문 (2) | 2021.05.22 |
| [생활코딩] JavaScript 기본문법 정리 (숫자와 문자, 변수, 주석, 줄바꿈과 여백, 비교) (0) | 2021.05.18 |
| [생활코딩] React 강의 완강 - 20~21강 update 구현 (0) | 2021.05.11 |
| [생활코딩]React 강의-4 18강~19강 create (0) | 2021.05.10 |
