YouTube

Got a YouTube account?

New: enable viewer-created translations and captions on your YouTube channel!

Portuguese, Brazilian subtitles

← 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

Get Embed Code
6 Languages

Showing Revision 5 created 03/22/2015 by Valter Bigeli.

  1. Uma página da web básica como esta,
    é composta de tags HTML, como todos estes.

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