JSCRIPT.PDF

KURS

PROGRAMOWANIA

W JAVASCRIPT

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:

<!--

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:

<!--

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:

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. ( string ) Jest to dowolny ci g znaków umieszczany zawsze w cudzysłowu

podwójnym lub w pojedynczym:

Zmienna="1 jest_MnieJszE-od+3"

Zmienna string mo e by tak e zbudowana ze znaków i innej zmiennej. W takim przypadku

trzeba rozdzieli string 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 (wi cej I>> ) 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 (wi cej I>> ) 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:

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika: