Talstelsels

In dit labo leer je rekenen zoals een computer dat doet: met binaire en hexadecimale getallen, met bits, en met de codes achter tekst. Je rekent elke opgave eerst zelf uit en controleert je antwoord daarna meteen op deze pagina.

Leerstof

• Binair stelsel
• Hexadecimaal stelsel
• Conversie tussen stelsels
• Bitwise operaties
• Tekstcodering

Hoe werk je dit labo door?

1. Reken eerst zelf. Maak elke berekening op papier of in je schrift en schrijf je werkwijze volledig uit. Zonder tussenstappen leer je de methode niet.
2. Vul daarna je antwoord in. Elk invulveld zegt meteen of het klopt. Je mag zo vaak proberen als je wil.
3. Loop je vast? Vraag een Hint. Na twee foute pogingen verschijnt ook de knop Toon antwoord met de volledige uitwerking. Bekijk die pas nadat je het echt zelf geprobeerd hebt.
4. De hulp neemt af. De eerste oefeningen tonen de werkwijze stap voor stap. Daarna krijg je alleen nog een stappenplan, dan een korte tip, en op het einde niets meer. Dat is de bedoeling: tegen dan ken je de methode.

---

Oefening 1 – Decimaal naar binair

Een computer slaat elk getal op als een rij bits. Om te begrijpen wat daar staat, moet je een gewoon decimaal getal kunnen omzetten naar binair. Dat doe je met herhaalde deling door 2.

Zo pak je het aan

Deel het getal steeds opnieuw door 2 en noteer bij elke stap de rest. Die rest is altijd 0 of 1: dat zijn je bits. Je stopt zodra het quotiënt 0 is. Lees de resten daarna van onder naar boven.

Voorbeeld: zet $22_{10}$ om naar binair.

Stap	Deling	Quotiënt	Rest
1	22 ÷ 2	11	0
2	11 ÷ 2	5	1
3	5 ÷ 2	2	1
4	2 ÷ 2	1	0
5	1 ÷ 2	0	1

Van onder naar boven gelezen: $22_{10} = 10110_2$.

Doe altijd de omgekeerde controle: $16 + 4 + 2 = 22$. Het klopt.

Zet nu zelf de volgende getallen om. Noteer de volledige delingstabel in je schrift en vul daarna het resultaat in.

1.29₁₀

Antwoord (binair)

2.45₁₀

Antwoord (binair)

3.156₁₀

Antwoord (binair)

---

Oefening 2 – Binair naar decimaal

Nu de omgekeerde weg. Elke positie in een binair getal heeft een vaste waarde: van rechts naar links 1, 2, 4, 8, 16, ... Je telt gewoon de waarden op van de posities waar een 1 staat.

Zo pak je het aan

Schrijf het getal uit en zet onder elke bit de waarde van die positie. Begin rechts bij $2^0 = 1$ en verdubbel telkens naar links.

Voorbeeld: zet $10110_2$ om naar decimaal.

Bit	1	0	1	1	0
Positie	$2^4$	$2^3$	$2^2$	$2^1$	$2^0$
Waarde	16	0	4	2	0

Tel de waarden op waar een 1 staat: $16 + 4 + 2 = 22$, dus $10110_2 = 22_{10}$.

1.1101₂

Antwoord (decimaal)

2.10110₂

Antwoord (decimaal)

3.10110100₂

Antwoord (decimaal)

---

Oefening 3 – Decimaal naar hexadecimaal

Hexadecimaal werkt met zestien cijfers: 0 tot 9 en daarna A tot F voor de waarden 10 tot 15. Programmeurs gebruiken het overal waar bytes in het spel zijn, zoals bij kleuren en geheugenadressen.

Zo pak je het aan

De methode is dezelfde als in oefening 1, maar je deelt door 16 in plaats van door 2. Een rest van 10 tot 15 schrijf je als een letter: 10 = A, 11 = B, 12 = C, 13 = D, 14 = E, 15 = F.

Voorbeeld: zet $755_{10}$ om naar hexadecimaal.

Stap	Deling	Quotiënt	Rest
1	755 ÷ 16	47	3
2	47 ÷ 16	2	F (= 15)
3	2 ÷ 16	0	2

Van onder naar boven: $755_{10} = \text{2F3}_{16}$.

1.255₁₀

Antwoord (hexadecimaal)

2.764₁₀

Antwoord (hexadecimaal)

3.3000₁₀

Antwoord (hexadecimaal)

---

Oefening 4 – Hexadecimaal naar decimaal

Ook hier is de aanpak dezelfde als bij binair, maar met machten van 16 in plaats van machten van 2.

Stappenplan

1. Vervang elke letter door zijn waarde: A = 10, B = 11, C = 12, D = 13, E = 14, F = 15.
2. Geef elke positie zijn macht van 16. Rechts begin je bij $16^0 = 1$, daarna $16^1 = 16$, dan $16^2 = 256$.
3. Vermenigvuldig elk cijfer met de waarde van zijn positie.
4. Tel alles op.

