H1: Javascript basis
Code structuur
JavaScript toevoegen aan HTML pagina: in HTML <script src =”js.hello.js”></script>
o Script tag in <body> na inhoud => JS wordt pas gedownload en uitgevoerd als de
HTML pagina al is weergegeven in de browser
Maakt gebruik van statements gescheiden door ;
Eenvoudige statements:
o console.log(); = toont uitvoer in console
o alert(); = toont uitvoer in een simpel dialoogvenster
Comments:
o // = one line comment
o /* */ = multi line comment
JS strict mode: ‘use strict’ bovenaan in script
Variabelen
Variabelen: houden data bij en heeft een naam
o let = variabele declareren in camelCasing
o Via assignment operator = kan je waarde toekennen aan variabele
o const = variabelen die je moet initaliseren bij declaratie en die nadien niet meer van
waarde kunnen veranderen
Good practice: gebruik zoveel mogelijk const ipv let
o Naamgeving: zinvolle beschrijvende namen + vermijd afkortingen
Datatypes
JS heeft steeds een datatype (8 basis types)
JS is a dynamically types language: type van variabele wordt bepaald at run-time en kan
wijzigen
JS is a loosely types language: los omgesprongen met type van variabele
Datatype number:
Gehele en floating point getallen
Integer literals: decimaal, hexadecimaal (0x), octaal (0o) en binair (0b)
Floating point literals: 3.14, 6.02*e23
Basis operatoren: +, -, *, /, %
Precisie tot op 17 cijfers na de komma
Not a Number (NaN): om iets dat niet als getal kan voorgesteld worden te beduiden
o isNan() = boolse functie die detecteert of een waarde NaN is
Infinity: berekening die een getal retourneert buiten he waardenbereik retourneert infinity
of -infinity
o isFinite() = boolse functie die detecteert of een waarde finite is
String – number conversie functies:
o parseInt() = converteert string naar geheel getal
o parseFloat() = converteert string naar floating point
o Beide doorlopen string tot ze het eerste ongeldige karakter tegenkomen
,Datatype boolean:
True or false
Alle waarden in JS hebben bools equivalent, dit wordt gebruikt bij impliciete conversies
Datatype String:
Bevat sequentie van 0 of meer Unicode karakters vervat in ‘ of “
+ operator: concatenatie van 2 strings
toString() = conversie naar een string
Template literals strings die variabelen & expressies bevatten
o Worden omsloten door backticks (` `)
o Multiline strings zijn mogelijk
o Expressies in de string evalueren ${expressie}
Datatype undefined:
Bevat enkel speciale waarde undefined
Staat voor onbekende waarde
o Variabele waaraan nog geen waarde is toegekend bevat waarde undefined
o Functie in JS retourneert steeds een waarde, indien er niet expliciet een waarde
wordt geretourneerd dan wordt er impliciet undefined geretourneerd
Datatype null:
Bevat enkel waarde null
Staat voor lege object pointer
Evalueert false in boolean expressive
Datatype bigint:
Gehele getallen voorstellen die buiten het bereik van number vallen
Gebruik suffix n voor bigint literals (Bv. const number = 592850348250532038n)
Datatype object – symbol:
Datatype object is een voorstelling van meer complexe datastructuren
Datatype symbol is om unieke identifiers voor te stellen
o Kan gebruikt worden om bv. unieke namen te hebben voor properties in objecten
, Wrapper objects
Wrapper object: object dat primitief datatype omsluit
o Voor elk primitief datatype behalve null en undefined
Wrapper object geeft mogelijkheid properties en methodes te gebruiken
Wrapper object Number:
JS past impliciete conversie toe, primitieve getal wordt automatisch omgezet naar Number
object als je een methode van Number oproept
Voorbeelden van methodes:
o toFixed(x) = afronden tot x cijfers na de komma
o toString(x) = string representatie, x is de radix, default 10
Voorbeelden van properties:
o Number.MIN_VALUE = constante voor kleinste getal
o Number.MAX_VALUE = grootste getal
o Number.NaN = idem als NaN maar Property van Number
Wrapper object Boolean:
Functie Boolean(x) cast x naar een Boolean
Wrapper object String:
String() = type-casting met String() roept in feite toString() aan maar één verschil is dat
String() ook een null of undefined kan omzetten zonder fout te genereren
Primitief wrapper object String bevat heel wat handige methodes
Wrapper object BigInt:
Je kan functie BigInt(x) gebruiken om een bigint te maken
Gelijkaardig aan number
Math & Date object
Math-object: built-in object dat properties en methodes bevat voor wiskundige constanten
en functies
o Bevat enkel static properties en methodes
o Math.round(), Math.trunc() = afronden of afkappen
o Math.max(), Math.min() = grootste/kleinste getal
o Math.random() = pseudo random getal tussen 0 en 1
Date-object: houdt datums bij in milliseconden sinds 1/1/1970
o Creatie van date object: const date = new Date(1954, 11, 14, 5, 34, 0, 0) (jaar, maand,
dag, uren, minuten, sec, msec)
o getDate() = return dag van de maand
o getMonth() = start vanaf 0 (januari = 0 e maand)
o getFullYear()
o getHours() = start vanaf 0
o getMinutes() = start vanaf 0
o getSeconds() = start vanaf 0
o getDay() = dag in de week (maandag = 0e dag)
Code structuur
JavaScript toevoegen aan HTML pagina: in HTML <script src =”js.hello.js”></script>
o Script tag in <body> na inhoud => JS wordt pas gedownload en uitgevoerd als de
HTML pagina al is weergegeven in de browser
Maakt gebruik van statements gescheiden door ;
Eenvoudige statements:
o console.log(); = toont uitvoer in console
o alert(); = toont uitvoer in een simpel dialoogvenster
Comments:
o // = one line comment
o /* */ = multi line comment
JS strict mode: ‘use strict’ bovenaan in script
Variabelen
Variabelen: houden data bij en heeft een naam
o let = variabele declareren in camelCasing
o Via assignment operator = kan je waarde toekennen aan variabele
o const = variabelen die je moet initaliseren bij declaratie en die nadien niet meer van
waarde kunnen veranderen
Good practice: gebruik zoveel mogelijk const ipv let
o Naamgeving: zinvolle beschrijvende namen + vermijd afkortingen
Datatypes
JS heeft steeds een datatype (8 basis types)
JS is a dynamically types language: type van variabele wordt bepaald at run-time en kan
wijzigen
JS is a loosely types language: los omgesprongen met type van variabele
Datatype number:
Gehele en floating point getallen
Integer literals: decimaal, hexadecimaal (0x), octaal (0o) en binair (0b)
Floating point literals: 3.14, 6.02*e23
Basis operatoren: +, -, *, /, %
Precisie tot op 17 cijfers na de komma
Not a Number (NaN): om iets dat niet als getal kan voorgesteld worden te beduiden
o isNan() = boolse functie die detecteert of een waarde NaN is
Infinity: berekening die een getal retourneert buiten he waardenbereik retourneert infinity
of -infinity
o isFinite() = boolse functie die detecteert of een waarde finite is
String – number conversie functies:
o parseInt() = converteert string naar geheel getal
o parseFloat() = converteert string naar floating point
o Beide doorlopen string tot ze het eerste ongeldige karakter tegenkomen
,Datatype boolean:
True or false
Alle waarden in JS hebben bools equivalent, dit wordt gebruikt bij impliciete conversies
Datatype String:
Bevat sequentie van 0 of meer Unicode karakters vervat in ‘ of “
+ operator: concatenatie van 2 strings
toString() = conversie naar een string
Template literals strings die variabelen & expressies bevatten
o Worden omsloten door backticks (` `)
o Multiline strings zijn mogelijk
o Expressies in de string evalueren ${expressie}
Datatype undefined:
Bevat enkel speciale waarde undefined
Staat voor onbekende waarde
o Variabele waaraan nog geen waarde is toegekend bevat waarde undefined
o Functie in JS retourneert steeds een waarde, indien er niet expliciet een waarde
wordt geretourneerd dan wordt er impliciet undefined geretourneerd
Datatype null:
Bevat enkel waarde null
Staat voor lege object pointer
Evalueert false in boolean expressive
Datatype bigint:
Gehele getallen voorstellen die buiten het bereik van number vallen
Gebruik suffix n voor bigint literals (Bv. const number = 592850348250532038n)
Datatype object – symbol:
Datatype object is een voorstelling van meer complexe datastructuren
Datatype symbol is om unieke identifiers voor te stellen
o Kan gebruikt worden om bv. unieke namen te hebben voor properties in objecten
, Wrapper objects
Wrapper object: object dat primitief datatype omsluit
o Voor elk primitief datatype behalve null en undefined
Wrapper object geeft mogelijkheid properties en methodes te gebruiken
Wrapper object Number:
JS past impliciete conversie toe, primitieve getal wordt automatisch omgezet naar Number
object als je een methode van Number oproept
Voorbeelden van methodes:
o toFixed(x) = afronden tot x cijfers na de komma
o toString(x) = string representatie, x is de radix, default 10
Voorbeelden van properties:
o Number.MIN_VALUE = constante voor kleinste getal
o Number.MAX_VALUE = grootste getal
o Number.NaN = idem als NaN maar Property van Number
Wrapper object Boolean:
Functie Boolean(x) cast x naar een Boolean
Wrapper object String:
String() = type-casting met String() roept in feite toString() aan maar één verschil is dat
String() ook een null of undefined kan omzetten zonder fout te genereren
Primitief wrapper object String bevat heel wat handige methodes
Wrapper object BigInt:
Je kan functie BigInt(x) gebruiken om een bigint te maken
Gelijkaardig aan number
Math & Date object
Math-object: built-in object dat properties en methodes bevat voor wiskundige constanten
en functies
o Bevat enkel static properties en methodes
o Math.round(), Math.trunc() = afronden of afkappen
o Math.max(), Math.min() = grootste/kleinste getal
o Math.random() = pseudo random getal tussen 0 en 1
Date-object: houdt datums bij in milliseconden sinds 1/1/1970
o Creatie van date object: const date = new Date(1954, 11, 14, 5, 34, 0, 0) (jaar, maand,
dag, uren, minuten, sec, msec)
o getDate() = return dag van de maand
o getMonth() = start vanaf 0 (januari = 0 e maand)
o getFullYear()
o getHours() = start vanaf 0
o getMinutes() = start vanaf 0
o getSeconds() = start vanaf 0
o getDay() = dag in de week (maandag = 0e dag)
