1
00:00:00,000 --> 00:00:09,900
[MÚSICA DE FONDO]

2
00:00:09,900 --> 00:00:11,350
DAVID: Muy bien.

3
00:00:11,350 --> 00:00:17,590
Esto es CS50 e iniciaremos la
lección 11, estamos muy cerca del final.

4
00:00:17,590 --> 00:00:20,830
Entre los objetivos de hoy, la siguiente
vez y para nuestra lección final

5
00:00:20,830 --> 00:00:24,940
juntos, está unir las cosas
que vimos desde la semana cero.

6
00:00:24,940 --> 00:00:30,150
Con esa intención, pensé que
podríamos iniciar con el siguiente clip,

7
00:00:30,150 --> 00:00:31,900
tal vez lo recordemos
de unas semanas atrás,

8
00:00:31,900 --> 00:00:37,600
en donde tratamos de observar en medios
de comunicación populares la percepción

9
00:00:37,600 --> 00:00:40,540
de los espectadores sobre la
tecnología, si confían más

10
00:00:40,540 --> 00:00:44,470
en programas como este, en CSI
y similares que vemos en la pantalla

11
00:00:44,470 --> 00:00:46,400
aunque técnicamente
esto no es muy preciso.

12
00:00:46,400 --> 00:00:51,670
También es maravilloso decirles, que
muy recientemente salió Stranger Things 2,

13
00:00:51,670 --> 00:00:54,590
seguramente la mayoría de
ustedes sabe a qué me refiero y tal vez

14
00:00:54,590 --> 00:00:58,220
si son como yo la terminaron el
sábado, después de que salió el viernes.

15
00:00:58,220 --> 00:01:00,310
Y lo que vimos en la pantalla,

16
00:01:00,310 --> 00:01:01,930
déjenme decirles esto,
no es un spoiler,

17
00:01:01,930 --> 00:01:04,209
pero estaba tan orgulloso
de esta serie en particular.

18
00:01:04,209 --> 00:01:06,700
Pero antes de que
lleguemos allí, les adelantaré

19
00:01:06,700 --> 00:01:09,400
una versión de CS50
de esa misma serie.

20
00:01:09,400 --> 00:01:10,570
Si pudiéramos atenuar las luces.

21
00:01:10,570 --> 00:02:09,220
[REPRODUCCIÓN DEL TEMA STRANGER THINGS]

22
00:02:09,220 --> 00:02:12,250
OK, eso básicamente fue 
una introducción para lo siguiente,

23
00:02:12,250 --> 00:02:16,804
si nunca hemos visto Stranger
Things, o al menos todos los episodios,

24
00:02:16,804 --> 00:02:18,970
y no quiero que
todo el Internet me odie,

25
00:02:18,970 --> 00:02:21,290
y mucho menos los que están en esta sala,
pero cerremos nuestros ojos brevemente,

26
00:02:21,290 --> 00:02:24,340
en verdad esto no es un spoiler, todo
es técnico y no arruina ninguna trama,

27
00:02:24,340 --> 00:02:25,950
aunque a nadie va a
importarle en algunas semanas,

28
00:02:25,950 --> 00:02:27,280
así que pensamos que
podríamos revelar esto.

29
00:02:27,280 --> 00:02:29,590
Es momento de que
pongamos los dedos en nuestros oídos

30
00:02:29,590 --> 00:02:34,429
y cerremos los ojos si no queremos saber
más, en algún momento de la presentación,

31
00:02:34,429 --> 00:02:35,470
tenemos esta
escena de aquí.

32
00:02:35,470 --> 00:02:37,990
Por supuesto, en cada serie
como CSI, La ley y el orden,

33
00:02:37,990 --> 00:02:41,020
y cosas por el estilo, si amplían
y mejoran la pantalla,

34
00:02:41,020 --> 00:02:44,860
se vuelve un sinsentido, como un programa
de tipo crayón, como lo que vimos en CSI.

35
00:02:44,860 --> 00:02:49,000
Pero estaba tan orgulloso de ver eso
que si nos acercamos a esta pantalla,

36
00:02:49,000 --> 00:02:52,690
veremos este código, en un
lenguaje llamado Visual Basic.

37
00:02:52,690 --> 00:02:54,820
Y a pesar de que no
aprenderemos Visual Basic,

38
00:02:54,820 --> 00:02:57,490
ni muchas personas usan
Visual Basic tanto como antes,

39
00:02:57,490 --> 00:03:02,515
¿podemos deducir lo que este
programador hacía en la pantalla?

40
00:03:02,515 --> 00:03:05,390


41
00:03:05,390 --> 00:03:06,954
¿Qué parece ocurrir?

42
00:03:06,954 --> 00:03:09,620
PÚBLICO: ¿Es algo como obtener una
contraseña de cuatro dígitos o romperla?

43
00:03:09,620 --> 00:03:11,720
DAVID: Sí, fue
un programa con el cual

44
00:03:11,720 --> 00:03:13,730
rompieron una
contraseña de cuatro dígitos.

45
00:03:13,730 --> 00:03:16,370
Si deducimos todos
los bucles en esta estructura,

46
00:03:16,370 --> 00:03:19,370
veremos que hace intentos
para obtener un dígito tras otro dígito

47
00:03:19,370 --> 00:03:21,290
tras otro dígito tras otro
dígito y prueba con todos ellos,

48
00:03:21,290 --> 00:03:25,310
hasta que finalmente encuentra
ese valor y sucede algo interesante.

49
00:03:25,310 --> 00:03:28,920
Ahora, todos lo que tengan
los ojos cerrados pueden escuchar esto,

50
00:03:28,920 --> 00:03:31,700
pueden sacar los dedos
de sus oídos y continuaremos.

51
00:03:31,700 --> 00:03:35,000
Pero tal vez el primer ejemplo
de los medios y un programa reciente

52
00:03:35,000 --> 00:03:36,660
sea lo que funciona en la pantalla.

53
00:03:36,660 --> 00:03:39,860
Hoy veremos
nuevamente un modelo que

54
00:03:39,860 --> 00:03:43,730
presentamos hace algún tiempo, el MVC
o modelo-vista-controlador, que solo

55
00:03:43,730 --> 00:03:47,510
es una manera elegante para
describir un tipo de programación

56
00:03:47,510 --> 00:03:52,040
muy popular en la web, en estos días,
con el cual tenemos un controlador, que

57
00:03:52,040 --> 00:03:54,650
es el código que
escribimos en Pset 6

58
00:03:54,650 --> 00:03:57,020
y ahora en Pset 7, en application.pi.

59
00:03:57,020 --> 00:04:00,004
El hecho de que se llame application.pi
es por una convención en Flask,

60
00:04:00,004 --> 00:04:01,670
pero allí es a donde
va toda nuestra lógica.

61
00:04:01,670 --> 00:04:04,580
Como en el código que
dirige nuestro sitio web,

62
00:04:04,580 --> 00:04:07,125
¿en cuál carpeta o archivos
está lo que conocemos como vistas?

63
00:04:07,125 --> 00:04:10,560


64
00:04:10,560 --> 00:04:11,060
¿Díganlo de nuevo?

65
00:04:11,060 --> 00:04:11,730
PÚBLICO: ¿En HTML?

66
00:04:11,730 --> 00:04:13,230
DAVID: Sí, en el archivo HTML.

67
00:04:13,230 --> 00:04:16,182
En el subdirectorio de formatos,
que también es parte de Flask,

68
00:04:16,182 --> 00:04:17,890
tenemos un montón de
archivos HTML, que son

69
00:04:17,890 --> 00:04:20,829
las vistas, la estética o la presentación
de la información de nuestro

70
00:04:20,829 --> 00:04:21,740
programa.

71
00:04:21,740 --> 00:04:25,750
La semana pasada, al final
les presentamos el modelo, la M en MVC,

72
00:04:25,750 --> 00:04:27,730
que representa los datos,
a nuestra base de datos,

73
00:04:27,730 --> 00:04:31,920
tal vez sea un archivo csv, api
o para obtener cotizaciones de la bolsa,

74
00:04:31,920 --> 00:04:35,320
tal vez es una base de datos continua,
en la que almacenemos a los usuarios,

75
00:04:35,320 --> 00:04:36,940
carteras de acciones y más.

76
00:04:36,940 --> 00:04:39,430
Juntas, estas tres
entidades conforman

77
00:04:39,430 --> 00:04:43,270
una aplicación bastante
interesante, ya sea para Pset 6, Pset 7

78
00:04:43,270 --> 00:04:44,440
o alguna posterior.

79
00:04:44,440 --> 00:04:49,019
Pero hoy, les presentaremos
una pieza más y otro lenguaje.

80
00:04:49,019 --> 00:04:51,310
Sé que hemos descubierto
bastantes lenguajes hasta ahora,

81
00:04:51,310 --> 00:04:55,810
Scratch, C, Python y SQL,
sin mencionar el HTML y el CSS.

82
00:04:55,810 --> 00:04:59,950
Pero hoy, presentaremos el último de
nuestros lenguaje en CS50, JavaScript.

83
00:04:59,950 --> 00:05:03,220
Veremos que JavaScript es la 
última de las tecnologías de apoyo que

84
00:05:03,220 --> 00:05:07,570
nos permitirá construir funciones y
herramientas que conocemos muy bien

85
00:05:07,570 --> 00:05:10,450
en estos tiempos,
en nuestros teléfonos y laptops.

86
00:05:10,450 --> 00:05:13,840
Pero antes de hacer
eso, nos detendremos en

87
00:05:13,840 --> 00:05:16,660
un ejemplo, por medio del cual
conectaremos la semana pasada

88
00:05:16,660 --> 00:05:23,500
con esta, en una última mirada
al sitio web de Frosh IMs de antaño.

89
00:05:23,500 --> 00:05:27,550
Para continuar ejecutaré este
programa de la siguiente manera.

90
00:05:27,550 --> 00:05:28,900
flask run.

91
00:05:28,900 --> 00:05:32,070
Este es froshims4, está disponible
en el código de distribución de hoy.

92
00:05:32,070 --> 00:05:35,189
Para continuar, si abro esta
URL, es un programa muy simple,

93
00:05:35,189 --> 00:05:37,480
le hare un acercamiento, que
le da a los usuarios la habilidad

94
00:05:37,480 --> 00:05:42,020
para registrarse, ver quién se registró
y anular su registro ellos mismos.

95
00:05:42,020 --> 00:05:44,260
Si quiero continuar
aquí y registrarme,

96
00:05:44,260 --> 00:05:47,710
veré un formulario como este y
puedo elegir del menú desplegable

97
00:05:47,710 --> 00:05:50,350
mi dormitorio de Harvard y
después registrar mi nombre.

98
00:05:50,350 --> 00:05:54,160
En la primera versión, hace algunas
semanas, este programa no hizo nada.

99
00:05:54,160 --> 00:05:55,641
Solamente desechamos la información

100
00:05:55,641 --> 00:05:57,640
entonces hicimos algo
un poco más interesante,

101
00:05:57,640 --> 00:06:00,790
guardamos los datos en el
correo electrónico de alguien más,

102
00:06:00,790 --> 00:06:04,930
con solo enviarle un correo y añadimos
los archivos csv, que no estuvieron mal,

103
00:06:04,930 --> 00:06:08,960
pero ¿cuáles son los inconvenientes de
usar solamente archivos de texto csv?

104
00:06:08,960 --> 00:06:10,710
PÚBLICO: Toma
mucho tiempo buscarlos.

105
00:06:10,710 --> 00:06:13,982
DAVID: Sí, puede tomar
mucho tiempo buscarlos,

106
00:06:13,982 --> 00:06:16,940
porque, en especial, a medida que crecen
más y más, lo mejor que podemos hacer

107
00:06:16,940 --> 00:06:17,600
es de tipo lineal,

108
00:06:17,600 --> 00:06:20,467
tenemos que buscar en todo
archivo solo para encontrar un valor

109
00:06:20,467 --> 00:06:22,550
porque no existe una
estructura en los datos,


110
00:06:22,550 --> 00:06:26,270
son como un arreglo de líneas,
por así decirlo, una lista de texto

111
00:06:26,270 --> 00:06:27,560
que tenemos que buscar.

112
00:06:27,560 --> 00:06:31,970
Tampoco tenemos funciones
como seleccionar, insertar y eliminar,

113
00:06:31,970 --> 00:06:35,120
estos verbos u operadores que
obtuvimos de una base de datos

114
00:06:35,120 --> 00:06:39,290
la semana pasada, que nos permiten
trabajar más y más fácilmente, sin tener

115
00:06:39,290 --> 00:06:40,340
que escribir tanto del código.

116
00:06:40,340 --> 00:06:42,230
Podemos únicamente
ejecutar un comando de SQL,

117
00:06:42,230 --> 00:06:45,660
como seleccionar, insertar,
eliminar, actualizar o algo así.

118
00:06:45,660 --> 00:06:48,380
¿Cómo construimos
una pieza como esta?

119
00:06:48,380 --> 00:06:54,530
Bueno, recordemos que si entramos
en el código fuente de Frosh IMs 4,

120
00:06:54,530 --> 00:06:57,560
tendríamos algún punto
de entrada, como application.pi,

121
00:06:57,560 --> 00:06:58,940
y algunas rutas diferentes.

122
00:06:58,940 --> 00:07:02,210
Esto nos resultaría conocido si nos
sumergimos antes en finanzas CS50,

123
00:07:02,210 --> 00:07:05,797
la primera de estas rutas,
hasta arriba, renders index. HTML,

124
00:07:05,797 --> 00:07:07,130
allí es donde veo el menú.

125
00:07:07,130 --> 00:07:10,040
Y las posibilidades son,
un index. HTML es esa lista con viñetas

126
00:07:10,040 --> 00:07:12,980
de tres opciones, cada una de
las cuales enlaza una ruta diferente.

127
00:07:12,980 --> 00:07:15,710
Entonces las rutas comienzan a
volverse un poco más interesantes.

128
00:07:15,710 --> 00:07:19,400
En la pantalla aquí,
de la línea 13 hacia abajo,

129
00:07:19,400 --> 00:07:22,580
está la lógica, mi código
controlador, por así decirlo,

130
00:07:22,580 --> 00:07:26,146
este me permite insertar
un usuario en mi base de datos.

131
00:07:26,146 --> 00:07:27,020
¿Y cómo lo hago?

132
00:07:27,020 --> 00:07:29,000
Bueno, en las líneas 15 y
16 hago la siguiente pregunta,

133
00:07:29,000 --> 00:07:33,200
Si el método de solicitudes y que
para entrar es get ¿qué es lo que hago?

134
00:07:33,200 --> 00:07:33,710
¿En inglés?

135
00:07:33,710 --> 00:07:37,290


136
00:07:37,290 --> 00:07:38,700
Coloco el formato de registro.

137
00:07:38,700 --> 00:07:42,840
Le muestro al usuario
register.HTML, uso

138
00:07:42,840 --> 00:07:44,550
la función
render_template, que antes

139
00:07:44,550 --> 00:07:46,580
utilizamos para
generar los archivos HTML.

140
00:07:46,580 --> 00:07:49,290
De lo contrario, si el usuario
utilizó la publicación, es decir,

141
00:07:49,290 --> 00:07:53,490
al parecer hizo clic en un botón,
y lo envió al mismo punto de

142
00:07:53,490 --> 00:07:55,380
término, solo vamos a
distinguir el comportamiento.

143
00:07:55,380 --> 00:07:56,505
Si enviaron un formulario

144
00:07:56,505 --> 00:08:00,360
mediante una publicación, seguimos
y ejecutamos estas cinco líneas de aquí.

145
00:08:00,360 --> 00:08:04,765
Y esta línea, la 18, si no se solicita,
o si no se le solicita el name y el dorm,

146
00:08:04,765 --> 00:08:07,890
esa era una manera de indicar si
el usuario olvidó darnos su dormitorio

147
00:08:07,890 --> 00:08:13,110
o su nombre y emite un mensaje
de error como este failure.HTML.

148
00:08:13,110 --> 00:08:15,870
De lo contrario, si el
usuario nos dio la información,

149
00:08:15,870 --> 00:08:20,580
podemos usar el método de ejecución de
CS50 en la variable db que declaramos aquí

150
00:08:20,580 --> 00:08:24,150
podemos insertar en into registrants
un name y un dorm, estos dos valores

151
00:08:24,150 --> 00:08:27,970
en específico y recordemos que
esta sintaxis con dos puntos es nueva,

152
00:08:27,970 --> 00:08:30,330
en gran parte del mundo
de SQLs es una convención

153
00:08:30,330 --> 00:08:32,309
que cuando queremos
conectar los valores, en lugar de

154
00:08:32,309 --> 00:08:37,350
usar %s, como en nuestros
días en C o de usar las llaves

155
00:08:37,350 --> 00:08:42,120
de nuestros días con
Python y los stringf, en su lugar

156
00:08:42,120 --> 00:08:46,110
solo pasamos dos valores por
medio de nombres como name y dorm.

157
00:08:46,110 --> 00:08:48,270
Luego, ¿qué pasa aquí, exactamente?

158
00:08:48,270 --> 00:08:51,540
Si entro en este sitio
web y registro David

159
00:08:51,540 --> 00:08:55,440
de St. Matthews, hago clic
en Register, porque la aplicación se

160
00:08:55,440 --> 00:08:58,020
ejecuta con Flask,
me dice que estoy registrado.

161
00:08:58,020 --> 00:08:59,300
¿Cómo puedo demostrarlo?

162
00:08:59,300 --> 00:09:01,650
Bueno, a continuación
abriré otra terminal,

163
00:09:01,650 --> 00:09:06,810
entraré en el código fuente de
hoy, froshims4 y si luego escribo ls,

164
00:09:06,810 --> 00:09:09,330
noten que esto es lo que
conforma esta aplicación.

165
00:09:09,330 --> 00:09:13,560
Uno de estos archivos es froshims.db,
si sigo y ejecuto esta herramienta de la

166
00:09:13,560 --> 00:09:16,501
línea de comando,
sqlite3 en froshims4.db

167
00:09:16,501 --> 00:09:18,000
Obtuve una interfaz de línea de comando.

168
00:09:18,000 --> 00:09:20,875
Tal vez no estemos cómodos
con este enfoque y eso está bien,

169
00:09:20,875 --> 00:09:24,870
pero nos permite hacer cosas muy
simples como mostrarme mi esquema

170
00:09:24,870 --> 00:09:28,050
y desde esta interface textual
puedo ver cuál es el formato

171
00:09:28,050 --> 00:09:31,080
de esa base de datos, solo tiene
una tabla que se llama registrants

172
00:09:31,080 --> 00:09:33,090
y luego, si quisiera ver
quién está registrado

173
00:09:33,090 --> 00:09:38,590
tal vez además de mí, ¿qué puedo escribir
en esta interfaz de línea de comandos?

174
00:09:38,590 --> 00:09:41,710
¿Qué puedo escribir aquí?

175
00:09:41,710 --> 00:09:42,310
¿Sí?

176
00:09:42,310 --> 00:09:44,070
PÚBLICO: Select * from registrants.

177
00:09:44,070 --> 00:09:46,760
DAVID: Sí, select * from registrants

178
00:09:46,760 --> 00:09:49,574
punto y coma, y ​​veo una tabla
que se basa mucho en el texto

179
00:09:49,574 --> 00:09:50,990
que me muestra quién
está en la base de datos.

180
00:09:50,990 --> 00:09:52,430
Hasta ahora, solo soy yo.

181
00:09:52,430 --> 00:09:54,471
Podría jugar con esto
en la línea de comandos,

182
00:09:54,471 --> 00:09:57,800
como actualizarlo, eliminarlo y
demás, pero la clave de la última vez,

183
00:09:57,800 --> 00:10:00,980
fue que una vez que
estemos más cómodos con el SQL,

184
00:10:00,980 --> 00:10:05,510
comenzaremos a usar
declaraciones en SQL, las ponemos

185
00:10:05,510 --> 00:10:09,500
entre comillas dobles en Python y
hacemos que Python ejecute estas consultas

186
00:10:09,500 --> 00:10:12,410
en SQL para nosotros, 
en nuestra base de datos.

187
00:10:12,410 --> 00:10:15,380
Mientras tanto, démosle
un vistazo a otra función aquí.

188
00:10:15,380 --> 00:10:18,350
Antes de registrarme hace
un momento, tenía este menú desplegable,

189
00:10:18,350 --> 00:10:22,410
podría haber codificado esto,
lo cual sin duda estaría bien.

190
00:10:22,410 --> 00:10:26,360
Pero si quisiera eliminar
un usuario y permítanme

191
00:10:26,360 --> 00:10:27,570
mostrarles esto aquí.

192
00:10:27,570 --> 00:10:33,140
Si entro, ¿qué archivos son esos?
eso está en mi directorio de formatos.

193
00:10:33,140 --> 00:10:36,770
Si voy a register.HTML aquí, codifiqué

194
00:10:36,770 --> 00:10:40,070
todos esos dormitorios, disponibles
para que los estudiantes de Harvard

195
00:10:40,070 --> 00:10:41,270
se registren en ellos.

196
00:10:41,270 --> 00:10:43,310
Pero ¿qué pasa con mi
página para anular el registro?

197
00:10:43,310 --> 00:10:45,770
Déjenme regresar,
hare clic en anular el registro

198
00:10:45,770 --> 00:10:48,950
y lo que veremos aquí,
veo un menú más bonito

199
00:10:48,950 --> 00:10:52,040
que tiene el nombre de la persona,
su dormitorio y si se registró.

200
00:10:52,040 --> 00:10:54,870
Pero quiero anular, de alguna
manera, el registro del usuario

201
00:10:54,870 --> 00:10:58,670
Bueno, si continúo y envío
este formato, ¿cuál valor podría

202
00:10:58,670 --> 00:11:03,200
querer el navegador para enviarlo
desde el navegador al servidor?

203
00:11:03,200 --> 00:11:04,160
¿David?

204
00:11:04,160 --> 00:11:04,970
¿Matthews?

205
00:11:04,970 --> 00:11:06,230
¿David from Matthews?

206
00:11:06,230 --> 00:11:07,800
¿Algún otro?

207
00:11:07,800 --> 00:11:11,032
¿Qué dice nuestro instinto cuando
enviamos algo desde un formato

208
00:11:11,032 --> 00:11:12,990
a un servidor, cuando quiero
hacer algo con esos datos,

209
00:11:12,990 --> 00:11:14,850
como en este caso, como
anular el registro del usuario?

210
00:11:14,850 --> 00:11:17,490


211
00:11:17,490 --> 00:11:18,336
¿Qué es lo que piensan?

212
00:11:18,336 --> 00:11:19,050
PÚBLICO: ¿El número ID?

213
00:11:19,050 --> 00:11:20,883
DAVID: Sí, tal vez su número ID.

214
00:11:20,883 --> 00:11:21,450
Pero, ¿por qué?

215
00:11:21,450 --> 00:11:23,922
Tengo esta cadena, David
from Matthews, ¿por qué no

216
00:11:23,922 --> 00:11:26,880
envío la cadena,
la busco en mi base de datos

217
00:11:26,880 --> 00:11:28,700
y luego elimino
a David from Matthews?

218
00:11:28,700 --> 00:11:30,065
PÚBLICO: Podría haber
otros David from Matthew.

219
00:11:30,065 --> 00:11:32,273
DAVID: Sí, potencialmente
podría haber una equivocación.

220
00:11:32,273 --> 00:11:34,450
Si hay por alguna coincidencia hay 
un par o más de David from Matthew,

221
00:11:34,450 --> 00:11:37,199
podríamos anular
el registro de todos ellos,

222
00:11:37,199 --> 00:11:38,990
de ambos, por muchos que tengamos.

223
00:11:38,990 --> 00:11:43,010
Entonces queremos algo
prioritario para identificar a los usuarios.

224
00:11:43,010 --> 00:11:46,120
Y prioritario hace alusión a las claves
primarias, que la última vez dijimos,

225
00:11:46,120 --> 00:11:50,080
por lo general, son un número, como
el número uno que vimos hace un momento,

226
00:11:50,080 --> 00:11:54,350
cuando miré en el contenido de
esta base de datos hace solo un momento,

227
00:11:54,350 --> 00:11:58,322
noten que David sí tenía, tiene
un ID único, uno, o al menos

228
00:11:58,322 --> 00:12:00,280
veríamos que es
único si añadimos

229
00:12:00,280 --> 00:12:01,990
cada vez más
usuarios a la base de datos.

230
00:12:01,990 --> 00:12:04,210
¿Y cómo le hice
para generar esto?

231
00:12:04,210 --> 00:12:08,140
Bueno, si voy a
unregister. HTML, observen que

232
00:12:08,140 --> 00:12:10,510
tengo que usar
algo de otro lenguaje,

233
00:12:10,510 --> 00:12:12,940
no es particularmente un
lenguaje elegante, pero se

234
00:12:12,940 --> 00:12:15,250
llama Jinja,
el lenguaje de los formatos.

235
00:12:15,250 --> 00:12:16,550
Noten lo que hice aquí,

236
00:12:16,550 --> 00:12:19,480
Este es el formato,
unregister.HTML, que el usuario ve

237
00:12:19,480 --> 00:12:21,280
cuando intento anular
el registro de alguien.

238
00:12:21,280 --> 00:12:25,750
Tengo un formato cuya acción es
unregister, el método aquí es publicarlo,

239
00:12:25,750 --> 00:12:27,410
y luego tengo el menú de selección

240
00:12:27,410 --> 00:12:29,565
<select Name = "id">
porque quiero

241
00:12:29,565 --> 00:12:32,440
dejarle en claro al servidor
que el valor va a recibir

242
00:12:32,440 --> 00:12:36,370
se llama ID y que será
un número, como uno o dos o tres

243
00:12:36,370 --> 00:12:41,320
y esta es la manera
en la que itero ¿sobre qué?

244
00:12:41,320 --> 00:12:44,220
¿Qué es lo que hago
en las líneas 6, 8 y 9?

245
00:12:44,220 --> 00:12:46,780


246
00:12:46,780 --> 00:12:49,090
¿Qué es lo que pasa
allí en términos del inglés?

247
00:12:49,090 --> 00:12:53,627


248
00:12:53,627 --> 00:12:55,460
PÚBLICO: El número
de registrados en SQL.

249
00:12:55,460 --> 00:12:58,210
DAVID: Sí, itero sobre
el número de registrados

250
00:12:58,210 --> 00:12:59,740
que tengo en mi base de datos en SQL.

251
00:12:59,740 --> 00:13:02,020
Bueno, parece
que solo lo deduzco,

252
00:13:02,020 --> 00:13:04,810
parece que tengo acceso
a algunas variables de los registrados,

253
00:13:04,810 --> 00:13:08,090
veremos más de eso después,
for registering in registrants,

254
00:13:08,090 --> 00:13:10,090
la sintaxis que vimos
antes en Python solo

255
00:13:10,090 --> 00:13:13,300
nos permite iterar
sobre las cosas en una lista.

256
00:13:13,300 --> 00:13:16,810
A pesar de que técnicamente
esto es Jinja, usa una sintaxis similar.

257
00:13:16,810 --> 00:13:19,600
Pero qué quiero hacer en
cada iteración de los bucles for,

258
00:13:19,600 --> 00:13:22,750
mientras itero sobre
David, María, Brian y Rob

259
00:13:22,750 --> 00:13:26,570
y quien sea que esté registrado en
froshims, para cada uno de los estudiantes

260
00:13:26,570 --> 00:13:30,040
quiero la salida <option value = " "

261
00:13:30,040 --> 00:13:32,260
y esto un poco como un
trabalenguas, pero dice

262
00:13:32,260 --> 00:13:34,930
muestra el número ID
de los registrados actuales

263
00:13:34,930 --> 00:13:38,560
y las llaves dobles son la manera
en que Jinja dice, toma ese valor

264
00:13:38,560 --> 00:13:40,990
e introdúcelo entre esas comillas.

265
00:13:40,990 --> 00:13:44,710
Mientras tanto, recordemos que
una opción del menú desplegable

266
00:13:44,710 --> 00:13:47,140
tiene dos partes, su valor
y luego la cosa que está

267
00:13:47,140 --> 00:13:49,700
entre su etiqueta abierta la cerrada.

268
00:13:49,700 --> 00:13:54,520
¿qué quiero que el usuario
vea aquí? es "registrant.name"

269
00:13:54,520 --> 00:13:57,340
from registrant.dorm

270
00:13:57,340 --> 00:13:58,870
Esta fue una decisión del diseño.

271
00:13:58,870 --> 00:14:03,370
Esa la razón, por esa
razón el formato de esta lista

272
00:14:03,370 --> 00:14:04,430
es exactamente así,

273
00:14:04,430 --> 00:14:07,780
esto y esto de tal y tal lugar.

274
00:14:07,780 --> 00:14:11,770
Y la idea clave la cual
haremos que suceda

