Ir al contenido principal

Iniciando con jQuery

He estado pensando en escribir alguno que otro post sobre JavaScript. No digo que vaya a empezar una serie ni mucho menos (luego las dejo a medias) pero si escribir algunos post. Así que iniciamos por el principio. Lo básico de jQuery.

El ejemplo será una lista de comentarios a la cual le quisiéramos ir agregando elementos a la lista. Tenemos el siguiente HTML:

<html>
<head>
<title>Comentarios</title>
</head>
<body>
<ul id="comments">
<li>Comentario 1</li>
<li>Comentario 2</li>
</ul>
<input id="comment" type="text" />
<button id="add" >Agregar</button>
</body>
</html>

La intención es que cuando el usuario haga clic en el botón “Agregar” se agregue lo escrito en la caja de texto a la lista de comentarios.


Lo primero que debemos hacer es agregar la referencia al código de jQuery. Podemos usar una copia local o hacer uso de alguna red de distribución de contenidos (CDN).


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

con esto ya podemos hacer uso de jQuery. Así que agregamos un bloque de script a nuestra página para agregar la funcionalidad que requerimos.


<script>
$(function () {
$("#add").click(function () {
var newCommentTextBox = $("#comment");
var commentText = newCommentTextBox.val();
$("#comments").append("<li>" + commentText + "</li>");
newCommentTextBox.val('');
});
});
</script>

Lo primero que hacemos es pasar como parámetro a la función “$” de jQuery una función que queremos que se ejecute al cargarse la página. Dentro de esta función tenemos la línea $(“#add”).click(function () { que lo que hace es primero buscar al elemento con id=“add”  (en este caso el botón) después llamar el método click y pasarle la función que queremos ejecutar cuando se haga un clic en el elemento.


Dentro de la función buscamos el elemento id=“comment” (que es la caja de texto) y obtenemos su contenido con la función val(). Después agregamos un elemento más a la lista de comentarios (id="comments") con el texto que obtuvimos de la caja de texto. Por último limpiamos la caja de texto con newCommentTextBox.val('');.


Espero que este post sirva para que quienes aun no se animan a entrarle a JavaScript vean lo fácil que es, empiecen a perderle el miedo y aprovechen las ventajas que tiene.

Comentarios

  1. Muy buen artículo respecto a JQuery, hubiera estado interesante verlo funcionar :)

    ResponderBorrar
  2. Copia y el pega el código en un archivo con extensión html. Ábrelo en el navegador y lo veras funcionar.

    ResponderBorrar
  3. o ¿Te referías a un screencast?

    ResponderBorrar

Publicar un comentario

Entradas más populares de este blog

Bloqueos

Una de las preguntas típicas de las juntas matutinas en los equipos de desarrollo de software es ¿Hay algún bloqueo? Si lo hay, se trata de ver qué es lo que está esperando esa persona y encontrar la forma de que se desbloquee; pero ¿Qué son los bloqueos? Los bloqueos son obstáculos que te impiden realizar o avanzar en tu trabajo. Evitan que puedas seguir progresando en el proyecto.

He notado que es común en las personas con menos experiencia decir que tienen un bloqueo cuando están batallando, debido a su poca experiencia, en la forma de resolver un problema. Han intentado varias formas y se empiezan a quedar sin ideas de como puede ser resuelto el problema o como pueden cumplir con el requerimiento especificado. Al quedarse sin opciones de qué intentar dicen que tienen un bloqueo con la tarea y que a menos que alguien les diga como resolverlo, no se puede avanzar en la tarea.

En personas con más experiencia, ese tipo de bloqueos no ocurren, una persona con experiencia ha visto pro…

Firebird 2.1 UPDATE OR INSERT

Another great feature that I like in Firebird 2.1 is the UPDATE OR INSERT statement. It's a really time saver and it makes the SQL cleaner.

For example suppose I have a products table like the one I use in my last post and an inventory table to store the product stock. Before Firebird 2.1 if I want to set the stock for a product I needed to check if a record for that product_id already exists; if the product_id already exists then I write an update. If not then I write an insert statement. So I ended up with something like this:


IF EXISTS(SELECT * FROM inventory WHERE product_id = :product_id ) THEN
UPDATE
inventory
SET
stock = :stock
WHERE
product_id = :product_id;
ELSE
INSERT INTO inventory
(product_id, stock)
VALUES
(:product_id, :stock);

In this example I only update one field but when I have to update a big table I ended up with a big chunk of code and thinking: "there should be another (better) way to do this".

Fortunately now with Firebird 2.1 there…

Database Mail en MS SQL Server 2005

Configuración de Database Mail en MS SQL Server 2005

Primero se debe de habilitar, ya que por omisión el componente esta deshabilitado, Utilizando el SSMS (SQL Server Management Studio)


Si no esta habilitado aparecerá un mensaje preguntado si lo habilita, después aparece esta ventana donde se pregunta al usuario que es lo desea hacer.


Seleccionamos la primera opción para crear un perfil.


Configuramos el perfil y le agregamos por lo menos una cuenta.


Seleccionamos el perfil como public y default.


Para mandar correo se utiliza el procedimiento msdb.sp_send_dbmail por lo tanto el usuario que intente mandar correo debe de tener permiso para la base de datos msdb.

Referencias:
http://www.sqlservercentral.com/columnists/cBunch/introtodatabasemailinsql2005.asp