1
00:00:11,440 --> 00:00:16,720
Vamos a realizar a continuación varios ejercicios de JavaScript para familiarizarnos más con este lenguaje

2
00:00:16,720 --> 00:00:18,220
de programación.

3
00:00:18,220 --> 00:00:21,970
Así que a continuación vamos a realizar el ejemplo JavaScript 2

4
00:00:24,870 --> 00:00:30,420
El objetivo del ejercicio es crear un proyecto para poner en práctica las funciones básicas de JavaScript

5
00:00:31,070 --> 00:00:34,050
y al finalizar deberemos ver lo siguiente según se muestra

6
00:00:38,000 --> 00:00:40,470
como primer paso vamos a crear nuestro proyecto.

7
00:00:40,490 --> 00:00:46,460
Este proyecto se va a llamar ejemplo JavaScript 2 y lo vamos a depositar en la ruta mostrada y damos

8
00:00:46,460 --> 00:00:47,450
clic en Finalizar

9
00:00:52,160 --> 00:00:58,700
posteriormente vamos a crear un archivo llamado funciones punto JS Es decir que va a ser un archivo

10
00:00:58,700 --> 00:01:04,940
de tipo JavaScript File entonces el archivo se llama funciones y lo depositamos a nivel raíz de nuestro

11
00:01:04,940 --> 00:01:05,840
proyecto.

12
00:01:05,840 --> 00:01:10,430
Por lo tanto el campo de folder lo dejamos vacío y damos clic en Finalizar

13
00:01:13,030 --> 00:01:17,410
vamos a modificar a continuación nuestro archivo índex punto HTML.

14
00:01:17,410 --> 00:01:24,160
Agregamos el Doctrine y definimos lo siguiente Nuestro cabecero como ya sabemos el título se llama ejercicio

15
00:01:24,170 --> 00:01:28,990
JavaScript 2 y vamos a agregar un link hacia nuestro archivo funciones punto JS.

16
00:01:29,000 --> 00:01:31,030
También como ya hemos visto anteriormente

17
00:01:33,360 --> 00:01:41,080
cerramos el cabecero de nuestro documento HTML y agregamos también el body agregamos un título llamado

18
00:01:41,140 --> 00:01:47,100
ejercicio JavaScript 2 y vamos a agregar lo siguiente vamos a agregar un link.

19
00:01:47,290 --> 00:01:52,040
En este caso este link nos va a llevar hacia el sitio de Gogo el punto com punto Mx.

20
00:01:52,090 --> 00:01:57,970
Sin embargo este link cuando demos clic nos va a preguntar si queremos salir del sitio donde estamos

21
00:01:57,970 --> 00:02:04,500
trabajando es decir de nuestra página HTML para poder identificar si estamos trabajando con este link

22
00:02:04,690 --> 00:02:07,810
es decir si el usuario dio clic por medio de JavaScript.

23
00:02:07,840 --> 00:02:13,810
Vamos a recuperar este elemento este link para ello como hemos trabajado anteriormente vamos a agregar

24
00:02:13,900 --> 00:02:20,920
un identificador a este elemento HTML así que agregamos el atributo Heydi y le asignamos el valor de

25
00:02:20,920 --> 00:02:27,100
Link así de esta manera es como vamos a poder recuperar por medio de Javascript por medio de este identificador

26
00:02:27,280 --> 00:02:33,920
este elemento de tipo hipervínculo posteriormente agregamos un salto de línea y agregamos también otro

27
00:02:33,920 --> 00:02:40,430
hipervínculo pero en este caso va a ser un link para poder buscar alguna cadena directamente en Google

28
00:02:40,760 --> 00:02:46,460
así que vamos a agregar una función para que podamos proporcionar una cadena y buscar directamente esta

29
00:02:46,460 --> 00:02:51,890
cadena en Google también para saber si el usuario dio clic a este link lo que vamos a hacer es agregar

30
00:02:51,980 --> 00:02:54,320
un identificador a este hipervínculo.

31
00:02:54,320 --> 00:03:01,040
Agregamos el atributo de Heydi y posteriormente le asignamos el valor de Link Search así que como podemos

