웹동네 스터디 2주차 14.11.30

1. Javascript & jQuery
실무제작 기초 스터디
2주차 - 반복문과 배열
김세환(hidepink@naver.com) / 2014.11.30 (sun)

2. 반복문

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

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

5. 반복문을 쓰지 않는다면?

6. 어이 장그래씨
고객 명단
추려서 10명만 출력해줘
네 알겠습니다

7. 이런식으로
하면 되겠죠?
어 잘했네
수고했어

8. 어… 근데 말이야 장그래씨
잘했는데 명단이 더 필요할거같네
그냥 아예 다 뽑아줘
500명정도 되던가?
할수있지?
혼자하는 일이 아니라면서요…

10. 야 저거 괜찮겠냐?
500명이란다… 혼자하는 일이 아니라면서요…
500명을 죄다 복사해서 붙여넣어야 하나…
글쎄요… for문 쓰면 금방할텐데…

11. 지루하고 힘든 반복문…
사람의 힘으로 하기에
힘든 일들을
콤퓨터는 금방 해냅니다

12. 반복문의 종류 크게 2가지!
while
초기값? 아 몰라!
조건만 맞으면
무한반복!
for
조건은 당연해!
그래도 초기값이랑
한번 돌때마다
체크는 해야지!

13. while(조건)
• 조건만 맞으면 무한반복하는 반복문
• 카운터 값을 따로 지정해야 for 처럼 사용할 수 있다.
• (예) 구구단 3단을 출력해주세요
var i = 1;
while ( i <= 9 ) {
document.write(“3 x ” + i + “ = ” + (i * 3) );
i ++;
}

14. for (초기화 ; 조건 ; 한바퀴 돌때 할 일)
• while과 다르게 카운터를 이용할 수 있음
• (예) 구구단 3단을 출력해주세요
for ( var i = 1 ; i < 9 ; i++) {
document.write(“3 x ” + i + “ = ” + (i * 3) );
}

15. 우선 for 문만 쓰세요!
• while을 써야할때도 분명히 있을겁니다. 하지만 거의 모든
while문은 for문으로 만들 수 있습니다. 둘의 차이점은 정확
히 알아두되 for문만 연습하세요.
• for문을 잘 쓰게되면 프로그래밍에 대한 감이 옵니다.
정말입니다…

16. 연습하기
http://www.webdongne.com/bbs/bbs/board.php?
bo_table=s_js_core_for1

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

18. 배열(Array)

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

20. 비슷한 성격의 여러 데이터들을
한 저장소에 저장해놓고
필요할 때 꺼내 쓰기 위해서!

21. 배열을 쓰지 않는다면?

22. var beer1 = “버드”;
var beer2 = “코로나”;
var beer3 = “버드라이트”;
…
var beer9 = “하이네켄”;
코드가 길고 복잡해집니다

23. 또 무슨 장점이 있을까요?

24. 어… 근데 말이야 장그래씨
잘했는데 말이야
맥주말고 와인이랑 소주도 자료가
필요할거같네
그거 분류해서 다 뽑아줘
혼자하는 일이 아니라면서요…

26. var beers = [‘버드’,’코로나’,’버드라이트’,’밀러’,하이네켄’];
var sojus = [‘참이슬’,’처음처럼’,’시원소주’,’한라산’]; var wines = [‘레드’,’화이트’,’잘몰라요 와인은…’];
배열을 쓰면 분류별로 나눠 담을 수 있습니다.

27. 아무튼 배열은
비슷한 데이터를 저장하고
꺼내쓰는 일종의 창고입니다.

28. 배열 사용법

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

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

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

32. 배열은 우선 여기까지만 알아두세요. 그 외에 요소
추가, 요소 삭제, 정렬등 많은 기능이 있습니다만 저
장하고 꺼내쓰면 왠만한건 다 합니다!
그리고 length 는 for 돌릴려면 반드시 알아야돼요

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

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

35. 연습하기
http://www.webdongne.com/bbs/bbs/board.php?
bo_table=s_js_lib_array

36. 오늘의
자바스크립트
기초가
끝났습니다!
잠시 쉬고
오늘의 제이쿼리 기초를
공부하겠습니다!
수고하셨습니다!