SlideShare uma empresa Scribd logo
1 de 20
For non-developers!
Learn Javascript Programming!
!
Learning contents with!
Conditional statement!
!
!
!
!
!
Kim min tae @ibare!
NCSOFT http://ibare.kr https://medium.com/@ibare
#4
조건 그리고 흐름
비가오고 있나요?
오늘 기온이 몇도인가요?
내가 좋아하는 영화는?
런닝머신을 시작한지 한시간이 되었나요?
김치찌개의 간이 맞나요?
운동장 10바퀴 돌아!
조건 그리고 흐름
어떤 비교가
맞느냐? or 틀리냐?
용어가 조금 익숙해지면
Yes or No
true or false
!0 or 0
비교 연산자의 종류
크다, 작다, 같다
>, <, ==
크거나 같다, 작거나 같다, 같지 않다
>=, <=, !=
완전히 같다, 완전히 다르다
===, !==
논리 연산자로 비교 확장
조건 A 그리고 조건 B 그리고 …
(A > 1 && B < 1 && …)
조건 A 또는 조건 B 또는 …
(A > 1 || B < 1 || …)
조건 A 그리고 조건 B 또는 조건 C 그리고 조건 D
(A > 1 && B < 1) || (C < 1 && D > 1)
조건에 따른 흐름 종류
1
2
3
C
Yes
1
32 C
4
5
Yes No
1
V
C1 C2 C3 CD
2
6
3 4 5
if if else switch
조건(C)이 맞으면 2를 수행 조건이 맞으면 2를 수행, 조건이 틀리면 3을 수행 조건이 C1이면 2를, C2면 3을, C3면 4를!
모두 아니면 5를 수행
조건에 따른 흐름 반복
1
2
3
C
No
Yes
1
2
3
C
No
Yes
1
2
3
C
No
Yes
for while do while
조건(C)이 맞는 동안 2를 수행 조건이 맞는 동안 2를 수행 2를 수행한 후 조건이 맞으면 다시 2를 수행
비가오고 있나요?
출근 준비 !
!
if (비가 오는가) {!
우산을 챙긴다!
}!
!
출근
1
2
3
C
Yes
오늘 기온이 몇도인가요?
1
32 C
4
5
Yes No
출근 준비 !
!
if (오늘 기온) { !
두꺼운 옷 입기!
} else {!
앏은 옷 입기!
}!
!
출근
내가 좋아하는 영화는?
switch (영화) {!
case ‘그래비티’:!
끝내줘!!
case ‘죽은시인의사회’:!
감동이야!!
case ‘반지의제왕’:!
말이 필요없지!!
default:!
싫어!!
}
1
V
C1 C2 C3 C4
2
6
3 4 5
운동장 10바퀴 돌아!
for(10바퀴) {!
뛰어!
}
1
2
3
C
No
Yes
런닝머신을 시작한지 한시간이 되었나요?
while(시간) {!
뛰어!
}
1
2
3
C
No
Yes
김치찌개의 간이 맞나요?
do {!
소금 투하!
} (간이 맞나)!
1
2
3
C
No
Yes
운동장 10바퀴 돌아!!
for vs. while
Javascript!
대충 비교하기 vs. 확실히 비교하기
if (1 == 1)!
if (1 == ‘1’)!
if (1 === ‘1’)
true
true
false
언제나 확실히 비교하기 연산자를 사용하는길 권고합니다
실습 #1 - 1부터 10까지 숫자 표시하기!
* HTML 버전
실습 #1 - 1부터 10까지 숫자 표시하기!
* Javascript 버전
실습 #1 - 1부터 10까지 숫자 표시하기!
* 홀짝는 빨간색, 짝수는 파란색
실습 #1 - 1부터 10까지 숫자 표시하기!
* 홀짝수를 CSS를 이용하기
1 “다음시간에”;!
2 “잘자요~~;
Unclosed string.

Mais conteúdo relacionado

Mais de 민태 김

웹을 지탱하는 차세대 기술 @한국웹20주년 컨퍼런스
웹을 지탱하는 차세대 기술 @한국웹20주년 컨퍼런스웹을 지탱하는 차세대 기술 @한국웹20주년 컨퍼런스
웹을 지탱하는 차세대 기술 @한국웹20주년 컨퍼런스민태 김
 
