Wstawianie skryptów JavaScript na stronę www może być wykonane na dwa sposoby:

Za pomocą znaczników  <script>...</script>  wstawionych w dowolnym miejscu w treści strony.

Przez umieszczenie kodu skryptu w osobnym pliku oraz przyłączenie go w nagłówku strony.

Pierwszy sposób jest łatwiejszy i stosowany jest przy implementacji krótkich nieskomplikowanych skryptów, potrzebnych najczęściej tylko na jednej podstronie. Dzięki temu nie trzeba zastanawiać się nad zarządzaniem dodatkowymi plikami. Niemniej, jeśli nasz skrypt się rozrasta, lub jest wykorzystywany w wielu podstronach, zaciemnia on kod naszych stron i spowalnia ich ładowanie.

Ponadto wprowadzanie poprawek w takich skryptach musiałoby być wykonywane na każdej podstronie, a to byłoby urwanie głowy dla programisty. W takich przypadkach lepiej jest umieścić skrypt w osobnym pliku, który jest raz pobierany z serwera i od tej pory każda podstrona może się do niego odwoływać.

Do skryptu można się odwołać także przez wyrażenia odpowiedzialne za obsługę zdarzeń, oraz odwołanie do pseudo-adresu javascript:skrypt. Z racji tego, że ich dokładny opis znajdziecie w rozdziale odpowiedzialnym za obsługę zdarzeń, tu wspominam o nich tylko dla zasady.

Wstawianie skryptów JavaScript w kodzie strony.

Znaczniki  <script> </script> informują przeglądarkę o tym, że kod zawarty wewnątrz nich nie jest kodem html i powinien być inaczej interpretowany przez przeglądarkę.

Część type="text/javascript"  zawiera informację na temat języka skryptu. Ten sam atrybut jest używany przy dodawaniu stylów css ( <style type="text/css"></style> ), więc nie wprowadzam tu nic nowego:). Atrybut type  w znaczniku  <script> jest obowiązkowy dla HTML4, w HTML 5 można go pominąć.

Jeśli stosujemy standard (X)HTML Transitional, możemy zastąpić atrybut type atrybutem language i zamiast pisać go przy każdym skrypcie wstawianym na stronę, umieścić tylko na początku danej strony, np:

Jest on już jednak przestarzały, zalecam więc stosowanie atrybutów type lub samego znacznika <script>, aby być na bieżąco ze standardem (X)HTML. W razie pytań na temat składni HTML5 odsyłam do dokumentacji.

Pierwszy skrypt

Nadszedł czas, żeby napisać ponadczasowy program Hello World w javaScript. Jeśli wpiszecie go do treści strony, zostanie on wykonany automatycznie przy każdym ładowaniu strony.

Ach, wspomnę jeszcze, dlaczego żaden ze skryptów, które umieścicie w komentarzach nie działa. Żeby zabezpieczyć się przed dziesiątkami okien Hello World! wyskakujących automatycznie za każdym razem kiedy ktoś chce obejrzeć jakiś mój wpis, napisałem skrypt, który znaki < i > które umieszczane są w komentarzach po obu stronach „script”, zamienia na &lt; oraz &gt;. Wyjaśnienie tej operacji, wraz z toutorialem jak to zrobić, zamieściłem w artykule: „Zamiana tekstu HTML w komentarzach„. A teraz wracamy do kursu:

Kliknij tutaj, żeby zobaczyć efekt.

Funkcja alert() ; wyświetla okno z napisem podanym jako jej argument. Jeśli chcielibyśmy po prostu napisać „Hello world!” w danym miejscu strony, wystarczy użyć instrukcji document.write('Hello World!');

Znaki //  rozpoczynają liniowy komentarz w javaScript. Komentarze omówiłem w następnym artykule kursu, także odsyłam do niego.

Wstawianie skryptów z pliku

Drugim sposobem wstawiania skryptu jest dołączenie zewnętrznego pliku, który zawiera nasz kod. Deklaracja skryptu jest podobna, jak przy wstawianiu w treści strony, jednak znacznik <script> zawiera dodatkowy atrybut „src” z przypisaną ścieżką dostępu do pliku. Ładowany plik ma rozszerzenie *.js i powinien zawierać kompletny skrypt bez znaczników <script>  i </script> .

Teoretycznie załadować plik możemy także w dowolnym miejscu strony, lecz aby plik był dostępny na wszystkich stronach, powinniśmy go umieścić w nagłówku strony. Wygląda to w ten sposób.

a w pliku:  script.js

W ten sposób skrypt zostanie dołączony do naszej strony podczas jej ładowania. Na koniec ładowania strony zostanie wywołane zdarzenie onload i od tej pory instrukcja document.write()  usunie zawartość strony i zacznie tworzenie nowej, już z wyświetlonym napisem.

Coś więcej

Można do skryptu odwołać się także przez zdarzenia, oraz pseudolinki – tego ostatniego sposobu użyłem przy stworzeniu odnośnika do skryptu w pierwszym przykładzie. Dokładne informacje na temat tych sposobów dostępu do skryptów zamieszam w artykule poświęconym zdarzeniom, tutaj wspominam o nich jedynie dla dopełnienia artykułu. Składnia wygląda tak:

Przykład zdarzenia: Kliknij.

To tyle na dzisiaj, zapraszam do przeczytania moich kolejnych artykułów. Jeśli masz z czymś problem, śmiało napisz o tym w komentarzu.

<< Wprowadzenie   Wstawianie skryptów >>
Sekrety Produktywności

Sekrety Produktywności

DARMOWE szkolenie mailingowe! 10 porad jak zwiększyć produktywność w programowaniu.

Dziękujemy za zapisanie się na kurs. Wkrótce otrzymasz wiadomość email z potwierdzeniem zapisu.

Zapisz się na Newsletter!

Zapisz się na Newsletter!

Dołącz do naszej listy mailingowej by otrzymywać wiadomości o najnowszych artykułach!



Gratulacje, zapisaliśmy Cię na listę!