1
00:00:00,000 --> 00:00:02,690
[Powered by Google Translate] [Seminari: jquery]

2
00:00:02,690 --> 00:00:04,790
[Vipul Shekhawat, la Universitat de Harvard]

3
00:00:04,790 --> 00:00:08,000
[Aquest és CS50.] [CS50.TV]

4
00:00:08,000 --> 00:00:10,640
Si vostè està seguint al llarg de a casa, vostè pot tenir accés als meus diapositives en línia

5
00:00:10,640 --> 00:00:13,310
per anar a aquest enllaç.

6
00:00:13,310 --> 00:00:18,650
És TjjRWj, en bit.ly.

7
00:00:18,650 --> 00:00:20,700
També pot anar a la URL directament,

8
00:00:20,700 --> 00:00:27,300
que és cloud.cs50.net / ~ vshekhawat, que és el meu nom,

9
00:00:27,300 --> 00:00:32,409
i jQuery.

10
00:00:32,409 --> 00:00:34,920
Jo us animo a seguir endavant si vostè està veient a casa,

11
00:00:34,920 --> 00:00:40,650
i si ets aquí, també, perquè es tracta d'una presentació molt interactiva.

12
00:00:40,650 --> 00:00:43,160
>> Així que avui parlaré de jQuery, i la primera pregunta és,

13
00:00:43,160 --> 00:00:45,300
el que és jQuery?

14
00:00:45,300 --> 00:00:47,090
Aquest any, jo sé que vostès no han cobert JavaScript

15
00:00:47,090 --> 00:00:51,080
amb tant detall com ho hem fet en els últims anys.

16
00:00:51,080 --> 00:00:53,150
JavaScript és, primer de tot, només un llenguatge del costat del client

17
00:00:53,150 --> 00:00:58,390
que s'utilitza per executar seqüències d'ordres i codi en la màquina de cada usuari.

18
00:00:58,390 --> 00:01:00,660
Així que tens un servidor que proporciona les pàgines web a les persones,

19
00:01:00,660 --> 00:01:02,600
però és possible que vulgueu fer coses al vostre ordinador,

20
00:01:02,600 --> 00:01:08,060
demanar al seu equip perquè enviï peticions al servidor cada 30 segons o alguna cosa així.

21
00:01:08,060 --> 00:01:10,420
Vostè pot fer que l'ús de JavaScript.

22
00:01:10,420 --> 00:01:13,190
JQuery només proporciona una major funcionalitat a la part superior de JavaScript

23
00:01:13,190 --> 00:01:15,680
que fa coses extra per a vostè.

24
00:01:15,680 --> 00:01:17,710
Si ens fixem en el contingut en la part superior,

25
00:01:17,710 --> 00:01:21,410
que descriu algunes de les coses que ets capaç de fer.

26
00:01:21,410 --> 00:01:23,500
Així que en general, va ser creat al gener de 2006.

27
00:01:23,500 --> 00:01:26,560
Va ser concebut en primer lloc l'agost de 2005.

28
00:01:26,560 --> 00:01:31,370
Ha estat per aquí durant un parell d'anys, i és realment part del nou moviment de la Web 2.0

29
00:01:31,370 --> 00:01:34,330
que ha fet d'Internet tan brillant.

30
00:01:34,330 --> 00:01:37,630
És la biblioteca de JavaScript més utilitzat.

31
00:01:37,630 --> 00:01:41,450
Més de 19,6 milions de llocs web estan utilitzant, i l'ús segueix augmentant

32
00:01:41,450 --> 00:01:45,640
segons builtwith.com, que, segons sembla, en l'últim any,

33
00:01:45,640 --> 00:01:49,710
acaba de ser constant augment bastant lineal.

34
00:01:49,710 --> 00:01:52,870
Entre els 10 milions de llocs més, encara hi ha -

35
00:01:52,870 --> 00:01:55,180
voltant del 40% d'ells estan actualment utilitzant.

36
00:01:55,180 --> 00:01:58,540
Facebook utilitza, un munt d'altres llocs web fan servir actualment.

37
00:01:58,540 --> 00:02:01,540
Vostè pot mirar aquestes estadístiques pel seu compte, si ho desitja.

38
00:02:01,540 --> 00:02:05,820
I es podria dir que és de fiar, ja que té una base i 13 membres de la junta,

39
00:02:05,820 --> 00:02:11,910
juntament amb un equip de 20 persones que treballen de forma regular.

40
00:02:11,910 --> 00:02:16,110
Així que és molt utilitzat, té un. URL org, és elegant,

41
00:02:16,110 --> 00:02:21,660
té spin-offs per altres coses, així que és una gran cosa.

42
00:02:21,660 --> 00:02:24,510
>> Per què utilitzar-lo? JQuery és molt lleuger.

43
00:02:24,510 --> 00:02:27,270
Això vol dir que no és un arxiu enorme. Podeu descarregar

44
00:02:27,270 --> 00:02:31,540
l'arxiu minified, que és sense tots els espais en blanc i comentaris, i està a només 32 kB.

45
00:02:31,540 --> 00:02:33,600
Així que és fàcil de llençar a la seva pàgina web

46
00:02:33,600 --> 00:02:35,910
i acaba de començar a usar-lo.

47
00:02:35,910 --> 00:02:39,630
També està escrit de manera molt eficient, pel que no ocupa molt -

48
00:02:39,630 --> 00:02:42,550
que no alenteix el seu lloc web molt més quan s'utilitza.

49
00:02:42,550 --> 00:02:45,770
Això permet implementar coses que abans eren inviables.

50
00:02:45,770 --> 00:02:47,790
Hi ha alguns aspectes de funcionalitat,

51
00:02:47,790 --> 00:02:51,780
com la creació d'animacions, que normalment seria molt, molt difícil de fer.

52
00:02:51,780 --> 00:02:54,300
Però en jQuery són en realitat molt simple.

53
00:02:54,300 --> 00:02:57,040
I hi ha coses que són molestes per fer,

54
00:02:57,040 --> 00:02:59,610
possible en JavaScript, com l'enviament d'una petició POST,

55
00:02:59,610 --> 00:03:02,190
però per enviar una petició a un servidor, vostè ha d'escriure

56
00:03:02,190 --> 00:03:04,320
cinc o sis o set línies de codi.

57
00:03:04,320 --> 00:03:07,200
Ara només es pot fer d'una sola línia de codi, en una sola trucada de funció.

58
00:03:07,200 --> 00:03:11,790
Això realment simplifica moltes de les coses que vostè està fent.

59
00:03:11,790 --> 00:03:15,950
I tots els nens frescos ho estan utilitzant. Per això, jo em refereixo.

60
00:03:15,950 --> 00:03:19,270
En el meu projecte final de l'any passat, que és news.whrb.org,

61
00:03:19,270 --> 00:03:22,530
que és per l'estació de ràdio, he creat aquest blog

62
00:03:22,530 --> 00:03:29,750
que acull tots els espectacles que hem fet i els arxius MP3 per a ells.

63
00:03:29,750 --> 00:03:32,070
Vostè pot navegar a través dels últims shows,

64
00:03:32,070 --> 00:03:34,130
i tot es fa fent servir jQuery. Es pot dir

65
00:03:34,130 --> 00:03:37,340
perquè de totes aquestes animacions, essencialment.

66
00:03:37,340 --> 00:03:42,360
Així que si vostè té - si crearà un nou post,

67
00:03:42,360 --> 00:03:45,980
veus aquests petits slideDowns, això és tot fet amb jQuery.

68
00:03:45,980 --> 00:03:49,140
I aquesta caiguda - de manera que tipus de coses es fa tot fent servir jQuery,

69
00:03:49,140 --> 00:03:52,720
i vostè no ha de recarregar constantment la pàgina de navegació en el lloc.

70
00:03:52,720 --> 00:03:57,220
Una altra cosa interessant que es fa ús de jQuery és aquesta presentació.

71
00:03:57,220 --> 00:03:59,700
Estic usant aquesta cosa de codi obert anomenat scrolldeck,

72
00:03:59,700 --> 00:04:03,250
que algú va escriure a la part superior de jQuery.

73
00:04:03,250 --> 00:04:04,870
Si realment es veuen en la font, es pot veure que

74
00:04:04,870 --> 00:04:07,830
que estan fent servir aquest signe de dòlar, símbol del dòlar

75
00:04:07,830 --> 00:04:12,110
s'utilitzen en jQuery per indicar que una funció és una funció de jQuery.

76
00:04:12,110 --> 00:04:15,020
Així que estan definint un contenidor a la part superior de jQuery

77
00:04:15,020 --> 00:04:18,570
que li permet fer una presentació d'aquest tipus,

78
00:04:18,570 --> 00:04:21,200
i es pot veure que aquí estan inclosos en el fitxer jQuery original,

79
00:04:21,200 --> 00:04:24,120
que és el que haurà d'incloure si voleu utilitzar jQuery

80
00:04:24,120 --> 00:04:30,450
en els seus propis llocs web.

81
00:04:30,450 --> 00:04:32,790
>> Tocar en això, com s'instal · la?

82
00:04:32,790 --> 00:04:36,150
Vostè pot anar a jQuery.com i descarregar l'arxiu,

83
00:04:36,150 --> 00:04:38,320
afegir-lo a un directori web i incloure-la.

84
00:04:38,320 --> 00:04:42,200
Així que a la part superior, en l'etiqueta del cap del seu arxiu HTML