32
00:03:01,040 --> 00:03:06,620
observar varias de las funciones que vamos a estar trabajando con JavaScript la funcionalidad tiene

33
00:03:06,620 --> 00:03:14,240
que ver con manipular los elementos HTML desde las funciones de JavaScript cerramos la etiqueta de Bodhi

34
00:03:14,300 --> 00:03:22,800
y también la etiqueta HTML de nuestro documento de índex punto HTML ahora vamos a modificar nuestro

35
00:03:22,800 --> 00:03:24,840
archivo de funciones punto JS

36
00:03:28,620 --> 00:03:36,120
agregamos un comentario en este caso el comentario de autor Ubaldo cerramos nuestro comentario y vamos

37
00:03:36,120 --> 00:03:37,680
a hacer lo siguiente.

38
00:03:37,680 --> 00:03:43,530
De manera similar a como no trabajamos en el primer ejercicio en el primer ejercicio si recordamos en

39
00:03:43,530 --> 00:03:50,700
la etiqueta Bodhi utilizamos el método holdout e indicamos algunas funciones de JavaScript que se iban

40
00:03:50,700 --> 00:03:52,140
a mandar a llamar.

41
00:03:52,140 --> 00:03:58,380
Podemos hacer algo similar pero desde javascript es decir que no necesitamos modificar nuestro código

42
00:03:58,440 --> 00:04:02,700
HTML para que se mande a llamar también este método holdout.

43
00:04:02,910 --> 00:04:10,880
Para ello vamos a utilizar la propiedad window junto con los así que esto es muy similar cuando se carga

44
00:04:10,880 --> 00:04:17,770
en nuestra página HTML se va a mandar a llamar esta función window punto Lost y se manda llamar a una

45
00:04:17,770 --> 00:04:24,610
función en este caso la función inicia datos así que no hay necesidad de especificar los paréntesis

46
00:04:24,760 --> 00:04:30,550
simplemente poniendo el nombre de la función se puede mandar a llamar esta función directamente cuando

47
00:04:30,550 --> 00:04:38,360
se carga nuestro documento HTML como siguiente paso vamos a definir una función que se manda llamar

48
00:04:38,420 --> 00:04:45,500
al cargar la página HTML es decir nuestra función de inicia datos así que vamos a definir esta función.

49
00:04:45,500 --> 00:04:48,150
Utilizamos la palabra reservada función.

50
00:04:48,170 --> 00:04:54,080
La función se llama inicia datos y no recibe ningún argumento por lo tanto simplemente abrimos y cerramos

51
00:04:54,080 --> 00:05:00,450
paréntesis y por medio de llaves abrimos el cuerpo de nuestra función y empezamos a agregar lo siguiente.

52
00:05:00,530 --> 00:05:07,790
En este caso lo que vamos a hacer es detectar si el usuario dio clic al elemento llamado Link al hipervínculo

53
00:05:07,790 --> 00:05:09,110
llamado Link.

54
00:05:09,110 --> 00:05:15,230
Así que por medio del objeto document recuperamos el elemento Link por medio del método GET Element

55
00:05:15,360 --> 00:05:21,950
Bayardi y lo que vamos a hacer es asignar una función a nuestro evento on click es decir que cuando

56
00:05:22,040 --> 00:05:27,260
el usuario de clic a nuestro hipervínculo de Link se va a mandar a llamar.

57
00:05:27,290 --> 00:05:33,920
Esta función y la función se llama vãlida salir así que básicamente con esto lo que estamos haciendo

58
00:05:34,070 --> 00:05:40,550
es asociar una función de JavaScript que se va a mandar a llamar cuando se ejecute cierto evento.

59
00:05:40,640 --> 00:05:46,820
En este caso cuando se ejecute el evento de un clic sobre nuestro elemento de hipervínculo llamado Link

60
00:05:47,510 --> 00:05:51,950
así que cada vez que se dé clic sobre ese hipervínculo se va a mandar a llamar.

61
00:05:51,950 --> 00:06:00,190
Esta función valida salir y también vamos a asociar otro método pero a nuestro otro hipervínculo el

