1
00:00:00,000 --> 00:00:02,862
>> [REPRODUCCIÓ DE MÚSICA]

2
00:00:02,862 --> 00:00:10,030

3
00:00:10,030 --> 00:00:11,580
>> DAVID Malan: Aquest és CS50.

4
00:00:11,580 --> 00:00:12,880
Aquest és el començament de la setmana nou.

5
00:00:12,880 --> 00:00:15,797
I això és el que hauria
estat 200o aniversari de Mr. Boole.

6
00:00:15,797 --> 00:00:17,630
Així que això és els becaris
a la qual al·ludim hem

7
00:00:17,630 --> 00:00:21,800
força vegades sobre l'ús de
Variables booleanes veritables i falses,

8
00:00:21,800 --> 00:00:22,910
1 i 0 i tal.

9
00:00:22,910 --> 00:00:25,270
I aquesta era de Google
Homenatge a ell avui.

10
00:00:25,270 --> 00:00:26,489
Ell hauria complert 200.

11
00:00:26,489 --> 00:00:28,280
Així que si voleu
uneix-t'hi per dinar CS50,

12
00:00:28,280 --> 00:00:30,279
fer una ullada a l'enllaç
a la pàgina web del curs.

13
00:00:30,279 --> 00:00:33,580
I aquestes cares i amics com
aquests li esperen aquí a Cambridge.

14
00:00:33,580 --> 00:00:35,360
Rostres com aquests t'esperen a New Haven.

15
00:00:35,360 --> 00:00:37,800
I, de fet, en Ken
New Haven amablement va fer

16
00:00:37,800 --> 00:00:41,594
el que es diu un GIF animat d'Eli
aquí en una recent lunch-- un GIF és encara

17
00:00:41,594 --> 00:00:44,260
un altre format d'arxiu gràfic,
amb la qual estàs familiar-- que

18
00:00:44,260 --> 00:00:46,300
es veu una mica alguna cosa com això.

19
00:00:46,300 --> 00:00:48,179
Així que només una seqüència de-- acord.

20
00:00:48,179 --> 00:00:49,720
Ningú aquí a Cambridge està rient.

21
00:00:49,720 --> 00:00:51,720
No obstant això, a New Haven, aquest
és molt divertit, oi?

22
00:00:51,720 --> 00:00:52,350
Tot bé.

23
00:00:52,350 --> 00:00:53,940
>> Així que uneix-te a nosaltres allà.

24
00:00:53,940 --> 00:00:55,900
Aquí a Harvard,
En concret, aquest dimecres,

25
00:00:55,900 --> 00:00:59,480
si vostè és un estudiant de segon any o estudiant de primer any even--
o fins i tot el pensament junior-- de decisions

26
00:00:59,480 --> 00:01:01,563
un interruptor a l'ordinador
ciència, saber que no vaig

27
00:01:01,563 --> 00:01:04,440
ser un CS assessorant fira d'aquest
Dimecres, poc després de la classe

28
00:01:04,440 --> 00:01:08,040
a les 4:00 PM a l'ordinador
edifici de ciències Maxwell Dworkin.

29
00:01:08,040 --> 00:01:11,890
Anem a posar això en el curs de
lloc web per demà, també.

30
00:01:11,890 --> 00:01:14,430
Donuts, m'han dit, se serviran.

31
00:01:14,430 --> 00:01:15,180
>> Tot bé.

32
00:01:15,180 --> 00:01:18,790
Història-- tan graciós que estava ficant
voltant en l'Internet,

33
00:01:18,790 --> 00:01:23,575
i em vaig trobar amb alguns vells arxius
del meu antic lloc web.

34
00:01:23,575 --> 00:01:25,950
I resulta fora-- al voltant d'aquest
temps, sembla molt oportuna

35
00:01:25,950 --> 00:01:28,910
ja que tinc entès que les eleccions de la UC
estan a punt de preparar-se de nou.

36
00:01:28,910 --> 00:01:32,230
Així que vaig córrer per a la UC, perdut miserablement.

37
00:01:32,230 --> 00:01:34,770
I potser això va ser en part per què.

38
00:01:34,770 --> 00:01:37,600
Així que aquest era el meu lloc web en el temps.

39
00:01:37,600 --> 00:01:40,477
Per alguna raó, vaig pensar que era
una bona idea, abans de dir-li a la gent

40
00:01:40,477 --> 00:01:43,310
el que el meu plataforma era i per què
ha de votar per mi, que tenen

41
00:01:43,310 --> 00:01:47,770
fer clic per entrar en descobrir que
informació, que en retrospectiva és

42
00:01:47,770 --> 00:01:48,660
una mica esgarrifós.

43
00:01:48,660 --> 00:01:50,910
Realment no sé el que era.

44
00:01:50,910 --> 00:01:53,140
>> Però certament no ho va fer
ajudar a la meva campanya.

45
00:01:53,140 --> 00:01:56,874
També em vaig adonar que per l'alta
any-- vaig tenir aquest calendari Muppet.

46
00:01:56,874 --> 00:01:58,540
Muppets eren mena de moda per aquell temps.

47
00:01:58,540 --> 00:01:59,456
O potser no ho eren.

48
00:01:59,456 --> 00:02:01,790
Vaig tenir un calendari Muppet per aquell temps.

49
00:02:01,790 --> 00:02:04,860
I vaig pensar que seria genial per nomenar
el meu equip a la xarxa de Harvard

50
00:02:04,860 --> 00:02:07,460
frogman.student.harvard.edu.

51
00:02:07,460 --> 00:02:10,370
En aquest moment, tots teníem única
noms d'amfitrió identificables.

52
00:02:10,370 --> 00:02:13,150
I vostè podria triar alguna vanitat
nomenar en lloc del seu propi nom.

53
00:02:13,150 --> 00:02:15,580
I me'n vaig anar amb home granota per alguna raó.

54
00:02:15,580 --> 00:02:19,040
>> I llavors em started-- Vaig passar molt
de temps accedint a aquests enllaços

55
00:02:19,040 --> 00:02:20,280
aquest matí.

56
00:02:20,280 --> 00:02:24,690
I aquesta va ser la meva pàgina sobre,
que ara tipus de sembla adorable.

57
00:02:24,690 --> 00:02:28,210
Però també dóna testimoni de sol
fins a quin punt la tecnologia ha arribat.

58
00:02:28,210 --> 00:02:30,310
Vull dir, al seu dia,
un 486 era alguna cosa.

59
00:02:30,310 --> 00:02:34,090
En aquests dies, és super, super,
super lent i ben menys

60
00:02:34,090 --> 00:02:36,216
el que podria tenir en el seu
pròpies butxaques en aquests dies.

61
00:02:36,216 --> 00:02:38,465
Hi ha més allà que
que és encara més vergonyós.

62
00:02:38,465 --> 00:02:39,770
Així que vaig a deixar les coses així.

63
00:02:39,770 --> 00:02:42,640
Però aquesta va ser la meva primera
incursió en web-- oh, no.

64
00:02:42,640 --> 00:02:43,180
Això no era.

65
00:02:43,180 --> 00:02:47,000
La meva primera incursió real de programació web
Va ser aquest lloc, que simplement es va oblidar.

66
00:02:47,000 --> 00:02:50,620
En algun moment, vaig aprendre a
fer que les imatges de fons repetitives.

67
00:02:50,620 --> 00:02:55,260
I així vaig trobar aquest mosaic efectiva,
com a jugador d'hoquei, el futbol i el golf

68
00:02:55,260 --> 00:02:58,040
pilota, o sigui el que sigui
per al lloc web Frosh missatges instantanis.

69
00:02:58,040 --> 00:03:01,390
I això era en realitat, realment la
primer projecte basat en la web que vaig prendre en--

70
00:03:01,390 --> 00:03:03,880
Crec que potser estudiant de segon any
any, any-- Junior

71
00:03:03,880 --> 00:03:07,622
després de prendre CS50 i CS51, un
de les classes de seguiment en comú.

72
00:03:07,622 --> 00:03:09,330
Em vaig adonar en la recerca
a través dels arxius

73
00:03:09,330 --> 00:03:12,150
que un dels meus successors i
amics, Lee, una mena de canviar

74
00:03:12,150 --> 00:03:13,480
els drets d'autor per dins.

75
00:03:13,480 --> 00:03:17,520
Però això era en veritat una cosa que
Que hauria de tenir la vergonya a.

76
00:03:17,520 --> 00:03:19,370
Però en aquest moment, aquest
va ser el primer lloc web,

77
00:03:19,370 --> 00:03:22,220
com vaig dir fa unes setmanes,
pel qual estudiants de primer any podria

78
00:03:22,220 --> 00:03:24,350
inscriure en esports intramurs aquí.

79
00:03:24,350 --> 00:03:27,950
I així resulta que
que les imatges de fons

80
00:03:27,950 --> 00:03:29,530
així no són una bona idea.

81
00:03:29,530 --> 00:03:31,840
Però la web era nou, i
tots estàvem experimentant.

82
00:03:31,840 --> 00:03:34,310
I això és el que
pel que sembla ho va fer en el seu moment.

83
00:03:34,310 --> 00:03:34,810
Tot bé.

84
00:03:34,810 --> 00:03:38,020
Així que sense més preàmbuls, canviem
engranatges avui per donar-li, en realitat,

85
00:03:38,020 --> 00:03:42,250
l'última peça que li pot resultar
especialment útil per a projectes fi de carrera

86
00:03:42,250 --> 00:03:44,780
sinó també que començarà a
fer que la web a tot el món sencer

87
00:03:44,780 --> 00:03:46,680
sentir una mica més comprensible.

88
00:03:46,680 --> 00:03:49,460
De fet, anem a introduir
una més llenguatge de programació

89
00:03:49,460 --> 00:03:52,474
crida JavaScript que és similar
i diferent de diferents maneres

90
00:03:52,474 --> 00:03:54,140
de les llengües que hem vist fins al moment.

91
00:03:54,140 --> 00:03:55,807
>> Així C, recordar, és aquest llenguatge compilat.

92
00:03:55,807 --> 00:03:57,473
Has d'executar a través d'un compilador.

93
00:03:57,473 --> 00:03:59,810
Vostè rep el codi font d'oposició
codi, o zeros i uns.

94
00:03:59,810 --> 00:04:03,000
I aquests són zeros i uns que
la seva CPU, Central Processing Unit,

95
00:04:03,000 --> 00:04:04,360
realment entendre.

96
00:04:04,360 --> 00:04:06,610
PHP, per contra, no és
un llenguatge compilat.

97
00:04:06,610 --> 00:04:08,772
És un què?

98
00:04:08,772 --> 00:04:09,980
És un llenguatge interpretat.

99
00:04:09,980 --> 00:04:11,750
Així que hi ha algun programa
anomenat un intèrpret que

100
00:04:11,750 --> 00:04:13,708
ha de llegir it-- dalt
baix, d'esquerra a dreta-

101
00:04:13,708 --> 00:04:16,519
i esbrinar el que tots
la seva sintaxi fa i significa,

102
00:04:16,519 --> 00:04:20,200
si es tracta d'un bucle o una condició
o qualsevol altre número de la programació

103
00:04:20,200 --> 00:04:20,740
construeix.

104
00:04:20,740 --> 00:04:22,210
Així que això és un llenguatge interpretat.

105
00:04:22,210 --> 00:04:23,910
>> A continuació presentem HTML.

106
00:04:23,910 --> 00:04:26,440
I HTML ni tan sols és un
llenguatge de programació.

107
00:04:26,440 --> 00:04:28,110
Ens diem què?

108
00:04:28,110 --> 00:04:31,650
Un llenguatge de marcat, que és just
una mena de forma elegant de dir que

109
00:04:31,650 --> 00:04:35,820
no té construccions de programació com
vam veure fins i tot en el dia d'Scratch.

110
00:04:35,820 --> 00:04:36,720
No hi ha bucles.

111
00:04:36,720 --> 00:04:37,920
No hi ha condicions.

112
00:04:37,920 --> 00:04:40,820
Realment és una llengua
sobre el marcatge de les dades

113
00:04:40,820 --> 00:04:43,620
i formatar o
l'estructuració d'alguna manera.

114
00:04:43,620 --> 00:04:46,147
>> CSS, per la seva part, de manera similar
no és un llenguatge de programació.

115
00:04:46,147 --> 00:04:47,730
És fins i tot més orientada estèticament.

116
00:04:47,730 --> 00:04:50,470
I li permet ordenar d'afinar
coses com la mida i els colors de la font

117
00:04:50,470 --> 00:04:51,850
i col·locació i tot això.

118
00:04:51,850 --> 00:04:52,370
Després vam tenir

119
00:04:52,370 --> 00:04:53,160
>> SQL.

120
00:04:53,160 --> 00:04:56,010
Així SQL és de fet una programació
llenguatge en cert sentit,

121
00:04:56,010 --> 00:04:59,330
encara que a mesura
específicament a bases de dades.

122
00:04:59,330 --> 00:05:03,347
Però tot i que només li presentem
seleccionar i inserir i esborrar i actualitzar

123
00:05:03,347 --> 00:05:05,430
i un parell d'altres,
Resulta que en realitat es pot

124
00:05:05,430 --> 00:05:07,380
escriure funcions o
procediments, ja que són

125
00:05:07,380 --> 00:05:11,270
trucada, en SQL que es veuen i actuen
absolutament com a funcions PHP i C.

126
00:05:11,270 --> 00:05:12,390
Així que sabem que els existeixen.

127
00:05:12,390 --> 00:05:15,348
Però ni tan sols ens molestem amb ells
com acabem gratem la superfície aquí.

128
00:05:15,348 --> 00:05:18,600
I després JavaScript, l'últim de
les nostres llengües van introduir formalment.

129
00:05:18,600 --> 00:05:21,029
Així JavaScript, també, és
un llenguatge interpretat.

130
00:05:21,029 --> 00:05:23,070
I els que estan familiaritzats, ho fan
vol distingir-

131
00:05:23,070 --> 00:05:26,960
amb alguna característica
tant des de C i PHP?

132
00:05:26,960 --> 00:05:28,300
Què el fa diferent?

133
00:05:28,300 --> 00:05:29,650
>> AUDIÈNCIA: No és compilat.

134
00:05:29,650 --> 00:05:29,930
>> DAVID Malan: Digui una altra vegada?

135
00:05:29,930 --> 00:05:31,200
>> AUDIÈNCIA: No és compilat.

136
00:05:31,200 --> 00:05:31,930
>> DAVID Malan: No és compilat.

137
00:05:31,930 --> 00:05:33,450
Així que, també, s'interpreta.

138
00:05:33,450 --> 00:05:34,760
Així que no és compilat.

139
00:05:34,760 --> 00:05:37,210
Però això fa que sigui una mica com PHP.

140
00:05:37,210 --> 00:05:39,545
Però segueix sent diferent de
PHP d'alguna manera sorprenent,

141
00:05:39,545 --> 00:05:40,920
almenys en la forma en què farem servir.

142
00:05:40,920 --> 00:05:41,205
Sí?

143
00:05:41,205 --> 00:05:41,940
>> AUDIÈNCIA: S'executa en el client.

144
00:05:41,940 --> 00:05:44,000
>> DAVID Malan: Corre
del costat del client, en general.

145
00:05:44,000 --> 00:05:47,190
Això és de fet el distintiu
característic per a nosaltres en aquest moment.

146
00:05:47,190 --> 00:05:51,170
C va ser del costat del servidor, en el sentit
que vam fer tot a IDE CS50.

