2011.04.21 01:06

jQuery Project - jquery.org

The jQuery Project manages all of the jQuery projects, including jQuery Core, jQuery UI, Sizzle and QUnit.

jQuery.com - jquery.com

jQuery is a new kind of JavaScript Library.

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

Fancybox - fancybox.net

FancyBox is a tool for displaying images, html content and multi-media in a Mac-style "lightbox" that floats overtop of web page.
It was built using the jQuery library. Licensed under both MIT and GPL licenses

  • Can display images, HTML elements, SWF movies, Iframes and also Ajax requests
  • Customizable through settings and CSS
  • Groups related items and adds navigation.
  • If the mouse wheel plugin is included in the page then FancyBox will respond to mouse wheel events as well
  • Support fancy transitions by using easing plugin
  • Adds a nice drop shadow under the zoomed item

jQueryUI - jqueryui.com

jQuery UI provides abstractions for low-level interaction and animation, advanced effects and high-level, themeable widgets, built on top of the jQuery JavaScript Library, that you can use to build highly interactive web applications.

jQuery Plugin Lib.

Fancy Countdown - http://www.sarpdoruktahmaz.com/projects/fancy-countdown

mb.jQuery - http://pupunzi.com/

Visual Lightbox - http://visuallightbox.com/

SKENGDON - http://labs.skengdon.com/

웹 개발자들을 위한 웹 리소스 전문 사이트 - http://www.webstorymaker.com/category/license/mit/

jQuery Plugins

  • Accessibility Stylesheet and text size switcher.
  • Accordion Accordion interface with a few variations.
  • AlphaNumeric Prevent users from inputing special characters.
  • Ajax File Upload Loading graphic displays while file is uploaded.
  • appendDom Write HTML with JavaScript, great for displaying Ajax results.
  • appendText Converts text into post friendly html.
  • blockUIEXCELLENT Create a message overlay while blocking user interaction on elements or the entire page.
  • BogoFolders View text through a 'file menu' interface.
  • BogoTabs Basic tabbed interface.
  • Bubble Demo highlights selected table rows in groups of tables..
  • Calendar Aids date entry.
  • Checkbox manipulation Select, unselect and toggle checkboxes.
  • ChiliEXCELLENT Syntax highlighting for displaying code on webpages.
  • Choose Component Select data from a table row through a modal window.
  • Click Menu Generates dropdown menus.
  • clueTip Tooltips with many variations.
  • Color Animations Add color animations to div backgrounds.
  • Color Picker Pass in color choices and attach custom events to each color block.
  • columnHover Highlight table rows and columns.
  • columnManager Add, remove and toggle table columns.
  • ContextMenu - Menus that show when you right click specified elements.
  • Confirmer Adds a listener to check if user confirms their action.
  • CycleEXCELLENT Add flash-like image effects to rotating image galleries.
  • date picker Aids date entry.
  • Delicious Read delicious bookmarks from a user to display on a webpage.
  • Dimensions Get accurate window and document attributes across browsers.
  • Equalize Columns Make columns the same height as the longest column.
  • FCKEditor Plugin Adds a rich text editor to a textarea.
  • Field Expand the ability to retrieve and set values in forms.
  • FormEXCELLENT Change HTML forms to submit via Ajax.
  • Gallery Viewer JavaScript image gallery.
  • getUrlParam Function to get url parameters.
  • Google Feed Plugin Display any RSS feed to a webpage.
  • Gradient Adds a gradient to a div without needing an image.
  • Grid Column Sizing Table column draggable resizing.
  • Grid Row Sizing Expand and collapse table rows.
  • hoverIntent Prevents unintended hover events.
  • idTabs Add tabbed interface to a website.
  • Impromptu Create modal windows and messages.
  • jQuery Localisation Applies localisation packages based on the user's language preference.
  • jBox UI dialog widget.
  • jCalendar Aids selecting of dates inline on a page.
  • jCarousel Lite Simple carousel for images and HTML content.
  • jCodeViewer Syntax highlighting for displaying code on webpages.
  • jdMenu Hierarchical Menu Generates dropdown menus.
  • jEditable Live editing of elements on a webpage.
  • jFeed XML feed parser.
  • jPanView Replaces big images with a zoom viewer in HTML.
  • jqDnR Drag'n'Resize elements on a page.
  • jQMaps Interact with Google maps.
  • jqModal Display notices, dialogs, and modal windows in a web browser.
  • Treetable Make a tree view out of an HTML table.
  • Tree ViewEXCELLENT Tree view controls.
  • Suggest Add autocomplete to input fields.
  • YAV Form validation library.
  • jqUploader Provides a status bar for uploading images.
  • jScrollPane Customize your scrollbars.
  • jTagEditor EXCELLENT Turn a textarea into a tag editor.
  • jVariations Create a control panel to manipulate elements on a page.
  • Keyboard Navigation Dynamically determine which element to focus on based on it's position on the screen.
  • labelOver Overlay labels over an input field.
  • LavaLamp Navigation menu with a 'lava' effect.
  • Lazy Load Only load images that are in the current window.
  • Live Query Adds event listeners to elements.
  • Masked Input Add mask to inputs to aid user data entry (phone numbers, etc).
  • Media EXCELLENT Unobtrusive conversion of standard markup into rich media content.
  • Extra selectors for JQuery Add more selectors to jQuery.
  • Mousewheel Mousewheel event handler.
  • Mousehold Event Add repeating event as the user holds down the mouse.
  • Multiple File Upload Select multiple files one by one as it adds to a queue list.
  • newsticker Create a fading news ticker.
  • Password Strength Meter Indicator to show the strength of a users password.
  • PopupWindow Creates an preview popup of destination link.
  • Query String Object Useful for sending URL parameters.
  • Select box manipulation Remove and add options from a select list or dropdown in many ways.
  • selectCombo Tool for making dependant dropdowns with Ajax.
  • Star Rating Generates star rating from input fields
  • Grid Dynamic ajax grid control.
  • slideViewer Image gallery as slides.
  • Spoilers Hide content behind an image until user action is taken.
  • tableHover Row and column highlighting with variations.
  • tableFilter Search box is added to each column header to filter table.
  • tablesorter Client side table sorting.
  • Taconite EXCELLENT Easily make multiple DOM updates using the results of a single AJAX call.
  • Textgrad Add gradients to whole blocks of text.
  • Time Entry Sets an input field up to accept a time value.
  • Tooltip Add tooltips from title page.
  • Validation EXCELLENT Add live validation to forms.
  • WYMeditor EXCELLENT Web-based XHTML WYSIWYM editor.
  • Zoomi Zoomable thumbnails.
  • XSLT Transform XML/XSL from JavaScript.
  • XAP Ajax library. 

