0:00:01.253,0:00:03.703
Oto moja strona o psach.

0:00:03.804,0:00:07.458
Za pomocą JavaScript i DOM-u

0:00:07.558,0:00:11.099
zrobię z niej stronę o kotach.

0:00:12.004,0:00:15.449
Nie zauważyłam bardzo ważnej rzeczy...

0:00:15.549,0:00:20.503
raczej psa, a nawet dwóch.

0:00:20.642,0:00:22.410
To te zdjęcia!

0:00:22.510,0:00:27.128
Na zdjęcia uroczych psów nie ma miejsca[br]na stronie o uroczych kotach.

0:00:27.228,0:00:29.071
Trzeba je zmienić.

0:00:30.232,0:00:32.826
Znajdźmy zdjęcia,

0:00:32.926,0:00:36.385
używając polecenia[br]"getElementsByTagName".

0:00:36.498,0:00:41.066
"var imageEls = document."...

0:00:41.166,0:00:45.984
"getElementsByTagName("img")".

0:00:47.809,0:00:53.260
To zwraca liczne elementy, musimy więc[br]skorzystać z pętli FOR, by je zamieniać.

0:00:53.443,0:00:56.383
Napiszę: "var i = 0;"...

0:00:56.483,0:01:02.392
"i < imageEls.length; i++".

0:01:04.132,0:01:04.922
Dobrze.

0:01:05.039,0:01:07.848
A co umieszczę w pętli FOR?

0:01:09.241,0:01:12.448
Nie zamienię zdjęć[br]za pomocą "innerHTML",

0:01:12.548,0:01:16.551
bo tagi zdjęć go nie mają.

0:01:16.651,0:01:18.923
To tagi zamykane automatycznie.

0:01:19.023,0:01:23.745
Muszę raczej zmienić to,[br]co sprawia, że są tu psy.

0:01:23.845,0:01:25.671
URL zdjęć,

0:01:25.771,0:01:30.300
określony atrybutem[br]"src" w każdym z tagów.

0:01:30.400,0:01:34.505
Możemy zmienić atrybuty[br]elementów, używając kropek.

0:01:34.626,0:01:35.962
Pokażę.

0:01:36.089,0:01:40.704
Wchodzimy do bieżącego elementu[br]w nawiasach kwadratowych

0:01:40.856,0:01:42.864
i wpisujemy kropkę

0:01:42.966,0:01:45.574
oraz nazwę atrybutu HTML

0:01:45.674,0:01:49.807
jako nazwę właściwości[br]JavaScript, czyli src.

0:01:49.907,0:01:52.618
Dalej - "="...[br]I wstawiamy nową wartość.

0:01:52.718,0:01:54.379
Ja zrobię pusty ciąg.

0:01:54.479,0:01:56.906
Zobaczcie: zdjęcia stały się białe,

0:01:57.006,0:02:00.293
bo pusty ciąg[br]nie wskazuje żadnego obrazu.

0:02:01.439,0:02:06.955
Żeby określić, jaki powinien[br]być nowy URL, wkleję stary

0:02:07.709,0:02:11.146
i zmienię nazwę pliku na "cat" (kot),

0:02:11.308,0:02:15.726
bo wiem, że to jest URL[br]zdjęcia kota w Khan Academy.

0:02:16.590,0:02:19.598
Tak! Psy stały się kotami.

0:02:19.697,0:02:22.384
Kotyfikacja dobiega końca.

0:02:23.136,0:02:27.678
Widzicie jeszcze coś,[br]co ma związek z psami?

0:02:27.787,0:02:30.262
Trudno to zauważyć,

0:02:30.362,0:02:34.017
ale jest: link do Wikipedii.

0:02:34.947,0:02:36.874
Odsyła do strony o psach.

0:02:37.007,0:02:40.828
Spłatam użytkownikom[br]paskudnego figla.

0:02:40.911,0:02:44.151
Niech link łączy ich[br]ze stroną o kotach.

0:02:44.234,0:02:46.951
Jak znajdę ten link w JavaScript?

0:02:47.091,0:02:49.301
Mogłabym nadać mu ID

0:02:49.384,0:02:51.827
i użyć polecenia "getElementById".

0:02:51.927,0:02:54.318
Mogę też użyć[br]"getElementsByTagName"

0:02:54.417,0:02:56.976
i zmienić wszystkie linki na stronie.

0:02:57.076,0:02:59.202
Albo, w wyrafinowany sposób,

0:02:59.318,0:03:02.989
znajdę tylko linki[br]odsyłające do stron o psach.

0:03:03.089,0:03:05.202
Użyję selektora zapytań CSS.

0:03:06.804,0:03:11.471
Pokażę wam zapytanie CSS,[br]które chcę wpisać w tag "style".

0:03:11.579,0:03:16.164
To zapytanie znajdzie wszystkie linki[br]mające coś wspólnego z psami.

0:03:16.247,0:03:19.018
Najpierw wpiszę "a",[br]bo szukam linków.

0:03:19.137,0:03:25.018
Potem: [href*="Dog"].

0:03:25.705,0:03:27.725
Tym poleceniem każę CSS-owi

0:03:27.825,0:03:31.696
dopasować linki[br]mające w sobie "Dog".

0:03:31.796,0:03:34.920
A później zmienimy kolor na fiolet.

0:03:36.067,0:03:37.454
Hura, udało się!

0:03:38.290,0:03:41.531
Dobry sposób![br]To jest selektor atrybutów.

0:03:41.631,0:03:45.984
Znamy wiele świetnych sposobów[br]używania selektorów atrybutów,

0:03:46.100,0:03:48.693
by sięgnąć głęboko do dokumentu.

0:03:49.339,0:03:53.376
Aby znaleźć to w JavaScript,

0:03:53.476,0:03:56.848
możemy użyć polecenia[br]"document.querySelectorAll".

0:03:57.006,0:04:00.154
Napiszę: "var linkEls ="...

0:04:00.254,0:04:03.763
"document.querySelectorAll".

0:04:04.320,0:04:06.772
Później możemy wklejać różne rzeczy

0:04:06.872,0:04:09.493
w tym nowym selektorze.

0:04:10.775,0:04:14.724
Pamiętajmy tylko,[br]żeby usunąć cudzysłowy.

0:04:15.236,0:04:16.236
Już.

0:04:18.644,0:04:22.687
Teraz wygląda to jak porządny ciąg.

0:04:22.787,0:04:24.893
Będę zmieniać elementy.

0:04:24.974,0:04:27.217
Jeszcze raz zrobimy pętlę FOR.

0:04:27.317,0:04:31.270
Powinniście już przywyknąć[br]do tworzenia tych pętli.

0:04:31.370,0:04:32.575
"I++"...

0:04:33.131,0:04:37.666
Każda ma zmieniać link

0:04:37.766,0:04:41.404
i kierować do strony o kotach[br]w Wikipedii.

0:04:41.504,0:04:45.721
Napiszę więc: "linkEls[i].href",

0:04:45.823,0:04:50.249
bo to jest nazwa atrybutu,[br]którą zmieniamy... i dalej "=".

0:04:50.365,0:04:54.229
Teraz znajdę ten URL

0:04:55.027,0:04:57.052
i wkleję go tutaj.

0:04:57.618,0:04:59.877
Zmienię na "kot",

0:04:59.977,0:05:04.097
bo wiem na pewno,[br]że to jest URL tej strony.

0:05:04.213,0:05:08.117
Hura, kotyfikacja świata się dokonała!

0:05:08.799,0:05:14.444
Ale nie skończyliście uczyć się o tym,[br]jak zmieniać strony. Oglądajcie dalej!