diff options
| author | Ryan Johnson <rjohnson@mozilla.com> | 2021-04-29 16:16:42 -0700 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-04-29 16:16:42 -0700 |
| commit | 95aca4b4d8fa62815d4bd412fff1a364f842814a (patch) | |
| tree | 5e57661720fe9058d5c7db637e764800b50f9060 /files/it/conflicting | |
| parent | ee3b1c87e3c8e72ca130943eed260ad642246581 (diff) | |
| download | translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.tar.gz translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.tar.bz2 translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.zip | |
remove retired locales (#699)
Diffstat (limited to 'files/it/conflicting')
18 files changed, 0 insertions, 2717 deletions
diff --git a/files/it/conflicting/learn/css/building_blocks/selectors/index.html b/files/it/conflicting/learn/css/building_blocks/selectors/index.html deleted file mode 100644 index 5d659fa8fd..0000000000 --- a/files/it/conflicting/learn/css/building_blocks/selectors/index.html +++ /dev/null @@ -1,152 +0,0 @@ ---- -title: I Selettori -slug: conflicting/Learn/CSS/Building_blocks/Selectors -tags: - - Conoscere_i_CSS -translation_of: Learn/CSS/Building_blocks/Selectors -translation_of_original: Web/Guide/CSS/Getting_started/Selectors -original_slug: Conoscere_i_CSS/I_Selettori ---- -<p> -</p><p>Questa pagina spiega come applicare gli stili in modo selettivo, e come i diversi tipi di selettori abbiano un diverso grado di prevalenza. -</p><p>Verrà aggiunto qualche attributo ai tag nel documento di esempio, e questi attributi saranno utilizzati nel foglio di stile di esempio -</p> -<h3 id="Informazioni:_I_Selettori" name="Informazioni:_I_Selettori"> Informazioni: I Selettori </h3> -<p>I CSS hanno una terminologia propria per descrivere il linguaggio CSS. -Precedentemente in questa guida, abbiamo creato una stringa nel foglio di stile come questa: -</p> -<div style="width: 30em;"><pre>strong {color: red;} -</pre></div> -<p>Nella terminologia dei CSS l'intera stringa è una <i>regola</i> (rule). La regola inizia con <code>strong</code>, che è un selettore (selector). La sua funzione è quella di selezionare a quali elementi del DOM verrà applicato la regola. -</p> -<table style="border: 1px solid #36b; background-color: #f4f4f4; padding: 1em;"> -<caption>Di più... -</caption><tbody><tr> -<td> La parte contenuta all'interno delle parentesi graffe è la <i>dichiarazione</i> (declaration). -<p>La parola chiave <code>color</code> è una <i>proprietà</i> (property), e <code>red</code> è un <i>valore</i>(value). -</p><p>Il punto e virgola dopo la coppia proprietà-valore separa quella coppia da altre all'interno della stessa dichiarazione. -</p><p>Questa guida si riferirà ai selettori del tipo di <code>strong</code> come a dei selettori <i>tag</i>. -Le specifiche dei CSS vi si riferiscono invece come a dei selettori di <i>tipo</i>. -</p> -</td></tr></tbody></table> -<p><br> -Questa pagina della guida spiega in modo più approfondito i selettori che possono essere utilizzati nelle regole dei CSS. -</p><p>In aggiunta al nome dei tag possono essere utilizzati anche i valori di alcuni attributi. Questa permette di usare i selettori in modo più specifico. -</p><p>Esistono due attributi che hanno uno status speciale nei CSS: <code>class</code> e <code>id</code>. -</p><p>L'attributo <code>class</code> di un tag serve ad assegnare quel tag a quella data classe. La scelta del nome della classe è a piacere dell'autore della classe. -</p><p>Nel foglio di stile occorre digitare un punto "." prima del nome della classe quando viene usata come un selettore. -</p><p>L'attributo <code>id</code> di un tag serve ad assegnare un id al tag. Anche in questo caso il nome è a piacere, ma deve essere unico per un dato documento. -</p><p>Nel foglio di stile il selettore id si indica anteponendo il simbolo "cancelletto" (#). -</p> -<table style="border: 1px solid #36b; background-color: #ffe; padding: 1em;"> -<caption>Esempi -</caption><tbody><tr> -<td> Questo tag HTML ha sia un attributo <code>class</code> che uno <code>id</code>: -<div style="width: 30em;"><pre> -<P class="key" id="principal"> -</pre></div> -<p>L'id "<code>principal</code>" deve essere unica in tutto il documento ma gli altri tag nel documento potranno appartenere alla stessa classe ed avere quindi lo stesso valore dell'attributo <code>class</code>. -</p><p>In un foglio di stile questa regola rende tutti gli elementi della classe <code>key</code> verdi. -(Potrebbero anche non essere tutti elementi di tipo <small>P</small>.) -</p> -<div style="width: 30em;"><pre> -.key {color: green;} -</pre></div> -<p>Questa regola rende l'unico elemento con l'id <code>principal</code> in grassetto: -</p> -<div style="width: 30em;"><pre> -#principal {font-weight: bolder;} -</pre></div> -</td></tr></tbody></table> -<p><br> -Se più di una regola si applica allo stesso elemento specificando la stessa proprietà, avrà prevalenza quella con il selettore più specifico. Un selettore <code>id</code> è più specifico di un selettore <code>class</code>, che però è più specifico di un selettore di tipo "tag". -</p> -<table style="border: 1px solid #36b; background-color: #f4f4f4; padding: 1em;"> -<caption>Di più... -</caption><tbody><tr> -<td> I selettori possono anche essere combinati così da essere resi più specifici. -<p>Per esempio, il selettore <code>.key</code> seleziona tutti gli elementi che hanno l'attributo <code>class</code> con il valore <code>key</code>. Il selettore <code>p.key</code> seleziona solo gli elementi P che abbiano il valore <code>key</code> all'attributo <code>class</code>. -</p><p>Non si è limitati ai due attributi speciali, <code>class</code> e <code>id</code>. E' possibile specificare altri attributi utilizzando le parentesi quadre. Ad esempio, il selettore <code>{{ mediawiki.external('type=button') }}</code> seleziona tutti gli elementi che hanno l'attributo <code>type</code> con il valore <code>button</code> assegnato. -</p><p>Più avanti in questa guida, la pagina sulle (<a href="it/Conoscere_i_CSS/Tabelle">Tabelle</a>) contiene informazioni sui selettori complessi basati sulle relazioni. -</p><p>Per informazioni complete sui selettori, consulta "<a class="external" href="http://www.w3.org/TR/CSS21/selector.html">Selettori</a>" nelle specifiche CSS. -</p> -</td></tr></tbody></table> -<p><br> -Se un foglio di stile contiene regole in conflitto e con lo stesso grado di specificità, avrà prevalenza la regola che viene dopo nel foglio di stile. -</p><p>Se si incontrano dei problemi con delle regole in conflitto si può provare a risolverli rendendo una delle due regole più specifica. Se ciò non è possibile, si può provare a spostare la regola che si intende far prevalere in fondo al foglio di stile, per far sì che abbia la priorità. -</p> -<h3 id="Azione:_Utilizzare_i_selettori_.22class.22_e_.22id.22" name="Azione:_Utilizzare_i_selettori_.22class.22_e_.22id.22"> Azione: Utilizzare i selettori "class" e "id" </h3> -<p>Apri il file HTML e duplica il paragrafo facendo copia/incolla. -Quindi aggiungi gli attributi di id e class al primo paragrafo, e solo l'id al secondo, come mostrato sotto. In alternativa si può copiare e incollare quanto sotto, sostituendo l'intero file: -</p> -<div style="width: 48em; color: gray;"> -<pre class="eval"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> -<HTML> - <HEAD> - <TITLE>Sample document</TITLE> - <LINK rel="stylesheet" type="text/css" href="style1.css"> - </HEAD> - <BODY> - <P <strong style="color: black;">id="first"</strong>> - <STRONG <strong style="color: black;">class="carrot"</strong>>C</STRONG>ascading - <STRONG <strong style="color: black;">class="spinach"</strong>>S</STRONG>tyle - <STRONG <strong style="color: black;">class="spinach"</strong>>S</STRONG>heets - </P> - <strong style="color: black;"><P id="second"> - <STRONG>C</STRONG>ascading - <STRONG>S</STRONG>tyle - <STRONG>S</STRONG>heets - </P></strong> - </BODY> -</HTML> -</pre> -</div> -<p>Ora apri il file CSS. Sostituisci l'intero contenuto con: -</p> -<div style="width: 40em;"><pre>strong {color: red;} -.carrot {color: orange;} -.spinach {color: green;} -#first {font-style: italic;} -</pre></div> -<p>Aggiorna il browser per vedere il risultato: -</p> -<table style="border: 2px outset #36b; padding: 1em;"> -<tbody><tr> -<td style="font-style: italic;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets -</td></tr> -<tr> -<td><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets -</td></tr></tbody></table> -<p><br> -Prova a cambiare l'ordine delle regole nel tuo file CSS: osserva come l'ordine non ha nessun effetto in questo caso. -</p><p>I selettori di classe <code>.carrot</code> e <code>.spinach</code> hanno sempre la priorità su il selettore di tag <code>strong</code>. -</p><p>Il selettore di id <code>#first</code> ha sempre la priorità sui selettori di classe e di tag. -</p> -<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4;"> -<caption>Esercizi -</caption><tbody><tr> -<td> Senza modificare il file HTML, aggiungi un unica regola al file CSS che mantenga il colore delle lettere iniziali, ma renda il testo del secondo paragrafo di colore blu: -<table style="border: 2px outset #36b; padding: 1em; background-color: white;"> -<tbody><tr> -<td style="font-style: italic;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets -</td></tr> -<tr> -<td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets -</td></tr></tbody></table> -<p>Ora modifica la regola appena aggiunta (senza cambiare nient'altro) per rendere anche il testo del primo paragrafo di colore blu: -</p> -<table style="border: 2px outset #36b; padding: 1em; background-color: white;"> -<tbody><tr> -<td style="font-style: italic; color: blue;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets -</td></tr> -<tr> -<td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets -</td></tr></tbody></table> -</td></tr></tbody></table> -<p><br> -</p> -<h4 id="Cos.27altro.3F" name="Cos.27altro.3F"> Cos'altro? </h4> -<p>Se hai avuto difficoltà a comprendere questa pagina, o sei hai dei commenti a proposito, utilizza questa pagina di <a>Discussione</a>. -</p><p>Il foglio di stile inizia ad avere un aspetto complicato. La prossima pagina descrive i modi per rendere i CSS più semplici da leggere: -<b><a href="it/Conoscere_i_CSS/CSS_leggibili">CSS leggibili</a></b> -</p>{{ languages( { "en": "en/CSS/Getting_Started/Selectors", "fr": "fr/CSS/Premiers_pas/Les_s\u00e9lecteurs", "pl": "pl/CSS/Na_pocz\u0105tek/Selektory", "pt": "pt/CSS/Como_come\u00e7ar/Seletores" } ) }} diff --git a/files/it/conflicting/learn/css/first_steps/how_css_works/index.html b/files/it/conflicting/learn/css/first_steps/how_css_works/index.html deleted file mode 100644 index 87f955fffe..0000000000 --- a/files/it/conflicting/learn/css/first_steps/how_css_works/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: Come funzionano i CSS -slug: conflicting/Learn/CSS/First_steps/How_CSS_works -tags: - - Conoscere_i_CSS - - DOM - - Tutte_le_categorie -translation_of: Learn/CSS/First_steps/How_CSS_works -translation_of_original: Web/Guide/CSS/Getting_started/How_CSS_works -original_slug: Conoscere_i_CSS/Come_funzionano_i_CSS ---- -<p> -</p><p>Questa pagina spiega il funzionamento dei CSS nel browser. -Analizzeremo il documento di esempio, rivelando i dettagli del suo stile. -</p> -<h3 id="Informazioni:_Come_funzionano_i_CSS" name="Informazioni:_Come_funzionano_i_CSS"> Informazioni: Come funzionano i CSS </h3> -<p>Quando Mozilla visualizza un documento, deve combinare il suo contenuto con le informazioni sullo stile. Quindi elabora il documento in due fasi: -</p> -<ul><li>Nella prima, Mozilla converte il linguaggio di markup e i CSS in un <i><a href="it/DOM">DOM</a></i> (Document Object Model). Il DOM rappresenta il documento nella memoria del computer. Combina il contenuto del documento con il suo stile. -</li></ul> -<ul><li>Nella seconda fase Mozilla visualizza il DOM. -</li></ul> -<p>Un linguaggio di marcatura utilizza i tag per definire la struttura del documento. Un tag può anche essere un contenitore, con altri tag tra il suo inizio e la sua fine. -</p><p>Un DOM ha una struttura ad albero. Ogni tag e ogni blocco di testo nel linguaggio di marcatura diviene un <i>nodo</i> della struttura ad albero. I nodi del DOM non sono contenitori. Possono invece essere genitori (parent) dei nodi figli (child). -</p><p>I nodi corrispondenti ai tag sono consociuti anche come <i>elementi</i>. -</p> -<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> -<caption>Esempio -</caption><tbody><tr> -<td> Nel documento di esempio il tag <code><p></code> e il suo tag di chiusura <code></p></code> creano un contenitore: -<div style="width: 24em;"> -<pre class="eval"><p> - <strong>C</strong>ascading - <strong>S</strong>tyle - <strong>S</strong>heets -</p> -</pre> -</div> -<p>Nel DOM, il nodo corrispondente P è un genitore. -I suoi figli sono i nodi <small>STRONG</small> e i nodi di testo. -I nodi <small>STRONG</small> sono a loro volta genitori dei nodi di testo (che ne sono quindi figli): -</p> -<div style="width: 24em; color: #47c; white-space: pre; padding: 0 0 0 2em;"> -<p><span style="color: black;">P</span> -├─<span style="color: black;">STRONG</span> -│ │ -│ └─"<span style="color: black;">C</span>" -│ -├─"<span style="color: black;">ascading</span>" -│ -├─<span style="color: black;">STRONG</span> -│ │ -│ └─"<span style="color: black;">S</span>" -│ -├─"<span style="color: black;">tyle</span>" -│ -├─<span style="color: black;">STRONG</span> -│ │ -│ └─"<span style="color: black;">S</span>" -│ -└─"<span style="color: black;">heets</span>" -</p> -</div> -</td></tr></tbody></table> -<p>Comprendere il DOM aiuta nel progettare, correggere e manutenere il CSS, poiché il DOM è il luogo in cui si incontrano CSS e contenuto del documento. -</p> -<h3 id="Azione:_Analizzare_un_DOM" name="Azione:_Analizzare_un_DOM"> Azione: Analizzare un DOM </h3> -<p>Per analizzare il DOM occorre un software particolare. -In questa guida si utilizza il <a href="it/DOM_Inspector">DOM Inspector</a> di Mozilla (o DOMi) per analizzare il DOM. -</p><p>Apri il documento di esempio con il browser Mozilla. -</p><p>Dalla barra dei menu del browser, seleziona Strumenti – DOM Inspector, oppure Strumenti – Sviluppo Web – DOM Inspector. -</p> -<table style="border: 1px solid #36b; background-color: #f4f4f4; padding: 1em;"> -<caption>Di più... -</caption><tbody><tr> -<td> Se il tuo browser Mozilla non possiede il DOMi, è sufficiente reinstallare il browser avendo cura di scegliere l'installazione dei componenti di sviluppo. -<p>Se non hai intenzione di installare il DOMi, puoi saltare questa parte e andare direttamente alla prossima pagina. -Saltare questa sezione non interferisce con la comprensione del resto della guida. -</p> -</td></tr></tbody></table> -<p><br> -Nel DOMi, espandi i nodi del tuo documento cliccando sulle loro freccette. -</p><p><b>Nota: </b> Gli spazi nel file HTML potrebbero far sì che il DOM mostri alcuni nodi di testo vuoti, che possono essere ignorati. -</p><p>Il risultato dovrebbe essere simile a questo, a seconda di quali nodi siano stati espansi: -</p> -<table style="border: 2px outset #36b; padding: 0 0 0 2em;"> -<tbody><tr> -<td><div style="width: 30em; background-color: transparent; margin: 0px; border: 0px; padding: 0px; color: gray; white-space: pre;"> -<p>│ -<span style="font-size: 133%;">▼</span>╴<span style="color: black;">P</span> -│ │ -│ <span style="font-size: 133%;">▼</span>╴<span style="color: black;">STRONG</span> -│ │ └<span style="color: darkblue;">#text</span> -│ ├╴<span style="color: darkblue;">#text</span> -│ <span style="font-size: 133%;">▶</span>╴<span style="color: black;">STRONG</span> -│ │ -</p> -</div> -</td></tr></tbody></table> -<p>Quando si seleziona un nodo, nel pannello di destra del DOMi vengono mostrate informazioni ulteriori a proposito di quel nodo. -Per esempio quando si seleziona un nodo di testo, il DOMi mostra il testo nel pannello di destra. -</p><p>Quando viene selezionato il nodo di un elemento, il DOMi lo analizza e fornisce una grande quantità di informazioni nel pannello di destra. Le informazioni sullo stile non sono che una parte di quelle fornite. -</p><p><br> -</p> -<table style="border: 1px solid #36b; padding: 1em; background-color: #ffe;"> -<caption>Esercizi -</caption><tbody><tr> -<td> Nel DOMi, fai clic su un nodo <small>STRONG</small>. -<p>Utilizza il pannello di destra del DOMi per trovare in quale punto viene definito il colore rosso del nodo e dove il suo aspetto viene reso più marcato del testo normale. -</p> -</td></tr></tbody></table> -<p><br> -</p> -<h4 id="Cos.27altro.3F" name="Cos.27altro.3F"> Cos'altro? </h4> -<p>Se hai avuto difficoltà a comprendere questa pagina, o sei hai dei commenti a proposito, utilizza questa pagina di <a>Discussione</a>. -</p><p>Se hai eseguito gli esercizi, hai potuto vedere come le informazioni sullo stile siano presenti in diversi posti ed interagiscano per rendere lo stile finale dell'elemento. -</p><p>La prossima pagina spiega meglio queste interazioni: -<b><a href="it/Conoscere_i_CSS/Cascata_ed_ereditariet%c3%a0">Cascata ed ereditarietà</a></b> -</p>{{ languages( { "en": "en/CSS/Getting_Started/How_CSS_works", "fr": "fr/CSS/Premiers_pas/Fonctionnement_de_CSS", "ja": "ja/CSS/Getting_Started/How_CSS_works", "pl": "pl/CSS/Na_pocz\u0105tek/Jak_dzia\u0142a_CSS", "pt": "pt/CSS/Como_come\u00e7ar/Como_o_CSS_trabalha" } ) }} diff --git a/files/it/conflicting/learn/css/first_steps/how_css_works_113cfc53c4b8d07b4694368d9b18bd49/index.html b/files/it/conflicting/learn/css/first_steps/how_css_works_113cfc53c4b8d07b4694368d9b18bd49/index.html deleted file mode 100644 index bd894b245b..0000000000 --- a/files/it/conflicting/learn/css/first_steps/how_css_works_113cfc53c4b8d07b4694368d9b18bd49/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: Perché usare i CSS -slug: >- - conflicting/Learn/CSS/First_steps/How_CSS_works_113cfc53c4b8d07b4694368d9b18bd49 -tags: - - Conoscere_i_CSS -translation_of: Learn/CSS/First_steps/How_CSS_works -translation_of_original: Web/Guide/CSS/Getting_started/Why_use_CSS -original_slug: Conoscere_i_CSS/Perché_usare_i_CSS ---- -<p> </p> - -<p>Questa pagina spiega perché i documenti utilizzano i CSS. Utilizzerai i CSS per aggiungere un foglio di stile (stylesheet) al tuo documento di esempio.</p> - -<h3 id="Informazioni:_Perch.C3.A9_usare_i_CSS.3F" name="Informazioni:_Perch.C3.A9_usare_i_CSS.3F">Informazioni: Perché usare i CSS?</h3> - -<p>I CSS aiutano a mantenere le informazioni sul contenuto di un documento separate dai dettagli su come presentarlo. Le informazioni sulla presentazione del documento sono note come <em>stile</em>. Mantenere lo stile separato dal contenuto permette di:</p> - -<ul> - <li>Evitare duplicazioni</li> - <li>Rendere la modifica e la manutenzione più semplice</li> - <li>Applicare allo stesso contenuto stili diversi per diversi scopi</li> -</ul> - -<table style="background-color: #fffff4; border: 1px solid #3366bb; margin-bottom: 1em; padding: 1em;"> - <caption>Esempi</caption> - <tbody> - <tr> - <td>1) Il tuo sito web potrebbe avere migliaia di pagine che si assomigliano. Utilizzando i CSS si possono immagazzinare le informazioni sullo stile in dei file comuni che vengono condivisi da tutte le pagine. - <p>2) E' possibile creare differenti stili in modo che quando l'utente visualizza una pagina web, il browser carichi determinate informazioni sullo stile insieme al contenuto della pagina. Quando invece l'utente stampa la pagina web, venga fornito uno stile diverso che renda la pagina stampata più semplice da leggere.</p> - </td> - </tr> - </tbody> -</table> - -<p>In linea di massima il linguaggio di markup è utilizzato per descrivere le informazioni sul contenuto di un documento, non il suo stile. I CSS, al contrario, definiscono lo stile, non il contenuto. (Più avanti nella guida vedremo qualche eccezione.)</p> - -<table style="background-color: #f4f4f4; border: 1px solid #3366bb; margin-bottom: 1em; padding: 1em;"> - <caption>Di più...</caption> - <tbody> - <tr> - <td>Un linguaggio di marcatura come HTML fornisce qualche sistema per specificare lo stile, ad esempio l'uso del tag <code><b></code> per segnare un testo in grassetto o la definizione del colore di sfondo della pagina all'interno del tag <code><body></code> (questo secondo esempio è fortemente deprecato). - <p>Quando si utilizzano i CSS normalmente si evita di "sporcare" in questo modo il codice di markup, concentrando tutte le informazioni sullo stile in un solo posto, possibilmente separato.</p> - </td> - </tr> - </tbody> -</table> - -<h3 id="Azione:_Creare_un_foglio_di_stile" name="Azione:_Creare_un_foglio_di_stile">Azione: Creare un foglio di stile</h3> - -<p>Crea un altro file di testo vuoto nella stessa directory utilizzata prima. Questo file sarà il foglio di stile. Nominalo come: <code>style1.css</code></p> - -<p>Nel file CSS, copia e incolla questa singola stringa, poi salva il file:</p> - -<div style="width: 40em;"> -<pre class="eval">strong {color: red;} -</pre> -</div> - -<h4 id="Collegare_il_foglio_di_stile_al_proprio_documento" name="Collegare_il_foglio_di_stile_al_proprio_documento">Collegare il foglio di stile al proprio documento</h4> - -<p>Per collegare il foglio di stile al tuo documento occorre modificare il file HTML. Aggiungi la linea segnalata in grassetto:</p> - -<div style="width: 40em; color: gray;"> -<pre class="eval"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> -<HTML> - <HEAD> - <TITLE>Sample document</TITLE> - <strong style="color: black;"><LINK rel="stylesheet" type="text/css" href="style1.css"></strong> - </HEAD> - <BODY> - <P> - <STRONG>C</STRONG>ascading - <STRONG>S</STRONG>tyle - <STRONG>S</STRONG>heets - </P> - </BODY> -</HTML> -</pre> -</div> - -<p>Salva il file e ricarica la finestra del browser. Il foglio di stile renderà ora le lettere iniziali in rosso, come segue:</p> - -<table style="border: 2px outset #3366bb; padding: 1em;"> - <tbody> - <tr> - <td><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> - </tr> - </tbody> -</table> - -<table style="background-color: #fffff4; border: 1px solid #3366bb; padding: 1em;"> - <caption>Esercizi</caption> - <tbody> - <tr> - <td>Oltre al rosso ("red"), i CSS accettano altri nomi per indicare i colori (in inglese). Senza guardare una referenza, trova cinque o più nomi di colori che funzionino.</td> - </tr> - </tbody> -</table> - -<p> </p> - -<h4 id="Cos.27altro.3F" name="Cos.27altro.3F">Cos'altro?</h4> - -<p>Se hai avuto difficoltà a comprendere questa pagina, o sei hai dei commenti a proposito, utilizza questa pagina di <a>Discussione</a>.</p> - -<p>Ora che hai un documento di esempio collegato ad un foglio di stile separato, sei pronto per saperne di più su come il browser li combina quando visualizza il documento: <strong><a href="it/Conoscere_i_CSS/Come_funzionano_i_CSS">Come funzionano i CSS</a></strong></p> - -<p>{{ languages( { "en": "en/CSS/Getting_Started/Why_use_CSS", "fr": "fr/CSS/Premiers_pas/Pourquoi_utiliser_CSS", "ja": "ja/CSS/Getting_Started/Why_use_CSS", "pl": "pl/CSS/Na_pocz\u0105tek/Po_co_u\u017cywa\u0107_CSS", "pt": "pt/CSS/Como_come\u00e7ar/Porque_usar_CSS" } ) }}</p> diff --git a/files/it/conflicting/learn/css/index.html b/files/it/conflicting/learn/css/index.html deleted file mode 100644 index 134aff0622..0000000000 --- a/files/it/conflicting/learn/css/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: CSS developer guide -slug: conflicting/Learn/CSS -tags: - - CSS - - Guide - - Landing - - NeedsTranslation - - TopicStub -translation_of: Learn/CSS -translation_of_original: Web/Guide/CSS -original_slug: Web/Guide/CSS ---- -<p>{{draft}}</p> -<p><span class="seoSummary">Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML</span> or other markup languages such as SVG<span class="seoSummary">. CSS describes how the structured elements in the document are to be rendered on screen, on paper, in speech, or on other media.</span> The ability to adjust the document's presentation depending on the output medium is a key feature of CSS.</p> -<p>CSS is one of the core languages of the open Web and has a standardized <a class="external" href="http://w3.org/Style/CSS/#specs">W3C specification</a>.</p> -<p>{{LandingPageListSubpages}}</p> -<h2 id="Pages_elsewhere">Pages elsewhere</h2> -<p>Here are other pages related to CSS that should be linked to from here.</p> -<h2 id="See_also">See also</h2> -<ul> - <li><a href="/en-US/docs/Web/CSS" title="/en-US/docs/Web/HTML">CSS</a></li> - <li><a href="/en-US/docs/Web/Reference" title="/en-US/docs/Web/Reference">Web developer reference</a></li> - <li><a href="/en-US/docs/Web/Guide" title="/en-US/docs/Web/Guide">Web developer guide</a></li> -</ul> diff --git a/files/it/conflicting/learn/getting_started_with_the_web/index.html b/files/it/conflicting/learn/getting_started_with_the_web/index.html deleted file mode 100644 index 4605a9e4bb..0000000000 --- a/files/it/conflicting/learn/getting_started_with_the_web/index.html +++ /dev/null @@ -1,278 +0,0 @@ ---- -title: Scrivi una semplice pagina in HTML -slug: conflicting/Learn/Getting_started_with_the_web -tags: - - Guide - - HTML - - Principianti - - Web Development -translation_of: Learn/Getting_started_with_the_web -translation_of_original: Learn/HTML/Write_a_simple_page_in_HTML -original_slug: Learn/HTML/Scrivi_una_semplice_pagina_in_HTML ---- -<div class="summary"> -<p>In questo articolo impareremo come creare una semplice pagina web con il {{Glossary("HTML")}}.</p> -</div> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Prerequisiti:</th> - <td>Hai bisogno di <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">un editore di testo</a> e di sapere <a href="/en-US/docs/Learn/Open_a_file_in_a_browser">come aprire un file in un browser</a>.</td> - </tr> - <tr> - <th scope="row">Obiettivo:</th> - <td>Creare una pagina web che puoi visualizzare con il browser.</td> - </tr> - </tbody> -</table> - -<h2 id="Sommario">Sommario</h2> - -<p>La semplice pagina web è solo un documento {{Glossary("HTML")}}.Le uniche cose del quale hai bisogno sono un documento HTML valido sul tuo computer e un web browser.Vediamo come usare HTML {{Glossary("Tag","tags")}} e potrai essere in grado di vedere la pagina che hai creato nel browser.</p> - -<h2 id="Apprendimento_attivo">Apprendimento attivo</h2> - -<p>Prima di tutto accertiamoci di avere un editore di testo che sia comodo e un web browser funzionante. Praticamente qualsiasi editore di testo può farlo, ad esempio Notepad in Windows o TextEdit sul Mac, ma assicurati di avere creato un semplice documento di testo (solo caratteri senza alcun supporto di formattazione). Se vuoi usare TextEdit sul MAc scegli "Make Plain Text" dal menu "Format.</p> - -<h3 id="Primo_passo_Un_file">Primo passo: Un file</h3> - -<p>una singola pagina web è fatta (almeno) da un file HTML, così inziamo a creare una di quelle che lo comporranno. Apri il tuo editore di testo e crea un nuovo file di testo poi scrivi qualcosa come nell'esempio:</p> - -<pre class="brush: html"><!DOCTYPE html> -<html> -<head> - <title>Hi there</title> -</head> -<body> - This is a page - a simple page -</body> -</html></pre> - -<p>Se vuoi puoi apportare delle modifiche rispetto all'esempio sentiti libero di aggiungere o cambiare il testo nel body o nel title e poi salva il file. Assicurati in fine di dare un nome al file con estensione ".html". Per esempio, potresti nominarla "my_page.html".</p> - -<p>Adesso dovresti avere un file sul tuo computer che assomiglia a questo esempio nella cartella (lla somiglianza dipende dal tuo sistema opertivo):</p> - -<p><img alt="Screenshot of a file explorer with a html file for local test" src="https://mdn.mozillademos.org/files/8383/Capture%20du%202014-08-20%2021:20:25.png" style="height: 72px; width: 365px;"></p> - -<p>Facendo un doppio click sul file si aprirà nel browser, per aprire il file direttamente sull' editore di testo al fine di modificarlo puoi: fare click con il tasto destro e scegliere di aprire il documento nell'editore di testo; oppure trascinare il documento all'interno dell'editore od aprire il documento scegliendo "Open" dal menu dell'editore "File". La somiglianza all'esempio che vedi sotto dipende dall'editore che utilizzi:</p> - -<p><img alt="Screenshot of a file explorer with a html file for local test" src="https://mdn.mozillademos.org/files/8385/Capture%20du%202014-08-20%2021:24:06.png" style="height: 180px; width: 311px;"></p> - -<h3 id="Secondo_passo_Un_web_browser">Secondo passo: Un web browser</h3> - -<p>All'interno del file explorer (come Windows Explorer, Finder sul Mac, o Files in Ubuntu), trovi il documento che hai appena creato e lo apri con il browser (fai doppio click o lo trascini nell'icona del browser). Adesso il browser mostra il testo dal file HTML che hai creato e il tab mostra il titolo della pagina il tutto potrebbe assomigliare all'esempio che visualizzi sotto ,fermo restando che la visalizzazione cambia a seconda della piattaforma e del browser da te utilizzati:</p> - -<p><img alt="Screenshot of a file explorer with a html file for local test" src="https://mdn.mozillademos.org/files/8387/Capture%20du%202014-08-20%2021:28:22.png" style="border-style: solid; border-width: 1px; height: 111px; width: 513px;"></p> - -<p>Come puoi vedere il contenuto del tag body corrisponde al contenuto della pagina e il contenuto del tag title da te scelto è mostrato nel tab, ma le due linee di testo non sono scritte su due differente ma su un'unica linea. Interessante.</p> - -<h3 id="Terzo_passo_Sperimenta_e_impara">Terzo passo: Sperimenta e impara</h3> - -<p>Prova a rimuovere parti dell' HTML e guarda cosa accade. Alcuni cambiamenti ti permetteranno di mostrare la pagina nel browser ed altri daranno risultati sbagliati.Ciò Accade perchè il browser cerca di compensare alcuni errori comuni.</p> - -<p>La prima cosa da notare è che l'unica cosa che vedi sullo schermo è il testo che non è all'interno delle parentesi angolate (altrimenti conosciute come i simboli di maggiore e minore ma che chiamiamo parentesi angolate quando parliamo di HTML). Ogni cosa all'interno delle parentesi angolate è un{{Glossary("tag")}}, che rappresenta una struttura o scheletro della pagina web.Tutti i contenuti mostrati sono racchiusi tra i tags.</p> - -<p>Il nostro esempio di pagina HTML ha due grandi sezioni: un intestazione contenuta all'interno {{HTMLElement("head")}} elemento blocco "block", ed un corpo, contenuto {{HTMLElement("body")}}. Il corpo contiene il testo mostrato all'interno della pagina web.</p> - -<p>Ogni tag ha un significato specifico e può essere usato di conseguenza. Per esempio {{HTMLElement("title")}} è usato per indicare il titolo della pagina che può differire dal nome del file, nota che anche che i tag possono presentaresi all'interno del contenuto di altri tags. L'{{HTMLElement("title")}} è contenuto all'interno {{HTMLElement("head")}}, per esempio.</p> - -<p>Se vuoi inserire qualcosa come un immagine hai bisogno di aggiungere un tag per l'immagine e la stessa immagine all'interno.Per esempio:</p> - -<pre class="brush: html"><!DOCTYPE html> -<html> -<head> - <title>Hi there</title> -</head> -<body> - This is a page - a simple page - <img src="unicorn_pic.png" alt="Unicorn picture :)" /> - now with a unicorn -</body> -</html></pre> - -<p>Modifica il file per includere il tag {{HTMLElement("img")}} come questo:</p> - -<pre class="brush: html"><img src="unicorn_pic.png" alt="Unicorn picture :)" /></pre> - -<p>Può essere inserito in qualsiasi parte {{HTMLElement("body")}} non dimenticare di salvare i cambiamenti apportati alla pagina!</p> - -<p>Poi inserisci un file nominato "unicorn_pic.png" nella stessa cartella del documento HTML.Quando avrai aggiornato la finestra del browser o riaperto il documento, vedrai i cambiamenti di contenuto, completa con unicorno!(non dimenticare di salvare la pagina).</p> - -<p><img alt="Original file for the unicorn image" src="https://mdn.mozillademos.org/files/8495/unicorn_pic.png" style="height: 300px; width: 242px;"></p> - -<div class="note"> -<p><strong>Nota:</strong> Puoi prendere una copia dell'immagine dell'unicorno per usarla nei tuoi sperimenti cliccando con il tasto destro sopra l'immagine e scegliendo "Save image As..." dal menu che appare.</p> -</div> - -<p>I documenti necessari perchè questa pagina funzioni adesso assomigliano a qualcosa di questo genere nel desktop:</p> - -<p><img alt="Screenshot of the explorer with 2 files : a html file and a picture file" src="https://mdn.mozillademos.org/files/8389/Capture%20du%202014-08-20%2021:37:14.png" style="height: 69px; width: 405px;"></p> - -<p>Il risultato mostrato nel browser è questo:</p> - -<p><img alt="Screenshot for the example with a picture" src="https://mdn.mozillademos.org/files/8499/Capture%20du%202014-09-04%2021:39:16.png" style="border-style: solid; border-width: 1px; height: 404px; width: 664px;"></p> - -<p>Come hai notato il tag{{HTMLElement("img")}} ha<strong> {{Glossary("attribute","attributes")}} </strong>che dà informazioni addizionali necessarie a costruire l'oggetto richiesto in questo caso il nome del file dell'immagine da mostrare e il testo alternativo qualora l'immagine non possa essere caricata.</p> - -<p>Questo è un esempio di come aggiungere un'immagine alla pagina, ma puoi usare una tecnica similare per aggiungere musica, video e molto altro tutto usando nient'altro che l'HTML.</p> - -<h2 id="Più_in_profondità">Più in profondità</h2> - -<h3 id="Questa_non_è_una_pagina_web_molto_carina">Questa non è una pagina web molto carina</h3> - -<p>Come avrai notato questa pagina non è certo un miracolo di design e bellezza, questo perchè HTML è tutto ciò che riguarda il contenuto e ciò che il contenuto significa (in termini del suo contesto e la relazione tra i blocchi di contenuto), piuttosto che design.</p> - -<p>{{Glossary("CSS")}} ti permette di fare contenuti scintillanti aggiungendo layout, colore, font e così via. Un puro HTML è buono abbastanza per costruire semplici pagine web, ma pagine più complesse (o sebbene semplici con un design accattivante) hanno bisogno del CSS e possibilmente {{Glossary("JavaScript")}}. HTML costruisce il contenuto, CSS gli stili e JavaScript rende il contenuto dinamico.</p> - -<p>Sperimentiamo un poco con il CSS trasformando il testo contenuto nel tag body da nero a blue:</p> - -<pre class="brush: html"><!DOCTYPE html> -<html> -<head> - <title>Hi there</title> - <style> - body { - color: blue; - } - </style> -</head> - <body> - <p>This is a some blue text</p> - <img src="unicorn_pic.png" alt="Unicorn picture :)" /> - </body> -</html></pre> - -<p>Nota l'aggiunta{{HTMLElement("style")}} alla pagina all'interno{{HTMLElement("head")}}. Questo specifica quale caratteristica CSS sarà da applicare al testo contenuto nel tag body.</p> - -<p>Vuoi il testo sottolineato? prova ad aggiungere la regola "text-decoration: underline;" allo style:</p> - -<pre class="brush: css">body { - color: blue; - text-decoration: underline; -}</pre> - -<p>Vuoi che il tuo testo abbia una misura ben precisa?Prova aggiungendo "font-size: 42px;" come in esempio:</p> - -<pre class="brush: css">body { - color: blue; - text-decoration: underline; - font-size: 42px; -}</pre> - -<p>Il risultato finale sarà questo:</p> - -<pre class="brush: html"><html> -<head> - <title>Hi there</title> - <style> - body { - color: blue; - text-decoration: underline; - font-size: 42px; - } - </style> -</head> -<body> - <p>This is a blue underlined big text</p> - <img src="unicorn_pic.png" alt="Unicorn picture :)" /> -</body> -</html></pre> - -<p>e se salvi la pagina nel tuo editore e poi riaggiorni il browser la pagina che vedrai sarà la seguente:</p> - -<p><img alt="Screenshot of the browser with the page with some CSS" src="https://mdn.mozillademos.org/files/8497/Capture%20du%202014-09-04%2021:40:18.png" style="border-style: solid; border-width: 1px; height: 494px; width: 743px;"></p> - -<h3 id="Andiamo_alla_seconda_pagina">Andiamo alla seconda pagina</h3> - -<p>Quando navighi nel Web spesso incontri {{Glossary("hyperlink","links")}}, il modo più utile per navigare da una pagina all'altra. Dal momento in cui l'HTML si occupa del contenuto e i link sono il modulo del contenuto, puoi creare collegamenti tra le pagine utilizzando soltanto l'HTML.</p> - -<h4 id="Collega_due_pagine_locali">Collega due pagine locali</h4> - -<p>Per questo esercizio abbiamo bisogno di creare un secondo documento HTML sul computer aggiungiamo un link ad ogni pagina così possiamo passare velocemente avanti e indietro tra esse.</p> - -<p>Nel primo documento possiamo tenere la stessa struttura di prima, la cosa importante è aggiungere un nuovo tag {{HTMLElement("a")}}, così:</p> - -<pre class="brush: html"><!DOCTYPE html> -<html> -<head> - <title>Page 1 to ground control</title> -</head> -<body> - This is page 1. - <a href="page2.html" title="to page 2">What is going on on page 2?</a> -</body> -</html></pre> - -<p>La seconda pagina avrà un link che ci fa tornare alla prima pagina:</p> - -<pre class="brush: html"><!DOCTYPE html> -<html> -<head> - <title>Page 2 :)</title> -</head> -<body> - This is a page 2. - <a href="page1.html" title="to page 1"><span>Want to go back to page 1? Click here</span></a> -</body> -</html></pre> - -<div class="note"> -<p><strong>Nota:</strong>Assicurati che il nome del file {{HTMLElement("a")}} tag con attributo href sia lo stesso nome del documento creato nel tuo computer.</p> -</div> - -<p>Puoi adesso navigare tra i due documenti HTML apri la page 1 nel browser e fai click nel link per aprire la page 2 e viceversa. Puoi inoltre testare il bottone "previous" nel tuo browser esso dovrebbe portarti all'ultima pagina visitata.</p> - -<p>Il documento principale dovrebbe avere i due documenti nella stessa cartella, in questa maniera:</p> - -<p><img alt="Screenshot of the file explorer with two HTML documents in one directory/folder" src="https://mdn.mozillademos.org/files/8395/Capture%20du%202014-08-20%2022:06:05.png" style="height: 92px; width: 595px;"></p> - -<p>La Page 1 sarà così visualizzata nel browser:</p> - -<p><img alt="Screenshot of a file explorer with a html file for local test" src="https://mdn.mozillademos.org/files/8397/Capture%20du%202014-08-20%2022:11:31.png" style="border-style: solid; border-width: 1px; height: 114px; width: 365px;"></p> - -<p>e la Page 2 sarà così visualizzata nel browser dopo aver fatto click sul link di Page 1:</p> - -<p><img alt="Screenshot of the 2nd page of the 2 pages example in the browser" src="https://mdn.mozillademos.org/files/8401/Capture%20du%202014-08-20%2022:15:17.png" style="border-style: solid; border-width: 1px; height: 116px; width: 366px;"></p> - -<div class="note"> -<p><strong>Nota:</strong>Il link che torna alla page 1 è violetto perchè il browser "sa" che in precedenza avevamo visitato la Page 1</p> -</div> - -<p>Se vuoi puoi fare la prova creando più pagine o passare alla prossima sezione per portare tutto questo al lvello successivo.</p> - -<h4 id="Collegamento_ad_un_altra_pagina_web">Collegamento ad un altra pagina web</h4> - -<p>In questo esercizio aggiungiamo un link al documento HTML così che il lettore possa velocemente prendere alcune pagine utili nel Web. Puoi collegare qualsiasi cosa sia disponibile nel Web pubblico, prova a creare un collegamento con Wikipedia:</p> - -<pre class="brush: html"><!DOCTYPE html> -<html> -<head> - <title>My page</title> -</head> -<body> - One day,...Unicorns are great...See you. - <a href="https://en.wikipedia.org/wiki/Unicorn" title="Unicorn page on Wikipedia"><span>Want to go know more about unicorns? Wikipedia is right here</span></a> -</body> -</html></pre> - -<p>Potrebbe più o meno assomigliare a questo nel browser:</p> - -<p><img alt="Screenshot of the example page with a link to Wikipedia in the browser" src="https://mdn.mozillademos.org/files/8403/Capture%20du%202014-08-20%2022:22:24.png" style="height: 158px; width: 861px;"></p> - -<p>Passando il puntatore del mouse sopra il link vedrai l'attributo{{htmlattrxref("title")}} mostrato in un <strong>tooltip.</strong>Questo può essere usato per dare maggiori informazioni sul link così che l'utente possa fare una scelta formazioni tra il cliccare su esso o meno.</p> - -<div class="note"> -<p><strong>Ricorda:</strong> Ogni volta che modifichi la pagina non dimenticare di salvare il documento sull'editor e di aggiornare la pagina sul browser così che possa vedere i cambiamenti fatti.</p> -</div> - -<h2 id="Prossimi_passi">Prossimi passi</h2> - -<ul> - <li><a href="/en-US/docs/Learn/HTML/HTML_tags">Come usare un tag HTML</a>: Ci sono molti tag in HTML qui abbiamo visto solo i base, puoi trovare delle ulteriori risorse qui.</li> - <li><a href="/en-US/docs/Learn/Anatomy_of_a_web_page">Anatomia della pagina web</a>: HTML ha alcune regole e una pagina può avere molto contenuto questo può aiutare a comprendere pagine più complesse come quelle usate in alcuni dei più famosi siti nel Web!</li> - <li><a href="/en-US/docs/Learn/Understanding_links_on_the_web">Comprendere i link</a>: Abbiamo usato esempi molto semplici con i link questo articolo è per te se vuoi capire perchè i "links" sono l'origine del nome del "Web".</li> - <li><a href="/en-US/docs/Learn/Using_images">Usare le immagini</a> and <a href="/en-US/docs/Learn/Adding_audio_and_video">aggiungere audio e video</a> sono utili per aggiungere del contenuto multimediale con il semplice HTML.</li> -</ul> diff --git a/files/it/conflicting/learn/getting_started_with_the_web/javascript_basics/index.html b/files/it/conflicting/learn/getting_started_with_the_web/javascript_basics/index.html deleted file mode 100644 index d9b371f22b..0000000000 --- a/files/it/conflicting/learn/getting_started_with_the_web/javascript_basics/index.html +++ /dev/null @@ -1,332 +0,0 @@ ---- -title: Getting Started (JavaScript Tutorial) -slug: conflicting/Learn/Getting_started_with_the_web/JavaScript_basics -translation_of: Learn/Getting_started_with_the_web/JavaScript_basics -translation_of_original: Web/JavaScript/Getting_Started -original_slug: Web/JavaScript/Getting_Started ---- -<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/conflicting/learn/javascript/objects/index.html b/files/it/conflicting/learn/javascript/objects/index.html deleted file mode 100644 index e404d0134d..0000000000 --- a/files/it/conflicting/learn/javascript/objects/index.html +++ /dev/null @@ -1,392 +0,0 @@ ---- -title: Introduzione a JavaScript Object-Oriented -slug: conflicting/Learn/JavaScript/Objects -tags: - - Classe - - Costruttore - - Eredità - - Incapsulamento - - Membri - - Oggetto - - Orientato agli oggetti -translation_of: Learn/JavaScript/Objects -translation_of_original: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript -original_slug: Web/JavaScript/Introduzione_al_carattere_Object-Oriented_di_JavaScript ---- -<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/conflicting/learn/server-side/django/index.html b/files/it/conflicting/learn/server-side/django/index.html deleted file mode 100644 index 847a230dcd..0000000000 --- a/files/it/conflicting/learn/server-side/django/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: Python -slug: conflicting/Learn/Server-side/Django -translation_of: Learn/Server-side/Django -translation_of_original: Python -original_slug: Python ---- -<p><a class="external" href="http://www.python.org">Python</a> è un linguaggio di programmazione interpretato disponibile su una vasta varietà di piattaforme, inclusi Linux, MacOS X e Microsoft Windows.</p> - -<h2 id="Learning_Python" name="Learning_Python">Imparare Python</h2> - -<h3 id="Libri_digitali_(gratuiti)">Libri digitali (gratuiti)</h3> - -<p><a class="external" href="http://www.diveintopython.net/toc/index.html">Dive Into Python</a> è considerata una delle migliori introduzioni a Python disponibili, anche se è aggiornato al 2004. Ciò nonostante, fornisce una buona trattazione delle basi del linguaggio e dei compiti più comuni per cui è usato il linguaggio come le richieste web o le operazioni sui file. Per gli argomenti più complessi, <a class="external" href="http://gnosis.cx/TPiP/">Text Processing In Python</a> è un eccellente tutorial (o reference).</p> - -<p>Ci sono poi altri tutorial e risorse gratuite, disponibili:</p> - -<ul style="margin-left: 40px;"> - <li>Il <a class="external" href="http://docs.python.org/tutorial/index.html" title="http://docs.python.org/tutorial/index.html">Tutorial Ufficiale</a> e la <a href="http://docs.python.org" title="http://docs.python.org">documentazione ufficiale</a></li> - <li><a href="http://en.wikibooks.org/wiki/Non-Programmer%27s_Tutorial_for_Python_2.6" title="http://en.wikibooks.org/wiki/Non-Programmer%27s_Tutorial_for_Python_2.6">Non-Programmer's Tutorial for Python 2.6</a> di <a href="http://en.wikibooks.org/wiki/Main_Page" title="http://en.wikibooks.org/wiki/Main_Page">Wikibooks</a></li> - <li><a href="http://www.greenteapress.com/thinkpython/" title="http://www.greenteapress.com/thinkpython/">Think Python</a>: How to Think Like a Computer Scientist di <strong>Allen B. Downey </strong>(disponibile in formato <a href="http://www.greenteapress.com/thinkpython/thinkpython.pdf" title="http://www.greenteapress.com/thinkpython/thinkpython.pdf">PDF</a> & <a href="http://www.greenteapress.com/thinkpython/html/index.html" title="http://www.greenteapress.com/thinkpython/html/index.html">HTML</a>). - <ul> - <li><a href="http://greenteapress.com/complexity/index.html" title="http://greenteapress.com/complexity/index.html">Think Complexity</a> di <strong>Allen B. Downey</strong> continua l'opera del precedente (disponibile in formato <a href="http://greenteapress.com/complexity/thinkcomplexity.pdf" title="http://greenteapress.com/complexity/thinkcomplexity.pdf">PDF</a> & <a href="http://greenteapress.com/complexity/html/index.html" title="http://greenteapress.com/complexity/html/index.html">HTML</a> )</li> - </ul> - </li> - <li><a href="http://learnpythonthehardway.org" title="http://learnpythonthehardway.org">Learn Python The Hard Way</a> di <span id="cke_bm_75S" class="hidden"> </span>Zed Shaw<span id="cke_bm_75E" class="hidden"> </span> (<a href="http://learnpythonthehardway.org/book/" title="http://learnpythonthehardway.org/book/">formato HTML</a>)</li> - <li><a href="http://www.itmaybeahack.com/book/python-2.6/html/index.html" title="http://www.itmaybeahack.com/book/python-2.6/html/index.html">Building Skills in Python</a> di<span id="cke_bm_76S" class="hidden"> </span> Steven F. L<span id="cke_bm_76E" class="hidden"> </span>ott (<span id="cke_bm_77E" class="hidden"> </span><a href="http://www.itmaybeahack.com/book/python-2.6/latex/BuildingSkillsinPython.pdf" title="http://www.itmaybeahack.com/book/python-2.6/latex/BuildingSkillsinPython.pdf">formato PDF</a>)</li> -</ul> - -<p>Una volta acquisite le basi, si può passare a <a href="http://python.net/~goodger/projects/pycon/2007/idiomatic/handout.html" title="http://python.net/~goodger/projects/pycon/2007/idiomatic/handout.html">Code Like a Pythonista: Idiomatic Python</a> per approfondire alcuni aspetti di Python che lo rendono diverso dagli altri linguaggi .</p> - -<h3 id="Corsi_Online_(gratuiti)">Corsi Online (gratuiti)</h3> - -<ul style="margin-left: 40px;"> - <li><a href="https://developers.google.com/edu/python/" title="http://code.google.com/edu/languages/google-python-class/">Google's Python Class</a></li> - <li>Learnstreet's Free <a href="http://www.learnstreet.com/lessons/languages/python" title="http://www.learnstreet.com/lessons/languages/python">Python Courses and Videos</a></li> - <li><a href="http://www.codecademy.com/tracks/python" title="http://www.codecademy.com/tracks/python">Python</a> di <strong>Codecademy</strong></li> - <li><a href="http://ocw.mit.edu/courses/electrical-engineering-and-computer-science/6-189-a-gentle-introduction-to-programming-using-python-january-iap-2008/" title="http://ocw.mit.edu/courses/electrical-engineering-and-computer-science/6-189-a-gentle-introduction-to-programming-using-python-january-iap-2008/">A Gentle Introduction to Programming Using Python</a> ad opera del <strong>MIT</strong></li> - <li><a href="http://www.fireboxtraining.com" title="http://www.fireboxtraining.com">Firebox Training's</a> <a href="http://www.fireboxtraining.com/blog/python-tutorials/" title="http://www.fireboxtraining.com/blog/python-tutorials/">Free Python course video tutorial blog</a></li> -</ul> - -<h2 id="Python_in_Mozilla" name="Python_in_Mozilla">Python nelle applicazioni Mozilla</h2> - -<p><a href="/en-US/docs/XPCOM" title="XPCOM">XPCOM</a> di per sè supporta solamente la comunicazione tra C++ e JavaScript. Il <a href="/en-US/docs/PyXPCOM" title="PyXPCOM">modulo Python XPCOM</a> (chiamato anche <strong>PyXPCOM</strong>) è uno strato di basso-livello che mette insieme Python e Mozilla, permettendo ai componenti XPCOM scritti in C++ o JavaScript di comunicare con Python, o viceversa. PyXPCOM non è incluso <em>di default </em>in Firefox, quindi si dovrebbe usare una versione di terze-parti che include il modulo. Un esempio di utilizzatori di PyXPCOM sono la famiglia di prodotti <strong>Komodo</strong>.</p> - -<p>A partire da Mozilla 1.9, è stato implementato Python DOM (<a href="/en-US/docs/PyDOM" title="PyDOM">PyDOM</a>). Ciò permette agli sviluppatori di usare Python col tag <script> (ovviamente non nella release <em>default </em>di Firefox o Thunderbird).</p> - -<h2 id="Strumenti_scritti_in_Python">Strumenti scritti in Python</h2> - -<p>Python usato in Mozilla per gli strumenti che si occupano di svolgere diverse operazioni sulle applicazioni e le infrastrutture. Sarebbe utile leggere <a href="/en-US/docs/Python_Environment_and_Tools_for_Mozilla" title="Python_Environment_and_Tools_for_Mozilla">Python Environment and Tools for Mozilla</a>.</p> - -<p>Gli strumenti scritti in Python sono listati qui: <a class="external" href="http://k0s.org/toolbox/?language=python">http://k0s.org/toolbox/?language=python</a></p> - -<h2 id="L'uso_di_Python_in_Mozilla">L'uso di Python in Mozilla</h2> - -<p>Mozilla ha diverse infrastrutture basate su Python:</p> - -<ul> - <li><strong>Django</strong> per lo<a href="http://blog.mozilla.org/webdev/"> sviluppo web</a></li> - <li><a class="link-https" href="https://wiki.mozilla.org/Buildbot" title="https://wiki.mozilla.org/Buildbot">buildbot</a></li> - <li>Molti strumenti per i <a href="/en-US/docs/Mozilla_automated_testing" title="Mozilla automated testing">test</a></li> - <li><a class="link-https" href="https://wiki.mozilla.org/Auto-tools/Projects/Mozbase" title="https://wiki.mozilla.org/Auto-tools/Projects/MozBase">mozbase</a></li> -</ul> - -<h2 id="Python_in_Mozilla-Central">Python in Mozilla-Central</h2> - -<p><span style="background-color: #ffff00;">[Nota: guarda <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=835553">https://bugzilla.mozilla.org/show_bug.cgi?id=835553</a>]</span></p> - -<p>Molti dei sistemi di sviluppo, di testing, altri strumenti ed infrastrutture in mozilla-central sono scritte in Python.</p> - -<ul> - <li><a href="http://mxr.mozilla.org/mozilla-central/source/python/" title="http://mxr.mozilla.org/mozilla-central/source/python/"><code>python/</code></a> contiene, tra le altre cose, moduli Python hostati per pypi.python.org</li> - <li><a href="http://mxr.mozilla.org/mozilla-central/source/testing/mozbase/" title="http://mxr.mozilla.org/mozilla-central/source/testing/mozbase/"><code>testing/mozbase/</code></a> contiene un mirror dei pacchetti <a href="https://wiki.mozilla.org/Auto-tools/Projects/Mozbase" title="https://wiki.mozilla.org/Auto-tools/Projects/Mozbase"><code>Mozbase</code></a> come quelli usati in mozilla-central</li> -</ul> - -<p><strong>Nota: </strong>un <a href="/en-US/docs/Python/Virtualenv" title="/en-US/docs/Python/Virtualenv">virtualenv</a> è stato attivato nella <a href="https://developer.mozilla.org/en-US/docs/Developer_Guide/Mozilla_build_FAQ#Build_configurations" title="https://developer.mozilla.org/en-US/docs/Developer_Guide/Mozilla_build_FAQ#Build_configurations"><code>objdir</code></a> (<code>$OBJDIR/_virtualenv)</code> . Per aggiungere moduli a <em>virtualenv</em>, edita <a href="http://mxr.mozilla.org/mozilla-central/source/build/virtualenv_packages.txt" title="http://mxr.mozilla.org/mozilla-central/source/build/virtualenv/packages.txt">build/virtualenv_packages.txt </a>. Questi sono installati via <a href="http://mxr.mozilla.org/mozilla-central/source/build/virtualenv/populate_virtualenv.py" title="http://mxr.mozilla.org/mozilla-central/source/build/virtualenv/populate_virtualenv.py">build/virtualenv/populate_virtualenv.py</a> .</p> - -<h2 id="Pacchetti_Python">Pacchetti Python</h2> - -<p>Python usa il file <a class="external" href="http://docs.python.org/distutils/index.html" title="http://docs.python.org/distutils/index.html">setup.py</a> per l'installazione di <a class="external" href="http://docs.python.org/tutorial/modules.html#packages" title="http://docs.python.org/tutorial/modules.html#packages">moduli Python</a>. Digitando <code>python setup.py install</code> installerai il modulo, ciò ti permetterà di usare il modulo stesso perchè aggiunto nel <a class="external" href="http://docs.python.org/tutorial/modules.html#the-module-search-path" title="http://docs.python.org/tutorial/modules.html#the-module-search-path">percorso PATH di Python</a>. Per Python 2.x esistono molti moduli disponibili. <code><a class="external" href="http://docs.python.org/distutils/index.html" title="http://docs.python.org/distutils/index.html">distutils</a></code> è l'unico <span style="color: #fff0f5;"><span style="background-color: rgb(178, 34, 34);">gestore di moduli</span> </span>presente nella <a class="external" href="http://docs.python.org/library/" title="http://docs.python.org/library/">libreria standard</a>. <code>distutils</code> puo caricare moduli su <a class="external" href="http://pypi.python.org/pypi" title="http://pypi.python.org/pypi">PyPI</a> ed installarli. Per maggiori dettagli, puoi consultare <a class="external" href="http://docs.python.org/distutils/index.html" title="http://docs.python.org/distutils/index.html"><code>la documentazione ufficiale di Python</code></a>.</p> - -<p>A differenza di <code>distutils</code> che fa parte della libreria standard, <a class="external" href="http://peak.telecommunity.com/DevCenter/setuptools" title="http://peak.telecommunity.com/DevCenter/setuptools">setuptools</a> è un modulo di terze parti. <code>È certamente compatibile con distutils</code>, ma la cosa importante è che <a class="external" href="http://peak.telecommunity.com/DevCenter/setuptools#declaring-dependencies" title="http://peak.telecommunity.com/DevCenter/setuptools#declaring-dependencies">include le dependenze</a> necessarie all'installazione dei vari moduli come pre-requisito quando si invoca <code>setup.py</code> così come la possibilità di installare i moduli in <a class="external" href="http://packages.python.org/distribute/setuptools.html#development-mode" title="http://packages.python.org/distribute/setuptools.html#development-mode">modalità sviluppo</a>. Questo permette di editare i file tramite <a class="external" href="http://docs.python.org/library/site.html" title="http://docs.python.org/library/site.html">file .pth</a> che risultano maneggievoli. <code>setuptools</code> fornisce anche <code><a class="external" href="http://packages.python.org/distribute/easy_install.html" title="http://packages.python.org/distribute/easy_install.html">easy_install</a></code> che permette di installare moduli (e relative dipendenze) da <a class="external" href="http://pypi.python.org/pypi" title="http://pypi.python.org/pypi">PyPI</a>. Per esempio, se volessimo installare PyYAML, basterebbe digitare:</p> - -<pre>easy_install PyYAML -</pre> - -<p>Dal momento che <em>setuptools </em>non è presente di default in Python, avrai sicuramente bisogno di installarlo per usarlo. Puoi installare <code>setuptools</code> da PyPI scaricando il pacchetto, estraendolo, e digitando <code>python setup.py install</code> a linea-di-comando, oppure usare <code><a class="external" href="http://peak.telecommunity.com/dist/ez_setup.py" title="http://peak.telecommunity.com/dist/ez_setup.py">ez_setup.py</a></code>. Puoi scaricarlo ed avviarlo con Python (sono richiesti privilegi di root), oppure in una sezione <a class="external" href="http://www.gnu.org/s/bash/" title="http://www.gnu.org/s/bash/">bash.</a></p> - -<pre>sudo python <(curl http://peak.telecommunity.com/dist/ez_setup.py) -</pre> - -<p><code>setuptools</code> potrebbe essere già presente in <a href="/en-US/docs/Python/Virtualenv" title="Virtualenv">virtualenv</a>, quindi potresti non avere bisogno di installare (manualmente) <em>setuptools </em>se usi virtualenv. C'è poi <a class="external" href="http://packages.python.org/distribute/" title="http://packages.python.org/distribute/">distribute</a>, un fork di setuptools scritto dal nostro amico <a class="external" href="http://ziade.org/" title="http://ziade.org/">Tarek Ziade</a>. È compatibile con setuptools.</p> - -<div class="note"><strong>Note:</strong> È altamente consigliato usare <a href="/en-US/docs/Python/Virtualenv" title="Virtualenv">virtualenv</a> durante la fase di sviluppo.</div> - -<p><a class="external" href="http://pypi.python.org/pypi" title="http://pypi.python.org/pypi">Python Package Index (PyPI)</a> è il punto di raccolta centrale per i moduli Python di terze-parti. Se hai bisogno di funzionalità extra in Python, dacci un'occhiata!</p> - -<p>Guarda anche: <a class="external" href="http://k0s.org/portfolio/packaging.html">http://k0s.org/portfolio/packaging.html</a></p> - -<h2 id="Vedi_anche">Vedi anche:</h2> - -<ul> - <li><a class="external" href="http://docs.services.mozilla.com/server-devguide/release.html" title="http://docs.services.mozilla.com/server-devguide/release.html">Releasing an application</a> (documentazione Mozilla Services)</li> - <li><a href="http://pycheesecake.org/wiki/PythonTestingToolsTaxonomy">http://pycheesecake.org/wiki/PythonTestingToolsTaxonomy</a></li> - <li><a class="link-https" href="https://wiki.mozilla.org/Auto-tools/Python101">https://wiki.mozilla.org/Auto-tools/Python101</a></li> - <li><a href="http://www.learnstreet.com/cg/simple/projects/python" title="http://www.learnstreet.com/cg/simple/projects/python">Python Projects </a>di Code Garage</li> -</ul> diff --git a/files/it/conflicting/web/accessibility/index.html b/files/it/conflicting/web/accessibility/index.html deleted file mode 100644 index f45cf3b9c4..0000000000 --- a/files/it/conflicting/web/accessibility/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: Sviluppo Web -slug: conflicting/Web/Accessibility -translation_of: Web/Accessibility -translation_of_original: Web/Accessibility/Web_Development -original_slug: Web/Accessibility/Sviluppo_Web ---- -<p> </p> -<table> - <tbody> - <tr> - <td style="vertical-align: top;"> - <h2 id="Accessibilità_Web">Accessibilità Web</h2> - <dl> - <dt> - <a href="/docs/Accessibility/ARIA" title="http://developer.mozilla.org/en-US/docs/Accessibility/ARIA">ARIA per sviluppatori</a></dt> - </dl> - <dl> - <dd style=""> - ARIA rende possibile la creazione di contenuto HTML dinamico accessibile. Ad esempio, regioni di contenuto attivo e widget JavaScript.</dd> - </dl> - <dl> - <dt> - <a href="/Accessibility/Keyboard-navigable_JavaScript_widgets" title="en/Accessibility/Keyboard-navigable JavaScript widgets">Widget JavaScript navigabili da tastiera</a></dt> - <dd> - Fino ad ora, gli sviluppatori che volevano rendere i propri widget basati su <div> e <span> accessibili tramite tastiera mancavano della tecnica adatta. L'usabilità da tastiera è parte dei requisiti minimi di accessibilità di cui ogni sviluppatore dovrebbe essere a conoscenza.</dd> - </dl> - <h2 id="Accessibilità_di_XUL">Accessibilità di XUL</h2> - <dl> - <dt> - </dt> - <dt> - <a href="/docs/Building_accessible_custom_components_in_XUL" title="en/Building_accessible_custom_components_in_XUL">Sviluppare componenti personalizzati accessibili con XUL</a></dt> - <dd> - Come usare tecniche di accessibilità in DHTML per rendere accessibili i propri componenti XUL personalizzati.</dd> - </dl> - <dl> - <dt> - <a href="/docs/XUL_accessibility_guidelines" title="en/XUL_accessibility_guidelines">Linee guida alla creazione di XUL accessibile</a></dt> - <dd> - Quando viene utilizzato secondo queste linee guida, XUL è in grado di generare interfacce utente accessibili. Sviluppatori, revisori, designer e ingegneri del controllo qualità devono avere familiarità con queste linee guida.</dd> - </dl> - <dl> - </dl> - <dl> - </dl> - </td> - <td style="vertical-align: top;"> - <h2 id="Risorse_esterne">Risorse esterne</h2> - <dl> - <dt> - <a class="external" href="http://diveintoaccessibility.info/">Dive into Accessibility</a></dt> - </dl> - <dl> - <dd> - Questo libro risponde a due domande. La prima è "Perché dovrei rendere il mio sito web più accessibile?" La seconda è "Come posso rendere il mio sito più accessibile?"</dd> - </dl> - <dl> - <dt> - <a class="external" href="http://www-306.ibm.com/able/guidelines/web/accessweb.html">Accessible Web Page Authoring</a></dt> - <dd> - Una pratica lista di controllo sull'accessibilità Web, da IBM.</dd> - </dl> - </td> - </tr> - </tbody> -</table> -<p> </p> diff --git a/files/it/conflicting/web/api/canvas_api/tutorial/index.html b/files/it/conflicting/web/api/canvas_api/tutorial/index.html deleted file mode 100644 index 12bd7e78d9..0000000000 --- a/files/it/conflicting/web/api/canvas_api/tutorial/index.html +++ /dev/null @@ -1,163 +0,0 @@ ---- -title: Drawing graphics with canvas -slug: conflicting/Web/API/Canvas_API/Tutorial -translation_of: Web/API/Canvas_API/Tutorial -translation_of_original: Web/API/Canvas_API/Drawing_graphics_with_canvas -original_slug: Web/HTML/Canvas/Drawing_graphics_with_canvas ---- -<div class="note"> - <p>Most of this content (but not the documentation on drawWindow) has been rolled into the more expansive <a href="/en-US/docs/HTML/Canvas/Tutorial" title="HTML/Canvas/tutorial">Canvas tutorial</a>, this page should probably be redirected there as it's now redundant but some information may still be relevant.</p> -</div> -<h2 id="Introduction" name="Introduction">Introduction</h2> -<p>With <a href="/en-US/docs/Mozilla/Firefox/Releases/1.5" title="Firefox_1.5_for_developers">Firefox 1.5</a>, Firefox includes a new HTML element for programmable graphics. <code><canvas></code> is based on the <a href="http://www.whatwg.org/specs/web-apps/current-work/#the-canvas">WHATWG canvas specification</a>, which itself is based on Apple's <code><canvas></code> implemented in Safari. It can be used for rendering graphs, UI elements, and other custom graphics on the client.</p> -<p><code><canvas></code> creates a fixed size drawing surface that exposes one or more <em>rendering contexts</em>. We'll focus on the 2D rendering context. For 3D graphics, you should use the <a href="/en-US/docs/WebGL" title="https://developer.mozilla.org/en/WebGL">WebGL rendering context</a>.</p> -<h2 id="The_2D_Rendering_Context" name="The_2D_Rendering_Context">The 2D Rendering Context</h2> -<h3 id="A_Simple_Example" name="A_Simple_Example">A Simple Example</h3> -<p>To start off, here's a simple example that draws two intersecting rectangles, one of which has alpha transparency:</p> -<pre class="brush: js">function draw() { - var ctx = document.getElementById('canvas').getContext('2d'); - - ctx.fillStyle = "rgb(200,0,0)"; - ctx.fillRect (10, 10, 55, 50); - - ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; - ctx.fillRect (30, 30, 55, 50); -} -</pre> -<div class="hidden"> - <pre class="brush: html"><canvas id="canvas" width="120" height="120"></canvas></pre> - <pre class="brush: js">draw();</pre> -</div> -<p>{{EmbedLiveSample('A_Simple_Example','150','150','/@api/deki/files/602/=Canvas_ex1.png')}}</p> -<p>The <code>draw</code> function gets the <code>canvas</code> element, then obtains the <code>2d</code> context. The <code>ctx</code> object can then be used to actually render to the canvas. The example simply fills two rectangles, by setting fillStyle to two different colors using CSS color specifications and calling <code>fillRect</code>. The second fillStyle uses <code>rgba()</code> to specify an alpha value along with the color.</p> -<p>The <code>fillRect</code>, <code>strokeRect</code>, and <code>clearRect</code> calls render a filled, outlined, or clear rectangle. To render more complex shapes, paths are used.</p> -<h3 id="Using_Paths" name="Using_Paths">Using Paths</h3> -<p>The <code>beginPath</code> function starts a new path, and <code>moveTo</code>, <code>lineTo</code>, <code>arcTo</code>, <code>arc</code>, and similar methods are used to add segments to the path. The path can be closed using <code>closePath</code>. Once a path is created, you can use <code>fill</code> or <code>stroke</code> to render the path to the canvas.</p> -<pre class="brush: js">function draw() { - var ctx = document.getElementById('canvas').getContext('2d'); - - ctx.fillStyle = "red"; - - ctx.beginPath(); - ctx.moveTo(30, 30); - ctx.lineTo(150, 150); - // was: ctx.quadraticCurveTo(60, 70, 70, 150); which is wrong. - ctx.bezierCurveTo(60, 70, 60, 70, 70, 150); // <- this is right formula for the image on the right -> - ctx.lineTo(30, 30); - ctx.fill(); -} -</pre> -<div class="hidden"> - <pre class="brush: html"><canvas id="canvas" width="160" height="160"></canvas></pre> - <pre class="brush: js">draw();</pre> -</div> -<p>{{EmbedLiveSample('Using_Paths','190','190','/@api/deki/files/603/=Canvas_ex2.png')}}</p> -<p>Calling <code>fill()</code> or <code>stroke()</code> causes the current path to be used. To be filled or stroked again, the path must be recreated.</p> -<h3 id="Graphics_State" name="Graphics_State">Graphics State</h3> -<p>Attributes of the context such as <code>fillStyle</code>, <code>strokeStyle</code>, <code>lineWidth</code>, and <code>lineJoin</code> are part of the current <em>graphics state</em>. The context provides two methods, <code>save()</code> and <code>restore()</code>, that can be used to move the current state to and from the state stack.</p> -<h3 id="A_More_Complicated_Example" name="A_More_Complicated_Example">A More Complicated Example</h3> -<p>Here's a little more complicated example, that uses paths, state, and also introduces the current transformation matrix. The context methods <code>translate()</code>, <code>scale()</code>, and <code>rotate()</code> all transform the current matrix. All rendered points are first transformed by this matrix.</p> -<pre class="brush: js">function drawBowtie(ctx, fillStyle) { - - ctx.fillStyle = "rgba(200,200,200,0.3)"; - ctx.fillRect(-30, -30, 60, 60); - - ctx.fillStyle = fillStyle; - ctx.globalAlpha = 1.0; - ctx.beginPath(); - ctx.moveTo(25, 25); - ctx.lineTo(-25, -25); - ctx.lineTo(25, -25); - ctx.lineTo(-25, 25); - ctx.closePath(); - ctx.fill(); -} - -function dot(ctx) { - ctx.save(); - ctx.fillStyle = "black"; - ctx.fillRect(-2, -2, 4, 4); - ctx.restore(); -} - -function draw() { - var ctx = document.getElementById('canvas').getContext('2d'); - - // note that all other translates are relative to this one - ctx.translate(45, 45); - - ctx.save(); - //ctx.translate(0, 0); // unnecessary - drawBowtie(ctx, "red"); - dot(ctx); - ctx.restore(); - - ctx.save(); - ctx.translate(85, 0); - ctx.rotate(45 * Math.PI / 180); - drawBowtie(ctx, "green"); - dot(ctx); - ctx.restore(); - - ctx.save(); - ctx.translate(0, 85); - ctx.rotate(135 * Math.PI / 180); - drawBowtie(ctx, "blue"); - dot(ctx); - ctx.restore(); - - ctx.save(); - ctx.translate(85, 85); - ctx.rotate(90 * Math.PI / 180); - drawBowtie(ctx, "yellow"); - dot(ctx); - ctx.restore(); -} -</pre> -<div class="hidden"> - <pre class="brush: html"><canvas id="canvas" width="185" height="185"></canvas></pre> - <pre class="brush: js">draw();</pre> -</div> -<p>{{EmbedLiveSample('A_More_Complicated_Example','215','215','/@api/deki/files/604/=Canvas_ex3.png')}}</p> -<p>This defines two methods, <code>drawBowtie</code> and <code>dot</code>, that are called 4 times. Before each call, <code>translate()</code> and <code>rotate()</code> are used to set up the current transformation matrix, which in turn positions the dot and the bowtie. <code>dot</code> renders a small black square centered at <code>(0, 0)</code>. That dot is moved around by the transformation matrix. <code>drawBowtie</code> renders a simple bowtie path using the passed-in fill style.</p> -<p>As matrix operations are cumulative, <code>save()</code> and <code>restore()</code> are used around each set of calls to restore the original canvas state. One thing to watch out for is that rotation always occurs around the current origin; thus a <code>translate() rotate() translate()</code> sequence will yield different results than a <code>translate() translate() rotate()</code> series of calls.</p> -<h2 id="Compatibility_With_Apple_.3Ccanvas.3E" name="Compatibility_With_Apple_.3Ccanvas.3E">Compatibility With Apple <canvas></h2> -<p>For the most part, <code><canvas></code> is compatible with Apple's and other implementations. There are, however, a few issues to be aware of, described here.</p> -<h3 id="Required_.3C.2Fcanvas.3E_tag" name="Required_.3C.2Fcanvas.3E_tag">Required <code></canvas></code> tag</h3> -<p>In the Apple Safari implementation, <code><canvas></code> is an element implemented in much the same way <code><img></code> is; it does not have an end tag. However, for <code><canvas></code> to have widespread use on the web, some facility for fallback content must be provided. Therefore, Mozilla's implementation has a <em>required</em> end tag.</p> -<p>If fallback content is not needed, a simple <code><canvas id="foo" ...></canvas></code> will be fully compatible with both Safari and Mozilla -- Safari will simply ignore the end tag.</p> -<p>If fallback content is desired, some CSS tricks must be employed to mask the fallback content from Safari (which should render just the canvas), and also to mask the CSS tricks themselves from IE (which should render the fallback content).</p> -<pre>canvas { - font-size: 0.00001px !ie; -}</pre> -<h2 id="Additional_Features" name="Additional_Features">Additional Features</h2> -<h3 id="Rendering_Web_Content_Into_A_Canvas" name="Rendering_Web_Content_Into_A_Canvas">Rendering Web Content Into A Canvas</h3> -<div class="note"> - This feature is only available for code running with Chrome privileges. It is not allowed in normal HTML pages. <a href="http://mxr.mozilla.org/mozilla/source/content/canvas/src/nsCanvasRenderingContext2D.cpp#2352" title="http://mxr.mozilla.org/mozilla/source/content/canvas/src/nsCanvasRenderingContext2D.cpp#2352">Read why</a>.</div> -<p>Mozilla's <code>canvas</code> is extended with the <a href="/en-US/docs/DOM/CanvasRenderingContext2D#drawWindow()" title="DOM/CanvasRenderingContext2D#drawWindow()"><code>drawWindow()</code></a> method. This method draws a snapshot of the contents of a DOM <code>window</code> into the canvas. For example,</p> -<pre class="brush: js">ctx.drawWindow(window, 0, 0, 100, 200, "rgb(255,255,255)"); -</pre> -<p>would draw the contents of the current window, in the rectangle (0,0,100,200) in pixels relative to the top-left of the viewport, on a white background, into the canvas. By specifying "rgba(255,255,255,0)" as the color, the contents would be drawn with a transparent background (which would be slower).</p> -<p>It is usually a bad idea to use any background other than pure white "rgb(255,255,255)" or transparent, as this is what all browsers do, and many websites expect that transparent parts of their interface will be drawn on white background.</p> -<p>With this method, it is possible to fill a hidden IFRAME with arbitrary content (e.g., CSS-styled HTML text, or SVG) and draw it into a canvas. It will be scaled, rotated and so on according to the current transformation.</p> -<p>Ted Mielczarek's <a href="http://ted.mielczarek.org/code/mozilla/tabpreview/">tab preview</a> extension uses this technique in chrome to provide thumbnails of web pages, and the source is available for reference.</p> -<div class="note"> - <strong>Note:</strong> Using <code>canvas.drawWindow()</code> while handling a document's <code>onload</code> event doesn't work. In Firefox 3.5 or later, you can do this in a handler for the <a href="/en-US/docs/Gecko-Specific_DOM_Events#MozAfterPaint" title="Gecko-Specific DOM Events#MozAfterPaint"><code>MozAfterPaint</code></a> event to successfully draw HTML content into a canvas on page load.</div> -<h2 id="See_also" name="See_also">See also</h2> -<ul> - <li><a href="/en-US/docs/HTML/Canvas" title="HTML/Canvas">Canvas topic page</a></li> - <li><a href="/en-US/docs/Canvas_tutorial" title="Canvas_tutorial">Canvas tutorial</a></li> - <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#the-canvas">WHATWG specification</a></li> - <li><a href="http://developer.apple.com/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Tasks/Canvas.html" title="http://developer.apple.com/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Tasks/Canvas.html">Apple Canvas Documentation</a></li> - <li><a href="http://weblogs.mozillazine.org/roc/archives/2005/05/rendering_web_p.html">Rendering Web Page Thumbnails</a></li> - <li>Some <a href="/en-US/docs/tag/canvas_examples">examples</a>: - <ul> - <li><a href="http://azarask.in/projects/algorithm-ink">Algorithm Ink</a></li> - <li><a href="http://www.tapper-ware.net/canvas3d/">OBJ format 3D Renderer</a></li> - <li><a href="/en-US/docs/A_Basic_RayCaster" title="A_Basic_RayCaster">A Basic RayCaster</a></li> - <li><a href="http://awordlike.textdriven.com/">The Lightweight Visual Thesaurus</a></li> - <li><a href="http://caimansys.com/painter/">Canvas Painter</a></li> - </ul> - </li> - <li><a href="/en-US/docs/tag/canvas">And more...</a></li> -</ul> diff --git a/files/it/conflicting/web/api/document_object_model/index.html b/files/it/conflicting/web/api/document_object_model/index.html deleted file mode 100644 index 0d0bb097aa..0000000000 --- a/files/it/conflicting/web/api/document_object_model/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Circa il Document Object Model -slug: conflicting/Web/API/Document_Object_Model -tags: - - DOM - - Tutte_le_categorie -translation_of: Web/API/Document_Object_Model -translation_of_original: Web/Guide/API/DOM -original_slug: Circa_il_Document_Object_Model ---- -<h3 id="Cos.27.C3.A8_il_DOM.3F" name="Cos.27.C3.A8_il_DOM.3F">Cos'è il DOM?</h3> -<p>Il Modello a Oggetti del Documento è una API per i documenti <a href="it/HTML">HTML</a> e <a href="it/XML">XML</a>. Esso fornisce una rappresentazione strutturale del documento, dando la possibilità di modificarne il contenuto e la presentazione visiva. In poche parole, connette le pagine web agli script o ai linguaggi di programmazione.</p> -<p>Tutte le proprietà, i metodi e gli eventi disponibili per il programmatore per creare e manipolare le pagine web sono organizzate in <a href="it/Gecko_DOM_Reference">oggetti</a> (ad esempio, l'oggetto document rappresenta il documento stesso, l'oggetto table rappresenta l'elemento tabella e così via). Questi oggetti sono accessibili tramite linguaggi di scripting.</p> -<p>Il linguaggio più usato in congiunzione con il DOM è <a href="it/JavaScript">JavaScript</a>. Precisamente, il codice viene scritto in JavaScript, ma usa la rappresentazione creata con il DOM per accedere alla pagina web e ai suoi elementi. Ad ogni modo, il DOM é stato pensato e implementato come indipendente da qualsiasi linguaggio di programmazione, al fine di rendere la rappresentazione strutturale del documento disponibile a chiunque, attraverso una singola conforme API. Sebbene in questo sito poniamo l'attenzione su JavaScript, le implementazioni del DOM possono essere fatte da <a class="external" href="http://www.w3.org/DOM/Bindings">qualunque linguaggio</a>.</p> -<p>Il <a class="external" href="http://www.w3.org/">Consorzio per il World Wide Web</a> stabilisce uno <a class="external" href="http://www.w3.org/DOM/">standard per il DOM</a>, chiamato W3C DOM. Questo dovrebbe, ora che i più importanti browser lo implementano, permettere la creazione di potenti applicazioni cross-browser.</p> -<h3 id="Perch.C3.A8_.C3.A8_importante_il_supporto_al_DOM_in_Mozilla.3F" name="Perch.C3.A8_.C3.A8_importante_il_supporto_al_DOM_in_Mozilla.3F">Perchè è importante il supporto al DOM in Mozilla?</h3> -<p>"HTML Dinamico" (<a href="it/DHTML">DHTML</a>) è un termine usato da alcuni fornitori per descrivere la combinazione di <a href="it/HTML">HTML</a>, fogli di stile e script che insieme permettono di animare i documenti. Il W3C DOM Working Group è al lavoro per assicurare che le soluzioni interoperabili e indipendenti dal linguaggio siano concordate da tutti (vedi anche la <a class="external" href="http://www.w3.org/DOM/faq.html">FAQ del W3C</a>. Dal momento che Mozilla si propone come piattaforma per il web, il supporto per il DOM diventa una delle caratteristiche più richieste, ed è necessaria a Mozilla se vuole essere una possibile alternativa agli altri browser.</p> -<p>Ancora più importante è il fatto che l'interfaccia utente di Mozilla (e quindi anche di Firefox e Thunderbird) è stata creata usando <a href="it/XUL">XUL</a> - un linguaggio per l'interfaccia utente basato sulle regole di <a href="it/XML">XML</a> . Perciò Mozilla usa il DOM per <a href="it/Modifiche_dinamiche_all'interfaccia_utente_basata_su_XUL">manipolare la sua stessa UI</a>.</p> -<p> </p> diff --git a/files/it/conflicting/web/api/node/firstchild/index.html b/files/it/conflicting/web/api/node/firstchild/index.html deleted file mode 100644 index a7adb1a1ca..0000000000 --- a/files/it/conflicting/web/api/node/firstchild/index.html +++ /dev/null @@ -1,42 +0,0 @@ ---- -title: document.firstChild -slug: conflicting/Web/API/Node/firstChild -translation_of: Web/API/Node/firstChild -translation_of_original: Web/API/document.firstChild -original_slug: Web/API/Document/firstChild ---- -<div>{{APIRef("DOM")}}</div> - -<p><code>document.firstChild</code> restituisce il primo nodo figlio del documento.</p> - -<h3 id="Sintassi" name="Sintassi">Sintassi</h3> - -<pre class="eval"><i>child = document.firstChild</i> -</pre> - -<h3 id="Parametri" name="Parametri">Parametri</h3> - -<ul> - <li><code>figlio</code> è un nodo di tipo <a href="it/DOM/element">element</a>.</li> -</ul> - -<h3 id="Esempio" name="Esempio">Esempio</h3> - -<pre>function primoFiglio() { - f = document.firstChild; - alert(f.tagName); -} -// restituisce [object DocumentType] se il documento ha una DTD -// altrimenti restituisce "HTML" - -// Per un documento HTML che ha una DTD -// document.firstChild -// restituisce [object DocumentType] - -</pre> - -<h3 id="Specifiche" name="Specifiche">Specifiche</h3> - -<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-169727388">DOM Level 2 Core: firstChild</a></p> - -<p>{{ languages( { "pl": "pl/DOM/document.firstChild" } ) }}</p> diff --git a/files/it/conflicting/web/api/windoworworkerglobalscope/index.html b/files/it/conflicting/web/api/windoworworkerglobalscope/index.html deleted file mode 100644 index 8eaaaa82d9..0000000000 --- a/files/it/conflicting/web/api/windoworworkerglobalscope/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: WindowTimers -slug: conflicting/Web/API/WindowOrWorkerGlobalScope -tags: - - API - - HTML-DOM - - Interface - - NeedsTranslation - - Reference - - TopicStub - - Workers -translation_of: Web/API/WindowOrWorkerGlobalScope -translation_of_original: Web/API/WindowTimers -original_slug: Web/API/WindowTimers ---- -<div>{{APIRef("HTML DOM")}}</div> - -<p><code><strong>WindowTimers</strong></code> contains utility methods to set and clear timers.</p> - -<p>There is no object of this type, though the context object, either the {{domxref("Window")}} for regular browsing scope, or the {{domxref("WorkerGlobalScope")}} for workers, implements it.</p> - -<h2 id="Properties">Properties</h2> - -<p><em>This interface does not define any property, nor inherit any.</em></p> - -<h2 id="Methods">Methods</h2> - -<p><em>This interface does not inherit any method.</em></p> - -<dl> - <dt>{{domxref("WindowTimers.clearInterval()")}}</dt> - <dd>Cancels the repeated execution set using {{domxref("WindowTimers.setInterval()")}}.</dd> - <dt>{{domxref("WindowTimers.clearTimeout()")}}</dt> - <dd>Cancels the delayed execution set using {{domxref("WindowTimers.setTimeout()")}}.</dd> - <dt>{{domxref("WindowTimers.setInterval()")}}</dt> - <dd>Schedules the execution of a function each X milliseconds.</dd> - <dt>{{domxref("WindowTimers.setTimeout()")}}</dt> - <dd>Sets a delay for executing a function.</dd> -</dl> - -<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('HTML WHATWG', '#windowtimers', 'WindowTimers')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>No change since the latest snapshot, {{SpecName("HTML5.1")}}.</td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', '#windowtimers', 'WindowTimers')}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td>Snapshot of {{SpecName("HTML WHATWG")}}. No change.</td> - </tr> - <tr> - <td>{{SpecName("HTML5 W3C", "#windowtimers", "WindowTimers")}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>WindowBase64</code> (properties where on the target before it).</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>Firefox (Gecko)</th> - <th>Chrome</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatGeckoDesktop(1)}}</td> - <td>1.0</td> - <td>4.0</td> - <td>4.0</td> - <td>1.0</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(1)}}</td> - <td rowspan="1">{{CompatVersionUnknown}}</td> - <td rowspan="1">{{CompatVersionUnknown}}</td> - <td rowspan="1">{{CompatVersionUnknown}}</td> - <td rowspan="1">{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<p> </p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{domxref("Window")}}, {{domxref("WorkerGlobalScope")}}, {{domxref("DedicatedWorkerGlobalScope")}}, {{domxref("SharedWorkerGlobalScope")}}, and {{domxref("ServiceWorkerGlobalScope")}}</li> -</ul> diff --git a/files/it/conflicting/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html b/files/it/conflicting/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html deleted file mode 100644 index 5d02181b92..0000000000 --- a/files/it/conflicting/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: Dare una mano al puntatore -slug: >- - conflicting/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property -tags: - - CSS - - Tutte_le_categorie -translation_of: Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property -translation_of_original: Giving_'cursor'_a_Hand -original_slug: Dare_una_mano_al_puntatore ---- -<p>Un buon numero di sviluppatori ha chiesto quando Mozilla e Netscape 6+ abbiano pianificato di implementare il supporto per la proprietà <code>cursor</code>. Spesso si stupiscono di scoprire che entrambi i browser già la supportano. Comunque, ciò che non dovrebbe sorprendere è che il supporto è basato sulle specifiche approvate dal W3C per i CSS2.</p> -<p>Il problema di base è questo: Internet Explorer 5.x per Windows riconosce il valore <code>hand</code>, che non appare mai nella <a class="external" href="http://www.w3.org/TR/REC-CSS2/ui.html#propdef-cursor">sezione 18.1 dei CSS2</a>– ne' in altra specifica. Il valore che più si avvicina al comportamento di <code>hand</code> è <code>pointer</code>, che le specifiche definiscono così: "Il cursore è un puntatore che indica un collegamento". Si noti che non viene mai detto niente riguardo l'apparizione di una manina, anche se è ormai pratica convenzionale dei browser.</p> -<p>Sfortunatamente, IE5.x/Win non riconosce il valore <code>pointer</code>. Entrambi IE6/Win and IE5.x/Mac riconoscono <code>pointer</code> e <code>hand</code>, fortunatamente. D'altra parte, Mozilla e Netscape 6+ seguono la specifica CSS2 e gestiscono <code>pointer</code>, ignorando il valore proprietario <code>hand</code>.</p> -<p>Se Mozilla/Netscape ignorano <code>hand</code> e IE5.x/Win ignora <code>pointer</code>, come deve comportarsi uno sviluppatore? E' necessario specificare entrambi.</p> -<pre>a { cursor: pointer; cursor: hand; }</pre> -<p>Si faccia attenzione a <b>non</b> invertire i due valori! Scrivendo i fogli di stile come mostrato sopra, NS6+ mostrerà il primo valore e ignorerà il secondo, così si ottiene il valore <code>pointer</code>. IE5.x/Win riconosce entrambi ed userà il secondo, cioè <code>hand</code>. Invertendo i due valori, Netscape 6+ continuerà a lavorare interpretare correttamente lo stile, mentre IE5.x/Win tenterà di usare il secondo, senza ottenere il risultato voluto.</p> -<p>Con questo semplice metodo, è possibile assicurarsi la presenza della "manina" in ogni caso.</p> -<p><b>Una avvertenza:</b> seguendo l'approccio raccomandato, il foglio di stile non passerà una eventuale validazione, dato che contiene un valore non permesso per la proprietà <code>cursor</code>. Gli sviluppatori sono quindi avvisati di prendere in considerazione questo inconveniente rispetto al vantaggio che porta la soluzione, quindi decidere cosa è più importante e procedere di conseguenza.</p> -<h2 id="Testare_il_supporto" name="Testare_il_supporto">Testare il supporto</h2> -<p>Vi chiedete come si comporti il vostro browser con <code>hand</code> e <code>pointer</code>? Provate direttamente a spostare il puntatore sulla tabella di test sotto riportata!</p> -<table class="standard-table"> - <tbody> - <tr> - <td style="cursor: pointer;">Questa cella ha lo stile <code>cursor: pointer</code>. Si dovrebbe ottenere un puntatore che cambia in una manina, su Mozilla e Netscape 6+, IE6/Win, and IE5.x/Mac, ma non in IE5.x/Win.</td> - <td>Questa cella non ha uno stile <code>cursor</code> per cui il puntatore rimarrà quello standard.</td> - <td style="cursor: hand;">Questa cella ha uno stile <code>cursor: hand</code>. Si dovrebbe ottenere un puntatore che cambia in una manina, su IE5+/Win, ma non in Mozilla e Netscape 6+.</td> - </tr> - </tbody> -</table> -<h2 id="Collegamenti" name="Collegamenti">Collegamenti</h2> -<ul> - <li><a class="external" href="http://www.w3.org/TR/REC-CSS2/ui.html#propdef-cursor">CSS2, sezione 18.1</a></li> -</ul> -<div class="originaldocinfo"> - <h2 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h2> - <ul> - <li>Author(s): Eric A. Meyer, Netscape Communications</li> - <li>Last Updated Date: Published 04 Mar 2002; Revised 30 Jan 2003</li> - <li>Copyright Information: Copyright © 2001-2003 Netscape. All rights reserved.</li> - <li>Note: This reprinted article was originally part of the DevEdge site.</li> - </ul> -</div> diff --git a/files/it/conflicting/web/guide/index.html b/files/it/conflicting/web/guide/index.html deleted file mode 100644 index b1d16cf207..0000000000 --- a/files/it/conflicting/web/guide/index.html +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: Sviluppo Web -slug: conflicting/Web/Guide -tags: - - Sviluppo_Web - - Tutte_le_categorie -translation_of: Web/Guide -translation_of_original: Web_Development -original_slug: Sviluppo_Web ---- -<p> -</p> -<div>Lo <b>sviluppo Web</b> comprende tutti gli aspetti di sviluppo di un sito web o di una applicazione web.</div> -<table class="topicpage-table"> -<tbody><tr><td> -<h4 id="Documentazione" name="Documentazione"> <a>Documentazione</a> </h4> -<dl><dt> <a href="it/Migrare_applicazioni_da_Internet_Explorer_a_Mozilla">Migrare applicazioni da Internet Explorer a Mozilla</a> -</dt><dd> <small>Doron Rosenberg vi dice come assicurarvi che le vostre applicazioni web sia con IE che con Mozilla.</small> -</dd></dl> -<dl><dt> <a href="it/Usare_valori_URL_per_la_propriet%c3%a0_cursor">Usare valori URL per la proprietà cursor</a> -</dt><dd> <small><a href="it/Gecko">Gecko</a> 1.8 (<a href="it/Firefox_1.5">Firefox 1.5</a>, SeaMonkey 1.0) supportano l'uso di valori URL per la <a class="external" href="http://www.w3.org/TR/CSS21/ui.html#cursor-props">proprietà cursor CSS2 </a>, che permette di specificare immagini arbitrarie da usare come puntatori del mouse.</small> -</dd></dl> -<dl><dt> <a href="it/Usare_il_caching_di_Firefox_1.5">Usare il caching di Firefox 1.5</a> -</dt><dd> <small><a href="it/Firefox_1.5">Firefox 1.5</a> memorizza intere pagine web, incluso il loro stato JavaScript, in memoria. La navigazione in avanti ed indietro tra le pagine visitate non richiede caricamento di pagina e lo stato del JavaScript è preservato. Questa carateristica permette una navigazione delle pagine molto veloce.</small> -</dd></dl> -<p><span class="alllinks"><a>Vedi tutti...</a></span> -</p> -</td> -<td> -<h4 id="Community" name="Community"> Community </h4> -<ul><li> Visita i forum Mozilla... -</li></ul> -<p>{{ DiscussionList("dev-web-development", "mozilla.dev.web-development") }} -</p> -<ul><li> <a class="external" href="http://www.whatwg.org/">WHAT Working Group</a> -</li><li> <a class="external" href="http://webdevfeedhouse.com/">WebDev FeedHouse</a> -</li></ul> -<h4 id="Strumenti" name="Strumenti"> Strumenti </h4> -<ul><li> <a class="external" href="http://www.getfirebug.com/">Firebug</a> -</li><li> <a class="link-https" href="https://addons.mozilla.org/extensions/moreinfo.php?id=60&application=firefox">Web Developer extension</a> -</li><li> <a href="it/Venkman">Venkman</a>, il debugger JavaScript -</li><li> <a href="it/DOM_Inspector">DOM Inspector</a> -</li></ul> -<p><span class="alllinks"><a>Vedi tutti...</a></span> -</p> -<h4 id="Argomenti_correlati" name="Argomenti_correlati"> Argomenti correlati </h4> -<dl><dd> <a href="it/AJAX">AJAX</a>, <a href="it/CSS">CSS</a>, <a href="it/HTML">HTML</a>, <a href="it/JavaScript">JavaScript</a>, <a href="it/Standard_Web">Standard Web</a>, <a href="it/XHTML">XHTML</a>, <a href="it/XML">XML</a> -</dd></dl> -</td></tr></tbody></table> -<p><span class="comment">Categories</span> -</p><p><span class="comment">Interwiki Language Links</span> -</p><p><br> -</p>{{ languages( { "en": "en/Web_Development", "de": "de/Webentwicklung", "es": "es/Desarrollo_Web", "fr": "fr/D\u00e9veloppement_Web", "ja": "ja/Web_Development", "pl": "pl/Programowanie_WWW" } ) }} diff --git a/files/it/conflicting/web/javascript/reference/global_objects/object/index.html b/files/it/conflicting/web/javascript/reference/global_objects/object/index.html deleted file mode 100644 index 26386b07ac..0000000000 --- a/files/it/conflicting/web/javascript/reference/global_objects/object/index.html +++ /dev/null @@ -1,216 +0,0 @@ ---- -title: Object.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/Object -translation_of: Web/JavaScript/Reference/Global_Objects/Object -translation_of_original: Web/JavaScript/Reference/Global_Objects/Object/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/Object/prototype ---- -<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/conflicting/web/javascript/reference/global_objects/string/index.html b/files/it/conflicting/web/javascript/reference/global_objects/string/index.html deleted file mode 100644 index 5ba9408faa..0000000000 --- a/files/it/conflicting/web/javascript/reference/global_objects/string/index.html +++ /dev/null @@ -1,180 +0,0 @@ ---- -title: String.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/String -translation_of: Web/JavaScript/Reference/Global_Objects/String -translation_of_original: Web/JavaScript/Reference/Global_Objects/String/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/String/prototype ---- -<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/conflicting/web/javascript/reference/operators/index.html b/files/it/conflicting/web/javascript/reference/operators/index.html deleted file mode 100644 index abaafab2fd..0000000000 --- a/files/it/conflicting/web/javascript/reference/operators/index.html +++ /dev/null @@ -1,293 +0,0 @@ ---- -title: Operatori Aritmetici -slug: conflicting/Web/JavaScript/Reference/Operators -tags: - - JavaScript - - Operatori - - Operatori Aritmetici -translation_of: Web/JavaScript/Reference/Operators -translation_of_original: Web/JavaScript/Reference/Operators/Arithmetic_Operators -original_slug: Web/JavaScript/Reference/Operators/Operatori_Aritmetici ---- -<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> |