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

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

3
00:00:10,030 --> 00:00:11,580
>> DAVID MALAN: Este es CS50.

4
00:00:11,580 --> 00:00:12,880
Este es el comienzo de la semana nueve.

5
00:00:12,880 --> 00:00:15,797
Y esto es lo que tendría
sido 200o cumpleaños de Mr. Boole.

6
00:00:15,797 --> 00:00:17,630
Así que esto es los becarios
a la que aludimos hemos

7
00:00:17,630 --> 00:00:21,800
bastantes veces sobre el uso de
Variables booleanas verdaderas y falsas,

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

9
00:00:22,910 --> 00:00:25,270
Y esta era de Google
Homenaje a él hoy.

10
00:00:25,270 --> 00:00:26,489
Él habría cumplido 200.

11
00:00:26,489 --> 00:00:28,280
Así que si desea
únase a nosotros para el almuerzo CS50,

12
00:00:28,280 --> 00:00:30,279
echar un vistazo a el enlace
en la página web del curso.

13
00:00:30,279 --> 00:00:33,580
Y esas caras y amigos como
éstos le esperan aquí en Cambridge.

14
00:00:33,580 --> 00:00:35,360
Rostros como estos te esperan en New Haven.

15
00:00:35,360 --> 00:00:37,800
Y, de hecho, en Ken
New Haven amablemente hizo

16
00:00:37,800 --> 00:00:41,594
lo que se llama un GIF animado de Eli
aquí en una reciente lunch-- un GIF es todavía

17
00:00:41,594 --> 00:00:44,260
otro formato de archivo gráfico,
con la que estás familiar-- que

18
00:00:44,260 --> 00:00:46,300
se ve un poco algo como esto.

19
00:00:46,300 --> 00:00:48,179
Así que sólo una secuencia de-- Aceptar.

20
00:00:48,179 --> 00:00:49,720
Nadie aquí en Cambridge está riendo.

21
00:00:49,720 --> 00:00:51,720
Sin embargo, en New Haven, este
es muy divertido, ¿verdad?

22
00:00:51,720 --> 00:00:52,350
Correcto.

23
00:00:52,350 --> 00:00:53,940
>> Así que únete a nosotros allí.

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

25
00:00:55,900 --> 00:00:59,480
si usted es un estudiante de segundo año o estudiante de primer año even--
o incluso el pensamiento junior-- de decisiones

26
00:00:59,480 --> 00:01:01,563
un interruptor en el ordenador
ciencia, saber que no voy

27
00:01:01,563 --> 00:01:04,440
ser un CS asesorando feria de este
Miércoles, poco después de la clase

28
00:01:04,440 --> 00:01:08,040
a las 4:00 PM en el ordenador
edificio de ciencias Maxwell Dworkin.

29
00:01:08,040 --> 00:01:11,890
Vamos a poner esto en el curso de
sitio web para mañana, también.

30
00:01:11,890 --> 00:01:14,430
Donuts, me han dicho, se servirán.

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

32
00:01:15,180 --> 00:01:18,790
Historia-- tan gracioso que estaba metiendo
alrededor en el Internet,

33
00:01:18,790 --> 00:01:23,575
y me encontré con algunos viejos archivos
de mi antiguo sitio web.

34
00:01:23,575 --> 00:01:25,950
Y resulta fuera-- alrededor de este
tiempo, parece muy oportuna

35
00:01:25,950 --> 00:01:28,910
ya que tengo entendido que las elecciones de la UC
están a punto de prepararse de nuevo.

36
00:01:28,910 --> 00:01:32,230
Así que corrí para la UC, perdido miserablemente.

37
00:01:32,230 --> 00:01:34,770
Y tal vez esto fue en parte por qué.

38
00:01:34,770 --> 00:01:37,600
Así que este era mi sitio web en el tiempo.

39
00:01:37,600 --> 00:01:40,477
Por alguna razón, pensé que era
una buena idea, antes de decirle a la gente

40
00:01:40,477 --> 00:01:43,310
lo que mi plataforma era y por qué
debe votar por mí, que tienen

41
00:01:43,310 --> 00:01:47,770
hacer clic para entrar al descubrir que
información, que en retrospectiva es

42
00:01:47,770 --> 00:01:48,660
un poco escalofriante.

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

44
00:01:50,910 --> 00:01:53,140
>> Pero ciertamente no lo hizo
ayudar a mi campaña.

45
00:01:53,140 --> 00:01:56,874
También me di cuenta de que por la alta
año-- tuve este calendario Muppet.

46
00:01:56,874 --> 00:01:58,540
Muppets eran especie de moda en aquel entonces.

47
00:01:58,540 --> 00:01:59,456
O tal vez no lo eran.

48
00:01:59,456 --> 00:02:01,790
Tuve un calendario Muppet en aquel entonces.

49
00:02:01,790 --> 00:02:04,860
Y pensé que sería genial para nombrar
mi equipo en la red de Harvard

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

51
00:02:07,460 --> 00:02:10,370
En ese momento, todos teníamos única
nombres de host identificables.

52
00:02:10,370 --> 00:02:13,150
Y usted podría elegir alguna vanidad
nombrar en lugar de su propio nombre.

53
00:02:13,150 --> 00:02:15,580
Y me fui con hombre rana por alguna razón.

54
00:02:15,580 --> 00:02:19,040
>> Y entonces me started-- Pasé mucho
de tiempo accediendo a estos enlaces

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

56
00:02:20,280 --> 00:02:24,690
Y esta fue mi página acerca,
que ahora tipo de parece adorable.

57
00:02:24,690 --> 00:02:28,210
Pero también da testimonio de solo
hasta qué punto la tecnología ha llegado.

58
00:02:28,210 --> 00:02:30,310
Quiero decir, en su día,
un 486 era algo.

59
00:02:30,310 --> 00:02:34,090
En estos días, es super, super,
super lento y bien menos

60
00:02:34,090 --> 00:02:36,216
lo que podría tener en su
propios bolsillos en estos días.

61
00:02:36,216 --> 00:02:38,465
Hay más allí que
que es aún más vergonzoso.

62
00:02:38,465 --> 00:02:39,770
Así que voy a dejar las cosas así.

63
00:02:39,770 --> 00:02:42,640
Pero esa fue mi primera
incursión en web-- oh, no.

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

65
00:02:43,180 --> 00:02:47,000
Mi primera incursión real de programación web
Fue este sitio, que simplemente se me olvidó.

66
00:02:47,000 --> 00:02:50,620
En algún momento, aprendí a
hacer que las imágenes de fondo repetitivas.

67
00:02:50,620 --> 00:02:55,260
Y así encontré este mosaico efectiva,
como jugador de hockey, el fútbol y el golf

68
00:02:55,260 --> 00:02:58,040
pelota, o sea lo que sea
para el sitio web Frosh mensajes instantáneos.

69
00:02:58,040 --> 00:03:01,390
Y esto era en realidad, realmente la
primer proyecto basado en la web que tomé en--

70
00:03:01,390 --> 00:03:03,880
Creo que tal vez estudiante de segundo año
año, año-- Junior

71
00:03:03,880 --> 00:03:07,622
después de tomar CS50 y CS51, uno
de las clases de seguimiento en común.

72
00:03:07,622 --> 00:03:09,330
Me di cuenta en la búsqueda
a través de los archivos

73
00:03:09,330 --> 00:03:12,150
que uno de mis sucesores y
amigos, Lee, una especie de cambiar

74
00:03:12,150 --> 00:03:13,480
los derechos de autor para sus adentros.

75
00:03:13,480 --> 00:03:17,520
Pero esto era en verdad algo que
Que debería poseer la vergüenza a.

76
00:03:17,520 --> 00:03:19,370
Pero en ese momento, este
fue el primer sitio web,

77
00:03:19,370 --> 00:03:22,220
como dije hace unas semanas,
por el cual estudiantes de primer año podría

78
00:03:22,220 --> 00:03:24,350
inscribirse en deportes intramuros aquí.

79
00:03:24,350 --> 00:03:27,950
Y así resulta que
que las imágenes de fondo

80
00:03:27,950 --> 00:03:29,530
así no son una buena idea.

81
00:03:29,530 --> 00:03:31,840
Pero la web era nuevo, y
todos estábamos experimentando.

82
00:03:31,840 --> 00:03:34,310
Y esto es lo que
al parecer lo hizo en su momento.

83
00:03:34,310 --> 00:03:34,810
Correcto.

84
00:03:34,810 --> 00:03:38,020
Así que sin más preámbulos, cambiamos
engranajes hoy para darle, en realidad,

85
00:03:38,020 --> 00:03:42,250
la última pieza que le puede resultar
especialmente útil para proyectos fin de carrera

86
00:03:42,250 --> 00:03:44,780
sino también que comenzará a
hacer que la web en todo el mundo entero

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

88
00:03:46,680 --> 00:03:49,460
De hecho, vamos a introducir
una más lenguaje de programación

89
00:03:49,460 --> 00:03:52,474
llamada JavaScript que es similar
y diferente de diferentes maneras

90
00:03:52,474 --> 00:03:54,140
de las lenguas que hemos visto hasta el momento.

91
00:03:54,140 --> 00:03:55,807
>> Así C, recordar, es este lenguaje compilado.

92
00:03:55,807 --> 00:03:57,473
Tienes que ejecutar a través de un compilador.

93
00:03:57,473 --> 00:03:59,810
Usted recibe el código fuente de oposición
código, o ceros y unos.

94
00:03:59,810 --> 00:04:03,000
Y esos son ceros y unos que
su 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 el contrario, no es
un lenguaje compilado.

97
00:04:06,610 --> 00:04:08,772
Es un qué?

98
00:04:08,772 --> 00:04:09,980
Es un lenguaje interpretado.

99
00:04:09,980 --> 00:04:11,750
Así que hay algún programa
llamado un intérprete que

100
00:04:11,750 --> 00:04:13,708
tiene que leer it-- arriba
abajo, de izquierda a derecha-

101
00:04:13,708 --> 00:04:16,519
y averiguar lo que todos
su sintaxis hace y significa,

102
00:04:16,519 --> 00:04:20,200
si se trata de un bucle o una condición
o cualquier otro número de la programación

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

104
00:04:20,740 --> 00:04:22,210
Así que eso es un lenguaje interpretado.

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

106
00:04:23,910 --> 00:04:26,440
Y HTML ni siquiera es un
lenguaje de programación.

107
00:04:26,440 --> 00:04:28,110
Nos llamamos qué?

108
00:04:28,110 --> 00:04:31,650
Un lenguaje de marcado, que es justo
una especie de forma elegante de decir que

109
00:04:31,650 --> 00:04:35,820
no tiene construcciones de programación como
vimos incluso en el día de Scratch.

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

111
00:04:36,720 --> 00:04:37,920
No hay condiciones.

112
00:04:37,920 --> 00:04:40,820
Realmente es una lengua
sobre el marcado de los datos

113
00:04:40,820 --> 00:04:43,620
y formatearlo o
la estructuración de alguna manera.

114
00:04:43,620 --> 00:04:46,147
>> CSS, por su parte, de manera similar
no es un lenguaje de programación.

115
00:04:46,147 --> 00:04:47,730
Es incluso más orientada estéticamente.

116
00:04:47,730 --> 00:04:50,470
Y le permite ordenar de afinar
cosas como el tamaño y los colores de la fuente

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

118
00:04:51,850 --> 00:04:52,370
Luego tuvimos

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

120
00:04:53,160 --> 00:04:56,010
Así SQL es de hecho una programación
lenguaje en cierto sentido,

121
00:04:56,010 --> 00:04:59,330
aunque a medida
específicamente a bases de datos.

122
00:04:59,330 --> 00:05:03,347
Pero a pesar de que sólo le presentamos
seleccionar e insertar y borrar y actualizar

123
00:05:03,347 --> 00:05:05,430
y un par de otros,
Resulta que en realidad se puede

124
00:05:05,430 --> 00:05:07,380
escribir funciones o
procedimientos, ya que son

125
00:05:07,380 --> 00:05:11,270
llamada, en SQL que se ven y actúan
absolutamente como funciones PHP y C.

126
00:05:11,270 --> 00:05:12,390
Así que sabemos que los existen.

127
00:05:12,390 --> 00:05:15,348
Pero ni siquiera nos molestamos con ellos
como acabamos rascamos la superficie aquí.

128
00:05:15,348 --> 00:05:18,600
Y luego JavaScript, el último de
nuestras lenguas introdujeron formalmente.

129
00:05:18,600 --> 00:05:21,029
Así JavaScript, también, es
un lenguaje interpretado.

130
00:05:21,029 --> 00:05:23,070
Y los que están familiarizados, lo hacen
quiere distinguirlo

131
00:05:23,070 --> 00:05:26,960
con alguna característica
tanto desde C y PHP?

132
00:05:26,960 --> 00:05:28,300
¿Qué lo hace diferente?

133
00:05:28,300 --> 00:05:29,650
>> AUDIENCIA: No es compilado.

134
00:05:29,650 --> 00:05:29,930
>> DAVID MALAN: Diga otra vez?

135
00:05:29,930 --> 00:05:31,200
>> AUDIENCIA: No es compilado.

136
00:05:31,200 --> 00:05:31,930
>> DAVID MALAN: No es compilado.

137
00:05:31,930 --> 00:05:33,450
Así que, también, se interpreta.

138
00:05:33,450 --> 00:05:34,760
Así que no es compilado.

139
00:05:34,760 --> 00:05:37,210
Pero eso hace que sea un poco como PHP.

140
00:05:37,210 --> 00:05:39,545
Pero sigue siendo diferente de
PHP de alguna manera sorprendente,

141
00:05:39,545 --> 00:05:40,920
al menos en la forma en que usaremos.

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

143
00:05:41,205 --> 00:05:41,940
>> AUDIENCIA: Se ejecuta en el cliente.

144
00:05:41,940 --> 00:05:44,000
>> DAVID MALAN: Corre
del lado del cliente, por lo general.

145
00:05:44,000 --> 00:05:47,190
Eso es de hecho el distintivo
característico para nosotros en este momento.

146
00:05:47,190 --> 00:05:51,170
C fue del lado del servidor, en el sentido
que hicimos todo en IDE CS50.

147
00:05:51,170 --> 00:05:53,630
PHP ha sido hasta ahora
del lado del servidor en la medida

148
00:05:53,630 --> 00:05:56,550
ya que, también, se pone interpreted--
no compilado, pero interpreted--

149
00:05:56,550 --> 00:06:00,690
dentro CS50 IDE, que por supuesto es
sólo un servidor o servidores en la nube.

150
00:06:00,690 --> 00:06:03,070
>> Pero JavaScript, incluso
aunque te vas

