Wstawiamy pierwszy skrypt na naszą stronę

Do umieszczenia skryptów na stronie służy znacznik <script>:


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Odit quia aspernatur optio recusandae, atque, reiciendis
    tempore doloremque temporibus aliquid nemo vitae sint?

    <script>
        console.log("Nasz pierwszy skrypt!");
    </script>
</body>
</html>

Umieszczanie skryptów w oddzielnym pliku

Skrypty możemy wstawiać na stronę na 2 sposoby:

  • bezpośrednio w kodzie html (jak na powyższym przykładzie)
  • w oddzielnych plikach .js

Wyobraź sobie, że tak jak w tym kursie chcesz za pomocą JS obsłużyć menu strony.
Gdybyś wstawiał ten skrypt w kod każdej podstrony z osobna, trochę by ci to zajęło.

Gorzej, gdy za jakiś czas ktoś wyśle tobie maila, że masz w tym skrypcie literówkę. Musiałbyś na nowo przeglądać kod wszystkich podstron, poprawiać i dłubać. Da się? Da - tylko po co.

Rozwiązaniem tego problemu jest trzymanie skryptów w oddzielnych plikach .js, a następnie dołączanie ich do strony (czyli podobnie jak w przypadku np plików css).

Gdy dołączasz skrypt z pliku, wszystko masz w jednym miejscu. Poprawiasz literówkę i poprawione będzie na każdej podstronie, na ktorej ten plik jest dołączany.
Co więcej, od razu wiadomo w jakim miejscu ten skrypt jest - co nie zawsze jest wiadome, gdy kawałki skryptów są rozrzucone po bardzo długich HTML.

Aby przyłączyć plik ze skryptami do naszej strony powinniśmy zastosować dodatkowy atrybut src. Cała treść skryptu powinna trafić do dołączanego pliku js:


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Odit quia aspernatur optio recusandae, atque, reiciendis
    tempore doloremque temporibus aliquid nemo vitae sint?

    <script src="plik_ze_skryptem.js"></script>
</body>
</html>

Gdzie wstawiać nasze skrypty

Skrypty możesz wrzucać w różne miejsca na stronie. Najczęściej spotykanymi miejscami są sekcja HEAD i koniec sekcji BODY:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Document</title>

        <script src="modernizr.js"></script>
    </head>
    <body>
        ..treść strony...

        <script src="super-script.js"></script>
    </body>
</html>

Wybór miejsca wiąże się z dwiema kwestiami.
Pierwsza z nich tyczy się zasady, która mówi o tym, by użytkownik dostawał w pierwszej chwili treść strony. Cała interakcja (JS), dodatki itp powinna być wysyłana w drugiej kolejności. Ta treść nie powinna być blokowana przed jak najszybszym wyświetleniem, stąd koniec strony to dobry wybór na umieszczenie skryptów.

Druga sprawa tyczy się samych skryptów. Bardzo często będziesz chciał w nich działać na konkretnych elementach strony. Przykładowo zapragniesz pokazać przycisk, ukryć formularz, pokazać użytkownikowi jakieś okienko itp. Jeżeli twój skrypt zostanie wczytany przed takim elementem (czyli w kodzie HTML będzie się znajdował przed takim elementem HTML), a nie posiada żadnych metod do wykrywania czy cała strona została już wczytana, to dostaniesz błąd wynikający z tego, że skrypt ten nie widzi elementu.

Atrybuty async i defer

Do znacznika script możesz dodać dwa atrybuty: async lub defer:


<script src="..." defer></script>
<script src="..." async></script>
<script src="..." async defer></script>

Przeglądarka czyta kod strony od góry do dołu. Gdy natrafi na dołączony skrypt, wstrzymuje ładowanie reszty strony aż do momentu całkowitego wczytania skryptu. Po wczytaniu całego pliku odpalany jest skrypt i wczytywana jest dalsza część strony. Przy malutkich skryptach nie ma to raczej znaczenia. Ale przy większych skryptach może to powodować zauważalne blokowanie wczytywania strony.

Aby zapobiec takiemu blokowaniu stosuje się właśnie wspomniane atrybuty.

Atrybut async powoduje, że jeżeli przeglądarka czytając kod strony natrafi na plik ze sryptem zacznie go wczytywać tle, ale równocześnie będzie czytać dalszą część kodu strony. Jeżeli cały plik ze skryptem się wczyta, wtedy kod zostanie odpalony.

Atrybut defer działa podobnie. Plik ze skryptem też będzie wczytywany w tle. Różnica jest taka, że jeżeli przeglądarka wczyta już cały plik ze skryptem, przeniesie go na koniec strony (tak jakby był załączony tuż przed zamknięciem body).

Taka jest teoria. W praktyce przeglądarki różnie implementują te znaczniki

Z tego też powodu czasami spotkasz się ze znacznikami script, które nie tylko posiadają async i defer, ale też umieszczone są na końcu pliku.

Najlepszym rozwiązaniem jest umieszczać skrypty na końcu kodu strony. Czy to ze wspomnianymi atrybutami, czy bez nich - umieszczajmy nasze skrypty tuż przed zamknięciem body. Są od tego nieliczne wyjątki, ale przyjmijmy, że to podejście będzie dla nas najwłaściwsze.

Bardzo dobry artykuł na temat tych atrybutów znajdziesz pod adresem http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html

Komentarze

W javascript istnieją 2 rodzaje komentarzy: komentarze zajmujące jedną i wiele linii:


/*
Przykład komentarza składającego się z wielu linii.
Taki komentarz może zawierać wiele linii.
*/
console.log('To jest mój pierwszy skrypt');

//To jest przykład komentarza 1-liniowego
console.log('To jest mój pierwszy skrypt')

/*
Skrypt wypisujący różne rzeczy w konsoli
Wykorzystuje do tego celu console debugera
*/

console.log('To jest mój pierwszy skrypt'); //to jest pierwsza linia
console.log('To jest mój pierwszy skrypt'); //to jest druga linia

Nie bój się komentować swój kod. Dzisiaj może będziesz wiedział do czego dany kod służy. Ale za pół roku do niego wrócisz i będziesz musiał się zastanawiać czemu służyła dana funkcja...

Trening czyni mistrza

Poniżej zamieszczam kilka zadań, które w ramach ćwiczenia możesz wykonać:

  1. Wstaw na stronę skrypt inline (skrypt pisany bezpośrednio w kodzie strony). W skrypcie wypisz w konsoli "To mój pierwszy skrypt"
  2. Stwórz plik first_script.js i dołącz go do strony (na końcu body). W pliku tym wypisz w konsoli debugera "To mój drugi skrypt".
  3. Będąc w debugerze przejdź do konsoli i wpisz
    console.log("Witaj świecie!");
    i naciśnij enter. Co się stało?
  4. Stwórz w swoim skrypcie 2 rodzaje komentarzy.