WebReporter
n a s z e    s e r w i s y
@ WebReporter
@ Reporter
@ BizReporter
@ FotoReporter
@ Gry
@ Junior
@ Forum dyskusyjne
@ Og│oszenia
r e k l a m a
j e d n y m    k l i k i e m:
- WebNEWS
- kafejki internetowe
- kartki elektroniczne
- ranking foto
- Bank Pomys│≤w
- Encyklopedia Internetu
- Super Strony
- szukaj w Internecie
- za│≤┐ darmowy e-mail
- za│≤┐ darmowe WWW
- wymie± bannery
- pobierz programy


<<< poprzedni artyku│ spis tre╢ci nastΩpny artyku│ >>>
-= WARSZTAT =-
WebReporter nr 12 - 2000.12.15 Damian Szczepanik, www

JavaScript i jednolita nawigacja

Za pomoc▒ jΩzyka JS mo┐na w bardzo prosty spos≤b ujednoliciµ wygl▒d stron WWW wszystkich witryn. Klasycznym tego przyk│adem jest menu, kt≤re znajduje siΩ na dole (lub na g≤rze) strony. Pomaga ono w nawigacji pomiΩdzy poszczeg≤lnymi dzia│ami serwisu. Mo┐na wkleiµ na ka┐d▒ stronΩ wszystkie poszczeg≤lne linki, co w bardziej rozbudowanych serwisach zajmie co najmniej kilka(dziesi▒t) kilo. Ma│o kto chce za ka┐dym razem ╢ci▒gaµ te "kilka" bajt≤w, tym bardziej, je╢li przegl▒da dziesi▒tki stron serwisu.

Problem mo┐na rozwi▒zaµ w bardzo prosty spos≤b, wystarczy wkleiµ jedn▒ linijkΩ kodu, jeden tag, na ka┐d▒ stronΩ. Jak ka┐de rozwi▒zanie, tak i to ma swoje zalety i wady. Zalet▒ jest to, ┐e wystarczy tworzyµ jeden plik, kt≤ry bΩdzie odpowiedzialny za wypisanie na ekran dolnego menu, nazwijmy go nawigacj▒. Nawigacja bΩdzie niew▒tpliwie jednolita, bo zawsze bΩdzie zgodna z zawarto╢ci▒ jednego apletu JavaScript. úatwo jest tak┐e modyfikowaµ nawigacjΩ, w przypadku kiedy zaistnieje konieczno╢µ rozbudowania witryny o nowe dzia│y. Ponadto wystarczy, ┐e plik zostanie raz ╢ci▒gniΩty, potem jest │adowany z dysku - oszczΩdno╢µ czasu.

Istotnym elementem jest tutaj "g│Ωboko╢µ witryny", co wp│ywa na poprawno╢µ linek. Jest to faktycznie problem, ale mo┐na stworzyµ dla ka┐dego poziomu osobny skrypt, kt≤ry w praktyce bΩdzie siΩ r≤┐ni│ tylko trzeba znakami: ../ (je╢li wszystko bΩdzie dobrze pomy╢lane). Jest mo┐liwo╢µ zbudowania funkcji i przekazywania jej parametr≤w o po│o┐eniu pliku. Mo┐na w ko±cu u┐yµ bezwzglΩdnych adres≤w URL i nie ma ju┐ problemu.

Niestety do mo┐liwo╢ci ujrzenia obs│ugi takiej nawigacji potrzebna jest przegl▒darka z obs│ug▒ jΩzyka JavaScript. Najstarsze przegl▒darki nie obs│u┐▒ skryptu umieszczonego w osobnym za│▒czniku (ale nie bΩdzie b│Ωd≤w). Zdarza siΩ jednak bardzo rzadko, by przegl▒darka nie mia│a wbudowanej obs│ugi JS.

Kod skryptu, kt≤ry nale┐y wkleiµ na stronΩ wygl▒da nastΩpuj▒co.

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript" SRC="listwa.js"></SCRIPT>

Jest to pe│ny poprawny kod, ale czΩ╢ciej spotyka siΩ jego kr≤tsze wersje, z pominiΩciem wielu parametr≤w. Zwykle dzia│aj▒ poprawnie.

Przegl▒darka zinterpretuje tag nastΩpuj▒co. Je╢li skrypt bΩdzie zawiera│ informacje o wydrukowaniu tag≤w, to zostan▒ one wklejone w zadane miejsce. Je╢li wy╢wietlone zostanie np. tylko okienko alert(), to to, gdzie bΩdzie siΩ znajdowa│ tag, nie ma znaczenia. Chyba, ┐e dokument zawiera jakie╢ parametry (wcze╢niej zadeklarowane) potrzebne do wykonania skryptu. Wtedy ╝le umieszczony tak spowoduje b│Ωdy.

Plik listwa.js zawiera pe│ny kod skryptu. Rozszerzenie pliku to zwykle *.js, ale poniewa┐ zawarto╢µ jest zawsze apletem JS, mo┐na u┐ywaµ innych rozszerze±. Plik apletu nie powinien zawieraµ tag≤w, kt≤re s▒ wykorzystywane do oddzielenia skrypt≤w od tag≤w:

<SCRIPT LANGUAGE="JavaScript">
//kod skryptu

</SCRIPT>

Plik zawiera tylko to, co jest pomiΩdzy znacznikami. To, co zostanie wydrukowane, to jest ju┐ osobista sprawa, ale nawigacja jest dobrym przyk│adem.

Zaznaczam, ┐e, aby wykorzystaµ JS maksymalnie, by skrypt nie mia│ wiΩcej, ni┐ kilka kilo, by│ │adny, a zawarto╢µ estetyczna, potrzebne jest do╢wiadczenie w programowaniu JS. Nieraz wystarczy te┐ umiejΩtno╢µ kombinowania (wtedy powstaj▒ najlepsze aplety!).

A efekt wygl▒da np. tak:

Je╢li chcesz zobaczyµ, jak wygl▒da ten skrypt "od kuchni", zajrzyj tutaj

Opr≤cz wspomnianej tutaj nawigacji istnieje jeszcze kilka praktycznych sposob≤w wykorzystania tego rodzaju mo┐liwo╢ci. Wiele serwis≤w pozwala na umieszczanie swoich informacji na swoich stronach w│a╢nie za pomoc▒ JavaScript (np. WebNews). Wklejany jest tag, a skrypt jest ╢ci▒gany z innego serwera i wykonywany za pomoc▒ przegl▒darki. Jest to bardzo wygodny spos≤b, bo ka┐dy mo┐e mieµ na swojej stronie ╢wie┐e informacje, a serwis notuje wiΩcej ods│on. Witryna nie musi codziennie aktualizowaµ news≤w. Wystarczy, ┐e jeden skrypt zostanie podmieniony na serwerze dostawcy.

Drugim popularnym wykorzystaniem jest nowe okienko popup (np. Republika.pl), kt≤re otwiera siΩ podczas │adowania strony. Tutaj wygoda polega na tym, ┐e ingerencja w kod polega na wklejeniu kilkunastu znak≤w w nowym wierszu, reszta pozostaje nienaruszona. W nowym okienku zostanie za│adowana ankieta lub reklama. Zwykle okienko nie zd▒┐y siΩ za│adowaµ, bo jest zamykane, gdy┐ zas│ania g│≤wne okno.

Je┐eli masz jeszcze jakie╢ w▒tpliwo╢ci, jak to dzia│a, zajrzyj do ╝r≤d│a tej strony.

Autor prowadzi serwis po╢wiΩcony jΩzykowi JavaScript - zapraszamy.
+ JAVASCRIPT DLA KA»DEGO - www.republika.pl/dszczepanik/

[spis tre╢ci][do g≤ry]