javascr7

Indeks

po polsku

Wprowadzenie do JavaScript
Cz�� 7

Informacje wprowadzane do formularzy s� bardzo wa�ne dla wielu stron WWW. Informacja od u�ytkownika jest cz�sto odsy�ana z powrotem do serwera. JavaScript pozwala kontrolowa� zawarto�� informacji zanim zostanie ona przes�ana do serwera. Najpierw pragn� pokaza�, w jaki spos�b formularze mog� by� kontrolowane. P�niej rzucimy okiem na mo�liwo�ci przesy�ania informacji za pomoc� JavaScript lub HTML.

Przede wszystkim musimy utworzy� prosty skrypt. Strona HTML powinna zawiera� dwa elementy tekstowe. U�ytkownik ma wpisa� swoje nazwisko do pierwszego i adres poczty elektronicznej do drugiego. Mo�esz wpisa� dowoln� tre�� i klikn�� na przycisku. Spr�buj tak�e nie wpisa� niczego i klikn��.

Wpisz swoje nazwisko:

Wpisz adres swojej poczty elektronicznej:

Je�li chodzi o pierwszy element, gdy nie podasz �adnej informacji, otrzymasz komunikat o b��dzie. Dowolna inna informacja jest poprawna. Oczywi�cie nie chroni to przed podaniem b��dnego nazwiska. Przegl�darka akceptuje nawet cyfry. Je�li wi�c wpiszesz '17', otrzymasz komunikat 'Cze��, 17'!.

Drugi formularz jest nieco bardziej wyrafinowany. Spr�buj wpisa� jaki� prosty ci�g, np. swoje nazwisko. Skrypt nie zadzia�a, dop�ki w ci�gu nie znajdzie si� znak @. Kryterium zaakceptowania ci�gu jest znak @. Sam znak @ b�dzie poprawny, cho� raczej ma�o sensowny. Ka�dy adres poczty elektronicznej zawiera ten znak, wi�c kontrola tego znaku jest odpowiednim sprawdzianem.

Co wykonuje skrypt w przypadku tych dw�ch formularzy i jak je sprawdza? Oto jego tre��:

<html>
<head>
<script language="JavaScript">

</script>
</head>

<body>
<form name="first">
Wpisz swoje nazwisko:<br>
<input type="text" name="text1">
<input type="button" name="button1" value="Test" onClick="test1(this.form)">
<P>
Wpisz adres swojej poczty elektronicznej:<br>
<input type="text" name="text2">
<input type="button" name="button2" value="Test" onClick="test2(this.form)">
</body>

Najpierw rzu� okiem na kod HTML w cz�ci BODY. Tworzymy po prostu dwa elementy tekstowe i dwa przyciski. Przyciski wywo�uj� funkcje test1(...) lub test2(...) zale�nie od tego, kt�ry przycisk jest naci�ni�ty. Funkcjom przypisujemy this.form, aby m�c p�niej adresowa� w�a�ciwe elementy w funkcjach.

Funkcja test1(form) sprawdza, czy ci�g znak�w jest pusty. Jest to robione za pomoc� if (form.text1.value =="").... 'form' jest zmienn�, kt�ra otrzymuje warto�� 'this.form' w wywo�aniu funkcji. Warto�� wprowadzon� do formularza mo�emy otrzyma� u�ywaj�c 'value' w kombinacji z form.text1. Aby sprawdzi�, czy ci�g jest pusty, por�wnujemy go z "". Je�li wprowadzony ci�g r�wna si� "" oznacza to, �e nie wprowadzono �adnej informacji. U�ytkownik otrzyma komunikat o b��dzie. Je�li zostanie wprowadzony jaki� ci�g znak�w, u�ytkownik otrzyma komunikat potwierdzaj�cy poprawno��.

Problemem jest to, �e u�ytkownik m�g�by wpisa� ci�g spacji. Jest to rozpoznawane jako poprawna informacja! Je�li chcesz, mo�esz oczywi�cie wprowadzi� sprawdzanie takich sytuacji i wykluczy� je. S�dz�, �e jest to ju� ca�kiem proste.

A teraz przyjrzyjmy si� funkcji test2(form). Funkcja ta por�wnuje ponownie wprowadzony ci�g znak�w z ci�giem pustym "" aby upewni� si�, czy cokolwiek zosta�o wpisane. Ale do polecenia if co� zosta�o dodane. || jest nazywane operatorem OR. Uczy�e� si� o nim ju� w cz�ci sz�stej Wprowadzenia.
Polecenie if sprawdza, czy pierwsze lub drugie por�wnanie jest prawdziwe. Je�li przynajmniej jedno z nich jest prawdziwe, ca�e polecenie if jest prawdziwe i wykonywane jest nast�pne polecenie. Oznacza to, �e otrzymasz komunikat o b��dzie wtedy, gdy ci�g jest pusty albo nie zawiera znaku @. Druga operacja w poleceniu if sprawdza, czy wpisany ci�g zawiera znak @.

