Inhoud

  1. Geen paragrafen H1 - Voorwoord
  2. Geeft paragrafen weer H2 - Wat is JavaScript?
    1. §1. Wat kun je met JavaScript?
    2. §2. De script-tag
    3. §3. Opdrachten
  3. Geeft paragrafen weer H3 - Statements (opdrachten)
    1. §1. Wat zijn statements?
    2. §2. Functie document.write
    3. §3. Commentaar
    4. §4. Functie alert
    5. §5. Opdrachten
  4. Geeft paragrafen weer H4 - Variabelen
    1. §1. Wat is een variabele?
    2. §2. Variabelen maken en gebruiken
    3. §3. Functie prompt
    4. §4. Operatoren
    5. §5. Strings
    6. §6. Opdrachten
  5. Geeft paragrafen weer H5 - Functies
    1. §1. Wat is een functie?
    2. §2. Functies maken en gebruiken
    3. §3. Functies die iets teruggeven
    4. §4. Parameters en argumenten
    5. §5. De scope van variabelen
    6. §6. Expressies
    7. §7. Functie parseInt
    8. §8. Opdrachten
  6. Geeft paragrafen weer H6 - Loops en voorwaardes
    1. §1. Wat zijn loops en voorwaardes?
    2. §2. Het if-else statement
    3. §3. Vergelijkingen en hun operatoren
    4. §4. Functie confirm
    5. §5. Het switch-statement
    6. §6. De while-loop
    7. §7. De for-loop
    8. §8. Stoppen door break
    9. §9. Opdrachten
  7. Geeft paragrafen weer H7 - Events
    1. §1. Wat is een event?
    2. §2. Events maken en gebruiken
    3. §3. Welke events zijn er?
    4. §4. Variabele this
    5. §5. Event-object
    6. §6. Opdrachten
  8. Geeft paragrafen weer H8 - Arrays
    1. §1. Wat is een Array?
    2. §2. Een Array maken en gebruiken
    3. §3. Een Array doorlopen
    4. §4. Een associatieve array
    5. §5. De for-in loop
    6. §6. Opdrachten
  9. Geeft paragrafen weer H9 - Objecten
    1. §1. Wat is een object?
    2. §2. Verschil object en variabele
    3. §3. Eigenschappen
    4. §4. Methodes
    5. §5. Eigenschappen en methodes
    6. §6. Opdrachten
  10. Geeft paragrafen weer H10 - Globale objecten
    1. §1. Het window-object
    2. §2. Het document-object
    3. §3. Het Math-object
    4. §4. Standaard HTML-Element-object
    5. §5. Een HTML-Table-object
    6. §6. Opdrachten

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 Visual Studio Code)

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

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, JavaScript wordt 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-mailadres 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:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
  3.  <head>
  4.   <title>JavaScript invoegen</title>
  5.   <style type="text/css">
  6.    /* Even ter herinnering, zo kun je CSS toevoegen */
  7.    body
  8.    {
  9.      font-family: arial, sans-serif;
  10.    }
  11.   </style>
  12.   <script type="text/javascript">
  13.     JavaScript komt hier
  14.   </script>
  15.  </head>
  16.  <body>
  17.   <p>HTML hier</p>
  18.  </body>
  19. </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:
  1. <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:
  1. <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:
  1. <script type="text/javascript" src="javascript.js">
  2.   document.write("Hello world!"); // Dit mag niet!
  3. </script>

De voordelen 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 één 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 eerstgenoemde manier doen (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

  1. 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)
    Antwoord
 
© Mark Kamsma 2011-2024