JavaScript

Hoofdstuk 01: Inleiding

Ik ga er van uit dat je kennis hebt van HTML. Zo niet is het verstandig om eerst de cursus HTML, ook hier te vinden, door te werken.

Wat gaan we doen?
Ik had al in de HTML-cursus verteld dat je met formulieren mensen informatie kan laten invullen, en dan deze informatie weer kan verwerken in een homepage. Dat en meer gaan we in deze cursus behandelen
Voordat dat zover is is het toch nodig om kennis te maken met functie's, en om functie's te kennen heb je weer objecten en event handlers nodig. Als we zover zijn dat we mensen dingen kunnen laten invullen om die gegevens weer te gaan verwerken gaan we nog wat extra's behandelen als bijvoorbeeld tijd. In volgorde leer je dus:

1. objecten (nieuw scherm, waarschuwing, ...)
2. functie's
3. functie's gebruiken
4. variabelen
5. extra's

JavaScript kan zo door de browser gelezen worden. Je kan dus je Scripts zo in je HTML-pagina invoegen. Het maakt niet uit of je dit in de head doet of in de body. Als hij maar tussen de HTML-tags zit.
Ook is het mogenlijk om een los JavaScript bestand te maken. Je krijgt dan als extentie js (*.js, welkom.js) Dit kom je zelden tegen en wordt niet door alle browsers ondersteund. Hier gaan we verder niet op in.

Net als in HTML heb je een basisstructuur.

voorbeeld:
<script language="JavaScript">
<!--
hier komt de eigenlijke script
//-->
</script>

Net als HTML moet je je browsen vertellen dat je bezig bent met JavaScript. Dit doen we door de tags <script> en </script> Welke taal spreken wij hier dan? JavaScript natuurlijk. <script language="JavaScript"> Merk hier op dat ik JavaScript schrijf en niet javascript of JAVASCRIPT. JavaScript is, tegenover HTML, wel hoofdlettergevoelig (case sensitive).

Hoofdstuk 02: Hierarcie

't is saai, maar dit stukje moet je even doorwerken om te begrijpen hoe javaScript in elkaar steekt. Na dit hoofdstuk gaan we dan (eindelijk) echt aan de slag. Dan leer je hoe je een waarschuwing invoegt, een nieuw venster automatisch laat openen, enz.

Javascript werkt met hiërarchieën. Dit houd in dat JavaScript van groot naar klein werkt. Ofwel Je hebt een scherm en dat ga je helemaal uitpluizen in steeds kleinere stukjes. Wat is het grootste deel van een pagina. Het window zelf. Wat staat er in dat window? Je pagina, document. Een document is opgebouwd uit plaatjes, links en formulieren. Links en plaatjes kan je niet meer verkleinen, maar een formulier weer wel. Een formulier bestaat uit tekstvelden en knoppen, elements. En met dat element gaan we weer wat doen: options. Dit is het laatste stukje van een pagina. Dit alles komt aan elkaar. Elk element wordt gescheiden door een "dot syntax" ofwel niets anders dan een punt. Als we dus ergens iets aanroepen krijg je dus iets van "window.document.objects.elements.options"
Je hoeftniet altijd alles van window tot options aan te spreken en het is niet altijd nodig op die hele rij te noteren. Wanneer je in het window werkt laat je alles wat er achter staat weg. En als je in een document werkt is het al logisch dat je ook in een window zit. Window laat je dan ook weg. Je kan dus ook een window of een docoment aanspreken. Dat object moet wel een waarde hebben. Deze waarde bestaat uit een functie of een eigenschap. Eigenschappen van een object worden Propertie's genoemd, de functie's Methode's.

Voorbeeld:
<script language="JavaScript">
<!--
document.write("hallo")
window.alert("pas op!")
//-->
</script>

Je ziet dus: "window + option" en "document + option". Document.option is eigenlijk window.document.option, maar aangezien we al in een window zitten mag deze weg blijven.

Hoofdstuk 03: Windows-object

Het hoogste object is window. Hiervan gaan wij de volgende dingen behandelen:

• window.status
• window.alert()
• window.confirm()
• window.prompt()
• window.open()

window.status
<script language="JavaScript">
<!--
window.status="Nu verschijnt er tekst in de statusbalk"
//-->

Met window.status kan je tekst in de balk links onder in je browser zetten. Die balk heet de statusbalk.

window.alert()
<script language="JavaScript">
<!--
window.alert("Pas Op")
//-->
</script>

Nu krijg je een waarschuwing met de tekst: Pas Op. Tussen de haakjes komt dus de tekst voor de waarschuwing.

window.confirm()
<script language="JavaScript">
<!--
window.window.confirm()("Oke of Annuleren")
//-->
</script>

Hiermee laat je een bezoeker kiezen of hij wel of niet iets wil. Je weet wel je krijgt de melding "doorgaan?" waarna je kan kiezen "ok of annuleren". Hier gebeurt nog niets. Wanneer we willen dat er iets gebeurt zal je dit met de voorwaarden moeten doen. Dit leer je later in de cursus.

window.prompt()
<script language="JavaScript">
<!--
window.prompt("naam","")
//-->
</script>

De laatste waarschuwing is deze. Je krijgt een javascript-waarschuwing met een veld waar je iets moet invullen. In dit geval staat er "naam". Deze komt tussen haakjes had je al gezien. ("naam") Tussen de tweede paar haakjes komt de tekst te staan voor IN het invulveld. Nu staat er dus niets in. Zet je tekst tussen die tweede paar haakjes zie je in dat invulveld die tekst verschijnen. Ook hier geld weer dat je er zo niet veel aan hebt. Je hebt bij deze variabele nodig. Dit leren we ook nog.

De volgende is wel leuk. Hij opent een nieuw venster.

window.open()
<script language="JavaScript">
<!--
window.open("voorbeeld.html","venster_naam","heigt=250,width=500, toolbar=no,location=no,directories=no,status=no, menubar=no,scrollbars=no,resizable=no")
//-->
</script>

