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

Hoofdstuk 16: Javascript en PHP

16.1 JavaScript, de basis

  16.1.1 Javascript invoegen in HTML

Met JavaScript kun je programmeren binnen een HTML-document.
Het lijkt wel wat op Visual Basic, maar de opdrachten komen uit C++
De Javascript-code is een onderdeel van het HTML-document, net als andere HTML-tags.

Als je Javascript-code aan het schrijven bent, en je werkt met Internet Explorer, dan is het verstandig om er voor te zorgen dat de browser aangeeft waar eventuele fouten zitten.
Want een foutje is zo gemaakt, maar de browser geeft standaard niets aan bij een fout.
Klik daarvoor op Extra, dan op Internet Opties, tabblad Geavanceerd.
Onder het kopje "Webpagina's bekijken" staat standaard een vinkje voor Foutopsporing in scripts uitschakelen, haal dat vinkje weg.
Zet verder, onder datzelfde kopje, een vinkje voor: melding van elke scriptfout weergeven

Door een <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript" > tag in een document te plaatsen vertel je de browser dat hij de volgende regels als een "Javascript-programma" moet opvatten, tot de corresponderende </SCRIPT> tag verschijnt.

Je moet je aan een aantal regels houden als je Javascript gebruikt.
  • De <SCRIPT> tag wordt meestal tussen de <HEAD> en </HEAD> tags geplaatst, dus voor de <BODY> tag.
    Als er document.write()-opdrachten (zie verderop voor de betekenis daarvan) in voorkomen dan zijn de regels, die met document.write op het scherm worden gezet, de bovenste regels in het browservenster.
  • Je kunt een Javascript-blok ook binnen het body-gedeelte van de pagina plaatsen.
    Als in zo'n script document.write()-opdrachten voorkomen dan verschijnen de regels, die met document.write op het scherm worden gezet door dit script, op de plaats waar je het blok hebt ingebed. De plaats van het script-blok bepaalt dan dus de plaats van de regels die met document.write op het scherm worden gezet.
  • Omdat sommige browsers Javascript niet kunnen verwerken is het verstandig je hele JavaScript code tussen <!-- commentaar-tags --> te plaatsen.
    Als je dat doet zullen niet_Javascript-browsers je pagina toch verwerken, maar dan zonder het Javascript te verwerken.
  • Laat elke JavaScript-regel die je als commentaar toevoegt beginnen met // .
  • Denk er om dat Javascript hoofdlettergevoelig is. Als je bijvoorbeeld location.tostring() gebruikt in plaats van location.toString() dan werkt het niet !
Voorbeeld :

<HTML>
<HEAD>
<TITLE>Test script</TITLE>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript" >
<!-- Gebruik deze tag aan het begin
// Je JavaScript code begint hier
hier staat dus de echte javascriptcode
// sluit af vlak voor de </SCRIPT> tag met -->
</SCRIPT>
</HEAD>
<BODY>
Hier zit je Web-document
</BODY>
</HTML>

Je kunt de javascriptcode ook in een apart bestand zetten, met de extensie .js
 Als je de volgende code invoert:

<SCRIPT LANGUAGE="JavaScript" SRC="script.js">

dan wordt de code uit het bestand "script.js" gelezen en uitgevoerd.

 16.1.2 Structuur van de taal

JavaScript gebruikt een object-georienteerde benadering, net als Visual Basic en Java.

Een paar voorbeelden van Javascript-opdrachten:

document.write('Hallo mensen !');
window.status='Hallo mensen !';
document.write('<h1>Hallo mensen !</h1>');

De eerste opdracht heeft tot gevolg dat er 'Hallo mensen' op de eerste regel van de pagina wordt afgedrukt.
De tweede opdracht heeft tot gevolg dat er 'Hallo mensen' op de statusregel van het venster van de browser wordt afgedrukt.
De derde opdracht heeft tot gevolg dat er 'Hallo mensen' op de eerste regel van de pagina wordt afgedrukt, en wel als H1-kop. (Je kunt in Javascript dus ook HTML-tags gebruiken)

