Javascript - Lessen Verzameling

8/3/2019 Javascript - Lessen Verzameling

1/13

Javascript

LES 1

- fahrenheit naar celsius voorbeeldje

var fahrenheit = prompt('Geef temperatuur in Fahrenheit', 0);

var celsius = (fahrenheit - 32) * 5 / 9;

alert(celsius);

- javascript primitive types:

* number

* string* boolean

* null

* undefined

--> alles wat geen primitive type is, is een object!

- arrays:

var a = new Array("Kris", "Dries", "Bart", "Jan");

var a = ["Kris", " Dries", "Bart", "Jan"];

var a = new Array();a[0] = "Kris";

a[1] = "Dries";

a[2] = "Bart";

a[3] = "Jan";

--> stel je hebt op n plaats in de array (of meerdere) niets gedeclareerd, dan wordt die

plaats undefined

var a = ["Kris", "Dries"];

a[3] = 15;

Dan op de plek a[2] staat er "undefined"

- if, else

if(test) {

// doe iets

}

else {

//doe iets anders

}

if(a < b) {

// doe iets

}

else {

//doe iets anders


2/13

}

if(a < 10) {

// doe iets

}

else {//doe iets anders

}

var test = true;

if(test) {

// doe iets

}

else {

//doe iets anders

}

var test = a < b;

if(test) {

// doe iets

}

else {

//doe iets anders

}

- lussen

while(test) {

// doe iets

}

var i = 0;

while (i < 10) {

//doe iets

i = i + 1;

}

for (var i = 0; i < 10; i = i + 1) {

//doe iets

}var i = 0;

do {

//doe iets

i++;

} while(i < 9)

switch(sNaam) {

case "Nico":

alert("Hallo Nico");

break;

case "Dirk":

alert("Jij bent Dirk");break;


3/13

default:

alert("Ik ken je niet");

break;

}

Wat gebeurt er bij de volgende code:var sNaam = "Dirk"; --> case "Dirk"

- functions

function doorgaan() {

alert("We blijven doorgaan");

}

doorgaan();

function doorgaan(hoelang) {

alert("We blijven " + hoelang + " doorgaan");

}

doorgaan("eeuwig");

function doorgaan(hoelang, etc1, etc2) {

alert("We blijven " + hoelang + " doorgaan");

}

doorgaan("eeuwig", "altijd");

LES 2

- type conversion

isNaN(waarde);

isFinite(waarde);

parseInt(waarde);

parseInt(waarde, basis);

parseFloat(waarde);

String(waarde);

- math

Math.round();Math.floor();

Math.ceil();

Math.PI;

Math.E;

Math.random();

Math.pow(a, b);

Math.sqrt(a);

Math.cos(a);

Math.sin(a);


4/13

- date

new Date(); // huidige datum en tijd

new Date(milliseconds); // sinds 1970/01/01

new Date(dateString);

new Date(year, month, day, hours, minutes,seconds, milliseconds);

var today = new Date();

var d1 = new Date("October 13, 1975 11:13:00");

var d2 = new Date(79,5,24);

var d3 = new Date(79,5,24,11,33,0);

d2.getFullYear();

d2.getMonth();

d2.getDate();

d2.getHours();

d2.getMinutes();

d2.getSeconds();d2.setFullYear(year, month, day);

d2.setMonth(month);

d2.setDate(day);

d2.setHours(hour, min, sec, millisec);

d2.setMinutes(min, sec, millisec);

d2.setSeconds(sec, millisec);

- array

aNamen.length;

aNamen.push(a);

sNaam = aNamen.pop();

aNamen.sort();

- string

String.fromCharCode(nPos);

sNaam.indexOf(a);

sNaam.replace(a, b);

sNaam.substring(nFrom, nTo);

sNaam.toLowerCase();sNaam.toUpperCase();

- arguments

function sum(a,b) {

var nResult = a + b;

return nResult;

}

var r1 = sum(1,2);


5/13

function sum2(a,b) {

var nResult = arguments[2] + arguments[3];

return nResult;

}

var r4 = sum2(1,2,3,4,5);function sumAll() {

var result = 0;

var nAll = arguments.length;

for(var i = 0; i < nAll; i++){

result+=arguments[i];

}

return result;

}

var r5 = sumAll(1,2,3,4,5);

- scope

Declaratie buiten functie:

globale scope (overal gekend)

Declaratie binnen functie:

locale scope (enkel binnen deze functie gekend)

function func1() {

var b = tralala;

a = a + la;

}

var a = hop;

func1();

a: hopla

b: ReferenceError: b is not defined

- andere schrijfwijze

function sum(a,b){

return a + b;}

Andere schrijfwijze

var sum = function(a,b){

return a + b;

}

var optellen = sum;

var r6 = optellen(1,2);

r6: 3


6/13

- returnwaarde

function sum() {

return trol;

}

var r7 = sum;

var r8 = sum();

r7: function(){ return trol; }

r8: trol

- anonieme functies

window.onload = function() {

alert(Hoera!);}

- inner functies

function maakSnoep() {

var maakChocola = function(){

}

maakChocola();

}

LES 3

- variabelen declareren

function sum(a,b) {

return a + b;

}

var sum2 = function(a, b) {

return a + b;}

var a = 5;

var b = 6;

var c;

function sum(a,b) {

return a + b;

}

var sum2 = function(a, b) {

return a + b;

}


7/13

var a = 5, b = 6, c;

- objecten

Gendexeerde arrays: Array

Associatieve arrays: Object

var oPersoon = {

naam: "Chaniqua",

richting: "2MCT",

groep: 5

};

oPersoon.naam >> "chaniqua"

var oPersoon = {

naam: "Chaniqua",

richting: "2MCT",

groep: 5,

"sub-groep": "M"

};

oPersoon["sub-groep"] >> "M"

var oPersoon = {naam: "Chaniqua",

richting: "2MCT",

groep: 5,

"sub-groep": "M",

"WTF?$#!@$": {

a: "a-value"

}

};

oPersoon[" WTF?$#!@$"].a >> "a-value"

var oPersoon = {

naam: "Chaniqua",

richting: "2MCT",

groep: 5,

"sub-groep": "M",

"WTF?$#!@$": {

a: "a-value"

},

vrienden: ["pristina", "an"]

};


8/13

oPersoon.vrienden >> ["pristina", "an"]

oPersoon.vrienden[0] >> "pristina"

oPersoon.woonplaats >> undefined

var oPersoon = {

naam: "Chaniqua",

richting: "2MCT",

groep: 5

};

oPersoon.woonplaats = "Schilde";

oPersoon.woonplaats >> "Schilde"

var obj1 = {

a = "hopla"

}

var obj2 = obj1;

obj2.a = "tralala";

obj1.a >> "tralala"

obj2.a >> "tralala"

- functies in objecten

var dog = {

name: "Samson",

talk: function() {

return "Woof, woof!";

},

sayName: function() {

return this.name;

}

};

dog.talk() >> "Woof, woof!"

dog.name >> "Samson"

dog.sayName() >> "Samson"

function Cat(sName) {

this.name = sName;

this.talk = function() {

return "Ik ben "+this.name+". Miaow!";

} ;

}


9/13

var poes = new Cat("Garfield");

poes.name >> "Garfield"

poes.talk() >> "Ik ben Garfield. Miaow!"

function Cat(sName) {

this.name = sName;

this.talk = function() {

return "Ik ben "+this.name+". Miaow!";

} ;

}

var poes2 = Cat("Garfield");

poes2.name >> undefined

poes2.talk() >> poes2 has no properties

- typeof

var vijf = 5;

var cirkel = "rond";


var vis = {};

typeof vijf >> "number"

typeof cirkel >> "string"

typeof poes >> "object"typeof vis >> "object"

- instanceof


var vis = {};

poes instanceof Cat >> true

poes instanceof Object >> true

vis instanceof Cat >> false

vis instanceof Object >> true;

LES 4

- DOM

--> een taal-neutrale set van interfaces.

--> een API voor HTML en XML-documenten.

--> biedt een structurele representatie van het document zodat inhoud en visuele presentatie

gewijzigd kan worden.

--> connecteert webpaginas met scripts


10/13

- nodes -> element attributes

nodeName

nodeValue

nodeType

parentNodechildNodes

firstChild

lastChild

previousSibling

nextSibling

attributes

ownerDocument

- get element by id

HTML:

JS:

var msgInput = document.getElementById("message");

- get elements by tag name

HTML:

Item 1

Item 2

Item 3

JS:

var items = document.getElementsByTagName("li");

Geen toegang tot DOM voordat pagina volledig geladen is.

- onload event

function init(){

alert("pagina geladen");

}

window.onload = init;

window.onload = function(){

alert("pagina geladen");

};


11/13

- click event

function doSomething(){

alert("do something");

}

function init(){

var btn = document.getElementById("myBtn");

btn.onclick = doSomething;

}

window.onload = init;

window.onload = function(){

var btn = document.getElementById("myBtn");

btn.onclick = function(){

alert("do something");

};

};

- DOM level 2 events

el.addEventListener("click", myFunction, false);

el.attachEvent("onclick", myFunction);

- style attribuut

var el = document.getElementById("aap");el.style.color = "red";

el.style.marginLeft = "2px";

el.style.margin = "5px 2px 3px 2px";

var el = document.getElementById("aap");

el.style.display = "block";

el.style.display = "inline";

el.style.display = "none";

- className attribuut

element.className = "nieuweClass";

element.className = "";

- elementen aanmaken

var p = document.createElement("p");

// maakt een nieuw P-element aan

var txt = document.createTextNode("test");

// maakt een tekstnode aan

p.appendChild(txt);// koppelt de tekstnode aan de paragraaf


12/13

parentNode.insertBefore(p, siblingNode);

// koppelt P aan parentNode, voor siblingNode

- DOM manipuleren

HTML:

Item 1

Een extra item aanmaken

var hItem = document.createElement("li");

var tText = document.createTextNode("Nog een item");

hItem.appendChild(tText);

Item verplaatsen

var hContainer = document.getElementById("container");

var hNextItem = document.getElementById("item1");

hContainer.insertBefore(hNextItem, hItem);

Item verwijderen

var hContainer = document.getElementById("container");

var hNextItem = document.getElementById("item1");hContainer.removeChild(hNextItem);

LES 5

- animaties

setInterval();

setTimeout();

clearInterval();

clearTimeout();

function doeMoveke(){

// verzet het blok 1px naar rechts

}

setInterval(doeMoveke, 100);



}

var intervalid = setInterval(doeMoveke, 100);

clearInterval(intervalid);

function doeMoveke(){// verzet het blok 1px naar rechts


13/13

}

setTimeout(doeMoveke, 100);



}

var timeoutid = setTimeout(doeMoveke, 100);

clearTimeout(timeoutid);



}




timeoutid = setTimeout(doeMoveke, 100);}


- standaard actie tegengaan

eventReference.preventDefault();

eventReference.stopPropagation();

return false;

HTML:

Google

JS:

hA = document.getElementById("google");

hA.onclick = function() {

// doe iets

return false;

}

HTML:

JS:

hForm = document.getElementById("formulier");

hForm.onsubmit = function() {

// doe iets

return false;

}

Documents

Javascript - Lessen Verzameling