Introductiejavascript voor beginners

Mijn naam is Casper Lamboo. Ik heb dit document gemaakt om al mijn kennis over JavaScript te documenteren. Door het voor mezelf op de meest simpele manier op te schrijven heb ik meer begrip gekregen voor de taal. Daarnaast ben ik alles waar ik weinig of niets van wist op gaan zoeken. Hierdoor is mijn kennis van JavaScript enorm gegroeid. Ik heb deze pagina in eerste instantie voor mijzelf gemaakt, als iemand anders hier wat aan heeft is dat een bijkomend voordeel.

JavaScript is een scripttaal gemaakt voor de browser. JavaScript is in 1995 ontwikkeld door netscape, een van de eerste browsers. JavaScript is, zoals de naam al suggereert, een scripttaal. Dit betekent dat een computer niet direct JavaScript kan uitvoeren. Daarvoor heeft een computer een JavaScript engine nodig die geschreven is in een taal die een computer wel kan lezen, zoals C of Java. Bij JavaScript is deze engine in de meeste gevallen de browser. Je kunt JavaScript aan een HTML pagina toevoegen door de script tag. Een voorbeeld hiervan staat in Voorbeeld_DOM. De // geeft een comment aan. Elke regel die hiermee begint wordt niet uitgevoerd door JavaScript.

<!DOCTYPE html> <html> <head> <title>Title</title> <script> //JavaScript in een HTML pagina </script> </head> <body> </body> </html>

JavaScript bestaat uit (anders dan andere programmeertalen) één thread. De meest simpele manier om een thread uit te leggen is: JavaScript is een verhaaltje dat geschreven wordt voor de thread. De thread voert alles wat er in dit verhaaltje staat uit. Een thread is dus het proces dat de code uitvoert. Met meerdere threads kun je verschillende stukken code tegelijkertijd uitvoeren. Het gevolg van dat JavaScript uit één thread bestaat, is dat de ontwikkerlaars van JavaScript hebben besloten om JavaScript non-blocking te maken. Een non-blocking programmeertaal, is een taal waarbij het onmogelijk is om het script te pauzeren. Als programmeur moet je hier rekening mee houden. Dit wordt later verder uitgelegd.

Variabelende bouwstenen van javascript

Binnen JavaScript kun je variabelen declareren (term voor het aanmaken van variabele). Dit zijn stukjes geheugen waarin je een Number, String, function enz. kunt zetten. JavaScript kent grofweg verschillende soorten variabelen. Deze worden hieronder uitgelegd.

Om een variabele in JavaScript aan te maken, schrijf je var daarachter de naam die je de variabele wilt geven gevolgd door een = teken daarna komt de inhoud van de variabele, en op het eind schrijf je een ; teken om het einde van de regel aan te geven. Zie onderstaand voorbeeld. Komma getallen worden gescheiden door een ..

var naamVanVariabele = 6;

Om in JavaScript een variabele te declareren zet je var voor de naam zoals in Voobeeld_variable_1 beschreven is. Om vervolgens opnieuw te schrijven naar deze variabele, haal je var weg. Zie onderstaande code. Er zijn in het begin twee variabelen gedeclareerd, variabeleA en variabeleB. Vervolgens wordt variabeleA gevuld door de inhoud van variabeleB. De inhoud van variabeleA is dus 10.

var VariabeleA = 6; var VariabeleB = 10; VariabeleA = VariabeleB;

Het is mogelijk om variabelen te printen naar de console. Een console is een onderdel van een browser voor JavaScript. Deze is te benaderen door alt command i, of f12. Als je de code van Voorbeeld_variable_3 zou uitvoeren zou er 6 in de console komen te staan. Dit is handig als je veel complexe berekeningen moet uitvoeren en er gaat iets fout, maar je weet niet waar. Dan zou je na elke berekening de variabele kunnen loggen om erachter te komen waar het precies fout gaat.

var VariabeleA = 6; console.log(VariabeleA);

Als je geen var voor een variabele zet, wordt deze gedeclareerd naar het grootst mogelijke globale Object, het Object waar JavaScript in draait. Dit Object heet in browser window. Als JavaScript niet in een browser wordt uitvoerd, heeft dit Object géén naam. Als je de code uit Voorbeeld_variabele_4 in een browser uitvoert, doen regel 1 en 2 exact het zelfde.

VariabeleA = 6; window.VaiabeleA = 6;

primitives

Een primitive is de meest simpele variabele binnen JavaScript. Een primitive is het kleinst mogelijke element binnen Javascript. Dit kan een Number (een getal) zijn, een String (een reeks tekens/karakters) of een Boolean (true of false).

Number

Een Number is een getal. JavaScript maakt geen onderscheid tussen Int (een afgerond getal) en een Float (een getal met decimalen). Een Number kun je definieren door Number(getal), of alleen het getal (regel 1 en 2 van Voorbeeld_Number_1).

var A = Number(3); var B = 5;

In Voorbeeld_Number_1 worden in regel 1 en 2 een Number gedefinieerd. Number heeft ook een aantal methodes. Dit zijn functies die het mogelijk maken om bijvoorbeeld een getal af te ronden met x aantal cijfers. In Voorbeeld_Number_2 staat beschreven hoe je dit moet doen.

var A = 3.3333333333; A = A.toFixed(3);

Een overzicht van alle methodes is hieronder gegeven.

Methode Beschrijving
toFixed(x) Rond een getal af met x cijfers achter de komma.
toPrecision(x) Maakt een wetenschappelijke notatie van het Number met een precisie van x.
toString() Converteerd een Number naar een String, en returnt deze.
valueOf() Returnt de waarde van het Object. Dus returnt eigenlijk zichzelf, de funtionaliteit van deze functie is voor mij onduidelijk.

Naast methodes heeft Number ook een aantal properties. Dit zijn vaste waardes. Een voorbeeld van zo'n property is NaN. NaN (Not a Number) is de waarde die een Number krijgt als je een illegale algebrarische operatie uitvoerd. Een voorbeeld van zo'n operatie is delen door 0, of een Number optellen bij een Object van een ander type. Een property kun je benaderen door de naam van een Object gevolgd door een . gevolgd door de naam van het property. Een voorbeeld hiervan is in Voorbeeld_Number_3 gegeven.

var nan = Number.NaN; var oneindig = Number.POSITIVE_INFINITY

Een overzicht van alle properties van Number is hieronder gegeven.

Property Beschrijving
MAX_VALUE Returnt de grootst mogelijke waarde van een Number in JavaScript
MIN_VALUE Returnt de kleinst mogelijke waarde van een Number in JavaScript
NEGATIVE_INFINITY Vertegenwoordigt -oneindig
NaN Vertegenwoordigt "Not a Number"
POSITIVE_INFINITY Vertegenwoordigt oneindig

String

Een String kun definieren door een ' of een " om een reeks karakters te zetten.

var string = String("string"); var A = 'Hello '; var B = "World";

Boolean

var boolean = Boolean(0); var A = true; var B = false;

Array

var array = Array(); array[0] = "six"; array[1] = "chicks"; array[2] = "dicks"; var A = []; var B = [5, 6, 2, true, 'string']; var element = B[4];
var A = [5, 6, 2, true, 'string']; var B = A; B[2] = "Obama";

Object

var object = Object(); var A = {}; A.naam = 'object'; A['attribuut'] = 'string'; var B = { naam: 'Sjors', beroep: 'raps schrijven', eten: 'Pindakaas' }; var elementAttr = A.attribuut; var elementEten = B['eten'];

Functies

function func(argumentA, argumentB) { console.log(argumentA); console.log(argumentB); } func("argument", 123);
var func = function (argumentA, argumentB) { console.log(argumentA); console.log(argumentB); } var funcName = func.name;
var a = 'Variabele'; function func() { var b = a; c = a; } func(); var d = b; var e = c;

Elke functie in JavaScript heeft een verborgen Object genaamd arguments. JavaScript functies kunnen meer of minder argumenten ontvangen dan dat ze zelf aangeven. Hierdoor is het dus mogelijk om een willekeurig aantal variabele te ontvangen in een functie. Deze argumenten zijn te benaderen via het Object arguments. Een voorbeeld hoe je dit kan gebruiken staat in Voorbeeld_Functies_4.

function func() { for (var i = 0; i < arguments.length; i ++) { var argument = arguments[i]; console.log(argument); } } func(4, 5, 2, 4, 5, 2);
var func = Function ("argumentA", "argumentB", "console.log(argumentA); console.log(argumentB);"); func("argument", 123);

Document Object Modeljavascript in de browser

Document Object Model of DOM is een verzamelnaam voor alle elementen van de html pagina.

EventListenershtml pagina's interactief maken

Een eventListener is een

Operatorsvar, this, new, in, delete, instanceof, typeof

this

In JavaScript is this een reverentie naar het globale Object.

new

De operator new geeft aan dat er een instatie gemaakt wordt van een Object.

in

delete

instanceof

typeof

Statementif, else, for, while, return, switch

if else

for

for (var i = 0; i < 100; i ++) { }
var array = ['a', 'b', 'c', 'd', 'e', 'f']; for (var i = 0; i < array.length; i ++) { var element = array[i]; }
var object = { naam: 'Sjors', beroep: 'raps schrijven', eten: 'Pindakaas' } for (var i in object) { var element = object[i]; }

while

while(conditie) { }
while(true) { }

return

function clamp(x, min, max) { if (x > max) { x = max; } else if (x < min) { x = min; } return x; } var a = clamp(10, 0, 5);

switch

window.onkeydown = function (event) { switch(event.keyCode) { case 37: //voer code uit voor pijltje naar links break; case 38: //voer code uit voor pijltje naar boven break; case 39: //voer code uit voor pijltje naar rechts break; case 40: //voer code uit voor pijltje naar beneden break; } };

Globale Functiesfuncties van javascript

Math

Voor de complexe berekeningen heeft JavaScript een Object Math. Dit is een static Object. Dit betekent dat het niet instancieerbaar is zoals Number en String. In dit Object zitten een aantal wiskundige methodes (ander woord voor functies). Een voorbeeld van hoe je Math kan gebruiken is in Voorbeeld_Math_1 gegeven. In het begin zijn 3 variabelen gedeclareerd. Dit is niet nodig, je kan ook direct een getal als als argument meegeven. Om Math te gebruiken schrijf je eerst Math gevolgd door een . gevolgd door de naam van de functie met een argument. De functie pow heeft twee argumenten nodig. Een basis getal en een exponent. In dit geval is de variabele macht 6 tot de macht 2 = 36. De functie round rond een getal af en returnt dit nieuwe getal. Alle functies van Math passen het getal dat wordt meegeven als argument niet aan. numC is dus nog steeds 3.2, maar afgerond is wel 3 geworden.

var numA = 6; var numB = 2; var numC = 3.2; var macht = Math.pow(numA, numB); var afgerond = Math.round(numC);

Een overzicht van alle methodes van Math is in de tabel hieronder te vinden.

Methode Beschrijving
abs(x) Returnt de absolute waarde van een getal. -6 wordt dus 6, en 6 blijft 6.
acos(x) Returnt de cos-1 van x in radialen.
asin(x) Returnt de sin-1 van x in radialen.
atan(x) Returnt de tan-1 van x in radialen.
atan2(x, y) Returnt de plaats op een eenheids cirkel van x en y.
ceil(x) Returnt x, naar boven afgerond.
cos(x) Returnt de cosinus van x in radialen.
exp(x) ???
floor(x) Returnt x, naar beneden afgerond.
log(x) Returnt de log van x.
max(a,b,c,...,n) Accepteerd een willekeurig aantal argumenten en returnt de hoogste.
min(a,b,c,...,n) Accepteerd een willekeurig aantal argumenten en returnt de laagste.
pow(x,y) Returnt de uitkomst van x tot de macht y.
random() Returnt een willekeurig getal van 0 tot 1
round(x) Returnt x, afgerond.
sin(x) Returnt de sinus van x in radialen.
sqrt(x) Returnt de wortel van x.
tan(x) Returnt de tangens van x in radialen.

RegExp

Date

JSON

Overige Functies

isNaN

var a = Number.NaN === Number.NaN; var b = isNaN(Number.NaN);

isFinite

alert

parseInt

parseFloat

Eval

Workaroundstrukjes binnen javascript

callback

In JavaScript heb je een Object Image. Hiermee kun je plaatjes inladen met behulp van een source. In Voorbeeld_callback_1 staat een functie imageLoader. Deze functie krijgt als argurment een source mee, hiermee wordt er een plaatje ingeladen. Op het moment dat het plaatje geladen is, wordt dit plaatje gereturnt.

function imageLoader(src) { var img = new Image(); img.src = src; img.onload = function () { return img; } } var img = imageLoader('image.jpg'); context.drawImage(img, 0, 0);

Echter, omdat JavaScript non-blocking is werkt deze code niet. De functie onload wordt geactieveerd op het moment dat het plaatje geladen is, maar het script wacht hier niet op. Inplaats daarvan gaat het script gewoon verder. Dit betenkend dat de return nooit aan komt.

Hier is een oplossing voor bedacht, namelijk callbacks. Een callback is een functie die als variabele wordt meegegeven aan een functie.

function imageLoader(src, callback) { var img = new Image(); img.src = src; img.onload = function () { callback(img); } } imageLoader('image.jpg', function (img) { context.drawImage(img, 0, 0); });

chaining

var A = new Vector(10, 20); var B = new Vector(35, 40); var C = new Vector(10, 25); var chain = A.addVector(B).addVector(C);

prototype

Het Object prototype is al eerder kort besproken. Het is Object die aan elk instantieerbaar Object is toegevoegd. Hierin staat elke functie die dat Object heeft. Het is ook mogelijk om aan prototype functies toe te voegen. Een voorbeeld hiervan is hieronder gegeven. Er wordt een functie clone toegevoegd aan Array. In deze functie wordt een Array aangemaakt. De inhoud van this wordt in deze Array gekopieerd, vervolgens wordt deze gereturnt. Op het moment dat de Array die in variabele A geclonet wordt naar variabele B, heeft het geen link meer met variabele A. De weiziging van positie 0 van variabele B wordt dus niet toegepast bij variabele A.

Array.prototype.clone = function () { var array = new Array(); for (var i = 0; i < this.length; i ++) { array.push(this[i]); } return array; } var A = ['A', 'B', 'C', 'D', 'E', 'F']; var B = A.clone(); B[0] = 'G';

Op deze manier functies toevoegen met behulp van prototype werkt alleen maar bij functies met een constructor. Het werk dus alleen bij Objecten die instancieerbaar zijn, bijvoorbeeld String, Array of Object. En niet bij Objecten die static zijn zoals Math, RegExp enz. Je kan hier wel functies aan toevoegen, maar dat moet op een andere manier. Een voorbeeld hiervan is hieronder gegeven.

Math.clamp = function (x, min, max) { if (x > max) { x = max; } else if (x < min) { x = min; } return x; } var value = Math.clamp(6, 1, 2);

Object Georienteerdobject georienteerd programmeren in javascript

JavaScript is een 'functional language'. Dit betekent dat het niet de functionaliteit ondersteunt van object georienteerd programmeren (oop, afkorting voor 'object oriented programming') ondersteunt, zoals class en constructor. Maar toch is het mogelijk om de voordelen van oop toe te passen in javascript. Bij oop maak je gebruik van classen en instanties. Een class is een blauwdruk voor een Object. Een class bestaat grofweg uit 2 delen. De state, en de functies. Een instantie is een object gegenereerd vanuit een class. Deze instantie kan toegekend worden aan een variabele.

Een mooi voorbeeld van oop is het gebruik maken van een aparte class voor een Vector. Een Vector is een punt in een 2D ruimte. En Vector heeft een x en een y waarde, dit is de state van de Vector. Je kunt je voorstellen dat er in een programma met misschien 100 verschillende Vectoren gerekend wordt, die allemaal een verschillende waardes hebben. Al deze vectoren zijn instanties van een class Vector. Daarnaast heeft een class ook functies. Er kunnen bijvoorbeeld 2 vectoren bij elkaar opgeteld worden. De code hieronder is een voorbeeld van 2 instanties van een class Vector (de class is nog niet geschreven). Deze code is vele male simpeler dan elke keer een aparte variabele x en y aan te maken, en die bij elkaar optellen.

var v_A = new Vector(10, 10); var v_B = new Vector(15, 20); var v_AB = v_A.addVector(v_B);

Er zijn in het begin twee variabelen aan gemaakt, v_A en v_B. Achter het = teken staat een nieuw woord: new. De betekenis van new is, maak een nieuwe instantie van een bestaande class aan. Deze class is te vinden in het woord na new, in dit geval Vector. Als argument wordt er een x en een y waarde meegegeven. Om deze vector class te realiseren, heb je een class nodig genaamd Vector, die de x en y waarde bijhoudt, en een functie heeft om 2 vectoren bij elkaar op te tellen. In het geval van Voorbeeld_OOP_1 moet de variabele v_AB als x waarde 10 + 15 = 25 krijgen en als y waarde 10 + 20 = 30 krijgen.

function Vector(x, y) { //De state this.x = x; this.y = y; //De functies this.addVector = function (v) { var x = this.x + v.x; var y = this.y + v.y; return new Vector(x, y); } }

De code om de Vector class te maken is hierboven beschreven. Omdat een functie in JavaScript ook een Object is kun je een class definieren als functie. Deze functie krijgt twee variabelen binnen. Een x en een y waarde. Deze 2 waardes, de state van de class, worden meteen gezet op this. Hierdoor is de state van buiten af te lezen. Je zou bijvoorbeeld uit Voorbeeld_OOP_1 de x waarde van v_A kunnen opvragen door v_A.x. De functie om 2 vectoren bij elkaar op te tellen staat hieronder. Dit is een anonieme functie die ook op this staat. Op het moment dat deze functie wordt uitgevoerd, krijgt deze functie een andere vector mee als argument. daarna worden de x en y waardes van zijn eigen Object en het meegekregen Object bij elkaar opgeteld. Daarna wordt er een nieuwe Vector aangemaakt met de zojuist berekende x en y waardes. deze Vector wordt terug gegeven.

Met de code hierboven kun je redelijk goed op een oop manier programmeren. Je kunt een class aanmaken waarin je een state en functies kunt declareren. Er zit 1 nadeel aan deze code. Elke keer als deze class wordt aangeroepen, worden opnieuw opnieuw alle functies in het geheugen gezet. Op den duur loopt op deze manier het geheugen vol, en wordt het programma traag. Een oplossing voor dit probleem is gebruik maken van prototype. Elk Object in JavaScript heeft dit Object. In dit prototype staan functies die horen bij het een prototype. De functie 'replace' van een String staat bijvoorbeeld in dit prototype. Het is ook mogelijk om zelf functies in dit Object te zetten. Dit is in Voorbeeld_OOP_3 beschreven.

function Vector(x, y) { //De state this.x = x; this.y = y; } //De functies Vector.prototype.addVector = function (v) { var x = this.x + v.x; var y = this.y + v.y; return new Vector(x, y); }

De code uit Voorbeeld_OOP_3 heeft veel overeenkomst met de code uit Voorbeeld_OOP_2. Het enige verschil is dat de functie addVector verplaatst is vanuit de class naar het prototype object. De functionaliteit van beide voorbeelden is gelijk.

Bronnen