275
00:14:11,770 --> 00:14:15,850
en application.pi, será la siguiente.

276
00:14:15,850 --> 00:14:20,920
Cuando visito "/unregister" mediante "get"
que está predeterminado por si visitamos

277
00:14:20,920 --> 00:14:23,470
la URL, noten que
ejecuto un SELECT

278
00:14:23,470 --> 00:14:26,260
como el que propusieron
hace poco SELECT * FROM registrants.

279
00:14:26,260 --> 00:14:28,939
Pero esta vez, en lugar
de solo verlo en la pantalla,

280
00:14:28,939 --> 00:14:30,230
quiero hacer algo con esto.

281
00:14:30,230 --> 00:14:33,990
Así que tomo estos rows que son
devueltos desde el método execute

282
00:14:33,990 --> 00:14:36,320
y los paso a este formato,

283
00:14:36,320 --> 00:14:37,820
al que podría nombrar como quisiera.

284
00:14:37,820 --> 00:14:39,910
Podría haberlo
nombrado rows, x, y o z.

285
00:14:39,910 --> 00:14:41,980
Pero lo nombré, un
poco más conceptualmente,

286
00:14:41,980 --> 00:14:44,420
registrants = rows.

287
00:14:44,420 --> 00:14:49,390
De modo que, básicamente le entrego
al formato cada fila de esa tabla o base

288
00:14:49,390 --> 00:14:50,780
de datos.

289
00:14:50,780 --> 00:14:53,560
De esta manera en
Pset 7, si aún no lo hicimos,

290
00:14:53,560 --> 00:14:56,320
comenzaremos a construir
bases de datos más dinámicas

291
00:14:56,320 --> 00:14:59,050
al igual que sitios web más dinámicos,
mediante las entradas del usuario,

292
00:14:59,050 --> 00:15:03,160
guardándolas, como cuando me registré
incluso eliminándolas o actualizándolas

293
00:15:03,160 --> 00:15:05,284
para generar los
contenidos con la programación.

294
00:15:05,284 --> 00:15:07,450
Esta es la diferencia
entre un sitio web estático

295
00:15:07,450 --> 00:15:09,730
donde, si lo notan,
cada día se ve igual.

296
00:15:09,730 --> 00:15:13,090
Porque alguien lo escribió,
codificó y guardó así para siempre

297
00:15:13,090 --> 00:15:16,100
frente a un sitio web dinámico
como Gmail, Facebook y otros similares

298
00:15:16,100 --> 00:15:19,630
que obviamente cambian todo
el tiempo y cada vez tienen más contenido.

299
00:15:19,630 --> 00:15:23,440
Y así en el fondo Facebook,
Gmail y otras aplicaciones

300
00:15:23,440 --> 00:15:27,760
son bases de datos basadas
en SQL, que usan lenguajes

301
00:15:27,760 --> 00:15:29,957
como Python, JavaScript y otras.

302
00:15:29,957 --> 00:15:32,290
Entonces comenzaremos a ver
cuáles otras características podemos

303
00:15:32,290 --> 00:15:34,180
añadirle a este tipo de sitios web.

304
00:15:34,180 --> 00:15:41,650
¿Hay alguna pregunta sobre el tipo de
modelo para crear una aplicación basada

305
00:15:41,650 --> 00:15:43,690
en la web?

306
00:15:43,690 --> 00:15:44,740
¿Ninguna?

307
00:15:44,740 --> 00:15:45,240
Sí.

308
00:15:45,240 --> 00:15:48,036
PÚBLICO: ¿Cómo le hace un
programa para saber si una solicitud fue

309
00:15:48,036 --> 00:15:49,120
enviada por medio
de get o de una publicación?

310
00:15:49,120 --> 00:15:50,369
DAVID: Muy buena pregunta.

311
00:15:50,369 --> 00:15:53,350
¿Cómo le hace un programa, application.pi,
para saber si una solicitud llegó

312
00:15:53,350 --> 00:15:54,640
por get o una publicación?

313
00:15:54,640 --> 00:15:57,257
¿Dónde se encuentra
almacenada o disponible esa información?

314
00:15:57,257 --> 00:15:58,090
¿Alguien lo recuerda?

315
00:15:58,090 --> 00:16:02,055


316
00:16:02,055 --> 00:16:04,180
Siempre olvido traer
más de estos accesorios,

317
00:16:04,180 --> 00:16:08,080
pero recordemos ese sobre
virtual oh, aquí hay uno más,

318
00:16:08,080 --> 00:16:10,292
recordemos que cuando
un navegador envía una solicitud

319
00:16:10,292 --> 00:16:12,250
seguimos el juego
al decir, oh bueno, esto

320
00:16:12,250 --> 00:16:15,640
pone una solicitud dentro de este sobre,
algo como llévame a la página de inicio

321
00:16:15,640 --> 00:16:19,730
o aquí hay una foto o mi nombre
los cuales estoy cargando en el sitio.

322
00:16:19,730 --> 00:16:21,850
Literalmente hay un
mensaje aquí, un mensaje en HTTP

323
00:16:21,850 --> 00:16:26,690
que dice las palabras "obtener" o
"publicar", como su primera línea.

324
00:16:26,690 --> 00:16:29,980
En el momento en que el servidor ve
ese mensaje dentro del tan conocido sobre

325
00:16:29,980 --> 00:16:32,290
sabe si fue obtener o publicar.

326
00:16:32,290 --> 00:16:36,520
Dense cuenta, este soy solo
yo siendo un poco ordenado,

327
00:16:36,520 --> 00:16:40,720
pero no hay ninguna razón por la que
no podamos definir dos rutas como esta

328
00:16:40,720 --> 00:16:44,080
en Flask podríamos
tener una ruta llamada

329
00:16:44,080 --> 00:16:50,020
register_form, cuyo único propósito
es que el usuario vea formato de registro

330
00:16:50,020 --> 00:16:55,060
y lo único que haría es
mostrar def register_form( ):

331
00:16:55,060 --> 00:17:00,370
y return render_template ("register.html")
¿cierto?

332
00:17:00,370 --> 00:17:03,730
Y asumirá ciegamente que si
el usuario visita el formato de registro

333
00:17:03,730 --> 00:17:06,589
llegó allí por medio
del get predeterminado

334
00:17:06,589 --> 00:17:09,520
Luego podría ocurrir que ese
usuario lo envía a otra parte

335
00:17:09,520 --> 00:17:13,540
si la ruta es actually_register

336
00:17:13,540 --> 00:17:16,540
el método será: method = ["POST"],
debemos indicar a POST explícitamente

337
00:17:16,540 --> 00:17:18,280
porque no está
predeterminado para nosotros.

338
00:17:18,280 --> 00:17:22,349
Después digo: def actually_register( ).

339
00:17:22,349 --> 00:17:25,869
Aquí podría tener todo
el código de mi base de datos

340
00:17:25,869 --> 00:17:29,110
eso supone que solamente
si el usuario llegó a este punto final,

341
00:17:29,110 --> 00:17:30,580
envió el formato.

342
00:17:30,580 --> 00:17:33,730
Luego puse allí todo el código
relacionado con la base de datos.

343
00:17:33,730 --> 00:17:37,557
Les recuerdo que estoy siendo
un poco ordenado o analítico

344
00:17:37,557 --> 00:17:38,890
cuando de diseñar esto se trata,

345
00:17:38,890 --> 00:17:40,723
porque no me
gusta la idea de tener

346
00:17:40,723 --> 00:17:42,220
algo como este punto
de terminación y esta cosa,

347
00:17:42,220 --> 00:17:44,094
son dos cosas
por separado en las cuales pensar

348
00:17:44,094 --> 00:17:47,500
y también lo que ve el usuario
no es bonito, es tan lindo como una URL,

349
00:17:47,500 --> 00:17:50,590
no es solamente un /register,
lo cual tiene un poco más de sentido.

350
00:17:50,590 --> 00:17:55,480
De esta manera intuitiva lograremos
que el usuario esté constantemente

351
00:17:55,480 --> 00:17:56,396
en /register,

352
00:17:56,396 --> 00:17:58,270
pero el sitio web
se comporta un poco diferente.

353
00:17:58,270 --> 00:18:01,420
Si la solicitud viene por un GET
o mostrarle algo al usuario, sino,

354
00:18:01,420 --> 00:18:04,630
si envió un formato, continuar
y hacer lo de la base de datos.

355
00:18:04,630 --> 00:18:05,320
Eso es todo.

356
00:18:05,320 --> 00:18:08,500
Solo es mi manera de compactar
dos rutas separadas en una sola

357
00:18:08,500 --> 00:18:10,090
para mantener las cosas
estrechamente unidas.

358
00:18:10,090 --> 00:18:11,360
Buena pregunta.

359
00:18:11,360 --> 00:18:13,390
¿Alguna otra pregunta?

360
00:18:13,390 --> 00:18:18,730
Muy bien, hagamos la transición hacia
un nuevo mundo, totalmente en JavaScript.

361
00:18:18,730 --> 00:18:21,580
Aun cuando podría
sentirse un poco abrumador,

362
00:18:21,580 --> 00:18:24,490
hasta ahora, que ya
hemos visto otro lenguaje

363
00:18:24,490 --> 00:18:28,014
darnos cuenta de que los puntos
importantes al día de hoy son pocos.

364
00:18:28,014 --> 00:18:29,680
Veremos alguna
sintaxis conocida,

365
00:18:29,680 --> 00:18:32,740
pero hay muchas características
compartidas como funciones, bucles,

366
00:18:32,740 --> 00:18:33,220
condiciones y variables,

367
00:18:33,220 --> 00:18:35,185
todas ellas están
presentes en el mismo lenguaje.

368
00:18:35,185 --> 00:18:39,190
Y sintácticamente, son muy
muy similares a C y a Python.

369
00:18:39,190 --> 00:18:40,629
Ese es un punto importante.

370
00:18:40,629 --> 00:18:42,670
Y el segundo será, que
nos permite explorar

371
00:18:42,670 --> 00:18:43,900
un tipo diferente
de programación.

372
00:18:43,900 --> 00:18:45,649
Porque, consideremos
lo que hicimos hasta ahora,

373
00:18:45,649 --> 00:18:50,860
cuando escribimos los programas en C,
comenzamos con cosas como #include,

374
00:18:50,860 --> 00:18:52,610
luego tuvimos int,
main y todo lo demás,

375
00:18:52,610 --> 00:18:54,580
escribimos nuestros
programas de arriba hacia abajo,

376
00:18:54,580 --> 00:18:55,390
los compilamos

377
00:18:55,390 --> 00:18:56,380
y después los ejecutamos.

378
00:18:56,380 --> 00:18:59,360
Y básicamente se ejecutaron,
de arriba hacia abajo, por así decirlo.

379
00:18:59,360 --> 00:19:01,350
También comenzamos
a hacer eso en Python,

380
00:19:01,350 --> 00:19:08,140
En Pset 6, podemos recordar el programa
de comparación o el programa de puntajes,

381
00:19:08,140 --> 00:19:10,780
esos también los escribimos en un
código de Python, de arriba hacia abajo,

382
00:19:10,780 --> 00:19:13,070
que luego ejecutó
esos programas.

383
00:19:13,070 --> 00:19:16,030
Pero luego comenzamos a hacer
algo un poco diferente con Flask,

384
00:19:16,030 --> 00:19:22,060
En Flask, application.pi, si lo ejecutamos
de manera secundaria al escribir flask run

385
00:19:22,060 --> 00:19:22,810
¿nos lo permite alguna vez?

386
00:19:22,810 --> 00:19:25,610


387
00:19:25,610 --> 00:19:28,010
No, me refiero a que, vemos algo
raro como salida en la pantalla,

388
00:19:28,010 --> 00:19:31,400
como algunas direcciones IP 
y todas las solicitudes que llegan,

389
00:19:31,400 --> 00:19:34,070
pero básicamente, vemos
una línea que nunca se va,

390
00:19:34,070 --> 00:19:37,290
porque está hecho en Flask
al igual que cualquier servidor web,

391
00:19:37,290 --> 00:19:38,630
es un bucle infinito,

392
00:19:38,630 --> 00:19:39,320
no es un error,

393
00:19:39,320 --> 00:19:42,050
Es una característica del programa,
por la cual, una vez que se ejecuta,

394
00:19:42,050 --> 00:19:44,920
escucha constantemente las solicitudes HTTP.

395
00:19:44,920 --> 00:19:49,850
Cada vez que nuestra aplicación.pi
recibe una solicitud HTTP, ¿cómo

396
00:19:49,850 --> 00:19:51,140
sabe qué hacer con ella?

397
00:19:51,140 --> 00:19:53,037
No hay una función main.

398
00:19:53,037 --> 00:19:56,120
Pero si solo espera y espera
a que entren las solicitudes,

399
00:19:56,120 --> 00:20:00,794
¿Cómo le hace la application.pi
para saber qué hacer y cuándo?

400
00:20:00,794 --> 00:20:02,460
¿Qué ha ocurrido todo este tiempo?

401
00:20:02,460 --> 00:20:06,834


402
00:20:06,834 --> 00:20:09,447
PÚBLICO: Al comparar
los puntos de terminación.

403
00:20:09,447 --> 00:20:12,030
DAVID: Sí, así es, simplemente
al comparar los puntos de terminación.

404
00:20:12,030 --> 00:20:14,520
En el interior de este
sobre que sigo sujetando

405
00:20:14,520 --> 00:20:17,460
está la solicitud para
una determinada página.

406
00:20:17,460 --> 00:20:21,820
Es get/register o
post/register o algo similar.

407
00:20:21,820 --> 00:20:25,290
Tan pronto como
application.pi o específicamente Flask,

408
00:20:25,290 --> 00:20:28,680
el entorno en el que construimos
nuestra aplicación, lo nota, oh,

409
00:20:28,680 --> 00:20:29,730
veo /register,

410
00:20:29,730 --> 00:20:34,050
déjame ver si el programador
definió una ruta para /register con

411
00:20:34,050 --> 00:20:36,870
nuestra sintaxis
"en", @app.route

412
00:20:36,870 --> 00:20:40,410
y luego, oh, esa es la función que
supuestamente quiere que llame,

413
00:20:40,410 --> 00:20:42,180
al recibir esa
solicitud específica

414
00:20:42,180 --> 00:20:44,460
y la cumple
al devolver algún valor.

415
00:20:44,460 --> 00:20:47,320
Pero luego regresará únicamente
a escuchar, en este bucle infinito.

416
00:20:47,320 --> 00:20:51,060
Este es un ejemplo de lo que llamamos
programación orientada a eventos.

417
00:20:51,060 --> 00:20:54,930
No solo escribimos un programa de arriba
hacia abajo que solo comienza y se detiene,

418
00:20:54,930 --> 00:20:58,290
escribimos un programa que siempre
se ejecuta, a menos que lo eliminemos

419
00:20:58,290 --> 00:21:02,310
a la fuerza, al presionar
Control+c, o reiniciemos el IDE

420
00:21:02,310 --> 00:21:04,934
o algo tan dramático como eso.

421
00:21:04,934 --> 00:21:06,600
De lo contrario,
se ejecuta de manera constante.

422
00:21:06,600 --> 00:21:10,650
Pero los eventos que entrarían
son la recepción de los mensajes

423
00:21:10,650 --> 00:21:12,840
o solicitudes HTTP como estas.

424
00:21:12,840 --> 00:21:14,944
Asimismo, en un navegador

425
00:21:14,944 --> 00:21:16,860
hay muchísimos tipos
de eventos diferentes

426
00:21:16,860 --> 00:21:20,160
que pueden suceder, no en el Internet
como tal, pero sí a nivel local, aquí.

427
00:21:20,160 --> 00:21:24,480
Cada vez que hago clic en mi panel táctil
o en el mouse, eso es un evento, clic,

428
00:21:24,480 --> 00:21:27,840
cada vez que toco el
panel táctil o muevo mi mouse,

429
00:21:27,840 --> 00:21:31,670
eso es un evento, un evento
de arrastre o de movimiento del mouse.

430
00:21:31,670 --> 00:21:35,040
Cada vez que hago clic en algún
lugar de la pantalla, selecciono algo

431
00:21:35,040 --> 00:21:39,070
desde un menú o uso las teclas
de mi teclado, eso es un evento.

432
00:21:39,070 --> 00:21:42,030
Así que lo que
haremos hoy será concluir

433
00:21:42,030 --> 00:21:43,560
la última de nuestras interfaces de usuario.

434
00:21:43,560 --> 00:21:45,600
Las últimas semanas
nos enfocamos en el servidor,

435
00:21:45,600 --> 00:21:48,780
Hoy y la próxima semana nos
enfocaremos en el cliente y el navegador,

436
00:21:48,780 --> 00:21:51,810
al juntarlos tendremos
dos piezas del rompecabezas

437
00:21:51,810 --> 00:21:55,530
que se comunicarán entre sí, escucharán
la entrada del usuario en el navegador

438
00:21:55,530 --> 00:21:58,350
y harán algo con la entrada
del usuario en el servidor.

439
00:21:58,350 --> 00:21:59,600
Hagamos esa transición,

440
00:21:59,600 --> 00:22:01,020
Desde luego comenzamos con Scratch,

441
00:22:01,020 --> 00:22:03,700
hicimos la transición a C, luego
a Python y posteriormente a SQL,

442
00:22:03,700 --> 00:22:06,360
el cual fue sintácticamente
un poco diferente, sin duda,

443
00:22:06,360 --> 00:22:09,150
pero nos permitió
obtener y actualizar los datos.

444
00:22:09,150 --> 00:22:12,240
Pero hoy nos
enfocaremos en este, JavaScript.

445
00:22:12,240 --> 00:22:17,276
Técnicamente, ¿cuál es la relación,
entre JavaScript, el enfoque de hoy

446
00:22:17,276 --> 00:22:20,400
y el lenguaje que algunos tuvimos que
aprender en la preparatoria, en concreto,

447
00:22:20,400 --> 00:22:21,060
llamado Java?

448
00:22:21,060 --> 00:22:23,660


449
00:22:23,660 --> 00:22:24,256
Sí.

450
00:22:24,256 --> 00:22:25,689
PÚBLICO: Es como [INAUDIBLE]

451
00:22:25,689 --> 00:22:26,980
DAVID: ¿Es como cuál?

452
00:22:26,980 --> 00:22:28,859
PÚBLICO: [INAUDIBLE]
Es totalmente diferente.

453
00:22:28,859 --> 00:22:30,650
DAVID: Es totalmente
diferente, exacto.

454
00:22:30,650 --> 00:22:32,570
En realidad, solo fue
una cuestión de marketing,

455
00:22:32,570 --> 00:22:34,640
Java estaba muy de
moda en ese momento

456
00:22:34,640 --> 00:22:36,409
y JavaScript era
un nuevo lenguaje.

457
00:22:36,409 --> 00:22:39,200
Y oye, ¿por qué no nombramos a nuestro
lenguaje después de otra cosa que ya es

458
00:22:39,200 --> 00:22:41,312
bastante popular y
apoyamos la tendencia?

459
00:22:41,312 --> 00:22:42,770
Pero no son el mismo lenguaje,

460
00:22:42,770 --> 00:22:44,540
Si conocemos Java,
conocemos Java.

461
00:22:44,540 --> 00:22:46,580
Si sabemos JavaScript,
sabemos JavaScript.

462
00:22:46,580 --> 00:22:48,290
Son similares sintácticamente,

463
00:22:48,290 --> 00:22:51,860
pero básicamente no hay 
ninguna relación entre ambos.

464
00:22:51,860 --> 00:22:54,920
JavaScript es un
lenguaje, que históricamente

465
00:22:54,920 --> 00:22:56,870
se usó con las
limitaciones de un navegador.

466
00:22:56,870 --> 00:23:02,486
Es decir que en nuestra Mac o PC, este
lenguaje solo se ejecuta en nuestra Mac o PC

467
00:23:02,486 --> 00:23:04,400
sin embargo, puede
usarse y cada vez se usa más

468
00:23:04,400 --> 00:23:07,280
en el servidor, en algo
también llamado node.js.

469
00:23:07,280 --> 00:23:11,480
Pero hoy y aquí, nos enfocaremos
en su uso dentro del navegador.

470
00:23:11,480 --> 00:23:15,980
Afortunadamente, no es del todo
tan diferente de Python o incluso de C.

471
00:23:15,980 --> 00:23:19,040
Aquí hay un fragmento de
una función en JavaScript.

472
00:23:19,040 --> 00:23:20,000
¿Qué más conocemos?

473
00:23:20,000 --> 00:23:22,730
Bueno, está la palabra clave
function que tenemos en Python,

474
00:23:22,730 --> 00:23:25,070
también hay algunos
paréntesis abiertos como en Python

475
00:23:25,070 --> 00:23:26,960
hay listas de
argumentos separadas por comas,

476
00:23:26,960 --> 00:23:29,810
como las que tenemos
en Python y también en C,

477
00:23:29,810 --> 00:23:33,967
llaves, que tenemos en C, pero no
tantas ni de la misma manera en Python.

478
00:23:33,967 --> 00:23:36,800
Parece una especie de combinación
de algunas de las funciones

479
00:23:36,800 --> 00:23:38,240
hemos visto hasta ahora.

480
00:23:38,240 --> 00:23:40,010
Las sangrías no son
estrictamente importantes.

481
00:23:40,010 --> 00:23:42,890
Ahora que estamos otra vez por
nuestra cuenta, tal que un buen estilo

482
00:23:42,890 --> 00:23:46,220
significa que debemos hacer sangrías
de manera eficiente y no esperar

483
00:23:46,220 --> 00:23:48,360
a que el traductor nos grite.

484
00:23:48,360 --> 00:23:52,710
Pero noten que esto
también es válido en JavaScript.

485
00:23:52,710 --> 00:23:54,010
Pero, ¿qué sucedió?

486
00:23:54,010 --> 00:23:55,940
Antes.

487
00:23:55,940 --> 00:23:58,510
Después.

488
00:23:58,510 --> 00:24:01,970
¿Qué es lo que al parecer
falta en la segunda versión?

489
00:24:01,970 --> 00:24:02,679
PÚBLICO: Un nombre.

490
00:24:02,679 --> 00:24:03,636
DAVID: Un nombre.

491
00:24:03,636 --> 00:24:05,680
En JavaScript podemos tener

492
00:24:05,680 --> 00:24:09,670
y es algo muy común el tener
funciones anónimas, funciones que

493
00:24:09,670 --> 00:24:14,110
no tienen un nombre de manera explícita o
de manera elegante, son funciones lambda.

494
00:24:14,110 --> 00:24:16,000
Y literalmente
no tienen un nombre.

495
00:24:16,000 --> 00:24:17,930
Pronto veremos
porque son útiles.

496
00:24:17,930 --> 00:24:20,721
Pero noten, que ésta será una
característica que técnicamente también

497
00:24:20,721 --> 00:24:23,500
está presente en Java y que puede
implementarse de otras formas en C,

498
00:24:23,500 --> 00:24:26,400
pero es un paradigma
mucho más común en JavaScript.

499
00:24:26,400 --> 00:24:29,670
Así que pongámonos cómodos con la idea
de que nuestras funciones no tengan nombre

500
00:24:29,670 --> 00:24:31,570
y con que también será un
punto importante para hoy.

501
00:24:31,570 --> 00:24:33,480
Variables, notaremos esto.

502
00:24:33,480 --> 00:24:36,730
Y tal vez podamos deducir lo que
hace esto en inglés, incluso si nunca

503
00:24:36,730 --> 00:24:38,260
antes vimos JavaScript.

504
00:24:38,260 --> 00:24:39,385
¿Qué es lo que hace
esto probablemente?

505
00:24:39,385 --> 00:24:41,860


506
00:24:41,860 --> 00:24:42,360
¿Dilo de nuevo?

507
00:24:42,360 --> 00:24:43,780
PÚBLICO: Define una variable.

508
00:24:43,780 --> 00:24:45,500
DAVID: Sí, define
una variable llamada i

509
00:24:45,500 --> 00:24:47,030
y la asigna igual a 0.

510
00:24:47,030 --> 00:24:49,920
Por primera
vez se lee muy bien.

511
00:24:49,920 --> 00:24:51,529
Establece i es igual a 0.

512
00:24:51,529 --> 00:24:53,570
La declara maravillosamente, porque eso es

513
00:24:53,570 --> 00:24:55,270
exactamente lo que
queremos que haga.

514
00:24:55,270 --> 00:25:00,950
¿Qué es lo que le falta a esta
línea de código que teníamos en C?

515
00:25:00,950 --> 00:25:01,620
Los tipos de datos.

516
00:25:01,620 --> 00:25:05,810
No se menciona explícitamente
a int, float, strings y demás.

517
00:25:05,810 --> 00:25:07,670
JavaScript tiene formatos.

518
00:25:07,670 --> 00:25:10,160
Pero su escritura se parece
ligeramente a la de Python,

519
00:25:10,160 --> 00:25:13,280
hay formatos, pero no es necesario
que los mencionemos explícitamente,

520
00:25:13,280 --> 00:25:14,900
es muy sensible al contexto,

521
00:25:14,900 --> 00:25:17,660
y básicamente, 
la computadora averigua cuál

522
00:25:17,660 --> 00:25:19,522
tipo de datos es
qué cosa, desde este contexto.

523
00:25:19,522 --> 00:25:21,230
Pero otra vez tendremos
expresiones Booleanas,

524
00:25:21,230 --> 00:25:23,938
por ejemplo, la pregunta donde i
es menor a 50, o más en general,

525
00:25:23,938 --> 00:25:26,540
es x menor que y, donde cada
una de ellas serían las variables.

526
00:25:26,540 --> 00:25:27,860
Aquí está el bucle do while,

527
00:25:27,860 --> 00:25:30,830
si lo extrañamos en Python,
bueno, está de regreso en JavaScript.

528
00:25:30,830 --> 00:25:32,110
Y podemos hacer algo aquí.

529
00:25:32,110 --> 00:25:34,580
Otra pequeña cosa que
notaremos, ¿capitalizamos

530
00:25:34,580 --> 00:25:37,790
o no capitalizamos
"true" en JavaScript?

531
00:25:37,790 --> 00:25:39,800
Al parecer no,
basándonos en la inferencia.

532
00:25:39,800 --> 00:25:41,330
Este es el tipo
de pequeñas cosas que,

533
00:25:41,330 --> 00:25:43,040
honestamente, podría
hacernos tropezar desde el principio

534
00:25:43,040 --> 00:25:44,706
y es normal frustrarse por eso,

535
00:25:44,706 --> 00:25:47,672
pero básicamente no debemos
desanimarnos por este tipo de detalles.

536
00:25:47,672 --> 00:25:50,630
Es como si supiéramos dos lenguas
romances o dos idiomas asiáticos

537
00:25:50,630 --> 00:25:52,880
y algunas veces confundiéramos
un carácter o una palabra,

538
00:25:52,880 --> 00:25:56,540
eso también pasará de
manera inevitable en la programación.

539
00:25:56,540 --> 00:26:01,120
Aquí hay un bucle while, también
hay bucles while infinitos en JavaScript.

540
00:26:01,120 --> 00:26:02,220
Este es un bucle for.

541
00:26:02,220 --> 00:26:05,110
Noten que son casi
idénticos a los que vimos en C,

542
00:26:05,110 --> 00:26:07,730
excepto por la falta de un
tipo de datos en específico,

543
00:26:07,730 --> 00:26:11,720
en su lugar, declaro de manera implícita
que i será un entero, en este caso.

544
00:26:11,720 --> 00:26:13,830
y esto se pondrá un
poco más interesante.

545
00:26:13,830 --> 00:26:16,550
Tenemos una
sintaxis similar en Python

546
00:26:16,550 --> 00:26:18,320
y es casi lo mismo en JavaScript.

547
00:26:18,320 --> 00:26:20,940
si queremos iterar sobre
los valores de un arreglo,

548
00:26:20,940 --> 00:26:26,150
diremos let value, donde
esto puede ser una variable x, y o z,

549
00:26:26,150 --> 00:26:28,234
"of" es una palabra clave que
codificaremos en un arreglo

550
00:26:28,234 --> 00:26:29,900
y será algún arreglo en cuestión.

551
00:26:29,900 --> 00:26:32,360
Y veremos,
en donde tenemos arreglos

552
00:26:32,360 --> 00:26:34,970
que nos permitan iterar
sobre los valores en un arreglo.

553
00:26:34,970 --> 00:26:37,570
JavaScript también tiene algo
llamado objeto, sin embargo,

554
00:26:37,570 --> 00:26:38,720
Python también los tiene

555
00:26:38,720 --> 00:26:40,760
y ya los mencionamos un par de veces.

556
00:26:40,760 --> 00:26:45,200
Técnicamente, cuando
declaramos la variable db

557
00:26:45,200 --> 00:26:49,460
para usar la biblioteca SQL
de CS50, eso es un objeto,

