[ Pobierz całość w formacie PDF ]
.W wi�kszo�ci tu zamieszczonych przyk�adów oprzemysi� na takim w�a�nie modelu.B�dziemy równie� unika� nowszych elementów j�zy�kai zaw�zimy omówienie do JavaScriptu l.1, z którym w szerokim zakresie s�zgod�ne ró�ne przegl�darki obs�uguj�ce JavaScript.FormularzeDo ulepszania formularzy HTML w aplikacjach Web chyba najcz�ciej u�ywany jestJavaScript.Standardowe formularze HTML nie s� nadzwyczajnie inteligentne.Przyjmuj� wprowadzane dane i przekazuj� je do serwera Web, gdzie dopieronast�puje ca�y proces przetwarzania.Dzi�ki JavaScriptowi zwi�kszaj� si�mo�liwo�ci obs�ugi po stronie klienta.Za pomoc� JavaScriptu mo�emy sprawdza�poprawno�� danych oraz aktualizowa� pola, reaguj�c na dzia�ania u�ytkownika wsposób na�tychmiastowy; cz�sto pojedynczym formularzem dynamicznym mo�emyzast�pi� kilka statycznych.Zalet� JavaScriptu jest to, �e cz�� pracy normalnie wykonywanej przez serwerprzenosi na program-klient, a tym samym redukuje liczb� ��da� kierowanych doserwera.Zalet� JavaScriptu, je�li chodzi o u�ytkownika, jest to, �e zapewnianatych�miastow� reakcj�, bez oczekiwania na pobranie nowej strony przezprzegl�dark�.Kontrola poprawno�ci wprowadzanych danychGdy tworzymy formularz HTML, na ogó� oczekujemy od u�ytkownika, aby wy�pe�ni�go w okre�lony sposób.Na formularz mo�na na�o�y� rozmaite ograniczenia.Mog�one polega� na tym, �e na przyk�ad do niektórych pól mog� by� wprowadza�netylko liczby, podczas gdy do innych tylko daty, w niektórych b�d� mog�y si�zna�le�� warto�ci wy��cznie z okre�lonego zakresu, niektórych pól nie b�dziemo�na po�min�� przy wype�nianiu formularza, wype�nienie niektórych pól mo�e si�wzajem�nie wyklucza�.Do obs�u�enia wszystkich tych przypadków wystarcz�zaledwie dwa sposoby: pierwszy polega na sprawdzaniu ka�dego elementu nabie��co - ju� przy wprowadzaniu do niego danych; drugi polega naprzeprowadzeniu kontroli dopiero tu� przed wys�aniem formularza.Kontrola bie��caSprawdzanie warto�ci elementu formularza przy wprowadzaniu jej przezu�ytkow�nika jest metod� najefektywniejsz�, gdy trzeba skontrolowa� zgodno�� zformatem lub zakresem danego elementu.Na przyk�ad, je�li w okre�lonym poludozwolone s� wy��cznie liczby, mo�na sprawdzi�, czy u�ytkownik nie wprowadzi�jakiego� zna�ku nie b�d�cego cyfr�.Do takiej kontroli pos�u�y nam procedura obs�ugi zdarzenia onChange.Mo�na jeju�y� do pól nast�puj�cego typu: tekst (Text), obszar tekstowy (TextArea), has�o(Pas-sword), plik wysy�any do serwera (FileUpload) oraz lista pozycji do wyboru(Select).W wypadku ka�dego z tych elementów mo�emy zarejestrowa� zdarzenieonChange i przypisa� kod, który b�dzie wykonywany wtedy, gdy zajdzie zmiana welemencie.Do rejestracji zdarzenia wystarczy poda� jego nazw� jako atrybutznacznika HTML danego elementu.Na przyk�ad:Zaj�cie zdarzenia uruchomi funkcj� sprawdzWiek, do której poprzez thisprzekaza�na zostanie referenq'a do elementu.Funkcja ta wygl�da nast�puj�co:function sprawdzWiek ( element ) {if ( element.value != parseInt( element.value ) || element.value < l ||element.value > 150 ){alert( "Jako wiek prosz� poda� liczb� miedzy l a 150." );element.focus();return false;}return true;}Powy�sza funkcja sprawdza, czy podany wiek jest liczb� ca�kowit� zawieraj�c�si� w przedziale mi�dzy l a 150 (przepraszamy czytelników, którzy maj� 152lata, lecz musieli�my przyj�� jak�� granic�).Je�li sprawdzWiek stwierdzi, �e wprowadzona warto�� jest niepoprawna, wy�wietlikomunikat, w którym zwraca si� do u�ytkownika o ponowne podanie wieku (rysu�nek7.1), i za pomoc� funkcji element.f ocus () przenosi kursor z powrotem do polawiek.Nast�pnie, odpowiednio do pomy�lnego lub niepomy�lnego wyniku kontroli,zwraca warto�� �prawda" (true) lub �fa�sz" (false).Nie jest to z regu�ykonieczne, lecz bardzo si� nam przyda pó�niej, gdy b�dziemy wywo�ywa� kolejnokilka funkcji, co zademonstrujemy w przyk�adzie 7.2.Zauwa�my, �e zdarzenie onChange wcale nie musi by� obs�ugiwane poprzezwywo�ywanie funkcji.Mo�liwe jest bezpo�rednie przypisanie kilku instrukcji.Mimo to praca nad dokumentami zazwyczaj jest �atwiejsza, gdy JavaScript jestmak�symalnie zwarty, a funkcje nam to zapewniaj�.Umo�liwiaj� ponadtozastosowanie tego samego kodu do kilku elementów formularza wymagaj�cychjednakowych tes�tów.W wypadku cz�sto u�ywanych funkcji mo�na si� posun�� okrok dalej i umie�ci� je w osobnym pliku JavaScriptu, który potem b�dzie mo�naw��cza� do ró�nych plików HTML.Przyk�ad przedstawimy na rysunku 7.2.Kontrola przy wysy�aniuDrugi sposób sprawdzania danych polega na przeprowadzeniu tej operacji tu�przed wys�aniem formularza do serwera.Jest to najlepszy moment, by sprawdzi�,czy w polach, których wype�nienie jest obowi�zkowe, wprowadzono dane, lubskontrolowa�, czy zachowane s� przewidziane zale�no�ci mi�dzy poszczególnymielementami.Tego typu kontrole przeprowadza si� przy u�yciu procedury obs�ugizdarzenia onSubmit.Procedura onSubmit, wprowadzana atrybutem znacznika , dzia�a podob�nie doonChange:�atwo te� dostrzec kolejn� ró�nic�.onSubmit zwraca warto�� wywo�ywanego kodu.Je�li zwróci �fa�sz", wysy�ka formularza zostanie anulowana, gdy tylko kodproce�dury zako�czy dzia�anie.W ka�dym innym wypadku wysy�ka b�dziekontynuowa�na.Zwracane warto�ci nie maj� wp�ywu na obs�ug� zdarzeniaonChange.Oto funkcja sprawdzaj�ca formularza:function sprawdzFormularz ( formularz ) {if ( formularz["wiek"].value == "" ) {alert( "Prosz� poda� wiek.");return false;}return true;}Sprawdzamy tu, czy podano wiek.Trzeba pami�ta�, �e procedura onChange niewy�starczy, poniewa� uruchamiana jest tylko wtedy, gdy warto�� wieku ulegazmianie.Gdyby u�ytkownik nie poda� wieku, procedura onChange w ogóle niezosta�aby wywo�ana.W�a�nie dlatego warto�ci, których podania wymagamy odu�ytkowni�ka, sprawdza si� procedur� onSubmit.Przyk�adowa kontrola poprawno�ci danychPrzyjrzyjmy si� kompletnemu rozwi�zaniu.Wydaje si�, �e coraz wi�cej serwisówWeb wymaga od u�ytkowników rejestracji i podawania danych osobowych, je�li chc�oni korzysta� z oferowanych us�ug.Utworzymy troch� przesadnie rozbudowa�nyformularz rejestracyjny (rysunek 7.2).Zauwa�my, �e formularz dotyczy tylko mieszka�ców Stanów Zjednoczonych.Jed�nakmog� do niego si�ga� internetowi u�ytkownicy praktycznie z ca�ego �wiata,na�le�y zatem zachowa� elastyczno�� przy sprawdzaniu poprawno�ci, dostosowuj�cformularz do rozmaitych krajowych sposobów zapisu numeru telefonu, kodupocz�towego itp.Mimo to, poniewa� celem tego przyk�adu jest przede wszystkimzade�monstrowanie kontroli poprawno�ci, ograniczymy si� do jednego zestawuforma�tów, aby unikn�� nadmiernego skomplikowania.Wy�wietlane b�d� wymaganeformaty numerów telefonów i numeru ubezpieczenia.Ponadto przyj�to, �e kodpoczto�wy ma posta� pi�ciocyfrow�.Przyk�ad 7.1.input_validation [ Pobierz całość w formacie PDF ]