1
00:00:00,000 --> 00:00:04,439

2
00:00:04,439 --> 00:00:07,230
DOUG LLOYD: In questo video, abbiamo voluto
per richiamare l'attenzione separata

3
00:00:07,230 --> 00:00:09,110
ad una particolare
elemento di JavaScript

4
00:00:09,110 --> 00:00:11,350
che si potrebbe trovare a portata di mano
quando si sta iniziando

5
00:00:11,350 --> 00:00:15,750
lavorare sulla manipolazione pagine web e
cambiare il contenuto della tua pagina web

6
00:00:15,750 --> 00:00:16,460
al volo.

7
00:00:16,460 --> 00:00:19,450
E questo è il concetto di
il Document Object Model.

8
00:00:19,450 --> 00:00:23,030
Così come abbiamo visto nel nostro video
JavaScript, gli oggetti sono molto flessibili.

9
00:00:23,030 --> 00:00:24,750
>> E possono contenere vari campi.

10
00:00:24,750 --> 00:00:28,075
E anche se non siamo andati in un sacco di
dettaglio, quei campi o proprietà,

11
00:00:28,075 --> 00:00:30,200
che ci sarebbe probabilmente più
opportunamente li chiamano

12
00:00:30,200 --> 00:00:33,915
nel contesto di un oggetto, anche
queste proprietà possono essere altri oggetti.

13
00:00:33,915 --> 00:00:36,210
E all'interno di tali oggetti
può essere altri oggetti.

14
00:00:36,210 --> 00:00:39,630
>> Hai questo oggetto molto grande
con un sacco di altri oggetti

15
00:00:39,630 --> 00:00:43,550
all'interno di esso, che tipo di
crea questa idea di un grande albero.

16
00:00:43,550 --> 00:00:47,540
Ora, l'oggetto documento è un
oggetto molto speciale in JavaScript

17
00:00:47,540 --> 00:00:52,580
che organizza l'intero Web
pagina sotto questa sorta di ombrello

18
00:00:52,580 --> 00:00:53,470
di un oggetto.

19
00:00:53,470 --> 00:00:56,770
E così all'interno del documento
oggetti sono oggetti che presentano

20
00:00:56,770 --> 00:00:59,630
la testa e il corpo della pagina web.

21
00:00:59,630 --> 00:01:03,760
>> All'interno di questi sono altri
oggetti, eccetera, eccetera,

22
00:01:03,760 --> 00:01:08,411
fino a quando l'intera pagina web ha
organizzata in questo grande oggetto.

23
00:01:08,411 --> 00:01:09,660
Qual è il rialzo qui, giusto?

24
00:01:09,660 --> 00:01:12,170
Beh, sappiamo come lavorare
con gli oggetti in JavaScript.

25
00:01:12,170 --> 00:01:15,840
>> Quindi, se abbiamo un oggetto che
si riferisce a tutta la nostra pagina web, che

26
00:01:15,840 --> 00:01:19,590
significa chiamando il corretto
metodi per manipolare l'oggetto

27
00:01:19,590 --> 00:01:22,360
o la modifica di alcuni
delle sue proprietà, abbiamo

28
00:01:22,360 --> 00:01:25,500
può modificare gli elementi di
nostra pagina di programmazione

29
00:01:25,500 --> 00:01:30,210
utilizzando JavaScript invece di avere
per codificare le cose con, ad esempio, HTML.

30
00:01:30,210 --> 00:01:33,760
Quindi, ecco un esempio di un
molto semplice pagina web, giusto?

31
00:01:33,760 --> 00:01:35,850
E 'ottenuto i tag HTML, una testa.

32
00:01:35,850 --> 00:01:37,979
>> All'interno di ci è un titolo, ciao mondo.

33
00:01:37,979 --> 00:01:38,770
Poi ho un corpo.

34
00:01:38,770 --> 00:01:40,686
All'interno di questo, ho
tre cose diverse.

35
00:01:40,686 --> 00:01:44,170
Ho un tag di intestazione h2,
un paragrafo, e un link.

36
00:01:44,170 --> 00:01:45,920
Questo è molto semplice pagina web.

37
00:01:45,920 --> 00:01:48,590
>> Ebbene, che cosa potrebbe essere il documento
opporsi per questo look, come?

38
00:01:48,590 --> 00:01:50,700
Beh, è ​​un po '
pauroso forse in un primo momento.

39
00:01:50,700 --> 00:01:52,510
Ma è davvero solo un grande albero.

40
00:01:52,510 --> 00:01:54,890
E alla radice di esso è documento.

41
00:01:54,890 --> 00:02:00,030
>> All'interno del documento è un'altra
oggetto che fa riferimento al codice HTML della mia pagina.

