Kurs obiektowego JavaScript (27)

Autor: Damian Chodorek • Opublikowany: 19 października 2014 • Ostatnia aktualizacja: 8 lutego 2015 • Kategoria: javascript, kursy

Jak dołączyć kod JS do strony HTML? Poznaj modele BOM i DOM.

Aby móc korzystać z JavaScript w swojej stronie WWW, należy go jakoś dołączyć. Służy do tego specjalny tag <script>.

<script type="text/javascript" src="plik.js" > </script>

Powyższy przypadek zakłada, że Twój kod JS umieszczony jest w zewnętrznym pliku o nazwie plik.js. Jest również sposób na bezpośrednią wstawkę JS w kodzie HTML. Przykład poniżej.

<script type="text/javascript">
  var k="Skrypt JS działa!";
  alert(k);
</script>

Ten sposób jest jednak niezalecany ponieważ zostają wymieszane dwa elementy: treść i zachowanie. Ogólnie rzecz ujmując, chcemy trzymać je osobno. To znaczy, że kod CSS, JS oraz HTML powinien być w osobnych plikach. Ułatwia to późniejsze modyfikacje i zrozumienie kodu.

Ważne jest zapamiętanie, że przeglądarka wykonuje kod JS w sekwencyjnie w takiej kolejności, w jakiej go napotka. Czyli jeśli w kodzie HTML dodasz trochę kodu JS, potem dołączysz plik ze skryptem, a potem znów w HTML’u wpiszesz trochę kodu, to kolejność wykonania będzie taka: Twój kod w HTML’u, kod z pliku, dalszy kod w HTML’u.

Z tego powodu należy uważać, aby zmienne globalne nie nazywały się tak samo. Pomimo, że zmienna będzie użyta w różnych miejscach (np. różne pliki JS), to będzie widziana przez przeglądarkę jako jedna i ta sama zmienna.

BOM oraz DOM

JavaScript ma w przeglądarce dostęp do wielu obiektów. Dzielą się one na dwie główne kategorie:

  • obiekty związane typowo ze stroną HTML,
  • obiekty powiązane z całą resztą, np. okno przeglądarki, ekran monitora.

Pierwsza kategoria obiektów tworzy model DOM (Document Object Model), a druga BOM (Browser Object Model).

DOM

Jest standardem zarządzanym przez organizację W3C. Posiada różne wersje: DOM Level 1, DOM Level 2 oraz DOM Level 3. Niestety nie jest on tak samo przestrzegany we wszystkich przeglądarkach. Mają one różną zgodność, ale prawie wszystkie niemal w całości, implementują DOM Level 1.

BOM

Z kolei ten model nie jest standardem. To zwykły zbiór obiektów wspieranych przez przeglądarki. Niestety skoro nie jest standardem, przeglądarki posiadają pewne różnice jeśli chodzi o implementację tego modelu.

W tym kursie omówię jedynie te elementy, które są zgodne w najważniejszych przeglądarkach.

Kolejne lekcje będą więc poświęcone przybliżeniu Ci modeli BOM i DOM.

W tym artykule to wszystko. Przejdź do następnej części:

Kurs obiektowego JavaScript (28)

Zobacz również
Kurs obiektowego JavaScript (25)Wstęp do dziedziczenia w JS.
Kurs obiektowego JavaScript (26)Dostęp do klasy nadrzędnej. Więcej sposobów dziedziczenia.
Kurs obiektowego JavaScript (28)Dokładniejsze omówienie modelu BOM. Obiekt window.
Kurs obiektowego JavaScript (29)Model DOM. Sposoby nawigowania po węzłach drzewa.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.