[웹키워드#2] Javascript, JQuery, DOM Parser


HTML, CSS만으로도 웹페이지를 꾸밀 수 있다. 우리는 위 2가지 언어를 사용하여 도화지에 예쁜 그림을 그릴 수 있다. 하지만 가만히 움직이지 않는 그림으로는 많은 것을 표현할 수가 없다. 우리는 JavaScript등 동기방식 기술을 사용하여 정적인 그림을 움직이게 만들 수 있다. 


JavaScript

JavaScript의 이름 때문에 Java 언어와 관련 있어 보이지만, 이는 별개의 언어이다. 오히려 Java보다는 C언어의 Subset에 가깝다. 처음에는 LiveScript라고 불리었다가, 마케팅 차원에서 Java라는 단어를 이름에 썻다는 이야기가 전해져 온다. 


JavaScript는 여러분의 웹사이트에 상호작용성(ex. 게임 버튼을 눌렀을때 반응)을 더해주는 동적인 프로그래밍 언어이다. 개발자가 만든 문서에 방문자가 방문하여 어떤 동작을 취했을 때, 그 동작에 대응하여 반응이 일어날 수 있도록 해주는 언어이다. HTML과 CSS로 이루어진 문서가 정지해 있는 문서라면, JavaScript를 사용했을 때에는 방문자가 특정요소에 동작을 취했을 때 문서가 반응할 것 이다. 메뉴에 마우스를 올렸을 때에 서브 메뉴가 펼쳐지는 것 과 같다. 아래는 간단한 JavaScript예제이다.  

JavaScript는 1995년 Netscape의 엔지니어 Brendan Eich에 의 해 만들어졌다. 대부분의 언어와 다르게, JavaScript 언어는 입출력 개념이 없다. 호스트 환경 아래에서 스크립트 언어로서 동작하도록 디자인 되었고, 외부 세계와 통신하기 위해 호스트 환경이 제공하는 메커니즘에 의존한다. 


- JavaScript의 특징

  1. JavaScrpit는 인터프린터 언어입니다. 
  2. JavaScript는 클라이언트 스크립트 언어입니다. 
  3. 객체 기반 업어입니다. 
  4. 공개된 언어입니다. 
  5. 다양한 라이브러리를 활용할 수 있습니다. 
- JavaScript의 장점
  1. 클라이언트 언어이기에 서버의 부하를 줄일 수 있습니다. 
  2. 정적인 사이트를 동적인 사이트로 만들 수 있습니다. 
  3. Interactive한 사이트를 만들 수 있습니다. 
  4. 다양한 라이브러리를 활용할 수 있습니다. 
  5. HTML5 API 기반 언어입니다. 


JavaScript는 처음 나왔을 때 비해 그 영향력이 점점 넓어지고 있다. JavaScript를 활용한 node.js를 활용하여 서버를 구성할 수 있다. 또한 Angular.js를 이용하여 MVC환경을 구현할 수도 있다. 이외에도 DB구성, 결제 등 JavaScript는 다양한 영역으로 그 영향력을 발산시키고 있다. 



참고: 자바스크립트 재입문하기 (https://developer.mozilla.org/ko/docs/A_re-introduction_to_JavaScript)

  DO it! 자바스크립트 + 제이쿼리 입문 (저: 정인용)


JQuery

"라이브러리란 자주 사용되는 로직들을 재활용, 유통 가능하도록 만든 로직들의 묶음을 의미하며, 효율성을 높여준다."

    JQuery는 JavaScript의 생산성을 향상시켜주는 JavaScript 라이브러리이다. 존 레식에 의해, 2006년 공식적으로 소개 되었다. JQuery 가 순식간에 업계를 장악할 수 있었던 이유는 무지 쉽고 간편하기 때문이다. 장황한 설명보다는 JQuery의 장점을 코드로 쉽게 설명해주겠다. 


    - JavaScript 표현식


    - JQuery 표현식

    이렇듯 JQuery는 코드를 단순하고 간결하게 유지해준다. 이를 사용하여 매우 적은 문자로도 JavaScript로 표현하고 싶은 것을 표현할 수 있다. JQuery의 철학은 매우 독특하다. 무엇이든 단순하고 재사용 가능한 것으로 유지하기 위해 디자인 되었다. 여러분이 이러한 철학을 이해하고 여기에 편안함을 느낀다면, JQuery가 여러분의 프로그래밍 방식을 충분히 향상시킬 수 있다. 


    DOM parser

    Document Object Model(문서 객체 모델)의 약자로 HTML과 XML문서를 위한 API로서 문서의 물리적 구조와 문서가 접근되고 다루어지는 방법을 정의한다. DOM은 XML문서를 하나의 Tree구조로 본다. 이에 Element의 위치에 따라 상/하위 개념 및 형제 개념을 가지고 있다. 


    - DOM parser의 특징

    1. XML문서를 메모리상에 올려놓은 다음 DATA를 찾아 들어가는 방식 사용
    2. Tree구조를 다 읽기 때문에 큰 문서의 경우 시간이 길게 걸리
    3. Data 저장되어 있는 순서대로 받음
    - DOM parser의 목적
    1. 다양한 환경과 Application에서 사용할 수 있는 표준적인 프로그래밍 인터페이스 제공
    2. HTML, XML같은 웹문서의 내용과 구조, 그리고 스타일 정보의 검색 또는 수정이 가능하도록 해주는 플랫폼

    즉, 쉽게 말하자면 DOM parser를 사용하여 XML 문서에 있는 것을 객체화 시켜 JavaScript에서 사용할 수 있는 등 문서의 내용을 동적으로 조회, 갱신, 생성 및 삭제 할 수 있게 해준다. 아래는 예시이다. 



    다음시간에는 Non-blocking I/O, 이벤트 루프, chrome v8엔진에 대해 알아보자. 



    'IT & 개발 > 웹키워드' 카테고리의 다른 글

    [웹키워드#6] MEAN Stack (MongoDB, Express, AngularJS, node.js)  (0) 2016.12.29
    [웹키워드#5] Framework (Framework7, Spring)  (0) 2016.12.28
    [웹키워드#4] MVC, MVP, MVVM  (0) 2016.12.28
    [웹키워드#3] Chrome V8, Non-blocking I/O, Event Loop  (0) 2016.12.27
    [웹키워드#1] HTML, CSS, SASS, SCSS  (0) 2016.12.26

    + Recent posts

    티스토리툴바