42
00:02:00,030 --> 00:02:02,660
E il codice HTML della mia pagina è tutto questo.

43
00:02:02,660 --> 00:02:06,900
E poi all'interno del HTML
oggetto, ho un oggetto di testa,

44
00:02:06,900 --> 00:02:09,000
che si riferisce a tutto quello che c'è.

45
00:02:09,000 --> 00:02:11,009
>> E dentro di lì,
Ho un oggetto titolo.

46
00:02:11,009 --> 00:02:15,620
E dentro di lì, ho un altro
oggetto che è appena ciao mondo.

47
00:02:15,620 --> 00:02:18,020
Ho potuto avere il mio corpo
rappresentata come questo.

48
00:02:18,020 --> 00:02:22,850
>> All'interno del mio corpo, ho un h2
oggetto e un oggetto p per punto

49
00:02:22,850 --> 00:02:25,270
e un oggetto per un collegamento.

50
00:02:25,270 --> 00:02:29,660
E così questo intera gerarchia
può essere rappresentato come un grande albero

51
00:02:29,660 --> 00:02:31,990
con tanto di piccolo piccolo
cose provenienti da esso.

52
00:02:31,990 --> 00:02:33,740
Ora, naturalmente, quando
stiamo programmando, abbiamo

53
00:02:33,740 --> 00:02:35,560
non pensare a cose come un grande albero.

54
00:02:35,560 --> 00:02:37,980
Vogliamo vedere reale
codice cose relative.

55
00:02:37,980 --> 00:02:40,790
>> E per fortuna, possiamo
utilizzare i nostri strumenti di sviluppo

56
00:02:40,790 --> 00:02:46,080
a prendere in realtà uno sguardo a
documento oggetto di questo sito web.

57
00:02:46,080 --> 00:02:48,150
E facciamolo.

58
00:02:48,150 --> 00:02:49,580
Così ho aperto un tab del browser.

59
00:02:49,580 --> 00:02:51,540
>> E ho aperto il Developer Tools.

60
00:02:51,540 --> 00:02:54,460
E nel mio video su JavaScript, io
detto che la console non è

61
00:02:54,460 --> 00:02:56,770
solo un posto dove
stampiamo informazioni,

62
00:02:56,770 --> 00:02:59,560
è anche un luogo dove
possiamo inserire informazioni.

63
00:02:59,560 --> 00:03:01,380
In questo contesto, cosa
Io vado a dire è

64
00:03:01,380 --> 00:03:05,720
Mi piacerebbe tornare
gli oggetti documento,

65
00:03:05,720 --> 00:03:07,502
così posso iniziare a dare un'occhiata a questo.

66
00:03:07,502 --> 00:03:08,460
Quindi, come potrei fare questo?

67
00:03:08,460 --> 00:03:10,740
Beh, se voglio
organizzarlo davvero bene,

68
00:03:10,740 --> 00:03:16,317
Io vado a dire console.dir, D-I-R.
Ora, io uso console.log a solo stampa

69
00:03:16,317 --> 00:03:17,400
fuori qualcosa di molto semplice.

70
00:03:17,400 --> 00:03:20,450
Ma se voglio organizzare questo
gerarchicamente come un oggetto,

71
00:03:20,450 --> 00:03:23,800
Lo voglio sorta di struttura
come una struttura di directory.

72
00:03:23,800 --> 00:03:27,400
>> Quindi voglio console.dir documento.

73
00:03:27,400 --> 00:03:28,430
Ho intenzione di premere Invio.

74
00:03:28,430 --> 00:03:32,350
E proprio sotto di esso ora,
e io lo zoom a qui,

75
00:03:32,350 --> 00:03:36,000
Ho questo documento di risposta
con una piccola freccia accanto.

76
00:03:36,000 --> 00:03:39,470
Ora, quando apro questa freccia,
ci sara 'un sacco di roba.

77
00:03:39,470 --> 00:03:42,560
>> Ma stiamo andando a ignorare un sacco
di essa e solo tipo di messa a fuoco

78
00:03:42,560 --> 00:03:46,250
sulla parte più importante, quindi abbiamo
può cominciare a navigare in questo documento.

79
00:03:46,250 --> 00:03:50,125
C'è molto di più per il DOM di
nodi e nodi figlio solo genitore.

80
00:03:50,125 --> 00:03:51,500
C'è un sacco di roba accessoria.

81
00:03:51,500 --> 00:03:52,280
>> Quindi ho intenzione di aprire questo.

82
00:03:52,280 --> 00:03:54,610
E ci sono un bel po '
di roba che si apre.

