Variabelen hebben een naam (kort zoals x of beschrijvend zoals voornaam).

De namen van variabelen in JavaScript zijn:

  • hoofdlettergevoelig
  • beginnen met een letter, $ of een underscore.

De waarde van een variabele kan tijdens het uitvoeren van een script veranderen. Daarbij verwijs je naar de naam van de variabele als je de waarde ervan wilt aanpassen of opvragen.

<!DOCTYPE html;>
<html
<head>
<meta charset=utf-8"/>
<title>Voornaam </title>
</head>
<body>
<p><span id="gepensioneerd"></span> werd opgevolgd door <span id="opvolger"></span>.</p>
<script>
var voornaam;
voornaam ="Ingrid";
document.getElementById("gepensioneerd").innerHTML = voornaam;
voornaam = "Dany";
document.getElementById("opvolger").innerHTML = voornaam;
</script>
</body>
</html>

Variabelen declareren

Een variabele aanmaken noemen we declareren. Dit gebeurt met het sleutelwoord var.

var x;
var voornaam;

Na de declaratie zijn de variabelen leeg (ze hebben nog geen waarde).

Tijdens de declaratie kan je variabelen een waarde geven:

var x =5;
var voornaam = "Dany";

Opmerkingen: Tekstwaarden beginnen en eindigen met aanhalingstekens. Indien de tekstwaarde zelf aanhalingstekens bevat, gebruik je enkelvoudige aanhalingstekens.

var uitspraak = 'De professor zei: "Ik verzet mij tegen dit maakbaarheidsidealisme."'

Een opnieuw gedeclareerde variabele behoudt zijn oorspronkelijke waarde.

Speciale karakters in tekstwaarden (strings)

De backslash (\) wordt gebruikt om speciale karakters die normaal niet toegestaan zijn toch in een tekstwaarde te gebruiken.

var tekst="Ze noemen ons de "Vikings" van het noorden."

In JavaScript begint en eindigt een tekstwaarde (string) met enkele of dubbele aanhalingstekens. Dit zorgt ervoor dat in het bovenstaand voorbeeld de variabele tekst de volgende tekstwaarde zal bevatten: Ze noemen ons de.

Om dit te voorkomen plaats je voor de aanhalingstekens in de tekstwaarde een backslash (\). Een karakter na een backslash wordt door JavaScript letterlijk in de tekstwaarde opgenomen en dus niet gezien als het einde van de tekstwaarde:

var tekst="Ze noemen ons de\"Vikings\" van het noorden.";

De variabel tekst bevat nu: Ze noemen ons de "Vikings" van het noorden.

De volgende tabel toont een lijst met speciale karakters:

Lokale variabelen

Een variabele die binnen een functie gedeclareerd wordt, kan enkel in deze functie gebruikt worden. Bij het beëindigen van de functie wordt de lokale variabele vernietigd.

Je kunt dus lokale variabelen met dezelfde naam in verschillende functies gebruiken, zonder dat ze elkaar beïnvloeden, want lokale variabelen worden enkel herkend in de functie waarin ze gedeclareerd werden.

Globale variabelen

Variabelen die buiten een functie gedeclareerd worden zijn globale variabelen. Alle scripts en functies op één webpagina kunnen de globale variabelen gebruiken.

Globale variabelen worden vernietigd bij het verlaten van de webpagina.

Niet gedeclareerde variabelen

Als je een waarde toekent aan een nog niet gedeclareerde variabele dan wordt de variabele automatisch gedeclareerd als globale variabele.

Je kunt bewerkingen (operaties) uitvoeren op en met variabelen.

Y = 5;
z = 2;
x = y + z;

De = operator wordt gebruikt om waarden aan een variabele toe te kennen.

De + operator wordt gebruikt om waarden samen te tellen.

De waarde van de variabele x is na het uitvoeren van de opdrachten hierboven 7.

Rekenkundige operatoren

Rekenkundige operatoren worden gebruikt om te rekenen met variabelen en/of waarden.

Met y = 5 toont de tabel de werking van de rekenkundige operatoren:

Toewijzingsoperatoren

Toewijzingsoperatoren worden gebruikt om waarden aan variabelen toe te wijzen.

Met x = 10 en y = 5 toont de tabel hieronder de werking van de toewijzingsoperatoren:

De + operator en strings (tekenreeksen)

De + operator wordt ook gebruikt om string variabelen of tekst waarden aan elkaar te zetten.

begin = "Het is vandaag";
einde = "mooi weer.";
zin = begin + einde;

Na het uitvoeren van deze opdrachten, bevat de variabele zin de tekst "Het is vandaagmooi weer.". Om een spatie tussen de twee strings te plaatsen, voeg je aan één van de twee strings een spatie toe:

begin = "Het is vandaag";
einde = "mooi weer.";
zin = begin + " " + einde;

Na het uitvoeren van de aangepaste opdrachten bevat de variabele zin de tekst "Het is vandaag mooi weer.".

Strings en getallen samenvoegen

Bij het samenvoegen van een getal met een string zal het resultaat steeds een string zijn.

<body>
<p>Twee getallen optellen: <span id="tweegetallen"> </span>.<br />
Twee tekenreeksen samenvoegen: <span id="tweestrings"> </span>.<br />
Een getal en een tekenreeks samenvoegen: <span id="getalstring"> </span>.<br />
Een tekenreeks en een getal samenvoegen: <span id="stringgetal"> </span>.</p>
	
<script>
x = 5 + 5;
document.getElementById("tweegetallen").innerHTML = x;
x = "5" + "5";
document.getElementById("tweestrings").innerHTML = x;
x = 5 + "5";
document.getElementById("getalstring").innerHTML = x;
x = "5" + 5;
document.getElementById("stringgetal").innerHTML = x;
</script>
</body>

Gebruikersinvoer opvragen

In HTML kunnen gebruikers informatie doorsturen met behulp van formuliervelden.

<!DOCTYPE html >
<html >
<head >
<meta charset="utf-8" / >
<title >Formuliervelden </title >
<script >
function bereken() {
// de invoer in het tekstveld met het id prijs lezen
var prijs = document.getElementById("prijs").value;
// de invoer in het tekstveld met het id aantal lezen
var aantal = document.getElementById("aantal").value;
// het resultaat in het tekstveld met het id resultaat plaatsen
document.getElementById("resultaat").value = prijs * aantal;
}
</script >
</head >
<body >
<p >
<label for="prijs" >
Prijs per stuk
</label >
<input type="text" name="prijs" id="prijs" onchange="bereken();" / >
x
<label for="aantal" > Aantal </label >
<input type="text" name="aantal" id="aantal" onchange="bereken();" / >
=
<input type="text" name="resultaat" id="resultaat" / > </p >
</body >
</html >

Rekenen

Maak een webpagina waarmee je een lengte in inch kunt omrekenen naar cm. Waarbij één inch = 2,54 cm.

Maak daarvoor binnen de zin twee tekstvelden

Na het aanpassen van de waarde in het eerste tekstveld moet de waarde van het tweede tekstveld aangepast worden. Bij het aanpassen van de waarde in het eerste tekstveld wordt een functie uitgevoerd waarmee je de waarde in het eerste tekstveld omrekent naar inch en het resultaat in het tweede tekstveld plaatst.

Schrijf de JavaScript functie om inches om te rekenen naar cm.

Bij het testen in de browser wordt de omrekening pas uitgevoerd als je de cursor naar een ander tekstvak verplaatst (werking onchange).

Maak nadien een functie waar je het omgekeerde uitrekent: Een ... inch beeldscherm heeft een diameter van 54 cm.