Homepage → Programmering → Talen → JavaScript

JavaScript - Functies

Inhoud

Inleiding
Browser Object Model
Document Object Model
JavaScript functies
Gereserveerde woorden
Speciale variabelen
Gebruik van CSS elementen
Gebruik van HTML elementen

Inleiding

Elk object heeft:

Eigenschappen:
te wijzigen via de opdracht: objectnaam.eigenschapsnaam = nieuwe gegevens;
Methoden:
uit te voeren via de opdracht: objectnaam.methodenaam(nieuwe gegevens);

Nuttig informatie:

Elke JavaScript expressie kan een of meer JavaScript functies bevatten. En ze moeten gescheiden zijn door het teken '.'. Ze worden dan van links naar rechts uitgevoerd.
Elk HTML attribuut routine in de JavaScript code wordt alléén uitgevoerd als de JavaScript code terugkomt met 'true', anders niet!
'this[.xxxxxxx]' betekent de waarde van het attribuut 'xxxxxxx' van het betreffende HTML element; Zie verdere opmerkingen over 'this'.
Elk object in HTML kan opgehaald worden door de opdracht: document.getElementById('ooooooo')[.ppppppp][.sssssss]
waarbij:
- ooooooo = HTML element id/naam (met '[nnn]' indien van toepassing)
- ppppppp = een of meer HTML element ids/namen (met '[nnn]' indien van toepassing) binnen de HTML element id/naam 'ooooooo'
- sssssss = speciale naam: checked | children(nnn) | children.length | class | className | defaultValue | id | length | maxLength | name | parentElement | size | style[.zzzzzz] | title | type | value
- zzzzzzz = CSS attribuut (zonder '.zzzzzzz' betekent een style van een class id)
De objectnaam 'window' is optioneel, zodat het niet opgegeven hoeft te worden
Elke variabele kan getest te worden op de geldigheid door middel van:
```
if(typeof xxx !== ' undefined')
```
Elk object item kan getest te worden op de geldigheid door middel van:
```
if(objectnaam.hasOwnProperty(itemnaam))
```
Elk tabel item kan getest te worden op de geldigheid door middel van:
```
if(tabelnaam.hasOwnProperty(itemnaam -of- -nummer))
```

Browser Object Model

Het Browser Object Model (BOM) heeft het Window object met de volgende subobjecten:

Omdat het object 'window' het topobject is, mag het weggelaten worden.

Document Object Model

Het Document Object Model (DOM) bevat:

JavaScript functies

Gebruik de volgende voorwaardelijke opdracht om te kijken, of het uitvoerbaar is:
'if(xxxxxxx[.yyyyyyy])'
waarbij xxxxxxx = een variable-naam en yyyyyyy = een functienaam.

