Ćwiczenie 9 - Java Script
Obsługa formularzy, zdarzenia, wyrażenia regularne
Obiektami JavaScript służącymi do tworzenia formularzy są: form, text, textarea, checkbox, radio, select, button, password. Należy zapoznać się z polami i metodami tych klas:
http://www.w3schools.com/js/
Na obiektach formularzy mogą zachodzić odpowiednie zdarzenia, które powinny zostać obsłużone.
ęłęóZdarzenia są to akcje podejmowane przez przeglądarkę w odpowiedzi na ruchy myszki, klawiatury, bądź ogólnie - na zmianę stanu dokumentu w danym momencie (np. załadowanie się obrazka, kodu strony).
Dzięki JavaScript możemy kontrolować większość zdarzeń jakie zachodzą na naszych stronach. Najczęściej wykorzystywane zdarzenia przedstawione są poniżej:
Nazwa |
Elementy |
Zdarzenia |
onAbort |
image |
Anulowanie pobrania grafiki przez użytkownika |
onBlur |
okna oraz wszystkie elementy formularza |
Usunięcie focusa [aktywności] |
onChange |
text, textarea, select |
Zmiana wartości |
onClick |
dowolny znacznik |
Reakcja na kliknięcie na dowolny znacznik |
onDblClick |
dowolny znacznik |
Reakcja na podwójne kliknięcie na dowolny znacznik |
onDragDrop |
okna |
Przecięgnięcie obiektu poza okno |
onError |
image, okna |
Ładowanie powoduje błędy |
onFocus |
okna oraz wszystkie elementy formularza |
Uaktywnienie elementu |
onKeyDown |
document, image, a, textarea |
Wciśniecię (i przytrzymanie wciśniętego) klawisza na klawiaturze |
onKeyPress |
document, image, a, textarea |
Wciśnięcie (krótkotrwałe) klawisza na klawiaturze |
onKeyUp |
document, image, a, textarea |
Zwolnienie klawisza |
onLoad |
ciało dokumentu |
Załadowanie strony |
onMouseDown |
document, przycisk, linki |
Wciśnięcie (i przytrzymanie wciśniętego) klawisza myszy |
onMouseOut |
wszystko |
Przesunięcie kursora myszy poza dany obszar |
onMouseOver |
wszystko |
Najechanie kursorem myszy nad dany obszar |
onMouseUp |
wszystko |
Zwolnienie klawisza myszy |
onMove |
okno |
Poruszenie oknem |
onReset |
formularz |
Wyczyszczenie formularza przyciskiem reset |
onResize |
okno |
Zmiana rozmiaru okna |
onSelect |
text, textarea |
Wybranie danego elementu |
onSubmit |
formularz |
Zatwierdzenie formularza |
onUnload |
ciało dokumentu |
Wyjście ze strony |
Przykład 1.
W formularzu umieszczono ęłęóW formularzyW pole tekstowe - skrypt sprawdza, czy pole nie pozostało puste.
<input type="text" name="pole1">
<script language="javascript">
function sprawdz(){
if(document.formularz.pole1.value==""){
alert("Wypełnij pole");
return false;}
return true;}
</script>
Do sprawdzania poprawności tekstów wprowadzanych do formularza stosuje się wyrażenia regularne:
http://www.w3schools.com/js/js_obj_regexp.asp
Niech przykładowy formularz AForm zawiera pole INPUT o nazwie litery:
<INPUT name="litery">
W takim przypadku, wewnątrz funkcji validateForm() wywołanej z parametrem this w obsłudze zdarzenia onsubmit elementu FORM, dostępny będzie napis AForm.litery.value. Napis ten kopiujemy do zmiennej str instrukcją:
str = AForm.litery.value;
Następnie, w zmiennej litPatt przygotowujemy wzorzec ograniczający poprawność danych:
litPatt = /^[A-Z]{3,5}$/;
Podane wyrażenie regularne pasuje do napisów, które zawierają od 3 do 5 dużych liter alfabetu łacińskiego (tj. bez polskich „ogonków”).
Następnie wzorzec litPatt dopasowujemy do napisu zawartego w zmiennej str, wywołując metodę match():
wynik = str.match(litPatt);
Wynik zwrócony przez funkcję match() zawiera informację o tym, czy dane wprowadzone w formularzu są zgodne z podanym wyrażeniem.
Pełny kod funkcji walidującej pole litery :
function validateForm(AForm)
{
str = AForm.litery.value;
litPatt = /^[A-Z]{3,5}$/;
wynik = str.match(litPatt);
if (wynik == null) {
alert("Napis może zawierać od 3 do 5 dużych liter!");
return false;
} else {
return true;
}
}
Operacja kopiowania napisu z pola litery do zmiennej str nie jest konieczna. Powyższy kod, wykonany z pominięciem zmiennej str wyglądałby następująco:
litPatt = /^[A-Z]{3,5}$/;
wynik = AForm.litery.value.match(litPatt);
http://library.thinkquest.org/C004162/learn/javascript/index4p.html
https://developer.mozilla.org/pl/Przewodnik_po_j%c4%99zyku_JavaScript_1.5#Wyra.C5.BCenia_regularne
Na zaliczenie zajęć:
1. Utworzyć formularz zawierający 5 pól:
- pole tekstowe nazwisko, które może zawierać wyłącznie litery (polskie również), nie więcej niż 30,
i rozpoczyna się wielką literą,
- pole tekstowe e-mail, które musi posiadać znak @ , przed nim od 1 do 30 znaków alfanumerycznych, a po znaku @ co najmniej dwa człony alfanumeryczne oddzielone kropką,
- pole tekstowe kod pocztowy, które zawiera 5 cyfr rozdzielonych myślnikiem np. 12-123,
- pole wyboru produkt, w którym trzeba koniecznie wybrać jedną z 5 podanych możliwości,
- przycisk submit, który przed wysłaniem formularza uruchamia funkcję walidującą formularz czyli sprawdzającą, czy poprawnie wypełniono formularz i wyświetlającą odpowiednie komunikaty.
Funkcję tę należy zdefiniować używając wyrażeń regularnych.
2. Zaliczyć quiz z JavaScript ze strony http://www.w3schools.com/
2014-04-28 T. Wiśniewska
TECHNIKI INTERNETOWE - laboratorium
INFORMATYKA III rok
studia stacjonarne I stopnia
sem. letni r. a. 2013/2014