'ITWeb/개발일반'에 해당되는 글 435건

  1. 2007.04.18 [강좌]browser detecting
  2. 2007.04.06 [강좌] debug 창
  3. 2007.04.03 [강좌] namespace (1)
  4. 2007.02.23 [위젯]설치하기
  5. 2007.02.22 [위젯]시작하기에 앞서

[강좌]browser detecting

ITWeb/개발일반 2007. 4. 18. 10:49

아마 cross browsing 을 지원하기 위해서 제일 처음 하는 부분이 browser detection 이 아닐까 생각 합니다.
browser 별로 지원하는 DOM elements 나 javascript 의 method, properties 들이 다르기 때문에 필요한 부분이 아닌가 싶습니다.
장기적으로는 개발자들 또는 사용자들을 위해서 각 vendor 들이 표준을 따라 제공해 줬으면 좋겠으나 흐.. 역시 힘든 부분 이겠죠...

- 시작하기에 앞서 우선 봅시다.
http://www.junetool.com/splv/browser.html

- 확인해야 하는 사항들
ref. http://www.comptechdoc.org/independent/web/cgi/javamanual/javanavigator.html
javascript 에 있는 navigator 객체를 확인해 보시면 쉽게 알수 있습니다.
예)
    for ( sVal in navigator ) {
        web.util.debug.log("property : " + sVal);
        web.util.debug.log("value : " + navigator[sVal]);
    }
- IE
appCodeName
    Mozilla
appName
    Microsoft Internet Explorer
cpuClass
    x86
platform
    Win32
appVersion
    4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 1.1.4322; IEMB3; IEMB3)
userAgent
    Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 1.1.4322; IEMB3; IEMB3)

- FF
platform
    Win32
appName
    Netscape
appCodeName
    Mozilla
appVersion
    5.0 (Windows; ko)
oscpu
    Windows NT 5.1
userAgent
    Mozilla/5.0 (Windows; U; Windows NT 5.1; ko; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

환경이 받혀주지 못해서..ㅡㅡ^
IE, FF 만 적어 봤습니다.

ref. http://www.quirksmode.org/js/detect.html : 요기에 보시면 좀더 다양하게 정리가 되어 있으니 참고 하셔도 좋을것 같습니다.

Trackbacks 0 : Comments 0

Write a comment


[강좌] debug 창

ITWeb/개발일반 2007. 4. 6. 15:26
간단한 prototype 만 있습니다.

http://www.junetool.com/splv/debug.html

1. 개요
alert 형태의 client debugging 이 불편해서 브라우저에 디버그 창을 띄워 놓고 메시지를 출력한다.

2. 특성
심플하다.

3. 라이센스
그런거 없고 막 가져다 쓰고 임의 수정해도 무관하다. ^^*

4. version
0.0.1

5. 첨부된 파일
*.js 는 javascript class 또는 package 이고, *.html 은 샘플 prototype

- debug.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>javascript::debug</title>
</head>
<script src="web.js"></script>
<script src="web.util.js"></script>
<script src="web.util.element.js"></script>
<script src="web.util.debug.js"> </script>
<body>
<input type=button value="DEBUG WINDOW ON/OFF" onclick="web.util.debug.init('oWebDebug')">
<br>
<input type=button value="DEBUG LOGGING" onclick="web.util.debug.log('test')">
<br>
<input type=button value="DEBUG CLEAN" onclick="web.util.debug.set_clean()">
<br>
<input type=button value="DEBUG TIME SWITCH" onclick="web.util.debug.set_time_switch()">
<br>
<input type=button value="DEBUG CLOSE SWITCH" onclick="web.util.debug.set_close()">
</body>
</html>
Trackbacks 0 : Comments 0

Write a comment


[강좌] namespace

ITWeb/개발일반 2007. 4. 3. 18:38

ajax 가 보편화 되면서 javascript 에 대한 oop 개발 방법이 많이 도입되고 있는데요.
그냥 공부도 할겸 client application 에 관심이 많은 지라 javascript 강좌를 개설 했습니다.

뭐 우선 내가 좋아라 하는 거나 만들고 있는 것 부터 시작을 할까 합니다.
그 첫번째가 namespace 인데요.

http://www.mozilla.org/js/language/js20/core/namespaces.html

If a namespace is defined as a member of a class, then the namespace must be declared static.
번역을 하자면.. (참고로 저는 영어 그닥 잘하지 못합니다.. ^^;)
클래스 맴버로 namespace 가 선언되어 있으면 선언된 namespace 는 반듯이 static 으로 선언 되어 진다.
라는 이야기 입니다.

예를 통해서 확인해 보죠..

http://www.junetool.com/splv/namespace.html

- web.js 코드
/*
   namespace 를 등록하는 이유는 javascript 의 OOP 개발 방법을 적용하기 위한 방법중 하나이다.
*/
// global class (package)
var web = web || {};

// name space function
web.namespace = function ( sNS ) {
    var aNS = sNS.split(".");
    var oTopClass = web;
    var i=0;

    for ( i=0; i<aNS.length; i++ ) {
        oTopClass[aNS[i]] = oTopClass[aNS[i]] || {};
    }
}

-- namespace.html 코드
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>javascript::namespace</title>
</head>
<script src="web.js"></script>
<script>
web.util = {
    temp:"web.util"
}

web.util.string = {
    temp:"web.util.string"
}
</script>

<body>

<script>
web.namespace("WEB.util.string");
alert(web.util.temp + "\n" + web.util.string.temp);
</script>
</body>
</html>

요기까지 허접 설명 이였구요.
좀 다듬어진걸로 해서 서버에 올리고 공유 하지요.

참 요즘 표준화에도 관심이 많습니다.
표준화에 대해서도 시간이 되는 데로 욜심히 올려 보도록 하겠습니다.

Trackbacks 0 : Comments 1
  1. Favicon of http://apps.naver.com/app/22264 BlogIcon althjs 2011.03.16 16:30 Modify/Delete Reply

    자료 찾다가 여기까지 왔네요 ^^
    잘 지내시죠? :)

