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.6 KiB
137 lines
6.6 KiB
<!--
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
{
|
|
"original_hash": "947ca5ce7c94aee9c7de7034e762bc17",
|
|
"translation_date": "2025-10-25T00:01:59+00:00",
|
|
"source_file": "3-terrarium/3-intro-to-DOM-and-closures/assignment.md",
|
|
"language_code": "hr"
|
|
}
|
|
-->
|
|
# Istraživanje DOM elemenata - Zadatak
|
|
|
|
## Pregled
|
|
|
|
Sada kada ste iz prve ruke iskusili moć manipulacije DOM-om, vrijeme je da istražite širi svijet DOM sučelja. Ovaj zadatak će produbiti vaše razumijevanje kako različite web tehnologije komuniciraju s DOM-om, osim samog povlačenja elemenata.
|
|
|
|
## Ciljevi učenja
|
|
|
|
Završetkom ovog zadatka, naučit ćete:
|
|
- **Istražiti** i detaljno razumjeti određeno DOM sučelje
|
|
- **Analizirati** stvarne primjene manipulacije DOM-om
|
|
- **Povezati** teorijske koncepte s praktičnim primjenama
|
|
- **Razviti** vještine tehničke dokumentacije i analize
|
|
|
|
## Upute
|
|
|
|
### Korak 1: Odaberite svoje DOM sučelje
|
|
|
|
Posjetite MDN-ov sveobuhvatan [popis DOM sučelja](https://developer.mozilla.org/docs/Web/API/Document_Object_Model) i odaberite jedno sučelje koje vas zanima. Razmislite o odabiru iz ovih kategorija za raznolikost:
|
|
|
|
**Opcije za početnike:**
|
|
- `Element.classList` - Dinamičko upravljanje CSS klasama
|
|
- `Document.querySelector()` - Napredno odabiranje elemenata
|
|
- `Element.addEventListener()` - Upravljanje događajima izvan događaja pokazivača
|
|
- `Window.localStorage` - Pohrana podataka na strani klijenta
|
|
|
|
**Izazovi za srednji nivo:**
|
|
- `Intersection Observer API` - Otkrivanje vidljivosti elemenata
|
|
- `MutationObserver` - Praćenje promjena u DOM-u
|
|
- `Drag and Drop API` - Alternativa našem pristupu temeljenom na pokazivaču
|
|
- `Geolocation API` - Pristup lokaciji korisnika
|
|
|
|
**Napredna istraživanja:**
|
|
- `Web Components` - Prilagođeni elementi i shadow DOM
|
|
- `Canvas API` - Programska grafika
|
|
- `Web Workers` - Obrada u pozadini
|
|
- `Service Workers` - Funkcionalnost izvan mreže
|
|
|
|
### Korak 2: Istraživanje i dokumentacija
|
|
|
|
Izradite sveobuhvatnu analizu (300-500 riječi) koja uključuje:
|
|
|
|
#### Tehnički pregled
|
|
- **Definirajte** što vaše odabrano sučelje radi na jasan, razumljiv način
|
|
- **Objasnite** ključne metode, svojstva ili događaje koje pruža
|
|
- **Opišite** vrste problema koje je dizajnirano za rješavanje
|
|
|
|
#### Stvarna primjena
|
|
- **Pronađite** web stranicu koja koristi vaše odabrano sučelje (pregledajte kod ili istražite primjere)
|
|
- **Dokumentirajte** specifičnu primjenu s isječcima koda ako je moguće
|
|
- **Analizirajte** zašto su se developeri odlučili za ovaj pristup
|
|
- **Objasnite** kako poboljšava korisničko iskustvo
|
|
|
|
#### Praktična primjena
|
|
- **Usporedite** vaše sučelje s tehnikama koje smo koristili u projektu terarija
|
|
- **Predložite** kako vaše sučelje može poboljšati ili proširiti funkcionalnost terarija
|
|
- **Identificirajte** druge projekte u kojima bi ovo sučelje bilo vrijedno
|
|
|
|
### Korak 3: Primjer koda
|
|
|
|
Uključite jednostavan, funkcionalan primjer koda koji demonstrira vaše sučelje u praksi. To bi trebalo biti:
|
|
- **Funkcionalno** - Kod bi trebao stvarno raditi kada se testira
|
|
- **Komentirano** - Objasnite što svaki dio radi
|
|
- **Relevantno** - Povezano s realnim slučajem upotrebe
|
|
- **Pristupačno početnicima** - Razumljivo nekome tko uči web razvoj
|
|
|
|
## Format predaje
|
|
|
|
Strukturirajte svoju predaju s jasnim naslovima:
|
|
|
|
```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]
|
|
```
|
|
|
|
## Rubrika za ocjenjivanje
|
|
|
|
| Kriterij | Izvrsno (A) | Dobro (B) | Osnovno (C) | Potrebno poboljšanje (D) |
|
|
|----------|-------------|-----------|-------------|--------------------------|
|
|
| **Tehničko razumijevanje** | Pokazuje duboko razumijevanje s točnim objašnjenjima i pravilnom terminologijom | Pokazuje solidno razumijevanje s uglavnom točnim objašnjenjima | Osnovno razumijevanje s nekim pogrešnim shvaćanjima | Ograničeno razumijevanje s značajnim pogreškama |
|
|
| **Analiza stvarnog svijeta** | Identificira i temeljito analizira stvarnu primjenu s konkretnim primjerima | Pronalazi stvarni primjer s odgovarajućom analizom | Pronalazi primjer, ali analiza nedostaje dubine | Nejasna ili netočna povezanost sa stvarnim svijetom |
|
|
| **Primjer koda** | Funkcionalan, dobro komentiran kod koji jasno demonstrira sučelje | Funkcionalan kod s odgovarajućim komentarima | Kod radi, ali treba bolju dokumentaciju | Kod ima greške ili loše objašnjenje |
|
|
| **Kvaliteta pisanja** | Jasno, zanimljivo pisanje s pravilnom strukturom i tehničkom komunikacijom | Dobro organizirano s dobrim tehničkim pisanjem | Dovoljna organizacija i jasnoća | Loša organizacija ili nejasna komunikacija |
|
|
| **Kritičko razmišljanje** | Povezuje konceptualne ideje i predlaže inovativne primjene | Pokazuje dobro analitičko razmišljanje i relevantne poveznice | Neka analiza prisutna, ali mogla bi biti dublja | Ograničeni dokazi kritičkog razmišljanja |
|
|
|
|
## Savjeti za uspjeh
|
|
|
|
**Strategije istraživanja:**
|
|
- **Započnite** s MDN dokumentacijom za pouzdane informacije
|
|
- **Potražite** primjere koda na GitHubu ili CodePenu
|
|
- **Provjerite** popularne web stranice koristeći alate za razvoj preglednika
|
|
- **Gledajte** video tutorijale za vizualna objašnjenja
|
|
|
|
**Smjernice za pisanje:**
|
|
- **Koristite** vlastite riječi umjesto kopiranja dokumentacije
|
|
- **Uključite** specifične primjere i isječke koda
|
|
- **Objasnite** tehničke koncepte kao da podučavate prijatelja
|
|
- **Povežite** svoje sučelje s širim konceptima web razvoja
|
|
|
|
**Ideje za primjere koda:**
|
|
- **Izradite** jednostavan demo koji prikazuje glavne značajke sučelja
|
|
- **Nadogradite** na koncepte iz našeg projekta terarija gdje je to relevantno
|
|
- **Usredotočite se** na funkcionalnost umjesto na vizualni dizajn
|
|
- **Testirajte** svoj kod kako biste osigurali da ispravno radi
|
|
|
|
## Rok za predaju
|
|
|
|
[Unesite rok ovdje]
|
|
|
|
## Pitanja?
|
|
|
|
Ako trebate pojašnjenje bilo kojeg aspekta ovog zadatka, slobodno pitajte! Ovo istraživanje će produbiti vaše razumijevanje kako DOM omogućuje interaktivna web iskustva koja svakodnevno koristimo.
|
|
|
|
---
|
|
|
|
**Izjava o odricanju odgovornosti**:
|
|
Ovaj dokument je preveden pomoću AI usluge za prevođenje [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane čovjeka. Ne preuzimamo odgovornost za nesporazume ili pogrešne interpretacije nastale korištenjem ovog prijevoda. |