151
00:06:03,070 --> 00:06:07,000
para empezar a escribir para, digamos, pset
ocho y tal vez definitiva projects-- eres

152
00:06:07,000 --> 00:06:09,620
ir a la derecha en
IDE CS50 y guardarlo

153
00:06:09,620 --> 00:06:14,760
en los archivos dentro de IDE CS50, CS50 IDE
y, a su vez, los servidores de la nube

154
00:06:14,760 --> 00:06:19,160
en el que se aloja, no van
interpretar o ejecutar su código.

155
00:06:19,160 --> 00:06:23,880
Más bien, va a ser enviados en
forma inalterada hasta el navegador.

156
00:06:23,880 --> 00:06:26,990
Y es entonces va a ser IE
o Chrome o Firefox o Safari

157
00:06:26,990 --> 00:06:30,697
o lo que sea que realmente interpreta
que, de arriba a abajo, de izquierda a derecha.

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

159
00:06:32,780 --> 00:06:36,110
es que JavaScript está del lado del cliente
y PHP, por ejemplo,

160
00:06:36,110 --> 00:06:37,690
ha sido del lado del servidor.

161
00:06:37,690 --> 00:06:40,920
Ahora, esto tiene implicaciones interesantes
para, al igual que, la propiedad intelectual

162
00:06:40,920 --> 00:06:42,660
y que en realidad se puede ver su código.

163
00:06:42,660 --> 00:06:44,860
Y, en efecto, se puede ir
en la web y ver más

164
00:06:44,860 --> 00:06:47,530
cualquier código que alguien tiene
escrito en JavaScript.

165
00:06:47,530 --> 00:06:50,230
A veces es más fácil de leer,
a veces es ofuscado.

166
00:06:50,230 --> 00:06:52,550
Pero más sobre esto en su debido tiempo.

167
00:06:52,550 --> 00:06:57,530
>> Así JavaScript, lo suficientemente bien, es
muy similares, sintácticamente, a C.

168
00:06:57,530 --> 00:06:59,364
Y mucho como PHP,
no hay función principal.

169
00:06:59,364 --> 00:07:02,113
Si quieres empezar a escribir
Código de JavaScript, como se verá hoy,

170
00:07:02,113 --> 00:07:03,270
que acaba de empezar a escribirlo.

171
00:07:03,270 --> 00:07:06,910
Pero es, verás, en particular
útil en el contexto de los navegadores web.

172
00:07:06,910 --> 00:07:09,820
Sin embargo, mi pequeño
disclaimer-- generalmente antes les hablé

173
00:07:09,820 --> 00:07:13,790
era decir que pueda cada vez
uso hoy en día del lado del servidor JavaScript

174
00:07:13,790 --> 00:07:17,655
utilizando un marco de fantasía llamada Node.js
que algunas de las aplicaciones del CS50 propios

175
00:07:17,655 --> 00:07:18,280
están escritos en.

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

177
00:07:20,640 --> 00:07:24,140
Pero vamos a centrarse en
Del lado del cliente JavaScript aquí en adelante.

178
00:07:24,140 --> 00:07:26,750
>> Así que aquí es un conjunto de condiciones en PHP.

179
00:07:26,750 --> 00:07:29,350
Lo sentimos, en-- realidad, que
declaración, también es correcto.

180
00:07:29,350 --> 00:07:32,200
Este es también un conjunto de
condiciones de JavaScript.

181
00:07:32,200 --> 00:07:35,560
Sintácticamente, es
idéntica a C y PHP.

182
00:07:35,560 --> 00:07:39,040
Expresiones del Sr. Boole son,
Del mismo modo, sintácticamente

183
00:07:39,040 --> 00:07:41,190
idéntica a ambos C y PHP.

184
00:07:41,190 --> 00:07:44,100
También contamos con interruptores en
JavaScript que parecen idénticos.

185
00:07:44,100 --> 00:07:46,350
Tenemos para bucles que son
estructurado de forma idéntica,

186
00:07:46,350 --> 00:07:48,140
mientras bucles, hacer mientras bucles.

187
00:07:48,140 --> 00:07:49,980
>> Éste es un poco diferente.

188
00:07:49,980 --> 00:07:53,120
PHP tenía la para cada construcción
que podría estar usando

189
00:07:53,120 --> 00:07:55,320
o va a utilizar en el conjunto de procesadores siete, tal vez.

190
00:07:55,320 --> 00:07:59,460
JavaScript tiene esta versión especial de
para donde usted dice, literalmente, algo

191
00:07:59,460 --> 00:08:03,864
como por clave variable de objeto, que
Es una manera muy sucinta de decir,

192
00:08:03,864 --> 00:08:06,780
si tengo una objeto-- y vamos a
hablar de éstos a su vez en un moment--

193
00:08:06,780 --> 00:08:10,370
y quiero iterar sobre todos
de los pares de claves de valor en el interior,

194
00:08:10,370 --> 00:08:13,620
Yo no tengo que encontrar la manera de
índice numéricamente con cero, uno,

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

196
00:08:14,580 --> 00:08:15,900
>> Literalmente, lo que puedo decir esto.

197
00:08:15,900 --> 00:08:20,740
Y en cada iteración, JavaScript
me voy a actualizar la clave variable

198
00:08:20,740 --> 00:08:24,810
ser la primera clave, a continuación, la siguiente tecla,
entonces la siguiente clave, entonces la siguiente tecla,

199
00:08:24,810 --> 00:08:25,510
etcetera.

200
00:08:25,510 --> 00:08:30,000
Y puedo llegar a su valor mediante el tratamiento
un objeto en JavaScript, como veremos,

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

202
00:08:32,584 --> 00:08:35,750
De hecho, si finalmente envuelto su
importa alrededor de lo que es una matriz asociativa

203
00:08:35,750 --> 00:08:40,140
en PHP, se puede pensar en ello por ahora como
idéntica a un objeto en JavaScript.

204
00:08:40,140 --> 00:08:42,030
Pero eso es un poco de
una simplificación excesiva.

205
00:08:42,030 --> 00:08:47,230
>> Las matrices se ven, lo suficientemente bien, idéntica
a PHP a excepción de un carácter.

206
00:08:47,230 --> 00:08:51,425
Hay una cosa que falta aquí
que vimos la semana pasada con PHP.

207
00:08:51,425 --> 00:08:52,050
Lo que se omite?

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

209
00:08:53,310 --> 00:08:54,090
Ningún signo de dólar.

210
00:08:54,090 --> 00:08:56,240
Así que estamos de vuelta a un
más mundo normal, donde

211
00:08:56,240 --> 00:08:58,050
variables que no tienen signos de dólar.

212
00:08:58,050 --> 00:09:00,810
Pero lo hace prefijo ellos
con var, por lo general.

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

214
00:09:02,230 --> 00:09:06,440
Y al igual que PHP es vagamente
typed-- cual hay tipos,

215
00:09:06,440 --> 00:09:10,120
hay números y cadenas
y carrozas, etc. forth--

216
00:09:10,120 --> 00:09:11,570
JavaScript de manera similar tiene tipos.

217
00:09:11,570 --> 00:09:15,470
Pero está vagamente escrito en que el
los programadores no tienen que especificarlos.

218
00:09:15,470 --> 00:09:18,980
Sólo tenemos que ser conscientes
que existen diferentes tipos.

219
00:09:18,980 --> 00:09:21,690
>> Variables, meanwhile-- aquí es como
podríamos declarar "hola, mundo"

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

221
00:09:22,230 --> 00:09:24,890
Observe que es idéntica a
PHP pero ningún signo de dólar.

222
00:09:24,890 --> 00:09:27,120
Y esto es algo que va a
empezar a ver más hoy,

223
00:09:27,120 --> 00:09:30,990
por el que usted tiene un objeto
con claves y valores.

224
00:09:30,990 --> 00:09:32,990
Y si quieres probar
inferir de última week--

225
00:09:32,990 --> 00:09:34,730
la sintaxis es un poco diferente.

226
00:09:34,730 --> 00:09:39,740
Pero un poco de cordura check-- cuántos
teclas hace este objeto parece tener?

227
00:09:39,740 --> 00:09:40,850
Así que veo cuatro.

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

229
00:09:43,560 --> 00:09:44,680
>> Por lo que es en realidad dos.

230
00:09:44,680 --> 00:09:47,260
Así que esta es una colección
de dos pares clave-valor.

231
00:09:47,260 --> 00:09:49,820
La clave es símbolo cuyo valor es FB.

232
00:09:49,820 --> 00:09:52,620
La clave es el precio cuyo valor es 101.53.

233
00:09:52,620 --> 00:09:54,230
Así que estos son dos pares clave-valor.

234
00:09:54,230 --> 00:09:58,120
Y recuerda, PHP-- y esto es nuevo
sólo una especie de diferencia sintáctica.

235
00:09:58,120 --> 00:10:00,170
No es todo lo que
intelectualmente interesante.

236
00:10:00,170 --> 00:10:04,610
PHP podría haber escrito este mismo
cosa como cita follows--, es igual.

237
00:10:04,610 --> 00:10:06,730
Y puedo cambiar estos para corchetes.

238
00:10:06,730 --> 00:10:11,240
Y entonces puedo cambiar esto a
una palabra citado, "precio".

239
00:10:11,240 --> 00:10:12,500
Y entonces yo no uso dos puntos.

240
00:10:12,500 --> 00:10:15,060
¿Qué es lo que uso la semana pasada?

241
00:10:15,060 --> 00:10:18,290
Sí, el signo igual
flecha notación funky.

242
00:10:18,290 --> 00:10:21,470
>> Y luego hice lo mismo aquí.

243
00:10:21,470 --> 00:10:23,580
Lo mismo aquí.

244
00:10:23,580 --> 00:10:24,240
Y eso es todo.

245
00:10:24,240 --> 00:10:27,752
Así que es muy bien si esto no tiene
realmente hundido en la memoria solo

246
00:10:27,752 --> 00:10:29,960
sin embargo, porque es realmente
intelectualmente interesante.

247
00:10:29,960 --> 00:10:31,660
Es simplemente diferencias sintácticas.

248
00:10:31,660 --> 00:10:33,230
Pero las ideas son exactamente los mismos.

249
00:10:33,230 --> 00:10:35,910
Dentro de esta variable
cita en JavaScript

250
00:10:35,910 --> 00:10:39,020
es un conjunto de pares clave-valor,
uno de los cuales es símbolo, uno de los cuales

251
00:10:39,020 --> 00:10:39,690
es el precio.

252
00:10:39,690 --> 00:10:42,340
Y puedo llegar a esos valores
con la siguiente sintaxis.

253
00:10:42,340 --> 00:10:46,280
Al igual que en PHP, por lo que pude
hacer algo como-- dejar

254
00:10:46,280 --> 00:10:48,590
Me hago esta caja un poco más grande.

255
00:10:48,590 --> 00:10:52,750
Al igual que en PHP, por lo que pude
hacer esto-- oh, maldita sea.

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

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

258
00:10:56,350 --> 00:11:00,800
>> Al igual que en PHP-- OK, vamos a
sólo tiene que utilizar las notas del presentador.

259
00:11:00,800 --> 00:11:06,010
Al igual que en PHP, por lo que pueda
hacer $ cita ["símbolo"] cotización $,

260
00:11:06,010 --> 00:11:08,860
y esto me
el valor de "símbolo".

261
00:11:08,860 --> 00:11:12,800
En JavaScript, que va a ser
idénticos, por lo que yo sólo puedo hacer esto.

262
00:11:12,800 --> 00:11:14,850
La única cosa que es
falta es el signo de dólar.

263
00:11:14,850 --> 00:11:17,470
>> Así que muy bien lo suficiente, entonces, no hay
no tanto la sintaxis nueva.

264
00:11:17,470 --> 00:11:21,025
Así que lo que hoy nos centramos en, en realidad, es
algunas de las ideas y de las aplicaciones.

265
00:11:21,025 --> 00:11:22,900
Y la primera tales
aplicación que usted puede ser

266
00:11:22,900 --> 00:11:26,090
haber visto si se zambulló en pset
siete ya es esta sintaxis.

267
00:11:26,090 --> 00:11:28,980
Así que en conjunto de procesadores siete, si tienes
visto o no visto todavía,

268
00:11:28,980 --> 00:11:33,570
saben que hay un archivo que le damos
llamaste config.json-- JavaScript

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

270
00:11:34,661 --> 00:11:35,160
¿Por qué?

271
00:11:35,160 --> 00:11:39,540
Queríamos ser capaces de ofrecerle
una plantilla con algunos pares clave-valor.

272
00:11:39,540 --> 00:11:44,290
Queríamos ser capaces de darle una lista
del huésped, el nombre del servidor.

273
00:11:44,290 --> 00:11:46,710
Queríamos darle una
marcador de posición para el nombre de usuario

274
00:11:46,710 --> 00:11:48,210
y un marcador de posición para la contraseña.

275
00:11:48,210 --> 00:11:49,410
Si usted no está viendo
esto, sin embargo, no se preocupe.

276
00:11:49,410 --> 00:11:51,340
Más sobre esto en conjunto de procesadores de siete
[? spec. ?] Y entonces,

277
00:11:51,340 --> 00:11:53,173
Obviamente, queremos que
llenar el las tareas pendientes

278
00:11:53,173 --> 00:11:55,310
porque cuando usted registra en
CS50 IDE, cada uno de ustedes

279
00:11:55,310 --> 00:11:57,630
tener su propio nombre de usuario y contraseña.

280
00:11:57,630 --> 00:12:00,910
>> Así que podríamos haber usado una media docena
o formatos de archivo más diferentes.

281
00:12:00,910 --> 00:12:02,940
Podíamos haber utilizado un archivo .txt.

282
00:12:02,940 --> 00:12:04,570
Podríamos utilizado un archivo CSV.

283
00:12:04,570 --> 00:12:06,745
Podríamos haber usado un
Archivo INI, un archivo XML,

284
00:12:06,745 --> 00:12:09,370
un montón más siglas que
es posible que no haya oído hablar nunca.

285
00:12:09,370 --> 00:12:11,244
Es un poco arbitraria
al final del día.

286
00:12:11,244 --> 00:12:16,030
Pero muy popular en estos días es un texto
formato llamado JSON-- JavaScript Object

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

288
00:12:18,460 --> 00:12:20,890
Es un poco críptico,
notar los patrones.

289
00:12:20,890 --> 00:12:24,180
Se empieza con un rizado abierta
corsé, y terminas con el mismo.

290
00:12:24,180 --> 00:12:26,550
Dentro de eso es algo.

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

292
00:12:27,920 --> 00:12:30,580
Así que este es un objeto que estoy
mirando en la pantalla aquí

293
00:12:30,580 --> 00:12:33,690
que tiene una clave, que tiene un valor.

294
00:12:33,690 --> 00:12:37,610
Y justo inferir en base a la
patrón anterior, ¿cuál es la clave aquí?

295
00:12:37,610 --> 00:12:39,790
Base de datos, lo que hay que
la izquierda del colon.

296
00:12:39,790 --> 00:12:43,500
>> Ahora, el valor pasa a ser
a múltiples líneas de esta vez.

297
00:12:43,500 --> 00:12:46,760
Pero el valor comienza con un rizado
prepararse y termina con una llave.

298
00:12:46,760 --> 00:12:49,480
Entonces, ¿qué propondría usted es el
tipo del valor de base de datos?

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

300
00:12:52,160 --> 00:12:54,670
Un diccionario o, simplemente más
sucintamente, un objeto.

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

302
00:12:55,170 --> 00:13:00,010
Esta es una especie de estructura de datos que
puede utilizar otras estructuras dentro de sí mismo.

303
00:13:00,010 --> 00:13:02,750
Así que si todo esto estamos
llamar a un objeto-- y un objeto

304
00:13:02,750 --> 00:13:07,101
es sólo un montón de clave-valor pairs-- la
valor de la propia base de datos es un objeto.

305
00:13:07,101 --> 00:13:10,350
El valor de la base de datos tiene un montón
de pares de valores clave, el primero de los cuales

306
00:13:10,350 --> 00:13:13,130
es anfitrión, a continuación, el nombre, entonces
nombre de usuario, contraseña y luego,

307
00:13:13,130 --> 00:13:17,550
cada uno de cuyos valores, por su parte, es
sólo una cadena aburrida entre comillas dobles.

308
00:13:17,550 --> 00:13:19,770
>> Así que incluso si eso no es
súper clara todavía,

309
00:13:19,770 --> 00:13:22,740
sabemos que esto es sólo una
norma manera, bastante aburrida

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

311
00:13:25,190 --> 00:13:27,700
Pero los errores comunes que
podría hacer, incluso en pset siete,

312
00:13:27,700 --> 00:13:32,120
son pequeñas cosas estúpidas, como si
omitir accidentalmente la coma allí.

313
00:13:32,120 --> 00:13:34,900
Eso va a resultar en el archivo
no necesariamente siendo legible.

314
00:13:34,900 --> 00:13:38,191
Si omite accidentalmente cosas como la
cotizaciones, no va a ser fácil de leer.

315
00:13:38,191 --> 00:13:41,654
Así que es un formato de archivo muy quisquillosa,
pero es uno que es muy común.

316
00:13:41,654 --> 00:13:44,820
Y nos toca a utilizarlo, a pesar de que
no utiliza ningún JavaScript otra manera,

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

318
00:13:46,330 --> 00:13:46,860
>> Correcto.

319
00:13:46,860 --> 00:13:48,110
Así que recuerde esta imagen.

320
00:13:48,110 --> 00:13:51,657
Hablamos, en HTML, que
el código podría tener este aspecto.

321
00:13:51,657 --> 00:13:54,740
Este es el HyperText Markup Language
[Inaudible] para apenas "hola, mundo".

322
00:13:54,740 --> 00:13:57,570
Pero entonces nos propusimos un
tiempo atrás que si ayuda,

323
00:13:57,570 --> 00:14:00,210
es posible que desee comenzar a pensar
sobre esto ya como un árbol.

324
00:14:00,210 --> 00:14:03,730
De hecho, la indentación que
utilizar sólo por el bien de la legibilidad

325
00:14:03,730 --> 00:14:05,610
o por causa de su estilo
la izquierda tipo lata de

326
00:14:05,610 --> 00:14:10,040
traducirse en este árbol, donde
tener algún nodo raíz especial que vamos a

327
00:14:10,040 --> 00:14:16,860
genéricamente denominado documento, debajo de la cual
es el elemento HTML raíz o etiqueta, HTML,

328
00:14:16,860 --> 00:14:19,980
que luego tiene dos
los niños, la cabeza y el cuerpo.

329
00:14:19,980 --> 00:14:21,750
>> Y luego, a su vez, la cabeza tiene un título.

330
00:14:21,750 --> 00:14:23,440
Y el título tiene un valor de texto.

331
00:14:23,440 --> 00:14:26,130
Y el cuerpo tiene igualmente un valor de texto.

332
00:14:26,130 --> 00:14:29,220
Así que si estás cómodo diciendo
eso sí, usted podría tomar este código HTML

333
00:14:29,220 --> 00:14:32,080
y hacer un dibujo como
esto, el lado derecho

334
00:14:32,080 --> 00:14:35,910
es un modelo mental agradable porque ahora
que tenemos JavaScript, una programación

335
00:14:35,910 --> 00:14:39,960
lenguaje que los navegadores pueden
ejecutar e interpretar para usted,

336
00:14:39,960 --> 00:14:42,690
resulta que lo
estamos a punto de hacerlo en el código

337
00:14:42,690 --> 00:14:45,320
es empezar a manipular esta
estructura de árbol en la memoria.

338
00:14:45,320 --> 00:14:47,070
No tenemos para construir
el árbol en memoria.

339
00:14:47,070 --> 00:14:49,880
No tenemos que hacer una especie de
estructura de datos y cinco de estilo pset

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

341
00:14:50,650 --> 00:14:54,610
El navegador, muy bien lo suficiente, al
interpretar superior HTML a abajo,

342
00:14:54,610 --> 00:14:58,600
izquierda o derecha, es, literalmente, va a
nosotros entregar el equivalente de un puntero

343
00:14:58,600 --> 00:15:00,840
a todo aquel árbol de forma gratuita.

344
00:15:00,840 --> 00:15:02,150
Lo hace todo el trabajo duro.

345
00:15:02,150 --> 00:15:05,520
Eso es lo que Mozilla y Apple
y otros han hecho por nosotros.

346
00:15:05,520 --> 00:15:09,400
>> Y con JavaScript vamos a
ser capaz de controlar y cambiar y hacer

347
00:15:09,400 --> 00:15:12,910
cosas interesantes a
ese árbol, de lo contrario conocida

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

349
00:15:15,880 --> 00:15:17,110
¿Qué tipo de cosas?

350
00:15:17,110 --> 00:15:19,030
Bueno, resulta que
en JavaScript, no hay

351
00:15:19,030 --> 00:15:22,800
esta larga lista de
eventos que pueden tener lugar.

352
00:15:22,800 --> 00:15:26,330
Y no hemos usado realmente tan
palabra desde la semana cero y pset

353
00:15:26,330 --> 00:15:28,240
cero cuando hablábamos de Scratch.

354
00:15:28,240 --> 00:15:31,390
La mayoría de ustedes probablemente no utilizaron
un evento en su proyecto de Scratch.

355
00:15:31,390 --> 00:15:33,850
Pero se puede recordar
el simple Marco Polo

356
00:15:33,850 --> 00:15:36,760
ejemplo, donde teníamos dos
sprites, uno de ellos dijo, Marco.

357
00:15:36,760 --> 00:15:40,180
El otro de los que luego, al escuchar
y oyendo ese evento, dijo Polo.

358
00:15:40,180 --> 00:15:42,080
Si no es así, no dude en
mirar hacia atrás que hacia atrás.

359
00:15:42,080 --> 00:15:44,450
>> Pero esto es sólo para
decir, y usted puede clase de

360
00:15:44,450 --> 00:15:47,730
inferir a partir de los nombres de éstos
cosas, JavaScript, resulta que,

361
00:15:47,730 --> 00:15:53,200
nos va a dar una forma de escuchar
para el ratón que va abajo o el ratón subiendo

362
00:15:53,200 --> 00:15:57,920
o ir tecla de abajo o la tecla
subir o onselect onsubmit

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

364
00:15:59,740 --> 00:16:03,060
En otras palabras, cualquier acción física
que un ser humano puede tomar con un navegador

365
00:16:03,060 --> 00:16:08,210
lo que hacen todos los días, puede escribir
código para que la escucha de los eventos

366
00:16:08,210 --> 00:16:10,220
y luego hace algo apropiado.

367
00:16:10,220 --> 00:16:14,130
>> Por ejemplo, si utiliza Google Maps,
¿qué pasa si se hace clic y se mueven

368
00:16:14,130 --> 00:16:16,250
el ratón, por lo general?

369
00:16:16,250 --> 00:16:17,758
Si hace clic y arrastra?

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

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

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

373
00:16:22,200 --> 00:16:23,159
El mapa comienza a moverse.

374
00:16:23,159 --> 00:16:25,616
Así que usted puede especie de ver lo que hay
aquí, lo que es de allá.

375
00:16:25,616 --> 00:16:27,130
¿Y cómo Google implementar eso?

376
00:16:27,130 --> 00:16:29,421
Bueno, presumiblemente, son
usando un par de estos eventos

377
00:16:29,421 --> 00:16:31,720
oyentes, uno que
dice, escuche el ratón

378
00:16:31,720 --> 00:16:35,410
down-- así que cuando el usuario físicamente
empuja su trackpad o su ratón

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

380
00:16:36,010 --> 00:16:38,350
Y luego estamos buscando
algo así como el movimiento

381
00:16:38,350 --> 00:16:41,145
o algún otro evento que
nos permite capturar arrastre.

382
00:16:41,145 --> 00:16:45,910
Y de hecho, de arrastre es similar en este
dot dot dot lista de posibles opciones.

383
00:16:45,910 --> 00:16:49,140
>> Así que esto va a ser un poderoso
manera de empezar a responder al usuario

384
00:16:49,140 --> 00:16:52,824
incluso antes de que él o ella realmente hace clic
algo explícita como presentar.

385
00:16:52,824 --> 00:16:55,240
Pero vamos a introducir
un par de temas para llegar allí.

386
00:16:55,240 --> 00:16:58,570
Pero primero, vamos a la transición
hasta cierto código real.

387
00:16:58,570 --> 00:17:01,450
Así que me voy a ir
por delante y abrir dom-0,

388
00:17:01,450 --> 00:17:05,869
que es un ejemplo muy sencillo
aquí que si el zoom en simplemente

389
00:17:05,869 --> 00:17:08,500
tiene esta entrada aquí para mí.

390
00:17:08,500 --> 00:17:12,410
Y yo voy a seguir adelante y escribir
"David" a mi nombre y haga clic en Enviar.

391
00:17:12,410 --> 00:17:17,940
>> Y entonces, aunque especie de bajo precio, me
tener este símbolo que aparece que dice:

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

393
00:17:19,244 --> 00:17:21,740
Así que esto es una especie de
como nuestro "hola, mundo"

394
00:17:21,740 --> 00:17:25,150
que hicimos hace un tiempo atrás en C y
incluso en PHP porque he dinámicamente

395
00:17:25,150 --> 00:17:26,310
emitida mi nombre.

396
00:17:26,310 --> 00:17:28,230
Yo puedo hacer el nombre de alguien más aquí.

397
00:17:28,230 --> 00:17:31,240
Yo podría simplemente cambiar esto,
como, Hannah, haga clic en Enviar.

398
00:17:31,240 --> 00:17:33,780
Y, en efecto, los pequeños cambios emergentes.

399
00:17:33,780 --> 00:17:36,650
>> Ahora, los pop-ups son uno de los
mayoría de las características de abuso de la web.

400
00:17:36,650 --> 00:17:38,520
Y, de hecho, de vuelta en
los bloqueadores de ventanas emergentes día

401
00:17:38,520 --> 00:17:40,820
se puso de moda, ya que
iría a algún website--

402
00:17:40,820 --> 00:17:43,604
tal vez un lugar-- cuestionable
que de repente

403
00:17:43,604 --> 00:17:46,020
iniciar salpicando la pantalla
con un montón de ventanas emergentes.

404
00:17:46,020 --> 00:17:49,700
Y así esta habilidad para que aparezca
ventanas en frente del usuario

405
00:17:49,700 --> 00:17:52,372
no ha sido especialmente
bien recibido por la humanidad.

406
00:17:52,372 --> 00:17:54,080
Así que por eso se ve
este prevenir cosa,

407
00:17:54,080 --> 00:17:55,706
que sólo hace toda esta cosa fea.

408
00:17:55,706 --> 00:17:57,996
Así que vamos a necesitar un
mejor manera de pedir al usuario.

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

410
00:17:59,350 --> 00:18:03,320
Así que sólo intuitivamente, lo que
parece estar sucediendo aquí?

411
00:18:03,320 --> 00:18:07,870
Sigo adelante y haga clic en Enviar, y
entonces algo está sucediendo, con claridad.

412
00:18:07,870 --> 00:18:12,870
Pero lo que no está sucediendo que sucedió
la semana pasada cualquier momento hice clic en Enviar?

413
00:18:12,870 --> 00:18:15,940
Lo que no ocurrió en la pantalla?

414
00:18:15,940 --> 00:18:17,170
¿Apenado?

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

416
00:18:18,010 --> 00:18:19,720
La URL no cambió en absoluto.

417
00:18:19,720 --> 00:18:22,250
Le dije que esto era dom-0,
y todavía estoy a dom-0.

418
00:18:22,250 --> 00:18:26,890
Normalmente, nos volveríamos a conseguir cambiamos a otro
URL, como register.php o similares.

419
00:18:26,890 --> 00:18:29,560
>> Pero incluso cuando yo descarto
esto haciendo clic en Aceptar,

420
00:18:29,560 --> 00:18:32,310
cuenta de que la URL
queda completamente puesto.

421
00:18:32,310 --> 00:18:35,350
Y, de hecho, si estoy un poco
escéptico, déjame abro Chrome.

422
00:18:35,350 --> 00:18:36,860
Permítanme abro la ficha Red.

423
00:18:36,860 --> 00:18:38,360
Y note que es en blanco en el momento.

424
00:18:38,360 --> 00:18:40,700
Déjame ir adelante y volver a enviar María.

425
00:18:40,700 --> 00:18:42,810
No hay tráfico de red que sea.

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

427
00:18:44,320 --> 00:18:47,620
>> Así que de hecho, si me veo en el código fuente
para esto-- permítanme cerrar esta ventana

428
00:18:47,620 --> 00:18:49,480
e ir a la vista de origen.

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

430
00:18:50,400 --> 00:18:53,520
Parece que hay algo de
nuevas etiquetas, entre ellos guión.

431
00:18:53,520 --> 00:18:57,490
Así que vamos a echar un vistazo dentro CS50
IDE exactamente lo que envía al usuario.

432
00:18:57,490 --> 00:19:00,690
>> Así que aquí vamos a es--
centrarse sólo en el código HTML.

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

434
00:19:03,500 --> 00:19:07,830
Y se dio cuenta de que tiene un título,
una etiqueta de cabeza, un cuerpo de la etiqueta, una etiqueta de formulario.

435
00:19:07,830 --> 00:19:11,257
Pero lo que salta a usted como
diferente, especialmente si usted nunca ha

436
00:19:11,257 --> 00:19:12,590
escrito ninguna JavaScript ti mismo.

437
00:19:12,590 --> 00:19:14,920
Permítanme desplazo un poco
a la derecha aquí.

438
00:19:14,920 --> 00:19:18,330
Tengo una entrada,
otra entrada para enviar.

439
00:19:18,330 --> 00:19:21,410
Tengo una identificación, que es una especie de nuevo.

440
00:19:21,410 --> 00:19:22,790
Pero nos hicieron ver esto con CSS.

441
00:19:22,790 --> 00:19:24,480
¿Qué otra cosa es, sin duda de nuevo?

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

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

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

445
00:19:32,140 --> 00:19:32,760
>> Correcto.

446
00:19:32,760 --> 00:19:35,630
Así que donde dice onsubmit,
cuenta de lo que parece seguir.

447
00:19:35,630 --> 00:19:38,740
Este es un atributo
en la nomenclatura HTML.

448
00:19:38,740 --> 00:19:40,944
Su valor es esta cadena citado aquí.

449
00:19:40,944 --> 00:19:42,860
Y esto se ve un poco
extraño a primera vista.

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

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

452
00:19:45,240 --> 00:19:47,580
Se trata, como puede imaginar, JavaScript.

453
00:19:47,580 --> 00:19:51,850
Así que parece que construye en este
página web es una función llamada saludo.

454
00:19:51,850 --> 00:19:54,250
Y estoy infiriendo que acaba
porque es una palabra, saludarlo.

455
00:19:54,250 --> 00:19:55,880
Tiene una paren abierta,
cerca paren, punto y coma.

456
00:19:55,880 --> 00:19:58,095
Parece una función C,
se parece a una función de PHP.

457
00:19:58,095 --> 00:20:00,370
>> Y, en efecto, que va a
ser una función JavaScript.

458
00:20:00,370 --> 00:20:01,440
Entonces vuelvo falsa.

459
00:20:01,440 --> 00:20:03,440
Volveremos a
que, en un momento.

460
00:20:03,440 --> 00:20:05,320
Pero donde se define esta función?

461
00:20:05,320 --> 00:20:07,950
Pues déjame desplazarse hacia arriba
a la parte superior del archivo.

462
00:20:07,950 --> 00:20:11,710
Y a pesar de que se trata de una línea larga,
Es relativamente sencillo.

463
00:20:11,710 --> 00:20:15,000
Permítanme Alejar aquí y
centrarse en estas cuatro líneas.

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

465
00:20:17,137 --> 00:20:19,720
digamos, literalmente, la palabra "función"
el nombre de la función,

466
00:20:19,720 --> 00:20:22,700
y luego paréntesis con cualquier
arguments-- ningún argumento en este caso.

467
00:20:22,700 --> 00:20:25,290
Y no hay tipo de retorno
en JavaScript, al igual que PHP.

468
00:20:25,290 --> 00:20:29,470
Así que es un poco más flojo que C.
Corchete abierto, cerca de corchete.

469
00:20:29,470 --> 00:20:33,270
Construido en JavaScript es un function--
no es un function-- recomendado

470
00:20:33,270 --> 00:20:35,730
pero una función llamada de alerta
cuyo único propósito en la vida

471
00:20:35,730 --> 00:20:38,620
es para tirar ese bastante feo
mensaje que vimos hace un momento.

472
00:20:38,620 --> 00:20:40,950
>> Ahora bien, esto es una especie de un bocado.

473
00:20:40,950 --> 00:20:42,560
¿Que esta pasando aqui?

474
00:20:42,560 --> 00:20:45,840
Así que vamos a empezar a
resaltar todo aquí.

475
00:20:45,840 --> 00:20:48,540
Ese es el mismo argumento para alertar.

476
00:20:48,540 --> 00:20:49,530
Y lo que está pasando?

477
00:20:49,530 --> 00:20:51,200
Esto sólo se ve como una cadena.

478
00:20:51,200 --> 00:20:59,180
Y resulta que, a diferencia de PHP y diferencia
C, no importa en JavaScript

479
00:20:59,180 --> 00:21:01,090
si usted comillas simples o dobles.

480
00:21:01,090 --> 00:21:02,060
Van a ser equivalente.

481
00:21:02,060 --> 00:21:03,769
Y, francamente, es sólo
popular en estos días

482
00:21:03,769 --> 00:21:06,726
para los programadores de JavaScript para siempre
usar comillas simples por alguna razón.

483
00:21:06,726 --> 00:21:07,840
Es sólo lo que hay que hacer.

484
00:21:07,840 --> 00:21:09,710
Pero podríamos utilizar comillas dobles, también.

485
00:21:09,710 --> 00:21:11,540
>> Así que además es un nuevo personaje.

486
00:21:11,540 --> 00:21:14,512
Pero aquellos de ustedes que han hecho
esto antes, ¿qué quiere decir más?

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

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

489
00:21:17,120 --> 00:21:18,570
Así lo vimos en PHP.

490
00:21:18,570 --> 00:21:20,315
No es sólo el punto
operador en PHP que

491
00:21:20,315 --> 00:21:22,000
se concatenar dos cadenas juntas.

492
00:21:22,000 --> 00:21:24,000
C era un dolor en el cuello para hacer esto.

493
00:21:24,000 --> 00:21:27,310
Recuerde del conjunto de procesadores de seis, que era
un dolor especial en el cuello,

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

495
00:21:29,470 --> 00:21:31,660
después de la asignación de memoria
en la pila o el montón.

496
00:21:31,660 --> 00:21:34,243
Había que pasar por el aro
sólo para concatenar dos cadenas.

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

498
00:21:36,040 --> 00:21:38,030
Sólo tienes que utilizar el operador más entre ellos.

499
00:21:38,030 --> 00:21:41,420
>> Así que el complejo de aspecto
cosa parece ser la siguiente

500
00:21:41,420 --> 00:21:43,490
porque al final de
toda esta cadena, sólo

501
00:21:43,490 --> 00:21:45,797
concatenar en un signo de exclamación.

502
00:21:45,797 --> 00:21:48,380
Así que si lo que estaba apareciendo fue
"hola, David", "hola, Hannah,"

503
00:21:48,380 --> 00:21:52,740
"hola, María," y así sucesivamente, con claridad
cosa que media entre los dos

504
00:21:52,740 --> 00:21:55,215
ventajas me deben dar acceso a qué?

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

506
00:21:58,855 --> 00:22:01,991
¿Qué hay allí con seguridad?

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

508
00:22:02,490 --> 00:22:05,090
Así que voy a fingir que aquí la
responder a su nombre, ¿verdad?

509
00:22:05,090 --> 00:22:10,380
Así que su nombre apareció en la final
resultado. Entonces, ¿qué significa esto?

510
00:22:10,380 --> 00:22:15,080
Bueno, he propuesto anteriormente en que
imagen que la llamada de manera que el DOM

511
00:22:15,080 --> 00:22:18,580
tiene este elemento raíz especial
camino hasta la parte superior llamado documento.

512
00:22:18,580 --> 00:22:21,660
Y ahora, resulta que eso va
ser una variable global especial

513
00:22:21,660 --> 00:22:25,250
en JavaScript, integrado en que es una
toda montón de funcionalidades útiles.

514
00:22:25,250 --> 00:22:31,770
Entre la funcionalidad útil es la
capacidad para llegar a cualquier nodo descendiente.

515
00:22:31,770 --> 00:22:37,760
Esos cuadrados o rectángulos o elipses
son sólo los nodos de un árbol, por así decirlo.

516
00:22:37,760 --> 00:22:41,850
>> Así resulta que construye en
Objeto de documento de JavaScript

517
00:22:41,850 --> 00:22:47,300
es una función, también conocida como una
método, que llama getElementById.

518
00:22:47,300 --> 00:22:50,410
La sintaxis para llamar
una función en JavaScript

519
00:22:50,410 --> 00:22:55,220
que está dentro de un objeto o una
variable es simplemente con la notación punto.

520
00:22:55,220 --> 00:22:57,950
Y vimos esto en C
lo que la sintaxis struct.

521
00:22:57,950 --> 00:23:03,530
Esto se ve en el conjunto de procesadores siete, clase de,
más o menos, cuando ves CS50 :: consulta.

522
00:23:03,530 --> 00:23:08,070
Los dos puntos de colon en PHP es otro
forma de llamar a una función que es

523
00:23:08,070 --> 00:23:09,260
dentro de algún objeto.

524
00:23:09,260 --> 00:23:11,960
>> Pero por ahora en JavaScript,
es sólo un punto.

525
00:23:11,960 --> 00:23:14,170
Y así esta función,
lo suficientemente bien, tipo de

526
00:23:14,170 --> 00:23:16,810
dice lo que does-- obtener elementos por ID.

527
00:23:16,810 --> 00:23:20,280
Un elemento es sólo otro nombre
para una etiqueta o nodo en el DOM.

528
00:23:20,280 --> 00:23:26,900
Y a fin de obtener elementos por ID "nombre"
significa esto- aquí está mi HTML.

529
00:23:26,900 --> 00:23:31,910
Y en base a este código HTML, lo que
nodo o lo etiqueta HTML soy yo

530
00:23:31,910 --> 00:23:35,097
va a ser mediante programación mano
llamando a document.getElementById?

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

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

533
00:23:38,500 --> 00:23:42,670
Voy a conseguir la entrada
elemento existe cuyo ID es "nombre".

534
00:23:42,670 --> 00:23:45,140
Así específicamente, puede
pensar en esta función,

535
00:23:45,140 --> 00:23:49,560
getElementById, como una manera de dar
una copia de un puntero a ese nodo específica

536
00:23:49,560 --> 00:23:50,060
en el árbol.

537
00:23:50,060 --> 00:23:51,980
No hemos elaborado este
árbol, pero es una manera

538
00:23:51,980 --> 00:23:54,900
de conseguir el acceso a esa
rectángulo o ese rectángulo

539
00:23:54,900 --> 00:23:58,090
mediante la identificación única que a través de su ID.

540
00:23:58,090 --> 00:23:59,760
>> Ahora, ¿por qué es útil?

541
00:23:59,760 --> 00:24:01,510
Bueno, resulta que
que una vez que haya recibido

542
00:24:01,510 --> 00:24:07,220
ese nodo, ese rectángulo de la
imagen, ese nodo dentro de ella,

543
00:24:07,220 --> 00:24:10,660
a su vez, tiene un montón de
pares clave-valor properties--

544
00:24:10,660 --> 00:24:13,480
o datos, uno de los cuales se llama valor.

545
00:24:13,480 --> 00:24:16,500
Así que, literalmente, es una especie de
bocado para explicar todo el asunto.

546
00:24:16,500 --> 00:24:19,370
Pero al final del día,
todo esto hace es darle

547
00:24:19,370 --> 00:24:23,070
una cadena que el usuario escribió en
de esta manera jerárquica.

548
00:24:23,070 --> 00:24:24,820
Pero no me gusta un
par de estas cosas.

549
00:24:24,820 --> 00:24:27,590
O más bien, hay un poco de curiosidad todavía.

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

551
00:24:28,870 --> 00:24:33,420
¿Por qué crees que regresé
falsa después de llamar a saludar?

552
00:24:33,420 --> 00:24:35,910
Esto parece un poco feo, que
Tengo dos declaraciones no

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

554
00:24:38,730 --> 00:24:39,310
Adivina.

555
00:24:39,310 --> 00:24:44,390
Si me quita return false, lo que
que podría suceder, simplemente por instinto?

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

557
00:24:46,990 --> 00:24:49,460
Lo sentimos, decir de nuevo?

558
00:24:49,460 --> 00:24:50,530
>> Abra un montón de de Windows.

559
00:24:50,530 --> 00:24:52,780
Así que tal vez algo potencialmente
al igual que sucedería.

560
00:24:52,780 --> 00:24:54,422
¿Qué otra cosa?

561
00:24:54,422 --> 00:24:55,630
Podría presentar una solicitud por dónde?

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

563
00:24:59,109 --> 00:25:00,510
En la misma página.

564
00:25:00,510 --> 00:25:03,110
Así que, de hecho, eso es todo
cuanto más cerca respuesta aquí,

565
00:25:03,110 --> 00:25:05,890
a pesar de que, a diferencia
en el pasado, no tengo

566
00:25:05,890 --> 00:25:09,300
especifica el atributo de acción,
que normalmente tenemos que hacer.

567
00:25:09,300 --> 00:25:11,780
Resulta que hay un defecto.
Si no se especifica la acción,

568
00:25:11,780 --> 00:25:15,370
es como decir cita, fin de la cita
o el nombre del archivo en sí,

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

570
00:25:17,850 --> 00:25:20,420
Es sólo un poco de inferir,
o más bien implícita.

571
00:25:20,420 --> 00:25:22,420
>> Y por lo que si no hago esto, notemos.

572
00:25:22,420 --> 00:25:23,230
Voy a salvar esto.

573
00:25:23,230 --> 00:25:25,270
Y me he quitado de retorno falso.

574
00:25:25,270 --> 00:25:27,759
Permítanme volver a esta
ejemplo y la fuerza vuelva a cargarlo.

575
00:25:27,759 --> 00:25:30,800
Y es posible que haya visto yo sugiero
esto en CS50 Discuta un montón de veces.

576
00:25:30,800 --> 00:25:34,560
Si hay algo que está siempre actuando funky y el
explorador no se comporta como se espera,

577
00:25:34,560 --> 00:25:37,410
muchas veces usted querrá mantener
Mayús y haga clic en Actualizar.

578
00:25:37,410 --> 00:25:41,480
Eso obligará a cada archivo para recargar
y no utilizar caché local de su navegador

579
00:25:41,480 --> 00:25:47,032
o una copia de modo que ahora, déjame ir adelante y
abrir mi inspector, en la ficha Red.

580
00:25:47,032 --> 00:25:48,740
Voy a hacer clic
Preservar Iniciar porque

581
00:25:48,740 --> 00:25:51,660
no lo quieren para borrar las filas
Una vez que consiga llevado lejos en otro lugar.

582
00:25:51,660 --> 00:25:54,650
>> Déjame ir por delante aquí y
Tipo de Andi, haga clic en Enviar.

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

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

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

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

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

588
00:26:00,610 --> 00:26:05,100
Observe que la página ha cambiado,
aunque en la página original.

589
00:26:05,100 --> 00:26:06,770
Observe el tipo de cambio de URL.

590
00:26:06,770 --> 00:26:09,430
Añadió un signo de interrogación,
que suele ser un indicador

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

