[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:01.29,0:00:04.47,Default,,0000,0000,0000,,Mam stronę "Wszystko o psach",
Dialogue: 0,0:00:05.31,0:00:07.58,Default,,0000,0000,0000,,świetną, tylko że...
Dialogue: 0,0:00:07.68,0:00:12.53,Default,,0000,0000,0000,,nie każdemu się to spodoba,\Nale jestem raczej kociarą.
Dialogue: 0,0:00:12.63,0:00:16.21,Default,,0000,0000,0000,,Przerobiłabym tę stronę\Nna "Wszystko o kotach".
Dialogue: 0,0:00:17.28,0:00:19.45,Default,,0000,0000,0000,,Użyję JavaScript,
Dialogue: 0,0:00:20.40,0:00:23.01,Default,,0000,0000,0000,,zamiast tylko modyfikować to HTML.
Dialogue: 0,0:00:23.11,0:00:27.76,Default,,0000,0000,0000,,W końcu zrobię z tego\Nrozszerzenie przeglądarki
Dialogue: 0,0:00:27.86,0:00:31.94,Default,,0000,0000,0000,,i każdą stronę przekształcę tak,\Nby dotyczyła kotów.
Dialogue: 0,0:00:32.04,0:00:36.30,Default,,0000,0000,0000,,Byłoby wspaniale:\Ncały Internet o kotach!
Dialogue: 0,0:00:38.13,0:00:40.86,Default,,0000,0000,0000,,Ta strona zawiera nagłówek,
Dialogue: 0,0:00:40.96,0:00:43.92,Default,,0000,0000,0000,,akapit i parę zdjęć.
Dialogue: 0,0:00:45.06,0:00:49.97,Default,,0000,0000,0000,,Będziemy je zmieniać po kolei,\Nzaczynając od nagłówka,
Dialogue: 0,0:00:50.07,0:00:53.61,Default,,0000,0000,0000,,w dwóch krokach,\No których się uczyliśmy.
Dialogue: 0,0:00:53.71,0:00:58.85,Default,,0000,0000,0000,,Krok pierwszy - to znaleźć węzeł\NDOM-u zawierający ten nagłówek.
Dialogue: 0,0:00:58.95,0:01:03.27,Default,,0000,0000,0000,,Przedtem znaleźliśmy węzeł
Dialogue: 0,0:01:03.37,0:01:06.43,Default,,0000,0000,0000,,poleceniem "document.body",
Dialogue: 0,0:01:06.53,0:01:11.10,Default,,0000,0000,0000,,ale teraz interesuje mnie coś\Nkonkretnego: nagłówek h1.
Dialogue: 0,0:01:12.00,0:01:14.34,Default,,0000,0000,0000,,A ten nagłówek h1 ma ID,
Dialogue: 0,0:01:14.44,0:01:19.56,Default,,0000,0000,0000,,więc powinien być jedynym na stronie\Ntagiem o takim ID.
Dialogue: 0,0:01:19.66,0:01:24.20,Default,,0000,0000,0000,,Jest łatwy sposób szukania\Nwęzłów DOM-u mających ID.
Dialogue: 0,0:01:24.30,0:01:29.38,Default,,0000,0000,0000,,Metoda nazywa się\N"getElementById".
Dialogue: 0,0:01:30.61,0:01:32.72,Default,,0000,0000,0000,,Zastosujmy to tu, w tagu "script".
Dialogue: 0,0:01:32.82,0:01:35.74,Default,,0000,0000,0000,,Deklarujemy zmienną,\Nktóra będzie to przechowywać:
Dialogue: 0,0:01:35.84,0:01:38.07,Default,,0000,0000,0000,,"var headingEl".
Dialogue: 0,0:01:38.17,0:01:41.95,Default,,0000,0000,0000,,Kończę nazwy zmiennych\N"El" lub "Node",
Dialogue: 0,0:01:42.05,0:01:44.64,Default,,0000,0000,0000,,żeby wiedzieć,\Nże przechowują element
Dialogue: 0,0:01:44.74,0:01:47.02,Default,,0000,0000,0000,,zwany też "node" (węzłem).
Dialogue: 0,0:01:47.12,0:01:52.39,Default,,0000,0000,0000,,Użyjmy tej metody. Jest powiązana\Nz globalnym dokumentem obiektowym,
Dialogue: 0,0:01:52.49,0:01:55.59,Default,,0000,0000,0000,,więc dajemy "document", kropkę
Dialogue: 0,0:01:55.69,0:01:58.96,Default,,0000,0000,0000,,i "getElementById",
Dialogue: 0,0:01:59.06,0:02:01.19,Default,,0000,0000,0000,,a potem nawiasy, bo to funkcja.
Dialogue: 0,0:02:02.55,0:02:07.56,Default,,0000,0000,0000,,Niczego nie znajdzie tak po prostu,\Nbo nie wie, którego szukać ID.
Dialogue: 0,0:02:07.66,0:02:12.17,Default,,0000,0000,0000,,W nawiasie wpisujemy szukane ID,
Dialogue: 0,0:02:12.27,0:02:14.61,Default,,0000,0000,0000,,jako ciąg znaków w cudzysłowie.
Dialogue: 0,0:02:14.71,0:02:16.73,Default,,0000,0000,0000,,Tutaj: "heading".
Dialogue: 0,0:02:21.66,0:02:23.100,Default,,0000,0000,0000,,Jak ustalić, że znaleźliśmy element,
Dialogue: 0,0:02:24.10,0:02:26.44,Default,,0000,0000,0000,,zanim zaczniemy coś z nim robić?
Dialogue: 0,0:02:26.54,0:02:29.85,Default,,0000,0000,0000,,Jeden sposób - to funkcja\N"console.log".
Dialogue: 0,0:02:31.66,0:02:35.68,Default,,0000,0000,0000,,Zatrzymajcie film i otwórzcie\N"narzędzia deweloperskie".
Dialogue: 0,0:02:35.78,0:02:40.38,Default,,0000,0000,0000,,Wypróbujcie skrót \NCommand-Option-I na Macu
Dialogue: 0,0:02:40.48,0:02:44.81,Default,,0000,0000,0000,,lub Control-Shift-I w Windows.
Dialogue: 0,0:02:44.91,0:02:46.78,Default,,0000,0000,0000,,Któryś powinien zadziałać.
Dialogue: 0,0:02:48.90,0:02:51.84,Default,,0000,0000,0000,,Widzicie "h1" na konsoli?
Dialogue: 0,0:02:52.93,0:02:54.27,Default,,0000,0000,0000,,Tak? Dobrze!
Dialogue: 0,0:02:54.37,0:02:56.42,Default,,0000,0000,0000,,Krok pierwszy wykonany.
Dialogue: 0,0:02:56.52,0:02:59.83,Default,,0000,0000,0000,,Znaleźliśmy element,\Nprzechowujemy go w zmiennej.
Dialogue: 0,0:02:59.93,0:03:01.69,Default,,0000,0000,0000,,Krok drugi.
Dialogue: 0,0:03:01.79,0:03:06.15,Default,,0000,0000,0000,,Zmodyfikujmy element\Nsposobem, który już znamy:
Dialogue: 0,0:03:06.25,0:03:07.98,Default,,0000,0000,0000,,zmieniając "innerHTML".
Dialogue: 0,0:03:08.83,0:03:10.48,Default,,0000,0000,0000,,Zobaczmy... Napiszemy:
Dialogue: 0,0:03:10.58,0:03:14.77,Default,,0000,0000,0000,,"headingEl.innerHTML ="...
Dialogue: 0,0:03:14.87,0:03:17.17,Default,,0000,0000,0000,,chwila prawdy...
Dialogue: 0,0:03:17.27,0:03:18.38,Default,,0000,0000,0000,,Koty!
Dialogue: 0,0:03:18.86,0:03:21.64,Default,,0000,0000,0000,,"Wszystko o kotach". Gotowe!
Dialogue: 0,0:03:22.56,0:03:26.27,Default,,0000,0000,0000,,Zaczęliśmy. Kotyfikacja ruszyła.
Dialogue: 0,0:03:26.37,0:03:30.51,Default,,0000,0000,0000,,Teraz spróbujcie zrobić\Ncoś podobnego w zadaniu.