WEBVTT

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

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

00:00:09.953 --> 00:00:11.442
por razones de seguridad.

00:00:11.442 --> 00:00:13.648
Así que no enseñamos formularios aquí.

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

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

00:00:20.550 --> 00:00:23.074
en lugar de tener que enviarlos a un servidor.

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

00:00:28.096 --> 00:00:30.045
y su idioma.

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

00:00:34.027 --> 00:00:36.666
una vez que se presione este botón.

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

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

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

00:00:53.192 --> 00:00:57.885
"var onButtonClick = function() {"

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

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

00:01:08.729 --> 00:01:10.709
tenemos un lindo mensaje "".

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

00:01:20.707 --> 00:01:23.161
Es un "" muy agradecido.

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

00:01:28.796 --> 00:01:31.711
de manera que cuando lo presionen llame a la función.

00:01:31.711 --> 00:01:36.491
Entonces, '("click", onButtonClick)'.

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

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

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

00:01:52.850 --> 00:01:55.834
Vamos a hacer una variable para eso.

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

00:02:04.770 --> 00:02:07.337
porque tengo un "Id",

00:02:07.337 --> 00:02:11.322
así que lo almacenamos ahí.

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

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

00:02:22.720 --> 00:02:24.203
"+ name".

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

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

00:02:38.772 --> 00:02:41.688
Vamos a ver, se ve bien,

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

00:02:44.899 --> 00:02:47.732
y lo anexamos al "".

00:02:47.732 --> 00:02:53.032
Pausa la guía paso a paso y revisa si funciona.

00:02:53.032 --> 00:02:55.632
No funciona, ¿cierto?

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

00:03:01.877 --> 00:03:04.761
Asumiendo que tu nombre no es "Object",

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

00:03:08.073 --> 00:03:10.508
eso significa que algo está mal.

00:03:10.508 --> 00:03:13.704
Esperábamos ver lo que tecleaste.

00:03:13.704 --> 00:03:16.482
Pero en su lugar vemos que dice "object".

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

00:03:20.682 --> 00:03:23.581
y no está apuntando a la cadena de caracteres que esperábamos.

00:03:23.581 --> 00:03:26.647
Probablemente ya habías descubierto el problema.

00:03:26.647 --> 00:03:31.885
Almacenamos todo el elemento objeto dentro de la variable "name".

00:03:31.885 --> 00:03:34.987
Y el elemento objeto es un objeto grande,

00:03:34.987 --> 00:03:37.095
con mucha información acerca del elemento:

00:03:37.095 --> 00:03:39.532
todos sus atributos, todos sus métodos.

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

00:03:43.472 --> 00:03:46.211
en particular: el valor.

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

00:03:51.918 --> 00:03:56.177
Pausa la guía paso a paso y prueba de nuevo.

00:03:56.177 --> 00:03:57.984
Funcionó ¿cierto?

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

00:04:01.913 --> 00:04:05.007
Quiero mostrarte otro error común.

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

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

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

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

00:04:28.050 --> 00:04:29.693
¿Ya descubriste por qué?

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

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

00:04:37.098 --> 00:04:39.770
y ejecuta el JavaScript línea por línea.

00:04:39.770 --> 00:04:42.928
Primero, almacena el elemento "button" en una variable.

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

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

00:04:50.460 --> 00:04:52.465
cuando debería estar vacío.

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

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

00:05:00.421 --> 00:05:02.877
de caracteres que era cuando la página fue cargada.

00:05:02.877 --> 00:05:06.201
Así que el detector nunca obtiene lo último que el usuario teclea.

00:05:06.201 --> 00:05:08.529
Esa es la razón por la que esta línea de código

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

00:05:13.190 --> 00:05:18.757
para que obtenga el valor cada vez que el evento suceda.

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

00:05:21.938 --> 00:05:24.414
para asegurarnos de que realmente estás entendiendo.

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

00:05:31.769 --> 00:05:34.546
Ogh, mira esta indentación, es horrible.

00:05:34.546 --> 00:05:36.891
Vamos a alinear estas cosas.

00:05:36.891 --> 00:05:38.842
Ok, entonces...

00:05:38.842 --> 00:05:46.633
'lang = document.getElementById("lang").value;'

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

00:05:51.234 --> 00:05:55.291
pero eso es algo que tú no tienes que hacer.

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

00:05:59.787 --> 00:06:03.627
Fijate que el valor no es el que se muestra en el botón desplegable.

00:06:03.627 --> 00:06:06.880
Es el valor del atributo en HTML.

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

00:06:11.250 --> 00:06:17.212
Eso significa que:
'if (lang === "es")',

00:06:17.212 --> 00:06:23.684
entonces el saludo debería ser "Hola,".

00:06:23.684 --> 00:06:26.809
Vamos a continuar y a formar esta variable "greeting".

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

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

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

00:06:48.538 --> 00:06:53.167
Y luego podemos simplemente usar un "else" para nuestro Inglés.

00:06:53.167 --> 00:06:55.366
Y voy a mover esto aquí dentro.

00:06:55.366 --> 00:06:56.799
Muy bien.

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

00:07:00.374 --> 00:07:03.840
trata de hacer un convertidor de nombres a Pig Latin,

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

00:07:07.678 --> 00:07:10.009
Eso estaría muy bien.

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

00:07:13.295 --> 00:07:19.098
presiona un idioma diferente, y prueba.

00:07:19.098 --> 00:07:20.239
Interesante, ¿eh?

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

00:07:24.691 --> 00:07:27.316
juegos de palabras, juegos de números, fabricantes de historias...

00:07:27.316 --> 00:07:30.029
y si tienes un servidor fuera de Khan Academy,

00:07:30.029 --> 00:07:33.447
puedes usar JavaScript para pre-procesar una entrada de formulario

00:07:33.447 --> 00:07:35.361
antes de mandarla al servidor.

00:07:35.361 --> 00:07:38.522
Hay muchos otros eventos que puedes detectar en formularios,

00:07:38.522 --> 00:07:40.701
como eventos de pulsación de teclas y enfoque.

00:07:40.701 --> 00:07:44.152
Sólo recuerda considerar el valor de las entradas,

00:07:44.152 --> 00:07:47.289
y revisar ese valor en el momento correcto.

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

00:07:50.031 --> 00:07:52.644
que es uno de mis favoritos.