1
00:00:00,000 --> 00:00:02,862
>> [Música tocando]

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

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

4
00:00:11,580 --> 00:00:12,880
Este é o principio da novena semana.

5
00:00:12,880 --> 00:00:15,797
E iso é o que
foi 200 aniversario do Sr Boole.

6
00:00:15,797 --> 00:00:17,630
Polo tanto, este é os bolseiros
a quen nós aludiu

7
00:00:17,630 --> 00:00:21,800
bastantes veces sobre o uso
Variables booleanas verdadeiros e falsos,

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

9
00:00:22,910 --> 00:00:25,270
E este foi o de Google
Homenaxe a el hoxe.

10
00:00:25,270 --> 00:00:26,489
El virado 200.

11
00:00:26,489 --> 00:00:28,280
Entón, se quere
unirse a nós para xantar CS50,

12
00:00:28,280 --> 00:00:30,279
Bótalle un ollo na ligazón
na páxina web do curso.

13
00:00:30,279 --> 00:00:33,580
E eses rostros e amigos como
estes esperan por ti aquí en Cambridge.

14
00:00:33,580 --> 00:00:35,360
Caras que estes esperan por ti en New Haven.

15
00:00:35,360 --> 00:00:37,800
E, de feito, Ken en
New Haven para os nadadores feitas

16
00:00:37,800 --> 00:00:41,594
o que se chama un GIF animado de Eli
aquí nunha recente lunch-- un GIF é aínda

17
00:00:41,594 --> 00:00:44,260
outro formato de ficheiro gráfico,
co que está familiar-- que

18
00:00:44,260 --> 00:00:46,300
parece un pouco algo así.

19
00:00:46,300 --> 00:00:48,179
Polo tanto, só unha secuencia de-- Aceptar.

20
00:00:48,179 --> 00:00:49,720
Ninguén aquí en Cambridge está rindo.

21
00:00:49,720 --> 00:00:51,720
Pero en New Haven, este
é moi divertido, non?

22
00:00:51,720 --> 00:00:52,350
Todo ben.

23
00:00:52,350 --> 00:00:53,940
>> Polo tanto, unirse a nós alí.

24
00:00:53,940 --> 00:00:55,900
Aquí en Harvard,
En concreto, este mércores,

25
00:00:55,900 --> 00:00:59,480
se vostede é un estudante de segundo ano de calouro ou even--
ou mesmo pensamento junior-- de toma de

26
00:00:59,480 --> 00:01:01,563
un interruptor no ordenador
ciencia, saber que haberá

27
00:01:01,563 --> 00:01:04,440
ser un CS aconsellando xusto este
Mércores, despois da aula

28
00:01:04,440 --> 00:01:08,040
ás 4:00 PM no ordenador
edificio de ciencias Maxwell Dworkin.

29
00:01:08,040 --> 00:01:11,890
Imos poñer isto no curso de
web mañá, tamén.

30
00:01:11,890 --> 00:01:14,430
Donuts, me dixeron, será servido.

31
00:01:14,430 --> 00:01:15,180
>> Todo ben.

32
00:01:15,180 --> 00:01:18,790
Story-- tan divertido eu estaba cutucando
en torno de Internet,

33
00:01:18,790 --> 00:01:23,575
e atopei algúns arquivos antigos
do meu antigo sitio.

34
00:01:23,575 --> 00:01:25,950
E verifícase en torno a este out--
tempo, parece moi oportuna

35
00:01:25,950 --> 00:01:28,910
desde Entender que as eleccións de UC
Está a piques de acelerar o ritmo de novo.

36
00:01:28,910 --> 00:01:32,230
Entón eu execute para UC, perdeu miserabelmente.

37
00:01:32,230 --> 00:01:34,770
E quizais iso foi en parte por que.

38
00:01:34,770 --> 00:01:37,600
Polo tanto, este foi o meu sitio no momento.

39
00:01:37,600 --> 00:01:40,477
Por algunha razón, eu penso que era
unha boa idea, antes de dicir ás persoas

40
00:01:40,477 --> 00:01:43,310
o que a miña plataforma era e por que
deben votar en min, que teñen

41
00:01:43,310 --> 00:01:47,770
premer para entrar para descubrir que
información, que, en retrospectiva, é

42
00:01:47,770 --> 00:01:48,660
tipo de asustado.

43
00:01:48,660 --> 00:01:50,910
Eu realmente non sei o que era.

44
00:01:50,910 --> 00:01:53,140
>> Pero certamente non fixo
axudar a miña campaña.

45
00:01:53,140 --> 00:01:56,874
Eu tamén penso que por Senior
ano-- eu tiven este calendario Muppet.

46
00:01:56,874 --> 00:01:58,540
Muppets foron tipo de en voga na época.

47
00:01:58,540 --> 00:01:59,456
Ou que non estaban.

48
00:01:59,456 --> 00:02:01,790
Eu tiña un calendario Muppet naquela época.

49
00:02:01,790 --> 00:02:04,860
E eu penso que sería legal para nome
meu ordenador na rede da Harvard

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

51
00:02:07,460 --> 00:02:10,370
Na época, todos tivemos en exclusiva
nomes de host identificables.

52
00:02:10,370 --> 00:02:13,150
E podería escoller algunha vaidade
en vez de nomear o seu propio nome.

53
00:02:13,150 --> 00:02:15,580
E eu fun con frogman por algún motivo.

54
00:02:15,580 --> 00:02:19,040
>> E entón eu started-- Pasei moito
de tempo premendo través destas ligazóns

55
00:02:19,040 --> 00:02:20,280
esta mañá.

56
00:02:20,280 --> 00:02:24,690
E esta foi a miña páxina sobre,
que agora parece tipo de encantador.

57
00:02:24,690 --> 00:02:28,210
Pero tamén recoñece só
o que a tecnoloxía chegou.

58
00:02:28,210 --> 00:02:30,310
Quero dicir, de volta ao día,
un 486 era algo.

59
00:02:30,310 --> 00:02:34,090
Estes días, é super, super,
super slow e ben menos

60
00:02:34,090 --> 00:02:36,216
do que pode ter no seu
propios petos estes días.

61
00:02:36,216 --> 00:02:38,465
Hai máis alá que
foi aínda máis embaraçoso.

62
00:02:38,465 --> 00:02:39,770
Entón, eu vou deixar por iso mesmo.

63
00:02:39,770 --> 00:02:42,640
Pero esa foi a miña primeira
incursión web-- Oh, non.

64
00:02:42,640 --> 00:02:43,180
Isto non era.

65
00:02:43,180 --> 00:02:47,000
A miña primeira incursión real para programación web
foi neste sitio, que eu esquezo.

66
00:02:47,000 --> 00:02:50,620
Nalgún punto, eu aprendín a
facer repetitivas imaxes de fondo.

67
00:02:50,620 --> 00:02:55,260
E así que eu atopei esta tella eficaz,
como xogador de hoquei, fútbol e golf

68
00:02:55,260 --> 00:02:58,040
balón, ou o que quere que sexa
para o sitio web do Frosh IMS.

69
00:02:58,040 --> 00:03:01,390
E iso era realmente, realmente a
primeiro proxecto baseado na web que eu tomei on--

70
00:03:01,390 --> 00:03:03,880
Creo que se cadra estudante de segundo ano
ano, ano-- Júnior

71
00:03:03,880 --> 00:03:07,622
despois de tomar CS50 e CS51, un
das clases follow-on comúns.

72
00:03:07,622 --> 00:03:09,330
Notei no ollar
a través dos arquivos

73
00:03:09,330 --> 00:03:12,150
que un dos meus sucesores e
amigos, Lee, medio que cambiou

74
00:03:12,150 --> 00:03:13,480
dos dereitos de autor a si mesmo.

75
00:03:13,480 --> 00:03:17,520
Pero iso era de feito algo que
I debe posuír o constrangimento para.

76
00:03:17,520 --> 00:03:19,370
Pero, na época, este
foi o primeiro sitio web,

77
00:03:19,370 --> 00:03:22,220
como dixen, hai unhas semanas,
polo cal calouro podería

78
00:03:22,220 --> 00:03:24,350
rexistrarse para deportes internos aquí.

79
00:03:24,350 --> 00:03:27,950
E así el saír
que imaxes de fondo

80
00:03:27,950 --> 00:03:29,530
así non son unha boa idea.

81
00:03:29,530 --> 00:03:31,840
Pero a web era novo, e
estabamos todos a probar.

82
00:03:31,840 --> 00:03:34,310
E iso é o que eu
aparentemente fixo no seu momento.

83
00:03:34,310 --> 00:03:34,810
Todo ben.

84
00:03:34,810 --> 00:03:38,020
Así, sen máis delongas, imos cambiar
Engrenaxes hoxe para lle dar, realmente,

85
00:03:38,020 --> 00:03:42,250
a última peza que pode atopar
moi útil para proxectos finais

86
00:03:42,250 --> 00:03:44,780
pero tamén que comezará a
facer o Wide Web mundo

87
00:03:44,780 --> 00:03:46,680
sentir un pouco máis comprensible.

88
00:03:46,680 --> 00:03:49,460
En realidade, nós estamos indo a introducir
unha linguaxe de programación

89
00:03:49,460 --> 00:03:52,474
chamado JavaScript que é semellante
e diferente de xeitos diferentes

90
00:03:52,474 --> 00:03:54,140
desde linguaxes nós miramos ata agora.

91
00:03:54,140 --> 00:03:55,807
>> Entón C, recall, é esta linguaxe compilada.

92
00:03:55,807 --> 00:03:57,473
Ten que executa-lo a través dun compilador.

93
00:03:57,473 --> 00:03:59,810
Obtén o código fonte de oposición
código, ou ceros e uns.

94
00:03:59,810 --> 00:04:03,000
E aqueles son ceros e uns que
súa CPU, Central Processing Unit,

95
00:04:03,000 --> 00:04:04,360
realmente entender.

96
00:04:04,360 --> 00:04:06,610
PHP, por contraste, non é
unha linguaxe compilada.

97
00:04:06,610 --> 00:04:08,772
É unha cousa?

98
00:04:08,772 --> 00:04:09,980
É unha linguaxe interpretada.

99
00:04:09,980 --> 00:04:11,750
Polo tanto, hai algún programa
chamado un intérprete que

100
00:04:11,750 --> 00:04:13,708
ten que ler ele-- arriba
baixo, de esquerda direita--

101
00:04:13,708 --> 00:04:16,519
e descubrir o que todos
súa sintaxe fai e significa,

102
00:04:16,519 --> 00:04:20,200
tanto se se trata de un loop ou unha condición
ou calquera outro número de programación

103
00:04:20,200 --> 00:04:20,740
constrúe.

104
00:04:20,740 --> 00:04:22,210
Entón esta é unha linguaxe interpretada.

105
00:04:22,210 --> 00:04:23,910
>> Entón, nós introducimos HTML.

106
00:04:23,910 --> 00:04:26,440
E HTML non o é un
linguaxe de programación.

107
00:04:26,440 --> 00:04:28,110
Nós chamalo o que?

108
00:04:28,110 --> 00:04:31,650
Unha linguaxe de reserva, que é só
unha especie de forma elegante de dicir que

109
00:04:31,650 --> 00:04:35,820
non ten programación construcións como
vimos incluso para atrás no día do Scratch.

110
00:04:35,820 --> 00:04:36,720
Non hai lacetes.

111
00:04:36,720 --> 00:04:37,920
Non hai condicións.

112
00:04:37,920 --> 00:04:40,820
É realmente unha linguaxe
sobre a reserva dos seus datos

113
00:04:40,820 --> 00:04:43,620
e formato-lo ou
estruturando o de algunha maneira.

114
00:04:43,620 --> 00:04:46,147
>> CSS, á súa vez, do mesmo xeito
non unha linguaxe de programación.

115
00:04:46,147 --> 00:04:47,730
É aínda máis esteticamente orientada.

116
00:04:47,730 --> 00:04:50,470
E iso permite clasificar afinar
cousas como o tamaño e as cores da pia batismal

117
00:04:50,470 --> 00:04:51,850
e colocación e todo iso.

118
00:04:51,850 --> 00:04:52,370
Entón tivemos

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

120
00:04:53,160 --> 00:04:56,010
Entón SQL é de feito unha programación
lingua, en certo sentido,

121
00:04:56,010 --> 00:04:59,330
aínda a medida
especificamente a bases de datos.

122
00:04:59,330 --> 00:05:03,347
Pero aínda que teña só presenta-lo a
seleccionar e inserir e eliminar e actualizar

123
00:05:03,347 --> 00:05:05,430
e un par de outros,
Acontece que realmente pode

124
00:05:05,430 --> 00:05:07,380
funcións ou escribir
procedementos, como son

125
00:05:07,380 --> 00:05:11,270
chamado, en SQL que ollar e actuar
así como funcións PHP e C.

126
00:05:11,270 --> 00:05:12,390
Entón sabe que os hai.

127
00:05:12,390 --> 00:05:15,348
Pero nin sequera preocuparse eles
como acabamos de rabuñar a superficie aquí.

128
00:05:15,348 --> 00:05:18,600
E entón JavaScript, o último dos
nosas linguas formalmente presentado.

129
00:05:18,600 --> 00:05:21,029
Entón JavaScript, tamén, é
unha linguaxe interpretada.

130
00:05:21,029 --> 00:05:23,070
E os que están familiarizados, facer
quere para distinguilo lo

131
00:05:23,070 --> 00:05:26,960
con algunha característica
de ambos C e PHP?

132
00:05:26,960 --> 00:05:28,300
O que o fai diferente?

133
00:05:28,300 --> 00:05:29,650
>> Audiencia: Non está feita.

134
00:05:29,650 --> 00:05:29,930
>> DAVID Malan: Diga novo?

135
00:05:29,930 --> 00:05:31,200
>> Audiencia: Non está feita.

136
00:05:31,200 --> 00:05:31,930
>> DAVID Malan: Non está feita.

137
00:05:31,930 --> 00:05:33,450
Por iso, tamén, é interpretada.

138
00:05:33,450 --> 00:05:34,760
Polo tanto, non está feita.

139
00:05:34,760 --> 00:05:37,210
Pero iso fai que sexa un pouco como PHP.

140
00:05:37,210 --> 00:05:39,545
Senón que é distinto do
PHP dalgunha maneira destacada,

141
00:05:39,545 --> 00:05:40,920
polo menos na forma en que imos usalo.

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

143
00:05:41,205 --> 00:05:41,940
>> Audiencia: Corre-se do lado do cliente.

144
00:05:41,940 --> 00:05:44,000
>> DAVID Malan: É executado
do lado do cliente, normalmente.

145
00:05:44,000 --> 00:05:47,190
Isto é de feito o distintivo
característica para nós agora.

146
00:05:47,190 --> 00:05:51,170
C foi do lado do servidor no sentido
que fixemos todo CS50 IDE.

147
00:05:51,170 --> 00:05:53,630
PHP ata agora foi
do lado do servidor, na medida

148
00:05:53,630 --> 00:05:56,550
como, tamén, recibe interpreted--
non compilado, pero interpreted--

149
00:05:56,550 --> 00:06:00,690
dentro CS50 IDE, o que obviamente é
só un servidor ou servidores na nube.

150
00:06:00,690 --> 00:06:03,070
>> Pero JavaScript, mesmo
se está indo

151
00:06:03,070 --> 00:06:07,000
para comezar a escribir-lo para, digamos, pset
oito e quizais última projects-- é

152
00:06:07,000 --> 00:06:09,620
indo para a dereita, en
CS50 IDE e salve-

153
00:06:09,620 --> 00:06:14,760
en arquivos dentro IDE CS50, CS50 IDE
e, á súa vez, os servidores en nube

154
00:06:14,760 --> 00:06:19,160
en que está aloxado, non van
para interpretar ou realizar o seu código.

155
00:06:19,160 --> 00:06:23,880
Pola contra, só pode ser enviado en
forma inalterada ata o navegador.

156
00:06:23,880 --> 00:06:26,990
E é entón será IE
ou Chrome ou Firefox ou Safari

157
00:06:26,990 --> 00:06:30,697
ou sexa alí o que, en realidade, interpreta
el, de arriba abaixo, de esquerda a dereita.

158
00:06:30,697 --> 00:06:32,780
Así, a distinción clave
característica para hoxe

159
00:06:32,780 --> 00:06:36,110
é que é JavaScript no lado do cliente
e PHP, por exemplo,

160
00:06:36,110 --> 00:06:37,690
foi do lado do servidor.

161
00:06:37,690 --> 00:06:40,920
Agora, iso ten implicacións interesantes
para, así, propiedade intelectual

162
00:06:40,920 --> 00:06:42,660
e quen realmente ver o seu código.

163
00:06:42,660 --> 00:06:44,860
E, de feito, pode ir
web e vexa máis

164
00:06:44,860 --> 00:06:47,530
calquera código que alguén ten
escrito en Javascript.

165
00:06:47,530 --> 00:06:50,230
Ás veces é lexible,
ás veces é ofuscado.

166
00:06:50,230 --> 00:06:52,550
Pero máis sobre iso no seu tempo.

167
00:06:52,550 --> 00:06:57,530
>> Entón JavaScript, ben o suficiente, é
Super semellante, sintacticamente, a C.

168
00:06:57,530 --> 00:06:59,364
E así como PHP,
non hai ningunha función principal.

169
00:06:59,364 --> 00:07:02,113
Se queres comezar a escribir
Código de JavaScript, como vai ver hoxe,

170
00:07:02,113 --> 00:07:03,270
acaba de comezar a escribilo.

171
00:07:03,270 --> 00:07:06,910
Pero é, vai ver, particularmente
útil no contexto navegadores web.

172
00:07:06,910 --> 00:07:09,820
Con todo, a miña pequena
disclaimer-- xeralmente earlier--

173
00:07:09,820 --> 00:07:13,790
foi dicir que pode cada vez máis
uso hoxe server-side JavaScript

174
00:07:13,790 --> 00:07:17,655
usando unha estrutura de fantasía chamado Node.js
que algunhas das aplicacións propias do CS50

175
00:07:17,655 --> 00:07:18,280
son escritos no.

176
00:07:18,280 --> 00:07:20,640
Consulte 50 realmente usa Node.js.

177
00:07:20,640 --> 00:07:24,140
Pero nós estamos indo focalizar en
JavaScript no lado do cliente aquí en diante.

178
00:07:24,140 --> 00:07:26,750
>> Entón aquí está unha serie de condicións en PHP.

179
00:07:26,750 --> 00:07:29,350
Sentímolo, em-- de feito, que
declaración tamén é correcta.

180
00:07:29,350 --> 00:07:32,200
Aquí tamén é un conxunto de
condicións en JavaScript.

181
00:07:32,200 --> 00:07:35,560
Sintacticamente, é
idéntica a C e para o PHP.

182
00:07:35,560 --> 00:07:39,040
Expresións do Sr Boole son,
Do mesmo xeito, sintacticamente

183
00:07:39,040 --> 00:07:41,190
idéntico para ambos C e PHP.

184
00:07:41,190 --> 00:07:44,100
Temos tamén switches
JavaScript que parecen idénticos.

185
00:07:44,100 --> 00:07:46,350
Temos para loops que son
estruturadas de forma idéntica,

186
00:07:46,350 --> 00:07:48,140
mentres loops, facer mentres loops.

187
00:07:48,140 --> 00:07:49,980
>> Esa é un pouco diferente.

188
00:07:49,980 --> 00:07:53,120
PHP tiña a cada constructo
que pode estar usando

189
00:07:53,120 --> 00:07:55,320
ou vai utilizar en pset sete, quizais.

190
00:07:55,320 --> 00:07:59,460
JavaScript ten esta versión especial do
para onde literalmente dicir algo

191
00:07:59,460 --> 00:08:03,864
como para a clave variable en obxecto, que
é un xeito moi sucinta de dicir:

192
00:08:03,864 --> 00:08:06,780
se eu teño un object-- e nós imos
falar sobre estes novo nun moment--

193
00:08:06,780 --> 00:08:10,370
e quero facer unha iteración sobre todo
dos pares de valores clave dentro,

194
00:08:10,370 --> 00:08:13,620
Non teño que descubrir como
índice numericamente los con cero, un,

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

196
00:08:14,580 --> 00:08:15,900
>> Eu podo dicir que literalmente.

197
00:08:15,900 --> 00:08:20,740
E en cada iteración, JavaScript
para min vai actualizar a clave variable

198
00:08:20,740 --> 00:08:24,810
para ser a primeira clave, a continuación, a tecla seguinte,
a continuación, a próxima clave, entón a próxima clave,

199
00:08:24,810 --> 00:08:25,510
e así por diante.

200
00:08:25,510 --> 00:08:30,000
E podo conseguir polo seu valor por tratamento
un obxecto en JavaScript, como veremos,

201
00:08:30,000 --> 00:08:32,584
como se fose un
matriz asociativa en PHP.

202
00:08:32,584 --> 00:08:35,750
En realidade, se finalmente envolto seu
mente en torno ao que unha matriz asociativa é

203
00:08:35,750 --> 00:08:40,140
en PHP, pode pensar niso por agora como
idéntico a un obxecto en JavaScript.

204
00:08:40,140 --> 00:08:42,030
Pero iso é un pouco de
unha simplificación esaxerada.

205
00:08:42,030 --> 00:08:47,230
>> Arrays ollar, ben o suficiente, idéntico
para PHP con excepción dun personaxe.

206
00:08:47,230 --> 00:08:51,425
Hai unha cousa que falta aquí
que vimos a semana pasada con PHP.

207
00:08:51,425 --> 00:08:52,050
O que está omitido?

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

209
00:08:53,310 --> 00:08:54,090
Sen sinal de dólar.

210
00:08:54,090 --> 00:08:56,240
Entón, nós estamos de volta a un
máis mundo normal onde

211
00:08:56,240 --> 00:08:58,050
variables non teñen cifrões.

212
00:08:58,050 --> 00:09:00,810
Pero prefixar los
con var, normalmente.

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

214
00:09:02,230 --> 00:09:06,440
E moi parecido PHP é vagamente
typed-- en que existen tipos,

215
00:09:06,440 --> 00:09:10,120
existen números e cadeas
e Carrozas e así forth--

216
00:09:10,120 --> 00:09:11,570
JavaScript semellante ten tipos.

217
00:09:11,570 --> 00:09:15,470
Pero é vagamente ingresaran en que o
os programadores non teñen que especificalo eles.

218
00:09:15,470 --> 00:09:18,980
Nós só temos que ser conscientes
que existen diferentes tipos.

219
00:09:18,980 --> 00:09:21,690
>> Variables, meanwhile-- aquí está como
podemos declarar "Ola, mundo"

220
00:09:21,690 --> 00:09:22,230
como unha cadea.

221
00:09:22,230 --> 00:09:24,890
Teña en conta que é o mesmo que o
PHP pero ningún sinal de dólar.

222
00:09:24,890 --> 00:09:27,120
E iso é algo que imos
comezar a ver máis hoxe,

223
00:09:27,120 --> 00:09:30,990
en que ten un obxecto
con claves e valores.

224
00:09:30,990 --> 00:09:32,990
E se queres probar
deducir última week--

225
00:09:32,990 --> 00:09:34,730
A sintaxe é un pouco diferente.

226
00:09:34,730 --> 00:09:39,740
Pero un pouco de cordura check-- cantas
claves que este obxecto parece?

227
00:09:39,740 --> 00:09:40,850
Entón eu vexo catro.

228
00:09:40,850 --> 00:09:43,560
Vexo dous.

229
00:09:43,560 --> 00:09:44,680
>> Polo tanto, é de feito dous.

230
00:09:44,680 --> 00:09:47,260
Polo tanto, esta é unha colección
de dous pares de valores clave.

231
00:09:47,260 --> 00:09:49,820
A clave é símbolo cuxo valor é FB.

232
00:09:49,820 --> 00:09:52,620
A clave é o prezo cuxo valor é 101,53.

233
00:09:52,620 --> 00:09:54,230
Entón eses son dous pares de valores clave.

234
00:09:54,230 --> 00:09:58,120
E lembre, PHP-- e esta é unha vez
só unha especie de diferenza sintáctica.

235
00:09:58,120 --> 00:10:00,170
Non é todo o que
intelectualmente interesante.

236
00:10:00,170 --> 00:10:04,610
PHP podería escribir este mesmo
cousa como citas follows--, é igual.

237
00:10:04,610 --> 00:10:06,730
E eu cambiar estes para corchetes.

238
00:10:06,730 --> 00:10:11,240
E entón eu cambiar isto para
unha palabra citada, "prezo".

239
00:10:11,240 --> 00:10:12,500
E entón eu non utilizar os dous puntos.

240
00:10:12,500 --> 00:10:15,060
O que eu uso a semana pasada?

241
00:10:15,060 --> 00:10:18,290
Si, o signo igual
arrow notación descolados.

242
00:10:18,290 --> 00:10:21,470
>> E entón eu fixen o mesmo aquí.

243
00:10:21,470 --> 00:10:23,580
O mesmo aquí.

244
00:10:23,580 --> 00:10:24,240
E iso é todo.

245
00:10:24,240 --> 00:10:27,752
Polo que é bo se isto non ten
realmente afundido en memoria só para

246
00:10:27,752 --> 00:10:29,960
aínda porque é realmente
intelectualmente desinteressante.

247
00:10:29,960 --> 00:10:31,660
É só diferenzas sintácticas.

248
00:10:31,660 --> 00:10:33,230
Pero as ideas son exactamente os mesmos.

249
00:10:33,230 --> 00:10:35,910
Neste variable
Cita en JavaScript

250
00:10:35,910 --> 00:10:39,020
é unha colección de pares chave-valor,
unha das cales é símbolo, unha das cales

251
00:10:39,020 --> 00:10:39,690
é o prezo.

252
00:10:39,690 --> 00:10:42,340
E podo chegar a eses valores
coa seguinte sintaxe.

253
00:10:42,340 --> 00:10:46,280
Así como en PHP, puiden
facer algo como-- deixar

254
00:10:46,280 --> 00:10:48,590
me facer esta caixa un pouco maior.

255
00:10:48,590 --> 00:10:52,750
Así como en PHP, puiden
facer isto-- oh, caramba.

256
00:10:52,750 --> 00:10:53,250
Imos alí.

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

258
00:10:56,350 --> 00:11:00,800
>> Así como en PHP-- OK, imos
non necesitará empregar as notas do presentador.

259
00:11:00,800 --> 00:11:06,010
Así como en PHP, podo
facer $ cita ["simbolo"] Cita $,

260
00:11:06,010 --> 00:11:08,860
e iso me vai levar
o valor de "símbolo".

261
00:11:08,860 --> 00:11:12,800
En JavaScript, que será
idéntica, polo que eu só podo facelo.

262
00:11:12,800 --> 00:11:14,850
O único que é
falta é o sinal de dólar.

263
00:11:14,850 --> 00:11:17,470
>> Tan ben o suficiente, entón, non hai
non todo o que moi nova sintaxe.

264
00:11:17,470 --> 00:11:21,025
Entón, o que hoxe imos concentrar en, realmente, é
algunhas das ideas e das aplicacións.

265
00:11:21,025 --> 00:11:22,900
E a primeira, tales
aplicación que pode

266
00:11:22,900 --> 00:11:26,090
ver se mergullou pset
sete xa é esta sintaxe.

267
00:11:26,090 --> 00:11:28,980
Así, en pset sete, se ten
viu ou non viu aínda,

268
00:11:28,980 --> 00:11:33,570
sei que hai un ficheiro que damos
chamou config.json-- JavaScript

269
00:11:33,570 --> 00:11:34,661
Obxecto Notation.

270
00:11:34,661 --> 00:11:35,160
Por que?

271
00:11:35,160 --> 00:11:39,540
Queriamos ser capaz de fornece-lo con
un modelo con algúns pares de valores clave.

272
00:11:39,540 --> 00:11:44,290
Queriamos ser capaz de lle dar unha lista
do hospedeiro, o nome do servidor.

273
00:11:44,290 --> 00:11:46,710
Queriamos darlle unha
espazo reservado para o seu nome de usuario

274
00:11:46,710 --> 00:11:48,210
e un espazo reservado para o contrasinal.

275
00:11:48,210 --> 00:11:49,410
Se non está a ver
iso aínda, non se preocupe.

276
00:11:49,410 --> 00:11:51,340
Máis sobre o tema en sete pset
[? spec. ?] E logo,

277
00:11:51,340 --> 00:11:53,173
Obviamente, queremos que
para cubrir a realizar-dos

278
00:11:53,173 --> 00:11:55,310
porque cando entrar
CS50 IDE, cada un de vós

279
00:11:55,310 --> 00:11:57,630
ter o seu propio nome de usuario e contrasinal.

280
00:11:57,630 --> 00:12:00,910
>> Entón poderíamos usar unha media ducia
ou máis formatos de arquivos diferentes.

281
00:12:00,910 --> 00:12:02,940
Poderiamos utilizar un ficheiro .txt.

282
00:12:02,940 --> 00:12:04,570
Poderiamos utilizar un ficheiro CSV.

283
00:12:04,570 --> 00:12:06,745
Poderíamos usar un
Arquivo INI, un arquivo XML,

284
00:12:06,745 --> 00:12:09,370
un grupo enteiro máis siglas que
pode non ter xa oín.

285
00:12:09,370 --> 00:12:11,244
É unha especie de arbitrario
ao final do día.

286
00:12:11,244 --> 00:12:16,030
Pero super popular nos días de hoxe é un texto
formato chamado JSON-- JavaScript Object

287
00:12:16,030 --> 00:12:18,460
Notation-- que se parece con isto.

288
00:12:18,460 --> 00:12:20,890
É un pouco enigmática,
pero observar os patróns.

289
00:12:20,890 --> 00:12:24,180
Comeza cun rizado aberto
cinta, e que acaban co mesmo.

290
00:12:24,180 --> 00:12:26,550
Dentro do que é algo.

291
00:12:26,550 --> 00:12:27,920
É un par clave-valor.

292
00:12:27,920 --> 00:12:30,580
Polo tanto, este é un obxecto que eu son
mirando a pantalla aquí

293
00:12:30,580 --> 00:12:33,690
que ten unha chave, que ten un valor.

294
00:12:33,690 --> 00:12:37,610
E só inferir a base do
estándar anterior, o que é a clave aquí?

295
00:12:37,610 --> 00:12:39,790
Base de datos, a cousa a
á esquerda do colonos.

296
00:12:39,790 --> 00:12:43,500
>> Agora, o valor pasa a ser
un varias liñas neste momento.

297
00:12:43,500 --> 00:12:46,760
Pero o valor comeza cun rizado
cinta e remata cunha chaveta.

298
00:12:46,760 --> 00:12:49,480
Entón, o que propón é a
Tipo do valor da base de datos?

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

300
00:12:52,160 --> 00:12:54,670
Un dicionario ou, só
brevemente, un obxecto.

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

302
00:12:55,170 --> 00:13:00,010
Este é un tipo de estrutura de datos que
pode utilizar outras estruturas dentro de si.

303
00:13:00,010 --> 00:13:02,750
Entón, se esa cousa toda que estamos
chamando un object-- e un obxecto

304
00:13:02,750 --> 00:13:07,101
é só unha morea de valor clave da pairs--
valor do propio banco de datos é un obxecto.

305
00:13:07,101 --> 00:13:10,350
O valor de base de datos ten un grupo enteiro
de pares de valores de clave, o primeiro dos cales

306
00:13:10,350 --> 00:13:13,130
é anfitrión, a continuación, nomee, a continuación,
nome de usuario, contrasinal, a continuación,

307
00:13:13,130 --> 00:13:17,550
cada un de cuxos valores, mentres, é
só unha secuencia aburrido entre comiñas dobres.

308
00:13:17,550 --> 00:13:19,770
>> Así, aínda que iso non é
super claro aínda,

309
00:13:19,770 --> 00:13:22,740
sabemos que este é só un
estándar, forma bastante aburrido

310
00:13:22,740 --> 00:13:25,190
de almacenar datos nun formato estándar.

311
00:13:25,190 --> 00:13:27,700
Pero os erros comúns que
pode facer, mesmo en pset sete,

312
00:13:27,700 --> 00:13:32,120
son pequenas cousas estúpidas, como se
accidentalmente omitir a coma alí.

313
00:13:32,120 --> 00:13:34,900
Isto vai producir no ficheiro
non necesariamente de ser lexible.

314
00:13:34,900 --> 00:13:38,191
Se omitir accidentalmente cousas como o
citas, non vai ser lexible.

315
00:13:38,191 --> 00:13:41,654
Polo tanto, é un formato de ficheiro moi detallista,
pero é un que é super común.

316
00:13:41,654 --> 00:13:44,820
E nós pasar a usalo, aínda que
non usar calquera outra forma JavaScript,

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

318
00:13:46,330 --> 00:13:46,860
>> Todo ben.

319
00:13:46,860 --> 00:13:48,110
Entón lembre que este cadro.

320
00:13:48,110 --> 00:13:51,657
Nós falamos sobre, HTML, que
o código pode ser como este.

321
00:13:51,657 --> 00:13:54,740
Este é o formato Markup Language
[Inaudível] para só "Ola, mundo".

322
00:13:54,740 --> 00:13:57,570
Pero, entón, propuxo unha
tempo que, se iso axuda,

323
00:13:57,570 --> 00:14:00,210
pode querer comezar a pensar
sobre o xa como unha árbore.

324
00:14:00,210 --> 00:14:03,730
En realidade, o descenso que nos
usar só polo amor de lexibilidade

325
00:14:03,730 --> 00:14:05,610
ou por mor do estilo de
a esquerda pode tipo de

326
00:14:05,610 --> 00:14:10,040
ser traducida a esta árbore, onde
ter algún nodo raíz especial que imos

327
00:14:10,040 --> 00:14:16,860
xenericamente chamado documento, debaixo do cal
é o elemento HTML raíz ou etiqueta, HTML,

328
00:14:16,860 --> 00:14:19,980
que, a continuación, ten dous
nenos, cabeza e corpo.

329
00:14:19,980 --> 00:14:21,750
>> E, a continuación, á súa vez, a cabeza ten un título.

330
00:14:21,750 --> 00:14:23,440
E título ten un valor de texto.

331
00:14:23,440 --> 00:14:26,130
E o corpo ten un valor semellante texto.

332
00:14:26,130 --> 00:14:29,220
Entón, se está dicindo cómodo
que si, podería tomar este HTML

333
00:14:29,220 --> 00:14:32,080
e deseñar un cadro como
tanto, o lado dereito

334
00:14:32,080 --> 00:14:35,910
é un modelo mental bo porque agora
que temos JavaScript, unha programación

335
00:14:35,910 --> 00:14:39,960
linguaxe que os navegadores poden
executar e interpretar para vostede,

336
00:14:39,960 --> 00:14:42,690
verifícase que o
estamos a piques de facer o código

337
00:14:42,690 --> 00:14:45,320
é comezar a manexar esta
estrutura de árbore na memoria.

338
00:14:45,320 --> 00:14:47,070
Non hai que construír
a árbore en memoria.

339
00:14:47,070 --> 00:14:49,880
Non temos que facer unha especie de
estrutura de datos e cinco estilo pset

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

341
00:14:50,650 --> 00:14:54,610
O navegador, ben o suficiente, encima
interpretar HTML arriba para abaixo,

342
00:14:54,610 --> 00:14:58,600
esquerda ou dereita, é, literalmente, indo
man-nos o equivalente a un punteiro

343
00:14:58,600 --> 00:15:00,840
para que árbore enteira de balde.

344
00:15:00,840 --> 00:15:02,150
Fai todo o traballo duro.

345
00:15:02,150 --> 00:15:05,520
Iso é o que Apple e Mozilla
e outros fixeron para nós.

346
00:15:05,520 --> 00:15:09,400
>> E con JavaScript que imos
ser capaz de controlar e cambiar e facer

347
00:15:09,400 --> 00:15:12,910
Cousas interesantes para
aquela árbore, tamén coñecida

348
00:15:12,910 --> 00:15:15,880
como DOM ou Document Object Model.

349
00:15:15,880 --> 00:15:17,110
Que tipo de cousas?

350
00:15:17,110 --> 00:15:19,030
Ben, resulta que
en JavaScript, non hai

351
00:15:19,030 --> 00:15:22,800
este rol de
eventos que poden ocorrer.

352
00:15:22,800 --> 00:15:26,330
E nós realmente non teño usado que
palabra desde semana cero e pset

353
00:15:26,330 --> 00:15:28,240
cero cando falamos Raspadinha.

354
00:15:28,240 --> 00:15:31,390
A maioría de vostedes probablemente non usar
un evento no seu proxecto Scratch.

355
00:15:31,390 --> 00:15:33,850
Pero ten que se lembrar
o simple Marco Polo

356
00:15:33,850 --> 00:15:36,760
exemplo, onde tivemos dous
sprites, un dos cales dixo Marco.

357
00:15:36,760 --> 00:15:40,180
O outro dos que, a continuación, ao escoitar
e escoitando o evento, dixo: Polo.

358
00:15:40,180 --> 00:15:42,080
Se non, Sinto-se a liberdade de
mirar para atrás tan lonxe cara atrás.

359
00:15:42,080 --> 00:15:44,450
>> Pero esta é só a
dicir, e pode tipo de

360
00:15:44,450 --> 00:15:47,730
deducir os nomes destes
cousas, JavaScript, verifícase,

361
00:15:47,730 --> 00:15:53,200
vai dar-nos unha forma de escoitar
para rato indo para abaixo ou rato subindo

362
00:15:53,200 --> 00:15:57,920
ou a tecla para abaixo ou tecla indo
indo arriba onselect onsubmit

363
00:15:57,920 --> 00:15:59,740
onresizing ou algo así.

364
00:15:59,740 --> 00:16:03,060
Noutras palabras, calquera acción física
que un ser humano pode levar cun navegador

365
00:16:03,060 --> 00:16:08,210
que fai todos os días, pode escribir
código para que escoita a estes eventos

366
00:16:08,210 --> 00:16:10,220
e despois fai algo apropiado.

367
00:16:10,220 --> 00:16:14,130
>> Por exemplo, se usa Google Maps,
o que pasa se fai clic e movemento

368
00:16:14,130 --> 00:16:16,250
o rato, tipicamente?

369
00:16:16,250 --> 00:16:17,758
Se fai clic e arrastrar?

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

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

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

373
00:16:22,200 --> 00:16:23,159
O mapa comeza a moverse.

374
00:16:23,159 --> 00:16:25,616
Así, pode tipo de ver o que está
aquí, o que está alí.

375
00:16:25,616 --> 00:16:27,130
E como Google aplicar isto?

376
00:16:27,130 --> 00:16:29,421
Ben, presuntamente, son
usando un par destes eventos

377
00:16:29,421 --> 00:16:31,720
oíntes, que
di, escoitar no rato

378
00:16:31,720 --> 00:16:35,410
down-- así cando o usuario fisicamente
empuxa o trackpad ou o rato

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

380
00:16:36,010 --> 00:16:38,350
E entón nós estamos a buscar
algo así como movemento

381
00:16:38,350 --> 00:16:41,145
ou calquera outro evento que
nos permite capturar arrastre.

382
00:16:41,145 --> 00:16:45,910
E, de feito, de arrastre é semellante neste
punto punto dot lista de opcións posibles.

383
00:16:45,910 --> 00:16:49,140
>> Polo tanto, este vai ser un poderoso
xeito de comezar a responder ao usuario

384
00:16:49,140 --> 00:16:52,824
mesmo antes de el ou ela clic
algo explícito enviar.

385
00:16:52,824 --> 00:16:55,240
Pero nós estamos indo a introducir
un par de temas para chegar alí.

386
00:16:55,240 --> 00:16:58,570
Pero primeiro, imos transición
para algúns código real.

387
00:16:58,570 --> 00:17:01,450
Entón, eu estou indo a ir
adiante e abrir don-0,

388
00:17:01,450 --> 00:17:05,869
que é un exemplo moi sinxelo
aquí que se eu simplemente aumentar o zoom

389
00:17:05,869 --> 00:17:08,500
ten esta entrada aquí por min.

390
00:17:08,500 --> 00:17:12,410
E eu estou indo a ir adiante e escribir
"David" para o meu nome e prema en Enviar.

391
00:17:12,410 --> 00:17:17,940
>> E entón, aínda tipo de barato, I
ten este poder que aparece que di:

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

393
00:17:19,244 --> 00:17:21,740
Polo tanto, este é o tipo de
como o noso "Ola, mundo"

394
00:17:21,740 --> 00:17:25,150
que fixemos algún tempo en C e
mesmo en PHP, porque eu teño dinamicamente

395
00:17:25,150 --> 00:17:26,310
emitido o meu nome.

396
00:17:26,310 --> 00:17:28,230
Podo facer nome doutra persoa aquí.

397
00:17:28,230 --> 00:17:31,240
Podería simplemente cambiar isto para,
como, Hannah, faga clic en Enviar.

398
00:17:31,240 --> 00:17:33,780
E, de feito, os pequenos cambios emerxente.

399
00:17:33,780 --> 00:17:36,650
>> Agora, os pop-ups son un dos
a maioría dos recursos abusada web.

400
00:17:36,650 --> 00:17:38,520
E, de feito, de volta
os bloqueadores de emerxentes día

401
00:17:38,520 --> 00:17:40,820
entrou en voga, porque
ía para algún website--

402
00:17:40,820 --> 00:17:43,604
quizais un Place-- cuestionable
que, de súpeto,

403
00:17:43,604 --> 00:17:46,020
iniciar salpicado súa pantalla
con unha morea de ventás emerxentes.

404
00:17:46,020 --> 00:17:49,700
E así, esta habilidade para emerxentes
fiestras fronte do usuario

405
00:17:49,700 --> 00:17:52,372
non foi particularmente
ben recibido pola humanidade.

406
00:17:52,372 --> 00:17:54,080
Entón é por iso que ve
este previr cousa,

407
00:17:54,080 --> 00:17:55,706
que só fai esa cousa toda feo.

408
00:17:55,706 --> 00:17:57,996
Entón, nós imos ter unha
mellor forma para solicitar ao usuario.

409
00:17:57,996 --> 00:17:59,350
Pero, por agora, que parece funcionar.

410
00:17:59,350 --> 00:18:03,320
Entón, só de forma intuitiva, o que
parece estar a suceder aquí?

411
00:18:03,320 --> 00:18:07,870
I vai adiante e faga clic en Enviar
entón algo está pasando, de forma clara.

412
00:18:07,870 --> 00:18:12,870
Pero o que non está a suceder que pasou
a semana pasada, en calquera momento eu clic en Enviar?

413
00:18:12,870 --> 00:18:15,940
O que non pasou na pantalla?

414
00:18:15,940 --> 00:18:17,170
Sentímolo?

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

416
00:18:18,010 --> 00:18:19,720
O URL non cambiou en todo.

417
00:18:19,720 --> 00:18:22,250
Eu dixen que iso era don-0,
e eu aínda estou no don-0.

418
00:18:22,250 --> 00:18:26,890
Normalmente, teriamos mudado para algún outro
URL, como register.php ou semellantes.

419
00:18:26,890 --> 00:18:29,560
>> Pero aínda cando dimitir
esa cousa premendo OK,

420
00:18:29,560 --> 00:18:32,310
notar que a URL
fica completamente parado.

421
00:18:32,310 --> 00:18:35,350
E, de feito, se eu son un pouco
escéptico, déixeme abrir Chrome.

422
00:18:35,350 --> 00:18:36,860
Déixeme abrir a guía Rede.

423
00:18:36,860 --> 00:18:38,360
E teña en conta que é en branco no momento.

424
00:18:38,360 --> 00:18:40,700
Deixe-me ir adiante e reenviar María.

425
00:18:40,700 --> 00:18:42,810
Non hai ningún tráfico de rede calquera.

426
00:18:42,810 --> 00:18:44,320
Polo tanto, non hai HTTP.

