[JavaScript] 자바스크립트 for 웹 2.0 - 3부 객체 (9장 ~ 14장)

개요

"자바스크립트 for 웹 2.0"을 학습하며 기억해 둘 만한 항목을 정리해 보았다. 이 책은 자바스크립트에 대하여 기본적인 기술을 소개하고 있고 이 책은 EMCA-262와 JavaScript 1.5/1.6을 기초로 하고 있다.​

저자

셸리 파워즈(Shelley Powers)

소프트웨어 개발자, 사진작가이면서 오라일리에서 여러 권의 책(『Developing ASP Components』,『Unix Power Tools, Third Edition』, 『Essential Blogging』, 『Practical RDF』)을 집필한 작가이다. 1996년 자바스크립트에 관한 첫 저서를 썼고 이듬해인 1997년에 Dynamic HTML(DHTML)에 관한 책을 집필하였다. 또한 크로스 브라우저 개발, 자바스크립트, CSS, XML에 관한 수많은 기사들을 기고하였다. 

 

그녀의 웹사이트 주소는 http://burningbird.net

Burningbird – Burningbird: All human all of the time

 

9장. 브라우저 객체 모델 (BOM) 

기본 브라우저 객체(window, document, form, history, location 등과 같은 객체를 담고 있다)를 시작으로, 자바스크립트에서 접근할 수 있는 객체 모델을 살펴본다. BOM을 사용하면, 윈도우를 열거나 웹페이지 안의 엘리먼트(폼, 링크, 이미지 같은 것들)에 접근할 수 있다. 그리고 간단한 동적 효과를 줄 수도 있다.

 

01. BOM과의 첫 만남

    window, navigator, frames, location, history, screen, document, forms, anchors, links, images

 

02. window 객체

    전역 객체이며 묵시적으로 사용.

    alert, confirm, prompt, open

    새로운 창을 open으로 열 때는 가급적 모든 옵션을 지정한다.

    self, opener

    resizeBy, resizeTo, moveTo

 

    타이머: setTimeout, clearTimeout, setInterval, clearInterval

 

03. 프레임과 로케이션

    location 객체는 현재 위치에 대한 정보를 저장, 현재 로드된 문서를 교체

    replace, reload

    frame, frameset, iframe

    서버통신에 iframe을 사용하면 XML-RPC와 같은 통신 메커니즘을 몰라도 된다. 

 

04. history, screen, navigator 객체

    history: 브라우저가 로드했던 페이지의 히스토리

    screen: 화면에 대한 정보

    navigator: 페이지에 접근하는 브라우저와 에이전트에 대한 정보를 제공

 

05. all 컬랙션, 과거와 현재의 웹 페이지

    document 객체의 all 컬렉션에는 해당 페이지의 모든 엘리먼트에 대한 참조가 포함된다.

    document.getElementById()

    innerHTML: 식별된 엘리먼트 내에 담긴 HTML 전부이다. W3C는 가급적 사용하지 않도록 권장.

    outerHTML

 

06. 오래된 것, 새로운 것

    최근 브라우서는 W3C의 표준을 가급적 충실히 따르려고 노력한다.

 

 

10장. 문서 객체 모델 (DOM) 

이 장에서는 DOM을 중점적으로 다룬다. DOM을 사용함으로써 문서(웹페이지)의 엘리먼트와 속성에 접근할 수 있다. 그리고 HTML뿐 아니라 XML이나 XHTML 기반 문서로의 접근도 가능하다. DOM은 이해하기 쉽고 직관적이다 하지만 처음 접하는 프로그래머에게 조금 어려울 수도 있다.

 

01. DOM의 역사

    W3C가 여러 브라우저 제작사들과 협력하여 공통적인 기본 객체 모델을 만들었다.

    DOM은 플랫폼과 언어에 중립적인 인터페이스이다.

    DOM은 동적으로 접근가능하며, 문서의 내용, 구조, 스타일을 변경할 수 있다.

    1998년에 권고안 발표. DOM 레벨 1: 스키마와 API 정의

    2000년에 발표. DOM 레벨 2: 이벤트 핸들링, CSS, 네임스페이스 지원

    2004년에 발표. DOM 레벨 3: XML에 대한 지원

 

02. 두 가지 인터페이스

    DOM Core API는 언어와 모델에 독립적인 API이다.

    DOM HTML API는 객체지향적이고 계층 구조로 되어 있다.

    BOM API와 DOM HTML API의 차이점은 후자가 W3C 주도하에 여러 브라우저에 호환되도록 설계.

 

03. DOM 호환 브라우저

    브라우저간의 완벽한 호환은 현실적으로 불가능하다.

    대부분의 브라우저는 코어 API와 HTML API를 모두 지원한다.

    지원 브라우저의 종류, 브라우저 버전, 운영체제에 대한 파악이 매우 중요하다.

 

04. DOM HTML API

    코어 API는 유효한 XML에서만 동작한다.

    반면 HTML API는 유효한 XTHML과 HTML에서 동작한다.

    HTML 대신에 XHTML 호환 페이지로 구성하고 가급적 코어 API를 사용하라.,

 

    HTML API는 인터페이스의 집합이라 할 수 있다.

    각 인터페이스 객체의 이름은 HTML의 폼 엘리먼트 이름을 본떠서 만든다.

    DOM HTML API를 사용해서 웹페이지에 객체를 추가, 제거하는 것은 쉽지만 장황하다.

 

05. 코어 API

    W3C의 DOM표준은 문서의 엘리먼트를 노드 컬렉션으로 구성하고 트리계층 구조로 연결하였다.

    DOM은 이러한 트리 노드에 접근할 수 있는 표준을 제공한다.

 

06. DOM 코어 document 객체

    document 객체는 웹페이지 문서에 대한 코어 인터페이스이다.

    document.getElementById

    document.getElementsByName

 

07. 콘텍스트 내에서 엘리먼트 접근하기

    Element는 DOM 코어에서 중요한 요소다.

    문서 내의 모든 객체는 Element의 기본 기능과 프로퍼티를 상속받는다.

 

08. 트리 변경

    document는 모든 페이지 엘리먼트의 소유자이자 부모이다.

    새로운 Node를 추가하려면 Node 변경 메서드를 사용한다.

    insertBefore

    replaceChild

    removeChild

    appendChild 

 

11장 사용자 정의 객체 

자바스크립트에서 사용자 정의 객체를 생성하는 방법과 구문에서 프로그래밍 언어 내에서 그러한 구조를 가능케 하는 프로토타입 구조를 다룬다. 그리고 상속과 캡슐화 같은 프로그래밍 언어의 개념도 일부 다룬다. 하지만 독자가 이러한 개념을 반드시 알아야 하는 것은 아니다.

 

01. 사용자 정의 객체의 필요성

    자바스크립트는 매우 무질서한 언어이다.

    자바스크립트 확장에 있어서 중요한 것은 객체 라이브러리를 만드는 것이다.

    Ajax 서버의 복잡한 요소들을 좀 더 간편하게 관리

    DHTML의 복잡한 효과를 쉽게 할 수 있도록 지원

 

02. 자바스크립트 객체와 프로토타입

    자바스크립트 객체는 일반적으로 하나의 생성자와 여러 메서드/프로퍼티로 구성된다.

    Object는 새로운 객체를 생성할 때 프레임워크를 제공한다.

    자바스크립트에서는 Object 생성자를 이용해서 새로운 객체를 만든다.

    클래스 상속이 아닌 프로토타입을 이용해서 새로운 객체를 파생한다.

    자바스크립트의 모든 객체는 기능을 확장할 수 있도록 prototype 프로퍼티를 갖고 있다.

 

03. 사용자 정의 객체의 생성

    자바스크립트 라이브러리 개발자들은 다른 언어와 같은 방식으로 동작하게 만들려고 노력해 왔다.

    자바스크립트 엔진이 새로운 객체에 프로토타입을 생성하기 위해선 객체가 인스턴스화돼야 한다.

 

04. 객체 탐지, 캡슐화, 크로스 브라우저 객체

    모든 브라우저가 동일한 객체 모델을 사용하지 않는다.

    객체 탐지를 사용하면 탐지된 객체에 접근한다.

 

05. 생성자 체인과 상속

    상속은 다른 객체의 메서드와 프로퍼티를 새로운 객체에 병합시키는 것이다.

    apply, call 메서드를 사용하면, 다른 객체의 콘텍스트 내에서 메서드를 적용하거나 호출할 수 있다.

 

06. 일회용 객체

    특별한 내용 없음.

 

07. 고급 예외 처리 기법(try, throw, catch)

    자바스크립트의 예외처리는 객체지향적 특성을 개선시키려는 노력의 산물이다. 

 

08. 새로운 변화를 시도하는 자바스크립트

    자바스크립트 2.0 계획안은 너무나도 큰 변화를 담고 있어서 사람들을 놀라게 한다.

    미래에는 브라우저와 인터넷이 데스크톱 환경을 대체할 것이라고 보는 시각도 있다.

    자바스크립트 2.0으로로 작성한 코드를 1.x 코드로 변환해 주는 JS 2-to-JS 변환기 개발도 진행 중이다.

 

 

