특강 1일차 (오후)

2015. 1. 5. 14:49

함수

선언적 함수

익명 함수

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>지역변수와 전역변수</title>
<script type="text/javascript">
/* 
1. 지역변수 
함수 안에서 var를 사용해서 선언한 변수, 함수가 끝나면 소열 
2. 전역변수
함수밖에서 만들어진 모둔 변수
함수안에서 var없이 만들어진 변수
함수가 끝나도메ㅗ
*/
 
function test1(){
var i = 10; // 지역변수 
document.write(i);
}
test1();
 
//document.write(i);
 
//지역변수는 함수가 끝나면 소멸
//document.write(i);
 
var j; //전역변수
function test2(){
j = 200;
document.write('<br>'+j);
}
test2();
document.write('<br>'+j);
 
//전역변수
//a;//var를 명시하지 않고 전역변수를 만들면 선언과 함께 초기해야함
a = 10;
 
function test3(){
a = 100;
document.write('<br>'+a);
}
test3();
 
//함수 내에서 var를 명시하지 않고 변수를 선언하면 전역변수
function test4(){
m = 300; // 전역변수
document.write('<br>'+m);
}
test4();
document.write('<br>'+m);
 
 
</script>
</head>
<body>
 
</body>
</html>
Colored by Color Scripter
cs

매개 변수로 함수 전달하기

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
34
35
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>함수를 매개 변수로 받는 함수</title>
<script type="text/javascript">
//함수를 10번 호출하는 함수
function callfunctionTenTime(otherFunction){ //otherFunction 이 함수명을 대신
for(var i = 0; i<10; i++){
otherFunction();
}
}
 
//선언적 함수
function justFunction(){
document.write('Happy Day!<br>');
 
}
 
//함수로 전달할때() 적지 않는 것 주의
callfunctionTenTime(justFunction);
document.write("===============<br>");
 
//익명 함수 전달
callfunctionTenTime(function(){
document.write('Hello JavaScript<br>');
});
 
 
</script>
</head>
<body>
 
</body>
</html>
Colored by Color Scripter
cs

내부 함수

함수 내부에 선언한 함수

내부 함수를 사용하면 외구에 같은 이름의 함수가 있어서 우선

내부 함수 예제1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>내부 함수</title>
</head>
<script type="text/javascript">
 
function f(){
//내부 함수
function g(){
document.write('g is called');
}
g();
}
//함수 호출
f();
</script>
<body>
    
</body>
</html>
cs

내부 함수 예제2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>내부 함수</title>
<script type="text/javascript">
function f(){
var n = 123; //지역변수
function g(){
document.write('n is '+n+'<br>');
document.write('g is called');
}
g();
}
f();
</script>
</head>
<body>
 
</body>
</html>
cs

예제3 (클로저 사용)

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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>내부 함수</title>
<script type="text/javascript">
/* 
	지역변수는 함수가 실행될 때 생성되고 함수가 종료될 때 사라진다.
	하지만, 클로저를 사용하면 이 규칙을 위반 할 수 있다.
	지역변수를 남겨두는 현상을 클로저라고 부름 
	
*/
 
function f(){
var n = 123;
function g(){
document.write('n is'+n+'<br>');
document.write('g is called');
} 
return g;
}
//함수 호출 
var n = f();
document.write(n + '<br>');
document.write('====================<br>');
n();
</script>
</head>    
<body>
    
</body>
</html>
Colored by Color Scripter
cs

- 클로저의사용

함수안에있는변수는지역 변수이므로외부에서사용할수 없음. 클로저를사용하면 이규칙을 위반하여지역변수를사용할수 있도록할수 있음.

익명함수를반환하는함수에지역변수가있으면익명함수는클로저함수로서지역변수를가져다 쓸수 있음.

클로저란?

- 지역 변수를남겨두는현상

- 함수outerFunction()로 인해생성된공간

- 함수outerFunction() 내부의변수들이살아있음

- 리턴되는함수자체

- 살아남은지역 변수

배열

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>배열</title>
<script type="text/javascript">
var array = ['포도', '사과', '바나나', '망고'];
document.write(array[0]+'<br>');
document.write(array[1]+'<br>');
document.write(array[2]+'<br>');
document.write(array[3]+'<br>');
 
// 반복문을 이용한 출력
var output='';
/* 	for(var i=0; i<array.length;i++){
		output += i+ ' : ' + array[i] + '\n';
	} */
 
