Poprawność formularza

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

<B> Dane personalne:</b> </TD><TD></TD></TR> imię:</td><td> <input type = "text" name = "imie">*</td></tr> nazwisko:</td><td> <input type = "text" name = "nazwisko">*</td></tr> <B> Adres:</B></TD><TD> </TD> ulica:</td><td> <input type = "text" name = "ulica"></td></tr> nr domu:</td><td> <input type = "text" name = "nrdomu"></td></>tr kod:</td><td> <input type = "text" name = "kod"></td></tr> miasto:</td><td> <input type = "text" name = "miasto"></td></tr> kraj:</td><td> <input type = "text" name = "kraj">*</td></tr> tel.:</td><td> <input type = "text" name = "tel">*</td></tr> </TD><TD ALIGN = "right"> </H2> <input type = "button" name = "wyslij" value = " Wyślij! " onclick = "przetwarzaj_dane()"> </TD></TR> </TABLE> </BODY> </HTML> 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: var tablica = new Array(1, 2, 3); var str = tablica.join(", "); document.write(str); 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) 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" 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.join() ); document.write('tablica.sort(segregujliczby):'); Tablica.sort(porownajLiczby) document.write( Tablica.join() ); 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"]); 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] = ['Marcin', '183']; Tablica[1] = ['Ania', '173']; Tablica[2] = ['Agnieszka', '170']; //...itp document.write('imie: ' + Tablica[0][0] + ', wzrost: ' + Tablica[0][1]); //wypisze się "imie: Marcin, wzrost: 183" 6

document.write('imie: ' + Tablica[1][0] + ', wzrost: ' + Tablica[1][1]); //wypisze się "imie: Ania, wzrost: 173" document.write('imie: ' + Tablica[2][0] + ', wzrost: ' + Tablica[2][1]); //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() ); 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)); 7