1
00:00:01,470 --> 00:00:02,790
OK, witamy z powrotem.

2
00:00:02,790 --> 00:00:05,340
Więc ten film będzie trochę inaczej.

3
00:00:05,340 --> 00:00:11,410
Nie zamierzamy wprowadzać żadnych nowych sposobów manipulowania DOM, ale mamy zamiar podjąć, czego nauczyliśmy się i zrobić trochę kodu razem.

4
00:00:11,640 --> 00:00:13,860
Więc mamy zamiar grać stronie głównej Google.

5
00:00:13,950 --> 00:00:20,080
Więc polecam, aby otworzyć Google albo zrobić to razem ze mną, czy to zrobić na własną rękę po obejrzeć film.

6
00:00:20,340 --> 00:00:23,780
A my będziemy po prostu zrobić kilka rzeczy zabawnych, jak zmienić logo.

7
00:00:23,940 --> 00:00:32,220
Zrobimy to obraz kotek tym razem, tylko żeby być fair w stosunku do tych wszystkich miłośników kotów zmieni wszystkie linki tak, że idą do bycia com kropka albo coś w tym stylu.

8
00:00:32,250 --> 00:00:43,710
Jeden punkt, który chcę podkreślić w tej lekcji jest to, że możemy użyć pętli manipulować wiele elementów, więc nie zawsze trzeba wybrać jedno i zmienić jego kolor lub wybierz jedno zdjęcie i zmienić jego źródło.

9
00:00:43,770 --> 00:00:49,440
Możemy wybrać wszystkie obrazy i następnie pętli tej listy, a dla każdego z nich zmienić swoje źródło.

10
00:00:49,470 --> 00:00:51,080
Więc mam zamiar pokazać, jak miałbym to zrobić tutaj.

11
00:00:51,300 --> 00:00:52,790
Więc zacznijmy proste.

12
00:00:53,100 --> 00:00:55,050
Zacznijmy wybierając to logo.

13
00:00:55,380 --> 00:01:01,730
A szybkie marginesie, jeśli jesteś w Google w dniu, w którym mają one Google Doodle zamiast regularny logo.

14
00:01:01,860 --> 00:01:03,640
To nie może być tutaj obraz.

15
00:01:03,780 --> 00:01:06,850
Czasami mają fantazyjne animacje i interaktywne gry.

16
00:01:06,930 --> 00:01:10,390
I w tym przypadku może to być coś podobnego elementu canvas.

17
00:01:10,470 --> 00:01:14,980
Więc jeśli nie napotka że podczas inspekcji To wszystko prawda można tylko oglądać tę część.

18
00:01:15,010 --> 00:01:22,100
Widzieliśmy już, jak zmienić źródło obrazu, ale po prostu chcę pokazać, że można to zrobić na stronie niczyjej aby go wybrać.

19
00:01:22,530 --> 00:01:26,680
Jest to obraz i ma identyfikator, dzięki czemu ułatwia.

20
00:01:26,850 --> 00:01:28,290
Logo HP.

21
00:01:28,410 --> 00:01:38,660
Warto więc wybrać, które nazwijmy to nasze logo równa udokumentować, że wybierak zapytania HP logo.

22
00:01:38,880 --> 00:01:42,090
I oczywiście, że mógł użyć elementu przez ID, jak również.

23
00:01:42,390 --> 00:01:46,210
Tak więc skończyć z logo równej.

24
00:01:46,320 --> 00:01:47,890
Więc my teraz, że wybrana.

25
00:01:48,030 --> 00:01:51,540
A jeśli chcemy zmienić obraz zrobimy zmienić źródło.

26
00:01:51,540 --> 00:01:55,530
Musimy wykorzystać zestaw atrybutów i ja właśnie obraz tutaj.

27
00:01:56,190 --> 00:01:57,650
Ładny kotek.

28
00:01:57,660 --> 00:01:59,070
Więc mam zamiar wykorzystać tę Kidan jesteś.

29
00:01:59,060 --> 00:02:04,540
Będę skopiować to i mam zamiar zaktualizować źródło tego logo, aby to zrobić.

30
00:02:04,650 --> 00:02:10,210
Czy logo kropka atrybut zamiast strachu.

31
00:02:10,380 --> 00:02:12,630
Idziemy po prostu napisać źródło.

32
00:02:12,810 --> 00:02:21,160
I drugi argument jest nowe źródło i nacisnąć enter i dostaję mój miły mały kota Roquette pojawić.

33
00:02:21,210 --> 00:02:22,760
Może pojawić się komunikat jak poniżej.

34
00:02:22,860 --> 00:02:24,720
W zależności od obrazu, którego używasz.

35
00:02:24,900 --> 00:02:26,770
Więc ja krótko wyjaśnić, co to jest.

36
00:02:26,910 --> 00:02:36,470
To tylko wspomnieć, że jesteśmy na stronie obciążonej TTP jak widać, że pojawiają się i obraz, który mam ustawić źródło do B jest H TTP.

37
00:02:36,570 --> 00:02:40,700
I aby to krótkie HTP jest bardziej bezpieczny niż HGP.

38
00:02:40,710 --> 00:02:46,400
Więc to skarży, że powinno być wszystko HTP Tak nie powinno być za pomocą czegoś mniej bezpieczny.

39
00:02:46,410 --> 00:02:49,560
To bardzo prosta wersja, ale nadal pozwala nam to zrobić.

40
00:02:49,560 --> 00:02:53,630
Nie jest to ogromny problem dla co my po prostu staramy się zrobić tutaj po prostu grając z Google.

41
00:02:53,670 --> 00:03:00,990
To jest coś, a jednak, że warto rozważyć, jeśli robi coś takiego we własnej aplikacji i byłoby problemem wtedy.

42
00:03:01,020 --> 00:03:03,070
Wracając do treści tutaj.

43
00:03:03,280 --> 00:03:11,230
Znaleziono zmienić szerokość i wysokość tego kota tak, że zajmuje tyle samo miejsca, że ​​oryginalne logo Google zrobił.

44
00:03:11,460 --> 00:03:19,800
Widzę, że rzeczywiście wysokość wynosiła 92 oryginalnie i było dwieście siedemdziesiąt dwa.

45
00:03:20,280 --> 00:03:22,130
A więc to, co się tutaj dzieje.

46
00:03:22,170 --> 00:03:36,300
Można sprawdzić, czy chcę to zmienić mogę zrobić coś takiego logo stylu kropka kropki i pobiera ciąg i po prostu zmienić na 500 pikseli.

47
00:03:36,810 --> 00:03:39,720
Widać, że rozciąga się i mogę robić to samo.

48
00:03:39,750 --> 00:03:41,530
Zmień go za tysiąc pikseli.

49
00:03:41,970 --> 00:03:45,750
Uzyskać ładny rozciągania kotka i możemy zmienić szerokość.

50
00:03:45,870 --> 00:03:51,900
Mam na myśli wysokość i zróbmy to 500 lub słabe kota.

51
00:03:51,900 --> 00:03:55,410
To jest po prostu coraz rozciągnięte w każdym miejscu.

52
00:03:55,590 --> 00:03:59,550
Więc śmiało i zresetować wysokość do czegoś trochę bardziej odpowiednie.

53
00:03:59,730 --> 00:04:13,070
Chodźmy na wysokość wynosi około 100 pikseli i szerokość wynosi około 200.

54
00:04:13,080 --> 00:04:16,590
Dobrze więc, że będzie pracować dla nas na razie tylko na trochę więcej praktyki.

55
00:04:16,590 --> 00:04:34,130
Załóżmy również nadać mu ramkę wokół tego obrazu tak, że logo styl obramowania równa i zrobimy solidną fioletowy granicy dwóch pikseli i jest naszym wspaniałym partnerem wokół tego obrazu.

56
00:04:34,410 --> 00:04:45,750
OK, więc teraz przejdźmy do tego, co przedstawiłem na początku filmu, który jest wybranie kilka elementów na raz i za pomocą pętli do manipulowania nimi zamiast zrobić to indywidualnie.

57
00:04:45,750 --> 00:04:48,980
Więc co mamy zamiar zrobić, to wybrać wszystkie znaczniki kotwicznych na stronie.

58
00:04:48,990 --> 00:04:50,740
Jest dużo linków na tej stronie.

59
00:04:50,820 --> 00:04:57,290
Jedziemy do podjęcia każdego z nich i zmienić atrybut ref, aby przejść do innej strony internetowej, a nie tam, gdzie idą.

60
00:04:57,510 --> 00:05:02,830
Więc zacząć musimy wybrać wszystkie znaczniki zakotwiczenia więc mamy kilka sposobów robić.

61
00:05:02,880 --> 00:05:07,170
Zamierzam go Linki są linki zadzwonić i zrobimy dokument.

62
00:05:07,170 --> 00:05:23,470
Mogliśmy zrobić do nas zapytania wszystko, ale mam zamiar zrobić uzyskać elementy wg nazwy tag tag kotwicy i jeśli spojrzymy na linki widać mamy sporo na tej stronie, więc jedziemy do pętli przez to.

63
00:05:23,550 --> 00:05:35,750
Nie możemy po prostu zrobić linki dot ustawiony atrybut, który nie istnieje mówi nam związek zaczyna się od atrybutu nie jest funkcją.

64
00:05:35,880 --> 00:05:40,860
A to dlatego, że atrybut istnieje tylko na poszczególnych elementów i linki.

65
00:05:40,860 --> 00:05:42,640
Jest to zbiór węzłów.

66
00:05:42,750 --> 00:05:47,960
Więc muszę pętli przez nią tak jak bym pętli jakiejkolwiek innej tablicy podobnego przedmiotu.

67
00:05:48,330 --> 00:05:51,590
Więc nie można użyć dla każdego, ponieważ nie jest prawdziwa tablica.

68
00:05:51,660 --> 00:05:54,880
Więc muszę użyć pętli for lub technicznie mogę użyć pętli while.

69
00:05:54,900 --> 00:05:56,310
Większość ludzi użyłby pętli for.

70
00:05:56,490 --> 00:06:14,160
Więc gdyż są równe zero jest mniejsza niż długość i linki, które doda 1, a następnie wewnątrz pętli mamy zamiar wejść do każdego z poszczególnych linków linku Hi.

71
00:06:14,340 --> 00:06:18,040
I zacznijmy po prostu drukując jej zawartość tekstową.

72
00:06:18,060 --> 00:06:22,850
Więc linków zawartość tekstową, a my anulować które zalogować tym.

73
00:06:24,090 --> 00:06:35,140
Więc jest to wspólny wzór pętli przez kilka elementów i robić coś może nie drukując go w konsoli, ale pokazujemy go w jakiś sposób zmienia coś o to zmieniając jego kolor.

74
00:06:35,420 --> 00:06:40,050
Tak trafiliśmy wejść i można zobaczyć, to jest treść tekstu wszystkie linki na stronie.

75
00:06:40,200 --> 00:06:50,460
Tak więc mamy wiedzieć takie rzeczy jak zdjęcia i przetłumaczyć Google Plus YouTube napędu odgrywają te wszystkie linki są gdzieś na tej stronie, która ma sens widząc, że jest to strona główna Google.

76
00:06:50,520 --> 00:07:05,570
Tak więc, zamiast po prostu wydrukować rzeczy w przeboju strzałki w górę i wrócić do tej pętli i niech zacząć zmieniając styl, dzięki czemu możemy zobaczyć długości łatwiej zróbmy je na inny kolor i zróbmy je mieć obramowanie wokół nich ,

77
00:07:05,910 --> 00:07:19,990
Więc mam zamiar pozbyć mojej konsoli, które zalogować i zamierzam zrobić lynx I styl, a my zmienić tło do rozpoczęcia i zróbmy to na różowo.

78
00:07:20,800 --> 00:07:25,050
A jeśli nacisnąć enter widać będę zamknąć konsolę.

79
00:07:25,080 --> 00:07:27,790
Wszystkie linki na stronie są teraz Różowy.

80
00:07:27,810 --> 00:07:29,120
Mam doświadczenie, co jest różowe.

81
00:07:29,280 --> 00:07:31,680
Więc to coś tu jest link.

82
00:07:31,750 --> 00:07:34,490
Wszystkie te tandetne są pozycje w przycisk Zaloguj.

83
00:07:34,830 --> 00:07:35,890
Jest też link.

84
00:07:36,270 --> 00:07:37,910
Więc zróbmy jeszcze jedno.

85
00:07:38,010 --> 00:07:39,140
Spójrzmy prawdzie w pętlę przez ponownie.

86
00:07:39,210 --> 00:07:43,870
Hit strzałki w górę i zróbmy kilka rzeczy, więc zróbmy styl.

87
00:07:43,910 --> 00:07:52,060
Granica jest równa jeden piksel i zróbmy Dasht fioletowy.

88
00:07:52,410 --> 00:08:04,980
A w następnej linii I łączy styl i zmieńmy kolor będzie pomarańczowy.

89
00:08:05,520 --> 00:08:07,880
Więc te dwa wciśnij enter.

90
00:08:07,890 --> 00:08:16,010
I widać możemy uzyskać te naprawdę piękne linków na stronie różowym tle maleńkiej purpurowy nie granicy zwykłym granicznej.

91
00:08:16,110 --> 00:08:18,090
To Dasht bardzo fantazyjne.

92
00:08:18,180 --> 00:08:20,610
A my trochę pomarańczowy tekst również tam.

93
00:08:21,240 --> 00:08:27,640
Ale jeśli je kliknięciem można zobaczyć, że pułapki jeszcze nie zmieniło i to ma sens, bo ich nie zmieniło.

