꿈으로 가는 작은 계단

자바스크립트로 구현한 Prototype.js 프레임웍 기반 다중 선택기 API를 소개합니다.(API라고 하기에는 좀 부끄럽군요) 최초 올라로그 오픈베타 프로젝트에 사용되었습니다. 데스크탑 애플리케이션 못지않은 UI를 구현하겠다는 욕심에 조금은 억척 스럽게 만들어진 녀석입니다. 유저가 익숙하지 않다는 이유로 존속여부는 희박하지만, 라이브러리 형태로 공개하고 계속 발전시켜 나가볼 생각입니다. 조금더 다듬고 기능을 확장하여 여러환경에 적용할 수 있도록 손보았습니다. 웹 특성상 컨트롤 키를 조합하는 방식이 아닌 기본으로 활성화 되어 있는 상태입니다.(추가 예정) 전체 선택 | 선택 해제 토글 모드 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 Selected : -- Width..

Prototype Window 컴포넌트를 만든 Sebastien Gruhier씨는 프로토타입 그래픽 프레임웍(PGF)이라는 매우 흥미로운 프로젝트를 진행합니다. 모든 브라우저에서 사용할 수 있는 Prototype.js 기반 벡터(vector) 그래픽 프레임웍을 구현하는 것입니다. 이 프레임웍은 SVG(Firefox, WebKit, Opera), VML(IE), Canvas (Firefox, Safari, WebKit, Opera)등 브라우저마다 서로다른 벡터기술을 통합 사용하여 크로스-브라우즈 한다는 이론입니다.(매우 훌륭합니다!) // Create an SVG renderer var renderer = new SVGRenderer("whiteboard"); // Create a rectangle wit..

계속해서 미루어 오다가 이제서야 소개합니다. Transcorners는 대상 엘리먼트의 모서리에 라운드(또는 대각선) 효과를 부여하는 자바스크립트 효과입니다. 가볍기로 잘 알려진 mootools 자바스크립트 프레임웍을 기반으로 만들어 졌으며, 모든 브라우저에서 사용할 수 있도록 제작되었습니다. 아래는 Transcorners 사용해서 직접 그려본 라운드 효과와 예제입니다. 예제1 //모든 코너에 반지름(radius) 30 new Transcorner( 'example1', { radius: 30 }); //background:#fee; border:1px solid #a00; 스타일 속성을 지님 예제2 //모든 코너에 반지름 10 (기본값) new Transcorner( 'example2'); //backg..

정확히 말하면 ECMA 스크립트의 특징이지만 뭐… ^^ 첫번째, 객체의 생성 var arr = []; var obj = {}; var str = ""; var arr1 = [1,2,3]; var obj1 = {prop1 : 'value1', "prop2" : 'value2'}; Object는 {} 로, Array는 []로 생성할 수 있다. object 를 생성할 때 property 의 이름은 따옴표를 따로 해주지 않아도 prop1의 경우처럼 그냥 사용할 수 있다. 하지만, 혹시라도 있을지 모르는 문제점(prop1이 변수로 선언되어있다던가 하는…)을 미리 방지하기 위해서 따옴표를 붙여주도록 하는게 좋다. 단, 충돌이 없음이 확실하다면 생략해도 무방하다. 두번째, object property의 접근 var ..

링크 #1. 테스트 페이지 입니다. 테이블 소스는 엑셀에서 txt로 저장한걸 php에서 작업해서 테이블로 만든겁니다. 텍스트 뿐이고 td는 white-space:nowarp를 줘서 줄바꿈이 없게 했습니다. 업로드한 js 파일 보시면 대충이나마 주석 달았습니다. 조금 자세한 설명... 스크롤을 하려면 몇가지 방법이 있습니다. div 하나에 원본 테이블과, 고정행(첫줄)과 고정열이 있다면 div의 크기는 고정이고 테이블의 크기는 그것보다 더 큽니다. 고로 스크롤이 발생하는데, 이때 스크롤되어 화면(div 시야 내)에서 사라지는 고정행과 고정열의 top과 left를 scrollTop과 scrollLeft 로 조절합니다. 처음에는 이렇게 했지만, 이 방식은 흔들림이 심하더군요. (스크롤을 밑으로 하면 고정행이 ..

링크 IE와 FF에서의 이벤트 처리에 대한 설명을 정리해봤습니다. 틀린게 있을 수도 있습니다. 모질라 DOM레퍼런스에도 없는게 있어서, 그런 설명이 없을 수도 있습니다. 제가 쓸 일이 없다고 생각한건, 대충 설명되어잇을 수 있습니다. IE/FF(Gecko,W3C) 이벤트 설명 IE와 FF에서 이밴트를 불러 사용하는 방법(예제) 브라우저 IE FF IE&FF input 개체 함수 function fn(){ alert(event.type); } function fn(e){ alert(e.type); } function fn(e){ var evt = window.event || e; alert(evt.type); } 설명 (예제 값은 에서 onclick 이벤트로 발생시킴) 설명 순서는 내 마음대로, 관계있는 ..

재미있는 내용이라 phpschool에서 가져왔습니다. 먼저 전 선생님이 아닙니다. 누굴 가르쳐본적도 없고, 가르치면서 일을 진행한적도 없습니다. 하지만, 고니님이 주장하는것과 제가 생각하는것이 달라, 단지, 처음부터 끝까지 거짓이 진실이 되는걸 볼수 없기 때문에 150개가 넘는 댓글을 달게 된것입니다. 어쨋든 고니님의 뜻도 ----------------------------- 아뇨. 정말로 틀렸다는 것을 증명해주시기를 바라고 있습니다. 원하신다면 문서로 만들어서 대중의 심판을 받을 각오도 되어있습니다. ----------------------------- 와 같아 최대한 주관을 배제하려고 글을 올립니다. 주관이 섞인 부분은 지적해 주시면, 지우도록 하겠습니다. 만약 주관이 섞여 있다면, 위의 글들을 보시..

전에 한번 올린 것의 업그레이드 버전. 전에 올린건, 이벤트가 잃어나는 대상 자체가 움직이도록 되어있는데 이번에는 제어와 대상을 분리하였습니다.(물론 같이 할 수도 있습니다.) 이로인해 리모트 컨트롤 처럼 대상이 움직이도록 처리할 수도 있고, 윈도우 창의 titlebar처럼 그부분을 눌러야만 대상이 움직이도록 할 수 있게 되었습니다. http://mins01.zerock.net/20070305/m_board/tech.php?b_id=tech&type=read&b_idx=334&page=1&sh1_ta=b_title&sh1_str=_move&period=all 예제는 위 링크 참고 /*======================================== // js_layer_move.js // 레이어(..

아래에 글을 적다가 따로 적는 편이 나을 것 같아서 별도의 글로 작성합니다. ______________________________________________________ Tamarin 프로젝트는 모질라에서 작성중인 새로운 ECMAScript4 엔진입니다. 이 엔진은 JavaScript2와 ActionScript3 에도 사용되며 Adobe에서 인력과 액션스크립트 엔진을 기여해서 프로젝트가 꽤 가속화되고 있다고 합니다. Tamarin 프로젝트가 완성되면 Javascript도 JIT(Just in Time) 컴파일 되어 실행되기 때문에 Adobe에 의하면 최소 10배이상 빠르게 실행이 된다고 하는군요. 아... Firefox3 에도 포함될 예정이라고 합니다(이미 되었나요??). JavaScript2에서는..

[okjsp 에서 퍼왔음을 밝혀드립니다.] 요세 JS 에 대해서 왈가불가하는 분들이 많은데 아래 내용을 잘 이해하시고 , 사용하시길 바랍니다. JavaScript는 LiveScript라고 불렸어야 되지 않았나 생각됩니다. JavaScript는 Java와는 아무 관계가 없으며, Sun의 공동설립자 중 한명인 Bill Joy는 Netscape가 JavaScript라는 이름을 사용할 수 있도록 허용한 것을 후회한다고 밝힌적이 있습니다.- onjo http://www.zdnet.co.kr/news/internet/etc/0,39031281,39149821,00.htm http://www.elancer.co.kr/eTimes/page/eTimes_view.html?str=c2VsdW5vPTQ5ODQ= 자바스크립트..