jQuery Documents

jQuery로 Ajax 개발을 단순화 하기
Ajax와 DOM 스크립팅을 쉽게 하는 방법 - http://www.ibm.com/developerworks/kr/library/x-ajaxjquery.html

Posted by 부니기
2008.06.05 12:18

세상에서 가장 오해가 많은 프로그래밍 언어

Douglas Crockford | www.crockford.com
번역: Kwang Yul Seo | skyul.tistory.com

Mocha, LiveScript, JScript, ECMAScript 등으로도 불리는 JavaScript는 세상에서 가장 유명한 프로그래밍 언어 중에 하나입니다. 사실상 세상의 모든 개인 컴퓨터에 최소한 하나 이상의 JavaScript 인터프리터가 설치되어 있고 활발하게 사용되고 있습니다. 이러한 JavaScript는 인지도는 전적으로 월드와이드웹(WWW)의 스크립트 언어라는 역할 덕택입니다.
이런 인지도에도 불구하고, JavaScript가 매우 동적이며 객체지향의 범용 프로그래밍 언어라는 사실을 아는 이는 드뭅니다. 이런 사실이 어떻게 비밀이 될 수 있었을까요? 왜 이 프로그래밍 언어는 잘못 이해된 것일까요?


Java- 접두사를 보면 JavaScript가 Java와 어떤 식으로는 연관 관계가 있을 것처럼 보입니다. 즉, JavaScript는 Java의 서브셋이거나 기능이 부족한 버전의 Java라는 인상을 줍니다. 이 이름은 혼란을 주기 위해 의도적으로 지어진 것으로 보이는데, 이런 오해가 혼란을 야기했습니다. JavaScript는 인터프리트되는 자바가 아닙니다. 자바 자체가 인터프리트되는 언어입니다. JavaScript는 Java와는 다른 언어입니다.
Java가 C와 문법적으로 유사하듯이 JavaScript는 Java와 유사합니다. 하지만 Java가 C의 서브셋이 아닌 것처럼 JavaScript도 Java의 서브셋이 아닙니다. JavaScript는 Java(초기의 Oak)과 원래 의도했던 응용 프로그램 부분에서는 Java보다 더 뛰어납니다.
JavaScript는 Java의 고향인 썬마이크로시스템즈(Sun Microsystems)에서 개발된 것이 아닙니다. JavaScript는 네스케이프(Netscape)에서 개발되었습니다. 원래는 LiveScript라고 불렸는데, 이 이름은 그다지 혼란스럽지 않았지요.
-Script 접미사는 JavaScript가 실제 프로그래밍 언어가 아니라 프로그래밍 언어보다 약한 스크립트 언어라는 인상을 줍니다. 하지만 이는 전문화의 문제입니다. C 언어와 비교해 보면, JavaScript는 표현력과 역동성(dynamism)을 위해 성능을 희생한 것입니다.

