과목명: 웹프로그래밍응용
교재: 모던웹을 위한 JavaScript Jquery 입문, 한빛미디어
2014년 1학기
Professor Seung-Hoon Choi
Part1. JavaScript / Ch08. 기본 내장 객체
8 기본 내장 객체
기본 내장 객체
– 자바스크립트에서 기본적으로 제공하는 객체
참고 사이트
– W3schools.com/js/default.asp – Devdocs.io/javascript
8.1 기본자료형과 객체의 차이점
기본 자료형
– 숫자, 문자열, 부울
코드 8-1
– 기본 자료형과 객체 둘 다 속성과 메소드를 가짐(그림 8-4) – 기본 자료형에 대하여 속성이나 메소드를 사용하면 자동으로
객체로 변환됨
예. 숫자의 메소드를 호출하면, Number 객체로 자동으로 변환됨
8.1 기본자료형과 객체의 차이점
기본 자료형에 메소드 추가하기
– 객체와 달리, 기본 자료형에는 속성과 메소드를 추가할 수 없 다.(코드 8-2)
– 기본 자료형에 해당하는 객체의 prototype에 메소드를 추가하 면, 기본 자료형에 메소드를 추가한 효과가 있다.
코드 8-3
8.2 Object 객체
Object 객체
– 자바스크립트에서 최상위 객체
8.2.1 생성
Object 객체
– 자바스크립트의 가장 기본적인 내장 객체
Object 객체 생성 방법 2가지
– 1) var object = { };
– 2) var object = new Object( );
Object 객체의 속성과 메소드
– 그림 8-7
– 다른 모든 객체들이 이 속성과 메소드를 가짐
예: 그림 8-8 Number 객체
8.2.2 속성과 메소드
표8-1 Object 객체의 메소드
메소드 이름 설명
constructor( ) 객체의 생성자 함수를 나타냄
hasOwnProperty(name) 객체가 name 속성이 있는지 확인함 isPrototyped(object) 객체가 object의 프로토타입인지 검사함 propertyIsEnumerable(name) 반복문으로 열거할 수 있는지 확인함
toLocaleString( ) 객체를 호스트 환경에 맞는 언어의 문자열로 바꿔줌
toString( ) 객체를 문자열로 바꿔줌
valueOf( ) 객체의 값을 나타냄
8.2.2 속성과 메소드
코드 8-4
– Object 객체의 hasOwnProperty( ) / propertyIsEnumerable( )
object의 property 속성만 true
코드 8-5
– toString( )
문자열이 필요할 때 자동으로 호출됨
코드 8-6
– student 객체
toString( ) 메소드를 재정의(오버라이드) 함
8.2.3 자료형 구분
자료형 검사
– Object 객체의 constructor( ) 메소드를 이용하면 유용함
코드 8-7, 코드 8-8
– typeof 연산자를 이용해서 자료형을 검사하는 경우
– 273과 Number(273) 객체는 같은 숫자형이지만 다른 자료형으 로 인식됨
코드 8-9
– constructor가 Number 생성자 함수와 동일한 지 검사하면, 자 료형이 동일한 지 검사할 수 있다.
8.2.4 모든 객체에 메소드 추가
Object 객체의 프로토타입에 속성 또는 메소드를 추가하면
– 모든 객체에서 활용할 수 있다.
– 코드 8-10
8.3 Number 객체
Number 객체
– 숫자를 표현하는 가장 단순한 객체 – 코드 8-11
8.3.1 메소드
Number 객체
– 표 8-2 Number 객체의 메소드
– 코드 8-12
Method Description
toExponential(x) 숫자를 지수 표시로 나타낸 문자열을 반환함
toFixed(x) 숫자를 소수점 이하 x 자리까지 표시한 문자열을 반환함
toPrecision(x) 숫자를 길이가 x가 되도록 한 문자열을 반환함
toString() 이 숫자에 해당하는 문자열을 반환함
valueOf() 이 숫자에 해당하는 기본자료형 값을 반환함
8.3.2 Number 객체의 속성
Number 객체
– 표 8-3 Number 객체의 속성
– 코드 8-15
1을 더해도 오류 없이 실행은 되지만, 최대 숫자(10의 308승)에 1 을 더해서는 지수 표시로는 구별이 안 되며 실제로 의미가 없음
Property Description
MAX_VALUE 자바스크립트에서의 최대 숫자
MIN_VALUE 자바스크립트에서의 최소 숫자
NEGATIVE_INFINITY 음의 무한대 숫자
NaN 숫자로 나타낼 수 없음을 나타내는 값
POSITIVE_INFINITY 양의 무한대 숫자
8.4 String 객체
String 객체
– 문자열을 나타내는 내장 객체
8.4.1 생성
String 객체 생성 두 가지 방법
– 코드 8-17
1) var s = ‘Hello World’
2) new String(‘Hello World’);
8.4.2 기본 속성과 메소드
String 객체의 속성
– length: 문자열의 길이를 가짐 – 코드 8-18
8.4.2 기본 속성과 메소드
String 객체의 주요 메소드 (표8-5 참조)
– charAt(position)
position에 위치하는 문자 반환 – concat(args)
현재 문자열에 args 문자열을 이어서 반환 – indexOf(searchString, startPosition)
startPosition 위치부터 검색해서 searchString과 일치하는 문자열 의 위치 반환
– substr(start, count)
start 위치부터 count 개수 만큼의 문자열 반환 – substring(start, end)
start 위치부터 end 위치 직전까지의 문자열 반환
8.4.2 기본 속성과 메소드
코드 8-19, 코드 8-20
– String 객체의 toUpperCase( ) 메소드 사용 방법
8.4.3 HTML 관련 메소드
HTML 관련 메소드
– HTML 태그가 포함된 문자열을 쉽게 생성 가능하도록 해 줌 – 자기 자신의 문자열은 변화하지 않음
– 표 8-6
anchor( ): <a>태그로 문자열을 감싸서 반환함
bold( ): <b> 태그로 문자열을 감싸서 반환함
link(linkRef): <a> 태그에 href 속성의 값을 지정한 문자열을 반환 함
sub( ): <sub> 태그로 문자열을 감싸서 반환함 – 많이 사용하지는 않음
– 코드 8-21
document.write( ) : 현재 웹 문서에 문자열을 출력하는 방법
8.5 Array 객체
Array 객체
– 여러 가지 자료를 쉽게 관리할 수 있게 해주는 객체
8.5.1 생성
Array 생성자 함수(표 8-7)
– Array( ): 빈 배열 생성
– Array(number): number 개수만큼의 크기를 가지는 배열 생성 – Array(e1, …, en): 매개변수들을 원소로 가지는 배열 생성
코드 8-24
8.5.2 속성과 메소드
Array 객체의 속성
– length: 배열 원소의 개수를 저장함
코드 8-25
8.5.2 속성과 메소드
Array 객체의 메소드(표8-9)
– * 표시된 메소드는 자기 자신을 변화함
메소드 설명
concat( ) 매개변수로 들어온 배열과 합쳐진 배열을 반환함 join( ) 배열 안의 모든 요소를 연결한 문자열을 반환함
pop( )* 배열의 마지막 원소를 제거하고, 제거한 원소를 반환함
push( )* 배열의 마지막에 원소를 추가하고, 추가 후의 배열 길이를 반환 함
reverse( )* 배열의 원소들의 순서를 뒤집는다.
slice( ) 지정된 부분을 잘라서 배열을 만들어서 반환함 sort( )* 배열의 원소들을 정렬함
splice( )* 지정된 위치부터 지정된 개수의 원소를 지운 후, 새로운 원소를 추가함
8.5.2 속성과 메소드
코드 8-26
– Array 객체의 sort( ) 메소드
주의: 기본적으로 문자열 오름차순으로 정렬됨
– 정렬 전: [52, 273, 103, 32]
– 정렬 후: [103, 273, 32, 52]
=> 원하는 결과가 아니다.
정렬 방법에 변화를 주고 싶으면?
–
다음 페이지 참조8.5.3 정렬
정렬 방법에 변화를 주고 싶으면, sort( )의 매개변수로 정렬 순서를 정하는데 사용되는 함수를 넣어준다.
– 위치를 바꾸는 경우가 리턴 값이 +가 되도록 함수를 작성함 array.sort(function(left, right) {
});
오름차순 정렬 내림차순 정렬
function(left, right) {
// 왼쪽이 클 때 리턴 값이 양이 며, 이 때 위치를 바꾸어야 오름차 순이 됨return left - right;
}
function(left, right) {
// 왼쪽이 클 때 리턴 값이 양이며, 이 때 위치를 바꾸어야 오름차순이 됨return right - left;
}
8.5.3 정렬
코드 8-27
–
정렬 함수를 제공한 sort( ) 사용 방법
코드 8-28
–
학생 성적 정렬8.5.4 요소 제거
배열의 요소 제거 방법
–
1) splice( ) 메소드 이용–
2) 프로토타입에 remove( ) 메소드 추가
코드 8-31
배열의 요소 제거 시 주의 사항
–
뒤에 위치한 요소부터 제거해야 한다.–
코드 8-32
앞에 위치한 요소를 제거하면, 뒤의 위치한 요소들의 인덱스가 앞 으로 당겨진다.–
코드 8-33
뒤 요소부터 제거했기 때문에 올바로 동작함8.6 Date 객체
Date 객체
–
날짜와 시간을 다루는 객체8.6.1 생성
Date 객체 생성
–
코드 8-34
new Date( );
세계 표준 시간
–
GMT(Greenwich Mean Time)
영국 그리니치 표준시(평균 태양시)
크롬에서 표시하는 방식–
UTC(Universal Time Coordinate)
협정 세계시(세슘 원자 시계 방식)
과학, 통신 등에서 사용하는 표준시
IE에서 표시하는 방식–
둘의 차이는 1초 미만8.6.1 생성
Date 객체 생성 예
–
new Date(‘December 9’)–
new Date(‘December 9, 1991’)–
new Date(‘December 9, 1991 02:24:23)–
new Date(1991, 11, 9)–
new Date(1991, 11, 9, 2, 24, 23) // 년, 월, 일, 시, 분, 초–
new Date(1991, 11, 9, 2, 24, 23, 1) // 년, 월, 일, 시, 분, 초, 밀리초12월을 의미함
(자바스크립트에서 원하는 월 빼기 1을 해야함)
8.6.1 생성
Unix Time을 이용한 Date 객체 생성
–
Unix Time
1970년 1월 1일 0시를 기준으로 경과한 시간을 밀리초 단위로 나 타냄–
new Date(27232741033257);8.6.2 메소드
Date 객체의 메소드
– getXXX( ) 형태의 메소드
년도, 월, 시 등의 값을 얻어올 때 사용하는 메소드 – setXXX( ) 형태의 메소드
년도, 월, 시 등의 값을 설정할 때 사용하는 메소드
코드 8-38
– 일주일 후의 시간을 구하는 방법
– toXXXString( ) 형태의 메소드
코드 8-39
8.6.3 시간 간격 계산
시간 간격 계산
– 코드 8-40
Date 객체의 getTime( ) 메소드 이용해서, 현재와 지정된 날짜의 시간 차이를 구함
– 코드 8-40
시간 간격 구하는 getInterval 함수를 Date 객체의 프로토타입에 추가함
8.7 Math 객체
Math 객체
– 수학과 관련된 속성과 메소드를 갖는 객체
– 생성자 함수를 사용하지 않으며, Math 자체가 객체로서 동작 함
– Math 객체의 속성
표 8-10
– Math 객체의 메소드
표 8-11
Math 객체의 메소드를 변수에 저장해서 함수처럼 사용할 수 있다.
– 코드 8-43
8.8 ECMAScript 5 Array 객체
ECMAScript 5
– HTML5와 함께 출현한 자바스크립트 표준안
– 이 절부터는, ECMAScript 5 와 관련된 내용을 살펴봄 – IE 8이하에서는 지원하지 않음
8.8.1 확인 메소드
Array 객체의 확인 메소드
– isArray( )
인자가 배열인지 확인해 주는 메소드 – 코드 8-44
8.8.2 탐색 메소드
Array 객체의 탐색 메소드
– indexOf( )
인자를 배열 앞부터 검색하여 발견하면 그 위치를 반환함
없으면 -1 반환 – lastIndexOf( )
인자를 배열 뒤부터 검색하여 발견하면 그 위치를 반환함
없으면 -1 반환
코드 8-45
8.8.3 반복 메소드
Array 객체의 반복 메소드
– forEach(함수)
배열의 각 요소를 하나씩 접근해서 인자로 들어온 함수를 실행함
인자로 들어가는 함수의 형태
– function( element, index, array ) { … … }
• element: 현재 반복에서의 배열의 요소
• index: 현재 반복에서의 배열의 인덱스
• array: 현재 반복을 수행하는 배열 자체
코드 8-46
8.8.3 반복 메소드
Array 객체의 반복 메소드
– map(함수)
배열의 각 요소들을 변경한 새로운 배열을 리턴하는 함수
인자로 들어가는 함수: 어떻게 요소들을 변경할 지를 담고있음
– function(element) { … … }
• 배열의 원소를 나타냄
코드 8-47
8.8.4 조건 메소드
Array 객체의 조건 메소드
– filter(함수)
특정 조건을 만족하는 요소들을 추출해 새로운 배열을 만듦
인자로 들어오는 함수: 추출하는 조건을 담고 있음
– function( element, index, array ) { … … }
• element: 현재 반복에서의 배열의 요소
• index: 현재 반복에서의 배열의 인덱스
• array: 현재 반복을 수행하는 배열 자체 – 부울형을 리턴하는 함수이어야 함
코드 8-48
8.8.4 조건 메소드
Array 객체의 조건 메소드
– every(함수)
배열의 모든 원소가 함수가 담고 있는 조건을 만족하는지 검사하 는 메소드
부울형을 리턴함
인자로 들어오는 함수: function( element, index, array ) { … … } – some(함수)
배열의 어떠한 하나의 원소라도 함수가 담고 있는 조건을 만족하 는지 검사하는 메소드
부울형을 리턴함
인자로 들어오는 함수: function( element, index, array ) { … … } – 코드 8-49
8.8.5 연산 메소드
Array 객체의 연산 메소드
– reduce(function(previousValue, currentValue, index, array){ })
인자로 들어온 콜백 함수를 계속해서 호출하여 배열의 요소들을 왼쪽에서 오른쪽 방향으로 나아가면서 하나의 값으로 줄임
– 콜백 함수: 어떻게 배열의 원소들을 묶어서 하나가 되게 할지를 지정 하는 함수
– 콜백 함수의 인자
• previousValue: 이전 콜백 함수의 리턴값이 저장됨 (콜백 함수가 처음 호출될 때는 배열의 맨 왼쪽의 원소가 저장됨)
• currentValue:묶일 두 원소 중 뒤의 원소
• index: currentValue에 담긴 원소의 인덱스
• array: 현재 배열
8.8.5 연산 메소드
Array 객체의 연산 메소드
– reduceRight(function(previousValue, currentValue, index, array){ })
인자로 들어온 콜백 함수를 계속해서 호출하여 배열의 요소들을 오른쪽에서 왼쪽 방향으로 나아가면서 하나의 값으로 줄임
8.8.5 연산 메소드
Array 객체의 연산 메소드
– 코드 8-51
[1, 2, 3, 4, 5] 배열의 reduce( )를 호출함
아래 그림과 같이 previousValue, currentValue가 지정됨
1 2 3 4 5
previousValue:
currentValue:
1
index: 1
previousValue:
currentValue:
3
index: 2
콜백 함수의 리턴값이 두 원소를 합친 값이므로 이 값이 previousValue에 들어감
2
3
콜백 함수 처음 호출 시
인자들의 값
콜백 함수 두번째 호출 시
인자들의 값
8.8.5 연산 메소드
Array 객체의 연산 메소드
– 코드 8-50
[1, 2, 3, 4, 5] 배열의 reduce( )를 호출함
아래 그림과 같은 순서로 previousValue, currentValue가 지정됨
1 2 3 4 5
previousValue:
currentValue:
index: 1
previousValue:
currentValue:
undefined
index: 2
코드 8-50에서는 콜백 함수의 리턴값이 없으므로,
다음 콜백 함수 호출 시 undefined가 previousValue에 들어감
콜백 함수 처음 호출 시
인자들의 값
콜백 함수 두번째 호출 시
인자들의 값
1 2
3
8.9 ECMAScript5 JSON 객체
JSON(JavaScript Object Notation)
– 자바스크립트 객체를 나타내는 문자열
JSON 객체의 메소드
– JSON.stringify( ): 자바스크립트 객체를 JSON 문자열로 변환함
코드 8-52
– JSON.parse( ): JSON 문자열을 자바스크립트 객체로 변환함
코드 8-53
8.9 ECMAScript 5 JSON 객체
toJSON( ) 메소드
– JSON.stringify(객체) 메소드의 매개변수에 넣은 객체에
toJSON( ) 메소드가 없는 경우
– 객체 전체를 JSON 문자열로 변환함
toJSON( ) 메소드가 있는 경우
– toJSON( ) 메소드가 리턴한 객체를 JSON 문자열로 변환함 – 코드 8-54
8.10 ECMAScript 5 String 객체
ECMAScript 5에서 String 객체에 추가된 메소드
– trim( ): 문자열 양쪽 끝의 공백을 제거함 – 코드 8-55
8.11 ECMAScript 5 Object 객체
ECMAScript 5에서 Object 객체에 추가된 메소드
8.11.1 객체 속성 추가
Object 객체에 속성을 추가하는 메소드
– Object.defineProperty(객체, 속성이름, 속성관련옵션);
인자 설명
– 객체: 속성을 추가하려는 객체 – 속성이름: 추가하려는 속성의 이름
– 속성관련옵션: 추가하려는 속성과 관련된 여러 가지 옵션
• 표 8-20
• value:이 속성에 들어갈 값 지정
• writable: 이 속성의 값을 수정할 수 있는지 지정
• get: getter 메소드 지정
• set: setter 메소드 지정
• configurable: 이미 추가한 속성의 설정을 변경할 수 있는 지 지정
• enumerable: for in 반복문으로 검사할 수 있는지 지정
8.11.1 객체 속성 추가
Object 객체에 속성을 추가하는 메소드
– Object.defineProperty(객체, 속성이름, 속성관련옵션);
코드 8-57
– name 속성의 값을 변경할 수 없으며, for in 반복문으로 접근할 수 없음
코드 8-58
– set 옵션과 get 옵션 이용
– setter와 getter는 필요 시 자동으로 호출됨
• 코드 8-59 (캡슐화에 이용함)
코드 8-60
– name 속성의 configurable 옵션을 true로 했으므로, name 속성의 옵 션을 재지정할 수 있음
8.11.2 객체 생성
ECMAScript 5의 객체 생성 메소드
– Object.create(원본객체, 추가하고자하는속성및옵션)
인자
– 원본객체: 객체 생성 시 복제하고자 하는 원본 객체
– 추가하고자하는속성및옵션: 복제한 객체에 추가하고자 하는 속성과 이 속성의 옵션 지정
코드 8-62
– 빈 객체를 기반으로 name과 region 속성을 추가함
코드 8-63
– create( ) 메소드는 기존의 객체를 복제하므로, 상속이라고 볼 수 있음 – getOwnPropertyNames( ) 나 keys( ) 메소드를 사용하면, 새로 추가한
속성만 얻어옴
– 물론, 새로 생성된 객체를 통해서 기존 객체의 속성을 접근할 수는 있 음
8.11.3 동적 속성 추가 제한
ECMAScript 5의 동적 속성 추가를 제한하는 메소드
– Object.preventExtensions(객체)
매개변수인 객체에 동적으로 속성을 추가하는 것을 금지하는 메소 드
– Object.isExtensible(객체)
매개변수인 객체에 속성 추가가 가능한지 검사하는 메소드 – 코드 8-65
Object.preventExtensions(object) 실행 후에는, 속성을 추가하는 것 이 불가능함
8.11.4 동적 속성 삭제 제한
ECMAScript 5의 동적 속성 삭제를 제한하는 메소드
– Object.seal(객체)
매개변수인 객체에 동적으로 속성을 제거하는 것을 금지하는 메소 드
– Object.isSealed(객체)
매개변수인 객체에 속성 제거가 가능한지 검사하는 메소드 – 코드 8-66
Object.seal(person) 실행 후에는, 속성을 제거하는 것이 불가능함
속성 제거 시에는, delete 키워드를 사용한다.
– 예: delete person.name;
8.11.4 동적 속성 삭제 제한
ECMAScript 5의 동적 속성 삭제/수정을 제한하는 메소드
– Object.freeze(객체)
매개변수인 객체의 속성을 삭제하거나 속성의 값을 수정하지 못하 도록 하는 메소드
– Object.isFrozen(객체)
매개변수인 객체의 속성을 삭제하거나 속성의 값을 수정하지 못하 는지 검사하는 메소드
8.11.5 객체 보조 메소드
ECMAScript 5의 객체 보조 메소드
– Object.keys(객체)
enumerable 옵션이 true인 속성들을 배열로 만들어서 리턴함
defineProperty( ) 메소드로 속성을 추가하면, 이 속성의 enumerable 옵션의 값은 기본적으로 false 이다.
다른 방법으로 속성을 추가하면, enumerable 옵션의 값이 true임
– 예: object.age = ‘30’; 에서의 age 속성
– Object.getOwnPerpertyNames(객체)
매개변수인 객체가 스스로 지닌 모든 속성을 배열로 만들어서 리턴 함
– 코드 8-67
8.11.5 객체 보조 메소드
ECMAScript 5의 객체 보조 메소드
– Object.getOwnPropertyDescriptor(객체, 속성이름)
매개변수인 객체의 특정 속성의 옵션 객체를 추출하는 메소드
코드 8-68
– Object.getOwnPropertyDescriptor(person, ‘name’);
– defineProperty( ) 메소드로 속성을 추가하면
• writable, enumerable, configurable 속성이 모두 false 임을 알 수 있다.
• 예: object 객체의 region 속성
음악 재생
Audio 객체
– 음악 재생을 가능하게 해 주는 객체 – HTML5의 <audio> 태그에 해당함
Audio 객체 생성
– 코드 8-69
var audio = new Audio(‘Kalimba.mp3’) – 코드 8-70
var audio = new Audio();
audio.src = ‘Kalimba.mp3’;
음악 재생
Audio 객체의 기본 속성
– src: 재생하려는 음악 파일의 경로 지정 – volume: 음악의 음량 지정(0~1사이의 값)
– currentTime: 음악 파일에서의 현재 위치(초 단위)
Audio 객체의 기본 메소드
– play( ): 음악 재생을 시작하는 메소드
– pause( ): 음악 재생을 일시 정지하는 메소드
음악 정지 방법
– stop( ) 메소드가 없음
– pause( ) 메소드 실행 후, currentTime 속성을 0으로 설정함
음악 재생
코드 8-71
– 간단한 음악 재생 프로그램
Audio 객체 생성
onchange 이벤트 핸들러 등록
