cmda-bt / cmda-bt/fe-course-20-21
Summery chapter 15 and 18 | Djescho
Nobody has claimed this yet.
- Dominant language
- No language data
- Stars
- 30
- Forks
- 2
- PR merge metrics
- No merged PRs in 30d
Description
- Chapter 15: Handling events
Een website verwacht meestal input van zijn gebruiker. In Javascript doen we dit met een eventhandler. Dit zorgt er voor dat er een signaal verstuurd wordt zodra er op een object geklikt wordt. Met event objects kan je uitlezen welke toetsen de gebruiker indrukt bij het versturen van zo'n signaal . Bij het uitvoeren van een eventhandler worden de kinderen van het element meestal ook meegnomen in de actie.
Niet alleen het gedrag van elementen is aan te passen, ook de werking. Zo kan je middels preventDefault() elementen hun functie uitschakelen. Denk hierbij aan een tag die je uitschakelt om te voorkomen dat die de gebruiker naar een andere pagina stuurt.
Om nog even terug te komen op het registreren van toets aanslagen, met het keyup en keydown event kunnen we acties instellen als de toets wordt ingedrukt, en wordt losgelaten. Je kan ook functie toetsen zoals enter en shift uitlezen, maar dit ziet er net even iets anders uit.
Ook de muis heeft een zelfde soort functionaliteit. Met mouseover wordt er iets getriggert als de muis over een object gaat. Wat belangrijk hierbij is is dat touch events ook als muis events getriggert worden. Dus je vinger heeft dezelfde soort events als je muis. Hierbij moet je wel opletten dat een vinger anders reageert op een scherm dan een muis, dus zul je soms events moeten wisselen tegenover het werken met een muis.
nog een belangrijk ding is debouncing. Als je een event op bijvoorbeeld de scrollbalk zet wordt dit event vele malen achter elkaar uitgevoerd. Dit is debouncing. Hierbij moet je dus opletten dat de actie die je bij het event wilt voegen niet te lang duurt. Hiermee voorkom je haperingen en andere problemen op je website.
- Chapter 18: HTTP and Forms
HTTP is een protocool. Als er data uit een formulier wordt verstuurd naar de server heet dit een request. In een request zit alle data die gepost is op het formulier en wordt middels een url naar de server gestuurd. Bij browser-side Javascript gebruiken we alleen POST en GIT omdat je geen verbinding hebt met een database. Als de client iets verstuurt hoort hier ook een respons bij vanuit de server. Deze respons geeft een statuscode mee die aan geeft of de actie is gelukt. Deze statuscodes beginnen met één van de volgende getallen:
2 . . : succes! De actie is gelukt.
4 . . : Er gaat iets niet goed met het gestuurde request (denk aan 404 page not found).
5 . . : Er gaat server-side ergens niet goed.
bij het versturen van data via een formulier in de browser wordt de fetch methode gebruikt. Hierbij gebruiken formulieren het HTTP protocool. Formulieren zijn invoervelden waarmee de gebruiker data/verzoeken kan sturen of opvragen. Een formulier bestaat uit invoervelden waar de gebruiker gegevens kan invullen of aanklikken. Deze invoer geven in HTML aan middels een input tag. Momenteel zijn er 22 verschillende invoer methodes die je kunt gebruiken, die ongeveer elk datatype dekken. formulieren zijn belangrijke onderdelen van websites, dus is het belangrijk dat iedereen begrijpt waar je in het formulier zit. Dit kan middels css properties en element eigenschappen.
Net als met de meeste elementen kan je met Javascript allemaal verschillende soorten data opvragen uit het formulier (ook als het niet verstuurd is). Zo kan je zien welk element er geselecteerd wordt, of de ingevulde data wel klopt, en kun je zelfs onderdelen uitschakelen.
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
No file or test is named. Start by locating the repository material for chapters 15 and 18, then compare it with the supplied Dutch summary. Done means the relevant course content has an accurate, reviewed summary covering events, HTTP, and forms.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, html, javascript
- Domain
- documentation, frontend, web-dev
- Issue type
- Documentation
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100