[ Pobierz całość w formacie PDF ]

select. OnSelect jest procedurą obsługi zdarzenia polegającego na zaznaczeniu fragmentu tekstu. Do dyspozycji mamy
te\
metody focus, blur i select.

wiczenie 5.18.
Wyświetl na ekranie dwa pola testowe oraz prośbę o wpisanie w pierwszym z nich liczby. Je\
eli u\
ytkownik nie poda liczby
tylko tekst, po przejściu do drugiego okna ma się wyświetlić ostrze\
enie (rysunek 5.6), a następnie skrypt spowoduje za-
znaczenie wprowadzonego tekstu. Nale\
y wreszcie przenieść focus do pierwszego okna tekstowego, umo\
liwiając po-
prawne wprowadzenie liczby.
Rysunek 5.6.
Efekt działania skryptu
z ćwiczenia 5.18
function obsluga_zdarzenia (obj){
if (isNaN (obj.value)){
alert ("To nie jest liczba");
obj.focus();
obj.select();
}
}
// Koniec kodu JavaScript -->
Podaj liczbę w pierwszym oknie:
NAME = "okno_tekstowe"
VALUE = ""
onChange = "obsluga_zdarzenia(this)"
>
Funkcja isNaN() wykorzystana w procedurze obsługi zdarzenia onChange sprawdza, czy podany parametr nie jest warto-
ścią liczbową (z ang. NaN  Not A Number). Jeśli nie jest, zwraca wartość TRUE, jeśli jest  FALSE. Niestety w przypadku
przeglądarki Internet Explorer skrypt mo\
e nie zadziałać do końca zgodnie z zało\
eniami, gdy\
nie zawsze obsługuje ona
poprawnie metody focus() i select().
Element textarea
Element tego typu słu\
y do wprowadzania dłu\
szego tekstu. Definiuje się go w sposób następujący:
63
Rozdział 5. Zdarzenia i formularze

NAME =  nazwa obiektu
ROWS =  liczba rzędów
COLS =  liczba kolumn
[onBlur =  obsługa zdarzenia ]
[onChange =  obsługa zdarzenia ]
[onFocus =  obsługa zdarzenia ]
[onSelect =  obsługa zdarzenia ]>
tekst
Parametr NAME oraz onBlur, onChange, onFocus i onSelect mają takie samo znaczenie jak w przypadku poprzednio
omawianych elementów. ROWS to liczba rzędów, czyli wielkość w pionie (wysokość), COLS to liczba kolumn, czyli wiel-
kość w poziomie (długość). tekst jest tekstem, który pojawi się jako domyślny.

wiczenie 5.19.
Wyświetl na ekranie element textarea słu\
ący do wpisania przez u\
ytkownika uwag na temat oglądanej strony (rysunek
5.7).
Rysunek 5.7.
Element textarea
umo\
liwiający
wpisanie komentarza
na temat strony
W tym oknie mo\
esz wpisać swoje uwagi na temat naszej strony:
NAME = "okno_tekstowe"
COLS = "25"
ROWS = "10"
>
Strona bardzo mi
się podobała!
Wykorzystanie formularzy i zdarzeń

wiczenie 5.20.
Stwórz na stronie WWW kalkulator umo\
liwiający wykonywanie podstawowych działań arytmetycznych.
var wyrazenie = "";
var nowe = true;
function wprowadz (wartosc){
var wyswietlacz = document.kalkulator.wyswietlacz;
64
JavaScript. 
wiczenia praktyczne
 if (nowe){
nowe = !nowe;
wyswietlacz.value = "";
}
wyswietlacz.value += wartosc;
wyrazenie += wartosc;
}
function dzialanie (wartosc){
var wyswietlacz = document.kalkulator.wyswietlacz;
wyswietlacz.value = "";
wyrazenie += wartosc;
}
function oblicz (){
var wyswietlacz = document.kalkulator.wyswietlacz;
if (wyrazenie != "");{
wyswietlacz.value = eval (wyrazenie);
wyrazenie = wyswietlacz.value;
nowe = true;
}
}
function zeruj(){
wyrazenie = "";
document.kalkulator.wyswietlacz.value = "";
}
function kwadrat(){
if (wyrazenie != ""){
document.kalkulator.wyswietlacz.value = wyrazenie * wyrazenie;
wyrazenie = document.kalkulator.wyswietlacz.value;
nowe = true;
}
}
// Koniec kodu JavaScript -->
NAME = "wyswietlacz"
SIZE = "13">
NAME = "7"
VALUE = " 7 "
onClick = "wprowadz(7)">
NAME = "8"
VALUE = " 8 "
onClick = "wprowadz(8)">
NAME = "9"
VALUE = " 9 "
onClick = "wprowadz(9)">
NAME = "/"
VALUE = " / "
onClick = "dzialanie('/')">
NAME = "4"
VALUE = " 4 "
onClick = "wprowadz(4)">
NAME = "5"
VALUE = " 5 "
onClick = "wprowadz(5)">
NAME = "6"
VALUE = " 6 "
onClick = "wprowadz(6)">
NAME = "*"
VALUE = " * "
onClick = "dzialanie('*')">
NAME = "1"
VALUE = " 1 "
onClick = "wprowadz(1)">
65
Rozdział 5. Zdarzenia i formularze
 NAME = "2"
VALUE = " 2 "
onClick = "wprowadz(2)">
NAME = "3"
VALUE = " 3 "
onClick = "wprowadz(3)">
NAME = "-"
VALUE = " - "
onClick = "dzialanie('-')">
NAME = "0"
VALUE = " 0 "
onClick = "wprowadz(0)">
NAME = "!"
VALUE = "^2"
onClick = "kwadrat('^2')">
NAME = "c"
VALUE = " c "
onClick = "zeruj()">
NAME = "+"
VALUE = " + "
onClick = "dzialanie('+')">
NAME = "="
VALUE = " = "
onClick = "oblicz()">
Wygląd kalkulatora ilustruje rysunek 5.8. Nie jest on mo\
e bardzo urodziwy, niemniej proste obliczenia mo\
na na nim wy-
konać.
Rysunek 5.8.
Kalkulator
stworzony przy
pomocy elementów
formularzy
Wszystkie przyciski są wykonane z obiektów button, które zgrupowane są po cztery w kolejnych rzędach tabeli u\
ytej do
sformatowania. Niestety, obiekt button nie ma parametru, w którym mo\
na by podać jego wielkość, tak więc rozmiar
przycisków jest zale\
ny od tekstów na nich się znajdujących. Co prawda, cyfry mają stały rozmiar, jednak pozostałe u\
yte [ Pobierz całość w formacie PDF ]