1
00:00:01,470 --> 00:00:02,790
OK bentornato.

2
00:00:02,790 --> 00:00:05,340
Quindi questo video sarà un po 'diverso.

3
00:00:05,340 --> 00:00:09,750
Non introdurremo nuovi modi di manipolare il dom, ma prenderemo ciò che abbiamo imparato e

4
00:00:09,780 --> 00:00:11,410
faremo un po 'di codice.

5
00:00:11,640 --> 00:00:13,860
Quindi giocheremo con la home page di Google.

6
00:00:13,950 --> 00:00:18,990
Quindi ti consiglio di aprire Google o farlo insieme a me o lo fai da solo dopo

7
00:00:18,990 --> 00:00:20,080
aver visto il video.

8
00:00:20,340 --> 00:00:23,780
E faremo solo alcune cose divertenti come cambiare il logo.

9
00:00:23,940 --> 00:00:28,530
Questa volta faremo una foto di un gattino solo per essere onesti con tutti quegli amanti dei gatti

10
00:00:28,530 --> 00:00:32,220
che cambieranno tutti i link in modo che diventino dot com o qualcosa del genere.

11
00:00:32,250 --> 00:00:37,410
L'unico punto che voglio sottolineare in questa lezione è che possiamo usare un ciclo per manipolare più

12
00:00:37,410 --> 00:00:42,810
elementi in modo da non dover sempre selezionare una cosa e cambiarne il colore o selezionare un'immagine

13
00:00:42,810 --> 00:00:43,710
e cambiarne l'origine.

14
00:00:43,770 --> 00:00:49,440
Possiamo selezionare tutte le immagini e quindi scorrere l'elenco e per ognuna cambiare la sua fonte.

15
00:00:49,470 --> 00:00:51,080
Quindi ti mostrerò come lo farei qui.

16
00:00:51,300 --> 00:00:52,790
Quindi inizieremo in modo semplice.

17
00:00:53,100 --> 00:00:55,050
Iniziamo selezionando questo logo.

18
00:00:55,380 --> 00:01:00,480
E una breve nota a margine se sei su Google in un giorno in cui hanno un doodle di Google

19
00:01:00,480 --> 00:01:01,730
invece di questo logo regolare.

20
00:01:01,860 --> 00:01:03,640
Potrebbe non essere un'immagine qui.

21
00:01:03,780 --> 00:01:06,850
A volte hanno animazioni fantasiose o giochi interattivi.

22
00:01:06,930 --> 00:01:10,390
E in tal caso potrebbero essere qualcosa come un elemento di tela.

23
00:01:10,470 --> 00:01:14,980
Quindi se lo incontri quando controlli, va bene, puoi solo guardare questa parte.

24
00:01:15,010 --> 00:01:19,650
immagini, ma voglio solo dimostrare che puoi farlo sul sito di chiunque, quindi selezionalo.

25
00:01:19,690 --> 00:01:22,100
Abbiamo già visto come cambiare le fonti di

26
00:01:22,530 --> 00:01:26,680
È un'immagine e ha un ID così che lo rende facile.

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

28
00:01:28,410 --> 00:01:34,100
Quindi selezioniamo che chiamiamolo il nostro logo equivale al documento che seleziona

29
00:01:37,320 --> 00:01:38,660
il logo HP.

30
00:01:38,880 --> 00:01:42,090
E naturalmente avremmo potuto usare anche l'elemento per ID.

31
00:01:42,390 --> 00:01:46,210
Quindi finiamo con Logo uguale a quello.

32
00:01:46,320 --> 00:01:47,890
Quindi ora lo abbiamo selezionato.

33
00:01:48,030 --> 00:01:51,540
E se vogliamo cambiare l'immagine, cambieremo la fonte.

34
00:01:51,540 --> 00:01:55,530
Dobbiamo usare l'attributo set e ho solo l'immagine qui.

35
00:01:56,190 --> 00:01:57,650
Bel gattino

36
00:01:57,660 --> 00:01:59,070
Quindi prenderò questo Kidan che sei.

37
00:01:59,060 --> 00:02:04,540
Lo copio e aggiornerò la fonte di questo logo per farlo.

38
00:02:04,650 --> 00:02:10,210
Do set logo dot attributo invece di paura.

39
00:02:10,380 --> 00:02:12,630
Stiamo per scrivere solo fonte.

40
00:02:12,810 --> 00:02:20,420
E il secondo argomento è la nuova fonte e premo invio e vedo apparire il mio simpatico gattino Roquette.

41
00:02:21,210 --> 00:02:22,760
Potresti ricevere un messaggio come questo.

42
00:02:22,860 --> 00:02:24,720
A seconda dell'immagine che usi.

43
00:02:24,900 --> 00:02:26,770
Quindi spiegherò brevemente di cosa si tratta.

