Guarda la nostra video guida<\/a> a JavaScript<\/h3>\n<\/kinsta-video>\nCos’\u00e8 JavaScript?<\/h2>\n
Pi\u00f9 semplicemente, JavaScript \u00e8 un popolare linguaggio di scripting<\/a> che consente di aggiungere funzionalit\u00e0 interattive e altri contenuti dinamici alle pagine web. Esempi ben noti di contenuti JavaScript sono moduli compilabili, slideshow di gallerie fotografiche e grafica animata.<\/p>\nJavaScript \u00e8 anche relativamente intuitivo e semplice da imparare. \u00c8 un eccellente punto di partenza per chi cerca di sapere di pi\u00f9 sullo sviluppo dei siti web.<\/p>\n
JavaScript \u00e8 lo strato finale di funzionalit\u00e0 dei siti web altamente interattivi. L’HTML<\/a> fornisce la struttura di base della pagina. Il CSS<\/a> rende i siti alla moda – ne stabilisce lo stile. JavaScript aggiunge il divertimento.<\/p>\nQuando si apprende JavaScript, \u00e8 essenziale capire la relazione tra HTML, CSS e JavaScript e come si uniscono nella visualizzazione di un sito web.<\/p>\n
A Cosa Serve JavaScript<\/h2>\n
JavaScript ha varie applicazioni<\/a> che chiunque abbia visitato pagine web interattive o applicazioni mobili avr\u00e0 probabilmente conosciuto. Anche se JavaScript \u00e8 utilizzato tradizionalmente per lo sviluppo di siti web, compresa l’aggiunta di elementi come moduli interattivi e animazioni, trova impiego anche in:<\/p>\n\n- Giochi basati su browser web <\/strong>– sia giochi 2D che 3D<\/li>\n
- Sviluppo di applicazioni mobili <\/strong>– vantaggioso perch\u00e9 \u00e8 agnostico rispetto alle piattaforme mobili<\/li>\n
- Presentazioni <\/strong>– ad esempio, la creazione di diapositive animate basate sul web<\/li>\n<\/ul>\n
Anche se la maggior parte delle applicazioni JavaScript sono lato client, JavaScript \u00e8 utile anche nelle applicazioni lato server, come la creazione di server web.<\/p>\n![\"The](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/dinosaur-gameover-1024x358.png\")
The Dinosaur Game, un esempio di un gioco integrato nel browser creato utilizzando JavaScript<\/figcaption><\/figure>\nDifferenze tra Java e JavaScript<\/h2>\n
Innanzitutto, \u00e8 bene precisare che Java e JavaScript non sono correlati, nonostante condividano il termine “Java”. Sia Java che JavaScript sono linguaggi nati per sviluppare pagine e applicazioni web. Tuttavia, hanno differenze distintive, tra cui:<\/p>\n
\n- Programmazione orientata agli oggetti: <\/strong>Java \u00e8 un linguaggio di programmazione orientato agli oggetti<\/a>. JavaScript \u00e8 un linguaggio di scripting basato sugli oggetti.<\/li>\n
- Sintassi:<\/strong> La sintassi di JavaScript non \u00e8 cos\u00ec formale o strutturata come quella di Java. Quindi, \u00e8 pi\u00f9 semplice per la maggior parte degli utenti.<\/li>\n
- Compilazione:<\/strong> Java \u00e8 un linguaggio compilato, mentre JavaScript \u00e8 un linguaggio interpretato, che viene interpretato linea per linea in fase di esecuzione; i linguaggi compilati tendono ad essere pi\u00f9 veloci, ma i linguaggi interpretati tendono ad essere pi\u00f9 flessibili.<\/li>\n
- Ambiente: <\/strong>\u00c8 possibile utilizzare le applicazioni Java essenzialmente in qualsiasi ambiente, eseguendole in macchine virtuali o in browser<\/a>; JavaScript \u00e8 solo per i browser.<\/li>\n
- Utilizzo della memoria: <\/strong>Java richiede pi\u00f9 memoria<\/a> di JavaScript; questo rende JavaScript preferibile per le pagine e le applicazioni web<\/li>\n<\/ul>\n
JavaScript \u00e8 Sicuro?<\/h2>\n
Anche se JavaScript \u00e8 ampiamente accettato e utilizzato per lo sviluppo web, presenta delle vulnerabilit\u00e0 ben note. Uno dei pi\u00f9 comuni attacchi informatici introdotti attraverso le vulnerabilit\u00e0 di JavaScript \u00e8 l’attacco cross-site scripting (XSS). I criminali informatici ricorrono agli attacchi XSS per ottenere accesso e rubare informazioni sull’identit\u00e0.<\/p>\n
Per ridurre al minimo gli exploit, \u00e8 fondamentale testare e rivedere il codice<\/a> durante lo sviluppo. I metodi di testing come il test di sicurezza statico e dinamico delle applicazioni (SAST e DAST) aiutano a identificare le vulnerabilit\u00e0 in tutti i punti del ciclo di vita dello sviluppo del software.<\/p>\nSecondo gli analisti della sicurezza di Cloud Defense<\/a>, SAST controlla il vostro codice per verificare che non violi le regole di sicurezza e confronta le vulnerabilit\u00e0 trovate tra il branch sorgente e quello di destinazione. Riceverete una notifica se le dipendenze del vostro progetto sono affette da vulnerabilit\u00e0.<\/p>\nVanilla JavaScript<\/h2>\n
Vanilla JavaScript \u00e8 un’implementazione leggera del linguaggio JavaScript puro senza l’aggiunta di librerie. Il termine “vaniglia” si riferisce a JavaScript non personalizzato.<\/p>\n
Molte grandi aziende usano Vanilla JS<\/a>, tra cui Google, Microsoft, Apple, Amazon e altre. Vanilla JavaScript \u00e8 una strada eccellente per imparare le basi della programmazione JavaScript<\/a> prima di legarsi alle funzionalit\u00e0 pi\u00f9 avanzate offerte nelle librerie.<\/p>\nLibrerie JavaScript<\/h2>\n
Una libreria JavaScript \u00e8 una raccolta di codice pre-scritto che esegue determinate funzioni. Le librerie permettono anche agli utenti inesperti di costruire rapidamente siti web utili e fanno risparmiare un tempo significativo nella costruzione di siti e applicazioni sia agli utenti principianti che a quelli esperti.<\/p>\n
Anche se ci sono molte librerie JavaScript<\/a>, alcune delle pi\u00f9 popolari sono jQuery, Anime.js, Animate on Scroll e Leaflet.js.<\/p>\nCome si Relaziona JavaScript con i Framework dei Siti Web<\/h2>\n
I framework per siti web sono site builder avanzati, normalmente con ampie librerie di funzionalit\u00e0 pre-costruite e suite di testing. Potreste avere familiarit\u00e0 con framework lato server come Laravel<\/a>, Ruby on Rails o Django. Ma ci sono anche diversi framework popolari basati su JavaScript lato client, tra cui React.js, Vue.js e Node.js<\/a>.<\/p>\n![\"Libreria](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/reactjs2.jpg\")
Libreria React (Fonte immagine: Betica)<\/figcaption><\/figure>\nIl DOM di JavaScript<\/h2>\n
Il DOM, o Document Object Model, agisce come interfaccia tra un linguaggio di programmazione come JavaScript e un documento sottostante – in particolare, documenti HTML e XML.<\/p>\n
DOM \u00e8 uno standard del W3C (World Wide Web Consortium)<\/a>, definito come “un’interfaccia indipendente dalla piattaforma e dal linguaggio che permette a programmi e script di accedere dinamicamente e aggiornare il contenuto, la struttura e lo stile di un documento”. I documenti consistono in un insieme di singoli elementi e propriet\u00e0 (testo<\/a>, pulsanti, link, ecc.).<\/p>\nComponenti di Base di JavaScript<\/h2>\n
Come per altri linguaggi di programmazione<\/a>, JavaScript usa le variabili per identificare le posizioni in cui vengono memorizzati i dati. Le variabili possono essere globali (accessibili da qualsiasi funzione nel codice) o locali, note anche come block-scoped (accessibili solo nel blocco in cui sono dichiarate).<\/p>\nLe variabili possono contenere sia valori fissi (costanti note come literal) che valori modificabili. JavaScript ha una sintassi particolare per dichiarare (creare) costanti e variabili, e assegnare loro dei valori.<\/p>\n
Dichiarare una Costante<\/h3>\n
Le costanti vere sono create utilizzando la dichiarazione const<\/code><\/a>. Const<\/code> crea delle costanti di sola lettura, immutabili e con un block-scoped (“block-scoped” significa che la costante non \u00e8 accessibile dall’esterno del suo blocco dichiarato).<\/p>\nUn esempio di utilizzo di const<\/code> per creare una costante \u00e8:<\/p>\nconst GOLDEN_RATIO = 1.618; \/\/ create a constant named GOLDEN_RATIO with value 1.618<\/code><\/pre>\nNotate l’uso di lettere maiuscole per nominare la costante; questa \u00e8 una convenzione di denominazione comunemente accettata, sebbene non sia obbligatoria. I nomi delle variabili, inclusi quelli delle costanti, devono iniziare con una lettera (minuscola o maiuscola), il carattere di sottolineatura (_<\/code>) o il simbolo del dollaro ($<\/code>). Sono sensibili alle maiuscole e alle minuscole, quindi attenti a ricordare i nomi che assegnate alle vostre variabili.<\/p>\nAlle costanti, a differenza delle variabili, deve essere assegnato un valore al momento della creazione. La seguente dichiarazione restituir\u00e0 un errore:<\/p>\n
const GOLDEN_RATIO;<\/code><\/pre>\nDichiarare una Variabile<\/h3>\n
Le variabili sono dichiarate utilizzando la parola chiave var<\/code><\/a>. Non \u00e8 necessario che abbiano un valore assegnato al momento della dichiarazione, anche se \u00e8 permesso farlo e viene fatto spesso. La parola chiave var<\/code> ha uno scopo globale piuttosto che di blocco (a meno che non sia in una funzione, allora ha uno scopo di funzione).<\/p>\nvar variable1; \/\/ declare a variable called variable1\n\nvar variable2 = \"2021\"; \/\/ declare a string variable called variable2 and initialize with value 2021\n\nvariable1 = \"Thank goodness it's\" \/\/ assign string value to previously declared variable variable1\n\nconsole.log(variable1 + \" \" + variable2); \/\/ display \"Thank goodness it's 2021\"<\/code><\/pre>\nNotate che le dichiarazioni in JavaScript devono finire con un punto e virgola. Potete creare commenti utilizzando \/\/<\/code> – JavaScript ignora qualsiasi cosa tra \/\/<\/code> e la fine della linea.<\/p>\nLe variabili possono contenere una variet\u00e0 di tipi di dati, tra cui numeri, stringhe e oggetti. L’assegnazione delle variabili in JavaScript \u00e8 dinamica. Quindi potete assegnare una variabile ad un diverso tipo di dati nello stesso codice.<\/p>\n
Hoisting<\/h2>\n
Ora che avete capito come avviene la dichiarazione delle variabili in JavaScript<\/a>, possiamo vedere come JavaScript si occupa della posizione della dichiarazione delle variabili. La pratica di codifica comunemente accettata richiede di dichiarare le variabili prima o contemporaneamente alla definizione. Alcuni linguaggi di programmazione in realt\u00e0 lo richiedono.<\/p>\nJavaScript, tuttavia, permette alle variabili di essere dichiarate dopo che sono state definite o utilizzate. Usando una caratteristica chiamata hoisting, JavaScript sposta le dichiarazioni all’inizio dello script o della funzione corrente. Mentre l’hoisting pu\u00f2 semplificare la programmazione permettendo ad un programmatore di correggere una mancata dichiarazione senza dover scorrere indietro il codice, dichiarare le variabili dopo l’utilizzo non \u00e8 coerente con le best practice della programmazione<\/a>.<\/p>\nL’hoisting pu\u00f2 anche causare problemi inaspettati, principalmente perch\u00e9 l’hoisting si applica solo alla dichiarazione. Se una variabile \u00e8 dichiarata e inizializzata nella stessa dichiarazione, l’hoisting creer\u00e0 una dichiarazione all’inizio del blocco e assegner\u00e0 alla variabile un valore non definito. Cos\u00ec, qualsiasi utilizzo della variabile nel blocco prima dell’effettiva dichiarazione assumer\u00e0 che la variabile sia indefinita piuttosto che avere il valore di inizializzazione.<\/p>\n
Usiamo l’esempio precedente per rivedere il comportamento di hoisting:<\/p>\n
var variable_1 = \"Thank goodness it's\"; \/\/ declare and initialize a string variable called variable_1\n\nconsole.log(variable_1 + \" \" + variable_2); \/\/\n\nvar variable_2 = \"2021\" \/\/ declare and initialize a string variable called variable2<\/code><\/pre>\nMentre l’hoisting sposta la dichiarazione variabile_2<\/code> all’inizio del blocco, non sposta il valore assegnato. Questa logica funziona in modo approssimativamente equivalente alla seguente sintassi:<\/p>\nvar variable_1 = \"Thank goodness it's\"; \/\/ declare and initialize a string variable called variable_1\n\nvar variable_2;\n\nconsole.log(variable1 + \" \" + variable2); \/\/\n\nvariable_2 = \"2021\" \/\/ assign string value to variable2<\/code><\/pre>\nIn entrambi i casi, il valore finale “Grazie al cielo \u00e8 il 2021” non fa parte dell’output.<\/p>\n
Vi consigliamo di seguire la best practice di dichiarare le variabili per evitare potenziali problemi e creare un codice pi\u00f9 pulito.<\/p>\n
Oggetti<\/h2>\n
JavaScript si basa sul concetto di oggetti<\/a>. Gli oggetti sono contenitori che possono racchiudere propriet\u00e0, metodi o entrambi.<\/p>\nEcco un semplice esempio. Avete un oggetto chiamato “country”. Le sue propriet\u00e0 includono il nome, il continente, la capitale e la popolazione. Potete creare questo oggetto in diversi modi con JavaScript.<\/p>\n
In primo luogo, potete seguire l’approccio object literal o object initializer:<\/p>\n
var country = {\n\n name:\"France\",\n\n continent:\"Europe\",\n\n capital:\"Paris\",\n\n population:62250000;\n\n}<\/code><\/pre>\nPotete anche istanziare un oggetto e poi assegnare le sue propriet\u00e0:<\/p>\n
var country = new Object();\n\ncountry.name = \"France\";\n\ncountry.continent = \"Europe\";\n\ncountry.capital = \"Paris\";\n\ncountry.population = 62250000;<\/code><\/pre>\nNotate che vi riferite alle propriet\u00e0 di un oggetto usando la sintassi object.property<\/code>.<\/p>\nInfine, potete creare oggetti usando le funzioni constructor:<\/p>\n
function country(name, continent, capital, population) {\n\n country.name = name;\n\n country.continent = continent;\n\n country.capital = capital;\n\n country.population = population;\n\n}<\/code><\/pre>\nLa creazione di un’istanza dell’oggetto verrebbe poi fatta da:<\/p>\n
france = new country(\"France\",\"Europe\",\"Paris\",62250000)<\/code><\/pre>\nLe propriet\u00e0 degli oggetti possono essere variabili o funzioni. Come vedremo pi\u00f9 avanti, quando la propriet\u00e0 di un oggetto \u00e8 una funzione, si chiama metodo.<\/p>\n
Oggetti contro classi<\/h3>\n
In breve, una classe \u00e8 un modello di struttura generica per un oggetto. Le classi usano la forma del costruttore per descrivere gli oggetti.<\/p>\n
class country {\n\n Constructor (name,continent,capital,population) {\n\n country.name = name;\n\n country.continent = continent;\n\n country.capital = capital;\n\n country.population = population;\n\n }\n\n}<\/code><\/pre>\nProprio come gli oggetti, le classi possono avere dei metodi.<\/p>\n
Lavorare con Costanti e Variabili<\/h2>\n
Come per altri linguaggi, JavaScript ha diversi tipi di operatori<\/a> adoperati con variabili e funzioni, la maggior parte dei quali saranno immediatamente riconoscibili:<\/p>\n\n- Operatori di assegnazione (
=<\/code>, +=<\/code>, -=<\/code>, *=<\/code>, \/=<\/code>, %=<\/code>)<\/li>\n- Operatori di confronto (
==<\/code>, ===<\/code>, !=<\/code>, !==<\/code>, ><\/code>, >=<\/code>, <<\/code>, <=<\/code>)<\/li>\n- Operatori logici e bitwise (vedi sotto)<\/li>\n
- Operatori aritmetici (
+<\/code>, -<\/code>, *<\/code>, \/<\/code>, %<\/code>, ++<\/code>, --<\/code>)<\/li>\n- Operatori speciali<\/li>\n<\/ul>\n
Alcuni operatori sono meno familiari ai programmatori<\/a> principianti, come gli operatori di confronto identici e non identici.<\/p>\n===<\/code> confronta se due operandi hanno lo stesso valore e tipo (cio\u00e8 sono identici). !==<\/code> confronta se due operandi non sono identici.<\/p>\nConsiderate il seguente esempio:<\/p>\n
var variable_1 = 5; \/\/ declare variable_1 and assign numeric value 5\n\nvar variable_2 = \"5\"; \/\/ declare variable_2 and assign string value \"5\"\n\nconsole.log(variable_1 === variable_2);\n\nconsole.log(variable_1 !== variable_2);<\/code><\/pre>\nL’output per questo frammento di codice sarebbe:<\/p>\n
FALSE\nTRUE<\/code><\/pre>\n\u00c8 essenziale anche comprendere la differenza tra =<\/code> (operatore di assegnazione) e ==<\/code> (operatore di confronto).<\/p>\nMentre =<\/code> imposta il valore di una variabile, ==<\/code> controlla se due operandi hanno lo stesso valore, e anche se una variabile ha un dato valore. Non dovreste utilizzare l’operatore =<\/code> in dichiarazioni condizionali (come le dichiarazioni IF) per verificare l’equivalenza.<\/p>\nOperatori Bitwise e Logici<\/h3>\n
JavaScript supporta le operazioni AND (&<\/code> ), OR (|<\/code>), NOT (~<\/code>) e XOR (^<\/code>). In JavaScript, questi sono conosciuti come operatori bitwise. Le operazioni bitwise convertono gli operandi in rappresentazioni binarie a 32 bit prima di operare (ad esempio, 20 diventa 10100). Queste operazioni sono chiamate bitwise perch\u00e9 confrontano gli operandi convertiti<\/a> bit per bit, quindi restituiscono un risultato binario a 32 bit convertito in un intero.<\/p>\nEsempio:<\/p>\n
var variable_1 = 20;\n\nvar variable_2 = 50;\n\nconsole.log(variable_1 | variable_2) \/\/ display the result of variable_1 OR variable_2<\/code><\/pre>\nConverte gli operandi in binario:<\/p>\n
20 = 010100\n\n50 = 110010<\/code><\/pre>\nUn’operazione OR restituisce vero (1) quando uno dei due bit \u00e8 1, quindi il valore di confronto visualizzato \u00e8 110110 o 53. In JavaScript, il termine operatore logico si riferisce alle operazioni i cui operandi hanno solo i valori booleani 0 o 1. Gli operatori logici JavaScript sono &&<\/code> (AND logico), ||<\/code> (OR logico), e !<\/code> (NOT logico).<\/p>\nvar variable_1;\n\nvar variable_2;\n\nvariable _1 = (6 > 5); \/\/ sets variable_1 to true or 1\n\nvariable_2 = (7 <= 6); \/\/ sets variable_2 to false or 0\n\nConsole.log(variable_1 && variable_2); \/\/ displays 0<\/code><\/pre>\nFunzioni e Metodi<\/h2>\n
Pensate alle funzioni come ai cavalli di battaglia di JavaScript. Sono blocchi di codice che eseguono compiti specifici. Se avete familiarit\u00e0 con procedure e subroutine in altri linguaggi di programmazione, riconoscerete immediatamente le funzioni.<\/p>\n
Le funzioni sono definite utilizzando la seguente sintassi:<\/p>\n
function function_name(parameter list) {\n\n \/\/ tasks to be performed\n\n}<\/code><\/pre>\nDefinire le funzioni \u00e8 solo il primo passo; in seguito dovrete invocare le funzioni utilizzando ()<\/code> nel codice:<\/p>\n$()<\/h3>\n
La funzione $()<\/code> \u00e8 l’abbreviazione del metodo getElementByID, che, come notato sopra, restituisce l’ID di uno specifico elemento del DOM HTML. \u00c8 spesso utilizzato per manipolare elementi in un documento. $()<\/code> permette una codifica JavaScript pi\u00f9 breve ed efficiente.<\/p>\nMetodo tradizionale:<\/p>\n
document.getElementByID(\"element_id\")\n\n$() method:\n\n$(\"element_id\")<\/code><\/pre>\nFunzione vs Metodo<\/h3>\n
Le funzioni eseguono dei compiti; i metodi sono propriet\u00e0 degli oggetti che contengono la definizione funzionale. La sintassi per invocare i metodi \u00e8 object.function()<\/code>. Le funzioni sono autonome; i metodi sono associati agli oggetti.<\/p>\nNell’esempio visto sopra, il metodo document.getElementByID(\"element_id\")<\/code> si riferisce a un oggetto (document<\/code>) e alla propriet\u00e0 associata per quell’oggetto (getElementbyID()<\/code>).<\/p>\nCi sono due tipi di metodi in JavaScript:<\/p>\n
\n- Metodi di istanza<\/li>\n
- Metodi statici<\/li>\n<\/ul>\n
I metodi d’istanza possono accedere e manipolare le propriet\u00e0 di un’istanza dell’oggetto. I metodi di istanza possono anche invocare un altro metodo di istanza o un metodo statico.<\/p>\n
I metodi statici contengono la logica relativa a una classe invece di un’istanza della classe. Per creare un metodo statico, dovete usare la parola static prima della definizione della funzione. I metodi statici possono accedere solo a campi statici; non possono accedere a campi di istanza.<\/p>\n
Promesse in JavaScript<\/h2>\n
Una promessa \u00e8 un oggetto che produce un risultato in un momento futuro<\/a>. Nella terminologia JavaScript, le promesse sono conosciute come codice di produzione e consumo.<\/p>\nPer essere completate, le funzioni possono richiedere una quantit\u00e0 di tempo<\/a> non specificata e significativa. Il codice consumer attende i risultati del codice produttore asincrono prima di eseguire le sue funzioni. Le promesse definiscono la relazione tra il codice produttore e il codice consumer.<\/p>\nLe promesse hanno tre possibili stati: pending, fulfilled, o rejected. Nella definizione di una promessa, sono specificati due argomenti: resolve o reject. Pending \u00e8 lo stato iniziale di una promessa e significa che la promessa non \u00e8 stata n\u00e9 soddisfatta n\u00e9 rifiutata. Fulfilled implica che la promessa \u00e8 tornata risolta. Rejected significa che la promessa \u00e8 tornata indietro. Una promessa che non \u00e8 pi\u00f9 nello stato di pending \u00e8 considerata risolta.<\/p>\n
La sintassi di esempio per creare una promessa \u00e8:<\/p>\n
var newPromise = new Promise(\n\n function(resolve, reject) {\n\n \/\/ condition to be tested\n\n }\n\n)<\/code><\/pre>\nChiusure in JavaScript<\/h2>\n
Le chiusure sono una funzionalit\u00e0 di JavaScript che spesso lascia perplessi i programmatori<\/a>, anche se non sono cos\u00ec complicate. Le chiusure JavaScript sono metodi per indirizzare il funzionamento delle funzioni annidate. In particolare, le chiusure permettono ad una funzione interna di accedere al contenuto di una funzione madre, oltre alle variabili globali ordinariamente accessibili. Notate che mentre la funzione interna ha accesso alle variabili della funzione esterna, il contrario non \u00e8 vero.<\/p>\nPer capire le chiusure, dovete ricordare i fondamenti dello scopo. Le variabili all’interno di una funzione sono generalmente accessibili solo da quella funzione, e lo scopo viene creato per ogni chiamata, non genericamente per la funzione. Le chiusure fanno fronte al fatto che le variabili di solito scompaiono dopo il completamento di una funzione. Permettono anche alle variabili di rimanere accessibili dopo che una funzione \u00e8 stata eseguita.<\/p>\n
Considerate il seguente codice di esempio:<\/p>\n
function outer_closure_function() {\n\n var outer_variable = \"we want to keep the outer variable\";\n\n var inner_closure_function = function() {\n\n inner_variable = \"use closures because\"\n\n console.log(inner_variable + \" \" + outer_variable);\n\n }\n\n return inner_closure_function;\n\n}\n\nvar closure = outer_closure_function(); \/\/ returns a reference to inner_closure_function\n\nclosure(); \/\/ displays \"use closures because we want to keep the outer variable\"<\/code><\/pre>\nPer capire come funziona questa chiusura, analizziamo il codice linea per linea. Prima si definisce la funzione esterna e poi una variabile associata. Successivamente, si definisce la funzione interna. \u00c8 importante notare che non avete invocato la funzione interna – l’avete solo definita. Poi c’\u00e8 una dichiarazione che restituisce la funzione interna. Ma ci\u00f2 che restituisce non \u00e8 il risultato della funzione interna, ma \u00e8 la funzione stessa.<\/p>\n
Cos\u00ec, quando si definisce la chiusura come outer_closure_function<\/code>, non restituisce il valore effettivo della funzione interna. Restituisce invece un riferimento a inner_closure_function<\/code>. Anche se la funzione esterna \u00e8 stata completata dopo questa dichiarazione e outer_variable<\/code> ufficialmente non esiste pi\u00f9. Ma \u00e8 ancora conservata nel riferimento a inner_closure_function<\/code>. Ora, quando si chiama la chiusura nell’ultima istruzione, viene visualizzato il risultato desiderato.<\/p>\nPer capire meglio le chiusure, dovreste creare e testare voi stessi alcuni esempi<\/a>. Ci vuole tempo per farli bene. Inoltre, ripetuti aggiornamenti e test vi aiuteranno a crearvi una mentalit\u00e0 di sviluppo agile.<\/p>\nMa mentre procedete, tenete sempre a mente i problemi di sicurezza<\/a> – JavaScript pu\u00f2 essere suscettibile di gravi problemi di sicurezza, come iniezioni SQL e LDAP<\/a>, attacchi XSS, ecc.<\/p>\nRiepilogo<\/h2>\n
Se siete interessati a fare qualcosa di pi\u00f9 con le vostre pagine web di quanto possiate ottenere da servizi out-of-the-box come Wix e Square, dovreste considerare la possibilit\u00e0 di imparare JavaScript. \u00c8 un’introduzione semplice alla programmazione di siti web e applicazioni<\/a> che pu\u00f2 aiutarvi ad aggiungere caratteristiche altamente interattive al vostro sito senza investire troppo tempo nello studio.<\/p>\n
Cos’\u00e8 JavaScript?<\/h2>\n
Pi\u00f9 semplicemente, JavaScript \u00e8 un popolare linguaggio di scripting<\/a> che consente di aggiungere funzionalit\u00e0 interattive e altri contenuti dinamici alle pagine web. Esempi ben noti di contenuti JavaScript sono moduli compilabili, slideshow di gallerie fotografiche e grafica animata.<\/p>\n JavaScript \u00e8 anche relativamente intuitivo e semplice da imparare. \u00c8 un eccellente punto di partenza per chi cerca di sapere di pi\u00f9 sullo sviluppo dei siti web.<\/p>\n JavaScript \u00e8 lo strato finale di funzionalit\u00e0 dei siti web altamente interattivi. L’HTML<\/a> fornisce la struttura di base della pagina. Il CSS<\/a> rende i siti alla moda – ne stabilisce lo stile. JavaScript aggiunge il divertimento.<\/p>\n Quando si apprende JavaScript, \u00e8 essenziale capire la relazione tra HTML, CSS e JavaScript e come si uniscono nella visualizzazione di un sito web.<\/p>\n JavaScript ha varie applicazioni<\/a> che chiunque abbia visitato pagine web interattive o applicazioni mobili avr\u00e0 probabilmente conosciuto. Anche se JavaScript \u00e8 utilizzato tradizionalmente per lo sviluppo di siti web, compresa l’aggiunta di elementi come moduli interattivi e animazioni, trova impiego anche in:<\/p>\n Anche se la maggior parte delle applicazioni JavaScript sono lato client, JavaScript \u00e8 utile anche nelle applicazioni lato server, come la creazione di server web.<\/p>\n Innanzitutto, \u00e8 bene precisare che Java e JavaScript non sono correlati, nonostante condividano il termine “Java”. Sia Java che JavaScript sono linguaggi nati per sviluppare pagine e applicazioni web. Tuttavia, hanno differenze distintive, tra cui:<\/p>\n Anche se JavaScript \u00e8 ampiamente accettato e utilizzato per lo sviluppo web, presenta delle vulnerabilit\u00e0 ben note. Uno dei pi\u00f9 comuni attacchi informatici introdotti attraverso le vulnerabilit\u00e0 di JavaScript \u00e8 l’attacco cross-site scripting (XSS). I criminali informatici ricorrono agli attacchi XSS per ottenere accesso e rubare informazioni sull’identit\u00e0.<\/p>\n Per ridurre al minimo gli exploit, \u00e8 fondamentale testare e rivedere il codice<\/a> durante lo sviluppo. I metodi di testing come il test di sicurezza statico e dinamico delle applicazioni (SAST e DAST) aiutano a identificare le vulnerabilit\u00e0 in tutti i punti del ciclo di vita dello sviluppo del software.<\/p>\n Secondo gli analisti della sicurezza di Cloud Defense<\/a>, SAST controlla il vostro codice per verificare che non violi le regole di sicurezza e confronta le vulnerabilit\u00e0 trovate tra il branch sorgente e quello di destinazione. Riceverete una notifica se le dipendenze del vostro progetto sono affette da vulnerabilit\u00e0.<\/p>\n Vanilla JavaScript \u00e8 un’implementazione leggera del linguaggio JavaScript puro senza l’aggiunta di librerie. Il termine “vaniglia” si riferisce a JavaScript non personalizzato.<\/p>\n Molte grandi aziende usano Vanilla JS<\/a>, tra cui Google, Microsoft, Apple, Amazon e altre. Vanilla JavaScript \u00e8 una strada eccellente per imparare le basi della programmazione JavaScript<\/a> prima di legarsi alle funzionalit\u00e0 pi\u00f9 avanzate offerte nelle librerie.<\/p>\n Una libreria JavaScript \u00e8 una raccolta di codice pre-scritto che esegue determinate funzioni. Le librerie permettono anche agli utenti inesperti di costruire rapidamente siti web utili e fanno risparmiare un tempo significativo nella costruzione di siti e applicazioni sia agli utenti principianti che a quelli esperti.<\/p>\n Anche se ci sono molte librerie JavaScript<\/a>, alcune delle pi\u00f9 popolari sono jQuery, Anime.js, Animate on Scroll e Leaflet.js.<\/p>\n I framework per siti web sono site builder avanzati, normalmente con ampie librerie di funzionalit\u00e0 pre-costruite e suite di testing. Potreste avere familiarit\u00e0 con framework lato server come Laravel<\/a>, Ruby on Rails o Django. Ma ci sono anche diversi framework popolari basati su JavaScript lato client, tra cui React.js, Vue.js e Node.js<\/a>.<\/p>\n Il DOM, o Document Object Model, agisce come interfaccia tra un linguaggio di programmazione come JavaScript e un documento sottostante – in particolare, documenti HTML e XML.<\/p>\n DOM \u00e8 uno standard del W3C (World Wide Web Consortium)<\/a>, definito come “un’interfaccia indipendente dalla piattaforma e dal linguaggio che permette a programmi e script di accedere dinamicamente e aggiornare il contenuto, la struttura e lo stile di un documento”. I documenti consistono in un insieme di singoli elementi e propriet\u00e0 (testo<\/a>, pulsanti, link, ecc.).<\/p>\n Come per altri linguaggi di programmazione<\/a>, JavaScript usa le variabili per identificare le posizioni in cui vengono memorizzati i dati. Le variabili possono essere globali (accessibili da qualsiasi funzione nel codice) o locali, note anche come block-scoped (accessibili solo nel blocco in cui sono dichiarate).<\/p>\n Le variabili possono contenere sia valori fissi (costanti note come literal) che valori modificabili. JavaScript ha una sintassi particolare per dichiarare (creare) costanti e variabili, e assegnare loro dei valori.<\/p>\n Le costanti vere sono create utilizzando la dichiarazione Un esempio di utilizzo di Notate l’uso di lettere maiuscole per nominare la costante; questa \u00e8 una convenzione di denominazione comunemente accettata, sebbene non sia obbligatoria. I nomi delle variabili, inclusi quelli delle costanti, devono iniziare con una lettera (minuscola o maiuscola), il carattere di sottolineatura ( Alle costanti, a differenza delle variabili, deve essere assegnato un valore al momento della creazione. La seguente dichiarazione restituir\u00e0 un errore:<\/p>\n Le variabili sono dichiarate utilizzando la parola chiave Notate che le dichiarazioni in JavaScript devono finire con un punto e virgola. Potete creare commenti utilizzando Le variabili possono contenere una variet\u00e0 di tipi di dati, tra cui numeri, stringhe e oggetti. L’assegnazione delle variabili in JavaScript \u00e8 dinamica. Quindi potete assegnare una variabile ad un diverso tipo di dati nello stesso codice.<\/p>\n Ora che avete capito come avviene la dichiarazione delle variabili in JavaScript<\/a>, possiamo vedere come JavaScript si occupa della posizione della dichiarazione delle variabili. La pratica di codifica comunemente accettata richiede di dichiarare le variabili prima o contemporaneamente alla definizione. Alcuni linguaggi di programmazione in realt\u00e0 lo richiedono.<\/p>\n JavaScript, tuttavia, permette alle variabili di essere dichiarate dopo che sono state definite o utilizzate. Usando una caratteristica chiamata hoisting, JavaScript sposta le dichiarazioni all’inizio dello script o della funzione corrente. Mentre l’hoisting pu\u00f2 semplificare la programmazione permettendo ad un programmatore di correggere una mancata dichiarazione senza dover scorrere indietro il codice, dichiarare le variabili dopo l’utilizzo non \u00e8 coerente con le best practice della programmazione<\/a>.<\/p>\n L’hoisting pu\u00f2 anche causare problemi inaspettati, principalmente perch\u00e9 l’hoisting si applica solo alla dichiarazione. Se una variabile \u00e8 dichiarata e inizializzata nella stessa dichiarazione, l’hoisting creer\u00e0 una dichiarazione all’inizio del blocco e assegner\u00e0 alla variabile un valore non definito. Cos\u00ec, qualsiasi utilizzo della variabile nel blocco prima dell’effettiva dichiarazione assumer\u00e0 che la variabile sia indefinita piuttosto che avere il valore di inizializzazione.<\/p>\n Usiamo l’esempio precedente per rivedere il comportamento di hoisting:<\/p>\n Mentre l’hoisting sposta la dichiarazione In entrambi i casi, il valore finale “Grazie al cielo \u00e8 il 2021” non fa parte dell’output.<\/p>\n Vi consigliamo di seguire la best practice di dichiarare le variabili per evitare potenziali problemi e creare un codice pi\u00f9 pulito.<\/p>\n JavaScript si basa sul concetto di oggetti<\/a>. Gli oggetti sono contenitori che possono racchiudere propriet\u00e0, metodi o entrambi.<\/p>\n Ecco un semplice esempio. Avete un oggetto chiamato “country”. Le sue propriet\u00e0 includono il nome, il continente, la capitale e la popolazione. Potete creare questo oggetto in diversi modi con JavaScript.<\/p>\n In primo luogo, potete seguire l’approccio object literal o object initializer:<\/p>\n Potete anche istanziare un oggetto e poi assegnare le sue propriet\u00e0:<\/p>\n Notate che vi riferite alle propriet\u00e0 di un oggetto usando la sintassi Infine, potete creare oggetti usando le funzioni constructor:<\/p>\n La creazione di un’istanza dell’oggetto verrebbe poi fatta da:<\/p>\n Le propriet\u00e0 degli oggetti possono essere variabili o funzioni. Come vedremo pi\u00f9 avanti, quando la propriet\u00e0 di un oggetto \u00e8 una funzione, si chiama metodo.<\/p>\n In breve, una classe \u00e8 un modello di struttura generica per un oggetto. Le classi usano la forma del costruttore per descrivere gli oggetti.<\/p>\n Proprio come gli oggetti, le classi possono avere dei metodi.<\/p>\n Come per altri linguaggi, JavaScript ha diversi tipi di operatori<\/a> adoperati con variabili e funzioni, la maggior parte dei quali saranno immediatamente riconoscibili:<\/p>\n Alcuni operatori sono meno familiari ai programmatori<\/a> principianti, come gli operatori di confronto identici e non identici.<\/p>\n Considerate il seguente esempio:<\/p>\n L’output per questo frammento di codice sarebbe:<\/p>\n \u00c8 essenziale anche comprendere la differenza tra Mentre JavaScript supporta le operazioni AND ( Esempio:<\/p>\n Converte gli operandi in binario:<\/p>\n Un’operazione OR restituisce vero (1) quando uno dei due bit \u00e8 1, quindi il valore di confronto visualizzato \u00e8 110110 o 53. In JavaScript, il termine operatore logico si riferisce alle operazioni i cui operandi hanno solo i valori booleani 0 o 1. Gli operatori logici JavaScript sono Pensate alle funzioni come ai cavalli di battaglia di JavaScript. Sono blocchi di codice che eseguono compiti specifici. Se avete familiarit\u00e0 con procedure e subroutine in altri linguaggi di programmazione, riconoscerete immediatamente le funzioni.<\/p>\n Le funzioni sono definite utilizzando la seguente sintassi:<\/p>\n Definire le funzioni \u00e8 solo il primo passo; in seguito dovrete invocare le funzioni utilizzando La funzione Metodo tradizionale:<\/p>\n Le funzioni eseguono dei compiti; i metodi sono propriet\u00e0 degli oggetti che contengono la definizione funzionale. La sintassi per invocare i metodi \u00e8 Nell’esempio visto sopra, il metodo Ci sono due tipi di metodi in JavaScript:<\/p>\n I metodi d’istanza possono accedere e manipolare le propriet\u00e0 di un’istanza dell’oggetto. I metodi di istanza possono anche invocare un altro metodo di istanza o un metodo statico.<\/p>\n I metodi statici contengono la logica relativa a una classe invece di un’istanza della classe. Per creare un metodo statico, dovete usare la parola static prima della definizione della funzione. I metodi statici possono accedere solo a campi statici; non possono accedere a campi di istanza.<\/p>\n Una promessa \u00e8 un oggetto che produce un risultato in un momento futuro<\/a>. Nella terminologia JavaScript, le promesse sono conosciute come codice di produzione e consumo.<\/p>\n Per essere completate, le funzioni possono richiedere una quantit\u00e0 di tempo<\/a> non specificata e significativa. Il codice consumer attende i risultati del codice produttore asincrono prima di eseguire le sue funzioni. Le promesse definiscono la relazione tra il codice produttore e il codice consumer.<\/p>\n Le promesse hanno tre possibili stati: pending, fulfilled, o rejected. Nella definizione di una promessa, sono specificati due argomenti: resolve o reject. Pending \u00e8 lo stato iniziale di una promessa e significa che la promessa non \u00e8 stata n\u00e9 soddisfatta n\u00e9 rifiutata. Fulfilled implica che la promessa \u00e8 tornata risolta. Rejected significa che la promessa \u00e8 tornata indietro. Una promessa che non \u00e8 pi\u00f9 nello stato di pending \u00e8 considerata risolta.<\/p>\n La sintassi di esempio per creare una promessa \u00e8:<\/p>\n Le chiusure sono una funzionalit\u00e0 di JavaScript che spesso lascia perplessi i programmatori<\/a>, anche se non sono cos\u00ec complicate. Le chiusure JavaScript sono metodi per indirizzare il funzionamento delle funzioni annidate. In particolare, le chiusure permettono ad una funzione interna di accedere al contenuto di una funzione madre, oltre alle variabili globali ordinariamente accessibili. Notate che mentre la funzione interna ha accesso alle variabili della funzione esterna, il contrario non \u00e8 vero.<\/p>\n Per capire le chiusure, dovete ricordare i fondamenti dello scopo. Le variabili all’interno di una funzione sono generalmente accessibili solo da quella funzione, e lo scopo viene creato per ogni chiamata, non genericamente per la funzione. Le chiusure fanno fronte al fatto che le variabili di solito scompaiono dopo il completamento di una funzione. Permettono anche alle variabili di rimanere accessibili dopo che una funzione \u00e8 stata eseguita.<\/p>\n Considerate il seguente codice di esempio:<\/p>\n Per capire come funziona questa chiusura, analizziamo il codice linea per linea. Prima si definisce la funzione esterna e poi una variabile associata. Successivamente, si definisce la funzione interna. \u00c8 importante notare che non avete invocato la funzione interna – l’avete solo definita. Poi c’\u00e8 una dichiarazione che restituisce la funzione interna. Ma ci\u00f2 che restituisce non \u00e8 il risultato della funzione interna, ma \u00e8 la funzione stessa.<\/p>\n Cos\u00ec, quando si definisce la chiusura come Per capire meglio le chiusure, dovreste creare e testare voi stessi alcuni esempi<\/a>. Ci vuole tempo per farli bene. Inoltre, ripetuti aggiornamenti e test vi aiuteranno a crearvi una mentalit\u00e0 di sviluppo agile.<\/p>\n Ma mentre procedete, tenete sempre a mente i problemi di sicurezza<\/a> – JavaScript pu\u00f2 essere suscettibile di gravi problemi di sicurezza, come iniezioni SQL e LDAP<\/a>, attacchi XSS, ecc.<\/p>\n Se siete interessati a fare qualcosa di pi\u00f9 con le vostre pagine web di quanto possiate ottenere da servizi out-of-the-box come Wix e Square, dovreste considerare la possibilit\u00e0 di imparare JavaScript. \u00c8 un’introduzione semplice alla programmazione di siti web e applicazioni<\/a> che pu\u00f2 aiutarvi ad aggiungere caratteristiche altamente interattive al vostro sito senza investire troppo tempo nello studio.<\/p>\nA Cosa Serve JavaScript<\/h2>\n
\n
Differenze tra Java e JavaScript<\/h2>\n
\n
JavaScript \u00e8 Sicuro?<\/h2>\n
Vanilla JavaScript<\/h2>\n
Librerie JavaScript<\/h2>\n
Come si Relaziona JavaScript con i Framework dei Siti Web<\/h2>\n
Il DOM di JavaScript<\/h2>\n
Componenti di Base di JavaScript<\/h2>\n
Dichiarare una Costante<\/h3>\n
const<\/code><\/a>. Const<\/code> crea delle costanti di sola lettura, immutabili e con un block-scoped (“block-scoped” significa che la costante non \u00e8 accessibile dall’esterno del suo blocco dichiarato).<\/p>\nconst<\/code> per creare una costante \u00e8:<\/p>\nconst GOLDEN_RATIO = 1.618; \/\/ create a constant named GOLDEN_RATIO with value 1.618<\/code><\/pre>\n_<\/code>) o il simbolo del dollaro ($<\/code>). Sono sensibili alle maiuscole e alle minuscole, quindi attenti a ricordare i nomi che assegnate alle vostre variabili.<\/p>\nconst GOLDEN_RATIO;<\/code><\/pre>\nDichiarare una Variabile<\/h3>\n
var<\/code><\/a>. Non \u00e8 necessario che abbiano un valore assegnato al momento della dichiarazione, anche se \u00e8 permesso farlo e viene fatto spesso. La parola chiave var<\/code> ha uno scopo globale piuttosto che di blocco (a meno che non sia in una funzione, allora ha uno scopo di funzione).<\/p>\nvar variable1; \/\/ declare a variable called variable1\n\nvar variable2 = \"2021\"; \/\/ declare a string variable called variable2 and initialize with value 2021\n\nvariable1 = \"Thank goodness it's\" \/\/ assign string value to previously declared variable variable1\n\nconsole.log(variable1 + \" \" + variable2); \/\/ display \"Thank goodness it's 2021\"<\/code><\/pre>\n\/\/<\/code> – JavaScript ignora qualsiasi cosa tra \/\/<\/code> e la fine della linea.<\/p>\nHoisting<\/h2>\n
var variable_1 = \"Thank goodness it's\"; \/\/ declare and initialize a string variable called variable_1\n\nconsole.log(variable_1 + \" \" + variable_2); \/\/\n\nvar variable_2 = \"2021\" \/\/ declare and initialize a string variable called variable2<\/code><\/pre>\nvariabile_2<\/code> all’inizio del blocco, non sposta il valore assegnato. Questa logica funziona in modo approssimativamente equivalente alla seguente sintassi:<\/p>\nvar variable_1 = \"Thank goodness it's\"; \/\/ declare and initialize a string variable called variable_1\n\nvar variable_2;\n\nconsole.log(variable1 + \" \" + variable2); \/\/\n\nvariable_2 = \"2021\" \/\/ assign string value to variable2<\/code><\/pre>\nOggetti<\/h2>\n
var country = {\n\n name:\"France\",\n\n continent:\"Europe\",\n\n capital:\"Paris\",\n\n population:62250000;\n\n}<\/code><\/pre>\nvar country = new Object();\n\ncountry.name = \"France\";\n\ncountry.continent = \"Europe\";\n\ncountry.capital = \"Paris\";\n\ncountry.population = 62250000;<\/code><\/pre>\nobject.property<\/code>.<\/p>\nfunction country(name, continent, capital, population) {\n\n country.name = name;\n\n country.continent = continent;\n\n country.capital = capital;\n\n country.population = population;\n\n}<\/code><\/pre>\nfrance = new country(\"France\",\"Europe\",\"Paris\",62250000)<\/code><\/pre>\nOggetti contro classi<\/h3>\n
class country {\n\n Constructor (name,continent,capital,population) {\n\n country.name = name;\n\n country.continent = continent;\n\n country.capital = capital;\n\n country.population = population;\n\n }\n\n}<\/code><\/pre>\nLavorare con Costanti e Variabili<\/h2>\n
\n
=<\/code>, +=<\/code>, -=<\/code>, *=<\/code>, \/=<\/code>, %=<\/code>)<\/li>\n==<\/code>, ===<\/code>, !=<\/code>, !==<\/code>, ><\/code>, >=<\/code>, <<\/code>, <=<\/code>)<\/li>\n+<\/code>, -<\/code>, *<\/code>, \/<\/code>, %<\/code>, ++<\/code>, --<\/code>)<\/li>\n===<\/code> confronta se due operandi hanno lo stesso valore e tipo (cio\u00e8 sono identici). !==<\/code> confronta se due operandi non sono identici.<\/p>\nvar variable_1 = 5; \/\/ declare variable_1 and assign numeric value 5\n\nvar variable_2 = \"5\"; \/\/ declare variable_2 and assign string value \"5\"\n\nconsole.log(variable_1 === variable_2);\n\nconsole.log(variable_1 !== variable_2);<\/code><\/pre>\nFALSE\nTRUE<\/code><\/pre>\n=<\/code> (operatore di assegnazione) e ==<\/code> (operatore di confronto).<\/p>\n=<\/code> imposta il valore di una variabile, ==<\/code> controlla se due operandi hanno lo stesso valore, e anche se una variabile ha un dato valore. Non dovreste utilizzare l’operatore =<\/code> in dichiarazioni condizionali (come le dichiarazioni IF) per verificare l’equivalenza.<\/p>\nOperatori Bitwise e Logici<\/h3>\n
&<\/code> ), OR (|<\/code>), NOT (~<\/code>) e XOR (^<\/code>). In JavaScript, questi sono conosciuti come operatori bitwise. Le operazioni bitwise convertono gli operandi in rappresentazioni binarie a 32 bit prima di operare (ad esempio, 20 diventa 10100). Queste operazioni sono chiamate bitwise perch\u00e9 confrontano gli operandi convertiti<\/a> bit per bit, quindi restituiscono un risultato binario a 32 bit convertito in un intero.<\/p>\nvar variable_1 = 20;\n\nvar variable_2 = 50;\n\nconsole.log(variable_1 | variable_2) \/\/ display the result of variable_1 OR variable_2<\/code><\/pre>\n20 = 010100\n\n50 = 110010<\/code><\/pre>\n&&<\/code> (AND logico), ||<\/code> (OR logico), e !<\/code> (NOT logico).<\/p>\nvar variable_1;\n\nvar variable_2;\n\nvariable _1 = (6 > 5); \/\/ sets variable_1 to true or 1\n\nvariable_2 = (7 <= 6); \/\/ sets variable_2 to false or 0\n\nConsole.log(variable_1 && variable_2); \/\/ displays 0<\/code><\/pre>\nFunzioni e Metodi<\/h2>\n
function function_name(parameter list) {\n\n \/\/ tasks to be performed\n\n}<\/code><\/pre>\n()<\/code> nel codice:<\/p>\n$()<\/h3>\n
$()<\/code> \u00e8 l’abbreviazione del metodo getElementByID, che, come notato sopra, restituisce l’ID di uno specifico elemento del DOM HTML. \u00c8 spesso utilizzato per manipolare elementi in un documento. $()<\/code> permette una codifica JavaScript pi\u00f9 breve ed efficiente.<\/p>\ndocument.getElementByID(\"element_id\")\n\n$() method:\n\n$(\"element_id\")<\/code><\/pre>\nFunzione vs Metodo<\/h3>\n
object.function()<\/code>. Le funzioni sono autonome; i metodi sono associati agli oggetti.<\/p>\ndocument.getElementByID(\"element_id\")<\/code> si riferisce a un oggetto (document<\/code>) e alla propriet\u00e0 associata per quell’oggetto (getElementbyID()<\/code>).<\/p>\n\n
Promesse in JavaScript<\/h2>\n
var newPromise = new Promise(\n\n function(resolve, reject) {\n\n \/\/ condition to be tested\n\n }\n\n)<\/code><\/pre>\nChiusure in JavaScript<\/h2>\n
function outer_closure_function() {\n\n var outer_variable = \"we want to keep the outer variable\";\n\n var inner_closure_function = function() {\n\n inner_variable = \"use closures because\"\n\n console.log(inner_variable + \" \" + outer_variable);\n\n }\n\n return inner_closure_function;\n\n}\n\nvar closure = outer_closure_function(); \/\/ returns a reference to inner_closure_function\n\nclosure(); \/\/ displays \"use closures because we want to keep the outer variable\"<\/code><\/pre>\nouter_closure_function<\/code>, non restituisce il valore effettivo della funzione interna. Restituisce invece un riferimento a inner_closure_function<\/code>. Anche se la funzione esterna \u00e8 stata completata dopo questa dichiarazione e outer_variable<\/code> ufficialmente non esiste pi\u00f9. Ma \u00e8 ancora conservata nel riferimento a inner_closure_function<\/code>. Ora, quando si chiama la chiusura nell’ultima istruzione, viene visualizzato il risultato desiderato.<\/p>\nRiepilogo<\/h2>\n