Werken met formulieren

Je maakt hier en formulier waarbij de invoer direct tot een resultaat op dezelfde pagina oplevert. Het is dus geheel front-end.

Deze eerste video laat een mogelijk resultaat van de trainingen zien.
Met Komodo Edit wordt een project aangemaakt en de eerste pagina opgeslagen.
Er wordt als eerste een formulier aangemaakt met daarin een veld, waar tekst ingevoerd kan worden.
Nadat je de eerste pagina gemaakt hebt, stuur je direct de link vanuit een map in de Public Map in je Dropbox naar t.denblanken@ma-web.nl.

De tekst wordt opgehaald en in een variabele in Javascript geplaatst.
Er wordt nog een variabele gemaakt uit de DOM met document.getElementById('') om daar vervolgens de waarde weer in te stoppen.

Als een gebruiker op een invoerveld klikt, is het prettig als dat vervolgens geleegd wordt. Dit kan via de event-listener onfocus. Het element wordt door het Javascript aan een variabele gekoppeld. Vervolgens word daarvan de value op "" gesteld.

Deze video is een tussenstapje. Om bijzondere tekens te kunnen coderen in HTML, kun je gebruik maken van UTF-8 encoding. Voeg daarvoor in de head van je document de volgende meta-tag toe: meta charset="UTF-8" . Op de website van http://www.utf8-chartable.de/unicode-utf8-table.pl?number=1024&names=-&utf8=dec&unicodeinhtml=dec&htmlent=1 kun je dan voor alle tekens de juiste codering vinden. Voor een toelichting: zie ook: http://home.tiscali.nl/t876506/utf8tbl.html

In een formulier kun je checkboxes maken. Als je er op klikt worden ze geselecteerd en als je er opnieuw op klikt, verliezen ze hun selectie weer.
De input-tag krijgt de volgende attributen mee: type=checkbox onclick=verwerkInJS() name=groepsnaam id=labelnaam value=waarde.

Met de id kun je ook nog een label toevoegen als tag bij de checkbox. Dit is iets beter dan dat je gewoon tekst bij de checkbox ingeeft. De label-tag krijgt een for-atribuut mee dat gelijk is aan de id van de checkbox. Hierdoor zijn ze aan lekaar gekoppeld. Als je dus op het tabel klikt, is dat hetzelfde als dat je op de checkbox zelf klikt.

Een klik op een checkbox moet tot een tekst leiden op de pagina. Hiervoor wordt een lege paragraaf aangemaakt. Met het onclick attribuut wordt in het javascript de functie verwerkVakanties() aangeroepen. Deze maakt dan een tekst in de paragraaf.

Om de waarde op te vragen kijk je eerst of de checkbox geselecteerd is. Maak daarvoor een variabele aan, die de checkbox uit de DOM haalt:
var bel = document.getElementById('bel');
Je kunt dan in een if() nagaan of deze geselecteerd is: if (bel.checked). Mocht dat zo zijn dan voeg je de waarde van de checkbox toe:
vakantieTekst += bel.value;

de functie voegToe() voegt spaties tussen de landen. Door vast te stellen hoeveel landen er gecheckt zijn en hoeveel landen er nog door het script moeten worden toegevoegd, weet je of er een ", " of " of " tussen geplaatst moet gaan worden.
In deze video zie veel toepassingen van het if-statement en het if-else-statement.

Tot slot kan het script eenvoudig bepalen dat er helemaal geen landen geselecteerd zijn. In dat geval wordt Nederland als land toegevoegd.

In het eerste deel worden tabellen ingevoegd voor een overzichtelijker formulier.
Daarna worden er radiobuttons (keuzerondjes) aan het formulier toegevoegd. Dit is weer een input-tag maar nu met het type-attribuut op 'radio'.
Om het label te kunnen koppelen krijgt de tag weer een id-attribuut mee.
het name attribuut verdient speciale aandacht. Deze moet voor alle items dezelfde zijn Hierdoor zal de ene selectie een vorige vervangen. Er blijft dus telkens maar 1 keuzerondje geselecteerd.

Aan de radiobutton wordt een event-handler toegevoegd onclick=voertbalClub().
Deze roept de Javascriptfunctie aan.
In dat script wordt voor elke knop een variabele aangemaakt. Als blijkt dat deze gecheckt is, dan wordt er een tekst gestopt in een tekstvariable. De inhoud daarvan wordt tot slot in het document in een paragraaf gezet.

Keuzelijsten zijn uitklapbaar, waarna de gebruiker een item kiest. De tag is de <select> .Deze krijgt de attributen id, name en onchange mee:
<select id= name= oncange=></select>.
De verschillende opties zitten als tags daarbinnen en de <option> krijgt als attribuut value mee:
<option value=3 >3</ option>
Voor de dagen van de week zijn de value's en inhouden aan elkaar gelijk. Op het onchange event moet de maandkeuze mogelijk worden. Hierdoor is het niet mogelijk een maand te kiezen zonder dat er een dag gekozen is.
Daarom wordt de maandkeuze in een <span id= ></ span> gezet. Deze kan dan door het script worden verborgen.

Het script moet eerst een deel van de DOM verbergen. Dit deel van de de DOM moet dus eerst een variabele worden. Omdat het script nu direct bij het inlezen wordt uitgevoerd (en niet na een handeling van de bezoeker) moet dit eerst weer binnen een init-functie worden geplaatst, die wordt aangeroepen nadat de pagina helemaal geladen is.
De variabele laat zich nu eenvoudig manipuleren: maandKeuze.style.display='none'.
Als deze variable binnen een andere functie wordt aangeroepen, dan werkt deze niet meer. Een variabele werkt slechts binnen de functie, waar deze is aangeroepen. De scope is slechts beperkt. In een andere functie moet hij daarom opnieuw worden aangemaakt.
De variabele dag wordt echter buiten de functies gedeclareerd en werkt daarom binnen alle functies.

In deze video worden data vastgelegd. Te beginnen met die opgegeven geboortedatum.
Zowel de dag als de maand worden vastgelegd uit de variabelen, die uit het keuzemenu gehaald zijn.
Ook de begindata van de sterrenbeelden worden in data-variabelen gezet. Dit met een andere setMonth()-opdracht waarbij twee getallen worden ingevoerd. Het eerste getal is het maandnummer, waarbij januari nummer 0 heeft. Het tweede cijfers is de dag.
Dit alles is natuurlijk nodig om vast te kunnen stellen tussen welke data de geboortedatum ligt, zodat het sterrenbeeld bepaald gaat worden.

Kijk of de variabele geboortedatum kleiner is dan de begindatum van een sterrenbeeld en kleiner is dan de daarop volgende startdatum. Als die dat Date()-object er tussen ligt kun je de variabele sterrenbeeld een waarde geven.
Dit moet voor elke maand gebruiken, daarvoor gebruiken we het if-else statement. Alle data na 21 december zijn weer steenbok.
De waarde van de variabele wordt weer in de resultaat pagina gebracht.

In de uitvoer moet een plaatje worden opgeroepen. Hiervoor wordt een mapje met afbeeldingen worden geplaatst.
Het is hier praktisch als de namen van de afbeeldingen overeenstemmen met de sterrenbeelden. Door een reeks te maken met html-code en de variabele, ontstaat er dus een afbeelding met daaronder de naam van het sterrenbeeld.

Plaats je resultaat on-line, bijvoorbeeld in de Public map van je Dropbox.
Stuur een link van de pagina (als dat nog niet gedaan is) naar t.denblanken@ma-web.nl.
In de Public map van Dropbox vind je die link door met je rechter muisknop op het bestand te klikken en te kiezen voor: Dropbox >> Copy Public Link.