From 30feb96f6084a2fb976a24ac01c1f4a054611b62 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:47:54 +0100 Subject: unslug it: move --- .../learn/css/building_blocks/selectors/index.html | 151 ++++++++ .../learn/css/first_steps/how_css_works/index.html | 118 +++++++ .../index.html | 107 ++++++ files/it/conflicting/learn/css/index.html | 24 ++ .../learn/getting_started_with_the_web/index.html | 277 +++++++++++++++ .../javascript_basics/index.html | 331 +++++++++++++++++ .../learn/javascript/objects/index.html | 391 +++++++++++++++++++++ .../learn/server-side/django/index.html | 106 ++++++ 8 files changed, 1505 insertions(+) create mode 100644 files/it/conflicting/learn/css/building_blocks/selectors/index.html create mode 100644 files/it/conflicting/learn/css/first_steps/how_css_works/index.html create mode 100644 files/it/conflicting/learn/css/first_steps/how_css_works_113cfc53c4b8d07b4694368d9b18bd49/index.html create mode 100644 files/it/conflicting/learn/css/index.html create mode 100644 files/it/conflicting/learn/getting_started_with_the_web/index.html create mode 100644 files/it/conflicting/learn/getting_started_with_the_web/javascript_basics/index.html create mode 100644 files/it/conflicting/learn/javascript/objects/index.html create mode 100644 files/it/conflicting/learn/server-side/django/index.html (limited to 'files/it/conflicting/learn') diff --git a/files/it/conflicting/learn/css/building_blocks/selectors/index.html b/files/it/conflicting/learn/css/building_blocks/selectors/index.html new file mode 100644 index 0000000000..aece606365 --- /dev/null +++ b/files/it/conflicting/learn/css/building_blocks/selectors/index.html @@ -0,0 +1,151 @@ +--- +title: I Selettori +slug: Conoscere_i_CSS/I_Selettori +tags: + - Conoscere_i_CSS +translation_of: Learn/CSS/Building_blocks/Selectors +translation_of_original: Web/Guide/CSS/Getting_started/Selectors +--- +

+

Questa pagina spiega come applicare gli stili in modo selettivo, e come i diversi tipi di selettori abbiano un diverso grado di prevalenza. +

Verrà aggiunto qualche attributo ai tag nel documento di esempio, e questi attributi saranno utilizzati nel foglio di stile di esempio +

+

Informazioni: I Selettori

+

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

+
strong {color: red;}
+
+

Nella terminologia dei CSS l'intera stringa è una regola (rule). La regola inizia con strong, che è un selettore (selector). La sua funzione è quella di selezionare a quali elementi del DOM verrà applicato la regola. +

+ + +
Di più... +
La parte contenuta all'interno delle parentesi graffe è la dichiarazione (declaration). +

La parola chiave color è una proprietà (property), e red è un valore(value). +

Il punto e virgola dopo la coppia proprietà-valore separa quella coppia da altre all'interno della stessa dichiarazione. +

Questa guida si riferirà ai selettori del tipo di strong come a dei selettori tag. +Le specifiche dei CSS vi si riferiscono invece come a dei selettori di tipo. +

+
+


+Questa pagina della guida spiega in modo più approfondito i selettori che possono essere utilizzati nelle regole dei CSS. +

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

Esistono due attributi che hanno uno status speciale nei CSS: class e id. +

L'attributo class di un tag serve ad assegnare quel tag a quella data classe. La scelta del nome della classe è a piacere dell'autore della classe. +

Nel foglio di stile occorre digitare un punto "." prima del nome della classe quando viene usata come un selettore. +

L'attributo id 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. +