85
00:04:42,200 --> 00:04:45,400
del seu arxiu HTML principal, només té aquesta línia de codi

86
00:04:45,400 --> 00:04:49,490
amb la versió correcta de la versió de jQuery que utilitza.

87
00:04:49,490 --> 00:04:51,340
Pots descarregar, aneu a jQuery.com,

88
00:04:51,340 --> 00:04:55,130
feu clic a "jQuery descàrrega", i ja ho tens. Això és tot.

89
00:04:55,130 --> 00:04:58,880
I, de fet, podem fer una ullada al que sembla.

90
00:04:58,880 --> 00:05:01,080
Si fa clic a descarregar, jQuery és això.

91
00:05:01,080 --> 00:05:05,260
És només un gran arxiu JavaScript que fa totes les coses de la màgia per a vostè.

92
00:05:05,260 --> 00:05:09,270
Aquesta és la versió miniaturitzada, que no es pot llegir en absolut.

93
00:05:09,270 --> 00:05:13,180
També es pot veure a la versió de desenvolupament, que es pot llegir

94
00:05:13,180 --> 00:05:15,370
però segueix sent molt, molt llarg.

95
00:05:15,370 --> 00:05:17,980
És un munt de coses aquí.

96
00:05:17,980 --> 00:05:20,240
També es pot vincular a la versió allotjada de Google de la mateixa.

97
00:05:20,240 --> 00:05:23,820
Així que vaig a permetre que només es basen en Google per proporcionar-la.

98
00:05:23,820 --> 00:05:29,310
Ells proporcionen cada versió de la mateixa, disponibles en tot moment.

99
00:05:29,310 --> 00:05:31,530
Així que és probable que pugui confiar a Google de ser l'amfitrió per a vostè.

100
00:05:31,530 --> 00:05:33,270
O pot enllaçar a pròpia última versió de jQuery.

101
00:05:33,270 --> 00:05:36,400
Tenen una URL que està sempre actualitzat a l'última versió.

102
00:05:36,400 --> 00:05:40,850
És jQuery-latest, i hi ha un problema amb això,

103
00:05:40,850 --> 00:05:44,350
que és que si el jQuery actualitzat i una mica de la funcionalitat anterior

104
00:05:44,350 --> 00:05:47,250
havien torna retrògrad o en desús,

105
00:05:47,250 --> 00:05:49,620
potser no - pot començar a no aconseguir el suport més.

106
00:05:49,620 --> 00:05:52,940
Així que si vostè escriu un lloc web utilitzant la versió 1.8.2,

107
00:05:52,940 --> 00:05:55,000
de moment la versió 2.7 surti

108
00:05:55,000 --> 00:05:57,000
algunes de les funcions que ha escrit ja no funcionen.

109
00:05:57,000 --> 00:05:59,930
Així que és millor que només ha de descarregar l'arxiu 32 kB,

110
00:05:59,930 --> 00:06:04,100
el va posar a la seva pàgina web, i que va a treballar per sempre.

111
00:06:04,100 --> 00:06:07,450
>> Vaig a seguir endavant i començar a parlar sobre la funcionalitat real de jQuery.

112
00:06:07,450 --> 00:06:13,090
El primer és selectors. Això és el que jQuery es va concebre inicialment per proporcionar.

113
00:06:13,090 --> 00:06:15,500
I vostè pot fer clic a la documentació de mirar

114
00:06:15,500 --> 00:06:18,690
la documentació detallada dels selectors que vaig a estar cobrint.

115
00:06:18,690 --> 00:06:24,120
La idea darrere d'selectors és que vostè pot seleccionar els elements HTML d'una pàgina.

116
00:06:24,120 --> 00:06:28,790
Elements d'una pàgina tenen IDs i les classes i altres aspectes que identifiquen els mateixos.

117
00:06:28,790 --> 00:06:30,500
Hi ha també -, són de diferents ordres.

118
00:06:30,500 --> 00:06:32,570
Part del temps que estan imbricats uns dins dels altres.

119
00:06:32,570 --> 00:06:38,120
JQuery li permet crear consultes simples que recuperen elements de la pàgina.

120
00:06:38,120 --> 00:06:41,890
A continuació, pot manipular aquests elements amb funcions de jQuery,

121
00:06:41,890 --> 00:06:43,990
que és la secció de manipulació anem a arribar a més tard.

122
00:06:43,990 --> 00:06:46,040
Vostè pot canviar l'HTML, canviar el CSS,

123
00:06:46,040 --> 00:06:50,500
també es pot animar i afegir funcions que s'activen en determinats esdeveniments.

124
00:06:50,500 --> 00:06:52,710
Així, per exemple, si fa clic en ell alguna cosa, vol que alguna cosa succeeixi,

125
00:06:52,710 --> 00:06:55,210
vostè pot fer que l'ús de jQuery també.

126
00:06:55,210 --> 00:06:57,380
I hi ha un gran nombre de formes de seleccionar elements.

127
00:06:57,380 --> 00:07:00,310
La majoria d'ells mai he fet servir, però hi ha els bàsics,

128
00:07:00,310 --> 00:07:02,340
els quals són molt importants.

129
00:07:02,340 --> 00:07:05,750
El selector d'elements, per exemple, si heu seleccionat res

130
00:07:05,750 --> 00:07:10,640
que és un div - En realitat tinc el codi obert per a la presentació de diapositives.

131
00:07:10,640 --> 00:07:13,450
Així, per exemple, aquí hi ha la primera diapositiva.

132
00:07:13,450 --> 00:07:17,430
Aquí tenim un div. Si realment seleccionem tots els divs a la pàgina,

133
00:07:17,430 --> 00:07:22,300
només ens donarà una matriu de tots els divs que hi ha en aquest arxiu.

134
00:07:22,300 --> 00:07:27,040
El selector d'ID li permet seleccionar qualsevol cosa amb un ID donat.

135
00:07:27,040 --> 00:07:32,230
Així que si, per exemple, això té l'ID "què"

136
00:07:32,230 --> 00:07:37,160
i si ho vam fer amb # el que en lloc d'un document d'identitat,

137
00:07:37,160 --> 00:07:42,920
seria simplement retornar una matriu que té un sol element, i és que els elements de la pàgina.

138
00:07:42,920 --> 00:07:45,490
També podem combinar selectors d'aquesta manera per tenir

139
00:07:45,490 --> 00:07:48,260
seleccionar només les coses amb IDs que són divs.

140
00:07:48,260 --> 00:07:51,810
Així que si. Només seleccioneu divs que tenen aquest ID.

141
00:07:51,810 --> 00:07:55,260
Per a la classe que acaba d'utilitzar un punt, que és el mateix que el CSS.

142
00:07:55,260 --> 00:07:57,500
Descendent també funciona, així que si vostè té certa classe

143
00:07:57,500 --> 00:08:00,170
i s'ha niat elements dins d'ella - així, per exemple,

144
00:08:00,170 --> 00:08:03,260
hi ha una certa classe i té una etiqueta d'àncora per enllaçar a una altra pàgina,

145
00:08:03,260 --> 00:08:08,510
pot utilitzar aquesta sintaxi per recuperar el vincle.

146
00:08:08,510 --> 00:08:12,420
També podeu seleccionar diverses coses alhora, només separar-les per comes,

147
00:08:12,420 --> 00:08:17,360
utilitzar qualsevol selector desitja, i vostè seleccionarà tots ells alhora, en una sola matriu.

148
00:08:17,360 --> 00:08:19,650
I després hi ha també la no selecció, així que vostè pot seleccionar tots els divs

149
00:08:19,650 --> 00:08:24,210
que no tenen alguna classe específica.

150
00:08:24,210 --> 00:08:28,790
I això és només una forma útil d'obtenir una introducció a com funciona aquesta selecció.

151
00:08:28,790 --> 00:08:32,270
Et vaig a mostrar alguns exemples concrets en un segon.

152
00:08:32,270 --> 00:08:35,480
>> Selectors avançats són - aquests són només alguns exemples.

153
00:08:35,480 --> 00:08:38,840
Hi ha dotzenes d'ells, però si voleu seleccionar totes les etiquetes d'imatge

154
00:08:38,840 --> 00:08:42,799
dins d'algun element, que acaba de fer: la imatge.

155
00:08:42,799 --> 00:08:45,340
Si voleu seleccionar els elements, fins i tot, per exemple, si hi ha 20 d'ells,

156
00:08:45,340 --> 00:08:48,290
que voleu seleccionar 0, 2, 4, 6 i així successivament,

157
00:08:48,290 --> 00:08:51,630
que fas: també, o també pots fer: estrany.

158
00:08:51,630 --> 00:08:55,470
Aquests són selectors de pseudo, el que significa que en realitat calculen

159
00:08:55,470 --> 00:09:00,960
cada un altre element en lloc d'anar i seleccionant tots ells.

160
00:09:00,960 --> 00:09:05,510
Vostè pot també - cada element pot també tenir atributs específics.

161
00:09:05,510 --> 00:09:10,580
Així, per exemple, la classe = centre és també un atribut.

162
00:09:10,580 --> 00:09:16,500
Per aquesta etiqueta d'àncora, href, hipertext referència, és un atribut també.

163
00:09:16,500 --> 00:09:21,150
Així que vostè pot seleccionar una cosa que es vincula a una pàgina específica o simplement - és molt general.

164
00:09:21,150 --> 00:09:25,410
Vostè pot seleccionar qualsevol cosa amb qualsevol atribut que desitja.

