스터디 2주차-자바스크립트기초2

36
Javascript & jQuery 실무제작 기초 스터디 2주차 - 반복문과 배열 김세환([email protected]) / 2014.11.30 (sun)

Transcript of 스터디 2주차-자바스크립트기초2

Page 1: 스터디 2주차-자바스크립트기초2

Javascript & jQuery 실무제작 기초 스터디

2주차 - 반복문과 배열 김세환([email protected]) / 2014.11.30 (sun)

Page 2: 스터디 2주차-자바스크립트기초2

반복문

Page 3: 스터디 2주차-자바스크립트기초2

반복문을 쓰는 이유는 뭘까요?

Page 4: 스터디 2주차-자바스크립트기초2

반복되는 작업을 편하게 하기 위해서!

Page 5: 스터디 2주차-자바스크립트기초2

반복문을 쓰지 않는다면?

Page 6: 스터디 2주차-자바스크립트기초2

어이 장그래씨 고객 명단

추려서 10명만 출력해줘

네 알겠습니다

Page 7: 스터디 2주차-자바스크립트기초2

이런식으로 하면 되겠죠?

어 잘했네 수고했어

Page 8: 스터디 2주차-자바스크립트기초2

혼자하는 일이 아니라면서요…

어… 근데 말이야 장그래씨 잘했는데 명단이 더 필요할거같네

그냥 아예 다 뽑아줘

500명정도 되던가?

할수있지?

Page 9: 스터디 2주차-자바스크립트기초2
Page 10: 스터디 2주차-자바스크립트기초2

500명이란다… 혼자하는 일이 아니라면서요… 500명을 죄다 복사해서 붙여넣어야 하나…

야 저거 괜찮겠냐?

글쎄요… for문 쓰면 금방할텐데…

Page 11: 스터디 2주차-자바스크립트기초2

지루하고 힘든 반복문… 사람의 힘으로 하기에

힘든 일들을 콤퓨터는 금방 해냅니다

Page 12: 스터디 2주차-자바스크립트기초2

반복문의 종류 크게 2가지!

while 초기값? 아 몰라! 조건만 맞으면 무한반복!

for 조건은 당연해!

그래도 초기값이랑 한번 돌때마다 체크는 해야지!

Page 13: 스터디 2주차-자바스크립트기초2

while(조건)• 조건만 맞으면 무한반복하는 반복문

• 카운터 값을 따로 지정해야 for 처럼 사용할 수 있다.

• (예) 구구단 3단을 출력해주세요var i = 1;while ( i <= 9 ) { document.write(“3 x ” + i + “ = ” + (i * 3) ); i ++;}

Page 14: 스터디 2주차-자바스크립트기초2

for (초기화 ; 조건 ; 한바퀴 돌때 할 일)

• while과 다르게 카운터를 이용할 수 있음

• (예) 구구단 3단을 출력해주세요for ( var i = 1 ; i < 9 ; i++) { document.write(“3 x ” + i + “ = ” + (i * 3) ); }

Page 15: 스터디 2주차-자바스크립트기초2

우선 for 문만 쓰세요!

• while을 써야할때도 분명히 있을겁니다. 하지만 거의 모든 while문은 for문으로 만들 수 있습니다. 둘의 차이점은 정확히 알아두되 for문만 연습하세요.

• for문을 잘 쓰게되면 프로그래밍에 대한 감이 옵니다. 정말입니다…

Page 16: 스터디 2주차-자바스크립트기초2

연습하기http://www.webdongne.com/bbs/bbs/board.php?

bo_table=s_js_core_for1

Page 17: 스터디 2주차-자바스크립트기초2

잠시 쉬고 배열을 공부해보죠

Page 18: 스터디 2주차-자바스크립트기초2

배열(Array)

Page 19: 스터디 2주차-자바스크립트기초2

배열을 쓰는 이유는 뭘까요?

Page 20: 스터디 2주차-자바스크립트기초2

비슷한 성격의 여러 데이터들을 한 저장소에 저장해놓고

필요할 때 꺼내 쓰기 위해서!

Page 21: 스터디 2주차-자바스크립트기초2

배열을 쓰지 않는다면?

Page 22: 스터디 2주차-자바스크립트기초2

코드가 길고 복잡해집니다

var beer1 = “버드”; var beer2 = “코로나”; var beer3 = “버드라이트”;… var beer9 = “하이네켄”;

Page 23: 스터디 2주차-자바스크립트기초2

또 무슨 장점이 있을까요?

Page 24: 스터디 2주차-자바스크립트기초2

혼자하는 일이 아니라면서요…

어… 근데 말이야 장그래씨 잘했는데 말이야

맥주말고 와인이랑 소주도 자료가필요할거같네

그거 분류해서 다 뽑아줘

Page 25: 스터디 2주차-자바스크립트기초2
Page 26: 스터디 2주차-자바스크립트기초2

배열을 쓰면 분류별로 나눠 담을 수 있습니다.

var beers = [‘버드’,’코로나’,’버드라이트’,’밀러’,하이네켄’];

var sojus = [‘참이슬’,’처음처럼’,’시원소주’,’한라산’]; var wines = [‘레드’,’화이트’,’잘몰라요 와인은…’];

Page 27: 스터디 2주차-자바스크립트기초2

아무튼 배열은 비슷한 데이터를 저장하고

꺼내쓰는 일종의 창고입니다.

Page 28: 스터디 2주차-자바스크립트기초2

배열 사용법

Page 29: 스터디 2주차-자바스크립트기초2

배열 만들기var beers = [‘버드’,’코로나’,’버드라이트’,’밀러’,하이네켄’];

Page 30: 스터디 2주차-자바스크립트기초2

배열 요소 값 꺼내쓰기beer[1]

Page 31: 스터디 2주차-자바스크립트기초2

배열 갯수 알아내기beers.length출력값: 9

Page 32: 스터디 2주차-자바스크립트기초2

배열은 우선 여기까지만 알아두세요. 그 외에 요소 추가, 요소 삭제, 정렬등 많은 기능이 있습니다만 저

장하고 꺼내쓰면 왠만한건 다 합니다!

그리고 length 는 for 돌릴려면 반드시 알아야돼요

Page 33: 스터디 2주차-자바스크립트기초2

그리고 배열은 반복문과 찰떡궁합이죠!

Page 34: 스터디 2주차-자바스크립트기초2

for 를 이용한 배열 활용

• var cars = ["Saab", "Volvo", “BMW”,”Hyundai”,”KIA”… 기타 많은 자동차 회사들];for (var i = 0 ; i < cars.length ; i++) { document.write( cars[i] ); }

Page 35: 스터디 2주차-자바스크립트기초2

연습하기http://www.webdongne.com/bbs/bbs/board.php?

bo_table=s_js_lib_array

Page 36: 스터디 2주차-자바스크립트기초2

오늘의 자바스크립트

기초가 끝났습니다!

잠시 쉬고 오늘의 제이쿼리 기초를

공부하겠습니다! 수고하셨습니다!