44
00:02:26,910 --> 00:02:33,300
Sta solo dicendo che siamo su una pagina caricata con TTP come puoi vedere e l'immagine

45
00:02:33,300 --> 00:02:36,470
che ho impostato su B è H TTP.

46
00:02:36,570 --> 00:02:40,700
E per farla breve HTP è più sicuro di HGP.

47
00:02:40,710 --> 00:02:46,400
Quindi si lamenta che dovrebbe essere tutto HTP Sì, non dovremmo usare qualcosa di meno sicuro.

48
00:02:46,410 --> 00:02:49,560
Questa è una versione molto semplice, ma ci consente comunque di farlo.

49
00:02:49,560 --> 00:02:53,630
Non è un grosso problema per quello che stiamo cercando di fare qui semplicemente giocando con Google.

50
00:02:53,670 --> 00:02:58,020
È qualcosa però che vorresti considerare se fai qualcosa di simile

51
00:02:58,020 --> 00:03:00,990
nella tua applicazione e sarebbe un problema allora.

52
00:03:01,020 --> 00:03:03,070
Quindi torna al contenuto qui.

53
00:03:03,280 --> 00:03:09,330
Trovato per modificare la larghezza e l'altezza di questo gatto in modo che occupi la stessa quantità di spazio

54
00:03:09,570 --> 00:03:11,230
del logo originale di Google.

55
00:03:11,460 --> 00:03:19,800
Vedo in realtà che l'altezza era 92 originariamente e con era duecentosettantadue.

56
00:03:20,280 --> 00:03:22,130
E questo è quello che sta succedendo qui.

57
00:03:22,170 --> 00:03:31,510
Puoi vedere se voglio cambiarlo, posso fare qualcosa come questo punto con il logo dot style e prendere

58
00:03:31,530 --> 00:03:36,300
una stringa e cambiarla solo per essere 500 pixel.

59
00:03:36,810 --> 00:03:39,720
Puoi vederlo allungarsi e io posso fare la stessa cosa.

60
00:03:39,750 --> 00:03:41,530
Cambiarlo per essere un migliaio di pixel.

61
00:03:41,970 --> 00:03:45,750
Prendi un bel gattino elasticizzato e possiamo cambiare la larghezza.

62
00:03:45,870 --> 00:03:51,900
Intendo l'altezza e facciamo quel 500 o povero gatto.

63
00:03:51,900 --> 00:03:55,410
Si sta solo allungando dappertutto.

64
00:03:55,590 --> 00:03:59,550
Andiamo avanti e ripristiniamo l'altezza per qualcosa di un po 'più appropriato.

65
00:03:59,730 --> 00:04:06,690
Andiamo per l'altezza per essere circa 100 pixel e la

66
00:04:09,960 --> 00:04:13,070
larghezza per essere circa 200.

67
00:04:13,080 --> 00:04:16,590
Va bene, così lavoreremo per noi per ora solo per qualche altra pratica.

68
00:04:16,590 --> 00:04:26,040
Diamo anche un bordo intorno all'immagine in modo che il logo che il bordo dello stile sia uguale e faremo

69
00:04:26,040 --> 00:04:34,130
un bordo viola solido di due pixel e che ci sia il nostro meraviglioso partner attorno a quell'immagine.

70
00:04:34,410 --> 00:04:39,690
OK, passiamo ora a ciò che ho introdotto all'inizio del video, che seleziona un

71
00:04:39,690 --> 00:04:45,750
gruppo di elementi contemporaneamente e utilizza un ciclo per manipolarli invece di doverli fare individualmente.

72
00:04:45,750 --> 00:04:48,980
Quindi quello che faremo è selezionare tutti i tag di ancoraggio nella pagina.

73
00:04:48,990 --> 00:04:50,740
Ci sono molti link su questa pagina.

74
00:04:50,820 --> 00:04:56,600
Prenderemo ognuno di questi e cambiamo l'attributo ref per andare su un altro sito web piuttosto che

75
00:04:56,610 --> 00:04:57,290
dovunque vadano.

76
00:04:57,510 --> 00:05:02,830
Quindi per iniziare dobbiamo selezionare tutti i tag di ancoraggio, quindi abbiamo un sacco di modi per farlo.

77
00:05:02,880 --> 00:05:07,170
Ho intenzione di chiamarlo link sono collegamenti e faremo documenti.

78
00:05:07,170 --> 00:05:15,540
Potremmo fare una lettera di interrogazione tutto, ma ho intenzione di ottenere elementi dal tag tag anchor del nome del tag

79
00:05:15,540 --> 00:05:23,470
e se guardiamo i link potete vedere che ne otteniamo alcuni in questa pagina, quindi andremo a scorrere questo.

80
00:05:23,550 --> 00:05:35,070
possiamo semplicemente fare attributo dei punti dot set che non esiste ci dice che il link parte dall'attributo non è una funzione.

81
00:05:35,070 --> 00:05:35,750
Non

82
00:05:35,880 --> 00:05:40,860
E questo perché detto attributo esiste solo su singoli elementi e collegamenti.

83
00:05:40,860 --> 00:05:42,640
È questa raccolta di nodi.

84
00:05:42,750 --> 00:05:47,960
Quindi ho bisogno di passarci sopra come farei un loop su qualsiasi altro array come oggetto.

85
00:05:48,330 --> 00:05:51,590
Quindi non posso usare per ognuno perché non è un vero array.

86
00:05:51,660 --> 00:05:54,880
Quindi ho bisogno di usare un ciclo for o tecnicamente potrei usare un ciclo while.

87
00:05:54,900 --> 00:05:56,310
La maggior parte delle persone userebbe un ciclo for.

88
00:05:56,490 --> 00:06:05,640
tale lunghezza e verrà aggiunto 1 e quindi all'interno del ciclo accediamo a ogni singolo link link Ciao.

89
00:06:08,700 --> 00:06:14,160
Quindi per è uguale a zero è inferiore ai collegamenti

90
00:06:14,340 --> 00:06:18,040
E iniziamo semplicemente stampando il suo contenuto di testo.

91
00:06:18,060 --> 00:06:22,850
Quindi collega il contenuto del testo e cancelleremo quel registro.

92
00:06:24,090 --> 00:06:28,710
Quindi questo è uno schema comune che passa attraverso un gruppo di elementi e fa

93
00:06:28,710 --> 00:06:35,140
qualcosa che forse non lo stampa nella console ma lo mostra in qualche modo o cambia qualcosa cambiando il suo colore.

94
00:06:35,420 --> 00:06:40,050
Quindi premiamo invio e puoi vedere che questo è il contenuto testuale di tutti i link sulla pagina.

95
00:06:40,200 --> 00:06:46,320
Quindi ti facciamo conoscere cose come le foto e traduci Google e conduci il gioco su YouTube. Tutti questi link sono da qualche parte

96
00:06:46,320 --> 00:06:50,460
in questa pagina, il che ha senso visto che si tratta della home page di Google.

97
00:06:50,520 --> 00:06:56,460
Quindi piuttosto che stampare semplicemente le cose in un colpo con la freccia in su e tornare a questo ciclo e

98
00:06:56,460 --> 00:07:02,190
iniziamo effettivamente cambiando lo stile in modo che possiamo vedere le lunghezze più semplici facendole diventare un colore diverso e

99
00:07:02,610 --> 00:07:05,570
facciamo in modo che abbiano un bordo attorno a loro .

100
00:07:05,910 --> 00:07:14,520
Quindi mi sbarazzerò della mia console che registra e farò lo stile di lynx I e

101
00:07:15,150 --> 00:07:19,990
cambieremo lo sfondo per avviarlo e facciamolo diventare rosa.

102
00:07:20,800 --> 00:07:25,050
E se colpiamo invio, puoi vedere che chiudo la console.

103
00:07:25,080 --> 00:07:27,790
Tutti i link nella pagina sono ora rosa.

104
00:07:27,810 --> 00:07:29,120
Ho uno sfondo che è rosa.

105
00:07:29,280 --> 00:07:31,680
Quindi questa cosa qui è un link.

106
00:07:31,750 --> 00:07:34,490
Tutti questi naff sono elementi nel pulsante di accesso.

107
00:07:34,830 --> 00:07:35,890
È anche un link.

108
00:07:36,270 --> 00:07:37,910
Quindi facciamo un'altra cosa.

109
00:07:38,010 --> 00:07:39,140
Andiamo di nuovo in loop.

110
00:07:39,210 --> 00:07:43,870
Colpisci la freccia verso l'alto e facciamo un po 'di cose, quindi facciamo stile.

111
00:07:43,910 --> 00:07:52,060
Il bordo è uguale a un pixel e facciamo il viola a tratti.

112
00:07:52,410 --> 00:08:04,980
E sulla prossima linea i link mi stile e cambiamo il colore per essere arancione.

113
00:08:05,520 --> 00:08:07,880
Quindi quei due entrano.

114
00:08:07,890 --> 00:08:14,820
E puoi vedere che otteniamo questi bellissimi link sulla nostra pagina rosa con un bordo viola minuscolo non solo

115
00:08:14,820 --> 00:08:16,010
un bordo regolare.

116
00:08:16,110 --> 00:08:18,090
È molto elegante.

117
00:08:18,180 --> 00:08:20,610
E abbiamo anche del testo arancione.

118
00:08:21,240 --> 00:08:26,730
Ma se li clicchiamo possiamo vedere che le trappole non sono ancora cambiate e questo ha senso perché non

