[JavaScript] window객체

< Window 객체 >

 

- 자바스크립트의 최상위 객체

- BOM / DOM

* BOM (Browser Object Model)

: 브라우저 창과 관련된 객체들

* DOM (Document Object Model)

: HTML문서의 요소(태그)와 관련된 객체들

 

 

< window 객체 메소드 >

 

> window.alert() : 확인 버튼이 있는 알림창 띄우기

> window.console.log() : 콘솔창에 출력하기

> window.confirm() : 확인/취소 버튼이 있는 알림창 띄우기

> window.prompt() : 입력창이 있는 알림창 띄우기

 

> window.open('url', '띄울 창의 이름', '창의 특성') : 새 창 열기

url : 새 창에서 열고자 하는 주소

창 이름 : 이름이 동일한 창이 열려있을 경우 새롭게 열리지 않고 이미 열려있는 창이 새로고침 됨

*창 특성 : 새로 열리는 창의 너비, 높이, 툴바, 스크롤바, 상태표시줄 등

 

* 특성에 제시할 수 있는 항목들

width : 창의 가로길이 (px)

height : 창의 세로길이 (px)

menubar : 메뉴바 표시 여부

scrollbar : 스크롤바 표시 여부

status : 상태표시줄 표시 여부

toolbar : 도구모음 표시 여부 

=> 여러 속성을 한 번에 제시할 때 쉼표(,)로 나열

ex) '속성=속성값, 속성=속성값, ...'

=> 브라우저에 따라 적용되지 않는 속성들도 있음

 

> window.setTimeout(함수, 밀리초*) : 제시한 일정 시간 후에 함수를 한 번 실행함

* 1000밀리초 == 1초

var newWindow = window.open(); // 새로 열린창의 window객체
newWindow.alert('3초 후에 이 페이지는 닫힙니다.')

window.setTimeout(function(){
    newWindow.close();
}, 3000);

 

> window.setInterval(함수, 밀리초*) : 제시한 시간 간격마다 함수를 실행함

// setInterval()로 시계만들기
window.setInterval(function(){
    var now = new Date();

    hour = now.getHours();
    min = now.getMinutes();
    sec = now.getSeconds();
    var ap = '';

    // 13 -> 1  14 -> 2  15 -> 3  16 -> 4  17 -> 5
    if(hour > 12){
        hour -= 12;
        ap = '오후';
    }
    else{
        ap = '오전';
    }
    if(sec < 10){
        sec = '0' + sec;
    }
    if(min < 10){
        min = '0' + min;
    }
    area1.innerHTML = ap + ' ' + hour + ':' + min + ':' + sec;

}, 1000);

---

 

< BOM (Browser Object Model) >

 

- 브라우저 창과 관련된 객체들

 

1. location 객체 : 브라우저의 주소창과 관련된 객체 => url(href 속성)

<a href="http://www.naver.com">네이버로 이동</a>
<!-- a태그는 애초에 클릭 시 요청할 url을 작성할 수 있는 href속성을 제공함 -->
<br>

<button onclick="location.href='http://www.naver.com'">네이버로 이동</button>
<!-- 굳이 a태그가 아니더라도 url이동을 할 수 있음 -->
<br>

> assign('url') : 해당 url로 이동

> replace('url') : 해당 url로 이동, 뒤로가기 불가능

> reload() : 새로고침

<button onclick="location.assign('http://www.google.com')">구글로 이동</button>
<button onclick="location.replace('http://www.google.com')">구글로 이동</button>

<!-- reload : 새로고침 -->
<button onclick="location.reload();">새로고침</button>
<button onclick="location.href = location.href">새로고침</button>

 

2. screen 객체 : 사용자가 보는 화면에 관한 정보

 

3. navigator 객체 : 브라우저에 관한 정보

 

 

< DOM (Document Object Model) >

 

- HTML문서의 요소(태그)와 관련된 객체들

- 노드(Node) : HTML에 있는 각각의 요소들을 의미

  요소 노드 (Element Node) : 태그 자체만을 의미) = element 

  텍스트 노드 (Text Node) : 태그 내에 기록되는 내용 = content

  텍스트노트가 존재하지 않는 요소(시작태그로만 이루어져있는 요소) : input, img, ...

  텍스트노드가 존재하는 요소(시작태그, 종료태그의 쌍으로 이루어져있는 요소) : div, button, a, ...

 

> 텍스트 노드가 존재하는 노드 생성 (시작태그 + 종료태그)

1) 문자열로 만드는 방법

document.getElementById('area3').innerHTML = '<h3>안녕하세요</h3>';

2) document에서 제공하는 메소드를 통해 요소객체로 만드는 방법

elementNode 객체 생성 → textNode 객체 생성 → 두 노드를 연결(elementNode의 하위로 textNode를 추가)

// elementNode 생성
var elementNode = document.createElement('h3');
// textNode 생성
var textNode = document.createTextNode('안녕하세요');

// 두 노드를 연결 (elementNode의 하위로 textNode를 추가)
elementNode.appendChild(textNode); // <h3>안녕하세요</h3>

// div태그의 자식으로 elementNode를 추가
document.getElementById('area3').appendChild(elementNode);

 

> 텍스트노드가 존재하지 않는 노드 생성 (시작태그만 있는 노드 생성)
요소객체 생성 → 속성 추가

var img = document.createElement('img'); // <img>태그 요소객체

// <img src="이미지경로" width="~~" height="~~" alt="~~"> => 객체의 속성들
// 객체의 속성에 접근하는 방법 : 객체명['속성명'] 또는 객체명.속성명

// 속성추가
img.src = '이미지url';
img.width = '400';
img.height = '200';

// div 태그의 자식요소로 추가
document.getElementById('area4').appendChild(img);

 

> 노드 삭제 

지우고자하는 요소객체.remove()