Deutism

쫄깃한 웹 표준!

Archive for the Category Ajax

자바스크립트로 특정 앨리먼트에 적용된 스타일값 받아오기

웹 페이지에 정의된 모든 앨리먼트의 배경 이미지를 뽑아올 필요성을 느껴서, 언제나 그렇듯 막무가내로 자바스크립트에 손을 대기 시작했는데요..

처음에는 다음과 같이 했습니다.

element.style.backgroundImage

이랬더니 값이 없다고 나오더군요. 그래서 좀 찾아보니… css같이 외부로 스타일을 지정해 준 경우에는 값을 읽어올 수 없다고 합니다.
그래서 이것도 몰랐냐 바보야 이러면서 computedstyle 이라는게 문득 생각나면서  좀 찾아봤더니 역시 우리의 IE는

element.currentStyle.backgroundImage

이렇게 써야한다고 하더라구요…

그래서 어쩔 수 없이 분기해서 함수처럼 만들어 쓰기로 했습니다. jQuery같은 훌륭한 라이브러리쓰는 사람들은 알 필요 없겠지만; 혹시나 해서 ^_^ 남겨봅니다.

그리고 언제나 그렇듯 제 코드는 무식 그자체 입니다. 보고 욕하지마세요. 조언은 환영합니다 ㅠ_ㅠ

function getStyle(obj ,sStyle) {
	var val;
	if (obj.currentStyle) {
		val = eval("obj.currentStyle."+sStyle);
	} else {
		val = eval("window.getComputedStyle(obj,null)."+sStyle);
	}
	return val;
}

miname 님의 조언으로 코드가 좋아졌습니다!!! 감사합니다!!! ㅎㅎ
무식하면 삼대가 고생해요 ㅠ_ㅠ 아래 코멘트는 miname님의 언급이십니다*_*

아시겠지만, 보안상으로보나 성능면에서 eval is evil이잖아요.^^
property 값을 얻을 때 bracket notation([])을 쓰면 eval 사용을 피할 수 있습니다.
아래처럼요.

function getStyle(el, sStyle) {
  var computedStyle;
  if (el.currentStyle) {
  computedStyle = el.currentStyle;
  } else {
  computedStyle = window.getComputedStyle(el, null);
  }
  return computedStyle[sStyle];
 }

만약에 위 function이 여러번 반복적으로 실행되는 상황이라면 아래처럼 바꿔서 두 번째부턴 더 빠르게 실행될 수 있도록 할 수 있을 겁니다.

function getStyle(el, sStyle) {
  if (el.currentStyle) {
   getStyle = function(el, sStyle) {
     var computedStyle;
     computedStyle = el.currentStyle;
     return computedStyle[sStyle];
   };
  } else {
   getStyle = function(el, sStyle) {
     var computedStyle;
     computedStyle = window.getComputedStyle(el, null);
     return computedStyle[sStyle];
   };
  }
  getStyle(el, sStyle);
 }

p.s 파젯을 KWCAG2.0 버전으로 조금 바꾸고 있습니다 ㅎㅎ 그중에 하나만들다가 이게 나온것이에요.
아시는분들만 안다는 파젯 사용방법을 아시는 분은 새로운 파젯 개발버전인 http://mydeute.com/was/pajet.js 으로 변경해서 확인 가능합니다 ㅋㅋㅋㅋ

7년만의 장기 휴가

2001년 일을 시작하고 나서(그 당시에는 알바)처음으로 아무 계획 없는 휴가를 지내게 되었습니다. 원래 휴가를 받으면 뭐도 하고 뭐도 하고, 이런저런 계획이 많기 마련인데, 저는 뭐 하루 종일 만화보기, 카레만들어 먹기, 운동하기 등등 일상적인 목표를 만들어놓고 잠만 퍼질러 잤지요:) 뭐 나쁘지 않네요.

원래 일을 계속하는 사람은 좀만 쉬어도 좀이 쑤신다는데 저는 잘 놀 수 있는 팔자인가 봐요.. 여친님께 “나 완전 잘 놀아 계속 놀 수 있을것 같아!!”라고 말했더니 4주 연속 로또1등 당첨되면 그렇게 하라더군요………….

로또나 사러가야 겠습니다.

Flash의 ExternalInterface 와 Form태그가 만나서 짜증이납니다.

맘에 들지 않지만 회사에서는 asp.net 을 사용 하고 있습니다. asp.net이 무슨 죄겠습니까만 제가 싫어 하는 것중의 하나가
모든 컨텐츠를 form 태그 하나로 감싸고 그안에서  모든 액션을 취한다는것이죠…
그래서 소스는 지저분해지고 script의 양만 늘어납니다. 적절한곳에 적절한 태그를 사용했으면 좋겠는데 말이에요.

