MINI-KURS JAVASCRIPT - część I

 
Wstęp

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 tę stronę.

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ąć za pomocą 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ń, o których jest ten kurs.

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ą, uzupełnienie formularza).

Teraz kilka słów o konstrukcji. Każdy aplet musi być zbudowany wg pewnego schematu:

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

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

Jeżeli chodzi o funkcje, to sprawa się ma podobnie. Różnica jest niewielka:


<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. Ponadto nazwa funkcji i zmiennych musi być niepowtarzalna, jednoznacznie identyfikująca funkcję. Co do zmiennej, to nie jest ona konieczna, jeżeli jej nie ma, to nawiasy są puste. Jeżeli już jest, to jej wartość jest równa wartości z jaką została wywołana funkcja. Jej wartość jest pomocna, gdy jedna funkcja obsługuje kilka obiektów, różniących się tylko jednym parametrem. Takich zmiennych może być więcej, wtedy należy je rozdzielić przecinkiem. Wtedy, bardzo ważna jest kolejność zmiennych, z jaką została wywołana funkcja.

Funkcja może też wywołać równie dobrze samą siebie, co nazywa się rekurencją.

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

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

W momencie kliknięcia na taki przycisk jest wywoływane zdarzenie onClick. Wykonuje ono funkcję Sprawdzam z podanym argumentem zmienna.

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

Powyższe przykłady dają możliwość odwołania się do języka JavaScript bezpośrednio w adresie linki. W obu przypadkach konieczne jest wpisanie, że dany adres jest odwołaniem obsługiwanym przez JavaScript. W przeciwnym razie wszystko między cudzysłowem będzie traktowane jako linka. Na pasku statusu pojawi się instrukcja, a nie jak zwykle adres linki.

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 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 jest otwierany i zamykany. Może być umieszczany w wielu linijkach. Daje możliwość wprowadzania bardziej rozbudowanych treści.

Na zakończenie dodam jeszcze, że bardzo ważna jest wielkość liter zmiennych, funkcji itd. Zmienna zadeklarowana jako policz, a wywołana jako Policz spowoduje błąd.

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

W temacie przeglądarek można rzec, że wszystko sprowadza się do dwóch wielkich konkurentów: Microsoftu oraz Netscape'a. Powodem tego jest to, że Navigator, a teraz także Explorer to produkty freewarowe. W zasadzie same zalety, ale więcej różnic niż podobieństw między tymi produktami, co powoduje problemy. Przede wszystkim arkusze stylów są dużo lepiej obsługiwane przez IE. Daje to możliwość lepszego panowania nad położeniem, kolorem, czy wielkością elementów strony.

Co do obsługi JavaScrit przez te przeglądarki, to już jest lepiej, ale nie doskonale. 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ą tego zaletą jest to, że można, w sposób alternatywny, określić za pomocą której przeglądarki została otworzona dana strona.

Ponieważ język stale się rozwija, mamy już kolejne wersje tego języka, 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. To jest to, co pomoże poradzić sobie z problemem, jaki napotykają twórcy stron WWW. Debugger to program, który pomaga znaleźć błędy w skryptach. Pozwala śledzić kolejne wykonywane instrukcje i odszukać tę felerną linijkę, która stanowi problem.

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 to 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ą tylko dostępnych tagów HTML-a. Najlepiej przekonać się o tym dokładnie oglądając źródło strony formatowania tekstu.

Chciałbym tutaj przedstawić podstawowe zasady tworzenia prostych apletów. Przede wszystkich jednak tych apletów, które można szybko i samodzielnie dodać do swoich stron, niewymagających wielkiego zaangażowania i poświęcenia w sprawdzaniu poprawności. Zdecydowana większość skryptów jest wraz z przykładami. Te łatwe utworzone tylko za pomocą skryptów są pod przyciskiem Test. Jeżeli jednak tak nie jest, to zawsze można zajrzeć do źródła, gdzie dany aplet został wykorzystany. Tam, gdzie można tworzyć bardziej zaawansowane rzeczy jest linka Master w postaci rysunku diamentu do nowego okienka.

Wprowadziłem dość jednolitą strukturę, by można było się swobodnie poruszać. A więc nagłówek, poniżej metody, właściwości i parametry używane przy danym temacie. Część właściwa Kursu, gdzie znajdują się wszystkie informacje dotyczące danego tematu. Czasem rozdzielone linią, by rozdzielić ważniejsze zagadnienia. Ważniejsze informacje (jeżeli takie są) dotyczące danego tematu, znajdują się na końcu pod linią.

