Tool
aptana:http://www.aptana.com/(강추-이클립스기반)
jsecilpse:http://www.interaktonline.com/Products/Eclipse/JSEclipse/Try-Download/
             (이클립스플러그인-위에꺼가 더좋은것 같음)
GTW : http://code.google.com/webtoolkit/

Javascript Library
Jquery : http://jquery.com/demo/thickbox/
moo.fx : http://www.moofx.mad4milk.net/
dojo toolkit : http://www.dojotoolkit.org/
mochikit : http://www.mochikit.com/about.html
JSPON(JavaScript Persistent Object Notation) : http://www.jspon.org/
qooxdoo : http://qooxdoo.org/
JavascriptLint : http://www.javascriptlint.com/
Yahoo! JavaScript Developer Center : http://developer.yahoo.com/javascript/
Prototype : http://prototype.conio.net/
script.aculo.us : http://script.aculo.us/
javascript manual :http://koxo.com/lang/js/
ajaxpattern : http://ajaxpatterns.org/
dom manual: http://developer.mozilla.org/en/docs/Gecko_DOM_Reference
                  http://developer.mozilla.org/ko/docs/Gecko_DOM_Reference

Javascript Articles
Script.aculo.us Behaviour Driven Development Testing :
http://ajaxian.com/archives/scriptaculous-behaviour-driven-development-testing
New in JavaScript 1.7 :
http://developer.mozilla.org/en/docs/New_in_JavaScript_1.7
The Decorator Pattern for JavaScript :
http://beppu.lbox.org/articles/2006/08/22/the-decorator-pattern-for-javascript
SmoothMovingLayer:
http://hyeonseok.com/pmwiki/index.php/Javascript/SmoothMovingLayer
Transparent Messages in JavaScript:
http://ajaxian.com/archives/transparent-messages-in-javascript
http://firejune.com/index.php?pl=971
A flexible slideshow:
http://www.madb.net/slideshow/
http://smoothslideshow.jondesign.net/index.html
Lessons in JavaScript Performance Optimization:
http://ajaxian.com/archives/lessons-in-javascript-performance-optimization
bytefx: simple effects:
http://ajaxian.com/archives/bytefx-simple-effects
Upgraded jQuery Spy:
http://leftlogic.com/info/articles/jquery_spy2
Dynamic Graphics in the Browser:
http://ajaxian.com/archives/dynamic-graphics-in-the-browser
Yahoo! Browser-Based Authentication:
http://ajaxian.com/archives/yahoo-browser-based-authentication
Fresh Logic Studios Scripts: OO JS
http://ajaxian.com/archives/fresh-logic-studios-scripts-oo-js
Ajax MVC:
http://ajaxian.com/archives/ajax-mvc-so-to-speak
http://www.alexatnet.com/Blog/Index/2006-08-04/javascript-model-view-controller-with-dojo-toolkit
Adventures in JavaScript testing:
http://ajaxian.com/archives/adventures-in-javascript-testing-slides
Ajax & REST :
http://www-128.ibm.com/developerworks/java/library/wa-ajaxarch/
Eliminating async Javascript callbacks by preprocessing :
http://ajaxian.com/archives/eliminating-async-javascript-callbacks-by-preprocessing
IE + JavaScript Performance Recommendations :
http://blogs.msdn.com/ie/archive/2006/08/28/728654.aspx
Dramatically improved IE7 JavaScript performance :
http://ajaxian.com/archives/dramatically-improved-ie7-javascript-performance
http://ajaxian.com/archives/improved-javascript-performance-in-ie7
Scope in JavaScript :
http://www.digital-web.com/articles/scope_in_javascript/
Ajax services :
http://www.agmweb.ca/blog/index.php?p=50
Live Filter :
http://unspace.ca/discover/livefilter/
JavaScript control of throbber :
http://sandbox.sourcelabs.com/wikiality/throbber
Objectifying JavaScript :
http://www.digital-web.com/articles/objectifying_javascript/
Prototype Carousel Widget :
http://ajaxian.com/archives/prototype-carousel-widget
Tracking Ajax Requests in Analytics
http://www.ajax-blog.com/tracking-ajax-requests-in-analytics.html
jQuery Image Gallery: Transitions, thumbnails, reflections
http://ajaxian.com/archives/jquery-image-gallery-transitions-thumbnails-reflections
정규식
http://bluebreeze.co.kr/tag/정규식
Hacking Web 2.0 Applications with Firefox
http://www.securityfocus.com/infocus/1879
Usability for Rich Internet Applications(필히읽어보세요)
http://www.digital-web.com/articles/usability_for_rich_internet_applications/
AJAX Feedback Mechanism
http://www.ibegin.com/blog/p_ajax_feedback_mechanism.html
Making Javascript DOM a Piece of Cake with the graft() Function
http://schf.uc.org/articles/2006/10/15/making-javascript-dom-a-piece-of-cake-with-the-graft-function
Ajax Loding image
http://www.ajaxload.info/
Fixing the Back Button and Enabling Bookmarking for AJAX Apps
http://www.contentwithstyle.co.uk/Articles/38/fixing-the-back-button-and-enabling-bookmarking-for-ajax-apps
Tuning AJAX
http://www.xml.com/lpt/a/2005/11/30/tuning-ajax-performance.html
Ajax indicators
http://www.napyfab.com/ajax-indicators/

