내장객체 built-in
< 목차 >
- 객체의개념
- 객체의 구성요소 ( 프로퍼티와메소드)
- 객체의 종류 2가지
- 데이터 관련 시스템객체
- 브라우저 관련 시스템객체
객체의 구성요소
현실세계의 객체 표현 방법
:속성(attribute) + 동작(behavior)
가상세계의 객체 표현 방법
:프로퍼티(property) + 메소드(method)
가. 프로퍼티( property )
: 객체의 상태를 저장하는 변수
나. 메소드( method )
: 객체의 동작을 지정하는 함수로서, 객체의 프로퍼티값을 설정하거나 조회할 때 사용할 수 있다.
- 자바스크립트에서는 객체 생성시 ‘함수’를 사용한다.
이 함수를 ‘생성자 함수’라고한다.
- 자바스크립트에서는 런타임시 객체에 멤버를 동적으로 추가할 수 있다.
가. 시스템정의객체( 내장객체)
-
데이터관련객체
: String , Number , Date , Array, Boolean , Object , Math, RegExp -
브라우저관련객체:
: Window, Screen , Location , History, Navigator -
HTML 관련객체
: 일반적으로DOM(Document Object Model)이라고 한다.
나. 사용자정의객체
: 데이터관리 목적으로 생성
: 생성방법은 3가지 제공
자바스크립트의 내장객체
데이터관련객체
String 객체
문자열과 관련된 데이터를 관리하는 객체.
Number 객체
수치 데이터를 관리하는 객체.
Date 객체
날짜 데이터를 관리하는 객체.
Boolean 객체
불린 데이터가 아닌 데이터를 불린데이터로 변경하는 객체.
Array 객체
배열과 관련된 데이터를 관리하는 객체.
Array 객체
가. new 이용
나. 리터럴 이용 (JSON형식)
< 메소드 >
String 객체
Number 객체
Date 객체
Boolean 객체
Array 객체
브라우저 관련 객체( Browser Object Model:BOM )
Window 객체
브라우저 창이 열릴 때 마다 하나씩 만들어지는 객체, 브라우저 창 안에
존재하는 모든 요소의 최상위 객체.
Navigator 객체
브라우저와관련된정보를포함하는객체.
Screen 객체
화면(screen) 정보와 관련된객체.
History 객체
사용자가방문한URL정보를포함하는객체.
Location 객체
현재방문한URL 정보를포함하는객체.
각 객체들의 프로퍼티와 메소드는 pt 참고
DOM ( Document Object Model )
< 목차 >
DOM 개요
DOM 핵심작업- 태그추가/삭제- 속성변경 등 동적인 처리담당.
DOM 순회방법 및 핵심API 정리
Form 객체
DOM 이란?
웹 페이지의 HTML문서 구조를 객체로 표현하기 위한 계층구조로서 문서를 나타내는 최상위 객체는 document 객체이다.
웹 페이지가 로드될 때, 웹 브라우저는 페이지의 DOM을 생성하고 트리 구조로 관리한다.
각각을 노드(node)라고 하며 엘리먼트 노드, 텍스트 노드, 속성 노드가 있다.
DOM은 플랫폼/언어 중립적으로 구조화된 문서를 표현하는 W3C의 공식 표준안이다.
DOM은 HTML과 XML 문서에 대한 응용 API로서 문서를 구조적(계층적인 트리구조)으로 정리하여 문서의 내용과 시각적인 형태를 변경할 수 있도록 지원한다.
DOM ( Document Object Model) 개요
노드 속성
노드 메소드
부모와 자식 노드 관계
DOM을 이용한 핵심 작업
가. 자바스크립트를 이용한 페이지의 모든 태그 변경 가능
나. 자바스크립트를 이용한 페이지의 모든 속성 변경 가능
다. 자바스크립트를 이용한 페이지의 모든 CSS 스타일 변경 가능
라. 자바스크립트를 이용한 페이지의 모든 이벤트 처리 가능.
DOM 핵심 API
- 순회
: childNodes , firstChild, lastChild , nextSibling , previousSibling
- 선택
: getElementById() , getElementsByTagName() , getElementsByClassName()
querySelector(), querySelectorAll()
- 생성및추가/삭제
: createElement(), createTextNode(), appendChild(), removeChild()
createAttribute() , setAttribute(), getAttribute()
- 내용저장및조회:
innerHTML, innerText, .value
3 ) DOM 객체 접근 방법
가. 직접 접근방법
-
id 값으로 접근
document.getElementById( id값 ) : Node -
태그명으로 접근
document.getElementsByTagName( tag명 ) : NodeList -
class 속성으로 접근
document.getElementsByClassName( class명 ) : NodeList -
CSS selector 사용(#, . 등등 css 기호 사용)
document.querySelectorAll(css selector); // 일치하는 모든요소
document.querySelector(css selector)//일치하는 하나의 요소
나. 노드 워킹 접근 방법
- 상대적인 위치로 접근하는 방법이다.
예> 첫번째 자식, 형제, 마지막 자식등
직접 접근방법 예시코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<table>
<tr>
<td><img src="../image/a.jpg" width="100" height="100" id="flag1"></td>
<td><img src="../image/b.jpg" width="100" height="100" id="flag2"></td>
<td><img src="../image/c.jpg" width="100" height="100" id="flag3"></td>
</tr>
</table>
<a href="javascript:change(1)">1</a>
<a href="javascript:change(2)">2</a>
<a href="javascript:change(3)">3</a>
<script>
function change(n){
var arr = ["a.jpg","b.jpg","c.jpg","d.jpg","e.jpg","f.jpg","g.jpg","h.jpg","i.jpg"];
var imgs = document.getElementsByTagName("img");
for(var i in imgs){imgs[i].src="../image/"+arr[(n-1)*3+parseInt(i)];}
/*
var selectArr="";
if(n==1) selectArr = arr.slice(0,3);
else if(n==2) selectArr = arr.slice(3,6);
else if(n==3) selectArr = arr.slice(6,9);
for(var x in selectArr){
var tid = "flag"+x;
document.getElementById(tid).src="../image/"+selectArr[x];
}
*/
/*
var selectArr="";
if(n==1) selectArr = arr.slice(0,3);
else if(n==2) selectArr = arr.slice(3,6);
else if(n==3) selectArr = arr.slice(6,9);
console.log(selectArr);
*/
}
</script>
</body>
</html>태그 선택 방법
1. 순회를 이용한 방법 (부모부터 자식까지 모든 태그를 순회하며 찾는 방식)(안씀)
2. 선택을 이용한 방법 (아이디와 같은 것을 지정하여 선택하는 방식)
getattribure()
선택
pt 참고
