
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.

|