Cursus Javascript - Inleiding

Inleiding

Wat is JavaScript

JavaScript is een scripttaal ontwikkeld door Netscape. Met JavaScript kan men op een relatief gemakkelijke manier interactieve webpagina's creeren. Oorspronkelijk noemde men het Livescript maar nadien werd het Javascript als zou het meer aanleunen naar Java wat op dat moment populair werd.
Deze cursus toont wat u kunt doen met Javascript en vooral hoe.

JavaScript is geen Java!

Veel mensen geloven dat Javascript en Java hetzelfde is. Niets is minder waar. JavaScript-code wordt geinterpreteerd en niet gecompileerd. Dit betekent dat de code niet gecontroleerd wordt op fouten alvorens de code wordt uitgevoerd door de Javascript-interpreter. JavaScript is ontwikkeld om interactiviteit toe te voegen aan formulieren binnen web-pagina's. U kunt velden en knoppen definieren binnen een HTML-formulier en afhankelijk van bepaalde gebeurtenissen zoals klikken op een knop een bepaalde functie oproepen. Op die manier kunnen de gegevens gecontroleerd worden alvorens ze naar de centrale database worden gestuurd bijvoorbeeld door middel van een CGI-server. JavaScript zelf geeft geen toegang tot het netwerk, locale harddisks of PC hardware in het algemeen zoals dat bij Java het geval is. Het is wel mogelijk om een aantal objecten te creeren binnen Javascript.

Uitvoeren van JavaScript

Wat heeft u nodig voor het uitvoeren van routines geschreven in Javascript? Een Internetbrowser die Javascript-enabled is - zoals bijvoorbeeld : Netscape Navigator (vanaf versie 2.0) of Microsoft Internet Explorer (MSIE - vanaf versie 3.0). Omdat deze twee browsers toch wijd verspreid zijn en meer dan 90 % vertegenwoordigen van alle www-browsers op de markt, kunnen we stellen dat iedereen die op het web surft ook Javascripts kan uitvoeren. Dit is zeker en vast een belangrijk argument om de keuze van Javascript te verantwoorden.
Wat absoluut noodzakelijk is alvorens Javascript-scripts te schrijven is een goede kennis van HTML. Nu zijn er op het Net vele naslagwerken en cursussen te vinden over HTML. Neem bijvoorbeeld onze eigen HTML-cursus.

Verwerken van JavaScript in een HTML-pagina

JavaScript code zit ingebed in een HTML-pagina. Om te zien hoe het juist werkt even een klein voorbeeldje :

<html>
<body>
<br>
Dit is een normaal HTML document.
<br>
  <script language="JavaScript">
    document.write("Dit is JavaScript!")
  </script>
<br>
Terug naar HTML.
</body>
</html>

Op het eerste zicht lijkt het pure HTML-code. Het enige nieuwe is het volgende :

  <script language="JavaScript">
    document.write("Dit is JavaScript!")
  </script>

Dit is JavaScript. Als we dit script willen uitvoeren dan moeten we het bewaren zoals elke normale HTML-pagina en laden in een browser die Javascript ondersteunt.
Hier ziet u de output :

Dit is een normaal HTML document.

Terug naar HTML.

Ik moet toegeven dat dit script niet echt nuttig is. Hetzelfde zou veel gemakkelijker in pure HTML geschreven zijn. Ik wou enkel het gebruik van de <script> tag demonstreren. Alles tussen <script> en </script> tag wordt geinterpreteerd als JavaScript code. U ziet ook het gebruik van document.write() - een van de meest belangrijke commando's in de JavaScript-programmeertaal. document.write() wordt gebruikt om in het huidige document tekst weg te schrijven. In dit geval wordt de tekst Dit is JavaScript! weggeschreven naar ons HTML-document.

Browsers die JavaScript niet ondersteunen

