30
Javascript & jQuery 실무제작 기초 스터디 3주차 - 함수 김세환([email protected]) / 2014.12.7 (sun)

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

Embed Size (px)

Citation preview

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

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

3주차 - 함수 김세환([email protected]) / 2014.12.7 (sun)

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

다중 for• for 안에 for를 또 사용!

• (예) 2학년 각 반의 김씨를 모두 출력해주세요.

• for (var j = 0 ; j < 총반의수 ; j++) { for (var k = 0; k < 총학생의수 ; k++) { if (student[i][j] == “김”) { document.write(student[i][j]); } } }}

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

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

bo_table=s_js_core_for2&wr_id=

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

함수

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

함수를 쓰는 이유

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

짜장면(1개) 추가요!

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

var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면1 = 면 + 짜장소스;

1개 나갑니다!

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

짜장면 20개 추가요!

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

var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면1 = 면 + 짜장소스; var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면2 = 면 + 짜장소스;

var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면1 = 면 + 짜장소스; var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면2 = 면 + 짜장소스;

var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면1 = 면 + 짜장소스; var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면2 = 면 + 짜장소스;

var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면1 = 면 + 짜장소스; var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면2 = 면 + 짜장소스;

var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면1 = 면 + 짜장소스; var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면2 = 면 + 짜장소스;

20개 나갑니다!

var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면1 = 면 + 짜장소스; var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면2 = 면 + 짜장소스;

var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면1 = 면 + 짜장소스; var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면2 = 면 + 짜장소스;

var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면1 = 면 + 짜장소스; var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면2 = 면 + 짜장소스;

var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면1 = 면 + 짜장소스; var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면2 = 면 + 짜장소스;

var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면1 = 면 + 짜장소스; var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면2 = 면 + 짜장소스;

var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면1 = 면 + 짜장소스; var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면2 = 면 + 짜장소스;

var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면1 = 면 + 짜장소스; var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면2 = 면 + 짜장소스;

var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면1 = 면 + 짜장소스; var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면2 = 면 + 짜장소스;

var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면1 = 면 + 짜장소스; var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면2 = 면 + 짜장소스;

var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면1 = 면 + 짜장소스; var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면2 = 면 + 짜장소스;

var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면1 = 면 + 짜장소스; var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면2 = 면 + 짜장소스;

var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면1 = 면 + 짜장소스; var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면2 = 면 + 짜장소스;

var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면1 = 면 + 짜장소스; var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면2 = 면 + 짜장소스;

var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면1 = 면 + 짜장소스; var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면2 = 면 + 짜장소스;

var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면1 = 면 + 짜장소스; var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면2 = 면 + 짜장소스;

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

짜장면 40개 추가요!

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

var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면1 = 면 + 짜장소스; var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면2 = 면 + 짜장소스;

var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면1 = 면 + 짜장소스; var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면2 = 면 + 짜장소스;

var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면1 = 면 + 짜장소스;

var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면1 = 면 + 짜장소스; var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면2 = 면 + 짜장소스;

var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면1 = 면 + 짜장소스; var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면2 = 면 + 짜장소스;

var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면1 = 면 + 짜장소스; var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면2 = 면 + 짜장소스;

var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면1 = 면 + 짜장소스; var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면2 = 면 + 짜장소스;

var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면1 = 면 + 짜장소스; var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면2 = 면 + 짜장소스;

var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면1 = 면 + 짜장소스; var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면2 = 면 + 짜장소스;

var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면1 = 면 + 짜장소스; var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면2 = 면 + 짜장소스;

var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면1 = 면 + 짜장소스; var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면2 = 면 + 짜장소스;

var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면1 = 면 + 짜장소스; var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면2 = 면 + 짜장소스;

var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면1 = 면 + 짜장소스; var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면2 = 면 + 짜장소스;

var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면1 = 면 + 짜장소스; var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면2 = 면 + 짜장소스;

var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면1 = 면 + 짜장소스; var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면2 = 면 + 짜장소스;

