Introductie in JavaScript
Waarvoor wordt JavaScript gebruikt?
JavaScript wordt gebruikt om het gedrag of interactie met een webpagina toe te voegen.Denk bijvoorbeeld aan:
- Formulier validatie
- Single Page Applications
- Uitrolmenu en afbeeldingen
- Aanpassen van style en animatie
- Ajax webapplicaties
Editor
Visual Studio Code is een aanrader, maar Notepad++ kan ook voldoen. Je kan alleen geen WYSIWYG editor gebruiken.JavaScript-debuggers
Om je programmeeromgeving compleet te maken heb je ook een debugger nodig. Met een debugger kan je onverwacht gedrag en fouten opsporen en verhelpen. Alle moderne browsers hebben een debugger (F12).Je eerste JavaScript
Je kunt overal binnen het HTML document JavaScript code plaatsen. Het is niet verplicht dit binnen de <head> tags te doen. Voor de organisatie en onderhoud van de site is het wel handig om de code te groeperen.<script>
// Plaats JavaScript code hier
</script>Binnen JavaScript code kan je // tekens gebruiken voor commentaar in de regel, of /* */ om een commentaarblok te maken.
Onderstaande code demonstreert een stukje JavaScript code door middel van een alert venstertje op het scherm:
<script>
// Laat alert venster zien met korte boodschap
alert ("Hello World - met JavaScript");
</script>Twee dingen vallen op:
- Alle tekst in de alert staat binnen de haken alert(...)
- Aan het einde van de opdracht staat een puntkomma ; Dit betekend in JavaScript dat de opdracht is afgesloten, elk statement wordt zo afgesloten.
JavaScript-functies
alert(...) is een ingebouwde functie in JavaScript en hoeft niet apart gedefiniëerd te worden. De browser zorgt ervoor dat het venster op het scherm komt en plaatst daar dan ook een OK knop bij.Er zijn natuurlijk ook gebruiker gedefinieerde functies, dat zijn de functies die je zelf schrijft.
Parameters en prompt()
Een andere standaard functie is de prompt(...), met deze functie kan je de gebruiker vragen iets in te vullen in het venster. De Prompt() functie heeft twee parameters. Parameters zijn de argumenten die tussen de haakjes staan. Een functie kan nul, één of meerdere parameters hebben.In het geval van de Prompt() functie zijn de parameters de tekst die in het scherm wordt getoond en een eventuele standaard tekst.
<body>
<div id="divResult"></div>
<script>
//twee variabelen
const code = prompt("Vul uw code in", "uw code");
const tekst = "De code die u ingaf: " + code;
//resultaat in de div plaatsen
document.getElementById("divResult").innerHTML = tekst;
</script>
</body>- Bij het starten van de code is de div nog leeg dus is er niets te zien.
- Door het ingeven van een code wordt de ingevulde waarde doorgegeven aan de variabele.
- In dit geval zijn de variabelen als const gedeclareerd, binnen javascript kan een variabele ook var(verouderd) of let zijn.
Het keyword const betekend constante en dat houdt in dat er een waarde aan de variabele wordt toegekend en dat die gedurende de uitvoer van het script niet meer wijzigen zal.
(op var en let komen we later terug) - De tweede variabele bevat een tekst waar de de ingegeven code aan wordt toegevoegd.
- Hierna wordt de variabele tekst in de div gezet door de eigenschap innerHTML te wijzigen met de inhoud van de variabele tekst
JavaScript-code in extern bestand
Om HTML en JavaScript gescheiden te houden kan je het JavaScript ook in een extern bestand opstaan en binnen de HTML code oproepen:<script src="jouwCode.js"></script>De syntaxis van JavaScript