[4] JavaScript - 객체

2016. 12. 28. 19:23HTML.CSS3.JavaScript.jQuery

[1] 객체


- var student = { name : "Tom",

korean : 95,

math : 90,

english : 95, 

Sum : function () { 

sum = this.korean + this.math + this.english ;

     return sum;

}

};


- name, korean, math, english : key 

- Tom, 95, 90, 95 : attribute (속성) 

- Sum : method (메서드)


→ alert ( student.Sum() ); 


- 객체도 반복문을 사용할 수 있다.


for ( var key in student ) { alert ( key + ' : ' + student[key] ) ; }


- 객체에 속성과 메서드를 추가할 수 있다.


student.science = 90 ;

student.View = function () {

var view = '';

for ( key in student ) { 

if ( key != "View" ) { 

view += key + ' : ' + student[key] + '\n'

}

}

return view ;

}

→  alert ( student.View() );




- 생성자 함수 ★★


- new 키워드로 객체를 생성할 수 있는 함수


- function Student( name, korean, math, english ) {

this.name : "Tom"

this.korean : 95,
this.math : 90,

this.english : 95

  }


- Student.prototype.getSum = function () { 

return this.korean + this.math + this.english ;}


* prototype 은 모든 함수가 갖는 변수 또는 객체로써 prototype 에 함수를 저장해 놓으면 용량면에서 이득

* Student 생성자함수로 만들어진 객체는 prototype에 저장된 getSum 메서드를 가진다

   객체or인스턴스   

→  Student-1    = Student( "James", 100, 90, 90 )

→  Student-2    = Student( "John", 80, 85, 87 )



[2] 기본 내장 객체


① Object객체


- 모든 객체의 최상위 객체

- Object객체의 prototype 속성or메서드 는 모든 객체에서 사용가능

- Object.prototype.View = function () { ... };

→  ex) var example = 100

    example.View();


② Number객체


→   var num = 0;

var num = Number ( 299 );


③ String객체


- String.length : 문자열 길이

→  var str = "" ;

     var str = String ( "text" );

 

④ Array객체


→  var array = [ ] or New Array() 


- Array() : 빈 배열 생성 [ ]

- Array(3) : 비어있는 배열3칸 생성 [ , , , ]

- Array(A,B,C,D) : [  A, B, C, D ]

- Array.length : 배열의 길이

- Array.slice( start , end ) : start 부터 end 까지의 요소만 return

- Array.pop() : 배열의 마지막 요소만 제거후 return




[3] Window객체


<script>

window.onload = function () {

window.X

}

</script>


X → screen, navigator, location, history, document



[3]-1 window객체의 속성


- window.innerHeight : Browser 안쪽 높이

- window.innerWidth : Browser 안쪽 너비

- window.outerHeight : Toolbar와 scollbar 를 포함 하는 높이

- window.outerWidth : Toolbar와 scrollbar 를 포함하는 너비


- window.setTimeout ( function (){} , ms ) : ms초 후에 함수 실행

- window.setInterval ( function (){} , ms ) : ms 마다 함수 실행

- window.cleartTimeout ( Id )

- window.clearInterval ( Id )


- window.scrollBy( x,y ) : 상대적 이동

- window.scrollTo( x,y ) : 절대적 이동


- window.location( yes or no ) : 주소 입력창 유무

- window.menubar( yes or no ) : 메뉴 유무

- window.toolbar( yes or no ) : 상태 표시줄 유무

- window.status( yes or no ) : 상태 표시줄 유무

- window.resizable( yes or no ) : 화면 크기 조절 가능 유무


[3]-2 screen객체의 속성


- window.screen.height : 화면의 높이

- window.screen.width : 화면의 너비

- window.screen.availHeight : 작업표시줄을 경계로 한 화면의 높이

- window.screen.availWidth  : 작업표시줄을 경계로 한 화면의 너비








'HTML.CSS3.JavaScript.jQuery' 카테고리의 다른 글

[6] jQuery - Attribute(속성) , Method(메서드)  (0) 2016.12.29
[5] JavaScript - DOM ( Document Object Model ) / Event  (0) 2016.12.28
[3] JavaScript - 기본개념  (0) 2016.12.28
[2] CSS3  (0) 2016.12.27
[1] HTML5  (0) 2016.12.27