83
00:03:54,610 --> 00:03:59,000
Ma tutto quello che interessa è
proprio qui, nodi figli.

84
00:03:59,000 --> 00:04:00,410
Apriamo che fino.

85
00:04:00,410 --> 00:04:03,810
>> All'interno ci vedo
qualcosa di familiare, HTML.

86
00:04:03,810 --> 00:04:07,670
Così all'interno del nostro documento
un livello inferiore, HTML.

87
00:04:07,670 --> 00:04:08,550
Apro che fino.

88
00:04:08,550 --> 00:04:10,380
Cosa stiamo aspettando?

89
00:04:10,380 --> 00:04:13,760
>> Se vi ricordate dal nostro schema,
cosa dobbiamo trovare dentro di HTML?

90
00:04:13,760 --> 00:04:17,275
Quali sono i due nodi sono sotto di esso nella struttura?

91
00:04:17,275 --> 00:04:17,899
Scopriamolo.

92
00:04:17,899 --> 00:04:18,940
Apriamo HTML.

93
00:04:18,940 --> 00:04:22,079
Scendiamo ai suoi nodi figlio.

94
00:04:22,079 --> 00:04:23,440
>> Pop che si aprono.

95
00:04:23,440 --> 00:04:25,990
C'è testa e il corpo.

96
00:04:25,990 --> 00:04:28,540
E possiamo aprire la testa.

97
00:04:28,540 --> 00:04:30,460
Vai ai suoi nodi figlio.

98
00:04:30,460 --> 00:04:31,460
Beh, c'è il titolo.

99
00:04:31,460 --> 00:04:33,293
>> E potremmo andare avanti all'infinito
avanti così per sempre.

100
00:04:33,293 --> 00:04:34,770
Potremmo farlo con corpo.

101
00:04:34,770 --> 00:04:40,090
Ma c'è un modo per noi di guardare
il documento organizzato come un grande oggetto.

102
00:04:40,090 --> 00:04:42,610
E se guardiamo è un grande
oggetto che assomiglia molto

103
00:04:42,610 --> 00:04:47,480
come il codice, il che significa che possiamo iniziare
per manipolare questo grande oggetto utilizzando

104
00:04:47,480 --> 00:04:51,220
codice per modificare ciò che il nostro
sito web guarda e si sente come.

105
00:04:51,220 --> 00:04:54,920
>> Ecco, questo è uno strumento molto potente
abbiamo a nostra disposizione ora.

106
00:04:54,920 --> 00:04:57,360
Quindi, come abbiamo appena visto, il
documento oggetto stesso

107
00:04:57,360 --> 00:05:01,392
e tutti gli oggetti all'interno di essa
hanno proprietà e metodi, appena

108
00:05:01,392 --> 00:05:04,100
come qualsiasi altro oggetto che abbiamo
lavorato con in JavaScript.

109
00:05:04,100 --> 00:05:08,370
Ma possiamo usare tali proprietà e
utilizzare gli stessi metodi per tipo di drill-down

110
00:05:08,370 --> 00:05:10,900
dal grande documento e ottenere
più bassa e più in basso,

111
00:05:10,900 --> 00:05:13,360
più fini chicchi
di dettaglio, fino a quando non

112
00:05:13,360 --> 00:05:17,510
arrivare a un pezzo molto specifico della nostra
pagina web che vogliamo cambiare.

113
00:05:17,510 --> 00:05:22,700
>> E quando si aggiorna le proprietà del
Document Object o chiamare quei metodi,

114
00:05:22,700 --> 00:05:24,450
le cose potrebbero accadere nella nostra pagina web.

115
00:05:24,450 --> 00:05:28,420
E non abbiamo bisogno di fare qualsiasi rinfrescante
di avere quelle modifiche abbiano effetto.

116
00:05:28,420 --> 00:05:33,160
>> E questa è una capacità abbastanza freddo per
avere quando stiamo lavorando con il codice.

117
00:05:33,160 --> 00:05:37,185
Ma quali sono alcune di queste proprietà
che fanno parte di un oggetto di documento?

118
00:05:37,185 --> 00:05:40,100
Beh, probabilmente visto un
paio di loro molto rapidamente

119
00:05:40,100 --> 00:05:42,700
come siamo stati zippare
attraverso il documento gigante

120
00:05:42,700 --> 00:05:45,150
oggetto abbiamo appena visto nel browser web.

121
00:05:45,150 --> 00:05:48,420
>> Ma un paio di queste proprietà
potrebbe essere cose come HTML interno.

122
00:05:48,420 --> 00:05:52,950
E si potrebbe anche me ricordare
Utilizzando questo nel video JavaScript

123
00:05:52,950 --> 00:05:54,950
alla fine quando
stava parlando eventi.

