walidacja formularzy

Transkrypt

Poprawność formularza
Ćwiczenie 1
Utwórz formularz jak na rysunku poniżej Po naciśnięciu przycisku Wyślij, skrypt ma sprawdzić, czy
użytkownik podał wszystkie wymagane dane.
Wygląd formularza
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<SCRIPT LANGUAGE = JavaScript>

</SCRIPT>
</HEAD>
<BODY>
<H2>
<FORM NAME = "formularz1">
Proszę podać swoje dane:
<FONT SIZE = "-1"><I><BR>
(Pola oznaczone * muszą zostać wypełnione)
</FONT></I><BR><BR>
<TABLE>
1
<TR><TD><B>
Dane personalne:</B>
</TD><TD></TD></TR>
<TR><TD>
imię:</TD><TD>
<input type = "text" name = "imie">*</TD></TR>
<TR><TD>
nazwisko:</TD><TD>
<input type = "text" name = "nazwisko">*</TD></TR>
<TR><TD><B>
Adres:</B></TD><TD>
</TD>
<TR><TD>
ulica:</TD><TD>
<input type = "text" name = "ulica"></TD></TR>
<TR><TD>
nr domu:</TD><TD>
<input type = "text" name = "nrdomu"></TD></>TR
<TR><TD>
kod:</TD><TD>
<input type = "text" name = "kod"></TD></TR>
<TR><TD>
miasto:</TD><TD>
<input type = "text" name = "miasto"></TD></TR>
<TR><TD>
kraj:</TD><TD>
<input type = "text" name = "kraj">*</TD></TR>
<TR><TD>
tel.:</TD><TD>
<input type = "text" name = "tel">*</TD></TR>
<TR><TD>
</TD><TD ALIGN = "right">
</H2>
<input type = "button" name = "wyslij" value = "
Wyślij!
"przetwarzaj_dane()"> </TD></TR>
</TABLE>
</BODY>
</HTML>
" onClick =
Tablice w JavaScript
Tablica to uporządkowana struktura zmiennych związanych wspólną nazwą. Odwołanie do
poszczególnych elementów tablicy następuje przez podanie nazwy tablicy oraz indeksu
danego elementu, ujętego w nawiasy kwadratowe. W języku JavaScript pierwszy element
tablicy ma indeks równy 0. Tablice umożliwiają organizowanie wielu zmiennych w logiczne
struktury danych, ułatwiają ich przetwarzanie z wykorzystaniem wbudowanych metod,
upraszczają dostęp do poszczególnych wartości tych zmiennych. Stosowane są wszędzie tam,
gdzie potrzeba wielu zmiennych (nie musimy wymyślać np. 100 nazw dla nowych
zmiennych, wystarczy utworzyć tablicę zawierającą 100 elementów).
Do tworzenia tablic służy specjalny obiekt Array( ) oraz słowo kluczowe new. Na przykład
deklaracja:
Tab = new Array( )
definiuje tablicę Tab o nie określonej długości, natomiast deklaracja:
Tab = new Array(4)
definiuje tablicę Tab o długości równej 4.
Długość tablicy zmienia się dynamicznie, w miarę przypisywania wartości kolejnym
komórkom tablicy. Największa wartość użytego indeksu określa długość tablicy (długość
2
tablicy=indeks+l). W tablicy mogą się znajdować komórki nie zdefiniowane. Możliwe jest
przypisanie wartości wszystkim komórkom tablicy w momencie jej definiowania. Na
przykład deklaracja:
Tab = new Array (23,5,7)
Tab[0] = 23
Tab[l] = 5
Tab[2] = 7
Długość tablicy (liczbę elementów tablicy) można uzyskać przez wywołanie Tab.length.
Jeżeli do powyższej tablicy Tab dodamy jeszcze jedną wartość, np. Tab[6]=100, to
Tab.length=7.
Tworzenie pustej tablicy:
nazwa tablicy=New Array()
lub
nazwa tablicy=[]
Ustalenie rozmiaru tablicy:
Tablica=New Array(10)
Możemy też utworzyć tablicę, od razu wstawiając do niej wartości:
NazwaTablicy= New Array(„Marek”, „Ania”, „Tomek”)
Lub
NazwaTablicy[„Marek”, „Ania”, „Tomek”]
Tab_licz[1,2,3,4,5,6,7,8,9,10]
Dostęp do elementu tablicy( dla dalszych obliczeń lub wypisania na ekranie):
NazwaTablicy[k]-gdzie
k –licznik elementu liczony od 0.
Rozmiar tablicy:
NazwaTablicy.length
Metoda join
Składnia: tablica.join(separator)
Ta metoda pozwala na złączenie (z ang. join — łączyć) wszystkich komórek tablicy w ciąg znaków, w którym
poszczególne wartości oddzielone są znakami separatora. To najwygodniejszy sposób na wylistowanie
3
zawartości tablicy w celu wyświetlania jej na ekranie lub też przekazania do dalszego przetwarzania innej
aplikacji, przesłania do serwera itp. Przykład:
<script type="text/javascript">
var tablica = new Array(1, 2, 3);
var str = tablica.join(", ");
document.write(str);
</script>
Przykłady:
1
var nazwaTablicy=new Array('Marcin', 'Zosia', 'Jaś');
document.write(nazwaTablicy[0]);
2.
Każda tablica udostępnia nam właściwość length dzięki której możemy określić długość tej
tablicy (ilość elementów). Dzięki temu możemy poznać index ostatniego elementu oraz w
łatwy sposób przeprowadzać pętlę po wszystkich elementach naszej tablicy.
var Tablica = new
Array('Marcin','Ania','Agnieszka','Piotrek','Grześ','Magda')
for (x=0; x<Tablica.length; x++) {
document.write(Tablica[x] + "<br />");
}
2. Długość tablicy:
Metoda push() wstawia nowy element (lub kilka) do tablicy na jej końcu i zwraca
długość nowej tablicy
var tab=new Array('Anna', 'Zosia', 'Jan');
dlugosc=tab.push('Adam', 'Zbyszek')
document.write('Długość tablicy: '+dlugosc+'<br />');
document.write(tab)
</script>
4
3. Sortowanie tablicy:
Sortowanie tablic za pomocą metody sort()
Metoda sort() służy do sortowania tablic metodą "bombelkową". Powiedzmy, że mamy
tablicę z niepoukładanymi wartościami, i chcemy ją posortować:
var Tablica = new Array('Marcin','Ania','Piotrek','Grześ')
Tablica.sort()
document.write( Tablica.join() ); //wypisze się "Ania,Grześ,Marcin,Piotrek"
</script>
Standardowo Javascript segreguje tablice leksykalnie (czyli tak jak w książce telefonicznej).
Powoduje to w niektórych przypadkach nieoczekiwane rezultaty - na przykład 1200 będzie
mniejsze od 300 (bo liczy się pierwsza cyfra) itp.
Aby móc posegregować naszą tablicę według własnych kryteriów, musimy skorzystać z
dodatkowego parametru, który metoda sort() może opcjonalnie przyjmować. Parametr ten
jest nazwą naszej funkcji sortującej. Pisząc taką funkcję musimy pamiętać o 3 sprawach:
•
•
•
Jeżeli funkcja(a, b) zwróci wartość mniejszą od 0, to wartość a będzie miała
mniejszy index od b
Jeżeli funkcja(a, b) zwróci 0, to indexy wartości a i b pozostaną bez zmian
Jeżeli funkcja(a, b) zwróci wartość większą od 0, to wartość a będzie miała większy
index od b
Tak więc ogólna postać funkcji sortującej wygląda tak:
function porownaj(A, B) {
if (A jest mniejsze od B) {return -1}
if (A jest większe od B) {return 1}
//jeżeli A równa się B
return 0
}
Przykładowo aby posegregować wartości liczbowe musimy utworzyć funkcję:
//tworzymy funkcję do segregacji liczb
function porownajLiczby(a, b) {
return a - b
}
var Tablica = Array(100, 10, 25, 310, 1200, 400);
document.write('Bez sortowania:');
document.write( Tablica.join() );
document.write('Tablica.sort():');
5
Tablica.sort()
document.write('Tablica.sort(segregujLiczby):');
Tablica.sort(porownajLiczby)
Działanie powyższego skryptu widać poniżej:
Bez sortowania: 100,10,25,310,1200,400
Tablica.sort(): 10,100,1200,25,310,400
Tablica.sort(segregujLiczby): 10,25,100,310,400,1200
Tablice asocjacyjne
W javascript także możęmy tworzyć tablice asocjacyjne, czyli tablice, których indeks jest
stringiem:
var Tablica = new Array()
Tablica['chomik'] = "radioaktywny";
Tablica['kot'] = "zmutowany";
Tablica['pies'] = "Super Samson";
Przykład:
var tablica = new Object();
tablica["Ala"] = "kot";
tablica["Pi"] = 3.1415;
document.write(tablica["Ala"] + "<br>" + tablica["Pi"]);
</script>
Tablice wielowymiarowe
Możemy też tworzyć tablice wielowymiarowe - czyli tablice w tablicach. Do czego może się
to przydać?
Powiedzmy że chcemy manipulować na rekordach dotyczących osób. Możemy wtedy
stworzyć tablicę, w której w każdym indeksie będzie rekord (w formie tablicy) zawierająca
dane osoby:
var Tablica
Tablica[0]
Tablica[1]
Tablica[2]
//...itp
=
=
=
=
[];
['Marcin' , '183'];
['Ania' , '173'];
['Agnieszka' , '170'];
document.write('imie: ' + Tablica[0][0] + ', wzrost: ' + Tablica[0][1]);
//wypisze się "imie: Marcin, wzrost: 183"
6
//wypisze się "imie: Ania, wzrost: 173"
//wypisze się "imie: Agnieszka, wzrost: 170"
Odwracanie kolejności elementów tablicy przy pomocy metody reverse()
Dzięki metodzie reverse() możemy odwrócić elementy naszej tablicy:
var tablica = new Array("numer 1" , "numer 2" , "numer 3" , "numer 4");
document.write('<strong>Przed:</strong> ' + tablica.join() + '<br />');
tablica.reverse()
document.write('<strong>Po:</strong> ' + tablica.join() );
</script>
Przed: numer 1,numer 2,numer 3,numer 4
Po: numer 4,numer 3,numer 2,numer 1
Wyliczanie średniej wartości elementów tablicy
Znowu musimy polegać tylko na własnym talencie programistycznym ;). Zasada bardzo
prosta - dodaj wszystkie elementy tablicy i podziel je przez ilość tych elementów:
var tablica = new Array(1, 2, 3,4,6);
function srednia(tablica) {
var suma = 0;
for (i=0; i<tablica.length; i++) {
suma += tablica[i];
}
return (suma/i); //wszystko podzielone przez ilość elementów
}
document.write(srednia(tablica));
</script>
7

walidacja formularzy

Transkrypt

Podobne dokumenty

TABLICE : Tablica okulistyczna LITERA P

Tablica anatomiczna "Układ Mięśniowy" 3D

Pobierz PDF - e-Swoi

warunki techniczne drewno energetyczne iglaste s2ac

Plik PDF

JavaScript(3) Pętle cd., tablice