Frederik Vanherk

Programmeren met

Javascripts

Frederik Vanherk

1. Inleidende begrippen en de programmeeromgeving 1.1 Wat is een algoritme?

Veronderstel dat je vrienden op bezoek komen en je wilt voor hen hun lievelingsgerecht klaarmaken: spaghetti met een heerlijke saus. Wanneer je reeds verschillende malen dit verrukkelijke gerecht bereidde, dan weet je meteen wat je te doen staat en kan je beginnen koken.

Heb je echter nog nooit spaghettisaus klaargemaakt dan zit je met een probleem. Je weet wel wat je wilt doen, maar je weet niet hoe.

Nu zijn er verschillende mogelijkheden om je probleem op te lossen:

Je kijkt n van je kennissen heel lief in de ogen en vraagt smekend of zij/hij spaghettisaus voor je wil klaarmaken.

Je gaat naar een supermarkt en koopt kant-en-klare spaghettisaus. Je gooit maar wat ingredinten in een pot samen en hoopt dat het eindresultaat naar

spaghettisaus smaakt. Je opent een kookboek en zoekt het recept voor het klaarmaken van spaghettisaus op.

Hoewel elke voorgestelde oplossing zijn voor- en nadelen heeft, lijkt de laatste oplossing ons toch de aangewezen manier om je vrienden een aangename avond te bezorgen.

Een recept is in feite niets meer dan een lijst van al de handelingen die je moet uitvoeren om een welbepaald gerecht klaar te maken. Daardoor is een recept een voorbeeld van een algoritme.

Een algoritme is een voorschrift, uit n of meer stappen opgebouwd, met al de handelingen die men achtereenvolgens moet verrichten om vanuit een gegeven beginsituatie tot het gewenste eindresultaat te komen.

Wanneer we nu willen dat een computer een bepaalde opdracht vervult, dan heeft de computer daarvoor een programma nodig. Een programma bestaat uit een rij instructies die de computer moet uitvoeren om een bepaalde opdracht te kunnen vervullen. Een computerprogramma is dus een voorbeeld van een algoritme.

Vooraleer we computerprogramma's kunnen maken, zullen we dus eerst algoritmen moeten leren opstellen. Met behulp van een programmeertaal kunnen we dan ons algoritme omzetten in een programma.

Frederik Vanherk

1.2 Enkele begrippen

Iets of iemand moet de handelingen, beschreven in een algoritme, uitvoeren. Bijvoorbeeld, als we voor het klaarmaken van onze spaghettisaus beroep doen op een recept uit een kookboek, dan zijn wij de uitvoerder van het recept. Een uitvoerder van een algoritme noemen wij een processor. In ons voorbeeld is de kok de uitvoerder (de processor) van het recept.

Ons recept zal waarschijnlijk ingedeeld zijn in verschillende stappen. Iedere afzonderlijke stap binnen een algoritme noemen we een deelalgoritme.

Bepaalde stappen binnen in een algoritme lijken ons vanzelfsprekend, vb. roer in de saus. Dat deelalgoritme kunnen wij zonder verdere uitleg uitvoeren. In zo'n geval spreken we van een concreet algoritme.

Andere deelalgoritmen kan de processor niet direct uitvoeren. Er zijn bijkomende instructies nodig vooraleer de processor de handeling kan volbrengen. Dat zijn abstracte algoritmen. Ik kan me inbeelden dat velen met de handen in het haar zullen zitten als ze lezen dat ze eerst de tomaten moeten ontvellen en ontpitten alvorens ze in partjes te snijden en in de saus te mengen.

1.3 De verschillende fasen bij het oplossen van een probleem Voor ieder probleem dat je wil oplossen, stel je best een algoritme op. Het is wenselijk dat je daarbij overzichtelijk te werk gaat. Zeker als je ook je algoritme wil omzetten in een computerprogramma doorloop je best de volgende fasen.

Fase 1: De probleemdefinitie. In deze eerste fase ga je duidelijk het op te lossen probleem definiren: je omschrijft dus nauwkeurig en ondubbelzinnig het gestelde probleem en verwoordt de essentie van de opdracht. Je besteedt hierbij vooral aandacht aan de beschikbare gegevens en de wijze waarop die gegevens ingevoerd kunnen worden. Ook de gewenste resultaten en de vorm waarin men die resultaten wil bekomen, worden hier bepaald.

