Een expressie is een deel van de code die JavaScript interpreteert alvorens het resultaat in een statement te gebruiken. het volgende statement wijst een getal toe aan de variabele totaal., waarbij een expressie wordt gebruikt:
totaal = getal1 + getal2;
In deze regel is het fragment "getal1 + getal2"; zo’n vooraf geïnterpreteerde expressie. In dit geval worden er eenvoudig twee getallen bij elkaar opgeteld. Intern wordt echter eerst gekeken wat de waarde van getal1 is, daarna wat de waarde van getal2 is, pas dan worden deze waarden bij elkaar opgeteld en het resultaat wordt vervolgens toegekend aan de variabele "totaal".
Naast variabelen kent JavaScript ook letterlijke waarden, de zogenoemde literals. Deze gegevens zijn precies wat de naam al doet vermoeden: de letterlijke waarden. Bijvoorbeeld
Literals zijn als het ware absolute waarden (constanten) en kunnen gecombineerd worden in statements tot ingewikkelde expressies. De hulpmiddelen hiervoor zijn operatoren. JavaScript kent 6 typen operatoren. Elke operator heeft zo zijn eigen kenmerken en is geldig in combinatie met een bepaald gegevenstype. Wij zien er drie:
Het eenvoudigste toewijzingsoperator is het is-gelijk-aan-teken. Deze wijst de waarde rechts van de operator toe aan de variabele links ervan. Enkele voorbeelden zullen dit duidelijk maken.
| a = 1 | wijst de waarde 1 toe aan de variabele a |
| a = b + 1 | telt 1 op bij de variabele b en wijst die nieuwe waarde toe aan a |
| a = a + 1 | telt 1 op bij de waarde van a en wijst die nieuwe waarde toe aan a |
Zoals de naam al doet vermoeden, voeren de wiskundige operatoren wiskundige bewerkingen uit op variabelen en constanten. De meeste programmeurs gebruiken deze operatoren intuïtief, zonder er al te veel over na te denken. 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. Het enige waar je op moet letten is dat bij de delingen de voorwaartse slash wordt gebruikt. Het gebruik van de backslash levert de melding ‘illegal character’ op in de browser.
var lengte = 12
var breedte = 7
var oppervlakte = lengte * breedte
var massa = 10
var volume = 20
var massadichtheid = massa/volume
JavaScript kent nog een tweetal andere wiskundige operatoren, die wellicht wat meer toelichting vereisen: de modulo-operator en de negatie-operator:
Als je al wat meer programmeerervaring hebt, ken je de modulo-operator waarschijnlijk
ook uit andere programmeertalen. In JavaScript werkt deze operator op dezelfde wijze: hij kent
de rest van een deling toe aan een variabele.
Stel dat een variabele a gelijk is aan 100. Na het volgende statement:
var b = a % 3;
is de variabele b gelijk aan 1 want 100 gedeeld door 3 heeft als quotiënt 33 en de rest is 1.
Het nut van die operator is je waarschijnlijk nog niet helemaal duidelijk, maar je kunt er bijvoorbeeld heel snel mee bepalen of een bepaald getal even of oneven is. Als "getal % 2" gelijk is aan nul, is het getal blijkbaar deelbaar door 2 want de rest is 0. Als het getal deelbaar is door 2 dan weet je dat je te maken hebt met een even getal. Zo kan je ook de deelbaarheid onderzoeken door andere getallen na het %-teken te plaatsen.
Deze operator verandert een variabele van het type getal in zijn tegengestelde. De negatie-operator bestaat uit een minteken. Het is een unaire operator omdat hij maar één operand heeft. De negatie-operator komt dus altijd vóór de operand te staan en noemen we daarom een prefix-operator .
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 operator wordt aan het einde van de tekst links van de operator ‘geplakt’.
Voorbeeld
var aanspreking = "Goede morgen, ";
var naam = "Frank";
var zin = aanspreking + naam
in de variabele zin zit nu "Goede morgen, Frank"
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().
3.5.1 In een databestand staan een heel reeks namen en voornamen onder elkaar. Wij houden het even eenvoudig en beperken ons tot één naam en één voornaam. Wij willen wel dat die twee variabelen samengevoegd worden tot één variabele klant. Werk deze oefening uit zodat eerst op het scherm komt welke waarde in de variabele naam staat en welke in de variabele voornaam. Daaronder verschijnt de regel: De naam van onze beste klant is: ...
OPLOSSING IN BRONCODE
OPLOSSING ALS FORMULIER
3.5.2 Je hebt twee getallen (getal1 en getal2) waarmee je de eenvoudige bewerkingen optelling, aftrekking, vermeningvuldiging en deling moet uitvoeren. Zorg ervoor dat je op het scherm te zien krijgt wat er in de variabelen getal1 en getal2 zit; EN wat het resultaat is van de bewerkingen.
OPLOSSING IN BRONCODE
OPLOSSING ALS FORMULIER
3.5.3 In een databank zit telefoonnummers. Het zonenummer (bv. 051) en het netnummer (31 23 12) worden in een afzonderlijk gedeelte bewaard. Zorg ervoor dat die twee samen in één variabele telefoonnumer komen te staan. Zorg ervoor dat je op het scherm te zien krijgt wat er in de variabelen zit.
OPLOSSING IN BRONCODE
OPLOSSING ALS FORMULIER
3.5.4 Een bank kan heel snel de juisheid van een rekeningnummer controleren, door de kijken of de deling van de eerste 10 cijfers van een rekeningnummer door het priemgetal 97 de laatste 2 cijfers van je rekeningnummer zijn.(je leerkracht helpt je vast wel bij deze oefening).
OPLOSSING IN BRONCODE
OPLOSSING ALS FORMULIER
3.6.1 Oefening 1 (Terug naaropgave)
<html>
<head>
<title> Oefening 351</title>
</head>
<body>
<script language="javaScript">
var naam = "Dehaene "
var voornaam = "Jean-Luc"
var klant = naam + voornaam
document.write('in de variabele naam zit ' +naam+ '<br>');
document.write('in de variabele voornaam zit ' +voornaam+ '<br>');
document.write('De naam van onze beste klant is: ' +klant+ '<br>');
</script>
</body>
</html>
3.6.2 Oefening 2 (Terug naaropgave)
<html>
<head>
<title> Oefening 352</title>
</head>
<body>
<script language="javaScript">
var getal1 = 100
var getal2 = 50
var som = getal1 + getal2
var verschil = getal1-getal2
var product = getal1*getal2
var deling = getal1/getal2
document.write('in de variabele getal1 zit ' +getal1+ '<br>');
document.write('in de variabele getal2 zit ' +getal2+ '<br>');
document.write('De som van de twee getallen is: ' +som+ '<br>');
document.write('Het verschil tussen de twee getallen is: ' +verschil+ '<br>');
document.write('Het product van de twee getallen is: ' +product+ '<br>');
document.write('De deling van de twee getallen is: ' +deling+ '<br>');
</script>
</body>
</html>
3.6.3 Oefening 3 (Terug naaropgave)
<html><head>
<title>Oefening 353</title>
</head>
<body>
<script language="javaScript">
var zonenummer = "051"
var abonneenummer= "312980"
var telefoonnummer = zonenummer + abonneenummer
document.write('In de variabele zonenummer zit: ' +zonenummer+ '<br>');
document.write('In de variabele abonneenummer zit: ' +abonneenummer+ '<br>');
document.write('Het nummer van de abonnee is: ' +telefoonnummer+ '<br>');
</script>
</body>
</html>
3.6.4 Oefening 4 (Terug naaropgave)
<html><head>
<title>Oefening 354</title>
</head>
<body>
<script language="javaScript">
var Eerste_10 = 0012094944
var controle = 14
var rest = Eerste_10%97
document.write('De eerste 10 cijfers van het rekeningnummer zijn: ' +Eerste_10+ '<br>');
document.write('De laatste 2 cijfers van het rekeningnummer zijn: ' +controle+ '<br>');
document.write('De rest van deling is: ' +rest+ '<br>');
</script>
</body>
</html>
Wanneer je thuis een microgolf hebt, dan staan er daar bijna zeker enkele toetsen op om te programmeren. Bij sommige toestellen staan er zelfs standaardprogramma's voorgeprogrammeerd. De enigste reden waarom men dit doet proberen we te begrijpen aan de hand van volgend voorbeeld: het bakken van een bevroren pizza.
Wanneer je dit één keer moet doen dan zal je het volgend stramien volgen:
Wanneer je dit verschillende malen moet doen, zal je maar al te blij zijn dan er in de microgolf een programma'tje of functie zit die (door één duw op een knop) in 10 minuten een heerlijk krokante pizza aflevert.
Functies bieden je dus eigenlijk de mogelijkheid bij elkaar horende programmacode te groeperen en zo een bepaalde taak uit te voeren. Je kan een functie eigenlijk zien als een miniprogramma. Deze miniprogramma's gaan wij zelf leren schrijven in JavaScript.
Binnen functies kan JavaScript verschillende taken uitvoeren. Bijvoorbeeld:
Vaak gebruiken we bij een functie-aanroep argumenten, of parameters. Dit zijn gespecificeerde waarden die door de functie intern worden gebruikt. De parameters staan tussen haakjes bij de functie-aanroep en functie-definitie. Parameters zijn niet verplicht want sommige functies voeren hun taak uit zonder dat ze daarbij extra gegevens in de vorm van parameters nodig hebben. (zoals je later zult zien voor de functie: "prompt()")
Het function-statement vereist de volgende componenten:
Voorbeeld van een heel eenvoudige functie om twee getallen 5 en 7 op te tellen:
function Telop(a,b)
{
var resultaat= a+b;
return resultaat;
}
Wanneer we aan de variabele a de waarde 5 toewijzen en aan de variabele b de waarde 7 doen we dit als volgt:
var a = 5
var b = 7
met volgende statement reken je de som uit van 5 en 7 en wijs je dit toe aan de variabele som
som = Telop(a,b)
met volgend statementplaats je dit op het scherm
document.write("de som van 5 en 7 = ", som);
JavaScript voert de opdrachten binnen een functie nooit automatisch uit.(net zoals de pizza ook niet zelf uit de diepvries springt, de oven in duikt om dan uiteidelijk te landen op je bord). De functies worden pas uitgevoerd, op het moment dat de functie uit het script wordt aangeroepen of gebruikt. Functies vind je daarom meestal in de header van het document. Op deze wijze worden functies als eerste ingelezen bij het laden van een Web-pagina. Daarmee zijn ze bereikbaar voor alle scripts die verder in het Web-document voorkomen. Maar een functie kan ook in het bodygedeelte zolang hij maar voor de oproep komt. Als je dus in de eerste regels van een script een functie gebruikt die pas onder aan de pagina gedefinieerd wordt, krijg je een foutmelding.
Er zijn verschillende manieren om een functie aan te roepen. De meest gebruikte is de gewone functie-aanroep en heeft volgende vorm:
functienaam(parameter1, parameter2);
Je kan de functie ook gebruiken om een waarde uit te rekenen en de berekende waarde terug te sturen zodra de functie klaar is. Als je wil verderwerken met deze waarde, zal je hem moeten opslaan in een variabele. Bij dit type functie-aanroep geef je (impliciet of expliciet) aan in welke variabele de berekende waarde wordt opgeslagen:
impliciet: variabeleNaam = functienaam(parameter1, parameter2);
expliciet: var variabeleNaam = functienaam(parameter1, parameter2);
We hebben gezien dat een functie parameters kan accepteren, waarmee binnen de functie verder gewerkt wordt. We bekijken een eenvoudige functie die een naam op het scherm toont:
function printNaam(naam)
{
document.write(‘Uw naam is:’);
document.write(naam);
}
Binnen deze functie refereren verwijzingen naar ‘naam’ naar de waarde die bij de functie-aanroep is meegegeven. Hierbij kan je met de volgende zaken rekening houden:
Onderstaande functie-aanroepen vanuit een script elders op de pagina hebben dus allebei hetzelfde resultaat.
printNaam("Frank");
en
var gebruiker = "Frank";
printNaam(gebruiker);
Functies kunnen waarden terugsturen. De teruggestuurde waarde kan worden opgeslagen in een variabele om later in het script gebruikt te worden. Indien je de teruggestuurde waarde niet in een variabele laat opslaan, gaat hij verloren. JavaScript gebruikt hiervoor het statement return om een resultaat terug te sturen. Elke geldige expressie die tot een enkelvoudige waarde geëvalueerd kan worden (een getal, een tekst of een logische waarde) kan met het statement return worden teruggegeven.
Per functie kan maar één waarde worden teruggegeven. Gebruik je toch meerdere return-statements na elkaar, dan wordt de waarde van het eerste return-statement teruggegeven. De rest van de functie wordt zelfs niet eens uitgevoerd. Het is dus nutteloos om na return nog andere opdrachten in een functie te schrijven. Stel dat we een functie kwadraat() schrijven:
function kwadraat(getal)
{ var resultaat = getal * getal;
return resultaat;
}
Het statement return geeft de waarde van resultaat terug aan het aanroepende statement. Je kon dezelfde functie beknopter schrijven:
function kwadraat(getal)
{
return = getal * getal;
}
omdat de expressie getal * getal een enkelvoudige waarde oplevert.
3.8.1 Maak een functie die 3 getallen optelt. Zorg ervoor dat hij het resultaat op het scherm zet van verschillende reeksen van drie getallen.
OPLOSSING IN BRONCODE
OPLOSSING ALS FORMULIER
3.8.2 Maak een functie (en gebruik hem) die het benzine-verbruik van je wagen berekent per 100km.
OPLOSSING IN BRONCODE
OPLOSSING ALS FORMULIER
3.8.3 Maak een functie (en gebruik hem) die je BMI berekent. Dit kan je berekenen door je massa in kg te delen door het kwadraat van de lengte in m.
OPLOSSING IN BRONCODE
OPLOSSING ALS FORMULIER
3.8.4 Maak een functie (en gebruik hem) die de inhoud van een balk berekent.
OPLOSSING IN BRONCODE
OPLOSSING ALS FORMULIER
3.9.1 Oefening 1 (Terug naaropgave)
<html><head>
<title> Oefening 381</title>
</head>
<body>
<script language="javaScript">
function som3getallen(g1,g2,g3)
{
var resultaat= g1+g2+g3
return resultaat
}
document.write("De som van 3, 4 en 5 = ",som3getallen(3,4,5),"<br>")
document.write("De som van -2, 9 en 113 = ",som3getallen(-2,9,113),"<br>")
document.write("De som van 23, 47 en 15 = ",som3getallen(23,47,15),"<br>")
document.write("De som van 123, 22 en -5 = ",som3getallen(123,22,-5))
</script>
</body>
</html>
3.9.2 Oefening 2 (Terug naaropgave)
<html><head>
<title> Oefening 382</title>
</head>
<body>
<script language="javaScript">
function verbruik(liter, afstand)
{
var resultaat= liter/afstand*100
return resultaat
}
document.write("Het verbruik van de wagen is ",verbruik(68,800)," liter per 100km")
</script>
</body>
</html>
3.9.3 Oefening 3 (Terug naaropgave)
<head>
<title> Oefening 383</title>
</head>
<body>
<script language="javaScript">
function BMI(massa, lengte)
{
var resultaat= massa/(lengte*lengte)
return resultaat
}
document.write("Je BMI is ",BMI(85,1.79))
</script>
</body>
</html>
3.9.4 Oefening 4 (Terug naaropgave)
<html>
<head>
<title> Oefening 384</title>
</head>
<body>
<script language="javaScript">
function balk(lengte,breedte,hoogte)
{
var volume= lengte*breedte*hoogte
return volume
}
document.write("De balk heeft een volume van: ", balk(13,5,7)," cm³.")
</script>
</body>
</html>