12장 동적 웹페이지와 CSS 

자주 사용되는 동적 HTML 효과(드래그-앤-드롭, 페이지 일부의 수축 및 확장, 가시도, 움직임과 같은 것들)에 대해 소개한다. 이를 위해서는 CSS를 알아야 한다.

 

01. 동적 HTML

    DHTML에 문제점은 브라우저의 DOM 구현 방식이 서로 다르다는 점이다.

    하지만 최근에는 Ajax의 등장으로 DHTML이 다시금 주목을 받고 있다.

 

02. DHTML: 자바스크립트, CSS, DOM

    CSS의 출발은 매우 험난하였다.

    넷스케이프와 마이크로소프트가 합작으로 CSS-P를 출시

    CSS style 프로퍼티는 style 객체를 통해서 값을 읽거나 쓸 수 있다.

    style 프로퍼티는 엘리먼트 style 속성에 인라인이나 자바스크립트를 사용하여 설정해야 한다.

 

03. 폰트와 텍스트

    font는 폰트 종류, 크기, 효과 등의 글자 모양을 지정

    text는 장식, 정렬등과 같이 문자의 모양을 지정

 

    폰트 스타일 프로퍼티

        font-family

        font-size

        font-size-adjust

        font-stretch

        font-style

        font-varient

        font-weight

 

    텍스트 프로퍼티

        color

        line-height

        text-decoration

        text-indent

        text-transform

        white-space

        direction

        text-align

        word-spacing

 

04. 위치 지정과 이동

    CSS-P (CSS Positioning)

    position: relative, absolute, static, inherit, fixed

    top / bottom

    left / right

    z-index: 0가 기본 렌더링 레이어

 

    left, top, right, bottom, z-index는 position이 absolute로 설정했을 때만 동작한다.

 

05. 크기와 클리핑

    width, height, min-width, min-height, max-width, max-height

    CSS overflow의 속성 값은 visible, hidden, scroll, auto의 네 가지가 있다.

    클리핑 구역이란 엘리먼트 콘텐츠에서 보이도록 지정한 구역을 말한다.

 

06. 디스플레이, 가시성, 투명도

    visibility: visible, hidden

    display: block, inline, none

    opacity: 0~1

 

 

13장 Ajax(Asyncronous JavaScript And XML) 

이 장에서는 최근 인기를 끈 Ajax를 소개한다. Ajax는 복잡한 자바스크립트 프로그램으로 오해하는 경우가 있는데, 그렇지 않다. Ajax를 구성한다고 할 수 있는 여러 가지 프레임워크(자바스크립트, DHTML, CSS, XML 등)에 대해 언급하고, Ajax가 유명해지는 데 가장 큰 역할을 한 "구글 맵스"에 대한 예제도 제공한다.

 

01. Ajax의 개념

    Ajax는 'Asynchronous JavaScript + XML'의 줄임말.

    제시 제임스 가렛(Jesse James Garrett) 'Ajax: A New Approach to Web Application"에서 이 기술을 소개

    DOM은 XHTML, XML, CSS와 같은 일종의 웹 표준

 

02. Ajax는 단순히 소스 코드가 아니다

    Ajax를 사용하면 브라우저 히스토리에 남지 않는다.    

    Ajax는 웹페이지와 동일한 서버 내에서만 서비스 호출할 수 있다.

    무분별한 사용을 자제하고 꼭 적절한 경우에만 사용.

 

03. Ajax의 동작 원리

    XMLHttpRequest, ActiveXObject(IE)

 

04. 첫 번째 Ajax 프로그램: Hello World!

    var xmlhttp = false;
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest( );
        xmlhttp.overrideMimeType('text/xml');
    } else if (window.ActiveXObject) {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

 

05. Ajax 객체 : XMLHttpRequest와 IE의 액티브 X 객체

    XMLHttpRequest 메서드

        open(method, url [, async, username, password])

        send(content)

 

    XMLHttpRequest 프러퍼티

        onreadystatechange

        readyState

        responseText

        responseXML

        status

        statusText

 

06. XML로 할까? 말까?

    XML을 사용할 수 있다. JSON이 간단하다.

    XML을 사용하는 경우. type을 text/xml로 반환해야 한다.

    JSON을 사용하는 경우. responseText 프로퍼티에서 JSON 형식의 데이터에 접근

 

07. 구글 맵

    구글 맵을 사용 하려면, 제일 먼저  API 키를 받아야 한다.