jQuery - Nozioni di base

jQuery è un framework creato utilizzando funzionalità JavaScript. Quindi, puoi utilizzare tutte le funzioni e altre capacità disponibili in JavaScript. Questo capitolo spiegherebbe la maggior parte dei concetti di base ma utilizzati di frequente in jQuery.

Corda

Una stringa in JavaScript è un oggetto immutabile che non contiene nessuno, uno o molti caratteri. Di seguito sono riportati gli esempi validi di una stringa JavaScript:

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

Numeri

I numeri in JavaScript sono valori IEEE 754 in formato a 64 bit a doppia precisione. Sono immutabili, proprio come le stringhe. Di seguito sono riportati gli esempi validi di un numero JavaScript:

5350
120.27
0.26

Booleano

Un booleano in JavaScript può essere entrambi true o false. Se un numero è zero, il valore predefinito è falso. Se una stringa vuota viene impostata su false.

Di seguito sono riportati gli esempi validi di un booleano JavaScript:

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

Oggetti

JavaScript supporta molto bene il concetto di oggetto. È possibile creare un oggetto utilizzando l'oggetto letterale come segue:

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

È possibile scrivere e leggere le proprietà di un oggetto utilizzando la notazione del punto come segue:

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

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

Arrays

È possibile definire array utilizzando il letterale array come segue:

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

Un array ha l'estensione length proprietà utile per l'iterazione -

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

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

Funzioni

Una funzione in JavaScript può essere denominata o anonima. Una funzione denominata può essere definita utilizzando la parola chiave function come segue:

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

Una funzione anonima può essere definita in modo simile a una normale funzione ma non avrebbe alcun nome.

Una funzione anonima può essere assegnata a una variabile o passata a un metodo come mostrato di seguito.

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

JQuery fa un uso di funzioni anonime molto frequentemente come segue:

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

argomenti

Gli argomenti della variabile JavaScript sono un tipo di array che ha la proprietà length . L'esempio seguente lo spiega molto bene:

function func(x){
   console.log(typeof x, arguments.length);
}

func();                //==> "undefined", 0
func(1);               //==> "number", 1
func("1", "2", "3");   //==> "string", 3

L'oggetto arguments ha anche una proprietà callee , che si riferisce alla funzione in cui ti trovi. Ad esempio:

function func() {
   return arguments.callee; 
}

func();                // ==> func

Contesto

Famosa parola chiave JavaScript thissi riferisce sempre al contesto attuale. All'interno di una funzionethis il contesto può cambiare, a seconda di come viene chiamata la funzione -

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

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

È possibile specificare il contesto per una chiamata di funzione utilizzando i metodi incorporati nella funzione call() e apply() metodi.

La differenza tra loro è il modo in cui passano gli argomenti. Call passa tutti gli argomenti come argomenti alla funzione, mentre apply accetta un array come argomenti.

function scope() {
   console.log(this, arguments.length);
}

scope() // window, 0
scope.call("foobar", [1,2]);  //==> "foobar", 1
scope.apply("foobar", [1,2]); //==> "foobar", 2

Scopo

L'ambito di una variabile è la regione del programma in cui è definita. La variabile JavaScript avrà solo due ambiti.

• Global Variables - Una variabile globale ha un ambito globale, il che significa che è definita ovunque nel codice JavaScript.

• Local Variables- Una variabile locale sarà visibile solo all'interno di una funzione in cui è definita. I parametri della funzione sono sempre locali rispetto a quella funzione.

All'interno del corpo di una funzione, una variabile locale ha la precedenza su una variabile globale con lo stesso nome -

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

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

Richiama

Un callback è una semplice funzione JavaScript passata a un metodo come argomento o opzione. Alcuni callback sono solo eventi, chiamati per dare all'utente la possibilità di reagire quando viene attivato un determinato stato.

Il sistema di eventi di jQuery utilizza tali callback ovunque, ad esempio -

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

