Jak dodać skrypt do strony
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.