You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
137 lines
6.9 KiB
137 lines
6.9 KiB
<!--
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
{
|
|
"original_hash": "947ca5ce7c94aee9c7de7034e762bc17",
|
|
"translation_date": "2025-10-23T00:57:26+00:00",
|
|
"source_file": "3-terrarium/3-intro-to-DOM-and-closures/assignment.md",
|
|
"language_code": "nl"
|
|
}
|
|
-->
|
|
# Onderzoek naar DOM-elementen opdracht
|
|
|
|
## Overzicht
|
|
|
|
Nu je de kracht van DOM-manipulatie zelf hebt ervaren, is het tijd om de bredere wereld van DOM-interfaces te verkennen. Deze opdracht zal je begrip verdiepen van hoe verschillende webtechnologieën met de DOM samenwerken, verder dan alleen het slepen van elementen.
|
|
|
|
## Leerdoelen
|
|
|
|
Door deze opdracht te voltooien, zul je:
|
|
- **Onderzoeken** en een specifieke DOM-interface grondig begrijpen
|
|
- **Analyseren** hoe DOM-manipulatie in de praktijk wordt toegepast
|
|
- **Verbanden leggen** tussen theoretische concepten en praktische toepassingen
|
|
- **Vaardigheden ontwikkelen** in technische documentatie en analyse
|
|
|
|
## Instructies
|
|
|
|
### Stap 1: Kies je DOM-interface
|
|
|
|
Bezoek de uitgebreide [lijst van DOM-interfaces](https://developer.mozilla.org/docs/Web/API/Document_Object_Model) op MDN en kies een interface die je interesseert. Overweeg om uit de volgende categorieën te kiezen voor variatie:
|
|
|
|
**Opties voor beginners:**
|
|
- `Element.classList` - Dynamisch beheren van CSS-klassen
|
|
- `Document.querySelector()` - Geavanceerde elementselectie
|
|
- `Element.addEventListener()` - Event handling buiten pointer events
|
|
- `Window.localStorage` - Opslag van gegevens aan de clientzijde
|
|
|
|
**Uitdagingen voor gevorderden:**
|
|
- `Intersection Observer API` - Detecteren van zichtbaarheid van elementen
|
|
- `MutationObserver` - Observeren van wijzigingen in de DOM
|
|
- `Drag and Drop API` - Alternatief voor onze pointer-gebaseerde aanpak
|
|
- `Geolocation API` - Toegang tot de locatie van de gebruiker
|
|
|
|
**Geavanceerde verkenning:**
|
|
- `Web Components` - Aangepaste elementen en shadow DOM
|
|
- `Canvas API` - Programmeerbare grafische elementen
|
|
- `Web Workers` - Achtergrondverwerking
|
|
- `Service Workers` - Offline functionaliteit
|
|
|
|
### Stap 2: Onderzoek en documenteer
|
|
|
|
Maak een uitgebreide analyse (300-500 woorden) die het volgende omvat:
|
|
|
|
#### Technisch overzicht
|
|
- **Definieer** wat jouw gekozen interface doet in duidelijke, begrijpelijke taal
|
|
- **Leg uit** welke belangrijke methoden, eigenschappen of events het biedt
|
|
- **Beschrijf** de soorten problemen die het is ontworpen om op te lossen
|
|
|
|
#### Implementatie in de praktijk
|
|
- **Vind** een website die jouw gekozen interface gebruikt (inspecteer de code of zoek voorbeelden)
|
|
- **Documenteer** de specifieke implementatie met codefragmenten indien mogelijk
|
|
- **Analyseer** waarom de ontwikkelaars voor deze aanpak hebben gekozen
|
|
- **Leg uit** hoe het de gebruikerservaring verbetert
|
|
|
|
#### Praktische toepassing
|
|
- **Vergelijk** jouw interface met de technieken die we in het terrariumproject hebben gebruikt
|
|
- **Stel voor** hoe jouw interface de functionaliteit van het terrarium kan verbeteren of uitbreiden
|
|
- **Identificeer** andere projecten waar deze interface waardevol zou zijn
|
|
|
|
### Stap 3: Codevoorbeeld
|
|
|
|
Voeg een eenvoudig, werkend codevoorbeeld toe dat jouw interface in actie laat zien. Dit moet:
|
|
- **Functioneel** zijn - De code moet daadwerkelijk werken wanneer getest
|
|
- **Van commentaar voorzien** zijn - Leg uit wat elk onderdeel doet
|
|
- **Relevant** zijn - Verbonden met een realistisch gebruiksscenario
|
|
- **Toegankelijk voor beginners** zijn - Begrijpelijk voor iemand die webontwikkeling leert
|
|
|
|
## Indelingsformat voor inzending
|
|
|
|
Structuur je inzending met duidelijke koppen:
|
|
|
|
```markdown
|
|
# [Interface Name] DOM Investigation
|
|
|
|
## What It Does
|
|
[Technical overview]
|
|
|
|
## Real-World Example
|
|
[Website analysis and implementation details]
|
|
|
|
## Code Demonstration
|
|
[Your working example with comments]
|
|
|
|
## Reflection
|
|
[How this connects to our terrarium project and future applications]
|
|
```
|
|
|
|
## Beoordelingsrubriek
|
|
|
|
| Criteria | Uitmuntend (A) | Voldoende (B) | Ontwikkelend (C) | Verbetering nodig (D) |
|
|
|----------|----------------|---------------|------------------|-----------------------|
|
|
| **Technisch begrip** | Toont diepgaand begrip met nauwkeurige uitleg en correcte terminologie | Toont solide begrip met grotendeels nauwkeurige uitleg | Basisbegrip met enkele misvattingen | Beperkt begrip met aanzienlijke fouten |
|
|
| **Analyse in de praktijk** | Identificeert en analyseert grondig een daadwerkelijke implementatie met specifieke voorbeelden | Vindt een echt voorbeeld met voldoende analyse | Vindt een voorbeeld, maar de analyse mist diepgang | Vage of onnauwkeurige verbinding met de praktijk |
|
|
| **Codevoorbeeld** | Werkende, goed becommentarieerde code die de interface duidelijk demonstreert | Functionele code met voldoende commentaar | Code werkt, maar heeft betere documentatie nodig | Code bevat fouten of slechte uitleg |
|
|
| **Schrijfkwaliteit** | Duidelijk, boeiend geschreven met goede structuur en technische communicatie | Goed georganiseerd met degelijke technische schrijfstijl | Voldoende organisatie en duidelijkheid | Slechte organisatie of onduidelijke communicatie |
|
|
| **Kritisch denken** | Maakt inzichtelijke verbanden tussen concepten en stelt innovatieve toepassingen voor | Toont goed analytisch denken en relevante verbanden | Enige analyse aanwezig, maar kan dieper | Beperkt bewijs van kritisch denken |
|
|
|
|
## Tips voor succes
|
|
|
|
**Onderzoekstrategieën:**
|
|
- **Begin** met MDN-documentatie voor betrouwbare informatie
|
|
- **Zoek** naar codevoorbeelden op GitHub of CodePen
|
|
- **Controleer** populaire websites met browserontwikkeltools
|
|
- **Bekijk** tutorialvideo's voor visuele uitleg
|
|
|
|
**Schrijfrichtlijnen:**
|
|
- **Gebruik** je eigen woorden in plaats van documentatie te kopiëren
|
|
- **Voeg** specifieke voorbeelden en codefragmenten toe
|
|
- **Leg uit** technische concepten alsof je een vriend lesgeeft
|
|
- **Verbind** jouw interface met bredere webontwikkelingsconcepten
|
|
|
|
**Ideeën voor codevoorbeelden:**
|
|
- **Maak** een eenvoudige demo die de belangrijkste functies van de interface laat zien
|
|
- **Bouw** voort op concepten uit ons terrariumproject waar relevant
|
|
- **Focus** op functionaliteit boven visueel ontwerp
|
|
- **Test** je code om ervoor te zorgen dat het correct werkt
|
|
|
|
## Deadline voor inzending
|
|
|
|
[Voeg deadline hier in]
|
|
|
|
## Vragen?
|
|
|
|
Als je verduidelijking nodig hebt over een aspect van deze opdracht, aarzel dan niet om te vragen! Dit onderzoek zal je begrip verdiepen van hoe de DOM interactieve webervaringen mogelijk maakt die we dagelijks gebruiken.
|
|
|
|
---
|
|
|
|
**Disclaimer**:
|
|
Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in de oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor kritieke informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor eventuele misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling. |