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()

1. innerWidth, innerHeight : 웹페이지가 보이는 (사용자가 보고 있는) 공간의 너비, 높이
2. sreenX, screenY : 하드웨어 모니터 기준으로 웹페이지의 좌표
3. scrollBy(), scrollTo() : 스크롤 위치를 조정하는 메소드
   1) scrollBy() : 스크롤된 현재 위치 (상대좌표) 를 기준으로 움직임
   2) scrollTo() : 절대 좌표를 기준으로 움직임

screen 객체

• 사용자 환경의 디스플레이(모니터) 정보를 가지는 객체
• 중요 프로퍼티
  : availHeight, availWidth, width, height, orientation

screen.availHeight
// 모니터의 높이에서 브라우저가 사용 가능한 높이! (웹브라우저가 사용하고 있는)
screen.height
// 모니터가 사용하고 있는 높이 (하드웨어)
screen.orientation
// 화면의 앵글 (기울기)
screen.orientation.type
// "landscape-primary" <-> "portrait-primary"
screen.orientation.angle

location 객체

• 사용자가 보고 있는 페이지의 URL을 다루는 객체
• 중요 프로퍼티
  : href, reload, replace

1. href : 현재 웹브라우저의 URL을 담고 있는 변수 (히스토리 남김)
2. reload : 새로고침
3. 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
  

1. title, head, body : document 객체에 존재하는 노드 객체의 값
2. url : html 문서의 위치
3. doctype : doctype 객체를 불러옴
4. documentElement : document 안에 있는 html 요소들을 불러옴
5. getElementById : Id를 통해 요소를 찾는 셀럭터
6. createElement : 요소를 만들어내는 함수
7. querySelector : 쿼리를 찾아내는 셀렉터
8. readyState : document의 현재 상태가 무엇인지 그 값을 반환!

단계별 readyState 값의 변화
1. 페이지 접속
2. Loading : DOM 트리를 구축하고 있는 단계
↓ (DOM 트리 구축 완료)
3. Interactive : 이미지, CSS, JS와 같은 하위 자원 로딩 중
4. Complete : 문서와 모든 하위 자원 로딩 완료 / window load 단계
(window의 load 이벤트가 trigger 되는 단계!)

window.addEventListener('load', function(){})
// load 이벤트 발생 시점 : readyState가 complete 되는 시점!
// 이 때, load 이벤트가 trigger 됨

element 노드

• 웹 페이지 안의 각 html 태그 요소들을 의미
• 중요 프로퍼티
  : querySelector, classList, dataset, id, innerHTML, parentNode, nextSibling, previousSibling
  

querySelector의 용도
1. element 노드 일 때 : 해당 element 하위에 있는 엘리먼트를 찾게 됨 (한정)
2. document 객체에서 호출할 때 : document 전체에서 요소를 찾게 됨

1. classList : class를 추가, 삭제, 존재, toggle 하는데 사용

• add
• contains

2. dataset : body 태그 안에 data-''로 시작하는 프로퍼티의 값을 꺼낼 때 사용!
   ex) document.body.dataset.mydata
3. innerHTML : body 안에 있는 값들을 String으로 반환!
4. nextSibling : 노드를 반환 <-> nextElementSibling : 요소를 반환
5. previousSibling : 노드를 반환 <-> previousElementSibling : 요소를 반환

3. 정리!

• BOM은 브라우저 기능들을 객체처럼 다루는 모델로 window, screen, location, navigator 객체 등이 있다.
• DOM은 자바스크립트 노드 객체의 계층화된 트리로 노드의 종류로는 document, element, text, comment 등이 존재!