프로토 타입-퀵 가이드

프로토 타입이란?

Prototype은 동적 웹 애플리케이션의 개발을 용이하게하는 자바 스크립트 프레임 워크입니다. 프로토 타입은 Sam Stephenson이 개발했습니다.

Prototype은 JavaScript 라이브러리로, 매우 쉽고 재미있는 방식으로 DOM을 조작 할 수 있습니다 (브라우저 간).

Scriptaculous 및 Rico 와 같은 기타 라이브러리 는 Prototype의 기반에 구축되어 위젯 및 기타 최종 사용자 항목을 생성합니다.

Prototype −

  • 유용한 메소드로 DOM 요소 및 내장 유형을 확장합니다.

  • 상속을 포함한 클래스 스타일 OOP에 대한 기본 지원이 있습니다.

  • 이벤트 관리에 대한 고급 지원이 있습니다.

  • 강력한 Ajax 기능이 있습니다.

  • 완전한 애플리케이션 개발 프레임 워크가 아닙니다.

  • 위젯이나 표준 알고리즘 또는 I / O 시스템의 전체 세트를 제공하지 않습니다.

프로토 타입을 설치하는 방법?

프로토 타입은 prototype.js라는 단일 파일로 배포됩니다. 프로토 타입 라이브러리를 설정하려면 아래 언급 된 단계를 따르십시오.

  • 다운로드 페이지 (http://prototypejs.org/download/) 로 이동하여 편리한 패키지로 최신 버전을 가져옵니다.

  • 이제 웹 사이트의 디렉토리 (예 : / javascript)에 prototype.js 파일을 넣으십시오.

이제 웹 페이지에서 강력한 Prototype 프레임 워크를 사용할 준비가되었습니다.

프로토 타입 라이브러리를 사용하는 방법?

이제 다음과 같이 Prototype 스크립트를 포함 할 수 있습니다.

<html>
   <head>
      <title>Prototype examples</title> 
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
   </head>
   
   <body>
      ........
   </body>
</html>

예

다음은 Prototype의 $ () 함수를 사용하여 JavaScript에서 DOM 요소를 얻는 방법을 보여주는 간단한 예입니다.

<html>
   <head>
      <title>Prototype examples</title>
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      
      <script>
         function test() {
            node = $("firstDiv");
            alert(node.innerHTML);
         }
      </script>
   </head>

   <body>
      <div id = "firstDiv">
         <p>This is first paragraph</p> 
      </div>
      
      <div id = "secondDiv">
         <p>This is another paragraph</p>
      </div>
      
      <input type = "button" value = "Test $()" onclick = "test();"/>
   </body>
</html>

산출

왜이 튜토리얼인가?

프로토 타입 프레임 워크를위한 아주 좋은 문서에서 확인할 수있다 prototypejs.org 일이 자습서를 참조해야하는 이유를 다음!

대답은이 튜토리얼에서 가장 일반적으로 사용되는 기능을 모두 모았다는 것입니다. 둘째, 공식 사이트에서 볼 수없는 적절한 예제와 함께 모든 유용한 방법을 설명했습니다.

Prototype Framework의 고급 사용자 인 경우 공식 웹 사이트로 바로 이동할 수 있습니다. 그렇지 않으면이 자습서가 좋은 시작이 될 수 있으며 참조 설명서처럼 사용할 수 있습니다.

이제 Prototype이 동적 웹 애플리케이션을 개발하기 위해 특별히 할 수있는 작업을 살펴 ​​보겠습니다.

크로스 브라우저 지원

JavaScript 프로그래밍을하는 동안 다른 웹 브라우저를 다르게 처리해야합니다. 프로토 타입 라이브러리는 모든 호환성 문제를 처리하는 방식으로 작성되었으며 번거 로움없이 크로스 브라우저 프로그래밍을 수행 할 수 있습니다.

문서 객체 모델

Prototype은 DOM 프로그래밍의 부담을 덜어주는 도우미 메서드를 제공합니다. Prototype을 사용하면 DOM을 매우 쉽게 조작 할 수 있습니다.

HTML 양식

Ajax를 사용하면 드래그 앤 드롭과 같은 다른 입력 메커니즘을 브라우저와 서버 간의 대화의 일부로 사용할 수 있습니다. 기존의 JavaScript 프로그래밍에서는 이러한 입력을 캡처하여 서버로 전달하기가 어렵습니다. Prototype은 HTML 양식 작업을위한 유틸리티 세트를 제공합니다.

자바 스크립트 이벤트

Prototype은 이벤트를 코딩하는 동안 뛰어난 브라우저 간 지원을 제공하며, 이벤트 처리 작업을 쉽게 할 수 있도록 Function 개체를 확장합니다.

Ajax 유틸리티

Prototype의 가장 중요한 기능은 Ajax를 지원한다는 것입니다. 모든 주요 브라우저는 Ajax를 ActiveX 구성 요소 또는 기본 JavaScript 객체로 가능하게하는 XMLHttpRequest 객체 버전을 지원합니다.

그러나 XMLHttpRequest는 매우 낮은 수준에서 HTTP 프로토콜을 노출하므로 개발자에게 많은 권한을 제공하지만 간단한 작업을 수행하려면 많은 코드를 작성해야합니다.

Prototype은 Ajax 헬퍼 객체의 계층 구조를 제공하기 위해 자체 객체 상속 시스템을 사용하며, 가장 일반적인 유형의 Ajax 요청을 한 줄에 코딩 할 수있는보다 집중된 헬퍼에 의해 더 일반적인 기본 클래스가 하위 클래스 화됩니다.

Prototype 라이브러리에는 많은 사전 정의 된 개체 및 유틸리티 함수가 함께 제공됩니다. 이러한 함수와 객체를 JavaScript 프로그래밍에서 직접 사용할 수 있습니다.

이러한 방법은 효율적인 프로토 타입 기반 JavaScript 코딩의 초석 중 하나입니다. 방법에 익숙해 지도록 시간을내어 연구하십시오.

이 장에서는 이러한 모든 유용한 방법을 예제와 함께 자세히 설명합니다.

S. 아니. 방법 및 설명
1. $ ()

문자열이 제공되면 문서에서 ID가 일치하는 요소를 반환합니다. 그렇지 않으면 전달 된 요소를 반환합니다.
2. $$ ()

임의의 수의 CSS 선택자 (문자열)를 취하고 이들 중 하나와 일치하는 확장 DOM 요소의 문서 순서 배열을 반환합니다.
삼. $ A ()

수신 한 단일 인수를 Array 객체로 변환합니다.
4. $ F ()

양식 컨트롤의 값을 반환합니다. 이것은 Form.Element.getValue의 편리한 별칭입니다.
5. $ H ()

객체를 연관 배열과 유사한 열거 가능한 Hash 객체로 변환합니다.
6. $ R ()

새 ObjectRange 개체를 만듭니다.
7. $ w ()

문자열을 배열로 분할하여 모든 공백을 구분 기호로 처리합니다.
8. 시도해보십시오.

임의의 수의 함수를 허용하고 오류를 발생시키지 않는 첫 번째 함수의 결과를 반환합니다.

document.getElementsByClassName

이 메서드는 CSS 클래스 이름이 className 인 모든 요소를 ​​검색 (및 확장)합니다 .

그러나이 메서드는 최신 버전의 Prototype에서 더 이상 사용되지 않습니다.

요소 객체는 DOM 내 요소를 변경하기 위해 다양한 유틸리티 기능을 제공합니다.

다음은 예제와 함께 모든 유틸리티 함수 목록입니다. 여기에 정의 된 모든 메서드는 $ () 함수를 사용하여 액세스 한 모든 요소에 자동으로 추가됩니다.

그래서 Element.show ( 'firstDiv'); $ ( 'firstDiv'). show ();를 쓰는 것과 같습니다.

프로토 타입 요소 방법

NOTE − 최소 버전 1.6의 prototype.js가 있는지 확인하십시오.

S. 아니. 방법 및 설명
1. absolutize ()

페이지 레이아웃에서 위치를 변경하지 않고 요소를 절대 위치 요소로 전환합니다.
2. addClassName ()

지정된 CSS 클래스 이름을 요소의 클래스 이름에 추가합니다.
삼. addMethods ()

나중에 확장 요소의 메서드로 사용할 수있는 Element 개체에 자신의 메서드를 혼합 할 수 있습니다.
4. 인접 ()

주어진 선택자와 일치하는 현재 요소의 모든 형제를 찾습니다.
5. 선조()

요소의 모든 조상을 수집하여 확장 요소의 배열로 반환합니다.
6. childElements ()

요소의 모든 자식을 수집하고 확장 요소의 배열로 반환합니다.
7.

classNames()

더 이상 사용되지 않습니다. 요소의 CSS 클래스 이름을 읽고 쓰는 데 사용되는 Enumerable 개체 인 ClassNames의 새 인스턴스를 반환합니다.
8. cleanWhitespace ()

공백 만 포함하는 요소의 모든 텍스트 노드를 제거합니다. 요소를 반환합니다.
9. clonePosition ()

선택적 인수 옵션에 정의 된대로 소스의 위치 및 / 또는 크기를 요소에 복제합니다.
10. cumulativeOffset ()

문서의 왼쪽 상단 모서리에서 요소의 오프셋을 반환합니다.
11. cumulativeScrollOffset ()

중첩 된 스크롤 컨테이너에있는 요소의 누적 스크롤 오프셋을 계산합니다.
12. 하위 항목 ()

요소가 조상의 하위 요소인지 확인합니다.
13. 자손()

요소의 모든 하위 항목을 수집하여 확장 요소의 배열로 반환합니다.
14. 하위()

cssRule과 일치하는 요소의 첫 번째 하위 항목을 반환합니다. cssRule이 제공되지 않으면 모든 하위 항목이 고려됩니다. 이러한 기준과 일치하는 하위 항목이 없으면 undefined가 반환됩니다.
15. 빈()

요소가 비어 있는지 테스트합니다 (즉, 공백 만 포함).
16. 넓히다()

Element.Methods 및 Element.Methods.Simulated에 포함 된 모든 메서드로 요소를 확장합니다.
17. 불()

현재 요소를 대상으로하는 사용자 지정 이벤트를 시작합니다.
18. firstDescendant ()

요소 인 첫 번째 자식을 반환합니다. 이는 모든 노드를 반환하는 firstChild DOM 속성과 반대입니다.
19. getDimensions ()

계산 된 요소의 너비와 높이를 찾아 객체의 키 / 값 쌍으로 반환합니다.
20.

getElementsByClassName

더 이상 사용되지 않습니다. CSS 클래스가 className 인 요소의 모든 하위 항목을 가져와 확장 요소의 배열로 반환합니다. $$ ()를 사용하십시오.
21.

getElementsBySelector

더 이상 사용되지 않습니다. 임의의 수의 CSS 선택자 (문자열)를 취하고 이들 중 하나와 일치하는 요소의 확장 된 자식 배열을 반환합니다. $$ ()를 사용하십시오.
22. getHeight ()

계산 된 요소 높이를 찾아 반환합니다.
23. getOffsetParent ()

요소의 가장 가까운 위치에있는 조상을 반환합니다. 아무것도 발견되지 않으면 본문 요소가 반환됩니다.
24. getStyle ()

요소의 주어진 CSS 속성 값을 반환합니다. 속성은 CSS 또는 낙타 형식으로 지정할 수 있습니다.
25. getWidth ()

계산 된 요소의 너비를 찾아 반환합니다.
26. hasClassName ()

요소에 주어진 CSS className이 있는지 확인합니다.
27. 숨는 장소()

요소를 숨기고 반환합니다.
28. 식별 ()

요소의 id 속성이있는 경우 반환하거나 고유 한 자동 생성 ID를 설정 및 반환합니다.
29.

immediateDescendants()

더 이상 사용되지 않습니다. 요소의 모든 직계 자손 (즉, 자식)을 수집하여 확장 요소의 배열로 반환합니다. childElements ()를 사용하십시오.
30. 끼워 넣다()

요소의 앞, 뒤, 맨 위 또는 맨 아래에 콘텐츠를 삽입합니다.
31. inspect ()

요소의 디버그 지향 문자열 표현을 반환합니다.
32. makeClipping ()

요소의 오버플로 값을 '숨김'으로 설정하여 제대로 지원되지 않는 CSS 클립 속성을 시뮬레이션합니다. 요소를 반환합니다.
33. makePositioned ()

초기 위치가 '정적'이거나 정의되지 않은 경우 요소의 CSS 위치를 '상대'로 설정하여 CSS 포함 블록을 쉽게 생성 할 수 있습니다. 요소를 반환합니다.
34. 시합()

요소가 주어진 CSS 선택자와 일치하는지 확인합니다.
35. 다음()

주어진 cssRule과 일치하는 요소의 다음 형제를 반환합니다.
36. nextSiblings ()

요소의 다음 형제를 모두 수집하여 확장 요소의 배열로 반환합니다.
37. 관찰 ()

요소에 이벤트 핸들러를 등록하고 요소를 반환합니다.
38. positionOffset ()

가장 가까운 위치에있는 조상을 기준으로 요소의 오프셋을 반환합니다.
39. 이전 ()

주어진 cssRule과 일치하는 요소의 이전 형제를 반환합니다.
40. previousSiblings ()

요소의 이전 형제를 모두 수집하여 확장 요소의 배열로 반환합니다.
41. readAttribute ()

요소의 속성 값을 반환하거나 속성이 지정되지 않은 경우 null을 반환합니다.
42. recursivelyCollect ()

속성으로 관계가 지정된 요소를 재귀 적으로 수집합니다.
43. 상대화 ()

페이지 레이아웃에서 위치를 변경하지 않고 요소를 상대적으로 배치 된 요소로 전환합니다.
44. 제거 ()

문서에서 요소를 완전히 제거하고 반환합니다.
45. removeClassName ()

요소의 CSS className을 제거하고 요소를 반환합니다.
46. () 바꾸기

요소를 html 인수의 내용으로 대체하고 제거 된 요소를 반환합니다.
47. scrollTo ()

요소가 뷰포트의 맨 위에 나타나도록 창을 스크롤합니다. 요소를 반환합니다.
48. 고르다()

임의의 수의 CSS 선택자 (문자열)를 취하고 이들 중 하나와 일치하는 요소의 확장 된 하위 항목 배열을 반환합니다.
49. setOpacity ()

다양한 브라우저에서 불일치를 해결하는 동안 요소의 시각적 불투명도를 설정합니다.
50. setStyle ()

요소의 CSS 스타일 속성을 수정합니다.
51. 보여 주다()

요소를 표시하고 반환합니다.
52. 형제 자매()

요소의 모든 형제를 수집하여 확장 요소의 배열로 반환합니다.
53. stopObserving ()

핸들러 등록을 취소하고 요소를 반환합니다.
54. 비녀장()

요소의 가시성을 토글합니다.
55. toggleClassName ()

요소의 CSS className을 토글하고 요소를 반환합니다.
56. undoClipping ()

요소의 CSS 오버플로 속성을 Element.makeClipping ()이 적용되기 전의 값으로 다시 설정합니다. 요소를 반환합니다.
57. undoPositioned ()

Element.makePositioned가 적용되기 전의 상태로 요소를 다시 설정합니다. 요소를 반환합니다.
58. 쪽으로()

주어진 cssRule과 일치하는 요소의 첫 번째 조상을 반환합니다.
59. 최신 정보()

요소의 내용을 제공된 newContent 인수로 바꾸고 요소를 반환합니다.
60. viewportOffset ()

뷰포트를 기준으로 요소의 X / Y 좌표를 반환합니다.
61. 명백한()

요소가 표시되는지 여부를 나타내는 부울을 반환합니다.
62. 싸다()

다른 요소 안에 요소를 래핑 한 다음 래퍼를 반환합니다.
63. writeAttribute ()

해시 또는 이름 / 값 쌍으로 전달 된 속성을 추가, 지정 또는 제거합니다.

프로토 타입은 제공하기 위해 네이티브 JavaScript 번호를 확장합니다.

  • Number # succ를 통한 ObjectRange 호환성.

  • Number # times를 사용하는 루비와 같은 숫자 루프.

  • Number # toColorPart 및 Number # toPaddedString과 같은 간단한 유틸리티 메서드.

다음은 숫자를 다루는 예제와 함께 모든 함수 목록입니다.

프로토 타입 번호 방법

NOTE − 1.6의 prototype.js 버전이 있는지 확인하십시오.

S. 아니. 방법 및 설명
1. abs ()

숫자의 절대 값을 반환합니다.
2. 올림()

숫자보다 크거나 같은 가장 작은 정수를 반환합니다.
삼. 바닥()

숫자보다 작거나 같은 가장 큰 정수를 반환합니다.
4. 일주()

숫자를 가장 가까운 정수로 반올림합니다.
5. succ ()

current + 1로 정의 된 현재 숫자의 후속 항목을 반환합니다. 숫자를 ObjectRange와 호환되도록 만드는 데 사용됩니다.
6. 타임스()

루비 스타일의 일반 [0..n] 루프를 캡슐화합니다.
7. toColorPart ()

숫자의 2 자리 16 진수 표현을 생성합니다 (따라서 [0..255] 범위에있는 것으로 가정). CSS 색상 문자열을 작성하는 데 유용합니다.
8. toJSON ()

JSON 문자열을 반환합니다.
9. toPaddedString ()

숫자를 0으로 채워진 문자열로 변환하여 문자열의 길이가 최소한 길이와 같도록합니다.

Prototype은 사소한 것부터 복잡한 것까지 일련의 유용한 방법으로 String 객체를 향상시킵니다.

다음은 문자열을 다루는 예제와 함께 모든 함수 목록입니다.

프로토 타입 문자열 메서드

NOTE − 1.6의 prototype.js 버전이 있는지 확인하십시오.

S. 아니. 방법 및 설명
1. 공백()

문자열이 '공백'(비어 있거나 공백 만 포함 함)인지 확인합니다.
2. 낙타 ()

대시로 구분 된 문자열을 해당하는 camelCase로 변환합니다. 예를 들어 'foo-bar'는 'fooBar'로 변환됩니다.
삼. 자본화 ()

문자열의 첫 글자를 대문자로하고 나머지는 모두 다운 케이스합니다.
4. dasherize ()

밑줄 문자 ( "_")의 모든 인스턴스를 대시 ( "-")로 바꿉니다.
5. 빈()

문자열이 비어 있는지 확인합니다.
6. 로 끝나다()

문자열이 부분 문자열로 끝나는 지 확인합니다.
7. escapeHTML ()

HTML 특수 문자를 해당 엔티티에 해당하는 문자로 변환합니다.
8. evalJSON ()

문자열에서 JSON을 평가하고 결과 개체를 반환합니다.
9. evalScripts ()

문자열에있는 모든 스크립트 블록의 내용을 평가합니다. 각 스크립트에서 반환 된 값을 포함하는 배열을 반환합니다.
10. extractScripts ()

문자열에있는 스크립트 블록의 내용을 추출하여 문자열 배열로 반환합니다.
11. gsub ()

주어진 패턴의 모든 발생이 정규 문자열, 함수의 반환 값 또는 템플릿 문자열로 대체 된 문자열을 반환합니다.
12. 포함()

문자열에 하위 문자열이 포함되어 있는지 확인합니다.
13. inspect ()

디버그 지향 버전의 문자열을 반환합니다.
14. 보간하다()

문자열을 템플릿으로 취급하고 객체의 속성으로 채 웁니다.
15. isJSON ()

정규식을 사용하여 문자열이 유효한 JSON인지 확인합니다. 이 보안 방법은 내부적으로 호출됩니다.
16. parseQuery ()

URI와 유사한 쿼리 문자열을 구문 분석하고 매개 변수 / 값 쌍으로 구성된 객체를 반환합니다.
17. 주사()

주어진 패턴의 모든 발생을 반복 할 수 있습니다.
18. startsWith ()

문자열이 하위 문자열로 시작하는지 확인합니다.
19. 조각()

문자열에서 모든 선행 및 후행 공백을 제거합니다.
20. stripScripts ()

HTML 스크립트 블록처럼 보이는 문자열을 제거합니다.
21. stripTags ()

HTML 태그의 문자열을 제거합니다.
22. 보결()

패턴의 첫 번째 발생 횟수가 일반 문자열, 함수의 반환 값 또는 템플릿 문자열로 대체 된 문자열을 반환합니다.
23. succ ()

ObjectRange에서 내부적으로 사용됩니다. 문자열의 마지막 문자를 유니 코드 알파벳의 다음 문자로 변환합니다.
24. 타임스()

문자열 카운트 횟수를 연결합니다.
25. toArray ()

문자열을 문자별로 분할하고 결과가 포함 된 배열을 반환합니다.
26. toJSON ()

JSON 문자열을 반환합니다.
27. toQueryParams ()

URI와 유사한 쿼리 문자열을 구문 분석하고 매개 변수 / 값 쌍으로 구성된 객체를 반환합니다.
28. 자르기 ()

주어진 길이로 문자열을 자르고 접미사를 추가합니다 (발췌 일뿐임을 나타냄).
29. 밑줄()

낙타 문자열을 밑줄 ( "_")로 구분 된 일련의 단어로 변환합니다.
30. unescapeHTML ()

태그를 제거하고 특수 HTML 문자의 엔티티 형식을 일반 형식으로 변환합니다.
31. unfilterJSON ()

Ajax JSON 또는 JavaScript 응답 주위의 주석 구분 기호를 제거합니다. 이 보안 방법은 내부적으로 호출됩니다.

Prototype은 몇 가지 강력한 메서드를 사용하여 모든 기본 JavaScript 배열을 확장합니다.

이것은 두 가지 방법으로 수행됩니다.

  • Enumerable 모듈에서 혼합되어 이미 많은 메서드를 가져옵니다.

  • 이 섹션에 설명 된 몇 가지 추가 메서드가 추가됩니다.

반복기 사용

Prototype에서 제공하는 중요한 지원 중 하나는 JavaScript에서 반복자와 같은 Java를 사용할 수 있다는 것입니다. 아래 차이점을 참조하십시오-

쓰기의 전통적인 방법 for 루프-

for (var index = 0; index < myArray.length; ++index) {
   var item = myArray[index];
   // Your code working on item here...
}

이제 Prototype을 사용하는 경우 위의 코드를 다음과 같이 바꿀 수 있습니다.

myArray.each(function(item) {
   // Your code working on item here...
});

다음은 Array를 다루는 예제와 함께 모든 함수 목록입니다.

프로토 타입 배열 방법

NOTE − 1.6의 prototype.js 버전이 있는지 확인하십시오.

S. 아니. 방법 및 설명
1. 맑은()

배열을 지 웁니다 (비워 둡니다).
2. clone ()

원래 배열은 그대로두고 배열의 복제본을 반환합니다.
삼. 콤팩트()

null / 정의되지 않은 값없이 새 버전의 배열을 반환합니다.
4. 마다()

숫자 인덱스 오름차순으로 배열을 반복합니다.
5. 먼저()

배열의 첫 번째 항목을 반환하거나 배열이 비어있는 경우 undefined를 반환합니다.
6. 단조롭게 하다()

배열의 "플랫"(1 차원) 버전을 반환합니다.
7. 에서()

기존 배열을 복제하거나 배열과 유사한 컬렉션에서 새 배열을 만듭니다.
8. indexOf ()

배열 내에서 인수가 처음 나타나는 위치를 반환합니다.
9. inspect ()

배열의 디버그 지향 문자열 표현을 반환합니다.
10. 마지막()

배열의 마지막 항목을 반환하거나 배열이 비어있는 경우 undefined를 반환합니다.
11. 줄이다()

배열 감소 : 요소가 하나 인 배열은 고유 한 요소로 바뀌고 여러 요소 배열은 그대로 반환됩니다.
12. 역전()

배열의 반전 된 버전을 반환합니다. 기본적으로 원본을 직접 반전합니다. inline이 false로 설정된 경우 원래 배열의 복제본을 사용합니다.
13. 크기()

배열의 크기를 반환합니다.
14. toArray ()

이것은 Enumerable에서 혼합 된 toArray의 로컬 최적화입니다.
15. toJSON ()

JSON 문자열을 반환합니다.
16. uniq ()

중복없는 버전의 배열을 생성합니다. 중복 항목이 없으면 원래 배열이 반환됩니다.
17. 없이()

지정된 값을 포함하지 않는 새 버전의 배열을 생성합니다.

해시는 고유 키를 값에 바인딩하는 연관 배열로 생각할 수 있습니다. 유일한 차이점은 숫자를 인덱스로 사용하는 대신 모든 문자열을 인덱스로 사용할 수 있다는 것입니다.

해시 생성

Hash 인스턴스를 생성하는 방법에는 두 가지가 있습니다.

  • JavaScript 키워드 new를 사용하십시오 .
  • 프로토 타입 유틸리티 기능 $ H 사용 .

빈 해시를 만들려면 인수없이 생성자 메서드도 호출합니다.

다음은 간단한 방법으로 해시를 만들고 값을 설정하고 값을 가져 오는 방법을 보여주는 예입니다.

// Creating Hash
var myhash = new Hash();
var yourhash = new Hash( {fruit: 'apple'} );
var hishash = $H( {drink: 'pepsi'} );

// Set values in terms of key and values.
myhash.set('name', 'Bob');

// Get value of key 'name' as follows.
myhash.get('name');
yourhash.get('fruit');
hishash.get('drink');

// Unset a key & value
myhash.unset('name');
yourhash.unset('fruit');
hishash.unset('drink');

Prototype은 해시를 쉽게 평가할 수있는 다양한 방법을 제공합니다. 이 튜토리얼은 적절한 예제와 함께 모든 방법을 자세히 설명합니다.

다음은 Hash와 관련된 모든 메소드의 전체 목록입니다.

프로토 타입 해시 방법

NOTE − 최소한 prototype.js 버전 1.6이 있는지 확인하십시오.

S. 아니. 방법 및 설명
1. clone ()

해시의 복제본을 반환합니다.
2. 마다()

해시의 이름 / 값 쌍을 반복합니다.
삼. 가져 오기()

해시 키의 속성 값을 반환합니다.
4. inspect ()

해시의 디버그 지향 문자열 표현을 반환합니다.
5. 키 ()

해시에 대한 키 배열 (즉, 속성 이름)을 제공합니다.
6. merge ()

개체를 해시에 병합하고 해당 병합의 결과를 반환합니다.
7. 없애다()

해시에서 키를 제거하고 해당 값을 반환합니다. 이 메소드는 버전 1.6에서 더 이상 사용되지 않습니다.
8. 세트()

해시 키의 속성을 값으로 설정하고 값을 반환합니다.
9. toJSON ()

JSON 문자열을 반환합니다.
10. 반대하다()

복제 된 바닐라 객체를 반환합니다.
11. toQueryString ()

해시를 URL 인코딩 된 쿼리 문자열 표현으로 변환합니다.
12. unset ()

해시 키의 속성을 삭제하고 해당 값을 반환합니다.
13. 최신 정보()

객체의 키 / 값 쌍으로 해시를 업데이트합니다. 원래 해시가 수정됩니다.
14. 값 ()

해시 값을 수집하여 배열로 반환합니다.

Object 는 Prototype에서 네임 스페이스로 사용하고 Object 객체를 사용하여 관련 함수를 호출하는 데 사용됩니다 . 이것은 다음 두 가지 방법으로 사용됩니다.

  • 간단한 개발자라면 inspect 또는 clone 과 같은 기존 기능을 사용할 수 있습니다 .

  • Prototype처럼 자신의 개체를 만들거나 해시 인 것처럼 개체를 탐색하려는 경우 확장 , 키 및 값으로 전환합니다 .

프로토 타입 개체 메서드

NOTE − 최소한 prototype.js 버전 1.6이 있는지 확인하십시오.

S. 아니. 방법 및 설명
1. clone ()

단순 복사를 사용하여 전달 된 객체를 복제합니다 (원본의 모든 속성을 결과에 복사).
2. 넓히다()

소스의 모든 속성을 대상 개체에 복사합니다.
삼. inspect ()

객체의 디버그 지향 문자열 표현을 반환합니다.
4. isArray ()

obj가 배열이면 true를 반환하고 그렇지 않으면 false를 반환합니다.
5. isElement ()

obj가 유형 1의 DOM 노드이면 true를 반환하고 그렇지 않으면 false를 반환합니다.
6. isFunction ()

obj가 함수 유형이면 true를 반환하고 그렇지 않으면 false를 반환합니다.
7. isHash ()

obj가 Hash 클래스의 인스턴스이면 true를 반환하고 그렇지 않으면 false를 반환합니다.
8. isNumber ()

obj가 숫자 유형이면 true를 반환하고 그렇지 않으면 false를 반환합니다.
9. isString ()

obj가 문자열 유형이면 true를 반환하고 그렇지 않으면 false를 반환합니다.
10. isUndefined ()

obj가 정의되지 않은 유형이면 true를 반환하고 그렇지 않으면 false를 반환합니다.
11. 키 ()

모든 개체를 해시로 취급하고 속성 이름 목록을 가져옵니다.
12. toHTML ()

obj의 toHTML 메서드가 있으면 반환 값을 반환하고, 그렇지 않으면 String.interpret를 통해 obj를 실행합니다.
13. toJSON ()

JSON 문자열을 반환합니다.
14. toQueryString ()

개체를 URL 인코딩 된 쿼리 문자열 표현으로 변환합니다.
15. 값 ()

모든 개체를 해시로 취급하고 속성 값 목록을 가져옵니다.

템플릿은 유사한 개체 그룹의 형식을 지정하고 이러한 개체에 대한 형식화 된 출력을 생성하는 데 사용됩니다.

Prototype 은 두 가지 방법이 있는 Template 클래스를 제공합니다.

  • Template()− 생성자 메서드로 템플릿 객체를 생성하고, 템플릿 을 적용하기 위해 eva () 메서드를 호출 합니다.

  • evaluate() −이 방법은 템플릿을 적용하여 개체를 포맷하는 데 사용됩니다.

형식화 된 출력을 생성하는 데는 세 단계가 포함됩니다.

  • Create a template− 여기에는 미리 서식이 지정된 텍스트 생성이 포함됩니다. 이 텍스트에는#{fieldName}가치. 이들#{fieldName}평가 () 메서드가 실제 값으로 호출 될 때 값은 실제 값으로 대체됩니다 .

  • Defining actual values− 여기에는 키와 값의 형태로 실제 값을 생성하는 것이 포함됩니다. 이러한 키는 템플릿에 매핑되고 해당 값으로 대체됩니다.

  • Mapping Keys and replacing Values− 이것은 평가 () 가 호출되고 포맷 된 객체에서 사용 가능한 모든 키가 정의 된 값으로 대체되는 마지막 단계 입니다.

예 1

1 단계

템플릿을 만듭니다.

var myTemplate = new Template('The \ TV show #{title} was directed by #{author}.');

2 단계

형식화 된 출력을 갖도록 위의 개체에 전달 될 값 집합을 준비합니다.

var record1 = {title: 'Metrix', author:'Arun Pandey'};
var record2 = {title: 'Junoon', author:'Manusha'};
var record3 = {title: 'Red Moon', author:'Paul, John'};
var record4 = {title: 'Henai', author:'Robert'};
var records = [record1, record2, record3, record4 ];

3 단계

마지막 단계는 템플릿의 모든 값을 채우고 다음과 같이 최종 결과를 생성하는 것입니다.

records.each( function(conv) {
   alert( "Formatted Output : " + myTemplate.evaluate(conv) );
});

자,이 세 단계를 모두 합쳐 봅시다.

<html>
   <head>
      <title>Prototype examples</title>
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      
      <script>
         function showResult() {
            //  Create template with formatted content and placeholders.
            var myTemplate = new Template('The \ TV show #{title} was directed by #{author}.');
   
            // Create hashes with the required values for placeholders
            var record1 = {title: 'Metrix', author:'Arun Pandey'};
            var record2 = {title: 'Junoon', author:'Manusha'};
            var record3 = {title: 'Red Moon', author:'Paul, John'};
            var record4 = {title: 'Henai', author:'Robert'};
            var records = [record1, record2, record3, record4 ];

            // Now apply template to produce desired formatted output
            records.each( function(conv) {
               alert( "Formatted Output : " + myTemplate.evaluate(conv) );
            });
         }
      </script>
   </head>

   <body>
      <p>Click the button to see the result.</p>
      <br />
      <br />
      <input type = "button" value = "Result" onclick = "showResult();"/>
   </body>
</html>

이것은 다음 결과를 생성합니다-

산출

Enumerable 클래스는 열거에 유용한 여러 메서드를 제공합니다. 열거 형은 값 모음 역할을하는 개체입니다.

열거 방법은 주로 배열 과 해시 를 열거하는 데 사용됩니다 . 열거 메서드를 사용할 수있는 ObjectRange 및 다양한 DOM 또는 AJAX 관련 개체와 같은 다른 개체도 있습니다 .

컨텍스트 매개 변수

반복기를 사용하는 모든 Enumerable 메서드는 컨텍스트 개체도 다음 (선택 사항) 매개 변수로 사용합니다. 컨텍스트 객체는 이터레이터가 바인딩 될 대상이므로this 그 안의 키워드는 객체를 가리킬 것입니다.

var myObject = {};

['foo', 'bar', 'baz'].each(function(name, index) {
   this[name] = index;
}, myObject); // we have specified the context

myObject;

이것은 다음 결과를 생성합니다-

산출

{ foo: 0, bar: 1, baz: 2}

효율적으로 사용

  • 모든 요소에 대해 동일한 메서드를 호출해야하는 경우 invoke () 메서드를 사용합니다.

  • 모든 요소에 대해 동일한 속성을 가져와야하는 경우 pluck () 메서드를 사용하십시오.

  • findall은 / 선택 방법은 주어진 조건과 일치하는 모든 요소를 검색 할 수 있습니다. 반대로 reject () 메서드는 조건 자와 일치하지 않는 모든 요소를 ​​검색합니다. 두 세트가 모두 필요한 특정 경우에는 두 번 반복되는 것을 피할 수 있습니다 . partition () 메서드를 사용하면 됩니다 .

다음은 Enumerable과 관련된 모든 메서드의 전체 목록입니다.

프로토 타입 열거 가능 메서드

NOTE − 최소한 prototype.js 버전 1.6이 있는지 확인하십시오.

S. 아니. 방법 및 설명
1. 모두()

모든 요소가 직접 또는 제공된 반복기의 계산을 통해 부울 값이 true인지 여부를 확인합니다.
2. 어떤()

하나 이상의 요소가 직접 또는 제공된 반복기의 계산을 통해 부울 값이 true와 같은지 여부를 확인합니다.
삼. 수집()

반복기를 각 요소에 적용한 결과를 반환합니다. map ()으로 별칭을 지정합니다.
4. detect ()

반복기가 true를 반환하는 첫 번째 요소를 찾습니다. find () 메서드에 의해 별칭이 지정됩니다.
5. 마다()

일반적인 방식으로 모든 요소를 ​​반복 한 다음 Enumerable을 반환하여 체인 호출을 허용합니다.
6. eachSlice ()

주어진 크기를 기준으로 항목을 청크로 그룹화하며 마지막 청크는 더 작을 수 있습니다.
7. 항목 ()

보다 일반적인 toArray 메서드의 별칭입니다.
8. 찾기()

반복기가 true를 반환하는 첫 번째 요소를 찾습니다. detect ()에 대한 편의 별칭입니다.
9. findAll ()

반복기가 true를 반환 한 모든 요소를 ​​반환합니다. select ()로 별칭이 지정됩니다.
10. grep ()

필터와 일치하는 모든 요소를 ​​반환합니다. 반복기가 제공되면 선택된 각 요소에 대해 리턴 된 값을 생성하는 데 사용됩니다.
11. inGroupsOf ()

필요한 경우 특정 값을 사용하여 마지막 청크를 채우는 고정 크기 청크로 항목을 그룹화합니다.
12. 포함()

== 비교 연산자를 기반으로 지정된 개체가 Enumerable에 있는지 여부를 확인합니다. member ()로 별칭이 지정됩니다.
13. 주입 ()

반복자의 연속 결과를 기반으로 결과 값을 증 분식으로 빌드합니다.
14. invoke ()

each () 또는 collect ()의 일반적인 사용 사례에 대한 최적화 : 모든 요소에 대해 동일한 잠재적 인수를 사용하여 동일한 메서드를 호출합니다.
15. 지도()

반복기를 각 요소에 적용한 결과를 반환합니다. collect ()의 편리한 별칭.
16. max ()

최대 요소 (또는 요소 기반 계산)를 반환하거나 열거가 비어있는 경우 undefined를 반환합니다. 요소는 직접 비교되거나 먼저 반복자를 적용하고 반환 된 값을 비교하여 비교됩니다.
17. 회원()

== 비교 연산자를 기반으로 지정된 개체가 Enumerable에 있는지 여부를 확인합니다. include ()의 편리한 별칭입니다.
18. min ()

최소 요소 (또는 요소 기반 계산)를 반환하거나 열거가 비어있는 경우 undefined를 반환합니다. 요소는 직접 비교되거나 먼저 반복자를 적용하고 반환 된 값을 비교하여 비교됩니다.
19. 분할()

요소를 참으로 간주되는 그룹과 거짓으로 간주되는 그룹의 두 그룹으로 분할합니다.
20. 당기기()

collect ()의 일반적인 사용 사례에 대한 최적화 : 모든 요소에 대해 동일한 속성을 가져옵니다. 속성 값을 반환합니다.
21. 받지 않다()

반복기가 false를 반환 한 모든 요소를 ​​반환합니다.
22. 고르다()

findAll () 메서드의 별칭입니다.
23. 크기()

열거의 크기를 반환합니다.
24. 정렬 기준()

반복기에 의해 각 요소에 대해 계산 된 기준을 기반으로 요소의 사용자 정의 정렬 된보기를 제공합니다.
25. toArray ()

열거 형의 배열 표현을 반환합니다. 항목 ()으로 별칭이 지정됩니다.
26. 지퍼()

함께 지퍼 (바지 한 쌍의 지퍼를 생각하십시오) 2 + 시퀀스, 튜플 배열 제공. 각 튜플은 원래 시퀀스 당 하나의 값을 포함합니다.

이벤트 관리는 브라우저 간 스크립팅을 달성하기위한 가장 큰 과제 중 하나입니다. 모든 브라우저에는 키 입력을 처리하는 방법이 다릅니다.

Prototype Framework는 모든 브라우저 간 호환성 문제를 처리하고 이벤트 관리와 관련된 모든 문제를 방지합니다.

Prototype Framework는 모든 주요 브라우저에서 현재 이벤트 개체를 인수로 사용하고 요청하는 정보를 즐겁게 생성하는 메서드로 가득 찬 Event 네임 스페이스를 제공 합니다.

이벤트 네임 스페이스는 키보드 관련 이벤트와 함께 사용할 수있는 표준화 된 키 코드 목록도 제공합니다. 다음 상수는 네임 스페이스에 정의되어 있습니다-

S. 아니. 키 상수 및 설명
1.

KEY_BACKSPACE

백 스페이스 키를 나타냅니다.
2.

KEY_TAB

탭 키를 나타냅니다.
삼.

KEY_RETURN

반환 키를 나타냅니다.
4.

KEY_ESC

Esc 키를 나타냅니다.
5.

KEY_LEFT

왼쪽 키를 나타냅니다.
6.

KEY_UP

키를 나타냅니다.
7.

KEY_RIGHT

오른쪽 키를 나타냅니다.
8.

KEY_DOWN

다운 키를 나타냅니다.
9.

KEY_DELETE

삭제 키를 나타냅니다.
10.

KEY_HOME

홈 키를 나타냅니다.
11.

KEY_END

종료 키를 나타냅니다.
12.

KEY_PAGEUP

페이지 위로 키를 나타냅니다.
13.

KEY_PAGEDOWN

페이지 다운 키를 나타냅니다.

이벤트 처리 방법

시작하기 전에 이벤트 메서드를 사용하는 예를 살펴 보겠습니다. 이 예제는 이벤트가 발생한 DOM 요소를 캡처하는 방법을 보여줍니다.

예

<html>
   <head>
      <title>Prototype examples</title>
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      
      <script>
         // Register event 'click' and associated call back.
         Event.observe(document, 'click', respondToClick);
  
         // Callback function to handle the event.
         function respondToClick(event) {
            var element = event.element();
            alert("Tag Name : " + element.tagName );
         }
      </script>
   </head>

   <body>
      <p id = "note"> Click on any part to see the result.</p>
      <p id = "para">This is paragraph</p>
      <div id = "division">This is divsion.</div>
   </body>
</html>

산출

다음은 관련된 모든 방법의 전체 목록입니다. Event. 가장 많이 사용하는 기능은 observe , element 및 stop 입니다.

프로토 타입 이벤트 방법

NOTE − 최소한 prototype.js 버전 1.6이 있는지 확인하십시오.

S. 아니. 방법 및 설명
1. 요소()

이벤트가 발생한 DOM 요소를 반환합니다.
2. 넓히다()

Event.Methods에 포함 된 모든 메서드로 이벤트 를 확장합니다 .
삼. findElement ()

이벤트가 발생한 태그 이름에서 위쪽으로 지정된 태그 이름을 가진 첫 번째 DOM 요소를 반환합니다.
4. isLeftClick ()

버튼 관련 마우스 이벤트가 "왼쪽"(실제로 기본) 버튼에 관한 것인지 확인합니다.
5. 관찰 ()

DOM 요소에 이벤트 핸들러를 등록합니다.
6. pointerX ()

마우스 이벤트의 절대 수평 위치를 반환합니다.
7. pointerY ()

마우스 이벤트의 절대 수직 위치를 반환합니다.
8. 중지()

이벤트의 전파를 중지하고 기본 작업이 결국 트리거되지 않도록합니다.
9. stopObserving ()

이벤트 처리기를 등록 취소합니다.
10. unloadCache ()

관찰을 통해 등록 된 모든 이벤트 핸들러를 등록 해제합니다. 자동으로 연결됩니다. 1.6부터 사용할 수 없습니다.

Prototype은 HTML 양식을 관리하는 쉬운 방법을 제공합니다. Prototype의 Form은 폼과 관련된 모든 것을위한 네임 스페이스 및 모듈이며 폼 조작 및 직렬화의 장점으로 가득 차 있습니다.

폼 전체를 다루는 메서드를 보유하고 있지만 하위 모듈 인 Form.Element 는 특정 폼 컨트롤을 다룹니다.

다음은 관련된 모든 방법의 전체 목록입니다. Form Element.

프로토 타입 양식 방법

NOTE − 최소한 prototype.js 버전 1.6이 있는지 확인하십시오.

S. 아니. 방법 및 설명
1. disable ()

양식 전체를 비활성화합니다. 양식 컨트롤은 표시되지만 편집 할 수 없습니다.
2. enable ()

완전히 또는 부분적으로 비활성화 된 양식을 활성화합니다.
삼. findFirstElement ()

숨겨지지 않고 비활성화되지 않은 첫 번째 양식 컨트롤을 찾습니다.
4. focusFirstElement ()

양식의 첫 번째 요소에 키보드 포커스를 제공합니다.
5. getElements ()

양식 내의 모든 양식 컨트롤 컬렉션을 반환합니다.
6. getInputs ()

양식에있는 모든 INPUT 요소의 컬렉션을 반환합니다. 이러한 속성에 대한 검색을 제한하려면 선택적 유형 및 이름 인수를 사용하십시오.
7. 의뢰()

Ajax.Request를 통해 양식의 action 속성 URL로 양식을 직렬화하고 제출하는 편리한 메소드입니다. options 매개 변수는 Ajax.Request 인스턴스로 전달되어 HTTP 메소드를 재정의하고 추가 매개 변수를 지정할 수 있습니다.
8. 초기화()

양식을 기본값으로 재설정합니다.
9. serialize ()

양식 데이터를 Ajax 요청 (기본 동작)에 적합한 문자열로 직렬화하거나 선택적 getHash가 true로 평가되는 경우 키가 양식 제어 이름이고 값이 데이터 인 객체 해시로 직렬화합니다.
10. serializeElements ()

양식 요소의 배열을 Ajax 요청 (기본 동작)에 적합한 문자열로 직렬화하거나 선택적 getHash가 true로 평가되는 경우 키가 양식 제어 이름이고 값이 데이터 인 객체 해시로 직렬화합니다.

JSON 소개

JSON (JavaScript Object Notation)은 가벼운 데이터 교환 형식입니다.

  • JSON은 사람이 읽고 쓰기가 쉽습니다.

  • JSON은 머신이 파싱하고 생성하기 쉽습니다.

  • JSON은 JavaScript 프로그래밍 언어의 하위 집합을 기반으로합니다.

  • JSON은 웹 전체의 API에서 특히 사용되며 Ajax 요청에서 XML에 대한 빠른 대안입니다.

  • JSON은 완전히 언어에 독립적 인 텍스트 형식입니다.

프로토 타입 1.5.1 이상 버전은 JSON 인코딩 및 구문 분석 지원을 제공합니다.

JSON 인코딩

프로토 타입은 다음과 같은 인코딩 방법을 제공합니다.

NOTE − 최소한 prototype.js 버전 1.6이 있는지 확인하십시오.

S. 아니. 방법 및 설명
1. Number.toJSON ()

주어진 숫자에 대한 JSON 문자열을 반환합니다.
2. String.toJSON ()

주어진 문자열에 대한 JSON 문자열을 반환합니다.
삼. Array.toJSON ()

주어진 배열에 대한 JSON 문자열을 반환합니다.
4. Hash.toJSON ()

주어진 Hash에 대한 JSON 문자열을 반환합니다.
5. Date.toJSON ()

날짜를 JSON 문자열로 변환합니다 (JSON에서 사용하는 ISO 형식에 따름).
6. Object.toJSON ()

주어진 개체에 대한 JSON 문자열을 반환합니다.

인코딩해야하는 데이터 유형이 확실하지 않은 경우 가장 좋은 방법은 Object.toJSON을 사용하는 것입니다.

var data = {name: 'Violet', occupation: 'character', age: 25 };
Object.toJSON(data);

이것은 다음 결과를 생성합니다-

'{"name": "Violet", "occupation": "character", "age": 25}'

또한 사용자 지정 개체를 사용하는 경우 Object.toJSON에서 사용할 자체 toJSON 메서드를 설정할 수 있습니다 . 예를 들면-

var Person = Class.create();
Person.prototype = {
   initialize: function(name, age) {
      this.name = name;
      this.age = age;
   },  
   toJSON: function() {
      return ('My name is ' + this.name + 
         ' and I am ' + this.age + ' years old.').toJSON();
   }
};
var john = new Person('John', 49);
Object.toJSON(john);

이것은 다음 결과를 생성합니다-

'"My name is John and I am 49 years old."'

JSON 구문 분석

JavaScript에서 JSON 구문 분석은 일반적으로 JSON 문자열의 내용을 평가하여 수행됩니다. Prototype 은이 를 처리하기 위해 String.evalJSON 을 도입 합니다. 예를 들면-

var d='{ "name":"Violet","occupation":"character" }'.evalJSON();
d.name;

이것은 다음 결과를 생성합니다-

"Violet"

Ajax에서 JSON 사용

Ajax와 함께 JSON을 사용하는 것은 매우 간단합니다. 전송의 responseText 속성에서 String.evalJSON 을 호출하기 만하면 됩니다.

new Ajax.Request('/some_url', {
   method:'get',
   onSuccess: function(transport) {
      var json = transport.responseText.evalJSON();
   }
});

데이터가 신뢰할 수없는 출처에서 가져온 경우 데이터를 삭제해야합니다.

new Ajax.Request('/some_url', {
   method:'get',
   requestHeaders: {Accept: 'application/json'},
   onSuccess: function(transport) {
      var json = transport.responseText.evalJSON(true);
   }
});

AJAX 소개

AJAX는 A동기 JavaScript 및 XML. AJAX는 XML, HTML, CSS 및 Java Script를 사용하여 더 빠르고 더 빠르고 더 나은 대화 형 웹 응용 프로그램을 만드는 새로운 기술입니다.

AJAX에 대한 완전한 이해는 간단한 AJAX Tutorial을 참조하십시오 .

AJAX에 대한 프로토 타입 지원

Prototype 프레임 워크를 사용하면 매우 쉽고 재미있는 방식으로 Ajax 호출을 처리 할 수 ​​있으며 안전합니다 (브라우저 간). Prototype은 서버에서 반환 된 JavaScript 코드를 현명하게 처리하고 폴링을위한 도우미 클래스를 제공합니다.

Ajax 기능은 전역 Ajax 객체에 포함되어 있습니다. 이 객체는 AJAX 요청 및 응답을 쉽게 처리하는 데 필요한 모든 메서드를 제공합니다.

AJAX 요청

실제 요청은 Ajax.Request () 객체의 인스턴스를 생성하여 이루어집니다 .

new Ajax.Request('/some_url', { method:'get' });

첫 번째 매개 변수는 요청의 URL입니다. 두 번째는 옵션 해시입니다. method 옵션은 사용할 HTTP 메서드를 나타냅니다. 기본 방법은 POST입니다.

AJAX 응답 콜백

Ajax 요청은 기본적으로 비동기식이므로 응답의 데이터를 처리 할 콜백이 있어야합니다. 콜백 메서드는 요청을 할 때 옵션 해시로 전달됩니다-

new Ajax.Request('/some_url', {
   method:'get',
   onSuccess: function(transport) {
      var response = transport.responseText || "no response text";
      alert("Success! \n\n" + response);
   },
   onFailure: function() { alert('Something went wrong...') }
});

여기에서 두 개의 콜백이 해시로 전달됩니다.

  • onSuccess
  • onFailure

응답 상태에 따라 위의 두 호출 중 하나가 호출됩니다. 두 가지 모두에 전달되는 첫 번째 매개 변수는 각각 responseText 및 responseXML 속성을 사용할 수 있는 기본 xmlHttpRequest 개체 입니다.

두 콜백을 하나 또는 전혀 지정하지 않을 수 있습니다. 사용 가능한 다른 콜백은 다음과 같습니다.

  • onUninitialized
  • onLoading
  • onLoaded
  • onInteractive
  • onComplete
  • onException

다른 콜백을 디스패치하는 동안 예외가 발생했을 때 발생하는 onException을 제외하고 는 모두 xmlHttpRequest 전송 의 특정 상태와 일치합니다 .

NOTE− onUninitialized, onLoading, onLoaded 및 onInteractive 콜백은 모든 브라우저에서 일관되게 구현되지 않습니다. 일반적으로 사용하지 않는 것이 가장 좋습니다.

프로토 타입 AJAX 메서드

Ajax 객체 는 AJAX 요청 및 응답을 쉽게 처리하는 데 필요한 모든 메소드를 제공합니다. 다음은 AJAX와 관련된 모든 메소드의 전체 목록입니다.

NOTE − 최소한 prototype.js 버전 1.6이 있는지 확인하십시오.

S. 아니. 방법 및 설명
1. Ajax 옵션

이것은 메소드가 아니라 모든 AJAX 요청자와 콜백이 공유하는 모든 핵심 옵션을 자세히 설명합니다.
2. Ajax.PeriodicalUpdater ()

AJAX 요청을 주기적으로 수행하고 응답 텍스트를 기반으로 컨테이너의 내용을 업데이트합니다.
삼. Ajax.Request ()

AJAX 요청을 시작하고 처리합니다.
4. Ajax.Responders ()

프로토 타입 기반 AJAX 요청의 모든 단계에 대해 알림을받는 글로벌 리스너의 저장소입니다.
5. Ajax.Response ()

모든 Ajax 요청 콜백의 첫 번째 인수로 전달 된 객체입니다.
6. Ajax.Updater ()

AJAX 요청을 수행하고 응답 텍스트를 기반으로 컨테이너의 내용을 업데이트합니다.

프로토 타입 범위는 값의 간격을 나타냅니다. 범위를 얻는 데 선호되는 방법은$R 유틸리티 기능.

다음과 같이 간단한 구문을 사용하여 큰 범위의 값을 만들 수 있습니다.

$R(1, 10).inspect();

$R('a', 'e').inspect();

이것은 다음 결과를 생성합니다-

['1, 2, 3, 4, 5, 6, 7, 8, 9, 10']

['a', 'b', 'c', 'd', 'e']

include () 메서드

이 방법은 값이 범위에 포함되는지 여부를 결정합니다.

통사론

Range.include(value);

반환 값

값이 포함 된 경우 true 값을 반환하고 그렇지 않으면 false를 반환합니다.

예

<html>
   <head>
      <title>Prototype examples</title>
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      
      <script>
         function showResult() {
            alert ( "Test 1 : " + $R(1, 10).include(5));
            // Returns true
   
            alert ( "Test 2 : " + $R('a', 'h').include('x'));
            // Returns flase
         }
      </script>
   </head>

   <body>
      <p>Click the button to see the result.</p>
      <br />
      <br />
      <input type = "button" value = "Result" onclick = "showResult();"/>
   </body>
</html>

산출

일정 시간이 지나면 여러 번 함수를 실행해야하는 경우가 많습니다. 예를 들어, 주어진 시간이 지나면 화면을 새로 고칠 수 있습니다. Prototype은 PeriodicalExecuter 개체를 사용하여 구현하는 간단한 메커니즘을 제공 합니다.

PeriodicalExecuter 가 제공하는 이점 은 콜백 함수의 여러 병렬 실행으로부터 사용자를 보호한다는 것입니다.

PeriodicalExecuter 생성

생성자는 두 개의 인수를 취합니다.

  • 콜백 함수.
  • 실행 간격 (초)입니다.

일단 시작되면 PeriodicalExecuter는 페이지가 언로드되거나 stop () 메서드를 사용하여 실행기가 중지 될 때까지 무기한 트리거됩니다 .

예

다음은 "취소"버튼을 눌러 중지 할 때까지 5 초마다 대화 상자를 띄우는 예입니다.

<html>
   <head>
      <title>Prototype examples</title>
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      
      <script>
         function startExec() {
            new PeriodicalExecuter(function(pe) {
               if (!confirm('Want me to annoy you again later?'))
               pe.stop();
            }, 5);
         }
      </script>
   </head>

   <body>
      <p>Click start button to start periodic executer:</p>
      <br />
      <br />
      <input type = "button" value = "start" onclick = "startExec();"/>
   </body>
</html>

산출

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved