Ssemi Laboratory

▶ 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 설치하러 가기

Written by Ssemi™(semin Seol), www.Ssemi.net

이 프로그램은 아래의 링크에서 아이디어를 얻었습니다
프로그램의 본래 목적은 불여우 부가기능(Firefox Extension)과 자신의 서버로 올리는 특징 입니다.

▶ 다운로드(Download)

invalid-file

▶ 인스톨(Install)

◎ 자신의 서버 세팅
알릭님의 소스파일을 다운로드 후 아래와 같이 변경합니다.

17번째 줄의 패턴변수를  21번째 줄 처럼 변경해주시기 바랍니다. 

getImage.php를 함께 첨부 하여  자신의 서버의 적당한 곳에 놓습니다.
자신이 올린 곳의 주소를 기억하셨다가 아래 경로를 수정합니다. (IE)

◎ 인터넷 익스플로러 aka IE (Internet Explorer)

▶ 사용법(How to use)

▶ 당부사항

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

Example Prototype Window Class in Ssemi.net

홈페이지에 있어서 메뉴는 과거에서 현재까지 레이아웃을 구성하는데 있어서 가장 기본적으로 생각해야 할 사항입니다.
요즘 웹표준 추세에 맞추어서 CSS의 중요성이 자리잡아가면서 기존에 단순 텍스트로는 안이쁜 메뉴들을 이미지로 만들어서 사용하는 것을 벗어나 메뉴들이 텍스트(Text)를 사용하되 CSS를 입혀서 이쁜 메뉴를 만들 수 있게 되었습니다.

간단하게 CSS의 기본기능만 가지고 메뉴를 만들 수 있지만, 약간의 이미지로 예쁜 메뉴를 만들 수 있습니다.
간단히 소개하는 CSS Tab Designer (Freeware) 는 CSS로 만들 수 있는 메뉴들의 표본(샘플)을 제공합니다.



위와 같이 CSS를 사용하여 이미지로 만든 메뉴가 부럽지 않게 이쁜 메뉴들을 만들어 낼 수 있습니다.

기본적으로 CSS메뉴는 UL(OL), LI 태그를 사용하여 메뉴를 구성하게 됩니다.
이 때, 텍스트로 만들어진 메뉴이기에 강조(Highlight)의 의미를 두기 위해 현재 메뉴에다가는 특별한 처리 - Bold, Coloring, Boxing, etc -를 해주게 됩니다.
이 때 이 특별한 처리를 쉽게 도와주는 것은 CSS의 Class Selector의 사용입니다.

하나의 예제를 보겠습니다.

▶ 예제 실행

위의 예제에서는 active라는 Class Selector 를 하나 사용함으로서 현재 위치를 알려주고 있습니다.
강조(Highlight)는 어려운 것이 아니었습니다.

#navPyra {

    margin: 0;

    padding: 0 0 20px 10px;

    border-bottom: 1px solid #9FB1BC;

}



#navPyra li {

    margin: 0;

    padding: 0;

    display: inline;

    list-style-type: none;

}



#navPyra a:link, #navPyra a:visited {

    float: left;

    font-size: 10px;

    font-family:verdana,helvetica,sans-serif;

    line-height: 14px;

    font-weight: bold;

    padding: 0 12px 6px 12px;

    text-decoration: none;

    color: #708491;

}



#navPyra a:link.active, #navPyra a:visited.active, #navPyra a:hover {

    color: #000;

    background: url(./pyramid.gif) no-repeat bottom center;

}

<ul id="navPyra">

    <li><a id="nav_HOME" class="active" href="cssmenu1.asp">HOME</a></li>

    <li><a id="nav_Myinfo" href="cssmenu1.asp?mode=myinfo">Myinfo</a></li>

    <li><a id="nav_Member" href="cssmenu1.asp?mode=listmember">Member</a></li>

    <li><a id="nav_FreeBoard" href="cssmenu1.asp?bid=free">FreeBoard</a></li>

    <li><a id="nav_Logout" href="cssmenu1.asp?mode=logout" >Log out!</a></li>

</ul>

▶ 예제 실행

위의 예제에서는 active라는 Class Selector 를 Javascript를 이용하여 페이지가 변경될때마다 active Class Selector를 Anchor태그에 각각 적용하는 코드입니다.

// 현재 페이지 이름과 Anchor태그에 href 속성의 값이 일치할 때, Anchor 태그에 active Class Selector를 적용합니다.

function findLocation()

{

    // HomeUrl 변수에 자신의 도메인 혹은 IP를 적습니다. ex) http://test.ssemi.net 

    // 서버측 스크립트를 이용하여 자동으로 만들 수 있습니다. <%= HTTP_HOST() %> - 아래에 별도 표기

    var HomeUrl = 'http://test.ssemi.net';

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



    if (document.getElementById('navPyra'))

    {

        var menu = document.getElementById('navPyra').getElementsByTagName("A");

        var s;



        for (i = 0 ; i < menu.length; i++)

        {

            s = menu[i].href.replace(new RegExp(HomeUrl,'gi'),'').toString().toLowerCase();



            if (s.length > 2)

            {

                if (sUrl.indexOf(s) == 0) menu[i].className = "active";

            }

        }

    }

}

<body onload="findLocation()">

<ul id="navPyra">

    <li><a id="nav_HOME" class="active" href="cssmenu1.asp">HOME</a></li>

    <li><a id="nav_Myinfo" href="cssmenu1.asp?mode=myinfo">Myinfo</a></li>

    <li><a id="nav_Member" href="cssmenu1.asp?mode=listmember">Member</a></li>

    <li><a id="nav_FreeBoard" href="cssmenu1.asp?bid=free">FreeBoard</a></li>

    <li><a id="nav_Logout" href="cssmenu1.asp?mode=logout" >Log out!</a></li>

</ul>

</body>

Function HTTP_HOST()



    Dim tmp

    tmp = "http://" & Request.ServerVariables("SERVER_NAME") 



    IF Request.ServerVariables("SERVER_PORT") <> "80" Then

        tmp = tmp & ":" & Request.ServerVariables("SERVER_PORT")

    End IF



    HTTP_HOST = tmp



End Function

▶ 예제 실행

위의 예제에서는 CSS만으로도 이미지 롤오버(Rollover)가 되는 것을 보여주고 있습니다.

/* CSS만으로 가능합니다 */

A.rollover img { border-width:0px; display:inline; } 

A.rollover img.over { display:none; } 



A.rollover:hover { border:0px } 

A.rollover:hover img { display:none; } 

A.rollover:hover img.over { display:inline; }

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

이번에 소개할 것은 간단하게 클라이언트의 정보를 모아주는 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