1
00:00:00,000 --> 00:00:02,000
[Powered by Google Translate] [Seminario] [marcos de JavaScript: ¿Por qué y cómo]

2
00:00:02,000 --> 00:00:04,000
[Kevin Schmid] [Universidad de Harvard]

3
00:00:04,000 --> 00:00:06,960
[Este es CS50.] [CS50.TV]

4
00:00:06,960 --> 00:00:10,630
>> Hola a todos. Bienvenido al seminario Frameworks JavaScript.

5
00:00:10,630 --> 00:00:14,910
Mi nombre es Kevin, y hoy voy a hablar de marcos de JavaScript,

6
00:00:14,910 --> 00:00:20,400
y el objetivo de este seminario no es para llegar a, por ejemplo, dominar un marco particular, per se

7
00:00:20,400 --> 00:00:23,810
pero para darle una amplia introducción a un par de marcos

8
00:00:23,810 --> 00:00:27,150
y demostrar por qué va a querer usar un framework.

9
00:00:27,150 --> 00:00:31,060
>> Antes de hacerlo, voy a dar un poco de historia en JavaScript,

10
00:00:31,060 --> 00:00:33,750
y luego vamos a tomar desde allí.

11
00:00:33,750 --> 00:00:36,270
Vamos a empezar por la aplicación de una lista de tareas pendientes.

12
00:00:36,270 --> 00:00:39,330
Aquí está nuestra lista de tareas para hoy.

13
00:00:39,330 --> 00:00:41,990
Es un poco gracioso. Tenemos que aplicar una lista de cosas por hacer en JavaScript.

14
00:00:41,990 --> 00:00:45,110
Esto es lo que va a ser similar, por lo que es nuestro primer objetivo.

15
00:00:45,110 --> 00:00:47,160
No vamos a utilizar un marco para hacer eso.

16
00:00:47,160 --> 00:00:51,930
Vamos a código JavaScript y obtener la lista de cosas por hacer que funcione.

17
00:00:51,930 --> 00:00:54,370
A continuación, vamos a mejorar el diseño sin necesidad de utilizar un marco.

18
00:00:54,370 --> 00:00:57,190
Vamos a hablar de varias cosas que podemos hacer con sólo solos JavaScript

19
00:00:57,190 --> 00:01:00,650
para hacer nuestra lista de tareas un poco más bien diseñado.

20
00:01:00,650 --> 00:01:02,490
A continuación, vamos a tirar un poco de jQuery,

21
00:01:02,490 --> 00:01:05,030
y luego vamos a ver la misma lista de tareas pendientes,

22
00:01:05,030 --> 00:01:07,170
sólo implementado en diferentes marcos, y vamos a discutir

23
00:01:07,170 --> 00:01:09,280
 los pros y los contras en el camino.

24
00:01:09,280 --> 00:01:12,040
>> Vamos a comenzar la aplicación de esa lista de cosas por hacer.

25
00:01:12,040 --> 00:01:14,270
Digamos que se nos ha dado este HTML.

26
00:01:14,270 --> 00:01:16,620
Voy a hacer esto un poco más pequeño.

27
00:01:16,620 --> 00:01:19,300
Como puedes ver, tengo un poco de encabezado que dice Todo

28
00:01:19,300 --> 00:01:21,740
y una pequeña caja donde pueda entrar en la descripción de un TODO

29
00:01:21,740 --> 00:01:26,990
y luego un botón nuevo tema, así que vamos a tratar de entrar en una nueva del todo a esta lista.

30
00:01:26,990 --> 00:01:31,000
Dale un seminario marcos JavaScript

31
00:01:31,000 --> 00:01:33,090
y estoy de golpear elemento nuevo.

32
00:01:33,090 --> 00:01:35,730
Tengo esta alerta de JavaScript que me dice implementar.

33
00:01:35,730 --> 00:01:37,560
Tenemos que ponerlo en práctica.

34
00:01:37,560 --> 00:01:41,490
Vamos a ver el código para esto, tanto el código HTML y JavaScript.

35
00:01:41,490 --> 00:01:43,260
Aquí está nuestro HTML.

36
00:01:43,260 --> 00:01:45,500
Como se puede ver aquí, aquí está nuestro pequeño encabezado Todos.

37
00:01:45,500 --> 00:01:47,620
Eso fue todo lo negrita en la parte superior,

38
00:01:47,620 --> 00:01:50,690
y luego tenemos el cuadro de entrada con el marcador de posición,

39
00:01:50,690 --> 00:01:59,460
y luego hay un cierto atributo de este botón que llama a esta función addTodo.

40
00:01:59,460 --> 00:02:05,460
¿Alguien quiere adivinar lo que al hacer clic se significando?

41
00:02:05,460 --> 00:02:07,390
[Estudiante respuesta inaudible]

42
00:02:07,390 --> 00:02:09,289
Bueno, el clic en el es algo así como un evento,

43
00:02:09,289 --> 00:02:12,120
como hacer clic con el ratón es sólo un evento, y lo que estamos haciendo

44
00:02:12,120 --> 00:02:16,890
es que estamos atando el caso de hacer clic en este botón para ejecutar esa función.

45
00:02:16,890 --> 00:02:21,700
AddTodo es este controlador de eventos para hacer clic en ese botón.

46
00:02:21,700 --> 00:02:25,010
>> Como se puede ver, al hacer clic en el botón Nuevo elemento

47
00:02:25,010 --> 00:02:29,940
el evento click en despiden, y esta función se llama.

48
00:02:29,940 --> 00:02:33,170
Echemos un vistazo a la función.

49
00:02:33,170 --> 00:02:36,260
Como puede ver, aquí está mi código de JavaScript hasta ahora.

50
00:02:36,260 --> 00:02:41,280
Lo que tengo en la parte superior es una estructura de datos global para mi lista de cosas por hacer.

51
00:02:41,280 --> 00:02:44,060
Se parece a una matriz. Es sólo una matriz vacía.

52
00:02:44,060 --> 00:02:47,100
Y luego tengo la función addTodo que hemos visto antes,

53
00:02:47,100 --> 00:02:50,740
y la única línea de código no esta alerta.

54
00:02:50,740 --> 00:02:55,730
Se avisa me implementar, y luego tengo 2 tareas.

55
00:02:55,730 --> 00:02:58,790
Tengo que añadir el del todo a la estructura de datos global,

56
00:02:58,790 --> 00:03:01,860
y luego quiero llamar la lista de tareas pendientes.

57
00:03:01,860 --> 00:03:06,360
Nada demasiado elaborado todavía, pero JavaScript que puede no estar familiarizado con,

58
00:03:06,360 --> 00:03:12,370
así que voy a ir despacio y revisar los fundamentos de JavaScript en ese camino.

59
00:03:12,370 --> 00:03:15,490
>> Vamos a darle una oportunidad a esto.

60
00:03:15,490 --> 00:03:21,130
Digamos que el usuario introduce algo en este cuadro.

