과목명 : 웹프로그래밍응용교재 : 모던웹을위한 JavaScript Jquery 입문, 한빛미디어 Part1. JavaScript / Ch08. 기본내장객체 2014년 1학기 Professor Seung-Hoon Choi
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) isprototyped(object) propertyisenumerable(name) tolocalestring( ) tostring( ) valueof( ) 설명객체의생성자함수를나타냄객체가 name 속성이있는지확인함객체가 object의프로토타입인지검사함반복문으로열거할수있는지확인함객체를호스트환경에맞는언어의문자열로바꿔줌객체를문자열로바꿔줌객체의값을나타냄
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 객체의메소드 Method toexponential(x) tofixed(x) toprecision(x) tostring() valueof() Description 숫자를지수표시로나타낸문자열을반환함숫자를소수점이하 x 자리까지표시한문자열을반환함숫자를길이가 x가되도록한문자열을반환함이숫자에해당하는문자열을반환함이숫자에해당하는기본자료형값을반환함 코드 8-12
8.3.2 Number 객체의속성 Number 객체 표 8-3 Number 객체의속성 Property Description MAX_VALUE MIN_VALUE NEGATIVE_INFINITY NaN POSITIVE_INFINITY 자바스크립트에서의최대숫자자바스크립트에서의최소숫자음의무한대숫자숫자로나타낼수없음을나타내는값양의무한대숫자 코드 8-15 1 을더해도오류없이실행은되지만, 최대숫자 (10 의 308 승 ) 에 1 을더해서는지수표시로는구별이안되며실제로의미가없음
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가지정됨 콜백함수처음호출시인자들의값 previousvalue: currentvalue: 1 2 index: 1 콜백함수두번째호출시인자들의값 1 2 3 4 5 previousvalue: currentvalue: index: 콜백함수의리턴값이두원소를합친값이므로이값이 previousvalue 에들어감 3 3 2
8.8.5 연산메소드 Array 객체의연산메소드 코드 8-50 [1, 2, 3, 4, 5] 배열의 reduce( ) 를호출함 아래그림과같은순서로 previousvalue, currentvalue가지정됨 콜백함수처음호출시인자들의값 previousvalue: currentvalue: index: 1 2 1 콜백함수두번째호출시인자들의값 1 2 3 4 5 previousvalue: currentvalue: index: 2 코드 8-50 에서는콜백함수의리턴값이없으므로, 다음콜백함수호출시 undefined 가 previousvalue 에들어감 undefined 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 이벤트핸들러등록