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.
Muy buen artículo respecto a JQuery, hubiera estado interesante verlo funcionar :)
ResponderBorrarCopia y el pega el código en un archivo con extensión html. Ábrelo en el navegador y lo veras funcionar.
ResponderBorraro ¿Te referías a un screencast?
ResponderBorrar