Introductie

Javascript is een van de meest gebruikte programmeertalen. De populariteit is vooral te danken aan het feit dat de taal is ingebouwd in ongeveer alle webbrowsers. Javascript wordt dan ook voornamelijk gebruikt om webpagina's interactief te maken. Het kan HTML inhoud en attributen aanpassen, CSS stijlen aanpassen en HTML elementen verbergen en weer zichtbaar maken.

In HTML wordt JavaScript-code ingevoegd tussen <script> en </script> -tags.
Je kunt een willekeurig aantal scripts in een HTML-document plaatsen. Scripts kunnen in de <body>, of in de <head> -sectie van een HTML-pagina worden geplaatst, of in beide.

JavaScript kent ook procedures. In JavaScript noemen we dit een functie (function). Een functie kan bijvoorbeeld worden aangeroepen wanneer zich een gebeurtenis voordoet, bijvoorbeeld wanneer de gebruiker op een knop klikt.

Maak een nieuwe map in XAMPP. Maak in deze map een bestand met de naam index.html en vul dit bestand met de volgende code:

<!DOCTYPE html> <html> <head> <title>JavaScript</title> <meta charset="utf-8"> <script> function demo(){ document.getElementById("demo").innerHTML = "Hello JavaScript"; } </script> </head> <body> <h2>Wat javascript kan doen?</h2> <p id="demo">JavaScript kan HTML content aanpassen.</p> <button type="button" onclick="javascript:demo();">Klik hier!</button> </body> </html>

Open http://localhost en bekijk het resultaat. Je gaat dit bestand in de rest van de module gebuiken om dingen uit te proberen. Javascipt kan dus de inhoud van een tag aanpassen.

We gaan een paar dingen testen. Vervang nu iedere keer het stukje javascript code in de functie demo met de volgende stukjes code:
In javascript maakt het niet uit of je enkele of dubbele aanhalingstekens gebruikt:
document.getElementById("demo").innerHTML = 'Hello JavaScript';
Je kunt de grootte van het lettertype aanpassen:
document.getElementById("demo").style.fontSize = "35px";
Je kunt tags verbergen:
document.getElementById("demo").style.display = "none";
Maak nu zelf een extra procedure en knop om de tag weer zichtbaar te maken, gebruik hiervoor de volgende code:
document.getElementById("demo").style.display = "block";

Javascript code uitvoeren

Als je javascript gebruikt wordt de code uitgevoerd op de plek waar je de code schrijft. Laten we de volgende voorbeelden bekijken:

<!DOCTYPE html> <html> <head> <title>Javascript</title> <meta charset="utf-8"> </head> <body> <h1>Code Uitvoeren</h1> <div id="tekst"></div> <script type="text/javascript"> document.getElementById('tekst').innerHTML="Een div element vullen." </script> </body> </html>

Het div element met de id tekst zal na het laden van de pagina tekst bevatten. De code wordt namelijk uitgevoerd na het maken van het div element.

De volgend code werkt niet. De code wordt uitgevoerd voordat het div element bestaat:

<!DOCTYPE html> <html> <head> <title>Javascript</title> <meta charset="utf-8"> </head> <body> <h1>Code Uitvoeren</h1> <script type="text/javascript"> document.getElementById('tekst').innerHTML="Een div element vullen." </script> <div id="tekst"></div> </body> </html>

Waar je de code neerzet is dus van belang.

Als je gebruik maakt van knoppen die de gebruiker moet aanklikken, dan maakt het niet zoveel uit waar de code staat. De code wordt namenlijk toch pas uitgevoerd nadat de gebruiker op de knop klikt en de knop is pas beschikbaar als de pagina geladen is.

Meestal willen we de code in de header zetten. Dan staat alles netjes bij elkaar. Ook dan is het mogelijk om code uit te voeren nadat de pagina is geladen. Hiervoor gebruiken we de volgende code:

