Arkusz E.14 : 2019 - styczeń - zad. 02 (js)

Oznaczenie: E.14-02-19.01   Limit czasu: 150 minut

Zadanie egzaminacyjne

Wykonaj aplikację internetową prezentującą możliwości HTML, CSS i JavaScript. Wykorzystaj pakiet XAMPP jako środowisko bazowo-aplikacyjne, edytor zaznaczający składnię oraz program do obróbki grafiki rastrowej i wektorowej.

Aby wykonać zadanie, zaloguj się na konto Egzamin bez hasła. Na pulpicie znajdziesz archiwum ZIP o nazwie pliki2.zip zabezpieczone hasłem: ZdJeCiE.

Archiwum należy rozpakować.

Pobierz pliki2.zip

Na pulpicie konta Egzamin utwórz folder. Jako nazwy folderu użyj swojego numeru PESEL. Rozpakowane pliki umieść w tym folderze. Wyniki swojej pracy zapisz w tym folderze.

Grafika

Grafikę tekst.jpg przygotuj przy pomocy programu do obróbki grafiki rastrowej według wymagań:

  • Grafika powinna być przezroczysta w miejscach, gdzie teraz jest kolor biały. Dopuszcza się, aby przezroczystość została dodana na większych obszarach bieli, pomijając obszary pomiędzy literami w napisach. Przykład dodania przezroczystości jest przedstawiony na obrazie 1
  • Grafika powinna być przeskalowana z zachowaniem proporcji tak, aby jej wysokość wynosiła dokładnie 300 px
  • Grafika powinna być w skali szarości

Grafikę należy zapisać w formacie umożliwiającym zapis przezroczystości i nadać jej nazwę napisy

Obraz 1. Grafika napisy

Przerobiona grafika

Witryna internetowa

Obraz 2. Strona główna

Wygląd witryny

Cechy witryny:

  • Strona główna o nazwie formaty.html
  • Zastosowany właściwy standard kodowania polskich znaków
  • Tytuł strony widoczny na karcie przeglądarki: „Formatowanie”
  • Arkusz stylów w pliku o nazwie styl2.css prawidłowo połączony z kodem strony
  • Podział strony na bloki: baner, poniżej trzy panele górne, ułożone obok siebie, poniżej panel główny, oraz na dole stopka. Podział zrealizowany za pomocą znaczników sekcji, zgodnie z obrazem 2
  • Zawartość banera:
    • nagłówek pierwszego stopnia o treści „Formatowanie dokumentów HTML”
  • Zawartość pierwszego panelu górnego:
    • Nagłówek drugiego stopnia o treści: „Przykład listy - hobby”
    • Lista punktowana (nieuporządkowana) z zagnieżdżoną listą numerowaną (uporządkowaną), której treść przedstawia obraz 3
  • Zawartość drugiego panelu górnego:
    • Nagłówek drugiego stopnia o treści: „Przykład tabeli - rozkład dnia”
    • Tabela o wymiarze: 2 kolumny na 5 wierszy, z czego pierwszy jest wierszem nagłówkowym. W drugiej kolumnie dwa ostatnie wiersze są scalone. Tekst, który powinien być wpisany do tabeli, przedstawia obraz 4

Obraz 3. Lista

Lista punktowana

Obraz 4. Tabela

Lista punktowana

  • Zawartość trzeciego panelu górnego:
    • obraz napisy z tekstem alternatywnym „technologia web”
  • Zawartość panelu głównego:
    • Paragraf (akapit) z tekstem „Podaj rozmiar tekstu w procentach: ”, polem edycyjnym typu numerycznego oraz znakiem „%” za polem
    • Paragraf z listą wyboru, w której znajdują się elementy: „prosty” oraz „kursywa”
    • Paragraf z tekstem „Jakim kolorem sformatować tekst? Wybierz przycisk”, pod tekstem trzy przyciski. Wciśnięcie każdego przycisku wywołuje skrypt
    • Paragraf z tekstem „To jest przykład paragrafu, który może być dowolnie formatowany przez JavaScript”
  • Zawartość stopki:
    • Paragraf o treści: „Formatowaniem tekstu zajmował się: ”, dalej wstawiony numer PESEL, numer PESEL jest zapisany czcionką pochyloną
    • Odnośnik o treści „Odwiedź także” prowadzący do strony formatowanie.pl. Odnośnik otwiera się w osobnym oknie.

Styl CSS witryny internetowej

Plik styl2.css zawiera formatowanie:

  • Wspólne dla całej strony: krój czcionki Georgia
  • Dla banera: kolor tła #824555, biały kolor czcionki, wyrównanie tekstu do środka, marginesy wewnętrzne 20px
  • Wspólne dla pierwszego i drugiego panelu górnego: kolor tła #A26475, biały kolor czcionki, szerokość 30%, wysokość 300px
  • Dla trzeciego panelu górnego: kolor tła #A26475, biały kolor czcionki, szerokość 40%, wysokość 300px, wyrównanie tekstu do prawej strony
  • Dla panelu głównego: kolor tła #F0EAE2, marginesy wewnętrzne 50px
  • Dla stopki: kolor tła #824555, biały kolor czcionki, wyrównanie tekstu do środka, marginesy wewnętrzne 20px
  • Wspólne dla selektora tabeli, komórki i komórki nagłówka: obramowanie 2px, linią ciągłą kolor #69293A, marginesy wewnętrzne 7px, obramowanie sąsiednich komórek tabeli za pomocą wspólnej linii (komórki nie są obramowanie osobnymi liniami)
  • Dla selektora lisy punktowanej: styl punktora - kwadrat
  • Dla pierwszego przycisku kolor tła czerwony
  • Dla drugiego przycisku kolor tła zielony
  • Dla trzeciego przycisku kolor tła niebieski

Skrypt

Wymagania dotyczące skryptu:

    • Wykonywany po stronie przeglądarki, wywoływany przez zdarzenie kliknięcia w dowolny przycisk
    • Skrypt ma za zadanie zmienić styl CSS dla paragrafu o treści „To jest przykład paragrafu, który…” znajdującego się w panelu głównym
    • Po wciśnięciu czerwonego przycisku, zmieniany jest kolor tekstu paragrafu na czerwony. Po wciśnięciu zielonego przycisku – na zielony. Po wciśnięciu niebieskiego przycisku – na niebieski
    • Ponadto wciśnięcie dowolnego przycisku powoduje:
      • Pobranie wartości z pola edycyjnego i ustawienie rozmiaru czcionki paragrafu pobraną wartością wyrażoną w procentach. Na przykład, jeżeli wpisano wartość 150 – rozmiar czcionki powinien być ustawiony na 150%
      • Pobranie wyboru z listy i ustawienie czcionki paragrafu na pochyłą lub wyprostowaną.
    UWAGA!
    Po zakończeniu pracy utwórz plik tekstowy. Zapisz w nim nazwę przeglądarki internetowej, w której weryfikowałeś poprawność działania witryny, zapisz go w folderze z numerem PESEL, jako przeglądarka.txt.
    Nagraj płytę z rezultatami pracy. W folderze z numerem PESEL powinny się znajdować pliki: formaty.html, napisy.png, przeglądarka.txt, styl2.css, ewentualnie inne przygotowane pliki.
    Po nagraniu płyty sprawdź poprawność nagrania. Opisz płytę swoim numerem PESEL 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:

      • grafika
      • wygląd witryny internetowej
      • działanie witryny internetowej
      • styl CSS witryny internetowej
      • skrypt.

    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, onscroll, onresize
    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()