Conceptos básicos de jQuery

Antes de empezar a aprender la sintaxis de jQuery, vamos a echar un vistazo rápido a Javascript. Esto es porque, jQuery es un framework construido usando las capacidades de JavaScript. Así que al hacer en jQuery, puedes utilizar todas las funciones y otras capacidades disponibles en JavaScript. Así que vamos a echar un vistazo rápido a los conceptos más básicos, pero los más utilizados en jQuery.

String

Una Cadena o String en JavaScript (jQuery) es un objeto inmutable que no contiene ninguno, uno o varios caracteres. Los siguientes son los ejemplos válidos de una cadena en JavaScript.

"Esto es un String de JavaScript"
'Esto es un String de JavaScript'
'Esto es "realmente" un String de JavaScript'
"Esto es 'realmente' un String de JavaScript"

Números

Los números en JavaScript son valores IEEE 754 de 64 bits de doble precisión. Son inmutables, al igual que las cadenas. Los siguientes son ejemplos válidos de números en JavaScript.

6311
23.45
0.56

Booleano

Un booleano en JavaScript (jQuery) puede ser verdadero o falso. Si un número es cero, es falso por defecto. Si una cadena vacía, por defecto es falsa.

Los siguientes son los ejemplos válidos de un booleano en JavaScript.

true      // true
false     // false
0         // false
1         // true
""        // false
"hola"   // true

Objetos

JavaScript (jQuery) soporta muy bien el concepto de objeto. Se puede crear un objeto utilizando el literal de objeto de la siguiente manera.

var usuario = {
   nombre: "Ana",
   edad: 24
};

Puede guardar y obtener propiedades de un objeto utilizando la notación de puntos de la siguiente manera.

// Obteniendo las propiedades del objecto
usuario.nombre  // ==> Ana
usuario.edad   // ==> 24
// Asignando las propiedades del objecto
usuario.nombre = "Lola"  // <== Lola
usuario.edad  =  20      // <== 20

Arrays

Puedes definir arrays de la siguiente manera.

var x = [];
var y = [1, 2, 3, 4, 5];

Los arrays tienen una propiedad de longitud que es útil para su iteración.

var x = [1, 2, 3, 4, 5];
for (var i = 0; i < x.length; i++) {
   // Hacer algo con x[i]
}

Funciones

Una función en JavaScript (jQuery) puede ser nominal o anónima. Una función nominal puede ser definida usando la palabra clave function como a continuación.

function nombre(){
   // haz algo aquí
}

Una función anónima puede definirse de forma similar a una función normal, pero no tendrá ningún nombre.

Una función anónima puede ser asignada a una variable o pasada a un método como se muestra a continuación.

var handler = function (){
   // haz algo aquí
}

JQuery hace un uso muy frecuente de las funciones anónimas como, por ejemplo, en este caso:

$(document).ready(function(){
   // haz algo aquí
});

Arguments

La variable arguments de JavaScript (jQuery) es un tipo de objeto que contiene los valores y el tamaño de los argumentos o parámetros pasados a esa función. El siguiente ejemplo lo explica muy bien.

function func(x){
   console.log(typeof x, arguments.length);
}
func();                //==> "undefined", 0
func(1);               //==> "number", 1
func("1", "2", "3");   //==> "string", 3

El objeto arguments también tiene una propiedad callee, que contiene la función en la que se encuentra. Por ejemplo:

function miFuncion() {
   return arguments.callee;
}
miFuncion();                // ==> miFuncion

Contexto

La famosa palabra clave de JavaScript (jQuery) se refiere siempre al contexto actual. Dentro de una función este contexto puede cambiar, dependiendo de cómo se llame a la función.

$(document).ready(function() {
   // esto se refiere a window.document
});
$("div").click(function() {
   // esto se refiere a un elemento DOM div
});

Puedes especificar el contexto para una llamada a una función utilizando los métodos de construcción de funciones call() y apply().

