이 게시물은 웹 / HTML / Window 에 대한 이론 설명이다.
<웹 브라우저 구성요소>
- UI User Interface
- 우리가 보는 화면.
- 각 브라우저의 UI, 주소바. 버튼
- 브라우저 엔진
- 렌더링 엔진에 작업을 요청하고 다루는 인터페이스 부분
- 렌더링 엔진
- 요청된 컨텐츠를 화면에 표시하기 위해 필수적인 부분
- 네트워킹
- HTTP request와 같은 네트워크 호출 담당
- UI 백엔드
- 콤보박스나 윈도우와 같은 기본 위젯을 화면에 그려줌
- 자바스크립트 해석기
- 데이터 스토리지
- 브라우저가 쿠키 등과 같이 데이터를 로컬 영역에 저장하는 공간
- 퍼시스턴스 계층 persistence layer
HTML DOM
Document Object Model
- 여러개의 프로퍼티 와 메서드로 구성.
- 프로프터( 객체 고유한 속성)
- 메서드 : 함수객체를 기반으로 하긴 하지만 객체 지향 언어는 아님.
((자바는 객체 지향 언어.
자바와 자바스크립트는 한 회사에서 나온 것이 아니다. 둘은 아무 사이 아님!
소유권도 다름. ++참고로 자바는 오라클 소유이고 오픈소스이다. ))
<자바스크립트 객체 유형>
- 코어 객체
- 어디서나 사용 가능한 기본 객체. 표준 객체.
- 대문자로 이미 만들어진 객체들. Array, Date, String, Math 타입 등
- HTML DOM 객체
- HTML 태그들을 객체화한 것들.
- W3C의 표준 객체
- 브라우저 객체
- 자바스크립트로 브라우저를 제어하기 위해 제공되는 객체.
- BOM (Brower Object Model) 에 따르는 객체들
- 비표준 객체 : 브라우저마다 다를 수 있다.
**자바스크립트는 5에서 6될 때 많이 바뀜. 개념들이 바뀌고 생겼기 때문에 그걸 알아두는게 좋다. 그래서 6을 기준으로 삼는다.
<HTML 와 자바스크립트>
- HTML DOM
- HTML을 DOM형태의 트리구조로 만들어 놓음. (계층 구조. )
- 웹페이지 별로 만들어짐. 웹페이지 하나당 DOM트리. ( HTML 하나당 DOM트리 하나)
- 태그 하나하나 들을 DOM 형태의 노드로 객체화 시킴
→ 변화를 실시간으로 바로바로 바뀌게 해줌.
<DOM 트리>
- HTML 문서 로딩이 완료되면 DOM 트리 완성
- DOM 객체 변경 시, 브라우저는 해당 HTML 태그의 출력 모양을 바로 갱신.
<HTML 태그>
엘리먼트 라고도 불림.
- 엘리먼트 이름
- 속성 attribute
- css3 스타일
- 이벤트 리스너
- 콘텐츠 innerHTML
💭 프로퍼티 vs 어트리뷰트 차이 알아둘 것.
<DOM 객체의 5가지 구성 요소>
- 프로퍼티
- hTML 태그의 속성 attribute 반영
- 메서드
- DOM 객체의 멤버 함수
- HTML 태그 제어 가능
- 컬렉션
- 자식 DOM 객체들의 주소를 가짐.
- 이벤트 리스너
- HTML 태그에 작성된 이벤트 리스너 반영
- CSS3 스타일
- HTML 태그에 설정된 CSS 스타일 시트 정보를 반영
- DOM 객체의 style 프로퍼티를 통해 HTML 태그의 모양 제어 가능.
Window
<브라우저 객체 구조>
<window 객체>
- 열려 있는 브라우저 윈도우나 탭 윈도우의 속성을 나타내는 객체
- 브라우저 윈도우나 탭 윈도우마다 별도의 window 객체 생성
객체 생성
- 브라우저가 새로운 웹 페이지를 로드할 때
- < iframe> 태그 당 하나의 window 객체 생성
- src는 image 에 밖에 없다.
- iframe 으로 src 써서 HTML 파일 불러올 수 있다.
자바스크립트 코드로 윈도우 객체에 대한 접근
- window, 혹은 window.self, 혹은 self
<window 객체>
안녕하세요! jjang9 입니다（￣︶￣)