592
00:26:11,260 --> 00:26:13,570
Y a continuación, en la parte inferior,
aún más explícita,

593
00:26:13,570 --> 00:26:17,570
aquí está la solicitud HTTP actual,
que obtuvo una respuesta de 200 que

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

595
00:26:18,490 --> 00:26:20,250
>> Así que esto no lo es
que queremos hacer, ¿no?

596
00:26:20,250 --> 00:26:22,166
Porque no quiero
recargar toda la página.

597
00:26:22,166 --> 00:26:24,970
Yo en cambio quería volver
falsa con el fin de cortocircuito

598
00:26:24,970 --> 00:26:28,840
el comportamiento predeterminado del navegador, que
era, por supuesto, a presentar la página.

599
00:26:28,840 --> 00:26:31,700
>> Así que echemos un vistazo a una
marginalmente mejor ejemplo.

600
00:26:31,700 --> 00:26:33,920
Esta es la versión uno dom.

601
00:26:33,920 --> 00:26:36,680
Y note lo siguiente.

602
00:26:36,680 --> 00:26:39,150
Está bien si no lo asimilo
todas las líneas de código.

603
00:26:39,150 --> 00:26:41,750
Pero lo que es fundamentalmente diferente
acerca de esta aplicación?

604
00:26:41,750 --> 00:26:44,690
Voy a estipulo que comporta la
misma, hace lo mismo.

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

606
00:26:49,320 --> 00:26:51,570
¿Qué he obviamente hecho diferente?

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

608
00:26:52,266 --> 00:26:53,182
>> AUDIENCIA: [inaudible].

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

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

611
00:27:04,170 --> 00:27:08,620
Así que la función se define differently--
En otras palabras, ausentes de la forma,

612
00:27:08,620 --> 00:27:13,180
allá arriba, en línea o 7--
más bien, la línea más larga 8-- ninguna

613
00:27:13,180 --> 00:27:15,070
tengo el atributo onsubmit.

614
00:27:15,070 --> 00:27:16,750
En el ejemplo anterior, tuve esto.

615
00:27:16,750 --> 00:27:18,530
Y luego, literalmente, escribí mi código aquí.

616
00:27:18,530 --> 00:27:20,210
Y entonces me dije return false.

617
00:27:20,210 --> 00:27:22,180
Y si no se frote
que el camino equivocado, sin embargo,

618
00:27:22,180 --> 00:27:26,140
debe comenzar a la medida
ya que, al igual que en HTML,

619
00:27:26,140 --> 00:27:29,530
cuando empezamos a co-mezclan lo
con CSS en los atributos de estilo,

620
00:27:29,530 --> 00:27:32,890
que acaba de empezar a ser un poco
desordenado o sentir un poco mal.

621
00:27:32,890 --> 00:27:35,020
>> Del mismo modo aquí, si
de empezar a tomar el HTML,

622
00:27:35,020 --> 00:27:37,419
y luego de forma automática
plop algo de código JavaScript

623
00:27:37,419 --> 00:27:40,460
en el medio de una cadena entre comillas, es
no va a ser muy fácil de mantener.

624
00:27:40,460 --> 00:27:40,630
¿Correcto?

625
00:27:40,630 --> 00:27:43,690
Ni siquiera es evidente a primera
lugar donde el código JavaScript es.

626
00:27:43,690 --> 00:27:46,590
Así que sería muy agradable ya
un principio de mejor diseño,

627
00:27:46,590 --> 00:27:50,500
vamos a mantener nuestra HTML completo
separar de nuestra JavaScript.

628
00:27:50,500 --> 00:27:53,150
>> Así que para hacer eso, lo que hemos
hecho aquí es la following--

629
00:27:53,150 --> 00:27:56,790
simplemente usamos HTML sólo marcado.

630
00:27:56,790 --> 00:28:00,730
Y así, en versión de uno de esto, todo
Lo que tengo es un formulario con un identificador único.

631
00:28:00,730 --> 00:28:04,630
Y luego aquí, estoy aprovechando
de una característica especial de JavaScript

632
00:28:04,630 --> 00:28:08,480
por el que puedo tener lo que hay
llama una función anónima.

633
00:28:08,480 --> 00:28:14,150
Así que resulta que si yo llamo
document.getElementById de 'demostración'

634
00:28:14,150 --> 00:28:18,890
eso es como darme un puntero a
este nodo en mi árbol, el elemento de formulario,

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

636
00:28:20,100 --> 00:28:22,220
>> Ahora, sólo sé de
sabiendo un poco de HTML

637
00:28:22,220 --> 00:28:26,330
ahora que estamos de haber leído algunas en línea
de referencia, que un elemento de formulario compatible

638
00:28:26,330 --> 00:28:29,950
un montón de eventos en listeners--
Es decir, la larga lista de eventos

639
00:28:29,950 --> 00:28:31,700
oyentes que vimos hace un momento.

640
00:28:31,700 --> 00:28:35,950
Sé que de la lectura de la documentación
que onsubmit es un evento válido

641
00:28:35,950 --> 00:28:38,520
escucha para un elemento de formulario.

642
00:28:38,520 --> 00:28:41,480
>> Así que una vez que sé que,
que es seguro para mí hacer

643
00:28:41,480 --> 00:28:45,390
el following-- conseguir ese nodo
desde el árbol, el elemento de formulario,

644
00:28:45,390 --> 00:28:48,070
y el acceso la llamada de su
propiedad onsubmit.

645
00:28:48,070 --> 00:28:49,880
Así que el punto sólo significa
esta es una propiedad,

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

647
00:28:52,180 --> 00:28:55,590
¿Y qué tipo de datos soy yo
asignar, al parecer,

648
00:28:55,590 --> 00:28:58,900
a onSubmit, que es
efectivamente una variable dentro de

649
00:28:58,900 --> 00:29:01,010
de ese nodo en el árbol?

650
00:29:01,010 --> 00:29:04,100
Es un campo en el interior de esa estructura.

651
00:29:04,100 --> 00:29:05,810
¿Cuál es el tipo de datos?

652
00:29:05,810 --> 00:29:07,030
>> Una función, sí.

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

654
00:29:08,607 --> 00:29:10,440
Y a pesar de que
no le dirá al respecto,

655
00:29:10,440 --> 00:29:16,240
C también tiene punteros de función, los
capacidad de pasar y asignar funciones

656
00:29:16,240 --> 00:29:18,330
como propios los valores de las variables.

657
00:29:18,330 --> 00:29:20,280
Y no vamos
a retroceder de nuevo a C.

658
00:29:20,280 --> 00:29:23,250
Pero por ahora, resulta que
en el lado derecho aquí,

659
00:29:23,250 --> 00:29:26,260
a pesar de que se ve un poco
cobarde, este medio, hey navegador,

660
00:29:26,260 --> 00:29:27,550
dame una función.

661
00:29:27,550 --> 00:29:30,560
Yo no me voy a molestar incluso dando
un nombre porque estoy literalmente

662
00:29:30,560 --> 00:29:34,450
va a asignar llamémoslo
la dirección de esta función

663
00:29:34,450 --> 00:29:35,994
inmediatamente al onSubmit.

664
00:29:35,994 --> 00:29:39,160
En otras palabras, navegador, no es necesario
saber lo que esta función se llama.

665
00:29:39,160 --> 00:29:41,890
Usted sólo necesita saber
donde está en memoria.

666
00:29:41,890 --> 00:29:44,210
Y así es suficiente sólo para
tener un signo igual no

667
00:29:44,210 --> 00:29:48,240
y no molestarse en nombrar a este, al igual que
foo o saludar o cualquier otra palabra.

668
00:29:48,240 --> 00:29:50,150
Y ahora esto es sólo una cosa de estilo.

669
00:29:50,150 --> 00:29:53,100
Podía mover este corchete
en el-- línea junto sorry--

670
00:29:53,100 --> 00:29:54,750
como solemos hacer CS50.

671
00:29:54,750 --> 00:29:57,550
Pero en JavaScript, es
realidad estilísticamente común

672
00:29:57,550 --> 00:30:00,450
sólo para mantener la llave de la
primero, en esa primera línea.

673
00:30:00,450 --> 00:30:02,620
>> Pero de aquí en adelante, no hay
nada interesante.

674
00:30:02,620 --> 00:30:05,830
Esa llave de apertura justo
demarca el inicio de mi función.

675
00:30:05,830 --> 00:30:09,320
La función es ahora
idéntica, excepto que he

676
00:30:09,320 --> 00:30:11,452
incluido el falso retorno
dentro de esta función.

677
00:30:11,452 --> 00:30:13,160
Porque resulta fuera--
y sólo lo haría

678
00:30:13,160 --> 00:30:14,980
saber esto de la lectura
la documentación--

679
00:30:14,980 --> 00:30:19,740
que si la función que se asigna
al controlador de onsubmit devuelve false,

680
00:30:19,740 --> 00:30:23,420
el browser conoce y está de acuerdo
no para enviar el formulario a un servidor.

681
00:30:23,420 --> 00:30:27,210
Si devuelve verdadero, presentará
a un servidor por razones que veremos

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

683
00:30:28,700 --> 00:30:31,000
>> Y a continuación, el punto y coma después
la llave de allí sólo

684
00:30:31,000 --> 00:30:32,541
significa que he terminado de definir la función.

685
00:30:32,541 --> 00:30:36,600
Usted sabe cómo llamarlo tan pronto
como se oye una presentación.

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

687
00:30:37,100 --> 00:30:40,650
Esto sigue siendo sin duda un poco feo.

688
00:30:40,650 --> 00:30:42,190
Entonces, ¿qué más podemos hacer?

689
00:30:42,190 --> 00:30:45,000
>> Bueno, resulta que después en
la versión dos, que es el last--

690
00:30:45,000 --> 00:30:46,780
y sólo tendremos que echar un vistazo a esto.

691
00:30:46,780 --> 00:30:49,850
A riesgo de hacer
lo más feo, resulta

692
00:30:49,850 --> 00:30:52,160
que hay una biblioteca en
el mundo llama jQuery.

693
00:30:52,160 --> 00:30:54,900
Y jQuery es un super
Biblioteca Popular JavaScript

694
00:30:54,900 --> 00:30:57,930
eso es tan popular que la mayoría
cualquier JavaScript-- no es

695
00:30:57,930 --> 00:31:00,540
raro que la gente confunda
jQuery con JavaScript.

696
00:31:00,540 --> 00:31:01,070
¿Por qué?

697
00:31:01,070 --> 00:31:04,990
Sí JavaScript tiene muy
maneras de hacer las cosas-- detallados

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

699
00:31:07,820 --> 00:31:10,510
Se termina por tener muy
largas líneas de código.

700
00:31:10,510 --> 00:31:15,550
>> Así que un tipo llamado John Resid,
que en realidad trabaja para una startup

701
00:31:15,550 --> 00:31:18,630
hasta estos días, salió
con esta biblioteca años

702
00:31:18,630 --> 00:31:22,070
hace que muchas personas han contribuido
a llamada jQuery que cambia

703
00:31:22,070 --> 00:31:23,449
la sintaxis de la siguiente manera.

704
00:31:23,449 --> 00:31:25,740
Y para que lo has visto esto,
Debido a que usted siempre

705
00:31:25,740 --> 00:31:28,140
ver esto si haciendo un
proyecto final basado en la web,

706
00:31:28,140 --> 00:31:33,270
esta sería la forma equivalente de
la aplicación de esa misma función utilizando

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

708
00:31:34,630 --> 00:31:36,680
>> Ahora, en lugar de tomadura de pelo
lo distinguen en su totalidad,

709
00:31:36,680 --> 00:31:38,520
vamos a mirar algunos patrones.

710
00:31:38,520 --> 00:31:44,850
Esta sintaxis parece tener
cuántas funciones anónimas

711
00:31:44,850 --> 00:31:49,584
o funciones sin nombre
o funciones lambda AKA?

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

713
00:31:50,190 --> 00:31:52,690
Y sabes que, aunque
usted no es súper cómoda con esto,

714
00:31:52,690 --> 00:31:55,780
simplemente por el hecho de que se
dice la función () dos veces.

715
00:31:55,780 --> 00:31:58,172
>> Y resulta que
lo que este código es doing--

716
00:31:58,172 --> 00:32:01,255
y nos referiremos a las referencias en línea,
en última instancia, un poco de ayuda con esto.

717
00:32:01,255 --> 00:32:04,480
Esto sólo significa que cuando
el documento está listo,

718
00:32:04,480 --> 00:32:07,490
seguir adelante y registrarse
la función siguiente

719
00:32:07,490 --> 00:32:12,064
como el controlador de presentar para el HTML
elemento cuya única idea es demostración.

720
00:32:12,064 --> 00:32:14,480
Y luego, cuando eso sucede,
llamar a estas dos líneas de código.

721
00:32:14,480 --> 00:32:18,677
Y esto es, trágicamente, una más
forma prolija de decir return false.

722
00:32:18,677 --> 00:32:21,510
Y mencioné esto sólo porque
verás código como este en línea.

723
00:32:21,510 --> 00:32:23,140
Y no es nada para ser intimidado por.

724
00:32:23,140 --> 00:32:26,057
Sino más bien, ten en cuenta que lo que está
va a ser común en JavaScript

725
00:32:26,057 --> 00:32:26,765
es este paradigma.

726
00:32:26,765 --> 00:32:29,510
Y por eso mostramos todo por ahora.

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

728
00:32:30,010 --> 00:32:32,730
Así que sin detenerse demasiado
tanto en que la sintaxis,

729
00:32:32,730 --> 00:32:37,800
se hay alguna pregunta sobre
estos ejemplos o ideas hasta el momento?

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

731
00:32:38,300 --> 00:32:40,220
Así que vamos a usar esto para algo útil.

732
00:32:40,220 --> 00:32:47,070
Hacer una página web que sólo dice hola,
esto y lo otro no es tan interesante,

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

734
00:32:47,830 --> 00:32:51,038
Este no va a ser hermoso,
pero se va a hacer algo útil.

735
00:32:51,038 --> 00:32:56,350
Déjame volver a mi directorio
aquí y abrir, por ejemplo, la forma-0.html.

736
00:32:56,350 --> 00:32:59,320
>> Así que supongo que este es el primer año
página de registro deportes intramuros

737
00:32:59,320 --> 00:33:01,780
sin ningún tipo CSS o cualquier sentido del diseño.

738
00:33:01,780 --> 00:33:05,404
Y quiero seguir adelante y
registrarse aquí con una contraseña.

739
00:33:05,404 --> 00:33:08,320
Y voy a estar de acuerdo con los términos
y las condiciones y haga clic en Registro.

740
00:33:08,320 --> 00:33:11,700
Y ahora el sitio web dice: "Tú eres
registrada! (Bueno en realidad no.)"