558
00:26:49,460 --> 00:26:52,257
es una variable que
es un tipo de objeto.

559
00:26:52,257 --> 00:26:53,090
Así que lo hemos visto.

560
00:26:53,090 --> 00:26:56,660
Pero volveremos a verlos aún
más explícitamente en JavaScript,

561
00:26:56,660 --> 00:27:00,210
exactamente para 
qué sirve un objeto.

562
00:27:00,210 --> 00:27:03,080
Mientras tanto, afortunadamente,
tendremos una sintaxis conocida.

563
00:27:03,080 --> 00:27:05,371
Volveremos a
nuestros días en C.

564
00:27:05,371 --> 00:27:09,590
Porque "else" e "if" no son una cosa en
JavaScript, pero else-if claramente lo es.

565
00:27:09,590 --> 00:27:11,340
De modo que
hay un pequeño matiz.

566
00:27:11,340 --> 00:27:15,930
Aquí hay una declaración de arreglos,
bastante parecidos a las listas de Python

567
00:27:15,930 --> 00:27:19,280
si lo desean, y déjenme
arreglar esto para ser consistente.

568
00:27:19,280 --> 00:27:21,080
Técnicamente var
también es una palabra clave,

569
00:27:21,080 --> 00:27:23,150
Pero funciona un
poco diferente de let,

570
00:27:23,150 --> 00:27:25,670
Así que definamos
esto como: let numbers =

571
00:27:25,670 --> 00:27:27,770
corchetes [ ] y estos números de aquí.

572
00:27:27,770 --> 00:27:30,020
Noten que los corchetes
significan que se trata de un arreglo.

573
00:27:30,020 --> 00:27:34,970
Pero en JavaScript, los arreglos
pueden cambiar de tamaño,

574
00:27:34,970 --> 00:27:39,398
pueden crecer y reducirse,
de manera similar ¿como a qué en Python?

575
00:27:39,398 --> 00:27:40,250
PÚBLICO: Una lista.

576
00:27:40,250 --> 00:27:41,125
DAVID: Una lista.

577
00:27:41,125 --> 00:27:45,164
Y es muy diferente a los arreglos en C.
Hay una especie de compensaciones.

578
00:27:45,164 --> 00:27:47,580
Nuevamente, para
Google están bien cosas como,

579
00:27:47,580 --> 00:27:50,880
cambiarle el tamaño a los arreglos en
JavaScript, si olvidamos estas cosas.

580
00:27:50,880 --> 00:27:52,713
Pero este es el tipo
de diferencias, cuando

581
00:27:52,713 --> 00:27:54,990
aprendemos lenguajes nuevos,
que eventualmente asimilaremos.

582
00:27:54,990 --> 00:27:58,370
Aquí hay un ejemplo de cómo
llamaremos a un objeto alias

583
00:27:58,370 --> 00:28:00,980
un diccionario
o dict en Python.

584
00:28:00,980 --> 00:28:05,600
Un diccionario, o más en general,
una tabla hash tiene claves y valores,

585
00:28:05,600 --> 00:28:06,199
Y eso es todo.

586
00:28:06,199 --> 00:28:07,490
Podemos tener una
estructura más elegante.

587
00:28:07,490 --> 00:28:10,790
Pero a fin de cuentas, solo es
un montón de claves y de valores.

588
00:28:10,790 --> 00:28:14,810
Diferentes lenguajes usan una sintaxis 
distinta para estos, llaves, dos puntos

589
00:28:14,810 --> 00:28:17,150
signos iguales, flechas
y demás cosas raras.

590
00:28:17,150 --> 00:28:18,380
Pero la idea es la misma.

591
00:28:18,380 --> 00:28:22,250
Si quiero declarar 
un "quote" en JavaScript,

592
00:28:22,250 --> 00:28:26,030
como un stock quote para que sea una
estructura de datos, como un struct en C,

593
00:28:26,030 --> 00:28:27,530
con tres claves,

594
00:28:27,530 --> 00:28:29,180
name, price y symbol,

595
00:28:29,180 --> 00:28:32,090
los enumero aquí, con dos
puntos después de los nombres

596
00:28:32,090 --> 00:28:35,830
luego puse los valores entre
comillas si son cadenas, o sin comillas

597
00:28:35,830 --> 00:28:38,190
si no son cadenas, del lado derecho.

598
00:28:38,190 --> 00:28:41,840
En el contexto de CS50 Finance,
una aplicación basada en la web

599
00:28:41,840 --> 00:28:44,390
para descargar
cotizaciones de la bolsa y más, si

600
00:28:44,390 --> 00:28:48,590
queremos obtener un dato que represente
el precio de las acciones de Netflix

601
00:28:48,590 --> 00:28:51,470
puede que el servidor
nos devuelva algo

602
00:28:51,470 --> 00:28:53,820
que luzca un poco como esto.

603
00:28:53,820 --> 00:28:58,190
Técnicamente, y no quiero
abrumarlos esta vez, técnicamente,

604
00:28:58,190 --> 00:29:03,100
es probable que sea algo que se llama
formato JSON, notación de objetos de

605
00:29:03,100 --> 00:29:07,860
JavaScript, formato JSON, que tiene
comillas adicionales sobre las cosas,

606
00:29:07,860 --> 00:29:08,360
como aquí.

607
00:29:08,360 --> 00:29:11,570
Veremos que estará
en uso en poco tiempo.

608
00:29:11,570 --> 00:29:17,720
Además de eso, además de eso,
eso es el tipo de esencia, de sintaxis,

609
00:29:17,720 --> 00:29:18,304
de JavaScript.

610
00:29:18,304 --> 00:29:21,219
Ahora veremos que tiene funciones
más poderosas y su paradigma de

611
00:29:21,219 --> 00:29:21,860
programación.

612
00:29:21,860 --> 00:29:25,190
Si conocemos C y si conocemos
Python, ya es una especie de

613
00:29:25,190 --> 00:29:27,500
conocimiento, al menos
básico, de la sintaxis de JavaScript.

614
00:29:27,500 --> 00:29:31,460
Ahora, solo necesitamos saber
cómo, cuándo y dónde usarlo.

615
00:29:31,460 --> 00:29:37,070
Pero de sintaxis, antes de
seguir adelante, ¿alguna pregunta?

616
00:29:37,070 --> 00:29:37,580
¿No?

617
00:29:37,580 --> 00:29:38,060
OK.

618
00:29:38,060 --> 00:29:39,360
Para continuar haré lo siguiente.

619
00:29:39,360 --> 00:29:43,910
Entraré al IDE y prepararé
un pequeño ejemplo,

620
00:29:43,910 --> 00:29:46,970
para continuar
llamaré a dom0.html.

621
00:29:46,970 --> 00:29:49,850
Vimos brevemente este
término hace algún tiempo.

622
00:29:49,850 --> 00:29:53,390
DOM se refiere al modelo de
objetos de un documento, que

623
00:29:53,390 --> 00:29:56,360
es una forma elegante de decir: el
árbol que representa una página web.

624
00:29:56,360 --> 00:30:00,200
Una página web, por supuesto, podría
lucir, muy simple, como esta en HTML.

625
00:30:00,200 --> 00:30:03,830
La jerarquía está ahí debido a las
etiquetas de apertura y las de cierre.

626
00:30:03,830 --> 00:30:06,230
La sangría está allí
solo por mí, el humano,

627
00:30:06,230 --> 00:30:08,438
y se espera que la lectura
sea un poco más elegante.

628
00:30:08,438 --> 00:30:13,280
Esta estructura de aquí en HTML,
podría implementarse en la memoria

629
00:30:13,280 --> 00:30:15,680
en cualquier lenguaje usando
este tipo de estructura de árbol.

630
00:30:15,680 --> 00:30:18,500
Esta estructura de árbol se llama
el modelo de objeto del documento.

631
00:30:18,500 --> 00:30:21,260
Es el modelo mental correcto,
la manera de pensar acerca de

632
00:30:21,260 --> 00:30:23,630
lo que está por debajo
del agua en una página web.

633
00:30:23,630 --> 00:30:25,140
¿Por qué esto es útil?

634
00:30:25,140 --> 00:30:28,310
Todo este tiempo, cuando
escribimos páginas web,

635
00:30:28,310 --> 00:30:30,680
en su mayor parte, las hemos
escrito HTML o las hemos

636
00:30:30,680 --> 00:30:32,630
escrito en Python, el cual genera HTML.

637
00:30:32,630 --> 00:30:34,910
O eso es lo que
ahora hacemos.

638
00:30:34,910 --> 00:30:39,530
¿Y si queremos cambiar una
página web después de que el HTML

639
00:30:39,530 --> 00:30:42,500
se escribió o se envió al usuario?

640
00:30:42,500 --> 00:30:44,930
Lo ejecutamos al escribir código
Python, pero no tenemos la habilidad de

641
00:30:44,930 --> 00:30:48,890
ejecutar Python en las computadoras
de nuestros usuarios o clientes.

642
00:30:48,890 --> 00:30:50,580
Debido a que solo se usa en el servidor.

643
00:30:50,580 --> 00:30:53,180
Envía HTML y CSS, eso es todo.

644
00:30:53,180 --> 00:30:55,730
Perdimos el control sobre
la experiencia del usuario.

645
00:30:55,730 --> 00:30:59,510
A menos que, además del HTML
y el CSS que enviamos al usuario,

646
00:30:59,510 --> 00:31:03,940
también les enviemos un poco
de JavaScript, un programa adicional

647
00:31:03,940 --> 00:31:07,310
escrito en este nuevo
lenguaje que al final se ejecuta,

648
00:31:07,310 --> 00:31:11,240
en su Mac o PC después
de que dejó nuestro servidor.

649
00:31:11,240 --> 00:31:13,250
Veamos qué significa esto.

650
00:31:13,250 --> 00:31:15,950
Para continuar, prepararé un
pequeño ejemplo como este.

651
00:31:15,950 --> 00:31:17,066
dom0.html.

652
00:31:17,066 --> 00:31:19,940
Tendremos nuestro DOCTYPE habitual
en la parte superior que dice, hey, aquí

653
00:31:19,940 --> 00:31:21,221
viene el HTML 5.

654
00:31:21,221 --> 00:31:22,720
Aquí está el inicio
de mi página web.

655
00:31:22,720 --> 00:31:26,930
Es bueno tener un titular aquí
con un título simple como dom0.

656
00:31:26,930 --> 00:31:29,770
El cuerpo de esta página
web será bastante sencillo.

657
00:31:29,770 --> 00:31:34,430
Para continuar definiré un formato que
tiene un ID único llamado demo, solo

658
00:31:34,430 --> 00:31:36,050
con fines demostrativos.

659
00:31:36,050 --> 00:31:39,380
Dentro de este formato
estará una entrada cuya

660
00:31:39,380 --> 00:31:43,520
forma será:
<input id="name" placeholder=

661
00:31:43,520 --> 00:31:46,040
el elegante texto
gris, será:"Name",

662
00:31:46,040 --> 00:31:48,680
y que será: type="text"/>

663
00:31:48,680 --> 00:31:53,930
Y me daré a mí mismo el botón de enviar:
<input type="submit/">

664
00:31:53,930 --> 00:31:57,860
Aquí tengo, una vez que guardé eso,
una página web bastante simple que

665
00:31:57,860 --> 00:32:00,710
solo tiene una forma HTML muy simple.

666
00:32:00,710 --> 00:32:02,720
Para continuar, ejecutaré esto.

667
00:32:02,720 --> 00:32:08,270
Para continuar, haré
esto simplemente al servir.

668
00:32:08,270 --> 00:32:11,420
Al hacer clic derecho o control en mi
espacio de trabajo y en el servidor,

669
00:32:11,420 --> 00:32:14,840
se verá bastante simple y feo el servidor
web, cuyo único propósito en la vida

670
00:32:14,840 --> 00:32:17,150
es servir los archivos HTML que escribí.

671
00:32:17,150 --> 00:32:19,430
A continuación,
haré clic en dom0.html.

672
00:32:19,430 --> 00:32:22,280
Este es el archivo muy
sencillo, que hice de improviso

673
00:32:22,280 --> 00:32:24,200
Si escribo algo,
y presiono enviar, ¿qué

674
00:32:24,200 --> 00:32:27,570
pasará con la información?

675
00:32:27,570 --> 00:32:28,259
En realidad, nada.

676
00:32:28,259 --> 00:32:29,550
No lo conecté a nada.

677
00:32:29,550 --> 00:32:32,694
No tuve una acción, o un
atributo de método en el formato.

678
00:32:32,694 --> 00:32:34,360
Todavía no termino
de escribir este programa.

679
00:32:34,360 --> 00:32:37,440
¿Qué quiero hacer
para que esto suceda?

680
00:32:37,440 --> 00:32:39,680
Para continuar, haré esto.

681
00:32:39,680 --> 00:32:43,860
Primero, proseguiré al
titular de mi página web

682
00:32:43,860 --> 00:32:47,795
y en lugar de, solo tener un título,
introduciré una nueva etiqueta del script.

683
00:32:47,795 --> 00:32:49,670
como su nombre lo
indica, aquí viene un script.

684
00:32:49,670 --> 00:32:53,160
Un script en general es sinónimo
de un programa corto similar.

685
00:32:53,160 --> 00:32:56,310
En estos días, los programas en
una página web se pueden escribir

686
00:32:56,310 --> 00:32:57,742
prácticamente solo en JavaScript.

687
00:32:57,742 --> 00:32:59,700
De vuelta en el día, nosotros
podríamos usar otros lenguajes,

688
00:32:59,700 --> 00:33:01,074
en especial en los
navegadores de Microsoft.

689
00:33:01,074 --> 00:33:04,860
Pero en su mayor parte, el mundo
solo usa JavaScript en este contexto.

690
00:33:04,860 --> 00:33:08,040
Dentro del script, puedo
comenzar a escribir el código.

691
00:33:08,040 --> 00:33:16,860
En particular, puedo hacer algo
así: alert ("hello, world");

692
00:33:16,860 --> 00:33:21,900
Alert es bastante patética, pero
una utilidad de la función en JavaScript

693
00:33:21,900 --> 00:33:24,460
es que imprimirá una
molesta ventana emergente.

694
00:33:24,460 --> 00:33:26,850
A continuación, guardaré
la página, regresaré

695
00:33:26,850 --> 00:33:32,460
a mi navegador, lo volveré a cargar,
y ahí vamos, mi primer página web

696
00:33:32,460 --> 00:33:33,660
de tipo interactiva.

697
00:33:33,660 --> 00:33:35,520
Hace esto, que en realidad es feo.

698
00:33:35,520 --> 00:33:36,660
Solo dice, hello, world.

699
00:33:36,660 --> 00:33:39,476
Y digo fea porque muestra mi
nombre de dominio y mi puerto.

700
00:33:39,476 --> 00:33:41,100
Eso es un poco patético y desordenado.

701
00:33:41,100 --> 00:33:44,110
Al menos, transmito algo
de información para el usuario.

702
00:33:44,110 --> 00:33:46,650
Parece que, lo que un
navegador hace es,

703
00:33:46,650 --> 00:33:51,510
de hecho, que cuando recibe una
solicitud HTTP se envía este archivo.

704
00:33:51,510 --> 00:33:54,880
Y cuando nuestro navegador recibe
ese archivo, lo lee de arriba a abajo,

705
00:33:54,880 --> 00:33:58,457
de izquierda a derecha, y lo ejecuta
o interpreta cada línea de código.

706
00:33:58,457 --> 00:34:01,290
No solo hace que nos enfrentemos a las
cosas de manera audaz, centrada y demás.

707
00:34:01,290 --> 00:34:05,880
En realidad, ejecutará líneas de código
dentro de las etiquetas del script.

708
00:34:05,880 --> 00:34:09,000
Ahora, hagamos esto,
un poco más interactivo.

709
00:34:09,000 --> 00:34:13,139
En lugar de llamar alerta de esa
manera, pongámosla en una función,

710
00:34:13,139 --> 00:34:14,880
Llamémosla: function greet( ).

711
00:34:14,880 --> 00:34:17,580
Aquí están de vuelta mis llaves,
como en nuestros días de C.

712
00:34:17,580 --> 00:34:21,840
A continuación, ahora diré:
alert ("hello, world");

713
00:34:21,840 --> 00:34:26,076
Si vuelvo a cargar esta
página, ¿veré o no la alerta?

714
00:34:26,076 --> 00:34:27,270
PÚBLICO: No la vemos.

715
00:34:27,270 --> 00:34:30,929
DAVID: Probablemente no la
vemos, a menos que, por alguna razón,

716
00:34:30,929 --> 00:34:33,330
el navegador ejecute la función
greet, de manera automática.

717
00:34:33,330 --> 00:34:34,180
Y no es así,

718
00:34:34,180 --> 00:34:34,679
no lo es.

719
00:34:34,679 --> 00:34:37,199
No hay equivalente
de main en JavaScript.

720
00:34:37,199 --> 00:34:39,239
Y ciertamente no significa greet.

721
00:34:39,239 --> 00:34:40,270
No sucede nada,

722
00:34:40,270 --> 00:34:41,550
pero está ahí.

723
00:34:41,550 --> 00:34:44,850
Supongamos que ahora quiero
conectar estas cosas de alguna manera.


724
00:34:44,850 --> 00:34:46,199
¿Qué podríamos hacer?

725
00:34:46,199 --> 00:34:51,090
En mi formato, ¿saben qué?, en
lugar de enviarlo a algún punto final,

726
00:34:51,090 --> 00:34:55,949
la acción debe ser:
action="/register">, o algo parecido,

727
00:34:55,949 --> 00:34:57,510
para continuar, diré esto:

728
00:34:57,510 --> 00:35:05,192
onsubmit="greet( );">

729
00:35:05,192 --> 00:35:06,150
Es un poco desordenado,

730
00:35:06,150 --> 00:35:07,525
y limpiaremos esto.

731
00:35:07,525 --> 00:35:10,650
Pero introduje un nuevo atributo de
HTML que literalmente hace lo que dice.

732
00:35:10,650 --> 00:35:14,710
Al enviar este formato,
llama a este código, ejecútalo.

733
00:35:14,710 --> 00:35:17,260
Y ese código, que definimos
arriba, saludará al usuario.

734
00:35:17,260 --> 00:35:17,940
Veamos.

735
00:35:17,940 --> 00:35:19,380
Déjenme ir a esta página web,

736
00:35:19,380 --> 00:35:22,770
como siempre, volveré a cargar
la página para la veamos actualizada.

737
00:35:22,770 --> 00:35:26,560
A continuación, escribiré
mi nombre y lo enviaré.

738
00:35:26,560 --> 00:35:28,810
Ahí vamos, hello, world.

739
00:35:28,810 --> 00:35:30,850
Y de repente, la página se restablece.

740
00:35:30,850 --> 00:35:32,294
En realidad, se recargó a sí misma.

741
00:35:32,294 --> 00:35:34,210
Para continuar,
limpiaré esto un poco.

742
00:35:34,210 --> 00:35:37,150
Después de llamar a
greet, haré: return false;

743
00:35:37,150 --> 00:35:41,080
Porque no tengo ningún lugar al que
el nombre de los usuarios pueda ir,

744
00:35:41,080 --> 00:35:42,190
no hay ningún servidor.

745
00:35:42,190 --> 00:35:46,540
Quiero asegurarme de que
desactivé la funcionalidad incorporada

746
00:35:46,540 --> 00:35:47,620
a este navegador.

747
00:35:47,620 --> 00:35:50,380
Ahora, cuando escribo mi
nombre y hago clic en enviar,

748
00:35:50,380 --> 00:35:52,220
todavía funciona como antes.

749
00:35:52,220 --> 00:35:54,200
Pero, noten que la
página web es la misma,

750
00:35:54,200 --> 00:35:54,940
no se recargó,

751
00:35:54,940 --> 00:35:56,106
no me llevó a otro sitio,

752
00:35:56,106 --> 00:35:57,280
solo se quedó ahí.

753
00:35:57,280 --> 00:36:02,020
Ahora, uso el formato HTML
como una aplicación local

754
00:36:02,020 --> 00:36:04,430
y no lo conecta
con nada en el servidor.

755
00:36:04,430 --> 00:36:05,290
Pero esto es un poco molesto.

756
00:36:05,290 --> 00:36:07,390
Es posible que nos
preguntemos, por qué esto hace esto.

757
00:36:07,390 --> 00:36:08,994
La mayoría de los navegadores lo hacen.

758
00:36:08,994 --> 00:36:10,660
Finalmente, esto se volverá
un poco desordenado.

759
00:36:10,660 --> 00:36:14,080
Es algo un poco comprometedor con
la privacidad de nuestros formatos.

760
00:36:14,080 --> 00:36:18,430
¿Cómo puedo desactivar esta función para
que no recuerden los nombres de los

761
00:36:18,430 --> 00:36:19,705
usuarios en los cuadros de texto?

762
00:36:19,705 --> 00:36:23,760


763
00:36:23,760 --> 00:36:29,700
Si nunca lo supieron, simplemente
se hace autocompletar = "apagado".

764
00:36:29,700 --> 00:36:31,980
Ya pudieron
ver esto en PSet 7,

765
00:36:31,980 --> 00:36:34,050
o en otro lugar en la web,
así es como hacemos eso.

766
00:36:34,050 --> 00:36:36,990
Iré directo y volveré
a cargar la página.

767
00:36:36,990 --> 00:36:40,620
Noten eso, ¿cómo puedo
interactuar con este formato?

768
00:36:40,620 --> 00:36:43,010
Al visitar la página, no puedo escribir
mi nombre de manera predeterminada.

769
00:36:43,010 --> 00:36:44,640
¿Por qué?

770
00:36:44,640 --> 00:36:48,520
Eso probablemente no fue
bueno para mi teclado.

771
00:36:48,520 --> 00:36:52,066
¿Ustedes que harían, en este caso,
para resolver este estúpido problema?

772
00:36:52,066 --> 00:36:54,060
Sí, como hacer clic aquí.

773
00:36:54,060 --> 00:36:56,870
Ahora, esto es un ejemplo,
aunque sea pequeño,

774
00:36:56,870 --> 00:37:00,660
de la experiencia del usuario
del bueno contra el malo o UX.

775
00:37:00,660 --> 00:37:03,060
Si el único propósito de nuestra
página web es que el usuario

776
00:37:03,060 --> 00:37:07,060
escriba su nombre, entonces ¿por qué
duplicamos el número de pasos

777
00:37:07,060 --> 00:37:10,890
para que el usuario haga
clic primero aquí y después,

778
00:37:10,890 --> 00:37:12,420
el o ella, escriban su nombre?

779
00:37:12,420 --> 00:37:15,570
¿Por qué no centrarse en el
texto de manera automática?

780
00:37:15,570 --> 00:37:21,090
Es una operación en un navegador
para enfocar un formato de campo. 

781
00:37:21,090 --> 00:37:24,230
Entonces, de hecho, si
regreso a mi código y agrego

782
00:37:24,230 --> 00:37:27,600
autofocus y solo como un atributo.

783
00:37:27,600 --> 00:37:31,480
No necesita estrictamente un valor
entre comillas o con un signo igual.

784
00:37:31,480 --> 00:37:35,550
Ahora, si recargo la página con
Comand+r o Ctrl+r, noten que ahora,

785
00:37:35,550 --> 00:37:36,780
el cursor está parpadeando.

786
00:37:36,780 --> 00:37:39,420
El cuadro de texto es azul en Mac OS,

787
00:37:39,420 --> 00:37:41,869
y está listo para tomar
mi nombre de inmediato.

788
00:37:41,869 --> 00:37:44,160
Así que, empiecen a pensar en dos
de estas pequeñas sutilezas,

789
00:37:44,160 --> 00:37:46,230
no solo técnicamente cómo
trabajan, o cómo hacerlos,

790
00:37:46,230 --> 00:37:47,550
también por qué haríamos esto.

791
00:37:47,550 --> 00:37:50,842
Como mi discurso del otro día sobre
por qué un sitio web no puede aceptar

792
00:37:50,842 --> 00:37:52,300
números de teléfono en diferentes formatos.

793
00:37:52,300 --> 00:37:56,370
Estas son las pequeñas cosas que comienzan
para distinguir buen código de un mal código.

794
00:37:56,370 --> 00:37:58,030
El enfoque también tiene otro detalle.

795
00:37:58,030 --> 00:38:00,900
Si presiono tab, es muy
común, especialmente en Mac OS,

796
00:38:00,900 --> 00:38:03,570
es muy obvio, donde las
cosas comienzan a destacarse en azul.

797
00:38:03,570 --> 00:38:06,060
Podemos presionar tab
alrededor de la interfaz del usuario

798
00:38:06,060 --> 00:38:07,930
que es importante,
en especial, para la accesibilidad.

799
00:38:07,930 --> 00:38:10,320
Si alguien usa un lector de
pantalla porque el usuario no puede

800
00:38:10,320 --> 00:38:12,810
ver las palabras en la pantalla,
y mucho menos la interfaz,

801
00:38:12,810 --> 00:38:16,590
usando tab y un lector de pantalla puede
que le digan lo que está en la pantalla.

802
00:38:16,590 --> 00:38:18,840
A ese resaltado,
se le denomina foco,

803
00:38:18,840 --> 00:38:21,450
tiene un verdadero
valor funcional, tal que

804
00:38:21,450 --> 00:38:26,250
conoce exactamente lo que sucederá si
comienza a interactuar con el sitio web.

805
00:38:26,250 --> 00:38:27,570
¿Se hará clic en el botón?

806
00:38:27,570 --> 00:38:28,830
¿El texto terminará en la caja?

807
00:38:28,830 --> 00:38:30,330
Depende de lo que tenga enfoque.

808
00:38:30,330 --> 00:38:34,740
Solo una cosa tendría enfoque
a la vez, por esos cuadros azules.

809
00:38:34,740 --> 00:38:39,870
De acuerdo, con lo que se dijo, esto
no es tan elegante en este momento.

810
00:38:39,870 --> 00:38:42,150
No soy del tipo que
practique lo que pregoné

811
00:38:42,150 --> 00:38:45,784
por tanto tiempo sobre
combinar un lenguaje dentro de otro.

812
00:38:45,784 --> 00:38:47,700
Empezamos a bajar
este camino hace algún tiempo.

813
00:38:47,700 --> 00:38:50,700
Empecé a poner CSS
en mis atributos de estilo.

814
00:38:50,700 --> 00:38:51,940
Y luego lo puse aquí.

815
00:38:51,940 --> 00:38:54,970
Finalmente, lo saqué de ahí
y lo puse en un archivo separado.

816
00:38:54,970 --> 00:38:57,870
Así que aquí también,
estaremos en esa misma trayectoria.

817
00:38:57,870 --> 00:39:02,910
Haré las cosas un poco diferentes,
como se indica a continuación.

818
00:39:02,910 --> 00:39:07,740
Al poner el código dentro de
las etiquetas de un script como este,

819
00:39:07,740 --> 00:39:10,350
no es necesaria la mejor práctica.

820
00:39:10,350 --> 00:39:15,090
Podemos, porque
se requiere hacer esto.

821
00:39:15,090 --> 00:39:16,997
Esta es la parte más fea del código.

822
00:39:16,997 --> 00:39:18,330
Puede ser que ahora no sea obvio,

823
00:39:18,330 --> 00:39:22,800
pero no se recomienda, poner
comillas dentro del código en HTML.

824
00:39:22,800 --> 00:39:25,144
Porque una vez más,
tenemos un lenguaje dentro de otro,

825
00:39:25,144 --> 00:39:27,060
y no es obvio
lo que esta página hará

826
00:39:27,060 --> 00:39:28,830
cuando se mire a primera vista.

827
00:39:28,830 --> 00:39:30,420
Si estamos colaborando
con alguien, tal vez estamos

828
00:39:30,420 --> 00:39:32,160
de frente al diseñador
de la interfaz del usuario.

829
00:39:32,160 --> 00:39:33,840
Y somos muy buenos
con el diseño y el arte,

830
00:39:33,840 --> 00:39:35,256
entonces haremos la interfaz.

831
00:39:35,256 --> 00:39:37,789
Y alguien más escribe
el código y la lógica,

832
00:39:37,789 --> 00:39:40,080
porque les gusta más
hacer las funciones auxiliares.

833
00:39:40,080 --> 00:39:43,380
No es posible que nos ocupemos en
ambos eficazmente, si todo nuestro trabajo

834
00:39:43,380 --> 00:39:44,790
se mezcla en el mismo archivo.

835
00:39:44,790 --> 00:39:47,290
Lo que queremos es sacar esto de ahí.

836
00:39:47,290 --> 00:39:49,230
Entonces, ¿cómo damos un paso hacia eso?

837
00:39:49,230 --> 00:39:52,510
Para continuar,
crearé un archivo nuevo

838
00:39:52,510 --> 00:39:54,450
al que llamaré dom1.html.

