0:00:00.737,0:00:06.812
Uma página da web básica como esta,[br]é composta de tags HTML, como todos estes.

0:00:06.812,0:00:12.180
Quando queremos estilizar uma página, como[br]trazemos o CSS para dentro dela?

0:00:12.180,0:00:14.397
Adicionamos uma tag <i>< style ></i>.

0:00:14.397,0:00:17.349
E o navegador sabe que quando ele vê[br]uma tag <i>< style ></i>

0:00:17.349,0:00:20.195
ele deve usar seu motor CSS[br]para processar essa tag.

0:00:20.195,0:00:23.383
Costumamos colocar a tag <i>< style ></i>[br]no <i>< head ></i>,

0:00:23.383,0:00:27.352
porque queremos ter certeza de que o[br]navegador processe os estilos

0:00:27.352,0:00:30.959
antes de renderizar as tags HTML.

0:00:30.959,0:00:34.936
Caso contrário, se colocarmos <i>< style ></i>[br]na parte inferior aqui,

0:00:34.936,0:00:40.277
então poderíamos ter uma FOUC:[br]um flash de conteúdo sem estilo,

0:00:40.277,0:00:44.726
e as pessoas iriam ver a nossa página web[br]nua e crua!

0:00:44.726,0:00:48.484
Vamos trazê-lo de volta para cá,[br]onde ele pertence.

0:00:48.484,0:00:51.734
Agora esta página tem estilo.

0:00:52.145,0:00:58.005
Como vamos trazer JavaScript em uma página[br]quando queremos adicionar interatividade?

0:00:58.745,0:01:01.255
Pra isso, adicionamos uma tag <i>< script ></i>.

0:01:01.255,0:01:04.385
E o melhor lugar para colocar[br]uma tag <i>< script ></i>

0:01:04.385,0:01:10.517
é na verdade, na parte inferior da página[br]antes da tag final <i>< /body ></i>.

0:01:10.517,0:01:15.150
Vou colocar ela lá, e daqui a pouco eu[br]explico por que ela está lá.

0:01:15.150,0:01:19.724
Agora, o que eu posso colocar dentro[br]desta tag <i>< script ></i>?

0:01:19.724,0:01:25.094
Podemos colocar qualquer JavaScript[br]válido nele, como '<i>var 4 = 2 +2;</i>'.

0:01:25.094,0:01:30.386
Mas isso não é muito excitante, porque[br]não está acontecendo nada no nosso site.

0:01:30.386,0:01:33.152
E se você estiver no Khan Academy,[br]provavelmente já sabe

0:01:33.152,0:01:35.526
que quatro é igual a dois mais dois.

0:01:35.526,0:01:39.072
Então, uma coisa que eu posso fazer[br]para verificar se ele funciona,

0:01:39.072,0:01:41.712
é escrever esta linha de código aqui.

0:01:43.472,0:01:45.350
Você não está vendo nada, certo?

0:01:45.350,0:01:48.927
E talvez você nunca viu essa função antes.

0:01:48.927,0:01:53.130
Esta função, <i>console.log</i>, é especial,[br]por que podemos usar

0:01:53.130,0:01:56.466
em muitos ambientes de JavaScript,[br]incluindo navegadores.

0:01:56.466,0:01:59.680
E ele vai escrever as coisas para o[br]console do JavaScript.

0:01:59.730,0:02:03.381
Você pode encontrar esse console[br]no seu navegador pressionando

0:02:03.381,0:02:08.740
Command(⌘)+Option+I ou Ctrl+Shift+I[br]ou com o botão direito do mouse

0:02:08.740,0:02:15.165
em qualquer lugar da página,[br]e selecionar "Inspecionar elemento".

0:02:15.325,0:02:19.846
Pause o esse vídeo agora, e tente abrir[br]o seu console dev para ver essa mensagem;

0:02:22.867,0:02:24.389
Conseguiu ver? Ótimo!

0:02:24.389,0:02:26.326
Se quiser, pode fechar o console agora,

0:02:26.326,0:02:28.530
uma vez que isso pode tomar[br]um monte de espaço.

0:02:28.590,0:02:32.962
Ele também pode ser uma distração, uma vez[br]que ele mostra todos os erros escritos.

0:02:32.962,0:02:35.515
É uma ótima ferramenta[br]para depuração, no entanto.

0:02:35.515,0:02:38.379
Então, definitivamente arquive-o[br]em sua caixa de ferramentas.

0:02:38.379,0:02:42.325
Agora, deixe-me realmente fazer alguma[br]coisa para a página com JavaScript,

0:02:42.325,0:02:46.571
usando uma linha de código que não fará[br]muito sentido no momento.

0:02:57.621,0:02:58.596
Viu o que aconteceu?

0:02:58.596,0:03:03.128
Nossa página desapareceu e foi substituída[br]pela nossa mensagem "leet hacker".

0:03:03.128,0:03:07.895
Vamos entrar em mais detalhes sobre como[br]esta linha de código realmente funciona.

0:03:07.895,0:03:12.219
Mas, basicamente, ele encontrou a tag[br]<i>< body ></i> e substituiu o conteúdo.

0:03:12.219,0:03:16.530
Agora o que aconteceria se eu copiar[br]e colar essa tag <i>< script ></i>,

0:03:16.530,0:03:20.163
e colocar no <i>< head ></i> com a tag <i>< style ></i>?

0:03:21.243,0:03:24.285
Não vai funcionar.[br]Por que não?

0:03:24.565,0:03:26.861
Porque a página avalia a tag <i>< script ></i>

0:03:26.861,0:03:29.203
antes de ver a tag <i>< body ></i>.

0:03:29.203,0:03:34.808
E ele diz: "Eu não vi ainda nem[br]o <i>document.body</i>,

0:03:34.808,0:03:38.494
"E você está tentando manipulá-lo![br]Isso não pode acontecer. "

0:03:38.494,0:03:43.762
É por isso que temos que colocar nossa tag[br]<i>< script ></i> na parte inferior da página.

0:03:43.762,0:03:46.861
Assim que a página vê a tag <i>< body ></i>[br]em primeiro lugar,

0:03:46.861,0:03:51.219
vê tudo na mesma, e então começa a fazer[br]coisas para ele.

0:03:51.219,0:03:54.809
Queremos ter certeza de que a página web[br]existe em primeiro lugar.

0:03:54.809,0:03:56.672
E isso é diferente do CSS:

0:03:56.672,0:03:59.576
Queremos colocar nossa[br]tag <i>< style ></i> no início,

0:03:59.576,0:04:02.530
porque o analisador CSS é muito bom[br]com estilos aplicandos

0:04:02.530,0:04:04.435
para coisas que ainda não existem.

0:04:04.435,0:04:07.036
Só vai aplicá-las uma vez que elas[br]aconteçam.

0:04:07.036,0:04:09.909
Mas o JavaScript DOM não é muito[br]bom com isso.

0:04:09.909,0:04:12.973
Então, certifique-se que vai ter na parte[br]inferior aqui.

0:04:13.903,0:04:16.357
Tente adicionar a tag <i>< script ></i>[br]no próximo desafio,

0:04:16.357,0:04:18.916
certificando-se de colocá-lo[br]na parte inferior,

0:04:18.916,0:04:23.636
daí eu prometo que vou explicar muito[br]mais sobre esta linha aqui.

0:04:23.636,0:04:26.000
Traduzido por [Fernando dos Reis] Revisado por [Valter Bigeli]