Return to Video

The Resumes HTML - JavaScript Basics

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

more » « less
Video Language:
English
Team:
Udacity
Projekt:
ud804 - Javascript Basics
Duration:
04:01

Portuguese, Brazilian subtitles

Revisions Compare revisions