Nel foglio di stile il selettore id si indica anteponendo il simbolo "cancelletto" (#). +

+ + +
Esempi +
Questo tag HTML ha sia un attributo class che uno id: +
+<P class="key" id="principal">
+
+

L'id "principal" 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 class. +

In un foglio di stile questa regola rende tutti gli elementi della classe key verdi. +(Potrebbero anche non essere tutti elementi di tipo P.) +

+
+.key {color: green;}
+
+

Questa regola rende l'unico elemento con l'id principal in grassetto: +

+
+#principal {font-weight: bolder;}
+
+
+


+Se più di una regola si applica allo stesso elemento specificando la stessa proprietà, avrà prevalenza quella con il selettore più specifico. Un selettore id è più specifico di un selettore class, che però è più specifico di un selettore di tipo "tag". +

+ + +
Di più... +
I selettori possono anche essere combinati così da essere resi più specifici. +

Per esempio, il selettore .key seleziona tutti gli elementi che hanno l'attributo class con il valore key. Il selettore p.key seleziona solo gli elementi P che abbiano il valore key all'attributo class. +

Non si è limitati ai due attributi speciali, class e id. E' possibile specificare altri attributi utilizzando le parentesi quadre. Ad esempio, il selettore {{ mediawiki.external('type=button') }} seleziona tutti gli elementi che hanno l'attributo type con il valore button assegnato. +

Più avanti in questa guida, la pagina sulle (Tabelle) contiene informazioni sui selettori complessi basati sulle relazioni. +

Per informazioni complete sui selettori, consulta "Selettori" nelle specifiche CSS. +

+
+


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

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à. +

+

Azione: Utilizzare i selettori "class" e "id"

+

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

+
+
<!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 id="first">
+      <STRONG class="carrot">C</STRONG>ascading
+      <STRONG class="spinach">S</STRONG>tyle
+      <STRONG class="spinach">S</STRONG>heets
+    </P>
+    <P id="second">
+      <STRONG>C</STRONG>ascading
+      <STRONG>S</STRONG>tyle
+      <STRONG>S</STRONG>heets
+    </P>
+  </BODY>
+</HTML>
+
+
+

Ora apri il file CSS. Sostituisci l'intero contenuto con: +

+
strong {color: red;}
+.carrot {color: orange;}
+.spinach {color: green;}
+#first {font-style: italic;}
+
+

Aggiorna il browser per vedere il risultato: +

+ + + + +
Cascading Style Sheets +
Cascading Style Sheets +
+


+Prova a cambiare l'ordine delle regole nel tuo file CSS: osserva come l'ordine non ha nessun effetto in questo caso. +

I selettori di classe .carrot e .spinach hanno sempre la priorità su il selettore di tag strong. +

Il selettore di id #first ha sempre la priorità sui selettori di classe e di tag. +

+ + +
Esercizi +
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: + + + + +
Cascading Style Sheets +
Cascading Style Sheets +
+

Ora modifica la regola appena aggiunta (senza cambiare nient'altro) per rendere anche il testo del primo paragrafo di colore blu: +

+ + + + +
Cascading Style Sheets +
Cascading Style Sheets +
+
+


+

+

Cos'altro?

+

Se hai avuto difficoltà a comprendere questa pagina, o sei hai dei commenti a proposito, utilizza questa pagina di Discussione. +

Il foglio di stile inizia ad avere un aspetto complicato. La prossima pagina descrive i modi per rendere i CSS più semplici da leggere: +CSS leggibili +

{{ 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 new file mode 100644 index 0000000000..c5565b371f --- /dev/null +++ b/files/it/conflicting/learn/css/first_steps/how_css_works/index.html @@ -0,0 +1,118 @@ +--- +title: Come funzionano i CSS +slug: Conoscere_i_CSS/Come_funzionano_i_CSS +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 +--- +

+

Questa pagina spiega il funzionamento dei CSS nel browser. +Analizzeremo il documento di esempio, rivelando i dettagli del suo stile. +

+

Informazioni: Come funzionano i CSS

+

Quando Mozilla visualizza un documento, deve combinare il suo contenuto con le informazioni sullo stile. Quindi elabora il documento in due fasi: +

+ + +

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

Un DOM ha una struttura ad albero. Ogni tag e ogni blocco di testo nel linguaggio di marcatura diviene un nodo della struttura ad albero. I nodi del DOM non sono contenitori. Possono invece essere genitori (parent) dei nodi figli (child). +

I nodi corrispondenti ai tag sono consociuti anche come elementi. +

+ + +
Esempio +
Nel documento di esempio il tag <p> e il suo tag di chiusura </p> creano un contenitore: +
+
<p>
+  <strong>C</strong>ascading
+  <strong>S</strong>tyle
+  <strong>S</strong>heets
+</p>
+
+
+

Nel DOM, il nodo corrispondente P è un genitore. +I suoi figli sono i nodi STRONG e i nodi di testo. +I nodi STRONG sono a loro volta genitori dei nodi di testo (che ne sono quindi figli): +

+
+

P +├─STRONG +│ │ +│ └─"C" +│ +├─"ascading" +│ +├─STRONG +│ │ +│ └─"S" +│ +├─"tyle" +│ +├─STRONG +│ │ +│ └─"S" +│ +└─"heets" +

+
+
+

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

+

Azione: Analizzare un DOM

+

Per analizzare il DOM occorre un software particolare. +In questa guida si utilizza il DOM Inspector di Mozilla (o DOMi) per analizzare il DOM. +

Apri il documento di esempio con il browser Mozilla. +

Dalla barra dei menu del browser, seleziona Strumenti – DOM Inspector, oppure Strumenti – Sviluppo Web – DOM Inspector. +

+ + +
Di più... +
Se il tuo browser Mozilla non possiede il DOMi, è sufficiente reinstallare il browser avendo cura di scegliere l'installazione dei componenti di sviluppo. +

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

+
+


+Nel DOMi, espandi i nodi del tuo documento cliccando sulle loro freccette. +

Nota:  Gli spazi nel file HTML potrebbero far sì che il DOM mostri alcuni nodi di testo vuoti, che possono essere ignorati. +

Il risultato dovrebbe essere simile a questo, a seconda di quali nodi siano stati espansi: +

+ + +
+

│ +▼╴P +│ │ +│ ▼╴STRONG +│ │ └#text +│ ├╴#text +│ ▶╴STRONG +│ │ +

+
+
+

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

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


+

+ + +
Esercizi +
Nel DOMi, fai clic su un nodo STRONG. +

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

+
+


+

+

Cos'altro?

+

Se hai avuto difficoltà a comprendere questa pagina, o sei hai dei commenti a proposito, utilizza questa pagina di Discussione. +

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

La prossima pagina spiega meglio queste interazioni: +Cascata ed ereditarietà +

{{ 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 new file mode 100644 index 0000000000..4048fe74e3 --- /dev/null +++ b/files/it/conflicting/learn/css/first_steps/how_css_works_113cfc53c4b8d07b4694368d9b18bd49/index.html @@ -0,0 +1,107 @@ +--- +title: Perché usare i CSS +slug: Conoscere_i_CSS/Perché_usare_i_CSS +tags: + - Conoscere_i_CSS +translation_of: Learn/CSS/First_steps/How_CSS_works +translation_of_original: Web/Guide/CSS/Getting_started/Why_use_CSS +--- +

 

+ +

Questa pagina spiega perché i documenti utilizzano i CSS. Utilizzerai i CSS per aggiungere un foglio di stile (stylesheet) al tuo documento di esempio.

+ +

Informazioni: Perché usare i CSS?

+ +

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 stile. Mantenere lo stile separato dal contenuto permette di:

+ + + + + + + + + + +
Esempi
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. +

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.

+
+ +

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

+ + + + + + + + +
Di più...
Un linguaggio di marcatura come HTML fornisce qualche sistema per specificare lo stile, ad esempio l'uso del tag <b> per segnare un testo in grassetto o la definizione del colore di sfondo della pagina all'interno del tag <body> (questo secondo esempio è fortemente deprecato). +

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.

+
+ +

Azione: Creare un foglio di stile

+ +

Crea un altro file di testo vuoto nella stessa directory utilizzata prima. Questo file sarà il foglio di stile. Nominalo come: style1.css

+ +

Nel file CSS, copia e incolla questa singola stringa, poi salva il file:

+ +
+
strong {color: red;}
+
+
+ +

Collegare il foglio di stile al proprio documento

+ +

Per collegare il foglio di stile al tuo documento occorre modificare il file HTML. Aggiungi la linea segnalata in grassetto:

+ +
+
<!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>C</STRONG>ascading
+      <STRONG>S</STRONG>tyle
+      <STRONG>S</STRONG>heets
+    </P>
+  </BODY>
+</HTML>
+
+
+ +

Salva il file e ricarica la finestra del browser. Il foglio di stile renderà ora le lettere iniziali in rosso, come segue:

+ + + + + + + +
Cascading Style Sheets
+ + + + + + + + +
Esercizi
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.
+ +

 

+ +

Cos'altro?

+ +

Se hai avuto difficoltà a comprendere questa pagina, o sei hai dei commenti a proposito, utilizza questa pagina di Discussione.

+ +

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: Come funzionano i CSS

+ +

{{ 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" } ) }}

diff --git a/files/it/conflicting/learn/css/index.html b/files/it/conflicting/learn/css/index.html new file mode 100644 index 0000000000..2bd34295c7 --- /dev/null +++ b/files/it/conflicting/learn/css/index.html @@ -0,0 +1,24 @@ +--- +title: CSS developer guide +slug: Web/Guide/CSS +tags: + - CSS + - Guide + - Landing + - NeedsTranslation + - TopicStub +translation_of: Learn/CSS +translation_of_original: Web/Guide/CSS +--- +

{{draft}}

+

Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML or other markup languages such as SVG. CSS describes how the structured elements in the document are to be rendered on screen, on paper, in speech, or on other media. The ability to adjust the document's presentation depending on the output medium is a key feature of CSS.

+

CSS is one of the core languages of the open Web and has a standardized W3C specification.

+

{{LandingPageListSubpages}}

+

Pages elsewhere

+

Here are other pages related to CSS that should be linked to from here.

+

See also

+ 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 new file mode 100644 index 0000000000..c52f7ca3e2 --- /dev/null +++ b/files/it/conflicting/learn/getting_started_with_the_web/index.html @@ -0,0 +1,277 @@ +--- +title: Scrivi una semplice pagina in HTML +slug: Learn/HTML/Scrivi_una_semplice_pagina_in_HTML +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 +--- +
+

In questo articolo impareremo come creare una semplice pagina web con il {{Glossary("HTML")}}.

+
+ + + + + + + + + + + + +
Prerequisiti:Hai bisogno di  un editore di testo e di sapere come aprire un file in un browser.
Obiettivo:Creare una pagina web che puoi visualizzare con il browser.
+ +

Sommario

+ +

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.

+ +

Apprendimento attivo

+ +

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.

+ +

Primo passo: Un file

+ +

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:

+ +
<!DOCTYPE html>
+<html>
+<head>
+  <title>Hi there</title>
+</head>
+<body>
+  This is a page
+  a simple page
+</body>
+</html>
+ +

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

+ +

Adesso dovresti avere un file sul tuo computer che assomiglia a questo esempio nella cartella (lla somiglianza dipende dal tuo sistema opertivo):

+ +

Screenshot of a file explorer with a html file for local test

+ +

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:

+ +

Screenshot of a file explorer with a html file for local test

+ +

Secondo passo: Un web browser

+ +

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:

+ +

Screenshot of a file explorer with a html file for local test

+ +

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.

+ +

Terzo passo: Sperimenta e impara

+ +

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.

+ +

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.

+ +

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.

+ +

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.

+ +

Se vuoi inserire qualcosa come un immagine hai bisogno di aggiungere un tag per l'immagine e la stessa immagine all'interno.Per esempio:

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

Modifica il file per includere il tag {{HTMLElement("img")}} come questo:

+ +
<img src="unicorn_pic.png" alt="Unicorn picture :)" />
+ +

Può essere inserito in qualsiasi parte {{HTMLElement("body")}} non dimenticare di salvare i cambiamenti apportati alla pagina!

+ +

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

+ +

Original file for the unicorn image

+ +
+

Nota: 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.

+
+ +

I documenti necessari perchè questa pagina funzioni adesso assomigliano a qualcosa di questo genere nel desktop:

+ +

Screenshot of the explorer with 2 files : a html file and a picture file

+ +

Il risultato mostrato nel browser è questo:

+ +

Screenshot for the example with a picture

+ +

Come hai notato il tag{{HTMLElement("img")}} ha {{Glossary("attribute","attributes")}} 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.

+ +

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.

+ +

Più in profondità

+ +

Questa non è una pagina web molto carina

+ +

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.

+ +

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

+ +

Sperimentiamo un poco con il CSS trasformando il testo contenuto nel tag body da nero a blue:

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

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.

+ +

Vuoi il testo sottolineato? prova ad aggiungere la regola "text-decoration: underline;" allo style:

+ +
body {
+  color: blue;
+  text-decoration: underline;
+}
+ +

Vuoi che il tuo testo abbia una misura ben precisa?Prova aggiungendo "font-size: 42px;" come in esempio:

+ +
body {
+  color: blue;
+  text-decoration: underline;
+  font-size: 42px;
+}
+ +

Il risultato finale sarà questo:

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

e se salvi la pagina nel tuo editore e poi riaggiorni il browser la pagina che vedrai sarà la seguente:

+ +

Screenshot of the browser with the page with some CSS

+ +

Andiamo alla seconda pagina

+ +

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.

+ +

Collega due pagine locali

+ +

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.

+ +

Nel primo documento possiamo tenere la stessa struttura di prima, la cosa importante è aggiungere un nuovo tag {{HTMLElement("a")}}, così:

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

La seconda pagina avrà un link che ci fa tornare alla prima pagina:

+ +
<!DOCTYPE html>
+<html>
+<head>
+  <title>Page 2 :)</title>
+</head>
+<body>
+  This is a page 2.
+  <a href="page1.html" title="to page 1">Want to go back to page 1? Click here</a>
+</body>
+</html>
+ +
+

Nota:Assicurati che il nome del file {{HTMLElement("a")}} tag con attributo href sia lo stesso nome del documento creato nel tuo computer.

+
+ +

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.

+ +

Il documento principale dovrebbe avere i due documenti nella stessa cartella, in questa maniera:

+ +

Screenshot of the file explorer with two HTML documents in one directory/folder

+ +

La Page 1 sarà così visualizzata nel browser:

+ +

Screenshot of a file explorer with a html file for local test

+ +

e la Page 2 sarà così visualizzata nel browser dopo aver fatto click sul link di Page 1:

+ +

Screenshot of the 2nd page of the 2 pages example in the browser

+ +
+

Nota:Il link che torna alla page 1 è violetto perchè il browser "sa"  che in precedenza avevamo visitato la Page 1

+
+ +

Se vuoi puoi fare la prova creando più pagine o passare alla prossima sezione per portare tutto questo al lvello successivo.

+ +

Collegamento ad un altra pagina web

+ +

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:

+ +
<!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">Want to go know more about unicorns? Wikipedia is right here</a>
+</body>
+</html>
+ +

Potrebbe più o meno assomigliare a questo nel browser:

+ +

Screenshot of the example page with a link to Wikipedia in the browser

+ +

Passando il puntatore del mouse sopra il link vedrai l'attributo{{htmlattrxref("title")}} mostrato in un tooltip.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.

+ +
+

Ricorda: 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.

+
+ +

Prossimi passi

+ + 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 new file mode 100644 index 0000000000..d9c0357ebb --- /dev/null +++ b/files/it/conflicting/learn/getting_started_with_the_web/javascript_basics/index.html @@ -0,0 +1,331 @@ +--- +title: Getting Started (JavaScript Tutorial) +slug: Web/JavaScript/Getting_Started +translation_of: Learn/Getting_started_with_the_web/JavaScript_basics +translation_of_original: Web/JavaScript/Getting_Started +--- +

Perché JavaScript?

+

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.

+

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.

+

Cosa dovresti già conoscere

+

Iniziare a programmare con JavaScript è molto semplice. Tutto quello che serve per cominciare è un editor di testo e un Web browser.

+

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!

+

Come iniziare

+

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!

+

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.

+

Browser compatibility issues

+

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.

+

How to try the examples

+

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.

+

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!

+

You can also take use of some online programs like jsfiddle.net

+

Example: Catching a mouse click

+

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.

+

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

+ +

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.

+

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:

+
  <span onclick="alert('Hello World!');">Click Here</span>
+

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:

+
<script>
+  function clickHandler() {
+     alert("Hello, World!");
+  }
+</script>
+<span onclick="clickHandler();">Click Here</span>
+

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:

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

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.

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

Example: Catching a keyboard event

+

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.

+

The list of available keyboard events emitted in response to a keyboard action is considerably smaller than those available for mouse:

+ +

In a keypress event, the Unicode value of the key pressed is stored in either the keyCode or charCode property, never both. If the key pressed generates a character (e.g., 'a'), charCode is set to the code of that character, respecting the letter case (i.e., charCode takes into account whether the shift key is held down). Otherwise, the code of the pressed key is stored in keyCode.

+

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:

+
  <input type="text" onkeypress="alert ('Hello World!');">
+
+

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:

+
<script>
+  function keypressHandler() {
+    alert ("Hello, World!");
+  }
+</script>
+
+<input onkeypress="keypressHandler();" />
+
+

Capturing the event and referencing the target (i.e., the actual key that was pressed) is achieved in a similar way to mouse events:

+
<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 Conditional operator or ternary is a good choice */
+      var keyCode = evt.which?evt.which:evt.keyCode;
+      var eCode = 'keyCode is ' + keyCode;
+      var eChar = 'charCode is ' + String.fromCharCode(keyCode); // or evt.charCode
+      alert ("Captured Event (type=" + eType + ", key Unicode value=" + eCode + ", ASCII value=" + eChar + ")");
+   }
+</script>
+<input onkeypress="keypressHandler(event);" />
+

Capturing any key event from the page can be done by registering the event at the document level and handling it in a function:

+
<script>
+  document.onkeypress = keypressHandler;
+  document.onkeydown = keypressHandler;
+  document.onkeyup = keypressHandler;
+</script>
+

Here is a complete example that shows key event handling:

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

Browser bugs and quirks

+

The two properties made available through the key events are keyCode and charCode. In simple terms, keyCode refers to the actual keyboard key that was pressed by the user, while charCode 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 keyCode, because the user presses the same key, but a different charCode because the resulting character is different.

+

The way in which browsers interpret the charCode is not a consistently-applied process. For example, Internet Explorer and Opera do not support charCode. However, they give the character information in keyCode, but only onkeypress. Onkeydown and onkeyup keyCode contain key information. Firefox uses a different word, "which", to distinguish the character.

+

Refer to the Mozilla Documentation on Keyboard Events for a further treatment of keyboard events.

+

{{ draft() }}

+

Example: Dragging images around

+

The following example allows moving the image of Firefox around the page:

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

Example: Resizing things

+
+ Example of resizing an image (the actual image is not resized, only the image's rendering.) + 
  <!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>
+
+

Example: Drawing Lines

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

 

diff --git a/files/it/conflicting/learn/javascript/objects/index.html b/files/it/conflicting/learn/javascript/objects/index.html new file mode 100644 index 0000000000..6281d7ef4b --- /dev/null +++ b/files/it/conflicting/learn/javascript/objects/index.html @@ -0,0 +1,391 @@ +--- +title: Introduzione a JavaScript Object-Oriented +slug: Web/JavaScript/Introduzione_al_carattere_Object-Oriented_di_JavaScript +tags: + - Classe + - Costruttore + - Eredità + - Incapsulamento + - Membri + - Oggetto + - Orientato agli oggetti +translation_of: Learn/JavaScript/Objects +translation_of_original: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript +--- +

{{jsSidebar("Introductory")}}

+ +

Orientato agli oggetti fino dal nucleo, JavaScript offre funzionalità {{Glossary("OOP")}} potenti e flessibili. Questo articolo inizia con una introduzione alla programmazione orientata agli oggetti, quindi presenta il modello di oggetti JavaScript e, infine, dimostra concetti della programmazione orientata agli oggetti in JavaScript.

+ +

Riesame su JavaScript

+ +

Se non ti senti sicuro su concetti JavaScript come variabili, tipi, funzioni e ambito di applicazione, puoi leggere su questi argomenti in A re-introduction to JavaScript. Puoi inoltre consultare la Core JavaScript 1.5 Guide.

+ +

Programmazione object-oriented

+ +

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

+ +

OOP ha una visione del software come un insieme di oggetti cooperanti, piuttosto che un insieme di funzioni o semplicemente un elenco di istruzioni per il computer (come è nella visione tradizionale). In OOP, ogni oggetto è in grado di ricevere messaggi, elaborare dati, e inviare messaggi ad altri oggetti. Ogni oggetto può essere visto come una piccola macchina indipendente con ruolo o responsabilità distinti.

+ +

OOP promuove una maggiore flessibilità e mantenibilità nella programmazione, ed è molto popolare in ingegneria del software su larga scala. Poiché OOP sottolinea con forza la modularità, il codice object-oriented è più semplice da sviluppare e più facile da capire in seguito. Il codice object-oriented promuove un'analisi, codifica, e comprensione di situazioni e procedure complesse più diretta che con metodi di programmazione a minor modularità.1

+ +

Terminologia

+ +
+
{{Glossary("Namespace")}}
+
Un contenitore che consente agli sviluppatori di includere tutte le funzionalità sotto un nome unico, specifico per l'applicazione.
+
{{Glossary("Class")}}
+
Definisce le caratteristiche dell'oggetto. Una classe è una definizione del modello, delle proprietà e dei metodi di un oggetto.
+
{{Glossary("Object")}}
+
Istanza di una classe.
+
{{Glossary("Property")}}
+
Una caratteristica di un oggetto, come un colore.
+
{{Glossary("Method")}}
+
Una capacità di un oggetto, come ad esempio cammina. È una procedura o funzione associata a una classe.
+
{{Glossary("Constructor")}}
+
Un metodo invocato nel momento in cui l'oggetto viene istanziato. Di solito ha lo stesso nome della classe che lo contiene.
+
{{Glossary("Inheritance")}}
+
Una classe può ereditare caratteristiche da un'altra classe.
+
{{Glossary("Encapsulation")}}
+
Una modalità di raggruppamento di dati e metodi che ne fanno uso.
+
{{Glossary("Abstraction")}}
+
L'insieme del complesso di eredità, metodi e proprietà di un oggetto deve rispecchiare adeguatamente un modello reale.
+
{{Glossary("Polymorphism")}}
+
Poly significa "molti" e morfismo significa "forme". Classi diverse potrebbero definire lo stesso metodo o proprietà.
+
+ + + +

Per una descrizione più ampia della programmazione orientata agli oggetti, vedi {{interwiki("wikipedia", "Object-oriented programming")}} su Wikipedia.

+ + + +

Programmazione  prototype-based

+ +

La programmazione prototype-based (basata sul prototipo) è un modello OOP che non utilizza le classi, ma piuttosto prima completa il comportamento di qualsiasi classe e poi riutilizza (equivalente all'ereditarietà nei linguaggi basati su classi) arricchendo (o sviluppando) oggetti prototipo esistenti. (Chiamata anche senza classi (classless), orientata al prototipo (prototype-oriented), o programmazione basata su istanza (instance-based).)

+ +

L'esempio originale (e più canonico) di un linguaggio basato sui prototipi è {{interwiki("wikipedia", "Self (programming language)", "Self")}} sviluppato da David Ungar e Randall Smith. Tuttavia lo stile di programmazione senza classi diventa sempre più popolare negli ultimi tempi, ed è stato adottato per i linguaggi di programmazione come JavaScript, Cecil, NewtonScript, Io, MOO, REBOL, Kevo, Squeak (quando si utilizza il framework Viewer per manipolare componenti Morphic), e molti altri.1

+ +

Programmazione  Object Oriented in JavaScript

+ +

Namespace

+ +

Un namespace è un contenitore che consente agli sviluppatori di includere tutte le funzionalità sotto un nome unico, specifico per l'applicazione. In JavaScript un namespace è solo un altro oggetto che contiene metodi, proprietà e oggetti.

+ +
+

Nota: È importante notare che in JavaScript non c'è alcuna differenza a livello di linguaggio tra oggetti regolari e namespace. Questo differenzia da molti altri linguaggi orientati agli oggetti e può essere fonte di confusione per i nuovi programmatori JavaScript.

+
+ +

L'idea alla base della creazione di un namespace in JavaScript è semplice: creare un oggetto globale, e tutte le variabili, i metodi e le funzioni diventano proprietà di tale oggetto. L'uso dei namespace riduce anche il rischio di conflitti tra nomi in un'applicazione, poiché gli oggetti di ciascuna applicazione sono proprietà di un oggetto globale definito dall'applicazione.

+ +

Creiamo un oggetto globale chiamato MYAPP:

+ +
// global namespace
+var MYAPP = MYAPP || {};
+ +

Nel codice di esempio di sopra prima viene testato se MYAPP è già definito (sia nello stesso o in un altro file). Se sì, allora viene utilizzato l'oggetto globale MYAPP già esistente, altrimenti viene creato un oggetto vuoto chiamato MYAPP che incapsula metodi, funzioni, variabili e oggetti.

+ +

Possaimo anche creare sotto-namespace (tieni presente che l'oggetto globale deve essere definito prima):

+ +
// sub namespace
+MYAPP.event = {};
+ +

La seguente è la sintassi del codice per la creazione di un namespace e l'aggiunta di variabili, funzioni, e un metodo:

+ +
// Create container called MYAPP.commonMethod for common method and properties
+MYAPP.commonMethod = {
+  regExForName: "", // define regex for name validation
+  regExForPhone: "", // define regex for phone no validation
+  validateName: function(name){
+    // Do something with name, you can access regExForName variable
+    // using "this.regExForName"
+  },
+
+  validatePhoneNo: function(phoneNo){
+    // do something with phone number
+  }
+}
+
+// Object together with the method declarations
+MYAPP.event = {
+    addListener: function(el, type, fn) {
+    // code stuff
+    },
+    removeListener: function(el, type, fn) {
+    // code stuff
+    },
+    getEvent: function(e) {
+    // code stuff
+    }
+
+    // Can add another method and properties
+}
+
+// Syntax for Using addListener method:
+MYAPP.event.addListener("yourel", "type", callback);
+ +

Oggetti incorporati (built-in) standard

+ +

JavaScript ha diversi oggetti inclusi nel suo nucleo, per esempio ci sono oggetti come Math, Object, Array e String. L'esempio seguente mostra come utilizzare l'oggetto Math per ottenere un numero casuale utilizzando il suo metodo random() .

+ +
console.log(Math.random());
+ +
Nota: Questo e tutti gli ulteriori esempi presuppongono che una funzione chiamata {{domxref("console.log()")}} sia definita a livello globale. La funzione console.log() in realtà non è parte di JavaScript in sé, ma molti browser la implementano per aiutare il debug.
+ +

Vedi JavaScript Reference: Standard built-in objects for una lista degli oggetti di nucleo in JavaScript.

+ +

Ogni oggetto in JavaScript è una instanza dell'oggetto Object e perciò ne eredita tutte le sue  proprietà e metodi.

+ +

Oggetti utente

+ +

La classe

+ +

JavaScript è un linguaggio basato sui prototipi e non contiene alcuna dichiarazione di classe, come invece si trova in C ++ o Java. Questo a volte è fonte di confusione per i programmatori abituati ai linguaggi con una dichiarazione class. JavaScript utilizza le funzioni come costruttori per le classi. Definire una classe è facile come definire una funzione. Nell'esempio sottostante si definisce una nuova classe chiamata Person con un costruttore vuoto.

+ +
var Person = function () {};
+ +

L'oggetto (istanza di classe)

+ +

Per creare una nuova istanza di un oggetto obj utilizziamo l'istruzione new obj assegnando il risultato (che è di tipo obj) ad una variabile, per poi accedervi successivamente.

+ +

Nell'esempio precedente abbiamo definito una classe chiamata  Person. In quello seguente creiamo due istanze (person1 e person2).

+ +
var person1 = new Person();
+var person2 = new Person();
+ +
Nota: Prego vedi {{jsxref("Object.create()")}} per un ulteriore nuovo metodo d'istanza che crea una istanza non inizializzata.
+ +

Il costruttore

+ +

Il costruttore viene chiamato quando si instanzia un oggetto (il momento in cui si crea l'istanza dell'oggetto). Il costruttore è un metodo della classe. In JavaScript la funzione funge da costruttore dell'oggetto, pertanto non è necessario definire esplicitamente un metodo costruttore. Ogni azione dichiarata nella classe viene eseguita al momento della creazione di un'istanza.

+ +

Il costruttore viene utilizzato per impostare le proprietà dell'oggetto o per chiamare i metodi che preparano l'oggetto per il suo uso. L'aggiunta di metodi di classe e le loro definizioni si effettua utilizzando una sintassi diversa descritta più avanti in questo articolo.

+ +

Nell'esempio seguente il costruttore della classe Person registra un messaggio quando viene istanziato un oggetto Person.

+ +
var Person = function () {
+  console.log('instance created');
+};
+
+var person1 = new Person();
+var person2 = new Person();
+ +

La proprietà (attributo di oggetto)

+ +

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.

+ +

La parola chiave this, che si riferisce all'oggetto corrente, consente di lavorare con le proprietà all'interno della classe. L'accesso (in lettura o scrittura) ad una proprietà al di fuori della classe è fatto con la sintassi: NomeIstanza.Proprietà, proprio come in C ++, Java, e molti altri linguaggi. (All'interno della classe la sintassi this.Proprietà è utilizzata per ottenere o impostare il valore della proprietà.)

+ +

Nell'esempio seguente, definiamo al momento della creazione  la proprietà firstName per la classe Person:

+ +
var Person = function (firstName) {
+  this.firstName = firstName;
+  console.log('Person instantiated');
+};
+
+var person1 = new Person('Alice');
+var person2 = new Person('Bob');
+
+// Show the firstName properties of the objects
+console.log('person1 is ' + person1.firstName); // logs "person1 is Alice"
+console.log('person2 is ' + person2.firstName); // logs "person2 is Bob"
+ +

I metodi

+ +

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à prototype della classe. In seguito sarà possibile chiamare il metodo sull'oggetto utilizzando lo stesso nome assegnato alla funzione.

+ +

Nell'esempio seguente definiamo e usiamo il metodo sayHello() per la classe Person.

+ +
var Person = function (firstName) {
+  this.firstName = firstName;
+};
+
+Person.prototype.sayHello = function() {
+  console.log("Hello, I'm " + this.firstName);
+};
+
+var person1 = new Person("Alice");
+var person2 = new Person("Bob");
+
+// call the Person sayHello method.
+person1.sayHello(); // logs "Hello, I'm Alice"
+person2.sayHello(); // logs "Hello, I'm Bob"
+ +

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:

+ +
var Person = function (firstName) {
+  this.firstName = firstName;
+};
+
+Person.prototype.sayHello = function() {
+  console.log("Hello, I'm " + this.firstName);
+};
+
+var person1 = new Person("Alice");
+var person2 = new Person("Bob");
+var helloFunction = person1.sayHello;
+
+// logs "Hello, I'm Alice"
+person1.sayHello();
+
+// logs "Hello, I'm Bob"
+person2.sayHello();
+
+// logs "Hello, I'm undefined" (or fails
+// with a TypeError in strict mode)
+helloFunction();
+
+// logs true
+console.log(helloFunction === person1.sayHello);
+
+// logs true
+console.log(helloFunction === Person.prototype.sayHello);
+
+// logs "Hello, I'm Alice"
+helloFunction.call(person1);
+ +

Come dimostra questo esempio tutti i riferimenti alla funzione sayHello — quello su  person1, su Person.prototype, nella variabile helloFunction, ecc.— si riferiscono tutti alla stessa funzione. Il valore di this nel corso di una chiamata alla funzione dipende da come noi lo chiamiamo. Più comunemente, quando chiamiamo this  in un'espressione dove abbiamo ottenuto la funzione da una proprietà di oggetto — person1.sayHello()— this è riferito all'oggetto da cui abbiamo ottenuto la funzione (person1), questa è la ragione per cui person1.sayHello() usa il  nome "Alice" e person2.sayHello() usa il nome "Bob".  Ma se lo chiamiamo in altri modi, this è impostato in modo diverso: chiamare this da una variabile— helloFunction()— imposta this come riferimento all'oggetto globale (window, sui browser). Dal momento che l'oggetto globale (probabilmente) non dispone di una proprietà firstName otteniamo "Hello, I'm undefined". (Questo accade in modalità blanda (loose mode); sarebbe stato diverso [un errore] in strict mode, ma per evitare confusione qui non entreremo nei dettagli). Oppure si può impostare  this esplicitamente utilizzando Function#call (o Function#apply), come illustrato alla fine dell'esempio.

+ +
Nota: Vedi approfondimenti su this in Function#call e Function#apply
+ +

Eredità

+ +

L'ereditarietà è un modo per creare una classe come una versione specializzata di una o più classi (JavaScript supporta solo l'ereditarietà singola). La classe specializzata viene comunemente chiamata figlio, e l'altra classe viene comunemente chiamato padre. In JavaScript si esegue questa operazione assegnando un'istanza della classe padre alla classe figlio, e poi specializzandola. Nel browser moderni è anche possibile utilizzare Object.create per implementare l'ereditarietà.

+ +
+

Nota: JavaScript non rileva  prototype.constructor della classe figlio (vedi Object.prototype), quindi devi farlo manualmente. Vedi la domanda "Why is it necessary to set the prototype constructor?" su Stackoverflow.

+
+ +

Nell'esempio seguente definiamo la classe  Student come classe figlio di Person. Quindi ridefiniamo il metodo sayHello() e aggiungiamo il metodo sayGoodBye() .

+ +
// Define the Person constructor
+var Person = function(firstName) {
+  this.firstName = firstName;
+};
+
+// Add a couple of methods to Person.prototype
+Person.prototype.walk = function(){
+  console.log("I am walking!");
+};
+
+Person.prototype.sayHello = function(){
+  console.log("Hello, I'm " + this.firstName);
+};
+
+// Define the Student constructor
+function Student(firstName, subject) {
+  // Call the parent constructor, making sure (using Function#call)
+  // that "this" is set correctly during the call
+  Person.call(this, firstName);
+
+  // Initialize our Student-specific properties
+  this.subject = subject;
+};
+
+// Create a Student.prototype object that inherits from Person.prototype.
+// Note: A common error here is to use "new Person()" to create the
+// Student.prototype. That's incorrect for several reasons, not least 
+// that we don't have anything to give Person for the "firstName" 
+// argument. The correct place to call Person is above, where we call 
+// it from Student.
+Student.prototype = Object.create(Person.prototype); // See note below
+
+// Set the "constructor" property to refer to Student
+Student.prototype.constructor = Student;
+
+// Replace the "sayHello" method
+Student.prototype.sayHello = function(){
+  console.log("Hello, I'm " + this.firstName + ". I'm studying "
+              + this.subject + ".");
+};
+
+// Add a "sayGoodBye" method
+Student.prototype.sayGoodBye = function(){
+  console.log("Goodbye!");
+};
+
+// Example usage:
+var student1 = new Student("Janet", "Applied Physics");
+student1.sayHello();   // "Hello, I'm Janet. I'm studying Applied Physics."
+student1.walk();       // "I am walking!"
+student1.sayGoodBye(); // "Goodbye!"
+
+// Check that instanceof works correctly
+console.log(student1 instanceof Person);  // true 
+console.log(student1 instanceof Student); // true
+ +

Per quanto riguarda la linea Student.prototype = Object.create(Person.prototype); : in vecchi interpreti JavaScript senza  Object.create, si può utilizzare un "polyfill" (anche detto "shim", vedi l'articolo collegato), oppure utilizzare una funzione che produce il medesimo risultato, come:

+ +
function createObject(proto) {
+    function ctor() { }
+    ctor.prototype = proto;
+    return new ctor();
+}
+
+// Usage:
+Student.prototype = createObject(Person.prototype);
+ +
Nota: Vedi Object.create per maggiori informazioni su ciò che fa uno shim per vecchi interpreti.
+ +

Essere sicuri che  this 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.

+ +
var Person = function(firstName) {
+  if (this instanceof Person) {
+    this.firstName = firstName;
+  } else {
+    return new Person(firstName);
+  }
+}
+ +

Incapsulamento

+ +

Nell'esempio precedente Student non ha bisogno di sapere come sia realizzato il metodo walk() della classe Person, ma può comunque utilizzarlo; la classe Student non ha bisogno di definire in modo esplicito questo metodo se non vogliamo cambiarlo. Questo è chiamato incapsulamento, per cui ogni classe impacchetta dati e metodi in una singola unità.

+ +

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

+ +

Astrazione

+ +

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.

+ +

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

+ +

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

+ +
var foo = function () {};
+
+// logs "foo is a Function: true"
+console.log('foo is a Function: ' + (foo instanceof Function));
+
+// logs "foo.prototype is an Object: true"
+console.log('foo.prototype is an Object: ' + (foo.prototype instanceof Object));
+ +

Polimorfismo

+ +

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à).

+ + + +

Note

+ +

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.

+ +

Allo stesso modo, le tecniche qui indicate non usano alcuna violazione di linguaggio, né imitano implementazioni di teorie di oggetti di altri linguaggi.

+ +

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.

+ +

Riferimenti

+ +
    +
  1. {{ Ref() }} Mozilla. "Core JavaScript 1.5 Guide", http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Guide
    2. +
  2. {{ Ref() }} wikipedia. "Object-oriented programming", http://en.wikipedia.org/wiki/Object-...ed_programming
    3. +
+ +
+

Original Document Information

+ + +
+ +

{{ languages( { "es": "es/Introducción_a_JavaScript_orientado_a_objetos"} ) }}

diff --git a/files/it/conflicting/learn/server-side/django/index.html b/files/it/conflicting/learn/server-side/django/index.html new file mode 100644 index 0000000000..071e75d582 --- /dev/null +++ b/files/it/conflicting/learn/server-side/django/index.html @@ -0,0 +1,106 @@ +--- +title: Python +slug: Python +translation_of: Learn/Server-side/Django +translation_of_original: Python +--- +

Python è un linguaggio di programmazione interpretato disponibile su una vasta varietà di piattaforme, inclusi Linux, MacOS X e Microsoft Windows.

+ +

Imparare Python

+ +

Libri digitali (gratuiti)

+ +

Dive Into Python è 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, Text Processing In Python è un eccellente tutorial (o reference).

+ +

Ci sono poi altri tutorial e risorse gratuite, disponibili:

+ + + +

Una volta acquisite le basi, si può passare a Code Like a Pythonista: Idiomatic Python per approfondire alcuni aspetti di Python che lo rendono diverso dagli altri linguaggi .

+ +

Corsi Online (gratuiti)

+ + + +

Python nelle applicazioni Mozilla

+ +

XPCOM di per sè supporta solamente la comunicazione tra C++ e JavaScript. Il modulo Python XPCOM (chiamato anche PyXPCOM) è 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 di default 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 Komodo.

+ +

A partire da Mozilla 1.9, è stato implementato Python DOM (PyDOM). Ciò permette agli sviluppatori di usare Python col tag <script> (ovviamente non nella release default di Firefox o Thunderbird).

+ +

Strumenti scritti in Python

+ +

Python usato in Mozilla per gli strumenti che si occupano di svolgere diverse operazioni sulle applicazioni e le infrastrutture. Sarebbe utile leggere Python Environment and Tools for Mozilla.

+ +

Gli strumenti scritti in Python sono listati qui: http://k0s.org/toolbox/?language=python

+ +

L'uso di Python in Mozilla

+ +

Mozilla ha diverse infrastrutture basate su Python:

+ + + +

Python in Mozilla-Central

+ +

[Nota: guarda https://bugzilla.mozilla.org/show_bug.cgi?id=835553]

+ +

Molti dei sistemi di sviluppo, di testing, altri strumenti ed infrastrutture in mozilla-central sono scritte in Python.

+ + + +

Nota: un virtualenv è stato attivato nella  objdir  ($OBJDIR/_virtualenv) . Per aggiungere moduli a virtualenv, edita build/virtualenv_packages.txt . Questi sono installati via build/virtualenv/populate_virtualenv.py .

+ +

Pacchetti Python

+ +

Python usa il file setup.py per l'installazione di moduli Python. Digitando python setup.py install installerai il modulo, ciò ti permetterà di usare il modulo stesso perchè aggiunto nel percorso PATH di Python. Per Python 2.x esistono molti moduli disponibili. distutils è l'unico gestore di moduli presente nella libreria standard. distutils puo caricare moduli su PyPI ed installarli. Per maggiori dettagli, puoi consultare la documentazione ufficiale di Python.

+ +

A differenza di distutils che fa parte della libreria standard, setuptools è un modulo di terze parti. È certamente compatibile con distutils, ma la cosa importante è che include le dependenze necessarie all'installazione dei vari moduli come pre-requisito quando si invoca setup.py così come la possibilità di installare i moduli in modalità sviluppo. Questo permette di editare i file tramite file .pth che risultano maneggievoli. setuptools fornisce anche easy_install che permette di installare moduli (e relative dipendenze) da PyPI. Per esempio, se volessimo installare PyYAML, basterebbe digitare:

+ +
easy_install PyYAML
+
+ +

Dal momento che setuptools non è presente di default in Python, avrai sicuramente bisogno di installarlo per usarlo. Puoi installare setuptools da PyPI scaricando il pacchetto, estraendolo, e digitando python setup.py install a linea-di-comando, oppure usare ez_setup.py. Puoi scaricarlo ed avviarlo con Python (sono richiesti privilegi di root), oppure in una sezione bash.

+ +
sudo python <(curl http://peak.telecommunity.com/dist/ez_setup.py)
+
+ +

setuptools potrebbe essere già presente in virtualenv, quindi potresti non avere bisogno di installare (manualmente) setuptools se usi virtualenv. C'è poi distribute, un fork di setuptools scritto dal nostro amico Tarek Ziade. È compatibile con setuptools.

+ +
Note: È altamente consigliato usare virtualenv durante la fase di sviluppo.
+ +

Python Package Index (PyPI) è il punto di raccolta centrale per i moduli Python di terze-parti. Se hai bisogno di funzionalità extra in Python, dacci un'occhiata!

+ +

Guarda anche: http://k0s.org/portfolio/packaging.html

+ +

Vedi anche:

+ + -- cgit v1.2.3-54-g00ecf