C 언어의 옷을 입은 Lisp

JavaScript의 C 언어 같은 문법(중괄호와 투박한 for 문을 포함)은 JavaScript가 일반적인 프로시저형 언어로 보이게 합니다. 이는 잘못된 오해인데, 왜냐하면 JavaScript는 C나 Java보다는 Lisp or Scheme와 같은 함수형 언어와 더 유사점이 많기 때문입니다. JavaScript는 리스트 대신에 배열이 있고, 속성 리스트(역주: 일종의 해시테이블) 대신에 오브젝트가 있습니다. 함수가 제1클래스이고, 클로저도 있습니다. 또한 괄호를 맞출 필요 없이 람다(lamda, 익명 함수)를 사용할 수도 있습니다.


JavaScript는 네스케이프 네비게이터에서 동작하도록 설계되었습니다. 네스케이프에서의 성공은 JavaScript가 거의 모든 웹브라우저에서 표준 장치가 되도록 만들었습니다. 이는 JavaSciript가 웹 개발언어라는 이미지를 고정해 버렸습니다. JavaScript는 프로그래밍 언어계의 죠지 리브스(George Reeves), 슈퍼맨을 연기한 배우가 되었습니다. 하지만 JavaScript는 웹과 관련되지 않은 대규모의 응용 프로그램 개발에도 잘 어울리는 언어입니다.

움직이는 목표물

JavaScript는 첫 번째 버전은 매우 빈약했습니다. 예외 처리, 내부 함수, 상속 등의 기능이 없었습니다. 현재의 JavaScript는 완전한 객체지향 프로그래밍 언어입니다. 하지만 언어에 대한 여러 의견들은 여전히 예전의 성숙하지 못한 모습에 바탕을 두고 있습니다.
JavaScript 언어에 대한 관리 책임을 맡고 있는 ECMA 위원회는 비록 그 의도는 좋지만 이미 너무 많은 버전이 존재한다는 JavaScript의 가장 큰 문제점을 악화시키는 확장 작업을 하고 있습니다.

설계 오류

완벽한 프로그래밍 언어는 없습니다. JavaScript도 설계 오류를 포함하고 있습니다. + 를 자동 타입 변환과 함께 더하기와 문자열 병합이라는 두 가지 의미로 오버로딩한 것, 실수를 저지르기 쉬워서 사용을 피해야 하는 with 문 등이 여기에 해당합니다. 예약어 정책도 너무 까다롭습니다. 정규 표현식 기술 방법과 세미콜론 삽입은 아주 큰 실수입니다. 이런 실수는 프로그래밍 오류를 야기하고, 언어 설계 자체를 의문스럽게 만들게 됩니다. 다행히도, 이런 문제의 상당수는 lint라는 좋은 프로그램으로 완화가 가능합니다.
전체적인 언어 설계는 매우 안전합니다. 놀랍게도, ECMAScript 위원회는 이런 문제를 수정하는데 별로 관심이 없는 것처럼 보입니다. 아마도 그들은 새로운 것을 만드는데 더 관심이 많은 것 같습니다.

잘못된 구현들

JavaScript 초기 구현의 일부는 매우 버그가 많습니다. 이는 언어에 나쁜 영향을 미치고 있습니다. 설상가상으로 이런 구현들이 끔찍히도 버그가 많은 브라우저에 내장되어 있었습니다.

안 좋은 책들

사실상 JavaScript에 관한 거의 모든 책이 엉망입니다. 이 책들은 오류와 나쁜 예제투성이고, 잘못된 방법을 부추깁니다. 언어의 중요한 기능들이 잘못 설명되거나 아에 빠져있는 경우도 흔합니다. 필자는 십여 권의 JavaScript 책을 검토해보았는데, 다음 단 한 권의 책만 추천합니다. JavaScript: The Definitive Guide (5th Edition) by David Flanagan. (필자들에게: 좋은 책을 쓰셨다면 검토본을 보내주세요.)

불충분한 표준

언어의 공식 명세서ECMA가 작성하였습니다. 이 명세서는 품질이 매우 나쁩니다. 읽기도 어렵거니와 이해하기는 훨씬 어렵습니다. 이 제대된 책이 없는 문제와도 연결되는데, 저자들이 언어에 대한 그들의 이해를 높이기 위해 표준 문서를 활용할 수 없기 때문입니다. ECMA와 TC39 위원회는 깊이 반성해야 할 것입니다.


JavaScript를 작성하는 대부분의 사람들은 개발자가 아닙니다. 그들은 좋은 프로그램을 쓰는 훈련을 받지 못했고 원칙이 부족합니다. JavaScript는 뛰어난 표현력을 가졌기에 그들은 어쨌건 유용한 프로그램을 작성할 수 있습니다. 이는 JavaScript는 단지 초보자들을 위한 것이지 전문가 용은 아니라는 인상을 주었습니다. 이는 사실이 아닙니다.


JavaScript는 객체지향일까요? JavaScript는 데이터와 데이터를 처리할 수 있는 메서드를 담을 수 있는 오브젝트를 제공합니다. 오브젝트는 다른 오브젝트를 저장할 수도 있습니다. 클래스는 없지만, 클래스 변수와 메서드를 담을 수 있는 클래스 역할을 하는 생성자가 있습니다. 클래스 기반의 상속 기능은 없지만, 프로토타입 기반의 상속 기능을 제공합니다.
오브젝트 시스템을 만드는 두 가지 주요 방법은 상속(is-a)과 집합(has-a)이 있습니다. JavaScript는 두 가지 방법을 다 지원하지만, 언어의 동적인 속성은 집합(aggregation)일 때 더 빛을 발합니다.
일부에서는 JavaScript가 정보 은닉을 제공하지 않기 때문에 참된 의미의 객체지향이 아니라고 말합니다. 이는 오브젝트에 private 멤버와 메서드가 없다는 뜻입니다. 모든 멤버는 public입니다.
하지만 JavaScript 오브젝트는 private 변수와 private 메소드를 가질 수 있다.로 밝혀졌습니다. 물론, JavaScript는 세상에서 가장 오해가 많은 언어이기에 이를 이해하는 사람은 많지 않습니다.
또한 일부는 JavaScript가 상속을 지원하지 않기 때문에 진정한 의미의 객체 지향 언어라고 말합니다. 하지만 JavaScript는 전통적인 상속 방식뿐만 아니라 다른 코드 재활용 패턴 또한 제공한다. 라는 사실이 밝혀졌습니다.
Copyright 2001 Douglas Crockford. All Rights Reserved Wrrrldwide.

Posted by 부니기
2008.06.05 01:31

1. 개념잡기

일반화 시킨 표현. 이것을 정규표현이라고 요약할 수 있을 것 같다.
다음의 과정을 너무 쉽다 생각말고 따라오길 바란다.

 - 감잡기

"12354" -> 숫자
"asdfasf" -> 알파벳
두 가지의 간단정규표현을 만들었다. 실생활의 보기와 비추어보자.
"길이가 3인 이름!"
위의 표현은 길이를 표시하는 방법이 없다. 조금 더 발전시켜서 "알파벳{3}"이런식
으로 길이를 표현할 수 있도록 한다. 그리고, "알파벳"란 것도 너무 길다 "알"
이라고 한 글자로 표현한다. 그러면 "길이가 3인 이름"은
 "알{3}"으로 표시가 가능하다.
길이가 10인 숫자는 "수{10}"
"길이가 1인 알파벳이 나오고 그 다음에 길이가 3인 숫자가 나오는 문자열"! ->
"알{1}수{3}"얼핏이나마 감이 올 것이다.
"첫 글자는A, 그 다음은 아무 알파벳 5글자" -> "A알{5}"

 - 조금 더

