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]