Oprócz samego Kursu można tu znaleźć inne ciekawe rzeczy związane z programowaniem w JavaScript. Stają się pomocne przy poszukiwaniach konkretnych instrukcji - hierarchia.

Do przeglądania stron polecam najnowszego Explorera, można go ściągnąć z bardzo wielu miejsc na friko (dodawany do CD wszystkich szanujących się pism komputerowych). Ja także używałem MSIE i obsługuje wszystkie przedstawione tu rozwiązania (chyba, że napisałem inaczej). Ale ze względu na różnorodność przeglądarek nie ręczę, że wszystko działać będzie, jak należy, pomimo tego, że dołożyłem wszelkich starań, by tak było.

Jego dodatkową zaletą jest dobra obsługa arkuszy stylów (CSS), co poprawia walory wizualne strony. A moje strony są bardzo przesycone stylami. A to wszystko po to, by łatwiej było znaleźć na nich to wszystko, co jest potrzebni. Mogłem to także uczynić zapychając kilobajtami grafiki i powodując wolniejsze ładowanie stron.
To wszystko sprawia, że moje strony są przejrzyste i lekkie.

Rodzaje zmiennych

Na początek kilka słów o definiowaniu zmiennych. Zmienna zdefiniowana w dokumencie, ale nie w funkcji to zmienna globalna. Jest ona w pamięci przez cały czas i można się do niej odwoływać we wszystkich skryptach i funkcjach. W przypadku zadeklarowania zmiennych w funkcji - zmienne lokalne - o tej samej nazwie, jak zmienna globalna, wszystkie instrukcje tej funkcji odnoszące się do tej zmiennej, będą się odnosiły do zmiennej lokalnej. Ponadto wszelkie jej modyfikacje nie spowodują zmiany wartości zmiennej globalnej. Nie można używać zmiennych bez uprzedniego ich zadeklarowania. Można to zrobić w dowolnym miejscu programu, nawet bezpośrednio przed jej użyciem:

var Zmienna

W taki sposób utworzona została dana o nazwie Zmienna. Jej wartość jest na razie nieokreślona, czyli domyślnie undefined. Jeżeli wartość nie może być określona, na przykład w przypadku dzielenia przez zero, to otrzymamy infinity. W zależności od tego, co podstawimy za wartość zmiennej, to do odpowiedniego typu będzie ona należeć.

Drugim rodzajem definiowania danej jest przypisanie jej po prostu wartości, ona zdecyduje jednoznacznie o rodzaju zmiennej. Obydwie formy są poprawne:

Zmienna=123
var Zmienna=123

Bardzo ważną rzeczą w nazewnictwie jest wielkość użytych liter. Zmienne zdefiniowane wewnątrz funkcji nie są dostępne poza nią. Są to wyżej wspomniane zmienne lokalne

W języku JavaScript można wyróżnić kilka rodzajów zmiennych. W nawiasach są podane ich nazwy oryginalne:

Łańcuch znaków. (tring) Jest to dowolny ciąg znaków umieszczany zawsze w cudzysłowu podwójnym lub w pojedynczym:

Zmienna="1 jest_MnieJszE-od+3"

Zmienna tring może być także zbudowana ze znaków i innej zmiennej. W takim przypadku trzeba rozdzielić tring od zmiennej. Służy do tego cudzysłów. O jego używaniu dalej.

Zmienna liczbowa. (number) Czyli po prostu liczba. Miejsca dziesiętne oddziela się kropką. Liczbę można zapisać w jednym z formatów:

Zmienna=25.2 - standartowo w systemie dziesiątkowym,
Zmienna=25e-2 - czyli 25/100,

Zmienne logiczne. (boolean) Przyjmują tylko dwie wartości: true (1) albo false (0):

Zmienna=true

Wartość Null. (object) Jest to bardzo specyficzna wartość zmiennej. Oznacza nic, czyli de facto jej wartość nie istnieje. Dla przykładu w okienkach dialogowych po naciśnięciu anuluj zwracana jest wartość null. Podobnie jak w przypadku liczb i wartości logicznych nie należy stosować cudzysłowu, bo wtedy otrzymamy łańcuch znaków:

Zmienna=null

Chcąc sprawdzić do jakiego typu należy dana zmienna można użyć funkcji typeof. Zwróci ona nazwę ciągu znaków. Jeżeli chodzi o zmienne, to należy je wcześniej zdefiniować, by funkcja działała:

typeof(true) - zwróci wartość boolean.

Kolejną, dość wygodną rzeczą jaką daje JavaScript, jest możliwość skracania kodu. Załóżmy, że polecenie odwołania się do konkretnego elementu formularza jest powtarzane dosyć sporą ilość razy, wtedy takie skrócenie staje się wygodniejsze:

