To drugi sposób rozwiązania tego samego arkusza. Wynik jest ten sam - baza atlas_drzew z czterema zapytaniami, przeskalowany dab.jpg i strona lisciaste.html z galerią drzew, wyszukiwarką i opisem w bloku głównym - i tak samo spełnia każde kryterium klucza. Inna jest droga:
grid-template-areas) zamiast float: left i clear: both - układ z ilustracji 3 jest narysowany wprost w kodzie, a szerokości 25% i 55% stoją w grid-template-columns (klucz R.4.2 przyjmuje je wprost),skrypt.js z atrybutem defer: jeden nasłuchiwacz na całej galerii zamiast dziewięciu atrybutów onclick, nazwa drzewa z tekstu alternatywnego klikniętego zdjęcia,submit - działa i przycisk, i klawisz Enter, a nazwa jest porównywana bez względu na wielkość liter, spacje i polskie znaki („ Dab” znajdzie dąb),JOIN ... ON.Na końcu krótkie porównanie z wersją podstawową (zakładka obok). Baza, zdjęcia i teksty pochodzą z prawdziwego archiwum pliki21, zapytania zostały wykonane na tej bazie w MariaDB z XAMPP-a, a skrypty sprawdzone w prawdziwej przeglądarce. Strona w podglądzie działa - od kroków ze skryptem można klikać zdjęcia i szukać drzew.
Jak liczą się punkty. Klucz ma 40 kryteriów (R.1.1 - R.5.9), każde za 1 punkt. Próg zdania to 75%, czyli 30 punktów. Przy każdym kroku jest napisane, które kryteria spełnia.
Kroki 1-7 · po tym etapie masz 6 z 40 kryteriów (pkt)
Utwórz bazę danych o nazwie atlas_drzew, z zestawem polskich znaków (np. utf8_unicode_ci).
Archiwum pliki21.7z rozpakuj hasłem @tSa5Drzew (na początku małpa, w środku cyfra 5) do folderu z numerem zdającego. W phpMyAdmin Nowa → atlas_drzew (z podkreśleniem), porównywanie utf8_unicode_ci, albo:
CREATE DATABASE atlas_drzew CHARACTER SET utf8 COLLATE utf8_unicode_ci;
Do utworzonej bazy zaimportuj dane z pliku atlasdrzew.sql.
Import → atlasdrzew.sql. Tabele gatunki (rodzaj: 1 liściaste, 2 iglaste, 3 owocowe), drzewa (gatunek, lokalizacja, data posadzenia, stan zdrowia), lokalizacje (opis „miasto, kraj”) i słownik rodzaje.
Wykonaj zrzut ekranu po imporcie. Zapisz zrzut w formacie PNG pod nazwą import. Nie kadruj zrzutu. Powinien on obejmować cały ekran monitora, z widocznym paskiem zadań. Na zrzucie powinny być widoczne elementy wskazujące na poprawnie wykonany import tabel.
Cały ekran z paskiem zadań, zapis jako import.png.
Wykadrowany zrzut nie jest oceniany.
Zapytanie 1: wybierające jedynie nazwy, nazwy naukowe oraz średnią długość życia gatunków drzew z rodzaju iglastych posortowane malejąco według średniej długości życia.
Iglaste mają w polu rodzaj wartość 2 (opis bazy w arkuszu). Wynik: 8 wierszy - Cis, Cedr, Cyprys, Daglezja, Jodła, Świerk, Sosna, Modrzew. Zapytania zapisuj w kwerendy.txt, zrzut jako kw1.png.
WHERE rodzaj = 'Iglaste' nic nie zwraca - w tabeli gatunki rodzaj jest liczbą, a nazwa leży w słowniku rodzaje.
kwerendy.txt Tekst nowy plik -- Zapytanie 1
SELECT nazwa, nazwaNaukowa, sredniaDlugoscZycia
FROM gatunki
WHERE rodzaj = 2
ORDER BY sredniaDlugoscZycia DESC;
Zapytanie 2: wybierające jedynie pola id i stanZdrowia z tabeli drzewa oraz odpowiadające im pole nazwa z tabeli gatunki dla tych drzew, które zostały posadzone 6 czerwca 2008 roku. Należy posłużyć się relacją.
d (drzewa) i g (gatunki): d.id mówi od razu, które z dwóch pól id jest wybrane,JOIN ... ON g.id = d.gatunek_id - para kluczy stoi przy złączeniu, WHERE zostaje dla warunku z zadania,dataPosadzenia jest typu date (bez godziny), więc wystarcza zwykłe porównanie z '2008-06-06'.Wynik: 3 wiersze - id 24, 95, 115. Zrzut: kw2.png.
SELECT id, ... bez aliasu kończy się błędem „Column 'id' in field list is ambiguous”.
kwerendy.txt Tekst zmienione: 6 linii -- Zapytanie 1
SELECT nazwa, nazwaNaukowa, sredniaDlugoscZycia
FROM gatunki
WHERE rodzaj = 2
ORDER BY sredniaDlugoscZycia DESC;
-- Zapytanie 2
SELECT d.id, d.stanZdrowia, g.nazwa
FROM drzewa AS d
JOIN gatunki AS g ON g.id = d.gatunek_id
WHERE d.dataPosadzenia = '2008-06-06';
Zapytanie 3: wybierające jedynie pole rodzaj oraz liczące ile gatunków z każdego rodzaju jest opisanych w tej bazie danych. Kolumnie z liczbą gatunków należy nadać nazwę (alias) „ilość”.
GROUP BY rodzaj i COUNT(*) w grupie. Alias z polską literą w odwrotnych apostrofach `ilość` - to w MySQL i MariaDB znak dla nazw (kolumn, tabel, aliasów); cudzysłów z przykładu w kluczu też działa, ale w innych bazach (i w MySQL z trybem ANSI_QUOTES) oznacza co innego. Wynik: 3 wiersze - 1: 23, 2: 8, 3: 22. Zrzut: kw3.png.
Alias w apostrofach ('ilość') MySQL też przyjmie, ale apostrofy oznaczają w SQL tekst - przy dłuższych zapytaniach łatwo o pomyłkę.
kwerendy.txt Tekst zmienione: 5 linii -- Zapytanie 1
SELECT nazwa, nazwaNaukowa, sredniaDlugoscZycia
FROM gatunki
WHERE rodzaj = 2
ORDER BY sredniaDlugoscZycia DESC;
-- Zapytanie 2
SELECT d.id, d.stanZdrowia, g.nazwa
FROM drzewa AS d
JOIN gatunki AS g ON g.id = d.gatunek_id
WHERE d.dataPosadzenia = '2008-06-06';
-- Zapytanie 3
SELECT rodzaj, COUNT(*) AS `ilość`
FROM gatunki
GROUP BY rodzaj;
Zapytanie 4: wybierające jedynie nazwy z tabeli gatunki oraz odpowiadające im datę posadzenia i stan zdrowia z tabeli drzewa, drzew obserwowanych w Gdańsku, Polsce, których nazwy kończą się na literę 'a'. Należy posłużyć się relacją.
Drzewo łączy się z dwiema tabelami - z gatunkiem (nazwa) i z lokalizacją (opis miejsca) - każde złączenie ze swoim ON. l.opis = 'Gdańsk, Polska' dokładnie w postaci „miasto, kraj”, a LIKE '%a' - dowolny początek i „a” na końcu.
Wynik: 9 wierszy - Czereśnia, Morwa, Topola, Morwa, Grusza, Katalpa, Wierzba, Sosna, Jarzębina (Morwa dwa razy, bo w Gdańsku rosną dwa drzewa tego gatunku). Zrzut: kw4.png.
LIKE 'a%' szuka nazw zaczynających się na „a” - na tej bazie wynik jest pusty.
kwerendy.txt Tekst zmienione: 8 linii -- Zapytanie 1
SELECT nazwa, nazwaNaukowa, sredniaDlugoscZycia
FROM gatunki
WHERE rodzaj = 2
ORDER BY sredniaDlugoscZycia DESC;
-- Zapytanie 2
SELECT d.id, d.stanZdrowia, g.nazwa
FROM drzewa AS d
JOIN gatunki AS g ON g.id = d.gatunek_id
WHERE d.dataPosadzenia = '2008-06-06';
-- Zapytanie 3
SELECT rodzaj, COUNT(*) AS `ilość`
FROM gatunki
GROUP BY rodzaj;
-- Zapytanie 4
SELECT g.nazwa, d.dataPosadzenia, d.stanZdrowia
FROM drzewa AS d
JOIN gatunki AS g ON g.id = d.gatunek_id
JOIN lokalizacje AS l ON l.id = d.lokalizacja_id
WHERE l.opis = 'Gdańsk, Polska'
AND g.nazwa LIKE '%a';
Kroki 8-20 · po tym etapie masz 19 z 40 kryteriów (pkt)
Plik dab.jpg, wypakowany z archiwum, należy przeskalować z zachowaniem proporcji, do szerokości 300 px.
GIMP: Obraz → Skaluj obraz, szerokość 300 przy zamkniętym łańcuchu proporcji - wychodzi 300 × 200, jak pozostałe zdjęcia galerii. Plik → Wyeksportuj jako dab.jpg (nadpisz plik z archiwum).
Składa się ze strony o nazwie lisciaste.html. Zapisana w języku HTML5.
Pierwsza linia <!DOCTYPE html>. Plik lisciaste.html w folderze ze zdjęciami.
lisciaste.html HTML nowy plik <!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>Zadeklarowany polski język zawartości witryny.
lang="pl" w <html> - razem z deklaracją HTML5 to R.2.2.
lisciaste.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
</head>
<body>
</body>
</html>Jawnie zastosowany właściwy standard kodowania polskich znaków. Tytuł strony „Atlas drzew”.
<meta charset="UTF-8"> jako pierwszy element <head>, pod nim viewport (telefon nie pomniejsza strony) i <title>. Kodowanie i tytuł to R.2.3.
lisciaste.html HTML zmienione: 3 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Atlas drzew</title>
</head>
<body>
</body>
</html>Arkusz stylów w pliku o nazwie styl.css prawidłowo połączony z kodem strony.
<link rel="stylesheet" href="styl.css"> - całe formatowanie z tego pliku (R.3.2).
lisciaste.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Atlas drzew</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
</body>
</html>Podział strony na bloki: nagłówkowy, boczny, nawigacyjny, główny, stopki. Podział zrealizowany za pomocą semantycznych znaczników języka HTML 5 tak, aby po uruchomieniu w przeglądarce układ bloków był zgodny z ilustracją 3.
Pięć znaczników semantycznych z tabeli 1 - dokładnie lista z klucza R.2.4. Kolejność w kodzie to kolejność czytania (tak przejdzie po stronie czytnik ekranu i klawisz Tab): nagłówek, panel wyboru drzewa, menu, treść, stopka. Gdzie który blok stanie na ekranie, zdecyduje siatka CSS - niezależnie od tej kolejności.
lisciaste.html HTML zmienione: 10 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Atlas drzew</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
</header>
<aside>
</aside>
<nav>
</nav>
<main>
</main>
<footer>
</footer>
</body>
</html>Zawartość bloku nagłówkowego: Nagłówek pierwszego stopnia o treści „Atlas drzew”. Zawartość bloku bocznego: Nagłówek trzeciego stopnia o treści „Wybierz drzewo, aby przeczytać o nim informacje”.
<h1> w <header>, <h3> w <aside> - stopnie z arkusza.
lisciaste.html HTML zmienione: 2 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Atlas drzew</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Atlas drzew</h1>
</header>
<aside>
<h3>Wybierz drzewo, aby przeczytać o nim informacje</h3>
</aside>
<nav>
</nav>
<main>
</main>
<footer>
</footer>
</body>
</html>Blok obrazów, w którym znajdują się kolejno obrazy: buk.jpg, lipa.jpg, wierzba.jpg, brzoza.jpg, dab.jpg, kasztanowiec.jpg, jarzebina.jpg, klon.jpg, magnolia.jpg. Wszystkie obrazy mają tekst alternatywny, którym jest nazwa drzewa zawarta w nazwie właściwego pliku.
<div id="images"> z dziewięcioma obrazami w kolejności z arkusza - tej samej co w tablicach z do_strony.txt. Tekst alternatywny to nazwa drzewa z polskimi literami („dąb”, „jarzębina”) - dokładnie jak w tablicy nazw (R.2.6). Ma to znaczenie podwójne: czytnik ekranu przeczyta poprawne słowo, a skrypt weźmie nazwę drzewa właśnie z alt klikniętego zdjęcia, więc HTML nie potrzebuje żadnego onclick.
lisciaste.html HTML zmienione: 11 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Atlas drzew</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Atlas drzew</h1>
</header>
<aside>
<h3>Wybierz drzewo, aby przeczytać o nim informacje</h3>
<div id="images">
<img src="buk.jpg" alt="buk">
<img src="lipa.jpg" alt="lipa">
<img src="wierzba.jpg" alt="wierzba">
<img src="brzoza.jpg" alt="brzoza">
<img src="dab.jpg" alt="dąb">
<img src="kasztanowiec.jpg" alt="kasztanowiec">
<img src="jarzebina.jpg" alt="jarzębina">
<img src="klon.jpg" alt="klon">
<img src="magnolia.jpg" alt="magnolia">
</div>
</aside>
<nav>
</nav>
<main>
</main>
<footer>
</footer>
</body>
</html>Pole edycyjne z podpowiedzią „Wyszukaj drzewo…”.
Pole i przycisk stoją w formularzu <form role="search"> - to daje za darmo obsługę klawisza Enter (Enter w polu formularza wysyła formularz), a role="search" mówi czytnikowi ekranu, że to wyszukiwarka strony. Formularz nie ma action, bo nigdzie niczego nie wyśle - zdarzenie przechwyci skrypt.
placeholder="Wyszukaj drzewo…" - szara podpowiedź, która znika przy pisaniu, a nie wartość pola (R.3.4),type="search" - pole tekstowe przeznaczone do wyszukiwania: przeglądarki dodają w nim krzyżyk do czyszczenia, a telefon pokazuje klawisz „Szukaj”,aria-label - nazwa pola dla czytnika ekranu; podpowiedź placeholder znika przy pisaniu, więc nie zastępuje etykiety.value="Wyszukaj drzewo…" zamiast placeholder wpisuje tekst do pola - skrypt szukałby drzewa o takiej nazwie.
lisciaste.html HTML zmienione: 3 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Atlas drzew</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Atlas drzew</h1>
</header>
<aside>
<h3>Wybierz drzewo, aby przeczytać o nim informacje</h3>
<div id="images">
<img src="buk.jpg" alt="buk">
<img src="lipa.jpg" alt="lipa">
<img src="wierzba.jpg" alt="wierzba">
<img src="brzoza.jpg" alt="brzoza">
<img src="dab.jpg" alt="dąb">
<img src="kasztanowiec.jpg" alt="kasztanowiec">
<img src="jarzebina.jpg" alt="jarzębina">
<img src="klon.jpg" alt="klon">
<img src="magnolia.jpg" alt="magnolia">
</div>
<form id="search-form" role="search">
<input type="search" id="search" placeholder="Wyszukaj drzewo…" aria-label="Nazwa drzewa">
</form>
</aside>
<nav>
</nav>
<main>
</main>
<footer>
</footer>
</body>
</html>Przycisk „Szukaj”, którego kliknięcie powoduje wywołanie funkcji szukającej informacji o podanym drzewie (skrypt 2).
<button type="submit"> - kliknięcie wysyła formularz, a wysłanie formularza uruchomi skrypt 2. Pole i przycisk to R.2.7.
lisciaste.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Atlas drzew</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Atlas drzew</h1>
</header>
<aside>
<h3>Wybierz drzewo, aby przeczytać o nim informacje</h3>
<div id="images">
<img src="buk.jpg" alt="buk">
<img src="lipa.jpg" alt="lipa">
<img src="wierzba.jpg" alt="wierzba">
<img src="brzoza.jpg" alt="brzoza">
<img src="dab.jpg" alt="dąb">
<img src="kasztanowiec.jpg" alt="kasztanowiec">
<img src="jarzebina.jpg" alt="jarzębina">
<img src="klon.jpg" alt="klon">
<img src="magnolia.jpg" alt="magnolia">
</div>
<form id="search-form" role="search">
<input type="search" id="search" placeholder="Wyszukaj drzewo…" aria-label="Nazwa drzewa">
<button type="submit">Szukaj</button>
</form>
</aside>
<nav>
</nav>
<main>
</main>
<footer>
</footer>
</body>
</html>Zawartość bloku nawigacyjnego: Lista punktowana (nieuporządkowana) z trzema elementami, które są odsyłaczami prowadzącymi do plików: lisciaste.html – drzewa liściaste, iglaste.png – drzewa iglaste, owocowe.png – drzewa owocowe.
<ul> z trzema <li> i odsyłaczami (R.2.8, R.3.5). Napisy małymi literami jak w arkuszu - wielkie z ilustracji 2 da text-transform. Dwa odsyłacze prowadzą do obrazów PNG, które w tym arkuszu zastępują przyszłe strony.
lisciaste.html HTML zmienione: 5 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Atlas drzew</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Atlas drzew</h1>
</header>
<aside>
<h3>Wybierz drzewo, aby przeczytać o nim informacje</h3>
<div id="images">
<img src="buk.jpg" alt="buk">
<img src="lipa.jpg" alt="lipa">
<img src="wierzba.jpg" alt="wierzba">
<img src="brzoza.jpg" alt="brzoza">
<img src="dab.jpg" alt="dąb">
<img src="kasztanowiec.jpg" alt="kasztanowiec">
<img src="jarzebina.jpg" alt="jarzębina">
<img src="klon.jpg" alt="klon">
<img src="magnolia.jpg" alt="magnolia">
</div>
<form id="search-form" role="search">
<input type="search" id="search" placeholder="Wyszukaj drzewo…" aria-label="Nazwa drzewa">
<button type="submit">Szukaj</button>
</form>
</aside>
<nav>
<ul>
<li><a href="lisciaste.html">drzewa liściaste</a></li>
<li><a href="iglaste.png">drzewa iglaste</a></li>
<li><a href="owocowe.png">drzewa owocowe</a></li>
</ul>
</nav>
<main>
</main>
<footer>
</footer>
</body>
</html>Zawartość bloku głównego: Paragraf z przypisaną klasą opis. Jego zawartością jest tekst: „Witamy w naszym…”. Cały tekst znajduje się w pliku do_strony.txt (do skopiowania). Fragment tekstu „Atlasie drzew” zapisany w semantycznym znaczniku oznaczającym tekst ważny i domyślnie sformatowany jako pogrubiony – patrz ilustracja 2.
Akapit z klasą opis i tekstem z do_strony.txt (R.3.6); fragment „Atlasie drzew” razem z cudzysłowami w <strong> - na ilustracji 2 pogrubione są także cudzysłowy (R.2.9).
lisciaste.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Atlas drzew</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Atlas drzew</h1>
</header>
<aside>
<h3>Wybierz drzewo, aby przeczytać o nim informacje</h3>
<div id="images">
<img src="buk.jpg" alt="buk">
<img src="lipa.jpg" alt="lipa">
<img src="wierzba.jpg" alt="wierzba">
<img src="brzoza.jpg" alt="brzoza">
<img src="dab.jpg" alt="dąb">
<img src="kasztanowiec.jpg" alt="kasztanowiec">
<img src="jarzebina.jpg" alt="jarzębina">
<img src="klon.jpg" alt="klon">
<img src="magnolia.jpg" alt="magnolia">
</div>
<form id="search-form" role="search">
<input type="search" id="search" placeholder="Wyszukaj drzewo…" aria-label="Nazwa drzewa">
<button type="submit">Szukaj</button>
</form>
</aside>
<nav>
<ul>
<li><a href="lisciaste.html">drzewa liściaste</a></li>
<li><a href="iglaste.png">drzewa iglaste</a></li>
<li><a href="owocowe.png">drzewa owocowe</a></li>
</ul>
</nav>
<main>
<p class="opis">Witamy w naszym <strong>"Atlasie drzew"</strong>, miejscu stworzonym dla miłośników przyrody, badaczy i wszystkich, którzy chcą zgłębić tajemnice drzew. Drzewa, te majestatyczne i różnorodne elementy naszej planety, pełnią kluczową rolę w ekosystemach na całym świecie. Od pradawnych lasów deszczowych po miejskie parki, drzewa dostarczają nam nie tylko tlenu, ale także inspiracji, piękna i zrozumienia natury.</p>
</main>
<footer>
</footer>
</body>
</html>Zawartość bloku stopki: paragraf o treści „Autor: ”, dalej wstawiony numer zdającego.
Na egzaminie po „Autor:” wpisujesz swój numer zdającego (PESEL) - tu stoi imię i nazwisko autora rozwiązania. Ten akapit domyka R.2.5: <h1>, <h3>, akapit powitania i stopka.
lisciaste.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Atlas drzew</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Atlas drzew</h1>
</header>
<aside>
<h3>Wybierz drzewo, aby przeczytać o nim informacje</h3>
<div id="images">
<img src="buk.jpg" alt="buk">
<img src="lipa.jpg" alt="lipa">
<img src="wierzba.jpg" alt="wierzba">
<img src="brzoza.jpg" alt="brzoza">
<img src="dab.jpg" alt="dąb">
<img src="kasztanowiec.jpg" alt="kasztanowiec">
<img src="jarzebina.jpg" alt="jarzębina">
<img src="klon.jpg" alt="klon">
<img src="magnolia.jpg" alt="magnolia">
</div>
<form id="search-form" role="search">
<input type="search" id="search" placeholder="Wyszukaj drzewo…" aria-label="Nazwa drzewa">
<button type="submit">Szukaj</button>
</form>
</aside>
<nav>
<ul>
<li><a href="lisciaste.html">drzewa liściaste</a></li>
<li><a href="iglaste.png">drzewa iglaste</a></li>
<li><a href="owocowe.png">drzewa owocowe</a></li>
</ul>
</nav>
<main>
<p class="opis">Witamy w naszym <strong>"Atlasie drzew"</strong>, miejscu stworzonym dla miłośników przyrody, badaczy i wszystkich, którzy chcą zgłębić tajemnice drzew. Drzewa, te majestatyczne i różnorodne elementy naszej planety, pełnią kluczową rolę w ekosystemach na całym świecie. Od pradawnych lasów deszczowych po miejskie parki, drzewa dostarczają nam nie tylko tlenu, ale także inspiracji, piękna i zrozumienia natury.</p>
</main>
<footer>
<p>Autor: Bartosz Bryniarski</p>
</footer>
</body>
</html>Kroki 21-32 · po tym etapie masz 30 z 40 kryteriów (pkt)
Dla bloku nagłówkowego: tło w postaci obrazu naglowek.png, wysokość 170 px.
Na górze pliku zmienne CSS w :root: kolor Crimson pojawia się w arkuszu trzy razy (napis nagłówka, ramki zdjęć, stopka), więc dostaje nazwę --crimson - zmiana odcienia to jedna linia.
Nagłówek: wysokość 170 px i obraz lasu w tle - obraz ma dokładnie 170 px wysokości, a w szerszym oknie powtarza się w poziomie (domyślne zachowanie tła).
styl.css CSS nowy plik :root {
--crimson: Crimson;
--link: #382828;
}
header {
height: 170px;
background-image: url("naglowek.png");
}Podział zrealizowany za pomocą semantycznych znaczników języka HTML 5 tak, aby po uruchomieniu w przeglądarce układ bloków był zgodny z ilustracją 3. Dla bloku bocznego: szerokość 25%. Dla bloków nawigacyjnego i głównego: szerokość 55%.
Ciało strony staje się siatką, a ilustracja 3 jest przepisana w kodzie prawie jak rysunek:
grid-template-columns: 25% 55% 1fr - trzy kolumny: blok boczny 25%, nawigacja i blok główny 55%, a trzecia (1fr - cała reszta) zostaje pusta po prawej, jak na ilustracji 2. Klucz R.4.2 przyjmuje szerokości zapisane właśnie tak (width lub grid-template-columns lub flex),grid-template-areas - cztery wiersze, w każdym nazwy obszarów: nagłówek przez wszystkie trzy kolumny, blok boczny w dwóch wierszach obok nawigacji i bloku głównego, kropka . to pusta komórka, stopka znowu przez całą szerokość,grid-template-rows: auto 90px auto auto - drugi wiersz ma wysokość nawigacji (90 px z arkusza); bez tego wysoki blok boczny (720 px) rozepchnąłby oba swoje wiersze i nad blokiem głównym zostałaby pusta przestrzeń,grid-area.Nie ma float ani clear - stopka jest w ostatnim wierszu siatki, więc nie może wsunąć się pod inne bloki (R.3.1).
W siatce margines i dopełnienie bloku mieszczą się w kolumnie, więc blok główny wychodzi trochę węższy niż w wersji podstawowej (przy oknie 1280 px ok. 655 px zamiast 719 px). Kolumna ma dokładnie 55%, tak jak wymaga arkusz.
Nazwa obszaru w grid-template-areas musi tworzyć prostokąt: blok boczny zapisany w dwóch kolejnych wierszach w tej samej kolumnie jest poprawny, „schodki” są błędem i przeglądarka odrzuci całą właściwość.
styl.css CSS zmienione: 31 linii :root {
--crimson: Crimson;
--link: #382828;
}
header {
height: 170px;
background-image: url("naglowek.png");
}
body {
display: grid;
grid-template-columns: 25% 55% 1fr;
grid-template-rows: auto 90px auto auto;
grid-template-areas:
"header header header"
"aside nav ."
"aside main ."
"footer footer footer";
}
header {
grid-area: header;
}
aside {
grid-area: aside;
}
nav {
grid-area: nav;
}
main {
grid-area: main;
}
footer {
grid-area: footer;
}Dla bloku bocznego: szerokość 25%, wysokość 720 px, wyrównanie tekstu do środka. Dla bloku nawigacyjnego: wysokość 90 px.
Wysokości dopisane do reguł, które już przypisują obszary siatki - cały styl bloku w jednym miejscu. text-align: center w bloku bocznym wyśrodkuje nagłówek, zdjęcia (elementy liniowe) i wyszukiwarkę.
styl.css CSS zmienione: 3 linie :root {
--crimson: Crimson;
--link: #382828;
}
header {
height: 170px;
background-image: url("naglowek.png");
}
body {
display: grid;
grid-template-columns: 25% 55% 1fr;
grid-template-rows: auto 90px auto auto;
grid-template-areas:
"header header header"
"aside nav ."
"aside main ."
"footer footer footer";
}
header {
grid-area: header;
}
aside {
grid-area: aside;
height: 720px;
text-align: center;
}
nav {
grid-area: nav;
height: 90px;
}
main {
grid-area: main;
}
footer {
grid-area: footer;
}Dla bloku głównego: marginesy wewnętrzne 22 px, jedynie margines zewnętrzny lewy 3%, cień bloku bez przesunięcia o rozmyciu 25 px i kolorze Grey.
padding: 22px, margin-left: 3% (tylko lewy) i box-shadow: 0 0 25px Grey - bez przesunięcia, cień rozlewa się równo dookoła (R.4.3). Razem z wyśrodkowaniem bloku bocznego to R.4.4.
Uwaga na procenty w siatce: margines elementu siatki liczy się od szerokości jego obszaru, nie od całego body. Tu 3% to 3% kolumny 55%, czyli ok. 1,7% szerokości okna - mniej niż w wersji z float, ale nadal „jedynie margines lewy 3%”, jak chce arkusz. Blok główny nie dostaje width: w siatce rozciąga się na szerokość swojego obszaru minus margines, więc nie wyjdzie poza kolumnę.
styl.css CSS zmienione: 3 linie :root {
--crimson: Crimson;
--link: #382828;
}
header {
height: 170px;
background-image: url("naglowek.png");
}
body {
display: grid;
grid-template-columns: 25% 55% 1fr;
grid-template-rows: auto 90px auto auto;
grid-template-areas:
"header header header"
"aside nav ."
"aside main ."
"footer footer footer";
}
header {
grid-area: header;
}
aside {
grid-area: aside;
height: 720px;
text-align: center;
}
nav {
grid-area: nav;
height: 90px;
}
main {
grid-area: main;
padding: 22px;
margin-left: 3%;
box-shadow: 0 0 25px Grey;
}
footer {
grid-area: footer;
}Dla bloku obrazów w bloku bocznym i bloku głównego: wysokość 530 px, paski przewijania widoczne tylko wtedy, gdy zawartość nie mieści się w bloku.
overflow: auto - pasek tylko wtedy, gdy zawartość jest wyższa niż blok: galeria z dziewięcioma zdjęciami go dostaje (ilustracja 2), blok główny z krótkim powitaniem nie. Wysokości wszystkich bloków razem z szerokościami z siatki i 30% elementów listy (niżej) to R.4.2.
styl.css CSS zmienione: 6 linii :root {
--crimson: Crimson;
--link: #382828;
}
header {
height: 170px;
background-image: url("naglowek.png");
}
body {
display: grid;
grid-template-columns: 25% 55% 1fr;
grid-template-rows: auto 90px auto auto;
grid-template-areas:
"header header header"
"aside nav ."
"aside main ."
"footer footer footer";
}
header {
grid-area: header;
}
aside {
grid-area: aside;
height: 720px;
text-align: center;
}
nav {
grid-area: nav;
height: 90px;
}
main {
grid-area: main;
padding: 22px;
margin-left: 3%;
box-shadow: 0 0 25px Grey;
}
footer {
grid-area: footer;
}
#images,
main {
height: 530px;
overflow: auto;
}Dla bloku stopki: kolor tła Crimson.
var(--crimson). Tło stopki i obraz w nagłówku to R.4.1.
styl.css CSS zmienione: 1 linia :root {
--crimson: Crimson;
--link: #382828;
}
header {
height: 170px;
background-image: url("naglowek.png");
}
body {
display: grid;
grid-template-columns: 25% 55% 1fr;
grid-template-rows: auto 90px auto auto;
grid-template-areas:
"header header header"
"aside nav ."
"aside main ."
"footer footer footer";
}
header {
grid-area: header;
}
aside {
grid-area: aside;
height: 720px;
text-align: center;
}
nav {
grid-area: nav;
height: 90px;
}
main {
grid-area: main;
padding: 22px;
margin-left: 3%;
box-shadow: 0 0 25px Grey;
}
footer {
grid-area: footer;
background-color: var(--crimson);
}
#images,
main {
height: 530px;
overflow: auto;
}Dla klasy opis: rozmiar czcionki 150%, wysokość wiersza (interlinia) 150%, tekst wyrównany z lewej i prawej strony (wyjustowany).
line-height to wysokość wiersza, text-align: justify wyrównuje tekst do obu krawędzi (R.4.8). Tę samą klasę skrypt nada opisom drzew.
styl.css CSS zmienione: 6 linii :root {
--crimson: Crimson;
--link: #382828;
}
header {
height: 170px;
background-image: url("naglowek.png");
}
body {
display: grid;
grid-template-columns: 25% 55% 1fr;
grid-template-rows: auto 90px auto auto;
grid-template-areas:
"header header header"
"aside nav ."
"aside main ."
"footer footer footer";
}
header {
grid-area: header;
}
aside {
grid-area: aside;
height: 720px;
text-align: center;
}
nav {
grid-area: nav;
height: 90px;
}
main {
grid-area: main;
padding: 22px;
margin-left: 3%;
box-shadow: 0 0 25px Grey;
}
footer {
grid-area: footer;
background-color: var(--crimson);
}
#images,
main {
height: 530px;
overflow: auto;
}
.opis {
font-size: 150%;
line-height: 150%;
text-align: justify;
}Dla elementów listy: sposób wyświetlania liniowo-blokowy, szerokość 30%.
display: inline-block - tu nie ma wyboru: klucz R.4.5 wymienia tę wartość wprost, więc siatka czy flex na <ul> dałyby ten sam wygląd, ale nie ten punkt. Trzy pozycje po 30% mieszczą się w jednym wierszu, a punktory znikają same (wyświetla je tylko display: list-item). Przewijanie i sposób wyświetlania elementów listy to R.4.5, wymiary - R.4.2.
styl.css CSS zmienione: 5 linii :root {
--crimson: Crimson;
--link: #382828;
}
header {
height: 170px;
background-image: url("naglowek.png");
}
body {
display: grid;
grid-template-columns: 25% 55% 1fr;
grid-template-rows: auto 90px auto auto;
grid-template-areas:
"header header header"
"aside nav ."
"aside main ."
"footer footer footer";
}
header {
grid-area: header;
}
aside {
grid-area: aside;
height: 720px;
text-align: center;
}
nav {
grid-area: nav;
height: 90px;
}
main {
grid-area: main;
padding: 22px;
margin-left: 3%;
box-shadow: 0 0 25px Grey;
}
footer {
grid-area: footer;
background-color: var(--crimson);
}
#images,
main {
height: 530px;
overflow: auto;
}
.opis {
font-size: 150%;
line-height: 150%;
text-align: justify;
}
li {
display: inline-block;
width: 30%;
}Dla odsyłaczy: sposób wyświetlania blokowy, kolor czcionki #382828, rozmiar czcionki 180%, brak podkreślenia, tekst przekształcony na wielkie litery.
text-transform: uppercase pokazuje wielkie litery, choć w kodzie są małe; display: block - odsyłacz wypełnia element listy i da się go kliknąć w dowolnym miejscu (R.4.7).
styl.css CSS zmienione: 8 linii :root {
--crimson: Crimson;
--link: #382828;
}
header {
height: 170px;
background-image: url("naglowek.png");
}
body {
display: grid;
grid-template-columns: 25% 55% 1fr;
grid-template-rows: auto 90px auto auto;
grid-template-areas:
"header header header"
"aside nav ."
"aside main ."
"footer footer footer";
}
header {
grid-area: header;
}
aside {
grid-area: aside;
height: 720px;
text-align: center;
}
nav {
grid-area: nav;
height: 90px;
}
main {
grid-area: main;
padding: 22px;
margin-left: 3%;
box-shadow: 0 0 25px Grey;
}
footer {
grid-area: footer;
background-color: var(--crimson);
}
#images,
main {
height: 530px;
overflow: auto;
}
.opis {
font-size: 150%;
line-height: 150%;
text-align: justify;
}
li {
display: inline-block;
width: 30%;
}
a {
display: block;
color: var(--link);
font-size: 180%;
text-decoration: none;
text-transform: uppercase;
}Dla obrazów w bloku bocznym: obramowanie tylko prawe i dolne linią ciągłą o szerokości 4 px w kolorze Crimson, zaokrąglenie rogów 25 px.
Selektor #images img - tylko zdjęcia z galerii (R.4.9 wymaga, żeby styl nie dotyczył innych obrazów). Dwie właściwości border-right i border-bottom, bo border ustawiłby ramkę ze wszystkich stron.
Dwie linie spoza arkusza: max-width: 100% - zdjęcie nigdy nie jest szersze niż blok boczny (w wąskim oknie 25% to mniej niż 300 px i zdjęcie wystawałoby na nawigację), a box-sizing: border-box wlicza ramkę w tę szerokość. Na szerokim monitorze nic się nie zmienia.
styl.css CSS zmienione: 8 linii :root {
--crimson: Crimson;
--link: #382828;
}
header {
height: 170px;
background-image: url("naglowek.png");
}
body {
display: grid;
grid-template-columns: 25% 55% 1fr;
grid-template-rows: auto 90px auto auto;
grid-template-areas:
"header header header"
"aside nav ."
"aside main ."
"footer footer footer";
}
header {
grid-area: header;
}
aside {
grid-area: aside;
height: 720px;
text-align: center;
}
nav {
grid-area: nav;
height: 90px;
}
main {
grid-area: main;
padding: 22px;
margin-left: 3%;
box-shadow: 0 0 25px Grey;
}
footer {
grid-area: footer;
background-color: var(--crimson);
}
#images,
main {
height: 530px;
overflow: auto;
}
.opis {
font-size: 150%;
line-height: 150%;
text-align: justify;
}
li {
display: inline-block;
width: 30%;
}
a {
display: block;
color: var(--link);
font-size: 180%;
text-decoration: none;
text-transform: uppercase;
}
#images img {
max-width: 100%;
box-sizing: border-box;
border-right: 4px solid var(--crimson);
border-bottom: 4px solid var(--crimson);
border-radius: 25px;
}Gdy kursor znajdzie się na obrazie w bloku bocznym kolor obramowania obrazu zmienia się na Teal.
border-color zmienia tylko kolor - grubość i styl zostają, a krawędzie o grubości 0 nadal są niewidoczne (R.4.10).
styl.css CSS zmienione: 4 linie :root {
--crimson: Crimson;
--link: #382828;
}
header {
height: 170px;
background-image: url("naglowek.png");
}
body {
display: grid;
grid-template-columns: 25% 55% 1fr;
grid-template-rows: auto 90px auto auto;
grid-template-areas:
"header header header"
"aside nav ."
"aside main ."
"footer footer footer";
}
header {
grid-area: header;
}
aside {
grid-area: aside;
height: 720px;
text-align: center;
}
nav {
grid-area: nav;
height: 90px;
}
main {
grid-area: main;
padding: 22px;
margin-left: 3%;
box-shadow: 0 0 25px Grey;
}
footer {
grid-area: footer;
background-color: var(--crimson);
}
#images,
main {
height: 530px;
overflow: auto;
}
.opis {
font-size: 150%;
line-height: 150%;
text-align: justify;
}
li {
display: inline-block;
width: 30%;
}
a {
display: block;
color: var(--link);
font-size: 180%;
text-decoration: none;
text-transform: uppercase;
}
#images img {
max-width: 100%;
box-sizing: border-box;
border-right: 4px solid var(--crimson);
border-bottom: 4px solid var(--crimson);
border-radius: 25px;
}
#images img:hover {
border-color: Teal;
}Dla selektora nagłówka pierwszego stopnia: krój czcionki Chiller, w przypadku braku fantasy, kolor czcionki Crimson, rozmiar czcionki 152 px, odstępy między literami 30 px, brak marginesu zewnętrznego.
Selektor znacznika h1 (uwaga pod listą stylów). margin: 0 usuwa domyślny margines nagłówka - przy 152 px to ok. 100 px nad napisem i napis wypadłby z nagłówka o wysokości 170 px (R.4.6).
styl.css CSS zmienione: 8 linii :root {
--crimson: Crimson;
--link: #382828;
}
header {
height: 170px;
background-image: url("naglowek.png");
}
body {
display: grid;
grid-template-columns: 25% 55% 1fr;
grid-template-rows: auto 90px auto auto;
grid-template-areas:
"header header header"
"aside nav ."
"aside main ."
"footer footer footer";
}
header {
grid-area: header;
}
aside {
grid-area: aside;
height: 720px;
text-align: center;
}
nav {
grid-area: nav;
height: 90px;
}
main {
grid-area: main;
padding: 22px;
margin-left: 3%;
box-shadow: 0 0 25px Grey;
}
footer {
grid-area: footer;
background-color: var(--crimson);
}
#images,
main {
height: 530px;
overflow: auto;
}
.opis {
font-size: 150%;
line-height: 150%;
text-align: justify;
}
li {
display: inline-block;
width: 30%;
}
a {
display: block;
color: var(--link);
font-size: 180%;
text-decoration: none;
text-transform: uppercase;
}
#images img {
max-width: 100%;
box-sizing: border-box;
border-right: 4px solid var(--crimson);
border-bottom: 4px solid var(--crimson);
border-radius: 25px;
}
#images img:hover {
border-color: Teal;
}
h1 {
margin: 0;
font-family: Chiller, fantasy;
font-size: 152px;
letter-spacing: 30px;
color: var(--crimson);
}Kroki 33-41 · po tym etapie masz 40 z 40 kryteriów (pkt)
W pliku do_strony.txt znajdują się zawartości tablic do wykorzystania w kodzie JavaScript. Pierwsza tablica zawiera nazwy drzew, druga tablica zawiera ich opisy. Dana nazwa drzewa oraz jego opis są umieszczone w tablicach pod tym samym indeksem.
Skrypt w osobnym pliku skrypt.js, podpięty w <head> z defer - wykona się po wczytaniu całego HTML-u.
const treeNames, const treeDescriptions - tablice skopiowane z do_strony.txt (nazwy mówią, co przechowują - R.5.2). const, bo zmienna zawsze wskazuje tę samą tablicę. Tablice są „równoległe”: nazwa i opis jednego drzewa mają ten sam indeks,const main - blok główny, do którego oba skrypty będą wpisywać; szukany raz, a nie przy każdym kliknięciu.lisciaste.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Atlas drzew</title>
<link rel="stylesheet" href="styl.css">
<script src="skrypt.js" defer></script>
</head>
<body>
<header>
<h1>Atlas drzew</h1>
</header>
<aside>
<h3>Wybierz drzewo, aby przeczytać o nim informacje</h3>
<div id="images">
<img src="buk.jpg" alt="buk">
<img src="lipa.jpg" alt="lipa">
<img src="wierzba.jpg" alt="wierzba">
<img src="brzoza.jpg" alt="brzoza">
<img src="dab.jpg" alt="dąb">
<img src="kasztanowiec.jpg" alt="kasztanowiec">
<img src="jarzebina.jpg" alt="jarzębina">
<img src="klon.jpg" alt="klon">
<img src="magnolia.jpg" alt="magnolia">
</div>
<form id="search-form" role="search">
<input type="search" id="search" placeholder="Wyszukaj drzewo…" aria-label="Nazwa drzewa">
<button type="submit">Szukaj</button>
</form>
</aside>
<nav>
<ul>
<li><a href="lisciaste.html">drzewa liściaste</a></li>
<li><a href="iglaste.png">drzewa iglaste</a></li>
<li><a href="owocowe.png">drzewa owocowe</a></li>
</ul>
</nav>
<main>
<p class="opis">Witamy w naszym <strong>"Atlasie drzew"</strong>, miejscu stworzonym dla miłośników przyrody, badaczy i wszystkich, którzy chcą zgłębić tajemnice drzew. Drzewa, te majestatyczne i różnorodne elementy naszej planety, pełnią kluczową rolę w ekosystemach na całym świecie. Od pradawnych lasów deszczowych po miejskie parki, drzewa dostarczają nam nie tylko tlenu, ale także inspiracji, piękna i zrozumienia natury.</p>
</main>
<footer>
<p>Autor: Bartosz Bryniarski</p>
</footer>
</body>
</html>skrypt.js JavaScript nowy plik const treeNames = ["buk", "lipa", "wierzba", "brzoza", "dąb", "kasztanowiec", "jarzębina", "klon", "magnolia"];
const treeDescriptions = [
"Duże drzewo liściaste z gładką, szarą korą i gęstą, rozłożystą koroną. Ma błyszczące, ciemnozielone liście, które jesienią przebarwiają się na złociste lub czerwonawe odcienie. Buk kwitnie wiosną, a jego owoce to jadalne orzeszki zwane bukwią, zamknięte w kolczastej okrywie. Rośnie na żyznych, przepuszczalnych glebach w klimacie umiarkowanym i jest ważnym elementem lasów liściastych. Drewno buka jest twarde i wytrzymałe, wykorzystywane w meblarstwie i stolarstwie.",
"drzewo liściaste o szerokiej, gęstej koronie i gładkiej, szarobrązowej korze, która z wiekiem staje się spękana. Ma duże, sercowate liście o piłkowanych brzegach. Kwiaty lipy są małe, żółtawobiałe, zebrane w wonne, zwisające baldachy, które kwitną na przełomie czerwca i lipca. Owoce to niewielkie orzeszki z trwałymi skrzydełkami. Lipa preferuje żyzne, wilgotne gleby i rośnie w klimacie umiarkowanym. Jest ceniona za drewno używane w rzeźbiarstwie oraz kwiaty stosowane w ziołolecznictwie, szczególnie w formie naparów na przeziębienia.",
"Drzewo liściaste z długimi, zwisającymi gałęziami i elastycznymi pędami. Ma wąskie, lancetowate liście, które są zazwyczaj zielone na górnej stronie i srebrzyste lub niebieskawe na spodzie. Wierzba kwitnie wczesną wiosną, a jej kwiaty tworzą kotki. Rośnie na wilgotnych, często podmokłych terenach, w pobliżu rzek, jezior i innych zbiorników wodnych. Drewno wierzby jest lekkie i elastyczne, używane do produkcji koszy, mebli oraz w wikliniarstwie. Wierzba jest także ceniona w medycynie ludowej, a kora wierzby białej jest źródłem salicyny, stosowanej jako naturalny środek przeciwbólowy i przeciwgorączkowy.",
"Drzewo liściaste o charakterystycznej białej, łuszczącej się korze. Ma delikatne, jasnozielone liście o trójkątnym lub romboidalnym kształcie, z piłkowanymi brzegami. Brzoza kwitnie wiosną, a jej kwiaty tworzą zwisające, żółtawe kotki. Owoce to drobne orzeszki z cienkimi skrzydełkami. Drzewo to rośnie na różnych typach gleb, często w lasach mieszanych i na obrzeżach pól, dobrze znosi chłodny klimat. Drewno brzozy jest twarde, ale łatwe w obróbce, używane w stolarstwie, do wyrobu mebli i sklejki. Brzoza jest również ceniona za sok brzozowy, który ma zastosowanie w ziołolecznictwie i kosmetyce.",
"Majestatyczne drzewo liściaste o szerokiej, rozłożystej koronie i grubej, spękanej korze. Ma duże, klapowane liście, które jesienią przebarwiają się na złote i brązowe odcienie. Dąb kwitnie wiosną, a jego kwiaty są niepozorne, zebrane w kotki. Owoce dębu to żołędzie, które są ważnym źródłem pożywienia dla wielu zwierząt. Dąb rośnie na żyznych, dobrze przepuszczalnych glebach i jest długowieczny, mogąc żyć nawet kilkaset lat. Drewno dębu jest twarde, wytrzymałe i cenione w meblarstwie, stolarstwie oraz do produkcji beczek. Dąb symbolizuje siłę, wytrzymałość i długowieczność.",
"Drzewo o dużych, skrętoległych liściach złożonych z pięciu do siedmiu lancetowatych lub eliptycznych listków. Kwiaty kasztanowca są okazałe, zebrane w stożkowate kłosy i występują zazwyczaj w kolorach białym, różowym lub czerwonym. Owoce kasztanowca to duże, skorupiaste torebki zawierające jadalne orzechy, które są popularne w kuchni i ozdobnych zastosowaniach. Kasztanowiec rośnie w umiarkowanym klimacie na żyznych, dobrze przepuszczalnych glebach.",
"Drzewo lub krzew z rodziny różowatych (Rosaceae). Charakteryzuje się złożonymi liśćmi składającymi się z 9-15 lancetowatych listków o piłkowanych brzegach. Kwiaty są białe lub kremowe, zebrane w baldachy lub wiechy, pojawiające się wiosną lub wczesnym latem. Owoce jarzębiny to czerwone lub pomarańczowe jagody, które są atrakcyjne dla ptaków i czasem używane do wyrobu dżemów i napojów. Jarzębina rośnie na różnych typach gleb i jest popularna jako roślina ozdobna ze względu na swoje piękne kwiaty i owoce.",
"Charakteryzuje się dłoniastymi liśćmi o pięciu łatkach, często z wyraźnymi wcięciami. Kwiaty klonu są zazwyczaj niepozorne, zebrane w baldachy lub grona, pojawiające się przed rozwojem liści wczesną wiosną. Owoce klonu to skrzydlaki, czyli nasiona zamknięte w długich, błoniastych osnówkach ułatwiających rozprzestrzenianie przez wiatr. Klony są szeroko rozpowszechnione na całym świecie i są cenione zarówno jako rośliny ozdobne, jak i źródło drewna.",
"Magnolia to drzewo lub krzew o dużych, skórzastych liściach i pięknych, często pachnących kwiatach. Kwiaty magnolii mogą być białe, różowe lub fioletowe, czasem pełne, a czasem w baldachach. Owoce to czerwone lub różowe jagody. Magnolie są cenione za swój estetyczny wygląd i aromatyczne kwiaty, często stosowane w ogrodach i jako rośliny ozdobne."
];
const main = document.querySelector('main');Skrypt 1: Wykonywany po kliknięciu na obraz w bloku bocznym. Usuwa zawartość bloku głównego.
#images, a event.target to kliknięty element. Warunek tagName === 'IMG' pomija kliknięcia w puste miejsce między zdjęciami (R.3.3),event.target.alt - tekst alternatywny zdjęcia, ten sam co w tablicy nazw,showTree(name) szuka indeksu drzewa (indexOf), a main.replaceChildren() bez argumentów usuwa całą zawartość bloku głównego (R.5.3).Kliknij zdjęcie w podglądzie - powitanie znika.
main.innerHTML = "" też czyści blok; klucz uznaje za błąd tylko dopisywanie przez innerHTML += (R.5.3 - R.5.6).
skrypt.js JavaScript zmienione: 11 linii const treeNames = ["buk", "lipa", "wierzba", "brzoza", "dąb", "kasztanowiec", "jarzębina", "klon", "magnolia"];
const treeDescriptions = [
"Duże drzewo liściaste z gładką, szarą korą i gęstą, rozłożystą koroną. Ma błyszczące, ciemnozielone liście, które jesienią przebarwiają się na złociste lub czerwonawe odcienie. Buk kwitnie wiosną, a jego owoce to jadalne orzeszki zwane bukwią, zamknięte w kolczastej okrywie. Rośnie na żyznych, przepuszczalnych glebach w klimacie umiarkowanym i jest ważnym elementem lasów liściastych. Drewno buka jest twarde i wytrzymałe, wykorzystywane w meblarstwie i stolarstwie.",
"drzewo liściaste o szerokiej, gęstej koronie i gładkiej, szarobrązowej korze, która z wiekiem staje się spękana. Ma duże, sercowate liście o piłkowanych brzegach. Kwiaty lipy są małe, żółtawobiałe, zebrane w wonne, zwisające baldachy, które kwitną na przełomie czerwca i lipca. Owoce to niewielkie orzeszki z trwałymi skrzydełkami. Lipa preferuje żyzne, wilgotne gleby i rośnie w klimacie umiarkowanym. Jest ceniona za drewno używane w rzeźbiarstwie oraz kwiaty stosowane w ziołolecznictwie, szczególnie w formie naparów na przeziębienia.",
"Drzewo liściaste z długimi, zwisającymi gałęziami i elastycznymi pędami. Ma wąskie, lancetowate liście, które są zazwyczaj zielone na górnej stronie i srebrzyste lub niebieskawe na spodzie. Wierzba kwitnie wczesną wiosną, a jej kwiaty tworzą kotki. Rośnie na wilgotnych, często podmokłych terenach, w pobliżu rzek, jezior i innych zbiorników wodnych. Drewno wierzby jest lekkie i elastyczne, używane do produkcji koszy, mebli oraz w wikliniarstwie. Wierzba jest także ceniona w medycynie ludowej, a kora wierzby białej jest źródłem salicyny, stosowanej jako naturalny środek przeciwbólowy i przeciwgorączkowy.",
"Drzewo liściaste o charakterystycznej białej, łuszczącej się korze. Ma delikatne, jasnozielone liście o trójkątnym lub romboidalnym kształcie, z piłkowanymi brzegami. Brzoza kwitnie wiosną, a jej kwiaty tworzą zwisające, żółtawe kotki. Owoce to drobne orzeszki z cienkimi skrzydełkami. Drzewo to rośnie na różnych typach gleb, często w lasach mieszanych i na obrzeżach pól, dobrze znosi chłodny klimat. Drewno brzozy jest twarde, ale łatwe w obróbce, używane w stolarstwie, do wyrobu mebli i sklejki. Brzoza jest również ceniona za sok brzozowy, który ma zastosowanie w ziołolecznictwie i kosmetyce.",
"Majestatyczne drzewo liściaste o szerokiej, rozłożystej koronie i grubej, spękanej korze. Ma duże, klapowane liście, które jesienią przebarwiają się na złote i brązowe odcienie. Dąb kwitnie wiosną, a jego kwiaty są niepozorne, zebrane w kotki. Owoce dębu to żołędzie, które są ważnym źródłem pożywienia dla wielu zwierząt. Dąb rośnie na żyznych, dobrze przepuszczalnych glebach i jest długowieczny, mogąc żyć nawet kilkaset lat. Drewno dębu jest twarde, wytrzymałe i cenione w meblarstwie, stolarstwie oraz do produkcji beczek. Dąb symbolizuje siłę, wytrzymałość i długowieczność.",
"Drzewo o dużych, skrętoległych liściach złożonych z pięciu do siedmiu lancetowatych lub eliptycznych listków. Kwiaty kasztanowca są okazałe, zebrane w stożkowate kłosy i występują zazwyczaj w kolorach białym, różowym lub czerwonym. Owoce kasztanowca to duże, skorupiaste torebki zawierające jadalne orzechy, które są popularne w kuchni i ozdobnych zastosowaniach. Kasztanowiec rośnie w umiarkowanym klimacie na żyznych, dobrze przepuszczalnych glebach.",
"Drzewo lub krzew z rodziny różowatych (Rosaceae). Charakteryzuje się złożonymi liśćmi składającymi się z 9-15 lancetowatych listków o piłkowanych brzegach. Kwiaty są białe lub kremowe, zebrane w baldachy lub wiechy, pojawiające się wiosną lub wczesnym latem. Owoce jarzębiny to czerwone lub pomarańczowe jagody, które są atrakcyjne dla ptaków i czasem używane do wyrobu dżemów i napojów. Jarzębina rośnie na różnych typach gleb i jest popularna jako roślina ozdobna ze względu na swoje piękne kwiaty i owoce.",
"Charakteryzuje się dłoniastymi liśćmi o pięciu łatkach, często z wyraźnymi wcięciami. Kwiaty klonu są zazwyczaj niepozorne, zebrane w baldachy lub grona, pojawiające się przed rozwojem liści wczesną wiosną. Owoce klonu to skrzydlaki, czyli nasiona zamknięte w długich, błoniastych osnówkach ułatwiających rozprzestrzenianie przez wiatr. Klony są szeroko rozpowszechnione na całym świecie i są cenione zarówno jako rośliny ozdobne, jak i źródło drewna.",
"Magnolia to drzewo lub krzew o dużych, skórzastych liściach i pięknych, często pachnących kwiatach. Kwiaty magnolii mogą być białe, różowe lub fioletowe, czasem pełne, a czasem w baldachach. Owoce to czerwone lub różowe jagody. Magnolie są cenione za swój estetyczny wygląd i aromatyczne kwiaty, często stosowane w ogrodach i jako rośliny ozdobne."
];
const main = document.querySelector('main');
function showTree(name) {
const index = treeNames.indexOf(name);
main.replaceChildren();
}
document.querySelector('#images').addEventListener('click', (event) => {
if (event.target.tagName === 'IMG') {
showTree(event.target.alt);
}
});Tworzy elementy i dodaje je do bloku głównego (ilustracja 4): Element DOM dla nagłówka drugiego stopnia z nazwą drzewa, którego obraz został kliknięty.
document.createElement('h2') (tabela 3) i textContent - zwykły tekst, bez interpretowania znaczników (R.5.4). Nagłówek jest gotowy, ale jeszcze nie na stronie - trafi do bloku razem z opisem.
skrypt.js JavaScript zmienione: 3 linie const treeNames = ["buk", "lipa", "wierzba", "brzoza", "dąb", "kasztanowiec", "jarzębina", "klon", "magnolia"];
const treeDescriptions = [
"Duże drzewo liściaste z gładką, szarą korą i gęstą, rozłożystą koroną. Ma błyszczące, ciemnozielone liście, które jesienią przebarwiają się na złociste lub czerwonawe odcienie. Buk kwitnie wiosną, a jego owoce to jadalne orzeszki zwane bukwią, zamknięte w kolczastej okrywie. Rośnie na żyznych, przepuszczalnych glebach w klimacie umiarkowanym i jest ważnym elementem lasów liściastych. Drewno buka jest twarde i wytrzymałe, wykorzystywane w meblarstwie i stolarstwie.",
"drzewo liściaste o szerokiej, gęstej koronie i gładkiej, szarobrązowej korze, która z wiekiem staje się spękana. Ma duże, sercowate liście o piłkowanych brzegach. Kwiaty lipy są małe, żółtawobiałe, zebrane w wonne, zwisające baldachy, które kwitną na przełomie czerwca i lipca. Owoce to niewielkie orzeszki z trwałymi skrzydełkami. Lipa preferuje żyzne, wilgotne gleby i rośnie w klimacie umiarkowanym. Jest ceniona za drewno używane w rzeźbiarstwie oraz kwiaty stosowane w ziołolecznictwie, szczególnie w formie naparów na przeziębienia.",
"Drzewo liściaste z długimi, zwisającymi gałęziami i elastycznymi pędami. Ma wąskie, lancetowate liście, które są zazwyczaj zielone na górnej stronie i srebrzyste lub niebieskawe na spodzie. Wierzba kwitnie wczesną wiosną, a jej kwiaty tworzą kotki. Rośnie na wilgotnych, często podmokłych terenach, w pobliżu rzek, jezior i innych zbiorników wodnych. Drewno wierzby jest lekkie i elastyczne, używane do produkcji koszy, mebli oraz w wikliniarstwie. Wierzba jest także ceniona w medycynie ludowej, a kora wierzby białej jest źródłem salicyny, stosowanej jako naturalny środek przeciwbólowy i przeciwgorączkowy.",
"Drzewo liściaste o charakterystycznej białej, łuszczącej się korze. Ma delikatne, jasnozielone liście o trójkątnym lub romboidalnym kształcie, z piłkowanymi brzegami. Brzoza kwitnie wiosną, a jej kwiaty tworzą zwisające, żółtawe kotki. Owoce to drobne orzeszki z cienkimi skrzydełkami. Drzewo to rośnie na różnych typach gleb, często w lasach mieszanych i na obrzeżach pól, dobrze znosi chłodny klimat. Drewno brzozy jest twarde, ale łatwe w obróbce, używane w stolarstwie, do wyrobu mebli i sklejki. Brzoza jest również ceniona za sok brzozowy, który ma zastosowanie w ziołolecznictwie i kosmetyce.",
"Majestatyczne drzewo liściaste o szerokiej, rozłożystej koronie i grubej, spękanej korze. Ma duże, klapowane liście, które jesienią przebarwiają się na złote i brązowe odcienie. Dąb kwitnie wiosną, a jego kwiaty są niepozorne, zebrane w kotki. Owoce dębu to żołędzie, które są ważnym źródłem pożywienia dla wielu zwierząt. Dąb rośnie na żyznych, dobrze przepuszczalnych glebach i jest długowieczny, mogąc żyć nawet kilkaset lat. Drewno dębu jest twarde, wytrzymałe i cenione w meblarstwie, stolarstwie oraz do produkcji beczek. Dąb symbolizuje siłę, wytrzymałość i długowieczność.",
"Drzewo o dużych, skrętoległych liściach złożonych z pięciu do siedmiu lancetowatych lub eliptycznych listków. Kwiaty kasztanowca są okazałe, zebrane w stożkowate kłosy i występują zazwyczaj w kolorach białym, różowym lub czerwonym. Owoce kasztanowca to duże, skorupiaste torebki zawierające jadalne orzechy, które są popularne w kuchni i ozdobnych zastosowaniach. Kasztanowiec rośnie w umiarkowanym klimacie na żyznych, dobrze przepuszczalnych glebach.",
"Drzewo lub krzew z rodziny różowatych (Rosaceae). Charakteryzuje się złożonymi liśćmi składającymi się z 9-15 lancetowatych listków o piłkowanych brzegach. Kwiaty są białe lub kremowe, zebrane w baldachy lub wiechy, pojawiające się wiosną lub wczesnym latem. Owoce jarzębiny to czerwone lub pomarańczowe jagody, które są atrakcyjne dla ptaków i czasem używane do wyrobu dżemów i napojów. Jarzębina rośnie na różnych typach gleb i jest popularna jako roślina ozdobna ze względu na swoje piękne kwiaty i owoce.",
"Charakteryzuje się dłoniastymi liśćmi o pięciu łatkach, często z wyraźnymi wcięciami. Kwiaty klonu są zazwyczaj niepozorne, zebrane w baldachy lub grona, pojawiające się przed rozwojem liści wczesną wiosną. Owoce klonu to skrzydlaki, czyli nasiona zamknięte w długich, błoniastych osnówkach ułatwiających rozprzestrzenianie przez wiatr. Klony są szeroko rozpowszechnione na całym świecie i są cenione zarówno jako rośliny ozdobne, jak i źródło drewna.",
"Magnolia to drzewo lub krzew o dużych, skórzastych liściach i pięknych, często pachnących kwiatach. Kwiaty magnolii mogą być białe, różowe lub fioletowe, czasem pełne, a czasem w baldachach. Owoce to czerwone lub różowe jagody. Magnolie są cenione za swój estetyczny wygląd i aromatyczne kwiaty, często stosowane w ogrodach i jako rośliny ozdobne."
];
const main = document.querySelector('main');
function showTree(name) {
const index = treeNames.indexOf(name);
main.replaceChildren();
const heading = document.createElement('h2');
heading.textContent = treeNames[index];
}
document.querySelector('#images').addEventListener('click', (event) => {
if (event.target.tagName === 'IMG') {
showTree(event.target.alt);
}
});Element DOM dla paragrafu z tekstem opisującym drzewo, którego obraz został kliknięty. Do tego elementu dodaje klasę opis.
Akapit z opisem spod tego samego indeksu w drugiej tablicy i classList.add('opis') (tabela 3) - akapit dostaje styl z reguły .opis, jak powitanie (R.5.5).
skrypt.js JavaScript zmienione: 4 linie const treeNames = ["buk", "lipa", "wierzba", "brzoza", "dąb", "kasztanowiec", "jarzębina", "klon", "magnolia"];
const treeDescriptions = [
"Duże drzewo liściaste z gładką, szarą korą i gęstą, rozłożystą koroną. Ma błyszczące, ciemnozielone liście, które jesienią przebarwiają się na złociste lub czerwonawe odcienie. Buk kwitnie wiosną, a jego owoce to jadalne orzeszki zwane bukwią, zamknięte w kolczastej okrywie. Rośnie na żyznych, przepuszczalnych glebach w klimacie umiarkowanym i jest ważnym elementem lasów liściastych. Drewno buka jest twarde i wytrzymałe, wykorzystywane w meblarstwie i stolarstwie.",
"drzewo liściaste o szerokiej, gęstej koronie i gładkiej, szarobrązowej korze, która z wiekiem staje się spękana. Ma duże, sercowate liście o piłkowanych brzegach. Kwiaty lipy są małe, żółtawobiałe, zebrane w wonne, zwisające baldachy, które kwitną na przełomie czerwca i lipca. Owoce to niewielkie orzeszki z trwałymi skrzydełkami. Lipa preferuje żyzne, wilgotne gleby i rośnie w klimacie umiarkowanym. Jest ceniona za drewno używane w rzeźbiarstwie oraz kwiaty stosowane w ziołolecznictwie, szczególnie w formie naparów na przeziębienia.",
"Drzewo liściaste z długimi, zwisającymi gałęziami i elastycznymi pędami. Ma wąskie, lancetowate liście, które są zazwyczaj zielone na górnej stronie i srebrzyste lub niebieskawe na spodzie. Wierzba kwitnie wczesną wiosną, a jej kwiaty tworzą kotki. Rośnie na wilgotnych, często podmokłych terenach, w pobliżu rzek, jezior i innych zbiorników wodnych. Drewno wierzby jest lekkie i elastyczne, używane do produkcji koszy, mebli oraz w wikliniarstwie. Wierzba jest także ceniona w medycynie ludowej, a kora wierzby białej jest źródłem salicyny, stosowanej jako naturalny środek przeciwbólowy i przeciwgorączkowy.",
"Drzewo liściaste o charakterystycznej białej, łuszczącej się korze. Ma delikatne, jasnozielone liście o trójkątnym lub romboidalnym kształcie, z piłkowanymi brzegami. Brzoza kwitnie wiosną, a jej kwiaty tworzą zwisające, żółtawe kotki. Owoce to drobne orzeszki z cienkimi skrzydełkami. Drzewo to rośnie na różnych typach gleb, często w lasach mieszanych i na obrzeżach pól, dobrze znosi chłodny klimat. Drewno brzozy jest twarde, ale łatwe w obróbce, używane w stolarstwie, do wyrobu mebli i sklejki. Brzoza jest również ceniona za sok brzozowy, który ma zastosowanie w ziołolecznictwie i kosmetyce.",
"Majestatyczne drzewo liściaste o szerokiej, rozłożystej koronie i grubej, spękanej korze. Ma duże, klapowane liście, które jesienią przebarwiają się na złote i brązowe odcienie. Dąb kwitnie wiosną, a jego kwiaty są niepozorne, zebrane w kotki. Owoce dębu to żołędzie, które są ważnym źródłem pożywienia dla wielu zwierząt. Dąb rośnie na żyznych, dobrze przepuszczalnych glebach i jest długowieczny, mogąc żyć nawet kilkaset lat. Drewno dębu jest twarde, wytrzymałe i cenione w meblarstwie, stolarstwie oraz do produkcji beczek. Dąb symbolizuje siłę, wytrzymałość i długowieczność.",
"Drzewo o dużych, skrętoległych liściach złożonych z pięciu do siedmiu lancetowatych lub eliptycznych listków. Kwiaty kasztanowca są okazałe, zebrane w stożkowate kłosy i występują zazwyczaj w kolorach białym, różowym lub czerwonym. Owoce kasztanowca to duże, skorupiaste torebki zawierające jadalne orzechy, które są popularne w kuchni i ozdobnych zastosowaniach. Kasztanowiec rośnie w umiarkowanym klimacie na żyznych, dobrze przepuszczalnych glebach.",
"Drzewo lub krzew z rodziny różowatych (Rosaceae). Charakteryzuje się złożonymi liśćmi składającymi się z 9-15 lancetowatych listków o piłkowanych brzegach. Kwiaty są białe lub kremowe, zebrane w baldachy lub wiechy, pojawiające się wiosną lub wczesnym latem. Owoce jarzębiny to czerwone lub pomarańczowe jagody, które są atrakcyjne dla ptaków i czasem używane do wyrobu dżemów i napojów. Jarzębina rośnie na różnych typach gleb i jest popularna jako roślina ozdobna ze względu na swoje piękne kwiaty i owoce.",
"Charakteryzuje się dłoniastymi liśćmi o pięciu łatkach, często z wyraźnymi wcięciami. Kwiaty klonu są zazwyczaj niepozorne, zebrane w baldachy lub grona, pojawiające się przed rozwojem liści wczesną wiosną. Owoce klonu to skrzydlaki, czyli nasiona zamknięte w długich, błoniastych osnówkach ułatwiających rozprzestrzenianie przez wiatr. Klony są szeroko rozpowszechnione na całym świecie i są cenione zarówno jako rośliny ozdobne, jak i źródło drewna.",
"Magnolia to drzewo lub krzew o dużych, skórzastych liściach i pięknych, często pachnących kwiatach. Kwiaty magnolii mogą być białe, różowe lub fioletowe, czasem pełne, a czasem w baldachach. Owoce to czerwone lub różowe jagody. Magnolie są cenione za swój estetyczny wygląd i aromatyczne kwiaty, często stosowane w ogrodach i jako rośliny ozdobne."
];
const main = document.querySelector('main');
function showTree(name) {
const index = treeNames.indexOf(name);
main.replaceChildren();
const heading = document.createElement('h2');
heading.textContent = treeNames[index];
const description = document.createElement('p');
description.textContent = treeDescriptions[index];
description.classList.add('opis');
}
document.querySelector('#images').addEventListener('click', (event) => {
if (event.target.tagName === 'IMG') {
showTree(event.target.alt);
}
});Tworzy elementy i dodaje je do bloku głównego (ilustracja 4).
main.append(heading, description) dokłada oba elementy naraz, w podanej kolejności (appendChild przyjmuje tylko jeden). Kliknij buk w podglądzie - blok główny wygląda jak ilustracja 4 (R.5.6).
skrypt.js JavaScript zmienione: 2 linie const treeNames = ["buk", "lipa", "wierzba", "brzoza", "dąb", "kasztanowiec", "jarzębina", "klon", "magnolia"];
const treeDescriptions = [
"Duże drzewo liściaste z gładką, szarą korą i gęstą, rozłożystą koroną. Ma błyszczące, ciemnozielone liście, które jesienią przebarwiają się na złociste lub czerwonawe odcienie. Buk kwitnie wiosną, a jego owoce to jadalne orzeszki zwane bukwią, zamknięte w kolczastej okrywie. Rośnie na żyznych, przepuszczalnych glebach w klimacie umiarkowanym i jest ważnym elementem lasów liściastych. Drewno buka jest twarde i wytrzymałe, wykorzystywane w meblarstwie i stolarstwie.",
"drzewo liściaste o szerokiej, gęstej koronie i gładkiej, szarobrązowej korze, która z wiekiem staje się spękana. Ma duże, sercowate liście o piłkowanych brzegach. Kwiaty lipy są małe, żółtawobiałe, zebrane w wonne, zwisające baldachy, które kwitną na przełomie czerwca i lipca. Owoce to niewielkie orzeszki z trwałymi skrzydełkami. Lipa preferuje żyzne, wilgotne gleby i rośnie w klimacie umiarkowanym. Jest ceniona za drewno używane w rzeźbiarstwie oraz kwiaty stosowane w ziołolecznictwie, szczególnie w formie naparów na przeziębienia.",
"Drzewo liściaste z długimi, zwisającymi gałęziami i elastycznymi pędami. Ma wąskie, lancetowate liście, które są zazwyczaj zielone na górnej stronie i srebrzyste lub niebieskawe na spodzie. Wierzba kwitnie wczesną wiosną, a jej kwiaty tworzą kotki. Rośnie na wilgotnych, często podmokłych terenach, w pobliżu rzek, jezior i innych zbiorników wodnych. Drewno wierzby jest lekkie i elastyczne, używane do produkcji koszy, mebli oraz w wikliniarstwie. Wierzba jest także ceniona w medycynie ludowej, a kora wierzby białej jest źródłem salicyny, stosowanej jako naturalny środek przeciwbólowy i przeciwgorączkowy.",
"Drzewo liściaste o charakterystycznej białej, łuszczącej się korze. Ma delikatne, jasnozielone liście o trójkątnym lub romboidalnym kształcie, z piłkowanymi brzegami. Brzoza kwitnie wiosną, a jej kwiaty tworzą zwisające, żółtawe kotki. Owoce to drobne orzeszki z cienkimi skrzydełkami. Drzewo to rośnie na różnych typach gleb, często w lasach mieszanych i na obrzeżach pól, dobrze znosi chłodny klimat. Drewno brzozy jest twarde, ale łatwe w obróbce, używane w stolarstwie, do wyrobu mebli i sklejki. Brzoza jest również ceniona za sok brzozowy, który ma zastosowanie w ziołolecznictwie i kosmetyce.",
"Majestatyczne drzewo liściaste o szerokiej, rozłożystej koronie i grubej, spękanej korze. Ma duże, klapowane liście, które jesienią przebarwiają się na złote i brązowe odcienie. Dąb kwitnie wiosną, a jego kwiaty są niepozorne, zebrane w kotki. Owoce dębu to żołędzie, które są ważnym źródłem pożywienia dla wielu zwierząt. Dąb rośnie na żyznych, dobrze przepuszczalnych glebach i jest długowieczny, mogąc żyć nawet kilkaset lat. Drewno dębu jest twarde, wytrzymałe i cenione w meblarstwie, stolarstwie oraz do produkcji beczek. Dąb symbolizuje siłę, wytrzymałość i długowieczność.",
"Drzewo o dużych, skrętoległych liściach złożonych z pięciu do siedmiu lancetowatych lub eliptycznych listków. Kwiaty kasztanowca są okazałe, zebrane w stożkowate kłosy i występują zazwyczaj w kolorach białym, różowym lub czerwonym. Owoce kasztanowca to duże, skorupiaste torebki zawierające jadalne orzechy, które są popularne w kuchni i ozdobnych zastosowaniach. Kasztanowiec rośnie w umiarkowanym klimacie na żyznych, dobrze przepuszczalnych glebach.",
"Drzewo lub krzew z rodziny różowatych (Rosaceae). Charakteryzuje się złożonymi liśćmi składającymi się z 9-15 lancetowatych listków o piłkowanych brzegach. Kwiaty są białe lub kremowe, zebrane w baldachy lub wiechy, pojawiające się wiosną lub wczesnym latem. Owoce jarzębiny to czerwone lub pomarańczowe jagody, które są atrakcyjne dla ptaków i czasem używane do wyrobu dżemów i napojów. Jarzębina rośnie na różnych typach gleb i jest popularna jako roślina ozdobna ze względu na swoje piękne kwiaty i owoce.",
"Charakteryzuje się dłoniastymi liśćmi o pięciu łatkach, często z wyraźnymi wcięciami. Kwiaty klonu są zazwyczaj niepozorne, zebrane w baldachy lub grona, pojawiające się przed rozwojem liści wczesną wiosną. Owoce klonu to skrzydlaki, czyli nasiona zamknięte w długich, błoniastych osnówkach ułatwiających rozprzestrzenianie przez wiatr. Klony są szeroko rozpowszechnione na całym świecie i są cenione zarówno jako rośliny ozdobne, jak i źródło drewna.",
"Magnolia to drzewo lub krzew o dużych, skórzastych liściach i pięknych, często pachnących kwiatach. Kwiaty magnolii mogą być białe, różowe lub fioletowe, czasem pełne, a czasem w baldachach. Owoce to czerwone lub różowe jagody. Magnolie są cenione za swój estetyczny wygląd i aromatyczne kwiaty, często stosowane w ogrodach i jako rośliny ozdobne."
];
const main = document.querySelector('main');
function showTree(name) {
const index = treeNames.indexOf(name);
main.replaceChildren();
const heading = document.createElement('h2');
heading.textContent = treeNames[index];
const description = document.createElement('p');
description.textContent = treeDescriptions[index];
description.classList.add('opis');
main.append(heading, description);
}
document.querySelector('#images').addEventListener('click', (event) => {
if (event.target.tagName === 'IMG') {
showTree(event.target.alt);
}
});Skrypt 2: wyświetla informacje dotyczące drzewa, którego nazwę użytkownik wpisał w pole edycyjne. Wykonywany po kliknięciu na przycisk „Szukaj”. Pobiera dane z pola edycyjnego.
Nasłuchiwacz zdarzenia submit formularza: uruchamia go kliknięcie przycisku „Szukaj” i Enter w polu - jedna obsługa dla obu.
event.preventDefault() - formularz nie przeładowuje strony (domyślnie wysłałby się pod własny adres i opis drzewa zniknąłby razem z całą stroną),searchInput.value - tekst wpisany w pole (R.5.7).Bez preventDefault() strona przeładowuje się po każdym wyszukaniu - opis mignie i zniknie.
skrypt.js JavaScript zmienione: 8 linii const treeNames = ["buk", "lipa", "wierzba", "brzoza", "dąb", "kasztanowiec", "jarzębina", "klon", "magnolia"];
const treeDescriptions = [
"Duże drzewo liściaste z gładką, szarą korą i gęstą, rozłożystą koroną. Ma błyszczące, ciemnozielone liście, które jesienią przebarwiają się na złociste lub czerwonawe odcienie. Buk kwitnie wiosną, a jego owoce to jadalne orzeszki zwane bukwią, zamknięte w kolczastej okrywie. Rośnie na żyznych, przepuszczalnych glebach w klimacie umiarkowanym i jest ważnym elementem lasów liściastych. Drewno buka jest twarde i wytrzymałe, wykorzystywane w meblarstwie i stolarstwie.",
"drzewo liściaste o szerokiej, gęstej koronie i gładkiej, szarobrązowej korze, która z wiekiem staje się spękana. Ma duże, sercowate liście o piłkowanych brzegach. Kwiaty lipy są małe, żółtawobiałe, zebrane w wonne, zwisające baldachy, które kwitną na przełomie czerwca i lipca. Owoce to niewielkie orzeszki z trwałymi skrzydełkami. Lipa preferuje żyzne, wilgotne gleby i rośnie w klimacie umiarkowanym. Jest ceniona za drewno używane w rzeźbiarstwie oraz kwiaty stosowane w ziołolecznictwie, szczególnie w formie naparów na przeziębienia.",
"Drzewo liściaste z długimi, zwisającymi gałęziami i elastycznymi pędami. Ma wąskie, lancetowate liście, które są zazwyczaj zielone na górnej stronie i srebrzyste lub niebieskawe na spodzie. Wierzba kwitnie wczesną wiosną, a jej kwiaty tworzą kotki. Rośnie na wilgotnych, często podmokłych terenach, w pobliżu rzek, jezior i innych zbiorników wodnych. Drewno wierzby jest lekkie i elastyczne, używane do produkcji koszy, mebli oraz w wikliniarstwie. Wierzba jest także ceniona w medycynie ludowej, a kora wierzby białej jest źródłem salicyny, stosowanej jako naturalny środek przeciwbólowy i przeciwgorączkowy.",
"Drzewo liściaste o charakterystycznej białej, łuszczącej się korze. Ma delikatne, jasnozielone liście o trójkątnym lub romboidalnym kształcie, z piłkowanymi brzegami. Brzoza kwitnie wiosną, a jej kwiaty tworzą zwisające, żółtawe kotki. Owoce to drobne orzeszki z cienkimi skrzydełkami. Drzewo to rośnie na różnych typach gleb, często w lasach mieszanych i na obrzeżach pól, dobrze znosi chłodny klimat. Drewno brzozy jest twarde, ale łatwe w obróbce, używane w stolarstwie, do wyrobu mebli i sklejki. Brzoza jest również ceniona za sok brzozowy, który ma zastosowanie w ziołolecznictwie i kosmetyce.",
"Majestatyczne drzewo liściaste o szerokiej, rozłożystej koronie i grubej, spękanej korze. Ma duże, klapowane liście, które jesienią przebarwiają się na złote i brązowe odcienie. Dąb kwitnie wiosną, a jego kwiaty są niepozorne, zebrane w kotki. Owoce dębu to żołędzie, które są ważnym źródłem pożywienia dla wielu zwierząt. Dąb rośnie na żyznych, dobrze przepuszczalnych glebach i jest długowieczny, mogąc żyć nawet kilkaset lat. Drewno dębu jest twarde, wytrzymałe i cenione w meblarstwie, stolarstwie oraz do produkcji beczek. Dąb symbolizuje siłę, wytrzymałość i długowieczność.",
"Drzewo o dużych, skrętoległych liściach złożonych z pięciu do siedmiu lancetowatych lub eliptycznych listków. Kwiaty kasztanowca są okazałe, zebrane w stożkowate kłosy i występują zazwyczaj w kolorach białym, różowym lub czerwonym. Owoce kasztanowca to duże, skorupiaste torebki zawierające jadalne orzechy, które są popularne w kuchni i ozdobnych zastosowaniach. Kasztanowiec rośnie w umiarkowanym klimacie na żyznych, dobrze przepuszczalnych glebach.",
"Drzewo lub krzew z rodziny różowatych (Rosaceae). Charakteryzuje się złożonymi liśćmi składającymi się z 9-15 lancetowatych listków o piłkowanych brzegach. Kwiaty są białe lub kremowe, zebrane w baldachy lub wiechy, pojawiające się wiosną lub wczesnym latem. Owoce jarzębiny to czerwone lub pomarańczowe jagody, które są atrakcyjne dla ptaków i czasem używane do wyrobu dżemów i napojów. Jarzębina rośnie na różnych typach gleb i jest popularna jako roślina ozdobna ze względu na swoje piękne kwiaty i owoce.",
"Charakteryzuje się dłoniastymi liśćmi o pięciu łatkach, często z wyraźnymi wcięciami. Kwiaty klonu są zazwyczaj niepozorne, zebrane w baldachy lub grona, pojawiające się przed rozwojem liści wczesną wiosną. Owoce klonu to skrzydlaki, czyli nasiona zamknięte w długich, błoniastych osnówkach ułatwiających rozprzestrzenianie przez wiatr. Klony są szeroko rozpowszechnione na całym świecie i są cenione zarówno jako rośliny ozdobne, jak i źródło drewna.",
"Magnolia to drzewo lub krzew o dużych, skórzastych liściach i pięknych, często pachnących kwiatach. Kwiaty magnolii mogą być białe, różowe lub fioletowe, czasem pełne, a czasem w baldachach. Owoce to czerwone lub różowe jagody. Magnolie są cenione za swój estetyczny wygląd i aromatyczne kwiaty, często stosowane w ogrodach i jako rośliny ozdobne."
];
const main = document.querySelector('main');
function showTree(name) {
const index = treeNames.indexOf(name);
main.replaceChildren();
const heading = document.createElement('h2');
heading.textContent = treeNames[index];
const description = document.createElement('p');
description.textContent = treeDescriptions[index];
description.classList.add('opis');
main.append(heading, description);
}
document.querySelector('#images').addEventListener('click', (event) => {
if (event.target.tagName === 'IMG') {
showTree(event.target.alt);
}
});
const searchForm = document.querySelector('#search-form');
const searchInput = document.querySelector('#search');
searchForm.addEventListener('submit', (event) => {
event.preventDefault();
const query = searchInput.value;
});Sprawdza czy wpisana przez użytkownika nazwa drzewa znajduje się w tablicy nazw drzew. Jeżeli istnieje, to wypisuje w bloku głównym informacje o tym drzewie (tak samo jak w skrypcie 1).
Użytkownik wpisze „Buk”, „ buk ” albo „dab” bez polskiej litery - a tablica ma „buk” i „dąb”. Funkcja simplify(text) sprowadza oba napisy do wspólnej postaci:
trim() - bez spacji na brzegach, toLowerCase() - małe litery,normalize('NFD') rozkłada literę z ogonkiem lub kreską na literę i osobny znak (ą → a + ogonek), a replace(/[\u0300-\u036f]/g, '') usuwa te osobne znaki,ł nie rozkłada się w ten sposób (to osobna litera, nie „l z kreską”), dlatego ma własną zamianę.findIndex przechodzi tablicę nazw i zwraca indeks pierwszej, która po uproszczeniu równa się zapytaniu, albo -1 (R.5.8). Gdy drzewo jest, skrypt woła funkcję skryptu 1 z prawdziwą nazwą z tablicy - nagłówek pokaże „dąb”, nawet gdy wpisano „dab”. Wpisz w podglądzie „ Lipa” i naciśnij Enter.
skrypt.js JavaScript zmienione: 9 linii const treeNames = ["buk", "lipa", "wierzba", "brzoza", "dąb", "kasztanowiec", "jarzębina", "klon", "magnolia"];
const treeDescriptions = [
"Duże drzewo liściaste z gładką, szarą korą i gęstą, rozłożystą koroną. Ma błyszczące, ciemnozielone liście, które jesienią przebarwiają się na złociste lub czerwonawe odcienie. Buk kwitnie wiosną, a jego owoce to jadalne orzeszki zwane bukwią, zamknięte w kolczastej okrywie. Rośnie na żyznych, przepuszczalnych glebach w klimacie umiarkowanym i jest ważnym elementem lasów liściastych. Drewno buka jest twarde i wytrzymałe, wykorzystywane w meblarstwie i stolarstwie.",
"drzewo liściaste o szerokiej, gęstej koronie i gładkiej, szarobrązowej korze, która z wiekiem staje się spękana. Ma duże, sercowate liście o piłkowanych brzegach. Kwiaty lipy są małe, żółtawobiałe, zebrane w wonne, zwisające baldachy, które kwitną na przełomie czerwca i lipca. Owoce to niewielkie orzeszki z trwałymi skrzydełkami. Lipa preferuje żyzne, wilgotne gleby i rośnie w klimacie umiarkowanym. Jest ceniona za drewno używane w rzeźbiarstwie oraz kwiaty stosowane w ziołolecznictwie, szczególnie w formie naparów na przeziębienia.",
"Drzewo liściaste z długimi, zwisającymi gałęziami i elastycznymi pędami. Ma wąskie, lancetowate liście, które są zazwyczaj zielone na górnej stronie i srebrzyste lub niebieskawe na spodzie. Wierzba kwitnie wczesną wiosną, a jej kwiaty tworzą kotki. Rośnie na wilgotnych, często podmokłych terenach, w pobliżu rzek, jezior i innych zbiorników wodnych. Drewno wierzby jest lekkie i elastyczne, używane do produkcji koszy, mebli oraz w wikliniarstwie. Wierzba jest także ceniona w medycynie ludowej, a kora wierzby białej jest źródłem salicyny, stosowanej jako naturalny środek przeciwbólowy i przeciwgorączkowy.",
"Drzewo liściaste o charakterystycznej białej, łuszczącej się korze. Ma delikatne, jasnozielone liście o trójkątnym lub romboidalnym kształcie, z piłkowanymi brzegami. Brzoza kwitnie wiosną, a jej kwiaty tworzą zwisające, żółtawe kotki. Owoce to drobne orzeszki z cienkimi skrzydełkami. Drzewo to rośnie na różnych typach gleb, często w lasach mieszanych i na obrzeżach pól, dobrze znosi chłodny klimat. Drewno brzozy jest twarde, ale łatwe w obróbce, używane w stolarstwie, do wyrobu mebli i sklejki. Brzoza jest również ceniona za sok brzozowy, który ma zastosowanie w ziołolecznictwie i kosmetyce.",
"Majestatyczne drzewo liściaste o szerokiej, rozłożystej koronie i grubej, spękanej korze. Ma duże, klapowane liście, które jesienią przebarwiają się na złote i brązowe odcienie. Dąb kwitnie wiosną, a jego kwiaty są niepozorne, zebrane w kotki. Owoce dębu to żołędzie, które są ważnym źródłem pożywienia dla wielu zwierząt. Dąb rośnie na żyznych, dobrze przepuszczalnych glebach i jest długowieczny, mogąc żyć nawet kilkaset lat. Drewno dębu jest twarde, wytrzymałe i cenione w meblarstwie, stolarstwie oraz do produkcji beczek. Dąb symbolizuje siłę, wytrzymałość i długowieczność.",
"Drzewo o dużych, skrętoległych liściach złożonych z pięciu do siedmiu lancetowatych lub eliptycznych listków. Kwiaty kasztanowca są okazałe, zebrane w stożkowate kłosy i występują zazwyczaj w kolorach białym, różowym lub czerwonym. Owoce kasztanowca to duże, skorupiaste torebki zawierające jadalne orzechy, które są popularne w kuchni i ozdobnych zastosowaniach. Kasztanowiec rośnie w umiarkowanym klimacie na żyznych, dobrze przepuszczalnych glebach.",
"Drzewo lub krzew z rodziny różowatych (Rosaceae). Charakteryzuje się złożonymi liśćmi składającymi się z 9-15 lancetowatych listków o piłkowanych brzegach. Kwiaty są białe lub kremowe, zebrane w baldachy lub wiechy, pojawiające się wiosną lub wczesnym latem. Owoce jarzębiny to czerwone lub pomarańczowe jagody, które są atrakcyjne dla ptaków i czasem używane do wyrobu dżemów i napojów. Jarzębina rośnie na różnych typach gleb i jest popularna jako roślina ozdobna ze względu na swoje piękne kwiaty i owoce.",
"Charakteryzuje się dłoniastymi liśćmi o pięciu łatkach, często z wyraźnymi wcięciami. Kwiaty klonu są zazwyczaj niepozorne, zebrane w baldachy lub grona, pojawiające się przed rozwojem liści wczesną wiosną. Owoce klonu to skrzydlaki, czyli nasiona zamknięte w długich, błoniastych osnówkach ułatwiających rozprzestrzenianie przez wiatr. Klony są szeroko rozpowszechnione na całym świecie i są cenione zarówno jako rośliny ozdobne, jak i źródło drewna.",
"Magnolia to drzewo lub krzew o dużych, skórzastych liściach i pięknych, często pachnących kwiatach. Kwiaty magnolii mogą być białe, różowe lub fioletowe, czasem pełne, a czasem w baldachach. Owoce to czerwone lub różowe jagody. Magnolie są cenione za swój estetyczny wygląd i aromatyczne kwiaty, często stosowane w ogrodach i jako rośliny ozdobne."
];
const main = document.querySelector('main');
function showTree(name) {
const index = treeNames.indexOf(name);
main.replaceChildren();
const heading = document.createElement('h2');
heading.textContent = treeNames[index];
const description = document.createElement('p');
description.textContent = treeDescriptions[index];
description.classList.add('opis');
main.append(heading, description);
}
document.querySelector('#images').addEventListener('click', (event) => {
if (event.target.tagName === 'IMG') {
showTree(event.target.alt);
}
});
function simplify(text) {
return text.trim().toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '').replace(/ł/g, 'l');
}
const searchForm = document.querySelector('#search-form');
const searchInput = document.querySelector('#search');
searchForm.addEventListener('submit', (event) => {
event.preventDefault();
const query = simplify(searchInput.value);
const index = treeNames.findIndex((name) => simplify(name) === query);
if (index !== -1) {
showTree(treeNames[index]);
}
});W przeciwnym wypadku wypisuje w bloku głównym tekst "Drzewa, o którym chcesz znaleźć informacje, nie ma w naszym Atlasie drzew." (można wykorzystać tutaj funkcję skryptu 1.)
Gałąź else: nowy akapit z komunikatem, a main.replaceChildren(message) w jednym wywołaniu usuwa poprzednią zawartość bloku i wstawia akapit. Bez klasy opis - na ilustracji 5 komunikat jest zwykłej wielkości. Wpisz „akacja” - komunikat; „dąb” - opis dębu (R.5.9).
skrypt.js JavaScript zmienione: 4 linie const treeNames = ["buk", "lipa", "wierzba", "brzoza", "dąb", "kasztanowiec", "jarzębina", "klon", "magnolia"];
const treeDescriptions = [
"Duże drzewo liściaste z gładką, szarą korą i gęstą, rozłożystą koroną. Ma błyszczące, ciemnozielone liście, które jesienią przebarwiają się na złociste lub czerwonawe odcienie. Buk kwitnie wiosną, a jego owoce to jadalne orzeszki zwane bukwią, zamknięte w kolczastej okrywie. Rośnie na żyznych, przepuszczalnych glebach w klimacie umiarkowanym i jest ważnym elementem lasów liściastych. Drewno buka jest twarde i wytrzymałe, wykorzystywane w meblarstwie i stolarstwie.",
"drzewo liściaste o szerokiej, gęstej koronie i gładkiej, szarobrązowej korze, która z wiekiem staje się spękana. Ma duże, sercowate liście o piłkowanych brzegach. Kwiaty lipy są małe, żółtawobiałe, zebrane w wonne, zwisające baldachy, które kwitną na przełomie czerwca i lipca. Owoce to niewielkie orzeszki z trwałymi skrzydełkami. Lipa preferuje żyzne, wilgotne gleby i rośnie w klimacie umiarkowanym. Jest ceniona za drewno używane w rzeźbiarstwie oraz kwiaty stosowane w ziołolecznictwie, szczególnie w formie naparów na przeziębienia.",
"Drzewo liściaste z długimi, zwisającymi gałęziami i elastycznymi pędami. Ma wąskie, lancetowate liście, które są zazwyczaj zielone na górnej stronie i srebrzyste lub niebieskawe na spodzie. Wierzba kwitnie wczesną wiosną, a jej kwiaty tworzą kotki. Rośnie na wilgotnych, często podmokłych terenach, w pobliżu rzek, jezior i innych zbiorników wodnych. Drewno wierzby jest lekkie i elastyczne, używane do produkcji koszy, mebli oraz w wikliniarstwie. Wierzba jest także ceniona w medycynie ludowej, a kora wierzby białej jest źródłem salicyny, stosowanej jako naturalny środek przeciwbólowy i przeciwgorączkowy.",
"Drzewo liściaste o charakterystycznej białej, łuszczącej się korze. Ma delikatne, jasnozielone liście o trójkątnym lub romboidalnym kształcie, z piłkowanymi brzegami. Brzoza kwitnie wiosną, a jej kwiaty tworzą zwisające, żółtawe kotki. Owoce to drobne orzeszki z cienkimi skrzydełkami. Drzewo to rośnie na różnych typach gleb, często w lasach mieszanych i na obrzeżach pól, dobrze znosi chłodny klimat. Drewno brzozy jest twarde, ale łatwe w obróbce, używane w stolarstwie, do wyrobu mebli i sklejki. Brzoza jest również ceniona za sok brzozowy, który ma zastosowanie w ziołolecznictwie i kosmetyce.",
"Majestatyczne drzewo liściaste o szerokiej, rozłożystej koronie i grubej, spękanej korze. Ma duże, klapowane liście, które jesienią przebarwiają się na złote i brązowe odcienie. Dąb kwitnie wiosną, a jego kwiaty są niepozorne, zebrane w kotki. Owoce dębu to żołędzie, które są ważnym źródłem pożywienia dla wielu zwierząt. Dąb rośnie na żyznych, dobrze przepuszczalnych glebach i jest długowieczny, mogąc żyć nawet kilkaset lat. Drewno dębu jest twarde, wytrzymałe i cenione w meblarstwie, stolarstwie oraz do produkcji beczek. Dąb symbolizuje siłę, wytrzymałość i długowieczność.",
"Drzewo o dużych, skrętoległych liściach złożonych z pięciu do siedmiu lancetowatych lub eliptycznych listków. Kwiaty kasztanowca są okazałe, zebrane w stożkowate kłosy i występują zazwyczaj w kolorach białym, różowym lub czerwonym. Owoce kasztanowca to duże, skorupiaste torebki zawierające jadalne orzechy, które są popularne w kuchni i ozdobnych zastosowaniach. Kasztanowiec rośnie w umiarkowanym klimacie na żyznych, dobrze przepuszczalnych glebach.",
"Drzewo lub krzew z rodziny różowatych (Rosaceae). Charakteryzuje się złożonymi liśćmi składającymi się z 9-15 lancetowatych listków o piłkowanych brzegach. Kwiaty są białe lub kremowe, zebrane w baldachy lub wiechy, pojawiające się wiosną lub wczesnym latem. Owoce jarzębiny to czerwone lub pomarańczowe jagody, które są atrakcyjne dla ptaków i czasem używane do wyrobu dżemów i napojów. Jarzębina rośnie na różnych typach gleb i jest popularna jako roślina ozdobna ze względu na swoje piękne kwiaty i owoce.",
"Charakteryzuje się dłoniastymi liśćmi o pięciu łatkach, często z wyraźnymi wcięciami. Kwiaty klonu są zazwyczaj niepozorne, zebrane w baldachy lub grona, pojawiające się przed rozwojem liści wczesną wiosną. Owoce klonu to skrzydlaki, czyli nasiona zamknięte w długich, błoniastych osnówkach ułatwiających rozprzestrzenianie przez wiatr. Klony są szeroko rozpowszechnione na całym świecie i są cenione zarówno jako rośliny ozdobne, jak i źródło drewna.",
"Magnolia to drzewo lub krzew o dużych, skórzastych liściach i pięknych, często pachnących kwiatach. Kwiaty magnolii mogą być białe, różowe lub fioletowe, czasem pełne, a czasem w baldachach. Owoce to czerwone lub różowe jagody. Magnolie są cenione za swój estetyczny wygląd i aromatyczne kwiaty, często stosowane w ogrodach i jako rośliny ozdobne."
];
const main = document.querySelector('main');
function showTree(name) {
const index = treeNames.indexOf(name);
main.replaceChildren();
const heading = document.createElement('h2');
heading.textContent = treeNames[index];
const description = document.createElement('p');
description.textContent = treeDescriptions[index];
description.classList.add('opis');
main.append(heading, description);
}
document.querySelector('#images').addEventListener('click', (event) => {
if (event.target.tagName === 'IMG') {
showTree(event.target.alt);
}
});
function simplify(text) {
return text.trim().toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '').replace(/ł/g, 'l');
}
const searchForm = document.querySelector('#search-form');
const searchInput = document.querySelector('#search');
searchForm.addEventListener('submit', (event) => {
event.preventDefault();
const query = simplify(searchInput.value);
const index = treeNames.findIndex((name) => simplify(name) === query);
if (index !== -1) {
showTree(treeNames[index]);
} else {
const message = document.createElement('p');
message.textContent = 'Drzewa, o którym chcesz znaleźć informacje, nie ma w naszym Atlasie drzew.';
main.replaceChildren(message);
}
});Należy stosować znaczące nazewnictwo zmiennych i funkcji w języku polskim lub angielskim. Nazewnictwo odzwierciedla cel zastosowania.
Każda nazwa mówi, co przechowuje albo robi: treeNames, treeDescriptions, main, showTree, simplify, searchForm, searchInput, query, index, heading, description, message. Kod jest poprawny składniowo i wykonuje polecenia arkusza (R.5.1) - sprawdzone w prawdziwej przeglądarce: kliknięcie buka (ilustracja 4), wyszukanie „akacja” (ilustracja 5), „dąb”, „ Buk ”, „dab” i Enter w polu.
Podgląd strony bez zmian - taki jak po kroku 40.
Krok 42 · po tym etapie masz 40 z 40 kryteriów (pkt)
Obie wersje dają komplet 40 punktów. Różnice:
| wersja podstawowa | wersja nowoczesna | |
|---|---|---|
| układ | float: left + clear: both, szerokości w width | grid-template-areas, szerokości w grid-template-columns |
| margines bloku głównego | 3% szerokości strony | 3% kolumny siatki (procenty w siatce liczą się od obszaru) |
| kliknięcie zdjęcia | 9 × onclick="showTree('...')" | jeden nasłuchiwacz na galerii, nazwa z alt |
| wyszukiwarka | onclick przycisku, porównanie dokładne | formularz ze zdarzeniem submit (Enter), porównanie bez wielkości liter, spacji i ogonków |
| czyszczenie i dodawanie | innerHTML = "", dwa razy appendChild | replaceChildren(), append(heading, description) |
| tekst | innerText | textContent |
| skrypt | <script> w HTML | skrypt.js z defer |
Na egzaminie wersja podstawowa trzyma się dosłownie tabeli 3 arkusza i obie są równie bezpieczne punktowo - klucz sprawdza efekt i użycie funkcji DOM. Siatka wymaga pamiętania o grid-template-rows (bez niej nad blokiem głównym zostaje dziura) i o procentach liczonych od kolumny; float jest krótszy, ale łatwo zapomnieć o clear. W prawdziwej witrynie zdjęcia galerii warto by owinąć w przyciski (<button> z obrazem), żeby dało się je wybrać klawiszem Tab - klucz tego nie wymaga, a zmienia selektory z arkusza.
Podgląd strony bez zmian - taki jak po kroku 40.
Krok 43 · po tym etapie masz 40 z 40 kryteriów (pkt)
Po zakończeniu pracy utwórz plik tekstowy o nazwie przeglądarka.txt. Zapisz w nim nazwę przeglądarki internetowej, w której weryfikowana była poprawność działania witryny. Umieść go w folderze z numerem zdającego. Nagraj płytę z rezultatami pracy.
W folderze z numerem zdającego: lisciaste.html, skrypt.js, styl.css, kwerendy.txt, import.png, kw1.png … kw4.png, zdjęcia drzew (z przeskalowanym dab.jpg), naglowek.png, iglaste.png, owocowe.png i przeglądarka.txt. Bez skrypt.js galeria i wyszukiwarka nie działają. Płytę sprawdź po nagraniu.
przeglądarka.txt Tekst nowy plik Google ChromePodgląd strony bez zmian - taki jak po kroku 40.
Symulacja ekranu w przeglądarce - w Android Studio / Visual Studio wygląd może się nieco różnić.
To jedno z możliwych rozwiązań. Egzaminator ocenia spełnienie kryteriów z klucza odpowiedzi, a nie zgodność z tym kodem - inna, poprawna droga też daje punkty.
Autor rozwiązania: Bartosz Bryniarski. Licencja CC BY-NC 4.0 - kopiowanie i przeróbki do celów niekomercyjnych, z podaniem autora i źródła (link do tej strony) (zasady wykorzystania). Treść arkusza i klucza oceniania pochodzi z CKE.