1
00:00:01,253 --> 00:00:03,703
Oto moja strona o psach.

2
00:00:03,804 --> 00:00:07,458
Za pomocą JavaScript i DOM-u

3
00:00:07,558 --> 00:00:11,099
zrobię z niej stronę o kotach.

4
00:00:12,004 --> 00:00:15,449
Nie zauważyłam bardzo ważnej rzeczy...

5
00:00:15,549 --> 00:00:20,503
raczej psa, a nawet dwóch.

6
00:00:20,642 --> 00:00:22,410
To te zdjęcia!

7
00:00:22,510 --> 00:00:27,128
Na zdjęcia uroczych psów nie ma miejsca
na stronie o uroczych kotach.

8
00:00:27,228 --> 00:00:29,071
Trzeba je zmienić.

9
00:00:30,232 --> 00:00:32,826
Znajdźmy zdjęcia,

10
00:00:32,926 --> 00:00:36,385
używając polecenia
"getElementsByTagName".

11
00:00:36,498 --> 00:00:41,066
"var imageEls = document."...

12
00:00:41,166 --> 00:00:45,984
"getElementsByTagName("img")".

13
00:00:47,809 --> 00:00:53,260
To zwraca liczne elementy, musimy więc
skorzystać z pętli FOR, by je zamieniać.

14
00:00:53,443 --> 00:00:56,383
Napiszę: "var i = 0;"...

15
00:00:56,483 --> 00:01:02,392
"i < imageEls.length; i++".

16
00:01:04,132 --> 00:01:04,922
Dobrze.

17
00:01:05,039 --> 00:01:07,848
A co umieszczę w pętli FOR?

18
00:01:09,241 --> 00:01:12,448
Nie zamienię zdjęć
za pomocą "innerHTML",

19
00:01:12,548 --> 00:01:16,551
bo tagi zdjęć go nie mają.

20
00:01:16,651 --> 00:01:18,923
To tagi zamykane automatycznie.

21
00:01:19,023 --> 00:01:23,745
Muszę raczej zmienić to,
co sprawia, że są tu psy.

22
00:01:23,845 --> 00:01:25,671
URL zdjęć,

23
00:01:25,771 --> 00:01:30,300
określony atrybutem
"src" w każdym z tagów.

24
00:01:30,400 --> 00:01:34,505
Możemy zmienić atrybuty
elementów, używając kropek.

25
00:01:34,626 --> 00:01:35,962
Pokażę.

26
00:01:36,089 --> 00:01:40,704
Wchodzimy do bieżącego elementu
w nawiasach kwadratowych

27
00:01:40,856 --> 00:01:42,864
i wpisujemy kropkę

28
00:01:42,966 --> 00:01:45,574
oraz nazwę atrybutu HTML

29
00:01:45,674 --> 00:01:49,807
jako nazwę właściwości
JavaScript, czyli src.

30
00:01:49,907 --> 00:01:52,618
Dalej - "="...
I wstawiamy nową wartość.

31
00:01:52,718 --> 00:01:54,379
Ja zrobię pusty ciąg.

32
00:01:54,479 --> 00:01:56,906
Zobaczcie: zdjęcia stały się białe,

33
00:01:57,006 --> 00:02:00,293
bo pusty ciąg
nie wskazuje żadnego obrazu.

34
00:02:01,439 --> 00:02:06,955
Żeby określić, jaki powinien
być nowy URL, wkleję stary

35
00:02:07,709 --> 00:02:11,146
i zmienię nazwę pliku na "cat" (kot),

36
00:02:11,308 --> 00:02:15,726
bo wiem, że to jest URL
zdjęcia kota w Khan Academy.

37
00:02:16,590 --> 00:02:19,598
Tak! Psy stały się kotami.

38
00:02:19,697 --> 00:02:22,384
Kotyfikacja dobiega końca.

39
00:02:23,136 --> 00:02:27,678
Widzicie jeszcze coś,
co ma związek z psami?

40
00:02:27,787 --> 00:02:30,262
Trudno to zauważyć,

41
00:02:30,362 --> 00:02:34,017
ale jest: link do Wikipedii.

42
00:02:34,947 --> 00:02:36,874
Odsyła do strony o psach.

43
00:02:37,007 --> 00:02:40,828
Spłatam użytkownikom
paskudnego figla.

