- prototype 1.6 · 5. response received ajax prototype ajax 1. oncreate ajax 2....

APIPrototypeAPI

Prototype

APIPrototypePrototype

CHM RemigijusJodelis.2008/04/29

Prototypehttp://www.prototypejs.org/

http://www.prototypejs.org/api

JavaScriptPrototypejQueryPrototypePrototype

Prototype jQueryPrototype

Prototype

——

ORainorainyday@gmail.com http://blog.csdn.net/orain2009-3-17

-Prototype1.6.0

$, $$, $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

$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

$(id|element)->HTMLElement$((id|element)...)->[HTMLElement...]

HTMLID HTML,

$Prototype document.getElementById

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

$$(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

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

#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

$A(iterable)->actualArray

Array Array.from

$A NodeListDOM HTMLCollection arguments

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

//...functionshowArgs(){alert(Array.prototype.join.call(arguments,','));}//...functionshowArgs(){alert($A(arguments).join(','));}

$F(element)->value

Form.Element.getValue Form.Element.getValue

$H([obj])->Hash

Hash“map”“” HashPrototype Hash Hash

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

$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()

$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);

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

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

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.RespondersAjax.Responders.register(responder)Ajax.Responders.unregister(responder)

PrototypeAJAX

Ajax.ResponseAjax

Ajax.UpdaternewAjax.Updater(container,url[,options])

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.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

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

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

newAjax.PeriodicalUpdater(container,url[,options])

AJAX“decay” ——

“”

Ajax.Update decay

Ajax.PeriodicalUpdater Ajax.Updater

frequency 2 0.5Hz2Ajax

decay 1 1

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

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

newAjax.Request(url[,options])

AJAX“”boilerplate

optionshash evalJavascript onComplete

onSuccess

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

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

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

success()XHR staus 2xy

transport.status

XHR getResponseHeaderXHR

Ajax.Response#getHeader

newAjax.Request('/your/url',{ onSuccess:function(response){ //null if((response.getHeader('Server')||'').match(/Apache/)) ++gApacheCount; // } });

JSON X-JSONJSON

Ajax.Response headerJSON

newAjax.Request('/your/url',{ onSuccess:function(transport){ transport.headerJSON } });

Ajax.Responders.register(responder)Ajax.Responders.unregister(responder)

PrototypeAJAX

AJAX Ajax.RequestAjax.Updater

Ajax.PeriodicalUpdater

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

XmlHttpRequest ActiveX

headerJSON JSON

Ajax.Request XmlHttpRequest Ajax.Request

Ajax.Response

status Number

statusText String HTTP

readyState Number 0 "Uninitialized"1 "Loading"2 "Loaded"3"Interactive"4 "Complete"

responseText String

responseXML document

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 XHR

getAllHeaders() String \r\n Http

Ajax.Response 1.6

getResponseHeader(name) String XmlHttpRequest

getHeader

getAllResponseHeaders() String \r\ngetAllResponseHeaders getAllHeaders

newAjax.Updater(container,url[,options])

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

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});

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]; //...}

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(iterator)->Array

firstfirst()->value

undefined

flattenflatten()->newArray

fromArray.from(iterable)->actualArray

$A() $A

indexOfindexOf(value)->position

inspectinspect()->String

"['a',['b',[ObjectObject]],'c']"

lastlast()->value

undefined

reduce

reduce()->Array|singleValue

reversereverse([inline=true])->Array

inline false

sizesize()->Number

toArraytoArray()->newArray

Enumerable toArray

toJSONtoJSON()->String

uniquniq()->newArray

withoutwithout(value...)->newArray

clear()->Array

varguys=['Sam','Justin','Andrew','Dan'];guys.clear();//->[]guys//->[]

clone()->newArray

varfruits=['Apples','Oranges'];varmyFavs=fruits.clone();myFavs.pop();//fruits->['Apples','Oranges']//myFavs->['Apples']

compact()->newArray

null/undefined

['frank',,'sue',,'sally',null].compact()//->['frank','sue','sally']

compact

each(iterator)->Array

each Enumerable

first()->value

undefined

['Ruby','Php','Python'].first()//->'Ruby'[].first()//->undefined

flatten()->newArray

['frank',['bob','lisa'],['jill',['tom','sally']]].flatten()//->['frank','bob','lisa','jill','tom','sally']

flatten

Array.from(iterable)->actualArray

$A() $A

indexOf(value)->position

== ===

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

inspect()->String

"['a',['b',[ObjectObject]],'c']"

inspect Object.inspect

['Apples',{good:'yes',bad:'no'},3,34].inspect()//->"['Apples',[objectObject],3,34]"

['apples','bananas','kiwis'].join(',')//->'apples,bananas,kiwis'

inspect

last()->value

undefined

['Ruby','Php','Python'].last()//->'Python'[].last()//->undefined

reduce()->Array|singleValue

[3].reduce();//->3[3,5].reduce();//->[3,5]

reduce

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

size()->Number

Enumerable size length

Array.size returnthis.length;

Enumerable.size returnthis.toArray().length;

toArray()->newArray

Enumerable toArray

clone Enumerable toArray

toArray

toJSON()->String

['a',{b:null}].toJSON();//->'["a",{"b":null}]'

toJSON 1.5.1

uniq()->newArray

['Sam','Justin','Andrew','Dan','Sam'].uniq();//->['Sam','Justin','Andrew','Dan']['Prototype','prototype'].uniq();//->['Prototype','prototype']