427
00:18:44,320 --> 00:18:47,620
>> Entón, en realidade, se eu ollar para o código fonte
para isto-- déixeme pechar esta ventá

428
00:18:47,620 --> 00:18:49,480
e ir á vista de orixe.

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

430
00:18:50,400 --> 00:18:53,520
Parece que hai algunha
novas etiquetas, entre eles guión.

431
00:18:53,520 --> 00:18:57,490
Entón, imos dar un ollo dentro CS50
IDE exactamente o que eu mandei para o usuario.

432
00:18:57,490 --> 00:19:00,690
>> Entón, aquí imos é--
centrar só o HTML.

433
00:19:00,690 --> 00:19:03,500
Aquí está a metade inferior do don-0.html.

434
00:19:03,500 --> 00:19:07,830
E teña en conta que ten un título,
unha marca de cabeza, unha marca do corpo, unha marca de formulario.

435
00:19:07,830 --> 00:19:11,257
Pero o que salta para fóra a vostede como
diferente, especialmente se nunca

436
00:19:11,257 --> 00:19:12,590
escrito calquera JavaScript si mesmo.

437
00:19:12,590 --> 00:19:14,920
Déixeme rolar un pouco
a dereita aquí.

438
00:19:14,920 --> 00:19:18,330
Eu teño unha entrada,
outra entrada para presentar.

439
00:19:18,330 --> 00:19:21,410
Eu teño un ID, que é unha especie de novo.

440
00:19:21,410 --> 00:19:22,790
Pero fixemos ver iso con CSS.

441
00:19:22,790 --> 00:19:24,480
O que máis é sempre novo?

442
00:19:24,480 --> 00:19:24,980
Si?

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

444
00:19:30,580 --> 00:19:32,140
Niza.

445
00:19:32,140 --> 00:19:32,760
>> Todo ben.

446
00:19:32,760 --> 00:19:35,630
Entón, onde di que onsubmit,
teña en conta o parecer continuación.

447
00:19:35,630 --> 00:19:38,740
Este é un atributo
na nomenclatura HTML.

448
00:19:38,740 --> 00:19:40,944
O seu valor é esa secuencia entre comiñas aquí.

449
00:19:40,944 --> 00:19:42,860
E iso parece un pouco
estraño a primeira vista.

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

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

452
00:19:45,240 --> 00:19:47,580
É dicir, como podes imaxinar, JavaScript.

453
00:19:47,580 --> 00:19:51,850
Polo que parece, incorporado nesta
A páxina web é unha función chamada greet.

454
00:19:51,850 --> 00:19:54,250
E eu estou inferindo que
porque é unha palabra, cumprimento.

455
00:19:54,250 --> 00:19:55,880
Ten un paréntese aberta,
paren próximos, punto e coma.

456
00:19:55,880 --> 00:19:58,095
Parece que unha función C,
parece unha función PHP.

457
00:19:58,095 --> 00:20:00,370
>> E, de feito, que vai
ser unha función JavaScript.

458
00:20:00,370 --> 00:20:01,440
Entón eu estou volvendo false.

459
00:20:01,440 --> 00:20:03,440
Nós imos voltar a
que en só un momento.

460
00:20:03,440 --> 00:20:05,320
Pero onde é definido esta función?

461
00:20:05,320 --> 00:20:07,950
Ben, deixe-me rolar para arriba
arriba do ficheiro.

462
00:20:07,950 --> 00:20:11,710
E aínda que sexa unha longa liña,
é relativamente simple.

463
00:20:11,710 --> 00:20:15,000
Deixe-me aquí e reducir
Concéntrase-se nestes catro liñas.

464
00:20:15,000 --> 00:20:17,137
>> Así, en JavaScript, só
como PHP, só

465
00:20:17,137 --> 00:20:19,720
digamos, literalmente, a palabra "función",
o nome da función,

466
00:20:19,720 --> 00:20:22,700
e, a continuación, con calquera parénteses
arguments-- sen argumentos neste caso.

467
00:20:22,700 --> 00:20:25,290
E non hai ningún tipo de retorno
en JavaScript, así como PHP.

468
00:20:25,290 --> 00:20:29,470
Polo tanto, é un pouco máis flexible que C.
Abrir chaveta, preto chaveta.

469
00:20:29,470 --> 00:20:33,270
Construído en JavaScript é un function--
non un function-- recomendado

470
00:20:33,270 --> 00:20:35,730
pero unha función chamada alerta
cuxo único obxectivo na vida

471
00:20:35,730 --> 00:20:38,620
é para puxar arriba que moi feo
solicitar que vimos hai pouco.

472
00:20:38,620 --> 00:20:40,950
>> Agora, iso é unha especie de boca chea.

473
00:20:40,950 --> 00:20:42,560
O que está pasando aquí?

474
00:20:42,560 --> 00:20:45,840
Entón, imos comezar a
destacar todo aquí.

475
00:20:45,840 --> 00:20:48,540
Ese é o mesmo argumento para advertir.

476
00:20:48,540 --> 00:20:49,530
E o que está a suceder?

477
00:20:49,530 --> 00:20:51,200
Isto parece unha corda.

478
00:20:51,200 --> 00:20:59,180
E non é que, a diferenza de PHP e ao contrario
C, non importa en JavaScript

479
00:20:59,180 --> 00:21:01,090
se comiñas simples ou dobres.

480
00:21:01,090 --> 00:21:02,060
Eles van ser equivalente.

481
00:21:02,060 --> 00:21:03,769
E, francamente, é só
popular estes días

482
00:21:03,769 --> 00:21:06,726
para programadores JavaScript para sempre
usar comiñas simples, por algún motivo.

483
00:21:06,726 --> 00:21:07,840
É só a cousa que facer.

484
00:21:07,840 --> 00:21:09,710
Pero poderiamos usar comiñas dobres, tamén.

485
00:21:09,710 --> 00:21:11,540
>> Entón é máis un novo personaxe.

486
00:21:11,540 --> 00:21:14,512
Pero aqueles de vostedes que fixen
que antes, o que máis dicir?

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

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

489
00:21:17,120 --> 00:21:18,570
Entón, nós vimos isto en PHP.

490
00:21:18,570 --> 00:21:20,315
Non é só o punto
operador en PHP que

491
00:21:20,315 --> 00:21:22,000
ha concatenar dúas secuencias xuntos.

492
00:21:22,000 --> 00:21:24,000
C era unha dor no pescozo para facelo.

493
00:21:24,000 --> 00:21:27,310
Teña en conta que do pset seis, que era
unha dor especial no pescozo,

494
00:21:27,310 --> 00:21:29,470
que tería que usar
algo así como strcat

495
00:21:29,470 --> 00:21:31,660
tras a reserva de memoria
na pila ou a pila.

496
00:21:31,660 --> 00:21:34,243
Tiña que ir a través de marcos
só para concatenar dúas cadeas.

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

498
00:21:36,040 --> 00:21:38,030
Só ten que usar o operador máis entre eles.

499
00:21:38,030 --> 00:21:41,420
>> Así, o complexo de aparencia
cousa parece ser este

500
00:21:41,420 --> 00:21:43,490
porque, ao final de
Toda esa secuencia, só

501
00:21:43,490 --> 00:21:45,797
concatenar nun signo de admiración.

502
00:21:45,797 --> 00:21:48,380
Polo tanto, se o que estaba xurdindo foi
"Ola, David", "Ola, Hannah,"

503
00:21:48,380 --> 00:21:52,740
"Ola, María", etc., de forma clara
esa cousa medio entre os dous

504
00:21:52,740 --> 00:21:55,215
triunfos que me dar acceso a que?

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

506
00:21:58,855 --> 00:22:01,991
O que está aí seguramente?

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

508
00:22:02,490 --> 00:22:05,090
Entón, eu vou finxir aquí a
responder ao seu nome, non?

509
00:22:05,090 --> 00:22:10,380
Entón, o seu nome aparece na final
resultado. Entón o que significa isto?

510
00:22:10,380 --> 00:22:15,080
Ben, eu propuxen anteriormente no que
imaxe de que a chamada DOM

511
00:22:15,080 --> 00:22:18,580
ten este elemento raíz especial
subida superior chamado documento.

512
00:22:18,580 --> 00:22:21,660
E agora, ao parecer, iso vai
de ser unha variable global especial

513
00:22:21,660 --> 00:22:25,250
en JavaScript, en que está construído un
todo grupo de funcións útiles.

514
00:22:25,250 --> 00:22:31,770
Entre a funcionalidade útil é a
capacidade de obter en calquera nodo descendente.

515
00:22:31,770 --> 00:22:37,760
Estes cadrados ou rectángulos ou elipses
só os nós nunha árbore, por así dicir.

516
00:22:37,760 --> 00:22:41,850
>> Así, verifícase que embutido
Obxecto de documento de JavaScript

517
00:22:41,850 --> 00:22:47,300
é unha función, doutro xeito coñecida como
método, que se chama getElementById.

518
00:22:47,300 --> 00:22:50,410
A sintaxe para chamar
unha función en JavaScript

519
00:22:50,410 --> 00:22:55,220
que está dentro dun obxecto ou un
variable é só coa notación de punto.

520
00:22:55,220 --> 00:22:57,950
E vimos isto en C
que a sintaxe da estrutura.

521
00:22:57,950 --> 00:23:03,530
Ve iso en pset sete, especie de,
máis ou menos, cando ve CS50 :: consulta.

522
00:23:03,530 --> 00:23:08,070
O colon colon en PHP é outro
xeito de chamar a unha función que é

523
00:23:08,070 --> 00:23:09,260
dentro dalgún obxecto.

524
00:23:09,260 --> 00:23:11,960
>> Pero, de momento, en JavaScript,
é só un punto.

525
00:23:11,960 --> 00:23:14,170
E así esta función,
ben o suficiente, tipo de

526
00:23:14,170 --> 00:23:16,810
di o que does-- obter elemento por ID.

527
00:23:16,810 --> 00:23:20,280
Un elemento é só outro nome
para unha etiqueta ou nó na DOM.

528
00:23:20,280 --> 00:23:26,900
E así comeza elemento por ID "nome"
significa isto-- aquí está o meu HTML.

529
00:23:26,900 --> 00:23:31,910
E a partir desta HTML, o que
nó ou etiqueta HTML son eu

530
00:23:31,910 --> 00:23:35,097
será programaticamente handed
chamando document.getElementById?

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

532
00:23:37,650 --> 00:23:38,500
>> Si, exactamente.

533
00:23:38,500 --> 00:23:42,670
Eu estou indo a obter a entrada
elemento alí cuxa ID é "nome".

534
00:23:42,670 --> 00:23:45,140
Entón, en concreto, podes
pensas desta función,

535
00:23:45,140 --> 00:23:49,560
GetElementById, como un xeito de dar
copia dun punteiro para ese nó específico

536
00:23:49,560 --> 00:23:50,060
na árbore.

537
00:23:50,060 --> 00:23:51,980
Non tiraron esta
árbore, pero é un xeito

538
00:23:51,980 --> 00:23:54,900
de acceder a ese
rectángulo ou rectángulo que

539
00:23:54,900 --> 00:23:58,090
identificando-lo exclusivamente a través do seu ID.

540
00:23:58,090 --> 00:23:59,760
>> Agora, por que isto é útil?

541
00:23:59,760 --> 00:24:01,510
Ben, botan
que unha vez que teña obtido

542
00:24:01,510 --> 00:24:07,220
ese nó, que rectángulo do
imaxe, que no interior do mesmo nó,

543
00:24:07,220 --> 00:24:10,660
á súa vez, ten unha morea de
pares de valores clave properties--

544
00:24:10,660 --> 00:24:13,480
ou de datos, un dos cales se chama valor.

545
00:24:13,480 --> 00:24:16,500
Entón, literalmente, é unha especie de
bocado para explicar a cousa toda.

546
00:24:16,500 --> 00:24:19,370
Con todo, ao final do día,
todo isto fai é darlle

547
00:24:19,370 --> 00:24:23,070
unha secuencia de caracteres que o usuario introduciu no
desta forma xerárquica.

548
00:24:23,070 --> 00:24:24,820
Pero eu non me gusta de un
par destas cousas.

549
00:24:24,820 --> 00:24:27,590
Ou mellor, hai algunha curiosidade aínda.

550
00:24:27,590 --> 00:24:28,870
Todo isto parecía funcionar.

551
00:24:28,870 --> 00:24:33,420
Porque pensas que eu regresar
false despois de chamar cumprimento?

552
00:24:33,420 --> 00:24:35,910
Isto parece un pouco feo, que
Teño dúas afirmacións alí

553
00:24:35,910 --> 00:24:38,730
separados por punto e coma.

554
00:24:38,730 --> 00:24:39,310
Tomé un palpite.

555
00:24:39,310 --> 00:24:44,390
Se eu eliminar voltar falso, o que
pode suceder, só instintivamente?

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

557
00:24:46,990 --> 00:24:49,460
Sentímolo, dicir de novo?

558
00:24:49,460 --> 00:24:50,530
>> Abre un grupo de Windows.

559
00:24:50,530 --> 00:24:52,780
Entón quizais algo potencialmente
así ía ocorrer.

560
00:24:52,780 --> 00:24:54,422
Que mais?

561
00:24:54,422 --> 00:24:55,630
Pode presentar unha solicitude para onde?

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

563
00:24:59,109 --> 00:25:00,510
Para a mesma páxina.

564
00:25:00,510 --> 00:25:03,110
Entón, en realidade, é iso
o máis preto responder aquí,

565
00:25:03,110 --> 00:25:05,890
aínda que, ao contrario
no pasado, eu non teño

566
00:25:05,890 --> 00:25:09,300
especificar o atributo de acción,
que normalmente temos que facer.

567
00:25:09,300 --> 00:25:11,780
Acontece aí é un defecto.
Se non especifica a acción,

568
00:25:11,780 --> 00:25:15,370
é como dicir cita, pecha comiñas
ou o nome do ficheiro en si,

569
00:25:15,370 --> 00:25:17,850
que neste caso sería
ser como don-0.html.

570
00:25:17,850 --> 00:25:20,420
É só unha especie de inferir,
ou mellor implícita.

571
00:25:20,420 --> 00:25:22,420
>> E por iso, se non fai iso, imos notar.

572
00:25:22,420 --> 00:25:23,230
Déixeme gardar este.

573
00:25:23,230 --> 00:25:25,270
E eu elimina retorno falso.

574
00:25:25,270 --> 00:25:27,759
Déixeme volver a este
exemplo e forza de voltar a cargalo.

575
00:25:27,759 --> 00:25:30,800
E pode ver-me suxerir
isto CS50 Discutir unha morea de veces.

576
00:25:30,800 --> 00:25:34,560
Se algo está sempre actuando funky e
navegador non está comportándose como se esperaba,

577
00:25:34,560 --> 00:25:37,410
moitas veces vai querer soster
Shift e prema en Reload.