61
00:03:21,130 --> 00:03:23,360
Me acaba de escribir algo aquí, texto.

62
00:03:23,360 --> 00:03:27,620
¿Cómo puedo ordenar el acceso que el texto a través de JavaScript?

63
00:03:27,620 --> 00:03:32,500
Recuerde que JavaScript, una de sus características fundamentales es que nos da

64
00:03:32,500 --> 00:03:34,670
este acceso mediante programación a la DOM.

65
00:03:34,670 --> 00:03:40,670
Esto nos permite acceder a los elementos y sus propiedades de este HTML real.

66
00:03:40,670 --> 00:03:43,430
La forma en que hacemos con los huesos al descubierto JavaScript

67
00:03:43,430 --> 00:03:51,360
es en realidad podemos usar una función de JavaScript llamada GetElementById.

68
00:03:51,360 --> 00:03:55,140
Quiero guardar el texto que está escrito allí, en alguna variable,

69
00:03:55,140 --> 00:03:58,350
así que voy a decir una nueva variable llamada new_todo,

70
00:03:58,350 --> 00:04:01,980
y yo voy a conseguir ese elemento.

71
00:04:01,980 --> 00:04:06,330
Esta es una función,. GetElementById.

72
00:04:06,330 --> 00:04:11,580
Y ahora me estoy poniendo un elemento de identificación, por lo que necesitará el ID de ese cuadro de texto,

73
00:04:11,580 --> 00:04:15,860
así que me he dado la new_todo_description ID.

74
00:04:15,860 --> 00:04:18,399
Así es como me voy a poner un elemento.

75
00:04:18,399 --> 00:04:23,880
Ese es mi argumento para esta función para especificar los ID de conseguir.

76
00:04:23,880 --> 00:04:28,110
Y eso es un elemento de HTML, y no tiene propiedades.

77
00:04:28,110 --> 00:04:30,650
Usted ha visto estos. Son atributos.

78
00:04:30,650 --> 00:04:37,090
El atributo del elemento de texto que almacena la entrada del usuario se denomina valor.

79
00:04:37,090 --> 00:04:40,860
Me salvó el valor del cuadro de texto que ahora en esta variable llamada new_todo.

80
00:04:40,860 --> 00:04:45,040
Ahora tengo acceso mediante programación a esta variable, que es una especie de fresco

81
00:04:45,040 --> 00:04:49,200
porque ahora lo que puedo hacer es que puedo añadir a mi lista de cosas por hacer.

82
00:04:49,200 --> 00:04:52,870
>> La forma en que íbamos a hacer esto en JavaScript y no se preocupe si no está familiarizado con este,

83
00:04:52,870 --> 00:04:57,010
pero sólo a través de él es todos.push

84
00:04:57,010 --> 00:05:00,130
porque ese es el nombre de mi estructura de datos mundial aquí,

85
00:05:00,130 --> 00:05:04,450
y yo voy a empujar new_todo.

86
00:05:04,450 --> 00:05:09,120
Esto es muy bueno porque ahora he añadido a mi JavaScript

87
00:05:09,120 --> 00:05:11,280
representación de la lista de tareas pendientes.

88
00:05:11,280 --> 00:05:15,170
Pero ahora, ¿cómo puedo obtener de nuevo al HTML?

89
00:05:15,170 --> 00:05:18,560
Tengo que encontrar una manera de ordenar de empuje hacia atrás.

90
00:05:18,560 --> 00:05:21,830
En otras palabras, como que tengo que sacar esto.

91
00:05:21,830 --> 00:05:26,060
Lo que vamos a hacer es que vamos a elaborar la lista de tareas pendientes.

92
00:05:26,060 --> 00:05:29,270
Necesito actualizar otro HTML en esa página,

93
00:05:29,270 --> 00:05:32,040
y como se puede ver, he dejado este pequeño contenedor aquí,

94
00:05:32,040 --> 00:05:36,840
este divisor de la página cuyo identificador es de Todos,

95
00:05:36,840 --> 00:05:40,870
y yo voy a poner la lista de cosas por hacer allí.

96
00:05:40,870 --> 00:05:47,240
Primero voy a aclarar que a causa, por ejemplo, había una vieja lista de cosas por hacer allí.

97
00:05:47,240 --> 00:05:49,560
Me estoy poniendo este elemento por ID nuevo,

98
00:05:49,560 --> 00:05:54,530
y estoy accediendo al código HTML interno de ese elemento,

99
00:05:54,530 --> 00:05:58,010
y yo voy a limpiar eso.

100
00:05:58,010 --> 00:06:05,510
Si dejamos este código como es, nos gustaría ver una nada en blanco allí,

101
00:06:05,510 --> 00:06:10,410
y ahora quiero empezar haciendo mi nueva lista de tareas.

102
00:06:10,410 --> 00:06:12,870
Estoy básicamente, va a acabar con mi lista de cosas por hacer.

103
00:06:12,870 --> 00:06:18,180
>> Ahora el interior HTML interno que Todos div está del todo claro,

104
00:06:18,180 --> 00:06:20,060
y ahora tengo que empezar a añadir a mi lista.

105
00:06:20,060 --> 00:06:23,890
La primera cosa que quiero añadir de nuevo es la etiqueta lista desordenada,

106
00:06:23,890 --> 00:06:33,890
lo que denota que, básicamente, este es el comienzo de una lista no ordenada.

107
00:06:33,890 --> 00:06:39,770
Ahora para todos los elementos en mi array Todos quiero imprimirlo dentro de ese HTML.

108
00:06:39,770 --> 00:06:43,710
Quiero agregar que en la parte inferior de la lista.

109
00:06:43,710 --> 00:06:49,040
Al igual que en C, puedo utilizar un bucle for, y voy a empezar por el principio de mi lista

110
00:06:49,040 --> 00:06:54,140
en el elemento 0, y me voy a ir hasta el final a la longitud de la lista.

111
00:06:54,140 --> 00:07:01,100
De hecho, podemos obtener la longitud de un array en JavaScript utilizando la propiedad length.

112
00:07:01,100 --> 00:07:03,420
Básicamente, voy a hacer algo muy similar en el interior de aquí

113
00:07:03,420 --> 00:07:05,600
para imprimir ese elemento.

114
00:07:05,600 --> 00:07:12,970
Puedo tener acceso de nuevo la div Todos, la propiedad HTML interno que,

115
00:07:12,970 --> 00:07:17,560
y yo voy a añadir en este nuevo elemento de la lista, y que va a estar rodeado de

116
00:07:17,560 --> 00:07:25,390
esta etiqueta li, y yo voy a concatenar con el operador +,

117
00:07:25,390 --> 00:07:28,040
y ese es el elemento i de mi Todos matriz,

118
00:07:28,040 --> 00:07:32,380
y luego me voy a cerrar esa etiqueta.

119
00:07:32,380 --> 00:07:36,240
Ahora para todos los elementos vamos a añadir una nueva entrada en la lista.

