Interakcje w JavaScript – checkboxy, style i formularze

Zadanie teoretyczne – Operatory i wyrażenia w PHP

Polecenie: Wyobraź sobie, że tłumaczysz młodszemu koledze, czym są operatory i wyrażenia w PHP. Twoim zadaniem jest napisać krótką notatkę (min. pół strony), w której:

  1. Wyjaśnisz, czym jest operator i czym jest wyrażenie w PHP.

  2. Podasz przykłady różnych rodzajów operatorów, np.:

    • arytmetyczne,
    • porównania,
    • logiczne,
    • przypisania,
    • łączenia tekstu.
  3. Wskażesz, w jakich sytuacjach programista używa operatorów – spróbuj to opisać własnymi słowami.
  4. Zastanowisz się, dlaczego operatory są ważne w programowaniu i jak wpływają na logikę programu.

Przykładowe pytania pomocnicze do przemyślenia:

  • Dlaczego operator == różni się od ===?
  • Kiedy użyłbyś operatora % (modulo)?
  • Dlaczego operator logiczny && jest potrzebny przy warunkach?
  • Jak łączy się tekst w PHP?

mail: zajecia@tsadowski.pl

1. Wstęp teoretyczny

JavaScript pozwala nie tylko wyświetlać komunikaty i losować liczby, ale też sterować elementami strony w bardziej zaawansowany sposób. Dziś poznamy kilka nowych technik:

  1. Checkboxy i właściwość .checked

    • Checkbox to pole, które użytkownik może zaznaczyć lub odznaczyć.

    • Sprawdzenie, czy checkbox jest zaznaczony:

      if(document.getElementById("mojCheckbox").checked) { ... }

  2. Pobieranie wartości z inputa i wypisywanie w tagu

    • Możemy pobierać dane od użytkownika i wyświetlać je na stronie:

      let wartosc = document.getElementById("pole").value;
document.getElementById("wynik").innerHTML = "<span class='podkresl'>" + wartosc + "</span>";
    • Dzięki innerHTML możemy dodać własny fragment kodu z klasą CSS.

  3. Customowy przycisk do czyszczenia pól

    • Tworzymy własny przycisk, który zeruje wartości pól formularza:

      document.getElementById("pole").value = "";

  4. Tworzenie warunków na podstawie checkboxa i inputa

    • Możemy np. sprawdzić, czy checkbox jest zaznaczony i czy w polu tekstowym wpisano konkretną wartość.

  5. Prosta zmiana stylów za pomocą .style

    • Właściwość .style pozwala zmieniać wygląd elementów dynamicznie, np.:

      document.getElementById("tekst").style = "color:red";
document.getElementById("tekst").style = "font-size:20px";

  6. Prosta galeria w JS

    • Galeria może działać tak, że po kliknięciu przycisku zmienia się wyświetlany obrazek.
    • Logika polega na przechowywaniu listy obrazów i podmienianiu src w tagu <img>.

3. Zadania dla uczniów

Zadanie 1 (utrwalające)

Stwórz stronę, na której użytkownik wpisuje swoje imię, a po kliknięciu przycisku pojawia się komunikat „Witaj, [imię]!” w paragrafie.

Zadanie 2

Zrób stronę z checkboxem „Chcę otrzymywać newsletter” i przyciskiem „Zapisz”.

  • Jeśli checkbox jest zaznaczony – wyświetl komunikat „Dziękujemy za zapisanie się!”.
  • Jeśli nie – „Musisz zaznaczyć zgodę!”.

Zadanie 3

Stwórz formularz z polem tekstowym i przyciskiem „Pokaż dane”, który wyświetli w paragrafie wprowadzone dane jako pogrubiony niebieski tekst.

Zadanie 4

Dodaj przycisk „Wyczyść formularz”, który usuwa wszystkie wpisane dane z pól.

Zadanie 5

Utwórz formularz z inputem i checkboxem.

  • Jeśli w polu wpisano hasło „sekret” i checkbox jest zaznaczony, pokaż komunikat „Dostęp przyznany”.
  • W przeciwnym wypadku – „Brak dostępu”.

Zadanie 6

Stwórz prostą galerię z trzema obrazkami i przyciskiem „Następny”, który będzie zmieniał obraz w tagu <img>.

Zadanie 7

Stwórz formularz z:

  • polem tekstowym na imię,
  • checkboxem „Chcę powiększony tekst”,
  • przyciskiem „Pokaż wynik”,
  • przyciskiem „Wyczyść”.

Po kliknięciu „Pokaż wynik”:

  • wyświetl wpisane imię w paragrafie,
  • jeśli checkbox jest zaznaczony – ustaw tekst na większy (np. 24px), w przeciwnym wypadku zostaw normalny rozmiar.

Przycisk „Wyczyść” ma usuwać wpisane dane i przywracać paragraf do stanu początkowego.

Zadanie 8

Stwórz prostą mini-galerię z:

  • trzema obrazkami (przechowywanymi w tablicy),
  • przyciskiem „Losowy”,
  • polem tekstowym na kolor (np. „red”, „blue”, „yellow”),
  • checkboxem „Dodaj ramkę”.

Po kliknięciu przycisku:

  • zmień obrazek na losowy z tablicy,
  • nadaj mu kolor tła taki, jak wpisano w polu input,
  • jeśli checkbox jest zaznaczony – dodaj ramkę wokół obrazka (border: 3px solid black).