124
00:05:54,950 --> 00:05:56,125
Qual era questo HTML interno?

125
00:05:56,125 --> 00:05:59,030
Beh, è ​​proprio ciò che è
tra i tag.

126
00:05:59,030 --> 00:06:01,590
>> E così il codice HTML interno,
per esempio, del titolo

127
00:06:01,590 --> 00:06:05,390
tag, se avessimo continuato ad andare in
che l'esempio di un momento fa,

128
00:06:05,390 --> 00:06:08,020
sarebbe stato ciao mondo.

129
00:06:08,020 --> 00:06:10,140
Questo era il titolo della nostra pagina.

130
00:06:10,140 --> 00:06:12,370
Altre proprietà
includere il nome del nodo, che

131
00:06:12,370 --> 00:06:15,810
è il nome di un HTML
elemento come titolo.

132
00:06:15,810 --> 00:06:19,100
ID, che è l'ID
attributo di un elemento HTML.

133
00:06:19,100 --> 00:06:23,790
>> Ricordiamo che siamo in grado di indicare appositamente
elementi specifici della nostra HTML

134
00:06:23,790 --> 00:06:27,510
con un attributo ID, che di solito
torna utile nel contesto di CSS,

135
00:06:27,510 --> 00:06:29,000
specificamente.

136
00:06:29,000 --> 00:06:33,217
Nodo padre, che è un riferimento a
ciò che è appena sopra di me nel DOM.

137
00:06:33,217 --> 00:06:35,800
E nodi figlio, che è un
riferimento a ciò che è in basso sotto di me.

138
00:06:35,800 --> 00:06:37,950
E abbiamo visto un sacco di che
solo guardando attraverso.

139
00:06:37,950 --> 00:06:42,970
Nodi figlio, ecco come siamo arrivati
più in basso nell'albero.

140
00:06:42,970 --> 00:06:46,590
>> Attributi, questo è solo un array
di attributi dell'elemento HTML.

141
00:06:46,590 --> 00:06:50,270
Così un esempio di attributi potrebbe
essere se si dispone di un tag di immagine,

142
00:06:50,270 --> 00:06:54,090
di solito ha un attributo di origine,
forse un altezza e un attributo width.

143
00:06:54,090 --> 00:06:57,120
E perché sarebbe solo essere un array
di tutti gli attributi associati

144
00:06:57,120 --> 00:06:59,300
con tale elemento HTML.

145
00:06:59,300 --> 00:07:04,140
>> Style è un altro che
cosa rappresenta il CSS

146
00:07:04,140 --> 00:07:06,050
designazione di un particolare elemento.

147
00:07:06,050 --> 00:07:08,310
E più tardi in questo
video, faremo in particolare

148
00:07:08,310 --> 00:07:14,592
stile leva per fare un paio
di modifiche al nostro sito web.

149
00:07:14,592 --> 00:07:15,800
Quindi, queste sono alcune proprietà.

150
00:07:15,800 --> 00:07:17,591
>> E ci sono anche alcuni
I metodi che possiamo

151
00:07:17,591 --> 00:07:22,450
utilizzare anche più rapidamente forse isolare
elementi del Document Object.

152
00:07:22,450 --> 00:07:26,730
Forse, il più versatile
dei quali è getElementById.

153
00:07:26,730 --> 00:07:31,190
Quindi potrei dire qualcosa di simile, perché
ricordatevi che è un metodo del Documento

154
00:07:31,190 --> 00:07:34,880
Object, document.getElementById.

155
00:07:34,880 --> 00:07:39,820
>> E dentro di queste parentesi, specificare
un elemento HTML con una particolare ID

156
00:07:39,820 --> 00:07:42,330
Attribuisco che ho in precedenza
set, e io sarò subito

157
00:07:42,330 --> 00:07:46,685
andare a destra a quell'elemento
del sito web globale.

158
00:07:46,685 --> 00:07:49,310
Quindi io non devo forare forse
giù attraverso ogni singolo strato.

159
00:07:49,310 --> 00:07:52,841
Posso solo utilizzare questo metodo per trovarlo,
come una sorta di ricerca di calore missile,

160
00:07:52,841 --> 00:07:53,340
destra?

161
00:07:53,340 --> 00:07:56,300
Si va solo e trova
esattamente ciò che sta cercando.

162
00:07:56,300 --> 00:07:59,290
>> GetElementsByTagName è
molto simile nello spirito.

163
00:07:59,290 --> 00:08:02,500
Forse avrebbe trovato tutto il
tag grassetto o tutti i tag p

164
00:08:02,500 --> 00:08:05,920
e mi danno una serie di tutto
che ho potuto poi lavorare.

