Jak dodajemy CSS do strony HTML?
Jak już wiemy style CSS możemy dodawać do strony HTML na 2 różne sposoby:
- Możemy korzystać z zewnętrznych arkuszy stylów, wtedy dodajemy w obszarze tagu <head></head> element <link> w którym zawieramy ścieżkę do pliku .css
- Lub korzystamy z wewnętrznych stylów dla HTML w tym wypadku w obszarze <head></head> pomiędzy znacznikami <style></style> kodujemy style dokumentu HTML. Chociaż są dwie możliwe opcje ostylowania strony, zalecane jest utworzenie zewnętrznego arkusza stylów, spowodowane jest to większa przejrzystością oraz lepszą funkcjonalnością takiego rozwiązania.
JavaScript możemy również podobnie jak CSS, zamieścić wewnątrz dokumentu HTL – wówczas nazywamy go wewnętrznym lub możemy zawrzeć cały potrzebny kod w zewnętrznym dokumencie .js
Wewnętrzny JavaScript
Kod JavaScript umieszczamy tuż przez tagiem </head>, ale musimy pamiętać, o tym aby umieścić go pomiędzy znacznikami <script></script>. Przykład:
<script>
// kod JavaScript powinien znajdować się w tym miejscu
</script>
</head>
Zewnętrzny kod JavaScript
Działa to świetnie, ale co, gdybyśmy chcieli umieścić nasz JavaScript w zewnętrznym pliku? Zbadajmy to teraz.
Najpierw utwórz nowy plik w tym samym katalogu, co przykładowy plik HTML. Nazwij go script.js — upewnij się, że ma rozszerzenie nazwy pliku .js, ponieważ w ten sposób jest rozpoznawany jako JavaScript.Zastąp bieżący element
<script src="script.js" defer></script>Atrybut defer jest atrybutem logicznym – jego obecność decyduje o tym, że skrypt jest wykonywany po załadowaniu strony. Ten atrybut dotyczy tylko skryptów zewnętrznych (powinien być używany tylko wtedy, gdy występuje atrybut src).
Istnieje kilka sposobów na wykonanie zewnętrznego skryptu:
Jeśli występuje async: skrypt jest wykonywany asynchronicznie z resztą strony (skrypt zostanie wykonany, gdy strona będzie kontynuować ładowanie)Jeśli ani atrybut async ani defer nie wystepuje: skrypt jest pobierany i wykonywany natychmiast, zanim przeglądarka zakończy ładowanie strony.
Problemy podczas ładowania skryptu
Istnieje wiele problemów związanych z ładowaniem skryptów we właściwym czasie. Częstym problemem jest to, że cały kod HTML na stronie jest ładowany w kolejności, w jakiej się pojawia. Jeśli używasz JavaScript do manipulowania elementami na stronie (a dokładniej, Document Object Model), Twój kod nie będzie działał, jeśli JavaScript zostanie załadowany przed kodem HTML, z którym próbujesz coś zrobić. JavaScript jest ładowany i uruchamiany w nagłówku dokumentu, przed przetworzeniem treści HTML.
W wewnętrznym kodzie jest to event listener, który nasłuchuje zdarzenia „DOMContentLoaded” przeglądarki, co oznacza, że treść HTML została całkowicie załadowana i przeanalizowana. JavaScript wewnątrz tego bloku nie zostanie uruchomiony, dopóki zdarzenie nie zostanie uruchomione, dzięki czemu unika się błędu (o zdarzeniach dowiesz się w dalszej części kursu).
W przykładzie zewnętrznym do rozwiązania problemu używamy bardziej nowoczesnej funkcji JavaScript, atrybutu defer, który nakazuje przeglądarce kontynuowanie pobierania treści HTML po osiągnięciu elementu tagu.
Staromodnym rozwiązaniem tego problemu było umieszczanie elementu skryptu na samym dole treści (np. tuż przed tagiem ), aby ładował się po przetworzeniu całego kodu HTML. Problem z tym rozwiązaniem polega na tym, że ładowanie/analizowanie skryptu jest całkowicie blokowane do momentu załadowania DOM HTML. W większych witrynach z dużą ilością kodu JavaScript może to spowodować poważny problem z wydajnością i spowolnienie witryny.
Asynchroniczny i odroczony
W rzeczywistości istnieją dwie nowoczesne funkcje, których możemy użyć, aby ominąć problem skryptu blokującego — asynchroniczny i odroczony (co widzieliśmy powyżej). Przyjrzyjmy się różnicy między tymi dwom
Skrypty załadowane przy użyciu atrybutu asynchronicznego pobierają skrypt bez blokowania strony podczas pobierania skryptu. Jednak po zakończeniu pobierania skrypt zostanie uruchomiony, co blokuje renderowanie strony. Nie masz gwarancji, że skrypty będą działać w określonej kolejności. Najlepiej jest używać asynchronii, gdy skrypty na stronie działają niezależnie od siebie i nie zależą od żadnego innego skryptu na stronie.
Skrypty załadowane z atrybutem defer będą ładowane w kolejności, w jakiej pojawiają się na stronie. Nie będą one działać, dopóki cała zawartość strony nie zostanie załadowana, co jest przydatne, jeśli Twoje skrypty zależą od istniejącego modelu DOM (np. modyfikują jeden lub więcej elementów na stronie).
Po więcej informacji zapraszamy na szkolenia:
Front-end Developer – kurs zbalansowany
