Przejdź do głównej treści
EE.09-06-22.01-SGStyczeń 2022 · 39 kroków · ok. 81 min · 37 kryteriów z klucza

Rozwiązanie krok po kroku: Konfigurator stylów CSS w JavaScript (Wersja podstawowa)

Konfigurator stylów CSS: baza auta z czterema tabelami (samochody, klienci, wypożyczenia łączące je relacją wiele do wielu i klasa samochodu), cztery zapytania - nowe konto użytkownika bazy (CREATE USER), średnia roczników opli (AVG), marki z imionami klientów przez trzy tabele (JOIN) i usunięcie kolumny (ALTER TABLE … DROP). Do tego przeskalowane zdjęcie Gibraltaru, strona konfigurator.html z panelem kontrolek po lewej i podglądem po prawej, style w styl6.css oraz skrypt w JavaScript, który po każdym kliknięciu zmienia wygląd bloku prawego: tło, kolor i rozmiar czcionki, ramkę obrazu i punktory listy.

To arkusz EE.09 ze stycznia 2022 - kwalifikacji formuły 2017, którą zastąpiła INF.03. Kroki idą zdanie po zdaniu za treścią arkusza - przy każdym jest polecenie z arkusza, a kod pokazuje dokładnie te linie, które je spełniają. Skrypt jest napisany najprościej, polami i zdarzeniami z tabeli 1 arkusza (onclick, onchange, onblur, style). Strona nie ma PHP, więc podgląd od kroku z HTML-em to działająca strona - kontrolki można klikać.

To jest wersja podstawowa. W zakładce „Nowoczesny kod (flex, addEventListener)” jest drugi sposób rozwiązania tego samego arkusza: semantyczne znaczniki z układem flex, etykiety <label> dla każdej kontrolki i skrypt w osobnym pliku, podpięty przez addEventListener - obie wersje są zgodne z kluczem.

Baza, zdjęcie i tekst pochodzą z oryginalnego archiwum CKE pliki6 (załącznik do pobrania na stronie arkusza, hasło w treści zadania). Zapytania i zrzuty są policzone na MariaDB 10.4, a działanie skryptu sprawdzone w Chrome.

Jak liczą się punkty. Klucz ma 37 kryteriów (R.1.1 - R.5.6), każde za 1 punkt. Próg zdania części praktycznej to 75%, czyli 28 punktów (75% z 37 to 27,75, zaokrąglone w górę) - można stracić 9 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.

Arkusz i pliki do pobrania Treść arkusza (PDF) Pobierz pliki rozwiązania (zip)

  1. Etap 1: Baza danych

    Kroki 1-7 · po tym etapie masz 6 z 37 kryteriów (pkt)

    Krok 1: Folder zdającego i archiwum pliki6

    ok. 2 min
    Polecenie z arkusza

    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, styli należy umieścić w tym folderze.

    Na pulpicie tworzysz folder nazwany numerem PESEL - w tym rozwiązaniu w jego miejscu stoi imię i nazwisko autora, Bartosz Bryniarski. Archiwum pliki6.zip rozpakowujesz do tego folderu, podając hasło #s4mochody! (z krzyżykiem na początku, cyfrą 4 zamiast „a” i wykrzyknikiem na końcu). W środku są: auta.sql, gibraltar.jpg i Lorem Ipsum.txt.

  2. Krok 2: XAMPP i pusta baza auta

    ok. 2 min
    Polecenie z arkusza

    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 auta

    W XAMPP Control Panel Start przy Apache i MySQL, potem http://localhost/phpmyadmin, Nowa, nazwa auta, Utwórz. Sama strona tego zadania nie łączy się z bazą - baza służy tylko do czterech zapytań.

  3. Krok 3: Import pliku auta.sql i zrzut egzamin.jpg

    Kryteria:

    R.1.1 Wykonano import tabel do bazy auta , czynność udokumentowano plikiem o nazwie egzamin w formacie JPEG

    ok. 3 min
    Polecenie z arkusza

    Do bazy auta zaimportuj plik auta.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

    Zaznacz bazę auta, karta Import, Wybierz plik → auta.sql, Wykonaj. Plik tworzy cztery tabele z kluczami głównymi i obcymi: klasa (3 wiersze), klienci (6), samochody (5) i wypozyczenia (7). Na zrzucie widać zielony komunikat o sukcesie i cztery tabele w lewym panelu.

    Zrzut całego ekranu z paskiem zadań zapisujesz jako egzamin.jpg.

    Typowe błędy

    Zrzut importu ma być w JPEG, a zrzuty zapytań w PNG - pomylony format to strata punktu.

    Podgląd strony po tym kroku
    Podgląd strony po kroku 3

  4. Krok 4: Zapytanie 1: użytkownik Agnieszka z hasłem haslo4

    Kryteria: ,

    R.1.2 Zapisano plik tekstowy o nazwie kwerendy zawierający co najmniej jedno zapytanie SQL, wynikające z treści zadania

    R.1.3 Utworzono zapytanie 1 tworzące użytkownika Agnieszka z hasłem haslo4. W pliku z kwerendami lub na zrzucie istnieje zapis np.: CREATE USER 'Agnieszka' IDENTIFIED BY 'haslo4'; (lub z @'localhost') oraz wynik działania zapytania udokumentowano zrzutem, na którym widoczny jest efekt poprawnie wykonanego zapytania

    ok. 3 min
    Polecenie z arkusza

    Zapisz i wykonaj zapytania SQL działające na bazie auta. 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: tworzące użytkownika Agnieszka z hasłem haslo4

    • CREATE USER 'Agnieszka' - nowe konto serwera bazy danych (nie wiersz w tabeli). Nazwa w apostrofach,
    • IDENTIFIED BY 'haslo4' - hasło konta; serwer zapisze jego skrót.

    Bez części @'host' konto może łączyć się z dowolnego komputera (%); klucz przyjmuje też 'Agnieszka'@'localhost'. Nowe konto nie ma jeszcze żadnych uprawnień - arkusz ich nie wymaga. phpMyAdmin odpowiada „MySQL zwrócił pusty wynik”, a konto widać na karcie Konta użytkowników. Zapytanie kopiujesz do nowego pliku kwerendy.txt, zrzut - do kw1.png.

    Typowe błędy

    Drugie wykonanie zgłosi błąd #1396 („Operation CREATE USER failed”) - konto już istnieje. Na zrzucie ma być efekt udanego wykonania.

    kwerendy.txt Tekst nowy plik 
    -- Zapytanie 1
CREATE USER 'Agnieszka' IDENTIFIED BY 'haslo4';
    Podgląd strony po tym kroku
    Podgląd strony po kroku 4

  5. Krok 5: Zapytanie 2: średni rocznik opli

    Kryteria:

    R.1.4 Utworzono zapytanie 2 liczące w tabeli samochody średnią arytmetyczną roczników samochodów, których marką jest opel. W pliku z kwerendami lub na zrzucie istnieje zapis np.: SELECT AVG(rocznik) FROM samochody WHERE marka='opel'; oraz wynik działania zapytania udokumentowano zrzutem, na którym widoczna jest wartość 2017,5 (dowolnie zaokrąglona lub nie)

    ok. 2 min
    Polecenie z arkusza

    Zapytanie 2: liczące w tabeli samochody średnią arytmetyczną roczników samochodów, których marką jest opel

    • SELECT AVG(rocznik) - funkcja AVG liczy średnią arytmetyczną kolumny,
    • FROM samochody,
    • WHERE marka = 'opel' - tylko wiersze opli.

    W tabeli są dwa ople: zafira z 2018 i insignia z 2017 roku, więc wynik to 2017.5000 - phpMyAdmin pokazuje średnią z czterema miejscami po przecinku. Zrzut: kw2.png.

    kwerendy.txt Tekst zmienione: 3 linie 
    -- Zapytanie 1
CREATE USER 'Agnieszka' IDENTIFIED BY 'haslo4';

