JavaScript

Na stronie:
Kod źródłowy zagnieżdżony w HTML
Kod źródłowy zamieszczony w oddzielnym pliku
Jak zadbać o przeglądarki nie obsługujące JavaScriptu?
Komentarze do kodu

nast�na
poprzednia

1. Kod źródłowy zagnieżdżony w HTML.

Kod JavaScript musi być zawarty pomiędzy znacznikami HTMLa <script> i </script>:

<script>
kod naszego skryptu
</script>

Można go umieszczać w dowolnym miejscu dokumentu, ale praktykuje się zasadę, która mówi, że o ile to tylko możliwe, umieszcza się go na początku strony - w sekcji HEAD - która jest wczytywana przez przeglądarki jako pierwsza. To pozwala na uniknięcie błędów, kiedy to użytkownik nie czekając na całkowite załadowanie się strony klika na jakiś element związany z naszymi skryptami (których przeglądarka jeszcze nie zgrała).

Znacznik <script> posiada atrybut type, poprzez który deklarujemy język, w którym napisany będzie nasz kod. Będziemy nadawać mu wartość:
text/javascript

Kod HTML strony używającej JavaScript wygląda więc następująco:

<html>
<head>

<script type="text/javascript">
kod skryptu
</script>

<script type="text/javascript">
kod skryptu
/* może być więcej rozgraniczonych znacznikami <script> kodów na jednej stronie */
</script>

</head>
<body>

<script type="text/javascript">
tu - w dowolnym miejscy sekcji BODY - też można umieścić kod źródłowy skryptu
</script>

</body>
</html>

2. Kod źródłowy zamieszczony w oddzielnym pliku.

Bardzo dobrą praktyką jest wielokrotne wykorzystywanie napisanego wcześniej kodu. Aby pozbyć się problemu każdorazowego przeszukiwania dokumentów, otwierania, kopiowania i wklejania, kod źródłowy skryptu można umieścić w osobnym pliku. Jest to plik tekstowy o rozszerzeniu *.js, a kod skryptu pisany jest już bezpośrednio, bez znaczników <script>. O tym, że kod źródłowy jest w pliku zewnętrznym informujemy przeglądarkę wykorzystując atrybut src:

<script type="text/javascript" src="nazwa_pliku.js"></script>

Dzięki takiemu podejściu można z czasem stworzyć własną kolekcję najczęściej używanych skryptów, przez co oszczędzamy czas i nakłady pracy potrzebne na tworzenie co raz to nowych stron.

3. Jak zadbać o przeglądarki nie obsługujące JavaScriptu?

Mimo, że prawie wszystkie używane dziś przeglądarki nie będą miały problemu z kodem naszych skryptów - to nie zaszkodzi, jeżeli zadbamy o użytkowników, którzy takiego komfortu nie mają. Żeby oszczędzić im trudnych do przewidzenia zachowań przeglądarki lub komunikatów o błędach, kod umieszcza się w HTML-owych znacznikach komentarza:

<!-- komentarze
nie wyświetlane na stronie
-->

Dodatkowo przed znacznikiem zamykającym komentarz dodaje się dwa znaki "/", żeby zadbać o Netscape Navigatora.

Można dodatkowo poinformować użytkowników, że strona zawiera skrypty, które nie zostały wykonane przez ich przeglądarkę. W tym celu stosuje się znaczniki <noscript>. Uwzględniając wszelkie powyższe wskazówki, szablon naszej strony HTML będzie wyglądał następująco:

<html>
<head>

<script type="text/javascript">
<!-- ukrywamy kod przed nieznającymi nas przeglądarkami

kod skryptu

// koniec skryptu - koniec ukrywania -->
</script>

</head>
<body>
<noscript>
Twoja przeglądarka nie obsługuje JavaScriptu.
Aby zobaczyć stronę w pełnej funkcjonalności, zainstaluj inną przeglądarkę:
Internet Explorer, Netscape Navigator, Mozilla, Opera...
</noscript>

kod HTML strony

</body>
</html>

4. Komentarze do kodu.

Bardzo pomocna rzecz, która ułatwia zorientowanie się w kodzie, który gdzieś kiedyś (może nawet przed kilku godzinami) stworzyliśmy. Komentarze towarzyszą wszystkim językom programowania, a ponieważ i JavaScript umożliwia ich stosowanie, będziemy je umieszczali obok zawiłych instrukcji naszych skryptów.

Mamy do wyboru dwa typy komentarzy:

liniowy:
Zaczyna się od dwóch ukośników a kończy przy przejściu do następnej linii. Oznacza to, że przeglądarka zignoruje wszystko za znacznikiem // aż do końca linii, w której znacznik ten występuje.
blokowy:
Rozpoczyna się od sekwencji: /* a kończy sekwencją: */. Oznacza to, że może on ciągnąć się przez wiele linii, przy czym niemożliwe jest jego zagnieżdżanie (czyli stosowanie jednego komentarza w innym).

Dzięki komentarzom, możemy poinformować przeglądarkę, że nie obsługuje skryptów nie używając znacznika <noscript>. Powyższy szablon zmieni się na:

<html>
<head>

<script type="text/javascript">
// Twoja przeglądarka nie obsługuje JavaScriptu.
/* Aby zobaczyć stronę w pełnej funkcjonalności, zainstaluj inną przeglądarkę:
Internet Explorer, Netscape Navigator, Mozilla, Opera... */
<!-- ukrywamy kod przed nieznającymi nas przeglądarkami

kod skryptu

// koniec skryptu - koniec ukrywania -->
</script>

</head>
<body>

kod HTML strony

</body>
</html>

W takiej sytuacji, jeżeli przeglądarka obsługuje JavaScript, będzie wiedziała, że pierwsze trzy linie kodu są komentarzami i nie wyświetli ich. W przeciwnym razie, znacznik <script> zostanie zignorowany i wyświetlone zostanie wszystko aż do początku komentarza HTML - czyli <!--.
Polecam jednak stosowanie pierwszego scenariusza - stosowanie <noscript>, ponieważ przeglądarki tekstowe - takie jak lynx - rozpoznają znaczniki komentarza JavaScript (które są identyczne w wielu innych językach programowania jak Java i C++) i nie wyświetlą komunikatu, który chcemy przekazać użytkownikowi.

Piotr Rzeniczak (djv) Valid XHTML 1.0! Valid CSS! @
ostatnia modyfikacja:
2008-08-27 9:21:11 CEST
poprzednia nast�na