2025-01-24T02:27:50

doc/topics/Browser-Object-Model.md

@@ -0,0 +1,212 @@
+# 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("연결 끊김");
+});
+```