Javascript
인터프리터 언어기 때문에 컴파일 언어인 C, Java에 비해서 엄청 느리지만
브라우저나 웹 페이지를 컨트롤할 때 가장 적합한 언어
1. BOM (Browser Object Model)
- 웹 브라우저의 다양한 기능을 객체처럼 다루는 모델
window 객체
- Global Context(전역 공간)이자 브라우저 창을 나타내는 객체
- 전역 변수나 전역 함수의 경우 window의 프로퍼티처럼 작동하게 됨
var testValue = "hahaha";
function testFunc() {
console.log(testValue);
console.log(this); // 윈도우 공간이 찍히게 됨!
}
window.testFunc()
window.testValue
- 중요 프로퍼티
: innerWidth, innerHeight, screenX, screenY, scrollBy(), scrollTo()
- innerWidth, innerHeight : 웹페이지가 보이는 (사용자가 보고 있는) 공간의 너비, 높이
- sreenX, screenY : 하드웨어 모니터 기준으로 웹페이지의 좌표
- scrollBy(), scrollTo() : 스크롤 위치를 조정하는 메소드
1) scrollBy() : 스크롤된 현재 위치 (상대좌표) 를 기준으로 움직임
2) scrollTo() : 절대 좌표를 기준으로 움직임
screen 객체
- 사용자 환경의 디스플레이(모니터) 정보를 가지는 객체
- 중요 프로퍼티
: availHeight, availWidth, width, height, orientation
screen.availHeight
screen.height
screen.orientation
screen.orientation.type
screen.orientation.angle
location 객체
- 사용자가 보고 있는 페이지의 URL을 다루는 객체
- 중요 프로퍼티
: href, reload, replace
- href : 현재 웹브라우저의 URL을 담고 있는 변수 (히스토리 남김)
- reload : 새로고침
- replace : 해당 url로 이동 (히스토리 초기화)
location.href = "https://www.naver.com"
location.replace("https://www.naver.com")
// 둘의 차이는 히스토리를 남기느냐 안남기느냐
navigator 객체
- 웹브라우저 및 브라우저 환경정보를 가지는 객체
- 중요 프로퍼티
: userAgent (해당 브라우저가 어느 환경에서 구동하고 있는지 알려줌)
2. DOM (Document Object Model)
- 자바스크립트 Node 객체의 계층화된 트리
- Node객체들을 트리 구조로써 표현한 모델 = DOM
ex) document, , 등과 같은 Node 객체들은 도식화하여 트리 구조로 만들 수 O
document 노드
- 웹 페이지마다 존재하는 객체로, 웹 페이지 안의 모든 컨텐츠를 다루는 시작점
- 중요 프로퍼티
: title, url, doctype, documentElement, head, body, getElementById, createElement, querySelector, readyState
- title, head, body : document 객체에 존재하는 노드 객체의 값
- url : html 문서의 위치
- doctype : doctype 객체를 불러옴
- documentElement : document 안에 있는 html 요소들을 불러옴
- getElementById : Id를 통해 요소를 찾는 셀럭터
- createElement : 요소를 만들어내는 함수
- querySelector : 쿼리를 찾아내는 셀렉터
- readyState : document의 현재 상태가 무엇인지 그 값을 반환!
단계별 readyState 값의 변화
1. 페이지 접속
2. Loading : DOM 트리를 구축하고 있는 단계
↓ (DOM 트리 구축 완료)
3. Interactive : 이미지, CSS, JS와 같은 하위 자원 로딩 중
4. Complete : 문서와 모든 하위 자원 로딩 완료 / window load 단계
(window의 load 이벤트가 trigger 되는 단계!)
window.addEventListener('load', function(){})
element 노드
- 웹 페이지 안의 각 html 태그 요소들을 의미
- 중요 프로퍼티
: querySelector, classList, dataset, id, innerHTML, parentNode, nextSibling, previousSibling
querySelector의 용도
1. element 노드 일 때 : 해당 element 하위에 있는 엘리먼트를 찾게 됨 (한정)
2. document 객체에서 호출할 때 : document 전체에서 요소를 찾게 됨
- classList : class를 추가, 삭제, 존재, toggle 하는데 사용
- dataset : body 태그 안에 data-''로 시작하는 프로퍼티의 값을 꺼낼 때 사용!
ex) document.body.dataset.mydata
- innerHTML : body 안에 있는 값들을 String으로 반환!
- nextSibling : 노드를 반환 <-> nextElementSibling : 요소를 반환
- previousSibling : 노드를 반환 <-> previousElementSibling : 요소를 반환
3. 정리!
- BOM은 브라우저 기능들을 객체처럼 다루는 모델로 window, screen, location, navigator 객체 등이 있다.
- DOM은 자바스크립트 노드 객체의 계층화된 트리로 노드의 종류로는 document, element, text, comment 등이 존재!