120
00:07:36,240 --> 00:07:48,700
Y entonces todo lo que realmente tenemos que hacer es cerrar esa etiqueta.

121
00:07:48,700 --> 00:07:52,820
Sólo tengo que cerrar esa desordenada tag lista.

122
00:07:52,820 --> 00:07:55,490
>> ¿Le da una idea de cómo funciona eso?

123
00:07:55,490 --> 00:07:57,700
Esto abre la lista completa.

124
00:07:57,700 --> 00:08:01,080
Esto añade elementos individuales de la lista de Todos a la lista,

125
00:08:01,080 --> 00:08:05,470
y después de que se cierra la lista completa, y este es mi función addTodo.

126
00:08:05,470 --> 00:08:09,590
Yo, básicamente, empezar por conseguir el TODO en el cuadro de texto.

127
00:08:09,590 --> 00:08:18,950
Añado que en la matriz de Todos, y luego volver a hacer la lista de cosas por hacer.

128
00:08:18,950 --> 00:08:21,520
Ahora puedo agregar elementos a la lista.

129
00:08:21,520 --> 00:08:24,620
Esto es muy emocionante, porque en tan sólo unas pocas líneas de código

130
00:08:24,620 --> 00:08:28,240
básicamente hemos hecho una lista de cosas por hacer, donde podemos añadir elementos.

131
00:08:28,240 --> 00:08:30,050
Grande.

132
00:08:30,050 --> 00:08:34,480
Eso es algo de una introducción básica a JavaScript.

133
00:08:34,480 --> 00:08:36,179
No se preocupe demasiado acerca de la sintaxis, por ahora,

134
00:08:36,179 --> 00:08:38,130
pero pensar en esto conceptualmente.

135
00:08:38,130 --> 00:08:40,539
Teníamos un poco de HTML.

136
00:08:40,539 --> 00:08:45,310
Tuvimos un cuadro de texto en la página que básicamente permiten a los usuarios introducir un elemento de tareas pendientes para añadir.

137
00:08:45,310 --> 00:08:49,210
Y luego utilizamos JavaScript para traer que tareas pendientes de ese cuadro de texto.

138
00:08:49,210 --> 00:08:52,830
Nos guardaron que dentro de una matriz de JavaScript, que es básicamente como

139
00:08:52,830 --> 00:08:56,010
nuestra representación programática de esa lista de cosas por hacer,

140
00:08:56,010 --> 00:08:59,060
y luego imprimí.

141
00:08:59,060 --> 00:09:02,690
Esta es todos.js.

142
00:09:02,690 --> 00:09:07,620
>> Se trata de una especie de fresco, pero ¿cómo podemos ir más lejos?

143
00:09:07,620 --> 00:09:11,350
Bueno, como pueden ver, esto no es como una completa lista de tareas pendientes.

144
00:09:11,350 --> 00:09:15,100
Por ejemplo, no puedo marcar cualquiera de estos elementos como incompleta,

145
00:09:15,100 --> 00:09:19,920
como si quisiera cambiar la prioridad de los elementos o eliminar elementos.

146
00:09:19,920 --> 00:09:23,150
Esto está bien, pero podemos ir más lejos.

147
00:09:23,150 --> 00:09:29,280
No voy a hablar mucho sobre la adición de características adicionales,

148
00:09:29,280 --> 00:09:32,800
pero podríamos tomar ese más allá.

149
00:09:32,800 --> 00:09:35,970
Vamos a hablar acerca de cómo agregar una característica más a esta lista de cosas por hacer,

150
00:09:35,970 --> 00:09:40,370
que se va a poder comprobar que un individuo tarea pendiente

151
00:09:40,370 --> 00:09:44,780
y tienen que ser tachado, así que básicamente diciendo que he hecho esto.

152
00:09:44,780 --> 00:09:50,240
Vamos a ver un poco de código que podría lograrlo.

153
00:09:50,240 --> 00:09:52,740
Note lo que he hecho en la parte superior es que he añadido

154
00:09:52,740 --> 00:09:57,620
un nuevo array global llamado completo.

155
00:09:57,620 --> 00:10:02,890
Básicamente estoy usando esto para almacenar tanto los elementos de la lista de tareas pendientes

156
00:10:02,890 --> 00:10:06,560
están completos o no.

157
00:10:06,560 --> 00:10:08,470
Esta es una manera de hacer esto.

158
00:10:08,470 --> 00:10:13,750
Si miro a la ejecución de este, en la pantalla,

159
00:10:13,750 --> 00:10:21,120
básicamente, si entro en un TODO y pulse el botón de activación

160
00:10:21,120 --> 00:10:25,040
cruza hacia fuera, por lo que cada elemento en esta lista tiene ya sea un completo

161
00:10:25,040 --> 00:10:31,050
o el estado incompleto, y estoy usando otra matriz para representar eso.

162
00:10:31,050 --> 00:10:33,730
>> Básicamente para cada tareas pendientes en esa Todos array

163
00:10:33,730 --> 00:10:37,110
hay un elemento de la matriz completa que indica básicamente

164
00:10:37,110 --> 00:10:39,060
si que es completa o no.

165
00:10:39,060 --> 00:10:41,640
He tenido que hacer cambios muy mínimos en este código,

166
00:10:41,640 --> 00:10:44,470
así que aquí está nuestra función addTodo.

167
00:10:44,470 --> 00:10:48,530
Tenga en cuenta que aquí me estoy empujando a la matriz,

168
00:10:48,530 --> 00:10:51,300
y estoy empujando un 0 a la gama completa,

169
00:10:51,300 --> 00:10:57,090
básicamente en paralelo con ese nuevo empuje del todo que decir

170
00:10:57,090 --> 00:11:00,430
Estoy agregar este artículo, y está unida a este valor,

171
00:11:00,430 --> 00:11:02,810
lo que significa que es incompleta.

172
00:11:02,810 --> 00:11:04,970
Y entonces me redibujar la lista de tareas pendientes.

173
00:11:04,970 --> 00:11:09,220
Ahora, noto que he añadido esta función drawTodoList.

174
00:11:09,220 --> 00:11:11,760
Esto toma mucho del código que teníamos antes,

175
00:11:11,760 --> 00:11:15,320
básicamente borra la caja y luego señala a la nueva lista de tareas pendientes.

176
00:11:15,320 --> 00:11:19,620
Pero se dio cuenta que dentro de este bucle for estamos haciendo un poco más ahora.

177
00:11:19,620 --> 00:11:25,000
Básicamente estamos comprobando si el elemento correspondiente a Todo ith aquí

178
00:11:25,000 --> 00:11:30,220
es completa, y estamos actuando de manera diferente en estas 2 circunstancias.

179
00:11:30,220 --> 00:11:32,790
Si está completo, estamos añadiendo esta etiqueta del,

180
00:11:32,790 --> 00:11:35,360
que es básicamente la manera de conseguir que la huelga a través del efecto