165
00:08:05,920 --> 00:08:12,080
appendChild aggiunge qualcosa
un livello basso nella struttura.

166
00:08:12,080 --> 00:08:16,440
>> Così posso aggiungere un intero nuovo
elemento di un livello più basso.

167
00:08:16,440 --> 00:08:19,700
O posso rimuovere un elemento che è
un livello più basso e se voglio

168
00:08:19,700 --> 00:08:22,870
eliminare qualcosa dalla mia pagina web.

169
00:08:22,870 --> 00:08:28,480
Ora, una nota di codifica rapida e una rapida
risparmio mal di testa nota, si spera.

170
00:08:28,480 --> 00:08:31,670
>> getElementById-- il d è minuscolo.

171
00:08:31,670 --> 00:08:36,950
Non posso dirvi quante volte ho
usato getElementById e capitalizzati

172
00:08:36,950 --> 00:08:38,336
d lì.

173
00:08:38,336 --> 00:08:39,460
Perché è davvero comune.

174
00:08:39,460 --> 00:08:42,990
Se scriviamo l'ID parola, è
solitamente maiuscola capitale D.

175
00:08:42,990 --> 00:08:44,240
E il mio codice non funziona.

176
00:08:44,240 --> 00:08:45,630
E non riesco a capire perché.

177
00:08:45,630 --> 00:08:49,490
Questo è davvero, davvero, davvero
bug comune che tutti fanno,

178
00:08:49,490 --> 00:08:51,890
anche gli esperti che hanno
fatto questo per sempre.

179
00:08:51,890 --> 00:08:55,410
Quindi, basta essere consapevoli, getElementById,
che d è minuscolo.

180
00:08:55,410 --> 00:09:00,080
E si spera, che consente di risparmiare diversi
minuti almeno di angoscia.

181
00:09:00,080 --> 00:09:02,204
>> Che cosa significa tutto questo ci dice?

182
00:09:02,204 --> 00:09:03,120
Abbiamo questi metodi.

183
00:09:03,120 --> 00:09:04,161
Abbiamo queste proprietà.

184
00:09:04,161 --> 00:09:06,610
Ora, se si parte da
del documento, documento.

185
00:09:06,610 --> 00:09:10,220
qualunque cosa, ora possiamo raggiungere qualsiasi
singolo pezzo della nostra pagina web

186
00:09:10,220 --> 00:09:14,870
che vogliamo utilizzando JavaScript
semplicemente chiamando questi metodi

187
00:09:14,870 --> 00:09:19,940
e sfruttando le proprietà
che troviamo in varie località.

188
00:09:19,940 --> 00:09:24,890
>> Questo può ottenere prolisso, questo
document.getElementById,

189
00:09:24,890 --> 00:09:28,560
forse hanno una lunga nome di tag,
forse si fa più chiamate in seguito.

190
00:09:28,560 --> 00:09:31,230
Le cose possono ottenere un po 'prolisso.

191
00:09:31,230 --> 00:09:34,480
E come i programmatori, come hai
probabilmente visto in molti di questi video,

192
00:09:34,480 --> 00:09:36,600
non ci piace cose verboso.

193
00:09:36,600 --> 00:09:38,520
>> Ci piace essere in grado di fare le cose in fretta.

194
00:09:38,520 --> 00:09:42,640
Così ci piace di più
modo conciso per dire qualcosa.

195
00:09:42,640 --> 00:09:46,270
Quindi questo tipo di porta alla
nozione di una cosa chiamata jQuery.

196
00:09:46,270 --> 00:09:49,170
Ora jQuery non è JavaScript.

197
00:09:49,170 --> 00:09:50,350
Non è parte di JavaScript.

198
00:09:50,350 --> 00:09:54,790
>> È una libreria che è stato scritto
da alcuni programmatori JavaScript

199
00:09:54,790 --> 00:09:57,060
circa 10 anni fa.

200
00:09:57,060 --> 00:10:01,300
E il suo obiettivo è quello di semplificare questo ciò che è
chiamato scripting lato client, che

201
00:10:01,300 --> 00:10:04,310
è fondamentalmente ciò che siamo stati solo
parlando con manipolazioni DOM.

202
00:10:04,310 --> 00:10:11,090
E così, se ho voluto modificare il
colore della mia sfondo della pagina web, forse

203
00:10:11,090 --> 00:10:11,980
una specifica Div.

204
00:10:11,980 --> 00:10:15,325
>> Qui, sto a quanto pare sempre
ElementById colorDiv.

205
00:10:15,325 --> 00:10:16,950
E voglio impostare il colore di sfondo.

206
00:10:16,950 --> 00:10:20,720
Se sto usando solo puro JavaScript
utilizzando il Document Object Model,

