JavaScript

Inleiding Dit technische verslag gaat over JavaScript. Ik heb dit onderwerp gekozen, omdat het een gewaagd onderwerp is en omdat ik er zelf ook wat vanaf wil weten. Ook vond ik dit een goed idee, omdat dit onderwerp aansluit op de HTML-lessen die we op school hebben gehad. Ik heb zelf al enige voorkennis van JavaScript, maar ik hoop dat ik, door dit verslag te maken, er meer over zal leren. Ook hoop ik dat u het met plezier gaat lezen.

Wat Javascript precies is, en wat je ermee kan, zal ik in het tweede hoofdstuk uitleggen. JavaScript is een breed onderwerp, dus ik probeer het zo simpel mogelijk te houden, maar toch op een goede manier over te brengen waar het nou allemaal om gaat bij JavaScript en hoe je het gebruikt.

Tot slot wil ik nog even zeggen dat je het meest van JavaScript leert door veel uit te proberen en veel naar andere scripts te kijken, want vaak snap je het pas als je het effect van een script ziet.

JavaScript algemeen
Wat is JavaScript? JavaScript is net als HTML een scriptingtaal. Met JavaScript is het mogelijk om een website interactief te maken. Je kan bijvoorbeeld gegevens van de bezoeker opvragen en die vervolgens in de tekst op de website plaatsen. Ook is het mogelijk om gegevens over de browser van de bezoeker te verkrijgen en over het systeem waar de gebruiker mee werkt. En natuurlijk zijn er nog veel meer dingen die je met JavaScript kan doen. Tegenwoordig zit JavaScript in alle moderne browsers ingebouwd. JavaScript wordt voornamelijk tussen de html-tags geplaatst, maar het kunnen ook worden aangeroepen vanuit een apart bestand. Hier ga ik verderop in dit verslag dieper op in. Het verschil tussen JavaScript en Java Sommige mensen denken dat JavaScript een eenvoudige versie is van Java, maar dat is dus fout. Java is een programmeertaal en JavaScript is een scriptingtaal. Java is veel uitgebreider en ingewikkelder en is daardoor ook veel moeilijker aan te leren. Ook zijn JavaScripts veel minder uitgebreid, waardoor ze sneller te laden zijn. Een Java-applet laden daarentegen, kan soms veel tijd in beslag nemen. De geschiedenis van JavaScript

Wel heeft de geschiedenis van Java en JavaScript wat met elkaar te maken. JavaScript is ontstaan toen Java populair werd. De programmeertaal Java is ontwikkeld door ‘Sun Microsystems’. In het jaar 1995 werd Java erg populair, maar doordat de programmeertaal nogal ingewikkeld was, was er maar een kleine groep mensen die er goed mee konden programmeren. Het bedrijf Netscape merkte dat er behoefte was aan een taal met veel van de mogelijkheden van Java, maar die wel eenvoudig te leren was en die direct door de browser uitgevoerd kon worden. In de tweede helft van 1995 begonnen Netscape en Sun samen te werken, wat het begin van JavaScript werd. JavaScript heette eerst Mocha en later werd het Livescript genoemd. Toen de samenwerking tussen Netscape en Sun eenmaal een feit was, ontstond de uiteindelijke naam: JavaScript. Versies van JavaScript

Omdat JavaScript steeds verder wordt ontwikkeld, zijn er onlangs ook verschillende versies van verschenen en zullen er ongetwijfeld ook nog meer versies van uitkomen. Onderstaande tabel geeft de versies weer en met welke browser-versie zij compatibel zijn;

COMPATIBILITEIT
JavaScript MSIE Netscape Opera
Versie 1.0 3.x (±) 2.x 2.x
Versie 1.1 4.x 3.x 3.x
Versie 1.2 4.x (±) 4.x 4.x
Versie 1.3 5.x 4.5 4.x
Versie 1.5 5.x 6.x 5.x *Versie 1.4 bestaat niet *MSIE = MicroSoft Internet Explorer

De verschillen tussen deze versies zijn vaak schrijfwijzen en het op een andere manier van gebruiken van functies in JavaScript. Beginnen met JavaScript

Zoals ik al zij wordt bij JavaScript de code tussen de html code gezet. Om precies te zijn in de van een HTML- bestand of in de < body > van een HTML- bestand. Vaak is het handig om het script, of een deel ervan, in de < head > te zetten, omdat dat deel van een HTML- bestand als eerste word geladen. Vb:

< HTML > < HEAD >

< TITLE >De titel TITLE >

< SCRIPT LANGUAGE=\"JavaScript\" > < !-- Dit script staat in de // -- > < /SCRIPT >

< /HEAD > < BODY > Hier de inhoud van de pagina < SCRIPT LANGUAGE=\"JavaScript\" > < !-- Dit script staat in de < BODY > // -- > < /SCRIPT > Hier de inhoud van de pagina < /BODY > < /HTML >

Zoals je ziet wordt er dus eerst aangegeven dat er een stukje JavaScript komt door middel van de < script >- tags met de eigenschap language=”JavaScript” . Daarna wordt het begin aangegeven door middel van . Deze twee aanduidingen kunnen ook weggelaten worden, maar deze zorgen ervoor dat oudere browsers, die geen JavaScript ondersteunen, deze code negeren. Om aan te geven dat het script is geëindigd sluit je de tag, net als alle andere tags in HTML, af met < /script >. Linken naar een extern javascript

Naast het opnemen van het script in het HTML-bestand, kan er ook naar een extern JavaScript-bestand gelinkt worden. Dit is erg handig als je een script gebruikt dat op alle subpagina\'s van je website wordt gebruikt. Het script wordt dan in een tekstverwerker geschreven, maar dan zonder de begin -en eindcode en wordt opgeslagen als *.js. In het HTML bestand komt dan dit te staan:

< SCRIPT LANGUAGE=\"javascript\" SRC=\"bestandsnaam.js\" > < /SCRIPT >