CSS Library
각종CSS : http://www.dynamicdrive.com/style/  
W3C 규격 번역문 :http://trio.co.kr/
Yahoo! Design Pattern Library : http://developer.yahoo.com/ypatterns/
Yahoo! UI Library (YUI) : http://developer.yahoo.com/yui/

CSS Articles
Architecting CSS:
http://www.digital-web.com/articles/architecting_css/
transcorners:
http://inviz.ru/moo/meet-transcorners
12 Lessons for Those Afraid of CSS and Standards:
http://ajaxian.com/archives/12-lessons-for-those-afraid-of-css-and-standards
A CSS Crossfader :
http://mikeomatic.net/?p=78
Push my button :
http://www.digital-web.com/articles/push_my_button/
Details on our CSS changes for IE7
http://blogs.msdn.com/ie/archive/2006/08/22/712830.aspx
폼 css
http://www.badboy.ro/articles/2005-07-23/index.php
테이블 css
http://icant.co.uk/csstablegallery/index.php?css=2

초보 벗어나기  프로젝트 제2탄

자료구조와 알고리즘 공부하기

가.배열(Array)

1. 모두 같은 자료형에 순서가 있게 구성된 집합.
2. 인덱스로 접근가능.
3. 연산속도
   3-1.중복을 허용할경우 검색은N번 비교,중복을 허용안할땐 N/2번 비교
   3-2.중복을 허용할경우 삽입은1번 옮김,중복을 허용안할땐 1번 옮김
   3-3.중복을 허용할경우 삭게은N번 비교후 N/2번 이상 옮김,중복을 허용안할땐 N/2번
        비교후 N/2번이상 옮김.

나.리스트(List)

1. 고정된 길이의 자료들을 순차적으로 나열해 놓은 집합을 가리키는 자료구조의 추상적인개념
2. 배열과 연결리스트(LinkedList)방식이 있음(흔한 말하는 리스트는 후자를 말함)
   2-1.배열은 인덱싱이 O(1)이고 연결리스트O(n)이다.
   2-2.배열의 자료삽입은 O(n),연결리스트는 O(1)이다.
   2-3.배열의 자료삭제는 O(n),연결리스트는 O(1)이다.
   2-4.배열의 지역성은 좋다,연결리스트는 나쁨.(연결성이란 밀집도를 뜻함.)
