jQuery - Conceptos basicos
jQuery es un framework construido utilizando las capacidades de javascript. Asi que usted puede utilizar todas las funciones y otras capacidades disponibles en javascript.
Cadena
Una cadena en javascript es un objeto inmutable que contiene ninguno, o varios caracteres. Los siguientes son ejemplos validos de una cadena de javascript:
"Esto es una cadena Javascript"
'Esto es una cadena Javascript'
'Esto es "realmente" una cadena Javascript'
"Esto es 'realmente' una cadena Javascript"
Numeros
Los numeros en javascript son de formato IEEE 754 de doble precision de 64 bits. Ellos son inmutables al igual que las cadenas. Los siguientes son ejemplos validos de numeros en javascript:
5350
120.27
0.26
Booleanos
Un booleano en javascript puede ser falso o verdadero. Si un numero es cero, el valor predeterminado es falso. Los siguientes son ejemplos validos en booleano de javascript:
true // verdadero
false // falso
0 // falso
1 // verdadero
"" // falso
"hola" // verdadero
Objetos
Javascript soporta el concepto de objetos muy bien. Puede crear un objeto usando literalmente object de la siguiente manera:
var emp = {
nombre : "Sara",
edad : 10
}
Usted puede escribir y leer las propiedades de un objeto utilizando la notacion de puntos de la siguiente manera:
// Obtener las propiedades del objeto
emp.nombre // ==> Sara
emp.edad // ==> 10
// Estableciendo las propiedades del objeto
emp.nombre = "Deisi" // <== Daisi
emp.edad = 20 // <== 20
Arrays
Puede definir arrays utilizando literalmente array de la siguiente manera:
var x = [];
var y = [1, 2, 3, 4, 5];
Un array tiene la propiedad length que es util para la iteracion:
var x = [1, 2, 3, 4, 5];
for (var i = 0; i < x.length; i++){
// Hacemos algo con x[i]
}
Funciones
Una funcion en javascript puede ser o bien nombrada o anonima. Una funcion nombrada se puede definir mediante la palabra clave function de la siguiente manera:
function nombrada(){
}
Una funcion anonima puede ser definida en forma similar que una funcion normal, pero no tendrá ningun nombre. Una funcion anonima se puede asignar a una variable o se pasa a un metodo como se muestra a continuacion:
var manejador = function(){
// hacer algo aqui
}
jQuery hace uso de funciones anonimas con mucha frecuencia como sigue:
$(document).ready(function(){
// Hacer algo aqui
});
Argumentos
La variable javascript arguments es una especie de array que tiene la propiedad de length. El siguiente ejemplo lo muestra muy bien:
function func(x){
console.log(typeof x, arguments.length);
}
func(); // ==> "undefined", 0
func(1); // ==> "number", 1
func("1","2","3"); // ==> "string", 3
Los argumentos de los objetos tambien tienen una propiedad callee, que se refiere a la funcion que esta dentro de el. Por ejemplo:
function func(){
return arguments.callee;
}
func(); // ==> func
Contexto
Javascript tiene la famosa palabra clave this que se refiere al contexto actual. Dentro de una funcion este contexto puede cambiar, dependiendo de como se llama la funcion:
$(document).ready(function(){
// Esto hace referencia a window.document
});
$("div").click(function{
// Esto se refiere al elemento div en el DOM
});
Puede especificar el contexto de una llamada utilizando los metodos incorporados call() y apply(). La diferencia entre ellos es la forma en que se pasan los argumentos. Call pasa todos los argumentos a traves de los arguments de la funcion, mientras apply acepta un array como arguments.
function scope(){
console.log(this, arguments.length);
}
scope() // window, 0
scope.call("foobar",[1,2]); // ==> "foobar", 1
scope.apply("foobar",[1,2]); // ==> "foobar", 2
Ambito
El ambito de una variable es la region de su programa en el que se define. Las variables en javascript tendran solo dos ambitos.
Variables globales: una variable global tiene un alcance global que significa que se define por todas partes en su codigo javascript.
Variables locales: una variable local sera visible solo dentro de la funcion donde se define. Los parametros de la funcion son siempre locales a esa funcion.
Dentro del cuerpo de una funcion, una variable local tiene prioridad sobre una variable global con el mismo nombre:
var miVar = "global"; // ==> declaramos una variable global
function (){
var miVar = "local"; // ==> declaramos una variable local
document.write(miVar); // ==> local
}
Llamadas
Una callback (llamada) es una funcion de javascript plana pasado a algun metodo como argumento o una opcion. Algunas llamadas son solo eventos, llamados a dar al usuario la oportunidad de reaccionar cuando se activa un determinado estado. El sistema de eventos de jQuery utiliza estas llamadas en todas partes, por ejemplo:
$("body").click(function(event){
console.log("click en: " + event.target);
});
La mayoria de las llamadas proporcionan argumentos y un contexto. En el ejemplo del controlador de eventos, la devolucion de la llamada se llama como argumento. Se necesitan algunas llamadas para devolver algo, otros hacen el valor de retorno opcional. Para evitar un envio de formularios, en el controlador de eventos submit colocamos return false de la siguiente manera:
$("#miformulario").submit(function(){
return false;
});
Cierres
Los cierres se crean cada vez que se accede a una variable que se define fuera del ambito dentro de algun ambito interno. El ejemplo siguiente muestra como la variable contador es visible dentro de crear, de incrementar, y las funciones de impresion, pero no fuera de ellos:
function crear(){
var contador = 0;
return {
incrementar : function(){
contador++;
},
impresion : function(){
console.log(contador);
}
}
}
var c = crear();
c.incrementar();
c.impresion(); // ==> 1
Este patron permite crear objetos con metodos que operan sobre los datos que no son visibles para el mundo exterior. Cabe señalar que la ocultacion de datos es la base misma de la programacion orientada a objetos.
El patron Proxy
Un proxy es un objeto que se puede utilizar para controlar el acceso a otro objeto. Se implementa la misma interfaz que este otro objeto y pasa cualquier metodo invocandolo a él. Este otro objeto a menudo se llama real subject (sujeto real). Un proxy puede ser instanciado en lugar de real subject y permite ser accedido de forma remota. Podemos ahorrar usando el metodo setArray de jQuery en un cierre y sobreescribiendolo de la siguiente manera:
(function(){
// registramos todas las llamadas a setArray
var proxied = jQuery.fn.setArray;
jQuery.fn.setArray = function(){
console.log(this, arguments);
return proxied.apply(this, arguments);
}
})();
Lo anterior envuelve su codigo en una funcion para ocultar la variable proxied. El proxy entonces registra todas las llamadas al metodo y los delegados de la llamada al metodo original. Utilizando apply(this, arguments) garantiza que la persona que llama no sera capaz de notar la diferencia entre el original y el metodo proxied.
Funciones incorporadas
Javascript viene junto con un util conjunto de funciones incorporadas. Estos metodos se pueden utilizar para manipular cadenas, numeros y fechas. A continuacion se describen las funciones de javascript importantes:
+---------------+---------------------------------------------------------------------------------------------------------------------------------+
| Metodo | Descripcion |
+---------------+---------------------------------------------------------------------------------------------------------------------------------+
| charAt() | Devuelve el caracter en el indice especificado. |
+---------------+---------------------------------------------------------------------------------------------------------------------------------+
| concat() | Combina el texto de dos cadenas y devuelve una nueva cadena. |
+---------------+---------------------------------------------------------------------------------------------------------------------------------+
| forEach() | Llama una funcion para cada elemento de la matriz |
+---------------+---------------------------------------------------------------------------------------------------------------------------------+
| indexOf() | Devuelve el indice dentro del objeto llamado String de la primera aparicion del valor especificado, o -1 si no es encontrado. |
+---------------+---------------------------------------------------------------------------------------------------------------------------------+
| length() | Devuelve la longitud de una cadena. |
+---------------+---------------------------------------------------------------------------------------------------------------------------------+
| pop() | Elimina el ultimo elemento de una matriz y devuelve dicho elemento. |
+---------------+---------------------------------------------------------------------------------------------------------------------------------+
| push() | añade uno o mas elementos al final de una matriz y devuelve la nueva longitud de la matriz. |
+---------------+---------------------------------------------------------------------------------------------------------------------------------+
| reverse() | Invierte el orden de los elementos de una matriz, el primero se convierte en el ultimo, y el ultimo se convierte en el primero. |
+---------------+---------------------------------------------------------------------------------------------------------------------------------+
| sort() | Ordena los elementos de una matriz |
+---------------+---------------------------------------------------------------------------------------------------------------------------------+
| substr() | Devuelve los caracteres de una cadena que comienza en el lugar especificado, por el numero de caracteres especificados. |
+---------------+---------------------------------------------------------------------------------------------------------------------------------+
| toLowerCase() | Devuelve el valor de la cadena llamada convertido en minusculas. |
+---------------+---------------------------------------------------------------------------------------------------------------------------------+
| toString() | Devuelve la representacion de una cadena del valor de un numero. |
+---------------+---------------------------------------------------------------------------------------------------------------------------------+
| toUpperCase() | Devuelve el valor de la cadena llamada convertido en mayusculas. |
+---------------+---------------------------------------------------------------------------------------------------------------------------------+
El modelo de objetos del documento
El modelo de objetos del documento (Document object model) es una estructura de arbol de diversos elementos de HTML de la siguiente manera:
<html>
<head>
<title>Es el titulo</title>
</head>
<body>
<div>
<p>Este es un parrafo</p>
<p>Este es el segundo parrafo</p>
<p>Este es el tercer parrafo</p>
</div>
</body>
</html>
Los siguientes son los puntos importantes sobre la estructura de arbol de arriba:
* El <html> es el ancestro de todos los demas elementos, en otras palabras, todos los demas elementos son descendientes de <html>
* El <head> y <body> no son solo elementos descendientes, son hijos de <html> tambien.
* Del mismo modo ademas de ser antepasado de <head> y <body>, <html> tambien es su padre.
* Los elementos <p> son los hijos (y descendientes) de <div>, descendientes de <body> y <html> y hermanos unos de otros elementos <p>.
Fuente: http://www.tutorialspoint.com/jquery/index.htm
