TECH INT lab9 2014, Studia - Politechnika Opolska, Semestr 6, Techniki Internetowe


Ć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



Wyszukiwarka

Podobne podstrony:
TECH INT lab8 2014, Studia - Politechnika Opolska, Semestr 6, Techniki Internetowe
TECH INT lab12 2014, Studia - Politechnika Opolska, Semestr 6, Techniki Internetowe
TECH INT lab6 2014, Studia - Politechnika Opolska, Semestr 6, Techniki Internetowe
TECH INT lab7 2014, Studia - Politechnika Opolska, Semestr 6, Techniki Internetowe
praca dyplomowa wytyczne 2011 03 02, Studia - Politechnika Opolska, Semestr 6, Techniki Internetowe
Egzamin z IO 2014 Załącznik biznes BOO, Studia, Politechnika Opolska, Semestr IV, [Wyk] Inżynieria o
Lab 9 12, Studia - Politechnika Opolska, Semestr 2, Informatyka
Lab 7 12, Studia - Politechnika Opolska, Semestr 2, Informatyka
algorytmy egzamin, Studia - Politechnika Opolska, Semestr 3, Algorytmy
Lab 8 12, Studia - Politechnika Opolska, Semestr 2, Informatyka
Sprawozdanie - Projekt 2, Studia, Politechnika Opolska, Semestr V, [P] Grafika komputerowa II (K. Wr
piekarnia, Studia - Politechnika Opolska, Semestr 4, Inżynieria Oprogramowania
Test Prawo Kolejne, Studia - Politechnika Opolska, Semestr 4, Prawo Gospodarcze
sprawozdanie cw 2, Studia - Politechnika Opolska, Semestr 6, NSI
Testy z Szymury, Studia - Politechnika Opolska, Semestr 4, Prawo Gospodarcze
ref 610, Studia - Politechnika Opolska, Semestr 7, Systemy Pomiarowe
M1 GóraB GrzesiakA ZAD4, Studia Politechnika Poznańska, Semestr VIII (MiBM), Wytrzymałość materiałów
8. M2-Nieścioruk M.; Wargacki A. ZAD8, Studia Politechnika Poznańska, Semestr VIII (MiBM), Wytrzymał
fiza ściąga, Politechnika Opolska, 2 semestr, Fizyka - Laboratorium, fizyka Lab, resztki

więcej podobnych podstron