147
00:05:51,170 --> 00:05:53,630
PHP ha estat fins ara
del costat del servidor a la mesura

148
00:05:53,630 --> 00:05:56,550
ja que, també, es posa interpreted--
no compilat, però interpreted--

149
00:05:56,550 --> 00:06:00,690
dins CS50 IDE, que per descomptat és
només un servidor o servidors en el núvol.

150
00:06:00,690 --> 00:06:03,070
>> Però JavaScript, fins i tot
encara que et vas

151
00:06:03,070 --> 00:06:07,000
per començar a escriure per a, diguem, pset
huit i potser definitiva projects-- ets

152
00:06:07,000 --> 00:06:09,620
anar a la dreta en
IDE CS50 i guardar-

153
00:06:09,620 --> 00:06:14,760
en els arxius dins d'IDE CS50, CS50 IDE
i, al seu torn, els servidors del núvol

154
00:06:14,760 --> 00:06:19,160
en el qual s'allotja, no van
interpretar o executar el seu codi.

155
00:06:19,160 --> 00:06:23,880
Més aviat, va ser enviats a
forma inalterada fins al navegador.

156
00:06:23,880 --> 00:06:26,990
I és llavors serà IE
o Chrome o Firefox o Safari

157
00:06:26,990 --> 00:06:30,697
o el que sigui que realment interpreta
que, de dalt a baix, d'esquerra a dreta.

158
00:06:30,697 --> 00:06:32,780
Així que la distinció clau
característica per avui

159
00:06:32,780 --> 00:06:36,110
és que JavaScript està del costat del client
i PHP, per exemple,

160
00:06:36,110 --> 00:06:37,690
ha estat del costat del servidor.

161
00:06:37,690 --> 00:06:40,920
Ara, això té implicacions interessants
per, igual que, la propietat intel·lectual

162
00:06:40,920 --> 00:06:42,660
i que en realitat es pot veure el seu codi.

163
00:06:42,660 --> 00:06:44,860
I, en efecte, es pot anar
al web i veure més

164
00:06:44,860 --> 00:06:47,530
qualsevol codi que algú té
escrit en JavaScript.

165
00:06:47,530 --> 00:06:50,230
A vegades és més fàcil de llegir,
de vegades és ofuscat.

166
00:06:50,230 --> 00:06:52,550
Però més sobre això en el moment oportú.

167
00:06:52,550 --> 00:06:57,530
>> Així JavaScript, prou bé, és
molt similars, sintàcticament, a C.

168
00:06:57,530 --> 00:06:59,364
I molt com PHP,
no hi ha funció principal.

169
00:06:59,364 --> 00:07:02,113
Si vols començar a escriure
Codi de JavaScript, com es veurà avui,

170
00:07:02,113 --> 00:07:03,270
que acaba de començar a escriure-ho.

171
00:07:03,270 --> 00:07:06,910
Però és, veuràs, en particular
útil en el context dels navegadors web.

172
00:07:06,910 --> 00:07:09,820
No obstant això, el meu petit
disclaimer-- generalment abans els vaig parlar

173
00:07:09,820 --> 00:07:13,790
era dir que pugui cada vegada
ús avui dia del costat del servidor JavaScript

174
00:07:13,790 --> 00:07:17,655
utilitzant un marc de fantasia anomenada NODE.JS
que algunes de les aplicacions del CS50 propis

175
00:07:17,655 --> 00:07:18,280
estan escrits en.

176
00:07:18,280 --> 00:07:20,640
Comprovi 50 utilitza realment Node.js.

177
00:07:20,640 --> 00:07:24,140
Però anem a centrar-se en
Del costat del client JavaScript a partir d'ara.

178
00:07:24,140 --> 00:07:26,750
>> Així que aquí és un conjunt de condicions en PHP.

179
00:07:26,750 --> 00:07:29,350
Ho sentim, en-- realitat, que
declaració, també és correcte.

180
00:07:29,350 --> 00:07:32,200
Aquest és també un conjunt de
condicions de JavaScript.

181
00:07:32,200 --> 00:07:35,560
Sintàcticament, és
idèntica a C i PHP.

182
00:07:35,560 --> 00:07:39,040
Expressions del Sr. Boole són,
De la mateixa manera, sintàcticament

183
00:07:39,040 --> 00:07:41,190
idèntica a tots dos C i PHP.

184
00:07:41,190 --> 00:07:44,100
També comptem amb interruptors en
JavaScript que semblen idèntics.

185
00:07:44,100 --> 00:07:46,350
Tenim per a bucles que són
estructurat de forma idèntica,

186
00:07:46,350 --> 00:07:48,140
mentre bucles, fer mentre bucles.

187
00:07:48,140 --> 00:07:49,980
>> Aquest és una mica diferent.

188
00:07:49,980 --> 00:07:53,120
PHP tenia la per a cada construcció
que podria estar fent servir

189
00:07:53,120 --> 00:07:55,320
o utilitzarà en el conjunt de processadors 7, potser.

190
00:07:55,320 --> 00:07:59,460
JavaScript té aquesta versió especial de
per on vostè diu, literalment, una cosa

191
00:07:59,460 --> 00:08:03,864
com per clau variable d'objecte, que
És una manera molt succinta de dir,

192
00:08:03,864 --> 00:08:06,780
si tinc una objeto-- i anem a
parlar d'aquests al seu torn en un moment--

193
00:08:06,780 --> 00:08:10,370
i vull iterar sobre tots
dels parells de claus de valor a l'interior,

194
00:08:10,370 --> 00:08:13,620
Jo no he de trobar la manera de
índex numèricament amb zero, un,

195
00:08:13,620 --> 00:08:14,580
dos, tres.

196
00:08:14,580 --> 00:08:15,900
>> Literalment, el que puc dir això.

197
00:08:15,900 --> 00:08:20,740
I en cada iteració, JavaScript
em vaig a actualitzar la clau variable

198
00:08:20,740 --> 00:08:24,810
ser la primera clau, a continuació, la següent tecla,
llavors la següent clau, llavors la següent tecla,

199
00:08:24,810 --> 00:08:25,510
i així successivament.

200
00:08:25,510 --> 00:08:30,000
I puc arribar al seu valor mitjançant el tractament
un objecte en JavaScript, com veurem,

201
00:08:30,000 --> 00:08:32,584
com si es tracta d'un
matriu associativa en PHP.

202
00:08:32,584 --> 00:08:35,750
De fet, si finalment embolicat el seu
importa al voltant del que és una matriu associativa

203
00:08:35,750 --> 00:08:40,140
en PHP, es pot pensar en això per ara com
idèntica a un objecte en JavaScript.

204
00:08:40,140 --> 00:08:42,030
Però això és una mica de
una simplificació excessiva.

205
00:08:42,030 --> 00:08:47,230
>> Les matrius es veuen, prou bé, idèntica
a PHP a excepció d'un caràcter.

206
00:08:47,230 --> 00:08:51,425
Hi ha una cosa que falta aquí
que vam veure la setmana passada amb PHP.

207
00:08:51,425 --> 00:08:52,050
El que s'omet?

208
00:08:52,050 --> 00:08:53,310
Sí?

209
00:08:53,310 --> 00:08:54,090
Cap signe de dòlar.

210
00:08:54,090 --> 00:08:56,240
Així que estem de tornada a un
més món normal, on

211
00:08:56,240 --> 00:08:58,050
variables que no tenen signes de dòlar.

212
00:08:58,050 --> 00:09:00,810
Però ho fa prefix ells
amb var, en general.

213
00:09:00,810 --> 00:09:02,230
I var significa variable.

214
00:09:02,230 --> 00:09:06,440
I igual que PHP és vagament
typed-- qual hi ha tipus,

215
00:09:06,440 --> 00:09:10,120
hi ha números i cadenes
i carrosses, etc. forth--

216
00:09:10,120 --> 00:09:11,570
JavaScript de manera similar té tipus.

217
00:09:11,570 --> 00:09:15,470
Però està vagament escrit en què el
els programadors no han de especificar-los.

218
00:09:15,470 --> 00:09:18,980
Només hem de ser conscients
que hi ha diferents tipus.

219
00:09:18,980 --> 00:09:21,690
>> Variables, meanwhile-- aquí és com
podríem declarar "hola, món"

220
00:09:21,690 --> 00:09:22,230
com una cadena.

221
00:09:22,230 --> 00:09:24,890
Observi que és idèntica a
PHP però cap signe de dòlar.

222
00:09:24,890 --> 00:09:27,120
I això és una cosa que va a
començar a veure més avui,

223
00:09:27,120 --> 00:09:30,990
pel qual vostè té un objecte
amb claus i valors.

224
00:09:30,990 --> 00:09:32,990
I si vols provar
inferir d'última week--

225
00:09:32,990 --> 00:09:34,730
la sintaxi és una mica diferent.

226
00:09:34,730 --> 00:09:39,740
Però una mica de seny check-- quants
tecles fa aquest objecte sembla tenir?

227
00:09:39,740 --> 00:09:40,850
Així que veig 4.

228
00:09:40,850 --> 00:09:43,560
Veig dos.

229
00:09:43,560 --> 00:09:44,680
>> Pel que és en realitat dues.

230
00:09:44,680 --> 00:09:47,260
Així que aquesta és una col·lecció
de dos parells clau-valor.

231
00:09:47,260 --> 00:09:49,820
La clau és símbol el valor és FB.

232
00:09:49,820 --> 00:09:52,620
La clau és el preu el valor és 101.53.

233
00:09:52,620 --> 00:09:54,230
Així que aquests són dos parells clau-valor.

234
00:09:54,230 --> 00:09:58,120
I recorda, PHP-- i això és nou
només una mena de diferència sintàctica.

235
00:09:58,120 --> 00:10:00,170
No és tot el que
intel·lectualment interessant.

236
00:10:00,170 --> 00:10:04,610
PHP podria haver escrit aquest mateix
cosa com cita follows--, és igual.

237
00:10:04,610 --> 00:10:06,730
I puc canviar aquests per claudàtors.

238
00:10:06,730 --> 00:10:11,240
I llavors puc canviar això a
una paraula citat, "preu".

239
00:10:11,240 --> 00:10:12,500
I llavors jo no ús dos punts.

240
00:10:12,500 --> 00:10:15,060
Què és el que faig servir la setmana passada?

241
00:10:15,060 --> 00:10:18,290
Sí, el signe igual
fletxa notació funky.

242
00:10:18,290 --> 00:10:21,470
>> I després vaig fer el mateix aquí.

243
00:10:21,470 --> 00:10:23,580
El mateix aquí.

244
00:10:23,580 --> 00:10:24,240
I això és tot.

245
00:10:24,240 --> 00:10:27,752
Així que és molt bé si això no té
realment enfonsat en la memòria només

246
00:10:27,752 --> 00:10:29,960
però, perquè és realment
intel·lectualment interessant.

247
00:10:29,960 --> 00:10:31,660
És simplement diferències sintàctiques.

248
00:10:31,660 --> 00:10:33,230
Però les idees són exactament els mateixos.

249
00:10:33,230 --> 00:10:35,910
Dins d'aquesta variable
cita en JavaScript

250
00:10:35,910 --> 00:10:39,020
és un conjunt de parells clau-valor,
un dels quals és símbol, un dels quals

251
00:10:39,020 --> 00:10:39,690
és el preu.

252
00:10:39,690 --> 00:10:42,340
I puc arribar a aquests valors
amb la següent sintaxi.

253
00:10:42,340 --> 00:10:46,280
Igual que en PHP, pel que vaig poder
fer alguna cosa com-- deixar

254
00:10:46,280 --> 00:10:48,590
Em faig aquesta caixa una mica més gran.

255
00:10:48,590 --> 00:10:52,750
Igual que en PHP, pel que vaig poder
fer esto-- oh, maleïda sigui.

256
00:10:52,750 --> 00:10:53,250
Vine.

257
00:10:53,250 --> 00:10:56,350

258
00:10:56,350 --> 00:11:00,800
>> Igual que en PHP-- OK, anem a
només ha d'utilitzar les notes del presentador.

259
00:11:00,800 --> 00:11:06,010
Igual que en PHP, pel que pugui
fer $ cita ["símbol"] cotització $,

260
00:11:06,010 --> 00:11:08,860
i això em
el valor de "símbol".

261
00:11:08,860 --> 00:11:12,800
En JavaScript, que serà
idèntics, pel que jo només puc fer això.

262
00:11:12,800 --> 00:11:14,850
L'única cosa que és
falta és el signe de dòlar.

263
00:11:14,850 --> 00:11:17,470
>> Així que molt bé prou, llavors, no hi ha
no tant la sintaxi nova.

264
00:11:17,470 --> 00:11:21,025
Així que el que avui ens centrem en, en realitat, és
algunes de les idees i de les aplicacions.

265
00:11:21,025 --> 00:11:22,900
I la primera tals
aplicació que vostè pot ser

266
00:11:22,900 --> 00:11:26,090
haver vist si es va capbussar en pset
07:00 ja és aquesta sintaxi.

267
00:11:26,090 --> 00:11:28,980
Així que en conjunt de processadors 7, si tens
vist o no vist encara,

268
00:11:28,980 --> 00:11:33,570
saben que hi ha un arxiu que li donem
vas cridar config.json-- JavaScript

269
00:11:33,570 --> 00:11:34,661
Objecte de notació.

270
00:11:34,661 --> 00:11:35,160
Per què?

271
00:11:35,160 --> 00:11:39,540
Volíem ser capaços d'oferir
una plantilla amb alguns parells clau-valor.

272
00:11:39,540 --> 00:11:44,290
Volíem ser capaços de donar-li una llista
de l'hoste, el nom del servidor.

273
00:11:44,290 --> 00:11:46,710
Volíem donar-li una
marcador de posició per al nom d'usuari

274
00:11:46,710 --> 00:11:48,210
i un marcador de posició per a la contrasenya.

275
00:11:48,210 --> 00:11:49,410
Si vostè no està veient
això, però, no es preocupi.

276
00:11:49,410 --> 00:11:51,340
Més sobre això en conjunt de processadors de set
[? spec. ?] I llavors,

277
00:11:51,340 --> 00:11:53,173
Òbviament, volem que
omplir el les tasques pendents

278
00:11:53,173 --> 00:11:55,310
perquè quan vostè registra a
CS50 IDE, cada un de vosaltres

279
00:11:55,310 --> 00:11:57,630
tenir el seu propi nom d'usuari i contrasenya.

280
00:11:57,630 --> 00:12:00,910
>> Així que podríem haver fet servir una mitja dotzena
o formats d'arxiu més diferents.

281
00:12:00,910 --> 00:12:02,940
Podíem haver utilitzat un arxiu .txt.

282
00:12:02,940 --> 00:12:04,570
Podríem utilitzat un arxiu CSV.

283
00:12:04,570 --> 00:12:06,745
Podríem haver fet servir un
Arxiu INI, un arxiu XML,

284
00:12:06,745 --> 00:12:09,370
un munt més sigles que
és possible que no hagi sentit a parlar mai.

285
00:12:09,370 --> 00:12:11,244
És una mica arbitrària
al final del dia.

286
00:12:11,244 --> 00:12:16,030
Però molt popular en aquests dies és un text
format anomenat JSON-- JavaScript Object

287
00:12:16,030 --> 00:12:18,460
Notation-- que s'assembla a això.

288
00:12:18,460 --> 00:12:20,890
És una mica críptic,
notar els patrons.