3. 연결리스트의 종류
   3-1.단순연결리스트(singly linked-list):헤더를 기준으로 노드가 존재하며 각 노드에는
        데이터와 포인터로 구성되어있으며 단방향성을 가지고 있음.
   3-2.이중말단연결리스트(double-ended linked-list):단순연결리스트와 별다른점이 없으나
        헤더에 첫노드와 마지막노드의 포인터가 있음.
   3-3.이중연결리스트(double linked-list):단순연결리스트의 단점인 단방향을 제거하기 위해
       각노드에 앞노드,뒤노드의 포인터를 가지고 있음

다.스택과 큐(stack and queue)

1. 스택(stack):후입선출방식(Last-In-First-Out)의 데이터구조
2. 큐(queue):선입선출방식(First In First Out)의 데이터 구조
3. 원형큐(circular queue):큐를 사용시 입력후 삭제하면 데이터의 공간이 생기는데 그것을 재사용하기에 힘듬.그래서 삭제된 공간을 재사용하기 위한 나온 큐.
4. 데크(deque(double-ended queue)):스텍이나 큐와 다르게 이것은 앞뒤로
   입력과 출력이 가능.
5. 우선순위 큐(priority queue):순서가 있는 큐.

라.탐색(search)

1. 선형탐색
   1-1.일일이 탐색하기 때문에 시간이 양에 완전 비례한다.
   1-2.양이 작을때 유용.
2. 이진탐색
   2-1.분할을 한다음에 찾기때문에 시간이 많이 단축됨.(log2n)
   2-2.하지만 순서대로 있어야 하기 때문에 삭제나 수정시 엄청난 수고가 필요.
3. 이진트리탐색
4. 그래프탐색

라.기본정렬(sorting)

1. 버블정렬(bubble sort)
   1-1.처음항목에서 차례로 앞에 항목과 비교하여 정렬하는방법.
   1-2.제일 편한방식이긴하나 성능이 제일떨어짐
2. 선택정렬(selection sort)
   2-1.하나의 기준으로 차례로 비교하여 정렬하는 방식
   2-2.버블정렬과 속도는 비슷하나 자리바꿈의정도가 적다.
3. 삽입정렬(insert sort)
   3-1.어느정도 정렬된 상태에서 중간에 값이 나오면 일단 뒤에 항목을 뒤로 밀고 앞에
   끼워넣는 방법
   3-2.제일 효율적인 방법이나 어느정도 정렬된 상태에서 유리함.

ps.정렬테스트 페이지

라.개선된정렬(sorting)

1. 쉘정렬(Shell Sort)
   1-1.삽입정렬의 단점을 극복하고 장점을 살린방법
   1-2.일정한 간격(크누스간격)을 두고 여러개의 배열을 구성하여 먼저 순서를정렬한다음에
        삽입정렬로 마무리하는것.
2. 퀵정렬(Quick Sort)
   2-1.피벗이란 하나의 대표되는 수를 정하여 좌측엔 피벗보다 작은것들 오른쪽에는 높은걸들을 배치한다.
   2-2.그다음에 또다른 피벗을 정하고 재귀적은 호출로 계속하여 정렬한다.
   2-3.가장 빠른 정렬이다 하지만 중간값을 정확히 구하는게 관건
3. 기수정렬(Radix Sort)
   3-1.음수가 아닌 숫자로만 이루어진 데이터구조에서 각자리를 비교하여 정렬하는 방식
   3-2.정렬시 숫자들을 정렬테이블을 이용하기 때문에 메모리 사용이 많음.

마.재귀(recursion)

1. 자신의 함수를 다시 호출하는것
2. 장점:간단히 표현가능,소스 보기 편함
3. 단점:함수를 여러번 사용하기 때문에 메모리가 오버플로우가 생길수 있음.
4. 참고문헌:재귀적 지역정렬을 이용한 프로그램 표절 탐색

What this means is that an inner function always has access to the vars and parameters of its outer function, even after the outer function has returned.

난 전에는 javascript는 유효성체크하는 수준의 언어인줄 알고 있었다.

하지만 요즘 Ajax에 관심이 많아 공부를 하게 되니깐 생각보다 어렵고 재미있는 언어라는 사실을 알았다.

