window 객체
-브라우저 창 자체를 나타내는 객체
- window 객체는 창 자체를 나타내고 있으므로
브라우처 장 내에서 어디서든 접근 가능
그래서 window 객체의 속성과 기능 호출 시
window 단어를 생략할 수 있다.
ex) window.alert() == alert()
- window 객체는 JS에서 최상위 객체
DOM, BOM으로 분류된다.
DOM(Document Object Model) : HTML문서 자체를 나타내는 객체(document)
BOM(Browser Object Model) : location, history, screen, navigator
동기 3초 3초 3초 -> 9초
비동기 3초 3초 3초 -> 3초
window.setTimeout(함수, 지연시간(ms))
지정된 지연시간 후 함수를 실행하게 만드는 window 객체의 함수
- 시간 관련된 함수는 비동기
(코드 인식은 순서대로 진행되지만, 수행은 동시에 진행된다.)
(페이지 이동시 로딩에 사용)
window.setTimeout(function() {
// window.setTimeout() 에서 this == window 객체
btn1.style.backgroundColor = 'orange';
}, 3000)window.setInterval(함수, 지연시간(ms))
지정된 지연 시간마다 함수를 수행
(첫 실행도 지연시간 후에 진행)
22 : 37 : 35
window.clearInterval(setInterval()이 저장된 변수)
function currentTime() {
const now = new Date(); // 현재 시간 정보를 저장하고 있는 객체 생성
let hour = now.getHours();
let min = now.getMinutes();
let sec = now.getSeconds();
// 얻어온 시간값이 10미만일 경우 앞에 0추가
if(hour < 10) hour = "0" + hour;
if(min < 10) min = "0" + min;
if(sec < 10) sec = "0" + sec;
return hour + " : " + min + " : " + sec;
}
// 페이지가 로딩되자마자 #clock에 현재 시간 출력
const clock = document.getElementById("clock");
clock.innerText = currentTime();
// #clock에 1초마다 현재 시간을 출력하도록 하는 코드를 작성
const interbal1 = window.setInterval(function() {
clock.innerText = currentTime();
}, 1000);
document.getElementById("stop"),addEventListener("click", function() {
this.window.clearInterval(interbal1);
});window.open("url", "팝업창이름", "팝업창 특성(옵션)")
url
새 창에서 요청할 URL
팝업창이름
사용자 임의 지정 : 새 창 이름 지정
_black : 새 탭 또는 새 창(기본값)
_self : 현재 탭 또는 현재 창
_top : 최상위 페이지
_parent : 부모페이지
팝업창 특성(옵션)
쉼표로 구분된 창 기능 목록을 포함하는 문자열 name=value또는 부울 기능의 경우 name.
이러한 기능에는 창의 기본 크기 및 위치, 최소 팝업 창을 열지 여부 등과 같은 옵션이 포함됩니다.
popup
최소한의 팝업창 사용
팝업 창에 포함된 UI 기능은 일반적으로 주소 표시줄만 포함하여 브라우저에서 자동으로 결정됩니다.
활성화 popup되지 않고 창 기능이 선언되지 않은 경우 새 탐색 컨텍스트는 탭이 됩니다.
width또는innerWidth
스크롤 막대를 포함하여 콘텐츠 영역의 너비를 지정합니다. 최소 필수 값은 100입니다.
height또는innerHeight
스크롤 막대를 포함하여 콘텐츠 영역의 높이를 지정합니다. 최소 필수 값은 100입니다.
left또는screenX
새 창이 생성될 사용자의 운영 체제에서 정의한 대로 작업 영역의 왼쪽에서 픽셀 단위로 거리를 지정합니다.
top또는screenY
새 창이 생성될 사용자의 운영 체제에서 정의한 대로 작업 영역의 위쪽에서 픽셀 단위로 거리를 지정합니다.부모창에 작성된 값 읽어오기
부모창을 나타내는 객체 opener
const parentValue = opener.document.getElementById("parentInput").value;
현재 창 닫기
window.close();
새 탭에서 열기
window.open("09_배열.html");
최소한의 팝업창 형태로 열기
window.open("09_배열.html", "_blank", "popup");
옵션이 지정된 팝업창
옵션 작성 방법 : "k=v, k=v, k=v", 크기 단위 작성X (px고정)
const options = "width=400, height=500, top=50, left=400";
window.open("09_배열.html", "popupWindow", "options");
팝업창(자식) 열기
const options = "width=300, height=300, top=500, left=700";
window.open("팝업.html", "popupWindow", "options");
