Wstawianie skryptu na stronę

Kod programu JavaScript umieszczamy pomiędzy znacznikami:

<script> [tutaj znajduje się twój program] </script>.

Powyższe dotyczy standardu HTML5. Jeżeli piszemy stronę przy użyciu standardu HTML4, trzeba użyć następującego atrybutu:

<script type="javascript"> [tutaj znajduje się twój program] </script>.

Przypomnę, że podstawowa struktura dokumentu HTML5 jest następująca:

<html>

<head>
<title> Tytuł strony </title>
</head>

<body>
// tutaj jest treść strony
</body>

</html>

Dokument html jest zawarty między znacznikami <html> ... </html>, nagłówek strony pomiędzy znacznikami <head> ... </head>, natomiast treść strony pomiędzy znacznikami <body> ... </body>.

Gdzie zatem wstawiamy nasz kod, aby działał prawidłowo?

Skrypt umieszczany bezpośrednio na stronie

W takim przypadku kod możesz umieścić w dowolnym miejscu między znacznikami <script></script>. Pamiętaj jednak, że najlepiej dodać skrypt tuż przed znacznikiem </body>, a więc na końcu strony. Dzięki takiemu rozwiązaniu elementy związane z treścią wczytają i wyrenderują się w przeglądarce jako pierwsze (co jest bardzo istotne z punktu widzenia zainteresowania odbiorcy informacją), a elementy interakcyjne wczytają się na końcu. Poza tym w skryptach korzystamy z elementów strony, które powinny się już zaczytać do przeglądarki, zanim wykonamy na nich jakieś operacje.

Możesz dodawać wiele skryptów na jedną stronę. A więc nasz kod może wyglądać tak:

<html><head>
	<title> Tytuł strony </title>
</head><body>
// tutaj jest treść strony
<script> [tutaj znajduje się twój program nr 1] </script>
<script> [tutaj znajduje się twój program nr 2] </script>
</body>
</html>

Umieszczanie skryptów w oddzielnym pliku

Każdy program napisany w JavaScript można zapisać w oddzielnym pliku z rozszerzeniem js i można wówczas wczytać go, używając atrybutu src.

Jeżeli nasz skrypt zapisaliśmy w zwykłym pliku tekstowym program.js, to najlepiej w sekcji <head> (choć nie jest to obowiązująca reguła), nalezy użyć następującej składni:

<script src="program.js"></script>

Należy pamiętać, że na serwerze plik HTML i program.js muszą się znajdować w tym samym katalogu.

Korzystanie z plików zewnętrznych ma podstawową zaletę. Wiele stron możne korzystać z tego samego kodu, a konieczność zmiany programu nie pociąga za sobą konieczności zmiany kodu wielu stron.

Wadą takiego rozwiązania jest wolniejsze ładowanie strony przy zaczytywaniu kodu z pliku zewnętrznego. Ma to szczególne znaczenie dla stron mobilnych.

Ścieżki dostępu, URL do skryptu

W atrybucie src możemy podać nazwę skryptu, który znajduje się w tej samej lokalizacji. Jeżeli skrypt umieścimy w oddzielnym katalogu (co jest dobrym nawykiem dla utrzymania porządku i przejrzystości), to wówczas podajemy ścieżkę do lokalizacji skryptu.

Możemy też podawać ścieżkę do skryptu, który wcale nie znajduje się na naszym serwerze. Należy podać wówczas pełny adres do takiego skryptu.

Przykład

Skrypt moj_program1.js znajduje się w katalogu Skrypty, natomiast skrypt createjs-2015.11.26.min.js znajduje się pod adresem https://code.createjs.com/createjs-2015.11.26.min.js. Dodatkowo w treści strony umieszczamy prosty program nr 1. Używamy wówczas następującej notacji:

<html><head>
<title> Tytuł strony </title>
<script src="Skrypty/moj_program1.js"></script>
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
</head><body>
// tutaj jest treść strony
<script> [tutaj znajduje się twój program nr 1] </script>
</body></html>

Inne zagadnienia z tej lekcji

JavaScript - wymagania

Wymagania dla JavaScript, czyli co jest potrzebne, aby rozpocząć przygodę programowania z JavaScript. Opis narzędzi oraz konfiguracja przeglądarek internetowych

JavaScript - podstawowe informacje

JavaScript - komunikacja z serwerem i obiektowość języka. Kilka zagadnień, które nie zostały poruszone we wstępie, a których znajomość jest bardzo przydatna na każdym etapie nauki języka programowania.

Pierwszy program w JavaScript

Kurs JavaScript - pierwszy program. Omówienie kolejno kod programu, nowych instrukcji i prezentowanie kodu programu. Kod zawsze można pobrać z naszej strony.

Komentarze w JavaScript

Jak stosować komentarze w kodzie JavaScript? Stosowanie komentarzy jest bardzo dobrym zwyczajem. Podczas pisania kodu wydaje się on nam jasny.