Popup schermen

In de inleiding van deze module hebben we vermeld dat JavaScript een programmeertaal is waarmee webpagina’s interactief gemaakt kunnen worden. Die interactie is goed zichtbaar als er op een website gebruik gemaakt wordt van popup’s. Een popup is een apart schermpje dat verschijnt bij het bekijken van bepaalde webpagina’s. Om door te kunnen gaan moet de bezoeker altijd op een OK-knop klikken.

In JavaScript worden 3 verschillende popup-schermen gebruikt:

Voor het gebruik van deze popup’s worden achtereenvolgens de functies window.alert (“…”), window.confirm(“…”) en window.prompt(“…”, “standaardtekst”) gebruikt. Bij al deze functies mag de prefix window worden weggelaten.

In de tekst hieronder zie je een voorbeeld van een uitwerking voor een Alert Box:

<!DOCTYPE html>
<html lang="nl">
     <head>
           <title>alert</title>
           <meta charset="utf-8">
     </head>
     <body>
           <script>
           alert ("Met Enigma heeft
           informatica geen geheimen
           meer");
           </script>
     </body>
</html>

In JavaScript kan een Alert Box ook in een eenvoudig formulier worden verwerkt. Met een formulier kunnen gegevens van de bezoeker van een website verzameld worden. Formulieren maak je in HTML. Dat is, zoals we al eerder hebben aangegeven, een taal waarmee de structuur van een webpagina kan worden beschreven. Net als CSS is HTML géén programmeertaal.

Voor de afhandeling van de gegevens die worden verkregen via een formulier is een programma of script nodig. Vaak is dat PHP, maar ook met JavaScript kunnen de gegevens van een formulier verwerkt worden. We laten hier eerst zien hoe een formulier in HMTL-code gemaakt kan worden. Daarna bespreken we hoe JavaScipt gebruikt kan worden voor het verwerken van de invoer van een formulier. In de module over PHP wordt uitgebreid stilgestaan bij het verwerken van gegevens uit een formulier met PHP.

In HTML wordt voor een formulier het element form gebruikt. Voor het indelen van een formulier kan het element fieldset gebruikt worden. Het formulier ziet er dan uit als een rechthoek. Met het element legend, dat onderdeel is van het element fieldset, kun je een naam geven aan de fieldset.

Hieronder staat een voorbeeld van een uitgewerkt formulier.

<!DOCTYPE html>
<html lang="nl">
     <head>
           <title>formulier</title>
           <meta charset="utf-8">
           <link rel="stylesheet" href="css/opmaak.css">
           <script>
               function toonNaam()
               {
                     if(document.form1.naam.value == "")
                     {
                          alert("Je bent vergeten iets in te vullen");
                     }
                     else
                     {
                          alert(document.form1.naam.value);
                     }
               }
           </script>
     </head>
     <body>
           <form name="form1">
                 <fieldset>
                       <legend>Een formulier met JavaScript</legend>
                       Vul je voor- en achternaam in:<br><br>
                       <input type = "text" size= "25" name = "naam"><br>
                       <input type = "button" value = "OK" onClick = "toonNaam()" >
                 </fieldset>
           </form>
     </body>
</html>

In de broncode van het formulier is te zien dat het element form het attribuut name heeft. Dit attribuut kan gebruikt worden om het formulier een eigen gekozen naam te geven. Standaard is de waarde van dit attribuut “form1”. Het belangrijkste element van een formulier is het input-element. Daarmee kan informatie van de bezoeker van een website worden verkregen.

Hoe het input-element eruit ziet, hangt af van het type attribuut dat aan het input-element is gekoppeld. In ons voorbeeld hebben we gebruik gemaakt van een tekstvak. Door te klikken op de knop met het label “OK” wordt de functie toonNaam() uitgevoerd. Bij het uitvoeren van deze functie wordt gecontroleerd of er iets in het tekstvak is ingevuld. Is dat niet het geval dan zal verschijnt er een venster met de melding “Je bent vergeten iets in te vullen”.
Is er wel tekst ingevuld, dan verschijnt de ingevulde tekst in een nieuw venster.
In de afbeeldingen hieronder staan voorbeelden van beide situaties.