La diferencia entre ellos es cómo pasan los argumentos. call pasa los valores como lista de argumentos infinitos a la función, mientras que apply pasa un array como argumentos.

function scope() {
   console.log(this, arguments.length);
}
scope() // window, 0
scope.call("foobar", 1,2);  //==> "foobar", 1
scope.apply("foobar", [1,2]); //==> "foobar", 2

Scope / Ámbito

El scope (ámbito) de una variable es la parte de tu aplicación en la que se define. Las variables de JavaScript (jQuery) sólo tienen dos ámbitos.

• Variables Globales – Una variable global tiene un alcance global, lo que significa que se define en cualquier parte de tu código JavaScript.
• Variables Locales – Una variable local será visible sólo dentro de la función en la que está definida. Los parámetros de la función son siempre locales a esa función.

Dentro del cuerpo de una función, una variable local tiene prioridad sobre una variable global con el mismo nombre.

var miVariable = "global";     // ==> Declaración de variable global
function ( ) {
   var miVariable = "local";   // ==> Declaración de variable local
   document.write(myVar); // ==> local
}

Callback

Un callback es una función de JavaScript (jQuery) que es pasada a otro método como argumento. Algunas funciones callback son sólo eventos, por ejemplo, llamados para dar al usuario la oportunidad de reaccionar cuando se activa un determinado estado.

El sistema de eventos de jQuery utiliza este tipo de funciones callbacks en todas partes, por ejemplo:

$("body").click(function(event) {
   console.log("clickado: " + event.target);
});

La mayoría de callbacks proporcionan argumentos y un contexto. En el ejemplo del manejador de eventos, el callback es llamado con un argumento, un Evento.

Algunas funciones callback están obligadas a devolver algo, otras hacen que ese valor de retorno sea opcional. Para evitar el envío de un formulario, un manejador de eventos submit puede devolver false de la siguiente manera.

$("#myform").submit(function() {
   return false;
});

Closures

Los closures de JavaScript (jQuery) se crean siempre que se accede a una variable definida fuera del ámbito actual desde algún ámbito interno. Es decir, una función que utiliza un valor que fue declarado fuera de su contexto. Entender lo que es un closure es identificar cuando lo estas utilizando, no aprender a usarlo.

El siguiente ejemplo muestra cómo la variable counter es visible dentro de las funciones crear, incrementar e imprimir, pero no fuera de ellas.

function crear() {
   var contador = 0;
   return {
      incrementar: function() {
         contador++;
      },
	   imprimir: function() {
         console.log(contador);
      }
   }
}
var c = crear();
c.incrementar();
c.imprimir();     // ==> 1

Este patrón permite crear objetos con métodos que operan sobre datos que no son visibles para el mundo exterior. Hay que tener en cuenta que la ocultación de datos es la base misma de la programación orientada a objetos.

Funciones incorporadas

JavaScript viene con un útil conjunto de funciones incorporadas. Estos métodos pueden utilizarse para manipular cadenas, números y fechas.

Las siguientes son las funciones más importantes de JavaScript.

Modelo de objetos del documento (DOM)

El DOM es una estructura de árbol de varios elementos de HTML como se indica a continuación.

<html>
<head>
   <title>Ejemplo de DOM</title>
</head>
<body>
   <div>
      <p>Esto es un párrafo.</p>
      <p>Este es el segundo párrafo.</p>
      <p>Este es el tercer párrafo.</p>
   </div>
</body>
</html>

A continuación se exponen los puntos importantes de la estructura de árbol anterior.

• El elemento <html> es el ancestro de todos los demás elementos; en otras palabras, todos los demás elementos son descendientes de <html>.
• Los elementos <head> y <body> no sólo son descendientes, sino también hijos de <html>.
• Asimismo, además de ser el ancestro de <html> y <body> , <html> es también su padre.
• Los elementos <p> son hijos (y descendientes) de <div>, descendientes de <body> y <html>, y hermanos de los demás elementos <p>.