Les 3 - Objecten, puntnotatie en style
Objecten en puntnotatie
In een DOM-tree is ieder element een object. Zo is <h1> een object, <p> een object, <body> een object enz. Maar wat is nou exact een object? Een object is vergelijkbaar met een datatype zoals int, float en boolean, maar een object is eigenlijk meer. Bij een object horen namelijk methods (functies die bij een object horen) en properties (eigenschappen).
Om het begrip object toe te lichten geven we een voorbeeld: Hiernaast zie je een object auto. Methoden zijn functies die bij een specifiek object horen. Zo kun je de auto vooruit laten gaan door: auto.gaVooruit() in te geven. Je gebruikt hiervoor de dot-notation, oftewel de punt-notatie.
En je kan met de punt-notatie ook de properties/eigenschappen instellen van je auto. Voorbeeld:
auto.kleur = "groen";
Eigenlijk ken je dit principe ook van onze goede oude vriend Turtle! Die kon je vooruit laten gaan met turtle.forward(100).
Style-attributen veranderen
Zoals je in de vorige les hebt gezien kun je een element met document.getElementById() in de DOM selecteren. Zie hieronder.
See the Pen PybVRe by Jurjenh (@jurjenh) on CodePen.
kop1 is nu het object met daarin alles wat hoort bij het element van je pagina met id "kopje".
Je hebt gezien hoe je de inhoud kunt opvragen met .innerHTML, de innerHTML is dus een eigenschap van het object kop1.
Je kunt ook de style opvragen (CSS!) van een object. Zo kun je dus bijvoorbeeld de kleur of het font veranderen met behulp van JavaScript zoals in het voorbeeld hierboven.
Note: Opdrachten
Maak nu in Repl:
- Inleveropdracht Les 3 - Vragen aan de gebruiker
- Oefenopdracht Les 3 - Plaats het plaatje
- Oefenopdracht Les 3 - Maak een paragraaf op