Intro… o parecido
Este tutorial ya tiene algo de tiempo rondando por Internet, especificamente en Cristalab. No lo habÃa publicado en mi blog por que… bueno, la verdad no se por que XD. Pero la idea es basicamente aprender lo basico de jQuery.
¿Que es jQuery?
jQuery es una liviana libreria de JavaScript, pensada para interactuar con los elementos de
una web por medio del DOM. Lo que la hace
tan especial es su sencillez y su reducido tamaño.
¿Por que deberÃa usarlo?
La sencillez de su sintaxis y la poca extension del codigo que necesitas escribir son las
caracteristicas más notables. Si hicieras lo que hace jQuery con getElementById y
window.onload no solo tendrias que escribir mucho, si no que podrian haber diversos
problemas.
¿Como empiezo a usarlo?
Lo primero que debes hacer, es descargarlo de la web oficial: jQuery . Una vez descargada la libreria (son más o menos 16k) puedes
proceder a tu primer script:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Prueba de jQuery</title>
<script src="jquery.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>
Lo primero que hacemos es linkear el jQuery a nuestro documento. Facil, no?
Ejecución y sintaxis básica
jQuery tiene una sintaxis muy sencilla. Los comandos se reconocen por comenzar con el simbolo
“$”. Ahora, la forma de una sentencia es la siguiente:
$(elemento).evento(funcion-o-parametro);
La manera de inicializar jQuery es muy util:
$(document).ready(function(){
//Aqui tu codigo
});
Ready es un método propio de jQuery, que revisa si el
DOM está listo para usarse. Es más util
que el window.onload, pues este debe esperar a que todos los elementos de la pagina esten cargados
(como scripts e imagenes) paa ejecutar. El “ready”, en cambio, espera solo a la estructura.
Acceso a elementos y eventos
Acceder a los elementos de la página es sencillo pues se usa la misma nomenclatura que en
CSS. Con estos metodos, seleccionaremos diferentes
elementos de la pagina, con los cuales interactuaremos:
| Tipo de elemento | Modo de llamado |
|---|---|
| Etiqueta | Nombre de la etiqueta. Ejemplos: “a”, “strong”, “div” |
| Elemento con un Id | Id precedido por el signo “#”. Ejemplos: “#principal”,”#texto” |
| Elemento con una clase (class) | Clase precedida por un punto (.). Ejemplos: “.codigo”, “.titulo” |
su uso seria:
$("* > a").click( function(){
alert("nada");
});
Los eventos responden a una interacción del usuario con la pagina o de la misma pagina de manera interna:
Por ejemplo, cuando el usuario hace click o se termina de ejecutar una funcion.
Los eventos que se pueden usar en jQuery son los mismos que usariamos normalmente en JavaScript. El unico cambio es la
supresión del “on” inicial: mouseover, click, focus, etc
Veamos todo junto
Veamos un ejemplo de lo visto hasta ahora:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Prueba de jQuery</title>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function (){
//Aqui asignamos el click al elemento <a>
$("a").click(function (){
alert("Presionaste un <a>");
});
});
</script> </head> <body> <a href="#"> Presioname! </a> </body> </html>
Al presionar cualquier etiqueta “a” del documento, se ejecutaria el alert.
Añadir o retirar clases
Cuando queremos que un elemento pueda interactuar con un css ya establecido, usamos las clases.
Con jQuery, estas pueden ser asignadas dinamicamente:
$("a").addClass("boton");
O tambien removidas:
$("a").removeClass("boton");
Ahora, podemos añadirle CSS a esa determinada clase, y ver como se comporta:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Prueba de jQuery
</title>
<script src="jquery.js" type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function (){
//Aqui asignamos el click al elemento <a>
$("a").click(function (){
alert("Presionaste un <a>");
//Aqui removemos la clase!
$("a").removeClass("boton");
});
//Aqui añadimos la clase a los elementos <a>
$("a").addClass("boton");
});
</script>
<style type="text/css">
.boton{
color:#f00;
display:block;
width:100px;
text-align:center;
border:#f00 solid 1px;
}
</style>
</head>
<body>
<a href="#" class="algo">Presioname!</a>
</body>
</html>
Al ejecutarse el script, todos los “a”, tomarán la clase “boton”, que tiene propiedades de CSS.
Sin embargo, al oprimir el elemento, la clase es removida.
Efectos especiales
Esta librerÃa también esta compuesta por algunos efectos, que resultan muy útiles. Son livianos
y faciles de llamar. A continuación, una breve descripcion de cuales son, que hacen y como se
usan:
Organizemos los efectos de esta manera:
- Nombre del efecto
- Descripcion
- Modo de llamado
- Descripcion de los parámetros
- Show (Mostrar)
- Modifica los atributos alto, ancho y transparencia, partiendo de 0.
- $(objeto).show(”velocidad”)
- Velocidad: Determina el tiempo en el que se realizará el efecto. Puede ser “slow”
(lento), “normal”, o “fast” (rápido).
- Hide (Ocultar)
- Modifica los atributos alto, ancho y transparencia, partiendo de los valores actuales
hasta llegar a 0. - $(objeto).hide(”velocidad”)
- Velocidad: Determina el tiempo en el que se realizará el efecto. Puede ser “slow”
(lento), “normal”, o “fast” (rápido).
- Slide Down (Aparecer hacia abajo)
- Modifica los atributos alto y transparencia, partiendo de 0. Es similar a “show”, salvo
que no modifica el ancho, creando un efecto de “cortinilla”. - $(objeto).slideDown(”velocidad”)
- Velocidad: Determina el tiempo en el que se realizará el efecto. Puede ser “slow”
(lento), “normal”, o “fast” (rápido).
- Slide Up (Aparecer hacia arriba)
- Modifica los atributos alto y transparencia, partiendo de los actuales, hasta llegar a
0. Es similar a “show”, salvo que no modifica el ancho, creando un efecto de “cortinilla”. - $(objeto).slideUp(”velocidad”)
- Velocidad: Determina el tiempo en el que se realizará el efecto. Puede ser “slow”
(lento), “normal”, o “fast” (rápido).
- Fade In(Aparecer)
- Modifica el atributo transparencia desde 0.
- $(objeto).fadeIn(”velocidad”)
- Velocidad: Determina el tiempo en el que se realizará el efecto. Puede ser “slow”
(lento), “normal”, o “fast” (rápido).
- Fade Out(Desaparecer)
- Modifica el atributo transparencia desde el valor actual, hasta llegar a 0
- $(objeto).fadeOut(”velocidad”)
- Velocidad: Determina el tiempo en el que se realizará el efecto. Puede ser “slow”
(lento), “normal”, o “fast” (rápido).
- Fade To(Cambiar transparencia)
- Modifica el atributo transparencia a un valor especifico.
- $(objeto).fadeTo(”velocidad”, transparencia)
- Velocidad: Determina el tiempo en el que se realizará el efecto. Puede ser “slow”
(lento), “normal”, o “fast” (rápido).Transparencia: Un numero de 0 a 100 que indica que tan visible es el elemento.
- Animate (Animar)
- Modifica un atributo especifico.
- $(objeto).animate(”propiedades”,”velocidad”);
- Velocidad: Determina el tiempo en el que se realizará el efecto. Puede ser “slow”
(lento), “normal”, o “fast” (rápido).Propiedades: Una o más propiedades con valor numérico en CSS, por ejemplo width y height.
La llamada seria:
$(objeto).animate({width:20,height:200}, "slow");
- Center (Centrar)
- Centra un elemento con respecto a su “parent”
- $(objeto).center(”velocidad”);
- Velocidad: Determina el tiempo en el que se realizará el efecto. Puede ser “slow”
(lento), “normal”, o “fast” (rápido).
“Callbacks”, llamar funciones y pasar parametros
Despues de un evento se pueden llamar otras funciones JavaScript y jQuery, de la forma
tradicional:
funcion();
Hay eventos que permiten, acabada su ejecución, llamar funciones. Los efectos, por ejemplo,
permiten un parámetro opcional, el de “callback”. De modo que la sintaxis para un efecto con
callback, serÃa (por ejemplo) la siguiente:
$(objeto).show("velocidad", funcion);
Como no se pueden usar parentesis en un callback, el modo de pasar los parametros seria el
siguiente:
$(objeto).show("slow", function(){
lafuncion("parametro1","parametro2");
});
Conclusiones
Este tutorial es a modo de introduccion. Depende de ti explorar jQuery para explotar todas sus
funcionalidades. Para conocer más a fondo esta librerÃa, puedes visitar los siguientes vinculos:
Introduccion
JavaScript es un lenguaje de programacion/scripting ampliamente subestimado e infravalorado. La principal razón de esto es por como surgió: Fue desarrollado primero para un solo navegador (Netscape Navigator) pero pronto, al ver su potencial, fue integrado a la mayorÃa de navegadores web por sus fabricantes.
Como suele suceder con los lenguajes de creación web, pronto surgió el caos: Extensiones, atributos o métodos no estandares fueron implementados por uno u otro navegador, causando que muchas veces se tuviera que crear un código dos veces, para que corriera en cualquier escenario. AsÃ, gracias a esta falta de estandarización, muchos tomaron al JavaScript como una mala práctica (No les recuerda al CSS?).
Otra de las razones que existen para las criticas hacia JavaScript, es que no esta basado en clases, si no en prototÃpos (más adelante la explicacion). Para muchos hardcoders que programan en Java o C++ es preferible la construcción de objetos con clases, por ventajas que ya conocemos, y un lenguaje que no las posea no es tan extensible o usable. Además, la extrema simplicidad del JS y su mal uso han originado horrores que todos hemos sufrido (popups, SnapShots, textos parpadeantes, propagandas dinamicas, etc). Y principalmente a eso le debemos el preconcepto hacia el JS.
Sin embargo, gracias a que el ECMAscript es basado en prototÃpos, el JavaScript tambien lo es lo que lo convierte en un lenguaje orientado a objetos (OOP, por Object Oriented Programming o POO, en español, por Programación Orientada a Objetos). Este tutorial pretende observar como se construyen los objetos en javascript, y como se pueden usar.
Clases vs prototÃpos
Como ya se mencionó, JS es basado en prototÃpos. Un prototÃpo es un objeto abstracto, capaz de contener otros objetos dentro, los cuales pueden ser distintos tipos de datos: variables (numeros, cadenas de texto, valores lógicos), vectores, funciones e inclusive otros grupos de objetos.
Entonces, en vez de programar una clase, para estar orientados a objetos en JS definimos un prototÃpo. Las variables dentro de este serán las propiedades, y las funciones serán los métodos:
[Objeto = PrototÃpo]{
[ Propiedad = Variable ]
[ Método = Funcion ]
}
Creación del objeto
Entonces, iniciemos la creación del objeto: Para este ejemplo usemos los tradicionales animales. La creación de un objeto se hace con una funcion, que será la constructora, y a la vez la que identifique el objeto.
Creemos una “clase” Gato para empezar… por que todos aman crear las clases “gato”. (Si no me crees, revisa los tutoriales de POO. Si no hay un Gato ahi, el tutorial no vale la pena XD).
Hay dos formas de definir la funcion constructora: Definir una funcion o definir una variable cuyo contenido sea una función. Puede parecer redundante, pero lo es =_=. Veamos ambas formas:
function Gato( parametros ){
// Codigo
};
o
var Gato= function( parametros ){
// Codigo
};
Nota: Para el resto del tuto vamos a usar la segunda forma 
Propiedades del objeto
Como vimos anteriormente, las propiedades del objeto se definen en forma de variables. Estas variables deben estar situadas dentro de la funcion constructora, marcadas con “this”, para poder ser accesadas como parte del objeto. Las variables reciben parametros que se envian al crear una nueva instancia del objeto (para nuestros propositos, al crear un nuevo gato).
Entonces veamos el ejemplo con nuestro objeto Gato. Un gato tiene como propiedades básicas… digamos que su nombre, su color, y su edad. Entonces estas propiedades serán las que reciba la funcion constructora para ser asignadas, Veamos como:
var Gato= function(nombre, color, edad){
this.nombre= nombre;
this.color= color;
this.edad= edad;
}
Con lo anterior, definimos el Gato, y cómo es ese gato. Sin embargo, algunos de los que son conocedores de la OOP ya deben estar pensando… ¿Y el strict data typing?. El script data typing es lo que regula el tipo de datos que entran a un objeto, y asi mismo el cómo se comportan. Por lo general, los lenguajes basados en clases son muy estrctos con respecto a los tipos de datos que se usan.
Por fortuna, en JS podemos emular el SDT, asignando los tipos de variables de entrada y (si eres un maniaco) chequeando que los valores sean correctos:
var Gato= function(nombre, color, edad){
this.nombre= new String(nombre);
this.color= new String(color);
this.edad= new Number(edad);
//Por ejemplo
if( isNaN ( this.edad ) ){
alert("Error en el data-typing, edad no es un numero");
}
}
Pues perfecto. Hemos creado la definición de nuestro objeto. Sin embargo nos falta un pequeño detalle. ¡Usar el objeto! Asi que vamos a crear un gato nuevo, y a asignarle las propiedades que ya vimos arriba:
var Michi= new Gato("Michifu", "azul", 2);
Con esto hemos creado una instancia de nuestro objeto, un simpatico “Gato” que se llama Michifu, tiene dos años y es … azul. Azul? Lo importante es que el código funcione, no? 
Si queremos comprobar alguna de las propiedades de nuestro objeto lo harÃamos asÃ: Variable_que_define_el_objeto (punto) propiedad_deseada. Asi que, por ejemplo, veamos el color del gato Michifu:
alert("El gato es de color "+Michi.color);
Lo que nos da el resultado: “El gato es de color azul”;
Métodos
Ahora, veamos los métodos del objeto. Como mencioné arriba, un metodo es una funcion dentro del objeto. Hay varios metodos para crear un método nuevo: Extendiendo el prototÃpo, creando una variable tipo funcion, o vinculando una funcion externa al objeto. Veamos todos los casos, y de paso creemos un par de “acciones” para nuestro gato. En los comportamientos basicos del gato, encontramos comer y descansar, asi que:
Método 1: Vinculación externa
Con este metodo declaramos que una de las propiedades, llamará a una funcion externa:
[...]
this.comer= comerExterna;
[...]
function comerExterna(){
alert(”El gato “+this.nombre+” se comió un ratón”)
}
[...]
Michi.comer();
[ Salida = "El gato Michifu se comió un ratón" ]
Método 2: Extension del prototipo
Como los objetos estan compuestos por prototipos en JavaScript, nosotros podemos aumentarle metodos al prototipo del objeto directamente, de la siguiente manera:
[ No tocamos la funcion constructora ]
Gato.prototype.comer= function(){
alert(”El gato “+this.nombre+” se comió un ratón”)
}
[...]
Michi.comer();
[ Salida = "El gato Michifu se comió un ratón" ]
Método 3: Definicion en la funcion constructora
Con este método, asignamos una propiedad como funcion dentro de la constructora:
[...]
this.comer= function(){
alert(”El gato “+this.nombre+” se comió un ratón”);
};
[...]
Michi.comer();
[ Salida = "El gato Michifu se comió un ratón" ]
Nótese que en los tres métodos, es posible pasar parametros a la funcion de la manera normal en que cualquier funcion trabaja. Además, en cualquiera de los metodos, this se refiere al objeto (en este caso Gato)
Herencia
Uno de las caracteristicas más interesante de la OOP, es la herencia de métodos / propiedades. En JavaScript lo podemos lograr mediante los prototÃpos. Entonces, ya tenemos un Gato, verdad? Ahora, creemos una raza de gatos, la raza Siamés. Entonces creemos dos constructoras apartes para cada una, y hagamos que siamés herede de gato:
var Gato= function(){
this.ojos= 2;
this.piernas= 4;
};
var Siames= function(){
this.color= "blanco";
this.color_ojos= "azul";
}
//Como vemos, ambos tienen propiedades distintas.
//Ahora, heredemos:
Siames.prototype= new Gato();
//Eso hace que se copie el prototipo de Gato y se añada al de Siames.
//Probemos a ver si es cierto
var Catboy= new Siames;
alert(Catboy.ojos);
//Retorna 2! ^_^
alert(Catboy.color);
//Retorna "blanco", asi que conserva sus propiedades
Métodos y propiedades privadas
En lo que hemos visto hasta ahora, los metodos y funciones eran totalmente publicos: Modificables y legibles desde cualquier parte. Echemos un vistazo a como “privatizar” variables:
var Gato= function(nombre){
this.nombre= nombre;
//Creamos una variable privada sin asignarle "this" a esta
var frecuencia= "moderada";
// Creamos un metodo privado en muchos aspectos (XD) definiendo una funcion normal
function irAlBano(frecuencia){
alert("El gato va al baño con frecuencia "+frecuencia);
};
irAlBano(frecuencia);
}
var Michin= new Gato("Michifu");
El código anterior crea la variable privada “frecuencia”, y la funcion privada “irAlBano”. Para comprobar que la variable sea privada, ejecutemos alert(Michin.frecuencia), lo que devuelve undefined
Sin embargo, aun podemos usar esas variables o funciones tanto en la funcion constructora, como por funciones “getter” o “setter”… las cuales no tienen un atributo “get” o “set” definido, simplemente son funciones que nos permiten leer las propiedades:
var Gato= function(nombre){
this.nombre= nombre;
//Creamos una variable privada sin asignarle "this" a esta
var frecuencia= "moderada";
// Creamos un metodo privado en muchos aspectos (XD) definiendo una funcion normal
function irAlBano(frecuencia){
alert("El gato va al baño con frecuencia "+frecuencia);
};
this.leerFrec= function(){
irAlBano(frecuencia);
};
}
var Michin= new Gato("Michifu");
Michin.leerFrec();
//Nos retorna "El gato va al baño con frecuencia moderada" 
Extension de objetos nativos mediante el prototÃpo
Como todos los objetos de JS tienen prototipo, nos podemos divertir añadiendo utilidades a nuestros objetos de siempre. Añadamole una funcion a Array, por ejemplo:
Array.prototype.coincidencias= function(palabra){
coincidencias= 0;
for(i=0; i< this.length; i++){
if( this[i] == palabra ){
coincidencias++;
}
}
alert(”Se encontraron “+coincidencias+” coincidencia(s) de la palabra”);
};
// Podemos usar el array siguiente:
clabbers= Array(”Freddie”,”Mx”,”Neo_JP”,”Zarzamora”,”Ramm”,”Fael”);
// O este
clabbers= Array(”Freddie”,”Mx”,”Neo_JP”,”Zarzamora”,”Mx”,”Mx”);
//Y luego
clabbers.coincidencias(”Mx”);
//Entonces la funcion nos notificará cuantas veces esta una palabra en un array. Cool, no?
Conclusiones
Como vimos, entender la composición del prototipo de un objeto en JS puede ser terriblemente útil. Y entender como trabajar con clases en este lenguaje nos puede hacer más facil la vida: Reutilizar código, ganar velocidad en desarrollo, o dividir el trabajo entre varias personas se vuelve muy sencillo (como ocurre con la POO en general).
Adicionalmente a lo visto, si se quiere mayor similitud la POO clásica, se puede mandar un valor de retorno a cada funcion (como Void usamos True o False) y comprobar si los tipos de datos son correctos con condicionales.
Ahora, una implementacion de POO en JS combinada con jQuery u otra librerÃa similar, puede resultar muy potente cuando de DOM se trata. A desarrollar