Het nadeel van een extern script is dat er dan een keer extra verbinding met de server moet worden gemaakt. De < noscript > tag Als een browser JavaScript niet ondersteund (of als het is uitgezet) biedt < NOSCRIPT > < /NOSCRIPT > de mogelijkheid voor een alternatief. Alles wat tussen deze tags staat, wordt genegeerd door browsers met JavaScript, maar uitgevoerd door browsers zonder JavaScript. Tussen deze tags kan dus ook de hele broncode zonder JavaScript worden gezet. Vb:

< NOSCRIPT > Het spijt me, maar uw browser ondersteund geen JavaScript, of u heeft de functie uitgezet. Helaas kunt u deze website niet bekijken. < /NOSCRIPT > Tekst schrijven met JavaScript

Eigenlijk is alles wat met HTML kan, ook mogelijk met JavaScript. Door de code document.write(“hallo daar”) in te voeren tussen de < script > tags, geeft de browser gewoon alles tussen de “” weer. Dus als je de code,

< script language=”JavaScript” > document.write(“< i >< u >< a href=’http://www.a12.nl’ > ga naar de website van A12< /a >< /u >< /i >”) < /script >

invoert, geeft de browser het volgende weer; ga naar de website van A12
wat als link dient naar de website van A12. Maar als je hier alleen tekst invoert, wordt er alleen tekst weergegeven. En zo kunnen ook de overige HTML-tags tussen de “” gezet worden. Functies JavaScript geeft de mogelijkheid om van tevoren een zelf gedefinieerd programma te maken. Dit is erg handig als je bijvoorbeeld meerdere keren hetzelfde wilt laten gebeuren. Vb:

< script language=”JavaScript” > document.write(“hallo iedereen< br >”) document.write(“hallo iedereen< br >”) document.write(“hallo iedereen< br >”) document.write(“hallo iedereen< br >”) < /script >

Dit stukje JavaScript laat vier keer dezelfde tekst onder elkaar zien. Maar dit kunnen we vergemakkelijken door zelf een klein programmaatje te schrijven. Vb:

< script language=”JavaScript” > < !-- function hallo() { document.write(“hallo iedereen
”) }

hallo(); hallo(); hallo(); hallo(); //-- > < /script >

In dit script maken we de functie hallo() aan. Dat aanmaken gebeurd door het woord function, gevolgd door een zelf bedachte naam met () erachter. De inhoud van de functie staat tussen { }. Het aanroepen van een functie gebeurd door de naam ,bij dit script hallo(), tussen twee script tags te zetten. Het is ook niet noodzakelijk dat het aanroepen van de functie tussen dezelfde script tags staat als die waar de functie wordt aangemaakt. Zo kun je bijvoorbeeld de functie hallo() op drie verschillende plaatsen op je site aanroepen. De browser voert de functie uit op de opgegeven volgorde. Je zou dus ook onder document.write(“hallo iedereen< br >”), document.write(“< strong >welkom op mijn website< strong >”) kunnen schrijven. Nu is dit niet echt spectaculair of handig, maar dit laat het idee van een functie zien. Het wordt pas handig als je meer kennis hebt van JavaScript, waardoor je veel code kan opnemen in een functie. Events

Een ‘event’ is een gebeurtenis ten gevolge van een actie die de gebruiker uitvoert. Bijvoorbeeld bij het klikken op een link, verschijnt er een tweede scherm of een alertbox. De code achter zo’n event wordt een ‘event-handler’ genoemd Vb:

< html > < head > < titlel > klikken < /titel > < /head >

< body >

< input type=\"button\" name=\"klik\" value=\"klikken\" onClick=\"window.alert(\'je hebt op de knop geklikt\')\" > < /body > < /html >

In dit voorbeeld wordt er in de pagina een knop aangemaakt, met de naam “klik”. Op de knop staat ”klikken” en als je erop klikt komt er een alertbox met de tekst:”je hebt op de knop geklikt”. Je ziet hier dat een event niet tussen < script > tags hoeft te staan, maar bijvoorbeeld bij de eigenschappen van een object. Ook zie je dat de tekst die in de alertbox moet worden weergegeven tussen enkele aanhalingstekens staat. Hierdoor raakt de browser niet in de war met de aanhalingstekens die bij de event onClick staan.

Ook kunnen er meerdere events worden toegevoegd zoals bij dit voorbeeld: < html > < head > < titlel > klikken < /titel > < /head >

< body >

< input type=\"button\" name=\"klik\" value=\"klikken\" onClick=\"window.alert(\'je hebt op de knop geklikt\')\" onMouseOut=\"window.alert(\'je hebt de cursor van de knop af bewogen\')\" >

< /body > < /html >

Bij dit script verschijnt er een alertbox bij het klikken op de knop en als de gebruiker de cursor van de knop afhaalt verschijnt er nog een alertbox.

Zo kent JavaScript nog een aantal andere events, die ik in een tabel heb gezet;

onfocus gebruiker focust op een object
onblur gebruiker haalt focus weg
onselect gebruiker licht een object op
onchange gebruiker veranderd waarde van object. onsubmit gebruiker verzendt formulier
onmouseover gebruiker schuift cursor over object
onmouseout gebruiker schuift cursor weg van object
onload pagina of afbeelding stopt met laden
onunload gebruiker verlaat de pagina
onabort gebruiker stopt het laden
onerror browser komt een scriptfout tegen Variabelen Met JavaScript kan je ook variabelen gebruiken. Dit houdt in dat je een plaatsje kan reserveren voor een bepaalde waarde. Dit is handig, omdat je dan niet steeds dezelfde code hoeft in te typen, maar gewoon de naam van de variabel. Ook hoef je dan maar op één plek in het script wat te veranderen, in plaats van overal waar die waarde gebruikt wordt. Vb:

< html > < head > < titlel > < /titel > < /head > < body > < script language=\"JavaScript\" > var a = 10
var b = 2
var ab = a * b

window.alert(ab) < /script > < /body > < /html >

In dit script wordt eerst de letter a gereserveerd met de waarde 10. Vervolgens wordt b gereserveerd met de waarde 2. ab krijgt de waarde a maal b. In de alertbox komt de waarde van ab, dus a maal b, dus 20. Deze variabelen konden net zo goed appel en peer heten, of jan en fiets, maar dat is niet handig als de programmeur later terugkijkt bij het zoeken van een fout in zijn script. Hij weet dan niet meer om welke variabel het gaat. Het is dus handig om toepasselijke namen aan de variabelen toe te kennen.

Je kan nu ook combinaties maken van events en functies. Als je bijvoorbeeld een simpele rekenmachine wilt maken die alleen maar kan vermenigvuldigen, kan je dus variabelen gebruiken, een functie, en een event. Vb:

< html > < head > < title > < /titel > < script language=\"JavaScript\" > function rekenen() {

var getal1=window.prompt(\"geef een getal\",\"getal1\"); var getal2=window.prompt(\"geef een getal\",\"getal2\");

var vermenigvuldigd=getal1*getal2;

window.alert(vermenigvuldigd) ; } < /script > < /head > < body > < input type=\"button\" name=\"rekenen\" value=\"rekenen\" onClick=rekenen()> < /body > < /html >

Er is de functie rekenen. Daarin worden de variabelen ‘getal1’ en ‘getal2’ aangemaakt, met als inhoud de, door de gebruiker, opgegeven waarde. Deze worden vermenigvuldig en opgeslagen in de variabele ‘vermenigvuldigd’. In de alertbox komt de waarde van ‘vermenigvuldigd’. Deze functie wordt aangeroepen op het moment dat de gebruiker op de knop ‘rekenen’ klikt.

* window.prompt werkt ongeveer hetzelfde als window.alert. Je kan een titel meegeven en een waarde, die al in het invulveld staat. Als je maar een waarde invoert, dan herkent de browser dat als de titel.

*als je twee variabelen bij elkaar op wilt tellen, bijvoorbeeld a=1 en b=2 en je doet dat zoals het voorbeeld hierboven beschreven, dan krijg je als antwoord geen 3 maar 12. ze worden dus samengevoegd. Om dit te vermijden kan je in plaats van de regel: window.alert(a+b), window.alert(1*a + 1*b) invoeren. Je zegt dan:”tel 1 * de waarde van a op bij 1* de waarde van b.” het antwoord wordt dan wel 3, in plaats van 12

Windows-object
Het belangrijkste object is window. Daarvan ga ik de volgende behandelen: · window.status · window.alert() · window.confirm() · window.prompt() · window.open()

window.status
Hiermee kan je tekst in de statusbalk laten verschijnen dat is de onderste balk in het browservenster. Zo simpel mogelijk gaat dat er zo uitzien als in het volgende voorbeeld, maar later in dit verslag ga ik er iets dieper op in: < script language=\"JavaScript\" > window.status=”Dit is de tekst in de statusbalk” < /script >

window.alert
hiermee kan je een waarschuwingsvenster laten verschijnen, ook wel alert-box genoemd: < script language=\"JavaScript\" > window.alert(“Pas op, u komt nu op de beste website van heel Nederland!”) < /script >

window.confirm
Hiermee kan je om een bevestiging vragen, OK of Annuleren. Dit wordt pas efficiënt als je met voorwaarden gaat werken, maar dat komt later in dit verslag. < script language=\"JavaScript\" > window.window.confirm(\"Maak een keuze!\") < /script >

window.prompt
Hiermee kan je informatie opvragen van de gebruiker. < script language=\"JavaScript\" > window.prompt(“hoe is uw naam”,”Uw naam”) < /script >

window.open
Hiermee open je een nieuw venster. Dit komt ook later in het verslag terug. < script language=\"JavaScript\" > window.open(“de url”,”de naam”,”de eigenschappen” ) < /script > Hiërarchie JavaScript ‘ontleed’ een webpagina volgens een hiërarchie. Dat wil zeggen dat JavaScript elk element(plaatje, tekstvak, knop, achtergrondkleur) ziet als een object en deze objecten kunnen we ook met JavaScript benaderen en/of veranderen. Als voorbeeld neem ik een zelfgemaakte simpele website.

De broncode: < html > < head > < title>hiërarchie< /title > < /head >

< body > < a href=\"www.concordremarketing.nl\" >www.concordremarketing.nl&lt; /a >< br >< br >

< img src=\"C:\\Documents and Settings\\Administrator.EDE\\Mijn documenten\\stageverslag door ivano bubani\\probeersels van JavaScript\\plaatje.bmp\" alt=\"plaatje\" > < br >< br > < form name=”test” > < input type=\"button\" name=\"knop\" value=\"een knop\" >< br >< br > Naam:< input type=\"text\" name=\"tekst\" value=\"een tekstveld\" >< br >< br > Woonplaats:< input type=\"text\" name=\"tekst2\" value=\"een tekstveld2\" >< br >< br > < /form > < /body > < /html > de website: Er is een afbeelding en een formulier met een knop en twee invoervelden. JavaScript herkent de browser als window-object, die bestaat uit een aantal elementen waaronder de statusbalk en de adresbalk. In het window-object kan iets geladen zijn, zoals een website, wat JavaScript dan herkent als het document-object, evenals alle andere items op het scherm.

Om informatie uit zo’n object te halen, of om iets aan het object te wijzigen, moet je de exacte naam geven van het object. Om dit te weten moet je gewoon het rijtje af gaan. Dus zoiets als: document.form.element.value, of in het voorbeeld: document.test.tekst2.value om het tweede tekstvak te benaderen. Je haalt dan de inhoud van het tekstvak ‘tekst2’ van het formulier ‘test’ uit het geladen document. Location-object Ook is het mogelijk om met JavaScript objecten te benaderen buiten de website. Dit kan met het location-object. Als je bijvoorbeeld een link wilt maken naar de website van A12, doormiddel van het klikken op een plaatje, dan kan dat met de volgende code:

< html > < head >

< titlel > < /titel >

< /head >

< body >

< img src=\"plaatje.bmp\" alt=\"plaatje\" onClick=\"location.href=\'http://www.a12.nl\';\" >< br >< br >

< /body >

< /html >

Ook wordt het location-object gebruikt voor het maken van frames, maar dat leg ik uit in het volgende hoofdstuk. frames

Met HTML is het mogelijk om frames te maken. Hierbij is het mogelijk om meerdere pagina’s in het browser-venster te laden. JavaScript kan hier ook mee werken en doet dit volgens de hiërarchie die ik in het vorige hoofdstuk heb beschreven. Als je bijvoorbeeld een website met twee frames hebt, dan ziet de hiërarchie er als volgt uit:

In het browser-venster begeven zich twee frames; frame1.htm en frame2.htm. De browser wordt in zo’n geval de parent(ouder) genoemd en een frame de child(kind). Door de frames namen te geven, kun je ze informatie laten uitwisselen.

De gebruiker klikt op een link in het eerste frame, maar de pagina moet geladen worden in het tweede frame en niet in het eerste frame. Met JavaScript kun je dit oplossen. Wat betreft het communiceren tussen de verschillende frames kun je drie situaties onderscheiden:

parent window ---> child frame
child frame ---> parent window
child frame ---> andere child frame

Als je vanuit het browser-venster een onderliggend frame wilt benaderen dan kan je dit doen door middel van hun naam. vb:

frame2.document.write(\"Een boodschap van het browser venster.\");

je krijgt dan de volgende situatie:

Maar je kan ook vanuit een frame informatie naar het browser-venster sturen. Zo kan je bijvoorbeeld een andere pagina in het browser-venster laden. Dit is dus de pagina in het parent window. Je kan het parent window (of parent frame) benaderen vanaf de child frames via parent. Om een nieuw document te laden moet je een nieuwe URL toekennen aan location.href. Als je de frames wilt verwijderen dan moet je het location-object van het parent window wijzigen. In elk frame kan een pagina geladen worden, dus gebruik je ook een location-object per frame. Je laad een nieuwe pagina in het parent window met het volgende commando:

parent.location.href= \"www.a12.nl\";

Om van het ene frame een boodschap in het andere te zetten, moet dat via het parent window, want het ene frame ‘kent’ het andere frame eigenlijk niet. Dit doe je zo:

parent.frame2.document.write(\"dit is een boodschap van frame1.\");

je krijgt dan de volgende situatie:

vensters

Met JavaScript is het mogelijk om een of meerdere vensters te openen vanuit de huidige pagina. Zo worden bijvoorbeeld vaak de bekende PopUps gemaakt met JavaScript en kunnen plaatjes worden vergroot in een nieuw venster. Hoe dat werkt leg ik aan de hand van een voorbeeld uit. Vb:

< html > < head >

< titlel > < /titel >

< /head >

< body > < input type=\"button\" name=\"nieuw\" value=\"nieuw venster\" onClick=\"window.open()\" > < /body > < /html >

Wat hier is gemaakt is een knop met de naam “nieuw”, die de tekst “Nieuw venster” bevat. Als de gebruiker hier op klikt verschijnt er een leeg browser-venster. Dit is gedaan met de functie window.open(). Op zich is dit niks aan, want wat heb je aan zo’n venster? Maar er kunnen ook bepaalde eigenschappen aan het nieuwe venster worden toegevoegd. Het makkelijkste en meest overzichtelijk is om eerst een functie aan te maken:

< html > < head > < script language=\"JavaScript\" >

function NieuwVenster() { Nieuw= window.open(\"\", \"HetNieuweVenster\", \"width=450,height=300,status=no,toolbar=no,menubar=no\"); } < /script > < /head > < body >

< form > < input type=\"button\" name=”nieuw” value=\"nieuw venster\" onClick=\"NieuwVenster()\" > < /form > < /body > < /html >

Het nieuwe venster komt er dan zo uit te zien:

Je ziet hier dat de eigenschappen van het browservenster in een string worden vermeld : \"width=450,height=300,status=no,toolbar=no,menubar=no\". In de tabel hieronder zie je welke eigenschappen er aan toegevoegd kunnen worden en daaronder de opties:

directories yes|no
height Aantal pixels
location yes|no
menubar yes|no
resizable yes|no
scrollbars yes|no
status yes|no
toolbar yes|no
width Aantal pixels

Directories: wel of geen werkbalken. Heigth en width: de hoogte en de breedte van het venster
Location: wel of geen adresbalk
Menubar: wel of geen menubalk (bestand, bewerken, beeld enz.) Resizable: of het venster wel of niet te vergroten is
Scrollbars: wel of geen scrollbars
Status: wel of geen statusbar
Toolbar: wel of geen explorer-balk (zie browser)

In de regel (\"\", \"HetNieuweVenster\", \"width=450,height=300,status=no,toolbar=no,menubar=no\") zie je drie keer “”, met of zonder tekst ertussen. Dit noemen we argumenten. Bij het eerste argument staat niks. Hierin kan opgegeven worden wat er geopend moet worden. Als je die leeg houd dan komt er een blanco venster tevoorschijn. Maar we kunnen hier bijvoorbeeld ook zoiets van “hoi.html” neerzetten. Maar dan moet dit HTML-bestand wel aangemaakt zijn.

Het tweede argument dient voor de naam van het venster. Als je de naam kent van een bestaand venster dan kunnen we een nieuwe webpagina laden dmv volgende instructie:

< a href=\"cursus.html.htm\" target=\"HetNieuweVenster\" >nieuw< /a >

Onder target vermeldt je de naam van het venster waarin je de webpagina wilt tonen. Indien het venster nog niet bestaat dan zorgt de code ervoor dat een nieuw venster wordt aangemaakt. Sluiten

Met JavaScript kan je ook venster sluiten. Dat doe je met close(). Hoe dat moet laat ik met een voorbeeld zien.

< html > < head > < title >< /title > < script language=\"JavaScript\" >

function Sluiten() { close(); }

< /script > < /head > < body > < input type=”button” name=”sluit huidig venster” value=\"sluiten\" onClick=\"Sluiten()\" > < /body > < /html >

Door de functie Sluiten() te maken, die de code close() bevat en deze aan te roepen in een knop of iets dergelijks, wordt het huidige venster gesloten.

On-the-fly documenten maken

On-the-fly documenten maken houdt in dat het document wordt aangemaakt op het moment dat het wordt geopend. Dit gebeurt d.m.v JavaScript. Het is ook mogelijk om andere documenten aan te maken d.m.v on-the-fly, maar ik houd het bij het aanmaken van HTML-documenten. Eerst geef ik een voorbeeld, waarbij ik de broncode uitleg.

< html > < head > < title >On The Fly< /title > < script language=\"JavaScript\" >

function NieuwVenster() { NewWin= open(\"\", \"OnTheFly\",\"width=600,height=600,status=no,toolbar=no,menubar=no,scrollbars=yes\");

// openen van het nieuwe document NewWin.document.open(); // maken van het nieuwe document NewWin.document.write(\"< html >< head >< title >On the fly\"); NewWin.document.write(\"< /title >< /head >< body >\"); NewWin.document.write(\"< center >< font size=+3 >\"); NewWin.document.write(\"Welkom in het nieuwe venster\"); NewWin.document.write(\"< hr color=\'gold\'>< br >dit venster
< hr color=\'gold\' >\"); NewWin.document.write(\"is nou een voorbeeld van on-the-fly\"); NewWin.document.write(\"< /font>< /center >\"); NewWin.document.write(\"< /body >< /html >\");

// sluiten van het document NewWin.document.close(); } < /script > < /head > < body > < form > < input type=button value=\"ON THE FLY\" onClick=\"NieuwVenster()\" > < /form > < /body > < /html >

Er is een functie, NieuwVenster, aangemaakt. Deze functie bevat een variabel, NewWin, die een document opent met de eigenschappen die zijn meegegeven. Vervolgens vertelt deze funcie aan de browser dat het document geopend wordt. NewWin.document.open();. D.m.v de daaropvolgende regels, wordt er bepaalt wat er in dat venster staat en dat gebeurt met NewWin.document.write(\"informatie\"); Met NewWin.document.close(); wordt het einde van het document aangegeven. Als hier stond; NewWin.close();, dan zou het venster weer gesloten worden, maar het woord document geeft aan dat het het einde van het document is. De knop roept de functie aan. Je ziet dat er af en toe twee slashes staan, //, deze noemen we commentaar-tags. Hier kan de programmeur wat informatie kwijt over het stukje script wat daar staat. Als hij/zij/iemand anders dan later terugkijkt dan begrijpt diegene beter wat er geprogrammeerd is en hoeft hij dat niet zelf nog eens uit te zoek. Het is dus een kwestie van orde, wat bij vrijwel elke programmeertaal wordt gewaardeerd. Het is niet zo dat het moet, maar het is een soort gouden regel. De twee slashes kunnen ook vervangen worden door /* om het begin van het commentaar aan te geven en */ voor het einde

Het is ook mogelijk om een document on-the-fly te maken in een ander frame. Het werkt eigenlijk hetzelfde, maar in plaats van:

NewWin.document.open();

NewWin.document.write(“HTML-code”)

NewWin.document.close()

Komt er bijvoorbeeld:

parent.frame2.document.open();

parent.frame2.document.write(\"HTML-code\");

parent.frame2.document.close();

te staan. Hier zie je weer dat de JavaScript hiërarchie een zeer grote rol speelt. De statusbalk

De statusbalk is de balk die zich helemaal onderin op het browservenster begeeft. Hierin wordt vaak informatie weergegeven over waar de browser mee bezig is. Met JavaScript is het mogelijk om een eigen tekst hierin te laten verschijnen. Dat kan door een tekststring toe te kennen aan window.status(). Hoe dat werkt leg ik weer uit aan de hand van een voorbeeld.

< html > < head > < script language=\"JavaScript\" > function statusbalk(txt) { window.status = txt; } < /script > < /head > < body >

< form > < input type=\"button\" name=\"schrijf\" value=\"schrijf tekst naar de statusbalk\" onClick=\"statusbalk(\'Dit is tekst in de statusbalk\');\" > < input type=\"button\" name=\"wissen\" value=\"Wissen\" onClick=\"statusbalk(\'\');\" > < /form >

< /body > < /html >

Er zijn twee knoppen aangemaakt die allebei de functie statusbalk() oproepen. Maar toch hebben ze een ander resultaat. Ik geef, bij de knop ‘schrijf’, de tekst “dit is de tekst in de statusbalk” mee aan de functie statusbalk(). Ik heb deze functie als volgt gedefinieerd;

function statusbalk(txt) { window.status = txt; }

Ik gebruik hier txt binnen de haken van de functie. Dit betekent dat ik de string die ik doorgeef aan de functie geplaatst wordt in de variabele txt. Txt had net zo goed aap of fietsbel kunnen heten, maar dan kom ik weer terug op de ‘gouden regel’ uit het vorige hoofdstuk. Het is gewoon een soort gewoonte. Het doorgeven van variabelen aan functies is wat het gebruik van functies zo handig en nuttig maakt. Het is ook mogelijk om meerdere waarden door te geven aan een functie ,je hoeft dan alleen een komma te plaatsen tussen de verschillende waarden die je wilt doorgeven aan de functie. De string van txt wordt getoond in de statusbalk dmv window.status = txt. Het uitwissen van de tekst in de statusbalk gebeurt dmv een lege string toe te kennen aan window.status. Dus à onClick=”statusbalk(‘’):”

De timer Met JavaScript is het mogelijk om gebeurtenissen te laten voordoen nadat er een bepaalde tijd is verstreken. Bijvoorbeeld het veranderen van de achtergrondkleur, na elke 5 minuten. Of een alertbox die aangeeft hoe lang de gebruiker zich op de website bevindt, enz. Zo’n scriptje kan er ongeveer zo uitzien.

< script language=\"JavaScript\" >

function timer() { setTimeout(\"alert(\'U bevindt zich nu 2 minuten op mijn website!\')\", 120000); } < /script >

< body onload=\"timer()\" > < /body >

setTimeout() behoort tot het window-object. Het zorgt voor een time-out, Dat er even niks gebeurt. Het eerste argument is hetgeen wat je wilt dat er gebeurt, nadat er een bepaalde tijd verstreken is. In dit geval is het argument alert(\'U bevindt zich nu twee minuten op mijn website!\')\". Het tweede argument zegt de browser na hoeveel tijd de code uitgevoerd moet worden. Je moet hier de tijd aangeven in milliseconden (1000 milliseconden = 1 seconden). Dus in het voorbeeld is het 120000 milliseconden, dat is 120 seconden, dus twee minuten. Ook is het mogelijk om meerdere acties uit te voeren, nadat de tijd om is. Dat gebeurt zo:

setTimeout(\"alert(\'U bevindt zich nu 2 minuten op mijn website!\'); document.write(‘twee minuten zijn voorbij’)\", 120000);

De verschillende gevolgen van de timer moeten gescheiden worden door middel van ;, wat overigens altijd wordt gebruikt als er meerdere opdrachten worden gegeven, ook in functies. Je ziet ook dat ik gebruik heb gemaakt van de event onLoad. De timer moet dus starten bij het laden van de document. Maar je kan natuurlijk ook de timer in werking stellen bij het klikken op een knop, of bij het veranderen van een tekst enz.

Door middel van de timer en de statusbalk te combineren kan je dus ook zorgen voor een bewegende tekst in de statusbalk. Hoe dit moet zet ik niet in mijn verslag, want dat gaat te diep in op het onderwerp JavaScript, maar ik geef wel een voorbeeld van een simpele ‘bewegende’ tekst. Vb:

< script language=\"JavaScript\" >

function bewegend() {

setTimeout(\"window.status=\'Welkom bezoeker!\'\", 1000); setTimeout(\"window.status=\'dit\'\", 4000); setTimeout(\"window.status=\'dit is\'\", 5000); setTimeout(\"window.status=\'dit is nu\'\", 6000); setTimeout(\"window.status=\'dit is nu mijn\'\", 7000); setTimeout(\"window.status=\'dit is nu mijn website\'\", 8000);

} < /script >

< body onLoad=”bewegend()” >

In dit script zie je dat bij het laden van de pagina, na de eerste seconde, de tekst “welkom bezoeker” in de statusbalk verschijnt. Vanaf de vierde seconde verschijnt er woord voor woord de zin “Dit is nu mijn website”, die vervolgens blijft staan. Dit gebeurt allemaal door een timer op te nemen in de website.

Voorwaarden
Als er bijvoorbeeld een prompt-box verschijnt:

dan krijgt de gebruiker de mogelijkheid om een waarde in te voeren. Maar wat kan er met de ingevoerde waarde gebeuren? Dit is met JavaScript te bepalen. De programmeur moet voorwaarden geven aan de prompt-box. Dit kan met het IF-Else statement. Zoals de naam al zegt, er ontstaat een structuur van als, anders. Dit is het best uit te leggen met een voorbeeld. Stel men drukt op een knop en er verschijnt een prompt-box zoals hieronder;

De gebruiker voert zijn/haar lengte in en het doel van de programmeur is om het te vergelijken met zijn/haar lengte. Er zijn dus drie opties: 1. de gebruiker is even lang
2. de gebruiker is langer
3. de gebruiker is minder lang

Er moeten dus drie voorwaarden in het script komen. Het script doorloopt de volgende vragen en ik ben even de programmeur: Is je lengte korter dan mijn lengte? Zo ja, er verschijnt een alertbox met de tekst:”je bent korter”. Zo nee, ga naar de volgende vraag. Is je lengte groter dan mijn lengte? Zo ja, er verschijnt een alertbox met de tekst:”je bent groter”. Zo nee, ga naar de volgende vraag. Is je lengte even lang? Zo ja, er verschijnt een alertbox met de tekst:”je bent even lang”. Nee kan niet meer, want alle mogelijkheden zijn al geweest.

Nu zo kort mogelijk en in het engels. (Ik ben ongeveer 1.85)

Wat is je lengte? If lengte < 1.85 window.alert(“je bent kleiner”) Else if lengte > 1.85 window.alert(“je bent groter”) Else if lengte = 1.85 window.alert(“je bent even lang”)

Er gebeurt dus dit: De gebruiker voert een variabele in. Deze wordt getest of hij groter, kleiner of gelijk is aan de opgegeven waarde. Is het antwoord nee, dan loopt het script door. Is het antwoordt ja, dan stopt het script en voert verdere instructies uit.

Nu snap je de structuur en gaan we het vertalen in JavaScript. Je declareert een waarde. Test deze aan de opgegeven waarde en wacht tot er een uitkomst is. Waar een stelling aan moet voldoen zet je tussen haakjes en wat er moet gebeuren plaats je tussen {}. Je krijgt dus dit script:

< script language=\"Javascript\" >

function lengte () {

// variabel maken om te bepalen hoe lang de gebruiker is à lengteG // en een variabel maken om te bepalen hoe lang ik ben, in cm’s à lengteP

lengteG = window.prompt(\"hoe lang bent u?\",\"aantal cm\") lengteP = 185

if ( lengteG < lengteP )

{ window.alert(\"je bent kleiner\") }

else if (lengteG==lengteP)

{ window.alert(\"je bent even lang\") }

else { window.alert(\"Je bent groter\") } } < /script >

< input type=”button” name=”lengtevergelijker” value=”vergelijk uw lengte met die van mij” onClick=”lengte()” >

Er is dus een functie, lengte(), die een prompt laat verschijnen. Die vergelijkt twee waarden met elkaar en geeft een uitkomst. De knop ‘lengtevergelijker’ activeert de functie.

Maar nu is er een probleem. Als de gebruiker niks invoert en hij/zij klikt op OK, dan gebeurt er niks. En dat is niet de bedoeling. Dit is heel makkelijk op te lossen door de volgende regel toe te voegen: else if (lengteG = \"null\") {lengte()}. De browser herkent geen waarde namelijk als ‘null’. Dus als dit nu zou gebeuren, dan wordt de functie gewoon herhaald. Date-object Vaak zie je op websites de datum van vandaag staan. Erg belangrijk is dat niet, maar het kleed de website wel aan. Nou is het niet zo dat de webmaster elke dag opnieuw de datum invoert, maar dit is mogelijk met JavaScript. JavaScript geeft de mogelijkheid om de precieze datum en tijd op te vragen. Zo kan je bijvoorbeeld ook uitrekenen hoeveel uur er in een jaar zit, hoe lang het nog duurt voordat het jaar is afgelopen, of op welke dag Sinterklaas valt. Hoe dit in zijn werk gaat, leg ik in dit hoofdstuk uit.

** we gaan er bij dit hoofdstuk vanuit dat het ‘dinsdag 18 maart 2003’ is om 12:00 uur ‘s middags, om verwarring te voorkomen.

Stel, je wilt de datum op je website hebben, dan kan je de volgende code invoeren:

< script language=\"Javascript\" >

datum=new Date(); document.write(datum)

< /script >

Nu komt er op de website dit te staan:

Tue Mar 18 11:30:15 UTC+0100 2003

Nu geef je dus de hele datum en tijd weer plus de tijdzone. Natuurlijk is het mogelijk om delen er van weer te geven. Dit doe je door achter \"datum\" te vertellen wat je wilt zien. Vb:

< script language=\"Javascript\" > < !-- datum=new Date(); document.write(datum.getDay()) //-- > < /script >

Nu vraag je dus welke dag het is. Maar in plaats van dinsdag staat er een 2. Dit getal staat voor dinsdag. Hoe kan dit? De hele datum en tijd wordt gegeven en gewijzigd in getallen. Zondag is 0 en zaterdag is 6. Je moeten dus een script maken die vertelt welk getal bij welke dag hoort. Dit kun je doen door voorwaarden te stellen, zoals in het vorige hoofdstuk. Vb:

< SCRIPT LANGUAGE=\"Javascript\" > datum = new Date();

function dag() { var dag = \"\"; if ( datum.getDay() == 0 ) dag = \"zondag\" ; else if ( datum.getDay() == 1 ) dag = \"maandag\" ; else if ( datum.getDay() == 2 ) dag = \"dinsdag\" ; else if ( datum.getDay() == 3 ) dag = \"woensdag\" ; else if ( datum.getDay() == 4 ) dag = \"donderdag\" ; else if ( datum.getDay() == 5 ) dag = \"vrijdag\" ; else
dag = \"zaterdag\" ; return dag; }

datum = new Date(); document.write(dag())

< /SCRIPT > ** == staat voor \"precies gelijk aan\"

Als je document.write(datum.getDay()) vervangt door document.write(datum.getDate()) dan krijg je de datum. Vandaag is het dus de 18e. en als je deze twee regels onder elkaar zet maakt dat dinsdag 18.

Je wilt natuurlijk ook de maand weten. Dat is niet zo moeilijk gewoon hetzelfde als de dag maar dan in plaats van datum.getDay, datum.getMonth(). Alleen brengt het ook hetzelfde probleem met zich mee, het is namelijk een getal. Ook hier is januari 0 en december 11. Dit is op dezelfde manier op te lossen als bij \"dag\". Je wilt aangeven dat het de 3e maand is, maar de browser geeft een 2 aan. Je komt er dus 1 tekort. Dus tel je er een bij op. Vb:

< script language=\"Javascript\" > datum=new Date(); document.write(1 + datum.getMonth()) < /script >

Voor het jaartal geldt hetzelfde: document.write( datum.getYear())

Array-object

Een array is een reeks. JavaScript werkt ook met reeksen. Als je bijvoorbeeld een reeks gegevens hebt, die iets met elkaar te maken hebben, bijvoorbeeld fruitsoorten of kommagetallen of namen of iets dergelijks, dan kan je die gegevens bundelen in een array. Je zou bijvoorbeeld ook een heleboel variabelen kunnen maken, maar dat is erg inefficiënt.

Arrays kan je dus zien als een aantal gebundelde variabelen. Je kan deze variabelen benaderen door hun naam en een nummer. De eerste variabel in de array krijgt het cijfer 0, de tweede 1 de derde 2 enz.

Je kan een array maken op de volgende manier:

< script language=\"JavaScript\" >

kleding= new Array() < /script >

Maar nu is de array nog leeg. Nu moet je alleen nog waarden toevoegen aan die array, dat kan op twee manieren:

< script language=\"JavaScript\" > kleding= new Array()

kleding[0]= \"trui\"; kleding[1]= \"broek\"; kleding[2]= \"hemd\"; < /script >

of

< script language=\"JavaScript\" >

kleding= new Array(\"broek\",\"trui\",\"schoen\",\"hemd\") ; < /script >

Nu je een array kan maken, moet je er ook nog iets mee kunnen. Als je bijvoorbeeld wilt dat de arrays op het scherm worden getoond, kan dat zo:

< script language=\"JavaScript\" > kleding= new Array(\"broek\",\"trui\",\"schoen\",\"hemd\") ;

for (var i= 0; i< 3; i++) { document.write(kleding[i] + \"
\"); } < /script >

Wat hier staat is een loop(herhaling): variabel i is 0, als i kleiner dan 3 is, wordt i met 1 verhoogd. Dus als i, 3 of hoger is gebeurt er niks. Wat tussen {} wordt steeds uitgevoerd, totdat i 3 is.

document.write(kleding[i] + \"< br >\")à dit is dus het stukje wat wordt herhaald, maar achter kleding staat ook een i, dus doordat die steeds wordt verhoogd met 1, komt elke waarde uit de array aan de beurt en zo krijg je dat elk kledingstuk wordt getoond op het scherm.

Als je dus i<3 zou veranderen in i<1 zou alleen het eerste item, dus alleen “broek”, worden getoond op het scherm. Maar als we de lijst met waarden omgekeerd willen hebben wordt het script dus zo:

for (var i= 3; i> -1; i--) { document.write(kleding[i] + \"< br >\");

De loop begint nu met i=3 en i wordt steeds met 1 verminderd. Dus de laatste waarde van de array kleding komt nu als eerst en de eerste als laatst. Zou het nou zo zijn dat de array 100 waarden zou hebben, dan is het dus ook mogelijk om alleen de eerste 10 of alleen de laatste 10 waarden te laten zien op het scherm.

Tot slot Tot slot zijn er nog een aantal mogelijkheden met JavaScript die wel erg belangrijk zijn om te weten, maar die ik niet goed in een hoofdstuk kon plaatsen, doordat er dan teveel verwarring zou kunnen ontstaan. Daar wil ik dit hoofdstuk aan besteden.

In het hoofdstuk “beginnen met JavaScript”, heb ik uitgelegd hoe je tekst kan schrijven d.m.v document.write(“tekst”). Ook kan je daar lezen dat je met behulp van html-tags die tekst kan aankleden.(< i >,< b >< u >< strong > enz.) Maar hier heeft JavaScript ook zijn eigen codes voor. Die heb ik hieronder gezet. Eerst laat ik zien welke mogelijkheden er zijn en daarna hoe je die gebruikt. Teksteigenschappen toevoegen Vet .bold() Cursief .italic() Grote letters .big() kleinere .small() tekst doorhalen .strike() Subschrift .sub() superschrift .super() gewone letters .toLowerCase() HOOFDLETTERS .toUpperCase() de grootte .fontsize(\"?\") ? = 1 t/m 7
de kleur .fontcolor(\"?\") ? = kleurnaam of kleurcode.

Je hebt dus geleerd dat je tekst kan schrijven met de opdracht document.write(“tekst”). Wil je deze tekst dus aankleden dan doe je dat d.m.v een eigenschap erachter te plakken. Vb:

document.write(\"alles goed\".bold()) document.write(\"goedemorgen\".fontsize(\"2\"))

Maar bijvoorbeeld ook meerdere eigenschappen. Vb:

document.write(\"  doei doei\".strike().bold().small().sub()) document eigenschappen toevoegen Met HTML is het mogelijk om de achtergrondkleur, de tekstkleur en de kleuren van een link te bepalen. Met JavaScript kan dit ook en dat leg ik hier uit. Hieronder staat een klein schema met de mogelijkheden en de schrijfwijze en daaronder een voorbeeld.

document.fgColor Dit is de kleur die je de tekst geeft
document.bgColor Dit is de achtergrondkleur, bg = BackGround
document.linkColor De kleur van een link
document.vlinkColor De kleur van een eerder bezochte link (visited-link) document.alinkColor En de actieve link-kleur(Active-link)

dit werkt als volgt:

< script language=\"JavaScript\" >

document.bgColor=\"red\"; document.fgColor=\"#061154\" ; document.linkColor=\"darkblue\";

< /script >

JavaScript gaat altijd voor HTML. Als de HTML-code zegt dat de achtergrondkleur oranje is, maar JavaScript zegt dat deze blauw is, dan wordt hij blauw. Of de JavaScript code in de body of in de head staat maakt niet uit.

Samenvatting

JavaScript is een scriptingtaal waarvan de code in het HTML-document wordt opgenomen. JavaScript maakt het mogelijk om websites interactief te maken. Het is ontworpen naar aanleiding van de wensen van programmeurs, omdat de programmeertaal Java te moeilijk was en niet meteen in een browser te laden was.

JavaScript wordt tussen de < head > of tussen de < body > van een HTML-document geplaatst. Omdat niet alle browsers JavaScript ondersteunen is het mogelijk om de code af te schermen voor deze browsers door bijv. de < NOSCRIPT >. Ook is het mogelijk om een extern JavaScript aan te roepen, dit script moet dan opgeslagen zijn met de bestandsextensie *.js.

JavaScript maakt gebruik van een hiërarchie. Hierdoor zijn alle elementen in de website te benaderen. Javascript maakt gebruik van een aantal objecten zoals; het windows-object, het array-object en het date-object. Deze maken het onder andere mogelijk om informatie op te roepen of mee te geven uit/aan bepaalde elementen.

JavaScript maakt gebruik van functies. Dit zijn een aantal opdrachtregels achter elkaar die samen in een keer uit te voeren zijn door de functie via zijn naam aan te roepen. Je krijgt dan als het ware een klein programmaatje. JavaScript beschikt ook over een aantal events. Dit zijn gebeurtenissen die worden uitgevoerd naar aanleiding van een actie van de gebruiker. Bijvoorbeeld na het klikken op een knop, of bij het laden van een pagina. Deze events en functies kunnen gepaard gaan met variabelen, dit zijn gereserveerd plekjes waar een naam aan toegekend is. Hierdoor is het mogelijk om veranderingen maar op een plek aan te brengen, wat gevolgen heeft voor het hele document.

Verder kan JavaScript de tijd en datum opvragen en aan de hand hiervan bepaalde informatie aan de gebruiker geven. Timers in het script opnemen, zorgt ervoor dat de gebruiker herinnerd kan worden, of dat er mooie effecten plaats kunnen vinden in de website zoals bijvoorbeeld het veranderen van de achtergrondkleur na elke X minuten. Door middel van het If-Else statement, kan het script voorwaarden stellen aan gegevens, of reageren op ingevoerde waarden door de gebruiker. Dit maakt JavaScript erg sterk en multifunctioneel.

JavaScript kan dus alles wat HTML kan plus nog veel meer en daarom is het de moeite waard om je erin te verdiepen.

Bronvermelding · http://www.webcursus.tmfweb.nl/ · http://www.xs4all.nl/~werksman/webmees/js_intro.html · http://websitehulp.tripod.com/index.html · http://www.javascript.nl · http://www.khlim.be/~cdaniels/cursusJavascript.html · http://www.pcaktief.be/inhoud.htm · http://www.sitemasters.be · bestaande scripts bekijken