JavaScript dla każdego
//  wróć   główna   dalej  //

Wstęp do JavaScript'u

Na tej stronie chciałbym przedstawić kilka informacji na temat tworzenia skryptów i sięgnąć trochę do historii. Tą stroną będą zainteresowani Ci, którzy nie mieli wcześniej styczności z apletami i to głównie ich uwadze poświęcam ją poświęcam.

JavaScript to język programowania, opracowany specjalnie dla potrzeb pracy w środowisku World Wide Web przez firmę Sun Microsystem i Netscape. Jest narzędziem pozwalającym na trochę bardziej interaktywne tworzenie stron WWW, niż można to osiągnąć przy pomocy samego HTML-a. Daje możliwość kontrolowania zachowań internauty oglądającego stronę WWW i reagowania na nie według zadanych warunków. Poprzez tworzenie apletów można wzbogacić stronę o wiele ciekawych rozwiązań.

Tworzenie apletów można podzielić na kilka części. Tworzenie skryptów uruchamiających się zaraz po wczytaniu strony, niezależnie od jakichkolwiek zdarzeń. Drugi rodzaj, to funkcje wykonywane po wywołaniu ich poprzez zdarzenie (kliknięcie myszką, zmiana zawartości formularza). Można stworzyć też skrypty uruchamiające się po pewnym ustalonym czasie, czyli z opóźnieniem.

Każdy aplet musi być zbudowany wg pewnego schematu:

<SCRIPT LANGUAGE="JavaScript">
<!--
 Instrukcje
//-->
</SCRIPT>

Po pierwsze musimy wpisać tag, gdzie zdefiniujemy język skryptowy (bo JavaScript nie jest jedynym, chociaż może najpopularniejszym). Znaki komentarza pozwalają na pominięcie skryptu tym przeglądarkom, które nie radzą sobie z odczytywaniem apletów. Podobne stosuje się czasami w arkuszach styli.

Prawie analogicznie można zbudować funkcję:

<SCRIPT LANGUAGE="JavaScript">
<!--
function Sprawdzam(zmienna)
{
 Instrukcje
}
//-->
</SCRIPT>

W tym przypadku wszystkie instrukcje znajdują się między znakami { } poprzedzonymi wyrazem function i nazwą tej funkcji. Nazwa może być prawie dowolna, za wyjątkiem słów zarezerwowanych tzw. keywords. Ponadto nazwa funkcji i zmiennych musi być niepowtarzalna, jednoznacznie identyfikująca funkcję. Parametr zmienna nie jest konieczny, jeżeli go nie ma, to nawiasy są puste. Takich zmiennych może być więcej, wtedy należy je rozdzielić przecinkiem. W takim przypadku bardzo ważna jest kolejność zmiennych, z jaką została wywołana funkcja. Może ona także wywołać samą siebie, co nazywane jest rekurencją.

Bardzo ważna jest wielkość liter zmiennych, funkcji itd. Zmienna zadeklarowana jako policz, a wywołana jako Policz spowoduje błąd lub odwołanie do niechcianego obiektu.

Wszystkie instrukcje muszą być rozdzielone średnikami. Czasem przeglądarka wykona skrypt pomimo ich braku, ale dla pewności i poprawności, warto stawiać średniki na końcu każdej instrukcji.

Podobnie jak HTML, JavaScript posiada możliwość wstawiania komentarza, niewidocznego dla przeglądarki i internauty. Pierwszy z nich dotyczy komentarzy zawartych tylko w jednej linijce:

function Sprawdzam(zmienna) //Ta funkcja sprawdzi jakieś dane
{
 Instrukcje
}

W powyższym przypadku już żadna instrukcja nie może pojawić się za komentarzem. Jako jego koniec traktowany jest koniec linijki. Drugi sposób, pozwala wprowadzić dłuższe notatki:

function Sprawdzam(zmienna) /*Ta funkcja sprawdzi dane
potrzebne do formularza*/ 
{
 Instrukcje
}

Podobnie jak w HTML-u blok komentarza jest otwierany i zamykany. Może być umieszczany w wielu linijkach, co daje możliwość wprowadzania bardziej rozbudowanych treści.

Zdarzenia są wywoływane, kiedy oglądający stronę przesunie myszkę nad obiekt formularza, rysunek albo linkę, kliknie go, zdejmie focus itp. Są one definiowane wraz z elementem, do którego dane zdarzenie się odnosi, oto przykład:

<INPUT TYPE=Button VALUE=Przycisk onClick="Sprawdzam(44)">

W momencie kliknięcia na taki przycisk jest wywoływane zdarzenie onClick. Wywołuje ono funkcję Sprawdzam z argumentem równyn 44.

<A HREF="javascript:funkcja()">Linka</A>
<A HREF="javascript:instrukcja">Linka</A>

Powyższe przykłady dają możliwość odwołania się do instrukcji języka JavaScript bezpośrednio w adresie linki. W obu przypadkach konieczne jest wpisanie javascript:, by dany adres był traktowany jako instrukcja. W przeciwnym razie wszystko między cudzysłowem będzie traktowane jako klastyczna linka.

