Arkusz EE.09 : 2022 - styczeń - zad. 07 (js)

Oznaczenie: EE.09-07-22.01-SG   Limit czasu: 150 minut

Zadanie egzaminacyjne

Wykonaj stronę galerii zdjęć, wykorzystując edytor zaznaczający składnię oraz edytor grafiki rastrowej.

Aby wykonać zadanie, zaloguj się na konto Egzamin bez hasła. Na pulpicie znajduje się archiwum ZIP o nazwie galeria.zip zabezpieczone hasłem: {Ciekaw3Zdjecia}

Pobierz galeria.zip

Należy utworzyć folder o nazwie odpowiadającej numerowi PESEL zdającego lub w przypadku jego braku innemu numerowi, którym został podpisany arkusz. Archiwum należy rozpakować do tego folderu. Wszystkie wykonane w czasie egzaminu pliki w tym zrzuty ekranu, pliki strony, stylów należy umieścić w tym folderze.

Operacje na bazie danych

Do wykonania operacji na bazie należy wykorzystać przedstawione tabele. Tabela samoloty jest połączona relacją 1..n z tabelą odloty i tabelą przyloty.

Obraz 1. Tabele bazy danych

Uruchom usługi MySQL i Apache za pomocą XAMPP Control Panel. Za pomocą narzędzia phpMyAdmin wykonaj podane operacje na bazie danych:

  • Utwórz bazę danych o nazwie podroze
  • Do bazy podroze zaimportuj plik podroze.sql z rozpakowanego archiwum
  • Wykonaj zrzut ekranu po imporcie. Zrzut zapisz w folderze z numerem PESEL lub w przypadku jego braku w folderze z innym numerem, którym został podpisany arkusz, w formacie JPEG o nazwie egzamin. 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
  • Zapisz i wykonaj zapytania SQL działające na bazie podroze. Zapytania zapisz w pliku kwerendy.txt, w folderze z numerem PESEL lub w przypadku jego braku w folderze z innym numerem, którym został podpisany arkusz. Wykonaj zrzuty ekranu przedstawiające wyniki działania kwerend. Zrzuty zapisz w formacie PNG i nadaj im nazwy kw1, kw2, kw3, kw4. Zrzuty powinny obejmować cały ekran monitora z widocznym paskiem zadań
    • Zapytanie 1: wybierające pola kierunek i czas z tabeli przyloty dla lotów, które nie mają wpisu w polu status_lotu
    • Zapytanie 2: wybierające pola kierunek i dzien z tabeli odloty dla lotów obsługiwanych samolotem typu Boening 787. Zapytanie wykorzystuje relację, w klauzuli warunku jest sprawdzany typ samolotu
    • Zapytanie 3: wybierające numer rejsu i kierunek z tabeli przyloty dla rejsów, których numer zawiera w dowolnym miejscu ciąg znaków LX
    • Zapytanie 4: uaktualniające pole linie w tabeli samoloty. Firma SWISS zmieniła swoją nazwę na SWISS2

Witryna internetowa

Obraz 2. Witryna internetowa, kursor myszy ustawiony na trzeciej miniaturze

Cechy grafiki:

  • Plik serengeti.jpg, wypakowany z archiwum należy przeskalować z zachowaniem proporcji tak, aby szerokość wynosiła dokładnie 350 px i zapisać obraz pod tą samą nazwą. Pozostałych obrazów nie należy modyfikować.

Cechy witryny:

  • Składa się ze strony o nazwie galeria.html
  • Zastosowany właściwy standard kodowania polskich znaków
  • Tytuł strony widoczny na karcie przeglądarki: „Galeria”
  • Arkusz stylów w pliku o nazwie styl7.css prawidłowo połączony z kodem strony
  • Podział strony na bloki: baner, główny, poniżej obok siebie lewy i prawy, poniżej stopka. Podział zrealizowany za pomocą znaczników sekcji tak, aby wygląd układu bloków strony po uruchomieniu w przeglądarce, był zgodny z Obrazem 2
  • Zawartość banera: nagłówek drugiego stopnia o treści „Galeria miejsc ciekawych”
  • Zawartość bloku głównego: obraz lanzarotte.jpg z tekstem alternatywnym „galeria”
  • Zawartość bloku lewego:
    • Nagłówek trzeciego stopnia o treści „Przeglądaj zdjęcia”
    • 5 zdjęć JPG o nazwach kolejno: lanzarotte, pekin, serengeti, wenecja, tajlandia oraz tekście alternatywnym takim jak nazwa zdjęcia
  • Zawartość bloku prawego:
    • Nagłówek trzeciego stopnia o treści „Obrazy w naszej galerii”
    • Tabela o dwóch wierszach i trzech kolumnach i wartościach:
      • Wiersz pierwszy: Europa, Azja, Afryka
      • Wiersz drugi: 2, 2, 1
    • Paragraf (akapit) zawierający treść „Polub nas” i obraz icon-off.png
    • Odnośnik do adresu https://pixabay.com o treści „Odkryj więcej zdjęć”, odnośnik otwiera się w osobnej karcie przeglądarki
  • Zawartość stopki: napis o treści „Autor: ”, dalej wstawiony numer PESEL zdającego lub w przypadku jego braku inny numer, którym został podpisany arkusz

