소프트웨어/JavaScript • Dhtml 70

jQuery Selector 를 이해해 보자.

강력한 jQuery Selector. javascript 의 원래 문법에 비해 너무도 강력한 css style 의 selecting 을 지원한다. 하지만 css 엔진을 이용하는 것이 아니고, 원래의 javascript 접근방식으로 재해석하여 동작하는 것이므로, jQuery 가 어떻게 selecting 해 올지 예상하는것이 필요하다. 그렇지 않으면 모든 dom 객체를 수십번 훑는 막장 코드가 나올지도 모른다. 일단 js 에서 dom 객체를 선택하는 방법을 생각해 보자. document.name getElementById() getElementsByName() getElementsByTagName() getElementsByClassName() getElementsByClassName() 의 경우 최신의 몇..

jQuery로 checkbox 제어(1)

일단 Body에 제어할 checkbox를 놓아두자. 1 2 3 4 스크립트 제어부분 Body안에는 제어할 체크박스를 위치하고 각각의 기능을 할 버튼을 세게 배치 하였다. 첫번째 버튼은 현재 체크되어 있는 체크박스의 수를 센다. 01번 위치의 스크립트를 보면 #btnCheck ID를 가진 버튼의 Click Event가 발생하면 실행되는 부분이다. $("input:checkbox:checked").length 는 현재 웹페이지의 checkbox의 check 된 element의 수를 센다. 02번 #("input:checkbox:not(checked).attr("checked","checked") 는 현재 웹페이지에서 체크되지 않은 [ not(checked) ] checkbox에 checked 어트리뷰트를 추..

자바스크립트 HTML에서 주석문 달지말자!

흔히 HTML상에서 자바스크립트나 다른 스크립트 언어를 사용할 경우 주석문을 처리해주는 경우가 많다. 물론 다른 스크립트의 경우 충분히 사용할 이유가 있지만 자바스크립트의 경우 그야말로 접근성만 떨어뜨리는 일이다. 사실 HTML에서 주석문으로 처리해준 이유는 자바스크립트를 정상적으로 해석하지 못하는 브라우저들이 스크립트 구문을 그냥 출력해버리는 것을 막기위한 방법으로 사용되어왔지만 현재 사용되는 브라우저중에 자바스크립트가 지원되지 않는 브라우저는 거의 없으며 만약 지원이 되지 않더라도 스크립트가 출력되지는 않는다. 오히려 주석문 보다는 로 스크립트를 감싸줄것을 권한다. 자바스크립트는 해석하지 못하더라도 HTML를 해석할 수 있는 브라우저라면 ( 그것도 해석안되면 그건 웹브라우저 자격이 없을테니 말이다. ..

웹브라우즈별 data URI scheme 테스트

제가 필요해서 몇가지를 테스트를 해 보았습니다. 즉 이미지를 http://cfile21.uf.tistory.com/image/24083B4E56E668962FDD6D"target_resize_image[]" onclick="image_window(this)" style="cursor: pointer;" src="http://cfile29.uf.tistory.com/image/2535F43B56E66896122587" height="100" width="100"> 위의 이미지는 data:image/gif;base64 의 이미지를 src 에 바로 넣어 준 경우 입니다. 위의 경우 사용가능 한 웹 브라우즈는 FF 계열(크롬, 오페라, 사파리 등) IE 8 >= 에서만 가능하였고 그 외 웹 브라우즈에서는 엔팍으..

jQuery Selector 를 이해해 보자.

강력한 jQuery Selector. javascript 의 원래 문법에 비해 너무도 강력한 css style 의 selecting 을 지원한다. 하지만 css 엔진을 이용하는 것이 아니고, 원래의 javascript 접근방식으로 재해석하여 동작하는 것이므로, jQuery 가 어떻게 selecting 해 올지 예상하는것이 필요하다. 그렇지 않으면 모든 dom 객체를 수십번 훑는 막장 코드가 나올지도 모른다. 일단 js 에서 dom 객체를 선택하는 방법을 생각해 보자. document.name getElementById() getElementsByName() getElementsByTagName() getElementsByClassName() getElementsByClassName() 의 경우 최신의 몇..

자바스크립트를 이용한 MSN다루기

// 자료실 SDK 참조하세요. var obj; var gChecker = "10331358"; // 1033 US __ 1358체커게임 var gHex = "10331003"; // __ 1003 헥사게임 function Button1_onclick() { try { obj = new ActiveXObject("MSNMessenger.P4QuickLaunch"); } catch (e) { alert(e); obj = null; } if(obj != null) obj.LaunchApp(gChecker, ""); // 메신저 실행, 게임상대 select } 다음음 예제입니다. 출처 : http://hoons.kr/board.aspx?Name=asptip&BoardIdx=1687&Page=1&Mode=2

MySpace's Performance Tracker

최근들어 유명 사이트들 내부에서 자체 사용을 위해 개발한 툴들을 오픈 소스로 전환해 발표하는 경우가 많아졌다. 웹사이트의 퍼포먼스 향상을 위해 페이지 렌더링 또는 병목현상에 대한 부분들을 검사해 대처할 수 있도록 하는 툴들 중에는 대표적으로 Yahoo의 YSlow가 있고, 최근들어 Google이 발표한 Page Speed, AOL의 Page Test, IBM의 Page Detailer, MS의 Visual Round Trip Analyzer 등이 있다. (구글의 경우에는 퍼포먼스 관련 사이트를 별도로 운영하고 있기도 하다.) 이와 비슷한 맥락에서 미국의 대표적인 SNS 사이트인 MySpace에서도 지난 6월 24일 열린 O'Reilly의 대표적인 퍼포먼스 관련 컨퍼런스인 Velocity 에서 퍼포먼스 관..

리스트가 포함된 IE 페이지 로딩 속도 향상에 대해

저만 그런 건 아닐 테고 웹페이지 만들때 리스트 많이들 쓰시죠? 얼마전에 jquery를 사용하여 페이지 리뉴얼을 해놓았는데 클라이언트에서 페이지가 뜨는데 시간이 너무 많이 걸린다고 하길래 분석하다보니 재밌는 사실을 알게 되었습니다. (물론 파이어폭스,크롬,오페라,사파리 등은 절대 느리지 않습니다.) 한페이지당 50 row의 데이터고 버튼이 1 row당 4개씩 들어갑니다. 1. 시도1 : table → div 결과 : 매우 느림(별 차이 없음) 2. 시도2 : 이미지 또는 버튼을 모두 삭제 결과 : 매우 빨라짐 3. 시도3 : 이미지 또는 버튼에서 이벤트핸들러 영역 삭제 결과 : 매우 빨라짐 4. 시도4 : 이미지 또는 버튼에서 이벤트핸들러 영역에 alert('1')로 바꿈 결과 : 매우 빨라짐 5. 시도..