Práctica en vídeo sobre los métodos de Attributes en jQuery

  • Por
Videotutorial donde realizamos un ejemplo para aprender a utilizar los métodos de attributes de jQuery, que nos sirve como práctica de jQuery.
Muchas personas nos comentan que con los manuales de DesarrolloWeb.com aprenden bastante, pero que a veces echan de menos algo de práctica. Pues bien, vamos a tratar de ofrecer respuesta a estas necesidades para ayudar a las personas que desean aprender jQuery. Para ello en la presente ocasión presentamos un vídeo eminentemente práctico, que nos ayudará a realizar un ejemplo completo de página dinámica que usa el popular framework Javascript.

En el presente vídeo, que se engloba dentro del Videotutorial de jQuery, vamos a ofrecer ejemplos de uso de las funciones recogidas dentro de la clasificación Attributes, que sirven para modificar los atributos de los elementos de la página. La teoría y los primeros ejemplos sobre todo lo que vamos a ver ya se explicaron en un vídeo anterior: Métodos Attributes en jQuery

Así pues, en este caso vamos a dejar de lado explicaciones generales y a mostrar cómo realizar un ejercicio sencillo con jQuery. La práctica consiste en hacer una especie de convertidor de moneda dinámico, que permite calcular el cambio de Dólar a Euro y de Euro a Dólar. En realidad el propio cambio exacto no importa mucho, pues varía diariamente y este ejercicio no es para saber el cambio real que tenga la moneda en un momento dado. En nuestra práctica el cambio será definido por una variable fija y nos centraremos en la parte que tiene que ver con la interfaz de usuario y cómo trabajar con jQuery para hacer un programita que sirva para convertir la moneda de una manera dinámica y visual.

Quizás lo más cómodo para que veamos el objetivo que perseguimos en este vídeo sobre jQuery, es entrar directamente a ver el ejemplo de conversor de moneda en funcionamiento.

Observaremos en el ejemplo que tenemos un campo de texto donde se puede escribir un número que sería la cantidad de la moneda origen que deseamos convertir. Luego hay un campo SELECT donde podemos elegir la moneda origen con la que estamos trabajando, tanto Euro como Dólar.

Una vez seleccionada esa cantidad y la moneda origen, mediante jQuery mostraremos la cantidad de moneda destino que tenemos una vez realizada la conversión. Como es un conversor Dólar – Euro, o bien Euro – Dólar, la moneda destino es justo la otra moneda, contraria a la que se seleccionó como moneda origen.

Para complicarlo un poquito y darle un poco de vistosidad al ejemplo, hemos creado un par de clases CSS que sirven para marcar la moneda origen y destino. Cuando se cambia la moneda de origen, automáticamente con jQuery modificamos las clases de los elementos para simbolizar gráficamente qué tenemos en los contenedores de la moneda origen y destino, Dólares o Euros.

El ejercicio esperamos que se pueda seguir sin problemas si hemos asistido a los vídeos anteriores de jQuery, pero claro que ya de por si utilizar el framework tiene cierta complejidad. No obstante, todo lo haremos partiendo desde cero y de modo que las personas puedan ver el proceso paso a paso, lo que esperamos que ofrezca una buena guía para las personas que están empezando a trabajar con jQuery.

Así pues, os dejamos sin más tardar con este videotutorial con la primera práctica completa en jQuery.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

bnRLiRkBnWnnRb

04/11/2011
ylawDPzwWfcuDIB
Times are changing for the bteter if I can get this online!

sebastian

20/11/2014
un pequeño error
vengo sigiendo los videos desde el principio sin ningùn problema...hasta este punto
bueno comento que hice todo al pie de la letra sobre la explicacion de este video...pero desgraciadamente algunas cosas no salieron bien.......me marca un pequeño error en el ide de netbean.... ...en opcion selected dolar...
la pregunta mia es...sera que estare usando la ùltima version del framework....de jquery que por eso no me funcionò????
gracias...por todo este aporque que me sirvio en aprender...

quizassi me podes pasar ese codigo...saludos...