741
00:33:11,700 --> 00:33:15,070
Eso parece que funcionó, pero
déjame ir por delante y la fuerza de recarga.

742
00:33:15,070 --> 00:33:18,720
>> Y déjenme decirles, no, no lo hace
necesitan mi dirección de correo electrónico real.

743
00:33:18,720 --> 00:33:21,820
O tal vez sólo tendremos que decimos electrónico en ese país.

744
00:33:21,820 --> 00:33:25,080
Contraseña será, como, 12.345.

745
00:33:25,080 --> 00:33:28,810
Y entonces, sólo porque soy
un idiota, ahora es el 123 456 789.

746
00:33:28,810 --> 00:33:31,150
Y yo no voy a comprobar su caja.

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

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

749
00:33:32,350 --> 00:33:34,920
Así que hay varias oportunidades
para la mejora aquí.

750
00:33:34,920 --> 00:33:39,070
Y usted sabe, o se verá en pset
siete, que se puede escribir code--

751
00:33:39,070 --> 00:33:41,890
y usted tiene que escribir
código en PHP-- defender

752
00:33:41,890 --> 00:33:45,780
contra este tipo de usuario
errores porque el usuario claramente

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

754
00:33:46,790 --> 00:33:49,680
Y él o ella no le ha dado toda la
Valores que querías o incluso en el formato

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

756
00:33:50,630 --> 00:33:53,250
Por lo que usted ve en pset siete de la
sin duda podríamos tener alguna

757
00:33:53,250 --> 00:33:55,680
si las condiciones lo que dicen
si la dirección de correo electrónico

758
00:33:55,680 --> 00:33:59,450
no es un username@something.edu,
podríamos simplemente

759
00:33:59,450 --> 00:34:02,575
pedir perdón y pedir disculpas al usuario
tanto, de que se puede estar en pset siete.

760
00:34:02,575 --> 00:34:05,700
O si no han comprobado que la caja,
Resulta que en PHP, se puede detectar que,

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

762
00:34:06,200 --> 00:34:09,389
Y, ciertamente, si las contraseñas
no coinciden como en register.php

763
00:34:09,389 --> 00:34:11,521
para pset siete, se puede detectar que.

764
00:34:11,521 --> 00:34:13,770
Pero eso es un dolor en el
cuello que ahora solicitan

765
00:34:13,770 --> 00:34:15,510
nosotros ir todo el camino hasta el servidor.

766
00:34:15,510 --> 00:34:17,053
El usuario es informado del error.

767
00:34:17,053 --> 00:34:19,219
Y por lo menos a menos que utilice
algunas técnicas más elegantes,

768
00:34:19,219 --> 00:34:20,929
ahora tienen que hacer clic en la flecha hacia atrás.

769
00:34:20,929 --> 00:34:23,300
¿No sería agradable, como
una gran cantidad de sitios web de hoy en día,

770
00:34:23,300 --> 00:34:26,190
si tuvieras más inmediato
retroalimentación, al instante?

771
00:34:26,190 --> 00:34:31,389
>> En otras palabras, déjame ir a la versión
uno, que va a haber más bonita.

772
00:34:31,389 --> 00:34:33,469
Pero tiene esta característica.

773
00:34:33,469 --> 00:34:39,590
Malan, 12345, 123456789, no
va a marcar la casilla, Registro.

774
00:34:39,590 --> 00:34:41,330
Las contraseñas no coinciden.

775
00:34:41,330 --> 00:34:44,459
Así que, aunque este pop-up es ugly--
podemos reemplazar este finalmente

776
00:34:44,459 --> 00:34:47,000
con algo como Manos a la Obra,
que se verá en conjunto de procesadores de siete

777
00:34:47,000 --> 00:34:50,239
es un library-- muy popular que hice
detectan que las contraseñas no coinciden.

778
00:34:50,239 --> 00:34:50,739
Correcto.

779
00:34:50,739 --> 00:34:52,530
Bueno, déjame arreglar eso que el usuario.

780
00:34:52,530 --> 00:34:55,460
Déjenme seguir adelante y decir 12.345, 12.345.

781
00:34:55,460 --> 00:34:57,780
Aún no revisar el acuerdo.

782
00:34:57,780 --> 00:35:00,210
Usted debe aceptar los
términos y Condiciones.

783
00:35:00,210 --> 00:35:01,760
¿Entonces por qué?

784
00:35:01,760 --> 00:35:04,100
>> Si ya hemos planteamos
que hay una manera,

785
00:35:04,100 --> 00:35:07,260
y les hemos requerido en
pset siete a detectar el error

786
00:35:07,260 --> 00:35:09,780
condiciones como esta
del lado del servidor, ¿por qué habría de hacerlo

787
00:35:09,780 --> 00:35:13,940
molestarse también hacer esto en JavaScript?

788
00:35:13,940 --> 00:35:15,850
¿Qué es un argumento en
favor de añadir lo que

789
00:35:15,850 --> 00:35:18,760
estás a punto de ver como some--
hay una complejidad adicional.

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

791
00:35:23,610 --> 00:35:25,930
>> Tal vez no hay alza.

792
00:35:25,930 --> 00:35:26,924
¿Qué podría ser?

793
00:35:26,924 --> 00:35:27,840
AUDIENCIA: [inaudible].

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 potenciales.

797
00:35:33,530 --> 00:35:37,540
Tan seguro, si usted no está manejando
entrada del usuario errónea de que grande,

798
00:35:37,540 --> 00:35:40,170
tal vez es mejor si se
ni siquiera llegar a su servidor.

799
00:35:40,170 --> 00:35:42,160
Me gustaría hacer retroceder allí y
por ejemplo, probablemente debería

800
00:35:42,160 --> 00:35:43,284
solucionar ambos problemas.

801
00:35:43,284 --> 00:35:44,140
Pero eso es justo.

802
00:35:44,140 --> 00:35:44,710
¿Qué otra cosa?

803
00:35:44,710 --> 00:35:45,626
>> AUDIENCIA: [inaudible].

804
00:35:45,626 --> 00:35:47,970

805
00:35:47,970 --> 00:35:49,014
>> DAVID MALAN: Sí.

806
00:35:49,014 --> 00:35:51,680
Este código, como hemos dicho antes, es
interpretado en el lado del cliente.

807
00:35:51,680 --> 00:35:53,846
No se molestó en el servidor,
lo que significa que no hace

808
00:35:53,846 --> 00:35:55,930
impacto de la carga o la capacidad del servidor.

809
00:35:55,930 --> 00:35:59,840
Y ahora, por poco me de edad,
esto no tiene efecto significativo

810
00:35:59,840 --> 00:36:01,970
porque tengo un usuario en este momento.

811
00:36:01,970 --> 00:36:04,010
>> Pero si usted es cualquier
página web de tamaño decente,

812
00:36:04,010 --> 00:36:07,400
especialmente los más grandes, como Facebook,
cuanto más se puede mantener a la gente fuera

813
00:36:07,400 --> 00:36:09,927
de su servidor el mejor
porque un servidor, por supuesto,

814
00:36:09,927 --> 00:36:12,510
solamente tiene una cantidad finita de memoria RAM,
un número finito de gigahercios,

815
00:36:12,510 --> 00:36:16,340
un número finito de cosas
que puede hacer por unidad de tiempo.

816
00:36:16,340 --> 00:36:19,170
Así que si hay más personas en
el mundo golpear a su servidor,

817
00:36:19,170 --> 00:36:21,750
ingresar accidentalmente
incorrectamente, del mismo modo que si

818
00:36:21,750 --> 00:36:23,254
puede mantener ese peso de encima su servidor.

819
00:36:23,254 --> 00:36:25,420
Además, especialmente en un móvil
device-- Si alguna vez

820
00:36:25,420 --> 00:36:29,190
iniciar sesión en my.harvard o
Netid de Yale o similar,

821
00:36:29,190 --> 00:36:32,330
hay esta la latencia con una gran cantidad de
sitios web como eso por lo que se necesita,

822
00:36:32,330 --> 00:36:34,110
como, un maldito segundo o dos veces.

823
00:36:34,110 --> 00:36:37,979
Y luego, Dios mío, si usted escribe mal,
entonces usted tiene que devolver el golpe y rehacerlo.

824
00:36:37,979 --> 00:36:40,520
Así que hay latencia, especialmente
en conexiones de red lentas.

825
00:36:40,520 --> 00:36:43,030
Pero JavaScript, porque
que se ejecuta en el cliente

826
00:36:43,030 --> 00:36:46,720
y no tiene que ir y venir
a través de una internet potencialmente lenta

827
00:36:46,720 --> 00:36:49,780
conexión, usted puede conseguir
retroalimentación casi instantánea.

828
00:36:49,780 --> 00:36:50,760
>> Así que echemos un vistazo a esto.

829
00:36:50,760 --> 00:36:54,280
Permítanme abro forma-0 y
mirar el HTML aquí.

830
00:36:54,280 --> 00:36:56,040
Y vamos a ver lo que está pasando.

831
00:36:56,040 --> 00:36:59,460
Esta es una forma cuya
la acción es register.php.

832
00:36:59,460 --> 00:37:01,530
Sólo estoy usando conseguir tan
que podía ver la URL.

833
00:37:01,530 --> 00:37:05,030
Pero para las contraseñas, seguramente querríamos
para cambiar esto para publicar en la realidad.

834
00:37:05,030 --> 00:37:06,910
He aquí un campo de entrada de tipo texto.

835
00:37:06,910 --> 00:37:09,050
Aquí hay otra entrada
campo de tipo contraseña.

836
00:37:09,050 --> 00:37:13,150
Aquí es, si usted nunca ha visto,
una entrada de casilla tipo.

837
00:37:13,150 --> 00:37:15,250
>> Pero no hay JavaScript
aquí en absoluto.

838
00:37:15,250 --> 00:37:18,170
Esto es sólo HTML que
va a register.php.

839
00:37:18,170 --> 00:37:21,020
Pero en la versión uno, en el que
comenzado a obtener los pop-ups,

840
00:37:21,020 --> 00:37:23,010
vamos a ver lo que realmente sucede aquí.

841
00:37:23,010 --> 00:37:26,757
En la versión uno, lo que
Voy a ver-- I

842
00:37:26,757 --> 00:37:29,340
Pensé que podría estancar suficiente
con suficientes palabras, pero se me acabó.

843
00:37:29,340 --> 00:37:35,180

844
00:37:35,180 --> 00:37:38,590
>> En la versión uno-- ahí vamos.

845
00:37:38,590 --> 00:37:43,180
En la versión uno, notar el following--
y no es la mejor aplicación,

846
00:37:43,180 --> 00:37:44,420
pero es mi primera.

847
00:37:44,420 --> 00:37:47,680
Nótese que debajo de la
forma, tengo una etiqueta de script.

848
00:37:47,680 --> 00:37:49,430
Y una etiqueta de script significa,
bueno, navegador, aquí

849
00:37:49,430 --> 00:37:52,340
viene algo de código en,
Típicamente, JavaScript.

850
00:37:52,340 --> 00:37:54,420
Y ahora, noto lo que estoy haciendo.

851
00:37:54,420 --> 00:37:59,070
En line-- apenas puedo
leer it-- línea 32, que dice,

852
00:37:59,070 --> 00:38:01,420
var form-- así dame
una variable llamada formulario.

853
00:38:01,420 --> 00:38:05,049
Y a continuación, obtener document.getElementId
de "registro."

854
00:38:05,049 --> 00:38:05,590
¿Que es esto?

855
00:38:05,590 --> 00:38:07,290
Bueno, déjame rebobinar hasta aquí.

856
00:38:07,290 --> 00:38:11,510
Y fíjense, ah, me di el elemento de formulario
una idea arbitraria pero descriptivo

857
00:38:11,510 --> 00:38:13,050
de registro.

858
00:38:13,050 --> 00:38:16,820
Así que esto me da una variable que
me permite agarrar ese nodo,

859
00:38:16,820 --> 00:38:19,580
ese rectángulo en el árbol llamado formulario.

860
00:38:19,580 --> 00:38:24,460
medios form.onsubmit, hey navegador,
registrar un detector de eventos

861
00:38:24,460 --> 00:38:25,470
en este formulario.

862
00:38:25,470 --> 00:38:28,890
En otras palabras, cuando esta forma es
presentado, ejecute el siguiente código.

863
00:38:28,890 --> 00:38:30,810
No necesita un nombre, porque
¿por qué necesita saber el nombre?

864
00:38:30,810 --> 00:38:32,880
Usted sólo necesita saber
lo que para ejecutar, ergo

865
00:38:32,880 --> 00:38:35,610
es una función anónima o lambda.

866
00:38:35,610 --> 00:38:37,632
Y esa función es
todas estas líneas aquí.

867
00:38:37,632 --> 00:38:40,840
Y ahora, para ser honesto, a pesar de que
podrían no haber escrito nunca JavaScript

868
00:38:40,840 --> 00:38:44,200
antes, es sólo C y PHP lógica.

869
00:38:44,200 --> 00:38:51,720
Así que si form.email.value == "" -
así que si el campo de correo electrónico está en blanco,

870
00:38:51,720 --> 00:38:54,980
gritarle al usuario "Debe
proporcionar su dirección de correo electrónico ".

871
00:38:54,980 --> 00:38:58,980
Porque si form.password.value
es el grito blanco al usuario,

872
00:38:58,980 --> 00:39:00,400
"Debe proporcionar la contraseña."

873
00:39:00,400 --> 00:39:04,240
>> Más interesante, lógicamente,
si no lo hace form.password.value

874
00:39:04,240 --> 00:39:08,630
igual form.confirmation.value--
¿de dónde vino la confirmación viene?

875
00:39:08,630 --> 00:39:09,470
Permítanme rebobinar.

876
00:39:09,470 --> 00:39:12,870
Bueno, llamé a esta entrada
campo aquí la contraseña.

877
00:39:12,870 --> 00:39:15,180
Y llamé a este de aquí confirmación.

878
00:39:15,180 --> 00:39:17,850
Podría haber llamado
contraseña dos o cualquier otra cosa.

879
00:39:17,850 --> 00:39:20,560
Estoy lógicamente comprobando
que estos dos son lo mismo.

880
00:39:20,560 --> 00:39:25,760
Else-- resulta que esto es el Sr. Boole
nuevo-- una la casilla de verificación valor booleano,.

881
00:39:25,760 --> 00:39:29,810
Así que si yo digo, exclamación point--
si no form.agreement.checked,

882
00:39:29,810 --> 00:39:31,820
gritar en el usuario también.

883
00:39:31,820 --> 00:39:34,470
>> Así que esta sintaxis que verá es
muy común en JavaScript,

