Informaticasite van het Lauwers College te Buitenpost                 © R.J. van der Beek
 

Hoofdstuk 16: Javascript en PHP

16.3 Getallen, strings, settimeout en images

  16.3.1 Getallen en berekeningen

Als je berekeningen maakt m.b.v. Javascript dan zul je vaak gebruik maken van het object Math.
Als je bijvoorbeeld een getal, dat m.b.v. de variabele g wordt vastgelegd, wilt afronden dan is de opdracht daarvoor:
Math.round(g).       Alleen round(g) werkt niet!
Er zijn veel meer eigenschappen van het object Math, die je bij berekeningen kunt gebruiken.
In de tabel hieronder zie je een aantal.

Eigenschap/Methode Beschrijving
Math.PIhet getal pi
Math.round(x)afronden op een geheel getal. Bijv: 4.7 wordt 5 en 5.3 wordt 5
Math.random()willekeurig getal tussen 0 en 1
Math.abs(x)absolute waarde van een getal
Math.sin(x)sinus
Math.sqrt(x)wortel
Math.ceil(x)naar boven afronden op een geheel getal. Bijv: 4.2 wordt 5
Math.floor(x)naar beneden afronden op een geheel getal. Bijv: 4.9 wordt 4
Math.pow(x,y)xy

Als er in een venstertje iets is ingevoerd, en de variabele invoer bevat de inhoud daarvan, dan kun je m.b.v. isNaN controleren of het een getal is ja of nee.
Als het wel een getal is dan heeft isNaN(invoer) de waarde true en anders de waarde false.

Als er in een venstertje iets is ingevoerd, en de variabele invoer bevat de inhoud daarvan, dan kun je m.b.v. parseInt(invoer) daar de getalswaarde van bepalen (en als het eigenlijk geen getal is, maar een tekst, dan wordt de getalswaarde 0)

Afronden op één decimaal
Als je een variabele x hebt, dan krijg je de wortel uit dat getal met de opdracht w = Math.sqrt(x);
Stel je voor dat je de wortel wilt afronden op één decimaal nauwkeurig.
Als je de de opdracht y = Math.round(w); gebruikt dan wordt het op gehelen afgerond.
En er is geen speciale opdracht om het op één decimaal af te ronden, maar daar kun je zelf wel voor zorgen m.b.v. een paar programmaregels.
  • Als je het getal eerst vermenigvuldigt met 10, het dan op helen afrondt, en het dan deelt door 10, dan is het afgerond op één decimaal.
  • Want stel je voor dat het getal 3,14159 is.
  • Als je het vermenigvuldigt met 10 dan wordt het 31,14159
  • Dat afronden op een geheel getal levert 31 op.
  • En als je dat dan deelt door 10 wordt het 3,1. En dan is het dus afgerond op 1 decimaal.
Dat afronden gebeurt dus m.b.v. de opdrachten :
w = w * 10;
w = Math.round(w);
w = w / 10;

en dat kan ook m.b.v. één samengestelde opdracht: w = (Math.round(10 * w) )/10;

In de volgende oefening wordt daar gebruik van gemaakt.

Oefening 12

Maak een html-document zoals hieronder, en probeer het uit.

<HTML>
<HEAD>
<TITLE>Oefening 12 JavaScript </TITLE>
<SCRIPT LANGUAGE="JavaScript"  TYPE="text/javascript" >

var x = 0;
var w = 0;

for ( x = 1; x <= 20; x++)
{
    w = Math.sqrt(x);
    w = (Math.round(10 * w) ) / 10;
    document.write("De wortel van " + x + " = " + w + "<br>");
}

</SCRIPT>

</HEAD>
<BODY>

Hier is de body
</BODY>
</HTML>


In het volgende voorbeeld verschijnt een willekeurig sommetje op het scherm, en dan kan een antwoord worden ingevuld.
Als er op de button met "Controleer" wordt geklikt verschijnt er "goed" of "fout" in een venstertje.

Oefening 13

Zorg er voor dat je een html-document zoals hieronder.
En probeer het uit.

<HTML>
<HEAD>
<TITLE>Oefening 13 Javascript</TITLE>

<SCRIPT LANGUAGE="JavaScript">
var g1=0;
var g2=0;
var g3=0;

function som()
{
// g1 en g2 worden gehele getallen tussen 5 en 15
g1 = Math.round ( Math.random() * 10 + 5);
g2 = Math.round ( Math.random() * 10 + 5);
// het sommetje wordt in het tekstvenster geplaatst
document.formulier.som.value = g1 + " + " + g2 + " =";
}

function test()
{
// de variabele invoer bevat het ingevulde antwoord
var invoer = formulier.antwoord.value;
// de variabele g3 bevat de getalswaarde van de invoer
g3=parseInt(invoer);
if (g3==(g1+g2))
{alert ("Goedzo!");}
else
{alert ("Fout!");}
}
</script>
</head>

<body onLoad="som()" >
<form name="formulier">
Vul in:
<input type="text" name="som">    
<input type="text" name="antwoord" value="">
<input type="button" value="Controleer" onClick="test()">
</form>
</body>
</html>

Uitleg:

  • Als je de methode Math.random() aanroept, krijg je een willekeurig getal tussen de 0 en de 1.
    Math.random() * 10 levert dus een willekeurig getal tussen 0 en 10 op
    Math.random() * 10 + 5 levert dus een willekeurig getal tussen 5 en 15 op
    Als je er Math.round voor zet dan wordt het afgerond op een geheel getal.
  • var g3=parseInt(invoer); zorgt er voor dat de variabele g3 de getalswaarde van de invoer bevat. De methode parseInt zet een string om in een getal.
  • De opdracht onLoad="som()" als attribuut van de body-tag zorgt er voor dat er direct bij het starten een sommetje verschijnt.

  16.3.2 String-methoden

Een string is een stukje tekst.
En als je dat stukje tekst in een variabele hebt opgeslagen, bijv. w = "javascript", dan kun je daar bepaalde methoden op loslaten.
Bijvoorbeeld w.length geeft de lengte van de string w, dat is in dit geval dus 10
Je hebt o.a. de volgende methoden voor een string:
(we passen het allemaal toe op de string w = "javascript")

methode betekenis
w.length de lengte van de string w, dus 10
w.charAt(7) geeft het zevende teken van de string, dus r
w.charCodeAt(7) geeft de ASC-code van het zevende teken van de string (of de UNI-code), dus de ASC-code van de r, en dat is 114
z = w.concat(p) Zet de strings w en p achter elkaar, en z wordt die gecombineerde string
Dit kan ook m.b.v. de opdracht z = w + p;
w.fromCharCode(65) w wordt het teken met ASC-code 65, dus w = "A"
w.indexOf("s") geeft het nummer van de eerste s in de string (ze beginnen te tellen bij 0!), dus 4
Als het teken niet voorkomt wordt de waarde -1. Dus bijvoorbeeld w.indexOf("q") = -1
w.indexOf("a",2) geeft het nummer van de eerste a gerekend vanaf het derde teken in de string (ze beginnen te tellen bij 0!), dus 3
w.substr(3) levert een substring, vanaf teken nr. 3 tot het eind (ze beginnen te tellen bij 0!), dus "ascript"
w.substr(3, 4) levert een substring van 4 tekens, vanaf teken nr. 3 (ze beginnen te tellen bij 0!), dus "ascr"
w.toLowerCase() levert dezelfde string, maar alles met kleine letters
w.toUpperCase() levert dezelfde string, maar alles met hoofdletters, dus w = "JAVASCRIPT"

Een aantal van deze methoden wordt gebruikt in het volgende voorbeeld.
In dit voorbeeld wordt er gecontroleerd of er wel een geldig e-mail adres is ingevuld:

Oefening 14

Zorg er voor dat je een html-document hebt dat er uit ziet zoals hieronder.
En probeer het uit.

<HTML>
<HEAD>
<TITLE>Oefening 14 Javascript</TITLE>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript" >
var email = "";

function geef_email()
{
    email = prompt("Geef je emailadres","");
    test_email();
}