Functie	Objectnaam	Soort	Omschrijving
/xxxxxxx/	-	-	Voor een commentaar van een of meer regels
//xxxxxxx	-	-	Voor een commentaar (na de code) binnen één regel
abs	Math	methode	Geeft de absolute waarde
addEventListener	document/window	methode	Voert de procedure uit bij de event
alert	window	methode	Geeft een waarschuwingsvenster weer met de boodschap samen met de drukknop 'OK'
anchors	document	verzameling	Bevat alle HTML elementen 'a' in de array mode
appendChild	element	methode	Voegt een nieuw 'child' HTML element toe als het laatste
apply	-	methode	Voert de functie met … en parameters in de array uit (zie dit voorbeeld)
appName	navigator	eigenschap	Bevat de browsernaam
arc	canvas	methode	Tekent een gebogen lijn naar het gewenste punt in de canvas
Array	array	object	Bevat de tabel; genereerd door: var … = new Array(…);
availHeight	screen	eigenschap	Bevat de schermhoogte in pixels
availWidth	screen	eigenschap	Bevat de schermbreedte in pixels
assign	location	methode	Vervangt de URL van de webpagina
back	history	methode	Gaat naar de vorige webpagina volgens de historielijst
beginPath	canvas	methode	Begint een nieuw pad in de canvas
bold	String	methode	Zet de string in vet
Boolean	Boolean	object	Bevat de boolean waarde; genereerd door: var … = new Boolean(…);
call	-	methode	Voert de functie met … en parameters uit (zie dit voorbeeld)
ceil	Math	methode	Rondt de waarde af naar boven
charAt	String	methode	Geeft het teken van de gespecificeerde positie in de string
checked	input checkbox	eigenschap	Bevat de status van de checkbox
childNodes	element	eigenschap	Bevat alle 'child' HTML elementen van het 'parent' HTML element
className	element	eigenschap	Bevat de class naam
clearInterval	window	methode	Verwijdert de interval van de methode 'setInterval'
clearRect	canvas	methode	Maakt een rechthoek transparant in de canvas
clearTimeout	window	methode	Verwijdert de interval van de methode 'setTimeoutl'
close	window	methode	Sluit het browservenster
closePath	canvas	methode	Voltooit het pad door een rechte lijn te trekken van het huidige punt naar het startpunt van het pad in de canvas
concat	array	methode	Voegt twee of meer arrays samen tot één array
confirm	window	methode	Geeft een dialoogvenste weer met de boodschap samen met twee drukknoppen 'OK' en 'Annuleren'
createElement	document	methode	Genereert een nieuw HTML element
createTextNode	document	methode	Genereert de inhoud van het HTML element
Date	Date	object	Bevat de datum; genereerd door: var … = new Date(…);
delCookie	document	methode	Verwijdert de cookie gegevens
document	document	eigenschap	Bevat de totale HTML informatie van de webpagina
drawImage	canvas	methode	Plaatst een plaatje in de canvas
fillRect	canvas	methode	Tekent een gevulde rechthoek in de canvas
fill	canvas	methode	Tekent een gevulde versie van het vastgelgde pad in de canvas
find	Array	methode	Geeft de waarde van het eerste gevonden element in een array
fillStyle	canvas	eigenschap	Bevat de kleur en doorzichtigheid van de vulling van nadien getekende paden in de canvas
firstChild	element	eigenschap	Bevat het eerste 'child' HTML element
floor	Math	methode	Rondt de waarde af naar beneden
focus	element	methode	Plaatst de cursor op het HTML elementveld
fontsize	String	methode	Zet de string in de gewenste lettergrootte
forEach	array	methode	Voert het set van statements uit voor elk element van de array
forms	document	verzameling	Bevat alle HTML elementen 'form' in de array mode
fromCharCode	String	methode	Zet een Unicode-nummer om in een teken
getAttribute	element	methode	Geeft de elementwaarde
getCookie	document	methode	Geeft de cookie gegevens
getData	event	methode	Geeft de 'drag' waarde
getDate	Date	methode	Geeft het dagnummer van de maand
getDay	Date	methode	Geeft het dagnummer van de week
getElementById	document	methode	Geeft het eerste element van de gespecificeerde id
getElementsByClassName	document	methode	Geeft de array van alle gespecificeerde CSS klassen
getElementsByTagName	document	methode	Geeft de array van alle gespecificeerde HTML elementen
getFullYear	Date	methode	Geeft het jaarnummer
getHours	Date	methode	Geeft de uur
getItem	localStorage	methode	Geeft de waarde van de sleutel in de HTML Local/Session Storage
getMinutes	Date	methode	Geeft de minuut
getMonth	Date	methode	Geeft het maandnummer
getSeconds	Date	methode	Geeft de second
hasOwnProperty	-	functie	Controleert of het object item aanwezig is
go	history	methode	Gaat naar de volgende webpagina volgens de historielijst
href	location	eigenschap	Bevat de URL van de webpagina
images	document	verzameling	Bevat alle HTML elementen 'img' in de array mode
indexOf	String	methode	Geeft de positie van de eerste gevonden zoekwaarde in de string
innerHeight	window	eigenschap	Bevat de vensterhoogte exclusief interface elementen (d.i. scroll- en toolbars)
innerHTML	element	eigenschap	Vervangt de inhoud van het HTML element
innerWidth	window	eigenschap	Bevat de vensterbreedte exclusief interface elementen (d.i. scroll- en toolbars)
insertBefore	element	methode	Voegt een nieuw HTML element toe als het eerste
item	element	methode	Geeft het adres van het HTML element
isFinite	-	functie	Controleert of het object numeriek is
isNaN	-	functie	Controleert of het object non-numeriek is
join	array	methode	Voegt array elements samen naar de string
lastIndexOf	String	methode	Geeft de positie van de laatste gevonden zoekwaarde in de string
length	String	eigenschap	Bevat de lengte van het object
lineTo	canvas	methode	Trekt een rechte lijn naar het gewenste punt in de canvas
lineWidth	canvas	eigenschap	Bevat de lijndikte in de canvas
links	document	verzameling	Bevat alle HTML attribute 'href' in de array mode
location	location	object	Bevat de URL informatie van de webpagina
log	console	methode	Stuurt de string naar de console
match	String	methode	Voert een reguliere expressie uit
Math	Math	object	Bevat het ingebouwde wiskundige object
max	Math	methode	Geeft de hoogste waarde
min	Math	methode	Geeft de laagste waarde
moveTo	canvas	methode	Gaat naar het gewenste punt zonder te tekenen in de canvas
moveTo	window	methode	Verplaatst het venster naar het gewenste plek
navigator	navigator	object	Bevat de informatie van de browser
nodeName	object	eigenschap	Bevat de naam van het object
nodeValue	object	eigenschap	Bevat de waarde van het object
Number	number	object	Bevat het getal; genereerd door: var … = …;
onerror	object	event	Voert het programma uit als er iets mis gaat
onload	object	event	Voert het programma uit, nadat de webpagina geladen is
open	window	methode	Opent een nieuwe browservenster
outerHeight	window	eigenschap	Bevat de vensterhoogte inclusief interface elementen (d.i. scroll- en toolbars)
outerWidth	window	eigenschap	Bevat de vensterbreedte inclusief interface elementen (d.i. scroll- en toolbars)
parentElement	element	eigenschap	Bevat het 'parent' HTML element
parentNode	element	eigenschap	Bevat het 'parent' HTML element van het 'child' HTML element
parse	JSON	functie	Zet de JSON tekst om in een JavaScript object
parseFloat	-	functie	Geeft de eerste decimale waarde uit de string
parseInt	-	functie	Geeft het eerste gehele getal uit de string
PI	Math	eigenschap	Bevat de waarde van Pi (3.1415926…)
pop	array	methode	Verwijdert het laatste array element
pow	Math	methode	Bevat de waarde van … tot de macht …
preventDefault	event	methode	Verhindert het openen van de URL
print	window	methode	Print het browservenster
prompt	window	methode	Geeft een dialoogvenster weer met een inputveld samen met de knoppen 'OK' en 'Annuleren'
push	array	methode	Voegt een of meer nieuwe elementen aan het eind van de array
querySelector	document	methode	Geeft de eerste gespecificeerde CSS selector
querySelectorAll	document	methode	Geeft de array van alle gespecificeerde CSS selectors
random	Math	methode	Genereert een willekeurig decimaal getal tussen 0 en 1
reload	location	methode	Vernieuwt de URL van de webpagina
remove	localStorage	methode	Verwijdert de sleutel uit de HTML Local/Session Storage
removeChild	element	methode	Verwijdert het 'child' HTML element
replace	location	methode	Vervangt de URL van de webpagina
replaceChild	element	methode	Vervangt het 'child' HTML element
resizeTo	window	methode	Wijzigt de venstergrootte
reverse	array	methode	Sorteert array elements in de omgekeerde volgorde
round	Math	methode	Rondt de waarde op het dichtbijzijnde getal af
rows	table	verzameling	Bevat de verzamelingen van de tabel-rijen
screen	object	eigenschap	Bevat de informatie van het beeldscherm
selectedIndex	object	eigenschap	Bevat de index van de lijst van het HTML element 'select'
self	window	eigenschap	Bevat het browservenster
setAttribute	element	methode	Vervangt de elementwaarde
setCookie	document	methode	Vervangt de cookie gegevens
setData	event	methode	Vervangt de waarde door de 'drag' waarde
setInterval	window	methode	Voert het programma herhaaldelijk uit na het aantal milliseconden
setItem	localStorage	methode	Vervangt de waarde van de sleutel in de HTML Local/Session Storage
setTimeout	window	methode	Voert het programma éénmalig uit na het aantal milliseconden
shift	array	methode	Verwijdert het eerste array element
slice	array	methode	Selecteert een of meer array elementen en maakt er een nieuwe array van
sort	array	methode	Sorteert array elements
splice	array	methode	Voegt een of meer nieuwe elementen in de array en/of verwijdert een of meer array elementen
split	String	methode	Split de string naar de tabel van substrings
sqrt	Math	methode	Bevat de vierkantswortel van de waarde
stopImmediatePropagation	Event	methode	Voorkomt dat andere luisteraars van dezelfde gebeurtenis worden opgeroepen
SQRT1_2	Math	eigenschap	Bevat de vierkantswortel van ½ (0.7071067…)
SQRT2	Math	eigenschap	Bevat de vierkantswortel van (1.4142135…)
stroke	canvas	methode	Tekent de omtrek van het vastgelegde pad in de canvas
strokeRect	canvas	methode	Tekent de rand van een rechthoek in de canvas
strokeStyle	canvas	eigenschap	Bevat de kleur en doorzichtigheid van de rand van nadien getekende paden in de canvas
style	object	eigenschap	Bevat de style voor CSS elementen die hierachter komen
substr	String	methode	Geeft de gedeelte van de string
test	RegExp	methode	Test voor een match in de string en geeft het resultaat: false of true
toFixed	Number	methode	Zet het getal om in een tekenreeks, waarbij op een bepaald aantal decimalen afgerond wordt
toLowerCase	String	methode	Zet de string alles in kleine letters
toString	object	methode	Zet het object om in de string
toUpperCase	String	methode	Zet de string alles in hoofdletters
trim	String	methode	Verwijdert de witruimte aan beide zijden
typeof	-	operator	Geeft de type van de variable
unshift	array	methode	Voegt een of meer nieuwe elementen aan het begin van de array
userAgent	navigator	eigenschap	Bevat de user-agent informatie
value	input text	eigenschap	Bevat de waarde
valueOf	object	methode	Zet het object om in de primitieve waarde
window	window	object	Bevat de informatie van de geopende webpagina
write	document	methode	Stuurt de string naar de webpagina