165
00:09:25,410 --> 00:09:27,470
I després, també, atribut conté.

166
00:09:27,470 --> 00:09:30,420
Si, per exemple, voleu seleccionar tots els elements d'entrada

167
00:09:30,420 --> 00:09:32,700
que tenen la paraula "pas", com el nom d'ells,

168
00:09:32,700 --> 00:09:37,560
si una pàgina té un bloc de text d'entrada

169
00:09:37,560 --> 00:09:41,050
que es diu "password", això seria una manera de poder seleccionar aquesta.

170
00:09:41,050 --> 00:09:43,020
I hi ha molts més. Vostè pot seguir endavant i mirar la documentació

171
00:09:43,020 --> 00:09:46,950
i veure exemples concrets de com funciona.

172
00:09:46,950 --> 00:09:48,840
>> El següent pas és la manipulació DOM.

173
00:09:48,840 --> 00:09:52,500
Després de seleccionar els elements, anem a voler realment fer coses amb ells.

174
00:09:52,500 --> 00:09:55,500
Fins ara no hem vist això en absolut, però si ens fixem en la documentació,

175
00:09:55,500 --> 00:09:57,950
no hi ha realment molt que poguéssim fer.

176
00:09:57,950 --> 00:10:02,900
En aquest punt, anem a seleccionar els elements d'aquesta presentació

177
00:10:02,900 --> 00:10:04,890
i manipular utilitzant jQuery.

178
00:10:04,890 --> 00:10:08,290
A causa que aquest es porta a terme fent servir jQuery, tenim accés a la biblioteca jQuery,

179
00:10:08,290 --> 00:10:13,580
i podem usar aquestes funcions dins d'aquest codi.

180
00:10:13,580 --> 00:10:16,200
Una de les coses útils que vostè pot no saber sobre és la consola.

181
00:10:16,200 --> 00:10:19,340
I Google Chrome és el que estic fent servir. Podeu prémer alt comandament J

182
00:10:19,340 --> 00:10:21,720
o alt de control J per obrir la consola.

183
00:10:21,720 --> 00:10:26,130
A Firefox Crec que és la comanda de canvi de K o de control de canvis K.

184
00:10:26,130 --> 00:10:28,880
A Safari has d'anar a canviar alguna configuració.

185
00:10:28,880 --> 00:10:35,460
Hi ha un enllaç si voleu fer-ho, però jo recomano aconseguir Chrome o Firefox.

186
00:10:35,460 --> 00:10:37,750
Així que anem a obrir la consola, que és aquí baix.

187
00:10:37,750 --> 00:10:41,170
Això li permet, bàsicament, només fer el que vulguis.

188
00:10:41,170 --> 00:10:45,100
Així que vostè pot simplement escriure en crear una variable anomenada x,

189
00:10:45,100 --> 00:10:49,200
x = 5, anem a veure el que x + 2 és.

190
00:10:49,200 --> 00:10:57,670
Fins i tot es pot fer alguna cosa com CS + A veure, x + 45, que serà CS50.

191
00:10:57,670 --> 00:11:00,530
Vostè només pot fer algunes coses típiques de JavaScript.

192
00:11:00,530 --> 00:11:02,730
Però també es pot fer jQuery aquí.

193
00:11:02,730 --> 00:11:06,200
>> Així que donem una ullada a aquest primer aspecte aquí.

194
00:11:06,200 --> 00:11:09,500
Crearem una variable anomenada HTML, que és una cadena.

195
00:11:09,500 --> 00:11:15,890
Té una etiqueta de paràgraf en el mateix, que es diu un text nou.

196
00:11:15,890 --> 00:11:19,420
Així que tenim aquest codi HTML, és un text nou, en les etiquetes de paràgraf.

197
00:11:19,420 --> 00:11:21,800
Ara que realment volem per afegir-lo a la pàgina.

198
00:11:21,800 --> 00:11:28,310
El configuro perquè el codi HTML per aquest paràgraf, aquest títol aquí, és append ID.

199
00:11:28,310 --> 00:11:32,320
Si seleccionem append ID i després afegir a la mateixa

200
00:11:32,320 --> 00:11:34,560
la variable HTML que acabeu de crear,

201
00:11:34,560 --> 00:11:40,370
que se sumarà que l'HTML al final, just després d'aquesta etiqueta de paràgraf.

202
00:11:40,370 --> 00:11:43,730
Així que si ho fem - que triem aquest paràgraf,

203
00:11:43,730 --> 00:11:47,590
i que hem anomenat la funció append amb la variable HTML Acabo d'afegir,

204
00:11:47,590 --> 00:11:50,960
que se sumarà aquest nou text a la dreta allà a la pàgina.

205
00:11:50,960 --> 00:11:54,970
També podem anteposar, el que significa que va a anar abans, a principis d'aquest element.

206
00:11:54,970 --> 00:11:58,290
Així que hi ha una mica de text nou al començament i després.

207
00:11:58,290 --> 00:12:01,660
Puc seguir endavant i refrescar per desfer-aquestes coses només el que he fet.

208
00:12:01,660 --> 00:12:05,280
Però això és un exemple de com es pot utilitzar el Prefix i Sufix mètodes

209
00:12:05,280 --> 00:12:08,910
per manipular coses a la pàgina, afegir una mica d'HTML.

210
00:12:08,910 --> 00:12:11,080
>> També pot canviar de classe.

211
00:12:11,080 --> 00:12:14,970
De nou en aquest arxiu d'estil, he creat això per a la classe de victòria

212
00:12:14,970 --> 00:12:19,990
que té el color del text vermell, una mica de color de fons, i una ombra de text.

213
00:12:19,990 --> 00:12:23,810
Es veu horrible, però en realitat es pot -

214
00:12:23,810 --> 00:12:26,410
Aquest paràgraf correspon a ID de classe.

215
00:12:26,410 --> 00:12:29,860
Així que pot afegir la classe per la victòria.

216
00:12:29,860 --> 00:12:31,870
Puc executar aquesta a la consola,

217
00:12:31,870 --> 00:12:35,480
i que va a afegir aquesta classe, i ara es veu horrible, com s'esperava.

218
00:12:35,480 --> 00:12:39,680
El CSS automàticament s'aplica a les classes que vostè -

219
00:12:39,680 --> 00:12:42,680
si hi ha CSS per a una classe, automàticament s'aplica

220
00:12:42,680 --> 00:12:44,680
si canvia la classe d'un element.

221
00:12:44,680 --> 00:12:49,230
Llavors podem esborrar usant la classe remove.

222
00:12:49,230 --> 00:12:53,690
Així que si vostè té algunes classes predefinides com el vermell o destacat,

223
00:12:53,690 --> 00:12:55,990
i que desitja aplicar als elements,

224
00:12:55,990 --> 00:12:58,230
vostè no ha de fer tot l'estil CSS cada vegada.

225
00:12:58,230 --> 00:13:01,510
Vostè pot afegir la classe a un element, i després es convertirà automàticament -

226
00:13:01,510 --> 00:13:05,580
que es veurà de forma automàtica apropiat per a aquesta classe.

227
00:13:05,580 --> 00:13:07,900
També podem treure les coses, així que vaig a seleccionar tots els divs

228
00:13:07,900 --> 00:13:10,830
a la pàgina i eliminar-los.

229
00:13:10,830 --> 00:13:13,990
Què és això va a semblar?

230
00:13:13,990 --> 00:13:16,170
Es va a mirar com si res, així que en realitat és gens esquerra.

231
00:13:16,170 --> 00:13:18,170
El meu presentació s'ha anat.

232
00:13:18,170 --> 00:13:21,290
Puc refrescar-se i portar-ho de tornada, per sort,

233
00:13:21,290 --> 00:13:24,420
perquè acaba de publicar una vegada,

234
00:13:24,420 --> 00:13:29,460
però això és un exemple de l'eliminació, si vols destruir completament un element de la pàgina.

235
00:13:29,460 --> 00:13:33,180
>> També pot sobreescriure, i jo vaig a seleccionar totes les etiquetes de paràgraf a la pàgina

236
00:13:33,180 --> 00:13:36,850
i van dins d'ells i reemplaçar qualsevol text que tenen en ells

237
00:13:36,850 --> 00:13:39,690
amb només la paraula "prova".

238
00:13:39,690 --> 00:13:46,520
Si ho fa, se li reemplaça cada paràgraf a la pàgina amb aquesta prova.

239
00:13:46,520 --> 00:13:49,150
Sip. Tots estan reemplaçats per proves.

240
00:13:49,150 --> 00:13:53,270
Així que això és un exemple d'accés al text i escrivint sobre ells.

241
00:13:53,270 --> 00:13:57,490
També pot recuperar la informació, i això és genial per als camps d'entrada.

242
00:13:57,490 --> 00:14:00,470
Si vostè té un quadre d'entrada que la gent està escrivint coses en,

243
00:14:00,470 --> 00:14:03,880
la gent està escrivint coses en ell,

244
00:14:03,880 --> 00:14:09,030
Aquí seleccionem l'entrada, qualsevol etiqueta d'entrada amb un tipus de text.

245
00:14:09,030 --> 00:14:13,800
En aquest cas, només hi ha un quadre d'entrada de tota la presentació,

246
00:14:13,800 --> 00:14:17,260
pel que només haurem de seleccionar el primer, i després cridem la funció val en ell.