62
00:06:00,190 --> 00:06:02,140
hipervínculo llamado Link Search.

63
00:06:02,590 --> 00:06:08,890
Así que cuando el usuario de clic sobre nuestro elemento sobre el hipervínculo de Link Sergi se va a

64
00:06:08,890 --> 00:06:16,020
mandar a llamar la función de búsqueda así que básicamente también aquí es lo que estamos haciendo asociando

65
00:06:16,030 --> 00:06:22,240
la función de búsqueda cuando el usuario da clic a nuestro elemento llamado Link Search el cual es un

66
00:06:22,240 --> 00:06:28,510
hipervínculo y por ello es que lo pudimos recuperar por medio del elemento Element Bayardi ya que si

67
00:06:28,510 --> 00:06:35,650
recordamos así es como nos definimos en nuestro documento HTML y con eso cerramos nuestra función inicia

68
00:06:35,650 --> 00:06:41,440
datos ahora vamos a agregar estas funciones de vãlida a salir y la función de búsqueda pero con esto

69
00:06:41,440 --> 00:06:44,800
básicamente ya están programados nuestros eventos on click

70
00:06:48,070 --> 00:06:55,040
ahora esta función de validad salir valida si el usuario quiere salir del sitio o no básicamente va

71
00:06:55,040 --> 00:07:01,370
a hacer una pregunta si el usuario quiere salir del sitio o no definimos la función la cual se llama

72
00:07:01,460 --> 00:07:02,600
vãlida salir.

73
00:07:02,600 --> 00:07:05,730
Para ello agregamos la palabra reservada función.

74
00:07:05,750 --> 00:07:12,140
El método se llama vãlida salir y no recibe ningún argumento por lo tanto simplemente abrimos y cerramos

75
00:07:12,140 --> 00:07:15,190
paréntesis y abrimos el cuerpo de esta función.

76
00:07:15,200 --> 00:07:21,740
Algo importante es que JavaScript es sensible a mayúsculas y minúsculas por lo tanto es importante respetar

77
00:07:21,920 --> 00:07:29,750
que si vamos a definir válida y la S con mayúscula salir entonces así de igual manera tenemos que definir

78
00:07:29,810 --> 00:07:34,220
nuestra función válida y la S debe de ser mayúscula.

79
00:07:34,220 --> 00:07:39,080
Esas son las mismas prácticas que utilizamos en nuestro lenguaje de programación Java así que estas

80
00:07:39,080 --> 00:07:46,220
mismas prácticas las vamos a aplicar en este lenguaje de programación Java Script y lo que hacemos en

81
00:07:46,220 --> 00:07:52,430
esta función de validad salir es agregar lo siguiente vamos a agregar un if y este IF.

82
00:07:52,610 --> 00:07:58,970
Básicamente nos va a preguntar si queremos salir del sitio y para ello vamos a utilizar una ventana

83
00:07:58,970 --> 00:08:00,130
de confirmación.

84
00:08:00,140 --> 00:08:05,960
Esto es similar a una alerta sin embargo en este caso nos va a mostrar dos botones es decir que vamos

85
00:08:05,960 --> 00:08:08,100
a poder seleccionar sí o no..

86
00:08:08,150 --> 00:08:14,540
Por ello esta función de confirm nos va a mostrar una ventana y nos va a preguntar si deseamos salir

87
00:08:14,540 --> 00:08:25,000
del sitio y si respondemos que sí entonces mandamos una alerta indicando que nos vamos a Google y retornamos

88
00:08:25,000 --> 00:08:31,970
tú y al retornar tú lo que hacemos es que el flujo continúa de manera normal así que si regresamos entonces

89
00:08:32,120 --> 00:08:36,230
nos vamos al sitio de Google y cerramos este IHF.

90
00:08:36,270 --> 00:08:42,180
Sin embargo si en este botón de confirm seleccionamos la opción de no entonces se va a ejecutar nuestro

91
00:08:42,180 --> 00:08:49,020
Eels ya que no deseamos salir del sitio y entonces mandamos una alerta de que nos quedamos en este sitio

