Ćwiczenie 5
Temat:
Zawansowane
skrypty JavaScript
Cel ćwiczenia:
W ramach ćwiczenia student rozszerzy swoją wiedzę o obsłudze
formularzy o techniki ich weryfikacji przed wysłaniem do serwera. W celu
ułatwienia analizy wypełnionego formularza zastosowane zostaną wyrażenia
regularne.
Druga część ćwiczenia dotyczy sposobów obsługi zdarzeń czasowych,
klawiatury i myszy, które pozwalają uzyskać bardziej interaktywne strony
WWW.
Weryfikacja zawartości formularza
Obiekt formularz posiada zdarzenie onSubmit wywoływane tuż przed jego wysłaniem na
serwer (WWW, email) po naciśnięciu przycisku Submit. JavaScript umożliwia nie tylko reakcję
na zdarzenie, ale pozwala także w przypadku części zdarzeń blokadę akcji przez nie
reprezentowanych. W przypadku zdarzenia onSubmit możemy zablokować za pomocą
skryptu wysłanie formularza.
Przykład

Promień

W powyższym przykładzie, jeżeli funkcja confirm po decyzji użytkownika zwróci fałsz, to całe
zdarzenie zwróci taką wartość i akcja wysłania zostanie zablokowana.
W trakcie weryfikacji zawartości formularza do jego elementów możemy odwoływać się przy
pomocy metod obiektu document, takich jak: getElementById (jeżeli element posiada
atrybut id) lub getElementsByName (jeżeli element posiada atrybut name).
Przykład

Promień

Wyrażenia regularne
Wyrażenia regularne to wzorce, które opisują łańcuchy symboli. Stanowią doskonały sposób
na sprawdzanie i modyfikowanie tekstu. Wzorzec opisujemy za pomocą znaków
standardowych i symboli, które w elastyczny sposób opisują fragmenty tekstu. Tabela
poniżej zawiera podstawowy zestaw symboli.
Symbol Opis Przykład Ciągi zgodne Ciągi niezgodne
^ Początek ciągu ^kot kot, kotka, kotwa pies, pokot
$ Koniec ciągu $a Ania, kotka Jan, kot
. Jeden dowolny znak .asia Kasia,Basia Ela, Joasia
[& ] Jeden z wymienionych k[oa]t kot,kat kit, koat, kotek
znaków
Z[0-5] Z2,Z4 Zx,Z9
[^& ] Jeden z k[^oa]t kit,ket kat, kot, kotek
niewymienionych
[& |...] Jeden z ciągów [B||Jo|Mich]asia Basia, Michasia Kasia, Ela
? Zero lub jeden znak list?owy lisowy, listowy listy, lisa
+ Jeden lub wiele znaków [A-Z][a-z]+ Joanna, Kamil anna, 123, kot
* Zero lub wiele znaków ko*t kt,kot,koooot lot,gyy
{n} Dokładnie n znaków z [0-9]{2}-[0-9]{7} 32-6034111 32-603, 997
zakresu: tutaj [0-9]
{n,} Co najmniej n znaków z [A-Z][a-z]{3,} Janek,Ania Ola, Ela
zakresu: tutaj [0-9]
{n,m} Pomiędzy n i m znaków [0-9]{2,4} 12, 432, 4223 4, 12345
\d Cyfra \d{3} 123, 223 A21, 1234
\D Znak niebędący cyfrą \D+ Asad, ada Sdd1, 123
Przykład 31
\w Litera, cyfra, _ \w{3} A12,123, 1_2 1+3
\W Znak niebędący literą, \W{3} +!!, --- Ala, 123
cyfrą, _
\s Spacja, tabulacja, nowa Jan\sKowalski Jan Kowalski Jan-Kowalski
linia
\S Każdy znak niebędący \S+ Jan, 1234, Jaks Jan Kowalski
spacją, tabulacją i nl
(& ) Blok znaków ([A-Z][a-z]+)(-[A- Kowalski, Kowalski- Kow2,
Z][a-z]+)* Nowak
Kowalski Nowak
Ponieważ część znaków ma specjalne znaczenie, to wypadku gdy potrzebujemy ich we
wzorcu w ich znaczeniu pierwotnym używamy następujących symboli:
\. \* \ / \\ \? \: \^ \+ \\ \= \|
W JavaScript istnieją dwa podstawowe sposoby definiowania wyrażeń regularnych. Oba
sprowadzają się w rzeczywistości do utworzenia obiektu klasy RegExp.
var wyrazenie = /[a-z]+/g
var wyrazenie = new RegExp("[a-z]+", "g")
Symbol "g na końcu wyrażenia to jedna z flag oddziałujących na wyszukiwanie wzorców:
Flaga Opis
g Ignorowania wielkości liter
i Wyszukiwanie wszystkich pasujących fragmentów, a nie pierwszego
Obiekt klasy RegExp udostępnia bardzo przydatną metodę test, która sprawdza, czy dany
ciąg jest zgodny z wyrażeniem regularnym. Jeżeli taka zgodność ma miejsce metoda zwraca
prawdę logiczną.
Przykład  kontrola zgodności ze wzorcem

Imię

Także obiekty klasy String (ciągi tekstowe) udostępniają metody oparte na wyrażeniach
regularnych. Metoda match pozwala wyszukać wystąpienia wzorca w tekście i zwraca ich
tablicę. W wypadku braku wystąpień metoda zwraca wartość pustą null.
Przykład  wyszukiwanie wzorca