O(n^2)JavaScript Array.concat

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

addMethods, create

PrototypeOOP

Object.extend

addMethodsaddMethods(methods)

createcreate([superclass][,methods...])->Class

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

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

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"; }

varfido=newDog("Fido");fido.speak();//->"Fidosays:woof!"

toJSON

JSONISO

toJSON()->String

JSONISO

newDate(1969,11,31,19).toJSON();//->'"1969-12-31T19:00:00"'

toJSON 1.5.1

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

“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

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...]

someElement.adjacent([selectors...])->[HTMLElement...]

selectors

ancestorsancestors(element)->[HTMLElement...]

element...

childElementschildElements(element)->[HTMLElement...]

classNamesclassNames(element)->Enumerable

ClassNames EnumerableCSS

cleanWhitespacecleanWhitespace(element)->HTMLElement

XMLHTML

<div>element.childNodes<p>,Prototype cleanWhitespace

clonePositionclonePosition(element,source[,options])->HTMLElement

source options/ element

cumulativeOffset

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)

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

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

hidehide(element)->HTMLElement

element

identifyidentify(element)->id

element id id id id

immediateDescendantsimmediateDescendants(element)->[HTMLElement...]

insertinsert(element,{position:content})->HTMLElement

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

observe(element,eventName,handler[,useCapture=false])->HTMLElement

element

positionedOffsetpositionedOffset(element)->[Number,Number]{left:Number,top:Number}

elementContainingBlock CSS position relative absoluteelement Element#getOffsetParent

previousprevious(element[,cssRule][,index=0])->HTMLElement|undefined

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;

removeremove(element)->HTMLElement

element

removeClassNameremoveClassName(element,className)->HTMLElement

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

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()

undoPositionedundoPositioned(element)->HTMLElement

element Element.makePositioned

upup(element,[cssRule][,index=0])->HTMLElement|undefined

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/

absolutize(element)->HTMLElement

absolutize 1.6

addClassName(element,className)->HTMLElement

CSS element

<divid="mutsu"class="applefruit"></div>

$('mutsu').addClassName('food')$('mutsu').className//->'applefruitfood'$('mutsu').classNames()//->['apple','fruit','food']

addClassName

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

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'});

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.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();

addMethods(tagName,methods)

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

ancestors(element)->[HTMLElement...]

element...

element parentNode

PrototypeDOM

$('kid').ancestors();//->[div#father,body,html]//"body""html"document.getElementsByTagName('html')[0].ancestors();//->[]

ancestors

childElements(element)->[HTMLElement...]

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

classNames(element)->Enumerable

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

cleanWhitespace(element)->HTMLElement

XMLHTML<div>

<p></p>

</div>

<div>element.childNodes<p>,<p>Prototype cleanWhitespace

Element.cleanWhitespace nextSibling

previousSiblingfirstChild lastChildDOM

Element.upElement.downElement.previous

<ulid="apples"> <li>Mutsu</li> <li>McIntosh</li> <li>IdaRed</li></ul>

varelement=$('apples');element.firstChild.innerHTML;//->undefined

ul#apples

element.cleanWhitespace();

cleanWhitespace

<ULid="apples"><LI>Mutsu</LI><LI>McIntosh</LI><LI>IdaRed</LI></UL>

firstChild

element.firstChild.innerHTML;//->'Mutsu'

clonePosition(element,source[,options])->HTMLElement

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

cumulativeOffset(element)->[Number,Number]{left:Number,top:Number}

elementoffsetX offset[0] offset.leftY offset[1]

offset.top

offsetLeft offsetTop

cumulativeOffset 1.6

cumulativeScrollOffset(element)->[Number,Number]{left:Number,top:Number}

offsetX offset[0] offset.leftY offset[1]offset.top

scrollLeft scrollTop

cumulativeScrollOffset 1.6

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

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

down(element[,cssRule][,index=0])->HTMLElement|undefined

Element.downPrototypeDOM Element.up

Element.next Element.previous Prototype/CSS

$(element).down(1).next('li',2).hide();

element firstChild Element.down

index element Element.descendants

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>

</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

empty(element)->Boolean

element

<divid="wallet"></div><divid="cart">full!</div>

$('wallet').empty();//->true$('cart').empty();//->false

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

fire(eventName[,memo])->Event

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

firstDescendant(element)->HTMLElement

<divid="australopithecus"> <divid="homo-erectus"> <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

getDimensions(element)->{height:Number,width:Number}

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

getElementsByClassName(element,className)->[HTMLElement...]

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

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

ArrayPrototype Enumerable

DOM Element#getElementsBySelector

getHeight(element)->Number

element

CSS none0

Element.getDimensions

$('rectangle').getHeight();//->100

getHeight

getOffsetParent(element)->HTMLElement

elementContainingBlock CSS position relative absolute body

element CSScontainingblock

getOffsetParent 1.6

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

$('test').getStyle('margin-left');//->IE'1em'//->'12px'

display 'none'Safari null

CSS DOM2

getStyle

getWidth(element)->Number

element

CSS none0

Element.getDimensions

$('rectangle').getWidth();//->200

getWidth

hasClassName(element,className)->Boolean

$('mutsu').hasClassName('fruit');//->true$('mutsu').hasClassName('vegetable');//->false

hasClassName

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

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

immediateDescendants(element)->[HTMLElement...]

Prototype1.6 Element#immediateDescendants

Element#childElements

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

insert(element,{position:content})->HTMLElement

