공부/2011-2 : AJAX
EventListener를 사용한 하나의 이벤트에 다수 스크립트 사용
JUJA
2011. 5. 21. 10:15
2. 자바스크립트 시작하기(2)
중괄호와 세미콜론의 활용
말그대로 중괄호와 세미콜론을 사용하라는 말씀!!
-
if (something) alert('something')
-
else alert('nothing')
위와같이 하지 말고 아래처럼~
-
if (something) { alert('something'); }
-
else { alert('nothing'); }
페이지내에서 다수의 스크립트 실행하기
자바스크립트에서는 각각의 이벤트리스너를 추가/삭제 할 수 있는 메서드를 제공한다.
그러나, 불행히도 IE와 다른 브라우저들간의 차이점이 존재하고 있다.(보다 자세한 내용은 13장에서 설명한다.)
W3C 표준은 다음과 같은 addEventListener 메서드를 사용한다.
-
window.addEventListener('load', FunctionName, false);
IE는 attachEvent 메서드를 사용한다.
-
window.attachEvenet('onload', FunctionName);
위에서 눈여겨 볼 부분은 물론 메서드명이겠지만 추가/삭제 할 이벤트의 이름이 상이하다는 점이다.
IE 에서는 이벤트명 앞에 "on" 이라는 접두사가 붙는 것이다. (보다 자세한 내용은 역시나 13장에서..)
※ typeof 연산자를 사용한 디버깅
typeof 연산자를 사용하면 해당 개체의 "타입"을 알 수 있다. (string, number, boolean, object, array, function)
해당사항이 없으면 undefined를 반환한다.
※ 이벤트 리스너 관련한 크로스브라우징 사전지식
-
Opera의 경우 window객체가 아닌 document객체로 부터 이벤트 리스너를 할당받게 된다.
-
Netscape6의 경우 document객체로 부터 이벤트 리스너를 할당 받을 수 없다.
-
MAC IE5의 경우 위와 같은 메서드를 애초부터 지원하지 않기 때문에 chain multiple old-style을 사용한다.
결론적으로 다음과 같은 이벤트 리스너 추가 함수를 작성할 수 있다.
-
function addLoadListener(fn) {
if (typeof window.addEventListener != 'undefined') {
window.addEventListener('load', fn, false);
} else if (typeof document.addEventListener != 'undefined') {
document.addEventListener('load', fn, false);
} else if (typeof window.attachEvent != 'undefined') {
window.attachEvent('onload', fn);
} else {
var oldfn = window.onload;
if (typeof window.onload != 'function') {
window.onload = fn;
} else {
window.onload = function() {
oldfn();
fn();
};
}
}
}
JavaScript 디버깅
자바스크립트를 사용함에 있어서 가장 힘든점을 또 하나 꼽으라하면 바로 디버깅 작업이다.(물론 한 번에 스크립팅을 끝내면 더 좋지만;;)
-
기본적으로 사용하며 원시적인 방법은 window객체의 alert메서드를 사용하는 방법이다.(단, 무한루프 등에서의 사용은 자제하기 바란다.)
-
document객체의 title메서드나 window객체의 status를 사용하는 방법이다.
-
툴을 사용하는 방법이 있다. 추천하는 툴은 FireFox에 설치할 수 있는 FireBug이다.(FireBug를 설치하면 console.log라는 메서드를 활용하여 디버깅 할 수 있다.)
본 문서는 개인적인 summary입니다. 복제 및 스크랩시에는 출처를 꼭 밝혀주시기 바랍니다. by 아거스
