WEBVTT
00:00:00.737 --> 00:00:06.812
Uma página da web básica como esta,
é composta de tags HTML, como todos estes.
00:00:06.812 --> 00:00:12.180
Quando queremos estilizar uma página, como
trazemos o CSS para dentro dela?
00:00:12.180 --> 00:00:14.397
Adicionamos uma tag < style >.
00:00:14.397 --> 00:00:17.349
E o navegador sabe que quando ele vê
uma tag < style >
00:00:17.349 --> 00:00:20.195
ele deve usar seu motor CSS
para processar essa tag.
00:00:20.195 --> 00:00:23.383
Costumamos colocar a tag < style >
no < head >,
00:00:23.383 --> 00:00:27.352
porque queremos ter certeza de que o
navegador processe os estilos
00:00:27.352 --> 00:00:30.959
antes de renderizar as tags HTML.
00:00:30.959 --> 00:00:34.936
Caso contrário, se colocarmos < style >
na parte inferior aqui,
00:00:34.936 --> 00:00:40.277
então poderíamos ter uma FOUC:
um flash de conteúdo sem estilo,
00:00:40.277 --> 00:00:44.726
e as pessoas iriam ver a nossa página web
nua e crua!
00:00:44.726 --> 00:00:48.484
Vamos trazê-lo de volta para cá,
onde ele pertence.
00:00:48.484 --> 00:00:51.734
Agora esta página tem estilo.
00:00:52.145 --> 00:00:58.005
Como vamos trazer JavaScript em uma página
quando queremos adicionar interatividade?
00:00:58.745 --> 00:01:01.255
Pra isso, adicionamos uma tag < script >.
00:01:01.255 --> 00:01:04.385
E o melhor lugar para colocar
uma tag < script >
00:01:04.385 --> 00:01:10.517
é na verdade, na parte inferior da página
antes da tag final < /body >.
00:01:10.517 --> 00:01:15.150
Vou colocar ela lá, e daqui a pouco eu
explico por que ela está lá.
00:01:15.150 --> 00:01:19.724
Agora, o que eu posso colocar dentro
desta tag < script >?
00:01:19.724 --> 00:01:25.094
Podemos colocar qualquer JavaScript
válido nele, como 'var 4 = 2 +2;'.
00:01:25.094 --> 00:01:30.386
Mas isso não é muito excitante, porque
não está acontecendo nada no nosso site.
00:01:30.386 --> 00:01:33.152
E se você estiver no Khan Academy,
provavelmente já sabe
00:01:33.152 --> 00:01:35.526
que quatro é igual a dois mais dois.
00:01:35.526 --> 00:01:39.072
Então, uma coisa que eu posso fazer
para verificar se ele funciona,
00:01:39.072 --> 00:01:41.712
é escrever esta linha de código aqui.
00:01:43.472 --> 00:01:45.350
Você não está vendo nada, certo?
00:01:45.350 --> 00:01:48.927
E talvez você nunca viu essa função antes.
00:01:48.927 --> 00:01:53.130
Esta função, console.log, é especial,
por que podemos usar
00:01:53.130 --> 00:01:56.466
em muitos ambientes de JavaScript,
incluindo navegadores.
00:01:56.466 --> 00:01:59.680
E ele vai escrever as coisas para o
console do JavaScript.
00:01:59.730 --> 00:02:03.381
Você pode encontrar esse console
no seu navegador pressionando
00:02:03.381 --> 00:02:08.740
Command(⌘)+Option+I ou Ctrl+Shift+I
ou com o botão direito do mouse
00:02:08.740 --> 00:02:15.165
em qualquer lugar da página,
e selecionar "Inspecionar elemento".
00:02:15.325 --> 00:02:19.846
Pause o esse vídeo agora, e tente abrir
o seu console dev para ver essa mensagem;
00:02:22.867 --> 00:02:24.389
Conseguiu ver? Ótimo!
00:02:24.389 --> 00:02:26.326
Se quiser, pode fechar o console agora,
00:02:26.326 --> 00:02:28.530
uma vez que isso pode tomar
um monte de espaço.
00:02:28.590 --> 00:02:32.962
Ele também pode ser uma distração, uma vez
que ele mostra todos os erros escritos.
00:02:32.962 --> 00:02:35.515
É uma ótima ferramenta
para depuração, no entanto.
00:02:35.515 --> 00:02:38.379
Então, definitivamente arquive-o
em sua caixa de ferramentas.
00:02:38.379 --> 00:02:42.325
Agora, deixe-me realmente fazer alguma
coisa para a página com JavaScript,
00:02:42.325 --> 00:02:46.571
usando uma linha de código que não fará
muito sentido no momento.
00:02:57.621 --> 00:02:58.596
Viu o que aconteceu?
00:02:58.596 --> 00:03:03.128
Nossa página desapareceu e foi substituída
pela nossa mensagem "leet hacker".
00:03:03.128 --> 00:03:07.895
Vamos entrar em mais detalhes sobre como
esta linha de código realmente funciona.
00:03:07.895 --> 00:03:12.219
Mas, basicamente, ele encontrou a tag
< body > e substituiu o conteúdo.
00:03:12.219 --> 00:03:16.530
Agora o que aconteceria se eu copiar
e colar essa tag < script >,
00:03:16.530 --> 00:03:20.163
e colocar no < head > com a tag < style >?
00:03:21.243 --> 00:03:24.285
Não vai funcionar.
Por que não?
00:03:24.565 --> 00:03:26.861
Porque a página avalia a tag < script >
00:03:26.861 --> 00:03:29.203
antes de ver a tag < body >.
00:03:29.203 --> 00:03:34.808
E ele diz: "Eu não vi ainda nem
o document.body,
00:03:34.808 --> 00:03:38.494
"E você está tentando manipulá-lo!
Isso não pode acontecer. "
00:03:38.494 --> 00:03:43.762
É por isso que temos que colocar nossa tag
< script > na parte inferior da página.
00:03:43.762 --> 00:03:46.861
Assim que a página vê a tag < body >
em primeiro lugar,
00:03:46.861 --> 00:03:51.219
vê tudo na mesma, e então começa a fazer
coisas para ele.
00:03:51.219 --> 00:03:54.809
Queremos ter certeza de que a página web
existe em primeiro lugar.
00:03:54.809 --> 00:03:56.672
E isso é diferente do CSS:
00:03:56.672 --> 00:03:59.576
Queremos colocar nossa
tag < style > no início,
00:03:59.576 --> 00:04:02.530
porque o analisador CSS é muito bom
com estilos aplicandos
00:04:02.530 --> 00:04:04.435
para coisas que ainda não existem.
00:04:04.435 --> 00:04:07.036
Só vai aplicá-las uma vez que elas
aconteçam.
00:04:07.036 --> 00:04:09.909
Mas o JavaScript DOM não é muito
bom com isso.
00:04:09.909 --> 00:04:12.973
Então, certifique-se que vai ter na parte
inferior aqui.
00:04:13.903 --> 00:04:16.357
Tente adicionar a tag < script >
no próximo desafio,
00:04:16.357 --> 00:04:18.916
certificando-se de colocá-lo
na parte inferior,
00:04:18.916 --> 00:04:23.636
daí eu prometo que vou explicar muito
mais sobre esta linha aqui.
00:04:23.636 --> 00:04:26.000
Traduzido por [Fernando dos Reis] Revisado por [Valter Bigeli]