insert(element,content)->HTMLElement

HTMLDOM toHTML toElement

HTML <script>JavascriptHTML

String#evalScripts

insert 1.6

inspect(element)->String

element

<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

makeClipping(element)->HTMLElement

Element.undoClipping

element

<divid="framer"> <imgsrc="/assets/2007/1/14/chairs.jpg"alt="example"/></div>

$('framer').makeClipping().setStyle({width:'100px',height:'100px'});//->HTMLElement

makeClipping

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

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

next(element[,cssRule][,index=0])->HTMLElement|undefined

cssRule element index index cssRuleundefined

Element.nextPrototypeDOM Element.up

Element.down Element.previous Prototype/CSShead body

element nextSibling Element.next

index element Element.nextSiblings

cssRule Element.next

cssRule index Element.nextCSS

undefined

<ulid="fruits"> <liid="apples"> <h3id="title">Apples</h3>

<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

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

observe(element,eventName,handler[,useCapture=false])->HTMLElement

element

Event.observe Event.observe

$(element).observe('click',function(event){ alert(Event.element(event).innerHTML);});//->HTMLElementHTML

observe

positionedOffset(element)->[Number,Number]{left:Number,top:Number}

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

previous(element[,cssRule][,index=0])->HTMLElement|undefined

Element.previousPrototypeDOM Element.up

Element.down Element.next Prototype/CSShead body

element previousSibling Element.previous

index element Element.previousSiblings

element0

cssRule Element.previous

cssRule index Element.previousCSS

undefined

<ulid="fruits"> <liid="apples"> <h3>Apples</h3>

<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

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

readAttribute(element,attribute)->String|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

recursivelyCollect(element,property)->[HTMLElement...]

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

relativize(element)->HTMLElement

element.style.position='relative' 1.6.0.32066element._originalWidth=element.style.width;

element._originalHeight=element.style.height;

relativize 1.6

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

removeClassName(element,className)->HTMLElement

$('mutsu').removeClassName('food');//->HTMLElement$('mutsu').classNames();//->['apple','fruit']

removeClassName

replace(element[,html])->HTMLElement

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>