Jeśli chodzi o przeglądarki, to wszystko sprowadza się do dwóch wielkich konkurentów: Microsoftu oraz Netscape'a. Ostatnio do walki włączyła się Opera i Mozilla.

Co do obsługi JavaScript przez te przeglądarki, to każda pracuje na swoje konto, co sprawia same problemy. Przede wszystkim język programowania skryptów proponowany przez Netscape'a JavaScript, nie jest bratem bliźniakiem JScriptu Microsoftu. Problem polega na tym, że istnieją instrukcje, które są obsługiwane tylko przez Navigatora, inne tylko przez Explorera. Jedyną (niestety bardzo marną) tego zaletą jest to, że można, w sposób alternatywny, określić przy pomocy której przeglądarki została otworzona dana strona.

Ponieważ język stale się rozwija, mamy już jego kolejne wersje, pomocne m.in. przy tworzeniu dynamicznych stron DHTML. Efektem tego jest zróżnicowanie w programowaniu skryptowym przeglądarek. Nie dość, że należy sprawdzić, czy dany skrypt działa w obydwu konkurencyjnych przeglądarkach, to nie wiadomo, czy starsze wersje go odczytają.

Debugger (więcej I>>) pomoże poradzić sobie z problemem, jaki napotykają twórcy stron WWW. Jest to narzędzie, które pomaga znaleźć błędy w skryptach. Pozwala śledzić kolejne wykonywane instrukcje i odszukać tę felerną linijkę, która stanowi problem i nieprzewidziane rezultaty.

Jest jeszcze jedna różnica pomiędzy przeglądarkami. Dość istotna dla tych, którzy często korzystają ze źródła strony. Otóż polega ona na tym, że Explorer pokaże prawdziwe źródło strony, czyli identyczne, jak to, które napisał twórca strony. Navigator czasami pokaże inną treść źródła. Jeżeli zadeklarujemy formatowanie tekstu w JavaScript, to przeglądarka Netscape'a pokaże ten tekst przy pomocy tagów HTML-a. Jeśli dynamicznie wygenerujemy 1000 obrazków przy pomocy kilku instrukcji JS, to może się okazać, że Navigator w źródle strony pokaże zamiast kilku wspomnianych instrukcji 1000 tagów.

JavaScript może wchodzić w konflikt z adserwerami. Jeśli umieszczamy na stronie skrypt, który wykonuje się przy ładowaniu strony (chociaż nie tylko), to możemy mieć pewnie nieprzyjemności. Otóż wiele adserwerów wyświetla banery reklamowe wspomagane instrukcjami JavaScript. Jeśli obsługa baneru adservera zmieni wartość zmiennej, to może się okazać, że skrypt nie będzie działał, jednak jest to bardzo skrajny przypadek. Nie mniej jednak każdy, kto umieszcza na swoich stronach reklamy niestety nie może mieć 100% pewności, że jego skrypty będą działały, jak należy. Jedyne, co można zrobić, aby ustrzec się takich problemów przynajmniej w pewnym stopniu to staranne wykonanie skryptu.

JavaScript nie potrzebuje żadnego dodatkowego kompilatora, co sprawia, że języka bardzo łatwo się używa. Można go pisać w każdym edytorze tekstu, podobnie, jak HTML. Warto jednak zaopatrzyć się w kolorowanie składni, co poprawia wizualnie skrypt i niewątpliwie jest pomocne przy edytowaniu dużych apletów.

Do przeglądania stron polecam najnowszego Explorera, można go ściągnąć z bardzo wielu miejsc na darmo (umieszczany na CD wszystkich szanujących się pism komputerowych). Navigator obsługuje wszystkie przedstawione tu rozwiązania, chyba, że jest inna informacja. Ze względu na różnorodność przeglądarek nie ręczę, że wszystko będzie działać, jak należy, pomimo tego, że dołożyłem wszelkich starań, by tak było. Język się zmienia, powstają nowe przeglądarki, co znacznie utrudnia ujednolicenie instrukcji.

Na zakończenie kilka słów o samym programowaniu, jakim z pewnością jest tworzenie apletów w JavaScript. Jest wiele szkół pisania programu, jeśli chodzi o formatowanie kodu. Jeśli jesteś początkującym programistą, to sugeruje przyjąć takie formatowanie, jaki przedstawiam w serwisie, bo jest ono preferowane przez większość programistów. Jeśli jednak nie odpowiada Ci ono, możesz zostać przy swojej opcji. Ważne jest jednak, by konsekwentnie pisać program, bo wszelkie zmiany prowadzą do jego nieczytelności - tym bardziej, jeśli będzie on oglądamy i być może edytowany przez osobę, która ma inne nawyki formatowania kodu.

Chcę uprzedzić także osoby, które biegle programują w dowolnym języku, że będą w bardzo wielu miejscach rozczarowane sposobem pisania instrukcji - totalnym brakiem optymalizacji. Zgadza się, ale w ten sposób osoby początkujące mogą prościej dostrzec istotę omawianego problemu. A to jest podstawowym celem kursu. Ci, którzy programowali już wcześniej np. w języku C, z pewnością kurs ten potraktują tylko jako poznanie możliwości JavaScriptu i jego składni - gramatyka obu języków jest niemal identyczna.


Do góry