Przykład  wyszukiwanie wzorca 33
Metoda replace obiektu String umożliwia odszukanie i podmianę fragmentów tekstu
zgodnych ze wzorcem. W tekście zastępującym możemy używać symboli $1 $2, które
oznaczają odszukane fragmenty wzorca umieszczone w blokach ().

W przykładzie widzimy (przy rozdziale na linie), że istnieje możliwość zdefiniowania
wyrażenia regularnego bezpośrednio w wywołaniu metody.
Zadanie 1
1. Przygotuj formularz, jak na rysunku poniżej. Formularz ma być wysyłany metodą get
pod adres http://www.polsl.pl po naciśnięciu przycisku  Dodaj do bazy .
Przykład  wyszukiwanie wzorca 34
2. Zablokuj możliwość wysłania formularza, jeżeli użytkownik nie wprowadził poprawnie
jednoczłonowego imienia zaczynającego się z dużej litery. Pozwól na spacje przed i za
imieniem.
3. Zablokuj możliwość wysłania formularza, jeżeli użytkownik nie wprowadził poprawnie
jedno lub wieloczłonowego nazwiska, w którym człony są rozdzielane myślnikiem.
Pozwól na spacje przed i za imieniem.
4. Zablokuj możliwość wysłania formularza, jeżeli użytkownik nie wprowadził numeru
telefonu w formacie (0xx) xxx-xx-xx (np. [phone])
5. Uzupełnij weryfikację formularza o wyświetlanie okienka informacyjnego i
automatyczne przejście do błędnego pola formularza (metoda focus).
6. Rozszerz kontrolę imienia o uwzględnienie płci osoby przyjmując, że imiona żeńskie
kończą się literą "a a męskie nie.
Zdarzenia czasowe
Obiekt window modelu DOM udostępnia zestaw metod pozwalających zautomatyzować
działanie skryptu w oparciu o zdarzenia czasowe.
Metoda Opis
setTimeout(kod, czas) Zlecenie jednokrotnego wykonania kodu JavaScript po określonej liczbie
milisekud. Metoda zwraca identyfikator zlecenia.
clearTimeout(id) Anuluwanie zlecenia jednokrotnego wykonania kodu o podanym
identyfikatorze
setInterval(kod, okres) Zlecenie wielokrotnego wykonania kodu JavaScript co podany okres (w
milisekudach). Metoda zwraca identyfikator zlecenia.
clearInterval(id) Anuluwanie zlecenia wielokrotnego wykonania kodu o podanym
Przykład  wyszukiwanie wzorca 35
identyfikatorze
Przykład  wykonanie polecenia JavaScript z opóz
nieniem






Za pięć sekund opuścisz tą stronę, chyba \
e naciśniesz ten przycisk



Przykład  animacja w JavaScript







onclick="t=setInterval('Przesun();',50);"/>



Przykład  wyszukiwanie wzorca 36
Zadanie 2
1. Opracować skrypt, który zmieni kolor tła strony na niebieski po 5 sekundach od
załadowania strony.
2. Oprogramować wyświetlanie aktualnego czasu (raz na sekundę) w elemencie DIV
osadzonym bezwzględnie w lewym górny roku strony.
Zdarzenia myszy
Obiekt document i obiekty elementów HTML obsługują zdarzenia generowane przez mysz.
Można je wykorzystać do zaawansowanej obsługi interfejsu użytkownika.
Zdarzenie Opis
Onclick Zachodzi w chwili kliknięcia myszką
Ondblclick Zachodzi w chwili podwójnego kliknięcia myszką
onmousedown Zachodzi w chwili naciśnięcia przycisku myszy
Onmouseup Zachodzi w chwili zwolnienia przycisku myszy
Onmousemove Zachodzi w chwili przesunięcia kursora myszy
Onmouseover Zachodzi w chwili najechania kursorem myszy nad obiekt
Onmouseout Zachodzi w chwili opuszczenia obiektu przez kursor myszy
Poza faktem wystąpienia zdarzenia, często potrzebujemy dodatkowych informacji.
Parametry zdarzenia dostarcza nam poprzez swoje właściwości obiekt event.
Właściwość Opis
clientX, clientY Współrzędne kursora względem naroża okna
screenX,screenY Współrzędne kursora względem naroża ekranu
Button Numer naciśniętego przycisku
Przykład  reakcja na ruch myszy

Przykład  reakcja na ruch myszy 37







Zdarzenia klawiatury
Zdarzenie Opis
onkeydown Zachodzi w chwili naciśnięcia klawisza. Właściwość
event.keyCode zawiera kod reprezentujący położenie
klawisza
onkeyup Zachodzi w chwili zwolnienia klawisza. Właściwość
event.keyCode zawiera kod reprezentujący położenie
klawisza
onkeypress Zachodzi pomiędzy wcześniejszymi zdarzeniami.
Właściwość keyCode obiektu ewent zawiera kod ASCII
klawisza.
Przykład









Zadanie 3
Przykład 38
1. Umieścić na stronie element DIV, jak na rysunku.
2. Przygotować funkcję DuzeMenu, która podmieni (wykorzystując właściwości
innerHTML) pierwotną zawartość DIV na poniższą. Przetestować działanie funkcji na
zdarzeniu click przycisku button.
3. Przygotować funkcje MaleMenu, która przywróci pierwotną zawartość DIV.
Przetestować funkcje na drugim przycisku button.
4. Wykorzystując odpowiednie zdarzenia myszy obiektu DIV uzyskać następując
funkcjonalność: po najechaniu kursorem napisu MENU pojawia się spis trzech
hiperłączy. Po opuszczeniu spisu przez kursor powraca pierwotny wygląd DIV.
Przykład 39