$('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

$('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'

scrollTo(element)->HTMLElement

elemnet

HTMLanchors

$(element).scrollTo();//->HTMLElement

scrollTo

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

select 1.6

Element.setOpacity(element,opacity)->[HTMLElement...]

someElement.setOpacity(opacity)->[HTMLElement...]

Element.setStyle setOpacity

varelement=$('myelement');//50%element.setOpacity(0.5);//CSSelement.setStyle({opacity:0.5});element.setStyle("opacity:0.5");

setOpacity 1.5.1

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

show(element)->HTMLElement

element

<divid="error-message"style="display:none;"></div>

$('error-message').show();//->HTMLElement(div#error-message)

Element.showCSSPrototypeCSS

<divid="hidden-by-css"></div>

$('hidden-by-css').show();////->HTMLElementdiv#error-message)

Element.hide1.5

Enumerables

['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

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

stopObserving(element,eventName,handler)->HTMLElement

element

Event.stopObserving Event.stopObserving

$(element).stopObserving('click',coolAction);//->HTMLElement'coolAction'

stopObserving

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

Javascript

$('hidden-by-css').toggle();////->HTMLElementdiv#hidden-by-css

Element.hide1.5

toggle

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

toggleClassName(element,className)->HTMLElement

<divid="mutsu"class="apple"></div>

$('mutsu').hasClassName('fruit');//->false$('mutsu').toggleClassName('fruit');//->element$('mutsu').hasClassName('fruit');//->true

toggleClassName

undoClipping(element)->HTMLElement

<divid="framer"> <imgsrc="/assets/2007/1/14/chairs.jpg"alt="example"/></div>

$('framer').undoClipping();//->HTMLElementCSSoverflow

undoClipping

undoPositioned(element)->HTMLElement

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

$('container').undoPositioned();//->HTMLElement

up(element,[cssRule][,index=0])->HTMLElement|undefined

Element.upPrototypeDOM Element.down

Element.next Element.previous Prototype/CSS

$(element).up(1).next('li',2).hide();

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>

<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

update(element[,newContent])->HTMLElement

newContentHTML toString()JavaScript

newContent <script>Javascript

String#evalScripts

Element.update element

<divid="fruits">carrot,eggplantandcucumber</div>

$('fruits').update('kiwi,bananaandapple');//->HTMLElement$('fruits').innerHTML//->'kiwi,bananaandapple'

$('fruits').update();//->HTMLElement$('fruits').innerHTML;//->''()

$('fruits').update('<p>Kiwi,banana<em>and</em>apple.</p>');//->HTMLElement$('fruits').innerHTML;

update

//->'<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".'

viewportOffset(element)->[Number,Number]{left:Number,top:Number}

element offsetX offset[0] offset.leftY offset[1]

offset.top

viewportOffset 1.6

visible(element)->Boolean

<divid="visible"></div><divid="hidden"style="display:none;"></div>

$('visible').visible();//->true$('hidden').visible();//->false

CSSPrototypeCSS<style>CSS visibleJavascriptCSS

$('hidden-by-css').visible();//->true

visible

Element.wrap(element,wrapper[,attributes])->HTMLElement

someElement.wrap(wrapper[,attributes])->HTMLElement

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

HTML<divclass="table-wrapper"> <tableid="data"> <tr> <th>Foo</th> <th>Bar</th> </tr> <tr> <td>1</td> <td>2</td> </tr> </table></div>

writeAttribute(element,attribute[,value=true])->HTMLElement

writeAttribute(element,attributes)->HTMLElement

elementhash/

writeAttribute 1.6

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

addClassNameaddClassName(element,className)->HTMLElement

CSS element

adjacent

Element.Methods

Element.adjacent(element[,selectors...])->[HTMLElement...]someElement.adjacent([selectors...])->[HTMLElement...]

selectors

ancestorsancestors(element)->[HTMLElement...]

element...

childElementschildElements(element)->[HTMLElement...]

classNamesclassNames(element)->Enumerable

cleanWhitespacecleanWhitespace(element)->HTMLElement

XMLHTML

<div>element.childNodes<p>,Prototype cleanWhitespace

clonePositionclonePosition(element,source[,options])->HTMLElement

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}

descendantOfdescendantOf(element,ancestor)->Boolean

element ancestor

descendantsdescendants(element)->[HTMLElement...]

element

downdown(element[,cssRule][,index=0])->HTMLElement|undefined

emptyempty(element)->Boolean

element

firefire(eventName[,memo])->Event

firstDescendantfirstDescendant(element)->HTMLElement

getDimensionsgetDimensions(element)->{height:Number,width:Number}

getElementsByClassNamegetElementsByClassName(element,className)->[HTMLElement...]

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

border-widthborderWidth

getWidthgetWidth(element)->Number

element

hasClassNamehasClassName(element,className)->Boolean

hidehide(element)->HTMLElement

element

identifyidentify(element)->id

element id id id id

immediateDescendantsimmediateDescendants(element)->[HTMLElement...]

insertinsert(element,{position:content})->HTMLElementinsert(element,content)->HTMLElement

inspectinspect(element)->String

deprecated

element

makeClippingmakeClipping(element)->HTMLElement

makePositionedmakePositioned(element)->HTMLElement

CSSblock elementCSSposition 'static' undefinedposition'relative'

matchmatch(element,selector)->Boolean

element selectorCSS

nextnext(element[,cssRule][,index=0])->HTMLElement|undefined

nextSiblingsnextSiblings(element)->[HTMLElement...]

element

observeobserve(element,eventName,handler[,useCapture=false])->HTMLElement

element

positionedOffsetpositionedOffset(element)->[Number,Number]{left:Number,top:Number}

previousprevious(element[,cssRule][,index=0])->HTMLElement|undefined

previousSiblingspreviousSiblings(element)->[HTMLElement...]

element

readAttributereadAttribute(element,attribute)->String|null

recursivelyCollectrecursivelyCollect(element,property)->[HTMLElement...]

relativizerelativize(element)->HTMLElement

element.style.position='relative' 1.6.0.32066

element._originalWidth=element.style.width;element._originalHeight=element.style.height;

remove

remove(element)->HTMLElement

element

removeClassNameremoveClassName(element,className)->HTMLElement

replacereplace(element[,html])->HTMLElement

scrollToscrollTo(element)->HTMLElement

elemnet

selectselect(element,selector...)->[HTMLElement...]

CSS element

setOpacityElement.setOpacity(element,opacity)->[HTMLElement...]someElement.setOpacity(opacity)->[HTMLElement...]

setStylesetStyle(element,styles)->HTMLElement

elementCSS styles/Hash camelizedwidth borderWidthborder-width

show(element)->HTMLElement

element

siblingssiblings(element)->[HTMLElement...]

element

stopObservingstopObserving(element,eventName,handler)->HTMLElement

element

toggletoggle(element)->HTMLElement

element

toggleClassNametoggleClassName(element,className)->HTMLElement

undoClippingundoClipping(element)->HTMLElement

undoPositionedundoPositioned(element)->HTMLElement

upup(element,[cssRule][,index=0])->HTMLElement|undefined

updateupdate(element[,newContent])->HTMLElement

viewportOffsetviewportOffset(element)->[Number,Number]{left:Number,top:Number}

element offsetX offset[0] offset.leftY offset[1] offset.top

visiblevisible(element)->Boolean

wrapElement.wrap(element,wrapper[,attributes])->HTMLElementsomeElement.wrap(wrapper[,attributes])->HTMLElement

writeAttributewriteAttribute(element,attribute[,value=true])->HTMLElementwriteAttribute(element,attributes)->HTMLElement

elementhash/

hasAttribute

Element.Methods.SimulatedHTMLElement

hasAttributehasAttribute(element,attribute)->Boolean

InternetExplorer67DOM hasAttribute

Element.Methods.Simulated

simulated

hasAttribute(element,attribute)->Boolean

InternetExplorer67DOM hasAttribute

<aid="link"href="http://prototypejs.org">Prototype</a>

$('link').hasAttribute('href');//->true

hasAttribute simulated

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

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();

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

collectcollect(iterator[,context])->Array

iterator Enumerable mapiterator

detectdetect(iterator[,context])->firstElement|undefined

iterator true find iterator

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

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]

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

all([iterator=Prototype.K[,context]])->Boolean

Prototype.KPrototype

bool false iteratorbool

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

any([iterator=Prototype.K[,context]])->Boolean

Prototype.KPrototype

bool true iteratorbool

[].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

collect(iterator[,context])->Array

iterator Enumerable map iterator

['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]

collect

detect(iterator[,context])->firstElement|undefined

iterator true find iterator

detect

each(iterator[,context])->Enumerable

Enumerable Enumerable iterator

each Enumerable iterator

1.2. 0

$break $continue

$continuePrototype1.5 iterator

return

JavaScript break continue iterator

iterator iterator

Prototype $break

['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);

});//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

eachSlice(size[,iterator=Prototype.K[,context]])->[slice...]

Enumerable

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

entries()->Array

toArray

entries

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'

findAll(iterator[,context])->Array

iterator true select

grepgrep findAll

$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

grep(filter[,iterator=Prototype.K[,context]])->Array

iterator

match Enumerable

filter match

filter.match true

iterator map

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"));

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

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

inject(accumulator,iterator[,context])->accumulatedValue

iterator accumulator iterator accumulatoraccumulator

iteratorPrototype accumulator

$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

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');

invoke

map(iterator)->Array

iterator Enumerable collect

max([iterator=Prototype.K[,context]])->maxValue

Enumerable iterator iterator Enumerable

$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

member(object)->Boolean

Enumerable == include

member

min([iterator=Prototype.K[,context]])->minValue

Enumerable iterator iterator Enumerable

$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

partition([iterator=Prototype.K[,context]])->[TrueArray,FalseArray]

true falseJavascript bool iterator

findAll/select reject Enumerable partition

['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

pluck(propertyName)->Array

collect

['hello','world','this','is','nice'].pluck('length')//->[5,5,4,3,4]document.getElementsByClassName('superfluous').pluck('tagName').sort().uniq()//->sortedlistofuniquecanonicaltagnamesforelementswiththis//specificCSSclass...

invoke Enumerable

reject(iterator[,context])->Array

iterator false

$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

select(iterator)->Array

findAll

select

size()->Number

Enumerable

$R(1,10).size()//->10['hello',42,true].size()//->3$H().size()//->0

Enumerable

length

sortBy(iterator[,context])->Array

iterator Enumerable

iterator

sort < sortBy

Array sort

['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

toArray()->Array

Enumerable Array entries

$A Enumerable

$R(1,5).toArray()//->[1,2,3,4,5]

Enumerable Array.toArray

toArray

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']

element, extend, findElement, isLeftClick, observe, pointerX, pointerY, stop,

stopObserving, unloadCache

♪♫

W3CMSIESafari keypress/keydownMSIE

PrototypePrototype 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 Event.extend Element Element.extend

Event.observePrototype

Event.extend

elementEvent.element(event)->Element

extendEvent.extend(event)

Event.Methods event

findElementEvent.findElement(event,tagName)->Element

DOMDOM

isLeftClickEvent.isLeftClick(event)->Boolean

“”

observeEvent.observe(element,eventName,handler[,useCapture=false])

pointerXEvent.pointerX(event)->Number

pointerYEvent.pointerY(event)->Number

stopEvent.stop(event)

stopObservingEvent.stopObserving(element,eventName,handler[,useCapture=false])

unloadCacheEvent.unloadCache()

observe 1.6

Event.element(event)->Element

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

Event.extend(event)

Event.Methods event

Event.observe Element#observe

onclick

extend 1.6

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();});

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

Event.isLeftClick(event)->Boolean

“”

“”“”

isLeftClick

Event.observe(element,eventName,handler[,useCapture=false])

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

Event.observe(window,'load',function(){ Event.observe('signinForm','submit',checkForm);});

Prototype bindAsEventListener

varChecks={ //'generic' generic:function(event){ // }};

Event.observe('signinForm','submit',Checks.generic.bindAsEventListener(Checks));

stopObserving unloadCache

Event.pointerX(event)->Number

pointerX

Event.pointerY(event)->Number

pointerY

Event.stop(event)

……

99.9%Prototype

Event.observe('signinForm','submit',function(event){ varlogin=$F('login').strip(); if(''==login){ Event.stop(event); // }});

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

unloadCache

Event.unloadCache()

observe 1.6

1.6v1.6

MSIEMSIE

observe

Prototype unloadCache

PrototypeMSIE unloadCache

unloadCache 1.6

disable, enable, findFirstElement, focusFirstElement, getElements, getInputs,

request, reset, serialize, serializeElements

“PrototypeDOM”

FormElementformElementFormControl<form> <input><select>

disabledisable(formElement)->HTMLFormElement

enableenable(formElement)->HTMLFormElement

findFirstElementfindFirstElement(formElement)->HTMLElement

focusFirstElementfocusFirstElement(formElement)->HTMLFormElement

getElementsgetElements(formElement)->array

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

disable(formElement)->HTMLFormElement

Sulien

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

JavaScriptform['disable']()==>form.disable()

enable(formElement)->HTMLFormElement

disable()

enable

findFirstElement(formElement)->HTMLElement

INPUTSELECTTEXTAREA

document Tab

findFirstElement

focusFirstElement(formElement)->HTMLFormElement

Form.findFirstElement() activate()Web

focusFirstElement

getElements(formElement)->array

OPTIONSELECT

getElements

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

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

<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>

request 1.5.1

$('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!')}})

reset(formElement)->HTMLFormElement

Form.reset('contact')//$('contact').reset()//reset

HTML reset()

serialize(formElement[,getHash=false])->String|object

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:

Yourhobbiesare:

W3CHTMLJavaScript

"hobbies" SELECTPHPRORRubyon

"hobbies[]" arrayJavaScript ——Prototype

serializeElements(elements[,getHash=false])->string|object

Form.serialize getHash Form.serialize

serializeElement

"text"INPUT

Form.serializeElements($('myform').getInputs('text'))//->

serializeElements

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

focusfocus(element)->HTMLElement

getValuegetValue(element)->string|array

presentpresent(element)->boolean

true false

selectselect(element)->HTMLElement

serializeserialize(element)->string

name=valueURL

setValuesetValue(element,value)->HTMLElement

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

clear(element)->HTMLElement

$('some_field').onfocus=function(){ // if(this._cleared) return //"this" this.clear() this._cleared=true}

disable(element)->HTMLElement

disable true

Form.disable()

JavaScript

disable

enable(element)->HTMLElement

Form.disable()

enable

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

$(element).focus();

Prototype1.6.0.3

getValue(element)->string|array

nameDOM ID JavaScript

ID"contact""company"

varform=$('contact');varinput=form['company'];Form.Element.getValue(input);//$(input).getValue();//$()//$F(input);

elementID"elementhasnoproperties"

getValue

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

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

$(element).focus();

Prototype1.6.0.3

select

serialize(element)->string

name=valueURL

Ajax——

Ajax getValue()

serialize

argumentNames, bind, bindAsEventListener, curry, defer, delay,methodize,

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

Function

currycurry(arg...)->Function

deferdefer(arg...)->Number

JavaScript

delaydelay(seconds[,arg...])->Number

seconds arg

methodizesomeFunction.methodize()->Function

wrapwrap(wrapperFunction[,arg...])->Function

wrapperFunction wrapperFunction

someFunction.argumentNames()->Array

varfn=function(foo,bar){ returnfoo+bar;};fn.argumentNames();//->['foo','bar']Prototype.emptyFunction.argumentNames();//->[]

argumentNames 1.6

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

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!

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

bindAsEventListener(thisObj[,arg...])->Function

“” 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

curry(arg...)->Function

Function#curry Function#bind

String.prototype.splitOnSpaces=String.prototype.split.curry("");"foobarbazthud".splitOnSpaces();//->["foo","bar","baz","thud"]

curry 1.6.0

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

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

someFunction.methodize()->Function

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

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

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

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#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

eacheach(iterator)->Hash

hash“/”

getget(key)->value

inspectinspect()->String

keyskeys()->[String...]

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

toObjecttoObject()->Object

hash Object Hash Object“/”

toQueryStringtoQueryString()->String

hashURL

unsetunset(key)->value

updateupdate(object)->Hash

object“/”hashhash

valuesvalues()->Array

clone()->newHash

varh=newHash({a:'apple'});varclone=h.clone();h.unset('a');h.inspect();//->#<Hash:{}>clone.inspect();//->#<Hash:{'a':'apple'}>

clone 1.6

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"'

get(key)->value

varh=newHash({a:'apple',b:'banana',c:'coconut'});h.get('a');//->'apple'h.get('d');//->undefined

get 1.6

inspect()->String

$H({name:'Prototype',version:1.5}).inspect()//->"<#Hash:{name:'Prototype',version:1.5}>"

Hash“/”JavaScript“/” ——

inspect

keys()->[String...]

for...in

$H({name:'Prototype',version:1.5}).keys().sort()//->['name','version']$H().keys()//->[]

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

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

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

toJSON()->String

$H({name:'Violet',occupation:'character',age:25}).toJSON();//->'{"name":"Violet","occupation":"character","age":25}'

toJSON 1.5.1

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

toQueryString()->String

hashURL

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

unset(key)->value

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

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

values()->Array

“” for...in——

undefined

$H({name:'Prototype',version:1.5}).values().sort()//->[1.5,'Prototype']$H().values()//->[]

values

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

newInsertion.After(element,html)

html element

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>

newInsertion.Before(element,html)

html element

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

newInsertion.Bottom(element,html)

html element

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

newInsertion.Top(element,html)

html element

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>

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

floorfloor()->Number

Number

roundround()->Number

Number

succsucc()->Number

Number ObjectRange

timestimes(iterator)->Number

Ruby[0...n]

toColorParttoColorPart()->String

Number Number[0...255]CSS

toPaddedStringtoPaddedString(length[,radix])->String

Number length 0 radixradix3710

abs()->Number

Number

Math.abs

Math.abs(-5)//->5(-5).abs()//->5(5).abs()//->5

abs 1.6.0

ceil()->Number

Number

Math.ceil

Math.ceil(4.1)//->5(4.1).ceil()//->5(-4.1).ceil()//->-4

ceil 1.6.0

floor()->Number

Number

Math.floor

Math.floor(4.6)//->4(4.6).floor()//->4(-4.1).floor()//->-5

floor 1.6.0

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

succ()->Number

Number ObjectRange

(5).succ()//->6$A($R(1,5)).join('')//->'12345'

times(iterator)->Number

Ruby[0...n]

iterator0 Number

vars='';(5).times(function(n){s+=n;});s//->'01234'

toColorPart()->String

Number Number[0...255]CSS

128.toColorPart()//->'70'10.toColorPart()//->'0a''#'+[128,10,16].invoke('toColorPart').join('')//->'#800a10'

toColorPart

toJSON()->String

(45).toJSON();//->'45'

toJSON 1.5.1

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

include

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

include(value)->Boolean

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

$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

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

isArrayisArray(obj)->Boolean

obj true false

isElementisElement(obj)->Boolean

Object

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

toJSONtoJSON(obj)->String

toQueryStringtoQueryString(obj)->String

valuesObject.values(obj)->Array

obj Hash

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']//

Object.extend(dest,src)->alteredDest

src destprototype Prototype

PrototypeOOPPrototype

Class.create

Element.extend PrototypeDOM

extend

Object.inspect(obj)->String

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

isArray(obj)->Boolean

obj true false

Object.isArray([]);//->trueObject.isArray($w());//->trueObject.isArray({});//->false

isArray 1.6

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

isFunction(obj)->Boolean

obj Function true false

Object.isFunction($);//->trueObject.isFunction(123);//->false

isFunction 1.6

isHash(obj)->Boolean

obj Hash true false

Object.isHash(newHash({}));//->trueObject.isHash($H({}));//->trueObject.isHash({});//->false

isHash 1.6

isNumber(obj)->Boolean

obj Number true false

Object.isNumber(0);//->trueObject.isNumber(1.2);//->trueObject.isNumber("foo");//->false

isNumber 1.6

isString(obj)->Boolean

obj String true false

Object.isString("foo");//->trueObject.isString("");//->trueObject.isString(123);//->false

isString 1.6

isUndefined(obj)->Boolean

obj undefined true false

Object.isUndefined();//->trueObject.isUndefined(undefined);//->trueObject.isUndefined(null);//->falseObject.isUndefined(0);//->falseObject.isUndefined("");//->false

isUndefined 1.6

Object.keys(obj)->[String...]

obj Hash

for...in

Object.keys()//->[]Object.keys({name:'Prototype',version:1.5}).sort()//->['name','version']

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

toJSON(obj)->String

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

toQueryString(obj)->String

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

Object.values(obj)->Array

obj Hash

for...in

Object.values()//->[]Object.values({name:'Prototype',version:1.5}).sort()//->[1.5,'Prototype']

values

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

stop()

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

absolutize, clone, cumulativeOffset, offsetParent, overlap, page,

positionedOffset, prepare, realOffset, relativize,within,

withinIncludingScrolloffsets

Prototype1.6 Position Element

PositionDOMUI

absolutizeabsolutize(element)

cloneclone(source,target[,options])->[Number,Number]

source options/ target

cumulativeOffsetcumulativeOffset(element)->[Number,Number]

element

offsetParentoffsetParent(element)->HTMLElement

overlap

Position

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(element,x,y)->Boolean

x,y element element Position.within Position.preparewithinIncludingScrolloffsets-->Position.overlap

absolutize(element)

Element#absolutize

absolutize

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}

cumulativeOffset(element)->[Number,Number]

element

Element#cumulativeOffset

offsetLeft offsetTop

cumulativeOffset

offsetParent(element)->HTMLElement

Element#getOffsetParent

element CSScontainingblock

offsetParent

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(element)->[Number,Number]

element

Element#viewportOffset

positionedOffset(element)->[Number,Number]

elementContainingBlock CSS position relative absoluteelement Position.offsetParent(element)

Element#positionedOffset

offsetLeft offsetTopCSS

position

positionedOffset

prepare()

Position.withinIncludingScrolloffsets

prepare

realOffset(element)->[Number,Number]

Element#cumulativeScrollOffset

scrollLeft scrollTop

realOffset

relativize(element)

element.style.position='relative'

Element#relativize

relativize

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

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

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

emptyFunction

emptyFunction([argument...])

emptyFunction

K(argument)->argument

KPrototype

Enumerable

Prototype.K('helloworld!');//->'helloworld!'Prototype.K(1.5);//->1.5Prototype.K(Prototype.K);//->Prototype.K

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

"_" "-"

String

empty()->Boolean

endsWithendsWith(substring)->Boolean

substring

escapeHTMLescapeHTML()->string

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

substring

inspectinspect([useDoubleQuotes=false])->String

interpolateinterpolate(object[,pattern])->string

object

isJSONisJSON()->boolean

parseQuerytoQueryParams

scanscan(pattern,iterator)->string

pattern

startsWithstartsWith(substring)->Boolean

substring

stripstrip()->string

stripScriptsstripScripts()->string

1.5.1.1

HTML script

stripTagsstripTags()->string

subsub(pattern,replacement[,count=1])->string

count pattern replacement replacement Template pattern

succsucc()->string

ObjectRangeUnicode

timestimes(count)->string

toArraytoArray()->[character...]

toQueryParamstoQueryParams([separator='&'])->Object

URI“/”

truncatetruncate([length=30[,suffix='...']])->string

underscoreunderscore()->string

Camel "_"

unescapeHTMLunescapeHTML()->string

unfilterJSONunfilterJSON([filter=Prototype.JSONFilter])->String

AjaxJSONJavaScript

1..5.1

blank()->Boolean

''.blank();//->true''.blank();//->true'a'.blank();//->false

blank 1.5.1

camelize()->string

Camel 'foo-bar' 'fooBar'

PrototypeCSSDOM style

'background-color'.camelize();//->'backgroundColor''-moz-binding'.camelize();//->'MozBinding'

camelize

capitalize()->string

'hello'.capitalize();//->'Hello''HELLOWORLD!'.capitalize();//->'Helloworld!'

capitalize

dasherize()->string

"_" "-"

'border_bottom_width'.dasherize();//->'border-bottom-width'

DOM styleCSS String#underscore

'borderBottomWidth'.underscore().dasherize();//->'border-bottom-width'

dasherize

empty()->Boolean

''.empty();//->true''.empty();//->false

empty 1.5.1

endsWith(substring)->Boolean

substring

'slaughter'.endsWith('laughter')//->true

endsWith 1.5.1

escapeHTML()->string

'<divclass="article">Thisisanarticle</div>'.escapeHTML();//->"<divclass="article">Thisisanarticle</div>"

escapeHTML

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

evalScripts()->[returnedValue...]

script script

'lorem...<script>2+2</script>'.evalScripts();//->[4]'<script>2+2</script><script>alert("helloworld!")</script>'.evalScripts();//->[4,undefined]'helloworld!'

evalScripts

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

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

include(substring)->Boolean

substring

'Prototypeframework'.include('frame');//->true'Prototypeframework'.include('frameset');//->false

include 1.5.1

inspect([useDoubleQuotes=false])->String

'I\'msohappy.'.inspect();//->'\'I\\\'msohappy.\'''I\'msohappy.''I\'msohappy.'.inspect(true);//->'"I'msohappy."'"I'msohappy."

inspect

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

isJSON()->boolean

"something".isJSON()//->false"\"something\"".isJSON()//->true"{foo:42}".isJSON()//->false"{\"foo\":42}".isJSON()//->true

isJSON 1.5.1.1

toQueryParams

parseQuery

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']

'failure-message,success-message&spinner'.scan(/(\w|-)+/,Element.toggle)//->'failure-message,success-message&spinner'

startsWith(substring)->Boolean

substring

'PrototypeJavaScript'.startsWith('Pro');//->true

startsWith 1.5.1

strip()->string

'helloworld!'.strip();//->'helloworld!'

stripScripts()->string

HTML script

'a<ahref="#">link</a><script>alert("helloworld!")</script>'.stripScripts();//->'a<ahref="#">link</a>'

stripScripts

stripTags()->string

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

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)'

succ()->string

ObjectRangeUnicode

'a'.succ();//->'b''aaaa'.succ();//->'aaab'

times(count)->string

"echo".times(3);//->"echoechoecho"

times 1.5.1

toArray()->[character...]

'a'.toArray();//->['a']'helloworld!'.toArray();//->['h','e','l','l','o','','w','o','r','l','d','!']

toArray

toJSON()->String

'The"Quoted"chronicles'.toJSON();//->'"The\"Quoted\"chronicles"'

toJSON 1.5.1

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

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

underscore()->string

Camel "_"

'borderBottomWidth'.underscore();//->'border_bottom_width'

DOM styleCSS String#dasherize

'borderBottomWidth'.underscore().dasherize();//->'border-bottom-width'

underscore

unescapeHTML()->string

'x>10'.unescapeHTML()//->'x>10''<h1>Pride&Prejudice</h1>'.unescapeHTML()//->'Pride&Prejudice'

unescapeHTML

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

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

//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'

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

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

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)

