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

4 comentarios en “Mi primer alert en JQuery

  1. Buen articulo, como se puede observar, jQuery nos hace la vida más fácil y permite agregar funcionalidad a nuestras aplicaciones sin necesidad de tener q matarnos la cabeza con JavaScript puro…

    y gracias por la referencia !

  2. diana lerma dijo:

    hola, espero y aun este activo este post, por que he escrito en varios y no responden, ya que el tema que tratan son los alert quiero preguntar porque cuando se ejecuta una alert la pagina se pone toda oscura y tengo que dar varias veces aceptar para desaparesca, es como si tubiera muchas alert’s cuando solo tengo una..gracias

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s