Hoe zal onze webpagina er uit zien als de browser geen Javascript ondersteunt? Een niet-JavaScript browser kent de <script> en </script>-tag niet. De browser interpreteert deze tags niet en alles wat volgt wordt als gewone tekst weergegeven. Dit betekent dat de gebruiker de Javascript-code ziet die in het HTML-document verwerkt zit. Dit is zeker niet de bedoeling. Er is een manier om de broncode voor oude browsers te verbergen. Hiervoor gebruiken we de HTML-commentaartags . Onze nieuwe broncode ziet er als volgt uit :

<html>
<body>
<br>
Dit is een normaal HTML document.
<br>
  <script language="JavaScript">
  <!-- verbergen voor niet-Javascript browsers

    document.write("Dit is JavaScript!")

  // -->
  </script>
<br>
Terug in HTML.
</body>
</html>

De output in een niet-JavaScript browser zal er als volgt uitzien :

Dit is een normaal HTML document.
Terug in HTML.

Zonder de HTML-commentaartags zou de output in een niet-Javascript browser er als volgt uitzien :

Dir is een normaal HTML document.
document.write("Dit is JavaScript!")
Terug in HTML.

Let op : Javascript broncode kan men niet volledig verbergen. Wat we hier doen is de broncode verbergen voor browsers die (nog) geen Javascript ondersteunen. Het is en blijft altijd mogelijk via 'View' menu de 'Document source' te bekijken. Er bestaat geen enkele manier opdat de gebruiker de sourcecode niet zou kunnen bekijken (en dus ook zien hoe een bepaald effect gerealiseerd werd).

Events

Events en event-handlers zijn zeer belangrijk in Javascript programmering. Een event wordt meestal veroorzaakt door actie van de gebruiker. Als de gebruiker op een knop klikt wordt een Click-event veroorzaakt. Indien de muiswijzer over een bepaalde link beweegt dan wordt een MouseOver-event veroorzaakt. Er zijn zo veel verschillende events afhankelijk van het object waarover we spreken.
We willen dat ons JavaScript programma reageert op bepaalde events. Dit kunnen we doen d.m.v. zogenaamde event-handlers. Zo kan klikken op een bepaalde knop tot gevolg hebben dat er popup-venster verschijnt m.a.w. dit betekent dat het popup-venster moet verschijnen als reactie op een Click-event. De event-handler die we zoeken is onClick. Dit vertelt aan de computer wat te doen wanneer dat event veroorzaakt werd. Het volgende voorbeeld zal dat duidelijk maken:

<form>
<input type="button" value="Klik hier" 
 onClick="alert('Hallo en welkom bij PC Aktief Computerclub')">
</form>

Er zitten een paar nieuwe dingen in deze code - we zullen ze stap voor stap overlopen. U kunt zien dat we een formulier met een knop gemaakt hebben. (dit behoort tot de standaard HTML-code dus ga ik die hier niet verder behandelen) Wat nieuw is, is het gedeelte onClick="alert('Hallo en welkom bij PC Aktief Computerclub')" binnen de <input> tag. Zoals ik eerder zei, bepaalt dit wat er gebeurt als er op de knop wordt geklikt maw. als er zich een Click-event voordoet. Dit is JavaScript-code (Let op : er is hier geen gebruik gemaakt van de <script> tag ).
alert() toont een popup-venster. Tussen de haakjes kan u een tekst ingeven. In ons geval is dit 'Hallo en welkom bij PC Aktief Computerclub'. Dit is de tekst die zal getoond worden in het popup-venster.
Een ding wat misschien een beetje verwarrend kan werken: In het document.write() commando gebruikten we dubbele quotes " en in combinatie met alert() gebruikten we enkele quotes ' - waarom? In feite zijn beide alternatieven goed. Maar in het laatste voorbeeld gebruikten we zowel dubbele als enkele quotes. Hadden we altijd dubbele of enkele quotes gebruikt dan wist de interpreter niet meer wat behoorde bij de OnClick event-handler en wat tot de alert-tekst. Daarom moeten we dus dubbele en enkele quotes afwisselen. Het geeft niet in welke volgorde we dubbele en enkele quotes afwisselen. We hadden dus even goed onClick='alert("Hallo en welkom bij PC Aktief Computerclub")' kunnen schrijven.

