Ontwikkelaar Notities voor prototype.js

Omvat versie 1.5.0

Door Sergio Pereira
gewijzigd op: 4 Maart 2007
Nederlandse Vertaling Hilbrand Bouwkamp
gewijzigd op: 4 Maart 2007

Nieuw! PDF van O'Reilly (Engels)

Inhoudsopgave

Wat is het?

In het geval je het nog niet gebruikt hebt, prototype.js is een JavaScript bibliotheek geschreven door Sam Stephenson. Deze bijzonder goed doordachte en goed geschreven, standards compliant broncode neemt een groot deel van de last van je schouders, verbonden met het creëren van uitgebreide, zeer interactieve web pagina's, karakteristiek voor Web 2.0.

Als je de bibliotheek recentelijk hebt gebruikt, heb je waarschijnlijk wel gemerkt dat de documentatie niet een van de sterkste punten is. Zoals zoveel ontwikkelaars voor mij, heb ik prototype.js leren kennen door de broncode te lezen en er mee te experimenteren. Ik dacht dat het een goed idee was om notities te maken tijdens het leren en deze met iedereen te delen.

Ik bied ook een onofficiële referentie van de objecten, classen, functies en uitbreidingen geleverd bij deze bibliotheek.

Ontwikkelaars bekend met de Ruby programmeertaal zullen, terwijl je deze voorbeelden en referentie leest, duidelijke overeenkomsten waarnemen tussen Ruby's ingebouwde classen en veel van de in deze bibliotheek geïmplementeerde uitbreidingen.

toc

Gerelateerde artikelen

Gevorderden JavaScript handleiding (engels).

toc

Nuttige functies

De bibliotheek komt met veel voor gedefinieerde objecten en nuttige functies. Het voor de hand liggende doel van deze functies is om je een hoop herhaaldelijk typewerk en taken te besparen.

toc

Gebruik van de $() functie

De $() functie is een handige afkorting voor de all-te-frequente document.getElementById() functie van de DOM. Net de DOM functie retourneert deze het element van het id die is doorgegeven als argument.

Anders dan de DOM functie, gaat deze functie verder. Het geretourneerde element object zal worden aangevuld met extra methoden. Deze extra methoden versimpelen vele taken, zoals het verbergen/tonen van het element, de afmetingen opvragen, scrollen naar het element, etc. De lijst met methoden die zijn toegevoegd aan het geretourneerde element object kun je vinden in de referentie van het Element object.

<html>
<head>
<title> Test Page </title>
<script src="prototype-1.5.0.js"></script>

<script>
	function test1(){
		var d = $('mijnDiv');
		alert(d.innerHTML);
		d.hide();
		d.show();
		d.addClassName('active');
	}

	function test2(){
		var divs = $('mijnDiv','mijnAndereDiv');
		for(i=0; i<divs.length; i++){
			alert(divs[i].innerHTML);
		}
	}
</script>
</head>

<body>
	<div id="mijnDiv">
		<p>Dit is een paragraaf</p>
	</div>
	<div id="mijnAndereDiv">
		<p>Dit is een andere paragraaf</p>
	</div>

	<input type="button" value="Test1" onclick="test1();"><br>
	<input type="button" value="Test2" onclick="test2();"><br>

</body>
</html>

Een ander handigheidje van deze functie is dat je zowel het id string als het element object zelf kunt meegeven. Dit maakt deze functie erg nuttig maakt voor gebruik binnen andere functies die ook beide vormen als argument aan kunnen.

toc

Gebruik van de $$() functie

De $$() functie zal je veel helpen als je consistent CSS scheid van de inhoud. Het analyseert een of meerdere CSS expressies die gefilterd worden, analoog aan diegene die gebruikt worden om CSS regels te definiëren en retourneert de elementen die aan deze filters voldoen.

Het is zo eenvoudig om te gebruiken, absurd gewoon. Zie hier.

<script>
function test$$(){
	/*
	  in het geval CSS niet je sterke zijde is, de expressie hieronder
	  betekent 'vind alle INPUT elementen die binnen de elementen
	  met class=field zijn binnen een DIV met id loginForm.'
	*/
	var f = $$('div#loginForm .field input');
	var s = '';
	for(var i=0; i<f.length; i++){
		s += f[i].value + '/';
	}
	alert(s); // shows: "janjansen1/geheim/"

	//nu met meer dan één expressie doorgegeven
	f = $$('div#loginForm .field input', 'div#loginForm .fieldName');
	s = '';
	for(var i=0; i<f.length; i++){
		s += ( f[i].value ? f[i].value : f[i].innerHTML ) + '/';
	}
	alert(s); //shows: "janjansen1/geheim/Gebruikersnaam:/Wachtwoord:/"
}


</script>

<div id='loginForm'>
	<div class='field'>
		<span class='fieldName'>Gebruikersnaam:</span>
		<input type='text' id='txtName' value='janjansen1'/>
	</div>
	<div class='field'>
		<span class='fieldName'>Wachtwoord:</span>
		<input type='password' id='txtPass' value='geheim' />
	</div>
	<input type='submit' value='login' />
</div>
<input type=button value='test $$()' onclick='test$$();' />
			

Een korte opmerking over snelheid. De huidige implementatie van de $$() functie in prototype.js is niet bijzonder efficiënt. Als je van plan bent om gebruik makend van deze functie diepe en complete HTML documenten af te lopen, zou je misschien kunnen overwegen om andere vrij beschikbare implementaties te gebruiken, mogelijk door simpelweg the $$() functie zelf te vervangen.

toc

Gebruik van de $F() functie

De $F() functie is een andere welkome afkorting. Het retourneert de waarde van elk input controle veld, zoals tekst velden of drop-down lijsten. De functie accepteert als argument zowel het element id als het element object zelf.

<script>
	function test3()
	{
		alert(  $F('userName')  );
	}
</script>

<input type="text" id="userName" value="Joe Doe"><br/>
<input type="button" value=Test3 onclick="test3();"><br/>
			

toc

Gebruik van de $A() functie

De $A() functie converteert het argument die het ontvangt in een Array object.

Deze functie, gecombineerd met de uitbreidingen voor de Array class, maken het eenvoudiger om, bijvoorbeeld, functies te schrijven die een flexibel aantal argumenten accepteren.

<script>
	function shoutOut(){
		sayHi('Hallo, ', 'Homer', 'Bart', 'Marge', 'Snowball');
	}

	function sayHi(){
		var names = $A(arguments).slice(1);
		var phrase = arguments[0];
		for(i=0; i<names.length; i++)
			alert(phrase + names[i]);
	}
</script>

<input type="button" value="Zeg hi tegen iedereen" onclick="shoutOut();" >
			

toc

Gebruik van de $H() functie

De $H() functie converteert een opsombaar Hash object in een vergelijkbaar associatief array.

<script>
	function testHash()
	{
		var a = [];
		//laten we het associatieve array vullen
		a['first'] = 10;
		a['second'] = 20;
		a['third'] = 30;
		//transformeer het in een hash
		var h = $H(a);
		alert(h.toQueryString()); //displays: first=10&second=20&third=30
	}

</script>
			

toc

Gebruik van de $R() functie

De $R() functie is eenvoudig weg een verkorte schrijfwijze voor new ObjectRange(lowerBound, upperBound, excludeBounds).

Ga naar de ObjectRange class documentatie voor een complete uitleg van deze class. Ondertussen, laten we kijken naar een eenvoudig voorbeeld dat ook het gebruik van iterators met behulp van deeach methode laat zien. Meer over die methode kan gevonden worden in de Enumerable object documentatie.

<script>
	function demoDollar_R(){
		var range = $R(10, 20, false);
		range.each(function(value, index){
			alert(value);
		});
	}

</script>

<input type="button" value="Sample Count" onclick="demoDollar_R();" >
			

toc

Gebruik van de Try.these() functie

De Try.these() functie maakt het eenvoudig wanneer je, ahum, verschillende functie aanroepen probeert tot een van hen werkt. Het neemt een aantal functies als argument en roept ze een voor een aan, in volgorde, tot een van hen werkt en retourneert het resultaat van de functie aanroep die succesvol was.

De functie xmlNode.text, in het voorbeeld hieronder werkt in sommige browsers en xmlNode.textContent werkt in andere browsers. Door gebruik te maken van de Try.these() functie kunnen we diegene die werkt retourneren.

<script>
function getXmlNodeValue(xmlNode){
	return Try.these(
		function() {return xmlNode.text;},
		function() {return xmlNode.textContent;}
		);
}
</script>
			

toc

Het Ajax object

De nuttige functies zoals hierboven genoemd zijn leuk, maar laten we er niet omheen draaien, ze zijn niet het meest geavanceerd, of wel soms? Je had het waarschijnlijk zelf kunnen doen en misschien heb je wel vergelijkbare functies in je eigen scripts. Maar deze functies zijn slechts het topje van de ijsberg.

Ik ben er zeker van dat je interesse in prototype.js grotendeels is gedreven door de AJAX mogelijkheden. Dus laten we uitleggen hoe de bibliotheek je leven een stuk eenvoudiger maakt wanneer je AJAX logica nodig hebt.

Het Ajax object is een voor gedefinieerd object, gecreëerd om de lastige code af te schermen en vereenvoudigen, die nodig is bij het schrijven van AJAX functionaliteit. Het object bevat een aantal classen die geencapsuleerde AJAX logica bevatten. Laten we sommige van deze bekijken.

toc

Gebruik van de Ajax.Request class

Als je geen hulp bibliotheek gebruikt, schrijf je waarschijnlijk veel code om een XMLHttpRequest object te creëren en om vervolgens de voortgang asynchroon bij te houden, verwerken en de response er uithalen en verwerken. En beschouw jezelf gelukkig als je niet meer dat één type browser hoeft te ondersteunen.

Om AJAX functionaliteit te ondersteunen, bevat de bibliotheek de Ajax.Request class.

Laten we zeggen dat je een applicatie hebt die kan communiceren met de server via de url http://yoursever/app/get_sales?empID=1234&year=1998, welke een XML respons geeft zoals het volgende.

<?xml version="1.0" encoding="utf-8" ?>
<ajax-response>
	<response type="object" id="productDetails">
		<monthly-sales>
			<employee-sales>
				<employee-id>1234</employee-id>
				<year-month>1998-01</year-month>
				<sales>$8,115.36</sales>
			</employee-sales>
			<employee-sales>
				<employee-id>1234</employee-id>
				<year-month>1998-02</year-month>
				<sales>$11,147.51</sales>
			</employee-sales>
		</monthly-sales>
	</response>
</ajax-response>
			

Communiceren met de server om deze XML te ontvangen is redelijk simpel gebruik makend van een Ajax.Request object. Het voorbeeld hieronder laat zien hoe dat gedaan kan worden.

