Basis CSP in 3 weken

Basis Client Side Scripting in 3 weken

Basis CSP in 3 weken

In deze basis-cursus CSP in 3 weken maak je kennis met Javascript, daarvoor gebruiken we de onderstaande modules.
Niet alle modules worden gebruikt, hieronder staat wat er in deze eerste lessen behandeld wordt. In de modules staan links naar basis-scripts die je kan kopieren en gebruiken om op verder te bouwen.

Week 1

Module A: inleiding
- Client-Side-Scripting versus Server-Side-Scripting
- Animaties met PHP of JS ?
- geen alert meldingen toepassen!
Module B: waar staat JS?
- in een tag
- In de HEAD (of onder in body) in script-tags
- In een aparte JS-file
Module C: Werken met variabelen, getallen en tekst
- Variabelen, declareren
- Tekst samenvoegen
- Rekenen met getallen
Module F: INPUT en DIV's beschrijven
- input type=text velden gebruiken
- document.getElementById("...").innerHTML gebruiken
Geintje: Moving button
- Bij mousover op button, de button verplaatsen ;-)
- Gebruik het event onmouseover om te weten of je met de muis over een element gaat.
  (bv: <button id="btn" onmouseover="move()">Klik mij</button>)
- Gebruik document.getElementById("...").offsetLeft; om de x positie van de button op te vragen
- Gebruik document.getElementById("...").style.left = x + "px"; om een nieuwe x positie van de button in te stellen

Kleuren klik-game

Zet een kleurengrid op zoals hiernaast. Kies zelf of je daar
<table> of <div> (met float:left) voor gebruikt
zet de stijl in een apart bestand "stijl.css"
Haal de kleur op van 1 van de vierkantjes door er op te klikken (in console.log)
zorg dat de onderste balk ook die kleur krijgt
...

Maak de volgende opdrachten

Maak opdracht 3
Maak opdracht 6
Maak een begin met de kleuren-klik-game

Week 2

Verder met de kleuren game. We gaan uit van de volgende beginsituatie:

Je hebt een grid van 3x3 kleuren in je HTML liggen
de kleuren heb je in een array staan
Je hebt een functie waarmee je de 9 kleuren in de array kan shuffelen
Je hebt een functie waarmee je de 9 divs een achtergrondkleur geeft vanuit de array

Voor het verdere spel heb je de volgende Javascript onderdelen nodig:

Random waarden bepalen
Om bij starten van het spel een willekeurige kleur te kiezen uit de lijst met kleuren kan de functie Math.random() worden gebruikt
- Zie module J voor bepalen van random waarden
- Zorg dat je de functie random gebruikt om een een getal tussen de 0 en 8 te genereren (met 9 kleuren)
- Zet je lijst met kleuren in een array en zorg dat er met een druk op een knop een willekeurige kleur uit die lijst verschijnt (als achtergrondkleur van een div)
Timer functies gebruiken
Een spel-element kan zijn dat bij starten van de game, bijv. om de 2 seconden, de het kleuren-grid geshuffeld wordt en de de te keizen kleur vernieuwd.
Hiervoor kan de functie setInterval() worden gebruikt
- Zie module L voor het gebruik van de setInterval() functie
- Zorg dat bij openen van de pagina, met setInterval() het grid om de 2000ms wordt hershuffeld
- Zorg dat je bovenstaande hershuffel met een strat-knop kunt starten en dat hij dat 10 maal doet
- zorg dat bij elke klik het resultaat (goed/fout) wordt aangevuld in een output-div

Maak de volgende opdrachten

Voeg onder de 9 kleuren-divs een "hoofdVak" (div) toe, met een random achtergrond kleur (van die 9)
Voeg een onclick-event aan de 9 divs toe die wanneer je op die div klikt, de achtergrondkleur van de geklikte div vergeleken wordt met de kleur van het "hoofdVak". Zijn ze gelijk, zet dan in een output div "oke" en anders "FOUT"
Voeg een timerinterval toe waardoor na openen van de pagina het grid en het hoofdvak in totaal 10x vernieuwd wordt met geshuffelde kleuren
Zorg dat je bij elke klik op een kleur een regel aan de output toevoegd met of je goed of fout geklikt hebt
Verdere game-mogelijkheden:
- sla het aantal fouten per keer game-run op met naam en geef een klassement
- Maak het aantal kleuren instelbaar van 2-16 kleuren
- Zorg dat het inetrval voor reshuffelen van het grid steeds korter wordt
Screendump scherm game:
Screendump code (overzicht functions)

Week 3

Nog een game.. :-)
Doel: verder oefening in:

loops, if-then-else
logische opbouw met functions
zelf commando's zoeken en vinden op Internet
gebruik HTML5 Canvas

Moving divs en HTML5-Canvas.

Opdrachten:

moving button

Zet een button in een pagina en laat deze met een mouseover verplaatsen
Wanneer de button op 500px afstand komt, moet hij terug bewegen
vervang de 500px voor de randen van het scherm (zoek op Javascript window height op internet)
zet de button in een div en laat hem tegen de randen van de div terugkaatsen

moving div

plaats een div van 500 x 500px met daarin een div (position:relative) van 20 x x20px
schrijf een JS die de kleine div laat stuiteren binnen de grote div
houdt met een onclick op de kleine div bij hoe vaak je er op geklikt hebt
zorg dat na een klik de kleine div op een willekeurig andere plek staat

Canvas

Bekijk op 15euros.nl "games", ga naar de lesbrieven, lees vanaf lesbrief 4 hoe je een Canvas game moet maken

Inleiding

Wat is Javascript, waarvoor heb je het nodig?
Voorbeelden van gebruik.

Javascript: een scripttaal in je HTML

HTML is een opmaaktaal waarmee je een webpagina kan bouwen. HTML kan daarom alleen teksten bevatten, opmaak, en verwijzigen naar afbeeldingen.
Wanneer je interactie in een pagina wilt hebben (je klikt ergens op en er verschijnt een popup, of je gaat met de muis ergens overheen en de kleur wijzigt), dan heb je een scripttaal nodig.
We gaan er in deze cursus van uit dat je al basiskennis hebt van een andere bekende scripttaal: PHP.
Het verschil echter met JavaScript is dat PHP een server-side scriptaal is, en JavaScript eenclient-side scriptaal. Het PHP-script wordt daarom al op de server afgehandeld en Javascript wordt pas later op jouw computer (de client), door de browser afgehandeld.

PHP: een server-side scripttaal. Hoe werk dat?

Je typt een URL in je browser
Op de server wordt gekeken of het een *.php pagina is
zo ja: de server vertaalt de php en geeft de pagina als tekstpagina terug aan je browser
zo nee: de server geeft gewoon de hele tekstpagina terug aan je browser

PHP vertalen gebeurt op de server, dat kan je broweser niet eens. Wanneer je direct een PHP-pagina in je browser opent geeft dit een hoop onzin weer...

Wanneer je wilt dat een muisbeweging een popup veroorzaakt, moet dat in de browser geregeld worden. Daar heb je dus een client-side scripttaal voor nodig: Javascript.
Let op: Javascript is heel wat anders dan Java!!
Omdat Javascript in je browser afgehandeld wordt, moet de Javascript in de pagina staan die je binnenhaalt. Javascript kan gewoon in een HTML pagina staan!

Javascript: een client-side scripttaal. Hoe werk dat?

Je typt een URL (*.htm) in je browser
De server geeft gewoon de hele tekstpagina inclusiev Javascript terug aan je browser
je browser geeft de HTML code, opgemaakt weer
de browser vertaalt het Javascript en voert deze uit indien nodig

In de broncode kun je alle Javascript altijd gewoon lezen!

Bekijk de volgende acties en ligt toe of het clientside (met Javascript) of serverside (met bijv. PHP of ASP) gebeurt:

animaties in pagina
click-actie op button
database opvraag
wachtwoord check
form validatie
form aanvullen

Om tussen de HTML code aan te geven dat er een stuk Javascript staat, wordt dit JS ingesloten
door de tags <script> en </script>.
Iets vollediger is de openingstag: <script type="text/javascript"> waar ook nog in aangegeven wordt wat voor soort scripttaal er volgt.
In het bijgaande voorbeeld staat deze code in de <body>. Na de eerste alinea worden de javascript-tags geopend en het commando window.alert gegeven waarmee je in een popup schermpje te zien krijgt. Voor deze regel staan 2 slashes, om het script niet uit te alten voeren
Proberen: kopieren en slashes weghalen!
Het script wordt bij het openen van de <body> meteen uitgevoerd wanneer je hem opstart.

Wanneer je de javascript functies niet direct in je HTML code zet maar als function in binnen de <head>, kun je deze functies aanroepen wanneer je wilt en ze niet meteen uitvoeren bij het openen van de pagina.

Hierna komt een javascript groet.

Hiervoor stond een javascript groet.

Waar staat je Javascript?

Javascript-code kan staan:

binnen script-tags in de head
binnen script-tags in de body
in een aparte *.js file
direct in een tag

Waar staat het Javascript binnen je HTML?

Waar je Javascript neer zet kan afhangen van wat je er mee wil, hoeveel het is en andere dingen. Javascript kan op 4 verschillende plekken in je HTML-code staan:

1. Binnen script-tags in de <head>
1 <html> 2 <head> 3 <title> 4 Test Javascript 5 </title> 6 <script type="text/javascript"> 7 window.alert("hello world"); 8 </script> 9 </head> 10 <body> 11 Hallo 12 </body> 13 </html>	De HTML pagina hiernaast zal zonder het Javascript commando (regel 7), in de eerste instantie alleen de tekst "Hallo" in de <body> tonen. Omdat er in de <head>, <script>-tags zijn toegevoegd (regel 6, 7, 8) met daarin meteen het commando window.alert("hello world"); gebeurt het volgende wanneer de browser deze pagina laadt: De browser leest regel 1 t/m 6 in en voert uit (de <title> is dus geladen) De browser herkent het Javascript in regel 7 en voert dit uit De popup verschijnt en de uitvoering van de HTML pagina gestopt totdat de popup gesloten wordt pas na sluiten van de popup zie je dan ook "Hallo" in de <body> verschijnen

1. Binnen script-tags in de <head>

1 <html>
2     <head>
3        <title>
4           Test Javascript
5        </title>

6        <script type="text/javascript">
7           window.alert("hello world");
8        </script>

9     </head>
10     <body>
11        Hallo
12     </body>
13 </html>

De HTML pagina hiernaast zal zonder het Javascript commando (regel 7), in de eerste instantie alleen de tekst "Hallo" in de <body> tonen.

Omdat er in de <head>, <script>-tags zijn toegevoegd (regel 6, 7, 8) met daarin meteen het commando window.alert("hello world"); gebeurt het volgende wanneer de browser deze pagina laadt:

De browser leest regel 1 t/m 6 in en voert uit (de <title> is dus geladen)
De browser herkent het Javascript in regel 7 en voert dit uit
De popup verschijnt en de uitvoering van de HTML pagina gestopt totdat de popup gesloten wordt
pas na sluiten van de popup zie je dan ook "Hallo" in de <body> verschijnen

2. Binnen script-tags in de <body>
1 <html> 2 <head> 3 <title> 4 Test Javascript 5 </title> 6 </head> 7 <body> 8 Hallo 9 <script type="text/javascript"> 10 window.alert("hello world"); 11 </script> 12 </body> 13 </html>	Deze HTML pagina doet precies hetzelfde als de vorige, alleen wordt nu ook het begin van de <body> geladen. Dus: De browser leest regel 1 t/m 8 in en voert uit (de <body> met "Hallo" wordt getoond) De browser herkent het Javascript in regel 10 en voert dit uit De popup verschijnt en de uitvoering van de HTML pagina gestopt totdat de popup gesloten wordt pas na sluiten van de popup wordt de pagina juist gesloten met </body> en </html>

2. Binnen script-tags in de <body>

1 <html>
2     <head>
3        <title>
4           Test Javascript
5        </title>
6     </head>
7     <body>
8        Hallo

9        <script type="text/javascript">
10           window.alert("hello world");
11        </script>

12 </body>
13 </html>

Deze HTML pagina doet precies hetzelfde als de vorige, alleen wordt nu ook het begin van de <body> geladen. Dus:

De browser leest regel 1 t/m 8 in en voert uit (de <body> met "Hallo" wordt getoond)
De browser herkent het Javascript in regel 10 en voert dit uit
De popup verschijnt en de uitvoering van de HTML pagina gestopt totdat de popup gesloten wordt
pas na sluiten van de popup wordt de pagina juist gesloten met </body> en </html>

Het maakt niet veel uit waar bij 1. of 2. het Javascript staat: in beide gevallen voert hij het script meteen uit voordat de hele pagina geladen is...

3. In een aparte *.js file
De file "index.htm: 1 <html> 2 <head> 3 <title> 4 Test Javascript 5 </title> 6 <script type="text/javascript" src="test.js"> </script> 7 </head> 8 <body> 9 Hallo 10 <script type="text/javascript"> 12 </script> 13 </body> 14 </html> De file "test.js: 1 window.alert("hello world");	De uitvoer hiervan is hetzelfde als bij 1. alleen hier laadt hij het script uit een apart bestand.

Met 1 regel code heeft het niet veel zin om een aparte Javascript file te maken

4. Direct met een event in een tag
1 <html> 2 <head> 3 <title> 4 Test Javascript 5 </title> 6 </head> 7 <body> 8 <p onclick="window.alert('hello world');">Hallo </p> 9 </body> 10 </html>	Er is een <p>-tag om "hallo" heen gezet. In die tag is een onclick event toegevoegd de alert wordt opgestart bij klikken op "Hallo"

