Week 14: DOM manipulation, manipulating elements & click events

• JavaScript
• MBO
• Studiejaar 2

Doel van deze les

• Aan het einde van de les heb jij jouw JS-code gekoppeld aan webpagina in HTML en CSS.
• Aan het einde van de les laat jij jouw pagina reageren op clicks door click events af te handelen.

Feedback lesdoel: Maartje: De student kan aan het einde van de les een web pagina maken met een titel, plaatje en formulier middels het koppelen html en css. Het knopje maken wij bruin.

Ainhoa: De lesdoel is te lang.

Wat heb je nodig?

Voor deze periode heb je de kennis nodig van JS Basics en Essentials.

Meer hierover in de studentenhandleiding.

github.com

Voorbereiding

Sla je mapje op in OneDrive.

Open in je IDE de folder.

Bekijk de verschillende bestanden.

Voorbereiding

Allereerst hebben wij de prettier bestand. Hierin beschrijf je de regels voor jouw prettier plugin.

De plugin kan je in de volgende dia krijgen.

marketplace.visualstudio.com

Voorbereiding

Neem ook even de tijd om te kijken naar de html en css files en kijk of je begrijpt wat daar in staat.

Voorbereiding nodeJS

Geen enkele professionele developer herlaad zijn website zo vaak zoals wij dat hebben gedaan.

Gelukkig is daar een oplossing voor.

Voorbereiding nodeJS

Wij moeten node.js installeren. Ga naar de volgende dia om live server te installeren.

nodejs.org

Voorbereiding nodeJS

node.js is nu een programma in de terminal. Je kan deze commando's geven.

Schrijf nu het volgende in de terminal van vs-code:

node -v

Nu krijg je de nodejs versienummer te zien.

Voorbereiding nodeJS

Schrijf nu in de terminal:

Windows:

 npm install live-server -g

Mac/Linux (wachtwoord vereist):

sudo npm install live-server -g

npm staat voor node package manager. De -g staat voor global en maakt live server toegankelijk voor je hele computer.

Voorbereiding nodeJS

Schrijf nu in de terminal:

live-server

Live server opent automatisch de folder waaruit jij de live-server commando hebt gegeven. Er wordt dan gezocht naar de index.html en deze voert hij uit. Het betekent dus dat je naar de juiste folder moet navigeren in de terminal zodat de juiste index geopend wordt.

Wat valt je nu op aan de HTML code? 🤔

1. Dat alles in simpele HTML staat
2. Dat de tekst in de HTML pagina selecteerbaar is
3. Dat ieder html element netjes een class name heeft
4. Dat na zo'n jaar Taif nog steeds beter les geeft dan Jesse

Wat is het voordeel dat alle html elementen een class hebben? 😏

1. Maak de code makkelijk te lezen
2. Jesse en Taif hebben het verteld maar ik ben het vergeten
3. Is kleurrijker in de code.
4. Het maakt het selecteren van de HTML elementen makkelijker.

HTML

Komt HTML en CSS jou nog steeds niet bekend voor, bekijk dan de lessen van Jesse of the HTML crash course van de vorige periode nogmaals voor een refresh course.

Selecteren van elementen in JS

Laten wij gezamenlijk kijken naar hoe je elementen in de HTML pagina kan selecteren in JS. Dit moet je doen om de elementen (zoals een stuk tekst) te veranderen. In web development noemen wij dit DOM manipulatie.

DOM (Document Object Model)

Selecteren van elementen in JS

Selecteren van elementen in JS

Bekijk de console van je browser. Wanneer je dit test, bekijk eens wat de 'textContent' method doet.

Wat doet de textContent method?

Manipuleren van elementen in JS

Verander het message element value naar '🎉 Correct Number!'.

Als je het nu veranderd dan zie je meteen het verschil op jouw website vanwege de live-server van node.js.

Manipuleren van elementen in JS

Verander number naar '13'.

Verander score naar '10'.

Schrijf in het invoerveld '23' via JS met de value method van de querySelector.

Manipuleren van elementen in JS

Wordt het systeem nu getriggerd om het getal na te kijken?

Click events in JS

Om te simuleren dat er op een knop wordt geklikt, moet je een click event afhandelen. Laten wij daarnaar kijken.

Events in JS

Op een toetsenbord drukken, muis klikken etc. noemen wij events. Om naar deze events te luisteren heb je wat programmeurs een event listener nodig.

Laten wij eerst beginnen met de huidige code die je hebt geschreven eerst te commentariseren.

Events in JS

Als je goed zoekt naar de knop gelabeld 'Check!', dan zie je dat de class bestaat uit twee namen. 'btn' en 'check'.

Welke van de twee woorden ('bnt' of 'check'), is verstandig om te selecteren?

btn

check

bnt is algemeen want het wordt ook voor de knop bovenin gebruikt. check is daarom verstandiger.

Events in JS

Bekijk het volgende hoe een event listener toegevoegd moet worden -->

Events in JS

1 --> Dit is de method die aangeroepen moet worden om een event listener aan de knop toe te voegen. Er zijn meer soorten maar dit is een van de beste in JS. Deze method neemt een aantal arguments. Laten we dat in de volgende dia bekijken.

Events in JS

2 --> De eerste argument van deze event listener is om wat voor event gaat het? In dit geval willen wij een klik registreren dus schrijven wij 'click'.

Een complete lijst met wat voor events er zijn vind je in de volgende dia.

developer.mozilla.org

Events in JS

3 --> De tweede argument van deze event listener wil weten wat er dan moet gebeuren. Om dat te beschrijven maken wij een anonieme functie aan en willen wij dat het nummer wat in het invoerveld staat in de console wordt gelogd.

Events in JS

De functie is hetzelfde als wat wij in de vorige periode hebben behandeld.

Bekijk het plaatje hiernaast.

Events in JS

Je kan ook wat DOM manipulation doen door na een klik, ook de tekst van message te veranderen naar wat je eerder hebt geschreven.

Events in JS

Het is ook mogelijk om te printen wat je loggen wat je zojuist hebt geschreven.

Probeer eens de type van 'guess' te achterhalen.

Welk type heeft guess?

1. Boolean
2. String
3. Number
4. True

Dit is wel een probleem, hoe moet guess geconverteerd worden (type conversion) naar een Number?

Events in JS

Game logic

Laten wij een start maken met de game logic. Hoewel dit de volgende les pas wordt uitgelegd, gaan wij nu een begin maken.

Events in JS

er wordt gebruik gemaakt van een falsey value en die negate het om een true te krijgen. Daarna veranderen wij de message.

Deze functie wordt gebruikt om te checken of er iets is geschreven in het invoerveld.

Wat waren de doelen?

• Aan het einde van de les heb jij jouw JS-code gekoppeld aan webpagina in HTML en CSS.
• Aan het einde van de les laat jij jouw pagina reageren op clicks door click events af te handelen.

Denk je dat je de leerdoelen hebt behaald?

Ja

Nee

Wat gaan wij de volgende keer doen? Meerdere antwoorden mogelijk!

1. Game logic implementeren
2. Refactoring
3. DOM manipuleren
4. CSS stijlen manipuleren