1
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.

2
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

3
00:00:09,953 --> 00:00:11,442
por razones de seguridad.

4
00:00:11,442 --> 00:00:13,648
Así que no enseñamos formularios aquí.

5
00:00:13,648 --> 00:00:16,997
Pero, ahora que estás aprendiendo JavaScript para manipular páginas web,

6
00:00:16,997 --> 00:00:20,550
puedo mostrarte como usar JavaScript para procesar elementos de un formulario.

7
00:00:20,550 --> 00:00:23,074
en lugar de tener que enviarlos a un servidor.

8
00:00:23,074 --> 00:00:28,096
He creado algunos elementos de formulario en esta página para obtener el nombre del usuario,

9
00:00:28,096 --> 00:00:30,045
y su idioma.

10
00:00:30,045 --> 00:00:34,027
Y quiero que la página web le diga "hola" al usuario en su idioma

11
00:00:34,027 --> 00:00:36,666
una vez que se presione este botón.

12
00:00:36,666 --> 00:00:41,457
El primer paso es almacenar el elemento "button" en una variable.

13
00:00:41,457 --> 00:00:49,307
Así que déjenme poner: 'document.getElementById("button")'.

14
00:00:49,307 --> 00:00:53,192
El siguiente paso es definir la función del detector de eventos.

15
00:00:53,192 --> 00:00:57,885
"var onButtonClick = function() {"

16
00:00:57,885 --> 00:01:03,770
y luego aquí dentro, tenemos que anexar el mensaje.

17
00:01:03,770 --> 00:01:08,729
Así que, 'document.getElementById("message")',

18
00:01:08,729 --> 00:01:10,709
tenemos un lindo mensaje "".

19
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!")

20
00:01:20,707 --> 00:01:23,161
Es un "" muy agradecido.

21
00:01:23,161 --> 00:01:28,796
Finalmente, paso tres, vamos a añadir el detector de eventos al botón,

22
00:01:28,796 --> 00:01:31,711
de manera que cuando lo presionen llame a la función.

23
00:01:31,711 --> 00:01:36,491
Entonces, '("click", onButtonClick)'.

24
00:01:36,491 --> 00:01:42,959
Ahora pausa la guía paso a paso, y verifica que funcione como lo esperas.

25
00:01:42,959 --> 00:01:47,971
Ahora, vamos a hacer que en realidad diga algo basándonos en el formulario.

26
00:01:47,971 --> 00:01:52,850
Necesitamos descubrir cómo podemos obtener lo que el usuario teclea en el campo de entrada.

27
00:01:52,850 --> 00:01:55,834
Vamos a hacer una variable para eso.

28
00:01:55,834 --> 00:02:04,770
Así que "var name = document.getElementById("...,

29
00:02:04,770 --> 00:02:07,337
porque tengo un "Id",

30
00:02:07,337 --> 00:02:11,322
así que lo almacenamos ahí.

31
00:02:11,322 --> 00:02:17,115
Vamos a hacer una nueva cadena de caracteres para el saludo, y concatenar el nombre,

32
00:02:17,115 --> 00:02:22,720
entonces: 'var greeting = "Heyaz"', ese es mi saludo favorito.

33
00:02:22,720 --> 00:02:24,203
"+ name".

34
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.

35
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).

36
00:02:38,772 --> 00:02:41,688
Vamos a ver, se ve bien,

37
00:02:41,688 --> 00:02:44,899
obtenemos el nombre que se teclea, y formamos una cadena de caracteres,

38
00:02:44,899 --> 00:02:47,732
y lo anexamos al "".

39
00:02:47,732 --> 00:02:53,032
Pausa la guía paso a paso y revisa si funciona.

40
00:02:53,032 --> 00:02:55,632
No funciona, ¿cierto?

41
00:02:55,632 --> 00:03:01,877
¿Viste que dice: "Heyaz[object Object]", o "Heyaz object Element"?