<script>
	function searchSales()
	{
		var empID = $F('lstEmployees');
		var y = $F('lstYears');
		var url = 'http://yoursever/app/get_sales';
		var pars = 'empID=' + empID + '&year=' + y;
		
		var myAjax = new Ajax.Request(
			url,
			{
				method: 'get',
				parameters: pars,
				onComplete: showResponse
			});
		
	}

	function showResponse(originalRequest)
	{
		//plaats ontvangen XML in een textarea
		$('result').value = originalRequest.responseText;
	}
</script>

<select id="lstEmployees" size="10" onchange="searchSales()">
	<option value="5">Buchanan, Steven</option>
	<option value="8">Callahan, Laura</option>
	<option value="1">Davolio, Nancy</option>
</select>
<select id="lstYears" size="3" onchange="searchSales()">
	<option selected="selected" value="1996">1996</option>
	<option value="1997">1997</option>
	<option value="1998">1998</option>
</select>
<br/><textarea id=result cols=60 rows=10 ></textarea>
			

Zie je het tweede argument dat wordt doorgeven aan de constructor van het Ajax.Request object? Het argument {methode: 'get', argumenten: pars, onComplete: showResponse} representeert een anoniem object in letterlijke notatie. Wat dit betekent is dat we een object welke een eigenschap method heeft die de string 'get' bevat, een andere eigenschap genaamd parameters die de querystring van het HTTP verzoek bevat en een onComplete variabele/methode die de functie showResponse bevat.

Er zijn nog een paar andere eigenschappen die je kunt definiëren en gebruiken in dit object, zoals asynchronous, welke true of false kan zijn en bepaalt of de AJAX aanroep naar de server asynchroon is (de standaard waarde is true.)

Dit argument bepaalt de opties voor de AJAX aanroep. In ons voorbeeld roepen we de url in het eerste argument aan via een HTTP GET commando, geven de querystring omvat in de variabele pars door en het Ajax.Request object zal de showResponse functie aanroepen wanneer het verzoek klaar is en respons heeft ontvangen.

Zoals je misschien weet rapporteert de XMLHttpRequest de voortgang gedurende de HTTP aanroep. Deze voortgang kan vier verschillende stadia bevatten: Laden, Geladen, Interactief of Uitgevoerd. Je kunt het Ajax.Request object een eigen functie aan laten roepen in elk van deze stadia, waarbij Uitgevoerd de meest gebruikelijk is. Om de functie aan te melden bij het object, simpelweg lever een variabele/methode genaamd onXXXXX in de aanroep opties, zoals onComplete uit ons voorbeeld. De functie die je doorgeeft wordt aangeroepen met twee argumenten, het eerste is het XMLHttpRequest (afgekort XHR) object zelf is. Het tweede argument zal het berekende X-JSON respons HTTP header (als die aanwezig is) zijn. Je kunt dan het XHR object gebruiken om de geretourneerde data te verkrijgen en zo nodig de status variabele te controleren, wat de HTTP resultaat code van de aanroep zal bevatten. De X-JSON header is handig als je een script of JSON geformateerde data wilt retourneren.

Twee andere interessante opties kunnen gebruikt worden om de resultaten te verwerken. We kunnen de onSuccess optie specificeren als een functie die moet worden aangeroepen wanneer de AJAX aanroep zonder fouten is uitgevoerd en, omgekeerd, de onFailure optie kan een functie zijn die wordt aangeroepen wanneer een server fout optreed. Precies zoals de onXXXXX opties zullen deze twee ook aangeroepen worden met als argument de XHR van de AJAX aanroep en de berekende X-JSON header.

Er is ook een nieuwe vorm van event callback afhandeling beschikbaar. Als je code hebt die altijd uitgevoerd moet worden voor een specifiek event, onafhankelijk van het AJAX object dat de aanroep veroorzaakte, dan kun je hiervoor het nieuwe object Ajax.Responders gebruiken.

Veronderstel je wilt een visuele indicatie dat een AJAX roep bezig is, zoals een bewegend icon of iets van die aard. Je kunt twee globale event managers gebruiken om je te helpen, één om het icon te laten zien wanneer de eerste aanroep gestart is en een ander om het icon te verbergen wanneer de laatste klaar is. Zie het voorbeeld hieronder.

<script>
	var myGlobalHandlers = {
		onCreate: function(){
			Element.show('systemWorking');
		},

		onComplete: function() {
			if(Ajax.activeRequestCount == 0){
				Element.hide('systemWorking');
			}
		}
	};

	Ajax.Responders.register(myGlobalHandlers);
</script>

<div id='systemWorking'><img src='spinner.gif'>Laden...</div>
	

Voor een uitgebreidere verklaring, zie de Ajax.Request referentie en de opties referentie.

toc

Gebruik van de Ajax.Updater class

Als je een server eindpunt hebt die reeds geformatteerde HTML terug kan geven, maakt de bibliotheek het met de Ajax.Updater class eenvoudiger voor je. Met deze informeer je gewoon welk element moet worden gevuld met de HTML die wordt terug gegeven van de AJAX aanroep. Een voorbeeld spreekt beter dan ik kan schrijven.

<script>
	function getHTML()
	{
		var url = 'http://yourserver/app/getSomeHTML';
		var pars = 'someParameter=ABC';
		
		var myAjax = new Ajax.Updater(
			'placeholder',
			url,
			{
				method: 'get',
				parameters: pars
			});
		
	}
</script>

<input type="button" value="GetHtml" onclick="getHTML()">
<div id="placeholder"></div>
			

Zoals je kunt zien is de code redelijk vergelijkbaar met het vorige voorbeeld, met de uitzondering van de onComplete functie en het element id dat wordt doorgegeven in de constructor. Laten we de code beetje bij beetje veranderen om te illustreren hoe het mogelijk is om server fouten af te handelen op de client.

We zullen meer opties aan de aanroep toevoegen en een functie voor je specificeren om de fout condities eenvoudiger op te vangen. Dit is gedaan gebruik makend van de onFailure optie. We zullen ook specificeren dat de placeholder alleen wordt gevuld in het geval van een succesvolle actie. Om dit te bereiken zullen de eerste parameter veranderen van een simpel element id naar een object met twee variabelen, success (te gebruiken wanneer alles goed gaat) en failure (te gebruiken wanneer de dingen fout gaan.) We zullen de failure variabele in ons voorbeeld niet gebruiken, alleen de reportError functie in de onFailure optie.

<script>
	function getHTML()
	{
		var url = 'http://yourserver/app/getSomeHTML';
		var pars = 'someParameter=ABC';
		
		var myAjax = new Ajax.Updater(
					{success: 'placeholder'},
					url,
					{
						method: 'get',
						parameters: pars,
						onFailure: reportError
					});
		
	}

	function reportError(request)
	{
		alert('Sorry. Er was een fout.');
	}
</script>

<input type="button" value="GetHtml" onclick="getHTML()">
<div id="placeholder"></div>
			

Als je server logica JavaScript retourneert, samen met HTML markup kan het Ajax.Updater object de JavaScript code evalueren. Om het object zover te krijgen dat het de reactie behandelt als JavaScript voeg simpelweg evalScripts: true; toe aan de lijst van eigenschapen in het laatste argument van de object constructor. Maar er is een voorbehoud. Deze script blokken zullen niet worden toegevoegd aan de scripts van de pagina. Zoals de optie naam evalScripts suggereert worden de scripts uitgevoerd. Wat is het verschil, zul je je afvragen? Later we aannemen dat de aangevraagde URL iets als het volgende retourneert:

<script language="javascript" type="text/javascript">
	function zegHi(){
		alert('Hi');
	}
</script>

<input type="button" value="Klik Mij" onclick="zegHi()">
			

In het geval dat je het geprobeerd hebt, weet je dat het niet werkt. Deze is dat het script blok uitgevoerd wordt, en een script zoals het bovenstaande uitvoeren zal geen functie genaamd zegHicreëren. Het doet niets. Om een functie te creëren moeten we ons script aan passen om de functie te creëren. Zie hieronder.

<script language="javascript" type="text/javascript">
	zegHi = function(){
		alert('Hi');
	};
</script>

<input type="button" value="Klik Mij" onclick="zegHi()">
			

Merk op dat in het voorgaande voorbeeld we niet het gereserveerde woord var gebruiken om de variabele te declareren. Dit zou een functie object gecreëerd hebben dat lokaal voor het script blok zou zijn (In ieder geval in IE). Zonder het gereserveerde woord var is de functies scoop het window, wat onze bedoeling is.

Voor een uitgebreidere verklaring, zie de Ajax.Updater referentie en de opties referentie.

toc

Wat zijn al die "?" en velden?

En toen schreef je een paar snelle test scripts, met behulp van het Ajax.Updater object om je pagina's aan te passen en het werkte allemaal prima. Het leven was goed totdat je je scripts op echte data toepaste. Plotseling zaten er in de aangepaste tekst vraagtekens en niet leesbare karakters waar niet Engelse karakters hadden moeten staan.

In eerste instantie verdenk je prototype.js, natuurlijk, het leek ook te mooi om waar te zijn. Maar geef de bibliotheek nog niet de schuld. Vraag jezelf af hoeveel je werkelijk begrijpt van karakterencoding, code pagina's en hoe de browers deze behandeld. Als je een positief antwoord kunt geven dan wed ik dat je op de weg bent om het probleem op te lossen. Als je net als de andere 80% (een andere nutteloze, onnauwkeurige inschatting van de auteur) van de web ontwikkelaars die karakter encoding als vanzelfsprekend beschouwen, blijf lezen.s

Ik zal niet pretenderen een authoriteit te zijn op dit gebied, danwel dat ik een volledige uitleg geef over hoe dit het beste kan worden gebruikt. In plaats daarvan ga ik direct door naar de oplossing die ik gebruik en geef je hints over hoe je dit in je eigen situatie kunt toepassen.

Simpel gezegd, de oplossing komt voort uit het volgende uitdrukking: Lever wat de browser verwacht dat je levert. Als je een pagina gaat vernieuwen met tekst die Unicode/UTF-8 karakters bevat dan moet je er voor zorgen dat je browser daar van op de hoogte is.

Laten we starten met een simpel geval waarin je een tekstpagina van een statisch HTML bestand die op je server staat aanpast. Wanneer je dit bestand aanmaakt, afhankelijk van je teksteditor die je gebruikt, is het zeer goed mogelijk dat het bestand als ANSI (of beter gezegd, niet-Unicode) formaat wordt opgeslagen. Dit is standaard voor veel teksteditors, in het bijzonder voor broncode editors omdat de bestandsgrootte kleiner zal zijn en het tamelijk ongebruikelijk is om broncode te bewerken die Unicode karakters bevat.

Stel je hebt het volgende bestand genaamd statische-inhoud.html op je server. Je hebt dit bestand bewaart in ANSI formaat.

<div>
	Hallo daar, José. Yo no hablo español.
</div>

Je hoofdpagina vernieuwt zichzelf met iets als het fragment hieronder.

<script>
	function vernieuwMetBestand(){
		var url = 'statische-inhoud.html';
		var pars = '';
		var myAjax = new Ajax.Updater(
				'placeholder', url,
				{method: 'get', parameters: pars});
	}
