Cette leçon contient 42 diapositives, avec diapositives de texte.
La durée de la leçon est: 120 min
Éléments de cette leçon
Python intro
Programming basics-II
Les 3 / Week 7a
Algoritmiek
ALGO
Lesweek 5
Slide 1 - Diapositive
Les 5: Hexadecimaal en kleurcodes
Aan het einde van deze les kun je:
herkennen wat het hexadecimaal tal-stelsel is
uitleggen hoe kleurcodes in html/css werken
de functies MOD en DIV toepassen
Slide 2 - Diapositive
DIV en MOD
Bij binaire getallen berekenen, kijken we hoe vaak een bepaalde macht van 2 in ons decimale getal past. Met datgene wat er overblijft reken je dan verder.
Om dat te berekenen gebruikt een computer 2 functies.
Slide 3 - Diapositive
DIV
DIV staat voor integer division. In plaats van de exacte uitkomst van een deling te geven, rondt het de uitkomst af naar het dichtstbijzijnde gehele getal dat kleiner is dan of gelijk aan het werkelijke resultaat.
Bij 10 DIV 3 is het resultaat 3, omdat 10 gedeeld door 3 gelijk is aan 3.33333333333333333333333333333333333 etc.
Maar dit wordt afgerond naar beneden naar het gehele getal 3
Niet te verwarren met DIV in HTML!
Slide 4 - Diapositive
MOD
MOD staat voor de modulo-operator. Het resultaat van een MOD-operatie is het overschot van de deling. Bij een integer wil je een geheel getal.
Alles wat niet meer past, wordt 'rest' genoemd.
Bij 10 MOD 3 is het resultaat 1, omdat 10 gedeeld door 3 gelijk is aan 3 met een rest van 1. 3 past 3x in het getal 10. De rest, in dit geval 1, houd je over. Zo blijf je dus werken met gehele getallen.
Slide 5 - Diapositive
Al die getallen
Afgelopen weken zijn we bezig geweest
met verschillende tal-stelsels
Uiteraard kennen we ons eigen decimale stelsel:
0 1 2 3 4 5 6 7 8 9
Slide 6 - Diapositive
Al die getallen
En we kunnen ondertussen werken
met binaire getallen
00100111
Welk getal is dit decimaal?
Slide 7 - Diapositive
Nog een talstelsel
Naast ons eigen decimale stelsel en het binaire stelsel werken computers met nóg een ander soort tal-stelsel:
Hexadecimaal
Slide 8 - Diapositive
Nog een talstelsel
Bij hexadecimaal is de basis 16. Iedere positie in een hexadecimaal getal kan dus 16 verschillende waardes hebben.
Slide 9 - Diapositive
Getalstelsels
Een decimaal getal van 2 posities kan maximaal
100 verschillende waardes hebben:
Het kleinste getal is: 00
Het grootste getal is: 99
Slide 10 - Diapositive
Getalstelsels
Een binair getal van 2 posities kan maximaal
4 verschillende waardes hebben:
00
01
10
11
Slide 11 - Diapositive
Getalstelsels
Een hexadecimaal getal van 2 posities kan maximaal
256 verschillende waardes hebben.
Iedere positie kan immers
16 verschillende "cijfers" zijn
Voor 2 posities geldt dus:
16 x 16 = 256 mogelijkheden
Slide 12 - Diapositive
16 verschillende "cijfers".
Waarom staat cijfers tussen aanhalingstekens?
Wij kennen maar 10 verschillende cijfers (0 t/m 9) Om de 16 posities te kunnen vullen van een hexadecimaal getal, gebruiken we als notatie:
0 1 2 3 4 5 6 7 8 9 A B C D E F
Slide 13 - Diapositive
Slide 14 - Diapositive
codepen.io
Slide 15 - Lien
Getalstelsels
Getalstelsel
Basis
Symbolen
Aantal symbolen
Maximale waarde 1 symbool
Decimaal
10
0 - 9
10
9
Binair
2
0 - 1
2
1
Hexadecimaal
16
0 - 9 A - F
16
15
Slide 16 - Diapositive
Slide 17 - Diapositive
Getalstelsels
10dec = 10
10bin = 2
10hex = 16
Slide 18 - Diapositive
Hexadecimaal bij WEB
Zonder het misschien te weten ben je hexadecimale getallen wel eens tegengekomen. We gebruiken deze notatie namelijk voor de kleurcodes in HTML en CSS.
Slide 19 - Diapositive
RGB - Red Green Blue
De kleuren op een beeldscherm worden
opgebouwd uit 3 kleuren
Rood
Groen
Blauw
Slide 20 - Diapositive
RGB
#FF0000
#00FF00
#0000FF
Iedere positie kan 16 waardes hebben. Een HEX-getal van 6 posities kan dus
16 x 16 x 16 x 16 x 16 x 16 verschillende kleuren maken.
Slide 21 - Diapositive
RGB
#FF0000
#00FF00
#0000FF
Dat zijn 16.777.216 mogelijkheden! Meer dan 16,5 miljoen kleuren!
Slide 22 - Diapositive
RGB waardes worden in
het decimale getalstelsel weergegeven
als getallen tussen 0 en 255.
De hoeveelheid rood (R): 0 - 255
De hoeveelheid groen(G): 0 - 255
De hoeveelheid blauw(B): 0 - 255
Slide 23 - Diapositive
www.w3schools.com
Slide 24 - Lien
De RGB waarde van een kleur wordt opgeslagen in 3 bytes.
In 1 byte gaan 8 bits. We weten dat een binair getal van 8 posities,
maximaal 256 waardes kan hebben.
Slide 25 - Diapositive
Kleurmodellen
RGB: Rood, Groen, Blauw. Wordt gebruikt voor beeldschermen
Bij het "mengen" van alle volledige kleuren krijg je wit
Staan alle bits op 0, krijg je dus zwart
Slide 26 - Diapositive
De kleur wit in hexa & RGB
The hexadecimal color #ffffff
RGB values of 255, 255, 255
Slide 27 - Diapositive
Decimaal naar hexadecimaal
Om de HEX waarde van een RGB waarde te bepalen
Zet de decimale RGB waarde eerst om naar binair. Daar hebben we inmiddels zelf een applicatie voor gemaakt!
Zet de binaire waarde om naar hex Dit kun je doen met de4-bits groepjes methode
Slide 28 - Diapositive
Decimaal naar hexadecimaal
We hebben deze kleur:
rgb(42, 130, 90)
42 is binair: 00101010 130 is binair: 10000010
90 is binair: 01011010
Slide 29 - Diapositive
Decimaal naar hexadecimaal
42 is binair: 00101010
Met 4 bits groepjes methode wordt dit:
Mijn CSS-kleurcode begint dus met: #2A
bin
0010
1010
dec
2
10
hex
2
A
Slide 30 - Diapositive
Decimaal naar hexadecimaal
130 is binair: 10000010
Met 4 bits groepjes methode wordt dit:
Mijn CSS-kleurcode is nu: #2A82
bin
1000
0010
dec
8
2
hex
8
2
Slide 31 - Diapositive
Decimaal naar hexadecimaal
90 is binair: 01011010
Met 4 bits groepjes methode wordt dit:
De totale CSS-kleurcode is: #2A825A
bin
0101
1010
dec
5
10
hex
5
A
Slide 32 - Diapositive
Hexadecimaal naar decimaal
Omgekeerd werkt dat ook:
#FF9A0B
11111111bin = 255dec. R is dus 255
hex
F
F
dec
15
15
bin
1111
1111
Slide 33 - Diapositive
Hexadecimaal naar decimaal
Omgekeerd werkt dat ook:
#FF9A0B
10011010bin = 154dec. G is dus 154
hex
9
A
dec
9
10
bin
1001
1010
Slide 34 - Diapositive
Hexadecimaal naar decimaal
Omgekeerd werkt dat ook:
#FF9A0B
00001011bin = 11dec. B is dus 11
hex
0
B
dec
0
11
bin
0000
1011
Slide 35 - Diapositive
Hexadecimaal naar decimaal
#FF9A0B
=
RGB (255, 154, 11)
Slide 36 - Diapositive
Decimaal naar hexadecimaal
De4-bits groepjes methode werkt ook voor grotere getallen.
La durée de la leçon est: 120 min
