Objecten, variabelen en functies

Leerdoelen

Locatie

Javascript op een pagina zal direct worden uitgevoerd, dus zodra de pagina gelezen word door de browser. Dit is handig voor de lesopdrachten, maar wil je natuurlijk niet altijd. Soms wil je het script uitvoeren terwijl de pagina laadt, en soms wanneer een gebruiker een actie onderneemt.

In de head en onderaan de body sectie
Scripts die pas uitgevoerd moeten worden wanneer ze worden aangeroepen, of wanneer een event heeft plaats gevonden, behandelen we later in de module.
Scripts die uitgevoerd worden als de pagina laad kunnen zowel in de head sectie als onder in de body sectie van de XHTML. Onderin omdat je dan zeker bent dat de totale html geladen is voordat het javascript ermee gaat werken.
In deze les genereert het script de inhoud van de pagina (voor les opdrachten).
Je zou op deze manieren ongelimiteerd scripts in je XHTML bestand kunnen plaatsen.

	<html>
		<head>
			<script type="text/javascript">  ....  </script>
		</head>
		<body>
		
			<script type="text/javascript">  ....  </script>
		</body>

Extern js bestand
Net als bij CSS is het bij javascript veel beter en overzichtelijker als je de het script opslaat in een apart bestand. Net als bij CSS kun je zo een bepaald script op verschillende pagina's gebruiken. Je schrijft het script in een apart bestand en slaat het op met een .js extensie.
Nu kan je het script zovaak als je wilt aanroepen zonder dat je het script op iedere pagina opnieuw hoeft te schrijven.

Let op: Het externe .js bestand bevat geen <script> tag!

Om het externe script te koppelen met je XHTML gebruik je het "src" attribuut van de <script> tag. 

	<html>
		<head>
			<script type="text/javascript" src="xxx.js"></script>
		</head>
		<body>
		</body>
	</html>

Denk eraan dat je de script tag plaatst daar waar je normaliter het hele javascript zou schrijven (binnen de head).

Test

We zullen ons houden aan de goede traditie die zegt dat ons eerste programmaatje in een nieuwe programmeertaal de woorden "Hello, world" op het scherm zet. In JavaScript kan dat met de volgende opdracht: 

	document.write("Hello, world")

(In plaats van dubbele aanhalingstekens " mag je ook enkele aanhalingstekens ' gebruiken.) Zoals we later nog zullen zien, maken we hier gebruik van het ingebouwde "object" document, en gebruiken daarvan de "methode" write.

Deze javascript objecten met de daarbij horende methodes kun je vinden op diverse online JavaScript API references. API staat voor Application Programming Interface. Een API definieert de toegang tot de functionaliteit die er achter schuil gaat. Je hebt geen kennis van de details van de functionaliteit of implementatie, maar weet dankzij de API wel hoe deze kan worden aangesproken. Het is dus eigenlijk een compleet overzicht van alle mogelijke objecten, properties en methodes.
gotapi
delicious zoek resultaat
w3schools
javascriptkit

Oudere browsers zullen de script-tags weliswaar negeren, maar de tekst ertussen behandelen als gewone tekst. In ons geval komt er dus document.write("Hello, world") op het scherm te staan.
Om dit te voorkomen, gebruiken we het volgende. We zetten onze JavaScript-regel tussen de tekens die HTML gebruikt voor het aangeven van commentaar, dat wil zeggen: <!-- vóór het script en --> erachter.
Voor XHTML strict is dit nog niet genoeg om het script te valideren, hiervoor zul je de inhoud van het script moeten aangeven als CDATA. Al met al ziet ons script er nu als volgt uit: 

	<script type="text/javascript">
		<!-- <![CDATA[ Afschermen voor oude browsers
		document.write("Hello, world")
		// ]]> Einde afscherming -->
	</script>

Tenslotte zetten we nog // voor de tekens waarmee je in HTML het commentaar afsluit. (JavaScript behandelt alles wat op een regel geplaatst is na de tekens // als commentaar. Is je commentaar meer dan een regel lang, dan zet je de tekens /* ervoor en */ erachter.)

Lees blz.14 t/m 17

Data typen

Ons eerste script hierboven zet een vaste tekst op het scherm. We noemen "Hello, world" daarom een constante, en wel: een constante van het type string. Naast strings kent JavaScript nòg enkele datatypen: getallen en Booleans (of logische waarden).

Strings zijn stukjes tekst tussen enkele of dubbele aanhalingstekens; 'Hello, world' mag dus ook (maar "Hello, world' of 'Hello, world" niet).

Numbers zijn 12345 en 3.14159 (merk op dat JavaScript een punt gebruikt waar wij een komma schrijven). In JavaScript bestaan geen aparte gegevenstypes voor gehele getallen (in andere talen integer genoemd) en reële getallen (of reals).

Booleans tenslotte hebben maar twee mogelijkheden: true en false.

Variabelen

In veel gevallen zou het handig zijn als je "iets" had waaraan je een waarde kon toekennen die later eventueel zou kunnen veranderen. Dat "iets" noemen we een variabele. De naam van een variabele moet beginnen met een letter, met het dollarteken ("$") of met het underscore-teken ("_"); op vervolgposities mogen ook cijfers staan. Een subtiele, maar belangrijke bron van fouten is, dat JavaScript een onderscheid maakt tussen hoofdletters en kleine letters; test is dus niet hetzelfde als test of TEST! Daarnaast geldt, dat de naam van een variabele niet gelijk mag zijn aan een van de zogeheten gereserveerde woorden van JavaScript, bijvoorbeeld het keyword "if" dat we later in de module tegen zullen komen. (zie Aptana voor de gereserveerde worden lijst)

Let op: Houd als richtlijn aan dat je voor de naamgeving van een variabele altijd kleine letters (undercase) gebruikt!

De namen van variabelen kunnen een willekeurige lengte hebben, dus niets houdt ons tegen om steeds een betekenisvolle naam te kiezen: als we na een paar maanden ons script herlezen, is minimumleeftijd = 18 heel wat duidelijker dan m = 18!

JavaScript maakt gebruik van "loose typing" hetgeen betekent dat we het datatype van een variabele niet expliciet op hoeven te geven; het gegevenstype kan zelfs veranderen in de loop van het programma. Met de opdracht jaartal = 1998 kennen we een datatype Number toe aan de variabele jaartal. Verderop in het programma zouden we echter mogen schrijven: jaartal = "Sterfjaar Frank Sinatra". Waar dat nodig is, zorgt JavaScript automatisch voor omzetting naar het juiste datatype.

We hoeven variabelen ook niet expliciet te "declareren" of op te geven zoals dat in bijvoorbeeld ActionScript wel moet; een variabele "bestaat" zodra we er een waarde aan hebben toegekend. Het is echter wel mogelijk om een variabele te declareren met behulp van het gereserveerde woord "var". We kunnen bijvoorbeeld schrijven:

	var minimumleeftijd = 18;

Ook mogelijk is: var minimumleeftijd;, dus zonder dat we direct een waarde aan de variabele toekennen. De variabele bestaat in dat geval wel, maar is niet gedefinieerd, en mag bijvoorbeeld niet gebruikt worden in zogeheten expressies (die zodadelijk aan de orde komen), anders krijgen we een foutmelding.

Test

We kunnen ons voorbeeldscript nu herschrijven met behulp van een variabele. Eerst kennen we een waarde toe aan de variabele groet, en vervolgens tonen we de waarde van die variabele op het scherm:

	var groet = "Hello, world"; document.write(groet);

Merk op dat er in de tweede regel geen aanhalingstekens om groet staan: het gaat hier immers om de naam van onze variabele, en niet om een String. Zouden we wèl aanhalingstekens gebruiken, dan zou in plaats van de waarde van variabele groet (de woorden Hello, world) het woord groet op het scherm worden gezet!
De twee JavaScript opdrachten uit het voorbeeld staan op een regel, een gebruik dat de leesbaarheid van programma's meestal niet ten goede komt. We mogen de opdrachten ook onder elkaar schrijven. Let op: Vergeet niet iedere opdracht regel expliciet af te sluiten met een puntkomma, dus:

	var groet = "Hello, world";
	document.write(groet);

Lees blz.18 t/m 22

Expressies

We kunnen variabelen gebruiken om er expressies (of "uitdrukkingen") mee te maken. Het datatype van een expressie hangt af van de datatypes van de variabelen die we gebruiken.

Als we variabelen van het type Number gebruiken in een expressie, zal die expressie zelf ook van het type Number zijn. Als we een Numbervariabele creëren door middel van: leeftijd = 1, dan zal de expressie leeftijd + 1 het resultaat 2 opleveren.
We kunnen dat resultaat toekennen aan een variabele nieuwe_leeftijd door middel van nieuwe_leeftijd = leeftijd + 1, waarna nieuwe_leeftijd een Numbervariabele is geworden die de waarde 2 bevat.

Iets vergelijkbaars geldt voor strings. Als we schrijven: groet = "Hello, " en vervolgens welkomtekst = groet + "world", dan is welkomtekst een Stringvariabele geworden met als waarde Hello, world.

Gebruiken we echter getallen en Strings door elkaar heen, dan zijn de resultaten wat minder voor de hand liggend: JavaScript zet in zo'n geval namelijk eerst de getallen om naar Strings. Als we een Stringvariabele creëren door middel van: x = "1", dan zal de expressie x + 1 als resultaat niet het getal 2 maar de String "11" opleveren!

Test

Met behulp van een expressie kunnen we ons voorbeeldscript wat interessanter maken. We gebruiken daartoe een Stringvariabele, gebruiker, waaraan we "ergens" in het programma de naam van de gebruiker hebben toegekend. 

	var gebruiker = "Laura";
	document.write("Hallo, " + gebruiker);

Dit script begroet de gebruiker nu dus met de eigen naam.

(Je kunt je afvragen wat er gebeurt als je Boolean-waarden en Strings of getallen door elkaar heen gebruikt in een expressie. Het antwoord is, dat true in een getal-expressie wordt omgezet naar het getal 1, en in een String-expressie naar de String "true". Voor false zijn dat respectievelijk het getal 0 en de String "false".)

Lees blz.25 t/m 27

alert, confirm, prompt

Javascript heeft drie handige voorgeprogrammeerde functionaliteiten die zorgen voor kant en klare dialoog vensters. Deze schermen kunnen zorgen voor:

Bij ieder van deze functies stopt het script totdat de gebruiker het dialoog venster sluit.
Eigenlijk zijn deze drie functionaliteiten, methods van het window object.
Met een functie (method) vraag je eigenlijk het object iets voor je te doen.
Bekijk de online referentie lijsten maar eens en zie wat de mogelijkheden zijn.

Test

Hier een klein voorbeeldje met een prompt en een alert. 

	var naam = window.prompt("Vul hier je naam in!")
	window.alert(naam);

Bekijk de verschillende functionaliteiten: alert confirm prompt

Opdrachten

Oefenopdracht 1
Maak een HTML pagina die bij het openen in een browser de bezoeker om zijn/haar voornaam vraagt (met een prompt). De voornaam van de bezoeker dient in de body van het HTML afgebeeld te worden, bijvoorbeeld: 'Welkom Barend'.

Oefenopdracht 2
Als de pagina geladen wordt, worden er 10 alerts getoond, met elk een ander bericht. De bezoeker moet dus 10 keer op 'Ok' klikken voordat hij/zij de pagina kan bekijken. Elk bericht heeft een andere boodschap, bijvoorbeeld:

Oefenopdracht 3
Bij het laden van de pagina dient de gebruiker twee getallen in de voeren, toon vervolgens het resultaat van de berekening (optellen van de twee getallen): het resultaat dient er als volgt uit te zien (dus met het '+' en '=' teken) en wordt getoond in een alert:
2 + 3 = 5
[value01] + [value02] = [result]

Boek

DOM Scripting: Web Design with JavaScript and the Document Object Model, Jeremy Keith
Friends of ED, English, ISBN: 978‐1590595336

Lezen: Hoofdstuk 2!

Links

gotapi
delicious zoek resultaat
w3schools
javascriptkit