function test_email()
{
    if (email == "" || email == null || email.indexOf ('@', 0) == -1)
    {
        alert ("Geen geldig e-mailadres!");
    }
    else
    {
       var p = email.indexOf ('@', 0);
       alert ("De lengte van het emailadres is " + email.length+ "\n" + "Voor het apestaartje staat " +
            email.substr(0, p) + "\n" + " en achter het apestaartje staat " + email.substr(p+1));
    }
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT  TYPE=BUTTON  value="klik hier als je je emailadres wilt opgeven"  onClick="geef_email()">
</FORM>
</BODY>
</HTML>

Uitleg:

  • if (email == "") : hier wordt gecontroleerd of er wel iets is ingevoerd.
    Omdat er niets tussen de aanhalingstekens "" staat, is dat de lege string.
  • || betekent of.
  • if (email == null) : hier wordt gecontroleerd of er op Annuleren geklikt is, want dan krijgt email de waarde null.
  • email.indexOf('@',0) is de plaats van het teken @ in email vanaf het begin (vanaf teken nr. 0). Als het teken er niet in voorkomt krijgt het de waarde -1
  • var p = email.indexOf('@',0); zorgt er voor dat p de plaats van het apestaartje bevat.
    email.substr(0,p); is dan alles wat voor het apestaartje staat.
    email.substr(p+1); is alles wat achter het apestaartje staat.
  • \n zorgt er voor dat de rest op een nieuwe regel wordt afgedrukt.

 16.3.3 SetTimeout

Met behulp van de setTimeout-methode kun je de computer iets laten doen na een bepaalde tijd.

Je kunt bijvoorbeeld de volgende opdracht geven : c = setTimeout("tijdcontrole()", 5000);
  • Het eerste argument is de functie die uitgevoerd wordt na een bepaalde tijd.
    In dit geval is dat de functie tijdcontrole( ) (zie de oefening hier onder)
    Denk er om dat de naam van de JavaScript-functie tussen aanhalingstekens moet staan.
  • Het tweede argument vertelt de computer na hoeveel milliseconden de functie uitgevoerd moet worden, in dit geval is dat dus na vijf seconden.
  • Er staat c= voor de setTimeout-functie.
    Als er verschillende setTimeout-functies zijn dan krijgen die allemaal een bepaald nummer, en c bevat dan de waarde daarvan. Dat is nodig om de setTimeout-opdracht te kunnen stoppen.
    Je mag c = ook uit de opdracht weglaten (dan noteer je de opdracht dus als setTimeout("tijdcontrole()", 5000); ), maar dan heb je niet de mogelijkheid om er voor te zorgen dat de opdracht niet wordt uitgevoerd.
  • Als je hebt aangegeven dat na een aantal millisec. een functie moet worden uitgevoerd, maar binnen die tijd kom je op het idee dat de functie toch maar niet moet worden uitgevoerd, dan kun je het stopzetten.
    Met de opdracht clearTimeout(c); kun je er voor zorgen dat de setTimeout-functie wordt stopgezet, dus dat de functie niet wordt uitgevoerd.
    Daarbij moet c het nummer van de setTimeout-opdracht bevatten. Vandaar dat bij de eerste setTimeout-opdracht er c = voor stond.
Stel je voor dat iemand een vraag moet beantwoorden, en hij mag hoogstens 5 seconden nadenken, dan kun je er bijvoorbeeld voor zorgen dat het antwoord na 5 seconden niet meer gegeven kan worden.
In onderstaande oefening lees je hoe dat gaat.

Oefening 15

Zorg er voor dat je een html-document hebt zoals hieronder.
En probeer het uit.

<HTML>
<HEAD>
<TITLE>Javascript oefening 15 </TITLE>
<SCRIPT LANGUAGE="JavaScript">
var c=0;

function tijdcontrole()
{c=setTimeout("te_laat()", 5000);}

function te_laat()
{ 
	somformulier.invoer.value="te laat";
	somformulier.invoer.disabled = true;
	somformulier.controleer.disabled = true;
 }

function controle()
{
   if (somformulier.invoer.value == '2')
   { 
       clearTimeout(c);
       alert (" Goed zo !" );
   }
   else
   { 
       alert (" Nee Probeer nog eens maar snel !" );
   }
}
</SCRIPT>
</HEAD>
<BODY onload="tijdcontrole();" >
<H3>Hoeveel is 1 + 1 ? !</H3>
<form name="somformulier"  >
<input type="text" name="invoer" >
<input type="button" value="contr" onClick="controle()" name="controleer">
</form>
</BODY>
</HTML>

Uitleg:

  • Aan de body-tag: <BODY onload="tijdcontrole();" > zie je dat de functie tijdcontrole() direct na het inladen wordt gestart.
  • Die functie voert de opdracht setTimeout("te_laat()", 5000); uit.
  • Dat betekent dat de functie te_laat( ) na 5000 milliseconden uitgevoerd moet worden.
  • Er staat c= voor de timer-functie. Dat is nodig om de timer te kunnen stoppen.
  • Met de opdracht clearTimeout(c); zorg je er voor dat de setTimeout-functie niet gestart wordt.
  • Als het goede antwoord na 5 sec. nog niet is gegeven dan wordt de functie te_laat( ) uitgevoerd.
    Die functie zorgt er voor dat er te laat verschijnt in het tekstvenster, en dat je niet meer in het tekstvenster kunt typen, en het klikken op de controleer-knop heeft ook geen zin meer.

  16.3.4 Images

Een image-object is een onderdeel van het document-object, dat op zijn beurt weer een deelobject van het window-object is, daarom kun je het noteren als window.location.image
Maar window mag je weglaten, dus je mag het als location.image noteren.

Een afbeelding declareren gaat op de volgende manier:
  pic = new Image(200,100) ;
Dit heeft tot gevolg dat er geheugenruimte wordt gereserveerd voor een afbeelding, en wel zoveel geheugen er nodig is voor een afbeelding van 200 bij 100. En de naam van de variabele, waarin die afbeelding wordt vastgelegd, is pic

Een aantal eigenschappen en methoden van het image-object zie je in de volgende tabel:

eigenschap/methode betekenis
pic.src = "foto.gif"; het bestand foto.gif wordt ingeladen, en de inhoud wordt bewaard in de image-variabele pic (het wordt nog niet getoond !)
Die variabele pic moet vantevoren als image zijn gedeclareerd.
document.figuur.src = pic.src de afbeelding, die wordt bewaard in de image-variabele pic, wordt getoond in het document, op de plaats van de afbeelding met de naam figuur.
De naam, in dit geval figuur, moet in de tag van de afbeelding zijn gedefinieerd
document.figuur.border de breedte van de rand in pixels van de afbeelding met de naam (die als attribuut is meegegeven) figuur
document.figuur.fileSize de bestandsgrootte van de afbeelding document.figuur.height de hoogte van de afbeelding
document.figuur.width de breedte van de afbeelding


Een afbeelding veranderen
We gaan nu eens bekijken hoe je een afbeelding op de pagina kunt laten veranderen.
We willen dat het volgende gebeurt:
  • als je er met de muis overheen gaat verandert de afbeelding
  • als je de muis er weer vanaf haalt verandert de afbeelding weer terug
  • als je op de afbeelding klikt wordt 'verder.htm' geladen

Oefening 16

Zorg er dat je een html-document hebt zoals hieronder en probeer het uit.
Je moet foto1.gif en foto2.gif wijzigen in de namen van plaatjes die op de schijf staan, het mogen ook jpg-files zijn. En als het formaat van de grootste bijv. 300 bij 275 is, dan moet je Image(200,100) veranderen in Image(300,275)
En bekijk het na die wijzigingen met je browser.

<HTML>
<HEAD>
<TITLE>Oefening 16 Javascript</TITLE>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript" >
{
  plaatje1 = new Image(200,100);
  plaatje1.src = "foto1.gif";
  plaatje2 = new Image(200,100);
  plaatje2.src = "foto2.gif";
}
function Toonplaatje1()
{  document.figuur.src = plaatje1.src;  }
function Toonplaatje2()
{  document.figuur.src = plaatje2.src;  }
</SCRIPT>
</HEAD>
<BODY>
<A HREF="verder.htm" onMouseOver="Toonplaatje2(); return true" onMouseOut="Toonplaatje1(); return true">
<IMG SRC="foto1.gif" NAME="figuur"></A>
</BODY>
</HTML>

Uitleg:

In de JavaScript code gebeurt het volgende:
  • De opdracht   plaatje1 = new Image(200,100); heeft tot gevolg dat er geheugenruimte wordt gereserveerd voor een plaatje, en wel zoveel geheugen er nodig is voor een plaatje van 200 bij 100.
  • De opdracht plaatje1.src = "foto1.gif"; heeft tot gevolg dat foto1.gif alvast wordt ingeladen, en de inhoud wordt bewaard in de variabele plaatje1 (het wordt nog niet getoond !)
  • De opdracht   document.figuur.src = plaatje1.src;   heeft tot gevolg dat het plaatje getoond wordt in het document waarmee je bezig bent, op de plaats waar eerst foto1 stond.
    Dat de plaats van foto1 wordt bedoeld zie je aan de naam figuur, die is aangegeven in de tag voor de afbeelding: <IMG SRC="foto1.gif" NAME="figuur">
  • Hetzelfde gebeurt met plaatje 2.

  16.3.5 Arrays

Een array bestaat uit een aantal variabelen, die bij elkaar horen.
Je kunt bijvoorbeeld een array maken voor de dagen van de week, en die array noem je dan bijvoorbeeld weekdagen.
De eerste naam wordt dan opgeslagen in de variabele weekdagen[0]. De tweede naam in weekdagen[1] enz.

Je moet een array wel vantevoren declareren. Dat doe je d.m.v. de opdracht weekdagen= new Array().
(of m.b.v. de opdracht weekdagen= new Array(6), als je het aantal ook aan wilt geven, maar dat is niet nodig)
Daarna kun je de waarden aangeven:

weekdagen[0]= "zondag"
weekdagen[1]= "maandag"
enz

Je hoeft je geen zorgen te maken over de grootte van de array, en je kunt zowel getallen als strings of andere objecten in een array opslaan. In het volgende voorbeeld verschijnt de naam van de dag automatisch op het scherm, en er wordt elke dag een bepaald spreekwoord getoond.


Oefening 17

Zorg er voor dat je een html-document hebt zoals hieronder
En probeer het uit.

<HTML>
<HEAD>
<TITLE>Oefening 17 JavaScript </TITLE>
<SCRIPT LANGUAGE="JavaScript">

weekdagen= new Array();
weekdagen[0]="zondag";
dagen[1]="maandag"
weekdagen[2]="dinsdag"
weekdagen[3]="woensdag"
weekdagen[4]="donderdag"
weekdagen[5]="vrijdag"
weekdagen[6]="zaterdag"

spreekwoord=new Array()
spreekwoord[0]="Eigen haard is goud waard"
spreekwoord[1]="Haastige spoed is zelden goed"
spreekwoord[2]="Beter laat dan nooit"
spreekwoord[3]="Wie het laatst lacht, lacht het best"
spreekwoord[4]="De morgenstond heeft goud in de mond"
spreekwoord[5]="Zoals het klokje thuis tikt, tikt het nergens"
spreekwoord[6]="Oost west, thuis best"
datum= new Date()
dag=datum.getDay()
document.write("Het is vandaag " + weekdagen[dag] + "<br>");
document.write("De tip van de dag is " + spreekwoord[dag] + "<br>");

</SCRIPT>
</HEAD>
<BODY>
Dit is de body, daar staat verder niets bijzonders.
</BODY>
</HTML>

Uitleg:

De opdrachten
datum= new Date()
dag=datum.getDay()
 hebben tot gevolg dat de variabele dag het nummer van de dag krijgt.
Als het bijvoorbeeld dinsdag is, krijgt dag de waarde 3
En weekdagen[dag] is dan dus dinsdag, zodat de juiste dagnaam wordt afgedrukt.
En spreekwoord[dag] levert dan spreekwoord[3] op, dus dan wordt er "Wie het laatst lacht, lacht het best" afgedrukt