2010년 3월 14일 일요일

OSFLV Player

OS Flv라는 오픈소스 Flv 플레이어 입니다.

 

 

http://www.osflv.com/Download.html

작성자: 시간: 댓글 없음:
라벨: ,

비스타 및 윈도우7 에서 Illustrator CS3 실행 시 충돌 현상 해결책

Vista에서 Illustrator를 사용하다보면 다음과 같은 문제가 발생되는 경우가 있습니다.

 

문제 서명
문제 이벤트 이름: APPCRASH
응용 프로그램 이름: Illustrator.exe
응용 프로그램 버전: 13.0.128.0
응용 프로그램 타임스탬프: 45fa64db
오류 모듈 이름: CoolType.dll

 

이유는 일러에서 한글 이름으로 된 폰트 이름을 읽어올 때 충돌하는 것 같습니다.
(보통 윤디자인 폰트가 문제가 된다고 하더군요)


이를 해결하기 위해서는 다음과 같은 절차를 거칩니다.

1. Fonts 디렉토리(기본적으로 C:\Windows\Fonts 입니다)에서 윤디자인 또는 기타 새로 추가 한 폰트를 백업합니다.
2. Illustrator의 "Option" -> "Edit" -> "Preferences" -> "Type" 에서 "Show Font Names in English" 를 체크합니다.
3. 백업한 폰트를 다시 Fonts 디렉토리로 이동합니다.

 

작성자: 시간: 댓글 없음:
라벨: ,

외부에서 이미지 불러오기

[code]_root.createEmptyMovieClip("imglode",1); imglode.loadMovie("a1.jpg"); imglode._x = 0; imglode._y = 0;[/code]
작성자: 시간: 댓글 없음:
라벨: ,

자주 쓰는 플래시 액션스크립트 용어

  • 액션스크립트(Action script) : 플래시에 기반을 두고 있는 객체 지향 스크립트 언어를 말합니다.
  • 도트 표기법(Dot Syntax) : 플래시4까지에서의 슬래시 표기법과는 달리 플래시5부터 쓰이기 시작한 액션 스크립트 표기법으로 점(.)으로 변수의 행동이나 속성 또는 경로 등을 나타냅니다. 도트 표기법으로 바뀌면서 액션 스그립트가 실질적인 객체 지향언어가 되었습니다.
  • 오브젝트(Object) : 객체를 나타내는 것으로 모든 사물이 대상이 될 수 있습니다. 오브젝트는 속성(Property)이나 행동양식(Method)을 가지고 잇습니다.
  • 속성(Property) : 어떤 오브젝트의 성질, 성격을 말합니다.
  • 메소드(Method) : 어떤 오브젝트의 행동양식을 나타냅니다.
  • 레이블 또는 라벨(Label) : 프레임에 입력하는 주소 내지는 인스턴스 네임정도 생각하면 된다.
  • 인스턴스 네임(Instance name) : 일종의 별명을 말합니다. 무비 클립 심벌에 인스턴스 네임을 붙여주고 특정 역할을 부여하기 위해서 사용됩니다. 플래시 MX 버전부터는 버튼 심벌에도 인스턴스 네임을 붙여줄 수 있습니다.
  • 루트(_root) : 절대 경로의 루트, 즉 메인 스테이지를 가리키는 말입니다.
  • parent : 상위 또는 부모 디렉토리를 가리키는 말로서, 상대 경로를 나타내는 경로 지정 스크립트입니다.
  • 변수(Varible) : 말 그대로 항상 변하는 수를 담고 있는 그릇의 역할 하는 것을 말합니다. 메모리에 가상으로 저장공간 만듭니다.
  • 표현식(expression) : flash=10; 이라는 식을 예로 들어 flash에 10이라는 값을 담아둡니다.
  • 문자식(Lieral) : flash="best";라는 식을 예로 들어 변수 flash에 “best"라는 문자 겅보를 담아 둡니다.
  • 등호(=) : 수학에서의 계산식과는 달리 액션 스크립트에서는 오른쪽의 데이터를 변수에 넘겨주는 것을 뜻합니다. 즉, flash=10; 이라는 식에서 10이라는 값을 변수 flash에 넘겨주는 것을 말합니다.
  • 함수(function) : 어떤 객체(오브젝트)의 행동양식이나 속성 또는 변수들에 일정한 값을 주게 되면 그 값을 처리해 결과 값을 돌려줍니다. 액션 스크립트에서 함수를 사용하려면 반드시 함수 선언이 이루어져야 하며, 함수가 선언된 부분의 액션은 함수를 호출하지 않는 이상 실행되지 않습니다.
  • 내장 함수 : 플래시에 이미 함수로 정의되어 있는 함수를 말하는 것으로 일반 사용자들이 쉽게 가져다 쓸 수 있도록 플래시 개발들이 미리 만들어둔 것을 말합니다.
  • 절대경로(Absolute Path) : 말 그대로 절대 경로를 나타내는 것으로 메인 스테이지, 즉 _root에서부터의 경로를 나타냅니다.
  • 상대경로(Relative) : 현재 위치의 자신을 중심으로 하여 다른 곳에 위치한 객체의 경로를 나타낼 때 사용합니다.
  • 레벨(level) : 숫자가 높을수록 무비, 즉 화면의 맨 위에 나타나고 아래 레벨은 가려집니다.
작성자: 시간: 댓글 없음:
라벨: ,

플래시 작업을 할 때 알아두면 좋은 것들

  1. layer가 너무 많을 경우에는 레이어 폴더를 만들어서 정리하는 것이 좋다.
  2. 무비를 만들 때 심벌이 많아지는 경우들이 많은데, 라이브러리 패널(Ctrl+l or F11)을 열어서 폴더를 만들어서 관련된 심벌끼리 모와 두면 좋다. 그러면 찾고자 하는 심벌을 빠르게 찾을 수가 있다.
  3. View메뉴나 작업창에서 마우스 오른쪽버튼을 눌러서 Ruler, Grid, Guide Line를 나타나게 하고 작업을 하면 정교한 작업을 할 수 있다.
  4. 무비를 만들 때 Tweening은 Shape Tweening은 가급적이면 피하고 Tweening을 하고자 하는 오브젝트를 심벌로 만든 다음에 Motion Tweening을 해주는 것이 좋다. 이유는 Shape Tweening 지나치게 많이 사용하면 무비속도와 사용자 컴퓨터에 영향을 줄 수가 있기 때문이다.
  5. Information panel과 Transform panel은 항상 열어놓고 작업한다. Information panel은 마우스로 오브젝트를 이동하는 것보다 정확한 작업을 할 수 있다.(이건 Properties패널에서도 할 수도 있지만, 저 같은 경우엔 Flash5 시절부터 공부를 했기 때문에 Information Panel에서 하는 것이 습관화되어 있습니다.^^) Transform panel은 오브젝트를 자기가 원하는 각도로 회전을 하거나 비틀 때 수치 값을 입력하면서 작업하면 편리하다.
  6. 액션 패널은 안보이도록 하는 것이 좋다. 이유는 작업창의 크기를 차지할 수가 있기 때문에 액션을 입력하고자 할 때는 F9를 누르거나 오른쪽 버튼을 눌러 단축메뉴에서 Action메뉴를 불러와서 작업하면 된다.
  7. Window-Save Panel Layout은 자기가 자주 쓰는 패널들을 열어두고 이걸 실행하면 이름을 입력하라는 대화창이 나오는데, 자기가 원하는 이름을 타이핑하고 OK하면, Window-Panel Set에 가면 방금 전에 자신이 저장한 이름이 있다. 여기서 Default Layout은 플래시를 깔고나서 플래시를 처음 실행시켰을 때의 Panel Layout으로  보여지게 하라는 것입니다.
작성자: 시간: 댓글 없음:
라벨: ,

무비 크기를 줄이기 위한 10가지 방법

플래시 무비는 되도록 파일 크기가 작은 게 좋으므로 여기에 정리한 내용을 기억해 둡시다.

 

  1. 두 번 이상 같은 오브젝트를 사용할 때는 반드시 심벌로 등록하여 사용한다.
  2. 필요없는 프레임과 키프레임은 반드시 삭제한다. 특히 빈프레임이라고 그대로 두지 말고 제작하다 생겨난 불필요한 프레임들은 삭제하여 정리한다.
  3. 무비를 제작하고 나서 스테이지 바깥에 나와 있는 오브젝트 중에 필요없는 부분은 반드시 제거한다.
  4. 필요없는 레이어나 라이브러리 안의 무비에 사용하지 않은 오브젝트들은 모두 제거한다.
  5. 비트맵화일은 되도록 사용하지 말고 사용하더라도 정적인 요소로만 사용한다. 비트맵 파일을 불러 왔을 때는 Break Apart(Ctrl+B)를 해서 심벌이나 그룹화를 시켜주면 무비크기를 줄일 수 있다.
  6. 개별 오브젝트들은 가능하면 그룹화하고, 벡터 이미지들은 될 수 있는 한 최적화한다.
  7. 사운드는 가능하면 MID, MP3, WAV 순으로 사용한다.
  8. 레이블이나 주석을 사용하면 파일 크기가 커지므로 꼭 필요한 때만 사용한다.
  9. 다양한 폰트의 사용과 색상 적용 및 크기가 조정은 피한다.
  10. 선은 Brush tool(브러시 툴)보다 Pencil tool(연필 툴)을 이용해 그린다.
작성자: 시간: 댓글 없음:
라벨: ,

플래시 단축키 모음

● 작업할 때 편리한 단축키

Ctrl+N : 새로운 작업창을 불러들 일 때
Ctrl+O : 이전에 작업한 플래시 문서를 불러들일 때
Ctrl+S : 저장                                 
Ctrl+Shift+S : 다른 이름으로 저장
Ctrl+C : 오브젝트 복사                       
Ctrl+V : 복사한 오브젝트를 붙이기
Ctrl+P : 플래시 작업한 것을 인쇄할 때        
Ctrl+A : 모든 오브젝트를 선택할 때
Ctrl+R : 외부 파일 불러오기(음원이나 비트맵, 일러스트레이터에서 작업한 SWF 파일을 불러오고자 할 때)
Ctrl+Shift+V : 복사한 오브젝트를 제자리에 붙이기
Ctrl+Shift+S : 오브젝트의 크기를 픽셀이 아닌 %단위로 조절한다.(수치 값 입력)
Ctrl+Shift+R : 오브젝트를 회전시키고자 할 때(수치 값 입력)
F8 : 선택한 오브젝트를 Symbol로 만들 때         
Ctrl+F8 : 새로운 Symbol을 만들 때 쓴다. 이걸 실행하면 바로 심벌편집을 할 수 있다.
Ctrl+B : 외부에서 불러온 비트맵이나 텍스트, 그룹으로 되어 있는 오브젝트를 개별적인 오브젝트를 만들 때 사용한다. 또한, 이 단축키는 무비 테스트(Ctrl+Enter)할 때 Ctrl+B하면 무비의 전체 용량과 초당 프레임 수 등 무비에 대한 전체적인 정보를 알 수 있다.
Ctrl+G : 개별적으로 되어 있는 오브젝트들을 그룹화 시킨다.
Ctrl+SHift+B : 작업창에서 Button symbol을 테스트 할 때
Ctrl+U : 플래시 작업을 할 때 사용자에게 편하도록 여러 가지 설정을 할 수 있다.

 

● 패널에 관련된 단축키

Ctrl+I : Information panel을 연다.            
Ctrl+T : Transform panel을 연다.
Ctrl+L or F11 : 심벌의 창고인 Library panel을 연다.
F9 : Action panel을 연다.

 

● Frame에 관련된 단축키

F5 : Frame을 삽입

F6 : Keyframe을 삽입
F7 : Blank Keyframe(빈 키프레임)을 삽입         
Shift+F5 : Frame을 삭제
Shift+F6 : Keyframe을 삭제

작성자: 시간: 댓글 없음:
라벨: , ,

플래쉬내에서 객체의 존재 여부 검사하기

[code]if(!this.hitTest(_root.s_bg)) { trace("객체가 존재하지 않음"); } if(this.hitTest(_root.s_bg)) { trace("객체가 존재함"); }[/code]
작성자: 시간: 댓글 없음:
라벨: ,

Flash 크기 및 위치 고정하기

액션에 아래 코드를 넣어주면 플래쉬창의 크기가 변하더라도 플래쉬의 크기는 변하지 않는다.

[code]fscommand("fullscreen", false); fscommand("allowscale", false); Stage.showMenu = false; Stage.scaleMode = "noScale"; Stage.align = "LT"; // 위치고정[/code]

 

Stage.align 의 값이 고정될 위치를 결정한다.

Value Vertical Horizontal
"T" top center
"B" bottom center
"L" center left
"R" center right
"TL" top left
"TR" top right
"BL" bottom left
"BR" bottom right
작성자: 시간: 댓글 없음:
라벨: ,

버튼 클릭시 객체 확대 및 축소하기

확대버튼 액션
[code]on (click) { _root.객체명._xscale += 10; _root.객체명._yscale += 10; }[/code]
축소버튼 액션
[code]on (click) { _root.객체명._xscale -= 10; _root.객체명._yscale -= 10; }[/code]
원래 크기로 돌아오기
[code]on (click) { _root.객체명._xscale = 100; _root.객체명._yscale = 100; }[/code]
작성자: 시간: 댓글 없음:
라벨: ,

객체를 드레그가 가능하도록 만들기

객체를 만들 후 액션에 다음과 같은 코드를 넣는다. [code]on(press) { startDrag(this); } on(release,releaseOutside) { stopDrag(); }[/code]
작성자: 시간: 댓글 없음:
라벨: ,

ActionScript 3.0 프로그래밍 한글 도움말 pdf

http://livedocs.adobe.com/flash/9.0_kr/main/flash_as3_programming.pdf

작성자: 시간: 댓글 없음:
라벨: , ,

월드 오브 워크래프트 아기 와이번 봉제인형과 애완동물

블리자드 스토어에서 한정판으로 판매하고 있는 봉제인형과 게임상의 펫이다..

주요 특징

  • 일정 기간 동안만 판매되는 한정판 제품입니다.
  • 아기 와이번은 전투에는 참여하지 않지만, 플레이어가 날아다니는 탈것으로 이동할 때도 함께 합니다.
  • 게임 계정 내 모든 캐릭터는 물론 앞으로 생성할 캐릭터에게도 분양이 가능합니다.
  • 얼라이언스와 호드의 진영에 관계없이 원하는 애완동물을 구입하여 분양받으실 수 있습니다.
  • 아기 와이번의 키는 22CM입니다. (봉제 인형)
  • 매우 귀엽습니다!
  • 아주 부드러운 재질의 플러시 천으로 만들었습니다.
  • 아기 그리핀과 아기 와이번은 각 진영의 문장을 목에 걸고 있습니다.





작성자: 시간: 댓글 없음:
라벨: , , , , ,

2010년 3월 11일 목요일

CSS Dock Menu

사이트 :

http://www.ndesign-studio.com/blog/css-dock-menu

 

데모 :

http://www.ndesign-studio.com/demo/css-dock-menu/css-dock.html

 

 

작성자: 시간: 댓글 없음:
라벨: , , ,

간단한 문단 생성하여 붙이기

