Ssemi Laboratory

See the table below for the differences.

I followed the above standards of Browser and solved it..

▶ Internet Explorer (IE) - 인터넷 익스플로러

인터넷 익스플로러는 가장 유명한 - 그러나 가장 쓸모 없을 수 있는 - Windows Script Debugger를 제공합니다.
MS에서는 Windows Script Debugger를 제공함으로서 IE의 스크립트 디버깅을 도와주고 있답니다.

메뉴 > 도구 > 옵션 > 인터넷 옵션 > 고급 > 탐색 으로 이동하셔서
스크립트 디버깅 사용 안함(다른응용프로그램)
스크립트 디버깅 사용 안함(Internet Explorer)
두가지를 모두 사용 해재 하시고 확인을 누르세요

 ★ Windows Script Debugger 설치하러 가기 Click!! ★ 

설치 후에는 디버깅이 필요한 페이지라면 아래와 같은 화면이 나오면서 디버거가 실행됩니다.

어떤 소스에서 에러난지 확인 후에 수정을 하실 수 있습니다. 보통 브라우저에서 부르게 되면 읽기전용으로 읽어지기 때문에, 어디서 에러가 나는지 확인을 한 후, 편집툴을 통해 에러를 수정하는 편이 편리합니다.

사실 인터넷 익스플로러는 Visual Studio(이하 VS)가 나온 이후부터는 VS로 디버깅의 기능을 대신하기 때문에 VS를 쓴다면 위 소개한 디버거 프로그램을 설치할 필요는 없습니다. 스크립트 디버거 보다 VS의 무겁지만 막강한 기능의 디버깅을 통해 보다 더 쉽게 디버깅을 할 수가 있는 것이죠. 사실 VS를 설치하지 않으면서 IE의 디버깅을 원할 때는 위 소개한 프로그램이 나름 유용하게 사용될 수 있는 것이지요.

★ IE용 콘솔 디버깅 - Companion.JS

▶ FireFox (FF) - 불여우

정말 감히 최고라고 칭하는 디버깅 도구입니다.
익스플로러에서 자바스크립트 에러가 났을 경우에 파이어폭스를 시작한 후, Firebug를 통해 에러를 파악해서 수정한 후에  인터넷 익스플로러로 다시 보는 그런 서슴없는(?) 짓도 진행할만큼 정말 멋진 툴이라고 밖에는 설명할 수 없네요.

★ Firebug 설치하러 가기

몇가지 특징을 살펴보면, 우선 가장 중요한 사항으로 브라우져에 영향을 받지 않습니다. - 크로스 브라우징이라는 것이죠.
또한 페이지 안에서 다른 URL을 불러낼 수 있습니다. 마치 IFRAME 처럼 말이죠.
그것 뿐만 아니라 창 자체를 스킨(Skinnable)화 해버려서 CSS를 수정함으로서 멋진 스킨을 만들 수 있죠.
어휴 개발자가 정말 멋진 기술을 가지고 있는지 Debug 자체를 확장해서 모듈화 해버리는 바람에 코드 자체를 수정하면서도 필요한 기능을 적당히 수정할 수 있게 만들 수 있어요.

Example Prototype Window Class in Ssemi.net

사용자(클라이언트)들의 정보를 파악하여 그들의 상황에 알맞은 좀 더 멋진 화면을 구성하거나, 코드를 만드는데 필요한 것은 역시 정보입니다.
웹이 발전하면서 사용자들의 요구에 맞게 웹페이지가 변하기 시작했습니다.
웹이 사용자의 정보를 얻어 가공하고, 사용자의 요구에 맞게 코드를 구성하고 개인화 하는데는 아주 약간의 시간이 필요했을 뿐입니다.

이번에 소개할 것은 간단하게 클라이언트의 정보를 모아주는 Javascript Function 입니다.
깔끔하고, 간단하게 웹의 클라이언트 기반에서 얻을 수 있는 쓰임새 있는 유용한 정보를 모아오는 소위 Tracker기능의 자바스크립트 합수입니다.

이미 웹 개발자들에게서 많이 알려져 있는 <IMG>이미지 태그를 통해서 스크립트를 실행하는 방법으로 정보를 얻는 방법을 다들 아시리라 생각합니다.

