Vamos a realizar a continuación varios ejercicios de JavaScript para familiarizarnos más con este lenguaje
de programación.
Así que a continuación vamos a realizar el ejemplo JavaScript 2
El objetivo del ejercicio es crear un proyecto para poner en práctica las funciones básicas de JavaScript
y al finalizar deberemos ver lo siguiente según se muestra
como primer paso vamos a crear nuestro proyecto.
Este proyecto se va a llamar ejemplo JavaScript 2 y lo vamos a depositar en la ruta mostrada y damos
clic en Finalizar
posteriormente vamos a crear un archivo llamado funciones punto JS Es decir que va a ser un archivo
de tipo JavaScript File entonces el archivo se llama funciones y lo depositamos a nivel raíz de nuestro
proyecto.
Por lo tanto el campo de folder lo dejamos vacío y damos clic en Finalizar
vamos a modificar a continuación nuestro archivo índex punto HTML.
Agregamos el Doctrine y definimos lo siguiente Nuestro cabecero como ya sabemos el título se llama ejercicio
JavaScript 2 y vamos a agregar un link hacia nuestro archivo funciones punto JS.
También como ya hemos visto anteriormente
cerramos el cabecero de nuestro documento HTML y agregamos también el body agregamos un título llamado
ejercicio JavaScript 2 y vamos a agregar lo siguiente vamos a agregar un link.
En este caso este link nos va a llevar hacia el sitio de Gogo el punto com punto Mx.
Sin embargo este link cuando demos clic nos va a preguntar si queremos salir del sitio donde estamos
trabajando es decir de nuestra página HTML para poder identificar si estamos trabajando con este link
es decir si el usuario dio clic por medio de JavaScript.
Vamos a recuperar este elemento este link para ello como hemos trabajado anteriormente vamos a agregar
un identificador a este elemento HTML así que agregamos el atributo Heydi y le asignamos el valor de
Link así de esta manera es como vamos a poder recuperar por medio de Javascript por medio de este identificador
este elemento de tipo hipervínculo posteriormente agregamos un salto de línea y agregamos también otro
hipervínculo pero en este caso va a ser un link para poder buscar alguna cadena directamente en Google
así que vamos a agregar una función para que podamos proporcionar una cadena y buscar directamente esta
cadena en Google también para saber si el usuario dio clic a este link lo que vamos a hacer es agregar
un identificador a este hipervínculo.
Agregamos el atributo de Heydi y posteriormente le asignamos el valor de Link Search así que como podemos
observar varias de las funciones que vamos a estar trabajando con JavaScript la funcionalidad tiene
que ver con manipular los elementos HTML desde las funciones de JavaScript cerramos la etiqueta de Bodhi
y también la etiqueta HTML de nuestro documento de índex punto HTML ahora vamos a modificar nuestro
archivo de funciones punto JS
agregamos un comentario en este caso el comentario de autor Ubaldo cerramos nuestro comentario y vamos
a hacer lo siguiente.
De manera similar a como no trabajamos en el primer ejercicio en el primer ejercicio si recordamos en
la etiqueta Bodhi utilizamos el método holdout e indicamos algunas funciones de JavaScript que se iban
a mandar a llamar.
Podemos hacer algo similar pero desde javascript es decir que no necesitamos modificar nuestro código
HTML para que se mande a llamar también este método holdout.
Para ello vamos a utilizar la propiedad window junto con los así que esto es muy similar cuando se carga
en nuestra página HTML se va a mandar a llamar esta función window punto Lost y se manda llamar a una
función en este caso la función inicia datos así que no hay necesidad de especificar los paréntesis
simplemente poniendo el nombre de la función se puede mandar a llamar esta función directamente cuando
se carga nuestro documento HTML como siguiente paso vamos a definir una función que se manda llamar
al cargar la página HTML es decir nuestra función de inicia datos así que vamos a definir esta función.
Utilizamos la palabra reservada función.
La función se llama inicia datos y no recibe ningún argumento por lo tanto simplemente abrimos y cerramos
paréntesis y por medio de llaves abrimos el cuerpo de nuestra función y empezamos a agregar lo siguiente.
En este caso lo que vamos a hacer es detectar si el usuario dio clic al elemento llamado Link al hipervínculo
llamado Link.
Así que por medio del objeto document recuperamos el elemento Link por medio del método GET Element
Bayardi y lo que vamos a hacer es asignar una función a nuestro evento on click es decir que cuando
el usuario de clic a nuestro hipervínculo de Link se va a mandar a llamar.
Esta función y la función se llama vãlida salir así que básicamente con esto lo que estamos haciendo
es asociar una función de JavaScript que se va a mandar a llamar cuando se ejecute cierto evento.
En este caso cuando se ejecute el evento de un clic sobre nuestro elemento de hipervínculo llamado Link
así que cada vez que se dé clic sobre ese hipervínculo se va a mandar a llamar.
Esta función valida salir y también vamos a asociar otro método pero a nuestro otro hipervínculo el
hipervínculo llamado Link Search.
Así que cuando el usuario de clic sobre nuestro elemento sobre el hipervínculo de Link Sergi se va a
mandar a llamar la función de búsqueda así que básicamente también aquí es lo que estamos haciendo asociando
la función de búsqueda cuando el usuario da clic a nuestro elemento llamado Link Search el cual es un
hipervínculo y por ello es que lo pudimos recuperar por medio del elemento Element Bayardi ya que si
recordamos así es como nos definimos en nuestro documento HTML y con eso cerramos nuestra función inicia
datos ahora vamos a agregar estas funciones de vãlida a salir y la función de búsqueda pero con esto
básicamente ya están programados nuestros eventos on click
ahora esta función de validad salir valida si el usuario quiere salir del sitio o no básicamente va
a hacer una pregunta si el usuario quiere salir del sitio o no definimos la función la cual se llama
vãlida salir.
Para ello agregamos la palabra reservada función.
El método se llama vãlida salir y no recibe ningún argumento por lo tanto simplemente abrimos y cerramos
paréntesis y abrimos el cuerpo de esta función.
Algo importante es que JavaScript es sensible a mayúsculas y minúsculas por lo tanto es importante respetar
que si vamos a definir válida y la S con mayúscula salir entonces así de igual manera tenemos que definir
nuestra función válida y la S debe de ser mayúscula.
Esas son las mismas prácticas que utilizamos en nuestro lenguaje de programación Java así que estas
mismas prácticas las vamos a aplicar en este lenguaje de programación Java Script y lo que hacemos en
esta función de validad salir es agregar lo siguiente vamos a agregar un if y este IF.
Básicamente nos va a preguntar si queremos salir del sitio y para ello vamos a utilizar una ventana
de confirmación.
Esto es similar a una alerta sin embargo en este caso nos va a mostrar dos botones es decir que vamos
a poder seleccionar sí o no..
Por ello esta función de confirm nos va a mostrar una ventana y nos va a preguntar si deseamos salir
del sitio y si respondemos que sí entonces mandamos una alerta indicando que nos vamos a Google y retornamos
tú y al retornar tú lo que hacemos es que el flujo continúa de manera normal así que si regresamos entonces
nos vamos al sitio de Google y cerramos este IHF.
Sin embargo si en este botón de confirm seleccionamos la opción de no entonces se va a ejecutar nuestro
Eels ya que no deseamos salir del sitio y entonces mandamos una alerta de que nos quedamos en este sitio
y regresamos la bandera de fouls y con esto se rompe el flujo y ya no nos vamos al sitio de Google sino
que nos quedamos en este sitio y cerramos nuestro él y también cerramos la función así que como podemos
observar esta es la estructura y es que estamos trabajando para poder procesar la respuesta del usuario
si el usuario responde que sí.
En esta ventana de confirm entonces nos vamos al sitio de Google pero si responde que no. Entonces nos
quedamos en el sitio y regresamos fouls.
Esto es todo lo que tiene este método de vãlida salir ahora vamos a continuar y vamos a agregar el código
de nuestra función de búsqueda.
Esta es una función que pide una cadena a buscar en Google así que definimos nuestra función por medio
de la palabra reservada función.
La función se llama búsqueda y ahora por medio de la función prompt la cual también ya viene integrada
con JavaScript.
Vamos a capturar la información del usuario así que vamos a utilizar la función prom y le solicitamos
al usuario que escriba una cadena a buscar y lo que escriba el usuario lo vamos a asignar a una variable
en JavaScript.
A diferencia de lenguajes como Java no es necesario especificar el tipo de dato.
Podemos simplemente definir una variable y esta variable va a tomar el tipo del valor que se le asigne.
Por lo tanto en este caso esta variable va a regresar una cadena y por lo tanto esta variable respuesta
va a ser de tipo string pero podemos simplemente definir la variable por medio de la palabra reservada
Var y posteriormente crear esta variable llamada respuesta y esta función prom va a mostrar una alerta
y el usuario va a poder escribir en una caja de texto y lo que escriba el usuario.
Esta cadena se va a asignar directamente a la variable respuesta en caso de que el usuario haya respondido
con una cadena.
Entonces la concatenados a la búsqueda de Google para ello vamos a preguntar si la variable de respuesta
es diferente de nulo entonces vamos a imprimir tu respuesta fue y mandamos a imprimir el valor de la
respuesta y posteriormente por medio del operador dis nos va a servir para hacer una referencia hacia
el elemento que provocó este evento.
En este caso el elemento con identificador Link Search y concatenados la respuesta como parámetro de
una petición gheto.
Vamos a ver a continuación cómo realizar esto básicamente lo que vamos a hacer es agregar la respuesta
del usuario para buscar esta cadena en el link de Google que hemos definido anteriormente.
Para ello utilizamos este operador dice básicamente este operador Ordiz lo que permite es acceder al
elemento que provocó este evento y si recordamos este método se asoció precisamente cuando damos clic
al hipervínculo de Link Search así que básicamente esto es el elemento de Link Search y lo que vamos
a hacer es concatenar una búsqueda por medio de la siguiente sintaxis.
Agregamos la palabra de Search y posteriormente agregamos un parámetro.
En esta búsqueda para agregar un parámetro en los hipervínculos según hemos visto en las primeras lecciones
de HTML podemos agregar parámetros de la siguiente forma.
Agregamos un signo de interrogación y posteriormente podemos asignar un parámetro el parámetro se llama
Haku y el valor va a ser precisamente la cadena que queremos buscar la CUP significa QWERTY y así es
como lo procesa el sitio de Google.
Podemos indicar un Kairi y posteriormente por medio del valor de igual asignamos la cadena que queremos
buscar así que todo esto lo estamos generando de manera dinámica así que una vez que ya hemos agregado
y concatenado esta búsqueda a nuestro Link de Link Search entonces se genera un nuevo Link.
Así que este nuevo Link lo asignamos a una variable llamada precisamente nuevo Link y mandamos una alerta
precisamente para indicar al usuario cuál es el nuevo Link y hacemos un redireccionamiento al nuevo
Link.
Para ello utilizamos la función de Window punto location básicamente esta propiedad de Location precisamente
lo que estamos indicando al navegador es que vamos a cambiar hacia este hipervínculo hacia este nuevo
Link y regresamos fouls.
De lo contrario nos va a llevar a Link original así que regresamos Fool's precisamente para que no nos
vayamos a Link que se había registrado en el elemento Link Search.
Así que ahora con este nuevo Link hacemos un cambio hacia el nuevo Link al que queremos ir el cual ya
incluye la cadena que queremos buscar.
Por lo tanto vamos a utilizar esta propiedad de Window punto location y con esto nos vamos a ir hacia
el nuevo Link.
Por ello regresamos Fool's para que nos vayamos al link que habíamos definido previamente en nuestro
elemento Link cerchas y con eso cerramos nuestro IHF y en dado caso de que la respuesta haya sido vacía
Entonces mandamos una alerta no proporcionase ninguna cadena a buscar y regresamos fouls para que el
usuario pueda proporcionar nuevamente un valor cerramos este y cerramos nuestra función de búsqueda.
Con eso terminamos el contenido de nuestro archivo funciones punto J.V.
Recuerden que pueden dar clic en los nombres de los archivos para ir al código de cada uno de estos
archivos.
Sin embargo se les solicita codificar línea a línea para que quede claro este ejercicio de funciones
básicas JavaScript y únicamente en dado caso de que tengan problemas apoyarse de la documentación que
les entregamos
como siguiente paso vamos a ejecutar nuestro proyecto y podemos observar que si damos clic en el link
de ir a Google entonces nos pregunta si deseamos salir del sitio y tenemos dos opciones podemos dar
clic en Aceptar o cancelar.
Si damos clic en Aceptar entonces nos muestra la alerta nos vamos a Google y damos clic en Aceptar para
que hagamos el cambio hacia el navegador de Google.
Así que este sería el resultado de hacer el cambio hacia el link de Google
pero también tenemos la siguiente opción en el caso de que damos clic en Buscar en Google.
Entonces nos muestra nuestra alerta pero en este caso ya es un prom.
Lo anterior fue un diálogo de confirmación y este es un prom.
Así que en este caso escribimos la cadena a buscar.
Por ejemplo en la cadena de hola y damos clic en Aceptar y podemos observar que nos muestra la alerta.
Tu respuesta fue Hola y también damos clic en Aceptar.
Y podemos ver ahora que se ha generado un nuevo Link y éste es el nuevo Link Google.com punto Mx diagonal
Search y posteriormente agregamos el parámetro cú que va a ser nuestro Cuadri nuestra consulta igual
a la cadena de Hola así que este es el nuevo hipervínculo al cual nos vamos a dirigir.
Para ello es que utilizamos la propiedad de Window punto location y una vez que damos clic en Aceptar.
Entonces podemos observar el resultado de nuestro navegador en la parte superior nuestro hipervínculo
se agregó la cadena de CU igual a Hola y por lo tanto el resultado en automático nos muestra el resultado
de buscar la cadena de Hola en el buscador de Google como tareas extra del ejercicio.
Se deja probar con distintos valores y también revisar y entender a detalle cómo es que se asocia a
los eventos ejecutados a las funciones que realiza finalmente la acción de buscar como conclusión del
ejercicio.
Hemos puesto en práctica más funciones con JavaScript y hemos visto cómo podemos asociar la ejecución
de una función a un cierto evento.
Por ejemplo el evento un clic de algún elemento HTML como fue en este caso un hipervínculo.
Sin embargo de esta misma manera podemos asociar cualquier función a cualquier evento que suceda en
nuestra página HTML a través de código JavaScript.
Con esto concluimos nuestro ejercicio de funciones básicas JavaScript.