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.
|