</script>
<div id="placeholder">(dit wordt vervangen)</div>
<input id="btn" value="Test met Statische Bestand"
                 onclick="vernieuwMetBestand()" type="button"/>

Wanneer je op de button klikt wordt de statische bestand opgehaald, maar de niet nederlandse karakters zijn vervangem door vraagtekens of een ander symbool. De getoonde tekst zal er uit zien als "Hallo daar, Jos?. Yo no hablo espa?ol." of "Hallo daar, Jos?Yo no hablo espa?", afhankelijk van je browser.

In dit geval is de oplossing eenvoudig, sla simpelweg de statische file in het juiste formaat op. Laten we het in UTF-8 opslaan en het script opnieuw draaien (elke behoorlijke teksteditor zal een optie in de Opslaan Als dialoog hebbben.) Je zou nu de juiste tekst moeten zien (Zo niet, dan zou het kunnen zijn dat je browser de oude versie heeft bewaard. Probeer een andere bestandsnaam.)

Als de HTML die je presenteert niet statisch is, maar dynamische gegenereerd wordt door een of ander framework (zoals ASP.NET, PHP of zelf Perl) zorg er dan voor dat de code die voor de generatie van de HTML zorgt de tekst produceert met de juiste encoding en code pagina's en in de HTTP antwoord headers een header invoegt die dit verzorgt. Elk platform heeft een verschillende manier om dit te bereiken, maar ze zijn zeer vergelijkbaar..

Bijvoorbeeld, in ASP.NET kun je dit in je globale web.config zetten en de standaard configuratie is goed genoeg om dit probleem te vermijden in de eerste plaats. De volgende sectie zou je al in je web.config moeten hebben staan.

<globalization requestEncoding="utf-8" responseEncoding="utf-8" />

In klassiek ASP 3.0 kun je dit probleem met de volgende code oplossen.

Response.CodePage = 65001 Response.CharSet = "utf-8" 

In PHP ziet de syntaxis van een antwoord header er als volgt uit.

<?php header('Content-Type: text/html; charset=utf-8'); ?>

In elke geval, je ultieme doel is dat de volgende HTTP header wordt verstuurd met je antwoord.

Content-Type: text/html; charset=utf-8 

We gebruikten UTF-8 in ons voorbeeld hierboven, maar als je een andere instelling nodig hebt kun je dat eenvoudig veranderen.

Enumeratie... Wau!, Karamba! Wahoo!

We zijn allemaal bekend met for loops. Zoals je wel weet, creëer zelf een array, vul het met elementen van het zelfde type, creëer een loop (for, foreach, while, repeat, etc,) benader elk element sequentieel, bij z'n numerieke index en doe iets met het element.

Wanneer je er over na denkt, bijna elke keer dat je een array in je code hebt betekend dit waarschijnlijk dat je het array vroeger of later in een loop gebruikt. Zou het niet fraai zijn als het array object niet meer functionaliteit zou hebben om te gaan met deze iteraties? Ja, dat klopt en veel programmeer talen ondersteunen zulke functionaliteit in hun array's or gelijkwaardige structuren (zoals collecties en lijsten).

Nou, het blijkt dat prototype.js ons het Enumerable object geeft, waarin een overvloedig aantal handigheidjes voor ons zijn implementeerd om data te doorlopen. De prototype.js bibliotheek gaat een stap verder en breidt de Array class uit met alle methoden van Enumerable.

toc

Loops, Ruby-stijl

Als je in standaard javascript sequentieel de elementen van een array wilt afbeelden, zou je heel goed zoiets als het dit kunnen schrijven.

<script>
	function toonLijst(){
		var simpsons = ['Homer', 'Marge', 'Lisa', 'Bart', 'Maggie'];
		for(i=0;i<simpsons.length;i++){
			alert(simpsons[i]);
		}
	}

</script>

<input type="button" value="Toon Lijst" onclick="toonLijst();" />
			

Met onze nieuwe beste vriend, prototype.js, kunnen we deze loop als volgt herschrijven.

	function toonLijst(){
		var simpsons = ['Homer', 'Marge', 'Lisa', 'Bart', 'Maggie'];
		simpsons.each( function(familieLid){
			alert(familieLid);
		});
	}
			

Je zult waarschijnlijk denken "Nou en...gewoon een vreemde syntaxis voor hetzelfde." Nou, in het bovenstaande voorbeeld, ja, daar gebeurt niets wereld schokkendst. Tenslotte, er is niet veel om veranderd te worden in zo'n opvallend simpel voorbeeld. Maar niettemin, blijf lezen.

Voordat we verder gaan. Zie je de functie die is doorgeven als een argument aan de each methode? Laten we beginnnen het te referen als iterator functie.

toc

Je array's op steroïden

Zoals we hierboven vermeld hebben, is het erg gewoon dat alle elementen in je array van het zelfde type zijn, met dezelfde proporties en methoden. Laten we kijken hoe je met onze nieuwe opgepepte array's voordeel kunt hebben van de iterator functies.

Hier is hoe je een element volgens criteria vindt.

<script>
	function vindWerknemerViaId(wrkn_id){
		var listBox = $('lstWerknemers')
		var opties = listBox.getElementsByTagName('option');
		opties = $A(opties);
		var opt = opties.find( function(werknemer){
			return (werknemer.value == wrkn_id);
		});
		alert(opt.innerHTML); // toon de naam van de werknemer
	}
</script>

<select id="lstWerknemers" size="10" >
	<option value="5">Buchanan, Steven</option>
	<option value="8">Callahan, Laura</option>
	<option value="1">Davolio, Nancy</option>
</select>

<input type="button" value="Vind Laura" onclick="vindWerknemerViaId(8);" />
			

Laten we nu een tandje bij schakelen. Kijk hoe we items uit array's kunnen filteren en vervolgens precies het gewenste onderdeel van elk element ophalen.

<script>
	function toonLokaleLinks(paragraaf){
		paragraaf = $(paragraaf);
		var links = $A(paragraaf.getElementsByTagName('a'));
		//vind links die niet starten met 'http'
		var localLinks = links.findAll( function(link){
			//wij nemen hier aan dat externe links
			// geen '#' in hun url hebben.
			return link.href.indexOf('#') >= 0;
		});
		//nu de teksten van de link
		var teksten = lokaleLinks.pluck('innerHTML');
		//haal ze op al een enkele string
		var result = teksten.inspect();
		alert(result);
	}

</script>
<p id="eenTekst">
	Deze <a href="http://othersite.com/page.html">tekst</a> heeft
	<a href="#lokaalAnker">veel</a>
	<a href="#anderAnker">links</a>. Sommige zijn
	<a href="http://wherever.com/page.html">extern</a>
	en sommige zijn <a href="#eenAnker">lokaal</a>
</p>
<input type=button value="Vind Lokale Links" onclick="toonLokaleLinks('eenTekst')"/>
			

Het vergt slechts een beetje oefening om volledig verslaaft te raken aan deze syntax. Kijk eens naar de Enumerable en Array referentie voor alle beschikbare functies.

toc


Referentie voor prototype.js

Uitbreidingen op JavaScript classen

Een van de manieren waarop de prototype.js bibliotheek functionaliteit toegevoegd is door bestaande Javascript classen uit te breiden.

toc

Uitbreidingen voor de Object class

MethodeSoortArgumentenOmschrijving
extend(destination, source)staticdestination: een object, source: een object Verschaft een manier om inheritance te implementeren door alle variabelen en methoden van de source naar de destination te kopiëren.
inspect(targetObj)statictargetObj: een object Retourneert een voor mensen leesbare representatie van targetObj. Als het gegeven object geen inspect instantie methode heeft wordt standaard het resultaat terug gegeven dat een toString zou gegeven.
keys(targetObj)statictargetObj: een object Retourneert een Array met de namen van alle variabelen en methoden van een gegeven object.
values(targetObj)statictargetObj: een object Retourneert een Array met de waarden van alle variabelen en methoden van een gegeven object.
clone(targetObj)statictargetObj: een object Retourneert een kopie van targetObj.

toc

Uitbreidingen voor de Number class

MethodeSoortArgumentenOmschrijving
toColorPart()instance(geen) Retourneert de hexadecimale representatie van het getal. Handig om de RGB componenten van een kleur om te zetten in een HTML representatie.
succ()instance(geen) Retourneert het volgende getal. Deze functie wordt gebruikt in scenario's die herhaling impliceren.
times(iterator)instanceiterator: een functie object conform aan function(value, index) Roept de iterator function herhaaldelijk aan en geeft de argumenten value en indexdoor, welke de huidige waarde in de iteratie bevatten, respectievelijk de huidige index.

Het volgende voorbeeld zal de alert meldingenbox van 0 tot 9 laten zien.

<script>
	function demoTimes(){
		var n = 10;
		n.times(function(value, index){
			alert(index);
		});
		/******************************
		 * je had ook kunnen gebruiken:
		 *           (10).times( .... );
		 ******************************/
	}

</script>

<input type="button" value="Test Number.times()" onclick="demoTimes()"/>
			

toc

Uitbreidingen voor de function class

MethodeSoortArgumentenOmschrijving
bind(object [, arg1 [, arg2 [...]]])instanceobject: Het object dat eigenaar is van de methode. Retourneert een instantie van de functie die behoort bij de functie(=methode) van het eigenaar object. De functie zal dezelfde argumenten hebben als de originele argumenten (arg1, arg2, ... etc).
bindAsEventListener(object [, arg1 [, arg2 [...]]]) instanceobject: Het object dat eigenaar is van de methode. Retourneert een instantie van de functie die behoort bij de functie(=methode) van het eigenaar object. De functie zal het huidige event object als argument hebben optioneel gevolgd door andere argumenten.

Laten we een van deze uitbreidingen in actie zien.

<input type="checkbox" id="mijnChk" value="1"/> Test?
<script>
	//declareren van de class
	var CheckboxBewaker = Class.create();

	//definieren van de rest van de class implementatie
	CheckboxBewaker.prototype = {

	   initialize: function(chkBox, bericht) {
			this.chkBox = $(chkBox);
			this.bericht = bericht;
			//toekennen van onze methode aan het event
			
			this.chkBox.onclick =
			   this.toonBericht.bindAsEventListener(this, ' van checkbox');
			
	   },

	   toonBericht: function(evt, extraInfo) {
		  alert(this.bericht + ' (' + evt.type + ')' + extraInfo);
	   }
	};


	var bewaker = new CheckboxBewaker('mijnChk', 'Verandert');
</script>

			

toc

Uitbreidingen voor de String class

MethodeSoortArgumentenOmschrijving
camelize()instance(geen) Converteert een koppelteken-gescheiden-string in een camelCaseString. Deze functie is bijvoorbeeld handig wanneer code for stijl variabelen wordt geschreven.
capitalize()instance(none) Converteert de eerste letter in een hoofdletter.
dasherize()instance(none) Vervangt onderlijning '_' met een streep '-'.
escapeHTML()instance(geen) Retourneert de string met alle HTML markup karakters correct 'escaped'.
evalScripts()instance(geen) Voert elk <script /> blok dat in de string werd gevonden uit.
extractScripts()instance(geen) Retourneert een Array object met daarin alle <script /> blokken die gevonden zijn in de string.
gsub(pattern, replacement)instance pattern: ``.. replacement: eevoudige string, template string, of Function(strings[]) die de vervanging uitvoert. Retourneert een string die het resultaat is van het vinden (of vergelijken) van de patroon string (of reguliere expressie) in de huidige string en vervangt het met de 'replacement' string of het resultaat van de functie die is meegegeven. welke een array met de strings die overeenkomen met het patroon, inclusief eventuele reguliere expressie groepering. wanneer de vervanging een string is, kan het speciale template tekens zoals #{n} bevatten, waar n de index van een groepering van reguliere expressies is. #{0} zal worden vervangen door de gehele match, #{1} is de eerste groepering, #{2} de tweede, enzovoort.
parseQuery()instance(geen) Zelfde als toQueryParams().
scan(pattern, replacement)instance pattern: string of reguliere expressie die gezocht wordt. replacement: Function(strings[]) om te itereren over de passende patronen. Voorziet in een manier om te itereren over de passende patronen in de string en verwerkt ze. Het patroon argument kan een string of een RegExp zijn, maar een RexExp is overduidelijk bruikbaarder. Vergelijkbaar kan het replacement argument een string of een functie zijn, maar waarschijnlijk heeft het alleen zin om een functie door te geven om iets bruikbaars te produceren.
strip()instance(none) Retourneert een string waarvan de spaties aan het begin en het einde zijn verwijderd.
stripScripts()instance(geen) Retourneert de string met alle <script /> blokken verwijderd.
stripTags()instance(geen) Retourneert de string met alle HTML of XML tags verwijderd.
sub(pattern, replacement [, count])instance pattern: string of reguliere expressie die gezocht wordt. replacement: string of Function(strings[]) om de vervanging uit te voeren. count: aantal malen dat de vervanging moet worden uitgevoerd - standaard is 1. Heel vergelijkbaar meet gsub, alleen voert een gelimiteerd aantal vervangingen uit, gespecificeerd bij de count parameter.
toArray()instance(geen) Splits een string in een Array van zijn karakters.
toQueryParams()instance(geen) Splits een querystring in een associatief Array, geïndexeerd met de parameternaam (vergelijkbaar met een hash).
truncate(length [, truncation])instance length: maximum lengte van de resultaat string. truncation: string die gebruikt wordt om de laatste karakters van de resultaat string met te vervangen - standard is dit '...' Gebruikt om een string met maximum lengte te produceren waarvan de lengte bekend is. In het geval een string ingekort die te worden om een maximum lengte te handhaven, wordt de opgegeven tekst gebruikt om de paar laatste karakters te vervangen. (bv.: var s='123456790'; alert(s.truncate(5)); //toont '12...' )
underscore()instance(none) Converteert een CamelizedStringValue in een underscore_formatted_string. (bv.: var s='Namespace::MyClass123'; alert(s.underscore()); //toont 'namespace/my_class123' ). Deze functie lijkt gericht te zijn op het ondersteunen van Ruby on Rails funtionaliteit.
unescapeHTML()instance(geen) Het omgekeerde van escapeHTML()

Alleen al door naar het indrukwekkende aantal nieuwe methoden te kijken is het duidelijk dat de String class een belangrijke rol speelt. Het voorbeeld hieronder toont veel van deze uitbreidingen.

<script>

</script>
			

toc

Uitbreidingen voor de Array class

Om te beginnen is Array één van de uitbreidingen van Enumerable. Dus alle handige methoden van het Enumerable object zijn ook beschikbaar. Verder zijn de methoden zoals hieronder worden opgesomd ook geïmplementeerd.

MethodeSoortArgumentenOmschrijving
clear()instance(geen) Wist de inhoud van het array and retourneert zichzelf.
compact()instance(geen) Retourneert het array zonder de elementen die null of undefined zijn. Deze methode veranderd niet het array zelf.
first()instance(geen) Retourneert het eerste element van een array.
flatten()instance(geen) Retourneert een platte, één dimensionale versie van het array. Het plat 'slaan' gebeurt door van elk array de elementen te vinden die ook array's zijn en hun elementen recursief in te voegen in het geretourneerde array.
indexOf(value)instance value: waar je naar op zoek bent. Retourneert de positie van de opgegeven value als het gevonden wordt in het array, gerekend vanaf nul. Retourneert -1 als value niet gevonden wordt.
inspect()instance(geen) Herschreven om een mooi geformatteerde string representatie van het array met zijn elementen te retourneren.
last()instance(geen) Retourneert het laatste element van een array.
reverse([applyToSelf])instance applyToSelf: geeft aan of het array zelf moet worden omgekeerd. Retourneert het array in omgekeerde volgorde. Als geen argument wordt gegeven of het argument is true wordt het array zelf omgedraaid. Is het argument false dan blijft het array zelf onveranderd.
shift()instance(geen) Retourneert het eerste element en verwijderd het van het array, daarmee wordt de lengte van het array met 1 verminderd.
without(value1 [, value2 [, .. valueN]])instance value1 ... valueN: waarden die uitgesloten moeten worden indien ze aanwezig zijn in het array. Retourneert het array exclusief de elementen die aanwezig zijn in de lijst van argumenten. Deze methode veranderd niet het megegeven array.

Laten we een aantal van deze methoden in actie zien.

<script>
var A = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'];
alert(A.inspect()); // "['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h']"
var B = A.without('e','f');
alert(B.inspect()); // "['a', 'b', 'c', 'd', 'g', 'h']"
alert(A.inspect()); // veranderde A niet: "['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h']"
A.push(null);
A.push('x');
A.push(null);
A.push('y');
alert(A.inspect()); // "['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', null, 'x', null, 'y']"
A = A.compact();
alert(A.inspect()); // "['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'x', 'y']"
var e = A.shift();
alert(e); // "a"
alert(A.inspect()); // "['b', 'c', 'd', 'e', 'f', 'g', 'h', 'x', 'y']"
alert(A.indexOf('c')); // 1
alert(A.first()); // 'b'
alert(A.last()); // 'y'
A.clear();
alert(A.inspect()); // "[]"
A = ['a', 'b', 'c'];
B = A.reverse(false);
alert(B.inspect()); // "['c', 'b', 'a']"
alert(A.inspect()); // A niet veranderd: "['a', 'b', 'c']"
A.reverse(true);
alert(A.inspect()); // "['c', 'b', 'a']"
A = ['a', 'b',  ['c1','c2','c3'] , 'd',  ['e1','e2']  ];
B = A.flatten();
alert(B.inspect()); // "['a','b','c1','c2','c3','d','e1','e2']"
alert(A.inspect()); // onveranderd: "['a','b',['c1','c2','c3'],'d',['e1','e2']]"
</script>
			

toc

Uitbreidingen voor het document DOM object

MethodeSoortArgumentenOmschrijving
getElementsByClassName(className [, parentElement])instance className: naam van een CSS class geassocieerd met de elementen, parentElement: object of id van het element dat de elementen bevat die worden ontvangen. Retourneert alle elementen die geassocieerd zijn met een gegeven CSS class naam. Als geen parentElement id wordt gegeven wordt de hele document body doorzocht.

toc

Uitbreidingen voor het Event object

EigenschapTypeOmschrijving
KEY_BACKSPACENumber 8: Constant. Code voor de Backspace toets.
KEY_TABNumber 9: Constant. Code voor de Tab toets.
KEY_RETURNNumber 13: Constant. Code voor de Return/Enter toets.
KEY_ESCNumber 27: Constant. Code voor de Esc toets.
KEY_LEFTNumber 37: Constant. Code voor de pijl-naar-linkstoets.
KEY_UPNumber 38: Constant. Code voor de pijl-naar-boven toets.
KEY_RIGHTNumber 39: Constant. Code voor de pijl-naar-rechts toets.
KEY_DOWNNumber 40: Constant. Code voor de pijl-naar-beneden toets.
KEY_DELETENumber 46: Constant. Code voor de Delete toets.
observers:Array Lijst van bewaarde observers. Onderdeel van de interne implementatie details van het object.

 

MethodeSoortArgumentenOmschrijving
element(event)static event: een Event object Retourneert het element dat het event opstarte.
isLeftClick(event)static event: een Event object Retourneert true als de linker muisknop ingedrukt werd.
pointerX(event)static event: een Event object Retourneert de x-coördinaat waar de muis cursor zich bevindt op de pagina .
pointerY(event)static event: een Event object Retourneert de y-coördinaat waar de muis cursor zich bevindt op de pagina .
stop(event)static event: een Event object Gebruik deze functie om het standaard gedrag van een event af te breken en zijn verdere werking op te schorten.
findElement(event, tagName)static event: een Event object, tagName: naam van de gewenste tag. Doorloopt de DOM boom naar boven lopend, zoekend naar het eerste element met de gegeven tag naam, startende bij het element dat het event opstarte.
observe(element, name, observer, useCapture)static element: object of id, name: event naam (zoals 'click', 'load', etc), observer: functie om het event af te handelen, useCapture: als true, verwerkt het event in de capture fase en als false in de bubbling fase. Voegt een functie om event's af te handelen aan een event.
stopObserving(element, name, observer, useCapture)static element: object of id, name: event naam (like 'click'), observer: functie om het event af te handelen, useCapture: als true, verwerkt het event in de capture fase en als false in de bubbling fase. Verwijderd een functie om event's af te handelen van een event.
_observeAndCache(element, name, observer, useCapture)static   Interne methode, vergeet deze maar.
unloadCache()static (geen) Interne methode, vergeet deze maar. Verwijdert alle bewaarde observers uit het geheugen.

Laten we zien hoe dit object te gebruiken is om een functie aan van het load event van het window object toe te voegen.

<script>
	Event.observe(window, 'load', page_loaded, false);
	function page_loaded(evt) {
	  Event.observe('parent_node', 'click', item_clicked, false);
	}

	function item_clicked(evt){
		var child = Event.element(evt);
		alert('The child node with id=' + child.id + ' was clicked');
		Event.stop(evt); //vermijd een andere aanroep gerelateerd aan 'parent_node' zelf
	}
</script>
...
<div id="parent_node">
	<div id="child1">Eerste</div>
	<div id="child2">Tweede</div>
	<div id="child3">Derde</div>
</div>
			

toc

Nieuwe objecten en classen gedefinieerd door prototype.js

Een andere manier waarom de bibliotheek je helpt is door het leveren van vele object implementaties zowel ter ondersteuning van object georiënteerde ontwerpen als voor algemen functionaliteit.

toc

Het PeriodicalExecuter object

Dit object bevat de logica om een geven functie herhaaldelijk via een tijdklok aan te roepen, op een aangegeven interval.

MethodeSoortArgumentenOmschrijving
[ctor](callback, interval)constructorcallback: een parameterloze functie, interval: getal in seconden. Creëert een instantie van dit object dat de functie herhaaldelijk zal aanroepen.
registerCallback() instance(none) Reset de tijdklok.
stop() instance(none) Stopt de tijdklok waarmee wordt vermeden dat de callback wordt uitgevoerd.
onTimerEvent() instance(none) Dit is de methode die wordt aangeroepen door de tijdklok, welke vervolgens de callback methode zal aanroepen met het object zelf als argument

 

EigenschapTypeOmschrijving
callback Function(objExecuter)De functie die aangeroepen moet worden objExecuter: de PeriodcalExecuter die de aanroep zal doen.
timerTimer Een handle naar het onderliggende tijdklok object verantwoordelijk voor het herhaalbaar aanroepen van de callback methode./td>
frequencyNumber Dit is het interval in seconden.
currentlyExecuting BooleanGeeft aan of de functie aanroep bezig is.

toc

Het Prototype object

Het Prototype object heeft geen enkele belangrijke rol, anders dan de versie van de gebruikte bibliotheek te declareren.

EigenschapTypeOmschrijving
VersionStringDe versie van de bibliotheek.
emptyfunctionfunction()Een leeg functie object
Kfunction(obj)Een functie object dat slechts de gegeven parameter afdrukt.
ScriptFragmentString Een reguliere expressie om scripts te identificeren.

toc

Het Enumerable object

Het Enumerable object stelt men in staat om elegantere code te schijven om items in een lijst-achtige structuur te doorlopen.

Veel andere objecten zijn gebaseerd op het Enumerable object om gebruik te maken van zijn bruikbare interface.

MethodeSoortArgumentenOmschrijving
each(iterator)instance iterator: een functie object conform aan function(value, index) Past de gegeven iterator functie toe op elk element in de lijst en geeft in het eerste argument door het element door en de index van het element in het tweede argument.
all([iterator])instance iterator: een functie object conform aan function(value, index), optioneel Deze functie is een manier om een gehele verzameling van waarden te testen met de gegeven functie. all zal false terug geven als de iterator functie true terug geeft voor alle elementen. Anders zal het false terug geven. Als geen iterator wordt gegeven, de zal de test zijn of het element zelf herleid tot true. Je kunt het simpelweg lezen als "controleer of alle elementen voor de test slagen."
any([iterator])instance iterator: een functie object conform aan function(value, index), optioneel. Deze functie is een manier om een gehele verzameling van waarden te testen met de gegeven functie. any zal true terug geven als de iterator functie true terug geeft voor tenminste een van de elementen. Anders zal het false terug geven. Als geen iterator wordt gegeven, zal de test zijn of het element zelf herleid tot true of null. Je kunt het simpelweg lezen als "controleer of enig element voor de test slaagt."
collect(iterator)instance iterator: een functie object conform aan function(value, index) Roept de iterator functie voor elke element in de verzameling en retourneert elk resultaat in een Array, een resultaat voor elk element in de verzameling, in dezelfde volgorde.
detect(iterator)instance iterator: een functie object conform aan function(value, index) Roept de iterator functie aan voor elk element in de verzameling en retourneert het eerste element waarvan de iterator functie true opleverde (of, nauwkeuriger, niet false.) Als geen elementen true retourneert, dan retourneert detect null.
entries()instance (geen) Zelfde als toArray().
find(iterator)instance iterator: een functie object conform aan function(value, index) Zelfde als detect().
findAll(iterator)instance iterator: een functie object conform aan function(value, index) Roept de iterator functie aan voor elke element in de verzameling en retourneert een Array met daarin alle elementen waarvoor de iterator functie de waarde true terug geeft. Deze functie is het tegenovergestelde van reject().
grep(pattern [, iterator])instance pattern: Een RegExp object gebruikt om elementen te vergelijken, iterator: een function object conform aan function(value, index) Test de string waarde van elke element in de verzameling met pattern reguliere expressie. De functie zal een Array terug geven met daarin alle elementen die aan de reguliere expressie voldeden. Als de iterator functie wordt mee gegeven, dan zal het Array met voor elk element welke paste bij het resultaat van de iterator functie op dat element.
include(obj)instance obj: een object Probeert het opgegeven object te vinden in de verzameling. Retourneert true als het object gevonden is, anders false.
inGroupsOf(number, fillWith)instance number: aantal items per groep, fillWith: waarde die wordt gebruikt om de lege plaatsen op te vullen Retourneert de collectie opgebroken in groepen die zoveel mogelijk items bevatten als in het eerste argument zijn opgegeven. Als het aantal items in de initiële collectie niet deelbaar is door het getal in het eerste argument worden de lege items aan het einde van de laatste groep opgevuld met null of met de waarde van het tweede argument indien dit is gegeven. Snel voorbeeld: ['a','b','c','d'].inGroupsOf(3,'?') Creëert [ ['a','b','c'] , ['d','?','?'] ]
inject(initialValue, iterator)instance initialValue: een object te gebruiken als begin waarde, iterator: een functie object volgens function(accumulator, value, index) Combineert alle elementen van de verzameling door gebruik te maken van de iterator functie. De iterator wordt aangeroepen waarbij het vorige resultaat van de iterator in het accumulator argument wordt doorgeven. De eerste iteratie krijgt de initialValue in het accumulator argument. Het laatste resultaat is de uiteindelijke waarde die geretourneerd wordt.
invoke(methodName [, arg1 [, arg2 [...]]])instance methodName: naam van de methode die wordt aangeroepen in elk element, arg1..argN: argumenten die worden doorgegeven in de methode aanroep. Roept de methode gespecificeerd in methodName aan op elk element van de verzameling, geeft daarbij elk argument (arg1 tot argN) door en retourneert het resultaat in een Array object.
map(iterator)instance iterator: een functie object conform aan function(value, index) Zelfde als collect().
max([iterator])instance iterator: een functie object conform aan function(value, index) Retourneert het element met de hoogste waarde in de verzameling of, indien een iterator is gegeven, het hoogste resultaat van het aanroepen van de iterator op elk element uit de verzameling.
member(obj)instance obj: een object Zelfde als include().
min([iterator])instance iterator: een functie object conform aan function(value, index) Retourneert het element met de laagste waarde in de verzameling of indien een iterator is gegeven, het laagste resultaat van het aanroepen van de iterator op elk element uit de verzameling.
partition([iterator])instance iterator: een functie object conform aan function(value, index) Retourneert een Array die twee andere arrays bevat. Het eerste array zal de elementen bevatten waarvoor de iterator functie de waarde true voor opleverde en het tweede array zal de overgebleven elementen bevatten. Als de iterator niet gegeven is dan zal het eerste array alle elementen bevatten die herleiden naartrue en het andere array zal de overgebleven elementen bevatten.
pluck(propertyName)instance propertyName naam van de eigenschap van het gelezen element. Dit kan ook de index van het element bevatten. Retourneert de waarde van de eigenschap propertyName van elk element van de verzameling en retourneert het resultaat in een Array object.
reject(iterator)instance iterator: een functie object conform aan function(value, index) Roept de iterator functie aan voor elk element in de verzameling en retourneert een Array met alle elementen waarbij de iterator functie de waarde false terug geeft. Deze functie is het tegenovergestelde van findAll().
select(iterator)instance iterator: een functie object conform aan function(value, index) Zelfde als findAll().
sortBy(iterator)instance iterator: een functie object conform aan function(value, index) Retourneert een Array met alle elementen gesorteerd volgens het resultaat van de iterator functie aanroep.
toArray()instance (geen) Retourneert een Array met alle elementen van de verzameling.
zip(collection1[, collection2 [, ... collectionN [,transform]]])instance collection1 .. collectionN: verzameling die worden samengevoegd, transform: een functie object conform aan function(value, index) Voegt elke gegeven verzameling samen met de huidige verzameling. De bewerking retourneert een nieuw array met het zelfde aantal elementen als de huidige verzameling en elke element is een array (laten we ze sub-array's noemen) met de elementen met dezelfde index van elk van de samengevoegde collecties. Als de transform functie wordt meegegeven dan zal elk sub-array worden getransformeerd door deze functie voordat deze wordt terug gegeven. Snel voorbeeld: [1,2,3].zip([4,5,6], [7,8,9]).inspect() levert op "[[1,4,7],[2,5,8],[3,6,9] ]".

toc

Het Hash object

Het Hash object implementeert een hash structuur, dat is een verzameling van Sleutel(key):Waarde(value) paren.

Elk item in een Hash object is een array van twee elementen: eerst de sleutel dan de waarde. Elk item heeft ook twee variabelen: key en value, welke voor zichzelf spreken.

MethodeSoortArgumentenOmschrijving
keys()instance (geen) Retourneert een Array met de sleutels van alle elementen.
values()instance (geen) Retourneert een Array met de waarden van alle elementen.
merge(otherHash)instance otherHash: Hash object Combineert de hash doo de andere hash in te voegen en retourneert de resulterende hash.
toQueryString()instance (geen) Retourneert alle item's uit de hash in een string die geformatteerd is als een query string, dat is 'key1=value1&key2=value2&key3=value3'
inspect()instance(geen) Herschreven om een mooi geformatteerde string representatie van de hash met zijn key:value paren te retourneren.

toc

De ObjectRange class

Afgeleid van Enumerable

Representeert een reeks van waarden, met boven en ondergrenzen.

EigenschapTypeSoortOmschrijving
start(any)instance De ondergrens van de reeks
end(any)instance De bovengrens van de reeks
exclusiveBooleaninstance Bepaalt of de grenzen zelf onderdeel van de reeks zijn.

 

MethodeSoortArgumentenOmschrijving
[ctor](start, end, exclusive) constructorstart: de ondergrens, end: de bovengrens, exclusive: grenzen onderdeel van de reeks? Creëert een ObjectRange object, van start tot end. Het is belangrijk om op te merken dat start en end objecten van hetzelfde type moeten zijn en dat ze een succ() methode moeten hebben.
include(searchedValue)instance searchedValue: waarde die we zoeken. Controleert of de gegeven waarde onderdeel is van de reeks. Retourneert true of false.

toc

Het Class object

Het Class object wordt gebruikt wanneer de andere classen in de bibliotheek worden gedeclareerd. Gebruik van dit object bij het declareren van een class zorgt ervoor dat de nieuwe class een initialize() methode ondersteund, die dienst doet als constructor.

Zie het voorbeeld hieronder.

//declareren the class
var MijnVoorbeeldClass = Class.create();

//definieert rest van de class implementatie
MijnVoorbeeldClass.prototype = {

   initialize: function(bericht) {
		this.bericht = bericht;
   },

   toonBericht: function(ajaxAntwoord) {
      alert(this.bericht);
   }
};

//Laten we nu concretiseren en het object gebuiken
var mijnPrater = new MijnVoorbeeldClass('hallo daar.');
mijnPrater.toonBericht(); //toont alert

			
MethodeSoortArgumentenOmschrijving
create(*)instance(any) Definieert een constructor voor een nieuwe class.

toc

Het Ajax object

Dit object dient als de basis en namespace voor vele andere classen die AJAX functionaliteit leveren.

EigenschapTypeSoortOmschrijving
activeRequestCountNumberinstance Het getal van de AJAX verzoeken dat aan de gang is.

 

MethodeSoortArgumentenOmschrijving
getTransport()instance(geen) Retourneert een nieuw XMLHttpRequest object

toc

Het Ajax.Responders object

Afgeleid van Enumerable

Dit object onderhoudt een lijst van objecten die worden aangeroepen wanneer een AJAX-gerelateerd event plaats vindt. Je kunt dit object gebruiken, bijvoorbeeld, als je een globale exception handler aan AJAX activiteiten wilt hangen.

EigenschapTypeSoortOmschrijving
respondersArrayinstance De lijst van objecten die geregistreerd zijn voor AJAX events notificaties.

 

MethodeSoortArgumentenOmschrijving
register(responderToAdd)instanceresponderToAdd: object met methoden die aangeroepen zullen worden. Het object doorgeven in het responderToAdd argument moet een methode zoals de AJAX events (b.v. onCreate, onComplete, onException, enz.) bevatten. Wanneer het corresponderende event plaats vindt zal voor alle geregistreerde objecten die een methode bevatten met de juiste naam deze methode worden aangeroepen .
unregister(responderToRemove)instanceresponderToRemove: object dat verwijderd moet worden van de lijst. Het doorgegeven object in het responderToRemove argument zal worden verwijderd van de lijst van geregistreerde objecten.
dispatch(callback, request, transport, json)instance callback: naam van het gerapporteerde AJAX event, request: het Ajax.Request object verantwoordelijk voor het event, transport: het XMLHttpRequest object dat de AJAX aanroep bevat (of bevatte), json: de X-JSON header van de reactie (indien aanwezig). Loopt door de lijst met geregistreerde objecten op zoek naar die objecten welke de methode hebben, zoals aangegeven in het callback argument. Vervolgens worden deze methoden aangeroepen met de 3 andere argumenten. Als de AJAX reactie een X-JSON HTTP header met JSON inhoud bevat dan wordt dit uitgevoerd en doorgegeven in het json argument. Als het event een onException is dan zal het transport argument de exceptie krijgen en wordt het json argument niet doorgegeven.

toc

De Ajax.Base class

Deze class wordt gebruikt als de basis class voor bijna alle andere classen gedefinieerd in het Ajax object.

MethodeSoortArgumentenOmschrijving
setOptions(options)instanceoptions: AJAX options Zet de gewenste options voor de AJAX activiteiten
responseIsSuccess()instance(geen) Retourneert true als de AJAX actie succesvol was, anders false
responseIsFailure()instance(geen) Het tegenovergestelde van responseIsSuccess().

toc

De Ajax.Request class

Afgeleid van Ajax.Base

Encapsuleert AJAX bewerkingen

EigenschapTypeSoortOmschrijving
EventsArraystatic Lijst van mogelijke events/statussen gerapporteerd gedurende een AJAX bewerking. De lijst omvat: 'Uninitialized', 'Loading', 'Loaded', 'Interactive', en 'Complete.'
transportXMLHttpRequestinstance Het XMLHttpRequest object dat de AJAX bewerking bevat.
urlStringinstance De URL waar de aanroep naar plaats vind.

 

MethodeSoortArgumentenOmschrijving
[ctor](url, options)constructorurl: de url die wordt opgehaald, options: AJAX opties Creëert een instantie van dit object dat de gegeven url zal aanroepen gebruik makende van de gegeven options. Het onCreate event zal afgaan gedurende de constructor aanroep.Belangrijk: Opgemerkt moet worden dat de gekozen url afhankelijk is van de browsers veiligheids instellingen. In veel gevallen zal de browser geen url's ophalen die niet van het zelfde domain zijn als de huidige pagina. In het ideale geval, gebruik lokale url's om te vermijden dat de gebuikers browser configureerd of beperken wordt (bedankt Clay).
evalJSON()instance(geen) Deze methode wordt normaal niet extern aangeroepen. Het wordt intern aangeroepen om de inhoud te evalueren van een eventuele X-JSON HTTP header die aanwezig is in een AJAX antwoord.
evalReponse()instance(geen) Deze methode wordt normaal niet extern aangeroepen. Als het AJAX antwoord een Content-type header heeft als text/javascript dan zal de inhoud van het antwoord worden uitgevoerd en wordt deze methode gebruikt.
header(name)instancename: HTTP header naam Achterhaalt de inhoud van een HTTP header van een AJAX antwoord. Roep deze methode alleen aan nadat een AJAX aanroep afgerond is.
onStateChange()instance(geen) Deze methode wordt normaal niet extern aangeroepen. Het wordt door het object zelf aangeroepen wanneer de AJAX aanroep van status veranderd.
request(url)instanceurl: url voor de AJAX aanroep Deze methode wordt normaal niet extern aangeroepen. Deze wordt al aangeroepen tijdens de constructor aanroep.
respondToReadyState(readyState)instancereadyState: status getal (1 tot 4) Deze methode wordt normaal niet extern aangeroepen. Het wordt door het object zelf aangeroepen wanneer de AJAX aanroep van status veranderd.
setRequestHeaders()instance(geen) Deze methode wordt normaal niet extern aangeroepen. Het wordt door het object zelf aangeroepen om de HTTP header samen te stellen die verstuurd zal worden gedurende een HTTP aanvraag.

toc

Het options argument object

Een belangrijk onderdeel van de AJAX functionaliteit is het options argument. Er is geen options class als zodanig. Elk object kan worden doorgegeven, zolang het de verwachte eigenschappen heeft. Het is gebruikelijk om anonieme objecten te creëren specifiek voor de AJAX aanroepen.

EigenschapTypeStandaardOmschrijving
methodString'post' Methode van de HTTP aanvraag.
parametersString'' De url-formatted lijst met waarden die worden doorgegeven bij de aanvraag.
asynchronousBooleantrue Geeft aan of de AJAX aanroep asynchroon zal zijn.
postBodyStringundefined Inhoud die wordt doorgegeven in de aanroep body in het geval van een HTTP POST.
requestHeadersArrayundefined Lijst van HTTP headers die worden doorgeven in de aanroep. Deze lijst moet een even aantal items hebben, elk oneven item is de naam van een eigen header en het volgende even item is de string waarde van die header. Bijvoorbeeld: ['mijn-header1', 'dit is een waarde', 'my-andere-header', 'een andere waarde']
onXXXXXXXXfunction(XMLHttpRequest, object)undefined Eigen functie die moet worden aangeroepen wanneer respectievelijk het event/status is bereikt gedurende de AJAX aanroep. Er zijn verschillende alternatieven "XXXXXXXX" in deze optie. Onder die opties zijn de statussen van Ajax.Request.Events, en de HTTP status codes. Bijvoorbeeld var myOpts = {onComplete: toonAntwoord, onLoaded: registerGeladen};. De gebruikte functie zal een argument ontvangen wat het Ajax.Request object is behorende bij de AJAX bewerking en een ander agrument die de berekende X-JSON antwoord HTTP header bevat.
onSuccessFunction(XMLHttpRequest, Object)undefined Eigen functie die moet worden aangeroepen wanneer een AJAX aanroep succesvol is verlopen. De gebruikte functie zal een argument ontvangen wat het XMLHttpRequest object is behorende bij de AJAX bewerkingen een ander agrument die de berekende X-JSON antwoord HTTP header bevat.
onFailureFunction(XMLHttpRequest, Object)undefined Eigen functie die moet worden aangeroepen wanneer een AJAX aanroep fout is gegaan. De gebruikte functie zal een argument ontvangen wat het XMLHttpRequest object is behorende bij de AJAX bewerkingen een ander agrument die de berekende X-JSON antwoord HTTP header bevat.
onExceptionFunction(Ajax.Request, exception)undefined Eigen functie die moet worden aangeroepen wanneer een AJAX aanroep een exception genereert, zoals ongeldige reactie of ongeldige argumenten. De gebruikte functie zal twee argumenten ontvangen. Het Ajax.Request object behorende bij de AJAX bewerking en het exception object.
insertioneen Insertion classundefined Een class die bepaalt hoe de nieuwe inhoud ingevoegd wordt. Dit kan zijn Insertion.Before, Insertion.Top, Insertion.Bottom of Insertion.After. Is alleen van toepassing op Ajax.Updater objecten.
evalScriptsBooleanundefined, false Bepaalt of script blokken uitgevoerd zullen worden wanneer het antwoord binnenkomt. Alleen van toepassing op Ajax.Updater objecten.
decayNumberundefined, 1 Bepaalt de toenemende vertraging van de verversingsfrequentie van het Ajax.PeriodicalUpdater object wanneer het ontvangen antwoord hetzelfde is als de vorige. Bij voorbeeld, als je 2 gebuikt, nadat een vernieuwing hetzelfde resultaat oplevert als de vorige, zal het object twee keer zolang wachten voor de volgende vernieuwing. Als dit zich herhaalt, zal het object vier keer zolang wachten enzovoort. Laat de waarde undefined of gebruikt 1 om vertragingen te voorkomen.
frequencyNumberundefined, 2 Interval (niet frequentie) tussen verversingen, in seconden. Alleen van toepassing op Ajax.Updater objecten.

toc

De Ajax.Updater class

Afgeleid vanAjax.Request

Gebruik wanneer de aangevraagde url HTML retourneert die je direct in een specifiek element op je pagina wilt invoegen. Je kunt dit object ook gebruiken wanneer de url <script> blokken terug geeft die uitgevoerd worden bij aankomst. Gebruik de evalScripts optie om te werken met scripts.

EigenschapTypeSoortOmschrijving
containersObjectinstance Dit object bevat twee variabelen: containers.success zal gebruikt worden wanneer de AJAX aanroep slaagt en containers.failure zal in het andere geval gebruikt worden.

 

MethodeSoortArgumentenOmschrijving
[ctor](container, url, options)constructor container:dit kan het id van een element zijn, het element object zelf of een object met twee variabelen - object.success element (of id) die zal worden gebruikt wanneer de AJAX aanroep slaagt en object.failure element (of id) in het andere geval. url: de url die wordt opgehaald, options: AJAX options Creëert een instantie van dit object dat de gegeven url zal aanroepen met de gegeven options.
updateContent()instance(geen) Deze methode wordt normaal niet extern aangeroepen. Het wordt aangeroepen door het object zelf wanneer een antwoord ontvangen is. Het zal de juiste elementen bijwerken met de HTML of de functie aanroepen die is doorgegeven in de insertion optie. De functie zal worden aangeroepen met twee argumenten, het element dat moet worden bijgewerkt en de antwoord tekst.

toc

De Ajax.PeriodicalUpdater class

Afgeleid van Ajax.Base

Deze class instantieert herhaaldelijk en gebruikt een Ajax.Updater object om een element op een pagina te verversen of om een of andere taak uit te voeren die de Ajax.Updater kan uitvoeren. Controleer de Ajax.Updater referentie voor meer informatie.

EigenschapTypeSoortOmschrijving
containerObjectinstance Deze waarde wordt rechtstreeks doorgegeven aan de constructor van Ajax.Updater.
urlStringinstance Deze waarde wordt rechtstreeks doorgegeven aan de constructor van Ajax.Updater.
frequencyNumberinstance Interval (niet frequentie) tussen verversingen in seconden. De standaard waarde is 2 seconden. Dit getal wordt vermenigvuldigd met de huidige decay wanneer het Ajax.Updater object wordt aangeroepen.
decayNumberinstance De huidige verval waarde die bepaalt wanneer de taak opnieuw wordt uitgevoerd.
updaterAjax.Updaterinstance Het meest recent gebruikte Ajax.Updater object
timerObjectinstance De handle van de timer die gebruikt wordt om het object te melden wanneer het tijd is voor de volgende vernieuwing.

 

MethodeSoortArgumentenOmschrijving
[ctor](container, url, options)constructor container: dit kan het id of een element, het element object zelf of een object met twee variabelen - object.success element (of id) die zal worden gebruikt wanneer de AJAX aanroep slaagt en object.failure element (of id) in het andere geval. url: de url die wordt opgehaald, options: AJAX options Creëert een instantie van dit object dat de gegeven url zal aanroepen met de gegeven options.
start()instance(geen) Deze methode wordt normaal niet extern aangeroepen. Het wordt gebruikt bij het object zelf om te starten met het uitvoeren van periodieke taken.
stop()instance(geen) Zorgt ervoor dat het object stopt met het uivoeren van de terugkerende taken. Na het stoppen zal het boject de callback aanroepen, aangegeven in onComplete optie (indien aanwezig).
updateComplete()instance(geen) Deze methode wordt normaal niet extern aangeroepen. Het is aangeroepen bij de momenteel gebruikte Ajax.Updater nadat een aanroep afgerond is. Het wordt gebruikt om de volgende verversing te plannen.
onTimerEvent()instance(geen) Deze methode wordt normaal niet extern aangeroepen. Het wordt aangeroepen wanneer het tijd is voor de volgende verversing.

toc

Het Element object

Dit object bevat een aantal handige functies voor het manipuleren van elementen in de DOM.

MethodeSoortArgumentenOmschrijving
addClassName(element, className)instanceelement: element object of id, className: CSS classnaam Voegt de gegeven classnaam toe aan de classnamen van het element.
classNames(element)instanceelement: element object of id Retourneert een Element.ClassNames object welke de CSS class namen representeert geassocieerd met het gegeven element.
cleanWhitespace(element)instanceelement: element object of id Verwijdert lege tekst nodekinderen van het element.
empty(element)instanceelement: element object or id Retourneert een Boolean waarde die aangeeft of het element tag leeg is (of alleen whitespace heeft)
getDimensions(element)instanceelement: element object or id Retourneert de afmetingen van het element. De geretourneerde waarde is een object met twee variabelen: height en width.
getHeight(element)instanceelement: element object of id Retourneert de offsetHeight van het element
getStyle(element, cssProperty)instanceelement: element object of id, cssProperty naam van een CSS variabele (zowel formaat 'prop-name' of 'propName' is juist). Retourneert de waarde van het CCS variabele van het gegeven element of null als het niet aanwezig is.
hasClassName(element, className)instanceelement: element object of id, className: CSS classnaam Retourneert true als het element de gegeven classnaam heeft als een van zijn classnamen.
hide(element)instanceelement: element object of id Verbergt het element door de style.display variabele op de waarde 'none' te zetten.
makeClipping(element)instanceelement: element object of id  
makePositioned(element)instanceelement: element object of id Verandert de variabele style.position van het element in 'relative'
remove(element)instanceelement: element object of id Verwijdert het element van het document.
removeClassName(element, className)instanceelement: element object of id, className: CSS classnaam Verwijdert de gegeven classnaam van de classnamen van het element.
scrollTo(element)instanceelement: element object or id Scrollt het window naar de positie van het element.
setStyle(element, cssPropertyHash)instanceelement: element object of id, cssPropertyHash Hash object met de stijlen die moeten worden toegepast. Zet de waarde van de CSS variabelen in het gegeven element, volgens de waarden in het cssPropertyHash argument.
show(element)instanceelement: element object of id Maakt het element zichtbaar door de waarde van de style.display variabele op '' te zetten.
show(element)instanceelement: element object of id Draait de zichtbaarheid van het element om.
undoClipping(element)instanceelement: element object of id  
undoPositioned(element)instanceelement: element object of id Zet de waarde van de style.position variabele op ''
update(element, html)instanceelement: element object of id, html: html inhoud Vervangt de innerHTML van een element met het gegeven html argument. Als het gegeven html <script> bevat zullen die niet worden ingevoegd maar worden uitgevoerd.
visible(element)instanceelement: element object of id Retourneert een Boolean waarde die aangeeft of het element zichtbaar is.

toc

De Element.ClassNames class

Afgeleid van Enumerable

Representeert een verzameling van CSS class namen geassocieerd met een element.

MethodeTypeArgumentenOmschrijving
[ctor](element)constructorelement: elk DOM element object of id Creëert een Element.ClassNames object die de CSS classnamen representeert van het gegeven element.
add(className)instance className: een CSS class naam Neemt de gegeven CSS class naam op in de lijst van class namen geassocieerd met het element.
remove(className)instance className: een CSS class naam Verwijdert de gegeven CSS class naam uit de lijst van class namen geassocieerd met het element.
set(className)instance className: een CSS class naam Associeert het element met de gegeven CSS class name en verwijdert elke andere classname van het element.

toc

Het Abstract object

Dit object dient als de basis andere classen in de bibliotheek. Het heeft geen enkele variabelen of methoden. De classen gedefinieerd in dit object worden ook behandeld als traditionele abstracte classen.

toc

De Abstract.Insertion class

Deze class is gebruikt als basis voor de andere classen die dynamisch inhoud toevoegen. Deze class is gebruikt als een abstracte class.

MethodeSoortArgumentenOmschrijving
[ctor](element, content)constructor element: element object of id, content: HTML die ingevoegd moet worden Creëert een object die zal helpen bij het dynamisch invoegen van inhoud.
contentFromAnonymousTable()instance (geen)  

 

EigenschapTypeSoortOmschrijving
adjacencyStringstatic, parameter Parameter die specificeert waar de inhoud geplaatst zal worden relatief ten opzichte van het gegeven element. De volgende waarden zijn mogelijk: 'beforeBegin', 'afterBegin', 'beforeEnd' en 'afterEnd'.
elementObjectinstance Het element object waar de invoeging relatief ten opzichte van gemaakt zal worden.
contentStringinstance De HTML die zal worden ingevoegd.

toc

Het Insertion object

Dit object dient als de basis andere classen in de bibliotheek. Het heeft geen enkele variabelen of methoden. De classen gedefinieerd in dit object worden ook behandeld als traditionele abstracte classen.

toc

De Insertion.Before class

Afgeleid van Abstract.Insertion

Voegt HTML voor een element in.

MethodeSoortArgumentenOmschrijving
[ctor](element, content)constructor element: element object of id, content: De HTML die zal worden ingevoegd. Afgeleid van Abstract.Insertion. Creëert een object die zal helpen bij het dynamisch invoegen van inhoud.

De volgende code

<br/>Hallo, <span id="persoon" style="color:red;">Wiggum. Hoe gaat het ermee?</span>

<script> new Insertion.Before('persoon', 'Chef '); </script>
			

Zal de HTML veranderen in

<br/>Hallo, Chef <span id="persoon" style="color:red;">Wiggum. Hoe gaat het ermee?</span>
			

toc

De Insertion.Top class

Afgeleid van Abstract.Insertion

Voegt de HTML als eerste kind onder een element. De inhoud zal direct na de opening tag van het element geplaatst worden.

MethodeSoortArgumentenOmschrijving
[ctor](element, content)constructor element: element object of id, content: De HTML die zal worden ingevoegd. Afgeleid van Abstract.Insertion. Creëert een object die zal helpen bij het dynamisch invoegen van inhoud.

De volgende code

<br/>Hallo, <span id="persoon" style="color:red;">Wiggum. Hoe gaat het ermee?</span>

<script> new Insertion.Top('persoon', 'Dhr. '); </script>
			

Zal de HTML veranderen in

<br/>Hello, <span id="persoon" style="color:red;">Dhr. Wiggum. Hoe gaat het ermee?</span>
			

toc

De Insertion.Bottom class

Afgeleid van Abstract.Insertion

Voegt de HTML als laatste kind onder een element. De inhoud zal direct voor de afsluitende tag van het element geplaatst worden.

MethodeSoortArgumentenOmschrijving
[ctor](element, content)constructor element: element object of id, content: De HTML die zal worden ingevoegd. Afgeleid van Abstract.Insertion. Creëert een object die zal helpen bij het dynamisch invoegen van inhoud.

De volgende code

<br/>Hello, <span id="persoon" style="color:red;">Wiggum. Hoe gaat het ermee?</span>

<script> new Insertion.Bottom('persoon', " Wat gebeurt hier?"); </script>
			

Zal de HTML veranderen in

<br/>Hello, <span id="persoon" style="color:red;">Wiggum. Hoe gaat het ermee? Wat gebeurt hier?</span>
			

toc

De Insertion.After class

Afgeleid van Abstract.Insertion

Voegt de HTML direct na de afsluitende tag van het element in.

MethodeSoortArgumentenOmschrijving
[ctor](element, content)constructor element: element object of id, content: De HTML die zal worden ingevoegd. Afgeleid van Abstract.Insertion. Creëert een object die zal helpen bij het dynamisch invoegen van inhoud.

De volgende code

<br/>Hello, <span id="persoon" style="color:red;">Wiggum. Hoe gaat het er mee?</span>

<script> new Insertion.After('persoon', ' Ben je daar?'); </script>
			

Zal de HTML veranderen in

<br/>Hello, <span id="persoon" style="color:red;">Wiggum. Hoe gaat het er mee</span> Ben je daar?
			

toc

Het Field object

Dit object bevat een aantal handige functies voor werken met input velden in een form.

MethodeSoortArgumentenOmschrijving
clear(field1 [, field2 [, field3 [...]]])instancefieldN: veld element object of id Wist de waarde van elk doorgegeven form veld element.
present(field1 [, field2 [, field3 [...]]])instancefieldN: veld element object of id Retourneert true alleen als alle form velden niet lege waarden bevatten.
focus(field)instancefield: veld element object of id Verplaatst de invoer focus naar het gegeven form veld.
select(field)instancefield: veld element object of id Selecteert de waarde in het veld dat tekst selectie ondersteund.
activate(field)instancefield: veld element object of id Verplaatst de focus en selecteert de waarde in het veld tekst dat selectie ondersteund.

toc

Het Form object

Dit object bevat een aantal handige functies voor werken met de data invoer form en zijn input velden.

MethodeSoortArgumentenOmschrijving
serialize(form)instanceform: form element object of id Retourneert een url-geformateerde lijst van veldnamen en hun waarden, zoals 'veld1=waarde1&veld2=waarde2&veld3=waarde3'
findFirstElement(form)instanceform: form element object of id Retourneert het eerste actieve veld element in de form.
getElements(form)instanceform: form element object of id Retourneert een Array die alle input velden in de form bevat.
getInputs(form [, typeName [, name]])instance form: form element object of id, typeName: het type van het input element, name: de naam van het input element. Retourneert een Array die alle <input>velden in de form bevat. Optioneel kan de lijst gefilterd worden op het type of de name attributen van de elementen.
disable(form)instanceform: form element object of id Maakt invoer van alle input velden in het form onmogelijk.
enable(form)instanceform: form element object of id Maakt invoer van alle input velden in het form mogelijk.
focusFirstElement(form)instanceform: form element object of id Activeert het eerste zichtbare, active input veld in de form.
reset(form)instanceform: form element object of id Reset het form. Het zelfde als het aanroepen van de reset() methode van het form object.

toc

Het Form.Element object

Dit object bevat een aantal handige functies voor het werken met form elementen, zichtbaar of niet.

MethodeSoortArgumentenOmschrijving
serialize(element)instanceelement: element object of id Retourneert het paar naam=waarde van het element, als in 'elementName=elementValue'
getValue(element)instanceelement: element object of id Retourneert de waarde van het element.

toc

Het Form.Element.Serializers object

Dit object bevat een aantal handige functies die door de bibliotheek intern gebruikt worden om de huidige waarde van form elementen op te halen.

MethodeSoortArgumentenOmschrijving
inputSelector(element)instanceelement: object of id van een form element welke de checked variabele heeft, zoals radio button of checkbox. Retourneert een Array met de namen en waarden van de elementen, als in ['elementName', 'elementValue']
textarea(element)instanceelement: object of id van een form element welke de variabele value heeft, zoals een textbox, button of wachtwoord veld. Retourneert een Array met de namen en waarden van de elementen, zoals ['elementName', 'elementValue']
select(element)instanceelement: object van een <select> element Retourneert een Array met de namen en alle geselecteerde optie waarden of tekst van de elementen, zoals ['elementName', 'selOpt1 selOpt4 selOpt9']

toc

De Abstract.TimedObserver class

Deze class is gebruikt als basis class voor andere classen die een element controleren tot zijn waarden (of welke eigenschap de afgeleide class definieerd) veranderd. Deze class is gebruikt als een abstracte class.

Subclassen kunnen gecreëerd worden om dingen te controleren zoals input waarden van een element of een van de stijl variabelen of aantal rijen in een table of wat dan ook waar je geïnteresseerd in zou kunnen zijn om veranderingen te controleren.

MethodeSoortArgumentenOmschrijving
[ctor](element, frequency, callback)constructor element: element object of id, frequency: interval in seconden, callback: functie die wordt aangeroepen wanneer het element veranderd. Creëert een object dat het element controleert.
getValue()instance, abstract (geen) Afgeleide classen moeten deze methode implementeren om te bepalen wat de huidige waarde in het element is dat gecontroleerd moet worden.
registerCallback()instance(geen) Deze methode wordt normaal niet extern aangeroepen. Het wordt door het object zelf aangeroepen om te beginnen met het controleren van het element.
onTimerEvent()instance(geen) Deze methode wordt normaal niet extern aangeroepen. Het wordt door het object aangeroepen om periodiek het element te controleren.

 

EigenschapTypeOmschrijving
elementObject Het element object dat wordt gecontroleerd.
frequencyNumberDit is de actuele interval in seconden tussen controles.
callbackfunction(Object, String)De functie die moet worden aangeroepen worden wanneer een element veranderd. Het zal het element object en de nieuwe waarde mee krijgen.
lastValueStringDe laatste waarde in het element dat geverifieerd is.

toc

De Form.Element.Observer class

Afgeleid van Abstract.TimedObserver

Implementatie van een Abstract.TimedObserver die de waarden van de input elementen in een form controleert. Gebruik deze class wanneer je elementen wilt controleren die geen events hebben die rapporteren dat de waarde is veranderd. In dat geval kun je in plaats daarvan de class Form.Element.EventObserver gebruiken.

MethodeSoortArgumentenOmschrijving
[ctor](element, frequency, callback)constructor element: element object of id, frequency: interval in seconden, callback: functie die wordt aangeroepen wanneer het element veranderd. Afgeleid van Abstract.TimedObserver. Creëert een object die de value variabele van een element controleert.
getValue()instance (geen) Retourneert de waarde van het element.

toc

De Form.Observer class

Afgeleid van Abstract.TimedObserver

Implementatie van een Abstract.TimedObserver die veranderingen in de waarden van een element in een form controleert. Gebruik deze class wanneer je elementen wilt controleren die geen events hebben die rapporteren dat de waarde is veranderd. In dat geval kun je in plaats daarvan de Form.Element.EventObserver class gebruiken.

MethodeSoortArgumentenOmschrijving
[ctor](form, frequency, callback)constructor form: form object of id, frequency: interval in seconden, callback: functie die wordt aangeroepen wanneer een data input element in de form veranderd. Afgeleid van Abstract.TimedObserver. Creëert een object die de form controleert op veranderingen.
getValue()instance (geen) Retourneert de serializatie van alle data van het form.

toc

De Abstract.EventObserver class

Deze class is gebruikt als basis class voor andere classen die een callback functie uitvoeren zodra een waarde-is-veranderd event plaatsvindt voor een element.

Meerdere objecten van type Abstract.EventObserver kunnen aan hetzelfde element gekoppeld worden zonder de andere te wissen. De callbacks zullen worden uitgevoerd in de volgorde waaraan ze aan het element zijn toegevoegd.

Het event dat afgaat is onclick voor radio buttons en checkboxes en onchange voor textboxes in het algemeen en listboxes/dropdowns.

MethodeSoortArgumentenOmschrijving
[ctor](element, callback)constructor element: element object of id, callback: functie die wordt aangeroepen wanneer een event optreed. Creëert een object dat het element controleert.
getValue()instance, abstract (geen) Afgeleide classen moeten deze methode implementeren om te bepalen wat de huidige waarde in het element is dat gecontroleerd moet worden.
registerCallback()instance(geen) Deze methode wordt normaal niet extern aangeroepen. Het wordt door het object zelf aangeroepen om zich te koppelen aan het event van het element.
registerFormCallbacks()instance(geen) Deze methode wordt normaal niet extern aangeroepen. Het wordt door het object zelf aangeroepen om zich te koppelen aan het event van elk data invoer element in de form.
onElementEvent()instance(geen) Deze methode wordt normaal niet extern aangeroepen. Het wordt gebonden aan het event van het element.

 

EigenschapTypeOmschrijving
elementObject Het element object dat wordt gecontroleerd.
callbackfunction(Object, String)De functie die wordt aangeroepen zodra een element veranderd. Het zal het element object en de nieuwe waarde mee krijgen.
lastValueStringDe laatste waarde in het element dat geverifieerd is.

toc

De Form.Element.EventObserver class

Afgeleid van Abstract.EventObserver

Implementatie van een Abstract.EventObserver die een callback functie uitvoert op het bijbehorende event van het input element van de form om veranderingen te detecteren. Als het element geen event heeft die veranderingen kan rapporteren kun je de Form.Element.Observer class gebruiken.

MethodeSoortArgumentenOmschrijving
[ctor](element, callback)constructor element: element object of id, callback: functie die wordt aangeroepen wanneer het element veranderd. Afgeleid van Abstract.EventObserver. Creëert een object die de value variabele van een element controleert.
getValue()instance (geen) Retourneert de waarde van het element.

toc

De Form.EventObserver class

Afgeleid van Abstract.EventObserver

Implementatie van een Abstract.EventObserver die elke verandering in elk data input element van een form controleert, gebruikmakend van de events van een element om de veranderingen te detecteren. Als de form elementen bevat die geen event hebben dat veranderingen kan rapporteren dan kun je in plaats daarvan de Form.Observer class gebruiken.

MethodeSoortArgumentenOmschrijving
[ctor](form, callback)constructor form: form object of id, callback: functie die wordt aangeroepen wanneer een data input element in de form veranderd. Afgeleid van Abstract.EventObserver. Creëert een object die de form controleert op veranderingen.
getValue()instance (geen) Retourneert de serializatie van alle data van het form.

toc

Het Position object (preliminaire documentatie)

Dit object bevat een divers aantal functies die helpen bij positioneren van een element.

MethodeSoortArgumentenOmschrijving
prepare()instance(geen) Stelt de deltaX en deltaY variabelen in om veranderingen in de scroll positie te kunnen maken. Deze methode MOET je aan roepen voor elke andere aanroep naar withinIncludingScrolloffset nadat een pagina gescrollt is.
realOffset(element)instanceelement: object Retourneert een Array met de juiste scroll offsets van het element, inclusief de scroll offsets die het element beïnvloeden. Het resulterende array is gelijk aan [total_scroll_left, total_scroll_top]
cumulativeOffset(element)instanceelement: object Retourneert een Array met de juiste scroll offsets van het element, inclusief de offsets die zijn opgelegd door de parent elementen. Het resulterende array is gelijk aan [total_scroll_left, total_scroll_top]
within(element, x, y)instanceelement: object, x en y: coördinaten van een punt. Test of de gegeven puntcoördinaten binnen de afgebakende rechthoek van het gegeven element zijn.
withinIncludingScrolloffsets(element, x, y)instanceelement: object, x en y: coördinaten van een punt  
overlap(mode, element)instancemode: 'vertical' of 'horizontal', element: object within() moet worden aangeroepen precies voor deze methode wordt aangeroepen. De methode zal een decimaal getal tussen 0.0 en 1.0 retourneren wat de fractie van het coördinaat is dat het element overlapt. Bijvoorbeeld, als het element een vierkante DIV is met een zijkant van 100px en gepositioneerd op (300, 300) dan zal within(divSquare, 330, 330); overlap('vertical', divSquare); 0.70 teruggeven. Wat betekent dat het punt op 70% (100px - 30px = 70px) van de bovenkant van de DIV zit. De eenvoudigste manier om dit te begrijpen is om het gegeven coördinaten als de linker bovenhoek van een ander vierkant voor te stellen, die de eerste overlapt. Het getal zal een percentage zijn van de breedte en hoogte die overlapt (er vanuit gaande dat het tweede vierkant groot genoeg is).
clone(source, target)instancesource: element object of id, target: element object of id Past de afmetingen en de positie van het target element aan zodat deze identiek zijn aan die van het source element.

Aan de documentatie voor v1.5.0 wordt nog gewerkt. Hou deze pagina in de gaten voor updates.
Als je fouten, incorrecte of incomplete informatie, of gewoon weg nonsens vindt met betrekking tot de inhoud, laat het weten en ik zal proberen het zo snel mogelijk aan te passen. Voor fouten in de nederlandse tekst kun je e-mailen naar .

toc