diff options
Diffstat (limited to 'files/it/web/javascript')
196 files changed, 37754 insertions, 0 deletions
diff --git a/files/it/web/javascript/chiusure/index.html b/files/it/web/javascript/chiusure/index.html new file mode 100644 index 0000000000..deee56e54b --- /dev/null +++ b/files/it/web/javascript/chiusure/index.html @@ -0,0 +1,345 @@ +--- +title: Chiusure +slug: Web/JavaScript/Chiusure +translation_of: Web/JavaScript/Closures +--- +<div>{{jsSidebar("Intermediate")}}</div> + +<div></div> + +<p class="summary">Una <strong>closure</strong> è la combinazione di una funzione e dello stato nella quale è stata creata (ambito lessicale). In altre parole, una <strong>closure</strong> consente a una funzione interna di accedere allo scope della funzione che la racchiude. In Javascript le <strong>closure</strong> sono create ogni volta che una funzione viene creata, al momento della creazione della funzione stessa.</p> + +<h2 id="Lexical_scoping">Lexical scoping</h2> + +<p>Considerate la seguente:</p> + +<div> +<pre class="brush: js notranslate">function init() { + var name = "Mozilla"; // name è una variabile locale creata da init + function displayName() { // displayName() è una funzione interna, una chiusura + alert(name); // utilizza la variabile dichiarata nella funzione padre + } + displayName(); +} +init();</pre> +</div> + +<p><code>init()</code> crea una variabile locale <code>name</code> e poi una funzione chiamata <code>displayName()</code>. <code>displayName()</code> è una funzione interna che è definita dentro <code>init()</code> ed è disponibile solo all'interno del corpo di quella funzione. <code>displayName()</code> non ha proprie variabili locali. Tuttavia, poiché le funzioni interne hanno accesso alle variabili di quelle esterne, <code>displayName()</code> può accedere alla variabile <code>name</code> dichiarata nella funzione genitore, <code>init()</code> Tuttavia verrebbero usate le variabili locali in <code>displayName()</code>, se esistessero.</p> + +<p>{{JSFiddleEmbed("https://jsfiddle.net/78dg25ax/", "js,result", 200)}}</p> + +<p><a href="http://jsfiddle.net/xAFs9/3/" title="http://jsfiddle.net/xAFs9/">Esegui</a> il codice e verifica che funziona. Questo è un esempio di <em>lexical</em> <em>scoping</em>: in JavaScript, la visibilità (scope) di una variabile è definita dalla sua posizione all'interno del codice sorgente (si evince dal codice stesso [<em>lexically</em>]) e le funzioni innestate hanno accesso a variabili dichiarate nella funzione esterna (outer scope).</p> + +<h2 id="Closure">Closure</h2> + +<p>Considerate ora l'esempio seguente:</p> + +<pre class="brush: js notranslate">function makeFunc() { + var name = "Mozilla"; + function displayName() { + alert(name); + } + return displayName; +} + +var myFunc = makeFunc(); +myFunc(); +</pre> + +<p>L'esecuzione di questo codice ha esattamente lo stesso effetto dell'esempio precedente della funzione init(): la stringa "Mozilla" verrà visualizzata in una casella di avviso JavaScript. La cosa differente ed interessante, è che la funzione interna displayName() viene restituita dalla funzione esterna prima di essere eseguita.</p> + +<p>A un primo sguardo sembrerebbe controintuitivo che il codice funzioni ancora. In alcuni linguaggi di programmazione le variabili locali interne a una funzione esistono solo per la durata dell'esecuzione della funzione stessa. Una volta che <code>makeFunc()</code> ha terminato la propria esecuzione, ci si potrebbe aspettare che la variabile name non sia più accessibile. Tuttavia, poiché il codice funziona ancora, è ovvio che in JavaScript non è il caso.</p> + +<p>La ragione è che le funzioni in JavaScript formano closures. Una <em>closure </em>è la combinazione di una funzione e dell'ambito lessicale in cui questa funzione è stata dichiarata. In questo caso, <code>myFunc</code> è un riferimento all'istanza della funzione displayName creata quando <code>makeFunc</code> è eseguita.</p> + +<p>La soluzione di questo rompicampo è che <code>myFunc</code> è diventata una <em>closure</em>. Una closure è uno speciale tipo di oggetto che combina due cose: una funzione e l'ambito in cui questa è stata creata. L'ambito consiste in qualsiasi variabile locale che era nel suo scope nel momento in cui la closure è stata creata. In questo caso, <code>myFunc</code> è una <em>closure </em>che incorpora sia la funzione <code>displayName</code> che la stringa "Mozilla", già esistente quando la closure è stata creata.</p> + +<p>Ecco un esempio leggermente più interessante — una funzione <code>makeAdder</code>:</p> + +<pre class="brush: js notranslate">function makeAdder(x) { + return function(y) { + return x + y; + }; +} + +var add5 = makeAdder(5); +var add10 = makeAdder(10); + +console.log(add5(2)); // 7 +console.log(add10(2)); // 12 +</pre> + +<p>In questo esempio, abbiamo definito una funzione <code>makeAdder(x)</code> che prende un singolo argomento <code>x</code> e restituisce una nuova funzione. La funzione restituita prende un singolo argomento <code>y</code>, e restituisce la somma tra <code>x</code> e <code>y</code>.</p> + +<p>In sostanza, <code>makeAdder</code> è una <em>factory function </em>— crea funzioni che possono aggiungere uno specifico valore come argomento. Nell'esempio sopra usiamo la nostra factory function per creare due nuove funzioni — una che aggiunge 5 ai suoi argomenti, e una che aggiunge 10.</p> + +<p><code>add5</code> e <code>add10</code> sono entrambe <em>closures</em>. Condividono la stessa definizione del corpo della funzione, ma memorizzano diversi ambienti. Nell'ambiente di <code>add5</code>, <code>x</code> vale 5. Per quanto riguarda <code>add10</code> , <code>x</code> vale 10.</p> + +<h2 id="Practical_closures">Practical closures</h2> + +<p>That's the theory of closures — but are closures actually useful? Let's consider their practical implications. A closure lets you associate some data (the environment) with a function that operates on that data. This has obvious parallels to object oriented programming, where objects allow us to associate some data (the object's properties) with one or more methods.</p> + +<p>Consequently, you can use a closure anywhere that you might normally use an object with only a single method.</p> + +<p>Situations where you might want to do this are particularly common on the web. Much of the code we write in web JavaScript is event-based — we define some behavior, then attach it to an event that is triggered by the user (such as a click or a keypress). Our code is generally attached as a callback: a single function which is executed in response to the event.</p> + +<p>Here's a practical example: suppose we wish to add some buttons to a page that adjust the text size. One way of doing this is to specify the font-size of the body element in pixels, then set the size of the other elements on the page (such as headers) using the relative em unit:</p> + +<pre class="brush: css notranslate">body { + font-family: Helvetica, Arial, sans-serif; + font-size: 12px; +} + +h1 { + font-size: 1.5em; +} + +h2 { + font-size: 1.2em; +} +</pre> + +<p>Our interactive text size buttons can change the font-size property of the body element, and the adjustments will be picked up by other elements on the page thanks to the relative units.</p> + +<p>Qui c'è il codice JavaScript:</p> + +<pre class="brush: js notranslate">function makeSizer(size) { + return function() { + document.body.style.fontSize = size + 'px'; + }; +} + +var size12 = makeSizer(12); +var size14 = makeSizer(14); +var size16 = makeSizer(16); +</pre> + +<p><code>size12</code>, <code>size14</code>, and <code>size16</code> are now functions which will resize the body text to 12, 14, and 16 pixels, respectively. We can attach them to buttons (in this case links) as follows:</p> + +<pre class="brush: js notranslate">document.getElementById('size-12').onclick = size12; +document.getElementById('size-14').onclick = size14; +document.getElementById('size-16').onclick = size16; +</pre> + +<pre class="brush: html notranslate"><a href="#" id="size-12">12</a> +<a href="#" id="size-14">14</a> +<a href="#" id="size-16">16</a> +</pre> + +<p>{{JSFiddleEmbed("https://jsfiddle.net/vnkuZ/","","200")}}</p> + +<h2 id="Emulare_metodi_privati_con_chiusure">Emulare metodi privati con chiusure</h2> + +<p>Languages such as Java provide the ability to declare methods private, meaning that they can only be called by other methods in the same class.</p> + +<p>JavaScript does not provide a native way of doing this, but it is possible to emulate private methods using closures. Private methods aren't just useful for restricting access to code: they also provide a powerful way of managing your global namespace, keeping non-essential methods from cluttering up the public interface to your code.</p> + +<p>Here's how to define some public functions that can access private functions and variables, using closures which is also known as the <a class="external" href="http://www.google.com/search?q=javascript+module+pattern" title="http://www.google.com/search?q=javascript+module+pattern">module pattern</a>:</p> + +<pre class="brush: js notranslate">var counter = (function() { + var privateCounter = 0; + function changeBy(val) { + privateCounter += val; + } + return { + increment: function() { + changeBy(1); + }, + decrement: function() { + changeBy(-1); + }, + value: function() { + return privateCounter; + } + }; +})(); + +console.log(counter.value()); // logs 0 +counter.increment(); +counter.increment(); +console.log(counter.value()); // logs 2 +counter.decrement(); +console.log(counter.value()); // logs 1 +</pre> + +<p>There's a lot going on here. In previous examples each closure has had its own environment; here we create a single environment which is shared by three functions: <code>counter.increment</code>, <code>counter.decrement</code>, and <code>counter.value</code>.</p> + +<p>The shared environment is created in the body of an anonymous function, which is executed as soon as it has been defined. The environment contains two private items: a variable called <code>privateCounter</code> and a function called <code>changeBy</code>. Neither of these private items can be accessed directly from outside the anonymous function. Instead, they must be accessed by the three public functions that are returned from the anonymous wrapper.</p> + +<p>Those three public functions are closures that share the same environment. Thanks to JavaScript's lexical scoping, they each have access to the <code>privateCounter</code> variable and <code>changeBy</code> function.</p> + +<p>You'll notice we're defining an anonymous function that creates a counter, and then we call it immediately and assign the result to the <code>counter</code> variable. We could store this function in a separate variable <code>makeCounter</code> and use it to create several counters.</p> + +<pre class="brush: js notranslate">var makeCounter = function() { + var privateCounter = 0; + function changeBy(val) { + privateCounter += val; + } + return { + increment: function() { + changeBy(1); + }, + decrement: function() { + changeBy(-1); + }, + value: function() { + return privateCounter; + } + } +}; + +var counter1 = makeCounter(); +var counter2 = makeCounter(); +alert(counter1.value()); /* Alerts 0 */ +counter1.increment(); +counter1.increment(); +alert(counter1.value()); /* Alerts 2 */ +counter1.decrement(); +alert(counter1.value()); /* Alerts 1 */ +alert(counter2.value()); /* Alerts 0 */ +</pre> + +<p>Notice how each of the two counters maintains its independence from the other. Its environment during the call of the <code>makeCounter()</code> function is different each time. The closure variable <code>privateCounter </code>contains a different instance each time.</p> + +<p>Using closures in this way provides a number of benefits that are normally associated with object oriented programming, in particular data hiding and encapsulation.</p> + +<h2 id="Creating_closures_in_loops_A_common_mistake">Creating closures in loops: A common mistake</h2> + +<p>Prior to the introduction of the <a href="/en-US/docs/Web/JavaScript/Reference/Statements/let" title="let"><code>let</code> keyword</a> in ECMAScript 6, a common problem with closures occurred when they were created inside a loop. Consider the following example:</p> + +<pre class="brush: html notranslate"><p id="help">Helpful notes will appear here</p> +<p>E-mail: <input type="text" id="email" name="email"></p> +<p>Name: <input type="text" id="name" name="name"></p> +<p>Age: <input type="text" id="age" name="age"></p> +</pre> + +<pre class="brush: js notranslate">function showHelp(help) { + document.getElementById('help').innerHTML = help; +} + +function setupHelp() { + var helpText = [ + {'id': 'email', 'help': 'Your e-mail address'}, + {'id': 'name', 'help': 'Your full name'}, + {'id': 'age', 'help': 'Your age (you must be over 16)'} + ]; + + for (var i = 0; i < helpText.length; i++) { + var item = helpText[i]; + document.getElementById(item.id).onfocus = function() { + showHelp(item.help); + } + } +} + +setupHelp(); +</pre> + +<p>{{JSFiddleEmbed("https://jsfiddle.net/v7gjv/", "", 200)}}</p> + +<p>The <code>helpText</code> array defines three helpful hints, each associated with the ID of an input field in the document. The loop cycles through these definitions, hooking up an onfocus event to each one that shows the associated help method.</p> + +<p>If you try this code out, you'll see that it doesn't work as expected. No matter what field you focus on, the message about your age will be displayed.</p> + +<p>The reason for this is that the functions assigned to <code>onfocus</code> are closures; they consist of the function definition and the captured environment from the <code>setupHelp</code> function's scope. Three closures have been created, but each one shares the same single environment. By the time the <code>onfocus</code> callbacks are executed, the loop has run its course and the item variable (shared by all three closures) has been left pointing to the last entry in the <code>helpText</code> list.</p> + +<p>One solution in this case is to use more closures: in particular, to use a function factory as described earlier on:</p> + +<pre class="brush: js notranslate">function showHelp(help) { + document.getElementById('help').innerHTML = help; +} + +function makeHelpCallback(help) { + return function() { + showHelp(help); + }; +} + +function setupHelp() { + var helpText = [ + {'id': 'email', 'help': 'Your e-mail address'}, + {'id': 'name', 'help': 'Your full name'}, + {'id': 'age', 'help': 'Your age (you must be over 16)'} + ]; + + for (var i = 0; i < helpText.length; i++) { + var item = helpText[i]; + document.getElementById(item.id).onfocus = makeHelpCallback(item.help); + } +} + +setupHelp(); +</pre> + +<p>{{JSFiddleEmbed("https://jsfiddle.net/v7gjv/1/", "", 300)}}</p> + +<p>This works as expected. Rather than the callbacks all sharing a single environment, the <code>makeHelpCallback</code> function creates a new environment for each one in which <code>help</code> refers to the corresponding string from the <code>helpText</code> array.</p> + +<h2 id="Performance_considerations">Performance considerations</h2> + +<p>It is unwise to unnecessarily create functions within other functions if closures are not needed for a particular task, as it will negatively affect script performance both in terms of processing speed and memory consumption.</p> + +<p>For instance, when creating a new object/class, methods should normally be associated to the object's prototype rather than defined into the object constructor. The reason is that whenever the constructor is called, the methods would get reassigned (that is, for every object creation).</p> + +<p>Consider the following impractical but demonstrative case:</p> + +<pre class="brush: js notranslate">function MyObject(name, message) { + this.name = name.toString(); + this.message = message.toString(); + this.getName = function() { + return this.name; + }; + + this.getMessage = function() { + return this.message; + }; +} +</pre> + +<p>The previous code does not take advantage of the benefits of closures and thus could instead be formulated:</p> + +<pre class="brush: js notranslate">function MyObject(name, message) { + this.name = name.toString(); + this.message = message.toString(); +} +MyObject.prototype = { + getName: function() { + return this.name; + }, + getMessage: function() { + return this.message; + } +}; +</pre> + +<p>However, redefining the prototype is not recommended, so the following example is even better because it appends to the existing prototype:</p> + +<pre class="brush: js notranslate">function MyObject(name, message) { + this.name = name.toString(); + this.message = message.toString(); +} +MyObject.prototype.getName = function() { + return this.name; +}; +MyObject.prototype.getMessage = function() { + return this.message; +}; +</pre> + +<p>Il codice sopra può essere riscritto meglio in un modo più pulito, con lo stesso risultato:</p> + +<pre class="brush: js notranslate">function MyObject(name, message) { + this.name = name.toString(); + this.message = message.toString(); +} +(function() { + this.getName = function() { + return this.name; + }; + this.getMessage = function() { + return this.message; + }; +}).call(MyObject.prototype); +</pre> + +<p>In the two previous examples, the inherited prototype can be shared by all objects and the method definitions need not occur at every object creation. See <a href="/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model">Details of the Object Model</a> for more details.</p> diff --git a/files/it/web/javascript/cosè_javascript/index.html b/files/it/web/javascript/cosè_javascript/index.html new file mode 100644 index 0000000000..c850023b92 --- /dev/null +++ b/files/it/web/javascript/cosè_javascript/index.html @@ -0,0 +1,57 @@ +--- +title: Cos'è JavaScript +slug: Web/JavaScript/Cosè_JavaScript +translation_of: Web/JavaScript/About_JavaScript +--- +<div>{{JsSidebar}}</div> + +<h2 id="Cos'è_JavaScript">Cos'è JavaScript?</h2> + +<p><strong>JavaScript</strong><sup>®</sup> (spesso abbreviato con <strong>JS</strong>) è un linguaggio di programmazione, interpretato, orientato agli oggetti con <a href="https://en.wikipedia.org/wiki/First-class_functions" title="https://en.wikipedia.org/wiki/First-class_functions">first-class functions</a>, ed è meglio conosciuto come linguaggio di scripting client-side per pagine web, nonostante questo è anche utilizzato in molte applicazioni<a class="external" href="https://en.wikipedia.org/wiki/JavaScript#Uses_outside_web_pages">non solamente basate sul web</a>. Il linguaggio è <a class="mw-redirect" href="https://en.wikipedia.org/wiki/Prototype-based_programming" title="Prototype-based">prototype-based</a>, è dinamico, imperativo, e il offre uno stile di programmazione funzionale.</p> + +<p>JavaScript viene eseguito direttamente lato "client-side" della pagina web e può essere utilizzato per dare un design e stabilire il comportamento delle pagine web quando viene scatenato una particolare evento da parte dell'utente. JavaScript è semplice da apprendere e nello stesso tempo rappresenta un linguaggio che permette un controllo quasi totale sulla pagina web.</p> + +<p>Contrariamente alla concezione popolare, JavaScript non è "Java Interpretato". JavaScript è un linguaggio di scripting dinamico che supporta la costruzione degli oggetti basata su <a href="/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Class-Based_vs._Prototype-Based_Languages" title="en-US/docs/JavaScript/Guide/Details_of_the_Object_Model#Class-Based_vs._Prototype-Based_Languages">prototype</a>. La sintassi base è intenzionalmente basata su entrambi i maggiori e più conosciuti linguaggi, C++ e Java e questo ha permesso la riduzione di nuovi concetti per lo studio del linguaggio. Costrutti del linguaggio come if, cicli <code>for </code>e <code>while, </code><code>switch </code>e <code>blocchi</code> <code>try ... catch </code>hanno il medesimo significato in questi linguaggi.</p> + +<p>JavaScript permette di programmare sia in modo <a href="https://en.wikipedia.org/wiki/Procedural_programming">procedurale</a> sia in <a href="/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript">orientato agli oggetti</a>. Gli oggetti vengono creati a livello di programmazione in JavaScript, allegando metodi e proprietà agli oggetti altrimenti vuoti in fase di esecuzione, in contrasto con le definizioni di classe sintattiche comuni linguaggi compilati come C ++ e Java. Una volta che un oggetto è stato costruito può essere utilizzato come modello (o prototipo) per creare oggetti simili.</p> + +<p>JavaScript permette la costruzione a runtime di oggetti, elenchi di parametri, funzioni come variabili, pemette la creazione di script dinamici (tramite <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval">eval</a></code>), permette di esaminare a runtime tipo e proprietà di un oggetto (tramite <code>for ... in</code>), e il recupero del codice sorgente ( i programmi JavaScript possono decompilare parti di funzione e mostrarne il codice sorgente all'interno del codice sorgente stesso).</p> + +<p>Per una più esaustiva trattazione del linguaggio JavaScript consulta il seguente link <a href="#JavaScript_resources">JavaScript resources</a>.</p> + +<h2 id="Quali_implementazioni_del_linguaggio_JavaScript_sono_disponibili">Quali implementazioni del linguaggio JavaScript sono disponibili?</h2> + +<p>Il progetto Mozilla fornisce due implementazioni JavaScript. Il primo JavaScript è stato creato da Brendan Eich a Netscape, e da allora è stato aggiornato per conformarsi alle ECMA-262 Edition 5 e versioni successive. Questo motore, nome in codice <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey" title="en-US/docs/SpiderMonkey">SpiderMonkey</a>, è implementato in C / C ++. Il motore di <a href="/en-US/docs/Rhino" title="en-US/docs/Rhino">Rhino</a>, creati principalmente da Norris Boyd (anche lui a Netscape) è una implementazione JavaScript scritto in Java. Come SpiderMonkey, Rhino è ECMA-262 Edition 5 compatibile.</p> + +<p>Diverse ed importanti ottimizzazioni sono state aggiunte, come TraceMonkey (Firefox 3.5), JägerMonkey (Firefox 4) e IonMonkey al motore SpiderMonkey JavaScript nel corso del tempo. Il lavoro è sempre in corso per migliorare le prestazioni di esecuzione di JavaScript.</p> + +<p>Oltre alle implementazioni di cui sopra, ci sono molti altri popolari motori JavaScript, quali: -</p> + +<ul> + <li><a class="external" href="https://code.google.com/p/v8/" title="https://code.google.com/p/v8/">V8</a> di Google, che viene utilizzato nel browser Google Chrome e nelle versioni recenti del browser Opera. <a class="external" href="https://code.google.com/p/v8/" title="https://code.google.com/p/v8/">V8</a> è anche il motore utilizzato per <a href="http://nodejs.org">Node.js</a>.</li> + <li><a class="external" href="https://www.webkit.org/projects/javascript/index.html" title="https://www.webkit.org/projects/javascript/index.html">JavaScriptCore</a>(SquirrelFish / Nitro) utilizzato in alcuni browser WebKit, come Safari di Apple.</li> + <li><a class="external" href="http://my.opera.com/ODIN/blog/carakan-faq" title="http://my.opera.com/ODIN/blog/carakan-faq">Carakan</a> nelle vecchie versioni di Opera.</li> + <li><a class="external" href="http://en.wikipedia.org/wiki/Chakra_%28JScript_engine%29" title="http://en.wikipedia.org/wiki/Chakra_%28JScript_engine%29">Chakra</a> utilizzato in Internet Explorer (anche se il linguaggio che implementa è formalmente chiamato "JScript" al fine di evitare problemi legati al marchio).</li> +</ul> + +<p>Ognuno dei motori JavaScript di Mozilla espone una API pubblica per gli sviluppatori e questa viene utilizzata per integrare JavaScript nella loro software. Di gran lunga, l'ambiente host più comune per JavaScript e lo stesso browser web. I browser Web utilizzano in genere l'API pubblica di JavaScript per la gestione e la visualizzazione della struttura <a class="external" href="http://www.w3.org/DOM/">DOM</a> delle pagine web.</p> + +<p>Un'altra applicazione comune per cui possiamo utilizzare JavaScript è come linguaggio di scripting lato server. Un server web JavaScript esporrebbe oggetti che rappresentano una richiesta HTTP e oggetti di risposta, che possono successivamente essere manipolati da un programma JavaScript per generare dinamicamente pagine web. <a href="http://nodejs.org">Node.js</a> è un esempio popolare di questo.</p> + +<h2 id="Risorse_JavaScript">Risorse JavaScript</h2> + +<dl> + <dt><a href="/en-US/docs/Mozilla/Projects/SpiderMonkey" title="en-US/docs/SpiderMonkey">SpiderMonkey</a></dt> + <dd>Informazioni specifiche riguardanti l'implementazione del motore scritto in C / C ++ (aka SpiderMonkey), compreso il modo di incorporare nelle applicazioni.</dd> +</dl> + +<dl> + <dt><a href="/en-US/docs/Rhino" title="en-US/docs/Rhino">Rhino</a></dt> + <dd>Informazioni specifiche riguardanti l'implementazione del motore scritto in Java (aka Rhino).</dd> + <dt><a href="/it/docs/Web/JavaScript/Language_Resources">Risorse sul linguaggio</a></dt> + <dd>Informazioni sugli standard del linguaggio JavaScript.</dd> + <dt><a href="/it/docs/Web/JavaScript/Una_reintroduzione_al_JavaScript">Re-Introduzione a JavaScript</a></dt> + <dd><a href="/it/docs/Web/JavaScript/Guida" title="en-US/docs/JavaScript/Guide">Guida JavaScript</a> e <a href="/it/docs/Web/JavaScript/Reference" title="en-US/docs/JavaScript/Reference">JavaScript Reference</a>.</dd> +</dl> + +<p>JavaScript® è un marchio registrato di Oracle negli U.S. e in altri paesi.</p> diff --git a/files/it/web/javascript/data_structures/index.html b/files/it/web/javascript/data_structures/index.html new file mode 100644 index 0000000000..a056282b0d --- /dev/null +++ b/files/it/web/javascript/data_structures/index.html @@ -0,0 +1,444 @@ +--- +title: Tipi di dato e strutture in JavaScript +slug: Web/JavaScript/Data_structures +tags: + - Guide + - JavaScript + - Principianti + - tipi +translation_of: Web/JavaScript/Data_structures +--- +<div>{{jsSidebar("More")}}</div> + +<p>Tutti i linguaggi di programmazione utilizzano strutture di dati, ma queste possono spesso differire da un linguaggio all'altro. L'intento di questo articolo è elencare tutte le strutture di dati di JavaScript e le relative proprietà, che possono essere utilizzate anche per costruire nuove strutture di dati. Dove possible, compareremo le strutture di dati di JavaScript con quelle di altri linguaggi.</p> + +<h2 id="Tipi_dinamici">Tipi dinamici</h2> + +<p>JavaScript è un linguaggio di <em>tipo debole</em> o <em>dinamico</em>. Questo vuol dire che in JavaScript le variabili non sono direttamente associate a nessun particolare tipo e che una variabile può essere assegnata (e ri-assegnata) a qualsiasi tipo di valore:</p> + +<pre class="brush: js">let foo = 42; // foo è ora Number +foo = 'bar'; // foo è ora String +foo = true; // foo è ora Boolean +</pre> + +<h2 id="Tipi_di_dati">Tipi di dati</h2> + +<p>L'ultima definizione dello standard ECMAScript comprende nove tipi:</p> + +<ul> + <li>Sei tipi di dati sono <a href="/it/docs/Glossary/Primitive">primitivi</a>: + + <ul> + <li><a href="/it/docs/Glossary/undefined">undefined</a> : <code>typeof instance === "undefined"</code></li> + <li><a href="/en-US/docs/Glossary/Boolean">Boolean</a> : <code>typeof instance === "boolean"</code></li> + <li><a href="/en-US/docs/Glossary/Number">Number</a> : <code>typeof instance === "number"</code></li> + <li><a href="/en-US/docs/Glossary/String">String</a> : <code>typeof instance === "string"</code></li> + <li><a href="/en-US/docs/Glossary/BigInt">BigInt</a><span> : </span><code>typeof instance === "bigint"</code></li> + <li><a href="/en-US/docs/Glossary/Symbol">Symbol</a><span> : </span><code>typeof instance === "symbol"</code></li> + </ul> + </li> + <li><a href="/en-US/docs/Glossary/Null">null</a><span> : </span><code>typeof instance === "object"</code>. È uno speciale tipo <a href="https://wiki.developer.mozilla.org/it/docs/Glossary/Primitive">primitivo</a> che ha un uso aggiuntivo per il suo valore: se l'oggetto non è ereditato, viene mostrato <code>null</code>;</li> + <li><a href="/en-US/docs/Glossary/Object">Object</a><span> : </span><code>typeof instance === "object"</code>. Non è un tipo di dato ma bensì un tipo strutturale per ogni istanza di oggetto <a href="https://wiki.developer.mozilla.org/it/docs/Learn/JavaScript/Oggetti">costruito</a> utilizzata anche come struttura di dati: new <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>, new <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a>, new <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map">Map</a>, new <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set">Set</a>, new <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakMap">WeakMap</a>, new <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakSet">WeakSet</a>, new <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date">Date</a> e praticamente tutto creato con la <a href="https://wiki.developer.mozilla.org/it/docs/Web/JavaScript/Reference/Operators/new">parola chiave new</a>;</li> + <li><a href="/en-US/docs/Glossary/Function">Function</a><span> non data structure, though it also answers for typeof operator: </span><code>typeof instance === "function"</code>. This answer is done as a special shorthand for Functions, though every Function constructor is derived from Object constructor.</li> +</ul> + +<p>Keep in mind the only valuable purpose of <code>typeof</code> operator usage is checking the Data Type. If we wish to check any Structural Type derived from Object it is pointless to use <code>typeof</code> for that, as we will always receive <code>"object"</code>. The indeed proper way to check what sort of Object we are using an <a href="/en-US/docs/Web/JavaScript/Reference/Operators/instanceof">instanceof</a> keyword. But even in that case there might be misconceptions.</p> + +<h2 id="Valori_primitivi">Valori primitivi</h2> + +<p>All types except objects define immutable values (that is, values which can't be changed). For example (and unlike in C), Strings are immutable. We refer to values of these types as "<em>primitive values</em>".</p> + +<h3 id="Tipo_Boolean">Tipo Boolean</h3> + +<p>Boolean represents a logical entity and can have two values: <code>true</code> and <code>false</code>. See <a href="/en-US/docs/Glossary/Boolean">Boolean</a> and {{jsxref("Boolean")}} for more details.</p> + +<h3 id="Tipo_Null">Tipo Null</h3> + +<p>The Null type has exactly one value: <code>null</code>. See {{jsxref("null")}} and <a href="/en-US/docs/Glossary/Null">Null</a> for more details.</p> + +<h3 id="Tipo_Undefined">Tipo Undefined</h3> + +<p>A variable that has not been assigned a value has the value <code>undefined</code>. See {{jsxref("undefined")}} and <a href="/en-US/docs/Glossary/Undefined">Undefined</a> for more details.</p> + +<h3 id="Tipo_Number">Tipo Number</h3> + +<p>ECMAScript has two built-in numeric types: <strong>Number</strong> and <strong>BigInt</strong> (see below).</p> + +<p>The Number type is a <a href="http://en.wikipedia.org/wiki/Double_precision_floating-point_format">double-precision 64-bit binary format IEEE 754 value</a> (numbers between -(2<sup>53</sup> − 1) and 2<sup>53</sup> − 1). In addition to representing floating-point numbers, the number type has three symbolic values: <code>+Infinity</code>, <code>-Infinity</code>, and {{jsxref("NaN")}} ("<strong>N</strong>ot a <strong>N</strong>umber").</p> + +<p>To check for the largest available value or smallest available value within {{jsxref("Infinity", "±Infinity")}}, you can use the constants {{jsxref("Number.MAX_VALUE")}} or {{jsxref("Number.MIN_VALUE")}}.</p> + +<p>Starting with ECMAScript 2015, you are also able to check if a number is in the double-precision floating-point number range using {{jsxref("Number.isSafeInteger()")}} as well as {{jsxref("Number.MAX_SAFE_INTEGER")}} and {{jsxref("Number.MIN_SAFE_INTEGER")}}. Beyond this range, integers in JavaScript are not safe anymore and will be a double-precision floating point approximation of the value.</p> + +<p>The number type has only one integer with two representations: <code>0</code> is represented as both <code>-0</code> and <code>+0</code>. (<code>0</code> is an alias for <code>+0</code>.) </p> + +<p>In the praxis, this has almost no impact. For example, <code>+0 === -0</code> is <code>true</code>. However, you are able to notice this when you divide by zero:</p> + +<pre class="brush: js">> 42 / +0 +Infinity +> 42 / -0 +-Infinity +</pre> + +<p>Although a number often represents only its value, JavaScript provides {{jsxref("Operators/Bitwise_Operators", "binary (bitwise) operators")}}.</p> + +<p>These bitwise operators can be used to represent several Boolean values within a single number using <a class="external" href="http://en.wikipedia.org/wiki/Mask_%28computing%29">bit masking</a>. However, this is usually considered a bad practice, since JavaScript offers other means to represent a set of Booleans (like an array of Booleans, or an object with Boolean values assigned to named properties). Bit masking also tends to make the code more difficult to read, understand, and maintain.</p> + +<p>It may be necessary to use such techniques in very constrained environments, like when trying to cope with the limitations of local storage, or in extreme cases (such as when each bit over the network counts). This technique should only be considered when it is the last measure that can be taken to optimize size.</p> + +<h3 id="BigInt_type">BigInt type</h3> + +<p>The {{jsxref("BigInt")}} type is a numeric primitive in JavaScript that can represent integers with arbitrary precision. With <code>BigInt</code>s, you can safely store and operate on large integers even beyond the safe integer limit for <code>Number</code>s.</p> + +<p>A <code>BigInt</code> is created by appending <code>n</code> to the end of an integer or by calling the constructor.</p> + +<p>You can obtain the safest value that can be incremented with <code>Number</code>s by using the constant {{jsxref("Number.MAX_SAFE_INTEGER")}}. With the introduction of <code>BigInt</code>s, you can operate with numbers beyond the {{jsxref("Number.MAX_SAFE_INTEGER")}}.</p> + +<p>This example demonstrates, where incrementing the {{jsxref("Number.MAX_SAFE_INTEGER")}} returns the expected result:</p> + +<pre class="brush: js">> const x = 2n ** 53n; +9007199254740992n +> const y = x + 1n; +9007199254740993n +</pre> + +<p>You can use the operators <code>+</code>, <code>*</code>, <code>-</code>, <code>**</code>, and <code>%</code> with <code>BigInt</code>s—just like with <code>Number</code>s. A <code>BigInt</code> is not strictly equal to a <code>Number</code>, but it is loosely so.</p> + +<p>A <code>BigInt</code> behaves like a <code>Number</code> in cases where it is converted to <code>Boolean</code>: <code>if</code>, <code>||</code>, <code>&&</code>, <code>Boolean</code>, <code>!</code>.</p> + +<p><code>BigInt</code>s cannot be operated on interchangeably with <code>Number</code>s. Instead a {{jsxref("TypeError")}} will be thrown.</p> + +<h3 id="String_type">String type</h3> + +<p>JavaScript's {{jsxref("String")}} type is used to represent textual data. It is a set of "elements" of 16-bit unsigned integer values. Each element in the String occupies a position in the String. The first element is at index <code>0</code>, the next at index <code>1</code>, and so on. The length of a String is the number of elements in it.</p> + +<p>Unlike some programming languages (such as C), JavaScript strings are immutable. This means that once a string is created, it is not possible to modify it.</p> + +<p>However, it is still possible to create another string based on an operation on the original string. For example:</p> + +<ul> + <li>A substring of the original by picking individual letters or using {{jsxref("String.substr()")}}.</li> + <li>A concatenation of two strings using the concatenation operator (<code>+</code>) or {{jsxref("String.concat()")}}.</li> +</ul> + +<h4 id="Beware_of_stringly-typing_your_code!">Beware of "stringly-typing" your code!</h4> + +<p>It can be tempting to use strings to represent complex data. Doing this comes with short-term benefits:</p> + +<ul> + <li>It is easy to build complex strings with concatenation.</li> + <li>Strings are easy to debug (what you see printed is always what is in the string).</li> + <li>Strings are the common denominator of a lot of APIs (<a href="/en-US/docs/Web/API/HTMLInputElement" title="HTMLInputElement">input fields</a>, <a href="/en-US/docs/Storage" title="Storage">local storage</a> values, <a href="/en-US/docs/Web/API/XMLHttpRequest" title="Use XMLHttpRequest (XHR) objects to interact with servers. You can retrieve data from a URL without having to do a full page refresh. This enables a Web page to update just part of a page without disrupting what the user is doing."><code>XMLHttpRequest</code></a> responses when using <code>responseText</code>, etc.) and it can be tempting to only work with strings.</li> +</ul> + +<p>With conventions, it is possible to represent any data structure in a string. This does not make it a good idea. For instance, with a separator, one could emulate a list (while a JavaScript array would be more suitable). Unfortunately, when the separator is used in one of the "list" elements, then, the list is broken. An escape character can be chosen, etc. All of this requires conventions and creates an unnecessary maintenance burden.</p> + +<p>Use strings for textual data. When representing complex data, parse strings and use the appropriate abstraction.</p> + +<h3 id="Symbol_type">Symbol type</h3> + +<p>Symbols are new to JavaScript in ECMAScript 2015. A Symbol is a <strong>unique</strong> and <strong>immutable</strong> primitive value and may be used as the key of an Object property (see below). In some programming languages, Symbols are called "atoms".</p> + +<p>For more details see <a href="/en-US/docs/Glossary/Symbol">Symbol</a> and the {{jsxref("Symbol")}} object wrapper in JavaScript.</p> + +<h2 id="Oggetti">Oggetti</h2> + +<p>In computer science, an object is a value in memory which is possibly referenced by an <a href="/en-US/docs/Glossary/Identifier">identifier</a>.</p> + +<h3 id="Proprietà">Proprietà</h3> + +<p>In JavaScript, objects can be seen as a collection of properties. With the <a href="/en-US/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Object_literals">object literal syntax</a>, a limited set of properties are initialized; then properties can be added and removed. Property values can be values of any type, including other objects, which enables building complex data structures. Properties are identified using <em>key</em> values. A <em>key</em> value is either a String or a Symbol value.</p> + +<p>There are two types of object properties which have certain attributes: The <em>data</em> property and the <em>accessor</em> property.</p> + +<h4 id="Data_property">Data property</h4> + +<p>Associates a key with a value, and has the following attributes:</p> + +<table class="standard-table"> + <caption>Attributes of a data property</caption> + <thead> + <tr> + <th scope="col">Attributo</th> + <th scope="col">Tipo</th> + <th scope="col">Descrizione</th> + <th scope="col">Valore di default</th> + </tr> + </thead> + <tbody> + <tr> + <td>[[Value]]</td> + <td>Any JavaScript type</td> + <td>The value retrieved by a get access of the property.</td> + <td><code>undefined</code></td> + </tr> + <tr> + <td>[[Writable]]</td> + <td>Boolean</td> + <td>If <code>false</code>, the property's [[Value]] cannot be changed.</td> + <td><code>false</code></td> + </tr> + <tr> + <td>[[Enumerable]]</td> + <td>Boolean</td> + <td> + <p>If <code>true</code>, the property will be enumerated in <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a> loops.<br> + See also <a href="/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">Enumerability and ownership of properties</a>.</p> + </td> + <td><code>false</code></td> + </tr> + <tr> + <td>[[Configurable]]</td> + <td>Boolean</td> + <td>If <code>false</code>, the property cannot be deleted, cannot be changed to an accessor property, and attributes other than [[Value]] and [[Writable]] cannot be changed.</td> + <td><code>false</code></td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <caption>Obsolete attributes (as of ECMAScript 3, renamed in ECMAScript 5)</caption> + <thead> + <tr> + <th scope="col">Attributo</th> + <th scope="col">Tipo</th> + <th scope="col">Descrizione</th> + </tr> + </thead> + <tbody> + <tr> + <td>Read-only</td> + <td>Boolean</td> + <td>Reversed state of the ES5 [[Writable]] attribute.</td> + </tr> + <tr> + <td>DontEnum</td> + <td>Boolean</td> + <td>Reversed state of the ES5 [[Enumerable]] attribute.</td> + </tr> + <tr> + <td>DontDelete</td> + <td>Boolean</td> + <td>Reversed state of the ES5 [[Configurable]] attribute.</td> + </tr> + </tbody> +</table> + +<h4 id="Accessor_property">Accessor property</h4> + +<p>Associates a key with one of two accessor functions (<code>get</code> and <code>set</code>) to retrieve or store a value, and has the following attributes:</p> + +<table class="standard-table"> + <caption>Attributes of an accessor property</caption> + <thead> + <tr> + <th scope="col">Attribute</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + <th scope="col">Default value</th> + </tr> + </thead> + <tbody> + <tr> + <td>[[Get]]</td> + <td>Function object or <code>undefined</code></td> + <td>The function is called with an empty argument list and retrieves the property value whenever a get access to the value is performed.<br> + See also <a href="/en-US/docs/Web/JavaScript/Reference/Operators/get"><code>get</code></a>.</td> + <td><code>undefined</code></td> + </tr> + <tr> + <td>[[Set]]</td> + <td>Function object or <code>undefined</code></td> + <td>The function is called with an argument that contains the assigned value and is executed whenever a specified property is attempted to be changed.<br> + See also <a href="/en-US/docs/Web/JavaScript/Reference/Operators/set"><code>set</code></a>.</td> + <td><code>undefined</code></td> + </tr> + <tr> + <td>[[Enumerable]]</td> + <td>Boolean</td> + <td>If <code>true</code>, the property will be enumerated in <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a> loops.</td> + <td><code>false</code></td> + </tr> + <tr> + <td>[[Configurable]]</td> + <td>Boolean</td> + <td>If <code>false</code>, the property can't be deleted and can't be changed to a data property.</td> + <td><code>false</code></td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>Note: </strong>Attribute is usually used by JavaScript engine, so you can't directly access it (see more about {{jsxref("Object.defineProperty()")}}). That's why the attribute is put in double square brackets instead of single.</p> +</div> + +<h3 id="Normal_objects_and_functions">"Normal" objects, and functions</h3> + +<p>A JavaScript object is a mapping between <em>keys</em> and <em>values</em>. Keys are strings (or {{jsxref("Symbol")}}s), and <em>values</em> can be anything. This makes objects a natural fit for <a class="external" href="http://en.wikipedia.org/wiki/Hash_table">hashmaps</a>.</p> + +<p>Functions are regular objects with the additional capability of being <em>callable</em>.</p> + +<h3 id="Dates">Dates</h3> + +<p>When representing dates, the best choice is to use the built-in <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date"><code>Date</code> utility</a> in JavaScript.</p> + +<h3 id="Indexed_collections_Arrays_and_typed_Arrays">Indexed collections: Arrays and typed Arrays</h3> + +<p><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array" title="Array">Arrays</a> are regular objects for which there is a particular relationship between integer-key-ed properties and the <code>length</code> property.</p> + +<p>Additionally, arrays inherit from <code>Array.prototype</code>, which provides to them a handful of convenient methods to manipulate arrays. For example, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf" title="en/JavaScript/Reference/Global_Objects/Array/indexOf">indexOf</a></code> (searching a value in the array) or <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/push" title="en/JavaScript/Reference/Global_Objects/Array/push">push</a></code> (adding an element to the array), and so on. This makes Arrays a perfect candidate to represent lists or sets.</p> + +<p><a href="/en-US/docs/Web/JavaScript/Typed_arrays">Typed Arrays</a> are new to JavaScript with ECMAScript 2015, and present an array-like view of an underlying binary data buffer. The following table helps determine the equivalent C data types:</p> + +<table class="standard-table"> + <thead> + <tr> + <th class="header" scope="col">Type</th> + <th class="header" scope="col">Value Range</th> + <th class="header" scope="col">Size in bytes</th> + <th class="header" scope="col">Description</th> + <th class="header" scope="col">Web IDL type</th> + <th class="header" scope="col">Equivalent C type</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{jsxref("Int8Array")}}</td> + <td><code>-128</code> to <code>127</code></td> + <td>1</td> + <td>8-bit two's complement signed integer</td> + <td><code>byte</code></td> + <td><code>int8_t</code></td> + </tr> + <tr> + <td>{{jsxref("Uint8Array")}}</td> + <td><code>0</code> to <code>255</code></td> + <td>1</td> + <td>8-bit unsigned integer</td> + <td><code>octet</code></td> + <td><code>uint8_t</code></td> + </tr> + <tr> + <td>{{jsxref("Uint8ClampedArray")}}</td> + <td><code>0</code> to <code>255</code></td> + <td>1</td> + <td>8-bit unsigned integer (clamped)</td> + <td><code>octet</code></td> + <td><code>uint8_t</code></td> + </tr> + <tr> + <td>{{jsxref("Int16Array")}}</td> + <td><code>-32768</code> to <code>32767</code></td> + <td>2</td> + <td>16-bit two's complement signed integer</td> + <td><code>short</code></td> + <td><code>int16_t</code></td> + </tr> + <tr> + <td>{{jsxref("Uint16Array")}}</td> + <td><code>0</code> to <code>65535</code></td> + <td>2</td> + <td>16-bit unsigned integer</td> + <td><code>unsigned short</code></td> + <td><code>uint16_t</code></td> + </tr> + <tr> + <td>{{jsxref("Int32Array")}}</td> + <td><code>-2147483648</code> to <code>2147483647</code></td> + <td>4</td> + <td>32-bit two's complement signed integer</td> + <td><code>long</code></td> + <td><code>int32_t</code></td> + </tr> + <tr> + <td>{{jsxref("Uint32Array")}}</td> + <td><code>0</code> to <code>4294967295</code></td> + <td>4</td> + <td>32-bit unsigned integer</td> + <td><code>unsigned long</code></td> + <td><code>uint32_t</code></td> + </tr> + <tr> + <td>{{jsxref("Float32Array")}}</td> + <td><code>1.2</code><span>×</span><code>10<sup>-38</sup></code> to <code>3.4</code><span>×</span><code>10<sup>38</sup></code></td> + <td>4</td> + <td>32-bit IEEE floating point number (7 significant digits e.g., <code>1.1234567</code>)</td> + <td><code>unrestricted float</code></td> + <td><code>float</code></td> + </tr> + <tr> + <td>{{jsxref("Float64Array")}}</td> + <td><code>5.0</code><span>×</span><code>10<sup>-324</sup></code> to <code>1.8</code><span>×</span><code>10<sup>308</sup></code></td> + <td>8</td> + <td>64-bit IEEE floating point number (16 significant digits e.g., <code>1.123...15</code>)</td> + <td><code>unrestricted double</code></td> + <td><code>double</code></td> + </tr> + <tr> + <td>{{jsxref("BigInt64Array")}}</td> + <td><code>-2<sup>63</sup></code> to <code>2<sup>63</sup>-1</code></td> + <td>8</td> + <td>64-bit two's complement signed integer</td> + <td><code>bigint</code></td> + <td><code>int64_t (signed long long)</code></td> + </tr> + <tr> + <td>{{jsxref("BigUint64Array")}}</td> + <td><code>0</code> to <code>2<sup>64</sup>-1</code></td> + <td>8</td> + <td>64-bit unsigned integer</td> + <td><code>bigint</code></td> + <td><code>uint64_t (unsigned long long)</code></td> + </tr> + </tbody> +</table> + +<h3 id="Keyed_collections_Maps_Sets_WeakMaps_WeakSets">Keyed collections: Maps, Sets, WeakMaps, WeakSets</h3> + +<p>These data structures, introduced in ECMAScript Edition 6, take object references as keys. {{jsxref("Set")}} and {{jsxref("WeakSet")}} represent a set of objects, while {{jsxref("Map")}} and {{jsxref("WeakMap")}} associate a value to an object.</p> + +<p>The difference between <code>Map</code>s and <code>WeakMap</code>s is that in the former, object keys can be enumerated over. This allows garbage collection optimizations in the latter case.</p> + +<p>One could implement <code>Map</code>s and <code>Set</code>s in pure ECMAScript 5. However, since objects cannot be compared (in the sense of <code><</code> "less than", for instance), look-up performance would necessarily be linear. Native implementations of them (including <code>WeakMap</code>s) can have look-up performance that is approximately logarithmic to constant time.</p> + +<p>Usually, to bind data to a DOM node, one could set properties directly on the object, or use <code>data-*</code> attributes. This has the downside that the data is available to any script running in the same context. <code>Map</code>s and <code>WeakMap</code>s make it easy to <em>privately</em> bind data to an object.</p> + +<h3 id="Structured_data_JSON">Structured data: JSON</h3> + +<p>JSON (<strong>J</strong>ava<strong>S</strong>cript <strong>O</strong>bject <strong>N</strong>otation) is a lightweight data-interchange format, derived from JavaScript, but used by many programming languages. JSON builds universal data structures.</p> + +<p>See <a href="/en-US/docs/Glossary/JSON">JSON</a> and {{jsxref("JSON")}} for more details.</p> + +<h3 id="More_objects_in_the_standard_library">More objects in the standard library</h3> + +<p>JavaScript has a standard library of built-in objects.</p> + +<p>Please have a look at the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects">reference</a> to find out about more objects.</p> + +<h2 id="Determinare_il_tipo_utilizzando_loperatore_typeof">Determinare il tipo utilizzando l'operatore <code>typeof</code></h2> + +<p>L'operatore <code>typeof</code> può aiutarti a trovare il tipo di dato assegnato alla tua variabile.</p> + +<p><span class="tlid-translation translation" lang="it"><span title="">Si prega di leggere la <a href="/en-US/docs/Web/JavaScript/Reference/Operators/typeof">pagina di riferimento</a> per maggiori dettagli e casi limite.</span></span></p> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-ecmascript-data-types-and-values', 'ECMAScript Data Types and Values')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li><a class="link-https" href="https://github.com/nzakas/computer-science-in-javascript/">Nicholas Zakas collection of common data structure and common algorithms in JavaScript.</a></li> + <li><a href="https://github.com/monmohan/DataStructures_In_Javascript" title="https://github.com/monmohan/DataStructures_In_Javascript">Search Tre(i)es implemented in JavaScript</a></li> +</ul> diff --git a/files/it/web/javascript/ecmascript_6_support_in_mozilla/index.html b/files/it/web/javascript/ecmascript_6_support_in_mozilla/index.html new file mode 100644 index 0000000000..f631744c80 --- /dev/null +++ b/files/it/web/javascript/ecmascript_6_support_in_mozilla/index.html @@ -0,0 +1,153 @@ +--- +title: ECMAScript 6 support in Mozilla +slug: Web/JavaScript/ECMAScript_6_support_in_Mozilla +translation_of: Archive/Web/JavaScript/New_in_JavaScript/ECMAScript_2015_support_in_Mozilla +--- +<p>{{jsSidebar("New_in_JS")}}ECMAScript 2015 è la prossima versione standard, nome in codice "Harmony", "ES.next" o "ECMAScript 6". <a href="http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts">Specification drafts possono essere trovate sulla wiki ufficiale</a>. Se si volesse lasciare un feedback sullo standard, si prega di farlo su <a href="https://mail.mozilla.org/listinfo/es-discuss">es-discuss</a>.</p> + +<h2 id="Caratteristiche_attualmente_supportate_in_Firefox">Caratteristiche attualmente supportate in Firefox</h2> + +<h3 id="Sintassi">Sintassi</h3> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Caratteristica</th> + <th scope="col">Versione</th> + <th scope="col">Commenti</th> + </tr> + </thead> + <tbody> + <tr> + <td><code><a href="/en/JavaScript/Reference/Statements/const" title="const">const</a></code></td> + <td>?</td> + <td><em>not compliant with the current specification</em><em>: const bindings behave like var instead of let</em></td> + </tr> + <tr> + <td><code><a href="/en/JavaScript/Reference/Statements/let" title="let">let</a></code></td> + <td>?</td> + <td><em>not compliant with the current specification</em></td> + </tr> + <tr> + <td><a href="/en/JavaScript/New_in_JavaScript/1.7#Destructuring_assignment_%28Merge_into_own_page.2Fsection%29" title="https://developer.mozilla.org/en/New_in_JavaScript_1.7#Destructuring_assignment_%28Merge_into_own_page.2Fsection%29">Destructuring assignment</a></td> + <td>JS 1.7</td> + <td><em>not compliant with the current specification</em></td> + </tr> + <tr> + <td><code><a href="/en/JavaScript/Reference/Statements/for...of" title="for...of">for...of</a></code> statement</td> + <td>{{fx_minversion_inline("13")}}</td> + <td> </td> + </tr> + <tr> + <td><a href="/en/JavaScript/Guide/Iterators_and_Generators" title="Iterators and generators">Iterators e generator</a>i</td> + <td>?</td> + <td><em>not compliant with the current specification)</em></td> + </tr> + <tr> + <td><a href="/en/JavaScript/Reference/rest_parameters" title="rest parameters">Rest parameters</a></td> + <td>{{fx_minversion_inline("15")}}</td> + <td> </td> + </tr> + <tr> + <td>Parametri predefiniti</td> + <td>{{fx_minversion_inline("15")}}</td> + <td> </td> + </tr> + <tr> + <td><a href="/en-US/docs/Syntax/Spread_operator" title="/en-US/docs/Syntax/Spread_operator"><span class="external">Spread operator</span></a> of Array</td> + <td>{{fx_minversion_inline("16")}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h3 id="Libreria_Standard">Libreria Standard</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Caratteristica</th> + <th scope="col">Versione</th> + <th scope="col">Commenti</th> + </tr> + <tr> + <td><code><a href="/en/JavaScript/Reference/Global_Objects/Map" title="en/JavaScript/Reference/Global_Objects/Map">Map</a></code></td> + <td>{{fx_minversion_inline("13")}}<br> + Iterable since {{fx_minversion_inline("17")}}</td> + <td>A new type of collections</td> + </tr> + <tr> + <td><code><a href="/en/JavaScript/Reference/Global_Objects/Set" title="en/JavaScript/Reference/Global_Objects/Set">Set</a></code></td> + <td>{{fx_minversion_inline("13")}}<br> + Iterable since {{fx_minversion_inline("17")}}</td> + <td>A new type of collections</td> + </tr> + <tr> + <td><code><a href="/en/JavaScript/Reference/Global_Objects/WeakMap" title="WeakMap">WeakMap</a></code></td> + <td>{{fx_minversion_inline("6")}}<br> + <code>clear()</code> in {{fx_minversion_inline("20")}}</td> + <td>A new type of collections</td> + </tr> + <tr> + <td><code><a href="/en/JavaScript/Reference/Global_Objects/Proxy" title="Proxy">Proxy</a></code></td> + <td>{{fx_minversion_inline("18")}}</td> + <td> </td> + </tr> + <tr> + <td><a href="/en/JavaScript/Reference/Global_Objects/RegExp" title="RegExp"><span class="external text"><code>RegExp</code> sticky (<code>y</code>) flag</span></a></td> + <td>?</td> + <td> </td> + </tr> + <tr> + <td><code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Number/isNaN" title="/en-US/docs/JavaScript/Reference/Global_Objects/Number/isNaN">Number.isNaN()</a></code></td> + <td>{{fx_minversion_inline("16")}}</td> + <td> </td> + </tr> + <tr> + <td><code>Number.isFinite()</code></td> + <td>{{fx_minversion_inline("16")}}</td> + <td> </td> + </tr> + <tr> + <td><code>Number.toInteger()</code></td> + <td>{{fx_minversion_inline("16")}}</td> + <td> </td> + </tr> + <tr> + <td><code>Number.isInteger()</code></td> + <td>{{fx_minversion_inline("16")}}</td> + <td> </td> + </tr> + <tr> + <td><code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/startsWith" title="/en-US/docs/JavaScript/Reference/Global_Objects/String/startsWith">String.startsWith()</a></code></td> + <td>{{fx_minversion_inline("17")}}</td> + <td> </td> + </tr> + <tr> + <td><code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/endsWith" title="/en-US/docs/JavaScript/Reference/Global_Objects/String/endsWith">String.endsWith()</a></code></td> + <td>{{fx_minversion_inline("17")}}</td> + <td> </td> + </tr> + <tr> + <td><code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/contains" title="/en-US/docs/JavaScript/Reference/Global_Objects/String/contains">String.contains()</a></code></td> + <td>{{fx_minversion_inline("17")}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Caratteristiche_non_ancora_supportate">Caratteristiche non ancora supportate</h2> + +<ul> + <li>Operatore <code>is</code> e <span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">isnt</span></li> + <li>Nuove funzioni <code>Math</code> (<code>log10</code>, <code>log2</code>, <code>log1p</code>, <code>expm1</code>, <code>cosh</code>, <code>sinh</code>, <code>tanh</code>, <code>acosh</code>, <code>asinh</code>, <code>atanh</code>, <code>hypot</code>, <code>trunc</code>, <code>sign</code>)</li> + <li>Moduli</li> +</ul> + +<h2 id="Guarda_anche">Guarda anche</h2> + +<ul> + <li><a class="external" href="http://www.ecmascript.org/" title="http://www.ecmascript.org/">Sito ECMAScript</a></li> + <li><a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts" title="http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts">ECMAScript 6 specification drafts</a></li> + <li><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=694100" title="https://bugzilla.mozilla.org/show_bug.cgi?id=694100">Mozilla Harmony tracking bug</a></li> +</ul> diff --git a/files/it/web/javascript/eventloop/index.html b/files/it/web/javascript/eventloop/index.html new file mode 100644 index 0000000000..2d68168864 --- /dev/null +++ b/files/it/web/javascript/eventloop/index.html @@ -0,0 +1,106 @@ +--- +title: Modello di parallelismo ed Event Loop +slug: Web/JavaScript/EventLoop +translation_of: Web/JavaScript/EventLoop +--- +<div>{{JsSidebar("Advanced")}}</div> + +<div>Javascript ha un modello di parallelismo basato su un "event loop". Questo modello è abbastanza differente dai modelli degli altri linguaggi quali, per esempio, C e Java.</div> + +<div></div> + +<h2 id="Runtime">Runtime</h2> + +<p>Questa sezione descrive un modello teorico. I moderni engine JavaScript implementano ed ottimizzano pesantemente la semantica descritta.</p> + +<h3 id="Rappresentazione_grafica">Rappresentazione grafica</h3> + +<p style="text-align: center;"><img alt="Stack, heap, queue" src="/files/4617/default.svg" style="height: 270px; width: 294px;"></p> + +<h3 id="Stack">Stack</h3> + +<p>Chiamate di funzioni da uno stack di <em>frames</em>.</p> + +<pre class="brush: js">function f(b){ + var a = 12; + return a+b+35; +} + +function g(x){ + var m = 4; + return f(m*x); +} + +g(21); +</pre> + +<p>Quando viene invocata <code>g</code>, viene creato un primo frame contenente gli argomenti di <code>g </code>e le variabili locali. Quando <code>g </code>invoca <code>f, </code>viene creato un secondo frame con un'operazione di push sopra il primo, contenente gli argomenti di <code>f</code> e le variabili locali. Quando <code>f </code>esce con il return, viene effettuata un'operazione di pop sullo stack (nel quale rimane quindi solo <code>g</code>). Quando anche <code>g</code> effettua il return, lo stack rimane vuoto.</p> + +<h3 id="Heap">Heap</h3> + +<p>L'heap indica una grande regione di memoria perlopiù non strutturata.</p> + +<h3 id="Queue">Queue</h3> + +<p>Un runtime JavaScript contiene una coda(queue) di messaggi, ossia una lista di messaggi da essere processati. Ad ogni messaggio è associata una funzione. Quando lo stack è vuoto, viene estratto un messaggio dalla coda e processato, ossia viene chiamata la funzione associata (e, pertanto, viene creato un frame nello stack). L'elaborazione dei messaggi finisce quando lo stack ritorna ad essere vuoto.</p> + +<h2 id="Event_loop">Event loop</h2> + +<p>L'event loop prende il suo nome dalla modalità con cui viene normalmente implementato, ossia tipicamente: </p> + +<pre class="brush: js">while(queue.waitForMessage()){ + queue.processNextMessage(); +}</pre> + +<p><code>queue.waitForMessage</code> attende che arrivi un messaggio quando non c'e' ne sono.</p> + +<h3 id="Run-to-completion">"Run-to-completion"</h3> + +<p>Ogni messaggio viene completamente elaborato prima di passare ad un altro. Questa dinamica offre alcune comode proprietà quando si ragiona sul proprio programma, incluso il fatto che, fino a che una funzione è in esecuzione, non c'è modo di bloccarla (pre-emption) e completerà la propria esecuzione prima che un altro codice possa essere eseguito (e possa manipolare i dati che la funzione manipola). Questo è completamente diverso dal C, ad esempio, dove, se una funzione è eseguita in un thread, può essere bloccata in qualsiasi momento per eseguire altro codice di un altro thread. </p> + +<p>Un aspetto negativo di questo modello sta nel fatto che se un messaggio impiega troppo tempo ad essere processato, l'applicazione web non puà elaborare le interazioni dell'utente, come i click o gli scroll. Il browser in qualche modo mitiga questa situazione con la finestra "uno script sta impiegando troppo tempo a completare". Una buona pratica da seguire è di implementare l'elaborazione di un messaggio in modo che impieghi poco tempo e, se possibile, suddividere un messaggio in più messaggi.</p> + +<h3 id="Aggiungere_messaggi">Aggiungere messaggi</h3> + +<p>Nei browser web, i messaggi sono continuamente aggiunti ogni qualvolta si verifica un evento con un event listener associato. Quindi il click ad un elemento con un un handler associato aggiungerà un messaggio--così come ogni altro evento.</p> + +<p>Una chiamata alla funzione <code><a href="/en-US/docs/Web/API/WindowTimers.setTimeout">setTimeout</a> </code>aggiunge un messaggio alla coda dopo che il tempo indicato come secondo argomento è trascorso. Se non c'è nessun altro messaggio nella coda, il messaggio è processato immediatamente; al contrario, se ci sono altri messaggi, il messaggio aggiunto da <code>setTimeout </code>dovrà attendere che gli altri messaggi vengano processati. Per questa ragione il secondo argomento di questa funzione indica un tempo minimo e non un tempo garantito.</p> + +<h3 id="Intervallo_zero">Intervallo zero</h3> + +<p>Zero delay non significa in realtà che la funzione di callback verrà attivata dopo zero millisecondi. Una chiamata a {{domxref("WindowTimers.setTimeout", "setTimeout")}} con un delay di 0 (zero) millisecondi, non esegue la funzione di callback dopo l'intervallo di tempo passato. L'esecuzione dipende dal numero di task in attesa nella coda. Nel seguente esempio il messaggio "this is just a message" verrà stampato a console prima che il messaggio della callback venga processato, perchè il ritardo è il minimo tempo richiesto per elaborare la richiesta, non un tempo garantito.</p> + +<pre class="brush: js">(function () { + + console.log('this is the start'); + + setTimeout(function cb() { + console.log('this is a msg from call back'); + }); + + console.log('this is just a message'); + + setTimeout(function cb1() { + console.log('this is a msg from call back1'); + }, 0); + + console.log('this is the end'); + +})(); + +// "this is the start" +// "this is just a message" +// "this is the end" +// "this is a msg from call back" +// "this is a msg from call back1" +</pre> + +<h3 id="Più_Runtime_in_comunicazione_tra_loro">Più Runtime in comunicazione tra loro</h3> + +<p>Un web worker oppure un <code>iframe </code>cross-origin hanno i loro stack, heap e coda di messaggi. Due runtime distinti possono comunicare esclusivamente attraverso il metodo <code><a href="/en-US/docs/DOM/window.postMessage">postMessage</a>. </code>Questo metodo aggiunge il messaggio all'altro runtime se quest'ultimo è in ascolo degli eventi dei messaggi.</p> + +<h2 id="Non_bloccante">Non bloccante</h2> + +<p>Una proprietà molto interessante del modello event loop è che JavaScript, a differenza di molti altri linguaggi, non è mai bloccante. La gestione delle operazionei di I/O è tipicamente eseguita mediante eventi e callback, pertanto quando l'applicazione è in attesa che una query <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a> restituisca il risultato oppure una richiesta di tipo <a href="/en-US/docs/Web/API/XMLHttpRequest">XHR</a> completi, può nel frattempo continuare a processare altre cose quali, ad esempio, gli user input.</p> + +<p>Esistono delle eccezioni dovuti alla legacy quali <code>alert </code>oppure le richieste sincrone XHR, ma è considerata una buona pratica evitarle. Attenzione: esistono anche <a href="http://stackoverflow.com/questions/2734025/is-javascript-guaranteed-to-be-single-threaded/2734311#2734311">eccezioni alle eccezioni</a> (ma sono solitamente bachi implementativi o altro).</p> diff --git a/files/it/web/javascript/gestione_della_memoria/index.html b/files/it/web/javascript/gestione_della_memoria/index.html new file mode 100644 index 0000000000..d1cd6c4dca --- /dev/null +++ b/files/it/web/javascript/gestione_della_memoria/index.html @@ -0,0 +1,197 @@ +--- +title: Gestione della memoria +slug: Web/JavaScript/Gestione_della_Memoria +translation_of: Web/JavaScript/Memory_Management +--- +<div>{{JsSidebar("Advanced")}}</div> + +<h2 id="Introduzione">Introduzione</h2> + +<p>Alcuni linguaggi di programmazione, come ad esempio C e C++, possiedono funzioni per la gestione della memoria a basso livello come <code>malloc()</code> e <code>free()</code>; in JavaScript l'allocazione e la de-allocazione della memoria (oggetti, stringhe, ecc.) avviene "automaticamente" grazie alla presenza del <em>Garbage Collection</em>. Il termine "automaticamente" è spesso fonte di confusione tra i programmatori JavaScript (e di altri linguaggi ad alto livello) poichè da l'impressione che si possa non preoccuparsi riguardo la gestione della memoria. Questo è un errore!</p> + +<h2 id="Ciclo_di_vita_della_memoria">Ciclo di vita della memoria</h2> + +<p>A prescindere dal linguaggio di programmazione, il ciclo di vita della memoria è pressappoco sempre lo stesso:</p> + +<ol> + <li>Allocazione della memoria necessaria</li> + <li>Utilizzo della memoria (scrittura, lettura)</li> + <li>Rilascio della memoria allocata quando non è più necessaria</li> +</ol> + +<p>I primi due punti sono espliciti in tutti i linguaggi; l'ultimo invece è esplicito nei linguaggi a basso livello, mentre il più delle volte implicito nei linguaggi ad alto livello come JavaScript.</p> + +<h3 id="Allocazione_in_JavaScript">Allocazione in JavaScript</h3> + +<h4 id="Inizializzazione_con_valore">Inizializzazione con valore</h4> + +<p>Per evitare che il programmatore debba allocare ogni variabile utilizzata, JavaScript lo fa contestualmente alla dichiarazione:</p> + +<pre class="brush: js">var n = 123; // alloca memoria per un numero +var s = "qwerty"; // alloca memoria per una stringa + +var o = { + a: 1, + b: null +}; // alloca memoria per un oggetto e i valori contenuti + +// (come un oggetto) alloca memoria per l'array e i valori contenuti +var a = [1, null, "abra"]; + +function f(a){ + return a + 2; +} // alloca una funzione (cioè un oggetto invocabile) + +// istruzioni più complesse anche allocano un oggetto +someElement.addEventListener('click', function(){ + someElement.style.backgroundColor = 'blue'; +}, false); +</pre> + +<h4 id="Allocazione_via_chiamata_di_funzione">Allocazione via chiamata di funzione</h4> + +<p>La chiamata di alcune funzioni risultano nell'allocazione di un oggetto, come nel seguente esempio:</p> + +<pre class="brush: js">var d = new Date(); +// alloca un DOM element +var e = document.createElement('div'); +</pre> + +<p>Alcuni metodi allocano nuovi valori od oggetti:</p> + +<pre class="brush: js">var s = "qwerty"; +var s2 = s.substr(0, 3); // s2 è una nuova stringa +// Dato che le stringhe sono valori immutabili, +// JavaScript può decidere di non allocare memoria per una nuova stringa, +// ma semplicemente di salvare il range [0, 3]. + +var a = ["ouais ouais", "nan nan"]; +var a2 = ["generation", "nan nan"]; +var a3 = a.concat(a2); +// Un nuovo array di 4 elementi, la concatenazione degli elementi di a e a2 +</pre> + +<h3 id="Utilizzo_dei_valori">Utilizzo dei valori</h3> + +<p>Usare i valori in sostanza significa accedere alla memoria allocata. Questo può essere fatto leggendo o scrivendo il valore di una variabile, di una proprietà di un oggetto, o anche semplicemente passando un argomento a una funzione.</p> + +<h3 id="Rilascio_della_memoria_quando_non_più_necessaria">Rilascio della memoria quando non più necessaria</h3> + +<p>La maggior parte dei problemi riguardo la gestione della memoria arrivano in questa fase; L'impresa più difficile è determinare quando "la memoria allocata non è più necessaria". Ciò si traduce per il programmatore in individuare dove, nel codice, questo pezzo di memoria non risulta più necessario, e quindi liberarlo.</p> + +<p>I linguaggi ad alto livello hanno una funzionalità chiamata "Garbage Collector" il cui compito è di seguire l'allocazione e l'uso della memoria così da determinare quando una porzione della memoria allocata non è più necessaria e liberarla automaticamente. Questo processo è un approssimazione dato che il problema generico di conoscere se una porzione di memoria serve o no è <a class="external external-icon" href="http://en.wikipedia.org/wiki/Decidability_%28logic%29">irrisolvibile</a> (non può essere risolto da un algoritmo).</p> + +<h2 id="Garbage_Collection">Garbage Collection</h2> + +<p>Partendo dal presupposto che il generico problema di sapere dove una determinata porzione di memoria "non serve più" è irrisolvibile, come conseguenza, l'implementazione dei garbege collection sono una restrizione della soluzione del problema generico. Questa sezione illustra le nozioni necessarie a capire il funzionamento dei principali algoritmi che implementano i garbage collection e le loro limitazioni.</p> + +<h3 id="Referenze">Referenze</h3> + +<p>L'idea principale su cui si basano gli algoritmi di garbage collection sono le <em>referenze</em>. Nel contesto della gestione della memoria, un oggetto è <em>referente</em> di un altro se può accedere a quest'ultimo (sia in modo implicito che esplicito). Ad esempio, un oggetto JavaScript è referente del suo <a href="/en-US/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain">prototype</a> (referenza implicita) e ai valori delle sue proprietà (referenza esplicita).</p> + +<p>In questo contesto, il concetto di "oggetto" si estende a qualcosa di molto più ampio rispetto al tradizionale concetto di "oggetto JavaScript" e contiene function scopes (or the global lexical scope).</p> + +<h3 id="Reference-counting_garbage_collection">Reference-counting garbage collection</h3> + +<p>Quello qui descritto è l'algoritmo di garbage collection più semplice. Esso riduce il problema da "quando un oggetto non serve più" a "quando un oggetto non è più referenziato da nessun altro oggetto". Un oggetto è considerato garbage collectable (letteralmente, spazzatura da raccogliere) se nessun altro oggetto ha almeno una referenza ad esso.</p> + +<h4 id="Esempio">Esempio</h4> + +<pre class="brush: js">var o = { + a: { + b:2 + } +}; +// Alloca 2 oggetti. Il primo è referenziato dall'altro come sua proprietà. +// L'altro è referenziato dalla <s>dalla virtù di essere assegnato alla</s> variabile 'o'. +// Ovviamente, nessuno dei due può essere cancellato per liberare memoria + + +var o2 = o; // la variabile 'o2' è il secondo oggetto + // che referenzia lo stesso oggetto di 'o' +o = 1; // ora l'oggetto che originariamente era in 'o' ha un'unica referenza + // rappresentata dalla variabile 'o2' + +var oa = o2.a; // referenza alla proprietà 'a' dell'oggetto. + // Quest'oggetto ora ha 2 referenze: una come proprietà di 'o2' + // e una come variabile 'oa' + +o2 = "yo"; // L'oggetto che originariamente era in 'o' adesso non + // più alcuna referenza e può essere cancellato. + // Però la sua proprietà 'a' è ancora referenziata + // dall'oggetto 'oa', quindi non può essere ancora eliminato + +oa = null; // la proprietà 'a' del precedente oggetto adesso non ha + // alcuna referenza. Può essere cancellata. +</pre> + +<h4 id="Limitazione_cicli_di_referenze">Limitazione: cicli di referenze</h4> + +<p>Questo algotitmo ha una limitazione quando entra in un ciclo di referenze. Nell'esempio seguente sono creati due oggetti che si referenziano a vicenda, uno referenzia l'altro e viceversa, creando un ciclo di referenze (dipendenza ciclica). In questo modo ogni oggetto ha almento una referenza, l'algoritmo del reference-countig (ovvero quello che "conta" quante referenze ha un oggetto) da come risultato che nessuno dei due oggetti può essere cancellato (non sono garbage-collactable).</p> + +<pre class="brush: js">function f(){ + var o = {}; + var o2 = {}; + o.a = o2; // o referenzia o2 + o2.a = o; // o2 referenzia o + + return "qwerty"; +} + +f(); +// Two objects are created and reference one another thus creating a cycle. +// They will not get out of the function scope after the function call, so they +// are effectively useless and could be free'd. +// However, the reference-counting algorithm considers that since each of both +// object is referenced at least once, none can be garbage-collected. +</pre> + +<h4 id="Esempio_reale">Esempio reale</h4> + +<p>Internet Explorer 6 e 7 sono conosciuti per avere un <em>reference-counting garbage collector</em> per gli oggetti DOM. I cicli di referenze sono errori comuni che possono generare uno spreco di memoria (memory leaks).</p> + +<pre class="brush: js">var div; +window.onload = function(){ + div = document.getElementById("myDivElement"); + div<span style="font-size: 1rem;">.circularReference = div;</span> + div.lotsOfData = new Array(10000).join("*"); +}; +</pre> + +<p>Nell'esempio precedente, l'elemento "myDivElement" ha una referenza circolare con se stesso nella proprietà "circularReference". Se la proprietà non è esplicitamente rimossa o annullata, un <em>reference-counting garbage collector </em>avrà sempre almeno una referenza intatta che manterrà l'elemento in memoria anche se esso fosse rimosso dal DOM. Se un oggetto trattiene molta memoria e ha almeno una referenza (come illustrato nell'esempio precedente con la proprietà "lotsOfData") la memoria da esso occupata non sarà mai rilasciata.</p> + +<h3 id="L'algoritmo_mark-and-sweep">L'algoritmo mark-and-sweep</h3> + +<p>Questo algoritmo è il più famoso degli algoritmi di tracing; la tecnica del tracing è concettualmente molto semplice e si basa sulla definizione "quando un oggetto diventa irraggiungibile".</p> + +<p>Essa consiste nel prendere come riferimento gli oggetti root (indice dell'albero) e, partendo da essi, mediante una ricorsione, marcare (tramite un bit o una mappa distinta) tutti gli oggetti collegati tra loro da un riferimento. Al termine di questa operazione, gli oggetti raggiungibili saranno marcati mentre quelli non raggiungibili saranno eliminati.</p> + +<p>L'algoritmo mark-and-sweep (marca e butta via) si suddivide in due fasi: la prima fase (<em>mark</em>) nella quale l'algoritmo marca tutti gli oggetti che hanno almeno un riferimento attivo; nella seconda fase (<em>sweep</em>) nella quale tutti gli oggetti non marcati vengono liberati e la memoria viene restituita.</p> + +<p>A differenza della tecnica del reference counting il cui il costo dell'algoritmo è proporzionale all'ammontare del lavoro eseguito dal programma (ogni volta che si alloca/dealloca un oggetto bisogna creare-incrementare/decrementare il contatore), la tecnica del tracing è proporzionale alla dimensione della memoria ed è sicuramente più efficiente.</p> + +<h4 id="I_cicli_non_sono_più_un_problema">I cicli non sono più un problema</h4> + +<p>Nel primo esempio, dopo che la funzione ha restituito un risultato, i 2 oggetti non sono più referenziati da nessun altro oggetto raggiungibile dall'oggetto globale (root). Ne consegue che saranno irraggiungibili dal garbage collector e quindi eleminati.</p> + +<p>La stessa cosa accade con il secondo esempio. Una volta che il div e la sua variabile sono diventati irraggiungibili dalle radici, essi possono essere cancellati nonostante abbiano una referenza ciascuno.</p> + +<h4 id="Limitazione_gli_oggetti_devono_essere_esplicitamente_irragiungibili">Limitazione: gli oggetti devono essere esplicitamente irragiungibili</h4> + +<p>Sebbene sia marcata come una limitazione, è raramente raggiunta in pratica ed è anche il motivo per cui nessuno si preoccupa, di solito, dei garbage collector.</p> + +<blockquote> +<h4 id="Piccolo_appunto_italiano">Piccolo appunto italiano</h4> + +<p>Tutte le parole <s>tagliate</s> sono state tradotte letteralmente ma in modo che la frase non perda di significato.</p> + +<p dir="rtl">cit. Il traduttore</p> +</blockquote> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a class="external" href="http://www.ibm.com/developerworks/web/library/wa-memleak/">IBM article on "Memory leak patterns in JavaScript" (2007)</a></li> + <li><a class="external" href="http://msdn.microsoft.com/en-us/magazine/ff728624.aspx">Kangax article on how to register event handler and avoid memory leaks (2010)</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Performance" title="https://developer.mozilla.org/en-US/docs/Mozilla/Performance">PerformancC</a></li> +</ul> diff --git a/files/it/web/javascript/getting_started/index.html b/files/it/web/javascript/getting_started/index.html new file mode 100644 index 0000000000..8fa4f4fd0c --- /dev/null +++ b/files/it/web/javascript/getting_started/index.html @@ -0,0 +1,330 @@ +--- +title: Getting Started (JavaScript Tutorial) +slug: Web/JavaScript/Getting_Started +translation_of: Learn/Getting_started_with_the_web/JavaScript_basics +--- +<h2 id="Why_JavaScript.3F" name="Why_JavaScript.3F">Perché JavaScript?</h2> +<p>JavaScript è un linguaggio per computer potente, complicato, e spesso misconosciuto. Permette lo sviluppo rapido di applicazioni in cui gli utenti possono inserire i dati e vedere i risultati facilmente.</p> +<p>Il vantaggio primario di JavaScript, che è anche conosciuto come ECMAScript, è che è centrato intorno al Web browser, così da avere la capacità di produrre gli stessi risultati su tutte le piattaforme supportate dal browser. Gli esempi in questa pagina, proprio come Google Maps, girano su Linux, Windows, e OS X. Con la recente crescita di numerose librerie JavaScript è ora più facile traversare un documento, selezionare gli elementi del DOM, creare animazioni, trattare eventi, e sviluppare applicazioni Ajax. Diversamente dalla promozione intorno alle altre tecnologie spinta da vari interessi proprietari, JavaScript è realmente il solo linguaggio di programmazione "cross-platform" e "client-side" che è sia libero che universalmente adottato.</p> +<h2 id="What_you_should_already_know" name="What_you_should_already_know">Cosa dovresti già conoscere</h2> +<p>Iniziare a programmare con JavaScript è molto semplice. Tutto quello che serve per cominciare è un editor di testo e un Web browser.</p> +<p>Ci sono molte altre tecnologie che possono essere integrate e sviluppate insieme a Javascript che sono al di fuori di questo documento. Non aspettarti di fare un'intera applicazione come Google Maps tutta nel tuo primo giorno!</p> +<h2 id="Getting_Started" name="Getting_Started">Come iniziare</h2> +<p>Iniziare con JavaScript è molto semplice. Non devi aver precedentemente installato complicati programmi di sviluppo. Non devi conoscere come usare una shell, programmare Make, o usare un compilatore. JavaScript è interpretato dal tuo Web browser. Tutto quello che hai da fare è salvare il tuo programma come file testo e poi aprirlo nel tuo Web browser. E' tutto qui!</p> +<p>JavaScript è un linguaggio di programmazione ideale per linguaggi di computer introduttivi. Permette ai nuovi studenti di avere risposte immediate e insegna loro strumenti che essi troveranno di facile uso nella loro vita reale. Ciò è in assoluto contrasto con C, C++, and Java che sono veramente facili solo per sviluppatori software specializzati.</p> +<h2 id="Browser_Compatibility_Issues" name="Browser_Compatibility_Issues">Browser compatibility issues</h2> +<p>There are variations between what functionality is available in the different browsers. Mozilla, Chrome, Microsoft IE, Apple Safari, and Opera fluctuate in behavior. You can mitigate these issues by using the various cross-platform JavaScript APIs that are available. These APIs provide common functionality and hide these browser fluctuations from you.</p> +<h2 id="How_to_try_the_Examples" name="How_to_try_the_Examples">How to try the examples</h2> +<p>The examples below have some sample code. There are many ways to try these examples out. If you already have your own website, then you should be able to just save these examples as new Web pages on your website.</p> +<p>If you do not have your own website, you can save these examples as files on your computer and open them up with the Web browser you are using now. JavaScript is a very easy language to use for beginning programmers for this reason. You don't need a compiler or a development environment; you and your browser are all you need to get started!</p> +<p>You can also take use of some online programs like <a href="http://jsfiddle.net/">jsfiddle.net</a></p> +<h2 id="Example:_Catching_a_mouse_click" name="Example:_Catching_a_mouse_click">Example: Catching a mouse click</h2> +<p>The specifics of event handling (event types, handler registration, propagation, etc.) are too extensive to be fully covered in this simple example. However, this example cannot demonstrate catching a mouse click without delving a little into the JavaScript event system. Just keep in mind that this example will only graze the full details about JavaScript events and that if you wish to go beyond the basic capabilities described here, read more about the JavaScript event system.</p> +<p>'Mouse' events are a subset of the total events issued by a Web browser in response to user actions. The following is a list of the events emitted in response to a user's mouse action:</p> +<ul> + <li>Click - issued when a user clicks the mouse</li> + <li>DblClick - issued when a user double-clicks the mouse</li> + <li>MouseDown - issued when a user depresses a mouse button (the first half of a click)</li> + <li>MouseUp - issued when a user releases a mouse button (the second half of a click)</li> + <li>MouseOut - issued when the mouse pointer leaves the graphical bounds of the object</li> + <li>MouseOver - issued when the mouse pointer enters the graphical bounds of the object</li> + <li>MouseMove - issued when the mouse pointer moves while within the graphical bounds of the object</li> + <li>ContextMenu - issued when the user clicks using the right mouse button</li> +</ul> +<p>Note that in the latest versions of HTML, the inline event handlers, i.e. the ones added as tag attributes, are expected to be all lowercase and that event handlers in script are always all lowercase.</p> +<p>The simplest method for capturing these events, to register event handlers - using HTML - is to specify the individual events as attributes for your element. Example:</p> +<pre class="brush:js"> <span onclick="alert('Hello World!');">Click Here</span></pre> +<p>The JavaScript code you wish to execute can be inlined as the attribute value or you can call a function which has been defined in a <script> block within the HTML page:</p> +<pre class="brush:js"><script> + function clickHandler() { + alert("Hello, World!"); + } +</script> +<span onclick="clickHandler();">Click Here</span></pre> +<p>Additionally, the event object which is issued can be captured and referenced, providing the developer with access to specifics about the event such as which object received the event, the event's type, and which mouse button was clicked. Using the inline example again:</p> +<pre class="brush:js"><script> + function clickHandler(event) { + var eType = event.type; + /* the following is for compatibility */ + /* Moz populates the target property of the event object */ + /* IE populates the srcElement property */ + var eTarget = event.target || event.srcElement; + + alert( "Captured Event (type=" + eType + ", target=" + eTarget + ")" ); + } +</script> +<span onclick="clickHandler(event);">Click Here</span></pre> +<p>In addition to registering to receive events in your HTML, you can likewise set the same attributes of any HTMLElement objects generated by your JavaScript. The example below instantiates (creates) a span object, appends it to the page body, and registers the span object to receive mouse-over, mouse-out, mouse-down, and mouse-up events.</p> +<pre class="brush:js"><body></body> +<script> + function mouseeventHandler(event) { + /* The following is for compatibility */ + /* IE does NOT by default pass the event object */ + /* obtain a ref to the event if one was not given */ + if (!event) event = window.event; + + /* obtain event type and target as earlier */ + var eType = event.type; + var eTarget = event.target || event.srcElement; + alert(eType +' event on element with id: '+ eTarget.id); + } + + function onloadHandler() { + /* obtain a ref to the 'body' element of the page */ + var body = document.body; + /* create a span element to be clicked */ + var span = document.createElement('span'); + span.id = 'ExampleSpan'; + span.appendChild(document.createTextNode ('Click Here!')); + + /* register the span object to receive specific mouse events - + notice the lowercase of the events but the free choice in the names of the handlers you replace them with. + */ + span.onmousedown = mouseeventHandler; + span.onmouseup = mouseeventHandler; + span.onmouseover = mouseeventHandler; + span.onmouseout = mouseeventHandler; + + /* display the span on the page */ + body.appendChild(span); +} + +window.onload = onloadHandler; // since we replace the handler, we do NOT have () after the function name +</script></pre> +<h2 id="Example:_Catching_a_keyboard_event" name="Example:_Catching_a_keyboard_event">Example: Catching a keyboard event</h2> +<p>Similar to the "Catching a mouse event" example above, catching a keyboard event relies on exploring the JavaScript event system. Keyboard events are fired whenever any key is used on the keyboard.</p> +<p>The list of available keyboard events emitted in response to a keyboard action is considerably smaller than those available for mouse:</p> +<ul> + <li>KeyPress - issued when a key is depressed and released</li> + <li>KeyDown - issued when a key is depressed but hasn't yet been released</li> + <li>KeyUp - issued when a key is released</li> + <li>TextInput (available in Webkit browsers only at time of writing) - issued when text is input either by pasting, speaking, or keyboard. This event will not be covered in this article.</li> +</ul> +<p>In a <a class="new " href="/en-US/docs/DOM/event/keypress" rel="internal">keypress</a> event, the Unicode value of the key pressed is stored in either the <code>keyCode</code> or <code><a href="/en-US/docs/DOM/event.charCode" rel="internal">charCode</a></code> property, never both. If the key pressed generates a character (e.g., 'a'), <code>charCode</code> is set to the code of that character, respecting the letter case (i.e., <code>charCode</code> takes into account whether the shift key is held down). Otherwise, the code of the pressed key is stored in <code>keyCode</code>.</p> +<p>The simplest method for capturing keyboard events is again to register event handlers within the HTML, specifying the individual events as attributes for your element. Example:</p> +<pre class="brush:js"> <input type="text" onkeypress="alert ('Hello World!');"> +</pre> +<p>As with mouse events, the JavaScript code you wish to execute can be inlined as the attribute value or you can call a function which has been defined in a <script> block within the HTML page:</p> +<pre class="brush:js"><script> + function keypressHandler() { + alert ("Hello, World!"); + } +</script> + +<input onkeypress="keypressHandler();" /> +</pre> +<p>Capturing the event and referencing the target (i.e., the actual key that was pressed) is achieved in a similar way to mouse events:</p> +<pre class="brush:js"><script type="text/javascript"> + function keypressHandler(evt) { + var eType = evt.type; // Will return "keypress" as the event type + /* here we again need to use a cross browser method + mozilla based browsers return which and others keyCode. + The <a href="/en-US/docs/JavaScript/Reference/Operators/Conditional_Operator" title="/en-US/docs/JavaScript/Reference/Operators/Conditional_Operator">Conditional operator</a> or ternary is a good choice */ + var keyCode = evt.which?evt.which:evt.keyCode; + var eCode = 'keyCode is ' + keyCode; + var eChar = 'charCode is ' + <span class="typ" style="background-color: transparent; margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; color: rgb(43, 145, 175);">String</span><span class="pun" style="background-color: transparent; color: rgb(0, 0, 0); margin: 0px; padding: 0px; border: 0px; vertical-align: baseline;">.</span><span class="pln" style="background-color: transparent; color: rgb(0, 0, 0); margin: 0px; padding: 0px; border: 0px; vertical-align: baseline;">fromCharCode(</span>keyCode); // or evt.charCode + alert ("Captured Event (type=" + eType + ", key Unicode value=" + eCode + ", ASCII value=" + eChar + ")"); + } +</script> +<input onkeypress="keypressHandler(event);" /></pre> +<p>Capturing any key event from the page can be done by registering the event at the document level and handling it in a function:</p> +<pre class="brush:js"><script> + document.onkeypress = keypressHandler; + document.onkeydown = keypressHandler; + document.onkeyup = keypressHandler; +</script></pre> +<p>Here is a complete example that shows key event handling:</p> +<pre class="brush:js"><!DOCTYPE html> +<html> +<head> + <script> + var metaChar = false; + var exampleKey = 16; + function keyEvent(event) { + var key = event.keyCode || event.which; // alternative to ternary - if there is no keyCode, use which + var keychar = String.fromCharCode(key); + if (key == exampleKey) { + metaChar = true; + } + if (key != exampleKey) { + if (metaChar) { + alert("Combination of metaKey + " + keychar) + metaChar = false; + } else { + alert("Key pressed " + key); + } + } + } + function metaKeyUp(event) { + var key = event.keyCode || event.which; + if (key == exampleKey) { metaChar = false; } + } + </script> +</head> +<body onkeydown="keyEvent(event)" onkeyup="metaKeyUp(event)"> + Try pressing any key! +</body> +</html></pre> +<h3 id="Browser_bugs_and_quirks">Browser bugs and quirks</h3> +<p>The two properties made available through the key events are <code>keyCode</code> and <code>charCode</code>. In simple terms, <code>keyCode</code> refers to the actual keyboard key that was pressed by the user, while <code>charCode</code> is intended to return that key's ASCII value. These two values may not necessarily be the same; for instance, a lower case 'a' and an upper case 'A' have the same <code>keyCode</code>, because the user presses the same key, but a different <code>charCode</code> because the resulting character is different.</p> +<p>The way in which browsers interpret the charCode is not a consistently-applied process. For example, Internet Explorer and Opera do not support <code>charCode</code>. However, they give the character information in <code>keyCode</code>, but only onkeypress. Onkeydown and onkeyup <code>keyCode</code> contain key information. Firefox uses a different word, "which", to distinguish the character.</p> +<p>Refer to the Mozilla Documentation on <a href="/en-US/docs/DOM/Event/UIEvent/KeyboardEvent" title="https://developer.mozilla.org/en-US/docs/DOM/Event/UIEvent/KeyEvent">Keyboard Events</a> for a further treatment of keyboard events.</p> +<p>{{ draft() }}</p> +<h2 id="Example:_Dragging_images_around" name="Example:_Dragging_images_around">Example: Dragging images around</h2> +<p>The following example allows moving the image of Firefox around the page:</p> +<pre class="brush:js"><!DOCTYPE html> +<html> +<head> +<style> +img { position: absolute; } +</style> + +<script> +window.onload = function() { + + movMeId = document.getElementById("ImgMov"); + movMeId.style.top = "80px"; + movMeId.style.left = "80px"; + + document.onmousedown = coordinates; + document.onmouseup = mouseup; + + function coordinates(e) { + if (e == null) { e = window.event;} + + // e.srcElement holds the target element in IE, whereas e.target holds the target element in Firefox + // Both properties return the HTML element the event took place on. + + var sender = (typeof( window.event ) != "undefined" ) ? e.srcElement : e.target; + + if (sender.id=="ImgMov") { + mouseover = true; + pleft = parseInt(movMeId.style.left); + ptop = parseInt(movMeId.style.top); + xcoor = e.clientX; + ycoor = e.clientY; + document.onmousemove = moveImage; + return false; + } + return false; + } + + function moveImage(e) { + if (e == null) { e = window.event; } + movMeId.style.left = pleft+e.clientX-xcoor+"px"; + movMeId.style.top = ptop+e.clientY-ycoor+"px"; + return false; + } + + function mouseup(e) { + document.onmousemove = null; + } +} +</script> +</head> + +<body> + <img id="ImgMov" src="http://placehold.it/100x100&text=JS" width="64" height="64"> + <p>Drag and drop around the image in this page.</p> +</body> + +</html></pre> +<h2 id="Example:_Resizing_things" name="Example:_Resizing_things">Example: Resizing things</h2> +<div> + Example of resizing an image (the actual image is not resized, only the image's rendering.) + <pre class="brush:js"> <!DOCTYPE html> + <html> + <head> + <style> + #resizeImage { + margin-left: 100px; + } + </style> + <script> + window.onload = function() { + + var resizeId = document.getElementById("resizeImage"); + var resizeStartCoordsX, + resizeStartCoordsY, + resizeEndCoordsX, + resizeEndCoordsY; + + var resizeEndCoords; + var resizing = false; + + document.onmousedown = coordinatesMousedown; + document.onmouseup = coordinatesMouseup; + + function coordinatesMousedown(e) { + if (e == null) { + e = window.event; + } + + var element = (typeof( window.event ) != 'undefined' ) ? e.srcElement : e.target; + + if (element.id == "resizeImage") { + resizing = true; + resizeStartCoordsX = e.clientX; + resizeStartCoordsY = e.clientY; + } + return false; + } + + function coordinatesMouseup(e) { + if (e == null) { + e = window.event; + } + + if (resizing === true) { + var currentImageWidth = parseInt(resizeId.width); + var currentImageHeight = parseInt(resizeId.height); + + resizeEndCoordsX = e.clientX; + resizeEndCoordsY = e.clientY; + + resizeId.style.height = currentImageHeight - (resizeStartCoordsY - resizeEndCoordsY) + 'px'; + resizeId.style.width = currentImageWidth - (resizeStartCoordsX - resizeEndCoordsX) + 'px'; + + resizing = false; + } + return false; + } + } + </script> + </head> + + <body> + <img id="resizeImage" src="http://upload.wikimedia.org/wikipedia/commons/e/e7/Mozilla_Firefox_3.5_logo_256.png" +width="64" height="64"> + <p>Click on the image and drag for resizing.</p> + </body> + + </html></pre> +</div> +<h2 id="Example:_Drawing_Lines" name="Example:_Drawing_Lines">Example: Drawing Lines</h2> +<pre class="brush: html"><!DOCTYPE html> +<html> +<head> +<script> +function linedraw(ax,ay,bx,by) +{ + if(ay>by) + { + bx=ax+bx; + ax=bx-ax; + bx=bx-ax; + by=ay+by; + ay=by-ay; + by=by-ay; + } + var calc=Math.atan((ay-by)/(bx-ax)); + calc=calc*180/Math.PI; + var length=Math.sqrt((ax-bx)*(ax-bx)+(ay-by)*(ay-by)); + document.body.innerHTML += "<div id='line' style='height:" + length + "px;width:1px;background-color:black;position:absolute;top:" + (ay) + "px;left:" + (ax) + "px;transform:rotate(" + calc + "deg);-ms-transform:rotate(" + calc + "deg);transform-origin:0% 0%;-moz-transform:rotate(" + calc + "deg);-moz-transform-origin:0% 0%;-webkit-transform:rotate(" + calc + "deg);-webkit-transform-origin:0% 0%;-o-transform:rotate(" + calc + "deg);-o-transform-origin:0% 0%;'></div>" +} +</script> +</head> +<body onload="linedraw(200,400,500,900);"> <!-- Replace with your co-ordinate --> +</body> +</html></pre> +<p> </p> diff --git a/files/it/web/javascript/guida/controllo_del_flusso_e_gestione_degli_errori/index.html b/files/it/web/javascript/guida/controllo_del_flusso_e_gestione_degli_errori/index.html new file mode 100644 index 0000000000..76e72f5cba --- /dev/null +++ b/files/it/web/javascript/guida/controllo_del_flusso_e_gestione_degli_errori/index.html @@ -0,0 +1,461 @@ +--- +title: Controllo del flusso di esecuzione e gestione degli errori +slug: Web/JavaScript/Guida/Controllo_del_flusso_e_gestione_degli_errori +tags: + - Controllo di flusso + - Guide + - JavaScript + - Principianti + - 'l10n:priority' +translation_of: Web/JavaScript/Guide/Control_flow_and_error_handling +--- +<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Grammar_and_types", "Web/JavaScript/Guide/Loops_and_iteration")}}</div> + +<p class="summary">JavaScript prevede un insieme di istruzioni compatto, specifico per il controllo del flusso di esecuzione, che si può utilizzare per aggiungere un'elevata interattività alle proprie applicazioni. Questo capitolo fornisce una panoramica su queste istruzioni.</p> + +<p>Il <a href="/en-US/docs/Web/JavaScript/Reference/Statements">JavaScript reference</a> contiene dettagli esaustivi sulle istruzioni di questo capitolo. Il carattere punto e virgola (<code>;</code>) è usato per separare le varie istruzioni del codice JavaScript.</p> + +<p>Ogni espressione JavaScript è a sua volta un'istruzione. Si veda a riguardo <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators">Espressioni ed operatori</a> per una completa descrizione delle espressioni.</p> + +<h2 id="Costrutto_di_blocco">Costrutto di blocco</h2> + +<p>Un costrutto fondamentale è il <strong>blocco</strong>, usato per raggruppare insieme più istruzioni, delimitato da un paio di parentesi graffe ({}):</p> + +<pre class="syntaxbox notranslate">{ + istruzione_1; + istruzione_2; + . + . + . + istruzione_n; +} +</pre> + +<h3 id="Esempi"><strong>Esempi</strong></h3> + +<p>Il blocco è comunemente usato assieme alle istruzioni per il controllo del flusso (e.g. <code>if</code>, <code>for</code>, <code>while</code>).</p> + +<pre class="brush: js notranslate">while (x < 10) { + x++; +} +</pre> + +<p>Qui, <code>{ x++; }</code> rappresenta un blocco.</p> + +<p><strong>Importante</strong>: JavaScript prima di ECMAScript2015 <strong>non</strong> aveva la visibilità di blocco. Le variabili definite nel blocco hanno una visibilità a livello di funzione o di script in cui sono contenute e l'effetto di assegnare loro un valore persiste oltre il blocco stesso. Cioè il blocco non definisce un campo di visibilità. I blocchi "Indipendenti" ("Standalone" blocks) in JavaScript possono dare un risultato differente da quello che avrebbero prodotto in C o in Java. Per esempio:</p> + +<pre class="brush: js notranslate">var x = 1; +{ + var x = 2; +} +console.log(x); // produce 2 +</pre> + +<p>Risulta 2 perché l'istruzione di definizione <code>var x</code> dentro il blocco ha lo stesso campo di visibilità dell'istruzione <code>var x</code> al di fuori del blocco. Mentre in C o Java, il codice equivalente avrebbe prodotto 1.</p> + +<p>A partire da ECMAScript2015, la dichiarazione di variabile con l'istruzione <code>let</code> ha visibilità di blocco. Si veda il riferimento a {{jsxref("Statements/let", "let")}} per ulteriori informazioni.</p> + +<h2 id="Costrutti_Condizionali">Costrutti Condizionali</h2> + +<p>Un costrutto condizionale è un insieme di istruzioni che vengono eseguite se una specifica condizione risulta vera. JavaScript prevede due costrutti condizionali: <code>if...else</code> e <code>switch</code>.</p> + +<h3 id="Costrutto_if...else"><code>Costrutto if...else</code></h3> + +<p>Si usa il costrutto <code>if</code> per eseguire un blocco di istruzioni se una condizione logica è vera. Si usa la clausola opzionale <code>else</code> per eseguire istruzioni nel caso in cui la stessa condizione sia falsa. Un costrutto <code>if...else</code> si presenta come qui sotto:</p> + +<pre class="brush: js notranslate">if (condizione) { + istruzioni_se_vera_la_condizione; +} else {// opzionale + istruzioni_se_falsa_la_condizione; +}</pre> + +<p>Qui la <code>condizione</code> è qualsiasi espressione che sia valutabile come vera oppure falsa (<code>true</code> o <code>false</code>). Si veda il riferimento a <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean#Description">Boolean</a> per una spiegazione su cosa possa essere valutabile come <code>true</code> o <code>false</code>. Se la <code>condizione</code> viene valutata <em>true</em>, <code>istruzioni_se_vera_la_condzione</code> verrà eseguito, altrimenti verrà eseguito <code>istruzioni_se_falsa_la_condzione</code>. <code>istruzioni_se_vera_la_condzione</code> e <code>istruzioni_se_falsa_la_condzione</code> possono essere qualsiasi istruzione, incluso un altro <code>if</code>.</p> + +<p>Si possono pure combinare le istruizioni <code>else if</code> per testare molteplici condizioni in sequenza, come il seguente codice dimostra:</p> + +<pre class="syntaxbox notranslate">if (condizione_1) { + istruzione_1; +} else if (condizione_2) { + istruzione_2; +} else if (condizione_n) { + istruzione_n; +} else { + ultima_istruzione; +} +</pre> + +<p>Nel caso di condizioni plurime solo la prima che sia valutata come vera sarà eseguita. Per eseguire più istruzioni si devono raggruppare in un blocco (<code>{ ... }</code>) . In generale è buona pratica usare un blocco specialmente se si usano <code>if</code> annidati:</p> + +<pre class="syntaxbox notranslate">if (condizione) { + istruzione_1_eseguita_se_vera_la_condizione; + istruzione_2_eseguita_se_vera_la_condizione; + ... +} else { + istruzione_3_eseguita_se_falsa_la_condizione; + istruzione_4_eseguita_se_falsa_la_condizione; + ... +} +</pre> + +<div>Non è consigliabile usare la semplice assegnazione in una espressione condizionale, perché l'assegnamento potrebbe essere confuso con il segno di uguaglianza quando si dia un'occhiata rapida al codice. Ad esempio, non si usi il seguente codice:</div> + +<div></div> + +<pre class="example-bad brush: js notranslate">if (x = y) {// questa è una assegnazione + /* istruzioni qui */ +}</pre> + +<p>Se si deve proprio usare un assegnamento in una espressione condizionale è pratica comune aggiungere un paio di parentesi tonde attorno all'assegnamento. Per esempio:</p> + +<pre class="brush: js notranslate">if ((x = y)) { + /* istruzioni qui */ +} +</pre> + +<h4 id="Valori_valutabili_a_false">Valori valutabili a false</h4> + +<p>I seguenti valori si valutano a <code>false</code> (sono anche detti {{Glossary("Falsy")}} value):</p> + +<ul> + <li><code>false</code></li> + <li><code>undefined</code></li> + <li><code>null</code></li> + <li><code>0</code></li> + <li><code>NaN</code></li> + <li>la stringa vuota (<code>""</code>)</li> +</ul> + +<p>Tutti gli altri valori, inclusi gli oggetti, saranno valutati a <code>true</code> in una istruzione condizionale.</p> + +<p>Non si confonda il valori primitivi booleani <code>true</code> e <code>false</code> con i valori <code>true</code> e <code>false</code> dell'oggetto {{jsxref("Boolean")}}. Ad esempio:</p> + +<pre class="brush: js notranslate">var b = new Boolean(false); + +if (b) // questa condizione è valutata a true + // perché 'b' in questo caso è un oggetto + // e si sa che tutti gli oggetti sono valutati a true + +if (b == true) // mentre questa a false, + // perché si va a prelevare il contenuto dell'oggetto 'b' che è false +</pre> + +<h4 id="Esempi_2"><strong>Esempi</strong></h4> + +<p>Nell'esempio a seguire la funzione <code>controllaDati</code> ritorna <code>true</code> se il numero di caratteri contenuti nella proprietà <code>value</code> dell'oggetto <code>Text (treCaratteri)</code> è tre, altrimenti mostra un popup di alert e, infine, ritorna il valore <code>false</code>.</p> + +<pre class="brush: js notranslate">function controllaDati() { + if (document.form1.treCaratteri.value.length == 3) { + return true; + } else { + alert("Immetti esattemente tre caratteri. " + + document.form1.treCaratteri.value + " non è valido."); + return false; + } +} +</pre> + +<h3 id="Costrutto_switch"><code>Costrutto switch</code></h3> + +<p>Un costrutto <code>switch</code> permette ad un programma di valutare un'espressione e tentare di trovare la corrispondenza esatta tra il valore risultante dalla valutazione dell'espressione e l'etichetta specificata nella clausola <code>case</code>. Se si incontra una corrisopondenza il programma eseguirà le istruzioni associate. Un costrutto <code>switch</code> si presenta come nell'esempio qui sotto riportato:</p> + +<pre class="syntaxbox notranslate">switch (espressione) { + case etichetta_1: + istruzione_1 + [break;]// opzionale + case etichetta_2: + istruzione_2 + [break;] + ... + default: + istruzioni_di_default + [break;] +} +</pre> + +<p>Il programma cerca la prima corrispondenza tra il valore ottentuto della valutazione dell'<code>espressione </code>e l'etichetta nella clausola <code>case</code>, poi trasferisce il controllo al corpo della medesima clausola eseguendo le istruzioni relative. Se non è stata trovata alcuna corrispondeza il programma va alla clausola opzionale <code>default</code> e, se la trova, esegue le istruizioni ad essa relative. Se non è stata data alcuna clausola <code>default</code> il programma continuerà con l'istruzione successiva al blocco <code>switch</code>. La clausola <code>default</code> è l'ultima che appare nel blocco<code> switch</code>, ma questa è una convenzione non la regola.</p> + +<p>Il <code>break</code> opzionale, associato con ogni clausola <code>case,</code> assicura che il programma esca dal blocco <code>switch</code> una volta eseguite le istruzioni associate alla clausola e continui la sua esecuzione all'istruzione che segue il costrutto <code>switch</code>. Se il <code>break</code> è omesso il programma continua la sua esecuzione all'istruzione successiva nello stesso costrutto <code>switch</code>, ciò significa che eseguirà le istruzioni associate alla clausola <code>case/default</code> (se ci sono) successiva a quella appena terminata.</p> + +<h4 id="Esempi_3"><strong>Esempi</strong></h4> + +<p>Nel seguente esempio, se la variabile <code>tipidifrutto</code> contiene "Banane", il programma cercherà la corrispondente clausola <code>case "Banane"</code> ed eseguirà le istruzioni associate. Quando incontra il <code>break</code>, il porgramma esce dallo <code>switch</code> ed esegue l'istruzione successiva al blocco di <code>switch</code>. Se, invece, il <code>break</code> fosse stato omesso le istuzioni collegate con la clausola <code>case "Ciliege"</code> sarebbero state eseguite.</p> + +<pre class="brush: js notranslate">switch (tipidifrutta) { + case "Arance": + console.log("Le Arance sono a €0.59 il chilo."); + break; + case "Mele": + console.log("Le mele sono a €0.32 il chilo."); + break; + case "Banane": + console.log("Le Banane sono €0.48 il chilo."); + break; + case "Ciliege": + console.log("Le ciliege sono s €3.00 il chilo."); + break; + case "Mango": + console.log("Il Mango è è €0.56 il chilo."); + break; + case "Papaia": + console.log("Il Mango e la Papaia sono a €2.79 il chilo."); + break; + default: + console.log("Spiacenti, abbiano terminato " + tipidifrutta + "."); +} +console.log("C'è qualcos'altro che ti piace?");</pre> + +<h2 id="Costrutti_di_gestione_delle_Eccezioni">Costrutti di gestione delle Eccezioni</h2> + +<p>Si può sollevare/generare un'eccezione attraverso l'istruzione <code>throw</code> e si possono gestire usando il costrutto <code>try...catch</code>.</p> + +<ul> + <li><a href="#Istruzione_throw">istruzione throw</a></li> + <li><a href="#trt_catch">costrutto try...catch</a></li> +</ul> + +<h3 id="Tipi_di_eccezione">Tipi di eccezione</h3> + +<p>Quasi ogni tipo di oggetto può essere usato per sollevare/generare un'eccezione JavaScript. Tuttavia non tutti gli oggetti utili a questo scopo sono creati in modo eguale. Mentre è abbastanza comune usare numeri o stringhe per indicare un errore, è più efficace usare uno dei tipi di eccezione specificatamente creati a questo scopo:</p> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects#Fundamental_objects">eccezioni di ECMAScript</a></li> + <li>{{domxref("DOMException")}} e {{domxref("DOMError")}}</li> +</ul> + +<h3 id="Istruzione_throw_2"><code><a id="Istruzione_throw" name="Istruzione_throw"></a>Istruzione throw</code></h3> + +<p>Si usa l'istruzione <code>throw</code> per sollevare/generare un'eccezione. Quando si genera un'eccezione va specificata un'espressione che produca un valore da usarsi come eccezione:</p> + +<pre class="syntaxbox notranslate">throw espressione; +</pre> + +<p>Si può usare una qualsiasi espressione con l'istruzione <code>throw </code>e non solamente espressioni di un certo tipo. Il seguente pezzo di codice lo dimostra:</p> + +<pre class="brush: js notranslate">throw "Errore2"; // tipo String +throw 42; // tipo Number +throw true; // tipo Boolean +throw {toString: function() { return "Sono un oggetto!"; } }; +</pre> + +<div class="note"><strong>Note:</strong> Si può specificare un oggetto quando si genera un'eccezione. Si può poi far riferimento alle proprietà dell'oggetto nel blocco <code>catch</code>. Il seguente esempio crea un oggetto <code>myUserException</code> del tipo <code>UserException</code> e lo usa nell'istruzione throw.</div> + +<pre class="brush: js notranslate">// Crea un oggetto di tipo UserException +function UserException(messaggio) { + this.message = messaggio; + this.name = "UserException"; +} + +// Sovrascrive il metodo toString() affinché l'oggetto +// dia una descrizione di se stesso al momento di usarlo come stringa. +// (e.g. come messaggio nella console degli errori) +UserException.prototype.toString = function() { + return this.name + ': "' + this.message + '"'; +} + +// Crea un'istanza dell'oggetto e lo usa nell'istruzione throw +throw new UserException("Valore troppo alto!);</pre> + +<h3 id="Costrutto_try...catch_..._finally"><code><a id="trt_catch" name="trt_catch"></a>Costrutto try...catch (... finally)</code></h3> + +<p>Il costrutto <code>try...catch</code> racchiude un blocco di istruzioni, che potrebbero generare un'eccezione, e specifica uno o più azioni per gestire l'eccezione che potrebbe essere sollevata. Se viene sollevata un'eccezione il costrutto <code>try...catch</code> la cattura.</p> + +<p>Il costrutto <code>try...catch</code> è costituito da un blocco <code>try</code>, che contiene a sua volta uno o più istruzioni, e da al più (vedi nota più sotto) un blocco <code>catch</code>, contenenti istruzioni per gestire l'eccezione che eventulmente sarà sollevata all'interno del blocco <code>try</code>. Cioè si vorrebbe che il blocco <code>try</code> fosse eseguito senza errori, ma se non fosse possibile si vuole che l'esecuzione passi al blocco <code>catch</code>. Se un'istruzione contenuta nel blocco (o in una funzione chiamata all'interno del blocco) <code>try</code> genera un'eccezione, il controllo passa immediatamente al blocco <code>catch</code>. Se nessuna eccezione è sollevata all'interno del blocco <code>try</code>, il blocco <code>catch</code> è semplicemente ignorato. Il blocco <code>finally (</code>opzionale se c'è il blocco <code>catch</code>, ma necessario se manca quest'utimo) è eseguito subito dopo l'esecuzione dei blocchi <code>try<font face="Open Sans, Arial, sans-serif">/</font></code><code>catch</code>, ma prima di una qualsiasi istruzione che segua gli stessi <code>try...catch...finally</code>.</p> + +<div class="note"> +<p>In realtà il browser Firefox è in grado di suppostare i blocchi <code>catch</code> condizionati, oltre quello incondizionato, rendendo virtualmeente illimitata la definizione di più di un blocco <code>catch </code>per uno stesso blocco<code> try</code>. Tuttavia questa caratteristica non è standard e se ne scoraggia l'uso, si veda a proposito la referenza {{jsxref("Statements/try...catch", "try...catch")}}.</p> +</div> + +<p>L'esempio che segue usa il costrutto di <code>try...catch</code>. L'esempio chiama una funzione che ritorna il nome del mese estratto da un array grazie al parametro <code>mo</code> passato alla funzione. Se il valore passato non corrispondesse al numero di mese consentito (tra 1 e 12), un'eccezione verrebbe sollevata col valore <code>"numeroMeseNonValido"</code><code> </code>e il blocco <code>catch</code> assegnerebbe alla variabile <code>nomeDelMese</code> il vaore di "<code>sconoscuto"</code>.</p> + +<pre class="brush: js notranslate">function getNomeDelMese(mo) { + mo = mo - 1; // Sistema il numero del mese (1 = Gen, 12 = Dic) + var mesi = ["Gen","Feb","Mar","Apr","Mag","Giu","Lug", + "Ago","Set","Ott","Nov","Dic"]; + if (mesi[mo]) { + return mesi[mo]; + } else { + throw "numeroMeseNonValido"; //l'istruzione throw è usata qui + } +} + +try { // blocco try + nomeDelMese = getNomeDelMese(mese); // la funzione potrebbe sollevare un'eccezione +} +catch (eccezione) { + nomeDelMese = "sconosciuto"; + logDegliErrori(eccezione); // Passa l'eccezione a un gestore -> una propria funzione +</pre> + +<h4 id="Il_blocco_catch">Il blocco <code>catch</code></h4> + +<p>Si può usare il blocco <code>catch</code> per gestire le eccezioni che possono essere generate nel blocco <code>try</code>.</p> + +<pre class="syntaxbox notranslate">catch (catchID) { + // istruzioni +} +</pre> + +<p>Il blocco <code>catch</code> viene specificato un identificatore (<code>catchID</code> nel precedente esempio) che conterrà il valore specificato nell'istruzione <code>throw.</code> Si può usare questo identificatore per ottenere informazione ulteriori circa l'eccezione che è stata generata. JavaScript crea questo identificatore quando si entra nel blocco <code>catch.</code> L'identificatore è valido solo per la durata in esecuzione del blocco <code>catch </code>stesso, infatti usciti dal blocco <code>catch</code> termina la sua esistenza e non è più disponibile.</p> + +<p>Per esempio, il seguente codice solleva un'eccezione. Quando l'eccezione si realizza il controllo passa al blocco <code>catch</code>.</p> + +<pre class="brush: js notranslate">try { + throw "miaEccezione"; // genera una eccezione +} +catch (eccezione) { // "eccezione" è l'identificatore con conterrà + // l'oggetto usato nell'istruzione thrown, in questo caso la stringa "miaEccezione" + + // istruzioni che gestiscono l'eccezione + gestisciErrori(eccezione); // passa l'oggetto eccezione al gestore +} +</pre> + +<h4 id="Il_blocco_finally">Il blocco <code>finally</code></h4> + +<p>Il blocco <code>finally</code> contiene istruzioni che vengono eseguite subito dopo i blocchi <code>try</code> ed eventualmente <code>catch</code>, ma prima di ogni altra istruzione che segua il costrutto <code>try...catch...finally</code>. Il blocco <code>finally</code> è eseguito indipendentemente dal fatto che un'eccezione sia o meno generata. Se un'eccezione viene sollevata le istruzioni nel blocco <code>finally</code> saranno eseguite anche se il blocco <code>catch</code> corrispondente la gestisce.</p> + +<p>Si può usare il blocco <code>finally</code> per permettere agli script di terminare elegantemente in presenza di un'eccezione, ad esempio, se si deve liberare una risorsa che lo script trattiene. Il seguente esempio apre un file e lo usa (JavaScript lato server permette di accedere al file system). Se si solleva un'eccezione mentre il file è aperto il blocco <code>finally</code> chiude il file prima che lo script termini/fallisca.</p> + +<pre class="brush: js notranslate">apriMioFile(); +try { + ScriviMioFile(dati); //Qui si può verificare un'eccezione/errore +} catch(e) { + gestisciErrore(e); // Se avviene un errore lo si gestisce +} finally { + chiudiMioFile(); // chiude comunque la risorsa +} +</pre> + +<p>Se il blocco <code>finally</code> ritorna un valore questo diviene il valore ritornato dall'intero costrutto <code>try-catch-finally</code> a dispetto di qualsiasi valore eventualmente ritornato dai blocchi <code>try/c</code><code>atch</code>:</p> + +<pre class="brush: js notranslate">function f() { + try { + console.log(0); + throw "fasulla"; + } catch(e) { + console.log(1); + return true; // quasta istruzione di ritorno è sospesa + // finché il blocco finally non termina + console.log(2); // istruzione non raggiungibile + } finally { + console.log(3); + return false; // sovrascrive il precedente "return" + console.log(4); // istruzione non raggiungibile + } + // "return false" è eseguito ora + console.log(5); // istruzione non raggiungibile +} +f(); // nel log a console troviamo stampato: 0, 1, 3 e false +</pre> + +<p>La sovrascrittura dei valori di ritorno, da parte del blocco <code>finally,</code> colpisce anche le eccezioni generate e/o ri-generate dentro il blocco <code>catch</code>:</p> + +<pre class="brush: js notranslate">function f() { + try { + throw "fasulla"; + } catch(e) { + console.log('catturata l\'eccezione interna "fasulla"'); + throw e; // Quasta istruzione throw è sospesa + // finché il blocco finally non termina + } finally { + return false; // sovrascrive il precedente "throw" + } + // "return false" è eseguita ora +} + +try { + f(); +} catch(e) { + // Questo blocco non sarà mai raggiunto in quanto l'istruzione + // throw dentro il blocco catch (vedi più sopra) è sovrascritta + // dal return della clausola finally + console.log('catturata l\'eccezione esterna "fasulla"'); +} + +// OUTPUT +// catturata l'eccezione interna "fasulla"</pre> + +<h4 id="try...catch_innestati">try...catch innestati</h4> + +<p>Si possono annidare <code>try...catch.</code> Se un blocco <code>try...catch</code> interno non ha il blocco <code>catch </code>(in questo caso è d'obbligo che ci sia il blocco <code>finally</code>, anche vuoto, altrimenti si ha un errore sintattico), il blocco catch, del costrutto <code>try...catch</code> che lo racchiude, catturerà l'eventuale eccezione.</p> + +<pre class="brush: js notranslate">try{// try-catch esterno + try{ + // try-finally interno + throw "eccezione fasulla"; + } + // Manca il blocco catch, ma deve esserci il blocco finally + finally{ + // vuoto + } +} +catch(e){ + // Viene catturata l'eccezione sollevata dal blocco più interno + console.log("cattura esterna: " + e); +} + +//nella console sarà stampato: "cattura esterna: eccezione fasulla"</pre> + +<h3 id="Utilizzo_degli_oggetti_Error">Utilizzo degli oggetti <code>Error</code></h3> + +<p>A seconda del tipo di errore se si è in grado di usare le proprietà '<code>name</code>' e '<code>message</code>' si può avere un messaggio più ricco. '<code>name</code>' fornisce la classe generale dell'Error (e.g., 'DOMException' o 'Error'), mentre '<code>message</code>' generalmente fornisce un messaggio più conciso rispetto al convertire l'oggetto corrispondente all'errore in una stringa.</p> + +<p>Se si crea una propria eccezione affiché ci si avvantaggi di queste proprietà (come nel caso, ad esempio, del blocco <code>catch</code> che non discrimini tra l'oggetto rappresentante la propria eccezione e quello di sistema) si può usare il costruttore dell'oggetto Error:</p> + +<pre class="brush: js notranslate">function faiQualcosaSoggettaAdErrore () { + if (codiceCheProduceUnErrore()) { + throw (new Error('Il Messaggio')); + } else { + faiQualcosaPerOttenereUnEorreDiJavascript(); + } +} +.... +try { + faiQualcosaSoggettaAdErrore(); +} catch (e) { + console.log(e.name); // Scrive a console: 'Error' + console.log(e.message); // Scrive a console: 'Il Messaggio' o un messaggio di errore di JavaScript) +}</pre> + +<h2 id="I_Promise">I Promise</h2> + +<p>A partire da ECMAScript2015, JavaScript acquisisce il supporto agli oggetti {{jsxref("Promise")}} permettendo di controllare l'esecuzione di operazioni in modo differito e asincrono.</p> + +<p>Un <code>Promise</code> può essere in uno di questi stati:</p> + +<ul> + <li><em>pending</em>: stato iniziale, non <em>fulfilled</em> o <em>rejected</em>.</li> + <li><em>fulfilled</em>: operazione risucita.</li> + <li><em>rejected</em>: operazione fallita.</li> + <li><em>settled</em>: il Promise è alternativamente <em>fulfilled</em> o <em>rejected</em>, ma non <em>pending</em>.</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8633/promises.png" style="height: 297px; width: 801px;"></p> + +<h3 id="Caricare_unimmagine_con_XHR">Caricare un'immagine con XHR</h3> + +<p>Un esempio di semplice utilizzo di un <code>Promise</code> e <code><a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code> per caricare un'immagine è disponibile nel repository <a href="https://github.com/mdn/promises-test/blob/gh-pages/index.html">promise-test</a> di MDN GitHub. Si può anche<a href="http://mdn.github.io/promises-test/"> vedere in azione</a>. Ogni passo è commentato e ti permette di seguire il Promise e l'architettura XHR da vicino. Qui, invece, la versione non commentata che mostra l'utilizzo del <code>Promise</code> per darti un'idea del suo funzionamento:</p> + +<pre class="brush: js notranslate">function caricaImmagine(url) { + return new Promise(function(resolve, reject) { + var request = new XMLHttpRequest(); + request.open('GET', url); + request.responseType = 'blob'; + request.onload = function() { + if (request.status === 200) { + resolve(request.response); + } else { + reject(Error('L\'immagine non è stata caricata con successo; codice di errore:' + + request.statusText)); + } + }; + request.onerror = function() { + reject(Error('C\'è stato un errore di connessione')); + }; + request.send(); + }); +}</pre> + +<p>Per informazioni più dettagliate si veda la pagina di riferimento relativa al {{jsxref("Promise")}}.</p> + +<div>{{PreviousNext("Web/JavaScript/Guide/Grammar_and_types", "Web/JavaScript/Guide/Loops_and_iteration")}}</div> diff --git a/files/it/web/javascript/guida/dettagli_object_model/index.html b/files/it/web/javascript/guida/dettagli_object_model/index.html new file mode 100644 index 0000000000..1e2d4dc74f --- /dev/null +++ b/files/it/web/javascript/guida/dettagli_object_model/index.html @@ -0,0 +1,727 @@ +--- +title: Dettagli del modello a oggetti +slug: Web/JavaScript/Guida/Dettagli_Object_Model +tags: + - Guide + - Intermediate + - JavaScript +translation_of: Web/JavaScript/Guide/Details_of_the_Object_Model +--- +<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Working_with_Objects", "Web/JavaScript/Guide/Iterators_and_Generators")}}</div> + +<div class="note"> +<p>Il contenuto di questo articolo è in discussione. Lascia un feedback e aiutaci a rendere migliore questa pagina: {{bug(1201380)}}.</p> +</div> + +<p class="summary">JavaScript è un linguaggio ad oggetti basato su prototipi, piuttosto che sulle classi. A causa di questa diversa base, può essere meno evidente come JavaScript permette di creare gerarchie di oggetti e di avere l'ereditarietà delle proprietà e dei loro valori. Questo articolo cerca di chiarire questo aspetto.</p> + +<p>Questo capitolo presuppone una certa familiarità con JavaScript e con l'uso delle funzioni per la creazione di semplici oggetti.</p> + +<h2 id="Linguaggi_class-based_vs._linguaggi_prototype-based">Linguaggi class-based vs. linguaggi prototype-based</h2> + +<p>I linguaggi ad oggetti basati su classi, come Java e C++, si basano su due entità distinte: le classi (<em>classes</em>) e le istanze (<em>instances</em>).</p> + +<ul> + <li>Una <em>class</em>e definisce tutte le proprietà (considering methods and fields in Java, or members in C++, to be properties) che caratterizzano una determinata collezione di oggetti. Una classe è un'entità astratta, più che un membro del gruppo di oggetti che descrive. Per esempio, la classe <code>Employee</code> può rappresentare il gruppo di tutti i dipendenti.</li> + <li>Un'<em>istanza</em>, d'altra parte, è l'istanziazione di una classe; cioè uno dei suoi membri. Per esempio <code>Victoria</code> può essere un'istanza della classe <code>Employee</code>, che rappresenta un particolare individuo come un dipendente. Un'istanza ha esattamente le stesse proprietà della classe a cui appartiene (né più, né meno).</li> +</ul> + +<p>Un linguaggio basato su prototipi, come JavaScript, non fa questa distinzione: ha solo oggetti. Introduce la nozione di <em>oggetto prototipo</em> (<em>prototypical object</em>), un oggetto usato come modello da cui prendere le proprietà iniziali per un nuovo oggetto. Ogni oggetto può specificare le sue proprietà, anche quando viene creato o in fase di esecuzione.Inoltre, ogni oggetto può essere associato ad un altro oggetto come <em>prototipo</em>, consentendo al secondo oggetto di condividere le proprietà del primo.</p> + +<h3 id="Definizione_di_una_classe">Definizione di una classe</h3> + +<p>Nei linguaggi basati su classi, le classi vengono definite in <em>class definition</em> separate. In queste definizioni è possibile specificare metodi speciali, chiamari <em>costruttori</em> (<em>constructors</em>), per creare istanze della classe. Un costruttore può specificare i valori iniziali per le proprietà dell'istanza ed eseguire altre elaborazioni adatte al momento della creazione. Per creare le istanze di una classe si utilizza l'operatore <em>new</em> associato al metodo costruttore.</p> + +<p>JavaScript segue un modello simile, ma non prevede la definizione della classe separata dal costruttore. Invece, per creare oggetti con un particolare set di proprietà e valori si definisce una funzione costruttore. Ogni funzione JavaScript può essere usata come costruttore. Per creare un nuovo oggetto si utilizza l'operatore <em>new</em> associato a una funzione costruttore.</p> + +<h3 id="Sottoclassi_e_ereditarietà">Sottoclassi e ereditarietà</h3> + +<p>In un linguaggio basato su classi, si crea una gerarchia tra le classi attraverso le definizioni delle classi stesse. All'interno della definizione di una classe è possibile specificare che la nuova classe è una <em>sottoclasse</em> (<em>subclass</em>) di una classe esistente. La sottoclasse eredita tutte le proprietà della superclasse e può inoltre aggiungere nuove proprietà o modificare quelle ereditate. Per esempio, assumiamo che la classe <code>Employee</code> include solo le proprietà <code>name</code> <code>e dept</code>, <code>e Manager</code> è una sottoclasse di <code>Employee</code> che aggiunge la proprietà <code>reports</code>. In questo caso, un'istanza della classe <code>Manager</code> avrà tutte e tre le proprietà: <code>name</code>, <code>dept</code>, <code>e reports</code>.</p> + +<p>JavaScript implementa l'ereditarietà permettendo di associare un oggetto prototipo ad ogni funzione costruttore. Quindi, è possibile ricreare esattamente l'esempio visto in precedenza, ma usando una terminologia leggermente diversa. Innanzitutto si definisce la funzione costruttore <code>Employee</code>, specificando le proprietà <code>name</code> <code>e dept</code>. In seguito, si definisce la funzione costruttore <code>Manager</code>, chiamando il costruttore <code>Empl</code><code>oyee</code> e specificando la proprietà <code>reports</code>. Infine, si assegna a un nuovo oggetto derivato da <code>Employee.prototype</code> come il prototipo per la funzione costruttore <code>Manager</code>. Quando si crea un nuovo <code>Manager</code>, questo eredita le proprietà <code>name</code> e <code>dept</code> dall'oggetto <code>Employee</code>.</p> + +<h3 id="Aggiungere_e_rimuovere_proprietà">Aggiungere e rimuovere proprietà</h3> + +<p>Nei linguaggi basati su classi, una classe viene solitamente creata in fase di compilazione mentre le istanze possono essere create in fase di compilazione o in fase di esecuzione. Non è possibile cambiare il numero o il tipo di proprietà di una classe dopo che questa è stata definita. In JavaScript in fase di esecuzione si possono aggiungere o rimuovere proprietà a qualunque oggetto. Se si aggiunge una proprietà a un oggetto che è usato come prototipo per un gruppo di oggetti, anche gli oggetti del gruppo ereditano la nuova proprietà.</p> + +<h3 id="Riepilogo_delle_differenze">Riepilogo delle differenze</h3> + +<p>La tabella seguente fornisce un breve riepilogo di alcune di queste differenze. Il resto di questo capitolo descrive nel detteglio l'uso in JavaScript di costruttori e prototipi per creare una gerarchia di oggetti e lo confronta con la procedura che si userebbe in Java.</p> + +<table class="standard-table"> + <caption>Confronto tra il sistema di oggetti basato su classi (Java) e il sistema di oggetti basato su prototipi (JavaScript)</caption> + <thead> + <tr> + <th scope="col">Class-based (Java)</th> + <th scope="col">Prototype-based (JavaScript)</th> + </tr> + </thead> + <tbody> + <tr> + <td>Classi e istanze sono entità separate.</td> + <td>Tutti gli oggetti possono ereditare da un altro oggetto.</td> + </tr> + <tr> + <td>Definire una classe con una definizione; istanziare una classe con un metodo costruttore</td> + <td>Definire e creare una collezione di oggetti con una funzione costruttore.</td> + </tr> + <tr> + <td>Creare un singolo oggetto con l'operatore <code>new</code>.</td> + <td>Uguale.</td> + </tr> + <tr> + <td>Costruire una gerarchia di oggetti usando la definizione di classe per definire le sottoclassi di classi esistenti.</td> + <td>Costruire una gerarchia di oggetti assegnando un oggetto come prototipo associato a una funzione costruttore.</td> + </tr> + <tr> + <td>Ereditare le proprietà seguendo la catena delle classi.</td> + <td>Ereditare le proprietà seguendo la catena dei prototipi.</td> + </tr> + <tr> + <td>La definizione di classe specifica <em>tutte</em> le proprietà di tutte le istanze della classe. Non è possibile aggiungere proprietà dinamicamente durante l'esecuzione.</td> + <td>La funzione costruttore o il prototipo specificano un set <em>iniziale</em> di proprietà. <span class="st">È possibile aggiungere o rimuovere dinamicamente proprietà ai singoli oggetti o all'intero gruppo di oggetti.</span></td> + </tr> + </tbody> +</table> + +<h2 id="L'esempio_'dipendente'">L'esempio 'dipendente'</h2> + +<p>Il resto di questo capitolo usa la gerarchia dei dipendenti mostrata nella figura seguente.</p> + +<div style="display: table-row;"> +<div style="display: table-cell; width: 350px; text-align: center; vertical-align: middle; padding: 10px;"> +<p>Una semplice gerarchia con gli oggetti seguenti:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/3060/figure8.1.png"></p> +</div> + +<div style="display: table-cell; vertical-align: middle; padding: 10px;"> +<ul> + <li><code>Employee</code> ha le proprietà <code>name</code> (il cui valore di default è una stringa vuota) e <code>dept</code> (il cui valore di default è "general").</li> + <li><code>Manager</code> è basato su <code>Employee</code>. Aggiunge la proprietà <code>reports</code> (il cui valore di default è un array vuoto, destinato a contenere una serie di oggetti <code>Employee</code>).</li> + <li><code>WorkerBee</code> è anch'esso basato su <code>Employee</code>. Aggiunge la proprietà <code>projects</code> (il cui valore di default è un array vuoto, destinato a contenere una serie di stringhe).</li> + <li><code>SalesPerson</code> è basato su <code>WorkerBee</code>. Aggiunge la proprietà <code>quota</code> (il cui valore di default è 100). Sovrascrive inoltre la proprietà <code>dept</code> con il valore "sales", che indica che tutti i venditori si trovano nello stesso dipartimento.</li> + <li><code>Engineer</code> è basato su <code>WorkerBee</code>. Aggiunge la proprietà <code>machine</code> (il cui valore di default è una stringa vuota) e sovrascrive la proprietà <code>dept</code> con il valore "engineering".</li> +</ul> +</div> +</div> + +<h2 id="Creazione_della_gerarchia">Creazione della gerarchia</h2> + +<p>Ci sono diversi modi per definire una funzione costruttore appropriata per implementare la gerarchia dei dipendenti. Il modo scelto per definirli dipende molto da cosa si vuole riuscire a fare nella propria applicazione.</p> + +<p>Questa sezione mostra come usare definizioni molto semplici (e relativamente rigide) per dimostrare come far funzionare l'ereditarietà. In queste definizioni, quando si crea un oggetto non è possibile specificare il valore di nessuna proprietà. L'oggetto creato avrà semplicemente i valori di default, che potranno essere cambiati in un secondo momento.</p> + +<p>In una applicazione reale, probabilmente si vorranno definire dei costruttori che permettono di impostare i valori delle proprietà mentre si crea un oggetto (per maggiori informazioni si veda la sezione <a href="#Costruttori_più_flessibili" rel="internal">Costruttori più flessibili</a>). Per adesso, queste semplici definizioni dimostrano come le proprietà vengono ereditate.</p> + +<p>Le seguenti definizioni Java e JavaScript di <code>Employee</code> sono simili. L'unica differenza è che in Java si ha la necessità di specificare il tipo di ogni proprietà (questo è dovuto al fatto che Java è un<a href="https://it.wikipedia.org/wiki/Tipizzazione_forte"> linguaggio fortemente tipizzato</a> mentre JavaScript è un <a href="https://it.wikipedia.org/wiki/Tipizzazione_dinamica">linguaggio a tipizzazione dinamica</a>.</p> + +<div class="twocolumns"> +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">function Employee() { + this.name = ""; + this.dept = "general"; +} +</pre> + +<h4 id="Java">Java</h4> + +<pre class="brush: java">public class Employee { + public String name = ""; + public String dept = "general"; +} +</pre> +</div> + +<p>Le definizioni di <code>Manager</code> e <code>WorkerBee</code> mostrano la differenza nel modo di specificare l'oggetto seguente che si trova più in alto nella catena di ereditarietà. In JavaScript si aggiunge un'istanza prototipo come valore della proprietà <code>prototype</code> della funzione costrutore. È possibile farlo in qualsiasi momento dopo aver definito il costruttore. In Java, si specifica la superclasse all'interno della definizione della classe. Non è possibile cambiare la superclasse all'esterno della definizione.</p> + +<div class="twocolumns"> +<h4 id="JavaScript_2">JavaScript</h4> + +<pre class="brush: js">function Manager() { + Employee.call(this); + this.reports = []; +} +Manager.prototype = Object.create(Employee.prototype); + +function WorkerBee() { + Employee.call(this); + this.projects = []; +} +WorkerBee.prototype = Object.create(Employee.prototype); +</pre> + +<h4 id="Java_2">Java</h4> + +<pre class="brush: java">public class Manager extends Employee { + public Employee[] reports = new Employee[0]; +} + + + +public class WorkerBee extends Employee { + public String[] projects = new String[0]; +} + + +</pre> +</div> + +<p>Le definizioni di <code>Engineer</code> e <code>SalesPerson</code> creano oggetti che discendono da <code>WorkerBee</code>, e quindi da <code>Employee</code>. Un oggetto di questo tipo ha le proprietà di tutti gli oggetti che si trovano sopra di esso nella catena. Inoltre, queste definizioni sovrascrivono il valore ereditato delle proprietà <code>dept</code> con nuovi valori specifici per questi oggetti.</p> + +<div class="twocolumns"> +<h4 id="JavaScript_3">JavaScript</h4> + +<pre class="brush: js">function SalesPerson() { + WorkerBee.call(this); + this.dept = "sales"; + this.quota = 100; +} +SalesPerson.prototype = Object.create(WorkerBee.prototype); + +function Engineer() { + WorkerBee.call(this); + this.dept = "engineering"; + this.machine = ""; +} +Engineer.prototype = Object.create(WorkerBee.prototype); +</pre> + +<h4 id="Java_3">Java</h4> + +<pre class="brush: java">public class SalesPerson extends WorkerBee { + public String dept = "sales"; + public double quota = 100.0; +} + + +public class Engineer extends WorkerBee { + public String machine; + public String dept = "engineering"; + public String machine = ""; +} + +</pre> +</div> + +<p>Usando queste definizioni è possibile creare istanze di questi oggetti che ricevono i valori di default delle loro proprietà. La figura seguente illustra l'utilizzo di queste definizioni JavaScript per creare nuovi oggetti e mostra i valori delle diverse proprietà per questi nuovi oggetti.</p> + +<div class="note"> +<p><strong>Nota:</strong> Il termine <em>istanza</em> ha uno specifico significato tecnico nei linguaggi basati su classi. In questi linguaggi, un'istanza è una singola istanziazione di una classe ed è fondamentalmente differente dala classe. In JavaScript, "istanza" non ha questo significato tecnico perché JavaScript non ha questa differenza tra classi e istanze. Tuttavia, parlando di JavaScript, "istanza" può essere usato in modo informale per riferirsi a un oggetto creato usando una particolare funzione costruttore. Quindi, in questo esempio, è possibile dire che <code><code>jane</code></code> è un'istanza di <code><code>Engineer</code></code>. Allo stesso modo, sebbene i termini <em>genitore </em>(<em>parent</em>), <em>figlio </em>(<em>child</em>), <em>antenato </em>(<em>ancestor</em>) e <em>discendente</em> (<em><em>descendant</em></em>) non hanno un significato conenzionale in JavaScript, possono essere usati in modo informale per riferirsi a oggetti che si trovano più o meno in alto nella catena dei prototipi.</p> +</div> + +<h3 id="Creazione_di_oggetti_con_definizioni_semplici">Creazione di oggetti con definizioni semplici</h3> + +<div class="twocolumns"> +<h4 id="Gerarchia_degli_oggetti">Gerarchia degli oggetti</h4> + +<p>La gerarchia seguente è creata usando il codice sulla destra.</p> + +<p><img src="https://mdn.mozillademos.org/files/10412/=figure8.3.png"></p> + +<p> </p> + +<h4 id="singoli_oggetti">singoli oggetti</h4> + +<pre class="brush: js">var jim = new Employee; +// jim.name is '' +// jim.dept is 'general' + +var sally = new Manager; +// sally.name is '' +// sally.dept is 'general' +// sally.reports is [] + +var mark = new WorkerBee; +// mark.name is '' +// mark.dept is 'general' +// mark.projects is [] + +var fred = new SalesPerson; +// fred.name is '' +// fred.dept is 'sales' +// fred.projects is [] +// fred.quota is 100 + +var jane = new Engineer; +// jane.name is '' +// jane.dept is 'engineering' +// jane.projects is [] +// jane.machine is '' +</pre> +</div> + +<h2 id="Proprietà_degli_oggetti">Proprietà degli oggetti</h2> + +<p>Questa sezione spiega come gli oggetti ereditano le proprietà da altri oggetti presenti nella catena dei prototipi e cosa succede quando viene aggiunta una proprietà in fase di esecuzione.</p> + +<h3 id="Ereditare_le_proprietà">Ereditare le proprietà</h3> + +<p>Supponiamo di creare un nuovo oggetto <code>WorkerBee</code> chiamato <code>mark</code> con l'istruzione seguente:</p> + +<pre class="brush: js">var mark = new WorkerBee; +</pre> + +<p>Quando JavaScript vede l'operatore <code>new</code>, crea un nuovo oggeto generico e lo passa come valore della parola chiave <code>this</code> nella funzione costruttore <code>WorkerBee</code>. La funzione costruttore imposta esplicitamente il valore della proprietà <code>projects</code> e implicitamente il valore della proprietà interna <code>__proto__</code> uguale al valore <code>WorkerBee.prototype</code>. (Il nome di questa proprietà ha due underscores iniziali e due finali). La proprietà <code>__proto__</code> determina la catena di prototipi usata per restituire i valori delle proprietà. Una volta che queste proprietà sono impostate, JavaScript restituisce il nuovo oggetto e l'istruzione di assegnazione imposta la variabile <code>mark</code> per questo oggetto.</p> + +<p>Questo processo non inserisce esplicitamente valori nell'oggetto<code> mark</code> (valori <em>locali</em>) per le proprietà che l'oggetto eredita dalla catena dei prototipi. Quando si richiede un valore di una proprietà, JavaScript prima controlla se il valore è presente nell'oggetto. Se c'è, viene restituito quel valore. Se il valore non è presente a livello locale, JavaScript controlla la catena dei prototipi (sfruttando la proprietà <code>__proto__</code>). Se un oggetto nella catena dei prototipi ha un valore per la proprietà, viene restituito. Se non viene trovata la proprietà, JavaScript risponde che l'oggetto non ha la proprietà cercata. In questo modo, l'oggetto <code>mark</code> ha le seguenti propietà con i rispettivi valori:</p> + +<pre class="brush: js">mark.name = ""; +mark.dept = "general"; +mark.projects = []; +</pre> + +<p>L'oggetto <code>mark</code> eredita i valori per le proprietà <code>name</code> e <code>dept</code> dall'oggetto prototipo presente in <code>mark.__proto__</code>. Il costruttore <code>WorkerBee</code> assegna un valore locale per la proprietà <code>projects</code>. L'ereditarietà di proprietà e valori in JavaScript fnziona in questo modo. Alcune sottigliezze su questo processo sono trattate nella sezione <a href="#Ereditare_le_proprietà_(revisited)">Ereditare le proprietà (revisited)</a>.</p> + +<p>Poiché questi costruttori non permettono di fornire valori specifici per una singola istanza, questa informazione è generica. I valori delle proprietà sono quelli di default condivisi da tutti i nuovi oggetti creati da <code>WorkerBee</code>. <span class="st">È</span> oviamente possibile cambiare i valori di ognuna di queste proprietà. <span class="st">È</span> quindi possibile assegnare informazioni specifice per <code>mark</code> nel modo seguente:</p> + +<pre class="brush: js">mark.name = "Doe, Mark"; +mark.dept = "admin"; +mark.projects = ["navigator"];</pre> + +<h3 id="Aggiungere_proprietà">Aggiungere proprietà</h3> + +<p>In JavaScript, è possibile aggiungere proprietà a qualsiasi oggetto in fase di esecuzione. Non si è costretti ad usare solo le proprietà fornite dalla funzione costruttore. Per aggiungere una proprietà che sia specifica per un singolo oggetto, si deve assegnare il valore all'oggetto nel modo seguente::</p> + +<pre class="brush: js">mark.bonus = 3000; +</pre> + +<p>Ora, l'oggetto <code>mark</code>ha una proprietà <code>bonus</code>, ma nessun altro <code>WorkerBee</code> ha questa proprietà.</p> + +<p>Se si aggiunge una nuova proprietà a un oggetto che viene usato come prototipo per una funzione costruttore, la proprietà sarà aggiunta a tutti gli oggetti che ereditano le proprietà dal prototipo. Per esempio, è possibile aggiungere la proprietà <code>specialty</code> a tutti i dipendenti con l'istruzione seguente:</p> + +<pre class="brush: js">Employee.prototype.specialty = "none"; +</pre> + +<p>Non appena JavaScript esegue questa istruzione, anche l'oggetto <code>mark</code> avrà la proprietà <code>specialty</code> con il valore <code>"none"</code>. La figura seguente mostra cosa succede qunado questa proprietà viene aggiunta al prototipo <code>Employee</code> e in seguito la si sovrascrive per il prototipo <code>Engineer</code>.</p> + +<p><img alt="" class="internal" src="/@api/deki/files/4422/=figure8.4.png" style="height: 519px; width: 833px;"><br> + <small><strong>Aggiungere le proprietà</strong></small></p> + +<h2 id="Costruttori_più_flessibili">Costruttori più flessibili</h2> + +<p>Le funzioni costruttore mostrate finora non permettono di specificare i valori delle proprietà qunado viene creata un'istanza. Come in Java, è possibile fornire argomenti al costruttore per inizializzare i valori delle proprietà per le istanze. La figura seguente mostra un modo per farlo.</p> + +<p><img alt="" class="internal" id="figure8.5" src="/@api/deki/files/4423/=figure8.5.png" style="height: 481px; width: 1012px;"><br> + <small><strong>Specificare le proprietà in un costruttore, modo 1</strong></small></p> + +<p>La tabella seguente mostra le definizioni di questi oggetti in JavaScript e in Java.</p> + +<div class="twocolumns"> +<h4 id="JavaScript_4">JavaScript</h4> + +<h4 id="Java_4">Java</h4> +</div> + +<div class="twocolumns"> +<pre class="brush: js">function Employee (name, dept) { + this.name = name || ""; + this.dept = dept || "general"; +} +</pre> + +<p> </p> + +<p> </p> + +<p> </p> + +<p> </p> + +<pre class="brush: java">public class Employee { + public String name; + public String dept; + public Employee () { + this("", "general"); + } + public Employee (String name) { + this(name, "general"); + } + public Employee (String name, String dept) { + this.name = name; + this.dept = dept; + } +} +</pre> +</div> + +<div class="twocolumns"> +<pre class="brush: js">function WorkerBee (projs) { + + this.projects = projs || []; +} +WorkerBee.prototype = new Employee; +</pre> + +<p> </p> + +<p> </p> + +<pre class="brush: java">public class WorkerBee extends Employee { + public String[] projects; + public WorkerBee () { + this(new String[0]); + } + public WorkerBee (String[] projs) { + projects = projs; + } +} +</pre> +</div> + +<div class="twocolumns"> +<pre class="brush: js"> +function Engineer (mach) { + this.dept = "engineering"; + this.machine = mach || ""; +} +Engineer.prototype = new WorkerBee; +</pre> + +<p> </p> + +<p> </p> + +<pre class="brush: java">public class Engineer extends WorkerBee { + public String machine; + public Engineer () { + dept = "engineering"; + machine = ""; + } + public Engineer (String mach) { + dept = "engineering"; + machine = mach; + } +} +</pre> +</div> + +<p>Queste definizioni JavaScript usano un linguaggio speciale per impostare i valori di default:</p> + +<pre class="brush: js">this.name = name || ""; +</pre> + +<p>In JavaScript l'operatore logico OR (<code>||</code>) valuta il suo primo argomento. Se questa espressione può essere convertita a <code>true</code>, l'operatore restituisce il primo argomento. Altrimenti l'operatore restituisce il valore del secondo argomento. Quindi, questa linea di codice verifica se <code>name</code> ha un valore utile per la proprietà <code>name</code>. Se ce l'ha, imposta <code>this.name</code> a questo valore. Altrimenti, imposta <code>this.name</code> a una stringa vuota. Questo capitolo usa questo linguaggio per brevità, comunque può disorientare a prima vista.</p> + +<div class="note"> +<p><strong>Nota:</strong> Potrebbe non funzionare come atteso se la funzione costruttore è chiamata con un argomento che converte a <code>false</code> (come ad esempio <code>0</code> (zero) o una stringa vuota (<code><code>""</code></code>)). In questo caso verrà scelto il valore di default.</p> +</div> + +<p>Con queste definizioni, quando si crea un'istanza di un oggetto, è possibile specificare i valori per le proprietà definite localmente. <span class="st">Per creare un nuovo <code>Engineer</code></span> è possibile utilizzare l'espressione seguente:</p> + +<pre class="brush: js">var jane = new Engineer("belau"); +</pre> + +<p>Le proprietà di <code>Jane</code> sono ora:</p> + +<pre class="brush: js">jane.name == ""; +jane.dept == "engineering"; +jane.projects == []; +jane.machine == "belau" +</pre> + +<p><span class="st">È</span> da notare che con queste definizioni non è possibile specificare una valore iniziale per le proprietà ereditate, come ad esempio <code>name</code>. Se si desidera specificare un valore iniziale per una proprietà ereditata, in JavaScript è necessario aggiungere ulteriore codice alla funzione costruttore.</p> + +<p>Finora, la funzione costruttore ha creato un oggetto generico e poi ha specificato proprietà locali e valori per il nuovo oggetto. <span class="st">È</span> possibile fare in modo che il costruttore aggiunga più proprietà chiamando direttamente la funzione costruttore per un oggetto che si trova a un livello più alto nella catena dei prototipi. La figura seguente mostra queste nuove definizioni.</p> + +<p><img alt="" class="internal" src="/@api/deki/files/4430/=figure8.6.png" style="height: 534px; width: 1063px;"><br> + <small><strong>Specificare le proprietà in un costruttore, modo 2</strong></small></p> + +<p>Guardiamo nel dettaglio una di queste definizioni. Ecco la nuova definizione per il costruttore <code>Engineer</code>:</p> + +<pre class="brush: js">function Engineer (name, projs, mach) { + this.base = WorkerBee; + this.base(name, "engineering", projs); + this.machine = mach || ""; +} +</pre> + +<p>Supponiamo di creare un nuovo oggetto <code>Engineer</code> nel modo seguente:</p> + +<pre class="brush: js">var jane = new Engineer("Doe, Jane", ["navigator", "javascript"], "belau"); +</pre> + +<p>JavaScript segue questa procedura:</p> + +<ol> + <li>L'operatore <code>new</code> crea un oggetto generico e imposta il valore <code>Engineer.prototype</code> per la sua proprietà <code>__proto__</code>.</li> + <li>L'operatore <code>new</code> passa il nuovo oggetto come valore della parola chiave <code>this</code> nella funzione costruttore <code>Engineer</code>.</li> + <li>Il costruttore crea una nuova proprietà per l'oggetto chiamata <code>base</code> e assegna il valore del costruttore <code>WorkerBee</code> alla proprietà <code>base</code>. Questo rende il costruttore <code>WorkerBee</code> un metode dell'oggetto <code>Engineer</code>. Il nome della proprietà <code>base</code> non è peculiare. <span class="st">È</span> possibile usare qualsiasi nome per la proprietà; <code>base</code> è semplicemente evocativo dello scopo.</li> + <li>Il costruttore chiama il metodo <code>base</code>, passando come suoi argomenti due degli argomenti passati al costruttore (<code>"Doe, Jane"</code> e <code>["navigator", "javascript"]</code>) e anche la stringa <code>"engineering"</code>. Usando esplicitamente <code>"engineering"</code> nel costruttore indica che tutti gli oggetti <code>Engineer</code> hanno lo stesso valore per la proprietà <code>dept</code> ereditata, e questo valore sovrascrive il valore ereditato dal costruttore <code>Employee</code>.</li> + <li>Poiché <code>base</code> è un metodo di <code>Engineer</code>, all'interno della chiamata di <code>base</code>, JavaScript aggiunge la parola chiave <code>this</code> all'oggetto creato al passaggio 1. In questo modo, la funzione <code>WorkerBee</code> a sua volta passa gli argomenti <code>"Doe, Jane"</code> e <code>"engineering"</code> alla funzione costruttore <code>Employee</code>. Dopo l'esecuzione della funzione costruttore <code>Employee</code>, la funzione <code>WorkerBee</code> utilizza l'argomento rimanente per impostare la proprietà<code> projects</code>.</li> + <li>Dopo l'esecuzione del metodo <code>base</code>, il costruttore <code>Engineer</code> inizializza la proprietà <code>machine</code> dell'oggetto al valore <code>"belau"</code>.</li> + <li>Dopo l'esecuzione del costruttore, JavaScript assegna il nuovo oggetto alla variabile <code>jane</code>.</li> +</ol> + +<p>Avendo chiamato il costruttore <code>WorkerBee</code> dall'interno del costruttore <code>Engineer</code>, si potrebbe pensare di aver impostato in modo corretto l'ereditarietà per gli oggetti <code>Engineer</code>. Questo non è il caso. Chiamare il costruttore <code>WorkerBee</code> assicura che un oggetto <code>Engineer</code> venga creato con le proprietà specificate in tutte le funzioni costruttore che sono chiamate. Però, se in un secondo momento vengono aggiunte proprietà ai prototipi <code>Employee</code> o <code>WorkerBee</code>, queste proprietà non saranno ereditate dall'oggetto <code>Engineer</code>. Per esempio, se si considera il codice seguente:</p> + +<pre class="brush: js">function Engineer (name, projs, mach) { + this.base = WorkerBee; + this.base(name, "engineering", projs); + this.machine = mach || ""; +} +var jane = new Engineer("Doe, Jane", ["navigator", "javascript"], "belau"); +Employee.prototype.specialty = "none"; +</pre> + +<p>L'oggetto <code>jane</code> non eredita la proprietà <code>specialty</code>. <span class="short_text" id="result_box" lang="it"><span>È</span></span> comunque necessario impostare esplicitamente il prototipo per garantire l'ereditarietà dinamica. Se si considera invece l'esempio seguente:</p> + +<pre class="brush: js">function Engineer (name, projs, mach) { + this.base = WorkerBee; + this.base(name, "engineering", projs); + this.machine = mach || ""; +} +Engineer.prototype = new WorkerBee; +var jane = new Engineer("Doe, Jane", ["navigator", "javascript"], "belau"); +Employee.prototype.specialty = "none"; +</pre> + +<p>Adesso il valore per l'oggetto <code>jane</code> della proprietà <code>specialty</code> è "none".</p> + +<p>Un altro modo per ereditare le proprietà è l'utilizzo dei metodi <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call" title="en-US/docs/JavaScript/Reference/Global Objects/Function/call">call()</a></code> e <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply" title="en-US/docs/JavaScript/Reference/Global Objects/Function/apply"><code>apply()</code></a>. Gli esempi sottostanti si equivalgono:</p> + +<div class="twocolumns"> +<pre class="brush: js">function Engineer (name, projs, mach) { + this.base = WorkerBee; + this.base(name, "engineering", projs); + this.machine = mach || ""; +} +</pre> + +<pre class="brush: js">function Engineer (name, projs, mach) { + WorkerBee.call(this, name, "engineering", projs); + this.machine = mach || ""; +} +</pre> +</div> + +<p>L'utilizzo del metodo <code>call()</code> costituisce un'implementazione più pulita poiché la proprietà <code>base</code> non è più necessaria.</p> + +<h2 id="Ereditare_le_proprietà_(revisited)">Ereditare le proprietà (revisited)</h2> + +<p>Le sezioni precedenti descrivono come i costruttori e i prototipi consentono di avere gerarchia ed ereditarietà in JavaScript. Questa sezione espone alcune sottiglienzze che non erano necessariamente evidenti nelle discussioni precedenti.</p> + +<h3 id="Valori_locali_vs._valori_ereditati">Valori locali vs. valori ereditati</h3> + +<p>Quando si accede a una proprietà di un oggetto, JavaScript esegue i seguenti passaggi, come descritto in precedenza in questo capitolo:</p> + +<ol> + <li>Verifica se il valore è presente a livello locale. Se c'è, restituisce quel valore.</li> + <li>Se non è presente, verifica la catena dei prototipi (usando la proprietà <code>__proto__</code>).</li> + <li>Se un oggetto nella catena dei prototipi ha un valore per la proprietà specificata, restituisce quel valore.</li> + <li>Se la proprietà non viene trovata, l'oggetto non ha la proprietà.</li> +</ol> + +<p>Il risultato di questo processo dipende da come sono stati definiti gli elementi. L'esempio iniziale aveva queste definizioni:</p> + +<pre class="brush: js">function Employee () { + this.name = ""; + this.dept = "general"; +} + +function WorkerBee () { + this.projects = []; +} +WorkerBee.prototype = new Employee; +</pre> + +<p>Con queste definizioni, si supponga di creare <code>amy</code> come un'istanza di <code>WorkerBee</code> con la seguente istruzione:</p> + +<pre class="brush: js">var amy = new WorkerBee; +</pre> + +<p>L'oggetto <code>amy</code> ha una proprietà locale, <code>projects</code>. I valori per le proprietà <code>name</code> e <code>dept</code> non sono specifici per <code>amy</code> e quindi derivano dalla proprietà <code>__proto__</code> dell'oggetto <code>amy</code>. Quindi, <code>amy</code> ha i seguenti valori:</p> + +<pre class="brush: js">amy.name == ""; +amy.dept == "general"; +amy.projects == []; +</pre> + +<p>Ora si supponga di cambiare il valore della proprietà <code>name</code> nel prototipo associato con <code>Employee</code>:</p> + +<pre class="brush: js">Employee.prototype.name = "Unknown" +</pre> + +<p>Ci si potrebbe aspettare che il nuovo valore si propaghi a tutte le istanze di <code>Employee</code>. Invece, non lo fa.</p> + +<p>Quando si crea <em>qualsiasi </em>istanza dell'oggetto <code>Employee</code>, questa istanza riceve un <strong>valore locale</strong> per la proprietà <code>name</code> (la stringa vuota). Questo significa che quando si imposta il prototipo <code>WorkerBee</code> creando un nuovo oggetto <code>Employee</code>, <code>WorkerBee.prototype</code> avrà un valore locale per la proprietà <code>name</code>. Quindi, quando JavaScript legge la proprietà <code>name</code> dell'oggetto <code>amy</code> (istanza di <code>WorkerBee</code>), trova in <code>WorkerBee.prototype </code>il valore locale di questa proprietà. Pertanto non continua a cercare nella catena salendo a <code>Employee.prototype</code>.</p> + +<p>Se si vuole cambiare il valore di una proprietà di un oggetto in fase di esecuzione e si vuole che il nuovo valore venga ereditato da tutti i discendenti dell'oggetto, non è possibile definire la proprietà all'interno della funzione costruttore dell'oggetto. Invece, si aggiunge la proprietà al prototipo associato al costruttore. Per esempio, assumiamo di cambiare il codice precedente con quello che segue:</p> + +<pre class="brush: js">function Employee () { + this.dept = "general"; // Note that this.name (a local variable) does not appear here +} +Employee.prototype.name = ""; // A single copy + +function WorkerBee () { + this.projects = []; +} +WorkerBee.prototype = new Employee; + +var amy = new WorkerBee; + +Employee.prototype.name = "Unknown"; +</pre> + +<p>In questo caso, il valore della proprietà <code>name</code> di <code>amy</code> diventa "Unknown".</p> + +<p>Come mostra questo esempio, se si vogliono avere i valori di default per le proprietà dell'oggetto e si vuole avere la possibilità di cambiare questi valori in fase di esecuzione, si devono impostare le proprietà nel prototipo del costruttore, e non direttamente nella funzione costruttore.</p> + +<h3 id="Determinazione_delle_relazioni_tra_istanze">Determinazione delle relazioni tra istanze</h3> + +<p>In JavaScript la ricerca delle proprietà (<em>property lookup</em>) controlla prima tra le proprietà specifiche dell'oggetto e, se il nome della proprietà non viene trovato, controlla la proprietà speciale <code>__proto__</code>. Il processo, chiamato "ricerca nella catena dei prototipi" (<em>lookup in the prototype chain</em>), continua ricorsivamente .</p> + +<p>Quando un oggetto viene costruito, la proprietà speciale <code>__proto__</code> viene impostata al valore della proprietà <code>prototype</code> del costruttore. L'espressione <code>new Foo()</code> crea un oggetto con <code>__proto__ == <code class="moz-txt-verticalline">Foo.prototype</code></code>. Di conseguenza, le modifiche alle proprietà di <code class="moz-txt-verticalline">Foo.prototype</code> alterano la ricerca delle proprietà per tutti gli oggetti che sono stati creati con <code>new Foo()</code>.</p> + +<p>Ogni oggetto ha una proprietà <code>__proto__</code> (ad eccezione di <code>Object</code>); ogni funzione ha una proprietà <code>prototype</code>. Quindi gli oggetti possono essere correlati ad altri oggetti attraverso una 'ereditarietà prototipale' (<em>prototypal inheritance</em>). <span class="st">È</span> possibile verificare l'ereditarietà confrontando la proprietà <code>__proto__</code> di un oggetto con l'oggetto <code>prototype</code> di una funzione. JavaScript fornisce una scorciatoia: l'operatore <code>instanceof</code> confronta un oggetto con una funzione e restituisce <code>true</code> se l'oggetto eredita dal prototipo della funzione. Per esempio,</p> + +<pre class="brush: js">var f = new Foo(); +var isTrue = (f instanceof Foo);</pre> + +<p>Per un esempio più dettagliato, supponiamo di avere lo stesso gruppo di definizioni visto nella sezione For a more detailed example, suppose you have the same set of definitions shown in <a href="#Ereditare_le_proprietà">Ereditare le proprietà</a>. Creiamo un oggetto <code>Engineer</code> nel modo seguente:</p> + +<pre class="brush: js">var chris = new Engineer("Pigman, Chris", ["jsd"], "fiji"); +</pre> + +<p>Per questo oggetto, tutti gli enunciati seguenti sono veri:</p> + +<pre class="brush: js">chris.__proto__ == Engineer.prototype; +chris.__proto__.__proto__ == WorkerBee.prototype; +chris.__proto__.__proto__.__proto__ == Employee.prototype; +chris.__proto__.__proto__.__proto__.__proto__ == Object.prototype; +chris.__proto__.__proto__.__proto__.__proto__.__proto__ == null; +</pre> + +<p>Dato ciò, è possibile scrivere una funzione <code>instanceOf</code> come segue:</p> + +<pre class="brush: js">function instanceOf(object, constructor) { + object = object.__proto__; + while (object != null) { + if (object == constructor.prototype) + return true; + if (typeof object == 'xml') { + return constructor.prototype == XML.prototype; + } + object = object.__proto__; + } + return false; +} +</pre> + +<div class="note"> +<p><strong>Nota:</strong> L'implementazione vista sopra verifica se l'oggetto è di tipo "xml" per ovviare a una stranezza nel modo in cui gli oggetti XML sono rappresentati nelle versioni recenti di JavaScript. Per i dettagli essenziali si veda il {{ bug(634150) }}.</p> +</div> + +<p>Se si utilizza la funzione <code>instanceOf</code> definita in precedenza, queste espressioni sono vere:</p> + +<pre class="brush: js">instanceOf (chris, Engineer) +instanceOf (chris, WorkerBee) +instanceOf (chris, Employee) +instanceOf (chris, Object) +</pre> + +<p>Ma l'espressione seguente è falsa:</p> + +<pre class="brush: js">instanceOf (chris, SalesPerson) +</pre> + +<h3 id="Informazioni_globali_nei_costruttori">Informazioni globali nei costruttori</h3> + +<p>Quando vengono creati dei costruttori, è necessario essere scrupolosi se si impostano informazioni globali all'interno del costruttore. Per esempio, se si vuole che un ID univoco venga assegnato automaticamente a ogni nuovo <code>Employee </code>si potrebbe usare la definizione seguente:</p> + +<pre class="brush: js">var idCounter = 1; + +function Employee (name, dept) { + this.name = name || ""; + this.dept = dept || "general"; + this.id = idCounter++; +} +</pre> + +<p>Con questa definizione, quando viene creato un nuovo <code>Employee</code>, il costruttore assegna l'ID seguente e incrementa il contatore globale (<code>idCounter</code>). Così, se l'istruzione successiva è la seguente, l'ID di <code>victoria </code>sarà 1, l'ID di <code>harry </code>sarà 2:</p> + +<pre class="brush: js">var victoria = new Employee("Pigbert, Victoria", "pubs") +var harry = new Employee("Tschopik, Harry", "sales") +</pre> + +<p>Questa a prima vista potrebbe sembrare la procedura corretta. Tuttavia, il contatore globale <code>idCounter</code> viene incrementato ogni volta che viene creato un oggetto <code>Employee</code>, per qualsiasi scopo. Se viene creata l'intera gerarchia di oggetti <code>Employee</code> mostrata in questo capitolo, il costruttore <code>Employee</code> viene chiamato ogni volta che si definisce un prototipo. Supponiamo di avere il codice seguente:</p> + +<pre class="brush: js">var idCounter = 1; + +function Employee (name, dept) { + this.name = name || ""; + this.dept = dept || "general"; + this.id = idCounter++; +} + +function Manager (name, dept, reports) {...} +Manager.prototype = new Employee; + +function WorkerBee (name, dept, projs) {...} +WorkerBee.prototype = new Employee; + +function Engineer (name, projs, mach) {...} +Engineer.prototype = new WorkerBee; + +function SalesPerson (name, projs, quota) {...} +SalesPerson.prototype = new WorkerBee; + +var mac = new Engineer("Wood, Mac"); +</pre> + +<p>Si assuma inoltre che le definizioni omesse abbiano la proprietà <code>base</code> e chiamino il costruttore che si trova al livello superiore nella catena dei prototipi. In questo caso, nel momento in cui viene creato l'oggetto <code>mac</code>, il valore di <code>mac.id</code> sarà 5.</p> + +<p>A seconda dell'applicazione, può essere più o meno importante che il valore del contatore sia stato incrementato queste volte aggiuntive. Se interessa il valore esatto di questo contatore, una soluzione possibile può prevedere l'uso del costruttore seguente al posto di quello visto in precedenza:</p> + +<pre class="brush: js">function Employee (name, dept) { + this.name = name || ""; + this.dept = dept || "general"; + if (name) + this.id = idCounter++; +} +</pre> + +<p>Quando viene creata un'istanza di <code>Employee</code> che deve essere usata come prototipo, non vengono forniti argomenti al costruttore. Usando questa definizione del costruttore, quando non vengono inseriti argomenti, il costruttore non assegna un valore all'ID e non aggiorna il contatore. Quindi, affinché a un oggetto <code>Employee</code> venga assegnato un ID, è necesario specificare un nome per il dipendente. In questo esempio, l'ID di <code>mac</code> sarà 1.</p> + +<h3 id="JavaScript_non_supporta_l'ereditarietà_multipla">JavaScript non supporta l'ereditarietà multipla</h3> + +<p>Alcuni linguaggi ad oggetti ammettono l'ereditarietà multipla. Ossia, un oggetto può ereditare proprietà e valori da oggetti genitori non correlati. Javascript non supporta l'ereditarietà multipla.</p> + +<p>L'eredità dei valori delle proprietà si ha in fase di esecuzione quando JavaScript cerca attraverso la catena dei prototipo di un oggetto per trovare un valore. Poiché un oggetto ha un unico prototipo associato, JavaScript non può ereditare dinamicamente da più di una catena di prototipi.</p> + +<p>In JavaScript, è possibile che una funzione costruttore chiami al suo interno diverse funzioni costruttore. Questo dà l'illusione dell'ereditarietà multipla. Per esempio consideriamo le istruzioni seguenti:</p> + +<pre class="brush: js">function Hobbyist (hobby) { + this.hobby = hobby || "scuba"; +} + +function Engineer (name, projs, mach, hobby) { + this.base1 = WorkerBee; + this.base1(name, "engineering", projs); + this.base2 = Hobbyist; + this.base2(hobby); + this.machine = mach || ""; +} +Engineer.prototype = new WorkerBee; + +var dennis = new Engineer("Doe, Dennis", ["collabra"], "hugo") +</pre> + +<p>Assumiamo inoltre che la definizione di <code>WorkerBee</code> sia quella usata in precedenza in questo capitolo. In questo caso, l'oggetto <code>dennis</code> avrà queste proprietà:</p> + +<pre class="brush: js">dennis.name == "Doe, Dennis" +dennis.dept == "engineering" +dennis.projects == ["collabra"] +dennis.machine == "hugo" +dennis.hobby == "scuba" +</pre> + +<p>Quindi <code>dennis</code> riceve la proprietà <code>hobby</code> dal costruttore <code>Hobbyist</code>. Però, se in seguito si aggiunge una proprietà al prototipo del costruttore <code>Hobbyist</code>:</p> + +<pre class="brush: js">Hobbyist.prototype.equipment = ["mask", "fins", "regulator", "bcd"] +</pre> + +<p>L'oggetto <code>dennis</code> non erediterà questa nuova proprietà.</p> + +<div>{{PreviousNext("Web/JavaScript/Guide/Working_with_Objects", "Web/JavaScript/Guide/Iterators_and_Generators")}}</div> diff --git a/files/it/web/javascript/guida/espressioni_regolari/index.html b/files/it/web/javascript/guida/espressioni_regolari/index.html new file mode 100644 index 0000000000..f876045948 --- /dev/null +++ b/files/it/web/javascript/guida/espressioni_regolari/index.html @@ -0,0 +1,647 @@ +--- +title: Espressioni regolari +slug: Web/JavaScript/Guida/Espressioni_Regolari +translation_of: Web/JavaScript/Guide/Regular_Expressions +--- +<div>{{jsSidebar("Guida JavaScript")}} {{PreviousNext("Web/JavaScript/Guide/Text_formatting", "Web/JavaScript/Guide/Indexed_collections")}}</div> + +<p class="summary">Le espressioni regolari sono schemi usati per confrontare combinazioni di caratteri nelle stringhe. In JavaScript, le espressioni regolari sono anche oggetti. Questi pattern sono usati con i metodi {{jsxref("RegExp.exec", "exec()")}} e {{jsxref("RegExp.test", "test()")}} della classe {{jsxref("RegExp")}}, e con i metodi {{jsxref("String.match", "match()")}}, {{jsxref("String.matchAll", "matchAll()")}}, {{jsxref("String.replace", "replace()")}}, {{jsxref("String.search", "search()")}}, e {{jsxref("String.split", "split()")}} della classe {{jsxref("String")}}. Questo capitolo descrive le espressioni regolari in JavaScript.</p> + +<h2 id="Creazione_di_unespressione_regolare">Creazione di un'espressione regolare</h2> + +<p>Puoi creare un'espressione regolare in uno dei seguenti modi:</p> + +<ul> + <li> + <p>Usando un'espressione regolare letterale, che consiste in uno schema racchiuso tra slash, come segue:</p> + + <pre class="brush: js">var re = /ab+c/; +</pre> + + <p>Le Espressioni Regolari letterali forniscono la compilazione dell'espressione regolare quando lo script è caricato. Se l'espressione regolare rimane costante, usare questo modo può migliorare le prestazioni.</p> + </li> + <li> + <p>O chiamando il costruttore dell'oggetto {{jsxref("RegExp")}} object, come segue:</p> + + <pre class="brush: js">var re = new RegExp("ab+c"); +</pre> + + <p>Usando il costruttore avviene una compilazione runtime dell'espressione regolare. Usa il costruttore quando sai che lo schema dell'espressione regolare cambierà, o non sai lo schema a priori ma lo devi ricavare da un'altra risorsa, come un input dell'utente.</p> + </li> +</ul> + +<h2 id="Scrivere_uno_schema_per_espressioni_regolari">Scrivere uno schema per espressioni regolari</h2> + +<p>Uno schema di espressione regolare è composto da caratteri semplici, come <code>/abc/</code>, o da una combinazione di caratteri semplici e speciali, come <code>/ab*c/</code> o <code>/Chapter (\d+)\.\d*/</code>. L'ultimo esempio include parentesi che sono usate come un dispositivo di memoria. Il confronto fatto con queste parti dello schema è ricordato per usi futuri, come descritto in {{ web.link("#Using_parenthesized_substring_matches", "Using parenthesized substring matches") }}.</p> + +<div class="blockIndicator note"> +<p><strong>Nota:</strong> Se hai già familiarità con la struttura di un'espressione regolare, potresti anche leggere <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Cheatsheet">il cheatsheet</a> per una rapida ricerca di un modello/costrutto specifico</p> +</div> + +<h3 id="Usare_modelli_semplici">Usare modelli semplici</h3> + +<p><span class="tlid-translation translation" lang="it"><span title="">I modelli semplici sono costituiti da carattrei per i quali si desidera trovare una corrispondenza diretta.</span> <span title="">Ad esempio, il modello</span></span> <code>/abc/</code> <span class="tlid-translation translation" lang="it"><span title=""> corrisponde solo quando esattamente i caratteri </span></span> <code>"abc"</code> <span class="tlid-translation translation" lang="it"><span title=""> si presentano insieme e in quell'ordine.</span> <span title="">Una tale corrispondenza avrebbe successo nelle stringhe </span></span> <code>"Ciao, conosci il tuo abc?"</code> e <span class="tlid-translation translation" lang="it"> <span title=""><code>"Gli ultimi progetti di aeroplani si sono evoluti da slabcraft"</code>.</span> <span title="">In entrambi i casi la corrispondenza con la sottostringa <code>"abc"</code> avviene.</span> <span title="">Non c'è corrispondenza nella stringa <code>"Grab crab"</code> perché invece di contenere l'esatta sottostringa <code>"abc"</code> coniente la sottostringa <code>"ab c".</code></span></span></p> + +<h3 id="Usare_caratteri_speciali">Usare caratteri speciali</h3> + +<p><span class="tlid-translation translation" lang="it"><span title="">Quando la ricerca di una corrispondenza richiede qualcosa di più di una corrispondenza diretta, come la ricerca di una o più <em>b</em> o la ricerca di spazi bianchi, il modello include caratteri speciali.</span></span> Ad esempio, per abbinare una singola <code>"a" </code>seguita da zero o più <code>"b"</code> seguita da <code>"c"</code>, dovresti usare il modello <code>/ab*c/</code>: il <code>*</code> dopo <code>"b"</code> significa "0 o più occorrenze dell'elemento precedente". Nella stringa <code>"cbbabbbbcdebc"</code>, questo modello corrisponderà alla sottostringa <code>"abbbbc"</code>.<br> + <br> + <span class="tlid-translation translation" lang="it"><span title="">La tabella seguente fornisce un elenco completo e una descrizione dei caratteri speciali che possono essere utilizzati nelle espressioni regolari.</span></span></p> + +<table class="standard-table"> + <caption>Caratteri speciali nelle espressioni regolari</caption> + <thead> + <tr> + <th scope="col">Carattere</th> + <th scope="col">Significato/Utilizzo</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="#special-backslash" id="special-backslash" name="special-backslash"><code>\</code></a></td> + <td> + <p>Matches according to the following rules:<br> + <br> + A backslash that precedes a non-special character indicates that the next character is special and is not to be interpreted literally. For example, a '<code>b</code>' without a preceding '\' generally matches lowercase 'b's wherever they occur. But a '<code>\b</code>' by itself doesn't match any character; it forms the special <a href="#special-word-boundary" title="#special-word-boundary">word boundary character</a>.<br> + <br> + A backslash that precedes a special character indicates that the next character is not special and should be interpreted literally. For example, the pattern <code>/a*/</code> relies on the special character '<code>*</code>' to match 0 or more a's. By contrast, the pattern <code>/a\*/</code> removes the specialness of the '<code>*</code>' to enable matches with strings like 'a*'.<br> + <br> + Do not forget to escape \ itself while using the RegExp("pattern") notation because \ is also an escape character in strings.</p> + </td> + </tr> + <tr> + <td><a href="#special-caret" id="special-caret" name="special-caret"><code>^</code></a></td> + <td>Matches beginning of input. If the multiline flag is set to true, also matches immediately after a line break character.<br> + <br> + For example, <code>/^A/</code> does not match the 'A' in "an A", but does match the 'A' in "An E".<br> + <br> + The '<code>^</code>' has a different meaning when it appears as the first character in a character set pattern. See <a href="#special-negated-character-set" title="#special-negated-character-set">complemented character sets</a> for details and an example.</td> + </tr> + <tr> + <td><a href="#special-dollar" id="special-dollar" name="special-dollar"><code>$</code></a></td> + <td> + <p>Matches end of input. If the multiline flag is set to true, also matches immediately before a line break character.</p> + + <p>For example, <code>/t$/</code> does not match the 't' in "eater", but does match it in "eat".</p> + </td> + </tr> + <tr> + <td><a href="#special-asterisk" id="special-asterisk" name="special-asterisk"><code>*</code></a></td> + <td> + <p>Matches the preceding expression 0 or more times. Equivalent to {0,}.</p> + + <p>For example, <code>/bo*/</code> matches 'boooo' in "A ghost booooed" and 'b' in "A bird warbled", but nothing in "A goat grunted".</p> + </td> + </tr> + <tr> + <td><a href="#special-plus" id="special-plus" name="special-plus"><code>+</code></a></td> + <td> + <p>Matches the preceding expression 1 or more times. Equivalent to <code>{1,}</code>.</p> + + <p>For example, <code>/a+/</code> matches the 'a' in "candy" and all the a's in "caaaaaaandy", but nothing in "cndy".</p> + </td> + </tr> + <tr> + <td><a href="#special-questionmark" id="special-questionmark" name="special-questionmark"><code>?</code></a></td> + <td>Matches the preceding expression 0 or 1 time. Equivalent to <code>{0,1}</code>.<br> + <br> + For example, <code>/e?le?/</code> matches the 'el' in "angel" and the 'le' in "angle" and also the 'l' in "oslo".<br> + <br> + If used immediately after any of the quantifiers *, +, ?, or {}, makes the quantifier non-greedy (matching the fewest possible characters), as opposed to the default, which is greedy (matching as many characters as possible). For example, applying <code>/\d+/</code> to "123abc" matches "123". But applying <code>/\d+?/</code> to that same string matches only the "1".<br> + <br> + Also used in lookahead assertions, as described in the <code>x(?=y)</code> and <code>x(?!y)</code> entries of this table.<br> + </td> + </tr> + <tr> + <td><a href="#special-dot" id="special-dot" name="special-dot"><code>.</code></a></td> + <td> + <p>(The decimal point) matches any single character except the newline character.</p> + + <p>For example, <code>/.n/</code> matches 'an' and 'on' in "nay, an apple is on the tree", but not 'nay'.</p> + </td> + </tr> + <tr> + <td><a href="#special-capturing-parentheses" id="special-capturing-parentheses" name="special-capturing-parentheses"><code>(x)</code></a></td> + <td> + <p>Matches 'x' and remembers the match, as the following example shows. The parentheses are called <em>capturing parentheses</em>.<br> + <br> + The '<code>(foo)</code>' and '<code>(bar)</code>' in the pattern <code>/(foo) (bar) \1 \2/</code> match and remember the first two words in the string "foo bar foo bar". The <code>\1 </code>and <code>\2</code> in the pattern match the string's last two words. Note that <code>\1, \2, \n</code> are used in the matching part of the regex. In the replacement part of a regex the syntax <code>$1, $2, $n</code> must be used, e.g.: <code>'bar foo'.replace( /(...) (...)/, '$2 $1' )</code>.</p> + </td> + </tr> + <tr> + <td><a href="#special-non-capturing-parentheses" id="special-non-capturing-parentheses" name="special-non-capturing-parentheses"><code>(?:x)</code></a></td> + <td>Matches 'x' but does not remember the match. The parentheses are called <em>non-capturing parentheses</em>, and let you define subexpressions for regular expression operators to work with. Consider the sample expression <code>/(?:foo){1,2}/</code>. If the expression was <code>/foo{1,2}/</code>, the <code>{1,2}</code> characters would apply only to the last 'o' in 'foo'. With the non-capturing parentheses, the <code>{1,2}</code> applies to the entire word 'foo'.</td> + </tr> + <tr> + <td><a href="#special-lookahead" id="special-lookahead" name="special-lookahead"><code>x(?=y)</code></a></td> + <td> + <p>Matches 'x' only if 'x' is followed by 'y'. This is called a lookahead.</p> + + <p>For example, <code>/Jack(?=Sprat)/</code> matches 'Jack' only if it is followed by 'Sprat'. <code>/Jack(?=Sprat|Frost)/</code> matches 'Jack' only if it is followed by 'Sprat' or 'Frost'. However, neither 'Sprat' nor 'Frost' is part of the match results.</p> + </td> + </tr> + <tr> + <td><a href="#special-negated-look-ahead" id="special-negated-look-ahead" name="special-negated-look-ahead"><code>x(?!y)</code></a></td> + <td> + <p>Matches 'x' only if 'x' is not followed by 'y'. This is called a negated lookahead.</p> + + <p>For example, <code>/\d+(?!\.)/</code> matches a number only if it is not followed by a decimal point. The regular expression <code>/\d+(?!\.)/.exec("3.141")</code> matches '141' but not '3.141'.</p> + </td> + </tr> + <tr> + <td><a href="#special-or" id="special-or" name="special-or"><code>x|y</code></a></td> + <td> + <p>Matches either 'x' or 'y'.</p> + + <p>For example, <code>/green|red/</code> matches 'green' in "green apple" and 'red' in "red apple."</p> + </td> + </tr> + <tr> + <td><a href="#special-quantifier" id="special-quantifier" name="special-quantifier"><code>{n}</code></a></td> + <td>Matches exactly n occurrences of the preceding expression. N must be a positive integer.<br> + <br> + For example, <code>/a{2}/</code> doesn't match the 'a' in "candy," but it does match all of the a's in "caandy," and the first two a's in "caaandy."</td> + </tr> + <tr> + <td><a href="#special-quantifier-range" id="special-quantifier-range" name="special-quantifier-range"><code>{n,m}</code></a></td> + <td> + <p>Where <code>n</code> and <code>m</code> are positive integers and <code>n <= m</code>. Matches at least <code>n</code> and at most <code>m</code> occurrences of the preceding expression. When <code>m</code> is omitted, it's treated as ∞.</p> + + <p>For example, <code>/a{1,3}/</code> matches nothing in "cndy", the 'a' in "candy," the first two a's in "caandy," and the first three a's in "caaaaaaandy". Notice that when matching "caaaaaaandy", the match is "aaa", even though the original string had more a's in it.</p> + </td> + </tr> + <tr> + <td><a href="#special-character-set" id="special-character-set" name="special-character-set"><code>[xyz]</code></a></td> + <td>Character set. This pattern type matches any one of the characters in the brackets, including <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Values,_variables,_and_literals#Unicode_escape_sequences" title="https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Values,_variables,_and_literals#Unicode_escape_sequences">escape sequences</a>. Special characters like the dot(<code>.</code>) and asterisk (<code>*</code>) are not special inside a character set, so they don't need to be escaped. You can specify a range of characters by using a hyphen, as the following examples illustrate.<br> + <br> + The pattern<code> [a-d]</code>, which performs the same match as <code>[abcd]</code>, matches the 'b' in "brisket" and the 'c' in "city". The patterns <code>/[a-z.]+/ </code>and <code>/[\w.]+/</code> match the entire string "test.i.ng".</td> + </tr> + <tr> + <td><a href="#special-negated-character-set" id="special-negated-character-set" name="special-negated-character-set"><code>[^xyz]</code></a></td> + <td> + <p>A negated or complemented character set. That is, it matches anything that is not enclosed in the brackets. You can specify a range of characters by using a hyphen. Everything that works in the normal character set also works here.</p> + + <p>For example, <code>[^abc]</code> is the same as <code>[^a-c]</code>. They initially match 'r' in "brisket" and 'h' in "chop."</p> + </td> + </tr> + <tr> + <td><a href="#special-backspace" id="special-backspace" name="special-backspace"><code>[\b]</code></a></td> + <td>Matches a backspace (U+0008). You need to use square brackets if you want to match a literal backspace character. (Not to be confused with <code>\b</code>.)</td> + </tr> + <tr> + <td><a href="#special-word-boundary" id="special-word-boundary" name="special-word-boundary"><code>\b</code></a></td> + <td> + <p>Matches a word boundary. A word boundary matches the position where a word character is not followed or preceeded by another word-character. Note that a matched word boundary is not included in the match. In other words, the length of a matched word boundary is zero. (Not to be confused with <code>[\b]</code>.)</p> + + <p>Examples:<br> + <code>/\bm/</code> matches the 'm' in "moon" ;<br> + <code>/oo\b/</code> does not match the 'oo' in "moon", because 'oo' is followed by 'n' which is a word character;<br> + <code>/oon\b/</code> matches the 'oon' in "moon", because 'oon' is the end of the string, thus not followed by a word character;<br> + <code>/\w\b\w/</code> will never match anything, because a word character can never be followed by both a non-word and a word character.</p> + + <div class="note"> + <p><strong>Note:</strong> JavaScript's regular expression engine defines a <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-15.10.2.6">specific set of characters</a> to be "word" characters. Any character not in that set is considered a word break. This set of characters is fairly limited: it consists solely of the Roman alphabet in both upper- and lower-case, decimal digits, and the underscore character. Accented characters, such as "é" or "ü" are, unfortunately, treated as word breaks.</p> + </div> + </td> + </tr> + <tr> + <td><a href="#special-non-word-boundary" id="special-non-word-boundary" name="special-non-word-boundary"><code>\B</code></a></td> + <td> + <p>Matches a non-word boundary. This matches a position where the previous and next character are of the same type: Either both must be words, or both must be non-words. The beginning and end of a string are considered non-words.</p> + + <p>For example, <code>/\B../</code> matches 'oo' in "noonday", and <code>/y\B./</code> matches 'ye' in "possibly yesterday."</p> + </td> + </tr> + <tr> + <td><a href="#special-control" id="special-control" name="special-control"><code>\c<em>X</em></code></a></td> + <td> + <p>Where <em>X</em> is a character ranging from A to Z. Matches a control character in a string.</p> + + <p>For example, <code>/\cM/</code> matches control-M (U+000D) in a string.</p> + </td> + </tr> + <tr> + <td><a href="#special-digit" id="special-digit" name="special-digit"><code>\d</code></a></td> + <td> + <p>Matches a digit character. Equivalent to <code>[0-9]</code>.</p> + + <p>For example, <code>/\d/</code> or <code>/[0-9]/</code> matches '2' in "B2 is the suite number."</p> + </td> + </tr> + <tr> + <td><a href="#special-non-digit" id="special-non-digit" name="special-non-digit"><code>\D</code></a></td> + <td> + <p>Matches any non-digit character. Equivalent to <code>[^0-9]</code>.</p> + + <p>For example, <code>/\D/</code> or <code>/[^0-9]/</code> matches 'B' in "B2 is the suite number."</p> + </td> + </tr> + <tr> + <td><a href="#special-form-feed" id="special-form-feed" name="special-form-feed"><code>\f</code></a></td> + <td>Matches a form feed (U+000C).</td> + </tr> + <tr> + <td><a href="#special-line-feed" id="special-line-feed" name="special-line-feed"><code>\n</code></a></td> + <td>Matches a line feed (U+000A).</td> + </tr> + <tr> + <td><a href="#special-carriage-return" id="special-carriage-return" name="special-carriage-return"><code>\r</code></a></td> + <td>Matches a carriage return (U+000D).</td> + </tr> + <tr> + <td><a href="#special-white-space" id="special-white-space" name="special-white-space"><code>\s</code></a></td> + <td> + <p>Matches a single white space character, including space, tab, form feed, line feed. Equivalent to <code>[ \f\n\r\t\v\u00a0\u1680\u180e\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]</code>.</p> + + <p>For example, <code>/\s\w*/</code> matches ' bar' in "foo bar."</p> + </td> + </tr> + <tr> + <td><a href="#special-non-white-space" id="special-non-white-space" name="special-non-white-space"><code>\S</code></a></td> + <td> + <p>Matches a single character other than white space. Equivalent to <code>[^ \f\n\r\t\v\u00a0\u1680\u180e\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]</code>.</p> + + <p>For example, <code>/\S\w*/</code> matches 'foo' in "foo bar."</p> + </td> + </tr> + <tr> + <td><a href="#special-tab" id="special-tab" name="special-tab"><code>\t</code></a></td> + <td>Matches a tab (U+0009).</td> + </tr> + <tr> + <td><a href="#special-vertical-tab" id="special-vertical-tab" name="special-vertical-tab"><code>\v</code></a></td> + <td>Matches a vertical tab (U+000B).</td> + </tr> + <tr> + <td><a href="#special-word" id="special-word" name="special-word"><code>\w</code></a></td> + <td> + <p>Matches any alphanumeric character including the underscore. Equivalent to <code>[A-Za-z0-9_]</code>.</p> + + <p>For example, <code>/\w/</code> matches 'a' in "apple," '5' in "$5.28," and '3' in "3D."</p> + </td> + </tr> + <tr> + <td><a href="#special-non-word" id="special-non-word" name="special-non-word"><code>\W</code></a></td> + <td> + <p>Matches any non-word character. Equivalent to <code>[^A-Za-z0-9_]</code>.</p> + + <p>For example, <code>/\W/</code> or <code>/[^A-Za-z0-9_]/</code> matches '%' in "50%."</p> + </td> + </tr> + <tr> + <td><a href="#special-backreference" id="special-backreference" name="special-backreference"><code>\<em>n</em></code></a></td> + <td> + <p>Where <em>n</em> is a positive integer, a back reference to the last substring matching the <em>n</em> parenthetical in the regular expression (counting left parentheses).</p> + + <p>For example, <code>/apple(,)\sorange\1/</code> matches 'apple, orange,' in "apple, orange, cherry, peach."</p> + </td> + </tr> + <tr> + <td><a href="#special-null" id="special-null" name="special-null"><code>\0</code></a></td> + <td>Matches a NULL (U+0000) character. Do not follow this with another digit, because <code>\0<digits></code> is an octal <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Values,_variables,_and_literals#Unicode_escape_sequences" title="https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Values,_variables,_and_literals#Unicode_escape_sequences">escape sequence</a>.</td> + </tr> + <tr> + <td><a href="#special-hex-escape" id="special-hex-escape" name="special-hex-escape"><code>\xhh</code></a></td> + <td>Matches the character with the code hh (two hexadecimal digits)</td> + </tr> + <tr> + <td><a href="#special-unicode-escape" id="special-unicode-escape" name="special-unicode-escape"><code>\uhhhh</code></a></td> + <td>Matches the character with the code hhhh (four hexadecimal digits).</td> + </tr> + <tr> + <td><a href="#special-unicode-escape-es6" id="special-unicode-escape-es6" name="special-unicode-escape-es6"><code>\u{hhhh}</code></a></td> + <td>(only when u flag is set) Matches the character with the Unicode value hhhh (hexadecimal digits).</td> + </tr> + </tbody> +</table> + +<p>Escaping user input to be treated as a literal string within a regular expression can be accomplished by simple replacement:</p> + +<pre class="brush: js">function escapeRegExp(string){ + return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); // $& means the whole matched string +}</pre> + +<h3 id="Using_parentheses">Using parentheses</h3> + +<p>Parentheses around any part of the regular expression pattern cause that part of the matched substring to be remembered. Once remembered, the substring can be recalled for other use, as described in {{ web.link("#Using_parenthesized_substring_matches", "Using Parenthesized Substring Matches") }}.</p> + +<p>For example, the pattern <code>/Chapter (\d+)\.\d*/</code> illustrates additional escaped and special characters and indicates that part of the pattern should be remembered. It matches precisely the characters 'Chapter ' followed by one or more numeric characters (<code>\d</code> means any numeric character and <code>+</code> means 1 or more times), followed by a decimal point (which in itself is a special character; preceding the decimal point with \ means the pattern must look for the literal character '.'), followed by any numeric character 0 or more times (<code>\d</code> means numeric character, <code>*</code> means 0 or more times). In addition, parentheses are used to remember the first matched numeric characters.</p> + +<p>This pattern is found in "Open Chapter 4.3, paragraph 6" and '4' is remembered. The pattern is not found in "Chapter 3 and 4", because that string does not have a period after the '3'.</p> + +<p>To match a substring without causing the matched part to be remembered, within the parentheses preface the pattern with <code>?:</code>. For example, <code>(?:\d+)</code> matches one or more numeric characters but does not remember the matched characters.</p> + +<h2 id="Lavorare_con_le_espressioni_regolari">Lavorare con le espressioni regolari</h2> + +<p>Le espressioni regolari sono usate con i metodi <code>test</code> and <code>exec</code> di <code>RegExp</code> e con i metodi <code>match</code>, <code>replace</code>, <code>search</code>, and <code>split</code> di <code>String</code> .Questi metodi sono spiegati in dettaglio nelle <a href="/en-US/docs/Web/JavaScript/Reference" title="en-US/docs/JavaScript/Reference">JavaScript reference</a>.</p> + +<p>Metodi che usano le espressioni regolari</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Metodo</th> + <th scope="col">Descrizione</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{jsxref("RegExp.exec", "exec")}}</td> + <td> + <p>Un metodo di <code>RegExp</code> che esegue una ricerca per una corrispondenza in una stringa. Ritorna un array di informazioni, o null se non trova corrispondenze.</p> + </td> + </tr> + <tr> + <td>{{jsxref("RegExp.test", "test")}}</td> + <td>Un metodo di <code>RegExp</code> che testa le corrispondenze in una stinga. Ritorna true o false. </td> + </tr> + <tr> + <td>{{jsxref("String.match", "match")}}</td> + <td>Un metodo di <code>String</code> che esegue una ricerca per una corrispondenza in una stringa. Ritorna un array di informazioni, o null se non trova corrispondenze.</td> + </tr> + <tr> + <td>{{jsxref("String.search", "search")}}</td> + <td>A <code>String</code> method that tests for a match in a string. It returns the index of the match, or -1 if the search fails.</td> + </tr> + <tr> + <td>{{jsxref("String.replace", "replace")}}</td> + <td>A <code>String</code> method that executes a search for a match in a string, and replaces the matched substring with a replacement substring.</td> + </tr> + <tr> + <td>{{jsxref("String.split", "split")}}</td> + <td>A <code>String</code> method that uses a regular expression or a fixed string to break a string into an array of substrings.</td> + </tr> + </tbody> +</table> + +<p>When you want to know whether a pattern is found in a string, use the <code>test</code> or <code>search</code> method; for more information (but slower execution) use the <code>exec</code> or <code>match</code> methods. If you use <code>exec</code> or <code>match</code> and if the match succeeds, these methods return an array and update properties of the associated regular expression object and also of the predefined regular expression object, <code>RegExp</code>. If the match fails, the <code>exec</code> method returns <code>null</code> (which coerces to <code>false</code>).</p> + +<p>In the following example, the script uses the <code>exec</code> method to find a match in a string.</p> + +<pre class="brush: js">var myRe = /d(b+)d/g; +var myArray = myRe.exec("cdbbdbsbz"); +</pre> + +<p>If you do not need to access the properties of the regular expression, an alternative way of creating <code>myArray</code> is with this script:</p> + +<pre class="brush: js">var myArray = /d(b+)d/g.exec("cdbbdbsbz"); // equivalent to "cdbbdbsbz".match(/d(b+)d/g); +</pre> + +<p>If you want to construct the regular expression from a string, yet another alternative is this script:</p> + +<pre class="brush: js">var myRe = new RegExp("d(b+)d", "g"); +var myArray = myRe.exec("cdbbdbsbz"); +</pre> + +<p>With these scripts, the match succeeds and returns the array and updates the properties shown in the following table.</p> + +<table class="standard-table"> + <caption>Results of regular expression execution.</caption> + <thead> + <tr> + <th scope="col">Object</th> + <th scope="col">Property or index</th> + <th scope="col">Description</th> + <th scope="col">In this example</th> + </tr> + </thead> + <tbody> + <tr> + <td rowspan="4"><code>myArray</code></td> + <td></td> + <td>The matched string and all remembered substrings.</td> + <td><code>["dbbd", "bb"]</code></td> + </tr> + <tr> + <td><code>index</code></td> + <td>The 0-based index of the match in the input string.</td> + <td><code>1</code></td> + </tr> + <tr> + <td><code>input</code></td> + <td>The original string.</td> + <td><code>"cdbbdbsbz"</code></td> + </tr> + <tr> + <td><code>[0]</code></td> + <td>The last matched characters.</td> + <td><code>"dbbd"</code></td> + </tr> + <tr> + <td rowspan="2"><code>myRe</code></td> + <td><code>lastIndex</code></td> + <td>The index at which to start the next match. (This property is set only if the regular expression uses the g option, described in {{ web.link("#Advanced_searching_with_flags", "Advanced Searching With Flags") }}.)</td> + <td><code>5</code></td> + </tr> + <tr> + <td><code>source</code></td> + <td>The text of the pattern. Updated at the time that the regular expression is created, not executed.</td> + <td><code>"d(b+)d"</code></td> + </tr> + </tbody> +</table> + +<p>As shown in the second form of this example, you can use a regular expression created with an object initializer without assigning it to a variable. If you do, however, every occurrence is a new regular expression. For this reason, if you use this form without assigning it to a variable, you cannot subsequently access the properties of that regular expression. For example, assume you have this script:</p> + +<pre class="brush: js">var myRe = /d(b+)d/g; +var myArray = myRe.exec("cdbbdbsbz"); +console.log("The value of lastIndex is " + myRe.lastIndex); + +// "The value of lastIndex is 5" +</pre> + +<p>However, if you have this script:</p> + +<pre class="brush: js">var myArray = /d(b+)d/g.exec("cdbbdbsbz"); +console.log("The value of lastIndex is " + /d(b+)d/g.lastIndex); + +// "The value of lastIndex is 0" +</pre> + +<p>The occurrences of <code>/d(b+)d/g</code> in the two statements are different regular expression objects and hence have different values for their <code>lastIndex</code> property. If you need to access the properties of a regular expression created with an object initializer, you should first assign it to a variable.</p> + +<h3 id="Using_parenthesized_substring_matches">Using parenthesized substring matches</h3> + +<p>Including parentheses in a regular expression pattern causes the corresponding submatch to be remembered. For example, <code>/a(b)c/</code> matches the characters 'abc' and remembers 'b'. To recall these parenthesized substring matches, use the <code>Array</code> elements <code>[1]</code>, ..., <code>[n]</code>.</p> + +<p>The number of possible parenthesized substrings is unlimited. The returned array holds all that were found. The following examples illustrate how to use parenthesized substring matches.</p> + +<p>The following script uses the {{jsxref("String.replace", "replace()")}} method to switch the words in the string. For the replacement text, the script uses the <code>$1</code> and <code>$2</code> in the replacement to denote the first and second parenthesized substring matches.</p> + +<pre class="brush: js">var re = /(\w+)\s(\w+)/; +var str = "John Smith"; +var newstr = str.replace(re, "$2, $1"); +console.log(newstr); +</pre> + +<p>This prints "Smith, John".</p> + +<h3 id="Advanced_searching_with_flags">Advanced searching with flags</h3> + +<p>Regular expressions have four optional flags that allow for global and case insensitive searching. These flags can be used separately or together in any order, and are included as part of the regular expression.</p> + +<table class="standard-table"> + <caption>Regular expression flags</caption> + <thead> + <tr> + <th scope="col">Flag</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>g</code></td> + <td>Global search.</td> + </tr> + <tr> + <td>i</td> + <td>Case-insensitive search.</td> + </tr> + <tr> + <td>m</td> + <td>Multi-line search.</td> + </tr> + <tr> + <td>y</td> + <td>Perform a "sticky" search that matches starting at the current position in the target string. See {{jsxref("RegExp.sticky", "sticky")}}</td> + </tr> + </tbody> +</table> + +<p>To include a flag with the regular expression, use this syntax:</p> + +<pre class="brush: js">var re = /pattern/flags; +</pre> + +<p>or</p> + +<pre class="brush: js">var re = new RegExp("pattern", "flags"); +</pre> + +<p>Note that the flags are an integral part of a regular expression. They cannot be added or removed later.</p> + +<p>For example, <code>re = /\w+\s/g</code> creates a regular expression that looks for one or more characters followed by a space, and it looks for this combination throughout the string.</p> + +<pre class="brush: js">var re = /\w+\s/g; +var str = "fee fi fo fum"; +var myArray = str.match(re); +console.log(myArray); +</pre> + +<p>This displays ["fee ", "fi ", "fo "]. In this example, you could replace the line:</p> + +<pre class="brush: js">var re = /\w+\s/g; +</pre> + +<p>with:</p> + +<pre class="brush: js">var re = new RegExp("\\w+\\s", "g"); +</pre> + +<p>and get the same result.</p> + +<p>The <code>m</code> flag is used to specify that a multiline input string should be treated as multiple lines. If the <code>m</code> flag is used, <code>^</code> and <code>$</code> match at the start or end of any line within the input string instead of the start or end of the entire string.</p> + +<h2 id="Examples">Examples</h2> + +<p>The following examples show some uses of regular expressions.</p> + +<h3 id="Changing_the_order_in_an_input_string">Changing the order in an input string</h3> + +<p>The following example illustrates the formation of regular expressions and the use of <code>string.split()</code> and <code>string.replace()</code>. It cleans a roughly formatted input string containing names (first name first) separated by blanks, tabs and exactly one semicolon. Finally, it reverses the name order (last name first) and sorts the list.</p> + +<pre class="brush: js">// The name string contains multiple spaces and tabs, +// and may have multiple spaces between first and last names. +var names = "Harry Trump ;Fred Barney; Helen Rigby ; Bill Abel ; Chris Hand "; + +var output = ["---------- Original String\n", names + "\n"]; + +// Prepare two regular expression patterns and array storage. +// Split the string into array elements. + +// pattern: possible white space then semicolon then possible white space +var pattern = /\s*;\s*/; + +// Break the string into pieces separated by the pattern above and +// store the pieces in an array called nameList +var nameList = names.split(pattern); + +// new pattern: one or more characters then spaces then characters. +// Use parentheses to "memorize" portions of the pattern. +// The memorized portions are referred to later. +pattern = /(\w+)\s+(\w+)/; + +// New array for holding names being processed. +var bySurnameList = []; + +// Display the name array and populate the new array +// with comma-separated names, last first. +// +// The replace method removes anything matching the pattern +// and replaces it with the memorized string—second memorized portion +// followed by comma space followed by first memorized portion. +// +// The variables $1 and $2 refer to the portions +// memorized while matching the pattern. + +output.push("---------- After Split by Regular Expression"); + +var i, len; +for (i = 0, len = nameList.length; i < len; i++){ + output.push(nameList[i]); + bySurnameList[i] = nameList[i].replace(pattern, "$2, $1"); +} + +// Display the new array. +output.push("---------- Names Reversed"); +for (i = 0, len = bySurnameList.length; i < len; i++){ + output.push(bySurnameList[i]); +} + +// Sort by last name, then display the sorted array. +bySurnameList.sort(); +output.push("---------- Sorted"); +for (i = 0, len = bySurnameList.length; i < len; i++){ + output.push(bySurnameList[i]); +} + +output.push("---------- End"); + +console.log(output.join("\n")); +</pre> + +<h3 id="Using_special_characters_to_verify_input">Using special characters to verify input</h3> + +<p>In the following example, the user is expected to enter a phone number. When the user presses the "Check" button, the script checks the validity of the number. If the number is valid (matches the character sequence specified by the regular expression), the script shows a message thanking the user and confirming the number. If the number is invalid, the script informs the user that the phone number is not valid.</p> + +<p>Within non-capturing parentheses <code>(?:</code> , the regular expression looks for three numeric characters <code>\d{3}</code> OR <code>|</code> a left parenthesis <code>\(</code> followed by three digits<code> \d{3}</code>, followed by a close parenthesis <code>\)</code>, (end non-capturing parenthesis <code>)</code>), followed by one dash, forward slash, or decimal point and when found, remember the character <code>([-\/\.])</code>, followed by three digits <code>\d{3}</code>, followed by the remembered match of a dash, forward slash, or decimal point <code>\1</code>, followed by four digits <code>\d{4}</code>.</p> + +<p>The <code>Change</code> event activated when the user presses Enter sets the value of <code>RegExp.input</code>.</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> + <meta http-equiv="Content-Script-Type" content="text/javascript"> + <script type="text/javascript"> + var re = /(?:\d{3}|\(\d{3}\))([-\/\.])\d{3}\1\d{4}/; + function testInfo(phoneInput){ + var OK = re.exec(phoneInput.value); + if (!OK) + window.alert(phoneInput.value + " isn't a phone number with area code!"); + else + window.alert("Thanks, your phone number is " + OK[0]); + } + </script> + </head> + <body> + <p>Enter your phone number (with area code) and then click "Check". + <br>The expected format is like ###-###-####.</p> + <form action="#"> + <input id="phone"><button onclick="testInfo(document.getElementById('phone'));">Check</button> + </form> + </body> +</html> +</pre> + +<div>{{PreviousNext("Web/JavaScript/Guide/Text_formatting", "Web/JavaScript/Guide/Indexed_collections")}}</div> diff --git a/files/it/web/javascript/guida/functions/index.html b/files/it/web/javascript/guida/functions/index.html new file mode 100644 index 0000000000..4aca8d5a7b --- /dev/null +++ b/files/it/web/javascript/guida/functions/index.html @@ -0,0 +1,646 @@ +--- +title: Funzioni +slug: Web/JavaScript/Guida/Functions +translation_of: Web/JavaScript/Guide/Functions +--- +<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Loops_and_iteration", "Web/JavaScript/Guide/Expressions_and_Operators")}}</div> + +<div> </div> + +<p><strong>Le funzioni sono tra i blocchi di programmazione fondamentali in JavaScript. Una funzione è una procedura JavaScript — un gruppo di istruzioni ( statement ) che esegue un compito o calcola un valore. Per usare una funzione, occorre definirla, all'interno dello <em>scope</em> dal quale la si invocherà.</strong></p> + +<p>Vedi anche <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions">l'esaustivo capitolo della guida di riferimento, che tratta delle funzioni </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions">JavaScript</a>, per avere maggiori dettagli.</p> + +<h2 id="Definire_una_funzione">Definire una funzione</h2> + +<h3 id="Dichiarazioni_di_funzione">Dichiarazioni di funzione</h3> + +<p>Una <strong>definizione di funzione</strong> ( o <strong>dichiarazione di funzione</strong>, o <strong>istruzione di funzione </strong>) consiste della parola chiave <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function" title="function"><code>function</code></a>, seguita da:</p> + +<ul> + <li>il nome della funzione.</li> + <li>una lista di argomenti per la funzione, chiusi tra due parentesi e separati da una virgola.</li> + <li>le istruzioni JavaScript che definiscono la funzione, chiuse tra due parentesi graffe, <code>{ }</code>.</li> +</ul> + +<p>Per esempio, il codice seguente definisce una funzione semplice chiamata <em>square</em>:</p> + +<pre class="brush: js">function square(number) { + return number * number; +} +</pre> + +<p>La funzione <em><code>square</code></em> riceve un argomento, chiamato <em><code>number</code></em>. La funzione contiene una sola istruzione che dice di restituire ( <em>return</em> ) l'argomento della funzione ( <em><code>number </code></em>) moltiplicato per se stesso. L'istruzione <a href="/en-US/docs/Web/JavaScript/Reference/Statements/return" title="return"><code>return</code></a> specifica il valore restituito dalla funzione.</p> + +<pre class="brush: js">return number * number; +</pre> + +<p>I parametri primitivi ( quale un numero ) vengono passati alla funzione come <strong>valore</strong>; il valore è passato alla funzione, ma se la funzione cambia il valore del parametro, questo cambiamento non si riflette globalmente, o nella funzione chiamante ( la funzione che, eventualmente, ha invocato la funzione in esecuzione ).</p> + +<p>Se, invece, alla funzione viene passato un oggetto ( un valore non-primitivo, come, ad esempio, un <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" title="The JavaScript Array object is a global object that is used in the construction of arrays; which are high-level, list-like objects."><code>Array</code></a> oppure un oggetto definito dall'utente ) come parametro e la funzione modifica le proprietà dell'oggetto, quella modifica sarà visibile anche fuori dalla funzione, come si può vedere dal seguente esempio:</p> + +<pre class="brush: js">function myFunc(theObject) { + theObject.make = "Toyota"; +} + +var mycar = {make: "Honda", model: "Accord", year: 1998}; +var x, y; + +x = mycar.make; // x gets the value "Honda" + +myFunc(mycar); +y = mycar.make; // y gets the value "Toyota" + // (the make property was changed by the function) +</pre> + +<h3 id="Espressioni_di_funzione">Espressioni di funzione</h3> + +<p>Mentre la dichiarazione di funzione di cui sopra è, da un punto di vista sintattico, un'istruzione, le funzioni possono anche essere create da un'espressione di funzione. Una funzione di questo tipo può anche essere <strong>anonima</strong>; vale a dire, non deve avere un nome. Per esempio, la funzione <em><code>square</code></em> potrebbe essere stata definita come:</p> + +<pre class="brush: js">var square = function(number) { return number * number }; +var x = square(4) // x gets the value 16</pre> + +<p>Tuttavia, è possibile assegnare un nome alla funzione anche con l'espressione di funzione e quel nome potrà essere utilizzato all'interno della funzione, per riferirsi alla funzione stessa, oppure in un debugger, per identificare la funzione all'interno dello stack:</p> + +<pre class="brush: js">var factorial = function fac(n) { return n<2 ? 1 : n*fac(n-1) }; + +console.log(factorial(3)); +</pre> + +<p>NB: l'oggetto <em>console</em> non è un oggetto standard. Non usatelo in un sito web, poichè potrebbe non funzionare correttamente. Per verificare il funzionamento dell'esempio precedente, usate, piuttosto:</p> + +<p> window.alert(factorial(3));</p> + +<p>Le espressioni di funzione sono utili quando si vuole passare una funzione ad un'altra funzione, come argomento. Il prossimo esempio mostra una funzione <code>map</code> che viene definita e poi invocata, con una funzione anonima come primo parametro:</p> + +<pre class="brush: js">function map(f,a) { + var result = [], // Create a new Array + i; + for (i = 0; i != a.length; i++) + result[i] = f(a[i]); + return result; +} +</pre> + +<p>Il seguente codice:</p> + +<pre class="brush: js">map(function(x) {return x * x * x}, [0, 1, 2, 5, 10]); +</pre> + +<p>restituisce [0, 1, 8, 125, 1000].</p> + +<p>In JavaScript, una funzione può essere definita in base ad una condizione. Per esempio, la definizione di funzione seguente definisce la funzione <code>myFunc</code> solo se <code>num</code> è uguale a 0 ( zero ):</p> + +<pre class="brush: js">var myFunc; +if (num == 0){ + myFunc = function(theObject) { + theObject.make = "Toyota" + } +}</pre> + +<p>Per definire una funzione, inoltre, è possibile usare il costruttore <a class="new" href="https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Function" title="The documentation about this has not yet been written; please consider contributing!"><code>Function</code></a>, per creare funzioni da una stringa, in runtime, in modo simile a <a class="new" title="The documentation about this has not yet been written; please consider contributing!"><code>eval()</code></a>.</p> + +<p>Un <strong>metodo</strong> è una funzione che è una proprietà di un oggetto. Leggi di più sugli oggetti e sui metodi in <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects" title="en-US/docs/JavaScript/Guide/Working with Objects">Working with objects</a>.</p> + +<h2 id="Chiamare_(_invocare_)_una_funzione">Chiamare ( invocare ) una funzione</h2> + +<p>Definire una funzione non significa eseguirla. Definire una funzione significa semplicemente darle un nome e specificare cosa fare quando la funzione viene chiamata ( invocata ). <strong>Chiamare</strong> una funzione significa eseguire le azioni specificate, utilizzando i parametri indicati. Per esempio, se definiamo la funzione <code>square</code>, possiamo chiamarla o invocarla nel modo seguente:</p> + +<pre class="brush: js">square(5); +</pre> + +<p>Questa istruzione chiama la funzione, inviandole un argomento, il numero 5. La funzione esegue le sue istruzioni e restituisce il valore 25.</p> + +<p>Le funzioni devono essere in <em>scope</em> quando vengono chiamate, ma la dichiarazione di funzione può anche apparire sotto la chiamata, nel codice sorgente, come nell'esempio seguente:</p> + +<pre class="brush: js">console.log(square(5)); +/* ... */ +function square(n) { return n*n } +</pre> + +<p>Lo <em>scope</em> di una funzione è la funzione nella quale è stata dichiarata, oppure l'intero programma se la dichiarazione è stata fatta al livello più alto, non annidata in alcun altro blocco di programmazione.</p> + +<div class="note"> +<p><strong>Nota:</strong> l'ultimo esempio funziona solo quando la funzione viene definita utilizzando la sintassi usata nell'esempio ( <code>function funcName(){}</code> ). Il codice seguente, invece, non funzionerà:</p> +</div> + +<pre class="brush: js example-bad">console.log(square(5)); +square = function (n) { + return n * n; +} +</pre> + +<p>Gli argomenti di una funzione non sono limitati alle stringhe testuali e ai numeri. È possibile passare anche interi oggetti ad una funzione. La funzione <code>show_props()</code> (definita in <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_Properties" title="https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Working_with_Objects#Objects_and_Properties">Working with objects</a>) è un esempio di funzione che riceve, come argomento, un oggetto.</p> + +<p>Una funzione può chiamare se stessa. Per esempio, ecco una funzione che calcola in modo ricorsivo i fattoriali ( molto simile alla funzione <code>fac()</code> vista poco prima in questa stessa pagina ):</p> + +<pre class="brush: js">function factorial(n){ + if ((n == 0) || (n == 1)) + return 1; + else + return (n * factorial(n - 1)); +} +</pre> + +<p>A questo punto, è possibile calcolare i fattoriali dei cinque numeri seguenti:</p> + +<pre class="brush: js">var a, b, c, d, e; +a = factorial(1); // a gets the value 1 +b = factorial(2); // b gets the value 2 +c = factorial(3); // c gets the value 6 +d = factorial(4); // d gets the value 24 +e = factorial(5); // e gets the value 120 +</pre> + +<p>Esistono altri metodi per chiamare una funzione. Ci sono casi in cui una funzione deve essere chiamata dinamicamente, oppure casi in cui il numero degli argomenti passati alla funzione varia, oppure casi in cui il contesto della chiamata di funzione deve essere impostato ad uno specifico oggetto, determinato in runtime ( tempo di esecuzione ). È chiaro che le funzioni sono, esse stesse, oggetti, e che questi oggetti hanno propri metodi (vedi l'oggetto <a class="new" href="https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Function" title="The documentation about this has not yet been written; please consider contributing!"><code>Function</code></a>). Uno di questi metodi, <a class="new" href="https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Global_Objects/Function/apply" title="The documentation about this has not yet been written; please consider contributing!"><code>apply()</code></a>, può essere usato a questo scopo.</p> + +<h2 class="deki-transform" id="Lo_scope_di_una_funzione">Lo scope di una funzione</h2> + +<p>Alle variabili definite all'interno di una funzione non è possibile accedere dall'esterno della funzione, poichè la variabile è definita solo per lo <em>scope</em> della funzione ( <em>scope</em>: portata, ambiente, ambito in cui il nome della variabile può essere utilizzato per riferirsi ad essa ). Tuttavia, una funzione può accedere a tutte le variabili e a tutte le funzioni definite all'interno dello <em>scope</em> in cui è stata definita. In altre parole, una funzione definita nello <em>scope</em> globale può accedere a tutte le variabili definite nello <em>scope</em> globale. Una funzione definita all'interno di un'altra funzione può accedere anche a tutte le variabili definite nella funzione genitrice ( parent ), oltre che a tutte le altre variabili alle quali può accedere la funzione genitrice.</p> + +<pre class="brush: js">// Queste variabili sono definite nello <em>scope</em> globale + +var num1 = 20, + num2 = 3, + name = "Chamahk"; + +// Questa funzione è definita nello <em>scope</em> globale + +function multiply() { + return num1 * num2; + } + +multiply(); // restituisce 60 + +// Un esempio di funzione annidata +function getScore () { + var num1 = 2, + num2 = 3; + + function add() { + return name + " scored " + (num1 + num2); + } + + return add(); +} + +getScore(); // restituisce "Chamahk scored 5" +</pre> + +<h2 id="Scope_e_lo_stack_della_funzione">Scope e lo stack della funzione</h2> + +<h3 id="Ricorsione">Ricorsione</h3> + +<p>Una funzione può chiamare se stessa. Esistono tre modi per una funzione di chiamare se stessa:</p> + +<ol> + <li>il nome della funzione</li> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments/callee">arguments.callee</a></code></li> + <li>una variabile <em>in-scope</em> che fa da riferimento alla funzione</li> +</ol> + +<p>Per esempio, considerate la seguente definizione di funzione:</p> + +<pre class="brush: js">var foo = function bar() { + // statements go here +}; +</pre> + +<p>All'interno del corpo della funzione, le tre seguenti istruzioni sono equivalenti:</p> + +<ol> + <li><code>bar()</code></li> + <li><code>arguments.callee()</code></li> + <li><code>foo()</code></li> +</ol> + +<p>Una funzione che chiama se stessa viene detta <em>funzione ricorsiva</em>. In qualche modo, la ricorsione è analoga ad un loop. Entrambi eseguono lo stesso codice più volte ed entrambi richiedono una condizione (per evitare un loop infinito, o piuttosto, una ricorsione infinita, in questo caso). Per esempio, il loop seguente:</p> + +<pre class="brush: js">var x = 0; +while (x < 10) { // "x < 10" is the loop condition + // do stuff + x++; +} +</pre> + +<p>può essere convertito in una funzione ricorsiva e in una chiamata a quella funzione:</p> + +<pre class="brush: js">function loop(x) { + if (x >= 10) // "x >= 10" is the exit condition (equivalent to "!(x < 10)") + return; + // do stuff + loop(x + 1); // the recursive call +} +loop(0); +</pre> + +<p>Tuttavia, alcuni algoritmi non possono essere semplici loop iterativi. Per esempio, per avere tutti i nodi di una struttura ad albero (per esempio, il <a href="/en-US/docs/DOM">DOM</a>) è molto più semplice usare la ricorsione:</p> + +<pre class="brush: js">function walkTree(node) { + if (node == null) // + return; + // do something with node + for (var i = 0; i < node.childNodes.length; i++) { + walkTree(node.childNodes[i]); + } +} +</pre> + +<p>Paragonato alla funzione <code>loop</code>, ciascuna chiamata ricorsiva, qui, esegue, a sua volta, molte chiamate ricorsive.</p> + +<p>È possibile convertire qualsiasi algoritmo ricorsivo in un algoritmo non ricorsivo, ma spesso la logica è molto più complessa e per farlo è necessario utilizzare uno stack. In effetti, la ricorsione stessa usa uno stack: lo stack della funzione.</p> + +<p>Un comportamento paragonabile allo stack può essere visto nell'esempio seguente:</p> + +<pre class="brush: js">function foo(i) { + if (i < 0) + return; + console.log('begin:' + i); + foo(i - 1); + console.log('end:' + i); +} +foo(3); + +// Output: + +// begin:3 +// begin:2 +// begin:1 +// begin:0 +// end:0 +// end:1 +// end:2 +// end:3</pre> + +<h3 id="Funzioni_annidate_e_chiusure">Funzioni annidate e chiusure</h3> + +<p>È possibile annidare una funzione all'interno di una funzione. La funzione annidata ( interna ) è privata, rispetto alla funzione che la contiene (outer o esterna). Essa forma anche una <em>chiusura</em> ( <em>closure )</em>. Una chiusura è un'espressione (normalmente, una funzione) che può avere variabili libere ( non locali ) legate ad un ambiente (ambiente che "chiude" l'espressione).</p> + +<p>Dal momento in cui una funzione annidata è una chiusura, una funzione annidata può "ereditare" gli argomenti e le variabili della sua funzione contenitore (esterna o genitrice). In altre parole, la funzione interna contiene lo <em>scope</em> ( ambiente ) della funzione esterna.</p> + +<p>Per riepilogare:</p> + +<ul> + <li>alla funzione interna possono accedere solo le istruzioni contenute nella funzione esterna.</li> +</ul> + +<ul> + <li>la funzione interna forma una chiusura: la funzione interna può utilizzare gli argomenti e le variabili della funzione esterna, mentre la funzione esterna non può utilizzare gli argomenti e le variabili della funzione interna.</li> +</ul> + +<p>Ecco un esempio di funzione annidata:</p> + +<pre class="brush: js">function addSquares(a,b) { + function square(x) { + return x * x; + } + return square(a) + square(b); +} +a = addSquares(2,3); // restituisce 13 +b = addSquares(3,4); // restituisce 25 +c = addSquares(4,5); // restituisce 41 +</pre> + +<p>Dal momento in cui la funzione interna forma una chiusura, è possibile chiamare la funzione esterna e specificare gli argomenti per entrambe le funzioni, quella esterna e quella interna:</p> + +<pre class="brush: js">function outside(x) { + function inside(y) { + return x + y; + } + return inside; +} +fn_inside = outside(3); // Come dire: dammi una funzione che addizioni 3 a qualsiasi altro valore le venga passato +result = fn_inside(5); // restituisce 8 + +result1 = outside(3)(5); // restituisce 8 +</pre> + +<h3 id="Persistenza_delle_variabili">Persistenza delle variabili</h3> + +<p>Da notare come <code>x</code> venga preservata anche all'uscita da <code>inside</code>. Una chiusura deve preservare argomenti e variabili in tutti gli <em>scope</em> ai quali è riferita. Poichè ogni chiamata potrebbe trasportare argomenti differenti, per ogni chiamata alla funzione <em>outside</em> viene creata una nuova chiusura. La memoria può essere liberata solo quando <code>inside</code> non è più accessibile.</p> + +<p>Una chiusura non è differente da un riferimento ad un oggetto, ma è meno ovvia di quest'ultimo, perchè non richiede di impostare direttamente il riferimento e perchè non è possibile ispezionare l'oggetto al quale il riferimento punta.</p> + +<h3 id="Funzioni_annidate_multiple">Funzioni annidate multiple</h3> + +<p>Le funzioni possono essere annidate a più livelli. Per esempio, una funzione (A), può contenere una funzione (B), che può contenere, a sua volta, una funzione (C). Entrambe le funzioni B e C formano una chiusura, qui, così B può accedere ad A e C può accedere a B. Inoltre, visto che C può accedere a B che può accedere ad A, C può anche accedere ad A. Quindi, le chiusure possono contenere più <em>scope</em>; ciascuna chiusura contiene lo <em>scope</em> delle funzioni che la contengono. Questo meccanismo è chiamato <em>scope chaining</em> ( catena di <em>scope</em> ). (Perchè è chiamata "catena" sarà chiaro tra poco.)</p> + +<p>Considerate l'esempio seguente:</p> + +<pre class="brush: js">function A(x) { + function B(y) { + function C(z) { + console.log(x + y + z); + } + C(3); + } + B(2); +} +A(1); // logs 6 (1 + 2 + 3) +</pre> + +<p>In questo esempio, <code>C</code> accede alla variabile <code><em>y</em> di B</code> e alla <em>x</em> di <code>A</code>. Questo accade perchè:</p> + +<ol> + <li><code>B</code> forma una chiusura che include <code>A</code>: quindi, <code>B</code> può accedere agli argomenti ed alle variabili di <code>A</code>.</li> + <li><code>C</code> forma una chiusura che include <code>B</code>.</li> + <li>Poichè la chiusura di <code>B </code>include <code>A</code>, la chiusura di <code>C</code> include <code>A</code>; <code>C</code> può accedere agli argomenti ed alle variabili sia di <code>B</code> <em>che</em> di <code>A</code>. In altre parole, <code>C</code> unisce in una catena gli <em>scope</em> di <code>B</code> ed <code>A</code> in quell'ordine.</li> +</ol> + +<p>Il contrario, tuttavia, non è vero. <code>A</code> non può accedere a <code>C</code>, perchè <code>A</code> non può accedere ad alcun argomento o variabile di <code>B</code>, di cui <code>C</code> è una variabile. Quindi, <code>C</code> resta privata solo a <code>B</code>.</p> + +<h3 id="Conflitti_tra_nomi">Conflitti tra nomi</h3> + +<p>Quando due argomenti o variabili, all'interno degli <em>scope</em> di una chiusura hanno lo stesso nome, nasce un <em>conflitto tra nomi</em>. Gli <em>scope</em> più interni hanno la precedenza, così lo <em>scope</em> più annidato ha la precedenza più elevata, mentre lo <em>scope</em> più esterno ha la precedenza più bassa. Questa è la catena degli <em>scope</em>. Il primo della catena è lo <em>scope</em> più annidato, mentre l'ultimo è lo <em>scope</em> più esterno. Vediamo il seguente esempio:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">outside</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">var</span> x <span class="operator token">=</span> <span class="number token">10</span><span class="punctuation token">;</span> + <span class="keyword token">function</span> <span class="function token">inside</span><span class="punctuation token">(</span>x<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">return</span> x<span class="punctuation token">;</span> + <span class="punctuation token">}</span> + <span class="keyword token">return</span> inside<span class="punctuation token">;</span> +<span class="punctuation token">}</span> +result <span class="operator token">=</span> <span class="function token">outside</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">(</span><span class="number token">20</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// returns 20 instead of 10</span></code></pre> + +<p>Il conflitto tra nomi avviene con l'istruzione <code>return x</code> ed è tra il nome del parametro <code>x di inside</code> ed il nome della variabile x di <code>outside</code>. La catena di <em>scope</em> qui è {<code>inside</code>, <code>outside</code>, global object}. Quindi, la x di <code>inside ha la precedenza sulla x di</code> <code>outside</code>: il valore restituito, alla fine, sarà 20 ( la x di <code>inside </code>) e non 10 ( la x di <code>outside </code>).</p> + +<h2 id="Closure">Closure</h2> + +<p>Le closure sono uno dei meccanismi più potenti di JavaScript. JavaScript permette l'annidamento di funzioni e riconosce alla funzione interna il pieno accesso a tutte le variabili e a tutte le funzioni definite nella funzione esterna ( e a tutte le altre variabili e funzioni cui la funzione esterna ha accesso ). Tuttavia, la funzione esterna non ha accesso alle variabili ed alle funzioni definite nella funzione interna. Questo offre una certa protezione alle variabili della funzione interna. Inoltre, dal momento in cui la funzione interna ha accesso allo <em>scope</em> della funzione esterna, le variabili e le funzioni definite nella funzione esterna sopravviveranno alla funzione esterna stessa, se la funzione interna fa in modo di sopravvivere alla funzione esterna. Una closure viene creata quando la funzione interna viene resa disponibile in qualche modo agli <em>scope</em> esterni alla funzione esterna.</p> + +<pre class="brush: js">var pet = function(name) { // La funzione esterna definisce una variabile di nome "name" + var getName = function() { + return name; // La funzione interna ha accesso alla variabile "name" della funzione esterna + } + return getName; // restituisce la funzione interna, esponendola, quindi, a <em>scope</em> esterni +}, +myPet = pet("Vivie"); + +myPet(); // restituisce "Vivie" +</pre> + +<p>Può essere molto più complicato del codice scritto sopra. Può essere restituito un oggetto contenente metodi per manipolare le variabili interne della funzione esterna.</p> + +<pre class="brush: js">var createPet = function(name) { + var sex; + + return { + setName: function(newName) { + name = newName; + }, + + getName: function() { + return name; + }, + + getSex: function() { + return sex; + }, + + setSex: function(newSex) { + if(typeof newSex == "string" && (newSex.toLowerCase() == "male" || newSex.toLowerCase() == "female")) { + sex = newSex; + } + } + } +} + +var pet = createPet("Vivie"); +pet.getName(); // Vivie + +pet.setName("Oliver"); +pet.setSex("male"); +pet.getSex(); // male +pet.getName(); // Oliver +</pre> + +<p>Nel codice sopra, la variabile <code>name</code> della funzione esterna è accessibile alle funzioni interne e non c'è modo di accedere alle variabili interne, se non attraverso le funzioni interne. Le variabili interne della funzione interna agiscono come magazzino sicuro per le funzioni interne. Esse conservano i dati "persistenti" e sicuri che le funzioni interne utilizzano. Le funzioni non hanno nemmeno bisogno di vedersi assegnare ad una variabile o di avere un nome.</p> + +<pre class="brush: js">var getCode = (function(){ + var secureCode = "0]Eal(eh&2"; // A code we do not want outsiders to be able to modify... + + return function () { + return secureCode; + }; +})(); + +getCode(); // Returns the secureCode +</pre> + +<p>Ci sono, tuttavia, alcuni pericoli dai quali guardarsi, quando si utilizzano le closure. Se una funzione chiusa definisce una variabile che ha lo stesso nome di una variabile definita nello <em>scope</em> esterno, non sarà più possibile riferirsi alla variabile esterna.</p> + +<pre class="brush: js">var createPet = function(name) { // Outer function defines a variable called "name" + return { + setName: function(name) { // Enclosed function also defines a variable called "name" + name = name; // ??? How do we access the "name" defined by the outer function ??? + } + } +} +</pre> + +<p>È davvero complicato usare la variabile magica <code>this</code> nelle closure. La variabile <code>this</code> è da usarsi con cautela, poichè ciò a cui <code>this</code> si riferisce dipende esclusivamente da dove è stata invocata la funzione, piuttosto che da dove è stata definita.</p> + +<h2 id="Usare_l'oggetto_arguments">Usare l'oggetto arguments</h2> + +<p>Gli argomenti di una funzione vengono memorizzati in un oggetto, strutturato come un array. All'interno di una funzione, è possibile riferirsi agli argomenti passati alla funzione stessa nel modo seguente:</p> + +<pre class="brush: js">arguments[i] +</pre> + +<p>dove <code>i</code> è il numero ordinale dell'argomento, a partire da zero. Così, il primo argomento passato ad una funzione sarà <code>arguments[0]</code>. Il numero totale degli argomenti è dato da <code>arguments.length</code>.</p> + +<p>Usando l'oggetto <code>arguments</code>, è possibile chiamare una funzione con più argomenti di quanti ne possa formalmente accettare. Questo è spesso utile se non si sa in anticipo quanti argomenti verranno passati alla funzione. Si può usare l'attributo <code>arguments.length</code> per determinare il numero degli argomenti realmente passati alla funzione, per poi accedere a ciascuno di essi usando l'oggetto <code>arguments</code>.</p> + +<p>Prendiamo, per esempio, una funzione che unisca più stringhe. Il solo argomento formale previsto per la funzione è una stringa che specifica i caratteri da usare per separare le singole voci. La funzione viene definita così:</p> + +<pre class="brush: js">function myConcat(separator) { + var result = "", // initialize list + i; + // iterate through arguments + for (i = 1; i < arguments.length; i++) { + result += arguments[i] + separator; + } + return result; +} +</pre> + +<p>È possibile passare una quantità qualsiasi di argomenti alla funzione e la funzione comporrà una stringa testuale contenente tutti gli argomenti passati:</p> + +<pre class="brush: js">// returns "red, orange, blue, " +myConcat(", ", "red", "orange", "blue"); + +// returns "elephant; giraffe; lion; cheetah; " +myConcat("; ", "elephant", "giraffe", "lion", "cheetah"); + +// returns "sage. basil. oregano. pepper. parsley. " +myConcat(". ", "sage", "basil", "oregano", "pepper", "parsley"); +</pre> + +<div class="note"> +<p><strong>Nota:</strong> La variabile <code>arguments</code> è simile ad un array ( "array-like" ), ma non è un array. È simile ad un array poichè ha un indice numerato ed una proprietà <code>length</code>. Tuttavia, non possiede tutti i metodi di manipolazione degli array.</p> +</div> + +<p>Vedi l'oggetto <a class="new" href="https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Function" title="The documentation about this has not yet been written; please consider contributing!"><code>Function</code></a> nella JavaScript reference, per avere maggiori informazioni.</p> + +<h2 id="I_parametri_di_una_funzione">I parametri di una funzione</h2> + +<p>A partire da ECMAScript 6, esistono due nuovi tipi di parametri: i parametri di <em>default</em> e i parametri <em>rest</em>.</p> + +<h3 id="I_parametri_di_default">I parametri di default</h3> + +<p>In JavaScript, i parametri di una funzione hanno come valore di default <code>undefined</code>. Tuttavia, in alcune situazioni potrebbe essere utile impostare un diverso valore di default. In questo, possono aiutare i parametri di default.</p> + +<p>In passato, la strategia comune per impostare i valori di default era quella di verificare i valori dei parametri, all'interno del corpo della funzione, ed assegnare loro un valore, nel caso fossero stati <code>undefined</code>. Se nell'esempio seguente non venisse passato, durante la chiamata, alcun valore per <code>b</code>, il suo valore sarebbe <code>undefined</code>, anche quando venisse valutata l'istruzione <code>a*b</code>, e la chiamata a <code>multiply</code> restituirebbe <code>NaN ( Not a Number )</code>. Tuttavia, questo valore viene definito nella seconda riga:</p> + +<pre class="brush: js">function multiply(a, b) { + b = typeof b !== 'undefined' ? b : 1; + + return a*b; +} + +multiply(5); // 5 +</pre> + +<p>Con i parametri di deafult, la verifica all'interno del corpo della funzione non è più necessaria. Ora, è possibile mettere <code>1</code> come valore di default per <code>b</code> nella dichiarazione della funzione:</p> + +<pre class="brush: js">function multiply(a, b = 1) { + return a*b; +} + +multiply(5); // 5</pre> + +<p>Per maggiori dettagli, vedi <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters">paremetri di default</a> nella Javascript reference.</p> + +<h3 id="I_parametri_Rest">I parametri Rest</h3> + +<p>La sintassi dei <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest parameter</a> permette di rappresentare un indefinito numero di argomenti come un array. Nell'esempio, usiamo i parametri <em>rest</em> per rappresentare l'insieme degli argomenti composto dagli argomenti successivi al primo ( a partire dal secondo argomento fino alla fine ). Poi, moltiplichiamo ciascun argomento dell'insieme per il primo. Questo esempio utilizza una funzione a freccia, che verrà introdotta nella prossima sezione.</p> + +<pre class="brush: js">function multiply(multiplier, ...theArgs) { + return theArgs.map(x => multiplier * x); +} + +var arr = multiply(2, 1, 2, 3); +console.log(arr); // [2, 4, 6]</pre> + +<h2 id="Le_funzioni_a_freccia">Le funzioni a freccia</h2> + +<p>Una <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">espressione di funzione a freccia</a> ( nota anche come <strong>fat arrow function </strong>) ha una sintassi più stringata rispetto alle espressioni di funzione e forza, lessicalmente, il valore di <code>this</code>. Le funzioni a freccia sono sempre anonime. Vedi anche il post di hacks.mozilla.org: "<a href="https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/">ES6 In Depth: Arrow functions</a>".</p> + +<p>Sono due i fattori che influenzarono l'introduzione delle funzioni a freccia: la brevità delle funzioni ed il <code>this</code> lessicale.</p> + +<h3 id="Funzioni_più_brevi">Funzioni più brevi</h3> + +<p>In alcuni modelli funzionali, funzioni più brevi sono le benvenute. Paragoniamo le due istruzioni seguenti:</p> + +<pre class="brush: js">var a = [ + "Hydrogen", + "Helium", + "Lithium", + "Beryllium" +]; + +var a2 = a.map(function(s){ return s.length }); +var a3 = a.map( s => s.length );</pre> + +<h3 id="Il_this_lessicale">Il <code>this lessicale</code></h3> + +<p>Until arrow functions, every new function defined its own <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a> value (a new object in case of a constructor, undefined in strict mode function calls, the context object if the function is called as an "object method", etc.). This proved to be annoying with an object-oriented style of programming.</p> + +<pre class="brush: js">function Person() { + // The Person() constructor defines `<code>this`</code> as itself. + this.age = 0; + + setInterval(function growUp() { + // In nonstrict mode, the growUp() function defines `this` + // as the global object, which is different from the `this` + // defined by the Person() constructor. + this.age++; + }, 1000); +} + +var p = new Person();</pre> + +<p>In ECMAScript 3/5, this issue was fixed by assigning the value in <code>this</code> to a variable that could be closed over.</p> + +<pre class="brush: js">function Person() { + var self = this; // Some choose `that` instead of `self`. + // Choose one and be consistent. + self.age = 0; + + setInterval(function growUp() { + // The callback refers to the `self` variable of which + // the value is the expected object. + self.age++; + }, 1000); +}</pre> + +<p>Alternatively, a <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">bound function</a> could be created so that the proper <code>this</code> value would be passed to the <code>growUp()</code> function.</p> + +<p>Arrow functions capture the <code>this</code> value of the enclosing context, so the following code works as expected.</p> + +<pre class="brush: js">function Person(){ + this.age = 0; + + setInterval(() => { + this.age++; // |this| properly refers to the person object + }, 1000); +} + +var p = new Person();</pre> + +<h2 id="Predefined_functions">Predefined functions</h2> + +<p>JavaScript has several top-level, built-in functions:</p> + +<dl> + <dt>{{jsxref("Global_Objects/eval", "eval()")}}</dt> + <dd> + <p>The <code><strong>eval()</strong></code> method evaluates JavaScript code represented as a string.</p> + </dd> + <dt>{{jsxref("Global_Objects/uneval", "uneval()")}} {{non-standard_inline}}</dt> + <dd> + <p>The <code><strong>uneval()</strong></code> method creates a string representation of the source code of an {{jsxref("Object")}}.</p> + </dd> + <dt>{{jsxref("Global_Objects/isFinite", "isFinite()")}}</dt> + <dd> + <p>The global <code><strong>isFinite()</strong></code> function determines whether the passed value is a finite number. If needed, the parameter is first converted to a number.</p> + </dd> + <dt>{{jsxref("Global_Objects/isNaN", "isNaN()")}}</dt> + <dd> + <p>The <code><strong>isNaN()</strong></code> function determines whether a value is {{jsxref("Global_Objects/NaN", "NaN")}} or not. Note: coercion inside the <code>isNaN</code> function has <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/isNaN#Description">interesting</a> rules; you may alternatively want to use {{jsxref("Number.isNaN()")}}, as defined in ECMAScript 6, or you can use <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/typeof">typeof</a></code> to determine if the value is Not-A-Number.</p> + </dd> + <dt>{{jsxref("Global_Objects/parseFloat", "parseFloat()")}}</dt> + <dd> + <p>The <code><strong>parseFloat()</strong></code> function parses a string argument and returns a floating point number.</p> + </dd> + <dt>{{jsxref("Global_Objects/parseInt", "parseInt()")}}</dt> + <dd> + <p>The <code><strong>parseInt()</strong></code> function parses a string argument and returns an integer of the specified radix (the base in mathematical numeral systems).</p> + </dd> + <dt>{{jsxref("Global_Objects/decodeURI", "decodeURI()")}}</dt> + <dd> + <p>The <code><strong>decodeURI()</strong></code> function decodes a Uniform Resource Identifier (URI) previously created by {{jsxref("Global_Objects/encodeURI", "encodeURI")}} or by a similar routine.</p> + </dd> + <dt>{{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent()")}}</dt> + <dd> + <p>The <code><strong>decodeURIComponent()</strong></code> method decodes a Uniform Resource Identifier (URI) component previously created by {{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent")}} or by a similar routine.</p> + </dd> + <dt>{{jsxref("Global_Objects/encodeURI", "encodeURI()")}}</dt> + <dd> + <p>The <code><strong>encodeURI()</strong></code> method encodes a Uniform Resource Identifier (URI) by replacing each instance of certain characters by one, two, three, or four escape sequences representing the UTF-8 encoding of the character (will only be four escape sequences for characters composed of two "surrogate" characters).</p> + </dd> + <dt>{{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent()")}}</dt> + <dd> + <p>The <code><strong>encodeURIComponent()</strong></code> method encodes a Uniform Resource Identifier (URI) component by replacing each instance of certain characters by one, two, three, or four escape sequences representing the UTF-8 encoding of the character (will only be four escape sequences for characters composed of two "surrogate" characters).</p> + </dd> + <dt>{{jsxref("Global_Objects/escape", "escape()")}} {{deprecated_inline}}</dt> + <dd> + <p>The deprecated <code><strong>escape()</strong></code> method computes a new string in which certain characters have been replaced by a hexadecimal escape sequence. Use {{jsxref("Global_Objects/encodeURI", "encodeURI")}} or {{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent")}} instead.</p> + </dd> + <dt>{{jsxref("Global_Objects/unescape", "unescape()")}} {{deprecated_inline}}</dt> + <dd> + <p>The deprecated <code><strong>unescape()</strong></code> method computes a new string in which hexadecimal escape sequences are replaced with the character that it represents. The escape sequences might be introduced by a function like {{jsxref("Global_Objects/escape", "escape")}}. Because <code>unescape()</code> is deprecated, use {{jsxref("Global_Objects/decodeURI", "decodeURI()")}} or {{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent")}} instead.</p> + </dd> +</dl> + +<p>{{PreviousNext("Web/JavaScript/Guide/Loops_and_iteration", "Web/JavaScript/Guide/Expressions_and_Operators")}}</p> diff --git a/files/it/web/javascript/guida/grammar_and_types/index.html b/files/it/web/javascript/guida/grammar_and_types/index.html new file mode 100644 index 0000000000..2a43d5230d --- /dev/null +++ b/files/it/web/javascript/guida/grammar_and_types/index.html @@ -0,0 +1,659 @@ +--- +title: Grammatica e tipi +slug: Web/JavaScript/Guida/Grammar_and_types +translation_of: Web/JavaScript/Guide/Grammar_and_types +--- +<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Introduction", "Web/JavaScript/Guide/Control_flow_and_error_handling")}}</div> + +<p class="summary">Questo capitolo tratta la sintassi di base di JavaScript, le dichiarazioni di variabili, i tipi di dati e i letterali.</p> + +<h2 id="Nozioni_di_base">Nozioni di base</h2> + +<p>JavaScript mutua molta della sua sintassi da Java, ma è anche influenzato da Awk, Perl e Python.</p> + +<p>JavaScript è sensibile al maiuscolo-minuscolo (<strong>case-sensitive</strong>) e usa l'insieme di caratteri <strong>Unicode</strong>.</p> + +<p>In JavaScript, le istruzioni sono separate da punto e vigola (;). Spazi, tabulazioni e caratteri di a capo sono chiamati spazi bianchi. Il testo sorgente di uno script JavaScript viene analizzato da sinistra verso destra ed è convertito in una sequenza di elementi di input che sono: token, caratteri di controllo, terminatori di linea, commenti o spazi bianchi. ECMAScript definisce anche determinate parole chiave e letterali e ha delle regole per l'inserimento automatico dei punti e virgola (<a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Automatic_semicolon_insertion">ASI</a>) per chiudere le istruzioni. Tuttavia si raccomanda di aggiungere sempre un punto e virgola per terminare ogni istruzione, questo eviterà effetti collaterali. Per maggiori informazioni si veda il riferimento dettagliato riguardo la <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar">lexical grammar</a> di JavaScript.</p> + +<h2 id="Commenti">Commenti</h2> + +<p>La sintassi dei <strong>commenti</strong> è la stessa di quelli del C++ e di molti altri linguaggi:</p> + +<pre class="brush: js">// una linea di commento + +/* questo è un commento più lungo, + occupa più linee + */ + +/* Però non puoi /* annidare i commenti */ SyntaxError */</pre> + +<h2 id="Dichiarazioni">Dichiarazioni</h2> + +<p>Ci sono tre tipi di dichiarazioni in JavaScript.</p> + +<dl> + <dt>{{jsxref("Statements/var", "var")}}</dt> + <dd>Dichiarazione di una variabile, opzionalmente inizializzata ad un valore.</dd> + <dt>{{experimental_inline}} {{jsxref("Statements/let", "let")}}</dt> + <dd>Dichiarazione di una variabile locale con visibilità nel blocco, opzionalmente inizializzata ad un valore.</dd> + <dt>{{experimental_inline}} {{jsxref("Statements/const", "const")}}</dt> + <dd>Dichiarazione di una costante in sola lettura con un nome.</dd> +</dl> + +<h3 id="Variabili">Variabili</h3> + +<p>Le variabili sono nomi simbolici da usare nelle applicazioni in luogo dei valori che rappresentano. I nomi delle variabili, chiamati {{Glossary("Identifier", "identificatori")}}, devono seguire certe regole di scrittura.</p> + +<p>Un identificatore JavaScript deve iniziare con una lettera, un trattino basso (_) o segno del dollaro ($), mentre i caratteri successivi possono anche essere le cifre (0-9). Siccome JavaScript è case-sensitive, le lettere includono i caratteri da "A" fino a "Z" (maiuscoli) e i caratteri da "a" fino a "z" (minuscoli).</p> + +<p>Si possono usare anche le lettere ISO 8859-1 o Unicode come per esempio å e ü negli identificatori. Possono essere usate anche le <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#String_literals">sequenze di escape di Unicode</a> come caratteri negli identificatori.</p> + +<p>Alcuni esempi di nomi leciti sono <code>Number_hits</code>, <code>temp99</code> e <code>_name</code>.</p> + +<h3 id="Dichiarazione_di_variabili">Dichiarazione di variabili</h3> + +<p>Una variabile può essere dichiarata in tre modi:</p> + +<ul> + <li>Con la parola chiave {{jsxref("Statements/var", "var")}}, per esempio, <code>var x = 42</code>. Questa sintassi può essere usata per dichiarare sia variabili locali che globali.</li> + <li>Semplicemente assegnandole un valore. Per esempio, <code>x = 42</code>. questo dichiara sempre una variabile globale. Genera uno warning nella modalità strict di JavaScript. Questa variante non dovrebbe essere usata.</li> + <li>Con la parola chiave {{jsxref("Statements/let", "let")}}, ad esempio, <code>let y = 13</code>. Questa sintassi può essere usata per dichiarare una variabile locale visibile in un blocco. Vedi <a href="#Variable_scope">Visibilità delle variabili</a> più in basso.</li> +</ul> + +<h3 id="Valutazione_delle_variabili">Valutazione delle variabili</h3> + +<p>Una variabile dichiarata usando le istruzioni <code>var</code> o <code>let</code> senza nessun valore iniziale specificato ha il valore {{jsxref("undefined")}}.</p> + +<p>Il tentativo di accedere ad una variabile non dichiarata o di accedere ad un identificatore dichiarato con l'istruzione <code>let,</code> prima di una sua inizializzazione, provocherà un'eccezione di {{jsxref("ReferenceError")}}:</p> + +<pre class="brush: js">var a; +console.log("Il valore di a è " + a); // Scrive nel log "Il valore di a è undefined" + +console.log("Il valore di b è " + b); // Solleva una eccezione ReferenceError + +<code>console.log("Il valore di c è " + c); // </code>Scrive nel log "<code>Il valore di c è undefined" </code> +<code>var c; + +console.log("Il valore di x è " + x); // </code>Solleva una eccezione<code> ReferenceError: x is not defined +let x;</code></pre> + +<p>Si può usare <code>undefined</code> per determinare se una variabile ha un valore oppure no. Nel codice seguente alla variabile <code>input</code> non è stato assegnato un valore e la condizione dell'istruzione <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/if...else" title="en-US/docs/JavaScript/Reference/Statements/if...else">if</a></code> è</p> + +<p>valuta a <code>true</code>.</p> + +<pre class="brush: js">var input; +if(input === undefined){ + faiQuesto(); +} else { + faiQuello(); +} +</pre> + +<p>Il valore <code>undefined</code> si comporta come <code>false</code> quando viene usato in un contesto booleano. Ad esempio il codice seguente esegue la funzione <code>miaFunzione</code> perché l'elemento di <code>mioArray</code> non è definito:</p> + +<pre class="brush: js">var mioArray = []; +if (!mioArray[0]) miaFunzione(); +</pre> + +<p>Il valore <code>undefined</code> viene convertito in <code>NaN</code> quando viene usato in un contesto numerico.</p> + +<pre class="brush: js">var a; +a + 2; // Viene valutato a NaN</pre> + +<p>Quando viene valutata una variabile {{jsxref("null")}}, il valore null si comporta come 0 in un contesto numerico e <code>false </code>in un contesto booleano. Per esempio:</p> + +<pre class="brush: js">var n = null; +console.log(n * 32); // Visualizzera nella console 0 +</pre> + +<h3 id="Visibilità_delle_variabili">Visibilità delle variabili</h3> + +<p>Quando una variabile viene dichiarata fuori da una qualsiasi funzione viene chiamata variabile <em>globale</em>, poiché è disponibile in tutto il codice nel documento corrente. Quando invece la variabile viene dichiarata in una funzione viene chiamata variabile <em>locale</em>, perché è disponibile soltanto all'interno di quella funzione.</p> + +<p>JavaScript prima di ECMAScript 2015 non aveva una visibilità a <a href="/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Block_statement" title="en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Block_statement">livello di blocco</a>; piuttosto una variabile dichiarata all'interno di un blocco era locale alla <em>funzione (o al contesto globale)</em> in cui il blocco risiedeva. Per esempio il seguente codice scriverà nel log 5, perché la visibilità di <code>x</code> è la funzione (o il contesto globale) all'interno del quale <code>x</code> viene dichiarata e non il blocco, che in questo caso è l'istruzione <code>if</code>.</p> + +<pre class="brush: js">if (true) { + var x = 5; +} +console.log(x); // 5 +</pre> + +<p>Il comportamento cambia quando si usa l'istruzione <code>let</code> introdotta in ECMAScript 2015.</p> + +<pre class="brush: js">if (true) { + let y = 5; +} +console.log(y); // ReferenceError: y non è definita +</pre> + +<h3 id="Sollevamento_delle_variabili">Sollevamento delle variabili</h3> + +<p>Un'altra cosa inusuale riguardo le variabili in JavaScript è che si può fare riferimento ad una variabile dichiarata più avanti nello script senza causare una eccezione. Questo concetto è conosciuto come innalzamento (<strong>hoisting</strong>); le variabili in JavaScript sono in un certo senso "sollevate" o spostate all'inizio della definizione del corpo della funzione o dell'istruzione. Tuttavia le variabili che sono state sollevate ritornano il valore <code>undefined</code>. Dunque se viene usata (o si fa riferimento ad) una variabile prima che venga dichiarata questa ritornà <code>undefined</code>.</p> + +<pre class="brush: js">/** + * Esempio 1 + */ +console.log(x === undefined); // visualizza "true" nel log +var x = 3; + +/** + * Esempio 2 + */ +var myvar = "mio valore"; + +(function() { + console.log(myvar); // visualizza "undefined" nel log + var myvar = "valore locale"; +})(); +</pre> + +<p>L'esempio sopra sarà interpretato nello stesso modo di:</p> + +<pre class="brush: js">/** + * Esempio 1 + */ +var x; +console.log(x === undefined); // visualizza nel log "true" +x = 3; + +/** + * Esempio 2 + */ +var myvar = "mio valore"; + +(function() { + var myvar; + console.log(myvar); // undefined + myvar = "valore locale"; +})(); +</pre> + +<p>Per via dell'innalzamento, tutte le istruzioni <code>var</code> in una funzione dovrebbero essere posizionate prima di ogni altra istruzione che vada a definire una funzione. Questa buona pratica incrementa la chiarezza del codice.</p> + +<p>In ECMAScript 2015, <code>let (const)</code> <strong>non solleverà/sposterà</strong> la variabile all'inizio della dichiarazione del blocco, dunque un riferimento alla variabile nel blocco prima che questa venga dichiarata risulterà in un'eccezione di {{jsxref("ReferenceError")}}. La variabile si dice in una "zona temporale morta" ("temporal dead zone") dall'inizio del blocco fino alla a che non si incontri la sua dichiarazione.</p> + +<pre><code>console.log(x); // Solleverà un'eccezione ReferenceError +let x = 3</code></pre> + +<h3 id="Sollevamento_delle_Funzioni">Sollevamento delle Funzioni</h3> + +<p>Nel caso delle funzioni, solo la dichiarazione della funzione verrà spostata all'inizio. Se la funzione viene introdotta da un'espressione, in questo caso non verrà spostata.</p> + +<pre><code>/* Function declaration */ + +foo(); // "bar" + +function foo() { + console.log("bar"); +} + + +/* Function expression */ + +baz(); // TypeError: baz is not a function + +var baz = function() { + console.log("bar2"); +};</code></pre> + +<h3 id="Variabli_globali">Variabli globali</h3> + +<p>Le variabili globali sono in effetti proprietà dell'<em>oggetto globale</em>. Nelle pagine web l'oggetto globale è {{domxref("window")}} quindi è possibile impostare e accedere alle variabili globali usando la sintassi <code>window.<em>variabile</em></code>.</p> + +<p>Di conseguenza è possibile accedere a variabili globali dichiarate in una finestra o un frame da un'altra finestra o frame specificando il nome della finestra o del frame. Per esempio, se una variabile chiamata <code>numeroDiTelefono</code> è dichiarata in un documento, è possibile far riferimento a questa variabile dall'interno di un iframe come <code>parent.numeroDiTelefono</code>.</p> + +<h3 id="Costanti">Costanti</h3> + +<p>È possibile creare una costante in sola lettura dandole un nome usando la parola chiave {{jsxref("Statements/const", "const")}}. La sintassi di un identificatore di costante è la stessa di un identificatore di variabile: deve iniziare con una lettera, trattino basso (_) o segno del dollaro ($) e può contenere caratteri alfabetici, numerici o trattini bassi.</p> + +<pre class="brush: js">const PI = 3.14; +</pre> + +<p>Una costante non può cambiare il suo valore attraverso ulteriori assegnazioni o essere ridichiarata mentre lo script è in esecuzione. Deve anche essere inizializzata ad un valore.</p> + +<p>Le regole di visibilità per le costanti sono le stesse di quelle per le variabil con visibilità al livello di blocco dichiarate con l'istruzione <code>let</code>. Se la parola chiave <code>const</code> viene omessa si assume che l'identificatore rappresenta una variabile.</p> + +<p>Non è possibile dichiarare una costante con lo stesso nome di una funzione o di una variabile nello stesso spazio di visibilità. Per esempio:</p> + +<pre class="brush: js">// QUESTO CAUSERÀ UN ERRORE +function f() {}; +const f = 5; + +// ANCHE QUESTO CAUSERÀ UN ERRORE +function f() { + const g = 5; + var g; + + //istruzioni +} +</pre> + +<h2 id="Strutture_dati_e_tipi">Strutture dati e tipi</h2> + +<h3 id="Tipi_di_dato">Tipi di dato</h3> + +<p>L'ultimo standard ECMAScript definisce sette tipi di dati:</p> + +<ul> + <li>Sei tipi di dato che sono {{Glossary("Primitive", "primitives")}}: + <ul> + <li>{{Glossary("Boolean")}}. <code>true</code> e <code>false</code>.</li> + <li>{{Glossary("null")}}. Una parola chiave che denota un valore nullo. Siccome JavaScript è case-sensitive, <code>null</code> non è lo stesso di <code>Null</code>, <code>NULL</code>, o qualsiasi altra variante.</li> + <li>{{Glossary("undefined")}}. Una proprietà top-level il cui valore non è stato definito.</li> + <li>{{Glossary("Number")}}. <code>42</code> oppure <code>3.14159</code>.</li> + <li>{{Glossary("String")}}. "Salve"</li> + <li>{{Glossary("Symbol")}} (nuovo in ECMAScript 2015). Un tipo di dato la cui istanza è unica e immutabile.</li> + </ul> + </li> + <li>e {{Glossary("Object")}}</li> +</ul> + +<p>Sebbene questi tipi di dati siano relativamente pochi questi permettono di eseguire funzioni utili nelle applicazioni. {{jsxref("Object", "Objects")}} e {{jsxref("Function", "functions")}} sono altri elementi fondamentali nel linguaggio. Si può pensatre agli oggetti come a contenitori con un nome per dei valori e alle funzioni come a procedure che l'applicazione può compiere.</p> + +<h3 id="Conversione_dei_tipi_dei_dati">Conversione dei tipi dei dati</h3> + +<p>JavaScript è un linguaggio con tipi assegnati dinamicamente. Questo significa che non si va a specificare il tipo di dato che una variabile conterrà quando viene dichiarata e anche che il tipo di un dato viene convertito automaticamente a seconda delle necessità durante l'esecuzione dello script. Così, per esempio, si può definire una variabile come segue:</p> + +<pre class="brush: js">var risposta = 42; +</pre> + +<p>E più avanti è possibile assegnare alla stessa variabile un valore testo (stringa), per esempio:</p> + +<pre class="brush: js">risposta = "Grazie per tutti i pesci..."; +</pre> + +<p>Poiché in JavaScript i tipi si assegnano dinamicamente questa assegnazione non causerà un messaggio di errore.</p> + +<p>Nelle espressioni che coinvolgono valori numerici e stringhe con l'operatore + JavaScript converte i valori numerici in stringhe. Per esempio si considerino le seguenti istruzioni:</p> + +<pre class="brush: js">x = "La risposta è " + 42 // "La risposta è 42" +y = 42 + " è la risposta" // "42 è la risposta" +</pre> + +<p>In istruzioni che coinvolgono altri operatori JavaScript non converte valori numerici in stringa. Per esempio:</p> + +<pre class="brush: js">"37" - 7 // 30 +"37" + 7 // "377" +</pre> + +<h3 id="Conversione_delle_stringhe_in_numeri">Conversione delle stringhe in numeri</h3> + +<p>Nel caso in cui il valore che rappresenta un numero è memorizzato come stringa ci sono dei metodi per eseguire la conversione:</p> + +<ul> + <li id="parseInt()_and_parseFloat()">{{jsxref("parseInt", "parseInt()")}}</li> + <li>{{jsxref("parseFloat", "parseFloat()")}}</li> +</ul> + +<p><code>parseInt</code> ritornerà soltanto numeri interi, ha una utilità ridotta per i numeri decimali. In aggiunta è buona pratica nell'uso di <code>parseInt</code> includere il parametro base, questo parametro è usato per specificare quale sistema di numerazione deve essere usato.</p> + +<p>Un metodo alternativo per recuperare un numero da un testo è di usare l'operatore + (più unario):</p> + +<pre class="brush: js">"1.1" + "1.1" = "1.11.1" +(+"1.1") + (+"1.1") = 2.2 +// Note: le parentesi sono aggiunte per chiarezza, non sono richieste.</pre> + +<h2 id="Letterali">Letterali</h2> + +<p>I letterali sono usati per rappresentare i valori in JavaScript. Questi sono valori fissati, non variabili, che venvono <em>letteralmente</em> inseriti nello script. Questa sezione descrive i seguenti tipi di letterali:</p> + +<ul> + <li>{{anch("Letterali di array")}}</li> + <li>{{anch("Letterali di booleani")}}</li> + <li>{{anch("Letterali di numeri in virgola-mobile")}}</li> + <li>{{anch("Letterali di numeri Interi")}}</li> + <li>{{anch("Letterali di oggeti")}}</li> + <li>{{anch("Letterali di RegExp")}}</li> + <li>{{anch("Letterali di stringhe")}}</li> +</ul> + +<h3 id="Letterali_di_array">Letterali di array</h3> + +<p>Un letterale di array è un elenco di zero o più espressioni ognuna delle quali rappresenta un elemento dell'array, inclusa in parentesi quadre (<code>[]</code>). Quando si crea un array usando un letterale l'array stesso viene inizializzato con i valori specificati come elementi, la sua lunghezza è impostata al numero di elementi specificati.</p> + +<p>Il seguente esempio crea un array <code>tipiDiCaffe</code> con tre elementi e una lunghezza di tre:</p> + +<pre class="brush: js">var tipiDiCaffe = ["French Roast", "Colombian", "Kona"]; +</pre> + +<div class="note"> +<p><strong>Nota:</strong> Un letterale di array è un tipo di inizializzatore di oggetto. Vedi <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Using_object_initializers" title="en-US/docs/JavaScript/Guide/Working with Objects#Using Object Initializers">Usando inizializzatori di Oggett</a>i.</p> +</div> + +<p>Se un array viene creato usando un letterale in uno script top-level, JavaScript interpreta l'array ogni volta che valuta l'espressione che contiene l'array letterale. In aggiunta l'array letterale usato in una funzione viene creato ogni volta che la funzione viene chiamata.</p> + +<p>Gli array letterali sono anche oggetti <code>Array</code>. Si veda {{jsxref("Array")}} e <a href="/en-US/docs/Web/JavaScript/Guide/Indexed_collections">Collezione indicizzata</a> per i dettagli sugli oggetti <code>Array</code>.</p> + +<h4 id="Virgole_aggiuntive_negli_array_letterali">Virgole aggiuntive negli array letterali</h4> + +<p>Non è obbligatorio specificare tutti gli elementi in un array letterale. Mettendo due virgole in fila l'array viene creato con il valore <code>undefined</code> per gli elementi non specificati. Il seguente esempio crea l'array <code>pesce</code>:</p> + +<pre class="brush: js">var pesce = ["Leone", , "Angelo"]; +</pre> + +<p>Questo array ha due elementi con un valore e un elemento vuoto (<code>pesce[0]</code> is "Leone", <code>pesce[1]</code> è <code>undefined</code>, e <code>pesce[2]</code> è "Angelo").</p> + +<p>Inserendo una virgola in fondo alla lista degli elementi la virgola stessa verrà ignorata. Nel seguente esempio la lunghezza dell'array è tre, non c'è un <code>miaLista[3]</code>. Tutte le altre virgole nell'elenco indicano un elemento nuovo.</p> + +<div class="note"> +<p><strong>Nota:</strong> Le virgole in coda possono creare errori nelle versioni più vecchie dei browser ed è buona pratica rimuoverle.</p> +</div> + +<pre class="brush: js">var miaLista = ['casa', , 'scuola', ]; +</pre> + +<p>Nel seguente esempio la lunghezza dell'array è quattro e <code>miaLista[0]</code> e <code>mialista[2]</code> sono mancanti.</p> + +<pre class="brush: js">var miaLista = [ , 'casa', , 'scuola']; +</pre> + +<p>Nel seguente esempio la lunghezza dell'array è quattro e <code>mialista[1]</code> e <code>miaLista[3]</code> sono mancanti. Soltanto l'ultima virgola viene ignorata.</p> + +<pre class="brush: js">var miaLista = ['casa', , 'scuola', , ]; +</pre> + +<p>Comprendere il comportamento delle virgole in più è importante per comprendere JavaScript come linguaggio, in ogni caso nella scrittura del codice: è buona norma dichiarare esplicitamente gli elementi mancanti come <code>undefined</code>, questo migliorerà la chiarezza e la manutenibilità del codice.</p> + +<h3 id="Letterali_di_booleani">Letterali di booleani</h3> + +<p>Il tipo Boolean ha due valori letterali: <code>true</code> e <code>false</code>.</p> + +<p>Non vanno confusi i valori primitivi Booleani <code>true</code> e <code>false</code> con i valori true e false dell'oggetto Boolean. L'oggetto Boolean è un involucro intorno al tipo primitivo Booleano. Vedi {{jsxref("Global_Objects/Boolean", "Boolean")}} per maggiori informazioni.</p> + +<h3 id="Letterali_di_numeri_Interi">Letterali di numeri Interi</h3> + +<p>Gli interi possono essere rappresentati in decimale (base 10), esadecimale (base 16), ottale (base 8) e binario (base 2).</p> + +<ul> + <li>I letterali decimali interi sono formati da una sequenza di cifre senza uno 0 (zero) iniziale.</li> + <li>0 (zero) iniziali in un letterale intero, o un iniziale 0o (o 0O) indicano che il numero è in ottale. Gli interi ottali possono includere soltanto le cifre 0-7.</li> + <li>Un iniziale 0x (o 0X) indica l'esadecimale. Interi esadecimali possono includere le cifre (0-9) e le lettere a-f e A-F.</li> + <li> + <p>Un iniziale 0b (o 0B) indica il binario. Gli interi binari possono includere soltanto le cifre 0 e 1.</p> + </li> +</ul> + +<p>Alcuni esempi i di letterali di interi sono:</p> + +<pre class="eval">0, 117 and -345 (decimale, base 10) +015, 0001 and -0o77 (ottale, base 8) +0x1123, 0x00111 and -0xF1A7 (esadecimale, "hex" o base 16) +0b11, 0b0011 and -0b11 (binario, base 2) +</pre> + +<p>Per maggiori informazioni, vedi <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Numeric_literals">Numeric literals in the Lexical grammar reference</a>.</p> + +<h3 id="Letterali_di_numeri_in_virgola-mobile">Letterali di numeri in virgola-mobile</h3> + +<p>Un letterale per un numero in virgola mobile può avere le seguenti parti:</p> + +<ul> + <li>Un intero in base dieci che può avere un segno (cioè può essere preceduto da "+" o "-"),</li> + <li>Un punto decimale ("."),</li> + <li>Una parte decimale (un altro numero in base dieci),</li> + <li>Un esponente.</li> +</ul> + +<p>La parte esponente è una "e" o "E" seguita da un intero che può essere con segno (preceduto da "+" o "-"). Un numero in virgola mobile deve avere almeno una cifra e un punto oppure una "e" (o "E").</p> + +<p>Più concisamente la sintassi è:</p> + +<pre class="eval">[(+|-)][cifre][.cifre][(E|e)[(+|-)]cifre] +</pre> + +<p>Per esempio:</p> + +<pre class="eval">3.1415926 +-.123456789 +-3.1E+12 +.1e-23 +</pre> + +<h3 id="Letterali_di_oggetti">Letterali di oggetti</h3> + +<p>Un letterale di un oggetto è una lista di zero o più coppie di nomi di proprietà e valori associati di un oggetto racchiusi in parentesi graffe (<code>{}</code>). Non andrebbe usato un letterale di un oggetto all'inizio di una istruzione, questo porterà ad un errore o non si comporterà come ci si aspetta perché <code>{</code> sarà interpretata come l'inizio di un blocco.</p> + +<p>Quello seguente è un esempio di un letterale di un oggetto. Il primo elemento dell'oggetto <code>automobile</code> definisce un proprietà, <code>miaAutomobile</code>, e gli assegna il testo "<code>Saturn</code>"; il secondo elemento, la proprietà <code>getAutomobile</code>, è immediatamente assegnata al valore risultante dall'invocazione della funzione <code>(tipiDiAutomobile("Honda"));</code> il terzo elemento, la proprietà <code>speciale</code>, usa una variabile esistente (<code>saldi</code>).</p> + +<pre class="brush: js">var saldi = "Toyota"; + +function tipiDiAutomobile(nome) { + if (nome === "Honda") { + return nome; + } else { + return "Spiacente, noi non vendiamo " + nome + "."; + } +} + +var automobile = { miaAutomobile: "Saturn", getAutomobile: tipiDiAutomobile("Honda"), speciale: saldi }; + +console.log(automobile.miaAutomobile); // Saturn +console.log(automobile.getAutomobile); // Honda +console.log(automobile.speciale); // Toyota +</pre> + +<p>In aggiunta si possono usare letterali di tipo numerico o testo come nome di una proprietà o annidare un oggetto dentro un altro. Il seguente esempio usa queste opzioni.</p> + +<pre class="brush: js">var automobile = { molteAutomobili: {a: "Saab", "b": "Jeep"}, 7: "Mazda" }; + +console.log(automobile.molteAutomobili.b); // Jeep +console.log(automobile[7]); // Mazda +</pre> + +<p>I nomi delle proprietà degli oggetti possono essere un testo qualsiasi, incluso il testo vuoto. Se il nome della proprietà non è un {{Glossary("Identifier","identifier")}} JavaScript valido o un numero dovrà essere racchiuso tra virgolette. I nomi di proprietà che non sono identificatori validi non possono neanche essere acceduti usando il punto (<code>.</code>), potranno però essere acceduti e impostati usando la notazione analoga a quella degli array ("<code>[]</code>").</p> + +<pre class="brush: js">var nomiDiProprietaInusuali = { + "": "Una stringa vuota", + "!": "Bang!" +} +console.log(nomiDiProprietaInusuali.""); // SyntaxError: Unexpected string +console.log(nomiDiProprietaInusuali[""]); // Una stringa vuota +console.log(nomiDiProprietaInusuali.!); // SyntaxError: Unexpected token ! +console.log(nomiDiProprietaInusuali["!"]); // Bang!</pre> + +<p>In ES2015, i letterali di oggetti sono estesi per supportare l'impostazione del prototipo al momento della costruzione, forme abbreviate per le assegnazioni tipo <code>foo: foo</code>, definizioni di metodi, eseguire chiamate a super e calcolare il nome di proprietà con espressioni. Nel'insieme queste aggiunte avvicinano i letterali di oggetti e le dichiarazioni delle classi permettendo quindi di beneficiare di alcune delle stesse comodità della progettazione orientata agli oggetti.</p> + +<pre class="brush: js">var obj = { + // __proto__ + __proto__: theProtoObj, + // Abbreviazione per ‘handler: handler’ + handler, + // Metodi + toString() { + // Super calls + return "d " + super.toString(); + }, + // Nomi di proprietà calcolati (dinamici) + [ 'prop_' + (() => 42)() ]: 42 +};</pre> + +<p>Nota che:</p> + +<pre class="brush: js">var foo = {a: "alpha", 2: "two"}; +console.log(foo.a); // alpha +console.log(foo[2]); // two +//console.log(foo.2); // Error: missing ) after argument list +//console.log(foo[a]); // Error: a is not defined +console.log(foo["a"]); // alpha +console.log(foo["2"]); // two +</pre> + +<h3 id="Letterali_di_RegExp">Letterali di RegExp</h3> + +<p>Un letterale di espressione regolare (RegExp) è un modello (pattern) racchiuso tra barre. il seguente è un esempio di un letterale di una espressione regolare.</p> + +<pre class="brush: js">var re = /ab+c/;</pre> + +<h3 id="Letterali_di_stringhe">Letterali di stringhe</h3> + +<p>Un letterale di testo (stringa nel preguo del testo) è formato da zero o più caratteri racchiusi tra virgolette doppie (<code>"</code>) o singole (<code>'</code>). Una stringa deve essere delimitata da virgolette dello stesso tipo; cioè o entrambe singole o entrambe doppie. I seguenti sono esempi di leterali di testo:</p> + +<pre class="brush: js">"foo" +'bar' +"1234" +"una linea \n altra linea" +"prima dell'una" +</pre> + +<p>È possibile chiamare qualsiasi metodo dell'oggetto String su una stringa —JavaScript converte automaticamente la stringa in un oggetto temporaneo di tipo String, chiama il metodo, poi elimina l'oggetto temporaneo. È anche possibile usare la proprietà <code>String.length</code> con una stringa letterale:</p> + +<pre class="brush: js">console.log("John's cat".length) +// Stamperà il numero di simboli nel testo inclusi gli spazi. +// In questo caso 10. +</pre> + +<p>In ES2015 sono disponibili i letterali modello. I letterali modello sono racchiusi tra accenti gravi (` `) (<a href="http://en.wikipedia.org/wiki/Grave_accent" rel="noopener">accento grave</a>) anziché apici doppi o singoli. Le stringhe modello fornisco dello "zucchero sintattico" per la costruzione delle stringhe. È simile all'interpolazione delle stringhe di Perl, Python e altri. Opzionalmente, un'etichetta può essere aggiunta per permettere la personalizzazione nella costruzione della stringa, evitare gli attacchi per injection o costruire strutture dati di livello più alto dal contenuto di una stringa.</p> + +<pre class="brush: js">// Creazione di un letterale string di base +`In JavaScript '\n' is a line-feed.` + +// Stringa multilinea +`In JavaScript this is + not legal.` + +// Interpolazione di stringhe +var name = "Bob", time = "today"; +`Hello ${name}, how are you ${time}?` + +// La costruzione di un prefisso di richiesta HTTP è usata per interpretare le sostituzioni e le costruzioni +POST`http://foo.org/bar?a=${a}&b=${b} + Content-Type: application/json + X-Credentials: ${credentials} + { "foo": ${foo}, + "bar": ${bar}}`(myOnReadyStateChangeHandler);</pre> + +<p>Si dovrebbero usare i letterali stringa a meno che non ci sia specifico bisogno di usare un oggetto String. Si veda {{jsxref("String")}} per dettagli sull'oggetto <code>String</code>.</p> + +<h4 id="Uso_di_caratteri_speciali_nelle_stringhe">Uso di caratteri speciali nelle stringhe</h4> + +<p>Oltre ai caratteri ordinari si possono includere anche dei caratteri speciali nelle stringhe come mostrato nel seguente esempio.</p> + +<pre class="brush: js">"prima linea \n seconda linea" +</pre> + +<p>La seguente tabella elenca i caratteri speciali che possono essere usati nelle stringhe JavaScript.</p> + +<table class="standard-table"> + <caption>Table: JavaScript caratteri speciali</caption> + <thead> + <tr> + <th scope="col">Carattere</th> + <th scope="col">Significato</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>\0</code></td> + <td>Byte null</td> + </tr> + <tr> + <td><code>\b</code></td> + <td>Backspace</td> + </tr> + <tr> + <td><code>\f</code></td> + <td>Form feed</td> + </tr> + <tr> + <td><code>\n</code></td> + <td>New line</td> + </tr> + <tr> + <td><code>\r</code></td> + <td>Carriage return</td> + </tr> + <tr> + <td><code>\t</code></td> + <td>Tab</td> + </tr> + <tr> + <td><code>\v</code></td> + <td>Tab verticale</td> + </tr> + <tr> + <td><code>\'</code></td> + <td>Apostrofo o virgoletta singola</td> + </tr> + <tr> + <td><code>\"</code></td> + <td>Virgoletta doppia</td> + </tr> + <tr> + <td><code>\\</code></td> + <td>Il carattere backslash</td> + </tr> + <tr> + <td><code>\<em>XXX</em></code></td> + <td>Il carattere con la codifica Latin-1 specificata da fino a tre caratteri <em>XXX</em> tra 0 e 377. Per esempio \251 è la sequenza ottale per il simbolo di copyright.</td> + </tr> + <tr> + </tr> + <tr> + <td><code>\x<em>XX</em></code></td> + <td>Il carattere con la codifica Latin-1 specificata da due cifre esadecimali <em>XX</em> comprese tra 00 e FF. Per esempio \xA9 è la sequenza ottale per il simbolo di copyright.</td> + </tr> + <tr> + </tr> + <tr> + <td><code>\u<em>XXXX</em></code></td> + <td>Il carattere Unicode specificato da quattro cifre esadecimali <em>XXXX</em>. Per esempio \u00A9 è la sequenza Unicode per il simbolo di copyright. Vedi <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#String_literals">Unicode escape sequences</a>.</td> + </tr> + <tr> + <td><code>\u<em>{XXXXX}</em></code></td> + <td>Escape per Unicode code point. Per esempio \u{2F804} è la stessa cosa dell'esape semplice Unicode \uD87E\uDC04.</td> + </tr> + </tbody> +</table> + +<h4 id="Caratteri_a_cui_aggiungere_il_backslash_(Escaping)">Caratteri a cui aggiungere il backslash (Escaping)</h4> + +<p>Per i caratteri non elencati nella tabella un backslash (\) prefisso viene ignorato, questo uso è deprecato e devrebbe essere evitato.</p> + +<p>Le virgolette possono essere inserite in una stringa precedendole da un backslash. Questo è noto come <em>escaping</em> delle virgolette. Per esempio:</p> + +<pre class="brush: js">var quote = "Lui legge \"The Cremation of Sam McGee\" by R.W. Service."; +console.log(quote); +</pre> + +<p>Il risultato sarebbe:</p> + +<pre class="eval">Lui legge "The Cremation of Sam McGee" by R.W. Service. +</pre> + +<p>Per includere un backslash in una stringa va fatto l'esape del carattere backslash. Per esempio, per assegnare il percorso <code>c:\temp</code> ad una stringa, usare il seguente:</p> + +<pre class="brush: js">var home = "c:\\temp"; +</pre> + +<p>Si può anche fare l'escape delle interruzioni di linea precedendole con un backslash. Sia il backslash che l'interruzione di linea saranno rimosse dal valore della stringa.</p> + +<pre class="brush: js">var str = "questa stringa \ +è spezzata \ +attraverso multiple\ +linee." +console.log(str); // questa stringa è spezzata attraverso multiple linee. +</pre> + +<p>Sebbene JavaScript non abbia una sintassi tipo "heredoc", è possibile fare qualcosa di simile aggiungendo una sequenza di escape per "a capo" e facendo l'escape dell'a capo alla fine della linea:</p> + +<pre class="brush: js">var poem = +"Roses are red,\n\ +Violets are blue.\n\ +I'm schizophrenic,\n\ +And so am I." +</pre> + +<h2 id="Ulteriori_informazioni">Ulteriori informazioni</h2> + +<p>Questo capitolo si concentra sulla sintassi di base per i tipi e le dichiarazioni. Per imparare di più riguardo i costrutti del linguaggio JavaScript vedi anche i seguenti capitoli in questa guida:</p> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling">Controllo del flusso e gestione errori</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration">Cicli e iterazioni</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions">Funzioni</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators">Espresioni e operatori</a></li> +</ul> + +<p>Nel prossimo capitolo, tratteremo i costrutti del controllo del flusso e la gestione degli errori.</p> + +<p>{{PreviousNext("Web/JavaScript/Guide/Introduction", "Web/JavaScript/Guide/Control_flow_and_error_handling")}}</p> diff --git a/files/it/web/javascript/guida/index.html b/files/it/web/javascript/guida/index.html new file mode 100644 index 0000000000..ba956f21f2 --- /dev/null +++ b/files/it/web/javascript/guida/index.html @@ -0,0 +1,124 @@ +--- +title: JavaScript Guide +slug: Web/JavaScript/Guida +tags: + - AJAX + - JavaScript + - JavaScript_Guide + - NeedsTranslation + - TopicStub +translation_of: Web/JavaScript/Guide +--- +<div>{{jsSidebar("JavaScript Guide")}}</div> + +<p class="summary">La Guida JavaScript mostra come utilizzare <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript">JavaScript</a> e offre una panoramica del linguaggio. Se hai bisogno di informazioni esaustive su una sua funzione, dai un'occhiata alle <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference">reference JavaScript</a>.</p> + +<h2 id="Capitoli">Capitoli</h2> + +<p>Questa guida è divisa in vari capitoli:</p> + +<ul class="card-grid"> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Introduction">Introduzione</a></span> + + <p><a href="/en-US/docs/Web/JavaScript/Guide/Introduction#Where_to_find_JavaScript_information">A proposito di questa guida</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Introduction#What_is_JavaScript">A proposito di JavaScript</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Introduction#JavaScript_and_Java">JavaScript e Java</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Introduction#JavaScript_and_the_ECMAScript_Specification">ECMAScript</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Introduction#Getting_started_with_JavaScript">Strumenti</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Introduction#Hello_world">Hello World</a></p> + </li> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types">Grammatica & Tipi</a></span> + <p><a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Basics">Sintassi base e commenti</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Declarations">Dichiarazioni</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Variable_scope">Scope delle variabili</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Variable_hoisting">Hoisting delle variabili</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Data_structures_and_types">Strutture Dati e Tipi</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Literals">Letterali</a></p> + </li> + <li><span><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling">Controllo di flusso & gestione degli errori</a></span> + <p><code><a href="/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#if...else_statement">if...else</a></code><br> + <code><a href="/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#switch_statement">switch</a></code><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Exception_handling_statements"><code>try</code>/<code>catch</code>/<code>throw</code></a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Utilizing_Error_objects">Oggetto Error</a></p> + </li> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration">Cicli & Iterazioni</a></span> + <p><code><a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#for_statement">for</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#while_statement">while</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#do...while_statement">do...while</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#break_statement">break</a>/<a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#continue_statement">continue</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#for...in_statement">for..in</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#for...of_statement">for..of</a></code></p> + </li> +</ul> + +<ul class="card-grid"> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Functions">Funzioni</a></span> + + <p><a href="/en-US/docs/Web/JavaScript/Guide/Functions#Defining_functions">Definire le funzioni</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Functions#Calling_functions">Chiamare le funzioni </a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Functions#Function_scope">Scope delle funzioni</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Functions#Closures">Closure</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Functions#Using_the_arguments_object">Argomenti</a> & <a href="/en-US/docs/Web/JavaScript/Guide/Functions#Function_parameters">Parametri</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Functions#Arrow_functions">Funzioni freccia</a></p> + </li> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators">Espressioni & operatori</a></span> + <p><a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment_operators">Assegnamento</a> & <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Comparison_operators">Comparazione</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Arithmetic_operators">Operatori aritmetici</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Bitwise_operators">Operatori di bitwise</a> & <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Logical_operators">logici</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Conditional_(ternary)_operator">Operatore (ternario) condizionale</a></p> + </li> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Numbers_and_dates">Numeri & Date</a></span><a href="/en-US/docs/Web/JavaScript/Guide/Numbers_and_dates#Numbers"> Numeri come letterali</a> + <p><a href="/en-US/docs/Web/JavaScript/Guide/Numbers_and_dates#Number_object">Oggetto <code>Number</code></a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Numbers_and_dates#Math_object">Oggetto <code>Math</code></a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Numbers_and_dates#Date_object">Oggetto <code>Date</code></a></p> + </li> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Text_formatting">Formattazione di testi</a></span> + <p><a href="/en-US/docs/Web/JavaScript/Guide/Text_formatting#String_literals">Stringhe come letterali</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Text_formatting#String_objects">Oggetto <code>String</code></a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Text_formatting#Multi-line_template_literals">Template stringhe come letterali</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Text_formatting#Internationalization">Internazionalizzazione</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">Espressioni Regolari</a></p> + </li> +</ul> + +<ul class="card-grid"> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Indexed_collections">Collezioni Indicizzate</a></span> + + <p><a href="/en-US/docs/Web/JavaScript/Guide/Indexed_collections#Array_object">Vettori</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Indexed_collections#Typed_Arrays">Vettori tipizzati</a></p> + </li> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Keyed_collections">Collezioni Chiave-Valore</a></span> + <p><code><a href="/en-US/docs/Web/JavaScript/Guide/Keyed_collections#Map_object">Map</a></code><br> + <code><a href="/en-US/docs/Web/JavaScript/Guide/Keyed_collections#WeakMap_object">WeakMap</a></code><br> + <code><a href="/en-US/docs/Web/JavaScript/Guide/Keyed_collections#Set_object">Set</a></code><br> + <code><a href="/en-US/docs/Web/JavaScript/Guide/Keyed_collections#WeakSet_object">WeakSet</a></code></p> + </li> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects">Lavorare con gli Oggetti</a></span> + <p><a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_properties">Oggetti e proprietà</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Creating_new_objects">Creare Oggetti</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_methods">Definire i metodi</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">Getter e setter</a></p> + </li> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model">Dettagli sul modello a Oggetti</a></span> + <p><a href="/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Class-based_vs._prototype-based_languages">OOP basata su prototopi</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Creating_the_hierarchy">Creare una gerarchia di Oggeti</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Property_inheritance_revisited">Ereditarietà</a></p> + </li> +</ul> + +<ul class="card-grid"> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators">Iteratori & Generatori</a></span> + + <p><a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators#Iterators">Iteratori</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators#Iterables">Iterabili</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators#Generators">Generatori</a></p> + </li> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Meta_programming">Meta-programmazione</a></span> + <p><code><a href="/en-US/docs/Web/JavaScript/Guide/Meta_programming#Proxies">Proxy</a></code><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Meta_programming#Handlers_and_traps">Gestori e Trappole</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Meta_programming#Revocable_Proxy">Proxy revocabile</a><br> + <code><a href="/en-US/docs/Web/JavaScript/Guide/Meta_programming#Reflection">Reflect</a></code></p> + </li> +</ul> + +<p>{{Next("Web/JavaScript/Guide/Introduction")}}</p> diff --git a/files/it/web/javascript/guida/introduzione/index.html b/files/it/web/javascript/guida/introduzione/index.html new file mode 100644 index 0000000000..3825ded91c --- /dev/null +++ b/files/it/web/javascript/guida/introduzione/index.html @@ -0,0 +1,140 @@ +--- +title: Introduzione +slug: Web/JavaScript/Guida/Introduzione +tags: + - Guida + - JavaScript +translation_of: Web/JavaScript/Guide/Introduction +--- +<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}}</div> + +<p class="summary">Questo capitolo introduce JavaScript e discute alcuni dei suoi concetti fondamentali.</p> + +<h2 id="Che_cosa_dovresti_già_sapere">Che cosa dovresti già sapere</h2> + +<p>Questa guida parte dal presupposto che tu abbia già queste nozioni di base:</p> + +<ul> + <li>Una comprensione generica di Internet e del World Wide Web ({{Glossary("WWW")}}).</li> + <li>Una buona conoscenza operativa del HyperText Markup Language ({{Glossary("HTML")}}).</li> + <li>Un po' di esperienza di programmazione. Se sei nuovo della programmazione, prova uno dei tutorials linkati nella pagina principale di <a href="/en-US/docs/Web/JavaScript">JavaScript</a>.</li> +</ul> + +<h2 id="Dove_trovare_informazioni_su_JavaScript">Dove trovare informazioni su JavaScript</h2> + +<p>La documentazione JavaScript su MDN comprende:</p> + +<ul> + <li><a href="/it-IT/Learn">Capire il web</a> fornisce informazioni per i principianti ed introduce i concetti base della programmazione e di Internet.</li> + <li><a href="/en-US/docs/Web/JavaScript/Guide">Guida JavaScript</a> (questa guida) fornisce una panoramica su JavaScript ed i suoi oggetti.</li> + <li><a href="/en-US/docs/Web/JavaScript/Reference">Riferimento JavaScript</a> fornisce materiale di riferimento dettagliato su JavaScript.</li> +</ul> + +<p>Se sei nuovo di JavaScript, inizia con gli articoli presenti in <a href="/it-IT/Learn">Capire il web</a> e nella <a href="/en-US/docs/Web/JavaScript/Guide">Guida JavaScript</a>. Quando avrai una chiara comprensione dei fondamentali, potrai usare il <a href="/en-US/docs/Web/JavaScript/Reference">Riferimento JavaScript</a> per apprendere maggiori dettagli su singoli oggetti e parti del linguaggio.</p> + +<h2 id="Che_cos'è_JavaScript">Che cos'è JavaScript?</h2> + +<p>JavaScript è un linguaggio di scripting cross-platform e object-oriented. È un linguaggio piccolo e leggero. All interno di un ambiente ospite (ad esempio un web browser), JavaScript può essere connesso agli oggetti del suo ambiente per fornire controllo programmatico su di essi.</p> + +<p>JavaScript contiene una libreria standard di oggetti come Array, Date e Math, ed una serie di elementi base del linguaggio come operatori, strutture di controllo e dichiarazioni. La base di JavaScript può essere estesa per una varietà di scopi fornendogli oggetti aggiuntivi; ad esempio:</p> + +<ul> + <li><em>Client-side JavaScript</em> estende il linguaggio base fornendo oggetti per controllare il browser ed il suo Document Object Model (DOM). Per esempio, le estensioni client-side permettono ad una applicazione di inserire elementi in un form HTML e rispondere ad eventi dell'utente come il click del mouse, input nei form e navigazione delle pagine.</li> + <li><em>Server-side JavaScript</em> estende il linguaggio base fornendo oggetti rilevanti per eseguire JavaScript in un server. Per esempio le estensioni server-side consentono ad una applicazione di comunicare con un database, forniscono continuità di informazioni da una chiamata ad un altra dell'applicazione, o permettono la manipolazione di files nel server.</li> +</ul> + +<h2 id="JavaScript_and_Java" name="JavaScript_and_Java">JavaScript e Java</h2> + +<p>JavaScript e Java sono simili per certi aspetti, ma fondamentalmente diversi per altri. Il linguaggio JavaScript assomiglia a Java ma non ha la tipizzazione statica ed il controllo forte dei tipi di Java. JavaScript segue larga parte della sintassi delle espressioni di Java, la convenzione sui nomi ed i principali costrutti di controllo di flusso, e questa è la ragione per cui è stato rinominato da LiveScript a JavaScript.<br> + A differenza del sistema di classi costruito dalle dichiarazione a tempo di compilazione di Java, JavaScript supporta un sistema runtime basato su un piccolo numero di tipi di dato che rappresentano valori Booleani, numerici e di tipo stringa. JavaScript dispone di un modello ad oggetti basato su prototype al posto del più comune modello ad oggetti basato su classi. Il modello prototype-based fornisce ereditarietà dinamica; che significa che ciò che viene ereditato può variare per singoli oggetti. JavaScript inoltre supporta funzioni senza speciali requisiti dichiarativi. Le funzioni possono essere proprietà di oggetti, eseguite come metodi debolmente tipizzati.</p> + +<p>JavaScript è un linguaggio con un formalismo molto libero se confrontato a Java. Non è necessario dichiarare tutte le variabili, classi e metodi. Non ci si deve preoccupare se i metodi sono public, privare e protected, e non è necessario implementare interfacce. Variabili, parametri e valori di ritorno delle funzioni non sono tipizzati in modo esplicito.</p> + +<p>Java è un linguaggio di programmazione basato su classi progettato per essere veloce e con un controllo dei tipi rigoroso. Con controllo dei tipi rigoroso si intende per esempio, che non è possibile forzare un intero Java in un riferimento ad oggetto o accedere alla memoria privata corrompendo i bytecodes Java. Il modello basato sulle classi di Java significa che i programmi sono composti esclusivamente da classi con i propri metodi. L'ereditarietà delle classi di Java e la tipizzazione forte di solito richiedono gerarchie di oggetti strettamente definite. Questi requisiti rendono la programmazione di Java più complessa rispetto alla programmazione di JavaScript.</p> + +<p>D'altra parte, JavaScript si ispira ad una linea di linguaggi più piccoli, tipizzati dinamicamente come HyperTalk e dBASE. Questi linguaggi di scripting offrono strumenti di programmazione ad un pubblico più vasto grazie alla loro sintassi più facile, alle funzionalità specializzate predefinite nel linguaggio, ed ai minimi requisiti per la creazione di oggetti.</p> + +<table class="standard-table"> + <caption>JavaScript confrontato con Java</caption> + <thead> + <tr> + <th scope="col">JavaScript</th> + <th scope="col">Java</th> + </tr> + </thead> + <tbody> + <tr> + <td> + <p>Orientato ad oggetti. Non c'è distinzione tra tipi di oggetti. Ereditarietà con il meccanismo dei prototype e le proprietà ed i metodi possono essere aggiunti ad ogni oggetto dinamicamente.</p> + </td> + <td> + <p>Basato su classi. Gli oggetti vengono distinti in classi ed istanze con tutta l'ereditarietà costruita con lagerarchia delle classi. Classi ed istanze non possono avere proprietà o metodi aggiunti dinamicamente.</p> + </td> + </tr> + <tr> + <td>Le variabili ed i tipi non sono dichiarati (tipizzazione dinamica).</td> + <td>Le variabili ed i tipi di dato devono essere dichiarati (tipizzazione statica).</td> + </tr> + <tr> + <td>Non si può scrivere automaticamente suk disco fisso.</td> + <td>Si può scrivere automaticamente su disco fisso.</td> + </tr> + </tbody> +</table> + +<p>Per maggiori informazioni sulle differenze tra JavaScript e Java, vedi il capitolo <a href="/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model">Dettagli sul modello ad oggetti</a>.</p> + +<h2 id="JavaScript_and_the_ECMAScript_Specification" name="JavaScript_and_the_ECMAScript_Specification">JavaScript e le specifiche ECMAScript</h2> + +<p>JavaScript è standardizzato da <a class="external" href="http://www.ecma-international.org/">Ecma International</a> — l'associazione Europea per la standardizzazione dei sisteni di comunicazione ed informazione (ECMA è l'acronimo di European Computer Manufacturers Association) per distribuire linguaggio di programmazione standardizzato ed internazionale basato su JavaScript. Questa versione standardizzata di JavaScript, chiamata ECMAScript, si comporta alla stesso modo in tutte le applicazioni che supportano lo standard. Le aziende possono usare il linguaggo standard aperto per svilupare le proprie implementazioni di JavaScript. Lo standard ECMAScript è documentato nelle specifiche ECMA-262. Consulta <a href="/en-US/docs/Web/JavaScript/New_in_JavaScript">Novità in JavaScript</a> per conoscere di più sulle differenti versioni di JavaScript e delle edizioni delle specifiche ECMAScript.</p> + +<p>Lo standard ECMA-262 è anche approvato da <a class="external" href="http://www.iso.ch/">ISO</a> (International Organization for Standardization) come ISO-16262. Si possono trovare le specifiche nel <a class="external" href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">sito Ecma internazionale</a>. Le specifiche ECMAScript non descrivono il Document Object Model (DOM), che viene standardizzato dal <a class="external" href="http://www.w3.org/">World Wide Web Consortium (W3C)</a>. Il DOM definisce il modo in cui gli oggetti di un documento HTML vengono esposti al tuo script. Per farti un'idea migliore sulle differenti tecnologie che si usano quando si programma con JavaScript, consulta l'articolo <a href="/en-US/docs/Web/JavaScript/JavaScript_technologies_overview">Panoramicha delle tecnologie JavaScript</a>.</p> + +<h3 id="JavaScript_Documentation_versus_the_ECMAScript_Specification" name="JavaScript_Documentation_versus_the_ECMAScript_Specification">Documentazione JavaScript a confronto con le specifiche ECMAScript</h3> + +<p>Le specifiche ECMAScript sono una serie di requisiti per implementare ECMAScript; sono utili per chi desidera implementare funzionalità compatibili con lo standard del linguaggio nella propria implementazione di ECMAScript (come SpiderMonkey in Firefox, o v8 in Chrome).</p> + +<p>La documentazione ECMAScript non è indirizzata ad aiutare i programmatori di script; usa la documentazione di JavaScript per informazioni su come scrivere script.</p> + +<p>Le specifiche ECMAScript usano terminologie e sintassi che possono risultare non familiari ai programmatori JavaScript Sebbene la descrizione del linguaggio possa essere diversa in ECMAScript, il linguaggio in se rimane lo stesso. JavaScript supporta tutte le funzionalità descritte nelle specifiche ECMAScript.</p> + +<p>La documentazione JavaScript descrive aspetti del linguaggio che sono appropriati per il programmatore JavaScript.</p> + +<h2 id="Iniziare_con_JavaScript">Iniziare con JavaScript</h2> + +<p>Iniziare con JavaScript è facile: la sola cosa che serve è un Web browser moderno. Questa guida include alcune funzionalità di JavaScript che sono attualmente disponibili solo nell'ultima versione di Firefox, per questo raccomandiamo di usare la versione più recente di Firefox.</p> + +<p>In Firefox sono presenti due strumenti che sono utili per sperimentare con JavaScript: la Console Web ed il Blocco per gli appunti.</p> + +<h3 id="La_Console_Web">La Console Web</h3> + +<p>La <a href="/en-US/docs/Tools/Web_Console">Console Web</a> espone informazioni sulla pagina Web attualmente caricata, ed include una <a href="/en-US/docs/Tools/Web_Console#The_command_line_interpreter">command line</a> che si può usare per eseguire espressioni nella pagina corrente.</p> + +<p>Per aprire la Console Web (Ctrl+Shift+K), scegli "Console web" dal menu "Sviluppo web", che si trova nel menu "Strumenti" di Firefox. Essa appare sotto la finestra del browser. Alla fine della console è presente la linea di comando che si può usare per inserire comandi JavaScript ed il risultato compare nel pannello soprastante:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7363/web-console-commandline.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h3 id="Blocco_per_gli_appunti">Blocco per gli appunti</h3> + +<p>La Console Web è magnifica per eseguire singole linee di JavaScript, ma sebbene si possano eseguire linee multiple, non è molto comoda per questo e non è possibile salvare i propri esempi di codice con la Console Web. Quindi per esempi più complessi di codice il <a href="/en-US/docs/Tools/Scratchpad">Blocco per gli appunti</a> è uno strumento migliore.</p> + +<p>Per aprire il Blocco per gli appunti (Shift+F4), scegli "Blocco per gli appunti" dal menu "Sviluppo web", che si trova nel menu "Strumenti" di Firefox. Si apre in una finestra separata ed un editor che puoi usare per scrivere ed eseguire JavaScript nel browser. Si possono anche salvare scripts nel disco e caricare scripts salvati.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7365/scratchpad.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h3 id="Hello_world">Hello world</h3> + +<p>Per iniziare a scrivere programmi JavaScript, apri il Blocco per gli appunti e scrivi il tuo primo codice "Hello world" JavaScript:</p> + +<pre class="brush: js">function greetMe(yourName) { + alert("Hello " + yourName); +} + +greetMe("World"); +</pre> + +<p>Seleziona il codice nel blocco e premi Ctrl+R per vedere il risultato nel browser!</p> + +<p>Nelle prossime pagine, questa guida ti itrodurra alla sintassi di JavaScript ed alle caratteristiche del linguaggio, in questo modo sarai in grado di scrivere applicazioni più complesse.</p> + +<p>{{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}}</p> diff --git a/files/it/web/javascript/guida/iteratori_e_generatori/index.html b/files/it/web/javascript/guida/iteratori_e_generatori/index.html new file mode 100644 index 0000000000..49b220cdd1 --- /dev/null +++ b/files/it/web/javascript/guida/iteratori_e_generatori/index.html @@ -0,0 +1,162 @@ +--- +title: Iteratori e generatori +slug: Web/JavaScript/Guida/Iteratori_e_generatori +translation_of: Web/JavaScript/Guide/Iterators_and_Generators +--- +<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Details_of_the_Object_Model", "Web/JavaScript/Guide/Meta_programming")}}</div> + +<p class="summary">Processare ognuno degli elementi in una collezione è un'operazione molto comune. JavaScript fornisce tutta una serie di costrutti per iterare una collezione di elementi, dai semplici cicli {{jsxref("Statements/for","for")}} a {{jsxref("Global_Objects/Array/map","map()")}} e {{jsxref("Global_Objects/Array/filter","filter()")}}. Iterators e Generators portano il concetto di iterazione direttamente al cuore del linguaggio e forniscono un meccanismo per personalizzare i cicli {{jsxref("Statements/for...of","for...of")}}.</p> + +<p>Per maggiori dettagli, vedi anche:</p> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Iteration_protocols">Iteration protocols</a></li> + <li>{{jsxref("Statements/for...of","for...of")}}</li> + <li>{{jsxref("Statements/function*","function*")}} e {{jsxref("Generator")}}</li> + <li>{{jsxref("Operators/yield","yield")}} e {{jsxref("Operators/yield*","yield*")}}</li> +</ul> + +<h2 id="Iterators">Iterators</h2> + +<p>Un oggetto è un <strong>iterator</strong> quando sa come accedere agli elementi di una collezione uno per volta, conservando l'informazione sulla sua posizione corrente nella sequenza. In Javascript un iterator è un oggetto che implementa il metodo <code>next()</code> , il quale ritorna l'elemento successivo della sequenza. Questo metodo ritorna un oggetto con due proprietà: <code>done</code> e<code>value</code>.</p> + +<p>Una volta che è stato creato, un iterator può essere utlizzato esplicitamente chiamando più volte il metodo <code>next()</code>.</p> + +<pre class="brush: js">function makeIterator(array) { + var nextIndex = 0; + + return { + next: function() { + return nextIndex < array.length ? + {value: array[nextIndex++], done: false} : + {done: true}; + } + }; +}</pre> + +<p>Una volta che un iterator è stato inizializzato, il metodo<code>next()</code> può essere chiamato per accedere a coppie chiave-valore dall'oggetto ritornato:</p> + +<pre class="brush: js">var it = makeIterator(['yo', 'ya']); +console.log(it.next().value); // 'yo' +console.log(it.next().value); // 'ya' +console.log(it.next().done); // true</pre> + +<h2 id="Generators">Generators</h2> + +<p>Nonostante implementare un iterator possa essere utile, richiede una considerevole attenzione nella programmazione a causa del bisogno esplicito di mantenere lo stato interno dell'iteratore. I <strong>{{jsxref("Global_Objects/Generator","Generators","","true")}}</strong> forniscono una potente alternativa: ti permettono di definire un algoritmo iterativo scrivendo una singola funzione in grado di mantenere il proprio stato.</p> + +<p>Una GeneratorFunction è uno speciale tipo di funzione che opera come una "fabbrica" di iterators. Quando viene eseguita ritorna un nuovo oggetto Generator. Una funzione diventa una GeneratorFunction se usa la sintassi {{jsxref("Statements/function*","function*")}}.</p> + +<pre class="brush: js">function* idMaker() { + var index = 0; + while(true) + yield index++; +} + +var gen = idMaker(); + +console.log(gen.next().value); // 0 +console.log(gen.next().value); // 1 +console.log(gen.next().value); // 2 +// ...</pre> + +<h2 id="Iterables">Iterables</h2> + +<p>Un oggetto è un <strong>iterable</strong> se definisce un comportamento di iterazione, come per esempio quali valori sono considerati in un costrutto {{jsxref("Statements/for...of", "for...of")}}. Alcuni tipi built-in di Javascript (come {{jsxref("Array")}} o {{jsxref("Map")}}) hanno un comportamento predefinito, mentre altri tipi (come {{jsxref("Object")}}) non ce l'hanno.</p> + +<p>Affinché un oggetto possa essere considerato un <strong>iterable</strong> deve implementare il metodo <strong>@@iterator</strong>, cioè l'oggetto (o uno degli oggetti che lo precedono nella <a href="/en-US/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain">catena dei prototipi</a>) deve avere una proprietà con una chiave {{jsxref("Symbol.iterator")}}.</p> + +<h3 id="Iterables_definiti_dall'utente">Iterables definiti dall'utente</h3> + +<p>Possiamo creare i nostri iterables in questo modo:</p> + +<pre class="brush: js">var myIterable = {}; +myIterable[Symbol.iterator] = function* () { + yield 1; + yield 2; + yield 3; +}; + +for (let value of myIterable) { + console.log(value); +} +// 1 +// 2 +// 3 + +or + +[...myIterable]; // [1, 2, 3] +</pre> + +<h3 id="Iterables_Built-in">Iterables Built-in</h3> + +<p>{{jsxref("String")}}, {{jsxref("Array")}}, {{jsxref("TypedArray")}}, {{jsxref("Map")}} e {{jsxref("Set")}} sono tutti iterables built-in nel linguaggio, perché i loro oggetti prototipi hanno tutti un metodo {{jsxref("Symbol.iterator")}}.</p> + +<h3 id="Sintassi_che_si_aspettano_degli_iterables">Sintassi che si aspettano degli iterables</h3> + +<p>Alcuni costrutti ed espressioni si aspettano degli iterables, per esempio il ciclo {{jsxref("Statements/for...of","for-of")}}, la {{jsxref("Operators/Spread_operator","sintassi spread","","true")}}, {{jsxref("Operators/yield*","yield*")}}, e l'{{jsxref("Operators/Destructuring_assignment","assegnamento di destrutturazione","","true")}}.</p> + +<pre class="brush: js">for (let value of ['a', 'b', 'c']) { + console.log(value); +} +// "a" +// "b" +// "c" + +[...'abc']; // ["a", "b", "c"] + +function* gen() { + yield* ['a', 'b', 'c']; +} + +gen().next(); // { value: "a", done: false } + +[a, b, c] = new Set(['a', 'b', 'c']); +a; // "a" + +</pre> + +<h2 id="Generators_avanzati">Generators avanzati</h2> + +<p>I generators calcolano i loro valori solo quando vengono effettivamente richiesti, il che gli permette di rappresentare sequenze che sono troppo onerose da calcolare, o perfino sequenze infinite, come nella funzione <code>idMaker()</code>.</p> + +<p>Il metodo {{jsxref("Global_Objects/Generator/next","next()")}} accetta anche un valore che può essere utilizzato per modificare lo stato interno di un generatore. Un valore passato a <code>next()</code> sarà trattato come il risultato dell'ultima espressione <code>yield</code> che ha messo in pausa il generator.</p> + +<p>Ecco un generator che produce una sequenza di numeri di Fibonacci. In questo generator il metodo<code>next(x)</code> può essere utilizzato per reinizializzare la sequenza:</p> + +<pre class="brush: js">function* fibonacci() { + var fn1 = 0; + var fn2 = 1; + while (true) { + var current = fn1; + fn1 = fn2; + fn2 = current + fn1; + var reset = yield current; + if (reset) { + fn1 = 0; + fn2 = 1; + } + } +} + +var sequence = fibonacci(); +console.log(sequence.next().value); // 0 +console.log(sequence.next().value); // 1 +console.log(sequence.next().value); // 1 +console.log(sequence.next().value); // 2 +console.log(sequence.next().value); // 3 +console.log(sequence.next().value); // 5 +console.log(sequence.next().value); // 8 +console.log(sequence.next(true).value); // 0 +console.log(sequence.next().value); // 1 +console.log(sequence.next().value); // 1 +console.log(sequence.next().value); // 2</pre> + +<p>Puoi forzare un generator a lanciare una eccezione chiamando il suo metodo {{jsxref("Global_Objects/Generator/throw","throw()")}} e passandogli il valore che dovrebbe lanciare. Questa eccezione sarà lanciata dal corrente context sospeso del generator, come se lo <code>yield</code> che è attualmente sospeso fosse invece una dichiarazione <code>throw <em>value</em></code>.</p> + +<p>Se non si incontra uno <code>yield</code> durante la risoluzione della eccezione lanciata, allora l'eccezione si propagherà fino alla chiamata a<code>throw()</code>, e in tutte le successive chiamate a <code>next()</code> la proprietà <code>done</code> sarà<code>true</code>.</p> + +<p>I generators hanno un metodo {{jsxref("Global_Objects/Generator/return","return(value)")}} che ritorna un valore e termina il generator stesso.</p> + +<p>{{PreviousNext("Web/JavaScript/Guide/Details_of_the_Object_Model", "Web/JavaScript/Guide/Meta_programming")}}</p> diff --git a/files/it/web/javascript/guida/loops_and_iteration/index.html b/files/it/web/javascript/guida/loops_and_iteration/index.html new file mode 100644 index 0000000000..c677151181 --- /dev/null +++ b/files/it/web/javascript/guida/loops_and_iteration/index.html @@ -0,0 +1,340 @@ +--- +title: Cicli e iterazioni +slug: Web/JavaScript/Guida/Loops_and_iteration +tags: + - Guide + - JavaScript + - Loop + - Sintassi +translation_of: Web/JavaScript/Guide/Loops_and_iteration +--- +<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}</div> + +<p class="summary">I cicli offrono un modo semplice e rapido per fare cose ripetutamente. Questo capitolo della <a href="/en-US/docs/Web/JavaScript/Guide">guida al JavaScript</a> introduce i diversi metodi di iterazione disponibili in JavaScript.</p> + +<p>Si può pensare al loop come ad una versione computerizzata di un gioco dove si dice a qualcuno di andare X passi in una direzione e Y passi in un'atra; per esempio "vai 5 passi a est" può essere espresso in questo modo con un loop:</p> + +<pre class="brush: js notranslate">var passi; +for (passi = 0; passi < 5; passi++) { + // Viene eseguito 5 volte, con un valore di passi che va da 0 a 4. + console.log('Fai un passo verso est'); +} +</pre> + +<p>Ci sono differenti tipi di ciclo, ma sono essenzialmente tutti la stessa cosa: ripetono un'azione o un insieme di azioni un certo numero di volte (è possibile che questo numero sia anche 0).</p> + +<p>I diversi meccanismi di ciclo offrono differenti modi di determinare l'inizio e la fine del ciclo. Ci sono casi che si prestano più ad un tipo di ciclo rispetto ad altri.</p> + +<p>Le istruzioni per i loop foriti in JavaScript sono:</p> + +<ul> + <li>{{anch("ciclo for")}}</li> + <li>{{anch("ciclo do...while")}}</li> + <li>{{anch("ciclo while")}}</li> + <li>{{anch("labeled statement")}}</li> + <li>{{anch("break statement")}}</li> + <li>{{anch("continue statement")}}</li> + <li>{{anch("ciclo for...in")}}</li> + <li>{{anch("ciclo for...of")}}</li> +</ul> + +<h2 id="Istruzione_for">Istruzione <code>for</code></h2> + +<p>Il {{jsxref("statements/for","ciclo for")}} continua finché la condizione valutata non è falsa. Il fir loop JavaScript è simile a quello del Java e de C. L'istruzione <code>for</code> è definita come segue:</p> + +<pre class="syntaxbox notranslate">for ([espressioneIniziale]; [condizione]; [incremento]) + istruzione +</pre> + +<p>Quando viene eseguito un ciclo <code>for</code>, questo è ciò che accade:</p> + +<ol> + <li><code>espressioneIniziale</code>, se esiste, viene eseguita. L'espressione di solito inizializza uno o più indici, ma la sintassi permette di scrivere espressioni con diversi gradi di compessità. Questa espressione può anche dichiarare delle variabili.</li> + <li>La <code>condizione</code> viene verificata. Se il suo valore è true, l'espressione <code>istruzione</code> viene eseguita. Se invece <code>condizione</code> è false, il ciclo finisce. Se <code>condizione</code> è omessa, l'espressione si assume sia true.</li> + <li><code>istruzione</code> viene esguita. Per eseguire diverse istruzioni, è necessario usare il blocco (<code>{ ... }</code>) per raggrupparle.</li> + <li>Viene incrementata la l'espressione <code>incremento</code>, se esiste, eseguita, e il ciclo <code>for</code> va al passo successivo.</li> +</ol> + +<h3 id="Esempio"><strong>Esempio</strong></h3> + +<p>Il seguente esempio contiene un ciclo <code>for</code> che conta il numero di opzioni selezionate in una lista a scorrimento (a {{HTMLElement("select")}} che permette selezioni multiple). L'istruzione <code>for</code> dichiara una variabile <code>i</code> e la inizializza a zero. Controlla che <code>i</code> sia minore del numero di opzioni dell'elemento <code><select></code> , esegue l'istruzione <code>if</code> e incrementa <code>i</code> di uno alla fine di ogni ciclo.</p> + +<pre class="brush: html notranslate"><form name="selectForm"> + <p> + <label for="musicTypes">Choose some music types, then click the button below:</label> + <select id="musicTypes" name="musicTypes" multiple="multiple"> + <option selected="selected">R&B</option> + <option>Jazz</option> + <option>Blues</option> + <option>New Age</option> + <option>Classical</option> + <option>Opera</option> + </select> + </p> + <p><input id="btn" type="button" value="Quanti sono selezionati?" /></p> +</form> + +<script> +function howMany(selectObject) { + var numberSelected = 0; + for (var i = 0; i < selectObject.options.length; i++) { + if (selectObject.options[i].selected) { + numberSelected++; + } + } + return numberSelected; +} + +var btn = document.getElementById("btn"); +btn.addEventListener("click", function(){ + alert('Number of options selected: ' + howMany(document.selectForm.musicTypes)) +}); +</script> + +</pre> + +<h2 id="Istruzione_do...while">Istruzione<code> do...while</code></h2> + +<p>Il ciclo {{jsxref("statements/do...while", "do...while")}} si ripete finché la <code>condizione</code> non è falsa. Il <code>do...while</code> è viene definito come segue:</p> + +<pre class="syntaxbox notranslate">do + istruzione +while (condizione); +</pre> + +<p>l'<code>istruzione</code> viene eseguita una volta prima che la <code>condizione</code> venga controllata. Per eseguire più istruzioni, è necessario usare il blocco (<code>{ ... }</code>) . Se la <code>condizione</code> è vera l'<code>istruzione</code> viene eseguita nuovamente. Alla fine di ogni esecuzione di <code>istruzione</code>, <code>condizione</code> viene controllata. Quando <code>condizione</code> è falsa l'esecuzione del ciclo <code>do..while</code> termina.</p> + +<h3 id="Esempio_2"><strong>Esempio</strong></h3> + +<p>Nel seguente esempio il ciclo do..while itera almeno una volta e continua finché il valore di <code>i</code> è minore di 5.</p> + +<pre class="brush: js notranslate">var i = 0; +do { + i += 1; + console.log(i); +} while (i < 5);</pre> + +<h2 id="Istruzione_while">Istruzione <code>while</code></h2> + +<p><code><font face="Open Sans, arial, sans-serif">Il ciclo</font> </code>{{jsxref("statements/while","while")}} esegue un'<code>istruzione</code> fino a quando una <code>condizione</code> è true. Ecco un esempio si un ciclo <code>while</code>:</p> + +<pre class="syntaxbox notranslate">while (condizione) + istruzione //...statement +</pre> + +<p>Se <code>condizione</code> diventa false, <code>istruzione</code> non viene eseguita a si passa ad eseguire i comandi successivi.</p> + +<p>Durante il ciclo c<code>ondizione</code> viene testata prima di eseguire <code>istruzione</code>. Se c<code>ondizione </code>è true, <code>istruzione</code> viene esguita e c<code>ondizione</code> viene verificata nuovamente. Se <code>condizione</code> è false il ciclo di ferma e viene eseguito il codice successivo al ciclo <code>while</code>.</p> + +<p>Per eseguire istruzioni multiple, è necessario usare il blocco ({ ... }) così da raggruppare le istruzioni.</p> + +<h3 id="Esempio_1"><strong>Esempio 1</strong></h3> + +<p>Il seguente esempio di ciclo <code>while</code> si ripete fino a quando <code>n</code> è minore di tre:</p> + +<pre class="brush: js notranslate">var n = 0; +var x = 0; +while (n < 3) { + n++; + x += n; +} +</pre> + +<p>Ad ogni iterazione, il ciclo incrementa n e aggiunge quel valore a x. Pertanto,<code>x</code> e <code>n</code> assumono i seguenti valori:</p> + +<ul> + <li>Dopo il primo passaggio: <code>n</code> = 1 and <code>x</code> = 1</li> + <li>Dopo il secondo passaggio: <code>n</code> = 2 and <code>x</code> = 3</li> + <li>Dopo il terzo passaggio: <code>n</code> = 3 and <code>x</code> = 6</li> +</ul> + +<p>Dopo aver completato il terzo passaggio, la condizione <code>n < 3</code> non è più vera, quindi il ciclo termina.</p> + +<h3 id="Esempio_2_2"><strong>Esempio 2</strong></h3> + +<p>Evita loop infiniti. Assicurati che la condizione in un loop alla fine diventi falsa; altrimenti, il ciclo non terminerà mai. Le istruzioni nel seguente ciclo <code>while</code> vengono eseguite per sempre perché la condizione non diventa mai falsa:</p> + +<div class="blockIndicator warning"> +<pre class="brush: js notranslate">//I loop infiniti non vanno affatto bene +while (true) { + console.log("Buongiorno, Mondo"); +}</pre> +</div> + +<h2 id="Istruzione_etichettata">Istruzione "etichettata"</h2> + +<p>Un {{jsxref("statements/label","label")}} fornisce un'istruzione con un identificatore che ti consente di fare riferimento ad esso altrove nel tuo programma. Ad esempio, è possibile utilizzare un'etichetta per identificare un ciclo e quindi utilizzare le istruzioni <code>break</code> o <code>continue</code> per indicare se un programma deve interrompere il loop o continuare la sua esecuzione.</p> + +<p>La sintassi dell'istruzione etichettata è simile alla seguente:</p> + +<pre class="syntaxbox notranslate">label : + istruzione // statement +</pre> + +<p>Il valore dell'etichetta <code><em>label </em></code>può essere qualsiasi identificatore JavaScript che non sia una parola riservata. L'affermazione che ti identifichi con un'etichetta <code><em>statement</em></code> può essere una qualsiasi affermazione.</p> + +<h3 id="Esempio_3"><strong>Esempio</strong></h3> + +<p>In questo esempio, la label <code>markLoop</code> identifica un ciclo <code>while</code>.</p> + +<pre class="brush: js notranslate">markLoop: +while (theMark == true) { + doSomething(); +}</pre> + +<h2 id="Istruzione_break">Istruzione <code>break</code></h2> + +<p>Utilizzare l'istruzione {{jsxref("statements/break","break")}} per terminare un ciclo, uno <code>switch</code> o in congiunzione con un'istruzione etichettata.</p> + +<ul> + <li>Quando si utilizza <code>break</code> senza un'etichetta, termina l'enclosure più interno <code>while</code>, <code>do-while</code>, <code>for</code>, o <code>switch</code> immediatamente e trasferisce il controllo alla seguente istruzione.</li> + <li>Quando usi la <code>break</code> con un'etichetta, termina l'istruzione etichettata specificata.</li> +</ul> + +<p>La sintassi dell'istruzione <code>break</code> è simile a questa:</p> + +<pre class="syntaxbox notranslate">break [<em>label</em>]; +</pre> + +<p>La prima forma della sintassi termina il ciclo <code>switch</code> di chiusura più interno; la seconda forma della sintassi termina l'istruzione dell'etichettata specificata.</p> + +<h3 id="Esempio_1_2"><strong>Esempio</strong> <strong>1</strong></h3> + +<p>L'esempio seguente esegue iterazioni attraverso gli elementi di un array (una matrice) fino a quando non trova l'indice di un elemento il cui valore è <code>theValue</code>:</p> + +<pre class="brush: js notranslate">for (var i = 0; i < a.length; i++) { + if (a[i] == theValue) { + break; + } +}</pre> + +<h3 id="Esempio_2_Breaking_to_a_label_-_Interruzione_su_unetichetta"><strong>Esempio 2: </strong>Breaking to a label - Interruzione su un'etichetta</h3> + +<pre class="brush: js notranslate">var x = 0; +var z = 0; +labelCancelLoops: while (true) { + console.log("Outer loops: " + x); + x += 1; + z = 1; + while (true) { + console.log("Inner loops: " + z); + z += 1; + if (z === 10 && x === 10) { + break labelCancelLoops; + } else if (z === 10) { + break; + } + } +}</pre> + +<h2 id="Istruzione_continue">Istruzione <code>continue</code></h2> + +<p>The {{jsxref("statements/continue","continue")}} statement can be used to restart a <code>while</code>, <code>do-while</code>, <code>for</code>, or <code>label</code> statement.</p> + +<ul> + <li>Quando usi <code>continue</code> senza un'etichetta, termina l'iterazione corrente dell'istruzione racchiudente, mentre <code>while</code>, <code>do-while</code>, o <code>for</code> continua l'esecuzione del ciclo con l'iterazione successiva. In contrasto con l'istruzione <code>break</code>, <code>continue</code> non termina interamente l'esecuzione del ciclo. In un ciclo <code>while</code>, torna alla condizione. In un ciclo <code>for</code>, salta all'espressione di incremento <code>increment-expression</code>.</li> + <li>Quando si utilizza <code>continue</code> con un'etichetta, si applica all'istruzione looping identificata con tale etichetta.</li> +</ul> + +<p>La sintassi dell'istruzione <code>continue</code> ha il seguente aspetto:</p> + +<pre class="syntaxbox notranslate"><code>continue</code> [<em>label</em>]; +</pre> + +<h3 id="Esempio_1_3"><strong>Esempio 1</strong></h3> + +<p>L'esempio seguente mostra un ciclo <code>while</code> con un'istruzione <code>continue</code> che viene eseguita quando il valore di <code>i</code> è tre. Quindi, <code>n</code> assume i valori uno, tre, sette e dodici.</p> + +<pre class="brush: js notranslate">var i = 0; +var n = 0; +while (i < 5) { + i++; + if (i == 3) { + continue; + } + n += i; +}</pre> + +<h3 id="Esempio_2_3"><strong>Esempio 2</strong></h3> + +<p>Una dichiarazione etichettata <em><code>checkiandj</code> </em>contiene una dichiarazione etichettata <em><code>checkj</code></em>. Se si incontra <code>continue</code> il programma termina l'iterazione corrente di <em><code>checkj</code></em> e inizia la successiva iterazione. Ogni volta che si incontra <code>continue</code>, <em><code>checkj</code></em> viene reiterato finché la condizione non restituisce <code>false</code>. Quando viene restituito <code>false</code>, il resto dell'istruzione <em><code>checkiandj</code></em> è completato e <em><code>checkiandj</code></em> reiterate fino a quando la condizione non restituisce <code>false</code>. Quando viene restituito <code>false</code>, il programma continua con la seguente istruzione <em><code>checkiandj</code></em>.</p> + +<p>Se <code>continue</code> ha un'etichetta di <em><code>checkiandj</code></em>, il programma continuerà nella parte superiore del <em><code>checkiandj</code></em> istruzione.</p> + +<pre class="brush: js notranslate">var i = 0; +var j = 10; +checkiandj: + while (i < 4) { + console.log(i); + i += 1; + checkj: + while (j > 4) { + console.log(j); + j -= 1; + if ((j % 2) == 0) { + continue checkj; + } + console.log(j + ' is odd.'); + } + console.log('i = ' + i); + console.log('j = ' + j); +}</pre> + +<h2 id="Istruzione_for...in">Istruzione <code>for...in</code></h2> + +<p>L'istruzione {{jsxref("statements/for...in","for...in")}} itera una variabile specificata su tutte le proprietà enumerabili di un oggetto. Per ogni proprietà distinta, JavaScript esegue le istruzioni specificate. L'istruzione <code>for...in</code> ha il seguente aspetto:</p> + +<pre class="syntaxbox notranslate">for (variabile in oggetto) { + istruzione +} +// for (variable in object) { +// statements +// } +</pre> + +<h3 id="Esempio_4"><strong>Esempio</strong></h3> + +<p>La seguente funzione prende come argomento un oggetto e il nome dell'oggetto. Quindi itera su tutte le proprietà dell'oggetto e restituisce una stringa che elenca i nomi delle proprietà e i loro valori.</p> + +<pre class="brush: js notranslate">function dump_props(obj, obj_name) { + var result = ""; + for (var i in obj) { + result += obj_name + "." + i + " = " + obj[i] + "<br>"; + } + result += "<hr>"; + return result; +} +</pre> + +<p>Per un oggetto <code>car</code> con proprietà <code>make</code> e <code>model</code>, <code>result</code> sarebbe:</p> + +<pre class="brush: js notranslate">car.make = Ford +car.model = Mustang +</pre> + +<h3 id="Arrays_Matrici"><strong>Arrays / Matrici</strong></h3> + +<p>Anche se può essere allettante usarla come un modo per iterare sugli elementi {{jsxref("Array")}} , l'istruzione the <strong>for...in</strong> restituirà il nome delle proprietà definite dall'utente oltre agli indici numerici. Quindi è meglio usare un ciclo tradizionale {{jsxref("statements/for","for")}} con un indice numerico quando si itera su array, perché l'istruzione <strong>for...in</strong> itera sulle proprietà definite dall'utente oltre agli elementi dell'array, se si modifica l'oggetto Array, (come ad esempio l'aggiunta di proprietà o metodi personalizzati).</p> + +<h2 id="Istruzione_for...of">Istruzione <code>for...of</code></h2> + +<p>L'istruzione {{jsxref("statements/for...of","for...of")}} crea un ciclo che itera su <a href="/en-US/docs/Web/JavaScript/Guide/iterable">oggetti iterabili</a> (inclusi oggetti di tipo {{jsxref("Array")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, {{jsxref("functions/arguments","arguments")}} e così via), richiamando un aggancio di iterazione personalizzato con istruzioni da eseguire per il valore di ogni proprietà distinta.</p> + +<pre class="syntaxbox notranslate">for (<em>variabile</em> di <em>oggetto</em>) { + <em>istruzione +</em>}</pre> + +<p>Il seguente esempio mostra la differenza tra un ciclo <code>for...of</code> e un {{jsxref("statements/for...in","for...in")}} ciclo continuo. Mentre <code>for...in</code> itera sopra i nomi delle proprietà, <code>for...of</code> itera sui valori delle proprietà:</p> + +<pre class="brush:js notranslate">let arr = [3, 5, 7]; +arr.foo = "hello"; + +for (let i in arr) { + console.log(i); // logs "0", "1", "2", "foo" +} + +for (let i of arr) { + console.log(i); // logs "3", "5", "7" +}</pre> + +<p>{{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}</p> diff --git a/files/it/web/javascript/il_dom_e_javascript/index.html b/files/it/web/javascript/il_dom_e_javascript/index.html new file mode 100644 index 0000000000..9f2b0fbb56 --- /dev/null +++ b/files/it/web/javascript/il_dom_e_javascript/index.html @@ -0,0 +1,81 @@ +--- +title: Il DOM e JavaScript +slug: Web/JavaScript/Il_DOM_e_JavaScript +tags: + - DOM + - JavaScript + - Tutte_le_categorie +translation_of: Web/JavaScript/JavaScript_technologies_overview +--- +<h3 id="Il_Grande_Disegno" name="Il_Grande_Disegno">Il Grande Disegno</h3> + +<p>Gli effetti visivi come muovere i layer sulla pagina, mostrare e nascondere layer, far comparire menu, eccetera, sono spesso indicati come "<a href="it/DHTML">DHTML</a>", o "Dynamic HTML". Alcuni hanno dubbi sull'effettiva utilità di queste tecnologie in pagine web che dovrebbero trasmettere del contenuto e non la presentazione, ma dobbiamo comunque prendere atto della loro larga diffusione.</p> + +<p>Molti web master si limitano ad andare sui siti che offrono script DHTML e ricopiare il codice nelle loro pagine, senza interessarsi a come funzionano quegli script DHTML. Sfortunatamente la maggior parte di questi siti parlano di "javascript" e "DHTML", ma mai di DOM, il quale, sebbene sia un concetto introdotto da parecchio, solo di recente sta entrando nel gergo del web designer medio.</p> + +<p>E' una grande sfida per un progetto come Mozilla convincere i possessori di questi siti che ***it is worth coding for the W3C DOM, which sometimes means a lot of work, and drops support for the older browsers. It is also a big challenge to get the facts straight concerning the support for the W3C DOM. *** Uno dei più grandi problemi che incontrano alcuni web developer è la confusione tra <a href="it/JavaScript">JavaScript</a>, <a href="it/DHTML">DHTML</a> e il <a href="it/DOM">DOM</a>. In questo articolo tenteremo di chiarire le cose, e di spiegare le relazioni fra queste utili ed elaborate tecnologie.</p> + +<h3 id="JavaScript.2C_IL_Linguaggio_di_Web_Scripting" name="JavaScript.2C_IL_Linguaggio_di_Web_Scripting">JavaScript, IL Linguaggio di Web Scripting</h3> + +<p><a href="it/JavaScript">JavaScript</a> è un "linguaggio di scripting di oggetti" sviluppato inizialmente alla Netscape Communications Corp. da Brendan Eich, che oggi è uno dei leader del progetto Mozilla. Il motore JavaScript usato da Mozilla si chiama <a href="it/SpiderMonkey">SpiderMonkey</a>, e aderisce alla specifica ECMA-262 3°revisione(di cui è un superset; guarda anche la pagina <a href="it/ECMAScript">ECMAScript</a>).</p> + +<p>Contrariamente a diffuse errate credenze, JavaScript non è "Java Interpretato". Possiamo dire che JavaScript è un linguaggio di scripting dinamico che supporta la costruzione di oggetti basata su prototipi. La sintassi di base è volutamente simile sia a Java che a C++ per ridurre il numero di nuovi concetti richiesti per imparare il linguaggio. Il grande vantaggio di JavaScript è che è estremamente facile da imparare se vuoi fare programmazione di base (come quella richiesta per semplici DHTML). Niente tipi di variabili a vista, stringhe semplici da usare, neutralità totale della piattaforma,ecc. Per i programmatori avanzati può essere usato sia come linguaggio orientato agli oggetti che come linguaggio procedurale.</p> + +<p>Gran parte di questo paragrafo su JavaScript è stato preso dalla <a class="external" href="http://mozilla.org/js">pagina JavaScript di Mozilla</a>. Puoi anche consultare <a class="external" href="http://www.mozilla.org/js/language/">la più recente specifica ECMA</a>.</p> + +<h3 id="Il_Modello_a_Oggetti_del_Documento.2C_un_insieme_di_interfacce_indipendenti_dal_linguaggio" name="Il_Modello_a_Oggetti_del_Documento.2C_un_insieme_di_interfacce_indipendenti_dal_linguaggio">Il Modello a Oggetti del Documento, un insieme di interfacce indipendenti dal linguaggio</h3> + +<p>Mentre Javascript è il linguaggio di programmazione che ti permette di operare sugli oggetti DOM, il DOM ti fornisce metodi e proprietà per recuperare, modificare, aggiornare ed eliminare parti del documento su cui stai lavorando. Per esempio, potresti recuperare il valore di un campo di testo e metterlo in una variabile stringa con il DOM; a questo punto puoi usare l'operatore Javascript di concatenazione <code>+</code> , per unire quella stringa ad un'altra, in base a ciò che vuoi ottenere. Potresti quindi usare il metodo <code><a href="it/DOM/window/alert">alert()</a></code> per mostrare la stringa all'utente attraverso una finestra di dialogo. Guarda anche gli altri esempi più sotto.</p> + +<p>In che senso "indipendente dal linguaggio"? Non è javascript l'unico modo per accedere al DOM? No, ad esempio Mozilla usa il DOM sia col C++ che col Javascript per la sua interfaccia utente. Questi sono alcuni dei linguaggi che hanno un'implementazione del DOM: <a class="external" href="http://users.erols.com/enno/index.html">Perl</a>, <a class="external" href="http://www.docuverse.com/domsdk/index.html">Java</a>, <a class="external" href="http://www.vivid-creations.com/dom/index.htm">ActiveX</a>, <a class="external" href="http://fourthought.com/4Suite/4DOM">Python</a>; ciò è possibile grazie all'indipendenza del DOM dal linguaggio di programmazione.</p> + +<h3 id="Il_DOM_e_Javascript_-_Chi_sta_facendo_cosa.3F" name="Il_DOM_e_Javascript_-_Chi_sta_facendo_cosa.3F">Il DOM e Javascript - Chi sta facendo cosa?</h3> + +<p>Arriviamo al punto principale di questo documento: chi sta facendo cosa? In uno script che ho inserito nella mia pagina, dov'è il DOM, e dov'è Javascript? Guardiamo da vicino un piccolo esempio: il codice prende tutti i tag <span class="nowiki"><a></span> della pagina e li mette in una NodeList che abbiamo chiamato "<code>anchorTags</code>". Quindi per ogni tag ancora facciamo comparire un avviso contenente il valore dell'attributo href del tag. In blu c'è Javascript, in rosso il DOM.</p> + +<pre class="eval"><span class="highlightblue">var anchorTags = <span class="highlightred">document.getElementsByTagName("a")</span>; +for (var i = 0; i < <span class="highlightred">anchorTags.length</span> ; i++) +{ + <span class="highlightred">alert</span>("Href of " + i + "-th element is : " + <span class="highlightred">anchorTags[i].href</span> + "\n"); +}</span> +</pre> + +<h4 id="Spiegazione" name="Spiegazione">Spiegazione</h4> + +<p>Questo frammento di codice mostra cos'è Javascript, e cos'è DOM..</p> + +<dl> + <dt><span class="highlightblue">var anchorTags =</span></dt> + <dd>Crea una variabile chiamata "<code>anchorTags</code>".</dd> + <dt><span class="highlightred">document.getElementsByTagName("a")</span></dt> + <dd>L'interfaccia <code>Document</code> è la prima interfaccia definita nel DOM1 Core, e <code>document</code> è l'oggetto che implementa l'interfaccia <code>Document</code>. L'oggetto document contiene tutto ciò che c'è nella pagina.<br> + Il DOM1 Core definisce il metodo <code>getElementsByTagName()</code> Nell'interfaccia <code>Document</code>. Questo metodo mette in una NodeList(una sorta di array specifico per contenere i nodi del DOM)tutti i tag il cui nome corrisponde al parametro passato alla funzione, in ordine di apparizione nel codice sorgente del documento. La variabile <code>anchorTags</code> è quindi ora una NodeList.</dd> + <dt><span class="highlightblue">;</span></dt> + <dd>Il punto e virgola che chiude le istruzioni. Roba di Javascript.</dd> + <dt><span class="highlightblue">for (var i = 0; i <</span></dt> + <dd>Tipico ciclo "for" in un linguaggio di programmazione. Ci consente di scorrere tutti i nodi contenuto nella NodeList salvata in <code>anchorTags</code>. "<code>i</code>" è una variabile temporanea di Javascript.</dd> + <dt><span class="highlightred">anchorTags.length</span></dt> + <dd>Nel DOM1 Core è definita la proprietà <code>length</code> dell'interfaccia <code>NodeList</code>. Restituisce un intero che è il numero di nodi contenuti nella NodeList.</dd> + <dt><span class="highlightblue">; i++) {</span></dt> + <dd>Tipica istruzione per incrementare di 1 una variabile. Javascript.</dd> + <dt><span class="highlightred">alert(</span></dt> + <dd><code>alert()</code> è un metodo del DOM che apre una finestrella in mezzo allo schermo con dentro la stringa che gli hai passato. Nota: questo metodo fa parte di ciò che viene chiamato DOM level 0, o DOM0; è un insieme di interfacce che non fanno parte di nessuna specifica DOM, ma sono comunque implementate da alcuni browser.</dd> + <dt><span class="highlightblue">"Href of this a element is : " +</span></dt> + <dd>Una stringa letterale e un operatore di concatenazione di stringhe. JavaScript.</dd> + <dt><span class="highlightred">anchorTags{{ mediawiki.external('i') }}.href</span></dt> + <dd>"<code>href</code>" è una proprietà definita dall'intefaccia <code>HTMLAnchorElement</code> della specifica DOM1 HTML. Restituisce il valore dell'attributo <code>href</code> dell'elemento ancora, se presente.<br> + Usiamo anche <code>anchorTags{{ mediawiki.external('i') }}</code>, la stessa sintassi usata in Javascript per accedere all'i-esimo elemento di un array. Un modo più "linguaggio-indipendente" per accedere a un elemento di una NodeList è l'uso del metodo <code>item()</code>, definito nella interfaccia <code>NodeList</code>: <code>anchorTags.item(1).href</code>, ma la maggior parte delle implementazioni Javascript permettono di usare la più sbrigativa sintassi per array, che è ciò che la maggior parte dei programmatori usano.</dd> + <dt><span class="highlightblue">+ "\n");</span></dt> + <dd>Un'altra concatenazione di stringhe. Inserisce un ritorno del carrello alla fine della stringa.</dd> + <dt><span class="highlightblue">}</span></dt> + <dd>Fine del ciclo "for".</dd> +</dl> + +<div class="originaldocinfo"> +<p><strong>Original Document Information</strong></p> + +<ul> + <li>Author(s): Fabian Guisset <fguisset at softhome dot net></li> + <li>Copyright Information: © 1998-2005 by individual mozilla.org contributors; content available under a <a class="external" href="http://www.mozilla.org/foundation/licensing/website-content.html">Creative Commons license</a></li> +</ul> +</div> diff --git a/files/it/web/javascript/index.html b/files/it/web/javascript/index.html new file mode 100644 index 0000000000..39d9432d38 --- /dev/null +++ b/files/it/web/javascript/index.html @@ -0,0 +1,116 @@ +--- +title: JavaScript +slug: Web/JavaScript +tags: + - JavaScript +translation_of: Web/JavaScript +--- +<div class="callout-box"><strong><a href="/docs/JavaScript/A_re-introduction_to_JavaScript" title="./A re-introduction to JavaScript">Una re-introduzione a JavaScript</a></strong><br> +Una panoramica per chi <em>pensa </em>di conoscere JavaScript</div> + +<div> +<p>{{JsSidebar}}</p> + +<p><strong>JavaScript</strong> (spesso abbreviato in <strong>JS</strong>) è un linguaggio leggero, interpretato, funzionale e orientato agli oggetti, conosciuto per lo più come linguaggio di script per pagine web, ma <a class="external" href="http://en.wikipedia.org/wiki/JavaScript#Uses_outside_web_pages" title="http://en.wikipedia.org/wiki/JavaScript#Uses_outside_web_pages">utilizzato in molti ambienti non-browser</a> così come <a class="external" href="http://nodejs.org/">node.js</a> o <a href="http://couchdb.apache.org" title="http://couchdb.apache.org">Apache CouchDB</a>.</p> + +<p>Lo standard JavaScript è <a href="/docs/JavaScript/Language_Resources" title="ECMAScript">ECMAScript</a>. A partire dal 2012, tutti i moderni browser supportano ECMAScript 5.1. I browser più vecchi supportano almeno ECMAScript 3. Il 17 Giugno, 2015, <a href="https://www.ecma-international.org/">Ecma International</a> ha pubblicato il 6° grande aggiornamento di ECMAScript, che è chiamato ufficialmente ECMAScript 2015; ci si riferiva inizialmente ad esso come ECMAScript 6 o ES6. Da allora, gli standard ECMAScript hanno dei cicli di rilascio annuali. Questa documentazione si riferisce all'ultima stesura del linguaggio <a href="https://tc39.github.io/ecma262/">ECMAScript 2020</a>. Lo stato di avanzamento delle nuove caratteristiche può essere seguito sul <a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:proposals">wiki dedicato</a>.</p> + +<p>Questa sezione del sito è dedicata al solo linguaggio JavaScript, ossia a quelle parti non specifiche per pagine Web o ad altri ambienti ospite. Per informazioni sulle API specifiche alle pagine Web, vedere <a href="/docs/DOM" title="DOM">DOM</a>. Nel <a href="/docs/Gecko_DOM_Reference/Introduction#DOM_and_JavaScript" title="Gecko DOM Reference/Introduction#DOM and JavaScript">DOM Reference</a> puoi approfondire come il DOM e JavaScript si compenetrino.</p> + +<p>Non confondere JavaScript con il <a href="https://it.wikipedia.org/wiki/Java_(linguaggio_di_programmazione)">linguaggio di programmazione Java</a>. Sia "Java" che "JavaScript" sono marchi commerciali o marchi registrati di Oracle negli USA e in altri paesi. Comunque, i due linguaggi di programmazione hanno sintassi, semantica ed usi differenti.</p> + +<table class="topicpage-table" style="height: 1910px; width: 531px;"> + <tbody> + <tr> + <td> + <h2 class="Documentation" id="Documentazione">Documentazione</h2> + + <dl> + <dt><a href="/docs/JavaScript/Reference" title="JavaScript/Reference">Riferimento a JavaScript </a></dt> + <dd>E' la guida di riferimento a JavaScript, comprendente la documentazione completa a JavaScript 1.5 e relativi aggiornamenti.</dd> + <dt><a href="/docs/JavaScript/Guide" title="JavaScript/Guide">Guida a JavaScript</a></dt> + <dd>La nostra principale guida al come programmare con JavaScript.</dd> + </dl> + + <h3 id="Articoli_introduttivi">Articoli introduttivi</h3> + + <dl> + <dt><a href="/docs/JavaScript_technologies_overview" title="./Guide">Panoramica delle tecnologie JavaScript</a></dt> + <dd>Introduzione al panorama JavaScript nei web browser</dd> + <dt><a href="/docs/JavaScript/Data_structures" title="Data structures">Strutture dati di JavaScript</a></dt> + <dd>Panoramica delle strutture dati disponibili in JavaScript</dd> + <dt><a href="/docs/JavaScript/Guide/Inheritance_and_the_prototype_chain" title="JavaScript/Guide/Inheritance_and_the_prototype_chain">Ereditarietà e catena dei prototipi</a></dt> + <dd>Spiegazione dell'ampiamente fraintesa e sottovalutata ereditarietà basata sui prototipi</dd> + </dl> + + <h3 id="Altri_articoli">Altri articoli</h3> + + <dl> + <dt><a href="/docs/Canvas_tutorial" title="Canvas_tutorial">Esercitazione sui Canvas</a></dt> + <dd><canvas> è l'elemento di HTML5 che può essere utilizzato per disegni grafici utilizzando gli script. Può per esempio essere utilizzato per disegnare grafici, comporre foto o realizzare semplici (o non così semplici) animazioni.</dd> + <dt><a href="/docs/JavaScript/Language_Resources" title="Language Resources">Risorse del Linguaggio JavaScript </a></dt> + <dd>Una descrizione degli standard del linguaggio JavaScript.</dd> + <dt><a class="external" href="http://msdn.microsoft.com/en-us/library/ff405926.aspx" title="http://msdn.microsoft.com/en-us/library/ff405926.aspx">Documenti di Supporto agli Standard di Internet Explorer</a></dt> + <dd>Microsoft pubblica dei documenti che descrivono "variazioni, chiarimenti ed estensioni a standard web definitivamente approvati supportati da Internet Explorer." Di questi, quelli relativi a JavaScript sono: + <ul> + <li><a class="external" href="http://msdn.microsoft.com/en-us/library/ff520996.aspx" title="http://msdn.microsoft.com/en-us/library/ff520996.aspx">[MS-ES3]: Internet Explorer ECMA-262 ECMAScript Language Specification Standards Support Document </a></li> + <li><a class="external" href="http://msdn.microsoft.com/en-us/library/ff521046.aspx" title="http://msdn.microsoft.com/en-us/library/ff521046.aspx">[MS-ES3EX]: Microsoft JScript Extensions to the ECMAScript Language Specification Third Edition </a></li> + <li><a class="external" href="http://msdn.microsoft.com/en-us/library/ff960769.aspx" title="http://msdn.microsoft.com/en-us/library/ff960769.aspx">[MS-ES5]: Internet Explorer ECMA-262 ECMAScript Language Specification (Fifth Edition) Standards Support Document </a></li> + <li><a class="external" href="http://msdn.microsoft.com/en-us/library/ff955363.aspx" title="http://msdn.microsoft.com/en-us/library/ff955363.aspx">[MS-ES5EX]: Internet Explorer Extensions to the ECMA-262 ECMAScript Language Specification (Fifth Edition)</a></li> + </ul> + </dd> + </dl> + + <p><span class="alllinks"><a href="/docs/tag/JavaScript" title="/en-US/tag/JavaScript">Vedi Tutto...</a></span></p> + </td> + <td> + <h2 class="Tools" id="Strumenti_e_Risorse_avanzate">Strumenti e Risorse avanzate</h2> + + <ul> + <li><a href="http://www.codecademy.com/" title="http://www.codecademy.com/">Codecademy</a> - Corso JavaScript gratuito con esercizi interattivi</li> + <li><a href="http://codeschool.com" title="http://codeschool.com">Code School </a>- Imparare Facendo, Diversi corsi JS</li> + <li><a class="link-https" href="https://github.com/rwldrn/idiomatic.js">Idiomatic.js</a> - Principi di Scrittura Consistente, Idioma JavaScript</li> + <li><a href="/docs/JavaScript/Memory_Management" title="Memory Management">Memory Management in JavaScript</a> . Panoramica sul come lavora il gestore della memoria in JavaScript</li> + <li><a class="external" href="http://www.getfirebug.com/">Firebug</a> - Profilazione e Debug di JavaScript</li> + <li><a href="/docs/Venkman" title="Venkman">Venkman</a> - Debug JavaScript</li> + <li><a href="/docs/JavaScript/Shells" title="./Shells">JavaScript Shells</a> - frammenti di codice d'esempio</li> + <li><a class="external" href="http://www.jslint.com/lint.html">JSLint</a> - contrllore di sintassi, avvisi contro cattive pratiche</li> + <li><a class="external" href="http://jshint.com" title="http://jshint.com/">JSHint</a> - controllore di sintassi realizzato dalla comunità</li> + <li><a class="external" href="http://code.google.com/p/jsdoc-toolkit/" title="http://code.google.com/p/jsdoc-toolkit/">JSDoc</a> - generatore di documentazione dal codice</li> + <li><a class="external" href="http://www.aptana.com" title="http://www.aptana.com">Aptana Studio</a> - IDE Open source con supporto Ajax and JavaScript (basato su eclipse)</li> + <li><a class="external" href="http://netbeans.org/features/javascript/">Netbeans</a> - IDE Open source che comprende un sofisticato supporto JavaScript</li> + <li><a class="external" href="http://www.eclipse.org/downloads/packages/eclipse-ide-javascript-web-developers/heliossr1">Eclipse</a> - IDE Open source che include strumenti di sviluppo JavaScript</li> + <li><a class="external" href="http://www.c9.io" title="http://www.c9.io">Cloud9 IDE</a> - IDE Open source eseguito nel browser con supporto JavaScript e Node.js</li> + <li><a class="external" href="http://prettydiff.com/" title="http://prettydiff.com/">Pretty Diff </a>- Strumento per il controllo del codice minimizzato con quello regolare</li> + <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/7434">Extension Developer's Extension</a> - Offre Ambente e Shell JS</li> + <li><a href="http://boilerplatejs.org/" title="http://boilerplatejs.org/">BoilerplateJS</a> - Architettura di riferimento per progetti JavaScript di larga scala</li> + <li><a href="/docs/JavaScript/Other_JavaScript_tools" title="./Other JavaScript tools">Other JavaScript tools</a></li> + </ul> + + <p><span class="alllinks"><a href="/docs/tag/JavaScript:Tools" title="/en-US/docs/tag/JavaScript:Tools">Vedi Tutto...</a></span></p> + + <h2 class="Community" id="Other_resources" name="Other resources">Altre risorse</h2> + + <dl> + <dt><a class="external" href="http://bonsaiden.github.com/JavaScript-Garden" title="http://bonsaiden.github.com/JavaScript-Garden">JavaScript Garden</a></dt> + <dd>Un sito con utili informazioni sulle parti più esoteriche di JavaScript.</dd> + <dt><a class="link-https" href="https://github.com/bebraw/jswiki/wiki" title="https://github.com/bebraw/jswiki/wiki">JSWiki</a></dt> + <dd>Un wiki basato su Github che indicizza librerie e risorse</dd> + <dt><a href="http://stackoverflow.com/questions/tagged/javascript" title="http://stackoverflow.com/questions/tagged/css">Stack Overflow</a></dt> + <dd>Un sito collaborativo di Q&A in cui puoi trovare risposte alle tue domande o porne se non ne trovi.</dd> + <dt><a href="http://pineapple.io/resources/tagged/javascript?type=tutorials&sort=all_time" title="http://pineapple.io/resources/tagged/javascript?type=tutorials&sort=all_time">Pineapple · JavaScript</a></dt> + <dd>Un ampio database di risorse ed esercitazioni JavaScript.</dd> + </dl> + + <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Argomenti correlati</h2> + + <ul> + <li><a href="/docs/AJAX" title="AJAX">AJAX</a>, <a href="/docs/DOM" title="DOM">DOM</a>, <a class="internal" href="/docs/JavaScript/Server-Side_JavaScript" title="./Server-Side JavaScript">Server-Side JavaScript</a>, <a href="/docs/DHTML" title="DHTML">DHTML</a>, <a href="/docs/E4X" title="E4X">E4X</a>, <a href="/docs/SpiderMonkey" title="SpiderMonkey">SpiderMonkey</a>, <a href="/docs/HTML/Canvas" title="HTML/Canvas">Canvas</a></li> + </ul> + </td> + </tr> + </tbody> +</table> + +<p>JavaScript è un marchio commerciale o marchio commerciale registrato della Oracle negli U.S. e in altri paesi.</p> +</div> diff --git a/files/it/web/javascript/inheritance_and_the_prototype_chain/index.html b/files/it/web/javascript/inheritance_and_the_prototype_chain/index.html new file mode 100644 index 0000000000..40e3f31a60 --- /dev/null +++ b/files/it/web/javascript/inheritance_and_the_prototype_chain/index.html @@ -0,0 +1,556 @@ +--- +title: Ereditarietà e catena dei prototype +slug: Web/JavaScript/Inheritance_and_the_prototype_chain +tags: + - Intermedio + - JavaScript + - OOP + - ereditarietà +translation_of: Web/JavaScript/Inheritance_and_the_prototype_chain +--- +<div>{{jsSidebar("Advanced")}}</div> + +<p>JavaScript confonde un po' gli sviluppatori che hanno esperienza di linguaggi basati sulle classi (come Java o C++), siccome è un linguaggio dinamico e non fornisce un'implementazione di <code>class</code> (la keyword <code>class</code> è introdotto in ES2015, ma è zucchero sintattico, Javascript rimarrà basato sui prototipi).</p> + +<p>In termini di ereditarietà, Javascript ha solo un costrutto: gli oggetti. Ogni oggetto ha un link interno ad un altro oggetto chiamato <strong>prototype.</strong> Questo oggetto prototype ha a sua volta un suo prototype, e così via finché si raggiunge un oggetto con property <code>null</code>. <code>null</code>, per definizione, non ha un prototype, ed agisce come link finale nella <strong>catena di prototipi</strong>.</p> + +<p>Quasi tutti gli oggetti in Javascript sono istanze di {{jsxref("Object")}}, che risiede in cima alla catena dei prototipi.</p> + +<p>Nonostante questo sia considerato spesso come una debolezza di Javascript, il modello di ereditarietà prototipale è invece più potente del modello classico. Per esempio, è banale costruire un classico modello sul modello prototipale, mentre il contrario è molto più difficile.</p> + +<h2 id="Ereditarietà_con_la_catena_di_prototipi">Ereditarietà con la catena di prototipi</h2> + +<h3 id="Ereditare_properties">Ereditare properties</h3> + +<p>Gli oggetti javaScript sono "contenitori" dinamici di proprietà (<strong>own properties</strong>). Gli oggetti JavaScript hanno un link ad un oggetto prototype. Provando ad accedere ad una proprietà di un oggetto, la proprietà sarà ricercata sia sull'oggetto, sia sul prototipo, sul prototipo del prototipo e così via fino a trovare una proprietà con il nome specificato fino alla fine della catena stessa.</p> + +<div class="note"> +<p>Seguendo lo standard ECMAScript, la notazione <code>someObject.[[Prototype]]</code> viene usata per designare il prototype di <code>someObject</code>. Dall'introduzione di ECMAScript 2015, per accedere a <code>[[Protoype]]</code> si utilizzano i metodi {{jsxref("Object.getPrototypeOf()")}} e {{jsxref("Object.setPrototypeOf()")}}. Questo è equivalente ad utilizzare la property <code>__proto__</code>, proprietà non-standard di JavaScript ma di fatto implementata da svaritati browser.</p> + +<p>Non dev'essere confusa con la proprietà delle funzioni <code><em>func</em>.prototype</code>, la quale invece specifica il [[Prototype]] da assegnare a tutte le <em>istanze</em> di oggetti creati dalla funzione data quando si usa un costruttore. La proprietà <strong>Object.prototype </strong> rappresenta il prototipo oggetto {{jsxref("Object")}} .</p> +</div> + +<p>Di seguito viene mostrato cosa succede quando si tenta l'accesso ad una proprietà:</p> + +<pre class="brush: js">//Creiamo un oggetto o dalla funzione f con le sue properties a e b; +let f = function() { + this.a = 1; + this.b = 2; +} +let o = new f(); //{a: 1, b: 2} +//Aggiungiamo delle properties nel prototype di f +f.prototype.b = 3; +f.prototype.c = 4; + +//non aggiungere le properties a f mediante f.prototype = {b:3,c:4}; questo romperebbe la prototype chain +// o.[[Prototype]] ha le properties b and c: +// {b: 3, c: 4} +// o.[[Prototype]].[[Prototype]] è Object.prototype. +// Infine, o.[[Prototype]].[[Prototype]].[[Prototype]] é null. +// Questa è la fine della catena di prototipi poiché null, per defini// zione, non ha [[Prototype]]. +// Così, l'intera catena di prototipi sarà: +// {a:1, b:2} ---> {b:3, c:4} ---> Object.prototype ---> null + +console.log(o.a); // 1 +// C'è una property 'a' su o? Si, e il suo valore è 1. + +console.log(o.b); // 2 +// C'è una property 'b' su o? Si, e il suo valore è 2. +// Il prototype ha anche una property 'b', ma non è visitata. +// Questa è chiamata "Property Shadowing" + +console.log(o.c); // 4 +// C'è una propria property 'c' su o? No, verifica il suo prototype. +// C'è una propria property 'c' su o.[[Prototype]]? si, il suo valore// è 4. + +console.log(o.d); // undefined +// C'è una propria property 'd' su o? No, verifica il suo prototype. +// C'è una propria property 'd' su o.[[Prototype]]? No, verifica il suo prototype. +// o.[[Prototype]].[[Prototype]] è Object.prototype e non è presente nessuna property 'd' di default, verifica il suo prototype. +// o.[[Prototype]].[[Prototype]].[[Prototype]] è null, stop alla ricerca, +// nessuna property trovata, restituisce undefined +</pre> + +<p>Impostando una property su un oggetto viene creata una own property. La sola eccezione alle regole di comportamento setting e getting è quando c'è una property ereditata con un <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters" title="Defining Getters and Setters">getter or a setter</a>.</p> + +<h3 id="Metodi_ereditati">"Metodi" ereditati</h3> + +<p>JavaScript non ha "metodi" nella forma tipica dei linguaggi basati sulle classi. In JavaScript, qualunque funzione può essere aggiunta ad un oggetto come fosse property. Una funzione ereditata agisce come ogni altra property, incluse le property shadowing come mostrato di seguito (in questo caso, una forma di <em>sovrascrittura di metodi</em>).</p> + +<p>Quando viene eseguita una funzione ereditata, il valore del <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this" title="this"><code>this</code></a> punta all'oggetto ereditante, non all'oggetto prototype dove la funzione è una property proprietaria (own property).</p> + +<pre class="brush: js">var o = { + a: 2, + m: function(b){ + return this.a + 1; + } +}; + +console.log(o.m()); // 3 +// Chiamando o.m in questo caso, 'this' si riferisce a o + +var p = Object.create(o); +// p è un oggeto che eredita da o + +p.a = 12; // crea una propria property 'a' su p +console.log(p.m()); // 13 +// quando p.m è chiamata, 'this' si riferisce a p. +// Così quando p eredita la funzione m di o, +// 'this.a' significa p.a, the propria property 'a' di p +</pre> + +<h2 id="Luso_di_prototypes_in_Javascript">L'uso di prototypes in Javascript</h2> + +<p>Guardiamo cos'è successo dietro le quinte con maggior dettaglio.</p> + +<p>In Javascript, come già detto in precedenza, le funzioni possono avere delle properties. Tutte le funzioni hanno una property speciale chiamata <code>prototype</code>. Si prega di notare che il codice sottostante è autonomo (si può presumere che non ci sia altro codice JavaScript nella pagina web oltre al codice sottostante). Per una migliore esperienza di apprendimento, si consiglia vivamente di aprire una console, navigare fino alla scheda "console", copiare e incollare nel codice JavaScript sottostante ed eseguirlo premendo il tasto Invio. (La console è inclusa nella maggior parte degli strumenti per sviluppatori del browser web. Ulteriori informazioni sono disponibili per <a href="https://wiki.developer.mozilla.org/en-US/docs/Tools">Firefox Developer Tools</a>, <a href="https://developers.google.com/web/tools/chrome-devtools/">Chrome DevTools</a>, and <a href="https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide">Edge DevTools</a>.)</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">doSomething</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">{</span><span class="punctuation token">}</span> +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span> doSomething<span class="punctuation token">.</span>prototype <span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="comment token">// Non importa come dichiari una funzione, una</span> +<span class="comment token">// funzione in JavaScript </span><span class="comment token">avrà sempre una property +// prototype di default.</span> +<span class="keyword token">var</span> <span class="function function-variable token">doSomething</span> <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">{</span><span class="punctuation token">}</span><span class="punctuation token">;</span> +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span> doSomething<span class="punctuation token">.</span>prototype <span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p>Come visto sopra, <code>doSomething()</code> ha una property <code>prototype</code> predefinita, come visualizzato dalla console. Dopo aver eseguito questo codice, la console dovrebbe aver visualizzato un oggetto simile a questo.</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="punctuation token">{</span> + constructor<span class="punctuation token">:</span> ƒ <span class="function token">doSomething</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">,</span> + __proto__<span class="punctuation token">:</span> <span class="punctuation token">{</span> + constructor<span class="punctuation token">:</span> ƒ <span class="function token">Object</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">,</span> + hasOwnProperty<span class="punctuation token">:</span> ƒ <span class="function token">hasOwnProperty</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">,</span> + isPrototypeOf<span class="punctuation token">:</span> ƒ <span class="function token">isPrototypeOf</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">,</span> + propertyIsEnumerable<span class="punctuation token">:</span> ƒ <span class="function token">propertyIsEnumerable</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">,</span> + toLocaleString<span class="punctuation token">:</span> ƒ <span class="function token">toLocaleString</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">,</span> + toString<span class="punctuation token">:</span> ƒ <span class="function token">toString</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">,</span> + valueOf<span class="punctuation token">:</span> ƒ <span class="function token">valueOf</span><span class="punctuation token">(</span><span class="punctuation token">)</span> + <span class="punctuation token">}</span> +<span class="punctuation token">}</span></code></pre> + +<p>Possiamo aggiungere delle properties al prototype di <code>doSomething()</code>, come mostrato in seguito.</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">doSomething</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">{</span><span class="punctuation token">}</span> +doSomething<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>foo <span class="operator token">=</span> <span class="string token">"bar"</span><span class="punctuation token">;</span> +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span> doSomething<span class="punctuation token">.</span>prototype <span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p>Il risultato è:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="punctuation token">{</span> + foo<span class="punctuation token">:</span> <span class="string token">"bar"</span><span class="punctuation token">,</span> + constructor<span class="punctuation token">:</span> ƒ <span class="function token">doSomething</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">,</span> + __proto__<span class="punctuation token">:</span> <span class="punctuation token">{</span> + constructor<span class="punctuation token">:</span> ƒ <span class="function token">Object</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">,</span> + hasOwnProperty<span class="punctuation token">:</span> ƒ <span class="function token">hasOwnProperty</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">,</span> + isPrototypeOf<span class="punctuation token">:</span> ƒ <span class="function token">isPrototypeOf</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">,</span> + propertyIsEnumerable<span class="punctuation token">:</span> ƒ <span class="function token">propertyIsEnumerable</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">,</span> + toLocaleString<span class="punctuation token">:</span> ƒ <span class="function token">toLocaleString</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">,</span> + toString<span class="punctuation token">:</span> ƒ <span class="function token">toString</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">,</span> + valueOf<span class="punctuation token">:</span> ƒ <span class="function token">valueOf</span><span class="punctuation token">(</span><span class="punctuation token">)</span> + <span class="punctuation token">}</span> +<span class="punctuation token">}</span></code></pre> + +<p>Ora possiamo usare l'operatore <code>new</code> per creare un'istanza di <code>doSomething()</code> basata su questo prototipo. Per usare l'operatore <code>new</code>, è sufficiente invocare la funzione normalmente, utilizzando però il prefisso new. Chiamare una funzione con l'operatore <code>new</code> restituisce un oggetto che è un'istanza della funzione. Le proprietà possono poi essere aggiunte a questo oggetto.</p> + +<p>Prova ad eseguire il seguente codice:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">doSomething</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">{</span><span class="punctuation token">}</span> +doSomething<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>foo <span class="operator token">=</span> <span class="string token">"bar"</span><span class="punctuation token">;</span> <span class="comment token">// aggiungo una property alla prototype</span> +<span class="keyword token">var</span> doSomeInstancing <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">doSomething</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +doSomeInstancing<span class="punctuation token">.</span>prop <span class="operator token">=</span> <span class="string token">"some value"</span><span class="punctuation token">;</span> <span class="comment token">// aggiungo una property all'oggetto</span> +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span> doSomeInstancing <span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p><span class="punctuation token">Il risultato restituito è simile al seguente:</span></p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="punctuation token">{</span> + prop<span class="punctuation token">:</span> <span class="string token">"some value"</span><span class="punctuation token">,</span> + __proto__<span class="punctuation token">:</span> <span class="punctuation token">{</span> + foo<span class="punctuation token">:</span> <span class="string token">"bar"</span><span class="punctuation token">,</span> + constructor<span class="punctuation token">:</span> ƒ <span class="function token">doSomething</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">,</span> + __proto__<span class="punctuation token">:</span> <span class="punctuation token">{</span> + constructor<span class="punctuation token">:</span> ƒ <span class="function token">Object</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">,</span> + hasOwnProperty<span class="punctuation token">:</span> ƒ <span class="function token">hasOwnProperty</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">,</span> + isPrototypeOf<span class="punctuation token">:</span> ƒ <span class="function token">isPrototypeOf</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">,</span> + propertyIsEnumerable<span class="punctuation token">:</span> ƒ <span class="function token">propertyIsEnumerable</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">,</span> + toLocaleString<span class="punctuation token">:</span> ƒ <span class="function token">toLocaleString</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">,</span> + toString<span class="punctuation token">:</span> ƒ <span class="function token">toString</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">,</span> + valueOf<span class="punctuation token">:</span> ƒ <span class="function token">valueOf</span><span class="punctuation token">(</span><span class="punctuation token">)</span> + <span class="punctuation token">}</span> + <span class="punctuation token">}</span> +<span class="punctuation token">}</span></code></pre> + +<p>Come visto in precedenza, il <code>__proto__ </code>di <code>doSomeInstancing</code> è <code>doSomething.prototype</code>. Ma, cosa significa? Quando si accede a una proprietà di <code>doSomeInstancing</code>, il browser controlla se <code>doSomeInstancing</code> ha quella proprietà.</p> + +<p>Se <code>doSomeInstancing</code> non ha la proprietà, allora il browser cerca la proprietà nel <code>__proto__ </code>di <code>doSomeInstancing</code> (alias doSomething.prototype). Se il <code>__proto__</code> di doSomeInstancing ha la proprietà che si sta cercando, allora quella proprietà presente nel <code>__proto__</code> di doSomeInstancing viene usata.</p> + +<p>Altrimenti, se il <code>__proto__</code> di doSomeInstancing non ha la proprietà, allora il <code>__proto__</code> del <code>__proto__ </code>di doSomeInstancing viene controllato per verificare la presenza della proprietà cercata. Di default, il <code>__proto__</code> di ogni proprietà prototype di qualsiasi funzione è <code>window.Object.prototype</code>. Quindi, il <code>__proto__</code> del <code>__proto__</code> di doSomeInstancing (alias il <code>__proto__</code> di doSomething.prototype (alias Object.prototype)) viene poi controllato alla ricerca della proprietà che si sta cercando.</p> + +<p>Se la proprietà non si trova nel <code>__proto__</code> del <code>__proto__</code> di doSomeInstancing, allora il <code>__proto__</code> del <code>__proto__</code> del <code>__proto__</code> di doSomeInstancing viene esaminato. Tuttavia, c'è un problema: il <code>__proto__</code> del <code>__proto__</code> del <code>__proto__</code> di doSomeInstancing non esiste. Quindi, e solo allora, dopo che l'intera catena di prototipi di <code>__proto__</code> è stata esaminata, e non ci sono più <code>__proto__</code>, il browser conferma che la proprietà non esiste e conclude che il valore della proprietà è <code>undefined</code>.</p> + +<p>Proviamo ad inserire altro codice nella console:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">doSomething</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">{</span><span class="punctuation token">}</span> +doSomething<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>foo <span class="operator token">=</span> <span class="string token">"bar"</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> doSomeInstancing <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">doSomething</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +doSomeInstancing<span class="punctuation token">.</span>prop <span class="operator token">=</span> <span class="string token">"some value"</span><span class="punctuation token">;</span> +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">"doSomeInstancing.prop: "</span> <span class="operator token">+</span> doSomeInstancing<span class="punctuation token">.</span>prop<span class="punctuation token">)</span><span class="punctuation token">;</span> +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">"doSomeInstancing.foo: "</span> <span class="operator token">+</span> doSomeInstancing<span class="punctuation token">.</span>foo<span class="punctuation token">)</span><span class="punctuation token">;</span> +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">"doSomething.prop: "</span> <span class="operator token">+</span> doSomething<span class="punctuation token">.</span>prop<span class="punctuation token">)</span><span class="punctuation token">;</span> +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">"doSomething.foo: "</span> <span class="operator token">+</span> doSomething<span class="punctuation token">.</span>foo<span class="punctuation token">)</span><span class="punctuation token">;</span> +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">"doSomething.prototype.prop: "</span> <span class="operator token">+</span> doSomething<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>prop<span class="punctuation token">)</span><span class="punctuation token">;</span> +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">"doSomething.prototype.foo: "</span> <span class="operator token">+</span> doSomething<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>foo<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p>Il risultato è il seguente:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js">doSomeInstancing<span class="punctuation token">.</span>prop<span class="punctuation token">:</span> some value +doSomeInstancing<span class="punctuation token">.</span>foo<span class="punctuation token">:</span> bar +doSomething<span class="punctuation token">.</span>prop<span class="punctuation token">:</span> <span class="keyword token">undefined</span> +doSomething<span class="punctuation token">.</span>foo<span class="punctuation token">:</span> <span class="keyword token">undefined</span> +doSomething<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>prop<span class="punctuation token">:</span> <span class="keyword token">undefined</span> +doSomething<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>foo<span class="punctuation token">:</span> bar</code></pre> + +<h2 id="Differenti_modi_di_creare_oggetti_e_la_risultante_catena_di_prototype">Differenti modi di creare oggetti e la risultante catena di prototype</h2> + +<h3 id="Oggetti_creati_con_i_costrutti_sintattici">Oggetti creati con i costrutti sintattici</h3> + +<pre class="brush: js">var o = {a: 1}; + +// L'oggetto o appena creato ha Object.prototype come proprio [[Prototype]] +// o non ha una propria property chamata 'hasOwnProperty' +// hasOwnProperty è una property propria di Object.prototype. +// Quindi o eredita hasOwnProperty da Object.prototype +// Object.prototype ha null come suo prototype. +// o ---> Object.prototype ---> null + +var a = ["yo", "whadup", "?"]; + +// Arrays ereditato da Array.prototype +// (che metodi come indexOf, forEach, ecc.) +// La catena di prototype si presenta così: +// a ---> Array.prototype ---> Object.prototype ---> null + +function f(){ + return 2; +} + +// Le funzioni ereditano da Function.prototype +// (che ha metodi come call, bind, ecc.) +// f ---> Function.prototype ---> Object.prototype ---> null +</pre> + +<h3 id="Con_un_constructor">Con un constructor</h3> + +<p>Un "constructor" (costruttore) in JavaScript è semplicemente una funzione che è stata chiamata con <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new" title="new">l'operatore new</a>.</p> + +<pre class="brush: js">function Graph() { + this.vertices = []; + this.edges = []; +} + +Graph.prototype = { + addVertex: function(v){ + this.vertices.push(v); + } +}; + +var g = new Graph(); +// g è un oggetto con proprie properties 'vertices' ed 'edges'. +// g.[[Prototype]] è il valore di Graph.prototype quando viene eseguito new Graph(). +</pre> + +<h3 id="Con_Object.create">Con <code>Object.create</code></h3> + +<p>ECMAScript 5 introduce un nuovo metodo: {{jsxref("Object.create()")}}. Chiamando questo metodo viene creato un nuovo oggetto. Il prototype di questo oggetto è il primo argomento della funzione:</p> + +<pre class="brush: js">var a = {a: 1}; +// a ---> Object.prototype ---> null + +var b = Object.create(a); +// b ---> a ---> Object.prototype ---> null +console.log(b.a); // 1 (ereditato) + +var c = Object.create(b); +// c ---> b ---> a ---> Object.prototype ---> null + +var d = Object.create(null); +// d ---> null +console.log(d.hasOwnProperty); +// undefined, perché d non eredita da Object.prototype +</pre> + +<div> +<h3 id="Operatore_delete_con_Object.create_e_loperatore_new">Operatore <code>delete</code> con <code>Object.create</code> e l'operatore <code>new</code></h3> + +<p>L'operazione di cancellazione di una proprietà mediante l'utilizzo dell'operatore <code>delete</code> permette di evidenziare l'ereditarietà prototipale di un oggetto creato attraverso <code>Object.create</code> e l'oggetto utilizzato da prototipo del nuovo oggetto creato:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> a <span class="operator token">=</span> <span class="punctuation token">{</span>a<span class="punctuation token">:</span> <span class="number token">1</span><span class="punctuation token">}</span><span class="punctuation token">;</span> + +<span class="keyword token">var</span> b <span class="operator token">=</span> Object<span class="punctuation token">.</span><span class="function token">create</span><span class="punctuation token">(</span>a<span class="punctuation token">)</span><span class="punctuation token">;</span> + +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>a<span class="punctuation token">.</span>a<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// stampa 1 </span> +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>b<span class="punctuation token">.</span>a<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// stampa 1</span> +b<span class="punctuation token">.</span>a<span class="operator token">=</span><span class="number token">5</span><span class="punctuation token">;</span> +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>a<span class="punctuation token">.</span>a<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// stampa 1</span> +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>b<span class="punctuation token">.</span>a<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// stampa 5</span> +<span class="keyword token">delete</span> b<span class="punctuation token">.</span>a<span class="punctuation token">;</span> +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>a<span class="punctuation token">.</span>a<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// stampa 1</span> +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>b<span class="punctuation token">.</span>a<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// stampa 1(b.a di valore 5 è cancellato ma viene visualizzato il valore contenuto nella prototype chain )</span> +<span class="keyword token">delete</span> a<span class="punctuation token">.</span>a<span class="punctuation token">;</span> +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>a<span class="punctuation token">.</span>a<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// stampa undefined</span> +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>b<span class="punctuation token">.</span>a<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// stampa undefined</span></code></pre> + +<p>L'operatore <code>new</code> ha una prototype chain più corta in questo esempio:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">Graph</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">this</span><span class="punctuation token">.</span>vertices <span class="operator token">=</span> <span class="punctuation token">[</span><span class="number token">4</span><span class="punctuation token">,</span><span class="number token">4</span><span class="punctuation token">]</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="keyword token">var</span> g <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Graph</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>g<span class="punctuation token">.</span>vertices<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// print [4,4]</span> +g<span class="punctuation token">.</span>vertices <span class="operator token">=</span> <span class="number token">25</span><span class="punctuation token">;</span> +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>g<span class="punctuation token">.</span>vertices<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// print 25</span> +<span class="keyword token">delete</span> g<span class="punctuation token">.</span>vertices<span class="punctuation token">;</span> +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>g<span class="punctuation token">.</span>vertices<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// print undefined</span></code></pre> + +<h3 id="Con_la_parola_chiave_class">Con la parola chiave <code>class</code></h3> + +<p>ECMAScript 2015 introduce un nuovo gruppo di parole chiave per implementare le <a href="/en-US/docs/Web/JavaScript/Reference/Classes">classi</a>. Sebbene questi costrutti assomiglino a quelli familiari agli sviluppatori di linguaggi basati su classi, in realtà non cambia molto. JavaScript continua ad essere basato su prototype. Le nuove parole chiave includono {{jsxref("Statements/class", "class")}}, {{jsxref("Classes/constructor", "constructor")}}, {{jsxref("Classes/static", "static")}}, {{jsxref("Classes/extends", "extends")}}, e {{jsxref("Operators/super", "super")}}.</p> + +<pre class="brush: js">"use strict"; + +class Polygon { + constructor(height, width) { + this.height = height; + this.width = width; + } +} + +class Square extends Polygon { + constructor(sideLength) { + super(sideLength, sideLength); + } + get area() { + return this.height * this.width; + } + set sideLength(newLength) { + this.height = newLength; + this.width = newLength; + } +} + +var square = new Square(2); +</pre> + +<h3 id="Prestazioni">Prestazioni</h3> + +<p>Il tempo impiegato per la ricerca di proprietá che sono in alto nella catena dei prototype può avere un impatto negativo sulle prestazioni e questo può essere significativo in codice in cui le prestazioni sono critiche. Inoltre il tentativo di accedere a properties non esistenti esamina sempre la catena completa dei prototype.</p> + +<p>In più, quando si itera sulle proprietà di un oggetto, <strong>tutte</strong> le properties enumerabili che si trovano nella sua catena dei prototype verranno enumerate. Per controllare se un oggetto ha una property definita da <em>se stesso</em> e non da qualche parte nella catena di prototype<span id="result_box" lang="it"><span>,</span> <span class="hps">è necessario</span> <span class="hps">utilizzare</span> <span class="hps">il metodo</span> </span><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty" title="/ru/docs/JavaScript/Reference/Global_Objects/Object/hasOwnProperty"><code>hasOwnProperty</code></a><span lang="it"> che<span class="hps"> tutti gli oggetti</span> <span class="hps">ereditano da</span> <code><span class="hps">Object.prototype</span></code><span>. Per fornire un esempio concreto, analizziamo il codice del grafo visto in precedenza per illustrare quanto detto:</span></span></p> + +<pre class="brush: js line-numbers language-js"><code class="language-js">console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>g<span class="punctuation token">.</span><span class="function token">hasOwnProperty</span><span class="punctuation token">(</span><span class="string token">'vertices'</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="comment token">// true</span> + +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>g<span class="punctuation token">.</span><span class="function token">hasOwnProperty</span><span class="punctuation token">(</span><span class="string token">'nope'</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="comment token">// false</span> + +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>g<span class="punctuation token">.</span><span class="function token">hasOwnProperty</span><span class="punctuation token">(</span><span class="string token">'addVertex'</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="comment token">// false</span> + +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>g<span class="punctuation token">.</span>__proto__<span class="punctuation token">.</span><span class="function token">hasOwnProperty</span><span class="punctuation token">(</span><span class="string token">'addVertex'</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="comment token">// true</span></code></pre> + +<p><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty" title="/ru/docs/JavaScript/Reference/Global_Objects/Object/hasOwnProperty"><code>hasOwnProperty</code></a> è la sola cosa in JavaScript che opera con le properties <strong>senza</strong> traversare la catena dei prototype.</p> + +<p>Nota: <strong>non</strong> è sufficiente controllare se una property è <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined"><code>undefined</code></a>. La property potrebbe essere presente comunque e questo capita se il suo valore è stato assegnato <code>undefined.</code></p> +</div> + +<h3 id="Cattiva_pratica_Estensione_di_prototypes_nativi">Cattiva pratica: Estensione di prototypes nativi</h3> + +<p>Una caratteristica mancante che viene spesso utilizzata è quella di estendere <code>Object.prototype</code> o uno degli altri prototype built-in.</p> + +<p>Questa tecnica viene chiamata "monkey patching" e rompe l'<em>incapsulazione</em>. Nonostante sia utilizzata da frameworks popolari come ad esempio Prototype.js, non esistono comunque buone ragioni per appesantire i tipi built-in con funzionalità <em>non-standard</em> aggiuntive.</p> + +<p>La <strong>sola</strong> buona ragione per estendere un prototype built-in è per dotare vecchie versioni di JavaScript con funzionalità presenti in quelle nuove; per esempio <code>Array.forEach</code>, etc.</p> + +<h3 id="Sommario_dei_metodi_per_lestensione_della_prototype_chain">Sommario dei metodi per l'estensione della prototype chain</h3> + +<p>Vengono presentati i 4 i metodi per l'estensione della prototype chain con i loro pro e i loro contro. Tutti gli esempi elencati di seguito creano esattamente lo stesso oggetto <code>inst</code> (ottenendo così gli stessi risultati nella console), ma in modi diversi allo scopo illustrativo.</p> + +<table class="standard-table" style="text-align: top;"> + <tbody> + <tr> + <td style="width: 1%;">Nome</td> + <td style="vertical-align: top; width: 1%;">Esempi</td> + <td style="vertical-align: top;">Pro</td> + <td style="vertical-align: top; width: 60%;">Contro</td> + </tr> + <tr> + <td>Inizializzazione con New</td> + <td style="vertical-align: top;"> + <pre class="brush: js line-numbers language-js"> +<code class="language-js"><span class="keyword token">function</span> <span class="function token">foo</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">{</span><span class="punctuation token">}</span> +foo<span class="punctuation token">.</span>prototype <span class="operator token">=</span> <span class="punctuation token">{</span> + foo_prop<span class="punctuation token">:</span> <span class="string token">"foo val"</span> +<span class="punctuation token">}</span><span class="punctuation token">;</span> +<span class="keyword token">function</span> <span class="function token">bar</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">{</span><span class="punctuation token">}</span> +<span class="keyword token">var</span> proto <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">foo</span><span class="punctuation token">;</span> +proto<span class="punctuation token">.</span>bar_prop <span class="operator token">=</span> <span class="string token">"bar val"</span><span class="punctuation token">;</span> +bar<span class="punctuation token">.</span>prototype <span class="operator token">=</span> proto<span class="punctuation token">;</span> +<span class="keyword token">var</span> inst <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">bar</span><span class="punctuation token">;</span> +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>inst<span class="punctuation token">.</span>foo_prop<span class="punctuation token">)</span><span class="punctuation token">;</span> +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>inst<span class="punctuation token">.</span>bar_prop<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + </td> + <td style="vertical-align: top;">Supportato in ogni browser immaginabile (il supporto va fino a IE 5.5!). Inoltre, è molto veloce, molto standard e molto JIST-optimizable.</td> + <td style="vertical-align: top;">Per poter utilizzare questo metodo, la funzione in questione deve essere inizializzata. Durante questa inizializzazione, il costruttore può memorizzare informazioni uniche che devono essere generate per ogni oggetto. Tuttavia, queste informazioni uniche verrebbero generate una sola volta, il che potrebbe portare a problemi. Inoltre, l'inizializzazione del costruttore può inserire metodi indesiderati sull'oggetto. Tuttavia, queste criticità non sono generalmente problemi (in effetti, di solito sono utili) se si tratta di codice proprio e si sa cosa fa cosa e dove.</td> + </tr> + <tr> + <td>Object.create</td> + <td style="vertical-align: top;"> + <pre class="brush: js line-numbers language-js"> +<code class="language-js"><span class="keyword token">function</span> <span class="function token">foo</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">{</span><span class="punctuation token">}</span> +foo<span class="punctuation token">.</span>prototype <span class="operator token">=</span> <span class="punctuation token">{</span> + foo_prop<span class="punctuation token">:</span> <span class="string token">"foo val"</span> +<span class="punctuation token">}</span><span class="punctuation token">;</span> +<span class="keyword token">function</span> <span class="function token">bar</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">{</span><span class="punctuation token">}</span> +<span class="keyword token">var</span> proto <span class="operator token">=</span> Object<span class="punctuation token">.</span><span class="function token">create</span><span class="punctuation token">(</span> + foo<span class="punctuation token">.</span>prototype +<span class="punctuation token">)</span><span class="punctuation token">;</span> +proto<span class="punctuation token">.</span>bar_prop <span class="operator token">=</span> <span class="string token">"bar val"</span><span class="punctuation token">;</span> +bar<span class="punctuation token">.</span>prototype <span class="operator token">=</span> proto<span class="punctuation token">;</span> +<span class="keyword token">var</span> inst <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">bar</span><span class="punctuation token">;</span> +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>inst<span class="punctuation token">.</span>foo_prop<span class="punctuation token">)</span><span class="punctuation token">;</span> +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>inst<span class="punctuation token">.</span>bar_prop<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + + <pre class="brush: js line-numbers language-js"> +<code class="language-js"><span class="keyword token">function</span> <span class="function token">foo</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">{</span><span class="punctuation token">}</span> +foo<span class="punctuation token">.</span>prototype <span class="operator token">=</span> <span class="punctuation token">{</span> + foo_prop<span class="punctuation token">:</span> <span class="string token">"foo val"</span> +<span class="punctuation token">}</span><span class="punctuation token">;</span> +<span class="keyword token">function</span> <span class="function token">bar</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">{</span><span class="punctuation token">}</span> +<span class="keyword token">var</span> proto <span class="operator token">=</span> Object<span class="punctuation token">.</span><span class="function token">create</span><span class="punctuation token">(</span> + foo<span class="punctuation token">.</span>prototype<span class="punctuation token">,</span> + <span class="punctuation token">{</span> + bar_prop<span class="punctuation token">:</span> <span class="punctuation token">{</span> + value<span class="punctuation token">:</span> <span class="string token">"bar val"</span> + <span class="punctuation token">}</span> + <span class="punctuation token">}</span> +<span class="punctuation token">)</span><span class="punctuation token">;</span> +bar<span class="punctuation token">.</span>prototype <span class="operator token">=</span> proto<span class="punctuation token">;</span> +<span class="keyword token">var</span> inst <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">bar</span><span class="punctuation token">;</span> +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>inst<span class="punctuation token">.</span>foo_prop<span class="punctuation token">)</span><span class="punctuation token">;</span> +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>inst<span class="punctuation token">.</span>bar_prop<span class="punctuation token">)</span></code></pre> + </td> + <td style="vertical-align: top;">Supporto in tutti i browser in uso oggi, che sono tutti browser non microsoft più IE9 e successivi. Permette l'impostazione diretta di <code>__proto__</code> in modo che il browser possa ottimizzare meglio l'oggetto. Permette anche la creazione di oggetti senza prototype tramite <code>Object.create(null)</code>.</td> + <td style="vertical-align: top;">Non supportato in IE8 e precedenti. Tuttavia, poiché Microsoft ha interrotto il supporto esteso per i sistemi che utilizzano questi vecchi browser, questo non dovrebbe essere un problema per la maggior parte delle applicazioni. Inoltre, l'inizializzazione lenta dell'oggetto può essere un buco nero per prestazioni se si usa il secondo argomento, perché ogni proprietà del descrittore dell'oggetto ha un proprio oggetto descrittore separato. Quando si ha a che fare con centinaia di migliaia di descrittori di oggetti sotto forma di oggetto, può sorgere un serio problema di ritardo.</td> + </tr> + <tr> + <td> + <p>Object.setPrototypeOf</p> + </td> + <td style="vertical-align: top;"> + <pre class="brush: js line-numbers language-js"> +<code class="language-js"><span class="keyword token">function</span> <span class="function token">foo</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">{</span><span class="punctuation token">}</span> +foo<span class="punctuation token">.</span>prototype <span class="operator token">=</span> <span class="punctuation token">{</span> + foo_prop<span class="punctuation token">:</span> <span class="string token">"foo val"</span> +<span class="punctuation token">}</span><span class="punctuation token">;</span> +<span class="keyword token">function</span> <span class="function token">bar</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">{</span><span class="punctuation token">}</span> +<span class="keyword token">var</span> proto <span class="operator token">=</span> <span class="punctuation token">{</span> + bar_prop<span class="punctuation token">:</span> <span class="string token">"bar val"</span> +<span class="punctuation token">}</span><span class="punctuation token">;</span> +Object<span class="punctuation token">.</span><span class="function token">setPrototypeOf</span><span class="punctuation token">(</span> + proto<span class="punctuation token">,</span> foo<span class="punctuation token">.</span>prototype +<span class="punctuation token">)</span><span class="punctuation token">;</span> +bar<span class="punctuation token">.</span>prototype <span class="operator token">=</span> proto<span class="punctuation token">;</span> +<span class="keyword token">var</span> inst <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">bar</span><span class="punctuation token">;</span> +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>inst<span class="punctuation token">.</span>foo_prop<span class="punctuation token">)</span><span class="punctuation token">;</span> +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>inst<span class="punctuation token">.</span>bar_prop<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + + <pre class="brush: js line-numbers language-js"> +<code class="language-js"><span class="keyword token">function</span> <span class="function token">foo</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">{</span><span class="punctuation token">}</span> +foo<span class="punctuation token">.</span>prototype <span class="operator token">=</span> <span class="punctuation token">{</span> + foo_prop<span class="punctuation token">:</span> <span class="string token">"foo val"</span> +<span class="punctuation token">}</span><span class="punctuation token">;</span> +<span class="keyword token">function</span> <span class="function token">bar</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">{</span><span class="punctuation token">}</span> +<span class="keyword token">var</span> proto<span class="punctuation token">;</span> +proto<span class="operator token">=</span>Object<span class="punctuation token">.</span><span class="function token">setPrototypeOf</span><span class="punctuation token">(</span> + <span class="punctuation token">{</span> bar_prop<span class="punctuation token">:</span> <span class="string token">"bar val"</span> <span class="punctuation token">}</span><span class="punctuation token">,</span> + foo<span class="punctuation token">.</span>prototype +<span class="punctuation token">)</span><span class="punctuation token">;</span> +bar<span class="punctuation token">.</span>prototype <span class="operator token">=</span> proto<span class="punctuation token">;</span> +<span class="keyword token">var</span> inst <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">bar</span><span class="punctuation token">;</span> +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>inst<span class="punctuation token">.</span>foo_prop<span class="punctuation token">)</span><span class="punctuation token">;</span> +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>inst<span class="punctuation token">.</span>bar_prop<span class="punctuation token">)</span></code></pre> + </td> + <td style="vertical-align: top;">Supporto in tutti i browser in uso oggi, che sono tutti browser non microsoft più IE9 e successivi. Permette la manipolazione dinamica dei prototype degli oggetti e può anche forzare un prototype su un oggetto senza prototype creato con <code>Object.create(null)</code>.</td> + <td style="vertical-align: top;">Dovrebbe essere deprecato e poco performante. Far girare velocemente il vostro Javascript è completamente fuori questione se pensate di usarlo nel codice di produzione finale perché molti browser ottimizzano il prototype e cercano di indovinare la posizione del metodo nella memoria quando si chiama un'istanza in anticipo, ma impostando il prototype dinamicamente si interrompono tutte queste ottimizzazioni e si può anche forzare alcuni browser a ricompilare per la deottimizzazione il vostro codice solo per farlo funzionare secondo le specifiche. Non è supportato in IE8 e successivi.</td> + </tr> + <tr> + <td>__proto__</td> + <td style="vertical-align: top;"> + <pre class="brush: js line-numbers language-js"> +<code class="language-js"><span class="keyword token">function</span> <span class="function token">foo</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">{</span><span class="punctuation token">}</span> +foo<span class="punctuation token">.</span>prototype <span class="operator token">=</span> <span class="punctuation token">{</span> + foo_prop<span class="punctuation token">:</span> <span class="string token">"foo val"</span> +<span class="punctuation token">}</span><span class="punctuation token">;</span> +<span class="keyword token">function</span> <span class="function token">bar</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">{</span><span class="punctuation token">}</span> +<span class="keyword token">var</span> proto <span class="operator token">=</span> <span class="punctuation token">{</span> + bar_prop<span class="punctuation token">:</span> <span class="string token">"bar val"</span><span class="punctuation token">,</span> + __proto__<span class="punctuation token">:</span> foo<span class="punctuation token">.</span>prototype +<span class="punctuation token">}</span><span class="punctuation token">;</span> +bar<span class="punctuation token">.</span>prototype <span class="operator token">=</span> proto<span class="punctuation token">;</span> +<span class="keyword token">var</span> inst <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">bar</span><span class="punctuation token">;</span> +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>inst<span class="punctuation token">.</span>foo_prop<span class="punctuation token">)</span><span class="punctuation token">;</span> +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>inst<span class="punctuation token">.</span>bar_prop<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + + <pre class="brush: js line-numbers language-js"> +<code class="language-js"><span class="keyword token">var</span> inst <span class="operator token">=</span> <span class="punctuation token">{</span> + __proto__<span class="punctuation token">:</span> <span class="punctuation token">{</span> + bar_prop<span class="punctuation token">:</span> <span class="string token">"bar val"</span><span class="punctuation token">,</span> + __proto__<span class="punctuation token">:</span> <span class="punctuation token">{</span> + foo_prop<span class="punctuation token">:</span> <span class="string token">"foo val"</span><span class="punctuation token">,</span> + __proto__<span class="punctuation token">:</span> <span class="class-name token">Object</span><span class="punctuation token">.</span>prototype + <span class="punctuation token">}</span> + <span class="punctuation token">}</span> +<span class="punctuation token">}</span><span class="punctuation token">;</span> +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>inst<span class="punctuation token">.</span>foo_prop<span class="punctuation token">)</span><span class="punctuation token">;</span> +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>inst<span class="punctuation token">.</span>bar_prop<span class="punctuation token">)</span></code></pre> + </td> + <td style="vertical-align: top;">Compatibilità con tutti i browser in uso oggi, che sono tutti browser non microsoft più IE11 e superiori. L'impostazione di <code>__proto__</code> su qualcosa che non è un oggetto fallisce silenziosamente. Non lancia un'eccezione.</td> + <td style="vertical-align: top;">Totalmente deprecato e non performante. Far girare velocemente il vostro codice Javascript è completamente fuori questione se pensate di usarlo nel codice di produzione finale perché molti browser ottimizzano il prototype e cercano di indovinare la posizione del metodo nella memoria quando si chiama un'istanza in anticipo, ma impostando il prototipo dinamicamente si interrompono tutte queste ottimizzazioni e si può anche forzare alcuni browser a ricompilare per la deottimizzazione del vostro codice solo per farlo funzionare secondo le specifiche. Non è supportato in IE10 e successivi.</td> + </tr> + </tbody> +</table> + +<h2 id="prototype_e_Object.getPrototypeOf"><code>prototype</code> e <code>Object.getPrototypeOf</code></h2> + +<p>JavaScript confonde un po' gli sviluppatori che provengono da Java o C++, essendo completamente dinamico, valutato tutto a runtime e non avendo classi in senso stretto. Sono tutte istanze di oggetti. Persino le "classi" che simuliamo sono semplicemente degli oggetti funzione.</p> + +<p><span lang="it"><span class="hps">Probabilmente hai già</span> <span class="hps">notato</span> <span class="hps">che la nostra</span> <span class="hps">funzione A</span> <span class="hps">ha una propery</span> <span class="hps">speciale chiamata</span> <span class="hps">prototype.</span> <span class="hps">Questa speciale property</span> <span class="hps">funziona con</span> <span class="hps">l'operatore new</span> di <span class="hps">JavaScript</span><span>.</span> <span class="hps">Il riferimento</span> <span class="hps">all'oggetto prototype</span> <span class="hps">viene copiato nella property</span><span class="atn hps"> [</span><span class="atn">[</span><span>Prototype</span><span>]</span><span>] interna alla</span><span class="hps"> nuova istanza</span><span>.</span></span><span lang="it"> <span class="hps">Ad esempio, quando</span> <span class="hps">si fa</span> <span class="hps">var</span> <span class="hps">a1</span> <span class="hps">= new</span> <span class="atn hps">A(</span><span>)</span><span>,</span> <span class="atn hps">JavaScript (</span><span>dopo aver creato</span> <span class="hps">l'oggetto</span> <span class="hps">in memoria</span> <span class="hps">e</span> <span class="hps">prima di eseguire</span> <span class="hps">la funzione</span> <span class="atn hps">A(</span><span>) con this</span> <span class="hps">definito</span> <span class="hps">ad esso</span><span>) imposta</span> <span class="hps">a1</span><span>.</span> <span class="atn hps">[</span><span class="atn">[</span><span>Prototype</span><span>]</span><span>]</span> <span class="hps">=</span> <span class="hps">A.prototype</span><span>.</span></span><span lang="it"> <span class="hps">Quando si</span> <span class="hps">accede</span> <span class="hps">poi</span> alle properties<span class="hps"> dell'istanza</span><span>, </span><span class="hps">JavaScript</span></span> prima controlla se esiste nell'oggetto direttamente e se non c'è guarda in <span lang="it"><span class="atn hps">[</span><span class="atn">[</span><span>Prototype</span><span>]]. Questo significa che tutto ciò che viene definito in prototype viene effettivamente condiviso con tutte le istanze</span></span> ed è possibile anche in seguito cambiare parti del prototype facendo comparire i cambiamenti in tutte le istanze esistenti, se è questo che si desidera.</p> + +<p>Se, nell'esempio soprastante, si fa <code>var a1 = new A(); var a2 = new A();</code> <code>a1.doSomething</code> farà riferimento a <code>Object.getPrototypeOf(a1).doSomething</code>, che è il medesimo di <code>A.prototype.doSomething che è stato definito, perciò </code><code>Object.getPrototypeOf(a1).doSomething == Object.getPrototypeOf(a2).doSomething == A.prototype.doSomething</code>.</p> + +<p>In breve, prototype è per i tipi, mentre <code>Object.getPrototypeOf() da lo stesso risultato per le istanze.</code></p> + +<p><code>[[Prototype]]</code> viene esaminato <em>ricorsivamente</em>, ad esempio <code>a1.doSomething</code>, <code>Object.getPrototypeOf(a1).doSomething</code>, <code>Object.getPrototypeOf(Object.getPrototypeOf(a1)).doSomething</code> ecc., finché viene trovato oppure<code> Object.getPrototypeOf </code>restituisce null.</p> + +<p>Così, quando si chiama</p> + +<pre class="brush: js">var o = new Foo();</pre> + +<p>JavaScript in realtà esegue</p> + +<pre class="brush: js">var o = new Object(); +o.[[Prototype]] = Foo.prototype; +Foo.call(o);</pre> + +<p>(o qualcosa di simile) e quando successivamente si esegue</p> + +<pre class="brush: js">o.someProp;</pre> + +<p>controlla se o ha pa property someProp. Se non c'è controlla <code>Object.getPrototypeOf(o).someProp</code> e se non c'è ancora controlla <code>Object.getPrototypeOf(Object.getPrototypeOf(o)).someProp e via di seguito.</code></p> + +<div> +<h2 id="In_conclusione">In conclusione</h2> + +<p>È <strong>essenziale</strong> capire il funzionamento dell'ereditarietà basata sul modello dei prototype prima di scrivere codice complesso che ne fa uso. Bisogna anche fare attenzione alla lunghezza della catena di prototype nel proprio codice ed accorciarla in caso di necessità per evitare possibili problemi di prestazioni. Infine, i prototype nativi non dovrebbero <strong>mai</strong> venire estesi per evitare problemi di compatibilità con nuove funzionalità JavaScript che potrebbero essere introdotte.</p> +</div> diff --git a/files/it/web/javascript/introduzione_al_carattere_object-oriented_di_javascript/index.html b/files/it/web/javascript/introduzione_al_carattere_object-oriented_di_javascript/index.html new file mode 100644 index 0000000000..da26adf60a --- /dev/null +++ b/files/it/web/javascript/introduzione_al_carattere_object-oriented_di_javascript/index.html @@ -0,0 +1,390 @@ +--- +title: Introduzione a JavaScript Object-Oriented +slug: Web/JavaScript/Introduzione_al_carattere_Object-Oriented_di_JavaScript +tags: + - Classe + - Costruttore + - Eredità + - Incapsulamento + - Membri + - Oggetto + - Orientato agli oggetti +translation_of: Learn/JavaScript/Objects +--- +<p>{{jsSidebar("Introductory")}}</p> + +<p>Orientato agli oggetti fino dal nucleo, JavaScript offre funzionalità {{Glossary("OOP")}} potenti e flessibili. <span id="result_box" lang="it"><span class="hps">Questo</span> <span class="hps">articolo inizia</span> <span class="hps">con una introduzione</span> <span class="hps">alla</span> <span class="hps">programmazione</span> <span class="hps">orientata agli oggetti</span><span>,</span> quindi presenta <span class="hps">il</span> <span class="hps">modello di oggetti</span> <span class="hps">JavaScript</span> <span class="hps">e, infine,</span> <span class="hps">dimostra</span> <span class="hps">concetti della</span> <span class="hps">programmazione orientata agli oggetti</span> <span class="hps">in JavaScript</span><span>.</span></span></p> + +<h2 id="JavaScript_Review" name="JavaScript_Review">Riesame su JavaScript</h2> + +<p><span id="result_box" lang="it"><span class="hps">Se</span> <span class="hps">non ti senti</span> <span class="hps">sicuro su</span> <span class="hps">concetti</span> <span class="hps">JavaScript</span><span> come</span> <span class="hps">variabili, tipi</span><span>, funzioni e</span> <span class="hps">ambito di applicazione</span><span>,</span> <span class="hps">puoi leggere su</span> <span class="hps">questi argomenti</span> </span>in <a href="/it/JavaScript/Una_re-introduzione_a_JavaScript" title="it/JavaScript/Una_re-introduzione_a_JavaScript">A re-introduction to JavaScript</a>. Puoi<span lang="it"><span class="hps"> inoltre consultare</span> <span class="hps">la</span></span> <a href="/it/JavaScript/Guida" title="it/JavaScript/Guida">Core JavaScript 1.5 Guide</a>.</p> + +<h2 id="Object-oriented_programming" name="Object-oriented_programming">Programmazione object-oriented</h2> + +<p>La programmazione orientata agli oggetti è un paradigma di programmazione che usa astrazione ({{glossary("abstraction")}}) per creare modelli basati sul mondo reale. Utilizza diverse tecniche di paradigmi esistenti, tra cui la modularità ({{glossary("modularity")}}), il polimorfismo ({{glossary("polymorphism")}}) e l'incapsulamento ({{glossary("encapsulation")}}). Oggi molti linguaggi di programmazione (come Java, JavaScript, C #, C ++, Python, PHP, Ruby e Objective-C) supportano la programmazione orientata agli oggetti (OOP).</p> + +<p><span id="result_box" lang="it">OOP <span class="hps">ha una visione del</span> <span class="hps">software come</span> <span class="hps">un insieme di oggetti</span> <span class="hps">cooperanti</span><span>,</span> <span class="hps">piuttosto che </span><span class="hps">un insieme di funzioni</span> <span class="hps">o semplicemente </span><span class="hps">un elenco</span> <span class="hps">di istruzioni per il</span> <span class="hps">computer (come è nella visione tradizionale).</span> <span class="hps">In</span> <span class="hps">OOP</span><span>,</span> <span class="hps">ogni oggetto è</span> <span class="hps">in grado di ricevere</span> <span class="hps">messaggi</span><span>,</span> <span class="hps">elaborare dati</span><span>,</span> <span class="hps">e</span> <span class="hps">inviare messaggi</span> <span class="hps">ad altri oggetti</span><span>.</span> <span class="hps">Ogni oggetto</span> <span class="hps">può essere visto come</span> <span class="hps">una</span> <span class="hps">piccola macchina</span> <span class="hps">indipendente con</span> </span><span lang="it"><span class="hps">ruolo o</span> <span class="hps">responsabilità</span><span> distinti.</span></span></p> + +<p><span id="result_box" lang="it"><span class="hps">OOP</span> <span class="hps">promuove una maggiore</span> <span class="hps">flessibilità e</span> mantenibilità <span class="hps">nella</span> <span class="hps">programmazione</span><span>,</span> <span class="hps">ed è</span> <span class="hps">molto popolare</span> <span class="hps">in</span> <span class="hps">ingegneria del software su larga scala</span><span>.</span> <span class="hps">Poiché</span> <span class="hps">OOP</span> <span class="hps">sottolinea con forza</span> <span class="hps">la modularità</span><span>,</span> <span class="hps">il codice</span> <span class="hps">object-oriented</span> <span class="hps">è più semplice da</span> <span class="hps">sviluppare e</span> <span class="hps">più facile da capire</span> <span class="hps">in seguito.</span> <span class="hps">Il codice</span> <span class="hps">object-oriented</span> <span class="hps">promuove</span> <span class="hps">un'analisi</span><span>,</span> <span class="hps">codifica</span><span>,</span> <span class="hps">e comprensione</span> <span class="hps">di</span> <span class="hps">situazioni</span></span><span lang="it"><span class="hps"> e</span> <span class="hps">procedure</span></span><span id="result_box" lang="it"><span class="hps"> complesse</span></span><span lang="it"><span class="hps"> più</span> <span class="hps">diretta</span> <span class="hps">che con</span> <span class="hps">metodi di programmazione</span> <span class="hps">a minor modularità</span></span><sup>.</sup><a href="https://developer.mozilla.org/it/docs/Web/JavaScript/Introduzione_al_carattere_Object-Oriented_di_JavaScript$edit#cite-1"><sup>1</sup></a></p> + +<h2 id="Terminology" name="Terminology">Terminologia</h2> + +<dl> + <dt>{{Glossary("Namespace")}}</dt> + <dd><span id="result_box" lang="it"><span class="hps">Un contenitore</span> <span class="hps">che</span> <span class="hps">consente agli sviluppatori di</span> <span class="hps">includere tutte</span> <span class="hps">le funzionalità</span> <span class="hps">sotto</span> <span class="hps">un</span> <span class="hps">nome unico, specifico per l'</span><span class="hps">applicazione</span><span>.</span></span></dd> + <dt>{{Glossary("Class")}}</dt> + <dd><span id="result_box" lang="it"><span class="hps">Definisce</span> <span class="hps">le caratteristiche dell'oggetto</span><span>.</span> <span class="hps">Una classe</span> <span class="hps">è una definizione</span> <span class="hps">del modello,</span> <span class="hps">delle proprietà e dei metodi</span> <span class="hps">di un oggetto</span><span>.</span></span></dd> + <dt>{{Glossary("Object")}}</dt> + <dd>Istanza di una classe.</dd> + <dt>{{Glossary("Property")}}</dt> + <dd>Una caratteristica di un oggetto, come un colore.</dd> + <dt>{{Glossary("Method")}}</dt> + <dd>Una capacità di un oggetto, come ad esempio cammina. È una procedura o funzione associata a una classe.</dd> + <dt>{{Glossary("Constructor")}}</dt> + <dd>Un metodo invocato nel momento in cui l'oggetto viene istanziato. Di solito ha lo stesso nome della classe che lo contiene.</dd> + <dt>{{Glossary("Inheritance")}}</dt> + <dd>Una classe può ereditare caratteristiche da un'altra classe.</dd> + <dt>{{Glossary("Encapsulation")}}</dt> + <dd>Una modalità di raggruppamento di dati e metodi che ne fanno uso.</dd> + <dt>{{Glossary("Abstraction")}}</dt> + <dd>L'insieme del complesso di eredità, metodi e proprietà di un oggetto deve rispecchiare adeguatamente un modello reale.</dd> + <dt>{{Glossary("Polymorphism")}}</dt> + <dd><span id="result_box" lang="it"><span class="hps">Poly </span><span class="hps">significa</span> <span class="hps">"<em>molti</em>"</span> <span class="hps">e</span> <span class="hps">morfismo</span> <span class="hps">significa</span> <span class="hps">"<em>forme</em>"</span><span>.</span> <span class="hps">Classi diverse </span><span class="hps">potrebbero</span> <span class="hps">definire lo stesso</span> <span class="hps">metodo o proprietà</span><span>.</span></span></dd> +</dl> + + + +<p><span id="result_box" lang="it"><span class="hps">Per una</span> <span class="hps">descrizione</span> </span><span lang="it"><span class="hps">più ampia</span> <span class="hps">della programmazione</span> <span class="hps">orientata agli oggetti</span><span>, vedi</span> </span>{{interwiki("wikipedia", "Object-oriented programming")}}<span lang="it"> <span class="hps">su Wikipedia</span><span>.</span></span></p> + + + +<h2 id="Programmazione_prototype-based">Programmazione prototype-based</h2> + +<p><span id="result_box" lang="it"><span class="hps">La programmazione p</span></span>rototype-based<span lang="it"><span class="hps"> (basata</span> <span class="hps">sul prototipo)</span> <span class="hps">è un modello</span> <span class="hps">OOP</span> <span class="hps">che non utilizza</span> <span class="hps">le classi</span><span>,</span> <span class="hps">ma piuttosto</span> <span class="hps">prima</span> <span class="hps">completa</span> <span class="hps">il comportamento di</span> <span class="hps">qualsiasi classe</span> <span class="hps">e</span> <span class="hps">poi</span> <span class="hps">riutilizza</span> <span class="atn hps">(</span><span>equivalente</span> <span class="hps">all'</span><span class="hps">ereditarietà</span> <span class="hps">nei linguaggi</span> <span class="hps">basati su classi</span><span>)</span> arricchendo <span class="atn hps">(</span><span>o sviluppando</span><span>)</span> <span class="hps">oggetti <em>prototipo</em></span><span class="hps"> esistenti</span><span>.</span> <span class="atn hps">(</span><span>Chiamata anche</span> <span class="hps">senza classi (</span></span>classless<span lang="it"><span class="hps">)</span><span>,</span> <span class="hps">orientata al prototipo</span><span> (</span></span>prototype-oriented<span lang="it"><span>),</span> <span class="hps">o</span> <span class="hps">programmazione basata</span> su <span class="hps">istanza</span><span> (</span></span>instance-based<span lang="it"><span>).</span><span>)</span></span></p> + +<p><span id="result_box" lang="it"><span class="hps">L'esempio </span></span><span lang="it"><span class="hps">originale</span> <span class="atn hps">(</span><span>e più</span> <span class="hps">canonico</span><span>)</span> <span class="hps"> di un</span> <span class="hps">linguaggio basato sui prototipi</span> <span class="hps">è</span> </span>{{interwiki("wikipedia", "Self (programming language)", "Self")}}<span lang="it"> <span class="hps">sviluppato da</span> <span class="hps">David</span> <span class="hps">Ungar</span> <span class="hps">e Randall</span> <span class="hps">Smith</span><span>.</span> <span class="hps">Tuttavia lo</span> <span class="hps">stile di programmazione</span> <span class="atn hps">senza classi diventa</span> <span class="hps">sempre più popolare</span> <span class="hps">negli ultimi tempi,</span> <span class="hps">ed è stato adottato</span> <span class="hps">per</span> <span class="hps">i linguaggi di programmazione</span> <span class="hps">come JavaScript</span><span>,</span> <span class="hps">Cecil</span><span>,</span> <span class="hps">NewtonScript</span><span>,</span> <span class="hps">Io,</span> <span class="hps">MOO</span><span>,</span> <span class="hps">REBOL</span><span>,</span> <span class="hps">Kevo</span><span>,</span> <span class="hps">Squeak</span> <span class="atn hps">(</span><span>quando si utilizza il</span> <span class="hps">framework</span> </span>Viewer per<span lang="it"><span class="hps"> manipolare</span> <span class="hps">componenti</span> <span class="hps">Morphic</span><span>)</span><span>,</span> <span class="hps">e</span> <span class="hps">molti altri</span></span>.<a href="https://developer.mozilla.org/it/docs/Web/JavaScript/Introduzione_al_carattere_Object-Oriented_di_JavaScript$edit#cite-1"><sup>1</sup></a></p> + +<h2 id="JavaScript_Object_Oriented_Programming" name="JavaScript_Object_Oriented_Programming">Programmazione Object Oriented in JavaScript</h2> + +<h3 id="Namespace">Namespace</h3> + +<p>Un namespace <span id="result_box" lang="it"><span class="hps">è un contenitore</span> <span class="hps">che</span> <span class="hps">consente agli sviluppatori di</span> <span class="hps">includere tutte</span> <span class="hps">le funzionalità</span> <span class="hps">sotto</span> <span class="hps">un</span> <span class="hps">nome unico, specifico per l'</span><span class="hps">applicazione</span></span>. <strong>In JavaScript un namespace è solo un altro oggetto che contiene metodi, proprietà e oggetti.</strong></p> + +<div class="note"> +<p><strong>Nota:</strong> È <span lang="it"><span>importante notare che</span> <span class="hps">in JavaScript</span> <span class="hps">non c'è alcuna differenza</span> <span class="hps">a livello di</span> <span class="hps">linguaggio</span> <span class="hps">tra oggetti</span> <span class="hps">regolari e </span>namespace<span>.</span> <span class="hps">Questo</span> <span class="hps">differenzia da molti altri</span> <span class="hps">linguaggi orientati agli oggetti</span> <span class="hps">e può essere fonte</span><span class="hps"> di confusione</span> <span class="hps">per i nuovi</span> <span class="hps">programmatori JavaScript</span></span>.</p> +</div> + +<p><span id="result_box" lang="it"><span class="hps">L'idea alla base</span> del<span class="hps">la creazione di</span> <span class="hps">un namespace</span> <span class="hps">in JavaScript</span> <span class="hps">è</span> <span class="hps">semplice: creare</span> <span class="hps">un oggetto</span> <span class="hps">globale</span><span>,</span> <span class="hps">e</span> <span class="hps">tutte le variabili</span><span>,</span> <span class="hps">i metodi</span> <span class="hps">e le funzioni</span> <span class="hps">diventano</span> <span class="hps">proprietà di tale oggetto</span><span>.</span> <span class="hps">L'uso</span> <span class="hps">dei namespace</span> <span class="hps">riduce anche</span> <span class="hps">il rischio di</span> <span class="hps">conflitti tra nomi</span> <span class="hps">in un'applicazione</span><span>,</span> <span class="hps">poiché gli oggetti</span> <span class="hps">di ciascuna applicazione</span> <span class="hps">sono</span> <span class="hps">proprietà di un</span> <span class="hps">oggetto globale</span> <span class="hps">definito dall'applicazione</span><span>.</span></span></p> + +<p>Creiamo un oggetto globale chiamato MYAPP:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="comment token">// global namespace</span> +<span class="keyword token">var</span> MYAPP <span class="operator token">=</span> MYAPP <span class="operator token">||</span> <span class="punctuation token">{</span><span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre> + +<p><span id="result_box" lang="it"><span class="hps">Nel</span> <span class="hps">codice di esempio di</span> <span class="hps">sopra</span> prima viene testato <span class="hps">se</span> <span class="hps">MYAPP</span> <span class="hps">è già definito</span> <span class="hps">(sia nello</span> <span class="hps">stesso o</span> <span class="hps">in un altro file</span><span>)</span><span>.</span> <span class="hps">Se sì, allora</span> <span class="atn hps">viene utilizzato l'</span><span class="hps">oggetto globale </span></span><span lang="it"><span>MYAPP già</span> <span class="hps">esistente</span><span>,</span> <span class="hps">altrimenti</span> viene creato<span class="hps"> un oggetto</span> <span class="hps">vuoto chiamato</span> <span class="hps">MYAPP</span> <span class="hps">che</span> <span class="hps">incapsula</span> <span class="hps">metodi,</span> <span class="hps">funzioni, variabili</span> <span class="hps">e oggetti</span><span>.</span></span></p> + +<p>Possaimo anche creare sotto-namespace (tieni presente che l'oggetto globale deve essere definito prima):</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="comment token">// sub namespace</span> +MYAPP<span class="punctuation token">.</span>event <span class="operator token">=</span> <span class="punctuation token">{</span><span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre> + +<p><span id="result_box" lang="it"><span class="hps">La seguente</span> <span class="hps">è</span> <span class="hps">la sintassi del codice</span> <span class="hps">per</span> <span class="hps">la creazione di un</span> namespace <span class="hps">e l'aggiunta di</span> <span class="hps">variabili, funzioni</span><span>,</span> <span class="hps">e</span> <span class="hps">un metodo:</span></span></p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="comment token">// Create container called MYAPP.commonMethod for common method and properties</span> +MYAPP<span class="punctuation token">.</span>commonMethod <span class="operator token">=</span> <span class="punctuation token">{</span> + regExForName<span class="punctuation token">:</span> <span class="string token">""</span><span class="punctuation token">,</span> <span class="comment token">// define regex for name validation</span> + regExForPhone<span class="punctuation token">:</span> <span class="string token">""</span><span class="punctuation token">,</span> <span class="comment token">// define regex for phone no validation</span> + validateName<span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span>name<span class="punctuation token">)</span><span class="punctuation token">{</span> + <span class="comment token">// Do something with name, you can access regExForName variable</span> + <span class="comment token">// using "this.regExForName"</span> + <span class="punctuation token">}</span><span class="punctuation token">,</span> + + validatePhoneNo<span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span>phoneNo<span class="punctuation token">)</span><span class="punctuation token">{</span> + <span class="comment token">// do something with phone number</span> + <span class="punctuation token">}</span> +<span class="punctuation token">}</span> + +<span class="comment token">// Object together with the method declarations</span> +MYAPP<span class="punctuation token">.</span>event <span class="operator token">=</span> <span class="punctuation token">{</span> + addListener<span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span>el<span class="punctuation token">,</span> type<span class="punctuation token">,</span> fn<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="comment token">// code stuff</span> + <span class="punctuation token">}</span><span class="punctuation token">,</span> + removeListener<span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span>el<span class="punctuation token">,</span> type<span class="punctuation token">,</span> fn<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="comment token">// code stuff</span> + <span class="punctuation token">}</span><span class="punctuation token">,</span> + getEvent<span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="comment token">// code stuff</span> + <span class="punctuation token">}</span> + + <span class="comment token">// Can add another method and properties</span> +<span class="punctuation token">}</span> + +<span class="comment token">// Syntax for Using addListener method:</span> +MYAPP<span class="punctuation token">.</span>event<span class="punctuation token">.</span><span class="function token">addListener</span><span class="punctuation token">(</span><span class="string token">"yourel"</span><span class="punctuation token">,</span> <span class="string token">"type"</span><span class="punctuation token">,</span> callback<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<h3 id="Oggetti_incorporati_built-in_standard">Oggetti incorporati (built-in) standard</h3> + +<p><span id="result_box" lang="it"><span class="hps">JavaScript</span> <span class="hps">ha diversi</span> <span class="hps">oggetti inclusi</span> <span class="hps">nel suo nucleo</span><span>,</span> <span class="hps">per esempio ci</span> <span class="hps">sono</span> <span class="hps">oggetti come</span> </span>Math, Object, Array e String<span lang="it"><span>.</span> <span class="hps">L'esempio seguente mostra</span> <span class="hps">come utilizzare</span> <span class="hps">l'oggetto</span> <span class="hps">Math per</span> <span class="hps">ottenere</span> <span class="hps">un numero casuale</span> <span class="hps">utilizzando</span> <span class="hps">il suo</span> <span class="hps">metodo</span></span> <code>random()</code> <span lang="it"><span>.</span></span></p> + +<pre class="brush: js line-numbers language-js"><code class="language-js">console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>Math<span class="punctuation token">.</span><span class="function token">random</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<div class="note"><strong>Nota:</strong> <span id="result_box" lang="it"><span class="hps">Questo</span> <span class="hps">e</span> <span class="hps">tutti gli</span> <span class="hps">ulteriori esempi</span> presuppongono che <span class="hps">una funzione chiamata</span></span> {{domxref("console.log()")}} <span lang="it"><span class="hps">sia definita</span> <span class="hps">a livello globale</span><span>.</span> <span class="hps">La funzione</span> </span><code>console.log()</code> <span lang="it"><span class="hps">in realtà non</span> <span class="hps">è </span><span class="hps">parte</span> <span class="hps">di</span> <span class="hps">JavaScript</span> <span class="hps">in sé</span><span>,</span> <span class="hps">ma</span> <span class="hps">molti browser</span> la implementano <span class="hps">per aiutare</span> <span class="hps">il debug</span><span>.</span></span></div> + +<p>Vedi <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects" title="en-US/docs/Web/JavaScript/Reference/Global_Objects">JavaScript Reference: Standard built-in objects</a> for una lista degli oggetti di nucleo in JavaScript.</p> + +<p>Ogni oggetto in JavaScript è una instanza dell'oggetto <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>Object</code></a> e perciò ne eredita tutte le sue proprietà e metodi.</p> + +<h3 id="Oggetti_utente">Oggetti utente</h3> + +<h4 id="La_classe">La classe</h4> + +<p><span id="result_box" lang="it"><span class="hps">JavaScript è un linguaggio</span> <span class="hps">basato sui prototipi</span> <span class="hps">e</span> <span class="hps">non contiene</span> <span class="hps">alcuna dichiarazione</span> <span class="hps">di classe</span><span>,</span> <span class="hps">come invece si trova</span> <span class="hps">in C</span> <span class="hps">++</span> <span class="hps">o Java</span><span>.</span> <span class="hps">Questo a volte è</span> <span class="hps">fonte di confusione per</span> <span class="hps">i programmatori</span> <span class="hps">abituati</span> <span class="hps">ai linguaggi</span> <span class="hps">con</span> <span class="hps">una dichiarazione</span></span> <code>class</code><span lang="it"><span>.</span> <span class="hps">JavaScript</span> <span class="hps">utilizza le funzioni</span> <span class="hps">come</span> <span class="hps">costruttori</span> <span class="hps">per le classi</span><span>.</span> <span class="hps">Definire una</span> <span class="hps">classe è</span> <span class="hps">facile come</span> <span class="hps">definire una funzione</span><span>.</span> <span class="hps">Nell'esempio sottostante</span> <span class="hps">si definisce una</span> <span class="hps">nuova</span> <span class="hps">classe chiamata</span> <span class="hps">Person con</span> <span class="hps">un</span> <span class="hps">costruttore vuoto</span><span>.</span></span></p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> Person <span class="operator token">=</span> <span class="keyword token">function</span> <span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span><span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre> + +<h4 id="Loggetto_istanza_di_classe">L'oggetto (istanza di classe)</h4> + +<p>Per creare una nuova istanza di un oggetto <code>obj</code> utilizziamo l'istruzione <code>new obj</code> assegnando il risultato (che è di tipo <code>obj</code>) ad una variabile, per poi accedervi successivamente.</p> + +<p>Nell'esempio precedente abbiamo definito una classe chiamata <code>Person</code>. In quello seguente creiamo due istanze (<code>person1</code> e <code>person2</code>).</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> person1 <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Person</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> person2 <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Person</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<div class="note"><strong>Nota:</strong> Prego vedi {{jsxref("Object.create()")}} per un ulteriore nuovo metodo d'istanza che crea una istanza non inizializzata.</div> + +<h4 id="Il_costruttore">Il costruttore</h4> + +<p><span id="result_box" lang="it"><span class="hps">Il</span> <span class="hps">costruttore viene chiamato</span> quando si instanzia un oggetto <span class="atn hps">(</span><span>il momento in cui</span> <span class="hps">si crea</span> <span class="hps">l'istanza dell'oggetto</span><span>)</span><span>.</span> <span class="hps">Il</span> <span class="hps">costruttore è un</span> <span class="hps">metodo della classe</span><span>.</span> <span class="hps">In JavaScript</span> <span class="hps">la funzione</span> <span class="hps">funge da</span> <span class="hps">costruttore dell'oggetto</span><span>,</span> <span class="hps">pertanto</span> <span class="hps">non è necessario</span> <span class="hps">definire esplicitamente</span> <span class="hps">un</span> <span class="hps">metodo costruttore</span><span>.</span> <span class="hps">Ogni azione</span> <span class="hps">dichiarata</span> <span class="hps">nella classe</span> <span class="hps">viene eseguita</span> <span class="hps">al momento della</span> <span class="hps">creazione di un'istanza</span><span>.</span></span></p> + +<p><span id="result_box" lang="it"><span class="hps">Il costruttore</span> <span class="hps">viene utilizzato per</span> <span class="hps">impostare le proprietà</span> <span class="hps">dell'oggetto</span> <span class="hps">o</span> <span class="hps">per chiamare</span> <span class="hps">i metodi che</span> <span class="atn hps">preparano l'</span><span>oggetto per il suo uso</span><span>.</span> <span class="hps">L'aggiunta di</span> <span class="hps">metodi di classe</span> <span class="hps">e le loro definizioni</span> <span class="hps">si effettua </span><span class="hps">utilizzando una</span> <span class="hps">sintassi diversa</span> <span class="hps">descritta più avanti in</span> <span class="hps">questo</span> <span class="hps">articolo</span><span>.</span></span></p> + +<p>Nell'esempio seguente il costruttore della classe<code> Person</code> registra un messaggio quando viene istanziato un oggetto <code>Person</code>.</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> Person <span class="operator token">=</span> <span class="keyword token">function</span> <span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'instance created'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span><span class="punctuation token">;</span> + +<span class="keyword token">var</span> person1 <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Person</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> person2 <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Person</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<h4 id="La_proprietà_attributo_di_oggetto">La proprietà (attributo di oggetto)</h4> + +<p>Le proprietà sono variabili contenute nella classe; ogni istanza dell'oggetto ha queste proprietà. Le proprietà sono impostate nel costruttore (funzione) della classe in modo che siano creati su ogni istanza.</p> + +<p><span id="result_box" lang="it"><span class="hps">La</span> <span class="hps">parola chiave</span></span> <code>this</code>, <span lang="it"><span class="hps">che si riferisce</span> <span class="hps">all'oggetto</span> <span class="hps">corrente</span><span>,</span> <span class="hps">consente di lavorare</span> <span class="hps">con le proprietà</span> <span class="hps">all'interno della classe</span><span>.</span> <span class="hps">L'accesso</span> <span class="atn hps">(</span><span>in lettura o</span> <span class="hps">scrittura)</span> <span class="hps">ad una proprietà</span> <span class="hps">al di fuori</span> <span class="hps">della classe</span> <span class="hps">è fatto con</span> <span class="hps">la sintassi</span><span>:</span> </span><code>NomeIstanza.Proprietà</code><span lang="it"><span>,</span> <span class="hps">proprio come in</span> <span class="hps">C</span> <span class="hps">++</span><span>,</span> <span class="hps">Java</span><span>,</span> <span class="hps">e molti altri linguaggi</span><span>.</span> <span class="atn hps">(</span><span>All'interno della</span> <span class="hps">classe la</span> <span class="hps">sintassi </span></span><code>this.Proprietà</code><span lang="it"><span class="hps"> è utilizzata</span> <span class="hps">per ottenere o impostare</span> <span class="hps">il valore della proprietà</span><span>.</span><span>)</span></span></p> + +<p>Nell'esempio seguente, definiamo al momento della creazione la proprietà <code>firstName</code> per la classe <code>Person</code>:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> Person <span class="operator token">=</span> <span class="keyword token">function</span> <span class="punctuation token">(</span>firstName<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">this</span><span class="punctuation token">.</span>firstName <span class="operator token">=</span> firstName<span class="punctuation token">;</span> + console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'Person instantiated'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span><span class="punctuation token">;</span> + +<span class="keyword token">var</span> person1 <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Person</span><span class="punctuation token">(</span><span class="string token">'Alice'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> person2 <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Person</span><span class="punctuation token">(</span><span class="string token">'Bob'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="comment token">// Show the firstName properties of the objects</span> +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'person1 is '</span> <span class="operator token">+</span> person1<span class="punctuation token">.</span>firstName<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// logs "person1 is Alice"</span> +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'person2 is '</span> <span class="operator token">+</span> person2<span class="punctuation token">.</span>firstName<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// logs "person2 is Bob"</span></code></pre> + +<h4 id="I_metodi">I metodi</h4> + +<p>I metodi sono funzioni (e definiti come funzioni), ma per il resto seguono la stessa logica delle proprietà. Chiamare un metodo è simile all'accesso a una proprietà, ma si aggiunge () alla fine del nome del metodo, eventualmente con argomenti. Per definire un metodo va assegnata una funzione a una proprietà della proprietà <code>prototype</code> della classe. In seguito sarà possibile chiamare il metodo sull'oggetto utilizzando lo stesso nome assegnato alla funzione.</p> + +<p>Nell'esempio seguente definiamo e usiamo il metodo <code>sayHello()</code> per la classe <code>Person</code>.</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> Person <span class="operator token">=</span> <span class="keyword token">function</span> <span class="punctuation token">(</span>firstName<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">this</span><span class="punctuation token">.</span>firstName <span class="operator token">=</span> firstName<span class="punctuation token">;</span> +<span class="punctuation token">}</span><span class="punctuation token">;</span> + +Person<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>sayHello <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">"Hello, I'm "</span> <span class="operator token">+</span> <span class="keyword token">this</span><span class="punctuation token">.</span>firstName<span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span><span class="punctuation token">;</span> + +<span class="keyword token">var</span> person1 <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Person</span><span class="punctuation token">(</span><span class="string token">"Alice"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> person2 <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Person</span><span class="punctuation token">(</span><span class="string token">"Bob"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="comment token">// call the Person sayHello method.</span> +person1<span class="punctuation token">.</span><span class="function token">sayHello</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// logs "Hello, I'm Alice"</span> +person2<span class="punctuation token">.</span><span class="function token">sayHello</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// logs "Hello, I'm Bob"</span></code></pre> + +<p>In JavaScript i metodi sono oggetti funzione regolarmente associati a un oggetto come una proprietà, il che significa che è possibile richiamare i metodi "fuori dal contesto". Si consideri il seguente codice di esempio:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> Person <span class="operator token">=</span> <span class="keyword token">function</span> <span class="punctuation token">(</span>firstName<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">this</span><span class="punctuation token">.</span>firstName <span class="operator token">=</span> firstName<span class="punctuation token">;</span> +<span class="punctuation token">}</span><span class="punctuation token">;</span> + +Person<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>sayHello <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">"Hello, I'm "</span> <span class="operator token">+</span> <span class="keyword token">this</span><span class="punctuation token">.</span>firstName<span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span><span class="punctuation token">;</span> + +<span class="keyword token">var</span> person1 <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Person</span><span class="punctuation token">(</span><span class="string token">"Alice"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> person2 <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Person</span><span class="punctuation token">(</span><span class="string token">"Bob"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> helloFunction <span class="operator token">=</span> person1<span class="punctuation token">.</span>sayHello<span class="punctuation token">;</span> + +<span class="comment token">// logs "Hello, I'm Alice"</span> +person1<span class="punctuation token">.</span><span class="function token">sayHello</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="comment token">// logs "Hello, I'm Bob"</span> +person2<span class="punctuation token">.</span><span class="function token">sayHello</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="comment token">// logs "Hello, I'm undefined" (or fails</span> +<span class="comment token">// with a TypeError in strict mode)</span> +<span class="function token">helloFunction</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="comment token">// logs true</span> +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>helloFunction <span class="operator token">===</span> person1<span class="punctuation token">.</span>sayHello<span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="comment token">// logs true</span> +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>helloFunction <span class="operator token">===</span> Person<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>sayHello<span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="comment token">// logs "Hello, I'm Alice"</span> +helloFunction<span class="punctuation token">.</span><span class="function token">call</span><span class="punctuation token">(</span>person1<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p>Come dimostra questo esempio tutti i riferimenti alla funzione <code>sayHello</code> — quello su <code>person1</code>, su <code>Person.prototype</code>, nella variabile <code>helloFunction</code>, ecc.— si riferiscono tutti alla <em>stessa funzione</em>. Il valore di <code>this</code> nel corso di una chiamata alla funzione dipende da come noi lo chiamiamo. Più comunemente, quando chiamiamo <code>this</code> in un'espressione dove abbiamo ottenuto la funzione da una proprietà di oggetto — <code>person1.sayHello()</code>— <code>this</code> è riferito all'oggetto da cui abbiamo ottenuto la funzione (<code>person1</code>), questa è la ragione per cui <code>person1.sayHello()</code> usa il nome "Alice" e <code>person2.sayHello()</code> usa il nome "Bob". Ma se lo chiamiamo in altri modi, <code>this</code> è impostato in modo diverso: chiamare <code>this</code> da una variabile— <code>helloFunction()</code>— <code>imposta this</code> come riferimento all'oggetto globale (<code>window</code>, sui browser). Dal momento che l'oggetto globale (probabilmente) non dispone di una proprietà <code>firstName</code> otteniamo "Hello, I'm undefined". (Questo accade in modalità blanda (loose mode); sarebbe stato diverso [un errore] in <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode" title="/en/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode">strict mode</a>, ma per evitare confusione qui non entreremo nei dettagli). Oppure si può impostare <code>this</code> esplicitamente utilizzando <code>Function#call</code> (o <code>Function#apply</code>), come illustrato alla fine dell'esempio.</p> + +<div class="note"><strong>Nota:</strong> Vedi approfondimenti su <code>this</code> in <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/call">Function#call</a> e <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/apply">Function#apply</a></div> + +<h4 id="Eredità">Eredità</h4> + +<p>L'ereditarietà è un modo per creare una classe come una versione specializzata di una o più classi (<em>JavaScript supporta solo l'ereditarietà singola</em>). La classe specializzata viene comunemente chiamata <em>figlio</em>, e l'altra classe viene comunemente chiamato <em>padre</em>. In JavaScript si esegue questa operazione assegnando un'istanza della classe padre alla classe figlio, e poi specializzandola. Nel browser moderni è anche possibile utilizzare <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create#Classical_inheritance_with_Object.create" title="/en-US/docs/JavaScript/Reference/Global_Objects/Object/create#Classical_inheritance_with_Object.create">Object.create</a> per implementare l'ereditarietà.</p> + +<div class="note"> +<p><strong>Nota:</strong> JavaScript non rileva <code>prototype.constructor</code> della classe figlio (vedi <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype">Object.prototype</a>), quindi devi farlo manualmente. Vedi la domanda "<a href="http://stackoverflow.com/questions/8453887/why-is-it-necessary-to-set-the-prototype-constructor">Why is it necessary to set the prototype constructor?</a>" su Stackoverflow.</p> +</div> + +<p>Nell'esempio seguente definiamo la classe <code>Student</code> come classe figlio di <code>Person</code>. Quindi ridefiniamo il metodo <code>sayHello()</code> e aggiungiamo il metodo <code>sayGoodBye()</code> .</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="comment token">// Define the Person constructor</span> +<span class="keyword token">var</span> Person <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>firstName<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">this</span><span class="punctuation token">.</span>firstName <span class="operator token">=</span> firstName<span class="punctuation token">;</span> +<span class="punctuation token">}</span><span class="punctuation token">;</span> + +<span class="comment token">// Add a couple of methods to Person.prototype</span> +Person<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>walk <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">{</span> + console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">"I am walking!"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span><span class="punctuation token">;</span> + +Person<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>sayHello <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">{</span> + console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">"Hello, I'm "</span> <span class="operator token">+</span> <span class="keyword token">this</span><span class="punctuation token">.</span>firstName<span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span><span class="punctuation token">;</span> + +<span class="comment token">// Define the Student constructor</span> +<span class="keyword token">function</span> <span class="function token">Student</span><span class="punctuation token">(</span>firstName<span class="punctuation token">,</span> subject<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="comment token">// Call the parent constructor, making sure (using Function#call)</span> + <span class="comment token">// that "this" is set correctly during the call</span> + Person<span class="punctuation token">.</span><span class="function token">call</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">,</span> firstName<span class="punctuation token">)</span><span class="punctuation token">;</span> + + <span class="comment token">// Initialize our Student-specific properties</span> + <span class="keyword token">this</span><span class="punctuation token">.</span>subject <span class="operator token">=</span> subject<span class="punctuation token">;</span> +<span class="punctuation token">}</span><span class="punctuation token">;</span> + +<span class="comment token">// Create a Student.prototype object that inherits from Person.prototype.</span> +<span class="comment token">// Note: A common error here is to use "new Person()" to create the</span> +<span class="comment token">// Student.prototype. That's incorrect for several reasons, not least </span> +<span class="comment token">// that we don't have anything to give Person for the "firstName" </span> +<span class="comment token">// argument. The correct place to call Person is above, where we call </span> +<span class="comment token">// it from Student.</span> +Student<span class="punctuation token">.</span>prototype <span class="operator token">=</span> Object<span class="punctuation token">.</span><span class="function token">create</span><span class="punctuation token">(</span>Person<span class="punctuation token">.</span>prototype<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// See note below</span> + +<span class="comment token">// Set the "constructor" property to refer to Student</span> +Student<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>constructor <span class="operator token">=</span> Student<span class="punctuation token">;</span> + +<span class="comment token">// Replace the "sayHello" method</span> +Student<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>sayHello <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">{</span> + console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">"Hello, I'm "</span> <span class="operator token">+</span> <span class="keyword token">this</span><span class="punctuation token">.</span>firstName <span class="operator token">+</span> <span class="string token">". I'm studying "</span> + <span class="operator token">+</span> <span class="keyword token">this</span><span class="punctuation token">.</span>subject <span class="operator token">+</span> <span class="string token">"."</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span><span class="punctuation token">;</span> + +<span class="comment token">// Add a "sayGoodBye" method</span> +Student<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>sayGoodBye <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">{</span> + console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">"Goodbye!"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span><span class="punctuation token">;</span> + +<span class="comment token">// Example usage:</span> +<span class="keyword token">var</span> student1 <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Student</span><span class="punctuation token">(</span><span class="string token">"Janet"</span><span class="punctuation token">,</span> <span class="string token">"Applied Physics"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +student1<span class="punctuation token">.</span><span class="function token">sayHello</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// "Hello, I'm Janet. I'm studying Applied Physics."</span> +student1<span class="punctuation token">.</span><span class="function token">walk</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// "I am walking!"</span> +student1<span class="punctuation token">.</span><span class="function token">sayGoodBye</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// "Goodbye!"</span> + +<span class="comment token">// Check that instanceof works correctly</span> +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>student1 <span class="keyword token">instanceof</span> <span class="class-name token">Person</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// true </span> +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>student1 <span class="keyword token">instanceof</span> <span class="class-name token">Student</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// true</span></code></pre> + +<p>Per quanto riguarda la linea <code>Student.prototype = Object.create(Person.prototype);</code> : in vecchi interpreti JavaScript senza <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create" title="Object.create"><code>Object.create</code></a>, si può utilizzare un "polyfill" (anche detto "shim", vedi l'articolo collegato), oppure utilizzare una funzione che produce il medesimo risultato, come:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">createObject</span><span class="punctuation token">(</span>proto<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">function</span> <span class="function token">ctor</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="punctuation token">}</span> + ctor<span class="punctuation token">.</span>prototype <span class="operator token">=</span> proto<span class="punctuation token">;</span> + <span class="keyword token">return</span> <span class="keyword token">new</span> <span class="class-name token">ctor</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="comment token">// Usage:</span> +Student<span class="punctuation token">.</span>prototype <span class="operator token">=</span> <span class="function token">createObject</span><span class="punctuation token">(</span>Person<span class="punctuation token">.</span>prototype<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<div class="note"><strong>Nota:</strong> Vedi <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create" title="Object.create">Object.create</a> per maggiori informazioni su ciò che fa uno shim per vecchi interpreti.</div> + +<p>Essere sicuri che <code>this</code> punti alla cosa giusta a prescindere da come l'oggetto sia istanziato può essere difficile. Tuttavia c'e una tecnica semplice per renderlo più facile.</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> Person <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>firstName<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="keyword token">this</span> <span class="keyword token">instanceof</span> <span class="class-name token">Person</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">this</span><span class="punctuation token">.</span>firstName <span class="operator token">=</span> firstName<span class="punctuation token">;</span> + <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span> + <span class="keyword token">return</span> <span class="keyword token">new</span> <span class="class-name token">Person</span><span class="punctuation token">(</span>firstName<span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> +<span class="punctuation token">}</span></code></pre> + +<h4 id="Incapsulamento">Incapsulamento</h4> + +<p>Nell'esempio precedente <code>Student</code> non ha bisogno di sapere come sia realizzato il metodo <code>walk()</code> della classe <code>Person</code>, ma può comunque utilizzarlo; la classe <code>Student</code> non ha bisogno di definire in modo esplicito questo metodo se non vogliamo cambiarlo. Questo è chiamato <strong>incapsulamento</strong>, per cui ogni classe impacchetta dati e metodi in una singola unità.</p> + +<p>Il nascondere informazioni (information hiding) è una caratteristica comune ad altre linguaggi, spesso in forma di metodi / proprietà private e protette. Anche se si potrebbe simulare qualcosa di simile in JavaScript, questo non è un requisito per fare programmazione Object Oriented.<a href="https://developer.mozilla.org/it/docs/Web/JavaScript/Introduzione_al_carattere_Object-Oriented_di_JavaScript$edit#cite-2"><sup>2</sup></a></p> + +<h4 id="Astrazione">Astrazione</h4> + +<p>L'astrazione è un meccanismo che permette di modellare la parte corrente del problema, sia con eredità (specializzazione) o la composizione. JavaScript ottiene la specializzazione per eredità, e la composizione permettendo che istanze di classe siano valori di attributi di altri oggetti.</p> + +<p>La classe Function di Javascript eredita dalla classe Object (questo dimostra la specializzazione del modello) e la proprietà Function.prototype è un'istanza di oggetto (ciò dimostra la composizione).</p> + +<p>The JavaScript Function class inherits from the Object class (this demonstrates specialization of the model) and the Function.prototype property is an instance of Object (this demonstrates composition).</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> foo <span class="operator token">=</span> <span class="keyword token">function</span> <span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span><span class="punctuation token">}</span><span class="punctuation token">;</span> + +<span class="comment token">// logs "foo is a Function: true"</span> +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'foo is a Function: '</span> <span class="operator token">+</span> <span class="punctuation token">(</span>foo <span class="keyword token">instanceof</span> <span class="class-name token">Function</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="comment token">// logs "foo.prototype is an Object: true"</span> +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'foo.prototype is an Object: '</span> <span class="operator token">+</span> <span class="punctuation token">(</span>foo<span class="punctuation token">.</span>prototype <span class="keyword token">instanceof</span> <span class="class-name token">Object</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<h4 id="Polimorfismo">Polimorfismo</h4> + +<p>Così come tutti i metodi e le proprietà sono definite all'interno della proprietà prototype, classi diverse possono definire metodi con lo stesso nome; i metodi sono nell'ambito della classe in cui sono definiti, a meno che le due classi siano in un rapporto padre-figlio (cioè una eredita dall'altra in una catena di ereditarietà).</p> + + + +<h2 id="Notes" name="Notes">Note</h2> + +<p>Le tecniche presentate in questo articolo per attuare la programmazione orientata agli oggetti non sono le uniche che possono essere utilizzate in JavaScript, che è molto flessibile in termini di come la programmazione orientata agli oggetti possa essere eseguita.</p> + +<p>Allo stesso modo, le tecniche qui indicate non usano alcuna violazione di linguaggio, né imitano implementazioni di teorie di oggetti di altri linguaggi.</p> + +<p>Ci sono altre tecniche che rendono la programmazione orientata agli oggetti in JavaScript ancora più avanzata, ma sono oltre la portata di questo articolo introduttivo.</p> + +<h2 id="References" name="References">Riferimenti</h2> + +<ol> + <li>{{ Ref() }} Mozilla. "Core JavaScript 1.5 Guide", http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Guide</li> + <li>{{ Ref() }} wikipedia. "Object-oriented programming", <a class="external" href="http://en.wikipedia.org/wiki/Object-oriented_programming" rel="freelink">http://en.wikipedia.org/wiki/Object-...ed_programming</a></li> +</ol> + +<div class="originaldocinfo"> +<p><strong>Original Document Information</strong></p> + +<ul> + <li>Author(s): Fernando Trasviña <f_trasvina at hotmail dot com></li> + <li>Copyright Information: © 1998-2005 by individual mozilla.org contributors; content available under a <a class="external" href="http://www.mozilla.org/foundation/licensing/website-content.html">Creative Commons license</a></li> +</ul> +</div> + +<p>{{ languages( { "es": "es/Introducción_a_JavaScript_orientado_a_objetos"} ) }}</p> diff --git a/files/it/web/javascript/new_in_javascript/1.8.5/index.html b/files/it/web/javascript/new_in_javascript/1.8.5/index.html new file mode 100644 index 0000000000..8bc70d9638 --- /dev/null +++ b/files/it/web/javascript/new_in_javascript/1.8.5/index.html @@ -0,0 +1,123 @@ +--- +title: Novità in JavaScript 1.8.5 +slug: Web/JavaScript/New_in_JavaScript/1.8.5 +translation_of: Archive/Web/JavaScript/New_in_JavaScript/1.8.5 +--- +<div>{{jsSidebar("New_in_JS")}}</div> + +<p>The following is a changelog for JavaScript 1.8.5. This version was included in <a href="/en-US/Firefox/Releases/4">Firefox 4</a>.</p> + +<h2 id="Nuove_funzionalità_in_JavaScript_1.8.5">Nuove funzionalità in JavaScript 1.8.5</h2> + +<h3 id="Nuove_funzioni">Nuove funzioni</h3> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Funzioni</th> + <th scope="col">Descrizione</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{jsxref("Object.create()")}}</td> + <td>Crea un nuovo oggetto con l'oggetto prototipo specificato e le proprietà. {{bug("492840")}}</td> + </tr> + <tr> + <td>{{jsxref("Object.defineProperty()")}}</td> + <td>Aggiunge la proprietà denominata descritta da un determinato descrittore a un oggetto.</td> + </tr> + <tr> + <td>{{jsxref("Object.defineProperties()")}}</td> + <td>Aggiunge le proprietà nominate descritte dai descrittori dati ad un oggetto.</td> + </tr> + <tr> + <td>{{jsxref("Object.getOwnPropertyDescriptor()")}}</td> + <td>Restituisce un descrittore di proprietà per una proprietà denominata su un oggetto. {{bug("505587")}}</td> + </tr> + <tr> + <td>{{jsxref("Object.keys()")}}</td> + <td>Restituisce una matrice di tutte le proprietà enumerabili su un oggetto. {{bug("307791")}}</td> + </tr> + <tr> + <td>{{jsxref("Object.getOwnPropertyNames()")}}</td> + <td>Restituisce una matrice di tutte le proprietà enumerabili e non enumerabili su un oggetto. {{bug("518663")}}</td> + </tr> + <tr> + <td>{{jsxref("Object.preventExtensions()")}}</td> + <td>Impedisce qualsiasi estensione di un oggetto. {{bug("492849")}}</td> + </tr> + <tr> + <td>{{jsxref("Object.isExtensible()")}}</td> + <td>Determina se l'estensione di un oggetto è consentita. {{bug("492849")}}</td> + </tr> + <tr> + <td>{{jsxref("Object.seal()")}}</td> + <td>Impedisce l'altro codice dall'eliminazione delle proprietà di un oggetto. {{bug("492845")}}</td> + </tr> + <tr> + <td>{{jsxref("Object.isSealed()")}}</td> + <td>Determina se un oggetto è sigillato. {{bug("492845")}}</td> + </tr> + <tr> + <td>{{jsxref("Object.freeze()")}}</td> + <td>Blocca un oggetto: l'altro codice non può eliminare o modificare alcuna proprietà. {{bug("492844")}}</td> + </tr> + <tr> + <td>{{jsxref("Object.isFrozen()")}}</td> + <td>Determina se un oggetto è stato congelato. {{bug("492844")}}</td> + </tr> + <tr> + <td>{{jsxref("Array.isArray()")}}</td> + <td>Controlla se una variabile è un array. {{bug("510537")}}</td> + </tr> + <tr> + <td>{{jsxref("Date.prototype.toJSON()")}}</td> + <td>Restituisce una stringa di formato JSON per un oggetto <code>Date</code>.</td> + </tr> + <tr> + <td>{{jsxref("Function.prototype.bind()")}}</td> + <td>Crea una nuova funzione che, quando chiamata, chiama questa funzione nel contesto fornito (con una determinata sequenza di argomenti) {{bug("429507")}}</td> + </tr> + </tbody> +</table> + +<h3 id="Nuove_funzionalità_ECMAScript5">Nuove funzionalità ECMAScript5</h3> + +<ul> + <li>operatore <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/get" title="JavaScript/Reference/Operators/Special Operators/get Operator">get</a></code> e <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/set" title="JavaScript/Reference/Operators/Special Operators/set Operator">set</a></code> ora consente all'identificatore di essere numerico o una stringa. {{Bug ( "520696")}}<br> + . {{bug("520696")}}</li> + <li>{{jsxref("Function.apply()")}} può accettare qualsiasi oggetto di tipo array come elenco di argomenti, invece di solo true arrays.</li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode" title="JavaScript/Strict mode">strict mode support</a></li> + <li>{{jsxref("Array.toString()")}} ora funziona anche su non-array restituendo il risultato della chiamata al metodo <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join" title="JavaScript/Reference/Global Objects/Array/join"><code>join()</code></a> se disponibile o chiamando il suo metodo <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/toString" title="JavaScript/Reference/Global Objects/Object/toString"><code>toString()</code></a>.</li> +</ul> + +<h3 id="Altri_lavori_di_standardizzazione">Altri lavori di standardizzazione</h3> + +<p>Varie sintassi non standard per la definizione di getter e setter sono state rimosse; La sintassi definita da ECMAScript 5 non è stata modificata. Erano tutti piuttosto esoterici e raramente usati; se questo ti colpisce, vedi questo post sul <a class="external" href="http://whereswalden.com/2010/04/16/more-spidermonkey-changes-ancient-esoteric-very-rarely-used-syntax-for-creating-getters-and-setters-is-being-removed/" title="http://whereswalden.com/2010/04/16/more-spidermonkey-changes-ancient-esoteric-very-rarely-used-syntax-for-creating-getters-and-setters-is-being-removed/">blog</a> per i dettagli.</p> + +<h3 id="Nuovi_oggetti">Nuovi oggetti</h3> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Oggetti</th> + <th scope="col">Descrizione</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="/en-US/docs/Archive/Web/Old_Proxy_API">Old Proxy API</a></td> + <td>Offre supporto per la creazione di proxy Object e Function che abilitano la meta-programmazione in JavaScript.</td> + </tr> + </tbody> +</table> + +<h2 id="Funzionalità_modificata_in_JavaScript_1.8.5">Funzionalità modificata in JavaScript 1.8.5</h2> + +<ul> + <li>Supporto ISO 8601 in <code>Date</code>: il metodo {{jsxref("Date")}} dell'oggetto <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Date/parse">parse()</a> ora supporta semplici stringhe ISO 8601 format date strings</li> + <li>Oggetti globali resi di sola lettura: gli oggetti globali <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN" title="JavaScript/Reference/Global Objects/NaN"><code>NaN</code></a>, <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity" title="JavaScript/Reference/Global Objects/Infinity"><code>Infinity</code></a> e <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined" title="JavaScript/Reference/Global Objects/undefined"><code>undefined</code></a> sono in sola lettura, secondo le specifiche ECMAScript 5.</li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/Parent" title="JavaScript/Reference/Global Objects/Object/Parent"><code>obj.__parent__</code></a> and <code>obj.__count__</code> become obsolete. Some information about why: <a class="external" href="http://whereswalden.com/2010/05/07/spidermonkey-change-du-jour-the-special-__parent__-property-has-been-removed/" title="http://whereswalden.com/2010/05/07/spidermonkey-change-du-jour-the-special-__parent__-property-has-been-removed/">SpiderMonkey cambia du jour: la proprietà speciale __parent__ property</a> è stata rimossa {{bug("551529")}} & {{bug("552560")}}.</li> + <li>Le virgole finali non sono più accettate in {{jsxref("JSON.parse()")}}.</li> +</ul> diff --git a/files/it/web/javascript/new_in_javascript/index.html b/files/it/web/javascript/new_in_javascript/index.html new file mode 100644 index 0000000000..98a8e27ddb --- /dev/null +++ b/files/it/web/javascript/new_in_javascript/index.html @@ -0,0 +1,80 @@ +--- +title: New in JavaScript +slug: Web/JavaScript/New_in_JavaScript +tags: + - NeedsTranslation + - TopicStub +translation_of: Archive/Web/JavaScript/New_in_JavaScript +--- +<div>{{jsSidebar("New_in_JS")}}</div> + +<p>This chapter contains information about JavaScript's version history and implementation status for Mozilla/SpiderMonkey-based JavaScript applications, such as Firefox.</p> + +<h2 id="ECMAScript_versions">ECMAScript versions</h2> + +<dl> + <dt><a href="/en-US/docs/Web/JavaScript/Language_Resources">Language resources</a></dt> + <dd>Learn more about the ECMAScript standards on which the JavaScript language is based on.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_5_support_in_Mozilla">ECMAScript 5 support</a></dt> + <dd>Implementation status for the current standard ECMA-262 Edition 5.1 in Mozilla-based engines and products.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_6_support_in_Mozilla">ECMAScript 6 support</a></dt> + <dd>Implementation status for the draft ECMA-262 Edition 6 in Mozilla-based engines and products.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_7_support_in_Mozilla">ECMAScript 7 support</a></dt> + <dd>Implementation status for the upcoming ECMA-262 Edition 7 in Mozilla-based engines and products.</dd> +</dl> + +<h2 id="JavaScript_release_notes">JavaScript release notes</h2> + +<dl> + <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/Firefox_JavaScript_changelog">Firefox JavaScript changelog</a></dt> + <dd>See this changelog for JavaScript features implemented in Firefox 5 and later.</dd> + <dt>Chrome JavaScript changelog</dt> + <dd>(TODO). See this changelog for JavaScript features implemented in Chrome releases.</dd> +</dl> + +<h2 id="JavaScript_versions">JavaScript versions</h2> + +<p><strong>Deprecated</strong> ({{deprecated_inline()}}). The explicit versioning and opt-in of language features was Mozilla-specific and <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=867609">is in process of being removed</a>. Firefox 4 was the last version which referred to an JavaScript version (1.8.5). With new ECMA standards, JavaScript language features are now often mentioned with their initial definition in ECMA-262 Editions such as Edition 6 (ES6).</p> + +<p>JavaScript was released as version 1.0 in March 1996 in Netscape Navigator 2.0 and Internet Explorer 2.0.</p> + +<dl> + <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.1">JavaScript 1.1</a></dt> + <dd>Version shipped in Netscape Navigator 3.0. Released on August 19, 1996.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.2">JavaScript 1.2</a></dt> + <dd>Version shipped in Netscape Navigator 4.0-4.05. Released on June 11, 1997.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.3">JavaScript 1.3</a></dt> + <dd>Version shipped in Netscape Navigator 4.06-4.7x. Released on October 19, 1998.<br> + Standardization work to be compliant with ECMA-262 1st and 2nd Edition.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.4">JavaScript 1.4</a></dt> + <dd>Version shipped in Netscape's server side JavaScript. Released in 1999.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.5">JavaScript 1.5</a></dt> + <dd>Version shipped in Netscape Navigator 6.0 and Firefox 1.0. Release on November 14, 2000.<br> + Standardization work to be compliant with ECMA-262 3rd Edition.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.6">JavaScript 1.6</a></dt> + <dd>Version shipped in Firefox 1.5. Released in November 2005.<br> + Includes ECMAScript for XML (E4X), new <code>Array</code> methods plus <code>String</code> and <code>Array</code> generics.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.7">JavaScript 1.7</a></dt> + <dd>Version shipped in Firefox 2. Released in October 2006.<br> + Includes generators, iterators, array comprehensions, <code>let</code> expressions, and destructuring assignment.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.8">JavaScript 1.8</a></dt> + <dd>Version shipped in Firefox 3. Released in June 2008.<br> + Includes expression closures, generator expressions and <code>Array.reduce()</code></dd> + <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.8.1">JavaScript 1.8.1</a></dt> + <dd>Version shipped in Firefox 3.5. Released on <span class="st">June 30, 2009.<br> + Includes the TraceMonkey JIT and supports native JSON.</span></dd> + <dt>JavaScript 1.8.2</dt> + <dd>Version shipped in Firefox 3.6. Released June 22, 2009.<br> + Includes only minor changes.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.8.5">JavaScript 1.8.5</a></dt> + <dd>Version shipped in Firefox 4. Released July 27, 2010.<br> + Includes many new features for ECMA-262 Edition 5 compliance.<br> + This is the last JavaScript version.</dd> +</dl> + +<h2 id="Features_still_requiring_version_opt-in">Features still requiring version opt-in</h2> + +<dl> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Statements/let"><code>let</code> statement</a></dt> + <dd>The <code>let</code> statement requires the JavaScript version 1.7 (or higher) opt-in. See {{bug(932517)}} and {{bug(932513)}}.</dd> +</dl> diff --git a/files/it/web/javascript/new_in_javascript/novità_in_javascript_1.6/index.html b/files/it/web/javascript/new_in_javascript/novità_in_javascript_1.6/index.html new file mode 100644 index 0000000000..07ac5d386c --- /dev/null +++ b/files/it/web/javascript/new_in_javascript/novità_in_javascript_1.6/index.html @@ -0,0 +1,81 @@ +--- +title: Novità in JavaScript 1.6 +slug: Web/JavaScript/New_in_JavaScript/Novità_in_JavaScript_1.6 +tags: + - E4X + - JavaScript + - Tutte_le_categorie +translation_of: Archive/Web/JavaScript/New_in_JavaScript/1.6 +--- +<div>{{jsSidebar("New_in_JS")}}</div> + +<p>JavaScript 1.6 introduce diverse nuove funzionalità: E4X, vari metodi per gli <code>Array</code> e i metodi generici per gli array e le stringhe.</p> + +<p>JavaScript 1.6 è supportato in <a href="it/Firefox_1.5">Firefox 1.5</a> e successivi.</p> + +<h3 id="E4X" name="E4X">E4X</h3> + +<p>ECMAScript for XML (<a href="it/E4X">E4X</a>) è una potente tecnologia che permette di creare ed elaborare contenuto <a href="it/XML">XML</a> tramite <a href="it/JavaScript">JavaScript</a>. Continueremo a migliorare il supporto a E4X, aggiungendo anche un'integrazione trasparente al <a href="it/DOM">DOM</a> già esistente, ma gli sviluppatori che stanno creando applicazioni web basate su XML possono beneficiare del supporto a E4X in Firefox 1.5.</p> + +<p>E' ancora possibile utilizzare il tipo MIME standard per E4X:</p> + +<pre><script type="text/javascript"> +</pre> + +<p>Tuttavia, la sintassi di E4X può entrare in conflitto con la pratica molto comune di inserire gli script nei commenti <a href="it/HTML">HTML</a> (<code><span class="nowiki"><!--...--></span></code>) per nasconderli ai vecchi browser. E4X può anche entrare in conflitto con le sezioni CDATA (<code><![CDATA{{ mediawiki.external('...') }}]></code>), che permettono l'uso di simboli "<" e ">" in uno script (si noti che questo non si applica all'HTML). Se si incontrano errori apparentemente inspiegabili, si provi ad aggiungere "; e4x=1" al tipo MIME:</p> + +<pre><script type="text/javascript; e4x=1"> +</pre> + +<p>Si noti che gli script nelle estensioni trattano sempre i commenti HTML nella maniera corretta. In pratica, "e4x=1" è implicito.</p> + +<h3 id="Aggiunte_agli_array" name="Aggiunte_agli_array">Aggiunte agli array</h3> + +<p>Vi sono sette nuovi metodi per gli array che possono essere divisi in due categorie, metodi di locazione di un elemento e metodi iterativi. I metodi di locazione sono:</p> + +<ul> + <li><code>indexOf()</code> - restituisce l'indice della prima occorrenza dell'elemento dato.</li> + <li><code>lastIndexOf|lastIndexOf()</code> - restituisce l'indice dell'ultima occorrenza dell'elemento dato.</li> +</ul> + +<p>I metodi iterativi sono:</p> + +<ul> + <li><code>every()</code> - esegue una funzione per ogni elemento presente nell'array e restituisce <code>true</code> se la funzione restituisce <code>true</code> per tutti gli elementi.</li> + <li><code>filter()</code> - esegue una funzione per ogni elemento presente nell'array e restituisce un array di tutti gli elementi per i quali la funzione ha restituito <code>true</code>.</li> + <li><code>forEach()</code> - esegue una funzione per ogni elemento presente nell'array.</li> + <li><code>map()</code> - esegue una funzione per ogni elemento presente nell'array e restituisce i risultati in un altro array.</li> + <li><code>some()</code> - esegue una funzione per ogni elemento presente nell'array e restituisce <code>true</code> se la funzione restituisce <code>true</code> per almeno uno degli elementi.</li> +</ul> + +<p>Per ulteriori informazioni, si veda l'articolo (in inglese) di Nicholas C. Zakas: <span class="exlink"><a href="it/Mozilla's_New_Array_Methods_(external)">Mozilla's New Array Methods</a></span>.</p> + +<h3 id="Metodi_generici_per_array_e_stringhe" name="Metodi_generici_per_array_e_stringhe">Metodi generici per array e stringhe</h3> + +<p>A volte si vorrebbe utilizzare i metodi per gli array con le stringhe. Facendo questo, si tratta una stringa come se fosse un array di caratteri. Per esempio, per controllare che ogni carattere nella variabile <var>str</var> sia una lettera, si potrebbe scrivere:</p> + +<pre>function isLetter(character) { + return (character >= "a" && character <= "z"); +} + +if (Array.prototype.every.call(str, isLetter)) + alert("La stringa '" + str + "' contiene solo lettere!"); +</pre> + +<p>Questa notazione è piuttosto lunga e JavaScript 1.6 introduce una scorciatoia:</p> + +<pre>if (Array.every(str, isLetter)) + alert("La stringa '" + str + "' contiene solo lettere!"); +</pre> + +<p>Similmente, si può facilmente applicare un metodo stringa a qualsiasi oggetto:</p> + +<pre>var num = 15; +alert(String.replace(num, /5/, '2')); +</pre> + +<h3 id="Vedi_anche" name="Vedi_anche">Vedi anche</h3> + +<p><a href="it/Novit%c3%a0_in_JavaScript_1.7">Novità in JavaScript 1.7</a> introdotte in <a href="it/Firefox_2">Firefox 2</a>.</p> + +<p>{{ languages( { "en": "en/New_in_JavaScript_1.6", "fr": "fr/Nouveaut\u00e9s_dans_JavaScript_1.6", "ja": "ja/New_in_JavaScript_1.6", "pl": "pl/Nowo\u015bci_w_JavaScript_1.6", "ru": "ru/\u041d\u043e\u0432\u043e\u0435_\u0432_JavaScript_1.6" } ) }}</p> diff --git a/files/it/web/javascript/new_in_javascript/novità_in_javascript_1.7/index.html b/files/it/web/javascript/new_in_javascript/novità_in_javascript_1.7/index.html new file mode 100644 index 0000000000..8b8cb7b5bf --- /dev/null +++ b/files/it/web/javascript/new_in_javascript/novità_in_javascript_1.7/index.html @@ -0,0 +1,79 @@ +--- +title: Novità in JavaScript 1.7 +slug: Web/JavaScript/New_in_JavaScript/Novità_in_JavaScript_1.7 +tags: + - JavaScript + - Tutte_le_categorie +translation_of: Archive/Web/JavaScript/New_in_JavaScript/1.7 +--- +<p>{{jsSidebar("New_in_JS")}}JavaScript 1.7 è un aggiornamento del linguaggio che include diverse nuove funzionalità, in particolare i generatori, gli iteratori, novità per gli array, le espressioni <code>let</code> e l'assegnazione destrutturante. Inoltre include tutte le funzionalità di <a href="it/Novit%c3%a0_in_JavaScript_1.6">JavaScript 1.6</a>.</p> + +<p>Il supporto a JavaScript 1.7 è disponibile a partire da <a href="it/Firefox_2">Firefox 2</a> Beta 1.</p> + +<p>Gli esempi di codice riportati in questo articolo possono essere sperimentati con la shell di JavaScript. Si veda <a href="it/Introduzione_alla_shell_di_JavaScript">Introduzione alla shell di JavaScript</a>.</p> + +<h2 id="Usare_JavaScript_1.7" name="Usare_JavaScript_1.7">Usare JavaScript 1.7</h2> + +<p>Per poter usare alcune delle nuove funzionalità, occorre specificare che si intende usare JavaScript 1.7. Nel codice HTML o XUL, si inserisca:</p> + +<pre class="eval"> <script type="application/javascript;version=1.7"/> +</pre> + +<p>Quando si utilizza la shell di JavaScript, occorre impostare la versione di JavaScript che si intende usare tramite la funzione <code>version()</code>:</p> + +<pre class="eval"> version(170); +</pre> + +<p>Per usare le funzionalità che richiedono l'uso delle nuove parole chiave <code>yield</code> e <code>let</code> bisogna specificare che si sta usando la versione 1.7 perchè il codice scritto per le vecchie versioni potrebbe utilizzare quelle parole come nome di variabile o come nome di funzione. Le funzionalità che non richiedono l'utilizzo di nuove parole chiave (funzionalità riguardanti gli array e l'assegnamento destrutturante) possono essere usate senza specificare la versione di JavaScript.</p> + +<h2 id="Generatori_e_iteratori" name="Generatori_e_iteratori">Generatori e iteratori</h2> + +<p>Quando si sviluppa del codice che comprende un algoritmo iterativo (come l'iterazione su una lista o calcoli che si ripetono su un insieme di dati), vi sono spesso variabili di stato i cui valori devono essere mantenuti per tutta la durata del ciclo. Tradizionalmente, si utilizza una funzione di callback per ottenere i valori intermedi di un algoritmo iterativo.</p> + +<h3 id="Generatori" name="Generatori">Generatori</h3> + +<p>Si consideri il programma che calcola i numeri di Fibonacci:</p> + +<pre>function do_callback(num) { + document.write(num + "<BR>\n"); +} + +function fib() { + var i = 0, j = 1, n = 0; + while (n < 10) { + do_callback(i); + var t = i; + i = j; + j += t; + n++; + } +} + +fib(); +</pre> + +<p>Questo codice utilizza una routine di callback per effettuare operazioni ad ogni passo dell'iterazione. In questo caso, ogni numero di Fibonacci è semplicemente scritto sulla console.</p> + +<p>I generatori e gli iteratori lavorano insieme per fornire un metodo nuovo e migliore per fare questo. Vediamo come scrivere la stessa routine utilizzando un generatore:</p> + +<pre>function fib() { + var i = 0, j = 1; + while (true) { + yield i; + var t = i; + i = j; + j += t; + } +} + +var g = fib(); +for (var i = 0; i < 10; i++) { + document.write(g.next() + "<BR>\n"); +} +</pre> + +<p>La funzione contenente la parola chiave <code>yield</code> è un generatore. Quando viene chiamata i suoi parametri formali sono legati agli argomenti attuali, ma il corpo non viene realmente eseguito. Invece, viene restituito un generatore-iteratore. Ogni chiamata al metodo <code>next()</code> del generatore-iteratore effettua un nuovo ciclo. Il valore di ogni ciclo è il valore specificato dalla parola chiave <code>yield</code>. Si può pensare a <code>yield</code> come alla versione per generatori-iteratori di <code>yield</code>. Ogni volta che si chiama <code>next()</code>, il codice del generatore riprende dall'istruzione che segue la parola chiave <code>yield</code>.</p> + +<p>Il ciclo di un generatore-iteratore si esegue quindi chiamando ripetutamente il suo metodo <code>next()</code>, associandolo alla condizione desiderata. In questo esempio, possiamo ottenere tutti i numeri di Fibonacci che vogliamo chiamando <code>g.next()</code> fino a quando abbiamo il numero di risultati che desideriamo.</p> + +<p>{{ languages( { "es": "es/New_in_JavaScript_1.7", "es": "es/Novedades_en_JavaScript_1.7", "fr": "fr/Nouveaut\u00e9s_dans_JavaScript_1.7", "ja": "ja/New_in_JavaScript_1.7", "pl": "pl/Nowo\u015bci_w_JavaScript_1.7" } ) }}</p> diff --git a/files/it/web/javascript/reference/classes/costruttore/index.html b/files/it/web/javascript/reference/classes/costruttore/index.html new file mode 100644 index 0000000000..afc6c44526 --- /dev/null +++ b/files/it/web/javascript/reference/classes/costruttore/index.html @@ -0,0 +1,161 @@ +--- +title: costruttore +slug: Web/JavaScript/Reference/Classes/costruttore +translation_of: Web/JavaScript/Reference/Classes/constructor +--- +<div>{{jsSidebar("Classes")}}</div> + +<p>Il metodo <code>constructor</code> è un metodo speciale usato per la creazione e l'inizializzazione di un oggetto creato da una <code>classe</code>.</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox">constructor([argomenti]) { ... }</pre> + +<h2 id="Descrizione">Descrizione</h2> + +<p>In una classe ci può essere un solo metodo con il nome "constructor". Se una classe contiene una o più occorrenze del metodo <code>constructor</code> viene sollevato un errore di tipo {{jsxref("SyntaxError")}}. </p> + +<p>Un costruttore può usare la keyword <code>super</code> per chiamare il costruttore di una classe genitore.</p> + +<p>Se non viene specificato un metodo <code>constructor</code>, verrà usato quello di default.</p> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Usare_il_metodo_constructor">Usare il metodo <code>constructor</code></h3> + +<p>Questo pezzo di codice è stato preso da <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">classes sample</a> (<a href="https://googlechrome.github.io/samples/classes-es6/index.html">live demo</a>).</p> + +<pre class="brush: js">class Square extends Polygon { + constructor(length) { + // Chiama il costruttore della classe padre usando lo stesso valore length + // come altezza e come larghezza del Poligono + super(length, length); + // Nota: Nelle classi derivate, super() deve essere chiamato prima + // dell'utilizzo di 'this', altrimenti viene sollevato un reference error. + this.name = 'Square'; + } + + get area() { + return this.height * this.width; + } + + set area(value) { + this.area = value; + } +}</pre> + +<h3 id="Costruttori_predefinito">Costruttori predefinito</h3> + +<p>Se non viene specificato un metodo costruttore, verrà usato quello di default. Per le classi base il costruttore di default è:</p> + +<pre class="brush: js">constructor() {} +</pre> + +<p>Per le classi derivate invece è:</p> + +<pre class="brush: js">constructor(...args) { + super(...args); +}</pre> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-static-semantics-constructormethod', 'Constructor Method')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-static-semantics-constructormethod', 'Constructor Method')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_Browser">Compatibilità con i Browser</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Specifica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Supporto Base</td> + <td>{{CompatChrome(42.0)}}</td> + <td>{{CompatGeckoDesktop(45)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Costruttore predefinito</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop(45)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Specifica</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome per Android</th> + </tr> + <tr> + <td>Supporto Base</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(42.0)}}</td> + <td>{{CompatGeckoMobile(45)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(42.0)}}</td> + </tr> + <tr> + <td>Costruttore predefinito</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(45)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/super">super()</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/class"><code>class</code> expression</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/class"><code>class</code> declaration</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Classes">Classes</a></li> +</ul> diff --git a/files/it/web/javascript/reference/classes/extends/index.html b/files/it/web/javascript/reference/classes/extends/index.html new file mode 100644 index 0000000000..ccf0cab627 --- /dev/null +++ b/files/it/web/javascript/reference/classes/extends/index.html @@ -0,0 +1,175 @@ +--- +title: extends +slug: Web/JavaScript/Reference/Classes/extends +translation_of: Web/JavaScript/Reference/Classes/extends +--- +<div>{{jsSidebar("Classi")}}</div> + +<p>La parola chiave <strong>extends</strong> è utilizzata nella <a href="/en-US/docs/Web/JavaScript/Reference/Statements/class">dichiarazione</a> o <a href="/en-US/docs/Web/JavaScript/Reference/Operators/class">espressione</a> di classe per creare una classe figlia di un'altra classe.</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox">class ChildClass extends ParentClass { ... } + +/** +*@desc La classe ChildClass estende la classe ParentClass +*/ +</pre> + +<h2 id="Descrizione">Descrizione</h2> + +<p>La parola chiave <code>extends</code> può essere utilizzata per creare una sottoclasse personalizzata basandosi su classi già esistenti e anche su oggetti nativi (cfr. <a href="en-US/docs/Web/JavaScript/Reference/Global_Objects/Date">Date</a> object).</p> + +<p>Il <code>.prototype</code> dell'estensione deve essere un {{jsxref("Object")}} oppure {{jsxref("null")}}.</p> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Utilizzare_extends">Utilizzare <code>extends</code></h3> + +<p>Il primo esempio crea una classe chiamata <code>Square</code> dalla classe chiamata <code>Polygon</code>. Questo esempio è estratto da questo <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">demo live (sorgente)</a>.</p> + +<p> </p> + +<pre class="brush: js">class Square extends Polygon { + constructor(length) { + // Qui chiama il constructor della classe che estende (parent) + // con le misure per la larghezza e altezza del poligono + super(length, length); + // Nota: In classi derivate, super() deve essere chiamato prima + // di poter utilizzare 'this', altrimenti causerà un errore di reference. + this.name = 'Square'; + } + + get area() { + return this.height * this.width; + } + + set area(value) { + this.height = this.width = Math.sqrt(value); + this.area = value; + } +}</pre> + +<h3 id="Utilizzare_extends_con_oggetti_nativi">Utilizzare <code>extends</code> con oggetti nativi</h3> + +<p>Questo esempio estende l'oggetto nativo {{jsxref("Date")}}. Questo esempio è estratto da questo <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">demo live (sorgente)</a>.</p> + +<pre class="brush: js">class myDate extends Date { + constructor() { + super(); + } + + getFormattedDate() { + var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; + return this.getDate() + '-' + months[this.getMonth()] + '-' + this.getFullYear(); + } +}</pre> + +<h3 id="Estendere_null">Estendere <code>null</code></h3> + +<p>Estendere da {{jsxref("null")}} funziona come di norma, eccetto che l'oggetto prototipo non eredita da {{jsxref("Object.prototype")}}.</p> + +<pre class="brush: js">class nullExtends extends null { + constructor() {} +} + +Object.getPrototypeOf(nullExtends); // Function.prototype +Object.getPrototypeOf(nullExtends.prototype) // null</pre> + +<h2 id="Specificazioni">Specificazioni</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-class-definitions', 'extends')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-class-definitions', 'extends')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_Browser">Compatibilità Browser</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(42.0)}}</td> + <td>{{CompatGeckoDesktop(45)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Array subclassing</td> + <td>{{CompatChrome(43.0)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile(45)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(42.0)}}</td> + </tr> + <tr> + <td>Array subclassing</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(43.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Classes">Classes</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/super">super</a></li> +</ul> diff --git a/files/it/web/javascript/reference/classes/index.html b/files/it/web/javascript/reference/classes/index.html new file mode 100644 index 0000000000..6b600be205 --- /dev/null +++ b/files/it/web/javascript/reference/classes/index.html @@ -0,0 +1,270 @@ +--- +title: Classes +slug: Web/JavaScript/Reference/Classes +tags: + - Classes + - ECMAScript6 + - Experimental + - Inheritance + - Intermediate + - JavaScript + - NeedsContent + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/JavaScript/Reference/Classes +--- +<div>{{JsSidebar("Classes")}}</div> + +<p>Le classi JavaScript, introdotte in ECMAScript 2015, sono principalmente zucchero sintattico sull'esistente ereditarietà prototipale di JavaScript. La sintassi <em>non</em><strong> </strong>introduce un nuovo modello di eredità orientata agli oggetti in JavaScript.</p> + +<h2 id="Definizione_classi">Definizione classi</h2> + +<p>Le classi sono di fatto delle "<a href="/en-US/docs/Web/JavaScript/Reference/Functions">funzioni</a> speciali", e così come puoi definire <a href="/en-US/docs/Web/JavaScript/Reference/Operators/function">function expressions</a> e <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function">function declarations</a>, la sintassi per la classe ha due componenti: <a href="/en-US/docs/Web/JavaScript/Reference/Operators/class">class expressions</a> e <a href="/en-US/docs/Web/JavaScript/Reference/Statements/class">class declarations</a>.</p> + +<h3 id="Dichiarazione_classe">Dichiarazione classe</h3> + +<p>Un modo per definire una classe è quello di <strong>dichiararla</strong>. Per dichiarare una classe, usa la <em>keyword</em> <code>class</code> seguito dal nome della classe (in questo caso "Polygon").</p> + +<pre class="brush: js">class Polygon { + constructor(height, width) { + this.height = height; + this.width = width; + } +}</pre> + +<h4 id="Hoisting">Hoisting</h4> + +<p>Un'importante differenza tra la <strong>dichiarazione di una funzione</strong> e la <strong>dichiarazione di una classe</strong> è che le dichiarazioni di funzione sono {{Glossary("Hoisting", "hoisted")}} mentre quelle per le classi no. Bisogna dichiarare la classe e poi si può usarla, altrimenti il codice solleva un'eccezione {{jsxref("ReferenceError")}}:</p> + +<pre class="brush: js example-bad">var p = new Polygon(); // ReferenceError + +class Polygon {} +</pre> + +<h3 id="Class_expressions">Class expressions</h3> + +<p>Una <strong>class expression</strong> è un altro modo di definire una classe. In questo caso possono avere un nome o meno. Il nome dato è locale al corpo della classe.</p> + +<pre class="brush: js">// unnamed +var Polygon = class { + constructor(height, width) { + this.height = height; + this.width = width; + } +}; + +// named +var Polygon = class Polygon { + constructor(height, width) { + this.height = height; + this.width = width; + } +}; +</pre> + +<p><strong>Nota: </strong>anche le <strong>Class</strong> <strong>expressions </strong>soffrono degli stessi problemi di hoisting menzionati per le <strong>dichiarazioni di Classi.</strong></p> + +<h2 id="Corpo_della_classe_e_definizione_dei_metodi">Corpo della classe e definizione dei metodi</h2> + +<p>Il corpo di una classe è la parte inclusa tra le parentesi graffe <code>{}</code>. Qui si definiscono i membri della classe come il costruttore o i metodi.</p> + +<h3 id="Strict_mode">Strict mode</h3> + +<p>I corpi di <em>class declarations</em> e <em>class expression</em> sono eseguiti in <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a>.</p> + +<h3 id="Costruttore">Costruttore</h3> + +<p>Il <code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/constructor">costruttore</a></code> è un metodo speciale usato per creare ed inizializzare un oggetto. Ci può essere un solo metodo con il nome "constructor" in una classe. Se la classe contiene più di un'occorrenza del costruttore verrà sollevato un {{jsxref("SyntaxError")}}.</p> + +<p>Un costruttore può usare la parola chiave <code>super</code> per richiamare il costruttore della classe padre.</p> + +<h3 id="Prototipi">Prototipi</h3> + +<p>Guarda anche <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">method definitions</a>.</p> + +<pre class="brush: js">class Polygon { + constructor(height, width) { + this.height = height; + this.width = width; + } + + get area() { + return this.calcArea() + } + + calcArea() { + return this.height * this.width; + } +}</pre> + +<h3 id="Metodi_statici">Metodi statici</h3> + +<p>La parola chiave <code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/static">static</a></code> definisce un metodo statico. I metodi statici sono chiamati senza istanziare la loro classe e <strong>non</strong> possono essere chiamati su una classe istanziata. Vengono usati per creare funzioni di utilità.</p> + +<pre class="brush: js">class Point { + constructor(x, y) { + this.x = x; + this.y = y; + } + + static distance(a, b) { + const dx = a.x - b.x; + const dy = a.y - b.y; + + return Math.sqrt(dx*dx + dy*dy); + } +} + +const p1 = new Point(5, 5); +const p2 = new Point(10, 10); + +console.log(Point.distance(p1, p2));</pre> + +<h3 id="Inscatolamento_con_metodi_prototipo_e_statico">Inscatolamento con metodi prototipo e statico</h3> + +<p>Quando un metodo statico o prototipo è chiamato senza un oggetto valutato "this", allora il valore di "this" sarà <code><strong>undefined</strong></code> all'interno della funzione chiamata. L'autoinscatolamento non succederà. Il comportamento sarà lo stesso perfino se scriviamo il codice in modalità non-strict perché tutte le funzioni, metodi, costruttori, getter o setter sono eseguiti in modo strict. Così se non specifichiamo il valore <em>this</em>, allora sarà <code><strong>undefined.</strong></code></p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">class</span> <span class="class-name token">Animal</span> <span class="punctuation token">{</span> + <span class="function token">speak</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">return</span> <span class="keyword token">this</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + <span class="keyword token">static</span> <span class="function token">eat</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">return</span> <span class="keyword token">this</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> +<span class="punctuation token">}</span> + +<span class="keyword token">let</span> obj <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Animal</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +obj<span class="punctuation token">.</span><span class="function token">speak</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// Animal {}</span> +<span class="keyword token">let</span> speak <span class="operator token">=</span> obj<span class="punctuation token">.</span>speak<span class="punctuation token">;</span> +<span class="function token">speak</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// undefined</span> + +Animal<span class="punctuation token">.</span><span class="function token">eat</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="comment token">// class Animal</span> +<span class="keyword token">let</span> eat <span class="operator token">=</span> Animal<span class="punctuation token">.</span>eat<span class="punctuation token">;</span> +<span class="function token">eat</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// undefined</span></code></pre> + +<p>Se scriviamo il codice soprascritto usando le tradizionali classi basate su funzioni, allora l'autoinscatolamento accadrà basato sul valore "this" peril quale la funzione è stata chiamata.</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">Animal</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="punctuation token">}</span> + +Animal<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>speak <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">return</span> <span class="keyword token">this</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +Animal<span class="punctuation token">.</span>eat <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">return</span> <span class="keyword token">this</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="keyword token">let</span> obj <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Animal</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">let</span> speak <span class="operator token">=</span> obj<span class="punctuation token">.</span>speak<span class="punctuation token">;</span> +<span class="function token">speak</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// global object</span> + +<span class="keyword token">let</span> eat <span class="operator token">=</span> Animal<span class="punctuation token">.</span>eat<span class="punctuation token">;</span> +<span class="function token">eat</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// global object</span></code></pre> + +<h2 id="Sottoclassi_con_extends">Sottoclassi con <code>extends</code></h2> + +<p>La keyword <code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/extends">extends</a></code> viene usata<code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/extends"> </a></code>nelle <em>class declarations</em> o <em>class expressions </em>per creare una classe figlia di un'altra classe.</p> + +<pre class="brush: js">class Animal { + constructor(name) { + this.name = name; + } + + speak() { + console.log(this.name + ' makes a noise.'); + } +} + +class Dog extends Animal { + speak() { + console.log(this.name + ' barks.'); + } +} +</pre> + +<p>Si possono anche estendere le classi tradizionali basate su funzioni:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> Animal <span class="punctuation token">(</span>name<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">this</span><span class="punctuation token">.</span>name <span class="operator token">=</span> name<span class="punctuation token">;</span> +<span class="punctuation token">}</span> +Animal<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>speak <span class="operator token">=</span> <span class="keyword token">function</span> <span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">.</span>name <span class="operator token">+</span> <span class="string token">' makes a noise.'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="keyword token">class</span> <span class="class-name token">Dog</span> <span class="keyword token">extends</span> <span class="class-name token">Animal</span> <span class="punctuation token">{</span> + <span class="function token">speak</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">super</span><span class="punctuation token">.</span><span class="function token">speak</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">.</span>name <span class="operator token">+</span> <span class="string token">' barks.'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> +<span class="punctuation token">}</span> + +<span class="keyword token">var</span> d <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Dog</span><span class="punctuation token">(</span><span class="string token">'Mitzie'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +d<span class="punctuation token">.</span><span class="function token">speak</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<h2 id="Sub_classing_built-in_objects">Sub classing built-in objects</h2> + +<p>TBD</p> + +<h2 id="Chiamare_una_superclasse_con_super">Chiamare una superclasse con <code>super</code></h2> + +<p>La keyword <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/super">super</a></code> è usata per chiamare le funzioni di un oggetto padre.</p> + +<pre class="brush: js">class Cat { + constructor(name) { + this.name = name; + } + + speak() { + console.log(this.name + ' makes a noise.'); + } +} + +class Lion extends Cat { + speak() { + super.speak(); + console.log(this.name + ' roars.'); + } +} +</pre> + +<h2 id="ES5_inheritance_syntax_and_ES6_classes_syntax_compared">ES5 inheritance syntax and ES6 classes syntax compared</h2> + +<p>TBD</p> + +<h2 id="Esempi">Esempi</h2> + +<p>TBD</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-class-definitions', 'Class definitions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibili">Browser compatibili</h2> + + + +<p>{{Compat("javascript.classes")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions">Fun</a>zioni</li> + <li>{{jsxref("Statements/class", "class declaration")}}</li> + <li>{{jsxref("Operators/class", "class expression")}}</li> + <li>{{jsxref("Operators/super", "super")}}</li> + <li><a href="https://hacks.mozilla.org/2015/07/es6-in-depth-classes/">Blog post: "ES6 In Depth: Classes"</a></li> +</ul> diff --git a/files/it/web/javascript/reference/classes/static/index.html b/files/it/web/javascript/reference/classes/static/index.html new file mode 100644 index 0000000000..7158316654 --- /dev/null +++ b/files/it/web/javascript/reference/classes/static/index.html @@ -0,0 +1,70 @@ +--- +title: static +slug: Web/JavaScript/Reference/Classes/static +translation_of: Web/JavaScript/Reference/Classes/static +--- +<div>{{jsSidebar("Classes")}}</div> + +<p>La parola <strong>static</strong> è utilizzata per definire un metodo statico di una classe.</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox notranslate">static nomeMetodo() { ... }</pre> + +<h2 id="Descrizione">Descrizione</h2> + +<p>La parola <strong>static</strong> definisce metodi statici per una classe. I metodi statici non sono invocati sull'istanza della classe, ma sono invece invocati sulla classe stessa. Questi sono spesso metodi di supporto, as esempio funzioni per creare o clonare oggetti.</p> + +<h2 id="Esempi">Esempi</h2> + +<p>Il seguente esempio mostra diversi aspetti interessanti. Mostra come un metodo statico è implementato in una classe, e come una classe con metodi statici può essere estesa da altre classi. Infine da una dimostrazione di come un metodo statico può essere o non può essere invocato.</p> + +<pre class="brush: js notranslate">class Triplica { + static triplica(n) { + n = n | 1; + return n * 3; + } +} + +class TriplicaAncora extends Triplica { + static triplica(n) { + return super.triplica(n) * super.triplica(n); + } +} + +console.log(Triplica.triplica()); // 3 +console.log(Triplica.triplica(6)); // 18 +console.log(TriplicaAncora.triplica(3)); // 81 +var tp = new Triplica(); +console.log(tp.triplica()); //Logga 'tp.triplica is not a function' perché la classe è instanziata</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-class-definitions', 'Class definitions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibili">Browser compatibili</h2> + + + +<p>{{Compat("javascript.classes.static")}}</p> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/class"><code>class</code> expression</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/class"><code>class</code> declaration</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Classes">Classes</a></li> +</ul> diff --git a/files/it/web/javascript/reference/errors/index.html b/files/it/web/javascript/reference/errors/index.html new file mode 100644 index 0000000000..c295fccea6 --- /dev/null +++ b/files/it/web/javascript/reference/errors/index.html @@ -0,0 +1,31 @@ +--- +title: JavaScript error reference +slug: Web/JavaScript/Reference/Errors +tags: + - Debugging + - Error + - Errors + - Exception + - JavaScript + - NeedsTranslation + - TopicStub + - exceptions +translation_of: Web/JavaScript/Reference/Errors +--- +<p>{{jsSidebar("Errors")}}</p> + +<p>Below, you'll find a list of errors which are thrown by JavaScript. These errors can be a helpful debugging aid, but the reported problem isn't always immediately clear. The pages below will provide additional details about these errors. Each error is an object based upon the {{jsxref("Error")}} object, and has a <code>name</code> and a <code>message</code>.</p> + +<p>Errors displayed in the Web console may include a link to the corresponding page below to help you quickly comprehend the problem in your code.</p> + +<h2 id="List_of_errors">List of errors</h2> + +<p>In this list, each page is listed by name (the type of error) and message (a more detailed human-readable error message). Together, these two properties provide a starting point toward understanding and resolving the error. For more information, follow the links below!</p> + +<p>{{ListSubPages("/en-US/docs/Web/JavaScript/Reference/Errors")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a>: Beginner's introductory tutorial on fixing JavaScript errors.</li> +</ul> diff --git a/files/it/web/javascript/reference/errors/invalid_array_length/index.html b/files/it/web/javascript/reference/errors/invalid_array_length/index.html new file mode 100644 index 0000000000..61ee1cba5f --- /dev/null +++ b/files/it/web/javascript/reference/errors/invalid_array_length/index.html @@ -0,0 +1,77 @@ +--- +title: 'RangeError: invalid array length' +slug: Web/JavaScript/Reference/Errors/Invalid_array_length +tags: + - Errori + - JavaScript + - RangeError +translation_of: Web/JavaScript/Reference/Errors/Invalid_array_length +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="Messaggio">Messaggio</h2> + +<pre class="syntaxbox">RangeError: invalid array length (Firefox) +RangeError: Invalid array length (Chrome) +RangeError: Invalid array buffer length (Chrome) +</pre> + +<h2 id="Tipo_di_errore">Tipo di errore</h2> + +<p>{{jsxref("RangeError")}}</p> + +<h2 id="Cosa_è_andato_storto">Cosa è andato storto?</h2> + +<p>Un invalid array length può comparire in queste situazioni:</p> + +<ul> + <li>Quando viene creato un {{jsxref("Array")}} o un {{jsxref("ArrayBuffer")}} che ha lunghezza negativa o maggiore uguale a 2<sup>32</sup>, oppure</li> + <li>quando viene impostata la proprietà {{jsxref("Array.length")}} a un valore che è negativo o maggiore uguale a 2<sup>32</sup>.</li> +</ul> + +<p>Perché la lunghezza di <code>Array</code> e <code>ArrayBuffer</code> è limitata? La proprietà <code>length</code> di un <code>Array </code>o di un <code>ArrayBuffer</code> è rappresentata da un intero di 32-bit senza segno, che quindi permette di memorizzare valori nell'intervallo da 0 a 2<sup>32 </sup>- 1.</p> + +<p>Se stai creando un <code>Array</code> utilizzando il costruttore, potresti invece utilizzare la notazione letterale dove il primo argomento è interpretato come la lunghezza dell' <code>Array</code>.</p> + +<p>Altrimenti, potresti voler bloccare la lunghezza prima di settare la proprietà length, o utilizzarla come argomento del costruttore.</p> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Casi_non_validi">Casi non validi</h3> + +<pre class="brush: js example-bad">new Array(Math.pow(2, 40)) +new Array(-1) +new ArrayBuffer(Math.pow(2, 32)) +new ArrayBuffer(-1) + +let a = []; +a.length = a.length - 1; // setta -1 alla proprietà length + +let b = new Array(Math.pow(2, 32) - 1); +b.length = b.length + 1; // setta 2^32 alla proprietà length +</pre> + +<h3 id="Casi_validi">Casi validi</h3> + +<pre class="brush: js example-good">[ Math.pow(2, 40) ] // [ 1099511627776 ] +[ -1 ] // [ -1 ] +new ArrayBuffer(Math.pow(2, 32) - 1) +new ArrayBuffer(0) + +let a = []; +a.length = Math.max(0, a.length - 1); + +let b = new Array(Math.pow(2, 32) - 1); +b.length = Math.min(0xffffffff, b.length + 1); + +// 0xffffffff è la notazione esadecimale di 2^32 - 1 +// che può essere riscritta come (-1 >>> 0) +</pre> + +<h2 id="Guarda_anche">Guarda anche</h2> + +<ul> + <li>{{jsxref("Array")}}</li> + <li>{{jsxref("Array.length")}}</li> + <li>{{jsxref("ArrayBuffer")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/errors/invalid_assignment_left-hand_side/index.html b/files/it/web/javascript/reference/errors/invalid_assignment_left-hand_side/index.html new file mode 100644 index 0000000000..d2412e48ce --- /dev/null +++ b/files/it/web/javascript/reference/errors/invalid_assignment_left-hand_side/index.html @@ -0,0 +1,54 @@ +--- +title: 'ReferenceError: invalid assignment left-hand side' +slug: Web/JavaScript/Reference/Errors/Invalid_assignment_left-hand_side +tags: + - Errori + - JavaScript + - ReferenceError +translation_of: Web/JavaScript/Reference/Errors/Invalid_assignment_left-hand_side +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="Messaggio">Messaggio</h2> + +<pre class="syntaxbox">ReferenceError: invalid assignment left-hand side +</pre> + +<h2 id="Tipo_di_errore">Tipo di errore</h2> + +<p>{{jsxref("ReferenceError")}}.</p> + +<h2 id="Che_cosa_è_andato_storto">Che cosa è andato storto?</h2> + +<p>C'è stato un assegnamento inaspettato da qualche parte. Ciò, ad esempio, potrebbe essere dovuto alla confusione tra l' <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">operatore d'assegnazione</a> e l' <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">operatore di confronto</a>. Mentre un solo segno di "<code>=</code>" assegna un valore ad una variabile, l'operatore "<code>==</code>" o "<code>===</code>" effettua il confronto tra valori.</p> + +<h2 id="Esempi">Esempi</h2> + +<pre class="brush: js example-bad">if (Math.PI = 3 || Math.PI = 4) { + console.log('niente!'); +} +// ReferenceError: invalid assignment left-hand side + +var str = 'Ciao, ' ++= 'sono io ' ++= 'cosa stai cercando?'; +// ReferenceError: invalid assignment left-hand side +</pre> + +<p>Nella dichiarazione <code>if</code>, puoi usare un operatore di confronto ("=="), e per la concatenazione di stringhe è necessario l'operatore più ("+").</p> + +<pre class="brush: js example-good">if (Math.PI == 3 || Math.PI == 4) { + console.log('niente!'); +} + +var str = 'Ciao, ' ++ 'dall/' ' ++ 'altra parte!'; +</pre> + +<h2 id="Guarda_anche">Guarda anche</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">Assegnamento degli operatori</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">Operatori di comparazione</a></li> +</ul> diff --git a/files/it/web/javascript/reference/errors/missing_semicolon_before_statement/index.html b/files/it/web/javascript/reference/errors/missing_semicolon_before_statement/index.html new file mode 100644 index 0000000000..c49646b4b1 --- /dev/null +++ b/files/it/web/javascript/reference/errors/missing_semicolon_before_statement/index.html @@ -0,0 +1,78 @@ +--- +title: 'SyntaxError: missing ; before statement' +slug: Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement +tags: + - Errore di Sintassi + - Errori + - JavaScript + - Oggetti + - SyntaxError + - Variabili +translation_of: Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="Messaggio">Messaggio</h2> + +<pre class="syntaxbox">SyntaxError: Expected - Previsto ';' (Edge) +SyntaxError: missing - Mancante; prima della dichiarazione (Firefox) +</pre> + +<p> </p> + +<h2 id="Tipo_di_errore">Tipo di errore</h2> + +<p>{{jsxref("SyntaxError")}}.</p> + +<h2 id="Cosa_è_andato_storto">Cosa è andato storto?</h2> + +<p>C'è un punto e virgola (<code>;</code>) mancante. Le <a href="/en-US/docs/Web/JavaScript/Reference/Statements">dichiarazioni in JavaScript </a>devono essere determinate da il punto e virgola (<code>;</code>). Alcune di loro sono soggette all' <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Automatic_semicolon_insertion">Inserzione Automatica a Semicolonne (ASI)</a>, ma in questo caso è necessario specificare la semicolonna, in modo che JavaScript legga correttamente il codice sorgente.</p> + +<p>In ogni caso, molto spesso, questo errore è solo una conseguenza di un altro, come lo scorretto uso degli apici, o l'uso errato di <code>var</code>. Potresti anche avere troppe parentesi da qualche parte. Ricontrolla la sintassi del codice quando appare questo errore.</p> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Stringhe_senza_escape_()">Stringhe senza escape (\)</h3> + +<p>Questo errore accade frequentemente quando si usa un apostrofo senza carattere di escape. Il motore di JavaScript si aspetta la fine di una stringa. Per esempio:</p> + +<pre class="brush: js example-bad">var foo = 'Tom's bar'; +// (') interrompe è atteso ("..'..") o ('..\'..') +// SyntaxError: missing ; prima della dichiarazione</pre> + +<p>Per risolvere, usa le virgolette oppure un carattere di escape (backslash):</p> + +<pre class="brush: js example-good">var foo = "Tom's bar"; <- in questo modo +var foo = 'Tom\'s bar'; <- in questo modo +</pre> + +<p> </p> + +<h3 id="Dichiarare_le_proprietà_con_var">Dichiarare le proprietà con var</h3> + +<p><strong>Non </strong>puoi dichiarare le proprietà di un oggetto o di un array con una dichiarazione <code>var</code>.</p> + +<pre class="brush: js example-bad">var obj = {}; +var obj.foo = 'hi'; +// SyntaxError missing ; before statement + +var array = []; +var array[0] = 'there'; +// SyntaxError missing ; before statement +</pre> + +<p>Prova invece ad omettere la parola chiave <code>var</code>:</p> + +<pre class="brush: js example-good">var obj = {}; +obj.foo = 'hi'; + +var array = []; +array[0] = 'there'; +</pre> + +<h2 id="Controlla_anche">Controlla anche</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Automatic_semicolon_insertion">Inserzione Automatica a Semicolonna (ASI)</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements">Dichiarazioni in JavaScript</a></li> +</ul> diff --git a/files/it/web/javascript/reference/errors/too_much_recursion/index.html b/files/it/web/javascript/reference/errors/too_much_recursion/index.html new file mode 100644 index 0000000000..049ed04cf0 --- /dev/null +++ b/files/it/web/javascript/reference/errors/too_much_recursion/index.html @@ -0,0 +1,72 @@ +--- +title: 'InternalError: too much recursion' +slug: Web/JavaScript/Reference/Errors/Too_much_recursion +tags: + - Errore + - JavaScript +translation_of: Web/JavaScript/Reference/Errors/Too_much_recursion +--- +<div>{{jsSidebar("Errors")}}</div> + +<p>The JavaScript exception "too much recursion" or "Maximum call stack size exceeded" occurs when there are too many function calls, or a function is missing a base case.</p> + +<h2 id="Message">Message</h2> + +<pre class="syntaxbox notranslate">Error: Spazio nello stack esaurito (Edge) +InternalError: Troppa ricorsione (Firefox) +RangeError: Dimensioni massime dello stack superate (Chrome) +</pre> + +<h2 id="Error_type">Error type</h2> + +<p>{{jsxref("InternalError")}}.</p> + +<h2 id="Cosè_andato_storto">Cos'è andato storto?</h2> + +<p>Una funzione che si chiama da sola si chiama <em>funzione ricorsiva</em>. Una volta che la condizione è soddisfatta, la funzione smette di chiamarsi. Questo si chiama <em>caso di base.</em></p> + +<p>In certi versi, la ricorsione è analoga ai cicli. Entrambi eseguono lo stesso codice più volte, ed entrambi richiedono una condizione(per evitare cicli infiniti,o in questo caso, ricorsioni infinite). Quando ci sono troppe chiamate, o manca il caso di base , JavaScript lancerà questo errore.</p> + +<h2 id="Esempi">Esempi</h2> + +<p>Questa funzione ricorsiva si chiama 10 volte, secondo le condizioni d'uscita</p> + +<pre class="brush: js notranslate">function ciclo(x) { + if (x >= 10) // "x >= 10" condizione d'uscita + return; + // do stuff + ciclo(x + 1); // chiamata ricorsiva +} +ciclo(0);</pre> + +<p>Impostare questa condizione a valori estremamente alti non funzionerà:</p> + +<pre class="brush: js example-bad notranslate">function ciclo(x) { + if (x >= 1000000000000) + return; + // fà cose + ciclo(x + 1); +} +ciclo(0); + +// Errore Interno: troppa ricorsione</pre> + +<p>Alla funzione manca un caso base.Visto che non c'è condizione di uscita, la funzione chiama se stessa all'infinito.</p> + +<pre class="brush: js example-bad notranslate">function ciclo(x) { + // Manca caso base + +ciclo(x + 1); // Chiamata ricorsiva +} + +ciclo(0); + +// Errore Interno: troppa ricorsione</pre> + +<h2 id="Vedi_anche">Vedi anche</h2> + + + +<ul> + <li>{{Glossary("Recursion")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/errors/unexpected_token/index.html b/files/it/web/javascript/reference/errors/unexpected_token/index.html new file mode 100644 index 0000000000..17a9c78a4c --- /dev/null +++ b/files/it/web/javascript/reference/errors/unexpected_token/index.html @@ -0,0 +1,50 @@ +--- +title: 'SyntaxError: Unexpected token' +slug: Web/JavaScript/Reference/Errors/Unexpected_token +tags: + - Errori + - JavaScript + - Sintassi +translation_of: Web/JavaScript/Reference/Errors/Unexpected_token +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="Messaggio">Messaggio</h2> + +<pre class="syntaxbox">SyntaxError: espressione prevista, si ottiene "x" +SyntaxError: nome proprietà previsto, si ottiene "x" +SyntaxError: target previsto, si ottiene "x" +SyntaxError: nome dell'argomento rest previsto, si ottiene "x" +SyntaxError: parentesi di chiusura prevista, si ottiene "x" +SyntaxError: previsto '=>' dopo la lista degli argomenti, si ottiene "x" +</pre> + +<h2 id="Tipo_di_errore">Tipo di errore</h2> + +<p>{{jsxref("SyntaxError")}}</p> + +<h2 id="Cosa_è_andato_storto">Cosa è andato storto?</h2> + +<p>Era atteso un costrutto specifico del linguaggio, ma è stato fornito qualcosa di diverso. Potrebbe trattarsi di un semplice errore di digitazione.</p> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Espressione_prevista">Espressione prevista</h3> + +<p>Ad esempio, non è permesso terminare una lista di argomenti con la virgola, in quanto JavaScript si aspetta un altro argomento.</p> + +<pre class="brush: js example-bad">Math.max(2, 42,); +// SyntaxError: expected expression, got ')' +</pre> + +<p>Sarebbe invece corretto omettere la virgola o specificare un altro argomento (che potrebbe anche essere un espressione):</p> + +<pre class="brush: js example-good">Math.max(2, 42); +Math.max(2, 42, 13 + 37); +</pre> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>{{jsxref("Math.max()")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/errors/unexpected_type/index.html b/files/it/web/javascript/reference/errors/unexpected_type/index.html new file mode 100644 index 0000000000..632b9bf756 --- /dev/null +++ b/files/it/web/javascript/reference/errors/unexpected_type/index.html @@ -0,0 +1,67 @@ +--- +title: 'TypeError: "x" is (not) "y"' +slug: Web/JavaScript/Reference/Errors/Unexpected_type +tags: + - Errori + - JavaScript + - TypeError +translation_of: Web/JavaScript/Reference/Errors/Unexpected_type +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="Messaggio">Messaggio</h2> + +<pre class="syntaxbox">TypeError: "x" is (not) "y" + +Examples: +TypeError: "x" is undefined +TypeError: "x" is null +TypeError: "undefined" is not an object +TypeError: "x" is not an object or null +TypeError: "x" is not a symbol +</pre> + +<h2 id="Tipo_di_errore">Tipo di errore</h2> + +<p>{{jsxref("TypeError")}}.</p> + +<h2 id="Cosa_è_andato_storto">Cosa è andato storto?</h2> + +<p>C'è stato un tipo inaspettato. Questo accade spesso con valori {{jsxref("undefined")}} o {{jsxref("null")}}.</p> + +<p>Inoltre, alcuni metodi, come {{jsxref("Object.create()")}} o {{jsxref("Symbol.keyFor()")}}, richiedono che sia fornito un tipo specifico.</p> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Casi_non_validi">Casi non validi</h3> + +<pre class="brush: js example-bad">// casi undefined e null in cui il metodo substring non funzionerà +var foo = undefined; +foo.substring(1); // TypeError: foo non è definita + +var foo = null; +foo.substring(1); // TypeError: foo è null + + +// Alcuni metodi potrebbero richiedere un tipo specifico +var foo = {} +Symbol.keyFor(foo); // TypeError: foo non è un simbolo + +var foo = 'bar' +Object.create(foo); // TypeError: "foo" non è un oggetto o è null +</pre> + +<h3 id="Risolvere_il_problema">Risolvere il problema</h3> + +<p>Per risolvere il problema di valori <code>undefined</code> o <code>null</code>, si può usare l'operatore <a href="/en-US/docs/Web/JavaScript/Reference/Operators/typeof">typeof</a> operator, ad esempio.</p> + +<pre class="brush: js">if (typeof foo !== 'undefined') { + // Ora sappiamo che foo è definita, possiamo procedere. +}</pre> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>{{jsxref("undefined")}}</li> + <li>{{jsxref("null")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/functions_and_function_scope/arguments/index.html b/files/it/web/javascript/reference/functions_and_function_scope/arguments/index.html new file mode 100644 index 0000000000..c277074bca --- /dev/null +++ b/files/it/web/javascript/reference/functions_and_function_scope/arguments/index.html @@ -0,0 +1,224 @@ +--- +title: Oggetto 'arguments' +slug: Web/JavaScript/Reference/Functions_and_function_scope/arguments +translation_of: Web/JavaScript/Reference/Functions/arguments +--- +<div> +<div>{{jsSidebar("Functions")}}</div> +</div> + +<p>L'oggetto <strong><code>arguments</code></strong> è un oggetto <code>Array</code>-like corrispondente agli argomenti passati in una funzione </p> + +<p>{{EmbedInteractiveExample("pages/js/functions-arguments.html")}}</p> + +<p class="hidden">Il codice sorgente di questo esempio interattivo è ospitato in un repository di Github.<br> + Se vuoi contribuire al progetto di esempi interattivi, per favore clona <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox">arguments</pre> + +<h2 id="Descrizione">Descrizione</h2> + +<p>L'oggetto <code>arguments</code> è una variabile locale disponibile in tutte le funzioni (non-arrow). Si può fare riferimento agli argomenti di una funzione, al suo interno, usando l'oggetto <code>arguments</code>. Questo oggetto contiene un elemento per ogni argomento passato alla funzione, il primo elemento è indicizzato a 0. Per esempio, se a una funzione sono passati tre argomenti, ci si può riferire ad essi come segue:</p> + +<pre class="brush: js">arguments[0] +arguments[1] +arguments[2] +</pre> + +<p>Gli argomenti possono anche essere settati:</p> + +<pre class="brush: js">arguments[1] = 'nuovo valore'; +</pre> + +<p>L'oggetto <code>arguments</code> non è un {{jsxref("Array")}}. E' simile a un <code>Array</code>, ma non ha le proprietà dell'<code>Array,</code> eccetto <code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments/length">length</a></code>. Per esempio, non ha il metodo <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop">pop</a></code>. Tuttavia può essere convertito in un vero <code>Array</code>:</p> + +<pre class="brush: js">var args = Array.prototype.slice.call(arguments); +var args = [].slice.call(arguments); + +// ES2015 +const args = Array.from(arguments); +</pre> + +<div class="warning"> +<p class="brush: js">Usare slice su arguments impedisce le ottimizzazioni in alcuni motori JavaScript (per esempio V8 - <a href="https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments">più informazioni</a>). Se ne avete bisogno, provate a costruire un nuovo array iterando sull'oggetto arguments, piuttosto. Un'alternativa potrebbe essere usare l'odiato costruttore <code>Array</code> come una funzione:</p> + +<pre class="brush: js">var args = (arguments.length === 1 ? [arguments[0]] : Array.apply(null, arguments));</pre> +</div> + +<p>Si può usare l'oggetto <code>arguments</code> se si chiama una funzione con più argomenti di quanti la funzione dichiari formalmente di accettare. Questa tecnica è utile per le funzioni cui possono essere passati un numero variabile di argomenti. Si usi <code><a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments/length">arguments.length</a></code> per determinare il numero di argomenti passati alla funzione, e quindi si processi ogni argomento usando l'oggetto <code>arguments</code>. Per determinare il numero di parametri presenti nella <a href="/en-US/docs/Glossary/Signature/Function">dichiarazione</a> di una funzione, si usi la proprietà <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function/length">Function.length</a></code>.</p> + +<h3 id="Usare_typeof_con_Arguments">Usare <code>typeof</code> con Arguments</h3> + +<p>Il typeof di arguments ritorna 'object'. </p> + +<pre>console.log(typeof arguments); // 'object' </pre> + +<p>Il typeof di ogni signolo argomento può essere determinato con l'uso degli indici.</p> + +<pre>console.log(typeof arguments[0]); //this will return the typeof individual arguments.</pre> + +<h3 id="Usare_la_sintassi_Spread_con_Arguments">Usare la sintassi Spread con Arguments</h3> + +<p>Come è possibile fare con qualsiasi oggetto Array-like, si può usare il metodo {{jsxref("Array.from()")}} o lo <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator">spread operator</a> per convertire arguments in un vero Array:</p> + +<pre class="brush: js">var args = Array.from(arguments); +var args = [...arguments]; +</pre> + +<h2 id="Proprietà">Proprietà</h2> + +<dl> + <dt><code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments/callee">arguments.callee</a></code></dt> + <dd>Riferimento alla funzione in esecuzione.</dd> + <dt><code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments/caller">arguments.caller</a></code> {{ Obsolete_inline() }}</dt> + <dd>Riferimento alla funzione che ha invocato la funzione in esecuzione.</dd> + <dt><code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments/length">arguments.length</a></code></dt> + <dd>Riferimento al numero di argomenti passati alla funzione.</dd> + <dt><code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments/@@iterator">arguments[@@iterator]</a></code></dt> + <dd>Ritorna un nuovo oggetto Array Iterator che contiene i valori per ogni indice in arguments.</dd> +</dl> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Definire_una_funzione_che_concatena_divere_stringhe">Definire una funzione che concatena divere stringhe </h3> + +<p>Questo esempio definisce una funzione che concatena diverse stringhe. L'unico argomento formale per la funzione è una stringa che specifica il carattere di separazione per gli elementi da concatenare. La funzione si definisce come segue:</p> + +<pre class="brush:js">function myConcat(separator) { + var args = Array.prototype.slice.call(arguments, 1); + return args.join(separator); +}</pre> + +<p>Si può passare un numero indefinito di argomenti a questa funzione, e lei creerà una lista inserendo ciascun argomento come item della lista. </p> + +<pre class="brush:js">// returns "red, orange, blue" +myConcat(', ', 'red', 'orange', 'blue'); + +// returns "elephant; giraffe; lion; cheetah" +myConcat('; ', 'elephant', 'giraffe', 'lion', 'cheetah'); + +// returns "sage. basil. oregano. pepper. parsley" +myConcat('. ', 'sage', 'basil', 'oregano', 'pepper', 'parsley');</pre> + +<h3 id="Definire_una_funzione_che_crea_liste_HTML">Definire una funzione che crea liste HTML</h3> + +<p>Questo esempio definisce una funzione che crea una stringa contenente l'HTML di una lista. L'unico argomento formale della funzione è una stringa che è "<code>u</code>" se la lista deve essere ordinata, e "<code>o</code>" se la lista deve essere ordinata (numerata). La funzione è definita come segue:</p> + +<pre class="brush:js">function list(type) { + var result = '<' + type + 'l><li>'; + var args = Array.prototype.slice.call(arguments, 1); + result += args.join('</li><li>'); + result += '</li></' + type + 'l>'; // end list + + return result; +}</pre> + +<p>Si può passare un numero indefinito di argomenti a questa funzione, e lei aggiungerà ogni argomento come un elemento della lista del tipo indicato. Per esempio:</p> + +<pre class="brush:js">var listHTML = list('u', 'One', 'Two', 'Three'); + +/* listHTML is: + +"<ul><li>One</li><li>Two</li><li>Three</li></ul>" + +*/</pre> + +<h3 id="Parametri_rest_default_e_destructured">Parametri rest, default, e destructured</h3> + +<p>L'oggetto <code>arguments</code> può essere usato insieme a parametri <a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest</a>, <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters">default</a>, e <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">destructured</a>.</p> + +<pre class="brush: js">function foo(...args) { + return args; +} +foo(1, 2, 3); // [1,2,3] +</pre> + +<p>Sebbene la presenza di parametri <a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest</a>, <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters">default</a>, o <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">destructured</a> non altera il <a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode#Making_eval_and_arguments_simpler">comportamento dell'oggetto <code>arguments</code> nel codice scritto in strict mode</a>, c'è una sottile differenza tra modalità strict e non-strict.</p> + +<p>Quando una funzione non-strict <strong>non</strong> <strong>contiene</strong> parametri <a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest</a>, <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters">default</a>, o <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">destructured</a>, allora i valori nell'oggetto <code>arguments</code> <strong>tracciano</strong> il valore degli argomenti (e vice versa). Si guardi il codice qui sotto:</p> + +<pre class="brush: js">function func(a) { + arguments[0] = 99; // updating arguments[0] also updates a + console.log(a); +} +func(10); // 99 +</pre> + +<p>e</p> + +<pre class="brush: js">function func(a) { + a = 99; // updating a also updates arguments[0] + console.log(arguments[0]); +} +func(10); // 99 +</pre> + +<p>Quando una funzione non-strict <strong>contiene</strong> parametri <a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest</a>, <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters">default</a>, o <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">destructured</a>, allora i valori nell'oggetto <code>arguments</code> <strong>non tracciano</strong> il valore degli argomenti (e vice versa). Al contrario, riflettono gli argomenti forniti al momento dell'invocazione:</p> + +<pre class="brush: js">function func(a = 55) { + arguments[0] = 99; // updating arguments[0] does not also update a + console.log(a); +} +func(10); // 10</pre> + +<p>e</p> + +<pre class="brush: js">function func(a = 55) { + a = 99; // updating a does not also update arguments[0] + console.log(arguments[0]); +} +func(10); // 10 +</pre> + +<p>e</p> + +<pre class="brush: js">function func(a = 55) { + console.log(arguments[0]); +} +func(); // undefined</pre> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definizione iniziale. Impelementata in JavaScript 1.1</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-10.6', 'Arguments Object')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div class="hidden">La tavola delle compatibilità in questa pagina è generata da dati strutturati. Se volete contribuire ai dati, per favore visitate <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e mandateci una pull-request-</div> + +<p>{{Compat("javascript.functions.arguments")}}</p> + +<h2 id="Si_guardi_anche">Si guardi anche</h2> + +<ul> + <li>{{jsxref("Function")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/functions_and_function_scope/arrow_functions/index.html b/files/it/web/javascript/reference/functions_and_function_scope/arrow_functions/index.html new file mode 100644 index 0000000000..2dd258966d --- /dev/null +++ b/files/it/web/javascript/reference/functions_and_function_scope/arrow_functions/index.html @@ -0,0 +1,394 @@ +--- +title: Funzioni a freccia +slug: Web/JavaScript/Reference/Functions_and_function_scope/Arrow_functions +tags: + - ECMAScript6 + - Funzioni + - Intermediate + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Functions/Arrow_functions +--- +<div>{{jsSidebar("Functions")}}</div> + +<p>Una <strong>funzione a freccia </strong>ha una sintassi più compatta rispetto alla <a href="/it/docs/Web/JavaScript/Reference/Operators/function">notazione a funzione</a> e non associa i propri <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a></code>, <a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a>, <a href="/en-US/docs/Web/JavaScript/Reference/Operators/super">super</a> o <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new.target">new.target</a>. Le funzioni a freccia sono sempre <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/name">anonime</a>. Questa notazione è maggiormente indicata per le funzioni che non sono metodi, e non possono essere usate come costruttori.</p> + +<h2 id="Sintassi">Sintassi</h2> + +<h3 id="Sintassi_di_base">Sintassi di base</h3> + +<pre class="syntaxbox"><strong>(</strong><em>param1</em>, <em>param2</em>, …, <em>paramN</em><strong>) => {</strong> <em>statements</em> <strong>}</strong> +<strong>(</strong><em>param1</em>, <em>param2</em>, …, <em>paramN</em><strong>) =></strong> <em>expression</em> +// equivalente a: <strong>(</strong><em>param1</em>, <em>param2</em>, …, <em>paramN</em><strong>)</strong> => { return <em>expression</em>; } + +// Le Parentesi sono opzionali se è presente un solo parametro: +<em>(singleParam)</em> <strong>=> {</strong> <em>statements</em> <strong>}</strong> +<em>singleParam</em> <strong>=></strong> { <em>statements }</em> + +// Una funzione senza parametri richiede comunque le parentesi: +<strong>() => {</strong> <em>statements</em> <strong>} +</strong>() => <em>expression</em> // equivalente a: () => { return <em>expression</em>; } +</pre> + +<h3 id="Sintassi_avanzata">Sintassi avanzata</h3> + +<pre class="syntaxbox">// Il body tra parentesi indica la restituzione di un oggetto: +<em>params</em> => ({<em>foo: bar</em>}) + +// Sono supportati <a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">...rest</a> e <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters">i parametri di default</a> +(<em>param1</em>, <em>param2</em>, <strong>...rest</strong>) => { <em>statements</em> } +(<em>param1</em> <strong>= defaultValue1</strong>, <em>param2</em>, …, paramN <strong>= defaultValueN</strong>) => { <em>statements</em> } + +// Si può anche <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">destrutturare</a> all'interno della lista dei parametri +var f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c; +f(); // 6 +</pre> + +<p>Esempi dettagliati di sintassi sono disponibili <a href="http://wiki.ecmascript.org/doku.php?id=harmony:arrow_function_syntax">qui</a>.</p> + +<h2 id="Descrizione">Descrizione</h2> + +<p>Vedi anche <a href="https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/">"ES6 In Depth: Arrow functions" su hacks.mozilla.org</a>.</p> + +<p>L'introduzione delle funzioni a freccia è stata influenzata da due fattori: sintassi più compatta e la non associazione di <code>this</code>.</p> + +<h3 id="Funzioni_più_corte">Funzioni più corte</h3> + +<p>In alcuni pattern, è meglio avere funzioni più corte. Per comparazione:</p> + +<pre class="brush: js">var materials = [ + "Hydrogen", + "Helium", + "Lithium", + "Beryllium" +]; + +materials.map(function(material) { + return material.length; +}); <code>// [8, 6, 7, 9] +</code> +materials.map((material) => { +<code> return material.length; +}); // [8, 6, 7, 9] +</code> +<code>materials.map(material => material.length); // [8, 6, 7, 9]</code></pre> + +<h3 id="Mancato_binding_di_this">Mancato binding di <code>this</code></h3> + +<p>Prima delle funzioni a freccia, ogni nuova funzione definiva il proprio <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a></code> (un nuovo oggetto nel caso di un costruttore, undefined se una funzione viene chiamata in <a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a>, l'oggetto di contesto se la funzione viene chiamata come "metodo", etc.). Questo è risultato fastidioso in uno stile di programmazione orientato agli oggetti.</p> + +<pre class="brush: js">function Person() { + // The Person() constructor defines `this` as an instance of itself. + this.age = 0; + + setInterval(function growUp() { + // In non-strict mode, the growUp() function defines `this` + // as the global object, which is different from the `this` + // defined by the Person() constructor. + this.age++; + }, 1000); +} + +var p = new Person();</pre> + +<p>In ECMAScript 3/5, questo problema veniva aggirato assegnando il valore this a una variabile.</p> + +<pre class="brush: js">function Person() { + var that = this; + that.age = 0; + + setInterval(function growUp() { + // The callback refers to the `that` variable of which + // the value is the expected object. + that.age++; + }, 1000); +}</pre> + +<p>In alternativa, poteva essere usato <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">Function.prototype.bind</a> per assegnare il valore corretto di this da usare nella funzione <code>growUp()</code>.</p> + +<p>Una funziona a freccia invece non crea il proprio <code>this</code>, e quindi <code>this</code> mantiene il significato che aveva all'interno dello scope genitore. Perciò il codice seguente funziona come ci si aspetta.</p> + +<pre class="brush: js">function Person(){ + this.age = 0; + + setInterval(() => { + this.age++; // |this| properly refers to the person object + }, 1000); +} + +var p = new Person();</pre> + +<h4 id="Relazione_con_strict_mode">Relazione con strict mode</h4> + +<p>Poiché <code>this</code> è lessicale, le regole di <a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a> relative a <code>this</code> sono semplicemente ignorate.</p> + +<pre class="brush: js">var f = () => {'use strict'; return this}; +f() === window; // o l'oggetto globale</pre> + +<p>Il resto delle regole si applica normalmente.</p> + +<h4 id="Invocazione_attraverso_call_or_apply">Invocazione attraverso call or apply</h4> + +<p>Poiché <code>this</code><em> </em>non viene assegnato nelle funzioni a freccia, i metodi <code>call()</code><em> </em>o <code>apply()</code> possono passare solo come argomenti; <code>this</code> viene ignorato:</p> + +<pre class="brush: js">var adder = { + base : 1, + + add : function(a) { + var f = v => v + this.base; + return f(a); + }, + + addThruCall: function(a) { + var f = v => v + this.base; + var b = { + base : 2 + }; + + return f.call(b, a); + } +}; + +console.log(adder.add(1)); // This would log to 2 +console.log(adder.addThruCall(1)); // This would log to 2 still</pre> + +<h3 id="Mancato_binding_di_arguments">Mancato binding di <code>arguments</code></h3> + +<p>Le funzioni a freccia non definiscono il proprio <code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a>. </code>Perciò, <code>arguments</code> è semplicemente una reference alla variabile nello scope genitore.</p> + +<pre class="brush: js">var arguments = 42; +var arr = () => arguments; + +arr(); // 42 + +function foo() { + var f = (i) => arguments[0]+i; // <em>foo</em>'s implicit arguments binding + return f(2); +} + +foo(1); // 3</pre> + +<p>Le funzioni a freccia non hanno il proprio oggetto <code>arguments</code>, ma in molti casi i parametri <a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest</a> rappresentano una valida alternativa:</p> + +<pre class="brush: js">function foo() { + var f = (...args) => args[0]; + return f(2); +} + +foo(1); // 2</pre> + +<h3 id="Funzioni_a_freccia_come_metodi">Funzioni a freccia come metodi</h3> + +<p>Come già citato, le funzioni a freccia sono sconsigliate come metodi. Vediamo cosa succede quando proviamo a usarle: </p> + +<pre class="brush: js">'use strict'; +var obj = { + i: 10, + b: () => console.log(this.i, this), + c: function() { + console.log( this.i, this) + } +} +obj.b(); // prints undefined, Window +obj.c(); // prints 10, Object {...}</pre> + +<p>Le funzioni a freccia non definiscono ("bind") il proprio <code>this</code>. un altro esempio usando {{jsxref("Object.defineProperty()")}}:</p> + +<pre class="brush: js">'use strict'; +var obj = { + a: 10 +}; + +Object.defineProperty(obj, "b", { + get: () => { + console.log(this.a, typeof this.a, this); + return this.a+10; // represents global object 'Window', therefore 'this.a' returns 'undefined' + } +}); +</pre> + +<h3 id="Uso_dell'operatore_new">Uso dell'operatore <code>new</code> </h3> + +<p>Le funzioni a freccia non possono essere usate come costruttori, ed emetteranno un errore se usate con <code>new</code>.</p> + +<h3 id="Uso_di_yield">Uso di <code>yield</code> </h3> + +<p>La keyword <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/yield">yield</a></code> non deve essere usata nel body di una funzione a freccia (eccetto quando permesso in eventuali funzioni al loro interno). Conseguentemente, le funzioni a freccia non possono essere usate come generatori.</p> + +<h2 id="Body_della_funzione">Body della funzione</h2> + +<p>Le funzioni a freccia possono avere un "body conciso" o l'usuale "blocco body".</p> + +<p>Nel primo caso è necessaria solo un'espressione, e il return è implicito. Nel secondo caso, devi usare esplicitamente <code>return</code>.</p> + +<pre class="brush: js">var func = x => x * x; // concise syntax, implied "return" +var func = (x, y) => { return x + y; }; // with block body, explicit "return" needed +</pre> + +<h2 id="Restituire_object_literals">Restituire object literals</h2> + +<p>Tieni a mente che restituire oggetti letterali usando la sintassi concisa <code>params => {object:literal}</code> non funzionerà:</p> + +<pre class="brush: js">var func = () => { foo: 1 }; // Calling func() returns undefined! +var func = () => { foo: function() {} }; // SyntaxError: function statement requires a name</pre> + +<p>Questo perché il codice all'interno delle parentesi graffe ({}) è processato come una sequenza di statement (i.e. <code>foo</code> è trattato come un label, non come una key di un oggetto).</p> + +<p>Tuttavia, è sufficente racchiudere l'oggetto tra parentesi tonde:</p> + +<pre class="brush: js">var func = () => ({ foo: 1 });</pre> + +<h2 id="Newline">Newline</h2> + +<p>Le funzioni a freccia non possono contenere un newline tra i parametri e la freccia.</p> + +<pre class="brush: js">var func = () + => 1; // SyntaxError: expected expression, got '=>'</pre> + +<h2 id="Ordine_di_parsing">Ordine di parsing</h2> + +<p>La freccia in una funziona a freccia non è un'operatore, ma le funzioni a freccia hanno delle regole di parsing specifiche che interagiscono differentemente con <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">la precedenza degli operatori</a>, rispetto alle funzioni normali.</p> + +<pre class="brush: js">let callback; + +callback = callback || function() {}; // ok +callback = callback || () => {}; // SyntaxError: invalid arrow-function arguments +callback = callback || (() => {}); // ok +</pre> + +<h2 id="Altri_esempi">Altri esempi</h2> + +<pre class="brush: js">// Una funzione a freccie vuota restituisce undefined +let empty = () => {}; + +(() => "foobar")() // <a href="/en-US/docs/Glossary/IIFE">IIFE</a>, restituisce "foobar" + +var simple = a => a > 15 ? 15 : a; +simple(16); // 15 +simple(10); // 10 + +let max = (a, b) => a > b ? a : b; + +// Più semplice gestire filtering, mapping, ... di array + +var arr = [5, 6, 13, 0, 1, 18, 23]; +var sum = arr.reduce((a, b) => a + b); // 66 +var even = arr.filter(v => v % 2 == 0); // [6, 0, 18] +var double = arr.map(v => v * 2); // [10, 12, 26, 0, 2, 36, 46] + +// Le catene di promise sono più concise +promise.then(a => { + // ... +}).then(b => { + // ... +}); + +// le funzioni a freccia senza parametri sono più semplici da visualizzare +setTimeout( _ => { + console.log("I happen sooner"); + setTimeout( _ => { + // deeper code + console.log("I happen later"); + }, 1); +}, 1); +</pre> + +<p> </p> + +<p> </p> + +<p> </p> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-arrow-function-definitions', 'Arrow Function Definitions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-arrow-function-definitions', 'Arrow Function Definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_dei_Browser">Compatibilità dei Browser </h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Edge</th> + <th>IE</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(45.0)}}</td> + <td>{{CompatGeckoDesktop("22.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td> + <p>{{CompatNo}}</p> + </td> + <td>{{CompatOpera(32)}}</td> + <td>{{CompatSafari(10.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(45.0)}}</td> + <td>{{CompatGeckoMobile("22.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatSafari(10.0)}}</td> + <td>{{CompatChrome(45.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Note_specifiche_per_Firefox">Note specifiche per Firefox</h2> + +<ul> + <li>L'implementazione iniziale delle funzioni a freccia in Firefox le rendeva automaticamente strict. Questo è cambiato da <a href="/en-US/docs/Mozilla/Firefox/Releases/24">Firefox 24</a>. L'uso di <code>"use strict";</code> è ora obbligatorio.</li> + <li>Le funzioni a freccia sono semanticamente differenti dalle non-standard {{jsxref("Operators/Expression_Closures", "expression closures", "", 1)}} aggiunte in <a href="/en-US/Firefox/Releases/3">Firefox 3</a> (details: <a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.8">JavaScript 1.8</a>), perché {{jsxref("Operators/Expression_Closures", "expression closures", "", 1)}} non assegnano <code>this</code> in modo lessicale.</li> + <li>Fino a <a href="/en-US/Firefox/Releases/39">Firefox 39</a>, un newline (<code>\n</code>) era erroneamente accettato dopo i parametri della funzione. Questo è stato risolto in conformità alle specifiche ES6 e codice come <code>() \n => {}</code> emetterà un {{jsxref("SyntaxError")}} in questa versione e successive.</li> +</ul> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li><a href="https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/">"ES6 In Depth: Arrow functions" on hacks.mozilla.org</a></li> +</ul> diff --git a/files/it/web/javascript/reference/functions_and_function_scope/get/index.html b/files/it/web/javascript/reference/functions_and_function_scope/get/index.html new file mode 100644 index 0000000000..0ed76cf469 --- /dev/null +++ b/files/it/web/javascript/reference/functions_and_function_scope/get/index.html @@ -0,0 +1,154 @@ +--- +title: getter +slug: Web/JavaScript/Reference/Functions_and_function_scope/get +translation_of: Web/JavaScript/Reference/Functions/get +--- +<div>{{jsSidebar("Functions")}}</div> + +<p>La sintassi <strong><code>get</code></strong> associa una proprietà dell'oggetto a una funzione che verrà chiamata quando la proprietà verrà richiesta.</p> + +<div>{{EmbedInteractiveExample("pages/js/functions-getter.html")}}</div> + +<p class="hidden">La fonte per questo esempio interattivo è memorizzata in un repository GitHub. Se desideri contribuire ai progetti interattivi di esempio, puoi clonare https://github.com/mdn/interactive-examples e inviarci una richiesta di pull.</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox">{get <em>prop</em>() { ... } } +{get <em>[expression]</em>() { ... } }</pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt><code>prop</code></dt> + <dd>Il nome della proprietà da associare alla funzione specificata.</dd> + <dt>espressione</dt> + <dd>A partire da ECMAScript 2015, è anche possibile utilizzare espressioni per un nome di proprietà calcolato per associarsi alla funzione specificata.</dd> +</dl> + +<h2 id="Descrizione">Descrizione</h2> + +<p>A volte è preferibile consentire l'accesso a una proprietà che restituisce un valore calcolato in modo dinamico, oppure è possibile che si desideri riflettere lo stato di una variabile interna senza richiedere l'uso di chiamate esplicite al metodo. In JavaScript, questo può essere realizzato con l'uso di un <em>getter</em>. Non è possibile avere simultaneamente un getter legato a una proprietà e avere quella proprietà contenuta in un valore, anche se è possibile usare un getter e un setter insieme per creare un tipo di pseudo-proprietà.</p> + +<p>Tieni presente quanto segue quando lavori con la sintassi <code>get</code>:</p> + +<div> +<ul> + <li>Può avere un identificatore che è un numero o una stringa;</li> + <li>Deve avere esattamente zero parametri (vedi <a href="http://whereswalden.com/2010/08/22/incompatible-es5-change-literal-getter-and-setter-functions-must-now-have-exactly-zero-or-one-arguments/">Modifica ES5 non compatibile: le funzioni getter e setter letterali devono ora avere esattamente zero o un argomento</a> per maggiori informazioni);</li> + <li>Non deve apparire in un oggetto letterale con un altro <code>get</code> o con un inserimento dati per la stessa proprietà (<code>{ get x() { }, get x() { } }</code> e <code>{ x: ..., get x() { } }</code> sono vietati).</li> +</ul> +</div> + +<p>Un getter può essere rimosso usando l'operatore <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete" title="en/Core_JavaScript_1.5_Reference/Operators/Special_Operators/delete_Operator">delete</a></code></p> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Definizione_di_un_getter_sui_nuovi_oggetti_negli_inizializzatori_di_oggetti">Definizione di un getter sui nuovi oggetti negli inizializzatori di oggetti</h3> + +<p>Questo creerà una pseudo-proprietà <code>latest</code> più recente per object <code>obj</code>, che restituirà l'ultimo elemento dell'array in <code>log</code>.</p> + +<pre class="brush: js">var obj = { + log: ['example','test'], + get latest() { + if (this.log.length == 0) return undefined; + return this.log[this.log.length - 1]; + } +} +console.log(obj.latest); // "test". +</pre> + +<p>Si noti che il tentativo di assegnare un valore a <code>latest</code> non lo cambierà.</p> + +<h3 id="Cancellare_un_getter_usando_l'operatore_delete">Cancellare un getter usando l'operatore <code>delete</code></h3> + +<p>Se vuoi rimuovere il getter, puoi semplicemente usare <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete">delete</a></code> :</p> + +<pre class="brush: js">delete obj.latest; +</pre> + +<h3 id="Definire_un_getter_su_un_oggetto_esistente_usando_defineProperty">Definire un getter su un oggetto esistente usando <code>defineProperty</code></h3> + +<p>Per aggiungere un getter a un oggetto esistente in un secondo momento, usa {{jsxref("Object.defineProperty()")}}.</p> + +<pre class="brush: js">var o = {a: 0}; + +Object.defineProperty(o, 'b', { get: function() { return this.a + 1; } }); + +console.log(o.b) // Runs the getter, which yields a + 1 (which is 1)</pre> + +<h3 id="Utilizzando_un_nome_di_proprietà_calcolato">Utilizzando un nome di proprietà calcolato</h3> + +<pre class="brush: js">var expr = 'foo'; + +var obj = { + get [expr]() { return 'bar'; } +}; + +console.log(obj.foo); // "bar"</pre> + +<h3 id="Smart_self-overwriting_lazy_getters">Smart / self-overwriting / lazy getters</h3> + +<p>I getter ti danno un modo per definire una proprietà di un oggetto, ma non calcolano il valore della proprietà finché non avviene l'accesso. Un getter rinvia il costo del calcolo del valore fino a quando il valore è necessario e, se non è mai necessario, non si paga mai il costo.</p> + +<p>Un'ulteriore tecnica di ottimizzazione per lazificare o ritardare il calcolo di un valore di una proprietà e memorizzarla nella cache per un accesso successivo sono <strong>smart o <a href="https://en.wikipedia.org/wiki/Memoization">memoized</a> getters</strong>. Il valore viene calcolato la prima volta che viene chiamato il getter e viene quindi memorizzato nella cache in modo che gli accessi successivi restituiscano il valore memorizzato nella cache senza ricalcolarlo. Questo è utile nelle seguenti situazioni:</p> + +<ul> + <li>Se il calcolo di un valore di una proprietà è costoso (richiede molta RAM o tempo di CPU, genera thread di lavoro, recupera file remoto, ecc.).</li> + <li>Se il valore non è necessario solo ora. Sarà usato più tardi, o in alcuni casi non è usato affatto.</li> + <li>Se viene utilizzato, sarà accessibile più volte e non è necessario ricalcolare il valore che non verrà mai modificato o non dovrebbe essere ricalcolato.</li> +</ul> + +<p>Ciò significa che non si dovrebbe usare un getter pigro per una proprietà il cui valore si prevede possa cambiare, poiché il getter non ricalcola il valore.</p> + +<p>Nell'esempio seguente, l'oggetto ha un getter come proprietà propria. Quando si ottiene la proprietà, la proprietà viene rimossa dall'oggetto e riaggiunta, ma questa volta implicitamente come proprietà dei dati. Alla fine il valore viene restituito.</p> + +<pre class="brush: js">get notifier() { + delete this.notifier; + return this.notifier = document.getElementById('bookmarked-notification-anchor'); +},</pre> + +<p>Per il codice di Firefox, vedere anche il modulo del codice XPCOMUtils.jsm, che definisce la funzione <code><a href="/en-US/docs/Mozilla/JavaScript_code_modules/XPCOMUtils.jsm#defineLazyGetter()">defineLazyGetter()</a></code>.</p> + +<h2 id="Specificazioni">Specificazioni</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.1.5', 'Object Initializer')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Definizione iniziale.</td> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-method-definitions', 'Method definitions')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Aggiunti nomi di proprietà calcolate.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_il_browser">Compatibilità con il browser</h2> + + + +<p>{{Compat("javascript.functions.get")}}</p> + +<h2 id="Guarda_anche">Guarda anche</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">setter</a></li> + <li>{{jsxref("Operators/delete", "delete")}}</li> + <li>{{jsxref("Object.defineProperty()")}}</li> + <li>{{jsxref("Object.defineGetter", "__defineGetter__")}}</li> + <li>{{jsxref("Object.defineSetter", "__defineSetter__")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">Defining Getters and Setters</a> in JavaScript Guide</li> +</ul> diff --git a/files/it/web/javascript/reference/functions_and_function_scope/index.html b/files/it/web/javascript/reference/functions_and_function_scope/index.html new file mode 100644 index 0000000000..8a5255282c --- /dev/null +++ b/files/it/web/javascript/reference/functions_and_function_scope/index.html @@ -0,0 +1,617 @@ +--- +title: Funzioni +slug: Web/JavaScript/Reference/Functions_and_function_scope +translation_of: Web/JavaScript/Reference/Functions +--- +<div>{{jsSidebar("Functions")}}</div> + +<p>Parlando in termini generici, una funzione è un "sottopogramma" che può essere <em>chiamato </em>da un codice esterno (o interno nel caso di ricorsione) alla funzione stessa. Come il programma stesso, una funzione è composta da una sequenza di istruzioni chiamata <em>corpo della funzione</em>. Ad una funzione possono essere <em>passati</em> valori, e la funzione <em>restituisce</em> un valore.</p> + +<p>In JavaScript, le funzioni sono oggetti di prima classe, perchè sono dotate di proprietà e di metodi, proprio come qualsiasi altro oggetto. Ciò che le distingue dagli altri oggetti è la possibilità di essere chiamate ( invocate ). Le funzioni sono oggetti di tipo <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function">Function</a></code>.</p> + +<p>Per maggiori esempi e spiegazioni, vedere anche <a href="/en-US/docs/Web/JavaScript/Guide/Functions">JavaScript la guida sulle funzioni</a>.</p> + +<h2 id="Descrizione">Descrizione</h2> + +<p>Ogni funzione in JavaScript è un oggetto di tipo <code>Function</code>. Vedi la pagina <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" title="The Function constructor creates a new Function object. In JavaScript every function is actually a Function object."><code>Function</code></a> for informazioni su proprietà e metodi dell'oggetto <code>Function</code>.</p> + +<p>Le funzioni non sono come le procedure. Una funzione restituisce sempre un valore, mentre una procedura può anche non restituire alcun valore.</p> + +<p>Per restituire un valore specifico differente da quello di default, una fuzione deve avere un istruzione <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/return">return</a></code> che specifica il valore di ritorno. Una funzione senza un istruzione di ritorno restituirà il valore di default. Nel caso di un <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor">costruttore</a> invocato con la parola chiave <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/new">new</a></code>, il valore di default è il valore del suo parametro <code>this</code>. Per tutte le altre funzioni, il valore di ritorno di default è <code>undefined</code>.</p> + +<p>I parametri di una chiamata di funzione sono gli <em>argomenti</em> della funzione. Gli argomenti sono passati alla funzione <em>per valore</em>. Se la funzione cambia il valore di un argomento, questo cambiamento non si riflette globalmente o nella funzione chiamante. Sebbene anche i riferimenti a oggetti siano valori, essi sono speciali: se una funzione cambia le proprietà di un oggetto a cui riferisce, quel cambiamento è visibile anche al di fuori della funzione, come dimostrato nel seguente esempio:</p> + +<pre class="brush: js">/* Dichiarazione della funzione 'myFunc' */ +function myFunc(theObject) { + theObject.brand = "Toyota"; + } + + /* + * Dichiarazione della variabile 'mycar'; + * creazione e inizializzazione di un nuovo Object; + * associazione alla riferimento 'mycar' + */ + var mycar = { + brand: "Honda", + model: "Accord", + year: 1998 + }; + + /* Logs 'Honda' */ + console.log(mycar.brand); + + /* Passaggio del riferimento dell'oggetto alla funzione */ + myFunc(mycar); + + /* + * Logs 'Toyota' come il valore della proprietà 'brand' + * dell'oggetto, come è stato cambiato dalla funzione. + */ + console.log(mycar.brand); +</pre> + +<p>NB: l'oggetto <em>console</em> non è un oggetto standard. Non usatelo in un sito web, poichè potrebbe non funzionare correttamente. Per verificare il funzionamento dell'esempio precedente, usate, piuttosto:</p> + +<p> window.alert(mycar.brand);</p> + +<p>La <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">parola chiave <code>this</code></a> non fa riferimento alla funzione attualmente in esecuzione, per questo motivo si deve far riferimento ad oggetti <code>Function</code> per nome, anche quando all'interno del corpo della funzione stessa.</p> + +<h2 id="Definizione_di_funzioni">Definizione di funzioni</h2> + +<p>Ci sono diversi modi per definire le funzioni:</p> + +<h3 id="La_dichiarazione_di_funzione_(istruzione_function)">La dichiarazione di funzione (istruzione <code>function</code>)</h3> + +<p>C'è una speciale sintassi per la dichiarazione di funzioni (per dettagli guarda <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function">function statement</a>):</p> + +<pre class="syntaxbox">function <em>name</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { + <em>statements</em> +} +</pre> + +<dl> + <dt><code>name</code></dt> + <dd>Il nome della funzione</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>Il nome di un argomento da passare alla funzione. Una funzione può avere fino a 255 argomenti.</dd> +</dl> + +<dl> + <dt><code>statements</code></dt> + <dd>Le istruzioni comprese nel corpo della funzione.</dd> +</dl> + +<h3 id="L'espressione_di_funzione_(espressione_function)">L'espressione di funzione (espressione <code>function</code>)</h3> + +<p>Una espressione di funzione è simile ed ha la stessa sintassi della dichiarazione di funzione (per dettagli guarda <a href="/en-US/docs/Web/JavaScript/Reference/Operators/function">function expression</a>):</p> + +<pre class="syntaxbox">function [<em>name</em>]([<em>param</em>] [, <em>param</em>] [..., <em>param</em>]) { + <em>statements</em> +} +</pre> + +<dl> + <dt><code>name</code></dt> + <dd>Il nome della funzione. Può essere omesso, in qual caso la funzione è nota come funzione anonima.</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>Il nome di un argomento da passare alla funzione. Una funzione può avere fino a 255 argomenti.</dd> + <dt><code>statements</code></dt> + <dd>Le istruzioni comprese nel corpo della funzione.</dd> +</dl> + +<h3 id="La_dichiarazione_di_funzione_generatrice_(espressione_function*)">La dichiarazione di funzione generatrice (espressione <code>function*</code>)</h3> + +<div class="note"> +<p><strong>Note:</strong> Le funzioni generatrici sono un tecnologia sperimentale, parte della proposta di specifica ECMAScript 6, e non sono ancora ampiamente supportate dai browsers.</p> +</div> + +<p>C'è una sintassi speciale per le funzioni generatrici (per dettagli vedi <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function*" title="The function* declaration (function keyword followed by an asterisk) defines a generator function, which returns a Generator object."><code>function* statement</code></a> ):</p> + +<pre class="syntaxbox">function* <em>name</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { + <em>statements</em> +} +</pre> + +<dl> + <dt><code>name</code></dt> + <dd>Nome della funzione.</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>Nome dell'argomento da passare alla funzione. Una funzione può avere fino a 255 agromenti.</dd> +</dl> + +<dl> + <dt><code>statements</code></dt> + <dd>Le istruzioni comprese nel corpo della funzione.</dd> +</dl> + +<h3 id="L'espressione_di_funzione_generatrice_(espressione_function*)">L'espressione di funzione generatrice (espressione <code>function*</code>)</h3> + +<div class="note"> +<p><strong>Note:</strong> Le funzioni generatrici sono una tecnologia sperimentale<em>,</em> parte della proposta di specifica ECMAScript 6, e non sono ancora ampiamente supportamente dai browsers.</p> +</div> + +<p>Una espressione di funzione generatrice è similare ed ha la stessa sintassi di una dichiarazione di funzione generatrice (per dettagli vedi <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/function*" title="The function* keyword can be used to define a generator function inside an expression."><code>function* expression</code></a> ):</p> + +<pre class="syntaxbox">function* [<em>name</em>]([<em>param</em>] [, <em>param</em>] [..., <em>param</em>]) { + <em>statements</em> +} +</pre> + +<dl> + <dt><code>name</code></dt> + <dd>Nome della funzione. Può essere omesso, nel qual caso la funzione è nota come funzione anonima.</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd> + <div>Nome dell'argomento da passare alla funzione. Una funzione può avere fino a 255 agromenti.</div> + </dd> + <dt><code>statements</code></dt> + <dd>Le istruzioni comprese nel corpo della funzione.</dd> +</dl> + +<h3 id="L'espressione_di_funzione_a_freccia_(>)">L'espressione di funzione a freccia (=>)</h3> + +<div class="note"> +<p><strong>Note:</strong> L'espressione di funzione a freccia sono una tecnologia sperimentare<em>, </em>parte della proposta di specifica ECMAScript 6, e non sono ancora ampiamente supportate dai browsers.</p> +</div> + +<p>Un' espressione di funzione a freccia ha una sintassi ridotta e lessicalmnete associa il proprio valore this (per dettagli vedere <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">arrow functions</a> ):</p> + +<pre class="syntaxbox">([param] [, param]) => { + statements +} + +param => expression +</pre> + +<dl> + <dt><code>param</code></dt> + <dd>Il nome di un parametro. È necessario indicare l'assenza di parametri con <code>()</code>. Le parentesi non sono richieste nel caso in cui ci sia solo un parametro (come <code>foo => 1</code>).</dd> + <dt><code>statements or expression</code></dt> + <dd>Molteplici istruzioni devono essere racchiuse tra parentesi. Una singola espressione non necessita di parantesi. <em>expression</em> è anche l'implicito valore restituito dalla funzione.</dd> +</dl> + +<h3 id="Il_costruttore_Function">Il costruttore <code>Function</code></h3> + +<div class="note"> +<p><strong>Nota:</strong> l'utilizzo del costruttore <code>Function</code> per creare funzioni non è raccomandato, poichè richiede che il corpo della funzione sia scritto come stringa, fatto che può comportare una mancata ottimizzazione da parte di alcuni motori javascript e causare altri problemi.</p> +</div> + +<p>Come tutti gli altri oggetti, un oggetto <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" title="The Function constructor creates a new Function object. In JavaScript every function is actually a Function object."><code>Function</code></a> può essere creato utilizzando l'operatore <code>new</code>:</p> + +<pre class="syntaxbox">new Function (<em>arg1</em>, <em>arg2</em>, ... <em>argN</em>, <em>functionBody</em>) +</pre> + +<dl> + <dt><code>arg1, arg2, ... arg<em>N</em></code></dt> + <dd>Zero o più nomi da usare come nomi formali di argomenti. Ciascun nome deve essere rappresentato da una stringa testuale che sia conforme alle norme che regolano la definizione di identificatori JavaScript validi, oppure da una lista di stringhe testuali, separate da una virgola; per esempio: "<code>x</code>", "<code>theValue</code>", oppure "<code>a,b</code>".</dd> +</dl> + +<dl> + <dt><code>functionBody</code></dt> + <dd>Una stringa testuale che contenga le istruzioni Javascript comprese nella definizione della funzione.</dd> +</dl> + +<p>Invocare il costruttore <code>Function</code> come funzione ( senza utilizzare l'operatore <code>new</code> ) ha lo stesso effetto di quando lo si invoca come costruttore.</p> + +<h3 id="Il_costruttore_GeneratorFunction">Il costruttore <code>GeneratorFunction</code></h3> + +<div class="note"> +<p><strong>Nota:</strong> le espressioni di funzione a freccia ( arrow function expression ) sono una <em>tecnologia sperimentale,</em> parte della proposta ECMAScript 6, e non sono ancora completamente supportate dai browser.</p> +</div> + +<div class="note"> +<p><strong>Nota:</strong> il costruttore <code>GeneratorFunction</code> non è un oggetto globale, ma può essere ottenuto dall'istanza della funzione generatrice ( vedi <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/GeneratorFunction" title="The GeneratorFunction constructor creates a new generator function object. In JavaScript every generator function is actually a GeneratorFunction object."><code>GeneratorFunction</code></a> per maggiori dettagli ).</p> +</div> + +<div class="note"> +<p><strong>Nota:</strong> l'utilizzo del costruttore <code>GeneratorFunction</code> per creare funzioni non è raccomandato, poichè richiede che il corpo della funzione sia scritto come stringa, fatto che può comportare una mancata ottimizzazione da parte di alcuni motori javascript e causare altri problemi.</p> +</div> + +<p>Come tutti gli altri oggetti, un oggetto <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/GeneratorFunction" title="The GeneratorFunction constructor creates a new generator function object. In JavaScript every generator function is actually a GeneratorFunction object."><code>GeneratorFunction</code></a> può essere creato utilizzando l'operatore <code>new</code>:</p> + +<pre class="syntaxbox">new GeneratorFunction (<em>arg1</em>, <em>arg2</em>, ... <em>argN</em>, <em>functionBody</em>) +</pre> + +<dl> + <dt><code>arg1, arg2, ... arg<em>N</em></code></dt> + <dd>Zero o più nomi da usare come nomi formali di argomenti. Ciascun nome deve essere rappresentato da una stringa testuale che sia conforme alle norme che regolano la definizione di identificatori JavaScript validi, oppure da una lista di stringhe testuali, separate da una virgola; per esempio: "<code>x</code>", "<code>theValue</code>", oppure "<code>a,b</code>".</dd> +</dl> + +<dl> + <dt><code>functionBody</code></dt> + <dd>Una stringa testuale che contenga le istruzioni Javascript comprese nella definizione della funzione.</dd> +</dl> + +<p>Invocare il costruttore <code>Function</code> come funzione ( senza utilizzare l'operatore <code>new</code> ) ha lo stesso effetto di quando lo si invoca come costruttore.</p> + +<h2 id="I_parametri_di_una_funzione">I parametri di una funzione</h2> + +<div class="note"> +<p><strong>Nota:</strong> i parametri di default ed i parametri <em>rest</em> sono <em>tecnologie sperimentali</em><em>,</em> parte della proposta ECMAScript 6, e non sono ancora completamente supportati dai browser.</p> +</div> + +<h3 id="Parametri_di_default">Parametri di default</h3> + +<p>La sintassi per definire i valori di default dei parametri di una funzione permette di inizializzare i parametri formali con valori di default, sempre che non venga passato il valore <code>undefined</code> oppure non venga passato alcun valore. Per maggiori dettagli, vedi<a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters"> default parameters</a>.</p> + +<h3 id="I_parametri_Rest">I parametri <em>Rest</em></h3> + +<p>La sintassi per i parametri <em>rest</em> permette di rappresentare un indefinito numero di argomenti come un array. Per maggiori dettagli, vedi <a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest parameters</a>.</p> + +<h2 id="L'oggetto_arguments">L'oggetto <code>arguments</code></h2> + +<p>È possibile riferirsi agli argomenti di una funzione, all'interno della funzione, utilizzando l'oggetto <code>arguments</code>. Vedi <a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a>.</p> + +<ul> + <li><code><a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments">arguments</a></code>: un oggetto, strutturato come un array, contenente gli argomenti passati alla funzione in esecuzione.</li> + <li><code><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments/callee">arguments.callee</a></code> {{Deprecated_inline}}: la funzione in esecuzione.</li> + <li><code><a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments/caller">arguments.caller</a></code> {{Obsolete_inline}} : la funzione che ha invocato la funzione in esecuzione.</li> + <li><code><a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments/length">arguments.length</a></code>: il numero degli argomenti passati alla funzione.</li> +</ul> + +<h2 id="Definire_metodi">Definire metodi</h2> + +<h3 id="Funzioni_Getter_e_setter">Funzioni Getter e setter</h3> + +<p>È possibile definire metodi getter ( accessor method: metodi per l'accesso al valore di una variabile privata ) e metodi setter ( mutator method: metodi per la modifica del valore di una variabile privata ) per qulasiasi oggetto standard built-in o per qualsiasi oggetto definito dall'utente che supporti l'aggiunta di nuove proprietà. La sintassi da usare per la definizione di metodi getter e setter utilizza la sintassi per la definizione di valori letterali.</p> + +<dl> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">get</a></dt> + <dd> + <p>Lega ( bind ) una proprietà di un oggetto ad una funzione, che verrà invocata ogni volta in cui si cercherà di leggere il valore di quella proprietà.</p> + </dd> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">set</a></dt> + <dd>Lega ( bind ) una proprietà di un oggetto alla funzione da invocare ogni volta in cui si cercherà di modificare il valore di quella proprietà.</dd> +</dl> + +<h3 id="Sintassi_per_la_definizione_dei_metodi">Sintassi per la definizione dei metodi</h3> + +<div class="note"> +<p><strong>Nota:</strong> <em>le definizioni dei metodi </em>sono <em>tecnologie sperimentali</em><em>,</em> parte della proposta ECMAScript 6, e non sono ancora completamente supportate dai browser.</p> +</div> + +<p>A partire da ECMAScript 6, è possibile definire propri metodi usando una sintassi più breve, simile alla sintassi usata per i metodi getter e setter. Vedi <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">method definitions</a> per maggiori informazioni.</p> + +<pre class="brush: js">var obj = { + foo() {}, + bar() {} +};</pre> + +<h2 id="Il_costruttore_Function_vs._la_dichiarazione_di_funzione_vs._l'espressione_di_funzione"><code>Il costruttore</code> <code>Function</code> vs. la dichiarazione di funzione vs. l'espressione di funzione</h2> + +<p>Compara i seguenti esempi:</p> + +<p>Una funzione definita con la dichiarazione di funzione<code>:</code></p> + +<pre class="brush: js">function multiply(x, y) { + return x * y; +} +</pre> + +<p>Una <em>espressione di funzione</em> di una funzione anonima ( senza nome ), assegnata alla variabile <code>multiply:</code></p> + +<pre class="brush: js">var multiply = function(x, y) { + return x * y; +}; +</pre> + +<p>Una <em>espressione di funzione</em> di una funzione chiamata <code>func_name</code> , assegnata alla variabile <code>multiply:</code></p> + +<pre class="brush: js">var multiply = function func_name(x, y) { + return x * y; +}; +</pre> + +<h3 id="Differenze">Differenze</h3> + +<p>Tutti e tre gli esempi fanno più o meno la stessa cosa, con qualche piccola differenza:</p> + +<p>C'è una differenza tra il nome di una funzione e la variabile alla quale la funzione viene assegnata. Il nome di una funzione non può essere modificato, mentre la variabile alla quale viene assegnata la funzione può essere riassegnata. Il nome di una funzione può essere utilizzato solo all'interno del corpo della funzione. Tentare di utilizzarlo al di fuori del corpo della funzione genererà un errore ( oppure restituirà <code>undefined</code> se il nome della funzione era stato precedentemente dichiarato con un'istruzione <code>var </code>). Per esempio:</p> + +<pre class="brush: js">var y = function x() {}; +alert(x); // throws an error +</pre> + +<p>Il nome di una funzione appare anche quando la funzione viene serializzata usando il metodo <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/toString">toString applicato alla funzione</a>.</p> + +<p>Dall'altro lato, la variabile alla quale viene assegnata la funzione è limitata solo dal suo <em>scope</em>, la cui inclusione è garantita al momento della dichiarazione di funzione.</p> + +<p>Come si può vedere dal quarto esempio, il nome della funzione può essere diverso dal nome della variabile alla quale la funzione viene assegnata. I due nomi non hanno alcuna relazione tra loro. Una dichiarazione di funzione crea anche una variabile con lo stesso nome della funzione. Quindi, diversamente dalle funzioni definite attraverso un'espressione di funzione, le funzioni definite attraverso una dichiarazione di funzione offrono la possibilità di accedere ad esse attraverso il loro nome, almeno all'interno dello scope in cui erano state definite.</p> + +<p>Una funzione definita con il costruttore '<code>new Function'</code> non possiede un nome. Tuttavia, nel motore JavaScript <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a>, la forma serializzata della funzione mostra il nome "anonymous". Per esempio, il codice <code>alert(new Function())</code> restituisce:</p> + +<pre class="brush: js">function anonymous() { +} +</pre> + +<p>Poichè la funzione, in realtà, non ha un nome, <code>anonymous</code> non è una variabile alla quale si potrà accedere, all'interno della funzione. Per esempio, il seguente codice restituirebbe un errore:</p> + +<pre class="brush: js">var foo = new Function("alert(anonymous);"); +foo(); +</pre> + +<p>Diversamente da quanto accade con le funzioni definite con espressioni di funzione o con il costruttore <code>Function</code>, una funzione definita con una dichiarazione di funzione può essere usata prima della dichiarazione di funzione stessa. Per esempio:</p> + +<pre class="brush: js">foo(); // alerts FOO! +function foo() { + alert('FOO!'); +} +</pre> + +<p>Una funzione definita da un'espressione di funzione eredita lo <em>scope</em> corrente. Vale a dire, la funzione forma una chiusura. Dall'altro lato, una funzione definita dal costruttore <code>Function</code> non eredita alcuno <em>scope</em>, se non quello globale ( che eredita qualsiasi funzione ).</p> + +<p>Le funzioni definite con espressioni di funzione e dichiarazioni di funzione vengono analizzate ( parsed ) solo una volta, mentre quelle definite con il costruttore <code>Function</code> no. Vale a dire, la stringa testuale del corpo della funzione passata al costruttore <code>Function</code> deve essere analizzata ( parsed ) ogni volta in cui viene invocato il costruttore. Sebbene un'espressione di funzione crei ogni volta una chiusura, il corpo della funzione non viene rianalizzato ( reparsed ), così le espressioni di funzione sono ancora più veloci del "<code>new Function(...)</code>". Quindi, il costruttore <code>Function</code> dovrebbe, generalmente, essere evitato dove possibile.</p> + +<p>Occorre tenere presente, tuttavia, che le espressioni di funzione e le dichiarazioni di funzione annidate in una funzione generata dall'analisi ( parsing ) di una stringa del costruttore <code>Function non vengono analizzate ( </code>parsed ) continuamente. Per esempio:</p> + +<pre class="brush: js">var foo = (new Function("var bar = \'FOO!\';\nreturn(function() {\n\talert(bar);\n});"))(); +foo(); // The segment "function() {\n\talert(bar);\n}" of the function body string is not re-parsed.</pre> + +<p>Una dichiarazione di funzione è molto facilmente ( e spesso, anche non intenzionalmente ) convertita in un'espressione di funzione. Una dichiarazione di funzione cessa di essere tale quando:</p> + +<ul> + <li>diventa parte di un'espressione</li> + <li>non è più un "elemento sorgente" di una funzione o dello stesso script. Un "elemento sorgente" ( source element ) è un'istruzione non annidata, presente nello script o nel corpo della funzione:</li> +</ul> + +<pre class="brush: js">var x = 0; // source element +if (x == 0) { // source element + x = 10; // not a source element + function boo() {} // not a source element +} +function foo() { // source element + var y = 20; // source element + function bar() {} // source element + while (y == 10) { // source element + function blah() {} // not a source element + y++; // not a source element + } +} +</pre> + +<h3 id="Examples">Examples</h3> + +<pre class="brush: js">// function declaration +function foo() {} + +// function expression +(function bar() {}) + +// function expression +x = function hello() {} + + +if (x) { + // function expression + function world() {} +} + + +// function declaration +function a() { + // function declaration + function b() {} + if (0) { + // function expression + function c() {} + } +} +</pre> + +<h2 id="Definire_una_funzione_in_modo_condizionato">Definire una funzione in modo condizionato</h2> + +<p>Le funzioni possono essere definite in modo condizionato, utilizzando sia le istruzioni di funzione ( un'estensione prevista nello standard <a href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">ECMA-262 Edition 3</a> ), sia il costruttore <code>Function</code>. Da notare, però, che le <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=609832"> istruzioni di funzione non sono più accettate in ES5 </a><span id="summary_alias_container"><span id="short_desc_nonedit_display">strict mode</span></span>. Inoltre, questa funzionalità non funziona bene attraverso più browser, quindi sarebbe meglio non farci affidamento.</p> + +<p>Nello script seguente, la funzione <code>zero</code> non verrà mai definita e non potrà mai essere invocata, visto che '<code>if (0)</code>' restituisce sempre false:</p> + +<pre class="brush: js">if (0) { + function zero() { + document.writeln("This is zero."); + } +} +</pre> + +<p>Se la condizione diventasse '<code>if (1)</code>', la funzione <code>zero</code> verrebbe definita.</p> + +<p>Nota: sebbene questo tipo di funzione sembri una dichiarazione di funzione, in realtà siamo di fronte ad una espressione ( o statement, o istruzione ), poichè la dichiarazione è annidata all'interno di un'altra istruzione. Vedi le differenze tra dichiarazioni di funzione ed espressioni di funzione.</p> + +<p>Nota: alcuni motori JavaScript, eslcuso <a href="/en-US/docs/SpiderMonkey">SpiderMonkey</a>, trattano, non correttamente, qualsiasi espressione di funzione in modo da assegnare loro un nome, al momento della definizione. Questo comporterebbe che la funzione <code>zero</code> sarebbe comunque definita, anche nell'eventualità che la condizione <code>if restituisse </code>sempre false. Un modo più sicuro per definire le funzioni in modo condizionato è di definirle come funzioni anonime ed assegnarle, poi, ad una variabile:</p> + +<pre class="brush: js">if (0) { + var zero = function() { + document.writeln("This is zero."); + } +} +</pre> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Restituire_un_numero_formattato">Restituire un numero formattato</h3> + +<p>La seguente funzione restituisce ( return ) una stringa contenente la rappresentazione formattata di un numero, completato ( padded ) con degli zero iniziali.</p> + +<pre class="brush: js">// This function returns a string padded with leading zeros +function padZeros(num, totalLen) { + var numStr = num.toString(); // Initialize return value as string + var numZeros = totalLen - numStr.length; // Calculate no. of zeros + for (var i = 1; i <= numZeros; i++) { + numStr = "0" + numStr; + } + return numStr; +} +</pre> + +<p>Queste istruzioni invocano la funzione padZeros.</p> + +<pre class="brush: js">var result; +result = padZeros(42,4); // returns "0042" +result = padZeros(42,2); // returns "42" +result = padZeros(5,4); // returns "0005" +</pre> + +<h3 id="Determinare_l'esistenza_di_una_funzione">Determinare l'esistenza di una funzione</h3> + +<p>È possibile determinare se una funzione esiste, utilizzando l'operatore <code>typeof</code>. Nell'esempio seguente, viene eseguito un test per determinare se l'oggetto <code>window</code> ha una proprietà, che sia una funzione, chiamata <code>noFunc</code>. Se così, la funzione verrà utilizzata; in caso contrario, verrà eseguita una qualsiasi altra azione.</p> + +<pre class="brush: js"> if ('function' == typeof window.noFunc) { + // use noFunc() + } else { + // do something else + } +</pre> + +<p>Da notare che nel test <code>if</code> viene usato un riferimento a <code>noFunc</code> — senza usare le parentesi "()" dopo il nome della funzione: in questo modo, la funzione non viene invocata.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>ECMAScript 1st Edition.</td> + <td>Standard</td> + <td>Initial definition. Implemented in JavaScript 1.0</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-13', 'Function Definition')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-function-definitions', 'Function definitions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>New: Arrow functions, Generator functions, default parameters, rest parameters</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#', 'function*')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-arrow-function-definitions', 'Arrow Function Definitions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Generator function</td> + <td>39</td> + <td>{{CompatGeckoDesktop("26.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>26</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Arrow function</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("22.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Generator function</td> + <td>{{CompatUnknown}}</td> + <td>39</td> + <td>{{CompatGeckoMobile("26.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>26</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Arrow function</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("22.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Statements/function", "function statement")}}</li> + <li>{{jsxref("Operators/function", "function expression")}}</li> + <li>{{jsxref("Statements/function*", "function* statement")}}</li> + <li>{{jsxref("Operators/function*", "function* expression")}}</li> + <li>{{jsxref("Function")}}</li> + <li>{{jsxref("GeneratorFunction")}}</li> + <li>{{jsxref("Functions/Arrow_functions", "Arrow functions")}}</li> + <li>{{jsxref("Functions/Default_parameters", "Default parameters")}}</li> + <li>{{jsxref("Functions/rest_parameters", "Rest parameters")}}</li> + <li>{{jsxref("Functions/arguments", "Arguments object")}}</li> + <li>{{jsxref("Functions/get", "getter")}}</li> + <li>{{jsxref("Functions/set", "setter")}}</li> + <li>{{jsxref("Functions/Method_definitions", "Method definitions")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope" title="JavaScript/Reference/Functions_and_function_scope">Functions and function scope</a></li> +</ul> diff --git a/files/it/web/javascript/reference/functions_and_function_scope/set/index.html b/files/it/web/javascript/reference/functions_and_function_scope/set/index.html new file mode 100644 index 0000000000..1af0f1c79d --- /dev/null +++ b/files/it/web/javascript/reference/functions_and_function_scope/set/index.html @@ -0,0 +1,214 @@ +--- +title: setter +slug: Web/JavaScript/Reference/Functions_and_function_scope/set +tags: + - Funzioni + - JavaScript + - setter +translation_of: Web/JavaScript/Reference/Functions/set +--- +<div>{{jsSidebar("Functions")}}</div> + +<p>Il costrutto sintattico <strong><code>set</code></strong> collega una proprietà di un oggetto ad una funzione che viene chiamata quando si ha un tentativo di modifica di quella proprietà.</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox notranslate">{set <em>prop</em>(<em>val</em>) { . . . }} +{set [expression](<em>val</em>) { . . . }}</pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt><code>prop</code></dt> + <dd>Il nome della proprietà da collegare alla funzione data.</dd> +</dl> + +<dl> + <dt><code>val</code></dt> + <dd>Un alias per la variabile che contiene il valore che si sta cercando di assegnare a <code>prop</code>.</dd> + <dt>expression</dt> + <dd>A partire da ECMAScript 6, è possibile anche usare espressioni per nomi di proprietà computate da collegare alla funzione data.</dd> +</dl> + +<h2 id="Descrizione">Descrizione</h2> + +<p>In JavaScript, un setter può essere utilizzato per eseguire una funzione ogniqualvolta una proprietà specificata sta per essere modificata. I setters sono quasi sempre utilizzati insieme ai getters per creare un tipo di pseudo proprietà. Non è possibile avere un setter su una normale proprietà che contiene un valore.</p> + +<p>Alcune note da considerare quando si utilizza il costrutto sintattico <code>set</code>:</p> + +<div> +<ul> + <li>Può avere un identificatore che può essere od un numero od una stringa;</li> + <li>Deve avere esattamente un parametro(consultare <a class="external" href="http://whereswalden.com/2010/08/22/incompatible-es5-change-literal-getter-and-setter-functions-must-now-have-exactly-zero-or-one-arguments/" rel="external nofollow">Incompatible <abbr title="ECMAScript 5th edition">ES5</abbr> change: literal getter and setter functions must now have exactly zero or one arguments</a> per maggiori informazioni);</li> + <li>Non può apparire in un letterale di un oggetto con un altro set o con un assegnamento per la stessa proprietà.<br> + ( <code>{ set x(v) { }, set x(v) { } }</code> e <code>{ x: ..., set x(v) { } } </code>non sono permessi )</li> +</ul> +</div> + +<p>Un setter può essere eliminato usando l'operatore <a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete" title="en-US/docs/JavaScript/Reference/Operators/Special/delete"><code>delete</code></a>.</p> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Definire_un_setter_per_nuovi_oggetti_in_inizializzatori_di_oggetti">Definire un setter per nuovi oggetti in inizializzatori di oggetti</h3> + +<p>Questo snippet di codice definisce una pseudo proprietà <code>current</code> di un oggetto <code>o </code>che, una volta che vi si assegna un valore, aggiornerà <code>log </code>con quel valore:</p> + +<pre class="brush: js notranslate">var o = { + set current (str) { + this.log[this.log.length] = str; + }, + log: [] +} +</pre> + +<p>Nota che <code>current</code> non è definito ed ogni tentativo di accedervi risulterà in un <code>undefined</code>.</p> + +<h3 id="Rimuovere_un_setter_con_loperatore_delete">Rimuovere un setter con l'operatore <code>delete</code></h3> + +<p>Se vuoi rimuovere il setter usato sopra, puoi semplicemente usare <code>delete</code>:</p> + +<pre class="brush: js notranslate">delete o.current; +</pre> + +<h3 id="Definire_un_setter_su_oggetti_pre-esistenti_usando_defineProperty">Definire un setter su oggetti pre-esistenti usando <code>defineProperty</code></h3> + +<p>Per aggiungere un setter ad un oggetto pre-esistente, usa{{jsxref("Object.defineProperty()")}}.</p> + +<pre class="brush: js notranslate">var o = { a:0 }; + +Object.defineProperty(o, "b", { set: function (x) { this.a = x / 2; } }); + +o.b = 10; // Runs the setter, which assigns 10 / 2 (5) to the 'a' property +console.log(o.a) // 5</pre> + +<h3 id="Usare_il_nome_di_una_proprietà_computata">Usare il nome di una proprietà computata</h3> + +<div class="note"> +<p><strong>Nota:</strong> Le proprietà computate sono una tecnologia sperimentale<em>,</em> parte dello standard proposto ECMAScript 6, e non sono ancora sufficientemente supportate dai browsers. L'uso di queste proprietà in ambienti che non le supportano produrrà un errore di sintassi.</p> +</div> + +<pre class="brush: js notranslate">var expr = "foo"; + +var obj = { + baz: "bar", + set [expr](v) { this.baz = v; } +}; + +console.log(obj.baz); // "bar" +obj.foo = "baz"; // run the setter +console.log(obj.baz); // "baz" +</pre> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Status</th> + <th scope="col">Commento</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.1.5', 'Object Initializer')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Definizione iniziale.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-method-definitions', 'Method definitions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Aggiunti i nomi di proprietà computate.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_dei_browsers">Compatibilità dei browsers</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Caratteristica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Supporto base</td> + <td>{{CompatChrome(1)}}</td> + <td>{{ CompatGeckoDesktop("1.8.1") }}</td> + <td>{{ CompatIE(9) }}</td> + <td>9.5</td> + <td>3</td> + </tr> + <tr> + <td>Nomi di proprietà computate</td> + <td>{{CompatNo}}</td> + <td>{{ CompatGeckoDesktop("34") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Caratteristica</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Supporto base</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoMobile("1.8.1") }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Nomi di proprietà computate</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{ CompatGeckoMobile("34.0") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Note_specifiche_per_SpiderMonkey">Note specifiche per SpiderMonkey</h2> + +<ul> + <li>A partire da<a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.8.1"> JavaScript 1.8.1</a>, i setters non sono più chiamati durante il setting delle properietà negli inizializzatori di oggetti od array.</li> + <li>A partire da SpiderMonkey 38, un setter con {{jsxref("Functions/rest_parameters", "rest parameter", "", 1)}} produce un {{jsxref("SyntaxError")}} come da specifica ES6.</li> +</ul> + +<h2 id="Guarda_anche">Guarda anche</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">getter</a></li> + <li>{{jsxref("Operators/delete", "delete")}}</li> + <li>{{jsxref("Object.defineProperty()")}}</li> + <li>{{jsxref("Object.defineGetter", "__defineGetter__")}}</li> + <li>{{jsxref("Object.defineSetter", "__defineSetter__")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">Defining Getters and Setters</a> nella guida JavaScript</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/array/concat/index.html b/files/it/web/javascript/reference/global_objects/array/concat/index.html new file mode 100644 index 0000000000..9d8d7d6629 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/array/concat/index.html @@ -0,0 +1,188 @@ +--- +title: Array.prototype.concat() +slug: Web/JavaScript/Reference/Global_Objects/Array/concat +tags: + - Array + - aggiungi elementi array + - concat +translation_of: Web/JavaScript/Reference/Global_Objects/Array/concat +--- +<div>{{JSRef}}</div> + +<p>Il metodo <code><strong>concat()</strong></code> ritorna un nuovo array costituito dall'array sul quale è stato invocato (joined array) e dagli array e/o valori passati come argomenti.</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox">var <var>new_array</var> = <var>old_array</var>.concat(<var>value1</var>[, <var>value2</var>[, ...[, <var>valueN</var>]]])</pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt><code>value<em>N</em></code></dt> + <dd>Array e/o valori da concatenare nel nuovo array. Vedere la descrizione sotto per i dettagli.</dd> +</dl> + +<h3 id="Valore_restituito">Valore restituito</h3> + +<p>Una nuova istanza di {{jsxref("Array")}}.</p> + +<h2 id="Descrizione">Descrizione</h2> + +<p>Il metodo <code>concat</code> crea un nuovo array costituito dagli elementi dell'oggetto su cui è stato invocato, seguiti in ordine da ciascun argomento o dagli elementi di ciascun argomento, se quest'ultimo è esso stesso un array.</p> + +<p>Il metodo <code>concat</code> non altera l'oggetto <code>this</code> (l'array originale) o gli elementi passati come parametri, ma ritorna una copia degli stessi che contiene copie degli elementi costituenti gli argomenti. Gli elementi degli array originali sono copiati in quello nuovo secondo le seguenti regole:</p> + +<ul> + <li>Riferimenti agli oggetti (non gli oggetti stessi): <code>concat</code> copia nel nuovo array i riferimenti agli oggetti. Sia gli elementi degli array originali che quelli dell'array prodotto da concat puntano agli stessi oggetti. Pertanto, se uno degli oggetti cui i riferimenti puntano viene cambiato, i cambiamenti possono essere visualizzati tramite i riferimenti contenuti nell'array originale o nella copia. Ciò include gli elementi degli argomenti di tipo array che fossero array a loro volta.</li> +</ul> + +<pre class="brush: js">var a = [1, 2] +var b = {c:1} +var d = a.concat(b) + +// d[2] is {c: 1} +b.c=10 +// d[2] is now {c: 10} +</pre> + +<ul> + <li>Tipi di dati come stringhe, numeri e booleani (non oggetti {{jsxref("Global_Objects/String", "String")}}, {{jsxref("Global_Objects/Number", "Number")}}, e {{jsxref("Global_Objects/Boolean", "Boolean")}} ): <code>concat</code> li copia per valore nel nuovo array.</li> +</ul> + +<div class="note"> +<p><strong>Note:</strong> Concatenando i valori di diversi array o valori, si lasciano gli originali inalterati. Inoltre, qualsiasi operazione sui nuovi array (eccetto le operazioni su elementi che siano riferimenti a oggetti) non avrà effetto alcuno sugli originali e viceversa.</p> +</div> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Concatenare_due_array">Concatenare due array</h3> + +<h3 id="Il_codice_seguente_concatena_due_array"><span style="font-size: 14px;">Il codice seguente concatena due array:</span></h3> + +<pre class="brush: js">var alpha = ['a', 'b', 'c']; +var numeric = [1, 2, 3]; + +alpha.concat(numeric); +// Risultato: ['a', 'b', 'c', 1, 2, 3] +</pre> + +<h3 id="Concatenare_tre_array">Concatenare tre array</h3> + +<p>Il codice seguente concatena tre array:</p> + +<pre class="brush: js">var num1 = [1, 2, 3], + num2 = [4, 5, 6], + num3 = [7, 8, 9]; + +var nums = num1.concat(num2, num3); + + +console.log(nums); +// Risultato: [1, 2, 3, 4, 5, 6, 7, 8, 9] +</pre> + +<h3 id="Concatenare_valori_ad_un_array">Concatenare valori ad un array</h3> + +<p>Il codice seguente concatena dei valori a quelli presenti in un array:</p> + +<pre class="brush: js">var alpha = ['a', 'b', 'c']; + +var alphaNumeric = alpha.concat(1, [2, 3]); + +console.log(alphaNumeric); +// Risultato: ['a', 'b', 'c', 1, 2, 3] +</pre> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifiche</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Definizione iniziale, implementato in JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.4', 'Array.prototype.concat')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.concat', 'Array.prototype.concat')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.concat', 'Array.prototype.concat')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_Browser">Compatibilità con i Browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Browser</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Supporto Base</td> + <td>{{CompatChrome("1.0")}}</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>{{CompatIE("5.5")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Browser</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Supporto Base</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Vedere_anche">Vedere anche</h2> + +<ul> + <li>{{jsxref("Array.push", "push")}} / {{jsxref("Array.pop", "pop")}} — aggiunge/rimuove elementi dalla fine di un array</li> + <li>{{jsxref("Array.unshift", "unshift")}} / {{jsxref("Array.shift", "shift")}} — aggiunge/rimuove elementi dall'inizio di un array</li> + <li>{{jsxref("Array.splice", "splice")}} — aggiunge/rimuove elementi da una posizione specifica dell'array</li> + <li>{{jsxref("String.prototype.concat()")}}</li> + <li>{{jsxref("Symbol.isConcatSpreadable")}} – control flattening.</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/array/copywithin/index.html b/files/it/web/javascript/reference/global_objects/array/copywithin/index.html new file mode 100644 index 0000000000..65e00abe47 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/array/copywithin/index.html @@ -0,0 +1,180 @@ +--- +title: Array.prototype.copyWithin() +slug: Web/JavaScript/Reference/Global_Objects/Array/copyWithin +translation_of: Web/JavaScript/Reference/Global_Objects/Array/copyWithin +--- +<div>{{JSRef}}</div> + +<p>Il metodo <code><strong>copyWithin()</strong></code> copia superficialmente una parte di un array in un'altra locazione dello stesso array e lo restituisce, senza modificare la sua dimensione.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-copywithin.html")}}</div> + +<p class="hidden">Il codice sorgente di questo esempio interattivo e' reperibile in una repository di GitHub. Se sei interessato nel contribuire agli esempi interattivi, clona <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> ed inviaci una pull request.</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><var>arr</var>.copyWithin(<var>target</var>) +<var>arr</var>.copyWithin(<var>target</var>, <var>start</var>) +<var>arr</var>.copyWithin(<var>target</var>, <var>start</var>, <var>end</var>) +</pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt><code>target</code></dt> + <dd>Indice zero-based fino al quale copiare la sequenza. Se negativo, <code>target</code> sarà impostato all'ultimo elemento dell'array.</dd> + <dd>Se <code>target</code> è pari o più grande di <code>arr.length</code>, non sarà copiato nulla. Se <code>target</code> è posizionato dopo <code>start</code>, la sequenza copiata, sarà ritagliata per poter rientrare in <code>arr.length</code>.</dd> + <dt><code>start</code> {{optional_inline}}</dt> + <dd>Indice zero-based dal quale si comincia a copiare gli elementi. Se negativo, <code>start</code> comincerà a contare dalla fine.</dd> + <dd>Se <code>start</code> è omesso, <code>copyWithin</code> copierà dall'inizio (default 0).</dd> + <dt><code>end</code> {{optional_inline}}</dt> + <dd>Indice zero-based che indica l'ultimo indice dal quale copiare. <code>copyWithin</code> copia fino ad <code>end</code> ma non lo include. Se negativo, <code>end</code> sarà contato dalla fine.</dd> + <dd>Se <code>end</code> è omesso, <code>copyWithin</code> copierà fino alla fine (default <code>arr.length</code>).</dd> +</dl> + +<h3 id="Valore_di_ritorno">Valore di ritorno</h3> + +<p>L'array modificato.</p> + +<h2 id="Descrizione">Descrizione</h2> + +<p><code>copyWithin</code> ha le stesse funzionalità di <code>memmove</code> provenienti da C e C++, ed è un metodo molto performante per spostare i dati di un {{jsxref("Array")}}. Questa modifica si applica specialmente a {{jsxref("TypedArray/copyWithin", "TypedArray")}} metodo con lo stesso nome. La sequenza è copiata e incollata come una singola operzione; la sequenza incollata avrà i valori copiati anche se essi si sovrappongono.</p> + +<p>La funzione <code>copyWithin</code> è intenzionalmente<em> generic</em>, e non richiede che i suoi argomenti siano {{jsxref("Array")}} object.</p> + +<p><code>copyWithin</code> è un metodo mutabile. Non altera la lunghezza di <code>this</code>, ma cambia il suo contenuto e crea nuove proprietà se necessario..</p> + +<h2 id="Esempi">Esempi</h2> + +<pre class="brush: js">[1, 2, 3, 4, 5].copyWithin(-2); +// [1, 2, 3, 1, 2] + +[1, 2, 3, 4, 5].copyWithin(0, 3); +// [4, 5, 3, 4, 5] + +[1, 2, 3, 4, 5].copyWithin(0, 3, 4); +// [4, 2, 3, 4, 5] + +[1, 2, 3, 4, 5].copyWithin(-2, -3, -1); +// [1, 2, 3, 3, 4] + +[].copyWithin.call({length: 5, 3: 1}, 0, 3); +// {0: 1, 3: 1, length: 5} + +// ES2015 Typed Arrays are subclasses of Array +var i32a = new Int32Array([1, 2, 3, 4, 5]); + +i32a.copyWithin(0, 2); +// Int32Array [3, 4, 5, 4, 5] + +// On platforms that are not yet ES2015 compliant: +[].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 0, 3, 4); +// Int32Array [4, 2, 3, 4, 5] +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<pre><code>if (!Array.prototype.copyWithin) { + Array.prototype.copyWithin = function(target, start/*, end*/) { + // Steps 1-2. + if (this == null) { + throw new TypeError('this is null or not defined'); + } + + var O = Object(this); + + // Steps 3-5. + var len = O.length >>> 0; + + // Steps 6-8. + var relativeTarget = target >> 0; + + var to = relativeTarget < 0 ? + Math.max(len + relativeTarget, 0) : + Math.min(relativeTarget, len); + + // Steps 9-11. + var relativeStart = start >> 0; + + var from = relativeStart < 0 ? + Math.max(len + relativeStart, 0) : + Math.min(relativeStart, len); + + // Steps 12-14. + var end = arguments[2]; + var relativeEnd = end === undefined ? len : end >> 0; + + var final = relativeEnd < 0 ? + Math.max(len + relativeEnd, 0) : + Math.min(relativeEnd, len); + + // Step 15. + var count = Math.min(final - from, len - to); + + // Steps 16-17. + var direction = 1; + + if (from < to && to < (from + count)) { + direction = -1; + from += count - 1; + to += count - 1; + } +</code> +<code> // Step 18. + while (count > 0) { + if (from in O) { + O[to] = O[from]; + } else { + delete O[to]; + } + + from += direction; + to += direction; + count--; + } + + // Step 19. + return O; + }; +}</code></pre> + +<h2 id="Specificazioni">Specificazioni</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-array.prototype.copywithin', 'Array.prototype.copyWithin')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Definizione iniziale.</td> + </tr> + <tr> + <td>{{SpecName('ES2016', '#sec-array.prototype.copywithin', 'Array.prototype.copyWithin')}}</td> + <td>{{Spec2('ES2016')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.copywithin', 'Array.prototype.copyWithin')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_browser">Compatibilità browser</h2> + +<div> +<div class="hidden">La tabella di compatibilità in questa pagina è generata mediante dati strutturati. Se vuoi contribuire ai dati, controlla <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> ed inviaci una pull request.</div> + +<p>{{Compat("javascript.builtins.Array.copyWithin")}}</p> +</div> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>{{jsxref("Array")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/array/entries/index.html b/files/it/web/javascript/reference/global_objects/array/entries/index.html new file mode 100644 index 0000000000..31e156afb8 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/array/entries/index.html @@ -0,0 +1,77 @@ +--- +title: Array.prototype.entries() +slug: Web/JavaScript/Reference/Global_Objects/Array/entries +translation_of: Web/JavaScript/Reference/Global_Objects/Array/entries +--- +<div>{{JSRef}}</div> + +<p>Il metodo <code><strong>entries()</strong></code> restituisce un nuovo oggetto <code><strong>Array Iterator</strong></code> contenente delle coppie chiave/valore per ogni indice presente nell'array.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-entries.html")}}</div> + + + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><var>a</var>.entries()</pre> + +<h3 id="Valore_ritornato">Valore ritornato</h3> + +<p>Un nuovo oggetto iterator {{jsxref("Array")}}.</p> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Utilizzo_nel_for…of">Utilizzo nel <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for…of</a></h3> + +<pre class="brush:js">var a = ['a', 'b', 'c']; +var iterator = a.entries(); + +for (let e of iterator) { + console.log(e); +} +// [0, 'a'] +// [1, 'b'] +// [2, 'c'] +</pre> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-array.prototype.entries', 'Array.prototype.entries')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Definizione iniziale.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.entries', 'Array.prototype.entries')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_il_browser">Compatibilità con il browser</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.entries")}}</p> +</div> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>{{jsxref("Array.prototype.keys()")}}</li> + <li>{{jsxref("Array.prototype.values()")}}</li> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li>{{jsxref("Array.prototype.every()")}}</li> + <li>{{jsxref("Array.prototype.some()")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Iteration_protocols">Iteration protocols</a></li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/array/every/index.html b/files/it/web/javascript/reference/global_objects/array/every/index.html new file mode 100644 index 0000000000..c1f3238ad6 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/array/every/index.html @@ -0,0 +1,184 @@ +--- +title: Array.prototype.every() +slug: Web/JavaScript/Reference/Global_Objects/Array/every +translation_of: Web/JavaScript/Reference/Global_Objects/Array/every +--- +<div>{{JSRef}}</div> + +<p>Il metodo <code><strong>every()</strong></code> controlla che tutti gli elementi all'interno dell'array passino il test implementato dalla funzione fornita.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-every.html")}}</div> + +<p class="hidden">Il codice sorgente per questo esempio interattivo è salvato all'interno di una repository GitHub. Se vuoi contribuire al progetto sugli esempi interattivi, perfavore clona <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> e mandaci una pull request.</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><var>arr</var>.every(<var>callback</var>[, <var>thisArg</var>])</pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Funzione da testare per ciascun elemento, che prende tre argomenti: + <dl> + <dt><code>currentValue</code> (required)</dt> + <dd>L'elemento corrente che viene elaborato all'interno dell'array.</dd> + <dt><code>index</code>{{Optional_inline}}</dt> + <dd>L'indice dell'elemento corrente che viene elaborato all'interno dell'array.</dd> + <dt><code>array</code>{{Optional_inline}}</dt> + <dd>L'array <code>every</code> chiamato.</dd> + </dl> + </dd> + <dt><code>thisArg</code>{{Optional_inline}}</dt> + <dd>Opzionale. Valore da utilizzare come <code>this</code> durante l'esecuzione della <code>callback</code>.</dd> +</dl> + +<h3 id="Valore_di_ritorno">Valore di ritorno</h3> + +<p><code><strong>true</strong></code> se la funzione callback ritorna un valore {{Glossary("truthy")}} per ciascun elemento dell'array; altrimenti, <code><strong>false</strong></code>.</p> + +<h2 id="Descrizione">Descrizione</h2> + +<p>Il metodo <code>every</code> esegue la funzione <code>callback</code> fornita una volta per ciascun elemento presente all'interno dell'array finché non ne trova uno per il quale la <code>callback</code> ritorna un valore {{Glossary("falsy")}}. Altrimenti, se la <code>callback</code> ritorna un valore {{Glossary("truthy")}} per tutti gli elementi, <code>every</code> ritorna <code>true</code>. <code>callback</code> viene invocata solo per gli indici dell'array che hanno un valore assegnato; non viene invocata per gli indici che sono stati eliminati o ai quali non è mai stato assegnato un valore.</p> + +<p><code>callback</code> viene invocata con tre argomenti: il valore dell'elemento, l'indice dell'elemento, e l'Array oggetto che viene attraversato. </p> + +<p>Se il parametro <code>thisArg</code> viene fornito a <code>every</code>, esso verrà usato come valore <code>this</code> per la <code>callback</code>. Altrimenti, il valore <code>undefined</code> verrà usato al suo posto come valore <code>this</code>. Il valore <code>this</code>, ultimo osservabile dalla <code>callback</code>, viene determinato secondo <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">le usuali regole per determinare il this visto da una funzione.</a></p> + +<p><code>every</code> non modifica l'array in cui viene chiamato.</p> + +<p>Il range di elementi processati da <code>every</code> viene impostato prima della prima invocazione di <code>callback</code>. Gli elementi che vengono appesi all'inizio dell'array dopo la chiamata a <code>every</code> non verranno visitati dalla <code>callback</code>. Se gli elementi esistenti dell'array vengono cambiati, il loro valore passato a <code>callback</code> sarà il valore al momento in cui <code>every</code> li visiterà; gli elementi cancellati non sono visitati.</p> + +<p><code>every</code> agisce come il quantificatore "for all" in matematica. In particolare, per un array vuoto, esso ritorna true. (E' <a href="http://en.wikipedia.org/wiki/Vacuous_truth#Vacuous_truths_in_mathematics">vacuously true</a> che tutti gli elementi dell' <a href="http://en.wikipedia.org/wiki/Empty_set#Common_problems">empty set</a> soddisfano qualsiasi condizione data.)</p> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Controllo_sulla_grandezza_di_tutti_gli_elementi_dell'array">Controllo sulla grandezza di tutti gli elementi dell'array</h3> + +<p>Il seguente esempio controlla che tutti gli elementi dell'array siano maggiori di 10.</p> + +<pre class="brush: js">function isBigEnough(element, index, array) { + return element >= 10; +} +[12, 5, 8, 130, 44].every(isBigEnough); // false +[12, 54, 18, 130, 44].every(isBigEnough); // true +</pre> + +<h3 id="Utilizzando_arrow_functions">Utilizzando arrow functions</h3> + +<p><a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Arrow functions</a> forniscono una sintassi più breve per lo stesso test.</p> + +<pre class="brush: js">[12, 5, 8, 130, 44].every(x => x >= 10); // false +[12, 54, 18, 130, 44].every(x => x >= 10); // true</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p><code>every</code> è stato aggiunto allo standard ECMA-262 nella 5a edizione; per questo motivo potrebbe non essere presente in altre implementazioni dello standard. Potrai aggirare il problema inserendo il seguente codice all'inizio dei tuoi scripts, permettendo così l'utilizzo di <code>every</code> in implementazioni che non lo supportano nativamente. Questo algoritmo è esattamente quello specificato in ECMA-262, 5a edizione, assumendo che <code>Object</code> e <code>TypeError</code> abbiano i loro valori originali e che <code>callbackfn.call</code> valuti sul valore originale di {{jsxref("Function.prototype.call")}}.</p> + +<pre class="brush: js">if (!Array.prototype.every) { + Array.prototype.every = function(callbackfn, thisArg) { + 'use strict'; + var T, k; + + if (this == null) { + throw new TypeError('this is null or not defined'); + } + + // 1. Let O be the result of calling ToObject passing the this + // value as the argument. + var O = Object(this); + + // 2. Let lenValue be the result of calling the Get internal method + // of O with the argument "length". + // 3. Let len be ToUint32(lenValue). + var len = O.length >>> 0; + + // 4. If IsCallable(callbackfn) is false, throw a TypeError exception. + if (typeof callbackfn !== 'function') { + throw new TypeError(); + } + + // 5. If thisArg was supplied, let T be thisArg; else let T be undefined. + if (arguments.length > 1) { + T = thisArg; + } + + // 6. Let k be 0. + k = 0; + + // 7. Repeat, while k < len + while (k < len) { + + var kValue; + + // a. Let Pk be ToString(k). + // This is implicit for LHS operands of the in operator + // b. Let kPresent be the result of calling the HasProperty internal + // method of O with argument Pk. + // This step can be combined with c + // c. If kPresent is true, then + if (k in O) { + + // i. Let kValue be the result of calling the Get internal method + // of O with argument Pk. + kValue = O[k]; + + // ii. Let testResult be the result of calling the Call internal method + // of callbackfn with T as the this value and argument list + // containing kValue, k, and O. + var testResult = callbackfn.call(T, kValue, k, O); + + // iii. If ToBoolean(testResult) is false, return false. + if (!testResult) { + return false; + } + } + k++; + } + return true; + }; +} +</pre> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.16', 'Array.prototype.every')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Definizione iniziale. Implementata in JavaScript 1.6.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.every', 'Array.prototype.every')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.every', 'Array.prototype.every')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_browser">Compatibilità browser</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.every")}}</p> +</div> + +<h2 id="Vedere_anche">Vedere anche</h2> + +<ul> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li>{{jsxref("Array.prototype.some()")}}</li> + <li>{{jsxref("TypedArray.prototype.every()")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/array/fill/index.html b/files/it/web/javascript/reference/global_objects/array/fill/index.html new file mode 100644 index 0000000000..043696f554 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/array/fill/index.html @@ -0,0 +1,155 @@ +--- +title: Array.prototype.fill() +slug: Web/JavaScript/Reference/Global_Objects/Array/fill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/fill +--- +<div>{{JSRef}}</div> + +<p>Il metodo <code><strong>fill()</strong></code> assegna un valore statico a tutti gli elementi di un array compresi tra un indice iniziale ed un indice finale.</p> + +<pre class="brush: js">var numbers = [1, 2, 3] +numbers.fill(1); + +// results in [1, 1, 1]</pre> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><var>arr</var>.fill(<var>value</var><var><var>)</var></var> +<var>arr</var>.fill(<var>value</var>, <var>start<var>) +</var>arr</var>.fill(<var>value</var>, <var>start<var>, <var>end</var>)</var></var> +</pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt><code>value</code></dt> + <dd>Valore statico da assegnare agli elementi dell'array.</dd> + <dt><code>start</code> {{optional_inline}}</dt> + <dd>Indice iniziale, default uguale a 0.</dd> + <dt><code>end</code> {{optional_inline}}</dt> + <dd>Indice finale, default uguale a <code>this.length</code>.</dd> +</dl> + +<h3 id="Valore_di_ritorno">Valore di ritorno</h3> + +<p>L'array modificato.</p> + +<h2 id="Descrizione">Descrizione</h2> + +<p>L'intervallo di elementi da assegnare è compreso tra [<code>start</code>, <code>end</code>).</p> + +<p>Il metodo <strong><code>fill</code></strong> accetta fino a tre argomenti: <code>value</code>, <code>start</code> and <code>end</code>. Gli argomenti <code>start</code> e <code>end</code> sono opzionali con valori di default rispettivamente di <code>0</code> di <code>length</code> dell'oggetto <code>this</code> .</p> + +<p>Se <code>start</code> è negativo, viene interpretato come <code>length+start</code> dove <code>length</code> è la lunghezza dell'array. Se <code>end</code> è negativo, viene intrpretato come <code>length+end</code>.</p> + +<p>La funzione <strong><code>fill</code></strong> è volutamente generica, non richiede che il suo valore <code>this</code> sia un Array.</p> + +<p>Il metodo <strong><code>fill</code></strong> è mutabile, ovvero modifica l'oggetto <code>this</code> e lo restituisce modificato, ovvero non ne restituisce una copia modificata.</p> + +<p>Quando al metodo <strong><code>fill</code></strong> viene passato un oggetto, il metodo effettuerà una copia dell'oggetto e assegnerà agli elementi dell'Array un riferimento alla copia.</p> + +<h2 id="Examples">Examples</h2> + +<pre class="brush: js">[1, 2, 3].fill(4); // [4, 4, 4] +[1, 2, 3].fill(4, 1); // [1, 4, 4] +[1, 2, 3].fill(4, 1, 2); // [1, 4, 3] +[1, 2, 3].fill(4, 1, 1); // [1, 2, 3] +[1, 2, 3].fill(4, 3, 3); // [1, 2, 3] +[1, 2, 3].fill(4, 3, 3); // [1, 2, 3] +[1, 2, 3].fill(4, -3, -2); // [4, 2, 3] +[1, 2, 3].fill(4, NaN, NaN); // [1, 2, 3] +[1, 2, 3].fill(4, 3, 5); // [1, 2, 3] +Array(3).fill(4); // [4, 4, 4] +[].fill.call({ length: 3 }, 4); // {0: 4, 1: 4, 2: 4, length: 3} + +// Objects by reference. +var arr = Array(3).fill({}) // [{}, {}, {}]; +arr[0].hi = "hi"; // [{ hi: "hi" }, { hi: "hi" }, { hi: "hi" }] +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<pre class="brush: js">if (!Array.prototype.fill) { + Object.defineProperty(Array.prototype, 'fill', { + value: function(value) { + + // Steps 1-2. + if (this == null) { + throw new TypeError('this is null or not defined'); + } + + var O = Object(this); + + // Steps 3-5. + var len = O.length >>> 0; + + // Steps 6-7. + var start = arguments[1]; + var relativeStart = start >> 0; + + // Step 8. + var k = relativeStart < 0 ? + Math.max(len + relativeStart, 0) : + Math.min(relativeStart, len); + + // Steps 9-10. + var end = arguments[2]; + var relativeEnd = end === undefined ? + len : end >> 0; + + // Step 11. + var final = relativeEnd < 0 ? + Math.max(len + relativeEnd, 0) : + Math.min(relativeEnd, len); + + // Step 12. + while (k < final) { + O[k] = value; + k++; + } + + // Step 13. + return O; + } + }); +} +</pre> + +<p>Se hai necessità di supportare engine Javascript veramente obsolete che non supportano <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty</a></code>, è meglio non usare affatto il polyfill per il medoto <code>Array.prototype</code> perchè non è possibile renderlo non enumerabile.</p> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commenti</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-array.prototype.fill', 'Array.prototype.fill')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.fill', 'Array.prototype.fill')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.fill")}}</p> +</div> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>{{jsxref("Array")}}</li> + <li>{{jsxref("TypedArray.prototype.fill()")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/array/filter/index.html b/files/it/web/javascript/reference/global_objects/array/filter/index.html new file mode 100644 index 0000000000..33d24d38b6 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/array/filter/index.html @@ -0,0 +1,245 @@ +--- +title: Array.prototype.filter() +slug: Web/JavaScript/Reference/Global_Objects/Array/filter +translation_of: Web/JavaScript/Reference/Global_Objects/Array/filter +--- +<div>{{JSRef}}</div> + +<p>Il metodo <code><strong>filter() </strong></code>crea un nuovo array contentente tutti gli elementi che passano il test implementato dalla funzione. </p> + +<pre class="brush: js">function isBigEnough(value) { + return value >= 10; +} + +var filtered = [12, 5, 8, 130, 44].filter(isBigEnough); +// filtered is [12, 130, 44] +</pre> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><var>var new_array = arr</var>.filter(<var>callback</var>[, <var>thisArg</var>])</pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Funzione predicato per testare ciascun elemento dell'array. Restituisce <code>true</code> se l'elemento va mantenuto, <code>false</code> altrimenti. Essa prende in input tre argomenti:</dd> + <dd> + <dl> + <dt><code>element</code></dt> + <dd>L'elemento corrente nell'array processato.</dd> + <dt><code>index</code></dt> + <dd>L' indice dell'elemento corrente processato nell'array.</dd> + <dt><code>array</code></dt> + <dd>l'array su cui <code>filter</code> è stato chiamato.</dd> + </dl> + </dd> + <dt><code>thisArg</code></dt> + <dd>Opzionale. Valore da usare come <code>this</code> quando si esegue <code>callback</code>.</dd> +</dl> + +<h3 id="Valore_restituito">Valore restituito</h3> + +<p>Un nuovo array con gli elementi che hanno passato il test.</p> + +<h2 id="Descrizione">Descrizione</h2> + +<p><code>filter()</code> chiama funzione ricorsiva (<code>callback</code>) fornita una volta per ciascun elemento dell'array e crea un nuovo array con tutti quei valori in cui la <code>callback</code> ha restituito un valore<a href="/en-US/docs/Glossary/Truthy"> <code>true</code></a>.. <code>callback</code> viene invocata solo per gli indici dell'array a cui sono associati dei valori; non viene invocata per inidici in cui sono stati cancellati i valori o in cui non sono stati definiti valori. Gli elementi dell'array che non superano il test vengono semplicemente ignorati, non venendo così inseriti nel nuovo array.</p> + +<p><code>callback</code> viene invocata con tre argomenti:</p> + +<ol> + <li>il valore dell'elemento</li> + <li>l'indice dell'elemento</li> + <li>l' Array oggetto da passare</li> +</ol> + +<p>Se viene fornito a <code>filter</code> un parametro <code>thisArg</code> , questo verrà passato a sua volta a <code>callback</code> quando verrà invocata per usarlo come valore di <code>this</code> . Altrimenti verrà passato un valore <code>undefined</code> per essere usato come valore di <code>this</code>. Il valore <code>this</code> osservabile in definitiva dalla funzione <code>callback</code> viene scelto seguendo <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">le usuali regole di determinazione dei <code>this </code>visti da una funzione</a>.</p> + +<p><code>filter()</code> non muta l'array sul quale viene chiamata.</p> + +<p>La gamma di element processati da <code>filter()</code> viene impostata prima della invocazione della <code>callback</code>. Gli elementi che vengono mesi nell'array da filtrare dopo l'invocazione di <code>filter()</code> non verranno esaminati dalla <code>callback</code>. Se ci sono elementi dell'array da fitrare i cui valori vengono cambiati o vengono cancellati dopo la applicazione di <code>filter()</code> , questi nel tempo di chamata di <code>filter()</code> verranno testati dalla <code>callback</code> nello stato previo alla loro modifica. Elementi cancellati prima della applicazione di <code>filter()</code> non vengono visitati.</p> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Filtrare_tutti_i_piccoli_valori">Filtrare tutti i piccoli valori</h3> + +<p>Il seguente esempio usa <code>filter()</code> per realizzare un array filtrato che non contenga elementi di valore inferiore a 10.</p> + +<pre class="brush: js">function isBigEnough(value) { + return value >= 10; +} + +var filtered = [12, 5, 8, 130, 44].filter(isBigEnough); +// filtered is [12, 130, 44] +</pre> + +<h3 id="Filtrare_entrate_non_valide_in_JSON">Filtrare entrate non valide in JSON</h3> + +<p>Il sequente esempio di utilizzo di <code>filter()</code> crea un json filtrato di elementi con valido id numerico.</p> + +<pre class="brush: js">var arr = [ + { id: 15 }, + { id: -1 }, + { id: 0 }, + { id: 3 }, + { id: 12.2 }, + { }, + { id: null }, + { id: NaN }, + { id: 'undefined' } +]; + +var invalidEntries = 0; + +function isNumber(obj) { + return obj!== undefined && typeof(obj) === 'number' && !isNaN(obj); +} + +function filterByID(item) { + if (isNumber(item.id)) { + return true; + } + invalidEntries++; + return false; +} + +var arrByID = arr.filter(filterByID); + +console.log('Filtered Array\n', arrByID); +// Array filtrato +// [{ id: 15 }, { id: -1 }, { id: 0 }, { id: 3 }, { id: 12.2 }] + +console.log('Quantità di entrate non valide = ', invalidEntries); +// Quantità di entrate non valide = 4 +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p><code>filter()</code> è stato aggiunto allo standard ECMA-262 nella quinta edizione; potrebbe essere non presente in tutte le implementazioni dello standard. Puoi sempre inserire il seguente codice nei tuoi script per poter usare <code>filter()</code> nelle implementazioni ECMA-262 che non lo supportanto nativamente. Questo algoritmo è esattamente quello nella specifica ECMA-262, quinta edizione, assumendo che <code>fn.call</code> valuti il valore originale di {{jsxref("Function.prototype.call()")}},e che {{jsxref("Array.prototype.push()")}} abbia il suo valore originale.</p> + +<pre class="brush: js">if (!Array.prototype.filter) { + Array.prototype.filter = function(fun/*, thisArg*/) { + 'use strict'; + + if (this === void 0 || this === null) { + throw new TypeError(); + } + + var t = Object(this); + var len = t.length >>> 0; + if (typeof fun !== 'function') { + throw new TypeError(); + } + + var res = []; + var thisArg = arguments.length >= 2 ? arguments[1] : void 0; + for (var i = 0; i < len; i++) { + if (i in t) { + var val = t[i]; + + // NOTE: Technically this should Object.defineProperty at + // the next index, as push can be affected by + // properties on Object.prototype and Array.prototype. + // But that method's new, and collisions should be + // rare, so use the more-compatible alternative. + if (fun.call(thisArg, val, i, t)) { + res.push(val); + } + } + } + + return res; + }; +} +</pre> + +<h2 id="Specificazioni">Specificazioni</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.20', 'Array.prototype.filter')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> + <p>Definizione iniziale. Implementato in javascript 1.6.</p> + </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.filter', 'Array.prototype.filter')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.filter', 'Array.prototype.filter')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_Browser">Compatibilità Browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.8")}}</td> + <td>{{CompatIE("9")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.8")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li>{{jsxref("Array.prototype.every()")}}</li> + <li>{{jsxref("Array.prototype.some()")}}</li> + <li>{{jsxref("Array.prototype.reduce()")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/array/find/index.html b/files/it/web/javascript/reference/global_objects/array/find/index.html new file mode 100644 index 0000000000..c215ff79e7 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/array/find/index.html @@ -0,0 +1,216 @@ +--- +title: Array.prototype.find() +slug: Web/JavaScript/Reference/Global_Objects/Array/find +tags: + - Array + - ECMAScript 2015 + - ECMAScript6 + - JavaScript + - Prototype + - Riferimento + - metodo + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/find +--- +<div>{{JSRef}}</div> + +<p>Il metodo <code><strong>find()</strong></code> restituisce il <strong>valore</strong> del primo elemento nell'array che soddisfi la funzione di test passata come argomento. Altrimenti viene restituito {{jsxref("undefined")}}.</p> + +<pre class="brush: js">function isBigEnough(element) { + return element >= 15; +} + +[12, 5, 8, 130, 44].find(isBigEnough); // 130</pre> + +<p>Vedi anche il metodo {{jsxref("Array.findIndex", "findIndex()")}}, che restituisce l'<strong>indice</strong> dell'elemento trovato nell'array invece del suo valore.</p> + +<p>Se hai bisogno di trovare la posizione di un elemento o determinare se un elemento esiste o meno nell'array, puoi usare i metodi {{jsxref("Array.prototype.indexOf()")}} o {{jsxref("Array.prototype.includes()")}}.</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><var>arr</var>.find(<var>callback</var>[, <var>thisArg</var>])</pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Funzione da eseguire per ogni valore contenuto nell'array, richiede tre argomenti: + <dl> + <dt><code>element</code></dt> + <dd>L'elemento nell'array che dev'essere testato.</dd> + <dt><code>index</code></dt> + <dd>L'indice dell'elemento nell'array che dev'essere testato.</dd> + <dt><code>array</code></dt> + <dd>L'array sul quale è stato chiamato il <code>find</code>.</dd> + </dl> + </dd> + <dt><code>thisArg</code></dt> + <dd>Opzionale. L'oggetto da utilizzare come <code>this</code> durante l'esecuzione della <code>callback</code>.</dd> +</dl> + +<h3 id="Valore_restituito">Valore restituito</h3> + +<p>Un valore dell'array se un elemento soddisfa la condizione; altrimenti, {{jsxref("undefined")}}.</p> + +<h2 id="Descrizione">Descrizione</h2> + +<p>Il metodo <code>find</code> esegue la funzione di <code>callback</code> una sola volta per ciascun elemento nell'array finché non ne trova uno per il quale la funzione di <code>callback</code> restituisca <code>true</code>. Se tale elemento viene trovato, <code>find</code> restituisce immediatamente il valore di quell'elemento. Altrimenti, <code>find</code> restituisce {{jsxref("undefined")}}. La funzione <code>callback</code> è invocata solo per quegli indici dell'array per i quali esiste un valore; non viene invocata per quegli indici che sono stati cancellati o ai quali non è mai stato assegnato alcun valore.</p> + +<p>Alla funzione <code>callback</code> vengono passati tre parametri: il valore dell'elemento, l'indice dell'elemento e l'oggetto Array che si sta esplorando.</p> + +<p>Se viene passato il parametro <code>thisArg</code> al metodo <code>find</code>, questo verrà usato come <code>this</code> per ciascuna invocazione della funzione <code>callback</code>. Altrimenti viene utilizzato {{jsxref("undefined")}}.</p> + +<p>Il metodo <code>find</code> non modifica l'array sul quale viene chiamato.</p> + +<p>L'intervallo di elementi analizzati dal metodo <code>find</code> è impostato prima della prima invocazione della <code>callback</code>. Gli elementi aggiunti all'array successivamente alla chiamata del metodo <code>find</code> non verranno analizzate dalla <code>callback</code>. Se un elemento dell'array esistente, ma non ancora visitato, viene modificato dalla <code>callback</code>, il valore passato alla funzione <code>callback</code> sarà il valore contenuto nel momento in cui il metodo <code>find</code> visita l'indice di quell'elemento; gli elementi eliminati non vengono visitati.</p> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Trova_un_oggetto_in_un_array_tramite_una_sua_proprietà">Trova un oggetto in un array tramite una sua proprietà</h3> + +<pre class="brush: js">var inventario = [ + {name: 'mele', quantity: 2}, + {name: 'banane', quantity: 0}, + {name: 'ciliegie', quantity: 5} +]; + +function findCherries(fruit) { + return fruit.name === 'ciliegie'; +} + +console.log(inventario.find(findCherries)); +// { name: 'ciliegie', quantity: 5 }</pre> + +<h3 id="Trova_un_numero_primo_in_un_array">Trova un numero primo in un array</h3> + +<p>L'esempio seguente trova un elemento nell'array che sia un numero primo (o restituisce {{jsxref("undefined")}} se non ce ne sono).</p> + +<pre class="brush: js">function isPrime(element, index, array) { + var start = 2; + while (start <= Math.sqrt(element)) { + if (element % start++ < 1) { + return false; + } + } + return element > 1; +} + +console.log([4, 6, 8, 12].find(isPrime)); // undefined, non trovato +console.log([4, 5, 8, 12].find(isPrime)); // 5 +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p>Questo metodo è stato aggiunto nella specifica ECMAScript 2015 e potrebbe non ancora essere disponibile in tutte le implementazioni JavaScript. Comunque, puoi aggiungere il metodo <code>Array.prototype.find()</code> utilizzando il seguente snippet:</p> + +<pre class="brush: js">if (!Array.prototype.find) { + Object.defineProperty(Array.prototype, 'find', { + value: function(predicate) { + 'use strict'; + if (this == null) { + throw new TypeError('Array.prototype.find called on null or undefined'); + } + if (typeof predicate !== 'function') { + throw new TypeError('predicate must be a function'); + } + var list = Object(this); + var length = list.length >>> 0; + var thisArg = arguments[1]; + + for (var i = 0; i !== length; i++) { + if (predicate.call(thisArg, this[i], i, list)) { + return this[i]; + } + } + return undefined; + } + }); +} +</pre> + +<p>Se hai la necessità di supportare motori JavaScript molto obsoleti che non supportano <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty</a></code>, sarebbe meglio non aggiungere per niente il metodo <code>Array.prototype.find()</code>, poiché potresti renderli non-enumerabili.</p> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.find', 'Array.prototype.find')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.find', 'Array.prototype.find')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_browser">Compatibilità browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Edge</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(45.0)}}</td> + <td>{{CompatGeckoDesktop("25.0")}}</td> + <td>{{CompatNo}}</td> + <td>12</td> + <td>{{CompatOpera(32.0)}}</td> + <td>{{CompatSafari("7.1")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Edge</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("25.0")}}</td> + <td>{{CompatNo}}</td> + <td>12</td> + <td>{{CompatNo}}</td> + <td>8.0</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>{{jsxref("Array.prototype.findIndex()")}}</li> + <li>{{jsxref("Array.prototype.every()")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/array/findindex/index.html b/files/it/web/javascript/reference/global_objects/array/findindex/index.html new file mode 100644 index 0000000000..f9f2f65791 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/array/findindex/index.html @@ -0,0 +1,182 @@ +--- +title: Array.prototype.findIndex() +slug: Web/JavaScript/Reference/Global_Objects/Array/findIndex +translation_of: Web/JavaScript/Reference/Global_Objects/Array/findIndex +--- +<div>{{JSRef}}</div> + +<p><span class="seoSummary">Il metodo <code><strong>findIndex()</strong></code> restituisce l'<strong>indice</strong> del primo elemento nell'array <strong>che soddisfa la funzione di testing fornita</strong>. Altrimenti, restituisce <code>-1</code>, indicando che nessun elemento ha superato il test.</span></p> + +<div>{{EmbedInteractiveExample("pages/js/array-findindex.html","shorter")}}</div> + +<div class="hidden">Il sorgente di questo esempio interattivo è salvato una repository GitHub. Se volessi contribuire al progetto degli esempi interattivi, clona <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and inviaci una pull request.</div> + +<p>Guarda anche il metodo {{jsxref("Array.find", "find()")}}, che restituisce il <strong>valore</strong> dell'elemento anziché il suo indice.</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox notranslate"><var>arr</var>.findIndex(<var>callback</var>( <var>elemento</var>[,<em>indice</em>[, <var>array</var>]] )[, <var>thisArg</var>]) +</pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt><code><var>callback</var></code></dt> + <dd> + <p>Una funzione da eseguire su ognuno dei valori finché la funzione non resitituisce <code>true</code>, indicando che l'elemento che soddisfa la condizione è stato trovato.</p> + + <p>Prende in input tre argomenti:</p> + + <dl> + <dt><code><var>elemento</var></code></dt> + <dd>L'elemento dell'array che viene processato.</dd> + <dt><code><var>indice</var></code> {{optional_inline}}</dt> + <dd>L'indice dell'elemento dell'array che viene processato.</dd> + <dt><code><var>array</var></code> {{optional_inline}}</dt> + <dd>L'array su cui è stato chiamato <code>findIndex()</code>.</dd> + </dl> + </dd> + <dt><code><var>thisArg</var></code> {{optional_inline}}</dt> + <dd>Oggetto da usare come <code>this</code> quando viene eseguita la <code><var>callback</var></code>.</dd> +</dl> + +<h3 id="Valore_restituito">Valore restituito</h3> + +<p>L'indice dell primo elemento dell'array che supera il test. Altrimenti <code>-1</code>.</p> + +<h2 id="Descrizione">Descrizione</h2> + +<p><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Il metodo </span></font>findIndex()</code> esegue la <code><var>callback</var></code> una volta per ogni indice nell'array finché non trova quello per cui la <code><var>callback</var></code> ritorna un valore {{Glossary("truthy")}}.</p> + +<p>Se l'elemento viene trovato, <code>findIndex()</code> restitutisce immediatamente l'idice dell'elemento. Se <code><var>callback</var></code> non restituisce mai un valore {{Glossary("truthy")}} (o la <code>length</code> dell'array è <code>0</code>), <code>findIndex()</code> restituisce <code>-1</code>.</p> + +<div class="blockIndicator note"> +<p><strong>Caso limite: </strong>A differenza di altri metodi per array come {{jsxref("Array.some()")}}, <code><var>callback</var></code> viene eseguita anche per gli indici con valori non assegnati.</p> +</div> + +<p><code><var>callback</var></code> è invocata con tre argomenti:</p> + +<ol> + <li>Il valore dell'elemento</li> + <li>L'indice dell'elemento</li> + <li>L'oggetto Array che viene percorso</li> +</ol> + +<p>Se viene passato a <code>findIndex()</code> un parametro <code><var>thisArg</var></code>, sarà usato come <code>this</code> in ogni invocazione di <code><var>callback</var></code>. Se non viene passato si usa {{jsxref("undefined")}}.</p> + +<p>The range of elements processed by <code>findIndex()</code> is set before the first invocation of <code><var>callback</var></code>. <code><var>callback</var></code> will not process the elements appended to the array after the call to <code>findIndex()</code> begins. If an existing, unvisited element of the array is changed by <code><var>callback</var></code>, its value passed to the <code><var>callback</var></code> will be the value at the time <code>findIndex()</code> visits the element's index.</p> + +<p>Elements that are <a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete">deleted</a> are still visited.</p> + +<h2 id="Polyfill">Polyfill</h2> + +<pre class="brush: js notranslate">// https://tc39.github.io/ecma262/#sec-array.prototype.findindex +if (!Array.prototype.findIndex) { + Object.defineProperty(Array.prototype, 'findIndex', { + value: function(predicate) { + // 1. Let O be ? ToObject(this value). + if (this == null) { + throw new TypeError('"this" is null or not defined'); + } + + var o = Object(this); + + // 2. Let len be ? ToLength(? Get(O, "length")). + var len = o.length >>> 0; + + // 3. If IsCallable(predicate) is false, throw a TypeError exception. + if (typeof predicate !== 'function') { + throw new TypeError('predicate must be a function'); + } + + // 4. If thisArg was supplied, let T be thisArg; else let T be undefined. + var thisArg = arguments[1]; + + // 5. Let k be 0. + var k = 0; + + // 6. Repeat, while k < len + while (k < len) { + // a. Let Pk be ! ToString(k). + // b. Let kValue be ? Get(O, Pk). + // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)). + // d. If testResult is true, return k. + var kValue = o[k]; + if (predicate.call(thisArg, kValue, k, o)) { + return k; + } + // e. Increase k by 1. + k++; + } + + // 7. Return -1. + return -1; + }, + configurable: true, + writable: true + }); +} +</pre> + +<p>If you need to support truly obsolete JavaScript engines that do not support {{jsxref("Object.defineProperty")}}, it is best not to polyfill <code>Array.prototype</code> methods at all, as you cannot make them non-enumerable.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Find_the_index_of_a_prime_number_in_an_array">Find the index of a prime number in an array</h3> + +<p>The following example returns the index of the first element in the array that is a prime number, or <code>-1</code> if there is no prime number.</p> + +<pre class="brush: js notranslate">function isPrime(num) { + for (let i = 2; num > i; i++) { + if (num % i == 0) { + return false; + } + } + return num > 1; +} + +console.log([4, 6, 8, 9, 12].findIndex(isPrime)); // -1, not found +console.log([4, 6, 7, 9, 12].findIndex(isPrime)); // 2 (array[2] is 7) +</pre> + +<h3 id="Find_index_using_arrow_function">Find index using arrow function</h3> + +<p>The following example finds the index of a fruit using an arrow function:</p> + +<pre class="brush: js notranslate">const fruits = ["apple", "banana", "cantaloupe", "blueberries", "grapefruit"]; + +const index = fruits.findIndex(fruit => fruit === "blueberries"); + +console.log(index); // 3 +console.log(fruits[index]); // blueberries +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.findindex', 'Array.prototype.findIndex')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.findIndex")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Array.prototype.find()")}}</li> + <li>{{jsxref("Array.prototype.indexOf()")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/array/flat/index.html b/files/it/web/javascript/reference/global_objects/array/flat/index.html new file mode 100644 index 0000000000..3c5a81ed4b --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/array/flat/index.html @@ -0,0 +1,159 @@ +--- +title: Array.prototype.flat() +slug: Web/JavaScript/Reference/Global_Objects/Array/flat +tags: + - Array + - JavaScript + - Prototype + - Referenza + - flat + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/Array/flat +--- +<div></div> + +<div>{{JSRef}}</div> + +<p><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Il metodo </span></font><strong>flat()</strong></code> crea un nuovo array con tutti gli elementi dei propri sotto-array concatenati ricorsivamente al suo interno fino alla profondità specificata.</p> + +<p class="hidden">\{{EmbedInteractiveExample("pages/js/array-flatten.html")}}</p> + +<p class="hidden">Il codice sorgente per questo esempio interattivo è mantenuto in una repository GitHub. Se vuoi contribuire al progetto degli esempi interattivi, clona <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> e inviaci una pull request.</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox notranslate"><var>var newArray = arr</var>.flat(<em>[profondità]</em>);</pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">profondità</span></font> {{optional_inline}}</dt> + <dd>Il livello di profondità che specifica quanto a fondo la struttura di array annidati deve essere appianata. Default a 1.</dd> +</dl> + +<h3 id="Valore_di_ritorno">Valore di ritorno</h3> + +<p>Un nuovo array con gli elementi dei sotto-array concatenati al suo interno.</p> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Appianare_array_annidati">Appianare array annidati</h3> + +<pre class="brush: js notranslate">var arr1 = [1, 2, [3, 4]]; +arr1.flat(); +// [1, 2, 3, 4] + +var arr2 = [1, 2, [3, 4, [5, 6]]]; +arr2.flat(); +// [1, 2, 3, 4, [5, 6]] + +var arr3 = [1, 2, [3, 4, [5, 6]]]; +arr3.flat(2); +// [1, 2, 3, 4, 5, 6] +</pre> + +<h3 id="Appianamento_e_slot_vuoti_negli_array">Appianamento e slot vuoti negli array</h3> + +<p>Il metodo flat rimuove gli slot vuoti in un array:</p> + +<pre class="brush: js notranslate">var arr4 = [1, 2, , 4, 5]; +arr4.flat(); +// [1, 2, 4, 5] +</pre> + +<h2 id="Alternative">Alternative</h2> + +<h3 id="reduce_e_concat"><code>reduce</code> e <code>concat</code></h3> + +<pre class="brush: js notranslate">var arr1 = [1, 2, [3, 4]]; +arr1.flat(); + +//appianare array di un livello +arr1.reduce((acc, val) => acc.concat(val), []);// [1, 2, 3, 4] + +//o +const flatSingle = arr => [].concat(...arr); +</pre> + +<pre class="brush: js notranslate">//abilitare appianamento a una certà profondità usando reduce e concat +var arr1 = [1,2,3,[1,2,3,4, [2,3,4]]]; + +function flattenDeep(arr1) { + return arr1.reduce((acc, val) => Array.isArray(val) ? acc.concat(flattenDeep(val)) : acc.concat(val), []); +} +flattenDeep(arr1);// [1, 2, 3, 1, 2, 3, 4, 2, 3, 4] +</pre> + +<pre class="brush: js notranslate">//appianamento profondo non ricorsivo usando uno stack +var arr1 = [1,2,3,[1,2,3,4, [2,3,4]]]; +function flatten(input) { + const stack = [...input]; + const res = []; + while (stack.length) { + // rimozione valore dallo stack + const next = stack.pop(); + if (Array.isArray(next)) { + // reinserimento degli elementi degli array, non modifica l'input originale + stack.push(...next); + } else { + res.push(next); + } + } + //reverse per ripristinare l'ordine originario + return res.reverse(); +} +flatten(arr1);// [1, 2, 3, 1, 2, 3, 4, 2, 3, 4] +</pre> + +<pre class="brush: js notranslate">//appianamento profondo ricorsivo +function flatten(array) { + var flattend = []; + !(function flat(array) { + array.forEach(function(el) { + if (Array.isArray(el)) flat(el); + else flattend.push(el); + }); + })(array); + return flattend; +} +</pre> + +<div class="hidden"> +<p>Per favore, non aggiungere polyfill a questo articolo. Per referenze, controllare: <a href="https://discourse.mozilla.org/t/mdn-rfc-001-mdn-wiki-pages-shouldnt-be-a-distributor-of-polyfills/24500">https://discourse.mozilla.org/t/mdn-rfc-001-mdn-wiki-pages-shouldnt-be-a-distributor-of-polyfills/24500</a></p> +</div> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commenti</th> + </tr> + <tr> + <td> + <p><a href="https://tc39.github.io/proposal-flatMap/#sec-Array.prototype.flat"><code>Array.prototype.flat</code> proposal</a></p> + </td> + <td>Finished (4)</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + +<div> +<div class="hidden">La tabella di compatibilità in questa pagina è generata da dati strutturati. Per favore controlla <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e mandaci una pull request se vuoi contribuire.</div> + +<p>{{Compat("javascript.builtins.Array.flat")}}</p> +</div> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>{{jsxref("Array.prototype.flatMap()")}}</li> + <li>{{jsxref("Array.prototype.map()")}}</li> + <li>{{jsxref("Array.prototype.reduce()")}}</li> + <li>{{jsxref("Array.prototype.concat()")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/array/flatmap/index.html b/files/it/web/javascript/reference/global_objects/array/flatmap/index.html new file mode 100644 index 0000000000..4397fd7c5d --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/array/flatmap/index.html @@ -0,0 +1,142 @@ +--- +title: Array.prototype.flatMap() +slug: Web/JavaScript/Reference/Global_Objects/Array/flatMap +translation_of: Web/JavaScript/Reference/Global_Objects/Array/flatMap +--- +<div>{{JSRef}}</div> + +<p>Il metodo <code><strong>flatMap()</strong></code> prima mappa ogni elemento eseguendo la funzione passata come parametro, poi appiattisce il risultato in un nuovo array. Il comportamento è identico a una chiamata a {{jsxref("Array.prototype.map","map()")}} seguita da un {{jsxref("Array.prototype.flat","flat()")}} con profondità 1, ma <code>flatMap()</code> in questo caso è la soluzione migliore perché è più efficente delle due chiamate separate.</p> + +<p class="hidden">{{EmbedInteractiveExample("pages/js/array-flatmap.html")}}</p> + + + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox notranslate"><var>var new_array = arr</var>.flatMap(function <var>callback(currentValue[, index[, array]]) { + // restituisci un elemento per il nuovo array +}</var>[, <var>thisArg</var>])</pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Funzione per produrre un elemento del nuovo Array, prevede a sua volta tre parametri: + <dl> + <dt></dt> + <dt><code>currentValue</code></dt> + <dd>L'elemento che si sta processando.</dd> + <dt><code>index</code>{{optional_inline}}</dt> + <dd>L'indice dell'elemento corrente.</dd> + <dt><code>array</code>{{optional_inline}}</dt> + <dd>L'array che si sta processando con <code>map</code>.</dd> + </dl> + </dd> + <dt><code>thisArg</code>{{optional_inline}}</dt> + <dd>Valore usato come <code>this</code> mentre si esegue la <code>callback</code>.</dd> +</dl> + +<h3 id="Risultato">Risultato</h3> + +<p>Un nuovo array i cui elementi sono il risultato della chiamata a <code>callback</code>, "appiattiti" ad una profondità di 1</p> + +<h2 id="Descrizione">Descrizione</h2> + +<p>Guarda {{jsxref("Array.prototype.map()")}} per una descrizione dettagliata della funzione <code>callback</code>. <code>flatMap</code> è identico a una chiamata a <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a></code> seguita da una chiamata <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flat">flat</a></code> con una profondità di 1.</p> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="map_e_flatMap"><code>map()</code> e <code>flatMap()</code></h3> + +<pre class="brush: js notranslate">let arr1 = [1, 2, 3, 4]; + +arr1.map(x => [x * 2]); +// [[2], [4], [6], [8]] + +arr1.flatMap(x => [x * 2]); +// [2, 4, 6, 8] + +// viene appiattito un solo elemento +arr1.flatMap(x => [[x * 2]]); +// [[2], [4], [6], [8]] +</pre> + +<p>Lo stesso risultato lo si può ottenere anche con la sola chiamata a map, di seguito è riportato un esempio migliore di uso di <code>flatMap</code>.</p> + +<p>Viene generata una lista di parole da una lista di frasi.</p> + +<pre class="brush: js notranslate">let arr1 = ["it's Sunny in", "", "California"]; + +arr1.map(x => x.split(" ")); +// [["it's","Sunny","in"],[""],["California"]] + +arr1.flatMap(x => x.split(" ")); +// ["it's","Sunny","in", "", "California"]</pre> + +<p>Notare che, a differenza di map da solo, la lunghezza dell'output è diversa tra le due chiamate e in particolare il risultato di <code>flatMap</code> non avrà la stessa lunghezza dell'input.</p> + +<h3 id="Aggiungere_e_rimuovere_elementi_durante_lesecuzione_di_map">Aggiungere e rimuovere elementi durante l'esecuzione di <code>map()</code></h3> + +<p><code>flatMap</code> può essere usato per aggiungere e rimuovere elementi durante l'esecuzione di <code>map</code>. In altre parole, offre la possibilità di mappare <em>molti a molti</em> (processando ogni input separatamente), anziché sempre <em>uno a uno</em>. In questo senso lavora come opposto di <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter">filter</a>. Basta restituire un array con un solo elemento per mantenere l'oggetto invariato, un array con più elementi, invece, aggiungerà questi al risultato, un array vuoto per rimuovere l'elemento corrente.</p> + +<pre class="brush: js notranslate">// Per rimuovere i numeri negativi e dividere i numeri dispari in un numero pari e un 1 +let a = [5, 4, -3, 20, 17, -33, -4, 18] +// |\ \ x | | \ x x | +// [4,1, 4, 20, 16, 1, 18] + +a.flatMap( (n) => + (n < 0) ? [] : + (n % 2 == 0) ? [n] : + [n-1, 1] +) + +// expected output: [4, 1, 4, 20, 16, 1, 18] +</pre> + +<h2 id="Alternative">Alternative</h2> + +<h3 id="reduce_and_concat"><code>reduce()</code> and <code>concat()</code></h3> + +<pre class="brush: js notranslate">var arr = [1, 2, 3, 4]; + +arr.flatMap(x => [x, x * 2]); +// si ottiene lo stesso risultato con +arr.reduce((acc, x) => acc.concat([x, x * 2]), []); +// [1, 2, 2, 4, 3, 6, 4, 8] +</pre> + +<p>Notare che questa soluzione non è efficente e non dovrebbe essere usata per array di grandi dimensioni: in ogni iterazione viene creato un nuovo array temporaneo che dovrà essere deallocato dal garbae collector, e copia gli elementi dall'array corrente (<code>acc</code>), in un nuovo array ad ogni iterazione invece di aggiungerli ad uno preesistente.</p> + +<div class="hidden"> +<p>Please do not add polyfills on this article. For reference, please check: <a href="https://discourse.mozilla.org/t/mdn-rfc-001-mdn-wiki-pages-shouldnt-be-a-distributor-of-polyfills/24500">https://discourse.mozilla.org/t/mdn-rfc-001-mdn-wiki-pages-shouldnt-be-a-distributor-of-polyfills/24500</a></p> +</div> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifica</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.flatmap', 'Array.prototype.flatMap')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_browser">Compatibilità browser</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.flatMap")}}</p> +</div> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>{{jsxref("Array.prototype.flat()")}}</li> + <li>{{jsxref("Array.prototype.map()")}}</li> + <li>{{jsxref("Array.prototype.reduce()")}}</li> + <li>{{jsxref("Array.prototype.concat()")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/array/foreach/index.html b/files/it/web/javascript/reference/global_objects/array/foreach/index.html new file mode 100644 index 0000000000..dbd4919852 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/array/foreach/index.html @@ -0,0 +1,331 @@ +--- +title: Array.prototype.forEach() +slug: Web/JavaScript/Reference/Global_Objects/Array/forEach +tags: + - Array + - ECMAScript 5 + - JavaScript + - Prototype + - Referenza + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/Array/forEach +--- +<div>{{JSRef}}</div> + +<p>Il metodo <code><strong>forEach()</strong></code> esegue una funzione fornita una volta per ogni elemento dell'array.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-foreach.html")}}</div> + + + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><var>arr</var>.forEach(<var>callback(currentValue [, index [, array]])</var>[, <var>thisArg</var>]);</pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Funzione da eseguire per ciascun elemento, prendendo tre argomenti:</dd> + <dd> + <dl> + <dt><code>currentValue</code></dt> + <dd>L'elemento corrente in elaborazione nell'array.</dd> + <dt><code>index</code> {{optional_inline}}</dt> + <dd>L'indice dell'elemento corrente in elaborazione nell'array.</dd> + <dt><code>array</code> {{optional_inline}}</dt> + <dd>L'array a cui viene applicato <code>forEach()</code>.</dd> + </dl> + </dd> + <dt><code>thisArg</code> {{optional_inline}}</dt> + <dd>Valore da utilizzare come <code>this</code> quando si esegue <code>callback</code>.</dd> +</dl> + +<h2 id="Descrizione">Descrizione</h2> + +<p><code>forEach()</code> esegue il <code>callback</code> fornito una volta per ciascun elemento presente nell'array in ordine crescente. Non è invocato per le proprietà dell'indice che sono state eliminate o non inizializzate (ad esempio su array sparsi).</p> + +<p><code>callback</code> viene invocato con tre argomenti:</p> + +<ul> + <li>il valore dell'elemento</li> + <li>l'indice dell'elemento</li> + <li>l'array che deve essere iterato</li> +</ul> + +<p>Se viene fornito il parametro <code>thisArg</code> a <code>forEach()</code>, verrà utilizzato come valore <code>this</code> del callback. Altrimenti, il valore {{jsxref("undefined")}} sarà usato come valore <code>this</code>. Il valore <code>this</code> alla fine osservabile da <code>callback</code> è determinato secondo <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this">le consuete regole per determinare il <code>this</code> visto da una funzione</a>.</p> + +<p>L'intervallo di elementi elaborati da <code>forEach()</code> viene impostato prima della prima chiamata del <code>callback</code>. Gli elementi aggiunti all'array dopo che la chiamata <code>forEach()</code> inizia non saranno calcolati da <code>callback</code>. Se i valori degli elementi esistenti dell'array vengono modificati, il valore passato a <code>callback</code> sarà il valore al momento in cui <code>forEach()</code> li visita; gli elementi che vengono cancellati prima di essere visitati non vengono visitati. Se gli elementi già visitati vengono rimossi (ad esempio usando {{jsxref("Array.prototype.shift()", "shift()")}}) durante l'iterazione, gli elementi successivi verranno saltati - vedi l'esempio sotto.</p> + +<p><code>forEach()</code> esegue la funzione <code>callback</code> una volta per ogni elemento dell'array; a differenza di {{jsxref("Array.prototype.map()", "map()")}} o {{jsxref("Array.prototype.reduce()", "reduce()")}} restituisce sempre {{jsxref("undefined")}} e non è concatenabile. Il tipico caso d'uso è eseguire effetti collaterali alla fine del chain.</p> + +<p><code>forEach()</code> non muta l'array su cui è chiamato (sebbene <code>callback</code>, se invocato, possa farlo).</p> + +<div class="note"> +<p>Non c'è modo di fermare o interrompere un loop <code>forEach()</code> se non lanciando un'eccezione. Se hai bisogno di un simile comportamento, il metodo <code>forEach()</code> è lo strumento sbagliato.</p> + +<p>La risoluzione anticipata può essere eseguita con:</p> + +<ul> + <li>Un loop semplice</li> + <li>Un loop <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a></li> + <li>{{jsxref("Array.prototype.every()")}}</li> + <li>{{jsxref("Array.prototype.some()")}}</li> + <li>{{jsxref("Array.prototype.find()")}}</li> + <li>{{jsxref("Array.prototype.findIndex()")}}</li> +</ul> + +<p>Gli altri metodi per array: {{jsxref("Array.prototype.every()")}}, {{jsxref("Array.prototype.some()")}}, {{jsxref("Array.prototype.find()")}}, e {{jsxref("Array.prototype.findIndex()")}} testano gli elementi dell'array con un predicato restituendo un valore di verità per determinare se è necessaria un'ulteriore iterazione.</p> +</div> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Convertire_un_loop_for_in_forEach">Convertire un loop for in forEach</h3> + +<pre class="brush:js">const items = ['item1', 'item2', 'item3']; +const copy = []; + +// prima +for (let i=0; i<items.length; i++) { + copy.push(items[i]); +} + +// dopo +items.forEach(function(item) { + copy.push(item); +}); +</pre> + +<h3 id="Stampa_del_contenuto_di_un_array">Stampa del contenuto di un array</h3> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> Per visualizzare il contenuto di un array nella console, puoi utilizzare <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Console/table">console.table()</a></code> che stamperà una versione formattata dell'array. L'esempio seguente illustra un altro modo per farlo, usando <code>forEach()</code>.</p> +</div> + +<p>Il seguente codice logga una linea per ogni elemento in un array:</p> + +<pre class="brush:js">function logArrayElements(element, index, array) { + console.log('a[' + index + '] = ' + element); +} + +// Nota che l'indice 2 viene saltato poiché non vi è alcun elemento +// in quella posizione nell'array. +[2, 5, , 9].forEach(logArrayElements); +// logga: +// a[0] = 2 +// a[1] = 5 +// a[3] = 9 +</pre> + +<h3 id="Usare_thisArg">Usare <code>thisArg</code></h3> + +<p>Il seguente esempio (inventato) aggiorna le proprietà di un oggetto da ciascuna voce dell'array:</p> + +<pre class="brush:js">function Counter() { + this.sum = 0; + this.count = 0; +} +Counter.prototype.add = function(array) { + array.forEach(function(entry) { + this.sum += entry; + ++this.count; + }, this); + // ^---- Nota +}; + +const obj = new Counter(); +obj.add([2, 5, 9]); +obj.count; +// 3 +obj.sum; +// 16 +</pre> + +<p>Poiché il parametro <code>thisArg</code> (<code>this</code>) viene fornito a <code>forEach()</code>, viene passato a <code>callback</code> ogni volta che viene richiamato, per essere utilizzato come valore <code>this</code>.</p> + +<div class="note"> +<p>Se si passa l'argomento della funzione utilizzando <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">un'espressione della funzione a freccia</a> il parametro <code>thisArg</code> può essere omesso poiché le funzioni a freccia associano in modo lessicale il valore {{jsxref("Operators/this", "this")}}.</p> +</div> + +<h3 id="Una_funzione_di_copia_di_oggetti">Una funzione di copia di oggetti</h3> + +<p>Il seguente codice crea una copia di un dato oggetto. Esistono diversi modi per creare una copia di un oggetto; il seguente è solo un modo e viene presentato per spiegare come funziona <code>Array.prototype.forEach()</code> usando le funzioni di meta proprietà ECMAScript 5 <code>Object.*</code>.</p> + +<pre class="brush: js">function copy(obj) { + const copy = Object.create(Object.getPrototypeOf(obj)); + const propNames = Object.getOwnPropertyNames(obj); + + propNames.forEach(function(name) { + const desc = Object.getOwnPropertyDescriptor(obj, name); + Object.defineProperty(copy, name, desc); + }); + + return copy; +} + +const obj1 = { a: 1, b: 2 }; +const obj2 = copy(obj1); // obj2 looks like obj1 now +</pre> + +<h3 id="Se_l'array_viene_modificato_durante_l'iterazione_altri_elementi_potrebbero_essere_saltati.">Se l'array viene modificato durante l'iterazione, altri elementi potrebbero essere saltati.</h3> + +<p>L'esempio seguente registra "uno", "due", "quattro". Quando viene raggiunta la voce contenente il valore "due", la prima voce dell'intero array viene spostata, il che comporta il trasferimento di tutte le voci rimanenti in una posizione. Poiché l'elemento "quattro" è ora in una posizione precedente nell'array, "tre" verrà saltato. <code>forEach()</code> non esegue una copia dell'array prima di iterare.</p> + +<pre class="brush:js">var words = ['uno', 'due', 'tre', 'quattro']; +words.forEach(function(word) { + console.log(word); + if (word === 'due') { + words.shift(); + } +}); +// uno +// due +// quattro +</pre> + +<h3 id="Appiattire_un_array">Appiattire un array</h3> + +<p>Il seguente esempio è qui solo per scopi didattici. Se si desidera appiattire un array usando metodi built-in, è possibile utilizzare {{jsxref("Array.prototype.flat()")}} (che dovrebbe essere parte di ES2019 e già implementato in alcuni browser).</p> + +<pre class="brush: js">/** + * Flattens ha passato un array in un array dimensionale + * + * @params {array} arr + * @returns {array} + */ +function flatten(arr) { + const result = [] + + arr.forEach((i) => { + if (Array.isArray(i)) { + result.push(...flatten(i)) + } else { + result.push(i) + } + }) + + return result +} + +// Uso +const problem = [1, 2, 3, [4, 5, [6, 7], 8, 9]] + +flatten(problem) // [1, 2, 3, 4, 5, 6, 7, 8, 9] +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p><code>forEach()</code> è stato aggiunto allo standard ECMA-262 nella quinta edizione; in quanto tale potrebbe non essere presente in altre implementazioni dello standard. È possibile aggirare questo problema inserendo il seguente codice all'inizio degli script, consentendo l'uso di <code>forEach()</code> nelle implementazioni che non lo supportano in modo nativo. Questo algoritmo è esattamente quello specificato in ECMA-262, 5a edizione, assumendo {{jsxref("Object")}} e {{jsxref("TypeError")}} hanno i loro valori originali e quel <code>callback.call()</code> valuta il valore originale di {{jsxref("Function.prototype.call()")}}.</p> + +<pre class="brush: js">// Production steps of ECMA-262, Edition 5, 15.4.4.18 +// Reference: http://es5.github.io/#x15.4.4.18 +if (!Array.prototype.forEach) { + + Array.prototype.forEach = function(callback/*, thisArg*/) { + + var T, k; + + if (this == null) { + throw new TypeError('this is null or not defined'); + } + + // 1. Let O be the result of calling toObject() passing the + // |this| value as the argument. + var O = Object(this); + + // 2. Let lenValue be the result of calling the Get() internal + // method of O with the argument "length". + // 3. Let len be toUint32(lenValue). + var len = O.length >>> 0; + + // 4. If isCallable(callback) is false, throw a TypeError exception. + // See: http://es5.github.com/#x9.11 + if (typeof callback !== 'function') { + throw new TypeError(callback + ' is not a function'); + } + + // 5. If thisArg was supplied, let T be thisArg; else let + // T be undefined. + if (arguments.length > 1) { + T = arguments[1]; + } + + // 6. Let k be 0. + k = 0; + + // 7. Repeat while k < len. + while (k < len) { + + var kValue; + + // a. Let Pk be ToString(k). + // This is implicit for LHS operands of the in operator. + // b. Let kPresent be the result of calling the HasProperty + // internal method of O with argument Pk. + // This step can be combined with c. + // c. If kPresent is true, then + if (k in O) { + + // i. Let kValue be the result of calling the Get internal + // method of O with argument Pk. + kValue = O[k]; + + // ii. Call the Call internal method of callback with T as + // the this value and argument list containing kValue, k, and O. + callback.call(T, kValue, k, O); + } + // d. Increase k by 1. + k++; + } + // 8. return undefined. + }; +} +</pre> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.18', 'Array.prototype.forEach')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Definizione iniziale Implementato in JavaScript 1.6.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.foreach', 'Array.prototype.forEach')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.foreach', 'Array.prototype.forEach')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.forEach")}}</p> +</div> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>{{jsxref("Array.prototype.find()")}}</li> + <li>{{jsxref("Array.prototype.findIndex()")}}</li> + <li>{{jsxref("Array.prototype.map()")}}</li> + <li>{{jsxref("Array.prototype.filter()")}}</li> + <li>{{jsxref("Array.prototype.every()")}}</li> + <li>{{jsxref("Array.prototype.some()")}}</li> + <li>{{jsxref("Map.prototype.forEach()")}}</li> + <li>{{jsxref("Set.prototype.forEach()")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/array/from/index.html b/files/it/web/javascript/reference/global_objects/array/from/index.html new file mode 100644 index 0000000000..83baed1267 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/array/from/index.html @@ -0,0 +1,242 @@ +--- +title: Array.from() +slug: Web/JavaScript/Reference/Global_Objects/Array/from +tags: + - Array + - ECMAScript 2015 + - JavaScript + - Referenza + - metodo + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/from +--- +<div>{{JSRef}}</div> + +<p>Il metodo <code><strong>Array.from()</strong></code> crea una nuova istanza <code>Array</code> copiata superficialmente da un oggetto array-like o iterabile.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-from.html")}}</div> + + + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox">Array.from(arrayLike[, mapFn[, thisArg]]) +</pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt><code>arrayLike</code></dt> + <dd>Un oggetto array-like o iterabile da convertire in un array.</dd> + <dt><code>mapFn</code> {{Optional_inline}}</dt> + <dd>Funzione map per chiamare su ogni elemento dell'array.</dd> + <dt><code>thisArg</code> {{Optional_inline}}</dt> + <dd>Valore da utilizzare come <code>this</code> quando <code>mapFn</code> viene eseguita.</dd> +</dl> + +<h3 id="Valore_di_ritorno">Valore di ritorno</h3> + +<p>Una nuova istanza {{jsxref("Array")}}.</p> + +<h2 id="Descrizione">Descrizione</h2> + +<p><code>Array.from()</code> consente di creare <code>Array</code> da:</p> + +<ul> + <li>oggetti array-like (oggetti con una proprietà <code>length</code> ed elementi indicizzati) o</li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/iterable">oggetti iterabili</a> (oggetti in cui è possibile ottenere i suoi elementi, come ad esempio {{jsxref("Map")}} e {{jsxref("Set")}}).</li> +</ul> + +<p><code>Array.from()</code> ha un parametro opzionale <code>mapFn</code>, che ti permette di eseguire una funzione {{jsxref("Array.prototype.map", "map")}} su ogni elemento dell'array (o dell'oggetto sottoclasse) che si sta creando. Più chiaramente, <code>Array.from(obj, mapFn, thisArg)</code> ha lo stesso risultato di <code>Array.from(obj).map(mapFn, thisArg)</code>, tranne che non crea un array intermedio. Questo è particolarmente importante per alcune sottoclassi di array, come gli <a href="/en-US/docs/Web/JavaScript/Typed_arrays">array tipizzati</a>, poiché l'array intermedio avrebbe necessariamente valori troncati per adattarsi al tipo appropriato.</p> + +<p>La proprietà <code>length</code> del metodo <code>from()</code> è 1.</p> + +<p>In ES2015, la sintassi della classe consente la sottoclassificazione di entrambe le classi predefinite e definite dall'utente; di conseguenza, i metodi statici come <code>Array.from</code> sono "ereditati" dalle sottoclassi di <code>Array</code> e creano nuove istanze della sottoclasse, non <code>Array</code>.</p> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Array_da_una_String">Array da una <code>String</code></h3> + +<pre class="brush: js">Array.from('foo'); +// ["f", "o", "o"]</pre> + +<h3 id="Array_da_un_Set">Array da un <code>Set</code></h3> + +<pre class="brush: js">var s = new Set(['foo', window]); +Array.from(s); +// ["foo", window]</pre> + +<h3 id="Array_da_una_Map">Array da una <code>Map</code></h3> + +<pre class="brush: js">var m = new Map([[1, 2], [2, 4], [4, 8]]); +Array.from(m); +// [[1, 2], [2, 4], [4, 8]] + +var mapper = new Map([['1', 'a'], ['2', 'b']]); +Array.from(mapper.values()); +// ['a', 'b']; + +Array.from(mapper.keys()); +// ['1', '2']; +</pre> + +<h3 id="Array_di_un_oggetto_Array-like_(arguments)">Array di un oggetto Array-like (arguments)</h3> + +<pre class="brush: js">function f() { + return Array.from(arguments); +} + +f(1, 2, 3); + +// [1, 2, 3]</pre> + +<h3 id="Utilizzo_delle_funzioni_a_freccia_e_Array.from">Utilizzo delle funzioni a freccia e <code>Array.from</code></h3> + +<pre class="brush: js">// Utilizzando una funzione freccia come funzione map +// per manipolare gli elementi +Array.from([1, 2, 3], x => x + x); +// [2, 4, 6] + + +// Genera una sequenza di numeri +// Poiché l'array è inizializzato con `undefined` su ogni posizione, +// il valore di `v` sotto sarà `undefined` +Array.from({length: 5}, (v, i) => i); +// [0, 1, 2, 3, 4] +</pre> + +<h3 id="Generatore_di_sequenze_(range)">Generatore di sequenze (range)</h3> + +<pre class="brush: js">// Funzione del generatore di sequenze (comunemente denominata "range", ad esempio Clojure, PHP ecc.) +const range = (start, stop, step) => Array.from({ length: (stop - start) / step }, (_, i) => start + (i * step)); + +// Genera numeri range 0..4 +range(0, 5, 1); +// [0, 1, 2, 3, 4] + +// Genera l'alfabeto usando Array.from facendolo usare come sequenza +range('A'.charCodeAt(0), 'Z'.charCodeAt(0) + 1, 1).map(x => String.fromCharCode(x)); +// ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"] +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p><code>Array.from</code> è stato aggiunto allo standard ECMA-262 nella sesta edizione (ES2015); in quanto tale potrebbe non essere presente in altre implementazioni dello standard. È possibile aggirare questo problema inserendo il seguente codice all'inizio degli script, consentendo l'uso di <code>Array.from</code> in implementazioni che non lo supportano in modo nativo. Questo algoritmo è esattamente quello specificato in ECMA-262, 6a edizione, assumendo che <code>Object</code> e <code>TypeError</code> abbiano i loro valori originali e che <code>callback.call</code> valuti il valore originale di {{jsxref("Function.prototype.call")}}. Inoltre, poiché i veri iterabili non possono essere polyfilled, questa implementazione non supporta iterables generici come definito nella sesta edizione di ECMA-262.</p> + +<pre class="brush: js">// Production steps of ECMA-262, Edition 6, 22.1.2.1 +if (!Array.from) { + Array.from = (function () { + var toStr = Object.prototype.toString; + var isCallable = function (fn) { + return typeof fn === 'function' || toStr.call(fn) === '[object Function]'; + }; + var toInteger = function (value) { + var number = Number(value); + if (isNaN(number)) { return 0; } + if (number === 0 || !isFinite(number)) { return number; } + return (number > 0 ? 1 : -1) * Math.floor(Math.abs(number)); + }; + var maxSafeInteger = Math.pow(2, 53) - 1; + var toLength = function (value) { + var len = toInteger(value); + return Math.min(Math.max(len, 0), maxSafeInteger); + }; + + // The length property of the from method is 1. + return function from(arrayLike/*, mapFn, thisArg */) { + // 1. Let C be the this value. + var C = this; + + // 2. Let items be ToObject(arrayLike). + var items = Object(arrayLike); + + // 3. ReturnIfAbrupt(items). + if (arrayLike == null) { + throw new TypeError('Array.from requires an array-like object - not null or undefined'); + } + + // 4. If mapfn is undefined, then let mapping be false. + var mapFn = arguments.length > 1 ? arguments[1] : void undefined; + var T; + if (typeof mapFn !== 'undefined') { + // 5. else + // 5. a If IsCallable(mapfn) is false, throw a TypeError exception. + if (!isCallable(mapFn)) { + throw new TypeError('Array.from: when provided, the second argument must be a function'); + } + + // 5. b. If thisArg was supplied, let T be thisArg; else let T be undefined. + if (arguments.length > 2) { + T = arguments[2]; + } + } + + // 10. Let lenValue be Get(items, "length"). + // 11. Let len be ToLength(lenValue). + var len = toLength(items.length); + + // 13. If IsConstructor(C) is true, then + // 13. a. Let A be the result of calling the [[Construct]] internal method + // of C with an argument list containing the single item len. + // 14. a. Else, Let A be ArrayCreate(len). + var A = isCallable(C) ? Object(new C(len)) : new Array(len); + + // 16. Let k be 0. + var k = 0; + // 17. Repeat, while k < len… (also steps a - h) + var kValue; + while (k < len) { + kValue = items[k]; + if (mapFn) { + A[k] = typeof T === 'undefined' ? mapFn(kValue, k) : mapFn.call(T, kValue, k); + } else { + A[k] = kValue; + } + k += 1; + } + // 18. Let putStatus be Put(A, "length", len, true). + A.length = len; + // 20. Return A. + return A; + }; + }()); +} +</pre> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.from', 'Array.from')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-array.from', 'Array.from')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Definizione iniziale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + + + +<p>{{Compat("javascript.builtins.Array.from")}}</p> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>{{jsxref("Array")}}</li> + <li>{{jsxref("Array.prototype.map()")}}</li> + <li>{{jsxref("TypedArray.from()")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/array/includes/index.html b/files/it/web/javascript/reference/global_objects/array/includes/index.html new file mode 100644 index 0000000000..04dc817974 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/array/includes/index.html @@ -0,0 +1,162 @@ +--- +title: Array.prototype.includes() +slug: Web/JavaScript/Reference/Global_Objects/Array/includes +translation_of: Web/JavaScript/Reference/Global_Objects/Array/includes +--- +<div>{{JSRef}}</div> + +<p>Il metodo <code><strong>includes()</strong></code> determina se un array include un certo elemento, ritornando <code>true</code> o <code>false</code> a seconda del caso</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox">var <var>boolean</var> = <var>array</var>.includes(<var>searchElement</var>[, <var>fromIndex</var>])</pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt><code>searchElement</code></dt> + <dd>L'elemento da cercare.</dd> + <dt><code>fromIndex</code></dt> + <dd>Opzionale. La posizione nell'array da cui partire per cercare l'elemento <code>searchElement</code>. Un valore negativo ricerca dal valore di <code>array.length + fromIndex</code> in maniera ascendente. Il valore di default è 0.</dd> +</dl> + +<h3 id="Valore_di_ritorno">Valore di ritorno</h3> + +<p>Un {{jsxref("Boolean")}}.</p> + +<h2 id="Examples">Examples</h2> + +<pre class="brush: js">[1, 2, 3].includes(2); // true +[1, 2, 3].includes(4); // false +[1, 2, 3].includes(3, 3); // false +[1, 2, 3].includes(3, -1); // true +[1, 2, NaN].includes(NaN); // true +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<pre class="brush: js">if (!Array.prototype.includes) { + Array.prototype.includes = function(searchElement /*, fromIndex*/) { + 'use strict'; + if (this == null) { + throw new TypeError('Array.prototype.includes called on null or undefined'); + } + + var O = Object(this); + var len = parseInt(O.length, 10) || 0; + if (len === 0) { + return false; + } + var n = parseInt(arguments[1], 10) || 0; + var k; + if (n >= 0) { + k = n; + } else { + k = len + n; + if (k < 0) {k = 0;} + } + var currentElement; + while (k < len) { + currentElement = O[k]; + if (searchElement === currentElement || + (searchElement !== searchElement && currentElement !== currentElement)) { // NaN !== NaN + return true; + } + k++; + } + return false; + }; +} +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES7', '#sec-array.prototype.includes', 'Array.prototype.includes')}}</td> + <td>{{Spec2('ES7')}}</td> + <td>Definizione iniziale.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.includes', 'Array.prototype.includes')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Edge</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td> + <p>{{CompatChrome(47)}}</p> + </td> + <td>43</td> + <td>{{CompatNo}}</td> + <td>14279+</td> + <td>34</td> + <td>9</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td> + <p>{{CompatChrome(47)}}</p> + </td> + <td>43</td> + <td>{{CompatNo}}</td> + <td>34</td> + <td>9</td> + <td> + <p>{{CompatChrome(47)}}</p> + </td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>{{jsxref("TypedArray.prototype.includes()")}}</li> + <li>{{jsxref("String.prototype.includes()")}}</li> + <li>{{jsxref("Array.prototype.indexOf()")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/array/index.html b/files/it/web/javascript/reference/global_objects/array/index.html new file mode 100644 index 0000000000..844d1baf00 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/array/index.html @@ -0,0 +1,480 @@ +--- +title: Array +slug: Web/JavaScript/Reference/Global_Objects/Array +tags: + - Array + - JavaScript + - NeedsTranslation + - TopicStub +translation_of: Web/JavaScript/Reference/Global_Objects/Array +--- +<div>{{JSRef}}</div> + +<h2 id="Summary" name="Summary">Sommario</h2> + +<p>L'oggetto <strong><code>Array </code></strong>di JavaScript è un oggetto globale che è utilizzato nella costruzione di array; che sono oggetti di alto-livello del tipo lista.</p> + +<p><strong>Creare un Array</strong></p> + +<pre class="brush: js">var fruits = ["Apple", "Banana"]; + +console.log(fruits.length); +// 2 +</pre> + +<p><strong>Accedere (index into) ad un Array item</strong></p> + +<pre class="brush: js">var first = fruits[0]; +// Apple + +var last = fruits[fruits.length - 1]; +// Banana +</pre> + +<p><strong>Loop in un Array</strong></p> + +<pre class="brush: js">fruits.forEach(function (item, index, array) { + console.log(item, index); +}); +// Apple 0 +// Banana 1 +</pre> + +<p><strong>Aggiungere alla fine di un Array</strong></p> + +<pre class="brush: js">var newLength = fruits.push("Orange"); +// ["Apple", "Banana", "Orange"] +</pre> + +<p><strong>Rimuovere dalla fine di un Array</strong></p> + +<pre class="brush: js">var last = fruits.pop(); // remove Orange (from the end) +// ["Apple", "Banana"]; +</pre> + +<p><strong>Rimuovere dall'inizio di un Array</strong></p> + +<pre class="brush: js">var first = fruits.shift(); // remove Apple from the front +// ["Banana"]; +</pre> + +<p><strong>Aggiungere al'inizio di un Array</strong></p> + +<pre class="brush: js">var newLength = fruits.unshift("Strawberry") // add to the front +// ["Strawberry", "Banana"]; +</pre> + +<p><strong>Trovare l'indice di un elemento nell'Array</strong></p> + +<pre class="brush: js">fruits.push("Mango"); +// ["Strawberry", "Banana", "Mango"] + +var pos = fruits.indexOf("Banana"); +// 1 +</pre> + +<p><strong>Rimuovere un elemento tramite la Posizione dell'Indice</strong></p> + +<pre class="brush: js">var removedItem = fruits.splice(pos, 1); // this is how to remove an item +// ["Strawberry", "Mango"] +</pre> + +<p><strong>Copiare un Array</strong></p> + +<pre class="brush: js">var shallowCopy = fruits.slice(); // this is how to make a copy +// ["Strawberry", "Mango"] +</pre> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><code>[<var>element0</var>, <var>element1</var>, ..., <var>elementN</var>] +new Array(<var>element0</var>, <var>element1</var>[, ...[, <var>elementN</var>]]) +new Array(<var>arrayLength</var>)</code></pre> + +<dl> + <dt><code>element<em>N</em></code></dt> + <dd>Un array JavaScript è inizializzato con gli elementi dati, eccetto nel caso in cui un argomento singolo è passato al costruttore dell'<code>Array</code> e l'argomento è un numero. (Vedere sotto.) Notare che questo caso speciale si applica solo agli array JavaScript creati con il costruttore <code>Array</code>, non array literals creati con la sintassi a parentesi.</dd> + <dt><code>arrayLength</code></dt> + <dd>Se l'unico argomento passato al costruttore <code>Array</code> è un integer tra 0 e 2<sup>32</sup>-1 (inclusivo), questo restituisce un nuovo array JavaScript con la lunghezza settata su quel numero. Se l'argomento è un qualsiasi altro numero, un eccezione {{jsxref("Global_Objects/RangeError", "RangeError")}} è lanciata.</dd> +</dl> + +<h2 id="Descrizione">Descrizione</h2> + +<p>Gli Array sono come oggetti di tipo lista il cui prototipo ha metodi per performare operazioni trasversali e di mutazione. Nè la lunghezza di un array JavaScript o i tipi dei suoi elementi sono fissati. Poichè la grandezza della lunghezza di un array cresce o diminuisce in qualsiasi momento, gli array JavaScript non danno garanzia di essere compatti; questo dipende da come il programmatore sceglie di usarli. In generale, queste sono caratteristiche convenienti; ma se tali caratteristiche non fossero desiderabili per un utilizzo particolare, si potrebbe considerare di utilizzare i typed arrays.</p> + +<p>Alcuni pensano che<a class="external" href="http://www.andrewdupont.net/2006/05/18/javascript-associative-arrays-considered-harmful/"> non si dovrebbe un utilizzare un array come un associative array</a>. In ogni caso, si può utilizzare un semplice {{jsxref("Global_Objects/Object", "objects")}} invece, con i suoi avvertimenti. Vedere il post <a class="external" href="http://www.less-broken.com/blog/2010/12/lightweight-javascript-dictionaries.html">Lightweight JavaScript dictionaries with arbitrary keys</a> come esempio.</p> + +<h3 id="Accedere_ad_elementi_di_array">Accedere ad elementi di array </h3> + +<p>Gli array JavaScript sono indicizzati a zero: il primo elemento di un array è all'indice <code>0</code>, e l'ultimo elemento è all'indice uguale al valore della proprietà dell'array {{jsxref("Array.length", "length")}} meno 1. Usare un numero di indice invalido restituisce <code>undefined</code>.</p> + +<pre class="brush: js">var arr = ['this is the first element', 'this is the second element']; +console.log(arr[0]); // logs 'this is the first element' +console.log(arr[1]); // logs 'this is the second element' +console.log(arr[arr.length - 1]); // logs 'this is the second element' +</pre> + +<p>Gli elementi dell'Array sono proprietà dell'oggetto allo stesso modo che <code>toString</code> è una proprietà, ma provare ad accedere ad un elemento di un array come segue, lancia un errore di sintassi, poichè la proprietà del nome non è valida:</p> + +<pre class="brush: js">console.log(arr.0); // a syntax error +</pre> + +<p>Non c'è niente di speciale riguardo gli array JavaScript e la proprietà che causa questo. Le proprietà JavaScript che iniziano con un numero non possono essere referenziate con la notazione punto: e vi si deve accedere usando la notazione parentesi quadre. Per esempio, se si avesse un oggetto con una proprietà chiamata <code>'3d'</code>, la si potrebbe referenziare solamente utilizzando la notazione parentesi quadre. E.g.:</p> + +<pre class="brush: js">var years = [1950, 1960, 1970, 1980, 1990, 2000, 2010]; +console.log(years.0); // a syntax error +console.log(years[0]); // works properly +</pre> + +<pre class="brush: js">renderer.3d.setTexture(model, 'character.png'); // a syntax error +renderer['3d'].setTexture(model, 'character.png'); // works properly +</pre> + +<p>Notare che nell'esempio <code>3d</code>, <code>'3d'</code> doveva essere messo tra virgolette. E' possibile mettere tra virgolette anche gli indici dell'array JavaScript (e.g., <code>years['2']</code> invece di <code>years[2]</code>), anche se non necessario. Il 2 in <code>years[2]</code> è costretto in una stringa dal motore di JavaScript attraverso una implicita conversione <code>toString</code>. E' per questa ragione che <code>'2'</code> e <code>'02'</code> riferirebbero a due differenti slot nell'oggetto <code>years</code> ed il seguente esempio potrebbe essere <code>true</code>:</p> + +<pre class="brush: js">console.log(years['2'] != years['02']); +</pre> + +<p>Ugualmente, alle proprietà di oggetti che sono parole riservate(!) vi si può accedere come string literals in notazione parentesi quadrate (ma anche in notazione punto a partire dalla versione 40.0a2 di firefox):</p> + +<pre><code>var promise = { + 'var' : 'text', + 'array': [1, 2, 3, 4] +}; + +console.log(promise['var']);</code></pre> + +<h3 id="Relzione_tra_length_e_proprietà_numeriche">Relzione tra <code>length</code> e proprietà numeriche</h3> + +<p>Una proprietà di un array JavaScript {{jsxref("Array.length", "length")}} e proprietà numeriche sono connesse. Molti dei metodi integrati di array(e.g., {{jsxref("Array.join", "join")}}, {{jsxref("Array.slice", "slice")}}, {{jsxref("Array.indexOf", "indexOf")}}, etc.) tengono in conto del valore della proprietà dell'array {{jsxref("Array.length", "length")}} quando sono chiamati. Altri metodi(e.g., {{jsxref("Array.push", "push")}}, {{jsxref("Array.splice", "splice")}}, etc.) risultano nell'aggiornamento della proprietà{{jsxref("Array.length", "length")}} dell'array.</p> + +<pre class="brush: js">var fruits = []; +fruits.push('banana', 'apple', 'peach'); + +console.log(fruits.length); // 3 +</pre> + +<p>Quando si setta una proprietà su un array JavaScript, quando la proprietà è un valido indice di array e quell'iindice è al di fuori dei limiti dell'array, il motore aggiornerà la proprietà {{jsxref("Array.length", "length")}} in accordo:</p> + +<pre class="brush: js">fruits[5] = 'mango'; +console.log(fruits[5]); // 'mango' +console.log(Object.keys(fruits)); // ['0', '1', '2', '5'] +console.log(fruits.length); // 6 +</pre> + +<p>Aumentando{{jsxref("Array.length", "length")}}.</p> + +<pre class="brush: js">fruits.length = 10; +console.log(Object.keys(fruits)); // ['0', '1', '2', '5'] +console.log(fruits.length); // 10 +</pre> + +<p>Diminuendo la proprietà {{jsxref("Array.length", "length")}}, comunque cancella gli elementi.</p> + +<pre class="brush: js">fruits.length = 2; +console.log(Object.keys(fruits)); // ['0', '1'] +console.log(fruits.length); // 2 +</pre> + +<p>La spiegazione è ampliata nella pagina{{jsxref("Array.length")}}.</p> + +<h3 id="Creare_un_array_utilizzando_il_risultato_di_un_match">Creare un array utilizzando il risultato di un match</h3> + +<p>Il risultato di una corrispondenza tra una espressione regolare e una stringa può creare un array JavaScript. Tale array ha proprietà ed elementi che provvedono informazioni riguardo il match. Questo tipo di array è restituito da {{jsxref("RegExp.exec")}}, {{jsxref("String.match")}}, e {{jsxref("String.replace")}}. Per aiutare a spiegare queste proprietà ed elementi, vedere l'esempio seguente e fare riferimento alla tavola sottostante:</p> + +<pre class="brush: js">// Match one d followed by one or more b's followed by one d +// Remember matched b's and the following d +// Ignore case + +var myRe = /d(b+)(d)/i; +var myArray = myRe.exec('cdbBdbsbz'); +</pre> + +<p>Le proprietà ed elementi restituiti da questo match sono le seguenti:</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td class="header">Property/Element</td> + <td class="header">Description</td> + <td class="header">Example</td> + </tr> + <tr> + <td><code>input</code></td> + <td>Una proprietà read-only che riflette la stinga originale verso la quale l'espressione irregolare era stata abbinata.</td> + <td>cdbBdbsbz</td> + </tr> + <tr> + <td><code>index</code></td> + <td>Una proprietà read-only su indice base-zeroindex dell'abbinamento nella stringa.</td> + <td>1</td> + </tr> + <tr> + <td><code>[0]</code></td> + <td>Un elemento read-only che specifica gli ultimi caratteri abbinati.</td> + <td>dbBd</td> + </tr> + <tr> + <td><code>[1], ...[n]</code></td> + <td>Elementi read-only che specificano gli abbinamenti di sottostringa in parentesi, se inclusi nella espressione regolare. Il numero di possibili sottostringhe in parentesi è illimitato.</td> + <td>[1]: bB<br> + [2]: d</td> + </tr> + </tbody> +</table> + +<h2 id="Proprietà">Proprietà</h2> + +<dl> + <dt><code>Array.length</code></dt> + <dd>Il costruttore della proprietà lunghezza <code>Array</code> il cui valore è 1.</dd> + <dt>{{jsxref("Array.@@species", "get Array[@@species]")}}</dt> + <dd>La funzione del costruttore che è usata per creare oggetti derivati.</dd> + <dt>{{jsxref("Array.prototype")}}</dt> + <dd>Permette l'addizione di proprietà a tutti gli oggetti array.</dd> +</dl> + +<h2 id="Metodi">Metodi</h2> + +<dl> + <dt>{{jsxref("Array.from()")}} {{experimental_inline}}</dt> + <dd>Crea una nuova istanza <code>Array</code> da un oggetto del tipo array o iterabile.</dd> + <dt>{{jsxref("Array.isArray()")}}</dt> + <dd>Restituisce true se una variabile è un array, altrimenti false.</dd> + <dt>{{jsxref("Array.observe()")}} {{experimental_inline}}</dt> + <dd>In modo asincrono osserva i cambiamenti agli Arrays, come{{jsxref("Object.observe()")}} per gli oggetti. Provvede un flusso di cambiamenti in ordine di occorrenza.</dd> + <dt>{{jsxref("Array.of()")}} {{experimental_inline}}</dt> + <dd>Crea una nuova istanza <code>Array</code> con un variabile numero di argomenti, nonostante il numero o i tipi di argomenti.</dd> +</dl> + +<h2 id="Istanze_di_Array">Istanze di<code> Array</code> </h2> + +<p>Tutte le istanze di <code>Array</code> ereditano da {{jsxref("Array.prototype")}}. L'oggetto prototype del costruttore <code>Array</code> può essere modificato per influenzare tutte le istanze di <code>Array</code>.</p> + +<h3 id="Proprietà_2">Proprietà</h3> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Properties')}}</div> + +<h3 id="Metodi_2">Metodi</h3> + +<h4 id="Metodi_mutatori">Metodi mutatori</h4> + +<div>{{page('en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Mutator_methods')}}</div> + +<h4 id="Metodi_per_accedere">Metodi per accedere</h4> + +<div>{{page('en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Accessor_methods')}}</div> + +<h4 id="Metodi_di_iterazione">Metodi di iterazione</h4> + +<div>{{page('en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Iteration_methods')}} </div> + +<h2 id="Metodi_generici_Array"><code><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="background-color: #ffffff;">Metodi generici </span></font>Array</code> </h2> + +<div class="warning"> +<p><strong>Array generics are non-standard, deprecated and will get removed near future</strong>. Note that you can not rely on them cross-browser. However, there is a <a href="https://github.com/plusdude/array-generics">shim available on GitHub</a>.</p> +</div> + +<p>A volte si vorrebbe applicare metodi di array alle stringhe o altri oggetti del tipo array (come {{jsxref("Functions/arguments", "arguments", "", 1)}}). Facendo ciò, si tratta una stringa come un array di caratteri(o altrimenti trattare un non array come array). Per esempio, per controllare che ogni carattere nella variabile <var>str</var> sia una lettera, si scriverebbe:</p> + +<pre class="brush: js">function isLetter(character) { + return character >= 'a' && character <= 'z'; +} + +if (Array.prototype.every.call(str, isLetter)) { + console.log("The string '" + str + "' contains only letters!"); +} +</pre> + +<p>Tale notazione è dispersiva e JavaScript 1.6 ha introdotto un generico shorthand:</p> + +<pre class="brush: js">if (Array.every(str, isLetter)) { + console.log("The string '" + str + "' contains only letters!"); +} +</pre> + +<p>{{jsxref("Global_Objects/String", "Generics", "#String_generic_methods", 1)}} are also available on {{jsxref("Global_Objects/String", "String")}}.</p> + +<p>Queste no fanno parte dello standard ECMAScript (anche se ES2015 {{jsxref("Array.from()")}} può essere utilizzato per raggingere tale scopo). Ciò che segue è un aiuto per permetterene l'utilizzo in tutti i browser:</p> + +<pre class="brush: js">// Assumes Array extras already present (one may use polyfills for these as well) +(function() { + 'use strict'; + + var i, + // We could also build the array of methods with the following, but the + // getOwnPropertyNames() method is non-shimable: + // Object.getOwnPropertyNames(Array).filter(function(methodName) { + // return typeof Array[methodName] === 'function' + // }); + methods = [ + 'join', 'reverse', 'sort', 'push', 'pop', 'shift', 'unshift', + 'splice', 'concat', 'slice', 'indexOf', 'lastIndexOf', + 'forEach', 'map', 'reduce', 'reduceRight', 'filter', + 'some', 'every', 'find', 'findIndex', 'entries', 'keys', + 'values', 'copyWithin', 'includes' + ], + methodCount = methods.length, + assignArrayGeneric = function(methodName) { + if (!Array[methodName]) { + var method = Array.prototype[methodName]; + if (typeof method === 'function') { + Array[methodName] = function() { + return method.call.apply(method, arguments); + }; + } + } + }; + + for (i = 0; i < methodCount; i++) { + assignArrayGeneric(methods[i]); + } +}()); +</pre> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Creare_un_array">Creare un array</h3> + +<p>Il seguente esempio crea un array, <code>msgArray</code>, con una lunghezza di 0, poi assegna valori a <code>msgArray[0]</code> e <code>msgArray[99]</code>, cambiando la lunghezza dell'array a 100.</p> + +<pre class="brush: js">var msgArray = []; +msgArray[0] = 'Hello'; +msgArray[99] = 'world'; + +if (msgArray.length === 100) { + console.log('The length is 100.'); +} +</pre> + +<h3 id="Creare_un_array_bidimensionale">Creare un array bidimensionale</h3> + +<p>Ciò che segue crea una scacchiera come un array bidiensionale di stringhe. La prima mossa è fatta copiando la 'p' in (6,4) in (4,4). La vecchia posizione (6,4) è resa bianca.</p> + +<pre class="brush: js">var board = [ + ['R','N','B','Q','K','B','N','R'], + ['P','P','P','P','P','P','P','P'], + [' ',' ',' ',' ',' ',' ',' ',' '], + [' ',' ',' ',' ',' ',' ',' ',' '], + [' ',' ',' ',' ',' ',' ',' ',' '], + [' ',' ',' ',' ',' ',' ',' ',' '], + ['p','p','p','p','p','p','p','p'], + ['r','n','b','q','k','b','n','r'] ]; + +console.log(board.join('\n') + '\n\n'); + +// Move King's Pawn forward 2 +board[4][4] = board[6][4]; +board[6][4] = ' '; +console.log(board.join('\n')); +</pre> + +<p>Ecco l'output:</p> + +<pre class="eval">R,N,B,Q,K,B,N,R +P,P,P,P,P,P,P,P + , , , , , , , + , , , , , , , + , , , , , , , + , , , , , , , +p,p,p,p,p,p,p,p +r,n,b,q,k,b,n,r + +R,N,B,Q,K,B,N,R +P,P,P,P,P,P,P,P + , , , , , , , + , , , , , , , + , , , ,p, , , + , , , , , , , +p,p,p,p, ,p,p,p +r,n,b,q,k,b,n,r +</pre> + +<h2 id="Specificazioni">Specificazioni</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definizione iniziale.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4', 'Array')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Nuovi metodi aggiunti: {{jsxref("Array.isArray")}}, {{jsxref("Array.prototype.indexOf", "indexOf")}}, {{jsxref("Array.prototype.lastIndexOf", "lastIndexOf")}}, {{jsxref("Array.prototype.every", "every")}}, {{jsxref("Array.prototype.some", "some")}}, {{jsxref("Array.prototype.forEach", "forEach")}}, {{jsxref("Array.prototype.map", "map")}}, {{jsxref("Array.prototype.filter", "filter")}}, {{jsxref("Array.prototype.reduce", "reduce")}}, {{jsxref("Array.prototype.reduceRight", "reduceRight")}}</td> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-array-objects', 'Array')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Nuovi metodi aggiunti: {{jsxref("Array.from")}}, {{jsxref("Array.of")}}, {{jsxref("Array.prototype.find", "find")}}, {{jsxref("Array.prototype.findIndex", "findIndex")}}, {{jsxref("Array.prototype.fill", "fill")}}, {{jsxref("Array.prototype.copyWithin", "copyWithin")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_Browser">Compatibilità Browser </h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Vedere_anche">Vedere anche:</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Indexing_object_properties">JavaScript Guide: “Indexing object properties”</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Predefined_Core_Objects#Array_Object">JavaScript Guide: “Predefined Core Objects: <code>Array</code> Object”</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Array_comprehensions">Array comprehensions</a></li> + <li><a href="https://github.com/plusdude/array-generics">Polyfill for JavaScript 1.8.5 Array Generics and ECMAScript 5 Array Extras</a></li> + <li><a href="/en-US/docs/JavaScript_typed_arrays">Typed Arrays</a></li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/array/indexof/index.html b/files/it/web/javascript/reference/global_objects/array/indexof/index.html new file mode 100644 index 0000000000..658957c67d --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/array/indexof/index.html @@ -0,0 +1,226 @@ +--- +title: Array.prototype.indexOf() +slug: Web/JavaScript/Reference/Global_Objects/Array/indexOf +tags: + - Array + - JavaScript + - Prototype + - Referenza + - metodo + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/indexOf +--- +<div>{{JSRef}}</div> + +<p>Il metodo <code><strong>indexOf()</strong></code> restituisce il primo indice in cui è possibile trovare un determinato elemento nell'array o -1 se non è presente.</p> + +<div class="note"> +<p><strong>Note:</strong> Per il metodo String, consultare {{jsxref("String.prototype.indexOf()")}}.</p> +</div> + +<div>{{EmbedInteractiveExample("pages/js/array-indexof.html")}}</div> + + + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><var>arr</var>.indexOf(<var>searchElement[</var>, <var>fromIndex]</var>)</pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt><code>searchElement</code></dt> + <dd>Elemento da localizzare nell'array.</dd> + <dt><code>fromIndex</code> {{optional_inline}}</dt> + <dd>L'indice per iniziare la ricerca. Se l'indice è maggiore o uguale alla lunghezza dell'array, viene restituito -1, il che significa che l'array non verrà cercato. Se il valore dell'indice fornito è un numero negativo, viene preso come offset dalla fine dell'array. Nota: se l'indice fornito è negativo, l'array viene comunque ricercato da fronte a retro. Se l'indice fornito è 0, verrà cercato l'intero array. Predefinito: 0 (viene cercato l'intero array).</dd> +</dl> + +<h3 id="Valore_di_ritorno">Valore di ritorno</h3> + +<p>Il primo indice dell'elemento nell'array; <strong>-1</strong> se non trovato.</p> + +<h2 id="Descrizione">Descrizione</h2> + +<p><code>indexOf()</code> compara <code>searchElement</code> con gli elementi dell'array usando <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Using_the_equality_operators">strict equality</a> (lo stesso metodo utilizzato dall'operatore <code>===</code> o triple-equals).</p> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Usare_indexOf()">Usare <code>indexOf()</code></h3> + +<p>Nell'esempio seguente viene utilizzato <code>indexOf()</code> per individuare i valori in un array.</p> + +<pre class="brush: js">var array = [2, 9, 9]; +array.indexOf(2); // 0 +array.indexOf(7); // -1 +array.indexOf(9, 2); // 2 +array.indexOf(2, -1); // -1 +array.indexOf(2, -3); // 0 +</pre> + +<h3 id="Trovare_tutte_le_occorrenze_di_un_elemento">Trovare tutte le occorrenze di un elemento</h3> + +<pre class="brush: js">var indices = []; +var array = ['a', 'b', 'a', 'c', 'a', 'd']; +var element = 'a'; +var idx = array.indexOf(element); +while (idx != -1) { + indices.push(idx); + idx = array.indexOf(element, idx + 1); +} +console.log(indices); +// [0, 2, 4] +</pre> + +<h3 id="Trovare_se_un_elemento_esiste_nell'array_o_meno_ed_aggiornare_l'array">Trovare se un elemento esiste nell'array o meno ed aggiornare l'array</h3> + +<pre class="brush: js">function updateVegetablesCollection (veggies, veggie) { + if (veggies.indexOf(veggie) === -1) { + veggies.push(veggie); + console.log('New veggies collection is : ' + veggies); + } else if (veggies.indexOf(veggie) > -1) { + console.log(veggie + ' already exists in the veggies collection.'); + } +} + +var veggies = ['potato', 'tomato', 'chillies', 'green-pepper']; + +updateVegetablesCollection(veggies, 'spinach'); +// New veggies collection is : potato,tomato,chillies,green-pepper,spinach +updateVegetablesCollection(veggies, 'spinach'); +// spinach already exists in the veggies collection. +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p><code>indexOf()</code> è stato aggiunto allo standard ECMA-262 nella quinta edizione; in quanto tale potrebbe non essere presente in tutti i browser. Puoi aggirare questo problema utilizzando il seguente codice all'inizio degli script. Questo ti permetterà di usare <code>indexOf()</code> quando non c'è ancora alcun supporto nativo. Questo algoritmo corrisponde a quello specificato in ECMA-262, 5a edizione, assumendo che {{jsxref("Global_Objects/TypeError", "TypeError")}} e {{jsxref("Math.abs()")}} abbiano i loro valori originali.</p> + +<pre class="brush: js">if (!Array.prototype.indexOf) Array.prototype.indexOf = (function(Object, max, min){ + "use strict"; + return function indexOf(member, fromIndex) { + if(this===null||this===undefined)throw TypeError("Array.prototype.indexOf called on null or undefined"); + + var that = Object(this), Len = that.length >>> 0, i = min(fromIndex | 0, Len); + if (i < 0) i = max(0, Len+i); else if (i >= Len) return -1; + + if(member===void 0){ for(; i !== Len; ++i) if(that[i]===void 0 && i in that) return i; // undefined + }else if(member !== member){ for(; i !== Len; ++i) if(that[i] !== that[i]) return i; // NaN + }else for(; i !== Len; ++i) if(that[i] === member) return i; // all else + + return -1; // if the value was not found, then return -1 + }; +})(Object, Math.max, Math.min); +</pre> + +<p>Tuttavia, se sei più interessato a tutti i piccoli bit tecnici definiti dallo standard ECMA e meno preoccupati per le prestazioni o la concisione, potresti trovare questo polifratura più descrittivo per essere più utile.</p> + +<pre class="brush: js">// Production steps of ECMA-262, Edition 5, 15.4.4.14 +// Reference: http://es5.github.io/#x15.4.4.14 +if (!Array.prototype.indexOf) { + Array.prototype.indexOf = function(searchElement, fromIndex) { + + var k; + + // 1. Let o be the result of calling ToObject passing + // the this value as the argument. + if (this == null) { + throw new TypeError('"this" is null or not defined'); + } + + var o = Object(this); + + // 2. Let lenValue be the result of calling the Get + // internal method of o with the argument "length". + // 3. Let len be ToUint32(lenValue). + var len = o.length >>> 0; + + // 4. If len is 0, return -1. + if (len === 0) { + return -1; + } + + // 5. If argument fromIndex was passed let n be + // ToInteger(fromIndex); else let n be 0. + var n = fromIndex | 0; + + // 6. If n >= len, return -1. + if (n >= len) { + return -1; + } + + // 7. If n >= 0, then Let k be n. + // 8. Else, n<0, Let k be len - abs(n). + // If k is less than 0, then let k be 0. + k = Math.max(n >= 0 ? n : len - Math.abs(n), 0); + + // 9. Repeat, while k < len + while (k < len) { + // a. Let Pk be ToString(k). + // This is implicit for LHS operands of the in operator + // b. Let kPresent be the result of calling the + // HasProperty internal method of o with argument Pk. + // This step can be combined with c + // c. If kPresent is true, then + // i. Let elementK be the result of calling the Get + // internal method of o with the argument ToString(k). + // ii. Let same be the result of applying the + // Strict Equality Comparison Algorithm to + // searchElement and elementK. + // iii. If same is true, return k. + if (k in o && o[k] === searchElement) { + return k; + } + k++; + } + return -1; + }; +} +</pre> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.14', 'Array.prototype.indexOf')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Definizione iniziale Implementato in JavaScript 1.6.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.indexof', 'Array.prototype.indexOf')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.indexof', 'Array.prototype.indexOf')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.indexOf")}}</p> +</div> + +<h2 id="Note_di_compatibilità">Note di compatibilità</h2> + +<ul> + <li>A partire da Firefox 47 {{geckoRelease(47)}}, questo metodo non restituirà più <code>-0</code>. Ad esempio, <code>[0].indexOf(0, -0)</code> restituirà sempre <code>+0</code> ({{bug(1242043)}}).</li> +</ul> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>{{jsxref("Array.prototype.lastIndexOf()")}}</li> + <li>{{jsxref("TypedArray.prototype.indexOf()")}}</li> + <li>{{jsxref("String.prototype.indexOf()")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/array/isarray/index.html b/files/it/web/javascript/reference/global_objects/array/isarray/index.html new file mode 100644 index 0000000000..d7aaf864bf --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/array/isarray/index.html @@ -0,0 +1,133 @@ +--- +title: Array.isArray() +slug: Web/JavaScript/Reference/Global_Objects/Array/isArray +tags: + - Array + - ECMAScript 5 + - JavaScript + - Referenza + - metodo + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/isArray +--- +<div>{{JSRef}}</div> + +<p>Il metodo <code><strong>Array.isArray()</strong></code> determina se il valore passato è un {{jsxref("Array")}}.</p> + +<pre class="brush: js">Array.isArray([1, 2, 3]); // true +Array.isArray({foo: 123}); // false +Array.isArray('foobar'); // false +Array.isArray(undefined); // false +</pre> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox">Array.isArray(<var>value</var>)</pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt><code>value</code></dt> + <dd>Il valore da verificare.</dd> +</dl> + +<h3 id="Valore_di_ritorno">Valore di ritorno</h3> + +<p><code>true</code> se il valore è un {{jsxref("Array")}}; altrimenti, <code>false</code>.</p> + +<h2 id="Descrizione">Descrizione</h2> + +<p>Se il valore è un {{jsxref("Array")}}, viene ritornato <code>true</code>; altrimenti viene ritornato <code>false</code>.</p> + +<p>Vedi l'articolo <a href="http://web.mit.edu/jwalden/www/isArray.html">“Determining with absolute accuracy whether or not a JavaScript object is an array”</a> per maggiori dettagli. Data un'istanza {{jsxref("TypedArray")}}, viene ritornato sempre <code>false</code>.</p> + +<h2 id="Esempi">Esempi</h2> + +<pre class="brush: js">// tutte le seguenti chiamate ritornano true +Array.isArray([]); +Array.isArray([1]); +Array.isArray(new Array()); +Array.isArray(new Array('a', 'b', 'c', 'd')); +Array.isArray(new Array(3)); +// Fatto poco noto: Array.prototype stesso è un array: +Array.isArray(Array.prototype); + +// tutte le seguenti chiamate ritornano false +Array.isArray(); +Array.isArray({}); +Array.isArray(null); +Array.isArray(undefined); +Array.isArray(17); +Array.isArray('Array'); +Array.isArray(true); +Array.isArray(false); +Array.isArray(new Uint8Array(32)); +Array.isArray({ __proto__: Array.prototype }); +</pre> + +<h3 id="instanceof_vs_isArray"><code>instanceof</code> vs <code>isArray</code></h3> + +<p>Quando si verifica l'istanza <code>Array</code>, <code>Array.isArray</code> è preferito su <code>instanceof</code> perché funziona attraverso gli <code>iframes</code>.</p> + +<pre class="brush: js">var iframe = document.createElement('iframe'); +document.body.appendChild(iframe); +xArray = window.frames[window.frames.length-1].Array; +var arr = new xArray(1,2,3); // [1,2,3] + +// Verifica corretta dell'array +Array.isArray(arr); // true +// Considerato dannoso, perché non funziona attraverso iframe +arr instanceof Array; // false +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p>L'esecuzione del seguente codice prima di qualsiasi altro codice creerà <code>Array.isArray()</code> se non è nativamente disponibile.</p> + +<pre class="brush: js">if (!Array.isArray) { + Array.isArray = function(arg) { + return Object.prototype.toString.call(arg) === '[object Array]'; + }; +} +</pre> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.3.2', 'Array.isArray')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Definizione iniziale Implementato in JavaScript 1.8.5.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.isarray', 'Array.isArray')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.isarray', 'Array.isArray')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.isArray")}}</p> +</div> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>{{jsxref("Array")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/array/join/index.html b/files/it/web/javascript/reference/global_objects/array/join/index.html new file mode 100644 index 0000000000..8483c817ac --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/array/join/index.html @@ -0,0 +1,112 @@ +--- +title: Array.prototype.join() +slug: Web/JavaScript/Reference/Global_Objects/Array/join +tags: + - Array + - JavaScript + - Prototype + - Referenza + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/Array/join +--- +<div>{{JSRef}}</div> + +<p>Il metodo <code><strong>join()</strong></code> unisce tutti gli elementi di un array (o di un <a href="/en-US/docs/Web/JavaScript/Guide/Indexed_collections#Working_with_array-like_objects">array di </a>oggetti) in una stringa che viene restituita.</p> + +<pre class="brush: js">var a = ['Wind', 'Rain', 'Fire']; +a.join(); // 'Wind,Rain,Fire' +a.join('-'); // 'Wind-Rain-Fire'</pre> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><var>arr</var>.join() +<var>arr</var>.join(<var>separatore</var>)</pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt><code>separatore</code> {{optional_inline}}</dt> + <dd>Specifica una stringa che separa ogni coppia di elementi adiacenti dell'array. Il separatore è trasformato in una stringa, se necessario. Se omesso, gli elementi dell'array saranno separati da una virgola (","). Se il <code>separatore</code> è una stringa vuota, tutti gli elementi sono uniti senza alcun carattere intemedio.</dd> +</dl> + +<h3 id="Valore_di_risposta">Valore di risposta</h3> + +<p>Una stringa con tutti con tutti gli elementi dell'array uniti. Se <code><em>arr</em>.length</code> è <code>0</code>, viene restituita una stringa vuota.</p> + +<h2 id="Descrizione">Descrizione</h2> + +<p>Le stringe ottenute dalla conversione di tutti gli elementi dell'array sono unite in un unica stringa.</p> + +<div class="warning"> +<p>Se un elemento è <code>undefined</code> o <code>null</code>, sarà convertito in una stringa vuota.</p> +</div> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Quattro_modi_per_concatenare_un_array">Quattro modi per concatenare un array</h3> + +<p>Il seguente esempio crea un array, <code>a</code>, con tre elementi, quindi unisce gli elementi dell'array quattro volte: usando l'operatore di default, poi una virgola e uno spazio, poi un più e infine una stringa vuota.</p> + +<pre class="brush: js">var a = ['Wind', 'Rain', 'Fire']; +a.join(); // 'Wind,Rain,Fire' +a.join(', '); // 'Wind, Rain, Fire' +a.join(' + '); // 'Wind + Rain + Fire' +a.join(''); // 'WindRainFire'</pre> + +<h3 id="Unione_di_un_oggetto_di_tipo_array">Unione di un oggetto di tipo array</h3> + +<p>Il seguente esempio unisce un oggetto di tipo array (<code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a></code>), chiamando {{jsxref("Function.prototype.call")}} con <code>Array.prototype.join</code>.</p> + +<pre class="brush: js">function f(a, b, c) { + var s = Array.prototype.join.call(arguments); + console.log(s); // '<span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox objectBox-string">1,a,true'</span></span></span></span> +} +f(1, 'a', true);</pre> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifiche</th> + <th scope="col">Stato</th> + <th scope="col">Commenti</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definizione iniziale. Implementato in JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.5', 'Array.prototype.join')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.join', 'Array.prototype.join')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.join', 'Array.prototype.join')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_browser">Compatibilità browser</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.join")}}</p> +</div> + +<h2 id="Guarda_anche">Guarda anche</h2> + +<ul> + <li>{{jsxref("String.prototype.split()")}}</li> + <li>{{jsxref("Array.prototype.toString()")}}</li> + <li>{{jsxref("TypedArray.prototype.join()")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/array/keys/index.html b/files/it/web/javascript/reference/global_objects/array/keys/index.html new file mode 100644 index 0000000000..78212d221f --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/array/keys/index.html @@ -0,0 +1,74 @@ +--- +title: Array.prototype.keys() +slug: Web/JavaScript/Reference/Global_Objects/Array/keys +translation_of: Web/JavaScript/Reference/Global_Objects/Array/keys +--- +<div>{{JSRef}}</div> + +<p>Il metodo <code><strong>keys()</strong></code> ritorna un nuovo oggetto <code><strong>Array Iterator</strong></code> contenente le chiavi di ogni indice dell'array.</p> + +<pre class="brush: js">var arr = ['a', 'b', 'c']; +var iterator = arr.keys(); + +console.log(iterator.next()); // { value: 0, done: false } +console.log(iterator.next()); // { value: 1, done: false } +console.log(iterator.next()); // { value: 2, done: false } +console.log(iterator.next()); // { value: undefined, done: true } +</pre> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><var>arr</var>.keys()</pre> + +<h3 id="Valore_di_ritorno">Valore di ritorno</h3> + +<p>Un nuovo oggetto {{jsxref("Array")}}.</p> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="I_Key_iterator_non_ignorano_gli_elementi_vuoti">I Key iterator non ignorano gli elementi vuoti</h3> + +<pre class="brush: js">var arr = ['a', , 'c']; +var sparseKeys = Object.keys(arr); +var denseKeys = [...arr.keys()]; +console.log(sparseKeys); // ['0', '2'] +console.log(denseKeys); // [0, 1, 2] +</pre> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commenti</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-array.prototype.keys', 'Array.prototype.keys')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.keys', 'Array.prototype.keys')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.keys")}}</p> +</div> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>{{jsxref("Array.prototype.values()")}}</li> + <li>{{jsxref("Array.prototype.entries()")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Iteration_protocols">Iteration protocols</a></li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/array/lastindexof/index.html b/files/it/web/javascript/reference/global_objects/array/lastindexof/index.html new file mode 100644 index 0000000000..c4170455f6 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/array/lastindexof/index.html @@ -0,0 +1,169 @@ +--- +title: Array.prototype.lastIndexOf() +slug: Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf +tags: + - Array + - ECMAScript 5 + - JavaScript + - Protototipo + - Prototype + - metodo + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf +--- +<div>{{JSRef}}</div> + +<p>Il metodo <code><strong>lastIndexOf()</strong></code> ritorna l'ultimo indice nel quale l'elemento dato può essere trovato nell' array, o -1 se non presente. L'array verrà controllato al contrario, partendo da <code>fromIndex</code>.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-lastindexof.html")}}</div> + +<p class="hidden">Il codice sorgere per questo esempio interattivo è conservato all' interno di una repository di GitHub. Se vuoi contribuire all progetto di esempi interattivi, perfavore clona <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> e inviaci una pull request.</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><var>arr</var>.lastIndexOf(<var>searchElement</var>) +<var>arr</var>.lastIndexOf(<var>searchElement</var>, <var>fromIndex</var>) +</pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt><code>searchElement</code></dt> + <dd>Elemento da trovare nell' array.</dd> + <dt><code>fromIndex</code> {{optional_inline}}</dt> + <dd>L'indice da cui iniziare a cercare al contrario. Di defaults la lunghezza dell' array meno uno (<code>arr.length - 1</code>), quindi cercherà in tutto l'array. Se l'indice è uguale o maggiore alla lunghezza dell' array, l' elemento sarà cercato in tutto l'array. Se negativo, Verrà preso come offset dalla fine dell' array. Nota che anche se l'indice è negativo, l'array sarà controllato comunque al contrario. ISe l'indice calcolato è minore di 0, verrà ritornato -1, quindi non verrà effettuata la ricerca.</dd> +</dl> + +<h3 id="Valori_restituiti">Valori restituiti</h3> + +<p>L'ultimo indice dell' elemento nell' array; <strong>-1</strong> se non trovato.</p> + +<h2 id="Descrizione">Descrizione</h2> + +<p><code>lastIndexOf</code> compara <code>searchElement</code> a gli elementi dell' array usando <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Using_the_Equality_Operators">strict equality</a> (lo stesso metodo usato ===, o triple-equals, operator).</p> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Utilizzo_di_lastIndexOf">Utilizzo di <code>lastIndexOf</code></h3> + +<p>L'esempio seguente usa <code>lastIndexOf</code> per trovare i valori in un array.</p> + +<pre class="brush: js">var numbers = [2, 5, 9, 2]; +numbers.lastIndexOf(2); // 3 +numbers.lastIndexOf(7); // -1 +numbers.lastIndexOf(2, 3); // 3 +numbers.lastIndexOf(2, 2); // 0 +numbers.lastIndexOf(2, -2); // 0 +numbers.lastIndexOf(2, -1); // 3 +</pre> + +<h3 id="Trovare_tutte_le_posizioni_di_un_elemento">Trovare tutte le posizioni di un elemento</h3> + +<p>Il seguente esempio usa <code>lastIndexOf</code> per trovare tutti gli elementi nell' array, usando {{jsxref("Array.prototype.push", "push")}} per essere aggiunti in un array come vengono trovati.</p> + +<pre class="brush: js">var indices = []; +var array = ['a', 'b', 'a', 'c', 'a', 'd']; +var element = 'a'; +var idx = array.lastIndexOf(element); +while (idx != -1) { + indices.push(idx); + idx = (idx > 0 ? array.lastIndexOf(element, idx - 1) : -1); +} + +console.log(indices); +// [4, 2, 0] +</pre> + +<p>Nota che non abbiamo considerato <code>idx == 0</code>perchè l'elemento sarà sempre troavto indipendemente da <code>il parametro fromIndex</code> se è il primo elemento dell'array. TQuesto è diveso dal metodo {{jsxref("Array.prototype.indexOf", "indexOf")}}.</p> + +<h2 id="Polyfill">Polyfill</h2> + +<p><code>lastIndexOf</code> è stato aggiunto nello standard ECMA-262 nella 5° edizione; come può non essere trovato in altre implementazioni nello standard. Puoi aggirare questa cosa inserendo il seguente codice all' inizio del tuo script, permettendoti di usare <code>lastIndexOf</code> anche se non supportato nativamente.Questo algorittmo è esattamente quello descritto da ECMA-262, 5° edizione, assumendo{{jsxref("Object")}}, {{jsxref("TypeError")}}, {{jsxref("Number")}}, {{jsxref("Math.floor")}}, {{jsxref("Math.abs")}}, e {{jsxref("Math.min")}} abbiano il loro valore originale.</p> + +<pre class="brush: js">// Production steps of ECMA-262, Edition 5, 15.4.4.15 +// Reference: http://es5.github.io/#x15.4.4.15 +if (!Array.prototype.lastIndexOf) { + Array.prototype.lastIndexOf = function(searchElement /*, fromIndex*/) { + 'use strict'; + + if (this === void 0 || this === null) { + throw new TypeError(); + } + + var n, k, + t = Object(this), + len = t.length >>> 0; + if (len === 0) { + return -1; + } + + n = len - 1; + if (arguments.length > 1) { + n = Number(arguments[1]); + if (n != n) { + n = 0; + } + else if (n != 0 && n != (1 / 0) && n != -(1 / 0)) { + n = (n > 0 || -1) * Math.floor(Math.abs(n)); + } + } + + for (k = n >= 0 ? Math.min(n, len - 1) : len - Math.abs(n); k >= 0; k--) { + if (k in t && t[k] === searchElement) { + return k; + } + } + return -1; + }; +} +</pre> + +<p>Ancora, nota che questa implementazione mira alla compatibilità assoluta con <code>lastIndexOf</code> in Firefox e SpiderMonkey JavaScript engine, includendo alcuni casi che sono considerati estremi. ISe hai intenzione di usare questo in applicazioni reali, potresti calcolare <code>from</code> con un codice meno complicato se ignori questi casi.</p> + +<h2 id="Descrizione_2">Descrizione</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Descrizione</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.15', 'Array.prototype.lastIndexOf')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Definizione iniziale. Implementato in JavaScript 1.6.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.lastindexof', 'Array.prototype.lastIndexOf')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.lastindexof', 'Array.prototype.lastIndexOf')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_il_browser">Compatibilità con il browser</h2> + +<div> +<div class="hidden">La tabella della compatibilità in questa pagina è stata generata da strutture dati. Se vorresti contribuire ai dati, perfavore da un' occhiata a <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e inviaci una pull request.</div> + +<p>{{Compat("javascript.builtins.Array.lastIndexOf")}}</p> +</div> + +<h2 id="Note_di_compatibilità">Note di compatibilità</h2> + +<ul> + <li>Partendo da Firefox 47 {{geckoRelease(47)}}, <code>questo metodo non restituirà più -0</code>. Per esempio, <code>[0].lastIndexOf(0, -0)</code> Ora restituirà sempre <code>+0</code> ({{bug(1242043)}}).</li> +</ul> + +<h2 id="Guarda_anche">Guarda anche</h2> + +<ul> + <li>{{jsxref("Array.prototype.indexOf()")}}</li> + <li>{{jsxref("TypedArray.prototype.lastIndexOf()")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/array/length/index.html b/files/it/web/javascript/reference/global_objects/array/length/index.html new file mode 100644 index 0000000000..a36a6b5204 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/array/length/index.html @@ -0,0 +1,129 @@ +--- +title: Array.length +slug: Web/JavaScript/Reference/Global_Objects/Array/length +translation_of: Web/JavaScript/Reference/Global_Objects/Array/length +--- +<div>{{JSRef}}</div> + +<div>La proprieta' <strong>length</strong> setta o restituisce il numero di elementi in un array. E' un intero a 32 bit, sempre maggiore del piu' grande indice dell'array.</div> + +<div> </div> + +<pre class="brush: js">var items = ['shoes', 'shirts', 'socks', 'sweaters']; +items.length; + +// returns 4</pre> + +<h2 id="Descrizione">Descrizione</h2> + +<p>Puoi impostare la proprietà <strong>length</strong> di un array per troncare o estendere l'array stesso.</p> + +<pre class="brush: js">var a = [1,2,3]; +a.length=2; +// a is now [1, 2] + +a.length = 10 +// a is now [1, 2, undefined × 8] +</pre> + +<h3 id="sect1"> </h3> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Iterare_su_un_array">Iterare su un array</h3> + +<p>Nel seguente esempio, l'array <em>numbers</em> viene iterarato e ciascun elemento viene moltiplicato per 2.</p> + +<pre class="brush: js">var numbers = [1, 2, 3, 4, 5]; +var length = numbers.length; +for (var i = 0; i < length; i++) { + numbers[i] *= 2; +} +// numbers is now [2, 4, 6, 8, 10] +</pre> + +<h3 id="Specifiche">Specifiche</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifiche</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definizione iniziale.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.5.2', 'Array.length')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-properties-of-array-instances-length', 'Array.length')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-properties-of-array-instances-length', 'Array.length')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità">Compatibilità</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="sect2"> </h2> diff --git a/files/it/web/javascript/reference/global_objects/array/map/index.html b/files/it/web/javascript/reference/global_objects/array/map/index.html new file mode 100644 index 0000000000..808b4fc728 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/array/map/index.html @@ -0,0 +1,323 @@ +--- +title: Array.prototype.map() +slug: Web/JavaScript/Reference/Global_Objects/Array/map +tags: + - Array + - ECMAScript 5 + - JavaScript + - Prototype + - Referenza + - metodo + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/map +--- +<div>{{JSRef}}</div> + +<p>Il metodo <code><strong>map()</strong></code> crea un nuovo array con i risultati della chiamata di una funzione fornita su ogni elemento dell'array chiamante.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-map.html")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request." </p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><var>var new_array = arr</var>.map(function <var>callback(currentValue[, index[, array]]) { + </var>// Ritorna un elemento per new_array<var> +}</var>[, <var>thisArg</var>])</pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Funzione che produce un elemento del nuovo array, prendendo tre argomenti: + <dl> + <dt> </dt> + <dt><code>currentValue</code></dt> + <dd>L'elemento corrente in elaborazione nell'array.</dd> + <dt><code>index</code>{{optional_inline}}</dt> + <dd>L'indice dell'elemento corrente in elaborazione nell'array.</dd> + <dt><code>array</code>{{optional_inline}}</dt> + <dd>L'array a cui viene applicato <code>map</code>.</dd> + </dl> + </dd> + <dt><code>thisArg</code>{{optional_inline}}</dt> + <dd>Valore da utilizzare come <code>this</code> quando viene eseguito <code>callback</code>.</dd> +</dl> + +<h3 id="Valore_di_ritorno">Valore di ritorno</h3> + +<p>Un nuovo array con ciascun elemento che è il risultato della funzione di callback.</p> + +<h2 id="Descrizione">Descrizione</h2> + +<p><code>map</code> chiama il <code>callback</code> fornito <strong>una volta per ciascun elemento</strong> in un array, in ordine, e costruisce un nuovo array dai risultati. <code>callback</code> viene invocato solo per gli indici dell'array che hanno valori assegnati, incluso <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a>. Non viene chiamato per gli elementi mancanti dell'array (ovvero, gli indici che non sono mai stati impostati, che sono stati cancellati o a cui non è mai stato assegnato un valore).</p> + +<p>Poichè <code>map</code> costruisce un nuovo array, usarlo quando non si utilizza l'array restituito è un anti-pattern; usa <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach"><code>forEach</code></a> o <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for-of</a></code> invece. Segni che non dovresti usare map: A) Non stai usando l'array restituito, e/o B) Non stai restituendo un valore dal callback.</p> + +<p><code>callback</code> viene invocato con tre argomenti: il valore dell'elemento, l'indice dell'elemento e l'oggetto Array che viene iterato.</p> + +<p>Se viene fornito il parametro <code>thisArg</code> a <code>map</code>, verrà utilizzato come valore <code>this</code> del callback. Altrimenti, il valore {{jsxref("undefined")}} sarà usato come valore <code>this</code>. Il valore <code>this</code> alla fine osservabile da <code>callback</code> è determinato secondo <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this">le consuete regole per determinare il <code>this</code> visto da una funzione</a>.</p> + +<p><code>map</code> non muta l'array su cui è chiamato (sebbene <code>callback</code>, se invocato, possa farlo).</p> + +<p>L'intervallo di elementi elaborati da <code>map</code> viene impostato prima della prima chiamata del <code>callback</code>. Gli elementi aggiunti all'array dopo che la chiamata a <code>map</code> inizia non saranno calcolati da <code>callback</code>. Se i valori degli elementi esistenti dell'array vengono modificati, il valore passato a <code>callback</code> sarà il valore al momento in cui <code>map</code> li visita. Gli elementi che vengono cancellati dopo che la chiamata a <code>map</code> inizia e prima di essere visitati non vengono visitati.</p> + +<p>A causa dell'algoritmo definito nella specifica, se l'array su cui è stata chiamato <code>map</code> è sparso, l'array risultante sarà sparso, mantenendo vuoti gli stessi indici.</p> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Mappare_una_serie_di_numeri_ad_un_array_di_radici_quadrate">Mappare una serie di numeri ad un array di radici quadrate</h3> + +<p>Il seguente codice accetta un array di numeri e crea un nuovo array contenente le radici quadrate dei numeri nel primo array.</p> + +<pre class="brush: js">var numbers = [1, 4, 9]; +var roots = numbers.map(function(num) { +return Math.sqrt(num) +}); +// roots è ora [1, 2, 3] +// numbers è ancora [1, 4, 9] +</pre> + +<h3 id="Usare_map_per_riformattare_gli_oggetti_in_un_array">Usare <code>map</code> per riformattare gli oggetti in un array</h3> + +<p>Il seguente codice accetta un array di oggetti e crea un nuovo array contenente gli oggetti appena riformattati.</p> + +<pre class="brush: js">var kvArray = [{key: 1, value: 10}, + {key: 2, value: 20}, + {key: 3, value: 30}]; + +var reformattedArray = kvArray.map(obj =>{ + var rObj = {}; + rObj[obj.key] = obj.value; + return rObj; +}); +// reformattedArray è ora [{1: 10}, {2: 20}, {3: 30}], + +// kvArray è ancora: +// [{key: 1, value: 10}, +// {key: 2, value: 20}, +// {key: 3, value: 30}] +</pre> + +<h3 id="Mappare_un_array_di_numeri_usando_una_funzione_che_contiene_un_argomento">Mappare un array di numeri usando una funzione che contiene un argomento</h3> + +<p>Il codice seguente mostra come funziona <code>map</code> quando viene utilizzata una funzione che richiede un argomento. L'argomento verrà assegnato automaticamente da ciascun elemento dell'array mentre <code>map</code> itera l'array originale.</p> + +<pre class="brush: js">var numbers = [1, 4, 9]; +var doubles = numbers.map(function(num) { + return num * 2; +}); + +// doubles is now [2, 8, 18] +// numbers is still [1, 4, 9] +</pre> + +<h3 id="Usare_map_genericamente">Usare <code>map</code> genericamente</h3> + +<p>Questo esempio mostra come usare map su una {{jsxref("String")}} per ottenere un array di byte nella codifica ASCII che rappresenta i valori dei caratteri:</p> + +<pre class="brush: js">var a = Array.prototype.map.call('Hello World', function(x) { + return x.charCodeAt(0); +}); +// a ora equivale a [72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100] +</pre> + +<h3 id="Usare_map_con_querySelectorAll">Usare <code>map</code> con <code>querySelectorAll</code></h3> + +<p>Questo esempio mostra come iterare attraverso una raccolta di oggetti raccolti da <code>querySelectorAll</code>. Questo perchè <code>querySelectorAll</code> restituisce una <em><strong>NodeList</strong></em> che è una raccolta di oggetti.<br> + In questo caso restituiamo sullo schermo tutti i valori delle opzioni selezionate:</p> + +<pre class="brush: js">var elems = document.querySelectorAll('select option:checked'); +var values = Array.prototype.map.call(elems, function(obj) { + return obj.value; +}); +</pre> + +<p>Il modo più semplice sarebbe utilizzare il metodo {{jsxref("Array.from()")}}.</p> + +<h3 id="Caso_d'uso_ingannevole">Caso d'uso ingannevole</h3> + +<p><a href="http://www.wirfs-brock.com/allen/posts/166">(inspired by this blog post)</a></p> + +<p>È normale utilizzare il callback con un argomento (l'elemento che viene attraversato). Alcune funzioni sono anche comunemente utilizzate con un argomento, anche se accettano argomenti opzionali aggiuntivi. Queste abitudini possono portare a comportamenti confusi.</p> + +<pre class="brush: js" dir="rtl">// Consider: +['1', '2', '3'].map(parseInt); +// Mentre ci si potrebbe aspettare [1, 2, 3] +// Il risultato effettivo è [1, NaN, NaN] + +// parseInt è spesso usato con un argomento, ma ne prende due. +// Il primo è un'espressione e il secondo è la radice. +// Alla funzione di callback, Array.prototype.map passa 3 argomenti: +// l'elemento, l'indice e l'array +// Il terzo argomento è ignorato da parseInt, ma non il secondo, +// da qui l'eventuale confusione. Vedi il post del blog per maggiori dettagli +// Se il link non funziona +// ecco un esempio conciso dei passaggi di iterazione: +// parseInt(string, radix) -> map(parseInt(value, index)) +// first iteration (index is 0): parseInt('1', 0) // results in parseInt('1', 0) -> 1 +// second iteration (index is 1): parseInt('2', 1) // results in parseInt('2', 1) -> NaN +// third iteration (index is 2): parseInt('3', 2) // results in parseInt('3', 2) -> NaN + +function returnInt(element) { + return parseInt(element, 10); +} + +['1', '2', '3'].map(returnInt); // [1, 2, 3] +// Il risultato effettivo è un array di numeri (come previsto) + +// Come sopra, ma usando la sintassi della funzione a freccia concisa +['1', '2', '3'].map( str => parseInt(str) ); + +// Un modo più semplice per ottenere quanto sopra, evitando il "gotcha": +['1', '2', '3'].map(Number); // [1, 2, 3] +// ma a differenza di `parseInt` restituirà anche una notazione esponenziale mobile o (risolta): +['1.1', '2.2e2', '3e300'].map(Number); // [1.1, 220, 3e+300] +</pre> + +<p>Un output alternativo del metodo map che viene chiamato con parseInt come parametro viene eseguito come segue:</p> + +<pre class="brush: js">var xs = ['10', '10', '10']; + +xs = xs.map(parseInt); + +console.log(xs); +// Il risultato effettivo di 10,NaN,2 potrebbe essere inaspettato in base alla descrizione precedente.</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p><code>map</code> è stato aggiunto allo standard ECMA-262 nella 5a edizione; in quanto tale potrebbe non essere presente in tutte le implementazioni dello standard. Puoi aggirare questo problema inserendo il seguente codice all'inizio degli script, consentendo l'uso di <code>map</code> in implementazioni che non lo supportano in modo nativo. Questo algoritmo è esattamente quello specificato in ECMA-262, 5a edizione, assumendo {{jsxref("Object")}}, {{jsxref("TypeError")}}, e {{jsxref("Array")}} hanno i loro valori originali e che <code>callback.call</code> restituisce il valore originale di <code>{{jsxref("Function.prototype.call")}}</code>.</p> + +<pre class="brush: js">// Production steps of ECMA-262, Edition 5, 15.4.4.19 +// Reference: http://es5.github.io/#x15.4.4.19 +if (!Array.prototype.map) { + + Array.prototype.map = function(callback/*, thisArg*/) { + + var T, A, k; + + if (this == null) { + throw new TypeError('this is null or not defined'); + } + + // 1. Let O be the result of calling ToObject passing the |this| + // value as the argument. + var O = Object(this); + + // 2. Let lenValue be the result of calling the Get internal + // method of O with the argument "length". + // 3. Let len be ToUint32(lenValue). + var len = O.length >>> 0; + + // 4. If IsCallable(callback) is false, throw a TypeError exception. + // See: http://es5.github.com/#x9.11 + if (typeof callback !== 'function') { + throw new TypeError(callback + ' is not a function'); + } + + // 5. If thisArg was supplied, let T be thisArg; else let T be undefined. + if (arguments.length > 1) { + T = arguments[1]; + } + + // 6. Let A be a new array created as if by the expression new Array(len) + // where Array is the standard built-in constructor with that name and + // len is the value of len. + A = new Array(len); + + // 7. Let k be 0 + k = 0; + + // 8. Repeat, while k < len + while (k < len) { + + var kValue, mappedValue; + + // a. Let Pk be ToString(k). + // This is implicit for LHS operands of the in operator + // b. Let kPresent be the result of calling the HasProperty internal + // method of O with argument Pk. + // This step can be combined with c + // c. If kPresent is true, then + if (k in O) { + + // i. Let kValue be the result of calling the Get internal + // method of O with argument Pk. + kValue = O[k]; + + // ii. Let mappedValue be the result of calling the Call internal + // method of callback with T as the this value and argument + // list containing kValue, k, and O. + mappedValue = callback.call(T, kValue, k, O); + + // iii. Call the DefineOwnProperty internal method of A with arguments + // Pk, Property Descriptor + // { Value: mappedValue, + // Writable: true, + // Enumerable: true, + // Configurable: true }, + // and false. + + // In browsers that support Object.defineProperty, use the following: + // Object.defineProperty(A, k, { + // value: mappedValue, + // writable: true, + // enumerable: true, + // configurable: true + // }); + + // For best browser support, use the following: + A[k] = mappedValue; + } + // d. Increase k by 1. + k++; + } + + // 9. return A + return A; + }; +} +</pre> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.19', 'Array.prototype.map')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Definizione iniziale Implementato in JavaScript 1.6.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.map', 'Array.prototype.map')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.map', 'Array.prototype.map')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.map")}}</p> +</div> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li>L'oggetto {{jsxref("Map")}}</li> + <li>{{jsxref("Array.from()")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/array/of/index.html b/files/it/web/javascript/reference/global_objects/array/of/index.html new file mode 100644 index 0000000000..808c1dda2c --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/array/of/index.html @@ -0,0 +1,92 @@ +--- +title: Array.of() +slug: Web/JavaScript/Reference/Global_Objects/Array/of +translation_of: Web/JavaScript/Reference/Global_Objects/Array/of +--- +<div>{{JSRef}}</div> + +<p>Il metodo <code><strong>Array.of()</strong></code> crea una nuova istanza di <code>Array</code> accettando un numero variabile di argomenti, indipendentemente dal numero o dal tipo degli argomenti.</p> + +<p>La differenza tra <code><strong>Array.of()</strong></code> ed il costruttore <code><strong>Array</strong></code> è nella gestione degli argomenti di tipo intero: <code><strong>Array.of(7)</strong></code> crea un array con un singolo elemento, <code>7</code>, mentre <code><strong>Array(7)</strong></code> crea un array vuoto con la proprietà <code>length</code> settata a 7 (<strong>Nota:</strong> questo implica un array di <code>7</code> elementi vuoti, non elementi col valore <code>undefined</code> assegnato).</p> + +<pre class="brush: js">Array.of(7); // [7] +Array.of(1, 2, 3); // [1, 2, 3] + +Array(7); // [ , , , , , , ] +Array(1, 2, 3); // [1, 2, 3] +</pre> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">Array.of(<var>element0</var>[, <var>element1</var>[, ...[, <var>elementN</var>]]])</pre> + +<h3 id="Parameteri">Parameteri</h3> + +<dl> + <dt><code>element<em>N</em></code></dt> + <dd>Gli elementi da assegnare all'array.</dd> +</dl> + +<h3 id="Valore_di_ritorno">Valore di ritorno</h3> + +<p>Una nuova istanz di {{jsxref("Array")}}.</p> + +<h2 id="Descrizione">Descrizione</h2> + +<p>Questa funzione fa parte dello standard ECMAScript 2015. Per maggiori informazioni vedi le proposal <a href="https://gist.github.com/rwaldron/1074126"><code>Array.of</code> e <code>Array.from</code> </a> e il polyfill <a href="https://gist.github.com/rwaldron/3186576"><code>Array.of</code></a>.</p> + +<h2 id="Esempi">Esempi</h2> + +<pre class="brush: js">Array.of(1); // [1] +Array.of(1, 2, 3); // [1, 2, 3] +Array.of(undefined); // [undefined] +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p>Eseguendo il codice seguente prima di qualsiasi altro codice verrà creato il metodo <code>Array.of()</code> se non era precedentemente esistente.</p> + +<pre class="brush: js">if (!Array.of) { + Array.of = function() { + return Array.prototype.slice.call(arguments); + }; +} +</pre> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commenti</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-array.of', 'Array.of')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.of', 'Array.of')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.of")}}</p> +</div> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>{{jsxref("Array")}}</li> + <li>{{jsxref("Array.from()")}}</li> + <li>{{jsxref("TypedArray.of()")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/array/pop/index.html b/files/it/web/javascript/reference/global_objects/array/pop/index.html new file mode 100644 index 0000000000..6feabb5f14 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/array/pop/index.html @@ -0,0 +1,117 @@ +--- +title: Array.prototype.pop() +slug: Web/JavaScript/Reference/Global_Objects/Array/pop +tags: + - Array + - JavaScript + - Prototype + - Referenza + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/Array/pop +--- +<div>{{JSRef}}</div> + +<p>Il metodo <code><strong>pop()</strong></code> rimuove <strong>l'ultimo</strong> elemento da un array e restituisce quell'elemento. Questo metodo modifica la lunghezza dell'array.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-pop.html")}}</div> + + + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><var>arr</var>.pop()</pre> + +<h3 id="Valore_di_ritorno">Valore di ritorno</h3> + +<p>L'elemento rimosso dall'array; {{jsxref("undefined")}} se l'array è vuoto.</p> + +<h2 id="Descrizione">Descrizione</h2> + +<p>Il metodo <code>pop</code> rimuove l'ultimo elemento da un array e restituisce quel valore al chiamante.</p> + +<p><code>pop</code> è intenzionalmente generico; questo metodo può essere {{jsxref("Function.call", "chiamato", "", 1)}} o {{jsxref("Function.apply", "applicato", "", 1)}} ad oggetti che assomigliano agli array. Gli oggetti che non contengono una proprietà <code>length</code> che riflette l'ultimo di una serie di proprietà numeriche consecutive basate su zero potrebbero non comportarsi in alcun modo significativo.</p> + +<p>Se chiami <code>pop()</code> su un array vuoto, ritorna {{jsxref("undefined")}}.</p> + +<p>{{jsxref("Array.prototype.shift()")}} ha un comportamento simile a <code>pop</code>, ma applicato al primo elemento di un array.</p> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Rimozione_dell'ultimo_elemento_di_un_array">Rimozione dell'ultimo elemento di un array</h3> + +<p>Il seguente codice crea l'array <code>myFish</code> contenente quattro elementi, dopo rimuove il suo ultimo elemento.</p> + +<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon']; + +var popped = myFish.pop(); + +console.log(myFish); // ['angel', 'clown', 'mandarin' ] + +console.log(popped); // 'sturgeon'</pre> + + + +<h3 id="Usare_apply(_)_o_call_(_)_sugli_array-like_objects">Usare apply( ) o call ( ) sugli array-like objects</h3> + +<p>Il codice seguente crea l'array-like object <code>myFish</code> contenente quattro elementi e un parametro length, poi rimuove il suo ultimo elemento e decrementa il parametro length.</p> + +<pre class="brush: js">var myFish = {0:'angel', 1:'clown', 2:'mandarin', 3:'sturgeon', length: 4}; + +var popped = Array.prototype.pop.call(myFish); //same syntax for using apply( ) + +console.log(myFish); // {0:'angel', 1:'clown', 2:'mandarin', length: 3} + +console.log(popped); // 'sturgeon' +</pre> + + + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Definizione iniziale Implementato in JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.6', 'Array.prototype.pop')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.pop', 'Array.prototype.pop')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.pop', 'Array.prototype.pop')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.pop")}}</p> +</div> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>{{jsxref("Array.prototype.push()")}}</li> + <li>{{jsxref("Array.prototype.shift()")}}</li> + <li>{{jsxref("Array.prototype.unshift()")}}</li> + <li>{{jsxref("Array.prototype.concat()")}}</li> + <li>{{jsxref("Array.prototype.splice()")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/array/prototype/index.html b/files/it/web/javascript/reference/global_objects/array/prototype/index.html new file mode 100644 index 0000000000..d4989792a8 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/array/prototype/index.html @@ -0,0 +1,203 @@ +--- +title: Array.prototype +slug: Web/JavaScript/Reference/Global_Objects/Array/prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Array/prototype +--- +<div>{{JSRef}}</div> + +<p>La proprietà <strong><code>Array.prototype</code></strong> rappresenta il prototipo per il costruttore {{jsxref("Array")}} .</p> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="Description" name="Description">Descrizione</h2> + +<p>Le istanze {{jsxref("Array")}} ereditano da <code>Array.prototype</code>. Come con gli altri costruttori, si può cambiare il prototipo propagando i cambiamenti su tutte le sue istanze.</p> + +<p>Piccola curiosità: <code>Array.prototype</code> è un {{jsxref("Array")}}:</p> + +<pre class="brush: js">Array.isArray(Array.prototype); // true +</pre> + +<h2 id="Properties" name="Properties">Proprietà</h2> + +<dl> + <dt><code>Array.prototype.constructor</code></dt> + <dd>Restituisce il costruttore.</dd> + <dt>{{jsxref("Array.prototype.length")}}</dt> + <dd>Restituisce il numero di elementi in un array.</dd> +</dl> + +<h2 id="Methods" name="Methods">Metodi</h2> + +<h3 id="Mutator_methods" name="Mutator_methods">Metodi mutator</h3> + +<p>Questi metodi modificano l'array:</p> + +<dl> + <dt>{{jsxref("Array.prototype.copyWithin()")}} {{experimental_inline}}</dt> + <dd>Copia una sequenza di elementi dell'array all'interno dello stesso.</dd> + <dt>{{jsxref("Array.prototype.fill()")}} {{experimental_inline}}</dt> + <dd>Riempie le posizioni dell'array contenute tra 2 indici con un valore fisso.</dd> + <dt>{{jsxref("Array.prototype.pop()")}}</dt> + <dd>Rimuove e restituisce l'ultimo elemento dell'array.</dd> + <dt>{{jsxref("Array.prototype.push()")}}</dt> + <dd>Accoda uno o più elementi all'array e restituisce la lunghezza aggiornata dello stesso.</dd> + <dt>{{jsxref("Array.prototype.reverse()")}}</dt> + <dd>Inverte l'ordine delle posizioni degli elementi all'interno dell'array.</dd> + <dt>{{jsxref("Array.prototype.shift()")}}</dt> + <dd>Rimuove e resistuisce il primo elemento di un array.</dd> + <dt>{{jsxref("Array.prototype.sort()")}}</dt> + <dd>Ordina gli elementi di un array all'interno di esso e restituisce l'array.</dd> + <dt>{{jsxref("Array.prototype.splice()")}}</dt> + <dd>Aggiunge e/o rimuove elementi da un array.</dd> + <dt>{{jsxref("Array.prototype.unshift()")}}</dt> + <dd>Aggiunge uno o più elementi all'inizio di un array e restituisce la lunghezza aggiornata dello stesso.</dd> +</dl> + +<h3 id="Accessor_methods" name="Accessor_methods">Metodi accessor</h3> + +<p>Questi metodi non modificano l'array e ne restituiscono una sua rappresentazione.</p> + +<dl> + <dt>{{jsxref("Array.prototype.concat()")}}</dt> + <dd>Restituisce un nuovo array costituito dall'array stesso insieme ad altri array/valori.</dd> + <dt>{{jsxref("Array.prototype.includes()")}} {{experimental_inline}}</dt> + <dd>Restituisce <code>true</code> se l'array contiene un certo elemento, <code>false</code> altrimenti.</dd> + <dt>{{jsxref("Array.prototype.join()")}}</dt> + <dd>Resituisce i valori dell'array come stringa.</dd> + <dt>{{jsxref("Array.prototype.slice()")}}</dt> + <dd>Restituisce un nuovo array cosituito da elementi dell'array originale.</dd> + <dt>{{jsxref("Array.prototype.toSource()")}} {{non-standard_inline}}</dt> + <dd>Returns an array literal representing the specified array; you can use this value to create a new array. Overrides the {{jsxref("Object.prototype.toSource()")}} method.</dd> + <dt>{{jsxref("Array.prototype.toString()")}}</dt> + <dd>Returns a string representing the array and its elements. Overrides the {{jsxref("Object.prototype.toString()")}} method.</dd> + <dt>{{jsxref("Array.prototype.toLocaleString()")}}</dt> + <dd>Returns a localized string representing the array and its elements. Overrides the {{jsxref("Object.prototype.toLocaleString()")}} method.</dd> + <dt>{{jsxref("Array.prototype.indexOf()")}}</dt> + <dd>Returns the first (least) index of an element within the array equal to the specified value, or -1 if none is found.</dd> + <dt>{{jsxref("Array.prototype.lastIndexOf()")}}</dt> + <dd>Returns the last (greatest) index of an element within the array equal to the specified value, or -1 if none is found.</dd> +</dl> + +<h3 id="Iteration_methods" name="Iteration_methods">Iteration methods</h3> + +<p>Several methods take as arguments functions to be called back while processing the array. When these methods are called, the <code>length</code> of the array is sampled, and any element added beyond this length from within the callback is not visited. Other changes to the array (setting the value of or deleting an element) may affect the results of the operation if the method visits the changed element afterwards. While the specific behavior of these methods in such cases is well-defined, you should not rely upon it so as not to confuse others who might read your code. If you must mutate the array, copy into a new array instead.</p> + +<dl> + <dt>{{jsxref("Array.prototype.forEach()")}}</dt> + <dd>Calls a function for each element in the array.</dd> + <dt>{{jsxref("Array.prototype.entries()")}} {{experimental_inline}}</dt> + <dd>Returns a new <code>Array Iterator</code> object that contains the key/value pairs for each index in the array.</dd> + <dt>{{jsxref("Array.prototype.every()")}}</dt> + <dd>Returns true if every element in this array satisfies the provided testing function.</dd> + <dt>{{jsxref("Array.prototype.some()")}}</dt> + <dd>Returns true if at least one element in this array satisfies the provided testing function.</dd> + <dt>{{jsxref("Array.prototype.filter()")}}</dt> + <dd>Creates a new array with all of the elements of this array for which the provided filtering function returns true.</dd> + <dt>{{jsxref("Array.prototype.find()")}} {{experimental_inline}}</dt> + <dd>Returns the found value in the array, if an element in the array satisfies the provided testing function or <code>undefined</code> if not found.</dd> + <dt>{{jsxref("Array.prototype.findIndex()")}} {{experimental_inline}}</dt> + <dd>Returns the found index in the array, if an element in the array satisfies the provided testing function or -1 if not found.</dd> + <dt>{{jsxref("Array.prototype.keys()")}} {{experimental_inline}}</dt> + <dd>Returns a new <code>Array Iterator</code> that contains the keys for each index in the array.</dd> + <dt>{{jsxref("Array.prototype.map()")}}</dt> + <dd>Creates a new array with the results of calling a provided function on every element in this array.</dd> + <dt>{{jsxref("Array.prototype.reduce()")}}</dt> + <dd>Apply a function against an accumulator and each value of the array (from left-to-right) as to reduce it to a single value.</dd> + <dt>{{jsxref("Array.prototype.reduceRight()")}}</dt> + <dd>Apply a function against an accumulator and each value of the array (from right-to-left) as to reduce it to a single value.</dd> + <dt>{{jsxref("Array.prototype.values()")}} {{experimental_inline}}</dt> + <dd>Returns a new <code>Array Iterator</code> object that contains the values for each index in the array.</dd> + <dt>{{jsxref("Array.prototype.@@iterator()", "Array.prototype[@@iterator]()")}} {{experimental_inline}}</dt> + <dd>Returns a new <code>Array Iterator</code> object that contains the values for each index in the array.</dd> +</dl> + +<h3 id="Generic_methods" name="Generic_methods">Generic methods</h3> + +<p>Many methods on the JavaScript Array object are designed to be generally applied to all objects which “look like” Arrays. That is, they can be used on any object which has a <code>length</code> property, and which can usefully be accessed using numeric property names (as with <code>array[5]</code> indexing). <span class="comment">TODO: give examples with Array.prototype.forEach.call, and adding the method to an object like {{jsxref("Global_Objects/JavaArray", "JavaArray")}} or {{jsxref("Global_Objects/String", "String")}}.</span> Some methods, such as {{jsxref("Array.join", "join")}}, only read the <code>length</code> and numeric properties of the object they are called on. Others, like {{jsxref("Array.reverse", "reverse")}}, require that the object's numeric properties and <code>length</code> be mutable; these methods can therefore not be called on objects like {{jsxref("String")}}, which does not permit its <code>length</code> property or synthesized numeric properties to be set.</p> + +<h2 id="Specifications" name="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.3.1', 'Array.prototype')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype', 'Array.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">See also</h2> + +<ul> + <li>{{jsxref("Array")}}</li> + <li>{{jsxref("Function.prototype")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/array/push/index.html b/files/it/web/javascript/reference/global_objects/array/push/index.html new file mode 100644 index 0000000000..ad34c3da2d --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/array/push/index.html @@ -0,0 +1,142 @@ +--- +title: Array.prototype.push() +slug: Web/JavaScript/Reference/Global_Objects/Array/push +translation_of: Web/JavaScript/Reference/Global_Objects/Array/push +--- +<div>{{JSRef}}</div> + +<p>Il metodo <code><strong>push()</strong></code> aggiunge uno o più elementi alla fine di un array e ne restituisce la nuova lunghezza.</p> + +<pre class="brush: js notranslate">var numbers = [1, 2, 3]; +numbers.push(4); + +console.log(numbers); // [1, 2, 3, 4] + +numbers.push(5, 6, 7); + +console.log(numbers); // [1, 2, 3, 4, 5, 6, 7] +</pre> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox notranslate"><var>arr</var>.push([<var>elemento1</var>[, ...[, <var>elementoN</var>]]])</pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt><code>elemento<em>N</em></code></dt> + <dd>Gli elementi da aggiungere alla fine dell'array.</dd> +</dl> + +<h3 id="Valore_di_ritorno">Valore di ritorno</h3> + +<p>La nuova proprietà {{jsxref("Array.length", "length")}} dell'oggetto su cui è stato richiamato il metodo.</p> + +<h2 id="Descrizione">Descrizione</h2> + +<p>Il metodo <code>push</code> aggiunge valori all'array.</p> + +<p><code>push</code> è intenzionalmente generico. Questo metodo può essere utilizzato con {{jsxref("Function.call", "call()")}} o {{jsxref("Function.apply", "apply()")}} su oggetti che assomigliano a un array. Il metodo<code>push</code> si basa sulla proprietà <code>length</code> per determinare da dove iniziare l'inserimento dei valori indicati. Se la proprietà <code>length</code> non può essere convertita in un numero, l'indice utilizzato è 0. Ciò include la possibilità che <code>length</code> sia inesistente, in tale caso <code>length</code> verrà creata.</p> + +<p>Gli unici oggetti nativi simili agli array sono {{jsxref("Global_Objects/String", "strings", "", 1)}}, anche se non adatti alle applicazioni di questo metodo, in quanto le stringhe sono immutabili.</p> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Aggiungere_elementi_a_un_array">Aggiungere elementi a un array</h3> + +<p>Il seguente codice crea l'array <code>sports</code> che contiene due elementi, poi aggiunge ulteriori due elementi allo stesso. La variabile <code>total</code> contiene la nuova lunghezza dell'array.</p> + +<pre class="brush: js notranslate">var sports = ['calcio', 'baseball']; +var total = sports.push('football americano', 'nuoto'); + +console.log(sports); // ['calcio', 'baseball', 'football americano', 'nuoto'] +console.log(total); // 4 +</pre> + +<h3 id="Unire_due_arrays">Unire due arrays</h3> + +<p>Questo esempio utilizza {{jsxref("Function.apply", "apply()")}} per aggiungere tutti gli elementi da un secondo array.</p> + +<p><em>Non</em> utilizzare questo metodo se il secondo array (<code>moreVegs</code> in questo esempio) è molto grande, perché il numero massimo di parametri che una funzione può assumere è limitato nella pratica. Vedere {{jsxref("Function.apply", "apply()")}} per ulteriori dettagli.</p> + +<pre class="brush: js notranslate">var vegetables = ['pastinaca', 'patata']; +var moreVegs = ['sedano', 'barbabietola']; + +// Unire il secondo array nel primo +// Equivalente a vegetables.push('sedano', 'barbabietola'); +Array.prototype.push.apply(vegetables, moreVegs); + +console.log(vegetables); // ['pastinaca', 'patata', 'sedano', 'barbabietola'] +</pre> + +<h3 id="Utilizzo_di_un_oggetto_come_un_array">Utilizzo di un oggetto come un array</h3> + +<p>Come accennato in precedenza, <code>push</code> è intenzionalmente generica e possiamo usarla a nostro vantaggio. <code>Array.prototype.push</code> può funzionare benissimo su un oggetto, come mostra questo esempio. Si noti che non creiamo un array per memorizzare la raccolta di oggetti. Al contrario, memorizziamo la raccolta sull'oggetto stesso e utilizziamo <code>call</code> su <code>Array.prototype.push</code> per ingannare il metodo e fargli pensare che siamo di fronte a un array, e funziona solo grazie al modo in cui JavaScript ci permette di stabilire il contesto di esecuzione come preferiamo.</p> + +<pre class="brush: js notranslate">var obj = { + length: 0, + + addElem: function addElem(elem) { + // obj.length viene automaticamente incrementato + // ogni volta che viene aggiunto un elemento. + [].push.call(this, elem); + } +}; + +// Aggiungiamo alcuni oggetti vuoti solo per illustrare. +obj.addElem({}); +obj.addElem({}); +console.log(obj.length); +// → 2 +</pre> + +<p>Si noti che anche se <code>obj</code> non è un array, il metodo <code>push</code> ha incrementato la proprietà di <code>length</code> di<code>obj</code> come se si trattasse di un array vero e proprio.</p> + +<h2 id="Specificazioni">Specificazioni</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specificazione</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Definizione iniziale. Implementato in JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.7', 'Array.prototype.push')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.push', 'Array.prototype.push')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.push', 'Array.prototype.push')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_di_Browser">Compatibilità di Browser</h2> + +<div> +<div class="hidden">La tabella di compatibilità di questa pagina viene generata da dati strutturati. Se desideri contribuire ai dati, controlla <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e invia una pull request.</div> + +<p>{{Compat("javascript.builtins.Array.push")}}</p> +</div> + +<h2 id="Guarda_anche">Guarda anche</h2> + +<ul> + <li>{{jsxref("Array.prototype.pop()")}}</li> + <li>{{jsxref("Array.prototype.shift()")}}</li> + <li>{{jsxref("Array.prototype.unshift()")}}</li> + <li>{{jsxref("Array.prototype.concat()")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/array/reduce/index.html b/files/it/web/javascript/reference/global_objects/array/reduce/index.html new file mode 100644 index 0000000000..de063df929 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/array/reduce/index.html @@ -0,0 +1,576 @@ +--- +title: Array.prototype.reduce() +slug: Web/JavaScript/Reference/Global_Objects/Array/Reduce +tags: + - Array + - Array method + - ECMAScript 5 + - JavaScript + - Method + - Prototype + - Reduce + - Referenza +translation_of: Web/JavaScript/Reference/Global_Objects/Array/Reduce +--- +<div>{{JSRef}}</div> + +<p>Il metodo <code><strong>reduce()</strong></code> esegue una funzione <strong>reducer</strong> (che tu fornisci) su ogni elemento dell'array, risultante in un unico output.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-reduce.html")}}</div> + +<div>I sorgenti per questo esempio interattivo è disponibile su un repository GitHub. Se desideri contribuire al progetto, clona <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> e inviaci una pull request.</div> + +<p>La funzione <strong>reducer</strong> accetta quattro argomenti:</p> + +<ol> + <li>Accumulatore (acc)</li> + <li>Valore corrente (cur)</li> + <li>Indice corrente (idx)</li> + <li>Array sul quale viene eseguito il metodo (src)</li> +</ol> + +<p>Il valore restituito della funzione <strong>reducer</strong> viene assegnato all'accumulatore, il cui valore viene memorizzato attraverso ogni iterazione nell'intero array e in definitiva, diventa il valore finale finale singolo.</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox notranslate"><var>arr.reduce(callback(accumulator, currentValue[, index[, array]]) [, initialValue])</var></pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Una funzione da eseguire su ogni elemento dell'array (tranne il primo, se non viene fornita <code>initialValue</code>), accetta 4 argomenti: + <dl> + <dt><code>accumulator</code></dt> + <dd>L'accumulatore accumula i valori di ritorno del callback. È il valore accumulato precedentemente restituito nell'ultima chiamata del callback o <code>initialValue</code>, se fornito (vedere di seguito).</dd> + <dt><code>currentValue</code></dt> + <dd>L'elemento corrente in elaborazione nell'array.</dd> + <dt><code>index</code> {{optional_inline}}</dt> + <dd>L'indice dell'elemento corrente in elaborazione nell'array. Inizia dall'indice 0 se viene fornito <code>initialValue</code> Altrimenti, inizia dall'indice 1.</dd> + <dt><code>array</code> {{optional_inline}}</dt> + <dd>L'array a cui viene applicato <code>reduce()</code>.</dd> + </dl> + </dd> + <dt><code>initialValue</code> {{optional_inline}}</dt> + <dd>Un valore da utilizzare come primo argomento della prima chiamata del <code>callback</code>. Se non viene fornito <code>initialValue</code> il primo elemento dell'array verrà utilizzato e saltato. Chiamare <code>reduce()</code> su un array vuoto senza <code>initialValue</code> genererà un <code>TypeError</code>.</dd> +</dl> + +<h3 id="Valore_di_ritorno">Valore di ritorno</h3> + +<p>Il singolo valore che risulta dalla riduzione.</p> + +<h2 id="Descrizione">Descrizione</h2> + +<p>Il metodo <code>reduce()</code> esegue il <code>callback</code> una volta per ogni valore assegnato presente nell'array, prendendo quattro argomenti:</p> + +<ul> + <li><code>accumulator</code></li> + <li><code>currentValue</code></li> + <li><code>currentIndex</code></li> + <li><code>array</code></li> +</ul> + +<p>La prima volta che viene chiamato il callback, <code>accumulator</code> e <code>currentValue</code> possono essere uno dei due valori. Se <code>initialValue</code> viene fornito nella chiamata a <code>reduce()</code>, <code>accumulator</code> sarà uguale a <code>initialValue</code>, e <code>currentValue</code> sarà uguale al primo valore nell'array. Se non viene fornito alcun valore <code>initialValue</code>, <code>accumulator</code> sarà uguale al primo valore dell'array e <code>currentValue</code> sarà uguale al secondo.</p> + +<div class="note"> +<p><strong>Note:</strong> Se non viene fornito <code>initialValue</code>, <code>reduce()</code> eseguirà la funzione di callback a partire dall'indice 1, saltando il primo indice. Se viene fornito <code>initialValue</code>, inizierà dall'indice 0.</p> +</div> + +<p>Se l'array è vuoto e non viene fornito <code>initialValue</code> verrà generato un {{jsxref("TypeError")}}. Se l'array ha solo un elemento (indipendentemente dalla posizione) e non viene fornito <code>initialValue</code>, o se è fornito <code>initialValue</code> ma l'array è vuoto, il valore solo verrà restituito <em>senza</em> chiamare <em><code>callback</code>.</em></p> + +<p>Di solito è più sicuro fornire <code>initialValue</code> perché ci sono tre output possibili senza <code>initialValue</code>, come mostrato nell'esempio seguente.</p> + +<pre class="brush: js notranslate">var maxCallback = ( acc, cur ) => Math.max( acc.x, cur.x ); +var maxCallback2 = ( max, cur ) => Math.max( max, cur ); + +// reduce() without initialValue +[ { x: 22 }, { x: 42 } ].reduce( maxCallback ); // 42 +[ { x: 22 } ].reduce( maxCallback ); // { x: 22 } +[ ].reduce( maxCallback ); // TypeError + +// map/reduce; better solution, also works for empty or larger arrays +[ { x: 22 }, { x: 42 } ].map( el => el.x ) + .reduce( maxCallback2, -Infinity ); +</pre> + +<h3 id="Come_funziona_reduce">Come funziona reduce()</h3> + +<p>Supponiamo che si sia verificato il seguente uso di <code>reduce()</code>:</p> + +<pre class="brush: js notranslate">[0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array) { + return accumulator + currentValue; +}); +</pre> + +<p>Il callback verrebbe invocato quattro volte, con gli argomenti e i valori restituiti in ogni chiamata come segue:</p> + +<table> + <thead> + <tr> + <th scope="col"><code>callback</code></th> + <th scope="col"><code>accumulator</code></th> + <th scope="col"><code>currentValue</code></th> + <th scope="col"><code>currentIndex</code></th> + <th scope="col"><code>array</code></th> + <th scope="col">valore ritornato</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">prima chiamata</th> + <td><code>0</code></td> + <td><code>1</code></td> + <td>1</td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>1</code></td> + </tr> + <tr> + <th scope="row">seconda chiamata</th> + <td><code>1</code></td> + <td><code>2</code></td> + <td>2</td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>3</code></td> + </tr> + <tr> + <th scope="row">terza chiamata</th> + <td><code>3</code></td> + <td><code>3</code></td> + <td>3</td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>6</code></td> + </tr> + <tr> + <th scope="row">quarta chiamata</th> + <td><code>6</code></td> + <td><code>4</code></td> + <td>4</td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>10</code></td> + </tr> + </tbody> +</table> + +<p>Il valore restituito da <code>reduce()</code> sarà quello dell'ultima chiamata del callback (<code>10</code>).</p> + +<p>È inoltre possibile fornire una {{jsxref("Functions/Arrow_functions", "Arrow Function","",1)}} al posto di una funzione completa. Il seguente codice produrrà lo stesso output del codice nel blocco sopra riportato:</p> + +<pre class="brush: js notranslate">[0, 1, 2, 3, 4].reduce( (accumulator, currentValue, currentIndex, array) => accumulator + currentValue ); +</pre> + +<p>Se dovessi fornire <code>initialValue</code> come secondo argomento a <code>reduce()</code>, il risultato sarebbe simile a questo:</p> + +<pre class="brush: js notranslate">[0, 1, 2, 3, 4].reduce((accumulator, currentValue, currentIndex, array) => { + return accumulator + currentValue; +}, 10); +</pre> + +<table> + <thead> + <tr> + <th scope="col"><code>callback</code></th> + <th scope="col"><code>accumulator</code></th> + <th scope="col"><code>currentValue</code></th> + <th scope="col"><code>currentIndex</code></th> + <th scope="col"><code>array</code></th> + <th scope="col">valore restituito</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">prima chiamata</th> + <td><code>10</code></td> + <td><code>0</code></td> + <td><code>0</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>10</code></td> + </tr> + <tr> + <th scope="row">seconda chiamata</th> + <td><code>10</code></td> + <td><code>1</code></td> + <td><code>1</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>11</code></td> + </tr> + <tr> + <th scope="row">terza chiamata</th> + <td><code>11</code></td> + <td><code>2</code></td> + <td><code>2</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>13</code></td> + </tr> + <tr> + <th scope="row">quarta chiamata</th> + <td><code>13</code></td> + <td><code>3</code></td> + <td><code>3</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>16</code></td> + </tr> + <tr> + <th scope="row">quinta chiamata</th> + <td><code>16</code></td> + <td><code>4</code></td> + <td><code>4</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>20</code></td> + </tr> + </tbody> +</table> + +<p>Il valore restituito da <code>reduce()</code> in questo caso sarebbe <code>20</code>.</p> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Sommare_tutti_i_valori_di_un_array">Sommare tutti i valori di un array</h3> + +<pre class="brush: js notranslate">var sum = [0, 1, 2, 3].reduce(function (accumulator, currentValue) { + return accumulator + currentValue; +}, 0); +// sum è 6 + +</pre> + +<p>In alternativa scritto con una arrow function:</p> + +<pre class="brush: js notranslate">var total = [ 0, 1, 2, 3 ].reduce( + ( accumulator, currentValue ) => accumulator + currentValue, + 0 +);</pre> + +<h3 id="Somma_dei_valori_in_un_array_di_oggetti">Somma dei valori in un array di oggetti</h3> + +<p>Per riassumere i valori contenuti in un array di oggetti, <strong>devi</strong> fornire <code>initialValue</code>, in modo che ogni elemento passi attraverso la tua funzione</p> + +<pre class="brush: js notranslate">var initialValue = 0; +var sum = [{x: 1}, {x: 2}, {x: 3}].reduce(function (accumulator, currentValue) { + return accumulator + currentValue.x; +},initialValue) + +console.log(sum) // logs 6 +</pre> + +<p>In alternativa scritto con una arrow function:</p> + +<pre class="brush: js notranslate">var initialValue = 0; +var sum = [{x: 1}, {x: 2}, {x: 3}].reduce( + (accumulator, currentValue) => accumulator + currentValue.x + ,initialValue +); + +console.log(sum) // logs 6</pre> + +<h3 id="Appiattire_una_serie_di_array">Appiattire una serie di array</h3> + +<pre class="brush: js notranslate">var flattened = [[0, 1], [2, 3], [4, 5]].reduce( + function(accumulator, currentValue) { + return accumulator.concat(currentValue); + }, + [] +); +// flattened is [0, 1, 2, 3, 4, 5] +</pre> + +<p>In alternativa scritto con una arrow function:</p> + +<pre class="brush: js notranslate">var flattened = [[0, 1], [2, 3], [4, 5]].reduce( + ( accumulator, currentValue ) => accumulator.concat(currentValue), + [] +); +</pre> + +<h3 id="Conteggio_delle_istanze_di_valori_in_un_oggetto">Conteggio delle istanze di valori in un oggetto</h3> + +<pre class="brush: js notranslate">var names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice']; + +var countedNames = names.reduce(function (allNames, name) { + if (name in allNames) { + allNames[name]++; + } + else { + allNames[name] = 1; + } + return allNames; +}, {}); +// countedNames is: +// { 'Alice': 2, 'Bob': 1, 'Tiff': 1, 'Bruce': 1 } +</pre> + +<h3 id="Raggruppamento_di_oggetti_in_base_a_una_proprietà">Raggruppamento di oggetti in base a una proprietà</h3> + +<pre class="brush: js notranslate">var people = [ + { name: 'Alice', age: 21 }, + { name: 'Max', age: 20 }, + { name: 'Jane', age: 20 } +]; + +function groupBy(objectArray, property) { + return objectArray.reduce(function (acc, obj) { + var key = obj[property]; + if (!acc[key]) { + acc[key] = []; + } + acc[key].push(obj); + return acc; + }, {}); +} + +var groupedPeople = groupBy(people, 'age'); +// groupedPeople is: +// { +// 20: [ +// { name: 'Max', age: 20 }, +// { name: 'Jane', age: 20 } +// ], +// 21: [{ name: 'Alice', age: 21 }] +// } +</pre> + +<h3 id="Array_di_legame_contenuti_in_una_serie_di_oggetti_che_utilizzano_lo_spread_operator_e_initialValue">Array di legame contenuti in una serie di oggetti che utilizzano lo spread operator e initialValue</h3> + +<pre class="brush: js notranslate">// friends - an array of objects +// where object field "books" - list of favorite books +var friends = [{ + name: 'Anna', + books: ['Bible', 'Harry Potter'], + age: 21 +}, { + name: 'Bob', + books: ['War and peace', 'Romeo and Juliet'], + age: 26 +}, { + name: 'Alice', + books: ['The Lord of the Rings', 'The Shining'], + age: 18 +}]; + +// allbooks - list which will contain all friends' books + +// additional list contained in initialValue +var allbooks = friends.reduce(function(accumulator, currentValue) { + return [...accumulator, ...currentValue.books]; +}, ['Alphabet']); + +// allbooks = [ +// 'Alphabet', 'Bible', 'Harry Potter', 'War and peace', +// 'Romeo and Juliet', 'The Lord of the Rings', +// 'The Shining' +// ]</pre> + +<h3 id="Rimuovi_gli_elementi_duplicati_nellarray">Rimuovi gli elementi duplicati nell'array</h3> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> Se si utilizza un ambiente compatibile con {{jsxref("Set")}} e {{jsxref("Array.from()")}}, è possibile utilizzare <code>let orderedArray = Array.from(new Set(myArray));</code> per ottenere un array in cui sono stati rimossi gli elementi duplicati.</p> +</div> + +<pre class="brush: js notranslate">var myArray = ['a', 'b', 'a', 'b', 'c', 'e', 'e', 'c', 'd', 'd', 'd', 'd']; +var myOrderedArray = myArray.reduce(function (accumulator, currentValue) { + if (accumulator.indexOf(currentValue) === -1) { + accumulator.push(currentValue); + } + return accumulator +}, []) + +console.log(myOrderedArray);</pre> + +<h3 id="Eseguire_le_Promises_in_Sequenza">Eseguire le Promises in Sequenza</h3> + +<pre class="brush: js notranslate">/** + * Esegue promises da un array di funzioni che possono restituire promises + * in modo concatenato + * + * @param {array} arr - promise arr + * @return {Object} promise object + */ +function runPromiseInSequence(arr, input) { + return arr.reduce( + (promiseChain, currentFunction) => promiseChain.then(currentFunction), + Promise.resolve(input) + ); +} + +// promise function 1 +function p1(a) { + return new Promise((resolve, reject) => { + resolve(a * 5); + }); +} + +// promise function 2 +function p2(a) { + return new Promise((resolve, reject) => { + resolve(a * 2); + }); +} + +// function 3 - sarà avvolta in una promise risolta da .then() +function f3(a) { + return a * 3; +} + +// promise function 4 +function p4(a) { + return new Promise((resolve, reject) => { + resolve(a * 4); + }); +} + +const promiseArr = [p1, p2, f3, p4]; +runPromiseInSequence(promiseArr, 10) + .then(console.log); // 1200 +</pre> + +<h3 id="Composizione_funzionale_per_tubazioni">Composizione funzionale per tubazioni</h3> + +<pre class="brush: js notranslate">// Elementi da utilizzare per la composizione +const double = x => x + x; +const triple = x => 3 * x; +const quadruple = x => 4 * x; + +// Function composition enabling pipe functionality +const pipe = (...functions) => input => functions.reduce( + (acc, fn) => fn(acc), + input +); + +// Funzioni composte per la moltiplicazione di valori specifici +const multiply6 = pipe(double, triple); +const multiply9 = pipe(triple, triple); +const multiply16 = pipe(quadruple, quadruple); +const multiply24 = pipe(double, triple, quadruple); + +// Utilizzo +multiply6(6); // 36 +multiply9(9); // 81 +multiply16(16); // 256 +multiply24(10); // 240 + +</pre> + +<h3 id="Scrivere_map_usando_reduce">Scrivere map usando reduce</h3> + +<pre class="brush: js notranslate">if (!Array.prototype.mapUsingReduce) { + Array.prototype.mapUsingReduce = function(callback, thisArg) { + return this.reduce(function(mappedArray, currentValue, index, array) { + mappedArray[index] = callback.call(thisArg, currentValue, index, array); + return mappedArray; + }, []); + }; +} + +[1, 2, , 3].mapUsingReduce( + (currentValue, index, array) => currentValue + index + array.length +); // [5, 7, , 10] + +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<pre class="brush: js notranslate">// Production steps of ECMA-262, Edition 5, 15.4.4.21 +// Reference: http://es5.github.io/#x15.4.4.21 +// https://tc39.github.io/ecma262/#sec-array.prototype.reduce +if (!Array.prototype.reduce) { + Object.defineProperty(Array.prototype, 'reduce', { + value: function(callback /*, initialValue*/) { + if (this === null) { + throw new TypeError( 'Array.prototype.reduce ' + + 'called on null or undefined' ); + } + if (typeof callback !== 'function') { + throw new TypeError( callback + + ' is not a function'); + } + + // 1. Let O be ? ToObject(this value). + var o = Object(this); + + // 2. Let len be ? ToLength(? Get(O, "length")). + var len = o.length >>> 0; + + // Steps 3, 4, 5, 6, 7 + var k = 0; + var value; + + if (arguments.length >= 2) { + value = arguments[1]; + } else { + while (k < len && !(k in o)) { + k++; + } + + // 3. If len is 0 and initialValue is not present, + // throw a TypeError exception. + if (k >= len) { + throw new TypeError( 'Reduce of empty array ' + + 'with no initial value' ); + } + value = o[k++]; + } + + // 8. Repeat, while k < len + while (k < len) { + // a. Let Pk be ! ToString(k). + // b. Let kPresent be ? HasProperty(O, Pk). + // c. If kPresent is true, then + // i. Let kValue be ? Get(O, Pk). + // ii. Let accumulator be ? Call( + // callbackfn, undefined, + // « accumulator, kValue, k, O »). + if (k in o) { + value = callback(value, o[k], k, o); + } + + // d. Increase k by 1. + k++; + } + + // 9. Return accumulator. + return value; + } + }); +} +</pre> + +<p>Se hai bisogno di supportare motori JavaScript veramente obsoleti che non supportano <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty()</a></code>, è meglio non applicare polyfills ai metodi di <code>Array.prototype</code>, poiché non puoi renderli non enumerabili.</p> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.21', 'Array.prototype.reduce()')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Definizione iniziale Implementato in JavaScript 1.8.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.reduce', 'Array.prototype.reduce()')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.reduce', 'Array.prototype.reduce()')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + +<p>La tabella di compatibilità in questa pagina è generata a partire da dati strutturati. Se desideri contribuire ai dati, visita <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e inviaci una pull request.</p> + +<div> +<p>{{Compat("javascript.builtins.Array.reduce")}}</p> +</div> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>{{jsxref("Array.prototype.reduceRight()")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/array/reverse/index.html b/files/it/web/javascript/reference/global_objects/array/reverse/index.html new file mode 100644 index 0000000000..750befde61 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/array/reverse/index.html @@ -0,0 +1,133 @@ +--- +title: Array.prototype.reverse() +slug: Web/JavaScript/Reference/Global_Objects/Array/reverse +translation_of: Web/JavaScript/Reference/Global_Objects/Array/reverse +--- +<div>{{JSRef}}</div> + +<p>Il metodo <code><strong>reverse()</strong></code> inverte ua matrice (array) sul posto. Il primo elemento di matrice diventa l'ultima, e l'ultimo elemento di matrice diventa il primo.</p> + +<pre class="brush: js">var a = ['one', 'two', 'three']; +a.reverse(); + +console.log(a); // ['three', 'two', 'one'] +</pre> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><var>a</var>.reverse()</pre> + +<h3 id="Valore_prodotto.">Valore prodotto. </h3> + +<p>La matrice invertita.</p> + +<h2 id="Descrizione">Descrizione</h2> + +<p>Il metodo reverse traspone gli elementi della matrice chiamata, <u>mutando la matrice</u>, e restituendo un riferimento alla matrice.</p> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Inversione_degli_elementi_nella_matrice">Inversione degli elementi nella matrice</h3> + +<p>L'esempio seguente crea una matrice a, contenente tre elementi, quindi inverte la matrice. La chiamata ad invertire () restituisce un riferimento alla matrice invertita a.</p> + +<pre class="brush: js">var a = ['one', 'two', 'three']; +var reversed = a.reverse(); + +console.log(a); // ['three', 'two', 'one'] +console.log(reversed); // ['three', 'two', 'one'] +</pre> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Status</th> + <th scope="col">Commento</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>definizione iniziale. Implementata in JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.8', 'Array.prototype.reverse')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.reverse', 'Array.prototype.reverse')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.reverse', 'Array.prototype.reverse')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_browser">Compatibilità browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Caratteristica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Edge</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Supporto base</td> + <td>{{CompatChrome("1.0")}}</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatIE("5.5")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Supporto base</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>{{jsxref("Array.prototype.join()")}}</li> + <li>{{jsxref("Array.prototype.sort()")}}</li> + <li>{{jsxref("TypedArray.prototype.reverse()")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/array/slice/index.html b/files/it/web/javascript/reference/global_objects/array/slice/index.html new file mode 100644 index 0000000000..419da77ae4 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/array/slice/index.html @@ -0,0 +1,241 @@ +--- +title: Array.prototype.slice() +slug: Web/JavaScript/Reference/Global_Objects/Array/slice +translation_of: Web/JavaScript/Reference/Global_Objects/Array/slice +--- +<div>{{JSRef}}</div> + +<p><code>Il metodo <strong>slice()</strong></code> ritorna la copia di una porzione dell'array contenente gli elementi compresi tra <code>inzio</code> e <code>fine</code> (<code>fine</code> escluso). Il metodo <strong>slice()</strong> ritorna la copia dell'intero array se non contiene gli elementi di inizio e fine. L'array di partenza non viene modificato.</p> + +<pre class="brush: js">var a = ['zero', 'one', 'two', 'three']; +var sliced = a.slice(1, 3); + +console.log(a); // ['zero', 'one', 'two', 'three'] +console.log(sliced); // ['one', 'two'] +</pre> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><var>arr</var>.slice() +<var>arr</var>.slice(<var>inizio</var>) +<var>arr</var>.slice(<var>inizio</var>, <var>fine</var>) +</pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt><code>begin</code> {{optional_inline}}</dt> + <dd>L'indice zero-based indica da dove inizia l'intervallo da selezionare.</dd> + <dd>Può essere utilizzato un indice negativo, indicante l'offset dall'ultimo elemento dell'array. <code>slice(-2)</code> seleziona gli ultimi due elementi della sequenza.</dd> + <dd>Se <code>begin</code> non viene impostato , <code>slice</code> parte dall'indice <code>0</code>.</dd> + <dt><code>end</code> {{optional_inline}}</dt> + <dd>L' indice zero-base indica dove finisce l'intervallo da selezionare. <code>slice </code>seleziona gli elementi fino a quell'indice ma non l'elemento all'indice <code>end</code>.</dd> + <dd>Per esempio, <code>slice(1,4)</code>estrae dal secondo elemento dell'array al quarto escluso (elementi con indice 1, 2 e 3).</dd> + <dd>Puo essere utilizzato un indice negativo, tale indice indicherebbe l'offset dall'ultimo elemento dell'array. <code>slice(2,-1)</code> estrae dal terzo elemento della sequenza al penuntimo.</dd> + <dd>Se <code>end</code> non viene impostato, <code>slice</code> continua l'estrazione sino al termine dell'array (<code>arr.length</code>).</dd> + <dd>Se <code>end</code> è maggiore della lunghezza della sequenza , <code>slice</code> continua l'estrazione sino al termine dell'array (<code>arr.length</code>).</dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p>Un nuovo array che contiene gli elementi estratti.</p> + +<h2 id="Descrizione">Descrizione</h2> + +<p><code>slice</code> non modifica l'array originale. Restituisce una copia superficiale degli elementi dell'array originale. Gli elementi dell'array originale vengono copiati nell'array restituito come segue:</p> + +<ul> + <li>Per i riferimenti a oggetti (e non i veri e propri oggetti), <code>slice</code> copia i riferimenti nel nuovo array. Entrambi gli array riferiscono quindi lo stesso oggetto. Se un oggetto riferito viene modificato, le modifiche interessano entrambi gli array.</li> + <li>Per le stringhe, i numeri e i boolean (non oggetti {{jsxref("String")}}, {{jsxref("Number")}} e {{jsxref("Boolean")}} <code>slice</code> copia i valori nel nuovo array. Le modifiche alle stringhe, ai numeri e ai boolean in un array non interessano l'altro array.</li> +</ul> + +<p>Se viene aggiunto un nuovo elemento in uno degli array, l'altro non viene modificato.</p> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Restituire_una_porzione_dellarray_esistente">Restituire una porzione dell'array esistente</h3> + +<pre class="brush: js">var fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']; +var citrus = fruits.slice(1, 3); + +// fruits contains ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'] +// citrus contains ['Orange','Lemon'] +</pre> + +<h3 id="Utilizzare_slice">Utilizzare <code>slice</code></h3> + +<p>Nell'esempio che segue, <code>slice</code> crea un nuovo array, <code>newCar</code>, da <code>myCar</code>. Entrambi includono un riferimento all'oggetto <code>myHonda</code>. Quando il colore di <code>myHonda</code> diventa viola, entrambi gli array riflettono la modifica.</p> + +<pre class="brush: js">// Creare newCar da myCar utilizzando slice. +var myHonda = { color: 'red', wheels: 4, engine: { cylinders: 4, size: 2.2 } }; +var myCar = [myHonda, 2, 'cherry condition', 'purchased 1997']; +var newCar = myCar.slice(0, 2); + +// Mostrare i valori di myCar, newCar, e il colore di myHonda +// riferiti da entrambi gli array. +console.log('myCar = ' + JSON.stringify(myCar)); +console.log('newCar = ' + JSON.stringify(newCar)); +console.log('myCar[0].color = ' + myCar[0].color); +console.log('newCar[0].color = ' + newCar[0].color); + +// Modificare il colore di myHonda. +myHonda.color = 'purple'; +console.log('The new color of my Honda is ' + myHonda.color); + +// Mostrare il colore di myHonda riferito da entrambi gli array. +console.log('myCar[0].color = ' + myCar[0].color); +console.log('newCar[0].color = ' + newCar[0].color); +</pre> + +<p>Lo script scrive:</p> + +<pre class="brush: js">myCar = [{color: 'red', wheels: 4, engine: {cylinders: 4, size: 2.2}}, 2, + 'cherry condition', 'purchased 1997'] +newCar = [{color: 'red', wheels: 4, engine: {cylinders: 4, size: 2.2}}, 2] +myCar[0].color = red +newCar[0].color = red +The new color of my Honda is purple +myCar[0].color = purple +newCar[0].color = purple +</pre> + +<h2 id="Oggetti_Array-like">Oggetti Array-like</h2> + +<p>Il metodo <code>slice</code> può essere chiamato anche per convertire gli oggetti o le collezioni Array-like in un nuovo Array. Basta legare il metodo all'oggetto. {{jsxref("Functions/arguments", "arguments")}} all'interno di una funzione è un esempio di 'array-like object'.</p> + +<pre class="brush: js">function list() { + return Array.prototype.slice.call(arguments); +} + +var list1 = list(1, 2, 3); // [1, 2, 3] +</pre> + +<p>Il binding può essere effettuato con la funzione .<code>call</code> di {{jsxref("Function.prototype")}}<span style="font-size: 1rem; letter-spacing: -0.00278rem;"> e può anche essere ridotto utilizzando </span><code style="font-size: 1rem; letter-spacing: -0.00278rem;">[].slice.call(arguments)</code><span style="font-size: 1rem; letter-spacing: -0.00278rem;"> invece di </span><code style="font-size: 1rem; letter-spacing: -0.00278rem;">Array.prototype.slice.call</code><span style="font-size: 1rem; letter-spacing: -0.00278rem;">. Ad ogni modo, può essere semplificato utilizzando {{jsxref("Function.prototype.bind", "bind")}}.</span></p> + +<pre class="brush: js">var unboundSlice = Array.prototype.slice; +var slice = Function.prototype.call.bind(unboundSlice); + +function list() { + return slice(arguments); +} + +var list1 = list(1, 2, 3); // [1, 2, 3] +</pre> + +<h2 id="Streamlining_cross-browser_behavior">Streamlining cross-browser behavior</h2> + +<p>Although host objects (such as DOM objects) are not required by spec to follow the Mozilla behavior when converted by <code>Array.prototype.slice</code> and IE < 9 does not do so, versions of IE starting with version 9 do allow this. “Shimming” it can allow reliable cross-browser behavior. As long as other modern browsers continue to support this ability, as currently do IE, Mozilla, Chrome, Safari, and Opera, developers reading (DOM-supporting) slice code relying on this shim will not be misled by the semantics; they can safely rely on the semantics to provide the now apparently <em>de facto</em> standard behavior. (The shim also fixes IE to work with the second argument of <code>slice()</code> being an explicit {{jsxref("null")}}/{{jsxref("undefined")}} value as earlier versions of IE also did not allow but all modern browsers, including IE >= 9, now do.)</p> + +<pre class="brush: js">/** + * Shim for "fixing" IE's lack of support (IE < 9) for applying slice + * on host objects like NamedNodeMap, NodeList, and HTMLCollection + * (technically, since host objects have been implementation-dependent, + * at least before ES2015, IE hasn't needed to work this way). + * Also works on strings, fixes IE < 9 to allow an explicit undefined + * for the 2nd argument (as in Firefox), and prevents errors when + * called on other DOM objects. + */ +(function () { + 'use strict'; + var _slice = Array.prototype.slice; + + try { + // Can't be used with DOM elements in IE < 9 + _slice.call(document.documentElement); + } catch (e) { // Fails in IE < 9 + // This will work for genuine arrays, array-like objects, + // NamedNodeMap (attributes, entities, notations), + // NodeList (e.g., getElementsByTagName), HTMLCollection (e.g., childNodes), + // and will not fail on other DOM objects (as do DOM elements in IE < 9) + Array.prototype.slice = function(begin, end) { + // IE < 9 gets unhappy with an undefined end argument + end = (typeof end !== 'undefined') ? end : this.length; + + // For native Array objects, we use the native slice function + if (Object.prototype.toString.call(this) === '[object Array]'){ + return _slice.call(this, begin, end); + } + + // For array like object we handle it ourselves. + var i, cloned = [], + size, len = this.length; + + // Handle negative value for "begin" + var start = begin || 0; + start = (start >= 0) ? start : Math.max(0, len + start); + + // Handle negative value for "end" + var upTo = (typeof end == 'number') ? Math.min(end, len) : len; + if (end < 0) { + upTo = len + end; + } + + // Actual expected size of the slice + size = upTo - start; + + if (size > 0) { + cloned = new Array(size); + if (this.charAt) { + for (i = 0; i < size; i++) { + cloned[i] = this.charAt(start + i); + } + } else { + for (i = 0; i < size; i++) { + cloned[i] = this[start + i]; + } + } + } + + return cloned; + }; + } +}()); +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initial definition. Implemented in JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.10', 'Array.prototype.slice')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.slice', 'Array.prototype.slice')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.slice', 'Array.prototype.slice')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.slice")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Array.prototype.splice()")}}</li> + <li>{{jsxref("Function.prototype.call()")}}</li> + <li>{{jsxref("Function.prototype.bind()")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/array/some/index.html b/files/it/web/javascript/reference/global_objects/array/some/index.html new file mode 100644 index 0000000000..3befa8a8b0 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/array/some/index.html @@ -0,0 +1,202 @@ +--- +title: Array.prototype.some() +slug: Web/JavaScript/Reference/Global_Objects/Array/some +translation_of: Web/JavaScript/Reference/Global_Objects/Array/some +--- +<div>{{JSRef}}</div> + +<p>Il metodo <code><strong>some()</strong></code> verifica se almeno un elemento nell'array passa la verifica implementata dalla funzione fornita.</p> + +<div class="note"> +<p><strong>Note</strong>: Questo metodo ritorna <code>false</code> per qualsiasi condizione passata ad un array vuoto.</p> +</div> + + + +<div>{{EmbedInteractiveExample("pages/js/array-some.html")}}</div> + + + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><var>arr</var>.some(<var>callback</var>[, <var>thisArg</var>])</pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Funzione di test per ogni elemento, prende tre elementi: + <dl> + <dt><code>valoreCorrente</code></dt> + <dd>Il valore corrente dell'elemento che deve essere processato nell'array.</dd> + <dt><code>indice</code> {{Optional_inline}}</dt> + <dd>l'indice dell'elemento corrente dell'array.</dd> + <dt><code>array</code>{{Optional_inline}}</dt> + <dd>l'array completo alla quale è stato chiamato il <code>some().</code></dd> + </dl> + </dd> + <dt><code>thisArg</code>{{Optional_inline}}</dt> + <dd>Valore da usare come <code>this</code> quando si esegue la <code>callback</code>.</dd> +</dl> + +<h3 id="Valore_ritornato">Valore ritornato</h3> + +<p><code><strong>true</strong></code> se la funzione di callback ha ritornato un valore {{Glossary("truthy")}} per almeno un elemento nell'array; altrimenti, <code><strong>false</strong></code>.</p> + +<h2 id="Descrizione">Descrizione</h2> + +<p><code>some()</code> esegue la funzione di <code>callback</code> per ogni elemento presente nell'array finchè non ne trova uno dove la <code>callback</code> retorna un valore <em>truthy</em> (un valore che ritorna <code>true</code> se convertito in un Booleano). Se viene trovato un elemento di questo genere allora <code>some()</code> ritorna immediatamente <code>true</code>. altrimenti, <code>some()</code> ritorna <code>false</code>. <code>callback</code> viene invocato solamente solamente per gli elementi che hanno un valore assegnato; quindi non viene chiamato per elementi eliminati o mai assegnati.</p> + +<p><code>callback</code> è invocato con tre argomenti: il valore dell'elemento, l'indice dell'elemento nell'array, e l'array dalla quale è stato invocato.</p> + +<p>se viene passato un parametro <code>thisArg</code> al metodo <code>some()</code>, verrà usato come valore <code>this</code> per le callbacks. altrimenti, verrà usato il valore {{jsxref("undefined")}} come valore di <code>this</code>. Il valore di <code>this</code> nella <code>callback</code> è determinato in accordo con <a href="https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Operators/this">le normali regole per determinare il valore di this nelle funzioni</a>.</p> + +<p><code>some()</code> non muta l'array dalla quale è stato evocato.</p> + +<p>Il range di elementi processati da <code>some()</code> è impostato prima della prima chiamata alla <code>callback</code>. Gli elementi che vengono attaccati o aggiunti all'array dopo che è stata effettuata la chiamata al metodo <code>some()</code> non verranno tenuti in considerazione. Se al contrario un elemento viene cambiato prima che venga processato dalla <code>callback</code>, il valore passato sarà quello modificato. Elementi eliminati invece non verranno controllati. </p> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Testare_i_valori_all'interno_di_un_array">Testare i valori all'interno di un array</h3> + +<p>L'esempio seguente testa se almeno un elemento dell'array è maggiore di 10.</p> + +<pre class="brush: js">function isBiggerThan10(element, index, array) { + return element > 10; +} + +[2, 5, 8, 1, 4].some(isBiggerThan10); // false +[12, 5, 8, 1, 4].some(isBiggerThan10); // true +</pre> + +<h3 id="Testing_array_elements_using_arrow_functions">Testing array elements using arrow functions</h3> + +<p><a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Arrow functions</a> provide a shorter syntax for the same test.</p> + +<pre class="brush: js">[2, 5, 8, 1, 4].some(x => x > 10); // false +[12, 5, 8, 1, 4].some(x => x > 10); // true +</pre> + +<h3 id="Checking_whether_a_value_exists_in_an_array">Checking whether a value exists in an array</h3> + +<p>To mimic the function of the <code>includes()</code> method, this custom function returns <code>true</code> if the element exists in the array:</p> + +<pre class="brush: js">var fruits = ['apple', 'banana', 'mango', 'guava']; + +function checkAvailability(arr, val) { + return arr.some(function(arrVal) { + return val === arrVal; + }); +} + +checkAvailability(fruits, 'kela'); // false +checkAvailability(fruits, 'banana'); // true</pre> + +<h3 id="Checking_whether_a_value_exists_using_an_arrow_function">Checking whether a value exists using an arrow function</h3> + +<pre class="brush: js">var fruits = ['apple', 'banana', 'mango', 'guava']; + +function checkAvailability(arr, val) { + return arr.some(arrVal => val === arrVal); +} + +checkAvailability(fruits, 'kela'); // false +checkAvailability(fruits, 'banana'); // true</pre> + +<h3 id="Converting_any_value_to_Boolean">Converting any value to Boolean</h3> + +<pre class="brush: js">var TRUTHY_VALUES = [true, 'true', 1]; + +function getBoolean(value) { + 'use strict'; + + if (typeof value === 'string') { + value = value.toLowerCase().trim(); + } + + return TRUTHY_VALUES.some(function(t) { + return t === value; + }); +} + +getBoolean(false); // false +getBoolean('false'); // false +getBoolean(1); // true +getBoolean('true'); // true</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p><code>some()</code> was added to the ECMA-262 standard in the 5th edition; as such it may not be present in all implementations of the standard. You can work around this by inserting the following code at the beginning of your scripts, allowing use of <code>some()</code> in implementations which do not natively support it. This algorithm is exactly the one specified in ECMA-262, 5th edition, assuming {{jsxref("Object")}} and {{jsxref("TypeError")}} have their original values and that <code>fun.call</code> evaluates to the original value of {{jsxref("Function.prototype.call()")}}.</p> + +<pre class="brush: js">// Production steps of ECMA-262, Edition 5, 15.4.4.17 +// Reference: http://es5.github.io/#x15.4.4.17 +if (!Array.prototype.some) { + Array.prototype.some = function(fun/*, thisArg*/) { + 'use strict'; + + if (this == null) { + throw new TypeError('Array.prototype.some called on null or undefined'); + } + + if (typeof fun !== 'function') { + throw new TypeError(); + } + + var t = Object(this); + var len = t.length >>> 0; + + var thisArg = arguments.length >= 2 ? arguments[1] : void 0; + for (var i = 0; i < len; i++) { + if (i in t && fun.call(thisArg, t[i], i, t)) { + return true; + } + } + + return false; + }; +} +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.17', 'Array.prototype.some')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.6.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.some', 'Array.prototype.some')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.some', 'Array.prototype.some')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.some")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Array.prototype.find()")}}</li> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li>{{jsxref("Array.prototype.every()")}}</li> + <li>{{jsxref("TypedArray.prototype.some()")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/array/sort/index.html b/files/it/web/javascript/reference/global_objects/array/sort/index.html new file mode 100644 index 0000000000..6c16c7dd6b --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/array/sort/index.html @@ -0,0 +1,267 @@ +--- +title: Array.prototype.sort() +slug: Web/JavaScript/Reference/Global_Objects/Array/sort +tags: + - Array + - JavaScript + - Metodi + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Array/sort +--- +<div>{{JSRef}}</div> + +<p>Il metodo <code><strong>sort()</strong></code> ordina gli elementi di un array <em><a href="https://en.wikipedia.org/wiki/In-place_algorithm">in place</a></em> e ritorna l'array. L'ordinamento non è necessariamente <a href="https://en.wikipedia.org/wiki/Sorting_algorithm#Stability">stable</a>. L'ordinamento predefinito è in base ai punti di codice Unicode della stringa.</p> + +<p>Il tempo e la complessità dell'ordinamento dipendono dall'implementazione, perciò non possono essere garantiti.</p> + +<pre class="brush: js">var fruit = ['cherries', 'apples', 'bananas']; +fruit.sort(); // ['apples', 'bananas', 'cherries'] + +var scores = [1, 10, 21, 2]; +scores.sort(); // [1, 10, 2, 21] +// Nota che 10 viene prima di 2, +// perché '10' è l'insieme di due caratteri '1' e '0' così '10' viene prima di '2' nell'ordine dei codici Unicode code . + +var things = ['word', 'Word', '1 Word', '2 Words']; +things.sort(); // ['1 Word', '2 Words', 'Word', 'word'] +// In Unicode, i numeri vengono prima delle lettere maiuscole, +// che vengono prima delle lettere minuscole. +</pre> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><var>arr</var>.sort() +<var>arr</var>.sort(<var>[compareFunction]</var>) +</pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt><code>compareFunction</code> {{optional_inline}}</dt> + <dd>Specifica una funzione che definisce il tipo di ordinamento. Se viene omessa, l'array è ordinato in base ai valori dei suoi caratteri <a href="/en-US/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Unicode">Unicode</a> code , basandosi sulle stringhe di ogni elemento convertito.</dd> +</dl> + +<h3 id="Valore_ritornato">Valore ritornato</h3> + +<p>L'array ordinato. Nota che l'array è ordinato <em><a href="https://en.wikipedia.org/wiki/In-place_algorithm">in place</a></em>, e non viene fatta alcuna copia.</p> + +<h2 id="Descrizione">Descrizione</h2> + +<p>Se non viene fornita una <code>compareFunction</code> , gli elementi vengono ordinati convertendoli in stringhe e confrontando le stringhe nell'ordine dei codici Unicode . Per esempio, "Banana" viene prima di "cherry". In ordine numerico, 9 arriva prima dell'80, ma poiché i numeri vengono convertiti in stringhe, "80" viene prima di "9" nell'ordine Unicode.</p> + +<p>Se viene fornita una <code>compareFunction</code> , gli elementi dell'array vengono ordinati in base al valore restituito della funzione di confronto. Se a e b sono due elementi da confrontare, allora:</p> + +<ul> + <li>Se <code>compareFunction(a, b)</code> è minore di 0, posiziona <code>a</code> in un indice inferiore di <code>b</code>, quindi <code>a</code> viene prima.</li> + <li>Se <code>compareFunction(a, b)</code> ritorna 0, lascia <code>a</code> e <code>b</code> invariati l'uno rispetto all'altro, ma ordinati rispetto a tutti i diversi elementi. Nota: lo standard ECMAscript non garantisce questo comportamento, quindi non tutti i browser (ad esempio versioni di Mozilla risalenti almeno al 2003) rispettano questo.</li> + <li>Se <code>compareFunction(a, b)</code> è maggiore di 0, posiziona <code>b</code> con un indice più basso di <code>a</code>, cioè <code>b</code> viene prima.</li> + <li><code>compareFunction(a, b)</code> deve sempre restituire lo stesso valore quando viene data una coppia specifica di elementi a e b come i suoi due argomenti. Se vengono restituiti risultati non coerenti, l'ordinamento non è definito.</li> +</ul> + +<p>Quindi, la funzione di confronto ha la seguente forma:</p> + +<pre class="brush: js">function compare(a, b) { + if (a è inferiore a b secondo un criterio di ordinamento) { + return -1; + } + if (a è maggiore di b secondo un criterio di ordinamento) { + return 1; + } + // a deve essere uguale a b + return 0; +} +</pre> + +<p>Per confrontare i numeri anziché le stringhe, la funzione di confronto può semplicemente sottrarre <code>b</code> da <code>a</code>. La seguente funzione ordinerà l'array in ordine crescente (se non contiene <code>Infinity</code> e <code>NaN</code>):</p> + +<pre class="brush: js">function compareNumbers(a, b) { + return a - b; +} +</pre> + +<p>Il metodo <code>sort</code> può essere usato bene con {{jsxref("Operators/function", "function expressions", "", 1)}} ( e <a href="/en-US/docs/Web/JavaScript/Guide/Closures">closures</a>):</p> + +<pre class="brush: js">var numbers = [4, 2, 5, 1, 3]; +numbers.sort(function(a, b) { + return a - b; +}); +console.log(numbers); + +// [1, 2, 3, 4, 5] +</pre> + +<p>ES2015 fornisce le {{jsxref("Functions_and_function_scope/Arrow_functions", "arrow function", "", 1)}}, che consentono una sintassi più compatta:</p> + +<pre class="brush: js">let numbers = [4, 2, 5, 1, 3]; +numbers.sort((a, b) => a - b); +console.log(numbers); + +// [1, 2, 3, 4, 5]</pre> + +<p>Gli Object possono essere ordinati passando il valore di una delle loro proprietà.</p> + +<pre class="brush: js">var items = [ + { name: 'Edward', value: 21 }, + { name: 'Sharpe', value: 37 }, + { name: 'And', value: 45 }, + { name: 'The', value: -12 }, + { name: 'Magnetic', value: 13 }, + { name: 'Zeros', value: 37 } +]; + +// ordinamento per valore +items.sort(function (a, b) { + return a.value - b.value; +}); + +// ordinamento per nome +items.sort(function(a, b) { + var nameA = a.name.toUpperCase(); // ignora maiuscole e minuscole + var nameB = b.name.toUpperCase(); // ignora maiuscole e minuscole + if (nameA < nameB) { + return -1; + } + if (nameA > nameB) { + return 1; + } + + // i nomi devono essere uguali + return 0; +});</pre> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Creare_visualizzare_ed_ordinare_un_array">Creare, visualizzare, ed ordinare un array</h3> + +<p>L'esempio seguente crea quattro array , visualizza l'array originale e successivamente l'array ordinato. Gli array numerici sono ordinati prima senza e poi con una funzione di comparazione .</p> + +<pre class="brush: js">var stringArray = ['Blue', 'Humpback', 'Beluga']; +var numericStringArray = ['80', '9', '700']; +var numberArray = [40, 1, 5, 200]; +var mixedNumericArray = ['80', '9', '700', 40, 1, 5, 200]; + +function compareNumbers(a, b) { + return a - b; +} + +console.log('stringArray:', stringArray.join()); +console.log('Ordinato:', stringArray.sort()); + +console.log('numberArray:', numberArray.join()); +console.log('Ordinato senza funzione compare:', numberArray.sort()); +console.log('Ordinato con compareNumbers:', numberArray.sort(compareNumbers)); + +console.log('numericStringArray:', numericStringArray.join()); +console.log('Ordinato senza funzione compare:', numericStringArray.sort()); +console.log('Ordinato con compareNumbers:', numericStringArray.sort(compareNumbers)); + +console.log('mixedNumericArray:', mixedNumericArray.join()); +console.log('Ordinato senza funzione compare:', mixedNumericArray.sort()); +console.log('Ordinato con compareNumbers:', mixedNumericArray.sort(compareNumbers)); +</pre> + +<p>Questo esempio produce il seguente output. Come viene mostrato, quando viene usata una funzione comparativa, i numeri vengono ordinati correttamente sia nel caso siano numeri che nel caso siano stringhe di numeri.</p> + +<pre>stringArray: Blue,Humpback,Beluga +Ordinato: Beluga,Blue,Humpback + +numberArray: 40,1,5,200 +Ordinato senza funzione compare: 1,200,40,5 +Ordinato con compareNumbers: 1,5,40,200 + +numericStringArray: 80,9,700 +Ordinato senza funzione compare: 700,80,9 +Ordinato con compareNumbers: 9,80,700 + +mixedNumericArray: 80,9,700,40,1,5,200 +Ordinato senza funzione compare: 1,200,40,5,700,80,9 +Ordinato con compareNumbers: 1,5,9,40,80,200,700 +</pre> + +<h3 id="Ordinare_caratteri_non-ASCII">Ordinare caratteri non-ASCII </h3> + +<p>Per ordinare stringhe con caratteri non-ASCII, cioè stringhe con caratteri accentati (e, é, è, a, ä, etc.), stringhe da lingue diverse dall'inglese: si usa {{jsxref("String.localeCompare")}}. Questa funzione può confrontare quei caratteri in modo che compaiano nel giusto ordine.</p> + +<pre class="brush: js">var items = ['réservé', 'premier', 'cliché', 'communiqué', 'café', 'adieu']; +items.sort(function (a, b) { + return a.localeCompare(b); +}); + +// items is ['adieu', 'café', 'cliché', 'communiqué', 'premier', 'réservé'] +</pre> + +<h3 id="Ordinare_con_map">Ordinare con map</h3> + +<p>La <code>compareFunction</code> può essere invocata più volte per elemento all'interno dell'array. In base alla natura della <code>compareFunction</code>, si potrebbe produrre un sovraccarico elevato. Maggiore è il lavoro svolto da <code>compareFunction</code> e maggiori sono gli elementi da ordinare, potrebbe essere saggio utilizzare una <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a> per l'ordinamento. L'idea è di percorrere una volta l'array per estrarre i valori effettivi usati per l'ordinamento in un array temporaneo, ordinare l'array temporaneo e quindi percorrere l'array temporaneo per ottenere l'ordine giusto.</p> + +<pre class="brush: js" dir="rtl">// l'array da ordinare +var list = ['Delta', 'alpha', 'CHARLIE', 'bravo']; + +// l'array temporaneo contiene oggetti con posizione e valore di ordinamento +var mapped = list.map(function(el, i) { + return { index: i, value: el.toLowerCase() }; +}) + +// ordinamento dell'array mappato contenente i valori ridotti +mapped.sort(function(a, b) { + if (a.value > b.value) { + return 1; + } + if (a.value < b.value) { + return -1; + } + return 0; +}); + +// contenitore per l'ordine risultante +var result = mapped.map(function(el){ + return list[el.index]; +}); +</pre> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Osservazione</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definizione iniziale.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.11', 'Array.prototype.sort')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.sort', 'Array.prototype.sort')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.sort', 'Array.prototype.sort')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_il_browser">Compatibilità con il browser</h2> + +<div> +<div class="hidden">La tabella di compatibilità in questa pagina è generata da dati strutturati. Se desideri contribuire ai dati, consulta <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e inviaci una richiesta di pull.</div> + +<p>{{Compat("javascript.builtins.Array.sort")}}</p> +</div> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>{{jsxref("Array.prototype.reverse()")}}</li> + <li>{{jsxref("String.prototype.localeCompare()")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/array/splice/index.html b/files/it/web/javascript/reference/global_objects/array/splice/index.html new file mode 100644 index 0000000000..a68058baf8 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/array/splice/index.html @@ -0,0 +1,163 @@ +--- +title: Array.prototype.splice() +slug: Web/JavaScript/Reference/Global_Objects/Array/splice +tags: + - Aggiunta + - Array + - JavaScript + - Method + - Prototype + - Reference + - Rimozione + - splice +translation_of: Web/JavaScript/Reference/Global_Objects/Array/splice +--- +<div>{{JSRef}}</div> + +<p>Il metodo <strong><code>splice()</code></strong> modifica il contenuto di un array rimuovendo o sostituendo elementi esistenti e/o aggiungendo nuovi elementi <a href="https://en.wikipedia.org/wiki/In-place_algorithm">in place</a>.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-splice.html")}}</div> + + + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><var>var arrDeletedItems = array</var>.splice(<var>start[</var>, <var>deleteCount[</var>, <var>item1[</var>, <var>item2[</var>, <em>...]]]]</em>) +</pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt><code>start</code></dt> + <dd>L'indice al quale iniziare a cambiare l'array. Se maggiore della lunghezza dell'array, <code>start</code> sarà impostato sulla lunghezza dell'array. Se negativo, inizierà molti elementi dalla fine dell'array (con origine -1, che significa -n è l'indice dell'ultimo elemento dell'ennesima ed è quindi equivalente all'indice di <code>array.length - n</code>). Se il valore assoluto di <code>start</code> è maggiore della lunghezza dell'array, inizierà dall'indice 0.</dd> + <dt><code>deleteCount</code> {{optional_inline}}</dt> + <dd>Un numero intero che indica il numero di elementi nell'array da rimuovere da <code>start</code>.</dd> + <dd>Se <code>deleteCount</code> viene omesso, o se il suo valore è uguale o maggiore di <code>array.length - start</code> (cioè, se è uguale o maggiore del numero di elementi rimasti nell'array, a partire da <code>start</code>), tutti gli elementi da <code>start</code> alla fine dell'array verranno eliminati.</dd> + <dd>Se <code>deleteCount</code> è 0 o negativo, non vengono rimossi elementi. In questo caso, devi specificare almeno un nuovo elemento (vedi sotto).</dd> + <dt><code>item1, item2, <em>...</em></code> {{optional_inline}}</dt> + <dd>Gli elementi da aggiungere all'array, a partire da <code>start</code>. Se non viene specificato alcun elemento, <code>splice()</code> rimuoverà solo gli elementi dall'array.</dd> +</dl> + +<h3 id="Valore_di_ritorno">Valore di ritorno</h3> + +<p>Un array contenente gli elementi eliminati. Se viene rimosso solo un elemento, viene restituito un array di un elemento. Se non vengono rimossi elementi, viene restituito un array vuoto.</p> + +<h2 id="Descrizione">Descrizione</h2> + +<p>Se il numero specificato di elementi da inserire differisce dal numero di elementi da rimuovere, la lunghezza dell'array sarà diversa alla fine della chiamata.</p> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Rimuovi_0_(zero)_elementi_dall'indice_2_e_inserisci_drum">Rimuovi 0 (zero) elementi dall'indice 2 e inserisci "drum"</h3> + +<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon']; +var removed = myFish.splice(2, 0, 'drum'); + +// myFish è ["angel", "clown", "drum", "mandarin", "sturgeon"] +// removed è [], nessun elemento rimosso</pre> + +<h3 id="Rimuovi_0_(zero)_elementi_dall'indice_2_e_inserisci_drum_e_guitar">Rimuovi 0 (zero) elementi dall'indice 2 e inserisci "drum" e "guitar"</h3> + +<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon']; +var removed = myFish.splice(2, 0, 'drum', 'guitar'); + +// myFish è ["angel", "clown", "drum", "guitar", "mandarin", "sturgeon"] +// removed è [], nessun elemento rimosso +</pre> + +<h3 id="Rimuovi_1_elemento_dall'indice_3">Rimuovi 1 elemento dall'indice 3</h3> + +<pre class="brush: js">var myFish = ['angel', 'clown', 'drum', 'mandarin', 'sturgeon']; +var removed = myFish.splice(3, 1); + +// removed è ["mandarin"] +// myFish è ["angel", "clown", "drum", "sturgeon"] +</pre> + +<h3 id="Rimuovi_1_elemento_dall'indice_2_e_inserisci_trumpet">Rimuovi 1 elemento dall'indice 2 e inserisci "trumpet"</h3> + +<pre class="brush: js">var myFish = ['angel', 'clown', 'drum', 'sturgeon']; +var removed = myFish.splice(2, 1, 'trumpet'); + +// myFish è ["angel", "clown", "trumpet", "sturgeon"] +// removed è ["drum"]</pre> + +<h3 id="Rimuovere_2_elementi_dall'indice_0_e_inserire_parrot_anemone_e_blue">Rimuovere 2 elementi dall'indice 0 e inserire "parrot", "anemone" e "blue"</h3> + +<pre class="brush: js">var myFish = ['angel', 'clown', 'trumpet', 'sturgeon']; +var removed = myFish.splice(0, 2, 'parrot', 'anemone', 'blue'); + +// myFish è ["parrot", "anemone", "blue", "trumpet", "sturgeon"] +// removed è ["angel", "clown"]</pre> + +<h3 id="Rimuovere_2_elementi_dall'indice_2">Rimuovere 2 elementi dall'indice 2</h3> + +<pre class="brush: js">var myFish = ['parrot', 'anemone', 'blue', 'trumpet', 'sturgeon']; +var removed = myFish.splice(myFish.length - 3, 2); + +// myFish è ["parrot", "anemone", "sturgeon"] +// removed è ["blue", "trumpet"]</pre> + +<h3 id="Rimuovere_1_elemento_dall'indice_-2">Rimuovere 1 elemento dall'indice -2</h3> + +<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon']; +var removed = myFish.splice(-2, 1); + +// myFish è ["angel", "clown", "sturgeon"] +// removed è ["mandarin"]</pre> + +<h3 id="Rimuovere_tutti_gli_elementi_dopo_l'indice_2_(incl.)">Rimuovere tutti gli elementi dopo l'indice 2 (incl.)</h3> + +<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon']; +var removed = myFish.splice(2); + +// myFish è ["angel", "clown"] +// removed è ["mandarin", "sturgeon"]</pre> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Definizione iniziale Implementato in JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.12', 'Array.prototype.splice')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.splice', 'Array.prototype.splice')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.splice', 'Array.prototype.splice')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.splice")}}</p> +</div> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>{{jsxref("Array.prototype.push()", "push()")}} / {{jsxref("Array.prototype.pop()", "pop()")}} — aggiunge/rimuove elementi dalla fine dell'array</li> + <li>{{jsxref("Array.prototype.unshift()", "unshift()")}} / {{jsxref("Array.prototype.shift()", "shift()")}} — aggiunge/rimuove elementi dall'inizio dell'array</li> + <li>{{jsxref("Array.prototype.concat()", "concat()")}} — restituisce un nuovo array composto da questo array unito ad altri array e/o valore/i</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/array/tostring/index.html b/files/it/web/javascript/reference/global_objects/array/tostring/index.html new file mode 100644 index 0000000000..a5b8dcaa1e --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/array/tostring/index.html @@ -0,0 +1,80 @@ +--- +title: Array.prototype.toString() +slug: Web/JavaScript/Reference/Global_Objects/Array/toString +tags: + - Array + - JavaScript + - Prototype + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/Array/toString +--- +<div>{{JSRef}}</div> + +<p>Il metodo <code><strong>toString()</strong></code> restituisce una stringa che rappresenta l'array specificato e i suoi elementi.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-tostring.html")}}</div> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><var>arr</var>.toString()</pre> + +<h3 id="Valore_di_ritorno">Valore di ritorno</h3> + +<p>Una stringa che rappresenta gli elementi dell'array.</p> + +<h2 id="Descrizione">Descrizione</h2> + +<p>L'oggetto {{jsxref("Array")}} sovrascrive il metodo <code>toString</code> di {{jsxref("Object")}}. Per gli oggetti Array, il metodo <code>toString</code> unisce l'array e restituisce una stringa contenente ciascun elemento dell'array separato da virgole.</p> + +<p>JavaScript chiama automaticamente il metodo <code>toString</code> quando un array deve essere rappresentato come un valore di testo o quando viene fatto riferimento a un array in una concatenazione di stringhe.</p> + +<h3 id="ECMAScript_5_semantics">ECMAScript 5 semantics</h3> + +<p>A partire da JavaScript 1.8.5 (Firefox 4) e coerente con la semantica ECMAScript 5th edition, il metodo <code>toString()</code> è generico e può essere utilizzato con qualsiasi oggetto. {{jsxref("Object.prototype.toString()")}} sarà chiamato e verrà restituito il valore risultante.</p> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definizione iniziale Implementato in JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.2', 'Array.prototype.toString')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.tostring', 'Array.prototype.toString')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.tostring', 'Array.prototype.toString')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.toString")}}</p> +</div> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>{{jsxref("Array.prototype.join()")}}</li> + <li>{{jsxref("Object.prototype.toSource()")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/array/unshift/index.html b/files/it/web/javascript/reference/global_objects/array/unshift/index.html new file mode 100644 index 0000000000..ca4597e973 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/array/unshift/index.html @@ -0,0 +1,98 @@ +--- +title: Array.prototype.unshift() +slug: Web/JavaScript/Reference/Global_Objects/Array/unshift +translation_of: Web/JavaScript/Reference/Global_Objects/Array/unshift +--- +<div>{{JSRef}}</div> + +<div>Il metodo <strong><code>unshift()</code></strong> aggiunge uno o più elementi all'inizio di un array e restitusce la nuova lunghezza dell'array stesso.</div> + +<div> </div> + +<div>{{EmbedInteractiveExample("pages/js/array-unshift.html")}}</div> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><var>arr</var>.unshift(<var>element1</var>[, ...[, <var>elementN</var>]])</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>element<em>N</em></code></dt> + <dd>Gli elementi da aggiungere all'inizio dell'array.</dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<dl> + <dd>La nuova proprietà {{jsxref("Array.length", "length")}} dell'oggetto su cui è stato chiamato il metodo.</dd> +</dl> + +<h2 id="Descrizione">Descrizione</h2> + +<p>Il metodo <code>unshift</code> inserisce i valori passati come parametri all'inizio di un oggetto array-like.</p> + +<p><code>unshift</code> è instenzionalmente generico; questo metodo può essere {{jsxref("Function.call", "chiamato", "", 1)}} o {{jsxref("Function.apply", "applicato", "", 1)}} su oggetti che assomigliano ad un array. Oggetti che non contengono una proprietà <code>length</code> che rifletta l'ultimo di una serie di consecutive proprietà numeriche zero-based potrebbero non comportarsi in alcun modo significativo.</p> + +<h2 id="Esempi">Esempi</h2> + +<pre class="brush: js">var arr = [1, 2]; + +arr.unshift(0); // result of call is 3, the new array length +// arr is [0, 1, 2] + +arr.unshift(-2, -1); // = 5 +// arr is [-2, -1, 0, 1, 2] + +arr.unshift([-3]); +// arr is [[-3], -2, -1, 0, 1, 2] +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initial definition. Implemented in JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.13', 'Array.prototype.unshift')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.unshift', 'Array.prototype.unshift')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.unshift', 'Array.prototype.unshift')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.unshift")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Array.prototype.push()")}}</li> + <li>{{jsxref("Array.prototype.pop()")}}</li> + <li>{{jsxref("Array.prototype.shift()")}}</li> + <li>{{jsxref("Array.prototype.concat()")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/array/values/index.html b/files/it/web/javascript/reference/global_objects/array/values/index.html new file mode 100644 index 0000000000..f3019ef144 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/array/values/index.html @@ -0,0 +1,87 @@ +--- +title: Array.prototype.values() +slug: Web/JavaScript/Reference/Global_Objects/Array/values +translation_of: Web/JavaScript/Reference/Global_Objects/Array/values +--- +<div>{{JSRef}}</div> + +<p> </p> + +<p><code style=""><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Il metodo </span></font><strong>values()</strong></code> restituisce un nuovo oggetto <strong><code>Array Iterator</code></strong> che contiene i valori per ogni indice nell'array.</p> + +<p>{{EmbedInteractiveExample("pages/js/array-values.html")}}</p> + +<pre class="brush: js">var a = ['a', 'b', 'c', 'd', 'e']; +var iterator = a.values(); + +console.log(iterator.next().value); // a +console.log(iterator.next().value); // b +console.log(iterator.next().value); // c +console.log(iterator.next().value); // d +console.log(iterator.next().value); // e</pre> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><var>arr</var>.values()</pre> + +<h3 id="Valore_di_ritorno">Valore di ritorno</h3> + +<p>Un nuovo oggetto iteratore {{jsxref("Array")}}.</p> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Iterazione_utilizzando_il_for...of_loop">Iterazione utilizzando il <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a></code> loop</h3> + +<pre class="brush: js">var arr = ['a', 'b', 'c', 'd', 'e']; +var iterator = arr.values(); + +for (let letter of iterator) { + console.log(letter); +} +</pre> + +<p><strong>Array.prototype.values</strong> è una implementazionde di default di <strong>Array.prototype[Symbol.iterator]</strong>.</p> + +<pre>Array.prototype.values === Array.prototype[Symbol.iterator] //true</pre> + +<p><strong>TODO</strong>: please write about why we need it, use cases.</p> + +<h2 id="Specificazioni">Specificazioni</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-array.prototype.values', 'Array.prototype.values')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Definizione iniziale.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.values', 'Array.prototype.values')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.values")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Array.prototype.keys()")}}</li> + <li>{{jsxref("Array.prototype.entries()")}}</li> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li>{{jsxref("Array.prototype.every()")}}</li> + <li>{{jsxref("Array.prototype.some()")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/arraybuffer/index.html b/files/it/web/javascript/reference/global_objects/arraybuffer/index.html new file mode 100644 index 0000000000..118b3d2801 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/arraybuffer/index.html @@ -0,0 +1,147 @@ +--- +title: ArrayBuffer +slug: Web/JavaScript/Reference/Global_Objects/ArrayBuffer +tags: + - Array tipizzati + - ArrayBuffer + - Constructor + - Costruttore + - JavaScript + - TypedArrays +translation_of: Web/JavaScript/Reference/Global_Objects/ArrayBuffer +--- +<div>{{JSRef}}</div> + +<p>L'oggetto <code>ArrayBuffer</code> viene utilizzato per rappresentare un buffer di lunghezza fissa di dati non elaborati. Non è possibile manipolare il contenuto di un <code>ArrayBuffer</code>, è possibile invece creare un array di oggetti tipizzati o un oggetto di tipo {{jsxref("DataView")}} che rappresenta il buffer in uno specifico formato ed utilizzare questo per leggere e scrivere il contenuto del buffer.</p> + +<div>{{EmbedInteractiveExample("pages/js/arraybuffer-constructor.html")}}</div> + + + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox">new ArrayBuffer(length) +</pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt><code>length</code></dt> + <dd>La dimensione, in bytes, dell'array buffer da creare.</dd> +</dl> + +<h3 id="Valori_di_ritorno">Valori di ritorno</h3> + +<p>Un nuovo oggetto di tipo <code>ArrayBuffer</code> della dimensione specificata. Il suo contenuto è inzializzato a 0.</p> + +<h3 id="Eccezioni">Eccezioni</h3> + +<p>Un {{jsxref("RangeError")}} viene generato se la lunghezza è maggiore di di {{jsxref("Number.MAX_SAFE_INTEGER")}} (>= 2 ** 53) oppure è negativa.</p> + +<h2 id="Descrizione">Descrizione</h2> + +<p>Il costruttore <code>ArrayBuffer</code> crea un nuovo <code>ArrayBuffer</code> di lunghezza specificata in bytes.</p> + +<h3 id="Ottenere_un_array_buffer_da_dati_pre-esistenti">Ottenere un array buffer da dati pre-esistenti</h3> + +<ul> + <li><a href="/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding#Appendix.3A_Decode_a_Base64_string_to_Uint8Array_or_ArrayBuffer">Da una stringa in Base64</a></li> + <li><a href="/en-US/docs/Web/API/FileReader#readAsArrayBuffer()">Da un file locale</a></li> +</ul> + +<h2 id="Proprietà">Proprietà</h2> + +<dl> + <dt><code>ArrayBuffer.length</code></dt> + <dd>La dimensione del costruttore <code>ArrayBuffer</code> il cui valore è 1.</dd> + <dt>{{jsxref("ArrayBuffer.@@species", "get ArrayBuffer[@@species]")}}</dt> + <dd>La funzione costruttore utilizzata per creare oggetti derivati.</dd> + <dt>{{jsxref("ArrayBuffer.prototype")}}</dt> + <dd>Permette di aggiungere proprietà a tutti gli oggetti di tipo <code>ArrayBuffer</code>.</dd> +</dl> + +<h2 id="Metodi">Metodi</h2> + +<dl> + <dt>{{jsxref("ArrayBuffer.isView", "ArrayBuffer.isView(arg)")}}</dt> + <dd>Restituisce <code>true</code> se <code>args</code> è una delle viste di ArrayBuffer, come un array di oggetti tipizzato o un {{jsxref("DataView")}}. Altrimenti restituisce <code>false</code>.</dd> + <dt>{{jsxref("ArrayBuffer.transfer", "ArrayBuffer.transfer(oldBuffer [, newByteLength])")}} {{experimental_inline}}</dt> + <dd>Restituisce un nuovo <code>ArrayBuffer</code> i cui contenuti sono presi dai dati dell'oggetto <code>oldBuffer</code> e successivamente troncato o esteso a zero tramite <code>newByteLength</code>.</dd> +</dl> + +<h2 id="Istanze">Istanze</h2> + +<p>Tutte le istanze di ArrayBuffer ereditano da {{jsxref("ArrayBuffer.prototype")}}.</p> + +<h3 id="Proprietà_2">Proprietà</h3> + +<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/ArrayBuffer/prototype','Properties')}}</p> + +<h3 id="Metodi_2">Metodi</h3> + +<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/ArrayBuffer/prototype','Methods')}}</p> + +<dl> + <dt>{{jsxref("ArrayBuffer.slice()")}} {{non-standard_inline}}</dt> + <dd>Esegue le stesse operazioni di {{jsxref("ArrayBuffer.prototype.slice()")}}.</dd> +</dl> + +<h2 id="Esempio">Esempio</h2> + +<p>In questo esempio viene creato un buffer di 8 byte con una vista di tipo {{jsxref("Global_Objects/Int32Array", "Int32Array")}} che si riferisce al buffer</p> + +<pre class="brush: js">var buffer = new ArrayBuffer(8); +var view = new Int32Array(buffer);</pre> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Typed Array')}}</td> + <td>{{Spec2('Typed Array')}}</td> + <td>Sostituito da ECMAScript 6.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-arraybuffer-constructor', 'ArrayBuffer')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> + <p>Definizione iniziale con standard ECMA. Specifica che <code>new</code> è richiesto.</p> + </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-arraybuffer-constructor', 'ArrayBuffer')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.builtins.ArrayBuffer")}}</p> + +<h2 id="Note_sulla_compatibilità">Note sulla compatibilità</h2> + +<p>Con ECMAScript 2015, ArrayBuffer deve essere inizializzato con l'operatore {{jsxref("Operators/new", "new")}}. Inizializzare ArrayBuffer senza l'operatore new genererà un {{jsxref("TypeError")}}.</p> + +<pre class="brush: js example-bad">var dv = ArrayBuffer(10); +// TypeError: inizializzaree un ArrayBuffer senza il costruttore new +// genererà un errore +</pre> + +<pre class="brush: js example-good">var dv = new ArrayBuffer(10);</pre> + +<h2 id="Leggi_anche">Leggi anche</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays">JavaScript typed arrays</a></li> + <li>{{jsxref("SharedArrayBuffer")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/atomics/index.html b/files/it/web/javascript/reference/global_objects/atomics/index.html new file mode 100644 index 0000000000..56c3ed5ecc --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/atomics/index.html @@ -0,0 +1,166 @@ +--- +title: Atomics +slug: Web/JavaScript/Reference/Global_Objects/Atomics +translation_of: Web/JavaScript/Reference/Global_Objects/Atomics +--- +<div>{{JSRef}}</div> + +<p>L' oggetto <strong><code>Atomics</code></strong> fornisce operazioni atomiche come metodi statici. Sono utilizzati con gli oggetti {{jsxref("SharedArrayBuffer")}}.</p> + +<p>Le operazioni atomiche sono implementate nel modulo <code>Atomics</code>. Diversamente dagli altri oggetti global, <code>Atomics</code> non è un constructor. Non è, quindi, possibile utilizzarlo con <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new"><code>new</code> operator</a> o invocare l'oggetto <code>Atomics</code> come una funzione. Tutte le proprietà ed i metodi di <code>Atomics</code> sono statici (come per esempio nel caso dell'oggetto {{jsxref("Math")}}).</p> + +<h2 id="Propertà">Propertà</h2> + +<dl> + <dt><code>Atomics[Symbol.toStringTag]</code></dt> + <dd>Il valore di questa proprietà è "Atomics".</dd> +</dl> + +<h2 id="Metodi">Metodi</h2> + +<h3 id="Operazioni_Atomiche">Operazioni Atomiche</h3> + +<p>Quando la memoria è condivisa, molti thread possono leggere e scrivere gli stessi dati in memoria. Le operazioni atomiche fanno in modo che: siano scritti e letti valori predicibili, che ciscuna operazione termini prima che la successiva abbia inizio e che ciascuna operazione non sia interrotta.</p> + +<dl> + <dt>{{jsxref("Atomics.add()")}}</dt> + <dd>Aggiunge un determinato valore in una determinata posizione dell'array. Restituisce il vecchio valore che occupava la medesima posizione nell'array.</dd> + <dt>{{jsxref("Atomics.and()")}}</dt> + <dd>Calcola un "bitwise AND" in una determinata posizione dell'array. Restituisce il vecchio valore che occupava la medesima posizione nell'array.</dd> + <dt>{{jsxref("Atomics.compareExchange()")}}</dt> + <dd>Memorizza un dato valore in una posizione dell'array, se questo valore è uguale ad un altro determinato valore. Restituisce il vecchio valore che occupava la medesima posizione nell'array.</dd> + <dt>{{jsxref("Atomics.exchange()")}}</dt> + <dd>Memorizza un dato valore in una determinata posizione nell'array. Restituisce il vecchio valore che occupava la medesima posizione nell'array.</dd> +</dl> + +<dl> + <dt>{{jsxref("Atomics.load()")}}</dt> + <dd>Restituisce il valore di una determinata posizione nell'array.</dd> + <dt>{{jsxref("Atomics.or()")}}</dt> + <dd>Calcola un "bitwise OR" in una determinata posizione dell'array. Restituisce il vecchio valore che occupava la medesima posizione nell'array.</dd> + <dt>{{jsxref("Atomics.store()")}}</dt> + <dd>Memorizza un dato valore in una determinata posizione dell'array. Restituisce lo stesso valore momorizzato.</dd> + <dt>{{jsxref("Atomics.sub()")}}</dt> + <dd>Sottrae un determinato valore ad una data posizione dell'array. Restituisce il vecchio valore che occupava la medesima posizione nell'array.</dd> + <dt>{{jsxref("Atomics.xor()")}}</dt> + <dd>Calcola un "bitwise XOR" in una determinata posizione dell'array. Restituisce il vecchio valore che occupava la medesima posizione nell'array.</dd> +</dl> + +<h3 id="Wait_and_wake">Wait and wake</h3> + +<p>I metodi <code>wait()</code> e <code>wake() </code>sono modellati sul futexes ("fast user-space mutex") di Linux e forniscono metodi di attesa finchè una certa condizione non diventa vera e sono tipicamente utilizzati in costrutti bloccanti.</p> + +<dl> + <dt>{{jsxref("Atomics.wait()")}}</dt> + <dd> + <p>Verifica che una certa posizione dell'array continui a contenere un determinato valore e si mette in attesa o va in time-out. Restituisce i valori <code>"ok"</code>, <code>"not-equal"</code>, oppure <code>"timed-out"</code>. Se l'attesa non è consentita dall'agente che effettua la chiamata, allora il metodo innesca una "Error Exception" (molti browsers non consentiranno <code>wait()</code> nel loro thread principale)</p> + </dd> + <dt>{{jsxref("Atomics.wake()")}}</dt> + <dd>"Sveglia" gli agenti dormienti nella coda di wait in una determinata posizione dell'array. Restituisce il numero degli agenti "svegliati".</dd> + <dt>{{jsxref("Atomics.isLockFree()", "Atomics.isLockFree(size)")}}</dt> + <dd> + <p>Un primitiva di ottimizzazione che può essere utilizzata per determinare quando utilizzare "lock" o operazioni atomiche. Restituisce <code>true</code>, se un operazione atomica su un array di una data dimensione può essere implementata utilizzando operazioni atomiche hardware (invece del "lock"). Solo per esperti.</p> + </dd> +</dl> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifiche</th> + <th scope="col">Status</th> + <th scope="col">Commenti</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-atomics-object', 'Atomics')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Definizione Iniziale in ES2017.</td> + </tr> + <tr> + <td>{{SpecName('ES8', '#sec-atomics-object', 'Atomics')}}</td> + <td>{{Spec2('ES8')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_Browser">Compatibilità con i Browser</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}} [2]</td> + <td>{{CompatGeckoDesktop("55")}} [1]</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("55")}} [1]</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] In Firefox, dalla versione 46 alla versione 54 questa feature è disabilitata da una configurazione avenzata. In about:config, configurare <code>javascript.options.shared_memory</code> a <code>true</code>. </p> + +<p>[2] L' implementazione è in via di sviluppo e richiede i flag di runtime: <code>--js-flags=--harmony-sharedarraybuffer --enable-blink-feature=SharedArrayBuffer</code></p> + +<h2 id="Note_di_Compatibilità">Note di Compatibilità</h2> + +<p>Prima di SpiderMonkey 48 {{geckoRelease(48)}}, i nomi e le semantiche delle API non erano ancora state implementate. Le modifiche tra la versione 46 e la versione 48 di Firefox, sono:</p> + +<ul> + <li>I metodi <code>Atomics.futexWakeOrRequeue()</code> e <code>Atomics.fence()</code> sono stati completamente rimossi ({{bug(1259544)}} e {{bug(1225028)}}).</li> + <li>I metodi {{jsxref("Atomics.wait()")}} e {{jsxref("Atomics.wake()")}} sono sati chiamati <code>Atomics.futexWait()</code> e <code>Atomics.futexWake()</code> ({{bug(1260910)}}). Nota: I vecchi nomi sono stati rimossi nella versione 49 e successive ({{bug(1262062)}}).</li> + <li>Le proprietà <code>Atomics.OK</code>, <code>Atomics.TIMEDOUT</code>, <code>Atomics.NOTEQUAL</code> sono state rimosse. Il metodo {{jsxref("Atomics.wait()")}} adesso restituisce le stringhe "ok", "timed-out" e "not-equal" ({{bug(1260835)}}).</li> + <li> + <p>Il parametro <code>count</code> del metodo {{jsxref("Atomics.wake()")}} è stato cambiato: il valore di default adesso è <code>+Infinity</code>, e non <code>0</code> ({{bug(1253350)}}).</p> + </li> +</ul> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>{{jsxref("ArrayBuffer")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays">JavaScript typed arrays</a></li> + <li><a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a></li> + <li><a href="https://github.com/lars-t-hansen/parlib-simple">parlib-simple </a>– a simple library providing synchronization and work distribution abstractions.</li> + <li><a href="https://github.com/tc39/ecmascript_sharedmem/blob/master/TUTORIAL.md">Shared Memory – a brief tutorial</a></li> + <li><a href="https://hacks.mozilla.org/2016/05/a-taste-of-javascripts-new-parallel-primitives/">A Taste of JavaScript’s New Parallel Primitives – Mozilla Hacks</a></li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/atomics/store/index.html b/files/it/web/javascript/reference/global_objects/atomics/store/index.html new file mode 100644 index 0000000000..5c8a466c0f --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/atomics/store/index.html @@ -0,0 +1,91 @@ +--- +title: Atomics.store() +slug: Web/JavaScript/Reference/Global_Objects/Atomics/store +tags: + - Atomics + - JavaScript + - Memoria condivisa + - Store + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/store +--- +<div>{{JSRef}}</div> + +<p>Il metodo statico <code><strong>Atomics</strong></code><strong><code>.store()</code></strong> memorizza un determinato valore nella posizione data nell'array e restituisce quel valore.</p> + +<div>{{EmbedInteractiveExample("pages/js/atomics-store.html")}}</div> + +<p class="hidden">La fonte per questo esempio interattivo è memorizzata in un repository GitHub. Se desideri contribuire al progetto di esempi interattivi, clonare <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> e inviarci una richiesta di pull</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox">Atomics.store(typedArray, indice, valore) +</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>typedArray</code></dt> + <dd>Un array con numero intero condiviso. Uno di {{jsxref("Int8Array")}}, {{jsxref("Uint8Array")}}, {{jsxref("Int16Array")}}, {{jsxref("Uint16Array")}}, {{jsxref("Int32Array")}}, o {{jsxref("Uint32Array")}}.</dd> + <dt><code>indice </code></dt> + <dd>La posizione in <code>typedArray</code> per memorizzare un <code>value</code> in.</dd> + <dt><code>valore</code></dt> + <dd>Numero da memorizzare.</dd> +</dl> + +<h3 id="Valore_di_Ritorno">Valore di Ritorno</h3> + +<p>The value that has been stored<br> + // Il valore memorizzato.</p> + +<h3 id="Eccezioni">Eccezioni</h3> + +<ul> + <li>Genera un {{jsxref("TypeError")}}, se <code>typedArray</code> non è uno dei tipi di numeri consentiti.</li> + <li>Genera un {{jsxref("TypeError")}}, se <code>typedArray</code> non è un tipo di array tipizzato condiviso.</li> + <li>Genera un {{jsxref("RangeError")}}, se <code>indice</code> è fuori limite in <code>typedArray</code>.</li> +</ul> + +<h2 id="Esempio">Esempio</h2> + +<pre class="brush: js">var buffer = new ArrayBuffer(4); // common buffer +var float32 = new Float32Array(buffer); // floating point +var uint32 = new Uint32Array(buffer); // IEEE754 representation + +float32[0] = 0.5; +console.log("0x" + uint32[0].toString(16)); + +uint32[0] = 0x3f000000; /// IEEE754 32-bit representation of 0.5 +console.log(float32[0]); + +</pre> + +<h2 id="Specificazioni">Specificazioni</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specificazioni</th> + <th scope="col">Stato</th> + <th scope="col">Commenti</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-atomics.store', 'Atomics.store')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>definizione inizile in ES2017.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibili">Browser compatibili</h2> + +<div class="hidden">La tabella di compatibilità in questa pagina è generata da dati strutturati. Se desideri contribuire ai dati, consulta <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e inviaci una richiesta di pull</div> + +<p>{{Compat("javascript.builtins.Atomics.store")}}</p> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>{{jsxref("Atomics")}}</li> + <li>{{jsxref("Atomics.load()")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/date/getdate/index.html b/files/it/web/javascript/reference/global_objects/date/getdate/index.html new file mode 100644 index 0000000000..32c3d5fa57 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/date/getdate/index.html @@ -0,0 +1,78 @@ +--- +title: Date.prototype.getDate() +slug: Web/JavaScript/Reference/Global_Objects/Date/getDate +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getDate +--- +<div>{{JSRef}}</div> + +<p>Il metodo <strong><code>getDate()</code></strong> resituisce il giorno del mese per la data specificata in accordo con l'ora locale.</p> + +<div>{{EmbedInteractiveExample("pages/js/date-getdate.html")}}</div> + + + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.getDate()</code></pre> + +<h3 id="Valore_di_ritorno">Valore di ritorno</h3> + +<p>Un numero integer, tra 1 e 31, rappresentante il giorno del mese per la data fornita in accordo con l'ora locale.</p> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Utilizzando_getDate()">Utilizzando getDate()</h3> + +<p>La seconda dichiarazione qui sotto assegna il valore 25 alla variabile <code>day</code>, basata sul valore dell'oggetto {{jsxref("Date")}} <code>Xmas95</code>.</p> + +<pre class="brush: js">var Xmas95 = new Date('December 25, 1995 23:15:30'); +var day = Xmas95.getDate(); + +console.log(day); // 25 +</pre> + +<h2 id="Specificazioni">Specificazioni</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.getdate', 'Date.prototype.getDate')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-date.prototype.getdate', 'Date.prototype.getDate')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9.5.14', 'Date.prototype.getDate')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definizione iniziale. Implementata in JavaScript 1.1.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Date.getDate")}}</p> + +<h2 id="Vedere_anche">Vedere anche</h2> + +<ul> + <li>{{jsxref("Date.prototype.getUTCDate()")}}</li> + <li>{{jsxref("Date.prototype.getUTCDay()")}}</li> + <li>{{jsxref("Date.prototype.setDate()")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/date/getday/index.html b/files/it/web/javascript/reference/global_objects/date/getday/index.html new file mode 100644 index 0000000000..c5fd48bca7 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/date/getday/index.html @@ -0,0 +1,89 @@ +--- +title: Date.prototype.getDay() +slug: Web/JavaScript/Reference/Global_Objects/Date/getDay +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getDay +--- +<div>{{JSRef}}</div> + +<p><span class="seoSummary">Il metodo <strong><code>getDay()</code></strong> restituisce il giorno della settimana per la data specificata in accordo con l'ora locale, dove 0 rappresenta Domenica.</span> Per il giorno del mese, vedere {{jsxref("Date.prototype.getDate()")}}.</p> + +<div>{{EmbedInteractiveExample("pages/js/date-getday.html")}}</div> + + + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.getDay()</code></pre> + +<h3 id="Valore_di_ritorno">Valore di ritorno</h3> + +<p>Un numero di tipo integer, tra 0 e 6, corrispondente al giorno della settimana per la data fornita, in accordo con l'ora locale: 0 for Domenica, 1 per Lunedi, 2 for Martedi e cosi' via.</p> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Utilizzando_getDay()">Utilizzando <code>getDay()</code></h3> + +<p>La seconda dichiarazione qui sotto assegna il valore 1 a <code>weekday</code>, basato sul valore dell'oggetto {{jsxref("Date")}} <code>Xmas95</code>. December 25, 1995, è un Lunedi.</p> + +<pre class="brush: js">var Xmas95 = new Date('December 25, 1995 23:15:30'); +var weekday = Xmas95.getDay(); + +console.log(weekday); // 1 +</pre> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> Se necessitato il nome completo di un giorno (<code>"Monday"</code> per esempio ) può essere ottenuto utilizzando {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} con un parametro <code>options</code> . Utilizzando questo metodo, l'internazionalizzazione risulta più semplice:</p> + +<pre class="brush: js">var options = { weekday: 'long'}; +console.log(new Intl.DateTimeFormat('en-US', options).format(Xmas95)); +// Monday +console.log(new Intl.DateTimeFormat('de-DE', options).format(Xmas95)); +// Montag +</pre> +</div> + +<h2 id="Specificazioni">Specificazioni</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.getday', 'Date.prototype.getDay')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-date.prototype.getday', 'Date.prototype.getDay')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9.5.16', 'Date.prototype.getDay')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definizione iniziale. Implementata in JavaScript 1.0.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.builtins.Date.getDay")}}</p> + +<h2 id="Vedere_anche">Vedere anche</h2> + +<ul> + <li>{{jsxref("Date.prototype.getUTCDate()")}}</li> + <li>{{jsxref("Date.prototype.getUTCDay()")}}</li> + <li>{{jsxref("Date.prototype.setDate()")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/date/getfullyear/index.html b/files/it/web/javascript/reference/global_objects/date/getfullyear/index.html new file mode 100644 index 0000000000..57d1c5efc7 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/date/getfullyear/index.html @@ -0,0 +1,84 @@ +--- +title: Date.prototype.getFullYear() +slug: Web/JavaScript/Reference/Global_Objects/Date/getFullYear +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getFullYear +--- +<div>{{JSRef}}</div> + +<p> </p> + +<p>Il metodo <strong><code>getFullYear()</code></strong> restituisce l'anno della data specificata in accordo con l'ora locale.</p> + +<p>Utilizza questo metodo invece di quello {{jsxref("Date.prototype.getYear()", "getYear()")}}.</p> + +<div>{{EmbedInteractiveExample("pages/js/date-getfullyear.html")}}</div> + + + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.getFullYear()</code></pre> + +<h3 id="Valore_di_ritorno">Valore di ritorno</h3> + +<p>Un numero corrispondente all'anno della data fornita, in accordo con l'ora locale.</p> + +<h2 id="Descrizione">Descrizione</h2> + +<p>Il valore restituito da <code>getFullYear()</code> è un numero assoluto. Per le date tra gli anni 1000 e 9999, <code>getFullYear()</code> restituisce un numero a 4 cifre, per esempio, 1995. Usa quetsa funzione per essere sicuro che un anno sia compiacente con gli anni dopo il 2000.</p> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Utilizzando_getFullYear()">Utilizzando <code>getFullYear()</code></h3> + +<p>Il seguente esempio assegna il valore a quattro cifre dell'anno corrente alla variabile <code>year</code>.</p> + +<pre class="brush: js">var today = new Date(); +var year = today.getFullYear(); +</pre> + +<h2 id="Specificazioni">Specificazioni</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definizione iniziale. Implementata in JavaScript 1.3.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9.5.10', 'Date.prototype.getFullYear')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-date.prototype.getfullyear', 'Date.prototype.getFullYear')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.getfullyear', 'Date.prototype.getFullYear')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_Browser">Compatibilità Browser</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Date.getFullYear")}}</p> + +<h2 id="Vedere_anche">Vedere anche</h2> + +<ul> + <li>{{jsxref("Date.prototype.getUTCFullYear()")}}</li> + <li>{{jsxref("Date.prototype.setFullYear()")}}</li> + <li>{{jsxref("Date.prototype.getYear()")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/date/gethours/index.html b/files/it/web/javascript/reference/global_objects/date/gethours/index.html new file mode 100644 index 0000000000..7e04a04d3f --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/date/gethours/index.html @@ -0,0 +1,79 @@ +--- +title: Date.prototype.getHours() +slug: Web/JavaScript/Reference/Global_Objects/Date/getHours +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getHours +--- +<div>{{JSRef}}</div> + +<p> </p> + +<p>Il metodo <strong><code>getHours()</code></strong> restituisce l'ora per la data specificata in accordo con l'ora locale.</p> + +<div>{{EmbedInteractiveExample("pages/js/date-gethours.html")}}</div> + + + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.getHours()</code></pre> + +<h3 id="Valore_di_ritorno">Valore di ritorno</h3> + +<p>Un numero di tipo integer, tra 0 e 23, rappresentante l'ora per la data fornita in accordo con l'ora locale.</p> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Utilizzando_getHours()">Utilizzando <code>getHours()</code></h3> + +<p>La seconda dichiarazione qui sotto assegna il valore 23 alla variabile <code>hours</code>, basata sul valore dell'oggetto {{jsxref("Global_Objects/Date", "Date")}} <code>Xmas95</code>.</p> + +<pre class="brush: js">var Xmas95 = new Date('December 25, 1995 23:15:30'); +var hours = Xmas95.getHours(); + +console.log(hours); // 23 +</pre> + +<h2 id="Specificazioni">Specificazioni</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definizione iniziale. Implementata in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9.5.18', 'Date.prototype.getHours')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-date.prototype.gethours', 'Date.prototype.getHours')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.gethours', 'Date.prototype.getHours')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Date.getHours")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Date.prototype.getUTCHours()")}}</li> + <li>{{jsxref("Date.prototype.setHours()")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/date/getmilliseconds/index.html b/files/it/web/javascript/reference/global_objects/date/getmilliseconds/index.html new file mode 100644 index 0000000000..68825e21ca --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/date/getmilliseconds/index.html @@ -0,0 +1,77 @@ +--- +title: Date.prototype.getMilliseconds() +slug: Web/JavaScript/Reference/Global_Objects/Date/getMilliseconds +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getMilliseconds +--- +<div>{{JSRef}}</div> + +<p> </p> + +<p>Il metodo <strong><code>getMilliseconds()</code></strong> restituisce i millisecondi nella data specificata in accordo con l'ora locale.</p> + +<div>{{EmbedInteractiveExample("pages/js/date-getmilliseconds.html")}}</div> + + + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.getMilliseconds()</code></pre> + +<h3 id="Valore_di_ritorno">Valore di ritorno</h3> + +<p>Un numero, tra 0 e 999, rappresentante i millisecondi per la data fornita in accordo con l'ora locale.</p> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Utilizzando_getMilliseconds()">Utilizzando <code>getMilliseconds()</code></h3> + +<p>Il seguente esempio assegna la porzione di millisecondi del tempo corrente alla variabile <code>milliseconds</code>:</p> + +<pre class="brush: js">var today = new Date(); +var milliseconds = today.getMilliseconds(); +</pre> + +<h2 id="Specificazioni">Specificazioni</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definizione iniziale. Implementata in JavaScript 1.3.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9.5.24', 'Date.prototype.getMilliseconds')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-date.prototype.getmilliseconds', 'Date.prototype.getMilliseconds')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.getmilliseconds', 'Date.prototype.getMilliseconds')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Date.getMilliseconds")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Date.prototype.getUTCMilliseconds()")}}</li> + <li>{{jsxref("Date.prototype.setMilliseconds()")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/date/getminutes/index.html b/files/it/web/javascript/reference/global_objects/date/getminutes/index.html new file mode 100644 index 0000000000..91f458cbda --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/date/getminutes/index.html @@ -0,0 +1,77 @@ +--- +title: Date.prototype.getMinutes() +slug: Web/JavaScript/Reference/Global_Objects/Date/getMinutes +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getMinutes +--- +<div>{{JSRef}}</div> + +<p> </p> + +<p>Il metodo <strong><code>getMinutes()</code></strong> restituisce i minuti nella data specificata in accordo con l'ora locale.</p> + +<div>{{EmbedInteractiveExample("pages/js/date-getminutes.html")}}</div> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.getMinutes()</code></pre> + +<h3 id="Valore_di_ritorno">Valore di ritorno</h3> + +<p>Un numero di tipo integer, tra 0 e 59, rappresentante i minuti nella data fornita in accordo con l'ora locale.</p> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Utilizzando_getMinutes()">Utilizzando <code>getMinutes()</code></h3> + +<p>La seconda dichiarazione qui soto assegna il valore 15 alla variabile <code>minutes</code>, basata sul valore dell'oggetto {{jsxref("Global_Objects/Date", "Date")}} <code>Xmas95</code>.</p> + +<pre class="brush: js">var Xmas95 = new Date('December 25, 1995 23:15:30'); +var minutes = Xmas95.getMinutes(); + +console.log(minutes); // 15 +</pre> + +<h2 id="Specificazioni">Specificazioni</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definizione iniziale. Implementata in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9.5.20', 'Date.prototype.getMinutes')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-date.prototype.getminutes', 'Date.prototype.getMinutes')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.getminutes', 'Date.prototype.getMinutes')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Date.getMinutes")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Date.prototype.getUTCMinutes()")}}</li> + <li>{{jsxref("Date.prototype.setMinutes()")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/date/getmonth/index.html b/files/it/web/javascript/reference/global_objects/date/getmonth/index.html new file mode 100644 index 0000000000..3d954b4ed5 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/date/getmonth/index.html @@ -0,0 +1,90 @@ +--- +title: Date.prototype.getMonth() +slug: Web/JavaScript/Reference/Global_Objects/Date/getMonth +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getMonth +--- +<div>{{JSRef}}</div> + +<p> </p> + +<p>Il metodo <strong><code>getMonth()</code></strong> restituisce il mese nella data specificata in accordo con l'ora locale, come un valore in base zero (dove zero indica il primo mese dell'anno).</p> + +<div>{{EmbedInteractiveExample("pages/js/date-getmonth.html")}}</div> + + + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.getMonth()</code></pre> + +<h3 id="Valore_di_ritorno">Valore di ritorno</h3> + +<p>Un numero di tipo integer, tra 0 e 11, rappresentante il mese nella data fornita in accordo con l'ora locale. 0 corrisponde a Gennaio, 1 a Febbraio , e cosi' via.</p> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Utilizzando_getMonth()">Utilizzando <code>getMonth()</code></h3> + +<p>La seconda dichiarazione qui sotto assegna il valore 11 alla variabile <code>month</code>, basata sul valore dell'oggetto {{jsxref("Date")}} <code>Xmas95</code>.</p> + +<pre class="brush: js">var Xmas95 = new Date('December 25, 1995 23:15:30'); +var month = Xmas95.getMonth(); + +console.log(month); // 11 +</pre> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> Se necessitato , il nome completo di un mese (<code>"January"</code> per esempio ) può essere ottenuto utilizzando <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat#Using_options">Intl.DateTimeFormat()</a></code> con un prametro <code>options</code> . Utilizzando questo metodo, l'internazionalizzazione risulta più semplice:</p> + +<pre class="brush: js">var options = { month: 'long'}; +console.log(new Intl.DateTimeFormat('en-US', options).format(Xmas95)); +// December +console.log(new Intl.DateTimeFormat('de-DE', options).format(Xmas95)); +// Dezember +</pre> +</div> + +<h2 id="Specificazioni">Specificazioni</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definizione iniziale. Implementata in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9.5.12', 'Date.prototype.getMonth')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-date.prototype.getmonth', 'Date.prototype.getMonth')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.getmonth', 'Date.prototype.getMonth')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Date.getMonth")}}</p> + +<h2 id="See_also" name="See_also">See also</h2> + +<ul> + <li>{{jsxref("Date.prototype.getUTCMonth()")}}</li> + <li>{{jsxref("Date.prototype.setMonth()")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/date/getseconds/index.html b/files/it/web/javascript/reference/global_objects/date/getseconds/index.html new file mode 100644 index 0000000000..3faac2c56e --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/date/getseconds/index.html @@ -0,0 +1,79 @@ +--- +title: Date.prototype.getSeconds() +slug: Web/JavaScript/Reference/Global_Objects/Date/getSeconds +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getSeconds +--- +<div>{{JSRef}}</div> + +<p> </p> + +<p>Il metodo <strong><code>getSeconds()</code></strong> restituisce i secondi nella data specificata in accordo con l'ora locale.</p> + +<div>{{EmbedInteractiveExample("pages/js/date-getseconds.html")}}</div> + + + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.getSeconds()</code></pre> + +<h3 id="Valore_di_ritorno">Valore di ritorno</h3> + +<p>Un numero di tipo integer, tra 0 e 59, rappresentante i secondi nella data fonita in accordo con l'ora locale.</p> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Utilizzando_getSeconds()">Utilizzando <code>getSeconds()</code></h3> + +<p>La seconda dichiarazione qui sotto assegna il valore 30 alla variabile <code>seconds</code>, basata sul valore dell'oggetto {{jsxref("Global_Objects/Date", "Date")}} <code>Xmas95</code>.</p> + +<pre class="brush: js">var Xmas95 = new Date('December 25, 1995 23:15:30'); +var seconds = Xmas95.getSeconds(); + +console.log(seconds); // 30 +</pre> + +<h2 id="Specificazioni">Specificazioni</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definizione iniziale. Implementata in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9.5.22', 'Date.prototype.getSeconds')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-date.prototype.getseconds', 'Date.prototype.getSeconds')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.getseconds', 'Date.prototype.getSeconds')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Date.getSeconds")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Date.prototype.getUTCSeconds()")}}</li> + <li>{{jsxref("Date.prototype.setSeconds()")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/date/gettime/index.html b/files/it/web/javascript/reference/global_objects/date/gettime/index.html new file mode 100644 index 0000000000..0424faa8a4 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/date/gettime/index.html @@ -0,0 +1,125 @@ +--- +title: Date.prototype.getTime() +slug: Web/JavaScript/Reference/Global_Objects/Date/getTime +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getTime +--- +<div> {{JSRef}}</div> + +<div> </div> + +<div>Il metodo <strong>getTime() </strong>restituisce il numero di millisecondi a partire dalla <a href="https://en.wikipedia.org/wiki/Unix_time">Unix Epoch</a>.</div> + +<p> </p> + +<p>* JavaScript utilizza i <em>millisecondi come unità di misura</em>, mentre lo Unix Time è in <em>secondi.</em></p> + +<p><em>getTime() utilizza sempre lo UTC per la rappresentazione del tempo. Ad esempio, un client browser in un fuso orario, getTime() sarà lo stesso come un client browser in qualsiasi altro fuso orario.</em></p> + +<p>Puoi utilizzare questo metodo per aiutare ad assegnare una data ed un orario ad un altro oggetto {{jsxref("Date")}} . Questo metodo è funzionalmente equivalente al metodo {{jsxref("Date.valueof", "valueOf()")}}.</p> + +<div>{{EmbedInteractiveExample("pages/js/date-gettime.html")}}</div> + +<p class="hidden">La sorgente di questo esempio interattivo è contenuta in una repository di GitHub. Se volessi contribuire al progetto di esempio interattivo, per favore clona <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> ed inviaci una pull request.</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.getTime()</code></pre> + +<h3 id="Valore_di_Ritorno">Valore di Ritorno</h3> + +<p>Un numero rappresentante i millisecondi trascorsi tra il 1 Gennaio 1970 00:00:00 UTC e la data utilizzata.</p> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Utilizzare_getTime()_per_copiare_le_date">Utilizzare <code>getTime()</code> per copiare le date</h3> + +<p>Costruire un oggetto data con lo stesso valore di tempo.</p> + +<pre class="brush: js">// Poichè il mese è in base zero, birthday sarà January 10, 1995 +var birthday = new Date(1994, 12, 10); +var copy = new Date(); +copy.setTime(birthday.getTime()); +</pre> + +<h3 id="Misurare_il_tempo_di_esecuzione">Misurare il tempo di esecuzione</h3> + +<p>Sottrarre due susseguenti chiamate <code>getTime()</code> su nuovi oggetti {{jsxref("Date")}} generati, dà il lasso di tempo tra queste due chiamate. Ciò può essere usato per calcolare il tempo di esecuzione di alcune operazioni. Vedere anche {{jsxref("Date.now()")}} per prevenire la non necessaria instanziazione di oggetti {{jsxref("Date")}}.</p> + +<pre class="brush: js">var end, start; + +start = new Date(); +for (var i = 0; i < 1000; i++) { + Math.sqrt(i); +} +end = new Date(); + +console.log('Operation took ' + (end.getTime() - start.getTime()) + ' msec'); +</pre> + +<h2 id="Precisione_di_tempo_ridotta">Precisione di tempo ridotta</h2> + +<p>Per offrire protezione contro attacchi di tipo timing e fingerprinting, la precisione di <code>new Date().getTime()</code> potrebbe essere arrotondata a seconda dei settings del browser. In Firefox, la preferenza <code>privacy.reduceTimerPrecision</code> è abilitata di default e predefinita a 20µs in Firefox 59; in 60 sarà 2ms.</p> + +<pre class="brush: js">// precisione di tempo ridotta (2ms) in Firefox 60 +new Date().getTime(); +// 1519211809934 +// 1519211810362 +// 1519211811670 +// ... + + +// precisione di tempo ridotta con `privacy.resistFingerprinting` abilitata +new Date().getTime(); +// 1519129853500 +// 1519129858900 +// 1519129864400 +// ... +</pre> + +<p>In Firefox, puoi anche abilitare <code>privacy.resistFingerprinting</code>, la precisione sarà 100ms oppure il valore di <code>privacy.resistFingerprinting.reduceTimerPrecision.microseconds</code>, qualunque sia superiore.</p> + +<h2 id="Specificazioni">Specificazioni</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specificazione</th> + <th scope="col">Status</th> + <th scope="col">Commento</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definizione iniziale. Implementata in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9.5.9', 'Date.prototype.getTime')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-date.prototype.gettime', 'Date.prototype.getTime')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.gettime', 'Date.prototype.getTime')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_Browser"> Compatibilità Browser</h2> + +<p class="hidden">La tavola di compatibilità in questa pagina è generata da dati strutturati. Se volessi contrinbuire ai dari, per favore controlla <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> ed inviaci una pull request.</p> + +<p>{{Compat("javascript.builtins.Date.getTime")}}</p> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>{{jsxref("Date.prototype.setTime()")}}</li> + <li>{{jsxref("Date.prototype.valueOf()")}}</li> + <li>{{jsxref("Date.now()")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/date/gettimezoneoffset/index.html b/files/it/web/javascript/reference/global_objects/date/gettimezoneoffset/index.html new file mode 100644 index 0000000000..0f583c099f --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/date/gettimezoneoffset/index.html @@ -0,0 +1,99 @@ +--- +title: Date.prototype.getTimezoneOffset() +slug: Web/JavaScript/Reference/Global_Objects/Date/getTimezoneOffset +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getTimezoneOffset +--- +<div>{{JSRef}}</div> + +<p> </p> + +<p>Il metodo <strong><code>getTimezoneOffset()</code></strong> restituisce la differenza di fuso orario, in minuti, da corrente locale (host system settings) a UTC.</p> + +<div>{{EmbedInteractiveExample("pages/js/date-gettimezoneoffset.html")}}</div> + + + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><var>dateObj</var>.getTimezoneOffset()</pre> + +<h3 id="Valore_di_ritorno">Valore di ritorno</h3> + +<p>Un numero rappresentante l'offset del fuso orario, in minuti, dalla data basata sul current host system settings a UTC.</p> + +<h2 id="Descrizione">Descrizione</h2> + +<p>Il time-zone offset è la differenza, in minuti, dall'ora locale a UTC. Nota che questo significa che l'offset è positivo se l'ora locale è indietro allo UTC e negativo se è avanti. Per esempio, per il fuso orario UTC+10:00 (Australian Eastern Standard Time, Vladivostok Time, Chamorro Standard Time), sarà restituito -600.</p> + +<table class="standard-table"> + <tbody> + <tr> + <td>Current Locale</td> + <td>UTC-8</td> + <td>UTC</td> + <td>UTC+3</td> + </tr> + <tr> + <td>Return Value</td> + <td>480</td> + <td>0</td> + <td>-180</td> + </tr> + </tbody> +</table> + +<p>L'offset di fuso orario restituito è quello che si applica per la Data su cui è chiamato. Dove l'host system è configurato per l'ora legale, l'offset cambierà in base alla data e al tempo che la Data rappresenta e a cui si applica l'ora legale.</p> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Utilizzando_getTimezoneOffset()">Utilizzando <code>getTimezoneOffset()</code></h3> + +<pre class="brush: js">// Get current timezone offset for host device +var x = new Date(); +var currentTimeZoneOffsetInHours = x.getTimezoneOffset() / 60; +// 1 + +// Get timezone offset for International Labour Day (May 1) in 2016 +// Be careful, the Date() constructor uses 0-indexed month so May is +// represented with 4 (and not 5) +var labourDay = new Date(2016, 4, 1) +var labourDayOffset = labourDay.getTimezoneOffset() / 60; +</pre> + +<h2 id="Specificazioni">Specificazioni</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definizione iniziale. Implementata in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9.5.26', 'Date.prototype.getTimezoneOffset')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-date.prototype.gettimezoneoffset', 'Date.prototype.getTimezoneOffset')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.gettimezoneoffset', 'Date.prototype.getTimezoneOffset')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Date.getTimezoneOffset")}}</p> diff --git a/files/it/web/javascript/reference/global_objects/date/index.html b/files/it/web/javascript/reference/global_objects/date/index.html new file mode 100644 index 0000000000..1fc4c3d9d8 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/date/index.html @@ -0,0 +1,249 @@ +--- +title: Date +slug: Web/JavaScript/Reference/Global_Objects/Date +tags: + - Date + - Epoch + - JavaScript + - NeedsTranslation + - Time + - TopicStub + - Unix Epoch + - timeStamp +translation_of: Web/JavaScript/Reference/Global_Objects/Date +--- +<div>{{JSRef}}</div> + +<p><span class="seoSummary">Creates a JavaScript <strong><code>Date</code></strong> instance that represents a single moment in time in a platform-independent format.</span> <code>Date</code> objects use a <a href="http://pubs.opengroup.org/onlinepubs/9699919799/basedefs/V1_chap04.html#tag_04_16">Unix Time Stamp</a>, an integer value that is the number of milliseconds since 1 January 1970 UTC.</p> + +<div>{{EmbedInteractiveExample("pages/js/date-constructor.html")}}</div> + + + +<h2 id="Instantiating_Date_objects">Instantiating Date objects</h2> + +<p>The only way to create a new JavaScript <code>Date</code> object is to use the {{jsxref("new")}} operator:</p> + +<pre class="brush: js">let now = new Date();</pre> + +<p>If you simply call the {{jsxref("Date", "Date()")}} object directly, the returned value is a string instead of a <code>Date</code> object. There's no <code>Date</code> literal syntax in JavaScript.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">new Date(); +new Date(<var>value</var>); +new Date(<var>dateString</var>); +new Date(<var>year</var>, <var>monthIndex</var> [, <var>day</var> [, <var>hours</var> [, <var>minutes</var> [, <var>seconds</var> [, <var>milliseconds</var>]]]]]); +</pre> + +<h3 id="Parameters">Parameters</h3> + +<p>There are four basic forms for the <code>Date()</code> constructor:</p> + +<h4 id="No_parameters">No parameters</h4> + +<p>When no parameters are provided, the newly-created <code>Date</code> object represents the current date and time, specified in the local time zone, as of the time of instantiation.</p> + +<h4 id="Unix_timestamp">Unix timestamp</h4> + +<dl> + <dt><code>value</code></dt> + <dd>A <a href="http://pubs.opengroup.org/onlinepubs/9699919799/basedefs/V1_chap04.html#tag_04_16">Unix Time Stamp</a> which is an integer value representing the number of milliseconds since January 1, 1970, 00:00:00 UTC (the Unix epoch), with leap seconds ignored. Keep in mind that most Unix timestamp functions are only accurate to the nearest second.</dd> +</dl> + +<h4 id="Timestamp_string">Timestamp string</h4> + +<dl> + <dt><code>dateString</code></dt> + <dd>A string value representing a date, specified in a format recognized by the {{jsxref("Date.parse()")}} method (these formats are <a href="http://tools.ietf.org/html/rfc2822#page-14">IETF-compliant RFC 2822 timestamps</a> and also strings in a <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-15.9.1.15">version of ISO8601</a>). + <div class="note"> + <p><strong>Note:</strong> parsing of date strings with the <code>Date</code> constructor (and <code>Date.parse</code>, they are equivalent) is strongly discouraged due to browser differences and inconsistencies. Support for RFC 2822 format strings is by convention only. Support for ISO 8601 formats differs in that date-only strings (e.g. "1970-01-01") are treated as UTC, not local.</p> + </div> + </dd> +</dl> + +<h4 id="Individual_date_and_time_component_values">Individual date and time component values</h4> + +<p>Given at least a year and month, this form of <code>Date()</code> returns a <code>Date</code> object whose component values (year, month, day, hour, minute, second, and millisecond) all come from the following parameters. Any missing fields are given the lowest possible value (1 for the <code>day</code> and 0 for every other component).</p> + +<dl> + <dt><code>year</code></dt> + <dd>Integer value representing the year. Values from 0 to 99 map to the years 1900 to 1999; all other values are the actual year. See the {{anch("Two_digit_years_map_to_1900_-_1999", "example below")}}.</dd> + <dt><code>monthIndex</code></dt> + <dd>Integer value representing the month, beginning with 0 for January to 11 for December.</dd> + <dt><code>day</code> {{optional_inline}}</dt> + <dd>Integer value representing the day of the month. If not specified, the default value of 1 is used.</dd> + <dt><code>hours</code> {{optional_inline}}</dt> + <dd>Integer value representing the hour of the day. The default is 0 (midnight).</dd> + <dt><code>minutes</code> {{optional_inline}}</dt> + <dd>Integer value representing the minute segment of a time. The default is 0 minutes past the hour.</dd> + <dt><code>seconds</code> {{optional_inline}}</dt> + <dd>Integer value representing the second segment of a time. The default is zero seconds past the minute.</dd> + <dt><code>milliseconds</code> {{optional_inline}}</dt> + <dd>Integer value representing the millisecond segment of a time. The default is 0 milliseconds past the second.</dd> +</dl> + +<h2 id="User_notes">User notes</h2> + +<h3 id="The_Unix_epoch_and_timestamps">The Unix epoch and timestamps</h3> + +<p>A JavaScript date is fundamentally specified as the number of milliseconds that have elapsed since midnight on January 1, 1970, UTC. This date and time is called the <strong>Unix epoch</strong>, which is the predominant base value for computer-recorded date and time values.</p> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> It's important to keep in mind that the date and time is stored in the local time zone, and that the basic methods to fetch the date and time or its components all work in the local time zone as well.</p> +</div> + +<p>A day is made up of 86,400,000 milliseconds. Given that and the size of the underlying number used to record the timestamp, and it can be calculated that the <code>Date</code> object can represent dates within ±100,000,000 (one hundred million) days relative to January 1, 1970 UTC. That means that in the year <span class="qv3Wpe" id="cwos">293,742</span>, we'll have to think about fixing this.</p> + +<h3 id="Date_format_and_time_zone_conversions">Date format and time zone conversions</h3> + +<p>There are a number of methods available to obtain the date in various formats, as well as to do time zone conversions. Especially useful are the functions that output the date and time in Coordinated Universal Time (UTC), the global standard time defined by the World Time Standard. This time is historically known as Greenwich Mean Time, as UTC lies along the meridian that includes London and nearby Greenwhich in the United Kingdom. The user's device provides the local time.</p> + +<p>In addition to methods to read and alter individual components of the local date and time, such as {{jsxref("Date.getDay", "getDay()")}} and {{jsxref("Date.setHours", "setHours()")}}, there are also versions of the same methods that read and maniuplate the date and time using UTC, such as {{jsxref("Date.getUTCDay()", "getUTCDay()")}} and {{jsxref("Date.setHoursUTC", "setUTCHours()")}}.</p> + +<h2 id="Properties">Properties</h2> + +<dl> + <dt>{{jsxref("Date.prototype")}}</dt> + <dd>Allows the addition of properties to a JavaScript <code>Date</code> object.</dd> + <dt><code>Date.length</code></dt> + <dd>The value of <code>Date.length</code> is 7. This is the number of arguments handled by the constructor. It's not generally a useful result.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<dl> + <dt>{{jsxref("Date.now()")}}</dt> + <dd>Returns the numeric value corresponding to the current time - the number of milliseconds elapsed since January 1, 1970 00:00:00 UTC, with leap seconds ignored.</dd> + <dt>{{jsxref("Date.parse()")}}</dt> + <dd>Parses a string representation of a date and returns the number of milliseconds since 1 January, 1970, 00:00:00, UTC, with leap seconds ignored. + <div class="note"> + <p><strong>Note:</strong> Parsing of strings with <code>Date.parse</code> is strongly discouraged due to browser differences and inconsistencies.</p> + </div> + </dd> + <dt>{{jsxref("Date.UTC()")}}</dt> + <dd>Accepts the same parameters as the longest form of the constructor (i.e. 2 to 7) and returns the number of milliseconds since January 1, 1970, 00:00:00 UTC, with leap seconds ignored.</dd> +</dl> + +<h2 id="JavaScript_Date_instances">JavaScript <code>Date</code> instances</h2> + +<p>All <code>Date</code> instances inherit from {{jsxref("Date.prototype")}}. The prototype object of the <code>Date</code> constructor can be modified to affect all <code>Date</code> instances.</p> + +<h3 id="Date.prototype_Methods">Date.prototype Methods</h3> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/prototype', 'Methods')}}</div> + +<h2 id="Examples">Examples</h2> + +<h3 id="Several_ways_to_create_a_Date_object">Several ways to create a <code>Date</code> object</h3> + +<p>The following examples show several ways to create JavaScript dates:</p> + +<div class="note"> +<p><strong>Note:</strong> parsing of date strings with the <code>Date</code> constructor (and <code>Date.parse</code>, they are equivalent) is strongly discouraged due to browser differences and inconsistencies.</p> +</div> + +<pre class="brush: js">var today = new Date(); +var birthday = new Date('December 17, 1995 03:24:00'); +var birthday = new Date('1995-12-17T03:24:00'); +var birthday = new Date(1995, 11, 17); +var birthday = new Date(1995, 11, 17, 3, 24, 0); +</pre> + +<h3 id="Two_digit_years_map_to_1900_-_1999">Two digit years map to 1900 - 1999</h3> + +<p>In order to create and get dates between the years 0 and 99 the {{jsxref("Date.prototype.setFullYear()")}} and {{jsxref("Date.prototype.getFullYear()")}} methods should be used.</p> + +<pre class="brush: js">var date = new Date(98, 1); // Sun Feb 01 1998 00:00:00 GMT+0000 (GMT) + +// Deprecated method, 98 maps to 1998 here as well +date.setYear(98); // Sun Feb 01 1998 00:00:00 GMT+0000 (GMT) + +date.setFullYear(98); // Sat Feb 01 0098 00:00:00 GMT+0000 (BST) +</pre> + +<h3 id="Calculating_elapsed_time">Calculating elapsed time</h3> + +<p>The following examples show how to determine the elapsed time between two JavaScript dates in milliseconds.</p> + +<p>Due to the differing lengths of days (due to daylight saving changeover), months and years, expressing elapsed time in units greater than hours, minutes and seconds requires addressing a number of issues and should be thoroughly researched before being attempted.</p> + +<pre class="brush: js">// using Date objects +var start = Date.now(); + +// the event to time goes here: +doSomethingForALongTime(); +var end = Date.now(); +var elapsed = end - start; // elapsed time in milliseconds +</pre> + +<pre class="brush: js">// using built-in methods +var start = new Date(); + +// the event to time goes here: +doSomethingForALongTime(); +var end = new Date(); +var elapsed = end.getTime() - start.getTime(); // elapsed time in milliseconds +</pre> + +<pre class="brush: js">// to test a function and get back its return +function printElapsedTime(fTest) { + var nStartTime = Date.now(), + vReturn = fTest(), + nEndTime = Date.now(); + + console.log('Elapsed time: ' + String(nEndTime - nStartTime) + ' milliseconds'); + return vReturn; +} + +var yourFunctionReturn = printElapsedTime(yourFunction); +</pre> + +<div class="note"> +<p><strong>Note:</strong> In browsers that support the {{domxref("window.performance", "Web Performance API", "", 1)}}'s high-resolution time feature, {{domxref("Performance.now()")}} can provide more reliable and precise measurements of elapsed time than {{jsxref("Date.now()")}}.</p> +</div> + +<h3 id="Get_the_number_of_seconds_since_Unix_Epoch">Get the number of seconds since Unix Epoch</h3> + +<pre class="brush: js">var seconds = Math.floor(Date.now() / 1000); +</pre> + +<p>In this case it's important to return only an integer (so a simple division won't do), and also to only return actually elapsed seconds (that's why this code uses {{jsxref("Math.floor()")}} and not {{jsxref("Math.round()")}}).</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date-objects', 'Date')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-date-objects', 'Date')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9', 'Date')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.1.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Date", 3)}}</p> diff --git a/files/it/web/javascript/reference/global_objects/date/now/index.html b/files/it/web/javascript/reference/global_objects/date/now/index.html new file mode 100644 index 0000000000..dcf3650fd0 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/date/now/index.html @@ -0,0 +1,96 @@ +--- +title: Date.now() +slug: Web/JavaScript/Reference/Global_Objects/Date/now +translation_of: Web/JavaScript/Reference/Global_Objects/Date/now +--- +<div>{{JSRef}}</div> + +<p>Il metodo <strong><code>Date.now()</code></strong> restituisce il numero di millisecondi trascori dal Gennaio 1, 1970 00:00:00 UTC.</p> + +<div>{{EmbedInteractiveExample("pages/js/date-now.html")}}</div> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><code>var timeInMs = Date.now();</code></pre> + +<h3 id="Valore_di_ritorno">Valore di ritorno</h3> + +<p>Un {{jsxref("Number")}} rappresentante i millisecondi trascorsi fin dall'epoca UNIX.</p> + +<h2 id="Descrizione">Descrizione</h2> + +<p>Poichè <code>now()</code> è un metodo statico di {{jsxref("Date")}}, lo utilizzerai sempre come <code>Date.now()</code>.</p> + +<h2 id="Pecisione_di_tempo_ridotta">Pecisione di tempo ridotta</h2> + +<p>Per offrire protezione contro attacchi di tipo timing e fingerprinting, la precisione di <code>Date.now()</code> potrebbe essere arrotondata a seconda dei settings del browser.<br> + In Firefox, la preferenza di <code>privacy.reduceTimerPrecision</code> è abilitata di default e predefinita a 20ms in Firefox 59; in 60 sarà 2ms.</p> + +<pre class="brush: js">// precisione di tempo ridotta (2ms) in Firefox 60 +Date.now() +// 1519211809934 +// 1519211810362 +// 1519211811670 +// ... + + +// precisione di tempo ridotta con `privacy.resistFingerprinting` abilitata +Date.now(); +// 1519129853500 +// 1519129858900 +// 1519129864400 +// ... +</pre> + +<p>In Firefox, puoi anche abiliytare <code>privacy.resistFingerprinting</code>, la precisione sarà 100ms oppure il valore di <code>privacy.resistFingerprinting.reduceTimerPrecision.microseconds</code>, qualunque sia più grande.</p> + +<h2 id="Polyfill">Polyfill</h2> + +<p>Tale metodo è stato standardizzato in ECMA-262 5<sup>th</sup> edition. Motori che non sono stati aggiornati al supporto di questo metodo possono ovviare alla sua assenza utilizzando il seguente shim:</p> + +<pre class="brush: js">if (!Date.now) { + Date.now = function now() { + return new Date().getTime(); + }; +} +</pre> + +<h2 id="Specificazioni">Specificazioni</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9.4.4', 'Date.now')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Definizione iniziale. Implementata in JavaScript 1.5.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-date.now', 'Date.now')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.now', 'Date.now')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_browser">Compatibilità browser</h2> + +<p class="hidden">La tavola di compatibilità in questa pagina è generata da dati strutturati. Se volessi contribuire ai dati, per favore controlla <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> ed inviaci una pull request.</p> + +<p>{{Compat("javascript.builtins.Date.now")}}</p> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>{{domxref("Performance.now()")}} — fornisce timestamps con risoluzione sub-millisecond per l'uso della misurazione della performance di pagine web.</li> + <li>{{domxref("console.time()")}} / {{domxref("console.timeEnd()")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/date/utc/index.html b/files/it/web/javascript/reference/global_objects/date/utc/index.html new file mode 100644 index 0000000000..cfbf1abb10 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/date/utc/index.html @@ -0,0 +1,135 @@ +--- +title: Date.UTC() +slug: Web/JavaScript/Reference/Global_Objects/Date/UTC +translation_of: Web/JavaScript/Reference/Global_Objects/Date/UTC +--- +<div>{{JSRef}}</div> + +<p><code style=""><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Il metodo </span></font><strong>Date.UTC()</strong></code> accetta gli stessi parametri del costruttore {{jsxref("Date")}}, ma li tratta come UTC. Restituisce il numero di millisecondi fin dal Gennaio 1, 1970, 00:00:00 UTC.</p> + +<div>{{EmbedInteractiveExample("pages/js/date-utc.html")}}</div> + + + +<h2 id="Sintassi">Sintassi</h2> + +<p><strong>ECMAScript 2017 e successivi:</strong></p> + +<pre class="syntaxbox">Date.UTC(<var>year[</var>, <var>month</var>[, <var>day</var>[, <var>hour</var>[, <var>minute</var>[, <var>second</var>[, <var>millisecond</var>]]]]]])</pre> + +<p><strong>ECMAScript 2016 e anteriori:</strong> <em>(utilizzo di <code>month</code> richiesto)</em></p> + +<pre class="syntaxbox">Date.UTC(<var>year</var>, <var>month</var>[, <var>day</var>[, <var>hour</var>[, <var>minute</var>[, <var>second</var>[, <var>millisecond</var>]]]]])</pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt><code>year</code></dt> + <dd>Un anno intero.</dd> + <dt><code>month</code></dt> + <dd>Un integer tra 0 (Gennaio) e 11 (Dicembre) rappresentante il mese. <em>(Fino a ECMAScript 2016, <code>month</code> era un parametro richiesto. Con ES2017, non lo è più.)</em></dd> + <dt><code>day</code> {{optional_inline}}</dt> + <dd>Opzionalel. Un integer tra 1 e 31 rappresentante il giorno del mese. Se omesso, è predefinito a 1.</dd> + <dt><code>hour</code> {{optional_inline}}</dt> + <dd>Un integer tra 0 e 23 rappresentante le ore. Se omesso è predefinito a 0.</dd> + <dt><code>minute</code> {{optional_inline}}</dt> + <dd>Un integer tra 0 e 59 rappresentante i minuti. Se omesso, è predefinito a 0.</dd> + <dt><code>second</code> {{optional_inline}}</dt> + <dd>Un integer tra 0 e 59 rappresentante i secondi. Se omesso, è predefinito a 0.</dd> + <dt><code>millisecond</code> {{optional_inline}}</dt> + <dd>Un integer tra 0 e 999 rappresentante i millisecondi. Se omesso, è predefinito a 0.</dd> +</dl> + +<h3 id="Valore_di_ritorno">Valore di ritorno</h3> + +<p>Un numero rappresentante i umeri di millisecondi per la data fornita sin dal Gennaio 1, 1970, 00:00:00, UTC.</p> + +<h2 id="Descrizione">Descrizione</h2> + +<p><code>UTC()</code> prende date delimitate da virgola e parametri tempo e restituisce il numero di millisecondi tra Gennaio 1, 1970, 00:00:00, tempo universale ed il tempo e la data specificata.</p> + +<p>Gli anni tra 0 e 99 sono convertiti ad un anno nel 20mo secolo<code>(1900 + year)</code>; per esempio, 95 è convertito all'anno 1995.</p> + +<p>Il metodo <code>UTC()</code> differisce dal costruttore {{jsxref("Date")}} in due modi.</p> + +<ul> + <li><code>Date.UTC()</code> utilizza il tempo universale invece di quello locale.</li> + <li><code>Date.UTC()</code> restituisce un valore di tempo come numero invece di creare un oggetto {{jsxref("Date")}}.</li> +</ul> + +<p>Se un parametro è fuori dal range previsto, il metodo <code>UTC()</code> aggiorna gli altri parametri per adattare il valore. Per esempio, se 15 è usato per il mese, l'anno sarà incrementato di 1 <code>(year + 1)</code> e 3 sarà usato per il mese.</p> + +<p><code>UTC()</code> è un metodo statico di {{jsxref("Date")}}, per questo è chiamato come <code>Date.UTC()</code> invece che come un metodo di istanza {{jsxref("Date")}}.</p> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Utilizzando_Date.UTC()">Utilizzando <code>Date.UTC()</code></h3> + +<p>La seguente dichiarazione crea un oggetto {{jsxref("Date")}} con gli argomenti trattati come UTC invece di local:</p> + +<pre class="brush:js">var utcDate = new Date(Date.UTC(2018, 11, 1, 0, 0, 0)); +</pre> + +<h2 id="Specificazioni">Specificazioni</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.utc', 'Date.UTC')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-date.utc', 'Date.UTC')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9.4.3', 'Date.UTC')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td> Definizione iniziale. Implementata in JavaScript 1.0.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.builtins.Date.UTC")}}</p> + +<h2 id="Note_di_compatibilità">Note di compatibilità</h2> + +<h3 id="Date.UTC_con_meno_di_due_argomenti"><code>Date.UTC</code> con meno di due argomenti</h3> + +<p>Quando si provvedono meno di due argomenti a <code>Date.UTC</code>, ECMAScript 2017 richiede che {{jsxref("NaN")}} sia restituito. Motori che non supportavano tale comportamento sono stati aggiornati (vedere {{bug(1050755)}}, <a href="https://github.com/tc39/ecma262/pull/642">ecma-262 #642</a>).</p> + +<pre class="brush: js">Date.UTC(); +Date.UTC(1); + +// Safari: NaN +// Chrome/Opera/V8: NaN + +// Firefox <54: non-NaN +// Firefox 54+: NaN + +// IE: non-NaN +// Edge: NaN +</pre> + +<h2 id="Vedere_anche">Vedere anche</h2> + +<ul> + <li>{{jsxref("Date.parse()")}}</li> + <li>{{jsxref("Date")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/decodeuri/index.html b/files/it/web/javascript/reference/global_objects/decodeuri/index.html new file mode 100644 index 0000000000..40a65b0c57 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/decodeuri/index.html @@ -0,0 +1,120 @@ +--- +title: decodeURI() +slug: Web/JavaScript/Reference/Global_Objects/decodeURI +translation_of: Web/JavaScript/Reference/Global_Objects/decodeURI +--- +<div>{{jsSidebar("Objects")}}</div> + +<h2 id="Summary" name="Summary">Sommario</h2> + +<p>La funzione <strong><code>decodeURI()</code></strong> decodifica un {{Glossary("URI")}} creato da {{jsxref("Global_Objects/encodeURI", "encodeURI()")}} o una funzione simile.</p> + +<h2 id="Syntax" name="Syntax">Sintassi</h2> + +<pre class="syntaxbox"><code>decodeURI(<i>encodedURI</i>)</code></pre> + +<h3 id="Parameters" name="Parameters">Parametri</h3> + +<dl> + <dt><code>encodedURI</code></dt> + <dd>Un {{Glossary("URI")}} completo.</dd> +</dl> + +<h2 id="Description" name="Description">Descrizione</h2> + +<p>Sostituisce ogni sequenza di escape nell'{{Glossary("URI")}} codificato con il carattere che la rappresenta, ma non decodifica sequenze di escape che non potrebbero essere state create dalla {{jsxref("Global_Objects/encodeURI", "encodeURI()")}}, come il carattere <code><strong>#</strong></code>.</p> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Decodificare_un_URL_in_Cirillico">Decodificare un URL in Cirillico</h3> + +<pre class="brush: js">decodeURI("https://developer.mozilla.org/ru/docs/JavaScript_%D1%88%D0%B5%D0%BB%D0%BB%D1%8B"); +// "https://developer.mozilla.org/ru/docs/JavaScript_шеллы" +</pre> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + <tr> + <td>ECMAScript 3rd Edition.</td> + <td>Standard</td> + <td>Definizione iniziale.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.1.3.1', 'decodeURI')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-decodeuri-encodeduri', 'decodeURI')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funzionalità</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Supporto di base</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th><span style="font-family: 'Open Sans Light', sans-serif; font-size: 16px; line-height: 16px;">Funzionalità</span></th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td><span style="font-size: 12px; line-height: 18px;">Supporto di base</span></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>{{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent()")}}</li> + <li>{{jsxref("Global_Objects/encodeURI", "encodeURI()")}}</li> + <li>{{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent()")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/decodeuricomponent/index.html b/files/it/web/javascript/reference/global_objects/decodeuricomponent/index.html new file mode 100644 index 0000000000..243bd14a93 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/decodeuricomponent/index.html @@ -0,0 +1,124 @@ +--- +title: decodeURIComponent() +slug: Web/JavaScript/Reference/Global_Objects/decodeURIComponent +translation_of: Web/JavaScript/Reference/Global_Objects/decodeURIComponent +--- +<div> +<div> +<div>{{jsSidebar("Objects")}}</div> +</div> +</div> + +<h2 id="Summary" name="Summary">Sommario</h2> + +<p>La funzione <strong><code>decodeURIComponent()</code></strong> decodifica una parte di {{Glossary("URI")}} creata da {{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent()")}} o una funzione simile.</p> + +<h2 id="Syntax" name="Syntax">Sintassi</h2> + +<pre class="syntaxbox"><code>decodeURIComponent(<em>encodedURIComponent</em>)</code></pre> + +<h3 id="Parameters" name="Parameters">Parametri</h3> + +<dl> + <dt><code>encodedURIComponent</code></dt> + <dd>Una parte codificata di un {{Glossary("URI")}}</dd> +</dl> + +<h2 id="Description" name="Description">Descrizione</h2> + +<p>Sostituisce ogni sequenza di escape nella parte di {{Glossary("URI")}} codificata con il carattere che la rappresenta.</p> + +<h2 id="Esempio">Esempio</h2> + +<h3 id="Decodificare_una_parte_di_URL_in_Cirillico">Decodificare una parte di URL in Cirillico</h3> + +<pre class="brush: js">decodeURIComponent("JavaScript_%D1%88%D0%B5%D0%BB%D0%BB%D1%8B"); +// "JavaScript_шеллы" +</pre> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commenti</th> + </tr> + <tr> + <td>ECMAScript 3rd Edition.</td> + <td>Standard</td> + <td>Definizione iniziale.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.1.3.2', 'decodeURIComponent')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-decodeuricomponent-encodeduricomponent', 'decodeURIComponent')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funzionalità</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Supporto di base</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th><span style="font-family: 'Open Sans Light', sans-serif; font-size: 16px; line-height: 16px;">Funzionalità</span></th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td><span style="font-size: 12px; line-height: 18px;">Supporto di base</span></td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_Also" name="See_Also">Vedi anche</h2> + +<ul> + <li>{{jsxref("Global_Objects/decodeURI", "decodeURI()")}}</li> + <li>{{jsxref("Global_Objects/encodeURI", "encodeURI()")}}</li> + <li>{{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent()")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/encodeuri/index.html b/files/it/web/javascript/reference/global_objects/encodeuri/index.html new file mode 100644 index 0000000000..24118aec60 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/encodeuri/index.html @@ -0,0 +1,160 @@ +--- +title: encodeURI() +slug: Web/JavaScript/Reference/Global_Objects/encodeURI +translation_of: Web/JavaScript/Reference/Global_Objects/encodeURI +--- +<div> +<div> +<div>{{jsSidebar("Objects")}}</div> +</div> +</div> + +<h2 id="Summary" name="Summary">Sommario</h2> + +<p>La funzione <strong><code>encodeURI()</code></strong> codifica un {{Glossary("URI")}} sostituendo alcuni specifici caratteri con una, due, tre o quattro sequenze di escape, che rappresentano il carattere codificato in {{Glossary("UTF-8")}} (le sequenze di quattro caratteri di escape verrano solo create per i caratteri composti da due caratteri "surrogati").</p> + +<h2 id="Syntax" name="Syntax">Sintassi</h2> + +<pre class="syntaxbox"><code>encodeURI(<em>uri</em>)</code></pre> + +<h3 id="Parameters" name="Parameters">Parametri</h3> + +<dl> + <dt><code><font face="Consolas, Monaco, Andale Mono, monospace">uri</font></code></dt> + <dd>Un {{Glossary("URI")}} completo.</dd> +</dl> + +<h2 id="Description" name="Description">Descrizione</h2> + +<p>Questa funzione assume che <code>uri</code> sia un {{Glossary("URI")}} completo, quindi non codifica i caratteri riservati che hanno un significato particolare nell'{{Glossary("URI")}}.</p> + +<p><code>encodeURI</code> sostituisce tutti i caratteri con la sequenza di escape UTF-8 appropriata, ecceto i seguenti:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">Tipo</td> + <td class="header">Caratteri</td> + </tr> + <tr> + <td>Caratteri riservati</td> + <td><code>;</code> <code>,</code> <code>/</code> <code>?</code> <code>:</code> <code>@</code> <code>&</code> <code>=</code> <code>+</code> <code>$</code></td> + </tr> + <tr> + <td>Caratteri non codificati</td> + <td>lettere, cifre, <code>-</code> <code>_</code> <code>.</code> <code>!</code> <code>~</code> <code>*</code> <code>'</code> <code>(</code> <code>)</code></td> + </tr> + <tr> + <td>Score</td> + <td><code>#</code></td> + </tr> + </tbody> +</table> + +<p><code>encodeURI</code> <strong>non</strong> prepara una richiesta HTTP GET o POST, ad esempio per {{domxref("XMLHttpRequest")}}, perché "&", "+" e "=" non vengono codificati, ma sono trattati come caratteri speciali nelle richieste GET e POST. Se è necessario codificarli, usare la funzione {{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent()")}}.</p> + +<p>Se si tenta di codificare un surrogato che non è parte di una coppia, verrà generato un {{jsxref("Global_Objects/URIError", "URIError")}}.</p> + +<pre class="brush: js">// Coppia surrogata: Ok +encodeURI("\uD800\uDFFF"); + +// Solo il primo carattere surrogato: +// Viene generato un "URIError: malformed URI sequence" +encodeURI("\uD800"); + +// Solo il secondo carattere surrogato: +// Viene generato un "URIError: malformed URI sequence" +encodeURI("\uDFFF"); </pre> + +<p>Se uno desidera seguire il più recente standard per gli {{Glossary("URL")}} <a href="http://tools.ietf.org/html/rfc3986">RFC3986</a>, nel quale le parentesi quadre sono caratteri riservati (per gli indirizzi {{Glossary("IPv6")}}), può essere utile il seguente codice:</p> + +<pre class="brush: js">function fixedEncodeURI(str) { + return encodeURI(str).replace(/%5B/g, '[').replace(/%5D/g, ']'); +}</pre> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commenti</th> + </tr> + <tr> + <td>ECMAScript 3rd Edition.</td> + <td>Standard</td> + <td>Definizione iniziale.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.1.3.3', 'encodeURI')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-encodeuri-uri', 'encodeURI')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funzionalità</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Supporto di base</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th><span style="font-family: 'Open Sans Light', sans-serif; font-size: 16px; line-height: 16px;">Funzionalità</span></th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td><span style="font-size: 12px; line-height: 18px;">Supporto di base</span></td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_Also" name="See_Also">Vedi anche</h2> + +<ul> + <li>{{jsxref("Global_Objects/decodeURI", "decodeURI()")}}</li> + <li>{{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent()")}}</li> + <li>{{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent()")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/encodeuricomponent/index.html b/files/it/web/javascript/reference/global_objects/encodeuricomponent/index.html new file mode 100644 index 0000000000..66b290ccb4 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/encodeuricomponent/index.html @@ -0,0 +1,162 @@ +--- +title: encodeURIComponent() +slug: Web/JavaScript/Reference/Global_Objects/encodeURIComponent +translation_of: Web/JavaScript/Reference/Global_Objects/encodeURIComponent +--- +<div>{{jsSidebar("Objects")}}</div> + +<h2 id="Summary" name="Summary">Sommario</h2> + +<p>La funzione <strong><code>encodeURIComponent()</code></strong> codifica un componente di un {{Glossary("URI")}} sostituendo alcuni specifici caratteri con una, due, tre o quattro sequenze di escape, che rappresentano il carattere codificato in {{Glossary("UTF-8")}} (le sequenze di quattro caratteri di escape verrano solo create per i caratteri composti da due caratteri "surrogati").</p> + +<h2 id="Syntax" name="Syntax">Sintassi</h2> + +<pre class="syntaxbox">encodeURIComponent(uriComponent);</pre> + +<h3 id="Parameters" name="Parameters">Parametri</h3> + +<dl> + <dt><code>uriComponent</code></dt> + <dd>Una parte di un {{Glossary("URI")}}</dd> +</dl> + +<h2 id="Description" name="Description">Descrizione</h2> + +<p><code>encodeURIComponent</code> sostituisce tutti i caratteri esclusi i seguenti: lettere, cifre, <code>- _ . ! ~ * ' ( )</code></p> + +<p>Se si tenta di codificare un surrogato che non è parte di una coppia, verrà generato un {{jsxref("Global_Objects/URIError", "URIError")}}.</p> + +<pre class="brush: js">// Coppia surrogata: Ok +encodeURIComponent("\uD800\uDFFF"); + +// Solo il primo carattere surrogato: +// Viene generato un "URIError: malformed URI sequence" +encodeURIComponent("\uD800"); + +// Solo il secondo carattere surrogato: +// Viene generato un "URIError: malformed URI sequence" +encodeURIComponent("\uDFFF");</pre> + +<p>Per evitare problemi inaspettati durante le richieste al server, bisognerebbe richiamare <code>encodeURIComponent</code> su ogni dato inserito dall'utente che verrà passato come parte di un {{Glossary("URI")}}. Per esempio, un un utente potrebbe digitare "<code>Cani&Gatti = animali"</code>. Senza utilizzare la funzione <code>encodeURIComponent</code>, la richiesta verrebbe costruita in modo simile a "<code>commento=Cani&Gatti%20=%20animali</code>". Notare che sono due variabili separate: "<code>commento</code>" e "<code>Gatti%20</code>". Utilizzando quuesta funzione verrebbe invece costruita come "<code>commento=Cani%26Gatti%20%3D%20animali</code>".</p> + +<p>Utilizzando <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#application/x-www-form-urlencoded-encoding-algorithm"><code>application/x-www-form-urlencoded</code></a>, gli spazi devono essere sostituiti da un "<code>+</code>"., quindi si potrebbe usare la funzione <code>encodeURIComponent</code> seguita da un altra sostituzione da "<code>%20</code>" a "<code>+</code>".</p> + +<p>Per aderire con più precisione allo standard <a class="external" href="http://tools.ietf.org/html/rfc3986">RFC 3986</a> (secondo il quale <code>!</code>, <code>'</code>, <code>(</code>, <code>)</code> e <code>*</code> sono caratteri riservati), si può usare la seguente funzione:</p> + +<pre class="brush: js">function fixedEncodeURIComponent(str) { + return encodeURIComponent(str).replace(/[!'()*]/g, function (c) { + return '%' + c.charCodeAt(0).toString(16); + }); +} +</pre> + +<h2 id="See_also" name="See_also">Esempi</h2> + +<p>Il seguente esempio fornisce un metodo per codificare come richiesto dall'header <code>Content-Disposition</code>:</p> + +<pre class="brush: js">var fileName = 'my file(2).txt'; +var header = "Content-Disposition: attachment; filename*=UTF-8''" + + encodeRFC5987ValueChars(fileName); + +console.log(header); +// logs "Content-Disposition: attachment; filename*=UTF-8''my%20file%282%29.txt" + + +function encodeRFC5987ValueChars (str) { + return encodeURIComponent(str). + // Notare che anche se per l'RFC3986 "!" è riservato, non lo è per + // l' RFC5987, quindi non viene sostituito + replace(/['()]/g, escape). // i.e., %27 %28 %29 + replace(/\*/g, '%2A'). + // Per l'RFC5987 questi caratteri non necessitano di essere codificati, + // quindi possiamo consentire un po' più di leggibilità: |`^ + replace(/%(?:7C|60|5E)/g, unescape); +} +</pre> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commenti</th> + </tr> + <tr> + <td>ECMAScript 3rd Edition.</td> + <td>Standard</td> + <td>Definizione iniziale.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.1.3.4', 'encodeURIComponent')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-encodeuricomponent-uricomponent', 'encodeURIComponent')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funzionalità</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Supporto di base</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th><span style="font-family: 'Open Sans Light', sans-serif; font-size: 16px; line-height: 16px;">Funzionalità</span></th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Supporto di base</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>{{jsxref("Global_Objects/decodeURI", "decodeURI()")}}</li> + <li>{{jsxref("Global_Objects/encodeURI", "encodeURI()")}}</li> + <li>{{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent()")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/escape/index.html b/files/it/web/javascript/reference/global_objects/escape/index.html new file mode 100644 index 0000000000..77fa1e5bf0 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/escape/index.html @@ -0,0 +1,126 @@ +--- +title: escape() +slug: Web/JavaScript/Reference/Global_Objects/escape +translation_of: Web/JavaScript/Reference/Global_Objects/escape +--- +<div> +<div> +<div>{{jsSidebar("Objects")}} {{deprecated_header}}</div> +</div> +</div> + +<h2 id="Summary" name="Summary">Sommario</h2> + +<p>La funzione <strong><code>escape()</code></strong>, deprecata, crea una nuova stringa nella quale alcuni caratteri vengono sostituiti con una sequenza di escape esadecimale. È preferibile usare le funzioni {{jsxref("Global_Objects/encodeURI", "encodeURI()")}} o {{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent()")}}.</p> + +<h2 id="Syntax" name="Syntax">Sintassi</h2> + +<pre class="syntaxbox"><code>escape(string)</code></pre> + +<h3 id="Parameters" name="Parameters">Parametri</h3> + +<dl> + <dt><code>string</code></dt> + <dd>La stringa da codificare.</dd> +</dl> + +<h2 id="Description" name="Description">Descrizione</h2> + +<p>La funzione <code>escape()</code> è una proprietà dell'<em>oggetto globale</em>. Vengono codificati tutti i caratteri speciali, ad eccezione di: <code>@ * _ + - . /</code></p> + +<p>I caratteri vengono sostituiti con codici esadecimali che possono avere due caratteri, se il loro valore è minore o ugugale a 0xFF, (%xx) oppure quattro (%<strong>u</strong>xxxx).</p> + +<h2 id="Esempi">Esempi</h2> + +<pre class="brush: js">escape("abc123"); // "abc123" +escape("äöü"); // "%E4%F6%FC" +escape("ć"); // "%u0107" + +// Caratteri speciali +escape("@*_+-./"); // "@*_+-./"</pre> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commenti</th> + </tr> + <tr> + <td>ECMAScript 1st Edition.</td> + <td>Standard</td> + <td>Definizione iniziale.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-B.2.1', 'escape')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Definita nell'appendice B, "<em>Compatibility</em>"</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-escape-string', 'escape')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Definita nell'appendice B, "<em>Additional ECMAScript Features for Web Browsers</em>"</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funzionalità</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Supporto di base</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th><span style="font-family: 'Open Sans Light', sans-serif; font-size: 16px; line-height: 16px;">Funzionalità</span></th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td><span style="font-size: 12px; line-height: 18px;">Supporto di base</span></td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_Also" name="See_Also">Vedi anche</h2> + +<ul> + <li>{{jsxref("Global_Objects/encodeURI", "encodeURI()")}}</li> + <li>{{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent()")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/eval/index.html b/files/it/web/javascript/reference/global_objects/eval/index.html new file mode 100644 index 0000000000..22e3c70bb6 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/eval/index.html @@ -0,0 +1,231 @@ +--- +title: eval() +slug: Web/JavaScript/Reference/Global_Objects/eval +translation_of: Web/JavaScript/Reference/Global_Objects/eval +--- +<p>{{jsSidebar("Objects")}}</p> + +<h2 id="Summary" name="Summary">Riassunto</h2> + +<p>Il metodo <code><strong>eval()</strong></code> esegue il codice JavaScript rappresentato come una stringa.</p> + +<h2 id="Syntax" name="Syntax">Sintassi</h2> + +<pre class="syntaxbox"><code>eval(<em>stringa</em>)</code></pre> + +<h3 id="Parameters" name="Parameters">Parametri</h3> + +<dl> + <dt><code>string</code></dt> + <dd>Una stringa che rappresenta un'espressione JavaScript, dichiarazione o sequenza di istruzioni. L'espressione può includere le variabili e le proprietà degli oggetti esistenti.</dd> +</dl> + +<h2 id="Description" name="Description">Descrizione</h2> + +<p><code>eval()</code> è una funzione dell'oggetto globale.</p> + +<p>L'argomento della funzione <code>eval()</code> è una stringa. Se la stringa rappresenta un'espressione, <code>eval()</code> esegue l'espressione. Se l'argomento rappresenta una o più dichiarazioni Javascript, <code>eval()</code>esegue le dichiarazioni. Non chiamare <code>eval()</code> per eseguire un'operazione aritmetica, JavaScript la esegue automaticamente.</p> + +<p>Se si costruisce un'espressione aritmetica come una stringa, è possibile usare <code>eval()</code> per eseguirla in un secondo momento. Ad esempio, supponiamo di avere una variabile <code>x</code>. E' possibile rinviare il valore di un'espressione che coinvolge <code>x</code> assegnando il valore della stringa dell'espressione, tipo "<code>3 * x + 2</code>", ad una variabile, e quindi chiamare <code>eval()</code> in un punto successivo dello script.</p> + +<p>Se l'argomento di <code>eval()</code> non è una stringa, <code>eval()</code> restituisce l'argomento immutato. Nell'esempio qui sotto, il costrutto <code>String</code> viene specificato, e <code>eval()</code> ritorna un oggetto <code>String</code> piuttosto che il risultato della stringa.</p> + +<pre class="brush:js">eval(new String("2 + 2")); // returns a String object containing "2 + 2" +eval("2 + 2"); // returns 4 +</pre> + +<p>E' possibile aggirare questa limitazione in modo generico utilizzando <code>toString()</code>.</p> + +<pre class="brush:js">var expression = new String("2 + 2"); +eval(expression.toString()); +</pre> + +<p>Non è possibile utilizzare la funzione <code>eval</code> indirettamente, invocandola con un nome diverso da <code>eval()</code>; se lo fai , potrebbe verificarsi un errore di sintassi. Per esempio, non si dovrebbe usare il seguente codice:</p> + +<pre class="brush:js">var x = 2; +var y = 4; +var myEval = eval; +myEval("x + y"); +</pre> + +<h2 id="Don.27t_use_eval.21" name="Don.27t_use_eval.21"><a name="dont-use-it">Non usate eval inutilmente!</a></h2> + +<p><code>eval()</code>è una funzione pericolosa, che esegue il codice con i privilegi dell'amministratore della pagina. Se si esegue <code>eval()</code> con una stringa che potrebbe essere interessata da un malintenzionato, si può interrompere l'esecuzione del codice dannoso sul computer dell'utente con il permesso della pagina Web. Ancora più importante, codici di terze parti possono vedere come <code>eval()</code> è stata invocata, che può portare a possibili attacchi come {{jsxref("Global_Objects/Function", "Function")}}.</p> + +<p><code>eval()</code> è generalmente più lenta rispetto alle alternative, dal momento che deve chiamare l'interprete di JS, mentre moltri altri costrutti sono ottimizzati da moderni "motori" JS.</p> + +<p>Queste sono alternative più sicure (e veloci! ) ad <code>eval()</code> per comuni impieghi.</p> + +<h3 id="Accessing_member_properties" name="Accessing_member_properties">Accesso alle proprietà utente</h3> + +<p>Si consiglia si non utilizzare <code>eval()</code> per conventire i nomi di proprietà in proprietà. Consideriamo l'esempio qui sotto, dove le proprietà dell'oggetto acui accedere non è nota fino a quando viene eseguito il codice. Questo può essere fatto con eval:</p> + +<pre class="brush:js">var obj = { a: 20, b: 30 }; +var propname = getPropName(); //returns "a" or "b" + +eval( "var result = obj." + propname ); +</pre> + +<p>Tuttavia, <code>eval ()</code> non è necessario qui. In realtà, il suo uso è sconsigliato qui. Invece, utilizzare gli <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Member_Operators" title="JavaScript/Reference/Operators/Member_Operators">operatori membri</a>, che sono molto più veloci e sicuri:</p> + +<pre class="brush:js">var obj = { a: 20, b: 30 }; +var propname = getPropName(); //returns "a" or "b" +var result = obj[ propname ]; // obj[ "a" ] is the same as obj.a +</pre> + +<h3 id="Use_functions_instead_of_evaluating_snippets_of_code" name="Use_functions_instead_of_evaluating_snippets_of_code">Utilizzare le funzioni invece di eseguire frammenti di codice</h3> + +<p>JavaScript ha <a class="external" href="http://en.wikipedia.org/wiki/First-class_function" title="http://en.wikipedia.org/wiki/First-class_function">funzioni di prima classe</a>, il che significa che è possibile passare funzioni come argomenti ad altre API, memorizzarli in variabili e le proprietà degli oggetti, e così via. Molte API DOM sono progettate con questo in mente, in modo da poter (e devono) scrivere a:</p> + +<pre class="brush: js">// instead of setTimeout(" ... ", 1000) use: +setTimeout(function() { ... }, 1000); + +// instead of elt.setAttribute("onclick", "...") use: +elt.addEventListener("click", function() { ... } , false); </pre> + +<p><a href="/en-US/docs/Web/JavaScript/Guide/Closures" title="JavaScript/Guide/Closures">Le chiusure</a> sono utili anche come un modo per creare funzioni parametrizzate senza concatenazioni di stringhe.</p> + +<h3 id="Parsing_JSON_(converting_strings_to_JavaScript_objects)" name="Parsing_JSON_(converting_strings_to_JavaScript_objects)">Analisi di JSON (conversione di stringhe in oggetti JavaScript)</h3> + +<p>Se la stringa che si sta chiamando <code>eval()</code> contiene dati (per esempio un array: <code>"[1, 2, 3]"</code>), al ontrario del codice, si dovrebbe considerareil passaggio a <a href="/en-US/docs/JSON" title="JSON">JSON</a>, che permette la stringa di utilizzre un sottoinsieme della sintassi Javascript per rappresentare i dati. Vedi anche <a href="/en-US/docs/Downloading_JSON_and_JavaScript_in_extensions" title="Downloading_JSON_and_JavaScript_in_extensions">Downloading JSON and JavaScript in extensions</a>.</p> + +<p>Notare che, poichè la sintassi JSON è limitata rispetto alla sintassi di Javascript, molti letterali Javascript validi non analizzare come JSON. Ad esempio, le virgole finali non sono ammessi in JSON, e nomi di proprietà (chiavi) in letterali oggetto devono essere racchiusi tra virgolette. Assicurarsi di utilizzare un serializzatore JSON per generare le stringhe che vrranno successivamente analizzate come JSON.</p> + +<h3 id="Pass_data_instead_of_code" name="Pass_data_instead_of_code">Paasare i dati al posto di codici</h3> + +<p>Ad esempio, un'estensione progettata per raschiare contenuti delle pagine Web potrebbe avere le regole di raschiatura definite in <a href="/en-US/docs/XPath" title="XPath">XPath</a> invece di codice Javascript.</p> + +<h3 id="Run_code_with_limited_privileges" name="Run_code_with_limited_privileges">Eseguire codice con privilegi limitati</h3> + +<p>Se devi eseguire il codice, considerare di eseguirlo con privilegi ridotti. Questo consilio vale soprattutto per le estensioni e le applicazioni XUL, che possono utilizzare <a href="/en-US/docs/Components.utils.evalInSandbox" title="Components.utils.evalInSandbox">Components.utils.evalInSandbox</a> per questo.</p> + +<h2 id="Examples" name="Examples">Esempio</h2> + +<p>Il seguente esempio mostra output utilizzando <a href="/en-US/docs/Web/API/document.write"><code>document.write</code></a>. Nel server-side JavaScript, è possibile visualizzare la stessa uscita chiamando la funzione <code>write()</code> invece di utilizzare il <code>document.write()</code>.</p> + +<h3 id="Example:_Using_eval" name="Example:_Using_eval">Esempio: Usare <code>eval</code></h3> + +<p>Nel codice seguente, entrambe le dichiarazioni contenenti <code>eval()</code> restituiscono 42. La prima restituisce la stringa "<code>x + y + 1</code>" ; la seconda esegue la stringa "<code>42</code>".</p> + +<pre class="brush:js">var x = 2; +var y = 39; +var z = "42"; +eval("x + y + 1"); // returns 42 +eval(z); // returns 42 +</pre> + +<h3 id="Example:_Using_eval_to_evaluate_a_string_of_JavaScript_statements" name="Example:_Using_eval_to_evaluate_a_string_of_JavaScript_statements">Esempio: Usare <code>eval</code> Per eseguire una serie di istruzioni JavaScript.</h3> + +<p>Il seguente esempio utilizza <code>eval()</code> per eseguire la stringa <code>str</code>. Questa stringa consiste in una serie di istruzioni JavaScript che aprono una finestra di avviso e assegnano a <code>z</code> un valore 42 se <code>x</code> è di cinque, e assegna 0 a <code>z</code> altrimenti. Quando viene eseguita la seconda istruzione, <code>eval()</code> farà si che questa dichiarazioni da effettuare, e sarà anche eseguire l'insieme di istruzioni e restituire il valore che viene assegnato a <code>z</code>.</p> + +<pre class="brush:js">var x = 5; +var str = "if (x == 5) {alert('z is 42'); z = 42;} else z = 0; "; + +document.write("<P>z is ", eval(str));</pre> + +<h3 id="Return_value" name="Return_value">Esempio: L'ultima espressione viene eseguita</h3> + +<p><code>eval()</code>restituisce il valore dell'ultima espressione valutata.</p> + +<pre class="brush:js">var str = "if ( a ) { 1+1; } else { 1+2; }"; +var a = true; +var b = eval(str); // returns 2 + +alert("b is : " + b); + +a = false; +b = eval(str); // returns 3 + +alert("b is : " + b);</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>ECMAScript 1st Edition.</td> + <td>Standard</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.1.2.1', 'eval')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-eval-x', 'eval')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome per Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="See_Also" name="See_Also">Gecko-specific notes</h3> + +<ul> + <li>Storicamente <code>eval()</code> ha avuto un secondo argomento opzionale, specificando un oggetto nel cui contesto la valutazione doveva essere eseguita. Questo argomento è stato non-standard, ed è stato rimosso dal SpiderMonkey in Gecko 1.9.1 (Firefox 3.5). Vedere {{ bug(442333) }}.</li> +</ul> + +<h2 id="See_Also" name="See_Also">Vedi anche</h2> + +<ul> + <li>{{jsxref("Global_Objects/uneval", "uneval()")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Member_Operators">Member operators</a></li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/function/apply/index.html b/files/it/web/javascript/reference/global_objects/function/apply/index.html new file mode 100644 index 0000000000..1c0d04272d --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/function/apply/index.html @@ -0,0 +1,250 @@ +--- +title: Function.prototype.apply() +slug: Web/JavaScript/Reference/Global_Objects/Function/apply +tags: + - JavaScript + - funzione + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/Function/apply +--- +<div> +<p>{{JSRef}}</p> + +<p>Il metodo <code><strong>apply()</strong></code> chiama una funzione passandole il "<code>this</code>" ed i parametri forniti sottoforma di array (o <a href="/en-US/docs/Web/JavaScript/Guide/Indexed_collections#Working_with_array-like_objects">array-like object</a>).</p> + +<p><strong>Nota:</strong> Mentre la sintassi di questa funzione è quasi completamente identica a quella di {{jsxref("Function.call", "call()")}}, la fondamentale differenza è che <code>call()</code> accetta una <strong>lista di parametri</strong>, mentre <code>apply()</code> accetta un <strong>singolo array contenente una lista di parametri</strong>.</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre><code><var>fun</var>.apply(<var>thisArg, </var>[<var>argsArray</var>])</code></pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt><code>thisArg</code></dt> + <dd>Il valore del <code>this</code> da fornire alla chiamata a <em><code>fun</code></em>. Nota che questo potrebbe non essere l'effettivo valore visto dal metodo: se il metodo non è eseguito in {{jsxref("Strict_mode", "strict mode", "", 1)}}, {{jsxref("null")}} ed {{jsxref("undefined")}} saranno rimpiazzati dall'oggetto globale.</dd> + <dt><code>argsArray</code></dt> + <dd>Un array-like object che specifica i parametri con la quale la funzione <em><code>fun</code></em> deve essere chiamata. Può essere anche {{jsxref("null")}} o {{jsxref("undefined")}} nel caso nessun parametro dovesse essere passato. A partire da ECMAScript 5 questi parametri possono essere un qualunque array-like object invece di un semplice array. Vedi sotto per le {{anch("Browser_compatibility", "compatibilità nei browser")}}.</dd> +</dl> + +<h2 id="Descrizione">Descrizione</h2> + +<p><code>this</code> solitamente si riferisce all'oggetto corrente, ma grazie ad <code>apply</code> è possibile scrivere un metodo una sola volta e riusarlo più volte su oggetti differenti passando ad apply, appunto, un this differente. Cosi viene eliminata la necessità di riscrivere di nuovo lo stesso metodo per un oggetto diverso.</p> + +<p><code>apply</code> è molto simile a {{jsxref("Function.call", "call()")}}, eccezion fatta per il modo in cui i parametri vengono passati. Puoi utilizzare un array di parametri invece della solita lista. Con <code>apply</code>, ad esempio, puoi utilizzare il seguente array literal: <code><em>fun</em>.apply(this, ['eat', 'bananas'])</code>, o il seguente oggetto {{jsxref("Array")}}: <code><em>fun</em>.apply(this, new Array('eat', 'bananas'))</code>.</p> + +<p>Puoi anche utilizzare {{jsxref("Functions/arguments", "arguments")}} per il parametro <code>argsArray<font face="Open Sans, Arial, sans-serif">. </font></code><code>arguments</code> è una variabile locale di tutte le funzioni. Può essere utilizzata per tutti i parametri non specificati dell'oggetto chiamato. In più, non è necessario che si conoscano i parametri dell'oggetto chiamato quando si utilizza apply.</p> + +<p>Da ECMAScript 5 puoi anche usare qualunque tipo di array-like object. Ad esempio puoi utilizzare un {{domxref("NodeList")}} o un oggetto come <code>{ 'length': 2, '0': 'eat', '1': 'bananas' }</code>.</p> + +<p>{{note("La maggior parte dei browser, incluso Chrome 14 ed Internet Explorer 9, non accetto array-like objects e lanceranno una eccezione.")}}</p> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Utilizzare_apply_per_concatenare_costruttori">Utilizzare apply per concatenare costruttori</h3> + +<p>Puoi utilizzare apply per concatenare {{jsxref("Operators/new", "costruttori", "", 1)}} per un oggetto, in maniera simile a Java. Nel seguente esempio creeremo una {{jsxref("Function")}} globale chiamata <code>construct</code>, che ti permetterà di utilizzare un array-like object con un costruttore anziché una lista di argomenti.</p> + +<pre>Function.prototype.construct = function (aArgs) { + var oNew = Object.create(this.prototype); + this.apply(oNew, aArgs); + return oNew; +}; +</pre> + +<p><strong>Note:</strong> Il metodo <code>Object.create()</code> usato nell'esempio sovrastante è relativamente nuovo. Per un alternativa che utilizza le closures considera questo pezzo di codice:</p> + +<pre>Function.prototype.construct = function(aArgs) { + var fConstructor = this, fNewConstr = function() { + fConstructor.apply(this, aArgs); + }; + fNewConstr.prototype = fConstructor.prototype; + return new fNewConstr(); +};</pre> + +<p>Esempio d'uso:</p> + +<pre>function MyConstructor() { + for (var nProp = 0; nProp < arguments.length; nProp++) { + this['property' + nProp] = arguments[nProp]; + } +} + +var myArray = [4, 'Hello world!', false]; +var myInstance = MyConstructor.construct(myArray); + +console.log(myInstance.property1); // logs 'Hello world!' +console.log(myInstance instanceof MyConstructor); // logs 'true' +console.log(myInstance.constructor); // logs 'MyConstructor' +</pre> + +<p><strong>Note:</strong> Il metodo non nativo <code>Function.construct</code> non funzionerà con alcuni costruttori nativi (come {{jsxref("Date")}}). In questi casi devi usare {{jsxref("Function.prototype.bind")}}. Immagina ad esempio di avere un array come il seguente da utilizzare con il costruttore {{jsxref("Global_Objects/Date", "Date")}}: <code>[2012, 11, 4]</code>; In questo caso dovresti scrivere qualcosa come: <code>new (Function.prototype.bind.apply(Date, [null].concat([2012, 11, 4])))()</code> — ad ogni modo questo non è il miglior modo di fare le cose e non andrebbe mai usato in produzione.</p> + +<h3 id="Utilizzare_apply_combinato_alle_funzioni_built-in">Utilizzare apply combinato alle funzioni built-in</h3> + +<p>Un intelligente uso di <code>apply</code> ti permette di utilizzare delle funzioni built-in per dei compiti che altrimenti sarebbero stati fatti, nel caso sottostante, ciclando l'array e scorrendo ogni suo elemento e sottoponendolo a dei controlli. L'esempio seguente dimostra come trovare il massimo / minimo valore all'interno di un array utilizzando <code>Math.max</code>/<code>Math.min</code>.</p> + +<pre>// min/max number in an array +var numbers = [5, 6, 2, 3, 7]; + +// using Math.min/Math.max apply +var max = Math.max.apply(null, numbers); +// This about equal to Math.max(numbers[0], ...) +// or Math.max(5, 6, ...) + +var min = Math.min.apply(null, numbers); + +// vs. simple loop based algorithm +max = -Infinity, min = +Infinity; + +for (var i = 0; i < numbers.length; i++) { + if (numbers[i] > max) { + max = numbers[i]; + } + if (numbers[i] < min) { + min = numbers[i]; + } +} +</pre> + +<p>Ma tieni a mente che nell'usare apply in questo modo si corre il rischio di superare il limite imposto dal motore JavaScript degli argomenti che possono essere passati ad una funzione.<br> + Le conseguenze nel fare ciò variano da motore a motore (ad esempio JavaScriptCore ha il limite settato a mano di <a href="https://bugs.webkit.org/show_bug.cgi?id=80797">65536</a> parametri), perché il limite non è specificato. Alcuni motori lanceranno una eccezione. Altri invece limiteranno arbitrariamente il numero dei parametri passati alla funzione su cui viene usato il metodo <em><code>apply().</code></em> (Un esempio di quest'ultimo caso potrebbe essere quello di un motore che ha questo limite settato a 4 e, nell'esempio sovrastante, gli unici parametri che effettivamente saranno passati alla funzione saranno <code>5, 6, 2, 3</code>, piuttosto che l'intero array.) Una decisione saggia, nel caso si prevede la possibilità di raggiungere un enorme numero di parametri, sarebbe quella di parzializzare il numero di parametri per lotti:</p> + +<pre>function minOfArray(arr) { + var min = Infinity; + var QUANTUM = 32768; + + for (var i = 0, len = arr.length; i < len; i += QUANTUM) { + var submin = Math.min.apply(null, arr.slice(i, Math.min(i+QUANTUM, len))); + min = Math.min(submin, min); + } + + return min; +} + +var min = minOfArray([5, 6, 2, 3, 7]); +</pre> + +<h3 id="Usare_apply_come_monkey-patch">Usare apply come "monkey-patch"</h3> + +<p>L'attività del "monkey-patching" consiste nel modificare il funzionamento di un metodo senza dover andare a mettere mano al codice sorgente (cosa da evitare sempre e comunque). Difatti Apply può rivelarsi il modo migliore di modificare il funzionamento, ad esempio, di una funzione interna a Firefox o di una qualunque altra libreria JS. Data una funzione <code>someobject.foo</code>, è possibile modificarne il funzionamento in questo modo:</p> + +<pre>var originalfoo = someobject.foo; +someobject.foo = function() { + // Do stuff before calling function + console.log(arguments); + // Call the function as it would have been called normally: + originalfoo.apply(this, arguments); + // Run stuff after, here. +} +</pre> + +<p>Questo metodo ritorna particolarmente utile quando vuoi debuggare eventi e interfacce con qualcosa che non espone API come i diversi eventi <code>.on([event]...</code> (usabili anche dal <a href="/en-US/docs/Tools/Page_Inspector#Developer_API">Devtools Inspector</a>).</p> + +<h2 id="Specifiche">Specifiche</h2> + +<table> + <tbody> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Definizione iniziale. Implementato in JavaScript 1.3.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.3.4.3', 'Function.prototype.apply')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-function.prototype.apply', 'Function.prototype.apply')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function.prototype.apply', 'Function.prototype.apply')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_Browser">Compatibilità Browser</h2> + +<p>{{CompatibilityTable}}</p> + +<table> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Supporto base</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>ES 5.1 generico array-like object come {{jsxref("Functions/arguments", "arguments")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> + +<table> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Supporto base</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>ES 5.1 generico array-like object come {{jsxref("Functions/arguments", "arguments")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>{{jsxref("Functions/arguments", "arguments")}} object</li> + <li>{{jsxref("Function.prototype.bind()")}}</li> + <li>{{jsxref("Function.prototype.call()")}}</li> + <li>{{jsxref("Functions", "Functions and function scope", "", 1)}}</li> + <li>{{jsxref("Reflect.apply()")}}</li> +</ul> +</div> diff --git a/files/it/web/javascript/reference/global_objects/function/arguments/index.html b/files/it/web/javascript/reference/global_objects/function/arguments/index.html new file mode 100644 index 0000000000..949e5f9cdb --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/function/arguments/index.html @@ -0,0 +1,92 @@ +--- +title: Function.arguments +slug: Web/JavaScript/Reference/Global_Objects/Function/arguments +tags: + - Deprecated + - Function + - JavaScript + - Property + - arguments +translation_of: Web/JavaScript/Reference/Global_Objects/Function/arguments +--- +<div>{{JSRef}} {{deprecated_header}}</div> + +<p>La proprieta' <code><strong><em>function</em>.arguments</strong></code> fa riferimento ad un oggetto simile ad un array corrispondente ai parametri passati ad una funzione. Usa questa semplice variabile {{jsxref("Functions/arguments", "arguments")}} invece. Questa proprieta' non e' disponibile in strict mode.</p> + +<h2 id="Descrizione">Descrizione</h2> + +<p><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">La sintassi </span></font><em>function</em>.arguments</code> e' deprecata. Il metodo consigliato per accedere all'oggetto {{jsxref("Functions/arguments", "arguments")}}, disponibile all'interno delle funzioni e' semplicemente mediante l'utilizzo di {{jsxref("Functions/arguments", "arguments")}}.</p> + +<p>In caso di ricorsione, per esempio, se la funzione <code>f</code> e' presente diverse volte nello stack, il valore di <code>f.arguments</code> rappresenta i parametri corrispondenti alla chiamata alla funzione piu' recente.</p> + +<p>Il valore della proprieta' arguments e' normalmente null se non c'e' una sua chiamata durante l'esecuzione della funzione (ovvero quando la funzione e' stata chiamata ma non ha ancora ritornato nessun valore).</p> + +<h2 id="Esempi">Esempi</h2> + +<pre class="brush: js">function f(n) { g(n - 1) } + +function g(n) { + console.log('before: ' + g.arguments[0]) + if (n > 0) { f(n) } + console.log('after: ' + g.arguments[0]) +} + +f(2) + +console.log('returned: ' + g.arguments) + +// Output + +// before: 1 +// before: 0 +// after: 0 +// after: 1 +// returned: null +</pre> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0. Deprecated in favor of {{jsxref("Functions/arguments", "arguments")}} in ES3.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-10.6', 'arguments object')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>{{jsxref("Functions/arguments", "arguments")}} object</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-arguments-object', 'arguments object')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>{{jsxref("Functions/arguments", "arguments")}} object</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-arguments-object', 'arguments object')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>{{jsxref("Functions/arguments", "arguments")}} object</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilita_Browser">Compatibilita' Browser</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Function.arguments")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Functions/arguments", "arguments")}} object</li> + <li>{{jsxref("Functions", "Functions and function scope", "", 1)}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/function/arity/index.html b/files/it/web/javascript/reference/global_objects/function/arity/index.html new file mode 100644 index 0000000000..fec2d9e988 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/function/arity/index.html @@ -0,0 +1,26 @@ +--- +title: Function.arity +slug: Web/JavaScript/Reference/Global_Objects/Function/arity +translation_of: Archive/Web/JavaScript/Function.arity +--- +<p>{{JSRef}}{{Obsolete_Header}}</p> + +<div class="blockIndicator note"> +<p>La proprieta' <code><strong>arity</strong></code> ritornava il numero di parametri richiesta da una funzione. Ad ogni modo non esiste piu' ed e' stata rimpiazzata dalla proprieta' {{JSxRef("Function.prototype.length")}}.</p> +</div> + +<h2 id="Specifiche">Specifiche</h2> + +<p>Implementato in JavaScript 1.2. Deprecato in JavaScript 1.4.</p> + +<h2 id="Compatibilita_Browser">Compatibilita' Browser</h2> + + + +<p>{{Compat("javascript.builtins.Function.arity")}}</p> + +<h2 id="Guarda_anche">Guarda anche</h2> + +<ul> + <li>{{JSxRef("Function.prototype.length")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/function/bind/index.html b/files/it/web/javascript/reference/global_objects/function/bind/index.html new file mode 100644 index 0000000000..38187ac5e6 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/function/bind/index.html @@ -0,0 +1,277 @@ +--- +title: Function.prototype.bind() +slug: Web/JavaScript/Reference/Global_Objects/Function/bind +translation_of: Web/JavaScript/Reference/Global_Objects/Function/bind +--- +<div>{{JSRef}}</div> + +<p>Il metodo <code><strong>bind()</strong></code> crea una nuova funzione che, quando chiamata, ha parola chiave <strong><code>this</code></strong> impostata sul valore fornito, con una data sequenza di argomenti che precede quella fornita quando viene chiamata la nuova funzione</p> + +<p>{{EmbedInteractiveExample("pages/js/function-bind.html", "taller")}}</p> + +<p class="hidden">La fonte per questo esempio interattivo è memorizzata in un repository GitHub. Se desideri contribuire al progetto di esempi interattivi, ti preghiamo di clonare. <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> e inviarci una richiesta di pull.</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><code><var>function</var></code>.bind(<var>thisArg</var>[, <var>arg1</var>[, <var>arg2</var>[, ...]]])</pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt><code>thisArg</code></dt> + <dd>Il valore va passato come parametro alla funzione target quando viene chiamata la funzione associata. Il valore viene ignorato se la funzione associata viene costruita utilizzando l'operatore {{jsxref("Operators/new", "new")}}. Quando si utilizza <code>bind</code> per creare una funzione (fornita come callback) all'interno di un setTimeout, qualsiasi valore primitivo passato come <code>thisArg</code> viene convertito in oggetto. Se non vengono forniti argomenti per vincolarlo, l'esecuzione viene considerata come <code>thisArg</code> per la nuova funzione.</dd> + <dt><code>arg1, arg2, ...</code></dt> + <dd>Argomenti da anteporre agli argomenti forniti alla funzione associata quando si richiama la funzione di destinazione.</dd> +</dl> + +<h3 id="Valore_restituito">Valore restituito</h3> + +<p>Una copia della funzione data con specificato <strong><code>this</code></strong> valore e gli argomenti iniziali.</p> + +<h2 id="Descrizione">Descrizione</h2> + +<p>La funzione <code>bind()</code> crea una nuova <strong>funzione associata</strong> <strong>(BF, bound function)</strong>. Un BF è un <em>exotic function object </em>(oggetto funzione esotico, un termine di ECMAScript 2015) che racchiude l'oggetto funzione originale. Chiamare un BF generalmente comporta l'esecuzione della sua funzione <em>wrapped</em> (avvolta).<br> + Un BF ha le seguenti proprietà interne:</p> + +<ul> + <li><strong>[[BoundTargetFunction]]</strong> - l'oggetto funzione avvolto;</li> + <li><strong>[[BoundThis]]</strong> - il valore che viene sempre passato come questo valore quando si chiama la funzione wrapped.</li> + <li><strong>[[BoundArguments]] - </strong>un elenco di valori i cui elementi vengono utilizzati come primi argomenti per qualsiasi chiamata alla funzione wrapped.</li> + <li><strong>[[Call]]</strong> - esegue il codice associato a questo oggetto. Invocato tramite un'espressione di chiamata di funzione. Gli argomenti del metodo interno sono un valore e un elenco contenente gli argomenti passati alla funzione da un'espressione di chiamata.</li> +</ul> + +<p>Quando viene chiamata la funzione associata, chiama il metodo interno <strong>[[Call]]</strong> su<strong> [[BoundTargetFunction]]</strong>, con i seguenti argomenti <code>call(boundThis, ...args)</code>. Dove, <code>boundThis</code> è <strong>[[BoundThis]]</strong>, <code>args</code> è <strong>[[BoundArguments]] </strong>seguito dagli argomenti passati dalla chiamata alla funzione.</p> + +<p>Una funzione associata (bound function) può anche essere costruita usando l'operatore <a href="/it/docs/Web/JavaScript/Reference/Operators/new">new</a>: agendo in tal modo si comporta come se la funzione obiettivo fosse stata invece costruita. Il valore <code>this</code> fornito viene ignorato, mentre gli argomenti preposti sono forniti alla funzione emulata.</p> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Creare_una_funzione_associata">Creare una funzione associata</h3> + +<p>L'uso più semplice di <code>bind()</code> è di creare una funzione che, indipendentemente da come viene chiamata, viene chiamata con un particolare valore. Un errore comune per i nuovi programmatori JavaScript consiste nell'estrarre un metodo da un oggetto, in seguito chiamare tale funzione e aspettarsi che utilizzi l'oggetto originale come tale (ad esempio, utilizzando tale metodo nel codice basato sul callback). Senza particolare cura, tuttavia, l'oggetto originale viene solitamente perso. La creazione di una funzione associata dalla funzione, utilizzando l'oggetto originale, risolve in modo chiaro questo problema:</p> + +<pre class="brush: js">this.x = 9; // questo si riferisce all'oggetto "finestra" globale qui nel browser +var module = { + x: 81, + getX: function() { return this.x; } +}; + +module.getX(); // 81 + +var retrieveX = module.getX; +retrieveX(); +// returns 9 - restituisce 9 - La funzione viene richiamata nell'ambito globale + +// Create a new function with 'this' bound to module +// Crea una nuova funzione con 'this' associato al modulo +// I nuovi programmatori potrebbero confondere il +// global var x con la proprietà del modulo x <code>var boundGetX = retrieveX.bind(module);</code> +boundGetX(); // 81 +</pre> + +<h3 id="Funzioni_parzialmente_applicate">Funzioni parzialmente applicate</h3> + +<p>Il prossimo uso più semplice di bind() è quello di creare una funzione con argomenti iniziali pre-specificati. Questi argomenti (se presenti) seguono il valore fornito e vengono quindi inseriti all'inizio degli argomenti passati alla funzione di destinazione, seguiti dagli argomenti passati alla funzione associata, ogni volta che viene chiamata la funzione associata.</p> + +<pre class="brush: js">function list() { + return Array.prototype.slice.call(arguments); +} + +var list1 = list(1, 2, 3); // [1, 2, 3] + +// Crea una funzione con un argomento principale preimpostato +var leadingThirtysevenList = list.bind(null, 37); + +var list2 = leadingThirtysevenList(); +// [37] + +var list3 = leadingThirtysevenList(1, 2, 3); +// [37, 1, 2, 3] +</pre> + +<h3 id="Con_setTimeout">Con <code>setTimeout</code></h3> + +<p>Di default all'interno di {{domxref("window.setTimeout()")}}, la parola chiave <code>this</code> verrà impostata sull'oggetto {{ domxref("window") }} (or <code>global</code>). Quando si lavora con metodi di classe che richiedono questo <code>this</code> riferimento alle istanze di classe, è possibile associarlo esplicitamente alla funzione di callback, al fine di mantenere l'istanza.</p> + +<pre class="brush: js">function LateBloomer() { + this.petalCount = Math.floor(Math.random() * 12) + 1; +} + +// Dichiarare apertura dopo un ritardo di 1 secondo +LateBloomer.prototype.bloom = function() { + window.setTimeout(this.declare.bind(this), 1000); +}; + +LateBloomer.prototype.declare = function() { + console.log('Sono un bel fiore con ' + + this.petalCount + ' petali!'); +}; + +var flower = new LateBloomer(); +flower.bloom(); +// dopo 1 secondo, attiva il metodo 'declare'</pre> + +<h3 id="Funzioni_associate_utilizzate_come_costruttori">Funzioni associate utilizzate come costruttori</h3> + +<div class="warning"> +<p><strong>Warning:</strong> Questa sezione dimostra capacità JavaScript e documenta alcuni casi limite del metodo bind(). I metodi mostrati di seguito non sono il modo migliore di fare le cose e probabilmente non dovrebbero essere usati in nessun ambiente di produzione.</p> +</div> + +<p>Le funzioni associate sono automaticamente utilizzabili con l'operatore {{jsxref("Operators/new", "new")}} per costruire nuove istanze create dalla funzione target. Quando una funzione associata viene utilizzata per costruire un valore, la condizione viene ignorata. Tuttavia, gli argomenti forniti sono ancora preposti alla chiamata del costruttore:</p> + +<pre class="brush: js">function Point(x, y) { + this.x = x; + this.y = y; +} + +Point.prototype.toString = function() { + return this.x + ',' + this.y; +}; + +var p = new Point(1, 2); +p.toString(); // '1,2' + +// non supportato nel polyfill di seguito, +// funziona bene con il bind nativo: + +var YAxisPoint = Point.bind(null, 0/*x*/); + + +var emptyObj = {}; +var YAxisPoint = Point.bind(emptyObj, 0/*x*/); + +var axisPoint = new YAxisPoint(5); +axisPoint.toString(); // '0,5' + +axisPoint instanceof Point; // true +axisPoint instanceof YAxisPoint; // true +new Point(17, 42) instanceof YAxisPoint; // true +</pre> + +<p>Note that you need do nothing special to create a bound function for use with {{jsxref("Operators/new", "new")}}. The corollary is that you need do nothing special to create a bound function to be called plainly, even if you would rather require the bound function to only be called using {{jsxref("Operators/new", "new")}}.</p> + +<pre class="brush: js">// Example can be run directly in your JavaScript console +// ...continuing from above + +// Can still be called as a normal function +// (although usually this is undesired) +YAxisPoint(13); + +emptyObj.x + ',' + emptyObj.y; +// > '0,13' +</pre> + +<p>If you wish to support the use of a bound function only using {{jsxref("Operators/new", "new")}}, or only by calling it, the target function must enforce that restriction.</p> + +<h3 id="Creating_shortcuts">Creating shortcuts</h3> + +<p><code>bind()</code> is also helpful in cases where you want to create a shortcut to a function which requires a specific <strong><code>this</code></strong> value.</p> + +<p>Take {{jsxref("Array.prototype.slice")}}, for example, which you want to use for converting an array-like object to a real array. You could create a shortcut like this:</p> + +<pre class="brush: js">var slice = Array.prototype.slice; + +// ... + +slice.apply(arguments); +</pre> + +<p>With <code>bind()</code>, this can be simplified. In the following piece of code, <code>slice</code> is a bound function to the {{jsxref("Function.prototype.apply()", "apply()")}} function of {{jsxref("Function.prototype")}}, with the <strong><code>this</code></strong> value set to the {{jsxref("Array.prototype.slice()", "slice()")}} function of {{jsxref("Array.prototype")}}. This means that additional <code>apply()</code> calls can be eliminated:</p> + +<pre class="brush: js">// same as "slice" in the previous example +var unboundSlice = Array.prototype.slice; +var slice = Function.prototype.apply.bind(unboundSlice); + +// ... + +slice(arguments); +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p>You can partially work around this by inserting the following code at the beginning of your scripts, allowing use of much of the functionality of <code>bind()</code> in implementations that do not natively support it.</p> + +<pre class="brush: js">if (!Function.prototype.bind) { + Function.prototype.bind = function(oThis) { + if (typeof this !== 'function') { + // closest thing possible to the ECMAScript 5 + // internal IsCallable function + throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable'); + } + + var aArgs = Array.prototype.slice.call(arguments, 1), + fToBind = this, + fNOP = function() {}, + fBound = function() { + return fToBind.apply(this instanceof fNOP + ? this + : oThis, + aArgs.concat(Array.prototype.slice.call(arguments))); + }; + + if (this.prototype) { + // Function.prototype doesn't have a prototype property + fNOP.prototype = this.prototype; + } + fBound.prototype = new fNOP(); + + return fBound; + }; +} +</pre> + +<p>Some of the many differences (there may well be others, as this list does not seriously attempt to be exhaustive) between this algorithm and the specified algorithm are:</p> + +<ul> + <li>The partial implementation relies on {{jsxref("Array.prototype.slice()")}}, {{jsxref("Array.prototype.concat()")}}, {{jsxref("Function.prototype.call()")}} and {{jsxref("Function.prototype.apply()")}}, built-in methods to have their original values.</li> + <li>The partial implementation creates functions that do not have immutable "poison pill" {{jsxref("Function.caller", "caller")}} and <code>arguments</code> properties that throw a {{jsxref("Global_Objects/TypeError", "TypeError")}} upon get, set, or deletion. (This could be added if the implementation supports {{jsxref("Object.defineProperty")}}, or partially implemented [without throw-on-delete behavior] if the implementation supports the {{jsxref("Object.defineGetter", "__defineGetter__")}} and {{jsxref("Object.defineSetter", "__defineSetter__")}} extensions.)</li> + <li>The partial implementation creates functions that have a <code>prototype</code> property. (Proper bound functions have none.)</li> + <li>The partial implementation creates bound functions whose {{jsxref("Function.length", "length")}} property does not agree with that mandated by ECMA-262: it creates functions with length 0, while a full implementation, depending on the length of the target function and the number of pre-specified arguments, may return a non-zero length.</li> +</ul> + +<p>If you choose to use this partial implementation, <strong>you must not rely on those cases where behavior deviates from ECMA-262, 5th edition!</strong> With some care, however (and perhaps with additional modification to suit specific needs), this partial implementation may be a reasonable bridge to the time when <code>bind()</code> is widely implemented according to the specification.</p> + +<p>Please check <a href="https://github.com/Raynos/function-bind">https://github.com/Raynos/function-bind</a> for a more thorough solution!</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.3.4.5', 'Function.prototype.bind')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.8.5.</td> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-function.prototype.bind', 'Function.prototype.bind')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function.prototype.bind', 'Function.prototype.bind')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Function.bind")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Function.prototype.apply()")}}</li> + <li>{{jsxref("Function.prototype.call()")}}</li> + <li>{{jsxref("Functions", "Functions", "", 1)}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/function/call/index.html b/files/it/web/javascript/reference/global_objects/function/call/index.html new file mode 100644 index 0000000000..54acd401ca --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/function/call/index.html @@ -0,0 +1,175 @@ +--- +title: Function.prototype.call() +slug: Web/JavaScript/Reference/Global_Objects/Function/call +translation_of: Web/JavaScript/Reference/Global_Objects/Function/call +--- +<div>{{JSRef}}</div> + +<p><span class="seoSummary">Il metodo <code><strong>call()</strong></code> esegue una funzione con un dato valore <code>this</code> e argomenti passati singolarmente.</span></p> + +<div class="note"> +<p><strong>Note:</strong> Mentre la sintassi di questa funzione è quasi identica a quella di {{jsxref("Function.prototype.apply", "apply()")}}, la differenza fondamentale è che <code>call()</code> accetta una <strong>lista di argomenti</strong> mentre <code>apply()</code> accetta un <strong>singolo array di argomenti</strong>.</p> +</div> + +<div>{{EmbedInteractiveExample("pages/js/function-call.html")}}</div> + + + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><var>func</var>.call([<var>thisArg</var>[, <var>arg1</var>, <var>arg2</var>, ...<var>argN</var>]])</pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt><code><var>thisArg</var></code> {{optional_inline}}</dt> + <dd> + <p>Il valore da usare come <code>this</code> quando si esegue <code><var>func</var></code>.</p> + + <div class="blockIndicator note"> + <p><strong>Attenzione:</strong> In certi casi, <code><var>thisArg</var></code> potrebbe non essere il valore reale visto dal metodo.</p> + + <p>Se il metodo è una funzione in {{jsxref("Strict_mode", "non-strict mode", "", 1)}}, {{jsxref("Global_Objects/null", "null")}} e {{jsxref("Global_Objects/undefined", "undefined")}} sarà sostituito dall'oggetto globale e i valori di tipo primitiva verranno convertiti in oggetti.</p> + </div> + </dd> + <dt><code><var>arg1</var>, <var>arg2</var>, ...<var>argN</var></code> {{optional_inline}}</dt> + <dd>Argomenti per la funzione.</dd> +</dl> + +<h3 id="Valore_restituito">Valore restituito</h3> + +<p>Il risultato dell'esecuzione della funzione con il <code><strong>this</strong></code> e gli argomenti specificati.</p> + +<h2 id="Descrizione">Descrizione</h2> + +<p>Il metodo <code>call()</code> consente a una funzione/metodo appartenente a un oggetto di essere essere assegnata e chiamata per un oggetto diverso..</p> + +<p><code>call()</code> fornisce un nuova valore di <code>this</code> alla funzione/metodo. Con <code>call()</code>, si può scrivere un metodo una volta ed ereditarlo in un altro oggetto senza dover riscrivere il metodo per il nuovo oggetto.</p> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Usare_call_per_collegare_costruttori_per_un_oggetto">Usare <code>call</code> per collegare costruttori per un oggetto</h3> + +<p>Si può usare <code>call</code> per collegare costruttori per un oggetto (simile a Java).</p> + +<p>Nell'esempio seguente, il costruttore per l'oggetto <code>Product</code> è definito con 2 parametri: <code>name</code> e <code>price</code>.</p> + +<p>Due altre funzioni, <code>Food</code> e <code>Toy</code>, invocano <code>Product</code>, passando <code>this</code>, <code>name</code>, e <code>price</code>. <code>Product</code> inizializza le proprietà <code>name</code> e <code>price</code>. Entrambe le funzioni specializzate definiscono la <code>category</code>.</p> + +<pre class="brush: js">function Product(name, price) { + this.name = name; + this.price = price; +} + +function Food(name, price) { + Product.call(this, name, price); + this.category = 'food'; +} + +function Toy(name, price) { + Product.call(this, name, price); + this.category = 'toy'; +} + +const cheese = new Food('feta', 5); +const fun = new Toy('robot', 40); +</pre> + +<h3 id="Usare_call_per_invocare_una_funzione_anonima">Usare <code>call</code> per invocare una funzione anonima</h3> + +<p>In questo esempio, viene create una funzione anonima e usato <code>call</code> per invocarla su ogni oggetto di un array.</p> + +<p>Lo scopo principale della funzione anonima qui è di aggiungere una funzione <code>print</code> o ogni oggetto il quale è in grado di stampare il corretto indice dell'oggetto nell'array.</p> + +<div class="blockIndicator note"> +<p>Passare l'oggetto come valore <code>this</code> non è strettamente necessario ma è fatto a scopo esplicativo.</p> +</div> + +<pre class="brush: js">const animals = [ + { species: 'Lion', name: 'King' }, + { species: 'Whale', name: 'Fail' } +]; + +for (let i = 0; i < animals.length; i++) { + (function(i) { + this.print = function() { + console.log('#' + i + ' ' + this.species + + ': ' + this.name); + } + this.print(); + }).call(animals[i], i); +} +</pre> + +<h3 id="Usare_call_per_invocare_una_funzione_e_specificare_il_contesto_per_this">Usare <code>call</code> per invocare una funzione e specificare il contesto per '<code>this</code>'</h3> + +<p>Nell'esempio sotto, quando viene eseguita <code>greet</code>, il valore di <code>this</code> verrà legato all'oggetto <code>obj</code>.</p> + +<pre class="brush: js">function greet() { + const reply = [this.animal, 'typically sleep between', this.sleepDuration].join(' '); + console.log(reply); +} + +const obj = { + animal: 'cats', sleepDuration: '12 and 16 hours' +}; + +greet.call(obj); // cats typically sleep between 12 and 16 hours +</pre> + +<h3 id="Usare_call_per_invocare_una_funzione_senza_specificare_il_primo_parametro">Usare <code>call</code> per invocare una funzione senza specificare il primo parametro</h3> + +<p>Nell'esempio sotto, viene invocata la funzione <code>display</code> senza passare il primo parametro. Se il primo parametro non è passato il valore di <code>this</code> è legato all'oggetto globale.</p> + +<pre class="brush: js">var sData = 'Wisen'; + +function display() { + console.log('sData value is %s ', this.sData); +} + +display.call(); // sData value is Wisen</pre> + +<div class="note"> +<p><strong>Attenzione:</strong> In strict mode il valore di <code>this</code> sarà <code>undefined</code>. Vedere sotto.</p> +</div> + +<pre class="brush: js">'use strict'; + +var sData = 'Wisen'; + +function display() { + console.log('sData value is %s ', this.sData); +} + +display.call(); // Cannot read the property of 'sData' of undefined</pre> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifiche</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-function.prototype.call', 'Function.prototype.call')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.builtins.Function.call")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Function.prototype.bind()")}}</li> + <li>{{jsxref("Function.prototype.apply()")}}</li> + <li> + <p><a href="/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript">Introduction to Object-Oriented JavaScript</a></p> + </li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/function/index.html b/files/it/web/javascript/reference/global_objects/function/index.html new file mode 100644 index 0000000000..4ef63fb80b --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/function/index.html @@ -0,0 +1,237 @@ +--- +title: Function +slug: Web/JavaScript/Reference/Global_Objects/Function +translation_of: Web/JavaScript/Reference/Global_Objects/Function +--- +<div>{{JSRef}}</div> + +<p>The <strong><code>Function</code> constructor</strong> creates a new <code>Function</code> object. In JavaScript every function is actually a <code>Function</code> object.</p> + +<p>gge</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code>new Function ([<var>arg1</var>[, <var>arg2</var>[, ...<var>argN</var>]],] <var>functionBody</var>)</code></pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>arg1, arg2, ... arg<em>N</em></code></dt> + <dd>Names to be used by the function as formal argument names. Each must be a string that corresponds to a valid JavaScript identifier or a list of such strings separated with a comma; for example "<code>x</code>", "<code>theValue</code>", or "<code>a,b</code>".</dd> + <dt><code>functionBody</code></dt> + <dd>A string containing the JavaScript statements comprising the function definition.</dd> +</dl> + +<h2 id="Description">Description</h2> + +<p><code>Function</code> objects created with the <code>Function</code> constructor are parsed when the function is created. This is less efficient than declaring a function with a <a href="/en-US/docs/Web/JavaScript/Reference/Operators/function">function expression</a> or <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function">function statement</a> and calling it within your code, because such functions are parsed with the rest of the code.</p> + +<p>All arguments passed to the function are treated as the names of the identifiers of the parameters in the function to be created, in the order in which they are passed.</p> + +<div class="note"> +<p><strong>Note:</strong> Functions created with the <code>Function</code> constructor do not create closures to their creation contexts; they always are created in the global scope. When running them, they will only be able to access their own local variables and global ones, not the ones from the scope in which the <code>Function</code> constructor was called. This is different from using {{jsxref("eval")}} with code for a function expression.</p> +</div> + +<p>Invoking the <code>Function</code> constructor as a function (without using the <code>new</code> operator) has the same effect as invoking it as a constructor.</p> + +<h2 id="Properties_and_Methods_of_Function">Properties and Methods of <code>Function</code></h2> + +<p>The global <code>Function</code> object has no methods or properties of its own, however, since it is a function itself it does inherit some methods and properties through the prototype chain from {{jsxref("Function.prototype")}}.</p> + +<h2 id="Function_prototype_object"><code>Function</code> prototype object</h2> + +<h3 id="Properties">Properties</h3> + +<div>{{page('/en-US/docs/JavaScript/Reference/Global_Objects/Function/prototype', 'Properties')}}</div> + +<h3 id="Methods">Methods</h3> + +<div>{{page('/en-US/docs/JavaScript/Reference/Global_Objects/Function/prototype', 'Methods')}}</div> + +<h2 id="Function_instances"><code>Function</code> instances</h2> + +<p><code>Function</code> instances inherit methods and properties from {{jsxref("Function.prototype")}}. As with all constructors, you can change the constructor's prototype object to make changes to all <code>Function</code> instances.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Specifying_arguments_with_the_Function_constructor">Specifying arguments with the <code>Function</code> constructor</h3> + +<p>The following code creates a <code>Function</code> object that takes two arguments.</p> + +<pre class="brush: js">// Example can be run directly in your JavaScript console + +// Create a function that takes two arguments and returns the sum of those arguments +var adder = new Function('a', 'b', 'return a + b'); + +// Call the function +adder(2, 6); +// > 8 +</pre> + +<p>The arguments "<code>a</code>" and "<code>b</code>" are formal argument names that are used in the function body, "<code>return a + b</code>".</p> + +<h3 id="A_recursive_shortcut_to_massively_modify_the_DOM">A recursive shortcut to massively modify the DOM</h3> + +<p>Creating functions with the <code>Function</code> constructor is one of the ways to dynamically create an indeterminate number of new objects with some executable code into the global scope from a function. The following example (a recursive shortcut to massively modify the DOM) is impossible without the invocation of the <code>Function</code> constructor for each new query if you want to avoid closures.</p> + +<pre class="brush: html"><!doctype html> +<html> +<head> +<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> +<title>MDN Example - a recursive shortcut to massively modify the DOM</title> +<script type="text/javascript"> +var domQuery = (function() { + var aDOMFunc = [ + Element.prototype.removeAttribute, + Element.prototype.setAttribute, + CSSStyleDeclaration.prototype.removeProperty, + CSSStyleDeclaration.prototype.setProperty + ]; + + function setSomething(bStyle, sProp, sVal) { + var bSet = Boolean(sVal), fAction = aDOMFunc[bSet | bStyle << 1], + aArgs = Array.prototype.slice.call(arguments, 1, bSet ? 3 : 2), + aNodeList = bStyle ? this.cssNodes : this.nodes; + + if (bSet && bStyle) { aArgs.push(''); } + for ( + var nItem = 0, nLen = this.nodes.length; + nItem < nLen; + fAction.apply(aNodeList[nItem++], aArgs) + ); + this.follow = setSomething.caller; + return this; + } + + function setStyles(sProp, sVal) { return setSomething.call(this, true, sProp, sVal); } + function setAttribs(sProp, sVal) { return setSomething.call(this, false, sProp, sVal); } + function getSelectors() { return this.selectors; }; + function getNodes() { return this.nodes; }; + + return (function(sSelectors) { + var oQuery = new Function('return arguments.callee.follow.apply(arguments.callee, arguments);'); + oQuery.selectors = sSelectors; + oQuery.nodes = document.querySelectorAll(sSelectors); + oQuery.cssNodes = Array.prototype.map.call(oQuery.nodes, function(oInlineCSS) { return oInlineCSS.style; }); + oQuery.attributes = setAttribs; + oQuery.inlineStyle = setStyles; + oQuery.follow = getNodes; + oQuery.toString = getSelectors; + oQuery.valueOf = getNodes; + return oQuery; + }); +})(); +</script> +</head> + +<body> + +<div class="testClass">Lorem ipsum</div> +<p>Some text</p> +<div class="testClass">dolor sit amet</div> + +<script type="text/javascript"> +domQuery('.testClass') + .attributes('lang', 'en')('title', 'Risus abundat in ore stultorum') + .inlineStyle('background-color', 'black')('color', 'white')('width', '100px')('height', '50px'); +</script> +</body> + +</html> +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.3', 'Function')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-function-objects', 'Function')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function-objects', 'Function')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Functions", "Functions and function scope")}}</li> + <li>{{jsxref("Function")}}</li> + <li>{{jsxref("Statements/function", "function statement")}}</li> + <li>{{jsxref("Operators/function", "function expression")}}</li> + <li>{{jsxref("Statements/function*", "function* statement")}}</li> + <li>{{jsxref("Operators/function*", "function* expression")}}</li> + <li>{{jsxref("GeneratorFunction")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/function/length/index.html b/files/it/web/javascript/reference/global_objects/function/length/index.html new file mode 100644 index 0000000000..6e305fb3ed --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/function/length/index.html @@ -0,0 +1,87 @@ +--- +title: Function.length +slug: Web/JavaScript/Reference/Global_Objects/Function/length +translation_of: Web/JavaScript/Reference/Global_Objects/Function/length +--- +<div>{{JSRef}}</div> + +<p>La proprietà <code><strong>length</strong></code> indica il numero di parametri che la funzione si aspetta di ricevere.</p> + +<p>{{EmbedInteractiveExample("pages/js/function-length.html")}}</p> + + + +<div>{{js_property_attributes(0,0,1)}}</div> + +<h2 id="Description">Description</h2> + +<p><code>length</code> è una proprietà di un oggetto {{jsxref("Function")}} che indica quanti argomenti la funzione si aspetta, cioè il numero di parametri formali. Questo numero esclude il {{jsxref("rest_parameters", "rest parameter", "", 1)}} e include solo i parametri prima del primo con un valore predefinito. Al contrario, {{jsxref("Functions_and_function_scope/arguments/length", "arguments.length")}} è locale a una funzione e fornisce il numero di argomenti effettivamente passati alla funzione.</p> + +<h3 id="Data_property_of_the_Function_constructor">Data property of the Function constructor</h3> + +<p>Il costruttore {{jsxref("Function")}} è esso stesso un oggetto {{jsxref("Function")}}. La sua proprietà <code>length</code> ha valore 1. Gli attributi delle proprietà sono: Writable: <code>false</code>, Enumerable: <code>false</code>, Configurable: <code>false</code>.</p> + +<h3 id="Property_of_the_Function_prototype_object">Property of the Function prototype object</h3> + +<p>La proprietà <code>length</code> del prototype di un oggetto {{jsxref("Function")}} ha valore 0.</p> + +<h2 id="Examples">Examples</h2> + +<pre class="brush: js">console.log(Function.length); /* 1 */ + +console.log((function() {}).length); /* 0 */ +console.log((function(a) {}).length); /* 1 */ +console.log((function(a, b) {}).length); /* 2 etc. */ + +console.log((function(...args) {}).length); +// 0, rest parameter is not counted + +console.log((function(a, b = 1, c) {}).length); +// 1, only parameters before the first one with +// a default value is counted</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definizione iniziale. Implementata in JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.3.5.1', 'Function.length')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-function-instances-length', 'Function.length')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Gli attributi <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">configurabili</span></font> di queste proprietà diventano <code>true</code>.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function-instances-length', 'Function.length')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Function.length")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Function")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/generator/index.html b/files/it/web/javascript/reference/global_objects/generator/index.html new file mode 100644 index 0000000000..b950dd8216 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/generator/index.html @@ -0,0 +1,187 @@ +--- +title: Generator +slug: Web/JavaScript/Reference/Global_Objects/Generator +tags: + - ECMAScript 2015 + - Generator + - JavaScript + - Legacy Generator + - Legacy Iterator + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/JavaScript/Reference/Global_Objects/Generator +--- +<div>{{JSRef}}</div> + +<p>The <code><strong>Generator</strong></code> object is returned by a {{jsxref("Statements/function*", "generator function", "", 1)}} and it conforms to both the <a href="/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#iterable">iterable protocol</a> and the <a href="/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#iterator">iterator protocol</a>.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">function* gen() { + yield 1; + yield 2; + yield 3; +} + +var g = gen(); // "Generator { }"</pre> + +<h2 id="Methods">Methods</h2> + +<dl> + <dt>{{jsxref("Generator.prototype.next()")}}</dt> + <dd>Returns a value yielded by the {{jsxref("Operators/yield", "yield")}} expression.</dd> + <dt>{{jsxref("Generator.prototype.return()")}}</dt> + <dd>Returns the given value and finishes the generator.</dd> + <dt>{{jsxref("Generator.prototype.throw()")}}</dt> + <dd>Throws an error to a generator.</dd> +</dl> + +<h2 id="Example">Example</h2> + +<h3 id="An_infinite_iterator">An infinite iterator</h3> + +<pre class="brush: js">function* idMaker() { + var index = 0; + while(true) + yield index++; +} + +var gen = idMaker(); // "Generator { }" + +console.log(gen.next().value); // 0 +console.log(gen.next().value); // 1 +console.log(gen.next().value); // 2 +// ...</pre> + +<h2 id="Legacy_generator_objects">Legacy generator objects</h2> + +<p>Firefox (SpiderMonkey) also implements an earlier version of generators in <a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.7">JavaScript 1.7</a>, where the star (*) in the function declaration was not necessary (you just use the <code>yield</code> keyword in the function body). However, legacy generators are deprecated. Do not use them; they are going to be removed ({{bug(1083482)}}).</p> + +<h3 id="Legacy_generator_methods">Legacy generator methods</h3> + +<dl> + <dt><code>Generator.prototype.next() </code>{{non-standard_inline}}</dt> + <dd>Returns a value yielded by the {{jsxref("Operators/yield", "yield")}} expression. This corresponds to <code>next()</code> in the ES2015 generator object.</dd> + <dt><code>Generator.prototype.close()</code> {{non-standard_inline}}</dt> + <dd>Closes the generator, so that when calling <code>next()</code> an {{jsxref("StopIteration")}} error will be thrown. This corresponds to the <code>return()</code> method in the ES2015 generator object.</dd> + <dt><code>Generator.prototype.send()</code> {{non-standard_inline}}</dt> + <dd>Used to send a value to a generator. The value is returned from the {{jsxref("Operators/yield", "yield")}} expression, and returns a value yielded by the next {{jsxref("Operators/yield", "yield")}} expression. <code>send(x)</code> corresponds to <code>next(x)</code> in the ES2015 generator object.</dd> + <dt><strong><code>Generator.</code></strong><code>prototype.</code><strong><code>throw()</code> </strong> {{non-standard_inline}}</dt> + <dd>Throws an error to a generator. This corresponds to the <code>throw()</code> method in the ES2015 generator object.</dd> +</dl> + +<h3 id="Legacy_generator_example">Legacy generator example</h3> + +<pre class="brush: js">function* fibonacci() { + var a = yield 1; + yield a * 2; +} + +var it = fibonacci(); +console.log(it); // "Generator { }" +console.log(it.next()); // 1 +console.log(it.send(10)); // 20 +console.log(it.close()); // undefined +console.log(it.next()); // throws StopIteration (as the generator is now closed) +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-generator-objects', 'Generator objects')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-generator-objects', 'Generator objects')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(39.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(39.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(39.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<h3 id="Legacy_generators">Legacy generators</h3> + +<ul> + <li>{{jsxref("Statements/Legacy_generator_function", "The legacy generator function", "", 1)}}</li> + <li>{{jsxref("Operators/Legacy_generator_function", "The legacy generator function expression", "", 1)}}</li> + <li>{{jsxref("StopIteration")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features/The_legacy_Iterator_protocol">The legacy Iterator protocol</a></li> +</ul> + +<h3 id="ES2015_generators">ES2015 generators</h3> + +<ul> + <li>{{jsxref("Functions", "Functions", "", 1)}}</li> + <li>{{jsxref("Statements/function", "function")}}</li> + <li>{{jsxref("Operators/function", "function expression")}}</li> + <li>{{jsxref("Function")}}</li> + <li>{{jsxref("Statements/function*", "function*")}}</li> + <li>{{jsxref("Operators/function*", "function* expression")}}</li> + <li>{{jsxref("GeneratorFunction")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol">The Iterator protocol</a></li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/generator/next/index.html b/files/it/web/javascript/reference/global_objects/generator/next/index.html new file mode 100644 index 0000000000..03408534d5 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/generator/next/index.html @@ -0,0 +1,157 @@ +--- +title: Generator.prototype.next() +slug: Web/JavaScript/Reference/Global_Objects/Generator/next +translation_of: Web/JavaScript/Reference/Global_Objects/Generator/next +--- +<div>{{JSRef}}</div> + +<p>Il metodo <code><strong>next</strong></code><strong><code>()</code></strong> ritorna un oggetto con due proprietà <code>done</code> and <code>value</code>. Puoi anche fornire un parametro al metodo next per trasmettere un valore al generatore.</p> + +<h2 id="Syntassi">Syntassi</h2> + +<pre class="syntaxbox"><code><var>gen</var>.next(value)</code></pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt><code>value</code></dt> + <dd>Il valore trasmesso al generatore</dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p>Un <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Oggetto</a> con due proprietà:</p> + +<ul> + <li><code>done</code> (boolean) + + <ul> + <li>Ha il valore <code>true</code> se l' iteratore è oltre la fine della sequenza iterata. In questo caso <code>value</code> opzionalmente specifica <em>il valore di ritorno</em> dell' iteratore.</li> + <li>Ha il valore <code>false</code> se l'iteratore è stato capace di generare il valore successivo nella sequenza. Questo equivale nello non specificare la proprietà done interamente.</li> + </ul> + </li> + <li><code>value</code> - ogni valore Javascript ritornato dall'iteratore. Può essere omesso quando done è true</li> +</ul> + +<h2 id="Examples">Examples</h2> + +<h3 id="Using_next()">Using <code>next()</code></h3> + +<p><font face="Consolas, Liberation Mono, Courier, monospace">Il seguente esempio mostra semplice generatore e un oggetto che il metodo next ritorna:</font></p> + +<pre class="brush: js">function* gen() { + yield 1; + yield 2; + yield 3; +} + +var g = gen(); // "Generator { }" +g.next(); // "Object { value: 1, done: false }" +g.next(); // "Object { value: 2, done: false }" +g.next(); // "Object { value: 3, done: false }" +g.next(); // "Object { value: undefined, done: true }" +</pre> + +<h3 id="Mandare_valori_al_generatore">Mandare valori al generatore</h3> + +<p>In questo esempio, next è stato chiamato con un valore. Nota che la prima chiamata non ha registrato nulla, perche il generatore non ha raccolto nulla inizialmente. </p> + +<p> </p> + +<pre class="brush: js">function* gen() { + while(true) { + var value = yield null; + console.log(value); + } +} + +var g = gen(); +g.next(1); +// "{ value: null, done: false }" +g.next(2); +// "{ value: null, done: false }" +// 2 +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-generator.prototype.next', 'Generator.prototype.next')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-generator.prototype.next', 'Generator.prototype.next')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>13</td> + <td>{{CompatGeckoDesktop(26)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatSafari(10)}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>5.1</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(26)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>10</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/function*">function*</a></code></li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators">Iterators and generators</a></li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/index.html b/files/it/web/javascript/reference/global_objects/index.html new file mode 100644 index 0000000000..3cddb3fc08 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/index.html @@ -0,0 +1,182 @@ +--- +title: Standard built-in objects +slug: Web/JavaScript/Reference/Global_Objects +tags: + - JavaScript + - Refernce + - TopicStub +translation_of: Web/JavaScript/Reference/Global_Objects +--- +<div>{{jsSidebar("Objects")}}</div> + +<h2 id="Summary" name="Summary">Sommario</h2> + +<p>Questo capitolo documenta tutti gli oggetti standard predefiiti di JavaScript, con i loro metodi e le loro proprietà.</p> + +<p>Il termine "oggetti globali" (o oggetti standard predefiniti) non va confuso con il termine <em>oggetto globale</em>. In questa documentazione, "oggetti globali" si riferisce agli <em>oggetti nel contesto globale</em> (ma solo se non viene utilizzata la modalità strict di ECMAScript5, altrimenti restituisce {{jsxref("Global_Objects/undefined", "undefined")}}). Si piuò accedere all'<em>oggetto globale</em> usando l'operatore {{jsxref("Operators/this", "this")}} nel contesto globale. Infatti il contesto globale consiste nell'insieme di tutte le properietà dell'<em>oggetto globale</em>.</p> + +<p>Altri oggetti nel contesto globale possono essere <a href="/it/docs/Web/JavaScript/Guide/Working_with_Objects#Creating_new_objects">creati dallo script</a> o dall'applicazione utilizzata (ad esempio, un browser). Gli oggetti forniti dal browser sono documentati nella sezione <a href="/it/docs/Web/API/Reference">API reference</a>. Per altre informazioni riguardo la differenza tra il <a href="/it/docs/DOM/DOM_Reference">DOM</a> e <a href="/it/docs/Web/JavaScript">JavaScript</a> base, vedi la <a href="/it/docs/Web/JavaScript/JavaScript_technologies_overview">panoramica sulle tecnologie JavaScript</a>.</p> + +<div class="onlyinclude"> +<h2 id="Oggetti_standard_(per_categoria)">Oggetti standard (per categoria)</h2> + +<h3 id="Valori">Valori</h3> + +<p>Varabili globali che rappresentano un valore semplice, non hanno altre proprietà o metodi.</p> + +<ul> + <li>{{jsxref("Infinity")}}</li> + <li>{{jsxref("NaN")}}</li> + <li>{{jsxref("undefined")}}</li> + <li>{{jsxref("null")}} literal</li> +</ul> + +<h3 id="Funzioni">Funzioni</h3> + +<p>Queste funzioni globali che vengono richiamate direttamente restituiscono direttamente il risultato al chiamante</p> + +<ul> + <li>{{jsxref("Global_Objects/eval", "eval()")}}</li> + <li>{{jsxref("Global_Objects/uneval", "uneval()")}} {{non-standard_inline}}</li> + <li>{{jsxref("Global_Objects/isFinite", "isFinite()")}}</li> + <li>{{jsxref("Global_Objects/isNaN", "isNaN()")}}</li> + <li>{{jsxref("Global_Objects/parseFloat", "parseFloat()")}}</li> + <li>{{jsxref("Global_Objects/parseInt", "parseInt()")}}</li> + <li>{{jsxref("Global_Objects/decodeURI", "decodeURI()")}}</li> + <li>{{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent()")}}</li> + <li>{{jsxref("Global_Objects/encodeURI", "encodeURI()")}}</li> + <li>{{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent()")}}</li> + <li>{{jsxref("Global_Objects/escape", "escape()")}} {{deprecated_inline}}</li> + <li>{{jsxref("Global_Objects/unescape", "unescape()")}} {{deprecated_inline}}</li> +</ul> + +<h3 id="Oggetti_fondamentali">Oggetti fondamentali</h3> + +<p>Oggetti generali di Javascrpt, sui quali sono basati tutti gli altri oggetti. Rappresentano oggetti, funzioni ed errori.</p> + +<ul> + <li>{{jsxref("Object")}}</li> + <li>{{jsxref("Function")}}</li> + <li>{{jsxref("Boolean")}}</li> + <li>{{jsxref("Symbol")}}</li> + <li>{{jsxref("Error")}}</li> + <li>{{jsxref("EvalError")}}</li> + <li>{{jsxref("InternalError")}}</li> + <li>{{jsxref("RangeError")}}</li> + <li>{{jsxref("ReferenceError")}}</li> + <li>{{jsxref("SyntaxError")}}</li> + <li>{{jsxref("TypeError")}}</li> + <li>{{jsxref("URIError")}}</li> +</ul> + +<h3 id="Numeri_e_date">Numeri e date</h3> + +<p>Oggetti usati per rappresentare numeri, date e calcoli matematici.</p> + +<ul> + <li>{{jsxref("Number")}}</li> + <li>{{jsxref("Math")}}</li> + <li>{{jsxref("Date")}}</li> +</ul> + +<h3 id="Elaborazione_del_testo">Elaborazione del testo</h3> + +<p>Oggetti che rappresentano le stringe o il supporto per manipolarle.</p> + +<ul> + <li>{{jsxref("String")}}</li> + <li>{{jsxref("RegExp")}}</li> +</ul> + +<h3 id="Collezioni_ordinate">Collezioni ordinate</h3> + +<p>Questi oggetti rappresentano delle collezioni di dati che sono ordinati secondo un indice. Includono array tipizzati ed costruttori simili ad array.</p> + +<ul> + <li>{{jsxref("Array")}}</li> + <li>{{jsxref("Int8Array")}}</li> + <li>{{jsxref("Uint8Array")}}</li> + <li>{{jsxref("Uint8ClampedArray")}}</li> + <li>{{jsxref("Int16Array")}}</li> + <li>{{jsxref("Uint16Array")}}</li> + <li>{{jsxref("Int32Array")}}</li> + <li>{{jsxref("Uint32Array")}}</li> + <li>{{jsxref("Float32Array")}}</li> + <li>{{jsxref("Float64Array")}}</li> +</ul> + +<h3 id="Collezioni_chiave-valore">Collezioni chiave-valore</h3> + +<p>Oggetti che rappresentano collezzioni che usano delle chiavi per identificarne gli elementi; si può iterare attraverso gli elementi nell'ordine in cui sono stati inseriti.</p> + +<ul> + <li>{{jsxref("Map")}}</li> + <li>{{jsxref("Set")}}</li> + <li>{{jsxref("WeakMap")}}</li> + <li>{{jsxref("WeakSet")}}</li> +</ul> + +<h3 id="Dati_strutturati">Dati strutturati</h3> + +<p>Oggetti che rappresentano e interagiscono con buffer di dati e con dati codificati utilizzando <em>JavaScript Object Notation</em> (JSON).</p> + +<ul> + <li>{{jsxref("ArrayBuffer")}}</li> + <li>{{jsxref("SharedArrayBuffer")}} {{experimental_inline}}</li> + <li>{{jsxref("Atomics")}} {{experimental_inline}}</li> + <li>{{jsxref("DataView")}}</li> + <li>{{jsxref("JSON")}}</li> +</ul> + +<h3 id="Oggetti_di_controllo_dell'astrazione">Oggetti di controllo dell'astrazione</h3> + +<ul> + <li>{{jsxref("Promise")}}</li> + <li>{{jsxref("Generator")}}</li> + <li>{{jsxref("GeneratorFunction")}}</li> + <li>{{experimental_inline}} {{jsxref("AsyncFunction")}}</li> +</ul> + +<h3 id="Reflection">Reflection</h3> + +<ul> + <li>{{jsxref("Reflect")}}</li> + <li>{{jsxref("Proxy")}}</li> +</ul> + +<h3 id="Internazionalizzazione">Internazionalizzazione</h3> + +<p>Oggetti aggiunti a ECMAScript per le funzionalità che dipendono dalla lingua.</p> + +<ul> + <li>{{jsxref("Intl")}}</li> + <li>{{jsxref("Global_Objects/Collator", "Intl.Collator")}}</li> + <li>{{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}}</li> + <li>{{jsxref("Global_Objects/NumberFormat", "Intl.NumberFormat")}}</li> +</ul> + +<p> </p> + +<h3 id="WebAssembly">WebAssembly</h3> + +<ul> + <li>{{jsxref("WebAssembly")}}</li> + <li>{{jsxref("WebAssembly.Module")}}</li> + <li>{{jsxref("WebAssembly.Instance")}}</li> + <li>{{jsxref("WebAssembly.Memory")}}</li> + <li>{{jsxref("WebAssembly.Table")}}</li> + <li>{{jsxref("WebAssembly.CompileError")}}</li> + <li>{{jsxref("WebAssembly.LinkError")}}</li> + <li>{{jsxref("WebAssembly.RuntimeError")}}</li> +</ul> + +<p> </p> + +<h3 id="Altro">Altro</h3> + +<ul> + <li>{{jsxref("Functions/arguments", "arguments")}}</li> +</ul> +</div> + +<p> </p> diff --git a/files/it/web/javascript/reference/global_objects/infinity/index.html b/files/it/web/javascript/reference/global_objects/infinity/index.html new file mode 100644 index 0000000000..48b983e107 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/infinity/index.html @@ -0,0 +1,114 @@ +--- +title: Infinity +slug: Web/JavaScript/Reference/Global_Objects/Infinity +translation_of: Web/JavaScript/Reference/Global_Objects/Infinity +--- +<div> +<div> +<div>{{jsSidebar("Objects")}}</div> +</div> +</div> + +<h2 id="Summary" name="Summary">Sommario</h2> + +<p>La proprietà globale <strong><code>Infinity</code></strong> è un valore numerico che rappresenta l'infinito.</p> + +<p>{{js_property_attributes(0,0,0)}}</p> + +<h2 id="Syntax" name="Syntax">Sintassi</h2> + +<pre class="syntaxbox"><code>Infinity </code></pre> + +<h2 id="Description" name="Description">Descrizione</h2> + +<p><code>Infinity</code> è una proprietà dell'<em>oggetto globale</em>, ossia una variabile nell'ambito globale.</p> + +<p>Il valore iniziale di <code>Infinity</code> è {{jsxref("Number.POSITIVE_INFINITY")}}. Il valore <code>Infinity</code> (infinito positivo) è maggiore di ogni altro numero. Matematicamente questo valore si comporta come l'infinito: per esempio, qualsiasi numero positivo moltipilicato per <code>Infinity</code> è uguale a <code>Infinity</code>, e qualsiasi numero diviso per <code>Infinity</code> è uguale a 0.</p> + +<p>Secondo la specifica ECMAScript5, <code>Infinity</code> è accessibile in sola lettura (implementato in JavaScript 1.8.5 / Firefox 4).</p> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commenti</th> + </tr> + <tr> + <td>ECMAScript 1st Edition.</td> + <td>Standard</td> + <td>Definizione iniziale. Implementato in JavaScript 1.3</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.1.1.2', 'Infinity')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-value-properties-of-the-global-object-infinity', 'Infinity')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funzionalità</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Supporto di base</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th><span style="font-family: 'Open Sans Light', sans-serif; font-size: 16px; line-height: 16px;">Funzionalità</span></th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td><span style="font-size: 12px; line-height: 18px;">Supporto di base</span></td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">Vedi anche</h2> + +<ul> + <li>{{jsxref("Number.NEGATIVE_INFINITY")}}</li> + <li>{{jsxref("Number.POSITIVE_INFINITY")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/isfinite/index.html b/files/it/web/javascript/reference/global_objects/isfinite/index.html new file mode 100644 index 0000000000..ee250b9410 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/isfinite/index.html @@ -0,0 +1,136 @@ +--- +title: isFinite() +slug: Web/JavaScript/Reference/Global_Objects/isFinite +translation_of: Web/JavaScript/Reference/Global_Objects/isFinite +--- +<div> +<div> +<div>{{jsSidebar("Objects")}}</div> +</div> +</div> + +<h2 id="Summary" name="Summary">Sommario</h2> + +<p>La funzione globale <strong><code>isFinite()</code></strong> determina se il parametro passatole è un numero finito. Se necessario, il parametro viene prima convertito in un valore numerico.</p> + +<h2 id="Syntax" name="Syntax">Sintassi</h2> + +<pre class="syntaxbox">isFinite(<em>number</em>)</pre> + +<h3 id="Parameters" name="Parameters">Parametri</h3> + +<dl> + <dt><font face="Consolas, Monaco, Andale Mono, monospace">number</font></dt> + <dd>Il valore da controllare che sia finito.</dd> +</dl> + +<h2 id="Description" name="Description">Descrizione</h2> + +<p><code>isFinite</code> è una funzione globale.</p> + +<p>Puoi usare questa funzione per determinare se un numero è finito. La funzione <code>isFinite</code> restituisce <code>false</code> se il valore passatole è {{jsxref("NaN")}}, {{jsxref("Infinity")}} (infinito positivo) o <code>-</code>{{jsxref("Infinity")}} (infinito negativo); altrimenti restituisce <code>true</code>.</p> + +<h2 id="Examples" name="Examples">Esempi</h2> + +<pre class="brush: js">isFinite(Infinity); // false +isFinite(NaN); // false +isFinite(-Infinity); // false + +isFinite(0); // true +isFinite(2e64); // true + + +isFinite("0"); // true, perché `"0"` viene convertito + // in un valore numerico, quindi + // in `0` e poi valutato. + // La funzione Number.isFinite("0"), + // più robusta, restituirebbe false. +</pre> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commenti</th> + </tr> + <tr> + <td>ECMAScript 2nd Edition.</td> + <td>Standard</td> + <td>Definizione iniziale.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.1.2.5', 'isFinite')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-isfinite-number', 'isFinite')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funzionalità</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Supporto di base</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th><span style="font-family: 'Open Sans Light', sans-serif; font-size: 16px; line-height: 16px;">Funzionalità</span></th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td><span style="font-size: 12px; line-height: 18px;">Supporto di base</span></td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_Also" name="See_Also">Vedi anche</h2> + +<ul> + <li>{{jsxref("Number.isFinite()")}}</li> + <li>{{jsxref("Number.NaN")}}</li> + <li>{{jsxref("Number.POSITIVE_INFINITY")}}</li> + <li>{{jsxref("Number.NEGATIVE_INFINITY")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/isnan/index.html b/files/it/web/javascript/reference/global_objects/isnan/index.html new file mode 100644 index 0000000000..db6ebc85d8 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/isnan/index.html @@ -0,0 +1,176 @@ +--- +title: isNaN() +slug: Web/JavaScript/Reference/Global_Objects/isNaN +translation_of: Web/JavaScript/Reference/Global_Objects/isNaN +--- +<div> +<div> +<div>{{jsSidebar("Objects")}}</div> +</div> +</div> + +<h2 id="Summary" name="Summary">Sommario</h2> + +<p>La funzione <strong><code>isNaN()</code></strong> determina se un valore è {{jsxref("NaN")}} o no.</p> + +<div class="note"> +<p><strong>Nota:</strong> le conversioni di tipo nella funzione <code>isNaN</code> seguono delle regole {{jsxref("Global_Objects/isNaN", "particolari", "#Description", 1)}}: alternativamente per determinare se un valore non è un numero si può usare la funzione {{jsxref("Number.isNaN()")}}, definito in ECMAScript 6, o l'operatore {{jsxref("Operators/typeof", "typeof")}}.</p> +</div> + +<h2 id="Syntax" name="Syntax">Sintassi</h2> + +<pre class="syntaxbox"><code>isNaN(<em>number</em>)</code></pre> + +<h3 id="Parameters" name="Parameters">Parametri</h3> + +<dl> + <dt><code>number</code></dt> + <dd>Il valore da controllare.</dd> +</dl> + +<h2 id="Description" name="Description">Descrizione</h2> + +<h3 id="The_necessity_of_an_isNaN_function" name="The_necessity_of_an_isNaN_function">La necessità di una funzione <code>isNaN()</code></h3> + +<p>A differenza di tutti gli altri valori in JavaScript, non è possibile usare gli operatori di uguaglianza (<code>==</code> e <code>===</code>) per determinare se un valore è {{jsxref("NaN")}} oppure no, perché entrambe le uguaglianze <code>NaN == NaN</code> e <code>NaN === NaN</code> vengono considerate false. Ecco perché è necessaria una funzione <code>isNaN()</code>.</p> + +<h3 id="Origin_of_NaN_values" name="Origin_of_NaN_values">L'origine del valore <code>NaN</code></h3> + +<p>Il valore <code>NaN</code> è generato da un'operazione aritmetica il cui risultato è {{jsxref("undefined")}} o un valore <em>non rappresentabile</em>. Tali valori non rappresentano necessariamente un valore oltre i limiti. <code>NaN</code> può anche essere il risultato del trasformare valori non-numerici dai quali non è possibile ottenere un numero in numeri.</p> + +<p>Per esempio, dividere zero per zero restituisce <font face="Consolas, Monaco, Andale Mono, monospace">NaN</font>, ma dividere un qualsiasi altro numero per zero no.</p> + +<h3 id="Comportamenti_particolari">Comportamenti particolari</h3> + +<p>Già dalla prima versione della specifica della funzione <code>isNaN</code>, il suo comportamento con valori non-numerici può confondere. Quando il parametro della funzione <code>isNaN</code> non è di tipo {{jsxref("Number")}}, questo viene prima trasformato in un numero. Il test per determinare se il parametro è {{jsxref("NaN")}} viene effettuato sul valore convertito. Quindi per i valori non-numerici che possono essere trasformati in un numero diverso da <code>NaN</code> la funzione restituisce <code>false</code>. La stringa vuota, per esempio, suciramente non è un numero, ma la funzione restituisce <code>false</code>. La confusione nasce dal fatto che il termine "not a number" (rappresentato da <code>NaN</code>) ha un significato per i numeri rappresentati come valori a virgola mobile IEEE-754. La funzione dovrebbe quindi essere interpretata come "È questo valore, quando convertito in un numero, un valore "Not a Number" secondo lo standard IEEE-754?"</p> + +<p>La prossima versione di ECMAScript (ES6) definiesce la funzione {{jsxref("Number.isNaN()")}}. <code>Number.isNaN()</code>, che ritorna <code>false</code> per tutti i valori non-numerici, sarà un metodo affidabile per sapere se un numero è <code>NaN</code> o no. In assenza di <code>Number.isNaN</code>, l'espressione <code>(x !== x)</code> è il metodo più affidabile per determinare se un numero è <code>NaN</code> oppure no, perché evita i falsi positivi generati dalla funzione <code>isNaN()</code>.</p> + +<h2 id="Examples" name="Examples">Esempi</h2> + +<pre class="brush: js">var x = NaN; +isNaN(x); // true +Number.isNaN(x); // true +x !== x; // true + +var x = undefined; +isNaN(x); // true, perché undefined viene convertito in NaN +Number.isNaN(x); // false +x !== x; // false + +var x = {}; +isNaN(x); // true, perché {} viene convertito in NaN +Number.isNaN(x); // false +x !== x; // false + +isNaN(true); // false, perché true viene convertito in 1 +isNaN(null); // false, perché null viene convertito in 0 +isNaN(37); // false + +// Stringhe +isNaN("37"); // false, perché "37" viene convertito in 37 +isNaN("37.37"); // false, perché "37.37" viene convertito in 37.37 +isNaN(""); // false, perché una stringa vuota viene convertita in 0 +isNaN(" "); // false, perché una stringa con soli spazi viene convertita in 0 + +// !!! Ecco un esempio di falso positivo +var x = "37ab"; +isNaN(x); // true, perché "37ab" viene convertito in NaN +Number.isNaN(x); // false +x !== x; // false + +// Date +isNaN(new Date()); // false, perché una data che viene convertita in un + // numero ritorna un valore intero + +var x = new Date().toString(); +isNaN(x); // true, perché il metodo new Date().toString() restituisce una + // stringa alfanumerica, che viene convertita in NaN +Number.isNaN(x); // false +x !== x; // false</pre> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commenti</th> + </tr> + <tr> + <td>ECMAScript 1st Edition.</td> + <td>Standard</td> + <td>Definizione iniziale.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.1.2.4', 'isNaN')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-isnan-number', 'isNaN')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funzionalità</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Supporto di base</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th><span style="font-family: open sans light,sans-serif; font-size: 16px; line-height: 16px;">Funzionalità</span></th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td><span style="font-size: 12px; line-height: 18px;">Supporto di base</span></td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">Vedi anche</h2> + +<ul> + <li>{{jsxref("NaN")}}</li> + <li>{{jsxref("Number.isNaN()")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/json/index.html b/files/it/web/javascript/reference/global_objects/json/index.html new file mode 100644 index 0000000000..caa08b766f --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/json/index.html @@ -0,0 +1,244 @@ +--- +title: JSON +slug: Web/JavaScript/Reference/Global_Objects/JSON +tags: + - JSON + - JavaScript + - NeedsTranslation + - Object + - Reference + - TopicStub + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/JSON +--- +<div>{{JSRef}}</div> + +<p>The <strong><code>JSON</code></strong> object contains methods for parsing <a class="external" href="http://json.org/">JavaScript Object Notation</a> ({{glossary("JSON")}}) and converting values to JSON. It can't be called or constructed, and aside from its two method properties it has no interesting functionality of its own.</p> + +<h2 id="Description">Description</h2> + +<h3 id="JavaScript_Object_Notation">JavaScript Object Notation</h3> + +<p>JSON is a syntax for serializing objects, arrays, numbers, strings, booleans, and {{jsxref("null")}}. It is based upon JavaScript syntax but is distinct from it: some JavaScript is not JSON, and some JSON is not JavaScript. See also <a href="http://timelessrepo.com/json-isnt-a-javascript-subset">JSON: The JavaScript subset that isn't</a>.</p> + +<table> + <caption>JavaScript and JSON differences</caption> + <thead> + <tr> + <th scope="col">JavaScript type</th> + <th scope="col">JSON differences</th> + </tr> + </thead> + <tbody> + <tr> + <td>Objects and Arrays</td> + <td>Property names must be double-quoted strings; trailing commas are forbidden.</td> + </tr> + <tr> + <td>Numbers</td> + <td>Leading zeros are prohibited; a decimal point must be followed by at least one digit.</td> + </tr> + <tr> + <td>Strings</td> + <td> + <p>Only a limited sets of characters may be escaped; certain control characters are prohibited; the Unicode line separator (<a href="http://unicode-table.com/en/2028/">U+2028</a>) and paragraph separator (<a href="http://unicode-table.com/en/2029/">U+2029</a>) characters are permitted; strings must be double-quoted. See the following example where {{jsxref("JSON.parse()")}} works fine and a {{jsxref("SyntaxError")}} is thrown when evaluating the code as JavaScript:</p> + + <pre class="brush: js"> +var code = '"\u2028\u2029"'; +JSON.parse(code); // works fine +eval(code); // fails +</pre> + </td> + </tr> + </tbody> +</table> + +<p>The full JSON syntax is as follows:</p> + +<pre><var>JSON</var> = <strong>null</strong> + <em>or</em> <strong>true</strong> <em>or</em> <strong>false</strong> + <em>or</em> <var>JSONNumber</var> + <em>or</em> <var>JSONString</var> + <em>or</em> <var>JSONObject</var> + <em>or</em> <var>JSONArray</var> + +<var>JSONNumber</var> = <strong>-</strong> <var>PositiveNumber</var> + <em>or</em> <var>PositiveNumber</var> +<var>PositiveNumber</var> = DecimalNumber + <em>or</em> <var>DecimalNumber</var> <strong>.</strong> <var>Digits</var> + <em>or</em> <var>DecimalNumber</var> <strong>.</strong> <var>Digits</var> <var>ExponentPart</var> + <em>or</em> <var>DecimalNumber</var> <var>ExponentPart</var> +<var>DecimalNumber</var> = <strong>0</strong> + <em>or</em> <var>OneToNine</var> <var>Digits</var> +<var>ExponentPart</var> = <strong>e</strong> <var>Exponent</var> + <em>or</em> <strong>E</strong> <var>Exponent</var> +<var>Exponent</var> = <var>Digits</var> + <em>or</em> <strong>+</strong> <var>Digits</var> + <em>or</em> <strong>-</strong> <var>Digits</var> +<var>Digits</var> = <var>Digit</var> + <em>or</em> <var>Digits</var> <var>Digit</var> +<var>Digit</var> = <strong>0</strong> through <strong>9</strong> +<var>OneToNine</var> = <strong>1</strong> through <strong>9</strong> + +<var>JSONString</var> = <strong>""</strong> + <em>or</em> <strong>"</strong> <var>StringCharacters</var> <strong>"</strong> +<var>StringCharacters</var> = <var>StringCharacter</var> + <em>or</em> <var>StringCharacters</var> <var>StringCharacter</var> +<var>StringCharacter</var> = any character + <em>except</em> <strong>"</strong> <em>or</em> <strong>\</strong> <em>or</em> U+0000 through U+001F + <em>or</em> <var>EscapeSequence</var> +<var>EscapeSequence</var> = <strong>\"</strong> <em>or</em> <strong>\/</strong> <em>or</em> <strong>\\</strong> <em>or</em> <strong>\b</strong> <em>or</em> <strong>\f</strong> <em>or</em> <strong>\n</strong> <em>or</em> <strong>\r</strong> <em>or</em> <strong>\t</strong> + <em>or</em> <strong>\u</strong> <var>HexDigit</var> <var>HexDigit</var> <var>HexDigit</var> <var>HexDigit</var> +<var>HexDigit</var> = <strong>0</strong> through <strong>9</strong> + <em>or</em> <strong>A</strong> through <strong>F</strong> + <em>or</em> <strong>a</strong> through <strong>f</strong> + +<var>JSONObject</var> = <strong>{</strong> <strong>}</strong> + <em>or</em> <strong>{</strong> <var>Members</var> <strong>}</strong> +<var>Members</var> = <var>JSONString</var> <strong>:</strong> <var>JSON</var> + <em>or</em> <var>Members</var> <strong>,</strong> <var>JSONString</var> <strong>:</strong> <var>JSON</var> + +<var>JSONArray</var> = <strong>[</strong> <strong>]</strong> + <em>or</em> <strong>[</strong> <var>ArrayElements</var> <strong>]</strong> +<var>ArrayElements</var> = <var>JSON</var> + <em>or</em> <var>ArrayElements</var> <strong>,</strong> <var>JSON</var> +</pre> + +<p>Insignificant whitespace may be present anywhere except within a <code><var>JSONNumber</var></code> (numbers must contain no whitespace) or <code><var>JSONString</var></code> (where it is interpreted as the corresponding character in the string, or would cause an error). The tab character (<a href="http://unicode-table.com/en/0009/">U+0009</a>), carriage return (<a href="http://unicode-table.com/en/000D/">U+000D</a>), line feed (<a href="http://unicode-table.com/en/000A/">U+000A</a>), and space (<a href="http://unicode-table.com/en/0020/">U+0020</a>) characters are the only valid whitespace characters.</p> + +<h2 id="Methods">Methods</h2> + +<dl> + <dt>{{jsxref("JSON.parse()")}}</dt> + <dd>Parse a string as JSON, optionally transform the produced value and its properties, and return the value.</dd> + <dt>{{jsxref("JSON.stringify()")}}</dt> + <dd>Return a JSON string corresponding to the specified value, optionally including only certain properties or replacing property values in a user-defined manner.</dd> +</dl> + +<h2 id="Polyfill">Polyfill</h2> + +<p>The <code>JSON</code> object is not supported in older browsers. You can work around this by inserting the following code at the beginning of your scripts, allowing use of <code>JSON</code> object in implementations which do not natively support it (like Internet Explorer 6).</p> + +<p>The following algorithm is an imitation of the native <code>JSON</code> object:</p> + +<pre class="brush: js">if (!window.JSON) { + window.JSON = { + parse: function(sJSON) { return eval('(' + sJSON + ')'); }, + stringify: (function () { + var toString = Object.prototype.toString; + var isArray = Array.isArray || function (a) { return toString.call(a) === '[object Array]'; }; + var escMap = {'"': '\\"', '\\': '\\\\', '\b': '\\b', '\f': '\\f', '\n': '\\n', '\r': '\\r', '\t': '\\t'}; + var escFunc = function (m) { return escMap[m] || '\\u' + (m.charCodeAt(0) + 0x10000).toString(16).substr(1); }; + var escRE = /[\\"\u0000-\u001F\u2028\u2029]/g; + return function stringify(value) { + if (value == null) { + return 'null'; + } else if (typeof value === 'number') { + return isFinite(value) ? value.toString() : 'null'; + } else if (typeof value === 'boolean') { + return value.toString(); + } else if (typeof value === 'object') { + if (typeof value.toJSON === 'function') { + return stringify(value.toJSON()); + } else if (isArray(value)) { + var res = '['; + for (var i = 0; i < value.length; i++) + res += (i ? ', ' : '') + stringify(value[i]); + return res + ']'; + } else if (toString.call(value) === '[object Object]') { + var tmp = []; + for (var k in value) { + if (value.hasOwnProperty(k)) + tmp.push(stringify(k) + ': ' + stringify(value[k])); + } + return '{' + tmp.join(', ') + '}'; + } + } + return '"' + value.toString().replace(escRE, escFunc) + '"'; + }; + })() + }; +} +</pre> + +<p>More complex well-known <a class="external" href="http://remysharp.com/2010/10/08/what-is-a-polyfill/">polyfills</a> for the <code>JSON</code> object are <a class="link-https" href="https://github.com/douglascrockford/JSON-js">JSON2</a> and <a class="external" href="http://bestiejs.github.com/json3">JSON3</a>.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.12', 'JSON')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-json-object', 'JSON')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>{{CompatIE("8.0")}}</td> + <td>{{CompatOpera("10.5")}}</td> + <td>{{CompatSafari("4.0")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Date.prototype.toJSON()")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/json/parse/index.html b/files/it/web/javascript/reference/global_objects/json/parse/index.html new file mode 100644 index 0000000000..f5c823ddf1 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/json/parse/index.html @@ -0,0 +1,126 @@ +--- +title: JSON.parse() +slug: Web/JavaScript/Reference/Global_Objects/JSON/parse +tags: + - ECMAScript5 + - JSON + - JavaScript + - Riferimento + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/JSON/parse +--- +<div>{{JSRef}}</div> + +<p><span class="seoSummary">Il metodo <strong><code>JSON.parse()</code></strong> analizza una stringa JSON, costruendo il valore JavaScript o l'oggetto descritto dalla stringa. È possibile fornire una funzione <strong>reviver</strong> opzionale per eseguire una trasformazione sull'oggetto risultante prima che venga restituito.</span></p> + +<div>{{EmbedInteractiveExample("pages/js/json-parse.html")}}</div> + + + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox">JSON.parse(<var>text</var>[, <var>reviver</var>])</pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt><code>text</code></dt> + <dd>La stringa da analizzare come JSON. Vedi l'oggetto {{jsxref("JSON")}} per una descrizione della sintassi JSON.</dd> + <dt><code>reviver</code> {{optional_inline}}</dt> + <dd>Se una funzione, questo prescrive come viene trasformato il valore originariamente prodotto dall'analisi, prima di essere restituito.</dd> +</dl> + +<h3 id="Valore_di_ritorno">Valore di ritorno</h3> + +<p>{{jsxref("Object")}} corrispondente al parametro JSON <code>text</code> dato.</p> + +<h3 id="Eccezione">Eccezione</h3> + +<p>Genera un errore {{jsxref("SyntaxError")}} se la stringa da analizzare non è JSON valida.</p> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Utilizzare_JSON.parse()">Utilizzare <code>JSON.parse()</code></h3> + +<pre class="brush: js">JSON.parse('{}'); // {} +JSON.parse('true'); // true +JSON.parse('"foo"'); // "foo" +JSON.parse('[1, 5, "false"]'); // [1, 5, "false"] +JSON.parse('null'); // null +</pre> + +<h3 id="Usare_il_parametro_reviver">Usare il parametro <code>reviver</code></h3> + +<p>Se viene specificato un <code>reviver</code>, il valore calcolato dall'analisi viene trasformato prima di essere restituito. In particolare, il valore calcolato e tutte le sue proprietà (che iniziano con le proprietà più nidificate e procedono al valore originale stesso) vengono eseguite individualmente attraverso il <code>reviver</code>. Quindi viene chiamato, con l'oggetto contenente la proprietà da elaborare come <code>this</code>, e con il nome della proprietà come stringa e il valore della proprietà come argomenti. Se la funzione <code>reviver</code> restituisce {{jsxref("undefined")}} (o non restituisce alcun valore, ad esempio, se l'esecuzione cade al termine della funzione), la proprietà viene cancellata dall'oggetto. In caso contrario, la proprietà viene ridefinita come il valore restituito.</p> + +<p>Se <code>reviver</code> trasforma solo alcuni valori e non altri, sii certo di restituire tutti i valori non trasformati così come sono, altrimenti verranno eliminati dall'oggetto risultante.</p> + +<pre class="brush: js">JSON.parse('{"p": 5}', (key, value) => + typeof value === 'number' + ? value * 2 // ritorna: value * 2 per i numeri + : value // restituisce tutto il resto invariato +); + +// { p: 10 } + +JSON.parse('{"1": 1, "2": 2, "3": {"4": 4, "5": {"6": 6}}}', (key, value) => { + console.log(key); // registra il nome della proprietà corrente, l'ultimo è "". + return value; // restituisce il valore della proprietà invariato. +}); + +// 1 +// 2 +// 4 +// 6 +// 5 +// 3 +// "" +</pre> + +<h3 id="JSON.parse()_non_consente_virgole_finali"><code>JSON.parse()</code> non consente virgole finali</h3> + +<pre class="example-bad brush: js example-bad">// both will throw a SyntaxError +JSON.parse('[1, 2, 3, 4, ]'); +JSON.parse('{"foo" : 1, }'); +</pre> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.12.2', 'JSON.parse')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Definizione iniziale. Implementato in JavaScript 1.7.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-json.parse', 'JSON.parse')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-json.parse', 'JSON.parse')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatiblità_con_i_browser">Compatiblità con i browser</h2> + +<div> + + +<p>{{Compat("javascript.builtins.JSON.parse")}}</p> +</div> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>{{jsxref("JSON.stringify()")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/json/stringify/index.html b/files/it/web/javascript/reference/global_objects/json/stringify/index.html new file mode 100644 index 0000000000..9a0bf5f812 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/json/stringify/index.html @@ -0,0 +1,325 @@ +--- +title: JSON.stringify() +slug: Web/JavaScript/Reference/Global_Objects/JSON/stringify +translation_of: Web/JavaScript/Reference/Global_Objects/JSON/stringify +--- +<div>{{JSRef}}</div> + +<div> </div> + +<p>Il metodo <strong><code>JSON.stringify()</code></strong> converte un oggetto o un valore JavaScript in una stringa JSON, sostituendo facoltativamente i valori se viene specificata una funzione sostitutiva o facoltativamente includendo solo le proprietà specificate se viene specificato un array replacer.</p> + +<div>{{EmbedInteractiveExample("pages/js/json-stringify.html")}}</div> + + + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><code>JSON.stringify(<var>value</var>[, <var>replacer</var>[, <var>space</var>]])</code></pre> + +<h3 id="Parametri">Parametri<a id="parametri" name="parametri"></a></h3> + +<dl> + <dt><code>value</code></dt> + <dd>Il valore da convertire in stringa JSON.</dd> + <dt><code>replacer</code>{{optional_inline}}</dt> + <dd>Una funzione che altera il processo di conversione, o un array di {{jsxref("String")}} e {{jsxref("Number")}} che contiene le proprietà dell'oggetto che devono essere incluse nella stringa JSON. Se il valore è null o non è specificato, tutte le proprietà dell'oggetto sono incluse nel risultato.</dd> + <dt><font face="Consolas, Liberation Mono, Courier, monospace"><code>space</code></font>{{optional_inline}}</dt> + <dd>Un oggetto {{jsxref("String")}} o {{jsxref("Number")}} che viene utilizzato per inserire uno spazio bianco nella stringa JSON di output a fini di leggibilità.Se questo è un <code>Number</code>, indica il numero di caratteri dello spazio da usare come spazio bianco; questo numero è limitato a 10 (se è maggiore, il valore è solo <code>10</code>).Valori inferiori a 1 indicano che non deve essere usato alcuno spazio.</dd> + <dd> + <p>Se si tratta di una <code>String</code>, la stringa (i primi 10 caratteri della stringa, se è più lunga di quella) viene utilizzata come spazio bianco. Se questo parametro non viene fornito (o è {{JSxRef("null")}}), non viene utilizzato alcuno spazio bianco.</p> + + <h3 id="Valore_di_ritorno">Valore di ritorno<a id="Valore_di_Ritorno" name="Valore_di_Ritorno"></a></h3> + + <p>Una stringa JSON che rappresenta il valore dato.</p> + + <h3 id="Eccezioni_2">Eccezioni<a id="Eccezioni" name="Eccezioni"></a></h3> + + <p>Genera un'eccezione {{JSxRef("TypeError")}} ("valore dell'oggetto ciclico") quando viene trovato un riferimento circolare.</p> + </dd> +</dl> + +<h2 id="Descrizione">Descrizione<a id="descrizione" name="descrizione"></a></h2> + +<p><code>JSON.stringify()</code> converte un valore in notazione JSON che lo rappresenta:</p> + +<ul> + <li>Se il valore ha un metodo <a href="https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify#Comportamento_di_toJSON()">toJSON()</a> è responsabile definire quali dati verranno serializzati.</li> + <li>Gli oggetti {{JSxRef("Boolean")}}, {{JSxRef("Number")}}, e {{JSxRef("String")}} vengono convertiti ai corrispondenti valori primitivi durante la stringificazione, in accordo con la semantica di conversione tradizionale.</li> + <li>Se si incontrano {{JSxRef("undefined")}}, una {{JSxRef("Function")}}, o un {{JSxRef("Symbol")}} durante la conversione, viene omesso (quando viene trovato in un oggetto) o viene censurato {{JSxRef("null")}} (quando viene trovato in un array). <code>JSON.stringify()</code> può anche restituire <code>undefined</code> quando si passa in valori "puri" come <code>JSON.stringify(function(){})</code> o <code>JSON.stringify(undefined)</code>.</li> + <li>Tutte le proprietà <a href="https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Global_Objects/Symbol" title='The Symbol() function returns a value of type symbol, has static properties that expose several members of built-in objects, has static methods that expose the global symbol registry, and resembles a built-in object class but is incomplete as a constructor because it does not support the syntax "new Symbol()".'><code>Symbol</code></a>-keyed <font><font>saranno completamente ignorate, anche quando si utilizza la funzione </font></font><code>replacer</code><font><font>.</font></font></li> + <li><font><font>Le istanze di </font></font><a href="https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Global_Objects/Date" title="Crea un'istanza Date JavaScript che rappresenta un singolo momento nel tempo. Gli oggetti data sono basati su un valore temporale che è il numero di millisecondi dal 1 ° gennaio 1970 UTC."><code>Date</code></a> <font><font>implementano la funzione </font></font><code>toJSON()</code><font><font> restituendo una stringa (la stessa di </font></font><code>date.toISOString()</code><font><font>). </font><font>Quindi, sono trattati come stringhe.</font></font></li> +</ul> + +<pre class="brush: js">JSON.stringify({}); // '{}' +JSON.stringify(true); // 'true' +JSON.stringify('foo'); // '"foo"' +JSON.stringify([1, 'false', false]); // '[1,"false",false]' +JSON.stringify({ x: 5 }); // '{"x":5}' + +JSON.stringify({ x: 5, y: 6 }); +// '{"x":5,"y":6}' or '{"y":6,"x":5}' +JSON.stringify([new Number(1), new String('false'), new Boolean(false)]); +// '[1,"false",false]' + +// Simboli: +JSON.stringify({ x: undefined, y: Object, z: Symbol('') }); +// '{}' +JSON.stringify({ [Symbol('foo')]: 'foo' }); +// '{}' +JSON.stringify({ [Symbol.for('foo')]: 'foo' }, [Symbol.for('foo')]); +// '{}' +JSON.stringify({ [Symbol.for('foo')]: 'foo' }, function(k, v) { + if (typeof k === 'symbol') { + return 'a symbol'; + } +}); +// '{}' + +// Proprietà non enumerabili: +JSON.stringify( Object.create(null, { x: { value: 'x', enumerable: false }, y: { value: 'y', enumerable: true } }) ); +// '{"y":"y"}' + +</pre> + +<h3 id="Il_parametro_replacer">Il parametro <code>replacer</code></h3> + +<p><font><font>Il parametro </font></font><code>replacer</code><font><font> può essere una funzione o un array.</font></font></p> + +<p><strong><font><font>Come una funzione</font></font></strong><font><font>, prende due parametri: la </font></font><var><font><font>chiave</font></font></var><font><font> e il </font></font><var><font><font>valore che si</font></font></var><font><font> sta stringendo. </font><font>L'oggetto in cui è stata trovata la chiave viene fornito come il parametro </font></font><code>this</code><font><font> </font><font>del replacer.</font></font></p> + +<p><font><font>Inizialmente, la funzione <code>replacer</code> viene chiamata con una stringa vuota come chiave che rappresenta l'oggetto da stringificare. Viene quindi chiamato per ogni proprietà sull'oggetto o sull'array da stringificare.</font></font></p> + +<ul> + <li>Se si restituisce un {{jsxref("Number")}}, la stringa corrispondente a quel numero viene utilizzata come valore per la proprietà quando viene aggiunta alla stringa JSON.</li> + <li>Se si restituisce una {{jsxref("String")}}, tale stringa viene utilizzata come valore della proprietà quando viene aggiunta alla stringa JSON.</li> + <li>Se si restituisce un {{jsxref("Boolean")}}, "true" o "false" viene utilizzato come valore della proprietà, come appropriato, quando viene aggiunto alla stringa JSON.</li> + <li><font><font>Se torni </font></font><code>null</code><font><font>, </font></font><code>null</code> <font><font>verrà aggiunto alla stringa JSON.</font></font></li> + <li>Se si restituisce un qualsiasi altro oggetto, <font><font>l'oggetto viene ricorsivamente stringa nella stringa JSON, chiamando la funzione </font></font><code>replacer</code><font><font> su ogni proprietà, a meno che l'oggetto non sia una funzione, nel qual caso non viene aggiunto nulla alla stringa JSON.</font></font></li> + <li>Se si restituisce <code>undefined</code>, la proprietà non è inclusa (cioè filtrata) nella stringa JSON di output.</li> +</ul> + +<div class="note"><strong>Nota:</strong> N<font><font>on è possibile utilizzare la </font></font><code>replacer</code><font><font>funzione per rimuovere i valori da una matrice. </font><font>Se si restituisce </font></font><code>undefined</code><font><font>o una funzione, </font></font><code>null</code><font><font>viene invece utilizzata.</font></font></div> + +<div class="note">Se desideri che il replacer distingua un oggetto iniziale da una chiave con una proprietà stringa vuota (poiché entrambi fornirebbero la stringa vuota come chiave e potenzialmente un oggetto come valore), sarà necessario tenere traccia del conteggio dell'iterazione (se è al di là della prima iterazione, è una vera e propria chiave di stringa vuota).</div> + +<h4 id="Esempio_di_replacer_come_funzione">Esempio di <em>replacer, </em>come funzione</h4> + +<pre><code>function replacer(key, value) { + // Filtraggio delle proprietà + if (typeof value === 'string') { + return undefined; + } + return value; +} + +var foo = {foundation: 'Mozilla', model: 'box', week: 45, transport: 'car', month: 7}; +JSON.stringify(foo, replacer); +// Risultato: '{"week":45,"month":7}'</code> +</pre> + +<h4 id="Esempio_di_replacer_come_array">Esempio di <em>replacer</em>, come array</h4> + +<p><font><font>Se </font></font><code>replacer</code> <font><font>è un array, i valori dell'array indicano i nomi delle proprietà nell'oggetto che dovrebbero essere incluse nella stringa JSON risultante.</font></font></p> + +<pre class="brush: js">JSON.stringify(foo, ['week', 'month']); +// '{"week":45,"month":7}', mantiene solo le proprietà "week" e "month" +</pre> + +<h3 id="Il_parametro_space">Il parametro <code>space<a id="parametro_space" name="parametro_space"></a></code></h3> + +<p><font><font>L'argomento </font></font><code>space</code><font><font> può essere usato per controllare la spaziatura nella stringa finale.</font></font></p> + +<ul> + <li><strong><font><font>Se si tratta di un numero</font></font></strong><font><font>, i livelli successivi nella stringa verranno rientrati da questi caratteri di spazio (fino a 10).</font></font></li> + <li><strong><font><font>Se è una stringa</font></font></strong><font><font>, i livelli successivi saranno rientrati da questa stringa (o dai primi dieci caratteri di essa).</font></font></li> +</ul> + +<pre><code>JSON.stringify({ a: 2 }, null, ' '); +// '{ +// "a": 2 +// }'</code></pre> + +<p>L'utilizzo di un carattere di tabulazione simula l'aspetto standard di tipo "pretty-print":</p> + +<pre class="brush: js">JSON.stringify({ uno: 1, dos: 2 }, null, '\t'); +// restituisce la stringa: +// '{ +// "uno": 1, +// "dos": 2 +// }' +</pre> + +<h3 id="Comportamento_di_toJSON()">Comportamento di <code>toJSON()</code><a id="comportamento_tojson" name="comportamento_tojson"></a></h3> + +<p><font><font>Se un oggetto da stringificare ha una proprietà denominata il </font></font><code>toJSON</code> <font><font>cui valore è una funzione, il metodo </font></font><code>toJSON()</code> <font><font>personalizza il comportamento di stringificazione JSON: invece dell'oggetto serializzato, il valore restituito dal metodo </font></font><code>toJSON()</code> <font><font>quando chiamato verrà serializzato. </font></font><code>JSON.stringify()</code> <font><font>chiama </font></font><code>toJSON</code> <font><font>con un parametro:</font></font></p> + +<ul> + <li><font><font>se questo oggetto è un valore di proprietà, il nome della proprietà</font></font></li> + <li><font><font>se è in una matrice, l'indice nella matrice, come una stringa</font></font></li> + <li><font><font>una stringa vuota se è </font></font><code>JSON.stringify()</code> <font><font>stata richiamata direttamente su questo oggetto</font></font></li> +</ul> + +<p>Per esempio:</p> + +<pre><code>var obj = { + data: 'data', + + toJSON(key){ + if(key) + return `Ora sono un oggetto nidificato sotto chiave '${key}'`; + + else + return this; + } +}; + +JSON.stringify(obj); +// '{"data":"data"}' + +JSON.stringify({ obj }) +// '{"obj":"Ora sono un oggetto nidificato sotto chiave 'obj'"}' + +JSON.stringify([ obj ]) +// '["Ora sono un oggetto nidificato sotto chiave '0'"]'</code> +</pre> + +<h3 id="Problema_con_JSON.stringify()_durante_la_serializzazione_di_riferimenti_circolari">Problema con <code>JSON.stringify()</code> durante la serializzazione di riferimenti circolari</h3> + +<p>Nota che poiché il <a href="https://www.json.org/">Formato JSON</a> non supporta i riferimenti agli oggetti (sebbene <a href="http://tools.ietf.org/html/draft-pbryan-zyp-json-ref-03">esista una bozza IETF</a>), {{JSxRef("TypeError")}} verrà generato un se si tenta di codificare un oggetto con riferimenti circolari.</p> + +<pre class="brush: js example-bad">const circularReference = {}; +circularReference.myself = circularReference; + +// La serializzazione dei riferimenti circolari genera "TypeError: valore dell'oggetto ciclico" +JSON.stringify(circularReference); +</pre> + +<p>Per serializzare i riferimenti circolari è possibile utilizzare una libreria che li supporta (ad es. <a href="https://github.com/douglascrockford/JSON-js/blob/master/cycle.js">cycle.js</a> di Douglas Crockford) o implementare una soluzione autonomamente, che richiederà la ricerca e la sostituzione (o la rimozione) dei riferimenti ciclici mediante valori serializzabili.</p> + +<h3 id="Problema_con_plain_JSON.stringify_per_l'uso_come_JavaScript"><font><font>Problema con plain </font></font> <code>JSON.stringify</code> per l'uso come JavaScript</h3> + +<p>Storicamente, JSON <a href="http://timelessrepo.com/json-isnt-a-javascript-subset">non era un sottoinsieme completamente rigido di JavaScript</a>. <font>I punti del codice letterale U + 2028 LINE SEPARATOR e U + 2029 PARAGRAPH SEPARATOR potrebbero apparire letteralmente in stringhe letterali e nomi di proprietà nel testo JSON. </font><font>Ma non potevano apparire letteralmente in un contesto simile nel testo JavaScript - solo usando escape Unicode come</font> <code>\u2028</code> e <code>\u2029</code>. Questo è cambiato di recente: ora entrambi i punti di codice possono apparire letteralmente nelle stringhe in JSON e JavaScript entrambi.</p> + +<p><font><font>Pertanto, se è richiesta la compatibilità con i motori JavaScript precedenti, è pericoloso sostituire direttamente la stringa restituita da </font></font><code>JSON.stringify</code> <font><font>una stringa JavaScript da passare a </font></font><code>eval</code> <font><font>o </font></font><code>new Function</code> <font><font>o come parte di un </font><font>URL </font></font><a href="https://en.wikipedia.org/wiki/JSONP" rel="noopener"><font><font>JSONP</font></font></a><font><font> e può essere utilizzata la seguente utility:</font></font></p> + +<pre class="brush: js">function jsFriendlyJSONStringify (s) { + return JSON.stringify(s). + replace(/\u2028/g, '\\u2028'). + replace(/\u2029/g, '\\u2029'); +} + +var s = { + a: String.fromCharCode(0x2028), + b: String.fromCharCode(0x2029) +}; +try { + eval('(' + JSON.stringify(s) + ')'); +} catch (e) { + console.log(e); // "SyntaxError: unterminated string literal" +} + +// No need for a catch +eval('(' + jsFriendlyJSONStringify(s) + ')'); + +// console.log in Firefox scolla l'Unicode se +// connesso alla console, quindi usiamo alert +alert(jsFriendlyJSONStringify(s)); // {"a":"\u2028","b":"\u2029"} +</pre> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: N<font>on è garantito che le proprietà degli oggetti non array vengano sottoposte a stringa in qualsiasi ordine particolare. </font><font>Non fare affidamento sull'ordinamento di proprietà all'interno dello stesso oggetto all'interno della stringa.</font></p> +</div> + +<pre class="brush: js">var a = JSON.stringify({ foo: "bar", baz: "quux" }) +//'{"foo":"bar","baz":"quux"}' +var b = JSON.stringify({ baz: "quux", foo: "bar" }) +//'{"baz":"quux","foo":"bar"}' +console.log(a !== b) // true + +// alcune funzioni di memoizzazione usano JSON.stringify per serializzare gli argomenti, +// mancando la cache quando si incontra lo stesso oggetto come sopra +</pre> + +<h3 id="Esempio_di_utilizzo_JSON.stringify()_con_localStorage">Esempio di utilizzo <code>JSON.stringify()</code> con <code>localStorage</code></h3> + +<p><font><font>Nel caso in cui desideri archiviare un oggetto creato dall'utente e consentirne il ripristino anche dopo la chiusura del browser, nell'esempio seguente è disponibile un modello per l'applicabilità di </font></font><code>JSON.stringify()</code><font><font>:</font></font></p> + +<pre class="brush: js">// Creare un esempio di JSON +var session = { + 'screens': [], + 'state': true +}; +session.screens.push({ 'name': 'screenA', 'width': 450, 'height': 250 }); +session.screens.push({ 'name': 'screenB', 'width': 650, 'height': 350 }); +session.screens.push({ 'name': 'screenC', 'width': 750, 'height': 120 }); +session.screens.push({ 'name': 'screenD', 'width': 250, 'height': 60 }); +session.screens.push({ 'name': 'screenE', 'width': 390, 'height': 120 }); +session.screens.push({ 'name': 'screenF', 'width': 1240, 'height': 650 }); + +// Conversione della stringa JSON con JSON.stringify() +// quindi salva con localStorage nel nome della sessione +localStorage.setItem('session', JSON.stringify(session)); + +// Esempio di come trasformare la stringa generata tramite +// JSON.stringify() e salvare nuovamente in localStorage nell'oggetto JSON +var restoredSession = JSON.parse(localStorage.getItem('session')); + +// Ora la variabile restoreSession contiene l'oggetto che è stato salvato +// in localStorage +console.log(restoredSession); +</pre> + +<h3 id="Well-formed_JSON.stringify()">Well-formed <code>JSON.stringify()</code></h3> + +<p>Engines implementing the <a href="https://github.com/tc39/proposal-well-formed-stringify">well-formed JSON.stringify specification</a> will stringify lone surrogates -- any code point from U+D800 to U+DFFF -- using Unicode escape sequences rather than literally. Before this change <code>JSON.stringify</code> would output lone surrogates if the input contained any lone surrogates; such strings could not be encoded in valid UTF-8 or UTF-16:</p> + +<pre class="brush: js; no-line-numbers">JSON.stringify("\uD800"); // '"�"'</pre> + +<p><font><font>Ma con questo cambiamento </font></font><code>JSON.stringify</code> <font><font>rappresentano surrogati solitari usando sequenze di escape JSON che </font></font><em><font><font>possono</font></font></em><font><font> essere codificate in UTF-8 o UTF-16 validi:</font></font></p> + +<pre class="brush: js; no-line-numbers">JSON.stringify("\uD800"); // '"\\ud800"'</pre> + +<p><font><font>Questo cambiamento dovrebbe essere retrocompatibile fin tanto che si passa il risultato di </font></font><code>JSON.stringify</code> <font><font>API come </font></font><code>JSON.parse</code> <font><font>quella che accetterà qualsiasi testo JSON valido, in quanto tratterà le escape Unicode dei surrogati soli come identici ai surrogati solitari stessi. </font></font><em><font><font>Solo</font></font></em><font><font> se stai interpretando direttamente il risultato di </font></font><code>JSON.stringify</code> <font><font>hai bisogno di gestire attentamente </font></font><code>JSON.stringify</code> <font><font>le due possibili codifiche di questi punti di codice.</font></font></p> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.12.3', 'JSON.stringify')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Definzione iniziale. Implementato su JavaScript 1.7.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-json.stringify', 'JSON.stringify')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-json.stringify', 'JSON.stringify')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatiblità_con_i_browser">Compatiblità con i browser</h2> + +<div> + + +<p>{{Compat("javascript.builtins.JSON.stringify")}}</p> +</div> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>{{JSxRef("JSON.parse()")}}</li> + <li><a href="https://github.com/douglascrockford/JSON-js/blob/master/cycle.js">cycle.js</a> – Presenta due funzioni: <code>JSON.decycle</code> e <code>JSON.retrocycle</code>. Esse consentono la codifica e la decodifica di strutture cicliche e DAG in un formato JSON esteso e retrocompatibile.</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/map/clear/index.html b/files/it/web/javascript/reference/global_objects/map/clear/index.html new file mode 100644 index 0000000000..85918279ad --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/map/clear/index.html @@ -0,0 +1,76 @@ +--- +title: Map.prototype.clear() +slug: Web/JavaScript/Reference/Global_Objects/Map/clear +tags: + - ECMAScript 2015 + - JavaScript + - Map + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/Map/clear +--- +<div>{{JSRef}}</div> + +<p>Il metodo <code><strong>clear()</strong></code> rimuove tutti gli elementi di un oggetto <code>Map</code>.</p> + +<div>{{EmbedInteractiveExample("pages/js/map-prototype-clear.html")}}</div> + + + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><code><em>myMap</em>.clear();</code></pre> + +<h3 id="Valore_di_ritorno">Valore di ritorno</h3> + +<p>{{jsxref("undefined")}}.</p> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Utilizzare_il_metodo_clear">Utilizzare il metodo <code>clear</code></h3> + +<pre class="brush: js">var myMap = new Map(); +myMap.set('bar', 'baz'); +myMap.set(1, 'foo'); + +myMap.size; // 2 +myMap.has('bar'); // true + +myMap.clear(); + +myMap.size; // 0 +myMap.has('bar') // false +</pre> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-map.prototype.clear', 'Map.prototype.clear')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Definizione iniziale.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-map.prototype.clear', 'Map.prototype.clear')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_Browser">Compatibilità Browser</h2> + + + +<p>{{Compat("javascript.builtins.Map.clear")}}</p> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>{{jsxref("Map")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/map/delete/index.html b/files/it/web/javascript/reference/global_objects/map/delete/index.html new file mode 100644 index 0000000000..18c511b3eb --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/map/delete/index.html @@ -0,0 +1,74 @@ +--- +title: Map.prototype.delete() +slug: Web/JavaScript/Reference/Global_Objects/Map/delete +translation_of: Web/JavaScript/Reference/Global_Objects/Map/delete +--- +<div>{{JSRef}}</div> + +<p><code>Il metodo</code><strong><code>delete()</code></strong> rimuove l'elemento specificato da un oggetto <code>Map</code> selezionandolo in base alla chiave.</p> + +<div>{{EmbedInteractiveExample("pages/js/map-prototype-delete.html")}}</div> + +<p class="hidden">Il codice sorgente per questo esempio interattivo è contenuto in un repository GitHub. Nel caso in cui tu voglia contribuire al progetto esempi interattivi, clona <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> e sottometti una pull request.</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><var>myMap</var>.delete(<var>key</var>);</pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt><code>key</code></dt> + <dd>La chiave dell'elemento da rimuovere dall'oggetto <code>Map</code>.</dd> +</dl> + +<h3 id="Valore_ritornato">Valore ritornato</h3> + +<p><code>true</code> se un elemento con la chiave specificata esisteva nell'oggetto <code>Map</code> ed è stato ora rimosso, o <code>false</code> se non esisteva alcun elemento con la chiave specificata.</p> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Usare_delete">Usare <code>delete()</code></h3> + +<pre class="brush: js">var myMap = new Map(); +myMap.set('bar', 'foo'); + +myMap.delete('bar'); // Ritorna true. Rimosso con successo. +myMap.has('bar'); // Ritorna false. L'elemento "bar" non è più presente. +</pre> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-map.prototype.delete', 'Map.prototype.delete')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-map.prototype.delete', 'Map.prototype.delete')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + +<div class="hidden">La tabella di compatibilità contenuta in questa pagina è generata da dati strutturati. Per contribuire ai dati fai il check out del repository <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e sottometti una pull request.</div> + +<p>{{Compat("javascript.builtins.Map.delete")}}</p> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>{{jsxref("Map")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/map/foreach/index.html b/files/it/web/javascript/reference/global_objects/map/foreach/index.html new file mode 100644 index 0000000000..ab1c69a310 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/map/foreach/index.html @@ -0,0 +1,88 @@ +--- +title: Map.prototype.forEach() +slug: Web/JavaScript/Reference/Global_Objects/Map/forEach +tags: + - ECMAScript 2015 + - JavaScript + - Map + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/Map/forEach +--- +<div>{{JSRef}}</div> + +<p>Il metodo <code><strong>forEach() </strong></code>esegue una funzione fornita come argomento una volta per ogni coppia <code>key/value</code> nell'oggetto <code>Map</code>, secondo l'ordine dell'inseriemento dei valori.</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><code><em>myMap</em>.forEach(<em>callback</em>[, <em>thisArg</em>])</code></pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Funzione da eseguire per ogni elemento.</dd> + <dt><code>thisArg</code></dt> + <dd>Valore da usare come <code>this</code> quando si esegue <code>callback</code>.</dd> +</dl> + +<h2 id="Descrizione">Descrizione</h2> + +<p>Il metodo <code>forEach</code> esegue il <code>callback</code> passato come parametro una volta per ogni <em>key</em> della <em>map</em> esistente. Non è invocato per <em>key</em> che sono state cancellate. Comunque, è invocato per valori che sono presenti ma hanno valore <code>undefined</code>.</p> + +<p><code>callback </code>è invocato con <strong>tre argomenti</strong><code>:</code></p> + +<ul> + <li>il <strong>valore</strong> dell'<strong>elemento</strong></li> + <li>la <strong>chiave</strong> dell'<strong>elemento</strong></li> + <li>l'oggetto <strong><code>Map</code> </strong>su cui si sta eseguendo il ciclo</li> +</ul> + +<p>Se il parametro <code>thisArg</code> è fornito al <code>forEach</code>, sarà passato al <code>callback</code> quando viene invocato, per essere usato come suo valore <code>this</code>. In caso contrario, sarà passato il valore <code>undefined</code> per essere usato come valore <code>this</code>. Il valore <code>this </code>visibile definitivamente dal <code>callback</code>è determinato secondo le <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">normali regole per determinare il this visibile da una funzione</a>.</p> + +<p>Il range di elementi processati da <code>forEach</code> è determinato anteriormente alla prima invocazione del <code>callback</code>. Gli elementi che sono aggiunti all'oggetto <code>Map</code> dopo che la chiamata a <code>forEach</code> inizi non saranno visitati dal <code>callback</code>. Se eleemnti esistenti dell'oggetto <code>Map</code> vengono cambiati, o cancellati, il loro valore passato al <code>callback</code> sarà il valore nel momento in cui il <code>forEach</code> li visita; elementi che vengono cancellati non sono visitati.</p> + +<p><code>forEach</code> esegue la funzione <code>callback</code> una volta per ogni elemento nell'oggetto <code>Map</code>; non restituisce alcun valore.</p> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Stampare_il_contenuto_di_un_oggetto_Map"><code>Stampare il contenuto di un oggetto Map</code></h3> + +<p>Il seguente codice stampa nella console una riga per ogni elemento in un oggetto<code> Map</code>:</p> + +<pre class="brush:js">function logMapElements(value, key, map) { + console.log("m[" + key + "] = " + value); +} +Map([["foo", 3], ["bar", {}], ["baz", undefined]]).forEach(logMapElements); +// logs: +// "m[foo] = 3" +// "m[bar] = [object Object]" +// "m[baz] = undefined" +</pre> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-map.prototype.foreach', 'Map.prototype.forEach')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Definizione iniziale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_dei_browser">Compatibilità dei browser</h2> + +<p>{{Compat("javascript.builtins.Map.forEach")}}</p> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li>{{jsxref("Set.prototype.forEach()")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/map/index.html b/files/it/web/javascript/reference/global_objects/map/index.html new file mode 100644 index 0000000000..58ee676d23 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/map/index.html @@ -0,0 +1,439 @@ +--- +title: Map +slug: Web/JavaScript/Reference/Global_Objects/Map +tags: + - ECMAScript6 + - Experimental + - JavaScript + - Map + - NeedsTranslation + - TopicStub +translation_of: Web/JavaScript/Reference/Global_Objects/Map +--- +<div>{{JSRef}}</div> + +<p>The <strong><code>Map</code></strong> object is a simple key/value map. Any value (both objects and {{Glossary("Primitive", "primitive values")}}) may be used as either a key or a value.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code>new Map([iterable]) +</code></pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>iterable</code></dt> + <dd>Iterable is an Array or other iterable object whose elements are key-value pairs (2-element Arrays). Each key-value pair is added to the new Map. <code>null</code> is treated as <code>undefined</code>.</dd> +</dl> + +<h2 id="Description">Description</h2> + +<p>A Map object iterates its elements in insertion order — a {{jsxref("Statements/for...of", "for...of")}} loop returns an array of <code>[key, value]</code> for each iteration.</p> + +<h3 id="Key_equality">Key equality</h3> + +<p>Key equality is based on the "same-value" algorithm: <code>NaN</code> is considered the same as <code>NaN</code> (even though <code>NaN !== NaN</code>) and all other values are considered equal according to the semantics of the === operator. In earlier versions of the ECMAScript 6 draft <code>-0</code> and <code>+0</code> were considered distinct (even though <code>-0 === +0</code>), this has been changed in later versions and has been adapted in Gecko 29 {{geckoRelease("29")}} ({{bug("952870")}}) and a <a href="https://code.google.com/p/v8/issues/detail?id=3069">recent nightly Chrome</a>.</p> + +<h3 id="Objects_and_maps_compared">Objects and maps compared</h3> + +<p>{{jsxref("Object", "Objects")}} are similar to <code>Maps</code> in that both let you set keys to values, retrieve those values, delete keys, and detect whether something is stored at a key. Because of this (and because there were no built-in alternatives), <code>Objects</code> have been used as <code>Maps</code> historically; however, there are important differences between <code>Objects</code> and <code>Maps</code> that make using a <code>Map</code> better:</p> + +<ul> + <li>An <code>Object</code> has a prototype, so there are default keys in the map. This could be bypassed by using <code>map = Object.create(null)</code> since ES5, but was seldomly done.</li> + <li>The keys of an <code>Object</code> are {{jsxref("String", "Strings")}} and {{jsxref("Symbol", "Symbols")}}, where they can be any value for a <code>Map</code>.</li> + <li>You can get the size of a <code>Map</code> easily while you have to manually keep track of size for an <code>Object</code>.</li> +</ul> + +<p>This does not mean you should use <code>Map</code>s everywhere, objects still are used in most cases. <code>Map</code> instances are only useful for collections, and you should consider adapting your code where you have previously used objects for such. Objects shall be used as records, with fields and methods.<br> + If you're still not sure which one to use, ask yourself the following questions:</p> + +<ul> + <li>Are keys usually unknown until run time, do you need to look them up dynamically?</li> + <li>Do all values have the same type, and can be used interchangeably?</li> + <li>Do you need keys that aren't strings?</li> + <li>Are key-value pairs often added or removed?</li> + <li>Do you have an arbitrary (easily changing) amount of key-value pairs?</li> + <li>Is the collection iterated?</li> +</ul> + +<p>Those all are signs that you want a <code>Map</code> for a collection. If in contrast you have a fixed amount of keys, operate on them individually, and distinguish between their usage, then you want an object.</p> + +<h2 id="Properties">Properties</h2> + +<dl> + <dt><code>Map.length</code></dt> + <dd>The value of the <code>length</code> property is 0.</dd> + <dt>{{jsxref("Map.@@species", "get Map[@@species]")}}</dt> + <dd>The constructor function that is used to create derived objects.</dd> + <dt>{{jsxref("Map.prototype")}}</dt> + <dd>Represents the prototype for the <code>Map</code> constructor. Allows the addition of properties to all <code>Map</code> objects.</dd> +</dl> + +<h2 id="Map_instances"><code>Map</code> instances</h2> + +<p>All <code>Map</code> instances inherit from {{jsxref("Map.prototype")}}.</p> + +<h3 id="Properties_2">Properties</h3> + +<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/Map/prototype','Properties')}}</p> + +<h3 id="Methods">Methods</h3> + +<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/Map/prototype','Methods')}}</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Using_the_Map_object">Using the <code>Map</code> object</h3> + +<pre class="brush: js">var myMap = new Map(); + +var keyString = "a string", + keyObj = {}, + keyFunc = function () {}; + +// setting the values +myMap.set(keyString, "value associated with 'a string'"); +myMap.set(keyObj, "value associated with keyObj"); +myMap.set(keyFunc, "value associated with keyFunc"); + +myMap.size; // 3 + +// getting the values +myMap.get(keyString); // "value associated with 'a string'" +myMap.get(keyObj); // "value associated with keyObj" +myMap.get(keyFunc); // "value associated with keyFunc" + +myMap.get("a string"); // "value associated with 'a string'" + // because keyString === 'a string' +myMap.get({}); // undefined, because keyObj !== {} +myMap.get(function() {}) // undefined, because keyFunc !== function () {} +</pre> + +<h3 id="Using_NaN_as_Map_keys">Using <code>NaN</code> as <code>Map</code> keys</h3> + +<p><code>NaN</code> can also be used as a key. Even though every <code>NaN</code> is not equal to itself (<code>NaN !== NaN</code> is true), the following example works, because <code>NaN</code>s are indistinguishable from each other:</p> + +<pre class="brush: js">var myMap = new Map(); +myMap.set(NaN, "not a number"); + +myMap.get(NaN); // "not a number" + +var otherNaN = Number("foo"); +myMap.get(otherNaN); // "not a number" +</pre> + +<h3 id="Iterating_Maps_with_for..of">Iterating <code>Maps</code> with <code>for..of</code></h3> + +<p>Maps can be iterated using a <code>for..of</code> loop:</p> + +<pre class="brush: js">var myMap = new Map(); +myMap.set(0, "zero"); +myMap.set(1, "one"); +for (var [key, value] of myMap) { + console.log(key + " = " + value); +} +// Will show 2 logs; first with "0 = zero" and second with "1 = one" + +for (var key of myMap.keys()) { + console.log(key); +} +// Will show 2 logs; first with "0" and second with "1" + +for (var value of myMap.values()) { + console.log(value); +} +// Will show 2 logs; first with "zero" and second with "one" + +for (var [key, value] of myMap.entries()) { + console.log(key + " = " + value); +} +// Will show 2 logs; first with "0 = zero" and second with "1 = one" +</pre> + +<h3 id="Iterating_Maps_with_forEach()">Iterating <code>Maps</code> with <code>forEach()</code></h3> + +<p>Maps can be iterated using the <code>forEach()</code> method:</p> + +<pre class="brush: js">myMap.forEach(function(value, key) { + console.log(key + " = " + value); +}, myMap) +// Will show 2 logs; first with "0 = zero" and second with "1 = one" +</pre> + +<h3 id="Relation_with_Array_objects">Relation with <code>Array</code> objects</h3> + +<pre class="brush: js">var kvArray = [["key1", "value1"], ["key2", "value2"]]; + +// Use the regular Map constructor to transform a 2D key-value Array into a map +var myMap = new Map(kvArray); + +myMap.get("key1"); // returns "value1" + +// Use the spread operator to transform a map into a 2D key-value Array. +console.log(uneval([...myMap])); // Will show you exactly the same Array as kvArray + +// Or use the spread operator on the keys or values iterator to get +// an array of only the keys or values +console.log(uneval([...myMap.keys()])); // Will show ["key1", "key2"] +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-map-objects', 'Map')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td> + <p>{{ CompatChrome(38) }} [1]</p> + </td> + <td>{{ CompatGeckoDesktop("13") }}</td> + <td>11</td> + <td>25</td> + <td>7.1</td> + </tr> + <tr> + <td>Constructor argument: <code>new Map(iterable)</code></td> + <td>{{ CompatChrome(38) }}</td> + <td>{{ CompatGeckoDesktop("13") }}</td> + <td>{{CompatNo}}</td> + <td>25</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>iterable</td> + <td>{{ CompatChrome(38) }}</td> + <td>{{ CompatGeckoDesktop("17") }}</td> + <td>{{CompatNo}}</td> + <td>25</td> + <td>7.1</td> + </tr> + <tr> + <td><code>Map.clear()</code></td> + <td>{{ CompatChrome(31) }}<br> + {{ CompatChrome(38) }}</td> + <td>{{CompatGeckoDesktop("19")}}</td> + <td>11</td> + <td>25</td> + <td>7.1</td> + </tr> + <tr> + <td><code>Map.keys(), Map.values(), Map.entries()</code></td> + <td>{{ CompatChrome(37) }}<br> + {{ CompatChrome(38) }}</td> + <td>{{CompatGeckoDesktop("20")}}</td> + <td>{{CompatNo}}</td> + <td>25</td> + <td>7.1</td> + </tr> + <tr> + <td><code>Map.forEach()</code></td> + <td>{{ CompatChrome(36) }}<br> + {{ CompatChrome(38) }}</td> + <td>{{CompatGeckoDesktop("25")}}</td> + <td>11</td> + <td>25</td> + <td>7.1</td> + </tr> + <tr> + <td>Key equality for -0 and 0</td> + <td>{{ CompatChrome(34) }}<br> + {{ CompatChrome(38) }}</td> + <td>{{CompatGeckoDesktop("29")}}</td> + <td>{{CompatNo}}</td> + <td>25</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Constructor argument: <code>new Map(null)</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("37")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Monkey-patched <code>set()</code> in Constructor</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("37")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>Map[@@species]</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("41")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>Map()</code> without <code>new</code> throws</td> + <td>{{CompatUnknown}}</td> + <td>{{ CompatGeckoDesktop("42") }}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{ CompatChrome(38) }} [1]</td> + <td>{{ CompatGeckoMobile("13") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8</td> + </tr> + <tr> + <td>Constructor argument: <code>new Map(iterable)</code></td> + <td>{{CompatNo}}</td> + <td>{{ CompatChrome(38) }}</td> + <td>{{ CompatGeckoMobile("13") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>iterable</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{ CompatGeckoMobile("17") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8</td> + </tr> + <tr> + <td><code>Map.clear()</code></td> + <td>{{CompatNo}}</td> + <td>{{ CompatChrome(31) }}<br> + {{ CompatChrome(38) }}</td> + <td>{{CompatGeckoMobile("19")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8</td> + </tr> + <tr> + <td><code>Map.keys(), Map.values(), Map.entries()</code></td> + <td>{{CompatNo}}</td> + <td>{{ CompatChrome(37) }}<br> + {{ CompatChrome(38) }}</td> + <td>{{CompatGeckoMobile("20")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8</td> + </tr> + <tr> + <td><code>Map.forEach()</code></td> + <td>{{CompatNo}}</td> + <td>{{ CompatChrome(36) }}<br> + {{ CompatChrome(38) }}</td> + <td>{{CompatGeckoMobile("25")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8</td> + </tr> + <tr> + <td>Key equality for -0 and 0</td> + <td>{{CompatNo}}</td> + <td>{{ CompatChrome(34) }}<br> + {{ CompatChrome(38) }}</td> + <td>{{CompatGeckoMobile("29")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Constructor argument: <code>new Map(null)</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("37")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Monkey-patched <code>set()</code> in Constructor</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("37")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>Map[@@species]</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("41")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>Map()</code> without <code>new</code> throws</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("42")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Starting with Chrome 31, the feature was available behind a preference. In <code>chrome://flags</code>, activate the entry “Enable Experimental JavaScript”.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=697479">Map and Set bug at Mozilla</a></li> + <li><a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:simple_maps_and_sets">ECMAScript Harmony proposal</a></li> + <li>{{jsxref("Set")}}</li> + <li>{{jsxref("WeakMap")}}</li> + <li>{{jsxref("WeakSet")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/math/abs/index.html b/files/it/web/javascript/reference/global_objects/math/abs/index.html new file mode 100644 index 0000000000..6dcf7a7dd6 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/math/abs/index.html @@ -0,0 +1,95 @@ +--- +title: Math.abs() +slug: Web/JavaScript/Reference/Global_Objects/Math/abs +translation_of: Web/JavaScript/Reference/Global_Objects/Math/abs +--- +<div>{{JSRef}}</div> + +<p>La funzione <strong><code>Math.abs()</code></strong> ritorna il valore assoluto di un numero, ovvero</p> + +<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.abs</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mrow><mo stretchy="false">|</mo><mi>x</mi><mo stretchy="false">|</mo></mrow><mo>=</mo><mrow><mo>{</mo><mtable columnalign="left left"><mtr><mtd><mi>x</mi></mtd><mtd><mtext>if</mtext><mspace width="1em"></mspace><mi>x</mi><mo>></mo><mn>0</mn></mtd></mtr><mtr><mtd><mi>0</mi></mtd><mtd><mtext>if</mtext><mspace width="1em"></mspace><mi>x</mi><mo>=</mo><mn>0</mn></mtd></mtr><mtr><mtd><mo>-</mo><mi>x</mi></mtd><mtd><mtext>if</mtext><mspace width="1em"></mspace><mi>x</mi><mo><</mo><mn>0</mn></mtd></mtr></mtable></mrow></mrow><annotation encoding="TeX">{\mathtt{\operatorname{Math.abs}(x)}} = {|x|} = \begin{cases} x & \text{if} \quad x \geq 0 \\ -x & \text{if} \quad x < 0 \end{cases} </annotation></semantics></math></p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox">Math.abs(<var>x</var>)</pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt><code>x</code></dt> + <dd>Un numero.</dd> +</dl> + +<h3 id="Valore_di_ritorno">Valore di ritorno</h3> + +<p>Il valore assoluto del numero passato come parametro.</p> + +<h2 id="Descrizione">Descrizione</h2> + +<p>Siccome <code>abs()</code> è un metodo statico di <code>Math</code>, viene sempre utilizzato come <code>Math.abs()</code> piuttosto che come metodo di un oggetto <code>Math</code> creato in precedenza (<code>Math</code> non è un costruttore).</p> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Comportamento_di_Math.abs()">Comportamento di <code>Math.abs()</code></h3> + +<p>Passando un oggetto vuoto, un array con più di un elemento, una stringa non numerica o una variabile {{jsxref("undefined")}}/empty il valore di ritorno sarà {{jsxref("NaN")}}. Passando {{jsxref("null")}}, una stringa vuota o un array vuoto, il valore di ritorno sarà 0.</p> + +<pre class="brush: js" dir="rtl">Math.abs('-1'); // 1 +Math.abs(-2); // 2 +Math.abs(null); // 0 +Math.abs(''); // 0 +Math.abs([]); // 0 +Math.abs([2]); // 2 +Math.abs([1,2]); // NaN +Math.abs({}); // NaN +Math.abs('string'); // NaN +Math.abs(); // NaN +</pre> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definizione iniziale. Implementata in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.8.2.1', 'Math.abs')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.abs', 'Math.abs')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.abs', 'Math.abs')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_Browser">Compatibilità con i Browser</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Math.abs")}}</p> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>{{jsxref("Math.ceil()")}}</li> + <li>{{jsxref("Math.floor()")}}</li> + <li>{{jsxref("Math.round()")}}</li> + <li>{{jsxref("Math.sign()")}}</li> + <li>{{jsxref("Math.trunc()")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/math/acos/index.html b/files/it/web/javascript/reference/global_objects/math/acos/index.html new file mode 100644 index 0000000000..b872e04ab2 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/math/acos/index.html @@ -0,0 +1,94 @@ +--- +title: Math.acos() +slug: Web/JavaScript/Reference/Global_Objects/Math/acos +translation_of: Web/JavaScript/Reference/Global_Objects/Math/acos +--- +<div>{{JSRef}}</div> + +<p>La funzione <strong><code>Math.acos()</code></strong> ritorna l'arcocoseno (in radianti) di un numero, ovvero</p> + +<p><math display="block"><semantics><mrow><mo>∀</mo><mi>x</mi><mo>∊</mo><mo stretchy="false">[</mo><mrow><mo>-</mo><mn>1</mn></mrow><mo>;</mo><mn>1</mn><mo stretchy="false">]</mo><mo>,</mo><mspace width="thickmathspace"></mspace><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.acos</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mo lspace="0em" rspace="0em">arccos</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext> the unique </mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mo>∊</mo><mo stretchy="false">[</mo><mn>0</mn><mo>;</mo><mi>π</mi><mo stretchy="false">]</mo><mspace width="thinmathspace"></mspace><mtext>such that</mtext><mspace width="thickmathspace"></mspace><mo lspace="0em" rspace="0em">cos</mo><mo stretchy="false">(</mo><mi>y</mi><mo stretchy="false">)</mo><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x \in [{-1};1],\;\mathtt{\operatorname{Math.acos}(x)} = \arccos(x) = \text{ the unique } \; y \in [0; \pi] \, \text{such that} \; \cos(y) = x</annotation></semantics></math></p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><code>Math.acos(<var>x</var>)</code></pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt><code>x</code></dt> + <dd>Un numero.</dd> +</dl> + +<h3 id="Valore_di_ritorno">Valore di ritorno</h3> + +<p>L'arcocoseno (in radianti) del numero passato come parametro se quest'ultimo si trova tra i valori <strong>-1</strong> e <strong>1</strong>; altrimenti ritorna {{jsxref("NaN")}}.</p> + +<h2 id="Descrizione">Descrizione</h2> + +<p>Il metodo <code>Math.acos()</code> ritorna un valore numerico compreso tra 0 and π radianti per <code>x</code> compreso tra -1 e 1. Se il valore di <code>x</code> si trova al di fuori di questo range il metodo ritorna {{jsxref("NaN")}}.</p> + +<p>Siccome <code>acos()</code> è un metodo statico di <code>Math</code>, viene sempre usato come <code>Math.acos()</code> piuttosto che come metodo di un oggetto <code>Math</code> creato in precedenza (<code>Math</code> non è un costruttore).</p> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Math.acos()"><code>Math.acos()</code></h3> + +<pre class="brush: js">Math.acos(-2); // NaN +Math.acos(-1); // 3.141592653589793 +Math.acos(0); // 1.5707963267948966 +Math.acos(0.5); // 1.0471975511965979 +Math.acos(1); // 0 +Math.acos(2); // NaN +</pre> + +<p>Per valori inferiori a -1 o maggiori di 1, <code>Math.acos()</code> ritorna {{jsxref("NaN")}}.</p> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definizione iniziale. Implementata in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.8.2.2', 'Math.acos')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.acos', 'Math.acos')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.acos', 'Math.acos')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_dei_Browser">Compatibilità dei Browser</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Math.acos")}}</p> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>{{jsxref("Math.asin()")}}</li> + <li>{{jsxref("Math.atan()")}}</li> + <li>{{jsxref("Math.atan2()")}}</li> + <li>{{jsxref("Math.cos()")}}</li> + <li>{{jsxref("Math.sin()")}}</li> + <li>{{jsxref("Math.tan()")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/math/atan/index.html b/files/it/web/javascript/reference/global_objects/math/atan/index.html new file mode 100644 index 0000000000..9be8920214 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/math/atan/index.html @@ -0,0 +1,100 @@ +--- +title: Math.atan() +slug: Web/JavaScript/Reference/Global_Objects/Math/atan +translation_of: Web/JavaScript/Reference/Global_Objects/Math/atan +--- +<div>{{JSRef}}</div> + +<p>La funzione <strong><code>Math.atan()</code></strong> restituisce l'arcotangente (in radianti) di un numero, definita come</p> + +<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.atan</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mo lspace="0em" rspace="0em">arctan</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext> l'unica </mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mo>∊</mo><mrow><mo>[</mo><mrow><mo>-</mo><mfrac><mi>π</mi><mn>2</mn></mfrac><mo>;</mo><mfrac><mi>π</mi><mn>2</mn></mfrac></mrow><mo>]</mo></mrow><mspace width="thinmathspace"></mspace><mtext>tale che</mtext><mspace width="thickmathspace"></mspace><mo lspace="0em" rspace="0em">tan</mo><mo stretchy="false">(</mo><mi>y</mi><mo stretchy="false">)</mo><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\mathtt{\operatorname{Math.atan}(x)} = \arctan(x) = \text{ the unique } \; y \in \left[-\frac{\pi}{2}; \frac{\pi}{2}\right] \, \text{such that} \; \tan(y) = x</annotation></semantics></math></p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><code>Math.atan(<var>x</var>)</code></pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt><code>x</code></dt> + <dd>Un numero.</dd> +</dl> + +<h3 id="Valore_di_ritorno">Valore di ritorno</h3> + +<p>L'arcotangente (in radianti) del numero dato <strong><code>x</code></strong>.</p> + +<h2 id="Descrizione">Descrizione</h2> + +<p>Il metodo <code>Math.atan()</code> ritorna un valore numerico compreso tra <math><semantics><mrow><mo>-</mo><mfrac><mi>π</mi><mn>2</mn></mfrac></mrow><annotation encoding="TeX">-\frac{\pi}{2}</annotation></semantics></math> e <math><semantics><mfrac><mi>π</mi><mn>2</mn></mfrac><annotation encoding="TeX">\frac{\pi}{2}</annotation></semantics></math> radianti.</p> + +<p>Poiché <code>atan()</code> è un membro statico di <code>Math</code>, è da usarsi sempre nella forma <code>Math.atan()</code>, piuttosto che come un metodo di un oggetto <code>Math</code> creato (<code>Math</code> non è il costruttore di una classe).</p> + +<h2 id="Esempî">Esempî</h2> + +<h3 id="Using_Math.atan()">Using <code>Math.atan()</code></h3> + +<pre class="brush: js">Math.atan(1); // 0.7853981633974483 +Math.atan(0); // 0 +Math.atan(-0); // -0 + +Math.atan(Infinity); <span class="objectBox objectBox-number"> // 1.5707963267948966 +Math.atan(-Infinity); // -1.5707963267948966 + +</span>/* +L'angolo che la retta su cui giace il segmento [(0,0);(x,y)] +forma con l'asse x di un sistema a coordinate cartesiane +*/ +Math.atan(y / x); +</pre> + +<p>Note that you may want to avoid using <strong>±</strong><code>Infinity</code> for stylistic reasons. In this case, {{jsxref("Math.atan2()")}} with <code>0</code> as the second argument may be a better solution.</p> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Status</th> + <th scope="col">Commento</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definizione iniziale. Implementata in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.8.2.4', 'Math.atan')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.atan', 'Math.atan')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.atan', 'Math.atan')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Math.atan")}}</p> + +<h2 id="Vedere_anche">Vedere anche</h2> + +<ul> + <li>{{jsxref("Math.acos()")}}</li> + <li>{{jsxref("Math.asin()")}}</li> + <li>{{jsxref("Math.atan2()")}}</li> + <li>{{jsxref("Math.cos()")}}</li> + <li>{{jsxref("Math.sin()")}}</li> + <li>{{jsxref("Math.tan()")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/math/atan2/index.html b/files/it/web/javascript/reference/global_objects/math/atan2/index.html new file mode 100644 index 0000000000..842106f7a1 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/math/atan2/index.html @@ -0,0 +1,155 @@ +--- +title: Math.atan2() +slug: Web/JavaScript/Reference/Global_Objects/Math/atan2 +tags: + - Arcotangente + - JavaScript + - Math + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/Math/atan2 +--- +<div>{{JSRef}}</div> + +<p>La funzione <strong><code>Math.atan2() </code></strong>restituisce l'arcotangente del quoziente dei suoi argomenti.</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><code>Math.atan2(<var>y</var>, <var>x</var>)</code></pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt><code>y</code></dt> + <dd>Primo numero.</dd> + <dt><code>x</code></dt> + <dd>Secondo numero.</dd> +</dl> + +<h3 id="Valore_restituito">Valore restituito</h3> + +<p>L'arcotangente del quoziente degli argomenti forniti alla funzione, espresso in radianti e compreso tra -π e π.</p> + +<h2 id="Descrizione">Descrizione</h2> + +<p>Il metodo <code>Math.atan2()</code> restituisce un valore compreso tra -π e π che reppresenta l'angolo teta di un punto <code>(x, y)</code>. Questo angolo è orientato in senso antiorario, misurato in radianti e compreso tra l'asse positivo delle ascisse, ed il punto <code>(x, y)</code>. È importante ricordare che il primo argomento da fornire alla funzione è l'ordinata del punto ed il secondo la sua ascissa.</p> + +<p><img alt="A simple diagram showing the angle returned by atan2(y, x)" src="https://mdn.mozillademos.org/files/11557/atan2.png" style="height: 300px; width: 300px;"></p> + +<p><code>A Math.atan2()</code> vengono passate x ed y separatamente, mentre a <code>Math.atan()</code> deve essere passato il loro quoziente.</p> + +<p>Poichè <code>atan2()</code> è un metodo statico di <code>Math </code>esso viene sempre utilizzato nella forma <code>Math.atan2()</code>, invece che come metodo di un oggetto <code>Math </code>che hai personalmente creato (<code>Math</code> non è un costruttore).</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Using_Math.atan2()">Using <code>Math.atan2()</code></h3> + +<pre class="brush: js">Math.atan2(90, 15); // 1.4056476493802699 +Math.atan2(15, 90); // 0.16514867741462683 + +Math.atan2(±0, -0); // ±PI. +Math.atan2(±0, +0); // ±0. +Math.atan2(±0, -x); // ±PI con x > 0. +Math.atan2(±0, x); // ±0 con x > 0. +Math.atan2(-y, ±0); // -PI/2 con y > 0. +Math.atan2(y, ±0); // PI/2 con y > 0. +Math.atan2(±y, -Infinity); // ±PI con y finito e y > 0. +Math.atan2(±y, +Infinity); // ±0 con y finito e y > 0. +Math.atan2(±Infinity, x); // ±PI/2 con x finito. +Math.atan2(±Infinity, -Infinity); // ±3*PI/4. +Math.atan2(±Infinity, +Infinity); // ±PI/4. +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.8.2.5', 'Math.atan2')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.atan2', 'Math.atan2')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.atan2', 'Math.atan2')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Math.acos()")}}</li> + <li>{{jsxref("Math.asin()")}}</li> + <li>{{jsxref("Math.atan()")}}</li> + <li>{{jsxref("Math.cos()")}}</li> + <li>{{jsxref("Math.sin()")}}</li> + <li>{{jsxref("Math.tan()")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/math/ceil/index.html b/files/it/web/javascript/reference/global_objects/math/ceil/index.html new file mode 100644 index 0000000000..c8cdcb96dd --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/math/ceil/index.html @@ -0,0 +1,161 @@ +--- +title: Math.ceil() +slug: Web/JavaScript/Reference/Global_Objects/Math/ceil +translation_of: Web/JavaScript/Reference/Global_Objects/Math/ceil +--- +<div>{{JSRef}}</div> + +<p>La funzione <strong><code>Math.ceil()</code></strong> ritorna il più piccolo intero più grande di o uguale a un dato numero.</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><code>Math.ceil(<var>x</var>)</code></pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt><code>x</code></dt> + <dd>Un numero.</dd> +</dl> + +<h3 id="Valore_di_ritorno">Valore di ritorno</h3> + +<p>Il più piccolo intero più grande di o uguale al dato numero.</p> + +<h2 id="Descrizione">Descrizione</h2> + +<p>Visto che <code>ceil()</code> è un metodo statico di <code>Math</code>, va usato sempre come <code>Math.ceil()</code>, piuttosto che come metodo di un oggetto <code>Math</code> creato (<code>Math</code> non è un costruttore).</p> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Usare_Math.ceil()">Usare <code>Math.ceil()</code></h3> + +<p>L'esempio seguente mostra un uso di <code>Math.ceil()</code>.</p> + +<pre class="brush: js">Math.ceil(.95); // 1 +Math.ceil(4); // 4 +Math.ceil(7.004); // 8 +Math.ceil(-0.95); // -0 +Math.ceil(-4); // -4 +Math.ceil(-7.004); // -7 +</pre> + +<h3 id="Arrotondamento_decimale">Arrotondamento decimale</h3> + +<pre class="brush: js">// Closure +(function() { + /** + * Decimal adjustment of a number. + * + * @param {String} type The type of adjustment. + * @param {Number} value The number. + * @param {Integer} exp The exponent (the 10 logarithm of the adjustment base). + * @returns {Number} The adjusted value. + */ + function decimalAdjust(type, value, exp) { + // If the exp is undefined or zero... + if (typeof exp === 'undefined' || +exp === 0) { + return Math[type](value); + } + value = +value; + exp = +exp; + // If the value is not a number or the exp is not an integer... + if (isNaN(value) || !(typeof exp === 'number' && exp % 1 === 0)) { + return NaN; + } + // Shift + value = value.toString().split('e'); + value = Math[type](+(value[0] + 'e' + (value[1] ? (+value[1] - exp) : -exp))); + // Shift back + value = value.toString().split('e'); + return +(value[0] + 'e' + (value[1] ? (+value[1] + exp) : exp)); + } + + // Decimal round + if (!Math.round10) { + Math.round10 = function(value, exp) { + return decimalAdjust('round', value, exp); + }; + } + // Decimal floor + if (!Math.floor10) { + Math.floor10 = function(value, exp) { + return decimalAdjust('floor', value, exp); + }; + } + // Decimal ceil + if (!Math.ceil10) { + Math.ceil10 = function(value, exp) { + return decimalAdjust('ceil', value, exp); + }; + } +})(); + +// Round +Math.round10(55.55, -1); // 55.6 +Math.round10(55.549, -1); // 55.5 +Math.round10(55, 1); // 60 +Math.round10(54.9, 1); // 50 +Math.round10(-55.55, -1); // -55.5 +Math.round10(-55.551, -1); // -55.6 +Math.round10(-55, 1); // -50 +Math.round10(-55.1, 1); // -60 +// Floor +Math.floor10(55.59, -1); // 55.5 +Math.floor10(59, 1); // 50 +Math.floor10(-55.51, -1); // -55.6 +Math.floor10(-51, 1); // -60 +// Ceil +Math.ceil10(55.51, -1); // 55.6 +Math.ceil10(51, 1); // 60 +Math.ceil10(-55.59, -1); // -55.5 +Math.ceil10(-59, 1); // -50 +</pre> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.8.2.6', 'Math.ceil')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.ceil', 'Math.ceil')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.ceil', 'Math.ceil')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_dei_browser">Compatibilità dei browser</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Math.ceil")}}</p> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>{{jsxref("Math.abs()")}}</li> + <li>{{jsxref("Math.floor()")}}</li> + <li>{{jsxref("Math.round()")}}</li> + <li>{{jsxref("Math.sign()")}}</li> + <li>{{jsxref("Math.trunc()")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/math/e/index.html b/files/it/web/javascript/reference/global_objects/math/e/index.html new file mode 100644 index 0000000000..859d16145b --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/math/e/index.html @@ -0,0 +1,79 @@ +--- +title: Math.E +slug: Web/JavaScript/Reference/Global_Objects/Math/E +translation_of: Web/JavaScript/Reference/Global_Objects/Math/E +--- +<div>{{JSRef}}</div> + +<p>La costante <strong><code>Math.E</code></strong> rappresenta la base del logaritmo naturale, e, equivale approssimativamente a 2.718.</p> + +<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.E</mi></mstyle><mo>=</mo><mi>e</mi><mo>≈</mo><mn>2.718</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.E}} = e \approx 2.718</annotation></semantics></math></p> + +<div>{{EmbedInteractiveExample("pages/js/math-e.html")}}</div> + + + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="Descrizione">Descrizione</h2> + +<p>Poiché <code>E</code> è una proprietà statica di <code>Math</code>, lo si usa sempre come <code>Math.E</code>, piuttosto che come un metodo di un <code>Oggetto Math</code> appositamente creato (<code>Math</code> non ha un costruttore).</p> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Uso_di_Math.E"><code><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="background-color: #333333;">Uso di </span></font>Math.E</code></h3> + +<p>Il codice seguente restitusice e:</p> + +<pre class="brush: js">function getNapier() { + return Math.E; +} + +getNapier(); // 2.718281828459045 +</pre> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.8.1.1', 'Math.E')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.e', 'Math.E')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.e', 'Math.E')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_Browser">Compatibilità Browser</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Math.E")}}</p> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>{{jsxref("Math.exp()")}}</li> + <li>{{jsxref("Math.log()")}}</li> + <li>{{jsxref("Math.log1p()")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/math/floor/index.html b/files/it/web/javascript/reference/global_objects/math/floor/index.html new file mode 100644 index 0000000000..3f7f6c7851 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/math/floor/index.html @@ -0,0 +1,158 @@ +--- +title: Math.floor() +slug: Web/JavaScript/Reference/Global_Objects/Math/floor +translation_of: Web/JavaScript/Reference/Global_Objects/Math/floor +--- +<div>{{JSRef}}</div> + +<p>La funzione <strong><code>Math.floor()</code></strong> restituisce il numero intero, arrotondato per difetto, del numero passato come parametro.</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><code>Math.floor(<var>x</var>)</code></pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt><code>x</code></dt> + <dd>Un numero.</dd> +</dl> + +<h3 id="Valore_di_ritorno">Valore di ritorno</h3> + +<p>Un numero intero rappresentante l'arrotondamento per difetto del numero passato come parametro.</p> + +<h2 id="Descrizione">Descrizione</h2> + +<p>Siccome <code>floor()</code> è un metodo statico di <code>Math</code>, viene sempre usato come <code>Math.floor()</code> piuttosto che come metodo di un oggetto <code>Math</code> creato in precedenza (<code>Math</code> non è un costruttore).</p> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Math.floor()"><code>Math.floor()</code></h3> + +<pre class="brush: js">Math.floor( 45.95); // 45 +Math.floor( 45.05); // 45 +Math.floor( 4 ); // 4 +Math.floor(-45.05); // -46 +Math.floor(-45.95); // -46 +</pre> + +<h3 id="Arrotondamento_decimale">Arrotondamento decimale</h3> + +<pre class="brush: js">// Closure +(function() { + /** + * Decimal adjustment of a number. + * + * @param {String} type The type of adjustment. + * @param {Number} value The number. + * @param {Integer} exp The exponent (the 10 logarithm of the adjustment base). + * @returns {Number} The adjusted value. + */ + function decimalAdjust(type, value, exp) { + // If the exp is undefined or zero... + if (typeof exp === 'undefined' || +exp === 0) { + return Math[type](value); + } + value = +value; + exp = +exp; + // If the value is not a number or the exp is not an integer... + if (isNaN(value) || !(typeof exp === 'number' && exp % 1 === 0)) { + return NaN; + } + // Shift + value = value.toString().split('e'); + value = Math[type](+(value[0] + 'e' + (value[1] ? (+value[1] - exp) : -exp))); + // Shift back + value = value.toString().split('e'); + return +(value[0] + 'e' + (value[1] ? (+value[1] + exp) : exp)); + } + + // Decimal round + if (!Math.round10) { + Math.round10 = function(value, exp) { + return decimalAdjust('round', value, exp); + }; + } + // Decimal floor + if (!Math.floor10) { + Math.floor10 = function(value, exp) { + return decimalAdjust('floor', value, exp); + }; + } + // Decimal ceil + if (!Math.ceil10) { + Math.ceil10 = function(value, exp) { + return decimalAdjust('ceil', value, exp); + }; + } +})(); + +// Round +Math.round10(55.55, -1); // 55.6 +Math.round10(55.549, -1); // 55.5 +Math.round10(55, 1); // 60 +Math.round10(54.9, 1); // 50 +Math.round10(-55.55, -1); // -55.5 +Math.round10(-55.551, -1); // -55.6 +Math.round10(-55, 1); // -50 +Math.round10(-55.1, 1); // -60 +// Floor +Math.floor10(55.59, -1); // 55.5 +Math.floor10(59, 1); // 50 +Math.floor10(-55.51, -1); // -55.6 +Math.floor10(-51, 1); // -60 +// Ceil +Math.ceil10(55.51, -1); // 55.6 +Math.ceil10(51, 1); // 60 +Math.ceil10(-55.59, -1); // -55.5 +Math.ceil10(-59, 1); // -50 +</pre> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definizione iniziale. Implementata in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.8.2.9', 'Math.floor')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.floor', 'Math.floor')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.floor', 'Math.floor')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_dei_Browser">Compatibilità dei Browser</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Math.floor")}}</p> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>{{jsxref("Math.abs()")}}</li> + <li>{{jsxref("Math.ceil()")}}</li> + <li>{{jsxref("Math.round()")}}</li> + <li>{{jsxref("Math.sign()")}}</li> + <li>{{jsxref("Math.trunc()")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/math/index.html b/files/it/web/javascript/reference/global_objects/math/index.html new file mode 100644 index 0000000000..69cd2ec012 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/math/index.html @@ -0,0 +1,208 @@ +--- +title: Math +slug: Web/JavaScript/Reference/Global_Objects/Math +translation_of: Web/JavaScript/Reference/Global_Objects/Math +--- +<div>{{JSRef}}</div> + +<p>Math è un oggetto precostruito che possiede proprietà e metodi per restituire i risultati di costanti e funzioni matematiche. Math non è una funzione.</p> + +<h2 id="Descrizione">Descrizione</h2> + +<p>Diversamente dagli altri oggetti globali, Math non è un costruttore. Tutte le proprietà e i metodi di Math sono statici. Per riferirsi alla costante Pi si usa Math.PI e per chiamare la funzione Seno si usa Math.sin(x) , dove x è l'argomento del metodo. Le costanti sono definite con la piena precisione dei numeri reali in JavaScript.</p> + +<h2 id="Proprietà">Proprietà</h2> + +<dl> + <dt>{{jsxref("Math.E")}}</dt> + <dd>Costante di Eulero e base dei logaritmi naturali, approssimativamente 2.718.</dd> + <dt>{{jsxref("Math.LN2")}}</dt> + <dd>Logaritmo naturale di 2, approssimativamente 0.693.</dd> + <dt>{{jsxref("Math.LN10")}}</dt> + <dd>Logaritmo naturale di 10, approssimativamente 0.693.</dd> + <dt>{{jsxref("Math.LOG2E")}}</dt> + <dd>Logaritmo a base 2 di E, approssimativamente 1.443.</dd> + <dt>{{jsxref("Math.LOG10E")}}</dt> + <dd>Logaritmo a base 10 di E, approssimativamente 1.443.</dd> + <dt>{{jsxref("Math.PI")}}</dt> + <dd>Rapporto tra la circonferenza di un cerchio ed il suo diametro, approssimativamente 3.14159.</dd> + <dt>{{jsxref("Math.SQRT1_2")}}</dt> + <dd>Radice quadrata di 1/2 ; equivale a 1 fratto la radice quadrata di 2, approsimativamente 0.707.</dd> + <dt>{{jsxref("Math.SQRT2")}}</dt> + <dd>Radice quadrata di 2, approssimativamente 1.414.</dd> +</dl> + +<h2 id="Metodi">Metodi</h2> + +<div class="note"> +<p>Ricorda che le funzioni trigonometriche (<code>sin()</code>, <code>cos()</code>, <code>tan()</code>, <code>asin()</code>, <code>acos()</code>, <code>atan()</code>, <code>atan2()</code>) si aspettano e restituiscono gli angoli in radianti. To convert radians to degrees, divide by <code>(Math.PI / 180)</code>, and multiply by this to convert the other way.</p> +</div> + +<div class="note"> +<p>Ricorda che la precisione di molte delle funzioni matematiche è dipendente dall'sistema di implementazione. questo significa che browser differenti possono dare risultati diversi, e anche lo stessomotore JS su un differente sistema operativo o architettura può dare risultati discordi.</p> +</div> + +<dl> + <dt>{{jsxref("Global_Objects/Math/abs", "Math.abs(x)")}}</dt> + <dd>Returns the absolute value of a number.</dd> + <dt>{{jsxref("Global_Objects/Math/acos", "Math.acos(x)")}}</dt> + <dd>Returns the arccosine of a number.</dd> + <dt>{{jsxref("Global_Objects/Math/acosh", "Math.acosh(x)")}}</dt> + <dd>Returns the hyperbolic arccosine of a number.</dd> + <dt>{{jsxref("Global_Objects/Math/asin", "Math.asin(x)")}}</dt> + <dd>Returns the arcsine of a number.</dd> + <dt>{{jsxref("Global_Objects/Math/asinh", "Math.asinh(x)")}}</dt> + <dd>Returns the hyperbolic arcsine of a number.</dd> + <dt>{{jsxref("Global_Objects/Math/atan", "Math.atan(x)")}}</dt> + <dd>Returns the arctangent of a number.</dd> + <dt>{{jsxref("Global_Objects/Math/atanh", "Math.atanh(x)")}}</dt> + <dd>Returns the hyperbolic arctangent of a number.</dd> + <dt>{{jsxref("Global_Objects/Math/atan2", "Math.atan2(y, x)")}}</dt> + <dd>Returns the arctangent of the quotient of its arguments.</dd> + <dt>{{jsxref("Global_Objects/Math/cbrt", "Math.cbrt(x)")}}</dt> + <dd>Returns the cube root of a number.</dd> + <dt>{{jsxref("Global_Objects/Math/ceil", "Math.ceil(x)")}}</dt> + <dd>Returns the smallest integer greater than or equal to a number.</dd> + <dt>{{jsxref("Global_Objects/Math/clz32", "Math.clz32(x)")}}</dt> + <dd>Returns the number of leading zeroes of a 32-bit integer.</dd> + <dt>{{jsxref("Global_Objects/Math/cos", "Math.cos(x)")}}</dt> + <dd>Returns the cosine of a number.</dd> + <dt>{{jsxref("Global_Objects/Math/cosh", "Math.cosh(x)")}}</dt> + <dd>Returns the hyperbolic cosine of a number.</dd> + <dt>{{jsxref("Global_Objects/Math/exp", "Math.exp(x)")}}</dt> + <dd>Returns E<sup>x</sup>, where <var>x</var> is the argument, and E is Euler's constant (2.718…), the base of the natural logarithm.</dd> + <dt>{{jsxref("Global_Objects/Math/expm1", "Math.expm1(x)")}}</dt> + <dd>Returns subtracting 1 from <code>exp(x)</code>.</dd> + <dt>{{jsxref("Global_Objects/Math/floor", "Math.floor(x)")}}</dt> + <dd>Returns the largest integer less than or equal to a number.</dd> + <dt>{{jsxref("Global_Objects/Math/fround", "Math.fround(x)")}}</dt> + <dd>Returns the nearest <a href="http://en.wikipedia.org/wiki/Single-precision_floating-point_format" title="link to the wikipedia page on single precision">single precision</a> float representation of a number.</dd> + <dt>{{jsxref("Global_Objects/Math/hypot", "Math.hypot([x[, y[, …]]])")}}</dt> + <dd>Returns the square root of the sum of squares of its arguments.</dd> + <dt>{{jsxref("Global_Objects/Math/imul", "Math.imul(x, y)")}}</dt> + <dd>Returns the result of a 32-bit integer multiplication.</dd> + <dt>{{jsxref("Global_Objects/Math/log", "Math.log(x)")}}</dt> + <dd>Returns the natural logarithm (log<sub>e</sub>, also ln) of a number.</dd> + <dt>{{jsxref("Global_Objects/Math/log1p", "Math.log1p(x)")}}</dt> + <dd>Returns the natural logarithm of <code>1 + x</code> (log<sub>e</sub>, also ln) of a number.</dd> + <dt>{{jsxref("Global_Objects/Math/log10", "Math.log10(x)")}}</dt> + <dd>Returns the base 10 logarithm of a number.</dd> + <dt>{{jsxref("Global_Objects/Math/log2", "Math.log2(x)")}}</dt> + <dd>Returns the base 2 logarithm of a number.</dd> + <dt>{{jsxref("Global_Objects/Math/max", "Math.max([x[, y[, …]]])")}}</dt> + <dd>Returns the largest of zero or more numbers.</dd> + <dt>{{jsxref("Global_Objects/Math/min", "Math.min([x[, y[, …]]])")}}</dt> + <dd>Returns the smallest of zero or more numbers.</dd> + <dt>{{jsxref("Global_Objects/Math/pow", "Math.pow(x, y)")}}</dt> + <dd>Returns base to the exponent power, that is, <code>base<sup>exponent</sup></code>.</dd> + <dt>{{jsxref("Global_Objects/Math/random", "Math.random()")}}</dt> + <dd>Returns a pseudo-random number between 0 and 1.</dd> + <dt>{{jsxref("Global_Objects/Math/round", "Math.round(x)")}}</dt> + <dd>Returns the value of a number rounded to the nearest integer.</dd> + <dt>{{jsxref("Global_Objects/Math/sign", "Math.sign(x)")}}</dt> + <dd>Returns the sign of the x, indicating whether x is positive, negative or zero.</dd> + <dt>{{jsxref("Global_Objects/Math/sin", "Math.sin(x)")}}</dt> + <dd>Returns the sine of a number.</dd> + <dt>{{jsxref("Global_Objects/Math/sinh", "Math.sinh(x)")}}</dt> + <dd>Returns the hyperbolic sine of a number.</dd> + <dt>{{jsxref("Global_Objects/Math/sqrt", "Math.sqrt(x)")}}</dt> + <dd>Returns the positive square root of a number.</dd> + <dt>{{jsxref("Global_Objects/Math/tan", "Math.tan(x)")}}</dt> + <dd>Returns the tangent of a number.</dd> + <dt>{{jsxref("Global_Objects/Math/tanh", "Math.tanh(x)")}}</dt> + <dd>Returns the hyperbolic tangent of a number.</dd> + <dt><code>Math.toSource()</code> {{non-standard_inline}}</dt> + <dd>Returns the string <code>"Math"</code>.</dd> + <dt>{{jsxref("Global_Objects/Math/trunc", "Math.trunc(x)")}}</dt> + <dd>Returns the integral part of the number x, removing any fractional digits.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.8', 'Math')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math-object', 'Math')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>New methods {{jsxref("Math.log10()", "log10()")}}, {{jsxref("Math.log2()", "log2()")}}, {{jsxref("Math.log1p()", "log1p()")}}, {{jsxref("Math.expm1()", "expm1()")}}, {{jsxref("Math.cosh()", "cosh()")}}, {{jsxref("Math.sinh()", "sinh()")}}, {{jsxref("Math.tanh()", "tanh()")}}, {{jsxref("Math.acosh()", "acosh()")}}, {{jsxref("Math.asinh()", "asinh()")}}, {{jsxref("Math.atanh()", "atanh()")}}, {{jsxref("Math.hypot()", "hypot()")}}, {{jsxref("Math.trunc()", "trunc()")}}, {{jsxref("Math.sign()", "sign()")}}, {{jsxref("Math.imul()", "imul()")}}, {{jsxref("Math.fround()", "fround()")}}, {{jsxref("Math.cbrt()", "cbrt()")}} and {{jsxref("Math.clz32()", "clz32()")}} added.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math-object', 'Math')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Number")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/math/max/index.html b/files/it/web/javascript/reference/global_objects/math/max/index.html new file mode 100644 index 0000000000..1c7f425fd0 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/math/max/index.html @@ -0,0 +1,145 @@ +--- +title: Math.max() +slug: Web/JavaScript/Reference/Global_Objects/Math/max +tags: + - JavaScript + - Math + - Referenza + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/Math/max +--- +<div>{{JSRef}}</div> + +<p>La funzione <strong><code>Math.max()</code></strong> restituisce il massimo tra zero o più numeri.</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><code>Math.max([<var>valore1</var>[, <var>valore2</var>[, ...]]])</code></pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt><code>valore1, valore2, ...</code></dt> + <dd>Numeri.</dd> +</dl> + +<h2 id="Descrizione">Descrizione</h2> + +<p>Dato che <code>max()</code> è un metodo statico di <code>Math</code>, viene solitamente usato tramite <code>Math.max()</code>, piuttosto che come metodo di un oggetto di tipo <code>Math</code> (<code>Math</code> non è un construttore).</p> + +<p>Se non vengono passati parametri, il risultato è -{{jsxref("Infinity")}}.</p> + +<p>Se anche solo uno dei parametri non può essere convertito a numero, il risultato è {{jsxref("NaN")}}.</p> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Usando_Math.max()">Usando <code>Math.max()</code></h3> + +<pre class="brush: js">Math.max(10, 20); // 20 +Math.max(-10, -20); // -10 +Math.max(-10, 20); // 20 +</pre> + +<p>La seguente funzione usa il metodo {{jsxref("Function.prototype.apply()")}} per trovare l'elemento massimo in un array di numeri. <br> + <code>getMaxOfArray([1, 2, 3])</code> è equivalente a <code>Math.max(1, 2, 3)</code> ma può essere usata con array di qualunque dimensione creati programmaticamente.</p> + +<pre class="brush: js">function getMaxOfArray(numArray) { + return Math.max.apply(null, numArray); +} +</pre> + +<p>Con il nuovo {{jsxref("Operators/Spread_operator", "spread operator")}}, ottenere l'elemento massimo di un array è ancora più semplice.</p> + +<pre class="brush: js">var arr = [1, 2, 3]; +var max = Math.max(...arr); +</pre> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifiche</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definizione iniziale. Implementata in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.8.2.11', 'Math.max')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.max', 'Math.max')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.max', 'Math.max')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_browser">Compatibilità browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funzionalità</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Supporto base</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funzionalità</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Supporto base</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Vedi_inoltre">Vedi inoltre</h2> + +<ul> + <li>{{jsxref("Math.min()")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/math/min/index.html b/files/it/web/javascript/reference/global_objects/math/min/index.html new file mode 100644 index 0000000000..562292e15b --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/math/min/index.html @@ -0,0 +1,160 @@ +--- +title: Math.min() +slug: Web/JavaScript/Reference/Global_Objects/Math/min +tags: + - JavaScript + - Matemática + - Math + - Minimo + - Più grande + - Più piccolo + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/Math/min +--- +<p> </p> + +<div>{{JSRef}}</div> + +<p>La funzione <strong><code>Math.min()</code></strong> ritorna il più piccolo tra zero o più numeri.</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><code>Math.min([<var>value1</var>[, <var>value2</var>[, ...]]])</code></pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt><code>value1, value2, ...</code></dt> + <dd>numeri.</dd> +</dl> + +<h3 id="Valori_di_Ritorno">Valori di Ritorno</h3> + +<p>Il più piccolo dei valori dati in input. Se uno degli argomenti non può essere convertito in numero, viene ritornato {{jsxref("NaN")}}.</p> + +<h2 id="Descrizione">Descrizione</h2> + +<p>Siccome <code>min()</code> è un metodo static di <code>Math</code> , lo si può sempre usare come <code>Math.min()</code>, piuttosto che come un metodo di un oggetto istanza di <code>Math</code> da te creato (<code>Math</code> non possiede costruttori).</p> + +<p>Se non sono dati argomenti allora il metodo restituirà {{jsxref("Infinity")}}.</p> + +<p>Se anche uno degli aromenti non può essere convertito in un numero, il risultato sarà {{jsxref("NaN")}}.</p> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Usando_Math.min()">Usando <code>Math.min()</code></h3> + +<p>L'sempio di seguito assegna a <code>z</code> il valore minore tra <code>x</code> e <code>y</code>:</p> + +<pre class="brush: js">var x = 10, y = -20; +var z = Math.min(x, y); +</pre> + +<h3 id="Ritagliare_un_valore_con_Math.min()">Ritagliare un valore con <code>Math.min()</code></h3> + +<p><code>Math.min()</code> è spesso usato per limitare un valore in modo che sia sempre minore o uguale a un certo valore limite.<br> + Ad esempio il seguente codice</p> + +<pre class="brush: js">var x = f(foo); + +if (x > boundary) { + x = boundary; +} +</pre> + +<p>può essere scritto come</p> + +<pre class="brush: js">var x = Math.min(f(foo), boundary); +</pre> + +<p>{{jsxref("Math.max()")}} può essere similmente utilizzato per limitare il valore massimo.</p> + +<h2 id="Specificazioni">Specificazioni</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definizione iniziale. Implementato in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.8.2.12', 'Math.min')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.min', 'Math.min')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.min', 'Math.min')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_Browser">Compatibilità Browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>{{jsxref("Math.max()")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/math/pow/index.html b/files/it/web/javascript/reference/global_objects/math/pow/index.html new file mode 100644 index 0000000000..5db4139f6a --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/math/pow/index.html @@ -0,0 +1,151 @@ +--- +title: Math.pow() +slug: Web/JavaScript/Reference/Global_Objects/Math/pow +translation_of: Web/JavaScript/Reference/Global_Objects/Math/pow +--- +<div>{{JSRef}}</div> + +<p>La funzione <strong><code>Math.pow() </code></strong>restituisce la potenza della base che si desidera moltiplicare per se stessa a seconda del valore dell'esponenete, cioè <code>base<sup>esponente</sup></code>.</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><code>Math.pow(<var>base</var>, <var>esponente</var>)</code></pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt><code>base</code></dt> + <dd>La basee del numero.</dd> + <dt><code>esponente</code></dt> + <dd>L'esponente usato per elevare la base.</dd> +</dl> + +<h3 id="Valore_di_Ritorno">Valore di Ritorno</h3> + +<p>Un numero che rappresenta la base elevata alla potenza dell'esponente.</p> + +<h2 id="Descrizione">Descrizione</h2> + +<p><code><font face="Open Sans, Arial, sans-serif">Siccome </font>pow()</code> è un metodo static di <code>Math</code>, lo usi sempre nella forma <code>Math.pow()</code>, piuttosto che come un metodo di un oggetto <code>Math</code> da te creato (<code>Math</code> non ha costruttori).</p> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Usando_Math.pow()">Usando <code>Math.pow()</code></h3> + +<pre class="brush: js">// semplice +Math.pow(7, 2); // 49 +Math.pow(7, 3); // 343 +Math.pow(2, 10); // 1024 +// esponenti fratti +Math.pow(4, 0.5); // 2 (radice quadrata di 4) +Math.pow(8, 1/3); // 2 (radice cubica di 8) +Math.pow(2, 0.5); // 1.4142135623730951 (radice quadrata di 2) +Math.pow(2, 1/3); // 1.2599210498948732 (radice cubica di 2) +// esponenti negativi +Math.pow(7, -2); // 0.02040816326530612 (1/49) +Math.pow(8, -1/3); // 0.5 +// basi negative +Math.pow(-7, 2); // 49 (i quadrati son sempre positivi) +Math.pow(-7, 3); // -343 (i cubi possono essere negativi) +Math.pow(-7, 0.5); // NaN (i numeri negativi non hanno una quadrata reale) +// Siccome le radici "pari" e quelle "dispari" sono vicine tra loro, +// e i limiti della precisione numerica per i valori di tipo float, +// le basi negative con esponenti fratti ritornano sempre NaN +Math.pow(-7, 1/3); // NaN +</pre> + +<h2 id="Specifiche_Tecniche">Specifiche Tecniche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specificazione</th> + <th scope="col">Status</th> + <th scope="col">Commento</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td> + <p>Definizione iniziale. Implementata in JavaScript 1.0.</p> + </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.8.2.13', 'Math.pow')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.pow', 'Math.pow')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.pow', 'Math.pow')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatiblità_Browser">Compatiblità Browser </h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>{{jsxref("Math.cbrt()")}}</li> + <li>{{jsxref("Math.exp()")}}</li> + <li>{{jsxref("Math.log()")}}</li> + <li>{{jsxref("Math.sqrt()")}}</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Exponentiation" title="Arithmetic operators take numerical values (either literals or variables) as their operands and return a single numerical value. The standard arithmetic operators are addition (+), subtraction (-), multiplication (*), and division (/).">Exponentiation operator</a> {{experimental_inline}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/math/random/index.html b/files/it/web/javascript/reference/global_objects/math/random/index.html new file mode 100644 index 0000000000..3fcd849257 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/math/random/index.html @@ -0,0 +1,107 @@ +--- +title: Math.random() +slug: Web/JavaScript/Reference/Global_Objects/Math/random +translation_of: Web/JavaScript/Reference/Global_Objects/Math/random +--- +<div>{{JSRef}}</div> + +<div>La funzione <strong><code>Math.random()</code></strong> ritorna un numero pseudo-casuale in virgola mobile compreso tra 0 e 1, con 0 incluso e 1 escluso (quindi nell'intervallo [0, 1)), scalabile al range desiderato. L'implementazione seleziona un numero (seme) iniziale utile all'algoritmo di generazione per restituire numeri randomici, il quale non può essere scelto o resettato dall'utente.</div> + +<div> </div> + +<div class="note"> +<p><code>Math.random()</code> <em>non </em>permette la generazione crittograficamente sicura dei numeri casuali, di conseguenza è altamente sconsigliato il suo impiego nell'ambito della sicurezza. Piuttosto sarebbe più corretto utilizzare la Web Crypto API instead, e più precisamente il metodo {{domxref("RandomSource.getRandomValues()", "window.crypto.getRandomValues()")}}.</p> +</div> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox">Math.random()</pre> + +<h3 id="Valore_di_ritorno">Valore di ritorno</h3> + +<p>Un numero pseudo casuale in virgola mobile compreso tra 0 (incluso) e 1 (escluso).</p> + +<h2 id="Esempi">Esempi</h2> + +<p>Bisogna notare che dal momento che i numeri in virgola mobile di JavaScript seguono lo standard IEEE 754 che arrotonda i numeri al numero pari più vicino, i range mostrati per la funzione sottostante non sono esatti (escludendo quello per Math.random()). Se si scelgono margini molto elevati (dell'ordine di 2<sup>53 </sup>o più) è possibile, in casi estremamente rari, calcolare il limite superiore solitamente escluso.</p> + +<h3 id="Ottenere_un_numero_tra_0_1)">Ottenere un numero tra [0, 1)</h3> + +<pre class="brush: js">function getRandom() { + return Math.random(); +} +</pre> + +<h3 id="Ottenere_un_numero_random_tra_due_valori">Ottenere un numero random tra due valori</h3> + +<p>Questo esempio restituisce un numero random tra due valori specificati. Il valore non è minore di (e può essere uguale a) <code>min</code>, nè maggiore (e nè uguale) a <code>max.</code> </p> + +<pre class="brush: js">function getRandomArbitrary(min, max) { + return Math.random() * (max - min) + min; +} +</pre> + +<h3 id="Ottenere_un_intero_random_tra_due_valori">Ottenere un intero random tra due valori</h3> + +<p>Questo esempio restituisce un intero random tra due valori specificati. Il valore non è minore di <code>min</code> (oppure l'intero più grande di min se quest'ultimo non è un intero), nè maggiore (nè uguale) a <code>max.</code> </p> + +<pre class="brush: js">function getRandomInt(min, max) { + min = Math.ceil(min); + max = Math.floor(max); + return Math.floor(Math.random() * (max - min)) + min; //Il max è escluso e il min è incluso +} +</pre> + +<div class="note"> +<p>Si potrebbe utilizzare l'arrotondamento per ottenere questo, tuttavia così facendo i numeri casuali seguirebbero una distribuzione non uniforme, magari non accettabile.</p> +</div> + +<h3 id="Ottenere_un_intero_random_tra_due_valori_con_estremi_inclusi">Ottenere un intero random tra due valori con estremi inclusi</h3> + +<p>Le funzioni viste finora escludono sempre l'estremo superiore del range scelto. La funzione <code>getRandomIntInclusive() </code>descritta sotto permette di ottenere questo.</p> + +<pre class="brush: js">function getRandomIntInclusive(min, max) { + min = Math.ceil(min); + max = Math.floor(max); + return Math.floor(Math.random() * (max - min + 1)) + min; //Il max è incluso e il min è incluso +}</pre> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definizione iniziale. JS 1.0 (solo per UNIX) / JS 1.1. (tutte le piattaforme)</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.8.2.14', 'Math.random')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.random', 'Math.random')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.random', 'Math.random')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_browser">Compatibilità browser</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Math.random")}}</p> + +<p class="countTop"> </p> diff --git a/files/it/web/javascript/reference/global_objects/math/round/index.html b/files/it/web/javascript/reference/global_objects/math/round/index.html new file mode 100644 index 0000000000..4b20fb4a42 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/math/round/index.html @@ -0,0 +1,100 @@ +--- +title: Math.round() +slug: Web/JavaScript/Reference/Global_Objects/Math/round +translation_of: Web/JavaScript/Reference/Global_Objects/Math/round +--- +<div>{{JSRef}}</div> + +<p>La funzione <strong><code>Math.round()</code></strong> restituisce il valore di un numero approssimato all'intero ad esso più vicino.</p> + +<div>{{EmbedInteractiveExample("pages/js/math-round.html")}}</div> + + + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox">Math.round(<var>x</var>)</pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt><code>x</code></dt> + <dd>Un numero.</dd> +</dl> + +<h3 id="Valore_restituito">Valore restituito</h3> + +<p>Il valore del numero dato approssimato all'intero più vicino.</p> + +<h2 id="Descrizione">Descrizione</h2> + +<p>Se la parte frazionale del numero è maggiore di 0.5, l'argomento (x) è approssimato all'intero successivo con il valore assoluto più elevato. Se è inferiore di 0.5, l'argomento è approssimato all'intero con il valore assoluto più basso. Se la parte frazionale è esattamente 0.5, l'argomento è approssimato all'intero successivo nella direzione di +∞. <strong>Si noti che questo è diverso da quanto accade nelle funzioni <code>round()</code> di molti altri linguaggi, che spesso invece approssimano questo caso all'intero successivo <em>più lontano da zero</em>, </strong>(dando un risultato diverso nel caso dei numeri negativi con una parte frazionale di esattamente 0.5).</p> + +<p>Poiché <code>round()</code> è un metodo statico di <code>Math</code>, lo si usa sempre come <code>Math.round()</code>, piuttosto che come un metodo di un <code>Oggetto Math</code> appositamente creato (<code>Math</code> non ha un costruttore).</p> + +<h2 id="Esempi">Esempi</h2> + +<pre class="brush: js">Math.round( 20.49); // 20 +Math.round( 20.5 ); // 21 +Math.round( 42 ); // 42 +Math.round(-20.5 ); // -20 +Math.round(-20.51); // -21 +</pre> + +<p> </p> + +<h2 id="Specifications">Specifications</h2> + +<p> </p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.8.2.15', 'Math.round')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.round', 'Math.round')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.round', 'Math.round')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Math.round")}}</p> + +<p> </p> + +<h2 id="See_also">See also</h2> + +<p> </p> + +<ul> + <li>{{jsxref("Number.toPrecision()")}}</li> + <li>{{jsxref("Number.toFixed()")}}</li> + <li>{{jsxref("Math.abs()")}}</li> + <li>{{jsxref("Math.ceil()")}}</li> + <li>{{jsxref("Math.floor()")}}</li> + <li>{{jsxref("Math.sign()")}}</li> + <li>{{jsxref("Math.trunc()")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/math/sqrt/index.html b/files/it/web/javascript/reference/global_objects/math/sqrt/index.html new file mode 100644 index 0000000000..6daf577e02 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/math/sqrt/index.html @@ -0,0 +1,136 @@ +--- +title: Math.sqrt() +slug: Web/JavaScript/Reference/Global_Objects/Math/sqrt +translation_of: Web/JavaScript/Reference/Global_Objects/Math/sqrt +--- +<div>{{JSRef}}</div> + +<p>La funzione <strong><code>Math.sqrt()</code></strong> ritorna la radice quadrata di un numero, cioè :</p> + +<p><math display="block"><semantics><mrow><mo>∀</mo><mi>x</mi><mo>≥</mo><mn>0</mn><mo>,</mo><mstyle mathvariant="monospace"><mrow><mi>M</mi><mi>a</mi><mi>t</mi><mi>h</mi><mo>.</mo><mi>s</mi><mi>q</mi><mi>r</mi><mi>t</mi><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><msqrt><mi>x</mi></msqrt><mo>=</mo><mtext>the unique</mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mo>≥</mo><mn>0</mn><mspace width="thickmathspace"></mspace><mtext>such that</mtext><mspace width="thickmathspace"></mspace><msup><mi>y</mi><mn>2</mn></msup><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x \geq 0, \mathtt{Math.sqrt(x)} = \sqrt{x} = \text{l'unico} \; y \geq 0 \; \text{tale che} \; y^2 = x</annotation></semantics></math></p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><code>Math.sqrt(<var>x</var>)</code></pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt><code>x</code></dt> + <dd>Un numero.</dd> +</dl> + +<h3 id="Valore_di_ritorno">Valore di ritorno</h3> + +<p>La radice quadrata di un dato numero. Se il numero è negativo viene ritornato {{jsxref("NaN")}}.</p> + +<h2 id="Descrizione">Descrizione</h2> + +<p>Se il segno di <code>x</code> è negativo, <code>Math.sqrt()</code> ritorna {{jsxref("NaN")}}.</p> + +<p>Siccome <code>sqrt()</code> è un metodo static di <code>Math</code>, puoi usarlo sempre come <code>Math.sqrt()</code>, piutttosto che come un metodo di un oggetto di tipo <code>Math</code> creato da te (<code>Math</code> non è un costruttore).</p> + +<h2 id="Esempio">Esempio</h2> + +<h3 id="Uso_di_Math.sqrt()">Uso di <code>Math.sqrt()</code></h3> + +<pre class="brush: js">Math.sqrt(9); // 3 +Math.sqrt(2); // 1.414213562373095 + +Math.sqrt(1); // 1 +Math.sqrt(0); // 0 +Math.sqrt(-1); // NaN +</pre> + +<h2 id="Specificazioni">Specificazioni</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definizione iniziale. Implementato per JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.8.2.17', 'Math.sqrt')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.sqrt', 'Math.sqrt')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.sqrt', 'Math.sqrt')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_browser">Compatibilità browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>{{jsxref("Math.cbrt()")}}</li> + <li>{{jsxref("Math.exp()")}}</li> + <li>{{jsxref("Math.log()")}}</li> + <li>{{jsxref("Math.pow()")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/nan/index.html b/files/it/web/javascript/reference/global_objects/nan/index.html new file mode 100644 index 0000000000..992f063e9d --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/nan/index.html @@ -0,0 +1,79 @@ +--- +title: NaN +slug: Web/JavaScript/Reference/Global_Objects/NaN +translation_of: Web/JavaScript/Reference/Global_Objects/NaN +--- +<div> +<div> +<div>{{jsSidebar("Objects")}}</div> +</div> +</div> + +<h2 id="Sommario">Sommario</h2> + +<p>La proprietà globale <strong style="font-family: Consolas,Monaco,'Andale Mono',monospace;">NaN </strong>è un valore che rappresenta un non numero (Not-a-Number).</p> + +<p>{{js_property_attributes(0,0,0)}}</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><code>NaN</code></pre> + +<h2 id="Description" name="Description">Descrizione</h2> + +<p>Nan è una proprietà del <em>global object </em>e indica il fatto che un certo valore non è un numero legale/valido.</p> + +<p>Il valore iniziale di Nan è Not-A-Number — lo stesso valore che si può riscontrare accedendo a <span style="font-family: Consolas,Monaco,'Andale Mono',monospace;">Number.NaN. </span>Nei browser moderni NaN è una proprietà non configurabile e non scrivibile (read-only).</p> + +<p>NaN è restituito principalmente come valore di fallimento dalle funzioni "matematiche" come <span style="font-family: Consolas,Monaco,'Andale Mono',monospace;">Math.sqrt(-1) </span>oppure quando si prova ad eseguire il parseInt di una stringa che non contiene cifre numeriche come <span style="font-family: Consolas,Monaco,'Andale Mono',monospace;">parseInt("blabla")</span></p> + +<h3 id="Testare_il_valore_NaN">Testare il valore <code>NaN</code></h3> + +<p>Gli operatori di uguaglianza (== o ===) non possono essere usati per verificare il valore di NaN. Deve essere invece utilizzato il metodo IsNaN() presente sia nell'oggetto globale {{jsxref("Global_Objects/isNaN", "isNaN()")}} che nell'oggetto Number {{jsxref("Number.isNaN()")}}. </p> + +<pre class="brush: js">NaN === NaN; // false +Number.NaN === NaN; // false +isNaN(NaN); // true +isNaN(Number.NaN); // true +</pre> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>ECMAScript 1st Edition.</td> + <td>Standard</td> + <td>Initial definition. Implemented in JavaScript 1.3</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.1.1.1', 'NaN')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-value-properties-of-the-global-object-nan', 'NaN')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità">Compatibilità</h2> + + + +<p>{{Compat("javascript.builtins.NaN")}}</p> + +<h2 id="See_also" name="See_also">Vedi anche</h2> + +<ul> + <li>{{jsxref("Number.NaN")}}</li> + <li>{{jsxref("Number.isNaN()")}}</li> + <li>{{jsxref("Global_Objects/isNaN", "isNaN()")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/null/index.html b/files/it/web/javascript/reference/global_objects/null/index.html new file mode 100644 index 0000000000..80ee3de685 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/null/index.html @@ -0,0 +1,89 @@ +--- +title: 'null' +slug: Web/JavaScript/Reference/Global_Objects/null +translation_of: Web/JavaScript/Reference/Global_Objects/null +--- +<div>{{jsSidebar("Objects")}}</div> + +<p>Il valore <code>null</code> rappresenta l'assenza intenzionale di qualsiasi valore dell'oggetto. È una delle {{Glossary("Primitive", "primitive values")}} di JavaScript.</p> + +<div>{{EmbedInteractiveExample("pages/js/globalprops-null.html")}}</div> + + + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox">null</pre> + +<h2 id="Descrizione">Descrizione</h2> + +<p>Il valore <code>null</code> è scritto con un letterale: <code>null</code>. <code>null</code> non è un identificatore per una proprietà dell'oggetto globale, come {{jsxref("Global_Objects/undefined","undefined")}} può essere. Invece, <code>null</code> esprime una mancanza di identificazione, indicando che una variabile punta a nessun oggetto. Nelle API, <code>null</code> viene spesso recuperato in un punto in cui è possibile prevedere un oggetto ma nessun oggetto è rilevante.</p> + +<pre class="brush: js">// foo non esiste Non è definito e non è mai stato inizializzato: +foo; +"ReferenceError: foo is not defined" + +// foo è noto per esistere ora ma non ha alcun tipo o valore: +var foo = null; +foo; +"null" +</pre> + +<h3 id="Differenze_tra_null_e_undefined">Differenze tra <code>null</code> e <code>undefined</code></h3> + +<p>Durante il controllo per <code>null</code> o <code>undefined</code>, attenti alle <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">differenze tra gli operatori equality (==) e identity (===)</a>, come il primo esegue la conversione del tipo.</p> + +<pre class="brush: js">typeof null // "object" (non "null" per motivi legacy) +typeof undefined // "undefined" +null === undefined // false +null == undefined // true +null === null // true +null == null // true +!null // true +isNaN(1 + null) // false +isNaN(1 + undefined) // true</pre> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-4.3.11', 'null value')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-null-value', 'null value')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-null-value', 'null value')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + + + +<p>{{Compat("javascript.builtins.null")}}</p> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>{{jsxref("undefined")}}</li> + <li>{{jsxref("NaN")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/number/index.html b/files/it/web/javascript/reference/global_objects/number/index.html new file mode 100644 index 0000000000..39c8eb37d2 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/number/index.html @@ -0,0 +1,188 @@ +--- +title: Number +slug: Web/JavaScript/Reference/Global_Objects/Number +translation_of: Web/JavaScript/Reference/Global_Objects/Number +--- +<ol> + <li>{{JSRef}}</li> +</ol> + +<div><strong><code>Number</code></strong> is a <a href="/en-US/docs/Glossary/Primitive#Primitive_wrapper_objects_in_JavaScript">primitive wrapper object</a> used to represent and manipulate numbers like <code>37</code> or <code>-9.25</code>.</div> + +<div></div> + +<div></div> + +<p>The <strong><code>Number</code></strong> constructor contains constants and methods for working with numbers. Values of other types can be converted to numbers using the<strong> </strong><strong><code>Number()</code> function</strong>.</p> + +<p>The JavaScript <strong>Number</strong> type is a <a href="https://en.wikipedia.org/wiki/Floating-point_arithmetic">double-precision 64-bit binary format IEEE 754</a> value, like <code>double</code> in Java or C#. This means it can represent fractional values, but there are some limits to what it can store. A Number only keeps about 17 decimal places of precision; arithmetic is subject to <a href="https://en.wikipedia.org/wiki/Floating-point_arithmetic#Representable_numbers,_conversion_and_rounding">rounding</a>. The largest value a Number can hold is about 1.8×10<sup>308</sup>. Numbers beyond that are replaced with the special Number constant {{jsxref("Infinity")}}.</p> + +<p>A number literal like <code>37</code> in JavaScript code is a floating-point value, not an integer. There is no separate integer type in common everyday use. (JavaScript now has a {{jsxref("BigInt")}} type, but it was not designed to replace Number for everyday uses. <code>37</code> is still a Number, not a BigInt.)</p> + +<dl> +</dl> + +<h2 id="Description">Description</h2> + +<p>When used as a function, <code>Number(value)</code> converts a string or other value to the Number type. If the value can't be converted, it returns {{jsxref("NaN")}}.</p> + +<h3 id="Literal_syntax">Literal syntax</h3> + +<pre class="brush: js notranslate">123 // one-hundred twenty-three +123.0 // same +123 === 123.0 // true</pre> + +<h3 id="Function_syntax">Function syntax</h3> + +<pre class="brush: js notranslate">Number('123') // returns the number 123 +Number('123') === 123 // true + +Number("unicorn") // NaN +Number(undefined) // NaN +</pre> + +<h2 id="Constructor">Constructor</h2> + +<dl> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/Number"><code>Number()</code></a></dt> + <dd>Creates a new <code>Number</code> value.</dd> +</dl> + +<h2 id="Static_properties">Static properties</h2> + +<dl> + <dt>{{jsxref("Number.EPSILON")}}</dt> + <dd>The smallest interval between two representable numbers.</dd> + <dt>{{jsxref("Number.MAX_SAFE_INTEGER")}}</dt> + <dd>The maximum safe integer in JavaScript (<code>2<sup>53</sup> - 1</code>).</dd> + <dt>{{jsxref("Number.MAX_VALUE")}}</dt> + <dd>The largest positive representable number.</dd> + <dt>{{jsxref("Number.MIN_SAFE_INTEGER")}}</dt> + <dd>The minimum safe integer in JavaScript (<code>-(2<sup>53</sup> - 1)</code>).</dd> + <dt>{{jsxref("Number.MIN_VALUE")}}</dt> + <dd>The smallest positive representable number—that is, the positive number closest to zero (without actually being zero).</dd> + <dt>{{jsxref("Number.NaN")}}</dt> + <dd>Special "<strong>N</strong>ot <strong>a</strong> <strong>N</strong>umber" value.</dd> + <dt>{{jsxref("Number.NEGATIVE_INFINITY")}}</dt> + <dd>Special value representing negative infinity. Returned on overflow.</dd> + <dt>{{jsxref("Number.POSITIVE_INFINITY")}}</dt> + <dd>Special value representing infinity. Returned on overflow.</dd> + <dt>{{jsxref("Number.prototype")}}</dt> + <dd>Allows the addition of properties to the <code>Number</code> object.</dd> +</dl> + +<h2 id="Static_methods">Static methods</h2> + +<dl> + <dt>{{jsxref("Number.isNaN()")}}</dt> + <dd>Determine whether the passed value is <code>NaN</code>.</dd> + <dt>{{jsxref("Number.isFinite()")}}</dt> + <dd>Determine whether the passed value is a finite number.</dd> + <dt>{{jsxref("Number.isInteger()")}}</dt> + <dd>Determine whether the passed value is an integer.</dd> + <dt>{{jsxref("Number.isSafeInteger()")}}</dt> + <dd>Determine whether the passed value is a safe integer (number between <code>-(2<sup>53</sup> - 1)</code> and <code>2<sup>53</sup> - 1</code>).</dd> + <dt>{{jsxref("Number.parseFloat()", "Number.parseFloat(<var>string</var>)")}}</dt> + <dd>This is the same as the global {{jsxref("parseFloat", "parseFloat()")}} function.</dd> + <dt>{{jsxref("Number.parseInt()", "Number.parseInt(<var>string</var>, [<var>radix</var>])")}}</dt> + <dd>This is the same as the global {{jsxref("parseInt", "parseInt()")}} function.</dd> +</dl> + +<h2 id="Instance_methods">Instance methods</h2> + +<dl> + <dt>{{jsxref("Number.prototype.toExponential()" ,"Number.prototype.toExponential(<var>fractionDigits</var>)")}}</dt> + <dd>Returns a string representing the number in exponential notation.</dd> + <dt>{{jsxref("Number.prototype.toFixed()", "Number.prototype.toFixed(<var>digits</var>)")}}</dt> + <dd>Returns a string representing the number in fixed-point notation.</dd> + <dt>{{jsxref("Number.prototype.toLocaleString()", "Number.prototype.toLocaleString([<var>locales</var> [, <var>options</var>]])")}}</dt> + <dd>Returns a string with a language sensitive representation of this number. Overrides the {{jsxref("Object.prototype.toLocaleString()")}} method.</dd> + <dt>{{jsxref("Number.prototype.toPrecision()", "Number.prototype.toPrecision(<var>precision</var>)")}}</dt> + <dd>Returns a string representing the number to a specified precision in fixed-point or exponential notation.</dd> + <dt>{{jsxref("Number.prototype.toString()", "Number.prototype.toString([<var>radix</var>])")}}</dt> + <dd>Returns a string representing the specified object in the specified <var>radix</var> ("base"). Overrides the {{jsxref("Object.prototype.toString()")}} method.</dd> + <dt>{{jsxref("Number.prototype.valueOf()")}}</dt> + <dd>Returns the primitive value of the specified object. Overrides the {{jsxref("Object.prototype.valueOf()")}} method.</dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<h3 id="Using_the_Number_object_to_assign_values_to_numeric_variables">Using the Number object to assign values to numeric variables</h3> + +<p>The following example uses the <code>Number</code> object's properties to assign values to several numeric variables:</p> + +<pre class="brush: js notranslate">const biggestNum = Number.MAX_VALUE +const smallestNum = Number.MIN_VALUE +const infiniteNum = Number.POSITIVE_INFINITY +const negInfiniteNum = Number.NEGATIVE_INFINITY +const notANum = Number.NaN +</pre> + +<h3 id="Integer_range_for_Number">Integer range for Number</h3> + +<p>The following example shows the minimum and maximum integer values that can be represented as <code>Number</code> object. (More details on this are described in the ECMAScript standard, chapter <em><a href="https://tc39.github.io/ecma262/#sec-ecmascript-language-types-number-type">6.1.6 The Number Type</a>.</em>)</p> + +<pre class="brush: js notranslate">const biggestInt = Number.MAX_SAFE_INTEGER // (<code>2<sup>53</sup> - 1</code>) => 9007199254740991 +const smallestInt = Number.MIN_SAFE_INTEGER // -(<code>2<sup>53</sup> - 1</code>) => -9007199254740991</pre> + +<p>When parsing data that has been serialized to JSON, integer values falling outside of this range can be expected to become corrupted when JSON parser coerces them to <code>Number</code> type.</p> + +<p>A possible workaround is to use {{jsxref("String")}} instead.</p> + +<p>Larger numbers can be represented using the {{jsxref("BigInt")}} type.</p> + +<h3 id="Using_Number_to_convert_a_Date_object">Using Number to convert a Date object</h3> + +<p>The following example converts the {{jsxref("Date")}} object to a numerical value using <code>Number</code> as a function:</p> + +<pre class="brush: js notranslate">let d = new Date('December 17, 1995 03:24:00') +console.log(Number(d)) +</pre> + +<p>This logs <code>819199440000</code>.</p> + +<h3 id="Convert_numeric_strings_and_null_to_numbers">Convert numeric strings and null to numbers</h3> + +<pre class="brush: js notranslate" dir="rtl">Number('123') // 123 +Number('123') === 123 /// true +Number('12.3') // 12.3 +Number('12.00') // 12 +Number('123e-1') // 12.3 +Number('') // 0 +Number(null) // 0 +Number('0x11') // 17 +Number('0b11') // 3 +Number('0o11') // 9 +Number('foo') // NaN +Number('100a') // NaN +Number('-Infinity') //-Infinity</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-number-objects', 'Number')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Number")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("NaN")}}</li> + <li>{{jsxref("Arithmetic operators")}}</li> + <li>The {{jsxref("Math")}} global object</li> + <li>Integers with arbitrary precision: {{jsxref("BigInt")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/object/assign/index.html b/files/it/web/javascript/reference/global_objects/object/assign/index.html new file mode 100644 index 0000000000..6280745df2 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/object/assign/index.html @@ -0,0 +1,268 @@ +--- +title: Object.assign() +slug: Web/JavaScript/Reference/Global_Objects/Object/assign +translation_of: Web/JavaScript/Reference/Global_Objects/Object/assign +--- +<div>{{JSRef}}</div> + +<h2 id="Sommario">Sommario</h2> + +<p>La funzione <strong><code>Object.assign()</code></strong> copia tutte le proprietà enumerabili da uno o più oggetti di origine in un oggetto di destinazione. Restituisce l'oggetto di destinazione.</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox notranslate"><code>Object.assign(<var>target</var>, ...<var>sources</var>)</code></pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt><code>target</code></dt> + <dd>L'oggetto di destinazione.</dd> + <dt><code>sources</code></dt> + <dd>Gli oggetti di origine.</dd> +</dl> + +<h2 id="Descrizione">Descrizione</h2> + +<p>La funzione <code>Object.assign()</code> copia soltanto le proprietà <em>enumerabili</em> appartenenti agli oggetti di origine (non quelle che fanno parte della loro catena dei prototipi) in un oggetto di destinazione. Utilizza <code>[[Get]]</code> sugli oggetti di origine e <code>[[Put]]</code> su quello di destinazione, quindi invoca <em>getter</em> e <em>setter</em>, quando presenti. Quindi <em>assegna</em> le proprietà, piuttosto che limitarsi a copiarle o a definirne di nuove. Ciò lo rende inadatto per aggiungere nuove proprietà in un prototipo se le proprietà vengono copiate da un oggetto contenente <em>getter</em> o <em>setter</em>. Per copiare le proprietà, incluso il fatto di essere enumerabili o no, in un prototipo, bisognerebbe usare {{jsxref("Object.defineProperty()")}}.</p> + +<p>Vengono copiate sia le proprietà aventi come nomi delle {{jsxref("String", "stringhe")}} che dei {{jsxref("Symbol", "simboli")}}.</p> + +<p>In caso di errore, per esempio se una proprietà non è sovrascrivibile, viene generato un {{jsxref("TypeError")}}, e l'oggetto di destinazione rimane invariato.</p> + +<p>Notare che <code>Object.assign()</code> non genera un errore se uno dei valori di origine è {{jsxref("null")}} o {{jsxref("undefined")}}.</p> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Clonare_un_oggetto">Clonare un oggetto</h3> + +<p>Si potrebbe pensare di clonare un oggetto semplicemente assegnandolo ad un altra variabile:</p> + +<pre class="brush: js notranslate">var obj = { a: 1 }; +var copia = obj; +console.log(obj, copia); // { a: 1 }, { a: 1 } +obj.a = 2; +console.log(obj, copia); // { a: 2 }, { a: 2 } + // Ma copia.a non valeva 1?</pre> + +<p>Utilizzando <code>Object.assign()</code> il problema non si verifica:</p> + +<pre class="brush: js notranslate">var obj = { a: 1 }; +var copia = Object.assign({}, obj); +console.log(obj, copia); // { a: 1 }, { a: 1 } +obj.a = 2; +console.log(obj, copia); // { a: 2 }, { a: 1 } +</pre> + +<h3 id="Unire_più_oggetti">Unire più oggetti</h3> + +<pre class="brush: js notranslate">var o1 = { a: 1 }; +var o2 = { b: 2 }; +var o3 = { c: 3 }; + +var obj = Object.assign(o1, o2, o3); +console.log(obj); // { a: 1, b: 2, c: 3 } +console.log(o1); // { a: 1, b: 2, c: 3 }, le proprietà vengono aggiunte all'oggetto di destinazione +</pre> + +<h3 id="Copiare_proprietà_aventi_come_indici_dei_simboli">Copiare proprietà aventi come indici dei simboli</h3> + +<pre class="brush: js notranslate">var o1 = { a: 1 }; +var o2 = { [Symbol("foo")]: 2 }; + +var obj = Object.assign({}, o1, o2); +console.log(obj); // { a: 1, Symbol(foo): 2 } +</pre> + +<h3 id="Le_proprietà_ereditate_o_non-enumerabili_non_vengono_copiate">Le proprietà ereditate o non-enumerabili non vengono copiate</h3> + +<pre class="brush: js notranslate">var obj = Object.create({ foo: 1 }, { // foo è una proprietà ereditata + bar: { + value: 2 // bar è una proprietà non-enumerabile + }, + baz: { + value: 3, + enumerable: true // baz è una proprietà enumerabile + } +}); + +var copia = Object.assign({}, obj); +console.log(copia); // { baz: 3 } +</pre> + +<h3 id="I_valori_primitivi_vengono_trasformati_in_oggetti">I valori primitivi vengono trasformati in oggetti</h3> + +<pre class="brush: js notranslate">var v1 = '123'; +var v2 = true; +var v3 = 10; +var v4 = Symbol("foo"); + +var obj = Object.assign({}, v1, null, v2, undefined, v3, v4); +// I valori primitivi vengono trasformati in oggetti, null e undefined ignorati. +// Notare che solo le stringhe hanno proprietà enumerabili +console.log(obj); // { "0": "1", "1": "2", "2": "3" } +</pre> + +<h3 id="Se_viene_generata_un_eccezione_la_funzione_si_ferma">Se viene generata un eccezione, la funzione si ferma</h3> + +<pre class="brush: js notranslate">var destinazione = Object.defineProperty({}, 'foo', { + value: 1, + writeable: false +}); // destinazione.foo non può essere modificata + +Object.assign(destinazione, { bar: 2 }, { foo2: 3, foo: 3, foo3: 3 }, { baz: 4 }); +// TypeError: "foo" is read-only +// L'eccezione viene generata quando si modifica destinazione.foo + +console.log(destinazione.bar); // 2, Il primo oggetto viene copiato correttamente +console.log(destinazione.foo2); // 3, La prima proprietà del secondo oggetto viene copiata correttamente +console.log(destinazione.foo); // 1, L'eccezione viene generata qui +console.log(destinazione.foo3); // undefined, la funzione ha già finto di copiare +console.log(destinazione.baz); // undefined, la funzione ha già finto di copiare +</pre> + +<h3 id="Copiare_i_getter">Copiare i getter</h3> + +<pre class="brush: js notranslate">var obj = { + foo: 1, + get bar() { + return 2; + } +}; + +var copia = Object.assign({}, obj); +console.log(copia); +// { foo: 1, bar: 2 }, non viene copiato il getter obj.bar, ma il suo valore + +// Questa funzione copia mantenendo getter e setter +function myAssign(target, ...sources) { + sources.forEach(source => { + Object.defineProperties(target, Object.keys(source).reduce((descriptors, key) => { + descriptors[key] = Object.getOwnPropertyDescriptor(source, key); + return descriptors; + }, {})); + }); + return target; +} + +var copia = myAssign({}, obj); +console.log(copia); +// { foo:1, get bar() { return 2 } } +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p>Questo polyfill non supporta i simboli (che comunque non sono supportati da ECMAScript 5):</p> + +<pre class="brush: js notranslate">if (!Object.assign) { + Object.defineProperty(Object, 'assign', { + enumerable: false, + configurable: true, + writable: true, + value: function(target, firstSource) { + 'use strict'; + if (target === undefined || target === null) { + throw new TypeError('Cannot convert first argument to object'); + } + + var to = Object(target); + for (var i = 1; i < arguments.length; i++) { + var nextSource = arguments[i]; + if (nextSource === undefined || nextSource === null) { + continue; + } + nextSource = Object(nextSource); + + var keysArray = Object.keys(Object(nextSource)); + for (var nextIndex = 0, len = keysArray.length; nextIndex < len; nextIndex++) { + var nextKey = keysArray[nextIndex]; + var desc = Object.getOwnPropertyDescriptor(nextSource, nextKey); + if (desc !== undefined && desc.enumerable) { + to[nextKey] = nextSource[nextKey]; + } + } + } + return to; + } + }); +} +</pre> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commenti</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-object.assign', 'Object.assign')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Definizione iniziale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funzionalità</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Supporto di base</td> + <td>{{CompatChrome("45")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("34")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatOpera("32")}}</td> + <td>{{CompatSafari("9")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th><span style="font-family: open sans light,sans-serif; font-size: 16px; line-height: 16px;">Funzionalità</span></th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td><span style="font-size: 12px; line-height: 18px;">Supporto di base</span></td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome("45")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("34")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>{{jsxref("Object.defineProperties()")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/object/create/index.html b/files/it/web/javascript/reference/global_objects/object/create/index.html new file mode 100644 index 0000000000..d2b020b955 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/object/create/index.html @@ -0,0 +1,234 @@ +--- +title: Object.create() +slug: Web/JavaScript/Reference/Global_Objects/Object/create +tags: + - Creazione + - Oggetto + - Prototipo + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/Object/create +--- +<div> + {{JSRef("Global_Objects", "Object")}}</div> +<h2 id="Summary" name="Summary">Sommario</h2> +<p>Il metodo <code><strong>Object.create()</strong></code> crea un nuovo oggetto a partire dall'oggetto prototipo e dalle proprietà specificati.</p> +<h2 id="Syntax" name="Syntax">Sintassi</h2> +<pre class="syntaxbox"><code>Object.create(<var>proto</var>[, <var>propertiesObject</var>])</code></pre> +<h3 id="Parameters" name="Parameters">Parametri</h3> +<dl> + <dt> + <code>proto</code></dt> + <dd> + L'oggetto che farà da prototipo per il nuovo oggetto creato.</dd> + <dt> + <code>propertiesObject</code></dt> + <dd> + Opzionale. Se specificato e non {{jsxref("Global_Objects/undefined", "undefined")}}, un oggetto le cui proprie proprietà enumerabili (ovvero, quelle proprietà definite esclusivamente su di sé e non quelle enumerabili presenti nella sua catena dei prototipi) specificano descrittori di proprietà da aggiungere all'oggetto appena creato, con i corrispondenti nomi di proprietà. Queste proprietà corrispondono al secondo argomento di {{jsxref("Object.defineProperties()")}}.</dd> +</dl> +<h3 id="Throws" name="Throws">Throws</h3> +<p>Lancia un'eccezione di tipo {{jsxref("Global_Objects/TypeError", "TypeError")}} se il parametro <code>proto</code> non è {{jsxref("Global_Objects/null", "null")}} oppure un oggetto.</p> +<h2 id="Examples" name="Examples">Esempi</h2> +<h3 id="Example:_Classical_inheritance_with_Object.create" name="Example:_Classical_inheritance_with_Object.create">Esempio: ereditarietà classica con <code>Object.create</code></h3> +<p>Sotto, trovi un esempio di come implementare un'ereditarietà classica usando <code>Object.create</code>. Si tratta di un'ereditarietà singola, l'unica supportata da Javascript.</p> +<pre class="brush: js">// Shape - superclass +function Shape() { + this.x = 0; + this.y = 0; +} + +// superclass method +Shape.prototype.move = function(x, y) { + this.x += x; + this.y += y; + console.info('Shape moved.'); +}; + +// Rectangle - subclass +function Rectangle() { + Shape.call(this); // call super constructor. +} + +// subclass extends superclass +Rectangle.prototype = Object.create(Shape.prototype); +Rectangle.prototype.constructor = Rectangle; + +var rect = new Rectangle(); + +console.log("Is rect an instance of Rectangle? " + (rect instanceof Rectangle)); // true +console.log("Is rect an instance of Shape<span style="font-size: 1rem;">? " + (rect instanceof Shape)); // true</span> + +rect.move(1, 1); // Outputs, 'Shape moved.' +</pre> +<p>Se desideri ereditare proprietà e metodi da oggetti multipli, puoi utilizzare dei mixins.</p> +<pre class="brush: js">function MyClass() { + SuperClass.call(this); + OtherSuperClass.call(this); +} + +MyClass.prototype = Object.create(SuperClass.prototype); // inherit +mixin(MyClass.prototype, OtherSuperClass.prototype); // mixin + +MyClass.prototype.myMethod = function() { + // do a thing +}; +</pre> +<p>La funzione <code>mixin</code> copia le funzioni dell'oggetto prototype della superclasse nell'oggetto prototype della sottoclasse; la funzione mixin deve essere implementata dall'utente. Un esempio di funzione simil mixin potrebbe essere <a href="http://api.jquery.com/jQuery.extend/">jQuery.extend</a>.</p> +<h3 id="Example:_Using_propertiesObject_argument_with_Object.create" name="Example:_Using_propertiesObject_argument_with_Object.create">Esempio: Usare l'argomento <code>propertiesObject</code> con <code>Object.create</code></h3> +<pre class="brush: js">var o; + +// create an object with null as prototype +o = Object.create(null); + + +o = {}; +// is equivalent to: +o = Object.create(Object.prototype); + + +// Example where we create an object with a couple of sample properties. +// (Note that the second parameter maps keys to *property descriptors*.) +o = Object.create(Object.prototype, { + // foo is a regular 'value property' + foo: { writable: true, configurable: true, value: 'hello' }, + // bar is a getter-and-setter (accessor) property + bar: { + configurable: false, + get: function() { return 10; }, + set: function(value) { console.log('Setting `o.bar` to', value); } + } +}); + + +function Constructor() {} +o = new Constructor(); +// is equivalent to: +o = Object.create(Constructor.prototype); +// Of course, if there is actual initialization code in the +// Constructor function, the Object.create cannot reflect it + + +// create a new object whose prototype is a new, empty object +// and a adding single property 'p', with value 42 +o = Object.create({}, { p: { value: 42 } }); + +// by default properties ARE NOT writable, enumerable or configurable: +o.p = 24; +o.p; +// 42 + +o.q = 12; +for (var prop in o) { + console.log(prop); +} +// 'q' + +delete o.p; +// false + +// to specify an ES3 property +o2 = Object.create({}, { + p: { + value: 42, + writable: true, + enumerable: true, + configurable: true + } +}); +</pre> +<h2 id="Polyfill" name="Polyfill">Polyfill</h2> +<p>Questo polyfill implementa il caso di utilizzo principale, ovvero creare un nuovo oggetto specificando un oggetto prototipo, ma non prende in considerazione il secondo argomento dell'API orginale.</p> +<pre class="brush: js">if (typeof Object.create != 'function') { + Object.create = (function() { + var Object = function() {}; + return function (prototype) { + if (arguments.length > 1) { + throw Error('Second argument not supported'); + } + if (typeof prototype != 'object') { + throw TypeError('Argument must be an object'); + } + Object.prototype = prototype; + var result = new Object(); + Object.prototype = null; + return result; + }; + })(); +} +</pre> +<h2 id="Specifications" name="Specifications">Specifiche</h2> +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.3.5', 'Object.create')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Definizione iniziale. Implementato in JavaScript 1.8.5.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.create', 'Object.create')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilità browser</h2> +<div> + {{CompatibilityTable}}</div> +<div id="compat-desktop"> + <table class="compat-table"> + <tbody> + <tr> + <th>Caratteristica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Supporto base</td> + <td>{{CompatChrome("5")}}</td> + <td>{{CompatGeckoDesktop("2")}}</td> + <td>{{CompatIE("9")}}</td> + <td>{{CompatOpera("11.60")}}</td> + <td>{{CompatSafari("5")}}</td> + </tr> + </tbody> + </table> +</div> +<div id="compat-mobile"> + <table class="compat-table"> + <tbody> + <tr> + <th>Caratteristica</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Supporto base</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("2")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatOperaMobile("11.50")}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> + </table> +</div> +<p>Basato sulla <a href="http://kangax.github.com/es5-compat-table/">tabella di compatibilità di Kangax</a>.</p> +<h2 id="See_also" name="See_also">Vedi anche</h2> +<ul> + <li>{{jsxref("Object.defineProperty")}}</li> + <li>{{jsxref("Object.defineProperties")}}</li> + <li>{{jsxref("Object.prototype.isPrototypeOf")}}</li> + <li>Il post di John Resig su <a href="http://ejohn.org/blog/objectgetprototypeof/">getPrototypeOf</a></li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/object/defineproperties/index.html b/files/it/web/javascript/reference/global_objects/object/defineproperties/index.html new file mode 100644 index 0000000000..c905420eb2 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/object/defineproperties/index.html @@ -0,0 +1,224 @@ +--- +title: Object.defineProperties() +slug: Web/JavaScript/Reference/Global_Objects/Object/defineProperties +translation_of: Web/JavaScript/Reference/Global_Objects/Object/defineProperties +--- +<div>{{JSRef}}</div> + +<p>Il metodo <strong>Object.defineProperties()</strong> definisce nuove proprietà o modifica le proprietà esistenti, direttamente sull'oggetto di ritorno.</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><code>Object.defineProperties(<var>obj</var>, <var>props</var>)</code></pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>L'oggetto su cui definire le nuove proprietà o modificare le esistenti proprietà.</dd> + <dt><code>props</code></dt> + <dd>Un oggetto che contiene le proprietà enumerabili. Per ogni proprietà troviamo dei descrittori della proprietà stessa, che ne impostano il comportamento. Suddividiamo i descrittori in due tipologie: il data descriptors e i descrittorei che ne regolano gli accessi (guarda {{jsxref("Object.defineProperty()")}} per maggiori dettagli). I descrittori hanno le seguenti c:</dd> + <dd> + <dl> + <dt><code>configurable</code></dt> + <dd><code>true</code> se e solo se la proprietà individuata dal descrittore può essere cambiata e se la proprietà può essere cancellata dal presente oggetto.<br> + <strong>Defaults a <code>false</code>.</strong></dd> + <dt><code>enumerable</code></dt> + <dd><code>true</code> se e solo se la proprietà è visualizzabile durante una enumerazione delle proprietà del presente oggetto (es. for-in)<br> + <strong>Defaults a <code>false</code>.</strong></dd> + </dl> + + <dl> + <dt><code>value</code></dt> + <dd>Il valore associato con la proprietà che si sta definendo. Può essere un qualsiasi valore valido di Javascript (number, object, function, ecc...)<br> + <strong>Defaults a {{jsxref("undefined")}}.</strong></dd> + <dt><code>writable</code></dt> + <dd><code>true</code> se e solo se il valore associato per la proprietà può essere cambiato con un {{jsxref("Operators/Assignment_Operators", "operatore di assegnazione", "", 1)}}.<br> + <strong>Defaults to <code>false</code>.</strong></dd> + </dl> + + <dl> + <dt><code>get</code></dt> + <dd>Una funzione che serve da getter (prelevare il dato) per la proprietà, o {{jsxref("undefined")}} se non è presente un getter. Il valore di ritorno della funzione verrà usato come valore della proprietà<br> + <strong>Defaults a {{jsxref("undefined")}}.</strong></dd> + <dt><code>set</code></dt> + <dd>Una funzione che serve da setter (impostare il dato) per la proprietà {{jsxref("undefined")}} se non è presente il setter. La funzione riceverà un solo argomento che verrà assegnato come valore della proprietà.<br> + <strong>Defaults a {{jsxref("undefined")}}.</strong></dd> + </dl> + </dd> +</dl> + +<h3 id="Valore_di_ritorno">Valore di ritorno</h3> + +<p>L'oggetto che è stato passato alla funzione.</p> + +<h2 id="Descrizione">Descrizione</h2> + +<p><code>Object.defineProperties</code>, in sostanza, definisce tutte le proprietà di un oggetto, corrispondenti alle proprietà "own" proprie di un oggetto obj.</p> + +<h2 id="Esempio">Esempio</h2> + +<pre class="brush: js">var obj = {}; +Object.defineProperties(obj, { + 'property1': { + value: true, + writable: true + }, + 'property2': { + value: 'Hello', + writable: false + } + // etc. etc. +}); +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p>Assumendo di eseguire un ambiente precedente con tutti i nomi e le proprietà che fanno riferimento ai valori iniziali, <code>Object.defineProperties</code> è quasi completamente equivalente (nota il commento in <code>isCallable</code>) al seguente reimplementazione in Javascript:</p> + +<pre class="brush: js;highlight:[8]">function defineProperties(obj, properties) { + function convertToDescriptor(desc) { + function hasProperty(obj, prop) { + return Object.prototype.hasOwnProperty.call(obj, prop); + } + + function isCallable(v) { + // NB: modify as necessary if other values than functions are callable. + return typeof v === 'function'; + } + + if (typeof desc !== 'object' || desc === null) + throw new TypeError('bad desc'); + + var d = {}; + + if (hasProperty(desc, 'enumerable')) + d.enumerable = !!desc.enumerable; + if (hasProperty(desc, 'configurable')) + d.configurable = !!desc.configurable; + if (hasProperty(desc, 'value')) + d.value = desc.value; + if (hasProperty(desc, 'writable')) + d.writable = !!desc.writable; + if (hasProperty(desc, 'get')) { + var g = desc.get; + + if (!isCallable(g) && typeof g !== 'undefined') + throw new TypeError('bad get'); + d.get = g; + } + if (hasProperty(desc, 'set')) { + var s = desc.set; + if (!isCallable(s) && typeof s !== 'undefined') + throw new TypeError('bad set'); + d.set = s; + } + + if (('get' in d || 'set' in d) && ('value' in d || 'writable' in d)) + throw new TypeError('identity-confused descriptor'); + + return d; + } + + if (typeof obj !== 'object' || obj === null) + throw new TypeError('bad obj'); + + properties = Object(properties); + + var keys = Object.keys(properties); + var descs = []; + + for (var i = 0; i < keys.length; i++) + descs.push([keys[i], convertToDescriptor(properties[keys[i]])]); + + for (var i = 0; i < descs.length; i++) + Object.defineProperty(obj, descs[i][0], descs[i][1]); + + return obj; +} +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.3.7', 'Object.defineProperties')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.8.5</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.defineproperties', 'Object.defineProperties')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.defineproperties', 'Object.defineProperties')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatGeckoDesktop("2")}}</td> + <td>{{CompatChrome("5")}}</td> + <td>{{CompatIE("9")}}</td> + <td>{{CompatOpera("11.60")}}</td> + <td>{{CompatSafari("5")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatGeckoMobile("2")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOperaMobile("11.5")}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Object.defineProperty()")}}</li> + <li>{{jsxref("Object.keys()")}}</li> + <li><a href="/en-US/docs/Enumerability_and_ownership_of_properties">Enumerability and ownership of properties</a></li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/object/freeze/index.html b/files/it/web/javascript/reference/global_objects/object/freeze/index.html new file mode 100644 index 0000000000..26201fdb0c --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/object/freeze/index.html @@ -0,0 +1,210 @@ +--- +title: Object.freeze() +slug: Web/JavaScript/Reference/Global_Objects/Object/freeze +translation_of: Web/JavaScript/Reference/Global_Objects/Object/freeze +--- +<div>{{JSRef}}</div> + +<p>Il metodo <code><strong>Object.freeze()</strong></code> congela un oggetto: ne previene l'aggiunta, la modifica e la rimozione di proprietà, inclusa la loro enumerabilità, configurabilità e accessibilità. In sostanza, l'oggetto è reso effettivamente immutabile. Il metodo restituisce lo stesso oggetto che è stato passato alla funzione. </p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><code>Object.freeze(<var>obj</var>)</code></pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>L'oggetto da congelare.</dd> +</dl> + +<h3 id="Valore_di_ritorno">Valore di ritorno</h3> + +<p>L'oggetto passato alla funzione.</p> + +<h2 id="Descrizione">Descrizione</h2> + +<p>Nulla può essere aggiunto o rimosso dall'insieme delle proprietà di un oggetto congelato. Qualsiasi tentativo di fare ciò fallirebbe, o silenziosamente o attraverso il ritorno di un errore {{jsxref("TypeError")}} (più frequentemente, ma non necessariamente, quest'ultimo scenario accadrebbe in {{jsxref("Strict_mode", "strict mode", "", 1)}}).</p> + +<p>I valori delle proprietà non possono essere cambiati, anche quando si tratta di setters e getters. Da notare che se un oggetto costituisce il valore di una proprietà, esso può essere ancora modificato senza problemi, a meno che anch'esso non sia stato congelato.</p> + +<h2 id="Esempi">Esempi</h2> + +<pre class="brush: js">var obj = { + prop: function() {}, + foo: 'bar' +}; + +// Nuove proprietà possono essere aggiunte, proprietà già esistenti possono +// essere modificate o rimosse +obj.foo = 'baz'; +obj.lumpy = 'woof'; +delete obj.prop; + + +// Sia l'oggetto che viene passato che quello restituito verranno congelati. +// No serve salvare l'oggetto restituito per congelare l'originale +var o = Object.freeze(obj); + +o === obj; // true +Object.isFrozen(obj); // === true + +// Adesso qualsiasi cambiamento fallirà +obj.foo = 'quux'; // silenziosamente, non succede niente +obj.quaxxor = 'the friendly duck'; // silenziosamente, non aggiungerà alcuna proprietò + + +// ...e nella modalità strict questi tentativi di modifica faranno lanciare TypeErrors +function fail(){ + 'use strict'; + obj.foo = 'sparky'; // throws a TypeError + delete obj.quaxxor; // throws a TypeError + obj.sparky = 'arf'; // throws a TypeError +} + +fail(); + + +// Tentare di cambiare attraverso Object.defineProperty farà anche lanciare un TypeError +Object.defineProperty(obj, 'ohai', { value: 17 }); // throws a TypeError +Object.defineProperty(obj, 'foo', { value: 'eit' }); // throws a TypeError +</pre> + +<p>Il seguente esempio mostra come oggetti che sono valori di proprietà possono essere mutati(il congelamento si ferma ad un solo livello di profondità).</p> + +<pre class="brush: js">obj1 = { + internal: {} +}; + +Object.freeze(obj1); +obj1.internal.a = 'aValue'; + +obj1.internal.a // 'aValue' + + +// Per fare un oggetto totalmente non modificabile, congela ciascun oggetto in obj. +// Per farlo noi usiamo questa funzione. +function deepFreeze(obj) { + + // Prende tutti i nomi delle proprietà definite in obj + var propNames = Object.getOwnPropertyNames(obj); + + // Congela tutte le proprietà prima di congelare obj + propNames.forEach(function(name) { + var prop = obj[name]; + + // Congela prop se esso è un oggetto + if (typeof prop == 'object' && prop !== null) + deepFreeze(prop); + }); + + // Congela se stesso (niente operazione se esso è già congelato) + return Object.freeze(obj); +} + +obj2 = { + internal: {} +}; + +deepFreeze(obj2); +obj2.internal.a = 'anotherValue'; +obj2.internal.a; // undefined +</pre> + +<h2 id="Note">Note</h2> + +<p>In ES5, se l'argomento di questo metodo non è un oggetto, allora verrà ritornato un errore {{jsxref("TypeError")}}. In ES2015, un argomento che non è un oggetto verrà trattato come se fosse un normale oggetto già congelato, e verrà perciò semplicemente ritornato.</p> + +<pre class="brush: js">> Object.freeze(1) +TypeError: 1 is not an object // ES5 code + +> Object.freeze(1) +1 // ES2015 code +</pre> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.3.9', 'Object.freeze')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Commento iniziale. Implementato in JavaScript 1.8.5.</td> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-object.freeze', 'Object.freeze')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.freeze', 'Object.freeze')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funzionalità</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Funzionalità di base</td> + <td>{{CompatGeckoDesktop("2")}}</td> + <td>{{CompatChrome("6")}}</td> + <td>{{CompatIE("9")}}</td> + <td>{{CompatOpera("12")}}</td> + <td>{{CompatSafari("5.1")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funzionalità</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Funzionalità di base</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Guarda_anche">Guarda anche</h2> + +<ul> + <li>{{jsxref("Object.isFrozen()")}}</li> + <li>{{jsxref("Object.preventExtensions()")}}</li> + <li>{{jsxref("Object.isExtensible()")}}</li> + <li>{{jsxref("Object.seal()")}}</li> + <li>{{jsxref("Object.isSealed()")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/object/getprototypeof/index.html b/files/it/web/javascript/reference/global_objects/object/getprototypeof/index.html new file mode 100644 index 0000000000..dd72c6cdf3 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/object/getprototypeof/index.html @@ -0,0 +1,130 @@ +--- +title: Object.getPrototypeOf() +slug: Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf +tags: + - ECMAScript5 + - ECMAScript6 + - JavaScript + - Method + - Object +translation_of: Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf +--- +<div>{{JSRef}}</div> + +<p>Il metodo <code><strong>Object.getPrototypeOf()</strong></code> restituisce il prototipo (ovvero il valore della proprietà interna <code>[[Prototype]]</code>) dell'oggetto specificato.</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><code>Object.getPrototypeOf(<var>obj</var>)</code></pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>L'oggetto di cui si vuole ottenere il prototipo.</dd> +</dl> + +<h2 id="Esempi">Esempi</h2> + +<pre class="brush: js">var proto = {}; +var obj = Object.create(proto); +Object.getPrototypeOf(obj) === proto; // true +</pre> + +<h2 id="Note">Note</h2> + +<p>Se il parametro obj non è un oggetto, nello standard ES5 il metodo innescherà un'eccezione {{jsxref("TypeError")}}, mentre nello standard ES6 il parametro sarà assegnato forzatamente ad un {{jsxref("Object")}}.</p> + +<pre class="brush: js">Object.getPrototypeOf("foo"); +// TypeError: "foo" is not an object (ES5 code) +Object.getPrototypeOf("foo"); +// String.prototype (ES6 code) +</pre> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commenti</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.3.2', 'Object.getPrototypeOf')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Prima definizione.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.getprototypeof', 'Object.getProtoypeOf')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_fra_i_Browser">Compatibilità fra i Browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome("5")}}</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>{{CompatIE("9")}}</td> + <td>{{CompatOpera("12.10")}}</td> + <td>{{CompatSafari("5")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Note_specifiche_su_Opera">Note specifiche su Opera</h2> + +<p>Anche se le vecchie versioni di Opera non supportano ancora il metodo <code>Object.getPrototypeOf()</code>, comunque dalla versione 10.50 è stata implementata la proprietà non standard {{jsxref("Object.proto", "__proto__")}}.</p> + +<h2 id="Guarda_anche">Guarda anche</h2> + +<ul> + <li>{{jsxref("Object.prototype.isPrototypeOf()")}}</li> + <li>{{jsxref("Object.setPrototypeOf()")}} {{experimental_inline}}</li> + <li>{{jsxref("Object.prototype.__proto__")}}</li> + <li>Il post di John Resig su <a class="external" href="http://ejohn.org/blog/objectgetprototypeof/">getPrototypeOf</a></li> + <li>{{jsxref("Reflect.getPrototypeOf()")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/object/hasownproperty/index.html b/files/it/web/javascript/reference/global_objects/object/hasownproperty/index.html new file mode 100644 index 0000000000..7287ed1e18 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/object/hasownproperty/index.html @@ -0,0 +1,164 @@ +--- +title: Object.prototype.hasOwnProperty() +slug: Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty +tags: + - JavaScript + - Object + - Prototype + - hasOwnProperty + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty +--- +<div>{{JSRef}}</div> + +<p>Il metodo <strong><code>hasOwnProperty()</code></strong> restituisce un valore booleano che indica se l'oggetto ha la proprietà specificata come propria proprietà (invece di ereditarla).</p> + +<div>{{EmbedInteractiveExample("pages/js/object-prototype-hasownproperty.html")}}</div> + + + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><var>obj</var>.hasOwnProperty(<var>prop</var>)</pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt><var>prop</var></dt> + <dd>Il nome della {{jsxref("String")}} o il {{Glossary("Symbol")}} della proprietà da testare.</dd> +</dl> + +<h3 id="Valore_di_ritorno">Valore di ritorno</h3> + +<p>Un {{jsxref("Boolean")}} che indica se l'oggetto ha o meno la proprietà specificata come proprietà propria.</p> + +<h2 id="Descrizione">Descrizione</h2> + +<p>Tutti i discendenti di {{jsxref("Object")}} ereditano il metodo <code>hasOwnProperty</code>. Questo metodo può essere utilizzato per determinare se un oggetto ha la proprietà specificata come proprietà diretta di tale oggetto; a differenza dell'operatore {{jsxref("Operators/in", "in")}}, questo metodo non controlla una proprietà nella catena di prototipi dell'oggetto.</p> + +<h2 id="Note">Note</h2> + +<p><code>hasOwnProperty</code> restituisce true anche se il valore della proprietà è <code>null</code> o <code>undefined</code>.</p> + +<pre class="brush: js">o = new Object(); +o.propOne = null; +o.hasOwnProperty('propOne'); // ritorna true +o.propTwo = undefined; +o.hasOwnProperty('propTwo'); // ritorna true +</pre> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Usare_hasOwnProperty_per_verificare_l'esistenza_di_una_proprietà">Usare <code>hasOwnProperty</code> per verificare l'esistenza di una proprietà</h3> + +<p>L'esempio seguente determina se l'oggetto o contiene una proprietà denominata <code>prop</code>:</p> + +<pre class="brush: js">o = new Object(); +o.hasOwnProperty('prop'); // ritorna false +o.prop = 'exists'; +o.hasOwnProperty('prop'); // ritorna true +</pre> + +<h3 id="Dirette_vs._proprietà_ereditate">Dirette vs. proprietà ereditate</h3> + +<p>Il seguente esempio distingue tra proprietà dirette e proprietà ereditate attraverso la catena del prototipo:</p> + +<pre class="brush: js">o = new Object(); +o.prop = 'exists'; +o.hasOwnProperty('prop'); // ritorna true +o.hasOwnProperty('toString'); // ritorna false +o.hasOwnProperty('hasOwnProperty'); // ritorna false +</pre> + +<h3 id="Iterare_sulle_proprietà_di_un_oggetto">Iterare sulle proprietà di un oggetto</h3> + +<p>L'esempio seguente mostra come eseguire iterazioni sulle proprietà di un oggetto senza eseguire l'esecuzione su proprietà ereditate. Si noti che il ciclo {{jsxref("Statements/for...in", "for...in")}} sta già solo iterando gli oggetti enumerabili, quindi non si dovrebbe assumere in base alla mancanza di proprietà non enumerabili mostrate nel ciclo che <code>hasOwnProperty</code> è strettamente limitato agli elementi enumerabili (come con {{jsxref("Object.getOwnPropertyNames()")}}).</p> + +<pre class="brush: js">var buz = { + fog: 'stack' +}; + +for (var name in buz) { + if (buz.hasOwnProperty(name)) { + console.log('this is fog (' + + name + ') for sure. Value: ' + buz[name]); + } + else { + console.log(name); // toString o qualcos'altro + } +} +</pre> + +<h3 id="Usare_hasOwnProperty_come_nome_di_una_proprietà">Usare <code>hasOwnProperty</code> come nome di una proprietà</h3> + +<p>JavaScript non protegge il nome della proprietà <code>hasOwnProperty</code>; quindi, se esiste la possibilità che un oggetto possa avere una proprietà con questo nome, è necessario utilizzare un <code>hasOwnProperty</code> <em>esterno</em> per ottenere risultati corretti:</p> + +<pre class="brush: js">var foo = { + hasOwnProperty: function() { + return false; + }, + bar: 'Here be dragons' +}; + +foo.hasOwnProperty('bar'); // restituisce sempre false + +// Usare hasOwnProperty di un altro oggetto +// e chiamarlo con 'this' impostato su foo +({}).hasOwnProperty.call(foo, 'bar'); // true + +// È anche possibile utilizzare la proprietà hasOwnProperty +// dal prototipo Object per questo scopo +Object.prototype.hasOwnProperty.call(foo, 'bar'); // true +</pre> + +<p>Nota che nell'ultimo caso non ci sono oggetti appena creati.</p> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.prototype.hasownproperty', 'Object.prototype.hasOwnProperty')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.prototype.hasownproperty', 'Object.prototype.hasOwnProperty')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.4.5', 'Object.prototype.hasOwnProperty')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Definizione iniziale Implementato in JavaScript 1.5.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + + + +<p>{{Compat("javascript.builtins.Object.hasOwnProperty")}}</p> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li><a href="/en-US/docs/Enumerability_and_ownership_of_properties">Enumerabilità e proprietà delle proprietà</a></li> + <li>{{jsxref("Object.getOwnPropertyNames()")}}</li> + <li>{{jsxref("Statements/for...in", "for...in")}}</li> + <li>{{jsxref("Operators/in", "in")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">Guida JavaScript: Ereditarietà rivisitata</a></li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/object/index.html b/files/it/web/javascript/reference/global_objects/object/index.html new file mode 100644 index 0000000000..8c567d9ea2 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/object/index.html @@ -0,0 +1,224 @@ +--- +title: Object +slug: Web/JavaScript/Reference/Global_Objects/Object +tags: + - Constructor + - JavaScript + - NeedsBrowserCompatibility + - NeedsMobileBrowserCompatibility + - Object + - TopicStub +translation_of: Web/JavaScript/Reference/Global_Objects/Object +--- +<div>{{JSRef("Global_Objects", "Object")}}</div> + +<h2 id="Summary" name="Summary">Sommari</h2> + +<p>Il costruttore <strong>Object</strong> crea un oggetto.</p> + +<h2 id="Syntax" name="Syntax">Sintassi</h2> + +<pre class="syntaxbox"><code><code>// Letterale +{ <em>[ coppiaNomeValore1 [, </em></code></code>coppiaNomeValore<code><code><em>2 [, ...</em></code></code>coppiaNomeValore<code><code><em>N] ] ]</em> } + +// Richiamato come una classe +</code>new Object( <em>[ value ]</em> )</code></pre> + +<h3 id="Parameters" name="Parameters">Parametri</h3> + +<dl> + <dt>coppiaNomeValore1, coppiaNomeValore2, ... coppiaNomeValoreN</dt> + <dd>Coppie formate da un nome (una stringa) e un valore (di qualsiasi tipo), dove il nome è separato dal valore con i due punti.</dd> + <dd> + <pre class="brush: js">{ + "nome1": "valore1", + nome2: "valore2" // Gli apici nel nome sono opzionali +}; +</pre> + </dd> +</dl> + +<dl> + <dt>value</dt> + <dd>Qualsiasi valore.</dd> +</dl> + +<h2 id="Description" name="Description">Descrizione</h2> + +<p>Il costruttore <code>Object</code> crea un oggetto avente il valore dato. Se il valore è {{jsxref("Global_Objects/null", "null")}} o {{jsxref("Global_Objects/undefined", "undefined")}}, verrà creato un oggetto vuoto; altrimenti un oggetto del tipo corrispondente al valore dato. Se il valore è già un oggetto, verra restituito senza alcuna modifica.</p> + +<p>Quando richiamato come normale funzione, il comportamento di <code>Object()</code> è identico a <code>new Object()</code>.</p> + +<h2 id="Properties" name="Properties">Proprietà del costruttore <code>Object</code></h2> + +<dl> + <dt><code>Object.length</code></dt> + <dd>Ha valore pari a <code>1</code>.</dd> + <dt>{{jsxref("Object.prototype")}}</dt> + <dd>Permette di aggiungere altre proprietà ad ogni oggetto di tipo <code>Object</code>.</dd> +</dl> + +<p>{{ jsOverrides("Function", "Properties", "prototype") }}</p> + +<h2 id="Methods" name="Methods">Metodi del costruttore <code>Object</code></h2> + +<dl> + <dt>{{jsxref("Object.assign()")}} {{experimental_inline}}</dt> + <dd>Crea un nuovo oggetto copiando i valori di tutti le proprietà enumerabili da uno o più oggetti.</dd> + <dt>{{jsxref("Object.create()")}}</dt> + <dd>Crea un nuovo oggetto utilizzando il prototipo e le proprietà specificate.</dd> + <dt>{{jsxref("Object.defineProperty()")}}</dt> + <dd>Aggiunge una proprietà descritta dall'oggetto specificato.</dd> + <dt>{{jsxref("Object.defineProperties()")}}</dt> + <dd>Aggiunge più proprietà descritte dall'oggetto specificato.</dd> + <dt>{{jsxref("Object.freeze()")}}</dt> + <dd>Congela un oggetto: le sue proprietà non possono più essere cancellate o modificate.</dd> + <dt>{{jsxref("Object.getOwnPropertyDescriptor()")}}</dt> + <dd>Restituisce un oggetto che descriva la proprietà specificata.</dd> + <dt>{{jsxref("Object.getOwnPropertyNames()")}}</dt> + <dd>Restituisce un array contenente i nomi di tutte le proprietà (enumerabili e non-enumerabili) dell'oggetto specificato.</dd> + <dt>{{jsxref("Object.getPrototypeOf()")}}</dt> + <dd>Restituisce il prototipo dell'oggetto specificato.</dd> + <dt>{{jsxref("Object.is()")}} {{ experimental_inline() }}</dt> + <dd>Determina se due valori sono o no uguali (quindi lo stesso oggetto).</dd> + <dt>{{jsxref("Object.isExtensible()")}}</dt> + <dd>Determina se è permesso estendere un oggetto.</dd> + <dt>{{jsxref("Object.isFrozen()")}}</dt> + <dd>Determina se un oggetto è stato congelato.</dd> + <dt>{{jsxref("Object.isSealed()")}}</dt> + <dd>Determina se un oggetto è stato sigillato.</dd> + <dt>{{jsxref("Object.keys()")}}</dt> + <dd>Restituisce un array contenente i nomi di tutte le proprietà enumerabili dell'oggetto.</dd> + <dt>{{jsxref("Object.observe()")}} {{experimental_inline}}</dt> + <dd>Osserva i cambiamenti di un oggetto in modo asincrono.</dd> + <dt>{{jsxref("Object.preventExtensions()")}}</dt> + <dd>Impedisce ad un oggetto di essere esteso.</dd> + <dt>{{jsxref("Object.seal()")}}</dt> + <dd>Impedisce di eliminare le proprietà di un oggetto.</dd> + <dt>{{jsxref("Object.setPrototypeOf()")}} {{experimental_inline}}</dt> + <dd> + <p>Imposta i prototipo (quindi la proprietà intena <code>[[Prototype]]</code>) di un oggetto.</p> + </dd> +</dl> + +<p>{{jsOverrides("Function", "Methods", "create", "defineProperty", "defineProperties", "getOwnPropertyDescriptor", "getPrototypeOf")}}</p> + +<h2 id="Object_instances" name="Object_instances">Instanze di <code>Object</code> e l'oggetto prototipo <code>Object</code></h2> + +<p>In JavaScript, tutti gli oggetti sono discendenti di <code>Object</code>; tutti gli oggetti ereditano metodi e proprietà di {{jsxref("Object.prototype")}}, anche se queste possono essere sovrascritte. Per esempio, i prototpipi degli altri costruttori sovrascrivono la proprietà <code>constructor</code> e forniscono un loro metodo <code>toString()</code>. I cambiamenti al prototipo di <code>Object</code> venogno estesi a tutti gli oggetti, eccetto quelli che sovrascrivono le proprietà e i metodi cambiati.</p> + +<h3 id="Properties_of_Object_instances" name="Properties_of_Object_instances">Poprietà</h3> + +<p>{{page('/it/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype', 'Properties') }}</p> + +<h3 id="Methods_of_Object_instances" name="Methods_of_Object_instances">Metodi</h3> + +<p>{{page('/it/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype', 'Methods') }}</p> + +<h2 id="Examples" name="Examples">Esempi</h2> + +<h3 id="Usare_Object_con_i_valori_null_e_undefined">Usare <code>Object</code> con i valori <code>null</code> e <code>undefined</code></h3> + +<p>Questi esempi restituiscono tutti lo stesso oggetto:</p> + +<pre class="brush: js">var o = {};</pre> + +<pre class="brush: js">var o = new Object(); +</pre> + +<pre class="brush: js">var o = new Object(undefined); +</pre> + +<pre class="brush: js">var o = new Object(null); +</pre> + +<h3 id="Usare_Object_per_creare_oggetti_Boolean">Usare <code>Object</code> per creare oggetti <code>Boolean</code></h3> + +<p>I seguenti esempi assegnano alla variabile <code>o</code> un oggetto {{jsxref("Global_Objects/Boolean", "Boolean")}}:</p> + +<pre class="brush: js">var o = new Object(true); +// Equivalente a new Boolean(true)</pre> + +<pre class="brush: js">var o = new Object(Boolean()); +// Equivalente a new Boolean(false)</pre> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commenti</th> + </tr> + <tr> + <td>ECMAScript 1st Edition. Implemented in JavaScript 1.0</td> + <td>Standard</td> + <td>Definizione iniziale.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2', 'Object')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object-objects', 'Object')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funzionalità</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Supporto di base</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th><span style="font-family: 'Open Sans Light',sans-serif; font-size: 16px; line-height: 16px;">Funzionalità</span></th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td><span style="font-size: 12px; line-height: 18px;">Supporto di base</span></td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<p> </p> diff --git a/files/it/web/javascript/reference/global_objects/object/is/index.html b/files/it/web/javascript/reference/global_objects/object/is/index.html new file mode 100644 index 0000000000..ffb979fcb5 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/object/is/index.html @@ -0,0 +1,130 @@ +--- +title: Object.is() +slug: Web/JavaScript/Reference/Global_Objects/Object/is +tags: + - Comparazione + - Condizionale + - Condizione + - ECMAScript 2015 + - Equalità + - Italiano + - JavaScript + - Oggetto + - Uguaglianza + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/Object/is +--- +<div>{{JSRef}}</div> + +<p>Il metodo <code><strong>Object.is()</strong></code> determina se i due parametri di input hanno lo <a href="/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness"> stesso valore</a>.</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><code>Object.is(<var>value1</var>, <var>value2</var>);</code></pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt><code>value1</code></dt> + <dd>Il primo valore da comparare.</dd> + <dt><code>value2</code></dt> + <dd>Il secondo valore da comparare.</dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p>A {{jsxref("Boolean")}} indicating whether or not the two arguments are the same value.</p> + +<h2 id="Descrizione">Descrizione</h2> + +<p><code>Object.is()</code> determina se <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness">due valori sono uguali</a>. Due valori sono uguali se sono :</p> + +<ul> + <li>entrambi {{jsxref("undefined")}}</li> + <li>entrambi {{jsxref("null")}}</li> + <li>entrambi <code>true</code> o entrambi <code>false</code></li> + <li>entrambi stringhe della stessa lunghezza con gli stessi caratteri</li> + <li>entrambi lo stesso oggetto</li> + <li>entrambi numeri ed + <ul> + <li>entrambi <code>+0</code></li> + <li>entrambi <code>-0</code></li> + <li>entrambi {{jsxref("NaN")}}</li> + <li>o entrambi non sono 0 ed entrambi non sono {{jsxref("NaN")}} ed entrambi hanno lo stesso valore</li> + </ul> + </li> +</ul> + +<p>Questo <em>non</em> è la stessa uguaglianza dell'operatore {{jsxref("Operators/Comparison_Operators", "==", "#Equality")}}. L'operatore {{jsxref("Operators/Comparison_Operators", "==", "#Equality")}} applica varie conversioni ad entrambi (se non sono dello stesso tipo) prima di testare l'uguaglianza (ad esempio, <code>"" == false</code> risultando <code>true</code>), ma <code>Object.is</code> non converte i loro valori.</p> + +<p>Inoltre questo <em>non</em> è la stessa uguaglianza dell'operatore {{jsxref("Operators/Comparison_Operators", "===", "#Identity")}}. L'operatore {{jsxref("Operators/Comparison_Operators", "===", "#Identity")}} (ed anche l'operatore {{jsxref("Operators/Comparison_Operators", "==", "#Equality")}}) trattano i numeri <code>-0</code> e <code>+0</code> come uguali e trattano {{jsxref("Number.NaN")}} differentemente da {{jsxref("NaN")}}.</p> + +<h2 id="Esempi">Esempi</h2> + +<pre class="brush: js">Object.is('foo', 'foo'); // true +Object.is(window, window); // true + +Object.is('foo', 'bar'); // false +Object.is([], []); // false + +var test = { a: 1 }; +Object.is(test, test); // true + +Object.is(null, null); // true + +// Casi speciali +Object.is(0, -0); // false +Object.is(-0, -0); // true +Object.is(NaN, 0/0); // true +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<pre class="brush: js">if (!Object.is) { + Object.is = function(x, y) { + // Algoritmo SameValue + if (x === y) { // Steps 1-5, 7-10 + // Steps 6.b-6.e: +0 != -0 + return x !== 0 || 1 / x === 1 / y; + } else { + // Step 6.a: NaN == NaN + return x !== x && y !== y; + } + }; +}</pre> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-object.is', 'Object.is')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Definizione iniziale.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.is', 'Object.is')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_coi_browser">Compatibilità coi browser</h2> + +<div> +<div class="hidden">La compatibility table su questa pagina è generata da dati strutturali. Se vuoi contribuire per i dati, puoi visitare <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> ed inviarci una pull request.</div> + +<p>{{Compat("javascript.builtins.Object.is")}}</p> +</div> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness">Equality comparisons and sameness</a> (in inglese) — un paragone di tutte e tre le facilitazioni per comparare uguaglianze</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/object/isfrozen/index.html b/files/it/web/javascript/reference/global_objects/object/isfrozen/index.html new file mode 100644 index 0000000000..b1220f1ae5 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/object/isfrozen/index.html @@ -0,0 +1,184 @@ +--- +title: Object.isFrozen() +slug: Web/JavaScript/Reference/Global_Objects/Object/isFrozen +tags: + - ECMAScript 5 + - Function + - Italian + - Italiano + - JavaScript + - JavaScript 1.8.5 + - Method + - Object + - Oggetto + - funzione + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/Object/isFrozen +--- +<div>{{JSRef}}</div> + +<p>Il metodo <code><strong>Object.isFrozen()</strong></code> determina se un oggetto è {{jsxref("Object.freeze()", "congelato", "", 1)}}.</p> + +<div>{{EmbedInteractiveExample("pages/js/object-isfrozen.html")}}</div> + +<p class="hidden">Il codice sorgente per questo esempio interattivo si trova in una repository di GitHub. Se vuoi contribuire al progetto degli esempi interattivi, puoi clonare <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> ed inviarci una pull request.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code>Object.isFrozen(<var>obj</var>)</code></pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>L'oggetto da controllare.</dd> +</dl> + +<h3 id="Valori_di_ritorno">Valori di ritorno</h3> + +<p>Un {{jsxref("Boolean")}} che indica se l'oggetto è congelato oppure no.</p> + +<h2 id="Description">Description</h2> + +<p>Un oggetto è congelato solo e soltanto se non è {{jsxref("Object.isExtensible()", "estensibile", "", 1)}}, tutte le sue proprietà sono non-configurabili, e tutte le sue proprietà "data" (che non sono proprietà "accessor", quindi non hanno componenti getter o setters) non sono sovrascrivibili.</p> + +<h2 id="Esempi">Esempi</h2> + +<pre class="brush: js">// Un nuovo oggetto è estensibile, quindi non è congelato. +Object.isFrozen({}); // === false + +// Un oggetto vuoto che non è estensibile +// è vacuamente congelato. +var vacuouslyFrozen = Object.preventExtensions({}); +Object.isFrozen(vacuouslyFrozen); // === true + +// Un nuovo oggetto con una sola proprietà è estensibile, +// quindi non è congelato. +var oneProp = { p: 42 }; +Object.isFrozen(oneProp); // === false + +// Prevenire le estensioni dell'oggetto, comunque non +// lo rende congelato, perché la proprietà è comunque +// configurabile(e sovrascrivibile). +Object.preventExtensions(oneProp); +Object.isFrozen(oneProp); // === false + +// ...ma poi cancellare quella proprietà, rende l'oggetto +// vacuamente congelato. +delete oneProp.p; +Object.isFrozen(oneProp); // === true + +// Un oggetto non-estensibile con una proprietà non-sovrascrivibile, +// ma comunque configurabile, non è congelato. +var nonWritable = { e: 'plep' }; +Object.preventExtensions(nonWritable); +Object.defineProperty(nonWritable, 'e', { + writable: false +}); // rende non-sovrascrivibile +Object.isFrozen(nonWritable); // === false + +// Cambiare quella proprietà in non-configurabile +// rende l'oggetto congelato. +Object.defineProperty(nonWritable, 'e', { + configurable: false +}); // rende non-configurabile +Object.isFrozen(nonWritable); // === true + +// Un oggetto non-estensibile con una proprietà non-configurabile +// ma comunque sovrascribile, non è congelato. +var nonConfigurable = { release: 'the kraken!' }; +Object.preventExtensions(nonConfigurable); +Object.defineProperty(nonConfigurable, 'release', { + configurable: false +}); +Object.isFrozen(nonConfigurable); // === false + +// Cambiare quella proprietà in non-sovrascribile, +// allora rende l'oggetto congelato. +Object.defineProperty(nonConfigurable, 'release', { + writable: false +}); +Object.isFrozen(nonConfigurable); // === true + +// Un oggetto non-estensibile con una configurabile +// proprietà "accessor", non è congelato. +var accessor = { get food() { return 'yum'; } }; +Object.preventExtensions(accessor); +Object.isFrozen(accessor); // === false + +// ...ma poi rendere quella proprietà non-configurabile +// congela l'oggetto. +Object.defineProperty(accessor, 'food', { + configurable: false +}); +Object.isFrozen(accessor); // === true + +// Ma il metodo più veloce per congelare un oggetto, +// è utilizzare il metodo Object.freeze su di esso. +var frozen = { 1: 81 }; +Object.isFrozen(frozen); // === false +Object.freeze(frozen); +Object.isFrozen(frozen); // === true + +// Per definizione, un oggetto congelato non è estensibile. +Object.isExtensible(frozen); // === false + +// E sempre per definizione, un oggetto congelato è anche sigillato. +Object.isSealed(frozen); // === true +</pre> + +<h2 id="Note">Note</h2> + +<p>In ES5, se l'argomento di questo metodo non è un'oggetto, allora verrà generato un {{jsxref("TypeError")}}. In ES2015, un argomento che non è un oggetto verrà trattato come se fosse un normale oggetto già congelato, e perciò verrà semplicemente ritornato <code>true</code>.</p> + +<pre class="brush: js">Object.isFrozen(1); +// TypeError: 1 non è un oggetto (codice in ES5) + +Object.isFrozen(1); +// true (codice in ES2015) +</pre> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.3.12', 'Object.isFrozen')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Definizione iniziale. Implementato in JavaScript 1.8.5.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.isfrozen', 'Object.isFrozen')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.isfrozen', 'Object.isFrozen')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + +<div> +<div class="hidden">La compatibility table su questa pagina è generata da dati strutturali. Se vuoi contribuire per i dati, puoi visitare <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> ed inviarci una pull request.</div> + +<p>{{Compat("javascript.builtins.Object.isFrozen")}}</p> +</div> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>{{jsxref("Object.freeze()")}}</li> + <li>{{jsxref("Object.preventExtensions()")}}</li> + <li>{{jsxref("Object.isExtensible()")}}</li> + <li>{{jsxref("Object.seal()")}}</li> + <li>{{jsxref("Object.isSealed()")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/object/issealed/index.html b/files/it/web/javascript/reference/global_objects/object/issealed/index.html new file mode 100644 index 0000000000..d3bdf1b76b --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/object/issealed/index.html @@ -0,0 +1,146 @@ +--- +title: Object.isSealed() +slug: Web/JavaScript/Reference/Global_Objects/Object/isSealed +tags: + - ECMAScript 5 + - Function + - Italian + - Italiano + - JavaScript + - JavaScript 1.8.5 + - Method + - Object + - Oggetto + - funzione + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/Object/isSealed +--- +<div>{{JSRef}}</div> + +<p>Il metodo <code><strong>Object.isSealed()</strong></code> determina se un oggetto è sigillato.</p> + +<div>{{EmbedInteractiveExample("pages/js/object-issealed.html")}}</div> + +<p class="hidden">Il codice sorgente per questo esempio interattivo si trova in una repository di GitHub. Se vuoi contribuire al progetto degli esempi interattivi, puoi clonare <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> ed inviarci una pull request.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code>Object.isSealed(<var>obj</var>)</code></pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>L'oggetto da controllare.</dd> +</dl> + +<h3 id="Valore_di_ritorno">Valore di ritorno</h3> + +<p>Un {{jsxref("Boolean")}} che indica se l'oggetto è congelato oppure no.</p> + +<h2 id="Descrizione">Descrizione</h2> + +<p>Ritorna <code>true</code> se l'oggetto è sigillato, altrimenti <code>false</code>. Un oggetto è sigillato se non è {{jsxref("Object.isExtensible", "estensibile", "", 1)}} e se tutte le sue proprietà sono non-configurabili e non possono essere rimosse (ma non necessariamente non-sovrascrivibili).</p> + +<h2 id="Esempi">Esempi</h2> + +<pre class="brush: js">// Gli oggetti non sono sigillati di default. +var empty = {}; +Object.isSealed(empty); // === false + +// Se rendi un oggetto vuoto non-estensibile, +// è vacuamente sigillato. +Object.preventExtensions(empty); +Object.isSealed(empty); // === true + +// Lo stesso non si verifica con un oggetto non vuoto, +// a meno che le sue proprietà non sono tutte non-configurabili. +var hasProp = { fee: 'fie foe fum' }; +Object.preventExtensions(hasProp); +Object.isSealed(hasProp); // === false + +// Ma rendere tutte le sue proprietà non-configurabili +// rende l'oggetto effettivamente sigillato. +Object.defineProperty(hasProp, 'fee', { + configurable: false +}); +Object.isSealed(hasProp); // === true + +// Il metodo più veloce per sigillare un oggetto, ovviamente, +// è il metodo Object.seal. +var sealed = {}; +Object.seal(sealed); +Object.isSealed(sealed); // === true + +// Un oggetto sigillato è, per definizione, non-estensibile. +Object.isExtensible(sealed); // === false + +// Un oggetto sigillato può anche essere congelato, +// ma non è necessario. +Object.isFrozen(sealed); // === true +// (tutte le proprietà sono anche non-sovrascrivibili) + +var s2 = Object.seal({ p: 3 }); +Object.isFrozen(s2); // === false +// ('p' è comunque sovrascrivibile) + +var s3 = Object.seal({ get p() { return 0; } }); +Object.isFrozen(s3); // === true +// (per le proprietà "accessor", è importante solo la configurabilità della proprietà) +</pre> + +<h2 id="Note">Note</h2> + +<p>In ES5, se l'argomento di questo metodo non è un'oggetto, allora verrà generato un {{jsxref("TypeError")}}. In ES2015, un argomento che non è un oggetto verrà trattato come se fosse un normale oggetto già sigillato, e perciò verrà semplicemente ritornato <code>true</code>.</p> + +<pre class="brush: js">Object.isSealed(1); +// TypeError: 1 non è un oggetto (codice in ES5) + +Object.isSealed(1); +// true (codice in ES2015) +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.3.11', 'Object.isSealed')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Definizione iniziale. Implementato in JavaScript 1.8.5.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.issealed', 'Object.isSealed')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.issealed', 'Object.isSealed')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + +<div> +<div class="hidden">Il codice sorgente per questo esempio interattivo si trova in una repository di GitHub. Se vuoi contribuire al progetto degli esempi interattivi, puoi clonare <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> ed inviarci una pull request.</div> + +<p>{{Compat("javascript.builtins.Object.isSealed")}}</p> +</div> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>{{jsxref("Object.seal()")}}</li> + <li>{{jsxref("Object.preventExtensions()")}}</li> + <li>{{jsxref("Object.isExtensible()")}}</li> + <li>{{jsxref("Object.freeze()")}}</li> + <li>{{jsxref("Object.isFrozen()")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/object/keys/index.html b/files/it/web/javascript/reference/global_objects/object/keys/index.html new file mode 100644 index 0000000000..ed748c0fad --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/object/keys/index.html @@ -0,0 +1,167 @@ +--- +title: Object.keys() +slug: Web/JavaScript/Reference/Global_Objects/Object/keys +tags: + - ECMAScript5 + - JavaScript + - JavaScript 1.8.5 + - Metodi + - Oggetti +translation_of: Web/JavaScript/Reference/Global_Objects/Object/keys +--- +<div> + {{JSRef("Global_Objects", "Object")}}</div> +<h2 id="Summary" name="Summary">Sommario</h2> +<p>Il metodo <code><strong>Object.keys()</strong></code> restituisce un array contenente le proprietà enumerabili di un dato oggetto, nel medesimo ordine fornito da un ciclo <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in"><code>for...in</code></a> (la differenza è che un ciclo for-in enumera anche le proprietà nella catena di prototipi).</p> +<h2 id="Syntax" name="Syntax">Sintassi</h2> +<pre class="syntaxbox"><code>Object.keys(<em>obj</em>)</code></pre> +<h3 id="Parameters" name="Parameters">Parametri</h3> +<dl> + <dt> + <em>obj</em></dt> + <dd> + L'oggetto del quale si devono restituire le proprietà enumerabili.</dd> +</dl> +<h2 id="Description" name="Description">Descrizione</h2> +<p><code>Object.keys</code> restituisce un array i quali elementi sono stringhe corrispondenti alle proprietà enumerabili trovate direttamente in <code>obj</code>. L'ordine delle proprietà è lo stesso di quello dato ciclando manualmente sulle proprietà dell'oggetto.</p> +<h2 id="Esempi">Esempi</h2> +<pre class="brush: js">var arr = ["a", "b", "c"]; +alert(Object.keys(arr)); // chiama alert con argomento "0,1,2" + +// array like object +var obj = { 0 : "a", 1 : "b", 2 : "c"}; +alert(Object.keys(obj)); // chiama alert con argomento "0,1,2" + +// array like object with random key ordering +var an_obj = { 100: "a", 2: "b", 7: "c"}; +alert(Object.keys(an_obj)); // chiama alert con argomento "2, 7, 100" + +// getFoo is property which isn't enumerable +var my_obj = Object.create({}, { getFoo : { value : function () { return this.foo } } }); +my_obj.foo = 1; + +alert(Object.keys(my_obj)); // chiama alert con foo come unico argomento +</pre> +<p>Per ottenere tutte le proprietà, anche quelle non enumerabili, si veda {{jsxref("Object.getOwnPropertyNames")}}.</p> +<h2 id="Polyfill">Polyfill</h2> +<p>Per aggiungere un supporto equivalente a <code>Object.keys,</code> in ambienti datati che non lo supportino nativamente, si copi il seguente frammento di codice:</p> +<pre class="brush: js">// Da https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys +if (!Object.keys) { + Object.keys = (function () { + 'use strict'; + var hasOwnProperty = Object.prototype.hasOwnProperty, + hasDontEnumBug = !({toString: null}).propertyIsEnumerable('toString'), + dontEnums = [ + 'toString', + 'toLocaleString', + 'valueOf', + 'hasOwnProperty', + 'isPrototypeOf', + 'propertyIsEnumerable', + 'constructor' + ], + dontEnumsLength = dontEnums.length; + + return function (obj) { + if (typeof obj !== 'object' && (typeof obj !== 'function' || obj === null)) { + throw new TypeError('Object.keys called on non-object'); + } + + var result = [], prop, i; + + for (prop in obj) { + if (hasOwnProperty.call(obj, prop)) { + result.push(prop); + } + } + + if (hasDontEnumBug) { + for (i = 0; i < dontEnumsLength; i++) { + if (hasOwnProperty.call(obj, dontEnums[i])) { + result.push(dontEnums[i]); + } + } + } + return result; + }; + }()); +} +</pre> +<p>Si noti che il codice sopra include chiavi non-enumerabili in IE7 (e forse IE8), nel caso in cui si passi un oggetto proveniente da un'altra finestra.</p> +<p>Per un semplice polyfill, si veda <a href="http://tokenposts.blogspot.com.au/2012/04/javascript-objectkeys-browser.html">Javascript - Object.keys Browser Compatibility</a>.</p> +<h2 id="Specifiche">Specifiche</h2> +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.3.14', 'Object.keys')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Definizione iniziale.<br> + implementato in in JavaScript 1.8.5</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.keys', 'Object.keys')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> +<h2 id="Compatibilità_dei_browser">Compatibilità dei browser</h2> +<div> + {{CompatibilityTable}}</div> +<div id="compat-desktop"> + <table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Supporto base</td> + <td>4 (2.0)</td> + <td>5</td> + <td>9</td> + <td>12</td> + <td>5</td> + </tr> + </tbody> + </table> +</div> +<div id="compat-mobile"> + <table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Supporto base</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> + </table> +</div> +<p>Basato su <a href="http://kangax.github.com/es5-compat-table/">Kangax's compat table</a>.</p> +<h2 id="See_also" name="See_also">Vedere anche</h2> +<ul> + <li><a href="/en-US/docs/Enumerability_and_ownership_of_properties">Enumerability and ownership of properties</a></li> + <li>{{jsxref("Object.prototype.propertyIsEnumerable")}}</li> + <li>{{jsxref("Object.create")}}</li> + <li>{{jsxref("Object.getOwnPropertyNames")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/object/observe/index.html b/files/it/web/javascript/reference/global_objects/object/observe/index.html new file mode 100644 index 0000000000..4307b4e75f --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/object/observe/index.html @@ -0,0 +1,189 @@ +--- +title: Object.observe() +slug: Web/JavaScript/Reference/Global_Objects/Object/observe +translation_of: Archive/Web/JavaScript/Object.observe +--- +<div>{{JSRef}} {{obsolete_header}}</div> + +<h2 id="Sommario">Sommario</h2> + +<p>Il metodo <strong><code>Object.observe()</code></strong> è usato per l'osservazione asincrona dei cambiamenti di un oggetto. Esso fornisce uno stream dei cambiamenti nell'ordine in cui si verificano.</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><code>Object.observe(<var>obj</var>, <var>callback</var>[, <var>acceptList</var>])</code></pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>L'oggetto che verrà osservato.</dd> + <dt><code>callback</code></dt> + <dd>La funzione richiamata ogni volta che si verificano delle modifiche, con i seguenti argomenti: + <dl> + <dt><code>changes</code></dt> + <dd>Un array di oggetti di oggetti che rappresentano una modifica. Le properties di questi oggetti sono: + <ul> + <li><strong><code>name</code></strong>: Il nome della property che è stata modificata.</li> + <li><strong><code>object</code></strong>: L'oggetto modificato dopo che la modifica è avvenuta.</li> + <li><strong><code>type</code></strong>: Una stringa che indica il tipo di modifica in atto. Può essere valorizzata con <code>"add"</code>, <code>"update"</code> o <code>"delete"</code>.</li> + <li><strong><code>oldValue</code></strong>: Solo per i tipi <code>"update"</code> e <code>"delete"</code>. Indica il valore prima della modifica.</li> + </ul> + </dd> + </dl> + </dd> + <dt><code>acceptList</code></dt> + <dd>La lista dei tipi di modifiche che possono essere osservate su un dato oggetto per un dato callback. Se omesso, sarà usato l'array <code>["add", "update", "delete", "reconfigure", "setPrototype", "preventExtensions"]</code>.</dd> +</dl> + +<h2 id="Descrizione">Descrizione</h2> + +<p>La funzione <code>callback</code> è chiamata ogni volta che una modifica viene fatta sull'<span style="font-family: Consolas,Monaco,'Andale Mono',monospace;">obj.</span> Ad essa viene passata un'array di tutte le modifiche, nell'ordine in cui si verificano.</p> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Esempio_Log_di_tutti_e_sei_differenti_tipi">Esempio: Log di tutti e sei differenti tipi</h3> + +<pre class="brush: js">var obj = { + foo: 0, + bar: 1 +}; + +Object.observe(obj, function(changes) { + console.log(changes); +}); + +obj.baz = 2; +// [{name: 'baz', object: <obj>, type: 'add'}] + +obj.foo = 'hello'; +// [{name: 'foo', object: <obj>, type: 'update', oldValue: 0}] + +delete obj.baz; +// [{name: 'baz', object: <obj>, type: 'delete', oldValue: 2}] + +Object.defineProperty(obj, 'foo', {writable: false}); +// [{name: 'foo', object: <obj>, type: 'reconfigure'}] + +Object.setPrototypeOf(obj, {}); +// [{name: '__proto__', object: <obj>, type: 'setPrototype', oldValue: <prototype>}] + +Object.seal(obj); +// [ +// {name: 'foo', object: <obj>, type: 'reconfigure'}, +// {name: 'bar', object: <obj>, type: 'reconfigure'}, +// {object: <obj>, type: 'preventExtensions'} +// ] +</pre> + +<h3 id="Esempio_Data_Binding">Esempio: Data Binding</h3> + +<pre class="brush: js">// A user model +var user = { + id: 0, + name: 'Brendan Eich', + title: 'Mr.' +}; + +// Create a greeting for the user +function updateGreeting() { + user.greeting = 'Hello, ' + user.title + ' ' + user.name + '!'; +} +updateGreeting(); + +Object.observe(user, function(changes) { + changes.forEach(function(change) { + // Any time name or title change, update the greeting + if (change.name === 'name' || change.name === 'title') { + updateGreeting(); + } + }); +}); +</pre> + +<h3 id="Esempio_Tipo_di_modifica_personalizzata">Esempio: Tipo di modifica personalizzata</h3> + +<pre class="brush: js">// A point on a 2D plane +var point = {x: 0, y: 0, distance: 0}; + +function setPosition(pt, x, y) { + // Performing a custom change + Object.getNotifier(pt).performChange('reposition', function() { + var oldDistance = pt.distance; + pt.x = x; + pt.y = y; + pt.distance = Math.sqrt(x * x + y * y); + return {oldDistance: oldDistance}; + }); +} + +Object.observe(point, function(changes) { + console.log('Distance change: ' + (point.distance - changes[0].oldDistance)); +}, ['reposition']); + +setPosition(point, 3, 4); +// Distance change: 5 +</pre> + +<h2 id="Specifications" name="Specifications">Specifiche</h2> + +<p><a href="https://github.com/arv/ecmascript-object-observe">Argomentazione proposta per ECMAScript 7</a>.</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilita browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Caratteristica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Supporto base</td> + <td>{{CompatChrome("36")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatOpera("23")}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Supporto base</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome("36")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatOpera("23")}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">Vedi anche</h2> + +<ul> + <li>{{jsxref("Object.unobserve()")}} {{experimental_inline}}</li> + <li>{{jsxref("Array.observe()")}} {{experimental_inline}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/object/prototype/index.html b/files/it/web/javascript/reference/global_objects/object/prototype/index.html new file mode 100644 index 0000000000..ea834e65de --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/object/prototype/index.html @@ -0,0 +1,214 @@ +--- +title: Object.prototype +slug: Web/JavaScript/Reference/Global_Objects/Object/prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Object +--- +<div>{{JSRef("Global_Objects", "Object")}}</div> + +<h2 id="Summary" name="Summary">Sommario</h2> + +<p>La proprietà <strong><code>Object.prototype</code></strong> rappresenta l'oggetto prototipo di {{jsxref("Global_Objects/Object", "Object")}}.</p> + +<p>{{js_property_attributes(0, 0, 0)}}</p> + +<h2 id="Description" name="Description">Descrizione</h2> + +<p>In JavaScript, tutti gli oggetti sono discendenti di {{jsxref("Global_Objects/Object", "Object")}}; tutti gli oggetti ereditano metodi e proprietà di <code>Object.prototype</code> (tranne nel caso l'oggetto abbia il prototipo uguale a {{jsxref("Global_Objects/null", "null")}}, quindi creati con il metodo {{jsxref("Object.create", "Object.create(null)")}}), anche se questi possono essere sovrascritti. Per esempio, i prototipi degli altri costruttori sovrascrivono la proprietà <code>constructor</code> e forniscono un loro metodo {{jsxref("Object.prototype.toString", "toString()")}}. I cambiamenti al prototipo di Object vengono estesi a tutti gli oggetti, eccetto quelli che sovrascrivono le proprietà e i metodi cambiati.</p> + +<h2 id="Properties" name="Properties">Proprietà</h2> + +<dl> + <dt>{{jsxref("Object.prototype.constructor")}}</dt> + <dd>Specifica la funzione che ha creato l'oggetto a partire dal prototipo.</dd> + <dt>{{jsxref("Object.prototype.__proto__")}} {{non-standard_inline}}</dt> + <dd>È un riferimento all'oggetto usato come prototipo quando l'oggetto è stato istanziato.</dd> + <dt>{{jsxref("Object.prototype.__noSuchMethod__")}} {{non-standard_inline}}</dt> + <dd>Permette di definire una funzione che venga chiamata quando viene chiamato un metodo non definito.</dd> + <dt><s class="obsoleteElement">{{jsxref("Object.prototype.__count__")}} {{obsolete_inline}}</s></dt> + <dd><s class="obsoleteElement">Rappresenta il numero di proprietà persenti in un oggetto, ma è stato rimosso.</s></dd> + <dt><s class="obsoleteElement">{{jsxref("Object.prototype.__parent__")}} {{obsolete_inline}}</s></dt> + <dd><s class="obsoleteElement">Rappresenta il contesto di un oggetto, ma è stato rimosso.</s></dd> +</dl> + +<h2 id="Methods" name="Methods">Metodi</h2> + +<dl> + <dt>{{jsxref("Object.prototype.__defineGetter__()")}} {{non-standard_inline}} {{deprecated_inline}}</dt> + <dd>Associa una funzione a una proprietà di un oggetto. Quando si tenta di leggere il valore di tale proprietà, viene eseguita la funzione e restituito il valore che restituisce.</dd> + <dt>{{jsxref("Object.prototype.__defineSetter__()")}} {{non-standard_inline}} {{deprecated_inline}}</dt> + <dd>Associa una funzione a una proprietà di un oggetto. Quando si tenta di cambiare il valore di tale proprietà, viene eseguita la funzione.</dd> + <dt>{{jsxref("Object.prototype.__lookupGetter__()")}} {{non-standard_inline}} {{deprecated_inline}}</dt> + <dd>Restituisce la funzione definita tramite {{jsxref("Object.prototype.defineGetter", "__defineGetter__()")}}.</dd> + <dt>{{jsxref("Object.prototype.__lookupSetter__()")}} {{non-standard_inline}} {{deprecated_inline}}</dt> + <dd>Restituisce la funzione definita tramite {{jsxref("Object.prototype.defineSetter", "__defineSetter__()")}}.</dd> + <dt>{{jsxref("Object.prototype.hasOwnProperty()")}}</dt> + <dd>Determina se l'oggetto contiene direttamente una proprietà (non ereditata tramite il prototipo).</dd> + <dt>{{jsxref("Object.prototype.isPrototypeOf()")}}</dt> + <dd>Determina se un oggetto fa parte della catena dei prototipi dell'oggetto sul quale è richiamato questo metodo.</dd> + <dt>{{jsxref("Object.prototype.propertyIsEnumerable()")}}</dt> + <dd>Determina se l'<a href="/it/docs/ECMAScript_DontEnum_attribute" title="ECMAScript_DontEnum_attribute">attributo DontEnum di ECMAScript</a> interno è presente.</dd> + <dt>{{jsxref("Object.prototype.toSource()")}} {{non-standard_inline}}</dt> + <dd>Restituisce una stringa contenente il codice sorgente di un oggetto rappresentante l'oggetto sul quale questo metodo viene richiamato; puoi usare questo valore per creare un nuovo oggetto.</dd> + <dt>{{jsxref("Object.prototype.toLocaleString()")}}</dt> + <dd>Richiama {{jsxref("Object.prototype.toString", "toString()")}}.</dd> + <dt>{{jsxref("Object.prototype.toString()")}}</dt> + <dd>Restituisce la rappresentazione dell'oggetto sotto forma di stringa.</dd> + <dt>{{jsxref("Object.prototype.unwatch()")}} {{non-standard_inline}}</dt> + <dd>Termina di osservare i cambiamenti di una proprietà dell'oggetto.</dd> + <dt>{{jsxref("Object.prototype.valueOf()")}}</dt> + <dd>Ritorna il valore primitivo dell'oggetto.</dd> + <dt>{{jsxref("Object.prototype.watch()")}} {{non-standard_inline}}</dt> + <dd>Inizia a osservare i cambiamenti di una proprietà di un oggetto.</dd> + <dt><s class="obsoleteElement">{{jsxref("Object.prototype.eval()")}} {{obsolete_inline}}</s></dt> + <dd><s class="obsoleteElement">Esegue una stringa di codice JavaScript nel contesto dell'oggetto, ma è stato rimosso.</s></dd> +</dl> + +<h2 id="Examples" name="Examples">Esempi</h2> + +<p>Siccome in JavaScript gli oggetti non sono sub-classabili in modo "standard", il prototipo è una soluzione utile per creare un oggetto che funzioni da "classe di base" che contenga dei metodi comuni a più oggetti. Per esempio:</p> + +<pre class="brush: js">var Persona = function() { + this.saParlare = true; +}; + +Persona.prototype.saluta = function() { + if (this.saParlare) { + console.log('Ciao, mi chiamo ' + this.nome); + } +}; + +var Dipendente = function(nome, titolo) { + Persona.call(this); + this.nome = nome; + this.titolo = titolo; +}; + +Dipendente.prototype = Object.create(Persona.prototype); +Dipendente.prototype.constructor = Dipendente; + +Dipendente.prototype.saluta = function() { + if (this.saParlare) { + console.log('Ciao mi chiamo ' + this.nome + ' e lavoro come ' + this.titolo); + } +}; + +var Cliente = function(nome) { + Persona.call(this); + this.nome = nome; +}; + +Cliente.prototype = Object.create(Persona.prototype); +Cliente.prototype.constructor = Cliente; + +var Mimo = function(nome) { + Persona.call(this); + this.nome = nome; + this.saParlare = false; +}; + +Mimo.prototype = Object.create(Persona.prototype); +Mimo.prototype.constructor = Mimo; + +var bob = new Dipendente('Bob', 'Architetto'); +var joe = new Cliente('Joe'); +var rg = new Dipendente('Red Green', 'Tuttofare'); +var mike = new Cliente('Mike'); +var mime = new Mimo('Mimo'); +bob.saluta(); +joe.saluta(); +rg.saluta(); +mike.saluta(); +mime.saluta(); +</pre> + +<p>Stamperà:</p> + +<pre>Ciao, mi chiamo Bob e lavoro come Architetto +Ciao, mi chiamo Joe +Ciao, mi chiamo Red Green, e lavoro come Tuttofare +Ciao, mi chiamo Mike</pre> + +<h2 id="Specifications" name="Specifications">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commenti</th> + </tr> + <tr> + <td>ECMAScript 1st Edition. Implemented in JavaScript 1.0.</td> + <td>Standard</td> + <td>Definizione iniziale.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.3.1', 'Object.prototype')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.prototype', 'Object.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilità con i browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funzionalità</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Supporto di base</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th><span style="font-family: open sans light,sans-serif; font-size: 16px; line-height: 16px;">Funzionalità</span></th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td><span style="font-size: 12px; line-height: 18px;">Supporto di base</span></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/it/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript">Introduzione alla programmazione JavaScript orientata agli oggetti</a></li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/object/seal/index.html b/files/it/web/javascript/reference/global_objects/object/seal/index.html new file mode 100644 index 0000000000..4d301b568c --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/object/seal/index.html @@ -0,0 +1,157 @@ +--- +title: Object.seal() +slug: Web/JavaScript/Reference/Global_Objects/Object/seal +tags: + - ECMAScript 5 + - Italian + - Italiano + - JavaScript + - JavaScript 1.8.5 + - Method + - Object +translation_of: Web/JavaScript/Reference/Global_Objects/Object/seal +--- +<div>{{JSRef}}</div> + +<p>Il metodo <code><strong>Object.seal()</strong></code> "sigilla" un oggetto, e ciò rende impossibile l'aggiunta di nuove proprietà e rende tutte le proprietà esistenti non-configurabili. I valori delle proprietà presenti possono comunque essere cambiati, finché sono sovrascrivibili.</p> + +<div>{{EmbedInteractiveExample("pages/js/object-prototype-seal.html")}}</div> + +<p class="hidden">Il codice sorgente per questo esempio interattivo si trova in una repository di GitHub. Se vuoi contribuire al progetto degli esempi interattivi, puoi clonare <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> ed inviarci una pull request.</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><code>Object.seal(<var>obj</var>)</code></pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>L'oggetto da sigillare.</dd> +</dl> + +<h3 id="Valore_di_ritorno">Valore di ritorno</h3> + +<p>L'oggetto sigillato.</p> + +<h2 id="Descrizione">Descrizione</h2> + +<p>Di default, gli oggetti sono {{jsxref("Object.isExtensible()", "estensibili", "", 1)}} (possono essergli aggiunte nuove proprietà). Sigillare un oggetto rende impossibile l'aggiunta di nuove proprietà e rende tutte le proprietà esistenti non-configurabili. Questo rende le proprietà dell'oggetto statiche ed immutabili. Rendere tutte le proprietà non-configurabili, inoltre, rende impossibile la conversione da proprietà "data" a proprietà "accessor" e viceversa, ma non rende impossibile la modifica dei valori delle proprietà "data". Qualsiasi tentativo di aggiungere o rimuovere proprietà ad un oggetto sigillato, o convertire una proprietà "data" in una proprietà "accessor" o viceversa, fallirebbe, o in modo silenzioso o attraverso il ritorno di un {{jsxref("TypeError")}} (più frequentemente, ma non necessariamente, quest'ultimo scenario accadrebbe in {{jsxref("Strict_mode", "strict mode", "", 1)}}).</p> + +<p>Le catene di prototipi non vengono sigillate. Invece, la proprietà {{jsxref("Object.proto", "__proto__")}} {{deprecated_inline}} viene sigillata.</p> + +<p>Ritorna l'oggetto passato ma sigillato.</p> + +<h2 id="Examples">Examples</h2> + +<pre class="brush: js">var obj = { + prop: function() {}, + foo: 'bar' +}; + +// Nuove proprietà potrebbero essere aggiunte, proprietà esistenti +// potrebbero essere modificate o rimosse. +obj.foo = 'baz'; +obj.lumpy = 'woof'; +delete obj.prop; + +var o = Object.seal(obj); + +o === obj; // true +Object.isSealed(obj); // === true + +// Cambiare proprietà su un oggetto sigillato +// è ancora possibile. +obj.foo = 'quux'; + +// Ma non puoi convertire proprietà "data" in proprietà "accessor" +// o viceversa. +Object.defineProperty(obj, 'foo', { + get: function() { return 'g'; } +}); // genera un TypeError + +// Ora, qualunque cambiamento, eccetto i valori delle proprietà, +// fallirà. +obj.quaxxor = 'the friendly duck'; +// silenziosamente non aggiunge la proprietà, per cui non genera errori od eccezioni +delete obj.foo; +// silenziosamente non rimuove la proprietà, per cui non genera errori od eccezioni + +// ...ed in strict mode, aggiungere o rimuovere proprietà +// genererà TypeErrors. +function fail() { + 'use strict'; + delete obj.foo; // genera un TypeError + obj.sparky = 'arf'; // genera un TypeError +} +fail(); + +// Anche aggiungere proprietà tramite +// Object.defineProperty genererà l'errore. +Object.defineProperty(obj, 'ohai', { + value: 17 +}); // genera un TypeError +Object.defineProperty(obj, 'foo', { + value: 'eit' +}); // modifica il valore di una proprietà esistente +</pre> + +<h2 id="Note">Note</h2> + +<p>In ES5, se l'argomento di questo metodo non è un'oggetto, allora verrà generato un {{jsxref("TypeError")}}. In ES2015, un argomento che non è un oggetto verrà trattato come se fosse un normale oggetto già sigillato, e verrà perciò semplicemente ritornato.</p> + +<pre class="brush: js">Object.seal(1); +// TypeError: 1 non è un oggetto (codice in ES5) + +Object.seal(1); +// 1 (codice in ES2015) +</pre> + +<h3 id="Differenza_con_Object.freeze">Differenza con <code>Object.freeze()</code></h3> + +<p>Le proprietà esistenti in oggetti congelati con <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze">Object.freeze()</a></code> sono rese immutabili. Gli oggetti sigillati con <code>Object.seal()</code> possono ricevere modifiche alle proprietà esistenti.</p> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.3.8', 'Object.seal')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Definizione iniziale. Implementato in JavaScript 1.8.5.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.seal', 'Object.seal')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.seal', 'Object.seal')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + +<div> +<div class="hidden">La compatibility table su questa pagina è generata da dati strutturali. Se vuoi contribuire per i dati, puoi visitare <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> ed inviarci una pull request.</div> + +<p>{{Compat("javascript.builtins.Object.seal")}}</p> +</div> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>{{jsxref("Object.isSealed()")}}</li> + <li>{{jsxref("Object.preventExtensions()")}}</li> + <li>{{jsxref("Object.isExtensible()")}}</li> + <li>{{jsxref("Object.freeze()")}}</li> + <li>{{jsxref("Object.isFrozen()")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/object/tostring/index.html b/files/it/web/javascript/reference/global_objects/object/tostring/index.html new file mode 100644 index 0000000000..5a77ea1a3e --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/object/tostring/index.html @@ -0,0 +1,170 @@ +--- +title: Object.prototype.toString() +slug: Web/JavaScript/Reference/Global_Objects/Object/toString +tags: + - JavaScript + - Method + - Object + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Object/toString +--- +<div>{{JSRef("Global_Objects", "Object")}}</div> + +<h2 id="Summary" name="Summary">Sommario</h2> + +<p>Il metodo <code><strong>toString()</strong></code> restituisce una stringa a che rappresenta l'oggetto.</p> +<div>{{EmbedInteractiveExample("pages/js/object-prototype-tostring.html")}}</div> + +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div> +<h2 id="Syntax" name="Syntax">Sintassi</h2> + +<pre class="syntaxbox notranslate"><code><var>obj</var>.toString()</code></pre> + +<h2 id="Description" name="Description">Descrizione</h2> + +<p>Ogni oggetto ha un metodo <code>toString()</code> che è automaticamente chiamato quando l'oggetto deve essere rappresentato come valore testuale o quando l'oggetto è referenziato in un contesto in cui viene attesa una stringa. Di default, il metodo <code>toString()</code> è ereditato da ogni oggetto che discende da <code>Object</code>. Se il metodo non è sovrascritto in un oggetto personalizzato, <code>toString()</code> restituisce "[object <em>type</em>]", dove <code><em>type</em></code> è il tipo di oggetto. Il codice di seguito lo illustra:</p> + +<pre class="brush: js notranslate">var o = new Object(); +o.toString(); // returns [object Object] +</pre> + +<div class="note"> +<p><strong>Nota:</strong> A partire da JavaScript 1.8.5 <code>toString()</code> richiamato su {{jsxref("Global_Objects/null", "null")}} restituisce <code>[object <em>Null</em>]</code>, e {{jsxref("Global_Objects/undefined", "undefined")}} restituisce <code>[object <em>Undefined</em>]</code>, come definito nella versione 5 di ECMAScript e nei succcessivi Errata. Vedi {{anch("Example:_Using_toString_to_detect_object_type", "Using toString to detect object type")}}.</p> +</div> + +<h2 id="Examples" name="Examples">Esempi</h2> + +<h3 id="Example_Overriding_the_default_toString_method" name="Example:_Overriding_the_default_toString_method">Esempio: Sovrascrittura del metodo di default <code>toString</code> </h3> + +<p>Puoi creare una funzione che deve essere richiamata al posto del default metodo <code>toString()</code>. Il metodo <code>toString()</code> non prende argomenti e deve restituire una stringa. Esso può assumere qualunque valore tu voglia, ma sarà molto utile se comunichi informazioni sull'oggetto.</p> + +<p>Il codice seguente definisce l'oggetto <code>Dog</code> e crea <code>theDog</code>, ovvero un oggetto di tipo <code>Dog</code>:</p> + +<pre class="brush: js notranslate">function Dog(name, breed, color, sex) { + this.name = name; + this.breed = breed; + this.color = color; + this.sex = sex; +} + +theDog = new Dog('Gabby', 'Lab', 'chocolate', 'female'); +</pre> + +<p>Richiamando il metodo <code>toString()</code> su questo oggetto personalizzato, esso restituisce il valore di default ereditato da {{jsxref("Global_Objects/Object", "Object")}}:</p> + +<pre class="brush: js notranslate">theDog.toString(); // returns [object Object] +</pre> + +<p>Il codice seguente crea e assegna il metodo <code>dogToString()</code> per sovrascrivere il metodo di default <code>toString()</code>. Questa funzione genera una stringa contenente i valori name, breed, color e sex dell'oggetto, nella forma di "<code>property = value;</code>".</p> + +<pre class="brush: js notranslate">Dog.prototype.toString = function dogToString() { + var ret = 'Dog ' + this.name + ' is a ' + this.sex + ' ' + this.color + ' ' + this.breed; + return ret; +} +</pre> + +<p>Col precedente codice, la funzione <code>dogToString()</code> è richiamata automaticamente da JavaScript ogni volta che l'oggetto <code style="font-style: normal;">theDog</code> è usato in un contesto string, e restituisce la seguente stringa:</p> + +<pre class="notranslate">Dog Gabby is a female chocolate Lab +</pre> + +<h3 id="Example_Using_toString_to_detect_object_type" name="Example:_Using_toString_to_detect_object_type">Esempio: Uso di <code>toString()</code> per individuare l'oggetto class</h3> + +<p><code>toString()</code> può essere usato con ogni oggetto e permette di ottenere il suo class. Per usare <code>Object.prototype.toString()</code> con ogni oggetto, c'è bisogno di richiamare {{jsxref("Function.prototype.call()")}} o {{jsxref("Function.prototype.apply()")}} su di esso, passando l'oggetto che si cerca di ispezionare come primo parametro chiamato <code>thisArg</code>.</p> + +<pre class="brush: js notranslate">var toString = Object.prototype.toString; + +toString.call(new Date); // [object Date] +toString.call(new String); // [object String] +toString.call(Math); // [object Math] + +// Since JavaScript 1.8.5 +toString.call(undefined); // [object Undefined] +toString.call(null); // [object Null] +</pre> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifiche</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + <tr> + <td>ECMAScript 1 Edizione.</td> + <td>Standard</td> + <td>Definizione iniziale. Implementato in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.4.2', 'Object.prototype.toString')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Richiamato su {{jsxref("Global_Objects/null", "null")}} restituisce <code>[object <em>Null</em>]</code>, e {{jsxref("Global_Objects/undefined", "undefined")}} restituisce <code>[object <em>Undefined</em>]</code></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.prototype.tostring', 'Object.prototype.toString')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_browser">Compatibilità browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Caratteristiche</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Support Base</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Support Base</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">Vedi anche</h2> + +<ul> + <li>{{jsxref("Object.prototype.toSource()")}}</li> + <li>{{jsxref("Object.prototype.valueOf()")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/parsefloat/index.html b/files/it/web/javascript/reference/global_objects/parsefloat/index.html new file mode 100644 index 0000000000..f587064676 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/parsefloat/index.html @@ -0,0 +1,139 @@ +--- +title: parseFloat() +slug: Web/JavaScript/Reference/Global_Objects/parseFloat +translation_of: Web/JavaScript/Reference/Global_Objects/parseFloat +--- +<div> + <div> + <div> + {{jsSidebar("Objects")}}</div> + </div> +</div> +<h2 id="Sommario">Sommario</h2> +<p>La funzione <code><strong>parseFloat()</strong></code> riceve una stringa come argomento e ritorna un numero in virgola mobile.</p> +<h2 id="Sintassi">Sintassi</h2> +<pre class="syntaxbox">parseFloat(<em>string</em>)</pre> +<h3 id="Parametri">Parametri</h3> +<dl> + <dt> + <code>string</code></dt> + <dd> + Una stringa che rapprestena il valore da analizzare.</dd> +</dl> +<h2 id="Descrizione">Descrizione</h2> +<p><code>parseFloat</code> è una funzione primo livello ( globale ) e non è associata con nessun oggetto.</p> +<p><code>parseFloat</code> analizza il parametro rappresentato da una stringa e ritorna un numero in virgola mobile. Se rileva un carattere diverso da segni ( + o - ), numeri ( 0 - 9 ), punto di separazione decimale o un esponente, la funzione ritorna il valore fino a quel punto ignorando il carattere rilevato e tutti quelli successvi. Gli spazi bianchi, iniziali e finali, sono consentiti.</p> +<p>Se il primo carattere dell'argomento non può essere analizzato, <code>parseFloat</code> ritorna <code>NaN</code>.</p> +<p>Per questioni aritmetiche, il valore <span style="font-family: Consolas, Monaco, 'Andale Mono', monospace; line-height: 1.5;">NaN </span><span style="line-height: 1.5;">non è di tipo numerico. Per determinare se il risultato di ParseFloat è </span><code>NaN</code><span style="line-height: 1.5;"> occorre chiamare la funzione </span><span style="line-height: 1.5;">{{jsxref("Global_Objects/isNaN", "isNaN")}}. Se <code>NaN</code> viene utilizzato per un operazione aritmetica, la stessa risulterà <code>NaN</code></span>.</p> +<p><font face="Consolas, Monaco, Andale Mono, monospace">parseFloat </font>può analizzare e ritornare il valore<font face="Consolas, Monaco, Andale Mono, monospace"> Infinity. </font>La funzione<font face="Consolas, Monaco, Andale Mono, monospace"><code> </code></font><span style="line-height: 1.5;">{{jsxref("Global_Objects/isNaN", "isNaN")}} consente di determinare se il risultato è un numero finito </span><span style="line-height: 1.5;"> (not </span><code style="font-style: normal; line-height: 1.5;">Infinity</code><span style="line-height: 1.5;">, </span><code style="font-style: normal; line-height: 1.5;">-Infinity</code><span style="line-height: 1.5;">, o </span><code style="font-style: normal; line-height: 1.5;">NaN</code><span style="line-height: 1.5;">).</span></p> +<h2 id="Esempi">Esempi</h2> +<h3 id="Esempio_parseFloat_ritorna_un_numero">Esempio: <code>parseFloat</code> ritorna un numero</h3> +<p>Tutti gli esempi seguenti ritornano 3.14</p> +<pre class="brush:js">parseFloat("3.14"); +parseFloat("314e-2"); +parseFloat("0.0314E+2"); +parseFloat("3.14altri caratteri non numerici"); +</pre> +<h3 id="Esempio_parseFloat_ritorna_NaN">Esempio: <code>parseFloat</code> ritorna NaN</h3> +<p>L'esempio seguente ritorna il valore <code>NaN</code></p> +<pre class="brush: js">parseFloat("FF2"); +</pre> +<h3 id="Una_funzione_di_analisi_più_approfondita.">Una funzione di analisi più approfondita.</h3> +<p>Talvolta può essere necessario un maggior controllo sulla funzione di parse, le regular expression possono aiutare :</p> +<pre class="brush: js">var filterFloat = function (value) { + if(/^(\-|\+)?([0-9]+(\.[0-9]+)?|Infinity)$/ + .test(value)) + return Number(value); + return NaN; +} + +console.log(filterFloat('421')); // 421 +console.log(filterFloat('-421')); // -421 +console.log(filterFloat('+421')); // 421 +console.log(filterFloat('Infinity')); // Infinito +console.log(filterFloat('1.61803398875')); // 1.61803398875 +console.log(filterFloat('421e+0')); // NaN +console.log(filterFloat('421hop')); // NaN +console.log(filterFloat('hop1.61803398875')); // NaN +</pre> +<p>Nota: questo codice è a scopo esplicativo. La funzione non accetta numeri validi come 1. o .5+</p> +<h2 id="Specifiche">Specifiche</h2> +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + <tr> + <td>ECMAScript 1a Edizione.</td> + <td>Standard</td> + <td>Definizione iniziale.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.1.2.3', 'parseFloat')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-parsefloat-string', 'parseFloat')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> +<h2 id="Compatibilità_Browser">Compatibilità Browser</h2> +<p>{{ CompatibilityTable() }}</p> +<div id="compat-desktop"> + <table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> + </table> +</div> +<div id="compat-mobile"> + <table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> + </table> +</div> +<h2 id="See_Also" name="See_Also">Leggi anche:</h2> +<ul> + <li>{{jsxref("Global_Objects/parseInt", "parseInt()")}}</li> + <li>{{jsxref("Number.parseFloat()")}}</li> + <li>{{jsxref("Number.parseInt()")}}</li> + <li>{{jsxref("Global_Objects/isNaN", "isNaN()")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/parseint/index.html b/files/it/web/javascript/reference/global_objects/parseint/index.html new file mode 100644 index 0000000000..c6300b4b3e --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/parseint/index.html @@ -0,0 +1,190 @@ +--- +title: parseInt() +slug: Web/JavaScript/Reference/Global_Objects/parseInt +translation_of: Web/JavaScript/Reference/Global_Objects/parseInt +--- +<div>{{jsSidebar("Objects")}}</div> + +<p>La funzione <code><strong>parseInt()</strong></code> analizza un argomento stringa e restituisce un numero intero della radice specificata (la base nei sistemi numerici matematici).</p> + +<div>{{EmbedInteractiveExample("pages/js/globalprops-parseint.html")}}</div> + + + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox">parseInt(<em>string</em>, <em>radix</em>);</pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt><code>string</code></dt> + <dd>Il valore da analizzare. Se l'argomento <code>string</code> non è una stringa, viene convertito in una stringa (utilizzando l'operazione astratta <code><a href="http://www.ecma-international.org/ecma-262/6.0/#sec-tostring">ToString</a></code>). Gli spazi bianchi iniziali nell'argomento stringa vengono ignorati.</dd> + <dt><code>radix</code></dt> + <dd>Un numero intero compreso tra 2 e 36 che rappresenta la <em>radice</em> (la base nei sistemi numerici matematici) della stringa sopra menzionata.</dd> +</dl> + +<h3 id="Valore_di_ritorno">Valore di ritorno</h3> + +<p>Un numero intero analizzato dalla stringa specificata. Se il primo carattere non può essere convertito in un numero, viene restituito {{jsxref("NaN")}}.</p> + +<h2 id="Descrizione">Descrizione</h2> + +<p>La funzione <code>parseInt</code> converte il suo primo argomento in una stringa, lo analizza e restituisce un numero intero o <code>NaN</code>. Se non è <code>NaN</code>, il valore restituito sarà l'intero che è il primo argomento preso come numero nella <em>radice</em> specificata (base). Ad esempio, una <em>radice</em> di 10 indica la conversione da un numero decimale, 8 ottali, 16 esadecimali e così via. Per le radici sopra <code>10</code>, le lettere dell'alfabeto indicano numeri maggiori di <code>9</code>. Ad esempio, per i numeri esadecimali (base 16), vengono utilizzate le lettere da <code>A</code> a <code>F</code>.</p> + +<p>Se <code>parseInt</code> incontra un carattere che non è un numero nella radice specificata, lo ignora e tutti i caratteri successivi e restituisce il valore intero analizzato fino a quel punto. <code>parseInt</code> tronca i numeri ai valori interi. Sono ammessi spazi iniziali e finali.</p> + +<p>Poiché alcuni numeri includono il carattere <code>e</code> nella loro rappresentazione di stringa (ad esempio <strong><code>6.022e23</code></strong>), l'uso di <code>parseInt</code> per troncare valori numerici produrrà risultati imprevisti se utilizzato su numeri molto grandi o molto piccoli. <code>parseInt</code> non dovrebbe essere usato come sostituto di {{jsxref("Math.floor()")}}.</p> + +<p>Se <em>radix</em> è <code>undefined</code> o 0 (o assente), JavaScript assume quanto segue:</p> + +<ul> + <li>Se l'input <code>string</code> inizia con "0x" o "0X", radix è 16 (esadecimale) e il resto della stringa viene analizzato.</li> + <li>Se l'input <code>string</code> inizia con "0", radix è otto (ottale) o 10 (decimale). Esattamente quale radix è scelto dipende dall'implementazione. ECMAScript 5 specifica che viene utilizzato 10 (decimale), ma non tutti i browser lo supportano ancora. Per questo motivo <strong>specifica sempre una radice quando usi <code>parseInt</code></strong>.</li> + <li>Se l'input <code>string</code> inizia con qualsiasi altro valore, la radice è 10 (decimale).</li> +</ul> + +<p>Se il primo carattere non può essere convertito in un numero, <code>parseInt</code> restituisce <code>NaN</code>.</p> + +<p>Per scopi aritmetici, il valore <code>NaN</code> vnon è un numero in nessuna radice. È possibile chiamare la funzione {{jsxref("isNaN")}} per determinare se il risultato di <code>parseInt</code> è <code>NaN</code>. Se <code>NaN</code> viene passato alle operazioni aritmetiche, i risultati dell'operazione saranno anche <code>NaN</code>.</p> + +<p>Per convertire il numero nella sua stringa letterale in una particolare radix, usa <code>intValue.toString(radix)</code>.</p> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Usare_parseInt">Usare parseInt</h3> + +<p>Tutti gli esempi seguenti restituiscono <strong><code>15</code></strong>:</p> + +<pre class="brush: js">parseInt('0xF', 16); +parseInt('F', 16); +parseInt('17', 8); +parseInt(021, 8); +parseInt('015', 10); // parseInt(015, 10); ritornerà 15 +parseInt(15.99, 10); +parseInt('15,123', 10); +parseInt('FXX123', 16); +parseInt('1111', 2); +parseInt('15 * 3', 10); +parseInt('15e2', 10); +parseInt('15px', 10); +parseInt('12', 13); +</pre> + +<p>I seguenti esempi restituiscono tutti <strong><code>NaN</code></strong>:</p> + +<pre class="brush: js">parseInt('Hello', 8); // Non è un numero +parseInt('546', 2); // Le cifre non sono valide per le rappresentazioni binarie +</pre> + +<p>Tutti gli esempi seguenti restituiscono <strong><code>-15</code></strong>:</p> + +<pre class="brush: js">parseInt('-F', 16); +parseInt('-0F', 16); +parseInt('-0XF', 16); +parseInt(-15.1, 10); +parseInt('-17', 8); +parseInt('-15', 10); +parseInt('-1111', 2); +parseInt('-15e1', 10); +parseInt('-12', 13); +</pre> + +<p>Tutti gli esempi seguenti restituiscono <code><strong>4</strong></code>:</p> + +<pre class="brush: js">parseInt(4.7, 10); +parseInt(4.7 * 1e22, 10); // Il numero molto grande diventa 4 +parseInt(0.00000000000434, 10); // Il numero molto piccolo diventa 4 +</pre> + +<p>L'esempio seguente restituisce <code><strong>224</strong></code>:</p> + +<pre class="brush: js">parseInt('0e0', 16); +</pre> + +<h2 id="Interpretazioni_ottali_senza_radix">Interpretazioni ottali senza radix</h2> + +<p>Sebbene scoraggiato da ECMAScript 3 e proibito da ECMAScript 5, molte implementazioni interpretano una stringa numerica che inizia con uno <code>0</code> iniziale come ottale. Il seguente potrebbe avere un risultato ottale o potrebbe avere un risultato decimale. <strong>Specifica sempre una radice per evitare questo comportamento inaffidabile.</strong></p> + +<pre class="brush: js">parseInt('0e0'); // 0 +parseInt('08'); // 0, '8' non è una cifra ottale. +</pre> + +<h3 id="ECMAScript_5_rimuove_l'interpretazione_ottale">ECMAScript 5 rimuove l'interpretazione ottale</h3> + +<p>La specifica ECMAScript 5 della funzione <code>parseInt</code> non consente più alle implementazioni di trattare le stringhe che iniziano con un carattere <code>0</code> come valori ottali. ECMAScript 5 afferma:</p> + +<p>La funzione <code>parseInt</code> produce un valore intero dettato dall'interpretazione del contenuto dell'argomento stringa in base alla radice specificata. Lo spazio bianco principale nella stringa viene ignorato. Se radix non è definito o <code>0</code>, si presume che sia <code>10</code> tranne quando il numero inizia con le coppie di caratteri <code>0x</code> o <code>0X</code>, nel qual caso si assume una radice di 16.</p> + +<p>Ciò differisce da ECMAScript 3, che scoraggiava, ma consentiva l'interpretazione ottale.</p> + +<p>Molte implementazioni non hanno adottato questo comportamento a partire dal 2013 e, poiché i browser più vecchi devono essere supportati, <strong>specificare sempre una radice.</strong></p> + +<h2 id="Una_funzione_di_analisi_più_rigorosa">Una funzione di analisi più rigorosa</h2> + +<p>A volte è utile avere un modo più rigoroso di analizzare i valori int. Le espressioni regolari possono aiutare:</p> + +<pre class="brush: js">var filterInt = function(value) { + if (/^(-|\+)?(\d+|Infinity)$/.test(value)) + return Number(value); + return NaN; +} + +console.log(filterInt('421')); // 421 +console.log(filterInt('-421')); // -421 +console.log(filterInt('+421')); // 421 +console.log(filterInt('Infinity')); // Infinity +console.log(filterInt('421e+0')); // NaN +console.log(filterInt('421hop')); // NaN +console.log(filterInt('hop1.61803398875')); // NaN +console.log(filterInt('1.61803398875')); // NaN +</pre> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definizione iniziale.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.1.2.2', 'parseInt')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-parseint-string-radix', 'parseInt')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-parseint-string-radix', 'parseInt')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + + + +<p>{{Compat("javascript.builtins.parseInt")}}</p> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>{{jsxref("Global_Objects/parseFloat", "parseFloat()")}}</li> + <li>{{jsxref("Number.parseFloat()")}}</li> + <li>{{jsxref("Number.parseInt()")}}</li> + <li>{{jsxref("Global_Objects/isNaN", "isNaN()")}}</li> + <li>{{jsxref("Number.toString()")}}</li> + <li>{{jsxref("Object.valueOf")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/promise/all/index.html b/files/it/web/javascript/reference/global_objects/promise/all/index.html new file mode 100644 index 0000000000..4d1c9a970c --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/promise/all/index.html @@ -0,0 +1,110 @@ +--- +title: Promise.all() +slug: Web/JavaScript/Reference/Global_Objects/Promise/all +translation_of: Web/JavaScript/Reference/Global_Objects/Promise/all +--- +<div>{{JSRef}}</div> + +<p>Il metodo <code><strong>Promise.all(iterable)</strong></code> restituisce una singola promise che viene risolta quando tutte le promise nell'iterable passate come parametro vengono risolte. Scatena una reject contenente la ragione della prima promise che viene respinta.</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><var>Promise.all(iterable)</var>;</pre> + +<h3 id="Parameteri">Parameteri</h3> + +<dl> + <dt>iterable</dt> + <dd>Un oggetto iterabile, come un {{jsxref("Array")}}. See <a href="/en-US/docs/Web/JavaScript/Guide/iterable">iterable</a>.</dd> +</dl> + +<h3 id="Valore_di_ritorno">Valore di ritorno</h3> + +<p>Un {{jsxref("Promise")}} che viene risolto quando tutti i promise nell'iterable passato come parametro vengono risolti, o scatena una reject contenente la ragione del primo promise che viene rigettato</p> + +<h2 id="Descrizione">Descrizione</h2> + +<p>Il metodo <strong>Promise.all </strong>ritorna un array di valori ritornati dai promise nell oggetto iterable che ha ricevuto. L'array dei valori ritornati mantiene lo stesso ordine dell'oggetto iterable originario e non l'ordine di risoluzione dei promise. Se uno dei valori dell'oggetto iterabile passato come parametro non un promise viene automaticamente convertito con {{jsxref("Promise.resolve")}}. </p> + +<p>Se uno qualsiasi dei promise passati viene rigettato, il metodo <code>all</code> Promise viene rigettato automaticamente con il valore del promise rigettato, scartando tutti i promise indipendentemente dal fatto che gli altri siano stati risolti o meno. Se viene passato un un array vuoto, allora questo metodo ritorna immediatamente.</p> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Usare_Promise.all">Usare <code>Promise.all</code></h3> + +<p><code>Il metodo Promise.all</code> aspetta la risoluzione di tutti i promise (od il primo che viene rigettato).</p> + +<pre class="brush: js">var p1 = Promise.resolve(3); +var p2 = 1337; +var p3 = new Promise((resolve, reject) => { + setTimeout(resolve, 100, "foo"); +}); + +Promise.all([p1, p2, p3]).then(values => { + console.log(values); // [3, 1337, "foo"] +});</pre> + +<h3 id="Promise.all_comportamento_fail-fast"><code>Promise.all</code> comportamento fail-fast</h3> + +<p>Il metodo <code>Promise.all</code> viene rigettato se uno degli elementi viene rigettato e <code>Promise.all</code> viene rigettato immediatamente. In caso quattro promise vengono risolti dopo un timeout, e uno viene rigettato immediatamente: allora <code>Promise.all</code> viene rigettato immediamente.</p> + +<pre class="brush: js">var p1 = new Promise((resolve, reject) => { + setTimeout(resolve, 1000, "one"); +}); +var p2 = new Promise((resolve, reject) => { + setTimeout(resolve, 2000, "two"); +}); +var p3 = new Promise((resolve, reject) => { + setTimeout(resolve, 3000, "three"); +}); +var p4 = new Promise((resolve, reject) => { + setTimeout(resolve, 4000, "four"); +}); +var p5 = new Promise((resolve, reject) => { + reject("reject"); +}); + +Promise.all([p1, p2, p3, p4, p5]).then(value => { + console.log(value); +}, reason => { + console.log(reason) +}); + +//From console: +//"reject" +</pre> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifiche</th> + <th scope="col">Status</th> + <th scope="col">Commenti</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-promise.all', 'Promise.all')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Definizione iniziale nello standard ECMA.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-promise.all', 'Promise.all')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilitá_dei_browser">Compatibilitá dei browser</h2> + +<p class="hidden">To contribute to this compatibility data, please write a pull request against this file: <a href="https://github.com/mdn/browser-compat-data/blob/master/javascript/promise.json">https://github.com/mdn/browser-compat-data/blob/master/javascript/promise.json</a>.</p> + +<p>{{Compat}}</p> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>{{jsxref("Promise")}}</li> + <li>{{jsxref("Promise.race()")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/promise/catch/index.html b/files/it/web/javascript/reference/global_objects/promise/catch/index.html new file mode 100644 index 0000000000..0b9b906153 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/promise/catch/index.html @@ -0,0 +1,124 @@ +--- +title: Promise.prototype.catch() +slug: Web/JavaScript/Reference/Global_Objects/Promise/catch +translation_of: Web/JavaScript/Reference/Global_Objects/Promise/catch +--- +<div>{{JSRef}}</div> + +<p>Il metodo <strong>catch()</strong> restituisce una <code>Promise</code> e si occusa esclusivamente nei casi respinti. Si comporta come una chiamata {{jsxref("Promise.then", "Promise.prototype.then(undefined, onRejected)")}}.</p> + +<p> </p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><var>p.catch(onRejected)</var>; + +p.catch(function(reason) { + // rejection +}); +</pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt>onRejected</dt> + <dd>Una {{jsxref("Function")}} chiamata quando la <code>Promise</code> viene respinta. Questa funzione richiede un parametro, la motivazione della respinta.</dd> +</dl> + +<h2 id="Descrizione">Descrizione</h2> + +<p>Il metodo <code>catch</code> può essere utile per gestire errori nella composizione delle promise.</p> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Uso_del_metodo_catch">Uso del metodo catch</h3> + +<pre class="brush: js">var p1 = new Promise(function(resolve, reject) { + resolve("Success"); +}); + +p1.then(function(value) { + console.log(value); // "Success!" + throw "oh, no!"; +}).catch(function(e) { + console.log(e); // "oh, no!" +}); +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-promise.prototype.catch', 'Promise.prototype.catch')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition in an ECMA standard.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>32</td> + <td>{{CompatGeckoDesktop(29.0)}} [1]</td> + <td>{{CompatNo}}</td> + <td>19</td> + <td>7.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile(29.0)}} [1]</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8</td> + <td>32</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Gecko 24 has an experimental implementation of <code>Promise</code>, under the initial name of <code>Future</code>. It got renamed to its final name in Gecko 25, but disabled by default behind the flag <code>dom.promise.enabled</code>. <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=918806">Bug 918806</a> enabled Promises by default in Gecko 29.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Promise")}}</li> + <li>{{jsxref("Promise.prototype.then()")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/promise/index.html b/files/it/web/javascript/reference/global_objects/promise/index.html new file mode 100644 index 0000000000..d2f579bc51 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/promise/index.html @@ -0,0 +1,248 @@ +--- +title: Promise +slug: Web/JavaScript/Reference/Global_Objects/Promise +tags: + - ECMAScript 2015 + - JavaScript + - Promise + - async +translation_of: Web/JavaScript/Reference/Global_Objects/Promise +--- +<div>{{JSRef}}</div> + +<p>Gli oggetti <strong><code>Promise</code></strong> sono usati per computazioni in differita e asincrone. Una <code>Promise</code> rappresenta un'operazione che non è ancora completata, ma lo sarà in futuro.</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="brush: js">new Promise(function(resolve, reject) { ... });</pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt>executor</dt> + <dd> + <p>Una funzione che ha due argomenti: <code>resolve</code> e <code>reject</code>. Tale funzione viene chiamata immediatamente dall'implementazione della Promise, passando i due argomenti <code>resolve</code> e <code>reject,</code> che sono due funzioni. Le due funzioni <code>resolve</code> e <code>reject</code>, quando chiamate, risolvono o rigettano la promise. L'esecutore inizia del lavoro (solitamente asincrono), e, una volta completato, chiama <code>resolve</code> per risolvere la promise, o <code>reject</code> se c'è stato qualche errore. Se un errore viene sollevato nella funzione di esecuzione <code>(executor)</code> la promise viene rigettata.</p> + </dd> +</dl> + +<h2 id="Descrizione">Descrizione</h2> + +<p>Una <code><strong>Promise</strong></code> rappresenta un proxy per un valore non necessariamente noto quando la promise è stata creata. Consente di associare degli handlers con il successo o il fallimento di un'azione asincrona (e il "valore" in caso di successo, o la motivazione in caso di fallimento). Questo in pratica consente di utilizzare dei metodi asincroni di fatto come se fossero sincroni: la funzione che compie del lavoro asincrono non ritorna il valore di completamento ma ritorna una <em>promise</em>, tramite la quale si potrà ottenere il valore di completamento una volta che la promise sarà terminata.</p> + +<p>Una <code>Promise</code> può presentarsi in uno dei seguenti stati:</p> + +<ul> + <li><em>pending </em>(attesa): stato iniziale, né soddisfatto né respinto.</li> + <li><em>fulfilled </em>(soddisfatto): significa che l'operazione si è conclusa con sucesso.</li> + <li><em>rejected</em> (respinto): significa che l'operazione à fallita.</li> +</ul> + +<p>Una promise in <em>pending</em> può evolvere sia in <em>fulfilled </em>con un valore, sia in <em>rejected</em> con una motivazione (errore). Quando accade una di queste situazioni, vengono chiamati gli handler associati che sono stati accodati dal metodo <code>then</code> della promise. (Se la promise è già stata soddisfatta o respinta quando viene agganciato l'handler, quest'ultimo verrà chiamato immediatamente, quindi non è necessario che gli handler vengano agganciati prima del completamento dell'operazione asincrona).</p> + +<p><font face="Open Sans, Arial, sans-serif">Poichè i metodi </font><code>{{jsxref("Promise.then", "Promise.prototype.then")}}</code> e <code>{{jsxref("Promise.catch", "Promise.prototype.catch")}}</code> restituiscono delle promise, è possibile concatenarli tramite l'operazione di <em>composition</em>.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8633/promises.png"></p> + +<div class="note"> +<p><strong>Da non confondere con: </strong>molti altri linguaggi hanno meccanismi simili per la lazy evaluation ed il calcolo differito, che a loro volta vengono chiamati "promise" (es. Schemes). Le Promise in Javascript rappresentano un processo che è gia accaduto, che può essere concatenato con delle funzioni di callback. Se stai cercando di eseguire una lazy evaluation (valutazione non immediata) di un'espressione, considera l'utilizzo delle <a href="https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Functions_and_function_scope/Arrow_functions">arrow function</a> senza argomenti: <code>f = () => <em>expression</em></code> per creare un'espressione non valutata immediatamente (lazy-evaluated) ed usare <code>f()</code> per valutarla.</p> +</div> + +<div class="note"> +<p><strong>Nota</strong>: Si dice che una promise è "ferma" (<em>settled) </em>se è soddisfatta o respinta, ma non in <em>pending</em>. Si può parlare anche di promessa "risolta" (<em>resolved</em>) quando la promise è ferma o è bloccata in una catena di promise. <a href="https://github.com/domenic/promises-unwrapping/blob/master/docs/states-and-fates.md">States and fates</a> di Domenic Denicola contiene maggiori dettagli sulla terminologia riguardo le promise.</p> +</div> + +<h2 id="Proprietà">Proprietà</h2> + +<dl> + <dt><code>Promise.length</code></dt> + <dd>La proprietà length (lunghezza) ha come valore 1 (numero di argomenti del costruttore).</dd> + <dt>{{jsxref("Promise.prototype")}}</dt> + <dd>Rappresenta il prototype per il costruttore della <code>Promise</code>.</dd> +</dl> + +<h2 id="Metodi">Metodi</h2> + +<dl> + <dt>{{jsxref("Promise.all", "Promise.all(iterable)")}}</dt> + <dd>Ritorna una promise che si risolve quando tutte le promises dell'argomento iterabile sono state risolte. Oppure, viene rigettato appena una promise dell'argomento di tipo <code>Iterable</code> viene rigettato. Se tutto va a buon fine, la promise viene completata con un array contenente i valori di completamento di ciascuna promise dell'iterable, nello stesso ordine di quello dell'iterable. In caso fallisca (cioè appena una prima promise dell'iterable fallisce), Promise.all viene rigettato con la ragione (errore) della prima promise che ha fallito. Questo è utile per aggregare insieme il risultato di più promises.</dd> + <dt>{{jsxref("Promise.race", "Promise.race(iterable)")}}</dt> + <dd>Restituisce una promise che si risolve o respinge, non appena una delle promises dell'iterable si risolve o respinge, con il valore o la motivazione da quella promise.</dd> +</dl> + +<dl> + <dt>{{jsxref("Promise.reject", "Promise.reject(reason)")}}</dt> + <dd>Restituisce un oggetto <code>Promise</code> che è respinta con la data motivazione.</dd> +</dl> + +<dl> + <dt>{{jsxref("Promise.resolve", "Promise.resolve(value)")}}</dt> + <dd>Restituise un oggetto <code>Promise</code> che è risolto con il valore dato. Se il valore é un thenable (es. ha un metodo <code>then</code>), la promise restituita "seguirà" quel thenable, usando il suo stato; altirmenti la promise restituita sarà soddisfatta con il valore. Generalmente, se non sei sicuro che un valore sia di tipo Promise usa {{jsxref("Promise.resolve", "Promise.resolve(value)")}} e lavora con il valore restituito dalla promise.</dd> +</dl> + +<h2 id="Promise_prototype">Promise prototype</h2> + +<h3 id="Proprietà_2">Proprietà</h3> + +<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/Promise/prototype','Properties')}}</p> + +<h3 id="Metodi_2">Metodi</h3> + +<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/Promise/prototype','Methods')}}</p> + +<h2 id="Creazione_di_una_Promise">Creazione di una Promise</h2> + +<p>Un oggetto di tipo <code>Promise</code>, viene creato con la keyowrd <code>new</code> ed il suo costruttore. Questo costruttore accetta come argomento una funzione, chiamata "<code>funzione esecutore (executor function)</code>". Questa funzione accetta altre due funzioni come parametri. La prima (<code>resolve</code>) viene eseguita in modo asincrono quando l'operazione viene eseguita con successo e restituisce il risultato dell'operazione come valore. La seconda (<code>reject</code>) viene eseguita nel caso in cui l'operazione fallisca e restituisce il motivo per cui l'operazione non è stata eseguita: generalmente un oggetto di tipo <code>Error</code></p> + +<pre class="brush: js" dir="rtl">const myFirstPromise = new Promise((resolve, reject) => { + // esegue qualcosa di asincrono che eventualmente chiama: + // + resolve(someValue); // fulfilled + // oppure + reject("motivo del fallimento"); // rejected +});</pre> + +<p>Per creare una funzione con il comportamento di Promise, semplicemente restituisci una promise</p> + +<pre class="brush: js">function myAsyncFunction(url) { + return new Promise((resolve, reject) => { + const xhr = new XMLHttpRequest(); + xhr.open("GET", url); + xhr.onload = () => resolve(xhr.responseText); + xhr.onerror = () => reject(xhr.statusText); + xhr.send(); + }); +}</pre> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Esempio_semplice">Esempio semplice</h3> + +<pre class="brush: js">let myFirstPromise = new Promise((resolve, reject) => { + // Chiamiamo resolve(...) quando viene eseguito correttamente, e reject(...) quando fallisce. + // In questo esempio viene utilizzato setTimeout(...) per simulare un'operazione asincrona. + // Nella realtà probabilmente utilizzerai qualcosa del tipo XHR o HTML5 API. + setTimeout(function(){ + resolve("Success!"); // È andato tutto perfettamente! + }, 250); +}); + +myFirstPromise.then((successMessage) => { + // successMessage viene passato alla funzione resolve(...) . + // Non deve essere necessariamente una stringa, ma nel caso sia solo un messaggio probabilmemte lo sarà. + console.log("Yay! " + successMessage); +});</pre> + +<h3 id="Esempio_avanzato">Esempio avanzato</h3> + +<pre class="brush: html"><button id="btn">Make a promise!</button> +<div id="log"></div></pre> + +<p>Questo piccolo esempio mostra il meccanismo delle <code>Promise</code>. Il metodo <code>testPromise()</code> viene richiamato ogni volta che il {{HTMLElement("button")}} viene cliccato. Crea una promise che viene risolta correttamente (fulfilled), utilizzando {{domxref("window.setTimeout()")}} che incrementa il contatore ogni 1-3 secondi (random). Il costruttore <code>Promise</code> viene utilizzato per creare la promise.</p> + +<p>La risoluzione della promise viene semplicemente loggata tramite una funzione di callback <code>fulfill</code> {{jsxref("Promise.prototype.then()","p1.then()")}}. Una serie di log mostrano che il comportamento sincrono del metodo è disaccoppiato rispetto all'esecuzione asincrona della promise.</p> + +<pre class="brush: js">'use strict'; +var promiseCount = 0; + +function testPromise() { + let thisPromiseCount = ++promiseCount; + + let log = document.getElementById('log'); + log.insertAdjacentHTML('beforeend', thisPromiseCount + + ') Started (<small>Sync code started</small>)<br/>'); + + // We make a new promise: we promise a numeric count of this promise, starting from 1 (after waiting 3s) + let p1 = new Promise( + // The resolver function is called with the ability to resolve or + // reject the promise + (resolve, reject) => { + log.insertAdjacentHTML('beforeend', thisPromiseCount + + ') Promise started (<small>Async code started</small>)<br/>'); + // This is only an example to create asynchronism + window.setTimeout( + function() { + // We fulfill the promise ! + resolve(thisPromiseCount); + }, Math.random() * 2000 + 1000); + } + ); + + // We define what to do when the promise is resolved with the then() call, + // and what to do when the promise is rejected with the catch() call + p1.then( + // Log the fulfillment value + function(val) { + log.insertAdjacentHTML('beforeend', val + + ') Promise fulfilled (<small>Async code terminated</small>)<br/>'); + }).catch( + // Log the rejection reason + (reason) => { + console.log('Handle rejected promise ('+reason+') here.'); + }); + + log.insertAdjacentHTML('beforeend', thisPromiseCount + + ') Promise made (<small>Sync code terminated</small>)<br/>'); +} + + + +if ("Promise" in window) { + let btn = document.getElementById("btn"); + btn.addEventListener("click",testPromise); +} else { + log = document.getElementById('log'); + log.innerHTML = "Live example not available as your browser doesn't support the <code>Promise<code> interface."; +}</pre> + +<p>In questo esempio si comincia cliccando il bottone. Per testare necessiti di un browser che supporta le <code>Promise</code>. Cliccando il bottone diverse volte in un lasso di tempo breve vedrai che le funzioni verranno risolte una dopo l'altra.</p> + +<h2 id="Caricare_un'immagine_con_XHR">Caricare un'immagine con XHR</h2> + +<p>Un'altro semplice esempio che utilizza le Promise e <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a> mostra come caricare un'immagine è disponibile sul <a href="https://github.com/mdn/js-examples/tree/master/promises-test">repository</a> di MDN su Github. Puoi inoltre vederla in azione. Ogni azione è commentata e puoi seguire passo-passo come viene creata la Promise e gestita tramite XHR.</p> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-promise-objects', 'Promise')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td> + <p>Prima definizione in uno standard ECMA.</p> + </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-promise-objects', 'Promise')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> + <p> </p> + </td> + </tr> + </tbody> +</table> + +<h2 id="Supporto_dei_browser">Supporto dei browser</h2> + +<p>{{Compat("javascript.builtins.Promise")}}</p> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises">Using promises</a></li> + <li><a href="http://promisesaplus.com/">Promises/A+ specification</a></li> + <li><a href="https://medium.com/@ramsunvtech/promises-of-promise-part-1-53f769245a53">Venkatraman.R - JS Promise (Part 1, Basics)</a></li> + <li><a href="https://medium.com/@ramsunvtech/js-promise-part-2-q-js-when-js-and-rsvp-js-af596232525c#.dzlqh6ski">Venkatraman.R - JS Promise (Part 2 - Using Q.js, When.js and RSVP.js)</a></li> + <li><a href="https://tech.io/playgrounds/11107/tools-for-promises-unittesting/introduction">Venkatraman.R - Tools for Promises Unit Testing</a></li> + <li><a href="http://www.html5rocks.com/en/tutorials/es6/promises/">Jake Archibald: JavaScript Promises: There and Back Again</a></li> + <li><a href="http://de.slideshare.net/domenicdenicola/callbacks-promises-and-coroutines-oh-my-the-evolution-of-asynchronicity-in-javascript">Domenic Denicola: Callbacks, Promises, and Coroutines – Asynchronous Programming Patterns in JavaScript</a></li> + <li><a href="http://www.mattgreer.org/articles/promises-in-wicked-detail/">Matt Greer: JavaScript Promises ... In Wicked Detail</a></li> + <li><a href="https://www.promisejs.org/">Forbes Lindesay: promisejs.org</a></li> + <li><a href="https://github.com/jakearchibald/es6-promise/">Promise polyfill</a></li> + <li><a href="https://www.udacity.com/course/javascript-promises--ud898">Udacity: JavaScript Promises</a></li> + <li> </li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/proxy/handler/apply/index.html b/files/it/web/javascript/reference/global_objects/proxy/handler/apply/index.html new file mode 100644 index 0000000000..f803b41255 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/proxy/handler/apply/index.html @@ -0,0 +1,119 @@ +--- +title: handler.apply() +slug: Web/JavaScript/Reference/Global_Objects/Proxy/handler/apply +tags: + - ECMAScript 2015 + - JavaScript + - Proxy + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/apply +--- +<div>{{JSRef}}</div> + +<p>Il metodo <strong><code>handler.apply()</code></strong> costituisce una trap per una chiamata a funzione.</p> + +<div>{{EmbedInteractiveExample("pages/js/proxyhandler-apply.html", "taller")}}</div> + +<p class="hidden">Il sorgente di questo esempio interattivo è memorizzato in una repository GitHub. Qualora volessi contribuire al progetto degli esempi interattivi, puoi farlo clonando <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> e inviandoci una pull request.</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="brush: js">var p = new Proxy(target, { + apply: function(target, thisArg, argumentsList) { + } +}); +</pre> + +<h3 id="Parametri">Parametri</h3> + +<p>I seguenti parametri vengono passati al metodo <code>apply</code>. <code>this</code> è legato all'handler.</p> + +<dl> + <dt><code>target</code></dt> + <dd>L'oggetto target.</dd> + <dt><code>thisArg</code></dt> + <dd>Il valore di <code>this</code> relativo alla chiamata.</dd> + <dt><code>argumentsList</code></dt> + <dd>La lista degli argomenti della chiamata.</dd> +</dl> + +<h3 id="Valore_di_ritorno">Valore di ritorno</h3> + +<p>Il metodo <code>apply</code> può restituire qualsiasi valore.</p> + +<h2 id="Descrizione">Descrizione</h2> + +<p>Il metodo <code><strong>handler.apply</strong></code> è una trap per le chiamate a funzione.</p> + +<h3 id="Operazioni_intercettate">Operazioni intercettate</h3> + +<p>Questa trap può intercettare le seguenti operazioni:</p> + +<ul> + <li><code>proxy(...args)</code></li> + <li>{{jsxref("Function.prototype.apply()")}} e {{jsxref("Function.prototype.call()")}}</li> + <li>{{jsxref("Reflect.apply()")}}</li> +</ul> + +<h3 id="Invarianti">Invarianti</h3> + +<p>Se le seguenti invarianti non sono rispettate il proxy emetterà un TypeError:</p> + +<ul> + <li>Lo stesso <code>target</code> deve essere un oggetto richiamabile, cioè deve essere un oggetto funzione.</li> +</ul> + +<h2 id="Esempi">Esempi</h2> + +<p>Il codice seguente intercetta una chiamata a funzione.</p> + +<pre class="brush: js">var p = new Proxy(function() {}, { + apply: function(target, thisArg, argumentsList) { + console.log('chiamato con: ' + argumentsList.join(', ')); + return argumentsList[0] + argumentsList[1] + argumentsList[2]; + } +}); + +console.log(p(1, 2, 3)); // "chiamato con: 1, 2, 3" + // 6 +</pre> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commenti</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-call-thisargument-argumentslist', '[[Call]]')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-call-thisargument-argumentslist', '[[Call]]')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_browser">Compatibilità browser</h2> + +<div> +<div class="hidden">La tabella di compatibilità su questa pagina è generata a partire da dati strutturati. Se vuoi contribuire ai dati, fai un check out da <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e mandaci una pull request.</div> + +<p>{{Compat("javascript.builtins.Proxy.handler.apply")}}</p> +</div> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>{{jsxref("Proxy")}}</li> + <li>{{jsxref("Proxy.handler", "handler")}}</li> + <li>{{jsxref("Function.prototype.apply")}}</li> + <li>{{jsxref("Function.prototype.call")}}</li> + <li>{{jsxref("Reflect.apply()")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/proxy/handler/index.html b/files/it/web/javascript/reference/global_objects/proxy/handler/index.html new file mode 100644 index 0000000000..042e9b50b1 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/proxy/handler/index.html @@ -0,0 +1,83 @@ +--- +title: Proxy handler +slug: Web/JavaScript/Reference/Global_Objects/Proxy/handler +tags: + - ECMAScript 2015 + - JavaScript + - NeedsTranslation + - Proxy + - TopicStub +translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy +--- +<div>{{JSRef}}</div> + +<p>The proxy's handler object is a placeholder object which contains traps for {{jsxref("Proxy", "proxies", "", 1)}}.</p> + +<h2 id="Methods">Methods</h2> + +<p>All traps are optional. If a trap has not been defined, the default behavior is to forward the operation to the target.</p> + +<dl> + <dt>{{jsxref("Global_Objects/Proxy/handler/getPrototypeOf", "handler.getPrototypeOf()")}}</dt> + <dd>A trap for {{jsxref("Object.getPrototypeOf")}}.</dd> + <dt>{{jsxref("Global_Objects/Proxy/handler/setPrototypeOf", "handler.setPrototypeOf()")}}</dt> + <dd>A trap for {{jsxref("Object.setPrototypeOf")}}.</dd> + <dt>{{jsxref("Global_Objects/Proxy/handler/isExtensible", "handler.isExtensible()")}}</dt> + <dd>A trap for {{jsxref("Object.isExtensible")}}.</dd> + <dt>{{jsxref("Global_Objects/Proxy/handler/preventExtensions", "handler.preventExtensions()")}}</dt> + <dd>A trap for {{jsxref("Object.preventExtensions")}}.</dd> + <dt>{{jsxref("Global_Objects/Proxy/handler/getOwnPropertyDescriptor", "handler.getOwnPropertyDescriptor()")}}</dt> + <dd>A trap for {{jsxref("Object.getOwnPropertyDescriptor")}}.</dd> + <dt>{{jsxref("Global_Objects/Proxy/handler/defineProperty", "handler.defineProperty()")}}</dt> + <dd>A trap for {{jsxref("Object.defineProperty")}}.</dd> + <dt>{{jsxref("Global_Objects/Proxy/handler/has", "handler.has()")}}</dt> + <dd>A trap for the {{jsxref("Operators/in", "in")}} operator.</dd> + <dt>{{jsxref("Global_Objects/Proxy/handler/get", "handler.get()")}}</dt> + <dd>A trap for getting property values.</dd> + <dt>{{jsxref("Global_Objects/Proxy/handler/set", "handler.set()")}}</dt> + <dd>A trap for setting property values.</dd> + <dt>{{jsxref("Global_Objects/Proxy/handler/deleteProperty", "handler.deleteProperty()")}}</dt> + <dd>A trap for the {{jsxref("Operators/delete", "delete")}} operator.</dd> + <dt>{{jsxref("Global_Objects/Proxy/handler/ownKeys", "handler.ownKeys()")}}</dt> + <dd>A trap for {{jsxref("Object.getOwnPropertyNames")}} and {{jsxref("Object.getOwnPropertySymbols")}}.</dd> + <dt>{{jsxref("Global_Objects/Proxy/handler/apply", "handler.apply()")}}</dt> + <dd>A trap for a function call.</dd> + <dt>{{jsxref("Global_Objects/Proxy/handler/construct", "handler.construct()")}}</dt> + <dd>A trap for the {{jsxref("Operators/new", "new")}} operator.</dd> +</dl> + +<p>Some non-standard traps are <a href="/en-US/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features#Proxy">obsolete and have been removed</a>.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots', 'Proxy Object Internal Methods and Internal Slots')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots', 'Proxy Object Internal Methods and Internal Slots')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>The <code>enumerate</code> handler has been removed.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.builtins.Proxy.handler")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Proxy")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/proxy/index.html b/files/it/web/javascript/reference/global_objects/proxy/index.html new file mode 100644 index 0000000000..fa35ff1d43 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/proxy/index.html @@ -0,0 +1,396 @@ +--- +title: Proxy +slug: Web/JavaScript/Reference/Global_Objects/Proxy +translation_of: Web/JavaScript/Reference/Global_Objects/Proxy +--- +<div> +<div>{{JSRef}}</div> + +<div>L'oggetto <strong>Proxy</strong> è utilizzato per definire comportamenti personalizzati per operazioni fondamentali (per esempio: ricerca delle proprietà, assegnazione, enumerazione, invocazione delle funzioni, ecc.).</div> +</div> + +<h2 id="Terminologia">Terminologia</h2> + +<dl> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler">handler</a></dt> + <dd>Oggetto placeholder, il quale contiene le trappole.</dd> + <dt>traps</dt> + <dd>I metodi che forniscono l'accesso alle proprietà. Questo è analogo al concetto di trappola nei sistemi operativi.</dd> + <dt>target</dt> + <dd>Oggetti, che i proxy virtualizzano (sostituiscono). <span class="short_text" id="result_box" lang="it"><span>Viene spesso utilizzato come back-end di archiviazione per il proxy</span></span>. Le invarianti, riguardanti oggetti non estensibili o proprietà non configurabili, sono verificate prima di interagire con l'obiettivo.</dd> +</dl> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox">var p = new Proxy(target, handler); +</pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt><code>target</code></dt> + <dd>Un oggetto target che il Proxy ingloberà. Può essere un qualsiasi tipo di oggetto, array nativi inclusi, funzioni o anche altri Proxy.</dd> + <dt><code>handler</code></dt> + <dd>Un oggetto le cui proprietà sono funzioni che definiscono i comportamenti del proxy quando un'operazione viene effettuata su di esso.</dd> +</dl> + +<h2 id="Metodi">Metodi</h2> + +<dl> + <dt>{{jsxref("Proxy.revocable()")}}</dt> + <dd>Crea un oggetto Proxy revocabile.</dd> +</dl> + +<h2 id="Metodi_dell'handler_object">Metodi dell'handler object</h2> + +<p>L'oggetto handler è un oggetto placeholder, il quale contiene le trappole per il Proxy.</p> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Esempio_base">Esempio base</h3> + +<p>In questo esempio base il numero <code>37</code> viene restituito come valore di default quando l'oggetto non contiene la proprietà richiesta. Viene utilizzato il <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/get">get</a></code> handler.</p> + +<pre class="brush: js">var handler = { + get: function(target, name) { + return name in target ? + target[name] : + 37; + } +}; + +var p = new Proxy({}, handler); +p.a = 1; +p.b = undefined; + +console.log(p.a, p.b); // 1, undefined +console.log('c' in p, p.c); // false, 37 +</pre> + +<h3 id="No-op_forwarding_proxy">No-op forwarding proxy</h3> + +<p>In questo esempio viene utilizzato un semplice oggetto Javascript come target, al quale il proxy inoltrerà tutte le operazioni che sono state applicate su di esso. </p> + +<pre class="brush: js">var target = {}; +var p = new Proxy(target, {}); + +p.a = 37; // operazione inoltrata al target + +console.log(target.a); // 37. Operazione inoltrata con successo +</pre> + +<h3 id="Validation">Validation</h3> + +<p>Con un proxy, puoi facilmente validare il valore passato per un oggetto. In questo esempio viene utilizzato il <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/get">set </a></code>handler.</p> + +<pre class="brush: js">let validator = { + set: function(obj, prop, value) { + if (prop === 'age') { + if (!Number.isInteger(value)) { + throw new TypeError('L\'età non è un numero intero'); + } + if (value > 200) { + throw new RangeError('L\'età sembra non essere valida'); + } + } + + // Il comportamento di default da adoperare per memorizzare il valore + obj[prop] = value; + + return true; + } +}; + +let person = new Proxy({}, validator); + +person.age = 100; +console.log(person.age); // 100 +person.age = 'young'; // Lancia una eccezione +person.age = 300; // Lancia una eccezione</pre> + +<h3 id="Extending_constructor">Extending constructor</h3> + +<p>Una funzione proxy può facilmente estendere un costruttore con un nuovo costruttore. Questo esempio usa gli handler: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/construct"><code>construct</code></a> e <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/apply"><code>apply</code></a> .</p> + +<pre class="brush: js">function extend(sup, base) { + var descriptor = Object.getOwnPropertyDescriptor( + base.prototype, 'constructor' + ); + base.prototype = Object.create(sup.prototype); + var handler = { + construct: function(target, args) { + var obj = Object.create(base.prototype); + this.apply(target, obj, args); + return obj; + }, + apply: function(target, that, args) { + sup.apply(that, args); + base.apply(that, args); + } + }; + var proxy = new Proxy(base, handler); + descriptor.value = proxy; + Object.defineProperty(base.prototype, 'constructor', descriptor); + return proxy; +} + +var Person = function(name) { + this.name = name; +}; + +var Boy = extend(Person, function(name, age) { + this.age = age; +}); + +Boy.prototype.sex = 'M'; + +var Peter = new Boy('Peter', 13); +console.log(Peter.sex); // "M" +console.log(Peter.name); // "Peter" +console.log(Peter.age); // 13</pre> + +<h3 id="Manipulating_DOM_nodes">Manipulating DOM nodes</h3> + +<p>Alcune volte vorresti attivare o disattivare un attributo o una classe di due elementi differenti. Qui è mostrato come è possibile farlo utilizzando il <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/set"><code>set</code></a> handler.</p> + +<pre class="brush: js">let view = new Proxy({ + selected: null +}, +{ + set: function(obj, prop, newval) { + let oldval = obj[prop]; + + if (prop === 'selected') { + if (oldval) { + oldval.setAttribute('aria-selected', 'false'); + } + if (newval) { + newval.setAttribute('aria-selected', 'true'); + } + } + + // Il comportamento di default da adoperare per memorizzare il valore + obj[prop] = newval; + + // Indicate success + return true; + } +}); + +let i1 = view.selected = document.getElementById('item-1'); +console.log(i1.getAttribute('aria-selected')); // 'true' + +let i2 = view.selected = document.getElementById('item-2'); +console.log(i1.getAttribute('aria-selected')); // 'false' +console.log(i2.getAttribute('aria-selected')); // 'true'</pre> + +<h3 id="Value_correction_and_an_extra_property">Value correction and an extra property</h3> + +<p>L'oggetto <code>products</code> del proxy valuta il valore passato e lo converte in un array se è necessario. L'oggetto supporta anche una proprietà extra chiamata <code>latestBrowser</code>, uttilizzabile sia come getter che come setter.</p> + +<pre class="brush: js">let products = new Proxy({ + browsers: ['Internet Explorer', 'Netscape'] +}, +{ + get: function(obj, prop) { + // An extra property + if (prop === 'latestBrowser') { + return obj.browsers[obj.browsers.length - 1]; + } + + // Il comportamento di default per restituire il valore + return obj[prop]; + }, + set: function(obj, prop, value) { + // An extra property + if (prop === 'latestBrowser') { + obj.browsers.push(value); + return true; + } + + // Converte il valore se non è un array + if (typeof value === 'string') { + value = [value]; + } + + // Il comportamento di default per memorizzare il valore + obj[prop] = value; + + // Indicate success + return true; + } +}); + +console.log(products.browsers); // ['Internet Explorer', 'Netscape'] +products.browsers = 'Firefox'; // passa una stringa (per sbaglio) +console.log(products.browsers); // ['Firefox'] <- nessun problema, il valore passato è un array + +products.latestBrowser = 'Chrome'; +console.log(products.browsers); // ['Firefox', 'Chrome'] +console.log(products.latestBrowser); // 'Chrome'</pre> + +<h3 id="Trovare_un_oggetto_in_un_array_dalla_sua_proprietà">Trovare un oggetto in un array dalla sua proprietà</h3> + +<p>Questo proxy estende un array con alcune caratteristiche utiliti. Come puoi notare, puoi facilmente definire nuove proprietà senza utilizzare <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperties"><code>Object.defineProperties</code></a>. Questo esempio può essere adattato per trovare una riga di una tabella partendo dalla sua cella. In questo caso il target sarà <a href="https://developer.mozilla.org/en-US/docs/DOM/table.rows"><code>table.rows</code></a>.</p> + +<pre class="brush: js">let products = new Proxy([ + { name: 'Firefox', type: 'browser' }, + { name: 'SeaMonkey', type: 'browser' }, + { name: 'Thunderbird', type: 'mailer' } +], +{ + get: function(obj, prop) { + // Il comportamento di default per ritornare un valore; prop è di solito un numero intero + if (prop in obj) { + return obj[prop]; + } + + // Ottieni il numero di prodotti; un alias di products.length + if (prop === 'number') { + return obj.length; + } + + let result, types = {}; + + for (let product of obj) { + if (product.name === prop) { + result = product; + } + if (types[product.type]) { + types[product.type].push(product); + } else { + types[product.type] = [product]; + } + } + + // Ottieni un prodotto dal campo name + if (result) { + return result; + } + + // Ottieni un prodotto dal campo type + if (prop in types) { + return types[prop]; + } + + // Ottieni i tipi di prodotto + if (prop === 'types') { + return Object.keys(types); + } + + return undefined; + } +}); + +console.log(products[0]); // { name: 'Firefox', type: 'browser' } +console.log(products['Firefox']); // { name: 'Firefox', type: 'browser' } +console.log(products['Chrome']); // undefined +console.log(products.browser); // [{ name: 'Firefox', type: 'browser' }, { name: 'SeaMonkey', type: 'browser' }] +console.log(products.types); // ['browser', 'mailer'] +console.log(products.number); // 3 +</pre> + +<h3 id="Una_lista_completa_di_traps">Una lista completa di traps</h3> + +<p>Adesso, per creare una lista di trappole, per scopi didattici, proveremo a proxare un oggetto non nativo che è particolarmente adatto a questo tipo di operazioni: l' oggetto globale <code>docCookies</code> creato da <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie/Simple_document.cookie_framework" title="https://developer.mozilla.org/en-US/docs/DOM/document.cookie#A_little_framework.3A_a_complete_cookies_reader.2Fwriter_with_full_unicode_support">the "little framework" published on the <code>document.cookie</code> page</a>.</p> + +<pre class="brush: js">/* + var docCookies = ... get the "docCookies" object here: + https://developer.mozilla.org/en-US/docs/DOM/document.cookie#A_little_framework.3A_a_complete_cookies_reader.2Fwriter_with_full_unicode_support +*/ + +var docCookies = new Proxy(docCookies, { + get: function (oTarget, sKey) { + return oTarget[sKey] || oTarget.getItem(sKey) || undefined; + }, + set: function (oTarget, sKey, vValue) { + if (sKey in oTarget) { return false; } + return oTarget.setItem(sKey, vValue); + }, + deleteProperty: function (oTarget, sKey) { + if (sKey in oTarget) { return false; } + return oTarget.removeItem(sKey); + }, + enumerate: function (oTarget, sKey) { + return oTarget.keys(); + }, + ownKeys: function (oTarget, sKey) { + return oTarget.keys(); + }, + has: function (oTarget, sKey) { + return sKey in oTarget || oTarget.hasItem(sKey); + }, + defineProperty: function (oTarget, sKey, oDesc) { + if (oDesc && 'value' in oDesc) { oTarget.setItem(sKey, oDesc.value); } + return oTarget; + }, + getOwnPropertyDescriptor: function (oTarget, sKey) { + var vValue = oTarget.getItem(sKey); + return vValue ? { + value: vValue, + writable: true, + enumerable: true, + configurable: false + } : undefined; + }, +}); + +/* Test dei cookie */ + +console.log(docCookies.my_cookie1 = 'First value'); +console.log(docCookies.getItem('my_cookie1')); + +docCookies.setItem('my_cookie1', 'Changed value'); +console.log(docCookies.my_cookie1);</pre> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-proxy-objects', 'Proxy')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Definizione iniziale.</td> + </tr> + <tr> + <td>{{SpecName('ES2016', '#sec-proxy-objects', 'Proxy')}}</td> + <td>{{Spec2('ES2016')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES2017', '#sec-proxy-objects', 'Proxy')}}</td> + <td>{{Spec2('ES2017')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-proxy-objects', 'Proxy')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_tra_Browser">Compatibilità tra Browser</h2> + + + +<p>{{Compat("javascript.builtins.Proxy", 2)}}</p> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li><a class="external" href="https://www.youtube.com/watch?v=sClk6aB_CPk">"Proxies are awesome" Brendan Eich presentation at JSConf</a> (<a class="external" href="http://www.slideshare.net/BrendanEich/metaprog-5303821">slides</a>)</li> + <li><a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:proxies">ECMAScript Harmony Proxy proposal page</a> and <a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:proxies_semantics">ECMAScript Harmony proxy semantics page</a></li> + <li><a class="external" href="http://soft.vub.ac.be/~tvcutsem/proxies/">Tutorial on proxies</a></li> + <li><a href="/en-US/docs/JavaScript/Old_Proxy_API" title="/en-US/docs/JavaScript/Old_Proxy_API">SpiderMonkey specific Old Proxy API</a></li> + <li>{{jsxref("Object.watch()")}} is a non-standard feature but has been supported in Gecko for a long time.</li> +</ul> + +<h2 id="Nota_di_licenza"><span class="short_text" id="result_box" lang="it"><span>Nota di licenza</span></span></h2> + +<p>Alcuni contentui (test, esempi) in questa pagina sono stati copiati o adattatu dall' <a class="external" href="http://wiki.ecmascript.org/doku.php">ECMAScript wiki</a> i quali contenuti sono sotto licenza <a class="external" href="http://creativecommons.org/licenses/by-nc-sa/2.0/">CC 2.0 BY-NC-SA</a>.</p> diff --git a/files/it/web/javascript/reference/global_objects/proxy/revocabile/index.html b/files/it/web/javascript/reference/global_objects/proxy/revocabile/index.html new file mode 100644 index 0000000000..bf87d7e3e7 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/proxy/revocabile/index.html @@ -0,0 +1,86 @@ +--- +title: Proxy.revocable() +slug: Web/JavaScript/Reference/Global_Objects/Proxy/revocabile +translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/revocable +--- +<div>{{JSRef}}</div> + +<p>Il metodo <code><strong>Proxy.revocable()</strong></code> è usato per creare un oggetto {{jsxref("Proxy")}} revocabile.</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox">Proxy.revocable(target, handler); +</pre> + +<h3 id="Parametri">Parametri</h3> + +<div>{{ Page("it/docs/Web/JavaScript/Reference/Global_Objects/Proxy", "Parametri") }}</div> + +<h3 id="Valore_restituito">Valore restituito</h3> + +<p>Un nuovo oggetto <code>Proxy</code> revocabile.</p> + +<h2 id="Descrizione">Descrizione</h2> + +<p>Un <code>Proxy</code> revocabile è un oggetto con le seguenti due proprietà <code>{proxy: proxy, revoke: revoke}</code>.</p> + +<dl> + <dt><code>proxy</code></dt> + <dd>L'oggetto Proxy creato con <code>new Proxy(target, handler)</code>.</dd> + <dt><code>revoke</code></dt> + <dd>Una funzione che non richiede argomenti per disattivare il <code>proxy</code>.</dd> +</dl> + +<p>Se la funzione <code>revoke()</code> viene invocata, il proxy diventa inutilizzabile: se si tenta di farne uso si otterrà un {{jsxref("TypeError")}}. Una volta che il proxy è revocato rimarrà in questo stato e potrà essere eliminato dal garbage collector. Successive invocazioni di <code>revoke()</code> non avranno effetto.</p> + +<h2 id="Esempi">Esempi</h2> + +<pre class="brush: js">var revocable = Proxy.revocable({}, { + get: function(target, name) { + return "[[" + name + "]]"; + } +}); +var proxy = revocable.proxy; +console.log(proxy.foo); // "[[foo]]" + +revocable.revoke(); + +console.log(proxy.foo); // viene sollevato un TypeError +proxy.foo = 1 // viene sollevato un TypeError +delete proxy.foo; // viene sollevato un TypeError +typeof proxy // "object", typeof non innesca nessuna trappola +</pre> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-proxy.revocable', 'Proxy Revocation Functions')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Definizione iniziale.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-proxy.revocable', 'Proxy Revocation Functions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_tra_Browser">Compatibilità tra Browser</h2> + + + +<p>{{Compat("javascript.builtins.Proxy.revocable")}}</p> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>{{jsxref("Proxy")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/set/entries/index.html b/files/it/web/javascript/reference/global_objects/set/entries/index.html new file mode 100644 index 0000000000..367507d3d5 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/set/entries/index.html @@ -0,0 +1,113 @@ +--- +title: Set.prototype.entries() +slug: Web/JavaScript/Reference/Global_Objects/Set/entries +translation_of: Web/JavaScript/Reference/Global_Objects/Set/entries +--- +<div>{{JSRef}}</div> + +<p>Il metodo <code><strong>entries()</strong></code> restituisce un novo oggetto <code>Iterator</code> che contiene<strong> un array di <code>[valore, valore]</code></strong> per ciascun elemento nell'oggetto <code>Set</code>, nell'ordine con cui sono stati inseriti. Per gli oggetti di tipo <code>Set</code> non esiste alcuna <code>chiave</code> come per gli oggetti di tipo <code>Map</code>. Comunque, per mantenere le API simili a quelle dell'oggetto <code>Map</code>, per ciascun <em>elemento</em> dell'array viene utilizzato <em>value</em> anche per la <em>chiave</em>, perciò viene restituito un array <code>[valore, valore]</code>.</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><code><em>mySet</em>.entries()</code></pre> + +<h3 id="Valore_restituito">Valore restituito</h3> + +<p>Un nuovo oggetto <code>Iterator</code> che contiene un array di <code>[valore, valore]</code> per ciascun elemento nell'oggetto <code>Set</code>, nell'ordine con cui sono stati inseriti.</p> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Uso_di_entries()">Uso di <code>entries()</code></h3> + +<pre class="brush:js">var mySet = new Set(); +mySet.add("foobar"); +mySet.add(1); +mySet.add("baz"); + +var setIter = mySet.entries(); + +console.log(setIter.next().value); // ["foobar", "foobar"] +console.log(setIter.next().value); // [1, 1] +console.log(setIter.next().value); // ["baz", "baz"] +</pre> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifiche</th> + <th scope="col">Stato</th> + <th scope="col">Commenti</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-set.prototype.entries', 'Set.prototype.entries')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-set.prototype.entries', 'Set.prototype.entries')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_browser">Compatibilità browser</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>38</td> + <td>{{ CompatGeckoDesktop("24") }}</td> + <td>{{CompatNo}}</td> + <td>25</td> + <td>7.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>38</td> + <td>{{ CompatGeckoMobile("24") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>{{jsxref("Set.prototype.keys()")}}</li> + <li>{{jsxref("Set.prototype.values()")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/set/index.html b/files/it/web/javascript/reference/global_objects/set/index.html new file mode 100644 index 0000000000..c8de5d83f6 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/set/index.html @@ -0,0 +1,394 @@ +--- +title: Set +slug: Web/JavaScript/Reference/Global_Objects/Set +translation_of: Web/JavaScript/Reference/Global_Objects/Set +--- +<div>{{JSRef}}</div> + +<div>L'oggetto <strong>Set</strong> permette di memorizzare valori <em>unici </em>di qualunque tipo, che siano {{Glossary("Primitive", "valori primitivi")}} o riferimenti ad oggetti.</div> + +<div> </div> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox">new Set([iterabile]);</pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt>iterabile</dt> + <dd>Se un <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of">oggetto iterabile</a> è passato, tutti i suoi elementi saranno aggiunti al nuovo Set. null viene trattato come undefined.</dd> +</dl> + +<h2 id="Descrizione">Descrizione</h2> + +<p>Gli oggetti <code>Set</code> sono collezioni di valori, e possibile iterare i valori nel loro ordine di inserimento. Un valore in un <code>Set</code> può occorrere solo una volta; è quindi unico nella collezione.</p> + +<h3 id="Uguaglianza_dei_valori">Uguaglianza dei valori</h3> + +<p>Dato che ogni valore in un Set deve essere unico, dovra essere controllata l'uguaglianza di un nuovo valore con valori già presenti nel Set, questa operazione non è basata sullo stesso algoritmo usato per l'operatore ===. Nello specifico, per i Set, +0 (che è strettamente uguale a -0) e -0 sono valori differenti. Comunque, questo è stato cambiato nell'ultima specifica ECMAScript 6. Partendo da Gecko 29.0 {{geckoRelease("29")}} ({{bug("952870")}}) e da questa <a href="https://code.google.com/p/v8/issues/detail?id=3069">recente nightly Chrome issue</a>, +0 e -0 sono trattati come valori identici nell'oggetto <code>Set</code>. Inoltre, <code>NaN</code> e <code>undefined</code> possono essere memorizzati nei Set. <code>NaN</code> è considerato unguale a <code>NaN</code> (anche se <code>NaN</code> !== <code>NaN</code>).</p> + +<h2 id="Proprietà">Proprietà</h2> + +<dl> + <dt><code>Set.size</code></dt> + <dd>Il valore della proprietà <strong><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">size </span></font></strong>è 0. </dd> + <dt>{{jsxref("Set.@@species", "get Set[@@species]")}}</dt> + <dd>Il costruttore della funzione che viene usato per creare oggetti derivati.</dd> + <dt>{{jsxref("Set.prototype")}}</dt> + <dd>Rappresenta il prototipo per il costruttore del <code>Set</code>. Consente l'aggiunta di proprietà a tutti gli oggetti <code>Set</code>.</dd> +</dl> + +<h2 id="Instanze_Set"><code>Instanze Set</code></h2> + +<p>Tutte le instanze di <code>Set</code> ereditano da {{jsxref("Set.prototype")}}.</p> + +<h3 id="Proprietà_2">Proprietà</h3> + +<p>{{page('it-IT/Web/JavaScript/Reference/Global_Objects/Set/prototype','Properties')}}</p> + +<h3 id="Methods">Methods</h3> + +<p>{{page('it-IT/Web/JavaScript/Reference/Global_Objects/Set/prototype','Methods')}}</p> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Uso_dell'oggetto_Set">Uso dell'oggetto <code>Set</code></h3> + +<pre class="brush: js">var mySet = new Set(); + +mySet.add(1); +mySet.add(5); +mySet.add("some text"); +var o = {a: 1, b: 2}; +mySet.add(o); + +mySet.has(1); // true +mySet.has(3); // false, 3 non è stato aggiunto al set +mySet.has(5); // true +mySet.has(Math.sqrt(25)); // true +mySet.has("Some Text".toLowerCase()); // true +mySet.has(o); // true + +mySet.size; // 4 + +mySet.delete(5); // rimuove 5 dal set +mySet.has(5); // false, 5 è stato rimosso + +mySet.size; // 3, abbiamo rimosso 1 valore +</pre> + +<h3 id="Iterando_oggetti_Set">Iterando oggetti Set</h3> + +<pre class="brush: js">// iterando i valori in un set +// logga gli item in ordine: 1, "testo di esempio" +for (let item of mySet) console.log(item); + +// logga gli item in ordine: 1, "testo di esempio" +for (let item of mySet.keys()) console.log(item); + +// logga gli item in ordine: 1, "testo di esempio" +for (let item of mySet.values()) console.log(item); + +// logga gli item in ordine: 1, "testo di esempio" +//(chiavi e valori qui sono uguali) +for (let [key, value] of mySet.entries()) console.log(key); + +// converte un set in un Array semplice (con ) +// convert set to plain Array (con <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Array_comprehensions">Array comprehensions</a>) +var myArr = [v for (v of mySet)]; // [1, "some text"] +// Alternativa (con <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from">Array.from</a>) +var myArr = Array.from(mySet); // [1, "some text"] + +// Il seguente snippet funzionerà anche in un documento HTML +mySet.add(document.body); +mySet.has(document.querySelector("body")); // true + +// conversione tra Set e Array +mySet2 = new Set([1,2,3,4]); +mySet2.size; // 4 +[...mySet2]; // [1,2,3,4] + +// l'itersezione può essere simulata con +var intersection = new Set([...set1].filter(x => set2.has(x))); + +// la differenza può essere simulata con +var difference = new Set([...set1].filter(x => !set2.has(x))); + +// Itera i valori di un set con forEach +mySet.forEach(function(value) { + console.log(value); +}); + +// 1 +// 2 +// 3 +// 4</pre> + +<h3 id="Relazione_con_gli_oggetti_Array">Relazione con gli oggetti <code>Array</code></h3> + +<pre class="brush: js">var myArray = ["value1", "value2", "value3"]; + +// Uso del costruttore di Set per trasformare un Array in un Set +var mySet = new Set(myArray); + +mySet.has("value1"); // ritorna true + +// Usa l'operatore spread per trasformare un Set in un Array +console.log(uneval([...mySet])); // Mostrerà lo stesso identico Array di myArray</pre> + +<h2 id="Specifica">Specifica</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-set-objects', 'Set')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-set-objects', 'Set')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td> + <p>{{ CompatChrome(38) }} [1]</p> + </td> + <td>{{ CompatGeckoDesktop("13") }}</td> + <td>{{ CompatIE("11") }}</td> + <td>25</td> + <td>7.1</td> + </tr> + <tr> + <td>Constructor argument: <code>new Set(iterable)</code></td> + <td>{{ CompatChrome(38) }}</td> + <td>{{ CompatGeckoDesktop("13") }}</td> + <td>{{CompatNo}}</td> + <td>25</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>iterable</td> + <td>{{ CompatChrome(38) }}</td> + <td>{{ CompatGeckoDesktop("17") }}</td> + <td>{{CompatNo}}</td> + <td>25</td> + <td>7.1</td> + </tr> + <tr> + <td><code>Set.clear()</code></td> + <td>{{ CompatChrome(38) }}</td> + <td>{{CompatGeckoDesktop("19")}}</td> + <td>{{ CompatIE("11") }}</td> + <td>25</td> + <td>7.1</td> + </tr> + <tr> + <td><code>Set.keys(), Set.values(), Set.entries()</code></td> + <td>{{ CompatChrome(38) }}</td> + <td>{{CompatGeckoDesktop("24")}}</td> + <td>{{CompatNo}}</td> + <td>25</td> + <td>7.1</td> + </tr> + <tr> + <td><code>Set.forEach()</code></td> + <td>{{ CompatChrome(38) }}</td> + <td>{{CompatGeckoDesktop("25")}}</td> + <td>{{ CompatIE("11") }}</td> + <td>25</td> + <td>7.1</td> + </tr> + <tr> + <td>Value equality for -0 and 0</td> + <td>{{ CompatChrome(38) }}</td> + <td>{{CompatGeckoDesktop("29")}}</td> + <td>{{CompatNo}}</td> + <td>25</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Constructor argument: <code>new Set(null)</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("37")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Monkey-patched <code>add()</code> in Constructor</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("37")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>Set[@@species]</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("41")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>Set()</code> without <code>new</code> throws</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("42")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(38)}} [1]</td> + <td>{{ CompatGeckoMobile("13") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8</td> + </tr> + <tr> + <td>Constructor argument: <code>new Set(iterable)</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(38)}}</td> + <td>{{ CompatGeckoMobile("13") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>iterable</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{ CompatGeckoMobile("17") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8</td> + </tr> + <tr> + <td><code>Set.clear()</code></td> + <td>{{CompatNo}}</td> + <td>{{ CompatChrome(38) }}</td> + <td>{{CompatGeckoMobile("19")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8</td> + </tr> + <tr> + <td><code>Set.keys(), Set.values(), Set.entries()</code></td> + <td>{{CompatNo}}</td> + <td>{{ CompatChrome(38) }}</td> + <td>{{CompatGeckoMobile("24")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8</td> + </tr> + <tr> + <td><code>Set.forEach()</code></td> + <td>{{CompatNo}}</td> + <td>{{ CompatChrome(38) }}</td> + <td>{{CompatGeckoMobile("25")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8</td> + </tr> + <tr> + <td>Value equality for -0 and 0</td> + <td>{{CompatNo}}</td> + <td>{{ CompatChrome(38) }}</td> + <td>{{CompatGeckoMobile("29")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Constructor argument: <code>new Set(null)</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("37")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Monkey-patched <code>add()</code> in Constructor</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("37")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>Set[@@species]</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("41")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>Set()</code> without <code>new</code> throws</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("42")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] La caratteristica è disponibile come opzione da Chrome 31. In <code>chrome://flags</code>, attivare la voce “Enable Experimental JavaScript”.</p> + +<h2 id="Guarda_pure">Guarda pure</h2> + +<ul> + <li>{{jsxref("Map")}}</li> + <li>{{jsxref("WeakMap")}}</li> + <li>{{jsxref("WeakSet")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/set/values/index.html b/files/it/web/javascript/reference/global_objects/set/values/index.html new file mode 100644 index 0000000000..e662f3d62d --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/set/values/index.html @@ -0,0 +1,114 @@ +--- +title: Set.prototype.values() +slug: Web/JavaScript/Reference/Global_Objects/Set/values +translation_of: Web/JavaScript/Reference/Global_Objects/Set/values +--- +<div>{{JSRef}}</div> + +<p>Il metodo <code><strong>values()</strong></code> restituisce un nuovo oggetto di tipo <code><strong>Iterator</strong></code> che contiene tutti i valori presenti nell'oggetto <code>Set</code>, nell'ordine con cui sono stati inseriti.</p> + +<p>Il metodo <strong><code>keys()</code></strong> è un alias per questo metodo (in modo da mantenere api simili all'oggetto {{jsxref("Map")}}); si comporta esattamente allo stesss modo e restiuisce i <strong>valori</strong> contenuti nell'oggetto <code>Set</code>.</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><code><em>mySet</em>.values(); +</code></pre> + +<h3 id="Valore_restituito">Valore restituito</h3> + +<p>Un nuovo oggetto di tipo <code><strong>Iterator</strong></code> che contiene tutti i valori presenti nell'oggetto <code>Set</code>, nell'ordine con cui sono stati inseriti.</p> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Uso_di_values()">Uso di <code>values()</code></h3> + +<pre class="brush:js">var mySet = new Set(); +mySet.add("foo"); +mySet.add("bar"); +mySet.add("baz"); + +var setIter = mySet.values(); + +console.log(setIter.next().value); // "foo" +console.log(setIter.next().value); // "bar" +console.log(setIter.next().value); // "baz"</pre> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifiche</th> + <th scope="col">Stato</th> + <th scope="col">Commenti</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-set.prototype.values', 'Set.prototype.values')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-set.prototype.values', 'Set.prototype.values')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_browser">Compatibilità browser</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>38</td> + <td>{{CompatGeckoDesktop("24")}}</td> + <td>{{CompatNo}}</td> + <td>25</td> + <td>7.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>38</td> + <td>{{ CompatGeckoMobile("24") }}</td> + <td>{{ CompatNo}}</td> + <td>{{ CompatNo}}</td> + <td>8</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>{{jsxref("Set.prototype.entries()")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/string/charat/index.html b/files/it/web/javascript/reference/global_objects/string/charat/index.html new file mode 100644 index 0000000000..312cfa9713 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/string/charat/index.html @@ -0,0 +1,247 @@ +--- +title: String.prototype.charAt() +slug: Web/JavaScript/Reference/Global_Objects/String/charAt +translation_of: Web/JavaScript/Reference/Global_Objects/String/charAt +--- +<div>{{JSRef}}</div> + +<p><span class="seoSummary">Il metodo {{jsxref("String")}} dell'oggetto <strong><code>charAt()</code></strong> restituisce una nuova stringa che consiste nella singola unità di codice UTF-16 situata nell'offset specificato nella stringa.</span></p> + +<div>{{EmbedInteractiveExample("pages/js/string-charat.html")}}</div> + +<p class="hidden">La fonte per questo esempio interattivo è memorizzata in un repository GitHub. Se desideri contribuire al progetto di esempi interattivi, clonare <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> e inviarci una richiesta di pull.</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><em>carattere</em> = <em>str</em>.charAt(<em>indice</em>)</pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt><code>index</code></dt> + <dd>Un numero intero compreso tra 0 e 1-meno della lunghezza della stringa. Se non viene fornito alcun indice, il valore predefinito è 0, quindi viene restituito il primo carattere nella stringa.</dd> +</dl> + +<h3 id="Valore_restituito">Valore restituito</h3> + +<p>Una stringa che rappresenta il carattere (esattamente un'unità di codice UTF-16) nell'indice specificato; stringa vuota se <code>index</code> non è compreso nell'intervallo</p> + +<h2 id="Descrizione">Descrizione</h2> + +<p>I caratteri in una stringa sono indicizzati da sinistra a destra. L'indice del primo carattere è 0 e l'indice dell'ultimo carattere in una stringa chiamata <code>stringName</code> è <code>stringName.length - 1</code>. Se l'indice che fornisci è fuori da questo intervallo, JavaScript restituisce una stringa vuota.</p> + +<p>Se non viene fornito alcun indice per <code> charAt()</code>, il valore predefinito è 0.</p> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Visualizzazione_di_caratteri_in_posizioni_diverse_in_una_stringa">Visualizzazione di caratteri in posizioni diverse in una stringa</h3> + +<p>Nell'esempio seguente vengono visualizzati caratteri in posizioni diverse nella stringa <code> "Brave new world"</code>:</p> + +<pre class="brush: js">var anyString = 'Brave new world'; +console.log("Il carattere nell'indice 0 è '" + anyString.charAt() + "'"); +// Non è stato fornito alcun indice, usato 0 come predefinito + +console.log("The character at index 0 is '" + anyString.charAt(0) + "'"); +console.log("The character at index 1 is '" + anyString.charAt(1) + "'"); +console.log("The character at index 2 is '" + anyString.charAt(2) + "'"); +console.log("The character at index 3 is '" + anyString.charAt(3) + "'"); +console.log("The character at index 4 is '" + anyString.charAt(4) + "'"); +console.log("The character at index 999 is '" + anyString.charAt(999) + "'"); +</pre> + +<p>Queste righe mostrano quanto segue:</p> + +<pre class="brush: js">//Il carattere nell'indice 0 is 'B' + +//Il carattere nell'indice 0 is 'B' +//Il carattere nell'indice 1 is 'r' +//Il carattere nell'indice 2 is 'a' +//Il carattere nell'indice 3 is 'v' +//Il carattere nell'indice 4 is 'e' +//Il carattere nell'indice 999 is '' +</pre> + +<h3 id="Recupero_di_caratteri_interi">Recupero di caratteri interi</h3> + +<p>Quanto segue fornisce un mezzo per garantire che l'attraversamento di un loop string fornisca sempre un intero carattere, anche se la stringa contiene caratteri che non si trovano nel piano multi-lingue di base.</p> + +<pre class="brush: js">var str = 'A \uD87E\uDC04 Z'; // Potremmo anche usare direttamente un carattere non-BMP +for (var i = 0, chr; i < str.length; i++) { + if ((chr = getWholeChar(str, i)) === false) { + continue; + } + // Adatta questa linea all'inizio di ogni ciclo, passando l'intera stringa e + // l'iterazione corrente e il ritorno di una variabile per rappresentare il + // personaggio individuale + + console.log(chr); +} + +function getWholeChar(str, i) { + var code = str.charCodeAt(i); + + if (Number.isNaN(code)) { + return ''; // Posizione non trovata + } + if (code < 0xD800 || code > 0xDFFF) { + return str.charAt(i); + } + + // Alto surrogato (potrebbe cambiare l'ultimo esadecimale a 0xDB7F per trattare un alto privato + // si surroga come singoli caratteri) + if (0xD800 <= code && code <= 0xDBFF) { + if (str.length <= (i + 1)) { + throw 'Alto surrogato senza seguire un surrogato basso'; + } + var next = str.charCodeAt(i + 1); + if (0xDC00 > next || next > 0xDFFF) { + throw 'Alto surrogato senza seguire un surrogato basso'; + } + return str.charAt(i) + str.charAt(i + 1); + } + // Low surrogate (0xDC00 <= code && code <= 0xDFFF) + if (i === 0) { + throw 'Basso surrogato senza precedente surrogato elevato'; + } + var prev = str.charCodeAt(i - 1); + + // (could change last hex to 0xDB7F to treat high private + // surrogates as single characters) + if (0xD800 > prev || prev > 0xDBFF) { + throw 'Basso surrogato senza precedente surrogato elevato'; + } + // Ora possiamo passare sopra surrogati bassi come secondo componente + // in una coppia che abbiamo già elaborato + return false; +} +</pre> + +<p>In un ambiente ECMAScript 2016 che consente l'assegnazione destrutturata, la seguente è un'alternativa più succinta e un po 'più flessibile in quanto incrementa automaticamente una variabile incrementale (se il carattere lo richiede in quanto coppia surrogata).</p> + +<pre class="brush: js">var str = 'A\uD87E\uDC04Z'; // Potremmo anche usare direttamente un carattere non-BMP +for (var i = 0, chr; i < str.length; i++) { + [chr, i] = getWholeCharAndI(str, i); + // Adatta questa linea all'inizio di ogni ciclo, passando l'intera stringa e + // l'iterazione corrente e la restituzione di un array con il singolo carattere + // e valore "i" (modificato solo se una coppia surrogata) + + console.log(chr); +} +function getWholeCharAndI(str, i) { + var code = str.charCodeAt(i); + if (Number.isNaN(code)) { + return ''; // Posizione non trovata + } + if (code < 0xD800 || code > 0xDFFF) { + return [str.charAt(i), i]; // Carattere normale, mantenendo 'i' lo stesso + } + // Alto surrogato (potrebbe cambiare l'ultimo esadecimale a 0xDB7F per trattare un alto privato + // si surroga come singoli caratteri) + if (0xD800 <= code && code <= 0xDBFF) { + if (str.length <= (i + 1)) { + throw "Alto surrogato senza seguire un surrogato basso"; + } + var next = str.charCodeAt(i + 1); + if (0xDC00 > next || next > 0xDFFF) { + throw "Alto surrogato senza seguire un surrogato basso"; + } + return [str.charAt (i) + str.charAt (i + 1), i + 1]; + } + // Basso surrogato (0xDC00 <= code && code <= 0xDFFF) + if (i === 0) { + throw "Basso surrogato senza precedente surrogato elevato"; + } + var prev = str.charCodeAt(i - 1); + // (potrebbe cambiare l'ultimo esadecimale in 0xDB7F per trattare i surrogati ad alto livello privato + // come singoli caratteri) + if (0xD800 > prev || prev > 0xDBFF) { + throw "Basso surrogato senza precedente surrogato elevato"; + } + // Restituisce invece il carattere successivo (e incrementa) + return [str.charAt(i + 1), i + 1]; +} +</pre> + +<h3 id="Correggere_charAt()_per_supportare_caratteri_non-Basic-Multilingual-Plane_(BMP)">Correggere <code>charAt()</code> per supportare caratteri non-Basic-Multilingual-Plane (BMP)</h3> + +<p>Mentre l'esempio sopra può essere più frequentemente utile per coloro che desiderano supportare caratteri non BMP (dal momento che non richiede al chiamante di sapere dove potrebbe apparire un personaggio non BMP), nel caso in cui uno lo desideri, nella scelta di un personaggio per indice, per trattare le coppie surrogate all'interno di una stringa come i singoli caratteri che rappresentano, si può usare quanto segue:</p> + +<pre class="brush: js">function fixedCharAt(str, idx) { + var ret = ''; + str += ''; + var end = str.length; + + var surrogatePairs = /[\uD800-\uDBFF][\uDC00-\uDFFF]/g; + while ((surrogatePairs.exec(str)) != null) { + var li = surrogatePairs.lastIndex; + if (li - 2 < idx) { + idx++; + } else { + break; + } + } + + if (idx >= end || idx < 0) { + return ''; + } + + ret += str.charAt(idx); + + if (/[\uD800-\uDBFF]/.test(ret) && /[\uDC00-\uDFFF]/.test(str.charAt(idx + 1))) { + // Vai avanti, poiché uno dei "personaggi" fa parte di una coppia di sostituti + ret += str.charAt(idx + 1); + } + return ret; +} +</pre> + +<h2 id="Specificazioni">Specificazioni</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specificazioni</th> + <th scope="col">Stato</th> + <th scope="col">Commenti</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>definizione iniziale.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.5.4.4', 'String.prototype.charAt')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-string.prototype.charat', 'String.prototype.charAt')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.charat', 'String.prototype.charAt')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_il_browser">Compatibilità con il browser</h2> + +<p class="hidden">La tabella di compatibilità in questa pagina è generata da dati strutturati. Se desideri contribuire ai dati, consulta <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e inviaci una richiesta di pull.</p> + +<p>{{Compat("javascript.builtins.String.charAt")}}</p> + +<h2 id="Guarda_anche">Guarda anche</h2> + +<ul> + <li>{{jsxref("String.prototype.indexOf()")}}</li> + <li>{{jsxref("String.prototype.lastIndexOf()")}}</li> + <li>{{jsxref("String.prototype.charCodeAt()")}}</li> + <li>{{jsxref("String.prototype.codePointAt()")}}</li> + <li>{{jsxref("String.prototype.split()")}}</li> + <li>{{jsxref("String.fromCodePoint()")}}</li> + <li><a href="https://mathiasbynens.be/notes/javascript-unicode">JavaScript has a Unicode problem – Mathias Bynens</a></li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/string/includes/index.html b/files/it/web/javascript/reference/global_objects/string/includes/index.html new file mode 100644 index 0000000000..44eac8fc22 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/string/includes/index.html @@ -0,0 +1,188 @@ +--- +title: String.prototype.includes() +slug: Web/JavaScript/Reference/Global_Objects/String/includes +translation_of: Web/JavaScript/Reference/Global_Objects/String/includes +--- +<div>{{JSRef}}</div> + +<div>Il metodo <strong><code>includes() </code></strong>verifica se una stringa ne contiene un'altra desiderata, restituendo <code>true</code> o <code>false</code> in base dell'esito della ricerca.</div> + +<div> </div> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><code><var>str</var>.includes(<var>searchString</var>[, <var>position</var>])</code></pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt><code>searchString</code></dt> + <dd>Una stringa da cercare all'interno di una stringa.</dd> + <dt><code>position</code></dt> + <dd>Opzionale. La posizione in questa stringa. La posizione in questa stringa in cui iniziare la ricerca di searchString; il valore predefinito è 0.</dd> +</dl> + +<h3 id="Valore_di_ritorno">Valore di ritorno</h3> + +<p><strong><code>true</code></strong> se la stringa contiene la stringa di ricerca; altrimenti, <strong><code>false</code></strong>.</p> + +<h2 id="Descrizione">Descrizione</h2> + +<p>Questo metodo permette di determinare se la stringa includa o no un'altra stringa.</p> + +<h3 id="Sensitività_alle_maiuscole">Sensitività alle maiuscole</h3> + +<p>Il metodo <code>includes()</code> è sensibile alle maiuscole. Per esempio, la seguente espressione restituisce false:</p> + +<pre class="brush: js">'Blue Whale'.includes('blue'); // returns false +</pre> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Utilizzando_includes()">Utilizzando <code>includes()</code></h3> + +<pre class="brush: js">var str = 'To be, or not to be, that is the question.'; + +console.log(str.includes('To be')); // true +console.log(str.includes('question')); // true +console.log(str.includes('nonexistent')); // false +console.log(str.includes('To be', 1)); // false +console.log(str.includes('TO BE')); // false +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p>Questo metodo è stato aggiunto alla specifica ECMAScript 2015 e potrebbe essere non disponibile ancora in tutte le implementazioni di JavaScript.</p> + +<pre class="brush: js">if (!String.prototype.includes) { + String.prototype.includes = function(search, start) { + 'use strict'; + if (typeof start !== 'number') { + start = 0; + } + + if (start + search.length > this.length) { + return false; + } else { + return this.indexOf(search, start) !== -1; + } + }; +} + +/* +https://github.com/FabioVergani/js-Polyfill_StringIncludes/blob/master/StringIncludes.js + +(function(s){'use strict'; + var o=s.prototype,p='includes'; + o[p]||(o[p]=function(a,b){//search,start + var e=this,i=isNaN(b)?0:b,t=a,l=t.length; + return (l<1||((i+l)>e.length))?false:-1!==e.indexOf(t,i); + }); +})(String); + +*/</pre> + +<p> </p> + +<p> </p> + +<p> </p> + +<p> </p> + +<h2 id="Specificazioni">Specificazioni</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-string.prototype.includes', 'String.prototype.includes')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Definizioni inizili.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.includes', 'String.prototype.includes')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_Browser">Compatibilità Browser </h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Edge</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome("41")}}</td> + <td>{{CompatGeckoDesktop("40")}}</td> + <td>{{CompatNo}}</td> + <td>14393+</td> + <td>{{CompatNo}}</td> + <td>{{CompatSafari("9")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("40")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="String.prototype.contains">String.prototype.contains</h2> + +<p>In Firefox 18 - 39, il nome di questo metodo era <code>contains()</code>. E' stato rinominato in<code>includes()</code> in {{bug(1102219)}} a causa del seguente motivo:</p> + +<p>E' stato riportato che alcuni websites che utilizzano MooTools 1.2 non funzionavano su Firefox 17. Tale versione di MooTools controlla se <code>String.prototype.contains()</code> esiste e, se non esiste, MooTools aggiunge una propria funzione. Con l'introduzione di questa funzione in Firefox 17, il comportamento di tale controllo è cambiato in un modo che il codice basato su <code>String.prototype.contains()</code> non funzioni. Come risultato, l'implementazione è stata disabilitata in Firefox 17 e <code>String.prototype.contains()</code> era disponibile nella versione successiva, in Firefox 18, quando <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=789036#c32">outreach to MooTools </a>stava conducendo al rilascio di <a href="http://mootools.net/blog/2013/02/19/mootools-1-2-6-released">MooTools version 1.2.6</a>.</p> + +<p>MooTools 1.3 forza la propria versione di <code>String.prototype.contains()</code>, così i siti web che si affidano ad essa non vanno in break. Comunque si noti che la signature di <a href="http://mootools.net/core/docs/1.3.2/Types/String#String-method:-contains">MooTools 1.3 </a>e quella di ECMAScript 2015 per questo metodo differiscono (sul secondo argomento). Più avanti , <a href="https://github.com/mootools/mootools-core/blob/master/Docs/Types/String.md#note">MooTools 1.5+ ha cambiato la signature per incontrare lo standard ES2015.</a></p> + +<p>In Firefox 48, <code>String.prototype.contains()</code> è stato rimosso. Usare <code>String.prototype.includes()</code> solamente.</p> + +<h2 id="Vedere_anche">Vedere anche</h2> + +<ul> + <li>{{jsxref("Array.prototype.includes()")}} {{experimental_inline}}</li> + <li>{{jsxref("TypedArray.prototype.includes()")}} {{experimental_inline}}</li> + <li>{{jsxref("String.prototype.indexOf()")}}</li> + <li>{{jsxref("String.prototype.lastIndexOf()")}}</li> + <li>{{jsxref("String.prototype.startsWith()")}}</li> + <li>{{jsxref("String.prototype.endsWith()")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/string/index.html b/files/it/web/javascript/reference/global_objects/string/index.html new file mode 100644 index 0000000000..713f9a0cb4 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/string/index.html @@ -0,0 +1,410 @@ +--- +title: String +slug: Web/JavaScript/Reference/Global_Objects/String +tags: + - ECMAScript 2015 + - JavaScript + - NeedsTranslation + - Reference + - String + - TopicStub +translation_of: Web/JavaScript/Reference/Global_Objects/String +--- +<div>{{JSRef}}</div> + +<p>L'oggetto globale "String" è un costruttore per le stringhe o una sequenza alfanumerica di caratteri.</p> + +<h2 id="Syntax">Syntax</h2> + +<p>String literals take the forms:</p> + +<pre class="syntaxbox">'string text' +"string text" +"中文 español deutsch English हिन्दी العربية português বাংলা русский 日本語 ਪੰਜਾਬੀ 한국어 தமிழ் עברית"</pre> + +<p>Strings can also be created using the <code>String</code> global object directly:</p> + +<pre class="syntaxbox">String(thing)</pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt><code>thing</code></dt> + <dd>Anything to be converted to a string.</dd> +</dl> + +<h3 id="Template_literals">Template literals</h3> + +<p>Starting with ECMAScript 2015, string literals can also be so-called <a href="/en-US/docs/Web/JavaScript/Reference/Template_literals">Template literals</a>:</p> + +<pre class="syntaxbox">`hello world` +`hello! + world!` +`hello ${who}` +escape `<a>${who}</a>`</pre> + +<dl> +</dl> + +<h3 id="Escape_notation">Escape notation</h3> + +<p>Beside regular, printable characters, special characters can be encoded using escape notation:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Code</th> + <th scope="col">Output</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>\0</code></td> + <td>the NULL character</td> + </tr> + <tr> + <td><code>\'</code></td> + <td>single quote</td> + </tr> + <tr> + <td><code>\"</code></td> + <td>double quote</td> + </tr> + <tr> + <td><code>\\</code></td> + <td>backslash</td> + </tr> + <tr> + <td><code>\n</code></td> + <td>nuova linea</td> + </tr> + <tr> + <td><code>\r</code></td> + <td>carriage return</td> + </tr> + <tr> + <td><code>\v</code></td> + <td>vertical tab</td> + </tr> + <tr> + <td><code>\t</code></td> + <td>tab</td> + </tr> + <tr> + <td><code>\b</code></td> + <td>backspace</td> + </tr> + <tr> + <td><code>\f</code></td> + <td>form feed</td> + </tr> + <tr> + <td><code>\uXXXX</code></td> + <td>unicode codepoint</td> + </tr> + <tr> + <td><code>\u{X}</code> ... <code>\u{XXXXXX}</code></td> + <td>unicode codepoint {{experimental_inline}}</td> + </tr> + <tr> + <td><code>\xXX</code></td> + <td>the Latin-1 character</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p>Unlike some other languages, JavaScript makes no distinction between single-quoted strings and double-quoted strings; therefore, the escape sequences above work in strings created with either single or double quotes.</p> +</div> + +<dl> +</dl> + +<h3 id="Long_literal_strings">Long literal strings</h3> + +<p>Sometimes, your code will include strings which are very long. Rather than having lines that go on endlessly, or wrap at the whim of your editor, you may wish to specifically break the string into multiple lines in the source code without affecting the actual string contents. There are two ways you can do this.</p> + +<p>You can use the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Addition_()">+</a> operator to append multiple strings together, like this:</p> + +<pre class="brush: js">let longString = "This is a very long string which needs " + + "to wrap across multiple lines because " + + "otherwise my code is unreadable."; +</pre> + +<p>Or you can use the backslash character ("\") at the end of each line to indicate that the string will continue on the next line. Make sure there is no space or any other character after the backslash (except for a line break), or as an indent; otherwise it will not work. That form looks like this:</p> + +<pre class="brush: js">let longString = "This is a very long string which needs \ +to wrap across multiple lines because \ +otherwise my code is unreadable."; +</pre> + +<p>Both of these result in identical strings being created.</p> + +<h2 id="Descrizione">Descrizione</h2> + +<p>Strings are useful for holding data that can be represented in text form. Some of the most-used operations on strings are to check their {{jsxref("String.length", "length")}}, to build and concatenate them using the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/String_Operators">+ and += string operators</a>, checking for the existence or location of substrings with the {{jsxref("String.prototype.indexOf()", "indexOf()")}} method, or extracting substrings with the {{jsxref("String.prototype.substring()", "substring()")}} method.</p> + +<h3 id="Character_access">Character access</h3> + +<p>There are two ways to access an individual character in a string. The first is the {{jsxref("String.prototype.charAt()", "charAt()")}} method:</p> + +<pre class="brush: js">return 'cat'.charAt(1); // returns "a" +</pre> + +<p>The other way (introduced in ECMAScript 5) is to treat the string as an array-like object, where individual characters correspond to a numerical index:</p> + +<pre class="brush: js">return 'cat'[1]; // returns "a" +</pre> + +<p>For character access using bracket notation, attempting to delete or assign a value to these properties will not succeed. The properties involved are neither writable nor configurable. (See {{jsxref("Object.defineProperty()")}} for more information.)</p> + +<h3 id="Comparing_strings">Comparing strings</h3> + +<p>C developers have the <code>strcmp()</code> function for comparing strings. In JavaScript, you just use the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">less-than and greater-than operators</a>:</p> + +<pre class="brush: js">var a = 'a'; +var b = 'b'; +if (a < b) { // true + console.log(a + ' is less than ' + b); +} else if (a > b) { + console.log(a + ' is greater than ' + b); +} else { + console.log(a + ' and ' + b + ' are equal.'); +} +</pre> + +<p>A similar result can be achieved using the {{jsxref("String.prototype.localeCompare()", "localeCompare()")}} method inherited by <code>String</code> instances.</p> + +<h3 id="Distinction_between_string_primitives_and_String_objects">Distinction between string primitives and <code>String</code> objects</h3> + +<p>Note that JavaScript distinguishes between <code>String</code> objects and primitive string values. (The same is true of {{jsxref("Boolean")}} and {{jsxref("Global_Objects/Number", "Numbers")}}.)</p> + +<p>String literals (denoted by double or single quotes) and strings returned from <code>String</code> calls in a non-constructor context (i.e., without using the {{jsxref("Operators/new", "new")}} keyword) are primitive strings. JavaScript automatically converts primitives to <code>String</code> objects, so that it's possible to use <code>String</code> object methods for primitive strings. In contexts where a method is to be invoked on a primitive string or a property lookup occurs, JavaScript will automatically wrap the string primitive and call the method or perform the property lookup.</p> + +<pre class="brush: js">var s_prim = 'foo'; +var s_obj = new String(s_prim); + +console.log(typeof s_prim); // Logs "string" +console.log(typeof s_obj); // Logs "object" +</pre> + +<p>String primitives and <code>String</code> objects also give different results when using {{jsxref("Global_Objects/eval", "eval()")}}. Primitives passed to <code>eval</code> are treated as source code; <code>String</code> objects are treated as all other objects are, by returning the object. For example:</p> + +<pre class="brush: js">var s1 = '2 + 2'; // creates a string primitive +var s2 = new String('2 + 2'); // creates a String object +console.log(eval(s1)); // returns the number 4 +console.log(eval(s2)); // returns the string "2 + 2" +</pre> + +<p>For these reasons, code may break when it encounters <code>String</code> objects when it expects a primitive string instead, although generally authors need not worry about the distinction.</p> + +<p>A <code>String</code> object can always be converted to its primitive counterpart with the {{jsxref("String.prototype.valueOf()", "valueOf()")}} method.</p> + +<pre class="brush: js">console.log(eval(s2.valueOf())); // returns the number 4 +</pre> + +<div class="note"><strong>Note:</strong> For another possible approach to strings in JavaScript, please read the article about <a href="/en-US/Add-ons/Code_snippets/StringView"><code>StringView</code> — a C-like representation of strings based on typed arrays</a>.</div> + +<h2 id="Properties">Properties</h2> + +<dl> + <dt>{{jsxref("String.prototype")}}</dt> + <dd>Allows the addition of properties to a <code>String</code> object.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<dl> + <dt>{{jsxref("String.fromCharCode()")}}</dt> + <dd>Returns a string created by using the specified sequence of Unicode values.</dd> + <dt>{{jsxref("String.fromCodePoint()")}} {{experimental_inline}}</dt> + <dd>Returns a string created by using the specified sequence of code points.</dd> + <dt>{{jsxref("String.raw()")}} {{experimental_inline}}</dt> + <dd>Returns a string created from a raw template string.</dd> +</dl> + +<h2 id="String_generic_methods"><code>String</code> generic methods</h2> + +<div class="warning"> +<p><strong>String generics are non-standard, deprecated and will get removed near future</strong>. Note that you can not rely on them cross-browser without using the shim that is provided below.</p> +</div> + +<p>The <code>String</code> instance methods are also available in Firefox as of JavaScript 1.6 (<strong>not</strong> part of the ECMAScript standard) on the <code>String</code> object for applying <code>String</code> methods to any object:</p> + +<pre class="brush: js">var num = 15; +console.log(String.replace(num, /5/, '2')); +</pre> + +<p>{{jsxref("Global_Objects/Array", "Generics", "#Array_generic_methods", 1)}} are also available on {{jsxref("Array")}} methods.</p> + +<p>The following is a shim to provide support to non-supporting browsers:</p> + +<pre class="brush: js">/*globals define*/ +// Assumes all supplied String instance methods already present +// (one may use shims for these if not available) +(function() { + 'use strict'; + + var i, + // We could also build the array of methods with the following, but the + // getOwnPropertyNames() method is non-shimable: + // Object.getOwnPropertyNames(String).filter(function(methodName) { + // return typeof String[methodName] === 'function'; + // }); + methods = [ + 'quote', 'substring', 'toLowerCase', 'toUpperCase', 'charAt', + 'charCodeAt', 'indexOf', 'lastIndexOf', 'startsWith', 'endsWith', + 'trim', 'trimLeft', 'trimRight', 'toLocaleLowerCase', + 'toLocaleUpperCase', 'localeCompare', 'match', 'search', + 'replace', 'split', 'substr', 'concat', 'slice' + ], + methodCount = methods.length, + assignStringGeneric = function(methodName) { + var method = String.prototype[methodName]; + String[methodName] = function(arg1) { + return method.apply(arg1, Array.prototype.slice.call(arguments, 1)); + }; + }; + + for (i = 0; i < methodCount; i++) { + assignStringGeneric(methods[i]); + } +}()); +</pre> + +<h2 id="String_instances"><code>String</code> instances</h2> + +<h3 id="Properties_2">Properties</h3> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/prototype', 'Properties')}}</div> + +<h3 id="Methods_2">Methods</h3> + +<h4 id="Methods_unrelated_to_HTML">Methods unrelated to HTML</h4> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/prototype', 'Methods_unrelated_to_HTML')}}</div> + +<h4 id="HTML_wrapper_methods">HTML wrapper methods</h4> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/prototype', 'HTML_wrapper_methods')}}</div> + +<h2 id="Examples">Examples</h2> + +<h3 id="String_conversion">String conversion</h3> + +<p>It's possible to use <code>String</code> as a "safer" {{jsxref("String.prototype.toString()", "toString()")}} alternative, as although it still normally calls the underlying <code>toString()</code>, it also works for {{jsxref("null")}}, {{jsxref("undefined")}}, and for {{jsxref("Symbol", "symbols")}}. For example:</p> + +<pre class="brush: js">var outputStrings = []; +for (var i = 0, n = inputValues.length; i < n; ++i) { + outputStrings.push(String(inputValues[i])); +} +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.5', 'String')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-string-objects', 'String')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string-objects', 'String')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome("1")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>\u{XXXXXX}</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("40")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>\u{XXXXXX}</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("40")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("DOMString")}}</li> + <li><a href="/en-US/Add-ons/Code_snippets/StringView"><code>StringView</code> — a C-like representation of strings based on typed arrays</a></li> + <li><a href="/en-US/docs/Web/API/DOMString/Binary">Binary strings</a></li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/string/indexof/index.html b/files/it/web/javascript/reference/global_objects/string/indexof/index.html new file mode 100644 index 0000000000..e8653cac62 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/string/indexof/index.html @@ -0,0 +1,151 @@ +--- +title: String.prototype.indexOf() +slug: Web/JavaScript/Reference/Global_Objects/String/indexOf +translation_of: Web/JavaScript/Reference/Global_Objects/String/indexOf +--- +<div>{{JSRef}}</div> + +<p>Il metodo <strong><code>indexOf()</code></strong> restituisce l'indice all'interno dell'oggetto {{jsxref("String")}} chiamante della prima occorrenza del valore specificato, avviando la ricerca su <code>fromIndex</code>. Restituisce -1 se il valore non viene trovato.</p> + +<div>{{EmbedInteractiveExample("pages/js/string-indexof.html")}}</div> + + + +<div class="note"><strong>Note:</strong> Per il metodo dell'Array, vedere {{jsxref("Array.prototype.indexOf()")}}.</div> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><var>str</var>.indexOf(<var>searchValue</var>[, <var>fromIndex</var>])</pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt><var>searchValue</var></dt> + <dd>Una stringa che rappresenta il valore da cercare. Se non viene fornita esplicitamente alcuna stringa, <a href="https://tc39.github.io/ecma262/#sec-tostring"><var>searchValue</var> sarà forzato a <code>"undefined"</code></a> e questo valore verrà cercato nella stringa corrente.</dd> + <dt><var>fromIndex</var> {{optional_inline}}</dt> + <dd>Un numero intero che rappresenta l'indice al quale avviare la ricerca; il valore predefinito è <code>0</code>. Per valori <code>fromIndex</code> values inferiori a <code>0</code> o maggiori di <code>str.length</code>, la ricerca inizia rispettivamente con <code>0</code> e <code>str.length</code>.</dd> +</dl> + +<h3 id="Valore_di_ritorno">Valore di ritorno</h3> + +<p>L'indice della prima occorrenza di <em>searchValue</em> o <strong>-1</strong> se non trovato.<br> + Una stringa vuota <em>searchValue</em> corrisponderà a qualsiasi indice tra <code>0</code> e <code>str.length</code>.</p> + +<h2 id="Descrizione">Descrizione</h2> + +<p>I caratteri in una stringa sono indicizzati da sinistra a destra. L'indice del primo carattere è 0 e l'indice dell'ultimo carattere di una stringa chiamata <code>stringName</code> è <code>stringName.length - 1</code>.</p> + +<pre class="brush: js">'Blue Whale'.indexOf('Blue'); // ritorna 0 +'Blue Whale'.indexOf('Blute'); // ritorna -1 +'Blue Whale'.indexOf('Whale', 0); // ritorna 5 +'Blue Whale'.indexOf('Whale', 5); // ritorna 5 +'Blue Whale'.indexOf('Whale', 7); // ritorna -1 +'Blue Whale'.indexOf(''); // ritorna 0 +'Blue Whale'.indexOf('', 9); // ritorna 9 +'Blue Whale'.indexOf('', 10); // ritorna 10 +'Blue Whale'.indexOf('', 11); // ritorna 10 +</pre> + +<p>Il metodo <code>indexOf()</code> è case sensitive. Ad esempio, la seguente espressione restituisce -1:</p> + +<pre class="brush: js">'Blue Whale'.indexOf('blue'); // ritorna -1 +</pre> + +<h3 id="Controllo_delle_occorrenze">Controllo delle occorrenze</h3> + +<p>Nota che '0' non valuta <code>true</code> e '-1' non valuta <code>false</code>. Pertanto, quando si verifica se esiste una stringa specifica all'interno di un'altra stringa, il modo corretto per verificare sarebbe:</p> + +<pre class="brush: js">'Blue Whale'.indexOf('Blue') !== -1; // true +'Blue Whale'.indexOf('Bloe') !== -1; // false +</pre> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Usare_indexOf()">Usare <code>indexOf()</code></h3> + +<p>Nell'esempio seguente viene utilizzato <code>indexOf()</code> per individuare i valori nella stringa <code>"Brave new world"</code>.</p> + +<pre class="brush: js">const str = 'Brave new world'; + +console.log('L'indice della prima w dall'inizio è ' + str.indexOf('w')); // logga 8 +console.log('L'indice di "new" dall'inizio è ' + str.indexOf('new')); // logga 6 +</pre> + +<h3 id="indexOf()_e_il_case-sensitivity"><code>indexOf()</code> e il case-sensitivity</h3> + +<p>L'esempio seguente definisce due variabili stringa. Le variabili contengono la stessa stringa tranne che la seconda stringa contiene lettere maiuscole. Il primo metodo {{domxref("console.log()")}} mostra 19. Ma poiché il metodo <code>indexOf()</code> è case sensitive, la stringa <code>"cheddar"</code> non si trova in <code>myCapString</code>, quindi il secondo metodo <code>console.log()</code> mostra -1.</p> + +<pre class="brush: js">const myString = 'brie, pepper jack, cheddar'; +const myCapString = 'Brie, Pepper Jack, Cheddar'; + +console.log('myString.indexOf("cheddar") è ' + myString.indexOf('cheddar')); +// logs 19 +console.log('myCapString.indexOf("cheddar") è ' + myCapString.indexOf('cheddar')); +// logs -1 +</pre> + +<h3 id="Uso_di_indexOf()_per_contare_le_occorrenze_di_una_lettera_in_una_stringa">Uso di <code>indexOf()</code> per contare le occorrenze di una lettera in una stringa</h3> + +<p>L'esempio seguente imposta <code>count</code> sul numero di occorrenze della lettera <code>e</code> nella stringa <code>str</code>:</p> + +<pre class="brush: js">const str = 'Essere o non essere, questa è la domanda.'; +let count = 0; +let position = str.indexOf('e'); + +while (position !== -1) { + count++; + position = str.indexOf('e', position + 1); +} + +console.log(count); // mostra 4 +</pre> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definizione iniziale.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.5.4.7', 'String.prototype.indexOf')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-string.prototype.indexof', 'String.prototype.indexOf')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.indexof', 'String.prototype.indexOf')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + + + +<p>{{Compat("javascript.builtins.String.indexOf")}}</p> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>{{jsxref("String.prototype.charAt()")}}</li> + <li>{{jsxref("String.prototype.lastIndexOf()")}}</li> + <li>{{jsxref("String.prototype.includes()")}}</li> + <li>{{jsxref("String.prototype.split()")}}</li> + <li>{{jsxref("Array.prototype.indexOf()")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/string/length/index.html b/files/it/web/javascript/reference/global_objects/string/length/index.html new file mode 100644 index 0000000000..e575b777b8 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/string/length/index.html @@ -0,0 +1,90 @@ +--- +title: string.length +slug: Web/JavaScript/Reference/Global_Objects/String/length +translation_of: Web/JavaScript/Reference/Global_Objects/String/length +--- +<div>{{JSRef}}</div> + +<p>La proprietà <strong><code>length</code></strong> di un oggetto {{jsxref("String")}} indica la lunghezza di una stringa, in unità di codice UTF-16<span class="seoSummary">.</span></p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><code><var>str</var>.length</code></pre> + +<h2 id="Descrizione">Descrizione</h2> + +<p>Questa proprietà restituisce il numero di unità di codice nella stringa. {{interwiki("wikipedia", "UTF-16")}}, il formato di stringa utilizzato da JavaScript, utilizza una singola unità di codice a 16 bit per rappresentare i caratteri più comuni, ma deve utilizzare due unità di codice per meno comunemente- caratteri usati, quindi è possibile che il valore restituito dalla <code>length</code> “lunghezza“ non corrisponda al numero effettivo di caratteri nella stringa.</p> + +<p>ECMASCript 2016 (ed. 7) ha stabilito una lunghezza massima di <code>2^53 - 1</code> elementi. In precedenza, non è stata specificata una lunghezza massima.. </p> + +<p>Per una stringa vuota, <code>length</code> è 0.</p> + +<p>La proprietà statica <code>String.length</code> restituisce il valore 1.</p> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Basic_usage">Basic usage</h3> + +<pre class="brush: js">var x = 'Mozilla'; +var empty = ''; + +console.log('Mozilla is ' + x.length + ' code units long'); +/* "Mozilla è lungo 7 unità di codice" */ + +console.log('La stringa vuota ha una lunghezza di + ' + empty.length); +/* "La stringa vuota ha una lunghezza di 0" */</pre> + +<h3 id="Assegnazione_a_length">Assegnazione a length</h3> + +<pre class="brush: js">var myString = "bluebells"; + +// Il tentativo di assegnare un valore alla proprietà .length di una stringa non ha alcun effetto osservabile. +myString.length = 4; +console.log(myString); +/* "bluebells" */ +</pre> + +<h2 id="Specificazioni">Specificazioni</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specificazioni</th> + <th scope="col">Stato</th> + <th scope="col">Commenti</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definizione iniziale Implementato in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.5.5.1', 'String.prototype.length')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-properties-of-string-instances-length', 'String.prototype.length')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-properties-of-string-instances-length', 'String.prototype.length')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibili">Browser compatibili</h2> + +<p class="hidden">La tabella di compatibilità in questa pagina è generata da dati strutturati. Se desideri contribuire ai dati, consulta <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e inviaci una richiesta di pull</p> + +<p>{{Compat("javascript.builtins.String.length")}}</p> + +<h2 id="Guarda_anche">Guarda anche</h2> + +<ul> + <li><a href="http://developer.teradata.com/blog/jasonstrimpel/2011/11/javascript-string-length-and-internationalizing-web-applications">JavaScript <code>String.length</code> and Internationalizing Web Applications</a></li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/string/prototype/index.html b/files/it/web/javascript/reference/global_objects/string/prototype/index.html new file mode 100644 index 0000000000..b13374a9a0 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/string/prototype/index.html @@ -0,0 +1,178 @@ +--- +title: String.prototype +slug: Web/JavaScript/Reference/Global_Objects/String/prototype +translation_of: Web/JavaScript/Reference/Global_Objects/String +--- +<div>{{JSRef}}</div> + +<p>La proprietà <strong><code>String.prototype</code></strong>rappresenta l'oggetto prototipo {{jsxref("String")}}.</p> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="Description">Description</h2> + +<p>Tutte le istanze {{jsxref("String")}} ereditano da <code>String.prototype</code> . Le modifiche all'oggetto prototipo <code>String</code> vengono propagate a tutte le istanze {{jsxref("String")}}.</p> + +<h2 id="Properties">Properties</h2> + +<dl> + <dt><code>String.prototype.constructor</code></dt> + <dd>Specifica la funzione che crea il prototipo di un oggetto.</dd> + <dt>{{jsxref("String.prototype.length")}}</dt> + <dd>Riflette la lunghezza della stringa.</dd> + <dt><code><em>N</em></code></dt> + <dd>Utilizzato per accedere al carattere in <em>N</em> posizione in cui <em>N</em> è un numero intero positivo compreso tra 0 e uno inferiore al valore della {{jsxref("String.length", "length")}}. Queste proprietà sono di sola lettura.</dd> +</dl> + +<h2 id="Metodi">Metodi</h2> + +<h3 id="Metodi_non_correlati_HTML">Metodi non correlati HTML</h3> + +<dl> + <dt>{{jsxref("String.prototype.charAt()")}}</dt> + <dd>Restituisce il carattere (esattamente un'unità di codice UTF-16) all'indice specificato</dd> + <dt>{{jsxref("String.prototype.charCodeAt()")}}</dt> + <dd>Restituisce un numero che corrisponde al valore dell'unità di codice UTF-16 nell'indice specificato.</dd> + <dt>{{jsxref("String.prototype.codePointAt()")}}</dt> + <dd>Restituisce un numero intero non negativo <strong>Numero</strong> che è il valore del punto di codice codificato UTF-16 che inizia con l'indice specificato.</dd> + <dt>{{jsxref("String.prototype.concat()")}}</dt> + <dd>Combina il testo di due stringhe e restituisce una nuova stringa.</dd> + <dt>{{jsxref("String.prototype.includes()")}}</dt> + <dd>Determina se una stringa può essere trovata all'interno di un'altra stringa.</dd> + <dt>{{jsxref("String.prototype.endsWith()")}}</dt> + <dd>Determina se una stringa termina con i caratteri di un'altra stringa.</dd> + <dt>{{jsxref("String.prototype.indexOf()")}}</dt> + <dd>Restituisce l'indice all'interno dell'oggetto {{jsxref("String")}} chiamante della prima occorrenza del valore specificato o -1 se non trovato.</dd> + <dt>{{jsxref("String.prototype.lastIndexOf()")}}</dt> + <dd>Restituisce l'indice all'interno dell'oggetto {{jsxref("String")}} chiamante della prima occorrenza del valore specificato o -1 se non trovato.</dd> + <dt>{{jsxref("String.prototype.localeCompare()")}}</dt> + <dd>Restituisce un numero che indica se una stringa di riferimento viene prima o dopo o è uguale alla stringa specificata in ordine di ordinamento.</dd> + <dt>{{jsxref("String.prototype.match()")}}</dt> + <dd>Utilizzato per abbinare un'espressione regolare a una stringa.</dd> + <dt>{{jsxref("String.prototype.normalize()")}}</dt> + <dd>Restituisce il modulo di normalizzazione Unicode del valore della stringa chiamante.</dd> + <dt>{{jsxref("String.prototype.padEnd()")}}</dt> + <dd>Riempie la stringa corrente dalla fine con una determinata stringa per creare una nuova stringa di una determinata lunghezza.</dd> + <dt>{{jsxref("String.prototype.padStart()")}}</dt> + <dd>Riempie la stringa corrente dall'inizio con una determinata stringa per creare una nuova stringa da una determinata lunghezza.</dd> + <dt><s class="obsoleteElement">{{jsxref("String.prototype.quote()")}} {{obsolete_inline}}</s></dt> + <dd><s class="obsoleteElement">Avvolge la stringa tra virgolette ("<code>"</code>").</s></dd> + <dt>{{jsxref("String.prototype.repeat()")}}</dt> + <dd>Restituisce una stringa composta da elementi dell'oggetto ripetuti i tempi indicati.</dd> + <dt>{{jsxref("String.prototype.replace()")}}</dt> + <dd>Utilizzato per trovare una corrispondenza tra un'espressione regolare e una stringa e per sostituire la sottostringa con corrispondenza con una nuova sottostringa.</dd> + <dt>{{jsxref("String.prototype.search()")}}</dt> + <dd>Esegue la ricerca di una corrispondenza tra un'espressione regolare e una stringa specificata.</dd> + <dt>{{jsxref("String.prototype.slice()")}}</dt> + <dd>Estrae una sezione di una stringa e restituisce una nuova stringa.</dd> + <dt>{{jsxref("String.prototype.split()")}}</dt> + <dd>Divide un oggetto {{jsxref("Global_Objects/String", "String")}} in una matrice di stringhe separando la stringa in sottostringhe.</dd> + <dt>{{jsxref("String.prototype.startsWith()")}}</dt> + <dd>Determina se una stringa inizia con i caratteri di un'altra stringa.</dd> + <dt>{{jsxref("String.prototype.substr()")}} {{deprecated_inline}}</dt> + <dd>Restituisce i caratteri in una stringa che inizia nella posizione specificata attraverso il numero specificato di caratteri.</dd> + <dt>{{jsxref("String.prototype.substring()")}}</dt> + <dd>Restituisce i caratteri in una stringa tra due indici nella stringa.</dd> + <dt>{{jsxref("String.prototype.toLocaleLowerCase()")}}</dt> + <dd>I caratteri all'interno di una stringa vengono convertiti in minuscolo rispettando le impostazioni locali correnti. Per la maggior parte delle lingue, questo restituirà lo stesso di {{jsxref("String.prototype.toLowerCase()", "toLowerCase()")}}.</dd> + <dt>{{jsxref("String.prototype.toLocaleUpperCase()")}}</dt> + <dd>I caratteri all'interno di una stringa vengono convertiti in maiuscolo rispettando le impostazioni locali correnti. Per la maggior parte delle lingue, ciò restituirà lo stesso di {{jsxref("String.prototype.toUpperCase()", "toUpperCase()")}}.</dd> + <dt>{{jsxref("String.prototype.toLowerCase()")}}</dt> + <dd>Restituisce il valore della stringa chiamante convertito in minuscolo.</dd> + <dt>{{jsxref("String.prototype.toSource()")}} {{non-standard_inline}}</dt> + <dd>Restituisce un oggetto letterale che rappresenta l'oggetto specificato; puoi usare questo valore per creare un nuovo oggetto. Sostituisce il metodo {{jsxref("Object.prototype.toSource()")}} method.</dd> + <dt>{{jsxref("String.prototype.toString()")}}</dt> + <dd>Restituisce una stringa che rappresenta l'oggetto specificato. Sostituisce il metodo {{jsxref("Object.prototype.toString()")}} .</dd> + <dt>{{jsxref("String.prototype.toUpperCase()")}}</dt> + <dd>Restituisce il valore della stringa chiamante convertito in maiuscolo.</dd> + <dt>{{jsxref("String.prototype.trim()")}}</dt> + <dd>Taglia gli spazi bianchi all'inizio e alla fine della stringa. Parte dello standard ECMAScript 5.</dd> + <dt>{{jsxref("String.prototype.trimStart()")}}<br> + {{jsxref("String.prototype.trimLeft()")}}</dt> + <dd>Taglia gli spazi bianchi dall'inizio della stringa.</dd> + <dt>{{jsxref("String.prototype.trimEnd()")}}<br> + {{jsxref("String.prototype.trimRight()")}}</dt> + <dd>Taglia gli spazi bianchi dalla fine della stringa.</dd> + <dt>{{jsxref("String.prototype.valueOf()")}}</dt> + <dd>Restituisce il valore primitivo dell'oggetto specificato. Sostituisce il metodo {{jsxref("Object.prototype.valueOf()")}}.</dd> + <dt>{{jsxref("String.prototype.@@iterator()", "String.prototype[@@iterator]()")}}</dt> + <dd>Restituisce un nuovo oggetto <code>Iterator</code> che itera sopra i punti di codice di un valore String, restituendo ogni punto di codice come valore String.</dd> +</dl> + +<h3 id="HTML_metodi_wrapper_(involucro)">HTML metodi wrapper (involucro)</h3> + +<p>Questi metodi sono di uso limitato, in quanto forniscono solo un sottoinsieme dei tag e degli attributi HTML disponibili.</p> + +<dl> + <dt>{{jsxref("String.prototype.anchor()")}} {{deprecated_inline}}</dt> + <dd>{{htmlattrxref("name", "a", "<a name=\"name\">")}} (hypertext target)</dd> + <dt>{{jsxref("String.prototype.big()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("big")}}</dd> + <dt>{{jsxref("String.prototype.blink()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("blink")}}</dd> + <dt>{{jsxref("String.prototype.bold()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("b")}}</dd> + <dt>{{jsxref("String.prototype.fixed()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("tt")}}</dd> + <dt>{{jsxref("String.prototype.fontcolor()")}} {{deprecated_inline}}</dt> + <dd>{{htmlattrxref("color", "font", "<font color=\"color\">")}}</dd> + <dt>{{jsxref("String.prototype.fontsize()")}} {{deprecated_inline}}</dt> + <dd>{{htmlattrxref("size", "font", "<font size=\"size\">")}}</dd> + <dt>{{jsxref("String.prototype.italics()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("i")}}</dd> + <dt>{{jsxref("String.prototype.link()")}} {{deprecated_inline}}</dt> + <dd>{{htmlattrxref("href", "a", "<a href=\"url\">")}} (link to URL)</dd> + <dt>{{jsxref("String.prototype.small()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("small")}}</dd> + <dt>{{jsxref("String.prototype.strike()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("strike")}}</dd> + <dt>{{jsxref("String.prototype.sub()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("sub")}}</dd> + <dt>{{jsxref("String.prototype.sup()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("sup")}}</dd> +</dl> + +<h2 id="Specificazioni">Specificazioni</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specificazioni</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definizione iniziale.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.5.3.1', 'String.prototype')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-string.prototype', 'String.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype', 'String.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_il_browser">Compatibilità con il browser</h2> + +<p class="hidden"> tabella di compatibilità in questa pagina è generata da dati strutturati. Se desideri contribuire ai dati, consulta <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e inviaci una richiesta di pull.</p> + +<p>{{Compat("javascript.builtins.String.prototype")}}</p> + +<h2 id="Guarda_anche">Guarda anche</h2> + +<ul> + <li>{{jsxref("String")}}</li> + <li>{{jsxref("Function.prototype")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/string/raw/index.html b/files/it/web/javascript/reference/global_objects/string/raw/index.html new file mode 100644 index 0000000000..2d070b15cb --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/string/raw/index.html @@ -0,0 +1,108 @@ +--- +title: String.raw() +slug: Web/JavaScript/Reference/Global_Objects/String/raw +translation_of: Web/JavaScript/Reference/Global_Objects/String/raw +--- +<div>{{JSRef}}</div> + +<p>Il metodo statico <strong><code>String.raw()</code></strong> è una funzione di tag del modello <a href="/en-US/docs/Web/JavaScript/Reference/template_strings">template string</a>, simile al prefisso <code>r</code> in Python o al prefisso <code>@</code> in C# per i valori letterali stringa (tuttavia c'è una differenza: vedere le spiegazioni in <a href="https://bugs.chromium.org/p/v8/issues/detail?id=5016" rel="noopener">questo numero</a> ). È usato per ottenere la stringa di stringhe di template non formattata, cioè le sostituzioni (ad esempio <font face="consolas, Liberation Mono, courier, monospace">${foo}</font>) vengono elaborate, ma gli escape (ad esempio <code>\n</code> ) non lo sono.</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><code>String.raw(<var>callSite</var>, <var>...substitutions</var>) +String.raw`templateString` +</code></pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt><code>callSite</code></dt> + <dd>Oggetto del sito di chiamata template ben formato, come <code>{ raw: ['foo', 'bar', 'baz'] }</code>.</dd> + <dt><code>...substitutions</code></dt> + <dd>Contiene valori di sostituzione.</dd> + <dt><code>templateString</code></dt> + <dd>A <a href="/en-US/docs/Web/JavaScript/Reference/template_strings">template string</a>, puoi sostituirlo opzionalmente (<code>${...}</code>).</dd> +</dl> + +<h3 id="Valore_resituto">Valore resituto</h3> + +<p>Restituisce una stringa non elaborata di un determinato Template String.</p> + +<h3 id="Eccezioni">Eccezioni</h3> + +<dl> + <dt>{{jsxref("TypeError")}}</dt> + <dd>Un oggetto {{jsxref("TypeError")}} viene generato se il primo argomento non è un oggetto formato.</dd> +</dl> + +<h2 id="Descrizione">Descrizione</h2> + +<p>Nella maggior parte dei casi, <code>String.raw()</code> viene utilizzato con template strings. La prima sintassi menzionata sopra è usata solo di rado, perché il motore JavaScript la chiamerà con argomenti appropriati, proprio come con altre <a href="/en-US/docs/Web/JavaScript/Reference/template_strings#Tagged_template_literals">funzioni tag</a> .</p> + +<p><code>String.raw()</code> è l'unica funzione di built-in tag incorporata nei template strings; funziona proprio come la funzione predefinita del modello ed esegue la concatenazione. Puoi anche ri-implementarlo con il normale codice JavaScript.</p> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Utilizzo_di_String.raw()">Utilizzo di <code>String.raw()</code></h3> + +<pre class="brush: js">String.raw`Ciao\n${2+3}!`; +// 'Ciao\n5!', Il carattere dopo 'Ciao' non è un carattere di nuova riga, +// '\' e 'n' sono due caratteri. + +String.raw`Hi\u000A!`; +// 'Ciao\u000A!', Lo stesso qui, questa volta avremo il +// \, u, 0, 0, 0, A, 6 caratteri. +// Tutti i tipi di caratteri di escape saranno inefficaci +// e backslash saranno presenti nella stringa di output +// Puoi confermare questo controllando la proprietà .length +// della stringa. + +<code>let</code> name = 'Bob'; +String.raw`Ciao\n${name}!`; +// 'Ciao\nBob!', le sostituzioni vengono elaborate. + +// Normalmente non si chiama String.raw() come una funzione, +// ma la si chiama per simulare <code>`t${0}e${1}s${2}t` </code>puoi fare: +<code>String.raw({ raw: 'test' }, 0, 1, 2); // 't0e1s2t'</code> +// Nota che la stringa 'test', è un oggetto simile ad un array +// Il seguente è equivalente a +<code>// `foo${2 + 3}bar${'Java' + 'Script'}baz` +String.raw({ + raw: ['foo', 'bar', 'baz'] +}, 2 + 3, 'Java' + 'Script'); // 'foo5barJavaScriptbaz'</code></pre> + +<h2 id="Specificazioni">Specificazioni</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specificazioni</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-string.raw', 'String.raw')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Definizione iniziale.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.raw', 'String.raw')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_il_browser">Compatibilità con il browser</h2> + +<p class="hidden">La tabella di compatibilità in questa pagina è generata da dati strutturati. Se desideri contribuire ai dati, consulta <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e inviaci una richiesta di pull.</p> + +<p>{{Compat("javascript.builtins.String.raw")}}</p> + +<h2 id="Guarda_anche">Guarda anche</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/template_strings">Template strings</a></li> + <li>{{jsxref("String")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar">Lexical grammar</a></li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/symbol/index.html b/files/it/web/javascript/reference/global_objects/symbol/index.html new file mode 100644 index 0000000000..5445a96009 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/symbol/index.html @@ -0,0 +1,230 @@ +--- +title: Symbol +slug: Web/JavaScript/Reference/Global_Objects/Symbol +tags: + - ECMAScript 2015 + - ECMAScript6 + - JavaScript + - Symbol +translation_of: Web/JavaScript/Reference/Global_Objects/Symbol +--- +<div>{{JSRef}}</div> + +<p>La funzione <code>Symbol()</code> restituisce un valore di tipo <strong>symbol</strong>, dispone di proprietà statiche che espongono diversi membri di oggetti built-in, ha metodi statici che espongono il registro globale dei symbol, ed assomiglia all'oggetto built-in class, ma non dispone di un costruttore e non supporta la sintassi "<code>new Symbol()</code>". </p> + +<p>Ogni valore symbol restituito da <code>Symbol()</code> è unico. Un valore symbol può essere utilizzato come identificatore per proprietà di un oggetto; questo è lo scopo di tale tipo di dati. Ulteriori spiegazioni circa il loro scopo ed uso può essere trovato nella pagina: <a href="/en-US/docs/Glossary/Symbol">glossary entry for Symbol</a>.</p> + +<p>Il tipo di dati <strong>symbol</strong> è un {{Glossary("Primitive", "primitive data type")}}.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">Symbol(<em>[description]</em>)</pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt><code>description</code> {{optional_inline}}</dt> + <dd>Opzionale, string. Una descrizione del symbol che può essere usata per il debug ma non per accedere al symbol stesso.</dd> +</dl> + +<h2 id="Descrizione">Descrizione</h2> + +<p>Per creare un nuovo primitive symbol, scrivere<code>Symbol()</code> con una stringa opzionale di descrizione:</p> + +<pre class="brush: js">var sym1 = Symbol(); +var sym2 = Symbol('foo'); +var sym3 = Symbol('foo'); +</pre> + +<p>Il codice sopra crea tre nuovi symbol. Notare che <code>Symbol("foo")</code> non costringe la stringa "foo" in un symbol. Esso crea un nuovo symbol ogni volta:</p> + +<pre class="brush: js">Symbol('foo') === Symbol('foo'); // false</pre> + +<p>La sintassi seguente con l'operatore {{jsxref("Operators/new", "new")}} genererà un {{jsxref("TypeError")}}:</p> + +<pre class="brush: js">var sym = new Symbol(); // TypeError</pre> + +<p>Questo previene gli autori dal creare un esplicito oggetto wrapper <code>Symbol</code> invece di un nuovo valore symbol e la cosa può sorprendere in quanto creare un oggetto wrapper esplicito attorno ad un tipo di dati primitivo è generalmente possibile (ad esempio, <code>new Boolean</code>, <code>new String</code> e <code>new Number</code>).</p> + +<p>Se veramente si vuole creare un oggetto wrapper <code>Symbol</code> si può usare la funzione <code>Object()</code>:</p> + +<pre class="brush: js">var sym = Symbol('foo'); +typeof sym; // "symbol" +var symObj = Object(sym); +typeof symObj; // "object" +</pre> + +<h3 id="Symbols_condivisi_nel_registro_globale_dei_symbol">Symbols condivisi nel registro globale dei symbol</h3> + +<p>La sintassi vista sopra che utilizza la funzione <code>Symbol()</code> non crea un symbol globale che sarà disponibile nell'intero codebase. Per creare dei symbol disponibili attraverso diversi files ed anche attraverso diversi realms (ognuno dei quali ha il proprio global scope), usare i metodi {{jsxref("Symbol.for()")}} e {{jsxref("Symbol.keyFor()")}} per impostare e leggere i symbol dal registro globale.</p> + +<h3 id="Cercare_le_proprietà_symbol_negli_oggetti">Cercare le proprietà symbol negli oggetti</h3> + +<p>Il metodo {{jsxref("Object.getOwnPropertySymbols()")}} restituisce un array di symbol e permette di trovare le proprietà symbol di un oggetto. Notare che ogni oggetto è inizializzato senza alcuna proprietà symbol, per cui l'array restituito sarà vuoto a meno che una proprietà symbol non sia stata creata sull'oggetto.</p> + +<h2 id="Proprietà">Proprietà</h2> + +<dl> + <dt><code>Symbol.length</code></dt> + <dd>Proprietà "lunghezza", il cui valore è 0.</dd> + <dt>{{jsxref("Symbol.prototype")}}</dt> + <dd>Rappresenta il prototype del costruttore <code>Symbol</code>.</dd> +</dl> + +<h3 id="Symbols_ben_noti">Symbols ben noti</h3> + +<p>In aggiunta ai symbol definiti da voi, JavaScript dispone di alcuni symbol built-in che rappresentano alcuni comportamenti interni del linguaggio che non sono esposti agli sviluppatori in ECMAScript5 e precedenti. A tali symbol si può accedere tramite le seguenti proprietà:</p> + +<h4 id="Symbols_di_iterazione">Symbols di iterazione</h4> + +<dl> + <dt>{{jsxref("Symbol.iterator")}}</dt> + <dd>Un metodo che restituisce l'iteratore di default per un oggetto. Usato da <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of"><code>for...of</code></a>.</dd> + <dt>{{jsxref("Symbol.asyncIterator")}} {{experimental_inline}}</dt> + <dd>Un metodo che restituisce l'iteratore asincrono di default per un oggetto. Usato da <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for-await-of"><code>for await of</code></a>.</dd> +</dl> + +<h4 id="Symbols_per_le_espressioni_regolari">Symbols per le espressioni regolari</h4> + +<dl> + <dt>{{jsxref("Symbol.match")}}</dt> + <dd>Un metodo che effettua la corrispondenza su una stringa, usato anche per determinare se un oggetto può essere utilizzato come espressione regolare. Usato da {{jsxref("String.prototype.match()")}}.</dd> + <dt>{{jsxref("Symbol.replace")}}</dt> + <dd>Un metodo che sostituisce le sottostringhe di una stringa corrispondenti. Usato da {{jsxref("String.prototype.replace()")}}.</dd> + <dt>{{jsxref("Symbol.search")}}</dt> + <dd>Un metodo che restituisce l'indice all'interno di una stringa che corrisponde all'espressione regolare. Usato da {{jsxref("String.prototype.search()")}}.</dd> + <dt>{{jsxref("Symbol.split")}}</dt> + <dd>Un metodo che divide una stringa all'indice corrispondente ad una espressione regolare. Usato da {{jsxref("String.prototype.split()")}}.</dd> +</dl> + +<h4 id="Altri_symbols">Altri symbols</h4> + +<dl> + <dt>{{jsxref("Symbol.hasInstance")}}</dt> + <dd>Un metodo che determina se un oggetto costruttore riconosce un oggetto come propria istanza. Usato da {{jsxref("Operators/instanceof", "instanceof")}}.</dd> + <dt>{{jsxref("Symbol.isConcatSpreadable")}}</dt> + <dd>Un valore booleano indicante se un oggetto deve essere appiattito ai soui elementi array. Usato da {{jsxref("Array.prototype.concat()")}}.</dd> + <dt>{{jsxref("Symbol.unscopables")}}</dt> + <dd>An object value of whose own and inherited property names are excluded from the <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/with">with</a></code> environment bindings of the associated object.</dd> + <dt>{{jsxref("Symbol.species")}}</dt> + <dd>Una funzione costruttore utilizzata per creare oggetti derivati.</dd> + <dt>{{jsxref("Symbol.toPrimitive")}}</dt> + <dd>Un metodo che converte un oggetto in un valore primitivo.</dd> + <dt>{{jsxref("Symbol.toStringTag")}}</dt> + <dd>Una stringa usata per la descizione di default di un oggetto. Usato da {{jsxref("Object.prototype.toString()")}}.</dd> +</dl> + +<h2 id="Metodi">Metodi</h2> + +<dl> + <dt>{{jsxref("Symbol.for()", "Symbol.for(key)")}}</dt> + <dd>Cerca la "key" fornita tra i symbol esistenti e la restituisce nel caso in cui venga trovata. In caso contrario un nuovo symbol viene creato nel registro globale dei symbol con la "key" indicata.</dd> + <dt>{{jsxref("Symbol.keyFor", "Symbol.keyFor(sym)")}}</dt> + <dd>Trova una chiave symbol condivisa dal registro globale dei symbol per il symbol fornito.</dd> +</dl> + +<h2 id="Symbol_prototype"><code>Symbol</code> prototype</h2> + +<p>Tutti i simboli ereditano da {{jsxref("Symbol.prototype")}}.</p> + +<h3 id="Proprietà_2">Proprietà</h3> + +<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/Symbol/prototype','Properties')}}</p> + +<h3 id="Metodi_2">Metodi</h3> + +<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/Symbol/prototype','Methods')}}</p> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Using_the_typeof_operator_with_symbols">Using the <code>typeof</code> operator with symbols</h3> + +<p>L'operatore {{jsxref("Operators/typeof", "typeof")}} può aiutare ad identificare i symbol.</p> + +<pre class="brush: js">typeof Symbol() === 'symbol' +typeof Symbol('foo') === 'symbol' +typeof Symbol.iterator === 'symbol' +</pre> + +<h3 id="Conversioni_di_tipo_dei_symbol">Conversioni di tipo dei symbol</h3> + +<p>Alcune cose da notare quando si lavora con le conversioni di tipo dei symbol.</p> + +<ul> + <li>Quando si prova a convertire un symbol in un numero, un {{jsxref("TypeError")}} verrà generato<br> + (e.g. <code>+sym</code> or <code>sym | 0</code>).</li> + <li>Quando si usa l'uguaglianza non stretta, <code>Object(sym) == sym</code> restituisce <code>true.</code></li> + <li><code>Symbol("foo") + "bar"</code> lancia un {{jsxref("TypeError")}} (non si può convertire un symbol in stringa). Questo previene, ad esempio, la creazione silenziosa di un nuovo nome di proprietà stringa da un symbol.</li> + <li>La <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#String_conversion">"safer" <code>String(sym)</code> conversion</a> funziona come una chiamata a {{jsxref("Symbol.prototype.toString()")}} con symbol, ma notare che <code>new String(sym)</code> genererà un errore.</li> +</ul> + +<h3 id="Symbols_ed_iterazione_for...in">Symbols ed iterazione <code>for...in</code></h3> + +<p>I symbol non sono enumerabili in un'iterazione <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in"><code>for...in</code></a>. In aggiunta, {{jsxref("Object.getOwnPropertyNames()")}} non restituirà le proprietà symbol dell'oggetto, tuttavia, si puù usare {{jsxref("Object.getOwnPropertySymbols()")}} per ottenerle.</p> + +<pre class="brush: js">var obj = {}; + +obj[Symbol('a')] = 'a'; +obj[Symbol.for('b')] = 'b'; +obj['c'] = 'c'; +obj.d = 'd'; + +for (var i in obj) { + console.log(i); // logs "c" and "d" +}</pre> + +<h3 id="Symbols_e_JSON.stringify()">Symbols e <code>JSON.stringify()</code></h3> + +<p>Le proprietà le cui chiavi sono symbol vengono completamente ignorate da <code>JSON.stringify()</code>:</p> + +<pre class="brush: js">JSON.stringify({[Symbol('foo')]: 'foo'}); +// '{}'</pre> + +<p>Per ulteriori dettagli, vedere {{jsxref("JSON.stringify()")}}.</p> + +<h3 id="Symbol_wrapper_objects_come_chiavi_per_le_proprietà">Symbol wrapper objects come chiavi per le proprietà</h3> + +<p>Quando un oggetto wrapper symbol viene usato come chiave di una proprietà, tale oggetto verrà costretto al suo wrapped symbol:</p> + +<pre class="brush: js">var sym = Symbol('foo'); +var obj = {[sym]: 1}; +obj[sym]; // 1 +obj[Object(sym)]; // still 1 +</pre> + +<h2 id="Specificazioni">Specificazioni</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specificazione</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-symbol-objects', 'Symbol')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-symbol-objects', 'Symbol')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.builtins.Symbol")}}</p> + +<h2 id="Vedere_anche">Vedere anche</h2> + +<ul> + <li><a href="/en-US/docs/Glossary/Symbol">Glossary: Symbol data type</a></li> + <li>{{jsxref("Operators/typeof", "typeof")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Data_structures">Data types and data structures</a></li> + <li><a href="https://hacks.mozilla.org/2015/06/es6-in-depth-symbols/">"ES6 In Depth: Symbols" on hacks.mozilla.org</a></li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/undefined/index.html b/files/it/web/javascript/reference/global_objects/undefined/index.html new file mode 100644 index 0000000000..d16ca712cf --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/undefined/index.html @@ -0,0 +1,173 @@ +--- +title: undefined +slug: Web/JavaScript/Reference/Global_Objects/undefined +translation_of: Web/JavaScript/Reference/Global_Objects/undefined +--- +<div> +<div> +<div>{{jsSidebar("Objects")}}</div> +</div> +</div> + +<h2 id="Summary" name="Summary">Sommario</h2> + +<p>La variabile globale <strong><code>undefined</code></strong> rappresenta il valore primitivo <span style="font-family: Consolas,Monaco,'Andale Mono',monospace;">{{Glossary("Undefined", "undefined")}}</span>. È uno dei {{Glossary("Primitive", "valori primitivi")}} di JavaScript.</p> + +<p>{{js_property_attributes(0,0,0)}}</p> + +<h2 id="Syntax" name="Syntax">Sintassi</h2> + +<pre class="syntaxbox"><code>undefined</code></pre> + +<h2 id="Description" name="Description">Descrizione</h2> + +<p><code>undefined</code> è una proprietà dell'<em>oggetto globale</em>, ossia una variablie nel contesto globale. Il valore iniziale di <code>undefined</code> è il valore primitivo <span style="font-family: Consolas,Monaco,'Andale Mono',monospace;">{{Glossary("Undefined", "undefined")}}</span>. </p> + +<p>Secondo la specifica ECMAScript5, <code>undefined</code> è accessibile in sola lettura (implementato in JavaScript 1.8.5 / Firefox 4).</p> + +<p>Una variabile alla quale non è ancora stato assegnato un valore è di tipo undefined. Un metodo o una dichiarazione restituisce <code>undefined</code> se la variabile che viene valutata non ha un valore assegnato. Una funzione restituisce <code>undefined</code> se non viene restituito un altro valore.</p> + +<p>Siccome <code>undefined</code> non è una {{jsxref("Reserved_Words", "parola riservata")}}, può essere usato come <a href="/en-US/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Variables">nome di una variabile</a> in qualsiasi contesto, eccetto quello globale.</p> + +<pre class="brush: js">// logs "foo string" +(function(){ var undefined = 'foo'; console.log(undefined, typeof undefined); })(); + +// logs "foo string" +(function(undefined){ console.log(undefined, typeof undefined); })('foo'); +</pre> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="undefined_e_l'uguaglianza_ristretta"><code>undefined</code> e l'uguaglianza ristretta</h3> + +<p>Puoi usare <code>undefined</code> e gli operatori "<em>strettamente uguale"</em> e "<em>strettamente diverso</em>" per determinare se ad una variabile è stato assegnato un valore. In questo codice, la variabile <code>x</code> non è definita, qundi l'istruzione <code>if</code> viene valutata vera.</p> + +<pre class="brush: js">var x; + +x === undefined; // true +</pre> + +<div class="note"><strong>Nota:</strong> Qui devono essere utilizzati gli operatori di uguaglianza stretta, perché <code>x == undefined</code> è vero anche se <code>x</code> è <code>null</code>, mentre confrontandoli con l'ugualianza stretta no. <code>null</code> e <code>undefined</code> non sono equivalenti. Vedi gli {{jsxref("Operators/Comparsion_Operators", "operatori di comparazione")}} per altri dettagli.</div> + +<h3 id="undefined_e_l'operatore_typeof"><code>undefined</code> e l'operatore <code>typeof</code></h3> + +<p>In alternativa può anche essere usato l'operatore <code>{{jsxref("Operators/typeof", "typeof")}}:</code></p> + +<pre class="brush: js">var x; + +typeof x === 'undefined'; // true +</pre> + +<p>Un motivo per cui usare l'operatore <code>{{jsxref("Operators/typeof", "typeof")}}</code> è che se la variabile non stata dichiarata non viene generato un errore.</p> + +<pre class="brush: js">// x non è ancora stata dichiarata + +typeof x === "undefined"; // viene valutata come vera, senza generare erroi + +x === undefined; // genera un ReferenceError +</pre> + +<p>Comunque questa tecnica dovrebbe essere evitata. JavaScript è un linguaggio staticamente contestualizzato, quindi si può sapere se una variabile è stata dichiarata in un contesto guardando in quelli che lo contengono. L'unica eccezione è il contesto globale, che è rappresentato dall'<em>oggetto globale</em>: quindi per sapere se esiste una variabile basta controllare se esiste una proprietà nell'<em>oggetto globale</em> (per esempio usando l'operatore {{jsxref("Operators/in", "in")}} o il metodo {{jsxref("Global_Objects/Object/hasOwnProperty", "hasOwnProperty")}})</p> + +<pre class="brush: js">// x non è ancora stata dichiarata + +"x" in window; // false +window.hasOwnProperty("x"); // false + +var x = 3; + +"x" in window; // true +window.hasOwnProperty("y"); // true +</pre> + +<h3 id="undefined_e_l'operatore_void"><code>undefined</code> e l'operatore <code>void</code></h3> + +<p>Una terza alternativa è l'operatore {{jsxref("Operators/void", "<code>void</code>")}}.</p> + +<pre class="brush: js">var x; +x === void 0; // true + +// y non è ancora stata dichiarata +y === void 0; // genera un ReferenceError (a differenza di `typeof`) +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>ECMAScript 1st Edition.</td> + <td>Standard</td> + <td>Definizione iniziale. Implementato in JavaScript 1.3</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.1.1.3', 'undefined')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-undefined', 'undefined')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funzionalità</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Supporto di base</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th><span style="font-family: 'Open Sans Light',sans-serif; font-size: 16px; line-height: 16px;">Funzionalità</span></th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td><span style="font-size: 12px; line-height: 18px;">Supporto di base</span></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p> </p> diff --git a/files/it/web/javascript/reference/global_objects/unescape/index.html b/files/it/web/javascript/reference/global_objects/unescape/index.html new file mode 100644 index 0000000000..d3c31d5f96 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/unescape/index.html @@ -0,0 +1,124 @@ +--- +title: unescape() +slug: Web/JavaScript/Reference/Global_Objects/unescape +translation_of: Web/JavaScript/Reference/Global_Objects/unescape +--- +<div> +<div> +<div>{{jsSidebar("Objects")}} {{deprecated_header()}}</div> +</div> +</div> + +<h2 id="Summary" name="Summary">Sommario</h2> + +<p>La funzione <strong><code>unescape()</code></strong>, deprecata, crea una nuova stringa nella quale le sequenze di escape esadecimali vengono sostituite con il loro carattere corrispondente. Le sequenze di escape potrebbero essere state generate da funzioni simili a {{jsxref("Global_Objects/escape", "escape()")}}. Essendo <code>unescape()</code> deprecata, è preferibile utilizzare le funzioni {{jsxref("Global_Objects/decodeURI", "decodeURI()")}} o {{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent()")}}.</p> + +<div class="note"><strong>Nota:</strong> Non usare la funzione <code>unescape()</code> per decodificare degli {{Glossary("URI")}}, usa {{jsxref("Global_Objects/decodeURI", "decodeURI()")}}.</div> + +<h2 id="Syntax" name="Syntax">Sintassi</h2> + +<pre class="syntaxbox"><code>unescape(string)</code></pre> + +<h3 id="Parameters" name="Parameters">Parametri</h3> + +<dl> + <dt><code>string</code></dt> + <dd>La stringa da decodificare.</dd> +</dl> + +<h2 id="Description" name="Description">Descrizione</h2> + +<p>La funzione <code>unescape()</code> è una proprietà dell'<em>oggetto globale</em>.</p> + +<h2 id="Esempi">Esempi</h2> + +<pre class="brush: js">unescape("abc123"); // "abc123" +unescape("%E4%F6%FC"); // "äöü" +unescape("%u0107"); // "ć" +</pre> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commenti</th> + </tr> + <tr> + <td>ECMAScript 1st Edition.</td> + <td>Standard</td> + <td>Definizione iniziale.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-B.2.2', 'unescape')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Definita nell'appendice B, "<em>Compatibility</em>"</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-unescape-string', 'unescape')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Definita nell'appendice B, "<em>Additional ECMAScript Features for Web Browsers</em>"</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funzionalità</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Supporto di base</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th><span style="font-family: 'Open Sans Light', sans-serif; font-size: 16px; line-height: 16px;">Funzionalità</span></th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td><span style="font-size: 12px; line-height: 18px;">Supporto di base</span></td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_Also" name="See_Also">Vedi anche</h2> + +<ul> + <li>{{jsxref("Global_Objects/decodeURI", "decodeURI()")}}</li> + <li>{{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent()")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/global_objects/uneval/index.html b/files/it/web/javascript/reference/global_objects/uneval/index.html new file mode 100644 index 0000000000..965dc014b4 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/uneval/index.html @@ -0,0 +1,112 @@ +--- +title: uneval() +slug: Web/JavaScript/Reference/Global_Objects/uneval +translation_of: Web/JavaScript/Reference/Global_Objects/uneval +--- +<div> +<div> +<div>{{jsSidebar("Objects")}}{{Non-standard_header}}</div> +</div> +</div> + +<h2 id="Summary" name="Summary">Sommario</h2> + +<p>La funzione <strong><code>uneval()</code></strong> crea una stringa rappresentante il codice sorcente di un oggetto.</p> + +<h2 id="Syntax" name="Syntax">Sintassi</h2> + +<pre class="syntaxbox">uneval(<var>object</var>)</pre> + +<h3 id="Parameters" name="Parameters">Parametri</h3> + +<dl> + <dt><code>object</code></dt> + <dd>Una qualsiasi espressione o dichiarazione JavaScript</dd> +</dl> + +<div class="note"><strong>Nota:</strong> Questa funzione non restituisce una rappresentazione JSON valida. Usare il metodo {{jsxref("JSON.stringify()")}}</div> + +<h2 id="Description" name="Description">Descrizione</h2> + +<p><code>uneval()</code> è una funzione globale e non è associata a nessun oggetto.</p> + +<h2 id="Esempi">Esempi</h2> + +<pre class="brush:js">var a = 1; +uneval(a); // restituisce la stringa "1" + +var b = "1"; +uneval(b) // restituisce la stringa '"1"' + +uneval(function foo(){}); // restituisce "(function foo(){})" + + +var a = uneval(function foo(){return "ciao"}); +var foo = eval(a); +foo(); // restituisce "ciao" +</pre> + +<h2 id="See_also" name="See_also">Specifiche</h2> + +<p>Non fa parte di nessuna specifica.</p> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funzionalità</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Supporto di base</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th><span style="font-family: 'Open Sans Light', sans-serif; font-size: 16px; line-height: 16px;">Funzionalità</span></th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td><span style="font-size: 12px; line-height: 18px;">Supporto di base</span></td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_Also" name="See_Also">Vedi anche</h2> + +<ul> + <li>{{jsxref("Global_Objects/eval", "eval()")}}</li> + <li>{{jsxref("JSON.stringify")}}</li> + <li>{{jsxref("JSON.parse")}}</li> + <li>{{jsxref("Object.toSource")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/index.html b/files/it/web/javascript/reference/index.html new file mode 100644 index 0000000000..47b1cdf0fd --- /dev/null +++ b/files/it/web/javascript/reference/index.html @@ -0,0 +1,49 @@ +--- +title: Riferimento JavaScript +slug: Web/JavaScript/Reference +tags: + - JavaScript + - TopicStub +translation_of: Web/JavaScript/Reference +--- +<p id="About_this_Reference">{{JsSidebar}}</p> + +<p>Questa sezione riguardante JavaScript contiene informazioni riguardo a tale linguaggio. Leggi altre informazioni {{jsxref("About", "riguardo a questa documentazione", "", 1)}}.</p> + +<h2 id="Oggetti_globali">Oggetti globali</h2> + +<p>Questo capitolo documenta tutti gli {{jsxref("Global_Objects", "oggetti standard predefiniti", "", 1)}} di JavaScript, con i loro metodi e le loro proprietà.</p> + +<div>{{page('/it/docs/Web/JavaScript/Reference/Global_Objects', 'Oggetti_standard_(per_categoria)')}}</div> + +<h2 id="Statements" name="Statements">Statements</h2> + +<p>Questo capitolo documenta tutti gli {{jsxref("Statements", "statements e le dichiarazioni", "", 1)}} JavaScript.</p> + +<div>{{page('/it/docs/Web/JavaScript/Reference/Statements', "Statements_and_declarations_by_category")}}</div> + +<h2 id="Operators" name="Operators">Espressioni e operatori</h2> + +<p>Questo capitolo documenta {{jsxref("Operators", "espresisioni e operatori", "", 1)}} di JavaScript.</p> + +<div>{{page('/it/docs/Web/JavaScript/Reference/Operators', "Expressions_and_operators_by_category", "", 1)}}</div> + +<h2 id="Funzioni">Funzioni</h2> + +<p>Questo capitolo documenta come usare le {{jsxref("Functions", "funzioni", "", 1)}} in JavaScript.</p> + +<ul> + <li>{{jsxref("Functions/arguments", "arguments")}}</li> + <li>{{jsxref("Functions/Arrow_functions", "Arrow functions", "", 1)}}</li> + <li>{{jsxref("Functions/Default_parameters", "Parametri predefiniti", "", 1)}}</li> + <li>{{jsxref("Functions/rest_parameters", "Parametri rest", "", 1)}}</li> +</ul> + +<h2 id="Comments" name="Comments">Altre pagine utili</h2> + +<ul> + <li>{{jsxref("Lexical_grammar", "Grammatica del linguaggio", "", 1)}}</li> + <li>{{jsxref("Data_structures", "Tipi e struttura dei dati", "", 1)}}</li> + <li>{{jsxref("Strict_mode", "Strict mode", "", 1)}}</li> + <li>{{jsxref("Deprecated_and_obsolete_features", "Funzionalità deprecate o obsolete", "", 1)}}</li> +</ul> diff --git a/files/it/web/javascript/reference/operators/destructuring_assignment/index.html b/files/it/web/javascript/reference/operators/destructuring_assignment/index.html new file mode 100644 index 0000000000..12a790e45c --- /dev/null +++ b/files/it/web/javascript/reference/operators/destructuring_assignment/index.html @@ -0,0 +1,451 @@ +--- +title: Assegnamento di destrutturazione +slug: Web/JavaScript/Reference/Operators/Destructuring_assignment +translation_of: Web/JavaScript/Reference/Operators/Destructuring_assignment +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>La sintassi di <strong>assegnamento di destrutturazione </strong>è un'espressione JavaScript che rende possibile estrarre informazioni da array o oggetti in variabili distinte.</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="brush:js">var a, b, rest; +[a, b] = [1, 2]; +console.log(a); // 1 +console.log(b); // 2 + +[a, b, ...rest] = [1, 2, 3, 4, 5]; +console.log(a); // 1 +console.log(b); // 2 +console.log(rest); // [3, 4, 5] + +({a, b} = {a:1, b:2}); +console.log(a); // 1 +console.log(b); // 2 + +// ES2016 - non implementato in Firefox 47a01 +({a, b, ...rest} = {a:1, b:2, c:3, d:4}); +</pre> + +<h2 id="Descrizione">Descrizione</h2> + +<p>Le espressioni lettali degli oggetti e degli array forniscono un modo facile per creare <em>ad hoc</em> pacchetti di data.</p> + +<pre class="brush: js">var x = [1, 2, 3, 4, 5];</pre> + +<p>L'assegnamento di destrutturazione utilizza una sintassi simile, ma a sinistra dell'assegnamento sono definiti quali elementi estrarre dalla variabile sorgente (array o oggetti).</p> + +<pre class="brush: js">var x = [1, 2, 3, 4, 5]; +var [y, z] = x; +console.log(y); // 1 +console.log(z); // 2 +</pre> + +<p>Questa capacità è simile alle caratteristiche presenti in linguaggi come Perl e Python.</p> + +<h2 id="Destrutturazione_di_array">Destrutturazione di array</h2> + +<h3 id="Assegnamento_semplice_di_variabile">Assegnamento semplice di variabile</h3> + +<pre class="brush: js">var foo = ["one", "two", "three"]; + +var [one, two, three] = foo; +console.log(one); // "one" +console.log(two); // "two" +console.log(three); // "three" +</pre> + +<h3 id="Assegnamento_separato_dalla_dichiarazione">Assegnamento separato dalla dichiarazione</h3> + +<p>Il valore di una variabile può essere assegnato (sempre con la destrutturazione) in modo separato dalla dichiarazione della variabile stessa.</p> + +<pre class="brush:js">var a, b; + +[a, b] = [1, 2]; +console.log(a); // 1 +console.log(b); // 2 +</pre> + +<h3 id="Valori_default">Valori default</h3> + +<p>Ad una variabile può essere assegnato un valore default nel caso in cui il valore estratto dall'array sia <code>undefined</code>.</p> + +<pre class="brush: js">var a, b; + +[a=5, b=7] = [1]; +console.log(a); // 1 +console.log(b); // 7 +</pre> + +<h3 id="Scambio_di_variabili">Scambio di variabili</h3> + +<p>Due valori di variabili possono essere scambiati in un assegnamento di destrutturazione.</p> + +<p>Senza l'assegnamento di destrutturazione, scambiare due valori richiede una variabile momentanea (o, in alcuni linguaggi low-level, il <a class="external" href="https://en.wikipedia.org/wiki/XOR_swap_algorithm">XOR-swap trick</a>).</p> + +<pre class="brush:js">var a = 1; +var b = 3; + +[a, b] = [b, a]; +console.log(a); // 3 +console.log(b); // 1 +</pre> + +<h3 id="Fare_il_parsing_di_un_array_ritornato_da_una_funzione">Fare il parsing di un array ritornato da una funzione</h3> + +<p>È sempre stato possibile ritornare un array da una funzione. La destrutturazione può rendere più conciso lavorare con il valore di ritorno di un array</p> + +<p>In questo esempio, <code>f()</code> ritorna i valori <code>[1, 2]</code> come output, e questi possono essere analizzati in una singola linea con la destrutturazione.</p> + +<pre class="brush:js">function f() { + return [1, 2]; +} + +var a, b; +// puoi fare questo grazie alla destrutturazione +[a, b] = f(); + +// invece di questo +a = f()[0]; +b = f()[1]; + +// è la stessa identica cosa, però c'è un enorme differenza in termini +//di leggibilità e concisione + +console.log(a); // 1 +console.log(b); // 2 +</pre> + +<h3 id="Ignorare_alcuni_valori_ritornati">Ignorare alcuni valori ritornati</h3> + +<p>Puoi ignorare i valori ritornati nei quali non sei interessato:</p> + +<pre class="brush:js">function f() { + return [1, 2, 3]; +} + +var [a, , b] = f(); +console.log(a); // 1 +console.log(b); // 3 +</pre> + +<p>Puoi anche ignorare tutti i valori ritornati:</p> + +<pre class="brush:js">[,,] = f(); +</pre> + +<h3 id="Assegnare_il_resto_di_un_array_ad_una_variabile">Assegnare il resto di un array ad una variabile</h3> + +<p>Quando si destruttura un array, puoi assegnare la sua parte rimanente ad una variabile usando l'operatore rest (i 3 puntini):</p> + +<pre class="brush: js">var [a, ...b] = [1, 2, 3]; +console.log(a); // 1 +console.log(b); // [2, 3]</pre> + +<h3 id="Estrarre_valori_da_un_match_con_un'espressione_regolare">Estrarre valori da un match con un'espressione regolare</h3> + +<p>Quando il metodo <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec">exec()</a></code> trova un match, ritorna un array contenente come 1° elemento l'intera porzione della stringa e poi le porzioni della stringa che hanno fatto match con ognuno dei gruppi in parentesi dell'espressione regolare. L'assegnamento di destrutturazione ti permetti di estrarre le parti di questo array facilmente, ignorando l'intero match se non ne hai bisogno.</p> + +<pre class="brush:js">var url = "https://developer.mozilla.org/en-US/Web/JavaScript"; + +var parsedURL = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url); +console.log(parsedURL); // ["https://developer.mozilla.org/en-US/Web/JavaScript", "https", "developer.mozilla.org", "en-US/Web/JavaScript"] + +var [, protocol, fullhost, fullpath] = parsedURL; + +console.log(protocol); // "https" +</pre> + +<h2 id="Destrutturazione_degli_oggetti">Destrutturazione degli oggetti</h2> + +<h3 id="Assegnamento_base">Assegnamento base</h3> + +<pre class="brush: js">var o = {p: 42, q: true}; +var {p, q} = o; + +console.log(p); // 42 +console.log(q); // true +</pre> + +<h3 id="Assegnamento_senza_dichiarazione">Assegnamento senza dichiarazione</h3> + +<p>Il valore di una variabile può essere assegnato senza destrutturazione separatamente dalla sua dichiarazione.</p> + +<pre class="brush:js">var a, b; + +({a, b} = {a:1, b:2});</pre> + +<div class="note"> +<p><code><font face="Open Sans, Arial, sans-serif">Le </font>( )</code> attorno l'assegnamento di destrutturazione sono obbligatorie quando si usa la destrutturazione degli oggetti letterali senza una dichiarazione.</p> + +<p><code>{a, b} = {a:1, b:2}</code> non è sintassi valida, dato che <code>{a, b}</code> sulla sinistra è considerato un blocco e non un oggetto letterale.</p> + +<p>Tuttavia, <code>({a, b} = {a:1, b:2})</code> è valida, dato che <code>var {a, b} = {a:1, b:2}</code></p> +</div> + +<h3 id="Assegnamento_a_nuovi_nomi_di_variabili">Assegnamento a nuovi nomi di variabili </h3> + +<p>Una variabile può essere estratta da un oggetto e assegnata ad una variabile con un nome diverso da quello della proprietà dell'oggetto.</p> + +<pre class="brush: js">var o = {p: 42, q: true}; +var {p: foo, q: bar} = o; + +console.log(foo); // 42 +console.log(bar); // true </pre> + +<h3 id="Valori_default_2">Valori default</h3> + +<p>Ad una variabile può essere assegnato un valore default nel caso in cui il valore estratto dall'oggetto sia <code>undefined</code>.</p> + +<pre class="brush: js">var {a=10, b=5} = {a: 3}; + +console.log(a); // 3 +console.log(b); // 5</pre> + +<h3 id="Impostare_i_valore_default_dei_parametri_di_una_funzione">Impostare i valore default dei parametri di una funzione</h3> + +<h4 id="Versione_ES5">Versione ES5</h4> + +<pre class="brush: js">function drawES5Chart(options) { + options = options === undefined ? {} : options; + var size = options.size === undefined ? 'big' : options.size; + var cords = options.cords === undefined ? { x: 0, y: 0 } : options.cords; + var radius = options.radius === undefined ? 25 : options.radius; + console.log(size, cords, radius); + // now finally do some chart drawing +} + +drawES5Chart({ + cords: { x: 18, y: 30 }, + radius: 30 +});</pre> + +<h4 id="Versione_ES2015">Versione ES2015</h4> + +<pre class="brush: js">function drawES2015Chart({size = 'big', cords = { x: 0, y: 0 }, radius = 25} = {}) { + console.log(size, cords, radius); + // do some chart drawing +} + +drawES2015Chart({ + cords: { x: 18, y: 30 }, + radius: 30 +});</pre> + +<h3 id="Oggetti_annidati_e_destrutturazione_array">Oggetti annidati e destrutturazione array</h3> + +<pre class="brush:js">var metadata = { + title: "Scratchpad", + translations: [ + { + locale: "de", + localization_tags: [ ], + last_edit: "2014-04-14T08:43:37", + url: "/de/docs/Tools/Scratchpad", + title: "JavaScript-Umgebung" + } + ], + url: "/en-US/docs/Tools/Scratchpad" +}; + +var { title: englishTitle, translations: [{ title: localeTitle }] } = metadata; + +console.log(englishTitle); // "Scratchpad" +console.log(localeTitle); // "JavaScript-Umgebung"</pre> + +<h3 id="Iterazione_con_for...of_e_destrutturazione">Iterazione con for...of e destrutturazione</h3> + +<pre class="brush: js">var people = [ + { + name: "Mike Smith", + family: { + mother: "Jane Smith", + father: "Harry Smith", + sister: "Samantha Smith" + }, + age: 35 + }, + { + name: "Tom Jones", + family: { + mother: "Norah Jones", + father: "Richard Jones", + brother: "Howard Jones" + }, + age: 25 + } +]; + +for (var {name: n, family: { father: f } } of people) { + console.log("Name: " + n + ", Father: " + f); +} + +// "Name: Mike Smith, Father: Harry Smith" +// "Name: Tom Jones, Father: Richard Jones"</pre> + +<h3 id="Estrarre_campi_dagli_oggetti_passati_come_parametri_delle_funzioni">Estrarre campi dagli oggetti passati come parametri delle funzioni</h3> + +<pre class="brush:js">function userId({id}) { + return id; +} + +function whois({displayName: displayName, fullName: {firstName: name}}){ + console.log(displayName + " is " + name); +} + +var user = { + id: 42, + displayName: "jdoe", + fullName: { + firstName: "John", + lastName: "Doe" + } +}; + +console.log("userId: " + userId(user)); // "userId: 42" +whois(user); // "jdoe is John"</pre> + +<p>Questo estrae <code>id</code>, <code>displayName</code> e <code>firstName</code> da l'oggetto user e li stampa.</p> + +<h3 id="Proprietà_calcolate_degli_oggetti_e_destrutturazione">Proprietà calcolate degli oggetti e destrutturazione</h3> + +<p>I nomi delle proprietà calcolate degli oggetti, come sugli <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names">object literals</a>, possono anche essere usate con la destrutturazione.</p> + +<pre class="brush: js">let key = "z"; +let { [key]: foo } = { z: "bar" }; + +console.log(foo); // "bar" +</pre> + +<h2 id="Specificazioni">Specificazioni</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-destructuring-assignment', 'Destructuring assignment')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-destructuring-assignment', 'Destructuring assignment')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_browser">Compatibilità browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Caratteristica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Edge</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Supporto base</td> + <td>{{CompatChrome(49.0)}}</td> + <td>{{ CompatGeckoDesktop("1.8.1") }}</td> + <td>14</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>7.1</td> + </tr> + <tr> + <td>Nomi delle proprietà calcolate</td> + <td>{{CompatChrome(49.0)}}</td> + <td>{{ CompatGeckoDesktop("34") }}</td> + <td>14</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Operatore spread</td> + <td>{{CompatChrome(49.0)}}</td> + <td>{{ CompatGeckoDesktop("34") }}</td> + <td>12<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Caratteristica</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Supporto base</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(49.0)}}</td> + <td>{{ CompatGeckoMobile("1.0") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8</td> + <td>{{CompatChrome(49.0)}}</td> + </tr> + <tr> + <td>Nomi delle proprietà calcolate</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(49.0)}}</td> + <td>{{ CompatGeckoMobile("34") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(49.0)}}</td> + </tr> + <tr> + <td>Operatore spread</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(49.0)}}</td> + <td>{{ CompatGeckoMobile("34") }}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(49.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Richiede "Attiva le caratteristiche sperimentali di JavaScript" per essere abilitato sotto `about:flags`</p> + +<h2 id="Note_specifiche_a_Firefox">Note specifiche a Firefox</h2> + +<ul> + <li>Firefox fornisce un'estensione del linguaggio non standard in <a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.7">JS1.7</a> per</li> + <li>la destrutturazione. Questa estensione è stata rimossa in Gecko 40 {{geckoRelease(40)}}. Vedi {{bug(1083498)}}.</li> + <li>Partendo con Gecko 41 {{geckoRelease(41)}} e per soddisfare le specifiche ES2015, gli schemi di destrutturazioni con le parentesi come <code>([a, b]) = [1, 2]</code> or <code>({a, b}) = { a: 1, b: 2 } </code>sono ora considerate invalide e quindi lanceranno un errore {{jsxref("SyntaxError")}}. Vedi <a class="external external-icon" href="http://whereswalden.com/2015/06/20/new-changes-to-make-spidermonkeys-and-firefoxs-parsing-of-destructuring-patterns-more-spec-compliant/">Jeff Walden's blog post</a> e {{bug(1146136)}} per ulteriori dettagli.</li> +</ul> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">Operatori di assegnamento</a></li> + <li><a href="https://hacks.mozilla.org/2015/05/es6-in-depth-destructuring/">"ES2015 in profondità: Destrutturazioni" su hacks.mozilla.org</a></li> +</ul> diff --git a/files/it/web/javascript/reference/operators/in/index.html b/files/it/web/javascript/reference/operators/in/index.html new file mode 100644 index 0000000000..d6dcb196de --- /dev/null +++ b/files/it/web/javascript/reference/operators/in/index.html @@ -0,0 +1,198 @@ +--- +title: operatore in +slug: Web/JavaScript/Reference/Operators/in +tags: + - JavaScript + - Operatori + - Operatori Relazionali +translation_of: Web/JavaScript/Reference/Operators/in +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>L' operatore <strong><code>in</code> </strong>dà come ritorno <code>true</code> se la proprietà specificata si trova nell'oggetto preso in considerazione.</p> + +<p>Restituisce <code>false</code> se la proprietà è stata eliminata tramite <code>delete</code> ma non nel caso in cui sia stata inizializzata <code>undefined</code> dal programmatore.</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><em>prop</em> in <em>nomeOggetto</em></pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt><code>prop</code></dt> + <dd>Una stringa o simbolo che rappresenta il nome di una proprietà o indice di un array (i non-simboli verranno automaticamente convertiti in stringhe).</dd> +</dl> + +<dl> + <dt><code>nomeOggetto</code></dt> + <dd>Nome di un oggetto.</dd> +</dl> + +<h2 id="Descrizione">Descrizione</h2> + +<p>I seguenti esempi mostrano alcuni usi dell'operatore <code>in</code>.</p> + +<pre class="brush:js">// Array +var alberi = ["sequoia", "lauro", "cedro", "quercia", "acero"]; +0 in alberi // ritorna true +3 in alberi // ritorna true +6 in alberi // ritorna false, non ci sono proprietà in quell'indice su <em>alberi</em> +"bay" in alberi // ritorna false (devi specificare il + // numero dell'indice, non il valore corrispondente a quell'indice) +"length" in alberi // ritorna true (length è una proprietà degli array) +Symbol.iterator in alberi // ritorna true (gli array sono iterabili, funziona solo in ES6+) + +// Oggetti predefiniti +"PI" in Math // ritorna true, "PI" è il nome di una proprietà dell'oggetto Math + +// Oggetti personalizzati +var miaAuto = {marca: "Honda", modello: "Accord", anno: 1998}; +"marca" in miaAuto // ritorna true +"modello" in miaAuto // ritorna true +</pre> + +<p>Devi specificare un oggetto sul lato destro dell'operatore <code>in</code>. Per esempio, puoi specificare una stringa creata con il costruttore String, ma non puoi specificare una stringa literal.</p> + +<pre class="brush:js">var colore1 = new String("verde"); +"length" in colore1 // ritorna true + +var color2 = "coral"; +// genera un errore (colore2 non è un oggetto String) +"length" in colore2 +</pre> + +<h3 id="Usare_l'operatore_in_con_le_proprietà_deleted_o_undefined">Usare l'operatore <code>in</code> con le proprietà deleted o undefined</h3> + +<p>Se elimini una proprietà con l'operatore <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete" title="en-US/docs/JavaScript/Reference/Operators/Special/delete">delete</a></code>, l'operatore in ritorna <code>false</code> per quella proprietà.</p> + +<pre class="brush:js">var miaAuto = {marca: "Honda", modello: "Accord", anno: 1998}; +delete miaAuto.marca; +"marca" in miaAuto; // ritorna false + +var alberi = new Array("sequoia", "lauro", "cedro", "quercia", "acero"); +delete alberi[3]; +3 in alberti; // ritorna false +</pre> + +<p>Se setti una proprietà ad {{jsxref("Global_Objects/undefined", "undefined")}} ma non la cancelli, l'operatore <code>in</code> darà come ritorno true per quella proprietà.</p> + +<pre class="brush:js">var miaAuto = {marca: "Honda", modello: "Accord", anno: 1998}; +miaAuto.marca = undefined; //inizializzo manualmente la proprietà '<em>marca'</em> undefined +"marca" in miaAuto; // ritorna true, non è stato usato usato delete sulla proprietà +delete miaAuto.marca; +"marca" in miaAuto // return false, è stata eliminata la proprietà</pre> + +<p> </p> + +<p> </p> + +<p> </p> + +<pre class="brush:js">var alberi = new Array("sequoia", "lauro", "cedro", "quercia", "acero"); +alberi[3] = undefined; +3 in alberi; // ritorna true +</pre> + +<h3 id="Proprietà_ereditate">Proprietà ereditate</h3> + +<p>L'operatore <code>in</code> ritorna <code>true</code> per proprietà ereditate tramite prototipi.</p> + +<pre class="brush:js">"toString" in {}; // returns true +</pre> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-relational-operators', 'Relational Operators')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-relational-operators', 'Relational Operators')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.8.7', 'The in Operator')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-11.8.7', 'The in Operator')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Definizione iniziale. Implementato in JavaScript 1.4.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Edge</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a></code></li> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete" title="en-US/docs/JavaScript/Reference/Operators/Special/delete">delete</a></code></li> + <li>{{jsxref("Object.prototype.hasOwnProperty()")}}</li> + <li>{{jsxref("Reflect.has()")}}</li> + <li><a href="/en-US/docs/Enumerability_and_ownership_of_properties" title="/en-US/docs/Enumerability_and_ownership_of_properties">Enumerability and ownership of properties</a></li> +</ul> diff --git a/files/it/web/javascript/reference/operators/index.html b/files/it/web/javascript/reference/operators/index.html new file mode 100644 index 0000000000..9e257e3038 --- /dev/null +++ b/files/it/web/javascript/reference/operators/index.html @@ -0,0 +1,282 @@ +--- +title: Expressions and operators +slug: Web/JavaScript/Reference/Operators +tags: + - JavaScript + - NeedsTranslation + - Operators + - TopicStub +translation_of: Web/JavaScript/Reference/Operators +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Questo capitolo documenta tutti gli operatori, espressioni e parole chiave del linguaggio JavaScript.</p> + +<h2 id="Espressioni_e_operatori_per_categoria">Espressioni e operatori per categoria</h2> + +<p>Per la lista alfabetica consultare la sidebar di sinistra</p> + +<h3 id="Espressioni_Primarie">Espressioni Primarie</h3> + +<p>Basic keywords and general expressions in JavaScript.</p> + +<dl> + <dt>{{jsxref("Operators/this", "this")}}</dt> + <dd>The <code>this</code> keyword refers to the function's execution context.</dd> + <dt>{{jsxref("Operators/function", "function")}}</dt> + <dd>The <code>function</code> keyword defines a function expression.</dd> + <dt>{{experimental_inline}} {{jsxref("Operators/class", "class")}}</dt> + <dd>The <code>class</code> keyword defines a class expression.</dd> + <dt>{{experimental_inline}} {{jsxref("Operators/function*", "function*")}}</dt> + <dd>The <code>function*</code> keyword defines a generator function expression.</dd> + <dt>{{experimental_inline}} {{jsxref("Operators/yield", "yield")}}</dt> + <dd>Pause and resume a generator function</dd> + <dt>{{experimental_inline}} {{jsxref("Operators/yield*", "yield*")}}</dt> + <dd>Delegate to another generator function or iterable object.</dd> + <dt>{{jsxref("Global_Objects/Array", "[]")}}</dt> + <dd>Array initializer/literal syntax.</dd> + <dt>{{jsxref("Operators/Object_initializer", "{}")}}</dt> + <dd>Object initializer/literal syntax.</dd> + <dt>{{jsxref("Global_Objects/RegExp", "/ab+c/i")}}</dt> + <dd>Regular expression literal syntax.</dd> + <dt>{{experimental_inline}} {{jsxref("Operators/Array_comprehensions", "[for (x of y) x]")}}</dt> + <dd>Array comprehensions.</dd> + <dt>{{experimental_inline}} {{jsxref("Operators/Generator_comprehensions", "(for (x of y) y)")}}</dt> + <dd>Generator comprehensions.</dd> + <dt>{{jsxref("Operators/Grouping", "( )")}}</dt> + <dd>Grouping operator.</dd> +</dl> + +<h3 id="Left-hand-side_expressions">Left-hand-side expressions</h3> + +<p>Left values are the destination of an assignment.</p> + +<dl> + <dt>{{jsxref("Operators/Property_accessors", "Property accessors", "", 1)}}</dt> + <dd>Member operators provide access to a property or method of an object<br> + (<code>object.property</code> and <code>object["property"]</code>).</dd> + <dt>{{jsxref("Operators/new", "new")}}</dt> + <dd>The <code>new</code> operator creates an instance of a constructor.</dd> + <dt>{{experimental_inline}} {{jsxref("Operators/super", "super")}}</dt> + <dd>The <code>super</code> keyword calls the parent constructor.</dd> + <dt>{{experimental_inline}} {{jsxref("Operators/Spread_operator", "...obj")}}</dt> + <dd>The spread operator allows an expression to be expanded in places where multiple arguments (for function calls) or multiple elements (for array literals) are expected.</dd> +</dl> + +<h3 id="Increment_and_decrement">Increment and decrement</h3> + +<p>Postfix/prefix increment and postfix/prefix decrement operators.</p> + +<dl> + <dt>{{jsxref("Operators/Arithmetic_Operators", "A++", "#Increment")}}</dt> + <dd>Postfix increment operator.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "A--", "#Decrement")}}</dt> + <dd>Postfix decrement operator.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "++A", "#Increment")}}</dt> + <dd>Prefix increment operator.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "--A", "#Decrement")}}</dt> + <dd>Prefix decrement operator.</dd> +</dl> + +<h3 id="Unary_operators">Unary operators</h3> + +<p>A unary operation is operation with only one operand.</p> + +<dl> + <dt>{{jsxref("Operators/delete", "delete")}}</dt> + <dd>The <code>delete</code> operator deletes a property from an object.</dd> + <dt>{{jsxref("Operators/void", "void")}}</dt> + <dd>The <code>void</code> operator discards an expression's return value.</dd> + <dt>{{jsxref("Operators/typeof", "typeof")}}</dt> + <dd>The <code>typeof</code> operator determines the type of a given object.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "+", "#Unary_plus")}}</dt> + <dd>The unary plus operator converts its operand to Number type.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "-", "#Unary_negation")}}</dt> + <dd>The unary negation operator converts its operand to Number type and then negates it.</dd> + <dt>{{jsxref("Operators/Bitwise_Operators", "~", "#Bitwise_NOT")}}</dt> + <dd>Bitwise NOT operator.</dd> + <dt>{{jsxref("Operators/Logical_Operators", "!", "#Logical_NOT")}}</dt> + <dd>Logical NOT operator.</dd> +</dl> + +<h3 id="Arithmetic_operators">Arithmetic operators</h3> + +<p>Arithmetic operators take numerical values (either literals or variables) as their operands and return a single numerical value.</p> + +<dl> + <dt>{{jsxref("Operators/Arithmetic_Operators", "+", "#Addition")}}</dt> + <dd>Addition operator.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "-", "#Subtraction")}}</dt> + <dd>Subtraction operator.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "/", "#Division")}}</dt> + <dd>Division operator.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "*", "#Multiplication")}}</dt> + <dd>Multiplication operator.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "%", "#Remainder")}}</dt> + <dd>Remainder operator.</dd> +</dl> + +<h3 id="Relational_operators">Relational operators</h3> + +<p>A comparison operator compares its operands and returns a <code>Boolean</code> value based on whether the comparison is true.</p> + +<dl> + <dt>{{jsxref("Operators/in", "in")}}</dt> + <dd>The <code>in</code> operator determines whether an object has a given property.</dd> + <dt>{{jsxref("Operators/instanceof", "instanceof")}}</dt> + <dd>The <code>instanceof</code> operator determines whether an object is an instance of another object.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", "<", "#Less_than_operator")}}</dt> + <dd>Less than operator.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", ">", "#Greater_than_operator")}}</dt> + <dd>Greater than operator.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", "<=", "#Less_than_or_equal_operator")}}</dt> + <dd>Less than or equal operator.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", ">=", "#Greater_than_or_equal_operator")}}</dt> + <dd>Greater than or equal operator.</dd> +</dl> + +<h3 id="Equality_operators">Equality operators</h3> + +<p>The result of evaluating an equality operator is always of type <code>Boolean</code> based on whether the comparison is true.</p> + +<dl> + <dt>{{jsxref("Operators/Comparison_Operators", "==", "#Equality")}}</dt> + <dd>Equality operator.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", "!=", "#Inequality")}}</dt> + <dd>Inequality operator.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", "===", "#Identity")}}</dt> + <dd>Identity operator.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", "!==", "#Nonidentity")}}</dt> + <dd>Nonidentity operator.</dd> +</dl> + +<h3 id="Bitwise_shift_operators">Bitwise shift operators</h3> + +<p>Operations to shift all bits of the operand.</p> + +<dl> + <dt>{{jsxref("Operators/Bitwise_Operators", "<<", "#Left_shift")}}</dt> + <dd>Bitwise left shift operator.</dd> + <dt>{{jsxref("Operators/Bitwise_Operators", ">>", "#Right_shift")}}</dt> + <dd>Bitwise right shift operator.</dd> + <dt>{{jsxref("Operators/Bitwise_Operators", ">>>", "#Unsigned_right_shift")}}</dt> + <dd>Bitwise unsigned right shift operator.</dd> +</dl> + +<h3 id="Binary_bitwise_operators">Binary bitwise operators</h3> + +<p>Bitwise operators treat their operands as a set of 32 bits (zeros and ones) and return standard JavaScript numerical values.</p> + +<dl> + <dt>{{jsxref("Operators/Bitwise_Operators", "&", "#Bitwise_AND")}}</dt> + <dd>Bitwise AND.</dd> + <dt>{{jsxref("Operators/Bitwise_Operators", "|", "#Bitwise_OR")}}</dt> + <dd>Bitwise OR.</dd> + <dt>{{jsxref("Operators/Bitwise_Operators", "^", "#Bitwise_XOR")}}</dt> + <dd>Bitwise XOR.</dd> +</dl> + +<h3 id="Binary_logical_operators">Binary logical operators</h3> + +<p>Logical operators are typically used with boolean (logical) values, and when they are, they return a boolean value.</p> + +<dl> + <dt>{{jsxref("Operators/Logical_Operators", "&&", "#Logical_AND")}}</dt> + <dd>Logical AND.</dd> + <dt>{{jsxref("Operators/Logical_Operators", "||", "#Logical_OR")}}</dt> + <dd>Logical OR.</dd> +</dl> + +<h3 id="Conditional_ternary_operator">Conditional (ternary) operator</h3> + +<dl> + <dt>{{jsxref("Operators/Conditional_Operator", "(condition ? ifTrue : ifFalse)")}}</dt> + <dd> + <p>The conditional operator returns one of two values based on the logical value of the condition.</p> + </dd> +</dl> + +<h3 id="Assignment_operators">Assignment operators</h3> + +<p>An assignment operator assigns a value to its left operand based on the value of its right operand.</p> + +<dl> + <dt>{{jsxref("Operators/Assignment_Operators", "=", "#Assignment")}}</dt> + <dd>Assignment operator.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "*=", "#Multiplication_assignment")}}</dt> + <dd>Multiplication assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "/=", "#Division_assignment")}}</dt> + <dd>Division assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "%=", "#Remainder_assignment")}}</dt> + <dd>Remainder assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "+=", "#Addition_assignment")}}</dt> + <dd>Addition assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "-=", "#Subtraction_assignment")}}</dt> + <dd>Subtraction assignment</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "<<=", "#Left_shift_assignment")}}</dt> + <dd>Left shift assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", ">>=", "#Right_shift_assignment")}}</dt> + <dd>Right shift assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", ">>>=", "#Unsigned_right_shift_assignment")}}</dt> + <dd>Unsigned right shift assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "&=", "#Bitwise_AND_assignment")}}</dt> + <dd>Bitwise AND assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "^=", "#Bitwise_XOR_assignment")}}</dt> + <dd>Bitwise XOR assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "|=", "#Bitwise_OR_assignment")}}</dt> + <dd>Bitwise OR assignment.</dd> + <dt>{{experimental_inline}} {{jsxref("Operators/Destructuring_assignment", "[a, b] = [1, 2]")}}<br> + {{experimental_inline}} {{jsxref("Operators/Destructuring_assignment", "{a, b} = {a:1, b:2}")}}</dt> + <dd> + <p>Destructuring assignment allows you to assign the properties of an array or object to variables using syntax that looks similar to array or object literals.</p> + </dd> +</dl> + +<h3 id="Comma_operator">Comma operator</h3> + +<dl> + <dt>{{jsxref("Operators/Comma_Operator", ",")}}</dt> + <dd>The comma operator allows multiple expressions to be evaluated in a single statement and returns the result of the last expression.</dd> +</dl> + +<h3 id="Non-standard_features">Non-standard features</h3> + +<dl> + <dt>{{non-standard_inline}} {{jsxref("Operators/Legacy_generator_function", "Legacy generator function", "", 1)}}</dt> + <dd>The <code>function</code> keyword can be used to define a legacy generator function inside an expression. To make the function a legacy generator, the function body should contains at least one {{jsxref("Operators/yield", "yield")}} expression.</dd> + <dt>{{non-standard_inline}} {{jsxref("Operators/Expression_closures", "Expression closures", "", 1)}}</dt> + <dd>The expression closure syntax is a shorthand for writing simple function.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>ECMAScript 1st Edition.</td> + <td>Standard</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11', 'Expressions')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-ecmascript-language-expressions', 'ECMAScript Language: Expressions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>New: Spread operator, destructuring assignment, <code>super</code> keyword, Array comprehensions, Generator comprehensions</td> + </tr> + </tbody> +</table> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">Operator precedence</a></li> +</ul> diff --git a/files/it/web/javascript/reference/operators/new/index.html b/files/it/web/javascript/reference/operators/new/index.html new file mode 100644 index 0000000000..291917479e --- /dev/null +++ b/files/it/web/javascript/reference/operators/new/index.html @@ -0,0 +1,186 @@ +--- +title: operatore new +slug: Web/JavaScript/Reference/Operators/new +tags: + - Espressioni di sinistra + - JavaScript + - Operatore +translation_of: Web/JavaScript/Reference/Operators/new +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>L'<strong>operatore <code><font face="Consolas, Liberation Mono, Courier, monospace">new</font></code></strong> crea un'istanza di un tipo di oggetto definito dall'utente o di uno dei tipi di oggetto nativi che ha una funzione costruttore.</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox">new <em>constructor</em>[([<em>arguments</em>])]</pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt><code>constructor</code></dt> + <dd>Una funzione che specifica il tipo dell'oggetto istanziato.</dd> +</dl> + +<dl> + <dt><code>arguments</code></dt> + <dd>Una lista di valori con i quali <code>constructor</code> sarà chiamato.</dd> +</dl> + +<h2 id="Descrizione">Descrizione</h2> + +<p>Creare un oggetto definito dall'utente richiede due step:</p> + +<ol> + <li>Definire il tipo di oggetto scrivendo una funzione.</li> + <li>Creare un'istanza dell'oggetto con <code>new</code>.</li> +</ol> + +<p>Per definire un tipo di oggetto, crea una funzione per il tipo di oggetto che specifichi il suo nome e le sue proprietà. Un oggetto può avere una proprietà che è se stessa un oggetto. Vedi l'esempio sotto.</p> + +<p>Quando il codice <code>new <em>Foo</em>(...)</code> viene eseguito, ecco cosa accade:</p> + +<ol> + <li>Un nuovo oggetto viene creato ed eredita da <code><em>Foo</em>.prototype</code>.</li> + <li>La funzione costruttore <em>Foo</em> viene chiamata con gli argomenti specificati e con <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a></code> legato all'oggetto appena creato. <code>new Foo </code>è identica a <code>new Foo()</code>, ovvero se nessun argomento è specificato, <em>Foo</em> viene chiamato senza argumenti.</li> + <li>L'oggetto ritornato dalla funzione costruttore diventa il risultato dell'intera espressione <code>new</code>. Se la funzione costruttore non ritorna esplicitamente un oggetto, viene invece usato l'oggetto creato nello step 1. (Normalmente i costruttori non ritornano un valore, ma possono scegliere di farlo se vogliono sovrascrivere il processo di creazione di un normale oggetto).</li> +</ol> + +<p>Puoi sempre aggiungere una proprietà all'oggetto che hai creato precedentemente. Per esempio, la dichiarazione <code>car1.color = "black"</code> aggiunge una proprietà <code>color</code> a <code>car1</code>, e gli assegna il valore di "<code>black</code>". Tuttavia, questo non influenza nessun altro oggetto. Per aggiungere una nuova proprietà a tutti gli oggetti dello stesso tipo, devi aggiungere la proprietà alla definizione del tipo di oggetto, in questo caso <code>Car</code>.</p> + +<p>Puoi aggiungere una proprietà condivisa ad un tipo di oggetto che hai definito prima usando la proprietà <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype">Function.prototype</a></code>.</p> + +<p>Questo definisce una proprietà che è condivisa da tutti gli oggetti creati con quella funzione, piuttosto che solo da un'istanza di quel tipo di oggetto. Il seguente codice aggiunge una proprietà con il valore <code>null</code> a tutti gli oggetti di tipo <code>car, </code>e poi sovrascrive quel valore con la stringa "<code>black</code>" solo nell'oggetto istanza <code>car1.</code> Per altre informazioni, vedi <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype">prototype</a>.</p> + +<p> </p> + +<pre class="brush: js">function Car() {} +car1 = new Car(); +car2 = new Car(); + +console.log(car1.color); // undefined + +Car.prototype.color = "original color"; +console.log(car1.color); // original color + +car1.color = 'black'; +console.log(car1.color); // black + +console.log(car1.__proto__.color) //original color +console.log(car2.__proto__.color) //original color +console.log(car1.color) // black +console.log(car2.color) // original color +</pre> + +<p class="note">Se non hai usato l'operatore <code>new</code>, <strong>la funzione constructor verrà invocata come una qualunque altra funzione</strong>, <em>senza creare un nuovo Object.</em><strong> </strong>in questo caaso, anche il valore di <code>this</code> è diverso.</p> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Tipo_di_oggetto_e_oggetto_istanza">Tipo di oggetto e oggetto istanza</h3> + +<p>Metti caso di volere creare un tipo di oggetto per le macchine. Vuoi che questo tipo di oggetto si chiami <code>car</code>, e vuoi che abbia queste proprietà: make (brand, marca), model (modello) e year (anno). Per fare questo, potresti scrivere la seguente funzione:</p> + +<pre class="brush: js">function Car(make, model, year) { + this.make = make; + this.model = model; + this.year = year; +} +</pre> + +<p>Adesso puoi creare un oggetto chiamato <code>myCar</code> in questo modo:</p> + +<pre class="brush: js">var mycar = new Car("Eagle", "Talon TSi", 1993); +</pre> + +<p>Questa dichiarazione crea <code>myCar </code>e gli assegna i valori specificati per le sue proprietà. Poi il valore di <code>mycar.make</code> è "Eagle", <code>mycar.year</code> è il numero intero 1993, e così via.</p> + +<p>Puoi creare quanti oggetti <code>Car</code> vuoi utilizzando <code>new</code>. Per esempio:</p> + +<pre class="brush: js">var kenscar = new Car("Nissan", "300ZX", 1992); +</pre> + +<h3 id="Proprietà_dell'oggetto_che_è_se_stesso_un_oggetto">Proprietà dell'oggetto che è se stesso un oggetto</h3> + +<p>Supponi di definire un oggetto <code>person</code> in questo modo:</p> + +<pre class="brush: js">function Person(name, age, sex) { + this.name = name; + this.age = age; + this.sex = sex; +} +</pre> + +<p>E poi istanzi due nuove oggetti <code>Person</code> in questo modo:</p> + +<pre class="brush: js">var rand = new Person("Rand McNally", 33, "M"); +var ken = new Person("Ken Jones", 39, "M"); +</pre> + +<p>Poi puoi riscrivere la definizione di <code>Car</code> per includere una proprietà <code>owner</code> (proprietario) che accetta un oggetto persona, ecco come:</p> + +<pre class="brush: js">function Car(make, model, year, owner) { + this.make = make; + this.model = model; + this.year = year; + this.owner = owner; +} +</pre> + +<p>Per istanziare i nuovi oggetti, poi fai così:</p> + +<pre class="brush: js">var car1 = new Car("Eagle", "Talon TSi", 1993, rand); +var car2 = new Car("Nissan", "300ZX", 1992, ken); +</pre> + +<p>Invece di passare una stringa letterale o un valore intero quando crei i nuovi oggetti, le dichiarazioni sopra passano gli oggetti <code>rand</code> e <code><font face="Consolas, Liberation Mono, Courier, monospace">ken</font></code> come parametri per i proprietari. Per cercare il nome del proprietario (owner) in <code><font face="Consolas, Liberation Mono, Courier, monospace">car2</font></code>, puoi accedere alla seguente proprietà:</p> + +<pre class="brush: js">car2.owner.name +</pre> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifiche</th> + <th scope="col">Status</th> + <th scope="col">Commento</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-new-operator', 'The new Operator')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-new-operator', 'The new Operator')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.2.2', 'The new Operator')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-11.2.2', 'The new Operator')}}</td> + <td>{{Spec2('ES3')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-11.2.2', 'The new Operator')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_browser">Compatibilità browser</h2> + +<p>{{Compat("javascript.operators.new")}}</p> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>{{jsxref("Function")}}</li> + <li>{{jsxref("Reflect.construct()")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/operators/operator_condizionale/index.html b/files/it/web/javascript/reference/operators/operator_condizionale/index.html new file mode 100644 index 0000000000..1ade61b085 --- /dev/null +++ b/files/it/web/javascript/reference/operators/operator_condizionale/index.html @@ -0,0 +1,171 @@ +--- +title: Operatore condizionale (ternary) +slug: Web/JavaScript/Reference/Operators/Operator_Condizionale +tags: + - JavaScript Operatore operatore +translation_of: Web/JavaScript/Reference/Operators/Conditional_Operator +--- +<p>L'<strong>operator</strong><strong>e</strong><strong> condizionale (ternary) </strong>è l'unico operatore JavaScript che necessità di tre operandi. Questo operatore è frequentemente usato al posto del comando <a href="/en-US/docs/Web/JavaScript/Reference/Statements/if...else"><code>if</code></a> per la sua sintassi concisa e perché fornisce direttamente un espressione valutabile.</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><em>condizione</em> ? <em>espressione1</em> : <em>espressione2</em> </pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt><code>condizione</code></dt> + <dd>Un espressione booleana (che viene valutata in vero o <code>falso)</code>.</dd> +</dl> + +<dl> + <dt><code>espressione1</code>, <code>espressione2</code></dt> + <dd>Espressione di qualunque tipo (vedi avanti nella pagina).</dd> +</dl> + +<h2 id="Descrizione">Descrizione</h2> + +<p>Se <code>la condizione è vera</code>, l'operatore ritorna il valore di <code>espressione1</code>; altrimenti, ritorna il valore di <code>espressione2</code>. Per esempio, puoi usare questa espressione per mostrare un messaggio che cambia in base al valore della variabile <strong><code>isMember</code></strong>:</p> + +<pre class="brush: js">"The fee is " + (isMember ? "$2.00" : "$10.00") +</pre> + +<p>Puoi anche assegnare variabili dipendenti dal risultato di un operatore ternario:</p> + +<pre class="brush: js">var elvisLives = Math.PI > 4 ? "Yep" : "Nope";</pre> + +<p>Sono anche possibili espressioni con operatori ternari multipli (nota: l'operatore condizionale è associativo a destra):</p> + +<pre class="brush: js">var firstCheck = false, + secondCheck = false, + access = firstCheck ? "Access denied" : secondCheck ? "Access denied" : "Access granted"; + +console.log( access ); // logs "Access granted"</pre> + +<p>Puoi anche usare l'operatore ternario direttamente senza assegnamenti e senza combinazioni con altre espressioni, con lo scopo di valutare operazioni alternative:</p> + +<pre class="brush: js">var stop = false, age = 16; + +age > 18 ? location.assign("continue.html") : stop = true; +</pre> + +<p>Puoi anche valutare operazioni multiple separandole con delle virgole:</p> + +<pre class="brush: js">var stop = false, age = 23; + +age > 18 ? ( + alert("OK, you can go."), + location.assign("continue.html") +) : ( + stop = true, + alert("Sorry, you are much too young!") +); +</pre> + +<p>Puoi anche valutare più operazioni durante l'assegnamento di una variabile. In questo caso, <strong>l'ultimo valore separato da una virgola nelle parentesi sarà il valore assegnato</strong>.</p> + +<pre class="brush: js">var age = 16; + +var url = age > 18 ? ( + alert("OK, you can go."), + // alert returns "undefined", but it will be ignored because + // isn't the last comma-separated value of the parenthesis + "continue.html" // the value to be assigned if age > 18 +) : ( + alert("You are much too young!"), + alert("Sorry :-("), + // etc. etc. + "stop.html" // the value to be assigned if !(age > 18) +); + +location.assign(url); // "stop.html"</pre> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-conditional-operator', 'Conditional Operator')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-conditional-operator', 'Conditional Operator')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.12', 'The conditional operator')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-11.12', 'The conditional operator')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_Browser">Compatibilità con Browser</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/if...else">if statement</a></li> +</ul> diff --git a/files/it/web/javascript/reference/operators/operatore_virgola/index.html b/files/it/web/javascript/reference/operators/operatore_virgola/index.html new file mode 100644 index 0000000000..e4027930a1 --- /dev/null +++ b/files/it/web/javascript/reference/operators/operatore_virgola/index.html @@ -0,0 +1,105 @@ +--- +title: Operatore virgola +slug: Web/JavaScript/Reference/Operators/Operatore_virgola +translation_of: Web/JavaScript/Reference/Operators/Comma_Operator +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>L'<strong>operatore virgola</strong> valuta ciascuno dei suoi operandi, da sinistra a destra, e restituisce il valore dell'ultimo operando.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-commaoperators.html")}}</div> + + + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox"><em>expr1</em>, <em>expr2, expr3...</em></pre> + +<h3 id="Parametri">Parametri</h3> + +<dl> + <dt><code>expr1</code>, <code>expr2</code>, <code>expr3</code>...</dt> + <dd>Qualsiasi espressione.</dd> +</dl> + +<h2 id="Descrizione">Descrizione</h2> + +<p>Puoi utilizzare l'operatore virgola quando vuoi includere più espressioni in una posizione che richiede una singola espressione. L'uso più comune di questo operatore è di fornire più parametri in un ciclo <code>for</code>.</p> + +<p>L'operatore virgola è completamente differente dalla virgola utilizzata negli array, negli oggetti, e negli argomenti e parametri di funzione.</p> + +<h2 id="Esempi">Esempi</h2> + +<p>Considerando <code>a</code> un array di 2 dimensioni contenente 10 elementi per ciascun lato, il seguente codice utilizza l'operatore virgola per incrementare <code>i</code> e decrementare <code>j</code> contemporaneamente.</p> + +<p>Il seguente codice stampa i valori degli elementi in posizione diagonale dell'array:</p> + +<pre class="brush:js;highlight:[1]">for (var i = 0, j = 9; i <= 9; i++, j--) + console.log('a[' + i + '][' + j + '] = ' + a[i][j]);</pre> + +<p>Si noti che gli operatori virgola nelle assegnazioni potrebbero non avere l'effetto normale degli operatori virgola perché non esistono all'interno di un'espressione. Nel seguente esempio, <code>a</code> é impostato al valore di <code>b = 3</code> (che é 3), ma l'espressione <code>c = 4</code> continua a essere valutata e il suo valore viene restituito alla console (cioé 4). Questo é dovuto alla <a href="/it/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">precedenza e all'associtività dell'operatore</a>.</p> + +<pre class="brush: js">var a, b, c; + +a = b = 3, c = 4; // restituisce 4 nella console +console.log(a); // 3 (più a sinistra) + +var x, y, z; + +x = (y = 5, z = 6); // restituisce 6 nella console +console.log(x); // 6 (più a destra) +</pre> + +<h3 id="Elaborazione_e_restituzione">Elaborazione e restituzione</h3> + +<p>Un altro esempio che si potrebbe fare con l'operatore virgola è quello di eleborare prima di restituire. Come detto, solo l'ultimo elemento viene restituito ma anche tutti gli altri vengono valutati. Quindi, si potrebbe fare:</p> + +<pre class="brush: js">function myFunc() { + var x = 0; + + return (x += 1, x); // stesso comportamento di ++x; +}</pre> + +<h2 id="Specificazioni">Specificazioni</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-comma-operator', 'Comma operator')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-comma-operator', 'Comma operator')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.14', 'Comma operator')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-11.14', 'Comma operator')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + + + +<p>{{Compat("javascript.operators.comma")}}</p> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li><a href="/it/docs/Web/JavaScript/Reference/Statements/for"><code>for</code> loop</a></li> +</ul> diff --git a/files/it/web/javascript/reference/operators/operatori_aritmetici/index.html b/files/it/web/javascript/reference/operators/operatori_aritmetici/index.html new file mode 100644 index 0000000000..991456bf93 --- /dev/null +++ b/files/it/web/javascript/reference/operators/operatori_aritmetici/index.html @@ -0,0 +1,291 @@ +--- +title: Operatori Aritmetici +slug: Web/JavaScript/Reference/Operators/Operatori_Aritmetici +tags: + - JavaScript + - Operatori + - Operatori Aritmetici +translation_of: Web/JavaScript/Reference/Operators +--- +<div>{{jsSidebar("Operators")}}</div> + +<div>Gli <strong>operatori aritmetici</strong> lavorano su operandi numerici (sia letterali che variabili) e ritornano un singolo valore numerico. Gli operatori aritmetici standard sono l'addizione (+), la sottrazione (-), la moltiplicazione (*) e la divisione (/).</div> + +<h2 id="Addizione_()"><a name="Addition">Addizione (+)</a></h2> + +<p>L'operazione di addizione produce la somma di operandi numerici o la concatenzione di stringhe.</p> + +<h3 id="Sintassi">Sintassi</h3> + +<pre class="syntaxbox"><strong>Operatore:</strong> x + y +</pre> + +<h3 id="Esempi">Esempi</h3> + +<pre class="brush: js">// Numero + Numero -> addizione +1 + 2 // 3 + +// Booleano + Numero -> addizione +true + 1 // 2 + +// Booleano + Booleano -> additione +false + false // 0 + +// Numero + Stringa -> concatenazione +5 + "foo" // "5foo" + +// Stringa + Booleano -> concatenazione +"foo" + false // "foofalse" + +// Stringa + Stringa -> concatenazione +"foo" + "bar" // "foobar" +</pre> + +<h2 id="Sottrazione_(-)"><a name="Subtraction">Sottrazione (-)</a></h2> + +<p>L'operatore di sottrazione fa la sottrazione dei due operandi e produce la loro differenza.</p> + +<h3 id="Sintassi_2">Sintassi</h3> + +<pre class="syntaxbox"><strong>Operatore:</strong> x - y +</pre> + +<h3 id="Esempi_2">Esempi</h3> + +<pre class="brush: js">5 - 3 // 2 +3 - 5 // -2 +"foo" - 3 // NaN</pre> + +<h2 id="Divisione_()"><a name="Division">Divisione (/)</a></h2> + +<p>L'operatore di divisione produce il quoziente dei suoi operandi dove l'operando di sinistra è il dividendo e l'operando di destra è il divisore.</p> + +<h3 id="Sintassi_3">Sintassi</h3> + +<pre class="syntaxbox"><strong>Operatore:</strong> x / y +</pre> + +<h3 id="Esempi_3">Esempi</h3> + +<pre class="brush: js">1 / 2 // restituisce 0.5 in JavaScript +1 / 2 // restituisce 0 in Java +// (nessuno degli operandi è un numero in virgola mobile esplicito) + +1.0 / 2.0 // restituisce 0.5 in both JavaScript and Java + +2.0 / 0 // restituisce Infinity in JavaScript +2.0 / 0.0 // restituisce Infinity too +2.0 / -0.0 // restituisce -Infinity in JavaScript</pre> + +<h2 id="Moltiplicazione_(*)"><a name="Multiplication">Moltiplicazione (*)</a></h2> + +<p>The multiplication operator produces the product of the operands.</p> + +<h3 id="Sintassi_4">Sintassi</h3> + +<pre class="syntaxbox"><strong>Operatore:</strong> x * y +</pre> + +<h3 id="Esempi_4">Esempi</h3> + +<pre class="brush: js">2 * 2 // 4 +-2 * 2 // -4 +Infinity * 0 // NaN +Infinity * Infinity // Infinity +"foo" * 2 // NaN +</pre> + +<h2 id="Resto_()"><a name="Remainder">Resto (%)</a></h2> + +<p>L'operatore Resto o Modulo restituisce il “resto“ rimasto quando un operando viene diviso per un secondo operando. Calcola il resto della divisione fra il primo e il secondo operando. Porta sempre il segno del dividendo.</p> + +<h3 id="Sintassi_5">Sintassi</h3> + +<pre class="syntaxbox"><strong>Operatore:</strong> var1 % var2 +</pre> + +<h3 id="Esempi_5">Esempi</h3> + +<pre class="brush: js">12 % 5 // 2 +-1 % 2 // -1 +NaN % 2 // NaN +1 % 2 // 1 +2 % 3 // 2 +-4 % 2 // -0 +</pre> + +<h2 id="Esponente_(**)"><a name="Exponentiation">Esponente (**)</a></h2> + +<p><strong>L'operatore Esponente o esponenziale in JavaScript. </strong>Una delle funzionalità di questa versione è l'operatore di esponenziazione. Esponente restituisce il risultato dell'elevamento a potenza dal primo operando al secondo. Cioè <code>var1</code> <code>var2</code> , <code>var2.</code> <code>var1</code>e <code>var2</code> sono variabili. L'operatore Esponente ha ragione associativa. <code>a ** b ** c</code> equivale a <code>a ** (b ** c)</code>.</p> + +<h3 id="Sintassi_6">Sintassi</h3> + +<pre class="syntaxbox"><strong>Operatore:</strong> var1 ** var2 +</pre> + +<h3 id="Note">Note</h3> + +<p>Nella maggior parte dei linguaggi come PHP e Python e altri che usano l'operatore Esponente (**), ha precedenza rispetto agli altri operatori unari come + e -, salvo in alcune eccezioni. Ad esempio, in Bash l'operatore ** ha una minor importanza rispetto agli operatori unari. In JavaScript, è impossibile scrivere un'espressione Esponente ambigua, ovvero non è possibile inserire un operatore unario ( <code>+/-/~/!/delete/void/typeof</code> ) immediatamente prima del numero di base. Il calcolo della potenza può essere espresso più sinteticamente usando la notazione infissa. Simile ad altri linguaggi come Python o F#, <code>**</code> è usato per indicare l'operatore. </p> + +<pre class="brush: js">-2 ** 2 // equals 4 in ES2016 or in Bash, equals -4 in other languages.</pre> + +<p>Accetta base sul lato sinistro ed esponente sul lato destro, rispettivamente.</p> + +<pre class="brush: js">let value = 5; value **= 2; // value: 25 +</pre> + +<h3 id="Esempi_6">Esempi</h3> + +<pre class="brush: js">2 ** 3 // 8 +3 ** 2 // 9 +3 ** 2.5 // 15.588457268119896 +10 ** -1 // 0.1 +NaN ** 2 // NaN + +2 ** 3 ** 2 // 512 +2 ** (3 ** 2) // 512 +(2 ** 3) ** 2 // 64 + +var a = 3; +var b = a ** 3; +alert("3x3x3 is = " + b); // 27 +</pre> + +<p>Per invertire il segno del risultato di un'espressione di Esponente:</p> + +<pre><code>-(2 ** 2) // -4</code> +</pre> + +<p>Per forzare la base di un'espressione di Esponente ad essere un numero negativo:</p> + +<pre><code>(-2) ** 2 // 4 </code></pre> + +<h2 id="Incremento_()"><a name="Increment">Incremento (++)</a></h2> + +<p>L'operatore di incremento incrementa (aggiunge uno a) il suo operando e restituisce un valore.</p> + +<ul> + <li>Se usato in post posizione, con operatore dopo operando (ad esempio, x ++), restituisce il valore prima di incrementare.</li> + <li>Se usato come prefisso quindi prima dell'operando (ad esempio, ++ x), restituisce il valore dopo l'incremento.</li> +</ul> + +<h3 id="Sintassi_7">Sintassi</h3> + +<pre class="syntaxbox"><strong>Operatore:</strong> x++ or ++x +</pre> + +<h3 id="Esempi_7">Esempi</h3> + +<pre class="brush: js">// Postfix // post posizione +var x = 3; +y = x++; // y = 3, x = 4 + +// Prefix // Prefisso +var a = 2; +b = ++a; // a = 3, b = 3 +</pre> + +<h2 id="Decremento_(--)"><a name="Decrement">Decremento (--)</a></h2> + +<p>L'operatore decrementa decrementa (sottrae uno da) il suo operando e restituisce un valore.</p> + +<ul> + <li>Se usato in post posizione (ad esempio x--), restituisce il valore prima di decrementare.</li> + <li>Se usato come prefisso (ad esempio, --x), restituisce il valore dopo la decrementazione.</li> +</ul> + +<h3 id="Sintassi_8">Sintassi</h3> + +<pre class="syntaxbox"><strong>Operatore:</strong> x-- or --x +</pre> + +<h3 id="Esempi_8">Esempi</h3> + +<pre class="brush: js">// Postfix // post posizione +var x = 3; +y = x--; // y = 3, x = 2 + +// Prefix // Prefisso +var a = 2; +b = --a; // a = 1, b = 1 +</pre> + +<h2 id="Negazione_unaria_(-)"><a name="Unary_negation">Negazione unaria (-)</a></h2> + +<p>L'operatore di negazione unario precede il suo operando e lo nega.</p> + +<h3 id="Sintassi_9">Sintassi</h3> + +<pre class="syntaxbox"><strong>Operatore:</strong> -x +</pre> + +<h3 id="Esempi_9">Esempi</h3> + +<pre><code>var x = 3; +y = -x; // y = -3, x = 3 + +//</code>L'operatore di negazione unario può convertire numeri diversi in un numero<code> +var x = "4"; +y = -x; // y = -4</code></pre> + +<h2 id="Unario_più_()"><a name="Unary_plus">Unario più</a> (+)</h2> + +<p>L'operatore unario più precede il suo operando e valuta il suo operando, ma tenta di convertirlo in un numero, se non lo è già. Anche se la negazione unaria (-) può anche convertire non numeri, unario è il modo più veloce e preferito per convertire qualcosa in un numero, perché non esegue altre operazioni sul numero. È in grado di convertire rappresentazioni di stringa di numeri interi e float, oltre ai valori non stringa <code>true</code> , <code>false</code> e <code>null</code> . Sono supportati i numeri interi decimali ed esadecimali ("0x" -prefixed). I numeri negativi sono supportati (sebbene non per hex). Se non può analizzare un valore particolare, valuterà in <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN">NaN</a>.</p> + +<h3 id="Sintassi_10">Sintassi</h3> + +<pre class="syntaxbox"><strong>Operatore:</strong> +x +</pre> + +<h3 id="Esempi_10">Esempi</h3> + +<pre><code>+3 // 3 ++'3' // 3 ++true // 1 ++false // 0 ++null // 0 ++function(val){ return val } // NaN</code></pre> + +<h2 id="Specificazioni">Specificazioni</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specificazioni</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + <tr> + <td>ECMAScript 1st Edition.</td> + <td>Standard</td> + <td>Definizione iniziale.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.3')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Definito in diverse sezioni della specifica: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.6">Additive operators</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.5">Multiplicative operators</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.3">Postfix expressions</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.4">Unary operators</a>.</td> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-postfix-expressions')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Definito in diverse sezioni della specifica: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-additive-operators">Additive operators</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-multiplicative-operators">Multiplicative operators</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-postfix-expressions">Postfix expressions</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-unary-operators">Unary operators</a>.</td> + </tr> + <tr> + <td>{{SpecName('ES2016', '#sec-postfix-expressions')}}</td> + <td>{{Spec2('ES2016')}}</td> + <td>Aggiunto <a href="https://github.com/rwaldron/exponentiation-operator">Exponentiation operator</a>.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + + + +<p>{{Compat("javascript.operators.arithmetic")}}</p> + +<h2 id="Guarda_anche">Guarda anche</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">Assignment operators</a></li> +</ul> diff --git a/files/it/web/javascript/reference/operators/spread_syntax/index.html b/files/it/web/javascript/reference/operators/spread_syntax/index.html new file mode 100644 index 0000000000..9c300f9257 --- /dev/null +++ b/files/it/web/javascript/reference/operators/spread_syntax/index.html @@ -0,0 +1,257 @@ +--- +title: Spread syntax +slug: Web/JavaScript/Reference/Operators/Spread_syntax +tags: + - ECMAScript 2015 + - Iterator + - JavaScript + - Referenza +translation_of: Web/JavaScript/Reference/Operators/Spread_syntax +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>La <strong>Spread syntax</strong> consente un iterabile come un'espressione di un array o una stringa da espandere in punti in cui sono previsti zero o più argomenti (per chiamate di funzione) o elementi (per letterali di array) o un'espressione di oggetto da espandere in posizioni dove zero o più sono previste coppie di valori (per valori letterali oggetto)..</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-spreadsyntax.html")}}</div> + + + +<h2 id="Sintassi">Sintassi</h2> + +<p>Per chiamate di funzione:</p> + +<pre class="syntaxbox">myFunction(...iterableObj); +</pre> + +<p>Per letterali di un array o stringhe:</p> + +<pre class="syntaxbox">[...iterableObj, '4', 'five', 6];</pre> + +<p>Per gli oggetti letterali (novità in ECMAScript 2018):</p> + +<pre class="syntaxbox">let objClone = { ...obj };</pre> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Spread_nelle_chiamate_delle_funzioni">Spread nelle chiamate delle funzioni</h3> + +<h4 id="Sostituire_apply()">Sostituire <code>apply()</code></h4> + +<p>È comune utilizzare {{jsxref("Function.prototype.apply()")}} nei casi in cui vuoi utilizzare gli elementi di un array come argomenti di una funzione.</p> + +<pre class="brush: js">function myFunction(x, y, z) { } +var args = [0, 1, 2]; +myFunction.apply(null, args);</pre> + +<p>Con la spread syntax può essere scritto come:</p> + +<pre class="brush: js">function myFunction(x, y, z) { } +var args = [0, 1, 2]; +myFunction(...args);</pre> + +<p>Qualsiasi argomento nell'elenco di argomenti può utilizzare la spread syntax e può essere utilizzato più volte.</p> + +<pre class="brush: js">function myFunction(v, w, x, y, z) { } +var args = [0, 1]; +myFunction(-1, ...args, 2, ...[3]);</pre> + +<h4 id="Apply_for_new">Apply for <code>new</code></h4> + +<p>When calling a constructor with {{jsxref("Operators/new", "new")}} it's not possible to <strong>directly</strong> use an array and <code>apply</code> (<code>apply</code> does a <code>[[Call]]</code> and not a <code>[[Construct]]</code>). However, an array can be easily used with <code>new</code> thanks to spread syntax:</p> + +<pre class="brush: js">var dateFields = [1970, 0, 1]; // 1 Jan 1970 +var d = new Date(...dateFields); +</pre> + +<p>To use new with an array of parameters without spread syntax, you would have to do it <strong>indirectly</strong> through partial application:</p> + +<pre class="brush: js">function applyAndNew(constructor, args) { + function partial () { + return constructor.apply(this, args); + }; + if (typeof constructor.prototype === "object") { + partial.prototype = Object.create(constructor.prototype); + } + return partial; +} + + +function myConstructor () { + console.log("arguments.length: " + arguments.length); + console.log(arguments); + this.prop1="val1"; + this.prop2="val2"; +}; + +var myArguments = ["hi", "how", "are", "you", "mr", null]; +var myConstructorWithArguments = applyAndNew(myConstructor, myArguments); + +console.log(new myConstructorWithArguments); +// (internal log of myConstructor): arguments.length: 6 +// (internal log of myConstructor): ["hi", "how", "are", "you", "mr", null] +// (log of "new myConstructorWithArguments"): {prop1: "val1", prop2: "val2"}</pre> + +<h3 id="Spread_in_array_literals">Spread in array literals</h3> + +<h4 id="A_more_powerful_array_literal">A more powerful array literal</h4> + +<p>Without spread syntax, to create a new array using an existing array as one part of it, the array literal syntax is no longer sufficient and imperative code must be used instead using a combination of {{jsxref("Array.prototype.push", "push()")}}, {{jsxref("Array.prototype.splice", "splice()")}}, {{jsxref("Array.prototype.concat", "concat()")}}, etc. With spread syntax this becomes much more succinct:</p> + +<pre class="brush: js">var parts = ['shoulders', 'knees']; +var lyrics = ['head', ...parts, 'and', 'toes']; +// ["head", "shoulders", "knees", "and", "toes"] +</pre> + +<p>Just like spread for argument lists, <code>...</code> can be used anywhere in the array literal and it can be used multiple times.</p> + +<h4 id="Copiare_un_array">Copiare un array</h4> + +<pre class="brush: js">var arr = [1, 2, 3]; +var arr2 = [...arr]; // like arr.slice() +arr2.push(4); + +// arr2 becomes [1, 2, 3, 4] +// arr remains unaffected +</pre> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> La spread syntax diventa effettivamente un livello profondo durante la copia di un array. Pertanto, potrebbe non essere adatto per copiare arrau multidimensionali come mostra il seguente esempio (è lo stesso con {{jsxref("Object.assign()")}} e spread syntax).</p> +</div> + +<pre class="brush: js">var a = [[1], [2], [3]]; +var b = [...a]; +b.shift().shift(); // 1 +// Adesso anche l'array a è influenzato: [[], [2], [3]] +</pre> + +<h4 id="Un_modo_migliore_per_concatenare_gli_array">Un modo migliore per concatenare gli array</h4> + +<p>{{jsxref("Array.prototype.concat()")}} è spesso usato per concatenare un array alla fine di un array esistente. Senza la spread syntax questo è fatto così:</p> + +<pre class="brush: js">var arr1 = [0, 1, 2]; +var arr2 = [3, 4, 5]; +// Append all items from arr2 onto arr1 +arr1 = arr1.concat(arr2);</pre> + +<p>Con la spread syntax questo diventa:</p> + +<pre class="brush: js">var arr1 = [0, 1, 2]; +var arr2 = [3, 4, 5]; +arr1 = [...arr1, ...arr2]; // arr1 is now [0, 1, 2, 3, 4, 5] +</pre> + +<p>{{jsxref("Array.prototype.unshift()")}} è spesso usato per inserire un array di valori all'inizio di un array esistente. Senza la spread syntax questo è fatto così:</p> + +<pre class="brush: js">var arr1 = [0, 1, 2]; +var arr2 = [3, 4, 5]; +// Spostare all'inizio tutti gli elementi da arr2 a arr1 +Array.prototype.unshift.apply(arr1, arr2) // arr1 ora è [3, 4, 5, 0, 1, 2]</pre> + + + +<p>Con la spread syntax questo diventa:</p> + + + +<pre class="brush: js">var arr1 = [0, 1, 2]; +var arr2 = [3, 4, 5]; +arr1 = [...arr2, ...arr1]; // arr1 is now [3, 4, 5, 0, 1, 2] +</pre> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: A differenza di <code>unshift()</code>, questo crea un nuovo <code>arr1</code>, e non modifica l'array originale <code>arr1</code>.</p> +</div> + +<h3 id="Spread_in_object_literals">Spread in object literals</h3> + +<p>The <a href="https://github.com/tc39/proposal-object-rest-spread">Rest/Spread Properties for ECMAScript</a> proposal (stage 4) adds spread properties to <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">object literals</a>. It copies own enumerable properties from a provided object onto a new object.</p> + +<p>Lo Shallow-cloning (escluso il prototipo) o fusione di oggetti è ora possibile usando una sintassi più breve di {{jsxref("Object.assign()")}}.</p> + +<pre class="brush: js">var obj1 = { foo: 'bar', x: 42 }; +var obj2 = { foo: 'baz', y: 13 }; + +var clonedObj = { ...obj1 }; +// Object { foo: "bar", x: 42 } + +var mergedObj = { ...obj1, ...obj2 }; +// Object { foo: "baz", x: 42, y: 13 }</pre> + +<p>Nota che {{jsxref("Object.assign()")}} attiva i <a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">setters</a> mentre la spread syntax non lo fa.</p> + +<p>Nota che non è possibile sostituire o imitare la funzione {{jsxref("Object.assign()")}}:</p> + +<pre class="brush: js">var obj1 = { foo: 'bar', x: 42 }; +var obj2 = { foo: 'baz', y: 13 }; +const merge = ( ...objects ) => ( { ...objects } ); + +var mergedObj = merge ( obj1, obj2); +// Object { 0: { foo: 'bar', x: 42 }, 1: { foo: 'baz', y: 13 } } + +var mergedObj = merge ( {}, obj1, obj2); +// Object { 0: {}, 1: { foo: 'bar', x: 42 }, 2: { foo: 'baz', y: 13 } }</pre> + +<p>Nell'esempio precedente, la spread syntax non funziona come previsto: estende una serie di argomenti nel letterale dell'oggetto, a causa del parametro rest.</p> + +<h3 id="Solo_per_iterabili">Solo per iterabili</h3> + +<p>La spread syntax (diversa dal caso delle spread properties) può essere applicata solo agli oggetti <a href="/docs/Web/JavaScript/Reference/Global_Objects/Symbol/iterator">iterabili</a>:</p> + +<pre class="brush: js">var obj = {'key1': 'value1'}; +var array = [...obj]; // TypeError: obj non è iterabile +</pre> + +<h3 id="Diffusione_con_molti_valori">Diffusione con molti valori</h3> + +<p>Quando si utilizza la sintassi di diffusione per le chiamate di funzione, tenere presente la possibilità di superare il limite di lunghezza dell'argomento del motore JavaScript. Vedi {{jsxref("Function.prototype.apply", "apply()")}} per maggiori dettagli.</p> + +<h2 id="Rest_syntax_(parametri)">Rest syntax (parametri)</h2> + +<p>La Rest syntax sembra esattamente come la spread syntax, ma è usata per destrutturare array e oggetti. In un certo senso, la Rest syntax è l'opposto della spread syntax: spread 'espande' un array nei suoi elementi, mentre la rest syntax raccoglie più elementi e li 'condensa' in un singolo elemento. Vedi <a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/rest_parameters">rest parameters.</a></p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES2015', '#sec-array-initializer')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Definito in diverse sezioni della specifica: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-array-initializer">Array Initializer</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-argument-lists">Argument Lists</a></td> + </tr> + <tr> + <td>{{SpecName('ES2018', '#sec-object-initializer')}}</td> + <td>{{Spec2('ES2018')}}</td> + <td>Definito in <a href="http://www.ecma-international.org/ecma-262/9.0/#sec-object-initializer">Object Initializer</a></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array-initializer')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Nessun cambiamento.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object-initializer')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Nessun cambiamento.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + + + +<p>{{Compat("javascript.operators.spread")}}</p> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/rest_parameters">Rest parameters</a> (anche ‘<code>...</code>’)</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply">fn.apply</a> (anche ‘<code>...</code>’)</li> +</ul> diff --git a/files/it/web/javascript/reference/operators/super/index.html b/files/it/web/javascript/reference/operators/super/index.html new file mode 100644 index 0000000000..aee5f694b1 --- /dev/null +++ b/files/it/web/javascript/reference/operators/super/index.html @@ -0,0 +1,181 @@ +--- +title: super +slug: Web/JavaScript/Reference/Operators/super +translation_of: Web/JavaScript/Reference/Operators/super +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>La parola chiave <strong>super</strong> viene usata per chiamare le funzioni dell'oggetto padre.</p> + +<p>Il <code>super.prop</code> ed espressioni con <code>super[expr]</code> sono valide in ogni <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">definizione di metodo</a> sia nelle <a href="/en-US/docs/Web/JavaScript/Reference/Classes">classi</a> e <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">oggetti literals</a>.</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox">super([arguments]); // chiama il costruttore padre. +super.functionOnParent([arguments]); +</pre> + +<h2 id="Descrizione">Descrizione</h2> + +<p>Quando viene usata in un costruttore, la parola chiave <code>super</code> deve essere usata prima della parola chiave <code>this</code>. La parola chiave <code>super</code> può essere usata anche per chiamare funzioni dell'oggetto padre.</p> + +<h2 id="Esempio">Esempio</h2> + +<h3 id="Usare_super_nelle_classi">Usare <code>super</code> nelle classi</h3> + +<p>Questo pezzo di codice è preso da <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">classes sample</a> (<a href="https://googlechrome.github.io/samples/classes-es6/index.html">live demo</a>). <code>super</code> è chiamato per evitare la duplicazione del codice comune ad entrambi i costruttori <code>Rectangle</code> e <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">Square</span></font>.</p> + +<pre class="brush: js">class Polygon { + constructor(height, width) { + this.name = 'Polygon'; + this.height = height; + this.width = width; + } + sayName() { + console.log('Hi, I am a ', this.name + '.'); + } +} + +class Square extends Polygon { + constructor(length) { + this.height; // ReferenceError, super deve essere chiamato per primo! + + // Chiama il costruttore della classe padre + super(length, length); + + // Nota: Nelle classi derivate super() deve essere chiamato prima + // dell'uso di 'this'. + this.name = 'Square'; + } + + get area() { + return this.height * this.width; + } + + set area(value) { + this.area = value; + } +}</pre> + +<h3 id="Usare_super_con_metodi_statici">Usare <code>super</code> con metodi statici</h3> + +<p>Puoi usare super anche chiamare metodi <a href="/en-US/docs/Web/JavaScript/Reference/Classes/static">statici</a>.</p> + +<pre class="brush: js"><code>class Rectangle { + constructor() {} + static logNbSides() { + return 'I have 4 sides'; + } +} + +class Square extends Rectangle { + constructor() {} + static logDescription() { + return super.logNbSides() + ' which are all equal'; + } +} +Square.logDescription(); // 'I have 4 sides which are all equal'</code></pre> + +<h3 id="Cancellare_una_proprietà_del_super_causa_eccezione">Cancellare una proprietà del super causa eccezione</h3> + +<p>Non puoi cancellare una proprietà della classe padre usando l' <a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete">operatore delete</a> e <code>super.prop</code> o <code>super[esperssione]</code>, questo causerà un {{jsxref("ReferenceError")}}.</p> + +<pre class="brush: js">class Base { + constructor() {} + foo() {} +} +class Derived extends Base { + constructor() {} + delete() { + delete super.foo; + } +} + +new Derived().delete(); // ReferenceError: uso della delete con 'super'. </pre> + +<h3 id="Super.prop_non_può_sovrascrivere_proprietà_non_scrivibili"><code>Super.prop</code> non può sovrascrivere proprietà non scrivibili</h3> + +<p>Quando si definisce una proprietà non riscrivibile con ad esempio {{jsxref("Object.defineProperty")}}, <code>super</code> non può modificarne il valore.</p> + +<pre class="brush: js"><code>class X { + constructor() { + Object.defineProperty(this, 'prop', { + configurable: true, + writable: false, + value: 1 + }); + } +} + +class Y extends X { + constructor() { + super(); + } + foo() { + super.prop = 2; // Non posso sovrascrivere il valore. + } +} + +var y = new Y(); +y.foo(); // TypeError: "prop" is read-only +console.log(y.prop); // 1</code></pre> + +<h3 id="Uso_di_super.prop_in_oggetti_literals">Uso di <code>super.prop</code> in oggetti literals</h3> + +<p>Super può essere utilizzato anche nella <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">initializzazione di oggetti</a> con notazione letterale. In questo esempio, due oggetti definiscono un metodo. Nel secondo oggetto, <code>super</code> chiama il metodo del primo oggetto. Questo funziona grazie all'aiuto di {{jsxref("Object.setPrototypeOf()")}} con cui siamo in grado di impostare il prototipo di <code>obj2</code> con l'oggetto <code>obj1</code>, in modo che <code>super</code> sia in grado di trovare <code>method1</code> in <code>obj1</code>.</p> + +<pre class="brush: js">var obj1 = { + method1() { + console.log("method 1"); + } +} + +var obj2 = { + method2() { + super.method1(); + } +} + +Object.setPrototypeOf(obj2, obj1); +obj2.method2(); // logs "method 1" +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-super-keyword', 'super')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-super-keyword', 'super')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibili">Browser compatibili</h2> + +<p>{{Compat("javascript.operators.super")}}</p> + +<div id="compat-desktop"></div> + +<h2 id="Gecko_specific_notes">Gecko specific notes</h2> + +<ul> + <li><code>super()</code> non funziona come previsto in prototipi built-in.</li> +</ul> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Classes">Classi</a></li> +</ul> diff --git a/files/it/web/javascript/reference/operators/this/index.html b/files/it/web/javascript/reference/operators/this/index.html new file mode 100644 index 0000000000..cd324d2bcf --- /dev/null +++ b/files/it/web/javascript/reference/operators/this/index.html @@ -0,0 +1,410 @@ +--- +title: this +slug: Web/JavaScript/Reference/Operators/this +translation_of: Web/JavaScript/Reference/Operators/this +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>La <strong>keyword</strong> <strong>di</strong> <strong>funzione <code>this</code> </strong>si comporta in modo leggermente differente in JavaScript rispetto ad altri linguaggi. Esistono inoltre alcune differenze tra <a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode">strict mode</a> e non-strict mode.</p> + +<p>Nella maggior parte dei casi, il valore di <code>this</code> è determinato da come la funzione viene invocata (chiamata). Il valore di <code>this</code> non può essere impostato per assegnamento durante l'esecuzione, e potrebbe essere differente ogni volta in cui la funzione viene chiamata. ES5 ha introdotto il metodo <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">bind</a></code> per <a href="#The_bind_method">impostare il valore di <code>this</code> indipendentemente da come la funzione è invocata</a>. ECMAScript 2015 ha introdotto <a href="https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Functions/Arrow_functions">le funzione a freccia ( arrow function )</a>, in cui la keyword <code>this </code>viene lessicalmente incorporata nello <em>scope</em> corrente ( <code>lo scope </code>del contesto di esecuzione relativo al blocco corrente<code> ). </code></p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox">this</pre> + +<h2 id="Contesto_Globale">Contesto Globale</h2> + +<p>Nel contesto di esecuzione globale (fuori da qualsiasi funzione), <code>this</code> si riferisce all'oggetto globale, sia che ci si trovi in strict mode, sia che ci si trovi in non-strict mode.</p> + +<pre class="brush:js">console.log(this.document === document); // true + +// In web browsers, the window object is also the global object: +console.log(this === window); // true + +this.a = 37; +console.log(window.a); // 37 +</pre> + +<h2 id="Contesto_di_funzione">Contesto di funzione</h2> + +<p>All'interno di una funzione, il valore di <code>this</code> dipende da come la funzione è invocata.</p> + +<h3 id="Chiamata_semplice">Chiamata semplice</h3> + +<pre class="brush:js">function f1(){ + return this; +} + +f1() === window; // global object +</pre> + +<p>In questo caso, il valore di <code>this</code> non viene impostato dalla chiamata. Visto che il codice non è in strict mode, il valore di <code>this</code> deve sempre essere un oggetto quindi viene impostato di default sull'oggetto globale.</p> + +<pre class="brush:js">function f2(){ + "use strict"; // see strict mode + return this; +} + +f2() === undefined; +</pre> + +<p>In strict mode, il valore di <code>this</code> rimane impostato sul valore definito al momento dell'ingresso nel contesto di esecuzione. Se non è definito, resta undefined. Può anche essere impostato a qualsiasi valore, come <code>null</code> o <code>42</code> o <code>"I am not this"</code>.</p> + +<div class="note"><strong>Nota:</strong> Nel secondo esempio, <code>this</code> dovrebbe essere <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined"><code>undefined</code></a>, perchè <code>f2</code> viene invocata senza specificare alcuna base (per esempio, <code>window.f2()</code>). Alcuni browser non hanno implementato questo orientamento, quando hanno deciso di supportare lo <a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode" title="Strict mode">strict mode</a>. Come risultato, questi browser restituivano, in modo non corretto, l'oggetto <code>window</code>.</div> + +<h3 id="Funzioni_Arrow">Funzioni Arrow</h3> + +<p>Nelle <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">funzioni arrow</a>, <code>this</code> è assegnato lessicalmente, assume cioè il valore del contesto di esecuzione che contiene <code>this.</code> In codice globale punta all'oggetto globale:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> globalObject <span class="operator token">=</span> <span class="keyword token">this</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> foo <span class="operator token">=</span> <span class="punctuation token">(</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="operator token">=</span><span class="operator token">></span> <span class="keyword token">this</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="function token">foo</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="operator token">===</span> globalObject<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// true</span></code></pre> + +<p>Non importa come <code>foo</code> sia invocato, <code>this</code> punterà all'oggetto globale. Questo è ancora valido se è chiamato come metodo di un oggetto (che solitamente punterebbe il valore di <code>this</code> sullo stesso) tramite chiamate dei metodi <code>call</code> o <code>apply</code> o <code>bind</code></p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="comment token">// Call as a method of an object</span> +<span class="keyword token">var</span> obj <span class="operator token">=</span> <span class="punctuation token">{</span>foo<span class="punctuation token">:</span> foo<span class="punctuation token">}</span><span class="punctuation token">;</span> +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>obj<span class="punctuation token">.</span><span class="function token">foo</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="operator token">===</span> globalObject<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// true</span> + +<span class="comment token">// Attempt to set this using call</span> +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>foo<span class="punctuation token">.</span><span class="function token">call</span><span class="punctuation token">(</span>obj<span class="punctuation token">)</span> <span class="operator token">===</span> globalObject<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// true</span> + +<span class="comment token">// Attempt to set this using bind</span> +foo <span class="operator token">=</span> foo<span class="punctuation token">.</span><span class="function token">bind</span><span class="punctuation token">(</span>obj<span class="punctuation token">)</span><span class="punctuation token">;</span> +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="function token">foo</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="operator token">===</span> globalObject<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// true</span></code></pre> + +<p>in ogni caso il valore di this all'interno di foo è impostato al valore di quando è stato creato (nell'esempio di sopra, l'oggetto globale). Lo stesso si applica per funzioni arrow create all'interno di altre funzioni: il loro valore di this è impostato a quello del contesto di esecuzione esterno.</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="comment token">// Create obj with a method bar that returns a function that</span> +<span class="comment token">// returns its this. The returned function is created as </span> +<span class="comment token">// an arrow function, so its this is permanently bound to the</span> +<span class="comment token">// this of its enclosing function. The value of bar can be set</span> +<span class="comment token">// in the call, which in turn sets the value of the </span> +<span class="comment token">// returned function.</span> +<span class="keyword token">var</span> obj <span class="operator token">=</span> <span class="punctuation token">{</span> bar <span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">var</span> x <span class="operator token">=</span> <span class="punctuation token">(</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="operator token">=</span><span class="operator token">></span> <span class="keyword token">this</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">return</span> x<span class="punctuation token">;</span> + <span class="punctuation token">}</span> + <span class="punctuation token">}</span><span class="punctuation token">;</span> + +<span class="comment token">// Call bar as a method of obj, setting its this to obj</span> +<span class="comment token">// Assign a reference to the returned function to fn</span> +<span class="keyword token">var</span> fn <span class="operator token">=</span> obj<span class="punctuation token">.</span><span class="function token">bar</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="comment token">// Call fn without setting this, would normally default</span> +<span class="comment token">// to the global object or undefined in strict mode</span> +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="function token">fn</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="operator token">===</span> obj<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// true</span></code></pre> + +<p>Nel codice sopra, la funzione (chiamiamola funzione anonima A) assegnata a obj.bar restituisce un altra funzione (chiamiamola funzione anonima B) che viene creata come funzione arrow. Il risultato, è che this della funzione B è impostata permanentemente al valore di this di obj.bar (funzione A) quando viene chiamata. quando la funzione restituita (B) viene chiamata, il relativo this sarà sempre impostato al valore di partenza. Nel codice di esempio il this della funzione B è impostato al valore this della funzione A che è obj, pertanto resta impostato ad obj anche quando viene chiamato in un modo che imposterebbe this come undefined od oggetto globale (o qualunque altro metodo, come nel precedente esempio, nel contesto di esecuzione globale).</p> + +<p>In the above, the function(call it anonymous function A) assigned to <code>obj.bar</code> returns another function(call it anonymous function B) that is created as an arrow function. As a result, function B's <code>this</code> is permanently set to the <code>this</code> of <code>obj.bar</code> (function A)when called. When the returned function(function B) is called, its <code>this</code> will always be what it was set to initially. In the above code example, function B's <code>this</code> is set to function A's <code>this</code> which is obj, so it remains set to <code>obj</code> even when called in a manner that would normally set its <code>this</code> to <code>undefined</code> or the global object (or any other method as in the previous example in the global execution context).</p> + +<h3 id="Come_metodo_di_un_oggetto">Come metodo di un oggetto</h3> + +<p>Quando una funzione viene invocata come metodo di un oggetto, il <code>this</code>, all'interno della funzione, viene impostato sull'oggetto di cui la funzione è metodo.</p> + +<p>Nell'esempio seguente, quando <code>o.f()</code> viene invocata, all'interno della funzione <code>this</code> è associato all'oggetto <code>o</code>.</p> + +<pre class="brush:js">var o = { + prop: 37, + f: function() { + return this.prop; + } +}; + +console.log(o.f()); // logs 37 +</pre> + +<p>Da notare che questo comportamento non è per nulla influenzato dal come e dal dove la funzione sia stata definita. Nell'esempio precedente, abbiamo definito la funzione inline, come membro <code>f</code>, nel corso della definizione di <code>o</code>. Tuttavia, avremmo potuto facilmente definire la funzione prima, per poi associarla a <code>o.f</code>. Il risultato sarebbe stato lo stesso:</p> + +<pre class="brush:js">var o = {prop: 37}; + +function independent() { + return this.prop; +} + +o.f = independent; + +console.log(o.f()); // logs 37 +</pre> + +<p>Questo dimostra che la cosa più importante è che la funzione venga invocata dal membro<code> f</code> di <code>o</code>.</p> + +<p>In modo analogo, l'associazione di <code>this</code> è influenzata solo dal membro più vicino. Nell'esempio seguente, quando invochiamo la funzione, la invochiamo come metodo <code>g</code> dell'oggetto <code>o.b</code>. Questa volta, durante l'esecuzione, <code>this</code>, all'interno della funzione, sarà associata ad <code>o.b</code>. Il fatto che l'oggetto sia, esso stesso, un membro di <code>o</code> non ha alcuna conseguenza; la sola cosa che conti è il riferimento più immediato.</p> + +<pre class="brush:js">o.b = {g: independent, prop: 42}; +console.log(o.b.g()); // logs 42 +</pre> + +<h4 id="this_nella_prototype_chain_dell'oggetto"><code>this</code> nella prototype chain dell'oggetto</h4> + +<p>La stessa notazione è valida per i metodi definiti altrove nella prototype chain dell'oggetto. Se il metodo è sulla prototype chain di un oggetto, <code>this</code> si riferisce all'oggetto su cui il metodo è stato chiamato, come se il metodo appartenesse all'oggetto.</p> + +<pre class="brush:js">var o = {f:function(){ return this.a + this.b; }}; +var p = Object.create(o); +p.a = 1; +p.b = 4; + +console.log(p.f()); // 5 +</pre> + +<p>in questo esempio, l'oggetto assegnato alla variabile <code>p</code> non ha definita una proprietà <code>f</code>, la eredita dal suo prototipo. Non ha importanza che il controllo per <code>f</code> trovi eventualmente un membro con quel nome in <code>o</code>; il controllo è cominciato con un riferimento a <code>p.f</code>, quindi this all'interno della funzione assume il valore dell'oggetto a cui <code>p</code> si riferisce. Cioè, dal momento che <code>f</code> è chiamata come metodo di <code>p</code>, la parola chiave <code>this</code> al suo interno si riferisce a <code>p</code>. Questa è una interessante caratteristica dell'ereditarietà dei prototipi di javascript.</p> + +<h4 id="this_all'interno_di_metodi_getter_o_setter"><code>this</code> all'interno di metodi getter o setter</h4> + +<p>Ancora, la stessa notazione è valida quando una funzione è invocata all'interno di metodi get o set. In una funzione usata come getter o setter <code>this</code> viene collegata all'oggetto dal quale la proprietà è settata o ricavata.</p> + +<pre class="brush:js">function modulus(){ + return Math.sqrt(this.re * this.re + this.im * this.im); +} + +var o = { + re: 1, + im: -1, + get phase(){ + return Math.atan2(this.im, this.re); + } +}; + +Object.defineProperty(o, 'modulus', { + get: modulus, enumerable:true, configurable:true}); + +console.log(o.phase, o.modulus); // logs -0.78 1.4142 +</pre> + +<h3 id="Come_costruttore">Come costruttore</h3> + +<p>Quando una funzione è usata come un costruttore (tramite la parola chiave <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/new">new</a></code>), <code>this</code> è collegata al nuovo oggetto che viene costruito.</p> + +<p>Nota: mentre di default un costruttore restituisce l'oggetto riferenziato da <code>this</code>, può invece restituire qualche altro oggetto (se il valore di ritorno non è un oggetto, allora viene restituito l'oggetto <code>this</code>).</p> + +<pre class="brush:js">/* + * Constructors work like this: + * + * function MyConstructor(){ + * // Actual function body code goes here. + * // Create properties on |this| as + * // desired by assigning to them. E.g., + * this.fum = "nom"; + * // et cetera... + * + * // If the function has a return statement that + * // returns an object, that object will be the + * // result of the |new| expression. Otherwise, + * // the result of the expression is the object + * // currently bound to |this| + * // (i.e., the common case most usually seen). + * } + */ + +function C(){ + this.a = 37; +} + +var o = new C(); +console.log(o.a); // logs 37 + + +function C2(){ + this.a = 37; + return {a:38}; +} + +o = new C2(); +console.log(o.a); // logs 38 +</pre> + +<p>Nell'ultimo esempio <code>(C2)</code>, dal momento che è stato restituito un oggetto durante la costruzione, il nuovo oggetto a cui <code>this</code> era collegato viene semplicemente scartato. (Questo rende essenzialmente l'assegnazione "<code>this.a = 37;</code>" codice inutile. Non lo è in senso stretto, in quanto viene eseguito, ma può essere eliminato senza conseguenze).</p> + +<h3 id="I_metodi_call_e_apply">I metodi <code>call</code> e <code>apply</code></h3> + +<p>Dove una funzione usa la parola chiave <code>this</code>, il suo valore può essere collegato ad un qualsivoglia oggetto nella chiamata usando i metodi <code><a href="/it/docs/">call</a></code> o <code><a href="/it/docs/">apply</a></code><a href="/it/docs/"> </a>che tutte le funzioni ereditano da <code>Function.prototype</code>.<a href="/it/docs/"> </a></p> + +<pre class="brush:js">function add(c, d){ + return this.a + this.b + c + d; +} + +var o = {a:1, b:3}; + +// The first parameter is the object to use as +// 'this', subsequent parameters are passed as +// arguments in the function call +add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16 + +// The first parameter is the object to use as +// 'this', the second is an array whose +// members are used as the arguments in the function call +add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34 +</pre> + +<p>Notare che con <code>call</code> e <code>apply</code>, se il valore passato tramite <code>this</code> non è un oggetto, viene eseguito un tentativo di convertire tale valore in oggetto usando l'operazione interna <code>ToObject</code>. pertanto, se il valore passato è un primitivo come 7 o 'foo', questo verrà convertito ad <code>Object</code> usando il relativo costruttore, quindi il valore primitivo <code>7</code> viene convertito come <code>new</code> <code>Number(7)</code> e la stringa <code>'foo'</code> viene convertita come <code>new String('foo')</code>, per esempio:</p> + +<pre class="brush:js">function bar() { + console.log(Object.prototype.toString.call(this)); +} + +bar.call(7); // [object Number] +</pre> + +<h3 id="Il_metodo_bind">Il metodo <code>bind</code></h3> + +<p>ECMAScript 5 ha introdotto <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">Function.prototype.bind</a></code>. Chiamare <code>f.bind(someObject)</code> crea una nuova funzione con lo stesso corpo e visibità di <code>f,</code> ma nella funzione originale si trova la parola chiave <code>this</code>, nella nuova funzione viene permanentemente collegato al primo argomento passato alla chiamata del metodo <code>bind</code>, ignorando come la funzione stessa venga usata. </p> + +<pre class="brush:js">function f(){ + return this.a; +} + +var g = f.bind({a:"azerty"}); +console.log(g()); // azerty + +var o = {a:37, f:f, g:g}; +console.log(o.f(), o.g()); // 37, azerty +</pre> + +<h3 id="Come_handler_degli_eventi_del_DOM">Come handler degli eventi del DOM</h3> + +<p>Quando una funzione viene usata come handler di eventi, i suoi riferimenti <code>this</code> sono puntati all'elemento che ha originato l'evento (alcuni Browser non seguono queste convenzioni per i listeners agguinti dinamicamente tramite metodi diversi da <code>addEventListener</code>).</p> + +<pre class="brush:js">// When called as a listener, turns the related element blue +function bluify(e){ + // Always true + console.log(this === e.currentTarget); + // true when currentTarget and target are the same object + console.log(this === e.target); + this.style.backgroundColor = '#A5D9F3'; +} + +// Get a list of every element in the document +var elements = document.getElementsByTagName('*'); + +// Add bluify as a click listener so when the +// element is clicked on, it turns blue +for(var i=0 ; i<elements.length ; i++){ + elements[i].addEventListener('click', bluify, false); +}</pre> + +<h3 id="In_un_handler_di_eventi_in-line">In un handler di eventi "in-line"</h3> + +<p>quando il codice è chiamato da un handler in-line, <code>this</code> punta all'elemento DOM sul quale il listener è posizionato:</p> + +<p>When code is called from an in–line handler, its <code>this</code> is set to the DOM element on which the listener is placed:</p> + +<pre class="brush:js"><button onclick="alert(this.tagName.toLowerCase());"> + Show this +</button> +</pre> + +<p>Sopra, <code>alert</code> mostra '<code>button</code>'. Notare comunque che this assume tale valore solo al di fuori di una funzione:</p> + +<p> </p> + +<pre class="brush:js"><button onclick="alert((function(){return this}()));"> + Show inner this +</button> +</pre> + +<p> </p> + +<p>in questo caso, nella funzione interna, <code>this</code> non punta all'elemento DOM quindi restituisce l'oggetto globale/window (cioè l'oggetto di default in modalità non-strict, in cui <code>this</code> non viene impostato dalla chiamata)</p> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-this-keyword', 'The this keyword')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-this-keyword', 'The this keyword')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.1.1', 'The this keyword')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-11.1.1', 'The this keyword')}}</td> + <td>{{Spec2('ES3')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-11.1.1', 'The this keyword')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + </tbody> +</table> + +<p> </p> + +<h2 id="Compatibilità_dei_browser">Compatibilità dei browser</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p> </p> + +<h2 id="Vedere_Anche">Vedere Anche</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode">Strict mode</a></li> + <li><a href="http://bjorn.tipling.com/all-this">All this</a>, un articolo su <code>this</code> in diversi contesti (Inglese)</li> + <li><a href="http://rainsoft.io/gentle-explanation-of-this-in-javascript/">Semplice spiegazione della parola chiave 'this' in JavaScript (inglese)</a></li> +</ul> diff --git a/files/it/web/javascript/reference/operators/yield/index.html b/files/it/web/javascript/reference/operators/yield/index.html new file mode 100644 index 0000000000..cd7fe6adfa --- /dev/null +++ b/files/it/web/javascript/reference/operators/yield/index.html @@ -0,0 +1,163 @@ +--- +title: yield +slug: Web/JavaScript/Reference/Operators/yield +translation_of: Web/JavaScript/Reference/Operators/yield +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>La parola chiave <em>yield </em>è usata per mettere in pausa e far ripartire un generatore di funzione ({{jsxref("Statements/function*", "function*")}} or <a href="/en-US/docs/Web/JavaScript/Reference/Statements/Legacy_generator_function">legacy generator function</a>).</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox">[<em>rv</em>] = <strong>yield</strong> [<em>expression</em>];</pre> + +<dl> + <dt><code>espressione</code></dt> + <dd>Definisce il valore da ritornare dalla funzione generatore attraverso <a href="/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#iterator">the iterator protocol</a>. Se omesso, <code>undefined</code> viene restituito.</dd> + <dt><code>rv</code></dt> + <dd>Permette che il generatore catturi il valore dell'espressione per usarlo al prossimo avvio dell'esecuzione.</dd> +</dl> + +<h2 id="Descrizione">Descrizione</h2> + +<p>The <code>yield</code> keyword causes generator function execution to pause and the value of the expression following the <code>yield</code> keyword is returned to the generator's caller. It can be thought of as a generator-based version of the <code>return</code> keyword.</p> + +<p>The <code>yield</code> keyword actually returns an <code>IteratorResult</code> object with two properties, <code>value</code> and <code>done</code>. The <code>value</code> property is the result of evaluating the <code>yield</code> expression, and <code>done</code> is a Boolean indicating whether or not the generator function has fully completed.</p> + +<p>Once paused on a <code>yield</code> expression, the generator's code execution remains paused until the generator's <code>next()</code> method is called. Each time the generator's <code>next()</code> method is called, the generator resumes execution and runs until it reaches one of the following:</p> + +<ul> + <li> A <code>yield</code>, which causes the generator to once again pause and return the generator's new value. The next time <code>next()</code> is called, execution resumes with the statement immediately after the <code>yield</code>.</li> + <li>{{jsxref("Statements/throw", "throw")}} is used to throw an exception from the generator. This halts execution of the generator entirely, and execution resumes in the caller as is normally the case when an exception is thrown.</li> + <li>The end of the generator function is reached; in this case, execution of the generator ends and an <code>IteratorResult</code> is returned to the caller in which the <code>value</code> is {{jsxref("undefined")}} and <code>done</code> is <code>true</code>.</li> + <li>A {{jsxref("Statements/return", "return")}} statement is reached. In this case, execution of the generator ends and an <code>IteratorResult</code> is returned to the caller in which the <code>value</code> is the value specified by the <code>return</code> statement and <code>done</code> is <code>true</code>.</li> +</ul> + +<p>If an optional value is passed to the generator's <code>next()</code> method, that value becomes the value returned by the generator's next <code>yield</code> operation.</p> + +<p>Between the generator's code path, its <code>yield</code> operators, and the ability to specify a new starting value by passing it to {{jsxref("Generator.prototype.next()")}}, generators offer enormous power and control.</p> + +<h2 id="Examples">Examples</h2> + +<p>The following code is the declaration of an example generator function, along with a helper function.</p> + +<pre class="brush: js">function* foo(){ + var index = 0; + while (index <= 2) // when index reaches 3, + // yield's done will be true + // and its value will be undefined; + yield index++; +}</pre> + +<p>Once a generator function is defined, it can be used by constructing an iterator as shown.</p> + +<pre class="brush: js">var iterator = foo(); +console.log(iterator.next()); // { value: 0, done: false } +console.log(iterator.next()); // { value: 1, done: false } +console.log(iterator.next()); // { value: 2, done: false } +console.log(iterator.next()); // { value: undefined, done: true }</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES2015', '#', 'Yield')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>39</td> + <td>{{CompatGeckoDesktop("26.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>IteratorResult</code> object instead of throwing</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("29.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("26.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{ CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>IteratorResult</code> object instead of throwing</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("29.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Firefox-specific_notes">Firefox-specific notes</h2> + +<ul> + <li>Starting with Gecko 29 {{geckoRelease(29)}}, the completed generator function no longer throws a {{jsxref("TypeError")}} "generator has already finished". Instead, it returns an <code>IteratorResult</code> object like <code>{ value: undefined, done: true }</code> ({{bug(958951)}}).</li> + <li>Starting with Gecko 33 {{geckoRelease(33)}}, the parsing of the <code>yield</code> expression has been updated to conform with the latest ES2015 specification ({{bug(981599)}}): + <ul> + <li>The expression after the <code>yield</code> keyword is optional and omitting it no longer throws a {{jsxref("SyntaxError")}}: <code>function* foo() { yield; }</code></li> + </ul> + </li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol">The Iterator protocol</a></li> + <li>{{jsxref("Statements/function*", "function*")}}</li> + <li>{{jsxref("Operators/function*", "function* expression")}}</li> + <li>{{jsxref("Operators/yield*", "yield*")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/statements/break/index.html b/files/it/web/javascript/reference/statements/break/index.html new file mode 100644 index 0000000000..8799911ff9 --- /dev/null +++ b/files/it/web/javascript/reference/statements/break/index.html @@ -0,0 +1,130 @@ +--- +title: break +slug: Web/JavaScript/Reference/Statements/break +translation_of: Web/JavaScript/Reference/Statements/break +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>Lo <strong>statement break </strong>interrompe il loop corrente, termina uno statement {{jsxref("Statements/switch", "switch")}}, o trasferisce l'esecuzione verso un {{jsxref("Statements/label", "label")}} .</p> + +<div>{{EmbedInteractiveExample("pages/js/statement-break.html")}}</div> + + + +<h2 id="Sinstassi">Sinstassi</h2> + +<pre class="syntaxbox notranslate"><code>break [<em>label</em>];</code></pre> + +<dl> + <dt><code>label</code> {{optional_inline}}</dt> + <dd>Identificatore che può essere anche associato ad una {{jsxref("Statements/label", "label")}}. Se lo statement non è un loop o uno {{jsxref("Statements/switch", "switch")}}, il label è necessario.</dd> +</dl> + +<h2 id="Descrizione">Descrizione</h2> + +<p>Lo statement <code>break</code> può contenere un parametro opzionale ({{jsxref("Statements/label", "label")}}) che impone al programma di interrompere l'esecuzione e saltare ad un determinato punto nel programma, indicato dalla label stessa. La label può anche essere uno degli statement jsxref("Statements/block", "block")}}; e non dovrà essere preceduto da uno statement loop.<br> + Uno statement <code>break</code>, con o senza label opzionale, non può essere usato nel corpo di una funzione innestata in un loop o uno switch, poichè quando verrà eseguito <code>break</code> il programma verrà terminato insieme al loop o allo switch.</p> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="break_in_un_while_loop">break in un while loop</h3> + +<p>La seguente funzione contiene uno statement <code>break</code> che interromperà il {{jsxref("Statements/while", "while")}} loop quando la variabile <code>i</code> avrà valore 3, quindi restituirà il valore di 3 * <code>x</code>.</p> + +<pre class="brush:js;highlight:[6]; notranslate">function testBreak(x) { + var i = 0; + + while (i < 6) { + if (i == 3) { + break; + } + i += 1; + } + + return i * x; +}</pre> + +<h3 id="break_in_labeled_blocks">break in labeled blocks</h3> + +<p>Il seguente codice usa lo statement <code>break</code> con un blocco definito da una {{jsxref("Statements/label", "label")}}. Lo stetement <code>break</code> deve essere innestato all'interno di qualsiasi label a cui fa riferimento. Nota che <code>inner_block</code> è innestato dentro <code>outer_block</code>.</p> + +<pre class="brush:js;highlight:[1,2,4]; notranslate">outer_block: { + inner_block: { + console.log('1'); + break outer_block; // esce sia da inner_block che da outer_block + console.log(':-('); // non viene eseguito + } + console.log('2'); // non viene eseguito +} +</pre> + +<h3 id="break_in_labeled_blocks_che_genera_un_errore">break in labeled blocks che genera un errore</h3> + +<p>Il codice seguente usa lo statement <code>break</code> nei labeled block, ma genera un <code>SyntaxError</code> poichè il <code>break</code> è all'interno del <code>block_1</code> ma fa riferimento a <code>block_2</code>. Uno statement <code>break</code> deve sempre essere innestato all'interno dei blocchi a cui si riferiscono i {{jsxref("Statements/label", "label")}}.</p> + +<pre class="brush:js;highlight:[1,3,6]; notranslate">block_1: { + console.log('1'); + break block_2; // SyntaxError: label not found +} + +block_2: { + console.log('2'); +} +</pre> + +<h3 id="break_allinterno_di_funzioni">break all'interno di funzioni</h3> + +<p>Verranno generati <code>SyntaxError</code> anche nei seguenti esempi di codice dove viene usato lo stetement <code>break</code> all'interno di funzioni che sono innestate nei cicli loop, oppure all'interno di funzioni innestate in labeled block, per cui lo stetemen <code>break</code> si intende come stop all'esecuzione e uscita.</p> + +<pre class="brush:js;highlight:[1,3,6]; notranslate">function testBreak(x) { + var i = 0; + + while (i < 6) { + if (i == 3) { + (function() { + break; + })(); + } + i += 1; + } + +return i * x; +} + +testBreak(1); // SyntaxError: Illegal break statement +</pre> + +<pre class="brush:js;highlight:[1,3,6]; notranslate">block_1: { + console.log('1'); + ( function() { + break block_1; // SyntaxError: Undefined label 'block_1' + })(); +} +</pre> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifiche</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-break-statement', 'Break statement')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_dei_Browser">Compatibilità dei Browser</h2> + + + +<p>{{Compat("javascript.statements.break")}}</p> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>{{jsxref("Statements/continue", "continue")}}</li> + <li>{{jsxref("Statements/label", "label")}}</li> + <li>{{jsxref("Statements/switch", "switch")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/statements/empty/index.html b/files/it/web/javascript/reference/statements/empty/index.html new file mode 100644 index 0000000000..bb10fd7165 --- /dev/null +++ b/files/it/web/javascript/reference/statements/empty/index.html @@ -0,0 +1,102 @@ +--- +title: empty +slug: Web/JavaScript/Reference/Statements/Empty +translation_of: Web/JavaScript/Reference/Statements/Empty +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>Un <strong>empty statement</strong> (istruzione vuota) è utilizzato per evitare di inserire uno statement nel caso in cui la sintassi JavaScript ne richieda uno.</p> + +<div>{{EmbedInteractiveExample("pages/js/statement-empty.html")}}</div> + +<p class="hidden">Il sorgente per questo esempio interattivo è immagazzinato in un repository GitHub. Se vuoi contribuire al progeeto degli esempi interattivi, clona <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> e inviaci una pull request.</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox">; +</pre> + +<h2 id="Descrizione">Descrizione</h2> + +<p>L'empty statement è un punto e virgola (;) che indica che nessuno statement sarà eseguito, nonostante la sintassi JavaScript ne richieda uno. Il comportamento opposto, quando vuoi eseguire più statement ma JavaScript ne consente uno solo, è reso possibile dall'utilizzo di un<a href="/en-US/docs/Web/JavaScript/Reference/Statements/block"> block statement</a>; esso ne combina diversi in un singolo statement .</p> + +<h2 id="Esempi">Esempi</h2> + +<p>L'empty statement è utilizzato talvolta con i loop statements. Guarda l'esempio seguente con un copro del loop vuoto:</p> + +<pre class="brush: js">var arr = [1, 2, 3]; + +// Assegna il valore 0 a tutti gli elementi dell'array +for (i = 0; i < arr.length; arr[i++] = 0) /* empty statement */ ; + +console.log(arr) +// [0, 0, 0] +</pre> + +<p><strong>Nota:</strong> E' una buona pratica commentare l'utilizzo intenzionale di empty statement, poichè non è immediatamente ovvia la differenza con un normale punto e virgola. Nell'esempio seguente l'uso è probabilmente non intenzionale:</p> + +<pre class="brush: js">if (condition); // Attenzione, questo "if" non produce nessun effetto! + killTheUniverse() // E quindi questo sarà eseguito sempre!!! +</pre> + +<p>Un altro Esempio: Un <a href="/en-US/docs/Web/JavaScript/Reference/Statements/if...else"><code>if...else</code></a> statement senza parentesi graffe (<code>{}</code>). Se <code>three</code> è <code>true</code>, non accadrà nulla, <code>four</code> non viene valutato, e neanche la funzione <code>launchRocket()</code>nel ramo <code>else</code> sarà eseguita.</p> + +<pre class="brush: js">if (one) + doOne(); +else if (two) + doTwo(); +else if (three) + ; // nothing here +else if (four) + doFour(); +else + launchRocket();</pre> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-empty-statement', 'Empty statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-empty-statement', 'Empty statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.3', 'Empty statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-12.3', 'Empty statement')}}</td> + <td>{{Spec2('ES3')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-12.3', 'Empty statement')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_Browser">Compatibilità con i Browser</h2> + + + +<p>{{Compat("javascript.statements.empty")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Statements/block", "Block statement")}}</li> +</ul> diff --git a/files/it/web/javascript/reference/statements/export/index.html b/files/it/web/javascript/reference/statements/export/index.html new file mode 100644 index 0000000000..47d67a6eb2 --- /dev/null +++ b/files/it/web/javascript/reference/statements/export/index.html @@ -0,0 +1,259 @@ +--- +title: export +slug: Web/JavaScript/Reference/Statements/export +tags: + - ECMAScript 2015 + - JavaScript + - Moduli + - export +translation_of: Web/JavaScript/Reference/Statements/export +--- +<div>{{jsSidebar("Statements")}}</div> + +<div>Il comando <strong>export </strong>è utilizzato per esportare funzioni, oggetti o tipi primitivi da un dato file (o modulo) in modo tale da poter essere riutilizzati in altri file con il comando <span class="seoSummary">{{jsxref("Statements/import", "import")}}</span></div> + +<div></div> + +<div>I moduli sono esportati sempre in {{jsxref("Strict_mode","strict mode", "", 1)}} nonostante non sia dichiarato. Il comando export non può essere usato in embedded scripts.</div> + +<h2 id="Sintassi">Sintassi</h2> + +<p>Ci sono due tipi di exports:</p> + +<ol> + <li>Named exports (uno o più exports per modulo)</li> + <li>Default exports (uno per modulo)</li> +</ol> + +<pre class="syntaxbox notranslate">// Export di variabili, funzioni e oggetti singolarmente +export let <var>name1</var>, <var>name2</var>, …, <var>nameN</var>; // also var, const +export let <var>name1</var> = …, <var>name2</var> = …, …, <var>nameN</var>; // also var, const +export function functionName(){...} +export class ClassName {...} + +// Export di una lista +export { <var>name1</var>, <var>name2</var>, …, <var>nameN</var> }; + +// Rinominare gli exports +export { <var>variable1</var> as <var>name1</var>, <var>variable2</var> as <var>name2</var>, …, <var>nameN</var> }; + +// Exporting destructured assignments with renaming +// Export di assegnazioni destrutturate rinominando l'export +export const { <var>name1</var>, <var>name2: bar</var> } = o; + +// DEfault export +export default <em>expression</em>; +export default function (…) { … } // also class, function* +export default function name1(…) { … } // also class, function* +export { <var>name1</var> as default, … }; + +// Aggregazione di moduli +export * from …; // does not set the default export +export * as name1 from …; // Draft ECMAScript® 2O21 +export { <var>name1</var>, <var>name2</var>, …, <var>nameN</var> } from …; +export { <var>import1</var> as <var>name1</var>, <var>import2</var> as <var>name2</var>, …, <var>nameN</var> } from …; +export { default } from …;</pre> + +<dl> + <dt><code>nameN</code></dt> + <dd>Nome che deve essere esportato (così da poter essere importato via <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/import">import</a></code> in un altro script).</dd> +</dl> + +<h2 id="Descrizione">Descrizione</h2> + +<p>Ci sono due tipi diversi di export, named and default. Puoi avere più named exports per modulo ma solamente un default export.</p> + +<p>Named exports:</p> + +<pre class="brush: js notranslate">// Export di variabili, funzioni, oggetti dichiarati precedentemente +export { myFunction, myVariable }; + +// export individual features (can export var, let, +// const, function, class) +export let myVariable = Math.sqrt(2); +export function myFunction() { ... };</pre> + +<p>Default exports:</p> + +<pre class="brush: js notranslate">// Export di funzioni dichiarati precedentemente come default +export { myFunction as default }; + +// Export di singole funzioni, oggetti come default +export default function () { ... } +export default class { .. } + +// ogni export sovrascrive il precedente</pre> + +<p>I named exports sono utili per esportare più valori. Durante l'import, è obbligatorio usare lo stesso nome dell'oggetto corrispondente.</p> + +<p>I defalt export invece possono essere importati con qualsiasi nome. Ad esempio:</p> + +<pre class="brush: js notranslate">// file test.js +let k; export default k = 12; +</pre> + +<pre class="brush: js notranslate">// some other file +import m from './test'; //notare che abbiamo la libertà di importare m invece di importate k, perché k era il default export +console.log(m); // stamperà 12 +</pre> + +<p>Puoi anche rinominare i named exports per evitare conflitti:</p> + +<pre class="brush: js notranslate">export { <var>myFunction</var> as <var>function1</var>,<var> + myVariable</var> as variable };</pre> + +<h3 id="Ri-esportare_Aggregare">Ri-esportare / Aggregare</h3> + +<p>È anche possibile importare ed esportare da più moduli nel modulo padre in modo tale da rendere rendere disponibili gli import da quel modulo. In altre parole è possibile creare un modulo che aggreghi i vari export da vari moduli.</p> + +<p>È possibile farlo con la sintassi "export from":</p> + +<pre class="brush: js notranslate">export { default as function1, + function2 } from 'bar.js'; +</pre> + +<p>che è paragonabile ad una combinazione di import e export:</p> + +<pre class="brush: js notranslate">import { default as function1, + function2 } from 'bar.js'; +export { function1, function2 };</pre> + +<p>dove <code>function1</code> e <code>function2</code> non sono disponibili nel modulo corrente.</p> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> I seguenti esempi sono sintatticamente invalidi nonostante siano equivalenti dal punto divista del comando import</p> +</div> + +<pre class="brush: js notranslate">import DefaultExport from 'bar.js'; // Valid</pre> + +<pre class="brush: js notranslate">export DefaultExport from 'bar.js'; // Invalid</pre> + +<p>Il modo corretto di farlo è di rinominare gli export:</p> + +<pre class="brush: js notranslate">export { default as DefaultExport } from 'bar.js';</pre> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Usare_gli_export_espliciti">Usare gli export espliciti</h3> + +<p>In un modulo <code>my-module.js</code>, potremmo includere il seguente codice:</p> + +<pre class="brush: js notranslate">// modulo "my-module.js" +function cube(x) { + return x * x * x; +} + +const foo = Math.PI + Math.SQRT2; + +var graph = { + options: { + color:'white', + thickness:'2px' + }, + draw: function() { + console.log('From graph draw function'); + } +} + +export { cube, foo, graph };</pre> + +<p>E nel modulo principale incluso nella pagina HTML potremmo avere</p> + +<pre class="brush: js notranslate">import { cube, foo, graph } from './my-module.js'; + +graph.options = { + color:'blue', + thickness:'3px' +}; + +graph.draw(); +console.log(cube(3)); // 27 +console.log(foo); // 4.555806215962888</pre> + +<p>Notare che:</p> + +<ul> + <li>È necessario includere questo script nella tua pagina HTML con un elemento {{htmlelement("script")}} di type="module", in modo tale che sia riconosciuta come modulo e gestita in modo appropriato</li> + <li>Non è possibile eseguire moduli JS visitando url <code>file://</code> perché riceveresti un errore per violazione delle regole <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP/CORS">CORS</a>. È necessario eseguire questi script tramite un server HTTP</li> +</ul> + +<h3 id="Usare_i_default_export">Usare i default export</h3> + +<p>Se vogliamo esportare un singolo valore o avere un valore di default per il tuo modulo, allora possiamo usare il default export:</p> + +<pre class="brush: js notranslate">// modulo "my-module.js" +export default function cube(x) { + return x * x * x; +} +</pre> + +<p>Quindi, in un altro script, puoi importare il modulo direttamente:</p> + +<pre class="brush: js notranslate">import cube from 'my-module'; +console.log(cube(3)); // 27 +</pre> + +<h3 id="Usare_export_from">Usare export from</h3> + +<p>Facciamo l'esempio dove abbiamo i seguenti moduli:</p> + +<ul> + <li><code>childModule1.js</code>: exporta <code>myFunction</code> e <code>myVariable</code></li> + <li><code>childModule2.js</code>: esporta <code>myClass</code></li> + <li><code>parentModule.js</code>: è nient'altro che l'aggregatore</li> + <li>top level module: utilizza gli export di <code>parentModule.js</code></li> +</ul> + +<p>Questo è come sarebbe con il codice:</p> + +<pre class="brush: js notranslate">// Nel modulo childModule1.js +let myFunction = ...; // assegna una funzione myFunction +let myVariable = ...; // assegna un valore alla variabile myVariable +export {myFunction, myVariable}; +</pre> + +<pre class="brush: js notranslate">// Nel modulo childModule2.js +let myClass = ...; // assegna qualcosa di utile a myClass +export myClass; +</pre> + +<pre class="brush: js notranslate">// Nel modulo parentModule.js +// Aggreghiamo solamente gli export dai moduli childModule1 e childModule2 +// per poi riesportarli +export { myFunction, myVariable } from 'childModule1.js'; +export { myClass } from 'childModule2.js'; +</pre> + +<pre class="brush: js notranslate">// Nel modulo principale +// Possiamo usare gli export importandoli da un singolo modulo +// che li colleziona/include in un singolo modulo +import { myFunction, myVariable, myClass } from 'parentModule.js'</pre> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifiche</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-exports', 'Exports')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_Browser">Compatibilità Browser</h2> + +<p>{{Compat("javascript.statements.export")}}</p> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>{{jsxref("Statements/import", "import")}}</li> + <li><a href="https://wiki.developer.mozilla.org/it/docs/Web/JavaScript/Guide/Modules">JavaScript modules</a> guide</li> + <li><a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES6 in Depth: Modules</a>, Hacks blog post by Jason Orendorff</li> + <li><a href="https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/">ES modules: A cartoon deep-dive</a>, Hacks blog post by Lin Clark</li> + <li><a href="http://exploringjs.com/es6/ch_modules.html">Axel Rauschmayer's book: "Exploring JS: Modules"</a></li> +</ul> diff --git a/files/it/web/javascript/reference/statements/for...of/index.html b/files/it/web/javascript/reference/statements/for...of/index.html new file mode 100644 index 0000000000..ffc6f472c0 --- /dev/null +++ b/files/it/web/javascript/reference/statements/for...of/index.html @@ -0,0 +1,264 @@ +--- +title: for...of +slug: Web/JavaScript/Reference/Statements/for...of +translation_of: Web/JavaScript/Reference/Statements/for...of +--- +<p>{{jsSidebar("Statements")}}</p> + +<p><code><font face="Open Sans, Arial, sans-serif">Il </font><strong>costrutto for...of</strong></code> crea un ciclo con gli <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#iterable">oggetti iterabil</a>i (inclusi {{jsxref("Array")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, {{jsxref("String")}}, {{jsxref("TypedArray")}}, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/arguments">argomenti</a> di oggetti e così via), iterando le istruzioni per ogni valore di ogni proprietà.</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre>for (<em>variabile</em> of <em>oggettoIterabile</em>) { + <em>istruzioni +</em>} +</pre> + +<dl> + <dt><code>variabile</code></dt> + <dd><br> + Questa variabile assume il valore di una proprietà in ogni ciclo.</dd> + <dt><code>oggettoIterabile</code></dt> + <dd>Oggetto le cui proprietà sono iterate.</dd> +</dl> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Iterare_un_jsxref(Array)">Iterare un {{jsxref("Array")}}:</h3> + +<pre>let array = [10, 20, 30]; + +for (let valore of array) { + console.log(valore); +} +// Output: +// 10 +// 20 +// 30 +</pre> + +<p><code>Si può utilizzare <a href="/en-US/docs/Web/JavaScript/Reference/Statements/const">const</a></code> anzichè <a href="/en-US/docs/Web/JavaScript/Reference/Statements/let"><code>let</code></a> se 'value' non cambia valore durante il ciclo.</p> + +<pre>let iterable = [10, 20, 30]; + +for (const value of iterable) { + console.log(value); // il valore di value di questo ciclo rimarrà costante + value++; // operazione non consentita. +} +// 10 +// 20 +// 30 +</pre> + +<h3 id="Iterare_un_oggetto_jsxref(String)">Iterare un oggetto {{jsxref("String")}}:</h3> + +<pre>let iterable = "boo"; + +for (let value of iterable) { + console.log(value); +} +// output: +// "b" +// "o" +// "o" +</pre> + +<h3 id="Iterare_un_oggetto_jsxref(TypedArray)">Iterare un oggetto {{jsxref("TypedArray")}}:</h3> + +<pre>let iterable = new Uint8Array([0x00, 0xff]); + +for (let value of iterable) { + console.log(value); +} +// 0 +// 255 +</pre> + +<h3 id="Iterare_un_oggetto_jsxref(Map)">Iterare un oggetto {{jsxref("Map")}}:</h3> + +<pre>let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]); + +for (let entry of iterable) { + console.log(entry); +} +// [a, 1] +// [b, 2] +// [c, 3] + +for (let [key, value] of iterable) { + console.log(value); +} +// 1 +// 2 +// 3 +</pre> + +<h3 id="Iterare_un_oggetto_jsxref(Set)">Iterare un oggetto {{jsxref("Set")}}:</h3> + +<pre>let iterable = new Set([1, 1, 2, 2, 3, 3]); + +for (let value of iterable) { + console.log(value); +} +// 1 +// 2 +// 3 +</pre> + +<h3 id="Iterare_un_DOM_collection">Iterare un DOM collection</h3> + +<div> +<p>Iterare un DOM collection come {{domxref("NodeList")}}: il seguente esempio aggiunge una classe 'read' ai paragrafi che sono discendenti diretti di un elemento <em>article</em>:</p> +</div> + +<div class="warning"> +<p>Nota: Questo costrutto funziona soltanto con le piattaforme che implementano NodeList.prototype[Symbol.iterator]</p> +</div> + +<div> +<pre>let articleParagraphs = document.querySelectorAll("article > p"); + +for (let paragraph of articleParagraphs) { + paragraph.classList.add("read"); +} +</pre> +</div> + +<h3 id="Iterare_generatori">Iterare generatori</h3> + +<p>Si possono iterare i <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function*">generatori</a>:</p> + +<pre>function* fibonacci() { // generatore di funzione + let [prev, curr] = [0, 1]; + while (true) { + [prev, curr] = [curr, prev + curr]; + yield curr; + } +} + +for (let n of fibonacci()) { + console.log(n); + // tronca la sequenza a 1000 + if (n >= 1000) { + break; + } +} +</pre> + +<h3 id="Differerenze_tra_for...of_e_for...in">Differerenze tra <code>for...of</code> e <code>for...in</code></h3> + +<p>Il <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in" title="en-US/docs/JavaScript/Reference/Statements/for...in">for...in</a></code> itera tutte le proprietà enumerabili di un oggetto.</p> + +<p>Il <code>for...of</code> è specifico per le <strong>collezioni</strong>, piuttosto che tutti gli oggetti. Itera tutti gli oggetti di qualsiasi collection che abbia la proprietà <code>[Symbol.iterator]</code>.</p> + +<p>Il seguente esempio mostra le differenze tra <code>for...of</code> e <code>for...in</code>.</p> + +<pre>Object.prototype.objCustom = function () {}; +Array.prototype.arrCustom = function () {}; + +let iterable = [3, 5, 7]; +iterable.foo = "hello"; + +for (let i in iterable) { + console.log(i); // logs 0, 1, 2, "foo", "arrCustom", "objCustom" +} + +for (let i of iterable) { + console.log(i); // logs 3, 5, 7 +} +</pre> + +<h2 id="Specifiche">Specifiche</h2> + +<table> + <tbody> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commenti</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-for-in-and-for-of-statements', 'for...of statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Definizione iniziale.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-for-in-and-for-of-statements', 'for...of statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Edge</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(38)}} <a href="#Chrome_note_1">[1]</a><br> + {{CompatChrome(51)}} <a href="#Chrome_note_3">[3]</a></td> + <td>{{CompatGeckoDesktop("13")}} <a href="#Gecko_note_2">[2]</a></td> + <td>12</td> + <td>25</td> + <td>7.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(38)}} [1]</td> + <td>{{CompatGeckoMobile("13")}} [2]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>8</td> + </tr> + </tbody> +</table> +</div> + +<p><a name="Chrome_note_1">[1]</a> Da Chrome 29 a Chrome 37 questa caratteristica era disponibile nel menu preferenze. In chrome://flags/#enable-javascript-harmony, bisognava attivare “Enable Experimental JavaScript”.</p> + +<p><a name="Gecko_note_2">[2]</a> Da Gecko 17 (Firefox 17 / Thunderbird 17 / SeaMonkey 2.14) a Gecko 26 (Firefox 26 / Thunderbird 26 / SeaMonkey 2.23 / Firefox OS 1.2) la proprietà iterator era usata (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=907077">bug 907077</a>), e da Gecko 27 a Gecko 35 era utilizzato <code>"@@iterator"</code> placeholder. In Gecko 36 (Firefox 36 / Thunderbird 36 / SeaMonkey 2.33), il simbolo <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol">symbolo</a> <code>@@iterator</code> fu implementato (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=918828">bug 918828</a>).</p> + +<p><a name="Chrome_note_3">[3]</a> Il supporto dell'iteration of objects è stato aggiunto in Chrome 51.</p> + +<h2 id="Note">Note</h2> + +<p>Se alcuni collegamenti su questa pagina fossero segnati in rosso e si volesse visualizzarli, essi sono dispoiìnibili solo in lingua inglese. In tal caso basta cambiare la lingua di questo stesso articolo.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for_each...in">for each...in</a> - a similar statement, but iterates over the values of object's properties, rather than the property names themselves (deprecated).</li> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/forEach">Map.prototype.forEach()</a></li> +</ul> + +<p> </p> diff --git a/files/it/web/javascript/reference/statements/function_star_/index.html b/files/it/web/javascript/reference/statements/function_star_/index.html new file mode 100644 index 0000000000..a71ccfc55e --- /dev/null +++ b/files/it/web/javascript/reference/statements/function_star_/index.html @@ -0,0 +1,280 @@ +--- +title: function* +slug: Web/JavaScript/Reference/Statements/function* +translation_of: Web/JavaScript/Reference/Statements/function* +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>La dichiarazione <code><strong>function*</strong></code> (la parola chiave <code>function</code> seguita da un asterisco) definisce una <em>funzione generatrice</em>, la quale restituisce un oggetto di tipo {{jsxref("Global_Objects/Generator","Generator")}}.</p> + +<p>{{EmbedInteractiveExample("pages/js/statement-functionasterisk.html")}}</p> + +<div class="noinclude"> +<p>È anche possibile definire una funzione generatrice usando il costrutto {{jsxref("GeneratorFunction")}} e una {{jsxref("Operators/function*", "espressione function*")}}.</p> +</div> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox">function* <em>nome</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { + <em>istruzioni</em> +} +</pre> + +<dl> + <dt><code>nome</code></dt> + <dd>Il nome della funzione.</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>Gli argomenti passati alla funzione. Una funzione può avere fino a 255 argomenti.</dd> +</dl> + +<dl> + <dt><code>istruzioni</code></dt> + <dd>Le istruzioni che compongono il corpo della funzione.</dd> +</dl> + +<h2 id="Descrizione">Descrizione</h2> + +<p>I generatori sono funzioni dalle quali è possibile uscire e poi rientrarvi in un secondo momento. Il loro contesto (binding delle variabili) verrà salvato all'uscita per quando vi entrerà successivamente.</p> + +<p>La chiamata ad un generatore non viene eseguita immediatamente; la funzione ritornerà invece un oggetto <a href="/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#iterator">iterator</a>. Quando il metodo <code>next()</code> dell'iteratore viene chiamato, il corpo del generatore viene eseguito fino alla prima espressione {{jsxref("Operators/yield", "yield")}}, la quale specifica quale espressione ritornare dall'iteratore oppure, con l'espressione {{jsxref("Operators/yield*", "yield*")}}, delegare questo valore ad un'altra funzione generatrice. Il metodo <code>next()</code> restituisce un oggetto con proprietà <code>value</code> contenente il valore da restituito all'iteratore ed una proprietà <code>done</code> che contiene un valore di tipo boolean per indicare se il generatore ha restituito l'ultimo valore. Chiamando il metodo <code>next()</code> con un argomento farà riprendere l'esecuzione della funzione generatrice, sostituendo l'istruzione <code>yield</code> in cui l'esecuzione era stata fermata con l'argomento della funzione <code>next()</code>. </p> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Esempio_semplice">Esempio semplice</h3> + +<pre class="brush: js">function* idMaker(){ + var index = 0; + while(index < 3) + yield index++; +} + +var gen = idMaker(); + +console.log(gen.next().value); // 0 +console.log(gen.next().value); // 1 +console.log(gen.next().value); // 2 +console.log(gen.next().value); // undefined +// ...</pre> + +<h3 id="Esempio_con_yield*">Esempio con yield*</h3> + +<pre class="brush: js">function* anotherGenerator(i) { + yield i + 1; + yield i + 2; + yield i + 3; +} + +function* generator(i){ + yield i; + yield* anotherGenerator(i); + yield i + 10; +} + +var gen = generator(10); + +console.log(gen.next().value); // 10 +console.log(gen.next().value); // 11 +console.log(gen.next().value); // 12 +console.log(gen.next().value); // 13 +console.log(gen.next().value); // 20 +</pre> + +<h3 id="Passare_argomenti_ai_Generatori">Passare argomenti ai Generatori</h3> + +<pre class="brush: js">function* logGenerator() { + console.log(yield); + console.log(yield); + console.log(yield); +} + +var gen = logGenerator(); + +// the first call of next executes from the start of the function +// until the first yield statement +gen.next(); +gen.next('pretzel'); // pretzel +gen.next('california'); // california +gen.next('mayonnaise'); // mayonnaise +</pre> + +<h3 id="I_generatori_non_sono_costruttori">I generatori non sono costruttori</h3> + +<pre class="brush: js example-bad">function* f() {} +var obj = new f; // solleva "TypeError: f is not a constructor"</pre> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commenti</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES6', '#', 'function*')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Definizione iniziale</td> + </tr> + <tr> + <td>{{SpecName('ES7', '#', 'function*')}}</td> + <td>{{Spec2('ES7')}}</td> + <td>I generatori non devono avere essere usati come costruttori e deveo lanciare un eccezione quando vengono usati con la parola chiave <code>new</code>.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#', 'function*')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_per_i_browser">Compatibilità per i browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th> Edge</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Supporto base</td> + <td>{{CompatChrome(39.0)}}</td> + <td>{{CompatGeckoDesktop("26.0")}}</td> + <td>{{CompatNo}}</td> + <td>13</td> + <td>26</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>yield*</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("27.0")}}</td> + <td>{{CompatNo}}</td> + <td>13</td> + <td>26</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>IteratorResult</code> invece delle eccezioni</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("29.0")}}</td> + <td>{{CompatNo}}</td> + <td>13</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Non istanziabile con <code>new</code> {ES2016)</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("43.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Supporto base</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("26.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(39.0)}}</td> + </tr> + <tr> + <td><code>yield*</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("27.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>IteratorResult</code> invece delle eccezioni</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("29.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Non istanziabile con <code>new</code> (ES2016)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("43.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Note_specifiche_per_Firefox">Note specifiche per Firefox</h2> + +<h4 id="Generatori_e_iteratori_in_Firefox_nelle_versioni_precedenti_alla_26">Generatori e iteratori in Firefox nelle versioni precedenti alla 26</h4> + +<p>Versioni di FIrefox precedenti implementano una versione più vecchia della proposta di standard per i generatori. Tra le varie differenze, in queste versioni i generatori erano definiti usando la parola chiave <code>function</code> (senza asterisco) per le funzioni semplici. Per maggiori informazioni fare riferimento a {{jsxref("Statements/Legacy_generator_function", "funzioni generatrici (legacy)")}}.</p> + +<h4 id="IteratorResult_al_posto_delle_eccezioni"><code>IteratorResult</code> al posto delle eccezioni</h4> + +<p>A partire da Gecko 29 {{geckoRelease(29)}}, la funzione generatrice completata non solleva più eccezioni {{jsxref("TypeError")}} "generator has already finished". Restituisce invece oggetti di tipo <code>IteratorResult</code> come il seguente <code>{ value: undefined, done: true }</code> ({{bug(958951)}}).</p> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>{{jsxref("Operators/function*", "Espressione function*")}}</li> + <li>Oggetto {{jsxref("GeneratorFunction")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol">The Iterator protocol</a></li> + <li>{{jsxref("Operators/yield", "yield")}}</li> + <li>{{jsxref("Operators/yield*", "yield*")}}</li> + <li>Oggetto {{jsxref("Function")}}</li> + <li>{{jsxref("Statements/function", "dichiarazione di funzioni")}}</li> + <li>{{jsxref("Operators/function", "espressione function")}}</li> + <li>{{jsxref("Functions_and_function_scope", "Funzioni e scope di funzioni")}}</li> + <li>Altre risorse sul web: + <ul> + <li><a href="http://facebook.github.io/regenerator/">Regenerator</a> un compilatore di generatori da ES5 a ES5 [Inglese]</li> + <li><a href="http://www.youtube.com/watch?v=qbKWsbJ76-s">Forbes Lindesay: Promises and Generators: control flow utopia -- JSConf EU 2013 </a>[Inglese]</li> + <li><a href="https://www.youtube.com/watch?v=ZrgEZykBHVo&list=PLuoyIZT5fPlG44bPq50Wgh0INxykdrYX7&index=1">Hemanth.HM: The New gen of *gen(){} </a>[Inglese]</li> + <li><a href="http://taskjs.org/">Task.js </a>[Inglese]</li> + </ul> + </li> +</ul> diff --git a/files/it/web/javascript/reference/statements/import/index.html b/files/it/web/javascript/reference/statements/import/index.html new file mode 100644 index 0000000000..9a6ac79920 --- /dev/null +++ b/files/it/web/javascript/reference/statements/import/index.html @@ -0,0 +1,167 @@ +--- +title: import +slug: Web/JavaScript/Reference/Statements/import +translation_of: Web/JavaScript/Reference/Statements/import +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>Il comando <code><strong>import</strong></code> si usa per importare bindings esportati da un altro modulo. I moduli importati sono in {{jsxref("Strict_mode","strict mode")}} indipendentemente dal fatto che venga dichiarato in modo esplicito. Il comando <code>import</code> non puo' essere usato negli script embedded.</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox">import <em>defaultExport</em> from "<em>module-name</em>"; +import * as <em>name</em> from "<em>module-name</em>"; +import { <em>export </em>} from "<em>module-name</em>"; +import { <em>export</em> as <em>alias </em>} from "<em>module-name</em>"; +import { <em>export1 , export2</em> } from "<em>module-name</em>"; +import { <em>export1 , export2</em> as <em>alias2</em> , <em>[...]</em> } from "<em>module-name</em>"; +import <em>defaultExport</em>, { <em>export</em> [ , <em>[...]</em> ] } from "<em>module-name</em>"; +import <em>defaultExport</em>, * as <em>name</em> from "<em>module-name</em>"; +import "<em>module-name</em>";</pre> + +<dl> + <dt><code>defaultExport</code></dt> + <dd>Nome riferito all'export di default nel modulo.</dd> + <dt><code>module-name</code></dt> + <dd>Il modulo da cui importare. E' spesso il path relativo o assoluto del file <code>.js</code> che contiene il modulo. Alcuni bundlers possono permettere o imporre l'uso dell'estensione; verifica nel tuo environment. Sono ammesse solo stringhe a singole o doppie virgolette.</dd> + <dt><code>name</code></dt> + <dd>Nome dell' oggetto-modulo che verra' usato come namespace quando si fa riferimento nelle importazioni.</dd> + <dt><code>export, exportN</code></dt> + <dd>Nome degli export da importare.</dd> + <dt><code>alias, aliasN</code></dt> + <dd>Nomi fittizi (alias) riferiti ai nomi importati.</dd> +</dl> + +<h2 id="Descrizione">Descrizione</h2> + +<p>Il parametro <code>name</code> e' il nome dell' "oggetto-modulo" che verra' usato come namespace per riferirsi agli export al suo interno. I parametri <code>export</code> indicano i nomi dei singoli export, mentre <code>import * </code>li importa tutti insieme. Seguiranno degli esempi per chiarire questa sintassi.</p> + +<h3 id="Importare_l'intero_contenuto_di_un_modulo">Importare l'intero contenuto di un modulo</h3> + +<p>L'esempio inserisce <code>myModule</code> nello scope corrente, che conterra' tutti gli export del modulo, il cui file si trova in <code>/modules/my-module.js</code>.</p> + +<pre class="brush: js">import * as <em>myModule</em> from '/modules/my-module.js'; +</pre> + +<p>Qui invece, si accede agli export usando il nome del modulo ("myModule" in this case) come namespace. Per esempio, se il modulo importato contiene l'export <code>doAllTheAmazingThings()</code>, lo indicherai in questo modo:</p> + +<pre class="brush: js">myModule.doAllTheAmazingThings();</pre> + +<h3 id="Importare_un_singolo_export_da_un_modulo">Importare un singolo export da un modulo</h3> + +<p>Dato un oggetto o valore di nome <code>myExport</code> che sia esportato dal modulo <code>my-module</code>, sia implicitamente (perche' viene esportato l'intero modulo) che esplicitamente (usando il comando {{jsxref("Statements/export", "export")}}), l'esempio che segue inserira' <code>myExport</code> nello scope corrente.</p> + +<pre class="brush: js">import {myExport} from '/modules/my-module.js';</pre> + +<h3 id="Importare_export_multipli_da_un_modulo">Importare export multipli da un modulo</h3> + +<p>In questo esempio, sia <code>foo</code> che <code>bar</code> verranno inseriti nello scope corrente.</p> + +<pre class="brush: js">import {foo, bar} from '/modules/my-module.js';</pre> + +<h3 id="Importare_un_export_usando_un_alias">Importare un export usando un alias</h3> + +<p>E' possibile rinominare un export in fase di importazione, ad esempio, <code>shortName</code> verra' inserito in questo modo nello scope corrente:</p> + +<pre class="brush: js">import {reallyReallyLongModuleExportName as shortName} + from '/modules/my-module.js';</pre> + +<h3 id="Rinominare_export_multipli_in_un_importazione">Rinominare export multipli in un importazione</h3> + +<p>Importazione multipla di export da un modulo, usando per comodita' degli alias:</p> + +<pre class="brush: js">import { + reallyReallyLongModuleExportName as shortName, + anotherLongModuleName as short +} from '/modules/my-module.js';</pre> + +<h3 id="Importare_solo_gli_'effetti_collaterali'_di_un_modulo">Importare solo gli 'effetti collaterali' di un modulo</h3> + +<p>Importazione dei soli 'effetti collaterali' di un modulo, senza importare tutto il resto. Cio' che segue eseguira' soltanto il codice nello scope globale ma senza importare alcun valore.</p> + +<pre class="brush: js">import '/modules/my-module.js'; +</pre> + +<h3 id="Importare_defaults">Importare defaults</h3> + +<p>E' possibile che in un modulo ci sia un esportazione di default {{jsxref("Statements/export", "export")}} (che sia un oggetto, una funzione, una classe, ecc...) e il comando <code>import</code> potra' servire per importarlo.</p> + +<p>La versione piu' semplice che importa direttamente il default e' questa:</p> + +<pre class="brush: js">import myDefault from '/modules/my-module.js';</pre> + +<p>E' possibile usare questa sintassi all'interno delle altre che abbiamo gia' visto (importazioni con namespace o nomi specifici) ma, in questo caso, l'importazione di default dovra' essere indicata per prima:</p> + +<pre class="brush: js">import myDefault, * as myModule from '/modules/my-module.js'; +// myModule used as a namespace</pre> + +<p>oppure</p> + +<pre class="brush: js">import myDefault, {foo, bar} from '/modules/my-module.js'; +// specific, named imports +</pre> + +<h2 id="Esempi">Esempi</h2> + +<p>Importazione di una funzione helper da un modulo secondario che processa una richiesta AJAX JSON.</p> + +<h3 id="Modulo_file.js">Modulo: file.js</h3> + +<pre class="brush: js">function getJSON(url, callback) { + let xhr = new XMLHttpRequest(); + xhr.onload = function () { + callback(this.responseText) + }; + xhr.open('GET', url, true); + xhr.send(); +} + +export function getUsefulContents(url, callback) { + getJSON(url, data => callback(JSON.parse(data))); +}</pre> + +<h3 id="Main_program_main.js">Main program: main.js</h3> + +<pre class="brush: js">import { getUsefulContents } from '/modules/file.js'; + +getUsefulContents('http://www.example.com', + data => { doSomethingUseful(data); });</pre> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Status</th> + <th scope="col">Commento</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-imports', 'Imports')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Definizione iniziale.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-imports', 'Imports')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilitá">Compatibilitá</h2> + + + +<p>{{Compat("javascript.statements.import")}}</p> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>{{jsxref("Statements/import.meta", "import.meta")}}</li> + <li>{{jsxref("Statements/export", "export")}}</li> + <li><a href="https://blogs.windows.com/msedgedev/2016/05/17/es6-modules-and-beyond/">Previewing ES6 Modules and more from ES2015, ES2016 and beyond</a></li> + <li><a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES6 in Depth: Modules</a>, Hacks blog post by Jason Orendorff</li> + <li><a href="https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/">ES modules: A cartoon deep-dive</a>, Hacks blog post by Lin Clark</li> + <li><a class="external" href="http://exploringjs.com/es6/ch_modules.html">Axel Rauschmayer's book: "Exploring JS: Modules"</a></li> +</ul> diff --git a/files/it/web/javascript/reference/statements/index.html b/files/it/web/javascript/reference/statements/index.html new file mode 100644 index 0000000000..e997b9799f --- /dev/null +++ b/files/it/web/javascript/reference/statements/index.html @@ -0,0 +1,131 @@ +--- +title: Statements +slug: Web/JavaScript/Reference/Statements +tags: + - JavaScript + - NeedsTranslation + - Reference + - TopicStub + - statements +translation_of: Web/JavaScript/Reference/Statements +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>JavaScript applications consist of statements with an appropriate syntax. A single statement may span multiple lines. Multiple statements may occur on a single line if each statement is separated by a semicolon. This isn't a keyword, but a group of keywords.</p> + +<h2 id="Statements_and_declarations_by_category">Statements and declarations by category</h2> + +<p>For an alphabetical listing see the sidebar on the left.</p> + +<h3 id="Control_flow">Control flow</h3> + +<dl> + <dt>{{jsxref("Statements/block", "Block")}}</dt> + <dd>A block statement is used to group zero or more statements. The block is delimited by a pair of curly brackets.</dd> + <dt>{{jsxref("Statements/break", "break")}}</dt> + <dd>Terminates the current loop, switch, or label statement and transfers program control to the statement following the terminated statement.</dd> + <dt>{{jsxref("Statements/continue", "continue")}}</dt> + <dd>Terminates execution of the statements in the current iteration of the current or labeled loop, and continues execution of the loop with the next iteration.</dd> + <dt>{{jsxref("Statements/Empty", "Empty")}}</dt> + <dd>An empty statement is used to provide no statement, although the JavaScript syntax would expect one.</dd> + <dt>{{jsxref("Statements/if...else", "if...else")}}</dt> + <dd>Executes a statement if a specified condition is true. If the condition is false, another statement can be executed.</dd> + <dt>{{jsxref("Statements/switch", "switch")}}</dt> + <dd>Evaluates an expression, matching the expression's value to a case clause, and executes statements associated with that case.</dd> + <dt>{{jsxref("Statements/throw", "throw")}}</dt> + <dd>Throws a user-defined exception.</dd> + <dt>{{jsxref("Statements/try...catch", "try...catch")}}</dt> + <dd>Marks a block of statements to try, and specifies a response, should an exception be thrown.</dd> +</dl> + +<h3 id="Declarations">Declarations</h3> + +<dl> + <dt>{{jsxref("Statements/var", "var")}}</dt> + <dd>Declares a variable, optionally initializing it to a value.</dd> + <dt>{{experimental_inline}} {{jsxref("Statements/let", "let")}}</dt> + <dd>Declares a block scope local variable, optionally initializing it to a value.</dd> + <dt>{{experimental_inline}} {{jsxref("Statements/const", "const")}}</dt> + <dd>Declares a read-only named constant.</dd> +</dl> + +<h3 id="Functions_and_classes">Functions and classes</h3> + +<dl> + <dt>{{jsxref("Statements/function", "function")}}</dt> + <dd>Declares a function with the specified parameters.</dd> + <dt>{{experimental_inline}} {{jsxref("Statements/function*", "function*")}}</dt> + <dd>Generators functions enable writing <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol">iterators</a> more easily.</dd> + <dt>{{jsxref("Statements/return", "return")}}</dt> + <dd>Specifies the value to be returned by a function.</dd> + <dt>{{experimental_inline}} {{jsxref("Statements/class", "class")}}</dt> + <dd>Declares a class.</dd> +</dl> + +<h3 id="Iterations">Iterations</h3> + +<dl> + <dt>{{jsxref("Statements/do...while", "do...while")}}</dt> + <dd>Creates a loop that executes a specified statement until the test condition evaluates to false. The condition is evaluated after executing the statement, resulting in the specified statement executing at least once.</dd> + <dt>{{jsxref("Statements/for", "for")}}</dt> + <dd>Creates a loop that consists of three optional expressions, enclosed in parentheses and separated by semicolons, followed by a statement executed in the loop.</dd> + <dt>{{deprecated_inline}} {{non-standard_inline()}} {{jsxref("Statements/for_each...in", "for each...in")}}</dt> + <dd>Iterates a specified variable over all values of object's properties. For each distinct property, a specified statement is executed.</dd> + <dt>{{jsxref("Statements/for...in", "for...in")}}</dt> + <dd>Iterates over the enumerable properties of an object, in arbitrary order. For each distinct property, statements can be executed.</dd> + <dt>{{experimental_inline}} {{jsxref("Statements/for...of", "for...of")}}</dt> + <dd>Iterates over iterable objects (including <a href="https://developer.mozilla.org/en-US/docs/Core_JavaScript_1.5_Reference/Global_Objects/Array" title="Array">arrays</a>, array-like objects, <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Iterators_and_Generators" title="Iterators and generators">iterators and generators</a>), invoking a custom iteration hook with statements to be executed for the value of each distinct property.</dd> + <dt>{{jsxref("Statements/while", "while")}}</dt> + <dd>Creates a loop that executes a specified statement as long as the test condition evaluates to true. The condition is evaluated before executing the statement.</dd> +</dl> + +<h3 id="Others">Others</h3> + +<dl> + <dt>{{jsxref("Statements/debugger", "debugger")}}</dt> + <dd>Invokes any available debugging functionality. If no debugging functionality is available, this statement has no effect.</dd> + <dt>{{experimental_inline}} {{jsxref("Statements/export", "export")}}</dt> + <dd>Used to export functions to make them available for imports in external modules, another scripts.</dd> + <dt>{{experimental_inline}} {{jsxref("Statements/import", "import")}}</dt> + <dd>Used to import functions exported from an external module, another script.</dd> + <dt>{{jsxref("Statements/label", "label")}}</dt> + <dd>Provides a statement with an identifier that you can refer to using a <code>break</code> or <code>continue</code> statement.</dd> +</dl> + +<dl> + <dt>{{deprecated_inline}} {{jsxref("Statements/with", "with")}}</dt> + <dd>Extends the scope chain for a statement.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>ECMAScript 1st Edition.</td> + <td>Standard</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12', 'Statements')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-ecmascript-language-statements-and-declarations', 'ECMAScript Language: Statements and Declarations')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>New: function*, let, for...of, yield, class</td> + </tr> + </tbody> +</table> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators">Operators</a></li> +</ul> diff --git a/files/it/web/javascript/reference/statements/let/index.html b/files/it/web/javascript/reference/statements/let/index.html new file mode 100644 index 0000000000..7900b7673a --- /dev/null +++ b/files/it/web/javascript/reference/statements/let/index.html @@ -0,0 +1,208 @@ +--- +title: let +slug: Web/JavaScript/Reference/Statements/let +translation_of: Web/JavaScript/Reference/Statements/let +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>L'istruzione <strong>let </strong>dichiara una variabile locale nel blocco di codice e, facoltativamente, la inizializza ad un valore.</p> + +<div>{{EmbedInteractiveExample("pages/js/statement-let.html")}}</div> + +<div class="hidden">Il codice sorgente di questo esempio interattivo è salvato in un repository GitHub. Se tu volessi contribuire al progetto 'interactive examples', puoi clonare <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> e sottomettere una pull request.</div> + +<h2 id="Summary" name="Summary">Sintassi</h2> + +<pre class="syntaxbox notranslate">let <var>var1</var> [= <var>value1</var>] [, <var>var2</var> [= <var>value2</var>]] [, ..., <var>varN</var> [= <var>valueN</var>]]; +</pre> + +<h3 id="Parameters" name="Parameters">Parametri</h3> + +<dl> + <dt><code><var>var1</var></code>, <code><var>var2</var></code>, …, <code><var>varN</var></code></dt> + <dd>Il nome della variabile o delle variabili da dichiarare. Devono essere identificatori JavaScript validi.</dd> + <dt><code><var>value1</var></code>, <code><var>value2</var></code>, …, <code><var>valueN</var></code> {{optional_inline}}</dt> + <dd>Per ogni variabile definita, è possibile specificare il valore iniziale usando qualunque espressione JavaScript valida.</dd> +</dl> + +<h2 id="Description" name="Description">Descrizione</h2> + +<p><strong><code>let</code></strong> permette di dichiarare variabili limitandone la visibilità ad un {{jsxref("statements/block", "blocco di codice", "", 1)}}, o ad un'espressione in cui è usata, contrariamente alla parola chiave <a href="/it/docs/JavaScript/Reference/Statements/var" title="JavaScript/Reference/Statements/var"><code>var</code></a>, che invece definisce una variabile globalmente in uno script o localmente in una funzione a prescindere dal blocco di codice. L'altra differenza tra {{jsxref("statements/var", "var")}} e <code>let</code> è che la seconda è inizializzata ad un valore solo quando un parser la evaluta (vedi sotto).</p> + +<h2 id="Block_scoping" name="Block_scoping">Esempi</h2> + +<h3 id="Regole_di_visibilità">Regole di visibilità</h3> + +<p>Le variabili inizializzate da <code>let</code> sono legate al blocco dell'espressione in cui sono dichiarate. Il suo funzionamento è del tutto simile a quello di <code>var</code>, ma le variabili definite da quest'ultima istruzione sono sempre variabili globali a livello di programma o di funzione, hanno quindi una visibilità più ampia.</p> + +<pre class="notranslate">function varTest() { + var x = 1; + { + var x = 2; // same variable! + console.log(x); // 2 + } + console.log(x); // 2 +} + +function letTest() { + let x = 1; + { + let x = 2; // different variable + console.log(x); // 2 + } + console.log(x); // 1 +}</pre> + +<p>Dichiarare nuovamente la stessa variabile con <code>let</code> restituisce l'errore <code><a href="/it/docs/JavaScript/Reference/Global_Objects/TypeError" title="TypeError">TypeError</a>.</code></p> + +<pre class="brush: js notranslate"><code> +if (x) { + let foo; + let foo; // lancia un errore TypeError. +}</code></pre> + +<p>Se usata al livello più alto di programma, <code>let</code>, a differenza di <code>var</code>, non crea una proprietà seuul'oggetto globale. Per esempio:</p> + +<pre class="notranslate">var x = 'global'; +let y = 'global'; +console.log(this.x); // "global" +console.log(this.y); // undefined</pre> + +<p>Potresti imbatterti in errori in un blocco <a href="/it/docs/JavaScript/Reference/Statements/switch" title="switch"><code>switch</code></a> perché i casi non vengono separati ma fanno parte tutti dello stesso blocco.</p> + +<pre class="brush: js notranslate"><code> +switch (x) { + case 0: + let foo; + break; + + case 1: + let foo; // TypeError for redeclaration. + break; +}</code></pre> + +<h2 id="Examples" name="Examples"><code>Esempi</code></h2> + +<p>Una <em><code>let</code> expression</em> può essere usata per limitare la visibilità della variabile dichiarata alla sola espressione chiamata.</p> + +<pre class="brush: js notranslate"><code> +var a = 5; +let(a = 6) alert(a); // 6 +alert(a); // 5</code></pre> + +<p>Usando <code>let</code> in un blocco di codice ne limitiamo la visibilità al solo blocco racchiuso. Nel codice di esempio nota come le due assegnazioni nel blocco <code>if</code> diano due risultati diversi.</p> + +<pre class="brush: js notranslate"><code> +var a = 5; +var b = 10; + +if (a === 5) { + let a = 4; // La visibilità è dentro il blocco if + var b = 1; // La visibilità è dentro la funzione + + console.log(a); // 4 + console.log(b); // 1 +} + +console.log(a); // 5 +console.log(b); // 1</code></pre> + +<p>Puoi usare <strong><code>let</code></strong> come iteratore in un ciclo <strong><code>for</code></strong> invece di usare una nuova variabile globale.</p> + +<pre class="brush: js notranslate"><code> +for (let i = 0; i<10; i++) { + alert(i); // 1, 2, 3, 4 ... 9 +} + +alert(i); // i non è definita</code></pre> + +<p>Quando lavori con i costruttori puoi usare <code>let</code> per creare in'interfaccia privata senza chiusure.</p> + +<pre class="brush: js notranslate"><code> +/*\ +|*| +|*| :: Una API pubblica e riutilizzabile per i costruttori ... :: +|*| +\*/ + +let ( + switchScope = function (oOwner, fConstructor) { + return oOwner && oOwner.constructor === fConstructor ? oOwner : this; + } +) { + function buildIndoors (fConstructor) { + const oPrivate = new fConstructor(this); + this.getScope = oPrivate.getScope = switchScope.bind(this, oPrivate); + return oPrivate; + } +} + +/*\ +|*| +|*| :: Use of the *let* statement in order to create a private interface without closures... :: +|*| +\*/ + +let ( + + /* "Secrets" is the constructor of the private interface */ + + Secrets = function Secrets (oPublic /* (the public interface) */) { + /* setting a private property... */ + this.password = Math.floor(Math.random() * 1e16).toString(36); + /* you can also store the public interface into a private property... */ + /* this.publicInterface = oPublic; */ + alert("I\'m getting a public property from a private constructor...: somePublicProperty: " + oPublic.somePublicProperty); + } + +) { + + /* "User" is the constructor of the public interface */ + + function User (sNick) { + /* setting a public property... */ + this.somePublicProperty = "Hello World!"; + const oPrivate = this.createScope(Secrets); /* (the private interface) */ + /* setting a public property... */ + this.user = sNick; + alert("I\'m getting a private property from a public constructor...: password: " + oPrivate.password); + } + + User.prototype.somePublicMethod = function () { + const oPrivate = this.getScope(Secrets); /* (the private interface) */ + alert("I\'m getting a public property from a public method...: user: " + this.user); + alert("I\'m getting a private property from a public method...: password: " + oPrivate.password); + oPrivate.somePrivateMethod(); + }; + + Secrets.prototype.somePrivateMethod = function () { + const oPublic = this.getScope(); /* (the public interface) */ + alert("I\'m getting a public property from a private method...: user: " + oPublic.user); + alert("I\'m getting a private property from a private method...: password: " + this.password); + }; + + /* ...creating a mutual access... */ + + User.prototype.createScope = buildIndoors; +} + +/* out of the *let* statement you have not access to the private interface! */ + +const johnSmith = new User("John Smith"); +johnSmith.somePublicMethod();</code></pre> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("javascript.statements.let")}}</p> + +<h2 id="See_also" name="See_also"></h2> + +<h2 id="See_also" name="See_also"><code>See also</code></h2> + +<ul> + <li><code><a href="/it/docs/JavaScript/Reference/Statements/var" title="JavaScript/Reference/Statements/var"><code>var</code></a></code></li> + <li><code><a href="/it/docs/JavaScript/Reference/Statements/const" title="JavaScript/Reference/Statements/const"><code>const</code></a></code></li> + <li><code><a href="/it/docs/JavaScript/New_in_JavaScript/1.7#Block_scope_with_let_(Merge_into_let_Statement)" title="JavaScript/New in JavaScript/1.7#Block scope with let (Merge into let Statement)">New in JavaScript 1.7</a></code></li> +</ul> diff --git a/files/it/web/javascript/reference/statements/switch/index.html b/files/it/web/javascript/reference/statements/switch/index.html new file mode 100644 index 0000000000..aef4d668ce --- /dev/null +++ b/files/it/web/javascript/reference/statements/switch/index.html @@ -0,0 +1,320 @@ +--- +title: switch +slug: Web/JavaScript/Reference/Statements/switch +tags: + - JavaScript + - Reference + - Statement + - Web +translation_of: Web/JavaScript/Reference/Statements/switch +--- +<div>{{jsSidebar("Statements")}}</div> + +<p><span class="seoSummary"><code>Il<strong> comando</strong></code><strong><code>switch</code></strong> valuta un <a href="/it-IT/docs/Web/JavaScript/Guide/Expressions_and_Operators">espressione</a>, confronta il valore dell'espressione con ciascuna delle clausole <code>case</code> ed esegue i <a href="/it-IT/docs/Web/JavaScript/Reference/Statements">comandi</a> (<a href="/en-US/docs/Web/JavaScript/Reference/Statements">statements</a>) associati alla clausola (<code>case</code>) che verifica il confronto.</span></p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox">switch (espressione) { + case valore1: + //Comandi eseguiti quando il valore dell'espressione coincide con valore1 + [break;] + case valore2: + //Comandi eseguiti quando il valore dell'espressione coincide con valore2 + [break;] + ... + case valoreN: + //Comandi eseguiti quando il valore dell'espressione coincide con valoreN + [break;] + default: + //Comandi eseguiti quando nessuno dei valori coincide col valore dell'epressione + [break;] +}</pre> + +<dl> + <dt><code>espressione</code></dt> + <dd>Un'espressione il cui risultato è confrontato con ogni clausola case.</dd> + <dt><code>case valoreN</code></dt> + <dd>Clausola case usata nel confronto con l' <code>espressione</code>.</dd> + <dt><code>default</code></dt> + <dd>Una clausola <code>default</code> è facoltativa e, se specificata, la clausola viene eseguita se il valore dell'<code>espressione</code> non corrisponde a nessuna clausola <code>case</code>.</dd> +</dl> + +<h2 id="Descrizione">Descrizione</h2> + +<p>Un comando switch per prima cosa valuta <code>espressione</code>; poi cerca la prima clausola <code>case</code> la cui essa ha lo stesso valore del risultato dell'espressione di <code>switch</code> (utilizzando la <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">strict comparison</a>, <code>===</code>); quindi il comando <code>switch</code> trasferisce il controllo alla clausola <code>case</code>, eseguendone i comandi. Se più clausole <code>case</code> sono verificate dal confronto con l'espressione di <code>switch</code>, viene scelta la prima che verifica il confronto, anche se le clausole non sono uguali. Se nessuna clausola <code>case</code> risulta verificata dal confronto, il programma cerca la clausola facoltativa <code>default</code>, e se la trova, trasferisce il controllo a questa, eseguendone i comandi. Se non viene trovata alcuna clausola <code>default</code>, il programma continua eseguendo il comando successivo alla fine del comando <code>switch</code>. Convenzionalmente, ma non necessariamente, la clausola <code>default</code> è l'ultima clausola.</p> + +<p>Il comando facoltativo <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/break" title="JavaScript/Reference/Statements/break">break</a></code> associato a ciascuna etichetta <code>case</code> assicura che, una volta eseguiti i comandi della clausola che verifica l'espressione di <code>switch</code>, il programma interrompa il comando switch e che continui eseguendo il comando successivo. Se il comando <code>break</code> viene omesso, il programma continua l'esecuzione dal comando successivo all'interno del comando di <code>switch</code>, quindi dal primo della successiva clausola <code>case</code>.</p> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Utilizzo_di_switch">Utilizzo di <code>switch</code></h3> + +<p>Nell'esempio seguente, se <code>expr</code> vale "Banane", il programma confronta il valore con la clausola "Banane" ed esegue i comandi associati. Quando incontra <code>break</code>, il programma interrompe il comando <code>switch</code> ed esegue il comando successivo a <code>switch</code>. Se <code>break</code> fosse omesso, sarebbero eseguiti anche i comandi della clausola "Ciliegie".</p> + +<pre class="brush: js">switch (expr) { + case "Arance": + console.log("Le arance costano €1,0 al chilo."); + break; + case "Mele": + console.log("Le mele costano €0.64 al chilo."); + break; + case "Banane": + console.log("Le banane costano €0.92 al chilo."); + break; + case "Ciliege": + console.log("Le ciliegie costano €2.59 al chilo."); + break; + case "Manghi": + case "Papaye": + console.log("I manghi e le papaye costano €1.79 al chilo."); + break; + default: + console.log("Spiacenti, non abbiamo " + expr + "."); +} + +console.log("Desidera qualcos'altro ?"); +</pre> + +<h3 id="Cosa_accade_se_dimentico_un_break">Cosa accade se dimentico un <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(255, 255, 255, 0.4);">break</span></font>?</h3> + +<p>Se vi dimenticate un break, lo script partirà dalla clausola il cui criterio è verificato, e proseguirà con la clausola successiva anche se il criterio non era verifcato. Ecco alcuni esempi:</p> + +<pre class="brush: js">var foo = 0; +switch (foo) { + case -1: + console.log('1 negativo'); + break; + case 0: // foo è 0 quindi il criterio è verificato; questo blocco verrà eseguito + console.log(0); + // NOTA: il break dimenticato sarebbe dovuto essere qui + case 1: // manca il comando break in 'case 0:' quindi anche questo blocco sarà eseguito + console.log(1); + break; // incontra questo break così con proseguirà in 'case 2:' + case 2: + console.log(2); + break; + default: + console.log('default'); +}</pre> + +<h3 id="Posso_mettere_un_default_in_mezzo">Posso mettere un <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(255, 255, 255, 0.4);">default</span></font> in mezzo?</h3> + +<p>Certo che puoi! JavaScript passerà al default se non troverà nessun criterio corrispondente:</p> + +<pre><code>var foo = 5; +switch (foo) { + case 2: + console.log(2); + break; // incontra un break, quindi non procederà automaticamente su "default:" + default: + console.log('default') + // non c'è un break, quindi verrà eseguito anche il contenuto di "case 1:"! + case 1: + console.log('1'); +}</code></pre> + +<p>Funziona anche se metti default prima di ogni altra clausola.</p> + +<h3 id="Riscrivere_molteplici_istruzioni_If_con_Switch">Riscrivere molteplici istruzioni If con Switch</h3> + +<p>Di seguito viene fornito un esempio:</p> + +<pre><code>var a = 100; +var b = NaN; +switch (true) { + case isNaN(a) || isNaN(b): + console.log('NaNNaN'); + break; + case a === b: + console.log(0); + break; + case a < b: + console.log(-1); + break; + default: + console.log(1); +}</code></pre> + + + +<h3 id="Metodi_per_i_case_con_più_criteri">Metodi per i <code>case</code> con più criteri</h3> + +<p>I sorgenti per questa tecnica possono essere scaricati qui:</p> + +<p><a href="http://stackoverflow.com/questions/13207927/switch-statement-multiple-cases-in-javascript">Switch statement multiple cases in JavaScript (Stack Overflow)</a></p> + +<h4 id="Multi-case_-_operazione_singola">Multi-case - operazione singola</h4> + +<p>Questo metodo si avvale del fatto che se non c'è un <code>break</code> break prima di un comando di <code>case</code> continuerà eseguento il successivo comando di <code>case</code> ingnorando se verifica il criterio di esecuzione. Vedi la sezione "Cosa accade se dimentico un <code>break</code>?"</p> + +<p>Questo è un esempio di un comando di switch a singola operazione sequenziale, dove quattro valori diversi realizzano la stessa cosa.</p> + +<pre class="brush: js">var Animale = 'Giraffa'; +switch (Animale) { + case 'Mucca': + case 'Giraffa': + case 'Cane': + case 'Maiale': + console.log('Queso animale anndrà sull'Arca di Noè.'); + break; + case 'Dinosauro': + default: + console.log('Questo animale non andrà.'); +}</pre> + +<h4 id="Multi-case_-_operazioni_concatenate">Multi-case - operazioni concatenate</h4> + +<p>Questo è un esempio di un comando di switch ad operazione multipla sequenziale, dove, a seconda del numero intero fornito, si ricevono diversi output. Mostra come sia possibile sfruttare l'ordine in cui sono scritte le clausole, e come non debbano essere numericamente in sequenza. In JavaScript, si possono anche inserire definizioni di stringhe nei comandi case.</p> + +<pre class="brush: js">var foo = 1; +var output = 'Output: '; +switch (foo) { + case 10: + output += 'quindi '; + case 1: + output += 'quale '; + output += 'è '; + case 2: + output += ' il tuo '; + case 3: + output += 'nome'; + case 4: + output += '?'; + console.log(output); + break; + case 5: + output += '!'; + console.log(output); + break; + default: + console.log('Per favore prendere un numero da 1 a 5 o 10!'); +}</pre> + +<p>Output per questo esempio:</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Valore</th> + <th scope="col">Testo di log</th> + </tr> + <tr> + <td>foo è diverso da 1, 2, 3, 4, 5 or 10</td> + <td>Per favore prendere un numero da 1 a 5 o 10!</td> + </tr> + <tr> + <td>10</td> + <td>Output: quindi quale è il tuo nome?</td> + </tr> + <tr> + <td>1</td> + <td>Output: quale è il tuo nome?</td> + </tr> + <tr> + <td>2</td> + <td>Output: il tuo nome?</td> + </tr> + <tr> + <td>3</td> + <td>Output: nome?</td> + </tr> + <tr> + <td>4</td> + <td>Output: ?</td> + </tr> + <tr> + <td>5</td> + <td>Output: !</td> + </tr> + </tbody> +</table> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifiche</th> + <th scope="col">Status</th> + <th scope="col">Commento</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Definizione iniziale. Relaizzata in JavaScript 1.2</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.11', 'switch statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-switch-statement', 'switch statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-switch-statement', 'switch statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_dei_browser">Compatibilità dei browser</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li><a href="/it-IT/docs/Web/JavaScript/Reference/Statements/if...else"><code>if...else</code></a></li> +</ul> diff --git a/files/it/web/javascript/reference/statements/throw/index.html b/files/it/web/javascript/reference/statements/throw/index.html new file mode 100644 index 0000000000..1aecd9ca9a --- /dev/null +++ b/files/it/web/javascript/reference/statements/throw/index.html @@ -0,0 +1,195 @@ +--- +title: throw +slug: Web/JavaScript/Reference/Statements/throw +tags: + - JavaScript + - Statement +translation_of: Web/JavaScript/Reference/Statements/throw +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>L'istruzione <strong><code>throw</code> </strong>chiama un'eccezione definita dall'utente. L'esecuzione della funzione corrente si interrompe (ovvero i comandi successivi a <code>throw</code> non verranno eseguiti), e il controllo verrà passato al primo blocco <a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch"><code>catch</code></a> nella pila delle chiamate. Se non è previsto nessun blocco <code>catch</code> esiste nella funzione chiamante, il programma verrà terminato.</p> + +<div>{{EmbedInteractiveExample("pages/js/statement-throw.html")}}</div> + +<p class="hidden">Il codice sorgente per questo esempio è disponibile su una repository di GitHub. Se ti piacerebbe contribuire al progetto interattivo d'esempio, clona <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> e poi inviaci una pull request.</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox">throw <em>espressione</em>; </pre> + +<dl> + <dt><code>espressione</code></dt> + <dd>L'espressione da chiamare.</dd> +</dl> + +<h2 id="Descrizione">Descrizione</h2> + +<p>Usa l'istruzione <code>throw</code> per chiamare un'eccezione. Quando chiami un'eccezione, l'<code>espressione</code> specifica il valore dell'eccezione. Ognuna delle seguenti righe chiama un'eccezione.</p> + +<pre class="brush: js">throw 'Error2'; // genera un'eccezione con una stringa con valore Error2 +throw 42; // genera un'eccezione con valore 42 +throw true; // genera un'eccezione con valore true</pre> + +<p>Nota bene che l'istruzione <code>throw</code> viene gestita dall'<a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Automatic_semicolon_insertion">automatic semicolon insertion (ASI)</a> e quindi non puoi andare a capo fra <code>throw</code> e l'espressione.</p> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Chiama_un_oggetto">Chiama un oggetto</h3> + +<p>Puoi specificare un oggetto quando chiami un eccezione. In seguito puoi riportare le proprietà dell'oggetto nel blocco <code>catch</code>. L'esempio seguente crea un oggetto di tipo <code>UserException</code> e poi lo usa nell'istruzione <code>throw</code>.</p> + +<pre class="brush: js">function UserException(message) { + this.message = message; + this.name = 'UserException'; +} +function getMonthName(mo) { + mo = mo - 1; // Adjust month number for array index (1 = Jan, 12 = Dec) + var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', + 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; + if (months[mo] !== undefined) { + return months[mo]; + } else { + throw new UserException('InvalidMonthNo'); + } +} + +try { + // statements to try + var myMonth = 15; // 15 is out of bound to raise the exception + var monthName = getMonthName(myMonth); +} catch (e) { + monthName = 'unknown'; + console.log(e.message, e.name); // pass exception object to err handler +} +</pre> + +<h3 id="Un_altro_esempio_di_chiamata_ad_un_oggetto">Un altro esempio di chiamata ad un oggetto</h3> + +<p>L'esempio seguente testa una stringa in input per un codice postale di avviamento postale (CAP) americano. Se il CAP fornito è in un formato non valido, l'istruzione throw chiama un'eccezione creando un oggetto di tipo <code>ZipCodeFormatException</code>.</p> + +<pre class="brush: js">/* + * Creates a ZipCode object. + * + * Accepted formats for a zip code are: + * 12345 + * 12345-6789 + * 123456789 + * 12345 6789 + * + * If the argument passed to the ZipCode constructor does not + * conform to one of these patterns, an exception is thrown. + */ + +function ZipCode(zip) { + zip = new String(zip); + pattern = /[0-9]{5}([- ]?[0-9]{4})?/; + if (pattern.test(zip)) { + // zip code value will be the first match in the string + this.value = zip.match(pattern)[0]; + this.valueOf = function() { + return this.value + }; + this.toString = function() { + return String(this.value) + }; + } else { + throw new ZipCodeFormatException(zip); + } +} + +function ZipCodeFormatException(value) { + this.value = value; + this.message = 'does not conform to the expected format for a zip code'; + this.toString = function() { + return this.value + this.message; + }; +} + +/* + * This could be in a script that validates address data + * for US addresses. + */ + +const ZIPCODE_INVALID = -1; +const ZIPCODE_UNKNOWN_ERROR = -2; + +function verifyZipCode(z) { + try { + z = new ZipCode(z); + } catch (e) { + if (e instanceof ZipCodeFormatException) { + return ZIPCODE_INVALID; + } else { + return ZIPCODE_UNKNOWN_ERROR; + } + } + return z; +} + +a = verifyZipCode(95060); // returns 95060 +b = verifyZipCode(9560); // returns -1 +c = verifyZipCode('a'); // returns -1 +d = verifyZipCode('95060'); // returns 95060 +e = verifyZipCode('95060 1234'); // returns 95060 1234 +</pre> + +<h3 id="Richiamare_un'eccezione">Richiamare un'eccezione</h3> + +<p>Puoi usare <code>throw</code> per richiamare un'eccezione dopo averla già gestita. L'esempio seguente gestisce un'eccezione con un valore numerico e la richiama se tale valore supera 50. Un'eccezione richiamata si propaga fino alla funzione che la racchiude oppure fino al livello più alto in modo che l'utente la veda.</p> + +<pre class="brush: js">try { + throw n; // throws an exception with a numeric value +} catch (e) { + if (e <= 50) { + // statements to handle exceptions 1-50 + } else { + // cannot handle this exception, so rethrow + throw e; + } +} +</pre> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Definizione iniziale. Implementata in JavaScript 1.4</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.13', 'throw statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-throw-statement', 'throw statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-throw-statement', 'throw statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_dei_browser">Compatibilità dei browser</h2> + +<div class="hidden">La tabella di compatibilità dei browser è generata da dati strutturati. Se ti piacerebbe contribuire ai dati, controlla <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e inviaci una pull request.</div> + +<p>{{Compat("javascript.statements.throw")}}</p> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch"><code>try...catch</code></a></li> +</ul> diff --git a/files/it/web/javascript/reference/statements/var/index.html b/files/it/web/javascript/reference/statements/var/index.html new file mode 100644 index 0000000000..41ee508d3c --- /dev/null +++ b/files/it/web/javascript/reference/statements/var/index.html @@ -0,0 +1,221 @@ +--- +title: var +slug: Web/JavaScript/Reference/Statements/var +tags: + - Dichiarazioni + - Globali + - JavaScript + - Locali + - Valore + - Variabili + - funzione +translation_of: Web/JavaScript/Reference/Statements/var +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>La dichiarazione <strong><code>variabile</code> </strong> dichiara una variabile, opzionalmente inizializzabile ad un valore.</p> + +<div>{{EmbedInteractiveExample("pages/js/statement-var.html")}}</div> + + + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox">var <em>nomevariabile1 [</em>= <em>valore1] [</em>, <em>nomevariabile2 [</em>= <em>valore2] </em><em>... [</em>, <em>nomevariabileN [</em>= <em>valoreN]]]</em>;</pre> + +<dl> + <dt><code>nomevariabileN</code></dt> + <dd>Il nome della variabile. Può essere qualunque identificatore legale.</dd> +</dl> + +<dl> + <dt><code>valoreN</code></dt> + <dd>Valore iniziale della variabile. Può essere qualunque espressione legale. Il valore di default è <em>undefined</em> (non definito).</dd> +</dl> + +<h2 id="Descrizione"> Descrizione</h2> + +<p>Le dichiarazioni di variabile, ovunque appaiano, sono processate prima dell'esecuzione di qualsiasi codice. L'ambiente di una variabile dichiarata con <code>var</code> è il suo attuale <em>contesto di esecuzione</em>, che è la funzione di chiusura o, per le variabili dichiarate al di fuori di qualsiasi funzione, globale. Se si dichiara nuovamente una variabile JavaScript, il suo valore non sarà perso.</p> + +<p>Assegnando un valore a una variabile non dichirata la rende implicitamente globale (diventa una proprietà dell'oggetto) quando viene eseguita. Le differenze fra variabili dichiarate e non dichiarate sono:</p> + +<p>1. Le variabili dichiarate sono legate al contesto in cui sono dichiarate. Quelle non dichiarate sono sempre globali.</p> + +<pre class="brush: js">function x() { + y = 1; // Genera un ReferenceError in strict mode + var z = 2; +} + +x(); + +console.log(y); // scrive "1" in console +console.log(z); // Genera un ReferenceError: z non è definita fuori dalla funzione x +</pre> + +<p>2. Variabili dichiarate sono create prima dell'esecuzione del codice. Variabili non dichiarate non esistono finchè il codice assegnato loro non viene eseguito.</p> + +<pre class="brush: js">console.log(a); // Genera un ReferenceError. +console.log('still going...'); // Non verrà eseguito.</pre> + +<pre class="brush: js">var a; +console.log(a); // scrive in console "undefined" o "" a seconda del browser usato. +console.log('still going...'); // scrive in console "still going...".</pre> + +<p>3. Variabili dichiarate diventano una proprietà non configurabile del loro contesto di esecuzione (funzione o globale). Quelle non dichiarate sono configurabili (per esempio, possono essere cancellate).</p> + +<pre class="brush: js">var a = 1; +b = 2; + +delete this.a; // Genera un TypeError in strict mode. Altrimenti fallisce senza generare messaggi. +delete this.b; + +console.log(a, b); // Genera un ReferenceError. +// La proprietà 'b' è stata cancellata e non esiste più.</pre> + +<p>A causa di queste tre differenze, il fallimento della dichiarazione di variabile porta molto probabilmente a risultati inaspettati. Pertanto <strong>è raccomandato di dichiarare sempre le variabili, indipendentemente dal loro contesto di appartenenza (funzione o globale).</strong> In ECMAScript 5 <a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode">strict mode</a>, assegnare una variabile non dichiarata genera un errore.</p> + +<h3 id="Hoisting_di_var">Hoisting di var</h3> + +<p>Poichè le dichiarazioni di variabile (come le dichiarazioni in generale) sono processate prima dell'esecuzione del codice, dichiararne una in qualsiasi punto del codice è equivalente al dichiararle in cima. Questo significa anche che quella variabile può essere usata prima della dichiarazione. Questo comportamento è chiamato "hoisting" (sollevamento, innalzamento), poichè sembra che la dichiarazione di variabile sia portata in cima alla funzione o al codice globale.</p> + +<pre class="brush: js">bla = 2; +var bla; +// ... + +// è implicitamente interpretato come: + +var bla; +bla = 2; +</pre> + +<p>Per questa ragione, è consigliato sempre dichiarare le variabili in cima al loro ambiente (in cima al codice globale o della funzione in cui appaiono) al fine di rendere chiaro quali variabili appartengono alle funzioni (locali) e quali no.</p> + +<p>È importante precisare che l'hoisting è applicato alla dichiarazione della variabile, ma non all'inizializzazione del suo valore. Il valore verrà infatti assegnato al raggiungimento della dichiarazione :</p> + +<pre class="brush: js">function fai_qualcosa() { + console.log(bar); // non definito + var bar = 111; + console.log(bar); // 111 +} + +// è implicitamente interpretato come: +function fai_qualcosa() { + var bar; + console.log(bar); // non definito + bar = 111; + console.log(bar); // 111 +} +</pre> + +<p> </p> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Dichiarare_e_inizializzare_due_variabili">Dichiarare e inizializzare due variabili</h3> + +<pre class="brush: js">var a = 0, b = 0; +</pre> + +<h3 id="Assegnare_un_singolo_valore_stinga_a_due_variabili">Assegnare un singolo valore stinga a due variabili</h3> + +<pre class="brush: js">var a = 'A'; +var b = a; + +// è come dire: + +var a, b = a = 'A'; +</pre> + +<p>Prestare attenzione all'ordine:</p> + +<pre class="brush: js">var x = y, y = 'A'; +console.log(x + y); // non definito +</pre> + +<p>Qui, <code>x</code> e <code>y</code> sono dichiarate prima dell'esecuzione del codice, gli assegnamenti verranno eseguiti in seguito. Nel momento in cui "<code>x = y</code>" viene valutato, <code>y</code> esiste quindi nessun <code>ReferenceError</code> viene generato e il suo valore risulta essere '<code>undefined</code>' (non definit). Quindi, <code>x</code> è assegnata ad un valore non definito. Ora, ad <code>y</code> è assegnato il valore 'A'. Di conseguenza, dopo la prima riga, <code>x === undefined && y === 'A'</code>. Da qui il risultato.</p> + +<h3 id="Inizializzazione_di_più_variabili">Inizializzazione di più variabili</h3> + +<pre class="brush: js">var x = 0; + +function f() { + var x = y = 1; // x è dichiarata localmente. y invece no! +} +f(); + +console.log(x, y); // Genera un ReferenceError in strict mode (y non è definita). 0, 1 altrimenti. +// In modalità non-strict mode: +// x è la globale come si ci aspettava +// però, y è uscita fuori dalla funzione!</pre> + +<h3 id="Globali_implicite_e_ambienti_esterni_alle_funzioni">Globali implicite e ambienti esterni alle funzioni</h3> + +<p><span lang="it">Le variabili che sembrano essere globali implicite possono essere riferimenti a variabili nell'ambito di una funzione esterna:</span></p> + +<pre class="brush: js">var x = 0; // x è dichiarata dentro l'ambiente file, poi le è assegnato valore 0 + +console.log(typeof z); // undefined, poichè z ancora non esiste + +function a() { // quando a è chiamata, + var y = 2; // y è dichiarata dentro l'ambiente della funzione a, e le è assegnato valore 2 + + console.log(x, y); // 0 2 + + function b() { // quando b è chiamata + x = 3; // assegna 3 all'esistente ambiente x, non crea una nuova variabile globale + y = 4; // assegna 4 all'esistente esterna y, non crea una nuova variabile globale + z = 5; // crea una nuova variabile globale z e le assegna valore 5. + } // (Throws a ReferenceError in strict mode.) + + b(); // chiamare b crea z come variabile globale + console.log(x, y, z); // 3 4 5 +} + +a(); // chiamando a si richiama b +console.log(x, z); // 3 5 +console.log(typeof y); // non definito, perchè y è locale alla funzione a</pre> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definizione iniziale, implementata in JavaScript 1.0</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.2', 'var statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-variable-statement', 'variable statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-variable-statement', 'variable statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_Browser">Compatibilità Browser</h2> + + + +<p>{{Compat("javascript.statements.var")}}</p> + +<h2 id="Guarda_anche">Guarda anche</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/let"><code>let</code></a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/const"><code>const</code></a></li> +</ul> diff --git a/files/it/web/javascript/reference/template_strings/index.html b/files/it/web/javascript/reference/template_strings/index.html new file mode 100644 index 0000000000..5bb4890ad8 --- /dev/null +++ b/files/it/web/javascript/reference/template_strings/index.html @@ -0,0 +1,210 @@ +--- +title: Stringhe template +slug: Web/JavaScript/Reference/template_strings +translation_of: Web/JavaScript/Reference/Template_literals +--- +<div>{{JsSidebar("More")}}</div> + +<p>Le stringhe template sono stringhe letterali che consentono espressioni incorporate. Puoi usare stringhe multi-linea e caratteristiche di interpolazione stringa con esse.</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox">`stringa testo` + +`stringa testo linea 1 + stringa testo linea 2` + +`stringa testo ${espressione} stringa testo` + +tag `stringa testo ${espressione} stringa testo` +</pre> + +<h2 id="Descrizione">Descrizione</h2> + +<p>Le stringhe template sono racchiuse dal carattere backtick (` `) (<a href="https://it.wikipedia.org/wiki/Accento_grave">accento grave</a>) invece delle singole o doppie virgolette. Le stringhe template possono contenere segnaposti. Questi sono indicati dal segno del Dollaro e parentesi graffe (<code>${espressione}</code>). Le espressioni nei segnaposti e nel testo compreso vengono passati ad una funzione. La funzione predefinita semplicemente concatena le parti in una stringa. Se c'è un'espressione che precede (<code>tag</code> qui), la stringa template è chiamata "stringa template taggata". In questo caso, l'espressione tag (di solito una funzione) viene chiamata con la stringa template processata, con cui puoi in seguito manipolare prima dell'output.</p> + +<h3 id="Stringhe_multilinea">Stringhe multilinea</h3> + +<p>Ogni carattere di nuova linea inseriti nel sorgente sono parte della stringa template. Usando stringhe normali, potresti usare la seguente sintassi per ottenere stringhe multilinea:</p> + +<pre class="brush: js">console.log("stringa testo linea 1\n"+ +"stringa testo linea 2"); +// "stringa testo linea 1 +// stringa testo linea 2"</pre> + +<p>Per avere lo stesso effetto con le stringhe multilinea, puoi adesso scrivere:</p> + +<pre class="brush: js">console.log(`stringa testo linea 1 +stringa testo linea 2`); +// "stringa testo linea 1 +// stringa testo linea 2"</pre> + +<h3 id="Interpolazione_di_espressioni">Interpolazione di espressioni</h3> + +<p>Per incorporare espressioni dentro normale stringhe, potresti fare uso della seguente sintassi:</p> + +<pre class="brush: js">var a = 5; +var b = 10; +console.log("Quindici è " + (a + b) + " e\nnon " + (2 * a + b) + "."); +// "Quindici è 15 e +// non 20."</pre> + +<p>Adesso, con le stringhe template, puoi fare uso della sintassi ridotta facendo sostituzioni come questa più leggibile:</p> + +<pre class="brush: js">var a = 5; +var b = 10; +console.log(`Quindici è ${a + b} e\nnon ${2 * a + b}.`); +// "Quindici è 15 e +// non 20."</pre> + +<h3 id="Stringhe_template_taggate">Stringhe template taggate</h3> + +<p>Una forma più avanzata di stringhe template sono le stringhe template <em>taggate</em>. Con esse puoi modificare l'output delle stringhe template usando una funzione. Il primo argomento contiene un array di stringhe letterali ("Ciao" e " mondo" in questo esempio). Il secondo, ed ogni argomento dopo il primo, sono i valori delle espressioni di sostituzione ("15" e "50" qui) processate (o a volte detto <em>lavorate</em>). Alla fine, la tua funzione ritorna la stringa manipolata. Non c'è nulla di speciale sul nome tag nel seguente esempio. Il nome della funzione può essere qualsiasi cosa tu voglia.</p> + +<pre class="brush: js">var a = 5; +var b = 10; + +function tag(strings, ...values) { + console.log(strings[0]); // "Ciao " + console.log(strings[1]); // " mondo " + console.log(values[0]); // 15 + console.log(values[1]); // 50 + + return "Bazinga!"; +} + +tag`Ciao ${ a + b } mondo ${ a * b }`; +// "Bazinga!" +</pre> + +<p>Le funzioni Tag non devono per forza ritornare una stringa, come mostrato nel seguente esempio.</p> + +<pre class="brush: js">function template(strings, ...keys) { + return (function(...values) { + var dict = values[values.length - 1] || {}; + var result = [strings[0]]; + keys.forEach(function(key, i) { + var value = Number.isInteger(key) ? values[key] : dict[key]; + result.push(value, strings[i + 1]); + }); + return result.join(''); + }); +} + +template`${0}${1}${0}!`('Y', 'A'); // "YAY!" +template`${0} ${'foo'}!`('Ciao', {foo: 'Mondo'}); // "Ciao Mondo!" +</pre> + +<h3 id="Stringhe_grezze">Stringhe grezze</h3> + +<p>La proprietà speciale <code>raw</code>, disponibile sull'argomento della prima funzione delle stringhe template taggate, ti consente di accedere alle stringhe grezze per come sono state inserite.</p> + +<pre class="brush: js">function tag(strings, ...values) { + console.log(strings.raw[0]); + // "stringa testo linea 1 \\n stringa testo linea 2" +} + +tag`stringa testo linea 1 \n stringa testo linea 2`; +</pre> + +<p>In aggiunta, il metodo {{jsxref("String.raw()")}} esiste per creare stringhe grezze proprio come la funzione template predefinita e contatenazione di stringhe potrebbero creare.</p> + +<pre class="brush: js">String.raw`Salve\n${2+3}!`; +// "Salve\n5!"</pre> + +<h2 id="Sicurezza">Sicurezza</h2> + +<p>Le stringhe template <strong>NON DEVONO</strong> essere costruite da utenti non fidati, poichè hanno accesso a variabili e funzioni.</p> + +<pre class="brush: js">`${console.warn("this is",this)}`; // "this is" Window + +let a = 10; +console.warn(`${a+=20}`); // "30" +console.warn(a); // 30 +</pre> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-template-literals', 'Template Literals')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Definizione iniziale. Definita in molte sezioni della specifica: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-template-literals">Template Literals</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-tagged-templates">Tagged Templates</a></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-template-literals', 'Template Literals')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Definita in molte sezioni della specifica: <a href="https://tc39.github.io/ecma262/#sec-template-literals">Template Literals</a>, <a href="https://tc39.github.io/ecma262/#sec-tagged-templates">Tagged Templates</a></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_browser">Compatibilità browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Caratteristica</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Supporto base</td> + <td>{{CompatChrome(41)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("34")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatOpera(28)}}</td> + <td>{{CompatSafari(9)}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Caratteristica</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Supporto base</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(41)}}</td> + <td>{{CompatGeckoMobile("34")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatOpera(28)}}</td> + <td>{{CompatSafari(9)}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>{{jsxref("String")}}</li> + <li>{{jsxref("String.raw()")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar">Grammatica lessica</a></li> + <li><a href="https://gist.github.com/WebReflection/8f227532143e63649804">Stringhe di tipo template in sintassi compatibile con ES3</a></li> + <li><a href="https://hacks.mozilla.org/2015/05/es6-in-depth-template-strings-2/">"ES6 in profondità: Stringhe template" su hacks.mozilla.org</a></li> +</ul> diff --git a/files/it/web/javascript/una_reintroduzione_al_javascript/index.html b/files/it/web/javascript/una_reintroduzione_al_javascript/index.html new file mode 100644 index 0000000000..4dc4a484a7 --- /dev/null +++ b/files/it/web/javascript/una_reintroduzione_al_javascript/index.html @@ -0,0 +1,966 @@ +--- +title: Una reintroduzione al Java Script (Tutorial JS) +slug: Web/JavaScript/Una_reintroduzione_al_JavaScript +translation_of: Web/JavaScript/A_re-introduction_to_JavaScript +--- +<h2 id="Introduzione">Introduzione</h2> + +<p>Perchè una reintroduzione? Perchè <a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a> ha la ragionevole pretesa di essere <a class="external" href="http://javascript.crockford.com/javascript.html">il linguaggio di programmazione più frainteso del mondo</a>. Benchè spesso considerato ironicamente come un giocattolo, la sua ingannevole semplicità nasconde alcune potenti caratteristiche. JavaScript viene attualmente utilizzato da un numero incredibile di applicazioni di alto profilo, che mostrano come la conoscenza profonda di questa tecnologia sia un importante abilità per qualunque sviluppatore web.</p> + +<p>È utile iniziare con un accenno alla storia del linguaggio. JavaScript fu creato nel 1995 da Brendan Eich, mentre lavorava come ingegnere presso Netscape, e rilasciata per la prima volta con Netscape 2 all'inizio del 1996. Originariamente doveva essere chiamato LiveScript, ma fu poi rinominato in Javacript per una fatalmente dannosa decisione di marketing che tentava di approfittare della popolarità del linguaggio Java della Sun Microsystem — nonostante abbiano molto poco in comune. <span class="short_text" id="result_box" lang="it"><span class="hps">Questa è stata una</span> <span class="hps">fonte di confusione</span> <span class="hps">da allora.</span></span></p> + +<p>Diversi mesi dopo, Microsoft rilasciò JScript con Internet Explorer 3, un linguaggio che lavorava in modo simile a JavaScript ed era quasi del tutto compatibile con esso. Netscape sottomise il linguaggio alla <a class="external" href="http://www.ecma-international.org/">Ecma International</a>, un'organizzazione europea di standardizzazione, che porta alla nascita della prima edizione degli standard <a href="/en-US/docs/JavaScript/Language_Resources" title="ECMAScript">ECMAScript</a>. Lo standard ricevette un significativo aggiornamento come <a class="external" href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">ECMAScript edition 3</a> nel 1999, ed è rimasto più o meno stabile da allora. La quarta edizione fu abbandonata a causa delle differenze di vedute sulla complessità del linguaggio. Molte parti della quarta edizione formano la base del nuovo ECMAScript edizione 5, pubblicato nel dicembre del 2009, e per la sesta edizione pubblicata a giugno 2015.</p> + +<p>Diversamente dalla maggior parte dei linguaggi di programmazione, il linguaggio JavaScript non ha il concetto di input e output. È stato concepito per essere eseguito come linguaggio di scripting in un ambiente ospite, ed è responsabilità dell'ambiente ospite fornire meccanismi per comunicare con il mondo esterno. L'ambiente ospite più comune è il browser, ma interpreti JavaScript possono essere trovati anche in Adobe Acrobat, Photoshop, motore Widget di Yahoo! , e addirittura in ambienti lato server o in desktop environment come GNOME (una delle GUI più popolari per i sistemi GNU/Linux) e altri ancora.</p> + +<h2 id="Panoramica">Panoramica</h2> + +<p>JavaScript è un linguaggio dinamico orientato agli oggetti; esso ha tipi e operatori, oggetti nucleo, e metodi. La sua sintassi deriva dai linguaggi Java e C, quindi molte strutture utilizzate da questi linguaggi ricorrono anche in JavaScript. Una delle differenze chiave è che JavaScript non ha classi; invece, la funzionalità di classe è realizzata dai prototipi oggetto. L'altra differenza principale è che le funzioni sono oggetti, dando alle funzioni la capacità di mantenere codice eseguibile ed essere passate in giro come ogni altro oggetto.</p> + +<p><span id="result_box" lang="it"><span class="hps">Cominciamo</span> <span class="hps">guardando il</span> <span class="hps">blocco di costruzione</span> <span class="hps">di qualsiasi linguaggio</span></span>: i tipi. I programmmi JavaScript manipolano valori, e tutti quei valori appartengono ad un tipo. I tipi JavaScript sono:</p> + +<ul> + <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Number" title="JavaScript/Reference/Global_Objects/Number">Numeri</a></li> + <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String" title="JavaScript/Reference/Global_Objects/String">Stringhe</a></li> + <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Boolean" title="JavaScript/Reference/Global_Objects/Boolean">Booleani</a></li> + <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function" title="JavaScript/Reference/Global_Objects/Function">Funzioni</a></li> + <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object" title="JavaScript/Reference/Global_Objects/Object">Oggetti</a></li> +</ul> + +<p>... oh, e Undefined (indefiniti) e Null (nulli), che sono leggermente strani. E gli <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array" title="JavaScript/Reference/Global_Objects/Array">Array</a>, che sono un tipo speciale di oggetto. E <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Date" title="JavaScript/Reference/Global_Objects/Date">Date</a> ed <a href="/en-US/docs/JavaScript/Reference/Global_Objects/RegExp" title="JavaScript/Reference/Global_Objects/RegExp">Espressioni regolari</a>, che sono oggetti che si ottengono gratuitamente. E per essere tecnicamente precisi, le funzioni sono solo un tipo speciale di oggetto. Quindi il diagramma dei tipi somiglia più a questo:</p> + +<ul> + <li>Numeri</li> + <li>Stringhe</li> + <li>Booleani</li> + <li>Oggetti + <ul> + <li>Funzioni</li> + <li>Array</li> + <li>Date</li> + <li>ExpReg</li> + </ul> + </li> + <li>Null</li> + <li>Undefined</li> +</ul> + +<p>E ci sono anche alcuni tipi nativi di <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Error" title="JavaScript/Reference/Global_Objects/Error">Errori</a>. Comunque, le cose sono molto più semplici se ci atteniamo al primo diagramma</p> + +<h2 id="Numeri">Numeri</h2> + +<p>I numeri in JavaScript sono in formato 64-bit a doppia precisione valore del IEEE 754, secondo le specifiche. Questo ha qualche interessante conseguenza. <span id="result_box" lang="it"><span class="hps">Non esiste una cosa</span> <span class="hps">come</span> <span class="hps">un intero</span> <span class="hps">in JavaScript,</span> <span class="hps">quindi bisogna</span> stare<span class="atn hps"> un pò </span><span>attenti con</span> <span class="hps">la vostra aritmetica</span><span>, se</span> <span class="hps">siete abituati alla</span> <span class="hps">matematica</span> <span class="hps">in C</span> <span class="hps">o Java</span></span>. Stare attenti a cose come:</p> + +<pre class="eval notranslate">0.1 + 0.2 == 0.30000000000000004 +</pre> + +<p>In pratica, i valori interi sono trattati come int a 32-bit (e sono memorizzati in questo modo in alcune implementazioni dei browser), che può essere importante per operazioni in bit. Per dettagli, consulta <a class="external" href="http://www.hunlock.com/blogs/The_Complete_Javascript_Number_Reference" title="http://www.hunlock.com/blogs/The_Complete_Javascript_Number_Reference">La Guida Completa sui Numeri JavaScript</a>.</p> + +<p>Gli <a href="/en-US/docs/JavaScript/Reference/Operators/Arithmetic_Operators" title="JavaScript/Reference/Operators/Arithmetic_Operators">operatori numerici</a> standard sono supportati, incluso addizione, sottrazione, modulo (o resto) aritmetico e così via. Vi sono anche oggetti nativi che non sono stati menzionati prima, chiamati <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Math" title="JavaScript/Reference/Global_Objects/Math">Math</a> per trattare funzioni matematiche più avanzate e costanti:</p> + +<pre class="brush: js notranslate">Math.sin(3.5); +var d = Math.PI * r * r; +</pre> + +<p>E' possibile convertire una stringa in un intero utilizzando la funzione nativa <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/parseInt" title="JavaScript/Reference/Global_Functions/parseInt">parseInt()</a></code>. Questo prende la base per la conversione come secondo argomento opzionale, che si dovrebbe fornire sempre:</p> + +<pre class="brush: js notranslate">> parseInt("123", 10) +123 +> parseInt("010", 10) +10 +</pre> + +<p>Se non si fornisce la base, si possono ricevere risultati inattesi:</p> + +<pre class="brush: js notranslate">> parseInt("010") +8 +</pre> + +<p>Questo succede perchè la funzione <code>parseInt</code> ha deciso di trattare la stringa come un ottale a causa del primo 0.</p> + +<p>Se si vuole convertire un numero binario in un intero, basta cambiare la base:</p> + +<pre class="brush: js notranslate">> parseInt("11", 2) +3 +</pre> + +<p>Similmente, è possibile analizzare numeri in virgola mobile usando la funzione nativa <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/parseFloat" title="JavaScript/Reference/Global Objects/parseFloat">parseFloat()</a></code> che utilizza sempre la base 10 diversamente dalla cugina <a href="/en-US/docs/JavaScript/Reference/Global_Objects/parseInt" title="JavaScript/Reference/Global Objects/parseInt"><code>parseInt()</code></a>.</p> + +<p>E' inoltre possibile utilizzare l'operatore unario <code>+</code> per convertire valori in numeri:</p> + +<pre class="notranslate">> + "42" +42 +</pre> + +<p>Un valore speciale chiamato <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/NaN" title="JavaScript/Reference/Global_Properties/NaN">NaN</a></code> (abbreviazione per "Not a Number" - Non un Numero) viene restituita se la stringa non è numerica:</p> + +<pre class="brush: js notranslate">> parseInt("hello", 10) +NaN +</pre> + +<p>Il <code>NaN</code> è tossico: se viene fornito come input a qualsiasi operazione matematica, il risultato sarà anch'esso <code>NaN</code>:</p> + +<pre class="brush: js notranslate">> NaN + 5 +NaN +</pre> + +<p>E' possibile verificare se <code>NaN</code> usando la funzione nativa <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/isNaN" title="JavaScript/Reference/Global_Functions/isNaN">isNaN()</a></code>:</p> + +<pre class="brush: js notranslate">> isNaN(NaN) +true +</pre> + +<p>Anche JavaScript ha i valori speciali <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity" title="JavaScript/Reference/Global_Properties/Infinity">Infinity</a></code> e <code>-Infinity</code>:</p> + +<pre class="brush: js notranslate">> 1 / 0 +Infinity +> -1 / 0 +-Infinity +</pre> + +<p>E' possibile analizzare i valori <code>Infinity</code>, <code>-Infinity</code> e <code>NaN</code> usando la funzione nativa <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/isFinite" title="JavaScript/Reference/Global_Functions/isFinite">isFinite()</a></code>:</p> + +<pre class="brush: js notranslate">> isFinite(1/0) +false +> isFinite(-Infinity) +false +> isFinite(NaN) +false +</pre> + +<div class="note"><strong>Nota:</strong> Le funzioni <a href="/en-US/docs/JavaScript/Reference/Global_Objects/parseInt" title="JavaScript/Reference/Global Objects/parseInt"><code>parseInt()</code></a> e <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/parseFloat" title="JavaScript/Reference/Global Objects/parseFloat">parseFloat()</a></code> analizzano una stringa finchè raggiungono un carattere che è non è valido per il formato numerico specificato, quindi restituiscono il numero analizzato fino a quel punto. Tuttavia l'operatore "+" converte semplicemente la stringa a <code>NaN</code> se è presente in essa qualche carattere invalido. E' sufficiente provare ad eseguire l'analisi della stringa "10.2abc" con ogni metodo da soli utilizzando la console e sarà possibile capire meglio le differenze.</div> + +<h2 id="Stringhe">Stringhe</h2> + +<p>Le stringhe in JavaScript sono sequenze di caratteri. Più precisamente, sono sequenze di <a href="/en-US/docs/JavaScript/Guide/Obsolete_Pages/Unicode" title="JavaScript/Guide/Unicode">Caratteri Unicode</a>, con ogni carattere rappresentato da un numero a 16-bit. <span id="result_box" lang="it"><span class="alt-edited hps">Questa dovrebbe essere</span> <span class="alt-edited hps">una buona notizia per</span> <span class="hps">tutti coloro che hanno</span> <span class="hps">avuto a che fare</span> <span class="hps">con l'internazionalizzazione</span><span>.</span></span></p> + +<p>Se si vuole rappresentare un singolo carattere, occorre semplicemente utilizzare una stringa di lunghezza 1.</p> + +<p>Per trovare la lunghezza di una stringa, accedere la sua proprietà <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/length" title="JavaScript/Reference/Global_Objects/String/length">length</a></code>:</p> + +<pre class="brush: js notranslate">> "hello".length +5 +</pre> + +<p>Ecco il nostro primo assaggio degli oggetti JavaScript! E' stato menzionato che le stringhe sono anch'esse oggetti? Ed hanno anche <a href="/en-US/docs/JavaScript/Reference/Global_Objects/String#Methods" title="JavaScript/Reference/Global_Objects/String#Methods">metodi</a>:</p> + +<pre class="brush: js notranslate">> "hello".charAt(0) +h +> "hello, world".replace("hello", "goodbye") +goodbye, world +> "hello".toUpperCase() +HELLO +</pre> + +<h2 id="Altri_tipi">Altri tipi</h2> + +<p>JavaScript distingue tra <code>null</code>, che è un oggetto di tipo 'object' che indica un mancanza deliberata di valore, e <code>undefined</code>, che è un oggetto di tipo 'undefined' che indica un valore non inizializzato — ossia un valore che non è stato ancora assegnato. Parleremo delle variabili più avanti, ma in JavaScript è possibile dichiarare una variabile senza assegnarle un valore. Facendo questo, il tipo della variabile creata sarà <code>undefined</code>.</p> + +<p>JavaScript ha il tipo booleano, con possibili valori <code>true</code> (vero) e <code>false</code> (falso) (entrambi i quali sono parole chiave). Qualunque valore può essere convertito in booleano seguendo le seguenti regole:</p> + +<ol> + <li><code>false</code>, <code>0</code>, la stringa vuota (<code>""</code>), <code>NaN</code>, <code>null</code>, e <code>undefined</code> diventano tutti <code>false</code></li> + <li>tutti gli altri valori diventano <code>true</code></li> +</ol> + +<p>E' possibile eseguire questa conversione esplicitamente usando la funzione <code>Boolean()</code>:</p> + +<pre class="brush: js notranslate">> Boolean("") +false +> Boolean(234) +true +</pre> + +<p>Tuttavia, questo raramente è necessario, JavaScript eseguirà silenziosamente la conversione quando si aspetta un booleano, così come in una istruzione <code>if</code> (vedi sotto). Per questa ragione, a volte si parla semplicemente di "valori veri" e "valori falsi" valori significativi che diventano <code>true</code> e <code>false</code>, rispettivamente, quando convertiti in booleani. <span id="result_box" lang="it"><span class="hps">In alternativa</span><span>,</span> <span class="hps">tali valori</span> <span class="hps">possono</span> <span class="hps">essere</span> <span class="hps">chiamati</span> <span class="atn hps">"</span><span>truthy</span><span>"</span> <span class="hps">e</span> <span class="atn hps">"</span><span>falsy</span><span>"</span><span>,</span> <span class="hps">rispettivamente</span><span>.</span></span></p> + +<p>Le operazioni booleane come <code>&&</code> (<em>and</em> logico), <code>||</code> (<em>or </em>logico), e <code>!</code> (<em>not </em>logico) sono supportate; vedi sotto.</p> + +<h2 id="Variabili">Variabili</h2> + +<p>Le nuove varibili sono dichiarate in JavaScript utilizzando la parola chiave <code><a href="/en-US/docs/JavaScript/Reference/Statements/var" title="JavaScript/Reference/Statements/var">var</a></code>:</p> + +<pre class="brush: js notranslate">var a; +var name = "simon"; +</pre> + +<p>Se la variabile viene dichiarata senza assegnarle un valore, il suo tipo sarà <code>undefined</code>. </p> + +<p>Una differenza importante rispetto ad altri linguaggi come Java è che in JavaScript, i blocchi non hanno ambito; solo le funzioni hanno ambito. Quindi se una variabile viene definita utilizzando <code>var</code> in una istruzione composta (ad esempio all'interno di una struttura di controllo <code>if</code>), essa sarà visibile da parte dell'intera funzione.</p> + +<h2 id="Operatori">Operatori</h2> + +<p>Gli operatori numerici in JavaScript sono <code>+</code>, <code>-</code>, <code>*</code>, <code>/</code> e <code>%</code> - che è l'operatore per il resto. I valori sono assegnanti usando <code>=</code>, e vi sono anche le istruzioni di assegnamento composte tipo <code>+=</code> e <code>-=</code>. Questi comprimono la forma <code>x = x <em>operatore</em> y</code>.</p> + +<pre class="brush: js notranslate">x += 5 +x = x + 5 +</pre> + +<p>E' possibile utilizzare <code>++</code> e <code>--</code> per incrementare e decrementare rispettivamente. Questi possono essere usati come operatori prefissi o postfissi.</p> + +<p>L'<a href="/en-US/docs/JavaScript/Reference/Operators/String_Operators" title="JavaScript/Reference/Operators/String_Operators">operatore +</a> compie anche la concatenazione di stringhe:</p> + +<pre class="brush: js notranslate">> "hello" + " world" +hello world +</pre> + +<p>Se si somma una stringa ad un numero (o ad un altro valore) tutto viene convertito dalla prima stringa. Questo esempio potrebbe aiutare a chiarire il tutto:</p> + +<pre class="brush: js notranslate">> "3" + 4 + 5 +345 +> 3 + 4 + "5" +75 +</pre> + +<p>Sommare una stringa vuota ad un altro tipo è un utile maniera per convertirlo.</p> + +<p>I <a href="/en-US/docs/JavaScript/Reference/Operators/Comparison_Operators" title="JavaScript/Reference/Operators/Comparison_Operators">confronti</a> in JavaScript possono essere eseguiti usando <code><</code>, <code>></code>, <code><=</code> e <code>>=</code>. Essi funzionano sia per le stringhe che per i numeri. L'uguaglianza è un pochino meno lineare. L'operatore di doppio uguale esegue la coercizione di tipo se viene eseguita tra tipi differenti, con a volte risultati interessanti:</p> + +<pre class="brush: js notranslate">> "dog" == "dog" +true +> 1 == true +true +</pre> + +<p>Per evitare la coercizione di tipo, si utilizza l'operatore triplo uguale:</p> + +<pre class="brush: js notranslate">> 1 === true +false +> true === true +true +</pre> + +<p>Vi sono anche gli operatori !<code>=</code> e <code>!==</code> .</p> + +<p>JavaScript ha inoltre le <a href="/en-US/docs/JavaScript/Reference/Operators/Bitwise_Operators" title="JavaScript/Reference/Operators/Bitwise_Operators">operazioni bit per bit</a>. Se si desidera utilizzarle, sono lì.</p> + +<h2 id="Strutture_di_controllo">Strutture di controllo</h2> + +<p>JavaScript ha una serie di strutture di controllo simili agli altri linguaggi della famiglia del C. Le istruzioni condizionali sono supportate da <code>if</code> e <code>else </code>(se e altrimenti) che possono essere concatenati insieme se desiderato:</p> + +<pre class="brush: js notranslate">var name = "kittens"; +if (name == "puppies") { + name += "!"; +} else if (name == "kittens") { + name += "!!"; +} else { + name = "!" + name; +} +name == "kittens!!" +</pre> + +<p>JavaScript ha il ciclo <code>while</code> ed il ciclo <code>do-while</code>. Il primo è utile per un ciclo basico; il secondo per i cicli che si vuole essere sicuri che vengano eseguiti almeno una volta:</p> + +<pre class="brush: js notranslate">while (true) { + // an infinite loop! +} + +var input; +do { + input = get_input(); +} while (inputIsNotValid(input)) +</pre> + +<p>Il ciclo <code>for</code> in JavaScript è lo stesso che in C e Java: esso permette di fornire le informazioni di controllo per il ciclo in una linea singola.</p> + +<pre class="brush: js notranslate">for (var i = 0; i < 5; i++) { + // Will execute 5 times +} +</pre> + +<p>Gli operatori <code>&&</code>(<em>and</em> logico) e <code>||</code>(<em>or</em> logico) usano un corto-circuito logico, questo significa che quando vengono eseguiti il secondo operando è dipendente dal primo. Questo è utile per verificare oggetti nulli prima di accedere ai loro attributi:</p> + +<pre class="brush: js notranslate">var name = o && o.getName(); +</pre> + +<p>Oppure per impostare valori di default:</p> + +<pre class="brush: js notranslate">var name = otherName || "default"; +</pre> + +<p>JavaScript ha un operatore ternario per espressioni condizionali:</p> + +<pre class="brush: js notranslate">var allowed = (age > 18) ? "yes" : "no"; +</pre> + +<p><span id="result_box" lang="it"><span class="hps">L'istruzione switch</span> <span class="alt-edited hps">può essere utilizzata per</span> <span class="alt-edited hps">più diramazioni</span> <span class="hps">sulla base di un</span> <span class="hps">numero o una stringa</span></span>:</p> + +<pre class="brush: js notranslate">switch(action) { + case 'draw': + drawit(); + break; + case 'eat': + eatit(); + break; + default: + donothing(); +} +</pre> + +<p>Se non viene inserita l'istruzione <code>break</code>, l'esecuzione "naufragherà" nel prossimo livello. Questo è raramente il risultato voluto — <span id="result_box" lang="it"><span class="hps">in realtà</span> <span class="hps">vale la pena</span> <span class="hps">in particolare</span> inserire un <span class="hps">etichettatura</span> <span class="hps">deliberatamente </span><span class="hps">con</span> <span class="hps">un commento,</span> <span class="hps">se vi</span> <span class="hps">vuole</span> <span class="hps">aiutare</span> <span class="hps">il debug</span></span>:</p> + +<pre class="brush: js notranslate">switch(a) { + case 1: // fallthrough + case 2: + eatit(); + break; + default: + donothing(); +} +</pre> + +<p>La clausula default è opzionale. Si possono avere espressioni sia nello switch sia che nel case se si vuole<span class="translation">;</span> <span id="result_box" lang="it"><span class="hps">i confronti</span> <span class="hps">avvengono tra</span> <span class="hps">i due</span> <span class="hps">con</span> <span class="hps">l'operatore ===</span></span>:</p> + +<pre class="brush: js notranslate">switch(1 + 3) { + case 2 + 2: + yay(); + break; + default: + neverhappens(); +} +</pre> + +<h2 id="Oggetti">Oggetti</h2> + +<p>Gli oggetti JavaScript sono semplicemente collezioni di coppie nome-valore. <span class="short_text" id="result_box" lang="it"><span class="hps">Come tali</span><span>,</span> <span class="hps">essi sono</span> <span class="hps">simili a</span></span>:</p> + +<ul> + <li>Dizionari in Python</li> + <li>Hashes in Perl e Ruby</li> + <li>Hash tables in C e C++</li> + <li>HashMaps in Java</li> + <li>Array associativi in PHP</li> +</ul> + +<p>Il fatto che questa struttura dati è così diffusa è la prova della sua versatilità. Dal momento che tutto (barra i tipi base) in JavaScript è un oggetto, qualunque programma JavaScript implica naturalmente un grande ricorso alla ricerca nelle tabelle hash. E' buona cosa che siano così veloci!</p> + +<p>La parte "name" è una stringa JavaScript, mentre il valore può essere qualunque valore JavaScript — incluso più oggetti. Questo permette di costruire strutture dati di complessità arbitraria.</p> + +<p>Ci sono due modalità di base per creare un oggetto vuoto:</p> + +<pre class="brush: js notranslate">var obj = new Object(); +</pre> + +<p>E:</p> + +<pre class="brush: js notranslate">var obj = {}; +</pre> + +<p>Entrambe sono semanticamente equivalenti; la seconda è chiamata sintassi letterale dell'oggetto, ed è più conveniente. Questa sintassi è anche la base del formato JSON e dovrebbe essere preferita ogni volta.</p> + +<p>Una volta creato si può accedere alle proprietà di un oggetto in una o due modalità:</p> + +<pre class="brush: js notranslate">obj.name = "Simon"; +var name = obj.name; +</pre> + +<p>E...</p> + +<pre class="brush: js notranslate">obj["name"] = "Simon"; +var name = obj["name"]; +</pre> + +<p>Anche queste sono semanticamente equivalenti. Il secondo metodo ha il vantaggio che il nome della proprietà viene fornito come stringa, che significa che può essere calcolato durante l'esecuzione e l'utilizzo di questo metodo evita che siano applicate ottimizzazioni del motore JavaScript e minifier. Può essere inoltre usato per impostare o ottenere proprietà con nomi che sono <a href="/en-US/docs/JavaScript/Reference/Reserved_Words" title="JavaScript/Reference/Reserved_Words">parole riservate</a>:</p> + +<pre class="brush: js notranslate">obj.for = "Simon"; // Syntax error, because 'for' is a reserved word +obj["for"] = "Simon"; // works fine +</pre> + +<p>La sintassi dell'oggetto letterale può essere usata per inizializzare un oggetto nella sua interezza:</p> + +<pre class="brush: js notranslate">var obj = { + name: "Carrot", + "for": "Max", + details: { + color: "orange", + size: 12 + } +} +</pre> + +<p><span class="short_text" id="result_box" lang="it"><span class="alt-edited hps">Attributi</span> <span class="hps">di accesso</span> <span class="hps">possono essere concatenati</span></span>:</p> + +<pre class="brush: js notranslate">> obj.details.color +orange +> obj["details"]["size"] +12 +</pre> + +<h2 id="Array_matrici">Array (matrici)</h2> + +<p>Gli array in JavaScript sono un tipo speciale di oggetto. Essi funzionano in modo molto simile agli oggetti regolari (si può accedere alle proprietà numeriche solo usando la sintassi []) ma hanno una proprietà magica chiamata '<code>length</code>'. Questa è sempre uno in più dell'indice massimo dell'array.</p> + +<p>Il vecchio metodo per creare un array è il seguente:</p> + +<pre class="brush: js notranslate">> var a = new Array(); +> a[0] = "dog"; +> a[1] = "cat"; +> a[2] = "hen"; +> a.length +3 +</pre> + +<p>Una notazione più conveniente è l'utilizzo di una array letterale:</p> + +<pre class="brush: js notranslate">> var a = ["dog", "cat", "hen"]; +> a.length +3 +</pre> + +<p><span id="result_box" lang="it"><span class="alt-edited hps">Lasciare una</span> <span class="hps">virgola finale</span> <span class="hps">al termine di</span> <span class="alt-edited hps">un array letterale</span> <span class="alt-edited hps">è incompatibile</span> <span class="hps">tra i browser</span><span>,</span> <span class="alt-edited hps">quindi</span> <span class="alt-edited hps">non fatelo</span><span>.</span></span></p> + +<p>Nota che <code>array.length</code> non è necessariamente il numero di elementi nell'array. Considera il seguente esempio:</p> + +<pre class="brush: js notranslate">> var a = ["dog", "cat", "hen"]; +> a[100] = "fox"; +> a.length +101 +</pre> + +<p>Ricorda — la lunghezza dell'array è uno più dell'indice più alto.</p> + +<p>Se si interroga un indice dell'array inesistente, la risposta sarà <code>undefined</code>:</p> + +<pre class="brush: js notranslate">> typeof a[90] +undefined +</pre> + +<p><span id="result_box" lang="it"><span class="hps">Se si prende</span> <span class="hps">in considerazione</span> <span class="hps">quanto sopra</span><span>,</span> <span class="hps">è possibile</span> <span class="hps">scorrere</span> <span class="hps">un array</span> <span class="alt-edited hps">utilizzando le istruzioni </span><span class="hps">seguenti</span><span>:</span></span></p> + +<pre class="brush: js notranslate">for (var i = 0; i < a.length; i++) { + // Do something with a[i] +} +</pre> + +<p><span id="result_box" lang="it"><span class="hps">Questo è</span> <span class="hps">un po' inefficiente</span><span>, poichè si ricerca</span><span class="hps"> la</span> <span class="hps">proprietà length</span><span> una volta</span> <span class="hps">ogni ciclo</span><span>.</span> <span class="hps">Un possibile miglioramento</span> <span class="hps">è questo:</span></span></p> + +<pre class="brush: js notranslate">for (var i = 0, len = a.length; i < len; i++) { + // Do something with a[i] +} +</pre> + +<p>Un modo ancora più simpatico è questo:</p> + +<pre class="brush: js notranslate">for (var i = 0, item; item = a[i++];) { + // Do something with item +} +</pre> + +<p>Qui si stanno impostando due variabili. L'assegnamento nella parte centrale del ciclo <code>for</code> è anche verificato per veridicità — se ha successo, il ciclo continua. Siccome <code>i</code> viene incrementato ogni volta, <span id="result_box" lang="it"><span class="hps">gli elementi dalla matrice</span> <span class="alt-edited hps">saranno assegnati</span> <span class="alt-edited hps">all'elemento</span> <span class="hps">in ordine sequenziale</span><span>. Il ciclo termina quando viene trovato un elemento "falso" </span></span>(come un <code>undefined</code>).</p> + +<p>Nota che questo trucco dovrebbe essere usato solo per gli array che sappiamo non contengano valori "falsi" (array di oggetti o nodi del <a href="/en-US/docs/DOM" title="DOM">DOM</a> per esempio). <span id="result_box" lang="it"><span class="hps">Se</span> <span class="hps">si effettua l'iterazione</span> <span class="hps">dei dati</span> <span class="hps">numerici</span> <span class="hps">che potrebbero includere</span> <span class="hps">uno 0</span>, <span class="hps">o dati</span> <span class="hps">stringa che</span> <span class="alt-edited hps">potrebbero includere</span> <span class="hps">la stringa vuota,</span> <span class="hps">è necessario utilizza l'idioma </span></span><code>i, len</code> in sostituzione.</p> + +<p>Un altro modo per iterare è di utilizzare il ciclo <code><a href="/en-US/docs/JavaScript/Reference/Statements/for...in" title="JavaScript/Reference/Statements/for...in">for...in</a></code>. Nota che se vengono aggiunte nuove proprietà all' <code>Array.prototype</code>, saranno anch'esse iterate da questo ciclo:</p> + +<pre class="brush: js notranslate">for (var i in a) { + // Do something with a[i] +} +</pre> + +<p>Se si vuole accodare un elemento all'array, la maniera più sicura per farlo è questa:</p> + +<pre class="brush: js notranslate">a[a.length] = item; // same as a.push(item); +</pre> + +<p>Poichè <code>a.length</code> è uno in più dell'indice più alto, si può essere sicuri che l'elemento sarà assegnato ad una posizione vuota alla fine dell'array.</p> + +<p>Gli arrays nascono con alcuni metodi:</p> + +<table style="height: 124px; width: 598px;"> + <thead> + <tr> + <th scope="col">Method name</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>a.toString()</code></td> + <td></td> + </tr> + <tr> + <td><code>a.toLocaleString()</code></td> + <td></td> + </tr> + <tr> + <td><code>a.concat(item[, itemN])</code></td> + <td>Restituisce un nuovo array con gli elementi aggiunti ad esso.</td> + </tr> + <tr> + <td><code>a.join(sep)</code></td> + <td></td> + </tr> + <tr> + <td><code>a.pop()</code></td> + <td>Rimuove e restituisce l'ultimo elemento.</td> + </tr> + <tr> + <td><code>a.push(item[, itemN])</code></td> + <td><code>Push</code> aggiunge uno o più elementi alla fine.</td> + </tr> + <tr> + <td><code>a.reverse()</code></td> + <td></td> + </tr> + <tr> + <td><code>a.shift()</code></td> + <td></td> + </tr> + <tr> + <td><code>a.slice(start, end)</code></td> + <td>Restituisce un sub-array.</td> + </tr> + <tr> + <td><code>a.sort([cmpfn])</code></td> + <td>Riceve una funzione di comparazione opzionale.</td> + </tr> + <tr> + <td><code>a.splice(start, delcount[, itemN])</code></td> + <td>Permette di modificare un array cancellando una sezione e sostituendola con più elementi.</td> + </tr> + <tr> + <td><code>a.unshift([item])</code></td> + <td>Antepone elementi all'inizio dell'array</td> + </tr> + </tbody> +</table> + +<h2 id="Funzioni">Funzioni</h2> + +<p><span id="result_box" lang="it"><span class="hps">Insieme</span> <span class="hps">con gli oggetti</span><span>, le funzioni</span> <span class="hps">sono la componente principale</span> <span class="hps">nella comprensione</span> <span class="alt-edited hps">di JavaScript</span><span>.</span> <span class="hps">La funzione</span> <span class="alt-edited hps">più elementare</span> <span class="hps">non potrebbe essere</span> <span class="hps">molto più semplice</span><span>:</span></span></p> + +<pre class="brush: js notranslate">function add(x, y) { + var total = x + y; + return total; +} +</pre> + +<p><span id="result_box" lang="it"><span class="hps">Ciò dimostra</span> <span class="hps">tutto quello che c'è</span> <span class="alt-edited hps">da sapere sulle</span> <span class="hps">funzioni di base</span><span>.</span></span> Una funzione JavaScript può ricevere 0 (zero) o più parametri. Il corpo della funzione può contenere tutte le istruzioni che si desidera, e può dichiarare le proprie variabili che saranno locali alla stessa. L'istruzione <code>return</code> può essere usata per restituire un valore in qualsiasi momento, terminando la funzione. Se non viene utilizzata l'istruzione return (oppure viene restituito un valore vuoto o indefinito), JavaScript restituisce <code>undefined</code>.</p> + +<p><span id="result_box" lang="it"><span class="hps">I</span> <span class="hps">parametri denominati</span> <span class="alt-edited hps">risultano</span> <span class="alt-edited hps">più simili al</span><span class="alt-edited hps">le linee guida</span> <span class="hps">di ogni altra cosa</span><span>.</span> <span class="hps">È possibile</span> <span class="hps">chiamare una funzione</span> <span class="hps">senza passare</span> <span class="hps">i parametri</span> <span class="hps">che si aspetta</span><span>,</span> <span class="hps">nel qual caso</span> <span class="alt-edited hps">saranno impostati</span> <span class="hps">su </span></span><code>undefined</code>.</p> + +<pre class="brush: js notranslate">> add() +NaN // You can't perform addition on undefined +</pre> + +<p><span id="result_box" lang="it"><span class="hps">È anche possibile passare</span> <span class="alt-edited hps">più</span> <span class="hps">argomenti</span> <span class="alt-edited hps">di quelli che la funzione</span> <span class="hps">si aspetta</span><span>:</span></span></p> + +<pre class="brush: js notranslate">> add(2, 3, 4) +5 // added the first two; 4 was ignored +</pre> + +<p><span id="result_box" lang="it"><span class="hps">Questo può sembrare</span> <span class="hps">un po' sciocco</span><span>,</span> <span class="hps">ma le funzioni</span> <span class="hps">hanno accesso a</span> <span class="hps">una variabile aggiuntiva</span> <span class="hps">all'interno del loro corpo</span> <span class="hps">chiamata</span></span> <a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments" title="JavaScript/Reference/Functions_and_function_scope/arguments"><code>argomenti</code></a>, che è un oggetto simil array che detiene tutti i valori passati alla funzione. Riscriviamo la funzione somma per ricevere tutti i valori che vogliamo:</p> + +<pre class="brush: js notranslate">function add() { + var sum = 0; + for (var i = 0, j = arguments.length; i < j; i++) { + sum += arguments[i]; + } + return sum; +} + +> add(2, 3, 4, 5) +14 +</pre> + +<p>Questo, però, non è realmente più utile che scrivere <code>2 + 3 + 4 + 5</code>. Creiamo una funzione per il calcolo della media:</p> + +<pre class="brush: js notranslate">function avg() { + var sum = 0; + for (var i = 0, j = arguments.length; i < j; i++) { + sum += arguments[i]; + } + return sum / arguments.length; +} +> avg(2, 3, 4, 5) +3.5 +</pre> + +<p><span id="result_box" lang="it"><span class="alt-edited hps">Questa</span> <span class="alt-edited hps">è piuttosto utile</span><span>,</span> <span class="hps">ma introduce</span> <span class="hps">un nuovo problema</span><span>.</span></span> La funzione <code>avg()</code> riceve una lista di argomenti separati da una virgola — <span id="result_box" lang="it"><span class="hps">ma</span> <span class="hps">cosa succede se</span> <span class="hps">si vuole</span> <span class="hps">trovare la media</span> <span class="hps">di un array</span><span>?</span></span> <span class="short_text" id="result_box" lang="it"><span class="alt-edited hps">Si potrebbe semplicemente</span> <span class="hps">riscrivere la</span> <span class="hps">funzione come segue:</span></span></p> + +<pre class="brush: js notranslate">function avgArray(arr) { + var sum = 0; + for (var i = 0, j = arr.length; i < j; i++) { + sum += arr[i]; + } + return sum / arr.length; +} +> avgArray([2, 3, 4, 5]) +3.5 +</pre> + +<p><span id="result_box" lang="it"><span class="hps">Ma sarebbe</span> <span class="hps">bello essere in</span> <span class="hps">grado di riutilizzare la</span> <span class="hps">funzione che</span> <span class="hps">abbiamo già creato</span><span>.</span></span> Fortunatamente, JavaScript permette di chiamare una funzione e di chiamarla con un array arbitrario di argomenti, usando il metodo <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function/apply" title="JavaScript/Reference/Global_Objects/Function/apply"><code>apply()</code></a> di qualunque oggetto di funzione.</p> + +<pre class="brush: js notranslate">> avg.apply(null, [2, 3, 4, 5]) +3.5 is the array to use as arguments; the first will be discussed later on. This emphasizes the fact that functions are objects too. +</pre> + +<p>JavaScript permette la creazione di funzioni anonime.</p> + +<pre class="brush: js notranslate">var avg = function() { + var sum = 0; + for (var i = 0, j = arguments.length; i < j; i++) { + sum += arguments[i]; + } + return sum / arguments.length; +} +</pre> + +<p>Questa è semanticamente equivalente alla forma <code>function avg()</code>. Essa è estremamente potente, in quando consente di definire una funzione ovunque si possa normalmente inserire un espressione. <span id="result_box" lang="it"><span class="alt-edited hps">Questo consente</span> <span class="alt-edited hps">ogni sorta di</span> <span class="alt-edited hps">trucco intelligente</span><span>.</span> <span class="hps">Ecco un</span> <span class="hps">modo</span> <span class="hps">di "nascondere"</span> <span class="hps">alcune variabili</span> <span class="hps">locali</span> <span class="hps">- come</span> in <span class="alt-edited hps">un ambito di blocco </span><span class="hps">in C</span><span>:</span></span></p> + +<pre class="brush: js notranslate">> var a = 1; +> var b = 2; +> (function() { + var b = 3; + a += b; +})(); +> a +4 +> b +2 +</pre> + +<p><span id="result_box" lang="it"><span class="hps">JavaScript</span> <span class="hps">consente di</span> <span class="hps">chiamare le funzioni</span> <span class="hps">in modo ricorsivo</span><span>.</span> <span class="hps">Ciò è particolarmente utile</span> <span class="hps">per affrontare</span> <span class="hps">le strutture ad albero</span><span>, come</span> ad esempio nel </span><a href="/en-US/docs/DOM" title="DOM">DOM</a> del browser.</p> + +<pre class="brush: js notranslate">function countChars(elm) { + if (elm.nodeType == 3) { // TEXT_NODE + return elm.nodeValue.length; + } + var count = 0; + for (var i = 0, child; child = elm.childNodes[i]; i++) { + count += countChars(child); + } + return count; +} +</pre> + +<p><span id="result_box" lang="it"><span class="hps">Questo</span> <span class="hps">mette in evidenza</span> <span class="hps">un potenziale problema</span> <span class="hps">con le funzioni</span> <span class="hps">anonime</span></span>: come fare a richiamarle ricorsivamente se non hanno un nome? La risposta si trova con <s>l'oggetto <code>arguments</code>, che oltre ad agire come una lista di argomenti, fornisce anche una propietà chiamata <code>arguments.callee</code></s>. L'uso della <code>arguments.callee</code> è deprecato e anche disabilitato nel modo strict (rigoroso). In sostituzione si devono utilizzare le "funzioni anonime nominate" come di seguito:</p> + +<pre class="brush: js notranslate">var charsInBody = (function counter(elm) { + if (elm.nodeType == 3) { // TEXT_NODE + return elm.nodeValue.length; + } + var count = 0; + for (var i = 0, child; child = elm.childNodes[i]; i++) { + count += counter(child); + } + return count; +})(document.body); +</pre> + +<p><span id="result_box" lang="it"><span class="hps">Il nome fornito</span> <span class="hps">a una funzione anonima</span> <span class="hps">come sopra</span> <span class="atn hps">è (</span><span>o almeno dovrebbe</span> <span class="hps">essere)</span> <span class="alt-edited hps">disponibile solo</span> <span class="alt-edited hps">nell'ambito</span> <span class="hps">stesso</span> <span class="hps">della funzione.</span> <span class="hps">Questo</span> <span class="hps">consente</span> <span class="hps">sia</span> <span class="hps">più</span> <span class="hps">ottimizzazioni</span> <span class="alt-edited hps">da svolgere</span> <span class="alt-edited hps">da parte del motore</span> <span class="alt-edited hps">sia</span> <span class="hps">un codice</span> <span class="hps">più leggibile</span><span>.</span></span></p> + +<h2 id="Oggetti_personalizzati">Oggetti personalizzati</h2> + +<div class="note"><strong>Nota:</strong> Per una discussione più dettagliata della programmazione orientata agli oggetti, vedi <a href="/en-US/docs/JavaScript/Introduction_to_Object-Oriented_JavaScript" title="https://developer.mozilla.org/en/Introduction_to_Object-Oriented_JavaScript">Introduzione a JavaScript Orientato agli Oggetti</a>.</div> + +<p>Nella programmazione Object Oriented classica, gli oggetti sono collezioni di dati e metodi che operano su quei dati. JavaScript è un linguaggio basato su prototipi e non contiene l'istruzione classe, così come si trova in C++ o Java. (<span id="result_box" lang="it"><span class="hps">Questo a volte è</span> <span class="hps">fonte di confusione per</span> <span class="hps">i programmatori</span> <span class="hps">abituati</span> <span class="alt-edited hps">ai linguaggi</span> <span class="hps">con una dichiarazione</span> <span class="hps">di classe</span><span>.</span></span>) Al suo posto, JavaScript usa le funzioni come classi. Consideriamo un oggetto persona con i campi nome e cognome. Ci sono due modi di visualizzare il nominativo: come "nome cognome" o come "cognome, nome". Usando le funzioni e gli oggetti che abbiamo visto in precedenza, ecco un modo di ottenere il risultato voluto:</p> + +<pre class="brush: js notranslate">function makePerson(first, last) { + return { + first: first, + last: last + } +} +function personFullName(person) { + return person.first + ' ' + person.last; +} +function personFullNameReversed(person) { + return person.last + ', ' + person.first +} +> s = makePerson("Simon", "Willison"); +> personFullName(s) +Simon Willison +> personFullNameReversed(s) +Willison, Simon +</pre> + +<p>Questo funziona, ma è piuttosto brutto. Si finisce con dozzine di funzioni nel namespace globale. Ciò di cui abbiamo veramente bisogno è un modo per associare una funzione ad un oggetto. Dal momento che le funzioni sono oggetti, questo è facile:</p> + +<pre class="brush: js notranslate">function makePerson(first, last) { + return { + first: first, + last: last, + fullName: function() { + return this.first + ' ' + this.last; + }, + fullNameReversed: function() { + return this.last + ', ' + this.first; + } + } +} +> s = makePerson("Simon", "Willison") +> s.fullName() +Simon Willison +> s.fullNameReversed() +Willison, Simon +</pre> + +<p>Vi è qualcosa che non abbiamo visto prima: la parola chiave '<code><a href="/en-US/docs/JavaScript/Reference/Operators/this" title="JavaScript/Reference/Operators/Special_Operators/this_Operator">this</a></code>'. Usata dentro una funzione, '<code>this</code>' si riferisce all'oggetto corrente. Che cosa significa in realtà è specificato dal modo in cui è stata chiamata tale funzione. Se è stata chiamata usando <a href="/en-US/docs/JavaScript/Reference/Operators/Member_Operators" title="JavaScript/Reference/Operators/Member_Operators">la notazione col punto o la notazione con le parentesi</a> su un oggetto, questo oggetto diventa '<code>this</code>'. Se la notazione col punto non è stata usata per la chiamata, '<code>this</code>' si riferisce all'oggetto globale. Questa è una causa di errori frequente. Ad esempio:</p> + +<pre class="brush: js notranslate">> s = makePerson("Simon", "Willison") +> var fullName = s.fullName; +> fullName() +undefined undefined +</pre> + +<p>Quando chiamiamo <code>fullName()</code>, '<code>this</code>' è legata all'oggetto globale. Dato che non ci sono variabili globali chiamate <code>first</code> o <code>last</code> riceviamo <code>undefined</code> per ognuna delle due.</p> + +<p>Possiamo prendere il vantaggio della parola chiave '<code>this</code>' per migliorare la nostra funzione <code>makePerson</code>:</p> + +<pre class="brush: js notranslate">function Person(first, last) { + this.first = first; + this.last = last; + this.fullName = function() { + return this.first + ' ' + this.last; + } + this.fullNameReversed = function() { + return this.last + ', ' + this.first; + } +} +var s = new Person("Simon", "Willison"); +</pre> + +<p>Abbiamo introdotto un'altra parola chiave: '<code><a href="/en-US/docs/JavaScript/Reference/Operators/new" title="JavaScript/Reference/Operators/Special_Operators/new_Operator">new</a></code>'. <code>new</code> è fortemente correlata a '<code>this</code>'. Quello che fa è creare un oggetto vuoto nuovo di zecca e quindi chiamare la funzione specificata, con '<code>this</code>' impostato sul nuovo oggetto. Le funzioni che sono disegnate per essere richiamate dalla '<code>new</code>' sono chiamate costruttori. La pratica comune è di nominare queste funzioni con la prima lettera maiuscola in modo da ricordarsi di chiamarle con il <code>new</code>.</p> + +<p>I nostri oggetti persona stanno migliorando, ma vi sono ancora alcuni lati brutti in loro. Ogni volta che si crea un oggetto persona, stiamo creando due nuovi oggetti funzione all'interno di esso - non sarebbe meglio se il codice fosse stato condiviso?</p> + +<pre class="brush: js notranslate">function personFullName() { + return this.first + ' ' + this.last; +} +function personFullNameReversed() { + return this.last + ', ' + this.first; +} +function Person(first, last) { + this.first = first; + this.last = last; + this.fullName = personFullName; + this.fullNameReversed = personFullNameReversed; +} +</pre> + +<p>Così va meglio: stiamo creando i metodi della funzione una sola volta, e assegnando ad essi i riferimenti all'interno del costruttore. Possiamo fare di meglio? La risposta è sì:</p> + +<pre class="brush: js notranslate">function Person(first, last) { + this.first = first; + this.last = last; +} +Person.prototype.fullName = function() { + return this.first + ' ' + this.last; +} +Person.prototype.fullNameReversed = function() { + return this.last + ', ' + this.first; +} +</pre> + +<p><code>Person.prototype</code> è un oggetto condiviso da tutte le istanze di <code>Person</code>. Essa fa parte di una catena di ricerca (che ha un nome speciale, "catena di prototipi"): ogni volta che si tenta di accedere ad una proprietà di <code>Person</code> che non è impostata, JavaScript controllerà <code>Person.prototype</code> per vedere se quella proprietà esiste al suo interno. Come risultato, qualsiasi valore assegnato a <code>Person.prototype</code> diventa disponibile a tutte le istanze del costruttore per mezzo dell'oggetto <code>this</code>.</p> + +<p>Si tratta di uno strumento incredibilmente potente. JavaScript consente di modificare il prototipo di qualcosa in qualsiasi momento nel programma, il che significa che è possibile aggiungere metodi extra per gli oggetti esistenti in fase di esecuzione:</p> + +<pre class="brush: js notranslate">> s = new Person("Simon", "Willison"); +> s.firstNameCaps(); +TypeError on line 1: s.firstNameCaps is not a function +> Person.prototype.firstNameCaps = function() { + return this.first.toUpperCase() +} +> s.firstNameCaps() +SIMON +</pre> + +<p>È interessante notare che è anche possibile aggiungere le cose al prototipo degli oggetti nativi JavaScript. Aggiungiamo un metodo a <code>String</code> che restituisca la stringa al contrario:</p> + +<pre class="brush: js notranslate">> var s = "Simon"; +> s.reversed() +TypeError on line 1: s.reversed is not a function +> String.prototype.reversed = function() { + var r = ""; + for (var i = this.length - 1; i >= 0; i--) { + r += this[i]; + } + return r; +} +> s.reversed() +nomiS +</pre> + +<p>Il nostro nuovo metodo funziona anche con le stringhe letterali!</p> + +<pre class="brush: js notranslate">> "This can now be reversed".reversed() +desrever eb won nac sihT +</pre> + +<p>Come detto prima, il prototipo fa parte di una catena. La radice di questa catena è <code>Object.prototype</code>, i cui metodi includono <code>toString()</code> — è questo metodo che viene chiamato quando si tenta di rappresentare un oggetto come una stringa. Questo è utile per verificare il nostro oggetto <code>Person</code>:</p> + +<pre class="brush: js notranslate">> var s = new Person("Simon", "Willison"); +> s +[object Object] +> Person.prototype.toString = function() { + return '<Person: ' + this.fullName() + '>'; +} +> s +<Person: Simon Willison> +</pre> + +<p>Ricordate come <code>avg.apply()</code> aveva un primo argomento nullo? Possiamo riesaminarlo adesso. Il primo argomento di <code>apply()</code> è l'oggetto che dovrebbe essere trattato come '<code>this</code>'. Per esempio, qui una semplice implementazione di '<code>new</code>':</p> + +<pre class="brush: js notranslate">function trivialNew(constructor) { + var o = {}; // Create an object + constructor.apply(o, arguments); + return o; +} +</pre> + +<p>Questa non è un'esatta replica di <code>new</code> in quanto non imposta la catena del prototipo<span style="line-height: 1.5;"> (sarebbe difficile da illustrare). Non è una cosa che si usa molto spesso, ma è utile conoscerla. In questo snippet, </span><code style="font-style: normal; line-height: 1.5;">...args</code><span style="line-height: 1.5;"> (puntini inclusi) è chiamato il "</span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/rest_parameters" style="line-height: 1.5;">rest arguments</a><span style="line-height: 1.5;">" – come indicato dal nome, e contiene il resto degli argomenti. Per ora, questa "feature" è sperimentale e solo disponibile in Firefox; è raccomandato attaccare gli </span><code style="font-style: normal; line-height: 1.5;">arguments</code><span style="line-height: 1.5;"> per ora.</span></p> + +<p><span style="line-height: 1.5;">Chiamare</span></p> + +<pre class="brush: js language-js notranslate" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal; color: rgb(77, 78, 83);"><code class="language-js" style="font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">var</span> bill <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="function token" style="color: #dd4a68;">trivialNew<span class="punctuation token" style="color: #999999;">(</span></span>Person<span class="punctuation token" style="color: #999999;">,</span> <span class="string token" style="color: #669900;">"William"</span><span class="punctuation token" style="color: #999999;">,</span> <span class="string token" style="color: #669900;">"Orange"</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span></code></pre> + +<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 0px; background: 0px 0px;"></div> + +<p>è dunque quasi equivalente a</p> + +<pre class="brush: js language-js notranslate" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal; color: rgb(77, 78, 83);"><code class="language-js" style="font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa; font-style: inherit; font-weight: inherit;">var</span><span style="color: inherit; font-style: inherit; font-weight: inherit;"> bill</span> <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="keyword token" style="color: #0077aa;">new</span> <span class="class-name token">Person</span><span class="punctuation token" style="color: #999999;">(</span><span class="string token" style="color: #669900;">"William"</span><span class="punctuation token" style="color: #999999;">,</span> <span class="string token" style="color: #669900;">"Orange"</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span></code></pre> + +<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 0px; background: 0px 0px;"></div> + +<p><code style="font-style: normal; line-height: 1.5;">apply()</code><span style="line-height: 1.5;"> ha una funzione sorella dal nome </span><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function/call" style="line-height: 1.5;" title="JavaScript/Reference/Global_Objects/Function/call"><code>call</code></a><span style="line-height: 1.5;">, che di nuovo ti consente di impostare '</span><code style="font-style: normal; line-height: 1.5;">this</code><span style="line-height: 1.5;">' ma prende una lista espansa di argomenti invece che un array.</span></p> + +<pre class="brush: js notranslate">function lastNameCaps() { + return this.last.toUpperCase(); +} +var s = new Person("Simon", "Willison"); +lastNameCaps.call(s); +// Is the same as: +s.lastNameCaps = lastNameCaps; +s.lastNameCaps(); +</pre> + +<h2 id="Inner_functions">Inner functions</h2> + +<p>In JavaScript è consentito dichiarare una funzione all'interno di un'altra funzione. Lo abbiamo già visto prima, nel caso della precedente funzione <code>makePerson()</code>. Un dettaglio importante di funzioni innestate in JavaScript è che esse possono accedere alle variabili della funzione di livello superiore:</p> + +<pre class="brush: js notranslate">function betterExampleNeeded() { + var a = 1; + function oneMoreThanA() { + return a + 1; + } + return oneMoreThanA(); +} +</pre> + +<p>Ciò è di grande utilità per scrivere codice più manutenibile. Se una funzione dipende da una o due altre funzioni che non sono usate in nessuna altra parte del tuo codice, è possibile nidificare quelle funzioni di utilità dentro la funzione che sarà chiamata dall'esterno. Questo riduce il numero di funzioni che si trovano nel "global scope", che è sempre una buona cosa.</p> + +<p>Questa è anche una grande cosa contro il richiamo di variabili globali. Quando si scrive codice complesso si è spesso tentati di usare variabili globali per condividere i valori tra più funzioni — e ciò rende il codice difficile da manutenere. Le funzioni nidificate possono condividere le variabili della funzione padre, così è possibile usare questo meccanismo per accoppiare le funzioni quando serve, senza contaminare il tuo namespace globale — rendi locali le variabili globali per piacere. Questa tecnica dovrebbe essere usata con parsimonia, ma è una capacità utile da avere.</p> + +<h2 id="Closures">Closures</h2> + +<p>Questo ci porta ad una delle più potenti astrazioni che JavaScript ha da offrire — ma anche quella che può generare più confusione. Cosa fa questo codice sotto?</p> + +<pre class="brush: js notranslate">function makeAdder(a) { + return function(b) { + return a + b; + } +} +x = makeAdder(5); +y = makeAdder(20); +x(6) +? +y(7) +? +</pre> + +<p>Il nome della funzione <code>makeAdder</code> dovrebbe essere esplicito: essa può creare delle nuove funzioni 'adder', che, se chiamate con un determinato argomento, lo addizionano all'argomento con il quale sono state create.</p> + +<p>Quello che sta avvenendo qui è praticamente la stessa cosa vista precedentemente con le "inner functions": una funzione definita dentro un'altra funzione ha accesso alle variabili della funzione esterna. La sola differenza è che in questo caso la funzione esterna ha già restituito il suo risultato, e quindi il senso comune sembrerebbe indicare che le sue variabili locali non siano più disponibili. Ma esse esistono ancora — altrimenti le funzioni "adder" non sarebbero capaci di lavorare. Quello che c'è di più è che ci sono due "copie" differenti delle variabili locali di <code>makeAdder</code> — una nella quale <code>a</code> è 5 e una nella quale <code>a</code> è 20. Così il risultato di quelle chiamate di funzione è il seguente:</p> + +<pre class="brush: js notranslate">x(6) // returns 11 +y(7) // returns 27 +</pre> + +<p>Ecco cosa sta effettivamente avvenendo. Quando JavaScript esegue una funzione, viene creato un oggetto con il proprio ambito di visibilità ('scope object') per trattenere le variabili locali di quella funzione. Esso è inizializzato con tutte le variabili passate in ingresso alla funzione come parametri. Ciò è simile all'oggetto globale in cui si trovano tutte le variabili globali e le funzioni, ma con una paio di differenze importanti: primo, un nuovo 'scope object' etichettato è creato ogni volta che una funzione inizia l'esecuzione, e secondo, a differenza dell'oggetto globale (che nei bowser è accessibile come 'window') non si può accedere direttamente a questi 'scope object' dal tuo codice JavaScript. Ad esempio non c'è nessun meccanismo per iterare sulle proprietà dello 'scope object' corrente.</p> + +<p>Quindi, quando <code>makeAdder</code> è chiamato viene creato un oggetto scope con una proprietà: <code>a</code>, che è l'argomento passato alla funzione <code>makeAdder</code> . A questo punto <code>makeAdder</code> restituisce quindi una funzione appena creata. Normalmente il raccoglitore di rifiuti di JavaScript eliminerebbe l'oggetto scope creato per <code>makeAdder</code> , ma la funzione restituita mantiene un riferimento a tale oggetto scope. Di conseguenza l'oggetto scope non verrà eliminato finchè non ci saranno più riferimenti all'oggetto che la funzione <code>makeAdder</code> restituisce.</p> + +<p>Gli oggetti scope formano una catena chiamata 'scope chain', simile alla catena di prototipi, 'prototype chain', del sistema a oggetti di JavaScript.</p> + +<p>Una <strong>closure</strong> è la combinazione di una funzione e dell'oggetto scope in cui è stata creata.</p> + +<p>Le closures ti consentono di salvare lo stato e in quanto tali, possono spesso essere utilizzate al posto degli oggetti. Puoi trovare <a class="external" href="http://stackoverflow.com/questions/111102/how-do-javascript-closures-work" style="line-height: 1.5;">alcune eccellenti introduzioni alle closures</a> (in lingua inglese).</p> + +<h3 id="Memory_leaks">Memory leaks</h3> + +<pre dir="ltr" id="tw-target-text"> Uno sfortunato effetto collaterale delle chiusure è il rendere facile perdere memoria + su Internet Explorer. JavaScript alloca gli oggetti nella memoria al momento della loro + creazione e tale memoria viene recuperata dal browser quando non rimangono riferimenti a un + oggetto. + Gli oggetti forniti dall'host vengono gestiti da quell'ambiente. + + Gli host del browser devono gestire un gran numero di oggetti che rappresentano + la pagina HTML presentata: gli oggetti del DOM. Spetta al browser gestire l'assegnazione e + il recupero di questi. + + Internet Explorer utilizza il proprio schema di raccolta dei rifiuti per questo, + separato dal meccanismo utilizzato da JavaScript. + È l'interazione tra i due che può causare perdite di memoria. + +Una perdita di memoria in IE si verifica ogni volta che viene formato un riferimento circolare +tra un oggetto JavaScript e un oggetto nativo. Considera quanto segue:</pre> + +<pre class="brush: js notranslate">function leakMemory() { + var el = document.getElementById('el'); + var o = { 'el': el }; + el.o = o; +} +</pre> + +<p>Il riferimento circolare formato sopra crea una perdita di memoria;</p> + +<p>IE non libererà la memoria utilizzata da el fino al completo riavvio del browser. Il caso di cui sopra rischia di passare inosservato; le perdite di memoria diventano un problema reale solo nelle applicazioni a esecuzione prolungata o nelle applicazioni che perdono grandi quantità di memoria a causa di grandi strutture di dati o schemi di perdite all'interno dei loop. Le perdite sono raramente così ovvie: spesso la struttura dei dati trapelati può avere molti livelli di riferimenti, oscurando il riferimento circolare. Le chiusure rendono facile creare una perdita di memoria senza volerlo. Considera questo:</p> + +<pre class="brush: js notranslate">function addHandler() { + var el = document.getElementById('el'); + el.onclick = function() { + this.style.backgroundColor = 'red'; + } +} +</pre> + +<p>Il codice precedente imposta l'elemento in modo che diventi rosso quando viene cliccato. Crea anche una perdita di memoria. Perché? Perché il riferimento a el è inavvertitamente catturato nella chiusura creata per la funzione interna anonima. Questo crea un riferimento circolare tra un oggetto JavaScript (la funzione) e un oggetto nativo (el).</p> + +<pre class="script notranslate" style="font-size: 16px;">needsTechnicalReview(); +</pre> + +<p>Esistono numerose soluzioni per questo problema. Il più semplice è non usare la variabile el:</p> + +<pre class="brush: js notranslate">function addHandler(){ + document.getElementById('el').onclick = function(){ + this.style.backgroundColor = 'red'; + } +} +</pre> + +<p>Sorprendentemente, un trucco per rompere i riferimenti circolari introdotti da una chiusura è aggiungere un'altra chiusura:</p> + +<pre class="brush: js notranslate">function addHandler() { + var clickHandler = function() { + this.style.backgroundColor = 'red'; + }; + (function() { + var el = document.getElementById('el'); + el.onclick = clickHandler; + })(); +} +</pre> + +<p>La funzione interna viene eseguita immediatamente, e nasconde il suo contenuto dalla chiusura creata con clickHandler. Un altro buon trucco per evitare le chiusure è rompere i riferimenti circolari durante l'evento window.onunload. Molte librerie di eventi lo faranno per te. Nota che così facendo si disabilita bfcache in Firefox 1.5, quindi non dovresti registrare un listener di scaricamento in Firefox, a meno che tu non abbia altri motivi per farlo.</p> + +<div class="originaldocinfo"> +<h2 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h2> + +<ul> + <li>Author: <a class="external" href="http://simon.incutio.com/">Simon Willison</a></li> + <li>Last Updated Date: March 7, 2006</li> + <li>Copyright: © 2006 Simon Willison, contributed under the Creative Commons: Attribute-Sharealike 2.0 license.</li> + <li>More information: For more information about this tutorial (and for links to the original talk's slides), see Simon's <a class="external" href="http://simon.incutio.com/archive/2006/03/07/etech">Etech weblog post</a>.</li> +</ul> +</div> |