< Return to Video

Procesando formularios con eventos (Versión en Video)

  • 0:00 - 0:05
    Un formulario es una manera en que una página web envía información a un servidor.
  • 0:05 - 0:10
    Nosotros no dejamos que en Khan Academy las página web tengan interacción con los servidores
  • 0:10 - 0:11
    por razones de seguridad.
  • 0:11 - 0:14
    Así que no enseñamos formularios aquí.
  • 0:14 - 0:17
    Pero, ahora que estás aprendiendo JavaScript para manipular páginas web,
  • 0:17 - 0:21
    puedo mostrarte como usar JavaScript para procesar elementos de un formulario.
  • 0:21 - 0:23
    en lugar de tener que enviarlos a un servidor.
  • 0:23 - 0:28
    He creado algunos elementos de formulario en esta página para obtener el nombre del usuario,
  • 0:28 - 0:30
    y su idioma.
  • 0:30 - 0:34
    Y quiero que la página web le diga "hola" al usuario en su idioma
  • 0:34 - 0:37
    una vez que se presione este botón.
  • 0:37 - 0:41
    El primer paso es almacenar el elemento "button" en una variable.
  • 0:41 - 0:49
    Así que déjenme poner: 'document.getElementById("button")'.
  • 0:49 - 0:53
    El siguiente paso es definir la función del detector de eventos.
  • 0:53 - 0:58
    "var onButtonClick = function() {"
  • 0:58 - 1:04
    y luego aquí dentro, tenemos que anexar el mensaje.
  • 1:04 - 1:09
    Así que, 'document.getElementById("message")',
  • 1:09 - 1:11
    tenemos un lindo mensaje "".
  • 1:11 - 1:21
    Y sólo tenemos que hacer: 'textContent += "You clicked me! Thank you so much!"' ("¡Me presionaste! ¡Muchas gracias!")
  • 1:21 - 1:23
    Es un "" muy agradecido.
  • 1:23 - 1:29
    Finalmente, paso tres, vamos a añadir el detector de eventos al botón,
  • 1:29 - 1:32
    de manera que cuando lo presionen llame a la función.
  • 1:32 - 1:36
    Entonces, '("click", onButtonClick)'.
  • 1:36 - 1:43
    Ahora pausa la guía paso a paso, y verifica que funcione como lo esperas.
  • 1:43 - 1:48
    Ahora, vamos a hacer que en realidad diga algo basándonos en el formulario.
  • 1:48 - 1:53
    Necesitamos descubrir cómo podemos obtener lo que el usuario teclea en el campo de entrada.
  • 1:53 - 1:56
    Vamos a hacer una variable para eso.
  • 1:56 - 2:05
    Así que "var name = document.getElementById("...,
  • 2:05 - 2:07
    porque tengo un "Id",
  • 2:07 - 2:11
    así que lo almacenamos ahí.
  • 2:11 - 2:17
    Vamos a hacer una nueva cadena de caracteres para el saludo, y concatenar el nombre,
  • 2:17 - 2:23
    entonces: 'var greeting = "Heyaz"', ese es mi saludo favorito.
  • 2:23 - 2:24
    "+ name".
  • 2:24 - 2:30
    Ok, entonces ya tenemos una cadena de caracteres que incluye cualquier cosa que esté almacenada en esa variable.
  • 2:30 - 2:39
    Y ahora, esto de aquí, este contenido de texto, debería ser en realidad "greeting" (El saludo).
  • 2:39 - 2:42
    Vamos a ver, se ve bien,
  • 2:42 - 2:45
    obtenemos el nombre que se teclea, y formamos una cadena de caracteres,
  • 2:45 - 2:48
    y lo anexamos al "".
  • 2:48 - 2:53
    Pausa la guía paso a paso y revisa si funciona.
  • 2:53 - 2:56
    No funciona, ¿cierto?
  • 2:56 - 3:02
    ¿Viste que dice: "Heyaz[object Object]", o "Heyaz object Element"?
  • 3:02 - 3:05
    Asumiendo que tu nombre no es "Object",
  • 3:05 - 3:08
    y no te ofendas si así fuera, es un gran nombre,
  • 3:08 - 3:11
    eso significa que algo está mal.
  • 3:11 - 3:14
    Esperábamos ver lo que tecleaste.
  • 3:14 - 3:16
    Pero en su lugar vemos que dice "object".
  • 3:16 - 3:21
    Eso significa que la variable "name" está apuntando a un objeto,
  • 3:21 - 3:24
    y no está apuntando a la cadena de caracteres que esperábamos.
  • 3:24 - 3:27
    Probablemente ya habías descubierto el problema.
  • 3:27 - 3:32
    Almacenamos todo el elemento objeto dentro de la variable "name".
  • 3:32 - 3:35
    Y el elemento objeto es un objeto grande,
  • 3:35 - 3:37
    con mucha información acerca del elemento:
  • 3:37 - 3:40
    todos sus atributos, todos sus métodos.
  • 3:40 - 3:43
    Para encontrar lo que el usuario tecleó, tenemos que acceder a una propiedad del elemento
  • 3:43 - 3:46
    en particular: el valor.
  • 3:46 - 3:52
    Voy a continuar y a teclear: ".value", y eso lo debe corregir.
  • 3:52 - 3:56
    Pausa la guía paso a paso y prueba de nuevo.
  • 3:56 - 3:58
    Funcionó ¿cierto?
  • 3:58 - 4:02
    Ahora, es muy común cometer ese error, así que debes fijarte.
  • 4:02 - 4:05
    Quiero mostrarte otro error común.
  • 4:05 - 4:14
    Voy a tomar esta línea de aquí y la voy a mover fuera de la función.
  • 4:14 - 4:23
    Ahora, pausa la guía paso a paso, teclea en la entrada y presiona el botón.
  • 4:23 - 4:26
    Si falla como debería, entonces lo que viste fue
  • 4:26 - 4:28
    una cadena de caracteres vacía, sin tu nombre.
  • 4:28 - 4:30
    ¿Ya descubriste por qué?
  • 4:30 - 4:34
    Tienes que pensar cuidadosamente sobre cuándo es ejecutada cada línea del código.
  • 4:34 - 4:37
    En el código actual, el navegador carga la página,
  • 4:37 - 4:40
    y ejecuta el JavaScript línea por línea.
  • 4:40 - 4:43
    Primero, almacena el elemento "button" en una variable.
  • 4:43 - 4:47
    Luego, almacena el valor del elemento de entrada en una variable.
  • 4:47 - 4:50
    Pero almacena el valor que tiene a la hora de cargar la página,
  • 4:50 - 4:52
    cuando debería estar vacío.
  • 4:52 - 4:56
    Luego, define una función y asigna el detector de eventos.
  • 4:56 - 5:00
    Cuando el detector es llamado, el nombre sigue siendo la misma cadena
  • 5:00 - 5:03
    de caracteres que era cuando la página fue cargada.
  • 5:03 - 5:06
    Así que el detector nunca obtiene lo último que el usuario teclea.
  • 5:06 - 5:09
    Esa es la razón por la que esta línea de código
  • 5:09 - 5:13
    debe estar dentro de la función del detector de eventos,
  • 5:13 - 5:19
    para que obtenga el valor cada vez que el evento suceda.
  • 5:19 - 5:22
    Vamos a añadir algo de código para obtener ahora el valor del idioma,
  • 5:22 - 5:24
    para asegurarnos de que realmente estás entendiendo.
  • 5:24 - 5:31
    Dentro del detector, voy a almacenar el idioma en la variable "lang".
  • 5:32 - 5:35
    Ogh, mira esta indentación, es horrible.
  • 5:35 - 5:37
    Vamos a alinear estas cosas.
  • 5:37 - 5:39
    Ok, entonces...
  • 5:39 - 5:47
    'lang = document.getElementById("lang").value;'
  • 5:47 - 5:51
    Y puedes ver que estoy escribiendo nombres de variables igual que mis "Id´s",
  • 5:51 - 5:55
    pero eso es algo que tú no tienes que hacer.
  • 5:55 - 6:00
    Ahora, quiero que el resultado sea un mensaje diferente con base en el lenguaje seleccionado.
  • 6:00 - 6:04
    Fijate que el valor no es el que se muestra en el botón desplegable.
  • 6:04 - 6:07
    Es el valor del atributo en HTML.
  • 6:07 - 6:11
    Así que "lang" podría ser "en", "es" o "plt".
  • 6:11 - 6:17
    Eso significa que:
    'if (lang === "es")',
  • 6:17 - 6:24
    entonces el saludo debería ser "Hola,".
  • 6:24 - 6:27
    Vamos a continuar y a formar esta variable "greeting".
  • 6:27 - 6:35
    Entonces "greeting" va a ser "Hola," más "name".
  • 6:35 - 6:41
    Y luego si la variable "lang" es igual a "plt", Pig Latin (Latín de los cerdos),
  • 6:41 - 6:49
    el saludo será "Ello-hey," más el nombre.
  • 6:49 - 6:53
    Y luego podemos simplemente usar un "else" para nuestro Inglés.
  • 6:53 - 6:55
    Y voy a mover esto aquí dentro.
  • 6:55 - 6:57
    Muy bien.
  • 6:57 - 7:00
    Oh, y si quieres un desafío divertido extra,
  • 7:00 - 7:04
    trata de hacer un convertidor de nombres a Pig Latin,
  • 7:04 - 7:08
    para que el saludo completo, incluyendo los nombres, sea traducido.
  • 7:08 - 7:10
    Eso estaría muy bien.
  • 7:10 - 7:13
    Ahora, pausa la guía paso a paso, e introduce tu nombre,
  • 7:13 - 7:19
    presiona un idioma diferente, y prueba.
  • 7:19 - 7:20
    Interesante, ¿eh?
  • 7:20 - 7:25
    Ahora, hay una gran cantidad de cosas que puedes hacer con las entradas de un formulario y un poco de JavaScript:
  • 7:25 - 7:27
    juegos de palabras, juegos de números, fabricantes de historias...
  • 7:27 - 7:30
    y si tienes un servidor fuera de Khan Academy,
  • 7:30 - 7:33
    puedes usar JavaScript para pre-procesar una entrada de formulario
  • 7:33 - 7:35
    antes de mandarla al servidor.
  • 7:35 - 7:39
    Hay muchos otros eventos que puedes detectar en formularios,
  • 7:39 - 7:41
    como eventos de pulsación de teclas y enfoque.
  • 7:41 - 7:44
    Sólo recuerda considerar el valor de las entradas,
  • 7:44 - 7:47
    y revisar ese valor en el momento correcto.
  • 7:47 - 7:50
    Tendrás que practicar esto en el siguiente desafío,
  • 7:50 - 7:53
    que es uno de mis favoritos.
Title:
Procesando formularios con eventos (Versión en Video)
Description:

more » « less
Video Language:
English
Duration:
07:54

Spanish, Mexican subtitles

Revisions