289
00:12:20,890 --> 00:12:24,180
Es comença amb un arrissat oberta
cotilla, i acabes amb el mateix.

290
00:12:24,180 --> 00:12:26,550
Dins d'això és alguna cosa.

291
00:12:26,550 --> 00:12:27,920
És un parell clau-valor.

292
00:12:27,920 --> 00:12:30,580
Així que aquest és un objecte que estic
mirant a la pantalla aquí

293
00:12:30,580 --> 00:12:33,690
que té una clau, que té un valor.

294
00:12:33,690 --> 00:12:37,610
I just inferir sobre la base de la
patró anterior, quin és la clau aquí?

295
00:12:37,610 --> 00:12:39,790
Base de dades, el que cal
l'esquerra del còlon.

296
00:12:39,790 --> 00:12:43,500
>> Ara, el valor passa a ser
a múltiples línies d'aquesta vegada.

297
00:12:43,500 --> 00:12:46,760
Però el valor comença amb un arrissat
preparar-se i acaba amb una clau.

298
00:12:46,760 --> 00:12:49,480
Llavors, què proposaria vostè és el
tipus del valor de base de dades?

299
00:12:49,480 --> 00:12:52,160

300
00:12:52,160 --> 00:12:54,670
Un diccionari o, simplement més
succintament, un objecte.

301
00:12:54,670 --> 00:12:55,170
Oi?

302
00:12:55,170 --> 00:13:00,010
Aquesta és una espècie d'estructura de dades que
pot utilitzar altres estructures dins de si mateix.

303
00:13:00,010 --> 00:13:02,750
Així que si tot això estem
trucar a un objeto-- i un objecte

304
00:13:02,750 --> 00:13:07,101
és només un munt de clau-valor pairs-- la
valor de la pròpia base de dades és un objecte.

305
00:13:07,101 --> 00:13:10,350
El valor de la base de dades té un munt
de parells de valors clau, el primer dels quals

306
00:13:10,350 --> 00:13:13,130
és amfitrió, a continuació, el nom, llavors
nom d'usuari, contrasenya i després,

307
00:13:13,130 --> 00:13:17,550
cada un dels valors, per la seva banda, és
només una cadena avorrida entre cometes dobles.

308
00:13:17,550 --> 00:13:19,770
>> Així que fins i tot si això no és
súper clara encara,

309
00:13:19,770 --> 00:13:22,740
sabem que això és només una
norma manera, força avorrida

310
00:13:22,740 --> 00:13:25,190
d'emmagatzemar dades en un format estàndard.

311
00:13:25,190 --> 00:13:27,700
Però els problemes més comuns que
podria fer, fins i tot en pset 7,

312
00:13:27,700 --> 00:13:32,120
són petites coses estúpides, com si
ometre accidentalment la coma allà.

313
00:13:32,120 --> 00:13:34,900
Això va resultar en l'arxiu
no necessàriament sent llegible.

314
00:13:34,900 --> 00:13:38,191
Si omet accidentalment coses com la
cotitzacions, no serà fàcil de llegir.

315
00:13:38,191 --> 00:13:41,654
Així que és un format d'arxiu molt primmirada,
però és un que és molt comú.

316
00:13:41,654 --> 00:13:44,820
I ens toca a utilitzar-lo, tot i que
no utilitza cap JavaScript altra manera,

317
00:13:44,820 --> 00:13:46,330
en pset 07:00.

318
00:13:46,330 --> 00:13:46,860
>> Tot bé.

319
00:13:46,860 --> 00:13:48,110
Així que recordi aquesta imatge.

320
00:13:48,110 --> 00:13:51,657
Parlem, en HTML, que
el codi podria tenir aquest aspecte.

321
00:13:51,657 --> 00:13:54,740
Aquest és el HyperText Markup Language
[Inaudible] per tot just "hola, món".

322
00:13:54,740 --> 00:13:57,570
Però llavors ens vam proposar un
temps enrere que si ajuda,

323
00:13:57,570 --> 00:14:00,210
és possible que vulgueu començar a pensar
sobre això ja com un arbre.

324
00:14:00,210 --> 00:14:03,730
De fet, la indentació que
utilitzar només pel bé de la llegibilitat

325
00:14:03,730 --> 00:14:05,610
o per causa del seu estil
l'esquerra tipus llauna de

326
00:14:05,610 --> 00:14:10,040
traduir-se en aquest arbre, on
tenir algun node arrel especial que anem a

327
00:14:10,040 --> 00:14:16,860
genèricament denominat document, sota de la qual
és l'element HTML arrel o etiqueta, HTML,

328
00:14:16,860 --> 00:14:19,980
que després té dos
els nens, el cap i el cos.

329
00:14:19,980 --> 00:14:21,750
>> I després, al seu torn, el cap té un títol.

330
00:14:21,750 --> 00:14:23,440
I el títol té un valor de text.

331
00:14:23,440 --> 00:14:26,130
I el cos té igualment un valor de text.

332
00:14:26,130 --> 00:14:29,220
Així que si estàs còmode dient
això sí, vostè podria prendre aquest codi HTML

333
00:14:29,220 --> 00:14:32,080
i fer un dibuix com
això, el costat dret

334
00:14:32,080 --> 00:14:35,910
és un model mental agradable perquè ara
que tenim JavaScript, una programació

335
00:14:35,910 --> 00:14:39,960
llenguatge que els navegadors poden
executar i interpretar per a vostè,

336
00:14:39,960 --> 00:14:42,690
resulta que el
estem a punt de fer-ho al codi

337
00:14:42,690 --> 00:14:45,320
és començar a manipular aquesta
estructura d'arbre en la memòria.

338
00:14:45,320 --> 00:14:47,070
No tenim per construir
l'arbre en memòria.

339
00:14:47,070 --> 00:14:49,880
No hem de fer una mena de
estructura de dades i cinc d'estil pset

340
00:14:49,880 --> 00:14:50,650
complexitat.

341
00:14:50,650 --> 00:14:54,610
El navegador, molt bé prou, al
interpretar superior HTML a baix,

342
00:14:54,610 --> 00:14:58,600
esquerra o dreta, és, literalment, va
nosaltres lliurar l'equivalent d'un punter

343
00:14:58,600 --> 00:15:00,840
a tot aquell arbre de forma gratuïta.

344
00:15:00,840 --> 00:15:02,150
Ho fa tot el treball dur.

345
00:15:02,150 --> 00:15:05,520
Això és el que Mozilla i Apple
i altres han fet per nosaltres.

346
00:15:05,520 --> 00:15:09,400
>> I amb JavaScript anem a
ser capaç de controlar i canviar i fer

347
00:15:09,400 --> 00:15:12,910
coses interessants a
aquest arbre, altrament coneguda

348
00:15:12,910 --> 00:15:15,880
com DOM o Document Object Model.

349
00:15:15,880 --> 00:15:17,110
Quin tipus de coses?

350
00:15:17,110 --> 00:15:19,030
Bé, resulta que
en JavaScript, no hi ha

351
00:15:19,030 --> 00:15:22,800
aquesta llarga llista de
esdeveniments que poden tenir lloc.

352
00:15:22,800 --> 00:15:26,330
I no hem fet servir realment tan
paraula des de la setmana zero i pset

353
00:15:26,330 --> 00:15:28,240
zero quan parlàvem de Scratch.

354
00:15:28,240 --> 00:15:31,390
La majoria de vostès probablement no van utilitzar
un esdeveniment en el seu projecte de Scratch.

355
00:15:31,390 --> 00:15:33,850
Però es pot recordar
el simple Marco Polo

356
00:15:33,850 --> 00:15:36,760
exemple, on teníem dos
sprites, un d'ells va dir, Marc.

357
00:15:36,760 --> 00:15:40,180
L'altre dels que després, en escoltar
i escoltant aquest esdeveniment, va dir Polo.

358
00:15:40,180 --> 00:15:42,080
Si no és així, no dubti en
mirar cap enrere que cap enrere.

359
00:15:42,080 --> 00:15:44,450
>> Però això és només per
dir, i vostè pot classe de

360
00:15:44,450 --> 00:15:47,730
inferir a partir dels noms d'aquests
coses, JavaScript, resulta que,

361
00:15:47,730 --> 00:15:53,200
ens va a donar una forma d'escoltar
per al ratolí que va avall o el ratolí pujant

362
00:15:53,200 --> 00:15:57,920
o anar tecla de sota o la tecla
pujar o onselect onsubmit

363
00:15:57,920 --> 00:15:59,740
o onresizing alguna cosa.

364
00:15:59,740 --> 00:16:03,060
En altres paraules, qualsevol acció física
que un ésser humà pot prendre amb un navegador

365
00:16:03,060 --> 00:16:08,210
el que fan tots els dies, pot escriure
codi perquè l'escolta dels esdeveniments

366
00:16:08,210 --> 00:16:10,220
i després fa alguna cosa apropiat.

367
00:16:10,220 --> 00:16:14,130
>> Per exemple, si utilitza Google Maps,
¿Què passa si es fa clic i es mouen

368
00:16:14,130 --> 00:16:16,250
el ratolí, en general?

369
00:16:16,250 --> 00:16:17,758
Si fa clic i arrossega?

370
00:16:17,758 --> 00:16:18,258
Sí?

371
00:16:18,258 --> 00:16:21,701

372
00:16:21,701 --> 00:16:22,200
Exactament.

373
00:16:22,200 --> 00:16:23,159
El mapa comença a moure.

374
00:16:23,159 --> 00:16:25,616
Així que vostè pot espècie de veure el que hi ha
aquí, el que és d'allà.

375
00:16:25,616 --> 00:16:27,130
I com Google implementar això?

376
00:16:27,130 --> 00:16:29,421
Bé, presumiblement, són
usant un parell d'aquests esdeveniments

377
00:16:29,421 --> 00:16:31,720
oients, un que
diu, escolti el ratolí

378
00:16:31,720 --> 00:16:35,410
down-- així que quan l'usuari físicament
empeny la seva trackpad o el ratolí

379
00:16:35,410 --> 00:16:36,010
cap avall.

380
00:16:36,010 --> 00:16:38,350
I després estem buscant
cosa així com el moviment

381
00:16:38,350 --> 00:16:41,145
o algun altre esdeveniment que
ens permet capturar arrossegament.

382
00:16:41,145 --> 00:16:45,910
I de fet, d'arrossegament és similar en aquest
dot dot dot llista de possibles opcions.

383
00:16:45,910 --> 00:16:49,140
>> Així que això va a ser un poderós
manera de començar a respondre a l'usuari

384
00:16:49,140 --> 00:16:52,824
fins i tot abans que ell o ella realment fa clic
alguna cosa explícita com presentar.

385
00:16:52,824 --> 00:16:55,240
Però anem a introduir
un parell de temes per arribar-hi.

386
00:16:55,240 --> 00:16:58,570
Però primer, anem a la transició
fins a cert codi real.

387
00:16:58,570 --> 00:17:01,450
Així que em vaig a anar
per davant i obrir dg-0,

388
00:17:01,450 --> 00:17:05,869
que és un exemple molt senzill
aquí que si el zoom en simplement

389
00:17:05,869 --> 00:17:08,500
té aquesta entrada aquí per a mi.

390
00:17:08,500 --> 00:17:12,410
I jo seguiré endavant i escriure
"David" al meu nom i feu clic a Envia.

391
00:17:12,410 --> 00:17:17,940
>> I llavors, encara que espècie de baix preu, em
tenir aquest símbol que apareix que diu:

392
00:17:17,940 --> 00:17:19,244
"hola, David!"

393
00:17:19,244 --> 00:17:21,740
Així que això és una mena de
com el nostre "hola, món"

394
00:17:21,740 --> 00:17:25,150
que vam fer fa un temps enrere en C i
fins i tot en PHP perquè he dinàmicament

395
00:17:25,150 --> 00:17:26,310
emesa el meu nom.

396
00:17:26,310 --> 00:17:28,230
Jo puc fer el nom d'algú més aquí.

397
00:17:28,230 --> 00:17:31,240
Jo podria simplement canviar això,
com, Hannah, feu clic a Envia.

398
00:17:31,240 --> 00:17:33,780
I, en efecte, els petits canvis emergents.

399
00:17:33,780 --> 00:17:36,650
>> Ara, els elements emergents són un dels
majoria de les característiques d'abús del web.

400
00:17:36,650 --> 00:17:38,520
I, de fet, de tornada a
els bloquejadors de finestres emergents dia

401
00:17:38,520 --> 00:17:40,820
es va posar de moda, ja que
aniria a algun website--

402
00:17:40,820 --> 00:17:43,604
potser un lloc-- qüestionable
que de sobte

403
00:17:43,604 --> 00:17:46,020
iniciar esquitxant la pantalla
amb un munt de finestres emergents.

404
00:17:46,020 --> 00:17:49,700
I així aquesta habilitat perquè aparegui
finestres al davant de l'usuari

405
00:17:49,700 --> 00:17:52,372
no ha estat especialment
ben rebut per la humanitat.

406
00:17:52,372 --> 00:17:54,080
Així que per això es veu
aquest prevenir cosa,

407
00:17:54,080 --> 00:17:55,706
que només fa tota aquesta cosa lletja.

408
00:17:55,706 --> 00:17:57,996
Així que anem a necessitar un
millor manera de demanar a l'usuari.

409
00:17:57,996 --> 00:17:59,350
Però per ara, que sembla funcionar.

410
00:17:59,350 --> 00:18:03,320
Així que només intuïtivament, el que
sembla estar succeint aquí?

411
00:18:03,320 --> 00:18:07,870
Segueixo endavant i feu clic a Enviar, i
llavors alguna cosa està succeint, amb claredat.

412
00:18:07,870 --> 00:18:12,870
Però el que no està succeint que va succeir
la setmana passada qualsevol moment vaig fer clic a Enviar?

413
00:18:12,870 --> 00:18:15,940
El que no va passar a la pantalla?

414
00:18:15,940 --> 00:18:17,170
Ho sentim?

415
00:18:17,170 --> 00:18:18,010
Actualitza.

416
00:18:18,010 --> 00:18:19,720
La URL no va canviar en absolut.

417
00:18:19,720 --> 00:18:22,250
Li vaig dir que això era dg-0,
i encara estic a dg-0.

418
00:18:22,250 --> 00:18:26,890
Normalment, ens tornaríem a aconseguir canviem a un altre
URL, com register.php o similars.

419
00:18:26,890 --> 00:18:29,560
>> Però fins i tot quan jo descarto
ho fent clic a D'acord,

420
00:18:29,560 --> 00:18:32,310
compte que la URL
queda completament lloc.

421
00:18:32,310 --> 00:18:35,350
I, de fet, si estic una mica
escèptic, deixa obro Chrome.

422
00:18:35,350 --> 00:18:36,860
Permetin-me obro la fitxa Xarxa.

423
00:18:36,860 --> 00:18:38,360
I noti que és en blanc en el moment.

424
00:18:38,360 --> 00:18:40,700
Déjame anar endavant i tornar a enviar Maria.

425
00:18:40,700 --> 00:18:42,810
No hi ha trànsit de xarxa que sigui.

426
00:18:42,810 --> 00:18:44,320
Així que no hi HTTP.

427
00:18:44,320 --> 00:18:47,620
>> Així que de fet, si em veig en el codi font
per esto-- permetin-me tancar aquesta finestra

428
00:18:47,620 --> 00:18:49,480
i anar a la vista d'origen.

