Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki

Umieszczanie skryptów w kodzie HTML

Email Drukuj PDF

Skrypty osadzone

Skrypty JavaScript mogą być umieszczane wewnątrz kodu (X)HMTL — mówimy wtedy o skryptach osadzonych. Umieszczenie skryptu w kodzie HTML polega na użyciu znacznika <script>, którego schematyczna postać jest następująca:

<script type="typ">

  tutaj kod skryptu

</script>

Parametr type jest obligatoryjny, o ile dokument ma być zgodny ze specyfikacją HTML 4 lub XHTML, i powinien wskazywać na język skryptu; w przypadku skryptów JavaScript powinien to być ciąg znaków: text/javascript:

<script type="text/javascript">

  tutaj kod skryptu

</script>

Co prawda większość dostępnych na rynku przeglądarek potrafi pracować w trybie zgodności z przestarzałymi standardami i zaakceptuje również znacznik <script> niezawierający tego argumentu, jednak nie należy takiej postaci stosować. Spotykane są również inne określenia typu skryptu, w tym application/javascript, text/ecmascript i application/ecmascript, które również są zazwyczaj poprawnie rozpoznawane przez przeglądarki. Z reguły jednak stosuje się określenie text/javascript.

Należy też wspomnieć, że dawniej parametrem określającym język skryptu był language (np. language="javascript"), nie występuje on jednak w ścisłej (strict) wersji standardu HTML 4, a także XHTML 1, i obecnie nie należy go stosować (z drugiej strony, trzeba pamiętać, że starsze przeglądarki, obsługujące standard HTML wcześniejszy niż 4.0, rozpoznają tylko parametr language, nie rozpoznają natomiast parametru type; obecnie jednak takie produkty na rynku raczej nie występują). W dalszej części kursu będzie stosowany obowiązujący standard, czyli parametr type.

Znacznik <script> może również zawierać atrybuty charset i defer. Pierwszy określa sposób kodowania znaków w skrypcie. Najlepiej, aby był taki sam jak w przypadku kodowania strony. Polecane jest kodowanie UTF-8. Drugi atrybut informuje przeglądarkę, że skrypt nie modyfikuje treści strony. W standardzie HTML 4 atrybut defer nie musi mieć żadnej wartości. Ponieważ jednak w XHTML-u atrybut musi mieć wartość, najczęściej stosuje się rozwiązanie w postaci:

defer="defer"

Znacznik <script> może więc przyjąć postać:

<script type="text/javascript" charset="utf-8" defer="defer">

  treść skryptu

</script>

Skrypty zewnętrzne

Drugą metodą umieszczenia skryptu w kodzie jest zapisanie go w oddzielnym pliku i użycie znacznika <script> z parametrem src, w ogólnej postaci:

<script type="text/javascript" src="lokalizacja skryptu">

</script>

Plik ze skryptem może mieć dowolną nazwę, zwykle przyjmuje się jednak, że ma ona rozszerzenie js. Przykładowo: aby umieścić w kodzie HTML skrypt znajdujący się w pliku skrypt.js w katalogu skrypty na serwerze http://mojadomena.com, należy zastosować konstrukcję:

<script type="text/javascript" src="http://nazwa.domeny/skrypty/skrypt.js">

</script>

Należy zwrócić uwagę, że znacznik zamykający </script> jest niezbędny i nie należy go pomijać.

Dokument ze skryptem

W jednym dokumencie można naraz umieścić kilka skryptów, zarówno osadzonych, jak i zewnętrznych. Umieszcza się je w sekcji <head> i (lub) <body>. Przykładowa struktura prawidłowego dokumentu HTML z jednym skryptem osadzonym i jednym skryptem zewnętrznym będzie miała postać przedstawioną na listingu 1.1.

Listing 1.1. Umieszczenie skryptu w dokumencie HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

  "http://www.w3.org/TR/html4/strict.dtd">

<html lang="pl">

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <meta http-equiv="Content-Script-Type" content="text/javascript">

    <title>Moja strona WWW</title>

    <script type="text/javascript" src="http://nazwa.domeny/skrypty/skrypt.js">

    </script>

  </head>

  <body>

    <script type="text/javascript">

    </script>

  </body>

</html>

W przypadku XHTML dokument będzie wyglądał tak jak na listingu 1.2.

Listing 1.2. Skrypty w kodzie XHTML

<?xml version="1.1" encoding="utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

  "http://www.w3.org/tr/xhtml11/Dtd/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">

  <head>

    <meta http-equiv="Content-Type" content="text/xhtml; charset=utf-8" />

    <meta http-equiv="Content-Script-Type" content="text/javascript" />

    <title>Moja strona WWW</title>

    <script type="text/javascript" src="http://nazwa.domeny/skrypty/skrypt.js">

    </script>

  </head>

  <body>

    <script type="text/javascript">

    </script>

  </body>

</html>

 

JavaScript. Nieoficjalny podręcznik

JavaScript.
Nieoficjalny podręcznik

JavaScript. Pierwsze starcie

JavaScript.
Pierwsze starcie

JavaScript. Praktyczny kurs

JavaScript.
Praktyczny kurs

Nowości Helionu

Statystyki

Użytkowników : 766
Artykułów : 513
Zakładki : 28
Odsłon : 15464230