1강 JavaScript 개요
1. 자바스크립트란?
- 웹 브라우저에 내장되어 있는 스크립트(script) 언어
- 객체지향(object oriented) 프로그래밍
- 인터프리터(interpreter) 방식
- 동적이면서 약한 타입(dynamic and weak typing) 언어
2. 웹 개발환경의 변화
- 1994년 Bredan Eich가 개발
- 1995년 넷스케이프 네비게이터 2.0에 탑재
- 모든 웹 브라우저에 내장된 클라이언트 측 스크립트 언어
- 2005년 초 Ajax 기술의 보급
- 2008년부터 가열된 웹 브라우저간의 자바스크립트 엔진 성능 경쟁
3. 웹 개발환경의 변화 (계속)
- 서버 측에서의 자바스크립트 프로그래밍
- 2009년 Ryan Dahl이 Node.js 개발
- HTML 5의 중심에 놓여 웹 표주능로서 위상을 가짐
- 모바일 환경까지 그 응용 범위의 세를 더욱 확장
4. 모바일 앱 개발환경과 자바스크립트의 위상
- 2007년 아이폰의 등장과 함께 시작된 스마트폰의 열풍
- 엄청난 모바일 앱 시장의 성장
- 스마트 폰 플랫폼의 다양성이 바로 문제의 발단
- 개발 비용의 증가, 유지보수 비용의 증가
- 모바일 웹 브라우저의 신속한 HTML5 지원
- jQuery Mobile, Sencha Touch 와 같은 모바일 웹 앱 개발 프레임워크 등장
- 모바일 웹 앱(mobile web app) - 속도의 한계
- 하이브리드 모바일 앱(hybrid mobile app) 대안
- 모바일 시대의 앱 개발에 있어 자바스크립트의 위상과 중요성이 날로 높아짐
5. 자바스크립트 개발도구 설치
- eclipse, aptana 설치
|
1강끝 |
2강 변수, 데이터 타입, 리터럴
1. <script> 태그와 자바스크립트 - 자바스크립트 코드의 실행
- 스크립트 코드 파싱 → 스크립트 코드 실행 → 함수 호출 → 함수 패싱 → 함수 실행
- HTML에 있는 JS 코드가 파싱이 된 후, JS 코드 실행 하면 전역 스코프에 패싱이 됨, 함수 호출 후, 함수 스코드에 함수와 함수의 변수가 패싱이 됨
2. 자바스크립트 출력하기 - HTML 페이지에서의 자바스크립트 기술 방식
- 인라인 스크립트 방식
<script>태그 아래 자바스크립트 코드를 직접 작성
- 외부 스크립트 방식
자바스크립트 코드를 외부 파일(확장자는 js)에 작성하고 이 파일의 이름을 <script>태그의 src속성 값으로 지정
- 외부 스크립트와 인라인 스크립트는 동시에 작성 불가 (인라인스크립트의 내용은 무시됨)
- <script> 태그는 <head>태그 아래 혹은 <body> 태그 아래에 작성 가능.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>02-01</title>
</head>
<body>
<script type="text/javascript">
document.writeln('<script>태그 아래의 인라인 스크립트에 의한 출력입니다.<br/>');
</script>
<script type="text/javascript" src="02-01.js">
document.writeln('외부 스크립트를 사용할 때는 <script> 태그아래 내용이 무시됩니다.<br/>')
</script>
</body>
</html> |
cs |
위는 JavaScript소스가 포함된 HTML 파일이고 아래는 링크가 걸어진 js파일이다.
|
1
2 |
document.writeln("src속성에 기술된 외부 스크립트에 의한 출력입니다.<br/>")
document.writeln("안녕하세요! 자바스크립트입니다<br/>") |
cs |
3. 문장규칙
- (1) 문장의 끝에 세미콜론(;)을 붙입니다.
- (2) 대소문자를 구별합니다.
- (3) 문장에서의 화이트 스페이스 문자는 무시됩니다.
화이트 스페이스 문자는 공백 space tab이다.
4. 주석
- // 행의 끝까지를 주석으로 처리하는 단일 행 주석
- /**/ 여러 라인에 걸쳐 주석 블록을 구성할 수 있는 복수 행 주석
5. 변수 선언과 var
- 변수 : 프로그램이 어떤 값을 메모리에 저장해 두고 다시 사용하기 위한 공간
- var 키워드 : 자바스크립트는 값을 저장하기 위한 공간을 확보하기 위해 var 키워드를 이용해 변수를 선언
var 변수명 [=초기값];
- 변수 선언 시 초기값을 지정하지 않을 경우, 값을 저장할 때까지 그 변수는 undefined 상태임
- 변수 선언의 예
var a; (undifined)
var b,c;
var d=0;
var e=2, f=4;
var g=6, h;
var i, j =8;
- 변수 선언 시 var 키워드 생략이 가능하지만, 변수 스코프 문제가 발생할 수 있으므로 var 키워드는 생략하지 않는 것이 좋습니다.
|
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 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>02-02</title>
</head>
<body>
<script type="text/javascript">
//변수 선언
var a;
var b,c;
var d=0;
var e=2, f=4;
var g=6, h;
var i, j=8;
document.writeln("a:"+a+'<br/>'); //a:undefined
document.writeln("b:"+b+'<br/>'); //b:undefined
document.writeln("c:"+c+'<br/>'); //c:undefined
document.writeln("d:"+d+'<br/>'); //d:0
document.writeln("e:"+e+'<br/>'); //e:2
document.writeln("f:"+f+'<br/>'); //f:4
document.writeln("g:"+g+'<br/>'); //g:6
document.writeln("h:"+h+'<br/>'); //h:undefined
document.writeln("i:"+i+'<br/>'); //i:undefined
document.writeln("j:"+j+'<br/>'); //j:8
var k=10;
var l='문자열';
document.writeln("k:"+k+'<br/>'); //k:10
document.writeln("l:"+l+'<br/>'); //l:문자열
l=12;
document.writeln("l:"+l+'<br/>'); //l:12
</script>
</body>
</html> |
cs |
6. 식별자 규칙
- (1) 첫번째 문자는 [A-Z a-z _$] 만 사용합니다.
- (2) 나머지 문자는 [A-Z a-z _$ 0-9] 만 사용합니다.
kor_score
averageScore
phone1
_amount
$val
- (3) 자바스킯트 예약어는 사용할 수 없습니다.
7. 값에 의한 데이터 타입 결정
- 저장되는 값에 따라 변수의 데이터 타입이 바뀝니다.
var k=10;
var l= '문자열';
l = 12;
8. 값을 저장하는 기본형 데이터 타입
|
데이터 타입 |
특징 |
|
숫자 |
자바스크립트는 정수 값과 실수 값을 구분하지 않습니다. 모든 숫자는 IEEE 754 표준에 의해 정의된 8바이트 크기의 실수로 표현하며 (상당히 큰 범위)의 숫자를 표현할 수 있습니다. |
|
문자열 (string) |
유니코드 문자나 숫자, 문장부호들의 시퀀스로 텍스트를 표현합니다. 작은따옴표(') 혹은 큰 따옴표(") 쌍으로 문자열을 둘러싸서 문자열을 표현합니다. 단일 문자 표현은 길이가 1인 문자열로 표현합니다. |
|
불리언 (boolean) |
불리언 형은 참/거짓의 진리 값 두 개를 표현하는데, true 또는 false 값을 가집니다. |
|
null |
예약어 null은 보통 참조 타입과 함께 쓰여, 어떠한 객체도 나타내지 않는 특수한 값으로 사용합니다. |
|
undefined |
undefined는 변수는 선언되었으나 값이 할당된 적이 없는 변수에 접근하거나, 존재하지 않는 객체 프로퍼티에 접근할 경우 반환되는 값입니다. |
9. 참조값을 저장하는 참조형 데이터 타입
|
데이터 타입 |
특징 |
|
배열 (array) |
배열은 데이터 값들의 모음입니다. 배열의 각 데이터 값에는 0부터 시작하는 인덱스라는 번호가 있어서 배열명 다음에 대괄호([])로 둘러싼 인덱스를 써서 값을 가져올 수 있습니다. |
|
객체 (object) |
객체는 이름이 붙은 값들의 모음입니다. 이 이름이 붙은 값들을 프로퍼티라고 하며, 객체 프로퍼티는 객체명 다음에 점(.)과 프로퍼티명을 붙이거나, 객체명 다음에 대괄호([])로 둘러싼 프로퍼티명의 문자열을 써서 접근할 수 있습니다. |
|
함수 (function) |
자바스크립트에서 함수는 객체 프로퍼티에 할당될 수 있는 실행가능한 코드를 가지고 있는 데이터 타입입니다. |
|
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 lang="ko">
<head>
<meta charset="utf-8" />
<title>02-03</title>
</head>
<body>
<script type="text/javascript">
//데이터 타입
var num = 10; //숫자형
var str = '자바스크립트'; //문자열형
var point = { x:300, y:400 }; //객체
var arr =[ 10, 20, 30, 40 ]; //배열
//함수
var add = function(op1, op2) {
return op1 + op2;
};
document.writeln('num: '+num+'<br/>'); //num:10
document.writeln('str: '+str+'<br/>'); //str:자바스크립트
document.writeln('point.x: '+point.x+'<br/>'); //point.x:300
document.writeln('point["y"]: '+point["y"]+'<br/>'); //point["y"]:400
document.writeln('arr[0]: '+arr[0]+'<br/>'); //arr[0]:10
document.writeln('arr[3]: '+arr[3]+'<br/>'); //arr[3]:40
document.writeln('add: '+add+'<br/>'); //add:function(op1,op2){return op1+op2;}
document.writeln('add(2,3): '+add(2,3)+'<br/>'); //add(2,3):5
</script>
</body>
</html> |
cs |
10. 기본형 데이터 타입과 참조형 데이터 타입의 변수 선언과 메모리 할당
- // 기본형 데이터 타입
var num = 10;
var str = '자바스크립트';
- // 참조형 데이터 타입
var point = {x:300, y:400};
var arr= [ 10, 20, 30, 40 ];
11. 리터럴
- 리터럴(Literal) : 프로그램의 코드 상에 데이터의 값을 표현하는 방식
- 자바스크립트의 리터럴 :
숫자 리터럴, 문자 리터럴, 배열 리터럴, 객체 리터럴, 함수 리터럴, 불리언 리터럴, 그리고 undefined와 null 리터럴
12. 숫자 리터럴
- 자바스크립트에서 숫자 리터럴 중 정수(fixed point) 리터럴은 10진수, 16진수로 표현
- 16진수 리터럴은 '0x' 나 '0X'로 시작하고 뒤에 16진수 숫자들을 붙여 표현
- 16진수 숫자는 0~9과, 10~15를 표현하는 a(혹은 A) ~ f(혹은 F) 중 하나를 사용
- 8진수 리터럴은 0으로 시작하고 뒤에 0~7 사이의 숫자들을 붙여 표현
Ex:) 0 32767 0xff 0377
- 자바스크립트에서 숫자 리터럴 중 부동소수점(floating poing) 리터럴 표기법으로는 실수표기법과 지수표기법이 있음
- 실수표기법 : [digits][.digits]
- 지수표기법 : [digits][.digits][(e|E)[(+|x)]]digits]
Ex:) 3.14 98.45 .3333333333333 1.5e10 5.25E-21
- Infinity, NaN를 포함한 모든 숫자 데이터는 typeof 연산의 결과 "number"를 반환
Infinity는 무한대를 나타내는 숫자이고
NaN은 산술연산을 했는데 그 결과 값이 숫자가 아니였다라는 상수값이다.
|
상수 |
정의 |
|
Infinity |
무한대를 나타내는 특수한 숫자 값입니다. isFinite() 함수가 false값을 반환하면 Infinity 값임을 확인할 수 있으며, ==비교연산이 가능합니다. |
|
NaN |
숫자가 아님을 나타내는 특수한 숫자 값입니다. NaN값에 대한 확인은 == 비교연산을 사용할 수 없으며, 반드시 isNaN() 함수를 사용해야 합니다. |
|
Number.Max_VALUE |
숫자로 표현할 수 있는 가장 큰 수(1.7976931348623157 x 10 308승)를 정의하고 있습니다. |
|
Number.MIN_VALUE |
숫자로 표현할 수 있는 가장 작은 수(5 x 10 -324승)를 정의하고 있습니다. |
|
Number.NaN |
NaN과 동일합니다. |
|
Number.POSITIVE_INFINITY |
양의 무한대(Infinity)를 나타내는 특수한 숫자 값입니다. |
|
Number.NEGATIVE_INFINITY |
음의 무한대(-Infinity)를 나타내는 특수한 숫자 값입니다. |
|
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 lang="ko">
<head>
<meta charset="utf-8" />
<title>02-04</title>
</head>
<body>
<script type="text/javascript">
var a=10;
document.writeln('a: '+a+'<br/>'); //a:10
document.writeln('typeof a: '+typeof a+'<br/>'); //typeof a:number
document.writeln('isFinite(a): '+isFinite(a)+'<br/>'); //isFinite(a):true
document.writeln('isNaN(a): '+isNaN(a)+'<br/>'); //isNAN(a):false
document.writeln('<br/>');
var b=1/0;
document.writeln('b: '+b+'<br/>'); //b:Infinity
document.writeln('typeof b: '+typeof b+'<br/>'); //typeof b:number
document.writeln('isFinite(b): '+isFinite(b)+'<br/>'); //isFinite(b):false
document.writeln('isNaN(b): '+isNaN(b)+'<br/>'); //isNAN(b):false
document.writeln('<br/>');
var c= 5 * "4times";
document.writeln('c: '+c+'<br/>'); //c:NaN
document.writeln('typeof c: '+typeof c+'<br/>'); //typeof c:number
document.writeln('isFinite(c): '+isFinite(c)+'<br/>'); //isFinite(c):false
document.writeln('isNaN(c): '+isNaN(c)+'<br/>'); //isNAN(c):true
document.writeln('<br/>');
</script>
</body>
</html> |
cs |
13. 문자열 리터럴
- 문자열 리터럴은 유니코드 문자들을 작은따옴표(') 또는 큰따옴표(")로 둘러싸서 표현
- 작은따옴표로 만든 문자열내에서는 큰따옴표를 포함할 수 있고, 큰따옴표로 만든 문자열에서는 작은 따옴표를 포함할 수 있음
- 문자열 리터럴은 한 줄을 넘을 수 없으며, 만일 문자열 리터럴 내에서 줄바꿈을 표현하고자 한다면 이스케이프 시퀀스 '\n'를 사용합니다.
Ex:) '' //빈 문자열
"" //빈 문자열
'문자열 리터럴'
'작은따옴표로 만든 문자열에는 큰따옴표(")를 포함할 수 있습니다.'
"큰따옴표로 만든 문자열에는 작은따옴표 (')를 포함할 수 있습니다."
|
이스케이프 시퀀스 |
유니코드 |
의미 |
|
＼0 |
＼u000 |
널 문자 |
|
＼b |
＼u0008 |
백스페이스 |
|
＼t |
＼u0009 |
수평 탭 |
|
＼n |
＼u000A |
줄바꿈 문자 |
|
＼v |
＼u000B |
수직 탭 |
|
＼f |
＼u000C |
폼 피드 (새로운 페이지로 이동) |
|
＼r |
＼u000D |
캐리지 리턴 (현재 행의 처음으로 이동) |
|
＼" |
＼u0022 |
큰 따옴표 |
|
＼' |
＼u0027 |
작은 따옴표 |
|
＼＼ |
＼u005C |
역슬래시 |
|
＼xXX |
|
두 개의 16진수 XX에 의해 지정되는 Latin-1문자 |
|
＼uXXXX |
|
네 개의 16진수 XXXX에 의해 지정되는 유니코드 문자 |
- 역슬래시 자체를 출력하려면 이스케이프 시퀀스 ＼＼을 사용
- 작은따옴표 자체를 출력하려면 ＼'을, 큰따옴표 자체를 출력하려면 ＼"을 사용
'작은따옴표로 만든 문자열에 ＼＼＼'를 통해 작은따옴표(＼')를 포함할 수 있습니다.'
"큰따옴표로 만든 문자열에 ＼＼＼"를 통해 큰따옴표(＼")를 포함할 수 있습니다.";
'이 문자열은 줄바꿈을 통해 첫번째 행을 출력하고, ＼N이어 두번째 행을 출력합니다.'
'원주율 ＼u03c0는 원의 둘레와 지름의 비율입니다.
- 유니코드 문자 ＼u03c0는 수학기로 p(파이)
|
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 lang="ko">
<head>
<meta charset="utf-8" />
<title>02-05</title>
</head>
<body>
<script type="text/javascript">
//문자열 리터럴
var str1 = '문자열 리터럴';
var str2 = '작은따옴표로 만든 문자열에는 큰따옴표(")를 포함할 수 있습니다.';
var str3 = "큰따옴표로 만든 문자열에는 작은따옴표(')를 포함할 수 있습니다.";
document.writeln(str1 + '<br/>');
document.writeln('<br/>');
document.writeln(str2 + '<br/>');
document.writeln(str3 + '<br/>');
document.writeln('<br/>');
var str4 = '작은따옴표로 만든 문자열에 \\\'를 통해 작은따옴표(\')를 포함할 수 있습니다.';
var str5 = "큰따옴표로 만든 문자열에 \\\"를 통해 큰따옴표(\")를 포함할 수 있습니다.";
var str6 = '이 문자열은 줄바꿈을 통해 첫번째 행을 출력하고, \n이어 두번째 행을 출력합니다.';
var str7 = '원주율\u03c0는 원의 둘레와 지름의 비율입니다.';
document.writeln(str4 + '<br/>');
document.writeln(str5 + '<br/>');
document.writeln(str6 + '<br/>');
document.writeln(str7 + '<br/>');
document.writeln('<br/>');
</script>
</body>
</html> |
cs |
14. 배열 리터럴
- 배열 : 데이터 값들의 모음
- 배열의 원소인 데이터 값은 배열명 다음에 대괄호([])로 둘러싼 인덱스(index)를 써서 그 값을 가져오거나 변경할 수 있음
- 배열의 인덱스는 0부터 시작해서, 배열의 원소 개수 -1까지의 유효범위를 가짐
- 배열의 원소의 개수는 length 프로퍼티에 접근해 알 수 있음
- 자바스크립트에서 배열의 원소는 어떠한 데이터 타입이라도 사용할 수 있음
- 배열 리터럴은 콤마(,)로 구분한 값을 대괄호([])로 감싸서 표현함
Ex) [] //빈 배열
[ 95, 91, 100, 286, 95.33] //숫자를 원소로 갖는 배열
[ '홍길동', '이순신', '강감찬' ] //문자열을 원소로 갖는 배열
//배열을 원소로 갖는 배열
[['을지문덕', '연개소문'], ['광개토대왕', '세종대왕'], ['김유신', '계백']]
|
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
61
62
63
64
65
66
67 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>02-06</title>
</head>
<body>
<script type="text/javascript">
//배열 리터럴
//빈 배열
var arr1 = [];
document.writeln("arr1[0]: "+ arr1[0] +'<br/>'); //arr1[0]:undefined
document.writeln("arr1[1]: "+ arr1[1] +'<br/>'); //arr1[1]:undefined
document.writeln("arr1[2]: "+ arr1[2] +'<br/>'); //arr1[2]:undefined
document.writeln("arr1[3]: "+ arr1[3] +'<br/>'); //arr1[3]:undefined
document.writeln('arr1.length: '+ arr1.length +'<br/>'); //arr1.length: 0
document.writeln('<br/>');
arr1[0] = 95;
arr1[2] = 100;
document.writeln("arr1[0]: "+ arr1[0] +'<br/>'); //arr1[0]:95
document.writeln("arr1[1]: "+ arr1[1] +'<br/>'); //arr1[1]:undefined
document.writeln("arr1[2]: "+ arr1[2] +'<br/>'); //arr1[2]:100
document.writeln("arr1[3]: "+ arr1[3] +'<br/>'); //arr1[3]:undefined
document.writeln('arr1.length: '+ arr1.length +'<br/>'); //arr1.length: 3
document.writeln('<br/>');
//1차원 배열
var arr2 = ['홍길동', '이순신', '강감찬'];
document.writeln('arr2[0]: '+ arr2[0]+'<br/>'); //arr2[0]: 홍길동
document.writeln('arr2[1]: '+ arr2[1]+'<br/>'); //arr2[1]: 이순신
document.writeln('arr2[2]: '+ arr2[2]+'<br/>'); //arr2[2]: 강감찬
document.writeln('arr2[3]: '+ arr2[0]+'<br/>'); //arr2[3]: undefined
document.writeln('arr2.length: '+ arr2.length +'<br/>'); //arr2.length: 3
document.writeln('<br/>');
//배열을 원소로 하는 배열(2차원 배열)
var arr2d = [
['을지문덕', '연개소문'],
['광개토대왕', '세종대왕'],
['김유신', '계백']
];
document.writeln('arr2d[0]: '+ arr2d[0]+'<br/>'); //arr2d[0]: 을지문덕, 연개소문
document.writeln('arr2d[1]: '+ arr2d[1]+'<br/>'); //arr2d[1]: 광개토대왕, 세종대왕
document.writeln('arr2d[2]: '+ arr2d[2]+'<br/>'); //arr2d[2]: 김유신, 계백
document.writeln('arr2d[3]: '+ arr2d[0]+'<br/>'); //arr2d[3]: undefined
document.writeln('arr2.length: '+ arr2.length +'<br/>'); //arr2.length: 3
document.writeln('<br/>');
document.writeln('arr2d[0][0]: '+ arr2d[0][0]+'<br/>'); //arr2d[0][0]: 을지문덕
document.writeln('arr2d[0][1]: '+ arr2d[0][1]+'<br/>'); //arr2d[0][1]: 연개소문
document.writeln('arr2d[0].length'+ arr2d[0].length+'<br/>'); //arr2d[0].length: 2
document.writeln('arr2d[1][0]: '+ arr2d[1][0]+'<br/>'); //arr2d[1][0]: 광개토대왕
document.writeln('arr2d[1][1]: '+ arr2d[1][1]+'<br/>'); //arr2d[1][1]: 세종대왕
document.writeln('arr2d[1].length'+ arr2d[1].length+'<br/>'); //arr2d[1].length: 2
document.writeln('arr2d[2][0]: '+ arr2d[2][0]+'<br/>'); //arr2d[2][0]: 김유신
document.writeln('arr2d[2][1]: '+ arr2d[2][1]+'<br/>'); //arr2d[2][1]: 계백
document.writeln('arr2d[2].length'+ arr2d[2].length+'<br/>'); //arr2d[2].length: 2
document.writeln('arr2d[3][0]: '+ arr2d[3][0]+'<br/>'); //arr2d[3][0]이 undefined이므로 에러발생
document.writeln('<br/>');
</script>
</body>
</html> |
cs |
15. 객체 리터럴
- 객체 : 이름이 붙어 있는 데이터 값들의 모음
- 프로퍼티 :
이름이 붙어 있는 값
객체의 프로퍼티는 객체명 다음에 점(.)과 프로퍼티명을 붙이거나, 객체명 다음에 대괄호([])로 둘러싼 프로퍼티명의 문자열을 써서 접근할 수 있음
프로퍼티에는 배열, 함수, 객체를 포함한 어떠한 값이라도 담을 수 있음
- 메소드 :
함수가 프로퍼티에 저장될 경우 프로퍼티명이 메소드명이 됨
객체가 소유한 메소드를 호출하기 위해서는 객체명 다음에 점(.)을 붙이고 함수를 호출하기 위해 메소드명과 ()를 사용함
- 중괄호({})로 전체를 감싸고, 프로퍼티명과 프로퍼티값을 콜론(;)으로 구분하며, 각각의 프로퍼티들을 콤마(,)로 분리해 작성
- 객체 리터럴의 프로퍼티명을 식별자뿐만 아니라 문자열로도 기술할 수 있음
Ex:) var point = {"x" : 300, "y" : 200}; //(x,y) 좌표 객체
var rectangle = {
topLeft : { x:300, y:200 }, //좌측상단 (x,y) 좌표 객체
bottomRight : { x:350, y:280 }, //우측하단 (x,y) 좌표 객체
size : function(){ //면적 계산 메소드
return (this.bottomRight.x - this.topLeft.x) * (this.bottomRight.y - this.topLeft.y);
}
};
|
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 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>02-07</title>
</head>
<body>
<script type="text/javascript">
//객체 리터럴
var p1 = { x:300, y:200 }; //(x,y)좌표가 (300,200)인 객체 생성
var p2 = { x:350, y:280 }; //(x,y)좌표가 (350,280)인 객체 생성
var rect = {
topLeft : p1, //사각형의 좌측상단좌표정보 => 초기값으로 p1 객체 참조
bottomRight : p2, //사각형의 우측하단 좌표 정보 => 초기값으로 p2 객체 참조
size : function() { //사각형의 면적 계산 메소드
return (this.bottomRight.x-this.topLeft.x)*(this.bottomRight.y-this.topLeft.y);
}
};
document.writeln('위치 변경 전 사각형의 넓이: '+rect.size()+'<br/>');
document.writeln('<br/>');
p1 = { x:200, y:300 };
p2 = { x:300, y:400 };
rect.topLeft = p1; //사각형의 좌측상단 좌표 정보 => 좌표가 변경된 p1 객체 참조
rect.bottomRight = p2; // 사각형의 우측하단 좌표 정보 => 좌표가 변경된 p2 객체 참조
document.writeln('위치 변경 후 사각형의 넓이:'+rect.size()+'<br/>');
document.writeln('<br/>');
</script>
</body>
</html> |
cs |
16. 함수 리터럴
- 함수
어떤 입력 값을 이용해 미리 정의된 로직을 처리하여 결과를 반환하는 구조
- 자바스크립트에서 함수
객체 프로퍼티에도 할당될 수 있는 실행가능한 코드 값
객체 프로퍼티에 저장된 함수를 객체의 메소드라고 부름
함수도 데이터 타입의 하나로 다룰 수 있기 때문에 변수, 배열, 객체 프로퍼티에 저장할 수 있으며, 다른 함수의 전달인자로 넘겨줄 수도 있음
- function 키워드에 이어 소괄호 (()) 안에 함수 호출 시 전달하는 인수들 (arguments)에 의해 초기화되는 매개변수(parameters) 목록, 마지막으로 함수의 몸체 중괄호({}) 안에 함수가 수행해야 할 실행코드와 결과 값을 반환하는 return문으로 구성됨
- 만일 반환 값이 없는 return 문을 기술하거나, return 문 자체가 없으면 undefined 값을 반환함
Ex:) var add = function(op1, op2){
return op1 + op2;
};
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>02-08</title>
</head>
<body>
<script type="text/javascript">
//함수 리터럴
var add = function(op1, op2){
return op1 + op2;
};
document.write('add(5,3):'+add(5,3)+'<br/>'); //add(5,3): 8
document.write('<br/>');
</script>
</body>
</html> |
cs |
17. 불리언 리터럴
- 불리언 리터럴 : 참/거짓의 진리 값 두 가지를 표현
true 또는 false 값을 가짐
불리언 값은 일반적으로 비교의 결과로 생성되며, 제어 구조 내에서 조건을 판단하는 곳에 주로 사용됨
불리언 값은 산술연산에서 true는 숫자 1로, false는 숫자 0로 변환되며, 문자열 연산에서 true는 문자열 "true"로, false는 문자열 "false"로 변환되고, 논리연산에서 0, undefined, null, NaN, "" 값은 false로 변환되어 평가됨
Ex:) var isOpened = false; //isOpend는 false 값을 가진 불리언 변수가 됨
!isOpend //isOpend가 false 일 때 !(not 연산)에 의해 전체 식의 결과가 true가 됨
score >= 70 //score의 값이 70 이상이면 이 식은 true로 평가됨
|
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 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>02-09</title>
</head>
<body>
<script type="text/javascript">
//불리언 리터럴
var score = 88;
var message = '불합격';
//score 값이 70이상일 경우 비교의 결과로 true를 반환하고,
//message변수에 '합격'문자열 값을 저장합니다.
if(score >= 70){
message = '합격';
}
document.writeln(score + '점은' + message + '입니다.<br/>');
document.write('<br/>');
//0, undefined, null, NaN, ""은 논리연산에서 false로 변환되어 평가됩니다.
var a = 0;
var b = undefined;
var c = null;
var d = NaN;
var e = "";
document.writeln('!0 => ' + !a + '<br/>'); //true
document.writeln('!undefined => ' + !b + '<br/>'); //true
document.writeln('!null => ' + !c + '<br/>'); //true
document.writeln('!NaN => ' + !d + '<br/>'); //true
document.writeln('!"" => ' + !e + '<br/>'); //true
document.write('<br/>');
</script>
</body>
</html> |
cs |
18. undefined와 null
- undefined
변수가 선언은 되었지만 값이 할당된 적이 없는 변수에 접근하거나, 존재하지 않는 객체 프로퍼티에 접근할 경우 반환되는 값
논리 연산에서 false로, 산술 연산에서는 NaN로, 문자열 연산에서는 "undefined"로 변환되어 연산됨
- null
예약어
보통 참조 타입과 함께 쓰여, 어떠한 객체도 나타내지 않는 특수한 값으로 사용
논리 연산에서 false로 변환되며, 산술 연산에서는 0으로, 문자열 연산에서는 "null"로 변환되어 연산됨
Ex:) var a; //변수 선언 시 명시적인 초기화 할당 값이 없을 때 undefined값이 할당
var obj={};
obj.prop; //obj 객체 내에 prop 프로퍼티는 존재하지 않으므로 undefined를 반환
obj = null; //null값을 이용해 객체 참조를 제거
|
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 lang="ko">
<head>
<meta charset="utf-8" />
<title>02-10</title>
</head>
<body>
<script type="text/javascript">
//undefined와 null
var a; //변수 초기값 미지정 시 undefined 값이 할당됩니다.
var obj = {}; //프로퍼티가 없는 빈 객체를 생성합니다.
document.write('a: ' + a + '<br/>'); //a:undefined
document.write('obj: ' + obj + '<br/>'); //obj:[object Object]
document.write('obj.prop: ' + obj.prop + '<br/>'); //obj.prop:undefined
obj = null; //객체 참조를 제거합니다.
document.write('obj: ' + obj + '<br/>'); //obj:null
document.write('<br/>');
if(!a) //!undefined
document.writeln('변수 a는 초기화가 필요합니다.<br/>');
if(!obj) //!null
document.writeln('변수 obj는 참조하는 객체가 없습니다.<br/>');
</script>
</body>
</html> |
cs |
|
2강끝 |
3강 연산자, 제어문, 예외처리
1. 산술연산자
|
연산자 |
의미 |
특징 |
|
+ |
덧셈연산 |
피연산자가 숫자일 경우 덧셈 연산을 행합니다. 피연산자가 불리언일 경우 true는 1로, false는 0으로 변환되어 덧셈연산을 행합니다. 피연산자의 한 쪽이 문자열일 경우 나머지 피연산자도 문자열로 변환되어 문자열 접합연산을 행합니다. 피연산자의 한쪽이 객체일 경우 객체는 문자열로 변환되고, 나머지 피연산자도 문자열로 변환되어 문자열 접합연산을 행합니다. |
|
- |
뺄셈연산 |
피연산자가 모두 숫자일 경우 뺄셈 연산을 행합니다. |
|
* |
곱셈연산 |
피연산자가 모두 숫자일 경우 곱셈 연산을 행합니다. |
|
/ |
나눗셈연산 |
피연산자가 모두 숫자일 경우 나눗셈 연산을 행합니다. |
|
% |
나머지연산 |
피 연산자가 모두 숫자일 경우 나머지 연산을 행합니다. |
|
연산자 |
의미 |
특징 |
|
++ |
전치증가연산 |
피연산자의 값을 1 증가시킵니다. 대입연산자와 함께 사용하면 먼저 피연산자의 값을 1 증가시키고, l-value에 증가된 피연산자의 값을 대입합니다. |
|
++ |
후치증가연산 |
피연산자의 값을 1 증가시킵니다. 대입연산자와 함께 사용하면 먼저 l-value에 현재의 피연산자의 값을 대입하고, 이후 피연산자의 값을 1 증가시킵니다. |
|
-- |
전치감소연산 |
피연산자의 값을 1 감소시킵니다. 대입연산자와 함께 사용하면 먼저 피연산자의 값을 1 감소시키고, l-value에 감소된 피연산자의 값을 대입합니다. |
|
-- |
후치감소연산 |
피연산자의 값을 1 감소시킵니다. 대입연산자와 함께 사용하면 먼저 l-value에 현재의 피연산자의 값을 대입하고, 이후 피연산자의 값을 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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>03-01</title>
</head>
<body>
<script type="text/javascript">
//산술연산자
var num = 20;
var str = '20';
var bool = true;
var obj = {};
//피연산자가 숫자일 경우 덧셈 연산을 행합니다.
document.writeln('num + 13: ');
document.writeln(num + 13); //33
document.writeln('<br/>');
//피연산자가 불리언일 경우 true는 1로, false는 0으로 변환되어 덧셈연산을 행합니다.
document.writeln('bool + 1: ');
document.writeln(bool + 1); //2
document.writeln('<br/>');
//피연산자의 한 쪽이 문자열일 경우 나머지 피연산자도 문자열로 변환되어 문자열 접합연산을 행합니다.
document.writeln('str + 13: ');
document.writeln(str + 13); //2013
document.writeln('<br/>');
//피연산자의 한 쪽이 객체일 경우 객체는 문자열로 변환되고, 나머지 피연산자도 문자열로 변환되어 문자열 접합연산을 행합니다.
document.writeln('obj + 10: ');
document.writeln(obj + 10); //[2013]object Object]10
document.writeln('<br/>');
//후치증가연산은 먼저 피연산자의 값을 반환하고, 피연산자의 값을 1증가시킵니다.
var x = 3;
var y = x++;
document.writeln('x ' + x + '<br/>'); //x:4
document.writeln('y ' + y + '<br/>'); //y:3
document.writeln('<br/>');
//전치증가연산은 먼저 피연산자의 값을 1 증가시키고, 피연산자의 값을 반환합니다.
x = 3;
y = ++x;
document.writeln('x ' + x + '<br/>'); //x:4
document.writeln('y ' + y + '<br/>'); //y:4
document.writeln('<br/>');
</script>
</body>
</html> |
cs |
2. 대입연산자
|
연산자 |
특징 |
예 |
|
= |
l-value에 r-value를 대입 |
x = 5; |
|
+= |
l-value에 r-value를 더한 값을 l-value에 대입 |
x = 5; x += 3; //8 |
|
-= |
l-value에서 r-value를 뺀 값을 l-value에 대입 |
x = 5; x -= 3; //2 |
|
*= |
l-value에 r-value를 곱한 값을 l-value에 대입 |
x = 5; x *= 3; //15 |
|
/= |
l-value를 r-value로 나눈 값을 l-value에 대입 |
x = 5; x /= 3; //1.666667 |
|
%= |
l-value를 r-value로 나눈 나머지 값을 l-value에 대입 |
x = 5; x %= 3; //2 |
|
&= |
l-value에 r-value를 비트 AND 연산한 값을 l-value에 대입 |
x = 5; x &= 2; //0 |
| |= |
l-value에 r-value를 비트 OR 연산한 값을 l-value에 대입 |
x = 5; x |= 2; //7 |
| ^= |
l-value에 r-value를 비트 XOR 연산한 값을 l-value에 대입 |
x = 5; x ^= 2; //7 |
| <<= |
l-value에 r-value만큼 좌측 시프트한 값을 l-value에 대입 |
x = 5; x <<= 2; //20 |
| >>= |
l-value에 r-value만큼 우측 시프트한 값을 l-value에 대입 |
x = 5; x >>= 2; //1 |
| >>>= |
l-value에 r-value만큼 부호없는 우측 시프트한 값을 l-value에 대입 |
x = 5; x >>>= 2; //1 |
3. 비교연산자
|
연산자 |
특징 |
예 |
|
== |
좌우 표현식의 평가가 동일할 경우 true 반환 undefined와 null을 동등하다고 평가 문자열과 숫자를 비교할 경우 숫자를 문자열로 변환 후 평가 숫자와 불리언 값을 비교할 경우 true는 1로, false는 0으로 변환 후 평가 객체를 숫자 또는 문자열과 비교할 경우 객체의 valueOf() 또는 toString() 변환 값인 기본 타입 값으로 평가 |
5==5 //true 5=='5' //true true==1 //true |
|
!= |
좌우 표현식의 평가가 다를 경우 true 반환 |
5!=3 //true |
|
< |
좌측 표현식의 결과가 우측 표현식의 결과보다 작은 경우 true반환 |
5<3 //false |
|
<= |
좌측 표현식의 결과가 우측 표현식의 결과보다 작거나 같은 경우 true반환 |
5<=3 //false |
|
> |
좌측 표현식의 결과가 우측 표현식의 결과보다 큰 경우 true 반환 |
5>3 //true |
|
>= |
좌측 표현식의 결과가 우측 표현식의 결과보다 크거나 같은 경우 true 반환 |
5>=3 //true |
| === |
좌우 표현식의 평가가 동일하고, 데이터 타입도 같을 경우 true 반환 ==와 다르게 타입 변환을 하지 않음 |
5==='5' //false |
|
!== |
좌우 표현식의 평가가 다르거나, 혹은 데이터 타입이 다른 경우 true반환 ==와 다르게 타입 변환을 하지 않음 |
5!=='5' //true |
|
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 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>03-03</title>
</head>
<body>
<script type="text/javascript">
//비교연산자
var x = 5;
var y = 3;
var z = '5';
document.writeln('x == y: ' + (x == y) + '<br/>'); //x==y; false
// == 연산자에서 문자열과 숫자를 비교할 경우 숫자가 문자열로 변환되어 비교연산을 수행합니다.
document.writeln('x == z:' + (x == z) + '<br/>'); // x==z:true
document.writeln('x != y:' + (x != y) + '<br/>'); // x!=y:true
document.writeln('x != z:' + (x != z) + '<br/>'); // x!=z:false
document.writeln('x < y:' + (x < y) + '<br/>'); // x<y:false
document.writeln('x <= y:' + (x <= y) + '<br/>'); // x<=y:false
document.writeln('x > y:' + (x > y) + '<br/>'); // x>y:true
document.writeln('x >= y:' + (x >= y) + '<br/>'); // x>=y:true
// === 연산자에서는 비교연산 시 데이터 타입 변환을 수행하지 않습니다.
document.writeln('x === z:' + (x === z) + '<br/>'); // x===y:false
document.writeln('x !== y:' + (x !== y) + '<br/>'); // x!==y:true
document.writeln('x !== z:' + (x !== z) + '<br/>'); // x!==y:true
document.writeln('<br/>');
var arr1 = ['홍길동', '이순신', '강감찬'];
var arr2 = ['홍길동', '이순신', '강감찬'];
//==연산자에서 참조형을 비교하는 경우 참조값이 같을 경우에만 true를 반환합니다.
document.writeln('arr1 == arr2:' + (arr1 == arr2) + '<br/>'); // arr1==arr2:false
</script>
</body>
</html> |
cs |
4. 논리연산자
|
연산자 |
특징 |
예 |
|
&& |
좌우 표현식의 평가가 모두 true인 경우 true 반환 좌측 표현식의 평가가 false일 경우 우측 표현식은 실행되지 않음 |
true&&true //true true&&false //false false&&true //false false&&false //false |
|
|| |
좌우 표현식의 평가 중 어느 하나가 true인 경우 true 반환 좌측 표현식의 평가가 true일 경우 우측 표현식은 실행되지 않음 |
true||true //true true||false //true false||true //true false||false //false |
|
! |
표현식의 평가가 false일 경우 true를, true인 경우 false를 반환 |
!true //false !false //true |
|
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 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>03-04</title>
</head>
<body>
<script type="text/javascript">
//논리연산자
var calculator;
//&&연산에서 좌측 표현식이 undefined값을 가지면 false로 평가되어 우측 평가식을 실행하지 않습니다.
calculator&&document.writeln('calculator.add(2,3):'+calculator.add(2,3));
calculator={
add:function(op1,op2){
return op1+op2;
}
};
//&&연산에서 좌측 표현식이 -, undefined, null, NaN "" 이외의 값을 가지면 true로 평가되어 우측 평가식을 실행합니다.
calculator&&document.writeln('calculator.add(2,3): '+calculator.add(2,3));
//||연산에서 좌측 표현식이 undefined값을 가지면 false로 평가되어 우측 평가식을 실행합니다.
calculator.subract||(calculator.subtract = function(op1,op2){return op1-op2; });
document.writeln('</br>');
calculator.subtract&&document.writeln('calculator.subtract(2,3): '+calculator.subtract(2,3));
</script>
</body>
</html> |
cs |
5. 비트연산자
|
연산자 |
특징 |
사용 예 |
|
& |
좌우 표현식의 평가 비트가 모두 1인 겨우 1 반환 |
5&2 //0 |
|
| |
좌우 표현식의 평가 비트 중 비트 하나가 1인 경우 1 반환 |
5|2 //7 |
|
^ |
좌우 표현식의 평가 비트가 서로 다른 비트인 경우 1반환 |
5^2 //7 |
|
~ |
표현식의 평가 비트를 반전 |
~5 //-6 |
|
<< |
표현식의 평가 비트를 좌측으로 시프트 |
5<<2 //20 |
|
>> |
표현식의 평가 비트를 우측으로 시프트 |
5>>2 //1 |
|
>>> |
표현식의 평가 비트를 우측으로 시프트하면서 좌측을 0으로 채움 |
-5>>>2 //1073741822 |
6. 기타연산자
|
연산자 |
특징 |
예 |
|
, |
좌측 피연산자부터 우측 피연산자로 피연산자를 계속해서 평가 |
var x = 1, y = 2, z = 3; |
|
delete |
피연산자로 지정된 객체의 프로퍼티나 배열의 원소를 삭제 |
delete arr[2]; //true 혹은 false 반환 |
|
instanceof |
피연산자의 객체 타입 조사 |
arr instanceof Array //true 혹은 false 반환 |
|
new |
새로운 객체를 생성하고, 이를 초기화하기 위한 생성자 함수를 호출 |
var arr = new Array(); // 참조값을 반환 |
|
typeof |
피연산자의 데이터 타입을 문자열로 반환 |
typeof '문자열' //string |
|
void |
피연산자의 값을 무시하고 undefined를 반환 |
void 0 |
|
? |
조건식 ? 식1 : 식2. 조건식의 결과가 true일 경우 식1을, false일 경우 식2를 평가 |
(score >= 70) ? '합격' : '불합격' |
|
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 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>03-05</title>
</head>
<body>
<script type="text/javascript">
//기타연산자
//배열 객체에 숫자, 문자열, 불리언, Date객체, 배열 객체들을 원소로 담습니다.
var arr = [ 1, '홍길동', '010-1234-5678', true, new Date(), [10, 20, 30]];
document.writeln('typeof arr[0]: '+ typeof arr[0] +'</br>'); //number
document.writeln('typeof arr[1]: '+ typeof arr[1] +'</br>'); //string
document.writeln('typeof arr[2]: '+ typeof arr[2] +'</br>'); //string
document.writeln('typeof arr[3]: '+ typeof arr[3] +'</br>'); //boolean
document.writeln('typeof arr[4]: '+ typeof arr[4] +'</br>'); //object
document.writeln('typeof arr[5]: '+ typeof arr[5] +'</br>'); //object
document.writeln('<br/>');
document.writeln('arr[4] instanceof Date: ' + (arr[4] instanceof Date) + '<br/>'); //true
document.writeln('arr[4].constructor: ' + (arr[4].constructor) + '<br/>'); //function Date(){}
document.writeln('arr[5] instanceof Array: ' + (arr[5] instanceof Array) + '<br/>'); //true
document.writeln('arr[5].constructor: ' + (arr[5].constructor) + '<br/>'); //function Array(){}
document.writeln('<br/>');
document.writeln('arr: ' + arr + '<br/>');
document.writeln('<br/>');
document.writeln('delete arr[2]: ' + delete arr[2] + '<br/>'); //true
document.writeln('arr[2]: ' + arr[2] + '<br/>'); //undefined
document.writeln('<br/>');
document.writeln('arr: ' + arr + '<br/>');
document.writeln('<br/>');
var point = {
x : 20,
y : 30,
toString : function(){
return '{ x: ' + this.x + ',y: ' + this.y + "}";
}
};
//point 객체 출력 시에 point 객체 내의 정의한 toString 메소드를 호출합니다.
document.writeln('point: ' + point + '<br/>');
//point 객체의 y 프로퍼티를 제거합니다.
document.writeln('delete point.y: ' + delete point.y + '<br/>');
document.writeln('point: ' + point + '<br/>');
//point 객체의 toString 메소드를 제거합니다.
document.writeln('delete point.toString: ' + delete point.toString + '<br/>');
document.writeln('point: ' + point + '<br/>');
document.writeln('<br/>');
</script>
</body>
</html> |
cs |
7. if 문
- if 문은 조건표현식의 평가에 따라 특정 문장을 실행할 수 있는 기능을 제공하는 기본적인 분기 제어문
- if(조건표현식)
문장;
- if(조건표현식){
문장#1;
...
} else {
문장#2;
...
}
- if(조건표현식#1){
문장#1;
...
} else if (조건표현식#2) {
문장#2;
...
} else {
문장#3;
...
}
- if 문에서 사용되는 조건들은 상호 배타적
|
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 lang="ko">
<head>
<meta charset="utf-8" />
<title>03-06</title>
</head>
<body>
<script type="text/javascript">
//if 문
var score = 88;
var level;
//if 문의 조건식은 상호 배타적으로 동작하므로, 조건을 중복해서 작성하실 필요가 없으며
//조건을 만족했을 경우 실행할 문장이 하나일 경우 블록을 생략할 수 있습니다.
if(score >= 90) { //90점이상 100점 이하
level = 'A';
} else if (score >= 80) { //80점이상 90점 이하
level = 'B';
} else if (score >= 70) { //70점이상 80점 이하
level = 'C';
} else if (score >= 60) { //60점이상 70점 이하
level = 'D';
} else { //60점 미만
level = 'F';
}
document.writeln(score + '점은' + level + '학점입니다. <br/>');
document.writeln('<br/>');
</script>
</body>
</html> |
cs |
8. switch 문
- switch 다음에 오는 () 안에는 주로 변수가 오지만, 반환 값을 제공하는 어떤 표현식이든 올 수 있음
- switch의 블록 ({})에는 여러 개의 case 문과 한 개의 선택적 default 문이 사용됨
- 표현식이 반환하는 값에 의해 case 문이 실행되며, 실행된 case 문에 break 문이 없을 경우 switch 블록을 빠져나가지 못하고, 다음 case 문들도 실행됨에 유의
- switch (표현식) {
case 값#1;
문장#1;
break;
case 값#2;
문장#2;
break;
case 값#3;
문장#3;
break;
default;
문장#4;
break;
}
|
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 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>03-07</title>
</head>
<body>
<script type="text/javascript">
//switch 문
var month = 2;
var days;
switch(month){
case 4:
case 6:
case 9:
case 11: //4, 6, 9, 11월의 경우
days = 30;
break;
case 2: //2월의 경우
days = 28;
break;
default: //1, 3, 5, 7, 8, 10, 12월의 경우
days = 31;
break;
}
document.writeln(month + '월의 날짜는 ' + days + '일까지입니다. <br/>');
document.writeln('<br/>');
</script>
</body>
</html> |
cs |
9. &&와 ||를 이용한 조건문
- 논리연산자 &&와 ||의 짧은 논리 회로 연산자 (Short Circuit Logical Operator)의 성격을 이용
- &&연산자의 경우 좌측 피연산자의 평가 값을 true로 변환할 수 있으면 우측 피연산자의 표현식을 평가 할 수 있어 if 문과 같은 기능을 수행
- ||연산자의 경우 좌측 피연산자의 평가 값이 false로 변환할 수 있는 경우 우측 피연산자를 평가해 값을 반환
|
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 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>03-08</title>
</head>
<body>
<script type="text/javascript">
//&&와 ||을 이용한 조건문
var arr;
//arr이 undefined일 경우 비어있는 배열 객체를 대입합니다.
arr = arr||[];
arr[0] = '홍길동';
arr[1] = '이순신';
arr[2] = '강감찬';
//arr이 배열객체가 존재할 경우 arr배열의 길이를 출력합니다.
arr && document.writeln('arr.length: ' + arr.length + '<br/>');
document.writeln('<br/>');
</script>
</body>
</html> |
cs |
10. while 문
- while 문은 기본적인 반복문으로, 표현식이 true로 평가되면 몸체에 해당하는 블록 내의 문장들을 실행
- 문장을 모두 실행한 뒤 다시 표현식을 평가하는데 이 때 false로 평가되면 while문이 종료되고 프로그램의 다음 문장이 실행
- 주의할 점은 평가식을 false로 만들 수 있는 종료 조건을 만드는 것
- 종료 조건을 만들지 않으면 while 문은 무한 루프에 빠짐
- while (표현식) {
문장들
}
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>03-09</title>
</head>
<body>
<script type="text/javascript">
//while문
var count = 0;
//while 문의 조건식을 만족하는 동안 블록 내의 문장들을 반복 실행합니다.
while (count < 10){
document.write(count + '<br/>');
count++;
}
document.writeln('<br/>');
</script>
</body>
</html> |
cs |
11. do..while 문
- do...while 문은 while 문과 비슷한 성격을 가진 반복문으로, 표현식이 true로 평가되면 몸체에 해당하는 블록 내의 문장들을 실행
- 최소한 한번은 블록 내의 문장들을 실행
- do...while 문 끝에 세미콜론(;)이 붙임
- 문장을 모두 실행한 뒤 다시 표현식을 평가하는데 이 때 false로 평가되면 do...while 문이 종료되고 프로그램의 다음 문장이 실행
- Ex:) do {
문장들
} while (표현식);
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>03-10</title>
</head>
<body>
<script type="text/javascript">
//do...while문
var count = 0;
//do...while 문의 조건식을 만족하는 동안 블록 내의 문장들을 반복 실행합니다.
do {
document.write(count + '<br/>');
count++;
} while (count < 10);
document.writeln('<br/>');
</script>
</body>
</html> |
cs |
12. for문
- for문은 초기식을 한 번만 실행
- 조건식의 평가 결과가 true일 경우 블록 내의 문장 실행
- 블록 내 문장 실행이 완료되면 증감식이 실행
- 다시 조건식의 평가 결과에 따라 for 문의 계속 혹은 종료 결정
- Ex:) for(초기식; 조건식; 증감식){
문장들
}
|
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 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>03-11</title>
</head>
<body>
<script type="text/javascript">
//for문
var arr2d=[
['을지문덕', '연개소문'],
['광개토대왕', '세종대왕'],
['김유신', '계백']
];
for (var i=0; i<arr2d.length; i++){
for (var j=0; j<arr2d[i].length; j++){
document.writeln(arr2d[i][j] + '<br/>');
}
}
document.writeln('<br/>');
</script>
</body>
</html> |
cs |
13. for...in문
- for...in 문은 객체의 프로퍼티나 배열의 원소에 대해 순서대로 반복처리를 실행
- 변수에는 객체로부터 취한 프로퍼티명이 저장되거나, 배열로부터 취한 인덱스번호가 저장
- Ex:) for (변수 in 객체 혹은 배열) {
문장들
}
|
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 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>03-12</title>
</head>
<body>
<script type="text/javascript">
//for...in문
//배열 객체를 선언하고 name과 age 프로퍼티를 가진 객체를 원소로 초기화 합니다.
var arr= [
{ name:'을지문덕', age: 50 },
{ name:'연개소문', age: 35 },
{ name:'광개토대왕', age: 28 },
{ name:'세종대왕', age: 38 },
{ name:'김유신', age: 46 },
{ name:'계백', age: 36 }
];
//바깥 for...in 반복문에서는 배열의 인덱스를 취해 idx에 저장합니다.
for (var idx in arr){
document.writeln('{');
//안쪽 for...in 반복문에서는 배열의 원소인 객체의 프로퍼티명을 취해 prop에 저장합니다.
for (var prop in arr[idx]){
document.writeln(prop + ':' + arr[idx][prop]);
if(prop == 'age')
break;
document.writeln(',');
}
document.writeln('}<br/>');
}
document.writeln('<br/>');
</script>
</body>
</html> |
cs |
14. 예외
- 예외란 예외적인 상황이나 에러가 발생했음을 나타내느 객체
- 자바스크립트는 런타임에서 에러가 발생할 때마다 예외를 발생시킴.
- 프로그램에서 throw 문을 사용하여 명시적으로 예외를 발생시킬 수도 있음
- throw 문에서 사용하는 표현식의 결과 타입은 대부분 Error 객체 혹은 Error 객체를 상속받은 객체이지만, 에러메시지를 담은 문자열이나 에러코드를 나타내느 숫자값도 유용하게 사용
- Ex:) throw 표현식;
throw new Error('에러메시지');
15. try...catch...finally
- try...catch...finally 문은 자바스크립트의 예외처리 기법
- 예외가 발생하면 자바스크립트 인터프리터는 정상적인 프로그램 실행을 즉시 중단하고 가장 가까운 예외처리기로 처리를 넘김
- 예외처리기는 try...catch...finally 블록의 catch 절을 사용해 작성
- 예외를 처리할 try...catch...finally 블록이 없는 함수에서 예외가 발생하면 함수를 호출했던 블록으로 예외가 전파되며, 어떠한 예외처리기도 찾지 못하면 이 예외는 에러로 취급
- Ex:) try{
//정상적으로 처리되어야 할 코드들을 기술합니다.
//코드 실행 중 런타임에서 에러가 발생하여 예외가 발생하거나,
//throw문을 통해 예외를 직접 발생시킬 수도 있으며,
//호출한 함수를 통해 예외가 전파될 수도 있습니다.
} catch (e) {
//예외가 발생할 경우에만 실행되는 블록으로
//예외와 관련된 정보를 ()에 선언된 변수 e를 통해 참조합니다.
//이 블록에서 예외를 처리할 수도 있고
//예외를 무시할 수도 있으며,
//throw문을 통해 예외를 다시 발생시킬 수도 있습니다.
} finally {
//try블록이 모두 실행 완료되거나,
//예외가 발생하여 catch 블록이 실행된 후에도
//무조건 실행이 필요한 코드를 이 블록에 기술합니다.
}
|
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 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>03-13</title>
</head>
<body>
<script type="text/javascript">
//try...catch...finally
var x = 5;
var result;
try{
document.writeln('\u2460 <br/>');
result = x * y; //y는 정의되어 있지 않은 변수이므로 런타임에서 에러가 발생합니다.
document.writeln('\u2461'+result+'<br/>');
} catch(e){ //try 블록에서 발생한 에러에 대한 예외를 catch 블록에서 처리합니다.
document.writeln('\u2462' + e + '<br/>');
} finally { //finally 블록은 예외 발생과 상관없이 무조건 수행됩니다.
document.writeln('\u2463 <br/>');
}
document.writeln('<br/>');
try{
document.writeln('\u2460 <br/>');
result = x / 0;
document.writeln('\u2461'+result+'<br/>');
throw new Error('0으로 나눌 수 없습니다.') //예외 객체를 만들어 던집니다.
} catch(e){ //try 블록에서 발생한 에러에 대한 예외를 catch 블록에서 처리합니다.
document.writeln('\u2462' + e + '<br/>');
} finally { //finally 블록은 예외 발생과 상관없이 무조건 수행됩니다.
document.writeln('\u2463 <br/>');
}
</script>
</body>
</html> |
cs |
|
3강끝 |
4강 함수
1. 함수의 정의
- 일반적으로 함수란 어떤 입력 값을 이용해 미리 정의된 로직을 처리하여 결과를 반환하도록 만든, 여러번에 걸쳐 호출에 의해 실행될 수 있는 코드 블록
- 함수는 매개변수(parameter) 혹은 전달인자 (argument)라고 불리는 지역변수를 가질 수 있는데, 이 매개변수는 함수를 호출하는 시점에 값을 갖게 됨
- 함수는 반환값을 가질 수 있는데, 반환값은 return 문에 의해 함수를 호출한 표현식의 결과로 전달됨
2. 자바스크립트에서 함수의 역할
|
역할 |
특징 |
|
호출 루틴으로서의 함수 |
호출에 의해 실행되며, 매개변수에 전달된 값을 이용해 미리 정의된 로직을 처리하여 결과를 반환 코드 블록 |
|
데이터로서의 함수 |
변수, 객체 프로퍼티, 배열원소에 저장될 수 있고, 매개변수의 전달 값 또는 다른 함수의 반환 값으로도 사용이 가능 |
|
메소드로서의 함수 |
객체 프로퍼티에 저장되어 객체를 통해 호출하는데 사용 |
|
생성자 함수 |
new 연산자와 함께 사용하여 객체를 생성하고 초기화하는데 사용 |
3. 함수를 정의하는 3가지 방법
- function 문을 이용해 함수를 정의
- function 함수명([매개변수 목록]){
문장들
[return 반환값;]
}
- 함수 리터럴을 이용해 함수를 정의
- var 변수명 = function([매개변수 목록]){
문장들
[return 반환값;]
};
- Function 생성자를 이용해 함수를 정의
- var 변수명 = new Function(['매개변수'[, '매개변수'[,...]]], '문장들');
var 변수명 = new Function('[매개변수 목록]','문장들');
|
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 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>04-01</title>
</head>
<body>
<script type="text/javascript">
//함수의 정의와 호출
//function 문에 의해 정의된 print 함수는 매개변수 message에 전달된 값을 출력합니다.
function print(message) {
document.writeln(message);
}
//function 문에 의해 정의된 println 함수는 매개변수 message에 전달된 값과
//문자열'<br/>'을 접합연산한 결과를 출력합니다.
function println(message) {
document.writeln(message + '<br/>');
}
//function 문에 의해 정의된 distance 함수는 x,y 프로퍼티를 가진 객체를 매개변수로 하여
//내장객체 Math가 제공하는 sqrt함수를 호출해 두 점간의 거리를 반환합니다.
function distance(p1, p2) {
var dX = p2.x - p1.x;
var dY = p2.y - p1.y;
return Math.sqrt(dX * dX, dY * dY);//내장객체 Math가 제공하는 sqrt함수를 호출합니다.
}
var pointA = { x:25, y:40 };
var pointB = { x:50, y:80 };
print('pointA와 pointB 사이의 거리: ');
println(distance(pointA, pointB));
//함수리터럴에 의해 정의된 area 함수는 x,y 프로퍼티를 가진 객체를 매개변수로 하여
//두 점을 이용해 구성된 사각형의 면적을 반환합니다.
var square = function(leftTop, rightButtom) {
var width = rightButtom.x - leftTop.x;
var height = rightButtom.y - leftTop.y;
return width * height;
};
print('pointA와 pointB로 구성한 사각형의 넓이: ');
println(square(pointA, pointB));
//Function 생성자에 의해 정의된 triangle 함수는 base와 height 매개변수에 전달된 값을 이용해
//삼각형의 면적을 반환합니다.
var triangle = new Function('base', 'height', 'return(base*height) / 2;');
print('base와height로 구성한 삼각형의 넓이;');
println(triangle(30,20));
</script>
</body>
</html>
|
cs |
4. 변수의 전역스코프와 지역스코프
- 스코프(scope)란 코드에서 변수를 참조할 수 있는 해당 변수의 유효범위를 결정하는 개념
- 자바스크립트는 코드 전체에서 접근 가능한 전역(global)스코프와 함수 내의 코드에서만 접근 가능한 지역(local) 스코프만 존재
- 전역 스코프를 가진 변수를 전역 변수, 지역 스코프를 가진 변수를 지역변수라고 함
- 자바스크립트는 블록({}) 스코프가 존재하지 않음에 유의
|
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 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>04-02</title>
</head>
<body>
<script type="text/javascript">
//전역 스코프와 지역 스코프
//전역 스코프를 가진 전역 변수
var x = 'global x';
var y = 'global y';
function func(){
//지역 스코프를 가진 지역 변수는 반드시 var 키워드와 함께 선언되어야 합니다.
var x = 'local x';
//var 키워드 없을 경우 전역스코프에 접근해 동일 이름을 가진 전역변수를 사용하며,
//만일 동일 이름의 전역 변수가 없을 경우 전역변수를 새로 등록합니다.
y = '???';
document.writeln('x: ' + x + '<br/>');
document.writeln('y: ' + y + '<br/>');
document.writeln('<br/>');
}
document.wrtieln('func() 호출 전 <br/>');
document.writeln('x: ' + x + '<br/>');
document.writeln('y: ' + y + '<br/>');
document.writeln('<br/>');
document.writeln('func() 호출<br/>');
func();
document.writeln('func() 호출 후 <br/>');
document.writeln('x: ' + x + '<br/>');
document.writeln('y: ' + y + '<br/>');
document.writeln('<br/>');
</script>
</body>
</html> |
cs |
5. 함수의 매개변수와 스코프
- 함수의 매개변수는 지역스코프를 갖는 지역변수로, 함수를 호출하는 표현식으로부터 그 값을 전달 받음
- 전역스코프의 전역변수 값을 함수의 매개변수로 전달할 때 그 값이 함수의 지역스코프의 매개변수로 복사됨
- 이 전달된 값이 기본형일 경우 전역변수와 매개변수는 상호 독립적인 값이 되며, 참조값이 전달된 경우 전역변수와 매개변수가 동일 객체를 참조하게 됨
|
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 lang="ko">
<head>
<meta charset="utf-8" />
<title>04-03</title>
</head>
<body>
<script type="text/javascript">
//함수의 매개변수와 스코프
//값을 매개변수로 전달하는 경우 함수 내에서의 매개변수 조작은 원본 값에 아무런 영향을 미치지 않습니다.
function swapByValue(x,y){
var temp = x;
x = y;
y = temp;
}
//참조값을 매개변수로 전달하는 경우 매개변수가 원본 객체를 참조하므로
//함수 내에서 매개변수를 통한 객체 조작은 원본 객체에 영향을 미칩니다.
function swapByReference(o){
var temp = o.x;
o.x = o.y;
o.y = temp;
}
var a = 5;
var b = 8;
var obj = {x:5, y:8};
document.writeln('swap함수 호출 전<br/>');
document.writeln('a: ' + a + ', b: ' + b + '<br/>');
document.writeln('obj.x: ' + obj.x + ', obj.y:' + obj.y + '<br/>');
document.writeln('<br/>');
swapByValue(a,b);
swapByReference(obj);
document.writeln('swap함수 호출 후<br/>');
document.writeln('a: ' + a + ', b: ' + b + '<br/>');
document.writeln('obj.x: ' + obj.x + ', obj.y:' + obj.y + '<br/>');
document.writeln('<br/>');
</script>
</body>
</html> |
cs |
6. 함수의 매개변수와 인자
- 자바스크립트 함수는 함수 정의 시 선언된 매개변수에 상관없이 인자를 전달할 수 있으며, 어떤 데이터 타입의 값이라도 전달할 수 있음
- 선언된 매개변수보다 적은 수의 인자 값들을 전달하면, 값을 전달받지 못한 남은 매개변수들은 undefined 값을 갖게 됨
- 생략이 가능한 매개변수는 매개변수 목록의 끝에 위치하도록 하여 임의로 생략할 수 있게 만드는 것이 중요
|
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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>04-04</title>
</head>
<body>
<script type="text/javascript">
// 함수의 생략 가능한 매개변수
function sum(array, start, end) {
// 매개변수 array에 전달된 값이 없을 경우 빈 배열을 할당합니다.
// if 문을 대신해 다음의 || 연산자를 이용한 조건문을 작성할 수도 있습니다.
// array = array || [];
if (!array)
array = [];
// 매개변수 start에 전달된 값이 없을 경우 0을 할당합니다.
if (!start)
start = 0;
// 매개변수 end에 전달된 값이 없을 경우 배열의 원소의 갯수를 할당합니다.
if (!end)
end = array.length;
// 매개변수 array에 전달된 값이 배열 객체일 경우에만 합계를 계산합니다.
if ( array instanceof Array) {
// 매개변수 start와 end에 전달된 값이 숫자일 경우에만 합계를 계산합니다.
if (( typeof start) != 'number' || ( typeof end) != 'number')
throw new Error('sum(): 두번째 매개변수와 세번째 매개변수의 전달 인자는 숫자여야 합니다.');
var result = 0;
for (var i = start; i < end; i++) {
// 배열 array의 원소가 숫자 타입일 경우에만 합계를 계산합니다.
if (( typeof array[i]) != 'number')
throw new Error('sum(): array[' + i + ']에 저장된 값 ' + array[i] + '는 숫자 타입이 아닙니다.');
result += array[i];
}
return result;
} else {// 매개변수 array에 전달된 값이 배열 객체가 아닐 경우 예외를 발생시킵니다.
throw new Error('sum(): 첫번째 매개변수의 전달 인자는 배열이어야 합니다.');
}
}
var arr1 = [1, 2, 3, 4, 5];
var obj = {
name : '홍길동',
phone : '010-1234-5678'
};
var arr2 = [1, 2, '3rd', 4, 5];
try {
document.writeln('sum(arr1, 0, arr1.length): ' + sum(arr1, 0, arr1.length) + '<br/>');
document.writeln('sum(arr1, 0, 4): ' + sum(arr1, 0, 4) + '<br/>');
document.writeln('sum(arr1, 0): ' + sum(arr1, 0) + '<br/>');
document.writeln('sum(arr1, 2): ' + sum(arr1, 2) + '<br/>');
document.writeln('sum(arr1): ' + sum(arr1) + '<br/>');
document.writeln('sum(): ' + sum() + '<br/>');
document.writeln('sum(obj): ' + sum(obj) + '<br/>');
} catch (e) {
document.writeln(e + '<br/>');
}
try {
document.writeln('sum(arr1, \'x\', 4): ' + sum(arr1, 'x', 4) + '<br/>');
} catch (e) {
document.writeln(e + '<br/>');
}
try {
document.writeln('sum(arr2): ' + sum(arr2) + '<br/>');
} catch (e) {
document.writeln(e + '<br/>');
}
document.writeln('<br/>');
</script>
</body>
</html> |
cs |
7. 함수와 명시적인 이름을 가진 인자 전달
- 함수 호출 시 매개변수를 객체로 전달하여, 메소드 내에서 전달된 객체의 프로퍼티를 인자로 활용하는 방법
- 코드의 가독성을 더욱 높일 수 있으며, 매개변수의 순서에 상관없이 값을 자유롭게 전달할 수 있고, 생략된 매개변수를 명확히 표현할 수 있는 특징이 있음
|
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 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>04-05</title>
</head>
<body>
<script type="text/javascript">
// 함수의 명시적인 이름을 가진 인자 전달
function power(arg) {
//매개변수 arg로 전달된 객체에 base프로퍼티가 정의되어 있지 않을 때
//base프로퍼티를 추가하여 1로 설정합니다.
if (!arg.base) {
arg.base = 1;
}
//매개변수 arg로 전달된 객체에 exponent프로퍼티가 정의되어 있지 않을 때
//exponent프로퍼티를 추가하여 0으로 설정합니다.
if (!arg.exponent) {
arg.exponent = 0;
}
//내장객체 Math의 pow 함수를 호출해 결과를 반환합니다.
return Math.pow(arg.base, arg.exponent);
}
document.writeln('power({base:3, exponent:2})의 결과 값: ' + power({
base : 3,
exponent : 2
}) + '<br/>');
document.writeln('power({base:3})의 결과 값: ' + power({
base : 3
}) + '<br/>');
document.writeln('power({exponent:2})의 결과 값: ' + power({
exponent : 2
}) + '<br/>');
document.writeln('<br/>');
</script>
</body>
</html> |
cs |
8. 함수에 인자로 함수를 전달
- 자바스크립트에서 함수는 데이터의 속성을 갖고 있어서, 변수, 객체의 프로퍼티에도 저장될 수 있으며, 함수의 전달 인자로도 사용될 수 있음
|
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 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>04-06</title>
</head>
<body>
<script type="text/javascript">
//사칙연산 관련 메소드를 가진 calculator객체를 정의합니다.
var calculator = {
add : function(x, y) {
return x + y;
},
subtract : function(x, y) {
return x - y;
},
multiply : function(x, y) {
return x * y;
},
divide : function(x, y) {
return x / y;
}
};
//위에 정의된 calculator 객체의 메소드를 첫번째 매개변수의 전달 값으로,
//나머지 두 개의 매개변수는 첫번째 매개변수로 전달된 calculator 객체의 메소드의
//매개변수로 사용할 operate1 함수를 정의합니다.
function operate1(operator, operand1, operand2) {
return operator(operand1, operand2);
}
//첫번째 매개변수로 calculator 객체의 프로퍼티명을 전달하고, 나머지 두 개의 매개변수는
//calculator 객체의 메소드의 매개변수로 사용할 operate2 함수를 정의합니다.
function operate2(operatorName, operand1, operand2) {
//프로퍼티 타입이 함수일 경우 그 메소드를 실행합니다.
if (( typeof calculator[operatorName]) == 'function')
return calculator[operatorName](operand1, operand2);
else
throw new Error('operator2():' + operatorName + '은(는) 정의되어 있지 않은 연산자입니다.');
}
//((3 - 8) + (2 * 5))
var result1 = operate1(calculator.add, operate1(calculator.subtract, 3, 8), operate1(calculator.multiply, 2, 5));
document.writeln('result1:' + result1 + '<br/>');
try {
var result2 = operate2('add', operate2('subtract', 3, 8), operate2('multiply', 2, 5));
document.write('result2: ' + result2 + '<br/>');
} catch(e) {
document.write(e + '<br/>');
}
document.writeln('<br/>');
</script>
</body>
</html> |
cs |
9. 함수에 함수 리터럴을 전달하는 익명함수
- 함수 리터럴을 이용해 정의한 함수를 이름 없는 함수, 즉 임명함수 (unnamed function)라고 부름
- 이름이 없기 때문에 주로 변수, 객체 프로퍼티에 저장하거나, 함수의 인자 혹은 반환 값으로 주로 사용
|
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 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>04-07</title>
</head>
<body>
<script type="text/javascript">
//함수에 함수 리터럴을 전달하는 익명함수
var calculator = {
//operate 메소드의 첫번째 매개변수는 함수를 인자로 전달 받습니다.
operate : function(method, operand1, operand2) {
if ( typeof method == 'function') {
if ( typeof operand1 != 'number' || typeof operand2 != 'number')
throw new Error('operate(): 두번째, 세번째 매개변수는 반드시 숫자를 전달해야 합니다.');
return method(operand1, operand2);
} else
throw new Error('operate(): 첫번째 매개변수로 함수를 전달해야 합니다.');
}
};
try {
//calculator operate 메소드의 첫번째 매개변수로 익명함수를 전달합니다.
var result1 = calculator.operate(function(x, y) {
return x + y;
}, 2, 3);
document.writeln('result1: ' + result1 + '<br/>');
//두번째, 세번째 매개변수로 숫자가 아닌 값을 전달하면 예외를 발생시킵니다.
var result2 = calculator.operate(function(x, y) {
return x + y;
}, '2', 3);
document.writeln('result2: ' + result2 + '<br/>');
} catch (e) {
document.writeln(e + '<br/>');
}
document.writeln('<br/>');
//익명함수를 정의하고 바로 호출해 결과를 얻을 수도 있습니다.
var result3 = (function(x, y) {
return x + y;
})(2, 3);
document.writeln('result3: ' + result3 + '<br/>');
document.writeln('<br/>');
</script>
</body>
</html> |
cs |
10. 중첩함수
- 자바스크립트에서 함수는 다른 함수 안에 중첩되어 정의될 수 있음
- 중첩함수(inner function)는 함수 내에서만 호출할 수 있으며, 함수 외부에서는 직접 호출할 수 없음
- 이런 특징으로 특정 함수에서만 필요한 기능을 외부에 노출시키지 않고 구현할 수 있으며, 함수 내부에 선언된 변수에 접근할 수 있기 때문에 객체지향의 정보은닉이라는 특징을 구현하는데 사용될 수 있음
|
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 lang="ko">
<head>
<meta charset="utf-8" />
<title>04-08</title>
</head>
<body>
<script type="text/javascript">
// 중첩함수
function circle(radius) {
var pi = 3.14;
// 중첩함수는 내부 변수에 접근가능합니다.
function area(r) {
return r * r * pi;
}
// 중첩함수는 내부에서만 호출 가능합니다.
return area(radius);
}
document.writeln('circle(5): ' + circle(5) + '<br/>');
document.writeln('<br/>');
</script>
</body>
</html> |
cs |
11. 스코프 체인
- 지역 스코프는 함수 단위로 관리되며, 이 지역 스코프를 관리하는 객체를 호출 객체
- 함수의 매개변수, 지역변수가 호출 객체의 프로퍼티
- 전역 스코프를 나타내는 객체를 전역 객체, 루트(root) 객체라고함
- 전역 변수와 전역 함수는 전역 객체의 프로퍼티와 메소드
- var 키워드 없이 변수를 선언하면 전역 객체에 등록되어 전역 변수가 되므로, 함수의 지역 변수로 선언하기 위해선 반드시 var 키워드를 사용해 변수를 선언해야 함
- 스코프 체인는 전역 객체와 함수 호출 시 생성된 호출 객체를 생성 순서대로 연결한 리스트
- 함수는 함수가 호출되는 시점을 기준으로 스코프 체인에 연결되어 있는 모든 것들에 접근 가능
|
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 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>04-09</title>
</head>
<body>
<script type="text/javascript">
// 스코프 체인
// 1. 전역 레벨의 파싱 결과 전역객체에 프로퍼티 x와 outer가 정의됩니다.
var x = '전역 객체에 등록되어 있는 x 프로퍼티 값';
function outer() {
var y = 'outer 함수의 호출 객체에 등록되어 있는 y 프로퍼티 값';
function inner() {
var z = 'inner 함수의 호출 객체에 등록되어 있는 z 프로퍼티 값';
document.writeln('x: ' + x + '<br/>');
document.writeln('y: ' + y + '<br/>');
document.writeln('z: ' + z + '<br/>');
}
// 3. 함수 레벨의 파싱 결과 inner 함수에 대한 호출 객체에 arguments 프로퍼티가 초기화되고,
// 프로퍼티 z가 정의되고,
// outer 함수의 호출 객체와 inner 함수의 호출 객체 간에 스코프 체인이 연결되고,
// inner 함수의 코드를 실행합니다.
// 이 때 x는 전역객체에, y는 outer 함수의 호출객체에, z는 inner 함수의 호출객체에 접근해서
// 그 값을 취합니다.
inner();
}
// 2. 함수 레벨의 파싱 결과 outer 함수에 대한 호출 객체에 arguments 프로퍼티가 초기화되고,
// 프로퍼티 y와 inner가 정의되고,
// 전역객체와 outer 함수의 호출 객체 간에 스코프 체인이 연결된 후,
// outer 함수의 코드를 실행합니다.
outer();
document.writeln('<br/>');
</script>
</body>
</html> |
cs |
12. 콜백함수
- 콜백함수는 직접 호출하는 함수가 아닌 어떤 특정 시점이나 조건을 만족했을 때 호출될 수 있도록 라이브러리 함수의 인자로 전달되는 함수를 말함
|
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 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>04-10</title>
</head>
<body>
<script type="text/javascript">
// 콜백함수
function main() {
var array = [];
// 내장객체 Math의 random 함수는 0 ~ 1 사이의 값을 반환하고,
// 내장객체 Math의 ceil 함수는 인자 값 이상의 최소 정수를 반환합니다.
for (var i = 0; i < 10; i++) {
array[i] = Math.ceil(Math.random() * 45);
}
// work 함수를 호출하면서 첫번째 매개변수로 처리할 데이터 data를,
// 두번째, 세번째 매개변수로 콜백함수 even과 odd를 전달합니다.
work(array, even, odd);
}
// 콜백함수 even은 짝수가 발견될 때마다 호출될 함수로 당시의 배열 인덱스와 원소를 출력합니다.
function even(idx, num) {
document.writeln((idx + 1) + '번째 데이터는 짝수 ' + num + '입니다.<br/>');
}
// 콜백함수 odd는 홀수가 발견될 때마다 호출될 함수로 당시의 배열 인덱스와 원소를 출력합니다.
function odd(idx, num) {
document.writeln((idx + 1) + '번째 데이터는 홀수 ' + num + '입니다.<br/>');
}
// work 함수는 매개변수로 전달받은 배열 data에서
// 짝수가 발견될 때마다 매개변수로 전달받은 콜백함수 callback1를 호출하고,
// 홀수가 발견될 때마다 매개변수로 전달받은 콜백함수 callback2를 호출합니다.
function work(data, callback1, callback2) {
for (var i = 0; i < data.length; i++) {
if (data[i] % 2 == 0)
callback1(i, data[i]);
else
callback2(i, data[i]);
}
}
// main 함수를 실행합니다.
main();
</script>
</body>
</html> |
cs |
13. 비공개 속성/함수를 만들 수 있는 함수 클로저
- 클로저 : 실행될 코드와 함수의 유효 범위, 다시 말해 함수의 호출 객체와 연결된 스코프 체인의 조합
- 함수의 지역변수에 대한 중첩함수를 만들면 비공개 속성과 접근자 메소드를 구현해 객체지향의 정보은닉을 실현할 수 있음.
|
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 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>04-11</title>
</head>
<body>
<script type="text/javascript">
// 클로저
// 1. 전역 레벨의 파싱 결과 전역객체에 프로퍼티 makeId와 id가 정의됩니다.
function makeId() {
var lastId = 0;
return function() {
return ++lastId;
};
}
// 2. 함수레벨의 파싱 결과 makeId() 함수에 대한 호출 객체에 arguments 프로퍼티가 초기화 되고,
// 프로퍼티 lastId가 정의되고,
// 전역객체와 makeId() 함수의 호출객체 간에 스코프 체인이 연결된 후,
// makeId() 함수가 실행되고, id는 익명함수를 반환받습니다.
var id = makeId();
// 3. 함수 레벨의 파싱 결과 id 함수에 대한 호출 객체에 arguments 프로퍼티가 초기화되고,
// makeId 함수의 호출 객체와 id 함수의 호출 객체 간에 스코프 체인이 연결되고,
// id 함수의 코드를 실행합니다.
// 이 때 lastId는 makeId 함수의 호출객체에 접근해서
// 그 값을 취합니다.
document.writeln('id: ' + id() + '<br/>');
document.writeln('id: ' + id() + '<br/>');
document.writeln('id: ' + id() + '<br/>');
document.writeln('id: ' + id() + '<br/>');
document.writeln('id: ' + id() + '<br/>');
document.writeln('<br/>');
</script>
</body>
</html> |
cs |
|
4강 끝 |
5강 객체
1. 객체의 정의
- 자바스크립트의 객체는 이름과 값으로 구성된 프로퍼티들의 집합, 이름이 붙어 있는 데이터 값들의 모음이며, 복합 타입
- 자바스크립트의 모든 객체는 Object 생성자 함수를 상속하며, 공통으로 Object에서 상속받은 프로퍼티와 메소드가 있음
2. 생성자 : 객체를 정의하는 방법
객체 리터럴을 사용
var empty={ };
var point = { x : 20, y : 30 };
var student = {
name : '홍길동',
age : 20,
phone : '010-1234-5678',
toString : function() {
return '{ name : ' + this.name + ', age : ' + this.age + ', phone : ' + this.phone +' '}';
}
};
new 연산자와 Object() 생성자 함수 호출를 이용해 객체를 만들고, 그 객체에 프로퍼티를 추가
Object() 생성자 함수를 사용하면 객체 리터럴 { }와 같이 빈 객체를 생성할 수 있음
var empty = new Object();
var point = new Object();
point.x = 20;
point.y = 30;
var student = new Object();
student.name='홍길동';
student.age='20';
student.phone='010-1234-5678';
student.toString = function(){
return '{ name : ' + this.name +', age : ' + this.age + ', phone : ' + this.phone + '}';
};
원하는 타입의 객체를 생성하고 초기화하기 위해서 필요한 것이 생성자 함수를 직접 정의하는 것
생성자 함수는 객체를 만드는 틀
생성자의 이름은 new 연산자와 생성자 함수 호출을 통해 만들게 될 객체의 타입을 분명하게 나타내는 것이 좋음
생성자의 이름 첫문자를 대문자로 하는 이유도 다른 함수와 구별하기 위함
생성자 함수의 역할은 this키워드가 나타내는 객체를 초기화할 뿐 다른 역할은 수행하지 않는 것을 원칙으로 함
생성자 함수의 구현 시 return 문은 사용하지 않음
function Student(n, a, p) {
this.name = n;
this.age = a;
this.phone = p;
this.toString = function(){
return '{ name : ' + this.name +', age : ' + this.age + ', phone : ' + this.phone + '}';
}
}
3. new 연산자, 생성자 함수, 그리고 this
- new 연산자가 생성하는 객체에는 아무런 프로퍼티도 정의되어 있지 않음
- 객체 생성 이후 new 연산자는 지정된 생성자 함수를 호출하여 명시된 인자들을 전달하고 방금 생성된 새 객체도 this 키워드를 통해 전달함
- 생성자 함수는 이 this 키워드를 사용하여 나름대로의 새 객체를 초기화하는데 이 때 this는 생략할 수 없음
4. 생성자 함수를 이용한 객체 생성
- 자바스크립트가 제공하는 기본 생성자 함수들이 아닌 사용자 정의 생성자 함수를 이용해 객체를 생성하는 방법도 기존의 방법과 동일
var student1 = new Student('홍길동', 20, '010-1234-5678')
var student2 = new Student('이순신', 40, '010-2468-1357');
|
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 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>05-01</title>
</head>
<body>
<script type="text/javascript">
// 생성자 함수: 객체를 정의하는 방법
// 이 함수는 Rectangle 생성자 함수로 설계되었습니다.
function Rectangle(x, y, w, h) {
// this 키워드는 생성자 함수에 의해 생성되는 객체를 나타냅니다.
// 따라서 다음의 구문은 pointX, pointY, width, height 프로퍼티를 생성자 함수에 의해
// 생성되는 객체에 추가하고 매개변수 x, y, w, h로 전달된 값을 pointX, pointY, width, height
// 프로퍼티에 대입하는 문장이 됩니다.
this.pointX = x;
this.pointY = y;
this.width = w;
this.height = h;
this.toString = function() {
return 'Rectangle : { pointX : ' + this.pointX + ', pointY : ' + this.pointY + ', width : ' + this.width + ', height : ' + this.height + ' }';
};
// 생성자 함수는 return 문을 만들지 않습니다.
}
// new 연산자는 아무런 프로퍼티도 정의되어 있지 않은 비어있는 객체를 생성합니다.
// 객체 생성 이후 new 연산자는 지정된 생성자 함수를 호출하여 명시된 인자들을 전달하고
// 방금 생성돤 새로운 객체에 대한 참조를 생성자 함수 내의 this 키워드를 통해 전달합니다.
// 생성자 함수는 이 this 키워드와 전달된 인자 값들을 사용하여 새로운 객체를 초기화합니다.
var rect1 = new Rectangle(100, 120, 20, 30);
var rect2 = new Rectangle(250, 300, 30, 50);
document.writeln(rect1 + '<br/>');
document.writeln(rect2 + '<br/>');
document.writeln('<br/>');
</script>
</body>
</html> |
cs |
5. 객체의 멤버
- 객체의 프로퍼티와 메소드가 객체의 멤버
- 객체의 멤버는 일반적으로 생성자 함수 내에서 this 키워드를 이용해 추가되며, this 키워드는 new 연산자에 의해 새로 생성된 객체를 나타냄 자바스크립트에서 객체의 멤버는 런타임 시 동적으로 추가와 삭제가 가능하므로 주의가 필요
var rect1 = new Rectangle(100, 120, 20, 30);
var rect2 = new Rectangle(250, 300, 30, 50);
rect1.area = function(){
return this. width * this.height;
};
document.writeln('rect1.area(): ' + rect1.area() + '<br/>');
document.writeln('rect2.area(): ' + rect2.area() + '<br/>'); //TypeError발생
6. 멤버 접근
- 특정 객체를 통하지 않고 생성자 함수를 통해서 접근되는 프로퍼티나 호출되는 메소드가 필요할 경우도 있음
- Math() 생성자 함수의 모든 메소드는 생성자 함수를 통해 호출됨
- 이러한 멤버 접근 방법은 생성자 함수의 프로퍼티나 메소드를 만들면 전역변수나 전역함수를 사용하는 것보다 이름 충돌의 문제를 해결해줄 수 있다는 점에서 유용
Math.random(); //0~1사이의 수를 반환합니다.
Math.round(1.58); //2를 반환합니다.
Math.PI; //원주율을 반환합니다.
|
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 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>05-02</title>
</head>
<body>
<script type="text/javascript">
// 생성자 함수의 프로퍼티와 메소드
function Area() {
}
// Area 생성자 함수에 삼각형의 넓이를 계산하는 메소드를 추가합니다.
// Area 생성자 함수의 프로퍼티로 추가되어 Area 생성자 함수를 통해서만 접근합니다.
Area.triangle = function(base, height) {
return base * height / 2;
};
// Area 생성자 함수에 사각형의 넓이를 계산하는 메소드를 추가합니다.
// Area 생성자 함수의 프로퍼티로 추가되어 Area 생성자 함수를 통해서만 접근합니다.
Area.rectangle = function(width, height) {
return width * height;
};
// Area 생성자 함수에 원의 넓이를 계산하는 메소드를 추가합니다.
// Area 생성자 함수의 프로퍼티로 추가되어 Area 생성자 함수를 통해서만 접근합니다.
Area.circle = function(radius) {
return Math.PI * Math.pow(radius, 2);
};
document.writeln('Area.triangle(10, 6): ' + Area.triangle(10, 6) + '<br/>');
document.writeln('Area.rectangle(10, 6): ' + Area.rectangle(3, 20) + '<br/>');
document.writeln('Area.circle(5): ' + Area.circle(5).toFixed(2) + '<br/>');
document.writeln('<br/>');
</script>
</body>
</html> |
cs |
7. 프로토타입 객체
- 자바스크립트의 모든 객체는 프로토타입이라 불리는 객체를 내부적으로 참조
- 프로토타입 객체의 실체는 new 연산자와 Object 생성자 함수 호출을 통해 생성한 Object 객체
- 객체는 프로토타입 객체에 있는 프로퍼티를 상속
- 프로토타입 객체를 이용하면 좀 더 효율적으로 메소드를 추가할 수 있음
8. prototype 프로퍼티
- new 연산자는 빈 객체를 생성하고, 해당 객체의 prototype 프로퍼티를 생성자 함수의 prototype 프로퍼티 값을 이용해 설정
- 모든 함수에는 prototype 프로퍼티가 있으며, 함수가 정의될 때 생성되고 초기화됨
- 프로토타입 객체는 생성자 함수와 연결되고, 이 생성자 함수를 통해서 생성되는 객체들은 생성자 함수와 연결된 프로토타입 객체의 프로퍼티들을 똑같이 상속
- 프로토타입 객체가 메소드나 상수와 같은 프로퍼티들을 위치시키기에 적합한 곳
- 프로토타입 객체에 의한 상속을 통해 메모리 사용량을 줄일 수 있으며, 프로토타입 객체에 프로퍼티가 변경되거나 추가되어도 기존 객체들 역시 변경되거나 추가된 프로퍼티를 바로 사용할 수 있다는 장점이 있음
Rectangle.prototype.area = function(){
return this.width * this.height;
}
|
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 lang="ko">
<head>
<meta charset="utf-8" />
<title>05-03</title>
</head>
<body>
<script type="text/javascript">
// 프로토타입 객체와 prototype 프로퍼티
function Rectangle(x, y, w, h) {
this.pointX = x;
this.pointY = y;
this.width = w;
this.height = h;
}
// 모든 함수가 가지고 있는 prototype 프로퍼티는 프로토타입 객체에 대한 연결을 가집니다.
// Rectangle 생성자 함수의 prototype 프로퍼티가 참조하는 객체에 toString 이란
// 이름의 프로퍼티를 추가하는데 그 값으로 함수 리터럴을 대입하여 메소드를 추가합니다.
// 이 메소드는 Rectangle 생성자 함수를 통해 생성되는 객체에 상속될 것입니다.
Rectangle.prototype.toString = function() {
return 'Rectangle : { pointX : ' + this.pointX + ', pointY : ' + this.pointY + ', width : ' + this.width + ', height : ' + this.height + ' }';
};
// 위의 toString() 메소드와 마찬가지로 Rectangle 생성자 함수의 prototype 프로퍼티가
// 참조하는 객체에 area() 메소드를 추가하여, Rectangle 생성자 함수를 통해 생성되는
// 객체에 상속될 것입니다.
Rectangle.prototype.area = function() {
return this.width * this.height;
};
var rect1 = new Rectangle(100, 120, 20, 30);
var rect2 = new Rectangle(250, 300, 30, 50);
document.writeln('rect1: ' + rect1 + '<br/>');
document.writeln('rect1.area(): ' + rect1.area() + '<br/>');
document.writeln('rect2: ' + rect2 + '<br/>');
document.writeln('rect2.area(): ' + rect2.area() + '<br/>');
document.writeln('<br/>');
</script>
</body>
</html> |
cs |
9. constuctor 속성
- 자바스크립트의 모든 객체는 객체를 초기화하는데 사용하는 생성자 함수를 참조하는 constructor 프로퍼티를 가지고 있음
- constructor 프로퍼티를 이용해 객체의 타입을 판단할 수 있으며, 객체 생성도 가능
|
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 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>05-04</title>
</head>
<body>
<script type="text/javascript">
// consturctor 프로퍼티
function Rectangle(x, y, w, h) {
this.pointX = x;
this.pointY = y;
this.width = w;
this.height = h;
}
Rectangle.prototype.toString = function() {
return 'Rectangle : { pointX : ' + this.pointX + ', pointY : ' + this.pointY + ', width : ' + this.width + ', height : ' + this.height + ' }';
};
Rectangle.prototype.area = function() {
return this.width * this.height;
};
var rect1 = new Rectangle(100, 120, 20, 30);
if (rect1.constructor == Rectangle)
document.writeln('rect1 객체의 생성자 함수는 Rectangle입니다.<br/>');
if (rect1.constructor.prototype == Rectangle.prototype)
document.writeln('rect1 객체의 생성자 함수의 프로토타입 객체는 Rectangle 생성자함수의 프로토타입 객체와 동일합니다.<br/>');
var rect2 = new rect1.constructor(250, 300, 30, 50);
document.writeln('rect2: ' + rect2 + '<br/>');
document.writeln('<br/>');
</script>
</body>
</html> |
cs |
10. 네임스페이스
- 자바스크립트는 네임스페이스 구조를 지원하지 않음
- 빈 객체를 이용해 네임스페이스와 같은 기능을 제공할 수 있음
- 네임스페이스를 정의하기 위해 구현 코드가 없는 생성자 함수를 작성하고, 생성자 함수에 프로퍼티를 추가하는 것과 동일한 방법으로 하위의 생성자 함수를 정의
- 네임스페이스를 사용할 경우 하위 생성자 함수를 이용해 객체를 생성할 경우, 네임스페이스를 포함한 FQN#으로 생성자 함수를 호출해야 함에 유의
|
5강끝 |
6강 상속
1. 객체 생성 과정
- new 연산자는 빈 객체를 생성합니다.
- 생성자 함수는 this 키워드를 통해 전달된 새로운 객체에 생성자 함수 내에 작성된 프로퍼티 혹은 메소드를 추가하는 초기화 작업을 수행합니다.
- 새로운 객체의 prototype 프로퍼티에 생성자 함수의 prototype 프로퍼티 값이 전달되어 객체와 생성자 함수는 동일한 프로토타입 객체를 참조하게 됩니다.
- this가 가리키는 객체를 반환합니다.
2. 프로토타입 체인과 프로토타입 멤버 상속
- 자바스크립트는 프로토타입 기반의 상속 메커니즘을 제공
- 객체를 생성하면 객체의 생성자 함수의 프로토타입 객체에 정의된 멤버를 상속
- 객체의 생성자 함수의 프로토타입 객체와 Object() 생성자 함수의 프로토타입 객체가 연결되어 있음
- 객체를 거쳐 프로토타입 객체로 멤버를 검색할 수 있는 연결을 프로토타입 체인(prototype chain)이라 함
- 멤버에 대한 검색은 맨 먼저 객체를 대상으로 수행하고, 만일 해당 멤버를 찾지 못하면 프로토타입 객체를 다음으로 검색하고, 마지막으로 Object 생성자 함수의 프로토타입 객체까지 검색하게 됨
3. Object 객체의 주요 멤버
|
멤버 |
설명 |
|
constructor |
객체 생성자 함수를 참조하는 프로퍼티 |
|
toString() |
객체의 문자열 표현을 반환 |
|
valueOf() |
객체의 기본형 표현을 반환 |
|
hasOwnProperty(prop) |
객체가 직접 prop프로퍼티를 갖고 있는가? (프로토타입 객체의 프로퍼티는 false를 반환) |
|
propertyIsEnumerable(prop) |
for...in 문으로 prop 프로퍼티/메소드를 열거할 수 있는가? |
|
isPrototypeOf(obj) |
호출 객체가 obj 객체의 프로토타입인가? |
4. 프로토타입 체인과 프로토타입 멤버 상속
- Function 객체의 주요 멤버
|
멤버 |
설명 |
|
apply(obj,[arg1, arg2, ... argn]) |
첫번째 매개변수 obj는 객체를 전달해 함수 내부의 this에 할당되고,두번째 매개변수는 함수의 인자들을 저장한 배열 객체로 호출 함수에 전달됩니다. 만일 obj 값이 null인 경우 전역 객체가 this에 할당됩니다. |
|
call(obj, arg1, arg2, ... argn) |
첫번째 매개변수 obj는 객체를 전달해 함수 내부의 this에 할당되고, 두번째 매개변수부터는 함수의 인자들로 호출 함수에 전달됩니다. 만일 obj 값이 null인 경우 전역 객체가 this에 할당됩니다. |
|
toString() |
함수를 정의하는 코드를 반환 |
- 모든 함수는 Function 객체의 프로토타입 멤버를 상속하고, 모든 함수의 프로토타입 객체는 Object 객체의 프로토타입 객체를 상속하며, 모든 생성자 함수의 객체는 Object 객체의 프로토타입 객체를 상속함
- 프로토타입 멤버 상속은 하위 생성자 함수의 prototype 프로퍼티가 new 연산자와 상위 생성자 함수 호출을 통해 생성된 객체를 참조해서 구현하며, 상위 생성자 함수의 프로토타입 멤버를 상속하게 됨
- 프로토타입 객체가 상위 생성자 함수를 통해 만들어졌기 때문에 constructor 프로퍼티는 상위 생성자 함수를 참조하고 있어 constructor 프로퍼티를 하위 생성자 함수로 변경함
|
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 lang="ko">
<head>
<meta charset="utf-8" />
<title>06-01</title>
</head>
<body>
<script type="text/javascript">
// 프로토타입 체인과 프로토타입 멤버 상속
// Car 생성자 함수의 프로토타입 객체는 new 연산자와 Object 생성자 함수 호출을 통해 생성된 객체이며,
// 프로토타입 객체에 constuctor 프로퍼티는 자동으로 Car 생성자 함수를 참조합니다.
var Car = function() {
};
Car.prototype = {
startEngine : function() {
document.writeln('시동을 겁니다...<br/>');
},
accelerate : function() {
document.writeln('속도를 올립니다...<br/>');
},
decelerate : function() {
document.writeln('속도를 줄입니다...<br/>');
},
stopEngine : function() {
document.writeln('시동을 끕니다...<br/>');
}
};
// K5 생성자 함수의 프로토타입 객체는 new 연산자와 Object 생성자 함수 호출을 통해 생성된 객체이며,
// 프로토타입 객체에 constuctor 프로퍼티는 자동으로 K5 생성자 함수를 참조합니다.
var K5 = function() {
};
// K5() 생성자 함수의 prototype 프로퍼티가 new 연산자와 Car() 생성자 함수 호출을 통해 생성된 객체를
// 참조하면 Car() 생성자 함수의 프로토타입 멤버를 상속하게 됩니다.
K5.prototype = new Car();
// 프로토타입 객체가 Car() 생성자 함수를 통해 만들어졌기 때문에 constructor 프로퍼티는
// Car() 생성자 함수를 참조하게 됩니다. 따라서 constructor 프로퍼티를 K5() 생성자 함수로 변경합니다.
K5.prototype.constructor = K5;
K5.prototype.startNavigation = function() {
document.writeln('네비게이션 안내를 시작합니다...<br/>');
};
K5.prototype.stopNavigation = function() {
document.writeln('네비게이션 안내를 종료합니다...<br/>');
};
var k5 = new K5();
k5.startEngine();
k5.startNavigation();
k5.accelerate();
k5.decelerate();
k5.stopNavigation();
k5.stopEngine();
document.writeln('<br/>');
</script>
</body>
</html> |
cs |
5. 객체 멤버 상속
- 프로토타입 멤버 뿐만 아니라 특정 객체의 멤버를 상속해야 하는 경우 Function 객체의 메소드 apply() 혹은 call()을 사용해 생성자 체이닝(constructor chaining)을 구현
- 상위 생성자 함수의 멤버를 new 연산자와 하위 생성자 함수를 통해 생성할 객체의 멤버로 추가하는 객체 멤버 상속을 수행함
- 하위 생성자 함수의 프로토타입 객체가 new 연산자와 상위 생성자 호출을 통해 생성된 객체가 되는데 이 객체 내에는 이미 객체 멤버 상속을 통해 프로퍼티를 가지고 있으므로 프로토타입 객체의 프로퍼티를 제거하는 과정이 필요함
|
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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>06-02</title>
</head>
<body>
<script type="text/javascript">
// 객체 멤버 상속을 위해 Function() 생성자의 메소드 apply()와 call()을 사용해 구현하는 생성자 체이닝
var Car = function(f) {
this.fuel = f;
this.velocity = 0;
this.isDriving = false;
};
Car.prototype = {
startEngine : function() {
this.isDriving = true;
this.fuel -= 5;
document.writeln('Car: 시동을 겁니다... (isDriving: ' + this.isDriving + ', fuel: ' + this.fuel + ')<br/>');
},
accelerate : function() {
this.velocity += 5;
this.fuel -= 5;
document.writeln('Car: 속도를 올립니다++++ (velocity: ' + this.velocity + ', fuel: ' + this.fuel + ')<br/>');
},
decelerate : function() {
this.velocity -= 5;
this.fuel -= 1;
document.writeln('Car: 속도를 줄입니다---- (velocity: ' + this.velocity + ', fuel: ' + this.fuel + ')<br/>');
},
stopEngine : function() {
this.isDriving = false;
this.fuel -= 5;
document.writeln('Car: 시동을 끕니다... (isDriving: ' + this.isDriving + ', fuel: ' + this.fuel + ')<br/>');
}
};
var K5 = function(f, m) {
// 객체 멤버 상속
Car.apply(this, [f]);
// 또는 Car.call(this, f);
this.model = m;
};
K5.prototype = new Car();
K5.prototype.constructor = K5;
delete K5.prototype.fuel;
delete K5.prototype.velocity;
delete K5.prototype.isDriving;
K5.prototype.accelerate = function() {
this.velocity += 10;
this.fuel -= 5;
document.writeln('K5 ' + this.model + ': 속도를 올립니다++++ (velocity: ' + this.velocity + ', fuel: ' + this.fuel + ')<br/>');
};
K5.prototype.decelerate = function() {
this.velocity -= 10;
this.fuel -= 1;
document.writeln('K5 ' + this.model + ': 속도를 줄입니다---- (velocity: ' + this.velocity + ', fuel: ' + this.fuel + ')<br/>');
};
K5.prototype.startNavigation = function() {
document.writeln('K5 ' + this.model + ': 네비게이션 안내를 시작합니다...<br/>');
};
K5.prototype.stopNavigation = function() {
document.writeln('K5 ' + this.model + ': 네비게이션 안내를 종료합니다...<br/>');
};
var k5 = new K5(1000, '2013년형');
document.writeln('>>> k5.fuel: ' + k5.fuel + '<br/>');
k5.startEngine();
document.writeln('>>> k5.fuel: ' + k5.fuel + '<br/>');
k5.startNavigation();
for (var i = 0; i < 5; i++)
k5.accelerate();
document.writeln('>>> k5.fuel: ' + k5.fuel + '<br/>');
for (var i = 0; i < 5; i++)
k5.decelerate();
document.writeln('>>> k5.fuel: ' + k5.fuel + '<br/>');
k5.stopNavigation();
document.writeln('>>> k5.fuel: ' + k5.fuel + '<br/>');
k5.stopEngine();
document.writeln('>>> k5.fuel: ' + k5.fuel + '<br/>');
document.writeln('<br/>');
</script>
</body>
</html> |
cs |
6. 객체의 타입 검사
- 자바스크립트는 타입에 대한 제약이 약해 직접 타입을 검사하는 방법을 익힐 필요가 있음
- 특히 프로토타입 상속을 한 사용자 정의 객체를 사용할 때는 typeof 연산자, instanceof 연산자, constructor 프로퍼티, toString() 메소드 등의 도움을 얻어 판단할 필요가 있음
|
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
61
62
63
64
65
66
67
68
69
70 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>06-03</title>
</head>
<body>
<script type="text/javascript">
// typeof, instanceof, constructor 를 이용한 객체의 타입 검사
function checkType(obj) {
// 먼저 null일 경우 문자열 'null'을 반환합니다.
if (obj == null)
return 'null';
// 제일 먼저 typeof 연산자를 이용해 문자열을 취합니다.
var type = typeof obj;
// typeof의 반환 값이 'object'이 아닐 경우 type 값을 반환합니다.
if (type != 'object')
return type;
// obj.toString()의 결과를 str 변수에 저장합니다.
var str = Object.prototype.toString.call(obj);
// 생성자 이름을 추출합니다.
var constructor = str.substring(8, str.length - 1);
// 'Object'일 경우엔 constructor 프로퍼티까지 조사할 필요가 있습니다.
if (constructor != 'Object')
return constructor;
// 실제 Object 타입일 경우 constructor 값을 반환합니다.
if (obj.constructor == Object)
return constructor;
// 사용자 정의 객체의 생성자 함수의 프로토타입 객체에 정의해 놓은 constructorname
// 프로퍼티가 있으면 constructorname을 반환합니다.
if ('constructorname' in obj.constructor.prototype)
return obj.constructor.prototype.constructorname;
return '객체의 타입을 알 수 없습니다.';
}
var Parent = function() {};
Parent.prototype.constructorname = 'Parent';
var Child = function() {};
Child.prototype = new Parent();
Child.prototype.constructor = Child;
Child.prototype.constructorname = 'Child';
var child = new Child();
document.writeln('typeof Parent: ' + typeof Parent + ' <br/>');
document.writeln('typeof Child: ' + typeof Child + ' <br/>');
document.writeln('typeof child: ' + typeof child + ' <br/>');
document.writeln('child instanceof Object: ' + (child instanceof Object) + ' <br/>');
document.writeln('child instanceof Parent: ' + (child instanceof Parent) + ' <br/>');
document.writeln('child instanceof Child: ' + (child instanceof Child) + ' <br/>');
document.writeln('child.constructor === Object: ' + (child.constructor === Object) + ' <br/>');
document.writeln('child.constructor === Parent: ' + (child.constructor === Parent) + ' <br/>');
document.writeln('child.constructor === Child: ' + (child.constructor === Child) + ' <br/>');
document.writeln('<br/>');
document.writeln('checkType(child): ' + checkType(child) + ' <br/>');
</script>
</body>
</html> |
cs |
|
6강끝 |
7강 내장 객체
1. Array
- Array 객체는 열을 다루기 위한 객체로, 배열의 원소에 대한 추가, 삭제, 정렬 등의 조작 기능을 제공
- new 연산자와 생성자 함수 호출을 이용해 Array 객체를 생성할 수 있지만, 배열 리터럴로도 많이 사용함
- 자바스크립트에서 배열은 크기가 자동으로 증가되는 특징을 가지고 있음
var students = new Array('홍길동', '이순신', '강감찬');
var students = new Array();
var students = new Array(10);
var students = ['홍길동', '이순신', '강감찬'];
var students = [];
|
멤버 |
설명 |
|
concat(arr) |
매개변수로 전달된 배열 객체를 현재 배열 객체에 연결 |
|
join(del) |
배열의 원소를 구분문자열 del로 연결해 문자열을 반환 |
|
slice(start [, end] |
start 인덱스에서 end-1 인덱스의 원소로 배열을 생성하여 반환 |
|
splice(start, cnt [,rep [, ...]]) |
start 인덱스에서 cnt개의 원소를 rep,...로 치환 |
|
pop() |
배열 끝의 원소를 꺼내 배열에서 삭제 |
|
push(data1 [, data2, ...]) |
배열 끝에 원소를 추가 |
|
shift() |
배열 처음에서 원소를 꺼내 삭제 |
|
unshift(data1 [,data2, ...]) |
배열 처음에 원소들을 추가 |
|
reverse() |
인덱스의 역순으로 배열을 정렬 |
|
sort([func]) |
인덱스의 역순으로 배열을 정렬 |
|
sort(func]) |
기본 오름차순으로 정렬, func은 두 인자를 가지며, 두 인자가 같을 때 0을, 첫번째 인자가 크면 1을, 두번째 인자가 크면 -1을 반환하는 콜백함수 |
|
length |
배열의 크기 |
|
toString() |
[원소1, 원소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
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 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>07-01</title>
</head>
<body>
<script type="text/javascript">
// Array
var ary1 = ['홍길동', '이순신', '강감찬', '을지문덕', '광개토대왕'];
var ary2 = ['이나영', '임수정', '이영애', '김혜수'];
document.writeln(ary1.concat(ary2), '<br/>');
// 홍길동,이순신,강감찬,을지문덕,광개토대왕,이나영,임수정,이영애,김혜수
document.writeln(ary1.join('／'), '<br/>');
// 홍길동／이순신／강감찬／을지문덕／광개토대왕
document.writeln(ary1.slice(1), '<br/>');
// 이순신,강감찬,을지문덕,광개토대왕
document.writeln(ary1.slice(1, 2), '<br/>');
// 이순신
document.writeln(ary1.splice(1, 2, '계백', '김유신'), '<br/>');
// 이순신,강감찬
document.writeln(ary1, '<br/>');
// 홍길동,계백,김유신,을지문덕,광개토대왕
document.writeln('<br/>');
document.writeln(ary1.pop(), '<br/>');
// 광개토대왕
document.writeln(ary1, '<br/>');
// 홍길동,계백,김유신,을지문덕
document.writeln(ary1.push('권율'), '<br/>');
// 5
document.writeln(ary1, '<br/>');
// 홍길동,계백,김유신,을지문덕,권율
document.writeln(ary1.shift(), '<br/>');
// 홍길동
document.writeln(ary1, '<br/>');
// 계백,김유신,을지문덕,권율
document.writeln(ary1.unshift('세종대왕', '장영실'), '<br/>');
// 6
document.writeln(ary1, '<br/>');
// 세종대왕,장영실,계백,김유신,을지문덕,권율
document.writeln('<br/>');
document.writeln(ary1.reverse(), '<br/>');
// 권율,을지문덕,김유신,계백,장영실,세종대왕
document.writeln(ary1, '<br/>');
// 권율,을지문덕,김유신,계백,장영실,세종대왕
document.writeln(ary1.sort(), '<br/>');
// 계백,권율,김유신,세종대왕,을지문덕,장영실
document.writeln(ary1, '<br/>');
// 계백,권율,김유신,세종대왕,을지문덕,장영실
document.writeln('<br/>');
document.writeln(ary1.length, '<br/>');
// 6
document.writeln(ary1.toString(), '<br/>');
// 계백,권율,김유신,세종대왕,을지문덕,장영실
</script>
</body>
</html> |
cs |
2. String
- String 객체는 문자열을 다루기 위한 랩퍼(wrapper) 객체로, 문자열의 검색, 부분 문자열의 추출, 변환 등의 조작 기능을 제공
- new 연산자와 생성자 함수를 이용해 String 객체를 생성할 수 있지만 리터럴로 표현하는 것이 일반적임
var greeting = new String('안녕하세요');
var greeting = '안녕하세요';
|
멤버 |
설명 |
|
indexOf(substr [, start]) |
start 인덱스로부터 정방향으로 부분문자열 substr과 일치하는 인덱스 반환 |
|
lastIndexOf(substr [,start]) |
start 인덱스로부터 역방향으로 부분문자열 substr과 일치하는 인덱스 반환 |
|
charAt(n) |
n번 인덱스의 문자를 반환 |
|
slice(start [,end] |
문자열에서 start 인덱스에서 end-1 인덱스 사이의 문자를 반환 |
|
substring(start [,end]) |
문자열에서 start 인덱스에서 end-1 인덱스 사이의 문자를 반환 |
|
substr(start [, cnt]) |
문자열에서 start 인덱스에서 cnt 개의 문자를 반환 |
|
split(str [, limit]) |
문자열을 분할문자열 str로 분할하여 그 결과를 배열로 반환(limit은 최대분할수) |
|
match(reg) |
정규표현 reg로 문자열을 검색, 일치한 부분문자열 반환 |
|
replace(reg,rep) |
정규표현 reg로 문자열을 검색, 일치한 부분을 rep로 치환 |
|
search(reg) |
정규표현 reg로 문자열을 검색, 일치한 맨 처음 문자위치 반환 |
|
toLowerCase() |
소문자로 치환 |
|
toUpperCase() |
대문자로 치환 |
|
concat(str) |
문자열 뒤에 문자열 str을 연결한 새로운 문자열을 반환 |
|
length |
문자열의 길이 반환 |
|
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 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>07-02</title>
</head>
<body>
<script type="text/javascript">
// String
var str1 = 'better tomorrow';
document.writeln(str1.indexOf('t'), '<br/>');
// 2
document.writeln(str1.lastIndexOf('t'), '<br/>');
// 7
document.writeln(str1.indexOf('t', 3), '<br/>');
// 3
document.writeln(str1.lastIndexOf('o', 3), '<br/>');
// -1
document.writeln(str1.indexOf('mo'), '<br/>');
// 9
document.writeln('<br/>');
var str2 = 'JavaScript';
document.writeln(str2.charAt(4), '<br/>');
// s
document.writeln(str2.slice(5, 8), '<br/>');
// cri
document.writeln(str2.substring(5, 8), '<br/>');
// cri
document.writeln(str2.substr(5, 3), '<br/>');
// cri
document.writeln(str2.split('S'), '<br/>');
// Java,cript
document.writeln('<br/>');
document.writeln(str2.concat('프로젝트'), '<br/>');
// JavaScript프로젝트
document.writeln(str2.length, '<br/>');
// 10
document.writeln('<br/>');
</script>
</body>
</html> |
cs |
3. Number
- Number 객체는 숫자를 다루기 위한 랩퍼 객체
- new 연산자와 생성자 함수를 이용해 Number 객체를 생성할 수 있지만 리터럴로 표현하는 것이 일반적임
var num = new Number(100);
var num = 100;
|
멤버 |
설명 |
|
MAX_VALUE |
최대값(생성자 함수의 프로퍼티) |
|
MIN_VALUE |
최소값(생성자 함수의 프로퍼티) |
|
NaN |
숫자값이 아님(생성자 함수의 프로퍼티) |
|
NEGATIVE_INFINITY |
음수의 무한대(생성자 함수의 프로퍼티) |
|
POSITIVE_INFINITY |
양수의 무한대(생성자 함수의 프로퍼티) |
|
toString(n) |
n진수 값으로 변환 |
|
toExponential(n) |
지수형식으로 변환(n은 소수점 이하의 행수) |
|
toFixed(n) |
소수점 이하 자리수 n에 맞춰 변환(자리수가 부족한 경우 0으로 채움) |
|
toPrecision(n) |
전체 유효 자리수 n에 맞춰 변환(자리수가 부족한 경우 0으로 채움) |
|
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 lang="ko">
<head>
<meta charset="utf-8" />
<title>07-03</title>
</head>
<body>
<script type="text/javascript">
// Number
var num1 = 255;
document.writeln(num1.toString(16), '<br/>');
// ff
document.writeln(num1.toString(8), '<br/>');
// 377
document.writeln('<br/>');
var num2 = 123.45678;
document.writeln(num2.toExponential(2), '<br/>');
// 1.23e+2
document.writeln(num2.toFixed(3), '<br/>');
// 123.457
document.writeln(num2.toFixed(7), '<br/>');
// 123.4567800
document.writeln(num2.toPrecision(10), '<br/>');
// 123.4567800
document.writeln(num2.toPrecision(6), '<br/>');
// 123.457
document.writeln('<br/>');
</script>
</body>
</html> |
cs |
4. Math
|
멤버 |
설명 |
|
abs(n) |
n에 대한 절대값 반환 |
|
max(n1, n2) |
n1과 n2 중 큰 값을 반환 |
|
min(n1, n2) |
n1과 n2 중 작은 값을 반환 |
|
pow(base, n) |
base값의 n제곱을 반환 |
|
random() |
0~1 사이의 난수 반환 |
|
ceil(n) |
n이상의 최소 정수를 반환 |
|
floor(n) |
n이하의 최대 정수를 반환 |
|
round(n) |
반올림 값을 반환 |
|
SQRT1_2 |
1/2의 제곱근을 반환 |
|
SQRT2 |
2의 제곱근을 반환 |
|
sqrt(n) |
n의 제곱근을 반환 |
|
PI |
원주율을 반환 |
|
cos(n) |
n의 코사인 값을 반환 |
|
sin(n) |
n의 사인 값을 반환 |
|
tan(n) |
n의 탄젠트 값을 반환 |
|
acos(n) |
n의 아크 코사인 값을 반환 |
|
asin(n) |
n의 아크 사인 값을 반환 |
|
atan(n) |
n의 아크 탄젠트 값을 반환 |
|
E |
상용로그 밑에 해당하는 상수 e |
|
LN2 |
2의 상용로그 값 |
|
LN10 |
10의 상용로그 값 |
|
LOG2E |
2를 밑으로 한 e의 로그 값 |
|
LOG10E |
10을 밑으로 한 e의 로그 값 |
|
lon(n) |
n의사용로그 값 |
|
exp(n) |
지수함수로 e의 n승 값 |
|
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 lang="ko">
<head>
<meta charset="utf-8" />
<title>07-04</title>
</head>
<body>
<script type="text/javascript">
// Math
document.writeln(Math.abs(-15), '<br/>');
//15
document.writeln(Math.max(10, 15), '<br/>');
// 15
document.writeln(Math.min(-10, 0), '<br/>');
// -10
document.writeln(Math.pow(2, 3), '<br/>');
// 8
document.writeln(Math.random(), '<br/>');
// 0.7477149321894746
document.writeln('<br/>');
document.writeln(Math.ceil(1.58), '<br/>');
// 2
document.writeln(Math.floor(1.58), '<br/>');
// 1
document.writeln(Math.round(1.58), '<br/>');
// 2
document.writeln(Math.ceil(-1.58), '<br/>');
// -1
document.writeln(Math.floor(-1.58), '<br/>');
// -2
document.writeln(Math.round(-1.58), '<br/>');
// -2
document.writeln('<br/>');
document.writeln(Math.sqrt(3), '<br/>');
// 1.7320508075688772
document.writeln('<br/>');
document.writeln(Math.PI, '<br/>');
// 3.141592653589793
document.writeln('<br/>');
</script>
</body>
</html> |
cs |
5. Date
- Date 객체는 리터럴 표현이 존재하지 않으며, new 연산자와 생성자 호출을 통해 객체를 생성해야 함
- Date 객체는 1970년 1월 1일 0시 0분 0초를 기준으로 시각을 관리하며, Date 객체의 월 지정값은 0~11임
var d = new Date();
var d = new Date('2012/12/10');
var d = new Date(2012, 11, 10, 22, 10, 33, 500);
|
멤버 |
설명 |
|
getFullYear() |
년(4자리) |
|
getMonth() |
월(0~11) |
|
getDate() |
일(1~31) |
|
getDay() |
요일(0:일요일 ~ 6:토요일) |
|
getHours() |
시(0~23) |
|
getMinutes() |
분(0~59) |
|
getSeconeds() |
ch(0~59) |
|
getMilliseconds() |
밀리초(0~999) |
|
getTime() |
1970년 1월 1일 0시를 기준으로 경과된 밀리초 |
|
getTimezoneOffset() |
세계협정시와의 시차 |
|
setFullYear(y) |
년(4자리) |
|
setMonth(m) |
월(0~11) |
|
setDate(d) |
일(1~31) |
|
setHours(h) |
시(0~23) |
|
setMinutes(m) |
분(0~59) |
|
setSeconds(s) |
초(0~59) |
|
setMilliseconds(ms) |
밀리초(0~999) |
|
setTime(ts) |
1970년 1월 1일 0시를 기준으로 경과된 밀리초 |
|
parse(str) |
문자열을 해석해 1970년 1월 1일 0시를 기준으로 경과된 밀리초를 반환(생성자 함수를 통해 호출) |
|
UTC(y, m, d [,h [, mm [, s [,ms]]]]) |
전달 인자를 이용, 1970년 1월 1일 0시를 기준으로 경과된 밀리초를 반환 (생성자 함수를 통해 호출) |
|
toGMTString() |
그리니치 표준시를 문자열로 반환 |
|
toUTCString() |
세계협정시를 문자열로 반환 |
|
toLocaleString() |
지역정보에 따른 날짜와 시각을 문자열로 반환 |
|
toDateString() |
날짜부분을 문자열로 반환 |
|
toTimeString() |
시각부분을 문자열로 반환 |
|
toLocaleDateString() |
지역정보에 따른 날짜부분을 문자열로 반환 |
|
toLocaleTimeString() |
지역정보 따른 시각부분을 문자열로 반환 |
|
toString() |
일시를 문자열로 반환 |
|
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
61
62
63
64
65 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>07-05</title>
</head>
<body>
<script type="text/javascript">
// Date
var dat = new Date(2012, 11, 10, 22, 10, 33, 500);
document.writeln(dat, '<br/>');
// Mon Dec 10 2012 22:10:33 GMT+0900
document.writeln(dat.getFullYear(), '<br/>');
// 2012
document.writeln(dat.getMonth(), '<br/>');
// 11
document.writeln(dat.getDate(), '<br/>');
// 10
document.writeln(dat.getDay(), '<br/>');
// 1
document.writeln(dat.getHours(), '<br/>');
// 22
document.writeln(dat.getMinutes(), '<br/>');
// 10
document.writeln(dat.getSeconds(), '<br/>');
// 33
document.writeln(dat.getMilliseconds(), '<br/>');
// 500
document.writeln(dat.getTime(), '<br/>');
// 1355145033500
document.writeln('<br/>');
var dat2 = new Date();
dat2.setFullYear(2012);
dat2.setMonth(11);
dat2.setDate(12);
dat2.setHours(14);
dat2.setMinutes(45);
dat2.setSeconds(30);
dat2.setMilliseconds(999);
document.writeln('<br/>');
document.writeln(dat2.toLocaleString(), '<br/>');
// 2012년 12월 12일 수요일 오후 2:45:30
document.writeln(dat2.toGMTString(), '<br/>');
// Wed, 12 Dec 2012 05:45:30 GMT
document.writeln(dat2.toUTCString(), '<br/>');
// Wed, 12 Dec 2012 05:45:30 GMT
document.writeln(dat2.toDateString(), '<br/>');
// Wed Dec 12 2012
document.writeln(dat2.toTimeString(), '<br/>');
// 14:45:30 GMT+0900
document.writeln(dat2.toLocaleDateString(), '<br/>');
// 2012년 12월 12일 수요일
document.writeln(dat2.toLocaleTimeString(), '<br/>');
// 오후 2:45:30
document.writeln('<br/>');
document.writeln(Date.parse('2012/12/08'), '<br/>');
// 1354892400000
document.writeln(Date.UTC(2012, 12, 30), '<br/>');
// 1359504000000
document.writeln('<br/>');
</script>
</body>
</html> |
cs |
6. JSON
- JSON은 자바스크립트에서 객체를 텍스트(plain text)로 표현하는 방식
- JSON은 시스템 간의 데이터 교환의 수단으로 사용되고 있는 XML보다 용량이 작고, 파싱에 걸리는 시간이 절약되는 이유로 시스템 간의 데이터 교환에 많이 사용되고 있으며, 웹 환경에 최적화되어 있는 자바스크립트에서 바로 객체화해 사용할 수 있기 때문에 생산성과 편의성 또한 높음
- JSON은 숫자, 문자열, 불리언, 배열, 객체를 표현할 수 있음
'{
"name" : "홍길동",
"address" : "서울특별시 관악구 낙성대동",
"orderItems" : [
{"item" : "멈추면, 비로소 보이는 것들", "price" : 15000, "qty" :1 },
{"item" : "어떻게 원하는 것을 얻는가?", "price" : 18000, "qty" :1 }
],
"baroOn" : true
}'
- JSON.parse() 함수를 이용해 JSON 문자열을 파싱하고 자바스크립트 객체로 변환
- JSON.stringify() 함수를 이용해 자바스크립트 객체를 JSON 문자열로 변환
|
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 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>07-06</title>
</script>
</head>
<body>
<script type="text/javascript">
// JSON
var orderJSON = '{ "name" : "홍길동", "address" : "서울특별시 관악구 낙성대동", "orderItems" : [ {"item" : "멈추면, 비로소 보이는 것들", "price" : 15000, "qty" : 1 }, {"item" : "어떻게 원하는 것을 얻는가?", "price" : 18000, "qty" : 1 } ], "baroOn" : true }';
// JSON 문자열을 파싱하여 자바스크립트 객체로 변환합니다.
var order = JSON.parse(orderJSON);
document.writeln('order.name: ' + order.name + '<br/>');
document.writeln('order.address: ' + order.address + '<br/>');
document.writeln('<br/>');
for (var i = 0; i < order.orderItems.length; i++) {
for (var prop in order.orderItems[i]) {
document.writeln(prop + ' : ' + order.orderItems[i][prop] + '<br/>');
}
document.writeln('<br/>');
}
document.writeln('order.baroOn: ' + order.baroOn + '<br/>');
document.writeln('<br/>');
</script>
</body>
</html> |
cs |
|
7강끝 |
8강 웹브라우저와 자바스크립트
1. 웹 브라우저와 자바스크립트 실행환경
- Web Browser
Web Layout Engine
JavaScript Engine
Networking Engine
2. 웹 브라우저 객체
- 레벨 0 DOM에서는 클라이언트 측 객체 계층구조를 통해 다양하게 접근
3. HTML DOM
- DOM 표준 레벨 1은 1998년 10월에 표준화되었으며, Node와 Element.Attr, Document 같은 코어 DOM 인터페이스들이 정의되어 있고, HTML에 특화되어 있는 다양한 인터페이스들도 정의되어 있음
- 레벨 2는 2000년 11월에 표준화되었으며, 레벨 1을 확장하고, 문서 이벤트와 CSS 관련 표준 API를 정의하고, Core 모듈, HTML 모듈, CSS 모듈, Events 모듈과 같은 모듈화로 구성되었음
- 주요 노드 타입
|
인터페이스 타입 |
nodeType 상수 |
nodeType값 |
|
Element |
Node.ELEMENT_NODE |
1 |
|
Attr |
Node.ATTRIBUTE_NODE |
2 |
|
Text |
Node.TEXT_NODE |
3 |
|
Comment |
Node.COMMENT_NODE |
8 |
|
Document |
Node.DOCUMENT |
9 |
- DOM API의 인터페이스 계충 구조
- DOM HTML API를 이용한 HTML 문서 요소 접근 및 조작
|
API 용도 |
멤버 |
설명 |
|
문서 순회 |
Node.childNodes |
Node 객체의 배열 객체처럼 작동하는 NodeList 객체로 자식노드 객체들에 대한 참조를 가지고 있습니다. |
|
Node.firstChild |
첫번째 자식노드 객체를 참조합니다. | |
|
Node.lastChild |
마지막 자식노드 객체를 참조합니다. | |
|
Node.nextSibling |
인접한 다음 형제노드 객체를 참조합니다. | |
|
Node.previousSibling |
인접한 이전 형제노드 객체를 참조합니다. | |
|
문서 내 요소 찾기 |
Document.getElementByTagName(tag) |
태그명을 문자열 tag로 전달해 해당 태그들의 NodeList 객체를 반환합니다. NodeList 객체는 배열 객체와 같은 방법으로 사용할 수 있습니다. |
|
Document.getElementByid(id) |
id 속성이 같은 유일 노드 객체의 참조를 반환합니다. | |
|
HTMLDocument.getElementsByName(name) |
name 속성이 같은 요소들의 HTMLCollection 객체를 반환합니다 | |
|
문서 수정하기 |
CharacterData.data |
data 프로퍼티에 문자열을 제공해 텍스트 노드의 텍스트를 변경할 수 있습니다. |
|
Node.appendChild() |
자식노드 객체를 추가합니다. | |
|
Node.removeChild() |
자식노드 객체를 제거합니다. | |
|
문서에 새로운 내용 추가하기 |
Document.createElement() |
새로운 Element 객체를 생성하빈다. |
|
Document.createTextNode() |
새로운 TextNode 객체를 생성합니다. | |
|
Node.appendChild() |
자식노드 객체를 추가합니다. | |
|
Node.insertBefore() |
노드 객체를 앞에 추가합니다. | |
|
Node.replaceChild() |
자식노드 객체를 교체합니다. | |
|
Node.innerHTML |
DOM표준은 아니나 사실상의 표준프로퍼티인 innerHTML에 HTML텍스트 문자열을 기술하면 간단히 새로운 내용을 추가할 수 있습니다. |
|
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 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>08-01</title>
<script type="text/javascript">
// 주어진 노드 객체의 모든 자식노드 중 노드타입이 엘리먼트인 노드의 이름을 출력합니다.
function printTags(node) {
var tags = '';
// 노드타입이 엘리먼트인지를 검사합니다.
if (node.nodeType == Node.ELEMENT_NODE) {
// nodeName 프로퍼티에 저장되어 있는 노드의 이름을 tags 변수에 저장합니다.
tags += node.nodeName + '<br/>';
}
// 자식노드 객체들에 대한 NodeList 객체를 저장합니다.
var children = node.childNodes;
// NodeList 객체의 length 프로퍼티를 이용해 printTags 함수를 재귀호출 합니다.
for (var i = 0; i < children.length; i++) {
// printTags 함수에 NodeList 객체에 담긴 자식노드 항목들을 전달하여
// 실행된 결과를 tags 변수에 문자열 접합연산을 통해 저장합니다.
tags += printTags(children[i]);
}
return tags;
}
// HTML 문서가 파싱되고 외부 컨텐츠 로딩이 완료되면 웹 브라우저는 load 이벤트를 발생하는데,
// 이 때 load 이벤트의 이벤트 핸들러로 등록된 함수가 실행됩니다. 이 load 이벤트 핸들러에서
// id 값이 "result"인 div 태그를 찾아 innerHTML 프로퍼티에 html 문자열 값을 저장합니다.
window.onload = function() {
var result = document.getElementById('result');
result.innerHTML = printTags(document);
};
</script>
</head>
<body>
<div id="result"></div>
</body>
</html> |
cs |
4. 이벤트와 이벤트 핸들러
|
이벤트 |
이벤트핸들러 프로퍼티 |
발생시점 |
대상요소 |
|
abort |
onabort |
이미지 로딩이 중단되었을 때 |
img |
|
load |
onload |
문서, 이미지 로딩이 완료되었을 때 |
body, img |
|
unload |
onunload |
다른 페이지로 이동할 때 |
body |
|
click |
onclick |
마우스로 클릭할 때 |
|
|
dbclick |
ondbclick |
마우스로 더블클릭할 때 |
|
|
mousedown |
onmousedown |
마우스 버튼을 눌렀을 때 |
|
|
mouseup |
onmouseup |
마우스 버튼을 놓았을 때 |
|
|
mousemove |
onmousemove |
마우스의 포인터를 이동하였을 때 |
|
|
mouseout |
onmouseout |
요소로부터 마우스가 벗어날 때 |
|
|
mouseover |
onmouseover |
요소 안으로 마우스 포인터가 들어왔을 때 |
|
|
contextmenu |
oncontextmenu |
컨텍스트 메뉴가 표시되기 전 |
body |
|
keypress |
onkeypress |
키를 눌렀을 때 |
form 요소, body |
|
keydown |
onkeydown |
키를 누르고 있을 때 |
form 요소, body |
|
keyup |
onkeyup |
키를 떼었을 때 |
form 요소, body |
|
change |
onchange |
요소의 내용이 변경되었을 때 |
input(text), select, textarea |
|
reset |
onreset |
reset버튼일 눌렸을 때 |
form |
|
submit |
onsubmit |
submit 버튼일 눌렸을 때. form 내용을 전송하지 않으려면 false를 반환합니다. |
form |
|
blur |
onblur |
요소가 포커스를 잃었을 때 |
button, input, label, select, textarea, body |
|
focus |
onfocus |
요소가 포커스를 얻었을 때 |
button, input, label, select, textarea, body |
|
resize |
onresize |
요소의 사이즈가 변경되었을 때 |
body |
|
scroll |
onscroll |
스크롤할 때 |
body |
5. 이벤트 핸들러 등록과 load 이벤트
- HTML 문서가 파싱되고 외부 컨텐츠 로딩이 완료되면 웹 브라우저에서는 load 이벤트가 발생하는데, 이 때 load 이벤트의 이벤트 핸들러로 등록된 함수가 실행됨
- load 이벤트 핸들러 함수를 자바스크립트 프로그램의 진입점으로 활용해 HTMl 요소에 대한 이벤트 핸들러 등록을 하는 초기화 작업을 수행할 수 있어 HTML 코드와의 분리가 용이함
function 이벤트핸들러함수(){
이벤트 발생 시 수행할 문장들
}
window.onload = function(){
var htmlElement = document.getElementById('id값');
htmlElement.이벤트핸들러프로퍼티명 = function(){
이벤트 발생 시 수행할 문장들
};
또는
htmlElement.이벤트핸들러프로퍼티명 = 함수명;
};
function 이벤트핸들러함수(){
이벤트 발생 시 수행할 문장들
}
function 초기화함수(){
var htmlElement = document.getElementById('id값');
htmlElement.이벤트핸들러프로퍼티명 = function(){
이벤트 발생 시 수행할 문장들
};
또는
htmlElement.이벤트핸들러프로퍼티명 = 이벤트핸들러함수명;
}
window.onload = 초기화함수명;
|
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
61
62
63
64
65
66
67
68
69
70
71
72
73 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>08-02</title>
<script type="text/javascript">
// 버튼 "btnAdd"를 클릭하면 이 함수를 호출합니다.
function add() {
// id 속성 값이 'siteName', 'url', 'result'인 엘리먼트를 찾아 참조합니다.
var siteNameElement = document.getElementById('siteName');
var urlElement = document.getElementById('url');
var resultElement = document.getElementById('result');
// <a></a> 엘리먼트를 생성합니다.
var anchorElement = document.createElement('a');
// <a href="???"></a> 엘리먼트의 href 속성값을 urlElement에 저장된 값으로 대입합니다.
anchorElement.href = urlElement.value;
// siteNameElement에 저장된 값으로 텍스트노드를 생성합니다.
var newTextNode = document.createTextNode(siteNameElement.value);
// <a href="???"> ???? </a> 엘리먼트의 자식노드로 방금 전 만든 텍스트노드를 추가합니다.
anchorElement.appendChild(newTextNode);
// <br /> 엘리먼트를 생성합니다.
var brElement = document.createElement('br');
// resultElement의 자식노드로 anchorElement와 brElement를 추가합니다.
resultElement.appendChild(anchorElement);
resultElement.appendChild(brElement);
// 입력 필드를 초기화합니다.
siteNameElement.value = '';
urlElement.value = '';
};
// 버튼 "btnCancel"을 클릭하면 이 함수를 호출합니다.
function cancel() {
// id 속성 값이 'siteName', 'url'인 엘리먼트를 찾아 참조합니다.
var siteNameElement = document.getElementById('siteName');
var urlElement = document.getElementById('url');
// 입력 필드를 초기화합니다.
siteNameElement.value = '';
urlElement.value = '';
};
// HTML 문서가 파싱되고 외부 컨텐츠 로딩이 완료되면 웹 브라우저는 load 이벤트를 발생하는데,
// 이 때 load 이벤트의 이벤트 핸들러로 등록된 함수가 실행됩니다. 이 load 이벤트 핸들러에서
// id 값이 "btnAdd"와 "btnCancel"인 버튼을 찾아 click이벤트에 대해 이벤트 핸들러 함수를 등록합니다.
window.onload = function() {
var btnAddElement = document.getElementById('btnAdd');
var btnCancelElement = document.getElementById('btnCancel');
btnAddElement.onclick = add;
btnCancelElement.onclick = cancel;
};
</script>
</head>
<body>
<form>
<label> 웹 사이트 :
<br />
<input type="text" id="siteName" size="50" />
<br />
</label>
<label> URL :
<br/>
<input type="text" id="url" size="50" />
<br />
</label>
<input type="button" id="btnAdd" value="추가" />
<input type="button" id="btnCancel" value="취소" />
</form>
<div id="result"></div>
</body>
</html> |
cs |
6. DOM 이벤트 핸들링
- 앞서 소개된 이벤트 핸들링 방식은 오래 전부터 클라이언트 측 자바스크립트에서 사용되어 온 방식인데, 여기에는 한 개의 HTML 요소에 둘 이상의 이벤트 처리가 안된다는 문제점이 있음
- DOM 레벨 2의 이벤트 리스너(event listener) 는 한 개의 HTML요소에서 복수의 이벤트와 연관을 맺을 수 있도록 하는 기능을 제공하며, 설정했던 이벤트 리스너를 쉽게 제거할 수도 있음
- 이벤트 리스너와 관련된 DOM API가 브라우저 호환성 문제가 있음
- 이벤트 리스너를 사용하는 경우에는 크로스 브라우징(cross browsing)을 고려한 코드를 작성해야 함(MS의 인터넷 익스플로러도 버전 9부터는 DOM 레벨 2 이벤트 모델 표준을 따르고 있음)
var htmlElement = document.getElementById('id값');
//FireFox, Chrome 과 같은 비 IE 웹브라우저의 경우
htmlElement.addEventListener(이벤트명, 이벤트핸들러함수명,false);
// IE 웹 브라우저의 경우
htmlElement.attachEvent(이벤트핸들러프로퍼티명, 이벤트핸들러함수명);
var htemlElement = document.getElementById('id값');
//FireFox, Chrome 과 같은 비 IE 웹브라우저의 경우
htmlElement.removeEventListener(이벤트명, 이벤트핸들러함수명,false);
// IE 웹 브라우저의 경우
htmlElement.detachEvent(이벤트핸들러프로퍼티명, 이벤트핸들러함수명);
|
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 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>08-03</title>
<script type="text/javascript">
// click 이벤트 발생 시 수행할 이벤트 핸들러 함수입니다.
function addText() {
var resultElement = document.getElementById('result');
resultElement.innerHTML = '크로스 브라우징 이벤트 리스너 구현!!!';
}
// click 이벤트 발생 시 수행할 이벤트 핸들러 함수입니다.
function clearText() {
var resultElement = document.getElementById('result');
resultElement.innerHTML = '';
}
// load 이벤트 발생 시 수행할 이벤트 핸들러 함수입니다.
function init() {
// id 속성 값이 'btnClick', 'btnCancel'인 버튼을 찾아 크로스 브라우징 기능이 구현된
// 이벤트 리스너 등록 함수를 사용해 click 이벤트에 대한 이벤트 핸들러 함수를 등록합니다.
var btnClickElement = document.getElementById('btnClick');
var btnCancelElement = document.getElementById('btnCancel');
addListener(btnClickElement, 'click', addText);
addListener(btnCancelElement, 'click', clearText);
}
// 크로스 브라우징을 고려해 구현한 이벤트 리스너 등록 함수입니다.
// el : 이벤트가 발생할 HTML 요소
// ev : 이벤트
// handler : 이벤트 핸들러 함수
function addListener(el, ev, handler) {
// FireFox, Chrome과 같은 비 IE 웹브라우저의 경우
if (el.addEventListener) {
el.addEventListener(ev, handler, false);
} else {// IE 웹 브라우저의 경우
el.attachEvent('on' + ev, handler);
}
}
addListener(window, 'load', init);
</script>
</head>
<body>
<form>
<input type="button" id="btnClick" value="눌러주세요" />
<input type="button" id="btnCancel" value="취소" />
</form>
<div id="result"></div>
</body>
</html> |
cs |
7. DOM 이벤트 전파
|
이벤트 흐름 단계 |
개요 |
|
캡처 단계 |
웹 브라우저에서 이벤트가 발생하고, 문서의 최상위 객체인 Document 객체에서 이벤트가 발생한 타겟 객체의 상위 객체까지 이벤트가 전파되는 단계 |
|
타겟 단계 |
이벤트가 발생한 객체로 전파되는 단계 |
|
버블링 단계 |
타겟 객체의 상위 객체에서 다시 최상위 객체인 Document 객체까지 전파되는 단계 |
|
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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>08-04</title>
<style>
.class1 {
background-color: #adff2f;
}
.class2 {
background-color: #dda0dd;
}
</style>
<script type="text/javascript">
// 크로스 브라우징이 적용된 이벤트 버블링 억제 함수
function cancelBubbling(e) {
// FireFox, Chrome과 같은 비 IE 웹브라우저의 경우
if (e.stopPropagation) {
e.stopPropagation();
} else {// IE 웹 브라우저의 경우
window.event.cancelBubble = true;
}
}
// click 이벤트 발생 시 수행할 이벤트 핸들러 함수입니다.
function outerFunc() {
var resultElement = document.getElementById('result');
resultElement.innerHTML = 'outer 에서 click 이벤트 발생';
}
// click 이벤트 발생 시 수행할 이벤트 핸들러 함수입니다.
function innerFunc(e) {
var resultElement = document.getElementById('result');
resultElement.innerHTML = 'inner 에서 click 이벤트 발생';
//cancelBubbling(e); // 상위 객체로의 이벤트 버블링을 억제합니다.
//여기서 cancelBubbling(e); 의 주석을 제거하면 이벤트 버블링 억제효과가 발생하여 //inner 이벤트에 접근이 가능하다 }
// load 이벤트 발생 시 수행할 이벤트 핸들러 함수입니다.
function init() {
// id 속성 값이 'outer', 'inner'인 영역을 찾아 크로스 브라우징 기능이 구현된
// 이벤트 리스너 등록 함수를 사용해 click 이벤트에 대한 이벤트 핸들러 함수를 등록합니다.
var outerElement = document.getElementById('outer');
var innerElement = document.getElementById('inner');
outerElement.className = 'class2';
innerElement.className = 'class1';
addListener(outerElement, 'click', outerFunc);
addListener(innerElement, 'click', innerFunc);
}
// 크로스 브라우징을 고려해 구현한 이벤트 리스너 등록 함수입니다.
// el : 이벤트가 발생할 HTML 요소
// ev : 이벤트
// handler : 이벤트 핸들러 함수
function addListener(el, ev, handler) {
// FireFox, Chrome과 같은 비 IE 웹브라우저의 경우
if (el.addEventListener) {
el.addEventListener(ev, handler, false);
} else {// IE 웹 브라우저의 경우
el.attachEvent('on' + ev, handler);
}
}
addListener(window, 'load', init);
</script>
</head>
<body>
<div id="outer">
외부영역을
<div id="inner">
내부 영역을 클릭해 보세요!!!
</div>
클릭해보세요!!!
</div>
<div id="result"></div>
</body>
</html> |
cs |
8. 웹브라우저별 이벤트 핸들링 모델
|
비교항목 |
비 IE(FireFox, Chrome 등) |
IE |
|
이벤트리스너 등록 |
addEventListener() |
attachEvent() |
|
이벤트리스너 제거 |
removeEventListener() |
detachEvent() |
|
이벤트 발생원 참조 |
e.tartget |
window.event.srcElement |
|
마우스 왼쪽 버튼 |
e.button의 값이 0 |
window.event.button의 값이 1 |
|
마우스 가운데 버튼 |
e.button의 값이 1 |
window.event.button의 값이 4 |
|
마우스 오른쪽 버튼 |
e.button의 값이 2 |
window.event.button의 값이 2 |
|
이벤트버블링 억제 |
e.stopPropagation() |
window.event.cancelBubble = true |
|
이벤트디폴트동작 억제 |
e.preventDefault() |
window.event.returnValue = false |
9. 웹브라우저 호환성 테스트
//크로스 브라우징이 적용된 이벤트 리스너 등록 함수
function addListener(el, ev, handler){
//FireFox, Chrome과 같은 비 IE웹브라우저의 경우
if(el.addEventListener){
el.addEventListener(ev, handler, false);
} else {
//IE웹 브라우저의 경우
el.attachEvent('on' + ev, handler);
}
}
//크로스 브라우징이 적용된 이벤트 리스너 제거 함수
function removeListener(el, ev, handler){
//FireFox, Chrome과 같은 비 IE웹브라우저의 경우
if(el.removeEventListener){
el.removeEventListener(ev, handler, false);
} else {
//IE웹 브라우저의 경우
el.detachEvent('on' + ev, handler);
}
}
//크로스 브라우징이 적용된 이벤트 발생원 조사 함수
function getEventSource(e) {
//FireFox, Chrome과 같은 비 IE웹브라우저의 경우
if(e.target) {
return e.target;
} else{
//IE웹 브라우저의 경우
return window.event.srcElement;
}
}
//크로스 브라우징이 적용된 마우스 이벤트 버튼 확인 함수
function getButtonType(e) {
//FireFox, Chrome과 같은 비 IE웹브라우저의 경우
if(e.target){
switch (e.button) {
case 0;
return '왼쪽 버튼';
case 1;
return '가운데 버튼';
case 2;
return '오른쪽 버튼';
}
} else {
//IE웹 브라우저의 경우
switch (window.event.button) {
case 1;
return '왼쪽 버튼';
case 4;
return '가운데 버튼';
case 2;
return '오른쪽 버튼';
}
}
}
//크로스 브라우징이 적용된 이벤트 버블링 억제 함수
function cancelBubbling(e) {
//FireFox, Chrome과 같은 비 IE웹브라우저의 경우
if(e.stopPropagation) {
e.stopPropagation();
} else {
//IE웹 브라우저의 경우
window.event.cancelBubble = true;
}
}
//크로스 브라우징이 적용된 이벤트 디폴트 동작 억제 함수
function cancelEvent(e) {
//FireFox, Chrome과 같은 비 IE웹브라우저의 경우
if(e.preventDefault) {
e.preventDefault();
} else {
//IE웹 브라우저의 경우
window.event.returnValue = false;
}
}
|
8강끝 |
'Legend 개발자 > T아카데미' 카테고리의 다른 글
| UX/UI 기획 (0) | 2017.09.04 |
|---|---|
| jQuery (JavaScript) (0) | 2017.09.02 |
| 컴퓨터 알고리즘 중급 (0) | 2017.08.31 |
| HTML&CSS (0) | 2017.08.28 |
| 컴퓨터 알고리즘 초급 (0) | 2017.08.10 |