[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.64,0:00:03.88,Default,,0000,0000,0000,,Tengo esta página web con una imagen de "Oh noes",
Dialogue: 0,0:00:03.88,0:00:07.86,Default,,0000,0000,0000,,que está anunciando que el mundo se va a terminar pronto,
Dialogue: 0,0:00:07.86,0:00:10.47,Default,,0000,0000,0000,,específicamente en 500 segundos.
Dialogue: 0,0:00:10.47,0:00:13.36,Default,,0000,0000,0000,,Quiero hacer que esta página web sea más útil,
Dialogue: 0,0:00:13.36,0:00:16.93,Default,,0000,0000,0000,,cambiando este número a una cuenta regresiva en vivo,
Dialogue: 0,0:00:16.93,0:00:20.78,Default,,0000,0000,0000,,de manera que los visitantes puedan ver exactamente cuánto tiempo les queda.
Dialogue: 0,0:00:20.78,0:00:23.93,Default,,0000,0000,0000,,Ahora, cuando animamos una parte de una página web,
Dialogue: 0,0:00:23.93,0:00:26.71,Default,,0000,0000,0000,,la estrategia es encontrar en ella algún elemento,
Dialogue: 0,0:00:26.71,0:00:29.30,Default,,0000,0000,0000,,luego cambiar algo de ese elemento,
Dialogue: 0,0:00:29.30,0:00:32.78,Default,,0000,0000,0000,,y hacer eso un cierto número de veces por segundo.
Dialogue: 0,0:00:32.78,0:00:37.69,Default,,0000,0000,0000,,Así que para el primer paso, voy a encontrar el "countdown" por "Id". (La cuenta regresiva).
Dialogue: 0,0:00:37.69,0:00:39.70,Default,,0000,0000,0000,,Sencillo.
Dialogue: 0,0:00:39.70,0:00:47.38,Default,,0000,0000,0000,,'var countdown = document.getElementById("countdown");'
Dialogue: 0,0:00:47.54,0:00:51.61,Default,,0000,0000,0000,,En el segundo paso, voy a escribir una función que haga un conteo regresivo.
Dialogue: 0,0:00:51.61,0:00:54.59,Default,,0000,0000,0000,,'var countItDown = funtion() {'...
Dialogue: 0,0:00:54.59,0:00:56.86,Default,,0000,0000,0000,,Y lo que vamos a hacer...
Dialogue: 0,0:00:56.86,0:01:01.22,Default,,0000,0000,0000,,Quiero definir el "textContent", y lo quiero definir como
Dialogue: 0,0:01:01.22,0:01:03.76,Default,,0000,0000,0000,,el número previo menos uno.
Dialogue: 0,0:01:03.76,0:01:06.80,Default,,0000,0000,0000,,Y el "textContent" en realidad es una cadena de caracteres,
Dialogue: 0,0:01:06.80,0:01:09.95,Default,,0000,0000,0000,,así que lo tenemos que cambiar a un número.
Dialogue: 0,0:01:09.95,0:01:12.85,Default,,0000,0000,0000,,Podemos hacer eso usando "parsefloat()".
Dialogue: 0,0:01:12.85,0:01:15.75,Default,,0000,0000,0000,,Y luego le podemos restar uno.
Dialogue: 0,0:01:15.75,0:01:21.54,Default,,0000,0000,0000,,Ok, finalmente, queremos llamar esta función en un intervalo,
Dialogue: 0,0:01:21.54,0:01:25.33,Default,,0000,0000,0000,,lo que significa: un cierto número de veces por segundo.
Dialogue: 0,0:01:25.33,0:01:30.42,Default,,0000,0000,0000,,Y podemos hacer eso usando "window.setInterval()".
Dialogue: 0,0:01:30.42,0:01:33.69,Default,,0000,0000,0000,,Y esta función tiene dos argumentos:
Dialogue: 0,0:01:33.69,0:01:38.10,Default,,0000,0000,0000,,la función "callback" y el número de milisegundos que tiene que esperar
Dialogue: 0,0:01:38.10,0:01:40.88,Default,,0000,0000,0000,,antes de que la función se llame otra vez.
Dialogue: 0,0:01:40.88,0:01:43.37,Default,,0000,0000,0000,,Podemos especificar la función de tipo "callback"
Dialogue: 0,0:01:43.37,0:01:46.81,Default,,0000,0000,0000,,de la misma manera que lo hicimos con los detectores de eventos: por nombre.
Dialogue: 0,0:01:46.81,0:01:49.64,Default,,0000,0000,0000,,Y luego... en realidad ahora está corriendo muy rápido,
Dialogue: 0,0:01:49.64,0:01:51.83,Default,,0000,0000,0000,,porque no le hemos especificado el segundo argumento,
Dialogue: 0,0:01:51.83,0:01:55.25,Default,,0000,0000,0000,,así que para eso, queremos que sea un cierto número de milisegundos,
Dialogue: 0,0:01:55.25,0:01:58.52,Default,,0000,0000,0000,,y queremos que se llame una vez por segundo, así que vamos a escribir: 1000,
Dialogue: 0,0:01:58.52,0:02:01.56,Default,,0000,0000,0000,,porque hay 1000 milisegundos en un segundo.
Dialogue: 0,0:02:01.56,0:02:05.22,Default,,0000,0000,0000,,Aquí vamos, ahora está contando una vez por segundo.
Dialogue: 0,0:02:05.22,0:02:10.24,Default,,0000,0000,0000,,¡Así que será mejor que aprendas lo más que puedas en los próximos 490 segundos!
Dialogue: 0,0:02:10.24,0:02:15.04,Default,,0000,0000,0000,,Hay una función más de "window" que usamos algunas veces en lugar de "setInterval",
Dialogue: 0,0:02:15.04,0:02:17.23,Default,,0000,0000,0000,,y es "setTimeout".
Dialogue: 0,0:02:17.23,0:02:21.78,Default,,0000,0000,0000,,Y sólo la voy cambiar aquí, a ver si puedes ver la diferencia.
Dialogue: 0,0:02:21.78,0:02:23.68,Default,,0000,0000,0000,,Tenemos que esperar un segundo.
Dialogue: 0,0:02:23.68,0:02:28.30,Default,,0000,0000,0000,,Ok, ahora probablemente puedas ver que cuando usamos "setTimeout",
Dialogue: 0,0:02:28.30,0:02:33.88,Default,,0000,0000,0000,,el navegador sólo llama la función una vez, y no repetidamente.
Dialogue: 0,0:02:33.88,0:02:38.70,Default,,0000,0000,0000,,Esto no es tan útil cuando estamos haciendo animaciones.
Dialogue: 0,0:02:38.70,0:02:41.73,Default,,0000,0000,0000,,Pero puede ser muy útil en otros casos,
Dialogue: 0,0:02:41.73,0:02:45.87,Default,,0000,0000,0000,,como cuando mostramos una bandera de advertencia, y luego la queremos
Dialogue: 0,0:02:45.87,0:02:48.09,Default,,0000,0000,0000,,ocultar después de 10 segundos.
Dialogue: 0,0:02:48.09,0:02:52.89,Default,,0000,0000,0000,,Así que déjenme regresar esto a "setInterval".
Dialogue: 0,0:02:52.89,0:02:56.51,Default,,0000,0000,0000,,Ahora, cuando estamos probando animaciones como ésta,
Dialogue: 0,0:02:56.51,0:03:00.41,Default,,0000,0000,0000,,en realidad, deberíamos ver cómo funciona en todos los puntos de la animación,
Dialogue: 0,0:03:00.41,0:03:02.46,Default,,0000,0000,0000,,como cuando llega a cero.
Dialogue: 0,0:03:02.46,0:03:05.26,Default,,0000,0000,0000,,Bueno, va a tomar mucho tiempo para llegar a cero,
Dialogue: 0,0:03:05.26,0:03:07.21,Default,,0000,0000,0000,,y vas a estar muy aburrido, así que
Dialogue: 0,0:03:07.21,0:03:10.58,Default,,0000,0000,0000,,vamos a cambiar el dato inicial a 5,
Dialogue: 0,0:03:10.58,0:03:12.54,Default,,0000,0000,0000,,y ver qué pasa.
Dialogue: 0,0:03:12.54,0:03:16.73,Default,,0000,0000,0000,,Cuatro, tres, dos, uno, cero...
Dialogue: 0,0:03:16.73,0:03:19.29,Default,,0000,0000,0000,,uno negativo, dos negativo.
Dialogue: 0,0:03:19.29,0:03:21.88,Default,,0000,0000,0000,,Ok, ahora se ve un poco raro.
Dialogue: 0,0:03:21.88,0:03:26.29,Default,,0000,0000,0000,,Cuando el mundo se acaba, simplemente debería hacer ¡Kaboom! y dejar de contar.
Dialogue: 0,0:03:26.29,0:03:30.11,Default,,0000,0000,0000,,Así que lo que queremos hacer en realidad, es detener esta animación,
Dialogue: 0,0:03:30.11,0:03:32.73,Default,,0000,0000,0000,,una vez que llegue a cero.
Dialogue: 0,0:03:32.73,0:03:36.32,Default,,0000,0000,0000,,Y podemos hacer eso usando una condición "if" dentro de la función.
Dialogue: 0,0:03:36.32,0:03:42.23,Default,,0000,0000,0000,,Así que déjenme empezar por guardar el segundo actual en una variable,
Dialogue: 0,0:03:42.23,0:03:44.52,Default,,0000,0000,0000,,porque lo vamos a usar algunas veces.
Dialogue: 0,0:03:44.52,0:03:47.51,Default,,0000,0000,0000,,Así que voy a copiar esto y ponerlo aquí,
Dialogue: 0,0:03:47.51,0:03:51.27,Default,,0000,0000,0000,,y reemplazar esto con "currentTime".
Dialogue: 0,0:03:51.27,0:03:55.56,Default,,0000,0000,0000,,Ahora lo que puedo hacer es poner una condición "if"
Dialogue: 0,0:03:55.56,0:04:01.10,Default,,0000,0000,0000,,que nos asegure que sólo actualizará el texto si "currentTime" es mayor que cero.
Dialogue: 0,0:04:01.10,0:04:04.94,Default,,0000,0000,0000,,Que es en realidad, cuando queremos que reste uno.
Dialogue: 0,0:04:04.94,0:04:10.50,Default,,0000,0000,0000,,Entonces necesito mover esto aquí dentro.
Dialogue: 0,0:04:10.50,0:04:15.01,Default,,0000,0000,0000,,Esto funciona, pero en realidad hay algo mal en este enfoque.
Dialogue: 0,0:04:15.01,0:04:19.44,Default,,0000,0000,0000,,El navegador sigue llamando a la función "countItDown" una vez por segundo
Dialogue: 0,0:04:19.44,0:04:21.56,Default,,0000,0000,0000,,en tanto que esta página web está abierta.
Dialogue: 0,0:04:21.56,0:04:24.84,Default,,0000,0000,0000,,No deberías hacer que los navegadores llamaran funciones sin razón,
Dialogue: 0,0:04:24.84,0:04:27.58,Default,,0000,0000,0000,,ellos tienen muchas otras cosas importantes que hacer.
Dialogue: 0,0:04:27.58,0:04:30.94,Default,,0000,0000,0000,,Lo que en realidad queremos hacer es decirle al navegador que
Dialogue: 0,0:04:30.94,0:04:35.58,Default,,0000,0000,0000,,una vez que llegue a cero, no necesita llamar a esta función ni una vez más.
Dialogue: 0,0:04:35.58,0:04:40.38,Default,,0000,0000,0000,,Podemos hacer eso usando un nuevo método: "window.clearInterval()".
Dialogue: 0,0:04:40.38,0:04:47.35,Default,,0000,0000,0000,,Podemos pegar eso en este "else", aquí, "window.clearInterval()".
Dialogue: 0,0:04:47.35,0:04:52.19,Default,,0000,0000,0000,,Ahora, necesitamos pasarle un argumento, para que sepa cuál intervalo debe limpiar.
Dialogue: 0,0:04:52.19,0:04:55.80,Default,,0000,0000,0000,,Porque en realidad podríamos tener múltiples intervalos en un página.
Dialogue: 0,0:04:55.80,0:04:58.90,Default,,0000,0000,0000,,La manera de saber cuál intervalo limpiar
Dialogue: 0,0:04:58.90,0:05:02.98,Default,,0000,0000,0000,,es guardar el resultado de "setInterval" en una variable.
Dialogue: 0,0:05:02.98,0:05:07.82,Default,,0000,0000,0000,,Así que ahora que tengo el resultado en la variable "timer", puedo copiar y pegaralo allí,
Dialogue: 0,0:05:07.82,0:05:11.12,Default,,0000,0000,0000,,y ahora ya sabe qué limpiar, cuando llegue a cero,
Dialogue: 0,0:05:11.12,0:05:15.57,Default,,0000,0000,0000,,debe dejar de actualizar, y debe dejar de llamar a la función.
Dialogue: 0,0:05:15.57,0:05:19.33,Default,,0000,0000,0000,,Para cada animación que hagan, deben pensar cuidadosamente
Dialogue: 0,0:05:19.33,0:05:21.70,Default,,0000,0000,0000,,cuál debería ser la condición para detenerse.
Dialogue: 0,0:05:21.70,0:05:26.13,Default,,0000,0000,0000,,Y sí, probablemente tengan algunas animaciones que deberían correr y correr, amigos,
Dialogue: 0,0:05:26.13,0:05:29.02,Default,,0000,0000,0000,,pero más vale que sean animaciones realmente buenas.
Dialogue: 0,0:05:29.02,0:05:33.51,Default,,0000,0000,0000,,Porque el navegador estará trabajando cada vez que llamen esa función de tipo "callback".
Dialogue: 0,0:05:33.51,0:05:37.51,Default,,0000,0000,0000,,Ahora den vuelta a la página y logren que el mundo haga ¡Kaboom!