181
00:11:35,360 --> 00:11:38,190
tachando la lista de cosas por hacer si es completa,

182
00:11:38,190 --> 00:11:42,200
y si no es así, no vamos a incluirlo.

183
00:11:42,200 --> 00:11:45,030
Y para que tipo de se encarga de eso,

184
00:11:45,030 --> 00:11:49,140
>> y esa es una manera de lograr esto.

185
00:11:49,140 --> 00:11:53,420
Y luego darse cuenta cuando el usuario hace clic en uno de estos

186
00:11:53,420 --> 00:11:56,780
que alternar el estado de finalización de la misma.

187
00:11:56,780 --> 00:12:02,170
Cuando el usuario hace clic, vamos a invertir si ha sido completada o no,

188
00:12:02,170 --> 00:12:04,540
y luego vamos a volver a dibujarlo.

189
00:12:04,540 --> 00:12:06,190
Este tipo de obras.

190
00:12:06,190 --> 00:12:09,860
Tenemos las funciones que llevan a cabo sus propias tareas,

191
00:12:09,860 --> 00:12:11,730
y esto está bien.

192
00:12:11,730 --> 00:12:14,110
¿Hay algo que podemos hacer mejor en esto, sin embargo?

193
00:12:14,110 --> 00:12:18,700
Observe que tenemos estas 2 series mundiales.

194
00:12:18,700 --> 00:12:23,550
Si esto era C, y teníamos 2 arrays ese tipo de representados

195
00:12:23,550 --> 00:12:25,800
datos que fueron una especie de relacionados de alguna manera

196
00:12:25,800 --> 00:12:30,140
lo usaríamos en C de combinar estos 2 campos

197
00:12:30,140 --> 00:12:35,420
en algo que encapsula las dos piezas de información?

198
00:12:35,420 --> 00:12:37,600
¿Alguien quiere hacer una sugerencia?

199
00:12:37,600 --> 00:12:39,450
[Estudiante respuesta inaudible]

200
00:12:39,450 --> 00:12:42,340
>> Exactamente, así que podríamos utilizar algún tipo de estructura,

201
00:12:42,340 --> 00:12:44,960
y si piensas en, digamos, pset 3,

202
00:12:44,960 --> 00:12:47,350
Recuerdo que tuvimos diccionario, y luego tuvimos que si la palabra

203
00:12:47,350 --> 00:12:50,230
Fue en el diccionario, y toda esa información se elaboró

204
00:12:50,230 --> 00:12:52,420
dentro de alguna estructura de datos.

205
00:12:52,420 --> 00:12:56,390
Una de las cosas que puedo hacer con este código para evitar que estos 2 conjuntos diferentes

206
00:12:56,390 --> 00:13:01,760
para piezas similares de información es lo que puedo combinarlos en un objeto de JavaScript.

207
00:13:01,760 --> 00:13:07,150
Vamos a echar un vistazo a eso.

208
00:13:07,150 --> 00:13:11,740
Observe que sólo tengo una matriz en la cima ahora

209
00:13:11,740 --> 00:13:17,650
y lo que he hecho es-y esto es sólo la sintaxis de JavaScript para la clase de

210
00:13:17,650 --> 00:13:21,350
la creación de una versión literal de un objeto,

211
00:13:21,350 --> 00:13:24,670
y nota que hay 2 propiedades, por lo que tenemos el TODO,

212
00:13:24,670 --> 00:13:29,660
y está abierto, así como si es completa o incompleta.

213
00:13:29,660 --> 00:13:31,000
Este código es muy similar.

214
00:13:31,000 --> 00:13:35,310
Estamos usando los objetos JavaScript.

215
00:13:35,310 --> 00:13:38,600
Este tipo de cosas mejore.

216
00:13:38,600 --> 00:13:43,850
Como ahora, todos estos campos de información relacionada se mantienen juntos.

217
00:13:43,850 --> 00:13:46,410
Cuando vamos a imprimirlo, podemos acceder a los campos.

218
00:13:46,410 --> 00:13:49,060
>> Nótese cómo lo estamos haciendo de Todos [i]. Completa

219
00:13:49,060 --> 00:13:52,880
en lugar de revisar la matriz completa separada,

220
00:13:52,880 --> 00:13:56,560
y notamos cuando queremos obtener la cadena de tareas que estamos recibiendo la propiedad de tareas

221
00:13:56,560 --> 00:13:58,750
de que TODO, por lo que este tipo de tiene sentido porque

222
00:13:58,750 --> 00:14:01,660
cada elemento tiene estas propiedades intrínsecas al respecto.

223
00:14:01,660 --> 00:14:05,650
Tiene un TODO, y tiene ya sea completa o no.

224
00:14:05,650 --> 00:14:11,540
No hay muchos cambios no funcionalmente, acaba de agregar un poco más para el código.

225
00:14:11,540 --> 00:14:13,430
Se trata de una mejora en algunos frentes, ¿verdad?

226
00:14:13,430 --> 00:14:16,030
Me refiero a que un factor fuera el diseño un poco.

227
00:14:16,030 --> 00:14:20,350
Ahora tenemos objetos para encapsular básicamente estos datos.

228
00:14:20,350 --> 00:14:27,130
¿Hay algo más que podemos hacer de aquí en términos de JavaScript?

229
00:14:27,130 --> 00:14:31,810
Como aviso de que el código aquí

230
00:14:31,810 --> 00:14:34,760
para obtener el código HTML interno de un div

231
00:14:34,760 --> 00:14:40,520
es un poco, supongo, mucho tiempo.

232
00:14:40,520 --> 00:14:45,100
Hay document.getElementById ("todos"). InnerHTML.

233
00:14:45,100 --> 00:14:48,400
Una de las cosas que podríamos hacer para que este código se ven un poco más amigable

234
00:14:48,400 --> 00:14:51,450
para no tener que seguir desplazándose hacia la izquierda y derecha, arriba y abajo,

235
00:14:51,450 --> 00:14:58,480
es que podría utilizar una biblioteca como jQuery.

236
00:14:58,480 --> 00:15:02,710
>> Vamos a ver el Seminario 2,

237
00:15:02,710 --> 00:15:05,880
y este es el mismo código, pero se ha hecho con jQuery.

238
00:15:05,880 --> 00:15:08,790
Puede que no sea muy familiarizado con jQuery,

239
00:15:08,790 --> 00:15:11,510
pero sólo sé que jQuery es una especie de una biblioteca de JavaScript

240
00:15:11,510 --> 00:15:15,910
eso hace que sea más fácil hacer cosas como acceso a los distintos elementos del DOM.

241
00:15:15,910 --> 00:15:21,280
Aquí en vez de decir document.getElementById ("todos"). InnerHTML

242
00:15:21,280 --> 00:15:25,210
Puedo usar la forma más limpia tanto en jQuery,

243
00:15:25,210 --> 00:15:28,490
que es sólo para usar selectores.

244
00:15:28,490 --> 00:15:31,300
Como puede ver, este código se hizo un poco más limpio,

