JavaScript – Totalne podstawy

W tym artykule przedstawione jest kilka informacji na temat tworzenia skryptów i trochę historii. Tą stroną powinni być przede wszystkim zainteresowani Ci, którzy nie mieli wcześniej styczności ze skryptami i to głównie ich uwadze ją poświęcam.

Artykuł pochodzi z kursu JavaScript Damiana Szczepanika za zgodą autora.

Wstęp

JavaScript to język programowania, opracowany specjalnie dla potrzeb pracy w środowisku WWW 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 skryptow 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ć również skrypty uruchamiające się po pewnym ustalonym czasie, czyli z opóźnieniem.

Nagłówki skryptów

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

<script type="text/javascript" language="JavaScript"> 
<!-- 
Instrukcje 
//--> 
</script> 

Po pierwsze musimy wpisać znacznik , gdzie definiujemy 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 interpretacją JavaScript.

Funkcje

Prawie analogicznie można zbudować funkcję:

<script type="text/javascript" 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

Komentarze

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

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()">Odsyłacz 1</a> 
<a href="javascript:instrukcja">Odsyłacz 2</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 klasyczny odsyłacz.

Przydatne uwagi

Jeśli chodzi o przeglądarki, to wszystko sprowadza się do dwóch wielkich konkurentów: Microsoftu oraz Netscape’a. Niedawno na scenie pojawiły się Opera i Mozilla.

Co do obsługi JavaScript przez te przeglądarki, to każda pracuje na swoje konto, co sprawia liczne 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 wbudowany w niektóre przeglądarki 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 za pomocą znacznikó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 serwerami reklam. 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 skryptów.

Artykuł pochodzi z kursu JavaScript Damiana Szczepanika