무하프로젝트

자바스크립트의 활성/비활성 제어는 각 브라우저의 옵션에서 제어할 수 있다는 사실은 이미 알려진지 오래입니다.

즉, 각 클라이언트의 구미에 따라 자바스크립트가 브라우저에 의해 활성화 될수도 있고 비활성화될 수도 있다는 얘기입니다.

이런 상황에 맞도록 자바스크립트가 비활성화되어있는 경우를 보완하기 위한 여러 가지 방법을 이번 포스트에서 다뤄 보도록 

하겠습니다.

1. 대체 컨텐츠 기법

이는 가장 간단한 방법으로 자바스크립트 비활성화 시 해당 컨텐츠를 대체시키는 방법입니다.

대체 컨텐츠 기법 2

대체 css(스타일)를 적용시키는 방법

2. 페이지 리디렉션 기법

자바스크립트 비활성화 시 해당 페이지를 리디렉션 시키는 방법입니다.

리디렉션 페이지 ( http://www.enable-javascript.com/ko/ )

위 리디렉션 페이지는 자바스크립트 활성화 방안에 대해 국가별 컨텐츠를 제공하고 있습니다.

3. 링크 및 폼 전송시 자바스크립트에 의존하지 않게 개발하기

첫 번째 예제는 앵커 태그의 어트리뷰트인 href 에 "#"을 정의하고, click 이벤트 타입에는 매개변수로 전달된 페이지로 이동시키는 자바스크립트 코드 함수를 핸들러로 할당하였습니다.

그에 따른 결과로 자바스크립트 비활성화 시 해당 태그의 어트리뷰트에 정의된 기본 동작을 수행할 것이며, 의도된 결과와는 다르게 페이지의 현재 위치를 고수할 것입니다.

p.s: #은 현재 위치를 의미합니다.

자바스크립트 비활성화 시에도 의도된 결과를 나타내기 위해 아래와 같이 해당 코드를 수정합니다.

앵커 태그의 href 어트리뷰트에 이동시킬 URL을 정의하였고, 자바스크립트 함수 반환 값을 false로 정의하여 해당 이벤트 타입 안에서 태그의 기본동작을 막아 페이지 이동이 2번 수행되지 않게 만들었습니다.

엘리먼트의 기본동작을 막는 방법으로는 아래 링크를 참조 하시기 바랍니다.

자바스크립트 이벤트 - Element의 기본동작 막기

폼 전송시에도 마찬가지로 submit 이벤트 타입에 할당된 함수의 반환 값을 false로 정의하여 폼 태그가 가지고 있는 기본 동작을 막습니다.

아래는 폼 전송시 자바스크립트에 의존하지 않는 예제 코드 입니다.

코드를 이와 같이 작성하면 자바스크립트의 활성 / 비활성 유무에 상관없이 폼전송이 가능합니다.

DOM 조작 API

지난번 포스트에서 다루었던 DOM 탐색 방법에 대해 기억나십니까?

이번 시간에는 지난 포스트에 이어 노드의 생성, 변경, 삭제에 대해 다뤄보겠습니다.

아래 작성된 함수들을 각각 호출하여 DOM 구조가 어떤 식으로 변경되는지 알아보겠습니다.

해당 소스 수정 및 추가 작성(2012/10/08):

http://jsfiddle.net/zEdAp/1/

var Element = (function (win, doc) {

    var init = function () {
        return this;
    }

    init.prototype = {
        first: first,
        prev: prev,
        next: next,
        last: last,
        attr: attr,
        create: create,
        before: before,
        after: after,
        append: append,
        remove: remove
    };

    return new init();




    // Core
    function first(elem) {

        elem = elem || document.documentElement;

        return elem && elem.nodeType === 1 ? elem.firstChild : next(elem);
    };

    function prev(elem) {

        elem = elem || document.documentElement;

        do {
            elem = elem && elem.previousSibling;
        }
        while (elem && elem.nodeType !== 1)

        return elem;
    };

    function next(elem) {

        elem = elem || document.documentElement;

        do {
            elem = elem && elem.nextSibling;
        }
        while (elem && elem.nodeType !== 1)

        return elem;
    };

    function last(elem) {

        elem = elem || document.documentElement;

        return elem && elem.nodeType === 1 ? elem.lastChild : prev(elem);
    };

    // 속성 가져오기/변경하기
    function attr(elem, args, value) {

        elem = elem || document.documentElement;
        args = args || (args && args.constructor === Object ? {} : '');
        value = value || '';

        if (args.constructor === Object) {

            for (var n in args) {

                var t = { 'for': 'htmlFor', 'class': 'className'}[n] || n;

                elem.setAttribute && elem.setAttribute(t, args[n]);
            }

            return elem;
        }
        else if (args.constructor === String) {

            var t = { 'for': 'htmlFor', 'class': 'className'}[args] || args;

            if (value) {
                elem.setAttribute && elem.setAttribute(t, value);

                return elem;
            }
            else {
                return elem.getAttribute && elem.getAttribute(t) ? elem.getAttribute(t) : '';
            }
        }
    };

    // 객체 생성하기
    function create(tag, opt) {

        tag = tag || '';
        opt = opt || {};

        var elem = document.createElementNS ? document.createElementNS('http://www.w3.org/1999/xhtml', tag) : document.createElement(tag);

        return attr(elem, opt);
    };

    // 객체 속성 존재 여부
    function hasAttr(elem, n) {

        if (!elem) return false;

        n = n || '';

        return elem.getAttribute(n) ? true : false;
    };


    // 해당 객체의 이전 형제로 객체 삽입하기
    function before(before, elem) {

        if (!before || !elem) return null;

        var parent = before && before.parentNode
        , elem = getElement(elem);

        return parent.insertBefore(elem, before);
    };

    // 해당 객체의 이후 형제로 객체 삽입하기
    function after(after, elem) {

        if (!after || !elem) return null;

        var parent = after && after.parentNode
        , elem = getElement(elem);

        return insertAfter(parent, elem, after);
    };


    function insertAfter(parent, elem, after) {
        return after ? parent.insertBefore(elem, after.nextSibling) : append(parent, elem);
    };


    function getElement(elem) {

        if (!elem) return null;

        if (elem.constructor === String) {
            var t = document.createElement('div');
            t.innerHTML = elem;
            elem = t;
        }

        return elem;
    };

    // 해당 객체의 자식 추가
    function append(parent, elem) {

        parent = parent || document.documentElement;
        elem = elem || document.body;

        elem = getElement(elem);

        return parent.appendChild(elem);
    };

    // 해당 객체 삭제
    function remove(elem) {

        var parent = elem && elem.parentNode || document.documentElement;
        elem = elem || document.body;

        return parent.removeChild(elem);
    };

})(window, document);

1. 문서의 첫 번째 div 엘리먼트의 속성을 아래와 같이 변경합니다.

아래는 변경된 엘리먼트의 상태를 나타냅니다.

2. doccument.body 엘리먼트의 자식으로 신규로 생성된 div 엘리먼트를 추가 합니다.

아래는 변경된 엘리먼트의 상태를 나타냅니다.

3. 해당 엘리먼트(test1)의 자식으로 div 엘리먼트를 추가 합니다.

아래는 변경된 엘리먼트의 상태를 나타냅니다.

4. 해당 엘리먼트(test1)의 다음 형제로 div 엘리먼트를 추가 합니다.

아래는 변경된 엘리먼트의 상태를 나타냅니다.

5. 해당 엘리먼트(test1)의 이전 형제로 div 엘리먼트를 추가 합니다.

아래는 변경된 엘리먼트의 상태를 나타냅니다.

6. document.body 엘리먼트를 삭제 합니다.

아래는 변경된 엘리먼트의 상태를 나타냅니다.

작성된 DOM API를 활용하여 문서가 각각 변경되는 것을 확인해 보았으며, 또한, 위 코드를 개선하여 더욱 효율적인 API를 만들어 보시기 바랍니다.