245
00:15:31,300 --> 00:15:35,770
muy similar funcionalmente, pero esa es la idea.

246
00:15:35,770 --> 00:15:37,980
Hemos visto un par de cosas hasta el momento,

247
00:15:37,980 --> 00:15:42,010
así que empezamos con la implementación de JavaScript sólo prima.

248
00:15:42,010 --> 00:15:45,370
Hemos añadido nuevas características y mostramos cómo podemos mejorar con

249
00:15:45,370 --> 00:15:49,090
justo lo que tenemos en JavaScript.

250
00:15:49,090 --> 00:15:53,300
>> ¿Alguien ve ninguna dificultad con este diseño?

251
00:15:53,300 --> 00:16:01,090
Es decir, supongo, o no necesariamente dificultades, pero vamos a decir

252
00:16:01,090 --> 00:16:04,830
no estábamos haciendo un proyecto de lista de cosas por hacer, y mañana nos decidimos

253
00:16:04,830 --> 00:16:10,320
hemos querido hacer una lista de compras o de un proyecto de lista de la compra.

254
00:16:10,320 --> 00:16:14,150
Muchas de estas características son muy similares.

255
00:16:14,150 --> 00:16:19,080
Muchas de las cosas que queremos salir de JavaScript son muy comunes,

256
00:16:19,080 --> 00:16:23,820
y esto subraya la necesidad de algún tipo de forma de

257
00:16:23,820 --> 00:16:25,670
hacer esto más fácil de hacer.

258
00:16:25,670 --> 00:16:30,400
Tuve que construir todo este acceso HTML, todo este acceso DOM,

259
00:16:30,400 --> 00:16:35,530
que voy a representar a la lista de tareas con este modelo.

260
00:16:35,530 --> 00:16:39,130
Y noto que soy responsable como el desarrollador de JavaScript

261
00:16:39,130 --> 00:16:42,890
para mantener el código HTML y JavaScript que tengo en sincronía.

262
00:16:42,890 --> 00:16:48,040
Nada de lo hecho automáticamente que la representación JavaScript

263
00:16:48,040 --> 00:16:51,590
o la lista de tareas pendientes de ellos acaban fuera de HTML.

264
00:16:51,590 --> 00:16:54,000
Nada hace cumplir que a excepción de mí.

265
00:16:54,000 --> 00:16:56,880
Tuve que escribir el sorteo de tareas función de lista.

266
00:16:56,880 --> 00:17:01,650
Y eso no puede ser, quiero decir, que es razonable hacerlo,

267
00:17:01,650 --> 00:17:03,670
pero a veces puede ser tedioso.

268
00:17:03,670 --> 00:17:08,190
Si usted tiene un proyecto más amplio, que podría ser difícil.

269
00:17:08,190 --> 00:17:10,720
>> Marcos, uno de los propósitos de marcos

270
00:17:10,720 --> 00:17:14,060
es simplificar el proceso y tipo de factor de salida

271
00:17:14,060 --> 00:17:16,950
estos common-Supongo que se podría decir que los patrones de diseño

272
00:17:16,950 --> 00:17:20,700
que las personas suelen tener algún tipo de forma de representar los datos,

273
00:17:20,700 --> 00:17:25,599
ya sea una lista de amigos, si esa es la información del mapa

274
00:17:25,599 --> 00:17:27,280
o algo así, o una lista de tareas pendientes.

275
00:17:27,280 --> 00:17:30,660
Algunas personas tienen por lo general una forma de representación de la información,

276
00:17:30,660 --> 00:17:33,650
y por lo general tienen que mantener ese tipo de información en sincronía

277
00:17:33,650 --> 00:17:36,520
entre lo que el usuario ve en algún tipo de vista,

278
00:17:36,520 --> 00:17:39,850
hablando en términos de como el controlador de vista de modelo que viste en la conferencia,

279
00:17:39,850 --> 00:17:45,400
y entonces el modelo, que en este caso es esta matriz de JavaScript.

280
00:17:45,400 --> 00:17:49,020
Marcos nos dan una manera de resolver ese problema.

281
00:17:49,020 --> 00:17:53,080
Ahora echemos un vistazo a la aplicación de esta lista de tareas

282
00:17:53,080 --> 00:18:02,360
en un marco llamado angularjs.

283
00:18:02,360 --> 00:18:04,650
Esto es todo. Observe que encaja en una diapositiva.

284
00:18:04,650 --> 00:18:07,330
Yo no tengo que desplazarse a la izquierda ya la derecha.

285
00:18:07,330 --> 00:18:10,460
Esto probablemente no es una gran razón para recomendar el uso de un marco,

286
00:18:10,460 --> 00:18:20,120
pero note que estoy siempre acceso a los elementos HTML individuales aquí?

287
00:18:20,120 --> 00:18:22,400
Estoy cada vez va en el DOM?

288
00:18:22,400 --> 00:18:26,120
¿Ve usted alguna document.getElementById o algo así?

289
00:18:26,120 --> 00:18:29,870
No, eso fue.

290
00:18:29,870 --> 00:18:35,590
>> Angular nos ayuda a mantener el DOM y JavaScript nuestra representación de algo

291
00:18:35,590 --> 00:18:40,430
tipo de sincronizados, por lo que si no está en el archivo js,

292
00:18:40,430 --> 00:18:46,790
si no hay forma de programación para llegar a todo ese contenido HTML

293
00:18:46,790 --> 00:18:51,800
Del JavaScript cómo estamos teniendo esto en sincronización?

294
00:18:51,800 --> 00:18:58,160
Si no está en el archivo js., Tiene que estar en HTML, ¿verdad?

295
00:18:58,160 --> 00:19:01,910
Esta es la nueva versión del archivo HTML,

296
00:19:01,910 --> 00:19:04,660
y notamos que hemos añadido mucho aquí.

297
00:19:04,660 --> 00:19:11,110
Observe que hay estos nuevos atributos que dicen ng-clic y ng-repeat.

298
00:19:11,110 --> 00:19:15,650
El enfoque de angular a la solución de este problema de las dificultades en el diseño

299
00:19:15,650 --> 00:19:19,130
es hacer básicamente HTML mucho más potente.

300
00:19:19,130 --> 00:19:24,420
Angular es una forma de permitir que usted haga HTML algo más expresivo.

301
00:19:24,420 --> 00:19:30,520
Por ejemplo, yo puedo decir que me voy a atar o enlazar este cuadro de texto

302
00:19:30,520 --> 00:19:35,080
a una variable dentro de mi código JavaScript Angular.

303
00:19:35,080 --> 00:19:37,030
Este ng-model hace precisamente eso.

304
00:19:37,030 --> 00:19:41,550
Que básicamente dice que el elemento dentro de esta caja de texto,

305
00:19:41,550 --> 00:19:45,000
simplemente asociar eso con el new_todo_description variables

306
00:19:45,000 --> 00:19:47,870
dentro del código JavaScript.

