Basiscursus javascript en jQuery

Soorten operatoren

Het laatste stukje theorie en dan kunnen we met programmeren beginnen.
We gaan even de operatoren behandelen.

Er zijn 3 soorten operatoren.


Hieronder volgt een overzicht van het doel, en de mogelijkheden van de operatoren.

				
					$(document).ready(function(){
	var naam = "Joyfully-Joe";
	console.log("Hallo " + naam)
});

Hallo Joyfully-Joe

Rekenkundige operatoren

Deze operatoren worden gebruikt om mee te rekenen.
in de afbeelding zie je een voorbeeldcode met daarbij een korte uitleg van de werking van de meest gebruikte operatoren.

Op regel 2, 3 en 4 worden variabelen aangemaakt.

Regel 6:
Die waarden van een en twee worden bij elkaar opgeteld.
De nieuwe waarde van twee wordt in de console getoond.

Regel 7:
De waarde van een wordt van drie afgetrokken.
De nieuwe waarde van drie wordt in de console getoond.

Regel 8:
twee en drie worden met elkaar vermenigvuldigd.
De uitkomst wordt in de console getoond.

Regel 9:
twee wordt gedeeld door drie
De uitkomst wordt in de console getoond.

Regel 10:
Het % teken noemen we Modulo
5 * twee is 10.
De verkregen waarde wordt gedeeld door drie.
Wat overblijft (rest) is 1.
De modulo wordt in de console getoond.

Regel 11 en 12:
De waarde van een wordt met 1 verhoogd.
De nieuwe waarde van een wordt in de console getoond.

Regel 13 en 14:
De waarde van twee wordt met 1 verminderd.
De nieuwe waarde van twee wordt in de console getoond.

				
					$(document).ready(function(){
	var een = 1;
	var twee = 2;
	var drie = 3;

	console.log(een + twee);
	console.log(drie - een);
	console.log(twee * drie);
	console.log(twee / drie);
	console.log(5 * twee % drie);
	een++;
	console.log(een );
	twee--;
	console.log(twee);
});
3
2
6
0.6666666666666666
1
2
1

Toewijzingsoperatoren

De belangrijkste toewijzingsoperator is het =teken.
Je kunt hiermee een (nieuwe) waarde aan een variabele toekennen.
Het = teken kan gecombineerd worden met rekenkundige operatoren.

Op regel 2, 3 en 4 worden variabelen aangemaakt.
Je ziet hier meteen de eenvoudigste toewijzingsoperator.
Met het = teken wijs je de waarde toe aan de variabele.

Regel 6 en regel 7:
Die waarde van een wordt met 10 verhoogd.
De nieuwe waarde van een wordt in de console getoond.

Regel 9 en regel 10:
Die waarde van twee wordt met 10 verminderd.
De nieuwe waarde van twee wordt in de console getoond.

Regel 12 en regel 13:
Die waarde van drie wordt met 5 vermenigvuldigd.
De nieuwe waarde van drie wordt in de console getoond.

Regel 15 en regel 16:
De waarde van drie wordt door 3 gedeeld.
De nieuwe waarde van drie wordt in de console getoond.

				
					$(document).ready(function(){
	var een = 1;
	var twee = 30;
	var drie = 3;

	een += 10;
	console.log(een);
	twee -= 10;
	console.log(twee);
	drie *= 5;
	console.log(drie);
	drie /= 3;
	console.log(drie);
});
11
20
15
5

Vergelijkingsoperatoren

Deze operatoren worden gebruikt om controles uit te voeren.
Het resultaat is altijd TRUE of FALSE.

In het voorbeeld hiernaast zie je dat variabelen a en b van het type Number zijn.
Variabelen c, d en e zijn van het type String.
Tenslotte een nieuw variabele-type.
variabelen f en g zijn van het type Boolean.
Een Boolean is altijd TRUE of FALSE

Regel 11:
Met == controleer je of de waarde van variabelen a en c hetzelfde is.
Je merkt dat javascript hier geen verschil ziet tussen een Number en een String.
Het resultaat is dus true.

Regel 12:
Met === controleer je of de waarde EN het type van twee variabelen hetzelfde zijn.
Daarom is het resultaat nu false.

Regel 13:
Met het NOT-teken (!) controleer je of twee variabelen NIET dezelfde waarde hebben.
Als de waarde gelijk is wordt false geretourneerd en als de waarde NIET gelijk is krijg je true terug.

Regel 14 en 15:
Er wordt gecontroleerd of een waarde groter dan of kleiner is dan een andere variabele.

Regel 16 en 17:
Er wordt gecontroleerd of een waarde groter/kleiner dan of gelijk aan een andere variabele is.

Regel 19, 20 en 21:
Een kleine bijzonderheid van de + operator.
Je kunt deze ook gebruiken om 2 strings samen te voegen.

Tenslotte de Booleans op regel 23 en 24:
Deze hebben de waarde true of false.
Ook dat kun je dus controleren.

				
					$(document).ready(function(){
	var a = 10;
	var b = 30;
	var c = '10';
	var d = "joyfully-";
	var e = "Joe";
	var f = true;
	var g = false;
	var h;

	console.log(a == c);
	console.log(a === c);
	console.log(a != b);
	console.log(a > c);
	console.log(a < c);
	console.log(a >= c);
	console.log(a <= c);

	h = d + e;

	console.log(h == d);
	console.log(h == "Joyfully-Joe");
	console.log(f == true);
	console.log(g == true);

});
true
false
true
false
false
true
true
false
false
true
false

Opdracht

Kennis en vaardigheden

Bewaar je werk in je persoonlijke javascript kennisbank.