Gereserveerde woorden

abstract
boolean
break
byte
case
catch
char
class
const
continue
debugger
default
delete
do
double
else
enum
export
extends
false
final
finally
float
for
function
goto
if
implements
import
in
instanceof
int
interface
long
native
new
null
package
private
protected
public
return
short
static
super
switch
synchronized
this
throw
throws
transient
true
try
typeof
var
void
volatile
while
with

Speciale variabelen

JavaScript kent echter slechts één speciale variabel 'arguments', die de array van de programma parameters van de opgeroepen functie is.

Een normale variabele kan maar één waarde bevatten.
Een array of object bevat één verwijzing naar de werkelijke inhoud. Daardoor is het verstandiger om er een Object-oriented programming van te maken voor de duidelijkheid. Bijvoorbeeld:

var mijnLijst = new Lijst();
function mijnSubroutine(){
  mijnLijst.itemA = "Alpha";
  mijnLijst.itemB = "Een";
  mijnLijst.samenvoegen(" + ");
  alert(mijnLijst.resultaat);
}
function Lijst(){
  this.itemA = "";
  this.itemB = "";
  this.samenvoegen = function(tussenvoegsel){
    this.resultaat = this.itemA + tussenvoegsel + this.itemB;
  }
}

Gebruik van CSS elementen

Voor CSS elementen kan een opdracht gebruikt worden:

document.getElementById('xxxxxxx').yyyyyyy.zzzzzzz = 'vvvvvvv';

waarbij:

xxxxxxx = een HTML id code
yyyyyyy = een HTML attribuut naam
zzzzzzz = een of meer css elementen in hiërarchie
vvvvvvv = een waarde voor het laatste css element

Gebruik van HTML elementen

Voor HTML elementen kan een opdracht gebruikt worden:

document.xxxxxxx[.xxxxxxx[.xxxxxxx]] = 'vvvvvvv';

-of-

document.xxxxxxx[.xxxxxxx[.yyyyyyy]].zzzzzzz();