남고생들의 소소한 개발 일지
[JS] 조건문(1) 본문
조건문은 JavaScript 뿐만이라 모든 프로그래밍 언어에서 필수적으로 알아둬야 할 중요한 부분입니다.
조건문이란 if로 시작하며 주어진 조건에 따라 애플리케이션을 다르게 동작하는 것입니다.
예를 들어 Boolean은 단순히 참과 거짓을 판별해내는 거라면
if는 참일 시 자신이 내리고 싶은 명령문이 실행됩니다.
예제를 한번 살펴보겠습니다.
if(true) {
alert('result : true');
}
만약 true라면 result : true라는 값을 알림 창으로 띄워라
if(false) {
alert('result : true');
}
만약 false라면 result : true라는 값을 알림 창으로 띄워라
위 예제 2개를 F12을 눌러 콘솔 창에서 확인해 보겠습니다.
첫 번째 예제는 알림 창이 뜨는 반면
두 번째 예제는 아무것도 뜨지 않습니다.
이 예제를 통해 알 수 있는 점은
조건에 맞으면 내가 원하는 명령을 수행
조건에 맞지 않으면 아무것도 출력시키지 않는다는 것입니다.
그럼 조건에 맞지 않으면 무조건 출력을 안 할까요?
꼭 그렇지 않습니다, else라는 문법을 사용하면 다른 명령을 내릴 수가 있습니다.
else
if는 참일 시 자신이 내리고 싶은 명령문이 실행되는 반면
else는 거짓일 시 자신이 내리고 싶은 명령문이 실행됩니다.
예제를 한번 살펴보겠습니다.
if(true) {
alert(true);
} else {
alert(false);
}
만약 참이면 ture라는 값을 알림 창에 띄우고
아니면 false라는 값을 알림 창에 띄워라
if(false) {
alert(true);
} else {
alert(false);
}
만약 거짓이면이면 ture라는 값을 알림 창에 띄우고
아니면 false라는 값을 알림 창에 띄워라
위 예제 2개를 F12을 눌러 콘솔 창에서 확인해 보겠습니다.
첫 번째 예제는 true가 뜨는 반면
두 번째 예제는 false가 뜹니다.
이 예제를 통해 알 수 있는 점은
else를 사용하면 참이 아닐 시 내가 원하는 명령을 수행
else를 사용하지 않으면 참이 아닐 시 아무 값도 출력 안된다는 것입니다.
그럼 조건문은 한 번밖에 못쓰는 걸까요?
꼭 그렇지 않습니다, else if라는 문법을 사용하면 조건문을 좀 더 풍부하게 사용할 수 있습니다.
else if
바로 예제를 살펴보겠습니다.
if(false) {
alert(1);
} else if(true) {
alert(2);
} else {
alert(3);
}
만약 거짓이면 1을 출력해라
그리고 만약 참이면 2를 출력해라
모두 아니면 3을 출력해라
위 예제를 F12을 눌러 콘솔 창에 입력하면 무슨 알림 창이 뜰까요?
조건에 맞는 2의 값을 가진 알림 창이 출력됩니다.
이 예제를 통해 알 수 있는 점은
else if는 좀 더 다양한 케이스의 조건을 검사할 수 있는 기회를 제공한다는 것입니다.
예외로 else if를 사용한다면 마지막 else는 생각 가능합니다.
이제 저희가 해볼 것은 앞서 배운 변수와 비교 연사자를 방금 배운 조건문과 함께 써보려고 합니다.
만약 변수와 비교 연산자를 안 배우고 오셨다면 아래 링크를 통해 학습하시길 바랍니다.
[JS]변수,주석
이번에 내가 정리할것은 JavaScript에서 변수와 주석에 대해서 정리를 할거다 일단 변수는 무엇인지부터 알아보자 데이터를 처리하기 위해서는 여러가지 공간이 있어야 하는데 그 공관을 변수(변하는 수)라고 한다..
aco-study.tistory.com
[JS] 줄바꿈과 여백, 비교
줄 바꿈과 여백 세미콜론(;): '명령이 끝났다'라는 것을 명시적으로 표시할 때 사용 var a = 1; alert(a) 다음과 같이 세미콜론을 붙이지 않더라도 동작한다. -> 이는 자바스크립트는 줄이 바뀌면 명령이 끝났다고..
aco-study.tistory.com
먼저 예제를 보겠습니다.
a = 1;
if(a===1){
alert(1);
}
a라는 변수의 값은 1이다.
만약 a변수의 값이 1이면 1이라는 값의 알림 창을 띄워라
위 예제를 F12을 눌러 콘솔 창에 입력하면 무슨 알림 창이 뜰까요?
a의 값이 같아 1이라는 값의 알림창이 출력됩니다.
만약 a의 값이 2라면 어떻게 됐을까요?
아무것도 출력되지 않습니다.
만약 값이 다를 경우도 출력시키고 싶다면
아까 배운 else 또는 else if를 사용하시면 됩니다.
이제 간단한 로그인 사이트를 만들어 보겠습니다.
그전에 prompt에 대해 알아봐야 합니다.
prompt
예제를 한번 살펴보겠습니다.
prompt('당신의 나이는?');
위 예제를 F12을 눌러 콘솔 창에서 확인해 보겠습니다.
이렇게 값을 넣을 수 있는 알림 창이 출력되고 저의 나이를 입력하고 확인을 누르면
콘솔 창에 제가 입력한 저의 나이가 출력됩니다.
이 예제를 통해 알 수 있는 점은
prompt는 어떠한 값을 사용자로부터 받을 수 있는 기능을 가지고 있는 구문이라는 것입니다.
지금까지 배운 변수, 비교문, 조건문, prompt 등등을 총집합해서 간단한 로그인 사이트를 만들어 볼 수 있습니다.
아직 어려우시다면 아래 첨부파일을 다운로드하여서 직접 id와 password를 입력해 보시고
이해 못하시는 부분을 다시 학습하신 뒤 다음으로 넘어가시면 됩니다.
다음 시간에는 논리 연산자 그리고 boolean의 대체제 등에 대해 알아보겠습니다.
'프로그래밍 > JavaScript' 카테고리의 다른 글
| [JS] 반복문 (0) | 2019.10.06 |
|---|---|
| [js]조건문(2) (0) | 2019.10.04 |
| [JS] 줄바꿈과 여백, 비교 (0) | 2019.10.02 |
| [JS]변수,주석 (0) | 2019.10.01 |
| [JS] 숫자와 문자 (0) | 2019.09.30 |
