자바 스크립트(JavaScript) 기초 문법
객체
자바스크립트는 객체 기반 프로그래밍 언어이다. 객체를 구성하는 요소로는 속성(Property)과 기능(Method)가 있다. 자바스크립트에는 다양한 객체가 내장되어 있고 객체를 생성할 수 있다. 속성은 객체가 가지고 있는 특성값이고, 기능은 객체가 수행할 수 있는 행동이다.
<script>
객체. 메소드();
객체.속성;
객체.속성=값;
TV.width;//TV객체의 width 속성
TV.color=black;//TV객체의 color 속성 값 변경
TV.turnon();//TV객체의 turnon()메소드
document.write();//document 객체의 write()메소드
</script>
객체의 종류
자바스크립트의 객체는 내장 객체, 브라우저 객체 모델(BOM, Browser Object Model), 문서 객체 모델(DOM, Document Object Model)으로 나눌 수 있다.
1) 내장 객체
내장 객체는 자바스크립트 엔진에 내장되어 있어 필요한 경우에 생성해서 사용할 수 있다. 내장 객체로는 문자(String), 날짜(Date), 배열(Array), 수학(Math) 객체 등이 있다.
<script>
var now=new Date();
//Date()는 자바 스크립트 날짜 객체이다. new키워드로 새로운 날짜 객체 now를 생성.
document.write(now);
//document는 자바스크립트 내장객체로서 본문 문서를 가리키고, write()메소드는 출력해준다.
</script>
2) 브라우저 객체 모델
브라우저 객체 모델(BOM)은 브라우저에 계층 구조로 내장되어 있는 객체를 말한다. 브라우저 객체로는 window, screen, location, history, navigator객체 등이 있다. 브라우저(window)는 document와 location 객체의 상위객체이다.
만약 자바스크립트를 이용해 현재 열려 있는 사이트에서 다른 사이트로 이동하려면 location객체에 참조 주소(href)속성을 바꾸면 된다.
<script>
function url(a){
window.location.href=a;//window.은 생략 가능 .href속성도 생략 가능
}
function daum(){
location='http://www.daum.net';//원하는 파일 또는 주소로 이동시킴.
}
</script>
<body>
<input type="button" value="네이버로 이동" onclick="location='http://www.naver.com';"/>
<input type="button" value="구글로 이동" onclick="url('http://www.google.co.kr');"/>
<input type="button" value="다음으로 이동" onclick="daum();"/>
</body>
3) 문서 객체 모델
문서 객체 모델(DOM)은 HTML 문서구조를 말한다. HTML문서의 기본 구조는 최상위 객체로 <html>이 있으며, 그 하위 객체로는 <head>와 <body>가 있다. 문서 객체 모델에서는 HTML의 모든 요소들을 문서 객체로 선택하여 자유롭게 속성을 바꿀 수 있고, 선택한 문서 객체에 원하는 스타일(CSS)을 적용할 수 있다.
'언어공부 > JavaScript&jQuery' 카테고리의 다른 글
| 자바 스크립트(JavaScript) 기초 문법 - 내장객체 (배열 객체) (0) | 2021.07.24 |
|---|---|
| 자바 스크립트(JavaScript) 기초 문법 - 내장객체 (날짜객체/수학객체) (0) | 2021.07.23 |
| 자바 스크립트(JavaScript) 기초 문법 - 제어문(반복문) (0) | 2021.07.22 |
| 자바 스크립트(JavaScript) 기초 문법 - 제어문(조건문) (0) | 2021.07.21 |
| 자바 스크립트(JavaScript) 기초 문법 - 연산자 (0) | 2021.07.20 |