307
00:19:47,870 --> 00:19:51,600
Eso es muy poderoso porque no me tengo que ir expresamente a

308
00:19:51,600 --> 00:19:53,310
el DOM para obtener esa información.

309
00:19:53,310 --> 00:19:56,250
No tengo que decir document.getElementById.

310
00:19:56,250 --> 00:19:58,750
Yo no tengo que usar jQueries como acceso DOM.

311
00:19:58,750 --> 00:20:03,280
Puedo asociarlo a una variable, y luego cuando cambio la variable

312
00:20:03,280 --> 00:20:07,400
dentro de JavaScript se trata de mantenerse en sintonía con el código HTML,

313
00:20:07,400 --> 00:20:11,640
lo que simplifica el proceso de tener que ir y venir entre los dos.

314
00:20:11,640 --> 00:20:18,260
¿Eso tiene sentido?

315
00:20:18,260 --> 00:20:22,060
>> Y fíjense que no hay código de acceso HTML.

316
00:20:22,060 --> 00:20:27,760
Hemos conseguido hacer HTML más potente,

317
00:20:27,760 --> 00:20:32,070
y ahora, por ejemplo, podemos hacer cosas como esta,

318
00:20:32,070 --> 00:20:38,610
como cuando hace clic en este, llamar a esta función en el ámbito de todos.js,

319
00:20:38,610 --> 00:20:43,410
y podríamos hacer eso antes, pero hay otras cosas, como este ng-modelo,

320
00:20:43,410 --> 00:20:47,020
y observar este ng-repeat.

321
00:20:47,020 --> 00:20:51,520
¿Qué piensa usted que esto hace?

322
00:20:51,520 --> 00:20:54,390
Aquí está nuestra lista desordenada de antes.

323
00:20:54,390 --> 00:20:56,470
Tenemos las etiquetas ul,

324
00:20:56,470 --> 00:21:03,710
pero siento que he renderizado esa lista dentro del código JavaScript?

325
00:21:03,710 --> 00:21:09,280
No estoy siempre haciendo explícita esa lista.

326
00:21:09,280 --> 00:21:11,580
¿Cómo funciona esto?

327
00:21:11,580 --> 00:21:16,410
Bueno, la forma angular logra esto es lo que se llama un repetidor.

328
00:21:16,410 --> 00:21:22,760
Básicamente dice que quiero imprimir este HTML

329
00:21:22,760 --> 00:21:26,240
para todas las tareas pendientes en el interior de mi Todos matriz.

330
00:21:26,240 --> 00:21:31,850
Dentro de todos.jr hay una variedad de Todos aquí,

331
00:21:31,850 --> 00:21:37,910
y esto le dirá ir angular a través de la matriz, y por cada elemento que se ve

332
00:21:37,910 --> 00:21:41,390
Quiero imprimir este HTML.

333
00:21:41,390 --> 00:21:44,620
Esto es un poco impresionante, ya que sólo puede hacer esto

334
00:21:44,620 --> 00:21:47,760
sin tener que escribir un bucle,

335
00:21:47,760 --> 00:21:52,250
que para obtener una lista de tareas que tenía sólo 30 líneas de código

336
00:21:52,250 --> 00:21:54,700
puede no ser lo más beneficioso,

337
00:21:54,700 --> 00:22:01,240
pero si usted tiene un proyecto grande, esto podría ser muy conveniente.

338
00:22:01,240 --> 00:22:06,100
>> Esta es una solución a este problema, haciendo más potente HTML,

339
00:22:06,100 --> 00:22:10,820
y que nos permite seguir con JavaScript y HTML en sincronía.

340
00:22:10,820 --> 00:22:13,220
Hay otras maneras posibles para resolver este problema,

341
00:22:13,220 --> 00:22:15,320
y no cada marco lo hace.

342
00:22:15,320 --> 00:22:17,720
No todo marco trabaja en esta línea.

343
00:22:17,720 --> 00:22:19,490
Algunos marcos tienen diferentes enfoques,

344
00:22:19,490 --> 00:22:23,310
y es posible que usted goce de codificación en un marco sobre el otro.

345
00:22:23,310 --> 00:22:26,160
Echemos un vistazo a uno más.

346
00:22:26,160 --> 00:22:30,060
Esta es la lista de cosas por hacer codificado en un marco llamado Backbone.

347
00:22:30,060 --> 00:22:33,250
Voy a pasar por esto rápidamente.

348
00:22:33,250 --> 00:22:38,300
Voy a empezar con el código HTML antes de ir allí.

349
00:22:38,300 --> 00:22:40,290
Un segundo.

350
00:22:40,290 --> 00:22:43,950
Comenzando con el HTML, como se observa, el HTML es muy similar

351
00:22:43,950 --> 00:22:50,000
a lo que era antes, así que no hay mucho de nuevo en ese frente.

352
00:22:50,000 --> 00:22:55,410
Pero nuestra js es un poco diferente.

353
00:22:55,410 --> 00:23:00,360
Backbone tipo de tiene esta idea, o se basa en la idea

354
00:23:00,360 --> 00:23:04,750
que mucho de lo que hacemos con, por ejemplo, los proyectos de JavaScript

355
00:23:04,750 --> 00:23:09,110
es pensar en modelos y colecciones de estos modelos.

356
00:23:09,110 --> 00:23:12,510
Esto podría ser, por ejemplo, una foto y colecciones de fotografías,

357
00:23:12,510 --> 00:23:16,230
o la idea de un amigo y colecciones de amigos.

358
00:23:16,230 --> 00:23:20,700
Y a menudo, cuando estamos programando aplicaciones JavaScript

359
00:23:20,700 --> 00:23:25,340
vamos a resolver de representar la idea de tener un grupo de amigos

360
00:23:25,340 --> 00:23:29,500
de alguna manera en JavaScript, y Backbone nos da esta capa

361
00:23:29,500 --> 00:23:33,040
en la parte superior de las matrices y los objetos existentes de JavaScript

362
00:23:33,040 --> 00:23:38,300
para hacer las cosas más poderosas con que más fácilmente.

363
00:23:38,300 --> 00:23:41,870
>> Aquí he definido un modelo para-do,

364
00:23:41,870 --> 00:23:44,630
y usted no tiene que preocuparse demasiado acerca de la sintaxis,

365
00:23:44,630 --> 00:23:48,730
pero se dio cuenta de que lo que es una de las propiedades de esta?

366
00:23:48,730 --> 00:23:53,190
Cuenta con un campo predeterminado.

367
00:23:53,190 --> 00:23:56,640
Backbone me permite especificar ya del palo

368
00:23:56,640 --> 00:24:00,190
todo nuevo a hacer eso creo que va a tener estos valores predeterminados.

369
00:24:00,190 --> 00:24:04,100
Ahora puedo personalizar esto, pero ser capaz de especificar los valores predeterminados

370
00:24:04,100 --> 00:24:07,220
es agradable, y es un poco conveniente porque esto no es algo que es como

371
00:24:07,220 --> 00:24:10,430
inherente a JavaScript, y ahora no tengo que explícitamente

372
00:24:10,430 --> 00:24:12,430
Todos dicen que los están incompletos.

373
00:24:12,430 --> 00:24:19,190
Lo que puedo decir de buenas a primeras que Todos van a ser marcados como incompleta.

374
00:24:19,190 --> 00:24:21,300
Nótese entonces, ¿qué es esto?

375
00:24:21,300 --> 00:24:25,520
Ahora tengo una lista de cosas por hacer, y eso es una colección.

376
00:24:25,520 --> 00:24:30,960
Observe el campo asociado con el modelo dice del todo.

377
00:24:30,960 --> 00:24:33,390
Esta es mi manera de decir que la columna vertebral

378
00:24:33,390 --> 00:24:37,350
Yo voy a estar pensando en una colección de estos Todos individuales.

379
00:24:37,350 --> 00:24:42,140
Esta es básicamente la estructura del modelo para mi programa.

380
00:24:42,140 --> 00:24:44,980
Aquí tengo esta idea de una colección,

381
00:24:44,980 --> 00:24:48,960
y, básicamente, los elementos contenidos en esa colección de todos van a ser estas de Todos,

382
00:24:48,960 --> 00:24:51,910
y que es muy natural en este sentido

383
00:24:51,910 --> 00:24:59,890
porque yo sí tengo Todos, y los tengo en una colección.

384
00:24:59,890 --> 00:25:02,940
>> Vamos a ver un poco más de esto.

385
00:25:02,940 --> 00:25:05,900
Aquí está una vista Backbone.

386
00:25:05,900 --> 00:25:08,890
La otra cosa que Backbone dice es que

387
00:25:08,890 --> 00:25:14,660
muchos de los modelos que usted está pensando, o incluso colecciones

388
00:25:14,660 --> 00:25:19,150
van a tener que tener alguna manera de que se muestra.

389
00:25:19,150 --> 00:25:21,900
Tenemos que hacer que la lista de cosas por hacer,

390
00:25:21,900 --> 00:25:25,460
y ¿no sería bueno si pudiéramos proveer para cada modelo

391
00:25:25,460 --> 00:25:28,390
o asociar a cada modelo de este punto de vista

392
00:25:28,390 --> 00:25:34,020
que nos permite Supongo que conectar los dos juntos?

393
00:25:34,020 --> 00:25:38,320
Mientras que antes teníamos que usar un bucle que se ejecute a través de

394
00:25:38,320 --> 00:25:41,130
todas las tareas pendientes en la lista y luego imprimirla aquí

395
00:25:41,130 --> 00:25:44,650
que básicamente podemos conectarlo con este modelo.

396
00:25:44,650 --> 00:25:47,550
Esta es una vista de tareas pendientes.

397
00:25:47,550 --> 00:25:50,550
Esto se asocia con el TODO hemos constatado antes.

398
00:25:50,550 --> 00:25:54,940
Ahora cada TODO es mostrable o renderizable

399
00:25:54,940 --> 00:25:56,960
por este punto de vista de tareas pendientes.

400
00:25:56,960 --> 00:25:59,440
Observe algunos de los campos.

401
00:25:59,440 --> 00:26:05,880
¿Qué crees que es esto tagName, tagName: li?

402
00:26:05,880 --> 00:26:09,790
Recuerde que desde antes, cuando queríamos hacer un TODO

403
00:26:09,790 --> 00:26:16,700
habría que vincular explícitamente Todos nuestros con esta etiqueta li.

404
00:26:16,700 --> 00:26:21,080
Ahora estamos diciendo que cuando esto del todo se va a vivir

405
00:26:21,080 --> 00:26:25,250
va a estar dentro de una etiqueta li.

406
00:26:25,250 --> 00:26:31,440
Y ahora también estamos asociando eventos con nuestros Todos.

407
00:26:31,440 --> 00:26:34,320
>> Cada TODO tiene este evento.

408
00:26:34,320 --> 00:26:38,480
Si hace clic en más o menos el botón de cambio, eso es lo que estoy diciendo no,

409
00:26:38,480 --> 00:26:43,080
entonces básicamente marcar el del todo como lo contrario de lo que era antes

410
00:26:43,080 --> 00:26:45,890
y luego volver a hacer la solicitud.

411
00:26:45,890 --> 00:26:47,810
Esto es un poco similar al código anterior.

412
00:26:47,810 --> 00:26:50,730
Recuerde que cuando marcamos como bien lo contrario o-

413
00:26:50,730 --> 00:26:52,410
y entonces vuelven a representar él.

414
00:26:52,410 --> 00:26:57,750
Pero note ahora este evento que solía ser algo que estaba en el código HTML.

415
00:26:57,750 --> 00:26:59,640
Estaba sentado allí.

416
00:26:59,640 --> 00:27:01,410
El botón tenía un clic.

417
00:27:01,410 --> 00:27:05,310
Al hacer clic en el botón, es como que hace las cosas a

418
00:27:05,310 --> 00:27:07,210
estableció que TODO sea incompleta.

419
00:27:07,210 --> 00:27:11,180
Aquí nos hemos asociado el evento de hacer clic en ese botón de activación

420
00:27:11,180 --> 00:27:15,830
e invertir ya sea dentro o fuera de esta opinión.

421
00:27:15,830 --> 00:27:20,480
>> Esta es una buena manera de crear este evento para que sea muy estrechamente unidos

422
00:27:20,480 --> 00:27:26,980
este punto de vista, por lo que cuenta de esto una vez más.

423
00:27:26,980 --> 00:27:31,050
Tengo este método render, y no tenemos que pasar por los detalles.

424
00:27:31,050 --> 00:27:33,650
Es algo similar a lo que teníamos antes,

425
00:27:33,650 --> 00:27:36,070
pero noto que no estoy recorriendo nada.

426
00:27:36,070 --> 00:27:40,700
No voy a imprimir esa etiqueta ul que es una especie de decir que voy a imprimir todos los elementos.

427
00:27:40,700 --> 00:27:46,610
Estoy proporcionando la funcionalidad para la prestación de este elemento de tarea.

428
00:27:46,610 --> 00:27:49,400
Este es un concepto muy poderoso porque en el fondo

429
00:27:49,400 --> 00:27:53,600
nuestra lista de tareas consiste en todas esas Todos, y si podemos especificar básicamente

430
00:27:53,600 --> 00:27:56,890
la manera de hacer que uno de los Todos

431
00:27:56,890 --> 00:28:04,230
entonces podemos tener nuestra poderosa red troncal per se rinda todo el Todos

432
00:28:04,230 --> 00:28:07,760
llamando al método render en Todos los individuales.

433
00:28:07,760 --> 00:28:14,180
Este es un concepto que es útil aquí.

434
00:28:14,180 --> 00:28:18,160
Ahora, una buena pregunta es cómo se esta aplicación está poniendo juntos?

435
00:28:18,160 --> 00:28:21,200
Debido a que tenemos la capacidad de hacer un TODO,

436
00:28:21,200 --> 00:28:23,860
pero ¿cómo hacemos para que la idea de múltiples Todos?

437
00:28:23,860 --> 00:28:25,100
>> Vamos a echar un vistazo a eso.

438
00:28:25,100 --> 00:28:27,100
Esta es la última parte.

439
00:28:27,100 --> 00:28:29,740
Observe que tenemos una vista de la lista de cosas por hacer aquí,

440
00:28:29,740 --> 00:28:34,440
y cuenta también es un punto de vista.

441
00:28:34,440 --> 00:28:36,970
Y para ir más de un par de cosas,

442
00:28:36,970 --> 00:28:45,280
este método initialize será llamado cuando creamos primero esta lista de cosas por hacer.

443
00:28:45,280 --> 00:28:52,630
Como se puede ver, es como la creación de la lista de tareas pendientes y asociarlo con esta opinión.

444
00:28:52,630 --> 00:28:57,860
Y luego he añadido las funciones aquí, así que básicamente cuando se agrega un elemento-

445
00:28:57,860 --> 00:29:01,440
esto es similar al método addItem vimos antes-

446
00:29:01,440 --> 00:29:07,430
Voy a crear un objeto nuevo del todo, y note realmente estoy llamando

447
00:29:07,430 --> 00:29:13,080
este nuevo método del todo, por lo que este es proporcionado por Backbone,

448
00:29:13,080 --> 00:29:16,010
y puedo pasar mis propiedades aquí.

449
00:29:16,010 --> 00:29:23,710
Y ahora cada TODO que creo con esto conseguir que la funcionalidad que hemos visto antes.

450
00:29:23,710 --> 00:29:28,140
Note que estoy limpiando el cuadro de texto antes de un pequeño pequeño detalle-

451
00:29:28,140 --> 00:29:32,900
y estoy añadiendo esta colección.

452
00:29:32,900 --> 00:29:37,630
>> Esto casi parece raro porque antes sólo teníamos que hacer eso todos.push,

453
00:29:37,630 --> 00:29:43,310
y luego terminamos, y esto puede parecer más complicado para este proyecto en particular,

454
00:29:43,310 --> 00:29:46,980
y es posible que Backbone o incluso angular o cualquier otro marco

455
00:29:46,980 --> 00:29:50,790
no se adapta a su proyecto particular, pero creo que es importante pensar en

456
00:29:50,790 --> 00:29:54,100
lo que esto significa en una escala más grande para proyectos de mayor envergadura,

457
00:29:54,100 --> 00:29:56,610
porque si tuviéramos un proyecto más amplio en el que representábamos

458
00:29:56,610 --> 00:30:00,860
alguna colección realmente complejo, algo más profundo que una simple lista de cosas por hacer,

459
00:30:00,860 --> 00:30:04,490
digamos que una lista de amigos o algo así, esto podría ser útil

460
00:30:04,490 --> 00:30:09,620
porque podríamos organizar nuestro código de una manera muy conveniente,

461
00:30:09,620 --> 00:30:12,550
de una manera que haría más fácil para alguien más

462
00:30:12,550 --> 00:30:16,820
que quería recoger a un proyecto para construir.

463
00:30:16,820 --> 00:30:21,450
Se puede ver que esto proporciona una gran cantidad de estructura.

464
00:30:21,450 --> 00:30:26,580
Y luego te llamo hacer en este addItem.

465
00:30:26,580 --> 00:30:31,050
Render, como se puede ver, y usted no tiene que aprovechar esta sintaxis completa,

466
00:30:31,050 --> 00:30:37,790
pero en el fondo de cada modelo que va a llamar al método render individual.

467
00:30:37,790 --> 00:30:41,500
Eso es una especie de dónde viene.

468
00:30:41,500 --> 00:30:44,140
Vamos a especificar cómo representar los Todos individuales,

469
00:30:44,140 --> 00:30:47,310
y luego vamos a pegarlas en su conjunto.

470
00:30:47,310 --> 00:30:49,810
Sin embargo, esto proporciona una forma de abstracción,

471
00:30:49,810 --> 00:30:55,470
porque podría cambiar la forma en que decido hacer de Todos individuales,

472
00:30:55,470 --> 00:30:57,940
y yo no tendría que cambiar alguna de este código.

473
00:30:57,940 --> 00:31:00,700
Eso es una especie de fresco.

474
00:31:00,700 --> 00:31:08,540
>> ¿Alguien tiene alguna pregunta acerca de los marcos de JavaScript?

475
00:31:08,540 --> 00:31:14,310
[Pregunta inaudible Estudiante]

476
00:31:14,310 --> 00:31:16,050
Sí, claro, eso es una gran pregunta.

477
00:31:16,050 --> 00:31:19,080
La pregunta era ¿cómo me incluyo los marcos?

478
00:31:19,080 --> 00:31:22,970
La mayoría de los frameworks de JavaScript son básicamente js

479
00:31:22,970 --> 00:31:25,740
que se pueden incluir en la parte superior de su código.

480
00:31:25,740 --> 00:31:29,830
Observe que en la parte de cabeza de mi HTML tengo todas estas etiquetas de script,

481
00:31:29,830 --> 00:31:34,250
y la etiqueta de final de la escritura es el código que hemos escrito.

482
00:31:34,250 --> 00:31:38,820
Y entonces los códigos de marco 3 son también etiquetas de script.

483
00:31:38,820 --> 00:31:42,110
Estoy inclusión de lo que se llama un CDN,

484
00:31:42,110 --> 00:31:46,200
que me permite entiendo de otra persona en este momento

485
00:31:46,200 --> 00:31:57,930
pero cada marco tiene esta-se puede casi encontrar el contenido

486
00:31:57,930 --> 00:32:03,540
para una biblioteca de JavaScript en particular disponible en algunos CDN o algo así,

487
00:32:03,540 --> 00:32:05,570
y entonces usted puede incluir las siguientes etiquetas de script.

488
00:32:05,570 --> 00:32:07,600
¿Eso tiene sentido?

489
00:32:07,600 --> 00:32:09,500
Genial.

490
00:32:09,500 --> 00:32:11,730
>> Esos son 2 enfoques diferentes.

491
00:32:11,730 --> 00:32:14,640
Esos no son los únicos enfoques para resolver este problema.

492
00:32:14,640 --> 00:32:17,080
Hay muchas cosas diferentes que

493
00:32:17,080 --> 00:32:19,490
alguien podría hacer, y hay muchos marcos por ahí.

494
00:32:19,490 --> 00:32:23,300
Angulares y Backbone no cuentan toda la historia.

495
00:32:23,300 --> 00:32:26,370
Buena suerte con sus proyectos finales, y muchas gracias.

496
00:32:31,960 --> 00:32:35,000
[CS50.TV]