92
00:08:49,770 --> 00:08:56,610
y regresamos la bandera de fouls y con esto se rompe el flujo y ya no nos vamos al sitio de Google sino

93
00:08:56,610 --> 00:09:04,870
que nos quedamos en este sitio y cerramos nuestro él y también cerramos la función así que como podemos

94
00:09:04,870 --> 00:09:10,600
observar esta es la estructura y es que estamos trabajando para poder procesar la respuesta del usuario

95
00:09:10,750 --> 00:09:12,480
si el usuario responde que sí.

96
00:09:12,550 --> 00:09:18,310
En esta ventana de confirm entonces nos vamos al sitio de Google pero si responde que no. Entonces nos

97
00:09:18,310 --> 00:09:21,030
quedamos en el sitio y regresamos fouls.

98
00:09:21,160 --> 00:09:27,850
Esto es todo lo que tiene este método de vãlida salir ahora vamos a continuar y vamos a agregar el código

99
00:09:27,850 --> 00:09:29,500
de nuestra función de búsqueda.

100
00:09:29,500 --> 00:09:35,230
Esta es una función que pide una cadena a buscar en Google así que definimos nuestra función por medio

101
00:09:35,230 --> 00:09:37,280
de la palabra reservada función.

102
00:09:37,450 --> 00:09:44,160
La función se llama búsqueda y ahora por medio de la función prompt la cual también ya viene integrada

103
00:09:44,160 --> 00:09:45,090
con JavaScript.

104
00:09:45,120 --> 00:09:51,420
Vamos a capturar la información del usuario así que vamos a utilizar la función prom y le solicitamos

105
00:09:51,450 --> 00:09:57,600
al usuario que escriba una cadena a buscar y lo que escriba el usuario lo vamos a asignar a una variable

106
00:09:57,960 --> 00:09:58,600
en JavaScript.

107
00:09:58,620 --> 00:10:03,420
A diferencia de lenguajes como Java no es necesario especificar el tipo de dato.

108
00:10:03,570 --> 00:10:09,710
Podemos simplemente definir una variable y esta variable va a tomar el tipo del valor que se le asigne.

109
00:10:09,750 --> 00:10:14,850
Por lo tanto en este caso esta variable va a regresar una cadena y por lo tanto esta variable respuesta

110
00:10:14,940 --> 00:10:21,480
va a ser de tipo string pero podemos simplemente definir la variable por medio de la palabra reservada

111
00:10:21,540 --> 00:10:29,180
Var y posteriormente crear esta variable llamada respuesta y esta función prom va a mostrar una alerta

112
00:10:30,230 --> 00:10:35,000
y el usuario va a poder escribir en una caja de texto y lo que escriba el usuario.

113
00:10:35,090 --> 00:10:43,680
Esta cadena se va a asignar directamente a la variable respuesta en caso de que el usuario haya respondido

114
00:10:43,680 --> 00:10:44,700
con una cadena.

115
00:10:44,760 --> 00:10:51,990
Entonces la concatenados a la búsqueda de Google para ello vamos a preguntar si la variable de respuesta

116
00:10:52,110 --> 00:10:58,770
es diferente de nulo entonces vamos a imprimir tu respuesta fue y mandamos a imprimir el valor de la

117
00:10:58,770 --> 00:11:05,310
respuesta y posteriormente por medio del operador dis nos va a servir para hacer una referencia hacia

118
00:11:05,370 --> 00:11:08,520
el elemento que provocó este evento.

119
00:11:08,520 --> 00:11:17,080
En este caso el elemento con identificador Link Search y concatenados la respuesta como parámetro de

120
00:11:17,080 --> 00:11:18,450
una petición gheto.

121
00:11:18,790 --> 00:11:25,820
Vamos a ver a continuación cómo realizar esto básicamente lo que vamos a hacer es agregar la respuesta

122
00:11:25,820 --> 00:11:31,610
del usuario para buscar esta cadena en el link de Google que hemos definido anteriormente.

123
00:11:31,610 --> 00:11:37,460
Para ello utilizamos este operador dice básicamente este operador Ordiz lo que permite es acceder al