초보자를 위한 정규 표현식 가이드 (자바스크립트 기준)
초보자를 위한 정규 표현식 가이드 (자바스크립트 기준)초보자를 위한 정규 표현식 가이드 (자바스크립트 기준)
초보자를 위한 정규 표현식 가이드 (자바스크립트 기준)민태 김
 
외계어 스터디 4/5 Event & Library
외계어 스터디 4/5 Event & Library외계어 스터디 4/5 Event & Library
외계어 스터디 4/5 Event & Library민태 김
 
버전관리를 들어본적 없는 사람들을 위한 DVCS - Git
버전관리를 들어본적 없는 사람들을 위한 DVCS - Git버전관리를 들어본적 없는 사람들을 위한 DVCS - Git
버전관리를 들어본적 없는 사람들을 위한 DVCS - Git민태 김
 
외계어 스터디 3/5 function and object
외계어 스터디 3/5   function and object외계어 스터디 3/5   function and object
외계어 스터디 3/5 function and object민태 김
 
외계어 스터디 2/5 - Expressions & statements
외계어 스터디 2/5 - Expressions & statements외계어 스터디 2/5 - Expressions & statements
외계어 스터디 2/5 - Expressions & statements민태 김
 
외계어 스터디 1/5 - Overview
외계어 스터디 1/5 - Overview외계어 스터디 1/5 - Overview
외계어 스터디 1/5 - Overview민태 김
 
비개발자를 위한 Javascript 알아가기 #7.1
비개발자를 위한 Javascript 알아가기 #7.1비개발자를 위한 Javascript 알아가기 #7.1
비개발자를 위한 Javascript 알아가기 #7.1민태 김
 
비개발자를 위한 Javascript 알아가기 #7
비개발자를 위한 Javascript 알아가기 #7비개발자를 위한 Javascript 알아가기 #7
비개발자를 위한 Javascript 알아가기 #7민태 김
 
비개발자를 위한 Javascript 알아가기 #6.1
비개발자를 위한 Javascript 알아가기 #6.1비개발자를 위한 Javascript 알아가기 #6.1
비개발자를 위한 Javascript 알아가기 #6.1민태 김
 
비개발자를 위한 Javascript 알아가기 #6
비개발자를 위한 Javascript 알아가기 #6비개발자를 위한 Javascript 알아가기 #6
비개발자를 위한 Javascript 알아가기 #6민태 김
 
MEAN Stack 기반 모바일 서비스 개발 overview
MEAN Stack 기반 모바일 서비스 개발 overviewMEAN Stack 기반 모바일 서비스 개발 overview
MEAN Stack 기반 모바일 서비스 개발 overview민태 김
 
비개발자를 위한 Javascript 알아가기 #5.1
비개발자를 위한 Javascript 알아가기 #5.1비개발자를 위한 Javascript 알아가기 #5.1
비개발자를 위한 Javascript 알아가기 #5.1민태 김
 
비개발자를 위한 Javascript 알아가기 #5
비개발자를 위한 Javascript 알아가기 #5비개발자를 위한 Javascript 알아가기 #5
비개발자를 위한 Javascript 알아가기 #5민태 김
 
비개발자를 위한 Javascript 알아가기 #4.1
비개발자를 위한 Javascript 알아가기 #4.1비개발자를 위한 Javascript 알아가기 #4.1
비개발자를 위한 Javascript 알아가기 #4.1민태 김
 
비개발자를 위한 Javascript 알아가기 #3
비개발자를 위한 Javascript 알아가기 #3비개발자를 위한 Javascript 알아가기 #3
비개발자를 위한 Javascript 알아가기 #3민태 김
 
비개발자를 위한 Javascript 알아가기 #2
비개발자를 위한 Javascript 알아가기 #2비개발자를 위한 Javascript 알아가기 #2
비개발자를 위한 Javascript 알아가기 #2민태 김
 
비개발자를 위한 Javascript 알아가기 #1
비개발자를 위한 Javascript 알아가기 #1비개발자를 위한 Javascript 알아가기 #1
비개발자를 위한 Javascript 알아가기 #1민태 김
 
Waterfall과 agile의 불편한 동거 public
Waterfall과 agile의 불편한 동거 publicWaterfall과 agile의 불편한 동거 public
Waterfall과 agile의 불편한 동거 public민태 김
 

Mais de 민태 김 (20)

Git - Level 2
Git - Level 2Git - Level 2
Git - Level 2
 
