Gegevens opslaan in variabelen en met deze variabelen werken

Bij het programmeren wordt veel gebruik gemaakt van variabelen. Een variabele is dus een naam-waarde combinatie die de computer kan gebruiken. De computer slaat een waarde tijdelijk op in een variabele (eigenlijk reserveert de computer een stukje van je geheugen, hangt aan dit stukje de naam die je het gegeven hebt en slaat de waarde daar op). Denk aan $y=2 \cdot x$, hierin zijn de x en y variabel. Zodra je een waarde aan x geeft kan je er iets mee, bv $ x=2 \rightarrow y=2\cdot(2) \rightarrow y=4 $ . De x is de naam van de variabele en de waarde is (in dit geval) 2. Bij programmeren doe je iets soortgelijks: eerst definieer (declareer) je de variabele en daarna gebruik je hem.

In javascript declareer je een variabele als volgt:

var a = 9;

Aan het einde van deze les weet je :

• in welke categorieën we gegevens plaatsen;
• een logische naam te geven aan de variabelen waarin we gegevens opslaan;
• hoe je de gegevens door javascript kunt laten herkennen;

Bekijk de video. Deze video biedt een basis voor de rest van dit hoofdstuk.

<script type="text/javascript">
	// Druk in de browser de functietoets F12 in om de uitvoer van console.log te zien.
	console.log("This is my first JavaScript!");
</script>

<script type="text/javascript">
	console.log("123.6");
</script>

<script type="text/javascript">
	console.log("@$^@@!!!!");
</script>

<script type="text/javascript">
	console.log("10 + 30 = " + (10 + 30)+"<br/>");
	var a=10;
	var b=30;
	console.log(a+ " + " + b + " = " + (a + b));
</script>

In dit voorbeeld zul je als uitvoer twee keer de regel 10 + 30 = 40. Tussen haakjes worden eerst de getallen bij elkaar opgeteld. Strings kun je ook "optellen" met de + operator.
Strings worden dan aan elkaar geplakt. "10 + 30 = 40" is nu een nieuwe string.

<script type="text/javascript">
	var a="10";
	var b="30";
	console.log(a+ " + " + b + " = " + (a + b));
</script>

<script type="text/javascript">
	console.log("10.6 + 30.44 = " + (10.6 + 30.44));
</script>

<script type="text/javascript">
	console.log("10.6 + 30.44 = " + "10.6" + "30.44");
</script>

<script type="text/javascript">
	var rijtje=new Array("Ik","ben",178,"cm",73.5,"kg");
	console.log(rijtje[0]+" ");
	console.log(rijtje[1]+" ");
	console.log(rijtje[2]+" ");
	console.log(rijtje[3]+"<br/>");
	console.log(rijtje[0]+" ");
	console.log(rijtje[1]+" ");
	console.log(rijtje[4]+" ");
	console.log(rijtje[5]+"<br/>");
</script>

Ik ben 178 cm
Ik ben 73.5 kg

5. In de volgende opdrachten is er een aantal variabelen gedeclareerd. Neem de onderstaande code over en geef in commentaarregels aan of het gaat om een double, int, string of array. Commentaar kan één regel zijn of meerder regels bevatten.
   Één regelig begint met //
   Meer regelig is ingesloten als volgt: /* commentaar */

   <script type="text/javascript">
   	/*
   	  Je kunt hier lekker
   	  je commentaar weg babbelen voor
   	  dit voorbeeld
   	 */
   	var a = 9; // Dit is ook commentaar
   	var b = 35.20;
   	var c = 88.1;
   	var melding = "Dit heb jij goed gedaan!";
   	var uitkomst = a+b+c;
   	alert(uitkomst);
   	alert(melding);
   </script>
   

var a = 9;

var uitkomst = a+b+c;

Je kunt ook een variabele hergebruiken. Bijvoorbeeld:

a = a + b;
var uitkomst = a+c;

Variabelen zijn 'dingen' die je heel vaak gebruikt in programmeertalen. Omdat je ze steeds moet hergebruiken is het heel handig om de variabele een logische naam te geven. Met logische naamgeving wordt bedoelt dat je de variabele een naam geeft die duidelijk maakt wat erin staat. De voorbeelden hierboven zijn namen die niet logisch zijn. Waar staat variabele 'a' voor? Aan de naam 'a' kan je niet zien waarvoor de waarde gebruikt wordt/gaat worden. Stel je voor dat je de variabele nodig hebt om het aantal behaalde punten in een spel bij te houden is het niet logisch om 'var a = 0' te gebruiken maar is het duidelijker en logischer om 'var score = 0' te gebruiken. Heb je maar 1 variabele in je code kan het nog duidelijk zijn dat je 'a' voor de score gebruikt, maar in de meeste code gebruik je heel veel variabele en zou je dus elke keer moeten kijken waar 'a' precies ook alweer voor staat. Gebruik je de variabele later in de code als je de score dan gaat aanpassen dan weet je dat je de variabele 'score' hiervoor moet gebruiken.

De naam van een variabele mag geen spaties,punten,komma,uitroepteken en min of plus teken bevatten en niet met een cijfer beginnen. Er zijn nog een paar uitzonderingen. Beperk je dus zoveel mogelijk tot woorden. Als je een naam wilt weergeven dat uit meerdere woorden bestaat, doe dit dan zo: bedrag_per_uur of bedragPerUur.

Je hebt nu gezien hoe je een gegeven moet declareren. Stel je de volgende situatie eens voor: je wilt al je cijfers voor het vak informatica opslaan. Je weet al dat dit type een double is. Laten we uitgaan dat dit zeven cijfers zijn. Dan moet je wel heel veel declareren. Dit kan handiger. Door gebruik te maken van een array. Een voorbeeld is hieronder weergegeven.

