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.7 KiB
137 lines
6.7 KiB
<!--
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
{
|
|
"original_hash": "947ca5ce7c94aee9c7de7034e762bc17",
|
|
"translation_date": "2025-10-23T22:02:54+00:00",
|
|
"source_file": "3-terrarium/3-intro-to-DOM-and-closures/assignment.md",
|
|
"language_code": "da"
|
|
}
|
|
-->
|
|
# Opgave: Undersøgelse af DOM-elementer
|
|
|
|
## Oversigt
|
|
|
|
Nu hvor du har oplevet kraften i DOM-manipulation på egen hånd, er det tid til at udforske den bredere verden af DOM-grænseflader. Denne opgave vil uddybe din forståelse af, hvordan forskellige webteknologier interagerer med DOM ud over blot at trække elementer.
|
|
|
|
## Læringsmål
|
|
|
|
Ved at gennemføre denne opgave vil du:
|
|
- **Undersøge** og forstå en specifik DOM-grænseflade i dybden
|
|
- **Analysere** virkelige implementeringer af DOM-manipulation
|
|
- **Forbinde** teoretiske begreber med praktiske anvendelser
|
|
- **Udvikle** færdigheder inden for teknisk dokumentation og analyse
|
|
|
|
## Instruktioner
|
|
|
|
### Trin 1: Vælg din DOM-grænseflade
|
|
|
|
Besøg MDN's omfattende [liste over DOM-grænseflader](https://developer.mozilla.org/docs/Web/API/Document_Object_Model) og vælg en grænseflade, der interesserer dig. Overvej at vælge fra disse kategorier for variation:
|
|
|
|
**Begynder-venlige muligheder:**
|
|
- `Element.classList` - Dynamisk styring af CSS-klasser
|
|
- `Document.querySelector()` - Avanceret elementvalg
|
|
- `Element.addEventListener()` - Håndtering af begivenheder ud over pointer-events
|
|
- `Window.localStorage` - Klient-side datalagring
|
|
|
|
**Mellem-niveau udfordringer:**
|
|
- `Intersection Observer API` - Registrering af elementers synlighed
|
|
- `MutationObserver` - Overvågning af DOM-ændringer
|
|
- `Drag and Drop API` - Alternativ til vores pointer-baserede tilgang
|
|
- `Geolocation API` - Adgang til brugerens placering
|
|
|
|
**Avanceret udforskning:**
|
|
- `Web Components` - Brugerdefinerede elementer og shadow DOM
|
|
- `Canvas API` - Programmerbar grafik
|
|
- `Web Workers` - Baggrundsprocesser
|
|
- `Service Workers` - Offline funktionalitet
|
|
|
|
### Trin 2: Undersøg og dokumentér
|
|
|
|
Lav en omfattende analyse (300-500 ord), der inkluderer:
|
|
|
|
#### Teknisk oversigt
|
|
- **Definér**, hvad din valgte grænseflade gør, i klart og letforståeligt sprog
|
|
- **Forklar** de vigtigste metoder, egenskaber eller begivenheder, den tilbyder
|
|
- **Beskriv** de typer problemer, den er designet til at løse
|
|
|
|
#### Virkelig implementering
|
|
- **Find** en hjemmeside, der bruger din valgte grænseflade (inspicer koden eller undersøg eksempler)
|
|
- **Dokumentér** den specifikke implementering med kodeeksempler, hvis muligt
|
|
- **Analyser**, hvorfor udviklerne valgte denne tilgang
|
|
- **Forklar**, hvordan det forbedrer brugeroplevelsen
|
|
|
|
#### Praktisk anvendelse
|
|
- **Sammenlign** din grænseflade med de teknikker, vi brugte i terrarium-projektet
|
|
- **Foreslå**, hvordan din grænseflade kunne forbedre eller udvide terrarium-funktionaliteten
|
|
- **Identificér** andre projekter, hvor denne grænseflade ville være værdifuld
|
|
|
|
### Trin 3: Kodeeksempel
|
|
|
|
Inkluder et simpelt, fungerende kodeeksempel, der demonstrerer din grænseflade i praksis. Dette bør være:
|
|
- **Funktionelt** - Koden skal faktisk fungere, når den testes
|
|
- **Kommenteret** - Forklar, hvad hver del gør
|
|
- **Relevant** - Forbundet til en realistisk anvendelse
|
|
- **Begynder-venligt** - Forståeligt for en, der lærer webudvikling
|
|
|
|
## Format for aflevering
|
|
|
|
Strukturer din aflevering med klare overskrifter:
|
|
|
|
```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]
|
|
```
|
|
|
|
## Vurderingsrubrik
|
|
|
|
| Kriterier | Fremragende (A) | God (B) | Udvikling (C) | Kræver forbedring (D) |
|
|
|-----------|-----------------|---------|---------------|-----------------------|
|
|
| **Teknisk forståelse** | Demonstrerer dyb forståelse med præcise forklaringer og korrekt terminologi | Viser solid forståelse med for det meste præcise forklaringer | Grundlæggende forståelse med nogle misforståelser | Begrænset forståelse med betydelige fejl |
|
|
| **Virkelig analyse** | Identificerer og analyserer grundigt en faktisk implementering med specifikke eksempler | Finder et virkeligt eksempel med tilstrækkelig analyse | Lokaliserer eksempel, men analysen mangler dybde | Vag eller unøjagtig forbindelse til virkeligheden |
|
|
| **Kodeeksempel** | Fungerende, velkommenteret kode, der tydeligt demonstrerer grænsefladen | Funktionel kode med tilstrækkelige kommentarer | Koden fungerer, men kræver bedre dokumentation | Koden har fejl eller dårlig forklaring |
|
|
| **Skrivningskvalitet** | Klar, engagerende skrivning med korrekt struktur og teknisk kommunikation | Velorganiseret med god teknisk skrivning | Tilstrækkelig organisation og klarhed | Dårlig organisation eller uklar kommunikation |
|
|
| **Kritisk tænkning** | Skaber indsigtsfulde forbindelser mellem begreber og foreslår innovative anvendelser | Viser god analytisk tænkning og relevante forbindelser | Nogle analyser til stede, men kunne være dybere | Begrænset bevis for kritisk tænkning |
|
|
|
|
## Tips til succes
|
|
|
|
**Forskningsstrategier:**
|
|
- **Start** med MDN-dokumentation for autoritativ information
|
|
- **Søg** efter kodeeksempler på GitHub eller CodePen
|
|
- **Undersøg** populære hjemmesider ved hjælp af browserens udviklerværktøjer
|
|
- **Se** tutorial-videoer for visuelle forklaringer
|
|
|
|
**Skrivningsretningslinjer:**
|
|
- **Brug** dine egne ord i stedet for at kopiere dokumentation
|
|
- **Inkluder** specifikke eksempler og kodeuddrag
|
|
- **Forklar** tekniske begreber, som om du underviser en ven
|
|
- **Forbind** din grænseflade til bredere webudviklingskoncepter
|
|
|
|
**Ideer til kodeeksempler:**
|
|
- **Lav** en simpel demo, der viser grænsefladens hovedfunktioner
|
|
- **Byg videre** på koncepter fra vores terrarium-projekt, hvor det er relevant
|
|
- **Fokuser** på funktionalitet frem for visuel design
|
|
- **Test** din kode for at sikre, at den fungerer korrekt
|
|
|
|
## Deadline for aflevering
|
|
|
|
[Indsæt deadline her]
|
|
|
|
## Spørgsmål?
|
|
|
|
Hvis du har brug for afklaring på nogen del af denne opgave, så tøv ikke med at spørge! Denne undersøgelse vil uddybe din forståelse af, hvordan DOM muliggør de interaktive weboplevelser, vi bruger hver dag.
|
|
|
|
---
|
|
|
|
**Ansvarsfraskrivelse**:
|
|
Dette dokument er blevet oversat ved hjælp af AI-oversættelsestjenesten [Co-op Translator](https://github.com/Azure/co-op-translator). Selvom vi bestræber os på nøjagtighed, skal det bemærkes, at automatiserede oversættelser kan indeholde fejl eller unøjagtigheder. Det originale dokument på dets oprindelige sprog bør betragtes som den autoritative kilde. For kritisk information anbefales professionel menneskelig oversættelse. Vi er ikke ansvarlige for eventuelle misforståelser eller fejltolkninger, der opstår som følge af brugen af denne oversættelse. |