- Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2....
Transcript of - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2....
![Page 1: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/1.jpg)
APIPrototypeAPI
Prototype
APIPrototypePrototype
!
CHM RemigijusJodelis.2008/04/29
Prototypehttp://www.prototypejs.org/
http://www.prototypejs.org/api
JavaScriptPrototypejQueryPrototypePrototype
Prototype jQueryPrototype
Prototype
——
[email protected] http://blog.csdn.net/orain2009-3-17
-Prototype1.6.0
![Page 2: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/2.jpg)
$, $$, $A, $F, $H, $R, $w, Try.these, document.getElementsByClassName
Prototype“” $Prototype $DOM
Javascript
$() Prototype $IDDOM
document.getElementById
PrototypeJavascript
$$(id|element)->HTMLElementOr$((id|element)...)->[HTMLElement...]
IDDOM DOMPrototype
$$$$(cssRule...)->[HTMLElement...]
CSS(CSSSelectors) CSSDOMdocument
$A$A(iterable)->actualArray
Array Array.from Array
$F$F(element)->value
Form.Element.getValue Form.Element.getValue
![Page 3: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/3.jpg)
$H$H([obj])->Hash
Hash HashJavaScript
$R$R(start,end[,exclusive=false])->ObjectRange
ObjectRange ObjectRange, $R
$w$w(String)->Array
Ruby %w{foobar}Perl qw(foobar)
Try.theseTry.these(Function...)->firstOKResult
document.getElementsByClassNamedocument.getElementsByClassName(className[,element])->[HTMLElement...]
classNameCSSDOM elementCSS
![Page 4: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/4.jpg)
$(id|element)->HTMLElement$((id|element)...)->[HTMLElement...]
HTMLID HTML,
$Prototype document.getElementById
IDDOM
functionfoo(element){element=$(element);/*...*/}
——ID
$ $
ID nullDOM ID
Element.extend PrototypeDOM
Element.hide('itemId');//...$('itemId').hide();//DOM
$
['item1','item2','item3'].each(Element.hide);$('item1','item2','item3').invoke('hide');//
HowPrototypeextendstheDOM
$
![Page 5: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/5.jpg)
$$(cssRule...)->[HTMLElement...]
CSSDOMHTML DOMCSS
DOM $()document.getElementById()getElementsByTagName()Prototype
getElementsByClassName() DOMCSS
$$('div');//->DIVdocument.getElementsByTagName('div')$$('#contents');//->$('contents')$$('li.faux');//->Class='faux'LI
$$ Element#getElementsBySelector
CSS$$CSS CSS
v1.5.0
div
#ali
CSS2.1 [attr][attr=value][attr~=value]
[attr|=value] [attr!=value]
CSS .highlighted .example.wrong
ID #item1
v1.5.1
CSS3 pseudo-elements ::first-letter1.5.1
$$
![Page 6: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/6.jpg)
#a>li
#aliID'a'li
'a'li ~=
:notpseudo-class #a*:not(li) #aLI
:nth:first:last tr:nth-child(even)even
:nth-child()an+ban2n, -3n,5nab1,2,-3ban+b tr:nth-child(2n){background-color:red;}tr:nth-child(3) tr:nth-child(2n+1)CSS3 li:first-child(LI p:nth-last-of-
type(3)
:empty
:enabled:disabled:checked
$$('#contentsa[rel]');//->ID"contents"rel$$('a[href="#"]');//->href"#"$$('#navbara','#sidebara');//->ID"navbar""sidebar"
v1.5.1
$$('a:not([rel~=nofollow])');//->rel"nofollow"$$('tabletbody>tr:nth-child(even)');//->tbodyeven$$('div:empty');//->DIV
![Page 7: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/7.jpg)
$A(iterable)->actualArray
Array Array.from
$A NodeListDOM HTMLCollection arguments
Array
ArrayPrototype Arraymixin
Prototype Array
Array nullundefined false Array toArray
Prototype toArray “”
DOM document.getElementsByTagName()
NodeListIE NodeList.prototype Enumerable
NodeList Array
varparas=$A(document.getElementsByTagName('p'));paras.each(Element.hide);$(paras.last()).show();
each Element.hide DOM
hide DOM
$A(document.getElementsByTagName('p')).map(Element.extend).invoke('hide');
Array join
$A
![Page 8: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/8.jpg)
//...functionshowArgs(){alert(Array.prototype.join.call(arguments,','));}//...functionshowArgs(){alert($A(arguments).join(','));}
![Page 9: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/9.jpg)
$F(element)->value
Form.Element.getValue Form.Element.getValue
$F
![Page 10: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/10.jpg)
$H([obj])->Hash
Hash“map”“” HashPrototype Hash Hash
$H
vartmp={a:'aa',b:'bb'};varh=$H(tmp);h.set('c','cc');
h.toQueryString();//a=aa&b;=bb&c;=cc$H(tmp).toQueryString();//a=aa&b;=bb
$H Hashv1.5 Hash
$H
![Page 11: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/11.jpg)
$R(start,end[,exclusive=false])->ObjectRange
ObjectRange ObjectRange $R
ObjectRange
$Rstartend exclusive
$R(0,10).include(10)//->true$A($R(0,5)).join(',')//->'0,1,2,3,4,5'$A($R('aa','ah')).join(',')//->'aa,ab,ac,ad,ae,af,ag,ah'$R(0,10,true).include(10)//->false$R(0,10,true).each(function(value){ //10value09});
ObjectRangemixin Enumerable ArrayEnumerable
toArray $A
Enumerable min() max()
$R
![Page 12: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/12.jpg)
$w(String)->Array
ArrayRuby %w{foobar}Perl qw(foobar)
:-)
$w('applesbananaskiwis')//->['apples','bananas', 'kiwis']
$w('applesbananaskiwis').each(function(fruit){varmessage='Ilike'+fruit//})
Element
$w('adsnavbarfunkyLinks').each(Element.hide);
$w
![Page 13: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/13.jpg)
document.getElementsByClassName(className[,element])->[HTMLElement...]
classNameCSS element
Prototype1.6 document.getElementsByClassName
NodeList Arrayv1.6 $$ Element#select
HTML<body><divid="one"class="foo"></div><divid="two"class="foobarthud"></div><ulid="list"><liid="item_one"class="thud">Listitem1</li><li>Listitem2</li><liid="item_two"class="thud">Listitem3</li></ul></body>
JavaScriptdocument.getElementsByClassName('foo');//->[HTMLElement,HTMLElement](div#one,div#two)document.getElementsByClassName('thud');//->[HTMLElement,HTMLElement,HTMLElement](div#two,li#item_one,li#item_two);document.getElementsByClassName('thud',$('list'));//->[HTMLElement,HTMLElement](li#item_one,li#item_two)
document.getElementsByClassName
![Page 14: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/14.jpg)
Try.these(Function...)->firstOKResult
Prototype Ajax XMLHttpRequestIE6
XMLHttpRequestJavascriptIE
Try.these
Try.these undefined getTransport
getTransport:function(){ returnTry.these( function(){returnnewXMLHttpRequest()}, function(){returnnewActiveXObject('Msxml2.XMLHTTP')}, function(){returnnewActiveXObject('Microsoft.XMLHTTP')} )||false;}
Try.these
![Page 15: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/15.jpg)
AjaxOptions,Ajax.PeriodicalUpdater,Ajax.Request,Ajax.Responders,
Ajax.Response,Ajax.Updater
PrototypeAJAXPrototypeWebAJAXAjax
MethodsAjaxOptionsAJAX
Ajax.PeriodicalUpdaternewAjax.PeriodicalUpdater(container,url[,options])
AJAX“decay” ——
Ajax.RequestnewAjax.Request(url[,options])
AJAX
Ajax.RespondersAjax.Responders.register(responder)Ajax.Responders.unregister(responder)
PrototypeAJAX
Ajax.ResponseAjax
Ajax.UpdaternewAjax.Updater(container,url[,options])
Ajax
1.6
![Page 16: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/16.jpg)
AJAX
![Page 17: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/17.jpg)
AJAX
Ajax
asynchronous true XMLHttpRequest
contentType 'application/x-
www-form-
urlencoded'
Content-TypeformenctypeURL
encoding 'UTF-8'
method 'post' HTTP 'get'RubyOnRailsPrototype 'put' 'delete' 'post' '_method'
parameters '' 'get'URLURLURL HashPrototype
postBody None 'post' method
requestHeaders
object array(0,2…) (1,3…)
Prototype
X-Requested-With 'XMLHttpRequest'
X-Prototype-VersionPrototype1.5.0Accept 'text/javascript,text/html,
application/xml,text/xml,*/*'
Content-type contentType encoding
evalJS true content-type application/ecmascript
application/javascript,application/x-ecmascript,application/x-javascript,text/ecmascript,text/javascript,text/x-ecmascript text/x-
javascript SOP Prototype
Ajax
![Page 18: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/18.jpg)
Ajax.Response#responseTextJavascriptJavascript 'force' 'false'
'true' 'force'Javascript <script></script> alert('Helloworld')Prototype
'force' 'true' content-type'force'Javascript 'true'
content-type text/plain 'force' 'true'
evalJSON true content-type application/json
Ajax.Response#responseTextAjax.Response#responseJSON SOP'force' 'false'
sanitizeJSON false true Ajax.Response#responseText
“” Ajax.Responders Ajax.RespondersPrototype
Ajax onException XMLHttpRequest X-JSON
null
Ajax.Request
onCreate
(v1.5.1) Ajax.RequestURL XHRXMLHttpRequest
onComplete on XYZ
onException XHR Ajax.Request
onFailure 2xyonFailure
onInteractive
onLoaded XHR
onLoading XHR
onSuccess 2xy
onUninitialized XHR
onXYZ XYZXMLHttp XYZonComplete
![Page 19: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/19.jpg)
responders Ajax.Responders
Ajax.Request XMLHttpRequest X-JSON
null this
onCreate AjaxXHR XHR
onComplete on XYZ
onException XHR Ajax.Request
onInteractive
onLoaded XHR
onLoading XHR
onUninitialized XHR
![Page 20: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/20.jpg)
newAjax.PeriodicalUpdater(container,url[,options])
AJAX“decay” ——
“”
Ajax.Update decay
Ajax.PeriodicalUpdater Ajax.Updater
frequency 2 0.5Hz2Ajax
decay 1 1
decay
newAjax.PeriodicalUpdater('items','/items',{method:'get',frequency:3,decay:2});
Decay Decay
1 00:00 2 n/a 1 3
2 00:03 1 yes 1 3decay“”1decay1
3 00:06 1 no 2 6decay decay
Ajax.PeriodicalUpdater
![Page 21: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/21.jpg)
4 00:12 2 no 4 125 00:24 4 no 8 24
6 00:48 8 yes 1 3 decay1
PeriodicalUpdater
PeriodicalUpdater stop start
Ajax.PeriodicalUpdater Ajax.Updater
Ajax.Updater Ajax.Updater Ajax.Request evalJSON
getHeader onComplete
![Page 22: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/22.jpg)
newAjax.Request(url[,options])
AJAX.
AJAX“”boilerplate
optionshash evalJavascript onComplete
onSuccess
Ajax
new
varurl='/proxy?url='+encodeURIComponent('http://www.google.com/search?q=Prototype');//proxySOP SOP)newAjax.Request(url,{ method:'get', onSuccess:function(transport){ varnotice=$('notice'); if(transport.responseText.match(/href="http:\/\/prototypejs.org/)) notice.update('Yeah!YouareintheTop10!').setStyle({background:'#dfd'}); else notice.update('Damn!Youarebeyond#10...').setStyle({background:'#fdd'}); } });
XMLHttpRequest
1. Created2. Initialized3. Requestsent4. Responsebeingreceived
Ajax.Request
![Page 23: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/23.jpg)
5. Responsereceived
AjaxPrototypeAJAX
1. onCreate AJAX
2. onUninitialized“”[Created]
3. onLoading“”[Initialized]
4. onLoaded“”[Requestsent]
5. onInteractive“”[Responsebeingreceived]
6. onXYZXYZ onSuccessonFailure
7. onComplete
Responsereceived
onFailure onFailureonComplete
XMLHttpRequest onLoaded onInteractive
onCreateonUninitialized
onSuccess onFailure, Ajax.RequestXHR“”
//newAjax.Request('/your/url',{ onComplete:function(transport){ if(200==transport.status) //yadayadayada } });
“”"2xy"
Prototype
![Page 24: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/24.jpg)
newAjax.Request('/your/url',{ onSuccess:function(transport){ //yadayadayada } });
JavascriptAJAX SOP content-typeJavascript
responseText eval
AJAXJavascriptPrototypeMIME
application/ecmascript
application/javascript
application/x-ecmascript
application/x-javascript
text/ecmascript
text/javascript
text/x-ecmascript
text/x-javascript
MIME
1
success()XHR staus 2xy
transport.status
2HTTP
![Page 25: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/25.jpg)
XHR getResponseHeaderXHR
Ajax.Response#getHeader
newAjax.Request('/your/url',{ onSuccess:function(response){ //null if((response.getHeader('Server')||'').match(/Apache/)) ++gApacheCount; // } });
3JSON
JSON X-JSONJSON
Ajax.Response headerJSON
newAjax.Request('/your/url',{ onSuccess:function(transport){ transport.headerJSON } });
![Page 26: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/26.jpg)
Ajax.Responders.register(responder)Ajax.Responders.unregister(responder)
PrototypeAJAX
AJAX Ajax.RequestAjax.Updater
Ajax.PeriodicalUpdater
AJAX
Prototype Ajax.Responders
Prototype
//varresponders=newObject();responders.onCreate=function(){Ajax.activeRequestCount++;};//onCreateresponders.onComplete=function(){Ajax.activeRequestCount--;};//onCompleteAjax.Responders.register(responders);
Prototype Ajax.activeRequestCount
Prototype onCreate onComplete
Ajax.Responders.register({ onCreate:function(){Ajax.activeRequestCount++;}, onComplete:function(){Ajax.activeRequestCount--;}});
onCreate
onUninitialized
…
Ajax.Responders
![Page 27: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/27.jpg)
Ajax
XmlHttpRequest ActiveX
headerJSON JSON
Ajax.Request XmlHttpRequest Ajax.Request
Ajax.Response
Ajax.Response
status Number
statusText String HTTP
readyState Number 0 "Uninitialized"1 "Loading"2 "Loaded"3"Interactive"4 "Complete"
responseText String
responseXML document
null
content-type application/xmlXML
responseJSON Object,Array null
content-type application/json
headerJSON Object,Array null
X-JSON null
request Object Ajax.Request Ajax.Updater
transport Object xmlHttpRequest
Ajax.Response
getHeader(name) String
null
null XHR
getAllHeaders() String \r\n Http
Ajax.Response 1.6
![Page 28: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/28.jpg)
null
getResponseHeader(name) String XmlHttpRequest
getHeader
getAllResponseHeaders() String \r\ngetAllResponseHeaders getAllHeaders
![Page 29: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/29.jpg)
newAjax.Updater(container,url[,options])
AJAX
Ajax.Updater Ajax.Request Ajax.Request
newAjax.Updater('items','/items',{ parameters:{text:$F('text')}});
onComplete
Ajax.UpdaterAJAXDOM
evalScripts false <script>
insertion None Element.update1.6.0Insertion Insertion.Bottom1.6.0'top''bottom''before' 'after'
AJAXXHTML
newAjax.Updater('items','/items', {parameters:{text:$F('text')}, insertion:Insertion.Bottom});
evalScripts evalScripts:true <script> eval()
Ajax.Updater
![Page 30: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/30.jpg)
Prototype var
var myVariant='thisisaexample'
//Ajax.UpdaterfunctioncoolFunc(){ //Amazingstuff!}
coolFunc var
//Ajax.UpdatercoolFunc=function(){ //Amazingstuff!}
success/failure
containerDOM success failure
newAjax.Updater({success:'items'},'/items',{ parameters:{text:$F('text')}, insertion:Insertion.Bottom});
newAjax.Updater({success:'items',failure:'notice'}, '/items', {parameters:{text:$F('text')},insertion:Insertion.Bottom});
![Page 31: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/31.jpg)
clear, clone, compact, each, first, flatten, from, indexOf, inspect, last, reduce,
reverse, size, toArray, toJSON, uniq,without
PrototypeJavascript
Enumerable Enumerable
Prototype
for…inbye-byeJavascript for…in
ECMA262 ECMAScript
concatjoinpoppush
for…in§12.6.4 in
for…in for…in for…in
Prototype Array.prototype
EnumerablePrototype Array
for(varindex=0;index<myArray.length;++index){ varitem=myArray[index]; //...}
Array
![Page 32: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/32.jpg)
iterators each
myArray.each(function(item){ //...});
Prototype for…in
//for(varindex=0,len=myArray.length;index<len;++index){ varitem=myArray[index]; //...}
for index<myArray.lengthJavascript
clearclear()->Array
cloneclone()->newArray
compactcompact()->newArray
null/undefined
each
![Page 33: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/33.jpg)
each(iterator)->Array
firstfirst()->value
undefined
flattenflatten()->newArray
fromArray.from(iterable)->actualArray
$A() $A
indexOfindexOf(value)->position
-1
inspectinspect()->String
"['a',['b',[ObjectObject]],'c']"
lastlast()->value
undefined
reduce
![Page 34: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/34.jpg)
reduce()->Array|singleValue
reversereverse([inline=true])->Array
inline false
sizesize()->Number
toArraytoArray()->newArray
Enumerable toArray
toJSONtoJSON()->String
JSON
uniquniq()->newArray
withoutwithout(value...)->newArray
1.5.1
![Page 35: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/35.jpg)
clear()->Array
varguys=['Sam','Justin','Andrew','Dan'];guys.clear();//->[]guys//->[]
clear
![Page 36: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/36.jpg)
clone()->newArray
varfruits=['Apples','Oranges'];varmyFavs=fruits.clone();myFavs.pop();//fruits->['Apples','Oranges']//myFavs->['Apples']
clone
![Page 37: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/37.jpg)
compact()->newArray
null/undefined
['frank',,'sue',,'sally',null].compact()//->['frank','sue','sally']
compact
![Page 38: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/38.jpg)
each(iterator)->Array
each Enumerable
each
![Page 39: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/39.jpg)
first()->value
undefined
['Ruby','Php','Python'].first()//->'Ruby'[].first()//->undefined
first
![Page 40: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/40.jpg)
flatten()->newArray
['frank',['bob','lisa'],['jill',['tom','sally']]].flatten()//->['frank','bob','lisa','jill','tom','sally']
flatten
![Page 41: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/41.jpg)
Array.from(iterable)->actualArray
$A() $A
from
![Page 42: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/42.jpg)
indexOf(value)->position
-1
== ===
JavascriptArray
[3,5,6,1,20].indexOf(1)//->3[3,5,6,1,20].indexOf(90)//->-1[0,false,15].indexOf(false)//->0010==false!
indexOf
![Page 43: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/43.jpg)
inspect()->String
"['a',['b',[ObjectObject]],'c']"
inspect Object.inspect
['Apples',{good:'yes',bad:'no'},3,34].inspect()//->"['Apples',[objectObject],3,34]"
join
['apples','bananas','kiwis'].join(',')//->'apples,bananas,kiwis'
inspect
![Page 44: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/44.jpg)
last()->value
undefined
['Ruby','Php','Python'].last()//->'Python'[].last()//->undefined
last
![Page 45: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/45.jpg)
reduce()->Array|singleValue
[3].reduce();//->3[3,5].reduce();//->[3,5]
reduce
![Page 46: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/46.jpg)
reverse([inline=true])->Array
inline false
varnums=[3,5,6,1,20];nums.reverse(false)//->[20,1,6,5,3]nums//->[3,5,6,1,20]nums.reverse()//->[20,1,6,5,3]nums//->[20,1,6,5,3]
reverse
![Page 47: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/47.jpg)
size()->Number
Enumerable size length
Array.size returnthis.length;
Enumerable.size returnthis.toArray().length;
size
![Page 48: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/48.jpg)
toArray()->newArray
Enumerable toArray
clone Enumerable toArray
toArray
![Page 49: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/49.jpg)
toJSON()->String
JSON
['a',{b:null}].toJSON();//->'["a",{"b":null}]'
toJSON 1.5.1
![Page 50: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/50.jpg)
uniq()->newArray
['Sam','Justin','Andrew','Dan','Sam'].uniq();//->['Sam','Justin','Andrew','Dan']['Prototype','prototype'].uniq();//->['Prototype','prototype']
O(n^2)JavaScript Array.concat
uniq
![Page 51: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/51.jpg)
without(value...)->newArray
[3,5,6,1,20].without(3)//->[5,6,1,20][3,5,6,1,20].without(20,6)//->[3,5,1]
without
![Page 52: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/52.jpg)
addMethods, create
PrototypeOOP
Object.extend
addMethodsaddMethods(methods)
createcreate([superclass][,methods...])->Class
Class
1.6.0
![Page 53: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/53.jpg)
addMethods(methods)
Class#addMethods Class.create
——
$super
varAnimal=Class.create({ initialize:function(name,sound){ this.name=name; this.sound=sound; }, speak:function(){ alert(this.name+"says:"+this.sound+"!"); }});//AnimalvarSnake=Class.create(Animal,{ initialize:function($super,name){ $super(name,'hissssssssss'); }});varringneck=newSnake("Ringneck","hissssssss");ringneck.speak();//->"Ringnecksays:hissssssss!"//Snake#speak($super)Snake.addMethods({ speak:function($super){ $super(); alert("Youshouldprobablyrun.Helooksreallymad."); }});ringneck.speak();//->"Ringnecksays:hissssssss!"//->"Youshouldprobablyrun.Helooksreallymad."//Animal#speakAnimal.addMethods({ speak:function(){ alert(this.name+'snarls:'+this.sound+'!'); }});ringneck.speak();//->"Ringnecksnarls:hissssssss!"//->"Youshouldprobablyrun.Helooksreallymad."
addMethods 1.6.0
![Page 54: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/54.jpg)
![Page 55: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/55.jpg)
create([superclass][,methods...])->Class
Class.create initialize
1.6 Class.create Class
$super
Class.addMethods
superclass null
subclasses
JavaScript constructor
varAnimal=Class.create({ initialize:function(name,sound){ this.name=name; this.sound=sound; }, speak:function(){ alert(this.name+"says:"+this.sound+"!"); }});//AnimalvarSnake=Class.create(Animal,{ initialize:function($super,name){ $super(name,'hissssssssss'); }});
varringneck=newSnake("Ringneck");
create
![Page 56: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/56.jpg)
ringneck.speak();//->"Ringnecksays:hissssssssss!"
varrattlesnake=newSnake("Rattler");rattlesnake.speak();//->"Rattlersays:hissssssssss!"
//EnumerablevarAnimalPen=Class.create(Enumerable,{ initialize:function(){ varargs=$A(arguments); if(!args.all(function(arg){returnarginstanceofAnimal})) throw"Onlyanimalsinhere!" this.animals=args; }, //Enumerable_each _each:function(iterator){ returnthis.animals._each(iterator); }});
varsnakePen=newAnimalPen(ringneck,rattlesnake);snakePen.invoke('speak');//->"Ringnecksays:hissssssssss!"//->"Rattlersays:hissssssssss!"
1.6Prototype1.6
Class.create initialize Ruby
varAnimal=Class.create();Animal.prototype={ initialize:function(name,sound){ this.name=name; this.sound=sound; }, speak:function(){ alert(name+"says:"+sound+"!"); }};
varsnake=newAnimal("Ringneck","hissssssssss");snake.speak();//->"Ringnecksays:hissssssssss!"varDog=Class.create();Dog.prototype=Object.extend(newAnimal(),{ initialize:function(name){ this.name=name; this.sound="woof"; }
![Page 57: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/57.jpg)
});
varfido=newDog("Fido");fido.speak();//->"Fidosays:woof!"
![Page 58: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/58.jpg)
toJSON
toJSONtoJSON()->String
JSONISO
Date
1.5.1
![Page 59: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/59.jpg)
toJSON()->String
JSONISO
newDate(1969,11,31,19).toJSON();//->'"1969-12-31T19:00:00"'
toJSON 1.5.1
![Page 60: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/60.jpg)
absolutize, addClassName, addMethods, adjacent, ancestors, childElements,
classNames, cleanWhitespace, clonePosition, cumulativeOffset,
cumulativeScrollOffset, descendantOf, descendants, down, empty, extend, fire,
firstDescendant, getDimensions, getElementsByClassName,
getElementsBySelector, getHeight, getOffsetParent, getStyle, getWidth,
hasClassName, hide, identify, immediateDescendants, insert, inspect,
makeClipping,makePositioned,match, next, nextSiblings, observe,
positionedOffset, previous, previousSiblings, readAttribute, recursivelyCollect,
relativize, remove, removeClassName, replace, scrollTo, select, setOpacity,
setStyle, show, siblings, stopObserving, toggle, toggleClassName, undoClipping,
undoPositioned, up, update, viewportOffset, visible,wrap,writeAttribute
Element Element DOM
DOM
“Prototype DOM”PrototypeDOM
<divid="message"class=""></div>
//div#messageCSS$('message').addClassName('read');//->div#message//Element.toggleClassName('message','read');//->div#message
Element
$('message').addClassName('read').update('Ireadthismessage!').setStyle({opacity:0.5});
Element
Element
1.6
![Page 61: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/61.jpg)
newElement(tagName[,attributes])
ElementDOM Element#update
“/” Element#writeAttribute
vara=document.createElement('a');a.setAttribute('class','foo');a.setAttribute('href','/foo.html');a.appendChild(document.createTextNode("Nextpage"));
vara=newElement('a',{'class':'foo',href:'/foo.html'}).update("Nextpage");
absolutizeabsolutize(element)->HTMLElement
element.style.position='absolute'
addClassNameaddClassName(element,className)->HTMLElement
CSS element
addMethodsaddMethods([methods])addMethods(tagName,methods)
hash Elementhash HTMLtagNameHTML
adjacentElement.adjacent(element[,selectors...])->[HTMLElement...]
1.6
1.6
![Page 62: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/62.jpg)
someElement.adjacent([selectors...])->[HTMLElement...]
selectors
ancestorsancestors(element)->[HTMLElement...]
element...
childElementschildElements(element)->[HTMLElement...]
classNamesclassNames(element)->Enumerable
ClassNames EnumerableCSS
cleanWhitespacecleanWhitespace(element)->HTMLElement
XMLHTML
<div> <p></p></div>
<div>element.childNodes<p>,Prototype cleanWhitespace
clonePositionclonePosition(element,source[,options])->HTMLElement
source options/ element
cumulativeOffset
1.5.1
1.6
1.6
![Page 63: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/63.jpg)
cumulativeOffset(element)->[Number,Number]{left:Number,top:Number}
elementoffsetX offset[0] offset.leftY offset[1] offset.top
cumulativeScrollOffsetcumulativeScrollOffset(element)->[Number,Number]{left:Number,top:Number}
offsetX offset[0] offset.leftY offset[1] offset.top
descendantOfdescendantOf(element,ancestor)->Boolean
element ancestor
descendantsdescendants(element)->[HTMLElement...]
element
downdown(element[,cssRule][,index=0])->HTMLElement|undefined
element cssRule index index cssRule
emptyempty(element)->Boolean
element
extendextend(element)
1.6
![Page 64: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/64.jpg)
element Element.Methods Element.Methods.Simulated elementinputtextarea select Form.Element.Methods form Form.Methods
firefire(eventName[,memo])->Event
firstDescendantfirstDescendant(element)->HTMLElement
DOM firstChild firstChild [
getDimensionsgetDimensions(element)->{height:Number,width:Number}
element width height
getElementsByClassNamegetElementsByClassName(element,className)->[HTMLElement...]
element classNameCSS
getElementsBySelectorgetElementsBySelector(element,selector...)->[HTMLElement...]
CSS element
getHeightgetHeight(element)->Number
element
getOffsetParentgetOffsetParent(element)->HTMLElement
1.6.0
1.5.1
1.6
![Page 65: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/65.jpg)
elementContainingBlock CSS position relative absolutebody
getStylegetStyle(element,property)->String|null
elementCSS propertyCSS camelized CSSborder-widthborder-widthborderWidth
DOM element.style.xxx
getWidthgetWidth(element)->Number
element
hasClassNamehasClassName(element,className)->Boolean
element classNameCSS
hidehide(element)->HTMLElement
element
identifyidentify(element)->id
element id id id id
immediateDescendantsimmediateDescendants(element)->[HTMLElement...]
insertinsert(element,{position:content})->HTMLElement
1.6
1.6
![Page 66: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/66.jpg)
insert(element,content)->HTMLElement
position content content content
position beforeaftertop bottom
inspectinspect(element)->String
element
makeClippingmakeClipping(element)->HTMLElement
'hidden'CSS clip element
makePositionedmakePositioned(element)->HTMLElement
CSSblock elementCSSposition 'static' undefinedposition'relative'
matchmatch(element,selector)->Boolean
element selectorCSS
nextnext(element[,cssRule][,index=0])->HTMLElement|undefined
cssRule element index index cssRule
nextSiblingsnextSiblings(element)->[HTMLElement...]
element
observe
![Page 67: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/67.jpg)
observe(element,eventName,handler[,useCapture=false])->HTMLElement
element
positionedOffsetpositionedOffset(element)->[Number,Number]{left:Number,top:Number}
elementContainingBlock CSS position relative absoluteelement Element#getOffsetParent
offsetX offset[0] offset.leftY offset[1] offset.top
previousprevious(element[,cssRule][,index=0])->HTMLElement|undefined
cssRule element index index cssRule
previousSiblingspreviousSiblings(element)->[HTMLElement...]
element
readAttributereadAttribute(element,attribute)->String|null
elemnet attribute null
recursivelyCollectrecursivelyCollect(element,property)->[HTMLElement...]
element property property element DOM
relativizerelativize(element)->HTMLElement
1.6
1.6
![Page 68: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/68.jpg)
element.style.position='relative' 1.6.0.32066
element._originalWidth=element.style.width;element._originalHeight=element.style.height;
removeremove(element)->HTMLElement
element
removeClassNameremoveClassName(element,className)->HTMLElement
element classNameCSS
replacereplace(element[,html])->HTMLElement
html element element
IE element.outerHTML=html
scrollToscrollTo(element)->HTMLElement
elemnet
selectselect(element,selector...)->[HTMLElement...]
CSS element
setOpacityElement.setOpacity(element,opacity)->[HTMLElement...]someElement.setOpacity(opacity)->[HTMLElement...]
1.6
1.5.1
![Page 69: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/69.jpg)
element opacity01 01
setStylesetStyle(element,styles)->HTMLElement
elementCSS styles/Hash camelizedwidth borderWidthborder-width
showshow(element)->HTMLElement
element
siblingssiblings(element)->[HTMLElement...]
element
stopObservingstopObserving(element,eventName,handler)->HTMLElement
element
toggletoggle(element)->HTMLElement
element
toggleClassNametoggleClassName(element,className)->HTMLElement
elementCSS className
undoClippingundoClipping(element)->HTMLElement
elementCSS overflow Element.makeClipping()
![Page 70: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/70.jpg)
undoPositionedundoPositioned(element)->HTMLElement
element Element.makePositioned
upup(element,[cssRule][,index=0])->HTMLElement|undefined
element cssRule index index cssRule
updateupdate(element[,newContent])->HTMLElement
element newContent element.innerHTML=newContent
viewportOffsetviewportOffset(element)->[Number,Number]{left:Number,top:Number}
element offsetX offset[0] offset.leftY offset[1] offset.top
visiblevisible(element)->Boolean
Boolean element style "display:none;"
wrapElement.wrap(element,wrapper[,attributes])->HTMLElementsomeElement.wrap(wrapper[,attributes])->HTMLElement
element wrapper wrapper
writeAttributewriteAttribute(element,attribute[,value=true])->HTMLElementwriteAttribute(element,attributes)->HTMLElement
1.6
1.6
1.6
![Page 71: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/71.jpg)
elementhash/
![Page 72: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/72.jpg)
absolutize(element)->HTMLElement
element.style.position='absolute'
absolutize 1.6
![Page 73: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/73.jpg)
addClassName(element,className)->HTMLElement
CSS element
<divid="mutsu"class="applefruit"></div>
$('mutsu').addClassName('food')$('mutsu').className//->'applefruitfood'$('mutsu').classNames()//->['apple','fruit','food']
addClassName
![Page 74: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/74.jpg)
addMethods([methods])
addMethods(tagName,methods)
hash Elementhash HTMLtagNameHTML
Element.addMethods Element $() Element
$(element).myOwnMethod([args...]);
Element.myOwnMethod(element|id[,args...]);
Element.addMethodshashhash
element $()
[methods]
varmyVeryOwnElementMethods={ myFirstMethod:function(element[,args...]){ element=$(element); // returnelement; }, mySecondMethod:function(element[,args...]){ element=$(element); // returnelement; }};
v1.5.1 Element.addMethodsHTML
Element.addMethods('DIV',my_div_methods);
addMethods
![Page 75: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/75.jpg)
//DIV
Element.addMethods(['DIV','SPAN'],my_div_methods);//DIVSPAN
Element.addMethods getAttribute innerHTML
PrototypePrototype
<div> Element.wrap('tagName')
Element.addMethods({ wrap:function(element,tagName){ element=$(element); varwrapper=document.createElement('tagName'); element.parentNode.replaceChild(wrapper,element); wrapper.appendChild(element); returnElement.extend(wrapper); }});
//<pid="first">Somecontent...</p>
$(element).wrap('div');//->HTMLElement(div)
//<div><pid="first">Somecontent...</p></div>
Element.wrap <div> Element.extend
$(element).wrap('div').setStyle({backgroundImage:'url(images/rounded-corner-top-left.png)topleft'});
![Page 76: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/76.jpg)
Web Ajax.UpdaterDOM
Element.addMethods({ ajaxUpdate:function(element,url,options){ element=$(element); element.update('<imgsrc="/images/spinner.gif"alt="loading..."/>'); newAjax.Updater(element,url,options); returnelement; }});
$(element).ajaxUpdate('/new/content');//->HTMLElement
elementAjax spinner.gif Ajax.Updater
elementAjax
Element.addMethods
Element.addMethods
Element.MethodsElement.Methods.SimulatedForm.Methods
Form.Element.MethodsDOM Form.Methods form
Form.Element.Methods inputselect textarea
Element.addMethods
“Pleasewait...”
Form.Element.Methods.processing=function(element,text){ element=$(element); if(element.tagName.toLowerCase()=='input'&&['button','submit'].include(element.type)) { element.value=(text===undefined?'Pleasewait...':text); element.disable() } returnelement;};
Element.addMethods();
![Page 77: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/77.jpg)
addMethods(tagName,methods)
![Page 78: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/78.jpg)
Element.adjacent(element[,selectors...])->[HTMLElement...]
someElement.adjacent([selectors...])->[HTMLElement...]
selectors
<ulid="cities"> <liclass="us"id="nyc">NewYork</li> <liclass="uk"id="lon">London</li> <liclass="us"id="chi">Chicago</li> <liclass="jp"id="tok">Tokyo</li> <liclass="us"id="la">LosAngeles</li> <liclass="us"id="aus">Austin</li></ul>
$('nyc').adjacent('li.us');//->[<li#chi,li#la,li#aus>]
adjacent 1.6
![Page 79: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/79.jpg)
ancestors(element)->[HTMLElement...]
element...
element parentNode
PrototypeDOM
<html> […] <body> <divid="father"> <divid="kid"></div> </div> </body></html>
$('kid').ancestors();//->[div#father,body,html]//"body""html"document.getElementsByTagName('html')[0].ancestors();//->[]
ancestors
![Page 80: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/80.jpg)
childElements(element)->[HTMLElement...]
0
PrototypeDOM
<divid="australopithecus"> <divid="homo-erectus"> <divid="homo-neanderthalensis"></div> <divid="homo-sapiens"></div> </div></div>
$('australopithecus').childElements();//->[div#homo-erectus]$('homo-erectus').childElements();//->[div#homo-neanderthalensis,div#homo-sapiens]$('homo-sapiens').childElements();//->[]
childElements 1.5.1
![Page 81: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/81.jpg)
classNames(element)->Enumerable
ClassNames EnumerableCSS
Element#classNames Element#addClassName
Element#removeClassNameElement#hasClassName
CSS $w(element.className)
EnumerableCSS className
EnumerableCSS set(className)add(className)
remove(className) Element.addClassName
Element.toggleClassName Element.removeClassName
<divid="mutsu"class="applefruitfood"></div>
$('mutsu').classNames().inspect()//->"#<Enumerable:['apple','fruit','food']>"//CSS$('mutsu').className='fruitround'$('mutsu').classNames().inspect()//->"#<Enumerable:['fruit','food']>"
classNames
![Page 82: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/82.jpg)
cleanWhitespace(element)->HTMLElement
XMLHTML<div>
<p></p>
</div>
<div>element.childNodes<p>,<p>Prototype cleanWhitespace
Element.cleanWhitespace nextSibling
previousSiblingfirstChild lastChildDOM
Element.upElement.downElement.previous
HTML
<ulid="apples"> <li>Mutsu</li> <li>McIntosh</li> <li>IdaRed</li></ul>
varelement=$('apples');element.firstChild.innerHTML;//->undefined
ul#apples
element.cleanWhitespace();
cleanWhitespace
![Page 83: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/83.jpg)
DOM
<ULid="apples"><LI>Mutsu</LI><LI>McIntosh</LI><LI>IdaRed</LI></UL>
firstChild
element.firstChild.innerHTML;//->'Mutsu'
![Page 84: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/84.jpg)
clonePosition(element,source[,options])->HTMLElement
source options/ element
CSScontainingblock
setLeft true sourceCSS left element
setTop true sourceCSS top element
setWidth true sourceCSS width element
setHeight true sourceCSS height element
offsetLeft 0
elementCSS leftelemnetCSS left source left
offsetLeft
offsetTop 0
elementCSS topelemnetCSS top source top
offsetTop
optionshash element width height options
{setWidth:false,setWidth:false}
clonePosition 1.6
![Page 85: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/85.jpg)
cumulativeOffset(element)->[Number,Number]{left:Number,top:Number}
elementoffsetX offset[0] offset.leftY offset[1]
offset.top
offsetLeft offsetTop
cumulativeOffset 1.6
![Page 86: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/86.jpg)
cumulativeScrollOffset(element)->[Number,Number]{left:Number,top:Number}
offsetX offset[0] offset.leftY offset[1]offset.top
scrollLeft scrollTop
cumulativeScrollOffset 1.6
![Page 87: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/87.jpg)
descendantOf(element,ancestor)->Boolean
element ancestor
Element.descendantOf ancestor $() ancestorID
<divid="australopithecus"> <divid="homo-herectus"> <divid="homo-sapiens"></div> </div></div>
$('homo-sapiens').descendantOf('australopithecus');//->true$('homo-herectus').descendantOf('homo-sapiens');//->false
descendantOf
![Page 88: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/88.jpg)
descendants(element)->[HTMLElement...]
element
PrototypeDOM
<divid="australopithecus"> <divid="homo-herectus"> <divid="homo-neanderthalensis"></div> <divid="homo-sapiens"></div> </div></div>
$('australopithecus').descendants();//->[div#homo-herectus,div#homo-neanderthalensis,div#homo-sapiens]$('homo-sapiens').descendants();//->[]
descendants
![Page 89: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/89.jpg)
down(element[,cssRule][,index=0])->HTMLElement|undefined
element cssRule index index cssRule
Element.downPrototypeDOM Element.up
Element.next Element.previous Prototype/CSS
$(element).down(1).next('li',2).hide();
DOM
element firstChild Element.down
index element Element.descendants
0
cssRule Element.down
cssRule index Element.downCSS
undefined
<ulid="fruits"> <liid="apples"> <ul> <liid="golden-delicious">GoldenDelicious</li> <liid="mutsu"class="yummy">Mutsu</li> <liid="mcintosh"class="yummy">McIntosh</li> <liid="ida-red">IdaRed</li>
down
![Page 90: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/90.jpg)
</ul> </li></ul>
$('fruits').down();//$('fruits').down(0);//->li#apple$('fruits').down(3);//->li#golden-delicious$('apples').down('li');//->li#golden-delicious$('apples').down('li.yummy');//->li#mutsu$('fruits').down('.yummy',1);//->li#mcintosh$('fruits').down(99);//->undefined
![Page 91: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/91.jpg)
empty(element)->Boolean
element
<divid="wallet"></div><divid="cart">full!</div>
$('wallet').empty();//->true$('cart').empty();//->false
empty
![Page 92: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/92.jpg)
extend(element)
element Element.Methods Element.Methods.Simulated elementinputtextarea select Form.Element.Methods formForm.Methods
Prototype
element.update('helloworld');
Element
element.update('helloworld').addClassName('greeting');
Element Element.siblingsPrototype
$$()
PrototypeDOM .
extend
![Page 93: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/93.jpg)
fire(eventName[,memo])->Event
Element#fire
memo
Element#fire
Element#fire MyEvent:disableDOM
mousewheel DOMMouseScroll
document.observe("widget:frobbed",function(event){ console.log("ElementwithID("+event.target.id+")frobbedwidget#"+event.memo.widgetNumber+".");});
varsomeNode=$('foo');someNode.fire("widget:frobbed",{widgetNumber:19});//->"ElementwithID(foo)frobbedwidget#19."
Event#stop stopped true Element#fire stopped
fire 1.6.0
![Page 94: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/94.jpg)
firstDescendant(element)->HTMLElement
DOM firstChild firstChild [
<divid="australopithecus"> <divid="homo-erectus"><!--Latinissuper--> <divid="homo-neanderthalensis"></div> <divid="homo-sapiens"></div> </div></div>
$('australopithecus').firstDescendant();//->div#homo-herectus//DOMfirstChild$('homo-herectus').firstChild;//->"Latinissuper"//$('homo-herectus').firstDescendant();//->div#homo-neanderthalensis
firstDescendant 1.5.1
![Page 95: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/95.jpg)
getDimensions(element)->{height:Number,width:Number}
element width height
CSS none0
<divid="rectangle"style="font-size:10px;width:20em;height:10em"></div>
vardimensions=$('rectangle').getDimensions();//->{width:200,height:100}dimensions.width;//->200dimensions.height;//->100
getDimensions
![Page 96: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/96.jpg)
getElementsByClassName(element,className)->[HTMLElement...]
element classNameCSS
Prototype1.6 document.getElementsByClassName
NodeList Arrayv1.6 $$ Element#select
0 elementCSS
<ulid="fruits"> <liid="apples">apples <ul> <liid="golden-delicious">GoldenDelicious</li> <liid="mutsu"class="yummy">Mutsu</li> <liid="mcintosh"class="yummy">McIntosh</li> <liid="ida-red">IdaRed</li> </ul> </li> <liid="exotic"class="yummy">exoticfruits <ul> <liid="kiwi">kiwi</li> <liid="granadilla">granadilla</li> </ul> </li></ul>
$('fruits').getElementsByClassName('yummy');//->[li#mutsu,li#mcintosh,li#exotic]$('exotic').getElementsByClassName('yummy');//->[]
getElementsByClassName
![Page 97: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/97.jpg)
getElementsBySelector(element,selector...)->[HTMLElement...]
CSS element
Prototype1.6 Element#getElementsBySelector
Element#select
$$() CSS
<ulid="fruits"> <liid="apples"> <h3title="yummy!">Apples</h3> <ulid="list-of-apples"> <liid="golden-delicious"title="yummy!">GoldenDelicious</li> <liid="mutsu"title="yummy!">Mutsu</li> <liid="mcintosh">McIntosh</li> <liid="ida-red">IdaRed</li> </ul> <pid="saying">Anappleadaykeepsthedoctoraway.</p> </li></ul>
$('apples').getElementsBySelector('[title="yummy!"]');//->[h3,li#golden-delicious,li#mutsu]$('apples').getElementsBySelector('p#saying','li[title="yummy!"]');//->[li#golden-delicious,li#mutsu,p#saying]$('apples').getElementsBySelector('[title="disgusting!"]');//->[]
Element#getElementsBySelector getElementsByTagName
varnodes=$A(someUL.getElementsByTagName('li')).map(Element.extend);varnodes2=someUL.getElementsBySelector('li');
getElementsBySelector
![Page 98: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/98.jpg)
ArrayPrototype Enumerable
DOM Element#getElementsBySelector
1.5.1
![Page 99: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/99.jpg)
getHeight(element)->Number
element
CSS none0
Element.getDimensions
<divid="rectangle"style="font-size:10px;width:20em;height:10em"></div>
$('rectangle').getHeight();//->100
getHeight
![Page 100: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/100.jpg)
getOffsetParent(element)->HTMLElement
elementContainingBlock CSS position relative absolute body
element CSScontainingblock
getOffsetParent 1.6
![Page 101: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/101.jpg)
getStyle(element,property)->String|null
elementCSS propertyCSS camelized CSSborder-widthborder-widthborderWidth
DOM element.style.xxx
CSSCSS
1 lefttopright bottomwidth height
$(element).getStyle('font-size');//$(element).getStyle('fontSize');//->'12px'
InternetExplorerCSSHTML
<style> #test{font-size:12px;margin-left:1em;}</style><divid="test"></div>
$('test').getStyle('margin-left');//->IE'1em'//->'12px'
display 'none'Safari null
CSS DOM2
getStyle
![Page 102: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/102.jpg)
getWidth(element)->Number
element
CSS none0
Element.getDimensions
<divid="rectangle"style="font-size:10px;width:20em;height:10em"></div>
$('rectangle').getWidth();//->200
getWidth
![Page 103: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/103.jpg)
hasClassName(element,className)->Boolean
element classNameCSS
<divid="mutsu"class="applefruitfood"></div>
$('mutsu').hasClassName('fruit');//->true$('mutsu').hasClassName('vegetable');//->false
hasClassName
![Page 104: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/104.jpg)
hide(element)->HTMLElement
element
<divid="error-message"></div>
$('error-message').hide();//->HTMLElement(div#error-message)
Prototype Element.toggleElement.show
Element.hide1.5
Enumerables
['content','navigation','footer'].each(Element.hide);//->['content','navigation','footer']//#content,#navigation#footer
$('content','navigation','footer').invoke('hide');//->[HTMLElement,HTMLElement,HTMLElement](#content,#navigation#footer)//#content,#navigation#footer
hide
![Page 105: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/105.jpg)
identify(element)->id
element id id id id
HTML<ul> <liid="apple">apple</li> <li>orange</li></ul>
JavaScript$('apple').identify();//->'apple'$('apple').next().identify();//->'anonymous_element_1'
HTML<ul> <liid="apple">apple</li> <liid="anonymous_element_1">orange</li></ul>
identify 1.6
![Page 106: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/106.jpg)
immediateDescendants(element)->[HTMLElement...]
Prototype1.6 Element#immediateDescendants
Element#childElements
0
PrototypeDOM
<divid="australopithecus"> <divid="homo-erectus"> <divid="homo-neanderthalensis"></div> <divid="homo-sapiens"></div> </div></div>
$('australopithecus').immediateDescendants();//->[div#homo-erectus]$('homo-erectus').immediateDescendants();//->[div#homo-neanderthalensis,div#homo-sapiens]$('homo-sapiens').immediateDescendants();//->[]
immediateDescendants deprecated
![Page 107: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/107.jpg)
insert(element,{position:content})->HTMLElement
insert(element,content)->HTMLElement
position content content content
position beforeaftertop bottom
HTMLDOM toHTML toElement
HTML <script>JavascriptHTML
String#evalScripts
insert 1.6
![Page 108: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/108.jpg)
inspect(element)->String
element
inspect Object.inspect
<ul> <liid="golden-delicious">GoldenDelicious</li> <liid="mutsu"class="yummyapple">Mutsu</li> <liid="mcintosh"class="yummy">McIntosh</li> <li></li></ul>
$('golden-delicious').inspect();//->'<liid="golden-delicious">'$('mutsu').inspect();//->'<liid="mutsu"class="yummyapple">'$('mutsu').next().inspect();//->'<li>'
inspect
![Page 109: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/109.jpg)
makeClipping(element)->HTMLElement
'hidden'CSS clip element
Element.undoClipping
element
<divid="framer"> <imgsrc="/assets/2007/1/14/chairs.jpg"alt="example"/></div>
$('framer').makeClipping().setStyle({width:'100px',height:'100px'});//->HTMLElement
makeClipping
![Page 110: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/110.jpg)
makePositioned(element)->HTMLElement
CSSblock elementCSSposition 'static' undefined
'relative'
elementCSS Element.undoPositioned
<p>lorem[…]</p><divid="container"> <divid="element"style="position:absolute;top:20px;left:20px;"></div></div>
div#element
$('container').makePositioned();//->HTMLElement
makePositioned
![Page 111: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/111.jpg)
![Page 112: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/112.jpg)
match(element,selector)->Boolean
element selectorCSS
<ulid="fruits"> <liid="apples"> <ul> <liid="golden-delicious">GoldenDelicious</li> <liid="mutsu"class="yummy">Mutsu</li> <liid="mcintosh"class="yummy">McIntosh</li> <liid="ida-red">IdaRed</li> </ul> </li></ul>
$('fruits').match('ul');//->true$('mcintosh').match('li#mcintosh.yummy');//->true$('fruits').match('p');//->false
match
![Page 113: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/113.jpg)
next(element[,cssRule][,index=0])->HTMLElement|undefined
cssRule element index index cssRuleundefined
Element.nextPrototypeDOM Element.up
Element.down Element.previous Prototype/CSShead body
$(element).down(1).next('li',2).hide();
DOM
element nextSibling Element.next
index element Element.nextSiblings
0
cssRule Element.next
cssRule index Element.nextCSS
undefined
<ulid="fruits"> <liid="apples"> <h3id="title">Apples</h3>
next
![Page 114: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/114.jpg)
<ulid="list-of-apples"> <liid="golden-delicious">GoldenDelicious</li> <liid="mutsu">Mutsu</li> <liid="mcintosh"class="yummy">McIntosh</li> <liid="ida-red"class="yummy">IdaRed</li> </ul> <pid="saying">An appleadaykeepsthedoctoraway.</p> </li></ul>
$('list-of-apples').next();//$('list-of-apples').next(0);//->p#sayings$('title').next(1);//->ul#list-of-apples$('title').next('p');//->p#sayings$('golden-delicious').next('.yummy');//->li#mcintosh$('golden-delicious').next('.yummy',1);//->li#ida-red$('ida-red').next();//->undefined
![Page 115: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/115.jpg)
nextSiblings(element)->[HTMLElement...]
element
head body
0 element
PrototypeDOM
<ul> <liid="golden-delicious">GoldenDelicious</li> <liid="mutsu">Mutsu</li> <liid="mcintosh">McIntosh</li> <liid="ida-red">IdaRed</li></ul>
$('mutsu').nextSiblings();//->[li#mcintosh,li#ida-red]$('ida-red').nextSiblings();//->[]
nextSiblings
![Page 116: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/116.jpg)
observe(element,eventName,handler[,useCapture=false])->HTMLElement
element
Event.observe Event.observe
$(element).observe('click',function(event){ alert(Event.element(event).innerHTML);});//->HTMLElementHTML
observe
![Page 117: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/117.jpg)
positionedOffset(element)->[Number,Number]{left:Number,top:Number}
elementContainingBlock CSS position relative absoluteelement Element#getOffsetParent
offsetX offset[0] offset.leftY offset[1]offset.top
offsetLeft offsetTopCSS
position
"CalculatesthecumulativeoffsetLeftandoffsetTopofanelementandallitsparentsuntilitreachesanelementwithapositionofstatic."
positionedOffset:function(element){ varvalueT=0,valueL=0; do{ valueT+=element.offsetTop||0; valueL+=element.offsetLeft||0; element=element.offsetParent; if(element){ if(element.tagName.toUpperCase()=='BODY')break; varp=Element.getStyle(element,'position'); if(p!=='static')break; //positionstatic } }while(element); returnElement._returnOffset(valueL,valueT);}
positionedOffset 1.6
![Page 118: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/118.jpg)
previous(element[,cssRule][,index=0])->HTMLElement|undefined
cssRule element index index cssRule
Element.previousPrototypeDOM Element.up
Element.down Element.next Prototype/CSShead body
$(element).down(1).next('li',2).hide();
DOM
element previousSibling Element.previous
index element Element.previousSiblings
element0
cssRule Element.previous
cssRule index Element.previousCSS
undefined
<ulid="fruits"> <liid="apples"> <h3>Apples</h3>
previous
![Page 119: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/119.jpg)
<ulid="list-of-apples"> <liid="golden-delicious"class="yummy">GoldenDelicious</li> <liid="mutsu"class="yummy">Mutsu</li> <liid="mcintosh">McIntosh</li> <liid="ida-red">IdaRed</li> </ul> <pid="saying">Anappleadaykeepsthedoctoraway.</p> </li></ul>
$('saying').previous();//$('saying').previous(0);//->ul#list-of-apples$('saying').previous(1);//->h3$('saying').previous('h3');//->h3$('ida-red').previous('.yummy');//->li#mutsu$('ida-red').previous('.yummy',1);//->li#golden-delicious$('ida-red').previous(5);//->undefined
![Page 120: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/120.jpg)
previousSiblings(element)->[HTMLElement...]
element
head body
0 element
PrototypeDOM
<ul> <liid="golden-delicious">GoldenDelicious</li> <liid="mutsu">Mutsu</li> <liid="mcintosh">McIntosh</li> <liid="ida-red">IdaRed</li></ul>
$('mcintosh').previousSiblings();//->[li#mutsu,li#golden-delicious]$('golden-delicious').previousSiblings();//->[]
previousSiblings
![Page 121: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/121.jpg)
readAttribute(element,attribute)->String|null
elemnet attribute null
getAttributeSafariInternetExplorer
getAttribute“” .apply .call
InternetExplorer
<aid="tag"href="/tags/prototype"rel="tag"title="viewrelatedbookmarks."my_widget="someinfo.">Prototype</a>
$('tag').readAttribute('href');//->'/tags/prototype'$('tag').readAttribute('title');//->'viewrelatedbookmarks.'$('tag').readAttribute('my_widget');//->'someinfo.'
readAttribute
![Page 122: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/122.jpg)
recursivelyCollect(element,property)->[HTMLElement...]
element property property element DOM
Element.ancestorsElement.descendantsElement.nextSiblingsElement.previousSiblings Element.siblings
PrototypeDOM
<ulid="fruits"> <liid="apples"> <ulid="list-of-apples"> <liid="golden-delicious"><p>GoldenDelicious</p></li> <liid="mutsu">Mutsu</li> <liid="mcintosh">McIntosh</li> <liid="ida-red">IdaRed</li> </ul> </li></ul>
$('fruits').recursivelyCollect('firstChild');//->[li#apples,ul#list-of-apples,li#golden-delicious,p]
recursivelyCollect
![Page 123: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/123.jpg)
relativize(element)->HTMLElement
element.style.position='relative' 1.6.0.32066element._originalWidth=element.style.width;
element._originalHeight=element.style.height;
relativize 1.6
![Page 124: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/124.jpg)
remove(element)->HTMLElement
element
Element.hide
//<ul> <liid="golden-delicious">GoldenDelicious</li> <liid="mutsu">Mutsu</li> <liid="mcintosh">McIntosh</li> <liid="ida-red">IdaRed</li></ul>
$('mutsu').remove();//->HTMLElement(li#mutsu)
//<ul> <liid="golden-delicious">GoldenDelicious</li> <liid="mcintosh">McIntosh</li> <liid="ida-red">IdaRed</li></ul>
remove
![Page 125: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/125.jpg)
removeClassName(element,className)->HTMLElement
element classNameCSS
<divid="mutsu"class="applefruitfood"></div>
$('mutsu').removeClassName('food');//->HTMLElement$('mutsu').classNames();//->['apple','fruit']
removeClassName
![Page 126: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/126.jpg)
replace(element[,html])->HTMLElement
html element element
IE element.outerHTML=html
Opera9 input replace
$('foo').replace('<p>Bar</p>') WebForms2
replace input Element.replace('foo',
'<p>Bar</p>')
htmlHTML toStringJavaScript
html <script> element <script>
Element.replace() String#evalScripts
html Element.replace element Element.remove
<divid="food"> <divid="fruits"> <pid="first">Kiwi,banana<em>and</em>apple.</p> </div></div>
HTML
$('first').replace('<ulid="favorite"><li>kiwi</li><li>banana</li><li>apple</li></ul>');//->HTMLElement(p#first)$('fruits').innerHTML;//->'<ulid="favorite"><li>kiwi</li><li>banana</li><li>apple</li></ul>'
replace
![Page 127: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/127.jpg)
<script>
$('favorite').replace('<pid="still-first">Melon,oranges<em>and</em>grapes.</p><script>alert("removed!")</script>');//->HTMLElement(ul#favorite)“removed!”$('fruits').innerHTML//->'<pid="still-first">Melon,oranges<em>and</em>grapes.</p>'
$('still-first').replace('Melon,orangesandgrapes.');//->HTMLElement(p#still-first)$('fruits').innerHTML//->'Melon,orangesandgrapes.'
toString()
$('fruits').replace(123);//->HTMLElement$('food').innerHTML;//->'123'
![Page 128: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/128.jpg)
scrollTo(element)->HTMLElement
elemnet
HTMLanchors
$(element).scrollTo();//->HTMLElement
scrollTo
![Page 129: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/129.jpg)
select(element,selector...)->[HTMLElement...]
CSS element
$$() CSS
<ulid="fruits"> <liid="apples"> <h3title="yummy!">Apples</h3> <ulid="list-of-apples"> <liid="golden-delicious"title="yummy!">GoldenDelicious</li> <liid="mutsu"title="yummy!">Mutsu</li> <liid="mcintosh">McIntosh</li> <liid="ida-red">IdaRed</li> </ul> <pid="saying">Anappleadaykeepsthedoctoraway.</p> </li></ul>
$('apples').select('[title="yummy!"]');//->[h3,li#golden-delicious,li#mutsu]$('apples').select('p#saying','li[title="yummy!"]');//->[li#golden-delicious,li#mutsu,p#saying]$('apples').select('[title="disgusting!"]');//->[]
Element#select getElementsByTagName
varnodes=$A(someUL.getElementsByTagName('li')).map(Element.extend);varnodes2=someUL.select('li');
ArrayPrototype Enumerable
DOM Element#select
1.6
select 1.6
![Page 130: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/130.jpg)
Element.setOpacity(element,opacity)->[HTMLElement...]
someElement.setOpacity(opacity)->[HTMLElement...]
element opacity01 01
Element.setStyle setOpacity
varelement=$('myelement');//50%element.setOpacity(0.5);//CSSelement.setStyle({opacity:0.5});element.setStyle("opacity:0.5");
setOpacity 1.5.1
![Page 131: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/131.jpg)
setStyle(element,styles)->HTMLElement
elementCSS styles/Hash camelizedborder-width borderWidthborder-width
$(element).setStyle({backgroundColor:'#900',fontSize:'12px'});//->HTMLElement
float opacity float
opacity0 1
$(element).setStyle({cssFloat:'left',opacity:0.5});//->HTMLElement$(element).setStyle({ 'float':'left',//float opacity:0.5});//->HTMLElement
CSS DOM2
CSS null $(element).setStyle({backgroundColor:
null})IE Firefox
backgroundColor:''})IEFirefox
setStyle
![Page 132: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/132.jpg)
show(element)->HTMLElement
element
<divid="error-message"style="display:none;"></div>
$('error-message').show();//->HTMLElement(div#error-message)
Element.showCSSPrototypeCSS
<style>CSS show CSS displayJavascript
<style> #hidden-by-css{display:none;}</style>
[…]
<divid="hidden-by-css"></div>
$('hidden-by-css').show();////->HTMLElementdiv#error-message)
Prototype Element.toggleElement.show
Element.hide1.5
Enumerables
show
![Page 133: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/133.jpg)
['content','navigation','footer'].each(Element.show);//->['content','navigation','footer']//#content,#navigation#footer
$('content','navigation','footer').invoke('show');//->[HTMLElement,HTMLElement,HTMLElement](#content,#navigation#footer)//#content,#navigation#footer
![Page 134: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/134.jpg)
siblings(element)->[HTMLElement...]
element
head body
0 element
PrototypeDOM
Examples<ul> <liid="golden-delicious">GoldenDelicious</li> <liid="mutsu">Mutsu</li> <liid="mcintosh">McIntosh</li> <liid="ida-red">IdaRed</li></ul>
$('mutsu').siblings();//->[li#golden-delicious,li#mcintosh,li#ida-red]
siblings
![Page 135: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/135.jpg)
stopObserving(element,eventName,handler)->HTMLElement
element
Event.stopObserving Event.stopObserving
$(element).stopObserving('click',coolAction);//->HTMLElement'coolAction'
stopObserving
![Page 136: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/136.jpg)
toggle(element)->HTMLElement
element
<divid="welcome-message"></div><divid="error-message"style="display:none;"></div>
$('welcome-message').toggle();//->HTMLElementdiv#welcome-message$('error-message').toggle();//->HTMLElementdiv#error-message
Element.toggleCSSPrototypeCSS
<style>CSS toggle CSS display
Javascript
<style> #hidden-by-css{display:none;}</style>
[…]
<divid="hidden-by-css"></div>
$('hidden-by-css').toggle();////->HTMLElementdiv#hidden-by-css
Prototype Element.toggleElement.show
Element.hide1.5
toggle
![Page 137: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/137.jpg)
Enumerables
['error-message','welcome-message'].each(Element.toggle);//->['error-message','welcome-message']//div#error-messagediv#confirmation-message
$('error-message','welcome-message').invoke('toggle');//->[HTMLElement,HTMLElement]div#error-messagediv#welcome-message//div#error-messagediv#confirmation-message
![Page 138: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/138.jpg)
toggleClassName(element,className)->HTMLElement
elementCSS className
<divid="mutsu"class="apple"></div>
$('mutsu').hasClassName('fruit');//->false$('mutsu').toggleClassName('fruit');//->element$('mutsu').hasClassName('fruit');//->true
toggleClassName
![Page 139: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/139.jpg)
undoClipping(element)->HTMLElement
elementCSS overflow Element.makeClipping()
<divid="framer"> <imgsrc="/assets/2007/1/14/chairs.jpg"alt="example"/></div>
$('framer').undoClipping();//->HTMLElementCSSoverflow
undoClipping
![Page 140: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/140.jpg)
undoPositioned(element)->HTMLElement
element Element.makePositioned
element elementCSS position
'absolute''relative' 'fixed'
<p>lorem[…]</p><divid="container"> <divid="element"style="position:absolute;top:20px;left:20px;"></div></div>
$('container').makePositioned();//->HTMLElement
Element.undoPositioned
undoPositioned
![Page 141: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/141.jpg)
$('container').undoPositioned();//->HTMLElement
![Page 142: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/142.jpg)
up(element,[cssRule][,index=0])->HTMLElement|undefined
element cssRule index index cssRule
Element.upPrototypeDOM Element.down
Element.next Element.previous Prototype/CSS
$(element).up(1).next('li',2).hide();
DOM
element parentNode Element.up
index element Element.ancestors
cssRule Element.up
cssRule index Element.upCSS
undefined
<html> […] <body> <ulid="fruits"> <liid="apples"class="keeps-the-doctor-away"> <ul> <liid="golden-delicious">GoldenDelicious</li> <liid="mutsu"class="yummy">Mutsu</li>
up
![Page 143: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/143.jpg)
<liid="mcintosh"class="yummy">McIntosh</li> <liid="ida-red">IdaRed</li> </ul> </li> </ul> </body></html>
$('fruits').up();//$('fruits').up(0);//->body$('mutsu').up(2);//->ul#fruits$('mutsu').up('li');//->li#apples$('mutsu').up('.keeps-the-doctor-away');//->li#apples$('mutsu').up('ul',1);//->ul#fruits$('mutsu').up('div');//->undefined
![Page 144: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/144.jpg)
update(element[,newContent])->HTMLElement
element newContent element.innerHTML=newContent
newContentHTML toString()JavaScript
newContent <script>Javascript
String#evalScripts
Element.update element
IE6
<divid="fruits">carrot,eggplantandcucumber</div>
$('fruits').update('kiwi,bananaandapple');//->HTMLElement$('fruits').innerHTML//->'kiwi,bananaandapple'
$('fruits').update();//->HTMLElement$('fruits').innerHTML;//->''()
HTML
$('fruits').update('<p>Kiwi,banana<em>and</em>apple.</p>');//->HTMLElement$('fruits').innerHTML;
update
![Page 145: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/145.jpg)
//->'<p>Kiwi,banana<em>and</em>apple.</p>'
<script>HTML
$('fruits').update('<p>Kiwi,banana<em>and</em>apple.</p><script>alert("updated!")</script>');//->HTMLElement"updated"$('fruits').innerHTML;//->'<p>Kiwi,banana<em>and</em>apple.</p>'
toString()
$('fruits').update(123);//->HTMLElement$('fruits').innerHTML;//->'123'
toString
varFruit=Class.create();Fruit.prototype={ initialize:function(fruit){this.fruit=fruit;}, toString:function(){return'Iamafruitandmynameis"'+this.fruit+'".';}}varapple=newFruit('apple');$('fruits').update(apple);$('fruits').innerHTML;//->'Iamafruitandmynameis"apple".'
![Page 146: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/146.jpg)
viewportOffset(element)->[Number,Number]{left:Number,top:Number}
element offsetX offset[0] offset.leftY offset[1]
offset.top
viewportOffset 1.6
![Page 147: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/147.jpg)
visible(element)->Boolean
Boolean element style "display:none;"
<divid="visible"></div><divid="hidden"style="display:none;"></div>
$('visible').visible();//->true$('hidden').visible();//->false
CSSPrototypeCSS<style>CSS visibleJavascriptCSS
<style> #hidden-by-css{display:none;}</style>
[…]
<divid="hidden-by-css"></div>
$('hidden-by-css').visible();//->true
visible
![Page 148: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/148.jpg)
Element.wrap(element,wrapper[,attributes])->HTMLElement
someElement.wrap(wrapper[,attributes])->HTMLElement
element wrapper wrapper
InternetExplorer textarea wrap
$('foo').wrap('p')IEHTML wrap
textarea Element.wrap('foo','p')
Element#wrap——
wrapper HTMLElementHTML
Prototype Element#writeAttribute/ wrapper
HTML<tableid="data"> <tr> <th>Foo</th> <th>Bar</th> </tr> <tr> <td>1</td> <td>2</td> </tr></table>
JavaScript//1vardiv=newElement('div',{'class':'table-wrapper'});$('data').wrap(div);//2$('data').wrap('div',{'class':'table-wrapper'});//DIV
wrap 1.6
![Page 149: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/149.jpg)
HTML<divclass="table-wrapper"> <tableid="data"> <tr> <th>Foo</th> <th>Bar</th> </tr> <tr> <td>1</td> <td>2</td> </tr> </table></div>
![Page 150: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/150.jpg)
writeAttribute(element,attribute[,value=true])->HTMLElement
writeAttribute(element,attributes)->HTMLElement
elementhash/
writeAttribute 1.6
![Page 151: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/151.jpg)
absolutize, addClassName, adjacent, ancestors, childElements, classNames,
cleanWhitespace, clonePosition, cumulativeOffset, cumulativeScrollOffset,
descendantOf, descendants, down, empty, fire, firstDescendant, getDimensions,
getElementsByClassName, getElementsBySelector, getHeight, getOffsetParent,
getStyle, getWidth, hasClassName, hide, identify, immediateDescendants, insert,
inspect,makeClipping,makePositioned,match, next, nextSiblings, observe,
positionedOffset, previous, previousSiblings, readAttribute, recursivelyCollect,
relativize, remove, removeClassName, replace, scrollTo, select, setOpacity,
setStyle, show, siblings, stopObserving, toggle, toggleClassName, undoClipping,
undoPositioned, up, update, viewportOffset, visible,wrap,writeAttribute
Element.MethodsDOM
//$(element).hide();// EnumerableID"article"$('articles').descendants();
absolutizeabsolutize(element)->HTMLElement
element.style.position='absolute'
addClassNameaddClassName(element,className)->HTMLElement
CSS element
adjacent
Element.Methods
1.6
1.6
![Page 152: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/152.jpg)
Element.adjacent(element[,selectors...])->[HTMLElement...]someElement.adjacent([selectors...])->[HTMLElement...]
selectors
ancestorsancestors(element)->[HTMLElement...]
element...
childElementschildElements(element)->[HTMLElement...]
classNamesclassNames(element)->Enumerable
ClassNames EnumerableCSS
cleanWhitespacecleanWhitespace(element)->HTMLElement
XMLHTML
<div> <p></p></div>
<div>element.childNodes<p>,Prototype cleanWhitespace
clonePositionclonePosition(element,source[,options])->HTMLElement
source options/ element
1.5.1
1.6
![Page 153: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/153.jpg)
cumulativeOffsetcumulativeOffset(element)->[Number,Number]{left:Number,top:Number}
elementoffsetX offset[0] offset.leftY offset[1] offset.top
cumulativeScrollOffsetcumulativeScrollOffset(element)->[Number,Number]{left:Number,top:Number}
offsetX offset[0] offset.leftY offset[1] offset.top
descendantOfdescendantOf(element,ancestor)->Boolean
element ancestor
descendantsdescendants(element)->[HTMLElement...]
element
downdown(element[,cssRule][,index=0])->HTMLElement|undefined
element cssRule index index cssRule
emptyempty(element)->Boolean
element
firefire(eventName[,memo])->Event
1.6
1.6
1.6.0
![Page 154: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/154.jpg)
firstDescendantfirstDescendant(element)->HTMLElement
DOM firstChild firstChild [
getDimensionsgetDimensions(element)->{height:Number,width:Number}
element width height
getElementsByClassNamegetElementsByClassName(element,className)->[HTMLElement...]
element classNameCSS
getElementsBySelectorgetElementsBySelector(element,selector...)->[HTMLElement...]
CSS element
getHeightgetHeight(element)->Number
element
getOffsetParentgetOffsetParent(element)->HTMLElement
elementContainingBlock CSS position relative absolutebody
getStylegetStyle(element,property)->String|null
elementCSS propertyCSS camelized CSSborder-width
1.5.1
1.6
![Page 155: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/155.jpg)
border-widthborderWidth
getWidthgetWidth(element)->Number
element
hasClassNamehasClassName(element,className)->Boolean
element classNameCSS
hidehide(element)->HTMLElement
element
identifyidentify(element)->id
element id id id id
immediateDescendantsimmediateDescendants(element)->[HTMLElement...]
insertinsert(element,{position:content})->HTMLElementinsert(element,content)->HTMLElement
position content content content
position beforeaftertop bottom
inspectinspect(element)->String
1.6
deprecated
1.6
![Page 156: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/156.jpg)
element
makeClippingmakeClipping(element)->HTMLElement
'hidden'CSS clip element
makePositionedmakePositioned(element)->HTMLElement
CSSblock elementCSSposition 'static' undefinedposition'relative'
matchmatch(element,selector)->Boolean
element selectorCSS
nextnext(element[,cssRule][,index=0])->HTMLElement|undefined
cssRule element index index cssRule
nextSiblingsnextSiblings(element)->[HTMLElement...]
element
observeobserve(element,eventName,handler[,useCapture=false])->HTMLElement
element
positionedOffsetpositionedOffset(element)->[Number,Number]{left:Number,top:Number}
1.6
![Page 157: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/157.jpg)
elementContainingBlock CSS position relative absoluteelement Element#getOffsetParent
offsetX offset[0] offset.leftY offset[1] offset.top
previousprevious(element[,cssRule][,index=0])->HTMLElement|undefined
cssRule element index index cssRule
previousSiblingspreviousSiblings(element)->[HTMLElement...]
element
readAttributereadAttribute(element,attribute)->String|null
elemnet attribute null
recursivelyCollectrecursivelyCollect(element,property)->[HTMLElement...]
element property property element DOM
relativizerelativize(element)->HTMLElement
element.style.position='relative' 1.6.0.32066
element._originalWidth=element.style.width;element._originalHeight=element.style.height;
remove
1.6
![Page 158: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/158.jpg)
remove(element)->HTMLElement
element
removeClassNameremoveClassName(element,className)->HTMLElement
element classNameCSS
replacereplace(element[,html])->HTMLElement
html element element
IE element.outerHTML=html
scrollToscrollTo(element)->HTMLElement
elemnet
selectselect(element,selector...)->[HTMLElement...]
CSS element
setOpacityElement.setOpacity(element,opacity)->[HTMLElement...]someElement.setOpacity(opacity)->[HTMLElement...]
element opacity01 01
setStylesetStyle(element,styles)->HTMLElement
elementCSS styles/Hash camelizedwidth borderWidthborder-width
show
1.6
1.5.1
![Page 159: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/159.jpg)
show(element)->HTMLElement
element
siblingssiblings(element)->[HTMLElement...]
element
stopObservingstopObserving(element,eventName,handler)->HTMLElement
element
toggletoggle(element)->HTMLElement
element
toggleClassNametoggleClassName(element,className)->HTMLElement
elementCSS className
undoClippingundoClipping(element)->HTMLElement
elementCSS overflow Element.makeClipping()
undoPositionedundoPositioned(element)->HTMLElement
element Element.makePositioned
upup(element,[cssRule][,index=0])->HTMLElement|undefined
![Page 160: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/160.jpg)
element cssRule index index cssRule
updateupdate(element[,newContent])->HTMLElement
element newContent element.innerHTML=newContent
viewportOffsetviewportOffset(element)->[Number,Number]{left:Number,top:Number}
element offsetX offset[0] offset.leftY offset[1] offset.top
visiblevisible(element)->Boolean
Boolean element style "display:none;"
wrapElement.wrap(element,wrapper[,attributes])->HTMLElementsomeElement.wrap(wrapper[,attributes])->HTMLElement
element wrapper wrapper
writeAttributewriteAttribute(element,attribute[,value=true])->HTMLElementwriteAttribute(element,attributes)->HTMLElement
elementhash/
1.6
1.6
1.6
![Page 161: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/161.jpg)
hasAttribute
Element.Methods.SimulatedHTMLElement
hasAttributehasAttribute(element,attribute)->Boolean
InternetExplorer67DOM hasAttribute
Element.Methods.Simulated
simulated
![Page 162: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/162.jpg)
hasAttribute(element,attribute)->Boolean
InternetExplorer67DOM hasAttribute
<aid="link"href="http://prototypejs.org">Prototype</a>
$('link').hasAttribute('href');//->true
hasAttribute simulated
![Page 163: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/163.jpg)
all, any, collect, detect, each, eachSlice, entries, find, findAll, grep, inGroupsOf,
include, inject, invoke,map,max,member,min, partition, pluck, reject, select,
size, sortBy, toArray, zip
EnumerablePrototype
Enumerable module
EnumerableRubyEnumerable
Prototype EnumerableArray Hash
DOMAjax
contextEnumerable iterator iterator context
iterator iterator this context
varmyObject={};['foo','bar','baz'].each(function(name,index){ this[name]=index;},myObject);//contextthismyObjectmyObject//->{foo:0,bar:1,baz:2}
context
Ruby Enumerable
Enumerable
map collect
find detect
Enumerable
![Page 164: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/164.jpg)
findAll select
include member
entries toArray
EnumerableAPI
collectinvokepluck each
Enumerable each Enumerable collect
invoke pluck
reject findAllvs.partition
findAll/select reject
Enumerable
Enumerable _each “”
Prototype
_each:function(iterator){ for(vari=0,length=this.length;i<length;i++) iterator(this[i]);//}
each Enumerable
Prototype ArrayHash ObjectRange
Enumerable
varYourObject=Class.create();
![Page 165: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/165.jpg)
Object.extend(YourObject.prototype,Enumerable);Object.extend(YourObject.prototype,{ initialize:function(){ // }, _each:function(iterator){ //iterator }, //Enumerable});
varobj=newYourObject();[...]obj.pluck('somePropName');obj.invoke('someMethodName');obj.size();
allall([iterator=Prototype.K[,context]])->Boolean
Enumerable true true false iterator bool
anyany([iterator=Prototype.K[,context]])->Boolean
Enumerable true true false iterator bool
collectcollect(iterator[,context])->Array
iterator Enumerable mapiterator
detectdetect(iterator[,context])->firstElement|undefined
iterator true find iterator
each
![Page 166: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/166.jpg)
each(iterator[,context])->Enumerable
Enumerable Enumerable iterator
eachSliceeachSlice(size[,iterator=Prototype.K[,context]])->[slice...]
Enumerable
entriesentries()->Array
toArray
findfind(iterator)->firstElement|undefined
iterator true detect find find iterator
findAllfindAll(iterator[,context])->Array
iterator true select
grepgrep(regex[,iterator=Prototype.K[,context]])->Array
iterator
inGroupsOfinGroupsOf(size[,filler=null])->[group...]
filler
includeinclude(object)->Boolean
![Page 167: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/167.jpg)
Enumerable == member
injectinject(accumulator,iterator[,context])->accumulatedValue
iterator accumulator iterator accumulatoraccumulator
iteratorPrototype accumulator
invokeinvoke(methodName[,arg...])->Array
each collect Enumerable
mapmap(iterator)->Array
iterator Enumerable collect
maxmax([iterator=Prototype.K[,context]])->maxValue
Enumerable iterator iterator Enumerable undefined
membermember(object)->Boolean
Enumerable == include
minmin([iterator=Prototype.K[,context]])->minValue
Enumerable iterator iterator Enumerable undefined
partitionpartition([iterator=Prototype.K[,context]])->[TrueArray,FalseArray]
![Page 168: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/168.jpg)
true falseJavascript bool iterator
pluckpluck(propertyName)->Array
collect
rejectreject(iterator[,context])->Array
iterator false
selectselect(iterator)->Array
iterator true findAll
sizesize()->Number
Enumerable
sortBysortBy(iterator[,context])->Array
iterator Enumerable
toArraytoArray()->Array
Enumerable Array entries
zipzip(Sequence...[,iterator=Prototype.K])->Array
![Page 169: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/169.jpg)
![Page 170: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/170.jpg)
all([iterator=Prototype.K[,context]])->Boolean
Enumerable true true false iterator bool
Prototype.KPrototype
bool false iteratorbool
bool
context iterator iterator this context
[].all()//->true( false)$R(1,5).all()
//->true([1..5] true)[0,1,2].all()
//->false(0 false)[9,10,15].all(function(n){returnn>=10;})
//->false(9iterator false)$H({name:'John',age:29,oops:false}).all(function(pair){returnpair.value;})
//->false(oops/falsefalse)
Enumerable any
all
![Page 171: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/171.jpg)
any([iterator=Prototype.K[,context]])->Boolean
Enumerable true true false iterator bool
Prototype.KPrototype
bool true iteratorbool
bool
context iterator iterator this context
[].any()//->false( true)$R(0,2).any()
//->true(2 true)[2,4,6,8,10].any(function(n){return0==n%3;})
//->true(6 iterator true3)$H({opt1:null,opt2:false,opt3:'',opt4:'pfew!'}).any(function(pair){
returnpair.value;
})
//->true(opt4/'pfew!' true)
Enumerable all
any
![Page 172: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/172.jpg)
collect(iterator[,context])->Array
iterator Enumerable map iterator
context iterator iterator this context
['Hitch',"Hiker's",'Guide','To','The','Galaxy'].collect(function(s){ returns.charAt(0).toUpperCase();}).join('')//->'HHGTTG'$R(1,5).collect(function(n){returnn*n;})//->[1,4,9,16,25]
pluck
collect
collect
![Page 173: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/173.jpg)
detect(iterator[,context])->firstElement|undefined
iterator true find iterator
context iterator iterator this context
detect
![Page 174: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/174.jpg)
each(iterator[,context])->Enumerable
Enumerable Enumerable iterator
each Enumerable iterator
1.2. 0
context iterator iterator this context
$break $continue
$continuePrototype1.5 iterator
return
JavaScript break continue iterator
iterator iterator
Prototype $break
each
['one','two','three'].each(function(s){alert(s);});['hello','world'].each(function(s,index){alert(index+':'+s);});//'0:hello''1:world'//inject//...varresult=[];$R(1,10).each(function(n){ if(0==n%2) throw$continue; if(n>6) throw$break; result.push(n);
each
![Page 175: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/175.jpg)
});//result->[1,3,5]// inject$R(1,10).inject([],function(result,n){ if(n<6&&0!=n%2) result.push(n); returnresult;})
eachvs._each Enumerable Enumerable
Enumerable.each _each
1. break/continue2. value/index
invoke each
![Page 176: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/176.jpg)
eachSlice(size[,iterator=Prototype.K[,context]])->[slice...]
Enumerable
context iterator iterator this context
varstudents=[ {name:'Sunny',age:20},{name:'Audrey',age:21}, {name:'Matt',age:20},{name:'Élodie',age:26}, {name:'Will',age:21},{name:'David',age:23}, {name:'Julien',age:22},{name:'Thomas',age:21}, {name:'Serpil',age:22}];students.eachSlice(4,function(toon){ returntoon.pluck('name');})//->[['Sunny','Audrey','Matt','Élodie'],//['Will','David','Julien','Thomas'],//['Serpil']]
students.eachSlice(2).first()//->[{name:'Sunny',age:20},{name:'Audrey',age:21}]
eachSlice
eachSlice
![Page 177: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/177.jpg)
entries()->Array
toArray
entries
![Page 178: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/178.jpg)
find(iterator)->firstElement|undefined
iterator true detect find find iterator
findAll
//functionisPrime(n){ if(2>n) returnfalse; if(0==n%2) return(2==n); for(varindex=3;n/index>index;index+=2) if(0==n%index) returnfalse; returntrue;}//isPrime$R(10,15).find(isPrime)//->11['hello','world','this','is','nice'].find(function(s){returns.length<=3;})//->'is'
find
![Page 179: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/179.jpg)
findAll(iterator[,context])->Array
iterator true select
grepgrep findAll
context iterator iterator this context
$R(1,10).findAll(function(n){return0==n%2;})//->[2,4,6,8,10]['hello','world','this','is','nice'].findAll(function(s){returns.length>=5;})//->['hello','world']
findAll reject partition
findAll
![Page 180: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/180.jpg)
grep(filter[,iterator=Prototype.K[,context]])->Array
iterator
match Enumerable
filter match
filter.match true
iterator map
context iterator iterator this context
Prototype1.6 grep filter
//['hello','world','this','is','cool'].grep(/(.)\1/)//->['hello','cool']//05$R(1,30).grep(/[05]$/)//->[5,10,15,20,25,30]//051$R(1,30).grep(/[05]$/,function(n){returnn-1;})//->[4,9,14,19,24,29]//CSS//(Selector"match")$('foo').childElements().grep(newSelector("li.active"));
grep
![Page 181: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/181.jpg)
inGroupsOf(size[,filler=null])->[group...]
filler
varstudents=[ {name:'Sunny',age:20},{name:'Audrey',age:21}, {name:'Matt',age:20},{name:'Élodie',age:26}, {name:'Will',age:21},{name:'David',age:23}, {name:'Julien',age:22},{name:'Thomas',age:21}, {name:'Serpil',age:22}];
students.pluck('name').inGroupsOf(4){//->[['Sunny','Audrey','Matt','Élodie'],//['Will','David','Julien','Thomas'],//['Serpil',null,null,null]]
eachSlice
inGroupsOf
![Page 182: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/182.jpg)
include(object)->Boolean
Enumerable == member
===
Enumerable any
$R(1,15).include(10)//->true['hello','world'].include('HELLO')//->false[1,2,'3','4','5'].include(3)//->true(==)
include
![Page 183: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/183.jpg)
inject(accumulator,iterator[,context])->accumulatedValue
iterator accumulator iterator accumulatoraccumulator
iteratorPrototype accumulator
context iterator iterator this context
$R(1,10).inject(0,function(acc,n){ returnacc+n;})//->55(110)
$R(2,5).inject(1,function(acc,n){ returnacc*n;})//->120(5)
['hello','world','this','is','nice'].inject( [], function(array,value,index){ if(0==index%2) array.push(value); returnarray; })//->['hello','this','nice']
//vararray1=[];vararray2=[1,2,3].inject(array1,function(array,value){ array.push(value*value); returnarray;});array2//->[1,4,9]array1//->[1,4,9]array2.push(16);array1//->[1,4,9,16]
injectJavaScript
inject
![Page 184: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/184.jpg)
invoke(methodName[,arg...])->Array
each collect Enumerable
each collect
['hello','world','cool!'].invoke('toUpperCase')//['HELLO','WORLD','COOL!']['hello','world','cool!'].invoke('substring',0,3)//['hel','wor','coo']//Prototype$('navBar','adsBar','footer').invoke('hide')//Prototype//“invoke”$$('#windowsdiv.close').invoke('addClassName','active').invoke('show');
pluck
invoke
![Page 185: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/185.jpg)
map(iterator)->Array
iterator Enumerable collect
map
![Page 186: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/186.jpg)
max([iterator=Prototype.K[,context]])->maxValue
Enumerable iterator iterator Enumerable
context iterator iterator this context
$R(1,10).max()//->10['hello','world','gizmo'].max()//->'world'
functionPerson(name,age){ this.name=name; this.age=age;}varjohn=newPerson('John',20);varmark=newPerson('Mark',35);vardaisy=newPerson('Daisy',22);[john,mark,daisy].max(function(person){ returnperson.age;})//->35
max
![Page 187: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/187.jpg)
member(object)->Boolean
Enumerable == include
member
![Page 188: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/188.jpg)
min([iterator=Prototype.K[,context]])->minValue
Enumerable iterator iterator Enumerable
context iterator iterator this context
$R(1,10).min()//->1['hello','world','gizmo'].min()//->'gizmo'
functionPerson(name,age){ this.name=name; this.age=age;}varjohn=newPerson('John',20);varmark=newPerson('Mark',35);vardaisy=newPerson('Daisy',22);[john,mark,daisy].min(function(person){ returnperson.age;})//->20
min
![Page 189: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/189.jpg)
partition([iterator=Prototype.K[,context]])->[TrueArray,FalseArray]
true falseJavascript bool iterator
findAll/select reject Enumerable partition
context iterator iterator this context
['hello',null,42,false,true,,17].partition()//->[['hello',42,true,17],[null,false,undefined]]$R(1,10).partition(function(n){ return0==n%2;})//->[[2,4,6,8,10],[1,3,5,7,9]]
partition
![Page 190: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/190.jpg)
pluck(propertyName)->Array
collect
collect
['hello','world','this','is','nice'].pluck('length')//->[5,5,4,3,4]document.getElementsByClassName('superfluous').pluck('tagName').sort().uniq()//->sortedlistofuniquecanonicaltagnamesforelementswiththis//specificCSSclass...
invoke Enumerable
pluck
![Page 191: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/191.jpg)
reject(iterator[,context])->Array
iterator false
context iterator iterator this context
$R(1,10).reject(function(n){ return0==n%2;})//->[1,3,5,7,9]['hello','world','this','is','nice'].reject(function(s){ returns.length>=5;})//->['this','is','nice']
findAll select
reject
![Page 192: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/192.jpg)
select(iterator)->Array
findAll
select
![Page 193: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/193.jpg)
size()->Number
Enumerable
$R(1,10).size()//->10['hello',42,true].size()//->3$H().size()//->0
Enumerable
length
size
![Page 194: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/194.jpg)
sortBy(iterator[,context])->Array
iterator Enumerable
iterator
sort < sortBy
Array sort
context iterator iterator this context
['hello','world','this','is','nice'].sortBy(function(s){ returns.length;})//->['is','this','nice','hello','world']['hello','world','this','is','cool'].sortBy(function(s){ varmd=s.match(/[aeiouy]/g); returnnull==md?0:md.length;})//->['world','this','is','hello','cool']//()
sortBy
![Page 195: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/195.jpg)
toArray()->Array
Enumerable Array entries
$A Enumerable
$R(1,5).toArray()//->[1,2,3,4,5]
Enumerable Array.toArray
toArray
![Page 196: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/196.jpg)
zip(Sequence...[,iterator=Prototype.K])->Array
zipHaskellRuby
varfirstNames=['Justin','Mislav','Tobie','Christophe'];varlastNames=['Palmer','Marohnić','Langel','Porteneuve'];
firstNames.zip(lastNames)//->[['Justin','Palmer'],['Mislav','Marohnić'],//['Tobie','Langel'],['Christophe','Porteneuve']]
firstNames.zip(lastNames,function(a){ returna.join('');})//->['JustinPalmer','MislavMarohnić','TobieLangel','ChristophePorteneuve']
varcities=['Memphis','Zagreb','Montreal','Paris'];firstNames.zip(lastNames,cities,function(p){ returnp[0]+''+p[1]+','+p[2];})//->['JustinPalmer,Memphis','MislavMarohnić,Zagreb',//'TobieLangel,Montreal','ChristophePorteneuve,Paris']
firstNames.zip($R(1,100),function(a){ returna.reverse().join('.');})//->['1.Justin','2.Mislav','3.Tobie','4.Christophe']
zip
![Page 197: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/197.jpg)
element, extend, findElement, isLeftClick, observe, pointerX, pointerY, stop,
stopObserving, unloadCache
♪♫
W3CMSIESafari keypress/keydownMSIE
PrototypePrototype Event
Event
KEY_LEFT,KEY_UP,KEY_RIGHT,KEY_DOWN,KEY_DELETE,KEY_HOME,KEY_END,
KEY_PAGEUP,KEY_PAGEDOWN
observeelement stop
Prototype1.6 Event
$('foo').observe('click',respondToClick);functionrespondToClick(event){ varelement=Event.element(event); element.addClassName('active');}
$('foo').observe('click',respondToClick);functionrespondToClick(event){ varelement=event.element();// element.addClassName('active');
Event
1.6
![Page 198: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/198.jpg)
}
Event Event.extend Element Element.extend
Event.observePrototype
Event.extend
elementEvent.element(event)->Element
DOM
extendEvent.extend(event)
Event.Methods event
findElementEvent.findElement(event,tagName)->Element
DOMDOM
isLeftClickEvent.isLeftClick(event)->Boolean
“”
observeEvent.observe(element,eventName,handler[,useCapture=false])
DOM
pointerXEvent.pointerX(event)->Number
1.6
![Page 199: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/199.jpg)
pointerYEvent.pointerY(event)->Number
stopEvent.stop(event)
stopObservingEvent.stopObserving(element,eventName,handler[,useCapture=false])
unloadCacheEvent.unloadCache()
observe 1.6
1.6
![Page 200: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/200.jpg)
Event.element(event)->Element
DOM
v1.5.1 Event.element
Event.observe(document.body,'click',function(event){ varelement=Event.element(event); if('P'==element.tagName) element.hide();});
findElement element
Prototype1.5.01.5.1 DOM Event.elemnet
Element.Methods $()
Event.observe(document.body,'click',function(event){ varelement=$(Event.element(event)); /*...*/});
element
![Page 201: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/201.jpg)
Event.extend(event)
Event.Methods event
Event.observe Element#observe
onclick
extend 1.6
![Page 202: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/202.jpg)
Event.findElement(event,tagName)->Element
DOMDOM
tagName
HTMLDocument
Event.observe(document.body,'click',function(event){ varelt=Event.findElement(event,'P'); if(elt!=document) $(elt).hide();});
upCSS
Event.observe(document.body,'click',function(event){ //CSS'container' varelt=$(Event.element(event)).up('.container'); //DIV //elt=$(Event.element(event)).up('div',1); //CSS'holder'DIV //elt=$(Event.element(event)).up('div.holder',1); elt.hide();});
element
findElement
![Page 203: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/203.jpg)
Event.isLeftClick(event)->Boolean
“”
“”“”
isLeftClick
![Page 204: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/204.jpg)
Event.observe(element,eventName,handler[,useCapture=false])
DOM
HTML <bodyonload="returnmyFunction()">
Level-0 window.onload=myFunction; observe
element+event
1. DOMPrototypeDOM2. DOM DOMLevel2 1.6'click'3. 4. capturing bubbling DOM
…DOMDOMHTML
(X)HTML
<formid="signinForm"method="post"action="/auth/signin">…</form>
checkForm
Event.observe('signinForm','submit',checkForm);
DOM<head><script>
observe
![Page 205: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/205.jpg)
Event.observe(window,'load',function(){ Event.observe('signinForm','submit',checkForm);});
…
DOM
this
Prototype bindAsEventListener
varChecks={ //'generic' generic:function(event){ // }};
Event.observe('signinForm','submit',Checks.generic.bindAsEventListener(Checks));
stopObserving unloadCache
![Page 206: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/206.jpg)
Event.pointerX(event)->Number
pointerX
![Page 207: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/207.jpg)
Event.pointerY(event)->Number
pointerY
![Page 208: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/208.jpg)
Event.stop(event)
……
99.9%Prototype
Event.observe('signinForm','submit',function(event){ varlogin=$F('login').strip(); if(''==login){ Event.stop(event); // }});
stop
![Page 209: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/209.jpg)
Event.stopObserving(element,eventName,handler[,useCapture=false])
observe
stopObserving observe
varobj={ … fx:function(event){ … }};
Event.observe(elt,'click',obj.fx.bindAsEventListener(obj));…
//Event.stopObserving(elt,'click',obj.fx.bindAsEventListener(obj));//
bindAsEventListener
“” script.aculo.us
varobj={ … fx:function(event){ … }};
obj.bfx=obj.fx.bindAsEventListener(obj);Event.observe(elt,'click',obj.bfx);…Event.stopObserving(elt,'click',obj.bfx);
stopObserving
![Page 210: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/210.jpg)
unloadCache
![Page 211: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/211.jpg)
Event.unloadCache()
observe 1.6
1.6v1.6
MSIEMSIE
observe
Prototype unloadCache
PrototypeMSIE unloadCache
unloadCache 1.6
![Page 212: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/212.jpg)
disable, enable, findFirstElement, focusFirstElement, getElements, getInputs,
request, reset, serialize, serializeElements
Form
“PrototypeDOM”
FormElementformElementFormControl<form> <input><select>
disabledisable(formElement)->HTMLFormElement
enableenable(formElement)->HTMLFormElement
findFirstElementfindFirstElement(formElement)->HTMLElement
focusFirstElementfocusFirstElement(formElement)->HTMLFormElement
getElementsgetElements(formElement)->array
Form
![Page 213: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/213.jpg)
getInputsgetInputs(formElement[,type[,name]])->array
INPUTINPUTtypename
requestrequest([options])->newAjax.Request
Ajax.Request actionURL optionsAjax.RequestHTTP getpost
resetreset(formElement)->HTMLFormElement
serializeserialize(formElement[,getHash=false])->String|object
Ajax getHash trueHashname“”“”
serializeElementsserializeElements(elements[,getHash=false])->string|object
Ajax getHash trueHashname“”“”
1.5.1
![Page 214: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/214.jpg)
disable(formElement)->HTMLFormElement
Sulien
23
varform=$('disable-example');//form.disable()form.enable()form[form.disabled?'enable':'disable']();form.disabled=!form.disabled;
form[form.disabled?'enable':'disable']();
——
form.disabled=true
form[form.disabled?'enable':'disable']();
disable
![Page 215: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/215.jpg)
JavaScriptform['disable']()==>form.disable()
![Page 216: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/216.jpg)
enable(formElement)->HTMLFormElement
disable()
HTML
enable
![Page 217: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/217.jpg)
findFirstElement(formElement)->HTMLElement
INPUTSELECTTEXTAREA
document Tab
findFirstElement
![Page 218: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/218.jpg)
focusFirstElement(formElement)->HTMLFormElement
Form.findFirstElement() activate()Web
focusFirstElement
![Page 219: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/219.jpg)
getElements(formElement)->array
OPTIONSELECT
getElements
![Page 220: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/220.jpg)
getInputs(formElement[,type[,name]])->array
INPUTINPUTtypename
varform=$('myform')form.getInputs()//->INPUTform.getInputs('text')//->type='text'INPUTvarbuttons=form.getInputs('radio','education')//->'education'//buttons.invoke('disable')
INPUT document Tab
getInputs
![Page 221: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/221.jpg)
request([options])->newAjax.Request
Ajax.Request actionURL optionsAjax.RequestHTTP getpost
request() options Ajax.Request
method Ajax.Request method options method
method“POST”
options parameters“”hash
HTML
<formid="person-example"method="POST"action="/user/info"> <fieldset> <legend>Userinfo</legend> <div> <labelfor="username">Username:</label> <inputtype="text"name="username"id="username"value=""/> </div> <div> <labelfor="age">Age:</label> <inputtype="text"name="age"id="age"value=""size="3"/> </div> <div> <labelfor="hobbies">Yourhobbiesare:</label> <selectname="hobbies[]"id="hobbies"multiple="multiple"> <option>coding</option> <option>swimming</option> <option>hiking</option> <option>drawing</option> </select> </div> <divclass="buttonrow"> <inputtype="submit"value="serialize!"/> </div> </fieldset></form>
Ajax
request 1.5.1
![Page 222: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/222.jpg)
$('person-example').request();////$('person-example').request({ onComplete:function(){ alert('Formdatasaved!') }})
HTTP options method parameters
interests hobbies
$('person-example').request({ method:'get', parameters:{interests:'JavaScript','hobbies[]':['programming','music']}, onComplete:function(){alert('Formdatasaved!')}})
![Page 223: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/223.jpg)
reset(formElement)->HTMLFormElement
Form.reset('contact')//$('contact').reset()//reset
HTML reset()
reset
![Page 224: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/224.jpg)
serialize(formElement[,getHash=false])->String|object
Ajax getHash trueHashname“”“”
getHash true {name:"johnny",color:"blue"}
"name=johnny&color=blue" Ajax
Prototype1.5Ajax Hash getHash
$('person-example').serialize()//->'username=sulien&age;=22&hobbies;=coding&hobbies;=hiking'$('person-example').serialize(true)//->{username:'sulien',age:'22',hobbies:['coding','hiking']}
Userinfo
codingswimminghikingdrawing
serialize!
serialize
Username:
Age:
Yourhobbiesare:
![Page 225: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/225.jpg)
W3CHTMLJavaScript
"hobbies" SELECTPHPRORRubyon
"hobbies[]" arrayJavaScript ——Prototype
![Page 226: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/226.jpg)
serializeElements(elements[,getHash=false])->string|object
Ajax getHash trueHashname“”“”
Form.serialize getHash Form.serialize
serializeElement
"text"INPUT
Form.serializeElements($('myform').getInputs('text'))//->
serializeElements
![Page 227: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/227.jpg)
activate, clear, disable, enable, focus, getValue, present, select, serialize,
setValue
/
Prototype Form.Element Field “PrototypeDOM”
INPUTSELECT TEXTAREA Form.Element
Form.Element.activate('myfield')Field.activate('myfield')$('myfield').activate()
Form.Element
activateactivate(element)->HTMLElement
clearclear(element)->HTMLElement
disabledisable(element)->HTMLElement
enableenable(element)->HTMLElement
Form.Element
![Page 228: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/228.jpg)
focusfocus(element)->HTMLElement
getValuegetValue(element)->string|array
$F()
presentpresent(element)->boolean
true false
selectselect(element)->HTMLElement
serializeserialize(element)->string
name=valueURL
setValuesetValue(element,value)->HTMLElement
value
![Page 229: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/229.jpg)
activate(element)->HTMLElement
Form.Element.focus('myelement').select()//select$('myelement').activate()
;)
Form.Element.focus(element) element element
select
Prototype 35623567 Element.relativize35643569
$(element).focus();
element=$(element); element.focus();
Prototype1.6.0.3
activate
![Page 230: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/230.jpg)
clear(element)->HTMLElement
$('some_field').onfocus=function(){ // if(this._cleared) return //"this" this.clear() this._cleared=true}
clear
![Page 231: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/231.jpg)
disable(element)->HTMLElement
disable true
Form.disable()
JavaScript
disable
![Page 232: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/232.jpg)
enable(element)->HTMLElement
Form.disable()
enable
![Page 233: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/233.jpg)
focus(element)->HTMLElement
$('inputElement').focus()JavaScript
Form.Element.select()
Form.Element.focus('searchbox')////focus():$('searchbox').focus()
Prototype1.6.0.3Form.Element focus select
element element
Prototype 35623567 Element.relativize35643569
$(element).focus();
element=$(element); element.focus();
Prototype1.6.0.3
focus
![Page 234: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/234.jpg)
getValue(element)->string|array
$F()
nameDOM ID JavaScript
ID"contact""company"
varform=$('contact');varinput=form['company'];Form.Element.getValue(input);//$(input).getValue();//$()//$F(input);
elementID"elementhasnoproperties"
getValue
![Page 235: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/235.jpg)
present(element)->boolean
true false
UserDetails
Pleasefilloutthefollowingfields:
submit
JavaScript
$('example').onsubmit=function(){ varvalid,msg=$('msg') // valid=$(this.username).present()&&$(this.email).present() if(valid){ //true //returntrue msg.update('Passedvalidation!').style.color='green' } else{ msg.update('Pleasefilloutallthefields.').style.color='red' } returnfalse}
present
Username
EmailAddress
![Page 236: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/236.jpg)
select(element)->HTMLElement
$('inputElement').select()JavaScript
Form.Element.focus()
$('searchbox').onfocus=function(){ Form.Element.select(this) // this.select()}
+ activate! activate——JavaScript
Prototype1.6.0.3Form.Element focus select
element element
Prototype 35623567 Element.relativize35643569
$(element).focus();
element=$(element); element.focus();
Prototype1.6.0.3
select
![Page 237: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/237.jpg)
serialize(element)->string
name=valueURL
Ajax——
Ajax getValue()
serialize
![Page 238: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/238.jpg)
argumentNames, bind, bindAsEventListener, curry, defer, delay,methodize,
wrap
Prototypebinding
“” this
JavaScript this bind()
PrototypePrototype thisPrototype
Prototype Function String.prototype.charAt.curry(0)
charAt
argumentNamessomeFunction.argumentNames()->Array
bindbind(thisObj[,arg...])->Function
thisObj this thisObj arg args
bindAsEventListenerbindAsEventListener(thisObj[,arg...])->Function
bind
Function
1.6
![Page 239: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/239.jpg)
currycurry(arg...)->Function
arg
deferdefer(arg...)->Number
JavaScript
delaydelay(seconds[,arg...])->Number
seconds arg
methodizesomeFunction.methodize()->Function
this
wrapwrap(wrapperFunction[,arg...])->Function
wrapperFunction wrapperFunction
1.6.0
1.6.0
1.6.0
1.6.0
![Page 240: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/240.jpg)
someFunction.argumentNames()->Array
varfn=function(foo,bar){ returnfoo+bar;};fn.argumentNames();//->['foo','bar']Prototype.emptyFunction.argumentNames();//->[]
argumentNames 1.6
![Page 241: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/241.jpg)
bind(thisObj[,arg...])->Function
thisObj this thisObj arg args
Function JavaScript
JavaScript“[scope]” ——
window.name="thewindowobject";functionscopeTest(){ returnthis.name}//scopeTest()//->"thewindowobject"varfoo={ name:"thefooobject!", otherScopeTest:function(){ returnthis.name }}foo.otherScopeTest()//->"thefooobject!"
otherScoptTest()
//...//window.test=foo.otherScopeTest//test()//->"thewindowobject"
Prototype
bind
![Page 242: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/242.jpg)
varobj={ name:'Anicedemo', fx:function(){ alert(this.name); }};
window.name='Iamsuchabeautifulwindow!';functionrunFx(f){ f();}varfx2=obj.fx.bind(obj);runFx(obj.fx);runFx(fx2);
Tryitout!
bind
varobj={ name:'Anicedemo', fx:function(){ alert(this.name+'\n'+$A(arguments).join(',')); }};
varfx2=obj.fx.bind(obj,1,2,3);fx2(4,5);//name"1,2,3,4,5"
Tryitout!
OK JavaScript
![Page 243: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/243.jpg)
bindAsEventListener(thisObj[,arg...])->Function
bind
“” Function bind()
DOMLevel0MSIE
Event.observe
varobj={name:'Anicedemo'};functionhandler(e){ vartag=Event.element(e).tagName.toLowerCase(); vardata=$A(arguments); data.shift(); alert(this.name+'\nClickona'+tag+'\nOtherargs:'+data.join(','));}
Event.observe(window,'load',function(){ Event.observe(document.body,'click',handler.bindAsEventListener(obj,1,2,3)); //obj.name"1,2,3"})
bindAsEventListener
![Page 244: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/244.jpg)
curry(arg...)->Function
arg
Function#curry Function#bind
String.prototype.splitOnSpaces=String.prototype.split.curry("");"foobarbazthud".splitOnSpaces();//->["foo","bar","baz","thud"]
curry 1.6.0
![Page 245: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/245.jpg)
defer(arg...)->Number
JavaScript
delay seconds0.01JavaScriptGoogle
ChromeV8 delay window.setTimeout
setTimeout setTimeout“”
“”JavaScript
0window.setTimeoutID window.clearTimeout
functionhideNewElement(){ $('inserted').hide();};functioninsertThenHide(markup){ $('container').insert(markup); //IEDOM hideNewElement.defer();}insertThenHide("<divid='inserted'>Loremipsum</div>");
defer 1.6.0
![Page 246: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/246.jpg)
delay(seconds[,arg...])->Number
seconds arg
window.setTimeoutID
JavaScript Function#defer
//window.setTimeout(function(){ Element.addClassName('foo','bar');},1000);
//Element.addClassName.delay(1,'foo','bar');//varid=Element.hide.delay(5,'foo');window.clearTimeout(id);
delay 1.6.0
![Page 247: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/247.jpg)
someFunction.methodize()->Function
this
methodize thisprototype
//varfn=function(target,foo){ target.value=foo;};varobject={};
//fn(object,'bar');object.value//->'bar'
//fnobject.fnMethodized=fn.methodize();object.fnMethodized('boom!');object.value//->'boom!'
prototype
Element.Methods Event.Methods prototypeDOM
Event.observe('inputId','click',handler)
$('inputId').observe('click',handler)
varinput=document.getElementById('inputId');input.observe=Event.observe.methodize();input.observe('click',handler);
methodize
![Page 248: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/248.jpg)
wrap(wrapperFunction[,arg...])->Function
wrapperFunction wrapperFunction
Function#wrap
String.prototype.capitalize=String.prototype.capitalize.wrap( function(proceed,eachWord){ if(eachWord&&this.include("")){ // returnthis.split("").invoke("capitalize").join(""); } else{ // returnproceed(); } });
"helloworld".capitalize()//"Helloworld""helloworld".capitalize(true)//"HelloWorld"
wrap 1.6.0
![Page 249: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/249.jpg)
clone, each, get, inspect, keys,merge, remove, set, toJSON, toObject,
toQueryString, unset, update, values
Hash JavaScript
“/” hashhash
hash Hash newJavaScript newHash(obj)
JavaScriptHash $H$H
hash
Prototype1.6
-HashHash Hash
Hash“/” Hash
Hash#set(key,value) Hash#unset(key)“/”
varmyhash=newHash();//API-->APImyhash.name="Bob"; --> myhash.set('name','Bob');myhash.name; --> myhash.get('name');deletemyhash.name; --> myhash.unset('name');
HashAPI
$H(object) newHash(object) Hash
Hash#merge Hash
Hash#update Hash#merge
Hash#cloneHash
Hash
![Page 250: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/250.jpg)
Hash#toObjectHash
Prototype“/”Hash.toQueryString Object.toQueryString
Hash.toQueryStringPrototype
Hash#remove Hash#unset
Hash.toJSON Object.toJSON Hash#toJSON
Prototype<1.6hash $H
Enumerable Hash“”
varh=newHash({...});h['each']='myownstuff';h.map();//->'each'
Enumerable each——hash
cloneclone()->newHash
hash
eacheach(iterator)->Hash
hash“/”
getget(key)->value
hash
1.6
1.6
![Page 251: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/251.jpg)
inspectinspect()->String
hash
keyskeys()->[String...]
hash
mergemerge(object)->newHash
objecthash v1.6.0 hash v1.6.0
removeremove(key)->valueremove(key1,key2...)->Array
hash v1.6.0
setset(key,value)->value
hash key valuevalue
toJSONtoJSON()->String
JSON
toObjecttoObject()->Object
hash Object Hash Object“/”
1.6
1.6
1.5.1
1.6
![Page 252: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/252.jpg)
toQueryStringtoQueryString()->String
hashURL
unsetunset(key)->value
hash
updateupdate(object)->Hash
object“/”hashhash
valuesvalues()->Array
hash
1.6
1.6
1.6
![Page 253: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/253.jpg)
clone()->newHash
hash
varh=newHash({a:'apple'});varclone=h.clone();h.unset('a');h.inspect();//->#<Hash:{}>clone.inspect();//->#<Hash:{'a':'apple'}>
clone 1.6
![Page 254: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/254.jpg)
each(iterator)->Hash
hash“/”
Enumerable each iterator
“/” iterator
1. key“” String
2. value“” undefined)
for...in
Hash Enumerablehash
varh=$H({version:1.5,author:'SamStephenson'});h.each(function(pair){ alert(pair.key+'="'+pair.value+'"');});
////-->'version="1.5"''author="SamStephenson"'
each
![Page 255: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/255.jpg)
get(key)->value
hash
varh=newHash({a:'apple',b:'banana',c:'coconut'});h.get('a');//->'apple'h.get('d');//->undefined
get 1.6
![Page 256: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/256.jpg)
inspect()->String
hash
inspect Object.inspect
$H({name:'Prototype',version:1.5}).inspect()//->"<#Hash:{name:'Prototype',version:1.5}>"
Hash“/”JavaScript“/” ——
inspect
![Page 257: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/257.jpg)
keys()->[String...]
hash
for...in
$H({name:'Prototype',version:1.5}).keys().sort()//->['name','version']$H().keys()//->[]
keys
![Page 258: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/258.jpg)
merge(object)->newHash
objecthash v1.6.0 hash v1.6.0
“”hash object “”
object Hash Object
1.6.0 Hash#mergehash
varh=$H({name:'Prototype',version:1.5});h.merge({version:1.6,author:'Sam'}).inspect();//->#<Hash:{'name':'Prototype','version':1.6,'author':'Sam'}>h.inspect();//->#<Hash:{'name':'Prototype','version':1.5}>
1.6.0 Hash#mergehash
varh=$H({name:'Prototype',version:1.5});h.merge({version:1.6,author:'Sam'}).inspect();//->#<Hash:{'name':'Prototype','version':1.6,'author':'Sam'}>h.inspect();//->#<Hash:{'name':'Prototype','version':1.6,'author':'Sam'}>
1.6.0 Hash#update
merge 1.6modified
![Page 259: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/259.jpg)
remove(key)->value
remove(key1,key2...)->Array
hash v1.6.0
Prototype1.6.0 Hash#unset()Hash
['foo','bar'].each(function(key){ hash.unset(key);});
varh=newHash({a:'apple',b:'banana',c:'coconut'})h.remove('a','c')//->['apple','coconut']h.values()//->['banana']
remove
![Page 260: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/260.jpg)
set(key,value)->value
hash key valuevalue
varh=newHash({a:'apple',b:'banana',c:'coconut'});h.set('d','orange');//->'orange'h.inspect();//->#<Hash:{'a':'apple','b':'banana','c':'coconut','d':'orange'}>h.set('a','kiwi');//->'kiwi'h.inspect();//->#<Hash:{'a':'kiwi','b':'banana','c':'coconut','d':'orange'}>
set 1.6
![Page 261: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/261.jpg)
toJSON()->String
JSON
$H({name:'Violet',occupation:'character',age:25}).toJSON();//->'{"name":"Violet","occupation":"character","age":25}'
toJSON 1.5.1
![Page 262: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/262.jpg)
toObject()->Object
hash Object Hash Object“/”
varh=newHash({a:'apple',b:'banana',c:'coconut'});varobj=h.toObject();
Object.inspect(h);//->#<Hash:{'a':'kiwi','b':'banana','c':'coconut'}>Object.inspect(obj);//->[objectObject]obj.a='orange';h.get('a');//->'apple'
toObject 1.6
![Page 263: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/263.jpg)
toQueryString()->String
hashURL
Ajax
undefined“/”“/”
encodeURIComponentURI
$H({action:'ship',order_id:123,fees:['f1','f2'],'label':'ademo'}).toQueryString()//->'action=shipℴ_id=123&fees;=f1&fees;=f2&label;=a%20demo'//hash$H().toQueryString()//->''
varhash=newHash({a:'aa',b:null,c:undefined,d:'dd'});hash.toQueryString()//->'a=aa&b;=&c;&d;=dd'
Hash.toQueryString(obj)
Object.toQueryString
toQueryString 1.6
![Page 264: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/264.jpg)
unset(key)->value
hash
varh=newHash({a:'apple',b:'banana',c:'coconut'});h.unset('a');//->'apple'h.inspect();//->#<Hash:{'b':'banana','c':'coconut'}>h.unset('d');//->undefinedh.inspect();//->#<Hash:{'b':'banana','c':'coconut'}>
unset 1.6
![Page 265: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/265.jpg)
update(object)->Hash
object“/”hashhash
“”hash object “”
object Hash Object
varh=$H({name:'Prototype',version:1.5});h.update({version:1.6,author:'Sam'}).inspect();//->#<Hash:{'name':'Prototype','version':1.6,'author':'Sam'}>h.inspect();//->#<Hash:{'name':'Prototype','version':1.6,'author':'Sam'}>
Hash#merge
update 1.6
![Page 266: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/266.jpg)
values()->Array
hash
“” for...in——
undefined
$H({name:'Prototype',version:1.5}).values().sort()//->[1.5,'Prototype']$H().values()//->[]
values
![Page 267: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/267.jpg)
After,Before,Bottom, Top
Prototype1.6 Insertion Element#insert
InsertionHTML
HTML <script> Insertion
AfternewInsertion.After(element,html)
html element
BeforenewInsertion.Before(element,html)
html element
BottomnewInsertion.Bottom(element,html)
html element
TopnewInsertion.Top(element,html)
html element
Insertion
![Page 268: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/268.jpg)
newInsertion.After(element,html)
html element
Prototype1.6 Insertion Element#insert
HTML <script> Insertion.After
String#evalScripts
HTML<div> <pid="animal_vegetable_mineral"> Inshort,inallthingsvegetable,animal,andmineral... </p></div>
JavaScriptnewInsertion.After( 'animal_vegetable_mineral', "<p>Iamtheverymodelofamodernmajorgeneral.</p>");
HTML<div> <pid="animal_vegetable_mineral"> Inshort,inallthingsvegetable,animal,andmineral... </p> <p> Iamtheverymodelofamodernmajorgeneral. </p></div>
After
![Page 269: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/269.jpg)
newInsertion.Before(element,html)
html element
Prototype1.6 Insertion Element#insert
HTML <script> Insertion.Before
String#evalScripts
HTML<div> <pid="modern_major_general"> Iamtheverymodelofamodernmajorgeneral. </p></div>
JavaScriptnewInsertion.Before( 'modern_major_general', "<p>Inshort,inallthingsvegetable,animal,andmineral...</p>");
HTML<div> <p> Inshort,inallthingsvegetable,animal,andmineral... </p> <pid="modern_major_general"> Iamtheverymodelofamodernmajorgeneral. </p></div>
Before
![Page 270: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/270.jpg)
newInsertion.Bottom(element,html)
html element
Prototype1.6 Insertion Element#insert
HTML <script> Insertion.Bottom
String#evalScripts
HTML<divid="modern_major_general"> <p>Inshort,inallthingsvegetable,animal,andmineral...</p></div>
JavaScriptnewInsertion.Bottom( 'modern_major_general', "<p>Iamtheverymodelofamodernmajorgeneral.</p>");
HTML<divid="modern_major_general"> <p>Inshort,inallthingsvegetable,animal,andmineral...</p> <p>Iamtheverymodelofamodernmajorgeneral.</p></div>
Bottom
![Page 271: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/271.jpg)
newInsertion.Top(element,html)
html element
Prototype1.6 Insertion Element#insert
HTML <script> Insertion.Top
String#evalScripts
HTML<divid="modern_major_general"> <p>Iamtheverymodelofamodernmajorgeneral.</p></div>
JavaScriptnewInsertion.Top( 'modern_major_general', "<p>Inshort,inallthingsvegetable,animal,andmineral...</p>");
HTML<divid="modern_major_general"> <p>Inshort,inallthingsvegetable,animal,andmineral...</p> <p>Iamtheverymodelofamodernmajorgeneral.</p></div>
Top
![Page 272: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/272.jpg)
abs, ceil, floor, round, succ, times, toColorPart, toJSON, toPaddedString
PrototypeJavaScript Number
Number#succ ObjectRange Number#timesRuby Number#toColorPart Number#toPaddedString
$R(1,10).each(function(index){ //11010});
(5).times(function(index){ //055 //5JavaScript //Number //5.toString()(5).toString()});
(128).toColorPart()//->'80'(10).toColorPart()//->'0a''#'+[128,10,16].invoke('toColorPart').join('')//->'#800a10'
absabs()->Number
Number
ceilceil()->Number
Number
Number
1.6.0
1.6.0
![Page 273: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/273.jpg)
floorfloor()->Number
Number
roundround()->Number
Number
succsucc()->Number
Number ObjectRange
timestimes(iterator)->Number
Ruby[0...n]
toColorParttoColorPart()->String
Number Number[0...255]CSS
toJSONtoJSON()->String
JSON
toPaddedStringtoPaddedString(length[,radix])->String
Number length 0 radixradix3710
1.6.0
1.6.0
1.5.1
1.5.1
![Page 274: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/274.jpg)
abs()->Number
Number
Math.abs
Math.abs(-5)//->5(-5).abs()//->5(5).abs()//->5
abs 1.6.0
![Page 275: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/275.jpg)
ceil()->Number
Number
Math.ceil
Math.ceil(4.1)//->5(4.1).ceil()//->5(-4.1).ceil()//->-4
ceil 1.6.0
![Page 276: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/276.jpg)
floor()->Number
Number
Math.floor
Math.floor(4.6)//->4(4.6).floor()//->4(-4.1).floor()//->-5
floor 1.6.0
![Page 277: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/277.jpg)
round()->Number
Number
Math.round
Math.round(4.5)//->5(4.5).round()//->5(4.49).round()//->4(-4.5).round()//->-4
round 1.6.0
![Page 278: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/278.jpg)
succ()->Number
Number ObjectRange
(5).succ()//->6$A($R(1,5)).join('')//->'12345'
succ
![Page 279: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/279.jpg)
times(iterator)->Number
Ruby[0...n]
iterator0 Number
vars='';(5).times(function(n){s+=n;});s//->'01234'
times
![Page 280: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/280.jpg)
toColorPart()->String
Number Number[0...255]CSS
128.toColorPart()//->'70'10.toColorPart()//->'0a''#'+[128,10,16].invoke('toColorPart').join('')//->'#800a10'
toColorPart
![Page 281: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/281.jpg)
toJSON()->String
JSON
(45).toJSON();//->'45'
toJSON 1.5.1
![Page 282: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/282.jpg)
toPaddedString(length[,radix])->String
Number length 0 radixradix3710
(13).toPaddedString(4);//->'0013'(13).toPaddedString(2);//->'13'(13).toPaddedString(1);//->'13'(13).toPaddedString(4,16)//->'000d'(13).toPaddedString(4,2);//->'1101'
toPaddedString 1.5.1
![Page 283: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/283.jpg)
include
Range
Range“”“” “”
Prototype Number String succ
ObjectRange Enumerable
ObjectRange $R
$A($R(1,5)).join(',')//->'1,2,3,4,5'$R(1,5).zip( ['one','two','three','four','five'], function(tuple){ returntuple.join('='); })//->['1=one','2=two','3=three','4=four','5=five']
String String succ
$A($R('a','e'))//->['a','b','c','d','e']$A($R('ax','ba'))//->['ax','ay','az','a{','a|','a}','a~'...]
includeinclude(value)->Boolean
ObjectRange
![Page 284: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/284.jpg)
include(value)->Boolean
<
value ObjectRange
value ObjectRange
ObjectRange include
varSequence=Class.create({ initialize:function(original){ this.original=original; }, //succ succ:function(){ // returnnewSequence(this.original+2); }, //toStringinclude //$R(newSequence(1),newSequence(10)) toString:function(){ returnthis.original; }}); varresult=[];varrange=$R(newSequence(1),newSequence(10));range.each(function(s){ result.push(s.toString());});result.join('');//->'13579'
range.include(newSequence(4));//->true
include
include
![Page 285: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/285.jpg)
$R(1,10).include(5)//->true$R('a','h').include('x')//->false$R(1,10).include(10)//->true$R(1,10,true).include(10)//->false
![Page 286: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/286.jpg)
clone, extend, inspect, isArray, isElement, isFunction, isHash, isNumber,
isString, isUndefined, keys, toHTML, toJSON, toQueryString, values
Prototype Object
Prototype
Prototypehash
cloneObject.clone(obj)->Object
extendObject.extend(dest,src)->alteredDest
src destprototype Prototype
inspectObject.inspect(obj)->String
obj
isArrayisArray(obj)->Boolean
obj true false
isElementisElement(obj)->Boolean
Object
1.6
1.6
![Page 287: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/287.jpg)
objDOM1 true false
isFunctionisFunction(obj)->Boolean
obj Function true false
isHashisHash(obj)->Boolean
obj Hash true false
isNumberisNumber(obj)->Boolean
obj Number true false
isStringisString(obj)->Boolean
obj String true false
isUndefinedisUndefined(obj)->Boolean
obj undefined true false
keysObject.keys(obj)->[String...]
obj Hash
toHTMLtoHTML(obj)->String
obj toHTML obj toHTML obj String.interpret
1.6
1.6
1.6
1.6
1.6
1.6
![Page 288: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/288.jpg)
toJSONtoJSON(obj)->String
JSON
toQueryStringtoQueryString(obj)->String
URL
valuesObject.values(obj)->Array
obj Hash
1.5.1
1.6
![Page 289: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/289.jpg)
Object.clone(obj)->Object
varo={name:'Prototype',version:1.5,authors:['sam','contributors']};varo2=Object.clone(o);o2.version='1.5weird';o2.authors.pop();
o.version//->1.5o2.version//->'1.5weird'o.authors//->['sam']//
clone
![Page 290: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/290.jpg)
Object.extend(dest,src)->alteredDest
src destprototype Prototype
PrototypeOOPPrototype
Class.create
Element.extend PrototypeDOM
extend
![Page 291: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/291.jpg)
Object.inspect(obj)->String
obj
undefined null
inspect toString
Prototype inspect——
Object.inspect()//->'undefined'Object.inspect(null)//->'null'Object.inspect(false)//->'false'Object.inspect([1,2,3])//->'[1,2,3]'Object.inspect('hello')//->"'hello'"
inspect
![Page 292: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/292.jpg)
isArray(obj)->Boolean
obj true false
Object.isArray([]);//->trueObject.isArray($w());//->trueObject.isArray({});//->false
isArray 1.6
![Page 293: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/293.jpg)
isElement(obj)->Boolean
objDOM1 true false
Object.isElement(newElement('div'));//->trueObject.isElement(document.createElement('div'));//->trueObject.isElement($('id_of_an_exiting_element'));//->trueObject.isElement(document.createTextNode('foo'));//->false
isElement 1.6
![Page 294: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/294.jpg)
isFunction(obj)->Boolean
obj Function true false
Object.isFunction($);//->trueObject.isFunction(123);//->false
isFunction 1.6
![Page 295: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/295.jpg)
isHash(obj)->Boolean
obj Hash true false
Object.isHash(newHash({}));//->trueObject.isHash($H({}));//->trueObject.isHash({});//->false
isHash 1.6
![Page 296: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/296.jpg)
isNumber(obj)->Boolean
obj Number true false
Object.isNumber(0);//->trueObject.isNumber(1.2);//->trueObject.isNumber("foo");//->false
isNumber 1.6
![Page 297: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/297.jpg)
isString(obj)->Boolean
obj String true false
Object.isString("foo");//->trueObject.isString("");//->trueObject.isString(123);//->false
isString 1.6
![Page 298: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/298.jpg)
isUndefined(obj)->Boolean
obj undefined true false
Object.isUndefined();//->trueObject.isUndefined(undefined);//->trueObject.isUndefined(null);//->falseObject.isUndefined(0);//->falseObject.isUndefined("");//->false
isUndefined 1.6
![Page 299: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/299.jpg)
Object.keys(obj)->[String...]
obj Hash
for...in
Object.keys()//->[]Object.keys({name:'Prototype',version:1.5}).sort()//->['name','version']
keys
![Page 300: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/300.jpg)
toHTML(obj)->String
obj toHTML obj toHTML obj String.interpret
varBookmark=Class.create({ initialize:function(name,url){ this.name=name; this.url=url; }, toHTML:function(){ return'<ahref="#{url}">#{name}</a>'.interpolate(this); }});
varapi=newBookmark('PrototypeAPI','http://prototypejs.org/api');Object.toHTML(api);//->'<ahref="http://prototypejs.org/api">PrototypeAPI</a>'
Object.toHTML("Helloworld!");//->"Helloworld!"Object.toHTML();//->""
Object.toHTML(null);//->""
Object.toHTML(undefined);//->""
Object.toHTML(true);//->"true"
Object.toHTML(false);//->"false"
Object.toHTML(123);//->"123"
toHTML 1.6
![Page 301: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/301.jpg)
toJSON(obj)->String
JSON
PrototypeJSON
Examplevardata={name:'Violet',occupation:'character',age:25,pets:['frog','rabbit']};Object.toJSON(data);//->'{"name":"Violet","occupation":"character","age":25,"pets":["frog","rabbit"]}'
toJSON 1.5.1
![Page 302: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/302.jpg)
toQueryString(obj)->String
URL
Ajax
undefined“/”“/”
encodeURIComponentURI
Object.toQueryString({ action:'ship', order_id:123, fees:['f1','f2'], 'label':'ademo'})//->'action=shipℴ_id=123&fees;=f1&fees;=f2&label;=a%20demo'
toQueryString 1.6
![Page 303: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/303.jpg)
Object.values(obj)->Array
obj Hash
for...in
Object.values()//->[]Object.values({name:'Prototype',version:1.5}).sort()//->[1.5,'Prototype']
values
![Page 304: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/304.jpg)
stop
Window
PeriodicalExecuter
PeriodicalExecuterPeriodicalExecuter
newPeriodicalExecuter(pollChatRoom,3);newPeriodicalExecuter(function(pe){ if(!confirm('Wantmetoannoyyouagainlater?')) pe.stop();},5);//
setIntervalIE FireFox setInterval
varinterval=setInterval(function(){ if(!confirm('Wantmetoannoyyouagainlater?')) clearInterval(interval);},5000)
stopstop()
PeriodicalExecuter
PeriodicalExecuter
![Page 305: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/305.jpg)
stop()
PeriodicalExecuter
PeriodicalExecuter
PeriodicalExecuter registerCallback
registerCallback
PeriodicalExecuter.prototype.resume=function(){ if(!this.timer) this.registerCallback();};
varpe=newPeriodicalExecuter(function(){ alert('');},5);
//pe.stop();//pe.resume();
vargCallCount=0;newPeriodicalExecuter(function(pe){ if(++gCallCount>3) pe.stop(); else alert(gCallCount);},1);//1,2,3
stop
![Page 306: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/306.jpg)
absolutize, clone, cumulativeOffset, offsetParent, overlap, page,
positionedOffset, prepare, realOffset, relativize,within,
withinIncludingScrolloffsets
Prototype1.6 Position Element
PositionDOMUI
absolutizeabsolutize(element)
element.style.position='absolute'
cloneclone(source,target[,options])->[Number,Number]
source options/ target
cumulativeOffsetcumulativeOffset(element)->[Number,Number]
element
offsetParentoffsetParent(element)->HTMLElement
elementContainingBlock CSS position relative absolute body
overlap
Position
![Page 307: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/307.jpg)
overlap(mode,element)->Number
0 1 Position.within element element mode
pagepage(element)->[Number,Number]
element
positionedOffsetpositionedOffset(element)->[Number,Number]
elementContainingBlock CSS position relative absoluteelement Position.offsetParent(element)
prepareprepare()
Position.withinIncludingScrolloffsets
realOffsetrealOffset(element)->[Number,Number]
relativizerelativize(element)
element.style.position='relative'
withinwithin(element,x,y)->Boolean
x,y element Position.overlap
withinIncludingScrolloffsets
![Page 308: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/308.jpg)
withinIncludingScrolloffsets(element,x,y)->Boolean
x,y element element Position.within Position.preparewithinIncludingScrolloffsets-->Position.overlap
![Page 309: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/309.jpg)
absolutize(element)
element.style.position='absolute'
Element#absolutize
absolutize
![Page 310: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/310.jpg)
clone(source,target[,options])->[Number,Number]
source options/ target
Element#clonePosition
CSScontainingblock
setLeft true sourceCSS left target
setTop true sourceCSS top target
setWidth true sourceCSS width target
setHeight true sourceCSS height target
offsetLeft 0
targetCSS lefttargetCSS left source left
offsetLeft
offsetTop 0
targetCSS toptargetCSS top source top
offsetTop
optionshash target width height options
{setWidth:false,setWidth:false}
clone
![Page 311: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/311.jpg)
cumulativeOffset(element)->[Number,Number]
element
Element#cumulativeOffset
offsetLeft offsetTop
cumulativeOffset
![Page 312: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/312.jpg)
offsetParent(element)->HTMLElement
elementContainingBlock CSS position relative absolute body
Element#getOffsetParent
element CSScontainingblock
offsetParent
![Page 313: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/313.jpg)
overlap(mode,element)->Number
0 1 Position.within element element mode
horizontal
element x,y Position.within element
element x,yPosition.overlap
Position.within
varelement=$('some_positioned_element');Position.cumulativeOffset(element);//->[100,100]100pxelement.getDimensions();//->{width:150,height:150}
Position.within(element,175,145);//->truePosition.overlap('horizontal',element);//->0.5Position.overlap('vertical',element);//->0.33/10
overlap
![Page 314: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/314.jpg)
page(element)->[Number,Number]
element
Element#viewportOffset
page
![Page 315: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/315.jpg)
positionedOffset(element)->[Number,Number]
elementContainingBlock CSS position relative absoluteelement Position.offsetParent(element)
Element#positionedOffset
offsetLeft offsetTopCSS
position
positionedOffset
![Page 316: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/316.jpg)
prepare()
Position.withinIncludingScrolloffsets
prepare
![Page 317: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/317.jpg)
realOffset(element)->[Number,Number]
Element#cumulativeScrollOffset
scrollLeft scrollTop
realOffset
![Page 318: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/318.jpg)
relativize(element)
element.style.position='relative'
Element#relativize
relativize
![Page 319: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/319.jpg)
within(element,x,y)->Boolean
x,y element Position.overlap
Position.cumulativeOffset element element
(x,y) element true
varelement=$('some_positioned_element');Position.cumulativeOffset(element);//->[100,100]100pxElement.getDimensions(element);//->{width:150,height:150}
Position.within(element,200,200);//->truePosition.within(element,260,260);//->false
within
![Page 320: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/320.jpg)
withinIncludingScrolloffsets(element,x,y)->Boolean
x,y element element Position.within Position.prepare-->withinIncludingScrolloffsets-->Position.overlap
Position.within elementScript.aculo.us
Position.prepare Position.prepare
withinIncludingScrolloffsets
![Page 321: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/321.jpg)
K, emptyFunction
PrototypePrototype
“” Prototype
Prototype Prototype.VersionPrototype
script.aculo.us Prototype
PrototypePrototype
DOMLevel3XPath Prototype.BrowserFeatures.XPath
boolean
Prototype EnumerablePrototype.K
KK(argument)->argument
KPrototype
emptyFunctionemptyFunction([argument...])
Prototype
![Page 322: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/322.jpg)
emptyFunction
![Page 323: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/323.jpg)
emptyFunction([argument...])
emptyFunction
emptyFunction
![Page 324: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/324.jpg)
K(argument)->argument
KPrototype
Enumerable
Prototype.K('helloworld!');//->'helloworld!'Prototype.K(1.5);//->1.5Prototype.K(Prototype.K);//->Prototype.K
K
![Page 325: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/325.jpg)
blank, camelize, capitalize, dasherize, empty, endsWith, escapeHTML, evalJSON,
evalScripts, extractScripts, gsub, include, inspect, interpolate, isJSON,
parseQuery, scan, startsWith, strip, stripScripts, stripTags, sub, succ, times,
toArray, toJSON, toQueryParams, truncate, underscore, unescapeHTML,
unfilterJSON
Prototype String.prototype String
String#strip replace String#sub String#gsub
String#toQueryParams
blankblank()->Boolean
camelizecamelize()->string
Camel 'foo-bar' 'fooBar'
capitalizecapitalize()->string
dasherizedasherize()->string
"_" "-"
empty
String
1.5.1
1.5.1
![Page 326: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/326.jpg)
empty()->Boolean
endsWithendsWith(substring)->Boolean
substring
escapeHTMLescapeHTML()->string
HTML
evalJSONevalJSON([sanitize=false])->object
JSON sanitize true
evalScriptsevalScripts()->[returnedValue...]
script script
extractScriptsextractScripts()->[script...]
script
gsubgsub(pattern,replacement)->string
pattern replacement replacement Template pattern
includeinclude(substring)->Boolean
1.5.1
1.5.1
1.5.1
![Page 327: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/327.jpg)
substring
inspectinspect([useDoubleQuotes=false])->String
'\'
interpolateinterpolate(object[,pattern])->string
object
isJSONisJSON()->boolean
JSON
parseQuerytoQueryParams
scanscan(pattern,iterator)->string
pattern
startsWithstartsWith(substring)->Boolean
substring
stripstrip()->string
stripScriptsstripScripts()->string
1.6
1.5.1.1
1.5.1
![Page 328: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/328.jpg)
HTML script
stripTagsstripTags()->string
HTML
subsub(pattern,replacement[,count=1])->string
count pattern replacement replacement Template pattern
succsucc()->string
ObjectRangeUnicode
timestimes(count)->string
count
toArraytoArray()->[character...]
toJSONtoJSON()->String
JSON
toQueryParamstoQueryParams([separator='&'])->Object
URI“/”
1.5.1
1.5.1
![Page 329: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/329.jpg)
truncatetruncate([length=30[,suffix='...']])->string
underscoreunderscore()->string
Camel "_"
unescapeHTMLunescapeHTML()->string
HTML
unfilterJSONunfilterJSON([filter=Prototype.JSONFilter])->String
AjaxJSONJavaScript
1..5.1
![Page 330: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/330.jpg)
blank()->Boolean
''.blank();//->true''.blank();//->true'a'.blank();//->false
blank 1.5.1
![Page 331: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/331.jpg)
camelize()->string
Camel 'foo-bar' 'fooBar'
PrototypeCSSDOM style
'background-color'.camelize();//->'backgroundColor''-moz-binding'.camelize();//->'MozBinding'
camelize
![Page 332: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/332.jpg)
capitalize()->string
'hello'.capitalize();//->'Hello''HELLOWORLD!'.capitalize();//->'Helloworld!'
capitalize
![Page 333: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/333.jpg)
dasherize()->string
"_" "-"
'border_bottom_width'.dasherize();//->'border-bottom-width'
DOM styleCSS String#underscore
'borderBottomWidth'.underscore().dasherize();//->'border-bottom-width'
dasherize
![Page 334: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/334.jpg)
empty()->Boolean
''.empty();//->true''.empty();//->false
empty 1.5.1
![Page 335: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/335.jpg)
endsWith(substring)->Boolean
substring
'slaughter'.endsWith('laughter')//->true
endsWith 1.5.1
![Page 336: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/336.jpg)
escapeHTML()->string
HTML
'<divclass="article">Thisisanarticle</div>'.escapeHTML();//->"<divclass="article">Thisisanarticle</div>"
escapeHTML
![Page 337: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/337.jpg)
evalJSON([sanitize=false])->object
JSON sanitize true
JSON SyntaxError
varperson='{"name":"Violet","occupation":"character"}'.evalJSON();person.name;//->"Violet"
person='grabUserPassword()'.evalJSON(true);//->SyntaxError:BadlyformedJSONstring:'grabUserPassword()'
person='/*-secure-\n{"name":"Violet","occupation":"character"}\n*/'.evalJSON()person.name;//->"Violet"
sanitize trueXSS
String#evalJSON String#unfilterJSON
Prototype.JSONFilter
evalJSON 1.5.1
![Page 338: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/338.jpg)
evalScripts()->[returnedValue...]
script script
'lorem...<script>2+2</script>'.evalScripts();//->[4]'<script>2+2</script><script>alert("helloworld!")</script>'.evalScripts();//->[4,undefined]'helloworld!'
evalScripts
![Page 339: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/339.jpg)
extractScripts()->[script...]
script
String#evalScripts
'lorem...<script>2+2</script>'.extractScripts();//->['2+2']'<script>2+2</script><script>alert("helloworld!")</script>'.extractScripts();//->['2+2','alert("helloworld!")']
varmyScripts='<script>2+2</script><script>alert("helloworld!")</script>'.extractScripts();//->['2+2','alert("helloworld!")']
varmyReturnedValues=myScripts.map(function(script){ returneval(script);});//->[4,undefined]'helloworld!'
extractScripts
![Page 340: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/340.jpg)
gsub(pattern,replacement)->string
pattern replacement replacement Template pattern
replacement String#gsubJavaScript replace()
varmouseEvents='clickdblclickmousedownmouseupmouseovermousemovemouseout';mouseEvents.gsub('',',');//->'click,dblclick,mousedown,mouseup,mouseover,mousemove,mouseout'mouseEvents.gsub(/\s+/,',');//->'click,dblclick,mousedown,mouseup,mouseover,mousemove,mouseout'
replacement
mouseEvents.gsub(/\w+/,function(match){ return'on'+match[0].capitalize()});//->'onClickonDblclickonMousedownonMouseuponMouseoveronMousemoveonMouseout'
varmarkdown='![apear](/img/pear.jpg)![anorange](/img/orange.jpg)';markdown.gsub(/!\[(.*?)\]\((.*?)\)/,function(match){ return'<imgalt="'+match[1]+'"src="'+match[2]+'"/>';});//->'<imgalt="apear"src="/img/pear.jpg"/><imgalt="anorange"src="/img/orange.jpg"/>'
TemplateRuby match()
markdown.gsub(/!\[(.*?)\]\((.*?)\)/,'<imgalt="#{1}"src="#{2}"/>');//->'<imgalt="apear"src="/img/pear.jpg"/><imgalt="anorange"src="/img/orange.jpg"/>'
String#gsub String#sub
gsub
![Page 341: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/341.jpg)
"g"
![Page 342: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/342.jpg)
include(substring)->Boolean
substring
'Prototypeframework'.include('frame');//->true'Prototypeframework'.include('frameset');//->false
include 1.5.1
![Page 343: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/343.jpg)
inspect([useDoubleQuotes=false])->String
'\'
inspect Object.inspect
'I\'msohappy.'.inspect();//->'\'I\\\'msohappy.\'''I\'msohappy.''I\'msohappy.'.inspect(true);//->'"I'msohappy."'"I'msohappy."
inspect
![Page 344: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/344.jpg)
interpolate(object[,pattern])->string
object
Template evaluate
"#{animals}ona#{transport}".interpolate({animals:"Pigs",transport:"Surfboard"});//->"PigsonaSurfboard"
varsyntax=/(^|.|\r|\n)(\<%=\s*(\w+)\s*%\>)/;//'<%=field%>'varhtml='<div>Name:<b><%=name%></b>,Age:<b><%=age%></b></div>';html.interpolate({name:'JohnSmith',age:26},syntax);//-><div>Name:<b>JohnSmith</b>,Age:<b>26</b></div>
interpolate 1.6
![Page 345: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/345.jpg)
isJSON()->boolean
JSON
"something".isJSON()//->false"\"something\"".isJSON()//->true"{foo:42}".isJSON()//->false"{\"foo\":42}".isJSON()//->true
isJSON 1.5.1.1
![Page 346: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/346.jpg)
toQueryParams
parseQuery
![Page 347: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/347.jpg)
scan(pattern,iterator)->string
pattern
pattern iterator String#gsub
'apple,pear&orange'.scan(/\w+/,alert);//->'applepearorange''apple''pear''orange'
varfruits=[];'apple,pear&orange'.scan(/\w+/,function(match){ fruits.push(match[0])});fruits.inspect()//->['apple','pear','orange']
DOM
'failure-message,success-message&spinner'.scan(/(\w|-)+/,Element.toggle)//->'failure-message,success-message&spinner'
"g"
scan
![Page 348: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/348.jpg)
startsWith(substring)->Boolean
substring
'PrototypeJavaScript'.startsWith('Pro');//->true
startsWith 1.5.1
![Page 349: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/349.jpg)
strip()->string
'helloworld!'.strip();//->'helloworld!'
strip
![Page 350: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/350.jpg)
stripScripts()->string
HTML script
'a<ahref="#">link</a><script>alert("helloworld!")</script>'.stripScripts();//->'a<ahref="#">link</a>'
stripScripts
![Page 351: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/351.jpg)
stripTags()->string
HTML
<script> String#stripTags
String#stripScripts
'a<ahref="#">link</a>'.stripTags();//->'alink'
'a<ahref="#">link</a><script>alert("helloworld!")</script>'.stripTags();//->'alinkalert("helloworld!")'
'a<ahref="#">link</a><script>alert("helloworld!")</script>'.stripScripts().stripTags();//->'alink'
stripTags
![Page 352: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/352.jpg)
sub(pattern,replacement[,count=1])->string
count pattern replacement replacement Template pattern
String#gsub String#sub 1
String#sub String#gsub String#gsub
varfruits='applepearorange'; fruits.sub('',',');//->'apple,pearorange'fruits.sub('',',',1);//->'apple,pearorange'fruits.sub('',',',2);//->'apple,pear,orange'
fruits.sub(/\w+/,function(match){ returnmatch[0].capitalize()+','},2);//->'Apple,Pear,orange'
varmarkdown='![apear](/img/pear.jpg)![anorange](/img/orange.jpg)';
markdown.sub(/!\[(.*?)\]\((.*?)\)/,function(match){ return'<imgalt="'+match[1]+'"src="'+match[2]+'"/>';});//->'<imgalt="apear"src="/img/pear.jpg"/>![anorange](/img/orange.jpg)'
markdown.sub(/!\[(.*?)\]\((.*?)\)/,'<imgalt="#{1}"src="#{2}"/>');//->'<imgalt="apear"src="/img/pear.jpg"/>![anorange](/img/orange.jpg)'
"g"
sub
![Page 353: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/353.jpg)
succ()->string
ObjectRangeUnicode
'a'.succ();//->'b''aaaa'.succ();//->'aaab'
succ
![Page 354: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/354.jpg)
times(count)->string
count
"echo".times(3);//->"echoechoecho"
times 1.5.1
![Page 355: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/355.jpg)
toArray()->[character...]
'a'.toArray();//->['a']'helloworld!'.toArray();//->['h','e','l','l','o','','w','o','r','l','d','!']
toArray
![Page 356: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/356.jpg)
toJSON()->String
JSON
'The"Quoted"chronicles'.toJSON();//->'"The\"Quoted\"chronicles"'
toJSON 1.5.1
![Page 357: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/357.jpg)
toQueryParams([separator='&'])->Object
URI“/”
separator "&"
"#"“/”
URL "#" http://xxx/News/Content.aspx?
id=100#firstJavaScript location.hashURL "#"
String#toQueryParams
undefined
'section=blog&id;=45'.toQueryParams();//->{section:'blog',id:'45'}
'section=blog;id=45'.toQueryParams();//->{section:'blog',id:'45'}
'http://www.example.com?section=blog&id;=45#comments'.toQueryParams();//->{section:'blog',id:'45'}
'section=blog&tag;=javascript&tag;=prototype&tag;=doc'.toQueryParams();//->{section:'blog',tag:['javascript','prototype','doc']}
'tag=ruby%20on%20rails'.toQueryParams();//->{tag:'rubyonrails'}
'id=45&raw;'.toQueryParams();//->{id:'45',raw:undefined}
toQueryParams
![Page 358: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/358.jpg)
truncate([length=30[,suffix='...']])->string
String#truncate
30 "..."
String#truncate
'Arandomsentencewhoselengthexceeds30characters.'.truncate();//->'Arandomsentencewhoselen...''Somerandomtext'.truncate();//->'Somerandomtext.''Somerandomtext'.truncate(10);//->'Somera...''Somerandomtext'.truncate(10,'[...]');//->'Some[...]'
'String'.truncate(6);//->'String'
truncate
![Page 359: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/359.jpg)
underscore()->string
Camel "_"
'borderBottomWidth'.underscore();//->'border_bottom_width'
DOM styleCSS String#dasherize
'borderBottomWidth'.underscore().dasherize();//->'border-bottom-width'
underscore
![Page 360: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/360.jpg)
unescapeHTML()->string
HTML
'x>10'.unescapeHTML()//->'x>10''<h1>Pride&Prejudice</h1>'.unescapeHTML()//->'Pride&Prejudice'
unescapeHTML
![Page 361: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/361.jpg)
unfilterJSON([filter=Prototype.JSONFilter])->String
AjaxJSONJavaScript
'/*-secure-\n{"name":"Violet","occupation":"character","age":25}\n*/'.unfilterJSON()//->'{"name":"Violet","occupation":"character","age":25}'
unfilterJSON 1..5.1
![Page 362: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/362.jpg)
evaluate
TemplateRuby #{fieldName}{fieldName}
//varmyTemplate=newTemplate('TheTVshow#{title}wascreatedby#{author}.');//varshow={title:'TheSimpsons',author:'MattGroening',network:'FOX'};//myTemplate.evaluate(show);//->TheTVshowTheSimpsonswascreatedbyMattGroening.
//varconversion1={from:'meters',to:'feet',factor:3.28};varconversion2={from:'kilojoules',to:'BTUs',factor:0.9478};varconversion3={from:'megabytes',to:'gigabytes',factor:1024};
//vartempl=newTemplate('Multiplyby#{factor}toconvertfrom#{from}to#{to}.');
//[conversion1,conversion2,conversion3].each(function(conv){ templ.evaluate(conv);});//->Multiplyby3.28toconvertfrommeterstofeet.//->Multiplyby0.9478toconvertfromkilojoulestoBTUs.//->Multiplyby1024toconvertfrommegabytestogigabytes.
Template
![Page 363: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/363.jpg)
//JavaScriptvart=newTemplate('in#{lang}wealsousethe\\#{variable}syntaxfortemplates.');vardata={lang:'Ruby',variable:'(notused)'};t.evaluate(data);//->inRubywealsousethe#{variable}syntaxfortemplates.
////"#""#anchor"vartemp=newTemplate('http://#{site}/#{page}?#{queryString}#anchor');temp.evaluate({site:'www.xxx.com',page:'test.htm',queryString:'sn=110'});//->'http://www.xxx.com/test.htm?sn=110#anchor'
Ruby
Template
varsyntax=/(^|.|\r|\n)(\<%=\s*(\w+)\s*%\>)/;//'<%=field%>'vart=newTemplate('<div>Name:<b><%=name%></b>,Age:<b><%=age%></b></div>',syntax);t.evaluate({name:'JohnSmith',age:26});//-><div>Name:<b>JohnSmith</b>,Age:<b>26</b></div>
evaluateevaluate(object)->String
object object
![Page 364: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/364.jpg)
evaluate(object)->String
object object
varhrefTemplate=newTemplate('/dir/showAll?lang=#{language}&categ=#{category}&lv=#{levels}');
varselection={category:'books',language:'en-US'};hrefTemplate.evaluate(selection);//->'/dir/showAll?lang=en-US&categ=books&lv='
hrefTemplate.evaluate({language:'jp',levels:3,created:'10/12/2005'});//->'/dir/showAll?lang=jp&categ=&lv=3'
hrefTemplate.evaluate({});//->'/dir/showAll?lang=&categ=&lv='
hrefTemplate.evaluate(null);//->
evaluate
![Page 365: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/365.jpg)
Form.Element.Observer, Form.Observer
TimedObserver
TimedObserver getValue()
Form.Element.Observer
TimedObserver
newForm.Element.Observer('myelement',0.2,//200 function(el,value){ alert('Theformcontrolhaschangedvalueto:'+value) })
TimedObserver0.2
Form.Element.ObservernewForm.Element.Observer(element,frequency,callback)
Form.ObservernewForm.Observer(element,frequency,callback)
name
TimedObserver
![Page 366: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/366.jpg)
newForm.Element.Observer(element,frequency,callback)
Form.Element.Observer Form.Element.getValue() getValue()
Abstract.TimedObserver
Form.Element.Observer
![Page 367: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/367.jpg)
newForm.Observer(element,frequency,callback)
name
Form.Observer Form.serialize() getValue
Abstract.TimedObserver
LoginPreferences
Currentsettings:
Helloworld!
allowotherstoseemylastlogindate
landonrecentchangesoverviewinsteadoftheDashboard
save
JavaScript
newForm.Observer('example',0.3,function(form,value){ $('msg').update('Yourpreferenceshavechanged.Resubmittosave').style.color='red' form.down().setStyle({background:'lemonchiffon',borderColor:'red'})})
$('example').onsubmit=function(){ $('msg').update('Preferencessaved!').style.color='green' this.down().setStyle({background:'',borderColor:''})
Form.Observer
Greetingmessage
Loginoptions
![Page 368: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/368.jpg)
returnfalse}
this.down().setStyle({background:'',borderColor:''});
this.down().setStyle({background:null,borderColor:null});
IEIE style null FireFox
![Page 369: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/369.jpg)
fire(eventName[,memo])->Event
document
document.fire Element#fire
fire 1.6.0
![Page 370: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/370.jpg)
observe(eventName,handler)->document
"dom:loaded"
document.observe Element#observe
Event.observe(document,eventName,handler)
"dom:loaded"PrototypeDOM
DOMContentLoaded Prototype DOMContentLoaded
"dom.loaded" DOMContentLoadedPrototypeDOM
window.onload dom:loadedHTML
document.observe("dom:loaded",function(){ //initiallyhideallcontainersfortabcontent $$('div.tabcontent').invoke('hide');});
observe 1.6.0
![Page 371: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/371.jpg)
document.stopObserving(eventName,handler[,useCapture=false])->document
document.stopObserving Element#stopObserving
stopObserving 1.6.0
![Page 372: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/372.jpg)
getDimensions, getHeight, getScrollOffsets, getWidth
getDimensionsdocument.viewport.getDimensions()->{width:Number,height:Number}
getHeightdocument.viewport.getHeight()->Number
getScrollOffsetsdocument.viewport.getScrollOffsets()->[Number,Number]{top:Number,left:Number}
getWidthdocument.viewport.getWidth()->Number
document.viewport
1.6.0
1.6.0
1.6.0
1.6.0
![Page 373: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/373.jpg)
document.viewport.getDimensions()->{width:Number,height:Number}
viewport——
document.viewport.getDimensions();//->{width:776,height:580}
getDimensions 1.6.0
![Page 374: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/374.jpg)
document.viewport.getHeight()->Number
document.viewport.getDimensions().height
getHeight 1.6.0
![Page 375: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/375.jpg)
document.viewport.getScrollOffsets()->[Number,Number]{top:Number,left:Number}
document.viewport.getScrollOffsets();//->{left:0,top:0}
window.scrollTo(0,120);document.viewport.getScrollOffsets();//->{left:0,top:120}
getScrollOffsets 1.6.0
![Page 376: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/376.jpg)
document.viewport.getWidth()->Number
document.viewport.getDimensions().width
getWidth 1.6.0
![Page 377: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/377.jpg)
JavaScript“origin”
NetscapeNavigator2.0Navigator2.01Navigator2.02“origin”
URL
http://www.example.com/dir2/other.html
http://www.example.com/dir/inner/other.html
https://www.example.com/dir2/other.html
http://en.example.com/dir2/other.html
http://example.com/dir2/other.html
http://www.example.com:81/dir2/other.html
SameOriginPolicy
![Page 378: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/378.jpg)
XMLHttp
XMLHttp.status
100 Continue
101 Switchingprotocols
200 OK
201 Created
202 Accepted
203 Non-AuthoritativeInformation
204 NoContent
205 ResetContent
206 PartialContent
300 MultipleChoices
301 MovedPermanently
302 Found
303 SeeOther
304 NotModified
305 UseProxy
307 TemporaryRedirect
400 BadRequest
401 Unauthorized
402 PaymentRequired
403 Forbidden
404 NotFound
405 MethodNotAllowed
406 NotAcceptable
XMLHttp
![Page 379: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/379.jpg)
407 ProxyAuthenticationRequired
408 RequestTimeout
409 Conflict
410 Gone
411 LengthRequired
412 PreconditionFailed
413 RequestEntityTooLarge
414 Request-URITooLong
415 UnsupportedMediaType
416 RequestedRangeNotSuitable
417 ExpectationFailed
500 InternalServerError
501 NotImplemented
502 BadGateway
503 ServiceUnavailable
504 GatewayTimeout
505 HTTPVersionNotSupported
XMLHttp.readyStatus
0 ()open
1 ()send
2 ()sendhttp
3 ()httpresponseBodyresponseText
4 (),responseBodyresponseText
![Page 380: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/380.jpg)
Prototype
Prototype$superPrototype $super()
varbaseClass=Class.create({ initialize:function(name){ this.name=name; }, show:function(msg){ alert(msg+''+this.name); }});
varsubClass=Class.create(baseClass,{ show:function($super,msg){ $super(msg+'\n'); }});
varsubObj=newsubClass('ORain');subObj.show('Hello,World');
show$superPrototype
$super
![Page 381: - Prototype 1.6 · 5. Response received Ajax Prototype AJAX 1. onCreate AJAX 2. onUninitialized“”[Created] 3. onLoading“”[Initialized] 4. onLoaded“”[Request sent] 5. onInteractive“”[Response](https://reader035.fdocuments.in/reader035/viewer/2022062506/5fb70a3956eed77ee10b0e93/html5/thumbnails/381.jpg)
setValue(element,value)->HTMLElement
value
Prototype
$('inputid').setValue('……')//Form.Element.setValue('inputid','……')
//SELECT$('multiSelect').setValue(['',''])
elementID"elementhasnoproperties"
setValue