소프트웨어/JavaScript • Dhtml 70

오프라인 Ajax가 가지는 의미 - Google Gears

Google Developer Day에서 발표된 Google Gears(구글 기어즈)는 오프라인에서도 온라인처럼 사용할 수 있는 클라이언트 스토리지 솔루션입니다. 특징을 보면, SQLite를 이용한 데이터 처리 및 문서 검색, 서버와 클라이언트 사이의 데이터 동기화, 개발자와 사용자를 위한 JavaScript APIs를 들 수 있습니다.(Channy님의 포스트 인용) 아시다시피, Google은 Google reader에 실제로 오프라인(Offline) 서비스를 추가하였습니다. 아래의 자바스크립트 예문을 봅시다. function initDb() { if (!window.google || !google.gears) { return; } db = getDb(); run('create table if not e..

UI 자바스크립트 라이브러리 Ext JS (yui-ext)

Jack Slocum란 분이 야후의 yui((Yahoo! UI library)를 확장하여 만든 자바스크립트 라이브러리인데 자주 사용되는 기능들 거의 다 있고 아주 막강합니다. 1.0부터는 이름을 Ext JS로 바꾸고 yui에 의존하지 않고 개발을 진행할 예정인것 같습니다. 단, 아직 개발중이라 변경이 많아서 실무에 적용하기 좀 어려운것 같습니다. 그러나 자바스크립트로 웹UI개발을 하는 개발자분이시면 예제만 보셔도 개발에 많은 도움이 될것 같아서 이렇게 올립니다. 개발자 블로그: http://www.jackslocum.com/ 문서와 예제: http://www.yui-ext.com/deploy/yui-ext/docs/ 공식 사이트: http://www.extjs.com/ (첫페지만 달랑, 현재 공사중인것 ..

비쥬얼 소트

정렬과정을 비쥬얼하게 보여주는 자바애플릿입니다. 초기 정렬알고리즘 공부를 위한 좋은 툴입니다. http://teamblog.joinc.co.kr/yundream/134 Quick 정렬은 버블정렬과 함께, 가장 쉽게 응용할 수 있는 정렬기법이다. 평균적으로 O(n log n)번의 비교를 수행하며, 최악의 경우에 O(n^2)의 비교를 수행하도록 되어 있다. 정렬할 데이터가 이미 준비되어 있으며, 모든 데이터를 정렬해야 할경우 가장 빠른 수행속도를 보여주는 알고리즘으로 평가되고 있다. 소트효율가장 비효율적인 '''버블소트'''는 O(N^2)이고, 퀵소트는 평균 O(NlogN)이다. 아무리 뛰어난 정렬 알고리즘을 개발한다고 하더라도, 데이터의 갯수가 N이면 O(NlogN)보다 더 좋을 수 없다는 것이 증명되어 ..

IE Memory Leaks

IE의 메모리 릭에 관한 글입니다. 번역한 거라서 그런지 좀 덜 매끄러운 부분이 있네요. 엄밀히 말해서 JavaScript와 JScript는 다른 언어입니다. JScript가 JavaScript 버전에 대응하기는하나 다른 언어이기 때문에 허용하는 것과 그렇지 않은 것, 그리고 가비지 컬렉터와 DOM을 다루는 방법 등이 다릅니다. JavaScript를 다룸에 있어서 서로 다르다는 사실을 알고 작성하셔야 나중에 "분명히 되야하는데 안되는" 일이 발생해도 당황하지 않을 수 있습니다. JScript에서는 되는게 JavaScript에서는 안될 수도 있으며 반대로 JavaScript에서는 되는 것이 JScript에서는 안될 수도 있습니다. 인코딩, 쉼표 등 이런 문제가 될만한 소재는 매우 다양합니다. 아래에 소개해..

한 사이트에 20개 이상의 쿠키 사용 요령

우선.. 큰 사이트를 제작하다보면, 쿠키를 20개이상 사용해야만 하는 경우가 생기지만.. 쿠키의 제한은 도메인당 20개이하, 총 용량 4KB 이와 같이 쿠키를 많이 사용해야함에도 쿠키제한으로 인해 쿠키가 사라져 버리는 경우가 허다합니다. 이런 문제를 해결하고자 새로운 함수를 만들었습니다. 하나의 쿠키에 여러개의 쿠키를 적정한 구분자$diffStr(::C::) 를 이용해서 추가하는 것입니다. 사이트의 특성상 수시로 쿠키를 업데이트 해야하는 경우가 생기고, 쿠키값은 해당페이지내에서는 적용되지 않기 때문에.. 아래의 함수를 이용할 경우 쿠키를 굽는 함수는 한페이지 한번만 사용해야합니다. 단, 여러개의 쿠키를 한꺼번에 굽는 것이죠. 오늘 한 2시간에 걸쳐 만들었는데.. 이런 문제로 고민하던 차에 세션을 이용하면..

Prototype 1.5.0 커닝 페이퍼

PNG 1024x768 Cheat Sheet 와우 Jonathan Snook씨는 Prototype 1.5.0의 커닝 페이퍼(Cheat Sheet)를 만들었다. 간혹 클래스명이나 메서드명이 기억나지않아 소스를 뒤적거리곤 했는데 이것 한장있으면 끝이다. 이 커닝 페이퍼에는 Prototype 1.5.0의 모든 클래스와 메서드 그리고 매개변수의 인덱스가 연결 순서데로 기록되어있다.(내부적으로만 사용되거나 중복된 코드들은 제외되었다.) PNG 이미지 뿐만 아니라. PDF버전도 제공하고 있으니 필요하면 다운로드하자. 이 것 출력해서 벽에 붙여야겠다. 참고로 Mootools r.83의 커닝 페이퍼도 있다. 출처 : 파이어준

자바스크립으로 플래쉬 메뉴처럼...

톡박에 한번 올렸던 소스인데 조금 다듬어서 올립니다. 적절히 수정&가공하시면 멋진 메뉴가 나올거에요~ ABOUT US menu1 | menu2 | menu3 PRODUCT menu4 | menu5 | menu6 STORY menu7 | menu8 | menu9 덧글1 : 와우~ 수고하셨습니다... 야후UI라이브러리.. extjs 등등 점점 UI 쪽으로 자바스크립트가 많이 쓰이는군요... 다른분들도 참고하시라고.. 그냥 알고있는 UI관련 URL을 적어봅니다. http://extjs.com/ http://www.dhtmlgoodies.com/ http://www.dynarch.com/ http://qooxdoo.org/ http://mootools.net/ 그럼 모두 열공하세요~

Firefox용 innerText

Firefox에는 innerHTML만 있고 innerText는 없읍니다. 다음과 같이하면 대강 비슷하게는 됩니다. 출처 : phpschool 아래 내용은 덧글입니다. 읽으면서 따라 내려가면 재미가 있네요...마지막 부분에 제목에 정답이 있을지도.. http://www.phpschool.com/gnuboard4/bbs/board.php?bo_table=tipntech&wr_id=54096&page=1 Code1 : var node = document.getElementById('idText'); node.innerHTML = ''; node.appendChild(document.createTextNode('some text')); 아... 받아올때는... IE 에서는 node.innerText; FF 에서..

라운드 테이블 | 라운드 박스 | 호의각도/굵기를 내맘대로...

몇일 삽질끝에 드뎌 완성했습니다. 호의 휘어짐정도를 1 ~ 100 까지 더 늘릴수도 있음 테두리선의 굵기를 내맘대로 1~100까지 더 늘릴수도 있음 둘다 100x100으로 테스트하니 3초정도 걸리네요... 곡선 구하는 방법은 브렌헴(?) 알고리즘을 사용했습니다. 사용방법은 jjRoundBoxInit(적용할 오브젝트, 각도, 굵기, "테두리색상", "채울 색상"); 위 링크에 가보시면 예제 있구요.. 소스는 알아서 퍼가세요... ==================================== 이 스크립트는 "신의손"은 멋있다를 나타내야만 사용하실수 있습니다. ==================================== 풋... 이것도 저작권에 걸리려나... "공대여자"님꺼 도용했습니다. ㅋㅋㅋ 출처..