-- Zapytanie 2
SELECT AVG(rocznik) FROM samochody WHERE marka = 'opel';
    Podgląd strony po tym kroku
    Podgląd strony po kroku 5

  6. Krok 6: Zapytanie 3: marki i imiona klientów przez tabelę wypozyczenia

    Kryteria:

    R.1.5 Utworzono zapytanie 3 wybierające nazwy marek samochodów i imiona klientów z nimi powiązane za pomocą tabeli wypozyczenia . Zapytanie wykorzystuje relację pomiędzy trzema tabelami. W pliku z kwerendami lub na zrzucie istnieje zapis np.: SELECT marka, imie FROM samochody JOIN wypozyczenia ON samochody.id = wypozyczenia.samochody_id JOIN klienci ON klienci.id = wypozyczenia.klienci_id; możliwe również INNER JOIN lub za pomocą warunku oraz wynik działania zapytania udokumentowano zrzutem, na którym widoczne są jedynie kolumny marka i imie; jedynie 7 rekordów

    ok. 4 min
    Polecenie z arkusza

    Zapytanie 3: wybierające jedynie nazwy marek samochodów i imiona klientów z nimi powiązane za pomocą tabeli wypozyczenia. Zapytanie wykorzystuje relację wiele do wielu pomiędzy trzema tabelami

    Relacja wiele do wielu nie ma bezpośredniego połączenia samochodu z klientem - łączy je tabela pośrednia wypozyczenia, w której każdy wiersz ma numer klienta (klienci_id) i numer samochodu (samochody_id):

    • SELECT marka, imie - tylko dwie kolumny,
    • FROM samochody,
    • JOIN wypozyczenia ON samochody.id = wypozyczenia.samochody_id - do każdego samochodu jego wypożyczenia,
    • JOIN klienci ON klienci.id = wypozyczenia.klienci_id - do każdego wypożyczenia klient.

    Wynik ma 7 wierszy - tyle, ile wypożyczeń. Ford nie był wypożyczony, więc go nie ma; fiat i opel występują kilka razy, bo wypożyczało je kilku klientów (Jan dwa razy brał opla). Zrzut: kw3.png.

    Typowe błędy

    Złączenie samych tabel samochody i klienci (bez wypozyczenia) nie ma wspólnej kolumny - wyjdzie każdy samochód z każdym klientem, 30 wierszy.

    kwerendy.txt Tekst zmienione: 6 linii 
    -- Zapytanie 1
CREATE USER 'Agnieszka' IDENTIFIED BY 'haslo4';

-- Zapytanie 2
SELECT AVG(rocznik) FROM samochody WHERE marka = 'opel';

-- Zapytanie 3
SELECT marka, imie
FROM samochody
JOIN wypozyczenia ON samochody.id = wypozyczenia.samochody_id
JOIN klienci ON klienci.id = wypozyczenia.klienci_id;
    Podgląd strony po tym kroku
    Podgląd strony po kroku 6

  7. Krok 7: Zapytanie 4: usunięcie kolumny cena

    Kryteria:

    R.1.6 Utworzono zapytanie 4 usuwające kolumnę cena z tabeli klasa . W pliku z kwerendami lub na zrzucie istnieje zapis np.: ALTER TABLE klasa DROP COLUMN cena; (poprawne też bez COLUMN) oraz wynik działania zapytania udokumentowano zrzutem, na którym widoczny jest efekt poprawnie wykonanego zapytania lub tabela bez kolumny cena

    ok. 2 min
    Polecenie z arkusza

    Zapytanie 4: usuwające kolumnę cena z tabeli klasa

    ALTER TABLE klasa zmienia strukturę tabeli, a DROP COLUMN cena usuwa kolumnę razem z danymi (słowo COLUMN jest opcjonalne). Po wykonaniu karta Struktura tabeli klasa ma tylko id i klasa. Zrzut: kw4.png; kwerendy.txt ma komplet czterech zapytań.

    Typowe błędy

    Usunięcie kolumny jest nieodwracalne - nie ma „cofnij”. Drugie wykonanie zgłosi błąd #1091 („nie można usunąć kolumny, sprawdź, czy istnieje”).

    kwerendy.txt Tekst zmienione: 3 linie 
    -- Zapytanie 1
CREATE USER 'Agnieszka' IDENTIFIED BY 'haslo4';

-- Zapytanie 2
SELECT AVG(rocznik) FROM samochody WHERE marka = 'opel';

-- Zapytanie 3
SELECT marka, imie
FROM samochody
JOIN wypozyczenia ON samochody.id = wypozyczenia.samochody_id
JOIN klienci ON klienci.id = wypozyczenia.klienci_id;

-- Zapytanie 4
ALTER TABLE klasa DROP COLUMN cena;
    Podgląd strony po tym kroku
    Podgląd strony po kroku 7

  8. Etap 2: Grafika i strona HTML

    Kroki 8-23 · po tym etapie masz 20 z 37 kryteriów (pkt)

    Krok 8: Grafika: gibraltar.jpg o szerokości 300 px

    Kryteria:

    R.2.1 Plik gibraltar.jpg jest przeskalowany z zachowaniem proporcji do szerokości dokładnie 300 px odpowiadająca temu wysokość wynosi 300 px ±5 px

    ok. 3 min
    Polecenie z arkusza

    Plik gibraltar.jpg, wypakowany z archiwum, należy przeskalować z zachowaniem proporcji tak, aby szerokość wynosiła dokładnie 300 px i zapisać obraz pod tą samą nazwą

    Oryginał ma 400 × 400 px. W GIMP-ie Obraz → Skaluj obraz, łańcuch między szerokością a wysokością złączony (zachowanie proporcji), szerokość 300 - wysokość sama zmieni się na 300. Plik → Nadpisz gibraltar.jpg. Klucz dopuszcza wysokość 300 ± 5 px.

    Typowe błędy

    Ustawienie szerokości atrybutem width albo w CSS nie zmienia pliku - klucz mierzy sam plik gibraltar.jpg.

    Podgląd strony po tym kroku
    Podgląd strony po kroku 8

  9. Krok 9: Plik konfigurator.html

    Kryteria:

    R.2.2 Witrynę internetową zapisano w pliku o nazwie konfigurator.html

    ok. 2 min
    Polecenie z arkusza

    Składa się ze strony o nazwie konfigurator.html

    Plik konfigurator.html w folderze zdającego, obok gibraltar.jpg. Strona nie potrzebuje PHP - skrypt w JavaScript działa w przeglądarce, więc można ją otworzyć prosto z dysku.

    konfigurator.html HTML nowy plik 
    <!DOCTYPE html>
<html lang="pl">
<head>
</head>
<body>
</body>
</html>
    Podgląd strony po tym kroku (konfigurator.html)

  10. Krok 10: Kodowanie polskich znaków

    Kryteria:

    R.2.3 Zastosowano właściwy standard kodowania polskich znaków dla witryny

    ok. 1 min
    Polecenie z arkusza

    Zastosowany właściwy standard kodowania polskich znaków

    <meta charset="UTF-8"> jako pierwszy element <head>, plik zapisany w UTF-8.

    konfigurator.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
</head>
<body>
</body>
</html>
    Podgląd strony po tym kroku (konfigurator.html)

  11. Krok 11: Tytuł strony

    Kryteria:

    R.2.4 Nadano tytuł strony: "Style w JavaScript”

    ok. 1 min
    Polecenie z arkusza

    Tytuł strony widoczny na karcie przeglądarki: „Style w JavaScript”

    <title> w <head> - napis na karcie przeglądarki.

    konfigurator.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Style w JavaScript</title>
