Category Archives: JavaScript

JavaScript

Dynamic HTML DOM Object 생성 후 event연결시 IE에서 문제가 되는 경우.

Leave a comment

샘플 코드는 귀찮아서 생략하고, 현상과 해결방안만 기술해보는데, 아래 나오는 내용은 그냥 개념적으로 적는 내용이다 보니….알아서 걸러들어야 함…;;;

ie9, chrome, firefox, opera 등에서는 dynamic dom object를 생성해서 jquery(‘#xxx’).append(dynamicObj); 형태로 추가하고, $(‘#dynamicObj’).bind(function() {xxx}) 형태로 이벤트를 걸어주면 작동하는데 전혀 문제가 없는데, IE8을 포함한 이전 버전에서는 위의 형태로 작업하는 경우 이벤트가 걸리지 않는 현상이 발생했었다.

해결책을 위해 dynamicObj에 들어갈 내용을 text형태로 변수에 담아서 append한 경우에는 정상적으로 작동하는……희한한 현상…

dynamicObj안에 들어갈 내용이 짧다면 상관없겠지만, 복잡하고 긴 내용이라면 대부분은 화면의 특정 영역에 복사될 내용을 숨겨두고 var dynamicObj = $(‘#tempObj’).clone(); 형태로 해당 내용을 복사해서 사용하는데, clone()으로 복사한 dynamicObj를 typeof로 확인해보면 일반 string형태가 아니라, Object형태로 반환되며, 이 object 형태로 반환된걸 $(‘#ddd’).append(dynamicObj); 로 추가하고, $(‘#dynamicObj’).attr() 이나, $(‘#dynamicObj’).bind()를 이용했을때, 멍청한 구버전의 IE에서 오작동을 한다.

이를 피하기 위해서 var dynamicObj = $(‘#tempObj’).clone().html(); 형태로 복사를 하게되면 object가 아니라 string 형태로 받을 수 있으며, 이를 append()하고 나서 이벤트를 걸어주면 정상 작동할 것이라 생각된다.;;;;;;
(아직 이렇게 실행은 안해봤고, 예전에 경험을 바탕으로 object가 아닌 string으로 append()하면 정상작동 했기에, 위의  방법도 정상작동하리라 추정하는 무책임한…….)

 

JavaScript

JavaScript Hoisting.

Leave a comment

참고 URL : http://www.adequatelygood.com/2010/2/JavaScript-Scoping-and-Hoisting

아래 샘플코드와 같이 작성한 경우 의도하지 않게 엉뚱한 결과를 출력할 수도 있으니…주의해야 함.

strVal = "global";
function myFunc() {
    alert(strVal);
    var strVal = "local";
    alert(strVal);
}
myFunc();

위의 코드의 실행결과를 단순히 예측해보면 화면상에 아래와 같이 출력될 것이라 생각할 수 있다.

global
local

하지만 실제 결과는 아래처럼 실행된다.

undefined
local

이는 자바스크립트에서 var로 변수를 명시적으로 선언하기 이전에도 해당 변수명을 이용할 수 있도록 유연하게, 대처하기 때문으로…… myFunc() 함수 안에서 var strVal을 선언하기 이전에 alert()으로 해당 변수를 호출하더라도, 전역변수를 사용하는 것이 아니라, var strVal가 우선적으로 myFunc()안에서 수행되기 때문에……..위의 샘플코드는 실제로 아래 코드와 같이 myFunc() 안의 var을 이용한 선언부가 먼저 수행된다.

strVal = "global";
function myFunc() {
    var strVal;
    alert(strVal);
    strVal = "local";
    alert(strVal);
}
myFunc();

JavaScript에서 var로 변수를 선언하고 값을 할당하기 전까지는 기본값으로 “undefined”가  되기 때문에 첫번째 alert에서는 undefined로 출력되고, 두번째 alert에서는 할당된 문자열이 출력된다.

간단한 내용이지만 무심코 사용하다 보면…..엉뚱한 결과가 나와서 삽질할 수 있으니, 왠만하만 변수 선언은 상단에서 한번에 미리 정의하는게 좋음.