아이디는 대개 첫 글자는 영문이고 두 번째부터는 영문이나 숫자가 온다. 이것을
표현하기 위해선 이것 들 중에 하나란 의미를 갖는 새로운 표현이 필요하다.
"a,b,c,d 중에 하나" -> [abcd]
"알파벳이나, 숫자중 하나" -> [알수]
"[" 안에 있는 문자들의 순서는 의미가 없으며, 그 표현은 (클래스라고 한다.)  
결국 한 글자를 말한다.
위에서 말한 "첫 글자는 영문, 두 번째 부터는 영문이나 숫자가 11자"를
표현하면, "알[알수]{11}".
그런데, 실제로 모든 아이디가 12자인 것은 아니다, 대개 4자부터 12자를 지원한다.
새로운 표현이 등장한다. "몇 자부터 몇 자"
"A가 3글자부터 12자" -> "A{3,12}"
"알파벳이나 숫자가 1자부터 100자" -> "[알수]{1,100}"
이제 아이디를 다시 정의하자.
"첫 글자는 영문, 영문이나 숫자가 3자부터 11자" -> "알[알수]{3,11}"

2. 표현식

지금 까지의 규칙에서 설명한 용어를 실제 정규표현에서 사용하는 표현으로 바꾸고,
다른 세부적인 옵션에 대해 알아보자.

\ : 다음의 글자가 특별한 문자임을 나타낸다. 때론, 그 다음 문자 자체를 의미하기
도 한다.
보기를 들면, "\n"은 문자"\"과 문자"n" 두 글자와 매치되는 것을 의미하는 것이 아
새줄(New Line)을 의미하며, "\\"은 첫 "\" 다음 문자인 "\" 자체를 의미한다.
즉, "\\"은
"\"과 매칭된다.

^ : 입력문자열의 맨 처음을 의미한다. (맨 첫 글자가 아니라, 맨 처음이란 문맥적 의
말한다. 아주 중요하다) 기본적으로 정규표현은 입력 문자열의 한 줄에만 적용된다.
하지만, 옵션에 따라 여러줄에 적용할 수도 있다. 그럴 경우에는 "^"는  "\n"
나 "\r"
다음의 위치를 의미한다.

$ : "^"는 반대로 입력 문자열의 맨 끝을 의미한다. 역시 여러줄에 정규표현이 적용

경우에는 "\n"이나 "\r"의 앞의 위치를 의미한다.

* : 이 문자 앞의 표현이 0번내지 무한번 반복될 수 있음을 말한다.
보기를 들면, /a*/은 "a", "", "aaaa", "aaaaa"와 매칭된다.
(0번이상은 없어도 된다는 것을 의미한다.)

+ : *와 같지만, 0번이상이 아니라 1번이상이라는 점을 제외하곤 /*/와 같다.

? : 앞의 표현이 0번 또는 1번. /do(es)?/는 "do", "does"와 매칭된다.

{n} : 앞의 표현이 n은 음수가 아닌 정수이어야 하며, 앞의 표현이
n번 매치되는 것을 말한다.

{n,} : 앞의 표현이 n은 음수가 아닌 정수이어야 하며, n번 이상
매치되는 것을 말한다.

{n,m} : 앞의 표현이 n번 이상 부터 m번 이하까지 매칭되는 것을
말하며, /*/는 /{0,}/과 같으며, /+/는 /{1,}/과 /?/는 /{0,1}/으로
표현 가능하다.

. : "\n"을 제외한 한 글자를 뜻한다. 만일 모든 글자를 표현하고
싶다면("\n"마저도 합친) /[.\n]/을 사용하면 된다.

x|y : x 또는 y와 매칭된다. 보기를 들면, /z|food/는 "z" 또는
"food"와 매칭된다. /(z|f)ood/는 "zood" 또는 "food"와 매칭된다.
(참고로 괄호는 묶어준 것 이상의 의미가 있다.)

(패턴) : 해당 패턴과 매칭시키고, 그 부분을 특정 변수에 담는다.
그 변수 이름은 JScript는 $0~$9까지의 변수에 저장이 되고(Perl과 같다.),
VBScript에서는 SubMatches 컬렉션에 저장된다.
괄호기호 자체와 매치시키고 싶다면? /\(/와 /\)/를 사용한다.

