Wstawianie skryptów na stronę WWW - Kurs języka JavaScript

Skrypt JavaScript można umieścić na stronie na dwa podstawowe sposoby: umieścić go bezpośrednio w treści strony, lub umieścić go w zewnętrznym pliku, który następnie będzie dołączony do strony. Obydwa sposoby mają swoje wady i zalety: pierwszy z nich jest łatwiejszy, gdyż nie trzeba się bawić z dodatkowymi plikami. Jest on jednak niewygodny, gdy ten skrypt musi być umieszczony na wielu stronach - konieczność wprowadzenia tej samej poprawki do skryptu w wielu plikach to nie jest to co tygrysy lubią najbardziej ;). Dlatego też w takich przypadkach warto umieścić skrypt w osobnym pliku; to rozwiązanie ma też tą zaletę, że przeglądarka wczyta taki plik z serwera przy wyświetleniu pierwszej strony, i przy kolejnych stronach już nie będzie go ponownie ściągać z serwera. Dzięki temu strony będą mniejsze i będą się szybciej ładować.

Dodatkową metodą umieszczania skryptów jest użycie jako wartości atrybutów onXXX służących do obsługi zdarzeń na stronie, lub jako wartość pseudo-adresu javascript:skrypt. Więcej o tych sposobach znajdziesz poniżej.

Znacznik służący do umieszczania skryptów na stronie to <script> </script>. Posiada on obowiązkowy atrybut type, który określa typ MIME języka skryptu (dla JavaScript jest to text/javascript. Atrybut ten jest wymagany gdy stosujesz standard (X)HTML Strict

W przypadku (X)HTML Transitional możesz alternatywnie zastosować starszy atrybut language. Atrybut ten powinien mieć przypisaną wartość javascript. Zalecam jednak stosowanie atrybutu type aby być bardziej zgodnym ze standardem (X)HTML.

Najprostszy skrypt wygląda następująco:

<script type="text/javascript">
<!--
alert("Hello World!");
//-->
</script>

Kliknij aby zobaczyć przykład

W dalszej części kursu nie będę już stosował w przykładach znaczników <script>...</script>, zatem te przykłady będą wyglądały następująco:

alert("Hello World!");

Wstawienie powyższego skryptu na stronę spowoduje że w momencie ładowania strony pojawi się okienko z komunikatem "Hello World!" (takie jak po kliknięciu linku poniżej skryptu).

Cały skrypt JavaScript umieszczony wewnątrz znacznika <script>...</script> został dodatkowo otoczony komentarzem HTML. Dzięki czemuś takiemu przeglądarki które nie wspierają JavaScript zignorują cały skrypt ponieważ jest on umieszczony wewnątrz komentarza. Gdyby komentarza nie było, to przeglądarka wyświetliłaby kod skryptu na stronie WWW, co jest raczej mało pożądane. Z tego powodu warto skrypty umieszczać wewnątrz komentarzy HTML.

Przed znacznikiem kończącym komentarz HTML (czyli -->) umieszczone jest dodatkowo dwa slashe "//" - w ten sposób rozpoczyna się komentarz w JavaScript. Jest on tu umieszczony dlatego ponieważ koniec komentarza HTML jest niepoprawną instrukcją JavaScript, więc przeglądarka mogłaby zacząć zgłaszać błędy lub nie chcieć wykonać skryptu. Dzięki takiemu trikowi wszystko będzie działać poprawnie.

Wspomniane dwa slashe "//" rozpoczynają komentarz, który kończy się na końcu linii - wszystko co znajduje się poza tymi dwoma shashami jest ignorowane. Istnieje jeszcze drugi rodzaj komentarza, tzw. komentarz blokowy. Rozpoczyna się on slashem i gwiazdką "/*", a kończy gwiazdką i slashem "*/". Komentarz taki może się rozciągać na wiele linii, zatem jest to wygodny sposób tymczasowego wyłączenia wykonywania fragmentów skryptu w trakcie ich pisania. W przykładzie poniżej dodatkowe gwiazdki wstawione zostały tylko po to aby komentarz ładniej wyglądał :)

