BOM

window 객체

• 브라우저의 창이나 탭
• 모든 글로벌 JavaScript 객체와 함수는 window 객체의 속성으로 존재

주요 메서드 및 속성

• window.alert(message): 사용자에게 경고 메시지를 표시
• window.confirm(message): 확인 대화상자를 표시하고, 사용자의 선택(확인 또는 취소)을 반환
• window.prompt(message, default): 사용자에게 입력을 요청하는 대화상자를 표시

타이머 함수

• setTimeout(function, delay): 지정한 시간 후에 함수를 실행
• setInterval(function, delay): 지정한 시간 간격으로 함수를 반복 실행

document 객체

• 현재 웹 페이지의 HTML 문서에 대한 인터페이스를 제공
• DOM을 통해 HTML 요소를 조작 가능

주요 메서드 및 속성

• document.getElementById(id): 지정한 ID를 가진 요소를 반환합니다.
• document.querySelector(selector): CSS 선택자를 사용하여 첫 번째 일치하는 요소를 반환합니다.
• document.createElement(tagName): 새로운 HTML 요소를 생성합니다.
• document.body: 현재 문서의 body 요소에 접근합니다.

location 객체

• 현재 문서의 URL을 나타내며, URL 정보를 읽거나 수정 가능

주요 메서드 및 속성

• location.href: 현재 페이지의 전체 URL을 반환합니다.
• location.hostname: 현재 페이지의 호스트 이름을 반환합니다.
• location.reload(): 페이지를 새로 고칩니다.
• location.replace(url): 현재 문서를 새로운 URL로 대체합니다.

navigator 객체

• 사용자의 브라우저에 대한 정보를 제공

주요 메서드 및 속성

• navigator.userAgent: 브라우저의 사용자 에이전트 문자열을 반환합니다.

screen 객체

• 사용자의 화면에 대한 정보를 제공

주요 속성

• screen.width: 화면의 너비를 픽셀 단위로 반환합니다.
• screen.height: 화면의 높이를 픽셀 단위로 반환합니다.
• screen.availWidth: 현재 사용 가능한 화면 너비를 반환합니다.
• screen.availHeight: 현재 사용 가능한 화면 높이를 반환합니다.

DOM

• 문서 객체를 제어하기 위한 모델을 의미
• 문서 객체: 웹 브라우저에 표시되는 HTML 태그를 자바스크립트가 이해할 수 있는 객체 형태로 변환한 것, 웹 브라우저가 자동으로 처리함
• 웹 브라우저를 개발하는 각 회사가 HTML 태그를 자바스크립트 객체로 변환하고 이를 제어하기 위한 API를 제공하는 것

💫 https://bioub.github.io/dom-visualizer/

1. 문서 객체 선택

1.1 querySelector(CSS Selector) -> 단일 문서 객체, 가장 먼저 찾은 하나만 찾아줌
1.2 querySelectorAll(CSS Selector) -> 복수 문서 객체

2. 문서 객체 조작

2.1 스타일 변경

2.1.1 style 속성 참조

2.2 속성 추가 및 삭제 및 변경

2.2.1 속성을 추가 및 변경할 때는 setAttribute(속성명, 속성값)
2.2.2 속성을 가져오는 방법 getAttribute(속성명)
2.2.3 속성을 삭제하는 방법 removeAttribute(속성명)
2.2.4 class 속성을 제어하는 특화된 방법
2.2.4 classList
2.2.4.1 add() - 추가
2.2.4.2 remove() - 삭제
2.2.4.3 toggle() - 추가/삭제
2.2.4.4 contains() - 포함 여부 true/false

2.3 콘텐츠 조작

2.3.1 innerText
2.3.2 textContent
2.3.3 innerHTML
2.3.4 outerHTML - 적긴 함

2.4 새로운 문서 객체를 추가

2.4.1 innerHTML(outerHTML)
2.4.2 createElement() + appendChild() or insertBefore()

2.5 기존 문서 객체 삭제

2.5.1 remove()
2.5.2 문서 객체의 부모 요소에서 removeChild()

3. 이벤트

3.1 이벤트 타켓

• 어느 요소에서 발생하는 이벤트인지를 의미

3.2 이벤트 타입

• 이벤트의 종류(클릭, 키보드 이벤트, 드래그 이벤트)

3.3 이벤트 핸들러

• 이벤트가 발생했을 때 실행할 콜백 함수

-팀미팅
콜라 문제
https://school.programmers.co.kr/learn/courses/30/lessons/132267