429
00:18:49,480 --> 00:18:50,400
Interessant.

430
00:18:50,400 --> 00:18:53,520
Sembla que hi ha una mica de
noves etiquetes, entre ells guió.

431
00:18:53,520 --> 00:18:57,490
Així que anem a fer una ullada dins CS50
IDE exactament el que envia a l'usuari.

432
00:18:57,490 --> 00:19:00,690
>> Així que aquí anem a és--
centrar-se només en el codi HTML.

433
00:19:00,690 --> 00:19:03,500
Aquí està la meitat inferior de dom-0.html.

434
00:19:03,500 --> 00:19:07,830
I es va adonar que té un títol,
una etiqueta de cap, un cos de l'etiqueta, una etiqueta de formulari.

435
00:19:07,830 --> 00:19:11,257
Però el que salta a vostè com
diferent, especialment si vostè mai ha

436
00:19:11,257 --> 00:19:12,590
escrit cap JavaScript tu mateix.

437
00:19:12,590 --> 00:19:14,920
Permetin-me desplaço una mica
a la dreta aquí.

438
00:19:14,920 --> 00:19:18,330
Tinc una entrada,
una altra entrada per enviar.

439
00:19:18,330 --> 00:19:21,410
Tinc una identificació, que és una espècie de nou.

440
00:19:21,410 --> 00:19:22,790
Però ens van fer veure això amb CSS.

441
00:19:22,790 --> 00:19:24,480
Quina altra cosa és, sens dubte de nou?

442
00:19:24,480 --> 00:19:24,980
Sí?

443
00:19:24,980 --> 00:19:30,580

444
00:19:30,580 --> 00:19:32,140
Niça.

445
00:19:32,140 --> 00:19:32,760
>> Tot bé.

446
00:19:32,760 --> 00:19:35,630
Així que on diu onsubmit,
compte del que sembla seguir.

447
00:19:35,630 --> 00:19:38,740
Aquest és un atribut
en la nomenclatura HTML.

448
00:19:38,740 --> 00:19:40,944
El seu valor és aquesta cadena citat aquí.

449
00:19:40,944 --> 00:19:42,860
I això es veu una mica
estrany a primera vista.

450
00:19:42,860 --> 00:19:44,050
No és HTML.

451
00:19:44,050 --> 00:19:45,240
No és CSS.

452
00:19:45,240 --> 00:19:47,580
Es tracta, com pot imaginar, JavaScript.

453
00:19:47,580 --> 00:19:51,850
Així que sembla que construeix en aquest
pàgina web és una funció anomenada salutació.

454
00:19:51,850 --> 00:19:54,250
I estic inferint que acaba
perquè és una paraula, saludar-lo.

455
00:19:54,250 --> 00:19:55,880
Té una parin oberta,
prop parin, punt i coma.

456
00:19:55,880 --> 00:19:58,095
Sembla una funció C,
s'assembla a una funció de PHP.

457
00:19:58,095 --> 00:20:00,370
>> I, en efecte, que va
ser una funció JavaScript.

458
00:20:00,370 --> 00:20:01,440
Llavors torno falsa.

459
00:20:01,440 --> 00:20:03,440
Tornarem a
que, en un moment.

460
00:20:03,440 --> 00:20:05,320
Però on es defineix aquesta funció?

461
00:20:05,320 --> 00:20:07,950
Doncs m'ho dius a mi desplaçar-se cap amunt
a la part superior de l'arxiu.

462
00:20:07,950 --> 00:20:11,710
I tot i que es tracta d'una línia llarga,
És relativament senzill.

463
00:20:11,710 --> 00:20:15,000
Permetin-me Allunyar aquí i
centrar-se en aquestes quatre línies.

464
00:20:15,000 --> 00:20:17,137
>> Així que en JavaScript, just
com PHP, només

465
00:20:17,137 --> 00:20:19,720
diguem, literalment, la paraula "funció"
el nom de la funció,

466
00:20:19,720 --> 00:20:22,700
i després parèntesi amb qualsevol
arguments-- cap argument en aquest cas.

467
00:20:22,700 --> 00:20:25,290
I no hi ha tipus de retorn
en JavaScript, igual que PHP.

468
00:20:25,290 --> 00:20:29,470
Així que és una mica més fluix que C.
Claudàtor obert, prop de claudàtor.

469
00:20:29,470 --> 00:20:33,270
Construït en JavaScript és un function--
no és un function-- recomanat

470
00:20:33,270 --> 00:20:35,730
però una funció anomenada d'alerta
l'únic propòsit en la vida

471
00:20:35,730 --> 00:20:38,620
és per tirar aquest bastant lleig
missatge que vam veure fa un moment.

472
00:20:38,620 --> 00:20:40,950
>> Ara bé, això és una espècie d'un mos.

473
00:20:40,950 --> 00:20:42,560
Què està passant aquí?

474
00:20:42,560 --> 00:20:45,840
Així que anem a començar a
ressaltar tot aquí.

475
00:20:45,840 --> 00:20:48,540
Aquest és el mateix argument per alertar.

476
00:20:48,540 --> 00:20:49,530
I el que està passant?

477
00:20:49,530 --> 00:20:51,200
Això només es veu com una cadena.

478
00:20:51,200 --> 00:20:59,180
I resulta que, a diferència de PHP i diferència
C, no importa en JavaScript

479
00:20:59,180 --> 00:21:01,090
si vostè cometes simples o dobles.

480
00:21:01,090 --> 00:21:02,060
Seran equivalent.

481
00:21:02,060 --> 00:21:03,769
I, francament, és només
popular en aquests dies

482
00:21:03,769 --> 00:21:06,726
per als programadors de JavaScript per sempre
utilitzar cometes simples per alguna raó.

483
00:21:06,726 --> 00:21:07,840
És només el que cal fer.

484
00:21:07,840 --> 00:21:09,710
Però podríem utilitzar cometes dobles, també.

485
00:21:09,710 --> 00:21:11,540
>> Així que a més és un nou personatge.

486
00:21:11,540 --> 00:21:14,512
Però aquells de vostès que han fet
això abans, ¿què vol dir més?

487
00:21:14,512 --> 00:21:16,440
Sí.

488
00:21:16,440 --> 00:21:17,120
Concatenar.

489
00:21:17,120 --> 00:21:18,570
Així ho vam veure en PHP.

490
00:21:18,570 --> 00:21:20,315
No és només el punt
operador en PHP que

491
00:21:20,315 --> 00:21:22,000
es concatenar dues cadenes juntes.

492
00:21:22,000 --> 00:21:24,000
C era un dolor al coll per fer això.

493
00:21:24,000 --> 00:21:27,310
Recordeu del conjunt de processadors de sis, que era
un dolor especial al coll,

494
00:21:27,310 --> 00:21:29,470
vostè hauria de fer servir
alguna cosa així com strcat

495
00:21:29,470 --> 00:21:31,660
després de l'assignació de memòria
a la pila o el munt.

496
00:21:31,660 --> 00:21:34,243
Calia passar per la pedra
només per concatenar dues cadenes.

497
00:21:34,243 --> 00:21:36,040
En JavaScript, és super simple.

498
00:21:36,040 --> 00:21:38,030
Només has d'utilitzar l'operador més entre ells.

499
00:21:38,030 --> 00:21:41,420
>> Així que el complex d'aspecte
cosa sembla ser la següent

500
00:21:41,420 --> 00:21:43,490
perquè al final de
tota aquesta cadena, només

501
00:21:43,490 --> 00:21:45,797
concatenar en un signe d'exclamació.

502
00:21:45,797 --> 00:21:48,380
Així que si el que estava apareixent ser
"hola, David", "hola, Hannah,"

503
00:21:48,380 --> 00:21:52,740
"hola, Maria," i així successivament, amb claredat
cosa que hi ha entre els dos

504
00:21:52,740 --> 00:21:55,215
avantatges m'han de donar accés a què?

505
00:21:55,215 --> 00:21:58,855

506
00:21:58,855 --> 00:22:01,991
Què hi ha allà amb seguretat?

507
00:22:01,991 --> 00:22:02,490
Sí.

508
00:22:02,490 --> 00:22:05,090
Així que vaig a fer veure que aquí la
respondre al seu nom, oi?

509
00:22:05,090 --> 00:22:10,380
Així que el seu nom va aparèixer a la final
resultat. Llavors, què vol dir això?

510
00:22:10,380 --> 00:22:15,080
Bé, he proposat anteriorment en què
imatge que la crida de manera que l'DOM

511
00:22:15,080 --> 00:22:18,580
té aquest element arrel especial
camí fins a la part superior anomenat document.

512
00:22:18,580 --> 00:22:21,660
I ara, resulta que això va
ser una variable global especial

513
00:22:21,660 --> 00:22:25,250
en JavaScript, integrat en que és una
tota munt de funcionalitats útils.

514
00:22:25,250 --> 00:22:31,770
Entre la funcionalitat útil és la
capacitat per arribar a qualsevol node descendent.

515
00:22:31,770 --> 00:22:37,760
Aquests quadrats o rectangles o el·lipses
són només els nodes d'un arbre, per així dir-ho.

516
00:22:37,760 --> 00:22:41,850
>> Així resulta que construeix en
Objecte de document de JavaScript

517
00:22:41,850 --> 00:22:47,300
és una funció, també coneguda com una
mètode, que crida getElementById.

518
00:22:47,300 --> 00:22:50,410
La sintaxi per cridar
una funció en JavaScript

519
00:22:50,410 --> 00:22:55,220
que està dins d'un objecte o una
variable és simplement amb la notació punt.

520
00:22:55,220 --> 00:22:57,950
I vam veure això en C
el que la sintaxi struct.

521
00:22:57,950 --> 00:23:03,530
Això es veu en el conjunt de processadors 07:00, classe de,
més o menys, quan veus CS50 :: consulta.

522
00:23:03,530 --> 00:23:08,070
Els dos punts de còlon en PHP és un altre
forma de cridar a una funció que és

523
00:23:08,070 --> 00:23:09,260
dins d'algun objecte.

524
00:23:09,260 --> 00:23:11,960
>> Però per ara en JavaScript,
és només un punt.

525
00:23:11,960 --> 00:23:14,170
I així aquesta funció,
prou bé, tipus de

526
00:23:14,170 --> 00:23:16,810
diu el que does-- obtenir elements per ID.

527
00:23:16,810 --> 00:23:20,280
Un element és només un altre nom
per a una etiqueta o node al DOM.

528
00:23:20,280 --> 00:23:26,900
I a fi d'obtenir elements per ID "nom"
significa això- aquí està la meva HTML.

529
00:23:26,900 --> 00:23:31,910
I en base a aquest codi HTML, el que
node o el etiqueta HTML sóc jo

530
00:23:31,910 --> 00:23:35,097
va ser mitjançant programació mà
trucant a document.getElementById?

531
00:23:35,097 --> 00:23:37,650

532
00:23:37,650 --> 00:23:38,500
>> Sí, exactament.

533
00:23:38,500 --> 00:23:42,670
Vaig a aconseguir l'entrada
element existeix el ID és "nom".

534
00:23:42,670 --> 00:23:45,140
Així específicament, pot
pensar en aquesta funció,

535
00:23:45,140 --> 00:23:49,560
getElementById, com una manera de donar
una còpia d'un punter a aquest node específica

536
00:23:49,560 --> 00:23:50,060
en l'arbre.

537
00:23:50,060 --> 00:23:51,980
No hem elaborat aquest
arbre, però és una manera

538
00:23:51,980 --> 00:23:54,900
d'aconseguir l'accés a aquesta
rectangle o aquest rectangle

539
00:23:54,900 --> 00:23:58,090
mitjançant la identificació única que a través del seu ID.

540
00:23:58,090 --> 00:23:59,760
>> Ara, per què és útil?

541
00:23:59,760 --> 00:24:01,510
Bé, resulta que
que una vegada que hagi rebut

542
00:24:01,510 --> 00:24:07,220
aquest node, aquest rectangle de la
imatge, aquest node dins d'ella,

543
00:24:07,220 --> 00:24:10,660
al seu torn, té un munt de
parells clau-valor properties--

544
00:24:10,660 --> 00:24:13,480
o dades, un dels quals es diu valor.

545
00:24:13,480 --> 00:24:16,500
Així que, literalment, és una mena de
mos per explicar tot l'assumpte.

546
00:24:16,500 --> 00:24:19,370
Però al final del dia,
tot això fa és donar-li

547
00:24:19,370 --> 00:24:23,070
una cadena que l'usuari va escriure en
d'aquesta manera jeràrquica.

548
00:24:23,070 --> 00:24:24,820
Però no m'agrada una
parell d'aquestes coses.

549
00:24:24,820 --> 00:24:27,590
O més aviat, hi ha una mica de curiositat encara.

550
00:24:27,590 --> 00:24:28,870
Tot això semblava funcionar.

551
00:24:28,870 --> 00:24:33,420
Per què creus que vaig tornar
falsa després de cridar a saludar?

552
00:24:33,420 --> 00:24:35,910
Això sembla una mica lleig, que
Tinc dues declaracions no

553
00:24:35,910 --> 00:24:38,730
separats per punt i coma.

554
00:24:38,730 --> 00:24:39,310
Prengui una conjectura.

555
00:24:39,310 --> 00:24:44,390
Si em treu return false, el que
que podria succeir, simplement per instint?

556
00:24:44,390 --> 00:24:46,990

557
00:24:46,990 --> 00:24:49,460
Ho sentim, dir de nou?

558
00:24:49,460 --> 00:24:50,530
>> Obriu un munt de de Windows.

559
00:24:50,530 --> 00:24:52,780
Així que potser una mica potencialment
igual que succeiria.

560
00:24:52,780 --> 00:24:54,422
Què més?

561
00:24:54,422 --> 00:24:55,630
Podria presentar una sol·licitud per on?

562
00:24:55,630 --> 00:24:59,109

563
00:24:59,109 --> 00:25:00,510
A la mateixa pàgina.

564
00:25:00,510 --> 00:25:03,110
Així que, de fet, això és tot
com més a prop resposta aquí,

565
00:25:03,110 --> 00:25:05,890
tot i que, a diferència
en el passat, no tinc

566
00:25:05,890 --> 00:25:09,300
especifica l'atribut d'acció,
que normalment hem de fer.

567
00:25:09,300 --> 00:25:11,780
Resulta que hi ha un defecte.
Si no s'especifica l'acció,

568
00:25:11,780 --> 00:25:15,370
és com dir cita, cap de la cita
o el nom de l'arxiu en si,

569
00:25:15,370 --> 00:25:17,850
que en aquest cas seria
ser com diu-0.html.

570
00:25:17,850 --> 00:25:20,420
És només una mica d'inferir,
o més aviat implícita.

571
00:25:20,420 --> 00:25:22,420
>> I pel que si no faig això, notem.

572
00:25:22,420 --> 00:25:23,230
Vaig a salvar això.

573
00:25:23,230 --> 00:25:25,270
I m'he tret de retorn fals.

574
00:25:25,270 --> 00:25:27,759
Permetin-me tornar a aquesta
exemple i la força torni a carregar.

575
00:25:27,759 --> 00:25:30,800
I és possible que hagi vist jo suggereixo
això en CS50 Discutiu un munt de vegades.

576
00:25:30,800 --> 00:25:34,560
Si hi ha alguna cosa que està sempre actuant funky i el
navegador no es comporta com s'espera,