124
00:11:37,460 --> 00:11:44,810
elemento que provocó este evento y si recordamos este método se asoció precisamente cuando damos clic

125
00:11:45,020 --> 00:11:52,580
al hipervínculo de Link Search así que básicamente esto es el elemento de Link Search y lo que vamos

126
00:11:52,580 --> 00:11:57,290
a hacer es concatenar una búsqueda por medio de la siguiente sintaxis.

127
00:11:57,290 --> 00:12:01,550
Agregamos la palabra de Search y posteriormente agregamos un parámetro.

128
00:12:01,550 --> 00:12:07,730
En esta búsqueda para agregar un parámetro en los hipervínculos según hemos visto en las primeras lecciones

129
00:12:07,730 --> 00:12:11,510
de HTML podemos agregar parámetros de la siguiente forma.

130
00:12:11,600 --> 00:12:17,700
Agregamos un signo de interrogación y posteriormente podemos asignar un parámetro el parámetro se llama

131
00:12:17,700 --> 00:12:25,600
Haku y el valor va a ser precisamente la cadena que queremos buscar la CUP significa QWERTY y así es

132
00:12:25,600 --> 00:12:27,660
como lo procesa el sitio de Google.

133
00:12:27,700 --> 00:12:34,360
Podemos indicar un Kairi y posteriormente por medio del valor de igual asignamos la cadena que queremos

134
00:12:34,360 --> 00:12:40,030
buscar así que todo esto lo estamos generando de manera dinámica así que una vez que ya hemos agregado

135
00:12:40,030 --> 00:12:46,360
y concatenado esta búsqueda a nuestro Link de Link Search entonces se genera un nuevo Link.

136
00:12:46,600 --> 00:12:53,470
Así que este nuevo Link lo asignamos a una variable llamada precisamente nuevo Link y mandamos una alerta

137
00:12:53,470 --> 00:13:01,070
precisamente para indicar al usuario cuál es el nuevo Link y hacemos un redireccionamiento al nuevo

138
00:13:01,070 --> 00:13:01,610
Link.

139
00:13:01,610 --> 00:13:07,550
Para ello utilizamos la función de Window punto location básicamente esta propiedad de Location precisamente

140
00:13:07,550 --> 00:13:13,610
lo que estamos indicando al navegador es que vamos a cambiar hacia este hipervínculo hacia este nuevo

141
00:13:13,610 --> 00:13:17,580
Link y regresamos fouls.

142
00:13:17,660 --> 00:13:24,420
De lo contrario nos va a llevar a Link original así que regresamos Fool's precisamente para que no nos

143
00:13:24,420 --> 00:13:28,500
vayamos a Link que se había registrado en el elemento Link Search.

144
00:13:28,500 --> 00:13:34,160
Así que ahora con este nuevo Link hacemos un cambio hacia el nuevo Link al que queremos ir el cual ya

145
00:13:34,170 --> 00:13:36,400
incluye la cadena que queremos buscar.

146
00:13:36,480 --> 00:13:41,550
Por lo tanto vamos a utilizar esta propiedad de Window punto location y con esto nos vamos a ir hacia

147
00:13:41,550 --> 00:13:42,540
el nuevo Link.

148
00:13:42,540 --> 00:13:48,060
Por ello regresamos Fool's para que nos vayamos al link que habíamos definido previamente en nuestro

149
00:13:48,060 --> 00:13:55,510
elemento Link cerchas y con eso cerramos nuestro IHF y en dado caso de que la respuesta haya sido vacía

150
00:13:55,810 --> 00:14:02,020
Entonces mandamos una alerta no proporcionase ninguna cadena a buscar y regresamos fouls para que el

151
00:14:02,020 --> 00:14:09,470
usuario pueda proporcionar nuevamente un valor cerramos este y cerramos nuestra función de búsqueda.

152
00:14:09,550 --> 00:14:13,450
Con eso terminamos el contenido de nuestro archivo funciones punto J.V.

153
00:14:13,600 --> 00:14:17,950
Recuerden que pueden dar clic en los nombres de los archivos para ir al código de cada uno de estos

154
00:14:17,950 --> 00:14:18,730
archivos.