42
00:03:01,877 --> 00:03:04,761
Asumiendo que tu nombre no es "Object",

43
00:03:04,761 --> 00:03:08,073
y no te ofendas si así fuera, es un gran nombre,

44
00:03:08,073 --> 00:03:10,508
eso significa que algo está mal.

45
00:03:10,508 --> 00:03:13,704
Esperábamos ver lo que tecleaste.

46
00:03:13,704 --> 00:03:16,482
Pero en su lugar vemos que dice "object".

47
00:03:16,482 --> 00:03:20,682
Eso significa que la variable "name" está apuntando a un objeto,

48
00:03:20,682 --> 00:03:23,581
y no está apuntando a la cadena de caracteres que esperábamos.

49
00:03:23,581 --> 00:03:26,647
Probablemente ya habías descubierto el problema.

50
00:03:26,647 --> 00:03:31,885
Almacenamos todo el elemento objeto dentro de la variable "name".

51
00:03:31,885 --> 00:03:34,987
Y el elemento objeto es un objeto grande,

52
00:03:34,987 --> 00:03:37,095
con mucha información acerca del elemento:

53
00:03:37,095 --> 00:03:39,532
todos sus atributos, todos sus métodos.

54
00:03:39,532 --> 00:03:43,472
Para encontrar lo que el usuario tecleó, tenemos que acceder a una propiedad del elemento

55
00:03:43,472 --> 00:03:46,211
en particular: el valor.

56
00:03:46,211 --> 00:03:51,918
Voy a continuar y a teclear: ".value", y eso lo debe corregir.

57
00:03:51,918 --> 00:03:56,177
Pausa la guía paso a paso y prueba de nuevo.

58
00:03:56,177 --> 00:03:57,984
Funcionó ¿cierto?

59
00:03:57,984 --> 00:04:01,913
Ahora, es muy común cometer ese error, así que debes fijarte.

60
00:04:01,913 --> 00:04:05,007
Quiero mostrarte otro error común.

61
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.

62
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.

63
00:04:22,740 --> 00:04:25,997
Si falla como debería, entonces lo que viste fue

64
00:04:25,997 --> 00:04:28,050
una cadena de caracteres vacía, sin tu nombre.

65
00:04:28,050 --> 00:04:29,693
¿Ya descubriste por qué?

66
00:04:29,693 --> 00:04:33,937
Tienes que pensar cuidadosamente sobre cuándo es ejecutada cada línea del código.

67
00:04:33,937 --> 00:04:37,098
En el código actual, el navegador carga la página,

68
00:04:37,098 --> 00:04:39,770
y ejecuta el JavaScript línea por línea.

69
00:04:39,770 --> 00:04:42,928
Primero, almacena el elemento "button" en una variable.

70
00:04:42,928 --> 00:04:46,817
Luego, almacena el valor del elemento de entrada en una variable.

71
00:04:46,817 --> 00:04:50,460
Pero almacena el valor que tiene a la hora de cargar la página,

72
00:04:50,460 --> 00:04:52,465
cuando debería estar vacío.

73
00:04:52,465 --> 00:04:56,320
Luego, define una función y asigna el detector de eventos.

74
00:04:56,320 --> 00:05:00,421
Cuando el detector es llamado, el nombre sigue siendo la misma cadena

75
00:05:00,421 --> 00:05:02,877
de caracteres que era cuando la página fue cargada.

76
00:05:02,877 --> 00:05:06,201
Así que el detector nunca obtiene lo último que el usuario teclea.

77
00:05:06,201 --> 00:05:08,529
Esa es la razón por la que esta línea de código

78
00:05:08,529 --> 00:05:13,190
debe estar dentro de la función del detector de eventos,

79
00:05:13,190 --> 00:05:18,757
para que obtenga el valor cada vez que el evento suceda.

80
00:05:18,757 --> 00:05:21,938
Vamos a añadir algo de código para obtener ahora el valor del idioma,