839
00:39:54,450 --> 00:39:56,207
Iniciaré en el mismo lugar,

840
00:39:56,207 --> 00:39:57,790
pero continuaré al hacer esto.

841
00:39:57,790 --> 00:40:01,530
Me desharé de este
controlador de eventos,

842
00:40:01,530 --> 00:40:04,230
y dejaré de usar ese
atributo por completo.

843
00:40:04,230 --> 00:40:06,550
También,
proseguiré al hacer esto.

844
00:40:06,550 --> 00:40:08,370
Me desharé de mi código de saludo.

845
00:40:08,370 --> 00:40:11,010
Continuaré y me desharé
de esta etiqueta del script.

846
00:40:11,010 --> 00:40:13,010
Por ahora,
temporalmente,

847
00:40:13,010 --> 00:40:16,870
pondré el script en la parte inferior de la
página por razones que pronto veremos.

848
00:40:16,870 --> 00:40:22,060
En la parte inferior de la página,
podría hacer: alert ("hello, world");

849
00:40:22,060 --> 00:40:24,780
Desde luego, recrea
el mismo problema que antes.

850
00:40:24,780 --> 00:40:27,090
No quiero que ocurra siempre.

851
00:40:27,090 --> 00:40:30,070
Quiero que suceda solo
cuando se envía el formato.

852
00:40:30,070 --> 00:40:35,400
¿Cómo haría eso si trato de
evitar este desorden, esta mezcla

853
00:40:35,400 --> 00:40:37,470
de código y HTML?

854
00:40:37,470 --> 00:40:40,140
Bien, hay una manera
de decirle al navegador

855
00:40:40,140 --> 00:40:42,660
haz algo cuando algo suceda.

856
00:40:42,660 --> 00:40:45,540
En específico, puedo hacer esto: document.

857
00:40:45,540 --> 00:40:48,810
Y el documento será una
variable global especial que

858
00:40:48,810 --> 00:40:51,630
se refiere a mi página web, el
documento que escribo actualmente.

859
00:40:51,630 --> 00:40:56,550
document.getElementById (),
que es una función larga cuyo nombre

860
00:40:56,550 --> 00:40:58,020
existe en JavaScript.

861
00:40:58,020 --> 00:41:01,830
Noten que las letras
E, B e I están en mayúscula,

862
00:41:01,830 --> 00:41:02,786
pero la g inicial es minúscula.

863
00:41:02,786 --> 00:41:03,660
Esto es convencional.

864
00:41:03,660 --> 00:41:06,030
En muchos lenguajes,
no utilizamos mayúsculas

865
00:41:06,030 --> 00:41:08,130
en la primera letra
de nuestra función, pero

866
00:41:08,130 --> 00:41:10,642
después de cada palabra
pondremos una mayúscula.

867
00:41:10,642 --> 00:41:13,350
Es algo llamado letra de
camello, que es como subir y bajar

868
00:41:13,350 --> 00:41:13,800
subir y bajar.

869
00:41:13,800 --> 00:41:16,140
Porque, es un poco más legible
que todas las letras sean minúsculas

870
00:41:16,140 --> 00:41:17,670
y ciertas letras sean mayúsculas.

871
00:41:17,670 --> 00:41:19,860
¿Qué ID quiero obtener?

872
00:41:19,860 --> 00:41:21,901
A continuación,
obtendré la ID: demo.

873
00:41:21,901 --> 00:41:23,650
Veremos qué eso
significa, en un momento.

874
00:41:23,650 --> 00:41:26,900
Registraré un gestor de
eventos de la siguiente manera.

875
00:41:26,900 --> 00:41:30,190
Terminaremos esta
idea en un momento.

876
00:41:30,190 --> 00:41:33,160
¿De dónde proviene demo?

877
00:41:33,160 --> 00:41:35,000
¿Dónde vimos eso antes?

878
00:41:35,000 --> 00:41:36,450
Sí, en algunas líneas antes.

879
00:41:36,450 --> 00:41:40,707
Acabo de dar mi manera arbitraria,
pero muy particular, de la ID de demo.

880
00:41:40,707 --> 00:41:42,040
La pude llamar de cualquier manera.

881
00:41:42,040 --> 00:41:44,100
También, pude hacer
esto de diferentes maneras.

882
00:41:44,100 --> 00:41:45,720
Pero esto es muy explícito.

883
00:41:45,720 --> 00:41:48,030
Inclusive, si nunca
hemos visto JavaScript antes,

884
00:41:48,030 --> 00:41:52,110
podemos comenzar a inferir que
esto dice: hey documento, hey página web,

885
00:41:52,110 --> 00:41:55,440
dame el elemento ById("demo").

886
00:41:55,440 --> 00:41:57,450
De una manera u otra,
esta es una función que

887
00:41:57,450 --> 00:42:02,040
tomará de la memoria del
navegador el cuadrado o el rectángulo

888
00:42:02,040 --> 00:42:03,060
que dibujé antes.

889
00:42:03,060 --> 00:42:06,540
La razón por la que DOM o el objeto
modelo del documento es interesante,

890
00:42:06,540 --> 00:42:10,800
es que teóricamente con:
document.getElementById,

891
00:42:10,800 --> 00:42:14,760
tenemos la capacidad de tomar
uno de estos nodos en el árbol

892
00:42:14,760 --> 00:42:18,662
o una de estas estructuras de datos
en la memoria y hacer algo con eso.

893
00:42:18,662 --> 00:42:19,870
Ahora, ¿qué haremos?

894
00:42:19,870 --> 00:42:21,540
Estamos a punto de ver.

895
00:42:21,540 --> 00:42:24,750
Cuando tengo
acceso a este formato,

896
00:42:24,750 --> 00:42:28,800
sucede que los formatos, para el
manual para HTML, por así decirlo,

897
00:42:28,800 --> 00:42:31,410
tienen diferentes gestores
de eventos en el envío,

898
00:42:31,410 --> 00:42:34,587
tal vez hacer clic, mover
el mouse, arrastrar el mouse,

899
00:42:34,587 --> 00:42:35,670
depende del elemento.

900
00:42:35,670 --> 00:42:38,340
Pero los formatos
pueden, desde luego, enviarse.

901
00:42:38,340 --> 00:42:44,670
Así que, al decir: .onsubmit,
es el equivalente de decir: call this

902
00:42:44,670 --> 00:42:45,540
function.

903
00:42:45,540 --> 00:42:47,430
Esto es un pseudocódigo,

904
00:42:47,430 --> 00:42:49,080
necesito darle una función.

905
00:42:49,080 --> 00:42:51,460
Puedo hacer esto
en un par de formas,

906
00:42:51,460 --> 00:42:52,980
puedo hacerlo así.

907
00:42:52,980 --> 00:43:00,150
Así que, function greet es una
función que solo dice, hello, world.

908
00:43:00,150 --> 00:43:04,320
En este punto de la historia,
definí una función aquí

909
00:43:04,320 --> 00:43:05,790
y le di un nombre.

910
00:43:05,790 --> 00:43:10,890
Aquí dice: en envío del
formato demo, llame a esta función.

911
00:43:10,890 --> 00:43:12,240
Pero, notemos la diferencia,

912
00:43:12,240 --> 00:43:13,890
es sutil.

913
00:43:13,890 --> 00:43:16,410
No hice esto, que es lo normal.

914
00:43:16,410 --> 00:43:18,810
En cambio, hice esto.

915
00:43:18,810 --> 00:43:22,350
Por qué, aunque sutil,
¿es probable que sea importante

916
00:43:22,350 --> 00:43:25,950
que omitamos el paréntesis?

917
00:43:25,950 --> 00:43:29,032
¿Qué es lo que piensan sobre esto?

918
00:43:29,032 --> 00:43:31,530
PÚBLICO: Porque no
acepta cualquier argumento.

919
00:43:31,530 --> 00:43:33,530
DAVID: No acepta
cualquier argumento.

920
00:43:33,530 --> 00:43:36,480
Eso es cierto, pero no es
la razón para hacer esto.

921
00:43:36,480 --> 00:43:37,360
Buena idea, sin embargo.

922
00:43:37,360 --> 00:43:37,860
Sí.

923
00:43:37,860 --> 00:43:40,057
PÚBLICO: Tal vez
nadie puede cambiarlo.

924
00:43:40,057 --> 00:43:42,390
DAVID: Nadie puede
cambiarlo. No, también ahí.

925
00:43:42,390 --> 00:43:46,200
Creo que cualquiera que tenga acceso al
archivo sin duda puede cambiar mi código.

926
00:43:46,200 --> 00:43:49,195
No es eso.

927
00:43:49,195 --> 00:43:52,302
PÚBLICO: ¿Por qué
tratas de enviarlo a la salida?

928
00:43:52,302 --> 00:43:53,260
DAVID: Muy cerca.

929
00:43:53,260 --> 00:43:54,560
Trato de enviarlo a la salida.

930
00:43:54,560 --> 00:43:56,170
No del todo, pero creo
estamos en el camino correcto.

931
00:43:56,170 --> 00:43:57,630
PÚBLICO: Entonces, no
lo quieres llamar de inmediato.

932
00:43:57,630 --> 00:43:58,463
DAVID: Sí.

933
00:43:58,463 --> 00:44:00,360
Para que no lo llame de inmediato.

934
00:44:00,360 --> 00:44:03,990
Desde la semana uno de CS50, cada
vez que vimos el nombre de una función,

935
00:44:03,990 --> 00:44:08,730
seguido de abrir y cerrar paréntesis,
tal vez con algunos argumentos dentro,

936
00:44:08,730 --> 00:44:12,510
significó llamar a esta
función y tal vez pasar en estos inputs.

937
00:44:12,510 --> 00:44:15,980
Eso no es lo que
quiero en esta línea de código.

938
00:44:15,980 --> 00:44:21,090
En esta línea de código, queremos que
el navegador sepa qué función llamar,

939
00:44:21,090 --> 00:44:23,679
no llamarla en ese mismo momento.

940
00:44:23,679 --> 00:44:25,470
No queremos que
esa función sea llamada

941
00:44:25,470 --> 00:44:27,090
tan pronto como
tomemos esta línea de código.

942
00:44:27,090 --> 00:44:29,756
Porque de lo contrario,
veremos la alerta, no importa qué,

943
00:44:29,756 --> 00:44:32,400
en el momento en que el navegador
lea esa línea de código en la pantalla.

944
00:44:32,400 --> 00:44:34,720
En cambio, solo queremos
decirle al navegador, hey,

945
00:44:34,720 --> 00:44:37,620
para que lo sepas en el
futuro, cuando se envíe el formato,

946
00:44:37,620 --> 00:44:40,770
aquí está solo el nombre
de la funcionar que llamarás.

947
00:44:40,770 --> 00:44:41,790
Pero no la llames ahora.

948
00:44:41,790 --> 00:44:46,740
Entonces, esa estúpida y simple
diferencia, hace toda la diferencia

949
00:44:46,740 --> 00:44:48,280
funcionalmente, en este caso.

950
00:44:48,280 --> 00:44:50,290
Proseguiré a deshacerme de esto,

951
00:44:50,290 --> 00:44:51,900
y abandonar el programa
de la siguiente manera.

952
00:44:51,900 --> 00:44:57,009
Regresaré a la página web,
volveré a cargarla y haré clic en enviar.

953
00:44:57,009 --> 00:44:58,050
Y vemos, hello, world.

954
00:44:58,050 --> 00:45:00,340
La funcionalidad
realmente no cambió.

955
00:45:00,340 --> 00:45:01,950
Pero al menos, progresamos un poco.

956
00:45:01,950 --> 00:45:04,980
No hice tanto
como sería lo ideal.

957
00:45:04,980 --> 00:45:07,930
Creo que sería
mucho mejor hacer dos cosas.

958
00:45:07,930 --> 00:45:10,290
Una, esto es un poco patética.

959
00:45:10,290 --> 00:45:12,640
Definí una función llamada saludar (greet).

960
00:45:12,640 --> 00:45:16,560
Después, usé el nombre
de la función en un solo lugar.

961
00:45:16,560 --> 00:45:20,107
Lo que sugiere que nunca necesité
esta palabra greet en el primer lugar.

962
00:45:20,107 --> 00:45:20,940
Lo sabemos, está bien,

963
00:45:20,940 --> 00:45:21,439
está claro,

964
00:45:21,439 --> 00:45:22,041
es correcto.

965
00:45:22,041 --> 00:45:23,790
Sabemos que
yo recuerdo de antes

966
00:45:23,790 --> 00:45:27,420
que JavaScript admite funciones
anónimas, que no tienen nombres.

967
00:45:27,420 --> 00:45:28,870
¿Cómo podría hacer esto?

968
00:45:28,870 --> 00:45:34,740
Bueno, podemos
hacerlo de una sola vez.

969
00:45:34,740 --> 00:45:38,460
Para continuar, cortaré, pegaré y me
desharé del exceso de espacio en blanco,

970
00:45:38,460 --> 00:45:43,650
ahora, me desharé de la
función greet, y solo haré esto.

971
00:45:43,650 --> 00:45:46,650
Solo por claridad, pondré
la llave en la misma línea,

972
00:45:46,650 --> 00:45:48,420
a pesar de que estrictamente no importa.

973
00:45:48,420 --> 00:45:50,880
Esto sería
estilísticamente más común.

974
00:45:50,880 --> 00:45:52,020
¿Que estoy haciendo?

975
00:45:52,020 --> 00:45:54,870
Ahora esto dice, hey
JavaScript, obtén el elemento

976
00:45:54,870 --> 00:45:58,710
llamado demo o con una ID de
demo y cuando se envíe,

977
00:45:58,710 --> 00:46:00,840
llama a esta función.

978
00:46:00,840 --> 00:46:02,790
Aquí hay una diferencia sutil, de nuevo.

979
00:46:02,790 --> 00:46:05,670
Abre y cierra paréntesis, lo
que no significa llamar a la función.

980
00:46:05,670 --> 00:46:08,670
Inmediatamente le siguen
las llaves, lo que significa que

981
00:46:08,670 --> 00:46:13,480
viene el código que se debe ejecutar
cuando se llama a esta función.

982
00:46:13,480 --> 00:46:16,500
Termina con un punto y coma, no 
porque las funciones, por sí mismas

983
00:46:16,500 --> 00:46:20,250
necesiten terminar con punto y coma,
todo esto es una larga línea de código

984
00:46:20,250 --> 00:46:21,862
a la que le puse sangría.

985
00:46:21,862 --> 00:46:24,570
Porque estamos declarando una función
y asignándolo de derecha a

986
00:46:24,570 --> 00:46:26,370
a la izquierda a la vez.

987
00:46:26,370 --> 00:46:27,870
Aquí hay un enorme trabalenguas.

988
00:46:27,870 --> 00:46:30,540
De nuevo, ninguna de las ideas
son nuevas, excepto por el hecho

989
00:46:30,540 --> 00:46:34,890
de que funciones
pueden ser anónimas, sin nombre.

990
00:46:34,890 --> 00:46:42,750
Podemos pasar funciones
alrededor, y llamarlas más tarde.

991
00:46:42,750 --> 00:46:43,820
¿Alguna pregunta sobre esto?

992
00:46:43,820 --> 00:46:44,889
Sí.

993
00:46:44,889 --> 00:46:46,930
PÚBLICO: Entonces, ¿puedes
eliminar funciones, y en su lugar

994
00:46:46,930 --> 00:46:49,720
solo poner: = alert ("hello, world")?

995
00:46:49,720 --> 00:46:50,970
DAVID: Buena pregunta.

996
00:46:50,970 --> 00:46:53,390
¿Puedo deshacerme de la
función y simplemente hacer esto?

997
00:46:53,390 --> 00:46:54,920
Respuesta corta, no.

998
00:46:54,920 --> 00:47:00,140
Porque, si hago esto,
esto será igual que en C,

999
00:47:00,140 --> 00:47:04,180
llamará a esta función,
que visualizará esa alert.

1000
00:47:04,180 --> 00:47:07,430
Después, asignará el valor de
retorno de esa función, que yo no

1001
00:47:07,430 --> 00:47:10,340
creo que tenga
en absoluto, para enviar.

1002
00:47:10,340 --> 00:47:12,844
Esto llama a la función,
asigna su valor de retorno,

1003
00:47:12,844 --> 00:47:14,510
que técnicamente no está definida, a esto.

1004
00:47:14,510 --> 00:47:17,299
Entonces, nada sucederá si
posteriormente se hace clic en enviar.

1005
00:47:17,299 --> 00:47:18,840
Será llamado prematuramente.

1006
00:47:18,840 --> 00:47:21,360
La manera de evitar esto
es, de nuevo, definir una función,

1007
00:47:21,360 --> 00:47:23,540
y luego solo pasar por su nombre.

1008
00:47:23,540 --> 00:47:26,814
O declararla de manera
anónima, por así decirlo, como esta.

1009
00:47:26,814 --> 00:47:29,230
Para que solo se le
diga al navegador, en enviar,

1010
00:47:29,230 --> 00:47:32,240
llama a este fragmento
de código en entre llaves.

1011
00:47:32,240 --> 00:47:34,200
Eso es todo.

1012
00:47:34,200 --> 00:47:34,700
OK.

1013
00:47:34,700 --> 00:47:36,207
Este todavía es el tonto demo,

1014
00:47:36,207 --> 00:47:37,790
porque continua diciendo: hello, world.

1015
00:47:37,790 --> 00:47:41,190
Sin embargo, tengo un formato con el cual
el usuario puede escribir su nombre.

1016
00:47:41,190 --> 00:47:42,690
Entonces, ¿cómo consigo ese valor?

1017
00:47:42,690 --> 00:47:46,340
Bueno, en realidad, aquí es
bastante sencillo, potencialmente.

1018
00:47:46,340 --> 00:47:47,570
A continuación, haré esto.

1019
00:47:47,570 --> 00:47:51,560
Hello, quiero que diga David,
si soy yo el que escribe mi nombre.

1020
00:47:51,560 --> 00:47:53,540
Desde luego, yo
no quiero codificar eso.

1021
00:47:53,540 --> 00:47:57,050
Quiero, de alguna manera, obtener el
nombre del usuario e introducirlo aquí.

1022
00:47:57,050 --> 00:47:58,130
¿Cómo puedo hacer eso?

1023
00:47:58,130 --> 00:48:01,568
Puedo decir: let name = document.

1024
00:48:01,568 --> 00:48:08,140
Solo para que veamos a dónde irá esto:
getElementById, tal vez el name.

1025
00:48:08,140 --> 00:48:09,670
Porque, tengo otra ID.

1026
00:48:09,670 --> 00:48:13,750
Recuerden, tenía la expectativa de
escribir antes esa línea de código.

1027
00:48:13,750 --> 00:48:14,830
Obtenga el nombre del usuario.

1028
00:48:14,830 --> 00:48:18,100
Nosotros solo sabemos
esto porque lo vimos antes, en línea,

1029
00:48:18,100 --> 00:48:22,600
o en el curso, .value me dará el texto
que el usuario tecleó, y después

1030
00:48:22,600 --> 00:48:23,950
punto y coma.

1031
00:48:23,950 --> 00:48:27,226
Ahora, al igual que
en C y en Python,

1032
00:48:27,226 --> 00:48:28,600
No quiero hacer esto.

1033
00:48:28,600 --> 00:48:30,820
Porque eso
dirá, hello, name.

1034
00:48:30,820 --> 00:48:31,990
Quiero introducirlo.

1035
00:48:31,990 --> 00:48:34,270
Puedo hacer esto de varias maneras.

1036
00:48:34,270 --> 00:48:38,410
Quizás la más evidente es esta.

1037
00:48:38,410 --> 00:48:40,720
Aquellos de ustedes que
tomaron APCS o similares

1038
00:48:40,720 --> 00:48:42,760
podrían saber qué más significa en Java.

1039
00:48:42,760 --> 00:48:45,940
Esto es solo una coincidencia,
que también funciona aquí.

1040
00:48:45,940 --> 00:48:48,520
¿Qué es lo que significa el signo
de más, en sistemas, además de sumar?

1041
00:48:48,520 --> 00:48:49,420
PÚBLICO: Concatenación.

1042
00:48:49,420 --> 00:48:50,670
DAVID: Concatenación.

1043
00:48:50,670 --> 00:48:53,516
En C, esto pudo
ser un dolor en el cuello.

1044
00:48:53,516 --> 00:48:55,390
En C, esto es donde
tenemos que sacar de repente

1045
00:48:55,390 --> 00:48:58,330
como malloc, o algunos
grandes arreglos en los estantes

1046
00:48:58,330 --> 00:49:01,000
y como introducen
un nombre dentro de otro.

1047
00:49:01,000 --> 00:49:04,540
En Python, también podemos 
concatenar cosas usando el signo de más.

1048
00:49:04,540 --> 00:49:06,760
O podemos usar f-strings
o cadenas de formato.

1049
00:49:06,760 --> 00:49:09,010
En JavaScript, podemos
hacer signos de más como este.

1050
00:49:09,010 --> 00:49:13,190
Esto concatenará "hello"
con la palabra name y lo imprimirá.

1051
00:49:13,190 --> 00:49:14,680
Veamos lo qué sucede.

1052
00:49:14,680 --> 00:49:18,910
Si no cometí algún error, cuando
recargue esta página, escriba mi nombre

1053
00:49:18,910 --> 00:49:24,230
y haga clic en enviar,
hmm, ¿qué hice mal?

1054
00:49:24,230 --> 00:49:24,942
¿Qué es eso?

1055
00:49:24,942 --> 00:49:25,900
Olvidé refrescarlo.

1056
00:49:25,900 --> 00:49:28,420
Me acabo de dar cuenta de
que también olvidé cambiar la URL.

1057
00:49:28,420 --> 00:49:31,270
Ahora estamos en demo1.html.

1058
00:49:31,270 --> 00:49:33,781
Recargaremos, David, enviar.

1059
00:49:33,781 --> 00:49:34,780
Y ahí tenemos a David.

1060
00:49:34,780 --> 00:49:37,810
Y solo por si acaso,
escribiré María, enviar.

1061
00:49:37,810 --> 00:49:41,020
Parece ser que
cambió dinámicamente.

1062
00:49:41,020 --> 00:49:44,800
Esa es una buena mejora,
ahora que hicimos eso.

1063
00:49:44,800 --> 00:49:46,480
¿Estrictamente necesitamos esta variable?

1064
00:49:46,480 --> 00:49:49,150
No, pero si tenemos esta variable,
notemos que también podemos hacer esto.

1065
00:49:49,150 --> 00:49:53,200
Solo vimos esto, en
JavaScript, para bien o para mal,

1066
00:49:53,200 --> 00:49:56,470
tenemos esto llamado comillas invertidas,
que son la clave en un teclado de EE. UU

1067
00:49:56,470 --> 00:49:59,150
en general está en la parte superior
izquierda, debajo de la tecla Esc.

1068
00:49:59,150 --> 00:50:01,750
Si tengo acentos
graves, ¿adivinen qué?

1069
00:50:01,750 --> 00:50:07,090
Podemos hacer esto, que es
más feo que las f-strings de Python,

1070
00:50:07,090 --> 00:50:08,340
pero hace exactamente lo mismo.

1071
00:50:08,340 --> 00:50:10,090
De nuevo, este
es el tipo de cosas donde

1072
00:50:10,090 --> 00:50:12,460
comenzaremos a entornar los ojos
como aspirantes a programadores.

1073
00:50:12,460 --> 00:50:15,293
Donde, si un lenguaje hace
algo un poco diferente, solo

1074
00:50:15,293 --> 00:50:17,679
tenemos que recordar
constantemente, es la misma idea,

1075
00:50:17,679 --> 00:50:18,720
es exactamente la misma idea,

1076
00:50:18,720 --> 00:50:19,970
solo es una sintaxis diferente.

1077
00:50:19,970 --> 00:50:22,390
Esto introduciría el
nombre en esos acentos graves.

1078
00:50:22,390 --> 00:50:24,971
Esto es llamado
formato en JavaScript.

1079
00:50:24,971 --> 00:50:25,470
Muy bien.

1080
00:50:25,470 --> 00:50:29,320
¿Alguna pregunta sobre eso hasta ahora?

1081
00:50:29,320 --> 00:50:34,340
Está bien, presentaré un
último adelanto, como el siguiente.

1082
00:50:34,340 --> 00:50:39,370
Para continuar hoy, entraré
en nuestro código de distribución

1083
00:50:39,370 --> 00:50:46,150
y abriré, digamos, en
source 11, este directorio de aquí.

1084
00:50:46,150 --> 00:50:48,280
En un momento,
veremos todos los archivos de aquí

1085
00:50:48,280 --> 00:50:50,570
y mostraré un par de ejemplos.

1086
00:50:50,570 --> 00:50:54,340
Uno es muy común, desde luego, para
tener formatos basados ​​en la web

1087
00:50:54,340 --> 00:50:56,320
donde el usuario
puede o no puede darnos,

1088
00:50:56,320 --> 00:50:58,090
lo que queremos que escriba.

1089
00:50:58,090 --> 00:51:00,130
Es bueno
validar su entrada,

1090
00:51:00,130 --> 00:51:01,707
como lo hicimos en el servidor.

1091
00:51:01,707 --> 00:51:03,790
Si validamos la entrada
del usuario y nos aseguramos de

1092
00:51:03,790 --> 00:51:06,998
que nos dieron un correo
electrónico y dos contraseñas iguales

1093
00:51:06,998 --> 00:51:10,486
y verificó nuestros términos y condiciones
de casilla de verificación y demás,

1094
00:51:10,486 --> 00:51:11,860
podemos hacer todo eso en Python.

1095
00:51:11,860 --> 00:51:16,520
Vimos cómo hacer
eso en application.pi.

1096
00:51:16,520 --> 00:51:19,060
Es una mejor
experiencia de usuario, UX, si

1097
00:51:19,060 --> 00:51:21,860
el usuario más inmediato da comentarios,
tal vez comentarios más bonitos,

1098
00:51:21,860 --> 00:51:24,040
usa algunos colores
y los destaca en la pantalla

1099
00:51:24,040 --> 00:51:26,110
llama nuestra
atención a lo que está mal.

1100
00:51:26,110 --> 00:51:29,050
Con JavaScript,
nosotros tenemos esa capacidad.

1101
00:51:29,050 --> 00:51:34,760
Además, en JavaScript, tenemos el
capacidad para hacer algo como esto.

1102
00:51:34,760 --> 00:51:38,470
Si ejecuto el servidor web
en el código de distribución de hoy

1103
00:51:38,470 --> 00:51:41,320
y abro esta URL, 
veré una lista de nuevo.

1104
00:51:41,320 --> 00:51:46,084
Proseguiré, subiré
a donde dice ajax1.html.

1105
00:51:46,084 --> 00:51:48,250
Aquí tengo un formato
web muy simple, no es diferente

1106
00:51:48,250 --> 00:51:50,350
en espíritu a lo que
tenemos en finanzas de CS50.

1107
00:51:50,350 --> 00:51:53,230
Pero, si quiero ver cuál es
la cotización de las acciones de Netflix,

1108
00:51:53,230 --> 00:51:58,960
Puedo escribir, después oprimo get quote,
y lo obtengo solo para el cliente.

1109
00:51:58,960 --> 00:52:00,820
No lo necesito
enviar a otra ruta.

1110
00:52:00,820 --> 00:52:03,940
No necesito usar Python,
que parece interpretar un formato.

1111
00:52:03,940 --> 00:52:07,060
Puedo interactuar
directamente con el formato y hacer esto.

1112
00:52:07,060 --> 00:52:11,800
Por último, solo un adelanto,
podemos hacer algo como esto por lo cual,

1113
00:52:11,800 --> 00:52:12,790
si en realidad,

1114
00:52:12,790 --> 00:52:15,970
diablos, si en realidad
configuramos las cosas correctamente,

1115
00:52:15,970 --> 00:52:19,300
nosotros mismos podemos conseguir
un mapa completo usando JavaScript.

1116
00:52:19,300 --> 00:52:21,850
Al final, podamos
usar JavaScript y comencemos

1117
00:52:21,850 --> 00:52:24,400
a hacer aplicaciones
interactivas como esta,

1118
00:52:24,400 --> 00:52:27,724
que usen la API de Google Maps para
que el usuario haga clic y arrastre

1119
00:52:27,724 --> 00:52:29,140
e interactúe con ella.

1120
00:52:29,140 --> 00:52:32,440
Al hacer clic en,
por decir algo, Stanford, California,

1121
00:52:32,440 --> 00:52:36,462
y ver lo que pasa en las noticias
en Stanford, California ahora mismo,

1122
00:52:36,462 --> 00:52:39,670
al escribir el código que se ejecuta en
el navegador, que habla con otro servidor,

1123
00:52:39,670 --> 00:52:41,540
recupera los datos y los interpreta.