TimedObserver

newForm.Element.Observer(element,frequency,callback)

Form.Element.Observer Form.Element.getValue() getValue()

Abstract.TimedObserver

Form.Element.Observer

newForm.Observer(element,frequency,callback)

Form.Observer Form.serialize() getValue

Abstract.TimedObserver

LoginPreferences

Currentsettings:

Helloworld!

allowotherstoseemylastlogindate

landonrecentchangesoverviewinsteadoftheDashboard

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

returnfalse}

this.down().setStyle({background:'',borderColor:''});

this.down().setStyle({background:null,borderColor:null});

IEIE style null FireFox

fire(eventName[,memo])->Event

document

document.fire Element#fire

fire 1.6.0

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

document.stopObserving(eventName,handler[,useCapture=false])->document

document.stopObserving Element#stopObserving

stopObserving 1.6.0

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

document.viewport.getDimensions()->{width:Number,height:Number}

viewport——

document.viewport.getDimensions();//->{width:776,height:580}

getDimensions 1.6.0

document.viewport.getHeight()->Number

document.viewport.getDimensions().height

getHeight 1.6.0

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

document.viewport.getWidth()->Number

document.viewport.getDimensions().width

getWidth 1.6.0

JavaScript“origin”

NetscapeNavigator2.0Navigator2.01Navigator2.02“origin”

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

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

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

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

