JavaScript
JavaScript is een scripttaal maar je hoeft geen doorgewinterde programmeur te zijn om ermee te werken. Het kent namelijk een vrij eenvoudige structuur. Gebruik JavaScript om je website te verlevendigen, zo kun je interactieve formulieren ontwikkelen, online berekeningen laten uitvoeren of vragen om input van een sitebezoeker. Deze cursus JavaScript brengt je meteen de eerste beginselen van het programmeren bij.
Met JavaScript maak je een website interactief. Het is een uitbreiding op HTML, geschikt voor het verlevendigen van je webpagina. Je kunt bijvoorbeeld interactieve formulieren ontwikkelen, online berekeningen laten uitvoeren of vragen om input van een sitebezoeker. Het leuke van JavaScript is dat je met een beperkte kennis van de taal al veel kunt doen op je pagina. De taal kent een vrij eenvoudige structuur. Je hoeft geen doorgewinterde programmeur te zijn om met JavaScript te werken. Daarbij komt dat JavaScript een goede eerste kennismaking is met programmeren. Door JavaScript te leren, leer je de beginselen van het programmeren.
Er bestaat client-side en server-side JavaScript. Client-side JavaScript wordt direct uitgevoerd door de browser van de bezoeker, server-side JavaScript wordt uitgevoerd door de server waar de site op staat. In deze cursus wordt alleen client-side JavaScript behandeld. Het voordeel van client-side JavaScript is dat er geen dataverkeer met een achterliggende server of database voor nodig is.
In deze cursus leer je snel met JavaScript om te gaan. Wil je echt alles van JavaScript leren, dan is de aanschaf van een zogenaamd reference-boek raadzaam.
Doelgroep & Inhoud cursus
Deze basiscursus Javascript is bedoeld voor mensen die nog nooit iets met JavaScript hebben gedaan. De cursus bestaat uit drie delen. In het eerste deel van de cursus maak je kennis met de structuur van JavaScript. Je leert wat variabelen zijn, je maakt kennis met functies binnen JavaScript en leert omgaan met if-else-statements. Deel 1 sluiten we af met het maken van zogenaamde image swaps.
In het tweede deel worden de functies binnen JavaScript verder besproken, leer je omgaan met windows, loops en arrays. Ook zul je in het tweede deel van de cursus kennismaken met de kunst van het 'stelen'. Door scripts van anderen te bestuderen, en te kijken hoe zij met een oplossing zijn gekomen leer je veel.
In deel drie van de cursus zal uitvoeriger op de loops, arrays en functions worden ingegaan. Dit zal voornamelijk gebeuren door het maken en bespreken van een opdracht. We sluiten de cursus af met het maken van interactieve formulieren.
Basiskennis HTML vereist
Voor het volgen van deze cursus JavaScript heb je basiskennis van HTML nodig. Heb je geen basiskennis HTML, dan kun je deze opdoen via onze HTML-cursus. Verder heb je een browser nodig die JavaScript ondersteunt (dat doen ze tegenwoordig allemaal) en een teksteditor (bijvoorbeeld Kladblok (Notepad)) of HTML-editor waarmee je de pagina's maakt (de code schrijft).
Achtergrond JavaScript
Voordat de geheimen van JavaScript worden onthuld, eerst wat theorie. Als je hier geen zin in hebt kun je dit gewoon overslaan en direct doorgaan naar JavaScript: de structuur.
JavaScript wordt ondersteund door vrijwel alle browsers. Het is een scripttaal, die zonder extra hulpmiddelen als aanvulling in HTML kan worden ingesloten om webpagina's dynamisch en interactief te maken. Met de opdracht alert in JavaScript krijg je bijvoorbeeld een venstertje in beeld met een mededeling. Wat voor mededeling bepaal jijzelf. Maar de code voor het venstertje is al opgenomen in de browser, hier heb je dus geen omkijken naar.
Het verschil tussen JavaScript en Java
Er is nogal wat verwarring rond JavaScript en Java. JavaScript is ontstaan in de periode dat Java erg in opkomst was. De geschiedenis van beide talen is dan ook nauw met elkaar verbonden. Java is ontwikkeld door Sun Microsystems.
Netscape wilde een taal ontwikkelen met de mogelijkheden van Java maar die een stuk eenvoudiger was en verder direct door een browser uitgevoerd zou kunnen worden. Hiervoor begon het een samenwerking met Sun dat uiteindelijk tot de scripttaal JavaScript leidde.
|
JavaScript is niet hetzelfde als Java. JavaScript is een scripttaal, Java een objectgeoriënteerde platformonafhankelijke programmeertaal. Java kan op zichzelf draaien maar ook in de vorm van een applet, een klein programmaatje opgenomen in een HTML-pagina. Deze veelzijdigheid is juist de kracht van Java.
JavaScript en Java zou je dus niet moeten verwarren. JavaScript werkt op een ander niveau dan Java, en is veel makkelijker te leren dan Java. Serieuze webontwikkelaars hebben de voorkeur voor Java, dat neemt niet weg dat kleine JavaScripts erg handig kunnen zijn.
JavaScript: de structuur
Genoeg nu over wat JavaScript wel en niet is. Het is tijd om kennis te maken met een eerste scriptje. Aan de hand van dit scriptje wordt de structuur en syntaxis van JavaScript uitgelegd.
Klik op deze link die je naar een voorbeeldpagina met een Javascript brengt. Je zult zien dat er een box in het browser-venster verschijnt met de tekst 'dit is een alert box'. Door op 'ok' te klikken verdwijnt de box en zie je de inhoud van de voorbeeldpagina.
Zoals je ziet is er weinig aan de opmaak van de pagina gedaan. Je ziet alleen de titel 'Dit is een voorbeeldpagina.' Hier is bewust voor gekozen om de broncode zo compact mogelijk te houden. De broncode vraag je op door in het browsermenu op Beeld te klikken en daarna op Bron. De code die begint met script language="JavaScript"(tussen vishaken) en eindigt met /script(tussen vishaken) is de JavaScript-code.
Afbeelding 1. Code voor een alert box
Voordat je variabelen kunt gebruiken in code, moet je deze eerst declareren. Hiermee zorg je dat in de code bekend is dat de variabele een bepaalde waarde heeft, en wat deze waarde betekent. Voor JavaScript is het een goede gewoonte om (de meeste) variabelen die in latere scripts op de pagina gebruikt gaan worden in het head-gedeelte van de pagina te declareren.
De JavaScript-code in het voorbeeld staat tussen de title-tag en de head-tag van de HTML-pagina: het head-gedeelte van de pagina. In principe worden in dit gedeelte de eerste variabelen gedeclareerd omdat dit gedeelte eerder wordt ingelezen door de browser dan de body. Het deel van de code dat werkt met de van tevoren gedeclareerde variabelen zal tussen de body-tags van de HTML-pagina komen.
|
Laten we nu eens de broncode van het voorbeeld met de alert box nader bekijken. We zien dat de JavaScript-code begint met script language="JavaScript"... In feite zou de script-tag volstaan omdat JavaScript de standaard scripttaal is voor alle browsers. Maar of dit zo blijft is niet zeker, daarom is het aan te raden om toch language="JavaScript" in de tag op te nemen.
Commentaar
Als je goed wilt programmeren moet je jezelf aanleren om in de code regelmatig 'commentaar' op te nemen. Dit kan van pas komen als je de code na lange tijd weer bekijkt. Soms weet je niet meer waarom je voor een bepaalde oplossing hebt gekozen. Verder kan het zijn dat iemand anders de code bekijkt en wil weten waarom je een bepaalde oplossing hebt gekozen.
Commentaar leveren kan ongezien! Zo kun je een korte regel opnemen door na twee // (slash forwards) commentaar weg te schrijven. Dit is op de webpagina niet zichtbaar. Het wordt wel zichtbaar als je de broncode van de pagina bekijkt.
Als het om een groot stuk tekst gaat kun je beter kiezen het commentaar tussen /* en */ te zetten. Op deze manier geef je duidelijk aan waar je commentaar begint en waar het eindigt.
|
Verder zie je in de code de regel
alert("dit is een alert box");
staan.
Deze scriptregel roept de alert box op die in beeld verscheen op het moment dat je de pagina opvroeg. Met alert geef je de opdracht om een venster met een melding of waarschuwing te openen. Deze opdracht zal later in deze cursus uitgebreider worden besproken. Voor nu is het belangrijk om te weten dat de opdrachtregel (scriptregel of statement) eindigt met een puntkomma. De tekst die je in de alert box wilt hebben zet je tussen dubbele aanhalingstekens ofwel dubbele quotes.
De JavaScript eindigt met een script-tag.
|
Variabelen
Je hebt nu gezien hoe JavaScript-code is opgebouwd. Nu is het tijd om zelf te leren scripten! Hiervoor moet je eerst kennismaken met enkele basisbegrippen van het programmeren. Zo moet je eerst leren omgaan met variabelen. Maar wat is een variabele? Om dit uit te leggen volgt een simpel rekenvoorbeeldje:
Als je "x = 5" ziet staan kun je dit lezen als, x is een variabele met de waarde "5". Als je vervolgens gevraagd wordt naar de waarde van variabele y, en je weet dat x waarde "5" heeft, en je krijgt ook nog de informatie "7 = y + x", dan weet je dat y de waarde "2" heeft.
Wat kunnen we hieruit concluderen? Een variabele is een geheugenplaats waar je een bepaald gegeven kunt bewaren, zodat je dit gegeven later weer kunt gebruiken. De geheugenplaats is de variabele. De naam van de geheugenplaats is de variabelenaam. Deze variabelenaam kun je gebruiken om het betreffende gegeven weer op te vragen.
De keuze van de variabelenaam is vrij, maar er zijn wel enkele beperkingen. Je mag in de naam alleen letters, cijfers en de underscore (_) gebruiken. Het eerste teken moet een letter of een underscore zijn.
Declaratie van variabelen
Op deze webpagina zie je hoe eerst een aantal variabelen wordt gedeclareerd in het head-gedeelte van de HTML-code. Dat ziet er als volgt uit:
var sec_per_min = 60;
var min_per_uur = 60;
var uren_per_dag = 24;
var dagen_per_jaar = 365;
Met de gedeclareerde variabelen kun je nieuwe variabelen berekenen door eenvoudige rekenkunde (* is vermenigvuldigen, + optellen en - aftrekken) te gebruiken.
In het voorbeeld zijn de nieuw berekende variabelen:
var sec_per_dag = sec_per_min * min_per_uur * uren_per_dag;
var sec_per_jaar = sec_per_dag * dagen_per_jaar;
De eerste codeert voor het aantal seconden per dag, de tweede voor het aantal seconden per jaar. In dit voorbeeld zijn de variabelen allemaal numeriek. Door toepassing van eenvoudige rekenkunde kun je hiermee rekenen. Als je twee numerieke variabelen met elkaar vermenigvuldigt door "*" (zie broncode) te gebruiken is de uitkomst een nieuwe variabele.
Hoe je de tekst 'Er zitten heel wat seconden in een jaar, 31536000 om precies te zijn.' in beeld krijgt zie je in afbeelding 2. Hier is een gedeelte van de broncode weergegeven die verantwoordelijk is voor de zin.
Afbeelding 2. Werken met variabelen
In de broncode van deze pagina kun je zien hoe bovenstaande regel is opgebouwd. In deze code is gebruik gemaakt van de code document.write. Hiermee kun je HTML schrijven met JavaScript. document.writeln doet in principe hetzelfde, maar sluit de regel ook nog af met een harde return.
Met de opdracht document.write("deze tekst verschijnt in de webpagina"); schrijf je de tekst dus naar de webpagina. In afbeelding 2 zie je dat het aantal seconden, de inhoud van variabele sec_per_jaar, niet tussen dubbele aanhalingstekens staat. Door document.write(var); schrijf je de waarde van een variabele naar de webpagina. Door tekst en variabelen te combineren zoals in het voorbeeld krijg je uiteindelijk een begrijpelijke zin. Je kunt HTML-tags in de document.write( ) opdrachtregel verwerken, deze worden ook als zodanig geïnterpreteerd.
|
Werken met strings
We hebben net al gezien dat een variabele een numerieke waarde kan bezitten, of uit tekst kan bestaan. De waarde van een variabele die uit tekst bestaat wordt ook wel string genoemd. Strings als variabelen zijn handig, je hoeft niet steeds dezelfde tekst in te tikken maar roept de variabele op. In de volgende webpagina zie je hoe je variabelen en strings kunt gebruiken. Tevens maak je kennis met nieuwe code: de prompt.
|
De prompt laat een dialoogvenster met een tekst en een invoerveld verschijnen. We gebruiken de prompt om input van de bezoeker te vragen. Als de bezoeker tekst heeft ingevoerd in het venster en op "ok" klikt, schrijft JavaScript dit gegeven weg als de variabele waarin de prompt was opgenomen.
var naam = prompt("Wat is je naam", " ");
Bovenstaande code laat bijvoorbeeld een venster zien waarin om je naam wordt gevraagd. Stel je vult Kees in. Als je nu op ok klikt heeft de variabele "naam" de waarde "Kees". Met deze waarde zal het blijven werken totdat de variabele een nieuwe waarde toegewezen krijgt.
In het voorbeeld zag je hoe de prompt-methode werd gebruikt om je naam, leeftijd en geboortemaand te vragen. De ingevulde gegevens werden toegekend aan de corresponderende variabelen.
Als de bezoeker van je site netjes alle gevraagde gegevens invult krijgt hij door onderstaande code (voor het geheel zie broncode van de voorbeeldpagina) een leesbare zin te zien:
document.write(aanhef + naam);
document.write("Je bent nu " + leeftijd + " jaar oud.");
document.write("En je geeft aan dat je in de maand " + geboortemaand + " geboren bent.");
Je ziet hier weer dat variabelen zowel numeriek kunnen zijn als tekst kunnen bevatten. Een tekstmatige variabele noemen we een string, maar een string hoeft geen variabele te zijn. Zo zien we in bovenstaand voorbeeld dat bij gebruik van document.write tekst ook eenmalig als string kan worden ingevoerd. Het mooie van JavaScript is dat je de verschillende variabelen en strings simpel door een + teken aan elkaar kunt lijmen, met een logische zin als resultaat:
Beste jouw naam,
Je bent nu jouw leeftijd jaar oud. En je geeft aan dat je in de maand jouw geboortemaand geboren bent.
In de broncode van het voorbeeld zie je ook de variabele met de naam opdracht. De inhoud van deze variabele is een lange string met de waarde Het is de bedoeling dat je nu zelf met Javascript een site maakt waarop gevraagd wordt naar gegevens van de bezoeker die later op de site gebruikt worden.
Deze string kun je als HTML-tekst wegschrijven met document.write(opdracht);
Het resultaat is de tekst van de string. En je ziet hoe compact de codering is. Dit is vooral handig als je dezelfde tekst meerdere keren wilt gebruiken, zoals in het voorbeeld waarbij dezelfde tekst cursief, vet en in het rood is neergezet (Hoe je dit kunt bereiken zie je in de broncode van de pagina).
Met de gegevens die van jou gevraagd werden gebeurde op de pagina niet zoveel, in ieder geval niets spannends. Om het allemaal wat interessanter te maken gaan we werken met if en if-else opdrachten.
If
In het voorgaande voorbeeld vroegen we naar de naam en leeftijd van de bezoeker. Als deze niets invult en meteen op de ok-knop klikt, leidt dat tot de zin: " Beste , Je bent nu jaar oud. En je geeft aan dat je in de maand geboren bent." Hetzelfde resultaat krijg je als de bezoeker op annuleren klikt, de waarde null wordt dan toegekend. Dat ziet er niet zo netjes uit. Je kunt dit eenvoudig ondervangen met de if-opdracht. Zie hiervoor deze pagina. Als je de gegevens invult zie je geen verschil met de eerdere pagina. Maar, als een bezoeker besluit niets in te vullen zal hij de tekst "Je bent niet van plan om de gegevens in te vullen. Jammer dan." in beeld krijgen.
Met een if-opdracht kun je dus beslissen wat er moet gebeuren als er aan een bepaalde voorwaarde (niet) wordt voldaan.
Bestudeer de broncode van de pagina met de if-opdracht, en oefen hier zelf mee.
De if-opdracht ziet er als volgt uit:
if (naam == "") naam = "bezoeker zonder naam"
if (naam == null) naam = "bezoeker zonder naam"
De uitdrukking == null is een vergelijking. Deze staat altijd tussen haakjes. De uitkomst van een vergelijking is altijd een logische waarde, ofwel waar (true) of niet-waar (false). Alleen wanneer de uitkomst waar is, wordt de opdracht achter de if-statement uitgevoerd. Anders wordt deze overgeslagen. Bij vergelijkingen wordt een dubbel isgelijkteken gebruikt om onderscheid te maken met het enkele isgelijkteken dat gebruikt wordt om variabelen te declareren.
If-else
Als de if-opdracht is afgerond, kan de volgende opdracht worden uitgevoerd. Maar het kan ook gebeuren dat je deze slechts wilt laten uitvoeren als de vergelijking van de if-opdracht false oplevert (niet waar is dus). In dit geval wordt de if-opdracht gecombineerd met een else-opdracht, we spreken dan ook wel van een if-else statement.
In het volgende voorbeeld zie je hoe een if-else statement gebruikt kan worden om een bezoeker die zijn naam niet invoert een andere introductietekst te laten zien dan de bezoeker die wel een naam invoert.
Hoe dit in de code is verwezenlijkt zie je door de bron van de pagina op te vragen.
Opdracht Geboortejaar
Schrijf nu zelf in JavaScript code waarin je vraagt om het huidige jaar, iemands leeftijd, naam, geboortemaand, en de huidige maand. Op basis van deze gegevens kun je met JavaScript het geboortejaar uitrekenen. Toon dit in de opdracht.
Als je er niet uitkomt, kijk dan in de code van deze pagina. Het kan vast op een elegantere wijze berekend worden, maar dit voorbeeld demonstreert wat er met JavaScript mogelijk is.
De vensters die nu in beeld komen kunnen vrij irritant zijn. Daarom is het beter om de gegevens die we voor deze cursus gevraagd hebben per formulier te laten invullen. Hoe dit werkt zullen we in deel 3 van de cursus zien.
Voordat we dit deel van de cursus afsluiten nog even aandacht voor link events.
Link events
Link events zijn bijzondere stukjes JavaScript-code opgenomen in een webpagina. Kijk maar eens naar deze pagina. Hier zie je de link events: onClick en onMouseOver. Bij onClick wordt er een actie uitgevoerd zodra je op de link klikt. Bij onMouseOver wordt er al een actie uitgevoerd als je met de muis over de link beweegt. Je hoeft dan niet te klikken.
In de bron van het voorbeeld zie je dat voor deze link events er geen script-tags in de code staan opgenomen. De reden is dat alles dat binnen de dubbele aanhalingstekens van een onClick of onMouseOver staat automatisch als JavaScript vertaald wordt.
onClick
Laten we nu de code van onClick onder de loep nemen. Kijk hiervoor in de broncode van het bovengenoemde voorbeeld.
Het is eigenlijk een gewone anchor-tag met als bijzonder deel onClick="" dat vertaald kan worden met "als iemand hierop klikt, voer dan de JavaScript-code uit die tussen de dubbele aanhalingstekens staat. Je ziet dat er zelfs een puntkomma aan het einde van de JavaScript-code is opgenomen.
De "#" tussen de aanhalingstekens bij href voorkomt dat de browser probeert een andere pagina in te laden.
onMouseOver
De code voor onMouseOver onderscheidt zich niet veel van de onClick-code. Het enige verschil is dat je nu niet hoeft te klikken, en toch de gewenste actie krijgt. Wat je met link events kunt doen zie je hieronder.
Image Swapping
Een van de meest gebruikte toepassingen van JavaScript is het image swapping, ofwel wisselen tussen afbeeldingen.
Hiervoor maak je gebruik van de onMouseOver-opdracht. Bestudeer de broncode van deze pagina nog maar eens. Je ziet een afbeelding van een oor die je kunt wisselen met een afbeelding van een oog door simpelweg over de links met de naam "oor" en "oog" te bewegen.
Bestudeer de broncode en probeer zelf een pagina met image swapping te maken.
In dit deel van de basiscursus JavaScript heb je kennisgemaakt met de structuur van de scripttaal. Je hebt geleerd wat variabelen en strings zijn. Je hebt geleerd hoe je online berekeningen kunt uitvoeren. En je hebt leren werken met if-else opdrachten. In het volgende deel zullen deze onderwerpen nogmaals de revue passeren. Verder zal meer aandacht worden besteed aan de structuur en syntaxis van JavaScript.
In deel 1 van de basiscursus JavaScript heb je geleerd hoe je JavaScript-code in een HTML-pagina kunt opnemen. Je hebt kennisgemaakt met eenvoudige scripts zoals de dialoog box, if-else statements, link events en image swaps.
Ongemerkt heb je hierbij gezien hoe de syntax van JavaScript is opgebouwd. In dit deel van de basiscursus staan we kort stil bij het hoe en waarom van de JavaScript-syntax.
|
In het vorige deel van de cursus heb je gezien dat de code
document.write("Dit is JavaScript-gegenereerde tekst");
de tekst Dit is JavaScript-gegenereerde tekst op een webpagina zet. Maar, waarom is de notatie 'document.write' en niet gewoon 'write'? Dit komt doordat de JavaScript-syntax volgens het Document Object Model (DOM) is opgebouwd.
Het valt buiten het kader van deze basiscursus om het Document Object Model uitvoerig te behandelen. Toch is het van belang om voor het werken met JavaScript enig begrip van dit model te krijgen.
Document Object Model
Het Document Object Model is een zogenaamd Application Programming Interface (API) voor documenten. Het API beschrijft hoe een programma en een besturingssysteem met elkaar communiceren.
In het DOM is vastgelegd hoe de logische structuur van een bestand is opgebouwd en hoe de inhoud kan worden bewerkt. Zoals de naam al aangeeft, wordt hierbij uitgegaan van objecten waardoor het maken en bewerken van ingewikkelde documenten eenvoudig wordt. Alle elementen in een HTML- of XML-document kunnen benaderd, veranderd, verwijderd of toegevoegd worden door gebruik van het DOM.
De structuur van een pagina zoals deze lijkt veel op de structuur van het DOM die deze pagina beschrijft. Kijk maar eens op de site van W3C. Daar vind je het document What is the Document Object Model waarin duidelijk wordt beschreven wat het model wel is, maar ook wat het niet is.
Op deze pagina vind je de volgende HTML-code voor een tabel:
In het DOM ziet deze pagina er als volgt uit:
In het DOM hebben documenten een logische structuur, enigszins vergelijkbaar met een boomstructuur. W3C vergelijkt de structuur zelfs met een bos die meerdere bomen kan bevatten. De boomstructuur is geen vereiste in het DOM, het beschrijft ook niet de exacte relatie tussen de verschillende objecten in het model.
De zojuist genoemde boomstructuur is een voorbeeld van een stuctuurmodel. Het DOM geeft geen exacte beschrijving hoe een structuurmodel eruit moet zien. Maar als twee verschillende toepassingen die het DOM gebruiken een en hetzelfde document moeten beschrijven, zal er exact hetzelfde structuurmodel uitkomen.
De structuur is een hiërarchische onderverdeling van zogenaamde nodes: in dit geval representeren deze nodes de objecten die eigenschappen die worden gebruikt voor het manipuleren van de gegevenselementen die ze vertegenwoordigen zoals alinea's, afbeeldingen en tabellen. Het DOM bevat de algemene naam van elk object, de oorspronkelijke eigenschappen en de methode waarmee je het object kunt benaderen en manipuleren.
Met behulp van JavaScript kun je het DOM acties laten uitvoeren. Aan de objecten kun je namen toekennen waardoor je ze met JavaScript kunt oproepen en bewerken. Het grote voordeel is dat alle objecten afzonderlijk benaderbaar zijn. Een wijziging van één object wordt direct uitgevoerd, je hoeft de pagina niet helemaal opnieuw te laden.
|
Bovenstaande uitleg over het DOM is vrij abstract. Om te leren begrijpen hoe je het DOM in de praktijk toepast, beginnen we met uitleg hoe je met JavaScript browservensters kunt openen en manipuleren.
Vensters (Browser windows)
Vensteroproep in HTML
Een browservenster in HTML roep je op door een webadres tussen zogenaamde anker-tags te zetten. Deze tags plaatsen op de webpagina een link. Als je op de link klikt opent de aangegeven pagina in hetzelfde venster als waar de link staat. De oude pagina moet plaatsmaken voor de nieuwe pagina.
Door een target in de code op te nemen, kun je een nieuw venster openen zodra je op een link klikt. Kijk maar eens op deze voorbeeldpagina. Hier vind je twee links. Eén van de links plaatst de nieuwe pagina in het bestaande venster. De andere link creëert een nieuw venster. In de broncode van de voorbeeldpagina zie je hoe dit kan.
Het blijkt dat het nieuwe venster uit het voorbeeld de naam "een_nieuw_venster" heeft. Als je nu verder in de code van de webpagina weer een venster oproept met dezelfde naam, dan zal de inhoud van het venster vervangen worden door de nieuwe inhoud waar de tweede link naar verwijst.
Vensteroproep in JavaScript
In HTML bepaalt de browser hoe het venster eruit ziet. Je hebt hier zelf weinig invloed op. Als je dit wel wilt hebben, is het beter een venster met JavaScript op te roepen. De algemene syntax in JavaScript hiervoor is:
window.open("url", "naam", "eigenschappen");
Hierdoor wordt een venster geopend met als inhoud de pagina aangegeven door de url in de code, de eerste parameter. De tweede parameter is de naam die je het nieuwe venster geeft. In HTML gaf je een naam met target.
|
Als je nog een venster opent met dezelfde naam als een venster dat al bestaat, zal er niet een nieuw venster verschijnen, maar zal de inhoud van de opgeroepen pagina in het bestaande venster komen. De nieuwe inhoud vervangt de oude inhoud.
Klik maar eens op deze voorbeeldpagina. De eerste link op deze pagina opent een venster met de naam JavaScript_1 waarin de inhoud van voorbeeldpagina1.html verschijnt. De tweede link opent een nieuw venster die de naam JavaScript_2 krijgt. De inhoud van voorbeeldpagina2.html verschijnt in dit venster. De derde link opent weer een venster met de naam JavaScript_1, maar omdat dit venster al bestaat, zal het de informatie van voorbeeldpagina2.html naar dat al geopende venster sturen.
De derde parameter, eigenschappen (features), is een lijst van eigenschappen die je een venster kunt geven. In HTML is het niet mogelijk om een venster bepaalde afmetingen mee te geven. Bij het openen van een venster met HTML-code krijg je een venster met standaardafmetingen. De parameter eigenschappen is niet verplicht. Als je hier niets invult krijg je een venster die dezelfde standaardafmetingen heeft als een venster die je met HTML oproept.
|
Meer over Venstereigenschappen (features)
Net werd al gesteld dat de parameter eigenschappen optioneel is. Als je niets invult, verschijnt een standaard venster. Als je wel eigenschappen toekent, zal het venster die eigenschappen meekrijgen die je opgeeft. Je kunt ook meerdere eigenschapen meegeven. De verschillende eigenschappen scheid je door een komma.
Bijvoorbeeld:
window.open("url", "naam", "location, menubar, height=100, width=100");
Hierdoor zal een venster geopend worden met een adresbalk (waar de url staat), een menubalk en met de afmetingen van 100 bij 100 pixels.
Hier vind je een pagina met een aantal links die verschillende soorten vensters openen.
Hieronder vind je een aantal eigenschappen waaruit je kan kiezen:
menubar
Dit zijn de functies die bovenin de meeste programa's in een rij verschijnen: Bestand, Bewerk etc.
status
Dit is de balk onderin een pagina waarin de url van een link verschijnt als je met je muis over deze link beweegt.
scrollbars
Deze eigenschap laat scrollbars verschijnen als dat nodig is
resizable
Met de eigenschap resizable kan de bezoeker de grootte van het venster veranderen door met de muis te slepen
width
Hiermee geef je een specifieke breedte van het venster op (in pixels)
height
Hiermee geef je de hoogte van het venster in pixels op
toolbar
De toolbar-eigenschap bepaalt of de toolbar in het venster verschijnt. In de toolbar zitten knoppen als vooruit en terug.
location
Brengt de adresbalk in beeld
Objecteigenschappen
Het object geörienteerd programmeren is niet zo moeilijk te begrijpen als je weet dat de informatie opgebouwd is uit de zojuist besproken objecten. Het voordeel van JavaScript is dat het beschikt over een groot aantal voorgeprogrammeerde objecten die je zo kunt oproepen en gebruiken. Zo heb je al kennisgemaakt met het object Window waar we net al uitvoerig mee hebben gewerkt.
Objecten beschikken over eigenschappen waardoor ze beschreven worden. Zo heeft het object Window zijn naam als eigenschap, maar ook de woorden in de status balk, de url van de pagina die het Window vult en de afbeeldingen en de hyperlinks in het venster zijn eigenschappen van het object Window.
Laten we even kijken naar de status bar (statusbalk). Voor een standaard venster (zoals we die eerder zagen) geldt een standaard statustekst (Gereed voor de Nederlandse versie van IE, Ready voor de Engelstalige IE). Op deze pagina vind je een alternatieve tekst in de statusbalk die er direct bij het opvragen van de pagina staat. Je kunt ook een andere tekst door een gebeurtenis oproepen. Hiermee wijzig je de eigenschap (statusbar) van het object (Window) door de gebeurtenis: onMouseOver.
Kijk maar eens naar deze pagina hoe de tekst in de statusbalk wijzigt door gebruik van een onMouseOver.
|
Objectmethoden
Naast eigenschappen kunnen er ook methodes aan objecten gekoppeld zijn. Zo heb je al kennisgemaakt met de open-methode in de volgende notatie:
window.open("url", "naam", "eigenschappen");
Je ziet dat de notatie van een methode dezelfde regels volgt als de notatie van een eigenschap: het object gevolgd door de punt en daarna de methode. Met als verschil dat een methode altijd gevolgd wordt door haken waartussen de parameters van de methode staan. Zelfs als er geen parameters zijn moet je de haken plaatsen.
Je hebt in het begin van cursusdeel 1 al gewerkt met objecten en methoden zonder dat je dit in de gaten had, bijvoorbeeld bij het oproepen van een alert box. Verwarrend is misschien dat bij het oproepen van een alert box (met Window als standaard-object) de objectnaam weggelaten mag worden.
Er zijn een groot aantal methodes gekoppeld aan het object Window. Twee handige methodes zijn blur en focus. Met de eerste methode kun je een venster naar de achtergrond verplaatsen (achter alle andere vensters die open staan zetten). Met focus kun je een venster juist naar de voorgrond halen. Op deze pagina zie je twee links. In de eerste link zie je hoe de blur-methode in werking. De tweede link laat zien wat de focus-methode in werking.
Werken met vensters
Je zult merken dat, als je website wat complexer wordt, je te maken krijgt met meer en meer vensters die je van elkaar af wilt laten hangen. Om dit te kunnen doen kun je een zogenaamde window reference aanmaken: dit kan bijvoorbeeld door een variabele naar een Window te laten refereren. Kijk maar eens naar dit voorbeeld.
Je ziet in de broncode dat we de code voor het openen van een nieuw venster aan de variable nieuw_venster toekennen. Variabelen kunnen dus behalve tekst en cijfers ook naar objecten refereren, in dit geval naar een Window.
De variabele nieuw_venster gedraagt zich exact als het object Window, en kan daarom ook zo benaderd worden. Zo laat
nieuw_venster.blur();
het nieuwe venster naar de achtergrond verdwijnen.
We weten nu dus dat JavaScript object geörienteerd is. Dat er een aantal standaard objecten zijn, zoals Windows. En we hebben kennis gemaakt met eigenschappen en methodes die het object vertellen wat ermee moet gebeuren. Belangrijk is om te beseffen dat eigenschappen van een object op hun beurt weer objecten zijn die zelf ook weer eigenschappen kunnen hebben. Kijk maar eens terug naar de Image Swap van deel 1. 
Want, zoals eerder vermeld, mocht het standaardvenster window in de notatie worden weggelaten.
In dit voorbeeld zie je het object Window met de eigenschap Document. Document is in dit geval tegelijkertijd een object met als eigenschap oor (een afbeelding). De afbeelding is op zijn beurt weer een object met als eigenschap src.
Eigenlijk vertel je JavaScript hier om naar een venster te kijken, in dit venster op zoek te gaan naar een document, in het document weer te zoeken naar de afbeelding.
Loops, arrays en functies
In les 1 hebben we kennis gemaakt met variabelen, en if-else statements. Maar de syntax van JavaScript gaat verder dan deze onderdelen. Belangrijke onderdelen zijn de loops, arrays en functies. In dit tweede deel van de cursus zullen deze onderdelen slechts kort besproken worden. Uitvoerige voorbeelden en oefeningen volgen in het derde deel van de basiscursus JavaScript.
Loops
Met programmeren komt het nogal eens voor dat je dezelfde handeling een aantal keren achtereen wilt uitvoeren. Zo zou je bij het openen van een pagina met JavaScript om een wachtwoord kunnen vragen zoals op deze pagina (tip: wachtwoord is kraaienest).
Zoals je ziet krijg je maar twee keer de kans om het wachtwoord in te vullen, en daarbij komt dat de code nogal omslachtig is (je hebt verschillende niveaus van if-else statements).
|
While loop en for loops
Het gebruik van if-else opdrachten op verschillende niveaus is onoverzichtelijk en vaak omslachtig. Beter kun je met zogenaamde while loop werken. Kijk maar eens op deze pagina. Je ziet dat de code door gebruik van een zogenaamde while loop een stuk overzichtelijker wordt.
De opbouw van een while loop:
while (voorwaarde)
{ opdracht }
Bestudeer nu de code op deze pagina. Je ziet de volgende regels:
var breedte = prompt("Hoeveel V's wil je zien? (Kies een getal tussen 1 en 20)","1");
var regel="";
var loop = 0;
while (loop < breedte)
{
regel = regel + "V";
loop=loop+1;
}
alert(regel);
Hetzelfde resultaat had je met de volgende notatie bereikt:
var breedte = prompt("Hoeveel V's wil je zien? (Kies een getal tussen 1 en 20)", "1");
var regel = "";
for (var loop=0; loop < breedte; loop++)
{ regel = regel + "V"; }
alert(regel);
Kijk maar op deze pagina.
|
Arrays
We hebben gezien dat variabelen gevuld kunnen worden met cijfers, strings, objecten en referenties. Er is nog een soort informatie die in de variabele gezet kan worden: de array ofwel reeks.
Een array is een lijst. Het kan een lijst namen betreffen, een lijst kleuren, maten of url's.
Laten we als voorbeeld een lijst met dieren opstellen:
var dieren = new Array("hert", "everzwijn", "slang");
Goed, nu heb je een kort lijstje van drie dieren. Maar wat kun je ermee?
Het handige van arrays is dat de elementen van de lijst een nummer krijgen toegewezen waarmee je ze kunt oproepen. Het eerste element van een lijst is nummer 0 en kan als volgt benaderd worden:
var het_element = dieren [0]; Als je deze code in het script opneemt zal de variabele het_element met hert gevuld worden. Je kunt na het opstellen van de lijst altijd nog extra elementen aan de lijst toevoegen.
Zo voegt de code
dieren [0] = "buizerd";
het element buizerd aan de lijst toe. Deze staat door deze codering zelfs bovenaan de lijst.
Functies
Alle programmeertalen hebben functies. Methoden zijn in feite voorgeprogrammeerde functies. Maar je kunt zelf ook een functie definiëren. Dit gebeurt in het header-gedeelte van de pagina. Ze worden meestal aangeroepen in de body van het HTML-document.
Stel, je hebt een rij soortgelijke zinnen in een document die je wilt tonen op een webpagina, bijvoorbeeld:
Mijn naam is Anja en ik woon in Amsterdam.
Mijn naam is Berend en ik woon in Breda.
Mijn naam is Corneel en ik woon in Culemborg.
Je kunt voor elke zin afzonderlijk de code invoeren die de zin creërt. Voor een paar zinnen is dit nog te doen, maar als het een groot aantal zinnen wordt is dit ondoenlijk. Je kunt de code dan beter vangen in één functie die je steeds opnieuw aanroept. Het voordeel is, behalve dat je minder codes hoeft in te voeren waardoor het geheel een stuk overzichtelijker is, dat correcties in de code slechts op één plaats doorgevoerd hoeven te worden.
Code voor de bovenstaande drie zinnen vind je op deze pagina.
In de code zie je dat een functie altijd wordt voorafgegaan door het woord function met daarachter de naam van de functie. Voor functienamen gelden dezelfde regels als voor variabelenamen. Na de variabelenaam volgt de parameterlijst. Deze staat tussen haakjes. De parameters vormen de invoer van de functie.
De opdrachten waaruit de functie bestaat, vind je in de code tussen de accolades. Hieronder nog eens de algemene opbouw van een functie:
function functienaam (parameterlijst)
{
opdracht/statements waaruit de functie bestaat....
}
In ons voorbeeld zijn naam en woonplaats de parameters.
We hebben nu kennis gemaakt met het Document Object Model. Verder hebben we in vogelvlucht Arrays, loops en functies behandeld. In deel 3 van de cursus JavaScript zullen deze onderdelen verder besproken worden aan de hand van een opdracht. Maar voordat we hiermee verder gaan is het van belang om de kunst van het JavaScript 'stelen' uit te leggen.
JavaScripts 'stelen': knippen en plakken
We zijn nu aan het einde gekomen van het tweede deel van de basiscursus JavaScript. Je hebt geleerd hoe je eenvoudige codes in je pagina kunt opnemen, waardoor je een eenvoudige interactiviteit op je pagina verwezenlijkt. Maar misschien wil je meer dan een alert box die opkomt zodra je een pagina opent: een berekening uitvoeren, of de tekst van een statusbalk aanpassen. Meer complexe scripts kun je na het volgen van deze basiscursus nog niet schrijven. Natuurlijk kun je dit wel leren, maar hiervoor heb je minstens een standaardwerk JavaScript nodig, en moet je vele uren achter je pc doorbrengen. Op zich niets mis mee, maar als je wat minder tijd hebt kan het zo wel heel lang duren voordat je met JavaScript voldoende uit de voeten kunt om precies dat te doen wat je voor ogen hebt.
In dat geval kun je beter goed werkende scripts van andere pagina 'lenen'. Zo bespaar je jezelf een hoop tijd omdat je zelf niet meer hoeft te programmeren. En het is ook geen misdaad om JavaScript-code van andere sites te kopiëren en in de eigen pagina te plaatsen. Vermelding van de schrijver als tegenprestatie is wel zo netjes, maar verder ben je vrij om de code te gebruiken, en zelfs aan te passen als dit nodig mocht zijn.
Waar vind je bruikbare codes?
Soms kom je bij toeval een bruikbare code tegen op een willekeurige webpagina. Door in de broncode van de pagina te kijken zie je deze code tussen de script-tags staan.
Je kunt ook actief op zoek naar bruikbare codes in een van de vele online scriptarchieven.:
hotscripts.com
JavaScripts knippen en plakken
JavaScript kit
The JavaScript Source
Hoe plaats je geleende code op jouw pagina?
Om het script in je eigen pagina te plaatsen kopieer je het gedeelte tussen
met inbegrip van deze twee tags. Soms staat er bij de code ook nog een gedeelte dat je moet kopiëren. Als een script niet werkt, controleer dan of je echt wel alle relevante code hebt gekopieerd.
In deel 1 van de basiscursus JavaScript heb je geleerd hoe je JavaScript-code in een HTML-pagina kunt opnemen. Je hebt kennisgemaakt met eenvoudige scripts zoals de dialoog box, if-else statements, link events en image swaps.
In deel 2 van de cursus hebben we uitvoerig stilgestaan bij het Document Object Model, en hebben we loops, arrays en functies kort besproken.
In dit laatste deel van de cursus leer je eerst werken met interactieve formulieren, knoppen en tekstvelden.
We sluiten de cursus af met een opdracht waarvoor je de opgedane kennis uit dit cursusdeel en de eerdere cursusdelen nodig hebt.
In de vorige delen van de basiscursus JavaScript vroegen we om gegevens van een site-bezoeker via de alert box. Op zich een goede methode om informatie op te vragen en direct te verwerken. Maar een alert box kan ook storend werken, alleen al omdat het als een pop-up in beeld springt. Ook als je meerdere vragen stelt, of als je om meerdere gegevens vraagt, werkt de alert box storend. Je kunt dan beter formulieren gebruiken; deze vormen bij uitstek het medium om feedback van bezoekers van je site te vragen, en te verwerken!
|
Formulieren in HTML
Formulieren kun je op verschillende manieren ontwerpen. Je kunt formulieren maken waar de bezoeker gegevens kan invullen, maar ook kun je kiezen voor een formulier waarin de bezoeker alleen kan kiezen door middel van aankruisvakjes of keuzerondjes.
Een formulier in HTML komt tussen form-tags. In een formulier kun je kiezen voor tekstbalken en tekstvelden. Tekstbalken zijn eenregelige invoervelden die qua breedte instelbaar zijn. Tekstvelden zijn vlakken waar je meerdere regels gegevens in kwijt kunt.
Tekstbalken
Een tekstbalk in HTML geef je aan met een zogenaamde input-tag die je met name zelf een naam geeft.
|
Met size bepaal je de breedte van de tekstbalk. Name en size zijn kenmerken van de input-tag. Kenmerken vind je altijd in de tag-code (binnen de vishaken). De waarde van een kenmerk vind je achter het isgelijkaan-teken na het kenmerk. In onderstaand voorbeeld heeft kenmerk size de waarde 30 gekregen:
De tekst rechts van de code verschijnt naast de tekstbalk.
Tekstvelden
Om een tekstvlak te krijgen waar de bezoeker meerdere regels tekst of gegevens kan invoeren gebruik je de textarea-(container)tags. De grootte van het tekstvlak geef je aan door in de begintag met het kenmerk cols de breedte aan te geven, en met het kenmerk rows de hoogte. Als er meer tekst ingevoerd wordt dan in het tekstvlak past, verschijnt er automatisch een schuifbalk. Hiermee kun je door de ingevoerde tekst scrollen.
Op deze voorbeeldpagina pagina vind je tekstbalken en tekstvlakken in allerlei soorten en maten.
In het formulier wordt naar je voornaam, je achternaam en eventuele achtergrondinformatie gevraagd. Als je je vergist met de gegevensinvoer kun je net als met een teksverwerker de fouten herstellen door de backspace of delete-toets. Maar het kan ook sneller...
De wisknop - Je kunt in een formulier alle gegevens in één keer wissen met een wisknop! Je kunt een wisknop aanmaken door in de input-tag het kenmerk type op te nemen met de waarde reset. De tekst op de knop kun je zelf bepalen door het kenmerk value een tekstwaarde te geven: de tekst die je op de knop wilt zien.
Op deze pagina vind je een wisknop onderaan het formulier.
Keuzerondjes en aankruisvakjes
In plaats van de bezoeker zelf een tekst te laten invullen kun je ervoor kiezen een beperkt aantal keuzemogelijkheden voor te schotelen. Dit doe je met zogenaamde keuzerondjes (radiobuttons) of aankruisvakjes (boxes). Ook deze invoeropties geef je met input-tags weer:
Keuzerondjes
Op deze pagina vind je een aantal keuzerondjes. In de broncode zie je dat je met de waarde radio voor kenmerk type een keuzerondje krijgt. Met het kenmerk value geef je aan welke informatie wordt verstuurd als de bezoeker op de verzendknop van het formulier klikt. Het keuzerondje is standaard niet geselecteerd; je kunt ervoor kiezen het eerste keuzerondje standaard te selecteren door het kenmerk checked aan de code toe te voegen (zie broncode).
Aankruisvakjes
De code voor aankruisvakjes verschilt weinig van die van de keuzerondjes: in plaats van de waarde radio achter het kenmerk type komt nu de waarde checkbox na type. Op deze pagina zie je hoe aankruisvakjes gebruikt kunnen worden.
Je ziet, je kunt meerdere aankruisvakjes aanvinken, bij keuzerondjes kun je slechts één keuze maken.
Een keuzelijst
Je kunt er ook voor kiezen een keuzelijst in de webpagina op te nemen, zoals je in dit venstertje.
Het ontvangen en versturen van ingevulde gegevens
Voor het ontvangen van de ingevulde gegevens moet er op de server van de provider waar je pagina is gehost een programma draaien dat de gegevens kan verwerken en naar je door kan sturen. Het betreft zogenaamde CGI-programma's. CGI staat voor Common Gateway Interface. Dit soort programma's staan in de cgi-bin van de server.
|
Als je gegevens die de bezoeker van je site invult zelf wilt ontvangen, moeten de kenmerken action en method aan de form-tags toegevoegd worden. Voor lokale verwerking zijn deze kenmerken niet nodig.
Het kenmerk action is in dit geval het adres van het verwerkingsprogramma op de server, of het mailadres waar de gegevens naar toegestuurd moeten worden.
Voor het kenmerk method kun je kiezen uit de waarden post en get. Met get verstuur je alle gegevens als één lange string naar het adres dat door action aangegeven wordt. Met post kun je de gegevens als een e-mail versturen.
Kijk nog eens naar de code van de voorbeeldpagina's met tekstbalken, -vlakken, keuzerondjes en invulvakjes. In de broncode van de pagina zie je dat in de openingstag van de form-tags de kenmerken action en method nog niet zijn opgenomen. Dit is noodzakelijk voor het verzenden van het formulier. Als je deze kenmerken opneemt maak je het formulier verzendklaar. Hoe je dit doet behandelen we zo. Eerst leer je hoe je een verzendknop aanmaakt om de gegevens uit een formulier met een druk op de knop te kunnen verzenden.
De verzendknop
Op deze pagina vind je in de broncode hoe het formulier verzendklaar is gemaakt. En je vindt de code voor een verzendknop.
Een verzendknop maak je door in de input-tag de waarde submit aan het kenmerk type te koppelen. De tekst kun je, net als bij de wisknop, zelf kiezen door aan het kenmerk value een tekstwaarde te koppelen.
|
Maak nu een formulier aan en vul je eigen e-mailadres in. Zet dit formulier op de server en test de zendknop. Als het goed is ontvang je de ingevulde gegevens op het opgegeven e-mailadres.
Formulieren en JavaScript
Tot nu toe hebben we nog geen JavaScript gebruikt in de formulieren. Formulieren zijn niet alleen te gebruiken voor het opvragen van gegevens, je kunt met formulieren ook knoppen maken waarmee JavaScript-functies worden aangeroepen. Deze kunnen erg bruikbaar zijn op een webpagina.
JavaScript-functies
Hoe je een functie definieert heb je al geleerd in het tweede deel van de cursus. Laten we als voorbeeld een aantal formulierknoppen aanmaken waarmee we de achtergrondkleur van de webpagina kunnen veranderen. We moeten hier eerst een correcte JavaScript-functie voor definiëren. Dit gebeurt in het head-gedeelte van de code.
Vervolgens maken we in de body de formulierknoppen aan.
|
In dit geval hebben we een formulier dat alleen om lokale verwerking vraagt. Er hoeven dus geen gegevens opgestuurd te worden: het kenmerk action kan in dit geval weggelaten worden.
Behalve formulierknoppen die de achtergrondkleur van een webpagina veranderen, kun je ook andere functies onder een formulierknop hangen. Zo kun je met een druk op de (formulier)knop controleren of de door een bezoeker ingevulde gegevens wel correct zijn.
Gegevens controleren: getallen
Met JavaScript kun je de ingevulde gegevens in formulieren controleren. Dit kun je het beste doen per invoerveld direct nadat een gegeven is ingevoerd. Zo kan de bezoeker direct een 'correct' gegeven invullen.
Om dit te doen moet je net als bij de formulierknoppen eerst een functie definiëren in het header-gedeelte van de HTML-pagina. Vervolgens kun je met if-opdracht de ingevulde waarde toetsen.
Op deze pagina zie je hoe een online-schoenenhandelaar de klant informeert of hij de gewenste schoenmaat kan leveren of niet. Dit doet hij door in een formulier om de schoenmaat te vragen die hij vervolgens controleert met een hiervoor opgestelde functie.
Gegevens controleren: tekst
Tekstgegevens die een bezoeker invult, kunnen ook gecontroleerd worden. Er kan gezocht worden op een bepaald karakter, woord, of zelfs op woordlengte. Je kunt controleren of iemand het gevraagde gegeven invoert, en zelfs controleren of een bepaald karakter in de ingevoerde gegevens voorkomt. Zo kun je controleren of een gevraagd e-mailadres klopt, door te controleren op het apenstaartje dat een vast onderdeel is van elk e-mailadres. Op deze pagina zie je een voorbeeld van hoe ingevoerde tekst gecontroleerd kan worden. Je hebt tot nu toe geleerd hoe je eenvoudige scripts zoals de dialoog box, if-else statements, link events, en image swaps kunt maken. In dit cursusdeel heb je interactieve formulieren, knoppen en tekstvelden leren maken.
We sluiten de cursus af met een opdracht waarbij je de opgedane kennis uit deel 1 en deel 2 van de cursus moet gebruiken.
Opdracht: huiswerksite biologie
Stel; je bent biologieleraar en je wilt dat je leerlingen op internet informatie verzamelen over het dierenrijk. Je geeft deze pagina op als online bron voor informatie over het dierenrijk. Als huiswerk laat je de leerlingen een aantal opdrachten maken: online! Hiervoor moet je natuurlijk eerst een site maken waarop de vragen staan. De leerlingen moeten de vragen online kunnen beantwoorden en naar jou versturen.
Stel op de huiswerkpagina de volgende vragen:
1.Wat is het kenmerk van holtedieren?
Laat de leerlingen kiezen uit: een opening, tentakels, inwendig skelet en veelzijdig symmetrisch.
Ze kunnen ook kiezen uit meerdere kenmerken. Alleen het antwoord 'inwendig skelet' is niet goed.
Hint: Gebruik aankruisvakjes
2.Vissen behoren tot de hoofdafdeling...
Geleedpotige dieren; Gewervelde dieren; Weekdieren.
Slechts één antwoord is correct: Gewervelde dieren
Hint: Gebruik radiobuttons!
Voor vraag drie en vier moeten de leerlingen zelf gegevens kunnen invullen; in plaats van kiezen.
3.Welke klassen zijn er voor de weekdieren te onderscheiden?
De correcte antwoorden zijn: Tweekleppigen, inktvissen en slakken.
Hint: Gebruik nu tekstbalken waar ze de antwoorden in kunnen vullen.
4.Omschrijf in je eigen woorden de kenmerken van gewervelde dieren:
Hint: Gebruik een tekstvlak. Ten slotte maak je een verzendknop waarmee de leerling zijn huiswerk in een keer kan versturen.
Hier vind je een voorbeeld hoe de huiswerkpagina eruit zou kunnen zien. Komt het overeen met jouw eigen pagina?
Geen JavaScript toegepast?
Je hebt nu een interactief formulier gemaakt waarop leerlingen huiswerkvragen kunnen beantwoorden die ze ter controle naar jou moeten sturen. Echter..... er is totaal geen JavaScript-code aan te pas gekomen. Je kunt jezelf een hoop werk uit handen nemen door wel JavaScript in de pagina op te nemen zodat leerlingen hun antwoorden direct na het invullen van de antwoorden kunnen controleren.
Pas het formulier zo aan dat er gecontroleerd wordt of de naam van de leerling wel is ingevuld en zijn e-mailadres wel klopt. Zorg er verder voor dat de leerlingen hun antwoorden op de eerste drie vragen zelf kunnen controleren. Ze moeten alsnog hun antwoorden doorsturen met de verzendknop. De huiswerkpagina mèt JavaScript vind je hier.
Bestudeer de broncode van deze pagina. De hoofdletters voor een bepaalde regel zorgen ervoor dat juist het tegenovergestelde effect behaald wordt.
Je broncode verbergen
In het vorige deel van de cursus werd je uitgelegd hoe je JavaScripts van anderen eenvoudig in je eigen pagina kunt opnemen. Natuurlijk kan dit voor de schrijver best frustrerend zijn. Als je zelf zo goed bent in JavaScript dat je niet wilt dat zomaar iedereen je code kan kopiëren kun je ervoor kiezen je code te beschermen.
JavaScript Scrambler
JavaScript Scrambler is een programma waarmee broncode eenvoudig kan worden bewerkt zonder dat het zijn functionaliteit verliest. Maar door de bewerking wordt de code zo goed als onbruikbaar voor anderen die de code willen kopiëren.
Hoe doet JavaScript-scrambler dit?
- JavaScript Scrambler verwijdert alle harde returns uit de broncode. Hierdoor wordt de code een lange regel.
- Alle onnodige spaties en tabs worden uit de code verwijderd. Zo ook alle commentaarregels.
Tot slot
Met JavaScript kan natuurlijk veel meer dan je in deze cursus hebt geleerd. Dit is dan ook een introductiecursus om je te laten zien wat de mogelijkheden van JavaScript zijn. Als je een 'professionele' JavaScript-programmeur wilt worden is een JavaScript standaardwerk zeker aan te raden. Verder vind je online-cursussen die goed aansluiten bij deze basiscursus JavaScript:
- Een van de beste online JavaScript-cursussen is te vinden op webmonkey
- JavaScript kit: een uitgebreide site vol scriptjes en tutorials
Auteur: Daviddehaas