578
00:25:37,410 --> 00:25:41,480
Isto vai obrigar cada ficheiro para recargar
e non usar caché local do navegador

579
00:25:41,480 --> 00:25:47,032
ou copia de xeito que agora, deixe-me ir adiante e
abrir o meu Inspector, na guía Rede.

580
00:25:47,032 --> 00:25:48,740
Vou clic
Preserve Log porque

581
00:25:48,740 --> 00:25:51,660
non quero iso para eliminar as liñas
Xa que recibín arrastrada noutro lugar.

582
00:25:51,660 --> 00:25:54,650
>> Déixeme ir adiante aquí e
Tipo de Andi, prema en Enviar.

583
00:25:54,650 --> 00:25:55,150
Todo ben.

584
00:25:55,150 --> 00:25:56,480
Isto parece como se esperaba.

585
00:25:56,480 --> 00:25:57,440
El di: "Ola, Andi."

586
00:25:57,440 --> 00:25:59,420
Permítanme, prema en Aceptar.

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

588
00:26:00,610 --> 00:26:05,100
Teña en conta que a páxina cambiou,
aínda á páxina orixinal.

589
00:26:05,100 --> 00:26:06,770
Teña en conta o tipo de URL cambiou.

590
00:26:06,770 --> 00:26:09,430
Engadiu un punto de interrogación,
que é xeralmente un indicador

591
00:26:09,430 --> 00:26:11,260
que tentou presentar algo.

592
00:26:11,260 --> 00:26:13,570
E, a continuación, na parte inferior,
aínda máis explícita,

593
00:26:13,570 --> 00:26:17,570
aquí é a petición HTTP real,
que recibiu unha resposta de 200 que

594
00:26:17,570 --> 00:26:18,490
me trouxo de volta aquí.

595
00:26:18,490 --> 00:26:20,250
>> Polo tanto, este non é o que
queremos facer, non?

596
00:26:20,250 --> 00:26:22,166
Porque eu non quero
actualizar a páxina enteira.

597
00:26:22,166 --> 00:26:24,970
I en vez quería volver
falsa, para curtocircuíto

598
00:26:24,970 --> 00:26:28,840
o comportamento por defecto do navegador, que
era, por suposto, para enviar a páxina.

599
00:26:28,840 --> 00:26:31,700
>> Entón, imos dar un ollo a un
marxinalidade mellor exemplo.

600
00:26:31,700 --> 00:26:33,920
Esta é unha versión don.

601
00:26:33,920 --> 00:26:36,680
E teña en conta o seguinte.

602
00:26:36,680 --> 00:26:39,150
Todo ben se non Grokar
todas as liñas de código.

603
00:26:39,150 --> 00:26:41,750
Pero o que é fundamentalmente diferente
sobre esta aplicación?

604
00:26:41,750 --> 00:26:44,690
Vou estipular se comporta o
mesmo, fai o mesmo.

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

606
00:26:49,320 --> 00:26:51,570
O que eu teño, obviamente, feito de forma diferente?

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

608
00:26:52,266 --> 00:26:53,182
>> Audiencia: [inaudível].

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

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

611
00:27:04,170 --> 00:27:08,620
Así, a función é definida differently--
Noutras palabras, ausente da forma,

612
00:27:08,620 --> 00:27:13,180
alí enriba na liña 7-- ou
ao contrario, a liña non 8--

613
00:27:13,180 --> 00:27:15,070
eu teño o atributo onsubmit.

614
00:27:15,070 --> 00:27:16,750
No exemplo anterior, eu tiña iso.

615
00:27:16,750 --> 00:27:18,530
E entón eu literalmente escribiu o meu código aquí.

616
00:27:18,530 --> 00:27:20,210
E entón eu dixo return false.

617
00:27:20,210 --> 00:27:22,180
E se non fregar
vostede xeito incorrecto, con todo,

618
00:27:22,180 --> 00:27:26,140
debe comezar a na medida
como, así como HTML,

619
00:27:26,140 --> 00:27:29,530
cando comezamos a mesturar a co-it
CSS en atributos de estilo,

620
00:27:29,530 --> 00:27:32,890
el só comezou a estar un pouco
confuso ou se sentir un pouco mal.

621
00:27:32,890 --> 00:27:35,020
>> Así mesmo aquí, se
comezar a tomar HTML,

622
00:27:35,020 --> 00:27:37,419
e entón automaticamente
plop algún código JavaScript

623
00:27:37,419 --> 00:27:40,460
no medio dunha cadea, é
non vai ser moi fácil de manter.

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

625
00:27:40,630 --> 00:27:43,690
Non é nin sequera evidente a primeira vista
Un lugar onde o código JavaScript.

626
00:27:43,690 --> 00:27:46,590
Polo tanto, sería realmente bo, como
un principio de mellor deseño,

627
00:27:46,590 --> 00:27:50,500
imos manter o noso HTML completo
separado da nosa Javascript.

628
00:27:50,500 --> 00:27:53,150
>> Entón, para iso, o que temos
feito aquí é o following--

629
00:27:53,150 --> 00:27:56,790
simplemente usar HTML só reserva.

630
00:27:56,790 --> 00:28:00,730
E así, nunha versión deste, todo
Eu teño é unha forma cunha identificación única.

631
00:28:00,730 --> 00:28:04,630
E entón para acá, estou aproveitando
dun recurso especial de JavaScript

632
00:28:04,630 --> 00:28:08,480
polo cal podo ter o que é
chamado unha función anónima.

633
00:28:08,480 --> 00:28:14,150
Así, verifícase que, se eu chamo
document.getElementById de 'demo'

634
00:28:14,150 --> 00:28:18,890
que é como me dar un punteiro para
este nó na miña árbore, o elemento do formulario,

635
00:28:18,890 --> 00:28:20,100
por así dicir.

636
00:28:20,100 --> 00:28:22,220
>> Agora, eu só sei de
sabendo un pouco de HTML

637
00:28:22,220 --> 00:28:26,330
agora estamos despois de ler algúns en liña
de referencia, que soporta un elemento de formulario

638
00:28:26,330 --> 00:28:29,950
unha morea de evento en listeners--
Noutras palabras, o rol de evento

639
00:28:29,950 --> 00:28:31,700
ouvintes que vimos hai pouco.

640
00:28:31,700 --> 00:28:35,950
Sei que a partir da lectura da documentación
que onsubmit é un evento válido

641
00:28:35,950 --> 00:28:38,520
oínte a un elemento de formulario.

642
00:28:38,520 --> 00:28:41,480
>> Entón, cando eu sei que,
é seguro para min facer

643
00:28:41,480 --> 00:28:45,390
o following-- obter ese nó
da árbore, o elemento do formulario,

644
00:28:45,390 --> 00:28:48,070
e acceda a chamada
propiedade onsubmit.

645
00:28:48,070 --> 00:28:49,880
Así, o punto significa só
esta é unha propiedade,

646
00:28:49,880 --> 00:28:52,180
como un valor especial para dentro del.

647
00:28:52,180 --> 00:28:55,590
E que tipo de datos son eu
asignación de aparentemente

648
00:28:55,590 --> 00:28:58,900
para OnSubmit, que é
efectivamente unha variable dentro

649
00:28:58,900 --> 00:29:01,010
dese nó na árbore?

650
00:29:01,010 --> 00:29:04,100
É un campo dentro desa estrutura.

651
00:29:04,100 --> 00:29:05,810
Cal é o tipo de datos?

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

653
00:29:07,030 --> 00:29:08,607
Así, verifícase que o PHP ten iso.

654
00:29:08,607 --> 00:29:10,440
E aínda que nós
non falar sobre iso,

655
00:29:10,440 --> 00:29:16,240
C tamén ten función punteiros, os
capacidade de pasar e asignar funcións

656
00:29:16,240 --> 00:29:18,330
como os propios valores das variables.

657
00:29:18,330 --> 00:29:20,280
E non imos
a retroceder ao C.

658
00:29:20,280 --> 00:29:23,250
Pero, por agora, parece que
no lado da man dereita aquí,

659
00:29:23,250 --> 00:29:26,260
aínda que pareza un pouco
funky, este medio, hey navegador,

660
00:29:26,260 --> 00:29:27,550
dáme unha función.

661
00:29:27,550 --> 00:29:30,560
Non vou molestar mesmo dando
-lle un nome, porque eu estou literalmente

662
00:29:30,560 --> 00:29:34,450
vai asignar imos chamalo
a dirección desta función

663
00:29:34,450 --> 00:29:35,994
inmediatamente a OnSubmit.

664
00:29:35,994 --> 00:29:39,160
Noutras palabras, o navegador, non
para saber o que esta función se chama.

665
00:29:39,160 --> 00:29:41,890
Só ten que saber
onde está na memoria.

666
00:29:41,890 --> 00:29:44,210
E así é suficiente só para
ten un signo igual alí

667
00:29:44,210 --> 00:29:48,240
e non se preocupe nomeando iso, como
foo ou cumprimento ou calquera outra palabra.

668
00:29:48,240 --> 00:29:50,150
E agora esta é só unha cousa estilística.

669
00:29:50,150 --> 00:29:53,100
Podería mover este chaveta
para as-- sorry-- seguinte liña

670
00:29:53,100 --> 00:29:54,750
como xeralmente facemos CS50.

671
00:29:54,750 --> 00:29:57,550
Pero en JavaScript, é
realmente estilisticamente común

672
00:29:57,550 --> 00:30:00,450
só para manter a chaveta, o
primeiro, en que a primeira liña.

673
00:30:00,450 --> 00:30:02,620
>> Pero a continuación, hai
nada interesante.

674
00:30:02,620 --> 00:30:05,830
Isto chaveta aberta só
demarca o inicio da miña función.

675
00:30:05,830 --> 00:30:09,320
A función é agora
idénticas, excepto que eu teño

676
00:30:09,320 --> 00:30:11,452
incluído o teito retorno
dentro desta función.

677
00:30:11,452 --> 00:30:13,160
Porque pasa out--
e só faría

678
00:30:13,160 --> 00:30:14,980
sei que isto de lectura
o documentation--

679
00:30:14,980 --> 00:30:19,740
que a función que atribúe
ao manipulador onsubmit retorna false,

680
00:30:19,740 --> 00:30:23,420
o explorador só sabe e acepta
non enviar o formulario para un servidor.

681
00:30:23,420 --> 00:30:27,210
Se volve true, presentará
para un servidor por razóns que veremos

682
00:30:27,210 --> 00:30:28,700
son útiles en só un momento.

683
00:30:28,700 --> 00:30:31,000
>> E entón o punto e coma despois
a chaveta alí só

684
00:30:31,000 --> 00:30:32,541
significa que eu son feito definindo a función.

685
00:30:32,541 --> 00:30:36,600
Vostede sabe o que chamar o máis axiña
como escoitar unha presentación.

686
00:30:36,600 --> 00:30:37,100
Todo ben.

687
00:30:37,100 --> 00:30:40,650
Isto aínda é indiscutibelmente tipo de feo.

688
00:30:40,650 --> 00:30:42,190
Entón, o que máis podemos facer?

689
00:30:42,190 --> 00:30:45,000
>> Ben, ao parecer, a continuación, en
versión dous, que é o last--

690
00:30:45,000 --> 00:30:46,780
e imos ollar para iso.

691
00:30:46,780 --> 00:30:49,850
Correndo o risco de facer
que máis fea, verifícase se

692
00:30:49,850 --> 00:30:52,160
que hai unha biblioteca en
o mundo chamado jQuery.

693
00:30:52,160 --> 00:30:54,900
E jQuery é un super-
biblioteca JavaScript populares

694
00:30:54,900 --> 00:30:57,930
iso é tan popular que a maioría
calquera JavaScript-- non é

695
00:30:57,930 --> 00:31:00,540
inusual que as persoas confunden
jQuery con JavaScript.

696
00:31:00,540 --> 00:31:01,070
Por que?

697
00:31:01,070 --> 00:31:04,990
En si ten moito JavaScript
formas de facer as coisas- verboso

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

699
00:31:07,820 --> 00:31:10,510
Acaba tendo moi
longas liñas de código.

700
00:31:10,510 --> 00:31:15,550
>> Así, un suxeito chamado John Resid,
que realmente funciona para unha startup

701
00:31:15,550 --> 00:31:18,630
ata estes días, saíu
con iso anos de biblioteca

702
00:31:18,630 --> 00:31:22,070
hai que moitas persoas teñen contribuído
a chamada jQuery que cambia

703
00:31:22,070 --> 00:31:23,449
A sintaxe do seguinte xeito.

704
00:31:23,449 --> 00:31:25,740
E só así xa viu iso,
Porque vai invariabelmente

705
00:31:25,740 --> 00:31:28,140
ver iso facendo un
proxecto final baseado na web,

706
00:31:28,140 --> 00:31:33,270
esta sería a forma equivalente a
execución desa mesma función usando

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

708
00:31:34,630 --> 00:31:36,680
>> Agora, en vez de provocación
o diferencia na súa totalidade,

709
00:31:36,680 --> 00:31:38,520
imos só ollar para algúns patróns.

710
00:31:38,520 --> 00:31:44,850
Esta sintaxe parece
cantas funcións anónimas

711
00:31:44,850 --> 00:31:49,584
ou funcións sen nome
ou funcións lambda AKA?

712
00:31:49,584 --> 00:31:50,190
Dous, non?

713
00:31:50,190 --> 00:31:52,690
E vostede sabe que, aínda que
non é super cómodo con iso,

714
00:31:52,690 --> 00:31:55,780
só polo feito de que el
di function () dúas veces.

715
00:31:55,780 --> 00:31:58,172
>> E parece que
o que este código é doing--

716
00:31:58,172 --> 00:32:01,255
e nós imos referirse a referencias en liña,
en definitiva, para axuda con iso.

717
00:32:01,255 --> 00:32:04,480
Isto só significa que, cando
o documento está listo,

718
00:32:04,480 --> 00:32:07,490
dalle cadastre-
a seguinte función

719
00:32:07,490 --> 00:32:12,064
como o manipulador de enviar ao HTML
elemento cuxa idea orixinal é de demostración.

720
00:32:12,064 --> 00:32:14,480
E entón, cando isto ocorre,
chamar estas dúas liñas de código.

721
00:32:14,480 --> 00:32:18,677
E esta é, traxicamente, unha máis
xeito detallada de dicir return false.

722
00:32:18,677 --> 00:32:21,510
E nós mencionados iso só porque
podes ver un código coma este en liña.

723
00:32:21,510 --> 00:32:23,140
E non é nada para se intimide con.

724
00:32:23,140 --> 00:32:26,057
Pero en vez diso, ten en conta que o que é
será común en JavaScript

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

726
00:32:26,765 --> 00:32:29,510
E é por iso que nós amosamos que de momento.

