[ 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ózniej 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ć wyraznie, \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 ]




 

Powered by WordPress dla [Nie kocha się ojca ani matki ani żony ani dzieca, lecz kocha się przyjemne uczucia, które w nas wzbudzają]. Design by Free WordPress Themes.