Powtórka i mały projekt podsumowujący

Preview Mode

You're viewing this material in preview mode. Sign up to track your progress and access all features.

Sign Up Free Login
Powtórka i mały projekt podsumowujący
In Progress

Gratulacje! Dotarłeś do końca kursu podstaw JavaScript

W ostatniej lekcji podsumujemy zdobytą wiedzę i zaproponujemy Ci projekt do samodzielnego wykonania, który połączy różne elementy, których się nauczyłeś.

Podsumowanie materiału

W trakcie kursu poznałeś:

  • Podstawy składni JS: zmienne (let, const), typy danych (string, number, boolean, undefined), operatory matematyczne i konkatenację tekstu.
  • Instrukcje warunkowe: if...else i operatory logiczne do podejmowania decyzji w kodzie.
  • Pętle: for, while pozwalające powtarzać blok kodu wielokrotnie.
  • Funkcje: strukturyzowanie kodu i wielokrotne wykonywanie tych samych działań.
  • Tablice i obiekty: przechowywanie list danych (tablice) oraz struktur z polami (obiekty).
  • Obsługa zdarzeń w przeglądarce: reagowanie na kliknięcia i wprowadzanie danych za pomocą addEventListener.
  • Manipulowanie DOM: wyszukiwanie elementów (getElementById, querySelector), zmienianie zawartości (textContent, innerHTML), stylów (element.style...), tworzenie i usuwanie elementów w dokumencie.
  • Praca z formularzami i danymi od użytkownika: odczytywanie wartości (.value), walidacja prostych warunków (puste pola, format email, długość hasła) i wyświetlanie komunikatów.
  • Wykorzystanie czasu: obiekt Date oraz funkcje czasu (np. setInterval) do tworzenia zegarów i liczników.

To solidne podstawy, by móc tworzyć pierwsze interaktywne strony internetowe!

Typowe problemy i błędy

Poniżej kilka częstych potknięć początkujących wraz z poradami:

  • Pusty ekran, skrypt nie działa.

    Często w konsoli jest błąd składni (np. brakujący nawias). Sprawdź dokładnie komunikat błędu w konsoli – wskaże linię i charakter problemu. Nawykowe korzystanie z konsoli deweloperskiej bardzo pomaga.

  • Nieprawidłowe użycie operatorów porównania.

    Pamiętaj, żeby w if używać == / === zamiast =. Jedno = to przypisanie, nie porównanie – to częsty błąd prowadzący do dziwnego zachowania programu.

  • Błędy zakresu zmiennych (scope).

    Jeśli używasz let wewnątrz funkcji czy bloku, nie jest ona widoczna poza nim. Upewnij się, że zmienne, do których chcesz mieć dostęp, są zadeklarowane we właściwym miejscu.

  • Literówki w nazwach zmiennych i funkcji.

    JS rozróżnia wielkość liter. Na przykład document.getElementByID nie zadziała — poprawna nazwa to document.getElementById. Jeśli coś "nie istnieje", sprawdź czy nie ma literówki.

  • Niezamknięte znaczniki HTML przy użyciu innerHTML.

    Gdy manipulujesz innerHTML, upewnij się, że budowany kod HTML jest poprawny (wszystkie otwarte tagi są zamknięte). Błędny HTML może spowodować dziwne zachowanie DOM.

  • Zła kolejność załadowania skryptu.

    Jeśli skrypt JS próbuje odwołać się do elementów DOM, które jeszcze nie zostały załadowane (np. <script> w <head> bez defer), otrzymasz błąd null. Rozwiązania: umieść skrypt na końcu <body> lub użyj window.onload / DOMContentLoaded.

Projekt "Moja mini-strona z interakcjami"

Teraz Twoim zadaniem jest stworzyć od podstaw prostą stronę HTML i dodać do niej skrypty JS realizujące pewne interaktywne funkcje. Wybierz 2–3 funkcjonalności, które najbardziej Ci się podobają. Celem jest poćwiczenie integracji: HTML, CSS i JS.

Kilka pomysłów, co możesz umieścić na takiej stronie:

  • Powitanie użytkownika:

    Poproś o imię (np. prompt lub pole formularza) i przywitaj spersonalizowanym komunikatem. Możesz zapamiętać imię w localStorage, by przy kolejnym otwarciu strony już je znać (opcjonalnie).

  • Prosta galeria lub zmiana stylu:

    Umieść kilka obrazków i dodaj przycisk "Zmień motyw", który po kliknięciu zmieni kolory tła/tekstu strony (manipulacja document.body.style lub dodanie klas CSS).

  • Formularz kontaktowy z walidacją:

    Stwórz sekcję "Kontakt" z formularzem (email, wiadomość) i zaimplementuj walidację — wyświetl komunikat błędu, jeśli pola są puste lub email nie zawiera "@". Po "wysłaniu" pokaż podziękowanie (bez faktycznego wysyłania).

  • Lista zadań (To-Do) lub notatnik:

    Zaimplementuj mini-listę zadań pozwalającą dodawać i usuwać elementy. Możesz zapisać zadania w localStorage, rozbudować funkcje edycji itp.

  • Czasomierz lub gra:

    Dodaj odliczanie czasu do wydarzenia (użyj Date i setInterval) albo prostą grę "Zgadnij liczbę".

Co dalej?

Poznałeś podstawy — to świetny start! Możesz teraz:

  • Tworzyć własne małe projekty i ćwiczyć nabyte umiejętności — im więcej kodu napiszesz, tym lepiej go zrozumiesz.
  • Zgłębić dalsze części JavaScript: więcej metod tablic (map, filter itd.), programowanie obiektowe (klasy, prototypy), obsługa API i zapytań sieciowych (fetch), asynchroniczność (promisy, async/await) oraz moduły ES6.
  • Nauczyć się bibliotek i frameworków (np. React, Vue) — pamiętaj, że mocne podstawy vanilla JS ułatwią naukę każdego frameworka.
  • Zagłębić się w środowisko Node.js, jeśli chcesz pisać kod JS po stronie serwera.

Pamiętaj, że każdy doświadczony programista kiedyś zaczynał tak jak Ty. Nie bój się eksperymentować, uczyć na błędach i szukać rozwiązań. Powodzenia w dalszej przygodzie z programowaniem!

Ćwiczenia

  1. Zaplanuj swoją mini-stronę podsumowującą – wypisz, jakie funkcjonalności chcesz na niej umieścić i jakich plików/sekcji będziesz potrzebować (HTML, CSS, JS).
  2. Zrealizuj krok po kroku wybrane elementy strony. Najpierw stwórz strukturę HTML i ostyluj ją (choćby podstawowo), następnie dodawaj skrypty JS obsługujące interakcje. Testuj każdą część na bieżąco.
  3. Poproś kolegę lub członka rodziny o przetestowanie Twojej strony – świeże oko może wychwycić błędy lub rzeczy nieintuicyjne. Spróbuj poprawić stronę na podstawie uwag.
  4. Zachowaj swój projekt i wróć do niego za jakiś czas (kilka tygodni/miesięcy), by ocenić swój postęp. Możesz spróbować go rozbudować lub napisać od nowa wykorzystując nowszą wiedzę.
Sign up to track your progress