Skrypty w Języku HTML

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>