jQuery로 간단한 문단을 생성하여 붙이기. [code javascript]$('

') .html('Hey World!') .css('background', 'yellow') .appendTo("body");[/code]
작성자: 시간: 댓글 없음:
라벨: ,

jQuery로 Ajax 개발을 단순화 하기

http://www.ibm.com/developerworks/kr/library/x-ajaxjquery.html
작성자: 시간: 댓글 없음:
라벨: ,

자바스크립트 라이브러리 Jquery 플러그인

작성자: 시간: 댓글 없음:
라벨: ,

링크 관련 팁

[code html]
  • 공지사항
  • 전체글보기
  • 베스트게시물
  • 이미지모아보기
  • 동영상모아보기
  • 카페태그보기
  • 자유로운글
  • 카페앨범
[/code]
작성자: 시간: 댓글 없음:
라벨: ,

이미지 없으면 자동으로 No Image 출력

[code html] [/code]
작성자: 시간: 댓글 없음:
라벨: ,

셀렉트박스

http://plugins.jquery.com/project/selectboxutils

 

http://dev.chrisryu.com/data/jQuery-selectbox-utils/demo/index.html

 

<script>
$(function(){
  $('#year1').numericOptions({from:2007,to:2011});
  $('#month1').numericOptions({from:1,to:12});
  $('#date1').numericOptions().datePulldown({year:$('#year1'),month:$('#month1')});
});
</script>
<select id="year1"/><select id="month1"/><select id="date1"/>


 

작성자: 시간: 댓글 없음:
라벨: ,

jQuery로 모서리 둥글게 만들기

http://www.atblabs.com/jquery.corners.html

 

http://methvin.com/jquery/jq-corner.html

 

http://malsup.com/jquery/corner/

작성자: 시간: 댓글 없음:
라벨: ,

구글 AJAX Libraries API

서버에 스크립트소스를 올리지 않고 아래와 같은 방법으로 jQuery를 사용할 수 있다.
[code html] [/code]
작성자: 시간: 댓글 없음:
라벨: ,

jQuery 관련 사이트

jQuery는 자바스크립트와 HTML 사이의 상호작용을 강조하는 경량화된 웹 애플리케이션 프레임워크이다. 존 레시그에 의해, 2006년 뉴욕 시 바캠프(Barcamp NYC)에서 릴리즈되었다.

jQuery는 MIT 라이선스와 GNU 일반 공중 사용 허가서의 듀얼 라이선스 하의 자유 오픈 소프트웨어이다.

jQuery 공식사이트 : http://jquery.com/

데모 : http://jqueryui.com/

jQuery 위키 : http://ko.wikipedia.org/wiki/JQuery

Visual jQuery 1.2.6 : http://www.visualjquery.com/

작성자: 시간: 댓글 없음:
라벨: ,

prototype.js 를 위한 개발자 노트

http://openframework.or.kr/framework_reference/prototype_js/1.4.0/prototype.js.html
작성자: 시간: 댓글 없음:
라벨: ,

Ajax 마스터하기

한글 : http://www-128.ibm.com/developerworks/kr/library/wa-ajaxintro1.html

영문 : http://www-128.ibm.com/developerworks/web/library/wa-ajaxintro1.html


  • Ajax 마스터하기, Part 1: Ajax 소개 (한글)
  • Ajax 마스터하기, Part 2: Javascript와 Ajax를 이용한 비동기식 요청 (한글)
  • Ajax 마스터하기, Part 3: Ajax의 고급 요청 및 응답 (한글)
  • Ajax 마스터하기, Part 4: 웹 응답에 DOM 활용하기 (한글)
  • Ajax 마스터하기, Part 5 : DOM 다루기 (한글)
  • Ajax 마스터하기, Part 6: DOM 기반 웹 애플리케이션 구현 (한글)
  • Ajax 마스터하기, Part 7: 요청과 응답에 XML 사용하기 (한글)
  • Ajax 마스터하기, Part 8: 요청과 응답에 XML 사용하기
    • 작성자: 시간: 댓글 없음:
    라벨: ,

    JSON-PHP란?

    JSON-PHP는 JSON 정보의 인코딩과 디코딩을 쉽게 해 주는 PHP 유틸리티이다.

    http://mike.teczno.com/json.html 에서 무료로 구할 수 있다.

    PHP에서 JSON 객체를 이용하기 위해 필요한 일은 페이지에 JSON.php 파일을 포함시켜서 JSON 객체를 이용하는 것뿐이다.

    JSON 객체의 새로운 인스턴스를 생성하는 방법은 아주 간단하다.

     

    <?php
    require_once("JSON.php");
    $oJSON = new JSON();
    ?>


    ==========

    In Javascript, consuming input in JSON format is as easy as:

    eval("var decoded_data = "+encoded_data);

     

     

    With JSON-PHP, it can be almost as easy on the server-side, too:

    // create a new instance of Services_JSON
    require_once('JSON.php');
    $json = new Services_JSON();

    // convert a complex value to JSON notation
    $value = array(1, 2, 'foo');
    $output = $json->encode($value);
    print($output);

    // accept incoming POST data
    $input = $GLOBALS['HTTP_RAW_POST_DATA'];
    $value = $json->decode($input);

     

    작성자: 시간: 댓글 없음:
    라벨: ,

    Prototype.js 가이드 03 참조문서

    Javascript 클래스에 대한 확장

    prototype.js라이브러리에 기능을 추가하기 위한 방법중 하나는 현재 존재하는 Javascript클래스를 확장하는 것이다.

    Object 클래스를 위한 확장

    메소드 종류 인자 상세설명
    extend
    (destination, source)
    		 static
    destination: 객체,
    source: 객체
    source에서 destination으로
    모든 프라퍼티와 메소드를 복사하여
    상속을 구현하기 위한 방법을 제공
    inspect(targetObj) static targetObj: 객체
    targetObj의 사람이 읽을수 있는 문자열
    표현으로 반환. 주어진 객체가 inspect
    인스턴스 메소드를 정의하지 않는다면,
    toString 의 값을 반환

    Number 클래스를 위한 확장

    메소드 종류 인자 상세설명
    toColorPart() instance (none)
    숫자의 16진법 표현을 반환.
    색상의 RGB컴포넌트를 HTML표현으로
    변환할때 유용
    succ() instance (none)
    다음 숫자를 반환. 이 함수는 반복을
    포함하는 시나리오에서 사용된다.
    times(iterator) instance
    iterator:
    Function(value, index)
    를 충족하는 함수 객체
    인자 value와 index를 반복적으로 전달하는
    iterator 함수를 호출하는 것은 iteration과
    현재 index내 현재 값을 각각 포함한다.
    다음의 예제는 0에서 9까지의 메시지 박스를 표시할것이다.
    <script> function demoTimes(){ var n = 10; n.times(function(value, index){ alert(index); }); /*************************** * you could have also used: * (10).times( .... ); ***************************/ } </script> <input type=button value="Test Number.times()" onclick="demoTimes()">

    Function 클래스를 위한 확장

    메소드 종류 인자 상세설명
    bind(object) instance
    object:
    메소드를
    소유하는 객체
    함수(=메소드) 소유자 객체로 미리 묶는
    함수의 인스턴스를 반환. 반환된 함수는
    원래의 것과 같은 인자를 가질것이다.
    bindAsEventListener
    (object)
    		 instance
    object:
    메소드를
    소유하는 객체
    유하는 객체 함수(=메소드) 소유자 객체로
    미리 묶는 함수의 인스턴스를 반환.
    반환된 함수는 이것의 인자로
    현재 이벤트 객체를 가질것이다.
    실제로 이 확장중 하나를 보자.
    <input type=checkbox id=myChk value=1> Test? <script> //declaring the class var CheckboxWatcher = Class.create(); //defining the rest of the class implmentation CheckboxWatcher.prototype = { initialize: function(chkBox, message) { this.chkBox = $(chkBox); this.message = message; //assigning our method to the event
    this.chkBox.onclick = this.showMessage.bindAsEventListener(this);
    }, showMessage: function(evt) { alert(this.message + ' (' + evt.type + ')'); } }; var watcher = new CheckboxWatcher('myChk', 'Changed'); </script>

    String 클래스를 위한 확장

    메소드 종류 인자 상세설명
    stripTags() instance (none) HTML이나 XML태그가 삭제된 문자열을 반환
    stripscripts() instance (none) 삭제된 <script /> 블럭을 가진 문자열을 반환
    escapeHTML() instance (none) HTML마크업 문자들이 escaped된 문자열 반환
    unescapeHTML() instance (none) escapeHTML()의 반대
    extractscripts() instance (none) 문자열내에서 발견되는 모든 <script />블럭을 포함하는 Array객체 반환
    evalscripts() instance (none) 문자열내에서 발견되는 각각의 <script />블럭을 평가하기
    toQueryParams() instance (none)
    쿼리문자열(querystring)을 파라미터 이름에 의해
    인덱스화되는 결합된 Array로 쪼개기
    parseQuery() instance (none) toQueryParams()와 같음.
    toArray() instance (none) 문자열을 이것의 문자들의 Array로 쪼개기
    camelize() instance (none)
    -(하이픈)으로 분리된 문자열을 camelCaseString
    으로 변환하기. 이 함수는 예를 들면,
    프라퍼티 스타일을 다루는 코드를 작성할때 유용하다.

    Array 클래스를 위한 확장

    시작하기 위해, Array는 Enumerable를 확장한다. 그래서 Enumerable객체내에 정의되는 모든 편리한 메소드는 사용가능하다. 이것외에도, 아래의 메소드들이 구현되었다.
    메소드 종류 인자 상세설명
    clear() instance (none) 배열을 비우고 자체를 반환한다.
    first() instance (none) 배열의 첫번째 요소를 반환한다.
    last() instance (none) 배열의 마지막 요소를 반환한다.
    compact() instance (none) null 이거나 undefined인 요소를 제외하고 배열을 반환한다. 이 메소드는 배열자체를 변경하지 않는다.
    flatten() instance (none) 기복이 없고, 1차원의 배열을 반환한다. 이 함수는 배열이고 반환된 배열내 요소를 포함하는 배열의 각 요소를 찾음으로써 수행된다.
    without
    (value1 [, value2 [, .. valueN]])
    		 instance
    value1 ... valueN:
    배열내 존재한다면 제외될 값
    		 인자로 주어진 요소를 제외한 배열을 반환
    indexOf(value) instance
    value:
    당신이 찾는 것
    		 배열에서 찾아진다면 주어진 value의 0부터 시작하는 인덱스의 위치를 반환. value이 없다면 -1을 반환
    reverse([applyToSelf]) instance
    applyToSelf:
    배열 자체가 반전되는지 표시
    		 역순서로 배열을 반환. 인자가 주어지지 않거나 인자가 true라면, 배열자체는 반전될것이다. 그렇지 않으면 변경되지 않고 남는다.
    shift() instance (none) 첫번째 요소를 반환하고 배열로부터 이것을 제거한다. 배열의 길이는 1 감소한다.
    inspect() instance (none) 요소를 가진 배열의 잘 포맷팅된 문자열 표시를 반환하기 위해 변경

    document DOM 객체를 위한 확장

    메소드 종류 인자 상세설명
    getElementsByClassName
    (className [, parentElement])
    		 instance
    className:
    요소와 연관된 CSS클래스 이름,
    parentElement:
    객체 또는 가져올 요소를
    포함하는 요소의 id.
    		 주어진 CSS클래스명과 연관된 모든 요소를 반환. parentElement id가 주어졌다면, 전체 문서가 검색될것이다.

    Event 객체를 위한 확장

    프라퍼티 타입 상세설명
    KEY_BACKSPACE Number 8: 되돌리기(<-) 키를 위한 상수 코드.
    KEY_TAB Number 9: 탭키를 위한 상수코드
    KEY_RETURN Number 13: 리턴키를 위한 상수코드
    KEY_ESC Number 27: Esc키를 위한 상수코드
    KEY_LEFT Number 37: 왼쪽 화살표 키를 위한 상수코드
    KEY_UP Number 38: 위쪽 화살표 키를 위한 상수코드
    KEY_RIGHT Number 39: 오른쪽 화살표 키를 위한 상수코드
    KEY_DOWN Number 40: 아래쪽 화살표 키를 위한 상수코드
    KEY_DELETE Number 46: Delete키를 위한 상수코드
    observers: Array 캐시된 관찰자(observers)의 목록. 상세한 객체의 내부구현의 일부
    메소드 종류 인자 상세설명
    element(event) static event: 이벤트 객체 이벤트를 일으키는 요소를 반환
    isLeftClick(event) static event: 이벤트 객체 마우스 왼쪽 버튼을 클릭시 true값 반환
    pointerX(event) static event: 이벤트 객체 페이지에서 마우스 포인터의 x측 좌표값 반환
    pointerY(event) static event: 이벤트 객체 페이지에서 마우스 포인터의 y측 좌표값 반환
    stop(event) static event: 이벤트 객체 이벤트의 디폴트 행위를 취소하고 위임을 연기하기 위해 이 함수를 사용
    findElement(event, tagName) static
    event: 이벤트 객체,
    tagName: 원하는 태그명
    		 DOM트리 위쪽으로 가로지른다. 주어진 태그명을 가진 첫번째 요소를 검색한다. 이벤트를 발생시키는 요소로부터 시작한다.
    observe(element, name, observer, useCapture) static
    element: 객체 또는 아이디,
    name: 이벤트 명
    (like 'click', 'load', etc), observer: function to handle the event,
    useCapture:
    if true, handles the event in the capture phase and if false in the bubbling phase.
    		 이벤트를 위한 이벤트 핸들러 함수를 추가
    stopObserving(element, name, observer, useCapture) static element: 객체 또는 아이디, name: 이벤트 명 ('click' 처럼), observer: 이벤트를 다루는 함수, useCapture: true라면 capture내 이벤트를 다루고, false라면 bubbling내에서 다룬다. 이벤트로부터 이벤트 핸들러를 제거
    _observeAndCache(element, name, observer, useCapture) static private메소드, 이것에 대해 걱정하지말라.
    unloadCache() static (none) private메소드, 이것에 대해 걱정하지말라. 메모리로부터 캐시된 모든 관찰자(observer)를 지운다.
    window객체의 이벤트를 로그하기 위한 이벤트 핸들러를 추가하는 객체를 사용하는 방법을 보자.
    <script> Event.observe(window, 'load', showMessage, false); function showMessage() { alert('Page loaded.'); } </script>

    prototype.js에 새롭게 정의된 객체와 클래스

    라이브러리가 당신을 돕는 다른 방법은 객체지향 디자인과 공통적인 기능을 위한 지원 모두를 구현하는 많은 객체를 제공하는 것이다.

    PeriodicalExecuter 객체

    이 객체는 주어진 함수를 주어진 시간간격으로 반복적으로 호출하기 위한 로직을 제공한다.
    메소드 종류 인자 상세설명
    [ctor](callback, interval) constructor callback: 파라미터 성격이 아닌 함수, interval: 초단위 시간간격 함수를 반복적으로 호출할 이 객체의 하나의 인스턴스를 생성

    프라퍼티 타입 상세설명
    callback Function() 호출되기 위한 함수. 이 함수로 전달될 파라미터는 없다.
    frequency Number 이것은 수초내 간격으로 실질적으로 작용
    currentlyExecuting Boolean 만약 함수 호출이 진행중이라면 표시

    Prototype 객체

    Prototype 객체는 사용되는 라이브러리의 버전을 명시하는 것보다 중요한 역활을 가지지 않는다.
    프라퍼티 타입 상세설명
    Version String 라이브러리의 버전
    emptyFunction Function() 비어있는(empty) 함수 객체
    K Function(obj) 주어진 파라미터를 되돌리는 함수 객체

    Enumerable 객체

    Enumerable 객체는 list형태의 구조내에서 항목을 반복하기 위한 좀더 멋진 코드를 작성하는 것을 허용한다.
    많은 객체들은 유용한 인터페이스에 영향을 끼치기 위해 Enumerable 을 확장한다.
    프라퍼티 타입 상세설명
    Version String 라이브러리의 버전
    메소드 종류 인자 상세설명
    each(iterator) instance iterator: Function(value, index)를 충족하는 함수 객체 주어진 iterator함수를 호출하는 것은 첫번째 인자내 목록으로 각각의 요소와 두번째 인자내 요소의 인덱스 전달한다.
    all([iterator]) instance iterator: Function(value, index)를 충족하는 함수 객체 이 함수는 주어진 함수를 사용하여 값들의 전체 집합을 테스트하기 위한 방법이다. iterator 함수가 어떤 요소를 위해 false나 null을 반환한다면, all은 false를 반환할것이다. 그렇지 않다면 true를 반환할것이다. iterator가 주어지지 않는다면, 요소 자체가 false 나 null이 아닌지 테스트할것이다. 당신은 "모든 요소가 false가 아닌지 체크한다"와 같이 이것을 읽을수 있다.
    any(iterator) instance iterator: Function(value, index)를 충족하는 함수 객체(선택사항) 이 함수는 주어진 함수를 사용하여 값들의 전체 집합을 테스트하기 위한 방법이다. iterator함수가 어떤 요소를 위해 false 나 null을 반환하지 않는다면 any는 true를 반환할것이다. 그렇지 않다면 false를 반환할것이다. iterator가 주어지지 않는다면, 요소 자체가 false 나 null이 아닌지 테스트할것이다. 당신은 "어느 요소가 false가 아닌지 체크한다"와 같이 이것을 읽을수 있다.
    collect(iterator) instance iterator: Function(value, index)를 충족하는 함수 객체 집합내 각각의 요소를 위한 iterator함수를 호출하고 Array로 각각의 결과를 반환한다. 집합내 각각의 요소를 위한 하나의 결과 요소는 같은 순서이다.
    detect(iterator) instance iterator: Function(value, index)를 충족하는 함수 객체 집합내 각각의 요소를 위한 iterator함수를 호출하고 true를 반환하는 iterator함수를 야기하는 첫번째 요소를 반환한다. true를 반환하는 요소가 없다면, detect는 null을 반환한다.
    entries() instance (none) toArray()와 같다.
    find(iterator) instance iterator: Function(value, index)를 충족하는 함수 객체 detect()와 같다.
    findAll(iterator) instance iterator: Function(value, index)를 충족하는 함수 객체 집합내 각각의 요소를 위한 iterator함수를 호출하고 true로 해석되는 값을 반환하는 iterator함수를 야기하는 모든 요소를 가진 Array을 반환한다. 이 함수는 reject()와는 반대의 함수이다.
    grep(pattern [, iterator]) instance pattern: 요소를 일치시키기 위해 사용되는 RegExp객체, iterator: Function(value, index)를 충족하는 함수 객체 집합내 각각의 요소의 문자열 값을 pattern 정규표현식에 대해 테스트한다. 함수는 정규표현식에 대응되는 모든 요소를 포함하는 Array 를 반환할것이다. iterator함수가 주어진다면, Array는 대응되는 각각의 요소를 가진 iterator를 호출한 결과를 포함할것이다.
    include(obj) instance obj: 객체 집합내 주어진 객체를 찾도록 시도한다. 객체가 찾아진다면, true를 반환하고 찾지 못한다면 false를 반환한다.
    inject(initialValue, iterator) instance initialValue: 초기화 값처럼 사용되는 객체, iterator: Function(accumulator, value, index)를 충족하는 함수 객체 iterator함수를 사용하여 집합의 모든 요소를 조합한다. 호출된 iterator는 accumulator인자에서 이전 반복의 결과를 전달한다. 첫번째 반복은 accumulator인자내 initialValue를 가진다. 마지막 결과는 마지막 반환값이다.
    invoke(methodName [, arg1 [, arg2 [...]]]) instance methodName: 각각의 요소내에서 호출될 메소드의 이름, arg1..argN: 메소드 호출로 전달될 인자. 집합의 각각의 요소내 methodName에 의해 명시되는 메소드를 호출하는 것은 주어진 인자(arg1에서 argN) 전달하고 Array객체로 결과를 반환한다.
    map(iterator) instance iterator: Function(value, index)를 충족하는 함수 객체 collect()과 같다.
    max([iterator]) instance iterator: Function(value, index)를 충족하는 함수 객체 집합내 가장 큰 값이나 iterator가 주어진다면 집합내 각각의 요소를 위한 iterator호출의 가장 큰 결과를 반환한다.
    include(obj) instance obj: 객체 include()과 같다.
    min([iterator]) instance iterator: Function(value, index)를 충족하는 함수 객체 집합내 가장 작은 값을 가진 요소나 iterator가 주어진다면 집합내 각각의 요소를 위한 iterator호출의 가장 작은 결과를 가진 요소를 반환한다.
    partition([iterator]) instance iterator: Function(value, index)를 충족하는 함수 객체 두개의 다른 배열을 포함하는 Array를 반환한다. 첫번째 배열은 true를 반환하는 iterator함수를 야기하는 모든 요소를 포함할것이고 두번째 배열은 남아있는 요소를 포함할것이다. 만약 iterator가 주어지지 않는다면, 첫번째 배열은 true로 해석하는 요소를 포함할것이고 다른 배열은 남아있는 요소를 포함할것이다.
    pluck(propertyName) instance propertyName : 각각의 요소로부터 읽어들이는 프라퍼티의 이름. 이것은 요소의 인덱스를 포함할수 있다. 집합의 각각의 요소내 propertyName에 의해 명시된 프라퍼티에 값을 가져가고 Array객체로 결과를 반환한다.
    reject(iterator) instance iterator: Function(value, index)를 충족하는 함수 객체 집합내 각각의 요소를 위한 iterator함수를 호출하고 false로 해석하는 값을 반환하는 iterator함수를 야기하는 모든 요소를 가진 Array를 반환한다. 이 함수는 findAll()과는 반대되는 함수이다..
    select(iterator) instance iterator: Function(value, index)를 충족하는 함수 객체 findAll()과 같다.
    sortBy(iterator) instance iterator: Function(value, index)를 충족하는 함수 객체 iterator함수 호출결과를 따르는 정렬된 모든 요소를 가진 Array을 반환.
    toArray() instance (none) 집합의 모든 요소를 가지는 Array를 반환.
    zip(collection1[, collection2 [, ... collectionN [,transform]]]) instance collection1 .. collectionN: 병합될 목록, transform: Function(value, index)를 충족하는 함수 객체 현재의 집합으로 각각의 주어진 집합을 병합한다. 이 병합 작업은 같은 수의 요소를 가진 새로운 배열을 반환한다. 현재 집합과 각각의 요소가 각각의 병합된 집합으로부터 같은 인덱스를 가진 요소의 배열(이것을 하위 배열이라고 부르자.)이다. transform함수가 주어진다면, 각각의 하위 배열은 반환되기 전에 이 함수에 의해 변형딜것이다. 빠른 예제 : [1,2,3].zip([4,5,6], [7,8,9]).inspect() 는 "[[1,4,7],[2,5,8],[3,6,9] ]" 를 반환한다.

    Hash 객체

    Hash 객체는 hash구조를 구현한다. 이를테면, Key:Value쌍의 집합.
    Hash객체내 각각의 항목은 두개의 요소(첫번째는 key, 두번째는 value)를 가진 배열이다. 각각의 항목은 두개의 프라퍼티(key 와 value)를 가진다.
    메소드 종류 인자 상세설명
    keys() instance (none) 모든 항목의 key를 가진 Array을 반환
    values() instance (none) 모든 항목의 value를 가진 Array을 반환
    merge(otherHash) instance otherHash: Hash 객체 hash와 전달된 다른 hash를 조합하고 새로운 결과 hash를 반환
    toQueryString() instance (none) 쿼리 문자열처럼 포맷팅된 문자열로 hash의 모든 항목을 반환. 이를테면 'key1=value1&key2=value2&key3=value3'
    inspect() instance (none) key:value쌍을 가진 hash의 포맷팅된 문자열 표현을 반환하기 위해 변경(오버라이드)

    ObjectRange 클래스

    Enumerable으로부터 상속
    상위 경계나 하위 경계로 값들의 범위를 표시
    프라퍼티 타입 종류 상세설명
    start (any) instance 범위의 시작값
    end (any) instance 범위의 마지막값
    exclusive Boolean instance 경계자체가 범위의 일부인지 판단
    메소드 종류 인자 상세설명
    [ctor](start, end, exclusive) constructor start: 시작값, end: 마지막값, exclusive: 경계가 범위내 포함되는가.? 하나의 range객체를 생성한다. start 에서 end로 범위를 지정한다. start 와 end가 같은 타입의 객체이고 succ()메소드를 가져야만 한다.
    include(searchedValue) instance searchedValue: 검색할 값 주어진 값이 범위내 값인지 체크. true 나 false값을 반환한다.

    The Class object

    Class 객체는 라이브러리에서 다른 클래스를 선언할때 사용된다. 클래스를 선언할때 이 객체를 사용하는 것은 생성자로 제공되는 initialize()메소드를 지원하기 위한 새로운 클래스를 발생시킨다.
    아래의 샘플을 보라.
    //declaring the class
    var MySampleClass = Class.create();
    //defining the rest of the class implmentation
    MySampleClass.prototype = {
    initialize: function(message) { this.message = message; },
    showMessage: function(ajaxResponse) { alert(this.message); }
    };
    //now, let's instantiate and use one object
    var myTalker = new MySampleClass('hi there.');
    myTalker.showMessage();
    //displays alert
    메소드 종류 인자 상세설명
    create(*) instance (any) 새로운 클래스를 위한 생성자를 정의

    Ajax 객체

    이 객체는 AJAX기능을 제공하는 많은 다른 클래스를 위한 root와 명명공간(namespace)처럼 제공한다.
    프라퍼티 타입 종류 상세설명
    activeRequestCount Number instance 진행중인 AJAX요청의 수.
    메소드 종류 인자 상세설명
    getTransport() instance (none) 새로운 XMLHttpRequest 객체를 반환

    Ajax.Responders 객체

    Enumerable로 부터 상속되었다
    이 객체는 Ajax관련 이벤트가 발생할때 호출될 객체의 목록을 보존한다. 예를 들어, 당신이 AJAX작업을 위한 전역 예외 핸들러를 연결하길 원한다면 이 객체를 사용할수 있다.
    프라퍼티 타입 종류 상세설명
    responders Array instance 객체의 목록은 AJAX이벤트 알림(notifications)을 위해 등록되었다..
    메소드 종류 인자 상세설명
    register(responderToAdd) instance responderToAdd: 호출될 메소드를 가진 객체 responderToAdd인자를 전달하는 객체는 AJAX이벤트(이를테면, onCreate, onComplete, onException 등등)처럼 명명된 메소드를 포함해야만 한다. 유사한 이벤트가 발생하면, 적절한 이름을 가진 메소드를 포함하는 모든 등록된 객체가 호출되는 메소드를 가질것이다.
    unregister(responderToRemove) instance responderToRemove: list로부터 제거될 객체 responderToRemove 인자로 전달되는 객체는 등록된 객체의 list로부터 제거될것이다.
    dispatch(callback, request, transport, json) instance callback: 보고되는 AJAX이벤트 이름, request: 이벤트를 책임지는 the Ajax.Request 객체, transport: AJAX호출을 가지는 XMLHttpRequest 객체, json: 응답의 X-JSON 헤더(존재할때만) 등록된 객체의 목록을 통해 실행하는 것은 callback 인자내 결정된 메소드를 가지는 것을 찾는다. 호출되는 각각의 메소드는 다른 3개의 인자를 전달한다. AJAX응답이 몇몇 JSON컨텐츠를 가지는 X-JSON HTTP 헤더를 포함한다면, 이것은 평가되고 json인자로 전달될것이다. 만약 이벤트가 onException라면, transport인자는 대신에 예외를 가질것이고 json은 전달되지 않을것이다.

    Ajax.Base 클래스

    이 클래스는 Ajax객체내 정의된 다른 대부분의 클래스를 위한 기본(base)클래스처럼 사용된다.
    메소드 종류 인자 상세설명
    setOptions(options) instance options: AJAX 옵션 AJAX작업을 위해 필요한 옵션 셋팅
    responseIsSuccess() instance (none) 만약 AJAX작업이 성공한다면 true를 반환하고, 실패한다면 false를 반환
    responseIsFailure() instance (none) responseIsSuccess()와는 반대.

    Ajax.Request 클래스

    Ajax.Base로 부터 상속
    AJAX 작업을 캡슐화
    프라퍼티 타입 종류 상세설명
    Events Array static AJAX작업중 보고되는 가능한 이벤트/상태의 목록. 목록은 'Uninitialized', 'Loading', 'Loaded', 'Interactive', 그리고 'Complete.'를 포함한다.
    transport XMLHttpRequest instance AJAX작업을 가지는 XMLHttpRequest 객체
    url String instance 요청에 의해 대상이 되는 URL
    메소드 종류 인자 상세설명
    [ctor](url, options) constructor url: 꺼내기 위한 url, options: AJAX 옵션 주어진 옵션을 사용하여 주어진 url을 호출할 이 객체의 하나의 인스턴스를 생성. 중요사항: 선택된 url은 브라우저의 보안 셋팅을 위한 대상이 될 가치가 없다. 많은 경우 브라우저는 현재 페이지처럼 같은 호스트로부터가 아니라면 url을 가져오지 않을것이다. 당신은 설정을 피하거나 사용자의 브라우저를 제한하기 위한 로컬 url만을 사용할 것이다.
    evalJSON() instance (none) 이 메소드는 대개 외부적으로 호출되지 않는다. 이것은 AJAX응답내 존재하는 X-JSON HTTP헤더의 컨텐츠를 평가하기 위해 내부적으로 호출된다.
    evalReponse() instance (none) 이 메소드는 대개 외부적으로 호출되지 않는다. AJAX응답이 text/javascript의 Content-type헤더를 가진다면, 응답 몸체는 평가되고 이 메소드는 사용될것이다.
    header(name) instance name: HTTP 헤더명 이 메소드는 대개 외부적으로 호출되지 않는다. 이것은 AJAX응답의 HTTP헤더의 컨텐츠를 가져오기 위해 내부적으로 호출된다.
    onStateChange() instance (none) 이 메소드는 대개 외부적으로 호출되지 않는다. 이것은 AJAX호출 상태 변경시 객체 자체에 의해 호출된다.
    request(url) instance url: AJAX호출을 위한 url 이 메소드는 대개 외부적으로 호출되지 않는다. 이것은 생성자를 호출하는 동안 벌써 호출되었다.
    respondToReadyState(readyState) instance readyState: 상태 숫자값(1 에서 4) 이 메소드는 대개 외부에서 호출되지 않는다. 이것은 AJAX호출 상태가 변경될때 객체 자체에 의해 호출된다.
    setRequestHeaders() instance (none) 이 메소드는 대개 외부적으로 호출되지 않는다. 이것은 HTTP요청을 하는 동안 보내어질 HTTP헤더를 조합하기 위한 객체 스스로에 의해 호출된다.

    options 인자 객체

    AJAX작업의 중요한 부분은 options 인자이다. 이것은 기대되는 프라퍼티를 가지는 동안 어떠한 객체도 전달될수 있다. 이것은 AJAX호출을 위해 익명 객체를 생성하는 것이 공통적이다.
    프라퍼티 타입 디폴트 상세설명
    method String 'post' HTTP요청의 메소드
    parameters String '' 요청에 전달한 값들의 url형태의 목록
    asynchronous Boolean true AJAX호출이 비동기적으로 만들어지는지 표시
    postBody String undefined HTTP POST의 경우 요청의 몸체내 전달되는 내용
    requestHeaders Array undefined 요청과 함께 전달되기 위한 HTTP헤더의 목록. 이 목록은 많은 수의 항목을 가져야 한다. 나머지 항목은 사용자 정의 헤더의 이름이다. 그리고 다음의 항목은 헤더의 문자열 값이다. 예제 : ['my-header1', 'this is the value', 'my-other-header', 'another value']
    onXXXXXXXX Function(XMLHttpRequest) undefined 각각의 이벤트/상태가 AJAX호출이 발생하는 동안 도착할때 호출될 사용자정의 함수. 예제 var myOpts = {onComplete: showResponse, onLoaded: registerLoaded};. 사용되는 함수는 AJAX작업을 가지는 XMLHttpRequest객체를 포함하는 하나의 인자를 받을것이다.
    onSuccess Function(XMLHttpRequest) undefined AJAX호출이 성공적으로 완성될때 호출될 사용자정의 함수. 사용되는 함수는 AJAX작업을 가지는 XMLHttpRequest객체를 포함하는 하나의 인자를 받을것이다.
    onFailure Function(XMLHttpRequest) undefined AJAX호출이 에러를 가진채 끝날때 호출될 사용자정의 함수. 사용되는 함수는 AJAX작업을 가지는 XMLHttpRequest객체를 포함하는 하나의 인자를 받을것이다.
    insertion Function(Object, String) null 삽입하기 위해 호출되는 함수는 텍스트를 요소로 반환한다. 함수는 수정되기 위한 요소객체와 Ajax.Updater객체에만 적용되는 응답 텍스트의 두개의 인자를 가지고 호출된다.
    evalscripts Boolean undefined, false 스크립트 블럭이 응답이 도착했을때 평가할지를 판단. Ajax.Updater객체에만 적용.
    decay Number undefined, 1 Ajax.PeriodicalUpdater 객체는 받은 응답이 마지막 것과 같을때 비율을 새롭게 하여 연속적인 후퇴를 결정. 예를 들어, 당신이 2를 사용한다면, 새롭게 된것중에 하나가 이전것과 같은 결과를 만든후에, 객체는 다음 refresh를 위한 시간의 두배를 기다릴것이다. 이것은 다시 반복한다면, 객체는 4배를 기다릴것이다. 이것을 후퇴를 피하기 위해 정의되지 않거나 1을 사용하도록 남겨두라.

    Ajax.Updater 클래스

    Ajax.Request로 부터 상속
    요청된 url이 당신 페이지의 특정 요소내 직접적으로 삽입하길 원하는 HTML을 반환할때 사용된다. 당신은 url이 도착을 평가할 <script>블럭을 반환할때 이 객체를 사용할수 있다. 스크립트로 작업하기 위해 evalscripts 옵션을 사용하라.
    프라퍼티 타입 종류 상세설명
    containers Object instance 이 객체는 두개의 프라퍼티(containers.success 는 AJAX호출이 성공할때 사용될것이다. 그리고 AJAX호출이 실패한다면 containers.failure가 사용될것이다.)를 포함한다.
    메소드 종류 인자 상세설명
    [ctor](container, url, options) constructor container: 이것은 요소의 id, 요소객체 자체, 또는 두개의 프라퍼티(AJAX호출이 성공했을때 사용될 object.success 요소(또는 id), 그리고 AJAX호출이 실패했을때 사용될 object.failure요소(또는 id))를 가지는 객체가 될수 있다. url: 가져오기 위한 url, options: AJAX 옵션 주어진 옵션을 사용하여 주어진 url을 호출할 이 객체의 하나의 인스턴스를 생성.
    updateContent() instance (none) 이 메소드는 대개 외부적으로 호출되지 않는다. 이것은 응답을 받았을때 객체 자체에 의해 호출된다. 이것은 HTML로 적절한 요소를 수정하거나 insertion옵션내 전달되는 함수를 호출할것이다. 이 함수는 두개의 인자(수정되기 위한 요소와 응답 텍스트)를 가지고 호출될것이다.

    Ajax.PeriodicalUpdater 클래스

    Ajax.Base로 부터 상속
    이 클래스는 반복적으로 인스턴스화하고 페이지에서 요소를 새롭게 하거나 Ajax.Updater가 수행할수 있는 다른 작업중 어느것을 수행하기 위한 Ajax.Updater객체를 사용한다. 좀더 많은 정보를 위해 Ajax.Updater 참조를 체크하라.
    프라퍼티 타입 종류 상세설명
    container Object instance 이 값은 Ajax.Updater생성자에 일관적으로 전달될것이다.
    url String instance 이 값은 Ajax.Updater의 생성자에 일관적으로 전달될것이다.
    frequency Number instance 초단위의 refresh간격. 디폴트는 2초. 이 숫자는 Ajax.Updater 객체를 호출할때 현재 축소(decay)에 의해 곱해질것이다.
    decay Number instance 작업을 재-수행할때 적용될 축소(decay)레벨을 유지
    updater Ajax.Updater instance 가장 최신에 사용된 Ajax.Updater 객체
    timer Object instance 다른 refresh를 위한 시각일때 객체를 알리기 위해 사용되는 자바스크립트 타이머
    메소드 종류 인자 상세설명
    [ctor](container, url, options) constructor or container:이것은 요소의 id, 요소객체 자체, 또는 두개의 프라퍼티(AJAX호출이 성공할때 사용될 object.success 요소(나 id), AJAX호출이 실패할때 사용할 object.failure 요소(나 id))를 가지는 객체가 될수 있다. url: 가져오기 위한 url, options: AJAX 옵션 주어진 옵션을 사용하여 주어진 url을 호출할 이 객체의 하나의 인스턴스를 생성
    start() instance (none) 이 메소드는 대개 외부적으로 호출되지 않는다. 이것의 정기적인 작업 수행을 시작하기 위해 객체 자체에 의해 호출된다.
    stop() instance (none) 이 메소드는 대개 외부적으로 호출되지 않는다. 이것의 정기적인 작업 수행을 시작하기 위해 객체 자체에 의해 호출된다.
    updateComplete() instance (none) 이 메소드는 대개 외부적으로 호출되지 않는다. 요청을 완성한 후에 사용되는 Ajax.Updater에 의해 호출된다. 이것은 다음 refresh스케줄링 하기 위해 사용된다.
    onTimerEvent() instance (none) 이 메소드는 대개 외부적으로 호출되지 않는다. 이것은 다음 수정을 위한 시각일때 내부적으로 호출된다.

    Element 객체

    이 객체는 DOM내 요소를 변경하기 위해 몇몇 유틸리티성 함수들을 제공한다.
    메소드 종류 인자 상세설명
    visible(element) instance element: element 객체 또는 아이디 요소가 눈에 보이는지 표시하는 Boolean값을 반환
    toggle(elem1 [, elem2 [, elem3 [...]]]) instance elemN: element 객체 또는 아이디 각각의 전달된 요소의 가시성(visibility)을 토글(toggle)한다.
    hide(elem1 [, elem2 [, elem3 [...]]]) instance elemN: element 객체 또는 아이디 style.display를 'none'로 셋팅하여 각각의 요소를 숨긴다.
    show(elem1 [, elem2 [, elem3 [...]]]) instance elemN: element 객체 또는 아이디 style.display를 ''로 다시 셋팅하여 각각의 요소를 보여준다.
    update(element, html) instance element: element 객체 또는 아이디, html: html 컨텐츠 주어진 html인자를 가지는 요소의 내부 html을 대체. 주어진 html이 <script>블럭을 포함한다면, 그것들은 포함되지는 않지만 평가될것이다.
    remove(element) instance element: element 객체 또는 아이디 문서로 부터 요소를 제거한다.
    getHeight(element) instance element: element 객체 또는 아이디 요소의 offsetHeight값을 반환
    addClassName(element, className) instance element: element 객체 또는 아이디, className: CSS 클래스명 주어진 class명을 요소의 class명으로 추가
    hasClassName(element, className) instance element: element 객체 또는 아이디, className: name of a CSS class 요소가 class명중에 하나로 주어진 class명을 가진다면 true를 반환
    removeClassName(element, className) instance element: element 객체 또는 아이디, className: CSS 클래스명 요소의 class명으로 부터 주어진 class명을 제거
    cleanWhitespace(element) instance element: element 객체 또는 아이디 요소의 자식노드에서 공백을 제거

    The Abstract 객체

    이 객체는 라이브러리내 다른 클래스를 위한 root처럼 제공한다. 이것은 어떤 프라퍼티나 메소드도 가지지 않는다. 이 객체에 정의된 클래스는 전통적인 추상 클래스처럼 처리된다.

    Abstract.Insertion 클래스

    이 클래스는 동적으로 내용물을 추가할 다른 클래스를 위한 기본 클래스처럼 사용된다. 이 클래스는 추상 클래스처럼 사용된다.
    메소드 종류 인자 상세설명
    [ctor](element, content) constructor element: element 객체 또는 아이디, content: 삽입되는 HTML 동적 내용물 삽입을 도울 객체를 생성
    프라퍼티 타입 종류 상세설명
    adjacency String static, parameter 내용물이 주어진 요소에 대해 상대적으로 위치할 지점을 명시하는 파라미터. 가능한 값은 'beforeBegin', 'afterBegin', 'beforeEnd', 그리고 'afterEnd'.
    element Object instance 삽입이 상대적으로 만들어질 요소객체
    content String instance 삽입될 HTML.

    Insertion 객체

    이 객체는 라이브러리내 다른 클래스를 위한 root처럼 제공한다. 이것은 어떠한 프라퍼티나 메소드를 가지지 않는다. 이 객체에 정의된 클래스는 전통적인 추상 클래스처럼 처리된다.

    Insertion.Before 클래스

    Abstract.Insertion로 부터 상속
    요소 앞에 HTML삽입
    메소드 종류 인자 상세설명
    [ctor](element, content) constructor element: element 객체 또는 아이디, content: 삽입되는 HTML Abstract.Insertion으로 부터 상속. 동적으로 내용물을 삽입하는 것을 돕는 객체를 생성
    다음의 코드는
    <br>Hello, <span id="person" style="color:red;">Wiggum. How's it going?</span> <script> new Insertion.Before('person', 'Chief '); </script>
    다음처럼 HTML이 변경될것이다.
    <br>Hello, Chief <span id="person" style="color:red;">Wiggum. How's it going?</span>

    Insertion.Top 클래스

    Abstract.Insertion로 부터 상속
    요소아래의 첫번째 자식으로 HTML을 삽입. 이 내용물은 요소의 열기 태그뒤에 위치할것이다.
    작성자: 시간: 댓글 없음:
    라벨: ,

    Prototype.js 가이드 02 _ Ajax support

    The Ajax 객체

    앞서의 함수들은 분명 좋은 코드들이지만 그러한 함수들을 구현할 능력이 있거나 이미 유사한 자신만의 함수를 사용하고 있을지 모른다. 하지만 prototype.js를 사용하는 이유는 대부분 Ajax기능을 쉽게 사용하길 원하기 때문이기에 이제 prototype.js를 사용하여 AJAX로직을 좀더 쉽게 작성할 수있는 방법을 살펴보기로 하자.

    먼저 ProtoType라이브러니는 Ajax 기능 구현을 위해 Ajax 객체라는 것을 제공하고 있다
    AJAX객체는 AJAX관련 함수를 작성시 만들어지는 코드의 단순화와 캡슐화를 위해 ProtoType라이브러리에 미리 정의된 객체이며 AJAX객체는 AJAX로직이 캡슐화되어 제공되어지는 다수의 클래스를 포함하고 있다.

     

    Ajax.Request 클래스 사용하기

    만약 어떠한 헬퍼(helper) 라이브러리도 사용하지 않는다면 Ajax기능을 사용하기 위해 수많은 코드에서 XMLHttpRequest 객체를 생성해야 것이며 각 실행 단계마다 비동기적으로 체크를 해야 할것이며. 그리고나서 응답을 뽑아내는 것을 반복할 것이다.
    protoType라이브러리에서는 이러한 기능을 지원하기 위해 Ajax.Request클래스를 정의하고 있다.

    라이브러리를 통해 Ajax 어플리케이션을 만들기 위해서는 다음과 같은 방식으로 Ajax.Request 객체를 생성하여야 한다
    [code javascript]var myAjax = new Ajax.Request( url, {method: 'post', parameters: data, onComplete: ajax_response} );[/code] 위에서 사용된 Ajax.Request객체의 생성자의 두번째 파라미터의 의미는 Ajax호출을 위한 옵션을 정의하고 있다 즉 위의 예에서는 HTTP POST명령을 통해 첫번째 파라미터인 url을 호출할 것이며 변수 data에 포함된 조회문자열을 전달하고 응답을 받아들이는 작업을 마칠 때 ajax_response()함수를 호출하라는 프로퍼티를 가지는 Ajax.Request객체를 생성하라는 뜻이다

    예를 들었던 프로퍼티 외에 AJAX를 비동기적으로 서버에 호출할지를 결정( true 또는 false) 할 수 있는 asynchronous 프로퍼티(디폴트 값은 true이다.) 등 Ajax.Request 객체 내에서 정의하고 활성화 시킬수 있는 몇개의 프로퍼티가 더 존재하고 있다

    XMLHttpRequest는 HTTP호출을 하는 동안 진행과정(Loading, Loaded, Interactive,Complete)를 알릴수 있는데 각 단계마다 사용자정의함수를 통해 Ajax.Request객체를 호출할 수 있으며 일반적으로 Complete 상태에서 Ajax.Request객체를 호출하고 있다
    그 방법은 위의 예제(onComplete)처럼 요청옵션내 onXXXXX에서 간단히 설정하기만 하면 그 설정된 이름을 가진 함수를 통하여 XMLHttpRequest객체 자체가 될 하나의 인자와 response HTTP header(X-JSON)라는 또 하나의 인자를 가지는 객체를 전달 받을 수 있을 것이다
    당신은 반환 데이타를 얻기 위해 이 객체를 사용하거나 호출된 HTTP 결과 코드를 포함하는 Status프로퍼티 체크를 하기 위해 이 객체를 사용할 지도 모른다.

    또 다른 두개의 옵션은 결과에 대한 처리수행을 위해 사용될수 있다.
    onSuccess옵션을 통해 AJAX호출이 에러없이 수행될 때 호출할 함수를 명시할 수 있다.
    onFailure옵션은 반대로 에러가 발생할때 호출될 함수를 명시할 수 있다.
    이 두가지 옵션에서도 onXXXXX에서 선택한 함수와 마찬가지로 AJAX호출시 전달되는 XMLHttpRequest객체나 evaluated X-JSON header를 전달하도록 할수 있을 것이다.

    앞서 이야기 한 내용들을 토대로 간단한 예제를 만들어 보기로 하자
    먼저 Ajax.Request 객체를 생성하는 함수를 만든다
    [code javascript]function ajax_request(url, data) { var myAjax = new Ajax.Request( url, {method: 'post', parameters: data, onComplete: ajax_response} ); }[/code] 두번째로 request가 끝나게 되면 호출될 ajax_response()라는 함수로 만들어 보자
    [code javascript]function ajax_response(originalRequest) { if(!bHasRedirect) { //process originalRequest.responseText; } else { bHasRedirect = false; ajax_request(originalRequest.responseText, ""); } }[/code] 이제 Ajax Request를 만들고 나면 만약 전역변수로 bHashRedirec를가 true로 설정하게 하는 또다른 Ajax.Request가 만들어지기거나 함수내 originalRequest.responseText()를 통하여 수행할 더이상의 코드가 존재하지 않을 때까지 response는 항상 ajax_response()를 호출할 것이다

    Ajax.Responders 객체 사용하기

    1.4.0 버전에서, 이벤트 반환 핸들링에 대하여 새로이 소개되고 있는 것이 있는데 만약 AJAX호출이 발생하더라도 특정 이벤트를 위해 항상 수행되어야 하는 코드를 가지고 있다면 이 새로운 Ajax.Responders 객체를 사용할수 있다고 한다 .
    [code html][/code] 위의 예에서와 같이 AJAX호출이 진행중이라는 시각적 표시를 보여주길 원한다고 했을 때. 당신은 두개의 전역 이벤트 핸들러를 사용할수 있다. 하나는 첫번째 호출이 시작되었을때 아이콘을 보여주는것이고 다른 하나는 적어도 하나가 끝났을때 아이콘을 숨기는 것이다.

    더 자세한 사항은 Ajax.Request 참조문서나 options 참조문서를 참조하길 바란다

    Ajax.Updater 클래스 사용하기

    Ajax.Updater 클래스는 어떤 요소에서 Ajax 호출로부터 반환된 HTML을 채우게 되는지 알려주는 클래스입니다.말보다 한줄의 소스가 더 쉽게 이해가 될 것 같습니다
    [code html]
    [/code] Ajax.Updater 객체생성 코드는 Ajax.Request객체와 유사하지만.
    인자가 하나 더 추가 되어 있습니다.
    이것은 만약 html안에 이미 포맷팅한 정보를 가지고자 할때 Ajax.Updater 클래스를
    사용하여 쉽게 채우고자 하는 위치point입니다

    클라이언트에서 서버 에러들을 다루는 것이 어떻게 가능한지 보기 위해 코드를 조금 변경해보자.
    [code html]
    [/code] 위코드는에서는 앞서의 함수에서 보다 호출을 위해 더 많은 옵션을 추가하고 에러 상황을 뽑아내기 위해 함수를 명시하였습니다.(이것은 onFailure옵션을 사용하여 수행한다).
    또한 성공적으로 수행된 경우에만 활성화될 묶음자(placeholder)를 명시하였습니다.

    첫번째 인자는 두가지 프로퍼티(success/failure)를 가지는데 위에서는 failure 프로퍼티를 사용하지 않고 onFailure옵션에서 reportError함수를 사용하여 에러상황을 표시하도록 하였습니다.

    url로 호출된 서버 로직에서 HTML 대신에 자바스크립트 코드를 반환한다면, Ajax.Updater객체는 자바스크립트 코드가 될수 있습니다. 자바스크립트로 응답을 처리하기 위한 객체를 얻기 위해서는 객체 생성자의 마지막 인자에 evalscripts: true; 옵션을 추가하기만 하면 된다
    .
    좀더 상세한 설명을 원하신다면, Ajax.Request 참조문서와 Ajax.options 참조문서를 참조하세요.
    작성자: 시간: 댓글 없음:
    라벨: ,

    Prototype.js 가이드 01

    Prototype은 무엇인가.?

    prototype.js는 Sam Stephenson에 의해 작성된 자바스크립트 라이브러리이며 웹2.0의 특성에 따라 작성된 코드들은 비동기적 웹페이지 구현시 많은 도움을 줄 수 있을 것입니다

     

     

    ProtoType의 사용

     

    prototype은 http://prototype.conio.net/에서 다운 받을 수 있으며 구현하고자 하는 페이지에서 다음과 같은 구문을 추가하면 prototype framework를 사용할 수 있다

     

    [code][/code] 라이브러리를 사용하는 것은 반복적인 타이핑과 어구를 많이 줄일수 있게 됨으로서 작업 생산성 및 효율성을 높이는 데 있다
    당연히 prototype.js에도 미리 정의된 많은 수의 객체와 유틸리티 함수를 가지게 되는데 어떤 것들이 있는지 살펴보도록 한다

     

    유틸리티 함수들(utility functions)

     

    $() 함수 사용하기

    $()함수는 가장 많이 사용되는 DOM의 document.getElementById()함수에 대한 편리한 단축키라고 할 수 있다. 예를 들면 DOM함수를 통해 특정id를 가진 요소 하나를 가져온다고 하자

     

    [code javascript]node = document.getElementById("elementID");[/code]

     

    위의 식은 $()를 사용하여 다음과 같이 바꿀수 있다 

     

    [code javascript]node = $("elementID");[/code]

     

    하지만 $()함수는 DOM함수와는 달리 여러개의 id를 사용할수 있다는 장점이 있다 이 때 반환하는 값은 Array객체를 반환한다

     

    [code javascript]allNodes = $("firstDiv", "secondDiv"); for(i = 0; i < allNodes.length; i++) { alert(allNodes[i].innerHTML); }[/code]

     

    이 함수의 또 다른 장점은 이 함수를 통하여 id문자열이나 요소객체 자체를 전달할 수 있기 때문에 인자타입을 가지는 다른 함수를 생성할때 매우 유용하다

     

    $F() 함수 사용하기

    $F() 함수는  DOM의 document.getElementById()함수에 대한 또 다른 단축키라 할 수 있다.
    이것은 text박스나 드랍다운 list와 같은 어떤 필드의 입력 컨트롤의 값을 반환한다.
    마찬가지로 요소 id나 요소객체 자체를 인자로 가질수 있다.

     

    예를 들면 다음과 같은 Form필드가 존재한다고 하자
    [code html] [/code]

     

    각각의 필드값은 다음과 같이 가져올 수 있다

     

    $F("textfield");     // returns the value of the text input
    $F("areafield");   // returns the value of the textarea
    $F("selectfield"); // returns the selected value of the select
    $F("checkfield"); // returns undefined if not checked, or the value

     

    $F()을 통해 쉽게 입력컨트롤의 값을 쉽게 가져올 수 있지만 라디오그룹에서는 사용하기 힘들다는 점과 $()와 같이 다수의 인자를 가질수 없다.

     

    $A() 함수 사용하기

    $A() 함수는 인자들을 하나의 인자로 받아들여 Array객체로 변환한다

     

    Array Class상속을 겸한 이 함수는 어떠한 enumerable list 형태도 Array객체로 변환 또는 복사 할 수 있다는 장점이 있다.
    예를 들면 다음과 같이 DOM의 NodeLists를 regular Arrays로 변환하기에 유용하다  [code html] [/code]

     

     

    $A() 의 또 하나의 장점은 함수생성시 인자의 수를 유연하게 받아들이게 한다는 점이다

     

    [code html] [/code]

     

    $H() 함수 사용하기

    $H() 함수는 결합된 배열처럼 보이는 Hash객체로 변환한다. [code html][/code]

     

     

    $R() 함수 사용하기

    $R() 함수는 new ObjectRange(lowerBound, upperBound, excludeBounds) 형태의 다른 표현이다. 이 클래스에 대하여는 ObjectRange 클래스 문서를 통해 확인해보시길 바라며. 다음은 each 메소드를 통해 반복(iterators)의 사용법을 보여주는 간단한 예제입니다.
    더 많은 메소드는 Enumerable 클래스 문서에서 보실 수 있습니다.
    [code html] [/code]

     

     

    Try.these() 함수 사용하기

    Try.these()함수는 개발자가 across Browser구현시 서로 다른 javascript등을 작성할 필요가 있는 코드생성시 도움을 주는 중요한 함수입니다.
    이 함수는 인자처럼 많은 수의 함수를 가지고 그것들을 순차적으로 호출하도록 해준다. 이것은 함수중에 하나씩 수행하고 성공적인 함수호출의 결과를 반환할때까지 순차적으로 수행된다.
    [code html] [/code]
    작성자: 시간: 댓글 없음:
    라벨: ,

    2010년 3월 10일 수요일

    Ajax 관련 링크

     
    Ajax 입문
    Foundations of Ajax 소스 및 강좌 : http://blog.naver.com/jinoxst/140021512014
    참고 사이트 정리 : http://cafe.naver.com/ajaxdev/37
     
    Ajax 기술 정리
     
    Ajax 읽어볼만한 글
    Web 2.0과 Ajax 애플리케이션 : http://cafe.naver.com/ajaxdev/4
    Ajax의 효용성에 대한 논문 : http://cafe.naver.com/ajaxdev/101
    작성자: 시간: 댓글 없음:
    라벨: ,

    해상도에따라 Margin 조정하기

    [code html]
    내용
    [/code]
    작성자: 시간: 댓글 없음:
    라벨: ,

    내용 높이에 따라 자동으로 늘어나는 iframe

    [code html] [/code]
    작성자: 시간: 댓글 없음:
    라벨: ,

    FAQ 목록 만들기

    [code html]
    첫 번째 질문입니다.
    첫 번째 답변입니다.
    두 번째 질문입니다.
    두 번째 답변입니다.
    [/code]
    작성자: 시간: 댓글 없음:
    라벨: ,

    모서리 테두리 만들기



    CSS로 위와 같은 테두리 만들기

    [code css]
    [/code]
    갤러리의 이미지 표현 같은곳에 사용하면 좋겠다.
    작성자: 시간: 댓글 없음:
    라벨: ,

    dl, dt, dd 태그 css로 정의하기

    [code html]
    apmsoft 의 apm의 뜻은?
    a : 아파치(apache)
    p : PHP
    m : MYSQL
    [/code]

     

    # 결과

    apmsoft의 apm의 뜻은? 
    a : 아파치(apache)  
    p : PHP
    m : MYSQL


    위와 같이 출력 된다.
    기본적으로 dl, dt, dd 태그는 블록적 성격을 가진다.
    그래서 한줄씩 출력하게 된다.

    [code html]
    apmsoft 의 apm의 뜻은?
    a : 아파치(apache)
    p : PHP
    m : MYSQL
    [/code]

     

    # 결과

    apmsoft의 apm의 뜻은? 
    a : 아파치(apache)   p : PHP   m : MYSQL


    inline 을 설정해 주면 세로가 아닌 가로로 출력을 하게 된다.

    dl dt dd 를 사용하게 되면 리스트 적인 의미를 담은 글이 되기 때문에 성공적인 코딩이라 말할 수 있겠다.

    작성자: 시간: 댓글 없음:
    라벨: ,
    피드 구독하기: 글 (Atom)