var cfr_inf = new Array(9.8, 6.4, 7.7, 8.7, 5.3, 7.5, 6.9);

<script type="text/javascript">
	var cfr_inf = new Array(9.8, 6.4, 7.7, 8.7, 5.3, 7.5, 6.9);
	console.log("Het vierde getal in cfr_inf {" + cfr_inf + "} is " + cfr_inf[3] );
</script>

6. Neem de onderstaande opdracht over. Je ziet dat er iets niet helemaal goed gaat in deze code. Je krijgt een foutmelding. Herstel dit! Zet achter een fout in commentaar wat er fout was en waarom. Zet er ook bij wat voor soort variabele het is.

   <!DOCTYPE html>
   <html>
     <head>
     	<title>Opdracht met variabelen</title>
       <script type="text/javascript">
       // PTA cijfers informatica
       var ed01= 5;
       var ed02= "Dit heb jij goed gedaan!"; 
       var ed melding= 8.1;
       var gemiddelde= (ed01+ed02)/2 ;
       alert(gemiddelde);
       alert(edmelding);
       </script>
     <head>
     <body">
     </body>
   </html>
   

7. In de volgende opdracht ga je ontdekken wat er gebeurt als je getallen optelt. Bekijk de volgende code en zie hoe ze aan de uitkomsten komen.
   1. Neem de onderstaande code over.
   2. Geef aan wat de code bij elke stap doet (in commentaarregels!)
   3. In de melding 'dit heb jijgoed tegen gedaan' zitten twee woorden tegen elkaar geplakt. Bekijk eens hoe je dit kunt oplossen.
   4. In de onderstaande code zie je de volgende bewerkingen op de variabelen: ++, *=, /= en +. Dit soort bewerkingen noemt men operatoren.
      Ga naar W3schools operatoren en probeer al die operatoren eens uit.

   <script type="text/javascript">
   // PTA cijfers informatica
   var ed01 = 9;
   ed01++;
   ed01 *= 3;
   var ed02 = ed01 += 3;
   var ed03 = ed02 + ed01;
   ed03/=6.6;
   var ed04 = 6.6 + 3.4; 
   var m1 ="dit heb jij";
   var m2 ="goed gedaan";
   var m3 = m1 + m2;
   alert(ed04);
   alert(m3);
   </script>
   

8. Inleveropdracht
   In de volgende code ga je zelfstandig een opdracht uitvoeren met behulp wat je hebt geleerd in de voorgaande opdrachten. Schrijf een opdracht waarin je twee getallen met elkaar vermenigvuldigt en er een melding verschijnt met tekst erin. Dus het antwoord moet in een alertvenster zichtbaar zijn. Geef duidelijke en logische namen aan variabelen en geef commentaar.
9. Uitdaging: Jij bent die snelle leerling. Je hebt nauwelijks problemen met de stof tot nu toe, dan is Pong ofwel het grafische deel van deze cursus voor jouw een welkome extra.. Om daar een begin aan te geven ga je nu naar dit document.

Om iets met de inhoud van variabelen te doen zijn er in alle programmertalen operatoren beschikbaar. Een andere mogelijkheid, die we later zullen behandelen, is het gebruik van functies. Het grootste verschil tussen operatoren en functies is dat een functie een verzameling van deze operatoren is. De operatoren zijn dus de basis bwerekingen op gegevens.

De andere al veel gebruikte operator '=' zorgt ervoor dat je een waarde aan een variabele toekent. De variabele die links voor het 'is-teken' staat krijgt de waarde toegekend die links van het 'is-teken' staat (en niet andersom!!). Dus zoals in het voorbeeld van hierboven betekent var a = 9;: ken de waarde 9 toe aan de variabele a. Het betekent dus niet, zoals in de wiskunde,: a is gelijk aan 9!. Want in de wiskunde geldt ook dat '9 = a'. De computer '=' zou dan de waarde a aan 9 willen toekennen en dat kan niet. Een tweede voorbeeld is var q = 3 + 4;. Dit betekent: 3+4 (oftewel 7) wordt toegekend aan de variabele q.

In de vorige paragraaf hebben we een tweede operator gezien: de '+'. Hiermee tel je getallen bij elkaar op (net zoals in de wiskunde). Dus var q = 3+4 betekent 3+4 wordt uitgevoerd waar het getal 7 uit komt en dat getal wordt toegekend aan de variabele q. De '=' operator heeft dus een lagere prioriteit dan optellen.

Een andere wiskundige operator die vaak gebruikt wordt is de modulo-operator '%'. Voor we uitleggen wat dat betekent eerst een paar voorbeelden.

• 12%5 heeft als resultaat 2
• 13%4 heeft als resultaat 1
• 38%13 heeft als resultaat 12

10. Oefenen met modulo-rekenen:

Er zijn nog twee operatoren die vaak gebruikt worden. Dat zijn de '++' en '--' operatoren. Deze staan voor het respectievelijk ophogen en verlagen van de variabele met 1. Het is dus als het ware een afkorting. Voorbeeld: i++ betekend i = i + 1 en i-- betekent i = i - 1.

Naast de '=' operator, die waardes aan variabele toekent, zijn er meer toekennende operatoren. Deze operatoren combineren eigenlijk twee operatoren in een. De operatoren zijn '+=', '-=', '*=', '/=' en '%='. Net als de '++' en '--' zijn het afkortingen. De += operator is een afkorting voor 'nieuwe waarde van variabele is oude variabele plus getal'. Voorbeeld: a += 2 betekent a = a + 2. Op die manier werken de andere operatoren ook. Voorbeeld: a -= 2 betekent a = a - 2 en a *= 2 betekent a = a * 2 etc.

11. Oefenen met toekennen: