[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.74,0:00:06.81,Default,,0000,0000,0000,,Uma página da web básica como esta,\Né composta de tags HTML, como todos estes.
Dialogue: 0,0:00:06.81,0:00:12.18,Default,,0000,0000,0000,,Quando queremos estilizar uma página, como\Ntrazemos o CSS para dentro dela?
Dialogue: 0,0:00:12.18,0:00:14.40,Default,,0000,0000,0000,,Adicionamos uma tag {\i1}< style >{\i0}.
Dialogue: 0,0:00:14.40,0:00:17.35,Default,,0000,0000,0000,,E o navegador sabe que quando ele vê\Numa tag {\i1}< style >{\i0}
Dialogue: 0,0:00:17.35,0:00:20.20,Default,,0000,0000,0000,,ele deve usar seu motor CSS\Npara processar essa tag.
Dialogue: 0,0:00:20.20,0:00:23.38,Default,,0000,0000,0000,,Costumamos colocar a tag {\i1}< style >{\i0}\Nno {\i1}< head >{\i0},
Dialogue: 0,0:00:23.38,0:00:27.35,Default,,0000,0000,0000,,porque queremos ter certeza de que o\Nnavegador processe os estilos
Dialogue: 0,0:00:27.35,0:00:30.96,Default,,0000,0000,0000,,antes de renderizar as tags HTML.
Dialogue: 0,0:00:30.96,0:00:34.94,Default,,0000,0000,0000,,Caso contrário, se colocarmos {\i1}< style >{\i0}\Nna parte inferior aqui,
Dialogue: 0,0:00:34.94,0:00:40.28,Default,,0000,0000,0000,,então poderíamos ter uma FOUC:\Num flash de conteúdo sem estilo,
Dialogue: 0,0:00:40.28,0:00:44.73,Default,,0000,0000,0000,,e as pessoas iriam ver a nossa página web\Nnua e crua!
Dialogue: 0,0:00:44.73,0:00:48.48,Default,,0000,0000,0000,,Vamos trazê-lo de volta para cá,\Nonde ele pertence.
Dialogue: 0,0:00:48.48,0:00:51.73,Default,,0000,0000,0000,,Agora esta página tem estilo.
Dialogue: 0,0:00:52.14,0:00:58.00,Default,,0000,0000,0000,,Como vamos trazer JavaScript em uma página\Nquando queremos adicionar interatividade?
Dialogue: 0,0:00:58.74,0:01:01.26,Default,,0000,0000,0000,,Pra isso, adicionamos uma tag {\i1}< script >{\i0}.
Dialogue: 0,0:01:01.26,0:01:04.38,Default,,0000,0000,0000,,E o melhor lugar para colocar\Numa tag {\i1}< script >{\i0}
Dialogue: 0,0:01:04.38,0:01:10.52,Default,,0000,0000,0000,,é na verdade, na parte inferior da página\Nantes da tag final {\i1}< /body >{\i0}.
Dialogue: 0,0:01:10.52,0:01:15.15,Default,,0000,0000,0000,,Vou colocar ela lá, e daqui a pouco eu\Nexplico por que ela está lá.
Dialogue: 0,0:01:15.15,0:01:19.72,Default,,0000,0000,0000,,Agora, o que eu posso colocar dentro\Ndesta tag {\i1}< script >{\i0}?
Dialogue: 0,0:01:19.72,0:01:25.09,Default,,0000,0000,0000,,Podemos colocar qualquer JavaScript\Nválido nele, como '{\i1}var 4 = 2 +2;{\i0}'.
Dialogue: 0,0:01:25.09,0:01:30.39,Default,,0000,0000,0000,,Mas isso não é muito excitante, porque\Nnão está acontecendo nada no nosso site.
Dialogue: 0,0:01:30.39,0:01:33.15,Default,,0000,0000,0000,,E se você estiver no Khan Academy,\Nprovavelmente já sabe
Dialogue: 0,0:01:33.15,0:01:35.53,Default,,0000,0000,0000,,que quatro é igual a dois mais dois.
Dialogue: 0,0:01:35.53,0:01:39.07,Default,,0000,0000,0000,,Então, uma coisa que eu posso fazer\Npara verificar se ele funciona,
Dialogue: 0,0:01:39.07,0:01:41.71,Default,,0000,0000,0000,,é escrever esta linha de código aqui.
Dialogue: 0,0:01:43.47,0:01:45.35,Default,,0000,0000,0000,,Você não está vendo nada, certo?
Dialogue: 0,0:01:45.35,0:01:48.93,Default,,0000,0000,0000,,E talvez você nunca viu essa função antes.
Dialogue: 0,0:01:48.93,0:01:53.13,Default,,0000,0000,0000,,Esta função, {\i1}console.log{\i0}, é especial,\Npor que podemos usar
Dialogue: 0,0:01:53.13,0:01:56.47,Default,,0000,0000,0000,,em muitos ambientes de JavaScript,\Nincluindo navegadores.
Dialogue: 0,0:01:56.47,0:01:59.68,Default,,0000,0000,0000,,E ele vai escrever as coisas para o\Nconsole do JavaScript.
Dialogue: 0,0:01:59.73,0:02:03.38,Default,,0000,0000,0000,,Você pode encontrar esse console\Nno seu navegador pressionando
Dialogue: 0,0:02:03.38,0:02:08.74,Default,,0000,0000,0000,,Command(⌘)+Option+I ou Ctrl+Shift+I\Nou com o botão direito do mouse
Dialogue: 0,0:02:08.74,0:02:15.16,Default,,0000,0000,0000,,em qualquer lugar da página,\Ne selecionar "Inspecionar elemento".
Dialogue: 0,0:02:15.32,0:02:19.85,Default,,0000,0000,0000,,Pause o esse vídeo agora, e tente abrir\No seu console dev para ver essa mensagem;
Dialogue: 0,0:02:22.87,0:02:24.39,Default,,0000,0000,0000,,Conseguiu ver? Ótimo!
Dialogue: 0,0:02:24.39,0:02:26.33,Default,,0000,0000,0000,,Se quiser, pode fechar o console agora,
Dialogue: 0,0:02:26.33,0:02:28.53,Default,,0000,0000,0000,,uma vez que isso pode tomar\Num monte de espaço.
Dialogue: 0,0:02:28.59,0:02:32.96,Default,,0000,0000,0000,,Ele também pode ser uma distração, uma vez\Nque ele mostra todos os erros escritos.
Dialogue: 0,0:02:32.96,0:02:35.52,Default,,0000,0000,0000,,É uma ótima ferramenta\Npara depuração, no entanto.
Dialogue: 0,0:02:35.52,0:02:38.38,Default,,0000,0000,0000,,Então, definitivamente arquive-o\Nem sua caixa de ferramentas.
Dialogue: 0,0:02:38.38,0:02:42.32,Default,,0000,0000,0000,,Agora, deixe-me realmente fazer alguma\Ncoisa para a página com JavaScript,
Dialogue: 0,0:02:42.32,0:02:46.57,Default,,0000,0000,0000,,usando uma linha de código que não fará\Nmuito sentido no momento.
Dialogue: 0,0:02:57.62,0:02:58.60,Default,,0000,0000,0000,,Viu o que aconteceu?
Dialogue: 0,0:02:58.60,0:03:03.13,Default,,0000,0000,0000,,Nossa página desapareceu e foi substituída\Npela nossa mensagem "leet hacker".
Dialogue: 0,0:03:03.13,0:03:07.90,Default,,0000,0000,0000,,Vamos entrar em mais detalhes sobre como\Nesta linha de código realmente funciona.
Dialogue: 0,0:03:07.90,0:03:12.22,Default,,0000,0000,0000,,Mas, basicamente, ele encontrou a tag\N{\i1}< body >{\i0} e substituiu o conteúdo.
Dialogue: 0,0:03:12.22,0:03:16.53,Default,,0000,0000,0000,,Agora o que aconteceria se eu copiar\Ne colar essa tag {\i1}< script >{\i0},
Dialogue: 0,0:03:16.53,0:03:20.16,Default,,0000,0000,0000,,e colocar no {\i1}< head >{\i0} com a tag {\i1}< style >{\i0}?
Dialogue: 0,0:03:21.24,0:03:24.28,Default,,0000,0000,0000,,Não vai funcionar.\NPor que não?
Dialogue: 0,0:03:24.56,0:03:26.86,Default,,0000,0000,0000,,Porque a página avalia a tag {\i1}< script >{\i0}
Dialogue: 0,0:03:26.86,0:03:29.20,Default,,0000,0000,0000,,antes de ver a tag {\i1}< body >{\i0}.
Dialogue: 0,0:03:29.20,0:03:34.81,Default,,0000,0000,0000,,E ele diz: "Eu não vi ainda nem\No {\i1}document.body{\i0},
Dialogue: 0,0:03:34.81,0:03:38.49,Default,,0000,0000,0000,,"E você está tentando manipulá-lo!\NIsso não pode acontecer. "
Dialogue: 0,0:03:38.49,0:03:43.76,Default,,0000,0000,0000,,É por isso que temos que colocar nossa tag\N{\i1}< script >{\i0} na parte inferior da página.
Dialogue: 0,0:03:43.76,0:03:46.86,Default,,0000,0000,0000,,Assim que a página vê a tag {\i1}< body >{\i0}\Nem primeiro lugar,
Dialogue: 0,0:03:46.86,0:03:51.22,Default,,0000,0000,0000,,vê tudo na mesma, e então começa a fazer\Ncoisas para ele.
Dialogue: 0,0:03:51.22,0:03:54.81,Default,,0000,0000,0000,,Queremos ter certeza de que a página web\Nexiste em primeiro lugar.
Dialogue: 0,0:03:54.81,0:03:56.67,Default,,0000,0000,0000,,E isso é diferente do CSS:
Dialogue: 0,0:03:56.67,0:03:59.58,Default,,0000,0000,0000,,Queremos colocar nossa\Ntag {\i1}< style >{\i0} no início,
Dialogue: 0,0:03:59.58,0:04:02.53,Default,,0000,0000,0000,,porque o analisador CSS é muito bom\Ncom estilos aplicandos
Dialogue: 0,0:04:02.53,0:04:04.44,Default,,0000,0000,0000,,para coisas que ainda não existem.
Dialogue: 0,0:04:04.44,0:04:07.04,Default,,0000,0000,0000,,Só vai aplicá-las uma vez que elas\Naconteçam.
Dialogue: 0,0:04:07.04,0:04:09.91,Default,,0000,0000,0000,,Mas o JavaScript DOM não é muito\Nbom com isso.
Dialogue: 0,0:04:09.91,0:04:12.97,Default,,0000,0000,0000,,Então, certifique-se que vai ter na parte\Ninferior aqui.
Dialogue: 0,0:04:13.90,0:04:16.36,Default,,0000,0000,0000,,Tente adicionar a tag {\i1}< script >{\i0}\Nno próximo desafio,
Dialogue: 0,0:04:16.36,0:04:18.92,Default,,0000,0000,0000,,certificando-se de colocá-lo\Nna parte inferior,
Dialogue: 0,0:04:18.92,0:04:23.64,Default,,0000,0000,0000,,daí eu prometo que vou explicar muito\Nmais sobre esta linha aqui.
Dialogue: 0,0:04:23.64,0:04:26.00,Default,,0000,0000,0000,,Traduzido por [Fernando dos Reis] Revisado por [Valter Bigeli]