JavaScript jest nowym jΩzykiem skryptowym dla dokument≤w internetowych. Skrypty napisane za pomoc▒ JavaScript mog▒ byµ umieszczane bezpo╢rednio na stronach HTML. JΩzyk daje obszerne mo┐liwo╢ci wzbogacania stron w interesuj▒ce elementy. Na przyk│ad mo┐esz zdefiniowaµ reakcjΩ na zainicjowane przez czytelnika dzia│ania. Niekt≤re efekty jeszcze niedawno by│y mo┐liwe jedynie przy u┐yciu CGI, a teraz jeste╢ w stanie zbudowaµ wyrafinowane konstrukcyjnie strony za pomoc▒ JavaScript. Wiele przyk│ad≤w u┐ycia jΩzyka mo┐esz zobaczyµ w Internecie - sporo odsy│aczy znajdziesz na stronie Gamelan (w czΩ╢ci dotycz▒cej JavaScript). Pod adresem http://home.netscape.com znajdziesz dokumentacjΩ dostarczon▒ przez Netscape Communications.
Mimo zbie┐no╢ci nazw Java nie jest to┐sama z JavaScript. S▒ to dwie odrΩbne techniki programowania w Internecie. Java jest jΩzykiem programowania, natomiast JavaScript jest jΩzykiem skryptowym, jak zreszt▒ sugeruje sama nazwa. R≤┐nica polega na tym, ┐e Java pozwala tworzyµ rzeczywiste programy. Ale nie zawsze musisz sobie zaprz▒taµ g│owΩ prawdziwym programowaniem, aby uzyskaµ │adny efekt na swojej stronie. JavaScript jest pomy╢lany jako narzΩdzie │atwe do zrozumienia i zastosowania. Autor≤w pisz▒cych w JavaScript nie musi zbytnio obchodziµ programowanie. Mo┐na powiedzieµ, ┐e JavaScript jest raczej rozszerzeniem HTML ni┐ odrΩbnym jΩzykiem komputerowym. Oczywi╢cie nie jest to "oficjalna" definicja, ale my╢lΩ, ┐e pozwala ona │atwiej uchwyciµ r≤┐nicΩ miΩdzy Jav▒ i JavaScript. WiΩcej informacji na temat obu jΩzyk≤w znajdziesz w serwisie Gamelan, a tak┐e na stronie Netscape.
Pierwsz▒ przegl▒dark▒ obs│uguj▒c▒ JavaScript by│ Netscape Navigator 2.0, jak i, oczywi╢cie, p≤╝niejsze jego wersje. Byµ mo┐e wiesz, ┐e nie wszystkie wersje Navigatora czytaj▒ JavΩ, ale JavaScript jest interpretowany na wszystkich platformach, choµ wystΩpuj▒ pewne problemy w niekt≤rych wersjach. Wersja dla Macintosha, dla przyk│adu, wydaje siΩ mieµ pewn▒ ilo╢µ b│Ωd≤w. W najbli┐szej przysz│o╢ci dalsze przegl▒darki bΩd▒ wyposa┐one w mo┐liwo╢µ interpretacji JavaScript, m.in. Microsoft Internet Explorer 3.0. Przegl▒darki takie szybko siΩ upowszechni▒, wiΩc warto poznaµ tΩ technikΩ ju┐ teraz. Wszystko, co powiniene╢ znaµ, to podstawowe techniki i radzenie sobie z problemami, kt≤re mog▒ siΩ pojawiµ.
Naturalnie powiniene╢ ju┐ dysponowaµ pewn▒ znajomo╢ci▒ jΩzyka HTML, zanim rozpoczniesz naukΩ JavaScript. Wiele warto╢ciowych materia│≤w szkoleniowych na ten temat znajdziesz w sieci - przeszukaj choµby serwis Yahoo (mo┐esz tak┐e skorzystaµ z polskiego podrΩcznika dla pocz▒tkuj▒cych na stronie Wydawnictwa Lupus - przyp. t│um.). Materia│y online s▒ zazwyczaj bardziej aktualne ni┐ ksi▒┐ki - Internet zmienia siΩ ostatnio bardzo szybko...
A teraz poka┐Ω Ci kilka ma│ych skrypt≤w, kt≤re zilustruj▒ spos≤b ich implementowania na stronie HTML i mo┐liwo╢ci oferowane przez nowy jΩzyk. RozpocznΩ od skryptu, kt≤ry bΩdzie po prostu wy╢wietla│ jaki╢ tekst.
<html>
<head>
My first JavaScript!
</head>
<body>
<br>
To jest normalny dokument HTML.
<br>
<script language="LiveScript">
document.write("To jest JavaScript!")
</script>
<br>
I znowu dokument HTML.
</body>
</html>
Je╢li Twoja przegl▒darka akceptuje JavaScript, powiniene╢ zobaczyµ poni┐ej wszystkie trzy wiersze przyk│adu. Je╢li nie, zobaczysz tylko dwa.
To jest normalny dokument HTML.
I znowu dokument HTML.
MuszΩ przyznaµ, ┐e nie jest to zbyt u┐yteczny skrypt. W jΩzyku HTML napiszesz to na pewno szybciej i pro╢ciej. Ale chcia│em pokazaµ, jak powiniene╢ stosowaµ znaczniki <script>. Mo┐esz je zastosowaµ w dowolnym miejscu swojego dokumentu HTML.
Nie chcΩ Ci zawracaµ g│owy g│upimi skryptami. Przejd╝my wiΩc do funkcji. Nie s▒ one trudne do zrozumienia, ale za to, wierz mi, znacznie bardziej u┐yteczne! Funkcje najlepiej jest deklarowaµ w ramach znacznika <head> dokumentu HTML. S▒ one wtedy │adowane zanim jeszcze czytelnik strony bΩdzie m≤g│ wykonaµ co╢, co jest zwi▒zane z funkcj▒. Skrypty powinny byµ umieszczone w ramach komentarzy, aby sama definicja skryptu nie by│a wy╢wietlana w przegl▒darkach, kt≤re nie interpretuj▒ JavaScript.
<html>
<head>
<script language="JavaScript">
function pushbutton() {
alert("Hello!");
}
</script>
</head>
<body>
<form>
<input type="button" name="Button1" value="Naci╢nij mnie" onclick="pushbutton()">
</form>
</body>
</html>
Skrypt pozwala utworzyµ przycisk, kt≤rego naci╢niΩcie powoduje wy╢wietlenie okienka informacyjnego z napisem "Hello!". Czy┐ to nie wspania│e? A zatem, jak to dzia│a?
Najpierw do pamiΩci jest │adowana sama funkcja. Potem, za pomoc▒ zwyk│ego znacznika <form> jest tworzony przycisk. Co╢ nowego pojawia siΩ przy znaczniku <input>. Mo┐esz tam zobaczyµ 'onclick', kt≤ry m≤wi przegl▒darce, jak▒ funkcjΩ nale┐y wywo│aµ po klikniΩciu na przycisku (je╢li, rzecz jasna, przegl▒darka potrafi interpretowaµ JavaScript). Funkcja 'pushbutton' jest zadeklarowana w nag│≤wku. Gdy naci╢niemy przycisk zostanie uruchomiona ta w│a╢nie funkcja. Jeszcze inna nowo╢µ w skrypcie to metoda 'alert'. Metoda jest wbudowana w JavaScript, a wiΩc wystarczy j▒ jedynie przywo│aµ. Jest wiele r≤┐nych metod, kt≤re mo┐emy przywo│ywaµ. Niekt≤re z nich zostan▒ pokazane w naszym przewodniku. Pe│ny ich opis znajdziesz na serwerze Netscape. S▒dzΩ, ┐e ich lista w nied│ugim czasie znacznie siΩ wyd│u┐y. Ale ju┐ w tym momencie mo┐esz zrobiµ z nimi sporo ciekawych rzeczy.
(Nie s▒dzΩ, aby metoda 'alert' mia│a byµ u┐ywana w taki w│a╢nie spos≤b - ale w ko±cu dopiero siΩ uczymy, a taki spos≤b jest do╢µ │atwy do zrozumienia. Mam nadziejΩ, ┐e mi darujecie...)
Jak dot▒d zaszli╢my ju┐ ca│kiem daleko. W rzeczywisto╢ci zyskujemy mn≤stwo mo┐liwo╢ci dodaj▒c po prostu kolejne funkcje do naszych skrypt≤w. Teraz poka┐Ω Ci, jak mo┐esz odczytaµ co╢, co czytelnik strony wprowadzi│ do formularza.
<html>
<head>
<script language="JavaScript">
<!-- hide script from old browsers
function getname(str) {
alert("Hi, "+ str+"!");
}
// end hiding contents -->
</script>
</head>
<body>
Wpisz swoje imiΩ:
<form>
<input type="text" name="name" onBlur="getname(this.value)" value="">
</form>
</body>
</html>
W skrypcie ponownie znalaz│o siΩ kilka nowych element≤w. Po pierwsze, zapewne zauwa┐y│e╢ obecno╢µ w skrypcie komentarza. W taki w│a╢nie spos≤b mo┐esz ukryµ tre╢µ skryptu przed przegl▒darkami, kt≤re nie potrafi▒ interpretowaµ JavaScript. Powiniene╢ siΩ trzymaµ pokazanej tu kolejno╢ci! Pocz▒tek komentarza powinien siΩ znajdowaµ zaraz za pierwszym znacznikiem <script>. Komentarz ko±czy siΩ tu┐ przed znacznikiem </script>. W bie┐▒cym dokumencie HTML znalaz│ siΩ formularz, w kt≤rym czytelnik mo┐e wpisaµ swoje imiΩ. 'onBlur' w znaczniku <input> m≤wi przegl▒darce, jak▒ funkcjΩ nale┐y wywo│aµ, gdy wprowadzimy jak▒╢ tre╢µ do formularza. Funkcja 'getname(str)' zostanie uruchomiona wtedy, gdy usuniesz kursor z formularza lub naci╢niesz klawisz Enter. Funkcja przyjmie ci▒g znak≤w, wpisany w polu formularza, za pomoc▒ polecenia 'getname(this.value)'. 'this.value' oznacza warto╢µ, kt≤r▒ wpisa│e╢ w tym elemencie formularza.
My╢lΩ,┐e nastΩpna rzecz jest tak┐e ca│kiem przyjemna. W naszym skrypcie zaimplementujemy funkcjΩ daty. Gdy tworzysz dokument HTML, mo┐esz spowodowaµ, aby przegl▒darka czytelnika wy╢wietli│a datΩ ostatniej aktualizacji dokumentu. Nie musisz wpisywaµ daty w dokumencie rΩcznie. Wpisz po prostu ma│y skrypt, a gdy wprowadzisz jakie╢ zmiany na swojej stronie, data zmieni siΩ automatycznie.
<html>
<body>
This is a simple HTML- page.
<br>
Last changes:
<script language="LiveScript">
<!-- hide script from old browsers
document.write(document.lastModified)
// end hiding contents -->
</script>
</body>
</html>
W pierwszej wersji Wprowadzenia u┐y│em lastmodified. Taki styl wymusza│ Netscape 2.0 beta 2. Obecnie otrzyma│em wersjΩ beta 4, w kt≤rej zmieni│o siΩ to na lastModified. Zauwa┐ wiΩc, ┐e jΩzyk JavaScript jest wra┐liwy na wielko╢µ liter. lastmodified i lastModified to dwie r≤┐ne rzeczy. To by│ pow≤d, dla kt≤rego pierwsze wydanie nie mia│o daty na ko±cu, gdy by│o ogl▒dane za pomoc▒ pewnych wersji Navigatora.
W tym momencie ta w│asno╢µ wydaje siΩ funkcjonowaµ nie na ka┐dej maszynie. Niekt≤re serwery pokazuj▒ jedynie datΩ 1/1/1970. Z funkcj▒ wi▒┐▒ siΩ pewne problemy. Musimy zaczekaµ na nastΩpn▒ aktualizacjΩ i mam nadziejΩ, ┐e jΩzyk bΩdzie dzia│aµ na ka┐dej maszynie. Ale Ty musisz sam wypr≤bowaµ swoj▒ maszynΩ - na niekt≤rych dzia│a to bardzo dobrze.
Jak ju┐ powiedzia│em, sprawy tocz▒ siΩ bardzo szybko. Niech wiΩc Was nie zdziwi, gdy w nastΩpnym tygodniu pojawi siΩ w JavaScript jaka╢ powa┐niejsza zmiana. Musisz wiΩc pilnie ╢ledziµ przysz│e zmiany w jΩzyku, kt≤ry jest przecie┐ jeszcze bardzo m│ody. Miej na uwadze, ┐e niekt≤re szczeg≤│y, o kt≤rych tutaj m≤wimy, tak┐e mog│y ulec modyfikacji. Ale s▒dzΩ, ┐e zasady pozostan▒ niezmienne.
aktualizacja: 11 maja 96
(c) 1996 by Stefan Koch