JAVASCRIPT basisbegrippen

Javascript is één van de bekendste client-sided scripting talen. Andere client-sided scripting talen zijn Java, vbscript, JScript,... De scripting (programma's) worden op de client uitgevoerd (dus op de computer van de gebruiker). In dit deel van de cursus gaan we kennismaken met Javascript. Ik heb niet de pretentie om volledigheid noch snelheid na te streven.

In Frontpage krijg je hulp bij het schrijven van Javascript:

Merk de grote verscheidenheid van de talen op.

Soms wordt (nog voor oude browsers) de veiligheid ingebouwd met de commentaartekens van HTML.  Oude browsers konden de Javascript niet lezen en veroorzaakten foutmeldingen. Door de commentaartekens te schrijven, zagen ze de Javascript als commentaar. Ze voerden de scripting niet uit, maar zagen ze niet als fout. Wij veronderstellen dat de browsers onze script wel kunnen lezen...

Verwijzing naar een object

Eén van de eerste zaken die we moeten aanleren is de juiste verwijzing naar een object. Dit gebeurt van groot naar klein met een puntje tussen. Bijvoorbeeld: window is wat je ziet op je scherm, document is je webpagina, form1 is je formulier, geboortedatum is de naam van het veld op je formulier. Window.document.form1.geboortedatum verwijst dus naar het veld geboortedatum. Window.document.form1.geboortedatum.value = "1/1/2006" geeft een waarde aan dit veld.

window.status="Kijk eens hier" gaat niet verder dan het scherm, het komt niet op je pagina (dus document is hier niet nodig...) Aangezien window de standaard is om mee te beginnen mag dit weggelaten worden.

Eigenschappen en methoden

Het verschil tussen de twee? Een voorbeeldje zal het duidelijk maken:

 
 Deze eigenschap (Eng: propertie)zet de achtergrondkleur in het rood.

 

 
Deze methode (Eng: method) veroorzaakt deze verwittiging

Methodes hebben te maken met een actie. Eigenschappen zijn eerder statisch. Methodes worden met () geschreven, eigenschappen niet. Frontpage geeft ze een verschillend teken. clear en close zijn methodes, bgColor is een eigenschap.

Een veel gebruikte methode is open(). Onderstaande script opent Google in een nieuw venster.

Je kan zelfs bepalen hoe groot en waar het nieuwe venster moet komen. Zoek het eens op: typ in een zoekmachine de trefwoorden Javascript en open()...

Gebeurtenissen

Tot hier toe werd de Javascript uitgevoerd, telkens we naar de webpagina keken. Stel dat we enkel iets willen laten gebeuren als er op een knop wordt geklikt of als er over een afbeelding wordt gegaan met de muis. Daarvoor hebben we gebeurtenissen nodig (Eng: events).

Een overzichtje van enkele gebeurtenissen...

veroorzaakt bij het afsluiten van de pagina een berichtje. Merk op dat er afwisselend dubbele en enkele aanhalingstekens worden gebruikt.

Ga eens met de muis over onderstaande figuur...

confirm() is net zoals alert(), maar met de knoppen OK en Annuleren erbij. onMouseOver spreekt voor zich.

Voorspel zelf wat deze code doet met de onderstaande afbeelding.
 Merk op dat ik de figuur een naam gegeven heb, om naartoe te kunnen verwijzen.

Functies

Soms wilt men meerdere opdrachten uitvoeren bij een bepaalde gebeurtenis. Bijvoorbeeld bij het verzenden van gegevens van een formulier wil men controleren of alles wel ingevuld is. De gebeurtenis onSubmit moet dus veel verschillende  zaken controleren.

Hierboven de verwijzing naar de functie bij het 'verzenden' en hieronder de functie:

Merk de syntaxis op van de functie en de 'if' voorwaarde. Let ook op de == om een waarde te controleren. Beginners maken veel fouten tegen deze ==. Een enkele = wordt gebruikt om een waarde te geven, == om een waarde te controleren. Met een puntkomma kan men verschillende instructies na elkaar zetten. Return false zorgt er voor dat het verzenden niet doorgaat. Daarom moet ook bij de onSubmit er return worden voorgeschreven, normaal is dit niet nodig. Functies zet je best in het head gedeelte.

Controleer de werking met onderstaand formuliertje.

naam
e-mail
geboortedatum

We hebben nu enkel nog maar gecontroleerd of er 'iets' werd ingevuld. We zouden natuurlijk kunnen controleren of er een geldig e-mail adres en een realistische geboortedatum werd ingevuld. Ik verwijs hier naar de opdrachten waar je met veel hulp de klus kunt klaren.

Deze eerste kennismaking met Javascript en misschien met programmeren in het algemeen, komt waarschijnlijk overrompelend over. Nog toffer wordt het als je weet dat sommige browsers elk hun eigen Javascript interpretatie hebben... De code zal dus al naar gelang de browser al of niet werken... Wij veronderstellen dat er gewerkt wordt met de Internet Explorer. Er zijn bibliotheken vol met Javascript boeken en op het internet vind je alle mogelijke informatie. Ik moet het echter hier bij laten.... In een vervolgcursus komt scripting meer aan bod.