247
00:14:17,260 --> 00:14:19,570
Que torna el valor, i per un quadre d'entrada,

248
00:14:19,570 --> 00:14:24,330
el valor és el que passa a ser en el seu interior.

249
00:14:24,330 --> 00:14:31,880
Així que si fem això, simplement retorna les coses cadena.

250
00:14:31,880 --> 00:14:36,860
I si anomenem de nou després d'haver escrit més coses, esdevé més coses.

251
00:14:36,860 --> 00:14:40,760
Aquesta és una gran manera de tenir accés als elements d'un quadre d'entrada i, a continuació, comprovar,

252
00:14:40,760 --> 00:14:45,060
es tracta d'una adreça de correu electrònic vàlida, és aquesta una data vàlida, per exemple.

253
00:14:45,060 --> 00:14:49,600
Vostè només pot recuperar coses a l'instant, ja que la gent està escrivint,

254
00:14:49,600 --> 00:14:54,830
i després comprovar si és vàlida, enviar-la a un servidor, fer el que vulguis amb ell.

255
00:14:54,830 --> 00:14:57,720
I així és com s'accedeix al que hi ha dins d'aquestes caixes.

256
00:14:57,720 --> 00:15:00,090
>> També pot modificar CSS directament, així que en comptes de sumar

257
00:15:00,090 --> 00:15:02,510
una classe que té algunes propietats predefinides,

258
00:15:02,510 --> 00:15:08,120
vostè pot afegir qualsevol CSS que desitja res.

259
00:15:08,120 --> 00:15:10,350
Així que donem una selecte cos, que és tota la presentació,

260
00:15:10,350 --> 00:15:14,370
i el color és la característica que defineix el que els colors del text.

261
00:15:14,370 --> 00:15:19,420
Si el canviem al vermell, tot el text de la pàgina tornarà vermell.

262
00:15:19,420 --> 00:15:26,310
Podem fer alguna cosa com a fons de color blau,

263
00:15:26,310 --> 00:15:30,680
aquí anem, és bonic.

264
00:15:30,680 --> 00:15:33,840
Pots fer el que vulguis amb això.

265
00:15:33,840 --> 00:15:39,250
Usant la propietat CSS, que realment es pot modificar la forma en res s'assembla a qualsevol hora.

266
00:15:39,250 --> 00:15:41,630
El següent és els efectes.

267
00:15:41,630 --> 00:15:45,710
Els efectes són bàsicament la mateixa cosa que la modificació de la CSS,

268
00:15:45,710 --> 00:15:48,870
però realment ofereixen una animació addicional a ella.

269
00:15:48,870 --> 00:15:53,380
Així que en lloc de mostrar o ocultar alguna cosa o canviar el color,

270
00:15:53,380 --> 00:15:56,130
en realitat es pot fer animació.

271
00:15:56,130 --> 00:16:00,760
Aquí està la documentació, si vols fer una ullada a l'àmplia documentació per a això.

272
00:16:00,760 --> 00:16:04,760
Però jo vaig a cobrir els principals.

273
00:16:04,760 --> 00:16:12,030
Ha les propietats amagar mostrar i.

274
00:16:12,030 --> 00:16:14,510
Mostra / oculta ID correspon en realitat a tota la caixa,

275
00:16:14,510 --> 00:16:18,190
així que si m'amago, simplement desapareixerà.

276
00:16:18,190 --> 00:16:24,210
I puc mostrar de nou si vull fer-la tornar.

277
00:16:24,210 --> 00:16:26,340
I és hora de tornar. Això en realitat no desapareix,

278
00:16:26,340 --> 00:16:30,670
Jo en realitat no treure'l de la pàgina, que acaba d'establir la propietat CSS de visibilitat a oculta

279
00:16:30,670 --> 00:16:34,030
pel que no pot veure més.

280
00:16:34,030 --> 00:16:39,250
Hi ha també lliscar cap amunt i feu lliscar cap avall, que li permet tenir aquest efecte.

281
00:16:39,250 --> 00:16:47,050
Llisca cap amunt a desaparèixer, i després de que desaparegui

282
00:16:47,050 --> 00:16:53,210
es pot lliscar cap avall per fer-la tornar. I ara està de tornada.

283
00:16:53,210 --> 00:16:57,650
També hi ha aquest efecte de fos, que - fade ID correspon a aquesta casella.

284
00:16:57,650 --> 00:17:01,200
Si s'esvaeixen a terme, llavors desapareixerà lentament.

285
00:17:01,200 --> 00:17:04,490
També puc desaparèixer en ella, i que tornarà.

286
00:17:04,490 --> 00:17:08,930
També pots fer fade a, que és específic per a la funció de fos.

287
00:17:08,930 --> 00:17:12,589
Pot fer que s'esvaeixi a qualsevol opacidad específica que desitja.

288
00:17:12,589 --> 00:17:16,869
Així que si vostè s'esvaeixen a poc a poc a la 0.5, que es convertirà en un mitjà visible.

289
00:17:16,869 --> 00:17:22,630
Jo puc fer que es vagi a 0,1, i de nou a 1 perquè sigui plenament visible de nou.

290
00:17:22,630 --> 00:17:24,760
Aquesta és una altra animació que es pot fer.

291
00:17:24,760 --> 00:17:26,750
>> Hi ha també els efectes de palanca.

292
00:17:26,750 --> 00:17:33,410
Així que vaig a seleccionar la identificació de palanca, el que correspon a aquesta caixa,

293
00:17:33,410 --> 00:17:38,970
i en aquest div pot trucar palanca, i si és visible es tornarà invisible,

294
00:17:38,970 --> 00:17:42,320
si és invisible es farà visible de nou.

295
00:17:42,320 --> 00:17:44,440
Així que acabo de cridar a aquesta funció de palanca dues vegades, la primera va ser

296
00:17:44,440 --> 00:17:48,380
el mateix que la pell, la segona trucada era el mateix que un espectacle.

297
00:17:48,380 --> 00:17:53,510
I també es pot fer això amb una palanca s'esvaeixen,

298
00:17:53,510 --> 00:17:55,730
que fa el mateix, llevat que en realitat s'esvaeix.

299
00:17:55,730 --> 00:17:59,410
I el mateix amb la diapositiva alternar.

300
00:17:59,410 --> 00:18:01,460
Ha efectes encadenats, així, el que significa

301
00:18:01,460 --> 00:18:05,520
si s'ha seleccionat un element i només trucar a un munt de mètodes d'animació en ell,

302
00:18:05,520 --> 00:18:07,400
si volia que s'esvaeixen, i després cap avall,

303
00:18:07,400 --> 00:18:11,040
i després amagar-se i després s'esvaeixen en el, ho farà en una fila.

304
00:18:11,040 --> 00:18:24,920
Així va desaparèixer, va tornar - per alguna raó, el cuir no van ocórrer.

305
00:18:24,920 --> 00:18:30,030
Anem a provar-ho. Sí, per la qual cosa es va esvair i després es va apartar.

306
00:18:30,030 --> 00:18:32,230
I hi ha molts més. Vostè pot utilitzar la funció animate

307
00:18:32,230 --> 00:18:35,370
per crear les seves pròpies animacions, que és bastant complex,

308
00:18:35,370 --> 00:18:38,790
sinó que li proporciona l'extensibilitat infinita.

309
00:18:38,790 --> 00:18:40,630
Vostè pot fer qualsevol tipus d'animació que desitgi.

310
00:18:40,630 --> 00:18:44,230
També pot utilitzar la cua per fer cua diverses animacions alhora.

311
00:18:44,230 --> 00:18:47,340
Així que si vols alguna cosa de volar a través de la pàgina,

312
00:18:47,340 --> 00:18:49,860
diapositiva de la part superior dreta a la inferior esquerra, vostè pot fer això,

313
00:18:49,860 --> 00:18:55,240
i només tenen un grapat d'accions que van un rere l'altre.

314
00:18:55,240 --> 00:18:57,490
>> El següent que anem a parlar és dels esdeveniments.

315
00:18:57,490 --> 00:19:02,090
Esdeveniments que permeten - fins ara, que hem estat el mecanografiar coses a la consola

316
00:19:02,090 --> 00:19:04,870
i aquesta és una manera de fer que això passi,

317
00:19:04,870 --> 00:19:08,020
sinó en una pàgina real, no seràs capaç de

318
00:19:08,020 --> 00:19:10,020
fer les coses de tipus d'usuari a la consola.

319
00:19:10,020 --> 00:19:12,050
Vostè vol que les coses succeeixin de forma automàtica.

320
00:19:12,050 --> 00:19:18,060
Per a això, cal utilitzar els esdeveniments que activen en algun determinat esdeveniment ocorri.

321
00:19:18,060 --> 00:19:21,340
Podeu consultar la documentació de tots els detalls.

322
00:19:21,340 --> 00:19:24,030
Així que anem a veure. Volem mostrar o amagar la caixa,

323
00:19:24,030 --> 00:19:29,340
però ara aquest botó no fa res perquè no posar-ho en pràctica encara.

324
00:19:29,340 --> 00:19:35,420
Aniré a la pàgina HTML actual.

325
00:19:35,420 --> 00:19:38,560
Aquí està la diapositiva. Hi ha un div per la diapositiva.

326
00:19:38,560 --> 00:19:41,230
Té la classe de diapositiva.

327
00:19:41,230 --> 00:19:46,890
Aquí està el text. Ara, hi ha una casella i el botó de caixa.

