자바스크립트 jquery 완전정복 스터디 1 - CH2 - 조건문 if

  • SUNGMIN SHIN
  • 17 Minutes
  • 2018년 1월 3일

[ 자바스크립트+jQuery 완전정복 스터디 1 ]

(http://book.naver.com/bookdb/book_detail.nhn?bid=9650891)


CHAPTER 04 조건문 if


lesson01 조건문 소개

01_ 조건문이란?

특정 조건이 맞는 경우에만 특정 구문을 실행하고자 할 떄 사용하는 자바스크립트의 제어문 입니다.


02_ 조건문은 이럴 때 사용해요

-사이트에 로그인 시 조건문을 사용하여 입력한 아이디와 패스워드가 서버에 저장된 정보와 같은지 비교 후 같다면 사이트의 접속을 허락하고 아니라면 오류 메시지를 띄우는 경우
-여러분이 뽑은 번호가 1번이면 냉장고 2번이면 TV, 3번이면 세ㅏㄱ기를 주는 경품 추첨기를 만들 때도 조건문을 사용합니다.
-게시물 삭제 시 게시물의 삭제 여부를 묻는 메시지 박스에서 사용 등


03_ 조건문의 종류

if - 가장 일반적으로 사용하는 조건문
switch - if로 만들어진 다중 조건처리를 비교적 간결하게 처리할 수 있는 조건문


lesson02 if문 소개


01_if문이란?

if문은 특정 조건이 맞는 경우에만 특정 구문을 실행하길 원하는 경우에 사용하는 조건문 중 하나 입니다.

내가 로또에 당첨된다면

1
2
3
4
5
6
7
8
9
10
var mylotto = '나의 로또번호';
var weeklotto = '이번 주 로또 당첨번호';

if (mylotto == weeklotto) {
 // 내 로또와 금주 당첨번호가 같은 경우
  난 집을 사겠다();
}else{
 // 내 로또와 금주 당첨번호가 같지 않은 경우
  평소처럼 그냥 산다();
}

위와 같은 식으로 특정 조건이 맞을 때만 원하는 구문을 실행하고 싶을 때 조건문 if를 사용합니다.
프로그래밍언어는 일상 생활과 많이 닮아 있습니다. 우리가 의사소통을 위해 글자를 사용하듯 컴퓨터와 의사소통을 위해서 프로그래밍 언어를 사용하는 것이죠 즉 프로그래밍 언어란? 우리가 생각하고 있는 내용을 컴퓨터가 알아들을 수 있게 사용하는 또 다른 언어 입니다.


02_if문 문법

1
2
3
4
5
6
7
if (조건식1) {
 // 참(true)일 경우 실행될 코드
}else if (조건식2) {
 // 조건식1이 거짓(false)이고 조건식2가 참(true)인 경우 실행될 코드
}else{
 // 조건식 1, 2가 모두 거짓(false)인 경우 실행 될 코드
}


lesson03 논리 비교 연산자

01_논리 비교 연산자 용도

비교 연산자
두 값을 비교할 때 사용하는 연산자

1
2
3
4
5
6
7
8
9
if (2 > 1) {
 // 크기 비교 (2는 1보다 큰가?)
}else if (10 == 9) {
 // 같은지 비교 (10과 9는 같은가?)
}else if (10 != 9) {
 // 같지 않은지를 비교 (10과 9은 같지 않은가?) 
}else if (10 >= 9) {
 // 크기와 같은 지를 비교 (10이 9보다 크거나 같은가? )
}

논리 연산자
여러 개의 비교 연산자를 묶을 때 사용하는 연산자

1
2
3
4
5
6
7
8
9
10
// &&(and) 연산자
if ( (2 > 1) && (10 == 5) ) {
 // 첫번 째 비교(2는 1보다 큰가)와 두번 쨰 비교(10은 5와 같은가)가 모두 참인지를 판단
 // &&는 비교값A와 비교값B가 모두 참인지 여부를 판단 
}
// ||(or) 연산자 
if ( (2 > 1) || (10 == 5) ) {
 // 첫번 째 비교(2는 1보다 큰가)와 두번 쨰 비교(10은 5와 같은가)중에 하나라도 참인지를 판단
 // ||는 비교값A와 비교값B중에 하나라도 참인지 여부를 판단 
}


03_비교 연산자

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// a가 b보다 큰 값인가?
if (a > b) { }

// a가 b보다 작은 값인가?
if (a < b) { }

// a와 b의 값이 같은 가?
if (a == b) { }

// a와 b의 값이 다른 가?
if (a != b) { }

// a가 b보다 크거나 같은 가? 
if (a >= b) { }

// a가 b작거나 크거나 같은 가? 
if (a <= b) { }


04_논리 연산자

1
2
3
4
5
6
7
8
9
10
//  &&(AND) - a와 b가 같고 c와 d도 같은가?  
if (a == b && c == b) { }

// ||(OR) - a와 b가 같거나 c와 d가 같은가? 
if (a == b || c == b) { }


// 더 잘보이게 하기 위해 괄호로 영역을 구분해줘도 좋습니다.
if ( (a == b) && (c == b) ) { }
if ( (a == b) || (c == b) ) { }


lesson04 if에 논리 비교 연산자 연동하기

비교연산자의 활용 예

논리 연산자의 활용 예


lesson05 ~ 07 if

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
/* 1단계 if */
if ('안녕' == '안녕') {
 alert('반가워~');
}
// 2, 3단계가 존재하지 않는다면 이렇게도 작성가능(권장하진 않습니다~)
if ('안녕' == '안녕') alert('반가워!');

// 세미콜론은 문장의 종료를 뜻하므로 한줄로 작성 시 작성에 주의하세요~
if ('안녕' == '안녕'); alert('반가워!');


/* 2단계 if(if ~ else) */
if ('hello' == 'hello') {
 alert('welcome~');
}else{
 alert('반가워');
}
// if ~ else문은 첫번 째 조건문을 실행 후 참이라면 실행, 거짓이라면 else를 실행 합니다.


/* 3단계 if(if ~ else if ~ else) */
if ('hello' == 'hello') {
 alert('welcome');
}else if ('안녕' == '안녕') {
 alert('방가');
}else if ('안녕하세요' == '안녕하세요') {
 alert('반갑습니다~');
}else{
 alert('누구세요?');
}

// 2단계와 마찬가지로 순차적으로 값을 비교하며 참인 경우 해당 구문을 실행합니다.
// 참으로 판단되는 경우 아래 남아있는 조건은 실행되지 않습니다.

3단계의 예


lesson08 조건부 연산자(삼항연산자)

if else의 형태의 코드를 간결하게 표현할 수 있게 해주는 문법입니다.

(조건식) ? 참일 때 실행될 코드 : 거짓일 때 실행 될 코드;

사용 예

© 2019 windfanta.github.io/blog
POWER BY HEXO, THEME BY LAUGHING