Styl CSS witryny internetowej

Cechy formatowania CSS:

  • Są zawarte wyłącznie w zewnętrznym arkuszu stylów
  • Domyślne dla całej strony: krój czcionki Helvetica
  • Dla banera i stopki: kolor RGB tła 70, 130, 180; biały kolor czcionki, wysokość 30 px, wyrównanie tekstu do środka
  • Dla bloku głównego: kolor RGB tła 176, 196, 222; marginesy wewnętrzne 50 px, wyrównanie tekstu do środka
  • Dla bloku lewego: kolor RGB tła 70, 130, 180; biały kolor czcionki, wysokość 300 px, szerokość 80%
  • Dla bloku prawego: kolor RGB tła 70, 130, 180; biały kolor czcionki, wysokość 300 px, szerokość 20%
  • Dla zdjęcia w bloku głównym: marginesy wewnętrzne 3 px, obramowanie linią kreskowaną w kolorze niebieskim grubości 1 px, zakrzywienie rogów obrazu o 10 px
  • Dla wszystkich zdjęć w bloku lewym: wysokość 40%, gdy mysz znajdzie się na obrazie pojawia się obramowanie linią ciągłą koloru białego i grubości 1px, co widać na Obrazie 2 (trzecia miniatura)
UWAGA!
Widoczna na Obrazie 2 biała czcionka w tabeli, w bloku prawym wynika z koloru nadanego dla bloku prawego – testowane w Chrome, jeżeli w innej przeglądarce kolor ten jest domyślny (czyli czarny) jest to również poprawne rozwiązanie zadania.

Skrypt

W Tabeli 1 podano wybrane pola i metody modelu DOM języka JavaScript. Wymagania dotyczące skryptu:

  • Obsługuje akcje wywoływane kliknięciem na zdjęciach z bloku lewego za pomocą języka JavaScript
  • Po kliknięciu na dowolnej miniaturze jest ona wyświetlona w bloku głównym (zamiast lanzarotte.jpg)
  • Po kliknięciu ikony icon-off.jpg jest ona podmieniana na ikonę icon-on.jpg. Po ponownym kliknięciu – powraca do icon-off.jpg i tak na zmianę – realizowane za pomocą funkcji

Tabela 1. Wybrane pola i metody modelu DOM języka JavaScript

Wyszukiwanie elementów
document.getElementById(Id)
document.getElementByTagName(TagName)
document.getElementsByClassName(ClassName)
Zmiana elementów
element.innerHTML = "nowa zawartość"
element.attribute = "nowa wartość"
element.setAttribute(atrybut,wartość)
element.style.property = "nowa wartość"
Dodawanie i usuwanie elementów
document.createElement(element)
document.removeChild(element)
document.appendChild(element)
document.replaceChild(element)
document.write(text)
Wybrane właściwości obiektu style
backgroundColor, color, fontSize
fontStyle = "normal | italic | oblique | initial | inherit"
fontWeight = "normal | lighter | bold | bolder | value | initial | inherit"
Wybrane zdarzenia HTML
Zdarzenia myszy: onclick, ondblclick, onmouseover, onmouseout
Zdarzenia klawiatury: onkeydown, onkeypress, onkeyup
Zdarzenia obiektów: onload, onfocusin, onresize, onfocusout / onblur
Elementy formularzy
Ważniejsze typy pola input: button, checkbox, number, password, radio, text
Inne elementy: select, textarea
Metody i pola obiektu string (JS)
length
indexOf(text)
search(text)
substr(startIndex, endIndex)
replace(textToReplace, newText)
toUpperCase()
toLowerCase()
UWAGA!
Po zakończeniu pracy utwórz, w folderze z numerem PESEL lub w przypadku jego braku w folderze z innym numerem, którym został podpisany arkusz, plik tekstowy o nazwie przeglądarka.txt. Zapisz w nim nazwę przeglądarki internetowej, w której weryfikowano poprawność działania witryny.
Nagraj płytę z rezultatami pracy. W folderze z numerem PESEL lub w przypadku jego braku w folderze z innym numerem, którym został podpisany arkusz powinny się znajdować pliki: egzamin.jpg, galeria.html, icon-off.png, icon-on.png, kw1.png, kw2.png, kw3.png, kw4.png, kwerendy.txt, lanzarotte.jpg, pekin.jpg, przeglądarka.txt, serengeti.jpg, styl7.css, tajlandia.jpg, wenecja.jpg, ewentualnie inne przygotowane pliki.
Po nagraniu płyty sprawdź poprawność nagrania w obecności przewodniczącego zespołu nadzorującego, na specjalnie przygotowanym do tego celu stanowisku. Opisz płytę swoim numerem PESEL lub w przypadku jego braku innym numerem, którym został podpisany arkusz i pozostaw na stanowisku, zapakowaną w pudełku wraz z arkuszem egzaminacyjnym.

Czas przeznaczony na wykonanie zadania wynosi 150 minut.

Ocenie będzie podlegać 5 rezultatów:

  • operacje na bazie danych
  • zawartość witryny internetowej
  • działanie witryny internetowej
  • styl CSS witryny internetowej
  • skrypt.