(?:패턴) : 해당 패턴과 매칭은 시키지만, 그 부분을 특정 변수에
담지 않는다. 왜 이게 필요할까?
위의 보기에서 /(z|f)ood/는 "zood" 또는 "food"와 매칭된다고 했는데,
단순히 매칭의 목적으로 사용했지만, "zood"의 경우 "z"가 $0 이란
변수에 저장이 되고 말았다. 이러한 것을 막기 위해서 사용하는 것이

(?=패턴) : (?:패턴)과 동일하지만, 패턴과 일치한 부분이후부터
다음 매치가 일어나지 않고 패턴 앞부터 다시 매칭이 진행된다.
즉, 룩업(lookup, lookahead)을 할 뿐이다. /Windows (?=95|98|NT|2000)/ 은
"Windows 2000"의 "Windows" 부분과 매칭이 되며 다음 매칭은
"2000" 다음 부터가 아닌 "Windows" 다음 부터 진행이 된다.

(?!패턴) : (?=패턴)과 반대다. /Windows (?=95|98|NT|2000)/ 은
"Windows 3.1"의 "Windows" 부분과 매칭이 된다.

[xyz] : "["안에 있는 표현중 하나를 의미한다.

[^xyz] :  "["안에 있는 표현을 제외한 것중 하나를 의미한다.
"[^abc]"는 "plain"의 "p"때문에 매칭된다.

[a-z] : "a"부터 "z" 까지의 문자중 하나

[^a-z] : "a"부터 "z" 까지의 문자를 제외한 하나

\b : 단어의 경계(단어와 공백, "\n", "\r"의 사이)와 매칭된다.
보기를 들면, "er\b"는 "never"와는 매칭되지만, "verb"와는 매칭되지 않는다.

\B : 단어의 경계가 아닌 것과 매칭된다. "er\B"는 "verb"와는
매칭되지만, "never"와는 매칭되지 않는다.

\cx : Ctrl+x 키와 매칭된다. "\cc"는 Ctrl+C와 매칭된다. x의 범위는
[a-zA-Z]이며, 만일 이 이외의 문자를 사용한다면 "\c"는 "c"와 동일하다.

\d : [0-9]와 같다.

\D : [^0-9]와 같다. 참고로 대문자는 소문자의 반대 의미를 갖는다.

\f : 폼피드(form-feed) 문자를 의미하며, "\x0c"와 "\cL"과 동일하다.

\n : 새 줄(newline)를 의미하며, "\x0a"와 "\cJ"와 동일하다.

\r : 캐리지 리턴(carriage return)을 의미하며, "\x0d"와 "\cM"과 동일하다.

\t : 탭. "\x09", "\cI"과 동일

\v : 버티컬 탭. "\x0b", "\cK"과 동일

\s : 화이트스페이스를 의미한다. 화이트스페이스란 공백, 탭, 폼피드,
캐리지리턴등을 의미한다. [ \f\n\r\t\v]과 동일("\f"앞에 공백이 있다. 주의!)

\S : "[^ \f\n\r\t\v]"

\w : "_"를 포함한 일반적인 단어에 사용되는 문자를 말한다.
"[A-Za-z0-9_]" 과 동일

\W : "[^A-Za-z0-9_]"

\xn : n은 2자리 16진수이며, 해당 16진수 코드와 매칭된다. "\x412"는 16진수
41은 "A"이기 때문에 "A2"와 매칭된다.

\num : 캡쳐한 매칭을 가리킨다(백레퍼런스, backreference).
"(.)\1"은 연속된 두개의 문자열을 의미한다.
\n : "\1"은 위에서 캡쳐한 매칭(backreference)를 가리킨다고 했는데,
만일 이 패턴앞에 어떠한 n개의 캡쳐한 표현이 있다면 백레퍼런스이지만,
그렇지 않은 경우에는 8진수로 간주하여 해당 코드의 문자와 매칭된다.

\un : n은 4자리 UNICODE 이다. "\u00A9"은 copyright 심볼인 "ⓒ"와 매칭된다.

3. greedy, non-greedy