var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면1 = 면 + 짜장소스; var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면2 = 면 + 짜장소스;

var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면1 = 면 + 짜장소스; var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면2 = 면 + 짜장소스;

var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면1 = 면 + 짜장소스; var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면2 = 면 + 짜장소스;

var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면1 = 면 + 짜장소스; var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면2 = 면 + 짜장소스;

var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면1 = 면 + 짜장소스; var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면2 = 면 + 짜장소스;

var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면1 = 면 + 짜장소스; var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면2 = 면 + 짜장소스;

var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면1 = 면 + 짜장소스; var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면2 = 면 + 짜장소스;

var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면1 = 면 + 짜장소스; var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면2 = 면 + 짜장소스;

var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면1 = 면 + 짜장소스; var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면2 = 면 + 짜장소스;

var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면1 = 면 + 짜장소스; var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면2 = 면 + 짜장소스;

var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면1 = 면 + 짜장소스;

var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면1 = 면 + 짜장소스; var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면2 = 면 + 짜장소스;

var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면1 = 면 + 짜장소스; var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면2 = 면 + 짜장소스;

var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면1 = 면 + 짜장소스;

var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면1 = 면 + 짜장소스; var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면2 = 면 + 짜장소스;

var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면1 = 면 + 짜장소스; var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면2 = 면 + 짜장소스;

var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면1 = 면 + 짜장소스; var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면2 = 면 + 짜장소스;

var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면1 = 면 + 짜장소스; var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면2 = 면 + 짜장소스;

var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면1 = 면 + 짜장소스; var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면2 = 면 + 짜장소스;

var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면1 = 면 + 짜장소스; var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면2 = 면 + 짜장소스;

var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면1 = 면 + 짜장소스; var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면2 = 면 + 짜장소스;

var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면1 = 면 + 짜장소스;

var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면1 = 면 + 짜장소스; var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면2 = 면 + 짜장소스;

var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면1 = 면 + 짜장소스; var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면2 = 면 + 짜장소스;

var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면1 = 면 + 짜장소스;

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

이런 불필요한 코드의 중복을 막기 위해

함수를 씁니다

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

짜장면 1000개 추가요!

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

makeJjajang(1000);

function makeJJajang(num) { var 짜장면 = []; for (var i = 0 ; i < num ; i++) { var 면 = 면뽑기(); var 짜장소스 = 춘장 + 양념 + 볶음; 짜장면 = 면 + 짜장소스; } return 짜장면; }

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

어렵게 생각하지 맙시다 (우선은)

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

함수는 입력,할일,출력

3가지로 구성됩니다

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

짜장면을 만들면?

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

자바스크립트에서 쓰이는 함수 사용법

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

sum에 담길 값은?

• function plus(x, y) { var z = x + y; return z;}

• var sum = plus(3,2);

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

함수 만드는 법

• function plus(x, y) { var z = x + y; return z;}

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

입력값은 여러개가 될수있고 함수내부에서 배열처럼 사용됩니다. 하지만 완전한 배열은 아닙니다

sum(1,2,3,4,5,6,7)

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

입력값을 parameter 혹은 argument라고 합니다

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

parameter vs argument

• 인자(Parameter,매개변수)는 함수 정의 할때 사용된 이름

• 인수(Argument, 실행인자)는 함수 실행할때 넘겨진 값

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

parameter vs argument

•function plus(x, y) { var z = x + y; return z;}

• plus(3,2);

parameter argument

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

저는 return 값이 필요없는데요?

그냥 일만하고 끝나도 됩니다! 안써도 자바스크립트에서 자동으로 undefind를 리턴합니다

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

저는 입력값이 필요없는데요?딱히 입력값이 필요없을 수 있습니다!

이상한거 아닙니다…

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

함수 쓰는 법

• plus(3,2);

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

함수 정의와 사용법은 다른 방법들도 있습니다

다만 오늘은 여기까지만 공부하세요!