'소프트웨어/JavaScript • Dhtml'에 해당되는 글 70건

  1. 2010.01.13 uki - ui
  2. 2010.01.12 Best jQuery plugins - September 2009
  3. 2009.12.18 Prototype - Element class methods
  4. 2009.12.11 IE에뮬 전체소스
  5. 2009.12.10 페이지 리소스 용량를 집계하는 북마클릿 - Statsy
  6. 2009.11.09 jQuery를 이용한 폼체크 편하게 써보자편!!!
  7. 2009.11.04 [jQuery] 간단한 텍스트 스크롤
  8. 2009.11.03 Active x 컨트롤의 메소드 확인
  9. 2009.10.22 Microsoft Ajax Minifier VS YUI Compressor
  10. 2009.10.06 링크에 http https 알아서 구분하기
2010.01.13 08:59

uki - ui

http://ukijs.org/

복잡한 UI도 쉽게~~ wave을 100라인으로....
신고
Trackback 0 Comment 0
2010.01.12 08:41

Best jQuery plugins - September 2009

http://www.ajaxline.com/jquery-plugins-september-2009
신고
Trackback 0 Comment 0
2009.12.18 10:27

Prototype - Element class methods

Prototype JavaScript framework 에서 제공하는 엘리먼트와 이벤트의 클래스 메서드 입니다. Script.aculo.usPrototype의 여러 메서드를 사용자가 편하게 이용할 수 있도록 각종 모션효과들을 만들어 줍니다. 하지만, 애써 클래스 메서드까지 익혀야 필요성이 있습니다. Script.aculo.us는 간접적인 효과만을 보여주기 때문입니다.

우리는 지금까지 자바스크립트를 사용하여 아주 간단한 기능을 구현할 때에도 크로스-브라우저 지원을 위해 각종 환경변수를 만들어야 했습니다. Prototype은 이러한 문제를 일거에 해결해 줍니다. 그리고 메서드를 사용하면 코드의 문맥이 매우 아름다워(?)집니다. 엘리먼트를 숨기기위해 더이상 알록달록한 자바스크립트를 사용할 필요가 없어진 것입니다.

자바스크립트 : document.getElementById("element").style.display = 'none';
프로토타입(노헬퍼) : $('element').setStyle({display:none});
프로토타입(헬퍼사용) : Element.hide('element');

아주 간결하지요? 엘리먼트(Element)와 이벤트(Event) 클래스 메서드(Class Method)는 모션효과에서 요긴하게 사용되는 클래스입니다. 아래는 Prototype에서 현재 지원하는 클래스 목록입니다. (헬퍼 메서드를 사용하면 다소 간편한 반면, 처리속도가 급격히 떨어진다. - 글쓴이 주)

Element class methods

* Element.visible 엘리먼트의 활성화 여부 확인
* Element.toggle 보임 또는 안보임으로 토글
* Element.hide 지정한 엘리먼트를 숨긴다.
* Element.show 지정한 엘리먼트를 보인다.
* Element.remove 지정한 엘리먼트를 지운다.
* Element.update 엘리먼트의 내용을 새로 고친다.
* Element.getHeight 엘리먼트의 높이값을 구한다.
* Element.classNames Class 이름을 리턴한다.
* Element.hasClassName Class 이름을 확인한다.
* Element.addClassName Class를 추가한다.
* Element.removeClassName Class를 지운다.
* Element.cleanWhitespace 내용없는것을 싹지운다.
* Element.empty inner HTML을 비운다.(불확실)
* Element.scrollTo 부드럽게 화면을 스크롤한다.
* Element.getStyle 엘리먼트의 Style을 가져온다.
* Element.setStyle 엘리먼트의 Style을 지정한다.
* Element.getDimensions 높이, 너비값을 가져온다.
Event class methods

* Event.observe
노드 값을 리턴하는 이벤트 헨들러를 지정한다.
* Event.stopObserving
observe 이벤트 핸들러를 지운다.
* Event.element
엘리먼트에 이벤트를 지정한다.
* Event.isLeftClick (아직 안됨)
* Event.pointerX
포인터 x좌표에 반응하는 이벤트
* Event.pointerY
포인터 y좌표에 반응하는 이벤트
* Event.stop
모든 이벤트를 중지한다.
* Event.findElement
지정한 태그이름에서 노드값을 찾으면, 방아쇠가 당겨진다?
* Event.unloadCache






















출처 : firejune
신고
Trackback 0 Comment 0
2009.12.11 16:34

IE에뮬 전체소스

루비엉아님 E-MAIL을 몰라서 여기다가 올려놓습니다. 
나중에 지울게요 ^^;; 
루비엉아님 E-MAIL을 몰라서 여기다가 올려놓습니다. 
나중에 지울게요 ^^;; 

