Skip to main content

Les 1, Variabelen

In deze les leren we wat een variabele is en hoe we deze in JavaScript kunnen gebruiken.

We gaan ook leren hoe je JavaScript kunt toeveogen aan je web pagina, dit kan op drie verschillende manieren.

Wat is een variabele?

In elke programmeertaal zijn variabelen erg belangrijk. In JavaScript dus ook. Misschien ken je ze al van wiskunde, maar in deze les wordt uitgelegd wat het in JavaScript zijn en hoe ze werken. Maar wat is zo'n variabele nou precies?

Een variabele is een plekje in het geheugen van de computer, en met de naam van die variabele (dus bijvoorbeeld x of y) kun je dan bij het geheugen op dat plekje. Ergens in het geheugen van de computer staat dus een waarde opgeslagen, en die kan jij dan met JavaScript veranderen of gebruiken.

De naam van dit geheugenplekje moet uniek (= mag niet al bestaan) zijn, want als je bijvoorbeeld twee plekjes hebt die beide X heten dan weet de computer niet welk plekje je bedoeld. Verder zijn er in JavaScript nog nog een aantal kenmerken aan een variabele:

  1. De naam moet beginnen met een kleine- of hoofdletter of een underscore (_).
  2. De naam mag daarna letters (hoofdletters of kleine letters), underscores(_) en cijfers bevatten.
  3. De naam mag niet een naam van een JavaScript commando zijn.

Variabele namen zijn case sensitive. Dat betekent dat X en x verschillende variabelen zijn.

Hoe gebruik van een variable in JavaScript gaat as volgt:

var nummer;
nummer = 42;

Hier staat eigenlijk: (1) maak een variable, een plekje in het geheugen, en noem deze nummer, (2) stop dan 42 in dit stukje geheugen. Dus de waarde van nummer wordt 42.

Dit kan ook korter:

var x = 42;

Code

JavaScript is een ClientSide taal en kan tussen de HTML code worden geplaatst. We maken nu een sprongetje en gaan de volgende code op onze laptop uitproberen.

<!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>Variabelen (hoofdstuk 4)</title>
  <script type="text/javascript">
   var x = 42;
   document.write(x);      // Uitvoer: 42
   document.write("<br />");
   document.write('x');    // Uitvoer: x (niet 42!)
   document.write("<br />");
   x = 11;
   document.write(x);      // Uitvoer 11
  </script>
 </head>
 <body>
 </body>
</html>

Met de document.write wordt er iets naar het browser scherm geschreven. Je zult zien dat overal waar x staat, dit nu wordt vervangen door 42. Als iets echter tussen "" of '' staat dan ziet JavaScript dit niet als een variabele. Op regel 9 wordt de x dus niet vervangen door 42.

<script>

Verder zie je ook dat de JavaScript tussen <script type="text/javascript"> en </script> tags staan. Meestal zet je de JavaScript code ergens in de <head> sectie van de html pagina.

JS File

Nog beter is de javascipt in een aparte file te plaatsen. Dat houd het lekker overzichtelijk. Dat doen we als volgt; plaats de onderstaande code in de head sectie van je html pagina en maak vervolgens ene nieuwe file die je myScript.js noemt. Plaats daar de JavaScript code nu in.

 <script src="myScript.js"></script>

Je kunt JavaScript niet alleen via een file laden maar ook via een URL: probeer het volgende maar eens:

<script src="https://www.yr.no/place/Netherlands/North_Holland/Amsterdam/external_box_stripe.js"></script>

Prompt

Variabelen blijken pas echt nuttig te zijn wanneer je invoer van de gebruiker wil vragen. Dan weet je namelijk niet van tevoren wat er ingevoerd gaat worden.

Plaats het onderstaande stukje JavaScript code in een HTML pagina zoals je dat eerder ook hebt gedaan. Plaats dus de code in de <head> sectie en plaats de code tussen de juiste tags <script type="text/javascript"> en </script>.

Voer het uit en kijk wat er gebeurt.

var antwoord;
antwoord = prompt("Wat is jouw naam?", "");
document.write("Jouw naam is: ");
document.write(antwoord);

Je ziet dat er nu met het prompt commando naar een naam wordt gevraagd. Deze wordt in een variabele opgeslagen en vervolgens afgedrukt.

Kun je je naam nu ook bold afdrukken? Tip: je hebt doorvoor de <b> en </b> tags nodig.

Opgaven

De volgende les gaan we het huiswerk bespreken. Maar daarom het huiswerk in een Word document zodat we dit samen n de klas kunnen nakijken.

Opgave 1

Geef van elke regel aan of de variabele goed of fout is.

var x;
var X;
var naam;
var 2eNaam;
var tweede_naam;
var tweedeNaam;
var naam2;
var _Naam;
var var;
var $x;
var function;

Opgave 2

Is regel 1 en 2 hetzelfde?

Opgave 3

Maak een JavaScript dat aan de gebruiker vraagt welke dag het is en die dan bijvoorbeeld op het scherm afdrukt:

Vandaag is het maandag.

Opgave 4

Maak de opgaven op: https://www.w3schools.com/js/exercise_js.asp?filename=exercise_js_variables1

--

Back to top