Uma página da web básica como esta,
é composta de tags HTML, como todos estes.
Quando queremos estilizar uma página, como
trazemos o CSS para dentro dela?
Adicionamos uma tag < style >.
E o navegador sabe que quando ele vê
uma tag < style >
ele deve usar seu motor CSS
para processar essa tag.
Costumamos colocar a tag < style >
no < head >,
porque queremos ter certeza de que o
navegador processe os estilos
antes de renderizar as tags HTML.
Caso contrário, se colocarmos < style >
na parte inferior aqui,
então poderíamos ter uma FOUC:
um flash de conteúdo sem estilo,
e as pessoas iriam ver a nossa página web
nua e crua!
Vamos trazê-lo de volta para cá,
onde ele pertence.
Agora esta página tem estilo.
Como vamos trazer JavaScript em uma página
quando queremos adicionar interatividade?
Pra isso, adicionamos uma tag < script >.
E o melhor lugar para colocar
uma tag < script >
é na verdade, na parte inferior da página
antes da tag final < /body >.
Vou colocar ela lá, e daqui a pouco eu
explico por que ela está lá.
Agora, o que eu posso colocar dentro
desta tag < script >?
Podemos colocar qualquer JavaScript
válido nele, como 'var 4 = 2 +2;'.
Mas isso não é muito excitante, porque
não está acontecendo nada no nosso site.
E se você estiver no Khan Academy,
provavelmente já sabe
que quatro é igual a dois mais dois.
Então, uma coisa que eu posso fazer
para verificar se ele funciona,
é escrever esta linha de código aqui.
Você não está vendo nada, certo?
E talvez você nunca viu essa função antes.
Esta função, console.log, é especial,
por que podemos usar
em muitos ambientes de JavaScript,
incluindo navegadores.
E ele vai escrever as coisas para o
console do JavaScript.
Você pode encontrar esse console
no seu navegador pressionando
Command(⌘)+Option+I ou Ctrl+Shift+I
ou com o botão direito do mouse
em qualquer lugar da página,
e selecionar "Inspecionar elemento".
Pause o esse vídeo agora, e tente abrir
o seu console dev para ver essa mensagem;
Conseguiu ver? Ótimo!
Se quiser, pode fechar o console agora,
uma vez que isso pode tomar
um monte de espaço.
Ele também pode ser uma distração, uma vez
que ele mostra todos os erros escritos.
É uma ótima ferramenta
para depuração, no entanto.
Então, definitivamente arquive-o
em sua caixa de ferramentas.
Agora, deixe-me realmente fazer alguma
coisa para a página com JavaScript,
usando uma linha de código que não fará
muito sentido no momento.
Viu o que aconteceu?
Nossa página desapareceu e foi substituída
pela nossa mensagem "leet hacker".
Vamos entrar em mais detalhes sobre como
esta linha de código realmente funciona.
Mas, basicamente, ele encontrou a tag
< body > e substituiu o conteúdo.
Agora o que aconteceria se eu copiar
e colar essa tag < script >,
e colocar no < head > com a tag < style >?
Não vai funcionar.
Por que não?
Porque a página avalia a tag < script >
antes de ver a tag < body >.
E ele diz: "Eu não vi ainda nem
o document.body,
"E você está tentando manipulá-lo!
Isso não pode acontecer. "
É por isso que temos que colocar nossa tag
< script > na parte inferior da página.
Assim que a página vê a tag < body >
em primeiro lugar,
vê tudo na mesma, e então começa a fazer
coisas para ele.
Queremos ter certeza de que a página web
existe em primeiro lugar.
E isso é diferente do CSS:
Queremos colocar nossa
tag < style > no início,
porque o analisador CSS é muito bom
com estilos aplicandos
para coisas que ainda não existem.
Só vai aplicá-las uma vez que elas
aconteçam.
Mas o JavaScript DOM não é muito
bom com isso.
Então, certifique-se que vai ter na parte
inferior aqui.
Tente adicionar a tag < script >
no próximo desafio,
certificando-se de colocá-lo
na parte inferior,
daí eu prometo que vou explicar muito
mais sobre esta linha aqui.
Traduzido por [Fernando dos Reis] Revisado por [Valter Bigeli]