We bekijken het gedeelte tussen de haakjes. Deze bestaat uit 3 delen: Het eerste deel is de pagina die hij moet laden. ("voorbeeld.html") Het tweede deel is de vensternaam. Deze verschijnt niet in het venster, maar is bedoeld om aan te spreken. ("venster_naam") En tet derde deel zijn de instellingen. ("heigt=250,width=500,toolbar=no,enz...."). Alle delen zijn gescheiden door een komma. (zonder spatie's) Het tweede deel kan weggelaten worden als je alleen een pagina in een popup wilt openen. Wanneer je dat deel weglaat krijg je net zo'n venster als standaard wordt geopend. Wanneer je daar de grootte van je popup instelt zet hij ook automatisch alle optie's uit. Je krijgt geen menubar te zien, kan hem niet vergroten/verkleinen enz. Wat ik wil zeggen is dat wanneer je een popup wilt maken van een bepaalde grootte, wat een bezoeker alleen maar kan sluiten, het onzin is om te zeggen dat de browser geen toolbar, adresbalk enz. moet maken. Wanneer je dit juist wel wilt zeg je dus in de code: toolbar=yes,menubar=yes, enz. Wat al die opties betekenen (in het voorbeeld staan ze allemaal) is met een beetje engels wel te begrijpen.

Hoofdstuk 04: Document-object

Met het document-object kunnen we d.m.v. JavaScript tekst invoegen. Tekst opmaken is ook mogelijk. Maar we behandelen eerst de volgende opties. Deze herken je enigszins van de HTML-cursus.

document.fgColor

Dit de kleur die je de tekst meegeeft

document.bgColor

Dit is de achtergrondkleur (BackGround color)

document.linkColor

De kleur van de link

document.vlinkColor

De kleur van de eerder bezochte link (visited-link)

document.alinkColor

En de actieve link-kleur(Active-link)

Voorbeeld:
<script language="JavaScript">
<!--
document.bgColor="#336699"
//-->
</script>

Even nog iets algemeens. Een JavaScript object gaat altijd voor HTML. Geef je d.m.v. HTML aan dat je een groene achtergrond wilt en in JavaScript zeg je dat je een oranje achtergrond wilt krijg je een oranje achtergrond. Het maakt hierbij niet uit of de JavaScript-code voor of na de body-tag zet. De achtergrond zal in beide gevallen oranje worden. Dit geld ook voor tekst.
En tekst gaan we nu doen.

Voorbeeld:
<script language="JavaScript">
<!--
document.write("Hallo")
//-->
</script>

Nu gebeurt er niets anders dan dat je hallo op het beeldscherm krijgt. Deze tekst kan je ook opmaken door HTML-tags te combineren met JavaScript.

Voorbeeld:
<script language="JavaScript">
<!--
document.write("<h2>Hallo</h2>")
document.write("<h2>","Hallo","</h2>")
document.write("<h2>")
document.write("Hallo")
document.write("<h2>")
//-->
</script>

Je ziet dat je tekst in JavaScript meteen met HTML kan bewerken, je de tags apart kan aangeven of met drie afzonderlijke methoden. Met het middelste voorbeeld zie je ook al wat je al eerder had gezien bij window.open. Verschillende delen van de methode kan je aangeven met een komma zonder spaties. (<h2> is een deel, hallo is een deel en </h2> is een deel)

Voorbeeld:
<script language="JavaScript">
<!--
document.write("Hallo".bold())
document.write("Hallo".fontsize("2")
//-->
</script>

Achter de tekst (zie bovenstaande voorbeeld) kan je ook nog aangeven hoe je de tekst wilt.

Moet hij vet zijn...

.bold()

of cursief.

.italic

Wil je grotere letters...

.big()

of kleinere?

.small()

Je kan de tekst doorhalen,

.strike()

Subschrift ....

.sub()

of superschrift geven

.super()

Wat niet bij HTML kan is de mogelijkheid tussen gewone letters ...

.toLowerCase()

of hoofdletters.

.toUpperCase()

Tot slot kan je de grootte...

.fontsize("?") ? = 1 t/m 7

of de kleur aanpassen

.fontcolor("?") ? = kleurnaam of kleurcode.

Hoofdstuk 05: Event Handlers

Nu we wat objecten kennen gaan we verder naar Event Handlers. Event Handlers horen als een attribuut in een HTML-tag. Hier heb je de geleerde properties en methode (window. en body.)nodig.

Voorbeeld:
<a href="http://beam.to/mathie" onMouseOver="window.alert('hoi')">Klik Hier</a>

<body onUnload="window.alert('dag')">

Aan het bovenstaande voorbeeld kan je meteen zien dat je ook rekening moe houden met het nestelen van aanhalingstekens. Je mag nooit twee keer de zelfde aanhalingstekens gebruiken dus:
niet: onMouseOver="window.alert("hoi")"
niet: onMouseOver='window.alert('hoi')'
wel: onMouseOver="window.alert('hoi')"
wel: onMouseOver='window.alert("hoi")'

We kennen de volgende event handlers:

event handler	functie	gebruik in tag
onChange	gebruiker verandert waarde van object	in tabellen: iemand veranderd de waarde van een veld
onSubmit	gebruiker verzend formulier	bij de verzendknop in formulieren
onClick	gebruiker klikt op knop of link	bij links of formulieren
onMouseOver	gebruiker gaat op link staan	bij links
onMouseOut	gebruiker gaat van link af staan	bij links
onLoad	pagina of afbeelding stopt met laden	bij afbeeldingen of in de body-tag
onUnload	Gebruiker verlaat pagina	in de body
onAbort	gebruiker annuleert laden	in de body
onError	laad bij fout in pagina	in de body

Hoofdstuk 06: Functie's

Hoe ziet er een functie uit?
We openen JavaScript zoals normaal. Daarna geven we aan dat het om een functie betreft en geven de functie een naam. We plaatsen haakjes ({ en }). Tussen die haakjes komt je script te staan. En we sluiten de boel weer af. We plaatsen een functie meestal in de head. Hij mag overal staan, maar door hem in de head te zetten wordt hij eerder "gelezen".

Voorbeeld:
<script language="JavaScript">
<!--
function naam()
{
JavaScript opdrachten
}
//-->
</script>

Functie aanspreken
Het ligt natuurlijk aan de soort funcitie en wat je met de functie wil, maar je kan op de volgende manieren een functie aanroepen.

• Door Event Handlers
  voorbeeld: <body onLoad="naam()">; <body onError="naam()">
• Formulier
  als <input type="button" value="Klik Hier" onClick="naam()"
• Direct
  Door onder } direct de functie aan te spreken wordt de functie direct uitgevoerd. Na } komt dus naam() te staan. That's all!