207
00:10:20,720 --> 00:10:23,990
che è un sacco di roba, giusto?
document.getElementById

208
00:10:23,990 --> 00:10:25,531
colorDiv.style.backgroundColor = verde.

209
00:10:25,531 --> 00:10:27,260

210
00:10:27,260 --> 00:10:28,050
>> Accidenti.

211
00:10:28,050 --> 00:10:30,110
E 'stato molto da dire.

212
00:10:30,110 --> 00:10:31,720
E 'molto da scrivere, anche.

213
00:10:31,720 --> 00:10:35,760
E così in jQuery, possiamo forse dire
questo un po 'più conciso.

214
00:10:35,760 --> 00:10:39,350
Il commercio con l'essere è forse un po '
po 'più criptico tutto ad un tratto,

215
00:10:39,350 --> 00:10:39,850
destra?

216
00:10:39,850 --> 00:10:43,580
>> Almeno lungo è un po 'più
esplicative di quello che stiamo facendo.

217
00:10:43,580 --> 00:10:49,947
Questo simbolo del dollaro, tra parentesi,
apostrofo, hash, colorDiv, giusto?

218
00:10:49,947 --> 00:10:50,780
Che cosa significa?

219
00:10:50,780 --> 00:10:53,640
Beh, questo è fondamentalmente solo
document.getElementById colorDiv.

220
00:10:53,640 --> 00:10:58,700
>> Ma è questa sorta di stenografia
modo di farlo utilizzando jQuery.

221
00:10:58,700 --> 00:11:01,380
Diciamo solo un'occhiata ora
in un paio di modi diversi

222
00:11:01,380 --> 00:11:04,520
che potrebbe effettivamente
utilizzare questa Document Object

223
00:11:04,520 --> 00:11:06,807
Modello di manipolare pezzi del mio sito.

224
00:11:06,807 --> 00:11:09,140
In particolare, stiamo andando
di lavorare sulla manipolazione

225
00:11:09,140 --> 00:11:14,090
il colore di un particolare
Div, colorDiv, su una pagina web.

226
00:11:14,090 --> 00:11:15,299
Quindi, diamo uno sguardo a questo.

227
00:11:15,299 --> 00:11:15,798
Tutto ok.

228
00:11:15,798 --> 00:11:16,700
Quindi sono in una pagina.

229
00:11:16,700 --> 00:11:20,750
Si chiama test.html quando si scarica
questo se si vuole sperimentare con questo.

230
00:11:20,750 --> 00:11:24,730
E ho un sacco di
pulsanti in questa pagina.

231
00:11:24,730 --> 00:11:27,730
E sto dicendo singole funzioni
per il colore di sfondo, viola, verde,

232
00:11:27,730 --> 00:11:31,330
arancio, rosso, blu, una sola funzione
per il colore di sfondo, gestore di eventi

233
00:11:31,330 --> 00:11:34,360
per il colore di sfondo, e l'utilizzo di jQuery.

234
00:11:34,360 --> 00:11:38,147
Che cosa sto parlando
quando sto facendo questo?

235
00:11:38,147 --> 00:11:39,230
Così abbiamo visto i pulsanti.

236
00:11:39,230 --> 00:11:41,521
Ora, diamo uno sguardo a
parte del codice sorgente di qui.

237
00:11:41,521 --> 00:11:44,770
Inizieremo con test.html.

238
00:11:44,770 --> 00:11:48,100
Così funzioni individuali per sfondo
il colore è quello che ho scritto qui.

239
00:11:48,100 --> 00:11:49,350
Mi permetta di scorrere un po '.

240
00:11:49,350 --> 00:11:56,170

241
00:11:56,170 --> 00:11:58,820
>> E si noterà che ho
hanno definito questi pulsanti

242
00:11:58,820 --> 00:12:03,990
dire quando si fa clic su questo pulsante,
chiamare la funzione girare viola.

243
00:12:03,990 --> 00:12:06,670
Quando questo pulsante è fare clic su, piuttosto,
chiamare la funzione diventa verde,

244
00:12:06,670 --> 00:12:08,710
diventa arancione, diventa rosso, diventa blu.

245
00:12:08,710 --> 00:12:11,880
Probabilmente si può immaginare che questo
Non è forse il miglior design

246
00:12:11,880 --> 00:12:12,460
senso, giusto?

247
00:12:12,460 --> 00:12:16,490
>> Sarebbe bello se potessi
avere un approccio più generale.

248
00:12:16,490 --> 00:12:19,570
Beh, prima daremo uno sguardo
a ciò che quei cinque funzioni sono