Jakie pojawiaj� si� mo�liwo�ci wysy�ania zawarto�ci formularza. Najprostsz� jest wys�anie za pomoc� poczty elektronicznej. Jest to metoda, kt�rej przyjrzymy si� nieco bli�ej. Je�li chcesz otrzyma� od u�ytkownika zawarto�� formularza bez u�ycia poczty i po przetworzeniu go na serwerze, musisz si� pos�u�y� skryptem CGI. Skryptu takiego m�g�by� potrzebowa� np. w charakterze systemu wyszukiwawczego (cho�by takiego, jak Yahoo), gdzie u�ytkownik otrzymuje wynik niemal natychmiast po podaniu szukanych ci�g�w znak�w. Nie musi wcale czeka�, a� osoby obs�uguj�ce serwis przeczytaj� zawarto�� formularza. Jest to wykonywane automatycznie przez serwer. JavaScript nie dysponuje takimi mo�liwo�ciami. Nawet gdy chcesz utworzy� ksi��k� go�ci (guestbook), nie mo�esz zmusi� serwera aby automatycznie dodawa� informacj� do istniej�cej strony za pomoc� JavaScript. Tylko CGI potrafi to w tej chwili wykonywa�. Oczywi�cie mo�esz utworzy� ksi��k� go�ci aktualizowan� za po�rednictwem poczty elektronicznej. Musisz jednak wpisywa� dane r�cznie. Ma to sens wtedy, gdy liczba odpowiedzi nie przekracza 1000 dziennie.

Poni�szy skrypt to czysty kod HTML. JavaScript nie jest tutaj potrzebny! Oczywi�cie wtedy, gdy nie chcesz weryfikowa� wprowadzanej tu tre�ci. Musz� zaznaczy�, �e polecenie mailto nie dzia�a w ka�dej przegl�darce, ale w wi�kszo�ci nowszych program�w - tak.

<FORM METHOD=POST ACTION="mailto:your_email@goes.here">
<H3>Czy ta strona podoba Ci si�?</H3>
<INPUT NAME="choice" TYPE="RADIO" VALUE="1">Zupe�nie nie.<BR>
<INPUT NAME="choice" TYPE="RADIO" VALUE="2" CHECKED>Strata czasu.<BR>
<INPUT NAME="choice" TYPE="RADIO" VALUE="3">Najgorsze badziewie w ca�ym Internecie.<BR>
<INPUT NAME="submit" TYPE="SUBMIT" VALUE="Wy�lij odpowied�">
</FORM>

Gdy w definicji podasz sw�j adres pocztowy, otrzymasz odpowiedzi za pomoc� poczty elektronicznej. Problem jednak w tym, �e odpowied� taka mo�e wygl�da� na pierwszy rzut oka nieco tajemniczo. Niekiedy wszystkie spacje s� wype�niane znakiem '+', niekiedy '%20'. Moze%20to+wiec+niekiedy+wygladac%20w+taki+sposob. W sieci jest jednak par� program�w, kt�re zamieniaj� te hieroglify na nieco bardziej ludzk� posta� (cho�by mail:Formatter - przyp. t�um.).

Jest jeszcze inna sympatyczna rzecz, kt�ra mo�e uczyni� Twoje formularze nieco bardziej przyjaznymi. Mo�esz okre�li� ju� na pocz�tku, na kt�re elementy k�adziemy akcent. Albo mo�esz nakaza� przegl�darce sprawdzanie, kt�re informacje od u�ytkownika s� niepoprawne. Oznacza to, �e przegl�darka b�dzie od razu powodowa�a wprowadzenie kursora do okre�lonego pola formularza, bez ingerencji u�ytkownika. Mo�na to wykona� za pomoc� nast�puj�cgo skryptu.
:

function setfocus() {
document.first.text1.focus();
return;
}

Skrypt ten k�adzie nacisk na pierwszy element tekstowy w pokazanym wy�ej skrypcie. Musisz okre�li� nazw� ca�ego formularza, kt�ry nosi nazw� first - oraz nazw� konkretnego elementu formularza - tutaj text1. Je�li chcesz po�o�y� akcent na ten element, gdy formularz jest �adowany, mo�esz doda� w�asno�� onLoad do znacznika <body>.
Wygl�da to na przyk�ad tak:

-
Cz�� 1 -
Cz�� 2 -
Cz�� 3 -
Cz�� 4 -
Cz�� 5 -
Cz�� 6

Aktualizacja: 11 maja 1996

(c) 1996 by Stefan Koch

javascr7

po polsku

Menu