328
00:19:46,890 --> 00:19:52,900
Com podem fer realitat aquest va desaparèixer?

329
00:19:52,900 --> 00:19:58,250
En primer lloc, anem a escriure una funció que fa desaparèixer la identificació de la caixa.

330
00:19:58,250 --> 00:20:01,820
Aquesta és la sintaxi per funtion, anem a anomenar hideTheBox.

331
00:20:01,820 --> 00:20:06,130
No es necessita cap argument, perquè no hi ha arguments que s'han de prendre.

332
00:20:06,130 --> 00:20:08,950
Podem seleccionar la identificació de la caixa.

333
00:20:08,950 --> 00:20:15,020
Així, utilitzant el jQuery seleccionar, podem seleccionar ID de la caixa,

334
00:20:15,020 --> 00:20:17,700
i després simplement fer-lo desaparèixer.

335
00:20:17,700 --> 00:20:20,690
Farem que s'esvaeixen.

336
00:20:20,690 --> 00:20:27,390
Si ens trobem amb aquesta funció a la consola actual,

337
00:20:27,390 --> 00:20:33,380
podríem definir aquesta funció, podem trucar a hideTheBox, i funciona.

338
00:20:33,380 --> 00:20:36,650
Però volem que passi quan es prem el botó realitat.

339
00:20:36,650 --> 00:20:40,950
Per fer això, hem de fer servir un esdeveniment.

340
00:20:40,950 --> 00:20:45,500
Per unir-se a un esdeveniment en alguna tecla específica o algun esdeveniment d'acció,

341
00:20:45,500 --> 00:20:50,040
hem de seleccionar l'element que l'esdeveniment es dispararà -

342
00:20:50,040 --> 00:20:52,650
o que activarà l'esdeveniment, ho sento.

343
00:20:52,650 --> 00:20:57,220
>> Així que en primer lloc, anem a seleccionar el botó de quadre de ID

344
00:20:57,220 --> 00:20:59,610
perquè aquest és el botó, i ara, per aquest botó,

345
00:20:59,610 --> 00:21:02,750
volem crear una animació quan es fa clic en ell.

346
00:21:02,750 --> 00:21:05,040
Així que aquesta funció de clic.

347
00:21:05,040 --> 00:21:08,470
Permet enllaçar una altra funció a la mateixa.

348
00:21:08,470 --> 00:21:12,320
Aquesta funció pren una altra funció com a argument

349
00:21:12,320 --> 00:21:14,310
podem passar a la funció hideTheBox,

350
00:21:14,310 --> 00:21:20,950
i cada vegada que es fa clic en aquest botó, aquesta funció s'executarà automàticament.

351
00:21:20,950 --> 00:21:24,850
Així que això va a funcionar si salvem això, vaig a refrescar,

352
00:21:24,850 --> 00:21:33,460
i - un segon, ho sento.

353
00:21:33,460 --> 00:21:44,770
Vaig a corregir això molt ràpid.

354
00:21:44,770 --> 00:21:50,680
Okay. Això és. Així que ara la caixa està desapareixent quan fem clic al botó.

355
00:21:50,680 --> 00:21:55,470
També podem canviar això a fadeToggle,

356
00:21:55,470 --> 00:22:00,020
canviar simplement per amagar o mostrar la caixa,

357
00:22:00,020 --> 00:22:03,850
i això també funcionarà també, si ens refresquem.

358
00:22:03,850 --> 00:22:08,550
Podem amagar-ho, també podem demostrar-ho, i que seguirem treballant.

359
00:22:08,550 --> 00:22:12,210
Una altra cosa que podem fer és, en realitat no hem de definir aquesta funció hideTheBox

360
00:22:12,210 --> 00:22:15,050
abans de cridar a la funció de clic.

361
00:22:15,050 --> 00:22:17,640
Així que en lloc de definir la funció i cridar hideTheBox,

362
00:22:17,640 --> 00:22:20,310
només anem a anomenar si això es fa clic.

363
00:22:20,310 --> 00:22:22,310
Així podem definir de forma anònima per aquí,

364
00:22:22,310 --> 00:22:25,070
que és una característica que té JavaScript.

365
00:22:25,070 --> 00:22:29,720
Podeu definir una funció, normalment, diríem funció hideTheBox

366
00:22:29,720 --> 00:22:34,490
amb arguments, però en canvi, només podem dir que funciona sense arguments,

367
00:22:34,490 --> 00:22:36,870
iniciar el claudàtor per definir la funció,

368
00:22:36,870 --> 00:22:40,780
tancar la clau d'obertura, i després simplement definir la funció aquí,

369
00:22:40,780 --> 00:22:45,130
dins del primer parèntesi i l'últim parèntesi

370
00:22:45,130 --> 00:22:47,860
que corresponen als arguments de la funció de clic.

371
00:22:47,860 --> 00:22:53,320
Així que estem passant en aquesta funció, es pot copiar aquesta línia de codi just aquí,

372
00:22:53,320 --> 00:22:55,450
i que farà exactament el mateix.

373
00:22:55,450 --> 00:22:57,290
I ara no tenim aquesta funció fadeTheBox atzar

374
00:22:57,290 --> 00:22:59,960
que seu voltant sense cap raó aparent.

375
00:22:59,960 --> 00:23:02,070
La funció va ser definida anònima, que no té un nom.

376
00:23:02,070 --> 00:23:08,060
Només s'executa quan es fa clic al botó de caixa.

377
00:23:08,060 --> 00:23:12,180
Molt refrescant, un cop més, un cop més, i es pot veure que encara funciona.

378
00:23:12,180 --> 00:23:16,700
I aquesta és la manera de crear esdeveniments.

379
00:23:16,700 --> 00:23:19,190
>> Hi ha una gran quantitat d'esdeveniments que podem utilitzar.

380
00:23:19,190 --> 00:23:23,540
Vaig a tornar a utilitzar la consola que vostè acaba de mostrar com funcionen.

381
00:23:23,540 --> 00:23:28,210
Els identificadors per a cada un d'aquests corresponen a cada caixa.

382
00:23:28,210 --> 00:23:33,020
Així que aquest quadre és clic ID, aquesta és la clau d'identificació, i aquest és ID ratolí.

383
00:23:33,020 --> 00:23:36,120
Una altra cosa és que hi ha aquesta funció d'acció, en lloc d'escriure a terme tot el temps,

384
00:23:36,120 --> 00:23:41,610
De fet, vaig anar per davant i defineix aquesta funció d'acció aquí.

385
00:23:41,610 --> 00:23:46,860
Es fa el mateix que la funció hideTheBox.

386
00:23:46,860 --> 00:23:51,340
Es fa aquest quadre i, o bé s'esvaeix cap a fora o s'esvaeix ell dins

387
00:23:51,340 --> 00:23:54,110
I és per això que som capaços d'utilitzar aquí.

388
00:23:54,110 --> 00:24:00,350
Així que si fem clic en aquest tecleig ID, volem fer desaparèixer o reaparèixer la caixa.

389
00:24:00,350 --> 00:24:03,610
És el mateix que el botó que hem tingut en l'última diapositiva.

390
00:24:03,610 --> 00:24:07,450
Ara, després cridem a això, podem fer clic sobre aquest i la caixa desapareixerà,

391
00:24:07,450 --> 00:24:10,160
a continuació, feu clic de nou i el quadre tornarà a aparèixer.

392
00:24:10,160 --> 00:24:12,480
Això és bastant simple. Feu doble clic fa el mateix,

393
00:24:12,480 --> 00:24:15,660
excepte que requereix un doble clic.

394
00:24:15,660 --> 00:24:19,030
Així que si fa clic una vegada i feu clic de nou no passarà res,

395
00:24:19,030 --> 00:24:21,140
però si es fa doble clic ràpidament, desapareixerà.

396
00:24:21,140 --> 00:24:23,310
Si feu doble clic una altra vegada, va a tornar.

397
00:24:23,310 --> 00:24:25,250
Així que això és bastant simple.

398
00:24:25,250 --> 00:24:31,170
Entrada de teclat és una mica estrany, jo no crec que realment funciona en aquest exemple

399
00:24:31,170 --> 00:24:37,670
perquè la tecla, la tecla i premeu la tecla i altres accions clau

400
00:24:37,670 --> 00:24:47,190
activarà independentment element s'enllaça a.

401
00:24:47,190 --> 00:24:51,410
Per exemple, tot i que vaig lligar el polsador fins al cos o alguna cosa més complet,

402
00:24:51,410 --> 00:24:55,950
llavors seria encara JavaScript no importa - no és específica.

403
00:24:55,950 --> 00:25:00,190
No he de fer clic en aquesta opció i premeu una tecla per fer res desapareix.

404
00:25:00,190 --> 00:25:04,470
Això s'activa independentment de quin element Estic actualment polz

405
00:25:04,470 --> 00:25:06,880
Així que aquests en realitat no funcionen en aquest exemple

406
00:25:06,880 --> 00:25:13,180
perquè no em reconeix com entrar en l'entrada a la div teclat.

407
00:25:13,180 --> 00:25:15,740
>> Però si ens fixem en les accions del ratolí,

408
00:25:15,740 --> 00:25:19,620
el primer planen, i es pot fer alguna cosa d'això amb CSS.

409
00:25:19,620 --> 00:25:24,280
Si s'utilitza CSS, es poden crear de manera que si es passa sobre alguna cosa,

410
00:25:24,280 --> 00:25:28,940
llavors els seus canvis d'estil.

411
00:25:28,940 --> 00:25:32,170
Però l'ús de jQuery pot canviar els estils d'altres coses també.

412
00:25:32,170 --> 00:25:37,120
Així, per exemple, anem a cridar a l'acció si el ratolí sobre aquest div.

413
00:25:37,120 --> 00:25:39,660
Això vol dir que si el ratolí sobre ella, llavors la caixa desapareixerà.

414
00:25:39,660 --> 00:25:42,430
Si ens allunyem d'ella, el quadre torna a aparèixer.

415
00:25:42,430 --> 00:25:45,090
Si anomenem a això i hi ha sobre ella, la caixa no desapareix,

416
00:25:45,090 --> 00:25:47,050
i quant ens allunyem, torna.

417
00:25:47,050 --> 00:25:49,750
Si cridem a aquesta funció activable en l'identificador de ratolí,

418
00:25:49,750 --> 00:25:54,380
el que correspon a aquest quadre, llavors si el ratolí sobre la caixa,

419
00:25:54,380 --> 00:26:00,440
llavors la caixa desaparegui en realitat - és ser covard ara, però -

420
00:26:00,440 --> 00:26:06,310
si ens allunyem d'ella, tornarà a aparèixer. En aquest moment és impossible per alguna raó.

421
00:26:06,310 --> 00:26:12,720
El ratolí entre i funcions de moviment del ratolí és una mica similar, però lleugerament diferents.

422
00:26:12,720 --> 00:26:16,470
Ratolí entrar només s'activa quan el ratolí entra a la caixa, com s'esperava.

423
00:26:16,470 --> 00:26:19,210
Així que si vostè es mou en ell, que desapareixerà.

424
00:26:19,210 --> 00:26:23,210
Però no tornarà a aparèixer quan s'allunyi; hauràs de tornar sobre ell perquè torni.

425
00:26:23,210 --> 00:26:25,590
També hi ha la funció de desplaçament del ratolí, que activarà

426
00:26:25,590 --> 00:26:29,300
cada vegada que el ratolí està present fins i tot en el quadre.

427
00:26:29,300 --> 00:26:32,430
Així que seguiré endavant, apareixent i desapareixent.

428
00:26:32,430 --> 00:26:35,660
I en realitat és el registre - que sembla que acaba apareixent i desapareixent,

429
00:26:35,660 --> 00:26:39,140
però en realitat el registre moltes més accions que això,

430
00:26:39,140 --> 00:26:43,550
així que quan t'allunyes només va a seguir endavant perquè registra com un miler d'ells.

431
00:26:43,550 --> 00:26:46,620
Potser no és un mil. Potser 5.

432
00:26:46,620 --> 00:26:50,200
Registra més que això.

433
00:26:50,200 --> 00:26:53,280
El punt és que totes les accions del ratolí, hi ha un munt d'ells.

434
00:26:53,280 --> 00:26:55,480
Vostè pot llegir sobre els altres, però són una mica diferents,

435
00:26:55,480 --> 00:26:57,700
i vostè pot triar la que més et necessita

436
00:26:57,700 --> 00:27:02,130
per a qualsevol propòsit específic que vostè està tractant de fer.

437
00:27:02,130 --> 00:27:05,060
>> El següent que vaig a parlar és d'AJAX.

438
00:27:05,060 --> 00:27:09,340
AJAX, ja sé que no cobrim Javascript al tanta profunditat d'aquest any,

439
00:27:09,340 --> 00:27:11,770
així que només vaig a parlar d'AJAX en general per un minut.

440
00:27:11,770 --> 00:27:15,210
AJAX significa Asynchronous JavaScript i XML.

441
00:27:15,210 --> 00:27:19,030
Es tracta bàsicament de, per exemple, quan estàs a Facebook i t'empeny a la notificació,

442
00:27:19,030 --> 00:27:23,060
això es deu a AJAX s'està executant en el seu navegador web.

443
00:27:23,060 --> 00:27:25,800
Cada parell de segons el navegador web en realitat

444
00:27:25,800 --> 00:27:29,420
anar als servidors de Facebook, demanant-los que, tens alguna cosa nova per a mi,

445
00:27:29,420 --> 00:27:31,980
i després es torna a tu.

446
00:27:31,980 --> 00:27:36,320
Això li permet enviar peticions a un servidor

447
00:27:36,320 --> 00:27:38,660
sense haver de carregar la pàgina.

448
00:27:38,660 --> 00:27:42,040
Així que normalment, si vostè està utilitzant PHP i una base de dades,

449
00:27:42,040 --> 00:27:45,480
vostè ha de actualitzar la pàgina abans de poder obtenir nova informació des del servidor.

450
00:27:45,480 --> 00:27:48,770
Però l'ús d'AJAX, es pot tirar d'aquesta nova informació constantment,

451
00:27:48,770 --> 00:27:52,250
o estirar-lo quan fa clic a un botó o alguna cosa per l'estil.

452
00:27:52,250 --> 00:27:56,140
Així que això ens permet enviar sol · licituds sense necessitat de recarregar la pàgina,

453
00:27:56,140 --> 00:27:58,130
i podem utilitzar peticions GET o POST.

454
00:27:58,130 --> 00:28:05,370
>> ACONSEGUEIXEN peticions són, per exemple, si a Google.com in English

455
00:28:05,370 --> 00:28:10,900
i fer q test =. Això els està donant una prova de consulta.

456
00:28:10,900 --> 00:28:15,890
I això és una sol · licitud GET perquè està passant en aquests paràmetres en la pròpia URL.

457
00:28:15,890 --> 00:28:19,250
A petició POST és com si vostè els està enviant per correu postal.

458
00:28:19,250 --> 00:28:22,500
És com si el poses en una carta i l'envia fora d'ells,

459
00:28:22,500 --> 00:28:25,140
però que en realitat no veure el contingut. No són visibles a la URL.

460
00:28:25,140 --> 00:28:31,040
No es pot escriure directament en, cal enviar gairebé en secret.

461
00:28:31,040 --> 00:28:33,880
Està en un pal.

462
00:28:33,880 --> 00:28:38,660
Però l'ús de jQuery, pot fer peticions GET i POST

463
00:28:38,660 --> 00:28:42,740
molt més fàcil del que normalment pot utilitzar simplement JavaScript pla.

464
00:28:42,740 --> 00:28:50,140
Pot consultar les API que utilitzen peticions GET, i també es pot comprovar la informació d'inici de sessió.

465
00:28:50,140 --> 00:28:54,400
A la pàgina següent, he creat això, que pregunta: "Què hi ha per dinar?"

466
00:28:54,400 --> 00:28:58,230
mitjançant l'API d'aliments Harvard, així que tirarem això.

467
00:28:58,230 --> 00:29:01,840
Això és només un exemple de com es pot utilitzar jQuery per fer una sol · licitud GET a una API

468
00:29:01,840 --> 00:29:04,200
i obtenir informació de nou d'ella.

469
00:29:04,200 --> 00:29:07,090
Així que volem veure en el menú d'avui,

470
00:29:07,090 --> 00:29:10,560
i volem veure el que hi ha per dinar.

471
00:29:10,560 --> 00:29:16,500
Aquesta és la URL per crear una sol · licitud GET a jQuery.

472
00:29:16,500 --> 00:29:18,600
utilitza el $. obtenir la funció.

473
00:29:18,600 --> 00:29:22,290
El primer argument és l'adreça URL, pel que és exactament el que està consultant.

474
00:29:22,290 --> 00:29:27,200
A continuació, el següent argument és una funció que s'executa quan la sol · licitud GET és completa.

475
00:29:27,200 --> 00:29:29,980
Així que vostè envia fora alguna sol · licitud al servidor, espereu que torni.

476
00:29:29,980 --> 00:29:33,770
Quan ve de tornada, vas a prendre alguna acció amb les dades que hi ha de nou des del servidor.

477
00:29:33,770 --> 00:29:37,520
Seguirem endavant i el codi d'això també.

478
00:29:37,520 --> 00:29:42,110
No codificar aquesta bé, a propòsit.

479
00:29:42,110 --> 00:29:46,660
Aquí està l'TOT. En primer lloc, farem servir l'enllaç d'esdeveniments

480
00:29:46,660 --> 00:29:50,820
de manera que quan es prem aquest botó, que vam enviar d'una sol · licitud GET.

481
00:29:50,820 --> 00:29:53,410
I quan aquesta sol · licitud GET torna amb algunes dades,

482
00:29:53,410 --> 00:29:57,290
anem a escriure en aquest butlletí menjar div ID.

483
00:29:57,290 --> 00:30:02,860
En primer lloc, anem a seleccionar el botó ID aliments.

484
00:30:02,860 --> 00:30:07,320
Quan es fa clic, volem que es faci alguna cosa.

485
00:30:07,320 --> 00:30:11,930
Farem que un fuction anònima, com abans.

486
00:30:11,930 --> 00:30:15,550
Es pot embolicar aquestes claus,

487
00:30:15,550 --> 00:30:18,530
i al prémer aquest botó, volem enviar una sol · licitud GET

488
00:30:18,530 --> 00:30:20,750
per comprovar el que hi ha per menjar.

489
00:30:20,750 --> 00:30:24,970
Per a això, simplement podem escriure $. Aconseguir.

490
00:30:24,970 --> 00:30:28,850
Aquesta és una funció de jQuery, amb el signe de dòlar.

