0:00:00.000,0:00:05.452
Un formulario es una manera en que una página web envía información a un servidor.

0:00:05.452,0:00:09.953
Nosotros no dejamos que en Khan Academy las página web tengan interacción con los servidores

0:00:09.953,0:00:11.442
por razones de seguridad.

0:00:11.442,0:00:13.648
Así que no enseñamos formularios aquí.

0:00:13.648,0:00:16.997
Pero, ahora que estás aprendiendo JavaScript para manipular páginas web,

0:00:16.997,0:00:20.550
puedo mostrarte como usar JavaScript para procesar elementos de un formulario.

0:00:20.550,0:00:23.074
en lugar de tener que enviarlos a un servidor.

0:00:23.074,0:00:28.096
He creado algunos elementos de formulario en esta página para obtener el nombre del usuario,

0:00:28.096,0:00:30.045
y su idioma.

0:00:30.045,0:00:34.027
Y quiero que la página web le diga "hola" al usuario en su idioma

0:00:34.027,0:00:36.666
una vez que se presione este botón.

0:00:36.666,0:00:41.457
El primer paso es almacenar el elemento "button" en una variable.

0:00:41.457,0:00:49.307
Así que déjenme poner: 'document.getElementById("button")'.

0:00:49.307,0:00:53.192
El siguiente paso es definir la función del detector de eventos.

0:00:53.192,0:00:57.885
"var onButtonClick = function() {"

0:00:57.885,0:01:03.770
y luego aquí dentro, tenemos que anexar el mensaje.

0:01:03.770,0:01:08.729
Así que, 'document.getElementById("message")',

0:01:08.729,0:01:10.709
tenemos un lindo mensaje "".

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

0:01:20.707,0:01:23.161
Es un "" muy agradecido.

0:01:23.161,0:01:28.796
Finalmente, paso tres, vamos a añadir el detector de eventos al botón,

0:01:28.796,0:01:31.711
de manera que cuando lo presionen llame a la función.

0:01:31.711,0:01:36.491
Entonces, '("click", onButtonClick)'.

0:01:36.491,0:01:42.959
Ahora pausa la guía paso a paso, y verifica que funcione como lo esperas.

0:01:42.959,0:01:47.971
Ahora, vamos a hacer que en realidad diga algo basándonos en el formulario.

0:01:47.971,0:01:52.850
Necesitamos descubrir cómo podemos obtener lo que el usuario teclea en el campo de entrada.

0:01:52.850,0:01:55.834
Vamos a hacer una variable para eso.

0:01:55.834,0:02:04.770
Así que "var name = document.getElementById("...,

0:02:04.770,0:02:07.337
porque tengo un "Id",

0:02:07.337,0:02:11.322
así que lo almacenamos ahí.

0:02:11.322,0:02:17.115
Vamos a hacer una nueva cadena de caracteres para el saludo, y concatenar el nombre,

0:02:17.115,0:02:22.720
entonces: 'var greeting = "Heyaz"', ese es mi saludo favorito.

0:02:22.720,0:02:24.203
"+ name".

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

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

0:02:38.772,0:02:41.688
Vamos a ver, se ve bien,

0:02:41.688,0:02:44.899
obtenemos el nombre que se teclea, y formamos una cadena de caracteres,

0:02:44.899,0:02:47.732
y lo anexamos al "".

0:02:47.732,0:02:53.032
Pausa la guía paso a paso y revisa si funciona.

0:02:53.032,0:02:55.632
No funciona, ¿cierto?

0:02:55.632,0:03:01.877
¿Viste que dice: "Heyaz[object Object]", o "Heyaz object Element"?

0:03:01.877,0:03:04.761
Asumiendo que tu nombre no es "Object",

0:03:04.761,0:03:08.073
y no te ofendas si así fuera, es un gran nombre,

0:03:08.073,0:03:10.508
eso significa que algo está mal.

0:03:10.508,0:03:13.704
Esperábamos ver lo que tecleaste.

0:03:13.704,0:03:16.482
Pero en su lugar vemos que dice "object".

0:03:16.482,0:03:20.682
Eso significa que la variable "name" está apuntando a un objeto,

0:03:20.682,0:03:23.581
y no está apuntando a la cadena de caracteres que esperábamos.

0:03:23.581,0:03:26.647
Probablemente ya habías descubierto el problema.

0:03:26.647,0:03:31.885
Almacenamos todo el elemento objeto dentro de la variable "name".

0:03:31.885,0:03:34.987
Y el elemento objeto es un objeto grande,

0:03:34.987,0:03:37.095
con mucha información acerca del elemento:

0:03:37.095,0:03:39.532
todos sus atributos, todos sus métodos.

0:03:39.532,0:03:43.472
Para encontrar lo que el usuario tecleó, tenemos que acceder a una propiedad del elemento

0:03:43.472,0:03:46.211
en particular: el valor.

0:03:46.211,0:03:51.918
Voy a continuar y a teclear: ".value", y eso lo debe corregir.

0:03:51.918,0:03:56.177
Pausa la guía paso a paso y prueba de nuevo.

0:03:56.177,0:03:57.984
Funcionó ¿cierto?

0:03:57.984,0:04:01.913
Ahora, es muy común cometer ese error, así que debes fijarte.

0:04:01.913,0:04:05.007
Quiero mostrarte otro error común.

