[ Pobierz całość w formacie PDF ] i następuje wysłanie zawartości formularza. W przeciwnym przypadku, onSubmit = false, wysłanie nie nastąpi. U\ ytkow- nik zostanie jednak poinformowany, które pola nie zostały przez niego wypełnione. Elementy formularzy Elementami formularza mogą być następujące obiekty: button  czyli klasyczny przycisk; checkbox  pola wyboru; hidden  element ukryty; 56 JavaScript.  wiczenia praktyczne  password  pole do wpisywania haseł; radio  pole wyboru; reset  przycisk reset; select  lista wyboru; submit  przycisk submit; text  pole tekstowe; textarea  rozszerzone pole tekstowe. Element button Jest to przycisk umieszczany w dokumencie HTML. Definiujemy go w sposób następujący: TYPE =  button NAME =  nazwa przycisku VALUE =  wartość na przycisku [onClick =  obsługa zdarzenia ] > Nazwa przycisku to identyfikator, dzięki któremu mo\ emy się póz niej w prosty sposób do niego odwoływać. Parametr wartość na przycisku to tekst, który będzie na nim widoczny. Opcjonalny parametr obsługa zdarzenia pozwala nam podać nazwę funkcji, która zostanie wywołana po kliknięciu na tak zdefiniowany przycisk.  wiczenie 5.12. Wyświetlić na stronie przycisk. Kliknięcie na przycisk powinno spowodować wyświetlenie okna dialogowego. function przetwarzaj_dane (){ alert ("Dzięki, bardzo to lubię! :)"); } // Koniec kodu JavaScript --> NAME = "przycisk1" VALUE = " Kliknij mnie " onClick = "przetwarzaj_dane()"> Element checkbox Checkbox jest to klasyczne pole wyboru definiowane w sposób następujący: TYPE =  checkbox NAME =  nazwa pola VALUE =  wartość [CHECKED] [onClick =  obsługa zdarzenia] > Nazwa pola identyfikuje oczywiście obiekt, wartość jest wartością zwracaną do serwera podczas przesyłania formula- rza. Domyślna wartość to  on . Podanie parametru CHECKED oznacza, \ e obiekt ma być domyślnie zaznaczony.  wiczenie 5.13. 57 Rozdział 5. Zdarzenia i formularze Wyświetl na ekranie pole tekstowe umo\ liwiające wprowadzenie tekstu przez u\ ytkownika. Skrypt ma umo\ liwić zamianę wszystkich wprowadzonych liter na małe lub wielkie. function imie_przetwarzaj_duze (formularz1){ if (formularz1.imie_duze.checked){ formularz1.imie.value = formularz1.imie.value.toUpperCase(); if (formularz1.imie_male.checked){ formularz1.imie_male.click(); } } } function imie_przetwarzaj_male (formularz1){ if (formularz1.imie_male.checked){ formularz1.imie.value = formularz1.imie.value.toLowerCase(); if (formularz1.imie_duze.checked){ formularz1.imie_duze.click(); } } } // Koniec kodu JavaScript --> imię: NAME = "imie" SIZE = "15"> NAME = "imie_duze" onClick = "imie_przetwarzaj_duze(formularz1)"> du\ e litery NAME = "imie_male" onClick = "imie_przetwarzaj_male(formularz1)"> małe litery Działanie skryptu jest następujące: tworzymy pole tekstowe o długości 15 znaków. Po wpisaniu do niego dowolnego tekstu mo\ emy, zaznaczając odpowiednie pola wyboru, zamienić go w całości na wielkie, bądz małe litery. Zamiany takiej doko- nują funkcje toUpperCase() i toLowerCase(), zatem wiersz: formularz1.imie.value = formularz1.imie.value.toUpperCase(); Komentarz [ml2]: wycięty zamieni wszystkie litery z pola tekstowego  imię na wielkie litery. Musimy tylko pamiętać o tym, aby uniemo\ liwić jed- wyraz  spowoduje noczesne zaznaczenie obu pól wyboru. Zatem po kliknięciu na pole zamiany na du\ e litery sprawdzamy w funkcji imie_przetwarzaj_duze(), czy nie jest przypadkiem zaznaczone pole konwersji na litery małe. Jeśli tak, to usuwamy zaznaczenie tego pola. Poniewa\ jednak nie mamy mo\ liwości bezpośredniego ustawienia tej wartości, symulujemy klik- nięcie na to pole za pomocą funkcji click(). Funkcja imie_przetwarzaj_male() dokonuje oczywiście czynności od- wrotnej. Element hidden Jest to obiekt, którego nie widać w dokumencie HTML, mo\ e być on jednak u\ yty do przechowywania wprowadzonych przez u\ ytkownika wartości. Definicja wygląda w sposób następujący: TYPE="hidden" NAME="nazwa obiektu" [VALUE="wartość"] > wartość oznacza tu początkową wartość przypisaną obiektowi.  wiczenie 5.14. Stwórz formularz umo\ liwiający wprowadzanie danych tekstowych przez u\ ytkownika. Stosując element hidden, zapa- miętaj aktualną oraz poprzednio wprowadzoną wartość. 58 JavaScript.  wiczenia praktyczne  function wprowadz (){ document.formularz1.ukryta_wartosc.value = document.formularz1.imie.value; document.formularz1.imie.value = ""; } function wyswietl (){ var poprzednia = document.formularz1.ukryta_wartosc.value; var aktualna = document.formularz1.imie.value; alert ("poprzednio wprowadzona wartość: " + poprzednia + "\naktualna wartość: " + aktualna); } // Koniec kodu JavaScript --> NAME = "ukryta_wartosc" VALUE = "nie wprowadzono"> imię: NAME = "imie" SIZE = "15"> NAME = "przycisk1" VALUE = "wprowadz " onClick = "wprowadz()"> NAME = "przycisk2" VALUE = " wyswietl wartości " onClick = "wyswietl()"> Element radio Jest to równie\ pole wyboru, podobnie jak checkbox, z ta jednak ró\ nicą, \ e mo\ na je grupować i traktować jako jeden obiekt. W takim przypadku jednocześnie mo\ e być zaznaczone tylko jedno pole. Element typu radio tworzy się w sposób następujący: TYPE =  radio NAME =  nazwa VALUE =  wartość [CHECKED] [onClick =  obsługa zdarzenia ] > Argumenty mają takie samo znaczenie jak w przypadku pól wyboru typu checkbox. Poniewa\ mamy mo\ liwość grupo- wania tych elementów w jeden obiekt, otrzymujemy do dyspozycji dodatkowe właściwości: length  określającą ilość elementów w grupie; index  określającą numer aktualnie wybranego elementu.  wiczenie 5.15. Wykonaj zadanie z ćwiczenia 5.13, u\ ywając zamiast elementu checkbox elementu radio. function konwertuj_na_duze (imie){ imie.value = imie.value.toUpperCase(); } function konwertuj_na_male (imie){ imie.value = imie.value.toLowerCase(); } 59 Rozdział 5. Zdarzenia i formularze // Koniec kodu JavaScript --> imię: NAME = "imie" SIZE = "15"> NAME = "konwersja" VALUE = "duze" onClick = "konwertuj_na_duze(imie)"> du\ e litery NAME = "konwersja" VALUE = "male" onClick = "konwertuj_na_male(imie)"> małe litery NAME = "konwersja" CHECKED> bez konwersji Widać wyraz nie, \ e kod jest teraz mniej skomplikowany. Głównie dlatego, \ e nie istnieje ju\ potrzeba obsługi stanów pól [ Pobierz całość w formacie PDF ] zanotowane.pl doc.pisz.pl pdf.pisz.pl blacksoulman.xlx.pl