1 Inhoud 1 Algoritmen en programmeren Voorbeeld Variabelen Operatoren Wiskundige berekeningen Objectentabel De keuze De meervoudige keuze De begrensde...
De bronbestanden voor de opdrachten en oefeningen kan je downloaden op www.peterpoelman.be
EDUGO campus Glorieux - Oostakker
1
Algoritmen en programmeren
Een algoritme is een stap-voor-stap-oplossing van een probleem. Dit algoritme wordt door middel van een programmeertaal gecodeerd in een programma. Als programmeertalen kunnen bijvoorbeeld C++, Delphi, Visual Basic.NET, Java, ... gebruikt worden. Om de basisprincipes van programmeren aan te leren kiezen we een eenvoudige taal: JavaScript . JavaScript is een zogenaamde scripttaal. Een programma in JavaScript moet ingebouwd worden in een webpagina om te kunnen werken. Wat heb je nodig? een editor
om de code van het programma te typen (bijvoorbeeld: Kladblok, Crimson Editor)
een browser
om het programma uit te voeren (bijvoorbeeld: Internet Explorer)
Hoe ga je te werk? 1. Onderzoek grondig het gestelde probleem en bepaal de invoer de uitvoer
welke gegevens zal het programma aan de gebruiker vragen? welke resultaten moeten op het scherm verschijnen?
2. Stel een algoritme op en noteer dit schematisch in een Nassi-Shneiderman-diagram. 3. Codeer je algoritme in een programmeertaal. 4. Test je programma verschillende malen uit. Neem telkens verschillende waarden voor de invoer: grote getallen, kleine getallen, speciale waarden, de waarde nul, … . Kortom zorg ervoor dat elke uitzondering getest wordt.
2
Voorbeeld
Onweer is zeer gevaarlijk als het minder dan 3 km van jou is verwijderd. Door het aantal seconden tussen bliksem en donder te tellen kan je de afstand van een onweer berekenen. Het geluid verplaatst zich met een snelheid van ongeveer 300 meter per seconde. 1. Invoer en uitvoer invoer:
de tijd tussen bliksem en donder in seconden
uitvoer:
de afstand tot het onweer in meter
2
07-08
Programmeren met JavaScript
Industriële wetenschappen
Hierna kan je de interface (hoe je het programma aan de gebruiker zal presenteren) al ontwerpen.
Dit kan je realiseren door een webpagina te schrijven. Een webpagina wordt geschreven in html (Hyper Text Markup Language) en bestaat uit commando’s, tags genoemd, die gebruikt worden om de webpagina vorm te geven. voorbeeld.html
ONWEER
P. Poelman
07-08
3
EDUGO campus Glorieux - Oostakker
De dialoog met de gebruiker kan gerealiseerd worden met een formulier . Een formulier bestaat uit tekstvakken (om gegevens in te voeren of resultaten te tonen) en knoppen (om berekeningen te starten). Een formulier definieer je tussen de tags
In het formulier definieer je een tekstvak met
en een opdrachtknop met
Opdracht 1 De code werd in een editor getypt en als voorbeeld.html opgeslagen in je werkmap. De extensie .html zorgt ervoor dat de code door een browser uitgevoerd kan worden. Dubbelklik voorbeeld.html om het resultaat in de browser te bekijken. Je kan het tekstvak wel al invullen, maar het aanklikken van de knop heeft uiteraard nog geen effect.
2. Algoritme
- voorbeeld snelheid ← 300 LEES tijd afstand ← snelheid * tijd SCHRIJF afstand
3. Codering De ruimte tussen de tags en gaan we nu gebruiken om het programma te schrijven.
4
07-08
Programmeren met JavaScript
Industriële wetenschappen
voorbeeld.html
Typ hier uw naam <script language="JavaScript"> function bereken() { var snelheid=300 var tijd=f.tv1.value var afstand=snelheid*tijd f.tv2.value=afstand+" meter" }
ONWEER
De JavaScript-code uit het head-gedeelte moet uitgevoerd worden van zodra op de knop “Klik hier” geklikt wordt. We koppelen de code aan de knop via het attribuut onClick . Om verschillende opdrachten in een programma te bundelen gebruiken we een functie (function). Bij een onClick-attribuut kan je dan via de naam van de functie naar al deze opdrachten verwijzen. De waarde (value) die door de gebruiker in het eerste tekstvak werd ingevoerd bereik je met f.tv1.value . Dit is gemakkelijk te begrijpen als je weet dat het tekstvak met naam "tv1" een onderdeel is van het formulier met naam "f". Als scheidingsteken wordt een punt gebruikt.
Om ingevoerde waarden en (tussen)resultaten te bewaren gebruiken we variabelen. De eerste maal dat je de variabele gebruikt, laat je deze voorafgaan door het woordje var (zie verder). Het resultaat in het tweede teksvak plaatsen gebeurt met f.tv2.value= . Let op het gebruik van de aanhalingstekens om tekst af te bakenen. Met het plus-teken voeg je tekstdelen en variabelen samen.
Opdracht 1
(vervolg)
Vervolledig voorbeeld.html en bekijk het effect in de browser.
P. Poelman
07-08
5
EDUGO campus Glorieux - Oostakker
3
Variabelen
Een variabele is een plaats in het geheugen van de computer, die je reserveert om een waarde te bewaren. Deze waarde kan in de loop van het programma wijzigen. Om naar die plaats in het geheugen te verwijzen geef je de variabele een betekenisvolle naam. Een variabele declareren (geheugenruimte reserveren) doe je in JavaScript als volgt: var bedragInEuro
geheugen (RAM)
bedragInEuro
Van zodra een variabele gedeclareerd werd kan je er een waarde aan toekennen (in opslaan): bedragInEuro=25.36
geheugen (RAM)
bedragInEuro
25.36
In JavaScript kan je een variabele declareren en terzelfdertijd initialiseren (een beginwaarde toekennen): var bedragInEuro=25.36
6
07-08
Programmeren met JavaScript
Industriële wetenschappen
De waarde van een variabele kan in de loop van het programma gewijzigd worden: bedragInEuro=50
geheugen (RAM)
bedragInEuro
25.36 50
In het bovenstaande hebben we variabelen gebruikt om getallen op te slaan. Je kan in een variabele ook woorden of stukjes tekst opslaan. Een tekenreeks wordt in een programmeertaal een string genoemd. Bij tekens moet je dan niet alleen denken aan het alfabet, maar bijvoorbeeld spaties, leestekens en cijfers horen daar ook bij. Bij het toekennen van een string aan een variabele moet je " en " gebruiken om de string af te bakenen. var s="een bedrag van 25.36 EUR"
Als je in de string zelf aanhalingstekens wilt gebruiken, dan moet je er een \ voor zetten, anders worden ze gebruikt om de string af te sluiten. var hoek="50°17’30\""
Naamkeuze voor een variabele De naam van een variabele moet beginnen met een letter en mag verder geen spaties of leestekens bevatten (een underscore _ en cijfers zijn wel toegelaten). Om de leesbaarheid te verhogen is het gebruikelijk om voor namen van variabelen kleine letters te gebruiken en de eerste letter van elk woord (vanaf het tweede woord) te laten beginnen met een hoofdletter. Je maakt ook best gebruik van betekenisvolle namen die verband houden met het gebruik van de variabele. Bijvoorbeeld: var aantalPersonen, bedragInEuro
Let er op dat JavaScript onderscheid maakt tussen hoofdletters en kleine letters. Dit betekent bijvoorbeeld dat bedragineuro en bedragInEuro verschillende variabelen zijn.
P. Poelman
07-08
7
EDUGO campus Glorieux - Oostakker
Voorbeeld variabelen.html
<script language="JavaScript"> function demoVariabelen() { var voornaam=prompt("Geef uw voornaam:") alert("Wat is "+voornaam+" een mooie naam, zeg!") var leeftijd=prompt("Geef nu uw leeftijd:") alert("U bent nu "+leeftijd+" jaar oud.") }
Variabelen
Opdracht 2 Het bestand variabelen.html in je werkmap bevat de code die hierboven werd afgedrukt. Bekijk het resultaat in de browser en omschrijf het effect van de volgende opdrachten: var voornaam=prompt("Geef uw voornaam:") ...................................................................................................................................................................................................................... ......................................................................................................................................................................................................................
alert("U bent nu "+leeftijd+" jaar oud.") ...................................................................................................................................................................................................................... ......................................................................................................................................................................................................................
Voeg de volgende opdracht toe: alert("Volgend jaar zal u "+(leeftijd+1)+" jaar oud zijn.")
Bekijk het resultaat in de browser. Wat loopt er fout? ...................................................................................................................................................................................................................... ......................................................................................................................................................................................................................
8
07-08
Programmeren met JavaScript
Industriële wetenschappen
In JavaScript wordt invoer (via een prompt of een tekstvak) als een string (tekenreeks) opgevat. Zo kan het gebeuren dat 17+1 niet 18, maar 171 als resultaat geeft. Met de operatoren * en / kan je getallen vermenigvuldigen en delen. De operator + daarentegen kan niet alleen voor getallen (optellen), maar ook voor strings (samenvoegen) worden gebruikt. Om in dit geval duidelijk te maken dat er “opgeteld” moeten worden en niet “samengevoegd” moet je de invoer converteren naar een getal. De functie parseInt geeft het eerste geheel getal (integer) in een tekenreeks. Begint de tekenreeks niet met een cijfer dan geeft parseInt NaN (Not a Number). geeft geeft geeft geeft
De functie parseFloat geeft het eerste kommagetal (floating-point) in een tekenreeks. Begint de tekenreeks niet met een cijfer dan geeft parseFloat NaN . parseFloat("50") parseFloat("32.25 EUR")
Opdracht 2
geeft geeft
50 32.25
(vervolg)
Pas variabelen.html aan zoals hieronder aangegeven en voer het opnieuw uit. var leeftijd=parseInt(prompt("Geef nu uw leeftijd:"))
JavaScript kent de volgende types (= soorten variabelen) integer
gehele getallen, bv. 37
floating-point
kommagetallen, bv. 37.125
string
tekenreeks tussen " en ", bv. "Dit is een string!"
Gebruik parseInt() of parseFloat() om een string naar een getal te converteren.
oef01.html Wijzig voorbeeld.html zodat de in- en uitvoer gebeurt door middel van dialoogvensters (prompt en alert) in plaats van met tekstvakken. Bewaar de gewijzigde versie als oef01.html in je werkmap.
P. Poelman
07-08
9
EDUGO campus Glorieux - Oostakker
4
Operatoren
Toekenningsoperatoren Om aan een variabele een waarde toe te kennen gebruik je het teken =
x=1
kent de waarde 1 toe aan de variabele x
x=y*2
vermenigvuldigt de waarde van y met 2 en kent het resultaat toe aan x
x=x+1
verhoogt de waarde van de variabele x met 1
Bij een toekenning wordt de waarde van de bewerking rechts van het teken = eerst berekend en vervolgens toegekend aan de variabele links van dit symbool. Zoals uit het laatste voorbeeld blijkt kan eenzelfde variabele zowel links als rechts van het = teken voorkomen. Je leest in JavaScript het teken = dus beter als “wordt” i.p.v. “is gelijk aan”. Bewerkingen die vaak voorkomen zijn getal=getal+1 of getal=getal-1. Hiertoe zijn in JavaScript speciale operatoren ( ++ en -- ) beschikbaar, die het typwerk en de kans op fouten bij langere variabelenamen verkleinen.
getal++
is een verkorte schrijfwijze voor getal=getal+1
getal--
is een verkorte schrijfwijze voor getal=getal-1
++ noemt men de increment-operator, -- is de decrement-operator
Rekenkundige operatoren Naast de gebruikelijke operatoren + , - , * en / waarvan de werking je ongetwijfeld duidelijk is, beschikt JavaScript over een speciale operator % (procentteken) om de rest van een deling te bepalen. Deze operator noemt men de modulo-operator. Door de instructie a=15%6
wordt aan de variabele a de waarde 3 toegekend, want als je 15 deelt door 6 is het quotiënt 2 en de rest 3. Stringoperatoren JavaScript kent slechts één operator die speciaal voor tekst is bedoeld, de operator +, om stukken tekst samen te voegen.
10
07-08
Programmeren met JavaScript
Industriële wetenschappen
Voorbeeld
function weetJeWatIkDoe() { var x=12,y=5 x=x+2 y-var z=x%y var xStr="Kan je " var yStr="dit verklaren?" var zStr=xStr+yStr alert(x+"%"+y+"="+z+zStr) }
Opdracht 3 Kan je exact voorspellen wat in onderstaand venster zal verschijnen na uitvoering van de code hierboven. Noteer je voorspelling in het venster en controleer nadien je antwoord met de computer.
Wijzig de alert-opdracht als volgt:
alert(x+"%"+y+"="+z+"\n"+zStr)
Voer de gewijzigde code uit in de browser en noteer de uitvoer:
Omschrijf het effect van \n ..............................................................................................................................................................................................................
P. Poelman
07-08
11
EDUGO campus Glorieux - Oostakker
5
Wiskundige berekeningen
Om wiskundige berekeningen uit te voeren zijn in JavaScript de volgende functies ingebouwd. Math.PI
het getal π
Math.E
het getal e (het getal van Euler), e ≈ 2,718
Math.pow(x,y)
berekent x y
Math.sqrt(x)
berekent
Math.sin(x)
berekent de sinus van x (x in radialen)
Math.cos(x)
berekent de cosinus van x (x in radialen)
Math.tan(x)
berekent de tangens van x (x in radialen)
Math.asin(x)
berekent de boogsinus van x
Math.acos(x)
berekent de boogcosinus van x
Math.atan(x)
berekent de boogtangens van x
Math.log(x)
berekent de natuurlijke logaritme van x
Math.exp(x)
berekent e x
Math.round(x)
rondt de waarde van x af tot een geheel getal
Math.ceil(x)
berekent de gehele waarde ≥ x
Math.floor(x)
berekent de gehele waarde ≤ x
Math.abs(x)
berekent de absolute waarde van x
Math.random()
geeft een willekeurig getal tussen 0 en 1
x
Let bij gebruik van deze functies op de juiste schrijfwijze, de M van Math moet als hoofdletter ingetypt worden. Voorbeelden
De waarde van getal op 0,001 nauwkeurig bekom je met: Math.round(getal*1000)/1000
De schuine zijde in een rechthoekige driehoek kan je berekenen met: Math.sqrt(Math.pow(zijde1,2)+Math.pow(zijde2,2))
12
07-08
Programmeren met JavaScript
Industriële wetenschappen
6
Objectentabel
Om de werking van een programma te onderzoeken of om een fout in je programma op te sporen kan je een objectentabel opstellen. Dit is een tabel waarin wordt weergegeven welke waarden de variabelen tijdens de uitvoering van het programma toegekend zullen krijgen. function voorbeeld() {
a
b
var a,b a=0
0
b=a+5
0
5
a++
1
5
}
function oefening1() { var som=0 som=som+3 som=som+5 }
function oefening2() { var a=1,b=2 a=b b=a }
function oefening3() { var a=1,b=2,t t=a a=b b=t }
P. Poelman
07-08
13
EDUGO campus Glorieux - Oostakker
oef02.html
Gegeven is een algoritme om een bedrag in EUR om te rekenen naar BEF.
a. Vul de objectentabel in voor het omzetten van een bedrag van 12 EUR naar BEF. b. Codeer het algoritme in JavaScript.
oef03.html
Gegeven is een algoritme om de gemiddelde snelheid (in km/h) van een renner te berekenen over een tijdrit van 50 km. De tijd moet worden ingevoerd in uren, minuten en seconden (in 3 delen).
a. Vul de objectentabel in voor een tijd van 1 uur 3 minuten 40 seconden. b. Codeer het algoritme in JavaScript. c. Pas het programma aan zodat ook de afstand (in km) kan worden ingevoerd.
14
07-08
Programmeren met JavaScript
Industriële wetenschappen
oef04.html
Aan de vier hoeken van een rechthoekig stuk karton, van 80 cm op 50 cm, snijdt men gelijke vierkanten weg. Van de rest maakt men een doos zonder deksel.
a. Vervolledig onderstaand algoritme om de inhoud van de doos te berekenen in liter als de zijde Vul de objectentabel in voor vierkantjes met een van de vierkantjes in cm ingevoerd wordt. zijde van 5 cm.
Vervolledig onderstaand algoritme om een tijd ingegeven in seconden om te zetten naar uren, minuten en seconden. Vul de objectentabel in voor een tijd van 4000 seconden.
Algoritme
Objectentabel - oef05 -
seconden
uren
minuten
LEES seconden uren ← Geheel deel van (seconden / 3600) seconden ← seconden - 3600 * uren minuten ← Geheel deel van (seconden / 60) seconden ←
Gegeven de functie f ( x) = 5 x 3 + 3 x 2 + 10 Schrijf een programma dat een x-waarde leest en de bijhorende functiewaarde afdrukt. Voorbeeld:
f (−1) = 8
oef07.html
Schrijf een programma dat de sinus berekent van een hoek ingegeven in graden, minuten en seconden. De interface van je programma moet er als volgt uitzien:
16
07-08
Programmeren met JavaScript
Industriële wetenschappen
oef08.html
Schrijf een programma dat de coördinaten ( x1 , y1 ) en ( x2 , y2 ) van 2 punten in het vlak leest en de vergelijking van de rechte door deze punten afdrukt in de vorm y = ax + b . Voorbeeld:
de rechte door de punten (1,3) en (2,-5) heeft als vergelijking y = -8x + 11
Extra oefeningen * eoef01.html
Schrijf een programma om de resultante van 2 krachten te berekenen. De krachten worden ingevoerd in Newton en de tussenliggende hoek α in graden. Voorbeeld:
F1 =12 N, F2 = 5 N, α = 36° ⇒ Fr =16,3 N
* eoef02.html
Schrijf een programma om 2 tijden ingegeven in uren, minuten en seconden op te tellen. Voorbeeld:
1u58'30" + 2u13'58" = 4u12'28"
* eoef03.htm
Schrijf een programma dat een bedrag in EUR kan omrekenen naar BEF en omgekeerd. Zoek op het Internet naar een geschikte afbeelding voor de interface van je programma. Voorbeeld:
P. Poelman
07-08
17
EDUGO campus Glorieux - Oostakker
7
De keuze
De programma’s die je tot nu toe geschreven hebt waren opgebouwd uit instructies die één na één werden uitgevoerd. Een dergelijke controlestructuur noemen we een opeenvolging of sequentie. Met een keuze of selectie kan je een programma een beslissing laten nemen afhankelijk van een voorwaarde.
if (voorwaarde) { doe dit als de voorwaarde waar is } else { doe dit als de voorwaarde vals is }
Opmerkingen
- de voorwaarde staat tussen haakjes; - opdrachten worden afgebakend door accolades; - het gedeelte met else mag je weglaten indien er niets moet uitgevoerd worden als de voorwaarde vals is. Voorwaarden
Om voorwaarden te vormen gebruik je vergelijkingsoperatoren: < > <= >= == !=
kleiner dan groter dan kleiner dan of gelijk aan groter dan of gelijk aan gelijk aan verschillend van
OPGELET :
gelijkheid test je met == en niet met =
Voorbeeld if (getal==0) ...
om te controleren of een getal gelijk is aan 0
18
07-08
Programmeren met JavaScript
Industriële wetenschappen
Voorwaarden samenstellen
Je kan voorwaarden samenstellen met de logische operatoren: ! && ||
niet en of
Voorbeeld if ((getal>=1) && (getal<=5)) ...
om te controleren of de waarde van getal tussen 1 en 5 ligt (grenzen inbegrepen). oef09.html
Codeer onderstaand algoritme in JavaScript.
- oef09 LEES getal getal < 0 WAAR
VALS pWortel ←
SCHRIJF “onmogelijk om de vierkantswortel te berekenen”
nWortel ← −
getal getal
SCHRIJF pWortel, nWortel
oef10.html
Welk resultaat krijg je als bij oef08.html de punten (5,10) en (5,2) ingevoerd worden? ....................................................................................................................................................................................................................................
Verklaar dit resultaat. ....................................................................................................................................................................................................................................
Gebruik een selectie om ervoor te zorgen dat ook in deze situatie een correcte wiskundige vergelijking op het scherm verschijnt. Bewaar het aangepaste programma als oef10.html .
P. Poelman
07-08
19
EDUGO campus Glorieux - Oostakker
oef11.html
In je werkmap kan je het bestand oef11.html vinden dat de onderstaande interface bevat.
Vervolledig het programma. De uitvoer moet telkens bestaan uit 2 regels, zoals in onderstaande voorbeelden. Test je programma in elk van deze gevallen. 2 x 2 + 10 x + 12 = 0 Discriminant = 4 Er zijn 2 oplossingen: -3 en -2
x 2 + 2x + 1 = 0 Discriminant = 0 Er is 1 oplossing: -1
2 x 2 + 11x + 18 = 0 Discriminant = -23 Er zijn geen oplossingen in IR
20
07-08
Programmeren met JavaScript
Industriële wetenschappen
Extra oefeningen
* eoef04.html
Schrijf een programma dat na het invoeren van een getal meldt of dat getal even of oneven is.
* eoef05.html Schrijf een programma dat 3 zijden van een driehoek leest en afdrukt of de driehoek wel of niet rechthoekig is.
P. Poelman
07-08
21
EDUGO campus Glorieux - Oostakker
8
De meervoudige keuze
Soms moet een keuze gemaakt worden tussen meerdere alternatieven, bijvoorbeeld bij het werken met een menu. Een switch geeft je de mogelijkheid verschillend te reageren naargelang de waarde van een variabele.
switch (variabele) { case waarde1: doe dit als variabele==waarde1 break case waarde2: doe dit als variabele==waarde2 break ...
}
default: doe dit als geen enkele waarde overeenstemt
Voorbeeld demoMeervoudigeKeuze.html function kiesKleur() { var keuze=prompt("Geef uw keuze: 1=groen 2=rood 3=blauw 4=geel") keuze=parseInt(keuze) switch (keuze) { case 1: document.bgColor="green" break case 2: document.bgColor="red" break case 3: document.bgColor="blue" break case 4: document.bgColor="yellow" break default: alert("U hebt een ongeldige keuze gemaakt.") } }
Opdracht 4
Het programma demoMeervoudigeKeuze.html staat in je werkmap. Test het eens uit. Je kan ook een selectievak gebruiken. Onderzoek demoSelectievak.html om te achterhalen hoe dit werkt.
22
07-08
Programmeren met JavaScript
Industriële wetenschappen
oef12.html
Gebruik een meervoudige keuze om een programma te schrijven dat je gewicht berekent op een andere planeet. De gebruiker moet een keuze kunnen maken uit onderstaande planeten. Gegeven:
gewicht op de maan gewicht op Jupiter gewicht op Mars gewicht op Venus gewicht op Neptunus
= = = = =
gewicht op aarde * 0.166 gewicht op aarde * 2.36 gewicht op aarde * 0.37 gewicht op aarde * 0.9 gewicht op aarde * 1.12
De interface van je programma kan er als volgt uitzien (je mag creatiever zijn!). De figuur staat in je werkmap als weegschaal.jpg .
Massa en gewicht Massa en gewicht zijn twee grootheden die soms nogal eens door elkaar gehaald worden. Vaak hoor je mensen zeggen: “ik weeg 55 kilogram”. In feite is dit niet correct. Kilogram is een eenheid van massa, terwijl gewicht een kracht is en uitgedrukt moet worden in Newton. Om je gewicht te kennen, moet je jouw massa vermenigvuldigen met de valversnelling hier op Aarde, die 9,81 m/s² bedraagt. Een persoon met een massa van 55 kg weegt op Aarde dus eigenlijk 540 Newton. Weegschalen meten kracht. Het meten van deze kracht is de eenvoudigste manier om onze massa te weten te komen. Omdat de aantrekkingskracht overal op Aarde (bijna) gelijk is, staat je gewicht altijd in dezelfde constante verhouding tot je massa, en kan het dus eigenlijk geen kwaad als je zegt: “ik weeg 55 kilogram”. Op andere planeten maakt het wel verschil. Op de Maan bijvoorbeeld is de aantrekkingskracht veel kleiner. Een persoon van 55 kg zal op een weegschaal op de Maan slechts 9 kg laten optekenen. Die weegschaal meet nog steeds een kracht, en als je die op de aardse manier omrekent naar een massa, zit je er natuurlijk naast. De persoon is dus zeker niet vermagerd: zijn massa is nog steeds dezelfde. Of om het correct uit te drukken: een persoon die op Aarde 540 Newton weegt, weegt op de Maan slechts 90 Newton, maar zijn massa is nog steeds 55 kg. Bron: www.technopolis.be
P. Poelman
07-08
23
EDUGO campus Glorieux - Oostakker
9
De begrensde herhaling
Wanneer een instructie of groep van instructies een gekend aantal keren herhaald moet worden, spreken we van een begrensde herhaling . Een herhaling wordt ook een iteratie genoemd.
for (teller=beginwaarde;teller<=eindwaarde;teller++) { opdracht(en) }
Dit werkt als volgt: 1 2 3 4
de teller krijgt de beginwaarde toegekend; de opdrachten worden uitgevoerd; de teller wordt verhoogd met 1; als de teller kleiner of gelijk is aan de eindwaarde wordt er herhaald vanaf stap 2.
Voorbeeld
function berekenKwadraten() { for (i=1;i<=10;i++) { document.write(" "+i+"² = "+i*i) } }
demoBegrensdeHerhaling.html
In plaats van de uitvoer in een dialoogvenster weer te geven, kan je deze ook naar een webpagina schrijven. Hiervoor gebruik je document.write in plaats van alert . De -tag zorgt ervoor dat er telkens een nieuwe regel begonnen wordt. Kies de knop “Vorige” in de browser om vanuit de uitvoer terug te keren naar het programma.
oef13.html
Het programma uit het voorbeeld staat in je werkmap. Test het eens uit in de browser. Pas het programma aan zodat de begin- en eindwaarde door de gebruiker ingevoerd kunnen worden. Bewaar de gewijzigde versie als oef13.html .
24
07-08
Programmeren met JavaScript
Industriële wetenschappen
oef14.html
Gegeven onderstaand algoritme. - oef14 som ← 0 VOOR teller VAN
1 TOT 5 LEES getal som ← som + getal
SCHRIJF som
a. Vul de objectentabel aan als de getallen 3, 5, 6, 2 en 4 worden ingevoerd.
opdrachten
teller
getal
som ← 0
som 0
LEES getal
1
3
0
som ← som + getal
1
3
3
LEES getal
2
5
3
som ← som + getal
2
5
8
b. Codeer het algoritme in JavaScript. c. Omschrijf het voordeel om op deze manier een som te berekenen? .............................................................................................................................................................................................................................
d. Pas het programma aan zodat de gebruiker het aantal getallen kan invoeren.
P. Poelman
07-08
25
EDUGO campus Glorieux - Oostakker
10 De voorwaardelijke herhaling Wanneer het aantal herhalingen afhankelijk is van een voorwaarde, spreken we van een voorwaardelijke herhaling .
Met beginvoorwaarde
while (voorwaarde) { opdracht(en) }
Dit werkt als volgt: 1 de voorwaarde wordt gecontroleerd; 2 als de voorwaarde waar is worden de opdrachten tussen de accolades uitgevoerd; als de voorwaarde vals is gaat het programma verder met de opdracht na de sluitaccolade; 3 naar stap 1 De opdrachten worden herhaald zolang (while) de voorwaarde waar is.
oef15.html
Met onderstaand algoritme wordt de som van een willekeurig aantal positieve getallen berekend. Om het einde van de invoer aan te duiden wordt een negatief getal als sluitgegeven ingevoerd.
- oef15 som ← 0 LEES getal ZOLANG (getal >= 0) som ← som + getal LEES getal SCHRIJF som
26
07-08
Programmeren met JavaScript
Industriële wetenschappen
a. Vul de objectentabel in als achtereenvolgens de getallen 5, 1, 3 en -1 worden ingevoerd. opdrachten
som
getal
b. Codeer het algoritme in JavaScript.
Met eindvoorwaarde De voorwaarde kan ook achteraan staan: do {
opdrachten } while (voorwaarde)
Let erop dat in dit geval de opdrachten minstens éénmaal uitgevoerd worden. Dit kan bijvoorbeeld nuttig zijn om de gebruiker te verplichten om een geldige invoer te doen. Voorbeeld function voerEenGetalIn() { do { var invoer=prompt("Geef een getal") } while (isNaN(invoer) || invoer==null) alert("Uw getal is "+invoer) }
verplichteInvoer.html
NaN staat voor “Not a Number”, dit betekent “geen getal”. De functie isNaN(invoer) geeft “waar”
als de invoer geen getal is. Een variabele waaraan nog geen waarde werd toegekend heeft de speciale waarde null . Zo kunnen we testen of de gebruiker in het invoervenster op “Cancel” drukt.
P. Poelman
07-08
27
EDUGO campus Glorieux - Oostakker
Wanneer gebruik je nu for of while ?
Gebruik for als het aantal herhalingen vooraf duidelijk is. Gebruik while als het aantal herhalingen vooraf onbekend is of lastig te bepalen.
oef16.html
Schrijf een programma dat de vermenigvuldigingstafel van een ingevoerd getal afdrukt. Bijvoorbeeld, voor invoer 5 moet het resultaat er als volgt uitzien: 1 x 5 = 5 2 x 5 = 10 3 x 5 = 15 4 x 5 = 20 5 x 5 = 25 6 x 5 = 30 7 x 5 = 35 8 x 5 = 40 9 x 5 = 45 10 x 5 = 50
oef17.html
Schrijf een programma dat het gemiddelde van een willekeurig aantal positieve getallen kan berekenen. Om het einde van de invoer aan te duiden wordt een negatief getal ingevoerd. Opgelet, het sluitgegeven mag niet mee verwerkt worden!
28
07-08
Programmeren met JavaScript
Industriële wetenschappen
oef18.html
- oef18 LEES a LEES b ZOLANG a ≠ b a>b waar
vals
a←a-b
b←b-a
SCHRIJF a
a. Welke programmastructuren herken je in dit algoritme? Kruis aan. O opeenvolging
O keuze
O begrensde herhaling
O voorwaardelijke herhaling
b. Stel de objectentabel op indien achtereenvolgens de getallen 9 en 42 worden ingevoerd.
c. Codeer het algoritme in JavaScript. d. Welke wiskundige bewerking wordt door dit algoritme gerealiseerd? .............................................................................................................................................................................................................................
P. Poelman
07-08
29
EDUGO campus Glorieux - Oostakker
11 Uitvoer in tabelvorm Bekijk nog eens de uitvoer bij oefening 16. Je merkt dat de getallen niet erg mooi uitgelijnd staan. Je kan dit oplossen door een tabel te gebruiken. Hiervoor is wel een beetje html-kennis noodzakelijk.
1
22
333
4444
55555
666666
In de browser geeft dit: 1
22
333
4444
55555 666666
Om een tabel te maken heb je dus drie html-tags nodig:
en
en
en
om een tabel af te bakenen om een rij in de tabel af te bakenen (table row) om in een rij de inhoud van een datacel af te bakenen (table data)
Opdracht 5 1.
Typ de code voor de tabel eens in, ewaar als opdr5.html en bekijk het effect in de browser.
2.
Wijzig de
-tag als volgt en bekijk het effect.
3.
Wijzig de code voor de eerst twee rijen als volgt en bekijk het effect.
1
22
333
4444
4.
30
Wijzig de code zodat je een tabel met 4 rijen en 3 kolommen bekomt.
07-08
Programmeren met JavaScript
Industriële wetenschappen
We gaan dit nu toepassen in JavaScript om de uitvoer van oefening 16 te verbeteren. Om vanuit JavaScript naar een html-document te schrijven gebruik je document.write . Je kan hierbij ook html-tags meesturen. Deze moeten wel als string meegegeven worden en bijgevolg door " en " afgebakend worden.
function toonTafelVan() { var getal=prompt("Geef een getal:") document.write("
") for (i=1;i<=10;i++) { document.write("
"+i+"
x
") document.write("
"+getal+"
=
") document.write(i*getal+"
") } document.write("
") }
demoTabel.html
Als je bijvoorbeeld 35 invoert bekom je de volgende “uitgelijnde” tabel. 1 2 3 4 5 6 7 8 9 10
Opmerkingen Om alle code op één scherm zichtbaar te houden werd de document.write-opdracht in drie delen gesplitst. Hierdoor wordt vermeden dat je te veel op één regel moet typen en daardoor moet “scrollen” en daardoor het “zicht” op je programma verliest. In de
-tag werd het attribuut border niet gebruikt. Het effect hiervan is dat de tabelranden niet zichtbaar zijn. Omdat het dubbel gebruik van aanhalingstekens ( " ) niet is toegelaten werden bij het align-attribuut weglatingstekens ( ’ ) gebruikt.
Opdracht 6
Het programma demoTabel.html staat in je werkmap. Test het eens uit in de browser.
P. Poelman
07-08
31
EDUGO campus Glorieux - Oostakker
oef19.html
a. Schrijf een programma dat een tabel met de positieve vierkantswortels van 1 tot 10 afdrukt. De resultaten moeten op 0,001 nauwkeurig afgedrukt worden.
1
1
2
1.414
3
1.732
4
2
5
2.236
6
2.449
7
2.646
8
2.828
9
3
10
3.162
b. Veralgemeen het programma door de begin- en eindwaarde voor de tabel (hierboven 1 en 10) aan de gebruiker te vragen.
oef20.html
Schrijf een programma dat van een in te lezen natuurlijk getal de faculteit berekent. Voorbeeld:
5! = 5 ⋅ 4 ⋅ 3 ⋅ 2 ⋅ 1 = 120
Opgelet:
0! = 1 (per definitie)
De interface van je programma moet er als volgt uitzien.
32
07-08
Programmeren met JavaScript
Industriële wetenschappen
oef21.html
Schrijf een programma dat de functie f ( x) =
x 3 + 3x + 16 x2 − 2 x − 3
in tabelvorm weergeeft. De gebruiker moet de beginwaarde, eindwaarde en stapgrootte voor de x-waarden in de tabel kunnen invoeren. In de gevallen waar de noemer nul wordt, moet een passende mededeling verschijnen. Voorbeeld beginwaarde: -2 eindwaarde: 5 stapgrootte:
x
0.5
f(x)
-2
0.4
-1.5
3.61
-1
ongedefinieerd
-0.5
-8.21
0
-5.33
0.5
-4.7
1
-5
1.5
-6.37
2
-10
2.5
-22.36
3
ongedefinieerd
3.5
30.83
4
18.4
4.5
14.62
5
13
P. Poelman
07-08
33
EDUGO campus Glorieux - Oostakker
oef22.html
Schrijf een programma dat een kapitaal en rentevoet leest en de aangroei van het kapitaal jaar na jaar in een tabel weergeeft. De berekening moet doorgaan tot het kapitaal minstens verdubbeld is. Voorbeeld Voor een startkapitaal van 2500 EUR en een rentevoet van 3,75 % moet een tabel zoals hieronder afgedrukt worden. 1
2593.75 EUR
2
2691.02 EUR
3
2791.93 EUR
4
2896.63 EUR
5
3005.25 EUR
6
3117.95 EUR
7
3234.87 EUR
8
3356.18 EUR
9
3482.03 EUR
10
3612.61 EUR
11
3748.08 EUR
12
3888.64 EUR
13
4034.46 EUR
14
4185.75 EUR
15
4342.72 EUR
16
4505.57 EUR
17
4674.53 EUR
18
4849.82 EUR
19
5031.69 EUR
oef23.html
Schrijf een programma dat van een willekeurig aantal positieve gehele getallen het kleinste getal kan bepalen. Om het einde van de invoer aan te geven wordt een negatief getal ingevoerd. oef24.html
Men besluit gedurende een schooldag de snelheid van alle passerende auto's te meten. Ontwerp een programma dat van alle auto's de snelheid leest (gebruik –1 als sluitgegeven voor de invoer) en een overzicht weergeeft van: a. de gemiddelde snelheid; b. het verschil tussen de maximum en minimum snelheid; c. het percentage auto's dat harder rijdt dan 50 km/h. Test je programma grondig (het sluitgegeven mag niet mee verwerkt worden!).
34
07-08
Programmeren met JavaScript
Industriële wetenschappen
oef25.html
Schrijf een programma om de gehele nulpunten van een veeltermfunctie met gehele coëfficiënten te bepalen. Het programma moet bruikbaar zijn voor veeltermfuncties met graad kleiner of gelijk aan 5. Tip
Een geheel nulpunt van een veeltermfunctie met gehele coëfficiënten is altijd een deler van de constante term.
De interface voor het programma kan er als volgt uitzien.
Gebruik onderstaande voorbeelden om je programma te testen.
1.
f ( x) = x 3 − 4 x 2 − 11x + 30 x1 = -3 x2 = 2 x3 = 5
2.
f ( x) = 4 x 4 − 3x − 7 x1 = -1
3.
f ( x) = 5 x 5 + 4 x 4 + 3 x 3 + 2 x 2 + x + 7 Er zijn geen gehele nulpunten.
P. Poelman
07-08
35
EDUGO campus Glorieux - Oostakker
Extra oefeningen
* eoef06.html
Schrijf een programma dat een vermenigvuldigingsvierkant afdrukt. De grootte van het vierkant is afhankelijk van een in te lezen getal. Bijvoorbeeld, als je 10 invoert:
Maak een spelletje hoger-lager. De computer kiest een getal tussen 0 en 100. De speler kan nu opeenvolgende keren een gok wagen, net zolang tot hij het getal geraden heeft. De computer meldt na elke poging “hoger” of “lager”. Op het einde van het spel moet het aantal beurten verschijnen dat nodig was om het getal te raden. Wees creatief en ontwerp een leuke interface.
* eoef08.html
Onder de gehele getallen groter dan 1, zijn er slechts 4 getallen die geschreven kunnen worden als de som van de derdemachten van hun cijfers. Voorbeeld:
153 = 13 + 5 3 + 33 .
Schrijf een programma om de drie andere getallen te bepalen, als je weet dat de oplossingen tussen 150 en 410 liggen.
36
07-08
Programmeren met JavaScript
Industriële wetenschappen
12 Arrays De volgende functie leest 5 getallen en drukt deze in omgekeerde volgorde van invoer af.
function keerOm() { var g1=prompt("Getal 1: ") var g2=prompt("Getal 2: ") var g3=prompt("Getal 3: ") var g4=prompt("Getal 4: ") var g5=prompt("Getal 5: ") document.write(g5+" ") document.write(g4+" ") document.write(g3+" ") document.write(g2+" ") document.write(g1+" ") }
Deze oplossing werkt perfect, maar veronderstel even dat niet 5 maar 50 getallen moeten worden ingevoerd. Dan krijg je op deze manier een wel zeer omvangrijk programma. Gelukkig kan dat handiger. Er is een manier om in één klap een reeks genummerde variabelen te maken. Zo’n reeks genummerde variabelen heet een Array en wordt als volgt gedeclareerd: var g=new Array()
Hierdoor worden in het geheugen opeenvolgende en genummerde plaatsen gereserveerd. Elk element in het Array is bereikbaar via een index , die tussen vierkante haakjes wordt geplaatst.
geheugen (RAM) g[0] g[1] g[2] g[3] g[4] ...
Let erop dat de nummering begint bij 0.
P. Poelman
07-08
37
EDUGO campus Glorieux - Oostakker
We herprogrammeren de functie keerOm met gebruik van een Array.
function keerOm() { var g=new Array() var n=5 for (i=1;i<=n;i++) { g[i]=prompt("Getal "+i+":") } for (i=n;i>=1;i--) { document.write(g[i]+" ") } }
demoArray.html
// aantal getallen
Om het programma te laten werken voor 50 getallen volstaat het om aan de variabele n de waarde 50 toe te kennen. Om het nog algemener te maken kan je het aantal getallen laten inlezen: var n=parseInt(prompt("Geef het aantal getallen"))
Oef26.html
De code uit bovenstaand voorbeeld staat in je werkmap onder de naam demoArray.html Test het programma en pas het aan zodat het werkt voor een willekeurig aantal positieve getallen. Het aantal getallen mag niet ingevoerd worden! De getallen moeten worden ingevoerd met -1 als sluitgegeven. Tip: maak een teller en gebruik while
Wanneer gebruik je een Array ?
Indien elk getal van een in te voeren reeks van getallen niet onmiddellijk verwerkt kan worden, maar bewaard moet blijven. De elementen kunnen dan met dezelfde naam, maar elk met een eigen volgnummer (index) bereikt worden
38
07-08
Programmeren met JavaScript
Industriële wetenschappen
De elementen van een array kunnen ook strings zijn. Om dit te illustreren een programma dat op het scherm enkele tips laat verschijnen. demo2Array.html function toonTips() { var tip=new Array() tip[1]="Gebruik een objectentabel om fouten in je programma op te sporen." tip[2]="Gebruik \" en \" om een string af te bakenen." tip[3]="Gebruik parseInt() of parseFloat() om een string om te zetten naar een getal." tip[4]="Gebruik insprongen om je programma overzichtelijk te houden." tip[5]="Gelijkheid test je met == en niet met = ." tip[6]="Je kan een deel van een programma tijdelijk uitschakelen \ndoor dit af te bakenen tussen /* en */ ." tip[7]="Oefening baart kunst!" if (confirm("Wil je enkele tips bekijken?")) { for (i=1;i<=7;i++) {alert(tip[i])} } else { alert("Volgende keer misschien.") } }
Opdracht 7
Het programma demo2Array.html staat in je werkmap. Test het eens uit. Met welke opdracht kan je de gebruiker om bevestiging vragen? ......................................................................................................................................................................................................................
P. Poelman
07-08
39
EDUGO campus Glorieux - Oostakker
Opdracht 8
a. Hoe declareer je in JavaScript een Array a ? ...............................................................................................................................................................................................................
b. Wat is het effect van deze declaratie in het geheugen? Maak dit duidelijk met een figuur.
c. Vul onderstaande instructie aan om de natuurlijke getallen 1 t.e.m. 10 (in deze volgorde) in het Array a te plaatsen (vanaf geheugenplaats a[1]). for (i=1;i<=10;i++) { ..................................................
}
d. Geef het effect van deze instructie weer in je figuur. e. Geef in je figuur weer hoe de inhoud van het Array a wijzigt als de volgende code erop toegepast wordt. for (i=1;i<=10;i++) { if (a[i]%2==0) { a[i]=a[i]*1.1 } }
40
07-08
Programmeren met JavaScript
Industriële wetenschappen
13 Lokale en globale variabelen Met behulp van functies kan je een programma opsplitsen in meerdere modules. Binnen elke module wordt dan een deel van het programma gerealiseerd. De verschillende modules worden tenslotte samengebracht tot één geheel. Het spreekt voor zich dat je op deze manier een overzichtelijk programma bekomt, vooral wanneer je de modules (functies) ook beschrijvende namen geeft. Wanneer je programma modulair is opgebouwd, dan is het vaak nodig dat de functies toegang hebben tot dezelfde variabelen. Variabelen die binnen een functie gedeclareerd worden zijn echter alleen binnen de functie zelf te bereiken. We spreken van lokale variabelen. Wil je dat een variabele voor meerdere functies bereikbaar wordt, dan declareer je deze buiten de functies (bovenaan). Dergelijke variabelen worden globale variabelen genoemd.
demoGlobaleVariabelen.html
Arrays <script language="JavaScript"> var g=new Array() var n
function leesArray() { n=parseInt(prompt("Geef het aantal getallen: ")) for (i=1;i<=n;i++) { g[i]=prompt("Getal "+i+":") } } function schrijfArray() { for (i=1;i<=n;i++) { f.uitvoer.value=f.uitvoer.value+"\n"+g[i] } }
Werken met getallen in een Array
P. Poelman
07-08
41
EDUGO campus Glorieux - Oostakker
Opdracht 9
Het programma demoGlobaleVariabelen.html kan je vinden in je werkmap. Bekijk het effect in de browser. In dit programma werd “modulair programmeren” toegepast. Hoe merk je dat? ......................................................................................................................................................................................................................
Omschrijf enkele (3) voordelen van deze manier van werken. ......................................................................................................................................................................................................................
Leg uit wat “globale” variabelen zijn. ...................................................................................................................................................................................................................... ......................................................................................................................................................................................................................
Op welke plaats in de code declareer je globale variabelen? .............................................................................................................................................................................................................................
Let op de manier van uitvoer. De uitvoer wordt naar een tekstveld binnen het formulier geschreven. Bestudeer grondig hoe dit gerealiseerd werd. Welke html-tags zijn hiervoor nodig? ......................................................................................................................................................................................................................
oef27.html
Programmeer binnen het programma demoGlobaleVariabelen.html een functie waarmee het gemiddelde van de getallen in het array berekend kan worden. Deze functie moet geactiveerd worden met een knop en het resultaat moet in het tekstveld binnen het formulier verschijnen.
42
07-08
Programmeren met JavaScript
Industriële wetenschappen
oef28.html
In je werkmap vind je een onafgewerkt programma oef28.html , waarmee functiewaarden van een veeltermfunctie van de n-graad f ( x) = an x n + an −1 x n −1 + ... + a2 x 2 + a1 x + a0 berekend kunnen worden. Test dit even uit en vervolledig de code. De resultaten moeten in een tekstveld binnen het formulier verschijnen, zoals in onderstaand voorbeeld.
oef29.html
Schrijf een programma dat het gemiddelde μ en de standaardafwijking σ van een willekeurig aantal positieve getallen berekent. De getallen worden ingevoerd met -1 als sluitgegeven. n
μ=
∑x i =1
i
n
Voorbeeld:
P. Poelman
n
σ=
∑ (x i =1
i
− μ )2
n
als de getallen 3, 7, 6, 8 en 6 worden ingevoerd is μ = 6 en σ = 1,67332 .
07-08
43
EDUGO campus Glorieux - Oostakker
oef30.html
Schrijf een programma om het werpen met twee dobbelstenen tegelijk te simuleren. Het aantal keer dat de twee dobbelstenen geworpen worden moet door de gebruiker ingevoerd worden. Om de computer een willekeurig geheel getal te laten kiezen tussen 1 en 6 (grenzen inbegrepen) kan je de functie parseInt(Math.random()*6)+1 gebruiken. Bij iedere worp wordt de som van het aantal ogen berekend. Bijvoorbeeld 1+1=2, 2+6=8, 6+6=12 . De som van de beide dobbelstenen moet in een array som worden bijgehouden. Dus als de som bijvoorbeeld 8 is, dan wordt het arrayelement som[8] met 1 verhoogd. Als resultaat geeft het programma het aantal keren dat de som de waarde 2, 3, 4, 5, 6, 7, 8, 9, 10, 11 of 12 heeft aangenomen en de bijhorende percentages. Een mogelijke interface en uitvoer zie je hieronder.
som
aantal
procent
2
1343
2.69 %
3
2746
5.49 %
4
4112
8.22 %
5
5631
11.26 %
6
6942
13.88 %
7
8534
17.07 %
8
6857
13.71 %
9
5495
10.99 %
10
4144
8.29 %
11
2792
5.58 %
12
1404
2.81 %
* eoef09.html
Declareer twee arrays en vul beiden met waarden die oplopend zijn. Schrijf een programma dat de waarden van de eerste twee arrays in een derde array opslaat en wel zo dat alle getallen in oplopende volgorde staan. * eoef10.html
Schrijf een programma dat 6 willekeurige getallen kiest voor het kansspel Lotto. De gekozen getallen moeten in gerangschikte volgorde op het scherm verschijnen. Opgelet: elk getal mag maar 1 keer voorkomen! Wees creatief en ontwerp ook een leuke interface.
