[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.98,0:00:06.16,Default,,0000,0000,0000,,Poprzednio pokazałam, jak ustawić\Nstyle w JavaScript - w ten sposób.
Dialogue: 0,0:00:06.26,0:00:09.35,Default,,0000,0000,0000,,Chcąc zrobić\Ndużo stylów w JavaScript,
Dialogue: 0,0:00:09.45,0:00:12.12,Default,,0000,0000,0000,,wpiszecie kilkaset wierszy kodu
Dialogue: 0,0:00:12.31,0:00:14.98,Default,,0000,0000,0000,,z wartościami własności CSS.
Dialogue: 0,0:00:15.08,0:00:17.52,Default,,0000,0000,0000,,I JavaScript się zatka.
Dialogue: 0,0:00:18.72,0:00:20.85,Default,,0000,0000,0000,,Jest inny sposób.
Dialogue: 0,0:00:20.99,0:00:23.45,Default,,0000,0000,0000,,Możemy stworzyć klasę CSS
Dialogue: 0,0:00:23.55,0:00:28.19,Default,,0000,0000,0000,,i dodać do niej regułę CSS z nowymi\Nstylami, które chcemy wprowadzić.
Dialogue: 0,0:00:28.28,0:00:32.30,Default,,0000,0000,0000,,A potem wpiszemy\Nnazwę klasy w JavaScript.
Dialogue: 0,0:00:33.18,0:00:37.43,Default,,0000,0000,0000,,Zacznijmy tutaj, od tagu "style"
Dialogue: 0,0:00:37.60,0:00:39.15,Default,,0000,0000,0000,,i wypróbujmy to.
Dialogue: 0,0:00:39.29,0:00:45.72,Default,,0000,0000,0000,,Zrobimy klasę "catcolors"\N(kolory kotów) i regułę CSS.
Dialogue: 0,0:00:45.86,0:00:48.23,Default,,0000,0000,0000,,Będzie tam: "color: orange"
Dialogue: 0,0:00:48.33,0:00:52.30,Default,,0000,0000,0000,,i "background-color: black".
Dialogue: 0,0:00:53.99,0:00:58.76,Default,,0000,0000,0000,,Żeby przypisać to\Ndo elementu "heading", damy:
Dialogue: 0,0:00:58.86,0:01:03.11,Default,,0000,0000,0000,,"headingEl.className"...
Dialogue: 0,0:01:03.20,0:01:05.72,Default,,0000,0000,0000,,"= catcolors".
Dialogue: 0,0:01:06.87,0:01:11.89,Default,,0000,0000,0000,,I skasujmy przypisanie koloru\Noraz koloru tła w JavaScript.
Dialogue: 0,0:01:12.07,0:01:14.74,Default,,0000,0000,0000,,Ha! Udało się.
Dialogue: 0,0:01:15.62,0:01:17.39,Default,,0000,0000,0000,,Zauważacie coś dziwnego?
Dialogue: 0,0:01:17.48,0:01:21.16,Default,,0000,0000,0000,,Atrybut HTML do nazw klas\Nto po prostu "class".
Dialogue: 0,0:01:21.26,0:01:23.99,Default,,0000,0000,0000,,Gdybym robiła to w HTML,
Dialogue: 0,0:01:24.10,0:01:26.83,Default,,0000,0000,0000,,musiałabym napisać:\Nclass="catcolors".
Dialogue: 0,0:01:26.93,0:01:31.30,Default,,0000,0000,0000,,Ale w JavaScript trzeba było\Nnapisać: "className".
Dialogue: 0,0:01:31.45,0:01:33.64,Default,,0000,0000,0000,,Do tego nie jesteśmy przyzwyczajeni!
Dialogue: 0,0:01:33.75,0:01:39.47,Default,,0000,0000,0000,,Robimy to, bo "class" jest słowem\Nkluczowym w języku JavaScript
Dialogue: 0,0:01:39.57,0:01:42.88,Default,,0000,0000,0000,,i ma szczególne znaczenie.
Dialogue: 0,0:01:43.02,0:01:46.79,Default,,0000,0000,0000,,Z tego powodu\Nprzeglądarki używają "className",
Dialogue: 0,0:01:46.92,0:01:51.78,Default,,0000,0000,0000,,by odnieść się do atrybutu klasy\Nw HTML, żeby nic się nie pomyliło.
Dialogue: 0,0:01:52.92,0:01:56.49,Default,,0000,0000,0000,,Pamiętajcie: chcąc ustanowić\Natrybut klasy elementu,
Dialogue: 0,0:01:56.66,0:01:59.30,Default,,0000,0000,0000,,piszecie ".className=".
Dialogue: 0,0:02:01.32,0:02:04.95,Default,,0000,0000,0000,,Żeby przypisać to\Nkażdej z nazw zwierząt,
Dialogue: 0,0:02:05.06,0:02:08.94,Default,,0000,0000,0000,,możemy umieścić to w pętli:\N"nameEls[i]."...
Dialogue: 0,0:02:09.08,0:02:12.66,Default,,0000,0000,0000,,"className = "catColors".
Dialogue: 0,0:02:14.47,0:02:16.49,Default,,0000,0000,0000,,To doda nazwę klasy,
Dialogue: 0,0:02:16.65,0:02:22.09,Default,,0000,0000,0000,,ale usunie wszelkie klasy,\Nktóre były tu wcześniej,
Dialogue: 0,0:02:22.20,0:02:23.64,Default,,0000,0000,0000,,bo napisaliśmy "=".
Dialogue: 0,0:02:23.75,0:02:28.61,Default,,0000,0000,0000,,Jeśli więc były tu przedtem\Njakiekolwiek klasy, teraz ich nie ma.
Dialogue: 0,0:02:28.71,0:02:33.99,Default,,0000,0000,0000,,Klasy były: "class=animal".\NZmieniło się to w "catColors".
Dialogue: 0,0:02:34.15,0:02:38.40,Default,,0000,0000,0000,,Tak naprawdę chcemy dodać\Nnową nazwę klasy
Dialogue: 0,0:02:38.50,0:02:41.17,Default,,0000,0000,0000,,do tego atrybutu klasy.
Dialogue: 0,0:02:41.28,0:02:47.39,Default,,0000,0000,0000,,Możemy to zrobić, pisząc:\N"+= catColors".
Dialogue: 0,0:02:47.63,0:02:48.65,Default,,0000,0000,0000,,Gotowe.
Dialogue: 0,0:02:49.37,0:02:53.78,Default,,0000,0000,0000,,To bezpieczny sposób, bo program\Nbierze nazwę poprzedniej klasy,
Dialogue: 0,0:02:53.95,0:02:57.12,Default,,0000,0000,0000,,dodaje spację i nową klasę.
Dialogue: 0,0:02:59.07,0:03:05.25,Default,,0000,0000,0000,,W nowszych przeglądarkach zrobimy to,\Nużywając własności "classList".
Dialogue: 0,0:03:05.37,0:03:07.95,Default,,0000,0000,0000,,Piszemy zatem: "nameEls[i]"...
Dialogue: 0,0:03:08.12,0:03:11.71,Default,,0000,0000,0000,,".classList"...
Dialogue: 0,0:03:11.81,0:03:14.86,Default,,0000,0000,0000,,".add("catcolors")".
Dialogue: 0,0:03:15.95,0:03:19.60,Default,,0000,0000,0000,,Teraz jest ładniej,\Nale nie działa to wszędzie.
Dialogue: 0,0:03:19.68,0:03:23.92,Default,,0000,0000,0000,,Jeśli chcecie tego używać,\Nwejdźcie na "caniuse.com" i sprawdźcie,
Dialogue: 0,0:03:24.02,0:03:28.38,Default,,0000,0000,0000,,czy program obsługują przeglądarki,\Nz którymi ma współpracować wasza strona.
Dialogue: 0,0:03:28.48,0:03:32.24,Default,,0000,0000,0000,,To ładniejsze, ale nie jest miło,\Ngdy strona się zacina,
Dialogue: 0,0:03:32.33,0:03:36.48,Default,,0000,0000,0000,,bo używacie funkcji,\No której nie wie przeglądarka.
Dialogue: 0,0:03:36.65,0:03:38.07,Default,,0000,0000,0000,,Zlikwiduję to.
Dialogue: 0,0:03:38.15,0:03:41.59,Default,,0000,0000,0000,,Niech moja strona współpracuje\Nz wieloma przeglądarkami!
Dialogue: 0,0:03:41.73,0:03:46.12,Default,,0000,0000,0000,,Często chcemy zmieniać\Nstyle poszczególne,
Dialogue: 0,0:03:46.25,0:03:48.34,Default,,0000,0000,0000,,zamiast przypisywać nazwy klas.
Dialogue: 0,0:03:48.46,0:03:54.36,Default,,0000,0000,0000,,Powtarzam: pamiętajcie,\Nże macie oba te narzędzia.
Dialogue: 0,0:03:54.46,0:03:58.70,Default,,0000,0000,0000,,Decydujcie, które bardziej się przyda\Nw konkretnej sytuacji.