1124
00:52:41,540 --> 00:52:44,339
Comenzamos la introducción
de JavaScript, para ver

1125
00:52:44,339 --> 00:52:45,880
la sintaxis con la que podemos hacer esto.

1126
00:52:45,880 --> 00:52:47,671
Tomemos nuestros
5 minutos de descanso y después

1127
00:52:47,671 --> 00:52:51,410
comenzaremos a construir algunas
de estas cosas para ver cómo interactúan.

1128
00:52:51,410 --> 00:52:52,960
Muy bien.

1129
00:52:52,960 --> 00:52:54,280
Muy bien, estamos de vuelta.

1130
00:52:54,280 --> 00:52:59,550
Recordemos que el formato que
creamos hace un momento solo se ve así.

1131
00:52:59,550 --> 00:53:01,300
Es el bastante simple, feo HTML.

1132
00:53:01,300 --> 00:53:02,230
No hay CSS.

1133
00:53:02,230 --> 00:53:04,300
Aquí, nos
enfocamos en la funcionalidad.

1134
00:53:04,300 --> 00:53:06,540
Les di un enfoque automático hacia
el campo del correo electrónico,

1135
00:53:06,540 --> 00:53:08,630
comenzaré a iniciar sesión de inmediato.

1136
00:53:08,630 --> 00:53:10,320
Quiero llevar a cabo este comportamiento.

1137
00:53:10,320 --> 00:53:12,320
Saben que,
yo no quiero cooperar.

1138
00:53:12,320 --> 00:53:15,000
Solo quiero
registrarme y miren lo que sucede.

1139
00:53:15,000 --> 00:53:16,950
Quiero validar este formato.

1140
00:53:16,950 --> 00:53:17,930
Aquí hay una manera.

1141
00:53:17,930 --> 00:53:21,200
Parece que usa el método de
alerta y dice correo electrónico perdido.

1142
00:53:21,200 --> 00:53:23,180
No permito que
el usuario se registre.

1143
00:53:23,180 --> 00:53:32,060
OK, cooperaré un poco,
malan@harvard.edu, registrarse.

1144
00:53:32,060 --> 00:53:34,370
Ahora dice, falta la contraseña.

1145
00:53:34,370 --> 00:53:37,050
A continuación,
le daré una contraseña.

1146
00:53:37,050 --> 00:53:39,830
Uno, dos, tres, cuatro, cinco, registrarse.

1147
00:53:39,830 --> 00:53:40,850
Las contraseñas no coinciden.

1148
00:53:40,850 --> 00:53:41,550
Desde luego que no,

1149
00:53:41,550 --> 00:53:42,716
porque no la escribí.

1150
00:53:42,716 --> 00:53:45,140
Uno, dos, tres, cuatro, cinco, registrarse.

1151
00:53:45,140 --> 00:53:48,380
Las contraseñas aún no coinciden
porque accidentalmente escribí seis.

1152
00:53:48,380 --> 00:53:51,980
Registrarse, casilla de verificación
está sin marcar, y así sucesivamente.

1153
00:53:51,980 --> 00:53:55,412
Una vez que verifique
la casilla y haga clic en registrarse,

1154
00:53:55,412 --> 00:53:57,620
Quiero que el
formato pase al servidor.

1155
00:53:57,620 --> 00:53:59,690
¿Cómo comenzamos a
imponer ese tipo de lógica?

1156
00:53:59,690 --> 00:54:03,882
Podríamos hacer lo que hacen
en CS50 Finance, mediante el cual

1157
00:54:03,882 --> 00:54:06,590
verifican el servidor y
se aseguran que el usuario les dio

1158
00:54:06,590 --> 00:54:08,860
correo electrónico, contraseña,
confirmación y casilla de verificación.

1159
00:54:08,860 --> 00:54:11,450
Si no, se muestran con
ellos como el gato gruñón y

1160
00:54:11,450 --> 00:54:13,190
se quejan de que no cooperaron.

1161
00:54:13,190 --> 00:54:15,090
Eso es todo
lindo la primera vez,

1162
00:54:15,090 --> 00:54:16,820
pero no es la mejor experiencia de usuario.

1163
00:54:16,820 --> 00:54:19,460
Porque ahora el usuario
tiene que hacer clic en el botón Atrás

1164
00:54:19,460 --> 00:54:22,004
y tiene que rellenar
el formato y hacerlo de nuevo.

1165
00:54:22,004 --> 00:54:24,170
Sería bueno obtener
comentarios más inmediatos

1166
00:54:24,170 --> 00:54:25,010
como los que llegan aquí.

1167
00:54:25,010 --> 00:54:26,930
Y no necesariamente tan
fea como esta retroalimentación,

1168
00:54:26,930 --> 00:54:30,350
porque, yo diría, que
esta alerta es solo para depuración.

1169
00:54:30,350 --> 00:54:31,760
Pero, al menos es rápida,

1170
00:54:31,760 --> 00:54:34,130
y no nos molestamos
de hablar con el servidor.

1171
00:54:34,130 --> 00:54:38,570
Aquí está el HTML con el que
podríamos crear ese formato.

1172
00:54:38,570 --> 00:54:40,820
Para la mayor parte de
esto, está el cortador de galletas,

1173
00:54:40,820 --> 00:54:46,390
deshabilité la función de autocompletar,
porque estaba demasiado celoso de ella.

1174
00:54:46,390 --> 00:54:48,140
No es estrictamente
necesaria para contraseñas.

1175
00:54:48,140 --> 00:54:50,510
Porque los navegadores no
hacen esto de manera predeterminada.

1176
00:54:50,510 --> 00:54:53,330
Solo quiero que se vea como
este, que es incluso más pequeño.

1177
00:54:53,330 --> 00:54:57,830
Tengo un campo llamado
email con formato text.

1178
00:54:57,830 --> 00:55:00,830
Tengo otro campo llamado
password con formato password.

1179
00:55:00,830 --> 00:55:04,400
Tengo otro campo llamado
confirmation también con formato password.

1180
00:55:04,400 --> 00:55:07,750
Tengo una entrada de
formato checkbox llamada agreement

1181
00:55:07,750 --> 00:55:09,000
seguido por el botón de submit.

1182
00:55:09,000 --> 00:55:09,930
Eso es todo.

1183
00:55:09,930 --> 00:55:12,510
¿Cómo comienzo a implementar
algo de la lógica que acabamos de ver?

1184
00:55:12,510 --> 00:55:13,595
Bien, haré esto.

1185
00:55:13,595 --> 00:55:15,470
Aquí en la etiqueta
del script, eventualmente

1186
00:55:15,470 --> 00:55:17,178
factorizaremos
esto a otro archivo,

1187
00:55:17,178 --> 00:55:18,860
por aquí, haré esto.

1188
00:55:18,860 --> 00:55:21,770
Declararé una
variable llamada form y 

1189
00:55:21,770 --> 00:55:25,166
y obtendré por medio de:
document.getElementById ("registration").

1190
00:55:25,166 --> 00:55:28,880


1191
00:55:28,880 --> 00:55:29,810
¿Por qué eso?

1192
00:55:29,810 --> 00:55:33,200
Bueno, noten que di un
ID único a mi formato de registro

1193
00:55:33,200 --> 00:55:36,810
solo porque quiero
acceder a él, como aquí.

1194
00:55:36,810 --> 00:55:41,390
Sé que los formatos tienen gestores
de envío, puedo continuar y decir,

1195
00:55:41,390 --> 00:55:45,890
hey navegador, en el envío
de este formato, ve directo y llama

1196
00:55:45,890 --> 00:55:49,890
la siguiente función,
aunque sea una función anónima.

1197
00:55:49,890 --> 00:55:53,580
Todo lo que me queda por hacer
es implementar esta función anónima.

1198
00:55:53,580 --> 00:55:56,180
Que es lo que quiero hacer cuando el
usuario haga clic en el botón enviar.

1199
00:55:56,180 --> 00:55:59,070
Quiero validar
su entrada de alguna manera.

1200
00:55:59,070 --> 00:56:01,940
Así que, lo haré
de esta manera lógica.

1201
00:56:01,940 --> 00:56:06,950
Si este formato del campo email tiene
un valor de formato del usuario que

1202
00:56:06,950 --> 00:56:10,430
solo es igual a apertura y
cierre de comillas, para continuar

1203
00:56:10,430 --> 00:56:14,550
alertaré al usuario
al decir: alert("missing email");

1204
00:56:14,550 --> 00:56:15,800
a continuación devolveré falso.

1205
00:56:15,800 --> 00:56:16,760
Porque eso es todo.

1206
00:56:16,760 --> 00:56:18,230
No devolveré cierto.

1207
00:56:18,230 --> 00:56:20,570
Devolver verdadero, significaría
que el usuario enviara el formato.

1208
00:56:20,570 --> 00:56:22,910
Devolver falso, significaría
que se detendría el envío del formato.

1209
00:56:22,910 --> 00:56:24,650
El usuario lo intentará de nuevo.

1210
00:56:24,650 --> 00:56:27,320
Hagamos esto ahora para contraseñas.

1211
00:56:27,320 --> 00:56:32,810
¿Qué tal si decimos?
else if (form.password.value == "")

1212
00:56:32,810 --> 00:56:36,850
para continuar,
alertaré al usuario

1213
00:56:36,850 --> 00:56:42,057
alert("missing password");
return false;

1214
00:56:42,057 --> 00:56:43,640
Lo que sigue es un poco más interesante,

1215
00:56:43,640 --> 00:56:48,879
porque ahora puedo decir:
else if (form.password.value)

1216
00:56:48,879 --> 00:56:50,420
¿Qué es lo que quiero
decir aquí de manera lógica?

1217
00:56:50,420 --> 00:56:51,357
PÚBLICO: .length

1218
00:56:51,357 --> 00:56:53,190
DAVID: .lenght,
podría hacer eso.

1219
00:56:53,190 --> 00:56:57,334
Esa no es una pista que vimos
y que tengo en la interfaz de usuario.

1220
00:56:57,334 --> 00:56:59,707
PÚBLICO: ¿Nos encontraremos
con algún tipo de confirmación?

1221
00:56:59,707 --> 00:57:01,290
DAVID: La confirmación, sí.

1222
00:57:01,290 --> 00:57:03,740
Resulta que la sintaxis
es la misma que en C,

1223
00:57:03,740 --> 00:57:08,570
!= form.confirmation.value

1224
00:57:08,570 --> 00:57:11,740
A continuación
diré, creo que dije,

1225
00:57:11,740 --> 00:57:16,610
passwords, qué dije,
alert ("passwords don´t match");

1226
00:57:16,610 --> 00:57:18,215
y también: return false;

1227
00:57:18,215 --> 00:57:20,090
La casilla de
verificación es un poco diferente.

1228
00:57:20,090 --> 00:57:27,447
Puedo decir:
else if (! form.agreement.checked)

1229
00:57:27,447 --> 00:57:29,780
Eso es un booleano
asociado a una casilla de verificación.

1230
00:57:29,780 --> 00:57:32,060
Solo podríamos saber esto
por la documentación de JavaScript.

1231
00:57:32,060 --> 00:57:33,530
Pero no lo invierte.

1232
00:57:33,530 --> 00:57:36,590
Si no está
marcado, alertaré al usuario

1233
00:57:36,590 --> 00:57:41,130
alert ("checkbox unchecked");
return false;

1234
00:57:41,130 --> 00:57:44,120
Si ninguna de esas
condiciones se aplican y lo hacemos

1235
00:57:44,120 --> 00:57:46,112
a través de este guantelete
de verificaciones de error,

1236
00:57:46,112 --> 00:57:47,570
Probablemente, ¿qué querré hacer aquí?

1237
00:57:47,570 --> 00:57:50,110


1238
00:57:50,110 --> 00:57:51,314
¿Qué quiero devolver?

1239
00:57:51,314 --> 00:57:52,230
PÚBLICO: Devolver cierto.

1240
00:57:52,230 --> 00:57:52,930
DAVID: Sí, devuelve cierto.

1241
00:57:52,930 --> 00:57:56,110
Eso significa, hey navegador, haz lo que
quieras hacer de manera predeterminada.

1242
00:57:56,110 --> 00:57:57,940
Terminé la verificación
de errores del usuario.

1243
00:57:57,940 --> 00:58:00,400
Hay algunas oportunidades
para el refinamiento aquí.

1244
00:58:00,400 --> 00:58:03,970
Podría decir, no necesito
compararlo contra la cadena vacía.

1245
00:58:03,970 --> 00:58:08,470
Podría decir, si no hay un valor,
lo cual es un poco más ajustado.

1246
00:58:08,470 --> 00:58:10,827
Y puedo decir, si
no hay una contraseña,

1247
00:58:10,827 --> 00:58:12,160
podría limpiarlo de esa manera.

1248
00:58:12,160 --> 00:58:14,743
Podría usar la cadena length,
que es una cosa.

1249
00:58:14,743 --> 00:58:17,690
Podría decir algo, si
quisiera ser quisquilloso,

1250
00:58:17,690 --> 00:58:24,760
else if (form.password.value.length < 8)
caracteres,

1251
00:58:24,760 --> 00:58:28,690
Puedo decir algo como:
alert ("password too short");

1252
00:58:28,690 --> 00:58:31,540
lo que sería una verificación
agradable: return false;

1253
00:58:31,540 --> 00:58:35,277
Si quiero estar seguro, me aseguraré de
que el usuario tenga un estilo aleatorio

1254
00:58:35,277 --> 00:58:38,110
que busque la contraseña, tal vez con
algunos números o caracteres especiales

1255
00:58:38,110 --> 00:58:41,347
o algunas de esas, un tanto molestas,
pero posiblemente buenas restricciones,

1256
00:58:41,347 --> 00:58:43,180
a menos que usemos
un gestor de contraseñas.

1257
00:58:43,180 --> 00:58:46,090
Así es como exactamente
lo hacen los sitios web.

1258
00:58:46,090 --> 00:58:50,260
Pero todavía hay una oportunidad
de mejorar aquí en un par de maneras.

1259
00:58:50,260 --> 00:58:53,690
Este código está, otra
vez, mezclado con mi HTML.

1260
00:58:53,690 --> 00:58:55,510
Esto es fácil de arreglar.

1261
00:58:55,510 --> 00:58:59,530
A continuación, copiaré todo
este código o resaltaré todo este código,

1262
00:58:59,530 --> 00:59:02,260
que hace un momento
escribimos, lo cortaré y

1263
00:59:02,260 --> 00:59:04,510
me desharé del conjunto
de etiquetas del script.

1264
00:59:04,510 --> 00:59:07,630
En cambio, en la cabeza de mi
página web, donde previamente

1265
00:59:07,630 --> 00:59:13,210
pusimos títulos y quizás algunas
etiquetas de estilo o longitud de CSS,

1266
00:59:13,210 --> 00:59:16,540
Proseguiré a decir: <script src=
de la fuente que

1267
00:59:16,540 --> 00:59:18,991
será: "form1.js" para JavaScript.

1268
00:59:18,991 --> 00:59:20,740
A pesar de esto,
se ve un poco raro,

1269
00:59:20,740 --> 00:59:22,480
esta es la manera correcta de hacerlo.

1270
00:59:22,480 --> 00:59:25,000
Se abre y se cierra una etiqueta cercana.

1271
00:59:25,000 --> 00:59:27,910
No es válido, por
razones tontas, para hacer esto.

1272
00:59:27,910 --> 00:59:31,360
Aunque este tipo de cosas no tienen
sentido, haremos esto de cualquier manera.

1273
00:59:31,360 --> 00:59:33,050
Así es el mundo.

1274
00:59:33,050 --> 00:59:37,510
Iré directo a crear otro archivo, pegaré
el mismo código que acabo de escribir.

1275
00:59:37,510 --> 00:59:40,690
Para continuar, quitaré la sangría
solo para mantener las cosas más limpias.

1276
00:59:40,690 --> 00:59:42,860
En realidad, no tiene la
sangría de la manera correcta.

1277
00:59:42,860 --> 00:59:44,680
Hagamos esto una vez más.

1278
00:59:44,680 --> 00:59:49,930
Guardaré esto
como: form1.js, save.

1279
00:59:49,930 --> 00:59:53,260
Y ahora tengo una mejor versión de esto.

1280
00:59:53,260 --> 00:59:55,020
¿Qué es lo que hará el navegador?

1281
00:59:55,020 --> 00:59:57,760
Al igual que, cuando usamos imágenes
en nuestras páginas web anteriores,

1282
00:59:57,760 --> 01:00:01,390
como el gato, que hace
referencia a: image source = " ",

1283
01:00:01,390 --> 01:00:04,460
así que, tenemos a: <script src=" ", 
que aquí tiene algo entre comillas.

1284
01:00:04,460 --> 01:00:07,359
Ahora, cuando un usuario
visita esta página, form1.html,

1285
01:00:07,359 --> 01:00:09,900
el navegador lo leerá de la parte superior
a la inferior, de izquierda a derecha.

1286
01:00:09,900 --> 01:00:11,660
No verá a cualquier
JavaScript real.

1287
01:00:11,660 --> 01:00:13,368
Así que, nada lo
ejecutará de inmediato.

1288
01:00:13,368 --> 01:00:15,580
Pero, veremos este otro archivo.

1289
01:00:15,580 --> 01:00:17,380
Será recursivo, 
si quieren

1290
01:00:17,380 --> 01:00:24,237
descargar ese archivo para que la página
web tenga acceso a todo el código allí.

1291
01:00:24,237 --> 01:00:25,570
Ese sería un refinamiento.

1292
01:00:25,570 --> 01:00:28,331
Ahora volviendo a lo que,
yo diría, es un mejor diseño.

1293
01:00:28,331 --> 01:00:29,830
Pero, hay otra manera de hacerlo.

1294
01:00:29,830 --> 01:00:32,390
Abriré una versión
prefabricada de esto.

1295
01:00:32,390 --> 01:00:36,100
Algunas cosas en JavaScript
pueden ser bastante tediosas.

1296
01:00:36,100 --> 01:00:38,275
Porque desde el principio
el lenguaje, era bastante inmaduro.

1297
01:00:38,275 --> 01:00:40,900
La gente trató de conseguir
hacer cosas que simplemente no eran

1298
01:00:40,900 --> 01:00:42,790
muy fáciles de hacer en el lenguaje.

1299
01:00:42,790 --> 01:00:47,740
Así surgieron las bibliotecas populares,
como también fue el caso en Python.

1300
01:00:47,740 --> 01:00:51,520
Aquí tenemos un
ejemplo llamado form2.html

1301
01:00:51,520 --> 01:00:54,520
que en realidad usa una
biblioteca que, por algún tiempo,

1302
01:00:54,520 --> 01:00:57,650
fue una de las más grandes
y populares llamadas jQuery.

1303
01:00:57,650 --> 01:00:59,690
JQuery no es un lenguaje en sí mismo.

1304
01:00:59,690 --> 01:01:02,020
Es solo un código que
un grupo de gente agradable

1305
01:01:02,020 --> 01:01:05,830
escribió para que, en ciertas
cosas, JavaScript fuera más fácil de usar

1306
01:01:05,830 --> 01:01:09,190
El precio que pagamos por esa
facilidad de uso es que algunas cosas

1307
01:01:09,190 --> 01:01:11,230
tienen una sintaxis
de aspecto extraño.

1308
01:01:11,230 --> 01:01:13,720
No nos ocuparemos
mucho en la sintaxis de jQuery.

1309
01:01:13,720 --> 01:01:18,229
Pero jQuery es la biblioteca para
JavaScript que usa Bootstrap.

1310
01:01:18,229 --> 01:01:20,770
Quizás recordemos Bootstrap
de las últimas dos semanas.

1311
01:01:20,770 --> 01:01:24,100
Cada vez que creamos sitios web más
bonitos de lo que soy capaz, cuando

1312
01:01:24,100 --> 01:01:26,647
tienen buenos formatos y todo tiene
una codificación de color agradable

1313
01:01:26,647 --> 01:01:28,480
y cambian muy bien
de tamaño, eso es porque

1314
01:01:28,480 --> 01:01:30,940
usamos la biblioteca de
Bootstrap de CSS, que también

1315
01:01:30,940 --> 01:01:33,700
vienen con algunas funciones
interactivas de JavaScript que

1316
01:01:33,700 --> 01:01:37,950
requiere que también jQuery
esté vinculado a su página web.

1317
01:01:37,950 --> 01:01:41,170
Es por eso que lo usaremos,
así como para ver lo siguiente.

1318
01:01:41,170 --> 01:01:46,000
Aquí hay otra implementación
del mismo programa entre las

1319
01:01:46,000 --> 01:01:48,910
etiquetas del script, por
ahora, dentro de mi cabeza.

1320
01:01:48,910 --> 01:01:51,700
Pero hice un par
de cosas diferentes.

1321
01:01:51,700 --> 01:01:55,060
Esta línea de código es quizás
la que más raro luce a primera vista,

1322
01:01:55,060 --> 01:01:56,746
en parte, debido a este signo de dólar.

1323
01:01:56,746 --> 01:02:00,400
Hace un momento, vimos un
signo de dólar dentro de esas cadenas

1324
01:02:00,400 --> 01:02:01,600
con las comillas invertidas.

1325
01:02:01,600 --> 01:02:03,160
Esto significa algo diferente.

1326
01:02:03,160 --> 01:02:07,090
Tan pronto como importe este archivo,
que es la última versión de jQuery,

1327
01:02:07,090 --> 01:02:10,030
que se alojó en otra
parte, no en mi propio IDE,

1328
01:02:10,030 --> 01:02:14,020
nos da acceso a una
variable global llamada jQuery,

1329
01:02:14,020 --> 01:02:15,400
deletreada como tal.

1330
01:02:15,400 --> 01:02:18,310
Hace tiempo, sin embargo,
las personas que escribieron jQuery

1331
01:02:18,310 --> 01:02:21,460
decidieron que era un poco tedioso
si cada vez que los usuarios en el mundo

1332
01:02:21,460 --> 01:02:25,600
que quieran usar nuestra biblioteca,
escriban esta palabra larga jQuery.

1333
01:02:25,600 --> 01:02:29,800
Así que, crearon un alias
para ello llamado signo de dólar.

1334
01:02:29,800 --> 01:02:33,490
Y extrañamente, los signos de dólar en
JavaScript y otros signos de puntuación

1335
01:02:33,490 --> 01:02:36,520
legitiman las funciones para
usarlas en los nombres de las variables.

1336
01:02:36,520 --> 01:02:39,100
Esto no es cierto en C,
tampoco es cierto en Python.

1337
01:02:39,100 --> 01:02:42,370
Pero es cierto, en JavaScript
aunque que esto nos parece raro a todos,

1338
01:02:42,370 --> 01:02:45,286
al menos, en relación con las letras
del alfabeto, es un símbolo válido.

1339
01:02:45,286 --> 01:02:47,170
Pudo ser fu, bar, x o y.

1340
01:02:47,170 --> 01:02:50,210
jQuery llegó primero,
y lo reclamó para el mundo,

1341
01:02:50,210 --> 01:02:53,480
usaremos el signo de dólar
para todas nuestras funciones.

1342
01:02:53,480 --> 01:02:54,720
Eso es todo lo que significa.

1343
01:02:54,720 --> 01:02:56,510
¿Qué hacen éstas
funciones por nosotros?

1344
01:02:56,510 --> 01:02:57,470
Esto es un trabalenguas.

1345
01:02:57,470 --> 01:02:59,750
Veremos si es posible
analizar lo que pasa.

1346
01:02:59,750 --> 01:03:05,200
El documento está en nuestras propias
palabras ¿en las palabras de alguien más?

1347
01:03:05,200 --> 01:03:05,700
Sí.

1348
01:03:05,700 --> 01:03:06,840
PÚBLICO: la página web.

1349
01:03:06,840 --> 01:03:08,048
DAVID: La página web.

1350
01:03:08,048 --> 01:03:12,000
Es una variable global que se refiere
a la misma página web que vemos.

1351
01:03:12,000 --> 01:03:13,510
Ese es el llamado documento.

1352
01:03:13,510 --> 01:03:16,980
Esta sintaxis, signo de dólar,
abrir y cerrar paréntesis,

1353
01:03:16,980 --> 01:03:21,540
es la manera en la que
jQuery envuelve el documento

1354
01:03:21,540 --> 01:03:23,170
con alguna funcionalidad adicional.

1355
01:03:23,170 --> 01:03:25,560
El navegador nos da
esta variable global (document).

1356
01:03:25,560 --> 01:03:28,604
Y obtiene alguna funcionalidad
construida, como getElementById.

1357
01:03:28,604 --> 01:03:29,770
También hay otras cosas,

1358
01:03:29,770 --> 01:03:31,680
pero no las analizaremos en detalle.

1359
01:03:31,680 --> 01:03:35,310
Estos signos: $( ),
toman la variable global

1360
01:03:35,310 --> 01:03:37,470
y agrega aún
más funcionalidad

1361
01:03:37,470 --> 01:03:40,320
porque lo hace aún más fácil
de usar para nosotros los humanos.

1362
01:03:40,320 --> 01:03:44,280
Una de las piezas que nos da funcionalidad
es esta función llamada ready.

1363
01:03:44,280 --> 01:03:48,840
La función ready, es un poco inusual,
pero similar a lo que acabamos de ver,

1364
01:03:48,840 --> 01:03:51,150
toma un argumento como su entrada,

1365
01:03:51,150 --> 01:03:52,990
y ese argumento es una función.

1366
01:03:52,990 --> 01:03:56,610
La función se debería llamar
cuando el documento está listo.

1367
01:03:56,610 --> 01:03:57,330
Eso es.

1368
01:03:57,330 --> 01:03:59,520
Porque las páginas web
pueden ser bastante grandes, ¿cierto?

1369
01:03:59,520 --> 01:04:04,014
Nosotros vamos a cnn.com,
Google noticias, Facebook o Gmail,

1370
01:04:04,014 --> 01:04:06,930
toma un cierto número de
milisegundos o, a veces, incluso segundos

1371
01:04:06,930 --> 01:04:09,000
para que finalmente
cargue toda la página

1372
01:04:09,000 --> 01:04:10,830
y ver la totalidad de la página web.

1373
01:04:10,830 --> 01:04:14,010
Eso significa que la página web está
lista, una vez que vemos todo en ella.

1374
01:04:14,010 --> 01:04:16,620
La manera de decir, por medio
de un programa, hola navegador,

1375
01:04:16,620 --> 01:04:20,210
ejecuta el siguiente código
cuando el documento esté listo,

1376
01:04:20,210 --> 01:04:21,690
es con una línea de código como esta.

1377
01:04:21,690 --> 01:04:24,930
Está bien si tenemos que
copiar y pegar eso hasta que se hunda,

1378
01:04:24,930 --> 01:04:26,250
pero eso es todo lo que dice.

1379
01:04:26,250 --> 01:04:28,830
Agregue alguna funcionalidad al
documento, como esta habilidad de

1380
01:04:28,830 --> 01:04:30,850
esperar hasta que la página web esté lista.

1381
01:04:30,850 --> 01:04:33,930
Cuando esté listo, llamaremos
a esta función anónima, es decir,

1382
01:04:33,930 --> 01:04:35,580
este fragmento de código.

1383
01:04:35,580 --> 01:04:37,710
¿Qué sucede debajo de eso?

1384
01:04:37,710 --> 01:04:40,710
Hay una
sintaxis alternativa

1385
01:04:40,710 --> 01:04:43,770
en jQuery para que se haga
lo mismo que acabamos de hacer.

1386
01:04:43,770 --> 01:04:47,430
Aunque parece misterioso, este
signo de dólar con los paréntesis

1387
01:04:47,430 --> 01:04:49,680
toma un argumento que,
es diferente de document.

1388
01:04:49,680 --> 01:04:54,180
Si pasamos una cadena
con ese tipo de aspecto como CSS,

1389
01:04:54,180 --> 01:04:56,910
recordemos que antes
usamos selectores de CSS,

1390
01:04:56,910 --> 01:05:00,660
donde tendríamos un nombre con una
etiqueta en nuestro archivo CSS o hashtag

1391
01:05:00,660 --> 01:05:04,080
algo, que es la ID,
la única ID, en un archivo.

1392
01:05:04,080 --> 01:05:06,840
O punto, que vagamente
significó un curso de CSS.

1393
01:05:06,840 --> 01:05:09,780
Regresemos a algunos ejemplos
de CSS, si no lo recordamos del todo.

1394
01:05:09,780 --> 01:05:11,940
En CSS, esos son selectores.

1395
01:05:11,940 --> 01:05:16,830
Este solo significa, toma el
nodo dom, cuya única ID es registro.

1396
01:05:16,830 --> 01:05:19,720
La sintaxis de jQuery para
esa misma expresión es esto.

1397
01:05:19,720 --> 01:05:23,400
Esta línea de código es
esencialmente equivalente

1398
01:05:23,400 --> 01:05:29,040
a
document.getElementById("registration")

