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.