DOM 객체 모델의 최상의 객체는 Window이다.
하나의 뿌리에서 뻗어나가는 이 모형을 DOM TREE 라고 하는데 객체지향의 부모와 자식의 개념이 적용된다.
부모에서 자식에게 접근하기 위해서는 . 도트 연산자를 사용한다.
window 가 부모이고 document 가 자식이니 window.document 로 자식을 선택할 수 있다.
최상위 객체인 window의 경우 생략이 가능하다. window를 제외하고 document.write("Hello world") 가 가능하다.
. 도트 연산자는 자식 객체 뿐 아니라 객체의 속성 과 메소드(함수)에 접근하는데도 사용된다.
window.document.title
=> window 객체 - document 객체 - 속성 (웹사이트의 타이틀)
* 윈도우 경고 메시지 (Alert)
윈도우 객체에서 바로 사용할 수 있는 메소드 alert이다. <script> 태그 안의 영역에서 언제라도 window 객체의 메소드가 사용가능하다. 여기를 기준으로 삼아 document 객체로 내려가보자.
window.alert("자바스크립트 튜토리얼 입니다!")
* document.write
document는 window.document 이다. 이후의 예제에서 window는 생략한다. document 객체가 window의 자식이라는 것을 알고 있으면 충분하다. write 메소드는 브라우저에 문자열을 출력한다.
window.document.write(window.document.title + "에 오신것을 환영합니다!");
write 는 실전에서 사용할 일이 별로 없는 메소드지만 초반의 학습을 위해서 사용되곤 한다. 차후에 텍스트를 HTML 페이지에 표현하기 위한 다양한 방법들을 알게 된다. (프레임워크를 포함해서)
* 자바스크립트 파일을 분리하기
자바스크립트 파일을 HTML 에서 분리해서 사용할 수 있다. 파일의 확장자를 js로 하고 아래와 같이 script src 태그에 위치를 넣는다. 파일명 앞에 아무 표시가 없다면 같은 폴더에 있는 것이고 src="./javascript.js" 처럼 ./ 표기를 해도 같은 의미다. 자신의 컴퓨터 뿐 아니라 인터넷의 파일을 사용할 수도 있다.
최근에는 많은 웹사이트에서 부트스트랩 같은 프레임워크를 CDN 설치해서 사용한다. 기업의 홈페이지라면 좀 불안하겠지만 개인 웹사이트 정도는 큰 문제 없이 사용가능하다.
HTML과 자바 스크립트가 한 파일에 있으면 아무래도 복잡하니까 파일을 분리해 두면 관리하기가 좋다.
여기까지 왔다면 이제 본격적으로 자바스크립트를 연습할 준비가 끝났다.
다음 포스팅에는 변수에 자바스크립트의 변수의 사용법에 대한 내용이다.
