window용 객체
: JavaScript의 최상위 객체이며, 크게 BOM과 DOM으로 나뉜다.
- BOM(Browser Object Model): location 객체, screen 객체, navigator 객체, history 객체
- DOM(Document Object Model): document 객체
1. window.open("url", "창 이름", "특성");
1) 첫 번째 인자값: 새 창에서 열 url 주소
2) 두 번째 인자값: 창 이름, 같은 이름의 창이 이미 열려있으면 원래 열려있던 창에서 새로고침된다.
3) 세 번째 인자값: 창의 특성, 새 창의 너비와 높이, 툴바, 스크롤바, 상태표시줄 등(브라우저마다 다름)
* 창의 특성
- yes/no, resizable(창 크기 조절 가능 여부), location(주소창 보이는지 여부/수정 가능한지 여부)
- menubar(메뉴바 보이는지 여부), scrollbars(스크롤바 여부), status(상태표시줄), toobar(도구 모음)
→ 여러 속성들을 한 번에 지정할 땐 콤마(,)로 나열한다.
2. window 객체의 timer 관련
1) window.setTimeout(함수, ms);
<button onclick="bomb();">폭탄</button>
<script>
function bomb(){
// 새 창이 열리고 3000ms(3s) 후에 창이 닫힌다.
var windo = window.open();
setTimeout(function(){
windo.close();
}, 3000);
}
</script>
2) window.setInterval(함수, ms);
: 지정한 시간마다 매번 함수를 실행한다.
<button onclick="clock();">시계</button>
<div id="clockzone" class="zone"></div>
<script>
function clock(){
var clockzone = document.getElementById("clockzone");
setInterval(function(){
var now = new Date();
var hour = now.getHours();
var min = now.getMinutes();
var sec = now.getSeconds();
clockzone.innerHTML = hour+" : "+min+" : "+sec+"<br>";
}, 1000);
}
</script>
BOM(Browser Object Model)
: 브라우저의 주소창과 관련된 객체
1. location 객체
1) location.href = 'url'
: 해당 url 주소로 이동한다.
2) location.assign('url');
: 해당 url 주소로 이동한다.
3) location.replace('url');
: 해당 url 주소로 이동한다. 이때 뒤로 가기는 없다.
4) location.reload('url');
: 해당 위치에서 새로고침을 한다.
≒ location.href = location.href 도 새로고침을 하는데 상단으로 위치가 이동한다.
2. screen 객체
: 해상도에 따라 값이 다르게 나올 수 있다.
3. navigator 객체
: 브라우저에 대한 정보를 알려준다.
4. history 객체
: 윈도우 열람 이력을 알려준다.
DOM(Document Object Model)
1. 노드(Node): HTML에 있는 각각의 태그들
1) 요소 노드(Element Node): 태그 그 자체를 의미한다.
2) 텍스트 노드(Text Node): 태그 내에 기록되는 내용을 의미한다.
2. 텍스트 노드가 존재하는 요소(시작태그와 종료태그가 한 쌍으로 이뤄져있는 요소)
: div, a, h, p, pre, ...
1) 동적으로 요소 만드는 방법1
: 문자열로 만들기
document.getElementById("divE").innerHTML = "<h1>제목</h1>";
2) 동적으로 요소 만드는 방법2
: document에서 제공하는 메소드로 요소 객체 만들기
① 요소 노드를 생성: document.createElement("태그명");
var en = document.createElement("h1"); // <h1></h1>
② 텍스트 노드를 생성: document.createTextNode("문구");
var tn = document.createTextNode("텍스트"); // 텍스트
③ 요소 노드에 하위 텍스트 노드를 넣는다. (요소노드.appendChild(하위텍스트노드);)
en.appendChild(tn); // <h1>텍스트</h1>
3. 텍스트 노드가 존재하지 않는 요소(시작태그로만 이뤄져있는 요소)
: img, input, ...
ex) img.src = "url"; / img.width = "300";
4. 노드 삭제
: 지울 요소객체.remove()