Vensters
Vensters in JavaScript
Met welk type venster je ook werkt in een JavaScript-programma, je moet altijd het standaardobject window gebruiken. Elk venster heeft een titelbalk en een sluitknop.
De basisprincipes van vensters
Als je het standaardobject window gebruikt, dan moet je opgeven welk type venster je wilt maken. De drie belangrijkste typen zijn alert (waarschuwingsvenster), prompt (invulvenster) en confirm (bevestigingsvenster). Bovendien is het mogelijk een nieuw browservenster te openen en daarin opdrachten uit te voeren.
Wat je ook met vensters gaat doen, je moet steeds voor het object window de gewenste methode kiezen, zoals window.alert()
*TIP*De objectnaam window mag je in opdrachten weglaten. Zonder objectnaam geldt de opdracht voor actieve browser-vensters met de pagina met het programma.
Waarschuwingsvenster maken
Wil je een waarschuwingsvenster laten verschijnen met tekst, dan gebruik je het standaardobject window met de methode alert(). Je krijgt dan een waarschuwingsvenster met het door jou opgegeven tekst en een OK-knop.
Opdracht voor tonen van waarschuwingsvensters
De opdracht voor een waarschuwingsvenster met tekst bestaat uit de objectnaam window en de methode alert met als parameter de tekst die op het venster moet worden getoond. Wil je als waarschuwingstekst 'Dit is een ALERT!' dan wordt de opdracht als volgt;
| window.alert("Dit is een ALERT!") |
Bevestigingsvenster maken
Bij een interactieve webpagina is het bevestigingsvenster (confirm) onmisbaar. Via een confirm kan de bezoeker op een vraag reageren met OK of Annuleren.
Een bevestigingsvenster gebruik je altijd samen met stuuropdrachten if en else(else is niet altijd van toepassing, later meer in volgende tutorial). Als een bezoeker op OK klikt , worden de opdrachten uitgevoerd die bij if horen; na een klik op annuleren worden de opdrachten uitgevoerd die bij else horen (staat verder uitgelegd in een volgende JS tutorial van mij).
Opdracht voor tonen van een bevestiginsvenster
De opdracht voor een bevestigingsvenster bestaat uit de objectnaam window en de methode confirm(). Als parameter geef je de tekst op die boven de knoppen moet verschijnen. De tekst die op de knoppen staat is niet aanpasbaar.
| window.confirm("Dit is een CONFIRM!") |
Invulvenster maken
Wil je een invulvenster maken waarin de gebruiker informatie kan tikken, dan moet je window gebruiken en dan de methode prompt(). Je krijgt dan een prompt ofwel een venster met een invulregel, met een OK en een Annuleren knop en door jou opgegeven tekst.
Opdracht om invulvenster te tonen
De opdracht voor een invulvenster bestaat uit; de objectnaam window en de methode prompt() waarbij 2 parameters horen. De eerste parameter is de tekst die op het venster moet staan en de tweede is voor de standaardwaarde van de invulregel.
| window.prompt("tekst","standaardwaarde") |
Door de bezoeker ingetikte informatie verwerken
Een promptvenster moet je koppelen aan een variabele om de ingevoerde informatie te kunnen gebruiken. De informatie die in de prompt wordt ingetikt, wordt de waarde van de variabele die aan de prompt is toegekend (zie mijn vorige tutorial over variabelen).
De opdracht om een venster met invulregel te koppelen aan een variabele is als volgt;
| variabelenaam=window.prompt("tekst","standaardwaarde") |
*LET OP* Met een klik op annuleren wordt de nul-waarde aan de variabele gekoppeld (dit heeft geen consequenties voor de loop van het programma).
*WAARSCHUWING* Alles wat met een promptvenster wordt ingevoerd, wordt opgevat als een string. Ga je met de invoer rekenen, dan kan het bij het optellen fout gaan. Je moet dan de invoer omzetten naar een numerieke waarde (dit alles wordt uitgelegd in deze tutorial).
Nieuw browser-venster maken
In JavaScript programma kun je programmeren dat vanuit het actieve browser-venster een nieuw browser-venster moet worden geopend, en gesloten.
Nieuw browser-venster openen & sluiten
De opdracht voor het openen dan wel het sluiten van een nieuw browser-venster bestaat achtereenvolgens; de objectnaam window en de methode open() of close();
Bij de methode open() horen drie parameters. Met deze parameters bepaal je achtereenvolgens; welke pagina in het venster moet worden getoond, welke naam het browser-venster krijgt, en welke onderdelen het venster moet krijgen;
| window.open("URL","vensternaam","eigenschap=yes") |
Je moet ofwel geen parameters opgeven (je krijgt dan een browser-venster met een lege pagina), ofwel alle drie de parameters opgeven (je kunt in dat geval wel een of twee parameters leeg laten, bv. window.open("URL","","")).
Opdracht voor gebruiken van nieuw browser-venster
Door bij window.open() een variabelenaam te kiezen, kun je in je scripts naar het nieuwe browser-venster verwijzen.
| variabelenaam=window.open() |
Als je een nieuw browser-venster definieert, kun je voor dat browser-venster weer opdrachten geven. Dat doe je door aan de vensternaam de gewenste methode te koppelen, zoals dit;
nieuwVenster=window.open()
nieuwVenster.alert("Dit is een ALERT!")
nieuwVenster.document.write("Dit is een nieuw browservenster!") |
*WAARSCHUWING* Verwar niet de variabelenaam van het venster (de naam waarmee je in je scripts naar het nieuwe browser-venster verwijst) met de vensternaam (de naam van het venster waarmee je in HTML-tags naar het browser venster verwijst).
Knop voor openen van nieuw browser-venster
Je kunt de opdracht voor het openen van een nieuw browser-venster koppelen aan een knop; neem in de knop-tag de event handler onClick op met als waarde de opdracht window.open(). Met een klik op de knop krijg je het nieuw browser-venster.
<BUTTON name="naam" type="button"
onClick="window.open("URL","vensternaam","eigenschap=yes")...
</BUTTON>
|
Voorbeeld van een nieuw browser-venster openen en sluiten via knop met functie
Als je in je pagina de mogelijkheid wilt opnemen een nieuw browser-venster te openen en sluiten via knoppen moet je in de HEAD van je pagina twee JavaScript-functies opnemen waarmee het nieuwe browser-venster opent en sluit. Met HTML-knoppen roep je een van de twee betreffende functies aan door middel van event handlers.
Hier blijkt hoezeer HTML en JavaScript in samenspel moeten zorgen voor interactieve pagina's op je website;
<HTML><HEAD><TITLE> Maroon5-pagina met knoppen </TITLE>
<SCRIPT type="text/javascript">
function openen()
{
maroonVenster=window.open("site/MAROON5.htm")
}
function sluiten()
{
maroonVenster.close()
}
</SCRIPT></HEAD><BODY>
<H2>Klik op een knop naar keuze!</H2>
<BUTTON type="button" onClick="openen()">Maroon venster openen</BUTTON><P>
<button type="button" onClick="sluiten">Maroon venster sluiten</BUTTON><P>
</BODY></HTML> |
Einde
Zo dan zijn we nu aan het einde gekomen van deze tutorial, enige vragen kun je aan mij stellen door mij een private message te sturen en als het echt belangrijk is vraag je maar voor mijn msn adres.
|
Wat is jouw favoriete javascript framework? (S: 18, R: 2)
(4) 