884
00:39:34,470 --> 00:39:35,970
donde usted tiene esta separada por puntos.

885
00:39:35,970 --> 00:39:37,460
Se empieza con un objeto aquí.

886
00:39:37,460 --> 00:39:41,430
Usted sumergirse más profundamente a un a
una propiedad como contraseña.

887
00:39:41,430 --> 00:39:43,280
Y entonces usted consigue a su valor real.

888
00:39:43,280 --> 00:39:45,830
Y de nuevo, aquí está la entrada.

889
00:39:45,830 --> 00:39:47,310
Aquí está la clave nombre.

890
00:39:47,310 --> 00:39:50,860
Y su valor es lo que el
humano ha tecleado en realidad.

891
00:39:50,860 --> 00:39:53,610
>> Así, en todos estos
casos, yo regresamos falsa.

892
00:39:53,610 --> 00:39:55,800
Pero si no, vuelvo cierto.

893
00:39:55,800 --> 00:39:58,030
Y lo que ahora vemos un
uso convincente de cuándo

894
00:39:58,030 --> 00:40:00,620
volverías falso
Deje de hacer lo que hace el usuario de

895
00:40:00,620 --> 00:40:03,200
y hacer que él o ella elija
de nuevo o escriba de nuevo.

896
00:40:03,200 --> 00:40:05,870
De lo contrario, volvemos cierto.

897
00:40:05,870 --> 00:40:08,585
>> Y permítanme presentarles un solo
otra variante de este justo

898
00:40:08,585 --> 00:40:13,140
para sembrar una cierta comprensión de la misma.

899
00:40:13,140 --> 00:40:16,850
Bueno, en la versión 2 de la presente, la forma-2--
Lo haré con un gesto de la mano.

900
00:40:16,850 --> 00:40:19,920
Esto es, para los curiosos,
la versión de jQuery,

901
00:40:19,920 --> 00:40:23,330
aquellos de ustedes que quieran
incursionar en esa biblioteca particular.

902
00:40:23,330 --> 00:40:25,145
Pero vamos a start-- y cualquier pregunta?

903
00:40:25,145 --> 00:40:29,230
Permítanme detenerme por momentos debido
eso fue rápido y mucho.

904
00:40:29,230 --> 00:40:32,610
>> Pero lo bueno es que todo
del código es más o menos lo mismo.

905
00:40:32,610 --> 00:40:33,985
El nuevo material es lo que es el Reino?

906
00:40:33,985 --> 00:40:35,115
¿Cuáles son estos rectángulos?

907
00:40:35,115 --> 00:40:35,990
¿Cuáles son estos nodos?

908
00:40:35,990 --> 00:40:37,540
¿Qué es una función anónima?

909
00:40:37,540 --> 00:40:38,830
¿Qué es un controlador de eventos?

910
00:40:38,830 --> 00:40:43,480
Pero, por suerte, la mayoría de que es sólo
al punto de partida de, por ejemplo, la semana cero.

911
00:40:43,480 --> 00:40:43,980
Correcto.

912
00:40:43,980 --> 00:40:46,070
Así que algo un poco más interesante?

913
00:40:46,070 --> 00:40:49,340
Bueno, primero que nada, déjame ir
por delante y abrir Google Maps.

914
00:40:49,340 --> 00:40:53,360
Y te darás cuenta de que para que un
momento, en la segunda división,

915
00:40:53,360 --> 00:40:55,930
darse cuenta de lo que sucede cuando
Hago clic suficientemente rápido.

916
00:40:55,930 --> 00:40:59,720
Y esta conexión en Harvard es tan
rápido que no te das cuenta que.

917
00:40:59,720 --> 00:41:04,469
Pero, ¿qué tipo de especie de ver
si hago clic y arrastro muy rápido?

918
00:41:04,469 --> 00:41:07,010
Aquellos de ustedes viendo en línea,
si vas más despacio esto a la velocidad de 0.5x,

919
00:41:07,010 --> 00:41:09,640
se puede ver esto mejor.

920
00:41:09,640 --> 00:41:13,550
>> ¿Qué estaba pasando justo
antes hice clic y arrastré?

921
00:41:13,550 --> 00:41:15,900
Permítanme tratar aquí-- déjame hacer
otra cosa, como 90210.

922
00:41:15,900 --> 00:41:17,550
Vamos a ir muy lejos.

923
00:41:17,550 --> 00:41:19,000
Eso fue muy rápido, demasiado.

924
00:41:19,000 --> 00:41:22,460
¿Qué hay de Disney World?

925
00:41:22,460 --> 00:41:23,190
Allá vamos.

926
00:41:23,190 --> 00:41:23,690
OK.

927
00:41:23,690 --> 00:41:26,030
¿Qué viste para una fracción de segundo?

928
00:41:26,030 --> 00:41:27,200
Simplemente, como, las plazas, ¿verdad?

929
00:41:27,200 --> 00:41:28,930
Los marcadores de posición para los azulejos?

930
00:41:28,930 --> 00:41:30,270
>> Bueno, ¿qué está pasando aquí?

931
00:41:30,270 --> 00:41:35,410
Google Maps es un buen ejemplo de
esta tecnología que se llama AJAX.

932
00:41:35,410 --> 00:41:38,510
Y aquí es donde vamos a empezar a
utilizar el código JavaScript en un particular

933
00:41:38,510 --> 00:41:39,277
manera seductora.

934
00:41:39,277 --> 00:41:41,610
De vuelta en el día, no había
Este sitio web llamado MapQuest.

935
00:41:41,610 --> 00:41:44,120
Y yo debería haber tomado una
captura de pantalla de esto desde la década de 1990,

936
00:41:44,120 --> 00:41:45,820
donde si querías
buscar aquí en el mapa,

937
00:41:45,820 --> 00:41:48,590
usted literalmente, haga clic en una flecha
en la parte superior que mostró

938
00:41:48,590 --> 00:41:49,870
una plaza diferente del mapa.

939
00:41:49,870 --> 00:41:51,790
Si querías mover hacia la izquierda, se
hecho clic una flecha que mostró

940
00:41:51,790 --> 00:41:53,210
una plaza diferente del mapa.

941
00:41:53,210 --> 00:41:54,840
Y algunos sitios web siguen haciendo esto hoy.

942
00:41:54,840 --> 00:41:57,820
Pero incluso MapQuest ha conseguido
mejor, como Google Maps.

943
00:41:57,820 --> 00:42:01,880
>> En cambio, lo que es mejor esto
días es los sitios web que utilizan AJAX.

944
00:42:01,880 --> 00:42:04,510
AJAX-- conocido como
Asynchronous JavaScript y XML,

945
00:42:04,510 --> 00:42:08,370
que es sólo una forma elegante de decir
una tecnología o técnica que

946
00:42:08,370 --> 00:42:14,200
permite un navegador usando JavaScript
hacer peticiones HTTP adicionales

947
00:42:14,200 --> 00:42:16,390
después de la página se ha cargado.

948
00:42:16,390 --> 00:42:17,479
Entonces, ¿qué significa esto?

949
00:42:17,479 --> 00:42:19,270
Bueno, sería una especie
molesto en Gmail

950
00:42:19,270 --> 00:42:21,103
si cada vez que querías
para comprobar su correo,

951
00:42:21,103 --> 00:42:24,940
hubieras golpeado literalmente Control-R o
Comando-R o haga clic en el botón Actualizar

952
00:42:24,940 --> 00:42:26,580
y toda la página maldito sería recargar.

953
00:42:26,580 --> 00:42:26,800
¿Correcto?

954
00:42:26,800 --> 00:42:28,460
Sería parpadeará blanco
probablemente por segundo.

955
00:42:28,460 --> 00:42:30,043
Verá que la barra de progreso estúpido.

956
00:42:30,043 --> 00:42:33,170
Y sólo para ver si usted tiene nueva
electrónico, toda la página web y la URL

957
00:42:33,170 --> 00:42:34,580
usted está en tendría que recargar.

958
00:42:34,580 --> 00:42:35,960
>> Pero eso no es lo que ocurre en Gmail.

959
00:42:35,960 --> 00:42:36,459
¿Correcto?

960
00:42:36,459 --> 00:42:40,300
Cuando llegue un nuevo correo electrónico en
Gmail, lo que sucede en la pantalla?

961
00:42:40,300 --> 00:42:41,480
Esto demuestra, ¿verdad?

962
00:42:41,480 --> 00:42:44,280
Sólo aparece por arte de magia
como una nueva fila en la tabla.

963
00:42:44,280 --> 00:42:47,030
Esto implica en realidad una
cantidad decente de complejidad.

964
00:42:47,030 --> 00:42:51,892
De hecho, si se piensa en este árbol,
que a pesar de que es muy simple aquí,

965
00:42:51,892 --> 00:42:54,100
Gmail-- y tendría que buscar
en el código para ser sure--

966
00:42:54,100 --> 00:42:58,710
probablemente tiene una tabla HTML o tal vez
una lista desordenada que hace

967
00:42:58,710 --> 00:43:01,060
cada uno de sus bandejas de entrada mensajes de correo electrónico como.

968
00:43:01,060 --> 00:43:04,050
>> Y por lo que si usted se imagina esto hay
es un árbol en memoria cuando estás

969
00:43:04,050 --> 00:43:09,050
usando Gmail que se ve la clase de tipo de
así, cuando se da cuenta de Google, ooh,

970
00:43:09,050 --> 00:43:12,770
Tiene un nuevo correo electrónico, no lo hace
quieren reconstruir el árbol entero.

971
00:43:12,770 --> 00:43:16,430
Más bien, quiere encontrar el nodo
el árbol que representa su bandeja de entrada

972
00:43:16,430 --> 00:43:18,580
y basta con insertar un nuevo nodo.

973
00:43:18,580 --> 00:43:24,640
>> Así que es muy similar al juego de parámetros cinco, donde
tuvo que insertar nodos en una tabla hash,

974
00:43:24,640 --> 00:43:28,410
de manera similar hace Google, a través de
Código JavaScript que se ha escrito,

975
00:43:28,410 --> 00:43:31,890
travesía este árbol, averiguar dónde
es esa parte la bandeja de entrada de la ventana,

976
00:43:31,890 --> 00:43:33,440
y luego insertar una nueva fila.

977
00:43:33,440 --> 00:43:37,460
Y una nueva fila sólo significa un solo
o más nuevos nodos en un árbol.

978
00:43:37,460 --> 00:43:41,340
>> Y así AJAX es esta técnica
que permite exactamente eso.

979
00:43:41,340 --> 00:43:44,440
Una vez que usted ha visitado una URL,
Sin embargo loco el tiempo que es,

980
00:43:44,440 --> 00:43:46,472
y una vez que la página tiene
ha cargado, puede todavía

981
00:43:46,472 --> 00:43:48,430
agarrar más datos del
Internet- ya sea

982
00:43:48,430 --> 00:43:52,460
un correo electrónico o una baldosa de un map--
agarrarlo entre bastidores

983
00:43:52,460 --> 00:43:55,290
y luego insertarlo en la página
por lo que el ser humano en realidad no

984
00:43:55,290 --> 00:43:56,910
tener que esperar para ello.

985
00:43:56,910 --> 00:43:58,980
>> Facebook Messenger funciona de la misma manera.

986
00:43:58,980 --> 00:44:01,562
Cualquier número de otros websites--
oh, en realidad, ni siquiera esto.

987
00:44:01,562 --> 00:44:04,270
Quiero decir, esto es, francamente, una especie de
un molesto cuentan estos días.

988
00:44:04,270 --> 00:44:07,500
Si me pongo a buscar cats-- este
es una especie de una experiencia de usuario horrible.

989
00:44:07,500 --> 00:44:08,990
Simplemente comienza a buscar para mí.

990
00:44:08,990 --> 00:44:10,050
Bueno, ¿qué está haciendo?

991
00:44:10,050 --> 00:44:12,920
La URL no ha cambiado
Desde que empecé a escribir.

992
00:44:12,920 --> 00:44:17,330
Pero lo que está pasando a través de la
wire-- bien, hmm interesante.

993
00:44:17,330 --> 00:44:20,470
¿Qué está pasando en todo el
alambre de aquí sólo se pone más raro.

994
00:44:20,470 --> 00:44:21,090
>> OK.

995
00:44:21,090 --> 00:44:24,670
Así que déjame ir adelante y inspecciono
elemento y vaya a la ficha Red

996
00:44:24,670 --> 00:44:27,040
y tratar de hacer de este
técnica y menos acerca de los gatos.

997
00:44:27,040 --> 00:44:32,595
Mientras escribo, literalmente, gatos
y- lo que está pasando

998
00:44:32,595 --> 00:44:37,710
per-- No voy a hacer clic eso.

999
00:44:37,710 --> 00:44:38,210
Correcto.

1000
00:44:38,210 --> 00:44:44,280
Así que aquí, lo que ocurre cada
vez que escribo un personaje, por lo visto?

1001
00:44:44,280 --> 00:44:45,000
Al igual que, bajo nivel?

1002
00:44:45,000 --> 00:44:47,860
¿Qué está pasando con cada uno de los
personajes que estoy escribiendo en mi teclado?

1003
00:44:47,860 --> 00:44:48,359
¿Sí?

1004
00:44:48,359 --> 00:44:50,950
AUDIENCIA: [inaudible].

1005
00:44:50,950 --> 00:44:52,340
>> DAVID MALAN: Exactamente.

1006
00:44:52,340 --> 00:44:55,600
Cada uno de esos personajes es
ir a Google, uno a la vez.

1007
00:44:55,600 --> 00:44:58,490
Están construyendo una cadena
en su servidor que representa

1008
00:44:58,490 --> 00:44:59,936
todo lo que he escrito en hasta el momento.

1009
00:44:59,936 --> 00:45:01,810
Y cada vez que escriba
otro personaje, que

1010
00:45:01,810 --> 00:45:04,530
utilizar su salsa secreta de un
buscar algoritmo y averiguar,

1011
00:45:04,530 --> 00:45:07,370
Qué quiere decir esta página gato
o esta página gato o similar?

1012
00:45:07,370 --> 00:45:10,620
Así que, en cierto sentido, me proporciona una
mejor experiencia en que yo no hago incluso

1013
00:45:10,620 --> 00:45:11,860
deberá completar mi pensamiento.

1014
00:45:11,860 --> 00:45:14,440
Y, en efecto, es un útil
cosa, autocompletado en general.

1015
00:45:14,440 --> 00:45:17,690
Si sus algoritmos son lo suficientemente buenos
y si mis búsquedas son bastante obvias,

1016
00:45:17,690 --> 00:45:19,300
Yo no tengo que escribir la palabra entera.

1017
00:45:19,300 --> 00:45:22,110
Van a decirme lo que
es que estoy realmente buscando.

1018
00:45:22,110 --> 00:45:25,940
Así que lo que Google llama instantánea
búsqueda se acaba usando AJAX,

1019
00:45:25,940 --> 00:45:30,820
utilizando el código que les permite solicitar
contenido adicional a través de un navegador web

1020
00:45:30,820 --> 00:45:34,026
detrás de las escenas que utilizan este
nuevo idioma, JavaScript.

1021
00:45:34,026 --> 00:45:35,400
Así que tenemos un par de minutos para el final.

1022
00:45:35,400 --> 00:45:37,710
Y déjame llamar a mi amigo
Colton al escenario,

1023
00:45:37,710 --> 00:45:40,090
ya que parecía
especialmente divertido última vez

1024
00:45:40,090 --> 00:45:42,290
para introducir una tecnología
que algunos de ustedes

1025
00:45:42,290 --> 00:45:44,769
han expresado su interés
por los proyectos finales.

1026
00:45:44,769 --> 00:45:47,310
Pensamos que sería divertido para llevar
un voluntario, sin embargo, hoy en día

1027
00:45:47,310 --> 00:45:50,074
que le muestre una adición a
esto que usted-- permite sí,

1028
00:45:50,074 --> 00:45:50,990
Vi por primera vez esta mano.

1029
00:45:50,990 --> 00:45:52,900
Vamos arriba.

1030
00:45:52,900 --> 00:45:53,560
Muy bien hecho.

1031
00:45:53,560 --> 00:45:55,035
Buen trabajo.

1032
00:45:55,035 --> 00:45:57,410
Voy a proyectar esto en
la pantalla en un momento.

1033
00:45:57,410 --> 00:45:58,150
¿Cuál es tu nombre para todo el mundo?

1034
00:45:58,150 --> 00:45:59,180
>> EPT: Soy Efa.

1035
00:45:59,180 --> 00:45:59,410
>> DAVID MALAN: Etha?

1036
00:45:59,410 --> 00:45:59,785
>> EPT: Efa.

1037
00:45:59,785 --> 00:46:00,160
>> DAVID MALAN: Efa?

1038
00:46:00,160 --> 00:46:00,730
>> EPT: Sí.

1039
00:46:00,730 --> 00:46:01,250
>> DAVID MALAN: Encantado de verte.

1040
00:46:01,250 --> 00:46:01,600
Correcto.

1041
00:46:01,600 --> 00:46:02,590
A ver si esta listo.

1042
00:46:02,590 --> 00:46:04,423
Vamos a la
medio con Colton aquí.

1043
00:46:04,423 --> 00:46:07,050
Qué Colton tiene en sus manos
hoy es un mando a distancia.

1044
00:46:07,050 --> 00:46:10,440
Así que en lugar de te quedes ahí parado en un
mundo tridimensional mirando a su alrededor

1045
00:46:10,440 --> 00:46:14,080
como lo hizo Colton, ahora puede Efa
realmente caminar subiendo,

1046
00:46:14,080 --> 00:46:16,689
abajo, izquierda y derecha como un
Mando de Nintendo o Xbox.

1047
00:46:16,689 --> 00:46:18,230
EPT: Voy a caer fuera del escenario.

1048
00:46:18,230 --> 00:46:20,500
DAVID MALAN: lo haré
permanecer más o menos por aquí.

1049
00:46:20,500 --> 00:46:21,991
Pero ese es un riesgo.

1050
00:46:21,991 --> 00:46:22,490
OK.

1051
00:46:22,490 --> 00:46:25,690
Así que adelante y poner los de.

1052
00:46:25,690 --> 00:46:29,315
Déjame ir adelante y
cambiar a la pantalla aquí.

1053
00:46:29,315 --> 00:46:30,670
Déjame apagar las luces.

1054
00:46:30,670 --> 00:46:32,780
Y Colton, me dejó
llegado stand de al lado de usted.

1055
00:46:32,780 --> 00:46:35,520
>> ¿Quieres explicar aquí
con el micrófono lo que estamos haciendo?

1056
00:46:35,520 --> 00:46:36,380
Aqui tienes.

1057
00:46:36,380 --> 00:46:37,280
>> COLTON: Claro.

1058
00:46:37,280 --> 00:46:39,980
Así que ahora mismo estamos
cargando el Oculus,

1059
00:46:39,980 --> 00:46:43,070
Supongo operating-- que no opera
sistema, pero el programa principal, donde

1060
00:46:43,070 --> 00:46:46,630
se puede acceder a todos los juegos y
aplicaciones que se encuentran en su biblioteca.

1061
00:46:46,630 --> 00:46:50,060
Así que ahora mismo, debe decir
toque el panel táctil para empezar.

1062
00:46:50,060 --> 00:46:53,430
Touchpad va a ser en el
lado derecho de los auriculares.

1063
00:46:53,430 --> 00:46:54,569
Así que adelante y tap--

1064
00:46:54,569 --> 00:46:55,110
EPT: Oh, hombre.

1065
00:46:55,110 --> 00:46:56,443
DAVID MALAN: Sí, ahí lo tienes.

1066
00:46:56,443 --> 00:47:00,340

1067
00:47:00,340 --> 00:47:02,460
La calidad Efa está viendo
es mucho más alta calidad.

1068
00:47:02,460 --> 00:47:03,831
Esto es sólo el Wi-Fi aquí.

1069
00:47:03,831 --> 00:47:05,580
COLTON: Entonces, ¿qué estás
va a querer hacer

1070
00:47:05,580 --> 00:47:08,350
es mirar hacia la parte superior
derecha de la pantalla.

1071
00:47:08,350 --> 00:47:10,420
Sí, ese juego en la parte superior derecha.

1072
00:47:10,420 --> 00:47:14,780
Y luego, cuando usted está seleccionando
que, toque la pantalla táctil de nuevo.

1073
00:47:14,780 --> 00:47:17,010
Creo que sus Dreadhalls.

1074
00:47:17,010 --> 00:47:20,820
Y entonces aquí está A-- aquí, y mucho
yo sostengo sus anteojos para usted.

1075
00:47:20,820 --> 00:47:24,420

1076
00:47:24,420 --> 00:47:25,790
>> Así que sólo le di un controlador.

1077
00:47:25,790 --> 00:47:28,886
Así que ahora él puede controlar el juego.

1078
00:47:28,886 --> 00:47:30,510
Él puede moverse y cosas por el estilo.

1079
00:47:30,510 --> 00:47:31,968
Así que adelante y mirar hacia arriba hasta la cima.

1080
00:47:31,968 --> 00:47:33,640
Debería ver New Game.

1081
00:47:33,640 --> 00:47:36,310
Así que adelante y usted puede hacer eso.

1082
00:47:36,310 --> 00:47:39,320
Ahora, usted debería ser capaz de controlar
a ti mismo con el controlador,

1083
00:47:39,320 --> 00:47:43,860
así, tan pronto como sea
el juego se carga aquí.

1084
00:47:43,860 --> 00:47:46,356
Esto podría ser un poco de miedo.

1085
00:47:46,356 --> 00:47:47,300
>> EPT: Ahora usted me dice.

1086
00:47:47,300 --> 00:47:50,132
OK.

1087
00:47:50,132 --> 00:47:51,080
>> COLTON: De acuerdo.

1088
00:47:51,080 --> 00:47:52,650
Así que confirme que puede moverse.

1089
00:47:52,650 --> 00:47:52,750
OK.

1090
00:47:52,750 --> 00:47:53,583
Puedes moverte.

1091
00:47:53,583 --> 00:47:54,300
Perfecto.

1092
00:47:54,300 --> 00:47:56,470
Así que si se mira hacia abajo, tienes un mapa.

1093
00:47:56,470 --> 00:47:58,170
Mapa que muestra dónde se encuentra.

1094
00:47:58,170 --> 00:47:59,720
Usted puede mirar alrededor de la habitación.

1095
00:47:59,720 --> 00:48:01,440
Usted puede dar vuelta totalmente alrededor.

1096
00:48:01,440 --> 00:48:02,128
Si exacto.

1097
00:48:02,128 --> 00:48:02,627
Giro de vuelta.

1098
00:48:02,627 --> 00:48:05,370

1099
00:48:05,370 --> 00:48:07,125
>> Así que mira a su izquierda.

1100
00:48:07,125 --> 00:48:09,875
Creo que hay algo que se puede
recoger en un barril en la habitación.

1101
00:48:09,875 --> 00:48:11,709
>> EPT: ¿Cómo puedo obtener la
mapa del camino?

1102
00:48:11,709 --> 00:48:12,375
COLTON: Mire para arriba.

1103
00:48:12,375 --> 00:48:12,980
Basta con mirar hacia arriba.

1104
00:48:12,980 --> 00:48:13,480
Correcto.

1105
00:48:13,480 --> 00:48:13,765
Ahi tienes.

1106
00:48:13,765 --> 00:48:15,181
Ahora seguir adelante y simplemente dar la vuelta.

1107
00:48:15,181 --> 00:48:21,460

1108
00:48:21,460 --> 00:48:24,620
Así que mira más hacia la izquierda.

1109
00:48:24,620 --> 00:48:25,530
Manténgase en movimiento a la izquierda.

1110
00:48:25,530 --> 00:48:26,960
Sigue buscando izquierdo.

1111
00:48:26,960 --> 00:48:27,541
Continua.

1112
00:48:27,541 --> 00:48:28,040
Sí.

1113
00:48:28,040 --> 00:48:28,720
>> EPT: Oh, de esa manera.

1114
00:48:28,720 --> 00:48:29,261
>> COLTON: Sí.

1115
00:48:29,261 --> 00:48:30,999
Camina hacia ella con el controlador.

1116
00:48:30,999 --> 00:48:31,540
Ahi tienes.

1117
00:48:31,540 --> 00:48:32,790
Ahora debe decir recogerlo.

1118
00:48:32,790 --> 00:48:33,360
Ahi tienes.

1119
00:48:33,360 --> 00:48:34,290
Cógelo.

1120
00:48:34,290 --> 00:48:35,550
Correcto.

1121
00:48:35,550 --> 00:48:38,286
Ahora, vamos a salir de esta habitación.

1122
00:48:38,286 --> 00:48:42,209
Vaya por delante y caminar a la puerta.

1123
00:48:42,209 --> 00:48:45,000
Así que vas a hold-- dice
mantenga pulsado el botón para que la fuerza abierta.

1124
00:48:45,000 --> 00:48:46,333
Así que adelante y mantenga pulsado el botón.

1125
00:48:46,333 --> 00:48:48,250
Sí, lo que obligó abrir.

1126
00:48:48,250 --> 00:48:48,750
Correcto.

1127
00:48:48,750 --> 00:48:49,410
Buen trabajo.

1128
00:48:49,410 --> 00:48:50,826
Ahora estamos saliendo de la habitación.

1129
00:48:50,826 --> 00:48:56,970

1130
00:48:56,970 --> 00:49:01,366
Así que voy a dejar el resto
para usted y ver lo que averigüe.

1131
00:49:01,366 --> 00:49:02,865
EPT: yo no voy en el cuarto oscuro.

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
Ahora tengo que ir por el pasillo oscuro?

1135
00:49:09,314 --> 00:49:10,785
OK, voy a volver [inaudible].

1136
00:49:10,785 --> 00:49:15,520

1137
00:49:15,520 --> 00:49:16,270
COLTON: De acuerdo.

1138
00:49:16,270 --> 00:49:17,560
Algunos más elementos a recoger.

1139
00:49:17,560 --> 00:49:19,370
Parece que algunas monedas.

1140
00:49:19,370 --> 00:49:22,242
Eso es una ganzúa.

1141
00:49:22,242 --> 00:49:24,200
Así que si usted encuentra un encerrados
puerta, usted puede usar eso.

1142
00:49:24,200 --> 00:49:27,755

1143
00:49:27,755 --> 00:49:28,380
¿Tienes miedo?

1144
00:49:28,380 --> 00:49:29,371
>> EPT: Todavía no.

1145
00:49:29,371 --> 00:49:29,871
COLTON: OK.

1146
00:49:29,871 --> 00:49:34,850

1147
00:49:34,850 --> 00:49:35,497
>> Pretend-- sí.

1148
00:49:35,497 --> 00:49:37,330
Sólo fingir que eres
en realidad allí de pie.

1149
00:49:37,330 --> 00:49:39,580
Y si a su vez around--
usted tiene que acostumbrarse a él.

1150
00:49:39,580 --> 00:49:40,752
Pero tiene sentido.

1151
00:49:40,752 --> 00:49:43,960
DAVID MALAN: Y mientras Efa sigue
jugar, ya que podíamos hacer esto todo el día,

1152
00:49:43,960 --> 00:49:45,381
todos podemos puntillas aquí.

1153
00:49:45,381 --> 00:49:48,130
Pero tenemos otros dos pares,
si te gustaría venir y jugar.

1154
00:49:48,130 --> 00:49:49,980
De lo contrario, vamos a ver
el próximo miércoles.

1155
00:49:49,980 --> 00:49:51,354
¡Gracias a nuestra voluntaria hoy.

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
>> [MÚSICA - "Seinfeld TEMA"]

1159
00:49:57,392 --> 00:49:58,222

1160
00:49:58,222 --> 00:50:00,180
ALTAVOZ 1: Bueno, estoy
poner una nueva PL montar en.

1161
00:50:00,180 --> 00:50:01,800
Acabo de cambiar el OLPF--

1162
00:50:01,800 --> 00:50:03,980
>> ALTAVOZ 2: Entonces, ¿qué
estás haciendo exactamente?

1163
00:50:03,980 --> 00:50:07,063
>> ALTAVOZ 1: Bueno, cada uno de these--
aquí, te voy a mostrar éste aquí.

1164
00:50:07,063 --> 00:50:08,690
Se puede ver aquí.

1165
00:50:08,690 --> 00:50:09,510
>> ALTAVOZ 3: Creo que estoy bien con estos.

1166
00:50:09,510 --> 00:50:09,933
¿Quieres algo más?

1167
00:50:09,933 --> 00:50:11,325
>> ALTAVOZ 4: No, estoy bien. [Inaudible].

1168
00:50:11,325 --> 00:50:12,200
>> ALTAVOZ 3: No, [inaudible].

1169
00:50:12,200 --> 00:50:12,700
Toma un poco.

1170
00:50:12,700 --> 00:50:21,165

1171
00:50:21,165 --> 00:50:22,290
ALTAVOZ 1: Diverso color.

1172
00:50:22,290 --> 00:50:22,890
ALTAVOZ 2: OK.

1173
00:50:22,890 --> 00:50:26,690
ALTAVOZ 1: Así que en última instancia, lo que
hace es que ajusta el color de--