📖 Reference 📎https://www.w3schools.com/js/js_htmldom.asp 📎https://learn.javascript.ru/browser-environment 📎https://tcpschool.com/javascript/js_intro_basic 📎https://developer.mozilla.org/ko/docs/Learn/JavaScript/First_steps/What_is_JavaScript 📎https://developer.mozilla.org/ko/docs/Web/JavaScript

---

💡1. Window 객체

• JavaScript의 최상위객체 이자 전역 객체 이면서 모든 객체가 소속된 글로벌 객체 이다.
• 객체화된 수많은 구성요소들로 이루어져있다.
• window 객체의 프로퍼티나 메소드는 window 를 생략하고 바로 사용할수 있다. ex) alert("안녕하세요");

📜 1-1. Window 객체 구조

---

💡2. DOM(Document Object Model, 문서 객체 모델)

• 브라우저가 웹 문서를 이해할 수 있도록 구성된 것
• html 태그를 동적으로 제어 한다.
• 브라우저가 html 페이지를 로드하는 과정해서 태그(tag)들을 각기 하나의 객체 로 만든다.
• html 등의 문서의 내용을 노드 트리(node tree) 구조의 객체들로 나타낸다.
• html과 JavaScript를 연결해주는 역할로, Javascript를 이용해 각 요소에 접근한다.

📜 2-1. DOM의 구조

🌲 2-2. DOM의 node 설명

노드 종류	역할
Document Node	트리의 최상위에 존재하는 HTML 문서 전체
Element Node	등의 태그들
Attribute Node	등의 태그(Tag)안의 name, value 등의 속성
Text Node	HTML 문서의 모든 텍스트 표현
Comment Node	HTML 문서의 모든 주석

---

💡3. BOM(Browser Object Model, 브라우저 객체 모델)

• JavaScript가 브라우저와 소통하기 위해 만들어진 모델
• 모든 개별 객체들은 최상위 객체인 Window 아래 존재한다.
• 웹 페이지 내용을 제외한 웹 브라우저창에 포함된 모든 객체 요소들을 말한다.
• window 속성에 속하여 document 문서가 아닌, window 를 제어한다.

🌲 3.1 BOM의 종류

객체 종류	역할
window	최상위 객체로 각 프레임별 하나씩 존재
location	url 주소에 대한 정보 제공
document	현재 문서에 대한 정보
navigator	브라우저의 정보를 제공, 주로 호환성 문제를 위해 사용
history	브라우저의 방문 기록 정보를 제공
screen	브라우저의 외부 환경에 대한 정보를 제공

---

💡4. JavaScript란?

JavaScript는 웹을 위한 인터프리터 언어 이자 객체기반의 스크립트 프로그래밍 언어

• HTML의 특정 요소를 선택하여 다양한 이벤트(마우스 클릭, 키보드 입력 등)에 따라 어떤 동작을 수행할 수 있도록 기능을 넣을 수있음.
• 발생하는 이벤트에 따라 HTML, CSS를 조작할 수 있으며 그 외에 여라가지를 할 수 있음.

🎈4-1. JavaScript의 특징

JS는 객체 기반의 스크립트 언어이다.

JS는 동적이며, 타입을 명시할 필요가 없는 인터프리터 언어이다.

JS는 객체지향형 프로그래밍과 함수형 프로그래밍을 모두 표현할 수 있다.

• 스크립트 언어(scripting language) : 응용 소프트웨어를 제어하는 컴퓨터 프로그래밍 언어, 기존에 이미 존재하는 소프트웨어(애플리케이션)을 제어하기 위한 용도로 쓰인다.
• 인터프리터 언어(interpreted language) : 실행 즉시 인터프리터를 거쳐 실행되는 프로그래밍 언어, 인터프리터를 거치기 때문에 컴파일 언어보다 실행 속도가 느리다.
• 컴파일 언어(compiled language) : 코드가 실행되기 전 컴파일러를 거쳐서 기계어로 모두 변환되어 실행되는 프로그래밍 언어, 인터프리터 언어와는 달리 인터프리터를 거치지 않아 속도가 상대적으로 빠르다.

🌳 JavaScript의 실행 순서

일반적으로 JS는 위에서 아래로 실행이 된다. → 이는 순서에 주의해서 코드를 작성해야하는 의미. (단, 호이스팅(Hoisting) 으로 인한 예외의 경우가 있다.)

🎈4-2. JavaScript의 장단점

장점

• 스크립트언어이기에 컴파일과정이 필요없다. → 빠른 시간 안에 스크립트 코드를 작성할 수 있다.
• 다른 언어들에 비해 단순한 구조와 원칙을 갖고 있어 러닝커브가 매우 낮다.
• 웹에 특화된 기술이기에 운영체제나 플랫폼에 상관없이 잘 작동되고 확장성이 높다.

단점

• 운영체제(OS)에 직접적으로 접근할 수 없다.
• 하드디스크를 읽거나 쓸 수 없다.
• 다른 프로그램을 호출할 수 없다.
• JS는 도메인이 동일한 두 탭/윈도우를 제외하고 탭/윈도우 간에 통신을 수행할 수 없다.
• JS는 웹 브라우저에서 실행되기 때문에 일부 보안상의 제약이 있으며, 브라우저에서 웹 페이지를 열 때 안전하고 위험에 처하지 않도록 보장해야 한다.
• 일반적으로 JS는 자체 도메인에 대해서만 제한없이 네트워크 요청을 보낼 수 있다.

🤔4-3. JavaScript의 역할

: JS의 일반적인 용도는 웹 페이지에 기능을 더하여 HTML 페이지를 동적으로 만들어주는 것이다.

JavaScript가 할 수 있는 것.

HTML 페이지 변경 및 HTML Element와 Content의 추가 혹은 제거

CSS 및 HTML Element의 스타일 변경

사용자와의 상호작용, 폼의 유효성 검증

마우스와 키보드 이벤트와 같은 다양한 이벤트에 대한 스크립트 실행

웹 브라우저 제어, 쿠키 등의 설정과 조회

AJAX 기술을 이용한 웹 서버와의 통신

---