Mi primer alert en JQuery

En las últimas semanas me he dedicado a implementar jQuery en todos mis desarrollos web, y bien, hoy me he decidido a empezar a postear una serie de artículos en el orden que más o menos he ido aprendiendo. Este es el primero de la serie, lo más sencillo que se hace y donde se muestra la funcionalidad es mostrando un mensaje en la pantalla del usuario.

¿Pero por dónde empezar? lo primero que debemos hacer es crear un nuevo sitio web, y a este sitio agregarle un elemento existente, este elemento será la librería de jQuery, para agregarla basta hacer click derecho en el namespace del proyecto, agregar nuevo elemento y buscar donde tengas agregada la librería.

Una vez la tengas dentro de la solución, vamos a agregar la “referencia” en nuestra página, esto lo hacemos dentro de las etiquetas del head:

<script src= "Scripts/jquery-1.5.2.js" type="text/javascript"></script>

Como puedes ver se ha creado la etiqueta script y a su propiedad src le asignamos la ruta donde tenemos la librería, y a la propiedad type le asignamos el lenguaje del script.

Ahora un poco de diseño, a nuestra pagina (Default.aspx) le agregamos un TextBox y un Button (este será todo el diseño que tendrá nuestra pagina). Ahora nos volvemos a donde nos quedamos, y empezaremos a escribir nuestro Script:

<script type = “text/javascript”>
        $(document).ready(function(){
            $(“#Button1″).click(function(otro){
                alert(“Has escrito: ” + $(“#TextBox1″).val());
            });
        })    
    </script>

Así queda nuestro primer script de jQuery. Te explico un poco lo que ves, la primera línea abre la etiqueta del script, la segunda línea hace uso de la función jQery con su “alias” $(), esta es la función principal de esta librería, como bien lo dice la documentación de esta, “Todo en jQuery está basado en esta función o la usa de alguna forma”.

Teniendo claro que $() es la función más importante de la librería, no se te haga extraño verla en todas partes de tu script. Luego de esto, te llevas como parámetro el objeto document y acude al método ready y a este le pasas como parámetro toda tu función. Lo que sigue es bastante entendible para quienes tienen experiencia en la programación, a la función $() le pasamos como parámetro el ID del control que queremos que “desencadene” la función, (este ID es un string) luego se apunta al evento a desencadenar, en este caso será el evento click, y finalmente realizas la acción del evento, en este caso, un alert, que muestra el texto que fue escrito en el control, texto que se muestra acudiendo al método val().

Como ves, ahora has podido mostrar un mensaje en pantalla sin necesidad de que lo escrito pase por el server, es decir, todas las operaciones las realizas del lado del cliente haciendo uso del DOM, de esto es de lo que se trata, de poder hacer más livianos muchos de los procesos de tus páginas.

Descarga el ejemplo

Colaboradores: Julio Avellaneda (Leder group BogotaDotNet).

Hasta el próximo post.

Anuncios
Mi primer alert en JQuery