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:

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

Czy macie jakieś pytania, sugestie, uwagi? A może zauważyliście literówkę albo błąd? Dajcie koniecznie znać: kontakt@pasja-informatyki.pl. Dziękujemy za poświęcony czas - to dzięki Wam serwis staje się coraz lepszy!

Kategorie wpisów

Oto polecana książka warta Waszej uwagi.
Pełna lista polecanych książek jest tutaj.

W dniach od 13.06.2024 do 17.06.2024 trwa w Videopoint.pl promocja urodzinowa - oprócz wielu zniżek mamy też możliwość odebrania darmowego kursu! Można odebrać jeden videokurs z trzech: 1. "Mały szachista"; 2. "Wejście w świat IT"; 3. "Angielski dla inżynierów i techników". Warto korzystać - Zobacz promocję na 9 urodziny Videopoint.pl

Bądź na bieżąco
Pasja informatyki