727
00:32:29,510 --> 00:32:30,010
Todo ben.

728
00:32:30,010 --> 00:32:32,730
Entón, sen deterse moi
moi en que a sintaxe,

729
00:32:32,730 --> 00:32:37,800
son hai dúbidas sobre
estes exemplos ou ideas ata agora?

730
00:32:37,800 --> 00:32:38,300
Todo ben.

731
00:32:38,300 --> 00:32:40,220
Entón, imos usar isto para algo útil.

732
00:32:40,220 --> 00:32:47,070
Facendo unha páxina web que di Ola,
así e así non é tan interesante,

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

734
00:32:47,830 --> 00:32:51,038
Este non vai ser bonito,
pero só pode facer algo útil.

735
00:32:51,038 --> 00:32:56,350
Déixeme volver ao meu directorio
aquí e abrir-se, dicir, fórmase 0.html.

736
00:32:56,350 --> 00:32:59,320
>> Entón supoño que este é o calouro
páxina de rexistro deportes internos

737
00:32:59,320 --> 00:33:01,780
sen CSS ou calquera sentido de deseño.

738
00:33:01,780 --> 00:33:05,404
E quero ir adiante e
rexístrate aquí cunha contrasinal.

739
00:33:05,404 --> 00:33:08,320
E eu vou aceptar os termos
e condicións e prema en Register.

740
00:33:08,320 --> 00:33:11,700
E agora o sitio di: "Vostede é
rexistrado! (Ben, non realmente.) "

741
00:33:11,700 --> 00:33:15,070
Que parece que funcionou, pero
deixe-me ir adiante e facer reload.

742
00:33:15,070 --> 00:33:18,720
>> E déixeme dicir, non, non fazê-
precisa do meu enderezo de correo-e real.

743
00:33:18,720 --> 00:33:21,820
Ou que nós imos só dicir correo alí.

744
00:33:21,820 --> 00:33:25,080
Contrasinal será, como, 12345.

745
00:33:25,080 --> 00:33:28,810
E entón, só porque eu son
un idiota, agora é 123456789.

746
00:33:28,810 --> 00:33:31,150
E eu non estou indo para comprobar a súa caixa.

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

748
00:33:31,850 --> 00:33:32,350
Todo ben.

749
00:33:32,350 --> 00:33:34,920
Polo tanto, hai varias oportunidades
para mellora aquí.

750
00:33:34,920 --> 00:33:39,070
E vostede sabe, é verán no pset
sete, que pode escribir code--

751
00:33:39,070 --> 00:33:41,890
e ten que escribir
código PHP-- para defender

752
00:33:41,890 --> 00:33:45,780
contra estes tipos de usuario
erros porque o usuario claramente

753
00:33:45,780 --> 00:33:46,790
non cooperou.

754
00:33:46,790 --> 00:33:49,680
E el ou ela non lle deu toda a
valores que quería ou mesmo en formato

755
00:33:49,680 --> 00:33:50,630
que quería.

756
00:33:50,630 --> 00:33:53,250
Entón podes ver en pset sete que
seguramente poderiamos ter algún

757
00:33:53,250 --> 00:33:55,680
as condicións que se
que o enderezo de correo-e

758
00:33:55,680 --> 00:33:59,450
non é un username@something.edu,
poderíamos só

759
00:33:59,450 --> 00:34:02,575
desculparse e pedir desculpas para o usuario
moito, como pode estar en pset sete.

760
00:34:02,575 --> 00:34:05,700
Ou se non ter comprobado que a caixa,
Acontece en PHP, pode detectar que,

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

762
00:34:06,200 --> 00:34:09,389
E, por suposto, as contrasinais
non corresponden como no register.php

763
00:34:09,389 --> 00:34:11,521
pset para sete, pode detectar iso.

764
00:34:11,521 --> 00:34:13,770
Pero iso é unha dor no
pescozo en que agora solicitar

765
00:34:13,770 --> 00:34:15,510
nós para percorrer todo o camiño para o servidor.

766
00:34:15,510 --> 00:34:17,053
O usuario é informado do erro.

767
00:34:17,053 --> 00:34:19,219
E, polo menos, a non ser que use
algunhas técnicas máis extravagantes,

768
00:34:19,219 --> 00:34:20,929
agora ten que facer clic na frecha cara atrás.

769
00:34:20,929 --> 00:34:23,300
Non sería bo, como
unha morea de sitios de hoxe,

770
00:34:23,300 --> 00:34:26,190
se tivese máis inmediato
feedback, instantaneamente?

771
00:34:26,190 --> 00:34:31,389
>> Noutras palabras, deixe-me ir á versión
un, que vai haber máis fermosa.

772
00:34:31,389 --> 00:34:33,469
Pero ten este recurso.

773
00:34:33,469 --> 00:34:39,590
Malan, 12345, 123456789, non
vai marcar a caixa, Register.

774
00:34:39,590 --> 00:34:41,330
Os contrasinais non coinciden.

775
00:34:41,330 --> 00:34:44,459
Así, aínda que ese emerxentes é ugly--
podemos substituír iso, finalmente,

776
00:34:44,459 --> 00:34:47,000
con algo como Bootstrap,
que podes ver no pset sete

777
00:34:47,000 --> 00:34:50,239
é un library-- moi popular fixen
detectar que os contrasinais non coinciden.

778
00:34:50,239 --> 00:34:50,739
Todo ben.

779
00:34:50,739 --> 00:34:52,530
Ben, deixe-me corrixir isto como o usuario.

780
00:34:52,530 --> 00:34:55,460
Deixe-me ir adiante e dicir 12345, 12345.

781
00:34:55,460 --> 00:34:57,780
Aínda non comprobando o acordo.

782
00:34:57,780 --> 00:35:00,210
Ten que aceptar a
Termos e condicións.

783
00:35:00,210 --> 00:35:01,760
Entón, por que?

784
00:35:01,760 --> 00:35:04,100
>> Se xa postulaba
que hai un camiño,

785
00:35:04,100 --> 00:35:07,260
e temos necesario vostede en
pset sete para detectar erros

786
00:35:07,260 --> 00:35:09,780
condicións como este
do lado do servidor, por que eu debería

787
00:35:09,780 --> 00:35:13,940
que preocuparse tamén en facelo en JavaScript?

788
00:35:13,940 --> 00:35:15,850
¿Que é un argumento en
favor de que engadindo

789
00:35:15,850 --> 00:35:18,760
está a piques de ver como some--
hai unha complexidade adicional.

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

791
00:35:23,610 --> 00:35:25,930
>> Quizais non hai ningunha cabeza.

792
00:35:25,930 --> 00:35:26,924
O que podería ser?

793
00:35:26,924 --> 00:35:27,840
Audiencia: [inaudível].

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

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

796
00:35:32,340 --> 00:35:33,530
Exploits potenciais.

797
00:35:33,530 --> 00:35:37,540
Entón, por suposto, se non está seguro
entrada do usuario errónea de que grande,

798
00:35:37,540 --> 00:35:40,170
quizais sexa tanto mellor se
non cheguen ao seu servidor.

799
00:35:40,170 --> 00:35:42,160
Quere empurrar cara atrás alí e
por exemplo, vostede probabelmente debería

800
00:35:42,160 --> 00:35:43,284
corrixir estes dous problemas.

801
00:35:43,284 --> 00:35:44,140
Pero iso é xusto.

802
00:35:44,140 --> 00:35:44,710
Que mais?

803
00:35:44,710 --> 00:35:45,626
>> Audiencia: [inaudível].

804
00:35:45,626 --> 00:35:47,970

805
00:35:47,970 --> 00:35:49,014
>> DAVID Malan: Yeah.

806
00:35:49,014 --> 00:35:51,680
Este código, como dixemos antes, é
interpretados no lado do cliente.

807
00:35:51,680 --> 00:35:53,846
Non molesta o servidor,
o que significa que non ten

808
00:35:53,846 --> 00:35:55,930
impacto de carga ou a capacidade do servidor.

809
00:35:55,930 --> 00:35:59,840
E agora, por pouco me vello,
iso non ten efecto significativo

810
00:35:59,840 --> 00:36:01,970
porque eu teño un usuario no momento.

811
00:36:01,970 --> 00:36:04,010
>> Pero se é calquera
web de tamaño decente,

812
00:36:04,010 --> 00:36:07,400
especialmente as grandes, como Facebook,
o máis que pode manter a xente fóra

813
00:36:07,400 --> 00:36:09,927
do servidor o mellor
porque un servidor, por suposto,

814
00:36:09,927 --> 00:36:12,510
ten só unha cantidade finita de RAM,
un número finito de gigahertz,

815
00:36:12,510 --> 00:36:16,340
un número finito de cousas
pode facer por unidade de tempo.

816
00:36:16,340 --> 00:36:19,170
Entón, se hai máis persoas en
o mundo bater o seu servidor,

817
00:36:19,170 --> 00:36:21,750
rexistrando accidentalmente
incorrectamente, tan ben se

818
00:36:21,750 --> 00:36:23,254
pode manter esta carga fóra do seu servidor.

819
00:36:23,254 --> 00:36:25,420
Ademais, especialmente nun móbil
device-- Se xa

820
00:36:25,420 --> 00:36:29,190
rexistrar en my.harvard ou
Netid de Yale ou similar,

821
00:36:29,190 --> 00:36:32,330
hai esta a latencia con unha morea de
sitios como aquel polo cal toma,

822
00:36:32,330 --> 00:36:34,110
como, a mínima segundo ou dous, ás veces.

823
00:36:34,110 --> 00:36:37,979
E entón, meu Deus, se escribe mal,
a continuación, ten que bater para atrás e refacelo lo.

824
00:36:37,979 --> 00:36:40,520
Polo tanto, non hai latencia, especialmente
en conexións de rede máis lentas.

825
00:36:40,520 --> 00:36:43,030
Pero JavaScript porque
é executado no cliente

826
00:36:43,030 --> 00:36:46,720
e non é preciso ir e volver
a través dunha internet lenta potencialmente

827
00:36:46,720 --> 00:36:49,780
conexión, pode comezar
o producto case instantáneo.

828
00:36:49,780 --> 00:36:50,760
>> Entón, imos ollar para iso.

829
00:36:50,760 --> 00:36:54,280
Déixeme abrir formulario 0 correo
mirar para o HTML aquí.

830
00:36:54,280 --> 00:36:56,040
E imos ver o que está a suceder.

831
00:36:56,040 --> 00:36:59,460
Esta é unha forma cuxo
acción é register.php.

832
00:36:59,460 --> 00:37:01,530
Eu só estou usando obteña
que eu podía ver a URL.

833
00:37:01,530 --> 00:37:05,030
Pero para contrasinais, nós seguramente queremos
para cambiar esta para deixar na realidade.

834
00:37:05,030 --> 00:37:06,910
Aquí está o campo de entrada de texto tipo.

835
00:37:06,910 --> 00:37:09,050
Aquí está outra entrada
campo de tipo de contrasinal.

836
00:37:09,050 --> 00:37:13,150
Aquí está, se nunca viu,
unha entrada de caixa tipo.

837
00:37:13,150 --> 00:37:15,250
>> Pero non hai JavaScript
aquí calquera.

838
00:37:15,250 --> 00:37:18,170
Este é só HTML que
vai register.php.

839
00:37:18,170 --> 00:37:21,020
Pero, nunha versión, onde
comezou a estar esas ventás emerxentes,

840
00:37:21,020 --> 00:37:23,010
imos ver o que realmente acontece aquí.

841
00:37:23,010 --> 00:37:26,757
Na versión un, o que
Vou see-- I

842
00:37:26,757 --> 00:37:29,340
penso que podería deixar o suficiente
con palabras suficientes, pero eu execute para fóra.

843
00:37:29,340 --> 00:37:35,180

844
00:37:35,180 --> 00:37:38,590
>> Na versión um-- alí imos nós.

845
00:37:38,590 --> 00:37:43,180
Na versión un, teña en conta o following--
e non é a mellor aplicación,

846
00:37:43,180 --> 00:37:44,420
pero é o meu primeiro.

847
00:37:44,420 --> 00:37:47,680
Teña en conta que por baixo do
caso, eu teño unha etiqueta script.

848
00:37:47,680 --> 00:37:49,430
E unha marca de script significa,
hey, navegador, aquí

849
00:37:49,430 --> 00:37:52,340
vén nalgún código,
normalmente, JavaScript.

850
00:37:52,340 --> 00:37:54,420
E agora, teña en conta o que eu estou facendo.

851
00:37:54,420 --> 00:37:59,070
En linha-- eu mal podo
ler ele-- liña 32, el di,

852
00:37:59,070 --> 00:38:01,420
var form-- entón me dea
unha variable chamada formulario.

853
00:38:01,420 --> 00:38:05,049
E, a continuación, obter document.getElementId
de "rexistro".

854
00:38:05,049 --> 00:38:05,590
Que é isto?

855
00:38:05,590 --> 00:38:07,290
Ben, deixe-me volver aquí enriba.

856
00:38:07,290 --> 00:38:11,510
E observen, ah, eu dei o elemento do formulario
unha idea arbitraria, pero descritivo

857
00:38:11,510 --> 00:38:13,050
da inscrición.

858
00:38:13,050 --> 00:38:16,820
Entón iso me dá unha variable que
permíteme para incorporarse este nodo,

859
00:38:16,820 --> 00:38:19,580
que rectángulo na árbore chamada formulario.

860
00:38:19,580 --> 00:38:24,460
medios form.onsubmit, hey navegador,
rexistrar un oínte de evento

861
00:38:24,460 --> 00:38:25,470
neste formulario.

862
00:38:25,470 --> 00:38:28,890
Noutras palabras, cando este formulario é
presentado, executa o seguinte código.

863
00:38:28,890 --> 00:38:30,810
Ela non precisa dun nome, porque
Por que ten que saber o nome?

864
00:38:30,810 --> 00:38:32,880
Só ten que saber
o que facer, ergo

865
00:38:32,880 --> 00:38:35,610
é unha función anónima ou lambda.

866
00:38:35,610 --> 00:38:37,632
E esa función é
todas estas liñas aquí.

867
00:38:37,632 --> 00:38:40,840
E agora, para ser honesto, aínda que
non podería escribir nunca JavaScript

868
00:38:40,840 --> 00:38:44,200
antes, non é máis que lóxica C e PHP.

869
00:38:44,200 --> 00:38:51,720
Polo tanto, se form.email.value == "" -
polo que se o campo de correo electrónico está en branco,

870
00:38:51,720 --> 00:38:54,980
berrar co usuario con "Debe
proporcionar o seu enderezo de correo electrónico. "

871
00:38:54,980 --> 00:38:58,980
Else if form.password.value
é berro en branco ao usuario,

872
00:38:58,980 --> 00:39:00,400
"Ten que proporcionar o seu contrasinal."

