📖 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 기술을 이용한 웹 서버와의 통신