491
00:30:28,850 --> 00:30:31,430
Es triga un parell d'arguments. La primera d'elles és la URL,

492
00:30:31,430 --> 00:30:34,450
la segona és la funció de devolució de trucada, la funció que es diu

493
00:30:34,450 --> 00:30:37,740
quan aquesta sol · licitud torna en realitat.

494
00:30:37,740 --> 00:30:39,890
Anem a construir la primera URL.

495
00:30:39,890 --> 00:30:44,650
Podem obtenir de l'API que David va escriure dalt.

496
00:30:44,650 --> 00:30:51,360
Quin aquí, podem veure que és food.cs50.net/api/1.3/menus,

497
00:30:51,360 --> 00:30:54,140
i després només passa en els noms dels paràmetres que desitja.

498
00:30:54,140 --> 00:30:57,760
Així paràmetre 1 és el valor 1.

499
00:30:57,760 --> 00:31:00,910
Sembla data estàndard, data d'inici, per defecte fins avui

500
00:31:00,910 --> 00:31:03,110
si no s'introdueix res, i data de finalització també per defecte

501
00:31:03,910 --> 00:31:05,930
que avui en dia si no s'introdueix res.

502
00:31:05,930 --> 00:31:10,790
Això és el que volem. Volem obtenir només la informació d'avui en dia.

503
00:31:10,790 --> 00:31:12,950
>> Volem que el format estigui en JSON.

504
00:31:12,950 --> 00:31:15,570
Això és arbitrària, es pot usar qualsevol forma que desitgi.

505
00:31:15,570 --> 00:31:18,950
Vostè pot utilitzar CSV, però JSON és JavaScript Object Notation.

506
00:31:18,950 --> 00:31:24,150
És molt fàcil per a JavaScript d'entendre el que significa,

507
00:31:24,150 --> 00:31:27,110
i podem imprimir més fàcil d'aquesta manera.

508
00:31:27,110 --> 00:31:30,490
Així que anem a sol · licitar en JSON, i demanar l'esmorzar anem.

509
00:31:30,490 --> 00:31:37,660
Així menjar = dinar. Així que escriure la URL, tornem aquí.

510
00:31:37,660 --> 00:31:41,290
Hi ha menús. El primer paràmetre és la sortida = JSON

511
00:31:41,290 --> 00:31:44,640
perquè això és el que volem, i separar els paràmetres amb una "i".

512
00:31:44,640 --> 00:31:48,940
El segon paràmetre és - no me'n recordo.

513
00:31:48,940 --> 00:31:52,170
Meal. I volem menjar = dinar.

514
00:31:52,170 --> 00:31:57,390
Podeu provar aquesta URL, escrivint en el seu navegador i anar-hi.

515
00:31:57,390 --> 00:32:03,120
Se li donarà una sortida. És només un munt de coses que hi ha per menjar.

516
00:32:03,120 --> 00:32:10,410
És en aquest format lleig. Volem imprimir a la nostra pàgina en un format millor.

517
00:32:10,410 --> 00:32:12,580
Així que l'URL és correcte, ara només hem d'escriure una funció

518
00:32:12,580 --> 00:32:18,300
tornar a trucar quan la sol · licitud té èxit.

519
00:32:18,300 --> 00:32:20,430
Aquesta funció en realitat tenir un argument. Serà dades.

520
00:32:20,430 --> 00:32:25,650
Les dades són el que torna de la sol · licitud GET després es fa la petició GET.

521
00:32:25,650 --> 00:32:28,860
Podem fer les claus, aquí escrivim la funció anònima

522
00:32:28,860 --> 00:32:33,900
que realitza, utilitzant aquestes dades quan tinguem la informació de nou.

523
00:32:33,900 --> 00:32:37,840
Així les dades, quan escrivim en aquest URL,

524
00:32:37,840 --> 00:32:41,540
això és el que les dades que serà similar. Serà aquesta gran cadena.

525
00:32:41,540 --> 00:32:48,610
Però el millor és que, JavaScript pot analitzar utilitzant la funció JSON.parse.

526
00:32:48,610 --> 00:32:54,950
Així que anem a crear una nova variable anomenada de dades d'anàlisi.

527
00:32:54,950 --> 00:32:57,060
I les dades d'anàlisi sintàctica és una matriu d'objectes.

528
00:32:57,060 --> 00:33:04,200
Cada objecte conté informació com - bo, anem a fer una ullada.

529
00:33:04,200 --> 00:33:08,980
Té una data, un dinar, categoria, recepta, totes aquestes altres coses.

530
00:33:08,980 --> 00:33:10,860
Així que anem a imprimir el nom de cada un.

531
00:33:10,860 --> 00:33:13,790
Anem a repetir en tota la gamma de coses que tornem a ell,

532
00:33:13,790 --> 00:33:17,570
i acaba d'imprimir cada un - imprimir el nom de cada un.

533
00:33:17,570 --> 00:33:22,670
Aquest és un bucle.

534
00:33:22,670 --> 00:33:26,030
>> JavaScript té aquesta sintaxi útils on es pot crear una variable i un bucle sobre una matriu,

535
00:33:26,030 --> 00:33:30,150
i var i és només l'iterador, així que en comptes d'haver de fer var i = 0,

536
00:33:30,150 --> 00:33:40,290
jo era menor que la longitud, i + +, pots fer-ho var i en les dades analitzades.

537
00:33:40,290 --> 00:33:47,060
En aquest exemple, les dades analitzades (i) es correspondran amb l'element actual

538
00:33:47,060 --> 00:33:49,850
de la matriu, l'objecte real.

539
00:33:49,850 --> 00:33:51,720
I volem que el nom d'ella.

540
00:33:51,720 --> 00:33:54,170
Així que farem nom.

541
00:33:54,170 --> 00:33:57,000
I l'última cosa és que tindrem una mica de jQuery nou.

542
00:33:57,000 --> 00:34:02,660
En realitat afegir-lo a la div, aquesta informació div menjar que està actualment buida.

543
00:34:02,660 --> 00:34:05,430
Així que anem a seleccionar això.

544
00:34:05,430 --> 00:34:13,870
Anem a fer servir jQuery i selecta menjar info div ID o info menjar ID, ho sento.

545
00:34:13,870 --> 00:34:16,580
Volem afegir a això.

546
00:34:16,580 --> 00:34:21,030
Si féssim la prova, per exemple, seria simplement sobreescriure cada vegada.

547
00:34:21,030 --> 00:34:29,190
Així que només podem afegir això.

548
00:34:29,190 --> 00:34:31,889
L'element actual a la matriu, ens posarem el nom d'ella,

549
00:34:31,889 --> 00:34:38,159
i l'hi afegim al final del menjar info div ID.

550
00:34:38,159 --> 00:34:40,120
I a continuació, només perquè es vegi més neta,

551
00:34:40,120 --> 00:34:51,550
també anem afegim un salt de línia pel que no és tot en una sola línia.

552
00:34:51,550 --> 00:34:55,280
Així que si tot va bé, que ha de ser bo -

553
00:34:55,280 --> 00:34:57,220
en primer lloc, cada vegada que es fa clic en aquest botó,

554
00:34:57,220 --> 00:35:00,070
s'enviarà d'una sol · licitud GET a l'URL.

555
00:35:00,070 --> 00:35:02,500
Quan les dades es torna d'ella, va a analitzar-lo,

556
00:35:02,500 --> 00:35:06,950
convertir-lo en JSON, llaç sobre tota la matriu que representa les dades,

557
00:35:06,950 --> 00:35:10,310
i després afegir el nom i un salt de línia

558
00:35:10,310 --> 00:35:16,500
per a cada línia d'aquest butlletí menjar ID que abans estava buida.

559
00:35:16,500 --> 00:35:18,910
Així que tornar a aquesta pàgina, anem a refrescar,

560
00:35:18,910 --> 00:35:23,690
clic, saber - no funciona. Això és lamentable.

561
00:35:23,690 --> 00:35:25,830
I aquí és on entra en joc la depuració

562
00:35:25,830 --> 00:35:30,070
Index.html, línia 1.

563
00:35:30,070 --> 00:35:57,210
És interessant.

564
00:35:57,210 --> 00:35:59,720
Està bé, bé, en lloc de gastar temps fent això, jo només vaig a

565
00:35:59,720 --> 00:36:07,070
tiri cap amunt el fitxer fet que tinc, que és la versió completa.

566
00:36:07,070 --> 00:36:13,710
No estic segur de quina és la diferència, però només puc obrir això al seu lloc.

567
00:36:13,710 --> 00:36:19,740
I anem a la AJAX, i això hauria de funcionar.

568
00:36:19,740 --> 00:36:21,730
Això és el que era per al dinar,

569
00:36:21,730 --> 00:36:24,870
en cap ordre en particular, amb cometes al voltant d'ell, així que no és el més bonic.

570
00:36:24,870 --> 00:36:27,090
Però, òbviament, si estigués fent això per a un projecte final,

571
00:36:27,090 --> 00:36:30,120
vostè desitja que es vegi millor.

572
00:36:30,120 --> 00:36:32,530
Però això és només un exemple senzill de com es fa la petició GET.

573
00:36:32,530 --> 00:36:34,580
I si ens fixem en el codi real, suposo, estic bastant segur

574
00:36:34,580 --> 00:36:39,690
segueix sent més o menys la mateixa.

