혜랑's STORY

[WEB 7주차 이론] : JavaScript 본문

2020 SISS 21기 활동/여름방학 WEB

[WEB 7주차 이론] : JavaScript

hyerang0125 2020. 8. 23. 23:17

#객체 (속성+메소드)

: 객체는 자료를 저장하고 처리하는 기본 단위로 하나의 변수에 여러 정보를 저장하기 위하여 사용한다.

  • 내장객체(built-in objects) : 자바스크립트에서 자주 사용하는 요소로 미리 객체로 정의된 것들. 예를 들어 Date, Math, Array, Number, String 등
  • 문서 객체 모델(DOM) : 객체를 사용해 웹문서를 관리하는 방식. 문서 객체 모델에서는 웹문서 뿐 아나라 웹 문서 안에 포함된 이미지, 링크, 텍스트 필드 등도 모두 각각 별도의 객체로 만들어 놓음. 
  • 브라우저 객체 모델(BOM) : 웹 문서를 관리하는게 DOM이라면 BOM은 웹브라우저의 주소 표시줄, 창 크기 등 웹브라우저 정보를 객체로 다룬다.

- 속성 : 객체에서 값을 담고있는 정보

- 메소드 : 객체가 어떻게 동작할지 선언해 놓은 함수

//객체 데이터 만들기
var coworkers = {
	"programmer" : "egoing",
    "designer" : "leezche"
}

//객체 데이터 가져오기
document.write("programmer : "+coworkers.programmer+"</br>");
document.write("designer : "+coworkers.designer+"</br>");

//객체 데이터 추가
coworkers.bookkeeper = "duru";
coworkers[data scientist] = "teaho";

//객체에 들어있는 데이터를 모두 출력
for(var key in coworkers){
	document.write(key " : " + coworkers[key]+"</br>");
}

//메소드 추가
coworkers.showAll = function(){
	for(var key in this){
	document.write(key " : " + this[key]+"</br>");
	}
}

//객체의 활용 예시
var Body = {
	setColor:function(color){
    	document.querySelecter('body').style.color = color;
    },
    setBackgroundColor:funtion(){
    
    },
    //.....
}

- 배열 객체 : 데이터 요소 여러개를 묶어서 처리하고자 할 때 사용. 배열의 각 요소가 동일한 데이터 타입이 아니어도 가능하며, 배열의 크기가 언제라도 변경 가능하다.

var book_arr = new Array("멀티미디어 배운터 2.0". "생능출판사", "최윤철, 임순범", 25000, 442);

//배열의 내용
//book_arr[0]: "멀티미디어 배움터 2.0"
//book_arr[1]: "생능출판사"
//book_arr[2]: "최윤철, 임순범"
//book_arr[3]: 25000
//book_arr[4]: 442