249
00:12:19,570 --> 00:12:24,400
document.getElementById
colorDiv.style.background = viola,

250
00:12:24,400 --> 00:12:27,250
verde, arancio, rosso,
e blu, rispettivamente.

251
00:12:27,250 --> 00:12:30,930
Quindi, non particolarmente il miglior design.

252
00:12:30,930 --> 00:12:33,390
>> La prossima serie di pulsanti
Io ho è che ho scritto

253
00:12:33,390 --> 00:12:36,380
una singola funzione denominata
cambiare il colore che a quanto pare

254
00:12:36,380 --> 00:12:38,960
accetta una stringa come argomento.

255
00:12:38,960 --> 00:12:40,290
Quindi questo è un po 'meglio.

256
00:12:40,290 --> 00:12:43,840
Viola, verde, arancio, rosso,
blu è ora un argomento.

257
00:12:43,840 --> 00:12:46,230
Così ho scritto un più generale
caso funzione JavaScript,

258
00:12:46,230 --> 00:12:47,771
che potrebbe essere simile a questa.

259
00:12:47,771 --> 00:12:48,680
Sto passando.

260
00:12:48,680 --> 00:12:52,090
Questo cambiamento di colore funzione è
in attesa di un argomento chiamato colore.

261
00:12:52,090 --> 00:12:54,970
E sto dicendo impostare il
colore di sfondo al colore.

262
00:12:54,970 --> 00:12:58,390
Così qui rappresenta quello che ho qui.

263
00:12:58,390 --> 00:12:59,770
Ecco, questo è un po 'meglio.

264
00:12:59,770 --> 00:13:02,740
>> Ma potrei essere in grado di
fare di meglio.

265
00:13:02,740 --> 00:13:06,140
Se scendiamo a dare un'occhiata
la situazione gestore di eventi,

266
00:13:06,140 --> 00:13:07,860
ora tutte queste chiamate hanno lo stesso aspetto.

267
00:13:07,860 --> 00:13:10,340
Se vi ricordate per il nostro
discussione sui gestori di eventi,

268
00:13:10,340 --> 00:13:15,770
Posso avere informazioni su quali di
questi pulsanti è stato cliccato e usare quella.

269
00:13:15,770 --> 00:13:19,560
>> E così nel event.JavaScript, ho
scritto evento cambiamento di colore, che

270
00:13:19,560 --> 00:13:21,110
di capire verso quale pulsante è stato fatto clic.

271
00:13:21,110 --> 00:13:23,250
Questa è la linea oggetto di innesco.

272
00:13:23,250 --> 00:13:25,240
E poi qui, diventa davvero prolisso.

273
00:13:25,240 --> 00:13:27,420
Ma quello che sto facendo è che sono
impostare lo sfondo

274
00:13:27,420 --> 00:13:30,340
colore di triggerObject inner.HTML.

275
00:13:30,340 --> 00:13:34,170
Questo è il testo
tra i tag pulsante.

276
00:13:34,170 --> 00:13:36,500
>> E poi ho avuto a quanto pare
per impostarlo in lettere minuscole.

277
00:13:36,500 --> 00:13:40,780
Ed è così che posso convertire un intero
stringa in minuscolo in JavaScript utilizzando

278
00:13:40,780 --> 00:13:42,940
tale metodo in minuscolo.

279
00:13:42,940 --> 00:13:46,570
Perché quando ho creato un colore,
come io sto cercando di fare qui,

280
00:13:46,570 --> 00:13:48,260
il colore deve essere tutto minuscolo.

281
00:13:48,260 --> 00:13:50,920
>> Ma il pulsante che ho avuto,
se prendiamo un altro sguardo,

282
00:13:50,920 --> 00:13:55,890
notare che il testo non vi è
scritto con la P maiuscola per viola.

283
00:13:55,890 --> 00:13:59,140
E poi per lo
fondo qui, mi pare

284
00:13:59,140 --> 00:14:02,630
cercare di fare questo usando jQuery pure.

285
00:14:02,630 --> 00:14:06,000
E in questo caso, non sono in realtà
chiamare una funzione affatto.

286
00:14:06,000 --> 00:14:11,430
Ho appena detto alla classe che sono
utilizzando a questo pulsante è un pulsante JQ.

287
00:14:11,430 --> 00:14:12,360
Questo è tutto.

288
00:14:12,360 --> 00:14:14,950
>> Così come fa jQuery sapere cosa sto facendo?

289
00:14:14,950 --> 00:14:18,740
Ebbene, questo è uno dei vantaggi
tagliare svantaggi di jQuery.

290
00:14:18,740 --> 00:14:21,560
Può mi permette di fare le cose
molto conciso, ma forse non

