[생활코딩]
1. 객체
서로 연관된 함수와 변수를 같은 이름으로 그룹핑해서 정리하기 위해 사용
매소드 : 객체에 속한 함수
객체는 중괄호를 이용해서 생성한다.
var animals = {
"dog" : "kong"
};
document.write("dog name : " + animals.dog + "<br>");
이런 식으로 객체를 생성하고 객체에 생성한 데이터를 가져올 수 있다.
다음으로는 객체에 있는 데이터들을 모두 가져오는 방법이다.
for (var key in animals) {
document.write(dey + " : " + animals[key] + "<br>");
}
이런 식으로 생성된 객체에 있는 데이터들을 모두 가져올 수 있다.
이 외에도 객체에 소속된 변수의 값으로 함수를 지정할 수 있고 매소드를 만들 수 있다.
[자료]
1. 객체
속성 : 객체와 관계된 변수, 다른 객체와 구별할 수 있는 특징
매소드 : 객체의 행위를 정의하는 함수
2. 내장 객체
- 객체 생성을 위해 new 연산자 사용
1) Date 객체
- 컴퓨터에서 제공되는 날짜, 시간을 얻거나 설정하는 데 사용
2) Math 객체
- 수학 계산을 위해 사용
3) 배열 객체
- 데이터 요소 여러 개를 묶어서 처리하고 싶을 때 사용
- 배열의 각 요소가 동일한 자료형이 아니어도 된다.
- 배열의 크기를 언제든지 변경할 수 있다.
ⓐ 생성 및 접근
- new 연산자를 이용하거나 [ ] 를 이용해서 생성
- 배열이름[인덱스] 처럼 [ ]를 이용해서 접근
ⓑ 메소드
- reverse : 순서 반대로
- sort : 오름차순 정리
- join : 배열 내 요소를 합쳐 하나의 문자열로 만들기
- concat : 배열 뒤에 요소 붙이기
- slice : 배열의 요소들 중 일부만을 배열로 만들기
4) Number
5) String
3. 브라우저 제공 내장 객체
1) window 객체
- 웹 브라우저에 열려 있는 창
- open : 새 창 열기
- close : 현재 창 닫기
- alert, confirm, prompt : 경고창 혹은 키보드 입력
2) navigator 객체
- 현재 사용하는 웹 브라우저의 종류와 버전을 알아내기 위해 사용
- 대표적인 속성 : appName, appVersion, userAgent
3) document 객체
- HTML 문서를 DOM을 통해 접근하기 위한 최상위 객체
4. 사용자 정의 객체
1) 사용자 정의 객체 생성
- Object 생성자와 new 연산자를 이용해 생성 (ex. var book = new Object();)
- 점(.) 연산자를 붙여서 속성과 메소드 접근할 수 있음
- 객체는 key와 value의 쌍으로 이루어짐 (ex. key : value)
- 다양한 자료형을 속성으로 사용 가능
2) 객체의 접근 방법
- 점(.) 연산자 (ex. book.title)
- 배열 표시 (ex. book["title"])
3) 속성 삭제
- delete라는 명령어 이용 (ex. delete book.title;)
5. for문
- 객체에 포함된 속성의 개수나 이름을 몰라도 객체 내의 모든 속성에 접근할 수 있음
- for (변수 in 객체) 이런 식으로 조건식 작성
- 변수명을 이용한 객체 접근은 점(.)을 이용해서는 불가능, 배열 방식을 이용해야함
5. 객체 생성자
1) 생성자 함수
- 객체를 생성하는 함수 ex.Object, Array 등
- 사용자 정의 함수를 이용해서 사용자 정의 생성자 구현 가능
- this : 객체 자신을 지칭하는 키워드
2) 객체의 메소드 정의
객체는 속성값으로 함수를 저장하면 그 함수는 그 객체의 메소드가 된다.
6. DOM (Document Object Model)
- 웹 문서를 구조적 문서 객체 형태로 다루는 모델
- 트리 구조의 형태
- 웹 브라우저에서 개발자 도구 이용시 DOM 구조 확이 가능
- 요소 전체가 하나의 객체
- 태그 요소는 DOM의 객체로 표현됨
- 태그 속성은 DOM 객체의 속성으로 표현됨
7. DOM 접근 방법
- document의 forms 속성을 이용해 접근
- 요소 이름을 이용해 접근
- 요소의 아이디를 찾아서 접근 (ex. getElementById())
댓글