Inhoud

2. Wat is JavaScript?

JavaScript is de programmeertaal die het meest gebruikt wordt om zogeheten dynamische webpagina's te maken. Het is dus een taal die voor interactie met de gebruiker zorgt. Bij HTML en CSS kun je er niet voor zorgen dat er iets gebeurt met de webpagina als de gebruiker op een toets drukt, ergens op klikt of iets anders doet. Daar is JavaScript voor.

JavaScript wordt uitgevoerd door de browser. Net zoals de browser de HTML en CSS leest en daar een webpagina van bouwt, leest de browser ook de JavaScript en voert die code uit. JavaScript is net zoals HTML en CSS gewoon platte tekst. Je kunt dus niet een tekstverwerker zoals Microsoft Word gebruiken. Gebruik gewoon dezelfde editor die je ook voor HTML en CSS gebruikt (bijvoorbeeld: Adobe Dreamweaver, Notepad++ of gedit)

JavaScript is een hoofdletter gevoelige taal. Dat betekent dus dat naam iets heel anders betekent dan Naam in JavaScript.

Naar boven

2.1. Wat kun je met JavaScript?

Je hebt vast wel eens een webpagina gezien waar een menu netjes uitrolt of waar je dingen kan verslepen. Of een pagina die zichzelf aanpast zonder dat je iets doet, zoals de zogenaamde Instant Search van Google waar de zoekresultaten al op de pagina komen terwijl je typt. Hiervoor wordt allemaal JavaScript gebruikt.

Met JavaScript kun je in principe al het denkbare maken. Alleen grote spellen (zoals 3D schiet- of racespellen) zijn erg veel werk in JavaScript en dat zal je dus nooit lukken. Daarbij wordt JavaScript uitgevoerd door een browser en daardoor is het in vergelijking met andere talen (C++, C#, Delphi, etc) zeer traag.

Maar kleinere dingen zoals een Mario-spelletje, een webpagina die controleert of je wel een geldig e-mail adres invult of advertenties die zichzelf aanpassen aan de hand van wat de bezoeker intypt kan allemaal.

Naar boven

2.2. De script-tag

Je JavaScript voeg je gewoon in je HTML-pagina toe, het lijkt veel op de manier zoals je CSS toevoegt:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
 <head>
  <title>JavaScript invoegen</title>
  <style type="text/css">
   /* Even ter herinnering, zo kun je CSS toevoegen */
   body
   {
     font-family: arial, sans-serif;
   }
  </style>
  <script type="text/javascript">
    JavaScript komt hier
  </script>
 </head>
 <body>
  <p>HTML hier</p>
 </body>
</html>

Hiervoor gebruik je dus een HTML-tag, namelijk de script-tag. De script-tag heeft enkel 1 attribuut nodig, welk type script er tussen staat. Dat is eigenlijk altijd wel JavaScript, dus daar moet je dan ook altijd gewoon "text/javascript" invullen.
Net zoals bij CSS kun je ook externe bestanden gebruiken. Bij css zijn dat de .css bestanden, die je invoegt met:

HTML:

<link rel="stylesheet" type="text/css" href="mijn_stijlblad.css" />

Bij JavaScript kun je op een vergelijkbare manier bestanden invoegen, maar dan gewoon met de script-tag:

HTML:

<script type="text/javascript" src="javascript.js"></script>

Merk op dat de script-tag nog steeds afgesloten moet worden! Zodra je een src-attribuut in de script-tag zet mag er niks meer er tussen staan, dit mag dus niet:

HTML:

<script type="text/javascript" src="javascript.js">
  document.write("Hello world!"); // Dit mag niet!
</script>

Het voordeel van externe bestanden is vergelijkbaar met de voordelen van externe bestanden bij CSS. Bijvoorbeeld dat je op je hele website hetzelfde bestand gebruikt, en dus alles maar op een plek hoeft te wijzigen. Voor grote projecten of voor een hele website is het dus slim om altijd gewoon een apart JavaScript bestand te maken. Als je iets kleins moet maken, zoals een opdracht op deze site of je wil iets uitproberen, dan kun je het gewoon op de eerst genoemde manier (dus zonder extern bestand).

Zodra de browser de script-tag leest zal de browser de code die in die script-tag staat (of het externe bestand) uitvoeren. Het maakt dus wel degelijk uit of je de script-tag in de head van je HTML-bestand plaatst of helemaal onderaan (uiterlijk voor </body>).

Dat betekent dus ook dat het laden van de rest van de pagina wordt opgehouden totdat je script uitgevoerd is. Dat is vaak maar enkele milliseconden als het om kleine simpele scriptjes gaat, en zeker bij de meeste oefeningen of kleine testjes hoef je je daar niet druk over te maken. Maar zodra je echt een spelletje of zoiets gaat maken moet er wel op gelet worden.

Naar boven

2.3. Opdrachten

Iemand schrijft het volgende stukje HTML in zijn head-tag:
```
<script type="text/javascript" src="main.js">
  alert("Hello world!");
</script>
```
Ook als je nog geen JavaScript kunt moet je kunnen begrijpen wat hier fout is, geef dus aan wat hier fout is en hoe dat verbeterd zou kunnen worden. (H2.2)