577
00:25:34,560 --> 00:25:37,410
moltes vegades vostè voldrà mantenir
Maj i feu clic a Actualitza.

578
00:25:37,410 --> 00:25:41,480
Això obligarà a cada arxiu per recarregar
i no utilitzar cau local del seu navegador

579
00:25:41,480 --> 00:25:47,032
o una còpia de manera que ara, deixa anar endavant i
obrir el meu inspector, a la fitxa Xarxa.

580
00:25:47,032 --> 00:25:48,740
Vaig a fer clic
Preservar Iniciar perquè

581
00:25:48,740 --> 00:25:51,660
no ho volen per esborrar les files
Una vegada que aconsegueixi portat lluny en un altre lloc.

582
00:25:51,660 --> 00:25:54,650
>> Déjame anar per davant aquí i
Tipus d'Andi, feu clic a Envia.

583
00:25:54,650 --> 00:25:55,150
Tot bé.

584
00:25:55,150 --> 00:25:56,480
Això sembla com s'esperava.

585
00:25:56,480 --> 00:25:57,440
Diu "hola, Andi."

586
00:25:57,440 --> 00:25:59,420
Permetin-me feu clic a D'acord.

587
00:25:59,420 --> 00:26:00,610
Interessant.

588
00:26:00,610 --> 00:26:05,100
Observi que la pàgina ha canviat,
encara que en la pàgina original.

589
00:26:05,100 --> 00:26:06,770
Observi el tipus de canvi d'URL.

590
00:26:06,770 --> 00:26:09,430
Va afegir un signe d'interrogació,
que sol ser un indicador

591
00:26:09,430 --> 00:26:11,260
que tractem de presentar alguna cosa.

592
00:26:11,260 --> 00:26:13,570
I a continuació, a la part inferior,
encara més explícita,

593
00:26:13,570 --> 00:26:17,570
aquí hi ha la sol·licitud HTTP actual,
que va obtenir una resposta de 200 que

594
00:26:17,570 --> 00:26:18,490
em va portar de tornada aquí.

595
00:26:18,490 --> 00:26:20,250
>> Així que això no ho és
que volem fer, no?

596
00:26:20,250 --> 00:26:22,166
Perquè jo no vull
recarregar tota la pàgina.

597
00:26:22,166 --> 00:26:24,970
Jo en canvi volia tornar
falsa per tal de curtcircuit

598
00:26:24,970 --> 00:26:28,840
el comportament predeterminat del navegador, que
era, per descomptat, a presentar la pàgina.

599
00:26:28,840 --> 00:26:31,700
>> Així que donem una ullada a una
marginalment millor exemple.

600
00:26:31,700 --> 00:26:33,920
Aquesta és la versió 1 dom.

601
00:26:33,920 --> 00:26:36,680
I noti el següent.

602
00:26:36,680 --> 00:26:39,150
Està bé si no ho assimilo
totes les línies de codi.

603
00:26:39,150 --> 00:26:41,750
Però el que és fonamentalment diferent
sobre aquesta aplicació?

604
00:26:41,750 --> 00:26:44,690
Vaig a estipulo que comporta la
mateixa, fa el mateix.

605
00:26:44,690 --> 00:26:49,320

606
00:26:49,320 --> 00:26:51,570
Què he òbviament fet diferent?

607
00:26:51,570 --> 00:26:52,266
Sí?

608
00:26:52,266 --> 00:26:53,182
>> AUDIÈNCIA: [inaudible].

609
00:26:53,182 --> 00:27:03,421

610
00:27:03,421 --> 00:27:04,170
DAVID Malan: Sí.

611
00:27:04,170 --> 00:27:08,620
Així que la funció es defineix differently--
En altres paraules, absents de la forma,

612
00:27:08,620 --> 00:27:13,180
allà dalt, en línia o 7--
més aviat, la línia més llarga 8-- cap

613
00:27:13,180 --> 00:27:15,070
tinc l'atribut onsubmit.

614
00:27:15,070 --> 00:27:16,750
En l'exemple anterior, vaig tenir això.

615
00:27:16,750 --> 00:27:18,530
I després, literalment, vaig escriure el meu codi aquí.

616
00:27:18,530 --> 00:27:20,210
I llavors em vaig dir return false.

617
00:27:20,210 --> 00:27:22,180
I si no es fregui
que el camí equivocat, però,

618
00:27:22,180 --> 00:27:26,140
ha de començar a la mesura
ja que, igual que en HTML,

619
00:27:26,140 --> 00:27:29,530
quan vam començar a co-barregen el
amb CSS en els atributs d'estil,

620
00:27:29,530 --> 00:27:32,890
que acaba de començar a ser una mica
desordenat o sentir una mica malament.

621
00:27:32,890 --> 00:27:35,020
>> De la mateixa manera aquí, si
de començar a prendre el HTML,

622
00:27:35,020 --> 00:27:37,419
i després de forma automàtica
plop una mica de codi JavaScript

623
00:27:37,419 --> 00:27:40,460
al mig d'una cadena entre cometes, és
no serà molt fàcil de mantenir.

624
00:27:40,460 --> 00:27:40,630
Oi?

625
00:27:40,630 --> 00:27:43,690
Ni tan sols és evident a primera
lloc on el codi JavaScript és.

626
00:27:43,690 --> 00:27:46,590
Així que seria molt agradable ja
un principi de millor disseny,

627
00:27:46,590 --> 00:27:50,500
anem a mantenir la nostra HTML complet
separar de la nostra JavaScript.

628
00:27:50,500 --> 00:27:53,150
>> Així que per fer això, el que hem
fet aquí és la following--

629
00:27:53,150 --> 00:27:56,790
simplement fem servir HTML només marcat.

630
00:27:56,790 --> 00:28:00,730
I així, en versió d'un això, tot
El que tinc és un formulari amb un identificador únic.

631
00:28:00,730 --> 00:28:04,630
I després aquí, estic aprofitant
d'una característica especial de JavaScript

632
00:28:04,630 --> 00:28:08,480
pel que puc tenir el que hi ha
crida una funció anònima.

633
00:28:08,480 --> 00:28:14,150
Així que resulta que si jo dic
document.getElementById de 'demostració'

634
00:28:14,150 --> 00:28:18,890
això és com donar-me un punter a
aquest node en el meu arbre, l'element de formulari,

635
00:28:18,890 --> 00:28:20,100
per dir-ho així.

636
00:28:20,100 --> 00:28:22,220
>> Ara, només sé de
sabent una mica d'HTML

637
00:28:22,220 --> 00:28:26,330
ara que estem d'haver llegit algunes en línia
de referència, que un element de formulari compatible

638
00:28:26,330 --> 00:28:29,950
un munt d'esdeveniments en listeners--
És a dir, la llarga llista d'esdeveniments

639
00:28:29,950 --> 00:28:31,700
oients que vam veure fa un moment.

640
00:28:31,700 --> 00:28:35,950
Sé que de la lectura de la documentació
que onsubmit és un esdeveniment vàlid

641
00:28:35,950 --> 00:28:38,520
escolta per a un element de formulari.

642
00:28:38,520 --> 00:28:41,480
>> Així que una vegada que sé que,
que és segur per a mi fer

643
00:28:41,480 --> 00:28:45,390
el following-- aconseguir aquest node
des de l'arbre, l'element de formulari,

644
00:28:45,390 --> 00:28:48,070
i l'accés la trucada de la seva
propietat onsubmit.

645
00:28:48,070 --> 00:28:49,880
Així que el punt només significa
aquesta és una propietat,

646
00:28:49,880 --> 00:28:52,180
com un valor especial dins d'ella.

647
00:28:52,180 --> 00:28:55,590
I quin tipus de dades sóc jo
assignar, segons sembla,

648
00:28:55,590 --> 00:28:58,900
a onsubmit, que és
efectivament una variable dins

649
00:28:58,900 --> 00:29:01,010
d'aquest node en l'arbre?

650
00:29:01,010 --> 00:29:04,100
És un camp a l'interior d'aquesta estructura.

651
00:29:04,100 --> 00:29:05,810
Quin és el tipus de dades?

652
00:29:05,810 --> 00:29:07,030
>> Una funció, si.

653
00:29:07,030 --> 00:29:08,607
Així resulta que PHP tingui.

654
00:29:08,607 --> 00:29:10,440
I tot i que
no li dirà sobre això,

655
00:29:10,440 --> 00:29:16,240
C també té punters de funció, els
capacitat de passar i assignar funcions

656
00:29:16,240 --> 00:29:18,330
com a propis els valors de les variables.

657
00:29:18,330 --> 00:29:20,280
I no anem
a retrocedir de nou a C.

658
00:29:20,280 --> 00:29:23,250
Però per ara, resulta que
en el costat dret aquí,

659
00:29:23,250 --> 00:29:26,260
tot i que es veu una mica
covard, aquest mitjà, hey navegador,

660
00:29:26,260 --> 00:29:27,550
dóna'm una funció.

661
00:29:27,550 --> 00:29:30,560
Jo no em vaig a molestar fins i tot donant
un nom perquè estic literalment

662
00:29:30,560 --> 00:29:34,450
va assignar diguem
la direcció d'aquesta funció

663
00:29:34,450 --> 00:29:35,994
immediatament al onsubmit.

664
00:29:35,994 --> 00:29:39,160
En altres paraules, navegador, no cal
saber el que aquesta funció es diu.

665
00:29:39,160 --> 00:29:41,890
Vostè només necessita saber
on està en memòria.

666
00:29:41,890 --> 00:29:44,210
I així és suficient només per
tenir un signe igual no

667
00:29:44,210 --> 00:29:48,240
i no molestar-se a nomenar aquest, igual que
foo o saludar o qualsevol altra paraula.

668
00:29:48,240 --> 00:29:50,150
I ara això és només una cosa d'estil.

669
00:29:50,150 --> 00:29:53,100
Podia moure aquest claudàtor
en ell-- línia al costat sorry--

670
00:29:53,100 --> 00:29:54,750
com solem fer CS50.

671
00:29:54,750 --> 00:29:57,550
Però en JavaScript, és
realitat estilísticament comuna

672
00:29:57,550 --> 00:30:00,450
només per mantenir la clau de la
primer, en aquesta primera línia.

673
00:30:00,450 --> 00:30:02,620
>> Però d'ara endavant, no hi ha
res interessant.

674
00:30:02,620 --> 00:30:05,830
Aquesta clau d'obertura just
demarca l'inici de la meva funció.

675
00:30:05,830 --> 00:30:09,320
La funció és ara
idèntica, excepte que he

676
00:30:09,320 --> 00:30:11,452
inclòs el fals retorn
dins d'aquesta funció.

677
00:30:11,452 --> 00:30:13,160
Perquè resulta fora--
i només ho faria

678
00:30:13,160 --> 00:30:14,980
saber això de la lectura
el documentation--

679
00:30:14,980 --> 00:30:19,740
que si la funció que s'assigna
al controlador de onsubmit retorna false,

680
00:30:19,740 --> 00:30:23,420
el browser coneix i està d'acord
no per enviar el formulari a un servidor.

681
00:30:23,420 --> 00:30:27,210
Si retorna vertader, presentarà
a un servidor per raons que veurem

682
00:30:27,210 --> 00:30:28,700
són útils en un moment.

683
00:30:28,700 --> 00:30:31,000
>> I a continuació, el punt i coma després
la clau d'allí només

684
00:30:31,000 --> 00:30:32,541
vol dir que he finalitzat la configuració de la funció.

685
00:30:32,541 --> 00:30:36,600
Vostè sap com dir-tan aviat
com se sent una presentació.

686
00:30:36,600 --> 00:30:37,100
Tot bé.

687
00:30:37,100 --> 00:30:40,650
Això segueix sent sens dubte una mica lleig.

688
00:30:40,650 --> 00:30:42,190
Llavors, què més podem fer?

689
00:30:42,190 --> 00:30:45,000
>> Bé, resulta que després en
la versió 2, que és el last--

690
00:30:45,000 --> 00:30:46,780
i només haurem de fer una ullada a això.

691
00:30:46,780 --> 00:30:49,850
A risc de fer
el més lleig, resulta

692
00:30:49,850 --> 00:30:52,160
que hi ha una biblioteca a
el món diu jQuery.

693
00:30:52,160 --> 00:30:54,900
I jQuery és un super
Biblioteca Popular JavaScript

694
00:30:54,900 --> 00:30:57,930
això és tan popular que la majoria
qualsevol JavaScript-- no és

695
00:30:57,930 --> 00:31:00,540
estrany que la gent confongui
jQuery amb JavaScript.

696
00:31:00,540 --> 00:31:01,070
Per què?

697
00:31:01,070 --> 00:31:04,990
Sí JavaScript té molt
maneres de fer les coses-- detallats

698
00:31:04,990 --> 00:31:07,820
document.getElementById, dadadadadada.

699
00:31:07,820 --> 00:31:10,510
S'acaba per tenir molt
llargues línies de codi.

700
00:31:10,510 --> 00:31:15,550
>> Així que un tipus anomenat John Resid,
que en realitat treballa per a una startup

701
00:31:15,550 --> 00:31:18,630
fins a aquests dies, va sortir
amb aquesta biblioteca anys

702
00:31:18,630 --> 00:31:22,070
fa que moltes persones han contribuït
a crida jQuery que canvia

703
00:31:22,070 --> 00:31:23,449
la sintaxi de la següent manera.

704
00:31:23,449 --> 00:31:25,740
I perquè ho has vist això,
Com que vostè sempre

705
00:31:25,740 --> 00:31:28,140
veure això si fent un
projecte final basat en la web,

706
00:31:28,140 --> 00:31:33,270
aquesta seria la forma equivalent de
l'aplicació d'aquesta mateixa funció utilitzant

707
00:31:33,270 --> 00:31:34,630
aquesta biblioteca especial.

708
00:31:34,630 --> 00:31:36,680
>> Ara, en lloc de presa de pèl
el distingeixen en la seva totalitat,

709
00:31:36,680 --> 00:31:38,520
anem a mirar alguns patrons.

710
00:31:38,520 --> 00:31:44,850
Aquesta sintaxi sembla tenir
quantes funcions anònimes

711
00:31:44,850 --> 00:31:49,584
o funcions sense nom
o funcions lambda AKA?

712
00:31:49,584 --> 00:31:50,190
Dos, oi?

713
00:31:50,190 --> 00:31:52,690
I saps que, encara que
vostè no és súper còmoda amb això,

714
00:31:52,690 --> 00:31:55,780
simplement pel fet que es
diu la funció () dues vegades.

715
00:31:55,780 --> 00:31:58,172
>> I resulta que
el que aquest codi és doing--

716
00:31:58,172 --> 00:32:01,255
i ens referirem a les referències en línia,
en última instància, una mica d'ajuda amb això.

717
00:32:01,255 --> 00:32:04,480
Això només vol dir que quan
el document està llest,

718
00:32:04,480 --> 00:32:07,490
seguir endavant i registrar-
la funció següent

719
00:32:07,490 --> 00:32:12,064
com el controlador de presentar per al HTML
element la única idea és demostració.

720
00:32:12,064 --> 00:32:14,480
I després, quan això succeeix,
trucar a aquestes dues línies de codi.

721
00:32:14,480 --> 00:32:18,677
I això és, tràgicament, una més
forma prolixa de dir return false.

722
00:32:18,677 --> 00:32:21,510
I vaig esmentar això només perquè
veuràs codi com aquest en línia.

723
00:32:21,510 --> 00:32:23,140
I no és res per ser intimidat per.