1.A4₁₆

Antwoord (decimaal)

2.1F3₁₆

Antwoord (decimaal)

3.FF₁₆

Antwoord (decimaal)

---

Oefening 5 – Binair naar hexadecimaal

Dit is de snelste omzetting van allemaal, want 1 hex-cijfer komt exact overeen met 4 bits. Je hoeft dus niet te delen of te vermenigvuldigen.

Tip

Groepeer de bits per 4, beginnend vanaf rechts. Vervang daarna elke groep van 4 bits door één hex-cijfer. Komt de laatste groep links niet vol? Vul dan aan met nullen.

1.11110101₂

Antwoord (hexadecimaal)

2.10010111₂

Antwoord (hexadecimaal)

3.10110011₂

Antwoord (hexadecimaal)

---

Oefening 6 – Hexadecimaal naar binair

De omgekeerde weg van oefening 5.

Tip

Elk hex-cijfer wordt precies 4 bits, ook als het een klein cijfer is. Zo wordt 3 dus 0011 en niet 11.

1.3F₁₆

Antwoord (binair)

2.C8₁₆

Antwoord (binair)

3.4B2₁₆

Antwoord (binair)

---

Oefening 7 – Bitwise operaties op papier

Bitwise operaties werken op elke bit apart. Schrijf de getallen netjes onder elkaar, precies zoals in de theorie, en werk kolom per kolom. Geef je antwoord in binair.

Zo pak je het aan

Er zijn drie soorten operaties, en elk heeft zijn eigen aanpak.

1. Twee getallen combineren met &, | of ^

Zet de twee getallen recht onder elkaar en werk kolom per kolom. Je kijkt telkens naar één bit van boven en één van onder, en schrijft het resultaat eronder. De rest van het getal doet er op dat moment niet toe.

  1011
& 0110
------
  0010

Per kolom: 1 en 0 geeft 0, 0 en 1 geeft 0, 1 en 1 geeft 1, 1 en 0 geeft 0.

Met | en ^ doe je precies hetzelfde, alleen kijk je naar een andere tabel: | geeft 1 zodra er minstens één 1 staat, ^ geeft 1 als de twee bits verschillen.

  1011        1011
| 0110      ^ 0110
------      ------
  1111        1101

2. Eén getal omkeren met ~

Hier is er geen tweede getal: je keert gewoon elke bit om. Belangrijk is dat je op voorhand vastlegt met hoeveel bits je werkt, want de nullen vooraan worden ook omgekeerd. Bij 8 bits:

  00000110
~
  11111001

3. Opschuiven met << of >>

Je verplaatst alle bits een aantal posities. Links opschuiven vult rechts aan met nullen, rechts opschuiven laat de bits die er rechts uitvallen verdwijnen.

  1011      << 1   ->   10110
  1011      >> 1   ->   101

Doe achteraf de controle in decimaal: 1011₂ = 11, en 11 × 2 = 22 = 10110₂. Dat klopt.

1.0b1100 & 0b1010

Antwoord (binair)

2.0b1100 | 0b0011

Antwoord (binair)

3.0b1111 ^ 0b1010

Antwoord (binair)

4.~0b00001010 (geef 8 bits)

Antwoord (binair)

5.0b0110 << 2

Antwoord (binair)

6.0b11000 >> 2

Antwoord (binair)

---

Oefening 8 – Dezelfde operaties in code

Voer nu dezelfde berekeningen uit in de browser console (F12 → Console) of in een C#-project. De operators zijn in beide talen hetzelfde.

0b1100 & 0b1010
0b1100 | 0b0011
0b1111 ^ 0b1010
~10
0b0110 << 2
0b11000 >> 2

De console toont het resultaat in decimaal. Zet je antwoorden van oefening 7 dus eerst om naar decimaal en vul die hier in. Wijkt er één af? Zoek uit waarom voordat je verder gaat.

1.0b1100 & 0b1010

Resultaat (decimaal)

2.0b1100 | 0b0011

Resultaat (decimaal)

3.0b1111 ^ 0b1010

Resultaat (decimaal)

4.~10

Resultaat (decimaal)

5.0b0110 << 2

Resultaat (decimaal)

6.0b11000 >> 2

Resultaat (decimaal)

---

Oefening 9 – Een CSS-kleur uit elkaar halen

Een CSS-kleur zoals #3A8FD2 is eigenlijk één groot getal van 24 bits: 8 bits rood, 8 bits groen en 8 bits blauw. Elk kanaal is dus één byte en loopt van 0 tot 255.

1. Splits de hex-kleur in drie koppels van twee cijfers: rood, groen en blauw.
2. Zet elk koppel apart om naar decimaal, zoals in oefening 4.
3. Vul de drie waarden hieronder in. De kleurstaal naast je invoer laat zien of je goed zit.

Doelkleur

#3A8FD2

Jouw invoer

Rood

Groen

Blauw

Klopt je antwoord? Controleer het dan nog eens in code. Hier haalt de computer de kanalen eruit met bit shifts en een masker, zonder ooit door 16 te delen.

// JavaScript
const kleur = 0x3A8FD2;
const rood  = (kleur >> 16) & 0xFF;
const groen = (kleur >> 8)  & 0xFF;
const blauw =  kleur        & 0xFF;
console.log(rood, groen, blauw);

// C#
int kleur = 0x3A8FD2;
int rood  = (kleur >> 16) & 0xFF;
int groen = (kleur >> 8)  & 0xFF;
int blauw =  kleur        & 0xFF;
Console.WriteLine($"{rood} {groen} {blauw}");

---

Oefening 10 – ASCII en karaktercodes

Deel A – op papier

Elke letter die je typt, bewaart de computer als een getal. ASCII legt vast welk getal bij welk teken hoort. Gebruik de ASCII-tabel uit de theorie (of zoek er zelf één op) om deze vragen te beantwoorden.

1. Wat is de ASCII-waarde van de letter M?

2. Wat is de ASCII-waarde van de kleine letter z?

3. Wat is de ASCII-waarde van het vraagteken (?)?

4. Welk karakter heeft ASCII-waarde 72?

5. Welk karakter heeft ASCII-waarde 101?

6. Welk karakter heeft ASCII-waarde 33?

7. Welke bitwise operatie wisselt een letter tussen hoofd- en kleine letter (A ↔ a)?

Deel B – in code

Voorspel eerst wat elke regel oplevert en vul je voorspelling in. Voer de code daarna uit om te zien of je gelijk had.

1."M".charCodeAt(0)

Resultaat

2.String.fromCharCode(72)

Resultaat

3."A".charCodeAt(0) ^ 32

Resultaat

// JavaScript
console.log("M".charCodeAt(0));
console.log(String.fromCharCode(72));
console.log("A".charCodeAt(0) ^ 32);

// C#
Console.WriteLine((int)'M');
Console.WriteLine((char)72);
Console.WriteLine((char)((int)'A' ^ 32));

---

Oefening 11 – UTF-8 en bytes

Deel A – theorie

ASCII kent maar 128 tekens. Voor alle andere talen en voor emoji is er Unicode, en UTF-8 bepaalt hoe die tekens als bytes worden opgeslagen. Beantwoord de vragen op basis van de theorie.

1. Hoeveel bytes gebruikt UTF-8 voor het teken A?

2. Hoeveel bytes gebruikt UTF-8 voor het teken é?

3. Hoeveel bytes gebruikt UTF-8 voor het euroteken €?

4. Hoeveel bytes gebruikt UTF-8 voor de emoji 😀?

5. Waarom is UTF-8 achterwaarts compatibel met ASCII?

6. Je opent een bestand en ziet "é" in plaats van "é". Wat is er fout gegaan?

Deel B – zelf onderzoeken

Open de Character Encoding Explorer en ga het volgende na:

1. Typ je eigen naam in en bekijk de bytes in ASCII, Unicode en UTF-8.
2. Typ daarna een woord met een accent, bijvoorbeeld café. Vergelijk het aantal bytes met dat van een woord zonder accent.
3. Zet tekst om naar UTF-8 en lees ze daarna als een andere codering. Zo maak je zelf Mojibake: de bytes blijven hetzelfde, maar op je scherm verschijnt onzin.

Beantwoord met wat je in de tool ziet:

1.Hoeveel bytes gebruikt het woord "café" in UTF-8?

Antwoord

2.Welke twee bytes vormen é in UTF-8? (hex, aan elkaar)

Antwoord

3.Je slaat "café" op als UTF-8 en leest het bestand als Latin-1. Hoeveel tekens zie je?

Antwoord

---

Uitdaging – Een kleur aanpassen met bitwise

Je krijgt de CSS-kleur #FF8C00, een oranje tint. Los deze opgaven op met alleen bitwise operaties: dus met >>, <<, & en |, en zonder om te rekenen via decimaal.

1. Wat is de waarde van het roodkanaal?
2. Maak een nieuwe kleur waarin het roodkanaal gehalveerd is. Groen en blauw blijven ongewijzigd.
3. Wissel het rood- en het blauwkanaal om: het originele blauw wordt het nieuwe rood, en het originele rood wordt het nieuwe blauw.

Schrijf je oplossing in JavaScript of C#, vul de resultaten hieronder in en bekijk de kleuren daarna in je browser.

1.Roodkanaal van #FF8C00 (decimaal)

Antwoord

2.Nieuwe kleur met gehalveerd rood (hex, 6 cijfers)

Antwoord

3.Rood en blauw omgewisseld (hex, 6 cijfers)

Antwoord