44
00:02:40,911 --> 00:02:44,151
Niech link łączy ich
ze stroną o kotach.

45
00:02:44,234 --> 00:02:46,951
Jak znajdę ten link w JavaScript?

46
00:02:47,091 --> 00:02:49,301
Mogłabym nadać mu ID

47
00:02:49,384 --> 00:02:51,827
i użyć polecenia "getElementById".

48
00:02:51,927 --> 00:02:54,318
Mogę też użyć
"getElementsByTagName"

49
00:02:54,417 --> 00:02:56,976
i zmienić wszystkie linki na stronie.

50
00:02:57,076 --> 00:02:59,202
Albo, w wyrafinowany sposób,

51
00:02:59,318 --> 00:03:02,989
znajdę tylko linki
odsyłające do stron o psach.

52
00:03:03,089 --> 00:03:05,202
Użyję selektora zapytań CSS.

53
00:03:06,804 --> 00:03:11,471
Pokażę wam zapytanie CSS,
które chcę wpisać w tag "style".

54
00:03:11,579 --> 00:03:16,164
To zapytanie znajdzie wszystkie linki
mające coś wspólnego z psami.

55
00:03:16,247 --> 00:03:19,018
Najpierw wpiszę "a",
bo szukam linków.

56
00:03:19,137 --> 00:03:25,018
Potem: [href*="Dog"].

57
00:03:25,705 --> 00:03:27,725
Tym poleceniem każę CSS-owi

58
00:03:27,825 --> 00:03:31,696
dopasować linki
mające w sobie "Dog".

59
00:03:31,796 --> 00:03:34,920
A później zmienimy kolor na fiolet.

60
00:03:36,067 --> 00:03:37,454
Hura, udało się!

61
00:03:38,290 --> 00:03:41,531
Dobry sposób!
To jest selektor atrybutów.

62
00:03:41,631 --> 00:03:45,984
Znamy wiele świetnych sposobów
używania selektorów atrybutów,

63
00:03:46,100 --> 00:03:48,693
by sięgnąć głęboko do dokumentu.

64
00:03:49,339 --> 00:03:53,376
Aby znaleźć to w JavaScript,

65
00:03:53,476 --> 00:03:56,848
możemy użyć polecenia
"document.querySelectorAll".

66
00:03:57,006 --> 00:04:00,154
Napiszę: "var linkEls ="...

67
00:04:00,254 --> 00:04:03,763
"document.querySelectorAll".

68
00:04:04,320 --> 00:04:06,772
Później możemy wklejać różne rzeczy

69
00:04:06,872 --> 00:04:09,493
w tym nowym selektorze.

70
00:04:10,775 --> 00:04:14,724
Pamiętajmy tylko,
żeby usunąć cudzysłowy.

71
00:04:15,236 --> 00:04:16,236
Już.

72
00:04:18,644 --> 00:04:22,687
Teraz wygląda to jak porządny ciąg.

73
00:04:22,787 --> 00:04:24,893
Będę zmieniać elementy.

74
00:04:24,974 --> 00:04:27,217
Jeszcze raz zrobimy pętlę FOR.

75
00:04:27,317 --> 00:04:31,270
Powinniście już przywyknąć
do tworzenia tych pętli.

76
00:04:31,370 --> 00:04:32,575
"I++"...

77
00:04:33,131 --> 00:04:37,666
Każda ma zmieniać link

78
00:04:37,766 --> 00:04:41,404
i kierować do strony o kotach
w Wikipedii.

79
00:04:41,504 --> 00:04:45,721
Napiszę więc: "linkEls[i].href",

80
00:04:45,823 --> 00:04:50,249
bo to jest nazwa atrybutu,
którą zmieniamy... i dalej "=".

81
00:04:50,365 --> 00:04:54,229
Teraz znajdę ten URL

82
00:04:55,027 --> 00:04:57,052
i wkleję go tutaj.

83
00:04:57,618 --> 00:04:59,877
Zmienię na "kot",

84
00:04:59,977 --> 00:05:04,097
bo wiem na pewno,
że to jest URL tej strony.

85
00:05:04,213 --> 00:05:08,117
Hura, kotyfikacja świata się dokonała!

86
00:05:08,799 --> 00:05:14,444
Ale nie skończyliście uczyć się o tym,
jak zmieniać strony. Oglądajcie dalej!