JavaScript (front-end) | Artykuł

Osadzenie skryptu JavaScript w dokumencie HTML

MIROSŁAW ZELENT

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.