안녕하세요 오늘은 조건문에 대해서 정리해보겠습니다.
1/5
조건문은 컴퓨터가 계산기와 구분되는 가장 중요한 차이중 하나입니다.
조건문은 요번 강의중 가장 중요하다고 해도 과언이 아니라고 합니다.
조건문 : 주어진 조건에 따라서 에플리케이션을 다르게 동작하도록 하는것이다.
조건문은 if로 시작하고 if 괄호에 조건을 넣어주게 됩니다. 조건이 될수 있는 값은 boolean(true/false)뿐입니다.
if 조건의 값이 true 경우 if의 중괄호{ } 속의 명령이 수행되고 false는 수행이 되지 않습니다.
소스로 보여드리겠습니다.
|
1
2
3
4
5
6
7
8
9
|
<script type="text/javascript">
if(true){
alert("실행됨"); // 실행됨
}
if(false){
alert("실행안됨"); //실행 안됨
}
alert("끝") </script>
|
cs |
위의 소스는 실행됨 이라는 안내창이 뜨고 끝이라는 안내창이 뜨게될것입니다.
실행안됨 안내창은 조건문이 false이기 떄문에 실행되지 않습니다.
이러한 이유로 조건문과 boolean은 밀접한 관계를 가집니다.
2/5
if 만으론 좀더 복잡한 상황을 처리하는데 부족합니다. 이런경우 else를 함께 사용합니다.
else는 if 구간이 true 일때는 실행이 안되고 false일때 실행이 됩니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<script type="text/javascript">
//if가 true인 구간
if(true){
alert("실행됨");
} else{
alert("실행안됨")
}
//if가 false인 구간
if(false){
alert("실행안됨");
}else{
alert("실행됨");
}
</script>
|
cs |
else if 를 사용시 더욱 풍부하게 조건을 걸수 있습니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<script type="text/javascript">
if(false){
alert("실행안됨");
}else if(true){
alert("실행됨");
}else if(true){
alert("앞에서 이미 실행되어 실행안됨")
}else{
alert("앞에서 이미 싨행되어 실행안됨")
}
</script>
|
cs |
위와 같이 else를 이용하면 더욱 복잡한 조건문도 수행이 가능합니다.
3/5
지금까지 저흰 if안에 true또는 false를 사용하였습니다. 이건 무조껀 if가 실행되거나 실행되지 않기 때문에 사용하지 않아야 하는 코드입니다.
prompt()를 이용하면 입력이 가능한 팝업이 발생합니다.
이것을 이용하면 사용자로부터 값을 받아낼수 있습니다.
alert(prompt())를 수행시면 prompt가 먼저 수행되고 prompt에 입력한 결과가 경고팝업으로 나오게 됩니다.
실습을 해보면
prompt가 먼저 실행되어 입력 팝업이 발생하게 되고
입력 팝업에 '가나다'를 적어 확인을 누르면 입력창에 적은 내용이 경고 팝업으로 발생합니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<script type="text/javascript">
id = prompt('아이디를 입력해 주세요')
if(id=='egoing'){
alert('아이디가 일치합니다.')
} else{
alert(아이디가 일치하지 않습니다.')
}
</script>
</body>
</html>
|
cs |
해당기능을 이용해 조건문을 만든다면 위와 같이 id에 prompt를 이용하여 값을 저장해 주고 저장된값을 이용하여 조건문을 만들어주면 egoing가 들어간 경우 '아이디가 일치합니다.' 다른 값이 들어간경우 '아이디가 일치 하지 않습니다.' 경고 팝업이 발생하게 됩니다.
위와 비슷하게 로그인 로직을 만들게 됩니다.
비밀번호 까지 입력하는 소스를 만들어 보면 아래와 같이 아이디가 같을경우 비밀번호를 입력하고 비밀번호도 같을경우 로그인되었다는 경고창이 나타나게 만들었습니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<script type="text/javascript">
var id = prompt('아이디를 입력해 주세요');
if(id=='egoing'){
var password = prompt('비밀번호를 입력해 주세요')
if(password == '11111'){
alert('로그인 되었습니다..');
} else{
alert('비밀번호가 다릅니다..');
}
} else{
alert('아이디가 일치하지 않습니다.');
}
</script>
</body>
</html>
|
cs |
4/5
논리 연산자를 공부해 보겠습니다.
논리연산자는 조건문을 좀 더 간결하고 다양한 방법으로 구사할 수 있도록 도와줍니다.
논리연산자
&&이 것은 and라고 부르고 좌항과 우항이 모두 참일경우 참이 되는 연산자 입니다.
if(true && true)는 true로 실행이 되고 if(true && false)는 false로 실행이 안됩니다.
3/5에서 구현했던 코드를 &&를 이용해주면 코드를 많이 줄일수 있습니다. 아래 코드를 참조해 주세요
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<script type="text/javascript">
var id = prompt('아이디를 입력해 주세요');
var password = prompt('비밀번호를 입력해 주세요')
if(id=='egoing' && password == '111111'){
alert('로그인 하였습니다.' + id +'님 반갑습니다.');
} else{
alert('아이디 또는 비밀번호가 일치하지 않습니다.');
}
</script>
</body>
</html>
|
cs |
다음으로는 or 연산자를 공부해보겠습니다.
|| or 연산자는 좌우항 중 하나라도 true라면 true 둘다 모두 false 여야지 false가 되는 연산자 입니다.
if(true && true)는 true로 실행이 되고
if(true && false)는 true로 실행이되고
if( false && false)만 false로 if문이 실행되지 않습니다.
!는 부정의 의미로 boolean의 값을 역전시킵니다.
true를 false로 false를 true로 만듭니다. not 연산자라고 합니다.
5/5
boolean의 대체체
관습적으로 0은 false 0이 아닌값은 true로 간주됩니다. 하지만 이것보다는 true나 false를 쓰는게 좋습니다.
false와 0외에 false로 간주되는 데이텨형은 빈 문자열입니다.
예를 들어 if(' '){alert('빈문자열');}은 실행되지 않지만 if('sss'){alert('빈문자열');}는 alert이 수행됩니다.
또한 null과 NaN또한 false로 간주합니다.
'TIL > JavaScript with 생활코딩' 카테고리의 다른 글
| JavaScript - 비교(1/4, 2/4, 3/4, 4/4) 5 (0) | 2024.06.28 |
|---|---|
| JavaScript - 주석 & 줄바꿈과 여백 4 (0) | 2024.06.25 |
| JavaScript - 변수(1/2,2/2) 3 (0) | 2024.06.21 |
| JavaScript - 숫자와 문자(3/4,4/4) 2 (0) | 2024.06.21 |
| JavaScript - 숫자와 문자(1/4,2/4) 2 (0) | 2024.06.19 |