575
00:36:39,690 --> 00:37:04,990
Oh, em vaig oblidar de convertir-lo en una cadena, això és tot.

576
00:37:04,990 --> 00:37:07,920
No, no està encara treballant. De totes maneres, aquí està el codi complet real

577
00:37:07,920 --> 00:37:10,300
pel que aquest ha de ser similar,

578
00:37:10,300 --> 00:37:16,400
i fa el mateix que el que acabo d'implementar.

579
00:37:16,400 --> 00:37:22,760
En fer clic al botó, s'utilitza GET JSON per analitzar automàticament les dades.

580
00:37:22,760 --> 00:37:29,190
Presa les dades de nou d'ell i recorre tota la gamma

581
00:37:29,190 --> 00:37:32,770
i imprimeix el - el que sigui per dinar, el nom de la mateixa,

582
00:37:32,770 --> 00:37:38,020
i afegeix un salt de línia després de cada línia.

583
00:37:38,020 --> 00:37:41,100
Així és com s'utilitza la funció GET.

584
00:37:41,100 --> 00:37:44,040
>> També pot utilitzar POST, que jo no tinc temps

585
00:37:44,040 --> 00:37:47,940
per escriure un exemple d'això, però podem mirar la documentació.

586
00:37:47,940 --> 00:37:53,220
Si ens fixem en jquery.post,

587
00:37:53,220 --> 00:37:55,510
es pot veure que és gairebé el mateix.

588
00:37:55,510 --> 00:38:01,650
Vostè té una URL, però en lloc de passar paràmetres amb -

589
00:38:01,650 --> 00:38:03,990
simplement posar-los en la cadena de la pròpia URL,

590
00:38:03,990 --> 00:38:06,300
vostè ha de passar en aquesta variable de dades

591
00:38:06,300 --> 00:38:11,990
que és bàsicament una matriu, un diccionari que assigna els paràmetres als valors.

592
00:38:11,990 --> 00:38:17,690
Es passa que, i que els envia a l'ús d'un POST.

593
00:38:17,690 --> 00:38:20,790
I un cop tens això, llavors vostè pot tenir una funció èxit

594
00:38:20,790 --> 00:38:23,930
que s'executa quan les dades vénen de tornada.

595
00:38:23,930 --> 00:38:26,430
En cas contrari, és exactament el mateix. Així que fent servir POST,

596
00:38:26,430 --> 00:38:29,970
és possible que vulgueu utilitzar POST, per exemple, si té un formulari d'entrada

597
00:38:29,970 --> 00:38:35,780
deixa que les contrasenyes d'entrada de les persones en ella, i enviar les contrasenyes de

598
00:38:35,780 --> 00:38:41,850
a la seqüència de comandaments de servidor, per comprovar en la base de dades si l'usuari és vàlid o no.

599
00:38:41,850 --> 00:38:46,700
Vostè pot fer que tots usant jQuery en lloc d'haver d'actualitzar la pàgina en absolut.

600
00:38:46,700 --> 00:38:52,160
Això és el que he implementat al blog que he mostrat abans.

601
00:38:52,160 --> 00:38:59,530
Si anem al portal extrem i tancar la sessió, tanqueu la sessió,

602
00:38:59,530 --> 00:39:02,600
Tanqueu la sessió no funciona.

603
00:39:02,600 --> 00:39:13,360
Bé, permetin-me obrir-lo en una nova finestra.

604
00:39:13,360 --> 00:39:16,580
Aquí hi ha una contrasenya, i jo anava a escriure alguna cosa a l'atzar.

605
00:39:16,580 --> 00:39:18,590
No funciona, però es pot veure que no ens

606
00:39:18,590 --> 00:39:20,840
en realitat ha de actualitzar la pàgina en absolut.

607
00:39:20,840 --> 00:39:24,610
El codi, si vols fer una ullada,

608
00:39:24,610 --> 00:39:37,460
és tot el disponible a aquí.

609
00:39:37,460 --> 00:39:45,680
Així que el codi que vaig escriure l'any passat alguna vegada.

610
00:39:45,680 --> 00:39:47,790
Com es pot veure aquí, estem enviant una sol · licitud POST.

611
00:39:47,790 --> 00:39:50,400
Tinc un arxiu anomenat login.php a la part de darrere,

612
00:39:50,400 --> 00:39:53,860
que comprova si la contrasenya és vàlida.

613
00:39:53,860 --> 00:39:56,000
Els paràmetres que passem a Son contrasenya per al

614
00:39:56,000 --> 00:40:00,030
l'entrada que està en aquesta caixa d'entrada actualment.

615
00:40:00,030 --> 00:40:04,110
I quan les dades es torna, comprovem.

616
00:40:04,110 --> 00:40:07,680
Si la informació és falsa, llavors es diu contrasenya incorrecta, feu lliscar cap avall,

617
00:40:07,680 --> 00:40:09,580
i simplement fer-lo desaparèixer després d'això.

618
00:40:09,580 --> 00:40:12,320
En cas contrari, carreguem la pàgina d'administració.

619
00:40:12,320 --> 00:40:15,080
I tot això va ser fet usant JSON.

620
00:40:15,080 --> 00:40:18,510
En aquest número de línies de codi, pots passar les dades a la part de darrere,

621
00:40:18,510 --> 00:40:21,020
comprovi si és correcta, comproveu si s'ha connectat correctament,

622
00:40:21,020 --> 00:40:24,200
i en realitat respondre-hi, la reorientació de la persona a la pàgina correcta

623
00:40:24,200 --> 00:40:29,760
o no deixar-los entrar i els va dir que tenien una contrasenya incorrecta.

624
00:40:29,760 --> 00:40:33,040
Així que això és un exemple de com es pot utilitzar el pal de jQuery

625
00:40:33,040 --> 00:40:37,010
per enviar una petició POST a la part de darrere,

626
00:40:37,010 --> 00:40:42,400
comprovar si algú està connectat.

627
00:40:42,400 --> 00:40:44,820
>> Molt bé, així que això és tots els exemples que he tingut, i totes les coses que volia cobrir.

628
00:40:44,820 --> 00:40:47,110
Aquestes són les coses més importants que jQuery li permet fer:

629
00:40:47,110 --> 00:40:52,640
seleccionar elements, modificar mitjançant la manipulació DOM,

630
00:40:52,640 --> 00:40:56,340
pot afegir efectes, activi coses en certs esdeveniments,

631
00:40:56,340 --> 00:41:00,430
i també fer peticions AJAX molt transparent i senzilla.

632
00:41:00,430 --> 00:41:02,840
Així que gràcies per venir i veure,

633
00:41:02,840 --> 00:41:06,230
i si vostè té qualsevol pregunta, només fes-m'ho saber. Sí?

634
00:41:06,230 --> 00:41:12,730
[Estudiant] Abans, quan vas aparèixer, que tenia JSON després de la petició POST entre cometes,

635
00:41:12,730 --> 00:41:15,170
i em preguntava el que van fer.

636
00:41:15,170 --> 00:41:20,070
>> Sí, ja veig. La qüestió era que, en l'exemple que acaba d'aparèixer,

637
00:41:20,070 --> 00:41:25,790
existia la paraula JSON entre cometes al voltant de la -

638
00:41:25,790 --> 00:41:31,690
Vaig a tirar de nou - al voltant de la funció POST.

639
00:41:31,690 --> 00:41:43,320
Estic tirant-lo cap amunt per mostrar.

640
00:41:43,320 --> 00:41:46,890
Així que aquí està aquesta petició POST, i hi ha aquesta JSON entre cometes.

641
00:41:46,890 --> 00:41:50,280
Això defineix el que estem esperant que la sortida sigui.

642
00:41:50,280 --> 00:41:54,070
Així que si passem a JSON com el tipus de dades esperat,

643
00:41:54,070 --> 00:41:56,070
no és un requisit, però si passem endins,

644
00:41:56,070 --> 00:41:58,590
llavors les dades de forma automàtica s'analitzaran com JSON.

645
00:41:58,590 --> 00:42:00,600
Així que no hem de cridar a la funció d'anàlisi JSON en ell,

646
00:42:00,600 --> 00:42:02,620
només va a succeir de forma automàtica.

647
00:42:02,620 --> 00:42:05,150
I si vostè fes un cop d'ull a la documentació de POST,

648
00:42:05,150 --> 00:42:09,850
existeix aquesta variable de tipus de dades, el tipus de dades que s'espera des del servidor.

649
00:42:09,850 --> 00:42:12,660
Per defecte és una conjectura intel · ligent que pot estar equivocat,

650
00:42:12,660 --> 00:42:15,520
així que vostè pot deixar en blanc, però és només el tipus de dades

651
00:42:15,520 --> 00:42:21,680
en la codificació que utilitzeu, ja sigui JSON o XML, o alguna cosa més.

652
00:42:21,680 --> 00:42:25,280
>> Alguna altra pregunta?

653
00:42:25,280 --> 00:42:27,300
Està bé. Si vostè té qualsevol altra pregunta, no dubteu a enviar un correu electrònic

654
00:42:27,300 --> 00:42:30,830
en vshekhawat@college.harvard.edu,

655
00:42:30,830 --> 00:42:34,860
i les diapositives i el codi ha d'estar disponible en línia molt aviat.

656
00:42:34,860 --> 00:42:42,810
Bona sort amb els seus projectes finals, espero que utilitza jQuery.

657
00:42:42,810 --> 00:42:46,810
[CS50.TV]