724
00:32:23,140 --> 00:32:26,057
Sinó més aviat, tingueu en compte que el que està
va ser comú en JavaScript

725
00:32:26,057 --> 00:32:26,765
és aquest paradigma.

726
00:32:26,765 --> 00:32:29,510
I per això vam mostrar tot per ara.

727
00:32:29,510 --> 00:32:30,010
Tot bé.

728
00:32:30,010 --> 00:32:32,730
Així que sense aturar-se gaire
tant en què la sintaxi,

729
00:32:32,730 --> 00:32:37,800
es hi ha alguna pregunta sobre
aquests exemples o idees fins al moment?

730
00:32:37,800 --> 00:32:38,300
Tot bé.

731
00:32:38,300 --> 00:32:40,220
Així que anem a usar això per a alguna cosa útil.

732
00:32:40,220 --> 00:32:47,070
Fer una pàgina web que només diu hola,
això i allò altre no és tan interessant,

733
00:32:47,070 --> 00:32:47,830
no underwhelm.

734
00:32:47,830 --> 00:32:51,038
Aquest no serà bonic,
però es va a fer alguna cosa útil.

735
00:32:51,038 --> 00:32:56,350
Déjame tornar al meu directori
aquí i obrir, per exemple, la forma-0.html.

736
00:32:56,350 --> 00:32:59,320
>> Així que suposo que aquest és el primer any
pàgina de registre esports intramurs

737
00:32:59,320 --> 00:33:01,780
sense cap tipus CSS o qualsevol sentit del disseny.

738
00:33:01,780 --> 00:33:05,404
I vull seguir endavant i
registrar-se aquí amb una contrasenya.

739
00:33:05,404 --> 00:33:08,320
I vaig a estar d'acord amb els termes
i les condicions i feu clic a Registre.

740
00:33:08,320 --> 00:33:11,700
I ara el lloc web diu: "Tu ets
registrada! (Bé, no realment.) "

741
00:33:11,700 --> 00:33:15,070
Això sembla que va funcionar, però
m'ho dius a mi anar per davant i la força de recàrrega.

742
00:33:15,070 --> 00:33:18,720
>> I deixin-me dir-los, no, no ho fa
necessiten la meva adreça de correu electrònic real.

743
00:33:18,720 --> 00:33:21,820
O potser només haurem de diem electrònic en aquest país.

744
00:33:21,820 --> 00:33:25,080
Clau de ser, com, 12.345.

745
00:33:25,080 --> 00:33:28,810
I llavors, només perquè sóc
un idiota, ara és el 123.456.789.

746
00:33:28,810 --> 00:33:31,150
I jo no vaig a comprovar la seva caixa.

747
00:33:31,150 --> 00:33:31,850
>> Hmm.

748
00:33:31,850 --> 00:33:32,350
Tot bé.

749
00:33:32,350 --> 00:33:34,920
Així que hi ha diverses oportunitats
per a la millora aquí.

750
00:33:34,920 --> 00:33:39,070
I vostè sap, o es veurà en pset
07:00, que es pot escriure code--

751
00:33:39,070 --> 00:33:41,890
i vostè ha d'escriure
codi en PHP-- defensar

752
00:33:41,890 --> 00:33:45,780
contra aquest tipus d'usuari
errors perquè l'usuari clarament

753
00:33:45,780 --> 00:33:46,790
no ha cooperat.

754
00:33:46,790 --> 00:33:49,680
I ell o ella no li ha donat tota la
Valors que volies o fins i tot en el format

755
00:33:49,680 --> 00:33:50,630
que volies.

756
00:33:50,630 --> 00:33:53,250
Pel que vostè veu en pset set del
sens dubte podríem tenir alguna

757
00:33:53,250 --> 00:33:55,680
si les condicions el que diuen
si l'adreça de correu electrònic

758
00:33:55,680 --> 00:33:59,450
no és un username@something.edu,
podríem simplement

759
00:33:59,450 --> 00:34:02,575
demanar perdó i demanar disculpes a l'usuari
tant, que es pot estar en pset 07:00.

760
00:34:02,575 --> 00:34:05,700
O si no han comprovat que la caixa,
Resulta que en PHP, es pot detectar que,

761
00:34:05,700 --> 00:34:06,200
també.

762
00:34:06,200 --> 00:34:09,389
I, certament, si les contrasenyes
no coincideixen com a register.php

763
00:34:09,389 --> 00:34:11,521
per pset 7, es pot detectar que.

764
00:34:11,521 --> 00:34:13,770
Però això és un dolor al
coll que ara sol·liciten

765
00:34:13,770 --> 00:34:15,510
nosaltres anar tot el camí fins al servidor.

766
00:34:15,510 --> 00:34:17,053
L'usuari és informat de l'error.

767
00:34:17,053 --> 00:34:19,219
I almenys a menys que utilitzi
algunes tècniques més elegants,

768
00:34:19,219 --> 00:34:20,929
ara han de fer clic a la fletxa cap enrere.

769
00:34:20,929 --> 00:34:23,300
¿No seria agradable, com
una gran quantitat de llocs web d'avui en dia,

770
00:34:23,300 --> 00:34:26,190
si tinguessis més immediat
retroalimentació, a l'instant?

771
00:34:26,190 --> 00:34:31,389
>> En altres paraules, deixa anar a la versió
un, que hi haurà més bonica.

772
00:34:31,389 --> 00:34:33,469
Però té aquesta característica.

773
00:34:33,469 --> 00:34:39,590
Malan, 12345, 123456789, no
marcarà la casella, Registre.

774
00:34:39,590 --> 00:34:41,330
Les contrasenyes no coincideixen.

775
00:34:41,330 --> 00:34:44,459
Així que, encara que aquest pop-up és ugly--
podem reemplaçar aquest finalment

776
00:34:44,459 --> 00:34:47,000
amb alguna cosa com Som-hi,
que es veurà en conjunt de processadors de set

777
00:34:47,000 --> 00:34:50,239
és un library-- molt popular que vaig fer
detecten que les contrasenyes no coincideixen.

778
00:34:50,239 --> 00:34:50,739
Tot bé.

779
00:34:50,739 --> 00:34:52,530
Bé, deixa arreglar això que l'usuari.

780
00:34:52,530 --> 00:34:55,460
Deixin-me seguir endavant i dir 12.345, 12.345.

781
00:34:55,460 --> 00:34:57,780
Encara no revisar l'acord.

782
00:34:57,780 --> 00:35:00,210
Vostè ha d'acceptar els
termes i condicions.

783
00:35:00,210 --> 00:35:01,760
Així que per què?

784
00:35:01,760 --> 00:35:04,100
>> Si ja hem plantegem
que hi ha una manera,

785
00:35:04,100 --> 00:35:07,260
i els hem requerit en
pset set a detectar l'error

786
00:35:07,260 --> 00:35:09,780
condicions com aquesta
del costat del servidor, per què hauria de fer-ho

787
00:35:09,780 --> 00:35:13,940
molestar també fer això en JavaScript?

788
00:35:13,940 --> 00:35:15,850
Què és un argument en
favor d'afegir el que

789
00:35:15,850 --> 00:35:18,760
estàs a punt de veure com some--
hi ha una complexitat addicional.

790
00:35:18,760 --> 00:35:23,610

791
00:35:23,610 --> 00:35:25,930
>> Potser no hi ha alça.

792
00:35:25,930 --> 00:35:26,924
Què podria ser?

793
00:35:26,924 --> 00:35:27,840
AUDIÈNCIA: [inaudible].

794
00:35:27,840 --> 00:35:31,132

795
00:35:31,132 --> 00:35:32,340
DAVID Malan: Oh, interessant.

796
00:35:32,340 --> 00:35:33,530
Gestes potencials.

797
00:35:33,530 --> 00:35:37,540
Tan segur, si vostè no està manejant
entrada de l'usuari errònia que gran,

798
00:35:37,540 --> 00:35:40,170
potser és millor si es
ni tan sols arribar al seu servidor.

799
00:35:40,170 --> 00:35:42,160
M'agradaria fer retrocedir allà i
per exemple, probablement hauria

800
00:35:42,160 --> 00:35:43,284
solucionar dos problemes.

801
00:35:43,284 --> 00:35:44,140
Però això és just.

802
00:35:44,140 --> 00:35:44,710
Què més?

803
00:35:44,710 --> 00:35:45,626
>> AUDIÈNCIA: [inaudible].

804
00:35:45,626 --> 00:35:47,970

805
00:35:47,970 --> 00:35:49,014
>> DAVID Malan: Sí.

806
00:35:49,014 --> 00:35:51,680
Aquest codi, com hem dit abans, és
interpretat en el costat del client.

807
00:35:51,680 --> 00:35:53,846
No es va molestar al servidor,
el que significa que no fa

808
00:35:53,846 --> 00:35:55,930
impacte de la càrrega o la capacitat del servidor.

809
00:35:55,930 --> 00:35:59,840
I ara, per poc em d'edat,
això no té efecte significatiu

810
00:35:59,840 --> 00:36:01,970
perquè tinc un usuari en aquest moment.

811
00:36:01,970 --> 00:36:04,010
>> Però si vostè és qualsevol
pàgina web de mida decent,

812
00:36:04,010 --> 00:36:07,400
especialment els més grans, com Facebook,
com més es pot mantenir a la gent fora

813
00:36:07,400 --> 00:36:09,927
del seu servidor el millor
perquè un servidor, per descomptat,

814
00:36:09,927 --> 00:36:12,510
només té una quantitat finita de memòria RAM,
un nombre finit de gigahertzs,

815
00:36:12,510 --> 00:36:16,340
un nombre finit de coses
que pot fer per unitat de temps.

816
00:36:16,340 --> 00:36:19,170
Així que si hi ha més persones en
el món colpejar al seu servidor,

817
00:36:19,170 --> 00:36:21,750
ingressar accidentalment
incorrectament, de la mateixa manera que si

818
00:36:21,750 --> 00:36:23,254
pot mantenir aquest pes de sobre seu servidor.

819
00:36:23,254 --> 00:36:25,420
A més, especialment en un mòbil
device-- Si alguna vegada

820
00:36:25,420 --> 00:36:29,190
iniciar sessió en my.harvard o
NetID de Yale o similar,

821
00:36:29,190 --> 00:36:32,330
hi ha aquesta la latència amb una gran quantitat d'
llocs web com això que es necessita,

822
00:36:32,330 --> 00:36:34,110
com, un maleït segon o dues vegades.

823
00:36:34,110 --> 00:36:37,979
I després, Déu meu, si vostè escriu malament,
llavors vostè ha de tornar el cop i refer-lo.

824
00:36:37,979 --> 00:36:40,520
Així que hi ha latència, especialment
en connexions de xarxa lentes.

825
00:36:40,520 --> 00:36:43,030
Però JavaScript, perquè
que s'executa en el client

826
00:36:43,030 --> 00:36:46,720
i no ha d'anar i venir
a través d'una internet potencialment lenta

827
00:36:46,720 --> 00:36:49,780
connexió, vostè pot aconseguir
retroalimentació gairebé instantània.

828
00:36:49,780 --> 00:36:50,760
>> Així que donem una ullada a això.

829
00:36:50,760 --> 00:36:54,280
Permetin-me obro forma-0 i
mirar el HTML aquí.

830
00:36:54,280 --> 00:36:56,040
I anem a veure el que està passant.

831
00:36:56,040 --> 00:36:59,460
Aquesta és una forma la
l'acció és register.php.

832
00:36:59,460 --> 00:37:01,530
Només estic fent servir aconseguir tan
que podia veure la URL.

833
00:37:01,530 --> 00:37:05,030
Però per a les contrasenyes, segurament voldríem
per canviar això per publicar a la realitat.

834
00:37:05,030 --> 00:37:06,910
Heus aquí un camp d'entrada de tipus text.

835
00:37:06,910 --> 00:37:09,050
Aquí hi ha una altra entrada
camp de tipus contrasenya.

836
00:37:09,050 --> 00:37:13,150
Aquí és, si vostè mai ha vist,
una entrada de casella tipus.

837
00:37:13,150 --> 00:37:15,250
>> Però no hi ha JavaScript
aquí en absolut.

838
00:37:15,250 --> 00:37:18,170
Això és només HTML que
va a register.php.

839
00:37:18,170 --> 00:37:21,020
Però en la versió un, en el qual
començat a obtenir els elements emergents,

840
00:37:21,020 --> 00:37:23,010
anem a veure el que realment passa aquí.

841
00:37:23,010 --> 00:37:26,757
En la versió un, el que
Vaig a veure- I

842
00:37:26,757 --> 00:37:29,340
Vaig pensar que podria estancar suficient
amb prou paraules, però se m'ha acabat.

843
00:37:29,340 --> 00:37:35,180

844
00:37:35,180 --> 00:37:38,590
>> En la versió un-- aquí anem.

845
00:37:38,590 --> 00:37:43,180
En la versió un, notar l'following--
i no és la millor aplicació,

846
00:37:43,180 --> 00:37:44,420
però és la meva primera.

847
00:37:44,420 --> 00:37:47,680
Cal notar que sota de la
forma, tinc una etiqueta de script.

848
00:37:47,680 --> 00:37:49,430
I una etiqueta de script significa,
bo, navegador, aquí

849
00:37:49,430 --> 00:37:52,340
ve una mica de codi a,
Típicament, JavaScript.

850
00:37:52,340 --> 00:37:54,420
I ara, noto el que estic fent.

851
00:37:54,420 --> 00:37:59,070
En line-- tot just puc
llegir it-- línia 32, que diu,

852
00:37:59,070 --> 00:38:01,420
var form-- així dóna'm
una variable anomenada formulari.

853
00:38:01,420 --> 00:38:05,049
I a continuació, obtenir document.getElementId
de "registre".

854
00:38:05,049 --> 00:38:05,590
Què és això?

855
00:38:05,590 --> 00:38:07,290
Bé, deixa rebobinar fins aquí.

856
00:38:07,290 --> 00:38:11,510
I fixeu-vos, ah, em vaig l'element de formulari
una idea arbitrària però descriptiu

857
00:38:11,510 --> 00:38:13,050
de registre.

858
00:38:13,050 --> 00:38:16,820
Així que això em dóna una variable que
em permet agafar aquest node,

859
00:38:16,820 --> 00:38:19,580
aquest rectangle en l'arbre anomenat formulari.

860
00:38:19,580 --> 00:38:24,460
mitjans form.onsubmit, hey navegador,
registrar un detector d'esdeveniments

861
00:38:24,460 --> 00:38:25,470
en aquest formulari.

862
00:38:25,470 --> 00:38:28,890
En altres paraules, quan aquesta forma és
presentat, executeu el següent codi.

863
00:38:28,890 --> 00:38:30,810
No necessita un nom, perquè
¿Per què necessita saber el nom?

864
00:38:30,810 --> 00:38:32,880
Vostè només necessita saber
el que per a executar, ergo

865
00:38:32,880 --> 00:38:35,610
és una funció anònima o lambda.

866
00:38:35,610 --> 00:38:37,632
I aquesta funció és
totes aquestes línies aquí.

867
00:38:37,632 --> 00:38:40,840
I ara, per ser honest, tot i que
podrien no haver escrit mai JavaScript

868
00:38:40,840 --> 00:38:44,200
abans, és només C i PHP lògica.

869
00:38:44,200 --> 00:38:51,720
Així que si form.email.value == "" -
així que si el camp de correu electrònica està en blanc,

