Przeskocz do treści

Lekcja 30 (CSS)

Zdarzenia i skrypty na stronie www.

Zapoznaj się z treścią artykułu, a następnie wykonaj zadania zamieszczone poniżej.

Zadanie 1: Przygotuj formularz składający się z dwóch pól typu text oraz jednego przycisku. Korzystając z przykładu, utwórz kod, który po najechaniu kursorem myszy nad obszar pola tekstowego zmieni jego kolor tła. Dodaj właściwy zapis, który sprawi, że po kliknięciu na przycisku wyświetli się w nowym oknie komunikat: "Właśnie widać działanie zdarzenia onclick.".

Zadanie 2: Przygotuj dokument zawierający obszar tekstowy oraz umieszczony poniżej przycisk reset. Korzystając z przykładu napisz kod, który spowoduje, że po najechaniu nad obszar przycisku w nowym oknie wyświetli się komunikat: "Nigdy nie używaj przycisku RESET!". W przypadku podwójnego kliknięcia (ondblclick) na obszarze tekstowym ma się w nim pojawić Twoje imię i nazwisko.

Zadanie 3: Opracuj dokument z odpowiednim kodem html, css oraz fragmentami skryptów, który po załadowaniu do okna przeglądarki (onload) wyświetli komunikat: "Witaj w moim serwisie". Przy zmianie rozmiaru okna przeglądarki (onresize) ma się wyświetlić w nowym oknie informacja: "Uwaga! Zmiana rozmiaru okna".

Zadanie 4: Przygotuj dokument zawierający cztery obszary tekstowe umieszczone każdy w innym rogu okna przeglądarki. Zaczep je w taki sposób, aby przy zmianie rozmiaru okna zawsze były widoczne jako przyczepione do narożników okna. Wpisz do każdego z nich tekst (jeden akapit) pobrany z serwisu Lorem Ipsum. Dodaj odpowiednie zdarzenia (onblur, onfocus), dzięki którym po uzyskaniu statusu elementu aktywnego zmieni się dla wybranego obszaru kolor tła. Po utraceniu statusu elementu aktywnego kolor tła powinien powrócić do stanu początkowego.

Zadanie 5: Przygotuj dokument html zawierający pole typu text, a następnie dodaj odpowiednie zdarzenia w taki sposób, aby przy próbie kopiowania zawartości pola tekstowego (oncopy) wyświetlił się komunikat: "Uwaga plagiat!". Przy próbie wklejenia (onpaste) tekstu do tego samego pola ma się wyświetlić informacja: "Czy to Twoja praca?". Oba komunikaty mają się wyświetlić w nowych osobnych oknach.

error: Content is protected !!