</head>
<body>
</body>
</html>
    Podgląd strony po tym kroku (konfigurator.html)

  12. Krok 12: Podpięcie arkusza stylów styl6.css

    Kryteria:

    R.3.5 Strona zawiera działające połączenie z zewnętrznym arkuszem stylów o nazwie styl6.css , formatowanie pochodzi jedynie z tego arkusza Uwaga: kryterium to nie jest spełnione również, gdy źle przypisano co najmniej jeden selektor do bloku (np. kropka zamiast #)

    ok. 1 min
    Polecenie z arkusza

    Arkusz stylów w pliku o nazwie styl6.css prawidłowo połączony z kodem strony

    <link rel="stylesheet" href="styl6.css"> w <head>. Plik stylów powstanie po HTML-u.

    Typowe błędy

    Klucz uznaje R.3.5 tylko wtedy, gdy każdy selektor trafia w swój blok - kropka zamiast # przy identyfikatorze odbiera punkt.

    konfigurator.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Style w JavaScript</title>
    <link rel="stylesheet" href="styl6.css">
</head>
<body>
</body>
</html>
    Podgląd strony po tym kroku (konfigurator.html)

  13. Krok 13: Bloki: lewy, prawy i stopka

    Kryteria:

    R.2.5 Wygląd strony zdefiniowano dzieląc ją na bloki: lewy, prawy i stopka. Zastosowano znaczniki sekcji

    ok. 2 min
    Polecenie z arkusza

    Podział strony na bloki: 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 2a

    Dwa znaczniki <section> z identyfikatorami left i right oraz <footer>. Identyfikatory przydadzą się dwa razy: w CSS (różne szerokości) i w skrypcie, który będzie zmieniał styl bloku prawego.

    konfigurator.html HTML zmienione: 6 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Style w JavaScript</title>
    <link rel="stylesheet" href="styl6.css">
</head>
<body>
    <section id="left">
    </section>
    <section id="right">
    </section>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (konfigurator.html)

  14. Krok 14: Blok lewy: nagłówek pierwszego stopnia

    ok. 1 min
    Polecenie z arkusza

    Zawartość bloku lewego: Nagłówek pierwszego stopnia o treści „Konfigurator stylu”

    Pierwszego stopnia to <h1>. W wąskim bloku lewym napis zawinie się w dwie linie - tak jest też na obrazie 2a.

    konfigurator.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Style w JavaScript</title>
    <link rel="stylesheet" href="styl6.css">
</head>
<body>
    <section id="left">
        <h1>Konfigurator stylu</h1>
    </section>
    <section id="right">
    </section>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (konfigurator.html)

  15. Krok 15: Paragraf „Podaj kolor tła” i trzy przyciski

    ok. 2 min
    Polecenie z arkusza

    Paragraf (akapit) z tekstem „Podaj kolor tła” i w nowej linii trzy przyciski z podpisami: „Indigo”, „SteelBlue”, „Olive”

    Akapit <p> z tekstem, potem <br> („w nowej linii”) i trzy znaczniki <button> z podpisami. Przycisk poza formularzem niczego nie wysyła - zrobi to, co każe mu skrypt. Kolory przycisków doda CSS, a reakcję na kliknięcie - JavaScript.

    konfigurator.html HTML zmienione: 5 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Style w JavaScript</title>
    <link rel="stylesheet" href="styl6.css">
</head>
<body>
    <section id="left">
        <h1>Konfigurator stylu</h1>
        <p>Podaj kolor tła<br>
            <button>Indigo</button>
            <button>SteelBlue</button>
            <button>Olive</button>
        </p>
    </section>
    <section id="right">
    </section>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (konfigurator.html)

  16. Krok 16: Paragraf „Podaj kolor czcionki” i lista rozwijalna

    Kryteria:

    R.2.7 W bloku lewym umieszczono kontrolki: trzy przyciski i listę rozwijaną z czterema elementami

    ok. 2 min
    Polecenie z arkusza

    Paragraf z tekstem „Podaj kolor czcionki” i w nowej linii lista rozwijalna z wartościami: White, Tan, Bisque, Plum

    Lista rozwijalna to <select> z czterema <option>. Bez atrybutu value wartością opcji jest jej tekst, a nazwy z arkusza to zarazem nazwy kolorów CSS - skrypt przepisze wybraną wartość wprost do stylu. Identyfikator color pozwoli skryptowi odczytać wybór. Trzy przyciski i lista z czterema elementami to komplet R.2.7.

    konfigurator.html HTML zmienione: 8 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Style w JavaScript</title>
    <link rel="stylesheet" href="styl6.css">
</head>
<body>
    <section id="left">
        <h1>Konfigurator stylu</h1>
        <p>Podaj kolor tła<br>
            <button>Indigo</button>
            <button>SteelBlue</button>
            <button>Olive</button>
        </p>
        <p>Podaj kolor czcionki<br>
            <select id="color">
                <option>White</option>
                <option>Tan</option>
                <option>Bisque</option>
                <option>Plum</option>
            </select>
        </p>
    </section>
    <section id="right">
    </section>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (konfigurator.html)

  17. Krok 17: Paragraf o rozmiarze czcionki i pole z wartością 100%

    Kryteria:

    R.3.2 Pole edycyjne ma domyślną wartość 100% (za pomocą atrybutu value)

    ok. 1 min
    Polecenie z arkusza

    Paragraf z tekstem „Podaj rozmiar czcionki w procentach, np. 200%” i w nowej linii pole edycyjne z wartością domyślną 100%

    Pole edycyjne <input type="text">, a wartość domyślna to atrybut value="100%" (R.3.2) - tekst jest w polu od załadowania strony i da się go zmienić. Znak procentu jest częścią wartości, bo skrypt przekaże ją do stylu bez zmian.

    Typowe błędy

    placeholder="100%" wygląda podobnie (szary tekst), ale to tylko podpowiedź - pole jest puste i klucz tego nie uzna.

    konfigurator.html HTML zmienione: 3 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Style w JavaScript</title>
    <link rel="stylesheet" href="styl6.css">
</head>
<body>
    <section id="left">
        <h1>Konfigurator stylu</h1>
        <p>Podaj kolor tła<br>
            <button>Indigo</button>
            <button>SteelBlue</button>
            <button>Olive</button>
        </p>
        <p>Podaj kolor czcionki<br>
            <select id="color">
                <option>White</option>
                <option>Tan</option>
                <option>Bisque</option>
                <option>Plum</option>
            </select>
        </p>
        <p>Podaj rozmiar czcionki w procentach, np. 200%<br>
            <input type="text" id="size" value="100%">
        </p>
    </section>
    <section id="right">
    </section>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (konfigurator.html)

  18. Krok 18: Paragraf o ramce i zaznaczony checkbox

    Kryteria:

    R.3.3 Pole checkbox jest domyślnie zaznaczone

    ok. 1 min
    Polecenie z arkusza

    Paragraf z tekstem „Czy rysunek ma mieć ramkę?” i w nowej linii pole checkbox domyślnie zaznaczone i podpisane „Rysuj ramkę”

    <input type="checkbox"> z atrybutem checked jest zaznaczony od załadowania strony (R.3.3), a podpis „Rysuj ramkę” stoi zaraz za nim. Ramka obrazu na starcie jest, więc stan pola zgadza się z wyglądem.

    konfigurator.html HTML zmienione: 3 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Style w JavaScript</title>
    <link rel="stylesheet" href="styl6.css">
</head>
<body>
    <section id="left">
        <h1>Konfigurator stylu</h1>
        <p>Podaj kolor tła<br>
            <button>Indigo</button>
            <button>SteelBlue</button>
            <button>Olive</button>
        </p>
        <p>Podaj kolor czcionki<br>
            <select id="color">
                <option>White</option>
                <option>Tan</option>
                <option>Bisque</option>
                <option>Plum</option>
            </select>
        </p>
        <p>Podaj rozmiar czcionki w procentach, np. 200%<br>
            <input type="text" id="size" value="100%">
        </p>
        <p>Czy rysunek ma mieć ramkę?<br>
            <input type="checkbox" id="frame" checked> Rysuj ramkę
        </p>
    </section>
    <section id="right">
    </section>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (konfigurator.html)

  19. Krok 19: Paragraf o punktorach i trzy pola radio

    Kryteria: ,

    R.2.8 W bloku lewym umieszczono kontrolki: pole edycyjne, checkbox i trzy przyciski radio

    R.3.4 Jednocześnie może być zaznaczone tylko jedno pole typu radio

    ok. 2 min
    Polecenie z arkusza

    Paragraf z tekstem „Jaki jest typ punktora listy?” i w nowej linii trzy zgrupowane pola radio, z których pierwszy jest zaznaczony. Podpisy pól: dysk, kwadrat, okrąg

    „Zgrupowane” pola radio to pola o tej samej nazwie (name="bullet"): przeglądarka pozwala zaznaczyć tylko jedno z nich (R.3.4). Pierwsze ma checked. Każde pole stoi w osobnej linii, jak na obrazie 2a. Komplet kontrolek w bloku lewym: pole edycyjne, checkbox i trzy pola radio (R.2.8).

    Typowe błędy

    Różne nazwy pól radio (name="r1", name="r2"…) pozwolą zaznaczyć wszystkie trzy naraz - R.3.4 przepada.

    konfigurator.html HTML zmienione: 5 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Style w JavaScript</title>
    <link rel="stylesheet" href="styl6.css">
</head>
<body>
    <section id="left">
        <h1>Konfigurator stylu</h1>
        <p>Podaj kolor tła<br>
            <button>Indigo</button>
            <button>SteelBlue</button>
            <button>Olive</button>
        </p>
        <p>Podaj kolor czcionki<br>
            <select id="color">
                <option>White</option>
                <option>Tan</option>
                <option>Bisque</option>
                <option>Plum</option>
            </select>
        </p>
        <p>Podaj rozmiar czcionki w procentach, np. 200%<br>
            <input type="text" id="size" value="100%">
        </p>
        <p>Czy rysunek ma mieć ramkę?<br>
            <input type="checkbox" id="frame" checked> Rysuj ramkę
        </p>
        <p>Jaki jest typ punktora listy?<br>
            <input type="radio" name="bullet" checked> dysk<br>
            <input type="radio" name="bullet"> kwadrat<br>
            <input type="radio" name="bullet"> okrąg
        </p>
    </section>
    <section id="right">
    </section>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (konfigurator.html)

  20. Krok 20: Blok prawy: obraz Gibraltaru

    Kryteria:

    R.2.9 W bloku prawym umieszczono obraz gibraltar.jpg z tekstem alternatywnym „półwysep Gibraltar”

    ok. 1 min
    Polecenie z arkusza

    Zawartość bloku prawego: obraz gibraltar.jpg z tekstem alternatywnym „półwysep Gibraltar”

    <img> z plikiem przeskalowanym w kroku grafiki i atrybutem alt (R.2.9). Identyfikatora nie trzeba - skrypt znajdzie obraz w bloku prawym.

    konfigurator.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Style w JavaScript</title>
    <link rel="stylesheet" href="styl6.css">
</head>
<body>
    <section id="left">
        <h1>Konfigurator stylu</h1>
        <p>Podaj kolor tła<br>
            <button>Indigo</button>
            <button>SteelBlue</button>
            <button>Olive</button>
        </p>
        <p>Podaj kolor czcionki<br>
            <select id="color">
                <option>White</option>
                <option>Tan</option>
                <option>Bisque</option>
                <option>Plum</option>
            </select>
        </p>
        <p>Podaj rozmiar czcionki w procentach, np. 200%<br>
            <input type="text" id="size" value="100%">
        </p>
        <p>Czy rysunek ma mieć ramkę?<br>
            <input type="checkbox" id="frame" checked> Rysuj ramkę
        </p>
        <p>Jaki jest typ punktora listy?<br>
            <input type="radio" name="bullet" checked> dysk<br>
            <input type="radio" name="bullet"> kwadrat<br>
            <input type="radio" name="bullet"> okrąg
        </p>
    </section>
    <section id="right">
        <img src="gibraltar.jpg" alt="półwysep Gibraltar">
    </section>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (konfigurator.html)

  21. Krok 21: Blok prawy: lista punktowana

    Kryteria:

    R.2.10 W bloku prawym umieszczono listę punktowaną o trzech elementach, zastosowano znaczniki <ul> i <li> wraz z ich zamknięciami

    ok. 1 min
    Polecenie z arkusza

    lista punktowana (nieuporządkowana) o trzech elementach: element 1, element 2, element 3

    Lista nieuporządkowana to <ul> z elementami <li>, każdy zamknięty (R.2.10). Domyślny punktor to pełne kółko (disc) - pasuje do zaznaczonego na starcie pola „dysk”. Identyfikator list przyda się skryptowi.

    konfigurator.html HTML zmienione: 5 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Style w JavaScript</title>
    <link rel="stylesheet" href="styl6.css">
</head>
<body>
    <section id="left">
        <h1>Konfigurator stylu</h1>
        <p>Podaj kolor tła<br>
            <button>Indigo</button>
            <button>SteelBlue</button>
            <button>Olive</button>
        </p>
        <p>Podaj kolor czcionki<br>
            <select id="color">
                <option>White</option>
                <option>Tan</option>
                <option>Bisque</option>
                <option>Plum</option>
            </select>
        </p>
        <p>Podaj rozmiar czcionki w procentach, np. 200%<br>
            <input type="text" id="size" value="100%">
        </p>
        <p>Czy rysunek ma mieć ramkę?<br>
            <input type="checkbox" id="frame" checked> Rysuj ramkę
        </p>
        <p>Jaki jest typ punktora listy?<br>
            <input type="radio" name="bullet" checked> dysk<br>
            <input type="radio" name="bullet"> kwadrat<br>
            <input type="radio" name="bullet"> okrąg
        </p>
    </section>
    <section id="right">
        <img src="gibraltar.jpg" alt="półwysep Gibraltar">
        <ul id="list">
            <li>element 1</li>
            <li>element 2</li>
            <li>element 3</li>
        </ul>
    </section>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (konfigurator.html)

  22. Krok 22: Blok prawy: paragraf „Lorem ipsum”

    Kryteria:

    R.2.6 W bloku lewym zapisano nagłówek h1: "Konfigurator stylu" oraz przynajmniej jeden paragraf, w bloku prawym zapisano paragraf z treścią "Lorem ipsum… "

    ok. 1 min
    Polecenie z arkusza

    paragraf o treści „Lorem ipsum...”. Tekst znajduje się w pliku Lorem Ipsum.txt rozpakowanym z archiwum

    Treść pliku Lorem Ipsum.txt kopiujesz w całości do akapitu <p>. Nagłówek <h1> i akapity w bloku lewym oraz ten akapit w bloku prawym dają R.2.6.

    konfigurator.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Style w JavaScript</title>
    <link rel="stylesheet" href="styl6.css">
</head>
<body>
    <section id="left">
        <h1>Konfigurator stylu</h1>
        <p>Podaj kolor tła<br>
            <button>Indigo</button>
            <button>SteelBlue</button>
            <button>Olive</button>
        </p>
        <p>Podaj kolor czcionki<br>
            <select id="color">
                <option>White</option>
                <option>Tan</option>
                <option>Bisque</option>
                <option>Plum</option>
            </select>
        </p>
        <p>Podaj rozmiar czcionki w procentach, np. 200%<br>
            <input type="text" id="size" value="100%">
        </p>
        <p>Czy rysunek ma mieć ramkę?<br>
            <input type="checkbox" id="frame" checked> Rysuj ramkę
        </p>
        <p>Jaki jest typ punktora listy?<br>
            <input type="radio" name="bullet" checked> dysk<br>
            <input type="radio" name="bullet"> kwadrat<br>
            <input type="radio" name="bullet"> okrąg
        </p>
    </section>
    <section id="right">
        <img src="gibraltar.jpg" alt="półwysep Gibraltar">
        <ul id="list">
            <li>element 1</li>
            <li>element 2</li>
            <li>element 3</li>
        </ul>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </section>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (konfigurator.html)

  23. Krok 23: Stopka z autorem strony

    ok. 1 min
    Polecenie z arkusza

    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

    Na egzaminie po dwukropku wpisujesz swój numer PESEL. W tym rozwiązaniu w jego miejscu stoi imię i nazwisko autora: Bartosz Bryniarski. Klucz nie ma kryterium stopki, ale arkusz jej wymaga.

    konfigurator.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Style w JavaScript</title>
    <link rel="stylesheet" href="styl6.css">
</head>
<body>
    <section id="left">
        <h1>Konfigurator stylu</h1>
        <p>Podaj kolor tła<br>
            <button>Indigo</button>
            <button>SteelBlue</button>
            <button>Olive</button>
        </p>
        <p>Podaj kolor czcionki<br>
            <select id="color">
                <option>White</option>
                <option>Tan</option>
                <option>Bisque</option>
                <option>Plum</option>
            </select>
        </p>
        <p>Podaj rozmiar czcionki w procentach, np. 200%<br>
            <input type="text" id="size" value="100%">
        </p>
        <p>Czy rysunek ma mieć ramkę?<br>
            <input type="checkbox" id="frame" checked> Rysuj ramkę
        </p>
        <p>Jaki jest typ punktora listy?<br>
            <input type="radio" name="bullet" checked> dysk<br>
            <input type="radio" name="bullet"> kwadrat<br>
            <input type="radio" name="bullet"> okrąg
        </p>
    </section>
    <section id="right">
        <img src="gibraltar.jpg" alt="półwysep Gibraltar">
        <ul id="list">
            <li>element 1</li>
            <li>element 2</li>
            <li>element 3</li>
        </ul>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </section>
    <footer>
        Autor: Bartosz Bryniarski
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (konfigurator.html)

  24. Etap 3: Styl CSS

    Kroki 24-31 · po tym etapie masz 31 z 37 kryteriów (pkt)

    Krok 24: Plik styl6.css: krój Georgia dla całej strony

    Kryteria:

    R.4.1 Ustawiono domyślny krój czcionki dla całej strony na Georgia (dla selektora * lub body lub html lub kontenera całej strony)

    ok. 1 min
    Polecenie z arkusza

    Cechy formatowania CSS: Są zawarte wyłącznie w zewnętrznym arkuszu stylów. Domyślne dla całej strony: krój czcionki Georgia

    Nowy plik styl6.css - od teraz każda reguła trafia tylko tutaj. Selektor * obejmuje też przyciski, listę i pole edycyjne, które kroju po body nie dziedziczą (R.4.1).

    styl6.css CSS nowy plik 
    * {
    font-family: Georgia;
}
    Podgląd strony po tym kroku (konfigurator.html)

  25. Krok 25: Blok lewy: tło, kolor tekstu, wysokość, szerokość

    ok. 1 min
    Polecenie z arkusza

    Dla bloku lewego: kolor tła Maroon, biały kolor czcionki, wysokość 600 px, szerokość 30%

    Selektor #left. Nazwy kolorów CSS (Maroon, DimGray) można pisać dowolną wielkością liter - maroon też zadziała.

    styl6.css CSS zmienione: 6 linii 
    * {
    font-family: Georgia;
}
#left {
    background-color: Maroon;
    color: white;
    height: 600px;
    width: 30%;
}
    Podgląd strony po tym kroku (konfigurator.html)

  26. Krok 26: Blok prawy: tło, kolor, wymiary i paski przewijania

    Kryteria: , ,

    R.4.4 Ustawiono wysokość 600px dla bloku lewego i prawego

    R.4.5 Ustawiono szerokość bloku lewego 30% oraz prawego 70%

    R.4.6 Ustawiono paski przewijania dla bloku prawego, tak że pojawiają się tylko w przypadku, gdy zawartość bloku nie mieści się, np. overflow: auto;

    ok. 2 min
    Polecenie z arkusza

    Dla bloku prawego: kolor tła Maroon, biały kolor czcionki, wysokość 600 px, szerokość 70%, paski przewijania pojawiające się tylko w przypadku, gdy zawartość bloku nie mieści się

    Te same cechy co blok lewy, inna szerokość, i jedna nowa: overflow: auto - pasek przewijania pojawia się tylko wtedy, gdy treść nie mieści się w 600 px (R.4.6). Przy 200% czcionki tekst wyjdzie poza blok i pojawi się pionowy pasek, jak na obrazie 2b. overflow: scroll pokazywałby paski zawsze.

    Wysokości (R.4.4) i szerokości (R.4.5) obu bloków są ustawione.

    styl6.css CSS zmienione: 7 linii 
    * {
    font-family: Georgia;
}
#left {
    background-color: Maroon;
    color: white;
    height: 600px;
    width: 30%;
}
#right {
    background-color: Maroon;
    color: white;
    height: 600px;
    width: 70%;
    overflow: auto;
}
    Podgląd strony po tym kroku (konfigurator.html)

  27. Krok 27: Stopka: tło i kolor tekstu

    Kryteria: ,

    R.4.2 Ustawiono kolor tła Maroon dla bloku lewego i prawego oraz DimGray dla stopki

    R.4.3 Ustawiono biały kolor czcionki dla bloków lewego, prawego i stopki (lub wszystkich bloków)

    ok. 1 min
    Polecenie z arkusza

    Dla bloku stopki: kolor tła DimGray, biały kolor czcionki

    Tła trzech bloków (R.4.2) i biały kolor tekstu we wszystkich trzech (R.4.3) są ustawione.

    styl6.css CSS zmienione: 4 linie 
    * {
    font-family: Georgia;
}
#left {
    background-color: Maroon;
    color: white;
    height: 600px;
    width: 30%;
}
#right {
    background-color: Maroon;
    color: white;
    height: 600px;
    width: 70%;
    overflow: auto;
}
footer {
    background-color: DimGray;
    color: white;
}
    Podgląd strony po tym kroku (konfigurator.html)

  28. Krok 28: Układ: bloki obok siebie, stopka pod nimi

    Kryteria:

    R.3.1 Układ bloków lewego, prawego i stopki po uruchomieniu strony w przeglądarce jest zgodny z Obrazem 2a w arkuszu egzaminacyjnym (prawidłowo zastosowano właściwości CSS układające bloki na stronie, np. float i clear albo display flex albo grid)

    ok. 2 min
    Polecenie z arkusza

    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 2a

    Obie sekcje z float: left stają obok siebie (30% + 70% = 100%), a stopka z clear: both zaczyna się pod nimi (R.3.1). Wersja nowoczesna pokazuje ten sam układ na flex.

    Typowe błędy

    Selektor section zadziała tylko dlatego, że na stronie są dokładnie dwie sekcje - gdyby w bloku była trzecia, też by „popłynęła”. Bezpieczniej #left, #right.

    styl6.css CSS zmienione: 6 linii 
    * {
    font-family: Georgia;
}
#left {
    background-color: Maroon;
    color: white;
    height: 600px;
    width: 30%;
}
#right {
    background-color: Maroon;
    color: white;
    height: 600px;
    width: 70%;
    overflow: auto;
}
footer {
    background-color: DimGray;
    color: white;
}
section {
    float: left;
}
footer {
    clear: both;
}
    Podgląd strony po tym kroku (konfigurator.html)

  29. Krok 29: Obraz i lista obok siebie, paragraf pod nimi

    Kryteria:

    R.4.8 Ustawiono styl dla obrazu i listy, tak aby były wyświetlane obok siebie, paragraf pod nimi

    ok. 2 min
    Polecenie z arkusza

    Dla elementów bloku prawego: obraz i lista są wyświetlane obok siebie, paragraf pod nimi

    Ten sam mechanizm co przy blokach, tylko wewnątrz bloku prawego: obraz i lista float: left stają obok siebie, a akapit z clear: both schodzi pod oba (R.4.8). Selektory potomka (#right img) ograniczają regułę do bloku prawego - akapity w bloku lewym zostają bez zmian.

    Typowe błędy

    Sam float na obrazie wystarczy, żeby lista stanęła obok - ale wtedy kropki listy rysują się na obrazie. Gdy pływają oba elementy, lista ma własne miejsce.

    styl6.css CSS zmienione: 6 linii 
    * {
    font-family: Georgia;
}
#left {
    background-color: Maroon;
    color: white;
    height: 600px;
    width: 30%;
}
#right {
    background-color: Maroon;
    color: white;
    height: 600px;
    width: 70%;
    overflow: auto;
}
footer {
    background-color: DimGray;
    color: white;
}
section {
    float: left;
}
footer {
    clear: both;
}
#right img, #right ul {
    float: left;
}
#right p {
    clear: both;
}
    Podgląd strony po tym kroku (konfigurator.html)

  30. Krok 30: Marginesy wewnętrzne paragrafów i obrazu, ramka obrazu

    Kryteria: ,

    R.4.7 Ustawiono marginesy wewnętrzne (padding) 10px dla selektora p i img

    R.4.9 Ustawiono obramowanie obrazu linią ciągłą o grubości 1 px i białym kolorze (selektor img lub identyfikator lub klasa)

    ok. 2 min
    Polecenie z arkusza

    Dla paragrafu: marginesy wewnętrzne 10 px. Dla obrazu: marginesy wewnętrzne 10 px, obramowanie linią ciągłą o grubości 1 px i białym kolorze

    Margines wewnętrzny to padding (R.4.7). Selektor p obejmuje wszystkie akapity strony - na obrazie 2a akapity w bloku lewym też mają odstęp od krawędzi. Ramka obrazu 1px solid white (R.4.9) leży na zewnątrz paddingu, więc między zdjęciem a białą linią zostaje 10 px tła - tak wygląda obraz na ilustracji.

    styl6.css CSS zmienione: 7 linii 
    * {
    font-family: Georgia;
}
#left {
    background-color: Maroon;
    color: white;
    height: 600px;
    width: 30%;
}
#right {
    background-color: Maroon;
    color: white;
    height: 600px;
    width: 70%;
    overflow: auto;
}
footer {
    background-color: DimGray;
    color: white;
}
section {
    float: left;
}
footer {
    clear: both;
}
#right img, #right ul {
    float: left;
}
#right p {
    clear: both;
}
p {
    padding: 10px;
}
img {
    padding: 10px;
    border: 1px solid white;
}
    Podgląd strony po tym kroku (konfigurator.html)

  31. Krok 31: Tło przycisków w kolorze ich podpisu

    Kryteria:

    R.4.10 Ustawiono kolory tła dla przycisków, pierwszy: Indigo, drugi: SteelBlue, trzeci: Olive

    ok. 3 min
    Polecenie z arkusza

    Dla przycisków zmieniających tło: kolor tła przycisku odpowiada jego podpisowi (np. kolor Indigo dla przycisku podpisanego Indigo)

    Przyciski nie mają klas, więc rozróżnia je pozycja: :nth-child(n) wskazuje element, który jest n-tym dzieckiem swojego rodzica. W akapicie pierwszym dzieckiem jest <br>, więc przyciski są dziećmi nr 2, 3 i 4 (tekst „Podaj kolor tła” to nie element i się nie liczy). Kolejność kolorów z klucza: Indigo, SteelBlue, Olive (R.4.10).

    Klucz nie wymaga zmiany koloru tekstu - na obrazie 2a napisy na przyciskach są czarne.

    Typowe błędy

    button:nth-child(1) nie trafi w żaden przycisk - pierwszym dzieckiem akapitu jest <br>. Zamiast liczyć, można dać przyciskom identyfikatory albo klasy.

    styl6.css CSS zmienione: 9 linii 
    * {
    font-family: Georgia;
}
#left {
    background-color: Maroon;
    color: white;
    height: 600px;
    width: 30%;
}
#right {
    background-color: Maroon;
    color: white;
    height: 600px;
    width: 70%;
    overflow: auto;
}
footer {
    background-color: DimGray;
    color: white;
}
section {
    float: left;
}
footer {
    clear: both;
}
#right img, #right ul {
    float: left;
}
#right p {
    clear: both;
}
p {
    padding: 10px;
}
img {
    padding: 10px;
    border: 1px solid white;
}
button:nth-child(2) {
    background-color: Indigo;
}
button:nth-child(3) {
    background-color: SteelBlue;
}
button:nth-child(4) {
    background-color: Olive;
}
    Podgląd strony po tym kroku (konfigurator.html)

  32. Etap 4: Skrypt JavaScript

    Kroki 32-36 · po tym etapie masz 37 z 37 kryteriów (pkt)

    Krok 32: Funkcja zmieniająca tło bloku prawego

    Kryteria: ,

    R.5.1 Dla przynajmniej jednego zdarzenia kontrolki przypisano do niego funkcję JavaScript (może być pusta)

    R.5.2 Po kliknięciu na przynajmniej jeden przycisk zmieniający tło, zostaje zmienione tło bloku prawego na kolor odpowiadający podpisowi przycisku

    ok. 4 min
    Polecenie z arkusza

    Skrypt: Napisany w języku JavaScript i wykonujący akcje spowodowane zdarzeniami kontrolek. Akcje modyfikują styl CSS bloku prawego i jego elementów, na podstawie przykładu przedstawionego na Obrazie 2b. Po kliknięciu na dowolny przycisk zmieniający tło, zostaje zmienione tło bloku prawego na kolor odpowiadający podpisowi przycisku

    Skrypt stoi w znaczniku <script> na końcu <body> - przeglądarka zna już wtedy wszystkie elementy strony.

    • funkcja changeBackground(color) dostaje kolor jako parametr: document.getElementById('right') znajduje blok prawy, a style.backgroundColor (tabela 1 arkusza) ustawia jego tło,
    • każdy przycisk ma atrybut onclick z wywołaniem tej funkcji i swoim kolorem: changeBackground('Olive'). Jedna funkcja obsługuje trzy przyciski.

    Zdarzeniu przycisku jest przypisana funkcja (R.5.1), a kliknięcie zmienia tło bloku prawego (R.5.2). Podgląd działa - kliknij „Olive”. Sprawdzone w Chrome: tło zmienia się z Maroon na kolor przycisku.

    Typowe błędy

    style.background-color z myślnikiem nie zadziała - w JavaScript nazwy właściwości CSS pisze się bez myślników, z wielką literą: backgroundColor, fontSize, listStyleType.

    konfigurator.html HTML zmienione: 8 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Style w JavaScript</title>
    <link rel="stylesheet" href="styl6.css">