119
00:08:26,730 --> 00:08:27,640
le abbiamo cambiate.

120
00:08:27,750 --> 00:08:31,230
Quindi voglio cambiarli tutti per andare a WDW.

121
00:08:31,270 --> 00:08:36,590
Essere dot com deve andare alla truffa. E ho già selezionato i miei collegamenti.

122
00:08:36,630 --> 00:08:41,620
Questa enorme collezione e ho già quel ciclo scritto così ho intenzione di riutilizzarlo.

123
00:08:42,540 --> 00:08:45,680
E solo per ribadire questo è qualcosa che farà molto.

124
00:08:45,690 --> 00:08:51,070
Quindi mettiti comodo se riesci a scrivere questi quattro anelli in cui non possiamo usarne uno per ciascuno.

125
00:08:51,090 --> 00:08:52,610
Quindi dobbiamo usare un ciclo for.

126
00:08:52,680 --> 00:08:53,770
Lo facciamo sempre.

127
00:08:53,790 --> 00:08:59,050
E da qui in avanti fino a quando non arriveremo alla query di Jey scriveremo questo tipo di linea molto.

128
00:08:59,310 --> 00:09:02,080
Quindi andremo ai link I.

129
00:09:02,430 --> 00:09:08,580
E stiamo per iniziare, ma basta stampare dove va ogni luce in modo da cancellare quel registro.

130
00:09:10,050 --> 00:09:16,060
E cancelleremo quel log get attributo di atra.

131
00:09:18,240 --> 00:09:19,770
Proprio così.

132
00:09:20,400 --> 00:09:25,740
E tecnicamente non abbiamo bisogno di inventarlo ma solo così è più facile per te vederlo.

133
00:09:26,250 --> 00:09:33,990
E ci manca la nostra costante stampa di chiusura del registro per vedere qui e ora otteniamo un elenco di tutti i link ed

134
00:09:37,320 --> 00:09:40,290
è interessante che tu possa vedere alcuni di loro.

135
00:09:40,380 --> 00:09:45,090
Questo è il link a questa cosa javascript avanti zero o no.

136
00:09:45,150 --> 00:09:53,280
o alcuni di loro sono percorsi relativi come questo qui e alcuni di loro sono assoluti come questo qui.

137
00:09:53,280 --> 00:10:01,710
Quindi alcuni di loro sono solo vuoti, non hanno un 8 Tref, alcuni di loro vanno a siti web separati

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

139
00:10:02,490 --> 00:10:04,730
Quindi cambiamoli ora.

140
00:10:04,890 --> 00:10:11,230
Link al blog Compton-Rock Ho ottenuto l'attributo set e non è necessario registrarlo costantemente.

141
00:10:11,430 --> 00:10:17,400
E cambiamoli per essere ciò che vogliamo che HGF vogliamo cambiare HPF per essere W. W. Questo fa sì che i punti HTP dei due punti tagliano BW punto Bing punto com proprio così.

142
00:10:17,430 --> 00:10:25,930
E colpiamo invio.

143
00:10:26,340 --> 00:10:27,930
Non sembra che qualcosa sia cambiato.

144
00:10:27,930 --> 00:10:29,570
Se scriviamo i link e guardiamo solo quello che abbiamo.

145
00:10:29,880 --> 00:10:32,650
Ognuno ora va ad essere dot

146
00:10:32,820 --> 00:10:40,110
com e possiamo anche ispezionarne uno e possiamo vedere nell'ispettore elemento. Va ad essere dot com.

147
00:10:40,110 --> 00:10:42,480
E l'ultima cosa che facciamo per testarlo è cliccare su uno.

148
00:10:42,780 --> 00:10:45,870
Quindi apriamo rapidamente il pulsante di accesso o lasciamo Gmail e puoi vedere che si apre per me.

149
00:10:45,990 --> 00:10:52,860
Quindi, per riassumere, abbiamo selezionato un gruppo di cose una raccolta di link e quindi abbiamo fatto

150
00:10:53,580 --> 00:10:59,730
un ciclo attraverso quella raccolta con un ciclo for e quindi all'interno di quel ciclo

151
00:10:59,790 --> 00:11:05,580
possiamo fare qualcosa per ogni singolo elemento che verrà poi ripetuto a tutti loro.

152
00:11:05,580 --> 00:11:07,470
conoscere 20 o 30 lunghezze diverse su questa pagina.

153
00:11:07,500 --> 00:11:14,310
Così ho cambiato il colore di sfondo del bordo il colore del carattere abbiamo cambiato il ref e abbiamo solo dovuto scrivere poche righe e questo è stato applicato a non

154
00:11:14,310 --> 00:11:19,500
Questo è uno schema che utilizzeremo molto nei prossimi video.

155
00:11:19,500 --> 00:11:22,470