Object-oriented JavaScript
그중에서 제일 눈에 띄는 것은 자바와같이 객체처럼 사용할수 있다는것이다.

-code
function Pet(name) {
  this._name = name;
}
Pet.prototype._name;
Pet.prototype.getName = function() {
  return this._name;
}

-실행
var p = new Pet("Max");
alter(p.getName());

이걸보는순간..내가 만들었던 스크립트 코드들이 머리속을 지나가는 것은 무슨이유지?ㅡ;ㅡ


2차 충격  Inheritance

-code
function Dog(name) {
Pet.call(this, name);
}
Dog.prototype = new Pet();
Dog.prototype.wagTail = function() { alert("wagTail"); }

function Cat(name) {
Pet.call(this, name);
}
Cat.prototype = new Pet();
Cat.prototype.purr = function() { alert("Purring"); }

var d = new Dog("Max");
d.wagTail();
var c = new Cat("Fluffy");
c.purr();


실행
alert(d.getName());
alert(c.getName());

모든 객체지향프로그램에 등장하는 animal 예제 :)
위에서 보면 Pet을Cat,Dog에서 상속을 받아 getName()을 실행하고 있다.


마지막 충격.. ㅜ.ㅜ Polymorphism

-code
Pet.prototype.speak = function() {
  alert(this.getName() + " says...");
}
Dog.prototype.speak = function() {
  Pet.prototype.speak.call(this);
  alert("woof");
}
Cat.prototype.speak = function() {
  Pet.prototype.speak.call(this);
  alert("meow");
}

어떤가요? 신기 하지 않나요^^ 그리고 이글은 아래의 참고사이트에서 참고로 작성했습니다.

ps.아 그리고 java에서와 같이 public,private,privileged 란 개념이 존재하는군요.

참고사이트
Object-oriented JavaScript
Private Members in JavaScript

웹표준을 배우기 위한 세번째 책

이로써 내가 웹표준을 공부하려구 맘먹었던 책3권중 마지막 책이다.

아직 끝까지는 보지 못했지만 첫장만 보니 전에 있던 내용이다..ㅡㅡ;

그래도 다른 책과 비교했을때 칼라라 좋다 ㅎㅎ; 이제 마지막이니 잼있게 보장.

강의 바로 가기
첫강의를 들어봤는데 다행히 거의 pdf를 설명하는 내용이라 어렵진 않았습니다
(결코 다듣진 못함..ㅡㅡ;)
그리고 보니 speakernoted라는 파일이 있어 들을때 유용할것 같습니다.
세심한 배려...잼있네요. 시간날때 틈틈히 봐야겠네요.^^;
정말 자세히 설명하네요..근데 잘 듣지도 못하는데 소리도 무지 작네요..ㅡㅡ;

1. AJAX Basics & Development Tools

  -이번강의 에서는 기초적인 ajax정의와  사용예

  -간단한 예제와 디버깅툴 에 대해서 얘기하고 있다
     :Fire debug를 이용한 console logging,breakpoint를 이용한 data flow확인.

  -간단히 정리하자면 좋은점은 너무 많이 나와있고 많으니 나쁜점만 요약하면
     1.보안에 문제가 많다.
              -물론 ajax쓴다고 해서 갑자기 늘어난건 아니지만 ajax의 주요 핵심인
               javascript가 노출되어있다

     2.복잡성이 커진다
               -sever side develop만큼이나 높은 cilent develop가 필요하다

     3.디버깅,테스트,유지보수가 힘들다
               -자바스크립트는 테스트가 어렵다,모듈화가 안된다.
               -아직 초기단계라 확실한 개발방법이 없다.

     4.툴킷이나 프래임워크가 아직 부족하다
               -베타단계다...

     5.아직XMLhttpRequest는 비표준이다
                -곧 된다고 한다.

     6.구브라우져에서는 작동안한다.

     7.자바스크립트에 의존적이고 브라우져간 호환성에 문제가 있다.