1399
01:05:29,040 --> 01:05:33,330
La razón por la que jQuery existe es
que dice en aproximadamente la mitad

1400
01:05:33,330 --> 01:05:37,530
de los caracteres, que si tomo el
doble de caracteres para escribir algo.

1401
01:05:37,530 --> 01:05:38,250
Eso es todo.

1402
01:05:38,250 --> 01:05:39,340
No es una idea nueva.

1403
01:05:39,340 --> 01:05:41,820
Solo es más sucinto,
es más misterioso.

1404
01:05:41,820 --> 01:05:45,970
Además en JavaScript
puro, se escribe .onsubmit,

1405
01:05:45,970 --> 01:05:47,137
en jQuery, es .submit.

1406
01:05:47,137 --> 01:05:49,470
Solo porque no necesitemos
dos caracteres extra

1407
01:05:49,470 --> 01:05:50,250
Realmente no los necesitamos.

1408
01:05:50,250 --> 01:05:51,910
Eso es todo lo que vemos aquí.

1409
01:05:51,910 --> 01:05:53,754
Lo que sucede ahora,
es que la sintaxis,

1410
01:05:53,754 --> 01:05:55,170
ciertamente, está un poco más rara.

1411
01:05:55,170 --> 01:05:56,880
No gastaremos mucho tiempo aquí.

1412
01:05:56,880 --> 01:06:01,170
Si no tuvimos la previsión,
o por cualquier razón no

1413
01:06:01,170 --> 01:06:05,250
querer dar identificadores únicos a todos
nuestros campos de formato, está bien.

1414
01:06:05,250 --> 01:06:08,820
Porque podemos usar
selectores estilo CSS, más elegantes

1415
01:06:08,820 --> 01:06:11,130
que los que introdujimos
en el curso, que dicen hey,

1416
01:06:11,130 --> 01:06:15,480
busca en la página web el elemento
cuyo ID es único en el registro.

1417
01:06:15,480 --> 01:06:18,210
Mira dentro de él,
es el hijo o descendiente,

1418
01:06:18,210 --> 01:06:20,220
de un elemento de formato de entrada.

1419
01:06:20,220 --> 01:06:28,086
Solo toma el valor de esa
entrada si su nombre es email.

1420
01:06:28,086 --> 01:06:29,460
de nuevo, no nos detendremos en esto.

1421
01:06:29,460 --> 01:06:31,543
Porque esa es la manera
más fácil de hacer eso.

1422
01:06:31,543 --> 01:06:34,770
Pero con jQuery, obtenemos
la expresividad que vemos aquí.

1423
01:06:34,770 --> 01:06:36,630
Y todo el resto del
código en la pantalla

1424
01:06:36,630 --> 01:06:39,250
hace exactamente
lo mismo con otra sintaxis.

1425
01:06:39,250 --> 01:06:42,210
Usen esto como un soporte
cuando se experimenta con, digamos,

1426
01:06:42,210 --> 01:06:44,260
para el próximo proyecto o
proyecto final, jQuery,

1427
01:06:44,260 --> 01:06:48,820
si quieren veremos análogos
desde no jQuery hasta sí jQuery,

1428
01:06:48,820 --> 01:06:50,670
pero no son diferentes
de manera fundamental.

1429
01:06:50,670 --> 01:06:52,690
Es solo una sintaxis diferente.

1430
01:06:52,690 --> 01:06:57,270
Pero será una función más poderosa
que ahora obtenemos de jQuery.

1431
01:06:57,270 --> 01:06:59,730
Cuando visitamos
los sitios web

1432
01:06:59,730 --> 01:07:02,340
como maps.google.com, como este.

1433
01:07:02,340 --> 01:07:03,804
Esto no es todo el mundo.

1434
01:07:03,804 --> 01:07:05,970
Por el momento, descubrí
que estoy en Cambridge.

1435
01:07:05,970 --> 01:07:08,261
Me muestra solo un pequeño
fragmento de Cambridge.

1436
01:07:08,261 --> 01:07:11,850
También Google,
aunque solo miro a Cambridge,

1437
01:07:11,850 --> 01:07:15,510
tampoco se descargaron proactivamente
imágenes del resto del mundo

1438
01:07:15,510 --> 01:07:17,100
y almacenarlos en
la memoria de mi navegador.

1439
01:07:17,100 --> 01:07:18,180
Eso es bastante estúpido.

1440
01:07:18,180 --> 01:07:20,640
Porque rara vez necesito ir
muy lejos de donde estoy.

1441
01:07:20,640 --> 01:07:23,460
Y aun así, si quiero
ir a algo como New Haven,

1442
01:07:23,460 --> 01:07:26,280
No necesito que todas las
ciudades y pueblos que están entre

1443
01:07:26,280 --> 01:07:27,750
New Haven y yo, estén en mi navegador.

1444
01:07:27,750 --> 01:07:29,490
Podemos solo saltar directamente ahí.

1445
01:07:29,490 --> 01:07:32,680
Podemos ver este artefacto
de la siguiente manera.

1446
01:07:32,680 --> 01:07:36,340
Si hago clic y arrastro rápidamente,
¿qué vemos que sucede?

1447
01:07:36,340 --> 01:07:39,150
Debería ir a algún
lado donde hay tierra.

1448
01:07:39,150 --> 01:07:43,125
¿Qué vemos que sucede a
la izquierda, ya que lo hago rápido?

1449
01:07:43,125 --> 01:07:44,520
PÚBLICO: Hay un retraso.

1450
01:07:44,520 --> 01:07:46,103
DAVID: Sí, hay un retraso.

1451
01:07:46,103 --> 01:07:48,480
Vemos estas baldosas grises,
como marcadores de posición,

1452
01:07:48,480 --> 01:07:50,710
hasta que, finalmente, se llenan.

1453
01:07:50,710 --> 01:07:51,850
¿Por qué sucede eso?

1454
01:07:51,850 --> 01:07:55,237
Saben qué, iré al menú del
desarrollador de mi navegador,

1455
01:07:55,237 --> 01:07:58,320
herramientas de desarrollador, que
deben ser un hábito que se incrementa

1456
01:07:58,320 --> 01:08:01,440
cuando queremos entender
algo o resolver algún problema

1457
01:08:01,440 --> 01:08:03,190
o simplemente aprender por curiosidad.

1458
01:08:03,190 --> 01:08:04,440
Aclararé esto temporalmente.

1459
01:08:04,440 --> 01:08:06,620
Pero, cada vez que hago clic, guau.

1460
01:08:06,620 --> 01:08:10,790
Solo se induce al hacer clic
y arrastrar, a partir de ahora, 89,

1461
01:08:10,790 --> 01:08:13,210
ups, ahí está mi protector de pantalla,

1462
01:08:13,210 --> 01:08:16,220
92 más solicitudes HTTP.

1463
01:08:16,220 --> 01:08:21,340
¿Qué creen que se les solicita
cada vez que hago clic y arrastro?

1464
01:08:21,340 --> 01:08:24,040
Más imágenes, más mosaicos,
como se les llama en Google Maps.

1465
01:08:24,040 --> 01:08:28,930
¿Qué característica
de los navegadores

1466
01:08:28,930 --> 01:08:32,029
al pedirlos, les permite obtener
más y más datos como este?

1467
01:08:32,029 --> 01:08:34,810
Esta es una tecnología o
técnica llamada AJAX.

1468
01:08:34,810 --> 01:08:37,660
AJAX es una manera elegante de
decir que una función en los navegadores

1469
01:08:37,660 --> 01:08:43,100
les permite ejecutar solicitudes HTTP
después de que el primero haya terminado.

1470
01:08:43,100 --> 01:08:47,080
Quiere decir que cuando visitamos por
primera vez Facebook, Gmail o Google Maps,

1471
01:08:47,080 --> 01:08:50,950
y recibimos una respuesta del servidor
que contiene el mapa de Cambridge,

1472
01:08:50,950 --> 01:08:54,100
el navegador, gracias a AJAX,
que es una tecnología más moderna

1473
01:08:54,100 --> 01:08:56,979
de los últimos años, tiene la capacidad
para enviar más de estos sobres

1474
01:08:56,979 --> 01:09:00,189
en internet diciendo: necesito
los mosaicos para la esquina noreste,

1475
01:09:00,189 --> 01:09:02,063
o necesito los mosaicos
para la esquina suroeste,

1476
01:09:02,063 --> 01:09:02,979
envíamelas de vuelta.

1477
01:09:02,979 --> 01:09:06,970
Constantemente, ahora estamos
por encima de 651 sobres adicionales

1478
01:09:06,970 --> 01:09:10,240
que regresan de Google con el fin de
completar todos los espacios en blanco

1479
01:09:10,240 --> 01:09:13,155
que al hacer clic rápidamente y
arrastrarlo a diferentes ubicaciones.

1480
01:09:13,155 --> 01:09:15,279
No tiene que ser
de naturaleza gráfica.

1481
01:09:15,279 --> 01:09:16,693
Hace un momento, vimos
las cotizaciones de la bolsa.

1482
01:09:16,693 --> 01:09:18,609
Y lo que, tal vez, es incluso
un paradigma más sencillo,

1483
01:09:18,609 --> 01:09:22,189
si solo quiero obtener algo de
información ligeramente adicional.

1484
01:09:22,189 --> 01:09:25,600
A continuación,
abriré ajax.html,

1485
01:09:25,600 --> 01:09:27,279
lo veremos en este formato de aquí.

1486
01:09:27,279 --> 01:09:31,390
Proseguiré como debería ser,
de nuevo, un hábito en aumento,

1487
01:09:31,390 --> 01:09:32,544
ve a mi pestaña Network.

1488
01:09:32,544 --> 01:09:34,960
Noten que, solo por si acaso,
también al entrar en el hábito

1489
01:09:34,960 --> 01:09:36,399
de hacer clic en conservar registro.

1490
01:09:36,399 --> 01:09:39,278
Solo en caso de que la página web
redirija o vaya a cualquier otro lado,

1491
01:09:39,278 --> 01:09:41,319
no borra todo
lo que miramos.

1492
01:09:41,319 --> 01:09:42,910
Todavía vemos todo.

1493
01:09:42,910 --> 01:09:47,840
Para continuar, escribiré NFLX para
Netflix y obtendré una cotización.

1494
01:09:47,840 --> 01:09:51,370
Notemos lo que vimos antes,
la respuesta que devuelve el servidor.

1495
01:09:51,370 --> 01:09:56,500
A partir de este momento, es
$198.41, pero ¿cómo lo sabemos?

1496
01:09:56,500 --> 01:09:59,590
Descartaré la alerta
y me enfocaré aquí abajo.

1497
01:09:59,590 --> 01:10:04,506
Después de cargar esta página, en
apariencia, envió una solicitud HTTP más,

1498
01:10:04,506 --> 01:10:05,380
que fue exitosa.

1499
01:10:05,380 --> 01:10:06,860
¿Por qué?

1500
01:10:06,860 --> 01:10:08,900
¿Cómo lo sé?

1501
01:10:08,900 --> 01:10:10,150
Sí, 200 OK.

1502
01:10:10,150 --> 01:10:12,130
Chrome me está mostrando eso también.

1503
01:10:12,130 --> 01:10:15,064
Podemos hacer esto
en Edge, Firefox y Safari.

1504
01:10:15,064 --> 01:10:18,230
Pero actualmente, Chrome es una
especie de navegador para el desarrollo.

1505
01:10:18,230 --> 01:10:20,354
Así que, nos animaremos
a seguir usándolo para esto.

1506
01:10:20,354 --> 01:10:24,226
Si hago clic en esto, puedo ver qué la
solicitud y la respuesta fueron recibidas.

1507
01:10:24,226 --> 01:10:25,350
Aquí están todos esos encabezados.

1508
01:10:25,350 --> 01:10:28,170
Hay algunas cookies involucradas,
que son el resultado del IDE

1509
01:10:28,170 --> 01:10:29,470
y no mi propio código.

1510
01:10:29,470 --> 01:10:31,060
Pero es la respuesta que me importa,

1511
01:10:31,060 --> 01:10:32,920
continuaré al ver la fuente.

1512
01:10:32,920 --> 01:10:35,890
Notemos que algunas
cosas familiares regresaron,

1513
01:10:35,890 --> 01:10:37,180
y algunas no lo son.

1514
01:10:37,180 --> 01:10:41,080
Entre los encabezados, de hecho está,
200 OK, entonces eso es algo bueno.

1515
01:10:41,080 --> 01:10:44,020
Sin embargo, notemos
qué tipo de contenido regresó.

1516
01:10:44,020 --> 01:10:46,090
En el pasado fue text/html.

1517
01:10:46,090 --> 01:10:48,280
Pero, ¿qué regresó esta vez?

1518
01:10:48,280 --> 01:10:49,900
Sí, application/json.

1519
01:10:49,900 --> 01:10:51,160
Una aplicación, es un poco raro.

1520
01:10:51,160 --> 01:10:52,159
No es una aplicación,

1521
01:10:52,159 --> 01:10:53,110
no es un programa.

1522
01:10:53,110 --> 01:10:55,930
Pero es un formato utilizado por
programas, podemos pensar en eso.

1523
01:10:55,930 --> 01:10:57,700
JSON es la notación de objetos de JavaScript.

1524
01:10:57,700 --> 01:11:00,790
Probablemente, lo que regresó es
algo con algunas llaves, dos puntos

1525
01:11:00,790 --> 01:11:01,900
y comillas.

1526
01:11:01,900 --> 01:11:04,480
Veremos en un momento, 47
bytes que, de hecho, valen la pena,

1527
01:11:04,480 --> 01:11:07,070
y también regresaron
otras cosas desde el servidor.

1528
01:11:07,070 --> 01:11:09,490
Haré clic en la respuesta.

1529
01:11:09,490 --> 01:11:12,730
Y qué sabemos, de
la respuesta del servidor,

1530
01:11:12,730 --> 01:11:14,050
no es otra página web.

1531
01:11:14,050 --> 01:11:17,090
No es una etiqueta HTML, de cuerpo,
de cabeza, o cualquier otra cosa.

1532
01:11:17,090 --> 01:11:20,590
Es solo este texto, pero
en un formato oficial.

1533
01:11:20,590 --> 01:11:25,760
Apertura y cierre de llaves, que
provienen de un objeto de JavaScript.

1534
01:11:25,760 --> 01:11:26,750
¿Qué es un objeto?

1535
01:11:26,750 --> 01:11:29,530
Es una tabla hash o una
diccionario con claves y valores.

1536
01:11:29,530 --> 01:11:30,460
¿Qué son?

1537
01:11:30,460 --> 01:11:31,870
Una key es un nombre.

1538
01:11:31,870 --> 01:11:32,980
Value es Netflix.

1539
01:11:32,980 --> 01:11:34,840
Price es una clave.

1540
01:11:34,840 --> 01:11:37,090
198.41 es un valor.

1541
01:11:37,090 --> 01:11:38,410
Symbol es una clave.

1542
01:11:38,410 --> 01:11:41,020
Netflix es un valor.

1543
01:11:41,020 --> 01:11:43,840
Es solo una manera de
recuperar una o más piezas

1544
01:11:43,840 --> 01:11:45,067
de información útil.

1545
01:11:45,067 --> 01:11:47,650
Entonces, ¿cómo hago esto y cómo
obtengo la información de vuelta?

1546
01:11:47,650 --> 01:11:49,730
Para eso, tenemos
que mirar el código en sí.

1547
01:11:49,730 --> 01:11:55,600
Entonces, en ajax0.html,
tenemos este código.

1548
01:11:55,600 --> 01:12:00,280
En HTML form, es igual que
nuestro primer ejemplo de hoy,

1549
01:12:00,280 --> 01:12:03,160
simplemente codificado por
dentro de un atributo onsubmit,

1550
01:12:03,160 --> 01:12:05,590
una función llamada quote,
y después devuelve falso.

1551
01:12:05,590 --> 01:12:08,950
Es decir, no volvamos a cargar la página,
no enviemos el formato de manera real,

1552
01:12:08,950 --> 01:12:10,870
solo llamemos a la función quote.

1553
01:12:10,870 --> 01:12:12,370
¿Dónde se definió la función quote?

1554
01:12:12,370 --> 01:12:15,694
Por el momento, de manera perezosa,
está definida en el mismo archivo.

1555
01:12:15,694 --> 01:12:16,360
Pero está bien,

1556
01:12:16,360 --> 01:12:17,800
porque esta es nuestra primera vez.

1557
01:12:17,800 --> 01:12:19,750
Notemos que tengo
dos cosas para JavaScript.

1558
01:12:19,750 --> 01:12:23,800
Una, es jQuery, la biblioteca que
mencioné antes, tiene que venir primero.

1559
01:12:23,800 --> 01:12:26,770
Porque al igual que en C,
necesitamos saber que las funciones

1560
01:12:26,770 --> 01:12:29,200
se cargaron antes de
que se usaran más tarde.

1561
01:12:29,200 --> 01:12:31,870
Este mi propio script,
mi propio JavaScript.

1562
01:12:31,870 --> 01:12:33,200
Aquí está mi función quote.

1563
01:12:33,200 --> 01:12:34,450
No toma ningún argumento.

1564
01:12:34,450 --> 01:12:37,870
Porque los conseguiremos
en el código del navegador.

1565
01:12:37,870 --> 01:12:39,940
Y la sintaxis aquí es un poco rara.

1566
01:12:39,940 --> 01:12:41,860
Pero lo destilaremos en un momento.

1567
01:12:41,860 --> 01:12:44,392
¿De qué es sinónimo el signo de dólar?

1568
01:12:44,392 --> 01:12:45,100
PÚBLICO: De jQuery.

1569
01:12:45,100 --> 01:12:46,058
DAVID: De jQuery.

1570
01:12:46,058 --> 01:12:50,650
Esto es solo una manera
bastante más confusa de decirlo.

1571
01:12:50,650 --> 01:12:52,780
jQuery.getJSON.

1572
01:12:52,780 --> 01:12:56,380
getJSON es una función, o un método,
por así decirlo, cuyo propósito en la vida

1573
01:12:56,380 --> 01:12:58,180
es hacer eso, buscar algunos datos JSON.

1574
01:12:58,180 --> 01:12:59,623
¿De dónde debería obtenerlos?

1575
01:12:59,623 --> 01:13:04,540
/quote, como veremos en un momento,
es una ruta muy corta que implementé

1576
01:13:04,540 --> 01:13:05,639
en Python en la parte final.

1577
01:13:05,639 --> 01:13:07,930
Sin embargo, podría haber sido
implementado en cualquier lenguaje.

1578
01:13:07,930 --> 01:13:10,971
Esto parece un poco misterioso, así que
volveremos con esto en un momento.

1579
01:13:10,971 --> 01:13:14,510
Así que borraré esto
temporalmente y diré lo siguiente.

1580
01:13:14,510 --> 01:13:17,650
La función getJSON
que viene con jQuery

1581
01:13:17,650 --> 01:13:20,810
en este caso toma
al menos dos argumentos.