La maggior parte dei callback fornisce argomenti e un contesto. Nell'esempio del gestore di eventi, il callback viene chiamato con un argomento, un Event.

Alcuni callback sono necessari per restituire qualcosa, altri rendono il valore di ritorno facoltativo. Per impedire l'invio di un modulo, un gestore di eventi di invio può restituire false come segue:

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

Chiusure

Le chiusure vengono create ogni volta che si accede a una variabile definita all'esterno dell'ambito corrente da un ambito interno.

L'esempio seguente mostra come la variabile counter è visibile all'interno delle funzioni di creazione, incremento e stampa, ma non al di fuori di esse -

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

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

Questo modello ti consente di creare oggetti con metodi che operano su dati non visibili al mondo esterno. Si dovrebbe notare chedata hiding è la base della programmazione orientata agli oggetti.

Pattern proxy

Un proxy è un oggetto che può essere utilizzato per controllare l'accesso a un altro oggetto. Implementa la stessa interfaccia di questo altro oggetto e gli passa qualsiasi invocazione di metodo. Questo altro oggetto è spesso chiamato soggetto reale.

Un proxy può essere istanziato al posto di questo soggetto reale e consentirne l'accesso da remoto. Possiamo salvare il metodo setArray di jQuery in una chiusura e sovrascriverlo come segue:

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

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

Quanto sopra racchiude il suo codice in una funzione per nascondere la variabile proxy . Il proxy quindi registra tutte le chiamate al metodo e delega la chiamata al metodo originale. L'uso di apply (this, arguments) garantisce che il chiamante non sarà in grado di notare la differenza tra il metodo originale e il metodo proxy.

Funzioni integrate

JavaScript viene fornito con un utile set di funzioni integrate. Questi metodi possono essere utilizzati per manipolare stringhe, numeri e date.

Di seguito sono riportate importanti funzioni JavaScript:

Sr.No.	Metodo e descrizione
1	charAt() Restituisce il carattere all'indice specificato.
2	concat() Combina il testo di due stringhe e restituisce una nuova stringa.
3	forEach() Chiama una funzione per ogni elemento dell'array.
4	indexOf() Restituisce l'indice all'interno dell'oggetto String chiamante della prima occorrenza del valore specificato o -1 se non trovato.
5	length() Restituisce la lunghezza della stringa.
6	pop() Rimuove l'ultimo elemento da un array e restituisce quell'elemento.
7	push() Aggiunge uno o più elementi alla fine di una matrice e restituisce la nuova lunghezza della matrice.
8	reverse() Inverte l'ordine degli elementi di un array: il primo diventa l'ultimo e l'ultimo diventa il primo.
9	sort() Ordina gli elementi di un array.
10	substr() Restituisce i caratteri in una stringa che inizia dalla posizione specificata fino al numero di caratteri specificato.
11	toLowerCase() Restituisce il valore della stringa chiamante convertito in minuscolo.
12	toString() Restituisce la rappresentazione di stringa del valore del numero.
13	toUpperCase() Restituisce il valore della stringa chiamante convertito in maiuscolo.

Il Document Object Model

Il Document Object Model è una struttura ad albero di vari elementi dell'HTML come segue:

<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>

Questo produrrà il seguente risultato:

Di seguito sono riportati i punti importanti sulla struttura ad albero di cui sopra:

• <html> è l'antenato di tutti gli altri elementi; in altre parole, tutti gli altri elementi sono discendenti di <html>.

• Gli elementi <head> e <body> non sono solo discendenti, ma anche figli di <html>.

• Allo stesso modo, oltre ad essere l'antenato di <head> e <body>, <html> è anche il loro genitore.

• Gli elementi <p> ​​sono figli (e discendenti) di <div>, discendenti di <body> e <html> e fratelli l'uno dell'altro <p> elementi.

Durante l'apprendimento dei concetti di jQuery, sarà utile avere una comprensione del DOM, se non sei a conoscenza del DOM, ti suggerirei di seguire il nostro semplice tutorial sul DOM Tutorial .