Indien we de Netscape Navigator browser gebruiken dan zal tevens de tekst JavaScript alert verschijnen. Dit is om veiligheidsredenen. Een Javascript zou u om een paswoord kunnen vragen en u als goedgelovige gebruiker zou alzo u paswoord bekend maken in de veronderstelling dat het een vraag is die van het operating systeem komt. Daarom wordt dus de tekst JavaScript alert getoont. Deze tekst kan om veiligheidsredenen niet worden verwijderd.

Functies

In de meeste Javascript programma's zullen we gebruik maken van functies.
Functies zijn een groepering van verschillende commando's. Als voorbeeld zullen we een bepaalde tekst drie keer afbeelden. Een mogelijkheid is de volgende:

<html>
<script language="JavaScript">
<!-- verbergen voor niet-Javascript browsers

document.write("Welkom bij PC Aktief Computerclub!<br>");
document.write("bij de Cursus JavaScript!<br>");

document.write("Welkom bij PC Aktief Computerclub!<br>");
document.write("bij de Cursus JavaScript!<br>");

document.write("Welkom bij PC Aktief Computerclub!<br>");
document.write("bij de Cursus JavaScript!<br>");

// -->
</script>
</html>

Dit zal de tekst

Welkom bij PC Aktief Computerclub!
bij de Cursus JavaScript!

drie keer afbeelden. Als we kijken naar de source code dan zien we een herhaling van drie keer dezelfde code om het resultaat te bekomen. Dit is zeker en vast niet efficient. Veel efficienter kunnen we dit realiseren door middel van een functie:

<html>
<script language="JavaScript">
<!-- verbergen voor niet-Javascript browsers 

function welkom() {
  document.write("Welkom bij PC Aktief Computerclub!<br>");
  document.write("bij de Cursus JavaScript!<br>");
}

welkom();
welkom();
welkom();

// -->
</script>
</html>

In dit script definiëren we een functie. Dit doen we als volgt:

function welkom() {
  document.write("Welkom bij PC Aktief Computerclub!<br>");
  document.write("bij de cursus JavaScript!<br>");
}

De commando's binnen de {} behoren tot de functie welkom(). Dit betekent dat de twee document.write() commando's samenhoren en samen zullen uitgevoerd worden door de functie welkom() op te roepen. In ons voorbeeld hebben we drie zogenaamde function calls. U kunt zien dat we de functie welkom() drie keer oproepen juist na het defiëren van de functie. Dit betekent dat de functie drie keer wordt uitgevoerd.
Dit is een eenvoudige functie. U vraagt zich misschien af waarom functies zo belangrijk zijn. Tijdens het verdere verloop van de cursus zal dit overduidelijk worden. In het bijzonder het doorgeven van variabele gegevens maakt het gebruik van functies verantwoord. - we zullen dit later zien.

Functies kunnen ook gebruikt worden in combinatie met event-handlers. We bekijken even het volgende voorbeeld:

<html>
<head>

<script language="JavaScript">
<!-- verbergen voor niet-Javascript browsers 

function BTW() {
  var x= 1500;
  var y= 1.21;

  var resultaat= x * y;

  alert(resultaat);
}

// -->
</script>

</head>
<body>

<form>
<input type="button" value="Prijs incl.BTW" onClick="BTW()">
</form>

</body>
</html>

Hieronder kunt u het voorbeeld testen:

De knop roept de functie BTW() op. U kunt zien dat binnen de functie bepaalde berekeningen worden uitgevoerd. Hiervoor gebruiken we de variabelen x, y en resultaat. Variabelen definiëren we dmv. het keyword var. In een variabele kunnen we verschillende waarden bewaren - zowel cijfers als tekst strings. De lijn var resultaat= x * y; definieert binnen de browser een variabele resultaat en geeft die als inhoud het resultaat van de bewerking x * y (vb.1500 * 1.21). Na deze bewerking krijgt de variabele resultaat als inhoud 1815. Het commando alert(resultaat) is in dit geval gelijk aan alert(1815). Dit betekent dat we een popup-venster krijgen met 1815 erin.

[inhoud] [volgend hoofdstuk]

Site monitored
by