[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.99,0:00:04.02,Default,,0000,0000,0000,,Eu tenho essa página web\Ncom uma foto de "Oh Noes"
Dialogue: 0,0:00:04.02,0:00:07.86,Default,,0000,0000,0000,,que está enlouquecendo porque\No mundo vai acabar em breve -
Dialogue: 0,0:00:07.86,0:00:10.47,Default,,0000,0000,0000,,especificamente, em 500 segundos.
Dialogue: 0,0:00:10.47,0:00:15.48,Default,,0000,0000,0000,,Eu quero fazer essa página web muito\Nmais útil transformando esse número
Dialogue: 0,0:00:15.48,0:00:16.93,Default,,0000,0000,0000,,em uma contagem regressiva
Dialogue: 0,0:00:16.93,0:00:20.78,Default,,0000,0000,0000,,para que os visitantes possam ver\Nexatamente quanto tempo eles têm sobrando.
Dialogue: 0,0:00:21.26,0:00:23.93,Default,,0000,0000,0000,,Quando animamos parte de uma página web,
Dialogue: 0,0:00:23.93,0:00:26.71,Default,,0000,0000,0000,,a estratégia é achar algum elemento nela
Dialogue: 0,0:00:26.71,0:00:29.30,Default,,0000,0000,0000,,e então mudar algo nesse elemento,
Dialogue: 0,0:00:29.30,0:00:32.78,Default,,0000,0000,0000,,e fazer isso um certo número\Nde vezes por segundo.
Dialogue: 0,0:00:32.78,0:00:37.69,Default,,0000,0000,0000,,Então, para o primeiro passo,\Nvou achar a contagem regressiva pelo ID.
Dialogue: 0,0:00:37.69,0:00:39.49,Default,,0000,0000,0000,,Simples.
Dialogue: 0,0:00:39.49,0:00:47.57,Default,,0000,0000,0000,,(digitando)
Dialogue: 0,0:00:47.57,0:00:51.74,Default,,0000,0000,0000,,Para o segundo passo, vou fazer uma função\Nque executa uma contagem regressiva.
Dialogue: 0,0:00:51.74,0:00:54.79,Default,,0000,0000,0000,,(digitando)
Dialogue: 0,0:00:55.08,0:00:57.12,Default,,0000,0000,0000,,E o que vamos fazer...
Dialogue: 0,0:00:57.12,0:00:59.45,Default,,0000,0000,0000,,Eu quero definir o '{\i1}textContent{\i0}',
Dialogue: 0,0:00:59.45,0:01:03.92,Default,,0000,0000,0000,,e eu quero que ele seja igual\Nao número anterior menos um.
Dialogue: 0,0:01:03.92,0:01:06.76,Default,,0000,0000,0000,,E o '{\i1}textContent{\i0}' vai ser\Numa cadeia de caracteres.
Dialogue: 0,0:01:06.76,0:01:10.03,Default,,0000,0000,0000,,Então temos que tranformá-lo em um número.
Dialogue: 0,0:01:10.03,0:01:12.85,Default,,0000,0000,0000,,Você pode fazer isso usando '{\i1}parsefloat(){\i0}'
Dialogue: 0,0:01:12.85,0:01:15.75,Default,,0000,0000,0000,,e então podemos subtrair um dele.
Dialogue: 0,0:01:15.75,0:01:21.54,Default,,0000,0000,0000,,Então, finalmente, queremos chamar\Nessa função em um intervalo,
Dialogue: 0,0:01:21.54,0:01:25.42,Default,,0000,0000,0000,,o que significa um certo\Nnúmero de vezes por segundo.
Dialogue: 0,0:01:25.42,0:01:30.42,Default,,0000,0000,0000,,E podemos fazer isso usando\N'{\i1}window.setInterval(){\i0}'.
Dialogue: 0,0:01:30.42,0:01:33.69,Default,,0000,0000,0000,,E essa função recebe dois argumentos:
Dialogue: 0,0:01:33.69,0:01:38.10,Default,,0000,0000,0000,,a função de retorno de chamada e\No número de milissegundos para esperar
Dialogue: 0,0:01:38.10,0:01:40.78,Default,,0000,0000,0000,,antes dessa função\Nser chamada de novo.
Dialogue: 0,0:01:40.78,0:01:43.37,Default,,0000,0000,0000,,Nós podemos especificar \Na função de retorno de chamada
Dialogue: 0,0:01:43.37,0:01:46.81,Default,,0000,0000,0000,,do mesmo jeito que especificamos\Npara ouvintes de evento: pelo nome.
Dialogue: 0,0:01:46.81,0:01:49.35,Default,,0000,0000,0000,,E então, está indo\Nmuito rápido agora
Dialogue: 0,0:01:49.35,0:01:51.74,Default,,0000,0000,0000,,porque não especificamos\No segundo argumento.
Dialogue: 0,0:01:51.74,0:01:55.25,Default,,0000,0000,0000,,Quanto a isso, queremos que ele seja\Num certo número de milissegundos,
Dialogue: 0,0:01:55.25,0:01:58.52,Default,,0000,0000,0000,,e queremos uma vez por segundo,\Nentão vamos colocar um mil
Dialogue: 0,0:01:58.52,0:02:01.41,Default,,0000,0000,0000,,porque existem um mil\Nmilissegundos em um segundo.
Dialogue: 0,0:02:01.41,0:02:05.22,Default,,0000,0000,0000,,Pronto, agora está \Ndiminuindo um por segundo.
Dialogue: 0,0:02:05.22,0:02:10.24,Default,,0000,0000,0000,,Então é melhor você aprender o máximo que \Nvocê puder nos próximos 490 segundos!
Dialogue: 0,0:02:10.24,0:02:15.04,Default,,0000,0000,0000,,Há mais uma função de {\i1}window{\i0} que\Nusamos às vezes no lugar de '{\i1}setInterval{\i0}',
Dialogue: 0,0:02:15.04,0:02:16.75,Default,,0000,0000,0000,,e ela é '{\i1}setTimeout{\i0}'.
Dialogue: 0,0:02:16.75,0:02:21.78,Default,,0000,0000,0000,,E eu vou mudar para ela, e ver\Nse você consegue notar a diferença.
Dialogue: 0,0:02:21.78,0:02:23.73,Default,,0000,0000,0000,,Tem que esperar um pouco.
Dialogue: 0,0:02:23.73,0:02:28.30,Default,,0000,0000,0000,,Pronto, agora talvez você consiga ver\Nque quando usamos '{\i1}setTimeout{\i0}',
Dialogue: 0,0:02:28.30,0:02:34.14,Default,,0000,0000,0000,,o navegador apenas chama\Na função uma vez, não repetidamente.
Dialogue: 0,0:02:34.14,0:02:38.96,Default,,0000,0000,0000,,Isso não é tão útil para quando\Nestamos fazendo animações.
Dialogue: 0,0:02:38.96,0:02:41.73,Default,,0000,0000,0000,,Mas pode ser super útil em outros casos,
Dialogue: 0,0:02:41.73,0:02:45.76,Default,,0000,0000,0000,,como se mostrarmos um aviso\Npara nossos usuários e quiséssemos
Dialogue: 0,0:02:45.76,0:02:48.09,Default,,0000,0000,0000,,escondê-lo após dez segundos.
Dialogue: 0,0:02:48.09,0:02:53.25,Default,,0000,0000,0000,,Então deixe-me mudar isso\Nde volta para '{\i1}setInterval{\i0}'
Dialogue: 0,0:02:53.25,0:02:56.51,Default,,0000,0000,0000,,Agora, quando estamos\Ntestando animações desse jeito,
Dialogue: 0,0:02:56.51,0:03:00.45,Default,,0000,0000,0000,,deveríamos realmente ver como elas ficam\Nem todos os pontos da animação,
Dialogue: 0,0:03:00.45,0:03:02.84,Default,,0000,0000,0000,,como o que acontece\Nquando chega a zero.
Dialogue: 0,0:03:02.84,0:03:05.02,Default,,0000,0000,0000,,Bem, vai demorar um\Nbom tempo para chegar lá,
Dialogue: 0,0:03:05.02,0:03:06.50,Default,,0000,0000,0000,,e você vai ficar\Nmuito entediado
Dialogue: 0,0:03:06.50,0:03:10.69,Default,,0000,0000,0000,,então vamos apenas mudar\Nnosso dado inicial para cinco,
Dialogue: 0,0:03:10.69,0:03:12.41,Default,,0000,0000,0000,,e ver o que acontece.
Dialogue: 0,0:03:12.41,0:03:16.85,Default,,0000,0000,0000,,Quatro, três, dois, um, zero...
Dialogue: 0,0:03:16.85,0:03:19.29,Default,,0000,0000,0000,,Menos um, menos dois.
Dialogue: 0,0:03:19.29,0:03:21.88,Default,,0000,0000,0000,,Agora isso está ficando estranho.
Dialogue: 0,0:03:21.88,0:03:26.29,Default,,0000,0000,0000,,Quando o mundo acaba, ele deveria\Napenas fazer "Kabum!" e parar de contar.
Dialogue: 0,0:03:26.29,0:03:30.11,Default,,0000,0000,0000,,Então o que nós queremos fazer\Nna verdade é parar essa animação
Dialogue: 0,0:03:30.11,0:03:32.73,Default,,0000,0000,0000,,uma vez que ela chegue ao zero.
Dialogue: 0,0:03:32.73,0:03:36.32,Default,,0000,0000,0000,,E podemos fazer isso usando\Numa condição {\i1}if{\i0} dentro da função.
Dialogue: 0,0:03:36.32,0:03:42.29,Default,,0000,0000,0000,,Então, deixe-me começar guardando\No tempo atual em uma variável
Dialogue: 0,0:03:42.29,0:03:44.52,Default,,0000,0000,0000,,já que vamos usá-lo\Nalgumas vezes.
Dialogue: 0,0:03:44.52,0:03:51.38,Default,,0000,0000,0000,,Então eu vou apenas pegar isso, colocar\Naqui e substituir isso com '{\i1}currentTime{\i0}'
Dialogue: 0,0:03:51.38,0:03:56.37,Default,,0000,0000,0000,,Agora, o que eu posso fazer é\Nter uma condição {\i1}if{\i0} para ter certeza
Dialogue: 0,0:03:56.37,0:04:00.98,Default,,0000,0000,0000,,que apenas vamos atualizar o texto\Nse '{\i1}currentTime{\i0}' for maior que zero.
Dialogue: 0,0:04:01.39,0:04:04.94,Default,,0000,0000,0000,,Esse é o único momento em que\Nrealmente queremos subtrair um.
Dialogue: 0,0:04:04.94,0:04:08.89,Default,,0000,0000,0000,,Então eu vou precisar\Ncolocar isso aqui dentro.
Dialogue: 0,0:04:11.44,0:04:15.01,Default,,0000,0000,0000,,Isso funciona, mas tem algo\Nmuito ruim nessa abordagem.
Dialogue: 0,0:04:15.01,0:04:19.65,Default,,0000,0000,0000,,O navegador ainda está chamando\Na função '{\i1}countItDown{\i0}' uma vez por segundo
Dialogue: 0,0:04:19.65,0:04:21.65,Default,,0000,0000,0000,,enquanto a página web está aberta.
Dialogue: 0,0:04:22.07,0:04:25.03,Default,,0000,0000,0000,,Você não deveria fazer navegadores\Nchamarem funções sem motivo,
Dialogue: 0,0:04:25.10,0:04:27.59,Default,,0000,0000,0000,,eles tem muitas outras coisas\Nimportantes para fazer.
Dialogue: 0,0:04:28.28,0:04:30.94,Default,,0000,0000,0000,,O que queremos mesmo fazer\Né dizer ao navegador que
Dialogue: 0,0:04:30.94,0:04:35.58,Default,,0000,0000,0000,,uma vez que chegue a zero, ele \Nnão precisa mais chamar essa função.
Dialogue: 0,0:04:35.82,0:04:40.38,Default,,0000,0000,0000,,Podemos fazer isso usando um novo \Nmétodo: '{\i1}window.clearInterval(){\i0}'.
Dialogue: 0,0:04:40.38,0:04:47.35,Default,,0000,0000,0000,,Podemos colocá-lo nesse {\i1}else{\i0} aqui -\N'{\i1}window.clearInterval(){\i0}'.
Dialogue: 0,0:04:47.35,0:04:52.19,Default,,0000,0000,0000,,Agora, precisamos passar um argumento\Npara que ele saiba qual intervalo remover.
Dialogue: 0,0:04:52.19,0:04:55.80,Default,,0000,0000,0000,,Porque podemos ter vários\Nintervalos em uma página.
Dialogue: 0,0:04:55.80,0:04:58.81,Default,,0000,0000,0000,,O jeito de sabermos\Nqual intervalo remover
Dialogue: 0,0:04:58.81,0:05:02.98,Default,,0000,0000,0000,,é guardar o resultado de\N'{\i1}setInterval{\i0}' em uma variável.
Dialogue: 0,0:05:02.98,0:05:07.82,Default,,0000,0000,0000,,Então, agora que eu tenho ele em uma\Nvariável '{\i1}timer{\i0}', posso copiar e colar ali
Dialogue: 0,0:05:07.82,0:05:11.12,Default,,0000,0000,0000,,e agora ela sabe o que remover,\Nentão quando chegar a zero
Dialogue: 0,0:05:11.12,0:05:15.57,Default,,0000,0000,0000,,deve parar de atualizar e\Ndeve parar de chamar a função.
Dialogue: 0,0:05:15.57,0:05:19.33,Default,,0000,0000,0000,,Para cada animação que você faz,\Nvocê deveria pensar cuidadosamente sobre
Dialogue: 0,0:05:19.33,0:05:21.70,Default,,0000,0000,0000,,qual deveria ser a\Ncondição de parada.
Dialogue: 0,0:05:21.70,0:05:26.13,Default,,0000,0000,0000,,E sim, você pode ter algumas animações\Nque devem repetir e repetir, meus amigos -
Dialogue: 0,0:05:26.13,0:05:29.02,Default,,0000,0000,0000,,mas é melhor que elas\Nsejam animações muito boas.
Dialogue: 0,0:05:29.02,0:05:31.54,Default,,0000,0000,0000,,Porque seu navegador \Nestá trabalhando toda vez
Dialogue: 0,0:05:31.54,0:05:33.63,Default,,0000,0000,0000,,que chama essa função\Nde retorno de chamada.
Dialogue: 0,0:05:33.63,0:05:37.34,Default,,0000,0000,0000,,Agora faça sua versão e faça\No mundo realmente fazer "Kabum!".
Dialogue: 0,0:05:37.34,0:05:38.93,Default,,0000,0000,0000,,[Legendado por: Alberto Oliveira]