jQuery - Conceptos básicos

jQuery es un marco creado con capacidades de JavaScript. Por lo tanto, puede utilizar todas las funciones y otras capacidades disponibles en JavaScript. Este capítulo explicaría los conceptos más básicos pero que se utilizan con frecuencia en jQuery.

Cuerda

Una cadena en JavaScript es un objeto inmutable que no contiene ninguno, uno o muchos caracteres. A continuación se muestran los ejemplos válidos de una cadena de JavaScript:

"This is JavaScript String"
'This is JavaScript String'
'This is "really" a JavaScript String'
"This is 'really' a JavaScript String"

Números

Los números en JavaScript son valores IEEE 754 de formato de 64 bits de doble precisión. Son inmutables, como cuerdas. Los siguientes son ejemplos válidos de números JavaScript:

5350
120.27
0.26

Booleano

Un booleano en JavaScript puede ser true o false. Si un número es cero, el valor predeterminado es falso. Si una cadena vacía por defecto es falsa.

A continuación se muestran los ejemplos válidos de un JavaScript booleano:

true      // true
false     // false
0         // false
1         // true
""        // false
"hello"   // true

Objetos

JavaScript soporta muy bien el concepto de Objeto. Puede crear un objeto utilizando el objeto literal de la siguiente manera:

var emp = {
   name: "Zara",
   age: 10
};

Puede escribir y leer las propiedades de un objeto utilizando la notación de puntos de la siguiente manera:

// Getting object properties
emp.name  // ==> Zara
emp.age   // ==> 10

// Setting object properties
emp.name = "Daisy"  // <== Daisy
emp.age  =  20      // <== 20

Matrices

Puede definir matrices utilizando el literal de matriz de la siguiente manera:

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

Una matriz tiene un length propiedad que es útil para la iteración -

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

for (var i = 0; i < x.length; i++) {
   // Do something with x[i]
}

Funciones

Una función en JavaScript puede tener nombre o ser anónima. Una función nombrada se puede definir usando la palabra clave de función de la siguiente manera:

function named(){
   // do some stuff here
}

Una función anónima se puede definir de manera similar a una función normal, pero no tendría ningún nombre.

Se puede asignar una función anónima a una variable o pasar a un método como se muestra a continuación.

var handler = function (){
   // do some stuff here
}

JQuery hace un uso de funciones anónimas con mucha frecuencia de la siguiente manera:

$(document).ready(function(){
   // do some stuff here
});

Argumentos

Los argumentos variables de JavaScript son un tipo de matriz que tiene la propiedad de longitud . 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 de argumentos también tiene una propiedad callee , que se refiere a la función en la que se encuentra. Por ejemplo

function func() {
   return arguments.callee; 
}

func();                // ==> func

Contexto

Palabra clave famosa de JavaScript thissiempre se refiere al contexto actual. Dentro de una funciónthis el contexto puede cambiar, dependiendo de cómo se llame a la función -

$(document).ready(function() {
   // this refers to window.document
});

$("div").click(function() {
   // this refers to a div DOM element
});

Puede especificar el contexto para una llamada de función utilizando los métodos incorporados a la función call() y apply() métodos.

La diferencia entre ellos es cómo pasan los argumentos. Call pasa todos los argumentos como argumentos a la función, mientras que apply acepta una matriz 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

Alcance

El alcance de una variable es la región de su programa en la que está definida. La variable de JavaScript tendrá solo dos ámbitos.

Global Variables - Una variable global tiene un alcance global, lo que significa que está definida en todas partes en su código JavaScript.
Local Variables- Una variable local será visible solo dentro de una función donde esté definida. Los parámetros de la función son siempre locales para esa función.

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

var myVar = "global";     // ==> Declare a global variable

function ( ) {
   var myVar = "local";   // ==> Declare a local variable
   document.write(myVar); // ==> local
}

Llamar de vuelta

Una devolución de llamada es una función de JavaScript simple que se pasa a algún método como argumento u opción. Algunas devoluciones de llamada son solo eventos, llamados para darle al usuario la oportunidad de reaccionar cuando se activa un cierto estado.

