JQuery를 공부하기 전 자바스크립트 DOM에 관해 알아보자 !

정말 오랜만에 글을 쓴다..!

지난번 JSP중이던걸 이어서 추가한다고 다른 공부를 못했다..

2018/05/15 - [Web Programming] - JAVA Script 1편 + 자바스크립트 기본

2018/05/15 - [Web Programming] - Java Script 2편 + 자바스크립트 문서 객체 모델

2018/05/16 - [Web Programming] - Java Script 3편 + 자바스크립트 문서 객체 조작

자바스크립트의 기초에 이어서 jQuery라는 친구를 한번 만나 보려고한다.

이미 지난번에 jQuery사용한 코드를 올렸지만 그래도 기초는 중요하니까 😝

오늘 배송받은 따끈따끈한 자바스크립트 + jQuery 완전 정복 스터티 친구와 함께 해보려 한다 !

1편의 목차를 보니 for, if, 함수 등 기초적인 부분이라 2편을 샀다.

2편은 jQuery부분을 다루는 것 같다. ( 잘 선택한듯 )

.

.

jQuery에 들어가기전 이 친구가 자바스크립트의 어떤 부분의 라이브러리인지 챕터 1에서 설명해준다.

⭐ jQuery의 역할을 알기전 우리는 자바스크립트의 DOM을 알아야한다. ⭐

나도 그랬듯 아마 jQuery를 사용할때 그냥 자바스크립트를 편하게 사용하기 위한 라이브러리...라고 알고 사용했을 것이다.

맞는 말이지만 좀 더 공부해보고 사용하니까 재미있다. 😍

본격적으로 포스팅 해보겠다 !

우선 자바스크립트는 총 4가지로 구성돼 있다.

Core문법이 기본 문법과 구조 ( if, switch, 데이터 타입 ),

라이브러리가 자바스크립트에서 기본으로 제공하는 클래스 등 ( 타이머, 문자열... )

BOM이 브라우저와 관력된 객체들 ( window, document )

그리고 마지막으로 우리가 알아보려고 하는 DOM !

DOM ( Document Object Model )은 노드, 스타일, 속성, 이벤트 등을 다루는 기능을 한다.

jQuery는 바로 이 DOM작업을 쉽게 도와주는 라이브러리이다.

실제로 jQuery의 실제 모든 작업은 jQuery 내부의 자바스크립트 DOM이 처리해준다.

따라서 jQuery만 알기보다 자바스크립트를 배우고 공부해야한다.

.

.

DOM은 정의 부분과 구현 부분으로 나누어 진다.

정의 부분은 웹페이지 문서를 조작할 때 지켜야할 약속의 문서 이다. 말 그대로 문서! 실제 동작 코드는 없다 !

함수의 이름만 있고 내용은 없는 친구와 같다.

아마 html을 하면서 구글과 익스플로러의 이벤트나 디자인이 다른것을 볼 수 있을 것이다.

이는 웹 브라우저 별로 구현 부분이 다르기 때문이다 🙄

그렇다면 DOM과 HTML 페이지와의 관계가 어떻게 되는지 보자.

단계별로 살펴보면 아래와 같다.

01. 웹페이지 읽기

02. 파싱 하기     

03. 출력            

HTML 페이지를 로딩 한 다음 파싱 단계에서 작성된 태그와 매칭되는 DOM객체를 생성한다.

그리고나서 브라우저 화면에 출력하게 된다.

이 단계를 보면 알수 있듯이 HTML페이지에 작성하는 마크업은 웹브라우저에게 알려주는 일종의 DOM클래스 메타 정보일뿐이다!

( *메타 데이터 : 기록의 맥락과 내용, 구조와 기록관리 전 과정을 기술한 데이터 )

책에 나온 예시를 적어보면 var $target = $("#target"); 의 정확한 의미는 

파싱 단계에서 만들어 가지고 있는 자바스크립트 DOM객체중 #target이라는 이름을 가진 DOM객체에 접근하라! 와 같다.

DOM이 무엇인지 설명이 되었는지 모르겠다..😹

책을 너무 재미있게 봐서 이렇게 정리해보고자 글을 써봤다 !

jQuery를 공부하기 전에 이러한 개념들을 알고 공부하면 좋을 것 같다 :)