Colocando JS em uma página da web (Versão em Vídeo)

Esta é uma gravação de uma vídeo-aula, carregada para tornar mais fácil para criar legendas.
Por favor, assista a palestra interativa original na Khan Academy, onde você pode pausar e editar o código e ver o código em um resolução melhor:
http://www.khanacademy.org/computer-programming

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]