1.첨부파일을 다운로드 받는다. (ieemu.js) 
2 페이지 상단에서 아래 소스로 호출한다. 

<script type="text/javascript" src="ieemu.js"></script> 
<script type="text/javascript"> 
if (moz) {    // set up ie environment for Moz 
    extendEventObject(); 
    emulateEventHandlers(["mousedown", "mouseup", "mousemove"]); 
    emulateAllModel(); 
    extendElementModel() 
    emulateCurrentStyle(["left", "top"]); 

</script> 

3. 잘 이용한다. ㄳㄳ 

------------------------------------------------------------------ 

ps. IE 아닌 브라우져서에서 IE의 속성/매서드를 이용할 수 있습니다. (에뮬레이션) 
    이거 만든 사람도 참 대단한 사람입니다. 

[결론] 루비엉아님이 만족한다고 하십니다.
1.첨부파일을 다운로드 받는다. (ieemu.js) 
2 페이지 상단에서 아래 소스로 호출한다. 

<script type="text/javascript" src="ieemu.js"></script> 
<script type="text/javascript"> 
if (moz) {    // set up ie environment for Moz 
    extendEventObject(); 
    emulateEventHandlers(["mousedown", "mouseup", "mousemove"]); 
    emulateAllModel(); 
    extendElementModel() 
    emulateCurrentStyle(["left", "top"]); 

</script> 

3. 잘 이용한다. ㄳㄳ 

------------------------------------------------------------------ 

ps. IE 아닌 브라우져서에서 IE의 속성/매서드를 이용할 수 있습니다. (에뮬레이션) 
    이거 만든 사람도 참 대단한 사람입니다. 

[결론] 루비엉아님이 만족한다고 하십니다.

덧글
  송효진   09-11-23 02:29  
이...이것은 악마의 유혹!
   땅그지..(은비아빠)   09-11-23 09:38  
이것은 무엇에 쓰는 물건인고? 
칼솜님을 믿고 ... 흥미 막 생기기 시작..
   날고픈쭈니   09-11-23 11:55  
파이어폭스에서 IE처럼 돌리는?? 
기존 사이트 웹표준 작업하기 귀춘할때 좋을듯..ㅡㅡ;
   logos   09-11-23 13:49  
오.. 좋네요 ^^; 

"써먹을 일없습니다" 라고 쓰고 
바로 써먹는다. ㅜㅜ
   존커피   09-11-24 13:49  
와.. 이건 뭔가요..? 누가 만들었을까~
   아는여자   09-12-07 09:56  
와우..대단한데요.

신고
Trackback 0 Comment 0
2009.12.10 08:50

페이지 리소스 용량를 집계하는 북마클릿 - Statsy


Statsy는 Stoyan Stefanov씨가 만든 웹 페이지의 성능을 가늠하기 위한 정보를 제공하는 북마클릿입니다. 자바스크립트 속성이 할당된 크기, 스타일시트 사용량, 스크립트 사용량 등 다양한 집계를 알려 줍니다. 설치방법은 아래의 statsy 링크를 북마크바로 끌어다 놓으면 됩니다.

statsy - 이 링크를 북마크바로 이동하세요.

  • JS attributes (e.g. onclick) - 노드의 onclick, onmouseover 속성 등에 사용된 코드의 바이트(bytes)
  • CSS style attributes - 노드의 style 속성에 사용된 문자열 길이의 집계
  • Inline JS - HTML에 인라인으로 작성된 script 요소에서 사용된 자바스크립트 코드의 길이를 집계
  • Inline CSS - HTML에 인라인으로 작성된 style 요소에 사용된 스타일시트 코드의 길이를 집계
  • All innerHTML - document.documentElement.innerHTML.length를 반환
  • # DOM elements - 페이지에서 사용중읜 DOM 요소의 수를 집계

출처 : http://firejune.com/1501

신고
Trackback 0 Comment 0
2009.11.09 10:18

jQuery를 이용한 폼체크 편하게 써보자편!!!

눈팅만 하다가 -ㅂ- 요번에 폼체크를 한번 -ㅂ- 편하게 만들어 보고자.

jQuery를 이용해서 -ㅂ- 폼체크 편하게 써보자편으로 -ㅂ- ㅋㅋ

파일을 공유하고자 합니다. ^ ^

이름하야!!! 두둥 : helloFormChk

이름의 의미따위는 없습니다. -ㅂ-

모든 -ㅂ- 개발자분들이 -ㅂ- 파일 받아서 -ㅂ- 깔아보구 뭐하고

하시는걸 -ㅂ- 좋아라?! 하지 않으시기 때문에 -ㅂ- 직접

링크1에 -ㅂ- 클릭해서 어떻게 쓴거야?! 확인하실수 있게 제공 해드립니다.

파일은 -ㅂ- 가져다가 쓰시고 싶으신분들을 위해 파일을 공유 합니다 ~ *

장점은 -ㅂ- if문을 안써도 된다는것 -ㅂ- 확장이 가능하다는것 helloFormChk.js

파일을 열어 정규표현식 방법이나 정규표현식이 아닌 방법으로 쉽게

자주 쓰시는 폼체크 형태를 정의하여 사용 가능합니다.

저작권 : 그딴거 없습니다.
수정/배포 : -ㅂ- 상관없습니다.

★ 개발자의 노고를 봐서 ~* 최초 개발자 이름은 남겨주세요. ㅋㅋㅋ

기타문의는 : tokssonda@nate.com

ps. 베타버젼이기에 많이 미흡합니다. 좋은 프로그램으로 거듭나도록 고수님들의
소스 지적이 많은 도움이 됩니다. 앞뒤 맞는 프로세스를 짜는 개발자들이 많이
살아가는 세상을 기리며 이만 물러가겠습니다.


출처 : http://tokssonda.cafe24.com/helloFormChk/helloFormChk.htm (242)
신고
Trackback 0 Comment 0
2009.11.04 11:45

[jQuery] 간단한 텍스트 스크롤


jQuery 플러그인(Link1)으로도 존재합니다만...

간단한 스크롤 기능이면 되는데 굳이 플러그인을 쓸필요가 없다고는 하지만
플러그인에서 따로 분리해도 될테니... ㅡ_

여하튼...

function tested() {
  var tested = $('#tested');
  tested.animate({marginTop:'-25px'}, 200, null, function() {
    tested.css('marginTop', '0px').append(tested.find('> li:first'));
  });
}
setInterval('tested()', 3000);

결과 : 다운로드1

----    ----    ----    ----

이렇게 쓰면 또 jQuery 굇수분께서 "이게 더 간단한데요?" 라고 날려주시겠지요. '~'/

출처 : http://www.tested.co.kr/board/Study/view/wr_id/27
신고
Trackback 0 Comment 0
2009.11.03 14:38

Active x 컨트롤의 메소드 확인

웹 작업을 하다보면 부득이하게 active x 컨트롤을 사용하게 되죠.

 

보통은 CHM 형태의 도움말이나 문서 자료를 보고 작업을 하지만 관리 미숙으로 인해 유실되어서 없거나  혹은 다른 용도로 설치된거지만 제공하는 기능을 활용하고 싶은 경우가 있습니다.

 

그러기 위해서는 알아야할것이 해당 컨트롤이 지원하는 이벤트와 파라메터 정보입니다.  인터페이스 정보인셈인데 이를 모르고는 활용을 할 수가 없죠.  반대로 말하자면 인터페이스만 알고 있다면 제공되는 기능들을 맘대로 사용할 수 있다는 말이 됩니다.

 

자 그럼 이 정보들을 어떻게 알아올까요? 그때 활용하기 편한것이 바로 ole view 라는 툴입니다. 

 

Visual Studio 6.0 에서는 프로그램 메뉴에 등록이 되어 있었으며 닷넷으로 넘어 와서는 따로 링크를 제공하진 않지만 Visual Studio 가 설치된 경로의 bin 폴더에 존재하게 됩니다.

 

 

1. 자 백문이 불여일견.  실행부터 해봅시다.

 

아래가 실행을 한 모습인데 다른 부분들에 대해서는 별도로 공부를 해 보시고 지금 소개하는 ACTIVE X 컨트롤을 확인하기 위해서는 Controls 항목을 클릭하시면 됩니다.

 

 

 

 

2. Controls 항목을 클릭을 하니 어디서 많이 보던 듯한 이름들이 쏟아져 나오지 않나요?  바로 자신의 PC 에 설치된 컨트롤 목록입니다.

 

 

3. 인터페이스를 확인하고자 하는 Control 을 선택합니다.

 

본인은 태그프리사의 엑티브 디자이너 에디터를 선택했다.  작업을 하다보니 에디터가 로드 완료 되었을때 처리해주고 싶은 루틴이 있는데 이때 이벤트 명을 모르는 관계로 구조를 파악하기 위해 이런 접근을 한다.  메뉴얼 파일은 안 보이고 찾아서 설치하기도 귀찮더군요.

 

컨트롤을 선택했으면 오른쪽 마우스 버튼을 눌러 봅시다.

팝업 메뉴가 나옵니다.  제일 상단의 View Type Information 항목을 선택하세요.

 

 

 

 

 

4. ITypeLib Viewer ?

 

위의 과정을 거쳐 클릭을 하면 별도로 창이 하나 더 생기면서 ITypeLib Viewer 라는 화면이 나타 납니다.

이놈이 Control 의 인터페이스 정보를 까발려주는 놈이죠.

 

태그프리 에디터가 가지는 타입 정보를 항목별로 보여줍니다.  저의 경우 경우 알고 싶은것이 에디터가 발생시키는 이벤트 정보이므로 DTWEditorEvents 를 선택한다.  파라메터나 기타 정보를 원한다면 제일 처음 항목을 선택하면 됩니다.

 

 

 

 

 

5. ITypeLib Viewer 에서 제공하는 메소드 / 파라메터 목록을 조회해 봅시다.

 

 DTWEditorEvents 항목을 선택하자 Methods 라는 항목이 나옵니다.  다시 이걸 클릭하자 태그프리에서 제공하는 이벤트 목록이 나타난다. 원하는것은 에디터 로드 마침을 알리는 이벤트이므로 대충 통밥으로 -_-);;   OnLoadComplete 라는 놈을 찾아낸다.

 

 

실제 코딩에 적용을 하자 예상대로 에디터 로딩 완료 이벤트네요.

 

뭐 물론~ 해당 컨트롤의 개발자가 네이밍룰을 자기만의 독창적인 형태로만 썼다면... -_- 이렇게 본들 쉽게 활용하긴 힘들겠죠. 

하지만 보통은 눈으로봐도 식별 가능한 이름을 많이 쓰는터라 활용도가 아주 낮지는 않으실겁니다.

 
출처 : http://www.devpia.com/MAEUL/Contents/Detail.aspx?BoardID=13&MAEULNO=6&no=280&page=1

신고
Trackback 0 Comment 0
2009.10.22 08:43

Microsoft Ajax Minifier VS YUI Compressor

마이크로소프트에서도 YUI Compressor와 같은 자바스크립트 압축도구를 발표했습니다. 이름이 "Microsoft Ajax Minifier"군요. 이 두 녀석을 간략하게 비교해 보도록 하겠습니다.

사용법:

// Ajax Minifier Best Option
ajaxmin.exe -hc input.js -o output.js

// YUI Compressor Best Option
java -jar yuicompressor-2.4.2.jar input.js -o output.js

YUI Compressor와 비교되는 Ajax Minifier의 두드러진 특징은 Hypercrunch Plus C 옵션을 제공하여 압축 비율을 더욱 높일수 있다고 합니다. 이 옵션은 한 블록에서 동일한 문자열이 반복되는 경우 자동으로 변수에 할당하는 옵션입니다. 다음 출력 결과물을 비교해 보세요.

인풋:

(function(){
  node["onclick"] = function onclick(){
    node["onclick"] = null;
    setTimeout(function() {
      node["onclick"] = onclick;
    }, 1000);
  };
})();

아웃풋:

// Ajax Minifier
(function(){var a="onclick";node[a]=function b(){node[a]=null;setTimeout(function(){node[a]=b},1e3)}})()
 
// YUI Compressor
(function(){node.onclick=function a(){node.onclick=null;setTimeout(function(){node.onclick=a},1000)}})();

YUI Compressor는 주석문을 유지시키는 방법으로 "/*! Comments */"형식으로 작성하는 것을 허용합니다만 Ajax Minifier는 이를 무시하는 군요. 이러한 룰은 YUI Compressor뿐만 아니라 다수의 JS Minifier 도구들이 지원하고 있습니다. 또다른 문제는 IE인지를 구분하기 위한 방법으로 아래와 같은 코드를 쓰는 경우가 종종 있습니다. Ajax Minifier는 이것 역시 무시합니다. 매우 조심해야 할 부분입니다.

var b = false;
/*@cc_on
b = true;
@*/
 
// will be
var b=false;b=true

두 압축기 모두 장단점이 있네요. 


신고
Trackback 0 Comment 0
2009.10.06 09:47

링크에 http https 알아서 구분하기

예: 구글 api 링크 
<script type="text/javascript" src="//www.google.com/jsapi?key=내꺼키는안갈켜줌"></script> 

요렇게 // 로만 시작하면 html 페이지의 프로토콜에 의해 알아서 구분. 

용도 : https 페이지내에서 http 를 로딩 했다가는 보안경고가 뜨고, 
자물쇠 모양을 안보여줌. 


Written by Song Hyo-Jin (shj at xenosi.de) 
License : Creative Commons - Attribution (CC-BY)
신고
Trackback 0 Comment 0


티스토리 툴바