</head>
<body>
    <section id="left">
        <h1>Konfigurator stylu</h1>
        <p>Podaj kolor tła<br>
            <button onclick="changeBackground('Indigo')">Indigo</button>
            <button onclick="changeBackground('SteelBlue')">SteelBlue</button>
            <button onclick="changeBackground('Olive')">Olive</button>
        </p>
        <p>Podaj kolor czcionki<br>
            <select id="color">
                <option>White</option>
                <option>Tan</option>
                <option>Bisque</option>
                <option>Plum</option>
            </select>
        </p>
        <p>Podaj rozmiar czcionki w procentach, np. 200%<br>
            <input type="text" id="size" value="100%">
        </p>
        <p>Czy rysunek ma mieć ramkę?<br>
            <input type="checkbox" id="frame" checked> Rysuj ramkę
        </p>
        <p>Jaki jest typ punktora listy?<br>
            <input type="radio" name="bullet" checked> dysk<br>
            <input type="radio" name="bullet"> kwadrat<br>
            <input type="radio" name="bullet"> okrąg
        </p>
    </section>
    <section id="right">
        <img src="gibraltar.jpg" alt="półwysep Gibraltar">
        <ul id="list">
            <li>element 1</li>
            <li>element 2</li>
            <li>element 3</li>
        </ul>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </section>
    <footer>
        Autor: Bartosz Bryniarski
    </footer>
    <script>
        function changeBackground(color) {
            document.getElementById('right').style.backgroundColor = color;
        }
    </script>