155
00:14:18,730 --> 00:14:24,280
Sin embargo se les solicita codificar línea a línea para que quede claro este ejercicio de funciones

156
00:14:24,280 --> 00:14:30,310
básicas JavaScript y únicamente en dado caso de que tengan problemas apoyarse de la documentación que

157
00:14:30,310 --> 00:14:31,240
les entregamos

158
00:14:34,490 --> 00:14:39,890
como siguiente paso vamos a ejecutar nuestro proyecto y podemos observar que si damos clic en el link

159
00:14:39,890 --> 00:14:45,680
de ir a Google entonces nos pregunta si deseamos salir del sitio y tenemos dos opciones podemos dar

160
00:14:45,680 --> 00:14:47,380
clic en Aceptar o cancelar.

161
00:14:47,810 --> 00:14:54,980
Si damos clic en Aceptar entonces nos muestra la alerta nos vamos a Google y damos clic en Aceptar para

162
00:14:54,980 --> 00:14:57,230
que hagamos el cambio hacia el navegador de Google.

163
00:15:00,180 --> 00:15:04,620
Así que este sería el resultado de hacer el cambio hacia el link de Google

164
00:15:08,820 --> 00:15:13,890
pero también tenemos la siguiente opción en el caso de que damos clic en Buscar en Google.

165
00:15:13,950 --> 00:15:17,580
Entonces nos muestra nuestra alerta pero en este caso ya es un prom.

166
00:15:17,580 --> 00:15:21,190
Lo anterior fue un diálogo de confirmación y este es un prom.

167
00:15:21,330 --> 00:15:24,570
Así que en este caso escribimos la cadena a buscar.

168
00:15:24,660 --> 00:15:31,710
Por ejemplo en la cadena de hola y damos clic en Aceptar y podemos observar que nos muestra la alerta.

169
00:15:31,740 --> 00:15:35,420
Tu respuesta fue Hola y también damos clic en Aceptar.

170
00:15:37,610 --> 00:15:45,040
Y podemos ver ahora que se ha generado un nuevo Link y éste es el nuevo Link Google.com punto Mx diagonal

171
00:15:45,130 --> 00:15:52,000
Search y posteriormente agregamos el parámetro cú que va a ser nuestro Cuadri nuestra consulta igual

172
00:15:52,090 --> 00:15:58,000
a la cadena de Hola así que este es el nuevo hipervínculo al cual nos vamos a dirigir.

173
00:15:58,000 --> 00:16:04,960
Para ello es que utilizamos la propiedad de Window punto location y una vez que damos clic en Aceptar.

174
00:16:05,080 --> 00:16:10,420
Entonces podemos observar el resultado de nuestro navegador en la parte superior nuestro hipervínculo

175
00:16:10,690 --> 00:16:17,980
se agregó la cadena de CU igual a Hola y por lo tanto el resultado en automático nos muestra el resultado

176
00:16:17,980 --> 00:16:25,160
de buscar la cadena de Hola en el buscador de Google como tareas extra del ejercicio.

177
00:16:25,170 --> 00:16:30,630
Se deja probar con distintos valores y también revisar y entender a detalle cómo es que se asocia a

178
00:16:30,630 --> 00:16:39,070
los eventos ejecutados a las funciones que realiza finalmente la acción de buscar como conclusión del

179
00:16:39,070 --> 00:16:39,900
ejercicio.

180
00:16:39,940 --> 00:16:46,090
Hemos puesto en práctica más funciones con JavaScript y hemos visto cómo podemos asociar la ejecución

181
00:16:46,150 --> 00:16:48,670
de una función a un cierto evento.

182
00:16:48,670 --> 00:16:54,980
Por ejemplo el evento un clic de algún elemento HTML como fue en este caso un hipervínculo.

183
00:16:55,240 --> 00:17:01,180
Sin embargo de esta misma manera podemos asociar cualquier función a cualquier evento que suceda en

184
00:17:01,180 --> 00:17:06,520
nuestra página HTML a través de código JavaScript.

185
00:17:06,520 --> 00:17:10,000
Con esto concluimos nuestro ejercicio de funciones básicas JavaScript.