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
8/3/2019 Javascript - Lessen Verzameling
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;
8/3/2019 Javascript - Lessen Verzameling
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);
8/3/2019 Javascript - Lessen Verzameling
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);
8/3/2019 Javascript - Lessen Verzameling
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
8/3/2019 Javascript - Lessen Verzameling
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;
}
8/3/2019 Javascript - Lessen Verzameling
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/3/2019 Javascript - Lessen Verzameling
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!";
} ;
}
8/3/2019 Javascript - Lessen Verzameling
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 poes = new Cat("Garfield");
var vis = {};
typeof vijf >> "number"
typeof cirkel >> "string"
typeof poes >> "object"typeof vis >> "object"
- instanceof
var poes = new Cat("Garfield");
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
8/3/2019 Javascript - Lessen Verzameling
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");
};
8/3/2019 Javascript - Lessen Verzameling
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
8/3/2019 Javascript - Lessen Verzameling
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);
function doeMoveke(){
// verzet het blok 1px naar rechts
}
var intervalid = setInterval(doeMoveke, 100);
clearInterval(intervalid);
function doeMoveke(){// verzet het blok 1px naar rechts
8/3/2019 Javascript - Lessen Verzameling
13/13
}
setTimeout(doeMoveke, 100);
function doeMoveke(){
// verzet het blok 1px naar rechts
}
var timeoutid = setTimeout(doeMoveke, 100);
clearTimeout(timeoutid);
function doeMoveke(){
// verzet het blok 1px naar rechts
}
var timeoutid = setTimeout(doeMoveke, 100);
function doeMoveke(){
// verzet het blok 1px naar rechts
timeoutid = setTimeout(doeMoveke, 100);}
var timeoutid = setTimeout(doeMoveke, 100);
- standaard actie tegengaan
eventReference.preventDefault();
eventReference.stopPropagation();
return false;
HTML:
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;
}
Top Related