YouTube

Got a YouTube account?

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

Portuguese, Brazilian subtitles

← The Resumes HTML - JavaScript Basics

Get Embed Code
7 Languages

Showing Revision 12 created 06/20/2016 by Udacity Robot.

  1. Vamos começar com index.html.
  2. Não se preocupe, o HTML é muito simples.
  3. Ele descreve o conteúdo e layout
    dos elementos em uma página da Web.
  4. Vamos comparar o que vemos
    aqui com o site.
  5. Nesta seção superior, vemos
    a tag head da página definida.
  6. Muitas vezes, vamos encontrar CSS
    em links JavaScript, como estes aqui.
  7. Dentro do corpo do texto,
    podemos ver que temos
  8. conteúdo que diz, Hello world.
  9. E quando alternamos
    para o Chrome, ele está lá.
  10. Se quiser saber
    mais sobre HTML,
  11. confira o link
    nas Notas do instrutor.
  12. Percorrendo o HTML
    do nosso currículo,
  13. há alguns
    elementos importantes.
  14. Como este aqui: div id="main".
  15. Posso ver que ele diz "Hello world"
    aqui, mas é mostrado no site.
  16. Div representa diferentes
    elementos na página,
  17. você pode pensar neles, a princípio,
    como caixas vazias versáteis.
  18. Nesse caso, demos a
    este div uma id exclusiva de main,
  19. à qual nosso JavaScript
    fará referência mais tarde.
  20. Você vê mais
    alguma coisa, James?
  21. Não parece em nada um currículo
    até agora,
  22. mas vejo
    a estrutura de um.
  23. Parece que há seções
    para formação, experiência e projetos.
  24. O que você acha de preenchê-las
    com nossos dados de currículo?
  25. Pois é.
  26. Sabe, os desenvolvedores Web
    têm opções
  27. para criar excelentes páginas da Web.
  28. E eu acho que
    há duas estratégias óbvias.
  29. Podemos fixar as informações
    no código escrevendo um HTML
  30. que defina explicitamente
    o conteúdo que os usuários veem.
  31. Ou podemos usar um template HTML
  32. e preenchê-lo com dados
    de modo programático
  33. quando um usuário solicitar uma página.
  34. Nesse caso, podemos ver
    duas seções de experiência profissional.
  35. Na versão em código,
    vemos todos os dados de Phillip J. Fry
  36. listados aqui.
  37. Enquanto, no lado do template,
    vemos a seção de experiência profissional.
  38. Mas, no momento, está vazia.
  39. A rota fixada no código é
    um bom começo, mas não é
  40. uma solução de longo prazo.
  41. Quando quisermos fazer
    uma alteração na página,
  42. temos que abrir o HTML
    e fazê-la manualmente,
  43. o que pode ser um grande problema.
  44. Para o projeto do currículo, usaremos
    a estratégia de template.
  45. O que você acha?
  46. Sim, por mim, tudo bem.
  47. Até porque, se não fosse,
    esta aula seria sobre HTML.
  48. O que não é.
  49. Sim, há outras excelentes introduções
    ao HTML online.
  50. Veja alguns links
    nas Notas do instrutor.
  51. Na parte superior do HTML,
    há um link para jQuery.js,
  52. a biblioteca jQuery.
  53. Também há helper.js,
  54. que contém JavaScript
    de auxílio simples que
  55. preparamos
    para seu projeto.
  56. Voltaremos nisso
    daqui a pouco.
  57. Temos mais duas tags script
    na parte inferior do HTML.
  58. Esta tag para resumeBuilder.js
    diz ao navegador para baixar
  59. e executar JavaScript.
  60. Usaremos este script para adicionar
    conteúdo HTML
  61. à seção principal do HTML.
  62. O navegador vai renderizar esta página
    dizendo apenas Hello world.
  63. Para que você tenha uma melhor visão geral
    do que acontece aqui,
  64. reduzimos a página para que
    você possa ver tudo de uma vez.
  65. Temos Hello world aqui,
    algumas seções vazias
  66. e algum JavaScript.
  67. Deste lado,
  68. podemos ver uma representação geral
    de como seria sua aparência em um navegador.
  69. Estamos imprimindo o Hello World,
  70. e depois de Hello World, temos
    todas as seções do currículo.
  71. E, quando acessamos a seção JavaScript
    que inclui
  72. o construtor de currículo aqui,
  73. o navegador executa o script.
  74. O que mudará o HTM
    nas seções de experiências
  75. a página agora mostrará
    nosso currículo.
  76. Mas, espere.
  77. Você pode se perguntar: e quanto a
    todas essas seções de experiência?
  78. Parece que elas estão no currículo,
  79. mas não são mostradas
    na página no momento.
  80. Isso se deve a esses scripts
    na parte inferior do nosso currículo.
  81. Usando JavaScript, estamos verificando
    se algumas
  82. destas seções
    têm algum conteúdo.
  83. Se não tiverem, nós as ocultaremos.
  84. Teremos a chance de decompor
    essas seções JavaScript mais tarde.