0:04:05.007,0:04:13.960
Voy a tomar esta línea de aquí y la voy a mover fuera de la función.

0:04:13.960,0:04:22.740
Ahora, pausa la guía paso a paso, teclea en la entrada y presiona el botón.

0:04:22.740,0:04:25.997
Si falla como debería, entonces lo que viste fue

0:04:25.997,0:04:28.050
una cadena de caracteres vacía, sin tu nombre.

0:04:28.050,0:04:29.693
¿Ya descubriste por qué?

0:04:29.693,0:04:33.937
Tienes que pensar cuidadosamente sobre cuándo es ejecutada cada línea del código.

0:04:33.937,0:04:37.098
En el código actual, el navegador carga la página,

0:04:37.098,0:04:39.770
y ejecuta el JavaScript línea por línea.

0:04:39.770,0:04:42.928
Primero, almacena el elemento "button" en una variable.

0:04:42.928,0:04:46.817
Luego, almacena el valor del elemento de entrada en una variable.

0:04:46.817,0:04:50.460
Pero almacena el valor que tiene a la hora de cargar la página,

0:04:50.460,0:04:52.465
cuando debería estar vacío.

0:04:52.465,0:04:56.320
Luego, define una función y asigna el detector de eventos.

0:04:56.320,0:05:00.421
Cuando el detector es llamado, el nombre sigue siendo la misma cadena

0:05:00.421,0:05:02.877
de caracteres que era cuando la página fue cargada.

0:05:02.877,0:05:06.201
Así que el detector nunca obtiene lo último que el usuario teclea.

0:05:06.201,0:05:08.529
Esa es la razón por la que esta línea de código

0:05:08.529,0:05:13.190
debe estar dentro de la función del detector de eventos,

0:05:13.190,0:05:18.757
para que obtenga el valor cada vez que el evento suceda.

0:05:18.757,0:05:21.938
Vamos a añadir algo de código para obtener ahora el valor del idioma,

0:05:21.938,0:05:24.414
para asegurarnos de que realmente estás entendiendo.

0:05:24.414,0:05:31.049
Dentro del detector, voy a almacenar el idioma en la variable "lang".

0:05:31.769,0:05:34.546
Ogh, mira esta indentación, es horrible.

0:05:34.546,0:05:36.891
Vamos a alinear estas cosas.

0:05:36.891,0:05:38.842
Ok, entonces...

0:05:38.842,0:05:46.633
'lang = document.getElementById("lang").value;'

0:05:46.773,0:05:51.234
Y puedes ver que estoy escribiendo nombres de variables igual que mis "Id´s",

0:05:51.234,0:05:55.291
pero eso es algo que tú no tienes que hacer.

0:05:55.291,0:05:59.787
Ahora, quiero que el resultado sea un mensaje diferente con base en el lenguaje seleccionado.

0:05:59.787,0:06:03.627
Fijate que el valor no es el que se muestra en el botón desplegable.

0:06:03.627,0:06:06.880
Es el valor del atributo en HTML.

0:06:06.880,0:06:11.250
Así que "lang" podría ser "en", "es" o "plt".

0:06:11.250,0:06:17.212
Eso significa que:[br]'if (lang === "es")',

0:06:17.212,0:06:23.684
entonces el saludo debería ser "Hola,".

0:06:23.684,0:06:26.809
Vamos a continuar y a formar esta variable "greeting".

0:06:26.809,0:06:35.105
Entonces "greeting" va a ser "Hola," más "name".

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

0:06:41.218,0:06:48.538
el saludo será "Ello-hey," más el nombre.

0:06:48.538,0:06:53.167
Y luego podemos simplemente usar un "else" para nuestro Inglés.

0:06:53.167,0:06:55.366
Y voy a mover esto aquí dentro.

0:06:55.366,0:06:56.799
Muy bien.

0:06:56.799,0:07:00.374
Oh, y si quieres un desafío divertido extra,

0:07:00.374,0:07:03.840
trata de hacer un convertidor de nombres a Pig Latin,

0:07:03.840,0:07:07.678
para que el saludo completo, incluyendo los nombres, sea traducido.

0:07:07.678,0:07:10.009
Eso estaría muy bien.

0:07:10.009,0:07:13.295
Ahora, pausa la guía paso a paso, e introduce tu nombre,

0:07:13.295,0:07:19.098
presiona un idioma diferente, y prueba.

0:07:19.098,0:07:20.239
Interesante, ¿eh?

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

0:07:24.691,0:07:27.316
juegos de palabras, juegos de números, fabricantes de historias...

0:07:27.316,0:07:30.029
y si tienes un servidor fuera de Khan Academy,

0:07:30.029,0:07:33.447
puedes usar JavaScript para pre-procesar una entrada de formulario

0:07:33.447,0:07:35.361
antes de mandarla al servidor.

0:07:35.361,0:07:38.522
Hay muchos otros eventos que puedes detectar en formularios,

0:07:38.522,0:07:40.701
como eventos de pulsación de teclas y enfoque.

0:07:40.701,0:07:44.152
Sólo recuerda considerar el valor de las entradas,

0:07:44.152,0:07:47.289
y revisar ese valor en el momento correcto.

0:07:47.289,0:07:50.031
Tendrás que practicar esto en el siguiente desafío,

0:07:50.031,0:07:52.644
que es uno de mis favoritos.