El sistema de eventos de jQuery usa tales devoluciones de llamada en todas partes, por ejemplo:

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

La mayoría de las devoluciones de llamada proporcionan argumentos y un contexto. En el ejemplo del controlador de eventos, la devolución de llamada se llama con un argumento, un evento.

Algunas devoluciones de llamada son necesarias para devolver algo, otras hacen que ese valor de retorno sea opcional. Para evitar el envío de un formulario, un controlador de eventos de envío puede devolver falso de la siguiente manera:

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

Cierres

Los cierres se crean siempre que se accede a una variable que está definida fuera del ámbito actual desde dentro de algún ámbito interno.

El siguiente ejemplo muestra cómo la variable counter es visible dentro de las funciones de creación, incremento e impresión, pero no fuera de ellas:

function create() {
   var counter = 0;
	
   return {
      increment: function() {
         counter++;
      },
	   print: function() {
         console.log(counter);
      }
   }
}

var c = create();
c.increment();
c.print();     // ==> 1

Este patrón le permite crear objetos con métodos que operan con datos que no son visibles para el mundo exterior. se debe notar quedata hiding es la base misma de la programación orientada a objetos.

Patrón de proxy

Un proxy es un objeto que se puede utilizar para controlar el acceso a otro objeto. Implementa la misma interfaz que este otro objeto y le transmite cualquier invocación de método. Este otro objeto a menudo se denomina sujeto real.

Se puede crear una instancia de un proxy en lugar de este sujeto real y permitir que se acceda a él de forma remota. Podemos guardar el método setArray de jQuery en un cierre y sobrescribirlo de la siguiente manera:

(function() {
   // log all calls to setArray
   var proxied = jQuery.fn.setArray;

   jQuery.fn.setArray = function() {
      console.log(this, arguments);
      return proxied.apply(this, arguments);
   };
	
})();

Lo anterior envuelve su código en una función para ocultar la variable proxy . El proxy luego registra todas las llamadas al método y delega la llamada al método original. El uso de aplicar (esto, argumentos) garantiza que la persona que llama no podrá notar la diferencia entre el método original y el de proxy.

Funciones integradas

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

Las siguientes son funciones importantes de JavaScript:

No Señor.	Método y descripción
1	charAt() Devuelve el carácter en el índice especificado.
2	concat() Combina el texto de dos cadenas y devuelve una nueva cadena.
3	forEach() Llama a una función para cada elemento de la matriz.
4	indexOf() Devuelve el índice dentro del objeto String que llama de la primera aparición del valor especificado, o -1 si no se encuentra.
5	length() Devuelve la longitud de la cadena.
6	pop() Elimina el último elemento de una matriz y devuelve ese elemento.
7	push() Agrega uno o más elementos al final de una matriz y devuelve la nueva longitud de la matriz.
8	reverse() Invierte el orden de los elementos de una matriz: el primero se convierte en el último y el último en el primero.
9	sort() Ordena los elementos de una matriz.
10	substr() Devuelve los caracteres en una cadena que comienza en la ubicación especificada hasta el número especificado de caracteres.
11	toLowerCase() Devuelve el valor de la cadena de llamada convertido a minúsculas.
12	toString() Devuelve la representación de cadena del valor del número.
13	toUpperCase() Devuelve el valor de la cadena de llamada convertido a mayúsculas.

El modelo de objetos de documento

El modelo de objetos de documento es una estructura de árbol de varios elementos de HTML de la siguiente manera:

<html>
   <head>
      <title>The jQuery Example</title>
   </head>
	
   <body>
      <div>
         <p>This is a paragraph.</p>
         <p>This is second paragraph.</p>
         <p>This is third paragraph.</p>
      </div>
   </body>
</html>

Esto producirá el siguiente resultado:

Los siguientes son los puntos importantes sobre la estructura de árbol anterior:

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

Mientras aprende los conceptos de jQuery, será útil comprender el DOM, si no conoce DOM, le sugiero que siga nuestro sencillo tutorial sobre DOM Tutorial .

↰ Previous page Next page ↱