Homepage » Tutorials » Javascript » Hiërarchie

Hiërarchie

Info
Door:	Mirax	Moeilijkheidsgraad:
Geplaatst op:	10-02-2004	Reacties:	15(Bekijken)
Views:	13401 (gem. 5.5814 per week)	Log in om zelf te reageren
		Waardering:	7/10 (6 stemmen)

Voordat we aan deel 5: Event handlers en deel 6: Functies gaan beginnen, moet je eerst de JavaScript hiërarchie leren kennen. De dikke Van Dale zegt dat hiërarchie 'indeling in volgorde van belangrijkheid' betekent, en daar komt het in het kort wel op neer. Door deze hiërarchie kunnen we elk object in een webpagina benoemen. Objecten zijn in dit geval dus de afbeeldingen, de formulieren, of de frames.

Als je een van deze objecten wilt benoemen, begin je eerst met document vervolgens wil je aangeven met welke element je te maken hebt, bijvoorbeeld een formulier, daarvoor gebruik je forms. Tussen teksthaken komt daarbij dan het nummer van het formulier, beginnen bij nul (0). Bij formulieren gebruik je nog de genummerde elements om de verschillende onderdelen weer te geven. Behalve werken met nummers, kun je ook werken met de namen van de objecten. Deze namen worden gedefinieerd in het objec zelf met het name-attribuut

Om dit alles wat te onderstrepen, volgt hier een html-code, waarbij de hiërarchie is benoemd.

Hiërarchie met naam

<html>
<head>
<title>Hiërarchie</title>
</head>
<body>
<form name="formulier">
<input type="text" name="tekst"> document.forms[0].elements[0] document.formulier.tekst
<input type="button"name="knop"> document.forms[0].elements[1] document.formulier.knop
</form>
<img src="jan.jpg"name="Jan"> document.images[0] document.Jan
<form name="Invoer">
<input type="text" name="naAm"> document.forms[1].elements[0] document.Invoer.naAm
<input type="checkbox"name="man"> document.forms[1].elements[1] document.Invoer.man
</form>
<img src="hans.jpg"name="Hans"> document.images[1] document.Hans
<img src="piet.jpg"name="Piet"> document.images[2] document.Piet
</body>
</html>

Waarschijnlijk is de JavaScript-hiërarchie je hierbij al wat duidelijker geworden. We zullen we dit in de later in de cursus nog veelvuldig gaan terugzien. Let bij dit voorbeeld ook op het hoofdlettergebruik. JavaScript is naamlijk hoofdlettergevoelig. Dat betekent dus dat Piet wat anders is dan piet.

«Strings en operators Event handlers »

15 reacties

branic729 Geplaatst op 21-06-2009 om 19:50

Regular Je kan ook bij <input type="button">(of bij andere input's) een atribuut toevoegen, onclick="" waar je dan je JS-script toevoegt, bv.:message(). Waarbij message() in een <script> deel staat als function.

Vkaz Geplaatst op 30-01-2009 om 19:32

Regular het werkt niet hij laat de JavaScript gewoon zien op het scherm

Onbekend lid Geplaatst op 30-09-2008 om 16:29

Spammer @omarjuul
Ik heb ook kennis van CSS maar dit is nog Chinees voor me xD

Robin18 Geplaatst op 30-09-2008 om 09:54

Regular wrm staat document.forms[0].elements[0] steeds erachter? wat voegt get toe? volgens mij niets.. naja ik snap nix van javascript, en ik begin er net mee dus daar kan het ook aan liggen xD

B-scorpion Geplaatst op 11-01-2008 om 15:21

Regular Allemaal nuttige tips(Y). Degene die het niet door hebben advies: Pak pen & papier, probeer's te schetsen wat hier wordt uitgelegd hopelijk kom je dan wel 8ter. En kan iemand mij vertellen wat het nut hiervan is en in welke situatie je dit zou kunnen toepassen?*-)?

masterbb Geplaatst op 21-08-2007 om 20:08

Regular Na vele malen dit over nu te hebben gelezen snap ik opeens wat dit is.

Ik zal het stukje code proberen uitteleggen...

Mirax heeft een formuliertje... bestaande uit 2 stukken formulier de ene is "document.form[0]"
en de andere "document.form[1]"
elke stuk formulier bestaat uit 2 delen...
de ene is "element[0]"
en de andere "element[1]"

in totaal heb je dus 4 stukken formulier die allemaal een naam als "document.form[0].element[0]" hebben

dan heeft Mirax ook nog 3 plaatjes een naam gegeven ook bestaande uit 2 delen

eerst een stuk "document.image[0]"
en gevolgt door de naam "document.Piet"

Ik hoop dat dit helder is

omarjuul Geplaatst op 14-01-2007 om 13:24

Regular idd.
Als je er naar wilt verwijzen in een script dan kun je een van de twee manieren gebruiken, waarbij de eerste wat minder werk is, en de tweede wat meer werk maar ook overzichtelijker.
Ik weet niet wat iedereen hier loop te zeiken, maar ik vind het een heldere uitleg.
Misschien speelt het feit dat ik al wat kennis van css heb mee, want daar moet je ook naar delen van de HTML verwijzen.

Zain Geplaatst op 30-12-2006 om 20:12

Regular

niet dat ik veel van JS begrijp- maar misschien kan ik wat uitleggen. ( weet niet precies wat je allemaal nodig hebt van die code though )

#	Code
`1 2 3 4 5 6`	`<form name="formulier"> // we maken een formulier aan met de naam 'formulier' <input type="text" name="veld"> // daarna een input veld, genaamd veld. // nu, als we dit willen 'linken' aan JS ( zoals ik het altijd noem ) zou je dit krijgen: document.formulier.veld`

hetzelfde als dat je in PHP dit zou doen:

#	Code
`1 2 3`	`<input type="text" name="veld"> $variabele = $_POST['veld'];`

magoe, zoals ik al zei is JS ook niet mijn sterke kant- maar misschien is er iemand mee geholpen

korstiweg Geplaatst op 13-05-2006 om 20:00

Regular ksnap dr nie egt veel van eigelijk

megasmash! Geplaatst op 07-05-2006 om 20:05

Regular mirax met haar belachelijke uitleg je moet ook heel gedetailed uitleggen en ook het resultaat zeggen 70% van de mensen begrijpen het niet

megasmash! Geplaatst op 14-02-2006 om 21:23

Regular ik snap helemaal niet wat je bedoelt met die codes ik snap ik ook niet wat je met een operator moet doen en wat krijg je dan van dit

Maurits Geplaatst op 13-02-2006 om 17:53

Regular Dit is toch ene formulier..? :S

Mirax Geplaatst op 23-01-2006 om 09:25

Moderator Achter elke regel code, staan twee manieren om ernaar te verwijzen in javascript. Er zijn zelfs nog meer manieren.

Mazigh Geplaatst op 21-01-2006 om 20:26

Regular Ik begrijp niet wat jij bedoelt met de bovenstaande code. ;)

Mazigh Geplaatst op 21-01-2006 om 19:53

Regular Ik begrijp niet wat jij bedoelt met de bovenstaande code. ;)

Om te reageren moet je ingelogd zijn.
Nog niet geregistreerd? Doe dat dan nu!

Check je domein...

Terug naar gewone pagina

Websitemaken wordt gehost door Nucleus.be