setValue(element,value)->HTMLElement

Prototype

$('inputid').setValue('……')//Form.Element.setValue('inputid','……')

//SELECT$('multiSelect').setValue(['',''])

elementID"elementhasnoproperties"

setValue

- prototype 1.6 · 5. response received ajax prototype ajax 1. oncreate ajax 2....

Documents

struts on ajax - the ajax...

taller de demostración del uso de php, ajax y prototype -...

ajax! ajax programming ajax! ajax programming. ajax! ajax...

ajax world 08 asp net ajax

dna of ajax applications -...

d2.4.2 soa4all studio first prototype€¦ · ajax...

ajax und webentwicklung mit prototype, andré hacker, simon...

prototype prototype

ajax in asp.net mvc ajax, partial page rendering, jquery...

ccomplete ajax tutorialomplete ajax tutorial

fast, scalable and secure onloading of edge functions using...

prototype - ddbunlimited.comprototype prototype prototype...

michael hartl und laurent steurer. web 2.0 web 2.0...

active ajax based active ajax based active ajax based active

programmation ajax/web2.0 - formation ajax/web2 1

web 2.0 à la microsoft - w3l€¦ · asp.net ajax 1.0...

when david helps goliath: the case for 3g onloading

ajax basics the xmlhttprequest object. ajax is…. ajax is...

fast, scalable and secure onloading of edge functions using...

3gol: power-boosting adsl using 3g onloading ·...