Procesando formularios con eventos (Versión en Video)

Un formulario es una manera en que una página web envía información a un servidor.

Nosotros no dejamos que en Khan Academy las página web tengan interacción con los servidores

por razones de seguridad.

Así que no enseñamos formularios aquí.

Pero, ahora que estás aprendiendo JavaScript para manipular páginas web,

puedo mostrarte como usar JavaScript para procesar elementos de un formulario.

en lugar de tener que enviarlos a un servidor.

He creado algunos elementos de formulario en esta página para obtener el nombre del usuario,

y su idioma.

Y quiero que la página web le diga "hola" al usuario en su idioma

una vez que se presione este botón.

El primer paso es almacenar el elemento "button" en una variable.

Así que déjenme poner: 'document.getElementById("button")'.

El siguiente paso es definir la función del detector de eventos.

"var onButtonClick = function() {"

y luego aquí dentro, tenemos que anexar el mensaje.

Así que, 'document.getElementById("message")',

tenemos un lindo mensaje "".

Y sólo tenemos que hacer: 'textContent += "You clicked me! Thank you so much!"' ("¡Me presionaste! ¡Muchas gracias!")

Es un "" muy agradecido.

Finalmente, paso tres, vamos a añadir el detector de eventos al botón,

de manera que cuando lo presionen llame a la función.

Entonces, '("click", onButtonClick)'.

Ahora pausa la guía paso a paso, y verifica que funcione como lo esperas.

Ahora, vamos a hacer que en realidad diga algo basándonos en el formulario.

Necesitamos descubrir cómo podemos obtener lo que el usuario teclea en el campo de entrada.

Vamos a hacer una variable para eso.

Así que "var name = document.getElementById("...,

porque tengo un "Id",

así que lo almacenamos ahí.

Vamos a hacer una nueva cadena de caracteres para el saludo, y concatenar el nombre,

entonces: 'var greeting = "Heyaz"', ese es mi saludo favorito.

"+ name".

Ok, entonces ya tenemos una cadena de caracteres que incluye cualquier cosa que esté almacenada en esa variable.

Y ahora, esto de aquí, este contenido de texto, debería ser en realidad "greeting" (El saludo).

Vamos a ver, se ve bien,

obtenemos el nombre que se teclea, y formamos una cadena de caracteres,

y lo anexamos al "".

Pausa la guía paso a paso y revisa si funciona.

No funciona, ¿cierto?

¿Viste que dice: "Heyaz[object Object]", o "Heyaz object Element"?

Asumiendo que tu nombre no es "Object",

y no te ofendas si así fuera, es un gran nombre,

eso significa que algo está mal.

Esperábamos ver lo que tecleaste.

Pero en su lugar vemos que dice "object".

Eso significa que la variable "name" está apuntando a un objeto,

y no está apuntando a la cadena de caracteres que esperábamos.

Probablemente ya habías descubierto el problema.

Almacenamos todo el elemento objeto dentro de la variable "name".

Y el elemento objeto es un objeto grande,

con mucha información acerca del elemento:

todos sus atributos, todos sus métodos.

Para encontrar lo que el usuario tecleó, tenemos que acceder a una propiedad del elemento

en particular: el valor.

Voy a continuar y a teclear: ".value", y eso lo debe corregir.

Pausa la guía paso a paso y prueba de nuevo.

Funcionó ¿cierto?

Ahora, es muy común cometer ese error, así que debes fijarte.

Quiero mostrarte otro error común.

Voy a tomar esta línea de aquí y la voy a mover fuera de la función.

Ahora, pausa la guía paso a paso, teclea en la entrada y presiona el botón.

Si falla como debería, entonces lo que viste fue

una cadena de caracteres vacía, sin tu nombre.

¿Ya descubriste por qué?

Tienes que pensar cuidadosamente sobre cuándo es ejecutada cada línea del código.

En el código actual, el navegador carga la página,

y ejecuta el JavaScript línea por línea.

Primero, almacena el elemento "button" en una variable.

Luego, almacena el valor del elemento de entrada en una variable.

Pero almacena el valor que tiene a la hora de cargar la página,

cuando debería estar vacío.

Luego, define una función y asigna el detector de eventos.

Cuando el detector es llamado, el nombre sigue siendo la misma cadena

de caracteres que era cuando la página fue cargada.

Así que el detector nunca obtiene lo último que el usuario teclea.

Esa es la razón por la que esta línea de código

debe estar dentro de la función del detector de eventos,

para que obtenga el valor cada vez que el evento suceda.

Vamos a añadir algo de código para obtener ahora el valor del idioma,

para asegurarnos de que realmente estás entendiendo.

Dentro del detector, voy a almacenar el idioma en la variable "lang".

Ogh, mira esta indentación, es horrible.

Vamos a alinear estas cosas.

Ok, entonces...

'lang = document.getElementById("lang").value;'

Y puedes ver que estoy escribiendo nombres de variables igual que mis "Id´s",

pero eso es algo que tú no tienes que hacer.

Ahora, quiero que el resultado sea un mensaje diferente con base en el lenguaje seleccionado.

Fijate que el valor no es el que se muestra en el botón desplegable.

Es el valor del atributo en HTML.

Así que "lang" podría ser "en", "es" o "plt".

Eso significa que:
'if (lang === "es")',

entonces el saludo debería ser "Hola,".

Vamos a continuar y a formar esta variable "greeting".

Entonces "greeting" va a ser "Hola," más "name".

Y luego si la variable "lang" es igual a "plt", Pig Latin (Latín de los cerdos),

el saludo será "Ello-hey," más el nombre.

Y luego podemos simplemente usar un "else" para nuestro Inglés.

Y voy a mover esto aquí dentro.

Muy bien.

Oh, y si quieres un desafío divertido extra,

trata de hacer un convertidor de nombres a Pig Latin,

para que el saludo completo, incluyendo los nombres, sea traducido.

Eso estaría muy bien.

Ahora, pausa la guía paso a paso, e introduce tu nombre,

presiona un idioma diferente, y prueba.

Interesante, ¿eh?

Ahora, hay una gran cantidad de cosas que puedes hacer con las entradas de un formulario y un poco de JavaScript:

juegos de palabras, juegos de números, fabricantes de historias...

y si tienes un servidor fuera de Khan Academy,

puedes usar JavaScript para pre-procesar una entrada de formulario

antes de mandarla al servidor.

Hay muchos otros eventos que puedes detectar en formularios,

como eventos de pulsación de teclas y enfoque.

Sólo recuerda considerar el valor de las entradas,

y revisar ese valor en el momento correcto.

Tendrás que practicar esto en el siguiente desafío,

que es uno de mis favoritos.