[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:01.25,0:00:03.70,Default,,0000,0000,0000,,Oto moja strona o psach.
Dialogue: 0,0:00:03.80,0:00:07.46,Default,,0000,0000,0000,,Za pomocą JavaScript i DOM-u
Dialogue: 0,0:00:07.56,0:00:11.10,Default,,0000,0000,0000,,zrobię z niej stronę o kotach.
Dialogue: 0,0:00:12.00,0:00:15.45,Default,,0000,0000,0000,,Nie zauważyłam bardzo ważnej rzeczy...
Dialogue: 0,0:00:15.55,0:00:20.50,Default,,0000,0000,0000,,raczej psa, a nawet dwóch.
Dialogue: 0,0:00:20.64,0:00:22.41,Default,,0000,0000,0000,,To te zdjęcia!
Dialogue: 0,0:00:22.51,0:00:27.13,Default,,0000,0000,0000,,Na zdjęcia uroczych psów nie ma miejsca\Nna stronie o uroczych kotach.
Dialogue: 0,0:00:27.23,0:00:29.07,Default,,0000,0000,0000,,Trzeba je zmienić.
Dialogue: 0,0:00:30.23,0:00:32.83,Default,,0000,0000,0000,,Znajdźmy zdjęcia,
Dialogue: 0,0:00:32.93,0:00:36.38,Default,,0000,0000,0000,,używając polecenia\N"getElementsByTagName".
Dialogue: 0,0:00:36.50,0:00:41.07,Default,,0000,0000,0000,,"var imageEls = document."...
Dialogue: 0,0:00:41.17,0:00:45.98,Default,,0000,0000,0000,,"getElementsByTagName("img")".
Dialogue: 0,0:00:47.81,0:00:53.26,Default,,0000,0000,0000,,To zwraca liczne elementy, musimy więc\Nskorzystać z pętli FOR, by je zamieniać.
Dialogue: 0,0:00:53.44,0:00:56.38,Default,,0000,0000,0000,,Napiszę: "var i = 0;"...
Dialogue: 0,0:00:56.48,0:01:02.39,Default,,0000,0000,0000,,"i < imageEls.length; i++".
Dialogue: 0,0:01:04.13,0:01:04.92,Default,,0000,0000,0000,,Dobrze.
Dialogue: 0,0:01:05.04,0:01:07.85,Default,,0000,0000,0000,,A co umieszczę w pętli FOR?
Dialogue: 0,0:01:09.24,0:01:12.45,Default,,0000,0000,0000,,Nie zamienię zdjęć\Nza pomocą "innerHTML",
Dialogue: 0,0:01:12.55,0:01:16.55,Default,,0000,0000,0000,,bo tagi zdjęć go nie mają.
Dialogue: 0,0:01:16.65,0:01:18.92,Default,,0000,0000,0000,,To tagi zamykane automatycznie.
Dialogue: 0,0:01:19.02,0:01:23.74,Default,,0000,0000,0000,,Muszę raczej zmienić to,\Nco sprawia, że są tu psy.
Dialogue: 0,0:01:23.84,0:01:25.67,Default,,0000,0000,0000,,URL zdjęć,
Dialogue: 0,0:01:25.77,0:01:30.30,Default,,0000,0000,0000,,określony atrybutem\N"src" w każdym z tagów.
Dialogue: 0,0:01:30.40,0:01:34.50,Default,,0000,0000,0000,,Możemy zmienić atrybuty\Nelementów, używając kropek.
Dialogue: 0,0:01:34.63,0:01:35.96,Default,,0000,0000,0000,,Pokażę.
Dialogue: 0,0:01:36.09,0:01:40.70,Default,,0000,0000,0000,,Wchodzimy do bieżącego elementu\Nw nawiasach kwadratowych
Dialogue: 0,0:01:40.86,0:01:42.86,Default,,0000,0000,0000,,i wpisujemy kropkę
Dialogue: 0,0:01:42.97,0:01:45.57,Default,,0000,0000,0000,,oraz nazwę atrybutu HTML
Dialogue: 0,0:01:45.67,0:01:49.81,Default,,0000,0000,0000,,jako nazwę właściwości\NJavaScript, czyli src.
Dialogue: 0,0:01:49.91,0:01:52.62,Default,,0000,0000,0000,,Dalej - "="...\NI wstawiamy nową wartość.
Dialogue: 0,0:01:52.72,0:01:54.38,Default,,0000,0000,0000,,Ja zrobię pusty ciąg.
Dialogue: 0,0:01:54.48,0:01:56.91,Default,,0000,0000,0000,,Zobaczcie: zdjęcia stały się białe,
Dialogue: 0,0:01:57.01,0:02:00.29,Default,,0000,0000,0000,,bo pusty ciąg\Nnie wskazuje żadnego obrazu.
Dialogue: 0,0:02:01.44,0:02:06.96,Default,,0000,0000,0000,,Żeby określić, jaki powinien\Nbyć nowy URL, wkleję stary
Dialogue: 0,0:02:07.71,0:02:11.15,Default,,0000,0000,0000,,i zmienię nazwę pliku na "cat" (kot),
Dialogue: 0,0:02:11.31,0:02:15.73,Default,,0000,0000,0000,,bo wiem, że to jest URL\Nzdjęcia kota w Khan Academy.
Dialogue: 0,0:02:16.59,0:02:19.60,Default,,0000,0000,0000,,Tak! Psy stały się kotami.
Dialogue: 0,0:02:19.70,0:02:22.38,Default,,0000,0000,0000,,Kotyfikacja dobiega końca.
Dialogue: 0,0:02:23.14,0:02:27.68,Default,,0000,0000,0000,,Widzicie jeszcze coś,\Nco ma związek z psami?
Dialogue: 0,0:02:27.79,0:02:30.26,Default,,0000,0000,0000,,Trudno to zauważyć,
Dialogue: 0,0:02:30.36,0:02:34.02,Default,,0000,0000,0000,,ale jest: link do Wikipedii.
Dialogue: 0,0:02:34.95,0:02:36.87,Default,,0000,0000,0000,,Odsyła do strony o psach.
Dialogue: 0,0:02:37.01,0:02:40.83,Default,,0000,0000,0000,,Spłatam użytkownikom\Npaskudnego figla.
Dialogue: 0,0:02:40.91,0:02:44.15,Default,,0000,0000,0000,,Niech link łączy ich\Nze stroną o kotach.
Dialogue: 0,0:02:44.23,0:02:46.95,Default,,0000,0000,0000,,Jak znajdę ten link w JavaScript?
Dialogue: 0,0:02:47.09,0:02:49.30,Default,,0000,0000,0000,,Mogłabym nadać mu ID
Dialogue: 0,0:02:49.38,0:02:51.83,Default,,0000,0000,0000,,i użyć polecenia "getElementById".
Dialogue: 0,0:02:51.93,0:02:54.32,Default,,0000,0000,0000,,Mogę też użyć\N"getElementsByTagName"
Dialogue: 0,0:02:54.42,0:02:56.98,Default,,0000,0000,0000,,i zmienić wszystkie linki na stronie.
Dialogue: 0,0:02:57.08,0:02:59.20,Default,,0000,0000,0000,,Albo, w wyrafinowany sposób,
Dialogue: 0,0:02:59.32,0:03:02.99,Default,,0000,0000,0000,,znajdę tylko linki\Nodsyłające do stron o psach.
Dialogue: 0,0:03:03.09,0:03:05.20,Default,,0000,0000,0000,,Użyję selektora zapytań CSS.
Dialogue: 0,0:03:06.80,0:03:11.47,Default,,0000,0000,0000,,Pokażę wam zapytanie CSS,\Nktóre chcę wpisać w tag "style".
Dialogue: 0,0:03:11.58,0:03:16.16,Default,,0000,0000,0000,,To zapytanie znajdzie wszystkie linki\Nmające coś wspólnego z psami.
Dialogue: 0,0:03:16.25,0:03:19.02,Default,,0000,0000,0000,,Najpierw wpiszę "a",\Nbo szukam linków.
Dialogue: 0,0:03:19.14,0:03:25.02,Default,,0000,0000,0000,,Potem: [href*="Dog"].
Dialogue: 0,0:03:25.70,0:03:27.72,Default,,0000,0000,0000,,Tym poleceniem każę CSS-owi
Dialogue: 0,0:03:27.82,0:03:31.70,Default,,0000,0000,0000,,dopasować linki\Nmające w sobie "Dog".
Dialogue: 0,0:03:31.80,0:03:34.92,Default,,0000,0000,0000,,A później zmienimy kolor na fiolet.
Dialogue: 0,0:03:36.07,0:03:37.45,Default,,0000,0000,0000,,Hura, udało się!
Dialogue: 0,0:03:38.29,0:03:41.53,Default,,0000,0000,0000,,Dobry sposób!\NTo jest selektor atrybutów.
Dialogue: 0,0:03:41.63,0:03:45.98,Default,,0000,0000,0000,,Znamy wiele świetnych sposobów\Nużywania selektorów atrybutów,
Dialogue: 0,0:03:46.10,0:03:48.69,Default,,0000,0000,0000,,by sięgnąć głęboko do dokumentu.
Dialogue: 0,0:03:49.34,0:03:53.38,Default,,0000,0000,0000,,Aby znaleźć to w JavaScript,
Dialogue: 0,0:03:53.48,0:03:56.85,Default,,0000,0000,0000,,możemy użyć polecenia\N"document.querySelectorAll".
Dialogue: 0,0:03:57.01,0:04:00.15,Default,,0000,0000,0000,,Napiszę: "var linkEls ="...
Dialogue: 0,0:04:00.25,0:04:03.76,Default,,0000,0000,0000,,"document.querySelectorAll".
Dialogue: 0,0:04:04.32,0:04:06.77,Default,,0000,0000,0000,,Później możemy wklejać różne rzeczy
Dialogue: 0,0:04:06.87,0:04:09.49,Default,,0000,0000,0000,,w tym nowym selektorze.
Dialogue: 0,0:04:10.78,0:04:14.72,Default,,0000,0000,0000,,Pamiętajmy tylko,\Nżeby usunąć cudzysłowy.
Dialogue: 0,0:04:15.24,0:04:16.24,Default,,0000,0000,0000,,Już.
Dialogue: 0,0:04:18.64,0:04:22.69,Default,,0000,0000,0000,,Teraz wygląda to jak porządny ciąg.
Dialogue: 0,0:04:22.79,0:04:24.89,Default,,0000,0000,0000,,Będę zmieniać elementy.
Dialogue: 0,0:04:24.97,0:04:27.22,Default,,0000,0000,0000,,Jeszcze raz zrobimy pętlę FOR.
Dialogue: 0,0:04:27.32,0:04:31.27,Default,,0000,0000,0000,,Powinniście już przywyknąć\Ndo tworzenia tych pętli.
Dialogue: 0,0:04:31.37,0:04:32.58,Default,,0000,0000,0000,,"I++"...
Dialogue: 0,0:04:33.13,0:04:37.67,Default,,0000,0000,0000,,Każda ma zmieniać link
Dialogue: 0,0:04:37.77,0:04:41.40,Default,,0000,0000,0000,,i kierować do strony o kotach\Nw Wikipedii.
Dialogue: 0,0:04:41.50,0:04:45.72,Default,,0000,0000,0000,,Napiszę więc: "linkEls[i].href",
Dialogue: 0,0:04:45.82,0:04:50.25,Default,,0000,0000,0000,,bo to jest nazwa atrybutu,\Nktórą zmieniamy... i dalej "=".
Dialogue: 0,0:04:50.36,0:04:54.23,Default,,0000,0000,0000,,Teraz znajdę ten URL
Dialogue: 0,0:04:55.03,0:04:57.05,Default,,0000,0000,0000,,i wkleję go tutaj.
Dialogue: 0,0:04:57.62,0:04:59.88,Default,,0000,0000,0000,,Zmienię na "kot",
Dialogue: 0,0:04:59.98,0:05:04.10,Default,,0000,0000,0000,,bo wiem na pewno,\Nże to jest URL tej strony.
Dialogue: 0,0:05:04.21,0:05:08.12,Default,,0000,0000,0000,,Hura, kotyfikacja świata się dokonała!
Dialogue: 0,0:05:08.80,0:05:14.44,Default,,0000,0000,0000,,Ale nie skończyliście uczyć się o tym,\Njak zmieniać strony. Oglądajcie dalej!