6. window 객체

JavaScript의 window 객체는 최상위 객체로, 브라우저와 관련된 다양한 기능을 제공합니다. window 객체는 Browser Object Model(BOM)과 Document Object Model(DOM)을 포함하며, 브라우저 창 관리, 화면 정보, 위치 정보 등을 제어할 수 있습니다. 이번 글에서는 window 객체의 기본 사용법과 주요 메소드에 대해 살펴보겠습니다.

1. window.open()을 사용한 새 창 열기

window.open() 메소드는 새로운 창을 열 수 있는 기능을 제공합니다. 여러 매개변수를 통해 창의 URL, 이름, 크기 및 옵션을 지정할 수 있습니다.

예제 코드

function test1(){
    window.open("https://www.naver.com", "test", "width=500, height=500, resizable=no, location=no");
}

• 첫 번째 인자: 열고자 하는 URL 주소를 설정합니다.
• 두 번째 인자: 창의 이름을 지정하며, 동일한 이름으로 열면 새로운 창이 아닌 기존 창에서 내용이 갱신됩니다.
• 세 번째 인자: 창의 크기와 기능을 설정하며, width, height, resizable 등을 지정할 수 있습니다.

2. 타이머 관련 메소드

window.setTimeout()

window.setTimeout()은 지정한 시간 후에 함수가 한 번만 실행되도록 설정합니다. 비동기적으로 동작하여 특정 시간이 지난 후 코드를 실행할 때 유용합니다.

예제 코드

function test2(){
    setTimeout(function(){
        console.log("서버에서 데이터 도착");
    }, 3000);
}

• 3초 후에 console.log 문이 실행되어 데이터 도착을 알립니다.

window.setInterval()

window.setInterval()은 일정 시간마다 주기적으로 함수를 실행합니다. 카운트 증가와 같은 반복적인 작업에 사용하기 적합합니다.

예제 코드

function test3(){
    const area1 = document.getElementById("area1");
    setInterval(() => {
        area1.innerHTML = getNowTimeHHMMSS();
    }, 1000);
}

function getNowTimeHHMMSS(){
    const now = new Date();
    return `${now.getHours()} : ${now.getMinutes()} : ${now.getSeconds()}`;
}

• setInterval을 사용해 1초마다 getNowTimeHHMMSS() 함수를 호출하여 현재 시간을 화면에 표시합니다.

3. BOM(Browser Object Model)

location 객체

location 객체는 브라우저의 현재 주소와 관련된 기능을 제공합니다. 현재 URL을 변경하거나 페이지를 새로고침하는 등의 작업이 가능합니다.

예제 코드

<button onclick="location.href = 'http://www.naver.com'">네이버로 이동</button>
<button onclick="location.reload()">새로고침</button>

• location.href로 URL을 변경해 페이지를 이동할 수 있습니다.
• location.reload()로 현재 페이지를 새로고침합니다.

screen 객체

screen 객체는 사용자의 화면 정보를 제공합니다. 화면의 너비와 높이 등 디스플레이와 관련된 정보를 확인할 수 있습니다.

<button onclick="console.log(screen)">screen 객체 확인</button>

• 화면의 너비, 높이 등의 정보를 콘솔에 출력합니다.

navigator 객체

navigator 객체는 브라우저의 정보를 제공하며, 사용자의 브라우저가 지원하는 기능을 확인할 때 유용합니다.

<button onclick="console.log(navigator)">navigator 객체 확인></button>

history 객체

history 객체는 사용자가 방문한 페이지의 히스토리를 관리합니다. 앞으로 가기, 뒤로 가기 기능을 사용할 수 있습니다.

<button onclick="console.log(history)">history 객체 확인</button>

4. DOM을 사용하여 요소 조작

window 객체의 document 객체는 DOM을 통해 HTML 요소를 조작할 수 있도록 합니다. 새로운 요소를 추가하거나, 기존 요소의 내용을 변경할 수 있습니다.

예제 코드

function test4(){
    const area2 = document.querySelector("#area2");
    let h3El = document.createElement('h3');
    h3El.innerText = "안녕하세요.";
    area2.appendChild(h3El);
}

• document.createElement를 사용하여 새로운 h3 요소를 생성합니다.
• appendChild를 통해 생성한 요소를 DOM에 추가합니다.