Osadzenie skryptu JavaScript w dokumencie HTML
Istnieją dwa podstawowe sposoby osadzenia ("podpięcia") skryptu JavaScript do kodu HTML tworzonej witryny internetowej - poznamy obie metody, jak również przyjrzyjmy się dwóm dodatkowym atrybutom znacznika <script>
- pierwszy z nich nazywa się async
, zaś drugi to defer
.
Skrypt umieszczony wprost pomiędzy znacznikami
Po pierwsze, możliwe jest umieszczenie kodu źródłowego skryptu wprost pomiędzy znacznikami <script>
i </script>
:
<script>
alert ("Witaj Świecie!");
//kod JS znajduje się pomiędzy znacznikami script
</script>
Wadą tego rozwiązania jest słabsze rozdzielenie warstwy zawartości strony www (tagów HTML) od jej front-endowej funkcjonalności (napisanej w JavaScript).
Skrypt osadzony z zewnętrznego pliku
Po drugie, możliwe jest umieszczenie kodu źródłowego skryptu w zewnętrznym pliku z rozszerzeniem .js
, po czym zainkludowanie go w dokumencie HTML:
<script src="plik.js"></script>
Zaletą tego rozwiązania jest dobre rozdzielenie znaczników HTML od kodu JavaScript – cały skrypt "siedzi” przecież w zewnętrznym pliku.
Atrybut async
Zastosowanie tego atrybutu (wprowadzonego w HTML5) ma sens tylko w przypadku, jeśli skrypt osadziliśmy w dokumencie z zewnętrznego pliku (w sensie: w otwierającym znaczniku <script>
ustawiono atrybut src
o prawidłowej wartości). Obecność async
oznacza asynchroniczne wykonanie skryptu, czyli takie, które jest niezależne od czasu załadowania całego kodu witryny do przeglądarki (w praktyce jest to sytuacja, w której skrypt zostanie wykonany podczas dalszego wczytywania źródła strony). Zachowaniem domyślnym przeglądarki (w sytuacji, gdy nie ustawiono ani atrybutu asych
, ani defer
) jest sparsowanie i wykonanie skryptu natychmiast w linii dołączenia, zanim przeglądarka kontynuować będzie wczytywanie dalszego źródła witryny.
<script src="plik.js" async></script>
Atrybut defer
Jeżeli nie ustawiono atrybutu async
, zaś jest obecny atrybut defer
, to wówczas przeglądarka wykona zewnętrzny skrypt dopiero wtedy, gdy kod źródłowy witryny zostanie w całości wczytany do przeglądarki.
<script src="plik.js" defer></script>
Na koniec zapraszam do obejrzenia tutoriala video na temat dodatkowych atrybutów async
i defer
który znajdziesz tutaj: Short (#5) Atrybuty async oraz defer skryptu JavaScript.
Komentarze