목차
- window 객체
1-1. window.open('주소', '이름 또는 open 방식', '형태');
1-2. window 객체 타이머 메소드
1-3. window 객체 메소드
1-4. window.onload 속성 - BOM
2-1. location 객체
2-2. navigator 객체
2-3. history 객체
2-4. screen 객체
1. window 객체
❗ alert, prompt 등 현재까지 자바스크립트에서 사용해온 메소드들은 사실 window 객체에 속한 것들이다. 이들을 사용할 때window.메소드명처럼 접근하진 않았지만, 그 최상위에는 window 객체가 있음을 짚어보자.
- window 객체는 자바스크립트(JavaScript)의 최상위 객체이며, BOM(Browser Object Model)과 DOM(Document Object Model)로 나뉜다.
- 또한 브라우저 창에 대한 설정을 위해 window 객체를 통한다.
1-1. window.open('주소', '이름 또는 open 방식', '형태');
❗ 오픈 방식 ① _blank : 기본값, 새 창에서 오픈 / ② _self : 현재 페이지를 대체
| height | 윈도우 높이 | 값 |
| width | 윈도우 너비 | 값 |
| location | 주소입력창 | yes | no | 1 | 0 |
| menubar | 메뉴 유무 | yes | no | 1 | 0 |
| resizable | 화면크기 조절 | yes | no | 1 | 0 |
| status | 상태표시줄 | yes | no | 1 | 0 |
| toolbar | 툴바 표시 | yes | no | 1 | 0 |
window.open('주소', '이름 또는 open 방식', '형태');- 인자로서 올바른 값을 전달하지 않거든 빈 창이 뜬다.
window.open('테스트A.html', 'popup1', 'width=1080, height=800');
window.open('테스트B.html', 'popup2', 'width=1080, height=800');- 만일 예시에서 창의 이름을 같은 'popup1'로 썼다면, 마지막 하나만 인식해 테스트B.html을 띄울 것이다.
- 이런 경우 '이름'을 다르게 하는 것으로 바로잡을 수 있다.
1-2. window 객체 타이머 메소드
❗ 1초 == 1000밀리초
| setTimeout(함수, 지연시간(ms)) | 일정시간 후 함수를 한 번 실행, id값 리턴 |
| setInterval(함수, 반복시간(ms)) | 일정시간마다 함수를 반복 실행, id값 리턴 |
| clearTimeout(id) | setTimeout() 함수 실행 종료 |
| clearInterval(id) | setInterval() 함수 종료 |
A. 새 창 열린 뒤 3초 후 자동 닫기
setTimeout(실행 함수, 지연시간(ms))
<body>
<button onclick="test();">실행확인</button>
<script>
function test() {
let myWindow = window.open();
setTimeout(function(){myWindow.close();}, 3000);
}
</script>
</body>- 버튼이 눌리면 실행될 함수를 onclick 이벤트 속성값으로 지정한다.
- 새 창이 변수 통해 참조할 수 있도록 설정한다: let myWindow = window.open();
- setTimeOut() 메소드는 인자로서 (실행 함수, 밀리세컨드 단위의 지연시간)을 필요로 한다. 따라서 close() 메소드만 간단히 수행할 익명의 함수를 첫 번째 인자로 작성하고, 두 번째 인수로서 숫자값 3000을 전달한다. 3초는 3000밀리초를 의미하기 때문이다.
- 결과적으로 버튼 누르면 창이 뜨고, 3초(3000밀리초)가 경과하면 자동으로 닫히는 모습을 확인할 수 있다.
B. 현재 시간 출력
setInterval(실행 함수, 반복시간(ms))
<head>
<style>
.area {
background: lightgray;
border: 1px solid black;
width: 300px;
height: 100px;
font-size: 50px;
color: red;
}
</style>
</head>
<body>
<button onclick="test();">실행확인</button>
<div id="area" class="area"></div>
<script>
function test() {
let area = document.getElementById('area');
setInterval(function(){
let date = new Date();
area.innerHTML = date.getHours() + " : "
+ date.getMinutes() + " : "
+ date.getSeconds();
}, 1000);
}
</script>
</body>
- setInterval() 메소드는 인자로서 (실행 함수, 밀리세컨드 단위의 반복시간)이 요구된다.
- 위 예시에서는 현재 시간을 가져올 수 있도록 ① Date 생성자 통해 객체를 생성하고, ② 이를 토대로 시/분/초를 호출했다: date.getHours(), date.getMinutes(), date.getSeconds()
- 또, 해당 정보를 노드 프로퍼티 innerHTML 사용해 변수 area에 저장한다. 이때 시 : 분 : 초와 같은 출력 형식을 갖출 수 있도록 사이사이에 문자열 " : "을 기입한다.
- 1초마다 반복되도록 하기 위해 1000밀리초임을 명시한다.
C. 스탑 워치
clearInterval(변수명)
<body>
<button onclick="testA();">start</button>
<button onclick="testB();">stop</button>
<div id="area" class="area"></div>
<script>
let timer;
function testA() {
let area = document.getElementById('area');
let count = 0;
if(timer === undefined) {
timer = setInterval(function(){
area.innerHTML = parseInt(count/100/60%60)
+ " : "
+ parseInt(count/100%60)
+ " : "
+ (count % 100);
count++;
}, 10);
}
}
function testB() {
clearInterval(timer);
timer = undefined;
}
</script>
</body>- 스타트(start), 스탑(stop) 버튼 두 가지를 구성한 예시이다.
- 타이머가 증가시켜가던 값을 초기 상태로 돌리기 위해서는 stop 버튼에 연결된 testB() 함수에서 설정이 필요하다. 이때 활용할 수 있는 것이 바로 clearInterval(변수명) 메소드이다. 단, 메소드 호출에 그치지 않고, 그 값 또한 undefined로 대입해 주어야 한다. 처음 상태로 돌리기 위함이다: timer = undefined;
- start 버튼 클릭 시마다 interval이 생성돼 저마다 순환하므로 자칫 잔상이 남는 경우를 볼 수 있다. 이를 다루기 위해 조건문 안에서 setInterval 메소드가 실행되도록 한다. 즉 타이머가 완전히 멈추고 처음 상태로 돌아갔을 때만 설정 시간이 출력되도록 만드는 것이다: if(timer === undefined)
- 100분의 1초마다 올라가도록 설정하기 위해 setInterval 메소드의 두 번째 인자로서 10밀리초가 전달된 모습이다.
1-3. window 객체 메소드
| moveBy(x, y) | 윈도우 위치 조정(상대) |
| moveTo(x, y) | 윈도우 위치 조정(절대) |
| resizeBy(x, y) | 윈도우 크기 조정(상대) |
| resizeTo(x, y) | 윈도우 크기 조정(절대) |
| scrollBy(x, y) | 스크롤 위치 이동(상대) |
| scrollTo(x, y) | 스크롤 위치 이동(절대) |
| focus() | 윈도우에 초점 맞춤 |
| blur() | 윈도우에 초점 제거 |
| close() | 윈도우 닫기 |
1-4. window.onload 속성
window.onload=function(){};또는 작성된 함수 호출;
- 윈도우 객체 로드가 완료되면 자동으로 onload에 설정된 함수를 실행시키는 속성이다.
- 윈도우 객체 로드 완료라 함은 모든 태그가 화면에 나타날 때를 말한다.
2. BOM
- BOM(Browser Object Model)은 그 하위에 location 객체, navigator 객체, history 객체, screen 객체를 두고 있다.
2-1. location 객체
| hash | 앵커 이름(#~) |
| host | 호스트 이름과 포트 번호 |
| hostname | 호스트 이름 |
| href | 문서 URL 주소 |
| origin | 호스트 이름, 프로토콜, 포트 번호 |
| pathname | 디렉토리 경로 |
| port | 포트 번호 |
| protocol | 프로토콜 종류 |
| search | 요청 매개변수(?~) |
<body>
<button onclick="test();">실행확인</button>
<div id="area" class="area-big"></div>
<script>
function test() {
let area = document.getElementById('area');
let html;
for(let key in location) {
html += (key + " : " + location[key] + "<br>");
}
area.innerHTML = html;
}
</script>
</body>- location 객체는 브라우저 주소 표시줄(URL)과 관련된 객체이다.
- for in문 활용해 location에 속한 모든 key 정보를 변수 html에 담아 innerHTML 통해 삽입한 예시이다.
- 주소를 의미하는 href 포함해 location 객체를 구성하는 프로토콜 종류, 호스트 이름, 문서 위치 등의 정보를 한 눈에 확인할 수 있다.
❗ URL 주소를 location.href 또는 location 속성에 담는 것은 결과가 동일하다.
<button onclick="location.href = 'https://developer-r.tistory.com/'">Reminder 블로그 이동</button>
<button onclick="location = 'https://developer-r.tistory.com/'">Reminder 블로그 이동</button>
| assign('주소') | 새로운 페이지 로드, 뒤로가기 가능 |
| reload() | 현재 문서를 다시 로드 |
| replace('주소') | 현재 페이지를 새 페이지로 교체, 뒤로가기 불가 |
A. reload() 메소드
현 위치에서 새로고침
<button onclick="location = location">새로고침</button>
<button onclick="location.href = location.href">새로고침</button>
<button onclick="location.reload();">현 위치에서 새로고침</button>- location = location 또는 location.href = location.href처럼 주소값으로서 자신을 호출하면 새로고침 처리로 이어진다. 이때 보통의 새로고침처럼 창의 최상단부터 다시 띄우게 된다.
- 하지만 reload() 메소드를 통한 방법은 현 위치에서 새로고침을 진행한다. 위치가 새롭게 바뀌거나 하지 않고 그 자리에서 리로드된 것이다: location.reload();
B. replace('주소') 메소드
뒤로가기 불가
<button onclick="location.replace('https://google.com');">구글로 이동</button>- replace('주소') 메소드는 같은 창에서 이동하지만 히스토리가 사라진다는 특징이 있다.
- 즉
뒤로가기가 불가한 것이다.
2-2. navigator 객체
| appCodeName | 브라우저 코드명 |
| appName | 브라우저명 |
| userAgent | 브라우저 전체 정보 |
| language | 브라우저 언어 |
| platform | 사용 중인 운영체제 |
<body>
<button onclick="test();">실행확인</button>
<div id="area" class="area-big"></div>
<script>
function test() {
let area = document.getElementById('area');
let html = "";
html += '브라우저의 코드명 : ' + navigator.appCodeName + '<br>';
html += '브라우저의 이름 : ' + navigator.appName + '<br>';
html += '브라우저 전체 정보 : ' + navigator.userAgent + '<br>';
html += '브라우저의 언어 : ' + navigator.language + '<br>';
html += '사용 중인 운영체제 : ' + navigator.platform + '<br>';
area.innerHTML = html;
}
</script>
</body>- navigator 객체는 내비게이터라는 그 이름처럼 웹 페이지를 실행하고 있는 브라우저에 대한 정보를 가진다.
2-3. history 객체
| forward | 맨 앞으로 가기 |
| go([양수/음수]) | n만큼 앞으로 가기/뒤로 가기 |
| back() | 뒤로 가기 |
| length | 히스토리 객체의 길이 |
<body>
<button onclick="test();">실행확인</button>
<div id="area" class="area-big"></div>
<script>
function test() {
let area = document.getElementById('area');
area.innerHTML = 'history.length : ' + history.length;
// 뒤로 가기
// history.back();
// history.go(-2);
// 앞으로 가기
// history.forward();
history.go(1);
}
</script>
</body>- length 통해 history 객체의 길이를 출력할 수 있다.
- go() 메소드의 경우 인수로서 양수 또는 음수 모두 지정 가능하다. 예시에서처럼 -2라는 음수를 전달하면 전전 단계에 기록된 페이지로 이동한다: history.go(-2);
2-4. screen 객체
| width | 화면 너비 |
| height | 화면 높이 |
| availWidth | 실제 화면에서 사용 가능한 너비 |
| availeHeight | 실제 화면에서 사용 가능한 높이 |
| colorDepth | 사용 가능한 색상수 |
| pixelDepth | 한 픽셀당 비트수 |
<body>
<button onclick="test();">실행확인</button>
<script>
function test() {
let child = window.open("", "", "width=800, height=500");
child.resizeTo(screen.width, screen.height);
setInterval(function(){
child.resizeBy(-20, -20);
child.moveBy(10, 10);
}, 500);
console.log("화면 너비 : " + screen.width);
console.log("화면 높이 : " + screen.height);
console.log("실제 화면에서 사용 가능한 너비 : " + screen.availWidth);
console.log("실제 화면에서 사용 가능한 높이 : " + screen.availHeight);
console.log("사용 가능한 색상 수 : " + screen.colorDepth);
console.log("한 픽셀당 비트 수 : " + screen.pixelDepth);
}
</script>
</body>- screen 객체는 웹 브라우저 화면이 아닌 운영체제 화면의 속성을 가진다.
- window.open() 메소드의 세 가지 인자 중 크기에 대해서만 지정한 예시이다. resizeTo 메소드 통해 지정한 절대 크기로 변경시킬 수 있다. 여기서는 사용자의 화면 너비/높이에 맞춰 출력되게끔 사이즈 재조정한 모습이다: .resizeTo(screen.width, screen.height);
- 한편 setInterval() 메소드로 상대적 크기가 서서히 작아지고, 지정 좌표 따라 이동하도록 만들 수 있다. 0.5초마다 진행되도록 500밀리초를 명시한다.
'Frontend > JavaScript' 카테고리의 다른 글
| [JavaScript] 마우스 이벤트 | 키보드 이벤트 | 스크롤 이벤트 | 폼 이벤트 (0) | 2022.02.23 |
|---|---|
| [JavaScript] DOM 이벤트 | 이벤트 핸들러 | addEventListener | 버블링 (0) | 2022.02.23 |
| [JavaScript] 문서 수정 | 노드 메소드 | insertAdjacentHTML | classList (0) | 2022.02.22 |
| [JavaScript] 주요 노드 프로퍼티 | innerHTML | textContent | value (0) | 2022.02.21 |
| [JavaScript] 요소 검색 메소드 | querySelector | NodeList (0) | 2022.02.21 |
