JavaScript Vensters

Inhoud

1. Een tekst weergeven in een venstertje met behulp van een Alert Box
2. Een naam vragen met behulp van een Prompt Box
3. Een vraag stellen met behulp van een Confirm Box

Een tekst weergeven in een venstertje met behulp van een Alert Box

Met behulp van javascript kun je een tekst weergeven in een venstertje. Zo'n venstertje wordt een Alert Box genoemd. Een toepassing voor een Alert Box zou kunnen zijn; een melding dat iets niet beschikbaar is op de site of een welkomsttekst.

CODE
  1. <script type="text/javascript">
  2.   function melding_geven ( tekst ) {
  3.      alert( tekst );
  4.   }
  5. </script>

Deze bovenstaande functie zal, wanneer aangeroepen, de tekst weergeven die aan de functie meegegeven wordt. De functie kun je bijvoorbeeld aanroepen vanaf een knop uit een formulier:

CODE
  1. <input type="button" value="tekstje" onClick="melding_geven( 'Hallo Wereld!' );" />

Plaats de twee bovenstaande stukjes code in je html pagina en test het in je browser. Het eerste stukje (met de javascript) moet in de Header van de pagina, en de knop moet in de Body. Als je niet weet hoe je html pagina er uit moet zien of als je neit weet wat een header en een footer zijn, volgt hier een klein voorbeeld:

CODE
  1. <html>
  2. <head>
  3. <title>Dit is mijn voorbeeldpagina</title>
  4. <script type="text/javascript">
  5.   function melding_geven ( tekst ) {
  6.      alert( tekst );
  7.   }
  8. </script>
  9. </head>
  10.  
  11. <body>
  12.    <input type="button" value="tekstje" onClick="melding_geven( 'Hallo Wereld!' );" />
  13. </body>
  14. </html>


Een naam vragen met behulp van een Prompt Box

Je kunt een bezoeker van een pagina ook een vraag stellen waarop hij/zij een tekstueel antwoord kan geven. Je kunt bijvoorbeeld vragen hoe iemand heet en daarna met behulp van een Alert Box de nieuwe bezoeker welkom heten.

CODE
  1. <script type="text/javascript">
  2.   function naam_vragen ( ) {
  3.      var naam_bezoeker = prompt( "Hallo, hoe heet jij?","" );
  4.      alert( "Welkom op mijn site, "+naam_bezoeker );
  5.   }
  6. </script>


Als je deze functie aanroept (met bijvoorbeeld dezelfde knop uit het eerste voorbeeld) wordt eerst om de naam van de bezoeker gevraagd en daarna wordt de bezoeker welkom geheten.

De code uitgelegd
[codeline]var naam_bezoeker = prompt( "Hallo, hoe heet jij?","" );[/codeline]
Als eerste vraag je de naam van de bezoeker met behulp van de PROMPT functie. Aan de prompt functie geef je 2 parameters mee (de waardes tussen de haakjes achter de functie). De eerste parameter is de vraag die je stelt en de tweede kun je leeg laten.
[codeline]alert( "Welkom op mijn site, "+naam_bezoeker );[/codeline]
In de volgende regel wordt met behulp van de ALERT functie een tekst weergegeven. Met de + kun je de tekst uit een variabele (een string genaamd) aan een tekst toevoegen. Dus hier wordt de naam van de gebruiker, die hij in de eerste regel heeft ingevuld, weergegeven in een zin.

Een vraag stellen met behulp van een Confirm Box

Je kunt een gebruiker natuurlijk ook een vraag stellen die met JA of NEE beantwoord kan worden (of beter gezegd met OK of ANNULEREN). Dat doe je als volgt:
CODE
  1. <script type="text/javascript">
  2.   function zeker_weten ( ) {
  3.      var doen = confirm( "Weet je zeker dat je dit wil doen?" );
  4.      if (doen == true) {
  5.        alert( 'Ok, dan doen we dat!' );
  6.      } else {
  7.        alert( 'Ok, dan niet!' );
  8.      }
  9.   }
  10. </script>


Met deze functie kun je dus bijvoorbeeld vragen of een gebruiker zeker weet of ie iets wil doen, bijvoorbeeld het verwijderen van een bestand of het verlaten van een pagina.

De code uitgelegd
[codeline]var doen = confirm( "Weet je zeker dat je dit wil doen?" );[/codeline]
In deze regel stel je een vraag met behulp van de CONFIRM functie. In de variabele "doen" wordt opgeslagen of de gebruiker OK (true) of ANNULEREN (false) heeft gekozen. Daarna kun je met een IF-STATEMENT een bijbehorende actie ondernemen. In het voorbeeld dus een melding geven met behulp van een ALERT functie.
[codeline]if (doen == true) {[/codeline]
In een IF STATEMENT kun je een bepaalde variabele ergens aan toetsen. Komt de waarde overeen met de gestelde voorwaarde, dan wordt de code uitgevoerd, anders word de code uitgevoerd achter de ELSE-STATEMENT.

Comments

Name: Amrit (26 December 2008 - 00:49)
Waar kan ik dit gebruiken ????

Post a comment

Name:

Comment:

Are you a real person or a spambot?

Copy the text above in the field below: