Rozgrzewka: cztery metody z poprzednich lekcji

1. Co zwraca document.getElementById("nazwa"), jeśli w dokumencie nie ma elementu o takim id?
2. Którą właściwość elementu zmieniacie, żeby podmienić całą jego zawartość na nowy tekst?
3. Którą metodą zmieniacie atrybut elementu, na przykład src obrazka?
4. Którą metodą tworzycie zupełnie nowy element, którego wcześniej nie było w dokumencie?

Mapa tematu: DOM od znalezienia do zmiany

Pięć poprzednich godzin nauczyło Was czterech kroków pracy z DOM (ang. Document Object Model, obiektowy model dokumentu). Każdy kolejny krok korzysta z poprzedniego - najpierw trzeba element znaleźć, dopiero potem można go zmienić, podmienić mu atrybut albo usunąć.

Ciekawostka z MDN: metoda remove() z ostatniego kafelka mapy nie działała w przeglądarkach od zawsze - stała się dostępna we wszystkich głównych przeglądarkach dopiero w lipcu 2015 roku. Dziś definiuje ją standard DOM prowadzony przez WHATWG (ang. Web Hypertext Application Technology Working Group).

Jedna strona, trzy interaktywne elementy

Dziś nie uczycie się niczego nowego - łączycie na jednej stronie trzy osobne kawałki z godzin 3-5 tego tematu. Każdy przycisk wywołuje inną, już napisaną funkcję.

<img id="photo" src="image-a.svg" alt="Ilustracja A">
<button type="button" onclick="swapImage()">Zamień obrazek</button>
<p id="info">Stary tekst</p>
<button type="button" onclick="paintRed()">Pomaluj na czerwono</button>
<ul id="tasks"><li>Pierwsze zadanie</li></ul>
<button type="button" onclick="addItem()">Dodaj zadanie</button>

function swapImage() {
  const picture = document.getElementById("photo");
  picture.setAttribute("src", "image-b.svg");
}
function paintRed() {
  const paragraph = document.getElementById("info");
  paragraph.style.color = "red";
}
function addItem() {
  const list = document.getElementById("tasks");
  const newItem = document.createElement("li");
  newItem.textContent = "Nowe zadanie";
  list.appendChild(newItem);
}

Zdarzenie → funkcja → zmiana w DOM

Za każdym z trzech przycisków stoi ten sam schemat: zdarzenie (ang. event, sygnał, że coś się wydarzyło na stronie, np. kliknięcie) uruchamia funkcję, a funkcja zmienia DOM. Dziś zdarzenie „kliknięcie” obsługuje atrybut onclick w HTML - na kolejnym temacie poznacie addEventListener(), sposób zalecany w produkcji.

Ten sam kod krócej: biblioteka jQuery

Biblioteka to gotowy zbiór funkcji, który ktoś napisał przed Wami i udostępnił do pobrania: dołączacie do strony jeden plik i piszecie mniej kodu, tak jak kucharz otwiera gotowy bulion zamiast gotować go od zera. Najbardziej znana biblioteka JavaScriptu to jQuery, większe zestawy narzędzi to Angular i React. Dziś nic nie instalujemy, pokazuję tylko dwa zapisy obok siebie.

Tak pytają na egzaminie

<img src="image1.png">
<img src="image2.png" id="id1">
<button onclick="document.getElementById('id1')
  .style.display='none'">Przycisk</button>

<p id="para1">Przykładowy tekst</p>
<p> i skrypt</p>
<button onClick="changeColor('blue');">
  niebieski</button>
<script>
function changeColor(newColor) {
  var elem = document.getElementById("para1");
  elem.style.color = newColor;
}
</script>

Przypomnienie: funkcje, które dziś połączycie

script.js (fragmenty z godzin 3-5 tego tematu):

function paintRed() {
  const paragraph = document.getElementById("info");
  paragraph.style.color = "red";
}

function swapImage() {
  const picture = document.getElementById("photo");
  picture.setAttribute("src", "image-b.svg");
}

function addItem() {
  const list = document.getElementById("tasks");
  const newItem = document.createElement("li");
  newItem.textContent = "Nowe zadanie";
  list.appendChild(newItem);
}

Ćwiczenie: łączymy trzy przyciski na jednej stronie

1. Otwórz page.html z poprzednich lekcji. Sprawdź, że jest w nim: akapit id="info" z przyciskiem onclick="paintRed()", obrazek id="photo" z przyciskiem onclick="swapImage()", lista id="tasks" z przyciskiem onclick="addItem()". Jeśli któregoś elementu brakuje, dopisz go teraz.
2. Sprawdź w script.js, że wszystkie trzy funkcje (paintRed, swapImage, addItem) są zapisane - jeśli którejś brakuje, przepisz ją z poprzedniego slajdu.
3. Otwórz page.html w przeglądarce i kliknij po kolei wszystkie trzy przyciski - kolor akapitu, obrazek i lista mają się zmieniać niezależnie od siebie.
4. Zapisz oba pliki - wrócicie do nich na następnej lekcji, przy zdarzeniach.

A jak to wygląda w produkcji?