[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.00,0:00:05.45,Default,,0000,0000,0000,,Un formulario es una manera en que una página web envía información a un servidor.
Dialogue: 0,0:00:05.45,0:00:09.95,Default,,0000,0000,0000,,Nosotros no dejamos que en Khan Academy las página web tengan interacción con los servidores
Dialogue: 0,0:00:09.95,0:00:11.44,Default,,0000,0000,0000,,por razones de seguridad.
Dialogue: 0,0:00:11.44,0:00:13.65,Default,,0000,0000,0000,,Así que no enseñamos formularios aquí.
Dialogue: 0,0:00:13.65,0:00:16.100,Default,,0000,0000,0000,,Pero, ahora que estás aprendiendo JavaScript para manipular páginas web,
Dialogue: 0,0:00:16.100,0:00:20.55,Default,,0000,0000,0000,,puedo mostrarte como usar JavaScript para procesar elementos de un formulario.
Dialogue: 0,0:00:20.55,0:00:23.07,Default,,0000,0000,0000,,en lugar de tener que enviarlos a un servidor.
Dialogue: 0,0:00:23.07,0:00:28.10,Default,,0000,0000,0000,,He creado algunos elementos de formulario en esta página para obtener el nombre del usuario,
Dialogue: 0,0:00:28.10,0:00:30.04,Default,,0000,0000,0000,,y su idioma.
Dialogue: 0,0:00:30.04,0:00:34.03,Default,,0000,0000,0000,,Y quiero que la página web le diga "hola" al usuario en su idioma
Dialogue: 0,0:00:34.03,0:00:36.67,Default,,0000,0000,0000,,una vez que se presione este botón.
Dialogue: 0,0:00:36.67,0:00:41.46,Default,,0000,0000,0000,,El primer paso es almacenar el elemento "button" en una variable.
Dialogue: 0,0:00:41.46,0:00:49.31,Default,,0000,0000,0000,,Así que déjenme poner: 'document.getElementById("button")'.
Dialogue: 0,0:00:49.31,0:00:53.19,Default,,0000,0000,0000,,El siguiente paso es definir la función del detector de eventos.
Dialogue: 0,0:00:53.19,0:00:57.88,Default,,0000,0000,0000,,"var onButtonClick = function() {"
Dialogue: 0,0:00:57.88,0:01:03.77,Default,,0000,0000,0000,,y luego aquí dentro, tenemos que anexar el mensaje.
Dialogue: 0,0:01:03.77,0:01:08.73,Default,,0000,0000,0000,,Así que, 'document.getElementById("message")',
Dialogue: 0,0:01:08.73,0:01:10.71,Default,,0000,0000,0000,,tenemos un lindo mensaje "".
Dialogue: 0,0:01:10.71,0:01:20.71,Default,,0000,0000,0000,,Y sólo tenemos que hacer: 'textContent += "You clicked me! Thank you so much!"' ("¡Me presionaste! ¡Muchas gracias!")
Dialogue: 0,0:01:20.71,0:01:23.16,Default,,0000,0000,0000,,Es un "" muy agradecido.
Dialogue: 0,0:01:23.16,0:01:28.80,Default,,0000,0000,0000,,Finalmente, paso tres, vamos a añadir el detector de eventos al botón,
Dialogue: 0,0:01:28.80,0:01:31.71,Default,,0000,0000,0000,,de manera que cuando lo presionen llame a la función.
Dialogue: 0,0:01:31.71,0:01:36.49,Default,,0000,0000,0000,,Entonces, '("click", onButtonClick)'.
Dialogue: 0,0:01:36.49,0:01:42.96,Default,,0000,0000,0000,,Ahora pausa la guía paso a paso, y verifica que funcione como lo esperas.
Dialogue: 0,0:01:42.96,0:01:47.97,Default,,0000,0000,0000,,Ahora, vamos a hacer que en realidad diga algo basándonos en el formulario.
Dialogue: 0,0:01:47.97,0:01:52.85,Default,,0000,0000,0000,,Necesitamos descubrir cómo podemos obtener lo que el usuario teclea en el campo de entrada.
Dialogue: 0,0:01:52.85,0:01:55.83,Default,,0000,0000,0000,,Vamos a hacer una variable para eso.
Dialogue: 0,0:01:55.83,0:02:04.77,Default,,0000,0000,0000,,Así que "var name = document.getElementById("...,
Dialogue: 0,0:02:04.77,0:02:07.34,Default,,0000,0000,0000,,porque tengo un "Id",
Dialogue: 0,0:02:07.34,0:02:11.32,Default,,0000,0000,0000,,así que lo almacenamos ahí.
Dialogue: 0,0:02:11.32,0:02:17.12,Default,,0000,0000,0000,,Vamos a hacer una nueva cadena de caracteres para el saludo, y concatenar el nombre,
Dialogue: 0,0:02:17.12,0:02:22.72,Default,,0000,0000,0000,,entonces: 'var greeting = "Heyaz"', ese es mi saludo favorito.
Dialogue: 0,0:02:22.72,0:02:24.20,Default,,0000,0000,0000,,"+ name".
Dialogue: 0,0:02:24.20,0:02:30.35,Default,,0000,0000,0000,,Ok, entonces ya tenemos una cadena de caracteres que incluye cualquier cosa que esté almacenada en esa variable.
Dialogue: 0,0:02:30.35,0:02:38.77,Default,,0000,0000,0000,,Y ahora, esto de aquí, este contenido de texto, debería ser en realidad "greeting" (El saludo).
Dialogue: 0,0:02:38.77,0:02:41.69,Default,,0000,0000,0000,,Vamos a ver, se ve bien,
Dialogue: 0,0:02:41.69,0:02:44.90,Default,,0000,0000,0000,,obtenemos el nombre que se teclea, y formamos una cadena de caracteres,
Dialogue: 0,0:02:44.90,0:02:47.73,Default,,0000,0000,0000,,y lo anexamos al "".
Dialogue: 0,0:02:47.73,0:02:53.03,Default,,0000,0000,0000,,Pausa la guía paso a paso y revisa si funciona.
Dialogue: 0,0:02:53.03,0:02:55.63,Default,,0000,0000,0000,,No funciona, ¿cierto?
Dialogue: 0,0:02:55.63,0:03:01.88,Default,,0000,0000,0000,,¿Viste que dice: "Heyaz[object Object]", o "Heyaz object Element"?
Dialogue: 0,0:03:01.88,0:03:04.76,Default,,0000,0000,0000,,Asumiendo que tu nombre no es "Object",
Dialogue: 0,0:03:04.76,0:03:08.07,Default,,0000,0000,0000,,y no te ofendas si así fuera, es un gran nombre,
Dialogue: 0,0:03:08.07,0:03:10.51,Default,,0000,0000,0000,,eso significa que algo está mal.
Dialogue: 0,0:03:10.51,0:03:13.70,Default,,0000,0000,0000,,Esperábamos ver lo que tecleaste.
Dialogue: 0,0:03:13.70,0:03:16.48,Default,,0000,0000,0000,,Pero en su lugar vemos que dice "object".
Dialogue: 0,0:03:16.48,0:03:20.68,Default,,0000,0000,0000,,Eso significa que la variable "name" está apuntando a un objeto,
Dialogue: 0,0:03:20.68,0:03:23.58,Default,,0000,0000,0000,,y no está apuntando a la cadena de caracteres que esperábamos.
Dialogue: 0,0:03:23.58,0:03:26.65,Default,,0000,0000,0000,,Probablemente ya habías descubierto el problema.
Dialogue: 0,0:03:26.65,0:03:31.88,Default,,0000,0000,0000,,Almacenamos todo el elemento objeto dentro de la variable "name".
Dialogue: 0,0:03:31.88,0:03:34.99,Default,,0000,0000,0000,,Y el elemento objeto es un objeto grande,
Dialogue: 0,0:03:34.99,0:03:37.10,Default,,0000,0000,0000,,con mucha información acerca del elemento:
Dialogue: 0,0:03:37.10,0:03:39.53,Default,,0000,0000,0000,,todos sus atributos, todos sus métodos.
Dialogue: 0,0:03:39.53,0:03:43.47,Default,,0000,0000,0000,,Para encontrar lo que el usuario tecleó, tenemos que acceder a una propiedad del elemento
Dialogue: 0,0:03:43.47,0:03:46.21,Default,,0000,0000,0000,,en particular: el valor.
Dialogue: 0,0:03:46.21,0:03:51.92,Default,,0000,0000,0000,,Voy a continuar y a teclear: ".value", y eso lo debe corregir.
Dialogue: 0,0:03:51.92,0:03:56.18,Default,,0000,0000,0000,,Pausa la guía paso a paso y prueba de nuevo.
Dialogue: 0,0:03:56.18,0:03:57.98,Default,,0000,0000,0000,,Funcionó ¿cierto?
Dialogue: 0,0:03:57.98,0:04:01.91,Default,,0000,0000,0000,,Ahora, es muy común cometer ese error, así que debes fijarte.
Dialogue: 0,0:04:01.91,0:04:05.01,Default,,0000,0000,0000,,Quiero mostrarte otro error común.
Dialogue: 0,0:04:05.01,0:04:13.96,Default,,0000,0000,0000,,Voy a tomar esta línea de aquí y la voy a mover fuera de la función.
Dialogue: 0,0:04:13.96,0:04:22.74,Default,,0000,0000,0000,,Ahora, pausa la guía paso a paso, teclea en la entrada y presiona el botón.
Dialogue: 0,0:04:22.74,0:04:25.100,Default,,0000,0000,0000,,Si falla como debería, entonces lo que viste fue
Dialogue: 0,0:04:25.100,0:04:28.05,Default,,0000,0000,0000,,una cadena de caracteres vacía, sin tu nombre.
Dialogue: 0,0:04:28.05,0:04:29.69,Default,,0000,0000,0000,,¿Ya descubriste por qué?
Dialogue: 0,0:04:29.69,0:04:33.94,Default,,0000,0000,0000,,Tienes que pensar cuidadosamente sobre cuándo es ejecutada cada línea del código.
Dialogue: 0,0:04:33.94,0:04:37.10,Default,,0000,0000,0000,,En el código actual, el navegador carga la página,
Dialogue: 0,0:04:37.10,0:04:39.77,Default,,0000,0000,0000,,y ejecuta el JavaScript línea por línea.
Dialogue: 0,0:04:39.77,0:04:42.93,Default,,0000,0000,0000,,Primero, almacena el elemento "button" en una variable.
Dialogue: 0,0:04:42.93,0:04:46.82,Default,,0000,0000,0000,,Luego, almacena el valor del elemento de entrada en una variable.
Dialogue: 0,0:04:46.82,0:04:50.46,Default,,0000,0000,0000,,Pero almacena el valor que tiene a la hora de cargar la página,
Dialogue: 0,0:04:50.46,0:04:52.46,Default,,0000,0000,0000,,cuando debería estar vacío.
Dialogue: 0,0:04:52.46,0:04:56.32,Default,,0000,0000,0000,,Luego, define una función y asigna el detector de eventos.
Dialogue: 0,0:04:56.32,0:05:00.42,Default,,0000,0000,0000,,Cuando el detector es llamado, el nombre sigue siendo la misma cadena
Dialogue: 0,0:05:00.42,0:05:02.88,Default,,0000,0000,0000,,de caracteres que era cuando la página fue cargada.
Dialogue: 0,0:05:02.88,0:05:06.20,Default,,0000,0000,0000,,Así que el detector nunca obtiene lo último que el usuario teclea.
Dialogue: 0,0:05:06.20,0:05:08.53,Default,,0000,0000,0000,,Esa es la razón por la que esta línea de código
Dialogue: 0,0:05:08.53,0:05:13.19,Default,,0000,0000,0000,,debe estar dentro de la función del detector de eventos,
Dialogue: 0,0:05:13.19,0:05:18.76,Default,,0000,0000,0000,,para que obtenga el valor cada vez que el evento suceda.
Dialogue: 0,0:05:18.76,0:05:21.94,Default,,0000,0000,0000,,Vamos a añadir algo de código para obtener ahora el valor del idioma,
Dialogue: 0,0:05:21.94,0:05:24.41,Default,,0000,0000,0000,,para asegurarnos de que realmente estás entendiendo.
Dialogue: 0,0:05:24.41,0:05:31.05,Default,,0000,0000,0000,,Dentro del detector, voy a almacenar el idioma en la variable "lang".
Dialogue: 0,0:05:31.77,0:05:34.55,Default,,0000,0000,0000,,Ogh, mira esta indentación, es horrible.
Dialogue: 0,0:05:34.55,0:05:36.89,Default,,0000,0000,0000,,Vamos a alinear estas cosas.
Dialogue: 0,0:05:36.89,0:05:38.84,Default,,0000,0000,0000,,Ok, entonces...
Dialogue: 0,0:05:38.84,0:05:46.63,Default,,0000,0000,0000,,'lang = document.getElementById("lang").value;'
Dialogue: 0,0:05:46.77,0:05:51.23,Default,,0000,0000,0000,,Y puedes ver que estoy escribiendo nombres de variables igual que mis "Id´s",
Dialogue: 0,0:05:51.23,0:05:55.29,Default,,0000,0000,0000,,pero eso es algo que tú no tienes que hacer.
Dialogue: 0,0:05:55.29,0:05:59.79,Default,,0000,0000,0000,,Ahora, quiero que el resultado sea un mensaje diferente con base en el lenguaje seleccionado.
Dialogue: 0,0:05:59.79,0:06:03.63,Default,,0000,0000,0000,,Fijate que el valor no es el que se muestra en el botón desplegable.
Dialogue: 0,0:06:03.63,0:06:06.88,Default,,0000,0000,0000,,Es el valor del atributo en HTML.
Dialogue: 0,0:06:06.88,0:06:11.25,Default,,0000,0000,0000,,Así que "lang" podría ser "en", "es" o "plt".
Dialogue: 0,0:06:11.25,0:06:17.21,Default,,0000,0000,0000,,Eso significa que:\N'if (lang === "es")',
Dialogue: 0,0:06:17.21,0:06:23.68,Default,,0000,0000,0000,,entonces el saludo debería ser "Hola,".
Dialogue: 0,0:06:23.68,0:06:26.81,Default,,0000,0000,0000,,Vamos a continuar y a formar esta variable "greeting".
Dialogue: 0,0:06:26.81,0:06:35.10,Default,,0000,0000,0000,,Entonces "greeting" va a ser "Hola," más "name".
Dialogue: 0,0:06:35.10,0:06:41.22,Default,,0000,0000,0000,,Y luego si la variable "lang" es igual a "plt", Pig Latin (Latín de los cerdos),
Dialogue: 0,0:06:41.22,0:06:48.54,Default,,0000,0000,0000,,el saludo será "Ello-hey," más el nombre.
Dialogue: 0,0:06:48.54,0:06:53.17,Default,,0000,0000,0000,,Y luego podemos simplemente usar un "else" para nuestro Inglés.
Dialogue: 0,0:06:53.17,0:06:55.37,Default,,0000,0000,0000,,Y voy a mover esto aquí dentro.
Dialogue: 0,0:06:55.37,0:06:56.80,Default,,0000,0000,0000,,Muy bien.
Dialogue: 0,0:06:56.80,0:07:00.37,Default,,0000,0000,0000,,Oh, y si quieres un desafío divertido extra,
Dialogue: 0,0:07:00.37,0:07:03.84,Default,,0000,0000,0000,,trata de hacer un convertidor de nombres a Pig Latin,
Dialogue: 0,0:07:03.84,0:07:07.68,Default,,0000,0000,0000,,para que el saludo completo, incluyendo los nombres, sea traducido.
Dialogue: 0,0:07:07.68,0:07:10.01,Default,,0000,0000,0000,,Eso estaría muy bien.
Dialogue: 0,0:07:10.01,0:07:13.30,Default,,0000,0000,0000,,Ahora, pausa la guía paso a paso, e introduce tu nombre,
Dialogue: 0,0:07:13.30,0:07:19.10,Default,,0000,0000,0000,,presiona un idioma diferente, y prueba.
Dialogue: 0,0:07:19.10,0:07:20.24,Default,,0000,0000,0000,,Interesante, ¿eh?
Dialogue: 0,0:07:20.24,0:07:24.69,Default,,0000,0000,0000,,Ahora, hay una gran cantidad de cosas que puedes hacer con las entradas de un formulario y un poco de JavaScript:
Dialogue: 0,0:07:24.69,0:07:27.32,Default,,0000,0000,0000,,juegos de palabras, juegos de números, fabricantes de historias...
Dialogue: 0,0:07:27.32,0:07:30.03,Default,,0000,0000,0000,,y si tienes un servidor fuera de Khan Academy,
Dialogue: 0,0:07:30.03,0:07:33.45,Default,,0000,0000,0000,,puedes usar JavaScript para pre-procesar una entrada de formulario
Dialogue: 0,0:07:33.45,0:07:35.36,Default,,0000,0000,0000,,antes de mandarla al servidor.
Dialogue: 0,0:07:35.36,0:07:38.52,Default,,0000,0000,0000,,Hay muchos otros eventos que puedes detectar en formularios,
Dialogue: 0,0:07:38.52,0:07:40.70,Default,,0000,0000,0000,,como eventos de pulsación de teclas y enfoque.
Dialogue: 0,0:07:40.70,0:07:44.15,Default,,0000,0000,0000,,Sólo recuerda considerar el valor de las entradas,
Dialogue: 0,0:07:44.15,0:07:47.29,Default,,0000,0000,0000,,y revisar ese valor en el momento correcto.
Dialogue: 0,0:07:47.29,0:07:50.03,Default,,0000,0000,0000,,Tendrás que practicar esto en el siguiente desafío,
Dialogue: 0,0:07:50.03,0:07:52.64,Default,,0000,0000,0000,,que es uno de mis favoritos.