Jak już pewnie wiesz JavaScript, jest językiem stworzonym na potrzeby stron i aplikacji internetowych, a co za tym idzie, musi istnieć jakiś sposób na to, aby kod JavaScript umieścić w kodzie HTML — w tej lekcji dowiesz się jak to zrobić.
Osadzenie kodu JavaScript w HTML
Najprostszym sposobem na to, aby umieścić kod JavaScript w naszym kodzie HTML jest skorzystanie z tagów <script></script>. Wszystko, co jest umieszczone pomiędzy tagami <script></script> jest traktowane jako kod JavaScript.
Elementy <script></script> możemy umieścić w blokach head oraz body jednak miejsce, gdzie umieścimy nasz kod JavaScript, ma znaczenie.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript w przeglądarce</title>
</head>
<body>
<script>
console.log("Hello World");
</script>
</body>
</html>Miejsce osadzenia kodu JavaScript ma znaczenie
Z racji tego, że kod HTML oraz JavaScript jest parsowany (czytany) od góry do dołu – linijka po linijce to miejsce, w którym osadzimy kod JavaScript, ma duże znaczenie.
Kiedy nasz kod JavaScript jest umieszczony w sekcji head, może dojść do sytuacji gdzie strona lub aplikacja internetowa, zamiast wyrenderować (wyświetlić) kod HTML zajmuje się wykonaniem skryptu JavaScript, co w efekcie może skutkować wolnym ładowaniem się strony lub błędami spowodowanymi brakiem nie wyrenderowanych jeszcze elementów kodu HTML, na których chcemy operować.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Miejsce umieszczenie kodu na znaczenie</title>
<script>
const elementOne = document.querySelector('#one');
console.log(elementOne); // null
</script>
</head>
<body>
<div id="one"></div>
<div id="two"></div>
<script>
const elementTwo = document.querySelector('#two');
console.log(elementTwo); // element div
</script>
</body>
</html>W powyższym kodzie umieściłem dwa elementy script — jeden w sekcji head a drugi na końcu sekcji body.
Kod JavaScript w obu tych elementach ma za zadanie odnaleźć konkretne elementy o identyfikatorach one oraz two.
Kod osadzony w sekcji head nie jest w stanie wykonać tego zadania i w związku z tym zmienna elementOne zawiera wartość null. Dzieje się tak, ponieważ kod uruchomiony w sekcji head zostanie wykonany wcześniej niż kod HTML zawierający informacje o elementach one oraz two.
Kod JavaScritp umieszczony na końcu sekcji body bez problemu odnalazł swój element gdyż został on wykonany po kodzie HTML odpowiadajacym za elementy one oraz two.
Pamiętaj! Z kodem JS oraz HTML pracuj w myśl zasady najpierw wyrenderuj kod HTML, a następnie zajmij się interpretacją i wykonaniem kodu JavaScript i właśnie dlatego najlepszą praktyką jest umieszczenie kodu JavaScript odpowiedzialnego za działanie strony lub aplikacji na samym końcu sekcji body.
Uwaga! Czasami umieszczenie kodu JavaScript w sekcji head jest uzasadnione i zazwyczaj ten wyjątek dotyczy zewnętrznych bibliotek takich jak np. jQuery lub integracji z usługami takimi jak Google Analytics.
Separation of Concerns (SoC)
W momencie, gdy nasz kod JavaScript zaczyna być dosyć obszerny i zawiera kilkaset lub nawet kilka tysięcy linii to praca nad nim może być, delikatnie mówiąc utrudniona, a gdy dodamy do tego jeszcze kod HTML, to zaczyna nam się robić mały bałagan, który powolutku może przerodzić się w niezły horror.
Separation of Concerns (SoC) to zasada projektowa, która namawia do stosowania tzw. podziału odpowiedzialności. W praktyce oznacza to podział programu na mniejsze oddzielone od siebie elementy, które połączone tworzą jedną spójną całość.
W kontekście HTML i JS oznacza to oddzielenie kodu HTML od kodu JavaScript w taki sposób, że kod JavaScript piszemy w oddzielnym pliku z rozszerzeniem .js i dołączamy go do naszego pliku .html. (Dokładnie tak jak w przypadku HTML i CSS).
Aby dołączyć plik z kodem JavaScript do kodu HTML to w elemencie <script></script> musimy dodać atrybut src ze ścieżką do pliku JavaScript który chcemy dołączyć.
Kod JavaScript – app.js
console.log('Oddzielny plik JavaScript')Kod HTML z załadowanym plikiem app.js
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Oddzielenie JS od HTML</title>
</head>
<body>
<script src="app.js"></script>
</body>
</html>Podsumowanie
- Kod JavaScript możemy umieścić w elemencie script oraz w oddzielnym pliku .js,
- Miejsce umieszczenie kodu JavaScript ma znaczenie,
- Dobrą praktyką jest umieszczenie kodu JavaScript na końcu sekcji body,
- Zasada SoC to oddzielenie kodu JavaScript od HTML