[ Pobierz całość w formacie PDF ]
VALUE = wartość
[CHECKED]
[onClick = obsługa zdarzenia]
>
Nazwa pola identyfikuje oczywiście obiekt, wartość jest wartością zwracaną do serwera podczas przesyłania
formularza. 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
dokonują funkcje toUpperCase() i toLowerCase(), zatem wiersz:
formularz1.imie.value = formularz1.imie.value.toUpperCase();
zamieni wszystkie litery z pola tekstowego imię na wielkie litery. Musimy tylko pamiętać o tym, aby uniemożliwić
jednoczesne 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
kliknięcie na to pole za pomocą funkcji click(). Funkcja imie_przetwarzaj_male() dokonuje oczywiście czynności
odwrotnej.
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,
zapamię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ść
grupowania 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
wyboru. System sam dba o odpowiednie zaznaczenia.
Element reset
Jest to znany ze stron WWW przycisk, którego wciśnięcie powoduje wyzerowanie formularza. Zciślej przypisanie
wszystkim polom ich wartości domyślnych. Definiowany jest w sposób następujący:
TYPE = "reset"
NAME = "nazwa"
VALUE = "tekst"
[onClick = "obsługa zdarzenia"]
>
Parametr tekst określa, jaki napis będzie widniał na przycisku. Jak widać, można też dołączyć własną procedurę obsługi
zdarzenia, tak by np. pewnym polom przypisać wartości inne niż domyślne.
wiczenie 5.16.
Zmodyfikuj przykład z ćwiczenia 5.11, dodając przycisk umożliwiający usunięcia danych z formularza.
function przetwarzaj_dane (){
var brakuje_danych = false;
[ Pobierz całość w formacie PDF ]