웹을 지탱하는 차세대 기술 @한국웹20주년 컨퍼런스
웹을 지탱하는 차세대 기술 @한국웹20주년 컨퍼런스웹을 지탱하는 차세대 기술 @한국웹20주년 컨퍼런스
웹을 지탱하는 차세대 기술 @한국웹20주년 컨퍼런스
 
초보자를 위한 정규 표현식 가이드 (자바스크립트 기준)
초보자를 위한 정규 표현식 가이드 (자바스크립트 기준)초보자를 위한 정규 표현식 가이드 (자바스크립트 기준)
초보자를 위한 정규 표현식 가이드 (자바스크립트 기준)
 
외계어 스터디 4/5 Event & Library
외계어 스터디 4/5 Event & Library외계어 스터디 4/5 Event & Library
외계어 스터디 4/5 Event & Library
 
버전관리를 들어본적 없는 사람들을 위한 DVCS - Git
버전관리를 들어본적 없는 사람들을 위한 DVCS - Git버전관리를 들어본적 없는 사람들을 위한 DVCS - Git
버전관리를 들어본적 없는 사람들을 위한 DVCS - Git
 
외계어 스터디 3/5 function and object
외계어 스터디 3/5   function and object외계어 스터디 3/5   function and object
외계어 스터디 3/5 function and object
 
외계어 스터디 2/5 - Expressions & statements
외계어 스터디 2/5 - Expressions & statements외계어 스터디 2/5 - Expressions & statements
외계어 스터디 2/5 - Expressions & statements
 
외계어 스터디 1/5 - Overview
외계어 스터디 1/5 - Overview외계어 스터디 1/5 - Overview
외계어 스터디 1/5 - Overview
 
비개발자를 위한 Javascript 알아가기 #7.1
비개발자를 위한 Javascript 알아가기 #7.1비개발자를 위한 Javascript 알아가기 #7.1
비개발자를 위한 Javascript 알아가기 #7.1
 
비개발자를 위한 Javascript 알아가기 #7
비개발자를 위한 Javascript 알아가기 #7비개발자를 위한 Javascript 알아가기 #7
비개발자를 위한 Javascript 알아가기 #7
 
비개발자를 위한 Javascript 알아가기 #6.1
비개발자를 위한 Javascript 알아가기 #6.1비개발자를 위한 Javascript 알아가기 #6.1
비개발자를 위한 Javascript 알아가기 #6.1
 
비개발자를 위한 Javascript 알아가기 #6
비개발자를 위한 Javascript 알아가기 #6비개발자를 위한 Javascript 알아가기 #6
비개발자를 위한 Javascript 알아가기 #6
 
MEAN Stack 기반 모바일 서비스 개발 overview
MEAN Stack 기반 모바일 서비스 개발 overviewMEAN Stack 기반 모바일 서비스 개발 overview
MEAN Stack 기반 모바일 서비스 개발 overview
 
비개발자를 위한 Javascript 알아가기 #5.1
비개발자를 위한 Javascript 알아가기 #5.1비개발자를 위한 Javascript 알아가기 #5.1
비개발자를 위한 Javascript 알아가기 #5.1
 
비개발자를 위한 Javascript 알아가기 #5
비개발자를 위한 Javascript 알아가기 #5비개발자를 위한 Javascript 알아가기 #5
비개발자를 위한 Javascript 알아가기 #5
 
비개발자를 위한 Javascript 알아가기 #4.1
비개발자를 위한 Javascript 알아가기 #4.1비개발자를 위한 Javascript 알아가기 #4.1
비개발자를 위한 Javascript 알아가기 #4.1
 
비개발자를 위한 Javascript 알아가기 #3
비개발자를 위한 Javascript 알아가기 #3비개발자를 위한 Javascript 알아가기 #3
비개발자를 위한 Javascript 알아가기 #3
 
비개발자를 위한 Javascript 알아가기 #2
비개발자를 위한 Javascript 알아가기 #2비개발자를 위한 Javascript 알아가기 #2
비개발자를 위한 Javascript 알아가기 #2
 
비개발자를 위한 Javascript 알아가기 #1
비개발자를 위한 Javascript 알아가기 #1비개발자를 위한 Javascript 알아가기 #1
비개발자를 위한 Javascript 알아가기 #1
 
Waterfall과 agile의 불편한 동거 public
Waterfall과 agile의 불편한 동거 publicWaterfall과 agile의 불편한 동거 public
Waterfall과 agile의 불편한 동거 public
 

비개발자를 위한 Javascript 알아가기 #4