Rozwiązanie buduje internetowy atlas drzew: baza atlas_drzew (gatunki, drzewa, lokalizacje) i cztery zapytania - filtr z sortowaniem malejącym, złączenie z warunkiem na datę posadzenia, grupowanie z aliasem COUNT(*) AS "ilość" i dwa złączenia z wyszukiwaniem nazw kończących się na „a”, potem grafika dab.jpg przeskalowana do 300 px szerokości, strona lisciaste.html z pięcioma blokami (nagłówek z obrazem w tle, blok boczny z przewijaną galerią i wyszukiwarką, menu, blok główny i stopka), style w styl.css i dwa skrypty JavaScript, które budują opis drzewa w bloku głównym - po kliknięciu zdjęcia albo po wpisaniu nazwy.
Kroki idą zdanie po zdaniu za treścią arkusza - każdy ma polecenie z arkusza, a kod pokazuje dokładnie te linie, które je spełniają. Skrypty są najpierw pisane najprościej, metodami z tabel 2 i 3 arkusza (createElement, innerText, classList.add, appendChild) i atrybutem onclick, a na końcu zostają przerobione na wersję z prawdziwych projektów: nasłuchiwacze zdarzeń, nazwa drzewa brana z tekstu alternatywnego obrazu, wyszukiwanie bez względu na wielkość liter i spacje oraz wyszukiwanie klawiszem Enter.
Baza, zdjęcia drzew, obraz nagłówka i teksty pochodzą z prawdziwego archiwum pliki21 (załącznik do arkusza, hasło w treści zadania). Zrzuty wyników zapytań są odtworzone z tej bazy uruchomionej w MariaDB z XAMPP-a - na egzaminie robisz je sam, z całego ekranu. Strona w podglądzie działa: od etapu skryptów można klikać zdjęcia i szukać drzew.
To jest wersja podstawowa. W zakładce „Nowoczesny kod (grid, formularz)” jest drugi sposób rozwiązania tego samego arkusza: układ na siatce CSS z nazwanymi obszarami, skrypt w osobnym pliku z jednym nasłuchiwaczem dla całej galerii i wyszukiwarka jako formularz, która znajduje drzewo także bez polskich liter - obie wersje są zgodne z kluczem.
Jak liczą się punkty. Klucz ma 40 kryteriów (R.1.1 - R.5.9), każde za 1 punkt. Próg zdania części praktycznej to 75%, czyli 30 punktów - można stracić 10 kryteriów i nadal zdać. Przy każdym kroku jest napisane, które kryteria spełnia; egzaminator ocenia spełnienie kryteriów z klucza, nie zgodność z tym kodem.
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).
Rozpakuj pliki21.7z z pulpitu (hasło @tSa5Drzew - zaczyna się od małpy, a w środku jest cyfra 5) do folderu z numerem zdającego: atlasdrzew.sql, zdjęcia drzew, naglowek.png, iglaste.png, owocowe.png i do_strony.txt z tekstami. W phpMyAdmin: Nowa, nazwa atlas_drzew (z podkreśleniem), porównywanie utf8_unicode_ci.
Do utworzonej bazy zaimportuj dane z pliku atlasdrzew.sql.
Import → atlasdrzew.sql → Wykonaj. Powstają tabele gatunki (nazwa, nazwa naukowa, średnia wysokość i długość życia, 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.
Print Screen, wklejasz do edytora grafiki i zapisujesz jako import.png. W tym arkuszu wszystkie zrzuty są w PNG.
Wykadrowany zrzut albo zrzut bez paska zadań nie jest oceniany (uwaga w kluczu przy R.1).
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.
SELECT nazwa, nazwaNaukowa, sredniaDlugoscZycia FROM gatunki - trzy kolumny,WHERE rodzaj = 2 - iglaste mają w polu rodzaj wartość 2 (opis bazy w arkuszu),ORDER BY sredniaDlugoscZycia DESC - od najdłużej żyjących.Wynik: 8 wierszy - Cis, Cedr, Cyprys, Daglezja, Jodła, Świerk, Sosna, Modrzew, w tej kolejności jak w kluczu. Zapytania zapisujesz w kwerendy.txt, zrzut jako kw1.png.
WHERE rodzaj = 'Iglaste' nic nie zwraca - w tabeli gatunki rodzaj jest liczbą; nazwa „Iglaste” leży w osobnej tabeli 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ą.
FROM drzewa JOIN gatunki ON gatunki.id = drzewa.gatunek_id - nazwa gatunku jest w drugiej tabeli,drzewa.id - obie tabele mają kolumnę id, więc podajesz, o którą chodzi,WHERE drzewa.dataPosadzenia = '2008-06-06' - data w formacie bazy: rok, miesiąc, dzień. Pole jest typu date (bez godziny), więc wystarczy zwykłe porównanie.Wynik: 3 wiersze - drzewa o id 24, 95 i 115. Zrzut: kw2.png.
SELECT id, ... bez nazwy tabeli kończy się błędem „Column 'id' in field list is ambiguous”.
kwerendy.txt Tekst zmienione: 3 linie -- Zapytanie 1
SELECT nazwa, nazwaNaukowa, sredniaDlugoscZycia FROM gatunki WHERE rodzaj = 2 ORDER BY sredniaDlugoscZycia DESC;
-- Zapytanie 2
SELECT drzewa.id, drzewa.stanZdrowia, gatunki.nazwa FROM drzewa JOIN gatunki ON gatunki.id = drzewa.gatunek_id WHERE drzewa.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 - jedna grupa na rodzaj,COUNT(*) AS "ilość" - liczba gatunków w grupie, z aliasem; polskie litery w aliasie wymagają cudzysłowu (albo odwrotnych apostrofów).Wynik: 3 wiersze - rodzaj 1: 23 gatunki, rodzaj 2: 8, rodzaj 3: 22. Liczba 8 zgadza się z zapytaniem 1. Zrzut: kw3.png.
kwerendy.txt Tekst zmienione: 3 linie -- Zapytanie 1
SELECT nazwa, nazwaNaukowa, sredniaDlugoscZycia FROM gatunki WHERE rodzaj = 2 ORDER BY sredniaDlugoscZycia DESC;
-- Zapytanie 2
SELECT drzewa.id, drzewa.stanZdrowia, gatunki.nazwa FROM drzewa JOIN gatunki ON gatunki.id = drzewa.gatunek_id WHERE drzewa.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ą.
FROM drzewa JOIN gatunki ... JOIN lokalizacje ... - drzewo łączysz z gatunkiem (nazwa) i z lokalizacją (opis miejsca),lokalizacje.opis = 'Gdańsk, Polska' - opis ma postać „miasto, kraj”, więc porównujesz dokładnie taki napis, z przecinkiem i spacją,gatunki.nazwa LIKE '%a' - % na początku: dowolny ciąg znaków, a potem „a” na samym końcu.Wynik: 9 wierszy - Czereśnia, Morwa, Topola, Morwa, Grusza, Katalpa, Wierzba, Sosna, Jarzębina. Morwa jest 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 (0 wierszy).
kwerendy.txt Tekst zmienione: 3 linie -- Zapytanie 1
SELECT nazwa, nazwaNaukowa, sredniaDlugoscZycia FROM gatunki WHERE rodzaj = 2 ORDER BY sredniaDlugoscZycia DESC;
-- Zapytanie 2
SELECT drzewa.id, drzewa.stanZdrowia, gatunki.nazwa FROM drzewa JOIN gatunki ON gatunki.id = drzewa.gatunek_id WHERE drzewa.dataPosadzenia = '2008-06-06';
-- Zapytanie 3
SELECT rodzaj, COUNT(*) AS "ilość" FROM gatunki GROUP BY rodzaj;
-- Zapytanie 4
SELECT gatunki.nazwa, drzewa.dataPosadzenia, drzewa.stanZdrowia FROM drzewa JOIN gatunki ON gatunki.id = drzewa.gatunek_id JOIN lokalizacje ON lokalizacje.id = drzewa.lokalizacja_id WHERE lokalizacje.opis = 'Gdańsk, Polska' AND gatunki.nazwa LIKE '%a';
Kroki 8-23 · 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.
W GIMP-ie: Obraz → Skaluj obraz, szerokość 300 przy zamkniętym łańcuchu proporcji - z 1280 x 853 px wychodzi 300 x 200, tyle samo co pozostałe zdjęcia w galerii. Plik → Wyeksportuj jako dab.jpg (nadpisujesz plik z archiwum).
Składa się ze strony o nazwie lisciaste.html. Zapisana w języku HTML5.
Deklaracja <!DOCTYPE html> w pierwszej linii. Plik lisciaste.html zapisujesz 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 znaczniku <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.
<meta charset="UTF-8"> jako pierwszy element <head>.
lisciaste.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
</head>
<body>
</body>
</html>Tytuł strony „Atlas drzew”.
<title> w <head>. Kodowanie i tytuł to R.2.3.
lisciaste.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Atlas drzew</title>
</head>
<body>
</body>
</html>Arkusz stylów w pliku o nazwie styl.css prawidłowo połączony z kodem strony.
Nazwa: styl.css. Całe formatowanie ma pochodzić z tego pliku (R.3.2).
lisciaste.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<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.
Każdy blok ma swój znacznik semantyczny (tabela 1): <header>, <aside> (blok boczny), <nav> (nawigacja), <main> i <footer> - dokładnie lista z klucza R.2.4. Każdego jest po jednym, więc w CSS wystarczą selektory znaczników. Kolejność w kodzie: blok boczny przed nawigacją i głównym - opłynięcie w CSS ustawi go po lewej.
lisciaste.html HTML zmienione: 10 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<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”.
<h1> w <header>.
lisciaste.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Atlas drzew</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Atlas drzew</h1>
</header>
<aside>
</aside>
<nav>
</nav>
<main>
</main>
<footer>
</footer>
</body>
</html>Zawartość bloku bocznego: Nagłówek trzeciego stopnia o treści „Wybierz drzewo, aby przeczytać o nim informacje”.
<h3> w <aside>.
lisciaste.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<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.
Blok <div id="images"> z dziewięcioma obrazami w kolejności z arkusza - tej samej co w tablicach z do_strony.txt (buk pod indeksem 0, lipa pod 1 i tak dalej). Tekst alternatywny to nazwa drzewa, ale już z polskimi literami: plik nazywa się dab.jpg, bo w nazwach plików unika się polskich znaków, a tekst alternatywny czyta człowiek - więc „dąb” i „jarzębina”, dokładnie jak w tablicy nazw (R.2.6). Klucz i tak dopuszcza różnice w polskich znakach. Kliknięcie obrazu podepniesz w etapie skryptów.
lisciaste.html HTML zmienione: 11 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<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…”.
Atrybut placeholder wyświetla szary tekst podpowiedzi, który znika, gdy zaczniesz pisać - nie jest wartością pola (R.3.4). Identyfikator search pozwoli skryptowi 2 odczytać wpisaną nazwę.
value="Wyszukaj drzewo…" zamiast placeholder wpisuje tekst do pola - użytkownik musi go skasować, a skrypt szukałby drzewa o nazwie „Wyszukaj drzewo…”.
lisciaste.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<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>
<input type="text" id="search" placeholder="Wyszukaj drzewo…">
</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> obok pola. Pole i przycisk to R.2.7; wywołanie skryptu 2 dopiszesz w etapie skryptów.
lisciaste.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<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>
<input type="text" id="search" placeholder="Wyszukaj drzewo…">
<button>Szukaj</button>
</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>, w każdym odsyłacz (R.2.8, R.3.5). Napisy wpisujesz małymi literami, jak w arkuszu - wielkie litery z ilustracji 2 da styl (text-transform). Dwa odsyłacze prowadzą do obrazów PNG: przeglądarka po prostu pokaże obraz. W prawdziwej witrynie byłyby tam strony iglaste.html i owocowe.html - w tym arkuszu obrazy zastępują strony, które powstaną później.
lisciaste.html HTML zmienione: 5 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<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>
<input type="text" id="search" placeholder="Wyszukaj drzewo…">
<button>Szukaj</button>
</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).
Akapit z klasą opis i tekstem skopiowanym z do_strony.txt (R.3.6). Tę samą klasę skrypt 1 nada akapitom z opisami drzew - dzięki temu powitanie i opisy będą wyglądać tak samo.
lisciaste.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<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>
<input type="text" id="search" placeholder="Wyszukaj drzewo…">
<button>Szukaj</button>
</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 "Atlasie drzew", 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>Fragment tekstu „Atlasie drzew” zapisany w semantycznym znaczniku oznaczającym tekst ważny i domyślnie sformatowany jako pogrubiony – patrz ilustracja 2.
Fragment razem z cudzysłowami obejmujesz znacznikiem <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">
<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>
<input type="text" id="search" placeholder="Wyszukaj drzewo…">
<button>Szukaj</button>
</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.
Akapit w <footer>. Na egzaminie po dwukropku wpisujesz swój numer zdającego (PESEL) - tutaj stoi imię i nazwisko autora rozwiązania. Ten akapit domyka kryterium 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">
<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>
<input type="text" id="search" placeholder="Wyszukaj drzewo…">
<button>Szukaj</button>
</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 24-37 · po tym etapie masz 30 z 40 kryteriów (pkt)
Dla bloku nagłówkowego: tło w postaci obrazu naglowek.png, wysokość 170 px.
background-image: url("naglowek.png") - obraz lasu jako tło bloku; ma dokładnie 170 px wysokości, tyle co blok. Gdy okno jest szersze niż 1260 px, obraz powtarza się w poziomie - to domyślne zachowanie tła.
styl.css CSS nowy plik header {
background-image: url("naglowek.png");
height: 170px;
}Dla bloku bocznego: szerokość 25%, wysokość 720 px, wyrównanie tekstu do środka.
Selektor znacznika aside. text-align: center wyśrodkuje nagłówek, zdjęcia (elementy liniowe) i wyszukiwarkę.
styl.css CSS zmienione: 5 linii header {
background-image: url("naglowek.png");
height: 170px;
}
aside {
width: 25%;
height: 720px;
text-align: center;
}Dla bloków nawigacyjnego i głównego: szerokość 55%.
Jedna reguła dla dwóch selektorów.
styl.css CSS zmienione: 3 linie header {
background-image: url("naglowek.png");
height: 170px;
}
aside {
width: 25%;
height: 720px;
text-align: center;
}
nav, main {
width: 55%;
}Dla bloku nawigacyjnego: wysokość 90 px.
Osobna reguła - wysokość dotyczy tylko nawigacji.
styl.css CSS zmienione: 3 linie header {
background-image: url("naglowek.png");
height: 170px;
}
aside {
width: 25%;
height: 720px;
text-align: center;
}
nav, main {
width: 55%;
}
nav {
height: 90px;
}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.
margin-left: 3% - jedynie lewy margines zewnętrzny (pozostałe zostają domyślne, czyli 0). box-shadow: 0 0 25px Grey - bez przesunięcia, więc cień rozlewa się równo dookoła (R.4.3). Razem z wyśrodkowaniem bloku bocznego to R.4.4.
margin: 0 0 0 3% też ustawia tylko lewy margines - ale margin: 3% dałby 3% ze wszystkich stron.
styl.css CSS zmienione: 5 linii header {
background-image: url("naglowek.png");
height: 170px;
}
aside {
width: 25%;
height: 720px;
text-align: center;
}
nav, main {
width: 55%;
}
nav {
height: 90px;
}
main {
padding: 22px;
margin-left: 3%;
box-shadow: 0 0 25px Grey;
}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 pojawia się tylko wtedy, gdy zawartość jest wyższa niż blok. Dziewięć zdjęć po ok. 200 px nie zmieści się w 530 px, więc galeria dostaje pasek (ilustracja 2), a blok główny z krótkim powitaniem - nie.
styl.css CSS zmienione: 4 linie header {
background-image: url("naglowek.png");
height: 170px;
}
aside {
width: 25%;
height: 720px;
text-align: center;
}
nav, main {
width: 55%;
}
nav {
height: 90px;
}
main {
padding: 22px;
margin-left: 3%;
box-shadow: 0 0 25px Grey;
}
#images, main {
height: 530px;
overflow: auto;
}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.
Trzy bloki dostają float: left. Blok boczny (25%) staje przy lewej krawędzi, nawigacja (55%) obok niego. Blok główny też ma 55% - obok nawigacji już się nie zmieści (25 + 55 + 55 to ponad 100%), więc schodzi niżej i dosuwa się do bloku bocznego: wychodzi dokładnie układ z ilustracji 3, z blokiem głównym pod nawigacją. Stopka z clear: both zaczyna się dopiero pod wszystkimi opływanymi blokami (R.3.1).
Bez clear: both stopka wsuwa się pod opływane bloki i jej czerwone tło pojawia się u góry, za nawigacją.
styl.css CSS zmienione: 6 linii header {
background-image: url("naglowek.png");
height: 170px;
}
aside {
width: 25%;
height: 720px;
text-align: center;
}
nav, main {
width: 55%;
}
nav {
height: 90px;
}
main {
padding: 22px;
margin-left: 3%;
box-shadow: 0 0 25px Grey;
}
#images, main {
height: 530px;
overflow: auto;
}
aside, nav, main {
float: left;
}
footer {
clear: both;
}Dla bloku stopki: kolor tła Crimson.
Tło stopki i obraz w tle nagłówka to R.4.1.
styl.css CSS zmienione: 3 linie header {
background-image: url("naglowek.png");
height: 170px;
}
aside {
width: 25%;
height: 720px;
text-align: center;
}
nav, main {
width: 55%;
}
nav {
height: 90px;
}
main {
padding: 22px;
margin-left: 3%;
box-shadow: 0 0 25px Grey;
}
#images, main {
height: 530px;
overflow: auto;
}
aside, nav, main {
float: left;
}
footer {
clear: both;
}
footer {
background-color: Crimson;
}Dla klasy opis: rozmiar czcionki 150%, wysokość wiersza (interlinia) 150%, tekst wyrównany z lewej i prawej strony (wyjustowany).
line-height to wysokość wiersza, a text-align: justify wyrównuje tekst do obu krawędzi (R.4.8).
styl.css CSS zmienione: 5 linii header {
background-image: url("naglowek.png");
height: 170px;
}
aside {
width: 25%;
height: 720px;
text-align: center;
}
nav, main {
width: 55%;
}
nav {
height: 90px;
}
main {
padding: 22px;
margin-left: 3%;
box-shadow: 0 0 25px Grey;
}
#images, main {
height: 530px;
overflow: auto;
}
aside, nav, main {
float: left;
}
footer {
clear: both;
}
footer {
background-color: Crimson;
}
.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 (tabela z kodilla.com w arkuszu) - element stoi w linii jak słowo, ale przyjmuje szerokość jak blok. Trzy pozycje po 30% mieszczą się w jednym wierszu. Punktory znikają same, bo wyświetla je tylko display: list-item.
Tu domykają się dwa kryteria zbierane przez kilka reguł: szerokości i wysokości bloków (razem z 30% elementów listy - R.4.2) oraz przewijanie i sposób wyświetlania elementów listy (R.4.5).
styl.css CSS zmienione: 4 linie header {
background-image: url("naglowek.png");
height: 170px;
}
aside {
width: 25%;
height: 720px;
text-align: center;
}
nav, main {
width: 55%;
}
nav {
height: 90px;
}
main {
padding: 22px;
margin-left: 3%;
box-shadow: 0 0 25px Grey;
}
#images, main {
height: 530px;
overflow: auto;
}
aside, nav, main {
float: left;
}
footer {
clear: both;
}
footer {
background-color: Crimson;
}
.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 wyświetla napis wielkimi literami, choć w kodzie są małe - stąd „DRZEWA LIŚCIASTE” na ilustracji 2. display: block sprawia, że odsyłacz wypełnia cały element listy i da się go kliknąć w dowolnym miejscu (R.4.7).
styl.css CSS zmienione: 7 linii header {
background-image: url("naglowek.png");
height: 170px;
}
aside {
width: 25%;
height: 720px;
text-align: center;
}
nav, main {
width: 55%;
}
nav {
height: 90px;
}
main {
padding: 22px;
margin-left: 3%;
box-shadow: 0 0 25px Grey;
}
#images, main {
height: 530px;
overflow: auto;
}
aside, nav, main {
float: left;
}
footer {
clear: both;
}
footer {
background-color: Crimson;
}
.opis {
font-size: 150%;
line-height: 150%;
text-align: justify;
}
li {
display: inline-block;
width: 30%;
}
a {
display: block;
color: #382828;
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 potomka aside img - tylko obrazy w bloku bocznym (klucz R.4.9 wymaga, żeby styl nie dotyczył innych obrazów). Dwie osobne właściwości border-right i border-bottom zamiast border, bo ten ostatni ustawiłby ramkę ze wszystkich stron.
styl.css CSS zmienione: 5 linii header {
background-image: url("naglowek.png");
height: 170px;
}
aside {
width: 25%;
height: 720px;
text-align: center;
}
nav, main {
width: 55%;
}
nav {
height: 90px;
}
main {
padding: 22px;
margin-left: 3%;
box-shadow: 0 0 25px Grey;
}
#images, main {
height: 530px;
overflow: auto;
}
aside, nav, main {
float: left;
}
footer {
clear: both;
}
footer {
background-color: Crimson;
}
.opis {
font-size: 150%;
line-height: 150%;
text-align: justify;
}
li {
display: inline-block;
width: 30%;
}
a {
display: block;
color: #382828;
font-size: 180%;
text-decoration: none;
text-transform: uppercase;
}
aside img {
border-right: 4px solid Crimson;
border-bottom: 4px solid 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ą z poprzedniej reguły, a górna i lewa krawędź, które mają grubość 0, nadal są niewidoczne. Najedź na zdjęcie w podglądzie (R.4.10).
styl.css CSS zmienione: 3 linie header {
background-image: url("naglowek.png");
height: 170px;
}
aside {
width: 25%;
height: 720px;
text-align: center;
}
nav, main {
width: 55%;
}
nav {
height: 90px;
}
main {
padding: 22px;
margin-left: 3%;
box-shadow: 0 0 25px Grey;
}
#images, main {
height: 530px;
overflow: auto;
}
aside, nav, main {
float: left;
}
footer {
clear: both;
}
footer {
background-color: Crimson;
}
.opis {
font-size: 150%;
line-height: 150%;
text-align: justify;
}
li {
display: inline-block;
width: 30%;
}
a {
display: block;
color: #382828;
font-size: 180%;
text-decoration: none;
text-transform: uppercase;
}
aside img {
border-right: 4px solid Crimson;
border-bottom: 4px solid Crimson;
border-radius: 25px;
}
aside 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). letter-spacing: 30px rozstawia litery, a margin: 0 usuwa domyślny margines nagłówka - bez tego napis o wysokości 152 px wystawałby poza blok o wysokości 170 px (R.4.6). Chiller jest na Windows; na komputerze bez niego przeglądarka użyje rodziny fantasy.
styl.css CSS zmienione: 7 linii header {
background-image: url("naglowek.png");
height: 170px;
}
aside {
width: 25%;
height: 720px;
text-align: center;
}
nav, main {
width: 55%;
}
nav {
height: 90px;
}
main {
padding: 22px;
margin-left: 3%;
box-shadow: 0 0 25px Grey;
}
#images, main {
height: 530px;
overflow: auto;
}
aside, nav, main {
float: left;
}
footer {
clear: both;
}
footer {
background-color: Crimson;
}
.opis {
font-size: 150%;
line-height: 150%;
text-align: justify;
}
li {
display: inline-block;
width: 30%;
}
a {
display: block;
color: #382828;
font-size: 180%;
text-decoration: none;
text-transform: uppercase;
}
aside img {
border-right: 4px solid Crimson;
border-bottom: 4px solid Crimson;
border-radius: 25px;
}
aside img:hover {
border-color: Teal;
}
h1 {
font-family: Chiller, fantasy;
color: Crimson;
font-size: 152px;
letter-spacing: 30px;
margin: 0;
}Kroki 38-45 · 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.
Skrypty piszesz w bloku <script> na końcu <body>. Zacznij od dwóch zmiennych z tablicami skopiowanymi z do_strony.txt: treeNames (nazwy drzew) i treeDescriptions (opisy) - nazwy po angielsku, mówiące, co przechowują (R.5.2). Tablice są „równoległe”: nazwa i opis jednego drzewa mają ten sam indeks, np. buk to treeNames[0] i treeDescriptions[0].
lisciaste.html HTML zmienione: 14 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<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>
<input type="text" id="search" placeholder="Wyszukaj drzewo…">
<button>Szukaj</button>
</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>
<script>
let treeNames = ["buk", "lipa", "wierzba", "brzoza", "dąb", "kasztanowiec", "jarzębina", "klon", "magnolia"];
let 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."
];
</script>
</body>
</html>Skrypt 1: Wykonywany po kliknięciu na obraz w bloku bocznym. Wybranie poprzez kliknięcie obrazu, powoduje wywołanie funkcji tworzącej elementy z opisem danego drzewa w bloku głównym strony (skrypt 1).
Funkcja showTree(name) („pokaż drzewo”) z parametrem: nazwą drzewa. Każdy obraz dostaje onclick z nazwą swojego drzewa w apostrofach - tą samą, co w tablicy nazw: onclick="showTree('buk')" (R.3.3, R.5.1). Przekaż nazwę, a nie numer, bo tej samej funkcji użyje skrypt 2, który zna tylko nazwę wpisaną w pole.
lisciaste.html HTML zmienione: 12 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<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" onclick="showTree('buk')">
<img src="lipa.jpg" alt="lipa" onclick="showTree('lipa')">
<img src="wierzba.jpg" alt="wierzba" onclick="showTree('wierzba')">
<img src="brzoza.jpg" alt="brzoza" onclick="showTree('brzoza')">
<img src="dab.jpg" alt="dąb" onclick="showTree('dąb')">
<img src="kasztanowiec.jpg" alt="kasztanowiec" onclick="showTree('kasztanowiec')">
<img src="jarzebina.jpg" alt="jarzębina" onclick="showTree('jarzębina')">
<img src="klon.jpg" alt="klon" onclick="showTree('klon')">
<img src="magnolia.jpg" alt="magnolia" onclick="showTree('magnolia')">
</div>
<input type="text" id="search" placeholder="Wyszukaj drzewo…">
<button>Szukaj</button>
</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>
<script>
let treeNames = ["buk", "lipa", "wierzba", "brzoza", "dąb", "kasztanowiec", "jarzębina", "klon", "magnolia"];
let 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."
];
function showTree(name) {
}
</script>
</body>
</html>Usuwa zawartość bloku głównego.
document.querySelector("main") (tabela 2) znajduje blok główny po znaczniku - jest tylko jeden, więc nie potrzeba identyfikatora. main.innerHTML = "" usuwa wszystko, co w nim jest: powitanie albo opis poprzedniego drzewa (R.5.3). Kliknij zdjęcie w podglądzie - blok główny robi się pusty.
lisciaste.html HTML zmienione: 2 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<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" onclick="showTree('buk')">
<img src="lipa.jpg" alt="lipa" onclick="showTree('lipa')">
<img src="wierzba.jpg" alt="wierzba" onclick="showTree('wierzba')">
<img src="brzoza.jpg" alt="brzoza" onclick="showTree('brzoza')">
<img src="dab.jpg" alt="dąb" onclick="showTree('dąb')">
<img src="kasztanowiec.jpg" alt="kasztanowiec" onclick="showTree('kasztanowiec')">
<img src="jarzebina.jpg" alt="jarzębina" onclick="showTree('jarzębina')">
<img src="klon.jpg" alt="klon" onclick="showTree('klon')">
<img src="magnolia.jpg" alt="magnolia" onclick="showTree('magnolia')">
</div>
<input type="text" id="search" placeholder="Wyszukaj drzewo…">
<button>Szukaj</button>
</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>
<script>
let treeNames = ["buk", "lipa", "wierzba", "brzoza", "dąb", "kasztanowiec", "jarzębina", "klon", "magnolia"];
let 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."
];
function showTree(name) {
let main = document.querySelector("main");
main.innerHTML = "";
}
</script>
</body>
</html>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.
treeNames.indexOf(name) zwraca indeks nazwy w tablicy (dla „buk” 0) - ten sam indeks wskaże opis,document.createElement("h2") (tabela 3) tworzy nagłówek, a innerText wpisuje do niego nazwę,main.appendChild(heading) wstawia go do bloku głównego (R.5.4).Klucz zaznacza, że dopisywanie przez innerHTML += "..." jest tu błędem - elementy trzeba tworzyć funkcjami DOM.
main.innerHTML += "<h2>" + name + "</h2>" daje ten sam wygląd, ale klucz (uwaga przy R.5) uznaje to za błąd - elementy mają powstać przez createElement.
lisciaste.html HTML zmienione: 4 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<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" onclick="showTree('buk')">
<img src="lipa.jpg" alt="lipa" onclick="showTree('lipa')">
<img src="wierzba.jpg" alt="wierzba" onclick="showTree('wierzba')">
<img src="brzoza.jpg" alt="brzoza" onclick="showTree('brzoza')">
<img src="dab.jpg" alt="dąb" onclick="showTree('dąb')">
<img src="kasztanowiec.jpg" alt="kasztanowiec" onclick="showTree('kasztanowiec')">
<img src="jarzebina.jpg" alt="jarzębina" onclick="showTree('jarzębina')">
<img src="klon.jpg" alt="klon" onclick="showTree('klon')">
<img src="magnolia.jpg" alt="magnolia" onclick="showTree('magnolia')">
</div>
<input type="text" id="search" placeholder="Wyszukaj drzewo…">
<button>Szukaj</button>
</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>
<script>
let treeNames = ["buk", "lipa", "wierzba", "brzoza", "dąb", "kasztanowiec", "jarzębina", "klon", "magnolia"];
let 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."
];
function showTree(name) {
let main = document.querySelector("main");
main.innerHTML = "";
let index = treeNames.indexOf(name);
let heading = document.createElement("h2");
heading.innerText = treeNames[index];
main.appendChild(heading);
}
</script>
</body>
</html>Element DOM dla paragrafu z tekstem opisującym drzewo, którego obraz został kliknięty. Do tego elementu dodaje klasę opis.
Akapit tworzysz tak samo, a opis bierzesz z drugiej tablicy pod tym samym indeksem. classList.add("opis") (tabela 3) nadaje mu klasę - akapit od razu dostaje styl z reguły .opis, jak powitanie (R.5.5). Po appendChild blok główny ma nagłówek i opis - kliknij buk w podglądzie: wygląda jak ilustracja 4 (R.5.6).
lisciaste.html HTML zmienione: 4 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<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" onclick="showTree('buk')">
<img src="lipa.jpg" alt="lipa" onclick="showTree('lipa')">
<img src="wierzba.jpg" alt="wierzba" onclick="showTree('wierzba')">
<img src="brzoza.jpg" alt="brzoza" onclick="showTree('brzoza')">
<img src="dab.jpg" alt="dąb" onclick="showTree('dąb')">
<img src="kasztanowiec.jpg" alt="kasztanowiec" onclick="showTree('kasztanowiec')">
<img src="jarzebina.jpg" alt="jarzębina" onclick="showTree('jarzębina')">
<img src="klon.jpg" alt="klon" onclick="showTree('klon')">
<img src="magnolia.jpg" alt="magnolia" onclick="showTree('magnolia')">
</div>
<input type="text" id="search" placeholder="Wyszukaj drzewo…">
<button>Szukaj</button>
</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>
<script>
let treeNames = ["buk", "lipa", "wierzba", "brzoza", "dąb", "kasztanowiec", "jarzębina", "klon", "magnolia"];
let 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."
];
function showTree(name) {
let main = document.querySelector("main");
main.innerHTML = "";
let index = treeNames.indexOf(name);
let heading = document.createElement("h2");
heading.innerText = treeNames[index];
main.appendChild(heading);
let description = document.createElement("p");
description.innerText = treeDescriptions[index];
description.classList.add("opis");
main.appendChild(description);
}
</script>
</body>
</html>Skrypt 2: Wykonywany po kliknięciu na przycisk „Szukaj”. Pobiera dane z pola edycyjnego.
Funkcja searchTree() wywoływana przez onclick przycisku. document.getElementById("search").value - tekst wpisany w pole (R.5.7). Wartość jest w polu value, a nie w innerText - pole edycyjne nie ma treści między znacznikami.
lisciaste.html HTML zmienione: 5 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<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" onclick="showTree('buk')">
<img src="lipa.jpg" alt="lipa" onclick="showTree('lipa')">
<img src="wierzba.jpg" alt="wierzba" onclick="showTree('wierzba')">
<img src="brzoza.jpg" alt="brzoza" onclick="showTree('brzoza')">
<img src="dab.jpg" alt="dąb" onclick="showTree('dąb')">
<img src="kasztanowiec.jpg" alt="kasztanowiec" onclick="showTree('kasztanowiec')">
<img src="jarzebina.jpg" alt="jarzębina" onclick="showTree('jarzębina')">
<img src="klon.jpg" alt="klon" onclick="showTree('klon')">
<img src="magnolia.jpg" alt="magnolia" onclick="showTree('magnolia')">
</div>
<input type="text" id="search" placeholder="Wyszukaj drzewo…">
<button onclick="searchTree()">Szukaj</button>
</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>
<script>
let treeNames = ["buk", "lipa", "wierzba", "brzoza", "dąb", "kasztanowiec", "jarzębina", "klon", "magnolia"];
let 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."
];
function showTree(name) {
let main = document.querySelector("main");
main.innerHTML = "";
let index = treeNames.indexOf(name);
let heading = document.createElement("h2");
heading.innerText = treeNames[index];
main.appendChild(heading);
let description = document.createElement("p");
description.innerText = treeDescriptions[index];
description.classList.add("opis");
main.appendChild(description);
}
function searchTree() {
let name = document.getElementById("search").value;
}
</script>
</body>
</html>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).
indexOf zwraca -1, gdy elementu nie ma w tablicy - stąd warunek != -1. Jeśli drzewo jest, wywołujesz funkcję skryptu 1 z wpisaną nazwą: nie piszesz drugi raz tworzenia nagłówka i opisu (arkusz sam to podpowiada). Wpisz w podglądzie „lipa” i kliknij „Szukaj” (R.5.8).
lisciaste.html HTML zmienione: 3 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<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" onclick="showTree('buk')">
<img src="lipa.jpg" alt="lipa" onclick="showTree('lipa')">
<img src="wierzba.jpg" alt="wierzba" onclick="showTree('wierzba')">
<img src="brzoza.jpg" alt="brzoza" onclick="showTree('brzoza')">
<img src="dab.jpg" alt="dąb" onclick="showTree('dąb')">
<img src="kasztanowiec.jpg" alt="kasztanowiec" onclick="showTree('kasztanowiec')">
<img src="jarzebina.jpg" alt="jarzębina" onclick="showTree('jarzębina')">
<img src="klon.jpg" alt="klon" onclick="showTree('klon')">
<img src="magnolia.jpg" alt="magnolia" onclick="showTree('magnolia')">
</div>
<input type="text" id="search" placeholder="Wyszukaj drzewo…">
<button onclick="searchTree()">Szukaj</button>
</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>
<script>
let treeNames = ["buk", "lipa", "wierzba", "brzoza", "dąb", "kasztanowiec", "jarzębina", "klon", "magnolia"];
let 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."
];
function showTree(name) {
let main = document.querySelector("main");
main.innerHTML = "";
let index = treeNames.indexOf(name);
let heading = document.createElement("h2");
heading.innerText = treeNames[index];
main.appendChild(heading);
let description = document.createElement("p");
description.innerText = treeDescriptions[index];
description.classList.add("opis");
main.appendChild(description);
}
function searchTree() {
let name = document.getElementById("search").value;
if (treeNames.indexOf(name) != -1) {
showTree(name);
}
}
</script>
</body>
</html>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: czyścisz blok główny i wstawiasz nowy akapit z komunikatem - też przez createElement i appendChild. Akapit nie ma klasy opis, więc jest mniejszy, jak na ilustracji 5. Wpisz „akacja” - pojawi się komunikat; wpisz „dąb” - opis dębu (R.5.9).
Komunikat bez wcześniejszego wyczyszczenia bloku doklejałby się pod opisem poprzednio wybranego drzewa.
lisciaste.html HTML zmienione: 6 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<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" onclick="showTree('buk')">
<img src="lipa.jpg" alt="lipa" onclick="showTree('lipa')">
<img src="wierzba.jpg" alt="wierzba" onclick="showTree('wierzba')">
<img src="brzoza.jpg" alt="brzoza" onclick="showTree('brzoza')">
<img src="dab.jpg" alt="dąb" onclick="showTree('dąb')">
<img src="kasztanowiec.jpg" alt="kasztanowiec" onclick="showTree('kasztanowiec')">
<img src="jarzebina.jpg" alt="jarzębina" onclick="showTree('jarzębina')">
<img src="klon.jpg" alt="klon" onclick="showTree('klon')">
<img src="magnolia.jpg" alt="magnolia" onclick="showTree('magnolia')">
</div>
<input type="text" id="search" placeholder="Wyszukaj drzewo…">
<button onclick="searchTree()">Szukaj</button>
</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>
<script>
let treeNames = ["buk", "lipa", "wierzba", "brzoza", "dąb", "kasztanowiec", "jarzębina", "klon", "magnolia"];
let 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."
];
function showTree(name) {
let main = document.querySelector("main");
main.innerHTML = "";
let index = treeNames.indexOf(name);
let heading = document.createElement("h2");
heading.innerText = treeNames[index];
main.appendChild(heading);
let description = document.createElement("p");
description.innerText = treeDescriptions[index];
description.classList.add("opis");
main.appendChild(description);
}
function searchTree() {
let name = document.getElementById("search").value;
if (treeNames.indexOf(name) != -1) {
showTree(name);
} else {
let main = document.querySelector("main");
main.innerHTML = "";
let message = document.createElement("p");
message.innerText = "Drzewa, o którym chcesz znaleźć informacje, nie ma w naszym Atlasie drzew.";
main.appendChild(message);
}
}
</script>
</body>
</html>Kroki 46-47 · po tym etapie masz 40 z 40 kryteriów (pkt)
Wybranie poprzez kliknięcie obrazu, powoduje wywołanie funkcji tworzącej elementy z opisem danego drzewa w bloku głównym strony (skrypt 1).
Nazwa każdego drzewa była w kodzie dwa razy: w alt i w onclick. Teraz skrypt sam dopina nasłuchiwacze do wszystkich zdjęć galerii (querySelectorAll("#images img")), a nazwę bierze z tekstu alternatywnego klikniętego obrazu - image.alt. Nowe zdjęcie dopisane w HTML-u działa od razu. Przycisk też dostaje nasłuchiwacz, a pole wyszukiwania - obsługę klawisza Enter (keydown, event.key == "Enter"), bo tak działają wyszukiwarki. Stara postać obrazu zostaje w komentarzu.
Na egzaminie wystarczy wersja wcześniejsza - klucz tego nie sprawdza.
lisciaste.html HTML zmienione: 24 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<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>
<!-- wersja z egzaminu: <img src="buk.jpg" alt="buk" onclick="showTree('buk')"> -->
<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>
<input type="text" id="search" placeholder="Wyszukaj drzewo…">
<button id="search-button">Szukaj</button>
</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>
<script>
let treeNames = ["buk", "lipa", "wierzba", "brzoza", "dąb", "kasztanowiec", "jarzębina", "klon", "magnolia"];
let 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."
];
function showTree(name) {
let main = document.querySelector("main");
main.innerHTML = "";
let index = treeNames.indexOf(name);
let heading = document.createElement("h2");
heading.innerText = treeNames[index];
main.appendChild(heading);
let description = document.createElement("p");
description.innerText = treeDescriptions[index];
description.classList.add("opis");
main.appendChild(description);
}
function searchTree() {
let name = document.getElementById("search").value;
if (treeNames.indexOf(name) != -1) {
showTree(name);
} else {
let main = document.querySelector("main");
main.innerHTML = "";
let message = document.createElement("p");
message.innerText = "Drzewa, o którym chcesz znaleźć informacje, nie ma w naszym Atlasie drzew.";
main.appendChild(message);
}
}
// zamiast atrybutów onclick w obrazach i przycisku
for (const image of document.querySelectorAll("#images img")) {
image.addEventListener("click", function () {
showTree(image.alt);
});
}
document.getElementById("search-button").addEventListener("click", searchTree);
document.getElementById("search").addEventListener("keydown", function (event) {
if (event.key == "Enter") {
searchTree();
}
});
</script>
</body>
</html>Sprawdza czy wpisana przez użytkownika nazwa drzewa znajduje się w tablicy nazw drzew.
Wersja z egzaminu porównuje napis dokładnie: „Buk” albo „buk ” ze spacją na końcu kończą się komunikatem, że drzewa nie ma - sprawdzone. Poprawki:
trim() obcina spacje z początku i końca, a toLowerCase() zamienia litery na małe - tablica nazw ma same małe,includes odpowiada wprost na pytanie „czy jest w tablicy” zamiast porównywania z -1,replaceChildren(message) czyści blok główny i wstawia komunikat jednym wywołaniem, a textContent wpisuje zwykły tekst.Przy okazji widać ograniczenie: „dab” bez polskiej litery nadal nie znajdzie dębu - pełna obsługa wymagałaby porównywania bez znaków diakrytycznych. Stara funkcja zostaje w komentarzu /* */. Na egzaminie wystarczy wersja wcześniejsza - klucz tego nie sprawdza.
lisciaste.html HTML zmienione: 13 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<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>
<!-- wersja z egzaminu: <img src="buk.jpg" alt="buk" onclick="showTree('buk')"> -->
<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>
<input type="text" id="search" placeholder="Wyszukaj drzewo…">
<button id="search-button">Szukaj</button>
</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>
<script>
let treeNames = ["buk", "lipa", "wierzba", "brzoza", "dąb", "kasztanowiec", "jarzębina", "klon", "magnolia"];
let 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."
];
function showTree(name) {
let main = document.querySelector("main");
main.innerHTML = "";
let index = treeNames.indexOf(name);
let heading = document.createElement("h2");
heading.innerText = treeNames[index];
main.appendChild(heading);
let description = document.createElement("p");
description.innerText = treeDescriptions[index];
description.classList.add("opis");
main.appendChild(description);
}
function searchTree() {
let name = document.getElementById("search").value.trim().toLowerCase();
if (treeNames.includes(name)) {
showTree(name);
} else {
let message = document.createElement("p");
message.textContent = "Drzewa, o którym chcesz znaleźć informacje, nie ma w naszym Atlasie drzew.";
document.querySelector("main").replaceChildren(message);
}
}
/* wersja z egzaminu:
function searchTree() {
let name = document.getElementById("search").value;
if (treeNames.indexOf(name) != -1) {
showTree(name);
} else {
let main = document.querySelector("main");
main.innerHTML = "";
let message = document.createElement("p");
message.innerText = "Drzewa, o którym chcesz znaleźć informacje, nie ma w naszym Atlasie drzew.";
main.appendChild(message);
}
}
*/
// zamiast atrybutów onclick w obrazach i przycisku
for (const image of document.querySelectorAll("#images img")) {
image.addEventListener("click", function () {
showTree(image.alt);
});
}
document.getElementById("search-button").addEventListener("click", searchTree);
document.getElementById("search").addEventListener("keydown", function (event) {
if (event.key == "Enter") {
searchTree();
}
});
</script>
</body>
</html>Krok 48 · 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 przeglądarka.txt wpisujesz nazwę przeglądarki, w której sprawdzasz stronę.
W folderze z numerem zdającego: lisciaste.html, 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. Nagraj płytę, sprawdź jej odczyt i opisz ją numerem zdającego.
przeglądarka.txt Tekst nowy plik Google ChromePodgląd strony bez zmian - taki jak po kroku 47.
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.