870
00:38:51,720 --> 00:38:54,980
cridar l'usuari "Ha
proporcionar la seva adreça de correu electrònic ".

871
00:38:54,980 --> 00:38:58,980
Perquè si form.password.value
és el crit blanc a l'usuari,

872
00:38:58,980 --> 00:39:00,400
"Ha de proporcionar la contrasenya."

873
00:39:00,400 --> 00:39:04,240
>> Més interessant, lògicament,
si no ho fa form.password.value

874
00:39:04,240 --> 00:39:08,630
igual form.confirmation.value--
¿D'on va venir la confirmació ve?

875
00:39:08,630 --> 00:39:09,470
Permetin-me rebobinar.

876
00:39:09,470 --> 00:39:12,870
Bé, vaig trucar a aquest missatge
camp aquí la contrasenya.

877
00:39:12,870 --> 00:39:15,180
I vaig trucar a aquest d'aquí confirmació.

878
00:39:15,180 --> 00:39:17,850
Podria haver anomenat
contrasenya dues o qualsevol altra cosa.

879
00:39:17,850 --> 00:39:20,560
Estic lògicament comprovant
que aquests dos són el mateix.

880
00:39:20,560 --> 00:39:25,760
Else-- resulta que això és el Sr. Boole
nou-- una l'casella de verificació valor booleà ,.

881
00:39:25,760 --> 00:39:29,810
Així que si jo dic, exclamació point--
si no form.agreement.checked,

882
00:39:29,810 --> 00:39:31,820
cridar en l'usuari també.

883
00:39:31,820 --> 00:39:34,470
>> Així que aquesta sintaxi que veurà és
molt comú en JavaScript,

884
00:39:34,470 --> 00:39:35,970
on vostè té aquesta separada per punts.

885
00:39:35,970 --> 00:39:37,460
Es comença amb un objecte aquí.

886
00:39:37,460 --> 00:39:41,430
Vostè submergir més profundament a un a
una propietat com a contrasenya.

887
00:39:41,430 --> 00:39:43,280
I llavors vostè aconsegueix al seu valor real.

888
00:39:43,280 --> 00:39:45,830
I de nou, aquí hi ha l'entrada.

889
00:39:45,830 --> 00:39:47,310
Aquí està la clau nom.

890
00:39:47,310 --> 00:39:50,860
I el seu valor és el que el
humà ha teclejat en realitat.

891
00:39:50,860 --> 00:39:53,610
>> Així, en tots aquests
casos, jo vam tornar falsa.

892
00:39:53,610 --> 00:39:55,800
Però si no, torno cert.

893
00:39:55,800 --> 00:39:58,030
I el que ara veiem un
ús convincent de quan

894
00:39:58,030 --> 00:40:00,620
tornaries fals
Deixi de fer el que fa l'usuari de

895
00:40:00,620 --> 00:40:03,200
i fer que ell o ella triï
de nou o escrigui de nou.

896
00:40:03,200 --> 00:40:05,870
Altrament, tornem cert.

897
00:40:05,870 --> 00:40:08,585
>> I permetin-me presentar un sol
una altra variant d'aquest just

898
00:40:08,585 --> 00:40:13,140
per sembrar una certa comprensió de la mateixa.

899
00:40:13,140 --> 00:40:16,850
Bé, en la versió 2 de la present, la forma-2--
Ho faré amb un gest de la mà.

900
00:40:16,850 --> 00:40:19,920
Això és, per als curiosos,
la versió de jQuery,

901
00:40:19,920 --> 00:40:23,330
aquells de vostès que vulguin
incursionar en aquesta biblioteca particular.

902
00:40:23,330 --> 00:40:25,145
Però anem a start-- i qualsevol pregunta?

903
00:40:25,145 --> 00:40:29,230
Permetin-me aturar-me per moments a causa
això va ser ràpid i molt.

904
00:40:29,230 --> 00:40:32,610
>> Però el millor és que tot
del codi és més o menys el mateix.

905
00:40:32,610 --> 00:40:33,985
El nou material és el que és el Regne?

906
00:40:33,985 --> 00:40:35,115
Quins són aquests rectangles?

907
00:40:35,115 --> 00:40:35,990
Quins són aquests nodes?

908
00:40:35,990 --> 00:40:37,540
Què és una funció anònima?

909
00:40:37,540 --> 00:40:38,830
Què és un controlador d'esdeveniments?

910
00:40:38,830 --> 00:40:43,480
Però, per sort, la majoria de què és només
al punt de partida de, per exemple, la setmana zero.

911
00:40:43,480 --> 00:40:43,980
Tot bé.

912
00:40:43,980 --> 00:40:46,070
Així que alguna cosa una mica més interessant?

913
00:40:46,070 --> 00:40:49,340
Bé, primer que res, deixa anar
per davant i obrir Google Maps.

914
00:40:49,340 --> 00:40:53,360
I t'adonaràs que perquè un
moment, a la segona divisió,

915
00:40:53,360 --> 00:40:55,930
adonar-se del que passa quan
Faig clic prou ràpid.

916
00:40:55,930 --> 00:40:59,720
I aquesta connexió a Harvard és tan
ràpid que no t'adones que.

917
00:40:59,720 --> 00:41:04,469
Però, quin tipus d'espècie de veure
si faig clic i arrossego molt ràpid?

918
00:41:04,469 --> 00:41:07,010
Aquells de vostès veient en línia,
si vas més a poc a poc això a la velocitat de 0.5x,

919
00:41:07,010 --> 00:41:09,640
es pot veure això millor.

920
00:41:09,640 --> 00:41:13,550
>> Què estava passant just
abans vaig fer clic i arrossegar?

921
00:41:13,550 --> 00:41:15,900
Permetin-me tractar aquí-- m'ho dius a mi fer
una altra cosa, com 90210.

922
00:41:15,900 --> 00:41:17,550
Anem a anar molt lluny.

923
00:41:17,550 --> 00:41:19,000
Això va ser molt ràpid, massa.

924
00:41:19,000 --> 00:41:22,460
Què hi ha de Disney World?

925
00:41:22,460 --> 00:41:23,190
Som-hi.

926
00:41:23,190 --> 00:41:23,690
D'ACORD.

927
00:41:23,690 --> 00:41:26,030
Què vas veure per a una fracció de segon?

928
00:41:26,030 --> 00:41:27,200
Simplement, com, les places, oi?

929
00:41:27,200 --> 00:41:28,930
Els marcadors de posició per les rajoles?

930
00:41:28,930 --> 00:41:30,270
>> Bé, què està passant aquí?

931
00:41:30,270 --> 00:41:35,410
Google Maps és un bon exemple de
aquesta tecnologia que es diu AJAX.

932
00:41:35,410 --> 00:41:38,510
I aquí és on començarem a
utilitzar el codi JavaScript en un particular

933
00:41:38,510 --> 00:41:39,277
manera seductora.

934
00:41:39,277 --> 00:41:41,610
De tornada al dia, no hi havia
Aquest lloc web anomenat MapQuest.

935
00:41:41,610 --> 00:41:44,120
I jo hauria d'haver pres una
captura de pantalla d'això des de la dècada de 1990,

936
00:41:44,120 --> 00:41:45,820
on si volies
buscar aquí al mapa,

937
00:41:45,820 --> 00:41:48,590
vostè literalment, feu clic en una fletxa
a la part superior que va mostrar

938
00:41:48,590 --> 00:41:49,870
una plaça diferent del mapa.

939
00:41:49,870 --> 00:41:51,790
Si volies moure cap a l'esquerra, es
fet clic una fletxa que va mostrar

940
00:41:51,790 --> 00:41:53,210
una plaça diferent del mapa.

941
00:41:53,210 --> 00:41:54,840
I alguns llocs web segueixen fent això avui.

942
00:41:54,840 --> 00:41:57,820
Però fins i tot MapQuest ha aconseguit
millor, com Google Maps.

943
00:41:57,820 --> 00:42:01,880
>> En canvi, el que és millor això
dies és els llocs web que utilitzen AJAX.

944
00:42:01,880 --> 00:42:04,510
AJAX-- conegut com
Asynchronous JavaScript i XML,

945
00:42:04,510 --> 00:42:08,370
que és només una forma elegant de dir
una tecnologia o tècnica que

946
00:42:08,370 --> 00:42:14,200
permet un cercador emprant JavaScript
fer peticions HTTP addicionals

947
00:42:14,200 --> 00:42:16,390
després de la pàgina s'ha carregat.

948
00:42:16,390 --> 00:42:17,479
Llavors, què vol dir això?

949
00:42:17,479 --> 00:42:19,270
Bé, seria una espècie
molest a Gmail

950
00:42:19,270 --> 00:42:21,103
si cada vegada que volies
per comprovar el seu correu,

951
00:42:21,103 --> 00:42:24,940
haguessis colpejat literalment Control-R o
Comando-R o feu clic al botó Actualitza

952
00:42:24,940 --> 00:42:26,580
i tota la pàgina maleït seria recarregar.

953
00:42:26,580 --> 00:42:26,800
Oi?

954
00:42:26,800 --> 00:42:28,460
Seria parpellejarà blanc
probablement per segon.

955
00:42:28,460 --> 00:42:30,043
Veureu que la barra de progrés estúpid.

956
00:42:30,043 --> 00:42:33,170
I només per veure si vostè té nova
electrònic, tota la pàgina web i la URL

957
00:42:33,170 --> 00:42:34,580
vostè està en hauria de recarregar.

958
00:42:34,580 --> 00:42:35,960
>> Però això no és el que passa a Gmail.

959
00:42:35,960 --> 00:42:36,459
Oi?

960
00:42:36,459 --> 00:42:40,300
Quan arribi un nou correu electrònic a
Gmail, el que succeeix a la pantalla?

961
00:42:40,300 --> 00:42:41,480
Això demostra, oi?

962
00:42:41,480 --> 00:42:44,280
Només apareix per art de màgia
com una nova fila a la taula.

963
00:42:44,280 --> 00:42:47,030
Això implica en realitat una
quantitat decent de complexitat.

964
00:42:47,030 --> 00:42:51,892
De fet, si es pensa en aquest arbre,
que tot i que és molt simple aquí,

965
00:42:51,892 --> 00:42:54,100
Gmail-- i hauria de buscar
en el codi per ser sure--

966
00:42:54,100 --> 00:42:58,710
probablement té una taula HTML o potser
una llista desordenada que fa

967
00:42:58,710 --> 00:43:01,060
cadascun dels seus safates d'entrada missatges de correu electrònic com.

968
00:43:01,060 --> 00:43:04,050
>> I pel que si vostè s'imagina això cal
és un arbre en memòria quan estàs

969
00:43:04,050 --> 00:43:09,050
usant Gmail que es veu la classe de tipus de
així, quan es dóna compte de Google, ooh,

970
00:43:09,050 --> 00:43:12,770
Té un nou correu electrònic, no ho fa
volen reconstruir l'arbre sencer.

971
00:43:12,770 --> 00:43:16,430
Més aviat, vol trobar el node
l'arbre que representa la safata d'entrada

972
00:43:16,430 --> 00:43:18,580
i només cal inserir un nou node.

973
00:43:18,580 --> 00:43:24,640
>> Així que és molt similar al joc de paràmetres 05:00, on
haver de inserir nodes en una taula hash,

974
00:43:24,640 --> 00:43:28,410
de manera similar fa Google, a través de
Codi JavaScript que s'ha escrit,

975
00:43:28,410 --> 00:43:31,890
travessia aquest arbre, esbrinar on
és aquesta part la safata d'entrada de la finestra,

976
00:43:31,890 --> 00:43:33,440
i després inserir una nova fila.

977
00:43:33,440 --> 00:43:37,460
I una nova fila només significa un sol
o més nous nodes en un arbre.

978
00:43:37,460 --> 00:43:41,340
>> I així AJAX és aquesta tècnica
que permet exactament això.

979
00:43:41,340 --> 00:43:44,440
Una vegada que ha visitat un URL,
No obstant això boig el temps que és,

980
00:43:44,440 --> 00:43:46,472
i una vegada que la pàgina té
ha carregat, pot encara

981
00:43:46,472 --> 00:43:48,430
agafar més dades del
Internet-ja sigui

982
00:43:48,430 --> 00:43:52,460
un correu electrònic o una rajola d'un map--
agafar entre bastidors

983
00:43:52,460 --> 00:43:55,290
i després inserir-lo en la pàgina
per la qual cosa l'ésser humà en realitat no

984
00:43:55,290 --> 00:43:56,910
haver d'esperar per a això.

985
00:43:56,910 --> 00:43:58,980
>> Facebook Messenger funciona de la mateixa manera.

986
00:43:58,980 --> 00:44:01,562
Qualsevol nombre d'altres websites--
oh, en realitat, ni tan sols això.

987
00:44:01,562 --> 00:44:04,270
Vull dir, això és, francament, una mena de
un molest compten aquests dies.

988
00:44:04,270 --> 00:44:07,500
Si em poso a buscar cats-- aquest
és una espècie d'una experiència d'usuari horrible.

989
00:44:07,500 --> 00:44:08,990
Només cal començar a buscar per mi.

990
00:44:08,990 --> 00:44:10,050
Bé, què està fent?

991
00:44:10,050 --> 00:44:12,920
La URL no ha canviat
Des que vaig començar a escriure.

992
00:44:12,920 --> 00:44:17,330
Però el que està passant a través de la
wire-- bé, hmm interessant.

993
00:44:17,330 --> 00:44:20,470
Què està passant a tot el
filferro d'aquí només es posa més rar.

994
00:44:20,470 --> 00:44:21,090
>> D'ACORD.

995
00:44:21,090 --> 00:44:24,670
Així que permetin-me anar endavant i va inspeccionar
element i aneu a la fitxa Xarxa

996
00:44:24,670 --> 00:44:27,040
i tractar de fer d'aquest
tècnica i menys sobre els gats.

997
00:44:27,040 --> 00:44:32,595
Mentre escric, literalment, gats
i- el que està passant

998
00:44:32,595 --> 00:44:37,710
per-- No faré clic això.

999
00:44:37,710 --> 00:44:38,210
Tot bé.

1000
00:44:38,210 --> 00:44:44,280
Així que aquí, el que passa cada
vegada que escric un personatge, pel que es veu?

1001
00:44:44,280 --> 00:44:45,000
Igual que, baix nivell?

1002
00:44:45,000 --> 00:44:47,860
Què està passant amb cadascun dels
personatges que estic escrivint en el meu teclat?

1003
00:44:47,860 --> 00:44:48,359
Sí?

1004
00:44:48,359 --> 00:44:50,950
AUDIÈNCIA: [inaudible].

1005
00:44:50,950 --> 00:44:52,340
>> DAVID Malan: Exactament.

1006
00:44:52,340 --> 00:44:55,600
Cada un d'aquests personatges és
anar a Google, un a la vegada.

1007
00:44:55,600 --> 00:44:58,490
Estan construint una cadena
en el seu servidor que representa

1008
00:44:58,490 --> 00:44:59,936
tot el que he escrit en fins al moment.

1009
00:44:59,936 --> 00:45:01,810
I cada vegada que escrigui
un altre personatge, que

1010
00:45:01,810 --> 00:45:04,530
utilitzar la seva salsa secreta d'un
buscar algoritme i esbrinar,

1011
00:45:04,530 --> 00:45:07,370
Què vol dir aquesta pàgina gat
o aquesta pàgina gat o similar?

