Szukaj
Loguj
IRC #wirtuals
Forum
  Home arrow JavaScript arrow Kurs JavaScript arrow Jak dodać skrypt do strony?
Wstępnie
Home
Forum
Publikacje
Wiadomości
Prasa
HTML
CSS
PHP
Flash
JavaScript
Grafika
Czcionki
Recenzje programów
Wstawki
Statystyki
Wyszukaj
Newsletter








Forum Honda CBR

Jak dodać skrypt do strony? | Drukuj |  Email
Napisał Piotr Rzeźniczak (4919 odsłon)   
24.02.2006 12:31

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.

 

< Poprzedni   Następny >
Czytaj więcej ...
Loading ...

FIREFOX.PL GOOGLE.PL OPERA.COM
GMAIL.COM KONNEKT.INFO SKYPE.COM
PhpSolmag.org
Kontakt | Mapa serwisu
STAT.PL
validator.w3.org jigsaw.w3.org
FC Barca
20
pędzle, szczotki, miotły, producent pedzli, producent szczotek