엄청난 글자의 빨간부분이 데이터를 담는 부분이래요=_=;;;

엄청난 글자의 빨간부분이 데이터를 담는 부분이래요=_=;;;

암튼 그런데 띵가띵가 회사에서 미투하는 도중에 메일 한통이 날아 왔는데,
운영쪽에서 웹에서 하는 게임실행이 안된다는 리포트가 왔다는거에요…
그래서 메일을 잽싸게 봤더니 스크립트 오류가 나는거네요?

오류화면

오류화면

여러가지 test를 해본 결과 flash에서 사용되는 자바스크립트 호출하는 함수인 “ExternalInterface” 가 문제 인것을 찾았습니다.
Form 태그내에서 Flash를 사용하며 그 Flash에서 ExternalInterface를 호출하면 DOM 에서 플래시를 찾지못해 스크립트가 에러가 나더라구요.
form 태그안에 왜 플래시가 들어가는지는 아까도 설명드렸죠;;

물론 Flash Player의 모든 버전에서 나는 문제는 아니고 특정 버전인 8~9초반 사이에서 나는 문제였습니다. 또한  IE에서만 발생하는 문제구요.(IE 버전과는 상관없습니다.)

해결방법은 두가지가 있습니다.

한가지는 Flash Player의 버전업을 유도합니다
보통 IE에서의 플래시 사용방법을 보면 object태그에 codebase로 Flash Player의 버전을 명시하게 되어있습니다.

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="980" height="216" id="MainNavFla">

저 부분을 변경해 주는거죠. 지금은 8.0이니 뭐 9.0이나 10.0으로 변경하면되겠죠?

또 한가지 방법은 플래시 오브젝트를 window의 객체에 바로 연결해주면 된다 하는군요.. (코멘트에 있습니다. jwatkins님의 코멘트)
요즘 대부분 플래시를 자바 스크립트로 활성화하니 활성화 코드뒤에

window.플래시오브젝트ID = document.getElementById("플래시오브젝트ID ");

같은 방법으로 해결을 할 수 있다고 합니다. (저는 이방법으로 해결을 했습니다.)
위의 코드로 보면 이렇게 되겠지요…

window.MainNavFla = document.getElementById("MainNavFla");

또한 ExternalInterfaceOpera 브라우저에서는 아직도 사용 할 수 없더라구요. 아예 플래시가 보이질 않아요..

저번에도 말했었지만 플래시가 가지는 웹상에서의 영향력 만큼이나, 신중하게 그리고 에러가 없게 플래시 플레이어를 배포했으면 하는 바램이 있어요..

String.replace(“a”,”b”) 은 a 를 한번만 찾아요;

자바스크립트에서 문자열에서 “a” 가 나오면 “b“로 교체해주는 함수가 바로 replace()인데;
이 자식은 한번만 딸랑 바꿔주더라는!!
그걸 해결 하려면 정규식을 사용 하거나 “a“가 안나올때까지 반복해서 replace 해주는 프로토타입 함수를 만들어서 사용 정규식의 내부 로직은 모르겠으나 정규식 쓰는게 나아 보인다;
정규식을 사용해 보면

String.replace(/(a)/ig,“b”);

replaceAll이라는 프로토타입 함수를 만들면

String.prototype.replaceAll = function( str, replacements )
{
    var temp = this;
    while( temp.indexOf( str ) != -1 )
        temp = temp.replace( str, replacements );
    return temp;
}

이렇게 사용할수도 있죠잉
이런 초보적인 것도 모르면서 자바스크립트 하는 불쌍한 나같은 놈도 있으니 낙담말고 다들 열심히 삽시다;

자바스크립트 완벽 가이드 출간

JavaScript: The Definitive Guide 5/E 가 번역 되어 한국에 출판이 되게 되었습니다.
책표지
오라일리의 시리즈치고는 한국판은 디자인이 꽤나 어색 하지만 자바 코뿔소는 그대로 있습니다:) (한빛미디어만 오라일리의 디자인을 사용할수 있는건가요;;;?)
이 책을 얼마나 기다려왔는지 모릅니다. 자바 스크립트 핵심 가이드(개정3판) : JavaScript The Definitive Guide 를 너무 사고 싶은데 절판이되서 못구하고 다행히 회사 형이 한개 가지고 있어서 빌려서 보고 그러던 기억이 새록새록 나는군요; 이제는 책이 개정판으로 나왔으니 너무 기분이 좋아요..
이걸보고 실력이 더좋아지길 기도합니다.. 그 전에 집에 있는책들부터 좀;;;;;