</body>
</html>
    Podgląd strony po tym kroku (konfigurator.html)

  33. Krok 33: Kolor czcionki z listy rozwijalnej

    Kryteria:

    R.5.3 Po wybraniu koloru z listy, zostaje zmieniony w bloku prawym kolor czcionki na wybrany

    ok. 3 min
    Polecenie z arkusza

    Po kliknięciu pola wyboru koloru czcionki, zostaje zmieniony kolor czcionki bloku prawego na kolor odpowiadający wyborowi

    Lista dostaje zdarzenie onchange - zachodzi wtedy, gdy wybrana opcja się zmieni. Funkcja changeColor odczytuje value listy (tekst wybranej opcji, np. Tan) i wpisuje go do style.color bloku prawego. Akapit i lista dziedziczą kolor po bloku, więc zmienia się cały tekst (R.5.3).

    Arkusz pisze „po kliknięciu pola wyboru”, a klucz - „po wybraniu koloru z listy”. Sam onclick na liście uruchamia się już przy rozwijaniu, zanim wybierzesz kolor - onchange reaguje dokładnie na wybór.

    konfigurator.html HTML zmienione: 5 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Style w JavaScript</title>
    <link rel="stylesheet" href="styl6.css">
</head>
<body>
    <section id="left">
        <h1>Konfigurator stylu</h1>
        <p>Podaj kolor tła<br>
            <button onclick="changeBackground('Indigo')">Indigo</button>
            <button onclick="changeBackground('SteelBlue')">SteelBlue</button>
            <button onclick="changeBackground('Olive')">Olive</button>
        </p>
        <p>Podaj kolor czcionki<br>
            <select id="color" onchange="changeColor()">
                <option>White</option>
                <option>Tan</option>
                <option>Bisque</option>
                <option>Plum</option>
            </select>
        </p>
        <p>Podaj rozmiar czcionki w procentach, np. 200%<br>
            <input type="text" id="size" value="100%">
        </p>
        <p>Czy rysunek ma mieć ramkę?<br>
            <input type="checkbox" id="frame" checked> Rysuj ramkę
        </p>
        <p>Jaki jest typ punktora listy?<br>
            <input type="radio" name="bullet" checked> dysk<br>
            <input type="radio" name="bullet"> kwadrat<br>
            <input type="radio" name="bullet"> okrąg
        </p>
    </section>
    <section id="right">
        <img src="gibraltar.jpg" alt="półwysep Gibraltar">
        <ul id="list">
            <li>element 1</li>
            <li>element 2</li>
            <li>element 3</li>
        </ul>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </section>
    <footer>
        Autor: Bartosz Bryniarski
    </footer>
    <script>
        function changeBackground(color) {
            document.getElementById('right').style.backgroundColor = color;
        }

        function changeColor() {
            document.getElementById('right').style.color = document.getElementById('color').value;
        }
    </script>