873
00:39:00,400 --> 00:39:04,240
>> Máis interesante, loxicamente,
se non form.password.value

874
00:39:04,240 --> 00:39:08,630
igual form.confirmation.value--
onde é que a confirmación veu?

875
00:39:08,630 --> 00:39:09,470
Déixeme volver.

876
00:39:09,470 --> 00:39:12,870
Ben, eu chamei esta entrada
campo aquí contrasinal.

877
00:39:12,870 --> 00:39:15,180
E eu chamei este aquí confirmación.

878
00:39:15,180 --> 00:39:17,850
Podería telo chamado
password dous ou calquera outra cousa.

879
00:39:17,850 --> 00:39:20,560
Eu só estou comprobando loxicamente
que estes dous son o mesmo.

880
00:39:20,560 --> 00:39:25,760
Else-- verifícase se este é o Sr Boole
novamente-- un valor booleano, a caixa de verificación.

881
00:39:25,760 --> 00:39:29,810
Entón, se eu digo, exclamación ponto--
Se non form.agreement.checked,

882
00:39:29,810 --> 00:39:31,820
berrar co usuario tamén.

883
00:39:31,820 --> 00:39:34,470
>> Polo tanto, esta sintaxe que podes ver é
moi común en JavaScript,

884
00:39:34,470 --> 00:39:35,970
onde ten esa notación pontilhada.

885
00:39:35,970 --> 00:39:37,460
Comeza cun obxecto aquí.

886
00:39:37,460 --> 00:39:41,430
Mergullo no máis profundo de un a
unha propiedade como contrasinal.

887
00:39:41,430 --> 00:39:43,280
E entón comeza a seu valor real.

888
00:39:43,280 --> 00:39:45,830
E unha vez máis, aquí é a entrada.

889
00:39:45,830 --> 00:39:47,310
Aquí é o contrasinal nome.

890
00:39:47,310 --> 00:39:50,860
E o seu valor é o que o
humana, en realidade, introducida.

891
00:39:50,860 --> 00:39:53,610
>> Así, en todos estes
casos, volvín falsa.

892
00:39:53,610 --> 00:39:55,800
Pero se non, I return true.

893
00:39:55,800 --> 00:39:58,030
E agora vemos unha
uso convincente de cando

894
00:39:58,030 --> 00:40:00,620
ía voltar false para
deter o que o servidor está realizando

895
00:40:00,620 --> 00:40:03,200
e facerlle escoller
novo ou escriba de novo.

896
00:40:03,200 --> 00:40:05,870
Se non, nós return true.

897
00:40:05,870 --> 00:40:08,585
>> E deixe-me presentar un
outra variante deste só

898
00:40:08,585 --> 00:40:13,140
para sementar algunha comprensión do mesmo.

899
00:40:13,140 --> 00:40:16,850
Ben, na versión 2 do presente, fórmase 2--
Eu vou facer iso cun aceno de man.

900
00:40:16,850 --> 00:40:19,920
Este é, para os curiosos,
a versión jQuery,

901
00:40:19,920 --> 00:40:23,330
aqueles de vostedes que pode querer
xogar con esa biblioteca particular.

902
00:40:23,330 --> 00:40:25,145
Pero imos start-- e dúbidas?

903
00:40:25,145 --> 00:40:29,230
Deixe-me facer unha pausa por un momento porque
que foi rápido e moito.

904
00:40:29,230 --> 00:40:32,610
>> Pero o bo aquí é que todos
do código é practicamente o mesmo.

905
00:40:32,610 --> 00:40:33,985
O novo material é o que é o don?

906
00:40:33,985 --> 00:40:35,115
Cales son eses rectángulos?

907
00:40:35,115 --> 00:40:35,990
Cales son eses nós?

908
00:40:35,990 --> 00:40:37,540
¿Que é unha función anónima?

909
00:40:37,540 --> 00:40:38,830
¿Que é un manipulador de eventos?

910
00:40:38,830 --> 00:40:43,480
Pero, por sorte, a maioría de que é só
círculo completo de, digamos, semana cero.

911
00:40:43,480 --> 00:40:43,980
Todo ben.

912
00:40:43,980 --> 00:40:46,070
Polo tanto, algo un pouco máis interesante?

913
00:40:46,070 --> 00:40:49,340
Ben, en primeiro lugar, deixe-me ir
adiante e abrir o Google Maps.

914
00:40:49,340 --> 00:40:53,360
E vai entender que, para un
momento, na segunda división,

915
00:40:53,360 --> 00:40:55,930
teña en conta o que acontece cando
I clic rápido abondo.

916
00:40:55,930 --> 00:40:59,720
E esa conexión en Harvard é tan
rápido que realmente non nota-lo.

917
00:40:59,720 --> 00:41:04,469
Pero o que tipo de especie de ver
se eu facer clic e arrastrar moi rápido?

918
00:41:04,469 --> 00:41:07,010
Aqueles de vós asistir en liña,
se diminuír isto para velocidade de 0,5x,

919
00:41:07,010 --> 00:41:09,640
podes ver iso mellor.

920
00:41:09,640 --> 00:41:13,550
>> O que estaba a suceder só
antes de que eu premidas e arrastradas?

921
00:41:13,550 --> 00:41:15,900
Déixeme probar aqui-- déixeme facer
outra cousa, como 90210.

922
00:41:15,900 --> 00:41:17,550
Imos aló.

923
00:41:17,550 --> 00:41:19,000
Iso foi moi rápido, tamén.

924
00:41:19,000 --> 00:41:22,460
Como case Disney World?

925
00:41:22,460 --> 00:41:23,190
Alí imos nós.

926
00:41:23,190 --> 00:41:23,690
Aceptar.

927
00:41:23,690 --> 00:41:26,030
O que viu nunha fracción de segundo?

928
00:41:26,030 --> 00:41:27,200
Só, como, prazas, non?

929
00:41:27,200 --> 00:41:28,930
Marcadores de posición para tellas?

930
00:41:28,930 --> 00:41:30,270
>> Ben, o que está pasando aquí?

931
00:41:30,270 --> 00:41:35,410
Google Maps é un bo exemplo de
esta tecnoloxía que se chama AJAX.

932
00:41:35,410 --> 00:41:38,510
E é aí onde imos comezar a
usar o JavaScript nun particularmente

933
00:41:38,510 --> 00:41:39,277
xeito sedutor.

934
00:41:39,277 --> 00:41:41,610
De volta ao día, houbo
esta web chamado MapQuest.

935
00:41:41,610 --> 00:41:44,120
E eu debería tomar unha
screenshot desta partir dos anos 1990,

936
00:41:44,120 --> 00:41:45,820
onde se quería
mirar para arriba aquí no mapa,

937
00:41:45,820 --> 00:41:48,590
vostede literalmente premer nunha frecha
Se na parte superior que lle mostre

938
00:41:48,590 --> 00:41:49,870
un cadrado diferente do mapa.

939
00:41:49,870 --> 00:41:51,790
Se quixese ir á esquerda,
premendo unha frecha que lle mostre

940
00:41:51,790 --> 00:41:53,210
un cadrado diferente do mapa.

941
00:41:53,210 --> 00:41:54,840
E algúns sitios aínda o fan hoxe.

942
00:41:54,840 --> 00:41:57,820
Pero aínda MapQuest obtivo
mellor, como Google Maps.

943
00:41:57,820 --> 00:42:01,880
>> Pola contra, o que é mellor estes
días é sitios que usan AJAX.

944
00:42:01,880 --> 00:42:04,510
AJAX-- tamén coñecido como
Asynchronous JavaScript e XML,

945
00:42:04,510 --> 00:42:08,370
que é só un xeito elegante de dicir
unha tecnoloxía ou técnica que

946
00:42:08,370 --> 00:42:14,200
permite que un navegador usando JavaScript
para facer solicitudes HTTP adicionais

947
00:42:14,200 --> 00:42:16,390
despois de que a páxina sexa cargado.

948
00:42:16,390 --> 00:42:17,479
Entón o que significa isto?

949
00:42:17,479 --> 00:42:19,270
Ben, sería tipo
de irritante en Gmail

950
00:42:19,270 --> 00:42:21,103
cada vez que quería
comprobar o correo,

951
00:42:21,103 --> 00:42:24,940
tiña, literalmente, prema Control-R ou
Command-R ou prema no botón Actualizar

952
00:42:24,940 --> 00:42:26,580
ea páxina danado enteiro ía actualizar.

953
00:42:26,580 --> 00:42:26,800
Non?

954
00:42:26,800 --> 00:42:28,460
Sería palpebrar branco
probablemente por segundo.

955
00:42:28,460 --> 00:42:30,043
Ía ver a barra de progreso estúpido.

956
00:42:30,043 --> 00:42:33,170
E só para ver se ten novos
e, a páxina web enteira ea URL

957
00:42:33,170 --> 00:42:34,580
está no tería que volver cargar.

958
00:42:34,580 --> 00:42:35,960
>> Pero iso non é o que pasa en Gmail.

959
00:42:35,960 --> 00:42:36,459
Non?

960
00:42:36,459 --> 00:42:40,300
Cando comeza un novo e-mail en
Gmail, o que pasa na pantalla?

961
00:42:40,300 --> 00:42:41,480
Isto só amosa-se, non?

962
00:42:41,480 --> 00:42:44,280
El só aparece Magic
como unha nova liña na táboa.

963
00:42:44,280 --> 00:42:47,030
Isto implica un realmente
cantidade razoable de complexidade.

964
00:42:47,030 --> 00:42:51,892
En realidade, se pensar sobre esta árbore,
que aínda que é sinxelo aquí,

965
00:42:51,892 --> 00:42:54,100
Gmail-- e eu tería que mirar
no código para ser sure--

966
00:42:54,100 --> 00:42:58,710
Probablemente ten unha táboa HTML ou que
unha lista desordenada que fai

967
00:42:58,710 --> 00:43:01,060
cada unha das súas caixas de entrada correos electrónicos como.

968
00:43:01,060 --> 00:43:04,050
>> E por iso, se imaxinar iso alí
é unha árbore na memoria cando está

969
00:43:04,050 --> 00:43:09,050
usando Gmail, que mira o tipo de tipo de
así, cando Google entende, ooh,

970
00:43:09,050 --> 00:43:12,770
ten un novo correo, iso non acontece
quere reconstruír a árbore enteira.

971
00:43:12,770 --> 00:43:16,430
Pola contra, ela quere atopar o nodo no
a árbore que representa a súa caixa de entrada

972
00:43:16,430 --> 00:43:18,580
e só tes que introducir un novo nodo.

973
00:43:18,580 --> 00:43:24,640
>> Entón, moi semellante ao PSET cinco, onde
tivo que introducir os nós nunha táboa hash,

974
00:43:24,640 --> 00:43:28,410
Do mesmo xeito que Google, vía
Código JavaScript que ten escrito,

975
00:43:28,410 --> 00:43:31,890
Traverse esta árbore, descubrir onde
é a parte caixa de entrada da xanela,

976
00:43:31,890 --> 00:43:33,440
e, a continuación, engadir unha nova liña.

977
00:43:33,440 --> 00:43:37,460
E unha nova liña significa só unha
ou máis novos nós nunha árbore.

978
00:43:37,460 --> 00:43:41,340
>> E así AJAX é esta técnica
que permite exactamente isto.

979
00:43:41,340 --> 00:43:44,440
Unha vez que visitou unha URL,
con todo tolo tempo é,

980
00:43:44,440 --> 00:43:46,472
e unha vez que a páxina ten
procede, pode aínda

981
00:43:46,472 --> 00:43:48,430
coller máis datos a partir da
internet-- se é

982
00:43:48,430 --> 00:43:52,460
un correo electrónico ou unha tella dun map--
agarralo lo detrás das escenas

983
00:43:52,460 --> 00:43:55,290
e, a continuación, introduza o na páxina
de xeito que o ser humano non ten realmente

984
00:43:55,290 --> 00:43:56,910
ten que esperar por iso.

985
00:43:56,910 --> 00:43:58,980
>> Facebook Messenger funciona do mesmo xeito.

986
00:43:58,980 --> 00:44:01,562
Calquera número de outros websites--
Oh, de feito, incluso iso.

987
00:44:01,562 --> 00:44:04,270
É dicir, que é, a verdade, tipo de
un irritante presentan estes días.

988
00:44:04,270 --> 00:44:07,500
Se eu comezar a buscar por este cats--
é unha especie de experiencia do usuario horrible.

989
00:44:07,500 --> 00:44:08,990
El só comeza a buscar-me.

990
00:44:08,990 --> 00:44:10,050
Ben, o que está facendo?

991
00:44:10,050 --> 00:44:12,920
O URL non cambiou
dende que eu comecei a escribir.

992
00:44:12,920 --> 00:44:17,330
Pero o que está a suceder en todo o
wire-- OK, hmm interesante.

993
00:44:17,330 --> 00:44:20,470
O que está a suceder en todo o
fío aquí só queda máis estraño.

994
00:44:20,470 --> 00:44:21,090
>> Aceptar.

995
00:44:21,090 --> 00:44:24,670
Entón deixe-me ir adiante e inspeccionar
elemento e vaia á guía Rede

996
00:44:24,670 --> 00:44:27,040
e tentar facelo
técnico e menos sobre gatos.

997
00:44:27,040 --> 00:44:32,595
Mentres tecleo literalmente gatos
e- o que está pasando

998
00:44:32,595 --> 00:44:37,710
per-- eu non vou prema iso.

999
00:44:37,710 --> 00:44:38,210
Todo ben.

1000
00:44:38,210 --> 00:44:44,280
Entón, aquí abaixo, o que está a suceder cada
xa que escribir un carácter aparentemente?

1001
00:44:44,280 --> 00:44:45,000
Como, de baixo nivel?

1002
00:44:45,000 --> 00:44:47,860
O que está a suceder con cada un destes
caracteres estou escribindo no meu teclado?

1003
00:44:47,860 --> 00:44:48,359
Si?

1004
00:44:48,359 --> 00:44:50,950
Audiencia: [inaudível].

1005
00:44:50,950 --> 00:44:52,340
>> DAVID Malan: Exactamente.

1006
00:44:52,340 --> 00:44:55,600
Cada un destes personaxes é
indo ao Google, un de cada vez.

1007
00:44:55,600 --> 00:44:58,490
Están construíndo unha cadea
en que representa o servidor

1008
00:44:58,490 --> 00:44:59,936
todo o que eu escriba ata agora.

1009
00:44:59,936 --> 00:45:01,810
E cada vez que eu tecleo
outro personaxe, que

1010
00:45:01,810 --> 00:45:04,530
usar o seu salsa secreto dun
buscar algoritmo e descubrir,

1011
00:45:04,530 --> 00:45:07,370
quere dicir esta páxina gato
ou esta páxina gato ou similares?

1012
00:45:07,370 --> 00:45:10,620
Entón, nalgún sentido, el me dá un
mellor experiencia en que eu nin

1013
00:45:10,620 --> 00:45:11,860
precisa para completar o meu pensamento.

1014
00:45:11,860 --> 00:45:14,440
E, de feito, é unha útil
cousa, autocomplete en xeral.

1015
00:45:14,440 --> 00:45:17,690
Se os seus algoritmos son bos o suficiente
e as miñas investigacións son moi obvias,

1016
00:45:17,690 --> 00:45:19,300
Eu non teño que escribir a palabra completa.

1017
00:45:19,300 --> 00:45:22,110
Eles van me dicir o que
é en realidade estou buscando.

1018
00:45:22,110 --> 00:45:25,940
Entón, o que Google chama instantánea
investigación está só usando AJAX,

1019
00:45:25,940 --> 00:45:30,820
usando un código que lles permite solicitar
contido adicional a través dun navegador web

1020
00:45:30,820 --> 00:45:34,026
nos bastidores usando este
nova linguaxe, JavaScript.

1021
00:45:34,026 --> 00:45:35,400
Polo tanto, temos un par de minutos do final.

1022
00:45:35,400 --> 00:45:37,710
E deixe-me chamar meu amigo
Colton ata o escenario,

1023
00:45:37,710 --> 00:45:40,090
xa que parecía
particularmente divertido última vez

1024
00:45:40,090 --> 00:45:42,290
a introdución dunha tecnoloxía
que algúns de vós

1025
00:45:42,290 --> 00:45:44,769
teñan manifestado interese
en para proxectos finais.

1026
00:45:44,769 --> 00:45:47,310
Nós pensamos que sería divertido para traer
Se un voluntario, aínda que, hoxe

1027
00:45:47,310 --> 00:45:50,074
para amosar-lle un complemento para
este que permite você-- si,

1028
00:45:50,074 --> 00:45:50,990
Vin iso de primeira man.

1029
00:45:50,990 --> 00:45:52,900
Imos cara arriba.

1030
00:45:52,900 --> 00:45:53,560
Moi ben feito.

1031
00:45:53,560 --> 00:45:55,035
Bo traballo.

1032
00:45:55,035 --> 00:45:57,410
Eu estou indo a proxectar esta en
a pantalla en só un momento.

1033
00:45:57,410 --> 00:45:58,150
Cal é o seu nome para todos?

1034
00:45:58,150 --> 00:45:59,180
>> EFA: Eu son EFA.

1035
00:45:59,180 --> 00:45:59,410
>> DAVID Malan: Etha?

1036
00:45:59,410 --> 00:45:59,785
>> EFA: EFA.

1037
00:45:59,785 --> 00:46:00,160
>> DAVID Malan: EFA?

1038
00:46:00,160 --> 00:46:00,730
>> EFA: Yeah.

1039
00:46:00,730 --> 00:46:01,250
>> DAVID Malan: Pracer en velo.

1040
00:46:01,250 --> 00:46:01,600
Todo ben.

1041
00:46:01,600 --> 00:46:02,590
Déixeme ver se pronto.

1042
00:46:02,590 --> 00:46:04,423
Achegue-se sobre a
medio con Colton aquí.

1043
00:46:04,423 --> 00:46:07,050
Que Colton ten nas súas mans
hoxe é un control remoto.

1044
00:46:07,050 --> 00:46:10,440
Entón en vez de só estar alí nun
mundo tridimensional mirando arredor

1045
00:46:10,440 --> 00:46:14,080
Colton como fixo agora pode EFA
de feito, pé subindo,

1046
00:46:14,080 --> 00:46:16,689
abaixo, esquerda e dereita no seu
Nintendo ou Xbox controlador.

1047
00:46:16,689 --> 00:46:18,230
EFA: eu vou caer fóra do escenario.

1048
00:46:18,230 --> 00:46:20,500
DAVID Malan: eu vou
ir aproximadamente aquí.

1049
00:46:20,500 --> 00:46:21,991
Pero iso é un risco.

1050
00:46:21,991 --> 00:46:22,490
Aceptar.

1051
00:46:22,490 --> 00:46:25,690
Entón vai adiante e poñer os en.

1052
00:46:25,690 --> 00:46:29,315
Deixe-me ir adiante e
cambiar a pantalla aquí.

1053
00:46:29,315 --> 00:46:30,670
Déixeme diminúa as luces.

1054
00:46:30,670 --> 00:46:32,780
E Colton, déixeme
veña estar ao seu lado.

1055
00:46:32,780 --> 00:46:35,520
>> Quere explicar aquí
co micrófono o que estamos facendo?

1056
00:46:35,520 --> 00:46:36,380
Aquí vas.

1057
00:46:36,380 --> 00:46:37,280
>> Colton: Claro.

1058
00:46:37,280 --> 00:46:39,980
Entón, agora somos
cargar o Oculus,

1059
00:46:39,980 --> 00:46:43,070
Eu creo que non operan operating--
sistema, pero o programa principal, onde

1060
00:46:43,070 --> 00:46:46,630
podes acceder todos os xogos e
aplicacións que están na súa biblioteca.

1061
00:46:46,630 --> 00:46:50,060
Entón, agora, debe dicir
Preme no touchpad para comezar.

1062
00:46:50,060 --> 00:46:53,430
Touchpad será na
lado dereito do auriculares.

1063
00:46:53,430 --> 00:46:54,569
Entón vai adiante e tap--

1064
00:46:54,569 --> 00:46:55,110
EFA: Oh, cara.

1065
00:46:55,110 --> 00:46:56,443
DAVID Malan: Si, alí vai.

1066
00:46:56,443 --> 00:47:00,340

1067
00:47:00,340 --> 00:47:02,460
A calidade EFA está a ver
é moito máis elevada calidade.

1068
00:47:02,460 --> 00:47:03,831
Este é só o WiFi aquí.

1069
00:47:03,831 --> 00:47:05,580
Colton: Entón, o que está
Vai querer facer

1070
00:47:05,580 --> 00:47:08,350
é mirar para arriba
dereita da pantalla.

1071
00:47:08,350 --> 00:47:10,420
Yep, aquel xogo na parte superior dereita.

1072
00:47:10,420 --> 00:47:14,780
E entón cando está seleccionando
el, toque novo no touchpad.

1073
00:47:14,780 --> 00:47:17,010
Creo que as súas Dreadhalls.

1074
00:47:17,010 --> 00:47:20,820
E entón aquí está A-- aquí, deixe-
me soster os seus lentes para ti.

1075
00:47:20,820 --> 00:47:24,420

1076
00:47:24,420 --> 00:47:25,790
>> Entón, eu só lle deu un controlador.

1077
00:47:25,790 --> 00:47:28,886
Entón, agora pode controlar o xogo.

1078
00:47:28,886 --> 00:47:30,510
Pode moverse e cousas así.

1079
00:47:30,510 --> 00:47:31,968
Entón vai adiante e ollar para arriba ata o cumio.

1080
00:47:31,968 --> 00:47:33,640
Debería ver un novo xogo.

1081
00:47:33,640 --> 00:47:36,310
Entón vai adiante e pode facelo.

1082
00:47:36,310 --> 00:47:39,320
Agora, ten que ser capaz de controlar
Se co controlador,

1083
00:47:39,320 --> 00:47:43,860
así, canto máis rápido
o xogo leva-se aquí.

1084
00:47:43,860 --> 00:47:46,356
Isto pode ser un pouco asustado.

1085
00:47:46,356 --> 00:47:47,300
>> EFA: Agora me di.

1086
00:47:47,300 --> 00:47:50,132
Aceptar.

1087
00:47:50,132 --> 00:47:51,080
>> Colton: Todo ben.

1088
00:47:51,080 --> 00:47:52,650
Entón, confirme que pode moverse.

1089
00:47:52,650 --> 00:47:52,750
Aceptar.

1090
00:47:52,750 --> 00:47:53,583
Pode moverse.

1091
00:47:53,583 --> 00:47:54,300
Perfecto.

1092
00:47:54,300 --> 00:47:56,470
Entón, se ollar para abaixo, ten un mapa.

1093
00:47:56,470 --> 00:47:58,170
Mapa mostra onde está.

1094
00:47:58,170 --> 00:47:59,720
Podes ollar arredor da sala.

1095
00:47:59,720 --> 00:48:01,440
Pode virar completamente.

1096
00:48:01,440 --> 00:48:02,128
Si, exactamente.

1097
00:48:02,128 --> 00:48:02,627
Date a volta.

1098
00:48:02,627 --> 00:48:05,370

1099
00:48:05,370 --> 00:48:07,125
>> Entón mire para a súa esquerda.

1100
00:48:07,125 --> 00:48:09,875
Eu creo que hai algo que podes
incorporarse o barril no cuarto.

1101
00:48:09,875 --> 00:48:11,709
>> EFA: ¿Como obter o
Guión para fóra do camiño?

1102
00:48:11,709 --> 00:48:12,375
Colton: Olle para arriba.

1103
00:48:12,375 --> 00:48:12,980
Basta ollar para arriba.

1104
00:48:12,980 --> 00:48:13,480
Todo ben.

1105
00:48:13,480 --> 00:48:13,765
Alí vai.

1106
00:48:13,765 --> 00:48:15,181
Agora vai adiante e só virar.

1107
00:48:15,181 --> 00:48:21,460

1108
00:48:21,460 --> 00:48:24,620
Entón mire máis á súa esquerda.

1109
00:48:24,620 --> 00:48:25,530
Mantéñase movendo á esquerda.

1110
00:48:25,530 --> 00:48:26,960
Continúe buscando esquerda.

1111
00:48:26,960 --> 00:48:27,541
Continúe indo.

1112
00:48:27,541 --> 00:48:28,040
Si.

1113
00:48:28,040 --> 00:48:28,720
>> EFA: Ah, iso xeito.

1114
00:48:28,720 --> 00:48:29,261
>> Colton: Si.

1115
00:48:29,261 --> 00:48:30,999
Camiño cara a el co controlador.

1116
00:48:30,999 --> 00:48:31,540
Alí vai.

1117
00:48:31,540 --> 00:48:32,790
Agora debe dicir buscalo.

1118
00:48:32,790 --> 00:48:33,360
Alí vai.

1119
00:48:33,360 --> 00:48:34,290
Recollelo.

1120
00:48:34,290 --> 00:48:35,550
Todo ben.

1121
00:48:35,550 --> 00:48:38,286
Agora, imos saír desta sala.

1122
00:48:38,286 --> 00:48:42,209
Dalle camiñar ata a porta.

1123
00:48:42,209 --> 00:48:45,000
Entón está indo a hold-- di
Manteña o botón para forzalo aberto.

1124
00:48:45,000 --> 00:48:46,333
Entón vai adiante e Manteña o botón.

1125
00:48:46,333 --> 00:48:48,250
Yep, forzándoo a abrir.

1126
00:48:48,250 --> 00:48:48,750
Todo ben.

1127
00:48:48,750 --> 00:48:49,410
Bo traballo.

1128
00:48:49,410 --> 00:48:50,826
Agora estamos camiñando para fóra da sala.

1129
00:48:50,826 --> 00:48:56,970

1130
00:48:56,970 --> 00:49:01,366
Entón eu vou deixar o resto
para ti e ver o que descubrir.

1131
00:49:01,366 --> 00:49:02,865
EFA: Eu non estou indo na sala escura.

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
Agora eu teño que ir polo corredor escuro?

1135
00:49:09,314 --> 00:49:10,785
OK, eu vou volver [inaudível].

1136
00:49:10,785 --> 00:49:15,520

1137
00:49:15,520 --> 00:49:16,270
Colton: Todo ben.

1138
00:49:16,270 --> 00:49:17,560
Algúns máis elementos para incorporarse.

1139
00:49:17,560 --> 00:49:19,370
Parece que algunhas moedas.

1140
00:49:19,370 --> 00:49:22,242
Esa é unha gazua.

1141
00:49:22,242 --> 00:49:24,200
Entón, se atopa unha bloqueado
porta, pode usar isto.

1142
00:49:24,200 --> 00:49:27,755

1143
00:49:27,755 --> 00:49:28,380
Está con medo?

1144
00:49:28,380 --> 00:49:29,371
>> EFA: Aínda non.

1145
00:49:29,371 --> 00:49:29,871
Colton: Aceptar.

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
Basta finxir que é
de feito, de pé alí.

1149
00:49:37,330 --> 00:49:39,580
E se virar circundar--
ten que se acostumar con iso.

1150
00:49:39,580 --> 00:49:40,752
Pero ten sentido.

1151
00:49:40,752 --> 00:49:43,960
DAVID Malan: E mentres segue a EFA
xogar, xa que podería facelo o día,

1152
00:49:43,960 --> 00:49:45,381
todos podemos punta dos pés para fóra aquí.

1153
00:49:45,381 --> 00:49:48,130
Pero temos outros dous compañeiros,
se desexa vir e xogar.

1154
00:49:48,130 --> 00:49:49,980
Se non, imos ver
Ata a próxima mércores.

1155
00:49:49,980 --> 00:49:51,354
Grazas ao noso voluntario hoxe.

1156
00:49:51,354 --> 00:49:52,101
[Aplausos]

1157
00:49:52,101 --> 00:49:54,506

1158
00:49:54,506 --> 00:49:57,392
>> [MUSIC - "Seinfeld TEMA"]

1159
00:49:57,392 --> 00:49:58,222

1160
00:49:58,222 --> 00:50:00,180
COLUMNA 1: Ben, eu son
poñendo un novo PL montar en.

1161
00:50:00,180 --> 00:50:01,800
Eu só cambiou o OLPF--

1162
00:50:01,800 --> 00:50:03,980
>> COLUMNA 2: Entón, o que
exactamente está facendo?

1163
00:50:03,980 --> 00:50:07,063
>> COLUMNA 1: Ben, cada un dos these--
aquí, eu vou amosar-lle este aquí.

1164
00:50:07,063 --> 00:50:08,690
Pode velo aquí.

1165
00:50:08,690 --> 00:50:09,510
>> COLUMNA 3: Eu creo que eu son bo con estes.

1166
00:50:09,510 --> 00:50:09,933
Queres máis?

1167
00:50:09,933 --> 00:50:11,325
>> COLUMNA 4: Non, eu estou ben. [Inaudível].

1168
00:50:11,325 --> 00:50:12,200
>> COLUMNA 3: Non, [inaudível].

1169
00:50:12,200 --> 00:50:12,700
Teña algún.

1170
00:50:12,700 --> 00:50:21,165

1171
00:50:21,165 --> 00:50:22,290
COLUMNA 1: A cor diferente.

1172
00:50:22,290 --> 00:50:22,890
COLUMNA 2: Aceptar.

1173
00:50:22,890 --> 00:50:26,690
COLUMNA 1: Entón, en definitiva o que
fai é que axusta a cor de--