JavaScript
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">
<!-- Hide

function test1(form) {
  if (form.text1.value == "")
    alert("Podaj ci▒g znak≤w!")
  else { 
   alert("Cze╢µ "+form.text1.value+"! Informacja poprawna!");
  }
}

function test2(form) {
  if (form.text2.value == "" || 
      form.text2.value.indexOf('@', 0) == -1) 
        alert("Niepoprawny adres poczty elektronicznej!");
  else alert("OK!");
}
// -->
</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:

<body onLoad="setfocus()">


Indeks - CzΩ╢µ 1 - CzΩ╢µ 2 - CzΩ╢µ 3 - CzΩ╢µ 4 - CzΩ╢µ 5 - CzΩ╢µ 6


Aktualizacja: 11 maja 1996
(c) 1996 by Stefan Koch