1012
00:45:07,370 --> 00:45:10,620
Així que, en cert sentit, em proporciona una
millor experiència en què jo no faig fins i tot

1013
00:45:10,620 --> 00:45:11,860
haurà de completar el meu pensament.

1014
00:45:11,860 --> 00:45:14,440
I, en efecte, és un útil
cosa, autocompletat en general.

1015
00:45:14,440 --> 00:45:17,690
Si els seus algoritmes són prou bons
i si les meves cerques són bastant òbvies,

1016
00:45:17,690 --> 00:45:19,300
Jo no he d'escriure la paraula sencera.

1017
00:45:19,300 --> 00:45:22,110
Van a dir-me el que
és que estic realment buscant.

1018
00:45:22,110 --> 00:45:25,940
Així que el que Google diu instantània
recerca s'acaba usant AJAX,

1019
00:45:25,940 --> 00:45:30,820
utilitzant el codi que els permet sol·licitar
contingut addicional a través d'un navegador web

1020
00:45:30,820 --> 00:45:34,026
darrere de les escenes que utilitzen aquest
nou idioma, JavaScript.

1021
00:45:34,026 --> 00:45:35,400
Així que tenim un parell de minuts per al final.

1022
00:45:35,400 --> 00:45:37,710
I m'ho dius a mi trucar al meu amic
Colton a l'escenari,

1023
00:45:37,710 --> 00:45:40,090
ja que semblava
especialment divertit última vegada

1024
00:45:40,090 --> 00:45:42,290
per introduir una tecnologia
que alguns de vostès

1025
00:45:42,290 --> 00:45:44,769
han expressat el seu interès
pels projectes finals.

1026
00:45:44,769 --> 00:45:47,310
Pensem que seria divertit per portar
un voluntari, però, avui dia

1027
00:45:47,310 --> 00:45:50,074
que li mostri una addició a
això que usted-- permet si,

1028
00:45:50,074 --> 00:45:50,990
Vaig veure per primera vegada aquesta mà.

1029
00:45:50,990 --> 00:45:52,900
Anem cap amunt.

1030
00:45:52,900 --> 00:45:53,560
Molt ben fet.

1031
00:45:53,560 --> 00:45:55,035
Bon treball.

1032
00:45:55,035 --> 00:45:57,410
Vaig a projectar això en
la pantalla en un moment.

1033
00:45:57,410 --> 00:45:58,150
Quin és el teu nom per a tothom?

1034
00:45:58,150 --> 00:45:59,180
>> EPT: Sóc Efa.

1035
00:45:59,180 --> 00:45:59,410
>> DAVID Malan: Etha?

1036
00:45:59,410 --> 00:45:59,785
>> EPT: Efa.

1037
00:45:59,785 --> 00:46:00,160
>> DAVID Malan: Efa?

1038
00:46:00,160 --> 00:46:00,730
>> EPT: Sí.

1039
00:46:00,730 --> 00:46:01,250
>> DAVID Malan: Encantat de veure't.

1040
00:46:01,250 --> 00:46:01,600
Tot bé.

1041
00:46:01,600 --> 00:46:02,590
A veure si aquesta llest.

1042
00:46:02,590 --> 00:46:04,423
Anem a la
mitjà amb Colton aquí.

1043
00:46:04,423 --> 00:46:07,050
Què Colton té a les mans
avui és un comandament a distància.

1044
00:46:07,050 --> 00:46:10,440
Així que en lloc de et quedis aquí parat en un
món tridimensional mirant al seu voltant

1045
00:46:10,440 --> 00:46:14,080
com ho va fer Colton, ara pot Efa
realment caminar pujant,

1046
00:46:14,080 --> 00:46:16,689
avall, esquerra i dreta com un
Comandament de Nintendo o Xbox.

1047
00:46:16,689 --> 00:46:18,230
EPT: Vaig a caure fora de l'escenari.

1048
00:46:18,230 --> 00:46:20,500
DAVID Malan: ho faré
romandre més o menys per aquí.

1049
00:46:20,500 --> 00:46:21,991
Però aquest és un risc.

1050
00:46:21,991 --> 00:46:22,490
D'ACORD.

1051
00:46:22,490 --> 00:46:25,690
Així que endavant i posar els de.

1052
00:46:25,690 --> 00:46:29,315
Déjame anar endavant i
canviar a la pantalla aquí.

1053
00:46:29,315 --> 00:46:30,670
Déjame apagar els llums.

1054
00:46:30,670 --> 00:46:32,780
I Colton, em va deixar
arribat estand del costat de vostè.

1055
00:46:32,780 --> 00:46:35,520
>> Vols explicar aquí
amb el micròfon el que estem fent?

1056
00:46:35,520 --> 00:46:36,380
Aquí tens.

1057
00:46:36,380 --> 00:46:37,280
>> COLTON: És clar.

1058
00:46:37,280 --> 00:46:39,980
Així que ara mateix estem
carregant el Oculus,

1059
00:46:39,980 --> 00:46:43,070
Suposo operating-- que no opera
sistema, però el programa principal, on

1060
00:46:43,070 --> 00:46:46,630
es pot accedir a tots els jocs i
aplicacions que es troben a la seva biblioteca.

1061
00:46:46,630 --> 00:46:50,060
Així que ara mateix, ha de dir
toqueu el panell tàctil per començar.

1062
00:46:50,060 --> 00:46:53,430
Touchpad serà en el
costat dret dels auriculars.

1063
00:46:53,430 --> 00:46:54,569
Així que endavant i tap--

1064
00:46:54,569 --> 00:46:55,110
EPT: Oh, home.

1065
00:46:55,110 --> 00:46:56,443
DAVID Malan: Sí, aquí el tens.

1066
00:46:56,443 --> 00:47:00,340

1067
00:47:00,340 --> 00:47:02,460
La qualitat Efa està veient
és molt més alta qualitat.

1068
00:47:02,460 --> 00:47:03,831
Això és només el Wi-Fi aquí.

1069
00:47:03,831 --> 00:47:05,580
COLTON: Llavors, què estàs
voldrà fer

1070
00:47:05,580 --> 00:47:08,350
és mirar cap a la part superior
dreta de la pantalla.

1071
00:47:08,350 --> 00:47:10,420
Sí, aquest joc a la part superior dreta.

1072
00:47:10,420 --> 00:47:14,780
I després, quan vostè està seleccionant
que, toqueu la pantalla tàctil de nou.

1073
00:47:14,780 --> 00:47:17,010
Crec que els seus Dreadhalls.

1074
00:47:17,010 --> 00:47:20,820
I llavors aquí està A-- aquí, i molt
jo sostinc seves ulleres per a vostè.

1075
00:47:20,820 --> 00:47:24,420

1076
00:47:24,420 --> 00:47:25,790
>> Així que només li vaig donar un controlador.

1077
00:47:25,790 --> 00:47:28,886
Així que ara ell pot controlar el joc.

1078
00:47:28,886 --> 00:47:30,510
Ell pot moure i coses per l'estil.

1079
00:47:30,510 --> 00:47:31,968
Així que endavant i mirar cap amunt fins al cim.

1080
00:47:31,968 --> 00:47:33,640
Hauria veure New Game.

1081
00:47:33,640 --> 00:47:36,310
Així que endavant i vostè pot fer això.

1082
00:47:36,310 --> 00:47:39,320
Ara, vostè hauria de ser capaç de controlar
a tu mateix amb el controlador,

1083
00:47:39,320 --> 00:47:43,860
així, tan aviat com sigui
el joc es carrega aquí.

1084
00:47:43,860 --> 00:47:46,356
Això podria ser una mica de por.

1085
00:47:46,356 --> 00:47:47,300
>> EPT: Ara vostè em diu.

1086
00:47:47,300 --> 00:47:50,132
D'ACORD.

1087
00:47:50,132 --> 00:47:51,080
>> COLTON: D'acord.

1088
00:47:51,080 --> 00:47:52,650
Així que confirmi que pot moure.

1089
00:47:52,650 --> 00:47:52,750
D'ACORD.

1090
00:47:52,750 --> 00:47:53,583
Pots moure't.

1091
00:47:53,583 --> 00:47:54,300
Perfecte.

1092
00:47:54,300 --> 00:47:56,470
Així que si es mira cap avall, tens un mapa.

1093
00:47:56,470 --> 00:47:58,170
Mapa que mostra on es troba.

1094
00:47:58,170 --> 00:47:59,720
Vostè pot mirar al voltant de l'habitació.

1095
00:47:59,720 --> 00:48:01,440
Vostè pot donar volta totalment voltant.

1096
00:48:01,440 --> 00:48:02,128
Sí, exactament.

1097
00:48:02,128 --> 00:48:02,627
Gira't.

1098
00:48:02,627 --> 00:48:05,370

1099
00:48:05,370 --> 00:48:07,125
>> Així que mira a la seva esquerra.

1100
00:48:07,125 --> 00:48:09,875
Crec que hi ha alguna cosa que es pot
recollir en un barril a l'habitació.

1101
00:48:09,875 --> 00:48:11,709
>> EPT: Com puc obtenir la
mapa del camí?

1102
00:48:11,709 --> 00:48:12,375
COLTON: Miri cap amunt.

1103
00:48:12,375 --> 00:48:12,980
Només cal mirar cap amunt.

1104
00:48:12,980 --> 00:48:13,480
Tot bé.

1105
00:48:13,480 --> 00:48:13,765
Cal anar.

1106
00:48:13,765 --> 00:48:15,181
Ara seguir endavant i simplement donar la volta.

1107
00:48:15,181 --> 00:48:21,460

1108
00:48:21,460 --> 00:48:24,620
Així que mira més cap a l'esquerra.

1109
00:48:24,620 --> 00:48:25,530
Per estar en moviment a l'esquerra.

1110
00:48:25,530 --> 00:48:26,960
Segueix buscant esquerre.

1111
00:48:26,960 --> 00:48:27,541
Segueix endavant.

1112
00:48:27,541 --> 00:48:28,040
Sí.

1113
00:48:28,040 --> 00:48:28,720
>> EPT: Oh, d'aquesta manera.

1114
00:48:28,720 --> 00:48:29,261
>> COLTON: Sí.

1115
00:48:29,261 --> 00:48:30,999
Camina cap a ella amb el controlador.

1116
00:48:30,999 --> 00:48:31,540
Cal anar.

1117
00:48:31,540 --> 00:48:32,790
Ara ha de dir recollir-lo.

1118
00:48:32,790 --> 00:48:33,360
Cal anar.

1119
00:48:33,360 --> 00:48:34,290
Agafa'l.

1120
00:48:34,290 --> 00:48:35,550
Tot bé.

1121
00:48:35,550 --> 00:48:38,286
Ara, anem a sortir d'aquesta habitació.

1122
00:48:38,286 --> 00:48:42,209
Vagi per davant i caminar a la porta.

1123
00:48:42,209 --> 00:48:45,000
Així que vas a hold-- diu
premeu el botó perquè la força oberta.

1124
00:48:45,000 --> 00:48:46,333
Així que endavant i manteniu premut el botó.

1125
00:48:46,333 --> 00:48:48,250
Sí, el que va obligar obrir.

1126
00:48:48,250 --> 00:48:48,750
Tot bé.

1127
00:48:48,750 --> 00:48:49,410
Bon treball.

1128
00:48:49,410 --> 00:48:50,826
Ara estem sortint de l'habitació.

1129
00:48:50,826 --> 00:48:56,970

1130
00:48:56,970 --> 00:49:01,366
Així que vaig a deixar la resta
per a vostè i veure el que esbrini.

1131
00:49:01,366 --> 00:49:02,865
EPT: jo no vaig a la cambra fosca.

1132
00:49:02,865 --> 00:49:07,315

1133
00:49:07,315 --> 00:49:07,815
Oh espera.

1134
00:49:07,815 --> 00:49:09,314
Ara he d'anar pel passadís fosc?

1135
00:49:09,314 --> 00:49:10,785
OK, vaig a tornar [inaudible].

1136
00:49:10,785 --> 00:49:15,520

1137
00:49:15,520 --> 00:49:16,270
COLTON: D'acord.

1138
00:49:16,270 --> 00:49:17,560
Alguns més elements a recollir.

1139
00:49:17,560 --> 00:49:19,370
Sembla que algunes monedes.

1140
00:49:19,370 --> 00:49:22,242
Això és una rossinyol.

1141
00:49:22,242 --> 00:49:24,200
Així que si vostè troba un tancats
porta, vostè pot utilitzar això.

1142
00:49:24,200 --> 00:49:27,755

1143
00:49:27,755 --> 00:49:28,380
Tens por?

1144
00:49:28,380 --> 00:49:29,371
>> EPT: Encara no.

1145
00:49:29,371 --> 00:49:29,871
COLTON: OK.

1146
00:49:29,871 --> 00:49:34,850

1147
00:49:34,850 --> 00:49:35,497
>> Pretend-- si.

1148
00:49:35,497 --> 00:49:37,330
Només fingir que ets
en realitat allà de peu.

1149
00:49:37,330 --> 00:49:39,580
I si al seu torn around--
vostè ha de acostumar-se a ell.

1150
00:49:39,580 --> 00:49:40,752
Però té sentit.

1151
00:49:40,752 --> 00:49:43,960
DAVID Malan: I mentre Efa segueix
jugar, ja que podíem fer això tot el dia,

1152
00:49:43,960 --> 00:49:45,381
tots podem puntetes aquí.

1153
00:49:45,381 --> 00:49:48,130
Però tenim altres dos parells,
si t'agradaria venir i jugar.

1154
00:49:48,130 --> 00:49:49,980
En cas contrari, veurem
dimecres que ve.

1155
00:49:49,980 --> 00:49:51,354
Gràcies a la nostra voluntària avui.

1156
00:49:51,354 --> 00:49:52,101
[Aplaudiments]

1157
00:49:52,101 --> 00:49:54,506

1158
00:49:54,506 --> 00:49:57,392
>> [MÚSICA - "Seinfeld TEMA"]

1159
00:49:57,392 --> 00:49:58,222

1160
00:49:58,222 --> 00:50:00,180
ALTAVEU 1: Bé, estic
posar una nova PL muntar en.

1161
00:50:00,180 --> 00:50:01,800
Acabo de canviar el OLPF--

1162
00:50:01,800 --> 00:50:03,980
>> ALTAVEU 2: Llavors, què
estàs fent exactament?

1163
00:50:03,980 --> 00:50:07,063
>> ALTAVEU 1: Bé, cada un these--
aquí, et vaig a mostrar aquest aquí.

1164
00:50:07,063 --> 00:50:08,690
Es pot veure aquí.

1165
00:50:08,690 --> 00:50:09,510
>> ALTAVEU 3: Crec que estic bé amb aquests.

1166
00:50:09,510 --> 00:50:09,933
Vols més?

1167
00:50:09,933 --> 00:50:11,325
>> ALTAVEU 4: No, estic bé. [Inaudible].

1168
00:50:11,325 --> 00:50:12,200
>> ALTAVEU 3: No, [inaudible].

1169
00:50:12,200 --> 00:50:12,700
Pren una mica.

1170
00:50:12,700 --> 00:50:21,165

1171
00:50:21,165 --> 00:50:22,290
ALTAVEU 1: Divers color.

1172
00:50:22,290 --> 00:50:22,890
ALTAVEU 2: OK.

1173
00:50:22,890 --> 00:50:26,690
ALTAVEU 1: Així que en última instància, el que
fa és que ajusta el color de--