291
00:14:21,560 --> 00:14:22,570
come intuitivamente.

292
00:14:22,570 --> 00:14:25,570
Forse quelle altre tre fanno una
po 'più senso quello che sto facendo.

293
00:14:25,570 --> 00:14:29,010
Qui, però, che cosa sta succedendo?

294
00:14:29,010 --> 00:14:31,940
>> A quanto pare, la creazione di
una funzione anonima

295
00:14:31,940 --> 00:14:36,790
che carica ogni volta che il mio documento
è pronto, così document.ready,

296
00:14:36,790 --> 00:14:38,760
qualche funzione sta per accadere.

297
00:14:38,760 --> 00:14:40,490
Fondamentalmente, quando è un documento pronto?

298
00:14:40,490 --> 00:14:42,310
E 'quando la mia pagina è stata caricata.

299
00:14:42,310 --> 00:14:46,540
>> Quindi, non appena la mia pagina è stata caricata, il
seguente funzione è sempre pronto.

300
00:14:46,540 --> 00:14:54,310
Si dice, se un oggetto di tipo jQButton,
o se la classe jQButton è stato fatto clic,

301
00:14:54,310 --> 00:14:55,570
eseguire questa funzione.

302
00:14:55,570 --> 00:14:59,360
Quindi, ecco due funzioni anonime,
uno definita all'interno dell'altro.

303
00:14:59,360 --> 00:15:03,930
>> Così tutta la mia contesto
qui finora è la mia pagina

304
00:15:03,930 --> 00:15:06,520
quando lo carica chiama questa funzione.

305
00:15:06,520 --> 00:15:09,740
E questa funzione è in attesa
per un pulsante per essere cliccato.

306
00:15:09,740 --> 00:15:14,490
E quando si fa clic su un pulsante, JQ
pulsante specifico viene cliccato,

307
00:15:14,490 --> 00:15:17,150
chiama questo altro
funzione, che sta andando

308
00:15:17,150 --> 00:15:21,250
per impostare lo sfondo
colore di colorDiv di essere

309
00:15:21,250 --> 00:15:25,990
il testo che si trova tra i tag.

310
00:15:25,990 --> 00:15:28,050
>> Questa è la nozione di
quale pulsante è stato cliccato.

311
00:15:28,050 --> 00:15:31,230
Ma per il resto, si tratta di una sorta di
comportarsi simile a un evento.

312
00:15:31,230 --> 00:15:34,460
E 'solo allo stesso modo ho
avrebbe espresso questo in jQuery.

313
00:15:34,460 --> 00:15:36,790
Anche in questo caso, è probabilmente una
molto più intimidatorio.

314
00:15:36,790 --> 00:15:40,840
Non è chiaro come
qualcosa come event.js,

315
00:15:40,840 --> 00:15:45,080
che è forse un po 'di più
verbose, ma un po 'meno

316
00:15:45,080 --> 00:15:46,000
intimidatorio.

317
00:15:46,000 --> 00:15:51,460
>> Ma se abbiamo pop indietro verso mio browser
finestra, se comincio clicking-- bene,

318
00:15:51,460 --> 00:15:52,690
che ha cambiato al viola.

319
00:15:52,690 --> 00:15:54,450
Questo è verde con il metodo stringa.

320
00:15:54,450 --> 00:15:56,500
Questo è di colore arancione con il gestore di eventi.

321
00:15:56,500 --> 00:15:58,300
>> Questo è rosso utilizzando jQuery, giusto?

322
00:15:58,300 --> 00:16:01,270
Tutti si comportano esattamente lo stesso.

323
00:16:01,270 --> 00:16:06,509
Hanno appena lo fanno utilizzando diversi
approcci per risolvere il problema.

324
00:16:06,509 --> 00:16:08,550
C'è molto di più per
jQuery allora siamo sicuramente

325
00:16:08,550 --> 00:16:10,050
andando a parlare in questo video.

326
00:16:10,050 --> 00:16:15,410
Ma se volete saperne di più, è possibile
andare al tipo di documentazione jQuery

327
00:16:15,410 --> 00:16:19,710
e imparare un po 'di più
questa biblioteca molto flessibile, che

328
00:16:19,710 --> 00:16:22,550
è ottimo per fare lato client
scripting come quello che stavamo facendo

329
00:16:22,550 --> 00:16:26,240
per manipolare l'aspetto
e sentire della nostra pagina web

330
00:16:26,240 --> 00:16:28,750
con il Document Object Model.

331
00:16:28,750 --> 00:16:29,650
Sono Doug Lloyd.

332
00:16:29,650 --> 00:16:31,930
Questo è CS50.

333
00:16:31,930 --> 00:16:34,022