1582
01:13:20,810 --> 01:13:24,140
El primero es la URL
(" / quote"... para obtener JSON de ella.

1583
01:13:24,140 --> 01:13:27,960
Y la segunda es,
¿qué podemos deducir?

1584
01:13:27,960 --> 01:13:32,280


1585
01:13:32,280 --> 01:13:33,720
PÚBLICO: Una función anónima.

1586
01:13:33,720 --> 01:13:34,200
DAVID: ¿Una qué?

1587
01:13:34,200 --> 01:13:35,640
PÚBLICO: Una función anónima.

1588
01:13:35,640 --> 01:13:36,870
DAVID: Una función anónima.

1589
01:13:36,870 --> 01:13:39,810
Esa función anónima,
a diferencia de las que vimos antes,

1590
01:13:39,810 --> 01:13:41,190
esta vez toma la entrada,

1591
01:13:41,190 --> 01:13:42,273
de modo que no
tiene un nombre

1592
01:13:42,273 --> 01:13:43,360
pero ese no
es un problema,

1593
01:13:43,360 --> 01:13:45,840
porque toma un
argumento: (data).

1594
01:13:45,840 --> 01:13:48,570
Este es un ejemplo de cómo
usamos una función anónima

1595
01:13:48,570 --> 01:13:50,850
o como propiamente
la llamamos, una devolución de llamada.

1596
01:13:50,850 --> 01:13:52,770
Porque el Internet puede ser lento.

1597
01:13:52,770 --> 01:13:55,950
Y si estoy tratando de obtener
una cotización de acciones de /quote,

1598
01:13:55,950 --> 01:13:57,462
tal vez regrese muy rápido.

1599
01:13:57,462 --> 01:13:58,920
Pero tal vez el servidor
está sobrecargado,

1600
01:13:58,920 --> 01:14:00,461
mi conexión
a Internet es lenta

1601
01:14:00,461 --> 01:14:01,480
o quizás estoy
en mi teléfono

1602
01:14:01,480 --> 01:14:05,120
y podría tomar un segundo o
dos que obtenga esa respuesta.

1603
01:14:05,120 --> 01:14:10,530
Imaginemos si las cosas esperaran en el
mundo de la web a que los datos regresaran,

1604
01:14:10,530 --> 01:14:14,640
la experiencia, la experiencia del
usuario o UX sería bastante mala, ¿cierto?

1605
01:14:14,640 --> 01:14:18,780
Todo el navegador se caería, congelaría o
veríamos la tonta pelota de playa giratoria

1606
01:14:18,780 --> 01:14:20,670
mientras esperamos
a que algo suceda.

1607
01:14:20,670 --> 01:14:23,100
Imaginemos que en Facebook,
cada vez que nuestro amigo

1608
01:14:23,100 --> 01:14:24,830
escribe algo vemos el ta-ta-ta,

1609
01:14:24,830 --> 01:14:28,440
pero no podríamos hacer nada en el
sitio web hasta que él presione Enter

1610
01:14:28,440 --> 01:14:29,850
y finalmente obtengamos el mensaje.

1611
01:14:29,850 --> 01:14:33,450
Eso nos impediría
hacer algo en verdad útil, bueno

1612
01:14:33,450 --> 01:14:36,700
"cosas en verdad útiles" de
usar Facebook de otras maneras.

1613
01:14:36,700 --> 01:14:41,550
En cambio, ¿cómo
podemos decirle al navegador,

1614
01:14:41,550 --> 01:14:45,420
consígueme algo más, más
mosaicos del mapa, más mensajes

1615
01:14:45,420 --> 01:14:48,510
de mi amigo, más cotizaciones
de la bolsa de un servidor,

1616
01:14:48,510 --> 01:14:52,410
pero llámame cuando tengas los datos
para que pueda seguir trabajando?

1617
01:14:52,410 --> 01:14:54,450
De modo que, podría
estar aquí en mi escritorio.

1618
01:14:54,450 --> 01:14:56,730
Y Brian, si no te
importa puedes venir.

1619
01:14:56,730 --> 01:14:59,070
Y Brian puede estar aquí
en su pequeña oficina en casa.

1620
01:14:59,070 --> 01:15:04,830
Tengo mucha curiosidad sobre cuál
es el precio de las acciones de Netflix.

1621
01:15:04,830 --> 01:15:06,870
Para continuar,
traeré a Brian aquí.

1622
01:15:06,870 --> 01:15:15,500


1623
01:15:15,500 --> 01:15:16,980
BRIAN: Hola.

1624
01:15:16,980 --> 01:15:18,120
DAVID: ¿Hola, Brian?

1625
01:15:18,120 --> 01:15:18,900
BRIAN: Hola.

1626
01:15:18,900 --> 01:15:20,280
DAVID: Hola, soy David.

1627
01:15:20,280 --> 01:15:21,450
BRIAN: Hola, ¿cómo estás?

1628
01:15:21,450 --> 01:15:23,408
DAVID: Hola, estoy
muy bien, gracias.

1629
01:15:23,408 --> 01:15:26,010
Necesito el precio de las acciones
de Netflix actualizado, por favor.

1630
01:15:26,010 --> 01:15:29,209
BRIAN: El precio de las acciones
de Netflix actualizado, trabajaré en eso.

1631
01:15:29,209 --> 01:15:30,500
Pero tendré que
llamarte de nuevo.

1632
01:15:30,500 --> 01:15:31,500
Me tomará algo tiempo.

1633
01:15:31,500 --> 01:15:32,749
DAVID: OK, gracias.

1634
01:15:32,749 --> 01:15:33,560
BRIAN: No hay problema.

1635
01:15:33,560 --> 01:15:41,380


1636
01:15:41,380 --> 01:15:42,460
finance.cs50.net.

1637
01:15:42,460 --> 01:15:55,870


1638
01:15:55,870 --> 01:15:57,310
DAVID: ¿Oh, hola?

1639
01:15:57,310 --> 01:15:58,430
BRIAN: ¿Hola?

1640
01:15:58,430 --> 01:15:58,940
Hola.

1641
01:15:58,940 --> 01:16:02,500
La participación actual
en Netflix cuesta $198

1642
01:16:02,500 --> 01:16:05,410
DAVID: Espera un momento,
está entrando una llamada de Colton.

1643
01:16:05,410 --> 01:16:08,050
BRIAN: OK, y $0.35.

1644
01:16:08,050 --> 01:16:11,410
DAVID: Espera, tendré que llamar
de vuelta a Colton, un segundo.

1645
01:16:11,410 --> 01:16:14,310
Espera, ¿hola?

1646
01:16:14,310 --> 01:16:14,810
BRIAN: Hola.

1647
01:16:14,810 --> 01:16:17,450
DAVID: Oh, hola Brian.

1648
01:16:17,450 --> 01:16:20,772
BRIAN: Una participación
en Netflix cuesta $198.35

1649
01:16:20,772 --> 01:16:22,730
DAVID: OK, muchas gracias, Brian.

1650
01:16:22,730 --> 01:16:23,220
BRIAN: No hay problema.

1651
01:16:23,220 --> 01:16:24,296
DAVID: Adiós.

1652
01:16:24,296 --> 01:16:26,170
OK, acabo de colgarle
a Colton en Internet.

1653
01:16:26,170 --> 01:16:27,530
Muchas gracias.

1654
01:16:27,530 --> 01:16:30,620
OK, ¿cuál fue el punto en esa
sorpresa inesperada y qué tan extraño

1655
01:16:30,620 --> 01:16:32,390
fue que él me llamara
justo en ese momento?

1656
01:16:32,390 --> 01:16:35,750
El punto es que las devoluciones
en las llamadas son algo

1657
01:16:35,750 --> 01:16:38,750
que ya conocemos con,
cierto, en el mundo real donde

1658
01:16:38,750 --> 01:16:40,280
queremos que alguien nos
devuelva algo de información.


1659
01:16:40,280 --> 01:16:43,155
Tal vez no sea tan arreglado como
oye, necesito una cotización rápidamente,

1660
01:16:43,155 --> 01:16:43,950
envíamela.

1661
01:16:43,950 --> 01:16:46,700
Pero esperamos que nos devuelvan
la llamada con algo de información.

1662
01:16:46,700 --> 01:16:48,320
¿Cómo implementamos esto en el código?

1663
01:16:48,320 --> 01:16:50,030
Es exactamente la misma idea.

1664
01:16:50,030 --> 01:16:52,700
Así que tenemos esta función
especial llamada getJSON,

1665
01:16:52,700 --> 01:16:56,710
está dentro de esta biblioteca llamada
jQuery, cuyo apodo es el signo de dólar.

1666
01:16:56,710 --> 01:16:59,900
Entonces digo, búscame algunos
datos de "/quote" o el equivalente,

1667
01:16:59,900 --> 01:17:01,340
a Brian en el mundo real,

1668
01:17:01,340 --> 01:17:05,720
luego, le digo a getJSON, cuando
tengas lista esta información,

1669
01:17:05,720 --> 01:17:07,380
devuélveme la llamada, por así decirlo.

1670
01:17:07,380 --> 01:17:08,510
¿Cómo me devuelve la llamada?

1671
01:17:08,510 --> 01:17:11,301
Bueno, saben algo, escribiré
con anticipación un código al que

1672
01:17:11,301 --> 01:17:16,340
quiero que llamemos, pero desde la
computadora, cuando los datos estén listos.

1673
01:17:16,340 --> 01:17:21,440
y como Brian me pasó
verbalmente la cotización de acciones

1674
01:17:21,440 --> 01:17:24,650
de vuelta por el teléfono, entonces
esta función anónima puede

1675
01:17:24,650 --> 01:17:28,520
recibirla como un argumento, un
parámetro de datos o un argumento

1676
01:17:28,520 --> 01:17:30,330
al que yo, entonces,
puedo tener acceso.

1677
01:17:30,330 --> 01:17:33,260
De modo que puedo usar la notación
de puntos como en C, con structures

1678
01:17:33,260 --> 01:17:36,800
y obtener el name, el price
o el symbol, que fueron los tres

1679
01:17:36,800 --> 01:17:39,110
valores que vimos
en ese objeto en JSON.

1680
01:17:39,110 --> 01:17:43,070
Pero mientras tanto, esta línea
de código se ejecuta al instante

1681
01:17:43,070 --> 01:17:46,410
y registra, si lo deseamos, una función
de devolución de llamada con getJSON.

1682
01:17:46,410 --> 01:17:48,620
Así sabe a quién
devolverle la llamada.

1683
01:17:48,620 --> 01:17:51,950
Esto significa que si mi
página web fuera mucho más

1684
01:17:51,950 --> 01:17:54,680
interesante que esto y es
Facebook o G-mail con muchas

1685
01:17:54,680 --> 01:17:56,780
muchas otras
funciones, puedo seguir

1686
01:17:56,780 --> 01:18:01,580
con mi trabajo usando estas funciones,
si luego me interrumpen cuando

1687
01:18:01,580 --> 01:18:04,310
el teléfono suene, llegue
un mensaje de mi amigo,

1688
01:18:04,310 --> 01:18:09,260
reciba un nuevo correo electrónico o
me devuelvan una cotización de acciones.

1689
01:18:09,260 --> 01:18:12,740
Todo eso sucede súper rápido con
una conexión rápida a internet, pero no

1690
01:18:12,740 --> 01:18:14,750
necesariamente es el
caso con una más lenta,

1691
01:18:14,750 --> 01:18:18,414
como vimos con Google Maps, cuando
tratábamos de obtener más y más títulos.

1692
01:18:18,414 --> 01:18:19,580
Pero, ¿cómo puedo limpiar esto?

1693
01:18:19,580 --> 01:18:20,870
Esa era la versión 0,

1694
01:18:20,870 --> 01:18:23,360
Para continuar
abriré la versión 1.

1695
01:18:23,360 --> 01:18:27,560
Noten que esta vez hago
las cosas un poco diferente.

1696
01:18:27,560 --> 01:18:33,810
Oh, y déjenme revelarles una última
cosa mediante este ejemplo de aquí.

1697
01:18:33,810 --> 01:18:37,370
¿Qué es lo que hacemos
de manera diferente aquí?

1698
01:18:37,370 --> 01:18:41,900
En este caso, ahora adjunto,
abriré el otro para que podamos ir

1699
01:18:41,900 --> 01:18:43,259
allí y regresar,

1700
01:18:43,259 --> 01:18:45,800
en esta primera versión, recuerdo,
que hice el tipo descuidado de cosa

1701
01:18:45,800 --> 01:18:47,850
en la que combiné mi
HTML y mi JavaScript,

1702
01:18:47,850 --> 01:18:49,970
y este es un mal diseño,

1703
01:18:49,970 --> 01:18:52,770
no debemos hacerlo, aunque
eso sea donde comenzamos la historia.

1704
01:18:52,770 --> 01:18:54,770
¿Cómo puedo hacer esto
con la programación, en código?

1705
01:18:54,770 --> 01:18:58,989
Bueno, si ahora este es mi formato y
noten que no se menciona a onsubmit,

1706
01:18:58,989 --> 01:19:00,530
no se menciona ese atributo.

1707
01:19:00,530 --> 01:19:02,570
Lo hago completamente en código.

1708
01:19:02,570 --> 01:19:03,900
¿Cómo lo hago?

1709
01:19:03,900 --> 01:19:06,320
Bueno, lo que puedo decirles es
que cuando el documento esté listo,

1710
01:19:06,320 --> 01:19:10,460
debemos continuar y registrar este
controlador de envío, por así decirlo.

1711
01:19:10,460 --> 01:19:13,970
Gestor de eventos sería el
término general para todas cosas.

1712
01:19:13,970 --> 01:19:17,840
Cuando se envía ese formato,
éste llama a getJSON de /quote

1713
01:19:17,840 --> 01:19:21,592
luego vuelve a llamar a este número,
digamos, cuando los datos están listos.

1714
01:19:21,592 --> 01:19:23,300
Y antes borré
temporalmente esto,

1715
01:19:23,300 --> 01:19:24,758
Pero analicemos qué es esto,

1716
01:19:24,758 --> 01:19:26,060
se ve un poco críptico.

1717
01:19:26,060 --> 01:19:28,410
Permítanme limpiar eso
de la siguiente manera.

1718
01:19:28,410 --> 01:19:33,290
Para continuar diré
lo siguiente: let http_parameters

1719
01:19:33,290 --> 01:19:39,890
ser este objeto en JavaScript
el cual tiene un symbol y cuyo

1720
01:19:39,890 --> 01:19:42,980
valor es esta cosa de aquí:
$("#symbol").val( )

1721
01:19:42,980 --> 01:19:44,450
y esto también es un poco críptico.

1722
01:19:44,450 --> 01:19:46,890
Pero lo analizaremos en un segundo.

1723
01:19:46,890 --> 01:19:49,880
Ahora reemplazaré
esto con http_parameters

1724
01:19:49,880 --> 01:19:51,290
¿qué es lo que pasa aquí?

1725
01:19:51,290 --> 01:19:54,080
Soy más prolijo, pero
esto no es lo más correcto.

1726
01:19:54,080 --> 01:19:56,960
Aquí hay una variable
llamada http_parameters

1727
01:19:56,960 --> 01:19:58,400
¿Qué tipo de variable es?

1728
01:19:58,400 --> 01:20:01,074
Es un objeto en JavaScript,
tengamos en cuenta la nomenclatura,

1729
01:20:01,074 --> 01:20:02,240
debido a las llaves,

1730
01:20:02,240 --> 01:20:04,010
esa es la clave.

1731
01:20:04,010 --> 01:20:06,770
Recordemos que un objeto tiene
llaves y valores separados por dos puntos.

1732
01:20:06,770 --> 01:20:08,270
De modo que aquí
hay un clave el symbol

1733
01:20:08,270 --> 01:20:09,320
y aquí hay un valor.

1734
01:20:09,320 --> 01:20:11,450
Esta es una forma
muy original de escribirlo,

1735
01:20:11,450 --> 01:20:16,520
pero esta es la manera
de jQuery de decir esto

1736
01:20:16,520 --> 01:20:19,250
document.getElementById("symbol").value.

1737
01:20:19,250 --> 01:20:24,170


1738
01:20:24,170 --> 01:20:28,890
De nuevo, el valor, sin juego de palabras,
de usar jQuery en contextos como este

1739
01:20:28,890 --> 01:20:30,050
es presionar menos teclas.

1740
01:20:30,050 --> 01:20:30,817
Es más críptico,

1741
01:20:30,817 --> 01:20:32,900
Tendremos que recordar
la sintaxis a largo plazo.

1742
01:20:32,900 --> 01:20:34,247
Pero hay menos
cosas para escribir.

1743
01:20:34,247 --> 01:20:35,330
Y eso es todo lo que hace.

1744
01:20:35,330 --> 01:20:38,450
Obtiene el valor de symbol
de lo que haya escrito el usuario,

1745
01:20:38,450 --> 01:20:42,350
como un NFLX para Netflix y luego
se almacena como el valor de esta clave.

1746
01:20:42,350 --> 01:20:47,120
Luego para obtener JSON,
pasa en esos http_parameters

1747
01:20:47,120 --> 01:20:49,150
para crear la URL que esperaba.

1748
01:20:49,150 --> 01:20:52,580
Y, ¿cuál era la URL que esperaba,
la esperaba en el sentido de mí mismo

1749
01:20:52,580 --> 01:20:53,660
como el programador?

1750
01:20:53,660 --> 01:20:56,480
Bueno, si desplazo el cursor 
sobre la URL en el registro de Chrome,

1751
01:20:56,480 --> 01:21:02,090
Visité /quote?symbol=NFLX.

1752
01:21:02,090 --> 01:21:06,410
Parece que lo que getJSON hace
por mí, en realidad, es construir,

1753
01:21:06,410 --> 01:21:08,420
dinámicamente, una GET request.

1754
01:21:08,420 --> 01:21:13,640
Simplemente horneando en la URL
los parámetros que quiero pasar.

1755
01:21:13,640 --> 01:21:17,110
Fundamentalmente, ese
ejemplo lo hace al final.

1756
01:21:17,110 --> 01:21:21,440
¿Tienen alguna pregunta sobre
AJAX o de la sintaxis con la que

1757
01:21:21,440 --> 01:21:23,400
hacemos esto?

1758
01:21:23,400 --> 01:21:23,900
¿Sí?

1759
01:21:23,900 --> 01:21:27,590
PÚBLICO: ¿Por qué la palabra clave
symbol no está entre comillas?

1760
01:21:27,590 --> 01:21:29,630
DAVID: Es una buena pregunta.

1761
01:21:29,630 --> 01:21:31,670
¿Por qué la palabra
symbol no está entre comillas?

1762
01:21:31,670 --> 01:21:32,480
Podría ser.

1763
01:21:32,480 --> 01:21:34,250
Esto también sería
perfectamente correcto,

1764
01:21:34,250 --> 01:21:41,000
no es estrictamente necesario cuando lo
proporcionamos como entrada, digamos,

1765
01:21:41,000 --> 01:21:42,600
en este contexto,

1766
01:21:42,600 --> 01:21:44,280
es necesario en la salida.

1767
01:21:44,280 --> 01:21:47,922
Por razones tontas,
el formato JSON que

1768
01:21:47,922 --> 01:21:50,630
está destinado a devolver como
respuesta, todas deben estar entre comillas.

1769
01:21:50,630 --> 01:21:53,360
Cuando escribimos código
JavaScript con objetos, claves

1770
01:21:53,360 --> 01:21:55,526
y valores, no es estrictamente
necesario poner comillas a las cosas.

1771
01:21:55,526 --> 01:21:58,430
Solo es un mal
diseño en el lenguaje.

1772
01:21:58,430 --> 01:22:00,910
¿Alguna otra pregunta?

1773
01:22:00,910 --> 01:22:03,250
Está bien, los puntos
importantes hasta el momento

1774
01:22:03,250 --> 01:22:06,050
son que JavaScript tiene
funciones y funciones anónimas,

1775
01:22:06,050 --> 01:22:10,216
que es un poco interesante,
bucles, condiciones, variables y más,

1776
01:22:10,216 --> 01:22:12,590
aunque no usamos
algunas de esas funciones,

1777
01:22:12,590 --> 01:22:13,390
como bucles y condiciones.

1778
01:22:13,390 --> 01:22:15,931
Porque tuvimos una lucha
mortal con Python y C,

1779
01:22:15,931 --> 01:22:16,860
ellos están ahí.

1780
01:22:16,860 --> 01:22:18,610
Pero lo más importante,
es que existe esta noción

1781
01:22:18,610 --> 01:22:22,210
de devolución de llamadas, la
capacidad de llamar a una línea de código

1782
01:22:22,210 --> 01:22:24,910
y entonces decir, cuando estemos
listos con nuestro valor de retorno,

1783
01:22:24,910 --> 01:22:27,190
regrésame la llamada,
al llamar a esta función.

1784
01:22:27,190 --> 01:22:31,852
Este es un ejemplo de lo que se
llama, código asíncrono en contraste,

1785
01:22:31,852 --> 01:22:32,560
con sincronía.

1786
01:22:32,560 --> 01:22:36,040
Hasta ahora, casi todo lo que hemos
escrito y todo lo que escribimos en C,

1787
01:22:36,040 --> 01:22:39,190
fue sincrónico, lo que significa que
si se ejecuta una línea de código,

1788
01:22:39,190 --> 01:22:42,000
y esa función tarda un tiempo
en ejecutarse, nuestro código

1789
01:22:42,000 --> 01:22:43,960
se quedará allí
por un tiempo.

1790
01:22:43,960 --> 01:22:45,751
Y Dios no lo quiera,
tiene un bucle infinito,

1791
01:22:45,751 --> 01:22:48,040
que se quedará allí para
siempre y bloqueará todo.

1792
01:22:48,040 --> 01:22:50,710
Empezamos a ver el
código asíncrono en Python,

1793
01:22:50,710 --> 01:22:53,470
a pesar de que no lo llamamos así,
hace una o dos semanas, cuando

1794
01:22:53,470 --> 01:22:55,000
comenzamos a usar Flask.

1795
01:22:55,000 --> 01:22:59,980
Debido a que Flask es asincrónico,
ya que escribimos nuestro programa,

1796
01:22:59,980 --> 01:23:05,110
registra todas esas rutas, y
entonces solo espera que sucedan

1797
01:23:05,110 --> 01:23:08,680
las cosas de manera asíncrona, se
desordenen o tengan cualquier orden.

1798
01:23:08,680 --> 01:23:11,830
Pero ahora en JavaScript,
realmente sentimos el poder

1799
01:23:11,830 --> 01:23:14,180
de la asincronía,
de la siguiente manera.

1800
01:23:14,180 --> 01:23:17,244
La razón por la que lo pude ordenar,

1801
01:23:17,244 --> 01:23:19,660
en realidad, no hice
nada útil con mi tiempo.

1802
01:23:19,660 --> 01:23:20,920
Solo estuve con mis
dedos cruzados aquí.

1803
01:23:20,920 --> 01:23:22,630
Pero teóricamente, podría
haber hecho otra llamada,

1804
01:23:22,630 --> 01:23:23,560
revisado mi correo electrónico,

1805
01:23:23,560 --> 01:23:26,435
o comido algo mientras
espero a que Brian me responda.

1806
01:23:26,435 --> 01:23:28,090
Pude haber
hecho un trabajo real.

1807
01:23:28,090 --> 01:23:30,850
Porque si permitimos la asincronicidad,

1808
01:23:30,850 --> 01:23:35,139
haríamos cosas entre
el inicio y el final de algún objetivo.

1809
01:23:35,139 --> 01:23:37,180
Ahí fue cuando Brian
me devolvió la llamada,

1810
01:23:37,180 --> 01:23:40,300
pude usar ese tiempo en algo útil,
al igual que mi programa o mi sitio web

1811
01:23:40,300 --> 01:23:42,640
podría hacer otras cosas
mientras espero por estos datos.

1812
01:23:42,640 --> 01:23:47,110
Entonces, lo importante
de la asincronicidad es que

1813
01:23:47,110 --> 01:23:49,954
estaremos listos para
hacer más cosas a la vez.

1814
01:23:49,954 --> 01:23:52,120
¿Cuáles son algunas de las
cosas que querríamos hacer?

1815
01:23:52,120 --> 01:23:56,570
Bueno, abriré algunos ejemplos
pendientes, aquí, como sigue.

1816
01:23:56,570 --> 01:23:59,710
Para continuar,
abriré este otro aquí.

1817
01:23:59,710 --> 01:24:02,674
Esto tiene incorporado una
funcionalidad que es realmente genial,

1818
01:24:02,674 --> 01:24:04,090
a pesar de que es
un poco detallado.

1819
01:24:04,090 --> 01:24:06,850
Si alguna vez pusimos atención,
en estos tiempos, las páginas web

1820
01:24:06,850 --> 01:24:09,700
y desde luego las aplicaciones
móviles, pueden saber dónde estamos.

1821
01:24:09,700 --> 01:24:11,770
Simplemente, Google sabía
dónde estuve cuando llegué,

1822
01:24:11,770 --> 01:24:15,190
Google Maps, aun cuando no estaba
conectado, lo cual es un poco escalofriante,

1823
01:24:15,190 --> 01:24:17,350
pero tenían suficiente
Información sobre mí.

1824
01:24:17,350 --> 01:24:21,310
¿Cómo podríamos ser tan escalofriantes
en nuestros propios sitios web

1825
01:24:21,310 --> 01:24:23,470
como para averiguar
dónde está el usuario?

1826
01:24:23,470 --> 01:24:25,450
Tal vez no debí
decirlo de ese modo.

1827
01:24:25,450 --> 01:24:27,230
Bueno, esto es un trabalenguas.

1828
01:24:27,230 --> 01:24:29,650
Pero las ideas son
exactamente las mismas.

1829
01:24:29,650 --> 01:24:32,830
Resulta que esta de
aquí, es otra variable global

1830
01:24:32,830 --> 01:24:34,400
que viene con los
navegadores actuales.

1831
01:24:34,400 --> 01:24:35,622
No es solo un documento,

1832
01:24:35,622 --> 01:24:36,580
también es el navegador.

1833
01:24:36,580 --> 01:24:39,050
Y el navegador es como
esta variable global especial

1834
01:24:39,050 --> 01:24:43,300
que está geográficamente relacionada
con la funcionalidad incorporada en él.

1835
01:24:43,300 --> 01:24:47,020
Una de esas piezas de
funcionalidad es navigator.geolocation,

1836
01:24:47,020 --> 01:24:51,310
que es como una característica dentro
de este objeto de navegación global

1837
01:24:51,310 --> 01:24:53,230
y viene con una
función también conocida

1838
01:24:53,230 --> 01:24:55,060
como un método
llamado ubicación actual,

1839
01:24:55,060 --> 01:24:57,190
el cual, si leemos
la documentación,

1840
01:24:57,190 --> 01:24:59,140
se supone que debe obtener
al usuario o técnicamente

1841
01:24:59,140 --> 01:25:03,640
la ubicación actual del navegador
en el mundo, la latitud y la longitud,

1842
01:25:03,640 --> 01:25:05,690
mediante coordenadas
de GPS o similares.

1843
01:25:05,690 --> 01:25:09,670
Pero puede tomar un tiempo
averiguar dónde está el usuario.

1844
01:25:09,670 --> 01:25:12,549
Si habláramos en un contexto como
el de CSI, tiene que triangular al usuario,

1845
01:25:12,549 --> 01:25:14,590
averiguar dónde se
encuentra y hacer todo eso,

1846
01:25:14,590 --> 01:25:15,970
algunas veces
hablando con el servidor,

1847
01:25:15,970 --> 01:25:17,560
de alguna manera,
su posición está determinada

1848
01:25:17,560 --> 01:25:21,040
y tomaría un segundo, tal vez
un minuto o una cierta cantidad de tiempo.

1849
01:25:21,040 --> 01:25:26,350
Así que es una buena oportunidad
para una implementación asincrónica,

1850
01:25:26,350 --> 01:25:28,730
el usar una devolución de llamada,
tal y como lo hicimos con Brian,

1851
01:25:28,730 --> 01:25:31,210
para que cuando el navegador
descubra mi ubicación,

1852
01:25:31,210 --> 01:25:34,510
me lo haga saber y no vea
el molesto balón de playa girando

1853
01:25:34,510 --> 01:25:36,200
hasta que esa respuesta llegue.

1854
01:25:36,200 --> 01:25:37,940
Así que, ¿cómo hago esto?

1855
01:25:37,940 --> 01:25:39,379
Llamo a getCurrentPosition.

1856
01:25:39,379 --> 01:25:41,920
Paso a una función anónima,
aunque podría tener un nombre,

1857
01:25:41,920 --> 01:25:42,880
pero no lo necesita.

1858
01:25:42,880 --> 01:25:45,430
La función anónima que
toma, según la documentación,

1859
01:25:45,430 --> 01:25:49,000
un argumento llamado position, que
será un objeto especial que contiene

1860
01:25:49,000 --> 01:25:50,120
coordenadas.

1861
01:25:50,120 --> 01:25:54,490
Cuando se llama a esa función algunos
segundos o milisegundos después,

1862
01:25:54,490 --> 01:25:57,924
esta una línea de código
ejecutará, document.write,

1863
01:25:57,924 --> 01:25:58,840
que no hemos visto.

1864
01:25:58,840 --> 01:26:02,180
Esto es solo una manera de escribir
palabras adicionales al documento,

1865
01:26:02,180 --> 01:26:04,180
como el cuerpo de la página web.

1866
01:26:04,180 --> 01:26:08,380
position.coords.latitude,
para las coordenadas.

1867
01:26:08,380 --> 01:26:11,050
Una coma para concatenar,
solo para mantenerla bonita.

1868
01:26:11,050 --> 01:26:14,440
Y después concatenar,
position.coords.longitude.

1869
01:26:14,440 --> 01:26:17,720
Este es un enorme trabalenguas
que dice, haz lo siguiente.

1870
01:26:17,720 --> 01:26:22,300
Déjame entrar en la página
web llamada geolocation.html.

1871
01:26:22,300 --> 01:26:25,190


1872
01:26:25,190 --> 01:26:28,340
Todavía, nada parece suceder.

1873
01:26:28,340 --> 01:26:29,750
Pero si yo,

1874
01:26:29,750 --> 01:26:33,980


1875
01:26:33,980 --> 01:26:36,330
¿Por qué no pasó nada?

1876
01:26:36,330 --> 01:26:36,830
Oh no.

1877
01:26:36,830 --> 01:26:46,400


1878
01:26:46,400 --> 01:26:46,960
OK,

1879
01:26:46,960 --> 01:26:47,590
aquí vamos.

1880
01:26:47,590 --> 01:26:50,260
No funcionó porque no accedí
a HTTPS para las demostraciones

1881
01:26:50,260 --> 01:26:52,122
de hoy, lo que no
es un gran problema.

1882
01:26:52,122 --> 01:26:53,830
Porque de cualquier manera
solo son demos públicas.

1883
01:26:53,830 --> 01:26:55,121
Pero al navegador no le gustó,

1884
01:26:55,121 --> 01:26:58,880
porque quiere la comunicación de mis
coordenadas de GPS para estar seguro.

1885
01:26:58,880 --> 01:27:01,510
Tan pronto como cambie
a HTTPS, esto dice:

1886
01:27:01,510 --> 01:27:06,100
hey, mi nombre de dominio en
el IDE, quiere saber su ubicación.

1887
01:27:06,100 --> 01:27:08,684
Algunos de nosotros tendríamos
el hábito de solo hacer clic en bloquear.

1888
01:27:08,684 --> 01:27:11,350
En cambio, algunos de nosotros tendríamos
el hábito de solo hacer clic en permitir.

1889
01:27:11,350 --> 01:27:12,890
Algunos de nosotros tendríamos
el hábito de solo hacer clic en Enter,

1890
01:27:12,890 --> 01:27:14,300
y quién sabe lo que acaba de suceder.

1891
01:27:14,300 --> 01:27:19,541
Si hago clic en permitir y
esperen, porque es asincrónico,

1892
01:27:19,541 --> 01:27:21,790
Brian podría tardar un tiempo
en descubrir dónde estoy.

1893
01:27:21,790 --> 01:27:26,140
Esta es increíblemente precisa,
al usar valores de punto flotante,

1894
01:27:26,140 --> 01:27:29,170
mi ubicación en el mundo,
al menos, con alta probabilidad.

1895
01:27:29,170 --> 01:27:31,209
Ahora, puedo verificar esto, creo.

1896
01:27:31,209 --> 01:27:33,250
Esto resulta ser Cambridge,
Massachusetts.

1897
01:27:33,250 --> 01:27:37,770
Si voy a Google Maps y busco
esas coordenadas de GPS,

1898
01:27:37,770 --> 01:27:42,370
de hecho, eso es condenadamente aterrador.

1899
01:27:42,370 --> 01:27:46,300
Es bastante bueno,

1900
01:27:46,300 --> 01:27:48,710
eso es, de hecho, donde estamos.

1901
01:27:48,710 --> 01:27:50,500
La conclusión es,
¿cómo podemos hacer esto?

1902
01:27:50,500 --> 01:27:52,930
Podemos hacer esto al entender lo
que es una devolución de llamada

1903
01:27:52,930 --> 01:27:54,179
y lo qué es un código asíncrono.

1904
01:27:54,179 --> 01:27:55,760
De nuevo, el paradigma está cambiando.

1905
01:27:55,760 --> 01:27:57,760
No solo llamo a
getCurrentPosition y luego

1906
01:27:57,760 --> 01:28:02,230
obtengo un valor de retorno como el que
recibimos durante semanas en C y Python.

1907
01:28:02,230 --> 01:28:04,450
Ahora, no hay nada
en el lado izquierdo.

1908
01:28:04,450 --> 01:28:06,370
No espero un valor
de retorno como tal.

1909
01:28:06,370 --> 01:28:09,460
Ciertamente no almaceno un
valor de retorno en el lado izquierdo,

1910
01:28:09,460 --> 01:28:12,230
como lo hicimos durante
mucho tiempo con Python y C.

1911
01:28:12,230 --> 01:28:15,970
En cambio, paso a una
función, funcionalidad,

1912
01:28:15,970 --> 01:28:19,360
como mi teléfono que dice,
regrese cuando tenga la respuesta.

1913
01:28:19,360 --> 01:28:23,224
Y ese es el paradigma que
empezó a cambiar para nosotros.

1914
01:28:23,224 --> 01:28:26,140
Hay un par de cosas más que también
podemos hacer a lo largo de estas líneas.

1915
01:28:26,140 --> 01:28:29,080
Abriré uno, que
es un poco tonto,

1916
01:28:29,080 --> 01:28:31,840
pero me trae de vuelta
a mis días de HTML.

1917
01:28:31,840 --> 01:28:36,730
Hace tiempo, en HTML y en 1.0, había
una etiqueta increíble llamada blink.

1918
01:28:36,730 --> 01:28:39,760
Por lo cual, si
escribíamos [blink],

1919
01:28:39,760 --> 01:28:42,370
luego escribíamos algunas
palabras y cerrábamos la etiqueta,

1920
01:28:42,370 --> 01:28:44,182
simplemente haría
esto en la página web.

1921
01:28:44,182 --> 01:28:46,390
Estoy muy seguro de
que así nos saludaron

1922
01:28:46,390 --> 01:28:50,810
cuando visitaron mi sitio web de
primer año o el de segundo año como,

1923
01:28:50,810 --> 01:28:52,240
hola, bienvenidos a mi sitio web.

1924
01:28:52,240 --> 01:28:52,997
Esto es tonto.

1925
01:28:52,997 --> 01:28:56,080
Con los años, lo único bueno que
hicieron los organismos de normalización

1926
01:28:56,080 --> 01:28:58,870
fue quitar la funcionalidad
blink de todos lados.

1927
01:28:58,870 --> 01:29:02,960
Había una etiqueta de marquesina,
parecida a un tablero de cotizaciones,

1928
01:29:02,960 --> 01:29:05,800
o como una marquesina de espectáculo
de Broadway, donde simplemente

1929
01:29:05,800 --> 01:29:10,040
se desplazaba el texto en la pantalla,
como esto, que también es bastante tonto.

1930
01:29:10,040 --> 01:29:14,680
Pero, podemos traer de vuelta la
etiqueta blink de la siguiente manera.

1931
01:29:14,680 --> 01:29:19,540
Aquí hay una página web bastante
sencilla con un solo div y el ID de

1932
01:29:19,540 --> 01:29:22,480
greeting, solo para que tenga
una manera única de identificarla.

1933
01:29:22,480 --> 01:29:24,580
Supongamos que quiero
hacer que este texto parpadee.

1934
01:29:24,580 --> 01:29:26,980
Si consideramos, que
ahora tenemos la habilidad

1935
01:29:26,980 --> 01:29:30,130
para ejecutar código en
la computadora del usuario,

1936
01:29:30,130 --> 01:29:35,210
deberíamos ser capaces de lograr
esto al activar CSS y desactivar CSS,

1937
01:29:35,210 --> 01:29:35,770
encendido y apagado.

1938
01:29:35,770 --> 01:29:37,070
Es posible que no
hayan hecho esto antes.

1939
01:29:37,070 --> 01:29:40,111
Porque posiblemente solo usamos
CSS para centrar texto similar, o hacerlo

1940
01:29:40,111 --> 01:29:43,460
negrita, de color, de
diferente tamaño o similar.

1941
01:29:43,460 --> 01:29:48,460
También podemos hacer que se visualice
o no, y que sea visible o invisible.

1942
01:29:48,460 --> 01:29:52,510
Si miramos el código de
script, para bien o para mal,

1943
01:29:52,510 --> 01:29:54,370
consideraré cómo podría hacerlo.

1944
01:29:54,370 --> 01:29:57,130
Para continuar, definiré
una función llamada blink

1945
01:29:57,130 --> 01:29:59,650
que solo obtiene esa div por su ID.

1946
01:29:59,650 --> 01:30:00,980
Ya vimos eso antes,

1947
01:30:00,980 --> 01:30:02,560
y después solo hago esto.

1948
01:30:02,560 --> 01:30:06,250
Si la propiedad de estilo
de div, y nosotros únicamente

1949
01:30:06,250 --> 01:30:09,790
sabemos que existe porque lo vimos
en el curso, lo leímos en un manual

1950
01:30:09,790 --> 01:30:13,660
o lo vimos en línea. Si este
div, que vino de esta línea:

1951
01:30:13,660 --> 01:30:19,360
if (div.style.visibility == "hidden")
entonces usa esta línea de código:

1952
01:30:19,360 --> 01:30:24,790
{div.style.visibility == "visible";}

1953
01:30:24,790 --> 01:30:31,780
De lo contrario: else
{div.style.visibility == "hidden";}

1954
01:30:31,780 --> 01:30:35,680
Hasta el día de hoy, no sé por qué
lo contrario de visible no es invisible,

1955
01:30:35,680 --> 01:30:36,280
es oculto (hidden).

1956
01:30:36,280 --> 01:30:39,130
Pero, esa es también una decisión de
diseño con la que estamos atrapados.

1957
01:30:39,130 --> 01:30:40,910
¿Cómo funciona esto?

1958
01:30:40,910 --> 01:30:43,720
Esta es una función
que solo cambia el estado.

1959
01:30:43,720 --> 01:30:46,210
Pero algo no parpadeará
a menos que cambie,

1960
01:30:46,210 --> 01:30:48,890
luego cambie,
cambie y cambie.

1961
01:30:48,890 --> 01:30:51,010
Otra función
hermosa de JavaScript

1962
01:30:51,010 --> 01:30:55,980
que utilizamos para el mal,
es hacer algo repetidamente

1963
01:30:55,980 --> 01:30:57,670
pero asincrónicamente.

1964
01:30:57,670 --> 01:31:00,250
Fácilmente podría hacer que
algo parpadeara, parpadeara,

1965
01:31:00,250 --> 01:31:02,600
y solo parpadeara,
al hacer un bucle infinito.

1966
01:31:02,600 --> 01:31:04,900
Pero, si tuviera un bucle
infinito while o un bucle for,

1967
01:31:04,900 --> 01:31:07,000
por definición,
nunca saldrían de eso.

1968
01:31:07,000 --> 01:31:09,100
Por lo tanto, la página
parpadearía para siempre,

1969
01:31:09,100 --> 01:31:11,890
pero no haría nada más.

1970
01:31:11,890 --> 01:31:18,250
Con un código asíncrono como este, puedo
registrar una función con un navegador

1971
01:31:18,250 --> 01:31:25,030
y decirle, llama esta función
cada 500 milisegundos.

1972
01:31:25,030 --> 01:31:26,860
Noten que esta es una línea de código:
window.setInterval(blink, 500);

1973
01:31:26,860 --> 01:31:29,560
Cuando el navegador ejecuta
este código, ejecuta una línea,

1974
01:31:29,560 --> 01:31:30,640
y simplemente continúa.

1975
01:31:30,640 --> 01:31:35,290
Pero recordemos, cada 500 milisegundos
recordemos parar lo que sea que hagamos,

1976
01:31:35,290 --> 01:31:38,530
parpadea, luego continúa,
luego parpadea, luego continúa.

1977
01:31:38,530 --> 01:31:41,620
De esta manera, podemos tener varias
cosas sucediendo en nuestra página web,

1978
01:31:41,620 --> 01:31:45,020
porque la manera en que
funciona JavaScript es en sí misma,

1979
01:31:45,020 --> 01:31:47,210
el lenguaje, integrado en
el navegador, esencialmente,

1980
01:31:47,210 --> 01:31:49,250
tiene este bucle infinito.

1981
01:31:49,250 --> 01:31:51,920
Y se escucha que constantemente
los usuarios hace clic en las cosas,

1982
01:31:51,920 --> 01:31:54,070
se escucha constantemente
que el mouse se mueve,

1983
01:31:54,070 --> 01:31:57,890
se escucha constantemente
que el cronómetro se apaga.

1984
01:31:57,890 --> 01:31:59,690
Y cada vez que sucede
uno de estos eventos,

1985
01:31:59,690 --> 01:32:03,620
el gestor envía la
función que se le dijo

1986
01:32:03,620 --> 01:32:05,480
para llamar en respuesta a esos eventos.

1987
01:32:05,480 --> 01:32:08,760
El resultado final
con un blink es este.

1988
01:32:08,760 --> 01:32:12,850
Si vuelvo a mi índice de
directorio, y abro blink.html,

1989
01:32:12,850 --> 01:32:16,380
vemos que hace
exactamente eso.

1990
01:32:16,380 --> 01:32:18,820
Puedo modificar esto
de manera un poco diferente.

1991
01:32:18,820 --> 01:32:23,080
Si quiero hacerlo cada décima
de segundo, podemos hacer esto.

1992
01:32:23,080 --> 01:32:25,380
Y si hacemos esto demasiado rápido,
probablemente no sea saludable.

1993
01:32:25,380 --> 01:32:28,400
Así que, lo dejaremos en 50.

1994
01:32:28,400 --> 01:32:32,880
Así es como aprendí a
hacer web hace años.

1995
01:32:32,880 --> 01:32:35,520
¿Qué más podemos hacer
de una manera más convincente?

1996
01:32:35,520 --> 01:32:38,540
Veamos un ejemplo final que
arreglé durante el descanso,

1997
01:32:38,540 --> 01:32:40,190
es este mapa de aquí.

1998
01:32:40,190 --> 01:32:44,210
Aquí es donde el mundo comienza
a ser muy, muy interesante.

1999
01:32:44,210 --> 01:32:47,450
Debido a que hay tantas
API de terceros por ahí,

2000
01:32:47,450 --> 01:32:49,520
interfaces de programación de aplicaciones,

2001
01:32:49,520 --> 01:32:54,590
como gente y compañías atractivas
que intentan vendernos servicios.

2002
01:32:54,590 --> 01:32:58,700
Tienen funciones y código que
escribieron, el cual ponen a disposición

2003
01:32:58,700 --> 01:33:01,790
en internet para que los usemos,
ya sea tomando datos de ellos,

2004
01:33:01,790 --> 01:33:04,790
como en el caso de CS50 Finance
que emite cotizaciones bursátiles.

2005
01:33:04,790 --> 01:33:07,944
O como el caso de Google Maps,
que hornea funcionalidad adicional

2006
01:33:07,944 --> 01:33:10,610
a nuestra aplicación, por lo que no tenemos
que implementarla nosotros mismos.

2007
01:33:10,610 --> 01:33:13,190
Si alguien alguna vez usó
Lyft o Uber en su teléfono,

2008
01:33:13,190 --> 01:33:16,070
Lyft y Uber no comenzaron
por ser empresas de mapas,

2009
01:33:16,070 --> 01:33:18,790
enviando autos alrededor del
mundo, mapeando todo el planeta.

2010
01:33:18,790 --> 01:33:21,240
Sería una locura que de
arranque se intentara hacer eso.

2011
01:33:21,240 --> 01:33:24,200
Ellos quería construir un
servicio de auto compartido

2012
01:33:24,200 --> 01:33:28,000
además de otra característica, lo
cual es solo un ingrediente necesario.

2013
01:33:28,000 --> 01:33:29,750
Así que, usaron Google
o alguna otra compañía,

2014
01:33:29,750 --> 01:33:33,080
a la que le pagaron para construir
sus mapas en su propia aplicación.

2015
01:33:33,080 --> 01:33:36,750
Entonces, ellos contribuyeron con su
propiedad intelectual e ideas propias.

2016
01:33:36,750 --> 01:33:38,040
¿Cómo podemos hacer esto?

2017
01:33:38,040 --> 01:33:40,760
Bien, si tengo una página
web bastante simple,

2018
01:33:40,760 --> 01:33:44,360
para continuar,
eliminaré esto muy rápido,

2019
01:33:44,360 --> 01:33:46,260
para que luzca de la siguiente manera.

2020
01:33:46,260 --> 01:33:49,490
Aquí hay una página web muy
simple, que tiene un cuerpo y

2021
01:33:49,490 --> 01:33:51,414
un div dentro de ella, cuyo ID es map.

2022
01:33:51,414 --> 01:33:53,330
Después, en la parte
inferior del archivo, notemos

2023
01:33:53,330 --> 01:33:55,760
que existe este código JavaScript,
que apunta específicamente

2024
01:33:55,760 --> 01:34:00,090
a API de Google, programación de aplicaciones
interfaz, diagonal map diagonal algo.

2025
01:34:00,090 --> 01:34:03,750
Y lo que hice durante el descanso
fue que descargué una nueva clave API,

2026
01:34:03,750 --> 01:34:06,930
lo que me permite, David Malan,
usar su API para que todas

2027
01:34:06,930 --> 01:34:08,930
estas solicitudes estén asociadas a mí.

2028
01:34:08,930 --> 01:34:10,280
Anteriormente, tenía una clave antigua

2029
01:34:10,280 --> 01:34:11,090
que sencillamente ya no funciona,

2030
01:34:11,090 --> 01:34:12,756
Es por eso, que recibimos
el mensaje de error.

2031
01:34:12,756 --> 01:34:15,620
Así que, me inscribí para
obtener una clave API gratuita.

2032
01:34:15,620 --> 01:34:18,890
¿Cómo hago algo
con este mapa?

2033
01:34:18,890 --> 01:34:21,020
Bueno, podemos hacer
algunas cosas diferentes

2034
01:34:21,020 --> 01:34:25,550
siguiendo, la documentación
en línea de la manera correcta.

2035
01:34:25,550 --> 01:34:30,110
Para continuar,
abriré lo siguiente.

2036
01:34:30,110 --> 01:34:34,010
Si continúo y cargo esta página
ahora mismo, eliminé ese código,

2037
01:34:34,010 --> 01:34:37,870
y abro map.html,
no hay nada ahí.

2038
01:34:37,870 --> 01:34:39,500
Es solo una gran página en blanco.

2039
01:34:39,500 --> 01:34:42,120
Y eso es porque no
agregué mi propio código.

2040
01:34:42,120 --> 01:34:45,300
Si voy a la etiqueta del script,
para continuar haré lo siguiente.

2041
01:34:45,300 --> 01:34:48,857
Definiré una función sin argumentos:
function initMap( )

2042
01:34:48,857 --> 01:34:51,440
Dentro de esta función,
a continuación haré esto.

2043
01:34:51,440 --> 01:34:55,700
Declararé una variable llamada map,
que tomará el valor de un nuevo objeto:

2044
01:34:55,700 --> 01:35:05,420
var map = new google.maps.Map
(document.getElementById("map"))

2045
01:35:05,420 --> 01:35:08,542
eso será un objeto especial.

2046
01:35:08,542 --> 01:35:10,250
Veremos qué significa
esto en un momento.

2047
01:35:10,250 --> 01:35:11,930
La sintaxis aquí
es un poco rara.

2048
01:35:11,930 --> 01:35:14,084
Pero, esta línea de código
que solo conozco por leer

2049
01:35:14,084 --> 01:35:15,500
la documentación para Google Maps,

2050
01:35:15,500 --> 01:35:18,890
y Google Maps me dijo, si
quieres un nuevo mapa, escribe esto.

2051
01:35:18,890 --> 01:35:22,760
Si queremos recordar ese mapa en un
valor de retorno o una variable, lo siento,

2052
01:35:22,760 --> 01:35:26,402
debí decir let, lo almacenamos
en map, a la izquierda.

2053
01:35:26,402 --> 01:35:28,110
La cosa extraña
aquí es la siguiente,

2054
01:35:28,110 --> 01:35:29,570
los dos argumentos son estos.

2055
01:35:29,570 --> 01:35:33,050
Esta es una línea de código que
ya vimos antes y dice, oye navegador,

2056
01:35:33,050 --> 01:35:37,370
ve a buscar el elemento HTML
del dom cuyo único ID es "map".

2057
01:35:37,370 --> 01:35:38,690
¿Cuál es ese elemento?

2058
01:35:38,690 --> 01:35:39,800
Es este div:
<div id = "map">< /div>

2059
01:35:39,800 --> 01:35:40,760
Y está vacío.

2060
01:35:40,760 --> 01:35:42,410
Obviamente allí no hay un mapa.

2061
01:35:42,410 --> 01:35:45,020
No hay nada entre ese paréntesis
angular de cierre y el de apertura.

2062
01:35:45,020 --> 01:35:46,460
Esa es la razón
de que no haya un mapa.

2063
01:35:46,460 --> 01:35:48,680
Pero esta línea de
código, es la que usaremos

2064
01:35:48,680 --> 01:35:52,760
para informarle a Google
dónde debe poner su mapa para mí.

2065
01:35:52,760 --> 01:35:55,642
Toma otro argumento
aquí, según la llave

2066
01:35:55,642 --> 01:35:58,100
y la llave de cierre,
el cual es un argumento que

2067
01:35:58,100 --> 01:36:01,650
quiere decir: la documentación me dijo
que tengo que pasar pares de valores clave

2068
01:36:01,650 --> 01:36:02,150
múltiples,

2069
01:36:02,150 --> 01:36:03,470
tengo que configurar el mapa.

2070
01:36:03,470 --> 01:36:07,020
Lo haré en un momento.

2071
01:36:07,020 --> 01:36:13,086
A continuación, volveré a cargar el mapa
subiré al navegador y volveré a cargarlo.

2072
01:36:13,086 --> 01:36:14,960
Interesante, no hace nada todavía.

2073
01:36:14,960 --> 01:36:16,360
Pero progresamos, ¿cierto?

2074
01:36:16,360 --> 01:36:17,254
Es gris,

2075
01:36:17,254 --> 01:36:19,420
Lo que sugiere que
no he configurado el mapa.

2076
01:36:19,420 --> 01:36:20,330
Déjenme hacerlo.

2077
01:36:20,330 --> 01:36:22,700
Sabría esto solamente
a partir de la documentación,

2078
01:36:22,700 --> 01:36:25,160
que necesito
proporcionar una clave center

2079
01:36:25,160 --> 01:36:27,650
y ese center necesita la latitud
y la longitud: center: {lat: , lng:

2080
01:36:27,650 --> 01:36:31,760
Y solo para ser neutral
aquí, puedo elegir 39.833

2081
01:36:31,760 --> 01:36:39,050
y una longitud negativa
-98.583, cierro la llave.

2082
01:36:39,050 --> 01:36:41,930
Luego una clave zoom de 4.

2083
01:36:41,930 --> 01:36:44,680
Fuera del contexto
de Google, esto no significa nada.

2084
01:36:44,680 --> 01:36:46,680
Conozco esto solo a partir
de leer la documentación.

2085
01:36:46,680 --> 01:36:51,390
Y la documentación de Google me dijo
asegúrate de usar una clave llamada center.

2086
01:36:51,390 --> 01:36:54,720
Tiene este argumento después de los
dos puntos, es otro objeto de JavaScript

2087
01:36:54,720 --> 01:36:57,450
con dos claves, lat
y long, cada una de las cuales

2088
01:36:57,450 --> 01:37:01,320
es exactamente eso, un float que
representa una latitud y una longitud.

2089
01:37:01,320 --> 01:37:04,266
También dime, el Google
API, ¿qué nivel de zoom quieres?

2090
01:37:04,266 --> 01:37:06,390
¿Quieres ver la vista
panorámica acá arriba?

2091
01:37:06,390 --> 01:37:08,940
o ¿quieres hacer un
acercamiento del terreno?

2092
01:37:08,940 --> 01:37:12,860
Y como es de más o menos 4,
está en un cierto nivel que es útil.

2093
01:37:12,860 --> 01:37:14,490
Pero también podemos jugar con eso.

2094
01:37:14,490 --> 01:37:15,990
Déjenme guardarlo.

2095
01:37:15,990 --> 01:37:20,560
Regresamos aquí, volvemos
a cargar la página y voilà.

2096
01:37:20,560 --> 01:37:23,640
Me localizo en lo que es más
o menos el centro de los Estados Unidos

2097
01:37:23,640 --> 01:37:24,894
con un cierto nivel de zoom.

2098
01:37:24,894 --> 01:37:27,060
Si quiero cambiar uno de
esos valores solo para verlo,

2099
01:37:27,060 --> 01:37:30,330
hagamos esto tal vez 8, guardar.

2100
01:37:30,330 --> 01:37:31,650
Recargar.

2101
01:37:31,650 --> 01:37:37,320
Ahora estoy realmente cerca de
lo que parece ser Kansas o Nebraska,

2102
01:37:37,320 --> 01:37:38,820
dependiendo del nivel de acercamiento.

2103
01:37:38,820 --> 01:37:41,500
Puedo moverme alrededor
del mundo, por así decirlo.

2104
01:37:41,500 --> 01:37:46,225
Veamos, si voy a como 139,
veamos a dónde me lleva eso.

2105
01:37:46,225 --> 01:37:46,725
Recargar.

2106
01:37:46,725 --> 01:37:50,430


2107
01:37:50,430 --> 01:37:54,360
Puede ser que eso no
sea posible geográficamente.

2108
01:37:54,360 --> 01:37:57,110
Hagamos 42, qué tal

2109
01:37:57,110 --> 01:37:59,190
cambiará eso a 42, volver a cargar.

2110
01:37:59,190 --> 01:38:03,880
Ahora estamos sobre Sioux City.

2111
01:38:03,880 --> 01:38:07,457
Quizás vamos a 44.

2112
01:38:07,457 --> 01:38:10,290
De cualquier manera, movemos el mapa
a lugares que no conozco de ante mano.

2113
01:38:10,290 --> 01:38:11,460
Ahora estamos en Dakota del Sur.

2114
01:38:11,460 --> 01:38:13,854
En cualquier caso, todo lo
que hicimos es solo configurar

2115
01:38:13,854 --> 01:38:15,270
el mapa para estar en diferentes lugares.

2116
01:38:15,270 --> 01:38:16,920
Pero hay otra
funcionalidad en Google Maps.

2117
01:38:16,920 --> 01:38:20,280
Revertiré esto y declararé
un par de otras cosas.

2118
01:38:20,280 --> 01:38:24,160
De hecho, puedo declarar un
marcador, de la siguiente manera.

2119
01:38:24,160 --> 01:38:29,510
let marker = new google.maps.Marker({ });

2120
01:38:29,510 --> 01:38:30,275
se cierra el paréntesis.

2121
01:38:30,275 --> 01:38:32,400
Noten que también
tengo una llave ahí.

2122
01:38:32,400 --> 01:38:36,060
Porque el marcador es otra
función de Google Maps API

2123
01:38:36,060 --> 01:38:39,310
eso me permite especificar en qué:
map, quiero poner el marcador.

2124
01:38:39,310 --> 01:38:40,500
Hay una clave llamada map.

2125
01:38:40,500 --> 01:38:43,110
Por casualidad, la
variable que definí aquí

2126
01:38:43,110 --> 01:38:44,850
se llama map.

2127
01:38:44,850 --> 01:38:48,290
Proseguiré con otra cosa,
la posición de este marcador.

2128
01:38:48,290 --> 01:38:53,250
Pondré esto:
position: {lat: 42.3762,

2129
01:38:53,250 --> 01:38:57,390
y una longitud negativa: lng: -71.1158

2130
01:38:57,390 --> 01:39:00,550
Solo por si acaso,
hagamos uno más de estos.

2131
01:39:00,550 --> 01:39:02,800
Estrictamente no
necesito una variable aquí.

2132
01:39:02,800 --> 01:39:04,810
A continuación me desharé de eso,

2133
01:39:04,810 --> 01:39:11,730
y hare: new google.maps.Marker( )

2134
01:39:11,730 --> 01:39:13,620
Con la misma sintaxis que antes,

2135
01:39:13,620 --> 01:39:15,170
el mapa será el mismo: map : map,

2136
01:39:15,170 --> 01:39:21,270
pero la posición de este
marcador será: position: {lat: 41.3104

2137
01:39:21,270 --> 01:39:27,780
y una longitud de:
lng:-72.9289}, guardar.

2138
01:39:27,780 --> 01:39:33,030
Y si no lo arruiné, lo cual hice.

2139
01:39:33,030 --> 01:39:34,140
Me está gritando,

2140
01:39:34,140 --> 01:39:37,710
problema de formato: símbolo
inesperado, oh, OK, olvidé esto.

2141
01:39:37,710 --> 01:39:39,810
Guardar.

2142
01:39:39,810 --> 01:39:40,440
Desaparece,

2143
01:39:40,440 --> 01:39:41,600
desaparece.

2144
01:39:41,600 --> 01:39:43,350
Recargar.

2145
01:39:43,350 --> 01:39:44,550
Alejémonos,

2146
01:39:44,550 --> 01:39:46,320
y miren eso.

2147
01:39:46,320 --> 01:39:50,640
Tenemos marcadores, afortunadamente,
sobre lo que son Harvard y Yale.

2148
01:39:50,640 --> 01:39:52,140
¿De dónde vino todo esto?

2149
01:39:52,140 --> 01:39:53,830
Bueno, de Google Maps,

2150
01:39:53,830 --> 01:39:56,340
eso es lo que busqué en Google
durante el descanso, clave de API.

2151
01:39:56,340 --> 01:39:58,680
Google Maps API.

2152
01:39:58,680 --> 01:40:02,100
Y si voy a esta URL, como
también lo haremos pronto,

2153
01:40:02,100 --> 01:40:04,290
veremos que debajo
de la documentación, ellos

2154
01:40:04,290 --> 01:40:07,260
tienen muchas API diferentes,
algunas para teléfonos, algunas que

2155
01:40:07,260 --> 01:40:10,590
son para páginas web
como esta, la JavaScript API.

2156
01:40:10,590 --> 01:40:13,890
Y veremos que hay una
interfaz bastante rica para crear

2157
01:40:13,890 --> 01:40:14,760
este tipo de mapas.

2158
01:40:14,760 --> 01:40:17,670
A primera vista, la documentación
puede ser un poco abrumadora.

2159
01:40:17,670 --> 01:40:20,040
Pero aquí nos dan ejemplos de
cómo poner un marcador, por ejemplo,

2160
01:40:20,040 --> 01:40:20,905
sobre Australia.

2161
01:40:20,905 --> 01:40:24,030
Así es como deduje cómo poner uno
sobre Cambridge, Massachusetts y New

2162
01:40:24,030 --> 01:40:24,546
Haven.

2163
01:40:24,546 --> 01:40:25,920
También hay otras funcionalidades,

2164
01:40:25,920 --> 01:40:27,780
como estas cosas
llamadas Info Windows.

2165
01:40:27,780 --> 01:40:32,370
Con Info Windows, me desplazo
hacia abajo en este ejemplo, aquí,

2166
01:40:32,370 --> 01:40:34,200
podremos agregar capacidad de hacer clic.

2167
01:40:34,200 --> 01:40:39,090
Si registro un gestor de eventos
no lo enviará, sino que hará clic,

2168
01:40:39,090 --> 01:40:41,670
Puedo hacer este tipo
de cosas, al igual que Google,

2169
01:40:41,670 --> 01:40:45,150
por lo que al hacer clic en un marcador,
provocará que algo más suceda,

2170
01:40:45,150 --> 01:40:48,960
en este caso, abrir Info Windows,
y así obtener funcionalidad.

2171
01:40:48,960 --> 01:40:52,450
Lo que haremos, en última
instancia, para unir todo esto,

2172
01:40:52,450 --> 01:40:56,160
nuestra última serie de
problemas de mezcla de CS50, 

2173
01:40:56,160 --> 01:40:59,640
será implementar una interfaz de usuario
con algunos de estos componentes básicos.

2174
01:40:59,640 --> 01:41:01,980
Estamos centrados
sobre Stanford, California,

2175
01:41:01,980 --> 01:41:03,780
observemos que el mapa
está en pantalla completa.

2176
01:41:03,780 --> 01:41:05,550
Podemos acercarnos e ir hacia abajo.

2177
01:41:05,550 --> 01:41:08,580
Notemos que hay un cuadro de texto,
que es un formato HTML bastante

2178
01:41:08,580 --> 01:41:09,900
simple en la parte superior.

2179
01:41:09,900 --> 01:41:13,740
Notemos que tal como lo hice antes,
configuramos la solución del equipo,

2180
01:41:13,740 --> 01:41:17,760
el suyo también lo hará pronto, para
escuchar los clics y sobre los clics

2181
01:41:17,760 --> 01:41:20,840
llamar a una función que hace
una solicitud AJAX a un servidor,

2182
01:41:20,840 --> 01:41:24,390
devolverá algunas noticias, al crear
una lista desordenada de ellas,

2183
01:41:24,390 --> 01:41:26,610
y las mostrará en una de
estas ventanas de información.

2184
01:41:26,610 --> 01:41:29,580
Si miramos lo que
pasa por debajo del agua,

2185
01:41:29,580 --> 01:41:33,820
ir a mi developer
menu, en developer tools.

2186
01:41:33,820 --> 01:41:37,500
Y deberíamos tener el hábito
de mirar a nuestra pestaña Network,

2187
01:41:37,500 --> 01:41:39,120
a continuación haré exactamente esto.

2188
01:41:39,120 --> 01:41:42,630
Limpiaré esto, haré clic en
Noticias de Palo Alto, California.

2189
01:41:42,630 --> 01:41:44,580
Veamos que algunas cosas solo sucedieron.

2190
01:41:44,580 --> 01:41:48,390
Una, mi navegador hizo una
solicitud a una ruta de artículos,

2191
01:41:48,390 --> 01:41:51,130
pasando por la geografía
de este código postal aquí.

2192
01:41:51,130 --> 01:41:52,770
Recuperé algunos gifs aquí.

2193
01:41:52,770 --> 01:41:55,860
Internet es tan rápido aquí,
que no vimos la barra de progreso.

2194
01:41:55,860 --> 01:41:59,068
Podríamos haber visto un pequeño
giro indicador si el Internet fuera lento.

2195
01:41:59,068 --> 01:42:01,300
Así es como obtuve
esos resultados de noticias.

2196
01:42:01,300 --> 01:42:05,860
Si hago clic en los artículos,
vean lo que estoy recuperando

2197
01:42:05,860 --> 01:42:09,150
OK, hola.

2198
01:42:09,150 --> 01:42:11,370
Siempre revise las noticias
del día antes del curso.

2199
01:42:11,370 --> 01:42:15,210
Lo que veo aquí es
un gran objeto JSON,

2200
01:42:15,210 --> 01:42:16,360
y todo está en una línea.

2201
01:42:16,360 --> 01:42:17,680
Es un poco difícil de ver.

2202
01:42:17,680 --> 01:42:19,513
Pero estoy seguro de que nos
podemos desplazar por las noticias

2203
01:42:19,513 --> 01:42:22,770
más tarde y ver los
artículos y las URL mismas.

2204
01:42:22,770 --> 01:42:25,470
Pero hay una pieza
más de funcionalidad.

2205
01:42:25,470 --> 01:42:28,230
Todos nosotros hemos visto la función
autocompletar en nuestros navegadores,

2206
01:42:28,230 --> 01:42:30,840
porque normalmente recuerda
lo que hemos escrito previamente.

2207
01:42:30,840 --> 01:42:33,390
Un autocompletado
más poderoso se basa

2208
01:42:33,390 --> 01:42:37,350
no en lo que los usuarios escribieron en el
pasado, sino en lo que pensaremos en el futuro

2209
01:42:37,350 --> 01:42:38,520
que podrían escribir.

2210
01:42:38,520 --> 01:42:42,530
Si realmente quiero buscar 02138,

2211
01:42:42,530 --> 01:42:47,100
noten que puedo reducir la lista de todas
las ciudades en EE. UU. para que pueda

2212
01:42:47,100 --> 01:42:48,480
hacer clic en ese autocompletado.

2213
01:42:48,480 --> 01:42:51,460
Ahora tenemos un localizado
el mapa del área de Cambridge

2214
01:42:51,460 --> 01:42:54,060
donde puedo obtener las
noticias locales de nuestra área.

2215
01:42:54,060 --> 01:42:56,520
O no tengo que buscar
solo por código postal,

2216
01:42:56,520 --> 01:43:00,550
Puedo escribir New Haven, Connecticut y
obtener cualquiera de sus códigos postales

2217
01:43:00,550 --> 01:43:02,740
y de manera similar
teletransportarnos ahí.

2218
01:43:02,740 --> 01:43:06,580
Entre los desafíos está el descargar
un archivo bastante grande, un archivo

2219
01:43:06,580 --> 01:43:10,510
de texto, llamado us.text, en el cual hay
muchos de nombres y estados de ciudades

2220
01:43:10,510 --> 01:43:14,320
y códigos postales, importarlos en
su propia base de datos similar a SQL,

2221
01:43:14,320 --> 01:43:17,590
implementar algunas rutas para que
pregunten a nuestra base de datos cuáles

2222
01:43:17,590 --> 01:43:21,550
son las pocas ciudades a la vista y
cuál es la noticia actual en esta área,

2223
01:43:21,550 --> 01:43:26,350
después usar JavaScript y las ideas
de hoy, unir toda esta funcionalidad

2224
01:43:26,350 --> 01:43:31,000
para mezclar todas estas ideas
diferentes en un resultado final,

2225
01:43:31,000 --> 01:43:31,790
el último.

2226
01:43:31,790 --> 01:43:32,500
Eso es todo por hoy.

2227
01:43:32,500 --> 01:43:34,291
Me quedare para contestar
preguntas personalizadas.

2228
01:43:34,291 --> 01:43:36,390
De lo contrario,
nos vemos a la próxima.