Je hebt steeds een objectnaam en een methode of property, gescheiden door een punt.

Objecten
De belangrijkste objecten:

Object Functie/betekenis
location Hiermee wordt bedoeld de informatie over de vindplaats van de webpagina, inclusief de URL, het protocol, de domain name, het pad en de poort.
history Dit object houdt bij welke sites de Web browser heeft bezocht tijdens deze sessie, en je kunt ook veranderingen aanbrengen in die historie.
document Het document-object bevat alle gegevens over wat er in de lopende pagina staat. Ook de formulieren, links en ankers die er op voorkomen. Je kunt daar met behulp van script-regels ook veranderingen in aanbrengen.
form Dit bevat informatie over het formulier, tenminste als dat op de pagina voorkomt, inclusief action (de URL waar het heengezonden moet worden) en method (get or post).
navigator Dit bevat informatie over de browser die gebruikt wordt. De naam, de versie, het operating-system, enz.
button Dit bevat informatie en beinvloedt de buttons die in het document voorkomen.
Date Dit bevat informatie over de tijd waarop de pagina wordt bekeken, de datum, het jaar, het tijdstip van de dag, enz.

Ook een tabelcel en een anker en een div-blok kun je een naam geven, waarmee het een object wordt waar je in Javascript gebruik van kunt maken.
Een tabelcel kun je op de volgende manier een naam geven: <TD ID="cel1">
En dan kun je bijvoorbeeld m.b.v. de opdracht document.getElementById("cel1").style.background="red"; de achtergrondkleur van die cel veranderen.

Een anker kun je op de volgende manier een naam geven: <A HREF="........" ID="link1">
En dan kun je bijvoorbeeld m.b.v. de opdracht document.getElementById("link1").style.color=""#0000ff""; de tekstkleur van die link veranderen.

Elke tekst, die tussen <div> en </div> geplaatst is kun je op de volgende manier een naam geven: <div ID="par1">
En dan kun je bijvoorbeeld m.b.v. de opdracht document.getElementById("par1").style.display="none"; er voor zorgen dat die tekst onzichtbaar is.

  16.1.3 Properties en methoden

Properties

De objecten hebben "Properties" of "Eigenschappen".
Een paar voorbeelden:

eigenschap betekenis
document.bgColor de achtergrondkleur van het document
document.fgColor de tekstkleur van het document
form.action De URL van het script waar het naar toe gestuurd moet worden
location.hostname De naam van de host waarop de lopende webpagina staat
navigator.appName De naam van de browser, bijv. Microsoft Internet Explorer


Methoden
Aan de objecten zijn ook methoden gekoppeld.
Voorbeeld: document.write("Hallo wereld");

Denk er om dat er achter een methode altijd haakjes staan. Soms staat er niets tussen die haakjes, maar je mag ze niet weglaten.
Voorbeeld : document.write (location.toString( ) ).
 De toString() methode zorgt er voor dat de URL als een string (=woord) wordt opgevat, zodat die string in het document kan worden afgedrukt. De haakjes achter toString mogen niet worden weggelaten.

Meer voorbeelden van methoden:

methode betekenis
document.write(string) Drukt tekst op de pagina of HTML-code af.
form.submit() Stuurt de inhoud van het formulier weg.
window.alert(string) Er verschijnt een venstertje met een tekst er in; string bevat die tekst.
location.href="URL" Opent een nieuwe pagina in het bestaande venster, URL is het adres van de pagina die geopend moet worden.
window.open("URL",name) Opent een nieuw venster, waarin een pagina verschijnt. URL is het adres van de pagina die geopend moet worden, en name is de naam van het venster waarin het getoond moet worden (vergelijk met target=name.)
document.getElementById("cel1").style.background="kleur"; De achtergrondkleur van het element met de naam cel1 zal veranderen.
  Als je de variabele nu als volgt definieert: var nu = new Date();
nu.getDate();De dag van de maand (1 t/m 31)


Oefening 1

Maak m.b.v. Kladblok, of een andere tekstverwerker, onderstaand html-document (zie de rode tekst hieronder)
(Denk er om dat JavaScript verschil maakt tussen kleine letters en hoofdletters. Als je in het volgende voorbeeld location.tostring() getypt hebt in plaats van location.toString() dan werkt het niet !)