Fase 2: De probleemanalyse. In deze fase wordt het algemene probleem geanalyseerd, uiteengerafeld. Er wordt een strategie ontwikkeld om tot een juiste oplossing te komen. Het globale probleem deel je op in een aantal deelproblemen die verder verfijnd kunnen worden. Om de uiteenrafeling van het probleem in verschillende stappen beter te kunnen begrijpen, maak je een schematische voorstelling van de voorgestelde oplossingsmethode. Verschillende technieken (boomstructuur, stroomschema's, Nassi-Schneidermanndiagrammen, pseudo-code,...) kunnen hiervoor aangewend worden.

Fase 3: Het programmeren Nadat fase 2, misschien wel de moeilijkste fase, doorlopen is, kan je het voorgestelde algoritme met behulp van een programmeertaal omzetten in een programma.

Fase 4: Testen Nu ga je het programma uit fase 3 uitproberen. Je laat het programma uitvoeren

Frederik Vanherk

door de processor (in ons geval, een computer) en je controleert of je programma werkt. Eventuele fouten verbeter je. Het is belangrijk tijdens het testen rekening te houden met alle mogelijke omstandigheden die in fase 1 beschreven werden.

Fase 5: Documentatie Tenslotte ga je het opgemaakte programma documenteren. Dit is bijzonder belangrijk als je, of iemand anders, later wijzigingen of uitbreidingen aan je programma wil aanbrengen.

1.4 De stapsgewijze verfijning

1.4.1 Top-down ontwerpmethode Zoals hierboven blijkt, is de moeilijkste fase bij het oplossen van een probleem fase 2, de analyse van het probleem. Probleemanalyse wordt een stuk makkelijker als je als volgt te werk te gaat.

Deel eerst je probleem op in een aantal grote stappen, een aantal deelproblemen. Dit heet de grofstructuur of het hoofdalgoritme.

Elk deelprobleem in de grofstructuur dat abstract is voor de processor, heeft verdere instructies nodig. Je zult dit deelprobleem op zijn beurt moeten opsplitsen in kleinere deelproblemen en desnoods nog verder opsplitsen tot ieder deelprobleem concreet genoeg is voor de processor om het uit te voeren. Het opsplitsen van een probleem in deelproblemen die zich op een lager niveau bevinden, noemt men de stapsgewijze verfijning. Hoe meer er gedetailleerd, verfijnd wordt, hoe beter de processor het algoritme begrijpt, m.a.w. hoe concreter het algoritme voor hem wordt.

De hierboven beschreven methode om een proces te analyseren, noemt men de top-down ontwerpmethode. Die komt grafisch perfect tot uiting in een boomstructuur.

1.4.2 Voorbeeld

Wij weten hoe we een goede spaghetti moeten maken. Een vriend belt ons op en vraagt of we voor hem even willen opschrijven hoe hij dat moet doen. We bepalen eerst de grote lijnen van ons algoritme. Dit noemen we de grofstructuur of het hoofdalgoritme die we schematisch als volgt voorstellen:

- Spaghetti Maken - Zet de ingredinten klaar

Bereid de saus

Laat de spaghetti 6 minuten koken

Dien de spaghetti op, met de warme saus en de geraspte kaas

Frederik Vanherk

Een opdracht in de grofstructuur is doorgaans abstract voor de processor en behoeft verdere verfijning. In ons voorbeeld lijkt me bereid de saus niet direct begrijpbaar voor onze vriend, vandaar dat we die opdracht verder gaan verfijnen.

1.4.3 Voordelen van de stapsgewijze verfijning Deze manier van werken heeft onmiskenbaar een aantal voordelen.

Geleidelijk aan zie je zelf beter in hoe je een probleem kunt oplossen. Je oplossing is betrouwbaarder, ze is namelijk systematisch bedacht. Je oplossing is overzichtelijker en voor iedereen begrijpbaar. Je zult makkelijker fouten kunnen opsporen en verbeteren. Deeloplossingen kunnen bruikbaar zijn voor het oplossen van andere problemen (zie

hieronder).

1.4.4 De bottom-up methode, tegenhanger van top-down

Bepaalde algoritmen komen veelvuldig terug en kun je hergebruiken als bouwstenen bij het opmaken van een nieuw algoritme. Ideaal ware de situatie waarin we ieder probleem konden terugbrengen tot een algoritme waarvoor al een oplossing bestaat. Jammer genoeg zijn niet alle problemen op te splitsen in deelproblemen die allemaal al opgelost zijn.

Het ontwikkelen van een algoritme door vroeger opgestelde (deel)algoritmen te gebruiken, noemt men de bottom-upmethode. Bottom-up is een welgekomen aanvulling op de top-down techniek. Je begint met stapsgewijs te verfijnen. Komt de oplossing van een deelprobleem overeen met een bestaand algoritme, dan gebruik je dit als deeloplossing.

Frederik Vanherk

1.5 Basisstructuren

Het formuleren van een algoritme in gewone spreektaal is omslachtig en vaak voor interpretatie vatbaar. Daarom maken we een aantal afspraken waaraan de formulering en de voorstelling van een algoritme moeten voldoen.

Elk algoritme structureren wij aan de hand van drie basis- of controlestructuren. Elke controlestructuur heeft een bepaalde programmeercode.

We geven hieronder al een korte opsomming van de drie basisstructuren en hun grafische voorstelling. Hierop wordt later uitgebreid teruggekomen.

1.5.1 De sequentie of opeenvolging

Een sequentie is een controlestructuur opgebouwd uit n of meer opdrachten die elkaar opvolgen. Deze controlestructuur legt vast in welke volgorde de deelalgoritmen zullen uitgevoerd worden.

- Spaghetti Maken -

Zet de ingredinten klaar

Bereid de saus Laat de spaghetti 6 minuten koken

Dien de spaghetti op, met de warme saus en de geraspte kaas

1.5.2 De selectie of keuze

Een selectie is een basisstructuur die een keuze aangeeft tussen twee mogelijke sequenties, gekoppeld aan een voorwaarde.

Voorbeeld: In een winkel wordt 20% korting gegeven als het aankoopbedrag groter is dan 10 EUR, 10% korting in alle andere gevallen.

1.5.3 De iteratie of de herhaling

Een iteratie is een controlestructuur die een bepaalde opdracht een aantal keer herhaalt. Voorbeeld: Voor een groot familiefeest moet je 100 identieke taarten bakken.

Frederik Vanherk

1.6 Wat zijn Javascripts?

Om onze algoritmen om te zetten in een programma, zodat we het door de computer op zijn juistheid en bruikbaarheid kunnen laten uittesten, gebruiken we een programmeertaal. Wij opteren voor een eenvoudige programmeertaal, namelijk Javascripts.

Om een Javascript uit te voeren heb je een webbrowser nodig (bv. Microsoft Explorer of Google Chrome). Een webbrowser wordt in eerste instantie gebruikt om pagina's van het Internet te plukken en in een toonbare vorm aan de gebruiker te presenteren, om te surfen dus. Internetpagina's worden in een speciale taal geschreven, namelijk HTML. Onze Javascripts zullen wij dus altijd in een HTML-document moeten plaatsen.

HTML is de afkorting van Hyper Text Markup Language. Het is de taal waarin alle paginas op het World Wide Web zijn geschreven. In simpele bewoordingen uitgedrukt, HTML vertelt aan de Internetbrowser hoe de tekst moet getoond worden, of er afbeeldingen in de pagina staan, enz.

Het formaat en de opmaak van de tekst en de afbeeldingen worden aangeduid door TAGS, een soort van code. Voor elk formaat bestaat er een aparte tag, bv. om een stukje tekst vet voor te stellen, gebruikt HTML de volgende code : deze tekst is vet.

Hieronder zie je een eenvoudig voorbeeld van een eenvoudige webpagina met de bijhorende HTML-code.

test

Dit is een test

HTML kun je op twee manieren gebruiken:

Je ontwerpt je pagina met een eenvoudige teksteditor (bv. Windows Kladblok) en je plaatst de codes zelf. Dit betekent natuurlijk dat je alle HTML-tags kent en kunt gebruiken.

Frederik Vanherk

Je gebruikt een speciale HTML-editor. Je typt nog steeds zelf je tekst in, maar nu plaats je de HTML-codes via een simpele klik op de muis, net zoals je een tekstverwerkingsprogramma zou gebruiken.

Net zoals HTML moet je Javascripts aanmaken met een simpele teksteditor, bijvoorbeeld Kladblok. Om duidelijk te maken waar je Javascript begint, moet het script tussen een en tag in een HTML-document geplaatst worden.

Net zoals elke programmeertaal moet je bijzonder oppassen voor syntaxfouten. Een haakje, komma, ... op een verkeerde plaats kan ervoor zorgen dat je programma niet werkt.

Let op: de Javascripttaal maakt een onderscheid tussen hoofd- en kleine letters.

Wil je commentaar aan je programma toevoegen dan laat je die lijn voorafgaan door //. Het volgende voorbeeld toont de algemene vorm van een Javascript binnen een HTML-document. Open kladblok, typ de onderstaande codes precies over en bewaar je bestand als basis.htm.

BELANGRIJK: Dit bestand doet dienst als basis voor elk programma dat je zal maken in Javascript. Je kan het dus voor elke nieuwe oefening kopiren en bewerken. Door het Kladblok bestand op te slaan met de extensie .htm zal dit bij het openen als een webpagina worden weergegeven. Wil je in het bestand achteraf iets veranderen, dan klik je erop met je rechtermuisknop en kiest voor Openen met Kladblok.

//hier komt de code

In de hiernavolgende hoofdstukken kom je alles te weten over het opmaken van programma's met de Javascripttaal. Stap voor stap zal je heel wat commando's aanleren. Ook het omzetten van de drie basisstructuren wordt aangeleerd. Veel succes!!

Frederik Vanherk

2. Variabelen 2.1 Definitie en omschrijving

Definitie: Een variabele is een naam waarin een waarde wordt opgeslagen m.a.w. aan een naam wordt een waarde toegewezen.

In Javascript kan je zelf een naam kiezen voor je variabelen. Best zorg je er wel voor dat dit een goede omschrijving is voor de waarden die de variabele kan aannemen. Een variabele met als naam studievakken kan bijvoorbeeld de waarden Frans, Economie, Chemie, aannemen. Een variabele leeftijd zal waarden als 5, 82, aannemen.

Voorbeeld in een html-document: In onderstaand programma worden 3 variabelen (getal, pi, zin) aangemaakt. Deze krijgen ook meteen een specifieke waarde toegewezen door het =-teken

var getal=5

var pi=3.14

var zin="dit is een javascript"

Frederik Vanherk

2.2 Variabelen van verschillende gegevenstypes

De waarden van variabelen kunnen gedurende het verloop van een javascriptprogramma gewijzigd worden. In voorbeeld 1 kregen 3 variabelen een waarde.

Een variabele kan een waarde van verschillende gegevenstypen bevatten.

a) Getallen Gehele getallen(integers) vb. 2 of 25 of 54 of -15 of -56 enz. Het is dus een getal waarin geen decimalen voorkomen (positief of negatief). Floating-point getallen vb. 3.14 Een kommagetal waarbij we het kommateken schrijven als een punt.

b) Booleans of logische getallen Deze hebben de waarde true(waar of 1) of false(onwaar of 0)

c) Strings of tekenreeksen Bijvoorbeeld "dit is een string" Een string bestaat dus uit n of meer tekens en wordt tussen dubbele aanhalingstekens geplaatst.

d) De waarde null Het is de waarde van een ongedefinieerde variabele.

2.3 Extra informatie over variabelen

Het belang van variabelen is vooral groot wanneer je programma bepaalde gegevens veelvuldig gebruikt. Neem bijvoorbeeld de variabele adres. Door je adres als variabele te definiren bij het begin kan je er doorheen het programma naar verwijzen door simpelweg adres te typen. Moest het adres in de toekomst veranderen dan zal je dit slechts 1 maal moeten aanpassen, bovenaan waar je de variabele gedefinieerd hebt. (Vergelijk dit met het gebruik van formules in Excel waarbij je naar de cel-namen verwijst zodat het resultaat automatisch wordt aangepast, bv. E4 = C2 + D3)

Je mag elke variabele laten voorafgaan door het woord 'var' zoals in voorbeeld 1, maar je mag dit woord ook laten vallen.

Maak bij het intikken van variabelen een onderscheid tussen kleine letters en hoofdletters, m.a.w. Java-script is case sensitive.

Frederik Vanherk

2.4 Oefeningen

Opdracht 1:

Bekijk onderstaande programmacode.

In het eerste deel van het Javascript worden 4 variabelen gekozen en een waarde toegewezen. Herken je de verschillende gegevenstypes van variabelen (integer, string, boolean en floating-point nummer?)

Er verschijnt na deze stap echter nog niets op je webpagina. Hiervoor hebben we een schrijfopdracht nodig, in Javascripts is dit het document.write-commando. De tekst wordt dan als het ware naar het scherm geschreven. Tussen de haakjes die volgen op dit commando kan je een tekst schrijven (tussen dubbele aanhalingstekens!) of je kan verwijzen naar een variabele die je erboven hebt gecreerd.

Een voorbeeld waarbij het verschil duidelijk wordt:

document.write(Rihanna) zal ervoor zorgen dat het woord Rihanna op je webpagina verschijnt.

document.write(idool) zal hetzelfde resultaat hebben als je bovenaan een variabele idool hebt gecreerd, die je de waarde Rihanna hebt gegeven (var idool = Rihanna)

Je kan ook beide opties combineren, altijd gescheiden door een komma:

document.write(Ik ben een fan van ,idool)

Moest je muzikale smaak veranderen en je gebruikt de naam van je idool op verschillende plaatsen in je programma, dan kan je dit via de variabele idool zeer snel aanpassen.

Je ziet in het voorbeeld het gebruik van de symbolen // en de tag . // betekent dat hetgene dat volgt achter deze symbolen bedoeld is als commentaar. Je kan de tekst "Indien we ook iets willen zien op het scherm" dus niet zien op een html-pagina , enkel in de broncode. De tag betekent dat er na dit symbool telkens een nieuwe lijn moet komen, het is een line break. Indien je deze tag niet plaatst zal het volgende stuk tekst gewoon tegen de vorige aangeplakt worden.

We testen het onderstaand script uit. Kopieer onderstaande code naar een Kladblok bestand. Bewaar het als 2_1_test.htm Open vervolgens dit bestand en controleer of je een webpagina te zien krijgt met een aantal tekstregels. Kan je deze tekstregels linken met de Javascript-code? We hebben in de programmacode de naam variabelen als titel toegevoegd. Waar zie je deze uiteindelijk verschijnen?

Frederik Vanherk

variabelen

getal=5

waarde=3.5

zin="dit is een javascript"

keuze=true

//We voegen een schrijfopdracht toe, anders blijft het scherm leeg

document.write(getal,"")

document.write(waarde,"")

document.write(zin,"")

document.write(keuze,"")

Frederik Vanherk

Opdracht 2 :

Maak een programma in Javascript waarbij onderstaande (gepersonaliseerde!) tekst zichtbaar wordt op het scherm.

Let op: Gebruik hierbij 3 variabelen naam, adres en gemeente. Deze gegevens heb je in een uitgebreider programma vaak nodig en het adres kan eventueel in de toekomst veranderen. De overige stukjes tekst mag je letterlijk overnemen. Sla de oefening op als 2_2_adres.htm

Mijn naam is Frederik Vanherk Ik woon in de Nellepetinstraat Te Hasselt

Frederik Vanherk

3. Expressies en functies 3.1 Expressies Variabelen kunnen ook combinaties zijn van andere reeds bestaande variabelen. Hiervoor werken we met expressies en operatoren. Bijvoorbeeld:

totaal = getal1 + getal2

De variabelen getal1 en getal2 zijn bestaande variabelen die gecombineerd worden tot een nieuwe variabele totaal. De tekens = en + noemt men operatoren. Het programma weet dat het een bewerking moet uitvoeren en het resultaat hiervan moet toewijzen aan de nieuwe variabele.

We bespreken 3 types van operatoren die gecombineerd kunnen worden tot expressies:

3.1.1 Toewijzingsoperatoren De eenvoudigste toewijzingsoperator is het =-teken. Deze wijst de waarde rechts van de operator toe aan de variabele links ervan. Enkele voorbeelden:

a = 1 wijst de waarde 1 toe aan de variabele a b = a + 1 telt 1 op bij de variabele a en wijst die nieuwe waarde toe aan variabele b

3.1.2 Wiskundige operatoren Zoals de naam al doet vermoeden, voeren de wiskundige operatoren wiskundige bewerkingen uit op variabelen en constanten. Je kent zeker de computernotatie voor optellen(+), aftrekken (), delen (/) en vermenigvuldigen (*). Al deze operatoren zijn onderdeel van de grote groep wiskundige operatoren en werken op de bekende wijze.

var lengte = 12 var breedte = 7 var oppervlakte = lengte * breedte

JavaScript kent nog een tweetal andere wiskundige operatoren, die wellicht wat meer toelichting vereisen: de modulo-operator en de negatie-operator:

Frederik Vanherk

3.1.2.1 De modulo-operator (%=) Deze operator kent de rest van een deling toe aan een variabele. Stel dat een variabele a gelijk is aan 100. Na de expressie var b = a % 3; is de variabele b gelijk aan 1 want 100 gedeeld door 3 heeft als quotint 33 en de rest is 1.

Je kunt met deze operator bijvoorbeeld heel snel bepalen of een bepaald getal even of oneven is. (zie oefening later) 3.3.2 De negatie-operator () Deze operator verandert een variabele van het type getal in zijn tegengestelde. De negatie-operator bestaat uit een minteken dat voor de variabele of constante wordt geplaatst. We noemen het daarom een prefix-operator.

3.1.3 Operatoren voor tekst (Stringoperatoren) JavaScript kent slechts n operator die speciaal voor tekst is bedoeld: de concatenatie-operator (+). Deze voegt twee stukken tekst samen tot n stuk tekst. De tekst rechts van de + wordt aan het einde van de tekst links van de operator geplakt.

Een voorbeeld:

var aanspreking = "Goede morgen, "; var klas = "4ECO2"; var zin = aanspreking + naam

in de variabele zin zit nu "Goede morgen, 4ECO2"

Opgelet: Omdat optellen en concatenatie dezelfde operator gebruiken (het plusteken), moet je goed opletten dat je het juiste gegevenstype gebruikt. Als je bijvoorbeeld de tekst 50 bij de tekst 5 optelt, krijg je de tekst 505 (zonder dat je het weet heb je hier concatenatie uitgevoerd) in plaats van 55 wat je wellicht bedoelde. Om er zeker van te zijn dat u getallen bij elkaar optelt, kan je altijd gebruik maken van de JavaScript-functies parseInt() of parseFloat().

Stel dat var a = 20 en var b = 30

Probeer zelf eens het verschil uit tussen onderstaande expressies (zorg dat de waarde van var c en d op het scherm verschijnt):

var c = var a + var b var d = var a + parseInt(b)

Frederik Vanherk

Noem dit bestand 3_0_concatenatie.htm

3.1.4 Oefeningen

1) In een databestand staan een reeks namen en voornamen onder elkaar. Wij willen dat die twee variabelen samengevoegd worden tot n nieuwe variabele klant. Werk deze oefening uit voor 1 klant zodat eerst op het scherm verschijnt welke waarde in de variabele naam staat en welke in de variabele voornaam. Daaronder moet dan de regel verschijnen: De naam van onze beste klant is: gevolgd door die naam en voornaam. Noem dit bestand 3_1_klant.htm

2) Je kiest twee getallen (getal1 & getal2) waarmee je de eenvoudige bewerkingen optelling, aftrekking, vermenigvuldiging en deling moet uitvoeren. Zorg ervoor dat je eerst op het scherm te zien krijgt welke getallen er in de variabelen getal1 en getal2 zitten en vervolgens wat het resultaat is van de bewerkingen. Zorg ervoor dat de antwoorden in een zin staan (de som is ) Noem dit bestand 3_2_bewerkingen.htm

3) Een bank kan heel snel de juistheid van een rekeningnummer controleren. Men deelt de eerste 10 cijfers van een rekeningnummer door het priemgetal 97. De rest van deze deling moet overeenkomen met de laatste 2 cijfers van het rekeningnummer. Probeer eens volgend rekeningnummer aan te vullen (tot 12 cijfers): 2350089999 Noem dit bestand 3_3_rekeningnummer

Frederik Vanherk

3.2 Functies Functies maken het leven van de programmeur aangenamer. Stel dat een reeks bewerkingen regelmatig terugkeert in je programma, dan kan je deze 1 maal opstellen als een functie en er nadien simpelweg naar verwijzen.

Eigenlijk vormen functies dus een soort mini-programma binnen het grote geheel. Ze groeperen bij elkaar horende codes en voeren zo een bepaalde taak uit. Dit kan een reeks wiskundige bewerkingen zijn, tekst naar het scherm schrijven, vergelijkingen uitvoeren,

3.2.1 Functies definiren en gebruiken Een functie start steeds met het woord function gevolgd door een spatie en de naam. Deze naam is vrij te kiezen maar mag zelf geen spaties bevatten. Vervolgens noteer je tussen 2 ronde haakjes welke gegevens de functie als input nodig heeft. Deze gegevens worden de parameters van de functie genoemd. Bijvoorbeeld:

function Optellen (getal1,getal2)

De eigenlijke bewerkingen volgen tussen accolades, ook wel body van de functie genoemd. Elke regel met bewerkingen wordt gevolgd door een puntkomma. Het resultaat van de bewerkingen moet teruggestuurd (return) worden naar het programma. Dit kan op 2 manieren:

Via een variabele deze kan je dan verderop in het programma hergebruiken Zonder variabele deze waarde gaat na de berekening verloren

Bijvoorbeeld:

Met variabele function Optellen(getal1,getal2) {som=getal1+getal2; return som;}

Zonder variabele function Optellen(getal1,getal2) {return getal1+getal2;}

JavaScript voert de opdrachten binnen een functie nooit automatisch uit. De functies worden pas uitgevoerd, op het moment dat de functie wordt aangeroepen. Functies vind je daarom meestal bovenaan in de programmacode (header). Zo worden ze als eerste ingelezen bij het laden van een webpagina en kunnen ze opgeroepen worden verderop in het programma. Een functie kan ook in het middenstuk voorkomen (body), zolang hij maar vr de oproep

Frederik Vanherk

komt. Als je dus in de eerste regels van een script een functie gebruikt die pas onderaan de pagina gedefinieerd wordt, krijg je een foutmelding.

Je roept een functie op door simpelweg de naam en de parameters te vermelden. De parameters komen ofwel van variabelen die je in het begin gedefinieerd hebt, ofwel geef je zelf waarden in. Als je bijvoorbeeld het resultaat van de optel-functie op het scherm wilt krijgen:

document.write(Optellen(getal1,getal2)) getal1 en getal2 zijn variabelen document.write(Optellen(2,8)) je geeft zelf de parameters in

Als we al het voorgaande nu samenbrengen krijgen we volgend eenvoudig script dat een optel-functie bevat en het resultaat hiervan op het scherm projecteert. In dit voorbeeld werken met variabelen als input van de functie en hanteren we de korte return optie, dus zonder het resultaat in een nieuwe variabele te gieten.

Functie Optellen

getal1=4

getal2=8

function Optellen(getal1,getal2)

{return getal1+getal2;}

document.write(De som van ,getal1, en ,getal2, is,)

document.write(Optellen(getal1,getal2))

Frederik Vanherk

3.2.2 Oefeningen

1) Maak een functie die 3 getallen optelt. Op het scherm verschijnen 2 (zelfgekozen) reeksen van 3 getallen en de berekende resultaten. Noem dit bestand 3_4_triplesum.htm

2) Maak een functie die op basis van het aantal gereden kilometers en de getankte hoeveelheid, het gemiddelde benzineverbruik van je wagen berekent per 100km. Op het scherm verschijnen je invoergegevens en het berekende resultaat. Noem dit bestand 3_5_benzine.htm

3) Maak een functie die je BMI berekent. Indien nodig zoek je op het internet de juiste formule op. Op het scherm verschijnen de invoergegevens en het berekende resultaat. Noem dit bestand 3_6_bmi.htm

4) Maak een functie die de inhoud van een balk berekent. Op het scherm verschijnen de invoergegevens en het berekende resultaat. Noem dit bestand 3_7_balk.htm

Frederik Vanherk

4. Invoer 4.1 Dynamische invoer

Een website is een interactief gegeven en vaak een middel voor een bedrijf om gegevens van klanten te verzamelen.

Met de eenvoudige actie prompt(), kan je een dynamisch invulvakje op je scherm toveren. Tussen de haakjes typ je de vraag die je aan de bezoeker van de website wil stellen.

prompt("Hoe oud bent u?")

Je kan het antwoord van de bezoeker ook gaan gebruiken om expressies of functies op uit te voeren. Daarvoor dien je het antwoord als een variabele op te slaan.

a = prompt("Hoe oud bent u?") b = 2014 - a document.write(Dan bent u geboren in het jaar ,b, of ,b-1)

4.2 Tekstvakken

Je kan ook een statisch formulier met verschillende invoervakken creren.

Deze componenten bevinden zich in het html-document altijd tussen de tags en .

De invoervelden zelf beginnen allemaal met de tag .

Frederik Vanherk

Vervolgens wordt het type van invoer aangegeven, in dit geval zal het invoerveld van het type text zijn.

Tenslotte moet het invoerveld een naam krijgen met het attribuut name="veldnaam". Je kan eventueel het tekstvak laten vooraf gaan door een boodschap waaruit blijkt wat er van de gebruiker verwacht wordt Bijvoorbeeld: Voeg hier uw voornaam in:

Om de lengte van het invoervak te beperken, kan je het attribuut size gebruiken. Mag de gebruiker ook slechts een beperkt aantal tekens invoeren (bijv een postcode in Belgi bestaat uit 4 cijfers) dan gebruik je het attribuut maxlength.

Reset-knop

Met deze knop in je formulier kan je de inhoud van alle invoervelden in n keer wissen. Het type is dan niet meer text zoals bij een tekstvak, maar reset. Per formulier kan je slechts n knop van dit type gebruiken. Met het attribuut value kan je een tekst op de knop doen verschijnen.

4.3 Oefeningen

1) Maak een eerder gemaakte oefening dynamischer door te werken met invoervakjes. Noem dit bestand 4_1_dynamiek.htm

2) Je maakt een klachtenrubriek voor een website. Zorg ervoor dat de gebruiker een aantal persoonsgegevens moet achterlaten en tevens zijn hart kan luchten. Voorzie ook een knop waarmee eventuele foutieve informatie in n keer kan gewist worden. Noem dit bestand 4_2_klachtenformulier.htm

Frederik Vanherk

5. Selectie (if-instructie) Soms kan het verloop van het programma afhankelijk zijn van de invoergegevens van de bezoeker van de website. Stel bijvoorbeeld dat je minimum 18 jaar moet zijn om een website te mogen bezoeken. Het antwoord op de vraag: Hoe oud bent u? zal dan bepalen of je al dan niet verder mag gaan of niet.

Hiervoor gebruiken we de if-instructie. In onderstaand voorbeeld zie je dat deze instructie gevolgd wordt door accolades. De window.alert instructie doet een opvallend tekstbericht verschijnen op de website.

a = prompt(Hoe oud bent u?) if(a

Frederik Vanherk

Oefeningen

1) Vraag via dynamische invoervakjes aan de bezoeker wat zijn/haar punten waren op de laatste 4 testen (op 10). Zorg ervoor dat er een boodschap verschijnt die de gebruiker meldt of hij/zij geslaagd is voor het volgend rapport. Noem dit bestand 5_1_rapport

2) Voeg aan de oefening van het BMI dynamische invoervakjes toe en geef aan de bezoeker meteen goede raad mee:

< 20 Je mag best wat gulziger zijn! 20 < X < 25 Houden zo! > 25 Opletten!

Noem dit bestand 5_2_gezondheid