document.addEventListener("DOMContentLoaded", function(event) { // de code hier wordt uitgevoerd nadat de pagina is geladen. });

Alle code die je tussen de { } zet wordt pas uitgevoerd nadat de pagina is geladen. Het maakt niet meer uit waar de code staat in het HTML bestand.

Functies

Een JavaScript-functie is een codeblok dat is ontworpen om een bepaalde taak uit te voeren. Een JavaScript-functie wordt uitgevoerd wanneer "iets" het aanroept (aanroept).

Voorbeeld:
function myFunction(p1, p2) { return p1 * p2; // The function returns the product of p1 and p2 }

Syntaxis van JavaScript-functies

Een JavaScript-functie wordt gedefinieerd met het function trefwoord, gevolgd door een naam, gevolgd door haakjes (). Functienamen kunnen letters, cijfers, onderstrepingstekens en dollartekens bevatten (dezelfde regels als variabelen). De haakjes kunnen parameternamen bevatten, gescheiden door komma's: ( parameter1, parameter2, ... ). De code die door de functie moet worden uitgevoerd, wordt tussen accolades geplaatst: {}.

Voorbeeld:
function name(parameter1, parameter2, parameter3) { // code to be executed }
Functie parameters staan tussen haakjes () in de functiedefinitie.
De waarde waarmee je de parameters vult als je de functie aanroept noemen we argumenten.
Binnen de functie gedragen de argumenten (de parameters) zich als lokale variabelen.
Een functie is vrijwel hetzelfde als een procedure van een subroutine in andere programmeertalen.

Functie-aanroep

De code in de functie wordt uitgevoerd wanneer "iets" de functie aanroept (aanroept):

Wanneer er zich een event voordoet (bijv. wanneer een gebruiker op een knop klikt)
Wanneer het wordt aangeroepen vanuit JavaScript-code (bijv. mijnFunctie();)
Automatisch (zelf aangeroepen)

Functie Return

Wanneer JavaScript een return instructie bereikt, stopt de functie met uitvoeren. Als de functie werd aangeroepen vanuit een instructie, zal JavaScript "terugkeren" naar de plek waar deze is aangeroepen en zal het de code vanaf daar weer verder uitvoeren. Functies berekenen vaak een waarde die teruggegeven moet worden. Deze waarde wordt teruggegeven aan de plek waar de functie werd aangeroepen.

Voorbeeld:
Bereken het product van twee getallen en retourneer het resultaat:
function myFunction(a, b) { return a * b; // Function returns the product of a and b } var x = myFunction(4, 3); // Function is called, return value will end up in x
Het resultaat in x is:
12

Waarom functies?

Je kunt code hergebruiken: definieer de code één keer en gebruik deze meerdere keren.
Je kunt dezelfde code vaak met verschillende argumenten gebruiken om verschillende resultaten te verkrijgen.

Voorbeeld:
Fahrenheit in Celsius omrekenen:
function toCelsius(fahrenheit) { return (5/9) * (fahrenheit-32); } document.getElementById("demo").innerHTML = toCelsius(77);

De () operator roept de functie op

Met behulp van het bovenstaande voorbeeld toCelsius verwijst naar het functieobject en toCelsius() verwijst naar het functieresultaat. Toegang tot een functie zonder () zal het functieobject retourneren in plaats van het functieresultaat.

Voorbeeld:
function toCelsius(fahrenheit) { return (5/9) * (fahrenheit-32); } document.getElementById("demo").innerHTML = toCelsius;

Functies die worden gebruikt als variabele waarden

Functies kunnen op dezelfde manier worden gebruikt als variabelen, in alle soorten formules, toewijzingen en berekeningen.

Voorbeeld:
In plaats van een variabele te gebruiken om de geretourneerde waarde van een functie op te slaan:
var x = toCelsius(77); var text = "The temperature is " + x + " Celsius"; U kunt de functie direct gebruiken als een variabele waarde: var text = "The temperature is " + toCelsius(77) + " Celsius";

Lokale variabelen

Variabelen die binnen een JavaScript-functie zijn gedeclareerd, zijn LOKAAL voor de functie. Lokale variabelen zijn alleen toegankelijk vanuit de functie.

Voorbeeld:
// code here can NOT use carName function myFunction() { var carName = "Volvo"; // code here CAN use carName } // code here can NOT use carName

Omdat lokale variabelen binnen hun functies worden herkend en niet daarbuiten, kunnen variabelen met dezelfde naam ook in andere functies gebruikt worden. Lokale variabelen worden gemaakt wanneer een functie start en worden verwijderd wanneer de functie is voltooid.

Opdracht 1

Opdracht 1:

Maak een HTML pagina met minimaal 1 div element.
Geef dit element het id "demo".
Voeg nu twee button elementen toe en zorg er voor met javascript dat je de tekst in het div element kunt aanpassen door op de knoppen te klikken:

Knop 1 vult het div element met "Hallo"
Knop 2 vult het div element met "Wereld!"

Output

JavaScript kan gegevens op verschillende manieren 'weergeven':
Schrijven in een HTML-element met innerHTML.
Schrijven in de HTML-uitvoer met document.write().
Schrijven in een waarschuwingsvenster met window.alert().
Schrijven naar de browserconsole met console.log().

Om toegang te krijgen tot een HTML-element, kan JavaScript de document.getElementById(id) methode gebruiken.
Het id-attribuut definieert het HTML-element. De innerHTML-eigenschap definieert de HTML-inhoud:
In het vorige voorbeeld hebben we hier al gebruik van gemaakt. Hieronder nog een voorbeeld om te testen:

<!DOCTYPE html> <html> <head> <title>JavaScript</title> <meta charset="utf-8"> </head> <body> <h1>Demo</h1> <p>Een paragraaf</p>

<p id="test"></p>

<script> document.getElementById("test").innerHTML = 5 + 6; </script> </body> </html>

Om te kijken wat document.write() voeg je de volgende code toe aan de script tag:
document.write(5 + 6);
Je ziet nu twee keer de uitkomst staan. Eén keer in de paragraaf met id="test" en één keer los toegevoegd door document.write().

LET OP!: Als je document.write() gebruikt nadat een HTML-document is geladen, wordt alle bestaande HTML verwijderd:
<!DOCTYPE html> <html> <head> <title>JavaScript</title> <meta charset="utf-8"> </head> <body>

<h1>Demo</h1> <p>Een paragraaf</p>

<button type="button" onclick="document.write(5 + 6)">Klik hier!</button>

</body> </html>

Je kunt ook een waarschuwingsvenster gebruiken om gegevens weer te geven:
<!DOCTYPE html> <html> <head> <title>JavaScript</title> <meta charset="utf-8"> </head> <body> <h1>Demo</h1> <p>Een paragraaf</p>

<p id="test"></p>

<script> window.alert(5 + 6); </script> </body> </html>
Om fouten op te sporen kun je de methode console.log() in de browser aanroepen om gegevens weer te geven. Deze output kun je in chome en firefox vinden als je op F12 drukt en kiest voor console.
<!DOCTYPE html> <html> <head> <title>JavaScript</title> <meta charset="utf-8"> </head> <body> <h1>Demo</h1> <p>Een paragraaf</p>

<p id="test"></p>

<script> console.log(5 + 6); </script> </body> </html>

JavaScript heeft geen afdrukobject of afdrukmethoden.
Om veiligheidsredenen heeft JavaScript geen toegang tot uitvoerapparaten.
De enige uitzondering is dat je de methode window.print() in de browser kunt aanroepen om de inhoud van het huidige venster af te drukken.

Opdracht 2

Opdracht 2a:

Maak een HTML pagina.
Voeg nu een knop toe die met behulp van javascript een alert geeft met de volgende tekst: "Je hebt op de knop geklikt".

Opdracht 2b:

Zorg er voor dat hetzelfde bericht ook in de console (F12 -> console) te zien is.

Input

Javascript kan op verschillende manieren input ontvangen:

via klikken op HTML knoppen
via HTML input velden
via een popup venster

Javascript gebuikt events om te reageren op HTML knoppen. Meer hierover kun je lezen in het hoofdstuk "Javascript-Events".

HTML input velden

Naast knoppen kun je ook de inhoud van HTML input velden uitlezen en verwerken. Om toegang te krijgen tot een HTML-element, gebruiken we weer de document.getElementById(id) methode.

Het id-attribuut definieert het HTML-element. De value-eigenschap definieert de HTML-inhoud:
Hieronder een voorbeeld om te testen:

<!DOCTYPE html> <html> <head> <title>JavaScript</title> <meta charset="utf-8"> </head> <body> <h1>Demo</h1> <input type="text" name="demo1" id="demo1" value="hello"> <br> <input type="checkbox" name="demo2" id="demo2" checked> <br> <input type="date" name="demo3" id="demo3" value="2020-11-05"> <br> <br> <br> <script> var data = document.getElementById("demo1").value; document.write(data+"<br>"); data = document.getElementById("demo2").checked; document.write(data+"<br>"); data = document.getElementById("demo3").value; document.write(data+"<br>"); </script> </body> </html>

Meer HTML input elementen kun je vinden op de volgende pagina: https://www.w3schools.com/html/html_form_input_types.asp

Het vullen van HTML input elementen met een waarde gaat als volgt:

voorbeeld:

document.getElementById("demo1").value = "hello"; document.getElementById("demo2").checked = false; document.getElementById("demo3").value = "2020-11-05";

Popup venster

Naast input velden is het ook mogelijk om input te vragen via een popup. Deze methode wordt niet vaak gebruikt aangezien dit vaak niet als gebruikersvriendelijk wordt ervaren.

voorbeeld:

var name = window.prompt("Enter your name: ");

Opdracht 3

Opdracht 3a:

Maak een HTML pagina met twee tekst input elementen. De eerste heet "naam" de tweede heet "leeftijd".
Maak een button element die het naam veld vult met jouw naam en het leeftijd veld vult met jouw leeftijd.

Opdracht 3b:

Maak een tweede knop die de velden weer leeg maakt.

Een programma

Een computerprogramma is een lijst met "instructies" die door een computer moeten worden "uitgevoerd". In een programmeertaal worden deze programmeerinstructies statements genoemd. Een JavaScript-programma is een lijst met programmeerinstructies.

Statements

JavaScript-instructies zijn samengesteld uit: Values, Operators, Expressions, Keywords en Comments.
Het volgende statement vertelt de browser om "Hello World" te schrijven. in een HTML-element met id = "demo":
// Dit is een opmerking document.getElementById("demo").innerHTML="Hello World.";
De meeste JavaScript-programma's bevatten veel JavaScript-instructies.
De statements worden één voor één uitgevoerd in dezelfde volgorde als waarin ze zijn geschreven.

<!DOCTYPE html> <html> <head> <title>JavaScript</title> <meta charset="utf-8"> </head> <body> <h2>Statements</h2> <p>Een <b>JavaScript programma</b> is een lijst met <b>statements</b> die door een computer worden uitgevoerd.</p> <p id="demo"></p> <script> var x, y, z; // Statement 1 x = 5; // Statement 2 y = 6; // Statement 3 z = x + y; // Statement 4 document.getElementById("demo").innerHTML = "The value of z is " + z + "."; </script> </body> </html>

Puntkomma's

Puntkomma's scheiden JavaScript-instructies. Voeg een puntkomma toe aan het einde van elke uitvoerbare instructie:
var a, b, c; // Declareer 3 variabelen a = 5; // Wijs de waarde 5 toe aan a b = 6; // Wijs de waarde 6 toe aan b c = a + b; // Wijs de som van a en b toe aan c

Je mag meerdere statements op één regel zetten als je ze met een puntkomma scheidt.
a = 5; b = 6; c = a + b;

Op internet ziet je vaak voorbeelden zonder puntkomma's. Het beëindigen van instructies met een puntkomma is niet vereist, maar wordt ten zeerste aanbevolen.

Spaties

JavaScript negeert meerdere spaties. U kunt extra spaties aan uw script toevoegen om het leesbaarder te maken.

De volgende regels zijn voor JavaScript hetzelfde:

var person="Hege"; var person = "Hege";

Een goede gewoonte is om spaties rond operatoren te plaatsen (= + - * /):

var x = y + z;

Regellengte en regelonderbrekingen
Voor de beste leesbaarheid vermijden programmeurs vaak coderegels die langer zijn dan 80 tekens.
Als een JavaScript-instructie niet op één regel past, kun je deze het beste afbreken na een operator:

document.getElementById ("demo"). innerHTML = "Hallo Dolly!";

Code Blokken
JavaScript-instructies kunnen worden gegroepeerd in codeblokken, tussen accolades {...}.
Het doel van codeblokken is om instructies te definiëren die samen moeten worden uitgevoerd.
Code blokken vind je bijvoorbeeld bij JavaScript-functies:

functie myFunction () { document.getElementById ("demo1"). innerHTML = "Hallo Dolly!"; document.getElementById ("demo2"). innerHTML = "Hoe gaat het?"; }

Keywords

JavaScript-instructies beginnen vaak met een keyword om aan te geven welke JavaScript-actie uitgevoerd moet worden.

Op https://www.w3schools.com/js/js_reserved.asp vind je een overzicht van alle gereserveerde JavaScript-keywords.

Hieronder staat een lijst met enkele van de keywords die je in deze module tegenkomt:

Keyword	beschrijving
break	Beëindigt een schakelaar of een lus
continue	Springt uit een lus en begint bovenaan
debugger	Stopt de uitvoering van JavaScript en roept (indien beschikbaar) de foutopsporingsfunctie aan
do...while	Voert een blok met instructies uit en herhaalt het blok, terwijl een voorwaarde waar is
for	Markeert een blok met uit te voeren instructies, zolang een voorwaarde waar is
function	Declareert een functie
if...else	Markeert een blok met uit te voeren instructies, afhankelijk van een voorwaarde
return	Sluit een functie af
switch	Markeert een blok met uit te voeren instructies, afhankelijk van verschillende gevallen
try...catch	Implementeert foutafhandeling in een blok met instructies
var	Declareert een variabele

JavaScript-keywords zijn gereserveerde woorden. Gereserveerde woorden kunnen niet worden gebruikt als namen voor variabelen.

Opdracht 4

Opdracht 4:

Maak een HTML pagina met drie input elementen en één button element.

Zorg er met javascript voor dat als je op de knop klikt de waarde uit input element 1 opgelteld wordt bij input element 2 en wordt weergegeven in input element 3. Oftewel maak een optel knop.

TIP: de waarde van tekst input elementen is een tekst geen getal. 2+3 wordt dan ook 23. Om dit op te lossen moeten we de tekst omzetten in een getal. Dit kan door de functie parseInt() te gebruiken. parseInt(2)+parseInt(3) wordt dan 5.

Syntax

JavaScript-syntaxis is de set regels, hoe JavaScript-programma's zijn opgebouwd:

var x, y, z; // Declare Variables x = 5; y = 6; // Assign Values z = x + y; // Compute Values

JavaScript-waarden

De JavaScript-syntaxis definieert twee soorten waarden:

Vaste waarden
Variabele waarden

Vaste waarden worden literals genoemd .
Variabele waarden worden variabelen genoemd .

Literals

De twee belangrijkste syntaxisregels voor vaste waarden zijn:

1. Getallen; worden met of zonder decimalen geschreven:
10.50 1001
2. Strings; zijn tekst, geschreven tussen dubbele of enkele aanhalingstekens:
"John Doe" 'John Doe'

Variabelen

In een programmeertaal worden variabelen gebruikt om datawaarden op te slaan.
JavaScript gebruikt het var trefwoord om variabelen te declareren.
Een is-teken wordt gebruikt om waarden aan variabelen toe te wijzen.
In dit voorbeeld wordt x gedefinieerd als een variabele. Vervolgens krijgt x de waarde 6 toegewezen (gegeven):

var x; x = 6;

Operators

JavaScript gebruikt rekenkundige operatoren ( + - * / ) om waarden te berekenen :
(5 + 6) * 10
JavaScript gebruikt een toewijzingsoperator ( = om waarden aan variabelen toe te wijzen) :
var x, y; x = 5; y = 6;

Rekenkundige operatoren

Rekenkundige operatoren worden gebruikt om rekenkundige bewerkingen uit te voeren op getallen:

Operator	Omschrijving
+	Optellen
-	Aftrekken
*	Vermenigvuldigen
**	Machtsverheffen
/	Delen
%	Modulus (Division Remainder)
++	Plus 1
--	Min 1

JavaScript-toewijzingsoperatoren
Toewijzingsoperatoren wijzen waarden toe aan JavaScript-variabelen.

Operator	Voorbeeld	Hetzelfde als
=	x = y	x = y
+=	x += y	x = x + y
-=	x -= y	x = x - y
*=	x *= y	x = x * y
/=	x /= y	x = x / y
%=	x %= y	x = x % y
**=	x **= y	x = x ** y

De toevoeging opdracht operator ( += ) voegt een waarde toe aan een variabele:
var x = 10; x += 5;

JavaScript vergelijkings Operatoren

Deze operatoren worden vaak gebruikt in if constructies.

Operator	Omschrijving
==	equal to
===	equal value and equal type
!=	not equal
!==	not equal value or not equal type
>	greater than
<	less than
>=	greater than or equal to
<=	less than or equal to
?	ternary operator

if ( x==10 ) { window.alert("Oke"); }

JavaScript logische operatoren

Om vergelijkings operatoren te verbinden gebruiken we logische operatoren.

Operator	Omschrijving
&&	logical and
\|\|	logical or
!	logical not

if ( x==10 && y==5 ) { window.alert("Oke"); }

Expressions

Een expression is een combinatie van waarden, variabelen en operatoren, die tot een waarde wordt berekend.
De berekening wordt een evaluatie genoemd.
5 * 10 wordt 50
Expressies kunnen ook variabele waarden bevatten:
x * 10
De waarden kunnen van verschillende typen zijn, zoals getallen en tekenreeksen.
Bijvoorbeeld, "Jan" + "" + "Doe", wordt "Jan Doe".

Keywords

JavaScript-keywords worden gebruikt om acties te identificeren die moeten worden uitgevoerd.
Het var keyword vertelt bijvoorbeeld de browser om variabelen te maken:
var x, y; x = 5 + 6; y = x * 10;

Comments

Niet alle JavaScript-instructies worden "uitgevoerd".
Code na dubbele schuine strepen // of tussen /* en */ wordt als commentaar behandeld .
Comments worden genegeerd en zullen niet worden uitgevoerd:
var x = 5; // I will be executed // var x = 6; I will NOT be executed

Identifiers (ID's)

ID's zijn namen. In JavaScript worden id's gebruikt om variabelen (en keywords, functies en labels) een naam te geven. De regels voor legale namen zijn vrijwel hetzelfde in de meeste programmeertalen. In JavaScript moet het eerste teken een letter zijn, of een onderstrepingsteken (_), of een dollarteken ($). De volgende tekens kunnen letters, cijfers, onderstrepingstekens of dollartekens zijn. Cijfers zijn niet toegestaan als eerste teken. Op deze manier kan JavaScript gemakkelijk identifiers van getallen onderscheiden.

JavaScript is hoofdlettergevoelig

Alle JavaScript-ID's zijn hoofdlettergevoelig. De variabelen lastName en lastname zijn twee verschillende variabelen:

var lastname, lastName; lastName = "Doe"; lastname = "Peterson";
JavaScript interpreteert VAR of Var niet als het trefwoord var.

JavaScript en Camel Case

Historisch gezien hebben programmeurs verschillende manieren gebruikt om meerdere woorden samen te voegen tot één variabelenaam:

~~Koppeltekens~~:
first-name, last-name, master-card, inter-city.
Koppeltekens zijn niet toegestaan in JavaScript. Ze zijn gereserveerd voor wiskundige bewerkingen.
Laag streepje:
first_name, last_name, master_card, inter_city.
Upper Camel Case (Pascal Case):
FirstName, LastName, MasterCard, InterCity.
Lower Camel Case:
JavaScript-programmeurs hebben de neiging om camel case te gebruiken die met een kleine letter beginnen:
firstName, lastName, masterCard, interCity.

JavaScript-tekenset

JavaScript gebruikt de Unicode- tekenset.
Unicode bevat (bijna) alle tekens, leestekens en symbolen die in de wereld gebruikt worden.

Opdracht 5

Opdracht 5a:

Maak een HTML pagina met drie tekst input elementen en een button element.
Zorg er voor dat je een functie maakt die de waarde van twee elementen opslaat in de variabelen x en y. En vervolgens deze waarden van elkaar af haalt en opslaat in de variable z. Laat de waarde van z zien in het derde tekst element.

Opdracht 5b:

Pas jou functie aan zodat de kleur van de tekst in het antwoord input element rood wordt als de waarde negatief is en zwart als de waarde positief. Hiervoor gebruik je de javascript code om de tekstkleur aan te passen:

document.getElementById("antwoord").style.color="red";

Data-typen

JavaScript-variabelen kunnen veel gegevenstypen bevatten : getallen, tekenreeksen, objecten en meer:

var length = 16; // Number var lastName = "Johnson"; // String var x = {firstName:"John", lastName:"Doe"}; // Object

Het concept van gegevenstypen

Bij het programmeren zijn datatypes een belangrijk concept. Om met variabelen te kunnen werken, is het belangrijk iets over het type te weten. Zonder datatypes kan een computer dit niet oplossen oplossen:

var x = 16 + "Volvo";

Heeft het zin om "Volvo" toe te voegen aan zestien? Zal het een fout opleveren van het resultaat? JavaScript behandelt het bovenstaande voorbeeld als:

var x = "16" + "Volvo";

Bij het toevoegen van een getal en een string, behandelt JavaScript het getal als een string.

JavaScript evalueert uitdrukkingen van links naar rechts. Verschillende sequenties kunnen verschillende resultaten opleveren:

JavaScript:
var x = 16 + 4 + "Volvo";
Resultaat:
20Volvo

JavaScript:
var x = "Volvo" + 16 + 4;
Resultaat:
Volvo164

JavaScript:
var x = "Volvo" + (16 + 4);
Resultaat:
Volvo20

In het eerste voorbeeld behandelt JavaScript 16 en 4 als getallen, totdat het "Volvo" bereikt is.
In het tweede voorbeeld, de eerste operand is een string, worden alle operanden behandeld als strings. In het laatste voorbeeld worden eerst de haakjes opgelost en het restultaat als string toegevoegd.

JavaScript-typen zijn dynamisch

JavaScript heeft dynamische typen. Dit betekent dat dezelfde variabele kan worden gebruikt om verschillende gegevenstypen vast te houden.

Voorbeeld:
var x; // Now x is undefined x = 5; // Now x is a Number x = "John"; // Now x is a String

JavaScript-strings

Een string (of een tekenreeks) is een reeks karakters zoals "John Doe".

Tekenreeksen worden tussen aanhalingstekens geschreven. U kunt enkele of dubbele aanhalingstekens gebruiken.
Voorbeeld:
var carName1 = "Volvo XC60"; // Using double quotes var carName2 = 'Volvo XC60'; // Using single quotes
U kunt aanhalingstekens binnen een tekenreeks gebruiken, zolang ze niet overeenkomen met de aanhalingstekens rond de tekenreeks.

Voorbeeld:
var answer1 = "It's alright"; // Single quote inside double quotes var answer2 = "He is called 'Johnny'"; // Single quotes inside double quotes var answer3 = 'He is called "Johnny"'; // Double quotes inside single quotes

JavaScript-nummers

JavaScript heeft slechts één type getallen. Getallen kunnen met of zonder decimalen worden geschreven.

Voorbeeld:
var x1 = 34.00; // Written with decimals var x2 = 34; // Written without decimals

Extra grote of extra kleine getallen kunnen met wetenschappelijke (exponentiële) notatie worden geschreven.

Voorbeeld:
var y = 123e5; // 12300000 var z = 123e-5; // 0.00123

JavaScript Booleans

Booleans kunnen slechts twee waarden hebben: true of false.

Voorbeeld:
var x = 5; var y = 5; var z = 6; (x == y) // Returns true (x == z) // Returns false

Booleans worden vaak gebruikt bij voorwaardelijk testen.

JavaScript-arrays

Een array is een verzameling waarden. JavaScript-arrays worden tussen vierkante haken geschreven. Array-items worden gescheiden door komma's. De volgende code declareert (maakt) een array genaamd cars, met drie items (autonamen).

Voorbeeld:
var cars = ["Saab", "Volvo", "BMW"]; window.alert(cars[0]); // Outputs Saab window.alert(cars[2]); // Outputs BMW

Array-indexen zijn op nul gebaseerd, wat betekent dat het het eerste item [0] is, het tweede [1], enzovoort.

JavaScript-objecten

JavaScript-objecten worden met accolades geschreven {}. Objecteigenschappen worden geschreven als naam: waardeparen, gescheiden door komma's.

Voorbeeld:
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
Het object (persoon) in het bovenstaande voorbeeld heeft 4 eigenschappen: firstName, lastName, age en eyeColor.

Het type operator

U kunt de JavaScript- typeofoperator gebruiken om het type JavaScript-variabele te vinden.
De typeofoperator retourneert het type van een variabele of een uitdrukking.

Voorbeeld:
typeof "" // Returns "string" typeof "John" // Returns "string" typeof "John Doe" // Returns "string"
Voorbeeld:
typeof 0 // Returns "number" typeof 314 // Returns "number" typeof 3.14 // Returns "number" typeof (3) // Returns "number" typeof (3 + 4) // Returns "number"

Ongedefinieerd

In JavaScript heeft een variabele zonder waarde de waarde undefined. Het type is ook undefined.

Voorbeeld:
var car; // Value is undefined, type is undefined

Elke variabele kan worden geleegd door de waarde in te stellen op undefined. Het type zal ook zijn undefined.

Voorbeeld:
car = undefined; // Value is undefined, type is undefined

Lege waarden

Een lege waarde heeft niets te maken met undefined. Een lege string heeft zowel een legale waarde als een type.

Voorbeeld:
var car = ""; // The value is "", the typeof is "string"

Null

In JavaScript null is "niets". Het wordt verondersteld iets te zijn dat niet bestaat. Helaas is in JavaScript het gegevenstype null een object. Je kunt het beschouwen als een bug in JavaScript die typeof null een object is. Het zou moeten zijn null. U kunt een object leegmaken door het in te stellen op null.

Voorbeeld:
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}; person = null; // Now value is null, but type is still an object

U kunt een object ook leegmaken door het in te stellen op undefined.

Voorbeeld:
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}; person = undefined; // Now both value and type is undefined

Verschil tussen ongedefinieerd en null

undefined en null zijn gelijk in waarde maar verschillend van type:
typeof undefined // undefined typeof null // object null === undefined // false, inhoud en type vergelijken null == undefined // true, alleen inhoud vergelijken

Primitieve gegevens

Een primitieve gegevenswaarde is een enkele eenvoudige gegevenswaarde zonder aanvullende eigenschappen en methoden. De typeof operator kan één van deze primitieve typen retourneren:

string
number
boolean
undefined

Voorbeeld:
typeof "John" // Returns "string" typeof 3.14 // Returns "number" typeof true // Returns "boolean" typeof false // Returns "boolean" typeof x // Returns "undefined" (if x has no value)

Complexe gegevens

De typeof operator kan een van twee complexe typen retourneren:

function
object

De typeof operator retourneert "object" voor objecten, arrays en null. De typeof operator retourneert geen "object" voor functies.

Voorbeeld:
typeof {name:'John', age:34} // Returns "object" typeof [1,2,3,4] // Returns "object" (not "array", see note below) typeof null // Returns "object" typeof function myFunc(){} // Returns "function"
De typeofoperator retourneert "object" voor arrays, omdat in JavaScript arrays objecten zijn.

Opdracht 6

Opdracht 6:

Maak een HTML pagina. Voeg hieraan drie tekst input velden aan toe, genaamd: Voornaam, Tussenvoegsel en Achternaam.
Voeg een div element en een button element toe.

Als je op de knop klikt worden de Voornaam, Tussenvoegsel en de Achtenaam samengevoegd en weergegeven in het div element. Als het tussenvoegel leeg is mag er maar 1 spatie tussen de Voor- en achtenaam staan.

JavaScript-Events

HTML-events zijn "dingen" die gebeuren met HTML-elementen. Als JavaScript wordt gebruikt in HTML-pagina's, kan JavaScript op deze gebeurtenissen "reageren" .

HTML-events

Een HTML-gebeurtenis kan iets zijn dat de browser doet of iets dat een gebruiker doet. Hier zijn enkele voorbeelden van HTML-gebeurtenissen:

Een HTML-webpagina is geladen
Een HTML-invoerveld is gewijzigd
Er is een HTML-knop geklikt
Als er iets gebeurt, wil je vaak iets doen.

Met JavaScript kunt u code uitvoeren wanneer gebeurtenissen worden gedetecteerd.
In HTML kunnen event handler-attributen gevuld worden met JavaScript-code.

Met enkele aanhalingstekens:
<element event='some JavaScript'>
Met dubbele aanhalingstekens:
<element event="some JavaScript">

In het volgende onclick voorbeeld wordt een attribuut (met code) toegevoegd aan een <button> element:

Voorbeeld
<button onclick="document.getElementById('demo').innerHTML = Date()">The time is?</button>
In het bovenstaande voorbeeld verandert de JavaScript-code de inhoud van het element met id = "demo".

In het volgende voorbeeld verandert de code de inhoud van zijn eigen element (met this.innerHTML):

Voorbeeld
<button onclick="this.innerHTML = Date()">The time is?</button>
JavaScript-code is vaak meerdere regels lang, daarom is het gebruikelijk om een functie aan te roepen bij een event:

Voorbeeld
<button onclick="displayDate()">The time is?</button>

Veel voorkomende HTML-events

Hier is een lijst met enkele veelvoorkomende HTML-gebeurtenissen:

Evenement	Omschrijving
onchange	Een HTML-element is gewijzigd
onclick	De gebruiker klikt op een HTML-element
onmouseover	De gebruiker beweegt de muis over een HTML-element
onmouseout	De gebruiker beweegt de muis weg van een HTML-element
onkeydown	De gebruiker drukt op een toets
onload	De browser is klaar met het laden van de pagina

De lijst is veel langer: W3Schools JavaScript Reference HTML DOM Events.

Wat kan JavaScript doen?

Event handlers kunnen worden gebruikt om gebruikersinvoer, gebruikersacties en browseracties af te handelen en te verifiëren:

Dingen die moeten worden gedaan elke keer dat een pagina wordt geladen
Dingen die moeten worden gedaan als de pagina is gesloten
Actie die moet worden uitgevoerd wanneer een gebruiker op een knop klikt
Inhoud die moet worden geverifieerd wanneer een gebruiker gegevens invoert
En meer ...

Er kunnen verschillende methoden worden gebruikt om JavaScript met gebeurtenissen te laten werken:

HTML-event attributen kunnen JavaScript-code rechtstreeks uitvoeren
HTML-event attributen kunnen JavaScript-functies aanroepen
U kunt uw eigen event handler functies toewijzen aan HTML-elementen
U kunt voorkomen dat gebeurtenissen worden verzonden of afgehandeld
En meer ...

Opdracht 7

Opdracht 7:

We hebben al een paar keer het event "onclick" gebruikt nu gaan we een ander event gebruiken: "onmouseover".

Maak een HTML pagina met vier div elementen met de volgende id's: A, B, C, en TEKST.
Voeg bij de A, B en C div elemeneten een "onmouseover" event toe met een funtie met één parameter. Voor div element A moet parameter "A" worden toegevoegd Voor B, parameter "B" en voor C parameter "C".

Schrijf nu een javascript functie die de tekst in div TEKST iedere keer aanvult met de letter waar de muis overheen gaat.

If en Switch

In JavaScript hebben we de volgende voorwaardelijke uitspraken:

Gebruik if dit om een codeblok op te geven dat moet worden uitgevoerd, als een gespecificeerde voorwaarde waar is.
Gebruik else dit om een codeblok op te geven dat moet worden uitgevoerd, als dezelfde voorwaarde onwaar is.
Gebruik else if om een nieuwe voorwaarde op te geven om te testen, als de eerste voorwaarde onwaar is.
Gebruik switch dit om veel alternatieve codeblokken op te geven die moeten worden uitgevoerd.

If

Gebruik de if instructie om een blok JavaScript-code op te geven dat moet worden uitgevoerd als een voorwaarde waar is.

Voorbeeld:

if (hour < 18) { greeting = "Good day"; }

Voorbeeld:

Als het uur minder is dan 18, maakt u een begroeting met 'Goedendag', anders 'Goedenavond':

if (hour < 18) { greeting = "Good day"; } else { greeting = "Good evening"; }

Voorbeeld:

Als de tijd minder is dan 10.00 uur, maakt u een "Goedemorgen" -groet, zo niet, maar de tijd is minder dan 20.00 uur, maakt u een "Goedendag" -groet, anders een "Goedenavond":

if (time < 10) { greeting = "Good morning"; } else if (time < 20) { greeting = "Good day"; } else { greeting = "Good evening"; }

Switch

Gebruik de switchinstructie om een van de vele codeblokken te selecteren die moeten worden uitgevoerd.

Dit is hoe het werkt:

De switch-uitdrukkingen wordt één keer geëvalueerd.
De waarde van de uitdrukkingen wordt vergeleken met de waarden van elk geval.
Als er een overeenkomst is, wordt het bijbehorende codeblok uitgevoerd.
Als er geen overeenkomst is, wordt het standaard codeblok uitgevoerd.

Voorbeeld:

De getDay()methode retourneert de weekdag als een getal tussen 0 en 6 (Zondag = 0, maandag = 1, dinsdag = 2 ..). In dit voorbeeld wordt het weekdagnummer gebruikt om de naam van de weekdag te berekenen:

switch (new Date().getDay()) { case 0: day = "Sunday"; break; case 1: day = "Monday"; break; case 2: day = "Tuesday"; break; case 3: day = "Wednesday"; break; case 4: day = "Thursday"; break; case 5: day = "Friday"; break; case 6: day = "Saturday"; }

Het break-keyword

Wanneer JavaScript een break trefwoord bereikt , breekt het uit het schakelblok. Dit zal de uitvoering in het blok stoppen. Het is niet nodig om bij de laatste het schakelblok te breken. Het blok breekt (meestal) daar toch.

Het standaard-keyword

Het defaultsleutelwoord specificeert de code die moet worden uitgevoerd als geen van de condities waar is:

Voorbeeld:

De getDay()methode retourneert de weekdag als een getal tussen 0 en 6. Als het vandaag noch zaterdag (6) noch zondag (0) is, schrijf dan een standaardbericht:

switch (new Date().getDay()) { case 6: text = "Today is Saturday"; break; case 0: text = "Today is Sunday"; break; default: text = "Looking forward to the Weekend"; }

Het default blok hoeft niet de laatste te zijn maar mag ook op een andere plek staan.

Opdracht 8

Opdracht 8a:

Maak een HTML document met een button element en een div element.

Schrijf een javascript functie die, als je op de knop klikt, het div element vult met: Ochtend, Middag, Avond of Nacht. Dit moet afhankelijk zijn van de tijd die het nu is.
De huidige uren kun je vinden met de volgende javascript functie:

uren = new Date().getHours()

In de volgende tabel kun je vinden welke uren er bij welk woord horen:

>=0	<6	Nacht
>=6	<12	Ochtend
>=12	<18	Middag
>=18	<=23	Avond

Opdracht 8b:

Vul jouw script aan zodat er ook de dag van de week bij staat.

Herhalen: For en While

Herhalingen of anders gezegd; lussen, zijn handig als je dezelfde code steeds opnieuw wilt uitvoeren, elke keer met een andere waarde.

Dit is vaak het geval bij het werken met arrays:

In plaats van:

text += cars[0] + "<br>"; text += cars[1] + "<br>"; text += cars[2] + "<br>"; text += cars[3] + "<br>"; text += cars[4] + "<br>"; text += cars[5] + "<br>";

Kun je ook schrijven:

var i; for (i = 0; i < cars.length; i++) { text += cars[i] + "<br>"; }

Verschillende soorten lussen

JavaScript ondersteunt verschillende soorten loops:

for - loopt een aantal keren door een codeblok
for/in - doorloopt de eigenschappen van een object
for/of - doorloopt de waarden van een itereerbaar object
while - doorloopt een codeblok tot een gespecificeerde gespecificeerde conditie waar is
do/while - loopt ook door een codeblok tot een gespecificeerde gespecificeerde conditie waar is

De For-lus

De for lus heeft de volgende syntaxis:

for (statement 1; statement 2; statement 3) { // code block to be executed }

Statement 1 wordt (één keer) uitgevoerd voordat het codeblok wordt uitgevoerd.

Statement 2 definieert de voorwaarde voor het uitvoeren van het codeblok.

Statement 3 wordt (elke keer) uitgevoerd nadat het codeblok is uitgevoerd.

Voorbeeld:

for (i = 0; i < 5; i++) { text += "The number is " + i + "<br>"; }

Het bovenstaande voorbeeld kunt je als volgt lezen:

Statement 1 stelt een variabele in voordat de lus start (var i = 0).
Statement 2 definieert de voorwaarde voor het uitvoeren van de lus (i moet kleiner zijn dan 5).
Statement 3 verhoogt een waarde (i ++) elke keer dat het codeblok in de lus wordt uitgevoerd.

Opmerkingen:

Statement 1 hoeft niet te beginnen met 0, maar kan ook starten met 5. Vaak wordt i gebruikt als variabele maar andere namen mogen ook.

Bij statement 3 wordt iedere keer met 1 verhoogd, maar i=i+2 mag ook.

De For / In-lus

De JavaScript- for/in instructie doorloopt de eigenschappen van een object:

Voorbeeld:

var person = {fname:"John", lname:"Doe", age:25}; var text = ""; var x; for (x in person) { text += person[x]; } Console.log(text);
Reslutaat:

John Doe 25

De For / Of-lus

De JavaScript- for/ofinstructie doorloopt de waarden van een itereerbaar object. for/of laat je datastructuren doorlopen, zoals Arrays, Strings, Maps, NodeLists en meer.

Voorbeeld:

var cars = ["BMW", "Volvo", "Mini"]; var x; for (x of cars) { document.write(x + "<br >"); }

Je kunt hiermee ook door iedere letter van een sting lopen:

Voorbeeld

var txt = "JavaScript"; var x; for (x of txt) { document.write(x + "<br >"); }

De While-lus

De whilelus loopt door een codeblok een gespecificeerde standaard waar is.

In het volgende voorbeeld wordt de code in de lus keer op keer uitgevoerd, zolang een variabele (i) kleiner is dan 10:

Voorbeeld:
var i=0; while (i < 10) { console.log("The number is " + i); i++; }

De Do / While-lus

De do/whilelus is een variant van de while-lus. Deze lus zal het codeblok één keer uitvoeren, voordat wordt gecontroleerd of de voorwaarde waar is, daarna zal de lus worden zolang de voorwaarde waar is.

Voorbeeld:

In het onderstaande voorbeeld wordt een do/whilelus gebruikt. De lus wordt altijd één keer uitgevoerd, zelfs als de voorwaarde onwaar is, omdat het codeblok wordt voordat de voorwaarde wordt getest:

do { console.log("The number is " + i); i++; } while (i < 10);

Vergeet niet de variabele die in de conditie wordt gebruikt te verhogen, anders de lus nooit!

Het break-statement

De breakinstructie kan ook worden gebruikt om uit een lus te springen. De breakinstructie breekt de lus en gaat door met het uitvoeren van de code na de lus (indien aanwezig):

Voorbeeld:

for (i = 0; i < 10; i++) { if (i === 3) { break; } console.log("The number is " + i); }

Break werkt in alle lussen.

Het continue-statment

De continueinstructie verbreekt één iteratie van de lus, en gaat verder met de volgende iteratie in de lus.

Voorbeeld:

In dit voorbeeld wordt de waarde 3 overgeslagen:

for (i = 0; i < 10; i++) { if (i === 3) { continue; } console.log("The number is " + i); }

Opdracht 9

Opdracht 9:

Maak een HTML pagina met een button element en een div element.
Schrijf een functie die, als je op de knop klikt, de div vult met de kwadraten van 0 t/m 10.
Gebruik hiervoor een "for" lus.

Timers

Het is mogeijk om functies aan te roepen na een bepaalde tijd. Zo kun je bijvoorbeeld een bericht geven als iemand al 15 minuten op de pagina is. Ook is het mogelijk om een functie iedere zoveel seconde te laten uitvoeren. Heb je bijvoorbeeld een klok op jouw site, dan kun je de tijd iedere seconde bijwerken. De functies die je hiervoor gebruikt zijn: setTimeout() en setInterval().

setTimeout()

Wacht 5 seconden op de begroeting:

const myTimeout = setTimeout(myGreeting, 5000);

Gebruik clearTimeout(myTimeout) om te voorkomen dat myGreeting wordt uitgevoerd:

const myTimeout = setTimeout(myGreeting, 5000); function myStopFunction() { clearTimeout(myTimeout); }

Definitie en gebruik

De setTimeout()methode roept een functie aan na een aantal milliseconden.
1 seconde = 1000 milliseconden.

setTimeout() wordt slechts één keer uitgevoerd.

Als je iets met een interval wilt uitvoeren, bijvoorbeeld iedere 2 seconden dan gebruik je setInterval().

Gebruik de clearTimeout() methode om de timeout methode te stoppen als je deze hebt aangeroepen.

Om een time-out te stoppen gebruikt je het id wat is geretourneerd door setTimeout():

myTimeout = setTimeout(function, milliseconds);

Vervolgens kunt u de uitvoering stoppen door clearTimeout() aan te roepen:

clearTimeout(myTimeout);

Nog een voorbeeld

let x = document.getElementById("txt"); setTimeout(function(){ x.value = "2 seconds" }, 2000); setTimeout(function(){ x.value = "4 seconds" }, 4000); setTimeout(function(){ x.value = "6 seconds" }, 6000);

setInterval()

Geef elke seconde "Hallo" weer (1000 milliseconden):

setInterval(function () {element.innerHTML += "Hello"}, 1000);

Roep displayHello elke seconde aan:

setInterval(displayHello, 1000);

Definitie en gebruik

De setInterval() methode roept een functie aan op gespecificeerde intervallen (in milliseconden).

De setInterval() methode blijft de functie aanroepen totdat deze clearInterval() wordt aangeroepen of het venster wordt gesloten.

Gebruik setTimeout() in plaats van de methode setInterval() om de functie slechts één keer uit te voeren.

Gebruik de id die is geretourneerd door setInterval() om een interval te wissen:

myInterval = setInterval(function, milliseconds);
Vervolgens kunt je de uitvoering stoppen door clearInterval() aan te roepen:
clearInterval(myInterval);

Opdracht 10

Opdracht 10a:

Maak een HTML pagina met een button element en een div element.
Schrijf twee functies de ene zet een timer aan voor 5 seconde als je op de knop klikt. De andere functie vult het div element met de tekst "Hallo wereld!" en wordt na 5 seconde uitgevoerd door de timer.

Opdracht 10b:

Maak een derde functie die iedere seconde het div element aanvult met een extra uitroepteken.

Opdracht 10c:

Maak nu ook nog een klok op de pagina. Om de tijd op te vragen gebruik je de volgende code:

var d = new Date(); document.getElementById('klok').innerHTML = d.toLocaleTimeString();

Zorg ervoor dat de tijd iedere seconde wordt bijgewerkt.

JSON en AJAX

JSON is een formaat voor het opslaan en transporteren van gegevens.

JSON wordt vaak gebruikt wanneer gegevens van een server naar een webpagina worden verzonden.

Wat is JSON?

JSON staat for J ava S cript O bject N otation
JSON is een lichtgewicht formaat voor gegevensuitwisseling
JSON is taalonafhankelijk*

* De JSON-syntaxis is afgeleid van de JavaScript-objectnotatiesyntaxis, maar de JSON-indeling is alleen tekst. Code voor het lezen en genereren van JSON-gegevens kan in elke programmeertaal worden geschreven.

Voorbeeld:

{ "employees":[ {"firstName":"John", "lastName":"Doe"}, {"firstName":"Anna", "lastName":"Smith"}, {"firstName":"Peter", "lastName":"Jones"} ] }

JSON-syntaxisregels

Gegevens staan in naam / waarde-paren
Gegevens worden gescheiden door komma's
Accolades bevatten objecten
Vierkante haken bevatten arrays

JSON-gegevens - een naam en een waarde

JSON-gegevens worden geschreven als naam / waarde-paren, net als JavaScript-objecteigenschappen.

Een naam / waarde-paar bestaat uit een veldnaam (tussen dubbele aanhalingstekens), gevolgd door een dubbele punt, gevolgd door een waarde:

"firstName":"John"

JSON-objecten

JSON-objecten worden tussen accolades geschreven. Net als in JavaScript kunnen objecten meerdere naam / waarde-paren bevatten:

{"firstName":"John", "lastName":"Doe"}

JSON-arrays

JSON-arrays worden tussen vierkante haken geschreven. Net als in JavaScript kan een array objecten bevatten:

"employees":[ {"firstName":"John", "lastName":"Doe"}, {"firstName":"Anna", "lastName":"Smith"}, {"firstName":"Peter", "lastName":"Jones"} ]

In het bovenstaande voorbeeld is het object "werknemers" een array. Het bevat drie objecten. Elk object is een record van een persoon (met een voornaam en een achternaam).

Een JSON-tekst converteren naar een JavaScript-object

Een veelgebruikte mannier om JSON te gebruiken is om gegevens van een webserver te lezen en de gegevens op een webpagina weer te geven. Als voobeeld gebruiken we hier een string als invoer. Later laten we zien hoe we m.b.v. AJAX deze gegevevens van een webserver kunnen halen.

Maak eerst een JavaScript-string met de JSON-syntaxis:

var text = '{ "employees" : [' + '{ "firstName":"John" , "lastName":"Doe" },' + '{ "firstName":"Anna" , "lastName":"Smith" },' + '{ "firstName":"Peter" , "lastName":"Jones" } ]}';

Gebruik vervolgens de ingebouwde JavaScript-functie JSON.parse()om de tekenreeks naar een JavaScript-object te converteren:

var obj = JSON.parse(text);

Gebruik ten slotte het nieuwe JavaScript-object op uw pagina:

<p id="demo"></p> <script> document.getElementById("demo").innerHTML = obj.employees[1].firstName + " " + obj.employees[1].lastName; </script>

AJAX

De voordelen van AJAX zijn:

Lees gegevens van een webserver - nadat de pagina is geladen
Werk een webpagina bij zonder de pagina opnieuw te laden
Verzend gegevens naar een webserver - op de achtergrond

Wat is AJAX?

Ajax = A synchrone J avascript A nd X ML.
AJAX is geen programmeertaal. AJAX gebruikt alleen een combinatie van:

Een in de browser ingebouwd XMLHttpRequestobject (om gegevens van een webserver op te vragen)
JavaScript en HTML (om de gegevens weer te geven of te gebruiken)

AJAX is een misleidende naam. AJAX-applicaties kunnen XML gebruiken om gegevens te transporteren, maar is kan ook gerbruikt worden om platte tekst en JSON-tekst te transporteren.

Met AJAX kunnen webpagina's asynchroon worden bijgewerkt door achter de schermen gegevens uit te wisselen met een webserver. Dit betekent dat het mogelijk is om delen van een webpagina bij te werken, zonder de hele pagina opnieuw te laden.

Het XMLHttpRequest-object

Alle moderne browsers ondersteunen het XMLHttpRequestobject.

Voorbeeld:

var xhttp = new XMLHttpRequest();

LET OP: Om veiligheidsredenen staan moderne browsers geen toegang tussen domeinen toe. Dit betekent dat zowel de webpagina als het te laden bestand, zich op dezelfde server moet bevinden.

Stuur een verzoek naar een server

Om een verzoek naar een server te sturen, gebruik we de open() en send() methoden van het XMLHttpRequestobject:

xhttp.open("GET", "ajax_info.txt", true); xhttp.send();

Methode	Omschrijving
open(method, url, async)	Het verzoek type: method: het soort verzoek GET or POST url: de URL van het bestand async: true (asynchroon) of false (synchroon)
send()	Verzend het verzoek (voor GET)
send(string)	Verzend het verzoek (voor POST)

GET or POST

GETis eenvoudiger en sneller dan POST, en kan in de meeste gevallen worden gebruikt.

Gebruik altijd echter POST-verzoeken als:

Je niet wil dat gegevens gecached worden. ( Bijvoorbeeld als gegevens uit een database komen).
Je een grote hoeveelheid gegevens naar de server verzend (POST kent geen groottebeperkingen, maar GET wel).
je gegevens verstuurd met speciale tekens. POST is hierbij robuuster en veiliger dan GET.

GET verzoeken

Als u informatie met de GETmethode wilt verzenden , voeg u de informatie toe aan de URL:

Voorbeeld:

xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford", true); xhttp.send();

POST-verzoeken

Om gegevens als een HTML-formulier te POSTEN, voeg u een HTTP-header toe met setRequestHeader(). Specificeer de gegevens die u wilt verzenden in de send()methode:

Voorbeeld:

xhttp.open("POST", "ajax_test.asp", true); xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xhttp.send("fname=Henry&lname=Ford");

De url - een bestand op een server

De url-parameter van de open()methode is een adres naar een bestand op een server:

xhttp.open("GET", "ajax_test.php", true);

Het bestand kan elk soort bestand zijn, zoals .txt en .xml, of serverscriptbestanden zoals .php (die acties op de server kunnen worden uitgevoerd voordat het antwoord wordt teruggestuurd).

Asynchroon - true or false?

Gebruik voor serververzoeken asynchroon verzenden. De async-parameter van de open() - methode moet dan ingesteld worden op true:

xhttp.open("GET", "ajax_test.php", true);

Door asynchroon te verzenden, hoeft JavaScript niet te wachten op de reactie van de server, maar kan in plaats daarvan:

voer andere scripts uit terwijl u wacht op de reactie van de server
behandel het antwoord nadat het antwoord klaar is

Synchrone XMLHttpRequest (async = false) wordt afgeraden, omdat JavaScript stopt met uitvoeren totdat de serverreactie gereed is. Als de server bezet of traag is, zal de applicatie hangen of stoppen.

Onreadystatechange

Met het XMLHttpRequestobject kunt u een functie definiëren die moet worden uitgevoerd wanneer het verzoek een antwoord ontvangt. Als je dus een verzoek verstuurd gaat javascript door met de rest van de code. Op het moment dat het antwoord binnenkomt, wordt de functie aangeroepen die onreadystatechangebevat.

De functie is gedefinieerd in de onreadystatechangeeigenschap van het XMLHttpRequestobject:

Voorbeeld:

xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("demo").innerHTML = this.responseText; } }; xhttp.open("GET", "ajax_info.txt", true); xhttp.send();

De readyStateeigenschap bevat de status van de XMLHttpRequest.

De onreadystatechangeeigenschap definieert een functie die moet worden uitgevoerd wanneer de readyState verandert.

De statuseigenschap en de statusTexteigenschap hebben de status van het XMLHttpRequest-object.

Eigenschap	Omschrijving
onreadystatechange	De functie die wordt aangeroepen als er data binnekomt.
readyState	De status van XMLHttpRequest: 0: verzoek niet geïnitialiseerd 1: verbinding met de server gemaakt 2: verzoek ontvangen 3: verzoek verwerken 4: verzoek klaar en antwoord beschikbaar
status	Status code: 200: "OK" 403: "Forbidden" 404: "Page not found" Een complete lijst met HTTP codes: Http Messages Reference
statusText	Bevat de tekst die bij de status hoort: (e.g. "OK" or "Not Found")

De onreadystatechangefunctie wordt elke keer aangeroepen als readyState verandert.

Wanneer readyState 4 is en de status code 200, dan is het antwoord klaar:

Voorbeeld:

function loadDoc() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("demo").innerHTML = this.responseText; } }; xhttp.open("GET", "ajax_info.txt", true); xhttp.send(); }

Opdracht 11

Opdracht 11a:

Maak een HTML pagina met drie div elementen.
Schrijf een javascript programma wat een json bestand ophaalt van https://api.nnet.nl/weer.php . Dit bestand bevat het huidige weer in Oss in JSON formaat. Vul de de div elementen met de volgende informatie:

Temperatuur
Luchtdruk
Weersverwachting

TIP:
Het JSON bestand kun je omzetten naar javascript met de volgende code:
var data = JSON.parse(this.responseText);
Daarna kun je de verschillende waarden vinden door de namen te gebruiken als volgt:
data["liveweer"][0]["temp"];

Opdracht 11b:

Voeg een img element toe aan de pagina. Vul het img element met een icoon van het huidige weer. De naam van het icoon zit in de JSON data:

data["liveweer"][0]["image"];

De icoonen kun je vinden op https://api.nnet.nl/img/

Via javascript kun je een afbeelding veranderen met de volgende code:

document.getElementById("image").src = "afbeelding.png";

Canvas

Het HTML- <canvas>element wordt gebruikt om afbeeldingen op een webpagina te tekenen.

De afbeelding aan de linkerzijde is gemaakt met <canvas>. Het toont vier elementen: een rode rechthoek, een verlooprechthoek, een veelkleurige rechthoek en een veelkleurige tekst.

Wat is HTML Canvas?

Het HTML- <canvas>element wordt gebruikt om directe afbeeldingen te tekenen via JavaScript.

Het <canvas>element is slechts een container voor afbeeldingen. U moet JavaScript gebruiken om de afbeeldingen werkelijk te tekenen.

Canvas heeft verschillende methoden om paden, kaders, cirkels, tekst te tekenen en afbeeldingen toe te voegen.

Canvas voorbeelden

Een canvas is een rechthoekig gebied op een HTML-pagina. Standaard heeft een canvas geen rand en geen inhoud.

De opmaak ziet er als volgt uit:

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

OPMERKING: Definieer altijd een id attribuut (zodat je het in javascript kunt gebruiken), en een widthen heightattribuut om de grootte van het canvas te definiëren. Gebruik evt. het styleattribuut om een rand toe te voegen.

Tekenen

Nadat je het canvas hebt gemaakt, kun je JavaScript gebruiken om een tekening te maken.

Voorbeeld:
Het volgende voorbeeld voegt een lijn toe:

<script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.moveTo(0, 0); ctx.lineTo(200, 100); ctx.stroke(); </script>

Voorbeeld:
Het volgende voorbeeld voegt een cirkel toe:

<script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.beginPath(); ctx.arc(95, 50, 40, 0, 2 * Math.PI); ctx.stroke(); </script>

Voorbeeld:
Het volgende voorbeeld voegt tekst toe:

<script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.font = "30px Arial"; ctx.fillText("Hello World", 10, 50); </script>

Meer informatie over de beschikbare functies kun je hier vinden: https://www.w3schools.com/graphics/canvas_reference.asp

Met canvas is het bijvoorbeeld mogelijk om een analoge klok te maken, hier vind je een korte cursus hoe je dat doet: https://www.w3schools.com/graphics/canvas_clock.asp

Nummers

JavaScript heeft slechts één type nummer. Getallen kunnen met of zonder decimalen worden geschreven.

Voorbeeld
var x = 3.14; // A number with decimals var y = 3; // A number without decimals

Extra grote of extra kleine getallen kunnen met wetenschappelijke (exponent) notatie worden geschreven:

Voorbeeld
var x = 123e5; // 12300000 var y = 123e-5; // 0.00123

JavaScript-nummers zijn altijd 64-bits drijvende komma
In tegenstelling tot veel andere programmeertalen, definieert JavaScript geen verschillende soorten getallen, zoals gehele getallen, korte, lange, drijvende komma enz.

JavaScript-nummers worden altijd opgeslagen als drijvende-kommagetallen met dubbele precisie.
Dit formaat slaat getallen op in 64 bits. Gehele getallen (getallen zonder punt of exponentnotatie) zijn nauwkeurig tot 15 cijfers.

Voorbeeld
var x = 999999999999999; // x will be 999999999999999 var y = 9999999999999999; // y will be 10000000000000000
Het aantal maximale decimalen is 17, maar drijvende-kommaberekeningen zijn niet altijd 100% nauwkeurig:
Voorbeeld
var x = 0.2 + 0.1; // x will be 0.30000000000000004
Om het bovenstaande probleem op te lossen, helpt het om te vermenigvuldigen en te delen:
Voorbeeld
var x = (0.2 * 10 + 0.1 * 10) / 10; // x will be 0.3

Cijfers en tekenreeksen toevoegen

WAARSCHUWING !!
JavaScript gebruikt de operator + voor zowel optellen als samenvoegen.
Nummers worden toegevoegd. Strings worden aan elkaar geplakt.

Als je twee getallen optelt, is het resultaat een getal:
Voorbeeld
var x = 10; var y = 20; var z = x + y; // z will be 30 (a number)

Als je twee strings toevoegt, is het resultaat een aaneenschakeling van tekenreeksen:
Voorbeeld
var x = "10"; var y = "20"; var z = x + y; // z will be 1020 (a string)

Als je een getal en een string toevoegt, is het resultaat een aaneenschakeling van een string:
Voorbeeld
var x = 10; var y = "20"; var z = x + y; // z will be 1020 (a string)

Als je een string en een getal toevoegt, is het resultaat een aaneenschakeling van een string:
Voorbeeld
var x = "10"; var y = 20; var z = x + y; // z will be 1020 (a string)

Een veelgemaakte fout is dat dit resultaat 30 is:
Voorbeeld
var x = 10; var y = 20; var z = "The result is: " + x + y; // z will be: The result is: 1020

Om dit op te lossen kun je haakjes gebruiken:
Voorbeeld
var x = 10; var y = 20; var z = "The result is: " + (x + y); // z will be: The result is: 30

Een veelgemaakte fout is dat dit resultaat 102030 is:
Voorbeeld
var x = 10; var y = 20; var z = "30"; var result = x + y + z; // z will be: 3030
De JavaScript-interpreter werkt van links naar rechts.
De eerste 10 + 20 wordt opgeteld omdat x en y beide getallen zijn.
Dan wordt 30 + "30" aaneengeschakeld omdat z een string is.

Numerieke tekenreeksen
JavaScript-strings kunnen numerieke inhoud hebben:
var x = 100; // x is a number var y = "100"; // y is a string

JavaScript zal proberen om strings naar getallen om te zetten in alle numerieke bewerkingen behalve optellen:

Dit zal werken:
var x = "100"; var y = "10"; var z = x / y; // z will be 10

Dit werkt ook:
var x = "100"; var y = "10"; var z = x * y; // z will be 1000

En dit zal werken:
var x = "100"; var y = "10"; var z = x - y; // z will be 90

Maar dit zal niet werken:
var x = "100"; var y = "10"; var z = x + y; // z will not be 110 (It will be 10010)
In het laatste voorbeeld gebruikt JavaScript de + operator om de strings samen te voegen.

NaN - Geen nummer

NaN is een door JavaScript gereserveerd woord dat aangeeft dat een nummer geen geldig nummer is.
Als je probeert te rekenen met een niet-numerieke reeks, krijgt je NaN(Geen getal):
Voorbeeld
var x = 100 / "Apple"; // x will be NaN (Not a Number)

Als de tekenreeks echter een numerieke waarde bevat, is het resultaat een getal:
Voorbeeld
var x = 100 / "10"; // x will be 10

U kunt de algemene JavaScript-functie gebruiken isNaN() om erachter te komen of een waarde een getal is:
Voorbeeld
var x = 100 / "Apple"; isNaN(x); // returns true because x is Not a Number
Pas op voor NaN. Als je NaN in een wiskundige bewerking gebruikt, is het resultaat ook NaN:
Voorbeeld
var x = NaN; var y = 5; var z = x + y; // z will be NaN

Of het resultaat kan een aaneenschakeling zijn:
Voorbeeld
var x = NaN; var y = "5"; var z = x + y; // z will be NaN5

NaN is een getal: typeof NaN geeft als resultaat number:
Voorbeeld
typeof NaN; // returns "number"

Oneindigheid

Infinity(of -Infinity) is de waarde die JavaScript zal retourneren als je een getal berekent dat buiten het grootst mogelijke getal ligt.
Voorbeeld
var myNumber = 2; while (myNumber != Infinity) { // Execute until Infinity myNumber = myNumber * myNumber; }

Deling door 0 (nul) genereert ook Infinity:
Voorbeeld
var x = 2 / 0; // x will be Infinity var y = -2 / 0; // y will be -Infinity

Infinity is een getal: typeof Infinity retourneert number.

Voorbeeld
typeof Infinity; // returns "number"

Hexadecimaal

JavaScript interpreteert numerieke constanten als hexadecimaal als ze worden voorafgegaan door 0x.
Voorbeeld
var x = 0xFF; // x will be 255

Schrijf nooit een getal met een voorloop nul (zoals 07). Sommige JavaScript-versies interpreteren getallen als octaal als ze met een voorloopnul worden geschreven.

Standaard geeft JavaScript getallen weer als decimalen met grondtal 10.
Maar je kunt de toString() methode gebruiken om getallen uit te voeren van basis 2 tot basis 36 .

Hexadecimaal is basis 16.
Decimaal is basis 10.
Octaal is basis 8.
Binair is basis 2.

Voorbeeld
var myNumber = 32; myNumber.toString(10); // returns 32 myNumber.toString(32); // returns 10 myNumber.toString(16); // returns 20 myNumber.toString(8); // returns 40 myNumber.toString(2); // returns 100000

Getallen kunnen objecten zijn

Normaal gesproken zijn JavaScript-nummers primitieve waarden die zijn gemaakt op basis van letterlijke waarden:
var x = 123;
Maar getallen kunnen ook worden gedefinieerd als objecten met het trefwoord new:
var y = new Number(123);
Voorbeeld
var x = 123; var y = new Number(123); // typeof x returns number // typeof y returns object

Maak geen Number-objecten. Het vertraagt de uitvoeringssnelheid.
Het new sleutelwoord maakt de code ingewikkelder. Dit kan enkele onverwachte resultaten opleveren:

Bij gebruik van de == operator zijn gelijke getallen gelijk:
Voorbeeld
var x = 500; var y = new Number(500); // (x == y) is true because x and y have equal values

Bij gebruik van de === operator zijn gelijke getallen niet gelijk, omdat de === operator gelijkheid verwacht in zowel type als waarde.
Voorbeeld
var x = 500; var y = new Number(500); // (x === y) is false because x and y have different types

Of nog erger. Objecten kunnen niet worden vergeleken:
Voorbeeld
var x = new Number(500); var y = new Number(500); // (x == y) is false because objects cannot be compared

Let op het verschil tussen (x==y)en (x===y).
Het vergelijken van twee JavaScript-objecten zal altijd terugkeren false.

Nummer methoden en eigenschappen

Primitieve waarden (zoals 3.14 van 2014) kunnen geen eigenschappen en methoden hebben (omdat het geen objecten zijn).

Maar in JavaScript zijn methoden en eigenschappen ook beschikbaar voor primitieve waarden, omdat JavaScript primitieve waarden als objecten behandelt bij het uitvoeren van methoden en eigenschappen.

De toString() methode retourneert een getal als een tekenreeks.
Alle nummermethoden kunnen worden gebruikt voor elk type nummer (literals, variabelen of uitdrukkingen):
Voorbeeld
var x = 123; x.toString(); // returns 123 from variable x (123).toString(); // returns 123 from literal 123 (100 + 23).toString(); // returns 123 from expression 100 + 23

toExponential() geeft een tekenreeks terug, met een getal afgerond en geschreven in exponentiële notatie.
Een parameter definieert het aantal tekens achter de komma:
Voorbeeld
var x = 9.656; x.toExponential(2); // returns 9.66e+0 x.toExponential(4); // returns 9.6560e+0 x.toExponential(6); // returns 9.656000e+0
De parameter is optioneel. Als je dit niet opgeeft, rondt JavaScript het getal niet af.

toFixed() geeft een tekenreeks terug, met het getal geschreven met een opgegeven aantal decimalen:
Voorbeeld
var x = 9.656; x.toFixed(0); // returns 10 x.toFixed(2); // returns 9.66 x.toFixed(4); // returns 9.6560 x.toFixed(6); // returns 9.656000
toFixed(2) is perfect als je met geld werkt.

toPrecision() geeft een tekenreeks terug, met een getal geschreven met een opgegeven lengte:
Voorbeeld
var x = 9.656; x.toPrecision(); // returns 9.656 x.toPrecision(2); // returns 9.7 x.toPrecision(4); // returns 9.656 x.toPrecision(6); // returns 9.65600

valueOf() geeft een getal terug als een getal.
Voorbeeld
var x = 123; x.valueOf(); // returns 123 from variable x (123).valueOf(); // returns 123 from literal 123 (100 + 23).valueOf(); // returns 123 from expression 100 + 23
In JavaScript kan een getal een primitieve waarde zijn (typeof = getal) of een object (typeof = object). De valueOf() methode wordt intern in JavaScript gebruikt om Number-objecten naar primitieve waarden te converteren. Er is geen reden om het in uw code te gebruiken.
Alle JavaScript-gegevenstypen hebben een valueOf() en een toString() methode.

Variabelen omzetten in getallen

Er zijn 3 JavaScript-methoden die kunnen worden gebruikt om variabelen in getallen om te zetten:

De Number() methode
De parseInt() methode
De parseFloat() methode

Deze methoden zijn niet nummer speciefieke methoden, maar globale JavaScript-methoden.

Number() kan worden gebruikt om JavaScript-variabelen om te zetten in getallen:
Voorbeeld
Number(true); // returns 1 Number(false); // returns 0 Number("10"); // returns 10 Number(" 10"); // returns 10 Number("10 "); // returns 10 Number(" 10 "); // returns 10 Number("10.33"); // returns 10.33 Number("10,33"); // returns NaN Number("10 33"); // returns NaN Number("John"); // returns NaN
Als het nummer niet kan worden geconverteerd, wordt NaN (Not a Number) geretourneerd.

Number() kan ook een datum naar een getal converteren:
Voorbeeld
Number(new Date("2017-09-30")); // returns 1506729600000
De Number() methode retourneert het aantal milliseconden sinds 01-01-1970.

parseInt() parsed een string en retourneert een geheel getal. Spaties zijn toegestaan. Alleen het eerste nummer wordt geretourneerd:
Voorbeeld
parseInt("10"); // returns 10 parseInt("10.33"); // returns 10 parseInt("10 20 30"); // returns 10 parseInt("10 years"); // returns 10 parseInt("years 10"); // returns NaN
Als het nummer niet kan worden geconverteerd, wordt NaN (Not a Number) geretourneerd.

parseFloat() parsed een string en retourneert een getal. Spaties zijn toegestaan. Alleen het eerste nummer wordt geretourneerd:
Voorbeeld
parseFloat("10"); // returns 10 parseFloat("10.33"); // returns 10.33 parseFloat("10 20 30"); // returns 10 parseFloat("10 years"); // returns 10 parseFloat("years 10"); // returns NaN
Als het nummer niet kan worden geconverteerd, wordt NaN (Not a Number) geretourneerd.

Strings

JavaScript-strings worden gebruikt voor het opslaan en manipuleren van tekst.
Een JavaScript-tekenreeks bestaat uit nul of meer tekens tussen aanhalingstekens.

Voorbeeld
var x = "John Doe";
U kunt enkele of dubbele aanhalingstekens gebruiken:

Voorbeeld
var carName1 = "Volvo XC60"; // Double quotes var carName2 = 'Volvo XC60'; // Single quotes
U kunt aanhalingstekens binnen een string gebruiken, zolang ze niet overeenkomen met de aanhalingstekens rondom de string:

Voorbeeld
var answer1 = "It's alright"; var answer2 = "He is called 'Johnny'"; var answer3 = 'He is called "Johnny"';

Escape karakter

Omdat strings tussen aanhalingstekens moeten worden geschreven, zal JavaScript deze tekenreeks verkeerd begrijpen:
var x = "We are the so-called "Vikings" from the north.";
De string wordt omgezet naar "We are the so-called ".
De oplossing om dit probleem te verhelpen, is door het backslash-escape-teken te gebruiken .
Het (\) backslash-escape-teken verandert speciale tekens in tekenreeks-tekens:

Code	Resultaat	Omschrijving
`\'`	'	Single quote
`\"`	"	Double quote
`\\`	\	Backslash

De reeks \" voegt een dubbel aanhalingsteken in een string in:
Voorbeeld
var x = "We are the so-called \"Vikings\" from the north.";

Zes andere escape-reeksen zijn geldig in JavaScript:

Code	Resultaat
\b	Backspace
\f	Form Feed
\n	New Line
\r	Carriage Return
\t	Horizontal Tabulator
\v	Vertical Tabulator

De 6 bovenstaande escape-tekens zijn oorspronkelijk ontworpen om typemachines, teletypes en faxmachines te bedienen. Ze slaan nergens meer op in HTML.

Lange coderegels doorbreken

Voor de beste leesbaarheid vermijden programmeurs vaak coderegels die langer zijn dan 80 tekens. Als een JavaScript-instructie niet op één regel past, kunt u deze het beste afbreken na een operator:
Voorbeeld
document.getElementById("demo").innerHTML = "Hello Dolly!";
U kunt ook een coderegel binnen een tekst reeks opsplitsen met een enkele backslash:
Voorbeeld
document.getElementById("demo").innerHTML = "Hello \ Dolly!";
De \ methode heeft niet de voorkeur. Het werkt misschien niet in alle browsers.
Sommige browsers staan geen spaties achter het \ teken toe.

Een veiligere manier om een string te breken, is door string-optelling te gebruiken:

Voorbeeld
document.getElementById("demo").innerHTML = "Hello " + "Dolly!";

Je kunt geen code opbreken met een backslash, het volgende werkt niet:
Voorbeeld
document.getElementById("demo").innerHTML = \ "Hello Dolly!";

String-methoden en eigenschappen

De length eigenschap retourneert de lengte van een tekenreeks:

var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; var sln = txt.length;

De indexOf() methode retourneert de index van het eerst voorkomen van een opgegeven tekst in een string:

var str = "Please locate where 'locate' occurs!"; var pos = str.indexOf("locate");

De lastIndexOf() methode retourneert de index van de laatste keer dat een opgegeven tekst in een string kiest:

var str = "Please locate where 'locate' occurs!"; var pos = str.lastIndexOf("locate");

JavaScript telt posities vanaf nul. 0 is de eerste positie in een string, 1 is de tweede, 2 is de derde ...
Beide indexOf(), en lastIndexOf() retourneren -1 als de tekst niet wordt gevonden.

Beide methoden accepteren een tweede parameter als de startpositie voor de zoekopdracht:
De lastIndexOf() methode zoekt achteruit (van het einde naar het begin), wat betekent: als de tweede parameter 15 is, begint het zoeken op positie 15 en zoekt javascript naar het begin van de string.

var str = "Please locate where 'locate' occurs!"; var pos = str.indexOf("locate", 15);

The search() method searches a string for a specified value and returns the position of the match:

var str = "Please locate where 'locate' occurs!"; var pos = str.search("locate");

Zijn indexOf() en search() hetzelfde?
Ze accepteren dezelfde argumenten (parameters) en retourneren dezelfde waarde?
De twee methoden zijn NIET hetzelfde. Dit zijn de verschillen:

De search() methode kan geen tweede startpositie-argument hebben.
De indexOf() methode kan geen krachtige zoekwaarden aannemen (reguliere Expressies).

slice() extraheert een deel van een string en retourneert het uitgepakte deel in een nieuwe string.
De methode heeft 2 parameters: de startpositie en de eindpositie (einde niet inbegrepen).
Dit voorbeeld snijdt een deel van een string uit van positie 7 naar positie 12 (13 min 1):

Voorbeeld
var str = "Apple, Banana, Kiwi"; var res = str.slice(7, 13);
Het resultaat van het onderzoek zal zijn:
Banana

Als een parameter negatief is, wordt de positie geteld vanaf het einde van de string.
In dit voorbeeld wordt een deel van een string uitgesneden van positie -12 naar positie -6:

Voorbeeld
var str = "Apple, Banana, Kiwi"; var res = str.slice(-12, -6);
Het resultaat van het onderzoek zal zijn:
Banana

Als u de tweede parameter weglaat, snijdt de methode de rest van de string uit:

Voorbeeld
var str = "Apple, Banana, Kiwi"; var res = str.slice(7); var res = str.slice(-12);

De replace() methode vervangt een opgegeven waarde door een andere waarde in een string:
str = "Please visit Microsoft!"; var n = str.replace("Microsoft", "W3Schools");

Een string wordt naar hoofdletters omgezet met toUpperCase():
var text1 = "Hello World!"; // String var text2 = text1.toUpperCase(); // text2 is text1 converted to upper

Een string wordt omgezet in kleine letters met toLowerCase():
var text1 = "Hello World!"; // String var text2 = text1.toLowerCase(); // text2 is text1 converted to lower

concat() voeg twee of meer strings samen:
var text1 = "Hello"; var text2 = "World"; var text3 = text1.concat(" ", text2);

De concat() methode kan worden gebruikt in plaats van de plus-operator. Deze twee regels doen hetzelfde:
var text = "Hello" + " " + "World!"; var text = "Hello".concat(" ", "World!");

De trim() methode verwijdert witruimte aan beide zijden van een string:
var str = " Hello World! "; alert(str.trim());

De charAt() methode retourneert het teken op een opgegeven index (positie) in een tekenreeks:
var str = "HELLO WORLD"; str.charAt(0); // returns H

Een string kan worden geconverteerd naar een array met de split() methode:
var txt = "a,b,c,d,e"; // String txt.split(","); // Split on commas txt.split(" "); // Split on spaces txt.split("|"); // Split on pipe

Als het scheidingsteken "" (leeg) is, zal de geretourneerde array een array van alle losse tekens zijn:
var txt = "Hello"; // String txt.split(""); // Split in characters

Real-life objecten, eigenschappen en methoden

In het echte leven is een auto een object. Een auto heeft eigenschappen zoals gewicht en kleur, en methoden zoals starten en stoppen:

Voorwerp

Eigenschappen

Methoden

car.name = Fiat

auto.model = 500

auto.gewicht = 850kg

auto.kleur = wit

car.start ()

car.drive ()

car.brake ()

car.stop ()

Alle auto's hebben dezelfde eigenschappen, maar de inhoud van die eigenschappen kan afwijken tussen auto's. Ze hebben allemaal de eigenschap kleur maar welke kleur verschilt per auto. Alle auto's hebben dezelfde methoden, maar de methoden worden op verschillende momenten uitgevoerd.

JavaScript-objecten

Je hebt al geleerd dat JavaScript-variabelen containers zijn voor waarden.

Deze code kent een eenvoudige waarde (Fiat) toe aan een variabele met de naam auto:

var car = "Fiat";

Objecten zijn ook variabelen. Maar objecten kunnen veel waarden bevatten.
Deze code kent veel waarden (Fiat, 500, wit) toe aan een variabele met de naam auto:

var car = {type:"Fiat", model:"500", color:"white"};

De waarden worden geschreven als naam:waarde paren (naam en waarde worden van elkaar gescheiden door een dubbele punt).

JavaScript-objecten zijn containers voor waarden met een naam. Deze worden eigenschappen of methoden genoemd.

Objectdefinitie

U definieert (en maakt) een JavaScript-object met {}:

Voorbeeld
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
Spaties en regeleinden zijn niet belangrijk. Een objectdefinitie kan meerdere regels omvatten:

Voorbeeld:
var person = { firstName: "John", lastName: "Doe", age: 50, eyeColor: "blue" };

Objecteigenschappen

De naam:waarde- paren in JavaScript-objecten worden eigenschappen genoemd :

Eigenschap	Waarde
firstName	John
lastName	Doe
age	50
eyeColor	blue

Toegang tot objecteigenschappen

U kunt objecteigenschappen op twee manieren openen:
objectName.propertyName
of
objectName["propertyName"]

Voorbeeld 1
person.lastName;

Voorbeeld 2
person["lastName"];

Object methoden

Objecten kunnen ook methoden hebben. Methoden zijn acties die op objecten kunnen worden uitgevoerd. Methoden worden in eigenschappen opgeslagen als functiedefinities.

Eigenschap	Waarde
firstName	John
lastName	Doe
age	50
eyeColor	blue
fullName	`function () {return this.firstName + " " + this.lastName;}`

Een methode is een functie die is opgeslagen als een eigenschap.

Voorbeeld
var person = { firstName: "John", lastName : "Doe", id : 5566, fullName : function() { return this.firstName + " " + this.lastName; } };

Het trefwoord this

this verwijst in een functiedefinitie naar de "eigenaar" van de functie. In het bovenstaande voorbeeld this is het persoonsobject "eigenaar" van de fullName functie. Met andere woorden this.firstName is de eigenschap firstName van dit object .

Toegang tot objectmethoden

U opent een objectmethode met de volgende syntaxis: objectName.methodName()
Voorbeeld
name = person.fullName();
Als u een methode opent zonder de () haakjes, retourneert deze de functiedefinitie:

Voorbeeld
name = person.fullName;

Declareer strings, getallen en booleans niet als objecten!

Wanneer een JavaScript-variabele wordt gedeclareerd met het trefwoord "new", wordt de variabele gemaakt als een object:

var x = new String(); // Declares x as a String object var y = new Number(); // Declares y as a Number object var z = new Boolean(); // Declares z as a Boolean object
Vermijd Strings, Numbers en Booleans als objecten. Ze compliceren uw code en vertragen de uitvoeringssnelheid.

Extra Opdracht

Javascript rekenmachine

In deze opdracht gaan we stap voor stap een rekenmachine bouwen.

Maak een nieuw HTML document en vul dit met de volgende code:

<!DOCTYPE html> <html lang="nl" dir="ltr"> <head> <meta charset="utf-8"> <title>JS Calculator</title> </head> <body> <div id="screen">0</div> <div id="numbers"> <button >7</button> <button >8</button> <button >9</button> <button >4</button> <button >5</button> <button >6</button> <button >1</button> <button >2</button> <button >3</button> <button >0</button> <button >.</button> </div> <div id="operators"> <button >+</button> <button >−</button> <button >×</button> <button >÷</button> <button >AC</button> <button >=</button> </div> </body> </html>

Nu gaan we wat opmaak toevoegen m.b.v. CSS:

<style media="screen"> #numbers {width:160px;float:left;} #operators {width:110px;float:left;} #screen {width:250px;text-align: right;padding: 5px;background-color: lightgray;} button {width:45px;height:45px;margin:2px; border:0; border-radius:0; background-color: gray;} </style>

Zet de CSS op de juiste plek in het HTML document.

Om acties toe te voegen aan de knoppen gebruiken we het onClick event. Pas de HTML zo aan dat iedere knop een onCick event heeft.

Als je nu op een knop klikt gebeurd er nog niets, we hebben ten slotte nog geen functies gedefinieerd in Javascript. Voeg een Javascript tag toe aan het HTML bestand:

<script type="text/javascript"> function clickNumber(number){ } function clickOperator(operator){ } function clickEquals(){ } function clickClear(){ } </script>

Een rekenmachine heeft een aantal stappen die het doorloopt.

invoeren eerste getal
invoeren bewerking (plus, min, keer, delen)
invoeren tweede getal
uitkomst vragen (=)

Iedere stap slaan we op in een variable. Deze definieren we in het script:

var firstNumber = ""; var currentOperator = ""; var secondNumber = "";

Om bij te houden welk nummer we aan het invoeren zijn (het eerste getal of het tweede getal) gebruiken we nog een variable. Deze noemen we fase.

var fase = 1;

Om nu het eerste getal op te slaan moeten we ieder klik op een knop samenvoegen met de vorige klik. Dit doen we door een string (firstNumber) iedere keer aan te vullen met het volgende teken:

function clickNumber(number){ if (fase==1){ firstNumber = String(firstNumber) + String(number); } document.getElementById("screen").innerHTML=firstNumber + " " + currentOperator + " " + secondNumber; }

We forceren de input naar een string om te voorkomen dat de getallen worden opgeteld in plaats van samengevoegd. Dit doen we met de functie String().

Na het invoeren van het eerste getal moeten we een bewerking (plus, min... ) vastleggen. Dit doen we in de volgende functie. Na het opslaan van de bewerking zetten we fase op 2 zodat we het tweede getal kunnen invoeren:

function clickOperator(operator){ if (fase==1){ currentOperator = String(operator); fase=2; } document.getElementById("screen").innerHTML=firstNumber + " " + currentOperator + " " + secondNumber; }

Om ook het tweede getal te kunnen invoeren passen we de functie clickNumberaan:
function clickNumber(number){ if (fase==1){ firstNumber = String(firstNumber) + String(number); } else if (fase==2) { secondNumber = String(secondNumber) + String(number); } document.getElementById("screen").innerHTML=firstNumber + " " + currentOperator + " " + secondNumber; }

Nu het eerste- en tweede getal zijn ingevuld met de bijbehorende bewerking kunnen we gaan rekenen door op de = te klikken. Hiervoor vullen we de functie clickEquals. Afhankelijk van de bewerking berekenen we het resultaat. We gebruiken hier de functie parseFloat om van de string een kommagetal te maken. Met stings kun je tenslotte geen berekeningen uitvoeren. Het resultaat stoppen we weer in firstNumber zodat we hier meteen weer verder mee kunnen rekenen. Daarna maken we het tweede nummer en de bewerking leeg en gaan we weer naar fase 1.
function clickEquals(){ if (fase==2){ if (currentOperator=='+'){ firstNumber = parseFloat(firstNumber) + parseFloat(secondNumber); } else if (currentOperator=='-') { firstNumber = parseFloat(firstNumber) - parseFloat(secondNumber); } else if (currentOperator=='x') { firstNumber = parseFloat(firstNumber) * parseFloat(secondNumber); } else if (currentOperator=='/') { firstNumber = parseFloat(firstNumber) / parseFloat(secondNumber); } currentOperator =""; secondNumber = ""; fase=1; } document.getElementById("screen").innerHTML=firstNumber + " " + currentOperator + " " + secondNumber; }

Tot slot voegen we een laatste functie toe om de rekenmachine te reseten (AC):

function clickClear(){ firstNumber = ""; currentOperator =""; secondNumber = ""; fase=1; document.getElementById("screen").innerHTML="0"; }

Colofon
Het arrangement Module: JavaScript is gemaakt met Wikiwijs van Kennisnet. Wikiwijs is hét onderwijsplatform waar je leermiddelen zoekt, maakt en deelt.

Auteur

Het Hooghuis Mondriaan informatica

Laatst gewijzigd

2021-12-25 14:38:53

Licentie

Dit lesmateriaal is gepubliceerd onder de Creative Commons Naamsvermelding 4.0 Internationale licentie. Dit houdt in dat je onder de voorwaarde van naamsvermelding vrij bent om:

het werk te delen - te kopiëren, te verspreiden en door te geven via elk medium of bestandsformaat

het werk te bewerken - te remixen, te veranderen en afgeleide werken te maken

voor alle doeleinden, inclusief commerciële doeleinden.

Meer informatie over de CC Naamsvermelding 4.0 Internationale licentie.

Aanvullende informatie over dit lesmateriaal

Van dit lesmateriaal is de volgende aanvullende informatie beschikbaar:

Eindgebruiker

leerling/student

Moeilijkheidsgraad

gemiddeld

Studiebelasting

4 uur en 0 minuten

Module: JavaScript

nl

Het Hooghuis Mondriaan informatica

2021-12-25 14:38:53

leerling/student

PT4H
Opties
Gebruik
- Download arrangement
- Kopieer arrangement
Weergave
Wikiwijs is een dienst van