document.Form.Test.value;

Można rozwiązać ten problem poprzez zastosowanie dowolnej zmiennej, której należy przypisać dany obiekt:

F=document.Form.Test;

Zmiennej F przypisałem tylko obiekt, bez właściwości value. Podobnie jak metody, właściwości nie można przypisać nowej zmiennej. Należy ją przywołać przy każdorazowym uzyciu nowego obiektu. Po takiej modyfikacji można przypisać wartości F dowolną właściwość, a tej znowu nową wartość, powodując w ten sposób modyfikację w formularzu:

F.value="Cześć!"

Dzieje się tak dlatego, że zmienna F jest obiektem, któremu można przypisywać własności i metody. Jednak tylko te, jaki dany obiekt obsługuje. W tym przypadku wartość VALUE elementu formularza będzie wynosiła Cześć!.

W temacie operacji na liczbach wygląda to tak, że wszystko zależy od rodzajów zmiennych - argumentów. Suma łańcuchów zmiennych tring jest zmienną łańcuchową wg podanej zasady:

Zmienna1="Damian"
Zmienna2="Szczepanik"
Zmienna1+Zmienna2="DamianSzczepanik";

Przede wszystkim nie sprawdza się przemienność dodawania. Żadna ze zmiennych nie posiadała spacji, suma też jej nie posiada. Podobny efekt będzie, gdy dodamy liczbę i zmienną łańcuchową. Można także dodawać bezpośrednio tring do zmiennej:

Zmienna="Tekst"+Imie;

W tym przypadku Tekst jest tringiem, Imie wcześniej zdefiniowaną zmienną - jej rodzaj nie jest ważny. Problem może się pojawić, gdy tring zawiera już jakieś cudzysłowy. Wtedy, ten, który znajduje się pierwszy rozpoczyna tring, drugi jest jego częścią:

Zmienna="Tekst 'Tutul' "+Imie;

Efektem operacji na zmiennych liczbowych jest liczba wynikła z działania. Jeżeli chcemy, by liczby były traktowane jako zmienne łańcuchowe, to należy dodać np. między nimi pusty element tring:

Zmienna=125+""+521
Zmienna=125521

W przypadku innych operacji na zmiennych łańcuchowych otrzymamy najprawdopodobniej wartość NaN (Not a Number). Taka wartość zostanie zwrócona, bo JavaScript nie mogła zakwalifikować danego wyniku jako liczby.

Co się tyczy operacji na zmiennych logicznych i wartości null, to wiadomo, że true jako prawda jest traktowane jako 1. Dwie pozostałe wartości to 0. Powinny być traktowane przez przeglądarki, jako te właśnie liczby, ale może wystąpić wartość infinity lub NaN.

Teraz kilka użytecznych funkcji do konwersacji zmiennych z jednego typu do innego. Wspomniana wyżej wartość NaN po zmodyfikowaniu pozwala określić, czy dana zmienna nie jest liczbą. Oznacza to, że zwraca wartość false jeżeli dana zmienna jest liczbą. Na przykład:

isNaN(25) - zwróci wartość false,
isNaN(a1) - zwróci wartość true.

Jeżeli już stwierdzimy, że dana zmienna jest liczbą, możemy ją konwertować do liczby całkowitej przez funkcję pareInt lub zmiennoprzecinkowej - wymiernej przez parseFloat Teraz kilka przykładów dla lepszego rozeznania się w tych funkcjach:

parseInt(5e1) - zwróci wartość 5.
parseInt(-21a) - zwróci wartość -21.
parseFloat(-2.3) - zwróci wartość -2.3.
parseFloat(-12.1+5) - zwróci wartość -12.

W drugim przykładzie zwrócona wartość wynosi -21, chociaż argument nie jest liczbą, ale jego pierwsze 3 znaki są i te zostały zamienione. W czwartym przypadku można by się spodziewać liczby -7.1, ale przypominam, że to jest traktowane jako ciąg znaków, plus nie jest żadną liczbą.

Jeszcze jedna bardzo przydatna instrukcja. Konwertuje ona działanie na argumencie przedstawione jako tring. Jest to pomocna, gdy wywołujemy funkcję z wartością jako tring, a należy wykonać na niej działanie Oto zastosowanie:

Zmienna1="10+2*4"
Zmienna2=eval(Zmienna1) - zmienna będzie wynosiła 18, będzie zmienną typu number.
 

C.D. w drugiej części kursu JavaScript

D.F.