<HTML>
<HEAD>
<TITLE>Oefening 1 JavaScript </TITLE>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript" >
window.status='Dit staat op de statusregel';
document.bgColor='yellow';
document.write('Titel van deze pagina : ' + document.title + '<BR>');
document.write('URL van deze pagina : ' +location.toString() + '<BR>');
document.write('Gebruikte browser : ' + navigator.appName + '<BR>');
document.write('Laatste wijziging van dit document op: '+document.lastModified);
window.alert('Dit gebeurt allemaal m.b.v. Javascript');
</SCRIPT>
</HEAD>
<BODY>
<BR>Bla bla bla
</BODY>
</HTML>

Sla het bestand op, en bekijk het m.b.v. een browser.

  16.1.4 Variabelen, datum en tijd

In JavaScript kun je ook met variabelen werken.
Je moet een variabele declareren door het woordje var voor de naam te zetten, maar je hoeft niet aan te geven van welk type de variabele is (integer, real, string, of iets dergelijks)
Dat zoekt Javascript zelf wel uit.
De declaratie en de toekenning van een waarde vindt meestal in één opdracht plaats.
Op de volgende manier : var variabelenaam = waarde ;
Voorbeeld:
var voornaam = 'Piet' ;
var achternaam = 'de Vries' ;
var leeftijd = 28 ;
var naam = voornaam + achternaam

In het voorbeeld hierboven zie je in de laatste opdracht een plus tussen twee variabelen, maar dat zijn geen getallen.
Als je een plus tussen twee strings zet, dan worden ze achter elkaar geplakt.
Dus de variabele naam krijgt als inhoud PietdeVries

Je kunt variabelen ook gebruiken voor andere dingen dan getallen en woorden (strings).
Dan gaat het declareren op een andere manier, dan moet je het type er wel bij zetten, en dan moet het woordje new worden toegevoegd.
Er is een speciale variabele, die de datum en de tijd bevat, en dat is een voorbeeld daarvan.
Die declareer je bijvoorbeeld als volgt:
var d = new Date();

De variabele d bevat dan de datum plus de tijd, maar in een vreemde notatie.
Op het moment dat ik dit schrijf geldt, als ik het afdruk m.b.v. de opdracht document.write(d);, voor die variabele:
Sat Sep 8 11:49:13 UTC+0200 2007

Als je alleen de datum, of alleen de tijd wilt afdrukken, dan kan dat ook. Maar dan moet je een aantal methoden van het Date-object gebruiken.
Als je de variabele d als volgt definieert: var d = new Date(); dan kun je de volgende methoden gebruiken:

methode betekenis
d.getDate();De dag van de maand (1 t/m 31)
d.getMonth() + 1;Het nummer van de maand (1 er bij optellen, anders geldt januari=0
d.getYear();Het jaar
d.getDay();De dag van de week (0 t/m 6) 0=zondag, 1=maandag, enz
d.getHours();Het hoeveelste uur van de dag het is.
d.getMinutes( )Het aantal minuten over het uur.
d.getSeconds( );Het aantal seconden over de minuut.

Probeer het volgende maar eens.

Oefening 2

Maak m.b.v. Kladblok, of een andere tekstverwerker, onderstaand html-document (zie de rode tekst hieronder)

<HTML>
<HEAD>
<TITLE>Oefening 2 JavaScript </TITLE>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript" >
var d = new Date();
var datum = d.getDate() + '/' + (d.getMonth() + 1) + '/' + d.getYear();
var titel = document.title ;
var documenturl = location.toString() ;
var uur = d.getHours();
document.write(titel + ' ' + documenturl + ' ' + datum + ' '+ uur + ' uur <BR>');
</SCRIPT>
</HEAD>
<BODY>
<BR>Bla bla bla
</BODY>
</HTML>

Sla het bestand op, en bekijk het m.b.v. een browser.

  16.1.5 Alert, Prompt, Confirm

Je kunt er m.b.v. Javascript voor zorgen dat er een invulvenster verschijnt (m.b.v. prompt(string1,string2) en de inhoud daarvan kun je in een variabele opslaan
Dit kan als volgt : var variabelenaam = prompt(string1,string2)
Daarbij verschijnt string1 in het venster, en string2 in de titelbalk van het venster.

Verder kun je ook een boodschappenvenstertje laten verschijnen.
Als je de opdracht alert ('Hallo'); geeft verschijnt er een venstertje met de tekst Hallo en een OK-knop. Het venstertje verdwijnt pas als je op de OK-knop klikt.
Als je wilt dat de tekst over twee regels wordt verdeeld in het venstertje moet je \n tussenvoegen. Het combinatie-teken \n wordt het newline-karakter genoemd, het zorgt er voor dat er op een nieuwe regel wordt begonnen.
Voorbeeld: alert ("Dit is een alert-venster \n De tekst is verdeeld over twee regels")

Tenslotte kun je m.b.v. confirm een boodschappenvenster laten verschijnen waarop een OK-knop en een Cancel-knop staat.
De inhoud daarvan kun je in een variabele opslaan, en die variabele krijgt de waarde true als je op OK hebt geklikt en anders de waarde false.
Voorbeeld: var a = confirm("Wil je verder gaan?")

De methoden alert, prompt en confirm zijn methoden van het object window. Dus eigenlijk moet je het noteren als window.alert, window.prompt en window.confirm, maar bij methoden van het window-object mag je window altijd weglaten.

Voorbeeld:
var naam = prompt("Wat is je naam?", "");
alert ('Hallo ' + naam);

  16.1.6 Functies

Normaal worden de Javascript-opdrachten direkt na de start van de pagina uitgevoerd, en daarna verschijnt pas de tekst, die tussen <BODY> en </BODY> staat, op het scherm.
Je kunt er ook voor zorgen dat bepaalde Javascript-opdrachten niet direkt bij de start worden uitgevoerd, maar pas nadat er bijvoorbeeld op een bepaalde knop is geklikt, of als het document bijvoorbeeld wordt weggeklikt.
Dan moet je er een zogenaamde functie van maken.

Dat doe je als volgt:
  • De regel waarop de functiedefinitie begint ziet er zo uit :
    function functienaam( operanden )
  • En daarachter of eronder staan de opdrachten die behoren bij de functie, tussen accolades.
    Voorbeeld:

    function groet()
    {
    window.alert(' Bedankt voor het kijken en tot ziens ');
    }

  • Verder moet je aangeven wanneer de functie uitgevoerd moet worden.
  • Dat kan bijv. als attribuut van de body-tag :
    <BODY onUnload=" groet() ">
    Dat heeft tot gevolg dat de functie groet wordt uitgevoerd als de pagina van het scherm verdwijnt (onUnload).
  • Het kan ook als attribuut van een button of van een form, of van een textveld, of van een anker-tag.
    Dat attribuut kan zijn :
    onClick, onMouseOver ,onMouseOut, onChange, onSelect, onFocus, onSubmit, onBlur
    Zie daarvoor de volgende paragraaf.

Oefening 3

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

<HTML>
<HEAD>
<TITLE>Oefening 3 JavaScript </TITLE>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript" >
function groet()
{
       window.alert(' Bedankt voor het kijken en tot ziens ');
}
</SCRIPT>
</HEAD>
<BODY onUnload=" groet() ">
<BR>Bla bla bla
</BODY>
</HTML>


  16.1.7 Events (gebeurtenissen): onMouseOver, onMouseOut, button

Functies kunnen worden aangeroepen nadat bijvoorbeeld ergens op geklikt is.
Dan is er dus iets gebeurd, dat noem je wel een event (of gebeurtenis in het nederlands).
Daarbij wordt vaak gebruik gemaakt van zogenaamde buttons.
Een button is een onderdeel van een formulier, het is een zogenaamd <INPUT>-type.
Je maakt een button met de volgende code:

<FORM>
<INPUT type="button" value="Geef de achtergrondkleur" onClick="geefkleur( )" >
</FORM>

Als je deze code in je HTML-document opneemt dan verschijnt er een button op de pagina met de tekst "Geef de achtergrondkleur"
En als je er op klikt dan wordt de functie met de naam geefkleur( ) uitgevoerd.
Dan moet er natuurlijk wel een functie met die naam zijn gedefinieerd. Probeer de volgende oefening maar eens.

Oefening 4

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

<HTML>
<HEAD>
<SCRIPT language="javascript" TYPE="text/javascript" >
function geefkleur()
{
       alert (document.bgColor);
}
</SCRIPT>

</HEAD>
<BODY BGCOLOR="#BBDDCC">
<FORM>
<INPUT type="button" value="Geef de achtergrondkleur" onClick="geefkleur( )" >
</FORM>
</BODY>
</HTML>



We hadden de vorige oefening ook anders kunnen doen. Als je een korte functie hebt (met weinig opdrachten) dan kun je die ook rechtstreeks als attribuut opnemen. En dan hoef je niet een aparte functie m.b.v. Javascript te definiëren.
Het kan namelijk ook als volgt:

<HTML>
<HEAD>
</HEAD>
<BODY BGCOLOR="#BBDDCC">
<FORM>
<INPUT type="button" value="Geef de achtergrondkleur" onClick="alert (document.bgColor);" >
</FORM>
</BODY>
</HTML>

Dit principe wordt vaak toegepast bij de events onMouseOver, onMouseOut, enz.
Kijk maar naar de volgende voorbeelden.

  • Je kunt er bijvoorbeeld voor zorgen dat er iets speciaals op de statusbalk verschijnt als je met de muis over een link gaat.
    Je moet dan als attribuut aan het anker <A> toevoegen:
    onMouseOver="window.status='------------------------'; return true; "
    dan verschijnt ------------------------ op de statusregel.
    (als je er geen return true; achter zet zal er iets anders op de statusregel verschijnen, namelijk het adres van de link)

  • Je kunt er ook voor zorgen dat er iets speciaals gebeurt als je weer van de link afgaat met de muis.
    Je moet dan aan het anker <A> (dat is de tag voor de link) toevoegen: onMouseOut=" ----------------------- "

  • Je kunt er ook voor zorgen dat de tekstkleur van de link verandert als je er met de muis overheen gaat.
    Dat kan bijvoorbeeld door het volgende aan het anker toe te voegen:
    onMouseOver= " this.style.color='#ffff00' " onMouseOut="this.style.color='#ff0000' "
    Je krijgt dan bijvoorbeeld het volgende:
    <A href= "url.htm " onMouseOver= " this.style.color='#ffff00' " onMouseOut="this.style.color='#ff0000' " >

  • Je kunt er m.b.v. hetzelfde principe ook voor zorgen dat de achtergrondkleur van de link verandert als je er met de muis overheen gaat en ook als je er weer af gaat.
    Dat kan bijvoorbeeld door het volgende aan het anker toe te voegen:
    onMouseOver= " this.style.backgroundColor='#ffff00' " onMouseOut="this.style.backgroundColor='#ff0000' "

  • Je kunt er voor zorgen dat er een aantal dingen tegelijk veranderen door meer methoden tussen de aanhalingstekens te zetten, gescheiden door puntkomma's, bijvoorbeeld zo:
    on MouseOver="this.style.textDecoration='italic'; this.style.color='#ff0000'; this.style.width='16px'; this.style.fontFamily='Comic Sans MS'; this.style.fontStyle='normal'; this.style.fontWeight='normal'; "

  16.1.8 Het if-statement

Je kunt in Javascript if ... then ... else gebruiken, maar het woordje then moet je weglaten.
En de opdrachten op de stippeltjes moeten tussen accolades worden gezet, en de voorwaarde achter if moet tussen haakjes.
Het ziet er in de eenvoudige vorm (zonder else) als volgt uit:

if (voorwaarde)
{
   doe iets;
}


en in de vorm met else wordt het als volgt:

if (voorwaarde)
{
   doe iets;
}
else
{
   doe iets anders;
}

Als in de voorwaarde wordt gecontroleerd of een variabele een bepaalde waarde heeft, dan moet je een dubbele == gebruiken ! (zie de oefening hieronder)
Verder zijn er de vergelijkingssymbolen <, <= (kleiner of gelijk), >, >= (groter of gelijk), != (ongelijk aan).

Als je twee voorwaarden hebt, en er moet aan beide zijn voldaan dan zet je niet het woordje and er tussen maar && (dus twee ampersand-tekens)
Als je twee voorwaarden hebt, en er moet aan één van beide zijn voldaan dan zet je niet het woordje or er tussen maar || (dus twee zogenaamde pipe-symbolen)
Probeer het volgende maar eens.

Oefening 6

Maak m.b.v. Kladblok, of een andere tekstverwerker, onderstaand html-document (zie de rode tekst hieronder)

<HTML>
<HEAD>
<TITLE>Oefening 6 JavaScript </TITLE>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript" >
var vandaag = new Date();
var uur = vandaag.getHours();

if (uur<12) {document.write('Goedemorgen') };
if ( (uur>11) && (uur<18) ) {document.write('Goedemiddag') };
if (uur>17) {document.write('Goedenavond') };

var naam = window.prompt('Geef je naam', '');
if((naam == "") || (naam == null))
{
      naam = "Anoniem";
      document.write('<BR>Waarom vertik je het om een naam in te vullen? ' + naam);
}
else
{
      document.write('<BR>Hallo, '+ naam);
}

</SCRIPT>
</HEAD>
<BODY>
<BR>Bla bla bla
</BODY>
</HTML>

Sla het bestand op, en bekijk het m.b.v. een browser.

  16.1.9 Het FOR-statement

Het FOR-statement gebruik je als je iets een aantal keren wilt laten herhalen, en je weet precies hoevaak het herhaald moet worden.
Stel je voor dat je een tabel met de kwadraten van de getallen 1 tot en met 20 wilt hebben.
Dan gebruik je het FOR-statement als volgt:

for ( int x = 0; x < 20; x++)
{
        ...............
        ...............
}

Als je een variabele x hebt, dan krijg je het kwadraat van dat getal met de opdracht x * x (het sterretje staat voor keer)

Oefening 7

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

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

var x = 0;
var w = 0;

for ( x = 0; x < 20; x++)
{
    w = x * x;
    document.write("Het kwadraat van " + x + " = " + w + "<br>");
}

</SCRIPT>

</HEAD>
<BODY>

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



  16.1.10 Het While-statement

Het FOR-statement gebruik je als je iets een aantal keren wilt laten herhalen, en je weet precies hoevaak het herhaald moet worden.
Het WHILE-statement gebruik je als je iets een aantal keren wilt laten herhalen, maar je weet niet precies hoevaak het herhaald moet worden, je weet alleen onder welke voorwaarde het herhaald moet worden.
Dan gebruik je het WHILE-statement als volgt:

while (voorwaarde)
{
        ...............
        ...............
}

Stel je wilt dat iemand zijn naam invult in een prompt-box, maar je wilt beslist dat hij een naam van drie of meer letters invult, dan kun je dat m.b.v. de while-opdracht bereiken.
Het moet dan net zo lang herhaald worden tot de lengte van de naam minstens 3 tekens is.
Je kunt ook nog bijhouden hoevaak er een naam is ingevoerd, probeer het volgende maar eens:

Oefening 8

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

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

var aantal = 0;
var naam = ""

while (naam.length < 3)
   {
      naam = prompt("Voer een naam in, minstens 3 tekens","");
      aantal++;
   }
document.write("Hallo "+ naam+ "<BR>");
document.write("Je hebt  "+ aantal + " keer een naam ingevoerd" + "<BR>"); 

</SCRIPT>

</HEAD>
<BODY>

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

Toelichting:
naam.length bevat het aantal tekens van de naam.
Zolang dat aantal kleiner dan drie is wordt de opdracht herhaald.

De opdracht aantal++ heeft tot gevolg dat de variabele aantal met één wordt vermeerderd.
In plaats van aantal++ kun je ook de opdracht aantal = aantal + 1 geven.