Functie's maken
Met het beetje kennis dat wij nu al hebben van JavaScript moet het lukken om een functie te schrijven. Dit is niets anders dan wat JavaScript opdrachten achter elkaar "geplakt". Deze komt tussen { en }.

Voorbeeld:
<script language="JavaScript">
<!--
function hallo()
{
window.alert("Welkom!!")
}
//-->
</script>

Dit levert (natuurlijk) een waarschuwingsvenster op met "Welkom!!" Deze gaan we laden in de body.

Voorbeeld:
<body onLoad="hallo()">

Hoofdstuk 07: Formulieren

In de HTML-cursus hebben we al formulieren leren maken. We hebben daar alle objecten gehad die een Formulier kan hebben. (Radio Button, Tekstvak, ...) Deze hebben we eigenlijk alleen gebruikt om een e-form te maken. Door van formulieren gebruik te maken kunnen we informatie van je gast gebruiken om je homepage aan te passen. Leuk voorbeeld!

Vul je naam in en druk op "OKE"

Hoe hebben we dit gemaakt. Je hebt al van groot naar klein leren denken. Das hier ook nodig. (Window is groter dan formulier is groter dan tekstveld) We geven alles waar je iets kan invullen een naam. Let op! Sommige namen doen het niet. Mocht je een foutmelding krijgen probeer dan eerst ergens een andere naam in te vullen. Meestal werkt je formulier dan weer wel.
Het bovenstaande voorbeeld gaan we nu maken. Eerst het formulier. Dit bestaat uit een tekstvak en een button.

Voorbeeld:
<form name="form01">
Wat is je naam?
<input type="tekst" name="appels" size="15">
<input type="button" value="OKE" onClick="naam()">
</form>

Het formulier geven we een naam. (form01) Maar ook het tekstvak geven we een naam. (appels). Dit hebben we nodig om de informatie over te kunnen geven. Je ziet bij de button staan onClick="naam()" De functie heet dus naam. Die gaan we nu maken.

Voorbeeld:
<script language="javaScript">
<!--
function naam()
{
window.alert("Hallo " + document.form01.appels.value + "!!")
}
//-->
</script>

Het ziet er allemaal bekend uit, behalve misschien document.form01.appels.value. Het HTML-bestand waar we bezig zijn geven we aan met document. In het document zijn we bezig met formulier Form01. (deze hadden we net al benoemd) en uit dat formulier moeten we de waarde hebben die in tekstvak appels is geschreven. (appels.value)

Hoofdstuk 08: Variabelen

Eigenlijk is de titel van dit hoofdstuk fout. Beter was geweest: "Rekenen met JavaScript" Dit is het meest ingewikkelde gedeelte van deze cursus. Wanneer je al enige kennis van b.v. Pascal hebt zal dit hoofdstuk koek en ei zijn.
Op school zijn/waren we bezig met Pascal. Wat mij op viel was dat het denken in JavaScript sterk lijkt op Pascal. Pascal lijkt wat op Java en JavaScript komt van Java af, dus dat kan wel kloppen.
Hier komen we ook bij de kern van deze JavaScript cursus: Je homepage meer interactief maken. Je bezoekers meer betrekken bij je homepage. Je bezoekers vullen ergens wat in en "hoppa!!" de kleur van je achtergrond wordt veranderd (bijvoorbeeld). Variabelen.
Eerst wat logica. Je hebt al kennis gemaakt met Formulieren in JavaScript. Dat is de manier om variabelen te declareren. Declareren is het aanwijzen van een waarde aan een variabelen. Bijvoorbeeld:

Wat is je naam?

We noemen het tekstvak Naam. Dit is onze variabelen. Wat geven we voor waarde aan Naam? Pietje. Nu hebben we dus een variabele (naam) gedeclareerd (met Pietje).
Dus een gebruiker voert zijn naam in en deze gebruik je weer om de tekstkleur (of zo) te veranderen.
Terug naar variabelen. Stel dat we een bezoeker twee getallen laten invullen: 7 & 8. Daarvan willen we graag het totaal weten. Het antwoord laten we verschijnen in een waarschuwingsvenster. In het venster verschijnt dus het getal 15. Immers 7 + 8 = 15. Dit gaan we zelf niet uitrekenen maar dit laten we de computer doen.

Voorbeeld:
<script language="Javascript">
<!--
window.alert(7 + 8)
//-->
</script>

Stapje verder. We gaan 7 & 8 een naam geven. 7 noemen we appels en 8 noemen we peren. We krijgen nu dus de som appels + peren = 15. Wanneer we dit gaan toepassen krijgen we een error met daarin iets van "appels en peren onbekend". Natuurlijk want wij weten nu wel wat appels of peren is, maar de computer niet. Deze moeten we dus inderdaad declareren. Dit doen we met het statement var

Voorbeeld:
<script language="Javascript">
<!--
var appels = 7
var peren = 8
window.alert(appels + peren)
//-->
</script>

Het zou leuker zijn wanneer de bezoeker zelf twee getallen kan invoeren.

Voorbeeld:
<script language="Javascript">
<!--
function som()
{
var appels = document.fruit.appels.value
var peren = document.fruit.peren.value
window.alert(appels + peren)
}
//-->

<form name="fruit">
<input type="tekst" name="appels" size="2">
<input type="tekst" name="peren" size="2">
<input type="button" value="Bereken" onClick="som()">
</form>

Je ziet meteen het eerste probleem. Ons script denkt nu niet "ik moet appels optellen bij peren en de uitkomst afdrukken in een alert" maar hij denkt "ik moet appels afdrukken en ik moet peren afdrukken" Immers we scheiden delen van een object met een + (plus) Het is moeilijk uit te leggen waarom, maar door een getal in de functie te zetten weet de browser van "ik moet optellen en niet gewoon twee getallen afdrukken". Dit probleem lossen we op door appels en peren met 1 te vermenigvuldigen.
Overigens wil je geen getallen optellen, maar vermenigvuldigen, delen of aftrekken. Dit werkt het zelfde als optellen. Het probleempje wat we nu aan het oplossen zijn komt alleen voor bij het optellen. Het vorige voorbeeld zou dan wel goed werken.
Merk ook op dat we de oplossing als derde variabele ingeven. Deze noemen we bananen

Voorbeeld:
<script language="Javascript">
<!--
function som()
{
var appels = document.fruit.appels.value
var peren = document.fruit.peren.value
var bananen = 1*appels + 1*peren
window.alert(bananen)
}
//-->
</script>

<form name="fruit">
<input type="tekst" name="appels" size="2">
<input type="tekst" name="peren" size="2">
<input type="button" value="Bereken" onClick="som()">
</form>

Optellen (+), aftrekken (-), delen (/) en vermenigvuldigen (*) noemen we operators. Naast deze vier zijn er nog meer.

++	verhoogd de waarde van de variabele met 1
--	verlaagd de waarde van de variabele met 1
+= X	verhoogd de waarde van de variabele met X
-= X	verlaagd de waarde van de variabele met X
-	veranderen van positief naar negatief en andersom
%	berekend de restwaarde van een deling
^ X	tot de macht X

Het rekenen gaat volgens de basisschoolregel vermenigvuldigen gaat voor optellen.

Volgorde van bewerking:

met dank aan