ACE-T's JS_Part 01. 자바스크립트를 배운다는 것은??

 

[pic 출처 : http://www.scriptcase.net/blog/javascript-if-else/ ]

 

 

충격적이다..

자바스크립트가 무엇인가에 대해서 자세히 모르고 있었네요..

그래서 알아보려고 합니다..

자바스크립트를 배운다는 것은 무엇인가에 대해서...

큰 구조를 파악 해봅시다.

1) 자바스크립트 Core - 여지껏...이부분만 파니...전체적인 이해가 안갔던 것 같네요..ㅠ. ㅠ

    기본 문법과 구조, 데이터 타입, 조건문(if, switch), 반복문(for, while), 함수(function), 기본 라이브러리(Math, String, Date..) 

2) 자바스크립트(DOM - Document Object Model)

    Element 제어, Style 제어, Attribute 제어, Event 제어를 할 수 있는 기능.   

3) 자바스크립트(BOM - Browser Object Model)

    Window, Navigator, Location, History, Document, Screen 객체가 있음.

DOM이란?

Web page 자체를 손수 편집하지 않고 웹브라우저에 표시된 상태에서 웹페지이의 특정부분을 동적으로 지우거나 다른 내용으로 변경하거나, 또는 글자 색과 글자 크기를 바꾸고 싶을 때, 마우스 올렸을 때 툴팁(말풍선)이 나오게 한다거나 할 때 우리는 모두 DOM의 기능을 활용하게 됩니다.

"DOM은 지켜야 할 약속만 적혀 있는 문서" - Interface(자바 Interface  라고 보면 됨, OOP~!!)

자~인터페이스에 대해서 알아봅시다.

Interface란?

 : 실체가 존재하지 않는 서로 지켜야 할 약속!!~

ex) 이 기기는 220볼트에서만 동작하는 전용 기기입니다.

       이 비디오 카드는 HDMI에서만 동작합니다.

위의 예제처럼 약속? 스펙? 규약? 명세서? 뭐 이런 느낌이라고 보시면 됩니다. 아..아닌가?!! ㅋㅋ;; anyways..

Interface는 IDL(Interface Definition Language)로 작성돼 있습니다.

즉, DOM 문서는 인터페이스 정의 문서(IDL)로 작성 돼 있다고 정도만 아시면 될 것 같습니다.

여기까지..DOM이 무엇이고 어떤 기능이 있는지, 인터페이스는 무엇인지에 대해서 알아보았습니다.

W3C에서 구현하는 소스코드가 없다면 어디에 있는 걸까요??? 어디에서 쓰일까요???

바로!! 브라우저들이 자신들만의 특화된 고유 기술을 이용해 DOM 인터페이스를 구현 합니다.

DOM과 HTML 페이지와의 관계

 : HTML 페이지 로딩 => 파싱 단계를 거쳐 웹페이지에 작성된 태그와 매칭되는 DOM 객체 생성 => 브라우저 화면에 출력

NODE와 DOM 객체와의 관계

 : NODE는 HTML 웹 페이지 구성요소의 가장 작은 단위로, <p>, <div> tag뿐만 아니라 주석도 노드에 해당 됩니다.

   브라우저는 이런 노드로 가득 찬 웹페이지를 읽어들여 해석한 후 각 노드에 접근해 제어할 수 있는 DOM객체를 생성 합니다.

다 정리하기에는 조금 무리가 있네요..^^;

요약하면..Node, Document, HTMLDocument, Element, HTMLElement 등등..서로 가족처럼 상속구조로 이루어져있다.

Node가 짱짱맨!

그리고 노드 다루기에서 배웁니다. 

가장 첫번째는 "노드찾기"  입니다. 

아마도..Jquery의 기능을 구현이 어떤식으로 되었는지 알 수 있을 것 같습니다. 셀렉터였나...anyways..^^;

window.document.getElementsByTagName("div"); 는..NodeList객체로 검색된 모든 노드를 리턴하여 줍니다.

NodeList 객체에서 제공하는 프로퍼티와 메소드는 length와 item() 메서드 둘뿐 입니다.

ex) item() 사용

for(var i=0; i < divs.length; i++){

   var div = divs.item(i);   // item[i] 로도 접근 가능!

  div.style.border = "1px solid #ff0000";  

}

그리고.."특정노드의 자식노드에서 특정 태그 이름을 지닌 노드 찾기"에서는

Document객체의 메소드인 getElementsByTagName() 대신 Element객체의 메소드인 getElementsByTagName()를 사용 합니다. getElementsByTagName..스펠링 같으니 비교하지마세요ㅋㅋㅋ 같은 기능, 반환값도 같음..

즉, 검색대상이 문서냐 아니면 특정 노드냐에 따라 Scope이 완전 달라지니 주의 해야 합니다..^^;

다시 말하면..window.document.getElementsByTagName("div"); 로 접근 한 뒤에

하위에서 다시 찾을 때는 document scope이 아닌 찾은 div(노드)아래에서 찾는 다는 것이다.

그리고.."특정 클래스가 적용된 노드를 찾기" 위해서는 getElementsByClassName를 사용하면 됩니다.

var contentData = window.document.getElementsByClassName("content_data");

그리고.."특정 ID를 지닌 노드 찾기" 위해서는 getElementsById("header"); 를 사용하면 됩니다.

일반적으로 아이디는 문서상에 오직 하나만 존재 합니다.  

노드에는 Node[] childNodes,  

              Node firstChild          : 첫번째 자식 노드에 바로 접근하고 싶을 때

             Node lastChild           : 마지막 자식 노드에 바로 접근 하고 싶을 때 

형제노드를 찾고자 한다면..

             Node nextSilbing

             Node previousSibling

다음편 예고..

  스타일 다루기

  이벤트 다루기

참조 문헌 : Jquery를 활용한 인터랙티브 웹 콘텐츠 제작(기초부터 실전 활용까지) - 저> 김춘경

자바스크립트의 전체적인 것에 대해서 생각해보지 않았던 저에게..신선한 충격을 준 책이네요..^0^/

    - END -