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.
130 lines
6.9 KiB
130 lines
6.9 KiB
# Zadanie: Badanie Elementów DOM
|
|
|
|
## Przegląd
|
|
|
|
Teraz, gdy doświadczyłeś siły manipulacji DOM na własnej skórze, nadszedł czas, aby zbadać szerszy świat interfejsów DOM. To zadanie pogłębi twoje zrozumienie, jak różne technologie webowe współdziałają z DOM, wykraczając poza samo przeciąganie elementów.
|
|
|
|
## Cele nauki
|
|
|
|
Realizując to zadanie, będziesz:
|
|
- **Badać** i dogłębnie rozumieć wybrany interfejs DOM
|
|
- **Analizować** rzeczywiste implementacje manipulacji DOM
|
|
- **Łączyć** teoretyczne koncepcje z praktycznymi zastosowaniami
|
|
- **Rozwijać** umiejętności w zakresie dokumentacji technicznej i analizy
|
|
|
|
## Instrukcje
|
|
|
|
### Krok 1: Wybierz swój interfejs DOM
|
|
|
|
Odwiedź obszerna [listę interfejsów DOM na MDN](https://developer.mozilla.org/docs/Web/API/Document_Object_Model) i wybierz jeden interfejs, który Cię interesuje. Dla różnorodności rozważ wybór spośród tych kategorii:
|
|
|
|
**Opcje dla początkujących:**
|
|
- `Element.classList` - dynamiczne zarządzanie klasami CSS
|
|
- `Document.querySelector()` - zaawansowany wybór elementów
|
|
- `Element.addEventListener()` - obsługa zdarzeń wykraczająca poza zdarzenia wskaźnika
|
|
- `Window.localStorage` - przechowywanie danych po stronie klienta
|
|
|
|
**Wyzwania średniozaawansowane:**
|
|
- `Intersection Observer API` - wykrywanie widoczności elementów
|
|
- `MutationObserver` - obserwowanie zmian DOM
|
|
- `Drag and Drop API` - alternatywa dla naszego podejścia opartego na wskaźniku
|
|
- `Geolocation API` - dostęp do lokalizacji użytkownika
|
|
|
|
**Eksploracja zaawansowana:**
|
|
- `Web Components` - niestandardowe elementy i shadow DOM
|
|
- `Canvas API` - programowa grafika
|
|
- `Web Workers` - przetwarzanie w tle
|
|
- `Service Workers` - funkcjonalność offline
|
|
|
|
### Krok 2: Badanie i dokumentacja
|
|
|
|
Stwórz obszerną analizę (300-500 słów) obejmującą:
|
|
|
|
#### Przegląd techniczny
|
|
- **Zdefiniuj**, do czego służy wybrany interfejs w jasny, przystępny sposób
|
|
- **Wyjaśnij** kluczowe metody, właściwości lub zdarzenia, które oferuje
|
|
- **Opisz** rodzaje problemów, które pomaga rozwiązać
|
|
|
|
#### Implementacja w rzeczywistym świecie
|
|
- **Znajdź** stronę internetową, która używa wybranego interfejsu (przeanalizuj kod lub poszukaj przykładów)
|
|
- **Udokumentuj** konkretne zastosowanie wraz ze snippetami kodu, jeśli to możliwe
|
|
- **Przeanalizuj**, dlaczego twórcy zdecydowali się na takie rozwiązanie
|
|
- **Wyjaśnij**, jak poprawia to doświadczenie użytkownika
|
|
|
|
#### Zastosowanie praktyczne
|
|
- **Porównaj** swój interfejs z technikami użytymi w projekcie terrarium
|
|
- **Zaproponuj**, jak twój interfejs mógłby wzbogacić lub rozbudować funkcjonalność terrarium
|
|
- **Wskaż** inne projekty, w których ten interfejs byłby wartościowy
|
|
|
|
### Krok 3: Przykład kodu
|
|
|
|
Dołącz prosty, działający przykład kodu, który demonstruje działanie twojego interfejsu. Powinien on być:
|
|
- **Funkcjonalny** - kod powinien faktycznie działać po przetestowaniu
|
|
- **Komentowany** - wyjaśnij, co robi każda część
|
|
- **Istotny** - powiązany z realistycznym zastosowaniem
|
|
- **Przyjazny dla początkujących** - zrozumiały dla osób uczących się tworzenia stron internetowych
|
|
|
|
## Format oddania pracy
|
|
|
|
Strukturyzuj swoją pracę z wyraźnymi nagłówkami:
|
|
|
|
```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]
|
|
```
|
|
|
|
## Kryteria oceny
|
|
|
|
| Kryteria | Wzorowy (A) | Dobry (B) | W trakcie rozwoju (C) | Wymaga poprawy (D) |
|
|
|----------|-------------|-----------|----------------------|--------------------|
|
|
| **Zrozumienie techniczne** | Wykazuje głębokie zrozumienie z dokładnymi wyjaśnieniami i prawidłową terminologią | Pokazuje solidne zrozumienie z w większości dokładnymi wyjaśnieniami | Podstawowe zrozumienie z pewnymi nieścisłościami | Ograniczone zrozumienie z istotnymi błędami |
|
|
| **Analiza rzeczywistego zastosowania** | Identyfikuje i dokładnie analizuje faktyczne zastosowanie z konkretnymi przykładami | Znajduje rzeczywisty przykład z adekwatną analizą | Lokalizuje przykład, ale analiza jest powierzchowna | Niejasne lub niedokładne powiązanie z rzeczywistością |
|
|
| **Przykład kodu** | Działający, dobrze komentowany kod, który jasno demonstruje interfejs | Funkcjonalny kod z wystarczającymi komentarzami | Kod działa, ale wymaga lepszej dokumentacji | Kod zawiera błędy lub słabe wyjaśnienia |
|
|
| **Jakość pisania** | Jasny, angażujący styl z odpowiednią strukturą i komunikacją techniczną | Dobrze zorganizowany z dobrym stylem technicznym | Wystarczająca organizacja i jasność | Słaba organizacja lub niejasna komunikacja |
|
|
| **Myślenie krytyczne** | Buduje wnikliwe powiązania między koncepcjami i proponuje innowacyjne zastosowania | Pokazuje dobre myślenie analityczne i adekwatne powiązania | Obecna jest pewna analiza, ale mogłaby być głębsza | Ograniczone dowody myślenia krytycznego |
|
|
|
|
## Wskazówki do sukcesu
|
|
|
|
**Strategie badawcze:**
|
|
- **Zacznij** od dokumentacji MDN dla autorytatywnych informacji
|
|
- **Szukaj** przykładów kodu na GitHub lub CodePen
|
|
- **Sprawdzaj** popularne strony za pomocą narzędzi developerskich w przeglądarce
|
|
- **Oglądaj** tutoriale video dla wizualnych wyjaśnień
|
|
|
|
**Wytyczne dotyczące pisania:**
|
|
- **Używaj** własnych słów zamiast kopiować dokumentację
|
|
- **Dołączaj** konkretne przykłady i fragmenty kodu
|
|
- **Wyjaśniaj** pojęcia techniczne, jakbyś tłumaczył je przyjacielowi
|
|
- **Łącz** swój interfejs z szerszymi koncepcjami web developmentu
|
|
|
|
**Pomysły na przykłady kodu:**
|
|
- **Stwórz** prostą demonstrację pokazującą główne cechy interfejsu
|
|
- **Bazuj** na koncepcjach z naszego projektu terrarium, jeśli to możliwe
|
|
- **Skup się** na funkcjonalności bardziej niż na wyglądzie
|
|
- **Przetestuj** swój kod, aby upewnić się, że działa poprawnie
|
|
|
|
## Termin oddania pracy
|
|
|
|
[Wstaw tutaj termin]
|
|
|
|
## Pytania?
|
|
|
|
Jeśli potrzebujesz wyjaśnienia jakiegokolwiek aspektu tego zadania, nie wahaj się pytać! To badanie pogłębi twoje zrozumienie, jak DOM umożliwia interaktywne doświadczenia webowe, z których korzystamy na co dzień.
|
|
|
|
---
|
|
|
|
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
|
**Zastrzeżenie**:
|
|
Niniejszy dokument został przetłumaczony za pomocą usługi tłumaczeń AI [Co-op Translator](https://github.com/Azure/co-op-translator). Pomimo naszych starań o dokładność, prosimy mieć na uwadze, że automatyczne tłumaczenia mogą zawierać błędy lub nieścisłości. Oryginalny dokument w języku źródłowym należy uważać za autorytatywne źródło. W przypadku istotnych informacji zalecane jest skorzystanie z profesjonalnego tłumaczenia wykonanego przez człowieka. Nie ponosimy odpowiedzialności za jakiekolwiek nieporozumienia lub błędne interpretacje wynikające z użycia tego tłumaczenia.
|
|
<!-- CO-OP TRANSLATOR DISCLAIMER END --> |