</body>
</html>
    Podgląd strony po tym kroku (konfigurator.html)

  34. Krok 34: Rozmiar czcionki po wyjściu z pola

    Kryteria:

    R.5.4 Po wpisaniu rozmiaru czcionki i opuszczeniu kontrolki (np. onfocusout lub onblur), zmieniany jest rozmiar czcionki dla całego bloku prawego. Należy wpisać wartość, np. 200%, 50%

    ok. 3 min
    Polecenie z arkusza

    Po wpisaniu rozmiaru czcionki i wyjściu z kontrolki (tabulacją lub kliknięciem myszą w obszar poza kontrolką), zmieniany jest rozmiar czcionki dla całego bloku prawego. Nie jest wymagana walidacja tego pola, należy założyć, że pole jest wypełnione poprawnie

    Wyjście z kontrolki to zdarzenie onblur (w tabeli 1: onfocusout / onblur) - zachodzi, gdy pole traci kursor, tabulatorem albo kliknięciem obok. Funkcja changeSize wpisuje tekst z pola do style.fontSize bloku prawego. Wartość ma już jednostkę (200%), więc trafia do stylu bez zmian (R.5.4).

    Sprawdzone w Chrome: po wpisaniu 200% czcionka bloku rośnie z 16 do 32 px, tekst przestaje się mieścić i pojawia się pasek przewijania - jak na obrazie 2b.

    Typowe błędy

    onchange na polu tekstowym też zadziała po wyjściu z pola, ale tylko wtedy, gdy wartość się zmieniła. onkeyup reagowałby na każdy znak - przy wpisywaniu 200% blok przeskoczyłby kolejno przez 2, 20 i 200 bez jednostki.

    konfigurator.html HTML zmienione: 5 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Style w JavaScript</title>
    <link rel="stylesheet" href="styl6.css">
