YouTube

Got a YouTube account?

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

Portuguese, Brazilian subtitles

← Processamento de formulários com eventos (Versão Vídeo)

Get Embed Code
6 Languages

Showing Revision 20 created 04/26/2015 by Paulo Trentin.

  1. Um formulário é uma maneira de uma webpage
    enviar informações para um servidor.

  2. Nós não deixamos a webpages aqui no
    Khan Academy interagir com os servers
  3. por motivos de segurança.
  4. Então nós não ensinamos formulários aqui.
  5. Mas, agora que você está aprendendo
    JavaScript para manipular webpages,
  6. vou mostrar como usar JavaScript para
    processar elementos de formulários
  7. em vez de ter que enviá-los
    para um servidor.
  8. Eu configurei elementos de formulário
    aqui para descobrir o nome do usuário,
  9. e a sua linguagem.
  10. E eu quero que a webpage diga "olá"
    para o usuário em sua linguagem
  11. uma vez que ele aperte nesse botão.
  12. O primeiro passo é guardar o
    elemento botão em uma variável.
  13. Então nós iremos dizer:
    `document.getElementById("button")`.
  14. O próximo passar é definir
    a função de listner do evento.
  15. `var onButtonClick = function() {`
  16. e então, dentro daqui, nós iremos apenas
    começar anexando uma mensagem.
  17. Então,
    `document.getElementById("message")`,
  18. nós temos uma pequenina
    mensagem legal "div".
  19. E nós iremos apenas: `textContent +=
    "Você me clicou! Muito obrigado!"`
  20. Um "div" muito grato!
  21. Finalmente, terceiro passo, nós iremos
    adicionar o evento listner para o botão
  22. para que isto possa chamar
    a função quando for clicado.
  23. então,`("click", onButtonClick)`.
  24. Pause o tutorial agora, e veja por conta
    própria, que ele funciona como o esperado.
  25. Agora, vamos fazê-lo dizer alguma coisa
    com base no que há no formulário.
  26. Precisamos descobrir como conseguir o que
    o usuário digitou no campo "name".
  27. Vamos fazer uma variável para isso.
  28. Então,
    `var name = document.getElementById`,
  29. desde que isso possui uma ID,
  30. então nós colocamos ela lá.
  31. Vamos fazer um novo "string" para
    as saudações, e unir o nosso disso,
  32. então `var greeting = "Heyaz"`,
    essa é minha saudação favorita,
  33. ` + name`.
  34. Okay, então nós temos uma "string", e mais
    o que estiver armazenado na variável.
  35. E agora, este aqui, o conteúdo do texto,
    realmente deve ser `greeting` .
  36. Vamos ver, isso parece certo
  37. encontramos a entrada do nome,
    fizemos uma "string" de saudações,
  38. e nós anexamos isso a um "div".
  39. Pause o tutorial, e veja
    se isso funcionou.
  40. Não é bem assim , né?
  41. Você viu "Heyaz [object Object]", ou
    "Heyaz object Element"?
  42. Assumir que o seu "nome" não é um Objeto
  43. e sem ofensa , se for,
    isso é um ótimo nome--
  44. isso significa que algo está errado.
  45. Nós esperamos ver o que você digitou.
  46. Mas nós vemos "object".
  47. Isso significa que a variável "name" está
    apontando para um objeto,
  48. e não a "string" que nós esperávamos
    que estivesse apontando.
  49. Talvez você já tenha
    descoberto o problema.
  50. Nós armazenamos todo o elemento de
    objeto, dentro da variável "name".
  51. E o elemento de um objeto
    é um grande objeto
  52. com muita informação sobre o elemento:
  53. todos os seus atributos,
    todos os seus métodos.
  54. Para encontrar o que o usuário digitou,
    nós temos que acessar uma propriedade
  55. particular dos elementos: o valor.
  56. E eu vou digitar `.value`,
    que deve concertar isso.
  57. Pause o tutorial, e tente novamente.
  58. Funcionou, certo?
  59. Agora, esse é um erro comum, então
    preste atenção em relação a isso.
  60. Eu quero lhe mostrar mais um erro comum.
  61. Eu vou pegar essa linha daqui,
    e mover para fora da função.
  62. Agora, pause o tutorial, digite a entrada
    e pressione o botão.
  63. Se ele quebrou da maneira que deveria,
    então você deve ter visto,
  64. uma "string" vazia para o seu nome.
  65. Descobriu o porquê?
  66. Você deve pensar com cuidado sobre
    cada linha que é executada.
  67. No código atual, o navegador
    carrega a página,
  68. e executa o JavaScript linha por linha.
  69. Primeiro, guarda o
    elemento botão na variável.
  70. Em seguida, armazena o valor do
    o elemento de entrada na variável.
  71. Porém, armazena o valor no
    tempo que a página carrega,
  72. o qual estará vazio.
  73. Em seguida, ele define uma função
    e atribui o evento listner (que ouve).
  74. Quando o listner é chamado, o "name"
    ainda está a mesma "string"
  75. que estava quando a página foi carregada.
  76. Assim, o listner nunca descobre
    a última coisa que o usuário digitou.
  77. E por isso essa linha de código
  78. deve ficar no interior dessa
    função evento listner,
  79. então ele encontra o valor no tempo
    em que o evento ocorre.
  80. Vamos adicionar um código para
    olhar o valor da linguagem agora,
  81. para ter certeza que você está
    realmente entendendo isso.
  82. Dentro do listner, eu irei armazenar
    a linguagem dentro da variável "lang".
  83. Ugh, olhe essa indentação, está horrível.
  84. Vamos alinhar isso.
  85. Okay, então...
  86. [digitando]
  87. E você irá notar que eu estou nomeando
    minhas variáveis iguais as minhas IDs,
  88. mais isso é apenas o que eu estou fazendo,
    você não precisar fazer o mesmo.
  89. Agora, quero exibir uma mensagem diferente
    baseada na linguagem que eles encolheram.
  90. Observe o valor não é o que é mostrado
    no drop-down.
  91. É o valor atribuído no HTML.
  92. Então "lang" deve ser "en", "es" ou "plt".
  93. então isso significa que:
    `if (lang === "es")`,
  94. então a saudação deverá ser "Hola",
  95. Vamos em frente e fazer
    essa variável de saudação aqui.
  96. Então a saudação
    será "Hola, " mais o nome.
  97. E se a linguagem por igual a "plt",
    a velha e boa "Pig Latin",
  98. a saudação deverá ser,
    "Ello-hey, " mais o nome.
  99. e então nós podemos utilizar
    um "else" para o nosso Inglês.
  100. Eu vou apenas mover isso para dentro.
  101. Muito bem.
  102. Ooh, e se você quiser um desafio bônus,
  103. tente fazer um conversor
    "Pig Latin" para nomes,
  104. para que a saudação inteira,
    inclusive o nome, seja traduzida.
  105. Isso seria bem legal.
  106. Agora pause o tutorial,
    coloque o seu nome,
  107. escolha uma linguagem diferente e tente.
  108. Legal, né?
  109. Existem várias coisas que você pode fazer
    com entradas de formulário e JavaScript:
  110. jogos de palavra, jogos de
    números, contador de histórias...
  111. e se você tiver um server
    fora do Khan Academy,
  112. você pode utilizar o JavaScript para
    pré-processar o formato de saída
  113. antes de mandar para o servidor.
  114. Exitem muito mais eventos que você
    pode usar com um formulário,
  115. como pressionar teclas e eventos de foco.
  116. Apenas se lembre de olhar
    para o valor de entrada,
  117. e conferir o valor na hora certa.
  118. Você pegará a prática nisso
    no próximo desafio,
  119. o qual é o meu favorito.
  120. [Legendado por Gabriel Mello Fernandes]
    [Revisado por Paulo Trentin]