1. 윈도우 객체
- 웹 브라우저에 의해 "탭"마다 하나씩 생성되는 객체로 브라우저를 제어할 수 있는 메서드를 제공한다. (새 창열기 메서드, 알림창, 컨펌창, prompt창 등)
- 웹 브라우저가 열리면 가장 먼저 window라는 객체가 만들어지고 밑으로 하위 요소에 해당하는 객체들이 나타난다.
| 종류 | 설명 |
|---|---|
| window | 브라우저 창이 열릴 때마다 하나씩 만들어진다. 브라우저 창 안의 요소 중 최상위 |
| document | 웹 문서마다 하나씩 있으며 바디태그를 만나면 만들어진다. |
| navigator | 현재 사용하는 브라우저의 정보가 들어있다. |
| history | 현재 창에서 사용자의 방문기록을 저장한다. |
| location | 현재 페이지의 url정보가 담겨있다. |
| screen | 현재 사용하는 화면 정보를 다룬다. |
1.1. 윈도우 객체의 메서드
alert(), confirm(), prompt() 등의 메서드는 window 객체의 메서드이므로 원래는 window.alert()로 작성해야한다.
하지만 window객체는 기본객체이므로 window.은 생략하여 사용한다.
open 메서드 : 새 창 열기 메서드
- 주로 팝업 창을 띄울 때 사용
- window.open(url, name, specs)
- url : 새창 열고자 하는 url 주소
- name : 팝업창의 이름 (생략가능)
- specs : 창크기 속성, 가로길이,세로길이, 상태표시줄 표시여부 등.. (생략가능)
자바스크립트 파일로 버튼 클릭 시 open 메서드를 호출하는 함수
var newWindow;
function test1() {
newWindow = open('08_함수.html','_self2', "width = 800, height = 500") ;
console.log(newWindow);
setTimeout(function() {
newWindow.alert("Hello JS");
}, 1000);
}- test1 메서드 호출 시 팝업창이 생기며 1초 후 alert창으로 Hello JS를 표시 (여기서 경로는 html파일로 제시함)
1.2. BOM 객체
(1) navigator 객체
- 현재 실행 중인 browser와 운영체제에 대한 정보를 가진 객체이며 이 정보는 사용자가 수정 불가능하며 가져와서 보여줄 수만 있다.
- 클라이언트의 브라우저 정보나 운영체제 정보를 확인하여 그에 맞는 적합한 컨텐츠를 제공하고자 할 때 사용할 수 있다. (렌더링 엔진, 자바스크립트 엔진이 웹 브라우저별로 다르기 때문)
예) ie와 같은 구식 브라우저로 웹사이트에 접근 시 ie로는 사용하지 못합니다와 같은 경고문 출력 후 접근 거부
function test8() {
console.log(window.navigator);
}
(2) location 객체
주소창 관련 정보를 가진 객체
- 새로고침 : location.reload();
- 페이지로 이동 : location.href = location.pathname;
location.href = "https://naver.com";- 페이지로 이동2 : location.assign('https://naver.com');
- 페이지로 이동3 : location.replace('https://naver.com');
=> replace의 경우 assign과 동일하지만 뒤로가기가 불가능하다
(3) history 객체
방문 기록을 보관하고 있는 객체이며 보안문제로 읽기 전용이다.
- back() : history 목록에서 이전 페이지를 불러온다.
- go() : history 목록에서 다음 페이지를 불러온다.
- forward() : history 목록에서 현재 페이지 기준으로 상대적인 위치의 페이지를 불러온다 .
=> history.go(1) = 다음페이지
=> history.go(-1) = 이전페이지
(4) screen 객체
접속 기기의 화면과 관련된 정보를 가진 객체(디바이스의 뷰포트(가로, 세로 길이 등)가 어떤지)
screen의 핵심속성
- width : UI영역(윈도우 작업표시줄, Mac의 독)을 포함한 화면의 너비
- height : UI영역을 포함한 화면의 높이
- availWidth : UI영역을 제외한 영역의 너비
- availHeight : UI영역을 제외한 영역의 높이
팝업을 화면 중앙에 띄우는 방법
var width = 300;
var height = 300;
var left = (screen.availWidth - width) / 2 + screen.availLeft;
var top = (screen.availHeight -height) / 2;
open("08_함수.html", "pop-up", `width=${width}, height=${height}, left=${left}, top=${top}`);1.3. DOM에서 노드 추가 및 삭제
Node란?
모든 DOM 객체가 상속받는 객체로 HTML의 태그(요소) 뿐 아니라 주석(comment), 텍스트(text), 태그(Tag)까지 포함하여 모두 Node라고 부른다.모든 HTML 태그는 Node의 존재하는 메서드들을 사용할 수 있으며, EventTarget에 존재하는 "이벤트 속성"들을 사용할 수 있다.
노드 추가에 활용할 HTML
<div class="result"></div>(1) 동적으로 텍스트 노드 추가하기 1. innerHTML
result 클래스를 가진 div태그에 직접 접근하여 text를 추가한다.
document.querySelector('.result').innerHTML = '<h3>안녕</h3>';(2) 동적으로 텍스트 노드 추가하기 2. createElement()
1) 요소 노드 만들기
- document.createElement(노드명)
새로운 h3 요소를 만들기 var elementNode = document.createElement('h3');
2) 텍스트 노드 만들기
- document.createTextNode(텍스트);
h3태그의 내용에 해당하는 텍스트 노드 만들기 var textNode = document.createTextNode('안녕');
3) 자식노드 연결하기
- 부모노드.appendChild(자식노드)
새로운 h3노드와 새로운 텍스트 노드 연결하기 elementNode.appendChild(textNode); result 클래스의 요소의 자식으로 elementNode 추가하기 document.querySelector('.result').appendChild(elementNode);
createElement 버튼 클릭 시 함수를 호출하여 동적으로 노드 추가 완료
| 추가 전 | 추가 후 |
|---|---|
 |  |