81
00:05:21,938 --> 00:05:24,414
para asegurarnos de que realmente estás entendiendo.

82
00:05:24,414 --> 00:05:31,049
Dentro del detector, voy a almacenar el idioma en la variable "lang".

83
00:05:31,769 --> 00:05:34,546
Ogh, mira esta indentación, es horrible.

84
00:05:34,546 --> 00:05:36,891
Vamos a alinear estas cosas.

85
00:05:36,891 --> 00:05:38,842
Ok, entonces...

86
00:05:38,842 --> 00:05:46,633
'lang = document.getElementById("lang").value;'

87
00:05:46,773 --> 00:05:51,234
Y puedes ver que estoy escribiendo nombres de variables igual que mis "Id´s",

88
00:05:51,234 --> 00:05:55,291
pero eso es algo que tú no tienes que hacer.

89
00:05:55,291 --> 00:05:59,787
Ahora, quiero que el resultado sea un mensaje diferente con base en el lenguaje seleccionado.

90
00:05:59,787 --> 00:06:03,627
Fijate que el valor no es el que se muestra en el botón desplegable.

91
00:06:03,627 --> 00:06:06,880
Es el valor del atributo en HTML.

92
00:06:06,880 --> 00:06:11,250
Así que "lang" podría ser "en", "es" o "plt".

93
00:06:11,250 --> 00:06:17,212
Eso significa que:
'if (lang === "es")',

94
00:06:17,212 --> 00:06:23,684
entonces el saludo debería ser "Hola,".

95
00:06:23,684 --> 00:06:26,809
Vamos a continuar y a formar esta variable "greeting".

96
00:06:26,809 --> 00:06:35,105
Entonces "greeting" va a ser "Hola," más "name".

97
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),

98
00:06:41,218 --> 00:06:48,538
el saludo será "Ello-hey," más el nombre.

99
00:06:48,538 --> 00:06:53,167
Y luego podemos simplemente usar un "else" para nuestro Inglés.

100
00:06:53,167 --> 00:06:55,366
Y voy a mover esto aquí dentro.

101
00:06:55,366 --> 00:06:56,799
Muy bien.

102
00:06:56,799 --> 00:07:00,374
Oh, y si quieres un desafío divertido extra,

103
00:07:00,374 --> 00:07:03,840
trata de hacer un convertidor de nombres a Pig Latin,

104
00:07:03,840 --> 00:07:07,678
para que el saludo completo, incluyendo los nombres, sea traducido.

105
00:07:07,678 --> 00:07:10,009
Eso estaría muy bien.

106
00:07:10,009 --> 00:07:13,295
Ahora, pausa la guía paso a paso, e introduce tu nombre,

107
00:07:13,295 --> 00:07:19,098
presiona un idioma diferente, y prueba.

108
00:07:19,098 --> 00:07:20,239
Interesante, ¿eh?

109
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:

110
00:07:24,691 --> 00:07:27,316
juegos de palabras, juegos de números, fabricantes de historias...

111
00:07:27,316 --> 00:07:30,029
y si tienes un servidor fuera de Khan Academy,

112
00:07:30,029 --> 00:07:33,447
puedes usar JavaScript para pre-procesar una entrada de formulario

113
00:07:33,447 --> 00:07:35,361
antes de mandarla al servidor.

114
00:07:35,361 --> 00:07:38,522
Hay muchos otros eventos que puedes detectar en formularios,

115
00:07:38,522 --> 00:07:40,701
como eventos de pulsación de teclas y enfoque.

116
00:07:40,701 --> 00:07:44,152
Sólo recuerda considerar el valor de las entradas,

117
00:07:44,152 --> 00:07:47,289
y revisar ese valor en el momento correcto.

118
00:07:47,289 --> 00:07:50,031
Tendrás que practicar esto en el siguiente desafío,

119
00:07:50,031 --> 00:07:52,644
que es uno de mis favoritos.