quootjes nesten:
Omdat wat "onclick" al tussen dubbele quootjes (") staat, moet je enkele quootjes om 'hello world' gebruiken die binnen de dubbele van "onclick" staan..!

Vars: rekenen en lezen

Met Javascript variabelen kun rekenen, aan elkaar plakken. Tekst-velden ingevoerd door de gebruiker zijn ook variabelen die je kunt gebruiken!

Variabelen in Javascript

Je kunt met Javascript (net als in alle programmeertalen) variabelen aanmaken. Bijv. een variabele "teller" die bijhoudt hoe vaak er op knop wordt gedrukt bijvoorbeeld.
Je kunt deze variabele zelf een naam geven bijv.: teller. Wanneer je die variabele voor het eerst gaat gebruiken moet je hem ook declareren: aangeven dat een variabele is.
Een <input type ="text"> veld, is ook een soort van variabele. Je kunt met Javascript de invoerde waarde van dit veld opvragen.

variabelen declareren
1 var teller = 0; 2 var a=2, b=5, c; 3 var tekst = "Hallo"; 4 var Tekst = "";	1 Declaratie van variabele "teller". Wordt meteen op 0 gezet 2 Meerdere variabelen kun je komma-gescheiden invoeren; 3 Om een tekst in de variabele moeten quootjes staan; 4 Variabele tekst is een andere dan Tekst. Hoofdlettergevoelig!
"Lege" variabelen? In regel 1 heeft variabele teller de waarde 0 en is dus niet leeg! In regel 2 is variabele c alleen gedeclareerd, maar niet ingevuld en dus leeg! (=null) In regel 4 bevat variabele Tekst een lege tekst (string) en is dus niet null!

Met het + teken kun je in Javascript getallen bij elkaar optellen en teksten aan elkaar plakken... probleempje..!!
Je kunt de uitkomsten van de berekeningen in de volgende variabelen met een window.alert() laten zien!

invoer van <input type ="text"> veld ophalen
1 var teller = 0; 2 var a=2, b=5, c; 3 var tekst = "Hallo"; 4 var Tekst = "";	1 Declaratie van variabele "teller". Wordt meteen op 0 gezet 2 Meerdere variabelen kun je komma-gescheiden invoeren; 3 Om een tekst in de variabele moeten quootjes staan; 4 Variabele tekst is een andere dan Tekst. Hoofdlettergevoelig!
"Lege" variabelen? In regel 1 heeft variabele teller de waarde 0 en is dus niet leeg! In regel 2 is variabele c alleen gedeclareerd, maar niet ingevuld en dus leeg! (=null) In regel 4 bevat variabele Tekst een lege tekst (string) en is dus niet null!

het + teken
1 var a = 2 + 3; 2 var b = a + 4; 3 var c = "Hoi" + "Chris"; 4 var d = "Hoi " + 3; 5 var e = "2" + 3; 6 var f = "13 = " + 3 + 10; 7 var g = 3 + 10 + " = 13";	1 antwoord = 5 2 is 5 + 4 = 9 als het goed is..; 3 levert de tekst "HoiChris" op 4 geeft "Hoi 3" (terwijl 3 een getal is..!) 5 voorspel eens wat dat geeft en probeer! 6 voorspel eens wat dat geeft en probeer! 7 eigenlijk gelijk aan f..? Probeer!
Probleem met optellen van teksten en getallen Wil je 2 teksten achter elkaar plakken, gebruik je dus het + teken. In regel 5 is het onduidelijk of hij 23 of 5 neer moet zetten want de "2" is als tekst geschreven... In regel 6 en 7 staat eigenlijk hetzelfde maar omdat var g met de optelleing 3+10 begint zal hij dit waarschijnlijk eerst als 13 uitrekenen en de tekst erachter plakken.. In regel 6 wordt eerst een tekst gezet en daarna worden de getallen er tekstueel aan geplakt!

het + teken

1 var a = 2 + 3;
2 var b = a + 4;
3 var c = "Hoi" + "Chris";
4 var d = "Hoi " + 3;
5 var e = "2" + 3;
6 var f = "13 = " + 3 + 10;
7 var g = 3 + 10 + " = 13";

1 antwoord = 5
2 is 5 + 4 = 9 als het goed is..;
3 levert de tekst "HoiChris" op
4 geeft "Hoi 3" (terwijl 3 een getal is..!)
5 voorspel eens wat dat geeft en probeer!
6 voorspel eens wat dat geeft en probeer!
7 eigenlijk gelijk aan f..? Probeer!

Probleem met optellen van teksten en getallen
Wil je 2 teksten achter elkaar plakken, gebruik je dus het + teken.
In regel 5 is het onduidelijk of hij 23 of 5 neer moet zetten want de "2" is als tekst geschreven...
In regel 6 en 7 staat eigenlijk hetzelfde maar omdat var g met de optelleing 3+10 begint zal hij dit waarschijnlijk eerst als 13 uitrekenen en de tekst erachter plakken..
In regel 6 wordt eerst een tekst gezet en daarna worden de getallen er tekstueel aan geplakt!

Een oplossing van het probleem
Wil je iets uit voeren als:
var tekst = "Hallo ik ben 1 jaar ouder geworden, namelijk " + 20 + 1 + " jaar"
dan kun je haakje om de berekening zetten zodat hij die eerst uit voert:
var tekst = "Hallo ik ben 1 jaar ouder geworden, namelijk " + (20 + 1) + " jaar"
Ook worden er wel eens trucjes uitgehaald als: "... namelijk " + 20*1 + 1*1 + " jaar" waarbij je beide getallen met 1 vermenigvuligd waardoor hij ze ook als getal herkent. Een tekst kun je tenslotte niet met 1 vermenigvuldigen..!

nog geen code

Het if-else-statement

Met een if-statement kun je de inhoud van een variabele vergelijken met een ander waarde.

Met een if-statement kun je de inhoud van een variabele vergelijken met een ander waarde.
Bijvoorbeeld:

var getal = 7;
if( getal > 7 )
{
window.alert("het getal is groter dan 7");
}
else
{
window.alert("het getal is kleiner of gelijk aan 7");
}

Gebruik je "groter of gelijk aan, dan schrijf je dat net zoals je zegt: >=
Bijvoorbeeld:

var getal = 7;
if( getal >= 7 )
{
window.alert("het getal is groter of gelijk aan 7");
}
else
{
window.alert("het getal is kleiner dan 7");
}

Wil je kijken of de waarde gelijk is aan een andere waarde dan gebruik je een "vergelijkende is": ==
Bijvoorbeeld:

var getal = 7;
if( getal == 6 )
{
window.alert("het getal is gelijk aan 6");
}
else
{
window.alert("het getal is niet gelijk aan 6");
}

code

Functies

Zet je de Javascript code binnen een functie, dan kun je die code zo vaak en wanneer je maar wilt oproepen

Je kunt een Javascript functie (die normaal in de head staat) aanroepen d.m.v. een event. Zo kun je bijvoorbeeld in de paragraph-tag een onclick event zetten:
<p onclick="groet()" >
De functie "groet()" wordt aangeroepen wanneer je op deze paragraph klikt
</p>

Er zijn vele events waarmee je de uitvoering van een Javascript kan triggeren o.a.:

onclick
ondblclick
onmouseover
onload
...etc. Zoek op internet een paar andere op en probeer ze uit!

Je kunt meerdere parameters aan een functie meegeven.
Uitleg volgt...
Maak opdracht 4

code

DIVs beschrijven

Met het commando innerHTML kun je de inhoed van een div of een andere tag ophalen, maar ook overschrijven

Beschrijven van een DIV

Met de Javascript "DOM" (uitgebreider beschreven in de volgende module) kun je met document.getElementById("divA").innerHTML = "Hoi"; de inhoud van een <div> vervangen door de tekst "hoi".

Zo kun je bijvoorbeeld in een pagina waar in je opmaak een stel tabs liggen, door op de tab te drukken, de inhoud van de content veranderen.

Voorbeelden van tab-besturing via innerHTML:
Basic voorbeeld
Gevorderd voorbeeld

Na uitvoeren van onderstaand Javascript wordt deze tekst overschreven met die van divB.

Deze tekst staat in divB.

Javascript en DOM

Het Document Object Model van Javascript bevat talloze functies waarmee je eigenschappen van van HTML-elementen kan aanpassen

DOM: Het Document Object Model

Javascript is een Object georienteerde programmeertaal, een moeilijk woord een gestructureerde opbouw van een scripttaal. Met de komst van PHP5 is ook PHP volledig, OOP (Object Oriented Programming) opgebouwd.
Javascript was dit al lang. Hoe lastig OOP soms ook loijkt te zijn, bij Javascript maak je er ongemerkt veel gebruik van.

Objecten en eigenschappen

Het meeste gebruikte object van de Javascript DOM is wel document
Net als alle objecten, heeft document verschillende eigenschappen die met een punt van elkaar gescheiden worden.
Bijvoorbeeld:

document.getElmentById("id_van_een_element")
document.createElement()<

Die eerste: getElmentById(), heeft ook weer zijn eigen eigenschappen, bijv.:

document.getElmentById("id_van_een_element").style
document.getElmentById("id_van_een_element").innerHTML

Die eerste daarvan: document.getElmentById("id_van_een_element").style, heeft ook weer zijn eigen eigenschappen, bijv.:

document.getElmentById("id_van_een_element").style.color
Om de letter-kleur te zetten (bijv. ="#0c0")
document.getElmentById("id_van_een_element").style.width
Om de breedte te zetten (bijv. ="200px")
document.getElmentById("id_van_een_element").style.backgroundColor
Om de achtergrond-kleur te zetten (bijv. ="lime")

Let op: de elementen uit Javascript zijn hoofdlettergevoelig dus getEelmentById is goed, dus dit kleine missertje: getEelmentByID levert een fout op!

DOM

Een greep uit de DOM

window.alert("hallo");
- window:...
- alert("hallo"):...
document.getEelmentById("content").innerHTML = "hallo";
- document:...
- getEelmentById("content"):...
- innerHTML:...
document.getEelmentById("content").style.backgroundColor = "#0F0";
- document:...
- getEelmentById("content"):...
- style:...
- backgroundColor:...

Toepassing: Rekenmachine

Met de kennis van de vorige modules kunnen we een Javascript rekenmachine bouwen.

Een Javascript rekenmachine

Met de kennis van de vorige modules gaan we een eenvoudige rekenmachine met Javascript bouwen.

De rekenmachine bestaat uit verschillende formulier-elementen:

Het display is een <input type="text"> element
Alle knoppen kunnen buttons met onclick-events zijn
De op

De opmaak van de rekenmachine moet je met een druk op de knop kunnen wijzigen (skinning)

Geef alle elementen css-class mee
Maak 2 verschillende css-stijlen aan
Met een knop kun je een JS functie uitvoeren die de class-namens van de elementen wijzigt, waardoor de hele rekenmachine een andere look-and-feel krijgt

Er zijn tientallen manieren om tot de rekenmachine te komen. In het voorbeeld bij opdracht 7 staat een redelijk korte, maar wat lastiger.
In het voorbeeldscript hieronder staat hoe je zonder opmaak, met 3 getallen een vermenigvuldiging maakt. Je kun zelf het voorbeeld uitwerken tot je eigen rekenmachine.

De uitvoering hieronder maakt gebruik van een <div> als display.
Dan gebruik je document.getElementById("display").innerHTML om de inhoud te lezen of te schrijven van de <div>

Het voorbeeld van opdracht 7 heeft een <input type="text"> als display.
Je gebruikt document.getElementById("display").value om de inhoud te lezen of te schrijven van een text-vak

Loops met while en for

Met while en for-loops, loop je door lijsten heen en voer je herhalingen uit

Lussen en loops in Javascript

Net als in PHP kent Javascript de while en for-loops, zelfs de syntaxis (=opbouw van de code) is gelijk!

*De for-lus*
1 var deDiv = document.getElementById("schrijfDiv"); 2 var i; 3 for( i=1; i<1000; i=i+1) 4 { 5 deDiv.innerHTML = deDiv.innerHTML + "Dit is regel "+ i + "<br>"; 6 }
Het script hierboven zal een <div> met id="schrijfDiv" beschrijven met 1000 regel tekst: Dit is regel 1 Dit is regel 2 Dit is .... In regel 1 wordt de te beschrijven div opgeslagen in var "deDiv" In regel 2 wordt de variabele "i" gedeclareerd waarmee je straks, in de lus, gaat tellen. Meestal gebruiken we de "i" van integer (=geheel getal) Regel 3 bevat de hele for-loop: i=1; i wordt op 1 gezet. Dit wordt afgesloten met een punt-komma ";" i<1000; "doe zolang i kleiner is dan 1000", weer afgesloten met een punt-komma ";" i=i+1 Tel na een doorgang 1 op bij i. Dit is het laatste argument, dus niet meer afgesloten door een punt-komma..! Regel 5 wordt 1000 keer uitgevoerd en schrijft in deDiv: "Dit is regel " en dan plakt hij de teller i erachter en een regelafbreking Alle regels tussen de accolades van regels 4 en 6 wordt 1000 keer doorlopen. Dit gaat als volgt: Komt voor het eerst in de for-lus Hij zet i op 1, kijkt of i<1000, ja dus, hij voert de regel(s) tussen accolades uit Komt voor de tweede keer in de for-lus i wordt i+1 dus i=2, hij kijkt of i<1000, ja dus, hij voert de regel(s) tussen accolades uit Komt voor de derde keer in de for-lus i wordt i+1 dus i=3, hij kijkt of i<1000, ja dus, hij voert de regel(s) tussen accolades uit ...... Komt voor de 999-ste keer in de for-lus i wordt i+1 dus i=1000, hij kijkt of i<1000, nee! Hij gaat naar regel 6 en uit de for-lus

De for-lus

1 var deDiv = document.getElementById("schrijfDiv");
2 var i;

3 for( i=1; i<1000; i=i+1)
4 {

5 deDiv.innerHTML = deDiv.innerHTML + "Dit is regel "+ i + "<br>";

6 }

Het script hierboven zal een <div> met id="schrijfDiv" beschrijven met 1000 regel tekst:
Dit is regel 1
Dit is regel 2
Dit is ....

In regel 1 wordt de te beschrijven div opgeslagen in var "deDiv"
In regel 2 wordt de variabele "i" gedeclareerd waarmee je straks, in de lus, gaat tellen. Meestal gebruiken we de "i" van integer (=geheel getal)
Regel 3 bevat de hele for-loop:
- i=1;
  i wordt op 1 gezet. Dit wordt afgesloten met een punt-komma ";"
- i<1000;
  "doe zolang i kleiner is dan 1000", weer afgesloten met een punt-komma ";"
- i=i+1
  Tel na een doorgang 1 op bij i. Dit is het laatste argument, dus niet meer afgesloten door een punt-komma..!
Regel 5 wordt 1000 keer uitgevoerd en schrijft in deDiv: "Dit is regel " en dan plakt hij de teller i erachter en een regelafbreking
Alle regels tussen de accolades van regels 4 en 6 wordt 1000 keer doorlopen. Dit gaat als volgt:
- Komt voor het eerst in de for-lus
  Hij zet i op 1, kijkt of i<1000, ja dus, hij voert de regel(s) tussen accolades uit
- Komt voor de tweede keer in de for-lus
  i wordt i+1 dus i=2, hij kijkt of i<1000, ja dus, hij voert de regel(s) tussen accolades uit
- Komt voor de derde keer in de for-lus
  i wordt i+1 dus i=3, hij kijkt of i<1000, ja dus, hij voert de regel(s) tussen accolades uit
- ......
- Komt voor de 999-ste keer in de for-lus
  i wordt i+1 dus i=1000, hij kijkt of i<1000, nee! Hij gaat naar regel 6 en uit de for-lus

De while kent dezelfde argumenten als de for-lus, maar ze staan op andere plekken in het script

*De while-lus*
1 var deDiv = document.getElementById("schrijfDiv"); 2 var i=1; 3 while( i<1000 ) 4 { 5 deDiv.innerHTML = deDiv.innerHTML + "Dit is regel "+ i + "<br>"; 6 i = i + 1; 7 }
Het script hierboven doet exact hetzelfde als die van de for-lus In regel 1 wordt de te beschrijven div opgeslagen in var "deDiv" In regel 2 wordt de variabele "i" (de teller) gedeclareerd en meteen op 1 gezet In regel 3 staat de while-voorwaarde: "doe zolang i kleiner is dan 1000" In regel 3 staat de while-voorwaarde: "doe zolang i kleiner is dan 1000" Regel 5 wordt 1000 keer uitgevoerd en schrijft in deDiv: "Dit is regel " en dan plakt hij de teller i erachter en een regelafbreking In regel 6 wordt de teller i, 1 op gehoogd Alle regels tussen de accolades van regels 4 en 7 wordt 1000 keer doorlopen. Dit gaat als volgt: Komt voor het eerst in de while-lus i staat al op 1, hij kijkt of i<1000, ja dus, hij voert de eerste regel tussen accolades uit Hij komt in regel 6 i stond op 1 en wordt nu 2 dan gaat hij weer naar de voorwaarde in de while Komt voor de tweede keer in de while-lus i=2, hij kijkt of i<1000, ja dus, hij voert de regel(s) tussen accolades uit ...... Komt voor de 999-ste keer in de for-lus i wordt i+1 dus i=1000, daarmee komt hij niet meer door de while-lus!

De while-lus

1 var deDiv = document.getElementById("schrijfDiv");

2     var i=1;
3     while( i<1000 )
4     {

5 deDiv.innerHTML = deDiv.innerHTML + "Dit is regel "+ i + "<br>";
6 i = i + 1;

7 }

Het script hierboven doet exact hetzelfde als die van de for-lus

In regel 1 wordt de te beschrijven div opgeslagen in var "deDiv"
In regel 2 wordt de variabele "i" (de teller) gedeclareerd en meteen op 1 gezet
In regel 3 staat de while-voorwaarde: "doe zolang i kleiner is dan 1000"
In regel 3 staat de while-voorwaarde: "doe zolang i kleiner is dan 1000"
Regel 5 wordt 1000 keer uitgevoerd en schrijft in deDiv: "Dit is regel " en dan plakt hij de teller i erachter en een regelafbreking
In regel 6 wordt de teller i, 1 op gehoogd
Alle regels tussen de accolades van regels 4 en 7 wordt 1000 keer doorlopen. Dit gaat als volgt:
- Komt voor het eerst in de while-lus
  i staat al op 1, hij kijkt of i<1000, ja dus, hij voert de eerste regel tussen accolades uit
- Hij komt in regel 6
  i stond op 1 en wordt nu 2 dan gaat hij weer naar de voorwaarde in de while
- Komt voor de tweede keer in de while-lus
  i=2, hij kijkt of i<1000, ja dus, hij voert de regel(s) tussen accolades uit
- ......
- Komt voor de 999-ste keer in de for-lus
  i wordt i+1 dus i=1000, daarmee komt hij niet meer door de while-lus!

Dit is de schrijfDiv

Random getallen

Hoe geef je een willekeurig getal tussen de 0 en de 1..?

Willekeurige getallen met Math.random()

Met de Javascript functie: Math.random() kun je een willekeurig getal tussen de 0 en de 1 uitrekenen (op 16 getallen achter de komma nauwkeurig...!).
Het Javascript commando:

var getal = Math.random(); window.alert( getal );

kan bijv. een alert box met 0,2748451846912382 opleveren
Wil je een getal tussen de 0 en 10 hebben, dan doe je de uitkomst keer 10 en rond je het daarna af op 0 decimalen.
Minimaal levert dit 0 * 10 op en maximaal 1 * 10:

var getal = Math.random(); getal = getal * 10; getal = Math.Round( getal ); window.alert( getal );

Wil je een willekeurig getal tussen de 4 en de 9 hebben dan

Bereken je het verschil tussen de min. en max. waarde
de kleinste uitkomst is = min + 0 * verschil ( = min )
de grootste uitkomst is = min + 1 * verschil ( = max )
het willekeurige getal tussen de 0 en de 1 bereken je met Math.random()

Dus dat wordt dan:

var getal = 4 + Math.random() * (9 - 4); getal = Math.Round( getal ); window.alert( getal );

In het voorbeeldscript hieronder staat een functie "willekeurig" die met 2 parameters (min en max) een willekeurige waarde tussen die 2 berekend.
Bekijk of je hem snapt en pas hem toe in de vragen.

basis Yathzee met arrays

Lijsten arrays

Namenlisten, cijferlijsten, lijsten met artikelen... In Javascript maak je ze met arrays

Javascript arrays

Met Javascript zou je een lijst met voornamen als volgt kunnen opgeven en weergeven:

var voornaam1 = "Jan"; var voornaam2 = "Piet"; var voornaam3 = "Joris"; var voornaam4 = "Corneel"; var voornaam5 = "Chris"; var voornaam6 = "Marit"; document.getElementById("divje").innerHTML = voornaam1+" "+voornaam2+" "+voornaam3+" "+voornaam4+" "+voornaam5+" "+voornaam6;

Het nadeel is dan dat je bij het neerzetten van die namen, steeds alle aparte variabelen moet declareren en weer apart neerzetten.
Makkelijker is om de namen in een lijst te zetten, een zogenaamde array. Het voordeel is dat ze dan allemaal een nummer meekrijgen waardoor je ze makkelijk in een lus met een teller kan uitlezen:

var voornaam = new Array(); voornaam[0] = "Jan"; voornaam[1] = "Piet"; voornaam[2] = "Joris"; voornaam[3] = "Corneel"; voornaam[4] = "Chris"; voornaam[5] = "Marit"; document.getElementById("divje").innerHTML = ""; for(var i=0; i<6; i++) document.getElementById("divje").innerHTML += voornaam[i];

Bekijk goed hoe de array hierboven gedefinieerd wordt: var voornaam = new Array();
Daarbij moet new met kleine letters en Array met een hoofdletter beginnen. Vergeet ook niet haakjes openen en sluiten achter de Array!
Het uitlezen gaat simpel met voornaam[i], waarbij i de variabele teller is, of gewoon een getal!

Je mag de array ook korter neerzetten:

var voornaam = new Array("Jan","Piet", "Joris", "Corneel", "Chris", "Marit"); document.getElementById("divje").innerHTML = ""; for(var i=0; i<voornaam.length; i++) document.getElementById("divje").innerHTML += voornaam[i];

Hij nummert de elementen nu zelf vanaf 0, 1, ....
Let op hoe we nu bij het uitlezen de length van de array gebruiken en niet meer < 6 ! Je weet immers lang niet altijd hoeveel items er in een array zitten... Laat hem datzelf uitzoeken met voornaam.length!

Meer-dimensionale arrays

Stel je voor je wil een lijst met voor en achternamen hebben maar niet in 1 veld, want je wilt ze afzonderlijk op achternaam of op voor naam kunnen sorteren. Dan zou dat op de volgende manier kunnen:

var voornaam = new Array(); voornaam[0] = "Jan"; voornaam[1] = "Piet"; voornaam[2] = "Joris"; voornaam[3] = "Corneel"; voornaam[4] = "Chris"; voornaam[5] = "Marit"; var tv = new Array(); tv[0] = "de"; tv[1] = ""; tv[2] = ""; tv[3] = "van den"; tv[4] = ""; tv[5] = "van 't"; var achternaam = new Array(); achternaam[0] = "Rijke"; achternaam[1] = "Cornelissen"; achternaam[2] = "Driepinter"; achternaam[3] = "Heuvel"; achternaam[4] = "Stegeman"; achternaam[5] = "Laken"; document.getElementById("divje").innerHTML = ""; for(var i=0; i<6; i++) document.getElementById("divje").innerHTML += voornaam[i] + " " + tv[i] + " " + achternaam[i];

Bovenstaande voorbeelden staan ook in onderstaande scriptvoorbeelden

Nu hebben we echter 3 aparte arrays van 6 personen. Dat is lastig in te vullen en voor-, achternamen en tussenvoegsels staan ver uit elkaar. Ook gaat er van alles mis als bijv. de eerste voornaam vergeet; iedereen krijgt een andere achternaam...
In dit geval is het beter een meer-dimensionale array te gebruiken.

var naam = new Array(); naam[0] = new Array("Jan", "de", "Kleine"); naam[1] = new Array("Piet", "", "Cornelissen"); naam[2] = new Array("Joris", "", "Driepinter"); naam[3] = new Array("Corneel", "van den", "Heuvel"); naam[4] = new Array("Chris", "", "Stegeman"); naam[5] = new Array("Marit", "van 't", "Laken"); document.getElementById("divje").innerHTML = ""; for(var i=0; i<6; i++) document.getElementById("divje").innerHTML += naam[i][0] + " " + naam[i][1] + " " + naam[i][2];

Hierbij staat naam[0][1] dus voor naam[0] (= Jan de Kleine) en het tweede getal: [1] staat voor het tussenvoegsel ( [2] = achternaam ).

Zie ook het voorbeeldscript.

Datum, tijd en timer-functies

Met datum-tijd functies, kun je Javascript timers maken.

Datum en tijd

Met het volgende Javascript var datum = new Date(); sla in de variable datum, een nieuwe datum op.
Standaard is dat de datum van vandaag.
Bekijk de volgende datum-functies. Inde eerste regel wordt de huidige datum opgeslagen in datumtijd, daaronder wordt er steeds een deel van die datum in een variabele opgeslagen

var datumtijd = new Date(); var wkdag = datumtijd.getDay(); //het nummer van de dag van de week op in wkdag (zondag = 0 !) var dag = datumtijd.getDate(); //de dag van de maand var maand = datumtijd.getMonth(); //de maand (januari = 0 !) var jaar = datumtijd.getFullYear(); //het jaar var uur = datumtijd.getHours(); //uur (in 24-uurs format) var min = datumtijd.getMinutes(); //minuten var sec = datumtijd.getSeconds(); //seconden datumtijd.setFullYear(2012,11,29); //sla in datumtijd de datum: 29 nov 2012 op datumtijd = new Date(1990,5,21,16,15,55); //sla in datumtijd de datum: 21 juni 1990 met tijd 16:15:55 op

In de volgende regels zie je meer datum-tijdfuncties. Bekijk ze en pas ze toe in de opdrachten.
een-na-laatste regel zie hoe de huidige datumtijd variabele gevuld kan worden met een willekeurige datum.
In de laatste regel zie je hoe je direct als parameters van Date(), een datum en tijd kan invoeren.

var datumtijd = new Date(); datumtijd.setFullYear(2012,11,29); //sla in datumtijd de datum: 29 nov 2012 op datumtijd = new Date(1990,5,21,16,15,55); //sla in een nieuwe datumtijd variabele, de datum: 21 juni 1990 met tijd 16:15:55 op datumtijd = new Date(); datumtijd.getTime(); //haalt het aantal milliseconde op vanaf 1-1-1970

Haal je bij het begin van een actie de tijd op bovenstaande manier op, en op het eind, dan kun je die twee van elkaar aftrekken en je hebt de verstreken tijd in milliseconde daartussen!

Timers

Met datum-tijd functies kunnen we verschillende soorten timers maken:

timers om de uitvoering van een script even een aantal seconden te laten pauzeren
timers om een functie om de zoveel seconden te laten uitvoeren
timers die de verstreken tijd aangeven
etc...

Het volgende script voert met de Javascript functie setInterval, om 1,5 seconde (1500 ms), het script: window.alert("Iritant he?") uit.
Probeer hem uit!!

setInterval( function() {window.alert("Iritant he?")}, 1500 );

Het volgende script roept om de seconde de functie geefSec() aan, die op zijn beurt weer de seconde van de huidige tijd neer zet in de div met id "div"
met de functie stopTest(), kun je de uitvoering van setInterval stoppen.
Probeer ook hem uit!!

Formulier-validatie

Bij het invullen van een formulier op een website (invullen persoonsgegevens e.d.), wil je dat de gegevens al bij intypen op juistheid gecontroleerd worden, maar in ieder geval, voordat ze naar de server verstuurd worden.
Dat is form-validatie en doe je met Javascript.

Formulier validatie

Zo wil je bijvoorbeeld weten of:

bestaat de postcode wel uit 4 cijfers en 2 letters?
staat er in een emailadres wel eerst een &at; en dan een punt?
staat er wel een getal waar een bedrag ingevuld moest worden?
wordt het maximum aantal tekens niet overschreden?
is een verplicht veld niet leeg gelaten?
... en nog veel meer...

Wanneer en hoe controleren?

Na versturen van formulier, met PHP: beter van niet...

Je zou na het versturen van het ingevulde formulier, op de server de waarden met PHP kunnen controleren.... het nadeel is dat

het formulier eerst naar de server gestuurd wordt en weer terug terwijl het ook op de client kan
wanneer de pagina opnieuw wordt geladen allen velden weer leeg zijn, die moet je allemaal apart setten met de ingevulde waarden
kan pas als het hele formulier is ingevuld. Bij invoeren krijg je nooit een waarschuwing

Je kunt nog voor versturing van het formulier, de invoer op 3 plekken controleren:

Elke toetsaanslag afvangen en voordat de letter in de textbox verschijnt, met onKeyDown kijken of het een geldig karakter bevat
Bij het verlaten van de textbox (bijv. met tab, wanneer je naar een volgend veld gaat), de inhoud van dat veld controleren
Bij versturen van het formulier eerst alle velden bij langs lopen en controleren op juiste invoer

Meestal wordt de laatste gebruikt, maar bij invoeren van getallen kun je met een onKeyDown er wel alvast voor zorgen dat er alleen een getal of komma (of punt..?) ingevoerd kan worden.
Hieronder staan de 3 punten uitgewerkt.
OnKeyPress is bijna gelijk, maar deze reageert niet op de alt, shift en ctrl toets!

Even tussendoor: het Javascript "event-object"

Bij elke onclick, onkeypress en andere events, wordt een javascript event object aangemaakt. Dit event object bevat bij onkeypress bijv. informatie over de toets waarop gedrukt is.
Bij alle browsers behalve IE, kun je een variabele naam tussen de haakjes van de functie meegeven. Voor IE hoe je geen aparte variabele naam mee te geven als parameter maar is je event: window.event.
Met e.charCode haal je de ASCII-code van de ingedrukte toets op. Met String.fromCharCode(e.charCode) haal je de waarde van de toets op.
Kijk hieronder bij "voorbeeld van code en uitvoer" hoe dit werkt.

Wanneer controleren

Je kunt nog voor versturing van het formulier, de invoer op 3 plekken controleren:

Met onKeyDown, tijdens de invoer
In de bovenstaande uitleg over het "event-object" zie leer je hoe je kunt voorkomen dat foute karakters ingevoerd kunnen worden.
Maak vraag 12 A) en B)
Bij het verlaten van de textbox, de <select> en andere form-elementen.
Met <select onchange="doeIets()"> start je de function doeIets() bij het kiezen van een andere waarde.
Merk op dat wanneer je de eerste waarde kiest het event niet getriggerd wordt..!
Bij versturen van het formulier
Met <form onsubmit="doeIets()" > start je de function doeIets() bij het versturen van het formulier.
In de functie kun je alle formulieren elementen bij langs lopen om te kijken of er iets mis mee is, en zo ja, de focus naar dat element leggen en opnieuw laten invoeren.

Voorbeelden van te gebruiken scripts

Stel je <form> heet "testFormVal" en je <select> heet "oudsteOS":

var tekst = ""; var selBox = document.testFormVal.oudsteOS //haal de value van een select-box (of input-veld) op met: tekst = selBox.value //haal de value van //haal niet de value maar de tekst van een select-box op met: var idSel = selBox.selectedIndex; var selText = selBox.options[idSel].text; //haal meerdere geselecteerde elementen van een multi-select-box op met: var selItems = new Array(); for (var i = 0; i < selBox.options.length; i++) if (selBox.options[ i ].selected) selItems.push(selBox.options[ i ].value);

Canvas: tekenen met JS

Met HTML kun je webpagina's opmaken en afbeeldingen tonen. Wil je tekenen op de pagina, dan doe je dat op het canvas met Javascript.

Canvas: Een vlak om op te tekenen

Het canvas element is net zo'n element als een <div> en een <span>. Het verschil is dat je er geen HTML-elementen in legt, maar je het canvas beschrijft met Javascript!
Het canvas-element is wel HTML5!

Bekijk het volgende script:

1 <canvas id="divCanvas" width="300" height="200"></canvas> 2 <script> 3 var canvas = document.getElementById('divCanvas'); 4 var context = canvas.getContext('2d'); 5 6 //hieronder komt het script waarmee je het canvas beschrijft 7 context.fillStyle="#FF0"; 8 context.fillRect(0,0,200,100); 9 </script>

