Rozwiązanie buduje portal wypożyczalni gier: baza bazagier (gry, producenci, wydawcy) i cztery zapytania - wyszukiwanie fragmentu tekstu z przedziałem dat, złączenie zewnętrzne LEFT JOIN z COUNT i GROUP BY (także producent bez gier), złączenie trzech tabel z aliasami i dodanie kolumny ALTER TABLE, potem grafika gra10.jpg przeskalowana i wykadrowana do 1024 x 576 px, dwie strony index.html (galeria dziesięciu miniatur) i onas.html (opis z pogrubieniami i pochyleniami), style w styl_gier.css i skrypt skrypty.js z funkcją licznik, która zapamiętuje liczbę wejść w localStorage przeglądarki.
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ą. Skrypt jest najpierw pisany najprościej, metodami z tabeli 1 arkusza (getItem, setItem) i atrybutem onload, a na końcu zostaje przerobiony na wersję odporną na przeglądarkę bez dostępu do pamięci i dopinaną nasłuchiwaczem zdarzeń. W tym arkuszu nie ma PHP.
Obok jest druga wersja tego rozwiązania - zakładka Nowoczesny kod (flex, try/catch): te same punkty, ale układ na flexboksie, zapytania z aliasami tabel i licznik odporny od pierwszej linijki na przeglądarkę bez dostępu do pamięci.
Baza i obrazy gier pochodzą z prawdziwego archiwum pliki18 (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.
Jak liczą się punkty. Klucz ma 35 kryteriów (R.1.1 - R.5.6), każde za 1 punkt. Próg zdania części praktycznej to 75%, czyli 27 punktów - można stracić 8 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 35 kryteriów (pkt)
Utwórz bazę danych o nazwie bazagier, z zestawem znaków utf8mb4_unicode_ci.
Rozpakuj pliki18.7z z pulpitu (hasło WypożyczalniaGierWideo - z literą „ż”) do folderu z numerem zdającego: plik bazagier.sql, obrazy gra1.jpg - gra9.jpg, gra10.png i plik z tekstami. W phpMyAdmin: Nowa, nazwa bazagier, porównywanie dokładnie utf8mb4_unicode_ci, jak podaje arkusz.
Do utworzonej bazy zaimportuj tabele z pliku bazagier.sql.
Import → bazagier.sql → Wykonaj. Powstają trzy tabele z ilustracji 1: gry (tytuł, gatunki oddzielone przecinkami, data wydania i dwa klucze obce), producenci i wydawcy. Gra wskazuje producenta polem id_producenta, a wydawcę polem id_wydawcy - te same nazwy pól w obu tabelach przydadzą się w złączeniach USING.
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. Uwaga na formaty: import w PNG, a zrzuty zapytań w JPEG - arkusz podaje je osobno.
Wykadrowany zrzut albo zrzut bez paska zadań nie jest oceniany (uwaga w kluczu przy R.1).
Zapytanie 1: wybierające jedynie tytuły i gatunki gier wydanych w latach 2018 ÷ 2023, dla których jednym z gatunków jest „Niezależne”.
SELECT tytul, gatunek FROM gry - dwie kolumny z jednej tabeli,gatunek LIKE '%Niezależne%' - gatunki stoją w jednym polu po przecinkach, więc szukasz fragmentu tekstu w dowolnym miejscu (% z obu stron),data_wydania BETWEEN '2018-01-01' AND '2023-12-31' - przedział obustronnie domknięty, czyli od pierwszego dnia 2018 do ostatniego dnia 2023.Wynik: 2 wiersze - The Invincible (2023) i Moonlighter (2018). This War of Mine też jest niezależna, ale wyszła w 2014. Zrzut: kw1.jpg.
BETWEEN 2018 AND 2023 na polu typu date porównuje datę z liczbą i nie zwraca nic. Albo pełne daty, albo YEAR(data_wydania) BETWEEN 2018 AND 2023.
kwerendy.txt Tekst nowy plik -- Zapytanie 1
SELECT tytul, gatunek FROM gry WHERE gatunek LIKE '%Niezależne%' AND data_wydania BETWEEN '2018-01-01' AND '2023-12-31';
Zapytanie 2: wybierające jedynie nazwę każdego producenta w bazie oraz liczbę gier, które ten producent wyprodukował, zgrupowane po nazwie producenta. Kolumnie z liczbą gier należy nadać nazwę (alias) „liczba_gier”. Należy posłużyć się relacją i odpowiednim rodzajem złączenia (wybrani są wszyscy producenci, nawet z zerową liczbą gier).
FROM producenci LEFT JOIN gry USING(id_producenta) - złączenie lewostronne: każdy producent trafia do wyniku, nawet jeśli nie ma żadnej gry (wtedy pola gry są NULL),GROUP BY producenci.nazwa - jeden wiersz na producenta,COUNT(gry.id_gry) AS liczba_gier - liczy gry w grupie; COUNT z nazwą kolumny pomija NULL, więc producent bez gier dostaje 0.Wynik: 8 wierszy, Deep Silver z liczbą 0 - jak w kluczu. Sprawdzone na tej bazie: zwykły JOIN dałby tylko 7 wiersze (bez Deep Silver), a COUNT(*) policzyłby dla Deep Silver 1 grę - wiersz z samymi NULL-ami też jest wierszem. Zrzut: kw2.jpg.
JOIN (wewnętrzne) zamiast LEFT JOIN gubi producenta bez gier - klucz pisze wprost, że LEFT JOIN jest obowiązkowe.
kwerendy.txt Tekst zmienione: 3 linie -- Zapytanie 1
SELECT tytul, gatunek FROM gry WHERE gatunek LIKE '%Niezależne%' AND data_wydania BETWEEN '2018-01-01' AND '2023-12-31';
-- Zapytanie 2
SELECT producenci.nazwa, COUNT(gry.id_gry) AS liczba_gier FROM producenci LEFT JOIN gry USING(id_producenta) GROUP BY producenci.nazwa;
Zapytanie 3: wybierające identyfikatory i tytuły gier, odpowiadającą im nazwę producenta z tabeli producenci oraz odpowiadającą im nazwę wydawcy z tabeli wydawcy. Kolumnie z nazwą producenta należy nadać nazwę (alias) „producent”, a kolumnie z nazwą wydawcy – (alias) „wydawca”. Należy posłużyć się złożoną relacją.
FROM gry JOIN producenci USING(id_producenta) - pierwsze złączenie: gra z producentem,JOIN wydawcy USING(id_wydawcy) - drugie złączenie dokłada wydawcę; to jest „złożona relacja” z arkusza,producenci.nazwa AS producent, wydawcy.nazwa AS wydawca - obie tabele mają kolumnę nazwa, więc bez aliasów wynik miałby dwie kolumny o tej samej nazwie.Wynik: 10 wierszy - po jednym dla każdej gry. Zrzut: kw3.jpg.
Samo nazwa bez nazwy tabeli kończy się błędem „Column 'nazwa' in field list is ambiguous” - obie dołączone tabele mają takie pole.
kwerendy.txt Tekst zmienione: 3 linie -- Zapytanie 1
SELECT tytul, gatunek FROM gry WHERE gatunek LIKE '%Niezależne%' AND data_wydania BETWEEN '2018-01-01' AND '2023-12-31';
-- Zapytanie 2
SELECT producenci.nazwa, COUNT(gry.id_gry) AS liczba_gier FROM producenci LEFT JOIN gry USING(id_producenta) GROUP BY producenci.nazwa;
-- Zapytanie 3
SELECT gry.id_gry, gry.tytul, producenci.nazwa AS producent, wydawcy.nazwa AS wydawca FROM gry JOIN producenci USING(id_producenta) JOIN wydawcy USING(id_wydawcy);
Zapytanie 4: dodające do tabeli gry kolumnę ocena typu liczbowego, kolumna nie może być pusta, a jej wartość domyślna to 5.
ALTER TABLE gry ADD COLUMN ocena INT NOT NULL DEFAULT 5 - zmiana struktury tabeli: nowa kolumna typu całkowitego, NOT NULL („nie może być pusta”) i DEFAULT 5. Istniejące gry od razu dostają w niej 5, bo serwer musi czymś wypełnić pole bez NULL. phpMyAdmin pokazuje komunikat o pustym wyniku - to nie błąd, ALTER nie zwraca wierszy. Na zrzucie kw4.jpg pokazujesz strukturę tabeli z nową kolumną.
kwerendy.txt Tekst zmienione: 3 linie -- Zapytanie 1
SELECT tytul, gatunek FROM gry WHERE gatunek LIKE '%Niezależne%' AND data_wydania BETWEEN '2018-01-01' AND '2023-12-31';
-- Zapytanie 2
SELECT producenci.nazwa, COUNT(gry.id_gry) AS liczba_gier FROM producenci LEFT JOIN gry USING(id_producenta) GROUP BY producenci.nazwa;
-- Zapytanie 3
SELECT gry.id_gry, gry.tytul, producenci.nazwa AS producent, wydawcy.nazwa AS wydawca FROM gry JOIN producenci USING(id_producenta) JOIN wydawcy USING(id_wydawcy);
-- Zapytanie 4
ALTER TABLE gry ADD COLUMN ocena INT NOT NULL DEFAULT 5;
Kroki 8-26 · po tym etapie masz 18 z 35 kryteriów (pkt)
Plik gra10.png, wypakowany z archiwum, należy przeskalować do szerokości 1024 px z zachowaniem proporcji obrazu, a następnie wykadrować w pionie do wymiaru 576 px. Tak przygotowaną grafikę należy zapisać w pliku gra10.jpg.
W GIMP-ie: Obraz → Skaluj obraz, szerokość 1024 przy zamkniętym łańcuchu proporcji - z 1792 x 1024 px wychodzi 1024 x 585. Potem Obraz → Rozmiar płótna: wysokość 576, obraz wyśrodkowany w pionie (odcinasz po kilka pikseli z góry i z dołu) i Obraz → Spłaszcz obraz. Plik → Wyeksportuj jako gra10.jpg.
Teraz gra10.jpg ma dokładnie 1024 x 576 px - tyle samo co pozostałe dziewięć obrazów z archiwum, więc miniatury w galerii będą równe.
Skalowanie od razu do 1024 x 576 bez zachowania proporcji spłaszcza obraz - arkusz każe najpierw skalować z proporcją, a dopiero potem kadrować.
Zapisane w języku HTML5.
Zacznij od index.html z deklaracją <!DOCTYPE html>. Druga strona, onas.html, powstanie z kopii - cechy wspólne wpisujesz raz.
index.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 kryterium R.2.2.
index.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>.
index.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
</head>
<body>
</body>
</html>Tytuł strony widoczny na karcie przeglądarki: „Najlepsze gry | PoGRAJmy!”.
<title> w <head>; pionową kreskę przepisujesz jak w arkuszu. Kodowanie i tytuł razem to R.2.3.
index.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Najlepsze gry | PoGRAJmy!</title>
</head>
<body>
</body>
</html>Arkusz stylów styl_gier.css właściwie połączony z kodem strony.
Nazwa z podkreśleniem: styl_gier.css. Całe formatowanie ma pochodzić z tego pliku (R.3.2) - bez atrybutów style.
index.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Najlepsze gry | PoGRAJmy!</title>
<link rel="stylesheet" href="styl_gier.css">
</head>
<body>
</body>
</html>Plik skryptu skrypty.js właściwie połączony z kodem strony.
<script src="skrypty.js"></script> - znacznik zawsze z zamknięciem, nawet gdy kod jest w osobnym pliku. Sam plik skrypty.js napiszesz w etapie skryptu; w <head> może stać, bo funkcja i tak ruszy dopiero po załadowaniu strony.
index.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Najlepsze gry | PoGRAJmy!</title>
<link rel="stylesheet" href="styl_gier.css">
<script src="skrypty.js"></script>
</head>
<body>
</body>
</html>Podział strony na bloki: nagłówkowy 1, nagłówkowy 2, główny, stopki. Podział zrealizowany za pomocą semantycznych znaczników języka HTML5 tak, aby po uruchomieniu w przeglądarce układ bloków był zgodny z ilustracją 3.
Dwa znaczniki <header> jeden po drugim, potem <main> i <footer> - dokładnie układ z klucza R.2.4: header+header, main, footer. Nagłówki różnią się tylko stylem (szerokość, wyrównanie), więc dostają identyfikatory header1 i header2.
index.html HTML zmienione: 8 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Najlepsze gry | PoGRAJmy!</title>
<link rel="stylesheet" href="styl_gier.css">
<script src="skrypty.js"></script>
</head>
<body>
<header id="header1">
</header>
<header id="header2">
</header>
<main>
</main>
<footer>
</footer>
</body>
</html>Zawartość bloku nagłówkowego 1: Nagłówek drugiego stopnia zawierający odnośnik do pliku index.html o treści „PoGRAJmy!”.
Odnośnik <a> wewnątrz <h2> - nagłówek ma treść, a kliknięcie w nią prowadzi na stronę główną (R.2.5).
index.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Najlepsze gry | PoGRAJmy!</title>
<link rel="stylesheet" href="styl_gier.css">
<script src="skrypty.js"></script>
</head>
<body>
<header id="header1">
<h2><a href="index.html">PoGRAJmy!</a></h2>
</header>
<header id="header2">
</header>
<main>
</main>
<footer>
</footer>
</body>
</html>Zawartość bloku nagłówkowego 2: Lista punktowana (nieuporządkowana), której elementami są: odnośnik do pliku index.html o treści „Strona główna”, odnośnik do pliku onas.html o treści „O nas”.
Lista nieuporządkowana <ul>, w każdym <li> jeden odnośnik (R.2.6). Na razie z punktorami i jedno pod drugim - w menu poziome zamieni je styl. Odnośniki z logo i menu prowadzą do index.html i onas.html (R.3.3); druga strona powstanie za kilka kroków.
index.html HTML zmienione: 4 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Najlepsze gry | PoGRAJmy!</title>
<link rel="stylesheet" href="styl_gier.css">
<script src="skrypty.js"></script>
</head>
<body>
<header id="header1">
<h2><a href="index.html">PoGRAJmy!</a></h2>
</header>
<header id="header2">
<ul>
<li><a href="index.html">Strona główna</a></li>
<li><a href="onas.html">O nas</a></li>
</ul>
</header>
<main>
</main>
<footer>
</footer>
</body>
</html>Zawartość stopki: Paragraf o treści: „Autor:” dalej wstawiony numer zdającego. Numer zdającego należy zapisać przy użyciu znacznika semantycznego oznaczającego tekst ważny domyślnie formatowany jako pogrubiony.
Znacznik <strong> oznacza tekst ważny - przeglądarka domyślnie go pogrubia. <b> też pogrubia, ale nie niesie znaczenia, a arkusz prosi o znacznik semantyczny. Na egzaminie wpisujesz swój numer zdającego (PESEL) - tutaj stoi imię i nazwisko autora rozwiązania.
index.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Najlepsze gry | PoGRAJmy!</title>
<link rel="stylesheet" href="styl_gier.css">
<script src="skrypty.js"></script>
</head>
<body>
<header id="header1">
<h2><a href="index.html">PoGRAJmy!</a></h2>
</header>
<header id="header2">
<ul>
<li><a href="index.html">Strona główna</a></li>
<li><a href="onas.html">O nas</a></li>
</ul>
</header>
<main>
</main>
<footer>
<p>Autor: <strong>Bartosz Bryniarski</strong></p>
</footer>
</body>
</html>Paragraf zawierający efekt działania funkcji licznik ze skryptu.
Drugi akapit stopki jest na razie pusty - napis z liczbą wejść wstawi do niego skrypt. Identyfikator counter pozwoli go znaleźć przez getElementById. Dwa akapity w stopce, w tym jeden z numerem zdającego, to R.2.7.
index.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Najlepsze gry | PoGRAJmy!</title>
<link rel="stylesheet" href="styl_gier.css">
<script src="skrypty.js"></script>
</head>
<body>
<header id="header1">
<h2><a href="index.html">PoGRAJmy!</a></h2>
</header>
<header id="header2">
<ul>
<li><a href="index.html">Strona główna</a></li>
<li><a href="onas.html">O nas</a></li>
</ul>
</header>
<main>
</main>
<footer>
<p>Autor: <strong>Bartosz Bryniarski</strong></p>
<p id="counter"></p>
</footer>
</body>
</html>Zawartość bloku głównego: Nagłówek pierwszego stopnia o treści: „Oto nasz wybór najciekawszych gier”.
<h1> w <main> (R.2.8).
index.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Najlepsze gry | PoGRAJmy!</title>
<link rel="stylesheet" href="styl_gier.css">
<script src="skrypty.js"></script>
</head>
<body>
<header id="header1">
<h2><a href="index.html">PoGRAJmy!</a></h2>
</header>
<header id="header2">
<ul>
<li><a href="index.html">Strona główna</a></li>
<li><a href="onas.html">O nas</a></li>
</ul>
</header>
<main>
<h1>Oto nasz wybór najciekawszych gier</h1>
</main>
<footer>
<p>Autor: <strong>Bartosz Bryniarski</strong></p>
<p id="counter"></p>
</footer>
</body>
</html>Blok zawierający dziesięć obrazów od gra1.jpg do gra10.jpg, każdy obraz ma ustawiony: Tekst alternatywny „Miniatura gry”. Podpowiedź (dymek pojawiający się po najechaniu kursorem na obraz) „Tytuł gry”.
Blok <div class="gallery"> z dziesięcioma obrazami. alt to tekst alternatywny (dla czytnika ekranu i gdy obraz się nie wczyta), a title - dymek po najechaniu kursorem, widoczny na ilustracji 2 (R.2.9). Klasa przyda się w CSS i na drugiej stronie. Obrazy mają na razie pełne 1024 px szerokości - zmniejszy je styl img.
Pomylenie atrybutów: dymek daje title, a nie alt - przeglądarki nie pokazują tekstu alt po najechaniu kursorem.
index.html HTML zmienione: 12 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Najlepsze gry | PoGRAJmy!</title>
<link rel="stylesheet" href="styl_gier.css">
<script src="skrypty.js"></script>
</head>
<body>
<header id="header1">
<h2><a href="index.html">PoGRAJmy!</a></h2>
</header>
<header id="header2">
<ul>
<li><a href="index.html">Strona główna</a></li>
<li><a href="onas.html">O nas</a></li>
</ul>
</header>
<main>
<h1>Oto nasz wybór najciekawszych gier</h1>
<div class="gallery">
<img src="gra1.jpg" alt="Miniatura gry" title="Tytuł gry">
<img src="gra2.jpg" alt="Miniatura gry" title="Tytuł gry">
<img src="gra3.jpg" alt="Miniatura gry" title="Tytuł gry">
<img src="gra4.jpg" alt="Miniatura gry" title="Tytuł gry">
<img src="gra5.jpg" alt="Miniatura gry" title="Tytuł gry">
<img src="gra6.jpg" alt="Miniatura gry" title="Tytuł gry">
<img src="gra7.jpg" alt="Miniatura gry" title="Tytuł gry">
<img src="gra8.jpg" alt="Miniatura gry" title="Tytuł gry">
<img src="gra9.jpg" alt="Miniatura gry" title="Tytuł gry">
<img src="gra10.jpg" alt="Miniatura gry" title="Tytuł gry">
</div>
</main>
<footer>
<p>Autor: <strong>Bartosz Bryniarski</strong></p>
<p id="counter"></p>
</footer>
</body>
</html>Cechy strony onas.html: Tytuł strony widoczny na karcie przeglądarki: „O nas | PoGRAJmy!”.
Zapisz index.html jako onas.html - nagłówki, menu i stopka są wspólne. Zmień tytuł, a blok główny opróżnij: wypełnią go kolejne kroki. Teraz odnośnik „O nas” w menu już działa.
onas.html HTML nowy plik <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>O nas | PoGRAJmy!</title>
<link rel="stylesheet" href="styl_gier.css">
<script src="skrypty.js"></script>
</head>
<body>
<header id="header1">
<h2><a href="index.html">PoGRAJmy!</a></h2>
</header>
<header id="header2">
<ul>
<li><a href="index.html">Strona główna</a></li>
<li><a href="onas.html">O nas</a></li>
</ul>
</header>
<main>
</main>
<footer>
<p>Autor: <strong>Bartosz Bryniarski</strong></p>
<p id="counter"></p>
</footer>
</body>
</html>Zawartość bloku głównego: Nagłówek pierwszego stopnia o treści: „Twoje centrum rozrywki”.
<h1> w bloku głównym drugiej strony.
onas.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>O nas | PoGRAJmy!</title>
<link rel="stylesheet" href="styl_gier.css">
<script src="skrypty.js"></script>
</head>
<body>
<header id="header1">
<h2><a href="index.html">PoGRAJmy!</a></h2>
</header>
<header id="header2">
<ul>
<li><a href="index.html">Strona główna</a></li>
<li><a href="onas.html">O nas</a></li>
</ul>
</header>
<main>
<h1>Twoje centrum rozrywki</h1>
</main>
<footer>
<p>Autor: <strong>Bartosz Bryniarski</strong></p>
<p id="counter"></p>
</footer>
</body>
</html>Blok zawierający trzy obrazy: gra10.jpg, gra5.jpg oraz gra1.jpg.
Ten sam blok gallery co na stronie głównej, w kolejności z arkusza: najpierw przerobiony gra10.jpg. Arkusz nie podaje tu tekstu alternatywnego, ale każdy obraz powinien go mieć - wpisujesz krótki opis.
onas.html HTML zmienione: 5 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>O nas | PoGRAJmy!</title>
<link rel="stylesheet" href="styl_gier.css">
<script src="skrypty.js"></script>
</head>
<body>
<header id="header1">
<h2><a href="index.html">PoGRAJmy!</a></h2>
</header>
<header id="header2">
<ul>
<li><a href="index.html">Strona główna</a></li>
<li><a href="onas.html">O nas</a></li>
</ul>
</header>
<main>
<h1>Twoje centrum rozrywki</h1>
<div class="gallery">
<img src="gra10.jpg" alt="Grafika z gry">
<img src="gra5.jpg" alt="Grafika z gry">
<img src="gra1.jpg" alt="Grafika z gry">
</div>
</main>
<footer>
<p>Autor: <strong>Bartosz Bryniarski</strong></p>
<p id="counter"></p>
</footer>
</body>
</html>Trzy paragrafy z treścią skopiowaną z pliku teksty_marketingowe.txt.
Każdy z trzech akapitów pliku teksty_marketingowe.txt kopiujesz do osobnego <p>. Gwiazdki i podkreślenia zostają na razie w tekście - w podglądzie widać je dosłownie. To znaczniki do zamiany w następnym kroku.
onas.html HTML zmienione: 3 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>O nas | PoGRAJmy!</title>
<link rel="stylesheet" href="styl_gier.css">
<script src="skrypty.js"></script>
</head>
<body>
<header id="header1">
<h2><a href="index.html">PoGRAJmy!</a></h2>
</header>
<header id="header2">
<ul>
<li><a href="index.html">Strona główna</a></li>
<li><a href="onas.html">O nas</a></li>
</ul>
</header>
<main>
<h1>Twoje centrum rozrywki</h1>
<div class="gallery">
<img src="gra10.jpg" alt="Grafika z gry">
<img src="gra5.jpg" alt="Grafika z gry">
<img src="gra1.jpg" alt="Grafika z gry">
</div>
<p>Zapraszamy do naszej wypożyczalni *gier konsolowych i komputerowych*, gdzie każdy znajdzie coś dla siebie! Oferujemy szeroką gamę tytułów, od najnowszych hitów po klasyczne produkcje, które wciąż cieszą się niesłabnącą popularnością. Dzięki nam możesz cieszyć się ulubionymi grami bez konieczności ich zakupu, co pozwala na oszczędność pieniędzy i przestrzeni. Nasza wypożyczalnia to idealne miejsce dla każdego miłośnika gier, niezależnie od wieku i preferencji.</p>
<p>Nasza oferta jest dostosowana do potrzeb wszystkich graczy. Posiadamy _gry na różne platformy_, w tym PlayStation, Xbox, Nintendo oraz PC. Regularnie aktualizujemy nasz katalog, abyś zawsze miał dostęp do najnowszych premier. Niezależnie od tego, czy jesteś fanem dynamicznych strzelanek, epickich RPG, czy relaksujących gier strategicznych, u nas znajdziesz coś, co spełni Twoje oczekiwania.</p>
<p>Wypożyczanie gier w naszej wypożyczalni jest proste i wygodne. Możesz dokonać *rezerwacji online* lub odwiedzić nas osobiście, gdzie nasi pracownicy chętnie doradzą i pomogą w wyborze odpowiednich tytułów. Gwarantujemy _atrakcyjne ceny i elastyczne warunki wypożyczenia_, dostosowane do Twoich potrzeb. Dołącz do grona naszych zadowolonych klientów i odkryj, jak wiele radości może przynieść świat gier!</p>
</main>
<footer>
<p>Autor: <strong>Bartosz Bryniarski</strong></p>
<p id="counter"></p>
</footer>
</body>
</html>W skopiowanej treści fragmenty między gwiazdkami należy zapisać za pomocą znaczników semantycznych oznaczających tekst ważny, formatowany domyślnie jako pogrubiony. Fragmenty między znakami podkreślenia zapisać za pomocą znaczników semantycznych oznaczających tekst uwypuklony, formatowany domyślnie jako pochylony. Znaki gwiazdki i podkreślenia należy usunąć (ilustracja 4).
Gwiazdki i podkreślenia to zapis z edytorów tekstu (tzw. Markdown) - w HTML-u zamieniasz je na znaczniki: fragment między * na <strong> (tekst ważny, pogrubiony), a fragment między _ na <em> (tekst uwypuklony, pochylony). Same znaki usuwasz. W tekście są dwa pogrubienia i dwa pochylenia - jak na ilustracji 4 (R.2.10).
<b> i <i> wyglądają tak samo, ale nie są znacznikami semantycznymi z arkusza - klucz sprawdza <strong> i <em>.
onas.html HTML zmienione: 3 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>O nas | PoGRAJmy!</title>
<link rel="stylesheet" href="styl_gier.css">
<script src="skrypty.js"></script>
</head>
<body>
<header id="header1">
<h2><a href="index.html">PoGRAJmy!</a></h2>
</header>
<header id="header2">
<ul>
<li><a href="index.html">Strona główna</a></li>
<li><a href="onas.html">O nas</a></li>
</ul>
</header>
<main>
<h1>Twoje centrum rozrywki</h1>
<div class="gallery">
<img src="gra10.jpg" alt="Grafika z gry">
<img src="gra5.jpg" alt="Grafika z gry">
<img src="gra1.jpg" alt="Grafika z gry">
</div>
<p>Zapraszamy do naszej wypożyczalni <strong>gier konsolowych i komputerowych</strong>, gdzie każdy znajdzie coś dla siebie! Oferujemy szeroką gamę tytułów, od najnowszych hitów po klasyczne produkcje, które wciąż cieszą się niesłabnącą popularnością. Dzięki nam możesz cieszyć się ulubionymi grami bez konieczności ich zakupu, co pozwala na oszczędność pieniędzy i przestrzeni. Nasza wypożyczalnia to idealne miejsce dla każdego miłośnika gier, niezależnie od wieku i preferencji.</p>
<p>Nasza oferta jest dostosowana do potrzeb wszystkich graczy. Posiadamy <em>gry na różne platformy</em>, w tym PlayStation, Xbox, Nintendo oraz PC. Regularnie aktualizujemy nasz katalog, abyś zawsze miał dostęp do najnowszych premier. Niezależnie od tego, czy jesteś fanem dynamicznych strzelanek, epickich RPG, czy relaksujących gier strategicznych, u nas znajdziesz coś, co spełni Twoje oczekiwania.</p>
<p>Wypożyczanie gier w naszej wypożyczalni jest proste i wygodne. Możesz dokonać <strong>rezerwacji online</strong> lub odwiedzić nas osobiście, gdzie nasi pracownicy chętnie doradzą i pomogą w wyborze odpowiednich tytułów. Gwarantujemy <em>atrakcyjne ceny i elastyczne warunki wypożyczenia</em>, dostosowane do Twoich potrzeb. Dołącz do grona naszych zadowolonych klientów i odkryj, jak wiele radości może przynieść świat gier!</p>
</main>
<footer>
<p>Autor: <strong>Bartosz Bryniarski</strong></p>
<p id="counter"></p>
</footer>
</body>
</html>Kroki 27-38 · po tym etapie masz 29 z 35 kryteriów (pkt)
Domyślne formatowanie wszystkich selektorów: krój czcionki „Segoe UI”, a w przypadku jej braku „Tahoma”.
Selektor *, kroje w kolejności z arkusza, nazwa ze spacją w cudzysłowie (R.4.1).
styl_gier.css CSS nowy plik * {
font-family: "Segoe UI", Tahoma;
}Dla bloku nagłówkowego 1: szerokość 40%.
Selektor identyfikatora #header1.
styl_gier.css CSS zmienione: 3 linie * {
font-family: "Segoe UI", Tahoma;
}
#header1 {
width: 40%;
}Dla bloku nagłówkowego 2: szerokość 60%, wyrównanie zawartości bloku do prawej strony.
text-align: right dosuwa menu do prawej krawędzi (R.4.9). Bloki wciąż stoją jeden pod drugim - obok siebie ustawi je następny krok.
styl_gier.css CSS zmienione: 4 linie * {
font-family: "Segoe UI", Tahoma;
}
#header1 {
width: 40%;
}
#header2 {
width: 60%;
text-align: right;
}Podział zrealizowany za pomocą semantycznych znaczników języka HTML5 tak, aby po uruchomieniu w przeglądarce układ bloków był zgodny z ilustracją 3.
Oba nagłówki dostają float: left - stają obok siebie, a 40% + 60% wypełnia całą szerokość. Blok główny ma clear: both: zaczyna się dopiero pod opływanymi nagłówkami, zamiast wsuwać się pod nie. Stopka jest pod blokiem głównym (R.3.1).
Bez clear: both blok główny podjeżdża pod nagłówki - klucz każe sprawdzić w inspektorze, że żaden blok nie zachodzi na inny.
styl_gier.css CSS zmienione: 6 linii * {
font-family: "Segoe UI", Tahoma;
}
#header1 {
width: 40%;
}
#header2 {
width: 60%;
text-align: right;
}
#header1, #header2 {
float: left;
}
main {
clear: both;
}Dla listy punktowanej: brak punktora.
list-style: none usuwa punktory (R.4.6).
styl_gier.css CSS zmienione: 3 linie * {
font-family: "Segoe UI", Tahoma;
}
#header1 {
width: 40%;
}
#header2 {
width: 60%;
text-align: right;
}
#header1, #header2 {
float: left;
}
main {
clear: both;
}
ul {
list-style: none;
}Dla elementu listy: wyświetlanie jako element liniowy.
display: inline - elementy listy przestają być blokami i stają obok siebie jak słowa w zdaniu. Menu jest poziome (R.4.7).
styl_gier.css CSS zmienione: 3 linie * {
font-family: "Segoe UI", Tahoma;
}
#header1 {
width: 40%;
}
#header2 {
width: 60%;
text-align: right;
}
#header1, #header2 {
float: left;
}
main {
clear: both;
}
ul {
list-style: none;
}
li {
display: inline;
}Dla odnośnika: brak podkreślenia, kolor czcionki #0077A2.
Selektor a działa na wszystkie odnośniki, także na logo w <h2> (R.4.5).
styl_gier.css CSS zmienione: 4 linie * {
font-family: "Segoe UI", Tahoma;
}
#header1 {
width: 40%;
}
#header2 {
width: 60%;
text-align: right;
}
#header1, #header2 {
float: left;
}
main {
clear: both;
}
ul {
list-style: none;
}
li {
display: inline;
}
a {
text-decoration: none;
color: #0077A2;
}Jedynie dla odnośnika znajdującego się w elemencie listy: marginesy wewnętrzne 1 em.
Selektor potomka li a (ze spacją) wybiera tylko odnośniki wewnątrz elementów listy - logo w <h2> zostaje bez marginesów, o to chodzi w słowie „jedynie” (R.4.3). 1em to wielkość bieżącej czcionki.
padding dopisany do całego selektora a dotyka też logo - kryterium wymaga marginesów jedynie w menu.
styl_gier.css CSS zmienione: 3 linie * {
font-family: "Segoe UI", Tahoma;
}
#header1 {
width: 40%;
}
#header2 {
width: 60%;
text-align: right;
}
#header1, #header2 {
float: left;
}
main {
clear: both;
}
ul {
list-style: none;
}
li {
display: inline;
}
a {
text-decoration: none;
color: #0077A2;
}
li a {
padding: 1em;
}Dla selektora nagłówka pierwszego stopnia: wyrównanie tekstu do środka.
Selektor znacznika h1, jak wymaga uwaga pod listą stylów (R.4.8).
styl_gier.css CSS zmienione: 3 linie * {
font-family: "Segoe UI", Tahoma;
}
#header1 {
width: 40%;
}
#header2 {
width: 60%;
text-align: right;
}
#header1, #header2 {
float: left;
}
main {
clear: both;
}
ul {
list-style: none;
}
li {
display: inline;
}
a {
text-decoration: none;
color: #0077A2;
}
li a {
padding: 1em;
}
h1 {
text-align: center;
}Dla selektora obrazu: szerokość 20 em, marginesy zewnętrzne 1 em.
Obrazy 1024 px stają się miniaturami o szerokości 20 em; wysokość przeliczy się sama z proporcji. Szerokości nagłówków i obrazu razem to R.4.2, margines obrazu to R.4.4.
styl_gier.css CSS zmienione: 4 linie * {
font-family: "Segoe UI", Tahoma;
}
#header1 {
width: 40%;
}
#header2 {
width: 60%;
text-align: right;
}
#header1, #header2 {
float: left;
}
main {
clear: both;
}
ul {
list-style: none;
}
li {
display: inline;
}
a {
text-decoration: none;
color: #0077A2;
}
li a {
padding: 1em;
}
h1 {
text-align: center;
}
img {
width: 20em;
margin: 1em;
}Obrazy są wyświetlane obok siebie zgodnie z ilustracją 2 i 4.
Obraz jest domyślnie elementem liniowym, więc miniatury już stoją obok siebie i same przechodzą do nowego wiersza, gdy brakuje miejsca. Na ilustracji 2 ostatni wiersz (dwie miniatury) jest wyśrodkowany, dlatego blok gallery dostaje text-align: center - wyrównanie działa na elementy liniowe w bloku. Akapity na stronie „O nas” stoją poza galerią, więc zostają wyrównane do lewej.
styl_gier.css CSS zmienione: 3 linie * {
font-family: "Segoe UI", Tahoma;
}
#header1 {
width: 40%;
}
#header2 {
width: 60%;
text-align: right;
}
#header1, #header2 {
float: left;
}
main {
clear: both;
}
ul {
list-style: none;
}
li {
display: inline;
}
a {
text-decoration: none;
color: #0077A2;
}
li a {
padding: 1em;
}
h1 {
text-align: center;
}
img {
width: 20em;
margin: 1em;
}
.gallery {
text-align: center;
}Gdy kursor znajdzie się na obrazie: dodawany jest obrys (outline) o szerokości 3 px linią kreskową koloru #E30613.
Pseudoklasa :hover i outline - obrys rysuje się poza ramką elementu i nie zajmuje miejsca, więc miniatury nie przesuwają się po najechaniu (przy border cały wiersz by drgnął). dashed to linia kreskowa. Najedź na miniaturę w podglądzie (R.4.10).
styl_gier.css CSS zmienione: 3 linie * {
font-family: "Segoe UI", Tahoma;
}
#header1 {
width: 40%;
}
#header2 {
width: 60%;
text-align: right;
}
#header1, #header2 {
float: left;
}
main {
clear: both;
}
ul {
list-style: none;
}
li {
display: inline;
}
a {
text-decoration: none;
color: #0077A2;
}
li a {
padding: 1em;
}
h1 {
text-align: center;
}
img {
width: 20em;
margin: 1em;
}
.gallery {
text-align: center;
}
img:hover {
outline: 3px dashed #E30613;
}Kroki 39-44 · po tym etapie masz 35 z 35 kryteriów (pkt)
Plik skrypty.js powinien zawierać funkcję licznik napisaną w języku JavaScript. Funkcja jest wywoływana w momencie załadowania się stron index.html oraz onas.html.
Utwórz skrypty.js z pustą funkcją licznik - nazwa narzucona przez arkusz. Na obu stronach znacznik <body> dostaje onload="licznik()" (tabela 2): zdarzenie zachodzi, gdy cała strona z obrazami jest wczytana, więc akapit w stopce już istnieje (R.5.3).
Uwaga do podglądu: ramka podglądu jest odizolowana od strony i nie ma dostępu do pamięci przeglądarki localStorage. Od tego kroku podgląd podstawia za nią pamięć na czas jednego wyświetlenia - pokaże stan „pierwszego wejścia”. W zwykłej przeglądarce kod działa bez żadnych dodatków.
onload="licznik" bez nawiasów nie wywołuje funkcji - w atrybucie zdarzenia piszesz kod do wykonania, czyli licznik().
index.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Najlepsze gry | PoGRAJmy!</title>
<link rel="stylesheet" href="styl_gier.css">
<script src="skrypty.js"></script>
</head>
<body onload="licznik()">
<header id="header1">
<h2><a href="index.html">PoGRAJmy!</a></h2>
</header>
<header id="header2">
<ul>
<li><a href="index.html">Strona główna</a></li>
<li><a href="onas.html">O nas</a></li>
</ul>
</header>
<main>
<h1>Oto nasz wybór najciekawszych gier</h1>
<div class="gallery">
<img src="gra1.jpg" alt="Miniatura gry" title="Tytuł gry">
<img src="gra2.jpg" alt="Miniatura gry" title="Tytuł gry">
<img src="gra3.jpg" alt="Miniatura gry" title="Tytuł gry">
<img src="gra4.jpg" alt="Miniatura gry" title="Tytuł gry">
<img src="gra5.jpg" alt="Miniatura gry" title="Tytuł gry">
<img src="gra6.jpg" alt="Miniatura gry" title="Tytuł gry">
<img src="gra7.jpg" alt="Miniatura gry" title="Tytuł gry">
<img src="gra8.jpg" alt="Miniatura gry" title="Tytuł gry">
<img src="gra9.jpg" alt="Miniatura gry" title="Tytuł gry">
<img src="gra10.jpg" alt="Miniatura gry" title="Tytuł gry">
</div>
</main>
<footer>
<p>Autor: <strong>Bartosz Bryniarski</strong></p>
<p id="counter"></p>
</footer>
</body>
</html>onas.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>O nas | PoGRAJmy!</title>
<link rel="stylesheet" href="styl_gier.css">
<script src="skrypty.js"></script>
</head>
<body onload="licznik()">
<header id="header1">
<h2><a href="index.html">PoGRAJmy!</a></h2>
</header>
<header id="header2">
<ul>
<li><a href="index.html">Strona główna</a></li>
<li><a href="onas.html">O nas</a></li>
</ul>
</header>
<main>
<h1>Twoje centrum rozrywki</h1>
<div class="gallery">
<img src="gra10.jpg" alt="Grafika z gry">
<img src="gra5.jpg" alt="Grafika z gry">
<img src="gra1.jpg" alt="Grafika z gry">
</div>
<p>Zapraszamy do naszej wypożyczalni <strong>gier konsolowych i komputerowych</strong>, gdzie każdy znajdzie coś dla siebie! Oferujemy szeroką gamę tytułów, od najnowszych hitów po klasyczne produkcje, które wciąż cieszą się niesłabnącą popularnością. Dzięki nam możesz cieszyć się ulubionymi grami bez konieczności ich zakupu, co pozwala na oszczędność pieniędzy i przestrzeni. Nasza wypożyczalnia to idealne miejsce dla każdego miłośnika gier, niezależnie od wieku i preferencji.</p>
<p>Nasza oferta jest dostosowana do potrzeb wszystkich graczy. Posiadamy <em>gry na różne platformy</em>, w tym PlayStation, Xbox, Nintendo oraz PC. Regularnie aktualizujemy nasz katalog, abyś zawsze miał dostęp do najnowszych premier. Niezależnie od tego, czy jesteś fanem dynamicznych strzelanek, epickich RPG, czy relaksujących gier strategicznych, u nas znajdziesz coś, co spełni Twoje oczekiwania.</p>
<p>Wypożyczanie gier w naszej wypożyczalni jest proste i wygodne. Możesz dokonać <strong>rezerwacji online</strong> lub odwiedzić nas osobiście, gdzie nasi pracownicy chętnie doradzą i pomogą w wyborze odpowiednich tytułów. Gwarantujemy <em>atrakcyjne ceny i elastyczne warunki wypożyczenia</em>, dostosowane do Twoich potrzeb. Dołącz do grona naszych zadowolonych klientów i odkryj, jak wiele radości może przynieść świat gier!</p>
</main>
<footer>
<p>Autor: <strong>Bartosz Bryniarski</strong></p>
<p id="counter"></p>
</footer>
</body>
</html>skrypty.js JavaScript nowy plik function licznik() {
}Wykorzystuje obiekt localStorage do przechowania licznika wyświetleń strony.
localStorage to pamięć przeglądarki: pary klucz - wartość, które przetrwają zamknięcie karty. localStorage.getItem("licznik") (tabela 1) zwraca zapisaną wartość albo null, gdy klucza jeszcze nie ma - tak jest przy pierwszym wejściu. Wynik trzymasz w zmiennej liczba (nazwa mówi, co przechowuje - R.5.1, R.5.2). Jeden klucz licznik dla obu stron: liczysz wejścia na całą witrynę, jak na ilustracjach 2 i 4 (26, potem 30).
skrypty.js JavaScript zmienione: 1 linia function licznik() {
let liczba = localStorage.getItem("licznik");
}Po każdym odwiedzeniu strony zwiększa liczbę jej wyświetleń o 1.
Przy pierwszym wejściu getItem daje null, więc zaczynasz od 0. Potem Number(liczba) + 1: localStorage przechowuje wyłącznie napisy, a "5" + 1 w JavaScript to napis "51", nie liczba 6. Number zamienia napis na liczbę i dodawanie działa. Pierwsze wejście da 1 (R.5.5).
liczba + 1 bez Number skleja napisy: kolejne wejścia pokazują 1, 11, 111 zamiast 1, 2, 3.
skrypty.js JavaScript zmienione: 4 linie function licznik() {
let liczba = localStorage.getItem("licznik");
if (liczba == null) {
liczba = 0;
}
liczba = Number(liczba) + 1;
}Wykorzystuje obiekt localStorage do przechowania licznika wyświetleń strony.
localStorage.setItem("licznik", liczba) (tabela 1) zapisuje nową wartość pod tym samym kluczem - nadpisuje poprzednią. Przy następnym wejściu getItem odczyta właśnie ją, więc każde wczytanie strony podnosi licznik o 1 (R.5.6). W przeglądarce stan licznika podejrzysz w narzędziach deweloperskich: Aplikacja → Pamięć lokalna.
skrypty.js JavaScript zmienione: 1 linia function licznik() {
let liczba = localStorage.getItem("licznik");
if (liczba == null) {
liczba = 0;
}
liczba = Number(liczba) + 1;
localStorage.setItem("licznik", liczba);
}W paragrafie znajdującym się w stopce witryny wyświetla napis „Liczba wejść na stronę: X”, gdzie X jest liczbą wyświetleń strony.
getElementById("counter") znajduje pusty akapit w stopce, a innerHTML wpisuje do niego napis sklejony z liczbą (R.5.4). Podgląd pokazuje „Liczba wejść na stronę: 1” - stan pierwszego wejścia. W przeglądarce odśwież stronę albo przejdź na „O nas”: licznik rośnie, bo obie strony korzystają z tego samego klucza.
skrypty.js JavaScript zmienione: 1 linia function licznik() {
let liczba = localStorage.getItem("licznik");
if (liczba == null) {
liczba = 0;
}
liczba = Number(liczba) + 1;
localStorage.setItem("licznik", liczba);
document.getElementById("counter").innerHTML = "Liczba wejść na stronę: " + liczba;
}Funkcja jest wywoływana w momencie załadowania się stron index.html oraz onas.html.
Sprawdź drugą stronę: ma ten sam <script src="skrypty.js">, ten sam akapit counter i to samo onload, więc licznik działa i tu. Strona jest kompletna, jak na ilustracji 4.
Kroki 45-47 · po tym etapie masz 35 z 35 kryteriów (pkt)
Funkcja jest wywoływana w momencie załadowania się stron index.html oraz onas.html.
Atrybut onload trzeba pamiętać wpisać w każdym pliku HTML - przy trzeciej podstronie łatwo o nim zapomnieć. W prawdziwych projektach skrypt sam się podpina: window.addEventListener("load", licznik) na końcu skrypty.js (funkcja bez nawiasów - przekazujesz ją, nie wywołujesz). Każda strona, która dołącza ten plik, dostaje licznik automatycznie. Stary znacznik <body> zostaje w komentarzu.
Klucz R.5.3 przyjmuje obie drogi. Na egzaminie wystarczy wersja wcześniejsza - klucz tego nie sprawdza.
index.html HTML zmienione: 2 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Najlepsze gry | PoGRAJmy!</title>
<link rel="stylesheet" href="styl_gier.css">
<script src="skrypty.js"></script>
</head>
<!-- wersja z egzaminu: <body onload="licznik()"> -->
<body>
<header id="header1">
<h2><a href="index.html">PoGRAJmy!</a></h2>
</header>
<header id="header2">
<ul>
<li><a href="index.html">Strona główna</a></li>
<li><a href="onas.html">O nas</a></li>
</ul>
</header>
<main>
<h1>Oto nasz wybór najciekawszych gier</h1>
<div class="gallery">
<img src="gra1.jpg" alt="Miniatura gry" title="Tytuł gry">
<img src="gra2.jpg" alt="Miniatura gry" title="Tytuł gry">
<img src="gra3.jpg" alt="Miniatura gry" title="Tytuł gry">
<img src="gra4.jpg" alt="Miniatura gry" title="Tytuł gry">
<img src="gra5.jpg" alt="Miniatura gry" title="Tytuł gry">
<img src="gra6.jpg" alt="Miniatura gry" title="Tytuł gry">
<img src="gra7.jpg" alt="Miniatura gry" title="Tytuł gry">
<img src="gra8.jpg" alt="Miniatura gry" title="Tytuł gry">
<img src="gra9.jpg" alt="Miniatura gry" title="Tytuł gry">
<img src="gra10.jpg" alt="Miniatura gry" title="Tytuł gry">
</div>
</main>
<footer>
<p>Autor: <strong>Bartosz Bryniarski</strong></p>
<p id="counter"></p>
</footer>
</body>
</html>onas.html HTML zmienione: 2 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>O nas | PoGRAJmy!</title>
<link rel="stylesheet" href="styl_gier.css">
<script src="skrypty.js"></script>
</head>
<!-- wersja z egzaminu: <body onload="licznik()"> -->
<body>
<header id="header1">
<h2><a href="index.html">PoGRAJmy!</a></h2>
</header>
<header id="header2">
<ul>
<li><a href="index.html">Strona główna</a></li>
<li><a href="onas.html">O nas</a></li>
</ul>
</header>
<main>
<h1>Twoje centrum rozrywki</h1>
<div class="gallery">
<img src="gra10.jpg" alt="Grafika z gry">
<img src="gra5.jpg" alt="Grafika z gry">
<img src="gra1.jpg" alt="Grafika z gry">
</div>
<p>Zapraszamy do naszej wypożyczalni <strong>gier konsolowych i komputerowych</strong>, gdzie każdy znajdzie coś dla siebie! Oferujemy szeroką gamę tytułów, od najnowszych hitów po klasyczne produkcje, które wciąż cieszą się niesłabnącą popularnością. Dzięki nam możesz cieszyć się ulubionymi grami bez konieczności ich zakupu, co pozwala na oszczędność pieniędzy i przestrzeni. Nasza wypożyczalnia to idealne miejsce dla każdego miłośnika gier, niezależnie od wieku i preferencji.</p>
<p>Nasza oferta jest dostosowana do potrzeb wszystkich graczy. Posiadamy <em>gry na różne platformy</em>, w tym PlayStation, Xbox, Nintendo oraz PC. Regularnie aktualizujemy nasz katalog, abyś zawsze miał dostęp do najnowszych premier. Niezależnie od tego, czy jesteś fanem dynamicznych strzelanek, epickich RPG, czy relaksujących gier strategicznych, u nas znajdziesz coś, co spełni Twoje oczekiwania.</p>
<p>Wypożyczanie gier w naszej wypożyczalni jest proste i wygodne. Możesz dokonać <strong>rezerwacji online</strong> lub odwiedzić nas osobiście, gdzie nasi pracownicy chętnie doradzą i pomogą w wyborze odpowiednich tytułów. Gwarantujemy <em>atrakcyjne ceny i elastyczne warunki wypożyczenia</em>, dostosowane do Twoich potrzeb. Dołącz do grona naszych zadowolonych klientów i odkryj, jak wiele radości może przynieść świat gier!</p>
</main>
<footer>
<p>Autor: <strong>Bartosz Bryniarski</strong></p>
<p id="counter"></p>
</footer>
</body>
</html>skrypty.js JavaScript zmienione: 3 linie function licznik() {
let liczba = localStorage.getItem("licznik");
if (liczba == null) {
liczba = 0;
}
liczba = Number(liczba) + 1;
localStorage.setItem("licznik", liczba);
document.getElementById("counter").innerHTML = "Liczba wejść na stronę: " + liczba;
}
// zamiast atrybutu onload w obu plikach HTML
window.addEventListener("load", licznik);Wykorzystuje obiekt localStorage do przechowania licznika wyświetleń strony.
Trzy drobne poprawki:
try ... catch - w części przeglądarek (tryb prywatny z blokadą, wyłączone dane witryn, a także ramka tego podglądu) samo sięgnięcie po localStorage rzuca wyjątek. Bez try skrypt się przerywa i akapit zostaje pusty; z nim strona pokazuje przynajmniej 1,Number(localStorage.getItem("licznik")) || 0 - zastępuje osobny warunek na null, a przy okazji ratuje sytuację, gdy w pamięci leży coś, co nie jest liczbą (Number("abc") to NaN, a NaN || 0 to 0),textContent zamiast innerHTML - wstawiasz zwykły tekst, więc przeglądarka nie musi go analizować jako HTML.Stara funkcja zostaje w komentarzu /* */. Na egzaminie wystarczy wersja wcześniejsza - klucz tego nie sprawdza.
skrypty.js JavaScript zmienione: 13 linii function licznik() {
let liczba = 1;
try {
liczba = (Number(localStorage.getItem("licznik")) || 0) + 1;
localStorage.setItem("licznik", liczba);
} catch (blad) {
// przeglądarka bez dostępu do pamięci (np. tryb prywatny z blokadą) - licznik startuje od 1
}
document.getElementById("counter").textContent = "Liczba wejść na stronę: " + liczba;
}
/* wersja z egzaminu:
function licznik() {
let liczba = localStorage.getItem("licznik");
if (liczba == null) {
liczba = 0;
}
liczba = Number(liczba) + 1;
localStorage.setItem("licznik", liczba);
document.getElementById("counter").innerHTML = "Liczba wejść na stronę: " + liczba;
}
*/
// zamiast atrybutu onload w obu plikach HTML
window.addEventListener("load", licznik);Po każdym odwiedzeniu strony zwiększa liczbę jej wyświetleń o 1.
Warto wiedzieć, gdzie arkusz rozmija się z praktyką. localStorage należy do jednej przeglądarki na jednym komputerze: licznik pokazuje, ile razy Ty wszedłeś na stronę, a nie ilu gości miała wypożyczalnia. Inny komputer, inna przeglądarka albo wyczyszczenie danych witryny - i licznik startuje od 1.
Prawdziwy licznik odwiedzin wymaga serwera: skrypt PHP przy każdym wejściu zwiększa wartość w bazie danych (np. UPDATE liczniki SET wejscia = wejscia + 1) i wypisuje ją na stronie - wtedy wszyscy odwiedzający widzą tę samą liczbę. localStorage nadaje się za to świetnie do zapamiętania ustawień jednego użytkownika, np. wybranego motywu czy ostatnio oglądanej gry. Na egzaminie wystarczy rozwiązanie z arkusza - klucz sprawdza właśnie wersję z localStorage.
Podgląd strony bez zmian - taki jak po kroku 46.
Krok 48 · po tym etapie masz 35 z 35 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 strony.
W folderze z numerem zdającego: index.html, onas.html, gra1.jpg - gra10.jpg, oryginalny gra10.png, kwerendy.txt, skrypty.js, styl_gier.css, zrzuty import.png i kw1.jpg - kw4.jpg oraz 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 46.
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.