혼자 공부하는 자바스크립트 [6주차]

DOM

Document Objects Model
이라 불리는 문서 객체 모델이란,
HTML의 요소인 head, body, div 등의 문서 객체를
조합해서 만든 전체적인 형태를 말합니다.

즉, HTML의 요소를 자바스크립트에서
조작하고 활용할 수 있습니다.

문서 객체를 조작할 때는 특별히
DOMContentLoaded 이벤트를 사용할 수 있습니다.

HTML 페이지는 코드를 위에서 아래로 실행하는데
이 이벤트는 해당 페이지를 모두 읽고 나서 실행시키는 이벤트입니다.
즉, html 문서 안에 script가 어디에 존재하여도
결과는 동일하게 페이지가 등장한다는 것입니다!!

---

즉, 자바스크립트를 통해 HTML 각 요소에 접근할 수 있습니다.

head, body, title 등 HTML 요소에 대해서는
document.head 등으로 요소를 읽을 수 있습니다.

CSS 선택자에 대해서는
document.querySelector(선택자) 와 같이
별도의 메소드를 사용합니다.

이렇게 문서객체를 이용하면
HTML 코드에 문자열을 삽입하거나,
태그의 속성이나 스타일 등을 조작할 수 있습니다.

기본미션

이외에도 부모-자식의 트리 구조를 이용하여
문서 객체를 생성하거나
다른 문서 객체에 추가하여 이동시키거나,
문서 객체를 제거할 수 있습니다.

---

문서객체 모델 말고도 이벤트 모델이라는 게 있다.

이벤트를 연결하는 방법이며
이벤트 리스너 메소드를 통해 이벤트 객체를
매개변수로 받는다.

이벤트는 종류가 다양하지만
대표적으로 입력 양식에 대해서 사용한다.

키보드를 통해 입력할 때를 예시로 들면
누르거나 떼는 그 상황 자체에 대해
어떤 키를 눌렀고, 얼마나 오래 누르고 떼는지 등
다양한 정보를 받을 수 있다.

이를 통해 웹페이지만으로도 게임을 만들 수 있는 것이다.

이외에도 클릭하거나 입력했을 때
혹은 특정 위치에 마우스를 호버링했을 때
버튼이나 이미지 등의 모양을 변화시킨다거나

우클릭 방지처럼
웹브라우저가 기본적으로 처리해주는 기본 이벤트를
제거할 수 있습니다.

---

이렇게 입력을 받거나
특정한 상황에 동작을 실행시킬 때
예상치 못한 오류가 발생할 수 있다.

따라서 이를 위해 예외 처리가 필수적이다.
오류는 실행 전에 발생하거나, 실행중에 발생하게 되며
중요한 것은 실행중에 발생하는 런타임 오류이다.

조건문을 사용하여 방지하는 방법을
기본 예외 처리라고 한다.
즉, 해당 객체가 있느냐 없느냐를 조건문으로 실행시켜
있을 때, 없을 때를 모두 다룰 수 있다.

하지만 이렇게 하면 코드가 복잡해진다.
따라서 대부분 try catch finally의 고급 예외 처리를 이용한다.

말 그대로 의심되는 코드를 try 해보고
예외가 발생하면 catch하여 특정 코드를 실행한다.

---

상황에 따라 예외를 강제로 발생시켜야 하는 경우도 있다.
이때는 throw 키워드를 이용한다.

특히 프로젝트가 방대해짐에 따라
내가 만든 코드를 다른 사람이 사용하게 될 수 있는데
의도하지 않은 형태로 사용할 수 있다.

이때 예외를 발생시켜
의도대로 처리하도록 사용자를 유도할 수 있다.

예외가 발생되지 않는다면
나중에 스노우볼이 굴려져서
어디서부터 잘못된 건지 찾을 수 없을 수 있기 때문이다.