Regel 1: Het canvas in de HTML
Regel 3: Verwijzing binnen Javascript naar het canvas in de HTML
Regel 4: Set de "platte" 2d context (de 3d context heet "webgl">
Regel 7: zet de vulkleur op geel
Regel 8: Teken een gele rechthoek: linkerbovenhoek = (0,0) rechteronderhoek = (200,100)

We beschrijven hier verder geen functionaliteit, daar zijn meerdere goed sites voor:

Basisuitleg canvas: link (w3schools)
Alle tekenfuncties voor het canvas: link (w3schools)
Uitgebreide handleiding canvas: link (HTML5)

jQuery

Veel toepassingen met javascript zijn als eens door iemand gemaakt. jQuery is een JS-bibliotheek die veel mooie toepassingen biedt.

jQuery, waarvoor...?

Na alle vorige modules van Javascript, kun jij inmiddels aardig je weg vinden in de code van deze client-side scripttaal en ben je toe aan grotere uitdagingen.
Met de kennis die je nu hebt kun je bijv. een mooi opgemaakt formulier in een popup, met een langzame fade-in laten verschijnen. Dat kost je echter wel een paar avondjes...

jQuery als biblotheek voor menu's, fading panels, effecten, etc.
jQuery biedt een complete bibliotheek met voorgeprogrammeerde stukken code waar je zo gebruik van kan maken.

popups -voorbeeld-
accordeon-effects -voorbeeld-
drag-drop-tools -voorbeeld-
effecten -voorbeeld-

en nog veel meer...!

jQuery om jou Javascript korter te maken en sneller te schrijven
Los van de bovenstaande elementen biedt jQuery je ook tools bij gewoon programmeerwerk in Javascript.
Stel je wilt van alle elementen in je pagina met de class="deze", in één keer de innerHTML vervangen door wat in de div met id="deDiv" staat.
Met "gewoon" Javascript kan dat bijv. zo:

var div = document.getElementById( 'deDiv' ), divs = document.getElementsByClassName( 'deze' ); [].slice.call( divs ).forEach(function ( div ) { div.innerHTML = items.innerHTML; });

Een tamelijk ingewikkeld script waarbij je de nodeList die de getElementsByClassName ophaalt, en omzet in een array en daarna de HTML wijzigt.

Dat zou met jQuery veel simpeler kunnen:

$(".deze").html( $("#deDiv").html() );

Vandaar de jQuery-slogan write less, do more.....
Het enige wat je voor jQuery nodig hebt is een include van de jQuery bibliotheek...!

jQuery - library
De standaard site voor jQuery is http://jquery.com/. Alle functies die je met jQuery kan gebruiken staan hierin beschreven. Wanneer je jQuery wilt gebruiken moet je de jQuery-library (bibliotheek) includen in de <head> tag:

.. 5 <head> 7 <script src="http://code.jquery.com/jquery-1.8.3.js"></script> 8 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 9 </head>

Je gebruikt of regel 7 of regel 8!
In regel 7 staat de complete code van een neiuwere versie 1.8.3 ge-included. Dit is een behoorlijk lap javascript die je site eerst moet binnehalen voordat hij kan draaien.
In regel 8 wordt het geminimaliseerde script van een oudere versie 1.3.2 geladen.
Je kan een oudere versie gebruiken wanneer dat in scripts al is toegepast. Nieuwe elementen werken dan natuurlijk niet...!

jQuery - User Interface
Wanneer je ook gebruik wilt maken van popup-forms, diasliders, accordeon-effecten enz., dan moet je net even meer dan jQuery alleen laden. Je gaat dan namelijk van de jQuery User Interface (kortweg "jQueryUI") gebruik maken. Je laadt dan ook wat meer code in.

.. 5 <head> 6 <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" /> 7 <script src="http://code.jquery.com/jquery-1.8.3.js"></script> 8 <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 9 </head>

De standaard site voor jQueryUI is http://jqueryui.com/. Daar vind je alle documentatie en voorbeelden.

jQuery - downloaden
In plaats van de jQuery te includen van de jQuery site is om hem te downloaden.
Voordelen:

Script wordt geladen van je eigen site, dus sneller
Je kunt alleen het stukje jQuery downloaden wat voor jouw nodig is, dus sneller
Je kunt sneller updaten naar een nieuwere versie door alleen het versie nummer in de include te wijzigen

Nadelen:

Voor updaten naar een nieuwere versie moet je opnieuw de boel downloaden en weer op je site zetten

jQuery-mobile voor je mobile devices

Hoe weet mijn site dat ik hem op een mobieltje bekijk?
Hoe bouw ik een swype actie voor een mobile device op?
Hoe pas ik snel m'n layout aan voor mobieltje of iPad?

Allemaal vragen waarvoor jQuery-mobile een oplossing biedt.
Niet meer nadenken over lastige besturingselementen of responsive design (meebewegende of meerekkende opmaak): gebruik jQuery-mobile!

Show/Hide Panel

Dit panel kan je uitklappen

Dit panel kan je ook inklappen...!

Opdracht 1

In "voorbeeld van code en uitvoer" (sliding panel onderaan de pagina), staat een knop die in de <body> kan staan en een stukje javascript.
Volgens deze module kan dit Javascript op 4 verschillende plekken staan om aangeroepen te worden.
Kopieer het script en de <button>, verander "Chris Stegeman" in je eigen naam en voer de opdrachten uit:

A	Maak een index.htm pagina waar het script in de <head> staat (binnen <script>-tags) en in de <body> wordt aangeroepen met de <button>

B	Maak een index.htm pagina waar het script in de <body> staat en wordt aangeroepen met een ondblclick op de <body>-tag

C	Maak een index.htm pagina met alleen de <button> en een script.js waar het script in staat

D	Maak een index.htm pagina en probeer de inhoud van de functie in de onclick van de <button> te plaatsten

Tips & trucs

Het script binnen <script>-tags in de <head> of in de <body> plaatsen maakt voor de uitvoering weinig uit. Het meest nette is alle scripts bij elkaar in de <head> te plaatsen
Wanneer je een externe script pagina maakt, hoef je daar geen <script>-tags meer in te plaatsen, deze staan al in de verwijzing naar die pagina!

Uitvoer:

Opdracht 2

A	Voer de Javascript commando's uit, zoals in deze module beschreven staan.

Maak 2 <input type ="text">-velden, een <button> en een uitvoer-div.
Zorg dat wanneer je op de button drukt, de inhoud van de 2 velden met een + bij elkaar op wordt geteld en de uitkomst in de uitvoer-div gezet wordt.
Voer vervolgens 2 teksten in en bekijk de uitkomst. Daarna een getal en een tekst.. Daarna 2 getallen.., wat valt op?

Uitvoer Opdracht B:

Waarde 1: waarde 2:

Opdracht 3

Plaats 3 invoer (type="text") velden voor getallen, een uitvoer-DIV en een button in je document.
Noem de eerste 2 invoervelden "Waarde 1" en "Waarde 2" en het derde invoer veld "Getal"
In "Waarde 1" en 2 komen minima en maxima waarden te staan waarmee de waarde in "Getal" vergeleken wordt.

A	Zorg dat "Waarde 1" < "Waarde 2" en dat bij een druk op de knop in de uitvoer-DIV komt te staan of het "Getal" binnen "Waarde 1" en "Waarde 2" valt of niet.

B	Zie vraag A maar nu hoeft "Waarde 1" niet meer kleiner te zijn dan "Waarde 2" en moet de uitvoer toch kloppen.

Tips & trucs

Gebruik bij 2 controles in 1 if-statement voor een AND in Javascript && en voor een OR gebruik je in Javascript ||
Bij vraag B moet je voor het if-statement wat je in vraag A hebt gebruikt, eerst nog de vraag stellen of waarde 1 < waarde 2 of niet. Geldt het eerste, dan is de afhandeling gelijk aan vraag A, anders dan.. zoek maar uit..!

Uitvoer:

Waarde 1:
Waarde 2:
Getal:

Opdracht 4

Maak een Javascript function die je met 2 parameters, 2 getallen kan meegeven.
Het script wordt opgestart met een onclick-event van een <button> element, daarbij geef je de twee getallen als parameters mee aan de functie.

A	Bij een klik op de button worden in een window.alert box, 3 regels met berekeningen getoond: optellen, aftrekken en vermenigvuldigen.

Klik voor een voorbeeld op de knop in de Uitvoer

Tips & trucs

Zet de berekeningen tussen haakjes, anders plakt hij bij een optelling met + alles tekstueel aan elkaar i.p.v. dat hij de getallen optelt. Bij aftrekken en vermenigvuldigen hoeft dit niet, je kunt geen * of - toepassen op teksten
Voeg voor een regelafbreking in een alert-box geen <br> toe (dat is HTML), maar "\n"
Maak de voor een overzichtelijk Javascript de 3 regels in 3 aparte variabelen aan, anders heb je 1 lange tekst in je alert box.

Uitvoer:

B	Maak een vierde regel waar je de deling van de getallen in zet. Zoek op Internet op hoe je de deling netjes afrond op 2 decimalen.

Opdracht 5 -Berekenen, form input-

Maak een formulier aan met twee input velden en een verstuur-knop (geen submit..!)

A	Zorg dat bij een submit dezelfde berekening als bij opdracht 4 verschijnt, maar nu met de waarden uit de input velden i.p.v. de statische parameters in de functie

Klik voor een voorbeeld op de knop in de Uitvoer

Tips & trucs

Gebruik geen input type=submit! Daarmee verstuur je het formulier en nu wil je alleen dat het Javascript de waarden uitleest!
Met Javascript kun je de waarde van het eerste element van het eerste formulier zo opvragen: document.forms[0].elements[0].value
Beter is om het form en de elementen namen mee te geven, dan kun je ze zo opvragen: document.formsA.elementA.value

Uitvoer:

Opdracht 6 -Berekenen, delingen en meer..-

Gebruik nogmaals de berekening van opdracht 5

A	Laat de uitvoer nu niet in een alert verschijnen maar in een div

Klik voor een voorbeeld op de knop in de Uitvoer

Tips & trucs

Bedenk dat de output in HTML staat, dus dat je geen "\n" maar gewoon <br> moet gebruiken

Uitvoer:

Output van berekening komt hier

B	Maak een knop aan waarmee je de inhoud van het tekstvak weer wist

C	Maak knoppen aan waarmee je de rand-, achtergrond- en font-kleur kan aanpassen

D	Geef het script met een extra input-veld en een knop de mogelijkheid, om de randdikte van de output aan te passen

Opdracht 7 Javascript rekenmachine

Je gaat met HTML-CSS en Javascript een rekenmachine maken.De rekenmachine heeft minimaal de knoppen: 0 t/m 9, +, -, :, x, =, ce (= invoer wissen) en werkt als een normale rekenmachine: je moet op de knoppen drukken om het invoerveld te vullen..!

Er zitten 2 hoofdelementen in deze opdracht:

de rekenfunctie zelf(veel javascript)
- Hij moet kunnen: optellen, aftrekken, vermenigvuldigen en delen
- Je moet ook invoer
de opmaak
- De knoppen in eerste instantie met <button onclick="....">
- Je hebt de keuze: of je zet de hele rekenmachine in een tabel, of in een DIV. In beide gevallen moeten die een css-class hebben waar alle opmaak van onderliggende elementen mee bepaald is
- Met een "change skin"-knop, moet de classname van de table of DIV gewijzigd kunnen worden zodat de rekenmachine een ander uiterlijk heeft.

A	Maak een HTML-file <table> of een <div>. Maak een .css-file voor de stijlen en een .js file voor je javascript.

B	Leg een <input type="text">-box in je hoofd-DIV (of tabel) en het benodigde aantal <button>-elementen

C	Wanneer je op toets "1" drukt, moet een 1 in het text-veld verschijnen, druk je daarna op een 2 dan moet er 12 staan. Druk je op "ce" dan is het text-veld weer leeg. (Kom je er niet uit, bekijk dan pas de tips en trucs)

Tips & trucs

Getal doorgeven met druk op button:

Mogelijke opmaak button: <button onclick="setWaarde(1)">1<button>
Mogelijke opmaak text-vak: <input type="text" id="display" name="display">
In de button wordt de Javascript-functie: setWaarde(1) aangeroepen. Die ziet er zo uit:
function setWaarde( waarde )
{
var uitv = document.getElementById("display");
uitv.value = waarde;
}
//bij elke druk op de knop wordt de waarde overschreven
Wil je waarde toevoegen aan de tekst in het display, verander dan de 4de regel op deze manier:
uitv.value = uitv.value + waarde;

Uitvoer:

Opdracht 8

Maak in 1 pagina, verschillende knoppen waarmee je met de loops uit de opdrachten, een div beschrijft zoals in het voorbeeld.

A	Schrijf met een for-lus de tafel van 13 in de Div

B	Schrijf met een while-lus alle kwadraten van de even getallen op van 4 t/m 30

C	Geef alle machten van 3 vanaf 40 en steeds 3 eraf tot aan -40

D	Zie C maar zodra het antwoord even is, trek je er geen 3 maar 4 vanaf, en zo verder

E	Vul je rekenmachine aan met de knoppen x² x³ x^y

Tips & trucs

In plaats van i=i+1 kun je ook i++ schrijven. i=i-1 is gelijk aan i--
Je kunt de i ook kwadratisch ophogen door i=i*i te doen
Controleer met Javascript of een getal even is door te delen door 2 en kijken of de rest 0 is met: if(getal%2 == 0) dan is getal even

Uitvoer:

Output van lus komt hier

Opdracht 9

Met de random-functie kun je ook de worp met een dobbelsteen simuleren

A	Maak een knop waarmee je een dobbelsteen worp na doet. Een druk op de knop geeft in een div daaronder een getal van 1 t/m 6

B	Download 6 afbeeldingen of maak de 6 van de kanten van een dobbelsteen en geef het getal uit opdracht A nu visueel weer

Tips & trucs

Gebruik de function willekeurig uit het voorbeeld voor een willekeurig getal tussen 1 en 6

C	Maak een knop waarmee je met 5 dobbelstenen werpt. Dan kun je Yathzee spelen!

Uitvoer:

Eindopdracht:
met classes
met checkboxen

Dobbelen!

Opdracht 10

Je gaat een namenlijst van minstens 6 medestudenten maken die volledig client-side beheert kan worden.
De standaard namenlijst wordt opgeslagen in een vaste javascript array. Je kunt namen toevoegen, wijzigen of verwijderen met formulier-elementen.

A	Maak een meerdimensionale array met 6 medestudenten: voornaam, tussenvoegsel, achternaam. Zorg dat met een druk op een knop de namen onder elkaar komen te staan met een nummer ervoor

B	Geef dezelfde lijst als uit A), maar nu gesorteerd op achternaam

