1
00:00:00,737 --> 00:00:06,812
Uma página da web básica como esta,
é composta de tags HTML, como todos estes.
2
00:00:06,812 --> 00:00:12,180
Quando queremos estilizar uma página, como
trazemos o CSS para dentro dela?
3
00:00:12,180 --> 00:00:14,397
Adicionamos uma tag < style >.
4
00:00:14,397 --> 00:00:17,349
E o navegador sabe que quando ele vê
uma tag < style >
5
00:00:17,349 --> 00:00:20,195
ele deve usar seu motor CSS
para processar essa tag.
6
00:00:20,195 --> 00:00:23,383
Costumamos colocar a tag < style >
no < head >,
7
00:00:23,383 --> 00:00:27,352
porque queremos ter certeza de que o
navegador processe os estilos
8
00:00:27,352 --> 00:00:30,959
antes de renderizar as tags HTML.
9
00:00:30,959 --> 00:00:34,936
Caso contrário, se colocarmos < style >
na parte inferior aqui,
10
00:00:34,936 --> 00:00:40,277
então poderíamos ter uma FOUC:
um flash de conteúdo sem estilo,
11
00:00:40,277 --> 00:00:44,726
e as pessoas iriam ver a nossa página web
nua e crua!
12
00:00:44,726 --> 00:00:48,484
Vamos trazê-lo de volta para cá,
onde ele pertence.
13
00:00:48,484 --> 00:00:51,734
Agora esta página tem estilo.
14
00:00:52,145 --> 00:00:58,005
Como vamos trazer JavaScript em uma página
quando queremos adicionar interatividade?
15
00:00:58,745 --> 00:01:01,255
Pra isso, adicionamos uma tag < script >.
16
00:01:01,255 --> 00:01:04,385
E o melhor lugar para colocar
uma tag < script >
17
00:01:04,385 --> 00:01:10,517
é na verdade, na parte inferior da página
antes da tag final < /body >.
18
00:01:10,517 --> 00:01:15,150
Vou colocar ela lá, e daqui a pouco eu
explico por que ela está lá.
19
00:01:15,150 --> 00:01:19,724
Agora, o que eu posso colocar dentro
desta tag < script >?
20
00:01:19,724 --> 00:01:25,094
Podemos colocar qualquer JavaScript
válido nele, como 'var 4 = 2 +2;'.
21
00:01:25,094 --> 00:01:30,386
Mas isso não é muito excitante, porque
não está acontecendo nada no nosso site.
22
00:01:30,386 --> 00:01:33,152
E se você estiver no Khan Academy,
provavelmente já sabe
23
00:01:33,152 --> 00:01:35,526
que quatro é igual a dois mais dois.
24
00:01:35,526 --> 00:01:39,072
Então, uma coisa que eu posso fazer
para verificar se ele funciona,
25
00:01:39,072 --> 00:01:41,712
é escrever esta linha de código aqui.
26
00:01:43,472 --> 00:01:45,350
Você não está vendo nada, certo?
27
00:01:45,350 --> 00:01:48,927
E talvez você nunca viu essa função antes.
28
00:01:48,927 --> 00:01:53,130
Esta função, console.log, é especial,
por que podemos usar
29
00:01:53,130 --> 00:01:56,466
em muitos ambientes de JavaScript,
incluindo navegadores.
30
00:01:56,466 --> 00:01:59,680
E ele vai escrever as coisas para o
console do JavaScript.
31
00:01:59,730 --> 00:02:03,381
Você pode encontrar esse console
no seu navegador pressionando
32
00:02:03,381 --> 00:02:08,740
Command(⌘)+Option+I ou Ctrl+Shift+I
ou com o botão direito do mouse
33
00:02:08,740 --> 00:02:15,165
em qualquer lugar da página,
e selecionar "Inspecionar elemento".
34
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;
35
00:02:22,867 --> 00:02:24,389
Conseguiu ver? Ótimo!
36
00:02:24,389 --> 00:02:26,326
Se quiser, pode fechar o console agora,
37
00:02:26,326 --> 00:02:28,530
uma vez que isso pode tomar
um monte de espaço.
38
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.
39
00:02:32,962 --> 00:02:35,515
É uma ótima ferramenta
para depuração, no entanto.
40
00:02:35,515 --> 00:02:38,379
Então, definitivamente arquive-o
em sua caixa de ferramentas.
41
00:02:38,379 --> 00:02:42,325
Agora, deixe-me realmente fazer alguma
coisa para a página com JavaScript,
42
00:02:42,325 --> 00:02:46,571
usando uma linha de código que não fará
muito sentido no momento.
43
00:02:57,621 --> 00:02:58,596
Viu o que aconteceu?
44
00:02:58,596 --> 00:03:03,128
Nossa página desapareceu e foi substituída
pela nossa mensagem "leet hacker".
45
00:03:03,128 --> 00:03:07,895
Vamos entrar em mais detalhes sobre como
esta linha de código realmente funciona.
46
00:03:07,895 --> 00:03:12,219
Mas, basicamente, ele encontrou a tag
< body > e substituiu o conteúdo.
47
00:03:12,219 --> 00:03:16,530
Agora o que aconteceria se eu copiar
e colar essa tag < script >,
48
00:03:16,530 --> 00:03:20,163
e colocar no < head > com a tag < style >?
49
00:03:21,243 --> 00:03:24,285
Não vai funcionar.
Por que não?
50
00:03:24,565 --> 00:03:26,861
Porque a página avalia a tag < script >
51
00:03:26,861 --> 00:03:29,203
antes de ver a tag < body >.
52
00:03:29,203 --> 00:03:34,808
E ele diz: "Eu não vi ainda nem
o document.body,
53
00:03:34,808 --> 00:03:38,494
"E você está tentando manipulá-lo!
Isso não pode acontecer. "
54
00:03:38,494 --> 00:03:43,762
É por isso que temos que colocar nossa tag
< script > na parte inferior da página.
55
00:03:43,762 --> 00:03:46,861
Assim que a página vê a tag < body >
em primeiro lugar,
56
00:03:46,861 --> 00:03:51,219
vê tudo na mesma, e então começa a fazer
coisas para ele.
57
00:03:51,219 --> 00:03:54,809
Queremos ter certeza de que a página web
existe em primeiro lugar.
58
00:03:54,809 --> 00:03:56,672
E isso é diferente do CSS:
59
00:03:56,672 --> 00:03:59,576
Queremos colocar nossa
tag < style > no início,
60
00:03:59,576 --> 00:04:02,530
porque o analisador CSS é muito bom
com estilos aplicandos
61
00:04:02,530 --> 00:04:04,435
para coisas que ainda não existem.
62
00:04:04,435 --> 00:04:07,036
Só vai aplicá-las uma vez que elas
aconteçam.
63
00:04:07,036 --> 00:04:09,909
Mas o JavaScript DOM não é muito
bom com isso.
64
00:04:09,909 --> 00:04:12,973
Então, certifique-se que vai ter na parte
inferior aqui.
65
00:04:13,903 --> 00:04:16,357
Tente adicionar a tag < script >
no próximo desafio,
66
00:04:16,357 --> 00:04:18,916
certificando-se de colocá-lo
na parte inferior,
67
00:04:18,916 --> 00:04:23,636
daí eu prometo que vou explicar muito
mais sobre esta linha aqui.
68
00:04:23,636 --> 00:04:26,000
Traduzido por [Fernando dos Reis] Revisado por [Valter Bigeli]