? : 앞에서 설명했는데, 왜 또? 라고 생각할 것이다.
?은 문맥에 따라 특별한 의미를 갖는다.
패턴 "o*"는 "foooood"와 매칭된다. 당연하다! 하지만, "f"앞의 "o"와
매칭되는 것이 아니다!! "ooooo"와 매칭된 것이다. 즉, 기본으로
정규표현 매칭은 가장 큰 범위를 선택한다. 이것을 greedy하다고 한다.
하지만, 때론 작은 범위에 매칭시킬 필요가 있을 경우가 있다.
(이의 적절한 보기는 잠시 후에 나온다.) "o*?"가 방금 말한
non-greedy 매칭이다.
수량관련 문자인 "*", "+", "?", "{n}", "{n,}", "{n,m}" 다음에 "?"가
나오면 non-greedy 매칭이된다.
잠시, 위에서 "o*?"가 "o"와 매칭된다고 했는데 이상하게 생각한 분이
있었을 것이다. 맞다. "o*?"는 ""와 매칭되었다. "*"는 0개이상임을
잊어선 안된다. "o+?"가 "o"와 매칭된다.

4. 보기

 - 웹 주소

위의 주소를 표현할 수 있는 정규표현은 아래와 같다.

/(\w+):\/\/([^/:]+)(:\d*)?([^# ]*)/
$1 : http
$2 : msdn.microsoft.com
$3 : 80
$4 : /scripting/default.htm

 - 중복된 단어를 하나로

중복된 영어단어를 하나로 합치기 위해선, 우선 단어를 찾아야한다.
그리고 단어는 앞 뒤가 단어의 경계이어야한다. (말이 참 이상하지만..)
따라서, 아래와 같은 1차 정규표현을 얻을 수 있다.


연속해서 동일한 두개의 단어... 앞에서 캡쳐한 표현을 다시 활용하면 된다.
그리고, 단어와 단어 사이엔 화이트스페이스가 있다.


 - HTML 태그 제거

HTML문서에서 태그를 제거한 문서를 추출하고자 한다.
태그는 "<"와 ">"로 감싸여 있다.


그런데, 위의 정규표현을 HTML문서에 적용하여 해당 패턴을 "",
빈문자열로 바꾸면 문서는 빈 문서가 되고 만다.

<font>.... </font>

greedy한 매칭이 기본값이라고 위에서 언급을 했다. 따라서,
위의 HTML 문서를 보면, <html>....</body>로 생각할 수 있다.
따라서, 문서 전체가 사라지는 것이다. 이것을 막기 위해선 "*"뒤에 "?"를
추가하면 된다.                            


아직 끝나지 않았다. :)

좀더 정제를 한다면, 올바른 HTML 문서는 <태그명>과 </태그명>이
서로 일치한다. 이것도 적용한다면,


위의 $1에 해당되는 부분을 좀 더 생각해보면, ">"를 제외한 문자로
볼 수 있다. 따라서 최종적으로 아래와 같이 정리된다.


 - URL


 - float 상수

/^(((+|-)?\d+(\.\d*)?)|((+|-)?(\d*\.)?\d+))$/  -1.1 1.1 .9 .8

Posted by 부니기
2008.06.05 01:15

onunload , onbeforeunload 이벤트가 창을 닫을 때 이벤트가 실행된다.
문제는 저 이벤트는 새로고침 시에도 발생하므로, 로그인 중복체크 등이나 사용자 세션을 강제로 끊어줄 때 등등의 사용에 적합하지 않는다. 대신 아래와 같이 사용하면, 이벤트 발생이 새로고침인지 다른사이트 이동인지 알 수 있다.

<script language="javascript">
function Exit() {
    if (self.screenTop > 9000) {
        // 브라우저 닫힘
    } else {
        if(document.readyState == "complete") {
            // 새로고침
        } else if(document.readyState == "loading") {
            // 다른 사이트로 이동
<script language="javascript" event="onunload" for="window">

다만, 글쓰기 같은 페이지에는 새로고침을 확인해서 입력되고 있는 내용이 사라지지 않도록 확인해 주는 센스가 필요하겠다.
Posted by 부니기
2008.06.05 00:29

Javascript Framework


Posted by 부니기
2008.05.24 03:38

금액 : [ 원 ]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<TITLE>금액 한글표시</TITLE>

function InputMoney(input,obj){
	str = input.value;
	str = unComma(str);
	str = Comma(str);
	input.value = str;

function MoneyToHan(str,obj){
	arrayNum=new Array("","일","이","삼","사","오","육","칠","팔","구");
	arrayUnit=new Array("","십","백","천","만 ","십만 ","백만 ","천만 ",
	                    "억 ","십억 ","백억 ","천억 ","조 ","십조 ","백조");
	arrayStr= new Array()
	len = str.length;
	hanStr = "";
	for(i=0;i<len;i++) { arrayStr[i] = str.substr(i,1) }
	code = len;
	for(i=0;i<len;i++) {
		tmpUnit = "";
		if(arrayNum[arrayStr[i]] != ""){
			tmpUnit = arrayUnit[code];
			if(code>4) {
				if(( Math.floor(code/4) == Math.floor((code-1)/4)
				     && arrayNum[arrayStr[i+1]] != "") || 
				   ( Math.floor(code/4) == Math.floor((code-2)/4) 
				     && arrayNum[arrayStr[i+2]] != "")) {
		hanStr +=  arrayNum[arrayStr[i]]+tmpUnit;
	obj.value = hanStr;

function isNumObj(obj)
	for (var i = 0; i < obj.value.length ; i++){
		chr = obj.value.substr(i,1);		
		chr = escape(chr);
		key_eg = chr.charAt(1);
		if (key_eg == 'u'){
			key_num = chr.substr(i,(chr.length-1));			
			if((key_num < "AC00") || (key_num > "D7A3")) { 
				event.returnValue = false;
	if (event.keyCode >= 48 && event.keyCode <= 57) {
	} else {
		event.returnValue = false;

function Comma(num) {
	re = /(\d+)/;
		re.exec(num); num = RegExp.$1; 
		re = /(\d+)(\d{3})/;
		while(re.test(num)){ num = num.replace(re,"$1,$2"); }
    return (num);

function unComma(str) {
	return str.replace(/,/g,"");
<font size=2 face=돋움>
<form name=f1>
<b>금액 : <input type=text name=MONEY size=20 maxlength=15 style="text-align:right;" 
		onKeyPress="isNumObj(this);" onKeyUp="InputMoney(this,document.f1.HMONEY);">
[ <input type=text name=HMONEY style="border:0px;background-color:#ffffff;text-align:right;color:#FF0033"
		readonly size=25> 원 ]

Posted by 부니기
2008.05.24 03:36

소스보기 하시면 나옵니다.
js File DownLoad
css File DownLoad

도움말이 필요한 바로 이곳 에 링크를 걸어주면 되는거네요..





Posted by 부니기
2008.05.24 03:34
시작페이지 설정시 아래의 스크립트를 쓰시면 됩니다.
<a href="#" onClick="this.style.behavior='url(#default#homepage)';this.setHomePage
Posted by 부니기
2008.05.24 03:33
// 사업자번호로 사업자종류 구분
// Param $bizno 사업자등록번호(Format : NNNNNNNNNN )
// Return 1 : 개인사업자,2: 면세사업자,3: 법인본점,4: 비영리법인,5: 지점법인
function getBizType($bizno) {
        if(strlen($bizno) == 10) {
                $code = substr($bizno, 3, 2);
                if($code < 80) {
                        return 1;
                } else if($code >= 90) {
                        return 2;
                } else if($code == 81 || $code == 86 || $code == 87) {
                        return 3;
                } else if($code == 82) {
                        return 4;
                } else if($code == 83) {
                        return "국가";
                } else if($code == 85) {
                        return 5;
                } else { return -1; }
        } else { return -1; }
Posted by 부니기
2008.05.24 03:29
데모 :

* 색상을 Click해 주세요.

Sample Code :

	<title>Lewies Color Picker Demonstration</title>
	<script language=javascript>
		function OpenColorPicker(){
			var hex = new String(Color.style.backgroundColor);
				hex = window.showModalDialog("/lib/color/ColorPicker.htm", hex, 
				if(hex != null) {
					Color.style.backgroundColor = "#" + hex;
					document.f1.COL1.value = "#" + hex;
				alert("Your browser does not appear to support modal dialog boxes.");
				// insert code here to use a color picker that is more
				// compatable accross browsers.
	<form name=f1>
	<div id="Color" onclick="OpenColorPicker()" 
style="width:100px;height:100px;border:1px solid black;background-color:#0000FF"></div>
	<input type=text name=COL1>

다운로드 :
Posted by 부니기

티스토리 툴바