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.

Zobacz także

Daj się zaskoczyć! Poniżej wylosowałem dla Ciebie pięć wpisów z innych kategorii blogowych aniżeli ta, którą właśnie przeglądasz:

Polecamy: Sekurak Academy 2024

Sekurak Academy 2024

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp do materiałów z edycji Sekurak Academy z roku 2023! Przy zakupie możecie skorzystać z kodu: pasja-akademia w koszyku, uzyskując rabat -30% na bilety w wersji "Standard" - warto korzystać! Więcej szczegółów znajdziecie tutaj.

Książka: Wprowadzenie do bezpieczeństwa IT

Wprowadzenie do bezpieczeństwa IT

Niedawno wystartował dodruk świetnej, rozchwytywanej książki pt. "Wprowadzenie do bezpieczeństwa IT, Tom I" (około 940 stron). Mamy dla Was kod: pasja (wpisz go w koszyku), dzięki któremu otrzymacie 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla naszych Widzów! Jest to pierwszy tom serii o ITsec, który wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

Pomóż dzieciom

Polska Akcja Humanitarna od wielu lat dożywia dzieci. Proszę, poświęć teraz dosłownie chwilę i pomóż klikając w oznaczony strzałką zielony brzuszek Pajacyka. Dziękuję!

Komentarze

Disqus
Bądź na bieżąco
Pasja informatyki