// To jest komentarz
/*****************************
 * To                        *
 * też                       *
 * jest                      *
 * komentarz                 *
 *****************************/

Pokazany wcześniej skrypt wyświetlał okienko z komunikatem za pomocą funkcji alert(). Funkcja ta przyjmuje tutaj jeden parametr - tekst który ma zostać wyświetlony w okienku. Parametry funkcji (tutaj jest tylko jeden) należy podawać w nawiasach okrągłych (rozdzielone przecinkami, jeżeli ich jest więcej). Każda komenda musi być zakończona znakiem średnika ";".

Drugą metodą pozwalającą umieścić skrypt JavaScript na stronie jest wczytanie go z zewnętrznego pliku. Plik ten powinien zawierać cały skrypt JavaScript (bez znaczników <script> i komentarza HTML). Pliki ze skryptami JavaScript zazwyczaj mają rozszerzenie nazwy .js (np. skrypt.js). Taki plik ze skryptem można załadować stosując również znacznik <script>. W tym przypadku jednak znacznik ten będzie pusty w środku. Zamiast tego należy podać dodatkowy atrybut src określający ścieżkę (lub adres url) do pliku ze skryptem:

<script type="text/javascript" src="skrypt.js"></script>

Znacznik <script> można umieścić na stronie wewnątrz znacznika <head> lub wewnątrz znacznika <body>. Przyjęło się iż wewnątrz znacznika <head> umieszcza się skrypty które będą używane później (np. wykorzystywane później funkcje), zaś w sekcji <body> umieszcza się skrypty które mają za zadanie modyfikować (np. poprzez drukowanie czegoś) wygląd strony HTML w trakcie jej ładowania:

<script type="text/javascript">
<!--
document.write("<b>Hello World!</b>");
//-->
</script>

W powyższym przykładzie użyłem funkcji document.write() która służy do drukowania dowolnego fragmentu kodu HTML.

W przypadku jak powyżej, gdy skrypt np. coś drukuje, warto zadbać o przeglądarki które nie obsługują lub mają wyłączony JavaScript (oraz także o wyszukiwarki) poprzez dostarczenie im alternatywnej treści do wyświetlenia zamiast wyniku działania skryptu. Służy do tego znacznik <noscript> </noscript>, który należy umieścić poniżej wstawionego skryptu:

<script type="text/javascript">
<!--
document.write("<p><b>Hello World!</b></p>");
//-->
</script>
<noscript>
<p><b>Hello World!</b></p>
</noscript>

W podany powyżej sposób można drukować do momentu aż strona załaduje się do końca (wtedy zostanie wygenerowane zdarzenie onload). Po zakończeniu ładowania się strony wywołania document.write() spowodują usunięcie obecnie załadowanej strony, i rozpoczęcie tworzenia nowej. Dlatego też do modyfikacji wyglądu strony po jej załadowaniu należy użyć innych metod, które operują na drzewie dokumentu DOM (Document Object Model).

Dwa kolejne sposoby umieszczania skryptów to zdarzenia oraz adresy url rozpoczynające się od javascript:. Obydwa sposoby opiszę dokładniej w rozdziale opisującym Zdarzenia w JavaScript. Tutaj podam tylko ich składnię:

<p onclick="alert('Cześć!')">Kliknij tutaj</p>
<p><a href="javascript:alert('Hello!')">Kliknij tutaj</a></p>

W tej lekcji kursu podawałem pełne przykłady skryptów (razem ze znacznikami <script> </script>). W kolejnych lekcjach zazwyczaj nie będę już ich podawał - pamiętaj zatem aby samemu je dodać do skryptów które chcesz samemu sprawdzić.

Wykop tą stronę! >>>