Vamos a analizar a continuación el ejercicio de Select con JavaScript.
Están listos.
Vamos.
El objetivo del ejercicio es crear un proyecto JavaScript para poner en práctica el concepto de Select
y al finalizar deberemos observar lo siguiente según se muestra vamos a crear un nuevo proyecto.
Este nuevo proyecto se llama Select JavaScript y lo depositamos en la ruta mostrada y damos clic en
Finalizar
creamos un nuevo archivo en este caso es un nuevo archivo de tipo JavaScript llamado funciones lo depositamos
a nivel raíz y damos clic en Finalizar ahora vamos a agregar una página HTML llamada Java FACC junto
a HTML.
El nombre del archivo es Java FACC y damos clic en Finalizar
también agregamos otro archivo llamado Net FACC junto a HTML y damos clic en Finalizar y un último archivo
llamado PHP FACC y damos siguen finalizar todos estos archivos son de tipo HTML
vamos a modificar a continuación el archivo índex punto HTML agregamos el Doctrine abrimos nuestra etiqueta
HTML y agregamos lo siguiente El título va a hacer cambio de navegación y asociamos nuestro archivo
de JavaScript llamado funciones punto JS.
Como se muestra
cerramos el cabecero y agregamos el body.
En este caso agregamos el título de cambio de navegación y lo que vamos a hacer es utilizar un elemento
de tipo select y en este caso este elemento de tipo Select le asignamos el Heydi de Select FAQ FAQ significa
preguntas frecuentes así que básicamente vamos a simular tres páginas HTML para simular preguntas frecuentes
de cada una de las tecnologías que estemos mostrando.
En este caso de tecnologías de Java NET y PHP la primera opción va a ser la opción que se muestre de
manera por default.
Por ello indicamos que va a ser la opción de Selected y agregamos la opción de seleccionar un FAQ es
decir una opción de preguntas frecuentes la siguiente opción vamos a asociar el valor de IAVA FACC punto
HTML y el usuario va a ver la cadena de Java FACC la segunda opción.
Asociamos el archivo de Net FAQ punto HTML y el usuario ve la cadena de punto net FACC y la tercera
opción indicamos la opción de PHP FAQ punto HTML y un usuario visualiza la cadena de PHP FACC.
Recordemos que desde el punto de vista de JavaScript lo que vamos a manipular es el valor de esta opción
y aunque podemos acceder al valor de la cadena realmente lo que vamos a trabajar es precisamente el
valor que estamos indicando ya que en este caso si el usuario selecciona esta opción nos interesaría
ir a esta página ya FAQ punto HTML.
Así que por medio de JavaScript lo que vamos a hacer es acceder a este elemento de tipo Select.
Vamos a recordar que se llama elec FAQ.
Por ello es que le estamos asignando este Airi y tiene cada una de estas opciones dependiendo de la
opción seleccionada es que se va a mostrar en la página que el usuario haya seleccionado.
Pero todo este cambio lo vamos a hacer por medio de JavaScript.
Si únicamente utilizamos HTML y seleccionamos alguna de estas opciones podremos observar que no se realiza
ninguna acción así que es necesario en este caso JavaScript pero de manera natural HTML no hace ninguna
acción.
Una vez que hemos agregado este elemento.
Para ello necesitamos Argar código de manera dinámica y para ello es que en esta elección vamos a utilizar
JavaScript cerramos el body y también el HTML de nuestro y vamos a trabajar con nuestro código del archivo
funciones punto JS agregamos un comentario y posteriormente asignamos la función configuras Select en
nuestro método window punto unlocked es decir que cuando se cargue nuestro documento HTML se va a mandar
a llamar.
Esta función configura Select
así que definimos nuestra función configuras Select no reciben ningún parámetro y vamos a hacer lo siguiente
Vamos a seleccionar la opción por default.
La primera opción.
Para ello vamos a utilizar la sintaxis document punto Element Bayardi y con esto lo que hacemos es recuperar
el elemento de tipo select y posteriormente el índice es seleccionado indicamos que va a ser la opción
de cero y debido a que esto es un arreglo los arreglos también en JavaScript inician desde cero.
Por lo tanto la primera opción va a ser el valor de cero y también configuramos lo siguiente En el evento
on Change de este elemento de tipo Select le vamos a configurar el evento cambia página así que una
vez que el usuario seleccione alguna otra opción es decir que se mande a llamar el evento on Change
entonces se va a mandar a llamar.
Una función cambia página precisamente para que podamos observar ese cambio de manera dinámica ya que
como hemos comentado HTML por default no tiene esta funcionalidad.
Para ello debemos agregar por ejemplo en este caso código con JavaScript pero recordemos que este cambio
va a ocurrir hasta que el usuario seleccione alguna otra opción que no sea la opción por default.
Y definimos ahora la función cambia página en primer lugar lo que hacemos es recuperar el elemento de
tipo Select.
Para ello utilizamos el método Element Bayardi y proporcionamos el Heydi Select FAQ.
Esto nos regresa a nuestro elemento de tipo Select
posteriormente lo que hacemos es preguntar cuál fue la opción seleccionada.
Para ello utilizamos elementos elec y les solicitamos cuál fue el índice que seleccionó el usuario.
Una vez que sabemos el índice entonces nuevamente por medio de elementos elec vamos a recuperar la opción
que el usuario seleccionó.
Y todo esto nos regresa el elemento Select que el usuario ha seleccionado.
Sin embargo esto únicamente es el elemento HTML pero necesitamos recuperar la opción que el usuario
ha seleccionado de este elemento select y para ello es que finalmente solicitamos el valor.
Recordemos que el elemento Select de HTML tiene varias opciones hemos comentado que nos interesa es
precisamente la opción de valio el valor de la cadena que se ha proporcionado en este atributo de Balio.
Por ello es que con toda esta sintaxis recuperamos precisamente el valor de la cadena de la opción que
el usuario ha seleccionado y ese valor es precisamente el nombre de la nueva página a la cual debemos
dirigirnos y si la nueva página es diferente a cadena vacía entonces vamos a utilizar la propiedad Windows
punto location y le asignamos la nueva ruta en este caso a la nueva página y con esto concluimos nuestra
configuración del cambio de página.
Así que cuando el usuario selecciona alguna otra opción de nuestro Select entonces se manda llamar.
Este método cambia página y esta función cambia página una vez que ha seleccionado la nueva ruta.
Entonces por medio de la propiedad de Window punto location hace el cambio hacia la nueva página y finalmente
vamos a agregar el contenido de las páginas de FAQ de las opciones disponibles al usuario.
Sin embargo estas páginas simplemente tienen un texto para que sepamos que hemos hecho el cambio de
página
así que agregamos lo siguiente a nuestra página llama FAQ punto HTML únicamente es un título y agregamos
también un link para regresar al inicio de nuestro documento índex punto HTML y esto es todo el código
que van a tener este tipo de páginas ya Vifac junto a Net FACC y PHP FACC así que vamos a comentar las
siguientes páginas
ese es el contenido de la página.
Net FAQ punto HTML
así que únicamente tiene un título App.net FAQ y un link para regresar al inicio
y finalmente la página PHP.
FAQ
tiene el título de PHP FACC y un link para regresar al inicio.
Recuerden en cada uno de los archivos pueden dar clic para obtener el código respectivo.
Sin embargo se les solicita codificar línea a línea para que quede claro este ejercicio de Select con
JavaScript
finalmente ejecutamos nuestro proyecto y podemos observar las opciones de este elemento de tipo select
y seleccionamos algunas de estas opciones.
Por ejemplo Java FACC podemos observar que nos va a hacer un cambio de página una vez que hemos seleccionado
este elemento y podemos dar clic en regresar al inicio para que nos regrese al índex punto HTML y así
podemos probar cada una de las opciones según vayamos seleccionando las opciones de este elemento de
tipo Select
como conclusión.
Con este ejercicio hemos puesto en práctica el concepto de elementos elec de HTML y esto podemos agregarlo
a cualquiera de nuestros formularios HTML.
También vimos cómo al seleccionar cualquiera de las opciones del elemento celeb JavaScript detecta la
opción seleccionada y puede mandar a llamar una respuesta acorde a lo que el usuario ha seleccionado.
Con esto concluimos nuestro ejercicio Cele con JavaScript.