94
00:08:27,750 --> 00:08:31,230
Więc chcę zmienić je wszystkie, aby przejść do WDW.

95
00:08:31,270 --> 00:08:36,590
Będąc dot com potrzeby, aby przejść do con. I mam już wybrane moje linki.

96
00:08:36,630 --> 00:08:41,620
Ten ogromny zbiór, a ja już, że pętla napisany tak będę go używać ponownie.

97
00:08:42,540 --> 00:08:45,680
I tylko powtórzyć to jest coś, co będzie robić dużo.

98
00:08:45,690 --> 00:08:51,070
Tak się komfortowo, jeśli można pisząc te cztery pętle, gdzie nie można użyć dla każdego.

99
00:08:51,090 --> 00:08:52,610
Więc musimy użyć pętli for.

100
00:08:52,680 --> 00:08:53,770
Robimy to cały czas.

101
00:08:53,790 --> 00:08:59,050
I od tego momentu, aż dojedziemy do Jey zapytania będziemy pisać tego typu linią partii.

102
00:08:59,310 --> 00:09:02,080
Więc mamy zamiar linki I.

103
00:09:02,430 --> 00:09:08,580
I mamy zamiar zacząć, ale po prostu drukuje się, gdzie każde światło idzie tak anulować ten dziennik.

104
00:09:10,050 --> 00:09:16,060
I mamy zamiar zrezygnować tego atrybutu dziennika get ATRA.

105
00:09:18,240 --> 00:09:19,770
Właśnie tak.

106
00:09:20,400 --> 00:09:25,740
A my nie technicznie trzeba wymyślić to, ale tak to jest łatwiejsze do zobaczenia.

107
00:09:26,250 --> 00:09:40,290
A my brakuje naszym stałym drukiem zamknięcia dziennika, aby zobaczyć tu i teraz możemy uzyskać listę wszystkich łączy, a to ciekawe widać, że niektóre z nich.

108
00:09:40,380 --> 00:09:45,090
Ten link do tej rzeczy javascript przodu zerowej lub nie.

109
00:09:45,150 --> 00:10:01,710
Dlatego niektóre z nich są po prostu pusta nie mieć 8 Tref niektóre z nich trafiają do oddzielnych stron internetowych lub niektóre z nich są ścieżki względne jak ten tutaj, a niektóre z nich są absolutne jak ten tutaj.

110
00:10:01,770 --> 00:10:02,310
OK.

111
00:10:02,490 --> 00:10:04,730
Więc teraz je zmienić.

112
00:10:04,890 --> 00:10:11,230
Compton-Rock blogach linki mam ustawiony atrybut i nie muszą stale zalogować go ustawić atrybut.

113
00:10:11,430 --> 00:10:17,400
I zmieńmy je za to, co chcemy HGF chcemy zmienić HPF być W.W ..

114
00:10:17,430 --> 00:10:25,930
To zrobić ukośnik HTP dwukropek ukośnik BW dot Bing dot com tak po prostu.

115
00:10:26,340 --> 00:10:27,930
A my wciskamy enter.

116
00:10:27,930 --> 00:10:29,570
To nie wygląda jak coś się zmieniło.

117
00:10:29,880 --> 00:10:32,650
Jeśli typ połączenia i po prostu patrzeć na to, co mamy.

118
00:10:32,820 --> 00:10:42,480
Każdy jeden idzie teraz do bycia dot com i możemy również sprawdzić jeden i widzimy w Inspektorze element, to idzie do bycia dot com.

119
00:10:42,780 --> 00:10:45,870
I ostatnia rzecz, którą robimy, żeby go przetestować to kliknąć jeden.

120
00:10:45,990 --> 00:10:52,860
Warto więc szybkie przycisk Zaloguj się lub niech zrezygnować z Gmaila i widać, że otwiera się do góry dla mnie.

121
00:10:53,580 --> 00:11:07,470
Więc Podsumowując wybraliśmy pęczek rzeczy zbiór linków a następnie przez pętlę tej kolekcji z pętli for a następnie wewnątrz pętli for, że możemy zrobić coś dla każdego pojedynczego elementu, który zostanie następnie powtarzane do wszystkich z nich.

122
00:11:07,500 --> 00:11:19,500
Więc zmieniłem kolor tła granicy kolor czcionki zmieniliśmy ref i mieliśmy tylko napisać kilka wierszy i nałożono na nie wiem, 20 lub 30 różnych długościach na tej stronie.

123
00:11:19,500 --> 00:11:22,470
Więc to jest wzór, który mamy zamiar używać dużo w ciągu najbliższych kilku filmów.