C	Voeg een formulier toe waarin je een nieuwe naam kan invoeren en een knop waarmee je de naam aan de array toevoegd en een nieuwe lijst toont

Tips & trucs

Zoek voor sorteren van Arrays in Google op "Javascript sorteren multidimensionale array"
Het aantal elemeten in een aary vraag je op met arrayNaam.length

Uitvoer:

Namenlijst

Opdracht 11

Maak voor elke opdracht een knop en zorg dat bij een druk op die knop een de gevraagde datum-tijd uitvoer een een uitvoer-div komt te staan

A	Geef een directe weergave van de inhoud van een new Date()

B	Geef eerst de datum van vandaag in getallen, bijv.: "21-11-2012" en maak dan een array met de maanden waarna je de maand (11) vervangt door "november" dus: 21 november 2012

C	Voeg een array met de dagen van de week er aan toe en geef een nette weergave van de huidige datum met weekdag en maand uitgeschreven.

Maak een input-element aan waar je een (geboorte)datum in kan voeren in het format: "dd-mm-jjjj".
Zoek op internet (w3schools..?) op hoe het commando split() werkt en zorg dat je de datum in een array laad. Bijv. aDatum[0] = dag, aDatum[1] = maand.
Bij een druk op de knop moet hij de datum uit het veld inlezen en bijv. de tekst weergeven: "21 november 2012 valt op een woensdag"