* 이미지 태그로 주소를 실행하는 방법을 통해 필요한 정보들을 해당 파일로 보내는 방법입니다.

<img src="http://주소/파일.php?p1=value1&p2=value2&p3=value3....." width="1" height="1" border="0" style="visibility:hidden;" />

example)
http://주소/counter.php?Doc_Url=/test.php&Ccpu=x86&
CuserAgent=mozilla/4.0 (compatible; msie 6.0; windows nt 5.2; .net clr 1.1.4322)&
Clang=ko&Cje=1&Cce=1&Cref=bookmark&Ctz=9&Ccd=32&Cswh=1280*1024&
Cid=ua=IE&ver=6.0&lang=ko&resolution=1280x1024&color_depth=32&platform=Win32&url=http%3A//www.ssemi.net/&refer=

▶ View Source

// Your site address here!

var HomeUrl = "http://ssemi.tistory.com";





function Tracker()

{

   var ustr = navigator.userAgent;

   var info = [];

   var is_safari = ustr.indexOf("Safari") != -1;

   var is_op = ustr.indexOf('Opera') != -1;

   var is_ie = ustr.indexOf('MSIE') != -1;

   var is_ff = ustr.indexOf('Firefox') != -1;

   

   if (is_op)

   {

       info['ua'] = 'Opera';

       info['ver'] = new RegExp('Opera ([0-9.]+)','gi').exec(ustr)[1];

   }        

   else if (is_ie)

   {

       info['ua'] = 'IE';

       info['ver'] = new RegExp('MSIE ([0-9.]+)','gi').exec(ustr)[1];

   }

   else if (is_ff)

   {

       info['ua'] = 'Firefox';

       info['ver'] = new RegExp('Firefox\/([0-9.]+)','gi').exec(ustr)[1];    

   }

   else if (is_safari)

   {

       info['ua'] = 'Safari';

       info['ver'] = new RegExp('Safari\/([0-9.]+)','gi').exec(ustr)[1];    

   }

   else

   {

       info['ua'] = 'Unknown';

       info['ver'] = '';

   }

   

   var refer            = document.referrer || '';

   var url                = document.location.href.replace(new RegExp(HomeUrl,'gi'),'');

   info['lang']         = navigator.userLanguage ? navigator.userLanguage : navigator.language ? navigator.language : '';

   info['resolution']     = screen.width && screen.height ? screen.width + 'x'+ screen.height : '';

   info['color_depth'] = screen.colorDepth ? screen.colorDepth : '';

   info['platform']     = navigator.platform ? navigator.platform : '';

   info['url']            = escape(url.replace(new RegExp('#.+?$','gi'),''));

   info['refer']        = escape(refer.indexOf(HomeUrl) == -1 ? refer : ''); 



   data = [];

   for (var i in info)

       data.push(i+'='+info[i]);

   

   var s = data.join("&");

}

▶ 사용자 정보

▶ 결과

ua=IE&ver=6.0&lang=ko&resolution=1280x1024&color_depth=32&platform=Win32&url=http%3A//ssemi.tistory.com/&refer=

▶ 응용하기

var ajax = new Ajax();
ajax.loadText('/Tracker.php?rnd='+Math.random(),'POST',s);


* Ajax()는 사용자 정의 개체로서 본 내용에서는 제공하지 않습니다.
(출처를 확인하거나 XMLHttpRequest/XMLHTTP를 통한 전송 코드 입니다)

▶ 마치며

• Wizz님의 블로그 | 마이위쯔블로그 통계 페이지의 소스 및 설명를 사용/인용 하였습니다 :)

Prototype 또한 Ssemi가 요긴하게 쓰고 있는 Library Collections 중 가장 쓰임새가 많은 소스 중 하나입니다

Prototype을 통해 객체들의 코딩들 + AJAX 코딩이 간편해졌지요.
사실 이해력이 부족한지, 모든 기능을 100% 발휘하지는 못 하고 있지만, 그래도 차츰 사용법에 익숙해지면서 여러부분에 대하여 넓게 활용하고 있는 편입니다.

현재 Version은 1.4.0까지 나왔으며, http://prototype.conio.net/ 에서 소스파일을 다운받으실 수 있습니다. - 제작자인 Sam Stephenson 아저씨(!)께서는 Prototype 2.0까지도 생각하고 있네요.

Prototype을 통해 관계되어진 프로젝트들(Related Projects)은 위 사이트에 등록되어 여러분들에게 보여주고 있습니다.

설명서 : Developer Notes for prototype.js - version 1.4.0 - by Sergio Pereira

아무리 많은 기능에도 역시 제가 가장 많이 사용하는건 AJAX Object 랑  $() Series네요;;;

최근에 Ssemi가 요긴하게 쓰고 있는 Library Collections 중에서 가장 쓰임새가 많은 Cross-Brower.com의 The X Library를 소개해보겠습니다.

Michael Foster라는 아저씨(!)가 만들었구요. 라이센스는 GNU LGPL입니다.
자기가 만든 X라는 장난감(my toys)를 통해 모든 사람들이 재밌고, 즐겁게 쓰길 바라는 마음에서 만들어서 알려주더라구요. - 저도 저 아저씨(!)의 마음에 캐감동(!)

invalid-file

The X Library - x.js compiled from X 4.0 with XC 0.27b

* Cross Browsing의 정의
Cross Browsing이란 적어도 표준 웹기술을 채 용하여 다른 기종 혹은 플랫폼에 따라 달리 구현되는 기술을 비슷하게 만듦과 동시에 어느 한쪽에 최적 화되어 치우지지 않도록 공통 요소를 사용하여 웹페이지를 제작하는 기법을 말하는 것이다. 또한, 지원 할 수 없는 다른 웹브라우저를 위한 장치를 구현하여 모든 웹브라우저 사용자가 방문했을 때 정보로서 의 소외감을 느끼지 않도록 하는 방법론적 가이드를 의미하는 것이다. 이는 인터넷 환경 자체가 일반 테스크톱 웹브라우저 뿐만 아니라 모바일, 임베디드 기기, 홈네트워킹용 장비 등 아주 다양한 인터넷 환경이 존재하며, 일반인, 장애자, 노약자, 어린이 등 다양한 사용자가 존재하기 때문이다.

즉 웹 서비스의 모든 잠재 사용자들이 사이트에 접근할 수 있어야 한다는 것은 매우 중요한 요소라는 것이다.

위의 크로스 브라우징을 실현할려고, 브라우져 별로 변수를 만들어 코드를 설정해주고, 나눠주던 때가 기억속에 남아있는데, 그때의 어지러운 코드들을 좀 더 깔끔하게, 좀 더 편하게 만들어주는 것이 The X Library 입니다

함께 X index를 보시죠

a: xaddeventlistener, xappendchild,
b: xbackground, xbar,
c: xcapitalize, xcardinalposition, xclientheight, xclientwidth, xclip, xcollapsible, xcolor, xcreateelement,
d: xdef, xdeg, xdeletecookie, xdisabledrag, xdisplay,
e: xellipse, xenabledrag, xevaltextarea, xevent,
f: xfenster, xfirstchild,
g: xgetcomputedstyle, xgetcookie, xgetelementbyid, xgetelementsbyattribute, xgetelementsbyclassname, xgetelementsbytagname, xgetelepropsarray, xgetelepropsstring, xgeturlarguments, xglobals,
h: xhaspoint, xheight, xhex, xhide,
i: ximgasyncwait, ximgrollsetup, xinclude, xinnerhtml, xintersection,
l: xleft, xlinearscale, xloadscript,
m: xmenu1, xmenu1a, xmenu1b, xmenu5, xmoveto,
n: xname, xnextsib, xnum,
o: xoffsetleft, xoffsettop,
p: xpad, xpagex, xpagey, xparaeq, xparent, xparentchain, xpopup, xpreventdefault, xprevsib,
r: xrad, xremoveeventlistener, xresizeto,
s: xscrollleft, xscrolltop, xselect, xsetcookie, xsetietitle, xshow, xslidecornerto, xslideto, xstoppropagation, xstr,
t: xtablecellvisibility, xtablecoldisplay, xtablecursor, xtableiterate, xtablerowdisplay, xtabpanelgroup, xtimer, xtooltipgroup, xtop, xtristateimage,
v: xversion, xvisibility,
w: xwalkeletree, xwalktree, xwidth, xwinclass, xwindow, xwinopen, xwinscrollto,
z: xzindex