Write a comment


[위젯]설치하기

ITWeb/개발일반 2007. 2. 23. 14:25

자 위젯을 사용하기 위해서 필요한 프로그램을 설치해 봅시다.

1. 준비물
    설치프로그램 : http://us.dl1.yimg.com/download.yahoo.com/dl/widgets/kr/ywidgets_kr.exe
    한글 버전으로 준비 했습니다.
    영문 버전이 필요 하신 분은..
        http://widgets.yahoo.com/win, http://widgets.yahoo.com/mac
    그 이외 준비물은 시작하기에 앞서에서 준비 하세요.

2. 설치
    ywidgets_kr.exe 를 실행 시킨다.
    대략 이미지 캡쳐는 귀차니즘에 의해서 생략하고..
    대부분 check 한 상태로 "다음" 버튼을 눌러서 진행을 한다.
    설치가 잘된 분은 아래와 같은 화면을 만나실수 있습니다.

사용자 삽입 이미지

축하합니다!! 설치성공!!


























자 시작이 반이라고 ^^* 야후! 위젯의 반을 배우셨습니다.
한번 혼자서 이것 저것 눌러 보면서 정말 구경해보시구요.
구경하기 싫으신 분은 다음 강좌가 나오기 전까지 reference pdf 파일 읽어 보셔요 ^^*
(워낙에 회사일로 바쁜척하는지라 업데이트가 늦을수도 있다는거.. ^^;)

Trackbacks 0 : Comments 0

Write a comment


[위젯]시작하기에 앞서

ITWeb/개발일반 2007. 2. 22. 11:27

제가 작성하는 위젯 강좌는 윈도우즈용 입니다.

- 야후 위젯
us - http://widgets.yahoo.com/
kr - http://kr.widgets.yahoo.com/

- 도구들 : http://kr.widgets.yahoo.com/wdata/data01.html
한글 reference 가이드 : http://img.yahoo.co.kr/widget/2006/12/KR_WidgetEngineReference.pdf
영문 reference 가이드 : http://img.yahoo.co.kr/widget/2006/05/WidgetEngineReference_3.1.pdf
한글 튜토리얼 : http://img.yahoo.co.kr/widget/2006/12/KR_WidgetCreationTutorial.pdf
영문 튜토리얼 : http://img.yahoo.co.kr/widget/2006/05/Widget_Creation_Tutorial.pdf
한글 포토샵 CS 사용가이드 : http://img.yahoo.co.kr/widget/2006/12/KR%20-%20Widget_Creation_Script.zip영문 포토샵 CS 사용가이드 : http://img.yahoo.co.kr/widget/2006/05/Widget_Creation_Script.zip
윈도우즈 컨버터 : http://img.yahoo.co.kr/widget/2006/05/WindowsConverter_1.0.zip

한글 버전은 따로 첨부 파일로도 올렸습니다.

위젯은 html, xml, javascript 등에 대한 이해가 조금만 있으셔도 만드실수 있습니다.

시작하기에 앞서 위에 문서들을 한번씩 읽어 보시고 따라해 보신 분들은 강좌를 안보셔도 직접 위젯을 만드실수 있을 겁니다.

좀더 많은 자료를 원하시는 분들은 검색을 해보세요 ^^*
http://www.google.co.kr/search?q=widget
http://kr.search.yahoo.com/search/web?p=widget

tags : Widget, 위젯
Trackbacks 0 : Comments 0

Write a comment