// for in 반복문을 이용한 출력
for (var i in array){
output += i+ ' : ' + array[i] + '\n';
}
alert(output);
</script>
</head>
<body>
    
</body>
</html>

Colored by Color Scripter

배열 예제 2

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>배열</title>
<script type="text/javascript">
var array=['포도', '사과'];
document.write(array+'<br>');
 
array[2] = '사과';
document.write(array+'<br>');
 
array[10] = '망고';
document.write(array+'<br>');
/* 	출력	
		포도,사과
		포도,사과,사과
		포도,사과,사과,,,,,,,,망고	
	*/
 
document.write(array[4]+'<br>'); /* 출력: undefined  */
document.write('============================<br>');
 
var array2 = ['one', 'two', 'three'];
array2.length = 2; // 마지막 데이터 제거
document.write(array2+'<br>');
 
array2.length = 4;
document.write(array2+'<br>');
</script>
</head>
<body>
    
</body>
</html>

Colored by Color Scripter

배열 예제 3

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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>배열</title>
<script type="text/javascript">
//비어 있는 배열 생성
var array1 = new Array();
 
document.write(array1+'<br>');
document.write(array1.length+'<br>');
 
//데이터를 저장할 수 있는 10개의 공간을 생성
var array2 = new Array(10);
document.write(array2+'<br>');
document.write(array2.length+'<br>');
 
//저장된 데이터를 전달해서 배열 생성
var array3 = new Array(52, 273, 103, 57, 32);
document.write(array3+'<br>');
document.write(array3.length+'<br>');
 
</script>
</head>
<body>
 
</body>
</html>
Colored by Color Scripter
cs

객체

객체 예제1

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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>객체</title>
<script type="text/javascript">
var product = {
//속성(Key(프로퍼티):value)
제품명:'갤럭시노트4',
제품번호:'A1001',
기능:'멀티윈도우',
원산지:'대한민국',
가격:1000, 
업데이트지원:true
};
 
document.write(product.제품명+'<br>');
document.write(product.제품번호+'<br>');
document.write(product['기능']+'<br>');
document.write(product['원산지']+'<br>');
document.write(product['가격']+'<br>');
document.write(product['업데이트지원']+'<br>');
</script>
</head>
<body>
 
</body>
</html>
 
Colored by Color Scripter
cs

객체 예제2

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
 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>객체</title>
<script type="text/javascript">
 
var name = '이순신';
 
var person = {
 
//속성 지정
name:'홍길동',
//메서드 지정
eat:function(food){
var name = '김유신';
//this:메서드 내에서 객체자신이 가지고 있는 속성을 호출하고 할 떄 
//객체 내부에서 객체를 참조할 때 사용
//지역변수를 찾고 없을 경우는 객체 밖에 선언된 전역번수를 찾음 
alert(this.name+'이 '+food+'을 먹습니다.');
//alert(name+'이 '+food+'을 먹습니다.');
 
}
};
//메서드 호출
person.eat('밥, 반찬');
</script>
</head>
<body>
    
</body>
</html>
Colored by Color Scripter
cs

객체 예제 3

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
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>객체</title>
<script type="text/javascript">
var student = {};
 
 
//객체에 속성 추가
student.이름 = '홍길동';
student.취미 = '악기';
student.특기 = '프로그래밍';
student.장래희망 = '프로그래머';
 
document.write(student.이름+'<br>');
document.write(student.특기+'<br>');
document.write(student.취미+'<br>');
//반복문을 이용한 출력
var output = '';
for(var key in student){
output += key + ':' + student[key] + '<br>';
}
document.write(output);
document.write('---------------<br>');
 
//객체에 메서드 추가
student.toString = function() {
var msg='';
for(var key in this){//this: 자기자신
if(key!='toString'){
msg += key + ':'+ this[key]+'<br>';
}
}
return msg;
};
document.write(student.toString()); 
 
</script>
</head>
<body>
 
</body>
</html>
 
Colored by Color Scripter
cs

'App Development > Hybrid Programming' 카테고리의 다른 글

특강 3일차 (오후) - AJAX, JQueryMobile (0)	2015.01.07
특강 3일차 (오전) - JQuery, AJAX (0)	2015.01.07
특강 2일차 (오전, 오후) - 제이쿼리 (0)	2015.01.06
특강 2일차 (오전) - 자바스크립트 (0)	2015.01.06
특강 1일차 (0)	2015.01.05

Software Engineer Ethan

특강 1일차 (오후)

'App Development > Hybrid Programming' 카테고리의 다른 글

+ Recent posts

티스토리툴바