212 lines
3.1 KiB
Markdown
212 lines
3.1 KiB
Markdown
# BOM
|
|
|
|
- innerWidth, innerHeight
|
|
|
|
뷰포트의 크기. 스크롤바 포함
|
|
|
|
- outerWidth, outerHeight
|
|
|
|
브라우저의 크기
|
|
|
|
- scrollX = pageXOffset, scrollY = pageYOffset
|
|
|
|
스크롤된 픽셀 크기
|
|
|
|
- screenX = screenLeft, screenY = screenTop
|
|
|
|
모니터 좌표 (0, 0)에서부터 뷰포트 까지의 픽셀 거리
|
|
|
|
|
|
- open()
|
|
|
|
- close()
|
|
|
|
- moveTo()
|
|
|
|
- moveBy()
|
|
|
|
- resizeBy()
|
|
|
|
- resizeTo()
|
|
|
|
- scroll(option)
|
|
|
|
```javascript
|
|
window.scroll({top:100, left:100, behavior:"smooth"});
|
|
```
|
|
|
|
- scrollBy(x, y)
|
|
|
|
- scrollTo(x, y)
|
|
|
|
- addEventListener(eventType, listener)
|
|
|
|
```javascript
|
|
window.addEventListener('DOMContentLoaded', (event) => {
|
|
//
|
|
});
|
|
```
|
|
|
|
- removeEventListener(eventType, listener)
|
|
|
|
|
|
## 대화상자
|
|
|
|
- alert(message)
|
|
|
|
알림 대화상자
|
|
|
|
- confirm(message)
|
|
|
|
확인 대화상자. true/false를 반환
|
|
|
|
- prompt(message)
|
|
|
|
입력 대화상자. 사용자가 입력한 텍스트를 반환하거나 null을 반환
|
|
|
|
|
|
## 타이머
|
|
|
|
- setTimeout(callback, ms)
|
|
|
|
지연 시간 이후에 함수를 실행. 고유아이디를 반환.
|
|
|
|
- setInterval(callback, ms)
|
|
|
|
지연 시간마다 함수를 반복 실행. 고유아이디를 반환.
|
|
|
|
- clearTimeout(id)
|
|
|
|
- clearInterval(id)
|
|
|
|
|
|
```javascript
|
|
let uId = setInterval(() => {
|
|
document.querySelector('#box').innerHTML = new Date();
|
|
}, 1000); // 1초마다 새로 고침
|
|
setTimeout(() => {
|
|
clearInterval(uId);
|
|
}, 5000); // 5초 후에 새로 고침 중단
|
|
```
|
|
|
|
## Console
|
|
|
|
- log(message)
|
|
- debug(message)
|
|
- info(message)
|
|
- warn(message)
|
|
- error(message)
|
|
|
|
- assert(expression, message)
|
|
|
|
매개 변수가 false인 경우에 메시지와 함께 스택 추적을 출력합니다.
|
|
|
|
- clear()
|
|
|
|
콘솔의 출력을 지웁니다.
|
|
|
|
- trace()
|
|
|
|
콘솔에 스택 추적을 출력합니다.
|
|
|
|
- table(obj)
|
|
|
|
배열이나 객체 등을 콘솔에 표 형태로 출력합니다.
|
|
|
|
|
|
## History
|
|
|
|
- length
|
|
|
|
방문 기록에 저장된 페이지 갯수
|
|
|
|
- back()
|
|
|
|
뒤로 가기
|
|
|
|
- forward()
|
|
|
|
앞으로 가기
|
|
|
|
- go(number)
|
|
|
|
number가 0이면 새로 고침. -2이면 2 페이지 뒤로 가기.
|
|
|
|
|
|
## Screen
|
|
|
|
- width, height
|
|
|
|
모니터 화면의 전체 픽셀 크기
|
|
|
|
- availWidth, availHeight
|
|
|
|
작업표시줄 등을 제외한 모니터 크기
|
|
|
|
- pixelDepth
|
|
|
|
- colorDepth
|
|
|
|
|
|
```javascript
|
|
function getScreenSize(){
|
|
return {
|
|
width: window.screen.width,
|
|
height: window.screen.height
|
|
};
|
|
}
|
|
```
|
|
|
|
## Location
|
|
|
|
- href
|
|
|
|
현재 페이지의 URI
|
|
|
|
- protocol, host, hostname, port, pathname, search, hash
|
|
|
|
URI 중 특정 부분
|
|
|
|
- assign(uri)
|
|
|
|
다른 페이지로 이동
|
|
|
|
- replace(uri)
|
|
|
|
다른 페이지로 이동. 히스토리를 남기지 않습니다.
|
|
|
|
- reload()
|
|
|
|
새로 고침. 매개 변수로 true를 전달하면 강력 새로 고침.
|
|
|
|
|
|
## Navigator
|
|
|
|
- onLine
|
|
|
|
온라인 여부를 true / false로 반환
|
|
|
|
- cookieEnabled
|
|
|
|
쿠키 사용 가능 여부
|
|
|
|
- language
|
|
|
|
- appName, appVersion, appCodeName, platform
|
|
|
|
- userAgent
|
|
|
|
- javaEnabled
|
|
|
|
|
|
```javascript
|
|
function isConnected() {
|
|
return navigator.onLine;
|
|
}
|
|
window.addEventListener("online", function () {
|
|
console.log("연결됨");
|
|
});
|
|
window.addEventListener("offline", function () {
|
|
console.log("연결 끊김");
|
|
});
|
|
``` |