</head>
<body>
    <section id="left">
        <h1>Konfigurator stylu</h1>
        <p>Podaj kolor tła<br>
            <button onclick="changeBackground('Indigo')">Indigo</button>
            <button onclick="changeBackground('SteelBlue')">SteelBlue</button>
            <button onclick="changeBackground('Olive')">Olive</button>
        </p>
        <p>Podaj kolor czcionki<br>
            <select id="color" onchange="changeColor()">
                <option>White</option>
                <option>Tan</option>
                <option>Bisque</option>
                <option>Plum</option>
            </select>
        </p>
        <p>Podaj rozmiar czcionki w procentach, np. 200%<br>
            <input type="text" id="size" value="100%" onblur="changeSize()">
        </p>
        <p>Czy rysunek ma mieć ramkę?<br>
            <input type="checkbox" id="frame" checked> Rysuj ramkę
        </p>
        <p>Jaki jest typ punktora listy?<br>
            <input type="radio" name="bullet" checked> dysk<br>
            <input type="radio" name="bullet"> kwadrat<br>
            <input type="radio" name="bullet"> okrąg
        </p>
    </section>
    <section id="right">
        <img src="gibraltar.jpg" alt="półwysep Gibraltar">
        <ul id="list">
            <li>element 1</li>
            <li>element 2</li>
            <li>element 3</li>
        </ul>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </section>
    <footer>
        Autor: Bartosz Bryniarski
    </footer>
    <script>
        function changeBackground(color) {
            document.getElementById('right').style.backgroundColor = color;
        }

        function changeColor() {
            document.getElementById('right').style.color = document.getElementById('color').value;
        }

        function changeSize() {
            document.getElementById('right').style.fontSize = document.getElementById('size').value;
        }
    </script>
</body>
</html>
    Podgląd strony po tym kroku (konfigurator.html)

  35. Krok 35: Ramka obrazu zależna od checkboxa - przez funkcję

    Kryteria:

    R.5.5 Jeżeli zaznaczono pole checkbox, w bloku prawym jest dodawane obramowanie obrazu, w przeciwnym wypadku usuwane obramowanie

    ok. 3 min
    Polecenie z arkusza

    Po kliknięciu w pole checkbox, w zależności od stanu pola, jest dodawane lub usuwane obramowanie obrazu – wymagana realizacja zdarzenia za pomocą funkcji

    Funkcja toggleFrame uruchamiana zdarzeniem onclick checkboxa:

    • getElementsByTagName('img')[0] wywołane na bloku prawym - pierwszy (jedyny) obraz w tym bloku,
    • checked to stan pola już po kliknięciu: true - zaznaczone, false - odznaczone,
    • zaznaczone: ramka 1px solid white jak w CSS, odznaczone: none (R.5.5).

    Styl wpisany przez JavaScript trafia do atrybutu style elementu i wygrywa z regułą z styl6.css - dlatego none usuwa ramkę ustawioną w arkuszu stylów.

    konfigurator.html HTML zmienione: 10 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Style w JavaScript</title>
    <link rel="stylesheet" href="styl6.css">
</head>
<body>
    <section id="left">
        <h1>Konfigurator stylu</h1>
        <p>Podaj kolor tła<br>
            <button onclick="changeBackground('Indigo')">Indigo</button>
            <button onclick="changeBackground('SteelBlue')">SteelBlue</button>
            <button onclick="changeBackground('Olive')">Olive</button>
        </p>
        <p>Podaj kolor czcionki<br>
            <select id="color" onchange="changeColor()">
                <option>White</option>
                <option>Tan</option>
                <option>Bisque</option>
                <option>Plum</option>
            </select>
        </p>
        <p>Podaj rozmiar czcionki w procentach, np. 200%<br>
            <input type="text" id="size" value="100%" onblur="changeSize()">
        </p>
        <p>Czy rysunek ma mieć ramkę?<br>
            <input type="checkbox" id="frame" checked onclick="toggleFrame()"> Rysuj ramkę
        </p>
        <p>Jaki jest typ punktora listy?<br>
            <input type="radio" name="bullet" checked> dysk<br>
            <input type="radio" name="bullet"> kwadrat<br>
            <input type="radio" name="bullet"> okrąg
        </p>
    </section>
    <section id="right">
        <img src="gibraltar.jpg" alt="półwysep Gibraltar">
        <ul id="list">
            <li>element 1</li>
            <li>element 2</li>
            <li>element 3</li>
        </ul>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </section>
    <footer>
        Autor: Bartosz Bryniarski
    </footer>
    <script>
        function changeBackground(color) {
            document.getElementById('right').style.backgroundColor = color;
        }

        function changeColor() {
            document.getElementById('right').style.color = document.getElementById('color').value;
        }

        function changeSize() {
            document.getElementById('right').style.fontSize = document.getElementById('size').value;
        }

        function toggleFrame() {
            var image = document.getElementById('right').getElementsByTagName('img')[0];
            if (document.getElementById('frame').checked) {
                image.style.border = '1px solid white';
            } else {
                image.style.border = 'none';
            }
        }
    </script>
</body>
</html>
    Podgląd strony po tym kroku (konfigurator.html)

  36. Krok 36: Punktory listy z pól radio

    Kryteria:

    R.5.6 Po kliknięciu w pola radio jest ustawiony wybrany rodzaj formatowania punktorów listy w bloku prawym

    ok. 2 min
    Polecenie z arkusza

    Po kliknięciu w pola radio jest ustawiony wybrany rodzaj formatowania punktorów listy

    Funkcja changeBullet(type) wpisuje do style.listStyleType listy wartość przekazaną z pola. Każde pole radio wywołuje ją w onclick z innym typem z tabeli 1 arkusza: dysk - disc, kwadrat - square, okrąg - circle (R.5.6).

    Skrypt jest kompletny. Sprawdzone w Chrome cały scenariusz z obrazu 2b: Olive, Tan, 200%, odznaczona ramka i kwadrat - każda zmiana trafia do bloku prawego.

    konfigurator.html HTML zmienione: 7 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Style w JavaScript</title>
    <link rel="stylesheet" href="styl6.css">
</head>
<body>
    <section id="left">
        <h1>Konfigurator stylu</h1>
        <p>Podaj kolor tła<br>
            <button onclick="changeBackground('Indigo')">Indigo</button>
            <button onclick="changeBackground('SteelBlue')">SteelBlue</button>
            <button onclick="changeBackground('Olive')">Olive</button>
        </p>
        <p>Podaj kolor czcionki<br>
            <select id="color" onchange="changeColor()">
                <option>White</option>
                <option>Tan</option>
                <option>Bisque</option>
                <option>Plum</option>
            </select>
        </p>
        <p>Podaj rozmiar czcionki w procentach, np. 200%<br>
            <input type="text" id="size" value="100%" onblur="changeSize()">
        </p>
        <p>Czy rysunek ma mieć ramkę?<br>
            <input type="checkbox" id="frame" checked onclick="toggleFrame()"> Rysuj ramkę
        </p>
        <p>Jaki jest typ punktora listy?<br>
            <input type="radio" name="bullet" checked onclick="changeBullet('disc')"> dysk<br>
            <input type="radio" name="bullet" onclick="changeBullet('square')"> kwadrat<br>
            <input type="radio" name="bullet" onclick="changeBullet('circle')"> okrąg
        </p>
    </section>
    <section id="right">
        <img src="gibraltar.jpg" alt="półwysep Gibraltar">
        <ul id="list">
            <li>element 1</li>
            <li>element 2</li>
            <li>element 3</li>
        </ul>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </section>
    <footer>
        Autor: Bartosz Bryniarski
    </footer>
    <script>
        function changeBackground(color) {
            document.getElementById('right').style.backgroundColor = color;
        }

        function changeColor() {
            document.getElementById('right').style.color = document.getElementById('color').value;
        }

        function changeSize() {
            document.getElementById('right').style.fontSize = document.getElementById('size').value;
        }

        function toggleFrame() {
            var image = document.getElementById('right').getElementsByTagName('img')[0];
            if (document.getElementById('frame').checked) {
                image.style.border = '1px solid white';
            } else {
                image.style.border = 'none';
            }
        }

        function changeBullet(type) {
            document.getElementById('list').style.listStyleType = type;
        }
    </script>
