[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.89,0:00:06.05,Default,,0000,0000,0000,,W kolejnych odcinkach często\Nbędę używać skrótu "DOM".
Dialogue: 0,0:00:06.75,0:00:08.28,Default,,0000,0000,0000,,Dom, dom, dom.
Dialogue: 0,0:00:09.98,0:00:15.40,Default,,0000,0000,0000,,DOM to obiektowy model dokumentu\N(Document Object Model).
Dialogue: 0,0:00:15.50,0:00:17.10,Default,,0000,0000,0000,,Z jego pomocą przeglądarki
Dialogue: 0,0:00:17.20,0:00:21.37,Default,,0000,0000,0000,,pozwalają projektantom\Nzmieniać strony poprzez JavaScript.
Dialogue: 0,0:00:21.47,0:00:23.66,Default,,0000,0000,0000,,Ładując stronę internetową,
Dialogue: 0,0:00:23.76,0:00:26.59,Default,,0000,0000,0000,,przeglądarka analizuje HTML i CCS,
Dialogue: 0,0:00:26.69,0:00:29.42,Default,,0000,0000,0000,,i konwertuje dokument w DOM.
Dialogue: 0,0:00:30.24,0:00:33.90,Default,,0000,0000,0000,,Ten DOM - to duży obiekt JavaScript,
Dialogue: 0,0:00:34.00,0:00:37.52,Default,,0000,0000,0000,,zawierający wszystko, co chcemy\Nwiedzieć o stronie
Dialogue: 0,0:00:37.62,0:00:42.04,Default,,0000,0000,0000,,lub w niej zmienić.\NKażdy tag, jego atrybut i styl.
Dialogue: 0,0:00:43.14,0:00:45.50,Default,,0000,0000,0000,,Żeby wejść do DOM-u na stronie,
Dialogue: 0,0:00:45.60,0:00:50.42,Default,,0000,0000,0000,,z poziomu JavaScript, korzystamy\Nz globalnej zmiennej "document".
Dialogue: 0,0:00:50.52,0:00:52.95,Default,,0000,0000,0000,,Możemy używać właściwości
Dialogue: 0,0:00:53.06,0:00:56.39,Default,,0000,0000,0000,,i przywoływać funkcje\Npowiązane z tym obiektem.
Dialogue: 0,0:00:57.52,0:01:01.42,Default,,0000,0000,0000,,Generalnie modyfikacji DOM-ów
Dialogue: 0,0:01:01.52,0:01:04.13,Default,,0000,0000,0000,,dokonujemy w dwóch krokach.
Dialogue: 0,0:01:04.23,0:01:07.61,Default,,0000,0000,0000,,Wypiszę je tutaj.
Dialogue: 0,0:01:09.31,0:01:13.45,Default,,0000,0000,0000,,Już... I drugi krok.
Dialogue: 0,0:01:14.90,0:01:17.44,Default,,0000,0000,0000,,Omówmy teraz każdy z nich.
Dialogue: 0,0:01:17.54,0:01:20.43,Default,,0000,0000,0000,,Pierwszy krok - to znaleźć węzeł DOM-u
Dialogue: 0,0:01:20.53,0:01:22.57,Default,,0000,0000,0000,,z użyciem metody dostępu.
Dialogue: 0,0:01:23.59,0:01:26.08,Default,,0000,0000,0000,,Jeśli szukamy tylko tagu "body",
Dialogue: 0,0:01:26.18,0:01:28.98,Default,,0000,0000,0000,,łatwo zyskamy dostęp do niego,
Dialogue: 0,0:01:29.08,0:01:32.17,Default,,0000,0000,0000,,wpisując po prostu "document.body".
Dialogue: 0,0:01:33.58,0:01:38.90,Default,,0000,0000,0000,,Drugi krok - to modyfikacja\Nznalezionego węzła
Dialogue: 0,0:01:39.00,0:01:43.44,Default,,0000,0000,0000,,poprzez zmianę atrybutów,\Nstylów, wewnętrznego HTML,
Dialogue: 0,0:01:43.54,0:01:46.04,Default,,0000,0000,0000,,dołączanie nowych węzłów...
Dialogue: 0,0:01:46.14,0:01:49.55,Default,,0000,0000,0000,,Chcąc zamienić\Nzawartość całego tagu,
Dialogue: 0,0:01:50.32,0:01:53.48,Default,,0000,0000,0000,,użyjmy właściwości "innerHTML".
Dialogue: 0,0:01:53.58,0:01:58.82,Default,,0000,0000,0000,,`document.body.innerHTML = \N"Webpage be gone!" (Strono precz!).
Dialogue: 0,0:01:58.92,0:02:00.39,Default,,0000,0000,0000,,Ha! Udało się!
Dialogue: 0,0:02:01.91,0:02:06.12,Default,,0000,0000,0000,,Przeglądarka szuka zmian\Nw dokumencie obiektowym.
Dialogue: 0,0:02:06.22,0:02:10.08,Default,,0000,0000,0000,,Gdy widzi, że zmieniacie\N"innerHTML" w "document.body",
Dialogue: 0,0:02:10.18,0:02:12.52,Default,,0000,0000,0000,,odzwierciedli to w dokumencie.
Dialogue: 0,0:02:13.45,0:02:17.61,Default,,0000,0000,0000,,Pamiętajcie, dokument obiektowy\Nto nie jest strona internetowa,
Dialogue: 0,0:02:17.71,0:02:22.68,Default,,0000,0000,0000,,lecz jej odzwierciedlenie,\Nktóre tworzy przeglądarka.
Dialogue: 0,0:02:24.03,0:02:28.66,Default,,0000,0000,0000,,Jest więcej sposobów\Nna wykonanie kroku pierwszego,
Dialogue: 0,0:02:28.76,0:02:32.81,Default,,0000,0000,0000,,bo zwykle interesuje was\Nwięcej niż tag "body".
Dialogue: 0,0:02:32.91,0:02:37.51,Default,,0000,0000,0000,,Może szukacie tagu z pewnym ID,\Nalbo wszystkich tagów danego typu...
Dialogue: 0,0:02:37.61,0:02:41.45,Default,,0000,0000,0000,,To omówię w odcinkach na temat\Nmetod dostępu do modelu DOM.
Dialogue: 0,0:02:41.55,0:02:45.41,Default,,0000,0000,0000,,Ciekawsze rzeczy można też\Nrobić w kroku drugim,
Dialogue: 0,0:02:45.51,0:02:48.89,Default,,0000,0000,0000,,np. zmieniać atrybuty i style\Nznalezionych tagów.
Dialogue: 0,0:02:48.99,0:02:52.57,Default,,0000,0000,0000,,Pomówimy o tym w odcinkach\Nnt. modyfikacji DOM-u.
Dialogue: 0,0:02:52.67,0:02:56.38,Default,,0000,0000,0000,,Gdy opanujecie dostęp i modyfikacje,
Dialogue: 0,0:02:56.48,0:02:58.89,Default,,0000,0000,0000,,przejdziemy do świetnych zastosowań,
Dialogue: 0,0:02:58.99,0:03:02.93,Default,,0000,0000,0000,,np. reakcji na zdarzenia użytkownika\Nczy animacji.
Dialogue: 0,0:03:03.03,0:03:06.42,Default,,0000,0000,0000,,Głupio, że używamy JavaScript\Ndo robienia tego,
Dialogue: 0,0:03:06.52,0:03:09.91,Default,,0000,0000,0000,,co można było załatwić HTML-em,
Dialogue: 0,0:03:10.01,0:03:14.61,Default,,0000,0000,0000,,ale najpierw dobrze opanujcie\Ndostęp do DOM-u i zmiany,
Dialogue: 0,0:03:14.71,0:03:18.94,Default,,0000,0000,0000,,żeby później robić\Nprawdziwe interaktywne rzeczy.
Dialogue: 0,0:03:19.04,0:03:21.01,Default,,0000,0000,0000,,Ćwiczcie - i do zobaczenia!