[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:01.06,0:00:06.85,Default,,0000,0000,0000,,Na razie modyfikowaliśmy elementy\Nistniejące już na stronie.
Dialogue: 0,0:00:07.02,0:00:10.12,Default,,0000,0000,0000,,A gdybyśmy chcieli dodać tam nowe?
Dialogue: 0,0:00:10.32,0:00:12.85,Default,,0000,0000,0000,,Moglibyśmy - za pomocą "innerHTML",
Dialogue: 0,0:00:12.95,0:00:17.48,Default,,0000,0000,0000,,pisząc HTML do tagów w ciągu,\Nktóry wprowadzamy.
Dialogue: 0,0:00:17.64,0:00:21.08,Default,,0000,0000,0000,,Tak jak tutaj.\NTylko że może się zrobić bałagan,
Dialogue: 0,0:00:21.16,0:00:25.83,Default,,0000,0000,0000,,zwłaszcza gdy chcecie tworzyć tagi\No różnych atrybutach, stylach i klasach.
Dialogue: 0,0:00:25.99,0:00:31.40,Default,,0000,0000,0000,,Zamiast tego użyjmy\Ncałego wachlarza metod
Dialogue: 0,0:00:31.54,0:00:36.22,Default,,0000,0000,0000,,tworzenia elementów od zera\Ni umieszczania ich na stronie.
Dialogue: 0,0:00:36.32,0:00:40.86,Default,,0000,0000,0000,,Powiedzmy,\Nże chcemy dodać zdjęcie kota,
Dialogue: 0,0:00:40.96,0:00:44.13,Default,,0000,0000,0000,,bo na stronie\Njest ich jeszcze za mało.
Dialogue: 0,0:00:44.24,0:00:48.62,Default,,0000,0000,0000,,Pierwszy krok - to stworzyć\Nnowy element "img", tak?
Dialogue: 0,0:00:48.77,0:00:51.09,Default,,0000,0000,0000,,To chcemy utworzyć.
Dialogue: 0,0:00:51.19,0:00:55.88,Default,,0000,0000,0000,,Zaczniemy od zmiennej,\Nktóra będzie go przechowywać: "catEl".
Dialogue: 0,0:00:55.98,0:01:00.78,Default,,0000,0000,0000,,A potem damy:\N"document.createElement"
Dialogue: 0,0:01:00.94,0:01:04.67,Default,,0000,0000,0000,,i wpiszemy nazwę znacznika,\Nktóry robimy, czyli "img".
Dialogue: 0,0:01:06.99,0:01:08.43,Default,,0000,0000,0000,,Można sobie wyobrazić,
Dialogue: 0,0:01:08.54,0:01:11.85,Default,,0000,0000,0000,,że przeglądarka\Nzrobiła znacznik zdjęcia, o, taki,
Dialogue: 0,0:01:11.96,0:01:15.30,Default,,0000,0000,0000,,i unosi się on gdzieś w przestrzeni.
Dialogue: 0,0:01:15.45,0:01:18.90,Default,,0000,0000,0000,,Następny krok\N- to przypisać mu źródło.
Dialogue: 0,0:01:19.06,0:01:23.45,Default,,0000,0000,0000,,Zatem: "catEl.src =".
Dialogue: 0,0:01:23.56,0:01:26.24,Default,,0000,0000,0000,,Weźmy źródło stąd...
Dialogue: 0,0:01:29.63,0:01:32.58,Default,,0000,0000,0000,,...i powinniśmy dodać jeszcze "alt",
Dialogue: 0,0:01:32.72,0:01:34.78,Default,,0000,0000,0000,,by obraz był łatwiej dostępny.
Dialogue: 0,0:01:34.85,0:01:36.52,Default,,0000,0000,0000,,Nie robię tego,
Dialogue: 0,0:01:36.62,0:01:41.33,Default,,0000,0000,0000,,ale powinnam zawsze mieć\N"alt" przy zdjęciach.
Dialogue: 0,0:01:42.35,0:01:45.00,Default,,0000,0000,0000,,Jak widać, ten tag "zdjęcie",
Dialogue: 0,0:01:45.15,0:01:49.39,Default,,0000,0000,0000,,który zrobiliśmy, ma...
Dialogue: 0,0:01:49.53,0:01:50.70,Default,,0000,0000,0000,,źródło ("src")...
Dialogue: 0,0:01:50.76,0:01:53.09,Default,,0000,0000,0000,,i ma też...
Dialogue: 0,0:01:54.04,0:01:58.52,Default,,0000,0000,0000,,"alt" - "Photo of cute cat"\N(zdjęcie ślicznego kota). No dobrze.
Dialogue: 0,0:01:58.62,0:02:03.37,Default,,0000,0000,0000,,To zrobiliśmy z użyciem JavaScript.
Dialogue: 0,0:02:05.06,0:02:08.79,Default,,0000,0000,0000,,Nasz tag "img"\Nnadal unosi się w przestrzeni:
Dialogue: 0,0:02:08.89,0:02:11.53,Default,,0000,0000,0000,,przeglądarka nie wie,\Ngdzie go umieścić.
Dialogue: 0,0:02:11.63,0:02:15.91,Default,,0000,0000,0000,,Nasz DOM ma wiele różnych miejsc,\Nw których mógłby się znaleźć.
Dialogue: 0,0:02:16.05,0:02:21.41,Default,,0000,0000,0000,,Zróbmy coś prostego:\Nniech słowo pojawi się u dołu strony.
Dialogue: 0,0:02:21.62,0:02:25.95,Default,,0000,0000,0000,,Osiągniemy to,\Npisząc na końcu tagu "body":
Dialogue: 0,0:02:26.05,0:02:29.58,Default,,0000,0000,0000,,"document.body.appendChild(catEl)".
Dialogue: 0,0:02:29.76,0:02:32.56,Default,,0000,0000,0000,,I jest! Całkiem spory!
Dialogue: 0,0:02:32.67,0:02:35.34,Default,,0000,0000,0000,,Duży, straszny kot!
Dialogue: 0,0:02:35.44,0:02:41.12,Default,,0000,0000,0000,,Można przywołać "appendChild" w każdym\Nistniejącym węźle DOM-u na stronie.
Dialogue: 0,0:02:41.18,0:02:43.66,Default,,0000,0000,0000,,Sprawi, że wprowadzony element
Dialogue: 0,0:02:43.76,0:02:47.66,Default,,0000,0000,0000,,zostanie ostatnim dzieckiem\Nw tym węźle.
Dialogue: 0,0:02:47.80,0:02:52.27,Default,,0000,0000,0000,,Tutaj pomoże nam wizualizacja:\NDOM jako drzewo.
Dialogue: 0,0:02:52.39,0:02:56.03,Default,,0000,0000,0000,,Tag "body" to węzeł na tym drzewie,
Dialogue: 0,0:02:56.18,0:03:00.14,Default,,0000,0000,0000,,i ma całą grupę dzieci, np. "h1" i "p".
Dialogue: 0,0:03:00.26,0:03:04.18,Default,,0000,0000,0000,,Dodajecie\Njeszcze jedno dziecko na końcu.
Dialogue: 0,0:03:04.29,0:03:08.10,Default,,0000,0000,0000,,Znajdzie się za tagiem "script", tutaj.
Dialogue: 0,0:03:09.64,0:03:10.91,Default,,0000,0000,0000,,Używając metod DOM-u,
Dialogue: 0,0:03:10.98,0:03:15.58,Default,,0000,0000,0000,,teoretycznie powinniście dokładać\Nelementy w dowolnym punkcie drzewa.
Dialogue: 0,0:03:15.68,0:03:19.88,Default,,0000,0000,0000,,My umieściliśmy element\Nw najbardziej oczywistym miejscu.
Dialogue: 0,0:03:19.98,0:03:22.06,Default,,0000,0000,0000,,Jeszcze jeden przykład.
Dialogue: 0,0:03:22.24,0:03:25.68,Default,,0000,0000,0000,,Użyliśmy tutaj "innerHTML",
Dialogue: 0,0:03:25.85,0:03:28.53,Default,,0000,0000,0000,,by umieścić tagi "strong"\Nwewnątrz "span".
Dialogue: 0,0:03:28.63,0:03:31.60,Default,,0000,0000,0000,,Można też użyć\Npolecenia "stwórz element".
Dialogue: 0,0:03:31.74,0:03:35.02,Default,,0000,0000,0000,,"var strongEl = document"...
Dialogue: 0,0:03:35.24,0:03:39.54,Default,,0000,0000,0000,,".createElement strong".
Dialogue: 0,0:03:39.69,0:03:43.91,Default,,0000,0000,0000,,Źle zapisałam,\Na pisownia jest bardzo ważna.
Dialogue: 0,0:03:44.02,0:03:46.86,Default,,0000,0000,0000,,Powstaje więc pusty tag "strong",
Dialogue: 0,0:03:47.00,0:03:48.95,Default,,0000,0000,0000,,unoszący się w przestrzeni.
Dialogue: 0,0:03:49.03,0:03:52.13,Default,,0000,0000,0000,,Najpierw ustalimy tekst.
Dialogue: 0,0:03:52.23,0:03:56.61,Default,,0000,0000,0000,,Piszemy zatem:\NstrongEl.textContent = "cat".
Dialogue: 0,0:03:56.80,0:03:58.07,Default,,0000,0000,0000,,W porządku?
Dialogue: 0,0:03:58.16,0:04:01.93,Default,,0000,0000,0000,,Moglibyśmy również zrobić coś innego:
Dialogue: 0,0:04:02.08,0:04:04.78,Default,,0000,0000,0000,,stworzyć tzw. węzeł tekstowy\N(textNode).
Dialogue: 0,0:04:04.88,0:04:07.15,Default,,0000,0000,0000,,Wiele węzłów w drzewie DOM-u
Dialogue: 0,0:04:07.28,0:04:10.98,Default,,0000,0000,0000,,może zawierać jako dzieci\Nspecjalny typ węzłów, "textNode".
Dialogue: 0,0:04:11.10,0:04:12.80,Default,,0000,0000,0000,,To nie są elementy,
Dialogue: 0,0:04:12.94,0:04:15.33,Default,,0000,0000,0000,,lecz nadal węzły w drzewie DOM-u.
Dialogue: 0,0:04:15.45,0:04:19.85,Default,,0000,0000,0000,,Tzw. "węzły-liście" to ostatnie rzeczy,\Nktóre mogą się znajdować w drzewie.
Dialogue: 0,0:04:19.98,0:04:22.64,Default,,0000,0000,0000,,"Var strongText"...
Dialogue: 0,0:04:22.81,0:04:26.19,Default,,0000,0000,0000,,"= document.createTextNode".
Dialogue: 0,0:04:27.51,0:04:30.72,Default,,0000,0000,0000,,Wpiszemy tekst: "cat".
Dialogue: 0,0:04:32.04,0:04:33.67,Default,,0000,0000,0000,,Używając tej metody,
Dialogue: 0,0:04:33.80,0:04:39.63,Default,,0000,0000,0000,,stworzyliśmy dwa węzły w przestrzeni.
Dialogue: 0,0:04:39.73,0:04:41.78,Default,,0000,0000,0000,,Tag "strong"...
Dialogue: 0,0:04:41.99,0:04:46.14,Default,,0000,0000,0000,,oraz ten "textNode",\Nczyli po prostu "cat".
Dialogue: 0,0:04:46.81,0:04:49.74,Default,,0000,0000,0000,,Musimy je połączyć.
Dialogue: 0,0:04:49.92,0:04:54.89,Default,,0000,0000,0000,,Chcemy, żeby "strong"\Nbył rodzicem "cata".
Dialogue: 0,0:04:55.04,0:05:01.44,Default,,0000,0000,0000,,Musimy więc napisać:\N"strongEl.appendChild(strongText)".
Dialogue: 0,0:05:03.37,0:05:06.44,Default,,0000,0000,0000,,Teraz, kiedy już mamy...
Dialogue: 0,0:05:07.04,0:05:10.17,Default,,0000,0000,0000,,"strong" z kotem wewnątrz,
Dialogue: 0,0:05:12.61,0:05:17.12,Default,,0000,0000,0000,,musimy go gdzieś umieścić,\Nbo nadal unosi się w przestrzeni.
Dialogue: 0,0:05:18.11,0:05:22.57,Default,,0000,0000,0000,,Jesteśmy wewnątrz pętli FOR\Ndla "nameEls".
Dialogue: 0,0:05:22.68,0:05:26.89,Default,,0000,0000,0000,,Do każdego "nameEl"\Nchcemy dodać tag "strong".
Dialogue: 0,0:05:26.98,0:05:29.67,Default,,0000,0000,0000,,Mamy więc tutaj: "nameEls[i]"...
Dialogue: 0,0:05:29.91,0:05:34.16,Default,,0000,0000,0000,,".appendChild(strongEl)".
Dialogue: 0,0:05:34.80,0:05:38.71,Default,,0000,0000,0000,,Aha, teraz widzimy to dwa razy,
Dialogue: 0,0:05:38.81,0:05:42.40,Default,,0000,0000,0000,,bo zostawiłam stary sposób.
Dialogue: 0,0:05:42.51,0:05:46.100,Default,,0000,0000,0000,,Przytwierdził się do tagu "span",\Nktóry ma już w sobie "strong".
Dialogue: 0,0:05:47.14,0:05:49.10,Default,,0000,0000,0000,,Moglibyśmy zmienić ten wiersz
Dialogue: 0,0:05:49.20,0:05:52.41,Default,,0000,0000,0000,,na "innerHTML = empty string"\N(pusty ciąg).
Dialogue: 0,0:05:52.51,0:05:56.36,Default,,0000,0000,0000,,Wtedy wyczyściłby się "span",\Nzanim do niego dojdziemy.
Dialogue: 0,0:05:57.80,0:06:03.44,Default,,0000,0000,0000,,Widzieliście: wymagało to więcej\Nwierszy kodu niż wersja "innerHTML".
Dialogue: 0,0:06:05.48,0:06:07.29,Default,,0000,0000,0000,,Dlaczego to zrobiliśmy?
Dialogue: 0,0:06:07.40,0:06:11.26,Default,,0000,0000,0000,,Projektanci stron nie lubią\Nmodyfikować dokumentów w ten sposób,
Dialogue: 0,0:06:11.38,0:06:13.28,Default,,0000,0000,0000,,bo wymaga to więcej programu.
Dialogue: 0,0:06:13.43,0:06:16.84,Default,,0000,0000,0000,,Większość projektantów\Nużywa bibliotek, np. jQuery,
Dialogue: 0,0:06:17.01,0:06:19.41,Default,,0000,0000,0000,,by za nich robiły modyfikacje DOM-u.
Dialogue: 0,0:06:19.60,0:06:22.88,Default,,0000,0000,0000,,Biblioteki mają funkcje,\Nktóre robią ten sam program,
Dialogue: 0,0:06:22.98,0:06:26.82,Default,,0000,0000,0000,,a wy musicie wpisać\Nznacznie mniej wierszy.
Dialogue: 0,0:06:26.92,0:06:29.70,Default,,0000,0000,0000,,Wyręczają was funkcje biblioteki.
Dialogue: 0,0:06:29.81,0:06:32.35,Default,,0000,0000,0000,,Lubię w ten sposób pisać program,
Dialogue: 0,0:06:32.48,0:06:34.58,Default,,0000,0000,0000,,ponieważ doskonale widzę,
Dialogue: 0,0:06:34.70,0:06:38.40,Default,,0000,0000,0000,,jak modyfikuję drzewo DOM-u,\Nwiersz po wierszu.
Dialogue: 0,0:06:38.56,0:06:43.08,Default,,0000,0000,0000,,To wygląda porządniej niż wpisywanie\Nwszystkiego w ciąg "inner HTML".
Dialogue: 0,0:06:43.18,0:06:47.16,Default,,0000,0000,0000,,Wam może się nie podoba.\NAle już wiecie, że jest taka metoda.
Dialogue: 0,0:06:47.26,0:06:49.53,Default,,0000,0000,0000,,Używajcie jej w razie potrzeby,
Dialogue: 0,0:06:49.66,0:06:54.13,Default,,0000,0000,0000,,a zorientujecie się, co biblioteki\Ntakie jak jQuery robią za kulisami.