Maak zelf een script waarmee je uit een geboortedatum-invoer, de leeftijd kan berekenen.

Trek eerst alleen de jaren van elkaar af en sla op in bijv. "leeftijd"
Maak een nieuwe-datum met dag en maand van de geboortedatum en het huidige jaar
Wanneer nieuwe-datum > huidige-datum dan moet je nog jarig worden, dan wordt leeftijd = leeftijd-1
Is het andersom dan klopt "leeftijd"

F	Maak div met een grote weergave van een digitale klok die echt loopt

Een snelheidsspelletje:

Maak een formulier met 10 checkboxen die aan staan
Zodra 1 van de checkboxen uit gechecked wordt, moet de tijd vastgelegd worden
Wanneer alle checkboxen uit zijn, haal je weer de tijd op
Als de laatste wordt uitgezet geef je de tijd weer hoe lang je er over deed

Hoe snel kun je alle checkboxen uit krijgen..??

Tips & trucs

Bedenk dat in je array de maand januari overeenkomt met 0, terwijl januari opgeschreven wordt als maand 1! Houdt daarmee rekening in het weergvene van de maanden!
Wanneer de datum met format "dd-mm-jjjj" is opgeslagen in sDMJ, dan kun je er een array van maken met var aDMJ = sDMJ.split("-");
Met aDMJ[2] heb je in dat geval de maand te pakken

