'Javascript'에 해당되는 글 112건

  1. 2012.11.11 Javascript Single Thead or Asynchronous
  2. 2012.11.01 [CookBook] 자바스크립트 객체
  3. 2012.10.24 Jsfiddle iframe 적용 시 상단탭 수정(추가, 삭제)하기
  4. 2012.10.24 [CookBook] 미디어와 인터랙티브 애플리케이션 작성하기
  5. 2012.10.24 [CookBook] 웹 페이지 공간 다루기
  6. 2012.10.24 16 Free Javascript Code Syntax Highlighters For Better Programming
  7. 2012.10.23 [Cookbook] 페이지(DOM) 요소에 접근하기
  8. 2012.10.22 [CookBook] JS 디버깅과 에러처리
  9. 2012.10.20 [Cookbook] 폼 요소와 유효성 검사
  10. 2012.10.19 [CookBook] 브라우저 객체

Javascript Single Thead or Asynchronous





Javascript Single Thead or Asynchronous




1. JS 언어는 Single Thread 방식이며, 모든 비동기 이벤트(Event Callback,  타이머(setTimeout, setInterval)는 같은 Thread 위에서 실행된다.



2. JS 언어는 Event Loop 방식이며, 비동기 이벤트를 사용한다.(여기서 Event Loop라는 것은 동작을 요청 후 "CallBack"을 지정하여 동작이 완료되면 콜백이 실행되는 방식을 말한다.(비동기 동작 방식))






3. 모든 비동기 이벤트는 완료 시점의 순서를 보장하지 않는다.


즉, "실행"은 순서를 보장하지만, 그에 따른 완료(callback) 시점은 보장하지 않는다.(어떤 것이 먼저 종료될지 전혀 알 수 없다.)


4. 비동기 이벤트가 "실행" 되는 시점호출되는 시점이 아닌 호출되는 코드가 포함된 Javascript Code Block이 완료된 시점이다.



관련 예제 코드:


(function(){
	console.log('for start time:' + new Date().getSeconds());
	
	for (var i = 0; i < 100000; i++){
		console.log();
	}
	
	console.log('for end time:' + new Date().getSeconds());
	
	// 비동기 이벤트인 serTimeout 실행 시점은 위 순회문 종료 후 3초뒤 실행된다.
	this.setTimeout(function(){
		console.log('setTimeout start time:' + new Date().getSeconds());
	}, 3000)
})();


위 코드 중 비동기 이벤트인 setTimeout(큐에 저장된)의 실행 시점은 해당 Javascript Code Block 안의 for(순회)문 종료 후 3초뒤 실행된다.



4. setInterval 실행 코드가 이미 큐에 이미 들어가있다면, 그 다음 간격(Interval Time)으로 실행되어야 할 코드는 에 쌓이지 않고 Drop된다.(즉, 최초 Interval Timer만 큐에 쌓인다.)



5. 브라우저에 따라 차이가 존재하지만 Timer에 전달하는 최소 시간은 10ms ~ 15ms로 지정하는것이 좋다.(하위 호환성을 위해)











- 위 그림은 JS의 비동기 이벤트 실행 순서를 나타내고 있다.(Javascript Code Block --> Click Event --> Timer)





구현 코드 블럭:








- "테스트 결과" 비동기 이벤트 실행 및 완료 시점은 아래와 같습니다.



 실행: javascript code block --> onload code block --> setTimeout code block --> setTimeout code block --> setInterval code block --> setInterval code block



완료: javascript code block --> onclick code block --> setTimeout code block(무작위) --> setTimeout code block(무작위) --> setInterval code block(무작위) --> setInterval code block(무작위)





동기 / 비동기

http://kineo2k.tistory.com/29


Javascript 비동기 프로그래밍:

http://blog.naver.com/PostList.nhn?from=postList&blogId=bitofsky&categoryNo=54&currentPage=1


Javascript Timer:

http://okjungsoo.tistory.com/7954014


How Javascript Timer Work:

http://webmeme.tistory.com/entry/How-Javascript-Timer-Work




[CookBook] 자바스크립트 객체



1. 자바스크립트 객체 정의하기


함수 생성자와 new 연산자를 활용해 새로운 인스턴스를 생성한다. 또한, 인스턴스 생성 시 함수 내부로 전달되는 this(scope)에 대해 알아본다.



function User(/*string*/uid, /*string*/uname) {
    
    // this 객체 User 생성자(class)의 인스턴스가 아니라면...
    if (!(this instanceof User)) return null;

    this.uid = uid;
    this.uname = uname;

    this.constructor = this.constructor;
    return this;
}

// this.constructor === User
console.debug(new User('mohwa', 'mohwaName').uid);
console.debug(new User('mohwa', 'mohwaName').uname);
console.debug(new User('mohwa', 'mohwaName').constructor);


try
{
    // this.constructor === Window
    User('mohwa', 'mohwaName');
    console.debug(window['uid']);
    console.debug(window['uname']);
}
catch(e){
    console.debug('error=' + e.message);
}


1. 자바스크립트에서 함수는 객체이다.

http://mohwaproject.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%8A%A4%EC%BD%94%ED%94%84


2. Javascript new 단항 연산자의 객체 인스턴스 생성 프로세스

http://mohwaproject.tistory.com/entry/javascript-new-%EC%97%B0%EC%82%B0%EC%9E%90%EC%9D%98-%EA%B0%9D%EC%B2%B4-%EC%9D%B8%EC%8A%A4%ED%84%B4%EC%8A%A4-%EC%83%9D%EC%84%B1-%ED%94%84%EB%A1%9C%EC%84%B8%EC%8A%A4





2. 객체 맴버를 비공개로 만들기


"특권 메서드(Closure 활용)"란? 비공개 맴버(private)에 접근 가능하며, 그 자신은 public 인 메서드(getter(), setter()와 동일)



function User(/*string*/uid, /*string*/name) {

    // this 객체 User 생성자(class)의 인스턴스가 아니라면...
    if (!(this instanceof User)) return null;

    this.uid = uid;

    var name = name;

    // 특권 메서드
    this.getName = function () {
        return name;
    }

    this.constructor = this.constructor;

    return this;
}

console.debug(new User('mohwa', 'mohwaName').uid);
console.debug(new User('mohwa', 'mohwaName').name);
console.debug(new User('mohwa', 'mohwaName').getName());

javascript private member 
http://mohwaproject.tistory.com/entry/javascript-private-member






3. 프로토타입(객체)으로 객체 확장하기


"프로토타입" 상속을 통해 어떤 객체(내장, 생성된)든 확장 가능하다.


또한, 프로그램 안에서 재사용될 메서드(보통 프로토 타입 맴버에 할당한다. 이유는 생성자 내부의 인스턴스 맴버와 다르게 생성 시 한번만 실행되기 때문이다.)와 같은 경우 효율을 위해 인스턴스 맴버가 아닌 프로토타입 맴버에 추가시킨다.



function User1(/*string*/uid, /*string*/name) {

    // this 객체 User 생성자(class)의 인스턴스가 아니라면...
    if (!(this instanceof User1)) return null;

    // 인스턴스 맴버
    this.uid = uid;
    this.name = name;

    this.constructor = this.constructor;

    console.log('Instance members=' + this.uid);

    return this;
}

// 프로토타입 맴버(재 사용 메서드 추가)
User1.prototype.getId = function () {
    console.log('Prototype members=' + this.uid);
    return this.uid;
}

var mohwa1 = new User1('mohwa1', 'mohwaName1');
var mohwa2 = new User1('mohwa2', 'mohwaName2');
var mohwa3 = new User1('mohwa3', 'mohwaName3');

// 한번만 실행된다.
mohwa3.getId();

String.prototype.trim = function () {
    return this.replace(/^\s+|\s+$/g, '');
}

console.log('    mohwa    '.trim());


자바스크립트 프로토타입 체인

http://mohwaproject.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-prototype-%EC%B2%B4%EC%9D%B8


자바스크립트 상속(클래스 방식 상속)

http://mohwaproject.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%83%81%EC%86%8D-5






4. 객체 기능 상속하기



자바스크립트 기본 상속


function User3(/*string*/uid, /*string*/name) {

    // this 객체 User 생성자(class)의 인스턴스가 아니라면...
    if (!(this instanceof User3)) return null;

    // 인스턴스 맴버
    this.uid = uid;
    this.name = name;

    return this;
}

// 프로토타입 맴버
User3.prototype.getId = function () {
    return this.uid;
}

// 프로토타입 객체에 new User3() 객체연결(가장 기본적인 상속 구조)
function clon1(target) {

    target = target || function () { ; };

    var f = function () {
        return this;
    };

    var slice = Array.prototype.slice;
    // 객체 상속
    f.prototype = new target(slice.call(arguments, 1)[0], slice.call(arguments, 1)[1]);

    return new f();
}

var clonObject1 = clon1(User3, 'mohwa1', 'mohwaName1');
console.log(clonObject1.uid);
console.log(clonObject1.name);
console.log(clonObject1.getId);


자바스크립트 상속 1

http: //mohwaproject.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%83%81%EC%86%8D-1

        

자바스크립트 상속 2

http://mohwaproject.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%83%81%EC%86%8D-2




함수 인스턴스 맴버 빌려쓰기(상속)


function User3(/*string*/uid, /*string*/name) {

    // this 객체 User 생성자(class)의 인스턴스가 아니라면...
    if (!(this instanceof User3) && !(this instanceof clon2)) return null;

    // 인스턴스 맴버
    this.uid = uid;
    this.name = name;

    return this;
}

// 함수 인스턴스 맴버 빌려쓰기(상속)
function clon2(target) {

    if (!(this instanceof clon2)) return null;
                
    target = target || function () { ; };

    // 인스턴스 맴버 복사
    target.apply(this, Array.prototype.slice.call(arguments, 1));

    return this;
}

var clonObject2 = new clon2(User3, 'mohwa1', 'mohwaName1');
console.log(clonObject2.uid);
console.log(clonObject2.name);
// 인스턴스 맴버만 복사되었기 때문에 프로토타입 맴버인 getId() 메서드는 사용할 수 없다.
console.log(clonObject2.getId);


자바스크립트 상속 3 http://mohwaproject.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%83%81%EC%86%8D-3 

자바스크립트 상속 4 http://mohwaproject.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%83%81%EC%86%8D-4





함수(원형) 복사 및 함수 프로토타입 맴버 복사.

프로토타입 맴버(객체)에 객체를 연결하는 방법이 아닌 다른 방법으로 해당 함수가 가진 모든 맴버(인스턴스, 프로토타입)를 복사하는 방법(하지만 억지스러운 면이 없지 않다.)



function User3(/*string*/uid, /*string*/name) {

    // this 객체 User 생성자(class)의 인스턴스가 아니라면...
    if (!(this instanceof User3)) return null;

    // 인스턴스 맴버
    this.uid = uid;
    this.name = name;

    return this;
}

function clon3(target) {

    target = target || function () { ; };

    // 함수(User3 원형)복사
    var f = target;
    // 프로토타입 맴버 복사
    f.prototype = target.prototype;

    return f;
}

var clonObject3 = new (clon3(User3))('mohwa2', 'mohwaName2');
console.log(clonObject3.uid);
console.log(clonObject3.name);
console.log(clonObject3.getId);


자바스크립트 상속 5 http://mohwaproject.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%83%81%EC%86%8D-5

자바스크립트 상속 6 http://mohwaproject.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%83%81%EC%86%8D-6






프로토타입 맴버에 User3 객체를 연결했으며, "예제 1번"의 상속 계념과 거의 동일하지만 다른점으로는 "객체" 가 아닌 "함수" 를 반환해 구현 했다는 점이다.


function User3(/*string*/uid, /*string*/name) {

    // this 객체 User 생성자(class)의 인스턴스가 아니라면...
    if (!(this instanceof User3)) return null;

    // 인스턴스 맴버
    this.uid = uid;
    this.name = name;

    return this;
}

function clon4(target) {

    target = target || function () { ; };

    var f = function () {
        return this;
    };

    var slice = Array.prototype.slice;
    // User3 객체를 연결
    f.prototype = new target(slice.call(arguments, 1)[0], slice.call(arguments, 1)[1]);

    return f;
}

var clonObject4 = new (clon4(User3, 'mohwa3', 'mohwaName3'))();
console.log(clonObject4.uid);
console.log(clonObject4.name);
console.log(clonObject4.getId);​





5. 새로운 속성을 정의하여 객체 확장하기


Object.defineProperty 메서드(ECMAScript5)를 활용해 객체 속성을 정의한다.



// 속성 정의
var obj1 = {};
Object.defineProperty && Object.defineProperty(obj1, 'datas', {
    value: {
        uid: 'mohwa',
        name: 'mohwaName'
    },
    // 속성 변경 유/무
    writable: true,
    // for in 반복문 검사 유/무
    enumerable: true,
    // 이미 지정한 속성의 설정 변경 유/무
    configurable: false
});

console.log(obj1.datas.uid);
console.log(obj1.datas.name);


var obj2 = {};
// get, set 옵션을 사용 시 value 옵션을 함께 사용할 수 없다.
Object.defineProperty && Object.defineProperty(obj2, 'datas', {
    get: function () {
        return value;
    },
    set: function (newValue) {
        value = newValue;
    }
});

obj2.datas = {};
console.log(obj2.datas.uid);
console.log(obj2.datas.name);

// 여러 개의 속성 한번에 정의
var obj3 = {};
Object.defineProperties && Object.defineProperties(obj3, {
    'datas1': {
        value: {
            uid: 'mohwa1',
            name: 'mohwaName1'
        },
        writable: true
    },
    'datas2': {
        value: {
            uid: 'mohwa2',
            name: 'mohwaName2'
        },
        writable: true
    }
});

console.log(obj3.datas1.uid);
console.log(obj3.datas2.uid);


ECMAScript5 객체 속성 추가

http://dol2156.tistory.com/archive/20120516






6. 객체 속성 열거하기



var propertys = '';
var obj = {
    uid: 'mohwa',
    name: 'mohwaName'
}

// Object.keys 속성 사용(ECMAScript5)
propertys = Object.keys && Object.keys(obj).join(',');

console.log(propertys);

// Object.getOwnPropertyNames 속성 사용(ECMAScript5)
propertys = Object.getOwnPropertyNames && Object.getOwnPropertyNames(obj).join(',');

console.log(propertys);

// for in문 검색 결과(기본)
propertys = (function () {

    var ownPropety = Object.hasOwnProperty;
    var _propertys = [];
    for (var n in obj) {
        if (ownPropety.call(obj, n)) {
            _propertys.push(n);
        }
    }

    return _propertys;
})().join(',');


console.log(propertys);





7. 속성 추가 및 속성 서술자 변경 금지


Object.seal 메서드(ECMAScript5)를 활용해 객체 속성이 추가되는 것은 물론 속성 서술자가 변경되는 것을 막는다.



var obj = {
    uid: 'mohwa',
    name: 'mohwaName'
}

// 속성 추가 및 서술자 변경 금지
// 객체 속성의 추가, 삭제를 막는다.(수정은 가능)
if (Object.seal) {
    Object.seal(obj);
}

try {
    // 수정 됨
    obj.uid = 'new mohwa';
    // 추가 안됨
    obj.uid2 = 'new mohwa';

    console.log('retuls1=' + obj.uid);
    console.log('retuls1=' + obj.uid2);

    // 삭제 안됨
    delete obj.uid;

    console.log('retuls1=' + obj.uid);

}
catch (e) {
    console.log(e);
}

var obj = {
    uid: 'mohwa',
    name: 'mohwaName'
}

// 속성 불변 객체 만들기

// 객체 속성의 모든 기능(추가, 수정, 삭제)를 막는다.
if (Object.freeze) {
    Object.freeze(obj);
}

try {

    // 수정 안됨
    obj.uid = '';

    // 추가 안됨
    obj.uid2 = '';

    console.log('retuls2=' + obj.uid);
    console.log('retuls2=' + obj.uid2);

    // 삭제 안됨
    delete obj.uid;

    console.log('retuls2=' + obj.uid);


}
catch (e) {
    console.log(e);
}




8. 일회성 객체와 네임스페이스


자바스크립트 모듈 과 네임스페이스 http://mohwaproject.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B0%95%EC%A2%8C-10-%EB%AA%A8%EB%93%88-%EA%B3%BC-%EB%84%A4%EC%9E%84%EC%8A%A4%ED%8E%98%EC%9D%B4%EC%8A%A4






9. prototype.bind 함수(주어진 함수의 유효범위를 다룬다)



window.name = 'WindowName';

var objObject = {
    name: 'objObjectName',
    getNewName: function () {
        return (function (that) {
            console.log('result3=' + that.name);
        })(this);
    }
};

if (!Function.prototype.bind) {
    Function.prototype.bind = function (scope) {
             
        var fn = this;
        return fn.apply(scope, arguments);
    }
}

// 유효범위(obj11)
objObject.getNewName();
// 유효범위(window)
objObject.getNewName.bind(this)();




10. 객체 메서드 체인 패턴


자바스크립트 (Singleton, Factory, Chain, Interator) Pattern 구현 http://mohwaproject.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-Singleton-Factory-Chain-Interator-Pattern-%EA%B5%AC%ED%98%84





Jsfiddle iframe 적용 시 상단탭 수정(추가, 삭제)하기



보통 개발과 관련된 포스팅 시 원하는 소스 코드를 내용에 포함 시키기 위해 유용한 사이트인 Jsfiddle(소스 관리 및 배포)  사용하고 한다.



아래 내용은 Jsfiddle 에서 제공하는 세 가지 공유하는 방식(source, result, iframe links) 중 하나인 "iframe" 방식의 상단 메뉴를 수정(추가, 수정, 삭제)하는 방법이다.





- 제공되는 iframe URL:


"http://jsfiddle.net/zalun/NmudS/embedded/result,js,html,css/"(모든 탭 사용)

"http://jsfiddle.net/zalun/NmudS/embedded/js,html,css/"(result탭을 제외한 모든 탭 사용)

"http://jsfiddle.net/zalun/NmudS/embedded/result,html,js,css/"(js탭과 html탭 순서 변경)



위 예제와 같이 붉은 부분(result, js, html, css 등)을 원하는 순서로 수정하면 페이지에 노출되는 "iframe"의 상단탭 또한, 동일하게 변경되는 방식이다.




Jsfiddle URLhttp://jsfiddle.net/




[CookBook] 미디어와 인터랙티브 애플리케이션 작성하기

       



Chapter 14. 미디어와 인터랙티브 애플리케이션 작성





참고 사이트:


HTML5 API - Canvas - 1

http://mohwaproject.tistory.com/entry/HTML5-API-%EA%B0%95%EC%A2%8C-Canvas-1


HTML5 API - Canvas - 2

http://mohwaproject.tistory.com/entry/%E3%85%87%E3%85%81%E3%85%87


HTML5 API - Audio

http://mohwaproject.tistory.com/entry/HTML5-API-%EA%B0%95%EC%A2%8C-Audio


HTML5 API - Video - 1

http://mohwaproject.tistory.com/entry/HTML5-API-%EA%B0%95%EC%A2%8C-Video


HTML5 API - Video - 2

http://mohwaproject.tistory.com/entry/HTML5-Video-2





1. explorercanvas.js를 활용해 IE 브라우저에서 캔버스 사용하기



explorercanvas 라이브러리는 MS 가상 마크업 언어인 VML을 활용해 HTML5 요소인 canvas를 구현했다.


또한, 동적으로 canvas 요소를 생성하려면(document.createElemtn('canvas')) 아래 코드와 같이 생성된 객체를 G_vmlCanvasManager 객체로 캐스팅해 사용해야 한다는 제약을 가지고 있다.



window.onload = function () {

    if (document.all) {
                
        var ncanvas = document.createElement('canvas');
        document.body.appendChild(ncanvas);

        G_vmlCanvasManager.initElement(ncanvas);
        var ctx = ncanvas.getContext('2d');
        ctx.strokeStyle = '#000';
                
        ctx.strokeRect(0, 0, 100, 100);
                
    }
}

[CookBook] 웹 페이지 공간 다루기





Chapter 13. 웹 페이지 공간 다루기





1. 웹 페이지 영역의 크기



"현재 웹페이지의 창의 높이와 너비를 알고 싶습니다."



표준 브라우저의 경우 창의 뷰포트 영역을 알아내기 위해  window 객체 속성인 innerWidth, innerHeight  사용한다.(하지만 이때 스크롤 영역의 크기는 포함 되지 않는다.)


[- 표준 브라우저의 스크롤 영역은 window 객체 속성인 .scrollMaxX, .scrollMaxY로 알아낼 수 있다.]

  


또한, IE 브라우저의 경우 document(.documentElement, .body) 객체 속성인 clientWidth, clientHeight를 통해 알아낸다.(뷰포트 영역)



Viewport 란? 


데스크탑, 모바일 등의 모든 장치에서 Display 요소가 표현되는 영역을 말한다. 즉, 브라우저의 경우 컨텐츠가 사용자에게 표시되는 영역으로 해석할 수 있다.

 

  

 

참고 사이트:


자바스크립트 Dimension

http://mohwaproject.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-Dimension-Screen-Viewport-Scroll-Element-Mouse-Event


DOCTYPE 쿼크모드(관용모드)란?

http://mohwaproject.tistory.com/entry/Quirks-Mode%EA%B4%80%EC%9A%A9%EB%AA%A8%EB%93%9C%EB%9E%80




window.onload = function () {
    function doc() {

        var page = {

            w: top.window.scrollMaxX ? top.window.innerWidth + top.window.scrollMaxX : top.document.documentElement.scrollWidth || top.document.body.scrollWidth || 0,
            h: top.window.scrollMaxY ? top.window.innerHeight + top.window.scrollMaxY : top.document.documentElement.scrollHeight || top.document.body.scrollHeight || 0
        },

        win = {

            w: top.window.innerWidth ? top.window.innerWidth : top.document.documentElement.clientWidth || top.document.body.clientWidth || 0,
            h: top.window.innerHeight ? top.window.innerHeight : top.document.documentElement.clientHeight || top.document.body.clientHeight || 0
        };

        return {
            page: page,
            win: win
        };
    };

    console.log('page: ' + doc().page.w);
    console.log('page: ' + doc().page.h);
    // viewport
    console.log('win: ' + doc().win.w);
    console.log('win: ' + doc().win.h);
}





2. 요소의 크기 측정하기



W3C CSSOM View 모듈로 표준화된 getBoundingClientRect 메서드는 "ClientRect" 객체(실제 구현 시 TextRectangle를 반환)를 반환한다.


또한, 이 객체는 요소의 "경계 사각형"에 대한 여러 정보가 담겨 있으며, 대부분의(브라우저에 따른 차이) 경우 .top, .bottom, .right, .left 네 개의 속성을 포함하며, (테스트 결과 표준 브라우저의 경우 모든 속성을 지원하며, IE의 경우 .width, .height를 제외한 두 가지 속성만 지원한다.) 반환값으로 요소에 적용된 padding과 border 영역의 크기까지 포함된다.


        

"테스트 결과 IE(IE8 기준)의 경우(표준 브라우저 제외) "test2" 요소에 포함되지 말아야할 "test" 요소의 padding-top 수치(20px)까지 더해지는 버그가 존재했다." 즉, "test2" 요소의 반환값으로 "63px"이 반환(IE8 기준)되었다.



window.onload = function () {

    function elemDimension(elem) {

        if (!elem) return null;


        var rect = elem.getBoundingClientRect && elem.getBoundingClientRect();

        return {
            h: rect.height || rect.bottom,
            x: rect.left,
            y: rect.top
        }
    }

    alert(elemDimension(document.getElementById('test')).h);
    alert(elemDimension(document.getElementById('test2')).x);
    alert(elemDimension(document.getElementById('test2')).y);
}




3. 페이지 오버레이 추가


아래 코드와 같이 CSS를 활용해 웹 페이지 전체를 투명 레이어로 뒤덮어 구현한다.



window.onload = function () {
            
    var overlay = document.createElement('div');
    overlay.style.cssText = 'position:absolute;top:0;left:0;width:100%;height:100%;background-color:#000;opacity:.7;filter: alpha(opacity=70);z-index:9998;';
    document.body.appendChild(overlay);


    var div = document.createElement('div');
    div.style.cssText = 'position:absolute;z-index:9999';

    var img = document.createElement('img');
    img.src = 'http://static.naver.net/newscast/2012/1024/1425581178481957.jpg';

    img.onload = function () {
        div.appendChild(img);
        document.body.appendChild(div);
    }
}


16 Free Javascript Code Syntax Highlighters For Better Programming




16 Free Javascript Code Syntax Highlighters For Better Programming



개발과 관련된 블로그 포스팅  추가하려는 소스코드를 예쁘게 그려주는 16가지 라이브러리를 소개하고 있다.






[Cookbook] 페이지(DOM) 요소에 접근하기






Chapter 11. 페이지(DOM) 요소에 접근하기






1. 주어진 요소에 접근하여 부모와 자식 요소 찾기



생성된 "DOM 트리" 내부의 선택된 요소(부모/자식 관계 포함)에 접근한다.



"document 객체" 맴버(메서드(.getElementById 등) 및 속성(.childNodes 등))를 이용해 DOM 트리 내부의 각 요소에 접근할 수 있다.

   

또한, 각 브라우저 밴더들의 다양한 기술 차이 중 요소의 "앞", "뒤"에 생성되는 "공백 버그"라는 것도 존재한다.(아래 사이트를 참조)





참고 사이트:


DOM 노드 및 탐색:

http://mohwaproject.tistory.com/entry/DOM-%EB%85%B8%EB%93%9C-%ED%83%90%EC%83%89


DOM 사용 최소화 하기:

http://mohwaproject.tistory.com/entry/DOM-%EC%82%AC%EC%9A%A9-%EC%B5%9C%EC%86%8C%ED%99%94-%ED%95%98%EA%B8%B0


DOM 공백 버그 해결하기:

http://mohwaproject.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EB%A1%9C-%EA%B3%B5%EB%B0%B1-%EB%B2%84%EA%B7%B8-%ED%95%B4%EA%B2%B0%ED%95%98%EA%B8%B0


DOM 조작 API:

http://mohwaproject.tistory.com/entry/DOM-%EC%A1%B0%EC%9E%91-API






2. 선택자 API(document.querySelectorAll)를 활용한 요소 찾기


P.S: .querySelector 메서드는 .querySelectorAll(요소 컬렉션 반환)와 달리 선택된 한개의 요소만을 반환한다.







3. 주어진 클래스를 가진 모든 요소의 배열 만들기


문서 내 주어진 클래스 이름을 가진 객체 컬렉션을 반환한다.







4. 요소의 스타일 정보 가져오기


요소의 스타일 정보 접근 시 각 "브라우저 밴더"에 따라 접근 방법이 조금씩 달라진다.(아래 코드(_style 함수)를 참조)







 5. 기존 요소의 속성, 추가 및 삭제.

 

 .setAttribute 메서드를 활용해 해당 요소의 속성을 추가할 수 있다.




[CookBook] JS 디버깅과 에러처리





Chapter 10. JS 디버깅과 에러처리 





1. JS를 지원하지 않는 환경 처리 방법.


JS를 사용할 수 없는 환경(브라우저 사용자 옵션을 "사용 안함" 으로 변경시킨 경우도 포함.)에서도 페이지를 아무 문제없이 이용할 수 있게 개발해야 한다.



자바스크립트 비활성활를 위한 <noscript> 사용(<noscript> Tag는 사용성(가독성) 논란으로 인해 HTML5 스펙에는 빠져있다.):

http://mohwaproject.tistory.com/search/%EB%A6%AC%EB%94%94%EB%A0%89%EC%85%98





2. JS 에러 처리에 대해..


에러의 "특정 종류" 따라 새로운 Error() 객체를 만들어 발생시킬 수 있다.

   




- Error 객체의 예외 종류.


1. EvalError: eval을 적절하지 않게 사용할을 때 사용

2. RangeError: 숫자가 범위를 벗어났을 때 사용

3. ReferenceError: 정의되지 않은 배열을 참조했을 때 사용

4. SyntaxError: 문법 에러가 있을 때 사용

5. TypeError: 기대하지 않은 타입을 가리킬 때 사용

6. URIError: 잘못된 형식의 URI를 만났을 때 사용


7. DOMException: DOM 에러를 가리킬 때 사용

8. EventException: DOM 이벤트 예외를 가리킬 때 사용

9. RengeException: DOm Range 예외를 가리킬 때 사용


PS. 마지막 세 개의 예외 객체는 "DOM API"와 관련 있으며, 직접 사용 시 에러가 발생한다.






3. 브라우저 내장/확장 디버깅 툴 활용.

    


3.1 파이어폭스 내장 디버그: Ctrl + Shift + K 키 클릭 후 활성




파이어폭스 "파이어 버그" 플러그인(보통 디버깅 시 파이어 버그를 많이 사용한다.):

https://addons.mozilla.org/ko/firefox/addon/firebug/?src=search





3.2 IE8+ 내장 디버그: 키보드 "F12" 키 클릭 후 활성화






Safari 내장 디버그: Ctrl + p 키 클릭 후 활성화(전 브라우저에서 F12키로 통일 해줬음 하는 바램;;)








Chrome 내장 디버그: 키보드 "F12" 키 클릭 후 활성화


   

Chrome Delveloper Tool 사용법:

http://mohwaproject.tistory.com/entry/Chrome-Developer-Tool-%EC%82%AC%EC%9A%A9%EB%B2%95



[Cookbook] 폼 요소와 유효성 검사




Chapter 9. 폼 요소와 유효성 검사



이번 챕터의 경우 언어(JS)에서 가장 많이 쓰이는 기능(Form)이기도 하지만, 그 만큼 많은 정보를(웹을 통해) 쉽게 구할 수도 있는 부분이라 생각한다.

 

그래서 이번 챕터에서는 레시피 중 기초(초급에 해당하는)적인 부분을 제외한 나머지 레시피만 포스팅 하도록 한다.





1. 폼 중복 전송 방지하기


사용자가 똑같은 폼을 여러 번 반복(중복) 전송하는 것은 서비스(댓글, 결제 등)에 따라, 그 위험 수위가 다르게 나타나지만(결제에 관한 부분은 사용에게 아주 민감하게 다가온다.) 보통의 경우 반복 전송을 막아 주는 것이 좋다.(특히 AJAX 전송 시 아주 유용하게 쓰일 수 있다.)



 
  function _submit(frm){
  	
  	if (!frm) return false;
  	
  	var btn = document.getElementById('_submit_btn'); 
  	var ifrm = document.getElementById('form1_frm');
  	
  	btn.disabled = true;
  	
  	// setTimeout 메서드를 이용하여 딜레이 되는 시간을 일부러 늘렸다.
  	window.setTimeout(function(){
  		
  		frm.target = 'form1_frm';
  		frm.submit();
  		
  		ifrm.onload = function(){
			btn.disabled = false;			
  		}
  		
  	}, 2000);
  	
  	return false;
  } 



결과 페이지:

http://jsfiddle.net/mohwa/b7BV6/



[CookBook] 브라우저 객체




Chapter 8. 브라우저 객체




1. 브라우저 정보 확인하기







2. 페이지를 떠날 때(onunload) 경고하기


보통은 아래 작성된 코드만으로 해당 이벤트(onload)를 발생 시키지만, 일부 브라우저(Chrome 등)에서는 되지 않는 경우가 있다.


관련된 더 자세한 내용은 아래 사이트를 참고 하기 바란다.



참고 사이트:

Onunload 이벤트 할당 하기

http://mohwaproject.tistory.com/search/onunload






3. 색상 지원(로컬 해상도)에 따른 스타일 시트 변경


"eReader" 등의 새로운 웹 접근성 도구(디바이스)나 기기들은 우리가 웹 화면이라고 생각해온 개념을 바꾸고 있다.

일례로 4비트 흑백 화면인 킨들(구 킨들)을 들 수 있으며, 이 기기들은 웹 접근 또한 가능하기 때문이다.








4. 주소 정보 가져오기








5. Hash(#)를 활용한 동적 페이지 업데이트

 

URL 해를 활용해 페이지를 동적으로 구성할 수 있다.(각 상황에 따라 의미있는 URI(#hash)을 가질 수 있다.)







prev 1 2 3 4 5 ··· 12 next