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:

Wyjaśnisz, czym jest operator i czym jest wyrażenie w PHP.
Podasz przykłady różnych rodzajów operatorów, np.:
- arytmetyczne,
- porównania,
- logiczne,
- przypisania,
- łączenia tekstu.
Wskażesz, w jakich sytuacjach programista używa operatorów – spróbuj to opisać własnymi słowami.
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:

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) { ... }
```
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.
Customowy przycisk do czyszczenia pól
- Tworzymy własny przycisk, który zeruje wartości pól formularza:
```
document.getElementById("pole").value = "";
```
Tworzenie warunków na podstawie checkboxa i inputa
- Możemy np. sprawdzić, czy checkbox jest zaznaczony i czy w polu tekstowym wpisano konkretną wartość.
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.fontSize = "20px";
```
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>.

2. Przykłady

Przykład 1 – checkbox i `.checked`


  <script>
    function sprawdz() {
      if (document.getElementById("zgoda").checked) {
        document.getElementById("wynik").innerHTML = "Dziękujemy za akceptację!";
      } else {
        document.getElementById("wynik").innerHTML = "Musisz zaakceptować regulamin!";
      }
    }
  </script>

Przykład 2 – input, innerHTML i styl


  <script>
    function pokaz() {
      let dane = document.getElementById("imie").value;
      document.getElementById("wynik").innerHTML = "<span class='pogrubione'>" + dane + "</span>";
    }
  </script>

Przykład 3 – customowy przycisk do czyszczenia pól


  <script>
    function wyczysc() {
      document.getElementById("pole").value = "";
    }
  </script>

Przykład 4 – warunek z inputem i checkboxem


  <script>
    function sprawdz() {
      let kod = document.getElementById("kod").value;
      let zaznaczony = document.getElementById("akceptacja").checked;

    }
  </script>

Przykład 5 – zmiana stylów `.style`


  <script>
    function zmien() {
      let t = document.getElementById("tekst").style;
      t.color = "red";
    }
  </script>

Przykład 6 – prosta galeria


  <script>

      document.getElementById("obraz").src = obrazy[index];

  </script>

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).