Uitvoer:

Datum-tijd

Opdracht 12

Het Javascript event object gebruiken.

A	Maak een invoerveld en zorg dat bij elke toetsaanslag in 1 alert box de charCode van die toets en zijn waarde weergeven wordt

Zie de eerste tip voor de volgende vraag!

B	Maak een invoerveld waar alleen getallen ingevoerd kunnen worden

Formulieren uitlezen:

C	Maak select-box met 4 options met elke een eigen value. Zorg dat wanneer er een optie gekozen wordt, er een alert verschijnt die value controleert en de tekst van de optie weergeeft met een opmerking (zie uitwerking)

Maak formulier met een checkbox: "verzenden", een multiselect-box en een radiogroup, beide met minimaal 4 opties en nog een submit button.
Zorg bij versturen van het form, dat weergegeven wordt welke radiobutton is aangevinkt en alle geselecteerde items van de multiselect weergeven worden.
Als "verzenden" aangevinkt is moet hij het formulier echt submitten, anders moet dit worden afgevangen.

Tips & trucs

Met e.preventDefault(); kun je voorkomen dat de normale afhandeling van een event stopt. Bijv. wanneer een toetsaanslag op een text-box geen waarde bevat, zet hem dan niet neer...!
Zoek op internet op hoe je radiogroups kunt uitlezen..

Uitvoer:

Opdracht 13

Formulier

form-jQuery eindopdracht
basis opdracht
(zie voor basis-script bovenstaande link. Zie voor verdere uitwerkingen tips in de broncode)

Maak een formulier met de velden die in de onderstaande opdrachten beschreven staan.
Onder elk formulierelement, leg je een lege <div> waarin je bij foute invoer aangeeft, wat er fout is ingevoerd!

A	3 invoervelden met Voornaam, tussenvoegsel en achternaam. Voorwaarde: alleen tussenvoegsel mag leeg zijn. Wanneer controleren: bij verlaten van het veld en bij submitten formulier. Onder deze link vind je een voorbeeld van een functie die bij verlaten van het veld controleert of deze leeg is.

Een basisvoorbeeld reguliere expressies gebruiken. Bekijk daarvoor de tutorial op w3schools

B	Adres, postcode woonplaats Voorwaarde: Geen van allen mag leeg zijn. Postcode kan alleen 4 cijfers en 2 hoofdletters bevatten Wanneer controleren: bij submitten formulier.

C	Telefoonnummer Voorwaarde: Mag niet leeg zijn. Vang alle toetsaanslagen af behalve cijfers en spatie Wanneer controleren: bij intypen van elke toets.

D	Emailadres Voorwaarde: Mag niet leeg zijn. Controleer op een @ en op een punt in het adres Wanneer controleren: bij verlaten van het veld.

Keuze voor dagen in de week
De dagen moeten naar keuze met een radiobox of een multi-select element worden opgebouwd vanauit een javascript array. Maak daarvoor eerst een array van dag[0] t/m dag[6] en zorg dat de index-waarden en de namen overeen komen met de getDay() functie. Voorwaarde:

Standaard alleen maandag geselecteerd
Er moeten minimaal 2 dagen aangevinkt worden
Geef een waarschuwing wanneer er weekenddagen zijn geselecteerd

Wanneer controleren: Min. 2 dagen, bij submitten formulier. Waarschuwing bij selectie van weekend-dag.

F	Checkbox weekend: Maak een checkbox "zonder weekend" die standaard aan staat en de weekend dagen enabled of disabled

Tips & trucs

Tip 1
Tip 2

Uitvoer:

Opdracht 14

Maak een vierkant vlak binnen je HTML pagina (200 x 200) en geef deze een gestippelde rand en leg daar je canvas in.

A	Leg midden in je canvas, een rood cirkeltje met zwarte rand en daarachter een kleurverloop over het hele canvas.

B	Schrijf je naam in het canvas met een "outline"

C	Teken een (3/4) cirkel, lijnen e.d. in het canvas.

D	Maak een canvas-wis-knop

E	Zet eerst middenonder in je canvas, een teller die de seconden van de minuur aftelt en teken dan een secondewijzer

F	Maak een digitale en analoge klok ineen. Google op de afbeelding van de uren cirkel

Tips & trucs

Bekijk voorbeeld van code en uitvoer voor om de (x,y) positie van de secondewijzer te bepalen
Zorg dat je het canvas wist bij elke seconde tik..

Uitvoer:

Opdracht 16

Kopieer de map met de uitwerking van de formulieropdracht en breng daar de volgende jQuery veranderingen in aan.
Include de jQuery libary in een eigen pagina
Bekijk deze jsFiddle.
Je kunt hem online uitproberen en aanpassen (klik daarna op run), of je kunt het Javascript gedeelte kopieren. (houd wel je eigen formulier en css aan !!)
Er staan verschillende voorbeelden voor van het gebruik van jQuery, de meeste staan uit-gecommentarieerd. Probeer stuk voor stuk dingen uit: haal slashes weg en test de werking.
Probeer uiteindelijk met alle functies de volgende opdrachten te maken:

Geef elk verplicht veld in het formulier een class "vp" mee (wordt in jsFiddle ook gebruikt.
Voeg een class "txt" toe (class="vp txt") aan alle tekst-inputs (vnaam, tussenv, anaam, straat, plaats..).
Gebruik de functie "verzendForm()" uit het voorbeeld (wordt aangeroepen in <form ..> en schrijf 1 regel jQuery die bij al die "txt" classes een standaard tekst invuld.

B	Haal overal de onbliur fuctie uit het formulier en gebruik nu maar 1 maal de .blur uit het voorbeeld. Roep in de blur-functie de functie "valideerVeld( $(this) )" aan (met $(this) geef je de sender mee). Controleer in valideerVeld() of het veld niet leeg is, zo ja: geef een console.log().

C	Haal alle <span>s met foutmeldingen uit je formulier: je gaat ze dynamisch, met jQuery toevoegen! Maak met m.b.v. het voorbeeld een <span> aan achter de lege input met een foutmeldingstekst.

De "error_spans" hebben allemaal dezelfde class, tell met "length (zie voorbeeld) het aantal errors en laat die in de console zien.
Zorg ervoor dat wanneer de het aantal errors>0 is dat de functie "false" teruggeeft, waardoor het form niet verstuurd wordt. Zijn er geen errors moet hij "true" returnen. (zie toelichting in voorbeeld).

E	Maak je formulier verder af

Tekst

Tips & trucs

Bekijk voorbeeld van code van de jsFiddle (link staat ook in uitvoer)

Uitvoer: Bekijk de voorbeelden in deze jsFiddle

A)	geef waarde van toets
B)	alleen numerieke input
C)	Kies het oudste besturingssysteem: