Homepage » Tutorials » Topic onbekend » Het venster/windows

Het venster/windows

Info
Door:	Mirax	Moeilijkheidsgraad:
Geplaatst op:	10-02-2004	Reacties:	14(Bekijken)
Views:	18456 (gem. 7.6772 per week)	Log in om zelf te reageren
		Waardering:	9.3/10 (6 stemmen)

Basiscursus Javascript» Inleiding Javascript | De eerste tekst en variabelen | Strings en operators | Hiërarchie | Event handlers | Functies | Het venster/windows | Voorwaardelijke functies

Het window-element ben je vast wel eens tegengekomen, bijvoorbeeld in een van de vorige delen, zoals het waarschuwingsvenstertje dat te voorschijn kwam toen je ergens op klikte. Of een klein pop-upje bij het binnenkomen van een website. Meestal worden dat soort dingen aangezien voor reclame, wat ook vaak het geval is. Deze worden door de bezoekers zonder uitzondering als storend ervaren en dus direct weggeklikt. Kijk dus uit wanneer je deze gaat gebruiken.

We zullen eerst beginnen met de verschillende soorten waarschuwingsvenstertjes. De eerste en makkelijkste is de alert. De code hiervoor is als volgt:

window.alert('Hier de boodschap');

Dit wordt pas echt leuk als je dit in een functie gaat plaatsen. Dit kun je bijvoorbeeld als volgt doen.
Met in de head

function Link(){
window.alert('We gaan naar die en die link');
window.location.href= "www.site.nl"; //vul hier de site in
}

Een link wordt dan als volgt

<a href="javascript:Link()">Klik hier!</a>

Je zal waarschijnlijk wel doorhebben wat het effect van dit script is. Wat hier ook nieuw is, is het commentaar tussen het script. In JavaScript kun je commentaar aangeven door middel van twee slashes (//). Op de volgende regel kun je dan weer gewoon verder gaan. Wil je meerdere regels commentaar invoegen, dan begin je die met /*, en beeing je die met */. Ik denk dat het gebruik van de alert nu wel duidelijk is.

De volgende twee zijn de bevestiging en de prompt. De bevestiging is een soort alertvenster, maar dan met de opties 'Ok' en 'Annuleren' of 'Cancel'.
De code van een bevestiging wordt dan

window.confirm('Hier de tekst');
<a href="#"onClick="window.confirm('Kies OK of Annuleren');">Klik hier voor een voorbeeld</a>.

Druk de gebruiker in zo'n venster op 'OK' dan geeft dit de waarde 'true', drukt hij op 'annuleren', dan krijgt dit de waarde 'false'. Hierop komen we ook in het volgende deel terug.

De laatste van de drie is de prompt. Dit is een venster waarin de gebruiker bijvoorbeeld zijn naam kan invoeren.De code voor een scriptprompt ziet er zo uit:

window.prompt('Hier komt de tekst','Hier de tekst in het tekstvak');

Wat je zoal met deze functies kan aanvangen wordt in het volgende deel van deze cursus nog een stuk duidelijker.

Tenslotte is er nog het open van een nieuw venster. Hier heb je te maken met iets meer variabelen dan bij de vorige genoemde venstertjes. De algemene code om een nieuw venster te openen is

window.open('Hier de link');

Maar dit is niet alles wat er mogelijk is met het openen van een nieuw venster. Zo kan je bijvoorbeeld de grote en breedte van het nieuwe venster bepalen, de plaats van het venster op het scherm, en je kan allerlei eigenschappen van het venster bepalen, zoals de werkbalken en de statusbalk.

Dit komt er dan zo uit te zien:

window.open('De link', 'De naam die je het venster meegeeft', 'Deeigenschappen');

Hieronder volgt een overzicht. Bij de eigenschappen width en heigth, left en top, screenX en screenY worden de maten in pixels aangeven (getallen), bij alle andere variabelen volstaat een yes of 1 voor de eigenschap wel toepassen en een no of 0 voor de eigenschap niet toepassen. Let op bij de eigenpassen noteren: Er worden geen quotes of aanhalingtekens meer gebruik, en ook geen spaties!

Pas ook op voor de downloadbare Google Toolbar voor Internet Explorer. Als die bij de gebruiker is ingesteld, dan staat deze ook in het venster, als de toolbar, menubar, en/of location is ingeschakeld.

Hier onder nog een voorbeeld om het bovenstaande te acentueren:
De volgende code:

<a href="#"onClick="window.open('http://www.websitemaken.be', 'Venster','width=500,height=300,left=200,top=78,screenX=200, screenY=78,status=1,location=0,toolbar=0,menubar=1, scrollbars=1,resizable=0');">dit</a>

als resultaat een pop-up venster.

«Functies Voorwaardelijke functies »

14 reacties
juliusjk	Geplaatst op 26-12-2008 om 12:02
Regular	bij doet die laatste code helemaal niks...
Mirax	Geplaatst op 21-12-2008 om 13:56
Moderator	Deze kun je gewoon in de body plaatsen.
B-scorpion	Geplaatst op 15-11-2008 om 16:06
Regular	Inderdaad, die laatste begrijp ik ook niet. Komt die in je <head> </head> te taan of <body> </body>
Gasparov	Geplaatst op 25-08-2007 om 19:49
Regular	de laatste code begrijp ik niet
casss	Geplaatst op 12-10-2006 om 20:17
Regular	ik krijg alleen dee onderste
Stijn192	Geplaatst op 27-05-2006 om 17:21
Regular	@Freekman91 Ha die freekman 91, je had nogal een paar grote fouten in je coding zelf gemaakt. 1 Een functions moet je altijd binnen de scripting language stuk zetten, om simpel te zijn, functions moeten binnen <script language="Javascript"> Script </script>staan, functions staan altijd in de head zoals je al had begrepen, de head functioneert ervoor om vooraf variabele te laden etc. 2. Iets wat je de bezoeker van je site wilt laten zien moet altijd in de body tag staan, raar genoeg ontbreekt die bij jou, voor de duidelijkheid, basis opbouw van een site: <html> <head> </head> <body> Hier hoort de link te staan </body> </html> Nu nog de verbetere code hier in kant en klare brokken: <html> <head> <script language="Javascript"> function Link(){ window.alert('We gaan naar websitemaken.be'); window.location.href= "http://www.websitemaken.be"; } </script> </head> <body> <a href="javascript:Link()">Klik hier!</a> </body> </html>
Freekman91	Geplaatst op 26-05-2006 om 15:14
Regular	ik heb dit: <html> <head> function Link(){ window.alert('We gaan naar websitemaken.be'); window.location.href= "www.websitemaken.be"; } <a href="javascript:Link()">Klik hier!</a> </head> </html> wat doe ik fout? groetjes FJ
Freekman91	Geplaatst op 26-05-2006 om 15:05
Regular	ik heb dit: <html> <head> function Link(){ window.alert('We gaan naar websitemaken.be'); window.location.href= "www.websitemaken.be"; } <a href="javascript:Link()">Klik hier!</a> </head> </html> wat doe ik fout? groetjes FJ
Mirax	Geplaatst op 25-01-2006 om 14:12
Moderator	Nee, dat kan niet, maar met een paar extra functies, kan je natuurlijk wel uitrekenen waar die dan zou moeten staan. Je kan namelijk ook de schermafmetingen opvragen, zie ook (Engels): http://www.devguru.com/Technologies/ecmascript/quickref/screen.html
Munkie Midget	Geplaatst op 24-01-2006 om 16:39
Regular	Hallo, Ik vroeg me af of het ook mogelijk is om i.p.v. de afstand tot de boven- en linkerkant aan te geven, het mogelijk is om een nieuw venster gelijk in het midden van het scherm te openen. Groet, Tjerk
Grubolsch	Geplaatst op 07-09-2005 om 22:06
Moderator	Is een foutje van het huis. De slashes moet NIET worden getypt.
Michielvsb	Geplaatst op 23-07-2005 om 20:09
Regular	Als je die twee Slashes weg doed, werkt het wel.
notfunny	Geplaatst op 15-07-2005 om 14:45
Regular	bij mij ook help!
gapelvaar	Geplaatst op 18-08-2004 om 19:49
Regular	de 2 boveste dingen gaan niet, ik krijg de code op mijn scherm en geen window schermpje groetjes tom

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