</body>
</html>
    Podgląd strony po tym kroku (konfigurator.html)

  37. Etap 5: Dobre praktyki (poza kluczem)

    Kroki 37-38 · po tym etapie masz 37 z 37 kryteriów (pkt)

    Krok 37: Zabezpieczenie: sprawdzenie wartości z pola rozmiaru

    ok. 4 min
    Polecenie z arkusza

    Nie jest wymagana walidacja tego pola, należy założyć, że pole jest wypełnione poprawnie

    Na egzaminie arkusz zwalnia z walidacji, ale skrypt przyjmuje wszystko, co ktoś wpisze. Sprawdzone w Chrome na wersji z poprzednich kroków:

    • abc - przeglądarka cicho odrzuca błędną wartość: czcionka się nie zmienia, a w polu dalej stoi abc, więc pole i strona pokazują co innego,
    • 5000% - czcionka bloku urasta do 800 px, tekst wychodzi daleko poza okno i strona robi się nieużywalna, dopóki ktoś nie wpisze innej liczby.

    Zasada: dane od użytkownika sprawdza się białą listą - opisuje się, co jest dozwolone, a nie wylicza zakazanego. Tu wyrażenie regularne /^[0-9]{1,3}%$/ przepuszcza tylko od jednej do trzech cyfr i znak procentu, a parseInt z warunkiem trzyma wartość między 50 a 300%. Spacje z brzegów obcina trim(). Wartość spoza listy nie trafia do stylu, a pole wraca do ostatniego poprawnego rozmiaru - stan pola znów zgadza się z wyglądem. Stara linia zostaje w komentarzu.

    Ta sama zasada chroni przed sklejaniem stylu z wpisanego tekstu: wartość 20px; color: red też nie przejdzie. Na egzaminie wystarczy wersja wcześniejsza - klucz tego nie sprawdza.

    konfigurator.html HTML zmienione: 8 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Style w JavaScript</title>
    <link rel="stylesheet" href="styl6.css">
</head>
<body>
    <section id="left">
        <h1>Konfigurator stylu</h1>
        <p>Podaj kolor tła<br>
            <button onclick="changeBackground('Indigo')">Indigo</button>
            <button onclick="changeBackground('SteelBlue')">SteelBlue</button>
            <button onclick="changeBackground('Olive')">Olive</button>
        </p>
        <p>Podaj kolor czcionki<br>
            <select id="color" onchange="changeColor()">
                <option>White</option>
                <option>Tan</option>
                <option>Bisque</option>
                <option>Plum</option>
            </select>
        </p>
        <p>Podaj rozmiar czcionki w procentach, np. 200%<br>
            <input type="text" id="size" value="100%" onblur="changeSize()">
        </p>
        <p>Czy rysunek ma mieć ramkę?<br>
            <input type="checkbox" id="frame" checked onclick="toggleFrame()"> Rysuj ramkę
        </p>
        <p>Jaki jest typ punktora listy?<br>
            <input type="radio" name="bullet" checked onclick="changeBullet('disc')"> dysk<br>
            <input type="radio" name="bullet" onclick="changeBullet('square')"> kwadrat<br>
            <input type="radio" name="bullet" onclick="changeBullet('circle')"> okrąg
        </p>
    </section>
    <section id="right">
        <img src="gibraltar.jpg" alt="półwysep Gibraltar">
        <ul id="list">
            <li>element 1</li>
            <li>element 2</li>
            <li>element 3</li>
        </ul>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </section>
    <footer>
        Autor: Bartosz Bryniarski
    </footer>
    <script>
        function changeBackground(color) {
            document.getElementById('right').style.backgroundColor = color;
        }

        function changeColor() {
            document.getElementById('right').style.color = document.getElementById('color').value;
        }

        function changeSize() {
            // document.getElementById('right').style.fontSize = document.getElementById('size').value;
            var field = document.getElementById('size');
            var value = field.value.trim();
            if (/^[0-9]{1,3}%$/.test(value) && parseInt(value) >= 50 && parseInt(value) <= 300) {
                document.getElementById('right').style.fontSize = value;
            } else {
                field.value = document.getElementById('right').style.fontSize || '100%';
            }
        }

        function toggleFrame() {
            var image = document.getElementById('right').getElementsByTagName('img')[0];
            if (document.getElementById('frame').checked) {
                image.style.border = '1px solid white';
            } else {
                image.style.border = 'none';
            }
        }

        function changeBullet(type) {
            document.getElementById('list').style.listStyleType = type;
        }
    </script>
</body>
</html>
    Podgląd strony po tym kroku (konfigurator.html)

  38. Krok 38: Konto bazy danych z zapytania 1: hasło, host, uprawnienia

    ok. 2 min
    Polecenie z arkusza

    Zapytanie 1: tworzące użytkownika Agnieszka z hasłem haslo4

    Zapytanie 1 jest poprawne dla klucza, ale tak utworzone konto byłoby słabym punktem prawdziwego serwera:

    • hasło haslo4 odgadnie każdy program do zgadywania haseł w pierwszych sekundach - konto bazy dostaje długie losowe hasło, zapisane w konfiguracji aplikacji, nie w kodzie strony,
    • brak @'host' to w MariaDB host %: konto może logować się z każdego komputera, z którego serwer jest osiągalny. Konto używane przez stronę na tym samym serwerze ogranicza się do 'Agnieszka'@'localhost',
    • uprawnienia nadaje się najmniejsze potrzebne - nowe konto nie ma żadnych, a gdyby strona miała tylko czytać samochody, wystarczy:
    CREATE USER 'Agnieszka'@'localhost' IDENTIFIED BY 'długie-losowe-hasło';
GRANT SELECT ON auta.samochody TO 'Agnieszka'@'localhost';

    Konto root bez hasła z XAMPP-a to wygoda pracowni egzaminacyjnej, nie wzór. Na egzaminie zapisz zapytanie dokładnie tak, jak każe arkusz - inaczej użytkownik nie będzie miał hasła haslo4.

    kwerendy.txt Tekst zmienione: 0 linii 
    -- Zapytanie 1
CREATE USER 'Agnieszka' IDENTIFIED BY 'haslo4';

-- Zapytanie 2
SELECT AVG(rocznik) FROM samochody WHERE marka = 'opel';

-- Zapytanie 3
SELECT marka, imie
FROM samochody
JOIN wypozyczenia ON samochody.id = wypozyczenia.samochody_id
JOIN klienci ON klienci.id = wypozyczenia.klienci_id;

-- Zapytanie 4
ALTER TABLE klasa DROP COLUMN cena;
    Podgląd strony po tym kroku (konfigurator.html)
    Podgląd strony po kroku 38

  39. Etap 6: Oddanie pracy

    Krok 39 · po tym etapie masz 37 z 37 kryteriów (pkt)

    Krok 39: Plik przeglądarka.txt i nagranie płyty

    ok. 5 min
    Polecenie z arkusza

    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 weryfikowałeś poprawność działania witryny. Nagraj płytę z rezultatami pracy.

    W przeglądarka.txt wpisujesz nazwę przeglądarki, w której sprawdzasz działanie skryptu.

    W folderze z numerem zdającego muszą być: egzamin.jpg, gibraltar.jpg, konfigurator.html, kw1.png - kw4.png, kwerendy.txt, przeglądarka.txt i styl6.css. Nagraj płytę, sprawdź jej odczyt w obecności przewodniczącego zespołu nadzorującego i opisz ją numerem zdającego.

    przeglądarka.txt Tekst nowy plik 
    Google Chrome
    Podgląd strony po tym kroku (konfigurator.html)

Podgląd

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: . 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.

Potwierdzenie

Informacja