diff options
Diffstat (limited to 'files/it/web')
-rw-r--r-- | files/it/web/accessibility/sviluppo_web/index.html | 67 | ||||
-rw-r--r-- | files/it/web/api/canvas_api/index.html (renamed from files/it/web/html/canvas/index.html) | 3 | ||||
-rw-r--r-- | files/it/web/api/canvas_api/tutorial/index.html | 56 | ||||
-rw-r--r-- | files/it/web/api/document/firstchild/index.html | 41 | ||||
-rw-r--r-- | files/it/web/api/document_object_model/introduction/index.html (renamed from files/it/web/api/document_object_model/introduzione/index.html) | 3 | ||||
-rw-r--r-- | files/it/web/api/documentorshadowroot/stylesheets/index.html (renamed from files/it/web/api/document/stylesheets/index.html) | 3 | ||||
-rw-r--r-- | files/it/web/api/eventtarget/addeventlistener/index.html (renamed from files/it/web/api/element/addeventlistener/index.html) | 3 | ||||
-rw-r--r-- | files/it/web/api/geolocation_api/index.html (renamed from files/it/web/api/geolocation/using_geolocation/index.html) | 3 | ||||
-rw-r--r-- | files/it/web/api/htmlhyperlinkelementutils/index.html (renamed from files/it/web/api/urlutils/index.html) | 3 | ||||
-rw-r--r-- | files/it/web/api/keyboardevent/charcode/index.html (renamed from files/it/web/api/event/charcode/index.html) | 3 | ||||
-rw-r--r-- | files/it/web/api/keyboardevent/keycode/index.html (renamed from files/it/web/api/event/keycode/index.html) | 3 | ||||
-rw-r--r-- | files/it/web/api/keyboardevent/which/index.html (renamed from files/it/web/api/event/which/index.html) | 3 | ||||
-rw-r--r-- | files/it/web/api/mouseevent/altkey/index.html (renamed from files/it/web/api/event/altkey/index.html) | 3 | ||||
-rw-r--r-- | files/it/web/api/mouseevent/button/index.html (renamed from files/it/web/api/event/button/index.html) | 3 | ||||
-rw-r--r-- | files/it/web/api/mouseevent/ctrlkey/index.html (renamed from files/it/web/api/event/ctrlkey/index.html) | 3 | ||||
-rw-r--r-- | files/it/web/api/mouseevent/metakey/index.html (renamed from files/it/web/api/event/metakey/index.html) | 3 | ||||
-rw-r--r-- | files/it/web/api/mouseevent/shiftkey/index.html (renamed from files/it/web/api/event/shiftkey/index.html) | 3 | ||||
-rw-r--r-- | files/it/web/api/node/childnodes/index.html (renamed from files/it/web/api/element/childnodes/index.html) | 3 | ||||
-rw-r--r-- | files/it/web/api/node/firstchild/index.html (renamed from files/it/web/api/element/firstchild/index.html) | 3 | ||||
-rw-r--r-- | files/it/web/api/node/namespaceuri/index.html (renamed from files/it/web/api/document/namespaceuri/index.html) | 3 | ||||
-rw-r--r-- | files/it/web/api/node/nodename/index.html (renamed from files/it/web/api/element/nodename/index.html) | 3 | ||||
-rw-r--r-- | files/it/web/api/node/nodetype/index.html (renamed from files/it/web/api/element/nodetype/index.html) | 3 | ||||
-rw-r--r-- | files/it/web/api/node/nodevalue/index.html (renamed from files/it/web/api/element/nodevalue/index.html) | 3 | ||||
-rw-r--r-- | files/it/web/api/node/parentnode/index.html (renamed from files/it/web/api/element/parentnode/index.html) | 3 | ||||
-rw-r--r-- | files/it/web/api/node/prefix/index.html (renamed from files/it/web/api/element/prefix/index.html) | 3 | ||||
-rw-r--r-- | files/it/web/api/node/textcontent/index.html (renamed from files/it/web/api/element/textcontent/index.html) | 3 | ||||
-rw-r--r-- | files/it/web/api/notification/dir/index.html (renamed from files/it/web/api/notifiche/dir/index.html) | 3 | ||||
-rw-r--r-- | files/it/web/api/notification/index.html (renamed from files/it/web/api/notifiche/index.html) | 3 | ||||
-rw-r--r-- | files/it/web/api/plugin/index.html | 64 | ||||
-rw-r--r-- | files/it/web/api/uievent/ischar/index.html (renamed from files/it/web/api/event/ischar/index.html) | 3 | ||||
-rw-r--r-- | files/it/web/api/uievent/layerx/index.html (renamed from files/it/web/api/event/layerx/index.html) | 3 | ||||
-rw-r--r-- | files/it/web/api/uievent/layery/index.html (renamed from files/it/web/api/event/layery/index.html) | 3 | ||||
-rw-r--r-- | files/it/web/api/uievent/pagex/index.html (renamed from files/it/web/api/event/pagex/index.html) | 3 | ||||
-rw-r--r-- | files/it/web/api/uievent/pagey/index.html (renamed from files/it/web/api/event/pagey/index.html) | 3 | ||||
-rw-r--r-- | files/it/web/api/uievent/view/index.html (renamed from files/it/web/api/event/view/index.html) | 3 | ||||
-rw-r--r-- | files/it/web/api/websockets_api/index.html | 180 | ||||
-rw-r--r-- | files/it/web/api/websockets_api/writing_websocket_client_applications/index.html | 185 | ||||
-rw-r--r-- | files/it/web/api/window/domcontentloaded_event/index.html (renamed from files/it/web/events/domcontentloaded/index.html) | 3 | ||||
-rw-r--r-- | files/it/web/api/window/find/index.html | 33 | ||||
-rw-r--r-- | files/it/web/api/window/load_event/index.html (renamed from files/it/web/events/load/index.html) | 3 | ||||
-rw-r--r-- | files/it/web/api/windoworworkerglobalscope/clearinterval/index.html (renamed from files/it/web/api/windowtimers/clearinterval/index.html) | 3 | ||||
-rw-r--r-- | files/it/web/api/windowtimers/index.html | 125 | ||||
-rw-r--r-- | files/it/web/api/xmlhttprequest/using_xmlhttprequest/index.html (renamed from files/it/web/api/xmlhttprequest/usare_xmlhttprequest/index.html) | 3 | ||||
-rw-r--r-- | files/it/web/css/child_combinator/index.html (renamed from files/it/web/css/selettore_figli_diretti/index.html) | 3 | ||||
-rw-r--r-- | files/it/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html (renamed from files/it/web/css/cursor/usare_valori_url_per_la_proprietà_cursor/index.html) | 3 | ||||
-rw-r--r-- | files/it/web/css/css_columns/using_multi-column_layouts/index.html | 68 | ||||
-rw-r--r-- | files/it/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html (renamed from files/it/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html) | 3 | ||||
-rw-r--r-- | files/it/web/css/css_lists_and_counters/consistent_list_indentation/index.html | 107 | ||||
-rw-r--r-- | files/it/web/css/font-language-override/index.html (renamed from files/it/web/css/-moz-font-language-override/index.html) | 3 | ||||
-rw-r--r-- | files/it/web/css/layout_cookbook/index.html (renamed from files/it/web/css/ricette_layout/index.html) | 3 | ||||
-rw-r--r-- | files/it/web/css/reference/index.html (renamed from files/it/web/css/guida_di_riferimento_ai_css/index.html) | 5 | ||||
-rw-r--r-- | files/it/web/demos_of_open_web_technologies/index.html (renamed from files/it/web/esempi_di_tecnologie_web_open/index.html) | 3 | ||||
-rw-r--r-- | files/it/web/guide/ajax/getting_started/index.html (renamed from files/it/web/guide/ajax/iniziare/index.html) | 3 | ||||
-rw-r--r-- | files/it/web/guide/css/index.html | 24 | ||||
-rw-r--r-- | files/it/web/guide/html/content_categories/index.html (renamed from files/it/web/guide/html/categorie_di_contenuto/index.html) | 3 | ||||
-rw-r--r-- | files/it/web/guide/html/html5/index.html (renamed from files/it/web/html/html5/index.html) | 3 | ||||
-rw-r--r-- | files/it/web/guide/html/html5/introduction_to_html5/index.html (renamed from files/it/web/html/html5/introduction_to_html5/index.html) | 3 | ||||
-rw-r--r-- | files/it/web/guide/html/using_html_sections_and_outlines/index.html (renamed from files/it/web/html/sections_and_outlines_of_an_html5_document/index.html) | 3 | ||||
-rw-r--r-- | files/it/web/guide/mobile/index.html | 19 | ||||
-rw-r--r-- | files/it/web/guide/parsing_and_serializing_xml/index.html | 1194 | ||||
-rw-r--r-- | files/it/web/html/attributes/index.html (renamed from files/it/web/html/attributi/index.html) | 3 | ||||
-rw-r--r-- | files/it/web/html/canvas/drawing_graphics_with_canvas/index.html | 162 | ||||
-rw-r--r-- | files/it/web/html/element/figure/index.html (renamed from files/it/web/html/element/figura/index.html) | 3 | ||||
-rw-r--r-- | files/it/web/html/forms_in_html/index.html | 83 | ||||
-rw-r--r-- | files/it/web/html/reference/index.html (renamed from files/it/web/html/riferimento/index.html) | 3 | ||||
-rw-r--r-- | files/it/web/html/using_the_application_cache/index.html (renamed from files/it/web/html/utilizzare_application_cache/index.html) | 3 | ||||
-rw-r--r-- | files/it/web/http/basics_of_http/index.html (renamed from files/it/web/http/basi_http/index.html) | 3 | ||||
-rw-r--r-- | files/it/web/http/compression/index.html (renamed from files/it/web/http/compressione/index.html) | 3 | ||||
-rw-r--r-- | files/it/web/http/content_negotiation/index.html (renamed from files/it/web/http/negoziazione-del-contenuto/index.html) | 3 | ||||
-rw-r--r-- | files/it/web/http/headers/user-agent/firefox/index.html | 41 | ||||
-rw-r--r-- | files/it/web/http/link_prefetching_faq/index.html | 127 | ||||
-rw-r--r-- | files/it/web/http/overview/index.html (renamed from files/it/web/http/panoramica/index.html) | 3 | ||||
-rw-r--r-- | files/it/web/http/range_requests/index.html (renamed from files/it/web/http/richieste_range/index.html) | 3 | ||||
-rw-r--r-- | files/it/web/http/session/index.html (renamed from files/it/web/http/sessione/index.html) | 3 | ||||
-rw-r--r-- | files/it/web/javascript/a_re-introduction_to_javascript/index.html (renamed from files/it/web/javascript/una_reintroduzione_al_javascript/index.html) | 3 | ||||
-rw-r--r-- | files/it/web/javascript/about_javascript/index.html (renamed from files/it/web/javascript/cosè_javascript/index.html) | 3 | ||||
-rw-r--r-- | files/it/web/javascript/closures/index.html (renamed from files/it/web/javascript/chiusure/index.html) | 3 | ||||
-rw-r--r-- | files/it/web/javascript/getting_started/index.html | 331 | ||||
-rw-r--r-- | files/it/web/javascript/guide/control_flow_and_error_handling/index.html (renamed from files/it/web/javascript/guida/controllo_del_flusso_e_gestione_degli_errori/index.html) | 5 | ||||
-rw-r--r-- | files/it/web/javascript/guide/details_of_the_object_model/index.html (renamed from files/it/web/javascript/guida/dettagli_object_model/index.html) | 3 | ||||
-rw-r--r-- | files/it/web/javascript/guide/functions/index.html (renamed from files/it/web/javascript/guida/functions/index.html) | 3 | ||||
-rw-r--r-- | files/it/web/javascript/guide/grammar_and_types/index.html (renamed from files/it/web/javascript/guida/grammar_and_types/index.html) | 3 | ||||
-rw-r--r-- | files/it/web/javascript/guide/index.html (renamed from files/it/web/javascript/guida/index.html) | 3 | ||||
-rw-r--r-- | files/it/web/javascript/guide/introduction/index.html (renamed from files/it/web/javascript/guida/introduzione/index.html) | 3 | ||||
-rw-r--r-- | files/it/web/javascript/guide/iterators_and_generators/index.html (renamed from files/it/web/javascript/guida/iteratori_e_generatori/index.html) | 3 | ||||
-rw-r--r-- | files/it/web/javascript/guide/loops_and_iteration/index.html (renamed from files/it/web/javascript/guida/loops_and_iteration/index.html) | 3 | ||||
-rw-r--r-- | files/it/web/javascript/guide/regular_expressions/index.html (renamed from files/it/web/javascript/guida/espressioni_regolari/index.html) | 3 | ||||
-rw-r--r-- | files/it/web/javascript/introduzione_al_carattere_object-oriented_di_javascript/index.html | 391 | ||||
-rw-r--r-- | files/it/web/javascript/javascript_technologies_overview/index.html (renamed from files/it/web/javascript/il_dom_e_javascript/index.html) | 3 | ||||
-rw-r--r-- | files/it/web/javascript/memory_management/index.html (renamed from files/it/web/javascript/gestione_della_memoria/index.html) | 3 | ||||
-rw-r--r-- | files/it/web/javascript/reference/classes/constructor/index.html (renamed from files/it/web/javascript/reference/classes/costruttore/index.html) | 3 | ||||
-rw-r--r-- | files/it/web/javascript/reference/functions/arguments/index.html (renamed from files/it/web/javascript/reference/functions_and_function_scope/arguments/index.html) | 3 | ||||
-rw-r--r-- | files/it/web/javascript/reference/functions/arrow_functions/index.html (renamed from files/it/web/javascript/reference/functions_and_function_scope/arrow_functions/index.html) | 3 | ||||
-rw-r--r-- | files/it/web/javascript/reference/functions/get/index.html (renamed from files/it/web/javascript/reference/functions_and_function_scope/get/index.html) | 3 | ||||
-rw-r--r-- | files/it/web/javascript/reference/functions/index.html (renamed from files/it/web/javascript/reference/functions_and_function_scope/index.html) | 3 | ||||
-rw-r--r-- | files/it/web/javascript/reference/functions/set/index.html (renamed from files/it/web/javascript/reference/functions_and_function_scope/set/index.html) | 3 | ||||
-rw-r--r-- | files/it/web/javascript/reference/global_objects/array/prototype/index.html | 203 | ||||
-rw-r--r-- | files/it/web/javascript/reference/global_objects/object/prototype/index.html | 215 | ||||
-rw-r--r-- | files/it/web/javascript/reference/global_objects/proxy/proxy/apply/index.html (renamed from files/it/web/javascript/reference/global_objects/proxy/handler/apply/index.html) | 3 | ||||
-rw-r--r-- | files/it/web/javascript/reference/global_objects/proxy/proxy/index.html (renamed from files/it/web/javascript/reference/global_objects/proxy/handler/index.html) | 3 | ||||
-rw-r--r-- | files/it/web/javascript/reference/global_objects/proxy/revocable/index.html (renamed from files/it/web/javascript/reference/global_objects/proxy/revocabile/index.html) | 3 | ||||
-rw-r--r-- | files/it/web/javascript/reference/global_objects/string/prototype/index.html | 179 | ||||
-rw-r--r-- | files/it/web/javascript/reference/operators/comma_operator/index.html (renamed from files/it/web/javascript/reference/operators/operatore_virgola/index.html) | 3 | ||||
-rw-r--r-- | files/it/web/javascript/reference/operators/conditional_operator/index.html (renamed from files/it/web/javascript/reference/operators/operator_condizionale/index.html) | 3 | ||||
-rw-r--r-- | files/it/web/javascript/reference/operators/operatori_aritmetici/index.html | 292 | ||||
-rw-r--r-- | files/it/web/javascript/reference/template_literals/index.html (renamed from files/it/web/javascript/reference/template_strings/index.html) | 3 | ||||
-rw-r--r-- | files/it/web/opensearch/index.html | 35 | ||||
-rw-r--r-- | files/it/web/performance/critical_rendering_path/index.html (renamed from files/it/web/performance/percorso_critico_di_rendering/index.html) | 3 | ||||
-rw-r--r-- | files/it/web/progressive_web_apps/index.html | 51 | ||||
-rw-r--r-- | files/it/web/security/insecure_passwords/index.html (renamed from files/it/web/security/password_insicure/index.html) | 3 | ||||
-rw-r--r-- | files/it/web/svg/applying_svg_effects_to_html_content/index.html | 51 | ||||
-rw-r--r-- | files/it/web/svg/index.html | 103 | ||||
-rw-r--r-- | files/it/web/web_components/using_custom_elements/index.html (renamed from files/it/web/web_components/usare_custom_elements/index.html) | 3 |
113 files changed, 2488 insertions, 2201 deletions
diff --git a/files/it/web/accessibility/sviluppo_web/index.html b/files/it/web/accessibility/sviluppo_web/index.html deleted file mode 100644 index fccfa1f152..0000000000 --- a/files/it/web/accessibility/sviluppo_web/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: Sviluppo Web -slug: Web/Accessibility/Sviluppo_Web -translation_of: Web/Accessibility -translation_of_original: Web/Accessibility/Web_Development ---- -<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/web/html/canvas/index.html b/files/it/web/api/canvas_api/index.html index dcded63973..17a61b52e3 100644 --- a/files/it/web/html/canvas/index.html +++ b/files/it/web/api/canvas_api/index.html @@ -1,7 +1,8 @@ --- title: Canvas -slug: Web/HTML/Canvas +slug: Web/API/Canvas_API translation_of: Web/API/Canvas_API +original_slug: Web/HTML/Canvas --- <p>Aggiunto con <a href="https://developer.mozilla.org/en-US/docs/HTML/HTML5" title="/en-US/docs/HTML/HTML5">HTML5</a>, <strong>HTML {{ HTMLElement("canvas") }}</strong> è un elemento che può essere usato per disegnare elementi grafici tramite script (di solito <a href="/en-US/docs/JavaScript" title="en-US/docs/JavaScript">JavaScript</a>). Per esempio, può essere usato per disegnare grafici, creare composizioni fotografiche, creare animazioni e perfino realizzare elvaborazioni video in tempo reale.</p> diff --git a/files/it/web/api/canvas_api/tutorial/index.html b/files/it/web/api/canvas_api/tutorial/index.html new file mode 100644 index 0000000000..9e3fe00f2e --- /dev/null +++ b/files/it/web/api/canvas_api/tutorial/index.html @@ -0,0 +1,56 @@ +--- +title: Tutorial sulle Canvas +slug: Web/API/Canvas_API/Tutorial +tags: + - Canvas tutorial + - HTML:Canvas +translation_of: Web/API/Canvas_API/Tutorial +original_slug: Tutorial_sulle_Canvas +--- +<div class="summary"> +<p><img style="float: right;"><strong><code><a href="it/HTML/Canvas"><canvas></a></code></strong> è un nuovo elemento <a href="it/HTML">HTML</a> che può essere utilizzato per disegnare elementi grafici utilizzando lo scripting (di solito <a href="it/JavaScript">JavaScript</a>). Per esempio può essere utilizzato per disegnare grafici, fare composizioni di fotografie o semplici (e <a href="it/A_base_RayCaster"> non così semplici</a>) animazioni. L'immagine a destra mostra alcuni esempi di implementazioni di <code> <canvas> </code> che vedremo più avanti in questo tutorial.</p> +</div> + +<p>Questo tutorial descrive come usare l'elemento <canvas> per disegnare grafica 2D, cominciando dagli apetti più elementari. Gli esempi forniti vi forniranno un'idea di ciò che è possibile fare con canvas nonché il codice di alcuni snippet come ispirazione per lo sviluppo dei vostri contenuti originali.</p> + +<p><code><canvas></code> è stato introdotto originariamente da Apple per il <a class="external" href="http://www.apple.com/macosx/features/dashboard/">Mac OS X Dashboard</a> e solo implementato da Safari. Anche il browser basato sulla 1.8 <a href="it/Gecko">Gecko</a>, come ad esempio Firefox 1.5, supporta questo elemento. L'elemento <code><canvas></code> è anche parte delle specifiche <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/">WhatWG Web applications 1.0</a> conosciute come HTML 5</p> + +<p>In questo tutorial proveremo a descrivere l'utilizzo dell'elemento <code><canvas></code> nelle pagine HTML. Gli esempi forniti dovrebbero darvi dei chiarimenti di cosa tu puoi fare con <canvas> e come può essere utilizzato per iniziare a costruire le tue implementazioni.</p> + +<h3 id="Prima_di_iniziare" name="Prima_di_iniziare">Prima di iniziare</h3> + +<p>Utilizzare l'elemento <code><canvas></code> non è molto difficile, ma richiede una conoscenza di base di <a href="it/HTML">HTML</a> e <a href="it/JavaScript">JavaScript</a>.</p> + +<p><span id="result_box" lang="it"><span class="atn hps">Sebbene l'</span><span>elemento <canvas></span> <span class="hps">non sia supportato da</span> <span class="hps">alcuni vecchi browser dovrebbe essere</span><span class="hps"> supportato dalle</span> <span class="hps">versioni recenti di</span> <span class="hps">tutti i principali browser</span><span>.</span> <span class="hps">La dimensione predefinita</span> <span class="hps">del canvas (tela)</span> <span class="hps">è di 300px</span> <span class="hps">× 150</span> <span class="hps">px</span> <span class="hps">(altezza</span> <span class="hps">x larghezza</span><span>)</span><span>.</span> <span class="hps">E' possibile personalizzare le dimensioni </span></span>ricorrendo alle proprietà <code>height</code> e <code>width</code> dei fogli CSS. Nei seguenti esempi ricorreremo a codice javascript (javascript context object) per generare la grafica al volo.</p> + +<h3 id="In_questo_tutorial" name="In_questo_tutorial">In questo tutorial</h3> + +<ul> + <li><a href="it/Canvas_tutorial/Utilizzo_di_base">Utilizzo di base</a></li> + <li><a href="it/Canvas_tutorial/Disegnare_forme">Disegnare forme</a></li> + <li><a href="it/Canvas_tutorial/Applicare_stili_e_colori">Applicare stili e colori</a></li> + <li>Disegnare il testo</li> + <li><a href="it/Canvas_tutorial/Usare_immagini">Usare immagini</a></li> + <li><a href="it/Canvas_tutorial/Trasformazioni">Trasformazioni</a></li> + <li><a href="it/Canvas_tutorial/Composizioni">Composizioni e clipping (ritaglio)</a></li> + <li><a href="it/Canvas_tutorial/Animazioni_di_base">Animazioni di base</a></li> + <li>Animazioni avanzate</li> + <li>Manipolazione dei pixel</li> + <li>Regioni di interesse e accessibilità</li> + <li>Ottimizzazione delle canvas</li> + <li>Fine</li> +</ul> + +<h3 id="Vedi_anche" name="Vedi_anche">Vedi anche</h3> + +<ul> + <li><a href="/en-US/docs/Web/API/Canvas_API" title="HTML/Canvas">Canvas topic page</a></li> + <li><a class="external" href="http://www.canvasdemos.com/" title="Canvas Demos">Esempi e demo - Giochi, applicazioni, strumenti e tutorial</a></li> + <li><a class="external" href="http://visitmix.com/labs/ai2canvas/" title="http://visitmix.com/labs/ai2canvas/">Plug-in di conversione da Adobe Illustrator a Canvas</a></li> + <li><a class="external" href="http://www.html5canvastutorials.com/" title="http://www.html5canvastutorials.com/">HTML5CanvasTutorials</a></li> + <li><a class="external" href="http://creativejs.com/2011/08/31-days-of-canvas-tutorials/" title="http://creativejs.com/2011/08/31-days-of-canvas-tutorials/">31 giorni di canvas tutorials</a></li> +</ul> + +<div>{{ Next("Web/API/Canvas_API/Tutorial/Basic_usage") }}</div> + +<p>{{ languages( { "fr": "fr/Tutoriel_canvas", "ja": "ja/Canvas_tutorial", "ko": "ko/Canvas_tutorial", "pl": "pl/Przewodnik_po_canvas", "zh-cn": "cn/Canvas_tutorial", "ru": "ru/\u041e\u0431\u0443\u0447\u0435\u043d\u0438\u0435_canvas" } ) }}</p> diff --git a/files/it/web/api/document/firstchild/index.html b/files/it/web/api/document/firstchild/index.html deleted file mode 100644 index 99a2a04fc2..0000000000 --- a/files/it/web/api/document/firstchild/index.html +++ /dev/null @@ -1,41 +0,0 @@ ---- -title: document.firstChild -slug: Web/API/Document/firstChild -translation_of: Web/API/Node/firstChild -translation_of_original: 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/web/api/document_object_model/introduzione/index.html b/files/it/web/api/document_object_model/introduction/index.html index 328caa0c5c..a3495f7665 100644 --- a/files/it/web/api/document_object_model/introduzione/index.html +++ b/files/it/web/api/document_object_model/introduction/index.html @@ -1,6 +1,6 @@ --- title: Introduzione al DOM -slug: Web/API/Document_Object_Model/Introduzione +slug: Web/API/Document_Object_Model/Introduction tags: - Beginner - DOM @@ -10,6 +10,7 @@ tags: - Principianti - Tutorial translation_of: Web/API/Document_Object_Model/Introduction +original_slug: Web/API/Document_Object_Model/Introduzione --- <p><span class="seoSummary">Il <strong>Document Object Model</strong> (<strong>DOM</strong>) è la rappresentazione degli oggetti che comprendono la struttura e il contenuto di un documento sul web. In questa guida, introdurremo brevemente il DOM. Vedremo come il DOM rappresenta </span>un documento {{Glossary("HTML")}} o {{Glossary("XML")}} in memoria e come puoi usare le APIs per creare contenuti web e applicazioni.</p> diff --git a/files/it/web/api/document/stylesheets/index.html b/files/it/web/api/documentorshadowroot/stylesheets/index.html index 3aa006a94f..95f590715d 100644 --- a/files/it/web/api/document/stylesheets/index.html +++ b/files/it/web/api/documentorshadowroot/stylesheets/index.html @@ -1,6 +1,6 @@ --- title: document.styleSheets -slug: Web/API/Document/styleSheets +slug: Web/API/DocumentOrShadowRoot/styleSheets tags: - DOM - Gecko @@ -8,6 +8,7 @@ tags: - Tutte_le_categorie translation_of: Web/API/DocumentOrShadowRoot/styleSheets translation_of_original: Web/API/Document/styleSheets +original_slug: Web/API/Document/styleSheets --- <p>{{APIRef("DOM")}}</p> diff --git a/files/it/web/api/element/addeventlistener/index.html b/files/it/web/api/eventtarget/addeventlistener/index.html index 6608e69bd3..36aaeb792f 100644 --- a/files/it/web/api/element/addeventlistener/index.html +++ b/files/it/web/api/eventtarget/addeventlistener/index.html @@ -1,6 +1,6 @@ --- title: EventTarget.addEventListener() -slug: Web/API/Element/addEventListener +slug: Web/API/EventTarget/addEventListener tags: - API - DOM @@ -16,6 +16,7 @@ tags: - metodo - mselementresize translation_of: Web/API/EventTarget/addEventListener +original_slug: Web/API/Element/addEventListener --- <div>{{APIRef("DOM Events")}}</div> diff --git a/files/it/web/api/geolocation/using_geolocation/index.html b/files/it/web/api/geolocation_api/index.html index 303cb4a8bb..64fb909e34 100644 --- a/files/it/web/api/geolocation/using_geolocation/index.html +++ b/files/it/web/api/geolocation_api/index.html @@ -1,7 +1,8 @@ --- title: Using geolocation -slug: Web/API/Geolocation/Using_geolocation +slug: Web/API/Geolocation_API translation_of: Web/API/Geolocation_API +original_slug: Web/API/Geolocation/Using_geolocation --- <p>{{securecontext_header}}{{APIRef("Geolocation API")}}</p> diff --git a/files/it/web/api/urlutils/index.html b/files/it/web/api/htmlhyperlinkelementutils/index.html index 05cc01aa9b..e62eda611d 100644 --- a/files/it/web/api/urlutils/index.html +++ b/files/it/web/api/htmlhyperlinkelementutils/index.html @@ -1,7 +1,8 @@ --- title: URLUtils -slug: Web/API/URLUtils +slug: Web/API/HTMLHyperlinkElementUtils translation_of: Web/API/HTMLHyperlinkElementUtils +original_slug: Web/API/URLUtils --- <p>{{ApiRef("URL API")}}{{SeeCompatTable}}</p> diff --git a/files/it/web/api/event/charcode/index.html b/files/it/web/api/keyboardevent/charcode/index.html index fb785e722e..4dbc90bf17 100644 --- a/files/it/web/api/event/charcode/index.html +++ b/files/it/web/api/keyboardevent/charcode/index.html @@ -1,12 +1,13 @@ --- title: event.charCode -slug: Web/API/Event/charCode +slug: Web/API/KeyboardEvent/charCode tags: - DOM - Gecko - Reference_del_DOM_di_Gecko - Tutte_le_categorie translation_of: Web/API/KeyboardEvent/charCode +original_slug: Web/API/Event/charCode --- <p>{{ ApiRef() }}</p> <h3 id="Sommario" name="Sommario">Sommario</h3> diff --git a/files/it/web/api/event/keycode/index.html b/files/it/web/api/keyboardevent/keycode/index.html index 40dac8122d..8c212fac97 100644 --- a/files/it/web/api/event/keycode/index.html +++ b/files/it/web/api/keyboardevent/keycode/index.html @@ -1,6 +1,6 @@ --- title: event.keyCode -slug: Web/API/Event/keyCode +slug: Web/API/KeyboardEvent/keyCode tags: - DOM - Gecko @@ -8,6 +8,7 @@ tags: - Tutte_le_categorie translation_of: Web/API/KeyboardEvent/keyCode translation_of_original: Web/API/event.keyCode +original_slug: Web/API/Event/keyCode --- <p>{{ ApiRef() }}</p> <h3 id="Sommario" name="Sommario">Sommario</h3> diff --git a/files/it/web/api/event/which/index.html b/files/it/web/api/keyboardevent/which/index.html index 0ab544b60c..4d5d567468 100644 --- a/files/it/web/api/event/which/index.html +++ b/files/it/web/api/keyboardevent/which/index.html @@ -1,12 +1,13 @@ --- title: event.which -slug: Web/API/Event/which +slug: Web/API/KeyboardEvent/which tags: - DOM - Gecko - Reference_del_DOM_di_Gecko - Tutte_le_categorie translation_of: Web/API/KeyboardEvent/which +original_slug: Web/API/Event/which --- <p>{{ ApiRef() }}</p> <h3 id="Sommario" name="Sommario">Sommario</h3> diff --git a/files/it/web/api/event/altkey/index.html b/files/it/web/api/mouseevent/altkey/index.html index 02412cfe6c..b282dcb2ee 100644 --- a/files/it/web/api/event/altkey/index.html +++ b/files/it/web/api/mouseevent/altkey/index.html @@ -1,6 +1,6 @@ --- title: event.altKey -slug: Web/API/Event/altKey +slug: Web/API/MouseEvent/altKey tags: - DOM - Gecko @@ -8,6 +8,7 @@ tags: - Tutte_le_categorie translation_of: Web/API/MouseEvent/altKey translation_of_original: Web/API/event.altKey +original_slug: Web/API/Event/altKey --- <p>{{ ApiRef() }}</p> <h3 id="Sommario" name="Sommario">Sommario</h3> diff --git a/files/it/web/api/event/button/index.html b/files/it/web/api/mouseevent/button/index.html index 7c1f181858..ff3d67d702 100644 --- a/files/it/web/api/event/button/index.html +++ b/files/it/web/api/mouseevent/button/index.html @@ -1,6 +1,6 @@ --- title: event.button -slug: Web/API/Event/button +slug: Web/API/MouseEvent/button tags: - DOM - Gecko @@ -8,6 +8,7 @@ tags: - Tutte_le_categorie translation_of: Web/API/MouseEvent/button translation_of_original: Web/API/event.button +original_slug: Web/API/Event/button --- <p>{{ ApiRef() }}</p> <h3 id="Sommario" name="Sommario">Sommario</h3> diff --git a/files/it/web/api/event/ctrlkey/index.html b/files/it/web/api/mouseevent/ctrlkey/index.html index 195374d673..c4ce9255e8 100644 --- a/files/it/web/api/event/ctrlkey/index.html +++ b/files/it/web/api/mouseevent/ctrlkey/index.html @@ -1,6 +1,6 @@ --- title: event.ctrlKey -slug: Web/API/Event/ctrlKey +slug: Web/API/MouseEvent/ctrlKey tags: - DOM - Gecko @@ -8,6 +8,7 @@ tags: - Tutte_le_categorie translation_of: Web/API/MouseEvent/ctrlKey translation_of_original: Web/API/event.ctrlKey +original_slug: Web/API/Event/ctrlKey --- <p>{{ ApiRef() }}</p> <h3 id="Sommario" name="Sommario">Sommario</h3> diff --git a/files/it/web/api/event/metakey/index.html b/files/it/web/api/mouseevent/metakey/index.html index e40fa17379..b97904a5d4 100644 --- a/files/it/web/api/event/metakey/index.html +++ b/files/it/web/api/mouseevent/metakey/index.html @@ -1,6 +1,6 @@ --- title: event.metaKey -slug: Web/API/Event/metaKey +slug: Web/API/MouseEvent/metaKey tags: - DOM - Gecko @@ -8,6 +8,7 @@ tags: - Tutte_le_categorie translation_of: Web/API/MouseEvent/metaKey translation_of_original: Web/API/event.metaKey +original_slug: Web/API/Event/metaKey --- <p>{{ ApiRef() }}</p> <h3 id="Sommario" name="Sommario">Sommario</h3> diff --git a/files/it/web/api/event/shiftkey/index.html b/files/it/web/api/mouseevent/shiftkey/index.html index 17a581937f..3365619bf1 100644 --- a/files/it/web/api/event/shiftkey/index.html +++ b/files/it/web/api/mouseevent/shiftkey/index.html @@ -1,6 +1,6 @@ --- title: event.shiftKey -slug: Web/API/Event/shiftKey +slug: Web/API/MouseEvent/shiftKey tags: - DOM - Gecko @@ -8,6 +8,7 @@ tags: - Tutte_le_categorie translation_of: Web/API/MouseEvent/shiftKey translation_of_original: Web/API/event.shiftKey +original_slug: Web/API/Event/shiftKey --- <p>{{ ApiRef() }}</p> <h3 id="Sommario" name="Sommario">Sommario</h3> diff --git a/files/it/web/api/element/childnodes/index.html b/files/it/web/api/node/childnodes/index.html index f56bcc4380..1db83ea87c 100644 --- a/files/it/web/api/element/childnodes/index.html +++ b/files/it/web/api/node/childnodes/index.html @@ -1,7 +1,8 @@ --- title: Node.childNodes -slug: Web/API/Element/childNodes +slug: Web/API/Node/childNodes translation_of: Web/API/Node/childNodes +original_slug: Web/API/Element/childNodes --- <div> <div>{{APIRef("DOM")}}</div> diff --git a/files/it/web/api/element/firstchild/index.html b/files/it/web/api/node/firstchild/index.html index b5052f5dfe..b99b694dbe 100644 --- a/files/it/web/api/element/firstchild/index.html +++ b/files/it/web/api/node/firstchild/index.html @@ -1,6 +1,6 @@ --- title: Node.firstChild -slug: Web/API/Element/firstChild +slug: Web/API/Node/firstChild tags: - API - DOM @@ -8,6 +8,7 @@ tags: - Proprietà - Referenza translation_of: Web/API/Node/firstChild +original_slug: Web/API/Element/firstChild --- <div>{{APIRef("DOM")}}</div> diff --git a/files/it/web/api/document/namespaceuri/index.html b/files/it/web/api/node/namespaceuri/index.html index fc29e0f121..74e1f8092f 100644 --- a/files/it/web/api/document/namespaceuri/index.html +++ b/files/it/web/api/node/namespaceuri/index.html @@ -1,8 +1,9 @@ --- title: document.namespaceURI -slug: Web/API/Document/namespaceURI +slug: Web/API/Node/namespaceURI translation_of: Web/API/Node/namespaceURI translation_of_original: Web/API/Document/namespaceURI +original_slug: Web/API/Document/namespaceURI --- <div>{{APIRef("DOM")}}</div> diff --git a/files/it/web/api/element/nodename/index.html b/files/it/web/api/node/nodename/index.html index 2030226b37..2738910a45 100644 --- a/files/it/web/api/element/nodename/index.html +++ b/files/it/web/api/node/nodename/index.html @@ -1,6 +1,6 @@ --- title: Node.nodeName -slug: Web/API/Element/nodeName +slug: Web/API/Node/nodeName tags: - API - DOM @@ -10,6 +10,7 @@ tags: - Property - Read-only translation_of: Web/API/Node/nodeName +original_slug: Web/API/Element/nodeName --- <div>{{APIRef("DOM")}}</div> diff --git a/files/it/web/api/element/nodetype/index.html b/files/it/web/api/node/nodetype/index.html index fba395288a..c484034dc7 100644 --- a/files/it/web/api/element/nodetype/index.html +++ b/files/it/web/api/node/nodetype/index.html @@ -1,12 +1,13 @@ --- title: Node.nodeType -slug: Web/API/Element/nodeType +slug: Web/API/Node/nodeType tags: - API - DOM - Proprietà - Referenza translation_of: Web/API/Node/nodeType +original_slug: Web/API/Element/nodeType --- <div>{{APIRef("DOM")}}</div> diff --git a/files/it/web/api/element/nodevalue/index.html b/files/it/web/api/node/nodevalue/index.html index 547ba77939..6eef21baad 100644 --- a/files/it/web/api/element/nodevalue/index.html +++ b/files/it/web/api/node/nodevalue/index.html @@ -1,12 +1,13 @@ --- title: element.nodeValue -slug: Web/API/Element/nodeValue +slug: Web/API/Node/nodeValue tags: - DOM - Gecko - Reference_del_DOM_di_Gecko - Tutte_le_categorie translation_of: Web/API/Node/nodeValue +original_slug: Web/API/Element/nodeValue --- <p>{{ ApiRef() }}</p> <h3 id="Sommario" name="Sommario">Sommario</h3> diff --git a/files/it/web/api/element/parentnode/index.html b/files/it/web/api/node/parentnode/index.html index 03e89aa432..610cc3e5e4 100644 --- a/files/it/web/api/element/parentnode/index.html +++ b/files/it/web/api/node/parentnode/index.html @@ -1,12 +1,13 @@ --- title: Node.parentNode -slug: Web/API/Element/parentNode +slug: Web/API/Node/parentNode tags: - API - DOM - Gecko - Proprietà translation_of: Web/API/Node/parentNode +original_slug: Web/API/Element/parentNode --- <div> <div>{{APIRef("DOM")}}</div> diff --git a/files/it/web/api/element/prefix/index.html b/files/it/web/api/node/prefix/index.html index 3371ff1f8d..fd7646c066 100644 --- a/files/it/web/api/element/prefix/index.html +++ b/files/it/web/api/node/prefix/index.html @@ -1,12 +1,13 @@ --- title: element.prefix -slug: Web/API/Element/prefix +slug: Web/API/Node/prefix tags: - DOM - Gecko - Reference_del_DOM_di_Gecko - Tutte_le_categorie translation_of: Web/API/Node/prefix +original_slug: Web/API/Element/prefix --- <p>{{ ApiRef() }}</p> <h3 id="Sommario" name="Sommario">Sommario</h3> diff --git a/files/it/web/api/element/textcontent/index.html b/files/it/web/api/node/textcontent/index.html index 137c76a3eb..bd2186323e 100644 --- a/files/it/web/api/element/textcontent/index.html +++ b/files/it/web/api/node/textcontent/index.html @@ -1,6 +1,6 @@ --- title: Node.textContent -slug: Web/API/Element/textContent +slug: Web/API/Node/textContent tags: - API - Command API @@ -8,6 +8,7 @@ tags: - Proprietà - Referenza translation_of: Web/API/Node/textContent +original_slug: Web/API/Element/textContent --- <div>{{APIRef("DOM")}}</div> diff --git a/files/it/web/api/notifiche/dir/index.html b/files/it/web/api/notification/dir/index.html index c1e16410d6..b2a3a3ec70 100644 --- a/files/it/web/api/notifiche/dir/index.html +++ b/files/it/web/api/notification/dir/index.html @@ -1,7 +1,8 @@ --- title: Notification.dir -slug: Web/API/notifiche/dir +slug: Web/API/Notification/dir translation_of: Web/API/Notification/dir +original_slug: Web/API/notifiche/dir --- <p>{{APIRef("Web Notifications")}}</p> diff --git a/files/it/web/api/notifiche/index.html b/files/it/web/api/notification/index.html index ae8300aa01..d734613849 100644 --- a/files/it/web/api/notifiche/index.html +++ b/files/it/web/api/notification/index.html @@ -1,7 +1,8 @@ --- title: Notifiche -slug: Web/API/notifiche +slug: Web/API/Notification translation_of: Web/API/Notification +original_slug: Web/API/notifiche --- <p>{{APIRef("Web Notifications")}}</p> diff --git a/files/it/web/api/plugin/index.html b/files/it/web/api/plugin/index.html new file mode 100644 index 0000000000..b160be06fc --- /dev/null +++ b/files/it/web/api/plugin/index.html @@ -0,0 +1,64 @@ +--- +title: Plug-in +slug: Web/API/Plugin +tags: + - Add-ons + - Plugins + - Tutte_le_categorie +translation_of: Web/API/Plugin +original_slug: Plug-in +--- +<p> </p> +<div> + <p>I <b>Plugins</b> (o plug-ins) sono piccoli software che interagiscono con il browser al fine di fornire alcune funzioni specifiche. Classici esempi di plugin sono quelli che consentono di visualizzare formati grafici specifici, o di eseguire file multimediali. I plugin sono leggermente diversi dalle <a href="it/Extensions">estensioni</a>, che modificano o aggiungono funzionalità già presenti.</p> +</div> +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h4 id="Documentazione" name="Documentazione"><a>Documentazione</a></h4> + <dl> + <dt> + <a href="it/Gecko_Plugin_API_Reference">Gecko Plugin API Reference</a></dt> + <dd> + <small>Questo manuale di riferimento descrive le interfacce impiegabili dal programmatore nella realizzazione di plugin per Gecko, e fornisce indicazioni su come usare tali interfacce.</small></dd> + </dl> + <dl> + <dt> + <a href="it/Using_XPInstall_to_Install_Plugins">Using XPInstall to Install Plugins</a></dt> + <dd> + <small><a href="it/XPInstall">XPInstall</a> è una tecnologia che consente una interazione utente molto semplice qualora sia necessario aggiungere nuovi plugin, senza dover costringere l'utente ad uscire dal proprio ambiente di navigazione per eseguire un programma esterno di installazione.</small></dd> + </dl> + <dl> + <dt> + <a class="external" href="http://developer.apple.com/internet/webcontent/detectplugins.html">Detecting Plugins</a> <small>(en)</small></dt> + <dd> + <small>"Dato che ci sono delle ovvie situazioni in cui ha un senso usare un plug-in, la domanda che sorge è come interagire con coloro che non hanno già installato il plug-in necessario"</small></dd> + </dl> + <dl> + <dt> + <a href="it/Scripting_Plugins/Macromedia_Flash">Scripting Plugins: Macromedia Flash</a></dt> + <dd> + <small>Questo articolo spiega come è possibile usare JavaScript per accedere a metodi disponibili in un plugin Flash, ed anche come impiegare la funzionalità chiamata <code>FSCommands</code> per accedere a funzioni JavaScript dall'interno di animazioni Flash.</small></dd> + </dl> + <p><span class="alllinks"><a>Mostra tutto...</a></span></p> + </td> + <td> + <h4 id="Community" name="Community">Community</h4> + <ul> + <li>View Mozilla forums...</li> + </ul> + <p>{{ DiscussionList("dev-tech-plugins", "mozilla.dev.tech.plugins") }}</p> + <h4 id="Related_Topics" name="Related_Topics">Related Topics</h4> + <dl> + <dd> + <a href="it/Gecko">Gecko</a></dd> + </dl> + </td> + </tr> + </tbody> +</table> +<p><span class="comment">Categories</span></p> +<p><span class="comment">Interwiki Language Links</span></p> +<p> </p> +<p>{{ languages( { "en": "en/Plugins", "es": "es/Plugins", "fr": "fr/Plugins", "ja": "ja/Plugins", "pl": "pl/Wtyczki" } ) }}</p> diff --git a/files/it/web/api/event/ischar/index.html b/files/it/web/api/uievent/ischar/index.html index ae1edd3975..6440856995 100644 --- a/files/it/web/api/event/ischar/index.html +++ b/files/it/web/api/uievent/ischar/index.html @@ -1,12 +1,13 @@ --- title: event.isChar -slug: Web/API/Event/isChar +slug: Web/API/UIEvent/isChar tags: - DOM - Gecko - Reference_del_DOM_di_Gecko - Tutte_le_categorie translation_of: Web/API/UIEvent/isChar +original_slug: Web/API/Event/isChar --- <p>{{ ApiRef() }}</p> <h3 id="Sommario" name="Sommario">Sommario</h3> diff --git a/files/it/web/api/event/layerx/index.html b/files/it/web/api/uievent/layerx/index.html index 80dc20b35b..7ee4d10d26 100644 --- a/files/it/web/api/event/layerx/index.html +++ b/files/it/web/api/uievent/layerx/index.html @@ -1,12 +1,13 @@ --- title: event.layerX -slug: Web/API/Event/layerX +slug: Web/API/UIEvent/layerX tags: - DOM - Gecko - Reference_del_DOM_di_Gecko - Tutte_le_categorie translation_of: Web/API/UIEvent/layerX +original_slug: Web/API/Event/layerX --- <p>{{ ApiRef() }}</p> <h3 id="Sommario" name="Sommario">Sommario</h3> diff --git a/files/it/web/api/event/layery/index.html b/files/it/web/api/uievent/layery/index.html index 9bb4f99947..38ae5ba878 100644 --- a/files/it/web/api/event/layery/index.html +++ b/files/it/web/api/uievent/layery/index.html @@ -1,12 +1,13 @@ --- title: event.layerY -slug: Web/API/Event/layerY +slug: Web/API/UIEvent/layerY tags: - DOM - Gecko - Reference_del_DOM_di_Gecko - Tutte_le_categorie translation_of: Web/API/UIEvent/layerY +original_slug: Web/API/Event/layerY --- <p>{{ ApiRef() }}</p> <h3 id="Sommario" name="Sommario">Sommario</h3> diff --git a/files/it/web/api/event/pagex/index.html b/files/it/web/api/uievent/pagex/index.html index 90cf1beaac..6c2ad1573e 100644 --- a/files/it/web/api/event/pagex/index.html +++ b/files/it/web/api/uievent/pagex/index.html @@ -1,12 +1,13 @@ --- title: event.pageX -slug: Web/API/Event/pageX +slug: Web/API/UIEvent/pageX tags: - DOM - Gecko - Reference_del_DOM_di_Gecko - Tutte_le_categorie translation_of: Web/API/UIEvent/pageX +original_slug: Web/API/Event/pageX --- <p>{{ ApiRef() }}</p> <h3 id="Sommario" name="Sommario">Sommario</h3> diff --git a/files/it/web/api/event/pagey/index.html b/files/it/web/api/uievent/pagey/index.html index d0d87573cc..e1a2637dcd 100644 --- a/files/it/web/api/event/pagey/index.html +++ b/files/it/web/api/uievent/pagey/index.html @@ -1,12 +1,13 @@ --- title: event.pageY -slug: Web/API/Event/pageY +slug: Web/API/UIEvent/pageY tags: - DOM - Gecko - Reference_del_DOM_di_Gecko - Tutte_le_categorie translation_of: Web/API/UIEvent/pageY +original_slug: Web/API/Event/pageY --- <p>{{ ApiRef() }}</p> <h3 id="Sommario" name="Sommario">Sommario</h3> diff --git a/files/it/web/api/event/view/index.html b/files/it/web/api/uievent/view/index.html index 00d9f88004..c8de66c283 100644 --- a/files/it/web/api/event/view/index.html +++ b/files/it/web/api/uievent/view/index.html @@ -1,12 +1,13 @@ --- title: event.view -slug: Web/API/Event/view +slug: Web/API/UIEvent/view tags: - DOM - Gecko - Reference_del_DOM_di_Gecko - Tutte_le_categorie translation_of: Web/API/UIEvent/view +original_slug: Web/API/Event/view --- <p>{{ ApiRef() }}</p> <h3 id="Sommario" name="Sommario">Sommario</h3> diff --git a/files/it/web/api/websockets_api/index.html b/files/it/web/api/websockets_api/index.html new file mode 100644 index 0000000000..346f32119c --- /dev/null +++ b/files/it/web/api/websockets_api/index.html @@ -0,0 +1,180 @@ +--- +title: WebSockets +slug: Web/API/WebSockets_API +tags: + - References + - WebSockets +translation_of: Web/API/WebSockets_API +original_slug: WebSockets +--- +<p>I WebSockets sono una tecnologia avanzata che rende possibile aprire una sessione di comunicazione interattiva tra il browser dell'utente e un server. Con questa API si possono mandare messaggi al server e ricevere risposte event-driven senza doverle richiedere al server.</p> + +<div class="cleared row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="Documentation" name="Documentation">Documentazione</h2> + +<dl> + <dt><a href="/en-US/docs/WebSockets/Writing_WebSocket_client_applications" title="WebSockets/Writing WebSocket client applications">Scrivere applicazioni WebSocket lato client</a></dt> + <dd>Un tutorial per scrivere applicazioni WebSocket da eseguire nel browser.</dd> + <dt><a href="/en-US/docs/WebSockets/WebSockets_reference" title="WebSockets/WebSockets reference">WebSockets reference</a></dt> + <dd>Informazioni dettagliate sulla API lato client.</dd> + <dt><a href="/en-US/docs/WebSockets/Writing_WebSocket_servers" title="WebSockets/Writing WebSocket servers">(TBD) Writing WebSocket servers</a></dt> + <dd>Una guida per scrivere applicazioni lato server che gestiscano il protocollo WebSocket.</dd> +</dl> + +<p><span class="alllinks"><a href="/en-US/docs/tag/WebSockets" title="tag/WebSockets">Visualizza tutti</a></span></p> +</div> + +<div class="section"> +<h2 class="Tools" id="Tools" name="Tools">Strumenti</h2> + +<ul> + <li><a class="external" href="http://socket.io" title="http://socket.io/">Socket.IO</a>: Una potente API cross-platform per WebSocket e <a class="external" href="http://nodejs.org" title="http://nodejs.org/">Node.js</a>.</li> + <li><a class="link-https" href="https://github.com/Worlize/WebSocket-Node" title="https://github.com/Worlize/WebSocket-Node">WebSocket-Node</a>: Un'implementazione lato server dell'API di Websocket per <a class="external" href="http://nodejs.org" title="http://nodejs.org/">Node.js</a>.</li> + <li><a href="http://ajf.me/websocket/#libs" title="http://websocket.us/#libs">Una lista più completa di framework e librerie</a></li> +</ul> + +<h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Argomenti correlati</h2> + +<ul> + <li><a href="/en-US/docs/AJAX" title="AJAX">AJAX</a>, <a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a></li> +</ul> +</div> +</div> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li><a class="external" href="http://tools.ietf.org/html/rfc6455">RFC 6455 - The WebSocket Protocol</a></li> + <li><a class="external" href="http://www.w3.org/TR/websockets/">WebSocket API Specification</a></li> + <li><a href="/en-US/docs/Server-sent_events" title="Server-sent_events">Server-Sent Events</a></li> + <li><a class="external" href="http://websocket.us/">WebSocket.us</a> - a community-run, not-for-profit site about WebSocket</li> +</ul> + +<h2 id="Compatibilità_tra_browser">Compatibilità tra browser</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Version -76 support {{obsolete_inline}}</td> + <td>6</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>{{CompatNo}}</td> + <td>11.00 (disabled)</td> + <td>5.0.1</td> + </tr> + <tr> + <td>Protocol version 7 support {{obsolete_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("6.0")}}<br> + {{property_prefix("Moz")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Protocol version 10 support {{obsolete_inline}}</td> + <td>14</td> + <td>{{CompatGeckoDesktop("7.0")}}<br> + {{property_prefix("Moz")}}</td> + <td>HTML5 Labs</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Standard - RFC 6455 Support</td> + <td>16</td> + <td>{{CompatGeckoDesktop("11.0")}}</td> + <td>10</td> + <td>12.10</td> + <td>6.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Version -76 support {{obsolete_inline}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Protocol version 7 support {{obsolete_inline}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Protocol version 8 support (IETF draft 10) {{obsolete_inline}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("7.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Standard - RFC 6455 Support</td> + <td>16 (Chrome)</td> + <td>{{CompatGeckoDesktop("11.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>12.10</td> + <td>6.0</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Gecko_notes">Gecko notes</h3> + +<p>WebSockets support in Firefox is continuing to track the evolving WebSocket specification. Firefox 6 implements version 7 of the underlying protocol, while Firefox 7 implements version 8 (as specified by IETF draft 10). Firefox mobile received WebSocket support in Firefox mobile 7.0.</p> + +<h4 id="Gecko_6.0">Gecko 6.0</h4> + +<p>Prior to Gecko 6.0 {{geckoRelease("6.0")}}, there was, incorrectly, a <code>WebSocket</code> object that some sites were thinking implied that <code>WebSocket</code> services were not prefixed; this object has been renamed to <code>MozWebSocket</code>.</p> + +<h4 id="Gecko_7.0">Gecko 7.0</h4> + +<p>Starting in Gecko 7.0 {{geckoRelease("7.0")}}, the <code>network.websocket.max-connections</code> preference is used to determine the maximum number of WebSocket connections that can be open at a time. The default value is 200.</p> + +<h4 id="Gecko_8.0">Gecko 8.0</h4> + +<p>Starting in Gecko 8.0 {{geckoRelease("8.0")}}, the deflate-stream extension to the WebSocket protocol has been disabled, since it's been deprecated from the specification drafts. This resolves incompatibilities with some sites.</p> + +<h4 id="Gecko_11.0">Gecko 11.0</h4> + +<p>Prior to Gecko 11.0, both incoming and outgoing messages were limited to 16 MB in size. They may now be up to 2 GB in size. Note, however, that memory limitations (especially on mobile devices) make that a theoretical maximum, not a practical one. In reality, transfers of that size will fail on devices that don't have enough memory.</p> + +<p>Additionally, ArrayBuffer send and receive support for binary data has been implemented.</p> + +<p>Starting in Gecko 11.0, the WebSocket API is no longer prefixed.</p> + +<div class="warning"><strong>Warning:</strong> Among other things, a key reason WebSockets was disabled by default in Firefox 4 and 5 is the discovery of a <a class="external" href="http://www.ietf.org/mail-archive/web/hybi/current/msg04744.html" title="http://www.ietf.org/mail-archive/web/hybi/current/msg04744.html">security issue in the protocol's design</a>. This was fixed in Firefox 6 by implementing a newer version of the protocol that corrects the problem.</div> + +<div>{{HTML5ArticleTOC}}</div> diff --git a/files/it/web/api/websockets_api/writing_websocket_client_applications/index.html b/files/it/web/api/websockets_api/writing_websocket_client_applications/index.html new file mode 100644 index 0000000000..c7c45a3ecc --- /dev/null +++ b/files/it/web/api/websockets_api/writing_websocket_client_applications/index.html @@ -0,0 +1,185 @@ +--- +title: Writing WebSocket client applications +slug: Web/API/WebSockets_API/Writing_WebSocket_client_applications +tags: + - WebSocket +translation_of: Web/API/WebSockets_API/Writing_WebSocket_client_applications +original_slug: WebSockets/Writing_WebSocket_client_applications +--- +<p><span style="line-height: 1.5;">WebSockets è una tecnologia, basata sul protocollo ws, che rende possibile stabilire una connessione continua tra un client e un server. Un client websocket può essere il browser dell'utente, ma il protocollo è indipendente dalla piattaforma, così com'è indipendente il protocollo <code>http</code>.</span></p> + +<div class="note"><strong>Note:</strong> Abbiamo un esempio funzionante di un sistema chat/server utilizzato per gli snippet di codice che saranno resi disponibili una volta che la nostra infrastruttura sarà pronta per ospitare gli esempi di WebSocket propriamente.</div> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Creare_un_oggetto_WebSocket">Creare un oggetto WebSocket</h2> + +<p>Per rendere possibile la comunicazione utilizzando il protocollo WebSocket avrai bisogno di creare un oggetto <a href="/en/WebSockets/WebSockets_reference/WebSocket">WebSocket</a>; questo proverà automaticamente a connettersi con il server.</p> + +<p>Il costruttore del WebSocket accetta due parametri, di cui il secondo opzionale:</p> + +<pre>WebSocket WebSocket( + in DOMString url, + in optional DOMString protocols +); +</pre> + +<dl> + <dt><code>url</code></dt> + <dd>Lo URL a cui connettersi, questo dovrebbe essere lo URL al quale il server WebSocket risponderà.</dd> + <dt><code>protocols</code> {{ optional_inline() }}</dt> + <dd>Una stringa con un singolo protocollo o un array di stringhe di protocolli. Queste stringhe sono utilizzate per indicare i sotto protocolli così che il singolo server possa implementare più sotto protocolli WebSocket (per esempio, potresti volere che un server sia capace di gestire diversi tipi di interazioni dipendentemente dal protocollo specificato). Se non specifighi il protocollo, verrà usata una stringa vuota.</dd> +</dl> + +<p>Il costruttore può lanciare un eccezione:</p> + +<dl> + <dt><code>SECURITY_ERR</code></dt> + <dd>La porta a cui la connessione sta provado ad accedere è bloccata.</dd> +</dl> + +<dl> +</dl> + +<h3 id="Errori_di_connessione">Errori di connessione</h3> + +<p>Se accade un errore durante un tentativo di connessione, prima un semplice evento con il nome "error" è inviato all'oggetto <code><a href="/en/WebSockets/WebSockets_reference/WebSocket">WebSocket</a></code> (invocando così il suo gestore <code>onerror</code>), e poi <code><a href="/en/WebSockets/WebSockets_reference/CloseEvent">CloseEvent</a></code> (invocando così il gestore <code>onclose</code>) per indicare la ragione della chiusura di connessione.</p> + +<p>Da Firefox 11 tuttavia, è tipico ricevere un errore descrittivo nella console della piattaforma Mozilla e un codice di chiusura definito in <a href="http://tools.ietf.org/html/rfc6455#section-7.4">RFC 6455, Section 7.4 </a>attraverso <a href="/en/WebSockets/WebSockets_reference/CloseEvent">CloseEvent</a>.</p> + +<h3 id="Esempi">Esempi</h3> + +<p>Questo semplice esempio crea un nuovo WebSocket, connettendosi al server all'indirizzo <code><span class="nowiki">ws://www.example.com/socketserver</span></code>. Un protocollo chiamato "protocolOne" è presente nella richiesta per il socket in esempio anche se omesso.</p> + +<pre class="brush: js">var esempioSocket = new WebSocket("ws://www.example.com/socketserver", "protocolOne"); +</pre> + +<p>Alla restituzione, <code>esempioSocket.readyState</code> è <code>CONNECTING</code>. Il <code>readyState</code> diventerà <code>OPEN</code> quando la connessione sarà abilitata a trasmettere dati.</p> + +<p>Se vuoi aprire una connessione e essere flessibile sui protocolli che supporti, puoi specificare un array di protocolli:</p> + +<pre class="brush: js">var esempioSocket = new WebSocket("ws://www.example.com/socketserver", ["protocolOne", "protocolTwo"]); +</pre> + +<p>Quando la connessione è stabilita (quindi <code>readyState</code> è <code>OPEN</code>), <code>esempioSocket.protocol</code> ti dirà quale protocollo il server ha selezionato.</p> + +<p>Negli esempi qui sopra, <code>ws</code> sostituisce <code>http</code>, così come <code>wss </code>sostituisce <code>https</code>. Per stabilire un <code>WebSocket</code> ci si basa sul <a href="/en-US/docs/Web/HTTP/Protocol_upgrade_mechanism">meccanismo di upgrade HTTP</a>, così la richiesta per l'aggiornamento del protocollo è implicita quando richiamiamo il server HTTP come <code>ws://www.example.com</code> oppure <code>wss://www.example.com</code>.</p> + +<h2 id="Inviare_dati_al_server">Inviare dati al server</h2> + +<p>Una volta stabilita la connessione puoi trasmettere dati al server. Per farlo, chiama il metodo <code><a href="/en/WebSockets/WebSockets_reference/WebSocket#send()">send()</a> </code>dell'oggetto WebSocket per ogni messaggio che vuoi inviare:</p> + +<pre class="brush: js">esempioSocket.send("Ecco del testo che il server sta aspettando di ricevere!"); +</pre> + +<p>Puoi inviare dati come una stringa, {{ domxref("Blob") }} o un <code><a href="/en/JavaScript_typed_arrays/ArrayBuffer">ArrayBuffer</a></code>.</p> + +<div class="note"><strong>Note:</strong> Prima della versione 11, Firefox supportava solamente l'invio di dati come stringa.</div> + +<p>Stabilire una connessione è un'operazione di natura asincrona e quindi incline a errori. Chiamare il metodo <code>send() </code>immediatamente dopo la creazione del <code>WebSocket</code> non ne implica il successo. Possiamo assicurarci che l'invio di dati venga fatto dopo l'avvenuta connessione con un gestore <code>onopen</code>:</p> + +<pre class="brush: js">esempioSocket.onopen = function (event) { + esempioSocket.send("Ecco del testo che il server sta aspettando di ricevere!"); +}; +</pre> + +<h3 id="Usare_JSON_per_trasmettere_oggetti">Usare JSON per trasmettere oggetti</h3> + +<p>Una cosa utile che puoi fare è di utilizzare <a href="/en/JSON">JSON</a> per inviare dati ragionevolmente complessi al server. Per esempio, un programma di chat puoi interagire con il server utilizzando pacchetti di dati JSON-incapsulati:</p> + +<pre class="brush: js">// Invia del testo a tutti gli utenti tramite il server +function sendText() { + // Costruisci un oggetto msg contenente i dati di cui il server ha bisogno per processare il messaggio dalla chat del client. + var msg = { + type: "message", + text: document.getElementById("text").value, + id: clientID, + date: Date.now() + }; + + // Invia l'oggetto msg formattato come una stringa JSON. + esempioSocket.send(JSON.stringify(msg)); + + // Togli il testo dall'elemento di input, pronto a ricevere la prossima linea di testo dall'utente. + document.getElementById("text").value = ""; +} +</pre> + +<h2 id="Ricevere_messaggi_dal_server">Ricevere messaggi dal server</h2> + +<p>WebSockets è una API dipendente dagli eventi; quando i messaggi sono ricevuti, un evento "message" è inviato alla funzione <code>onmessage</code>. Per iniziare a ascoltare per la ricezione di dati puoi fare così:</p> + +<pre class="brush: js">esempioSocket.onmessage = function (event) { + console.log(event.data); +} +</pre> + +<h3 id="Ricevere_e_interpretare_oggetti_JSON">Ricevere e interpretare oggetti JSON</h3> + +<p>Prendiamo in considerazione l'applicazione chat sul client richiamata precedentemente in {{ anch("Usare JSON per trasmettere oggetti") }}. Ci sono diversi tipi di pacchetti di dati che il client potrebbe ricevere, come:</p> + +<ul> + <li>Login handshake</li> + <li>Messaggio di testo</li> + <li>Aggiornamenti lista utenti</li> +</ul> + +<p>Il codice che interpreta questi messaggi in arrivo potrebbe assomigliare a questo:</p> + +<pre class="brush: js">esempioSocket.onmessage = function(event) { + var f = document.getElementById("chatbox").contentDocument; + var text = ""; + var msg = JSON.parse(event.data); + var time = new Date(msg.date); + var timeStr = time.toLocaleTimeString(); + + switch(msg.type) { + case "id": + clientID = msg.id; + setUsername(); + break; + case "username": + text = "<b>User <em>" + msg.name + "</em> signed in at " + timeStr + "</b><br>"; + break; + case "message": + text = "(" + timeStr + ") <b>" + msg.name + "</b>: " + msg.text + "<br>"; + break; + case "rejectusername": + text = "<b>Your username has been set to <em>" + msg.name + "</em> because the name you chose is in use.</b><br>" + break; + case "userlist": + var ul = ""; + for (i=0; i < msg.users.length; i++) { + ul += msg.users[i] + "<br>"; + } + document.getElementById("userlistbox").innerHTML = ul; + break; + } + + if (text.length) { + f.write(text); + document.getElementById("chatbox").contentWindow.scrollByPages(1); + } +}; +</pre> + +<p>Qui utilizziamo<code><a href="/en/JavaScript/Reference/Global_Objects/JSON/parse"> JSON.parse() </a></code>per convertire l'oggetto JSON all'oggetto originale, poi esaminiamo e agiamo sui suoi contenuti.</p> + +<h3 id="Formato_dati_testo">Formato dati testo</h3> + +<p>Il testo ricevuto attraverso una connessione WebSocket è in formato UTF-8.</p> + +<p>Prima di Gecko 9.0 {{ geckoRelease("9.0") }}, alcuni non-caratteri in UTF-8 valido causavano la chiusura della connessione. Adesso Gecko permette questi valori.</p> + +<h2 id="Chiudere_la_connessione">Chiudere la connessione</h2> + +<p>Quando hai finito di usare la connessione WebSocket, chiama il metodo <code><a href="/en/WebSockets/WebSockets_reference/WebSocket#close()">close() </a></code>del WebSocket:</p> + +<pre class="brush: js">esempioSocket.close(); +</pre> + +<p>Potrebbe essere utile esaminare l'attributo<code> bufferedAmount </code>prima di provare a chiudere la connessione per assicurarsi che non ci siano dati che devono essere ancora trasmessi al network.</p> + +<h2 id="Considerazioni_di_sicurezza">Considerazioni di sicurezza</h2> + +<p>I WebSockets non dovrebbero essere usati in un ambiente di contenuti misti; non dovresti aprire connessioni non sicure da una pagina che carica attraverso HTTPS o viceversa. Alcuni browser lo vietano esplicitamente, compreso Firefox 8 e superiore.</p> diff --git a/files/it/web/events/domcontentloaded/index.html b/files/it/web/api/window/domcontentloaded_event/index.html index 9b2cf7467e..1c25d3d6c5 100644 --- a/files/it/web/events/domcontentloaded/index.html +++ b/files/it/web/api/window/domcontentloaded_event/index.html @@ -1,12 +1,13 @@ --- title: DOMContentLoaded event -slug: Web/Events/DOMContentLoaded +slug: Web/API/Window/DOMContentLoaded_event tags: - Evento - Referenza - Web - eventi translation_of: Web/API/Window/DOMContentLoaded_event +original_slug: Web/Events/DOMContentLoaded --- <div>{{APIRef}}</div> diff --git a/files/it/web/api/window/find/index.html b/files/it/web/api/window/find/index.html new file mode 100644 index 0000000000..77a6a49092 --- /dev/null +++ b/files/it/web/api/window/find/index.html @@ -0,0 +1,33 @@ +--- +title: window.find +slug: Web/API/Window/find +tags: + - DOM + - DOM0 + - Gecko + - Gecko DOM Reference +translation_of: Web/API/Window/find +original_slug: window.find +--- +<p>{{ ApiRef() }}</p> +<h3 id="Summary" name="Summary">Sommario</h3> +<p>Trova una stringa in una finestra.</p> +<h3 id="Syntax" name="Syntax">Sintassi</h3> +<pre class="eval"><em>window</em>.find(<em>aString</em>, <em>aCaseSensitive</em>, <em>aBackwards</em>, <em>aWrapAround</em>, + <em>aWholeWord</em>, <em>aSearchInFrames</em>, <em>aShowDialog</em>); +</pre> +<ul> + <li>aString: La stringa di testo da cercare.</li> + <li>aCaseSensitive: Booleano. Se true, imposta la ricerca a case-sensitive.</li> + <li>aBackwards: Booleano. Se true, imposta la ricerca al contrario.</li> + <li>aWrapAround: Booleano. If true, specifies a wrap around search.</li> + <li>aWholeWord: Boolean. Se true, imposta la ricerca solo su parole intere.</li> + <li>aSearchInFrames: Booleano. Se true, attiva la ricerca nei frames.</li> + <li>aShowDialog: Boolean. Se true, mostra una finestra di dialogo per la ricerca.</li> +</ul> +<h3 id="Returns" name="Returns">Returns</h3> +<p>true if the string is found; otherwise, false.</p> +<h3 id="Example" name="Example">Esempio</h3> +<h3 id="Notes" name="Notes">Note</h3> +<h3 id="Specification" name="Specification">Specifiche</h3> +<p>{{ DOM0() }} This was added by with {{ Bug(9550) }}.</p> diff --git a/files/it/web/events/load/index.html b/files/it/web/api/window/load_event/index.html index 2939f32c27..145b79e867 100644 --- a/files/it/web/events/load/index.html +++ b/files/it/web/api/window/load_event/index.html @@ -1,10 +1,11 @@ --- title: load -slug: Web/Events/load +slug: Web/API/Window/load_event tags: - CompatibilitàBrowser - Evento translation_of: Web/API/Window/load_event +original_slug: Web/Events/load --- <p>L'evento <strong><code>load</code></strong> si attiva quando una risorsa e le sue risorse dipendenti hanno completato il caricamento.</p> diff --git a/files/it/web/api/windowtimers/clearinterval/index.html b/files/it/web/api/windoworworkerglobalscope/clearinterval/index.html index 63b0682983..952361f23b 100644 --- a/files/it/web/api/windowtimers/clearinterval/index.html +++ b/files/it/web/api/windoworworkerglobalscope/clearinterval/index.html @@ -1,7 +1,8 @@ --- title: WindowTimers.clearInterval() -slug: Web/API/WindowTimers/clearInterval +slug: Web/API/WindowOrWorkerGlobalScope/clearInterval translation_of: Web/API/WindowOrWorkerGlobalScope/clearInterval +original_slug: Web/API/WindowTimers/clearInterval --- <div> <div>{{APIRef("HTML DOM")}}</div> diff --git a/files/it/web/api/windowtimers/index.html b/files/it/web/api/windowtimers/index.html deleted file mode 100644 index ce963ed81e..0000000000 --- a/files/it/web/api/windowtimers/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: WindowTimers -slug: Web/API/WindowTimers -tags: - - API - - HTML-DOM - - Interface - - NeedsTranslation - - Reference - - TopicStub - - Workers -translation_of: Web/API/WindowOrWorkerGlobalScope -translation_of_original: 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/web/api/xmlhttprequest/usare_xmlhttprequest/index.html b/files/it/web/api/xmlhttprequest/using_xmlhttprequest/index.html index 4f55ac07ff..ced11585b7 100644 --- a/files/it/web/api/xmlhttprequest/usare_xmlhttprequest/index.html +++ b/files/it/web/api/xmlhttprequest/using_xmlhttprequest/index.html @@ -1,7 +1,8 @@ --- title: Usare XMLHttpRequest -slug: Web/API/XMLHttpRequest/Usare_XMLHttpRequest +slug: Web/API/XMLHttpRequest/Using_XMLHttpRequest translation_of: Web/API/XMLHttpRequest/Using_XMLHttpRequest +original_slug: Web/API/XMLHttpRequest/Usare_XMLHttpRequest --- <p>Per inviare una richiesta HTTP, crea un oggetto {{domxref("XMLHttpRequest")}}, apri un URL, ed invia la richiesta. Dopo che la transazione è completata, l'oggetto conterrà informazioni utili come il testo di risposta e lo <a href="/en-US/docs/HTTP/HTTP_response_codes" title="HTTP response codes">stato HTTP</a>. Questa pagina illustra alcuni dei più comuni e oscuri casi d'uso di questo potente oggetto <code>XMLHttpRequest</code>.</p> diff --git a/files/it/web/css/selettore_figli_diretti/index.html b/files/it/web/css/child_combinator/index.html index cf2903dbc9..0a7db4d019 100644 --- a/files/it/web/css/selettore_figli_diretti/index.html +++ b/files/it/web/css/child_combinator/index.html @@ -1,10 +1,11 @@ --- title: Selettore di Figli Diretti -slug: Web/CSS/selettore_figli_diretti +slug: Web/CSS/Child_combinator tags: - compinatori css - selettore di figli diretti translation_of: Web/CSS/Child_combinator +original_slug: Web/CSS/selettore_figli_diretti --- <div>{{CSSRef("Selectors")}}</div> diff --git a/files/it/web/css/cursor/usare_valori_url_per_la_proprietà_cursor/index.html b/files/it/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html index 772fa80e13..d475f40ea1 100644 --- a/files/it/web/css/cursor/usare_valori_url_per_la_proprietà_cursor/index.html +++ b/files/it/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html @@ -1,12 +1,13 @@ --- title: Usare valori URL per la proprietà cursor -slug: Web/CSS/cursor/Usare_valori_URL_per_la_proprietà_cursor +slug: Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property tags: - CSS - CSS_2.1 - Sviluppo_Web - Tutte_le_categorie translation_of: Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property +original_slug: Web/CSS/cursor/Usare_valori_URL_per_la_proprietà_cursor --- <p> </p> <p><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..</p> diff --git a/files/it/web/css/css_columns/using_multi-column_layouts/index.html b/files/it/web/css/css_columns/using_multi-column_layouts/index.html new file mode 100644 index 0000000000..413605bf13 --- /dev/null +++ b/files/it/web/css/css_columns/using_multi-column_layouts/index.html @@ -0,0 +1,68 @@ +--- +title: Le Colonne nei CSS3 +slug: Web/CSS/CSS_Columns/Using_multi-column_layouts +tags: + - CSS + - CSS_3 + - Tutte_le_categorie +translation_of: Web/CSS/CSS_Columns/Using_multi-column_layouts +original_slug: Le_Colonne_nei_CSS3 +--- +<p> +</p> +<h3 id="Introduzione" name="Introduzione"> Introduzione </h3> +<p>Testi con righe troppo lunghe non sono facilmente leggibili; se ci vuole troppo tempo per muovere l'occhio dalla fine di una riga all'inizio della successiva, si tende a perdere traccia della linea corrente. Perciò, per ottimizzare l'utilizzo di schermi particolarmente larghi, gli autori devono affidarsi a colonne di testo multiple, posizionate l'una accanto all'altra, come nei quotidiani. Sfortunatamente questo è impossibile da gestire con CSS e HTML, senza imporre a priori la fine di una colonna, restringere pesantemente i marcatori utilizzabili o usare script particolarmente complicati. +</p><p><a class="external" href="http://www.w3.org/TR/css3-multicol/">Una specifica CSS3 preliminare</a> suggerisce l'utilizzo di alcune nuove proprietà CSS per implementare questa funzionalità. Da Firefox 1.5 sono state implementate alcune di queste proprietà, in modo da ottenere il comportamento descritto nella bozza preliminare (con una eccezione descritta sotto). +</p><p>Il <a class="external" href="http://weblogs.mozillazine.org/roc/">blog di Robert O'Callahan</a> utilizza le colonne CSS; provatele con Firefox 1.5 o successivi. +</p> +<h3 id="Usare_le_colonne" name="Usare_le_colonne"> Usare le colonne </h3> +<h4 id="Numero_di_colonne_e_Larghezza" name="Numero_di_colonne_e_Larghezza"> Numero di colonne e Larghezza </h4> +<p>Due sono le proprietà CSS che controllano se devono essere utilizzate le colonne e quante: <code>-moz-column-count</code> and <code>-moz-column-width</code>. +</p><p><code>-moz-column-count</code> imposta il numero di colonne. Per esempio, +</p> +<pre><div style="-moz-column-count:2">In preparation for the release of Mozilla +Firefox 1.5 Beta 1, the tree will be locked down tonight at 11:59pm Pacific +Daylight Time (UTC -0700). After this point, no more checkins will be accepted +for Firefox 1.5 Beta 1, which is set for release on Thursday.</div> +</pre> +<p>Mostrerà il contenuto in due colonne (se state usando Firefox 1.5 o successivi): +</p> +<div style="">In preparation for the release of Mozilla Firefox 1.5 Beta 1, the tree will be locked down tonight at 11:59pm Pacific Daylight Time (UTC -0700). After this point, no more checkins will be accepted for Firefox 1.5 Beta 1, which is set for release on Thursday.</div> +<p><code>-moz-column-width</code> imposta la larghezza minima della colonna. Se <code>-moz-column-count</code> non viene impostato, il browser cercherà di posizionare quante più colonne possibili nella larghezza disponibile. +</p> +<pre><div style="-moz-column-width:20em;">In preparation for the release of Mozilla +Firefox 1.5 Beta 1, the tree will be locked down tonight at 11:59pm Pacific +Daylight Time (UTC -0700). After this point, no more checkins will be accepted +for Firefox 1.5 Beta 1, which is set for release on Thursday.</div> +</pre> +<p>diventa: +</p> +<div style="-moz-column-width: 20em;">In preparation for the release of Mozilla Firefox 1.5 Beta 1, the tree will be locked down tonight at 11:59pm Pacific Daylight Time (UTC -0700). After this point, no more checkins will be accepted for Firefox 1.5 Beta 1, which is set for release on Thursday.</div> +<p>Maggiori dettagli sono descritti nella <a class="external" href="http://www.w3.org/TR/2001/WD-css3-multicol-20010118">Bozza preliminare CSS3</a>. +</p><p>In un blocco multi-colonna, il contenuto viene automaticamente fatto scorrere da una colonna in quella successiva secondo quanto necessario. Tutte le funzionalità HTML, CSS e DOM, come la modifica e la stampa, sono supportate dalla modalità a colonne. +</p> +<h4 id="Bilanciamento_dell.27altezza" name="Bilanciamento_dell.27altezza"> Bilanciamento dell'altezza </h4> +<p>La bozza preliminare CSS3 specifica che l'altezza delle colonne deve essere bilanciata: cioè, il browser imposterà automaticamente la massima altezza delle colonne, tale che il contenuto in ogni colonna abbia altezza approssimativamente uguale. Firefox lo fa. +</p><p>Tuttavia, in alcune situazione può essere utile impostare esplicitamente la massima altezza delle colonne, e quindi riempire tante colonne quante sono necessarie, partendo dalla prima e andando verso destra. Per esempio, gli articoli su <a class=" external" href="http://iht.com/" rel="freelink">http://iht.com/</a> lo fanno (però usando uno script). Quindi si estende la specifica preliminare in modo che, se la proprietà CSS <code>height</code> è impostata per un blocco multicolonna, ad ogni colonna sarà permesso di crescere al massimo sino a quel valore di altezza, dopo di che una nuova colonna dovrà essere aggiunta. Questo metodo risulta anche molto più efficiente nel definire il layout. +</p> +<h4 id="Distanza_tra_colonne" name="Distanza_tra_colonne"> Distanza tra colonne </h4> +<p>Normalmente ciascuna colonna è adiacente all'altra, ma di solito il risultato non è ottimale. E' possibile utilizzare la proprietà CSS padding tra le colonne per migliorare il risultato finale, oppure più semplicemente basta utilizzare la proprietà <code>-moz-column-gap</code> con il bloccomulticolonna: +</p> +<pre><div style="-moz-column-width:20em; -moz-column-gap:2em;">In preparation for +the release of Mozilla Firefox 1.5 Beta 1, the tree will be locked down tonight +at 11:59pm Pacific Daylight Time (UTC -0700). After this point, no more checkins +will be accepted for Firefox 1.5 Beta 1, which is set for release on +Thursday.</div> +</pre> +<div style="-moz-column-width: 20em;">In preparation for the release of Mozilla Firefox 1.5 Beta 1, the tree will be locked down tonight at 11:59pm Pacific Daylight Time (UTC -0700). After this point, no more checkins will be accepted for Firefox 1.5 Beta 1, which is set for release on Thursday.</div> +<h4 id="Degradazione" name="Degradazione"> Degradazione </h4> +<p>Le proprietà -moz-column saranno semplicemente ignorate da browser che non supportano le colonne. Perciò è relativamente semplice creare un layout che mostri una singola colonna nei browser che non supportano questa funzionalità e che risulti invece multicolonna su Firefox 1.5 e successivi. +</p> +<h3 id="Conclusione" name="Conclusione"> Conclusione </h3> +<p>Le colonne in CSS3 sono una nuova primitiva di layout che aiuterà gli sviluppatori Web a fare un uso migliore dello spazio sullo schermo. Gli sviluppatori più creativi troveranno molti modi di usarli, specialmente con la caratteristica di bilanciamento dell'altezza. +</p><p><br> +</p> +<h3 id="Riferimenti_Addizionali" name="Riferimenti_Addizionali"> Riferimenti Addizionali </h3> +<ul><li> <a class=" external" href="http://weblogs.mozillazine.org/roc/archives/2005/03/gecko_18_for_we.html" rel="freelink">http://weblogs.mozillazine.org/roc/a...18_for_we.html</a> +</li></ul> +{{ languages( { "en": "en/CSS3_Columns", "es": "es/Columnas_con_CSS-3", "fr": "fr/Colonnes_CSS3", "it": "it/Le_Colonne_nei_CSS3", "ko": "ko/CSS3_Columns", "pl": "pl/Kolumny_CSS3" } ) }} diff --git a/files/it/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html b/files/it/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html index e03a676320..8908feb99c 100644 --- a/files/it/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html +++ b/files/it/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html @@ -1,8 +1,9 @@ --- title: Using CSS flexible boxes -slug: Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes +slug: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox translation_of_original: Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes +original_slug: Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes --- <div>{{CSSRef}}</div> diff --git a/files/it/web/css/css_lists_and_counters/consistent_list_indentation/index.html b/files/it/web/css/css_lists_and_counters/consistent_list_indentation/index.html new file mode 100644 index 0000000000..0a8f6374a2 --- /dev/null +++ b/files/it/web/css/css_lists_and_counters/consistent_list_indentation/index.html @@ -0,0 +1,107 @@ +--- +title: Indentazione corretta delle liste +slug: Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation +tags: + - CSS + - Tutte_le_categorie +translation_of: Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation +original_slug: Indentazione_corretta_delle_liste +--- +<p> </p> + +<p><span class="comment">Summary: Trying to change the indentation of lists with CSS is trickier than it looks, but only because CSS-conformant browsers took different paths to default indentation. Find out how to get them all in line.</span></p> + +<p>Una delle più frequenti modifiche allo stile delle liste, è la distanza di indentazione, cioè la distanza alla quale i vari punti sono spostati rispetto al bordo. Questa modifica è spesso causa di frustrazione, perchè ciò che funziona in un browser spesso non ha lo stesso effetto in un altro. Per esempio se si dichiarano liste senza margine sinistro, in Explorer si osserva uno spostamento, mentre nei browser basati su Gecko nessuno.</p> + +<p>Per compredere questo fenomeno, e sorpattutto come evitare il problema, è necessario esaminare in dettaglio come sono costruite le liste.</p> + +<h3 id="Costruire_una_lista" name="Costruire_una_lista">Costruire una lista</h3> + +<p>Prima di tutto, si consideri un singolo elemento di una lista, senza marcatore (tipicamente il "puntino" che lo precede), che non è ancora parte della lista stessa. Fluttua da solo nel vuoto, senza nessun attributo, come mostrato in Figura 1.</p> + +<p><img alt="Figure 1"></p> + +<p>Il bordo punteggiato rosso rappresenta i limiti esterni dell'area dei contenuti dell'elemento della lista. Si ricordi che, in questo momento, l'elemento della lista non ha ne' bordi ne' rientri (padding). Se si aggiungono due altri elementi alla lista, si ottiene il risultato di Figura 2. add two more list items, we get a result like that shown in Figure 2.</p> + +<p><img alt="Figure 2"></p> + +<p>Adesso inseriamo questi elementi nell'elemento padre; per questo esempiop useremo una lista non ordinata (cioè <code><ul></code>). Secondo il modello a scatole dei CSS (CSS box model), l'area occupata da ciascun elemento della lista, deve essere visualizzata all'interno dell'area dei contenuti dell'elemento padre. E poichè l'elemento padre non ha ancora ne' bordi ne' rientri, si ottiene il risultato di Figura 3.</p> + +<p><img alt="Figure 3"></p> + +<p>Il bordo punteggiato blu mostra i bordi dell'area dei contenuti dell'elemento <code><ul></code>, che non avendo rientri finisce per avvolgere i tre elementi della lista senza lasciare spazi.</p> + +<p>Adesso aggiungiamo i marcatori degli elementi, che nel caso di una lista non ordinata sono tipicamente dei "puntini" circolari, come mostrato in Figura 4.</p> + +<p><img alt="Figure 4"></p> + +<p>Visivamente i marcatori sono all'esterno dell'area dei contenuti di <code><ul></code>, ma questo non è molto importante. Il punto chiave è che i marcatori sono all'esterno del riquadro principale degli elementi <code><li></code>, non di <code><ul></code>. Sono da considerare una sorta di appendici agli elementi della lista, appese all'esterno dell'area degli elementi <code><li></code>, ma ad essi collegate.</p> + +<p>Questa è la ragione per cui, in ogni browser eccetto Internet Explorer, i marcatori sono posizionati all'esterno del bordo eventualmente impostato per gli elementi <code><li></code>. Si assume che il valore di <code>list-style-position</code> sia <code>outside</code>, perchè se viene cambiato in <code>inside</code>, i marcatori sono spostati all'interno dei riquadri degli elementi <code><li></code>, proprio come se fossero la primissima parte del loro contenuto.</p> + +<h3 id="Indentare_due_volte" name="Indentare_due_volte">Indentare due volte</h3> + +<p>Quindi come appare tutto ciò in un documento? Al momento, si ha una situazione analoga a questi stili:</p> + +<pre>ul, li {margin-left: 0; padding-left: 0;}</pre> + +<p>Se avessimo messo questa lista così come è, in un documento, non ci sarebbe stato nessuna apparente indentazione ed i marcatori sarebbero probabilmente finiti all'esterno del bordo sinistro del browser. Per evitare tutto ciò ed avere l'indentazione, ci sono solamente tre opzioni disponibili per gli sviluppatori.</p> + +<ol> + <li>Dare a ciascun elemento <code><li></code> un margine sinistro.</li> + <li>Dare all'elemento <code><ul></code> un margine sinistro.</li> + <li>Dare all'elemento <code><ul></code> un rientro (padding) sinistro.</li> +</ol> + +<p>Di fatto nessuno sembra aver usato la prima opzione. La seconda opzione è stata utilizzata da Internet Explorer e da Opera. La terza è stata adottata da Gecko e da tutti i browser basati su tale motore.</p> + +<p>Concentriamoci sulle due opzioni usate. In Internet Explorer e Opera, le liste sono indentate imponendo un margine sinistro di 40 pixel sull'elemento <code><ul></code>. Se si applica un colore di sfondo a <code><ul></code> lasciando inalterati i bordi, si ottiene il risultato di Figura 5.</p> + +<p><img alt="Figure 5"></p> + +<p>Gecko da parte sua impone un rientro (padding) di 40 pixel per l'elemento <code><ul></code>, per cui visualizzando la lista con lo stesso identico stile usato per la precedente figura, si ottiene il risultato di Figura 6.</p> + +<p><img alt="Figure 6"></p> + +<p>Come è possibile notare, i marcatori rimangono attaccati agli elementi <code><li></code>, ovunque essi siano. La differenza è interamente nello stile di <code><ul></code>, per cui è possibile notare le differenze solo con un colore di sfondo per <code><ul></code>.</p> + +<h3 id="Trovare_la_consistenza" name="Trovare_la_consistenza">Trovare la consistenza</h3> + +<p>Tirando le fila di quanto detto: se si desidera una visualizzazione omogenea e consistente delle liste su Gecko, Internet Explore e Opera, occorre impostare a <strong>entrambi</strong> i margini ed i rientri sinistri degli elementi <code><ul></code>. Possiamo invece ignorare gli elementi <code><li></code>. Se si desidera riprodurre la visualizzazione di default in Netscape 6.x, occorre scrivere:</p> + +<pre>ul {margin-left: 0; padding-left: 40px;}</pre> + +<p>Se invece siamo interessati a seguire ilmodello di Explorer/Opera:</p> + +<pre>ul {margin-left: 40px; padding-left: 0;}</pre> + +<p>Ovviamente, è possibile modifcare i valori utilizzati secondo le proprie necessità, anche in unità di misura diverse dal pixel, come <code>1.25em</code>. Se invece si desidera non avere nessuna indentazione, occorre impostare a zero margine e rientro:</p> + +<pre>ul {margin-left: 0; padding-left: 0;}</pre> + +<p>Si ricordi comunque, che facendo così si hanno i "puntini" appesi all'esterno della lista e del relativo elemento padre, per cui se l'elemento padre è il <code>body</code>, è molto probabile che i "puntini" finiscano all'esterno della finestra del browser, quindi non visibili.</p> + +<h3 id="Conclusione" name="Conclusione">Conclusione</h3> + +<p>In conclusione, nessuno dei browser mezionati in questo articolo fa la cosa giusta o quella sbagliata su come disegnano le liste. Utilizzano stili differenti, ed è questo che crea problemi. Tuttavia assicurandosi di impostare sia margine che rientro sinistro delle liste, si ottiene un risultato di indentazione delle liste quanto più possibile omogeneo tra i vari browser.</p> + +<h3 id="Raccomandazioni" name="Raccomandazioni">Raccomandazioni</h3> + +<ul> + <li>Quando si altera l'indentazione delle liste, assicurarsi di impostare sia margine che rientro (padding)</li> +</ul> + +<p> </p> + +<div class="originaldocinfo"> +<h3 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h3> + +<ul> + <li>Author(s): Eric A. Meyer, Netscape Communications</li> + <li>Last Updated Date: Published 30 Aug 2002</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> + +<p>{{ languages( { "fr": "fr/Indentation_homog\u00e8ne_des_listes" } ) }}</p> diff --git a/files/it/web/css/-moz-font-language-override/index.html b/files/it/web/css/font-language-override/index.html index 069e77cfe1..769d7404ce 100644 --- a/files/it/web/css/-moz-font-language-override/index.html +++ b/files/it/web/css/font-language-override/index.html @@ -1,7 +1,8 @@ --- title: '-moz-font-language-override' -slug: Web/CSS/-moz-font-language-override +slug: Web/CSS/font-language-override translation_of: Web/CSS/font-language-override translation_of_original: Web/CSS/-moz-font-language-override +original_slug: Web/CSS/-moz-font-language-override --- <h2 id="*_html_body_div_p_font-Zawgyi-One_!_important">* , html, body, div, p { font-Zawgyi-One ! important; }</h2> diff --git a/files/it/web/css/ricette_layout/index.html b/files/it/web/css/layout_cookbook/index.html index bbdee7472e..da70d9d7b4 100644 --- a/files/it/web/css/ricette_layout/index.html +++ b/files/it/web/css/layout_cookbook/index.html @@ -1,7 +1,8 @@ --- title: Ricette per layout in CSS -slug: Web/CSS/Ricette_layout +slug: Web/CSS/Layout_cookbook translation_of: Web/CSS/Layout_cookbook +original_slug: Web/CSS/Ricette_layout --- <div>{{CSSRef}}</div> diff --git a/files/it/web/css/guida_di_riferimento_ai_css/index.html b/files/it/web/css/reference/index.html index c97a962ac6..466cff2f4c 100644 --- a/files/it/web/css/guida_di_riferimento_ai_css/index.html +++ b/files/it/web/css/reference/index.html @@ -1,12 +1,13 @@ --- title: Guida di riferimento ai CSS -slug: Web/CSS/Guida_di_riferimento_ai_CSS +slug: Web/CSS/Reference tags: - CSS - Overview - Reference - - 'l10n:priority' + - l10n:priority translation_of: Web/CSS/Reference +original_slug: Web/CSS/Guida_di_riferimento_ai_CSS --- <div>{{CSSRef}}</div> diff --git a/files/it/web/esempi_di_tecnologie_web_open/index.html b/files/it/web/demos_of_open_web_technologies/index.html index 2244c73297..4ac0b50019 100644 --- a/files/it/web/esempi_di_tecnologie_web_open/index.html +++ b/files/it/web/demos_of_open_web_technologies/index.html @@ -1,7 +1,8 @@ --- title: Esempi di tecnologie web open -slug: Web/Esempi_di_tecnologie_web_open +slug: Web/Demos_of_open_web_technologies translation_of: Web/Demos_of_open_web_technologies +original_slug: Web/Esempi_di_tecnologie_web_open --- <p class="summary">Mozilla supporta un'ampia varietà di emozionanti tecnologie web open, e noi ne incoraggiamo l'uso. In questa pagina sono contenuti collegamenti a degli interessanti esempi di queste tecnologie.</p> diff --git a/files/it/web/guide/ajax/iniziare/index.html b/files/it/web/guide/ajax/getting_started/index.html index f473f64d1e..955354bbc3 100644 --- a/files/it/web/guide/ajax/iniziare/index.html +++ b/files/it/web/guide/ajax/getting_started/index.html @@ -1,10 +1,11 @@ --- title: Iniziare -slug: Web/Guide/AJAX/Iniziare +slug: Web/Guide/AJAX/Getting_Started tags: - AJAX - Tutte_le_categorie translation_of: Web/Guide/AJAX/Getting_Started +original_slug: Web/Guide/AJAX/Iniziare --- <p> </p> diff --git a/files/it/web/guide/css/index.html b/files/it/web/guide/css/index.html deleted file mode 100644 index 2bd34295c7..0000000000 --- a/files/it/web/guide/css/index.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: CSS developer guide -slug: Web/Guide/CSS -tags: - - CSS - - Guide - - Landing - - NeedsTranslation - - TopicStub -translation_of: Learn/CSS -translation_of_original: 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/web/guide/html/categorie_di_contenuto/index.html b/files/it/web/guide/html/content_categories/index.html index 94eae32320..4081ebbe76 100644 --- a/files/it/web/guide/html/categorie_di_contenuto/index.html +++ b/files/it/web/guide/html/content_categories/index.html @@ -1,7 +1,8 @@ --- title: Categorie di contenuto -slug: Web/Guide/HTML/Categorie_di_contenuto +slug: Web/Guide/HTML/Content_categories translation_of: Web/Guide/HTML/Content_categories +original_slug: Web/Guide/HTML/Categorie_di_contenuto --- <p>Ciascun elemento HTML deve rispettare le regole che definiscono che tipo di contenuto può avere. <span id="result_box" lang="it"><span class="hps">Queste regole sono</span> <span class="hps">raggruppate in</span> <span class="hps">modelli di contenuto</span> <span class="hps">comuni a</span> <span class="hps">diversi elementi</span><span>.</span></span> Ogni elemento HTML appartiene a nessuno, uno, o diversi modelli di contenuto, ognuno dei quali possiede regole che devono essere seguite in un documento conforme HTML.</p> diff --git a/files/it/web/html/html5/index.html b/files/it/web/guide/html/html5/index.html index be6fc91a82..6be662d4c2 100644 --- a/files/it/web/html/html5/index.html +++ b/files/it/web/guide/html/html5/index.html @@ -1,7 +1,8 @@ --- title: HTML5 -slug: Web/HTML/HTML5 +slug: Web/Guide/HTML/HTML5 translation_of: Web/Guide/HTML/HTML5 +original_slug: Web/HTML/HTML5 --- <p><span class="seoSummary"><strong>HTML5</strong> è l'ultima evoluzione dello standard che definisce <a href="/en-US/docs/HTML" title="HTML">HTML</a>. </span>Il termine rappresenta due concetti differenti:</p> diff --git a/files/it/web/html/html5/introduction_to_html5/index.html b/files/it/web/guide/html/html5/introduction_to_html5/index.html index 14fe305eb6..646636bee8 100644 --- a/files/it/web/html/html5/introduction_to_html5/index.html +++ b/files/it/web/guide/html/html5/introduction_to_html5/index.html @@ -1,7 +1,8 @@ --- title: Introduzione a HTML5 -slug: Web/HTML/HTML5/Introduction_to_HTML5 +slug: Web/Guide/HTML/HTML5/Introduction_to_HTML5 translation_of: Web/Guide/HTML/HTML5/Introduction_to_HTML5 +original_slug: Web/HTML/HTML5/Introduction_to_HTML5 --- <p><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/" title="http://www.whatwg.org/specs/web-apps/current-work/">HTML5</a> è la quinta revisione e l'ultima versione dello standard HTML. Propone nuove funzionalità che forniscono il supporto dei rich media, la creazione di applicazioni web in grado di interagire con l'utente, con i suoi dati locali e i servers, in maniera più facile ed efficiente di prima.</p> <p>Poiché HTML5 è ancora in fase di sviluppo, inevitabilmente ci saranno altre modifiche alle specifiche. Pertanto al momento non tutte le funzioni sono supportate da tutti i browser. Tuttavia Gecko, e per estensione Firefox, supporta HTML5 in maniera ottimale, e gli sviluppatori continuano a lavorare per supportare ancora più funzionalità. Gecko ha iniziato a supportare alcune funzionalità di HTML5 dalla versione 1.8.1. È possibile trovare un elenco di tutte le funzionalità HTML5 che Gecko supporta attualmente nella <a href="/it/HTML/HTML5" title="it/HTML/HTML5">pagina principale di HTML5</a>. Per informazioni dettagliate sul supporto degli altri browser delle funzionalità HTML5, fare riferimento al sito web <a class="external" href="http://caniuse.com/#cats=HTML5" title="http://caniuse.com/#cats=HTML5">CanIUse</a>.</p> diff --git a/files/it/web/html/sections_and_outlines_of_an_html5_document/index.html b/files/it/web/guide/html/using_html_sections_and_outlines/index.html index 822543a758..5864929a2c 100644 --- a/files/it/web/html/sections_and_outlines_of_an_html5_document/index.html +++ b/files/it/web/guide/html/using_html_sections_and_outlines/index.html @@ -1,7 +1,8 @@ --- title: Sezioni e Struttura di un Documento HTML5 -slug: Web/HTML/Sections_and_Outlines_of_an_HTML5_document +slug: Web/Guide/HTML/Using_HTML_sections_and_outlines translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines +original_slug: Web/HTML/Sections_and_Outlines_of_an_HTML5_document --- <p>La specifica HTML5 rende disponibili numerosi nuovi elementi agli sviluppatori, permettendo ad essi di descrivere la struttura di un documento web tramite una semantica standard. Questa pagina descrive i nuovi elementi e spiega come usarli per definire la struttura di qualsiasi documento.</p> <h2 id="Struttura_di_un_Documento_in_HTML_4">Struttura di un Documento in HTML 4</h2> diff --git a/files/it/web/guide/mobile/index.html b/files/it/web/guide/mobile/index.html new file mode 100644 index 0000000000..11f17242c7 --- /dev/null +++ b/files/it/web/guide/mobile/index.html @@ -0,0 +1,19 @@ +--- +title: Mobile Web development +slug: Web/Guide/Mobile +tags: + - Mobile + - NeedsTranslation + - TopicStub + - Web Development +translation_of: Web/Guide/Mobile +translation_of_original: Web_Development/Mobile +original_slug: Web_Development/Mobile +--- +<p>Developing web sites to be viewed on mobile devices requires approaches that ensure a web site works as well on mobile devices as it does on desktop browsers. The following articles describe some of these approaches.</p> +<ul> + <li><a class="vt-p" href="/en/Web_Development/Mobile/Mobile-friendliness" title="/en/Web_development/Mobile/Mobile-friendliness">What is mobile-friendliness?</a></li> + <li><a class="vt-p" href="/en/Web_Development/Mobile/Separate_sites" title="en/Web_development/Mobile/Separate sites">Separate sites</a></li> + <li><a class="vt-p" href="/en/Web_Development/Mobile/Responsive_design" title="/en/Web_development/Mobile/Responsive design">Responsive design</a></li> + <li><a class="vt-p" href="/en/Web_development/Mobile/A_hybrid_approach" title="A New Approach to Web Applications (external)">A hybrid approach</a></li> +</ul> diff --git a/files/it/web/guide/parsing_and_serializing_xml/index.html b/files/it/web/guide/parsing_and_serializing_xml/index.html new file mode 100644 index 0000000000..6cf10e3766 --- /dev/null +++ b/files/it/web/guide/parsing_and_serializing_xml/index.html @@ -0,0 +1,1194 @@ +--- +title: Costruire e decostruire un documento XML +slug: Web/Guide/Parsing_and_serializing_XML +translation_of: Web/Guide/Parsing_and_serializing_XML +original_slug: Costruire_e_decostruire_un_documento_XML +--- +<p>Quest'articolo si propone di fornire una guida esaustiva per l'uso di XML per mezzo Javascript. Esso si divide in due sezioni. Nella <a href="#Costruire_DOM" title="Costruire un albero DOM">prima sezione</a> verranno illustrati tutti i possibili metodi per costruire un albero DOM, nella <a href="#Decostruire_DOM" title="Decostruire un albero DOM">seconda</a> invece si darà per scontato che <em>saremo già</em> in possesso di un albero DOM e il nostro scopo sarà quello di trattarne il contenuto.</p> + +<h4 id="So_what.3F" name="So_what.3F">Che cos'è un albero DOM?</h4> + +<p>Per albero DOM s'intende un'istanza di <code><a class="external" href="http://xulplanet.com/references/objref/Document.html">Document</a></code>. Si tratta quindi di un oggetto Javascript e non è da confondere con una stringa di testo contenente il codice sorgente di un documento XML ancora da parsare.</p> + +<p>DOM trees can be queried using <a href="/it/Usare_XPath" title="it/Usare_XPath">XPath</a> expressions, converted to strings or written to a local or remote files using <code>XMLSerializer</code> (without having to first convert to a string), POSTed to a web server (via <code><a href="/it/XMLHttpRequest" title="it/XMLHttpRequest">XMLHttpRequest</a></code>),</p> + +<p>You can use DOM trees to model data which isn't well-suited for RDF (or perhaps you just don't like RDF). Another application is that, since XUL is XML, the UI of your application can be dynamically manipulated, downloaded, uploaded, saved, loaded, converted, or transformed quite easily.</p> + +<p>Mozilla gestisce ampiamente <a href="/it/XML" title="it/XML">XML</a>. Sono gestite diverse Raccomandazioni e bozze del World Wide Web Consortium (<a class="external" href="http://w3c.org/">W3C</a>) per la famiglia XML, così come altre tecnologie relative. Tra le più importanti tecnologie native che Mozilla offre per lavorare con documenti XML sono da citare:</p> + +<ul> + <li><a href="/it/XPath" title="it/XPath">XPath</a> per <strong>indirizzare parti diverse di un documento XM</strong>L,</li> + <li><a href="/it/XMLSerializer" title="it/XMLSerializer">XMLSerializer</a> per convertire <strong>alberi DOM in stringhe o files</strong>,</li> + <li><a href="/it/DOM/DOMParser" title="it/DOMParser">DOMParser</a> costruire un documento XML <strong>convertendo delle stringhe in alberi DOM</strong>,</li> + <li><a href="/it/XMLHttpRequest" title="it/XMLHttpRequest">XMLHttpRequest</a> per parsare <strong>a partire da file</strong> documenti XML in albero DOM. Sebbene anche le istanze di <code>DOMParser</code> abbiano un metodo chiamato <code>parseFromStream()</code>, è più facile utilizzare <a href="/it/XMLHttpRequest" title="it/XMLHttpRequest">XMLHttpRequest</a> che lavore sia con file remoti (non confinati al solo protocollo HTTP) che con file locali,</li> + <li><a href="/it/XSLT" title="it/XSLT">XSLT</a> e <a href="/it/XLink" title="it/XLink">XLink</a> per <strong>manipolare il contenuto</strong> di un documento XML.</li> +</ul> + +<p>È possibile comunque creare manualmente propri algoritmi per la serializzazione o la conversione di un documento XML, come si vedrà <a href="#JXON" title="Vai alla sezione su JXON">in seguito.</a></p> + +<h2 id="Prima_parte_costruire_un_albero_DOM">Prima parte: costruire un albero DOM</h2> + +<p>Come precedentemente accennato, in questa prima sezione il nostro scopo sarà quello di ottenere un albero DOM.</p> + +<p>Un albero DOM è un oggetto (e precisamente un'istanza di <code><a class="external" href="http://xulplanet.com/references/objref/Document.html">Document</a></code>). Ci sono molti modi per costruirlo o ottenerlo, a seconda delle proprie esigenze. Di seguito verranno elencate varie strade: a partire da una stringa di codice sorgente, a partire da file o a partire da strutture di differente natura.</p> + +<h3 id="Creare_dinamicamente_un_albero_DOM">Creare dinamicamente un albero DOM</h3> + +<p>Questo paragrafo illustra come utilizzare l'API JavaScript <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html">W3C DOM</a> per creare e modificare oggetti DOM. Essa è attiva in tutte le applicazioni <em>Gecko-based</em> (come Firefox, per esempio) sia in <em>privileged code</em> (estensioni) che in <em>unprivileged code</em> (pagine internet).</p> + +<h4 id="Dynamically_creating_a_DOM_tree" name="Dynamically_creating_a_DOM_tree">Scrivendolo a mano</h4> + +<p>L'API JavaScript <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html">W3C DOM</a>, supportata da Mozilla, può essere invocata manualmente.</p> + +<p>Si consideri il seguente documento XML:</p> + +<pre class="brush: xml"><?xml version="1.0"?> +<people> + <person first-name="eric" middle-initial="H" last-name="jung"> + <address street="321 south st" city="denver" state="co" country="usa" /> + <address street="123 main st" city="arlington" state="ma" country="usa" /> + </person> + <person first-name="jed" last-name="brown"> + <address street="321 north st" city="atlanta" state="ga" country="usa" /> + <address street="123 west st" city="seattle" state="wa" country="usa" /> + <address street="321 south avenue" city="denver" state="co" country="usa" /> + </person> +</people> +</pre> + +<p>Grazie all'API <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html">W3C DOM</a> è possibile creare una rappresentazione di esso come la seguente, presente unicamente nella memoria dell'interprete:</p> + +<pre class="brush: js">var doc = document.implementation.createDocument("", "", null); +var peopleElem = doc.createElement("people"); + +var personElem1 = doc.createElement("person"); +personElem1.setAttribute("first-name", "eric"); +personElem1.setAttribute("middle-initial", "h"); +personElem1.setAttribute("last-name", "jung"); + +var addressElem1 = doc.createElement("address"); +addressElem1.setAttribute("street", "321 south st"); +addressElem1.setAttribute("city", "denver"); +addressElem1.setAttribute("state", "co"); +addressElem1.setAttribute("country", "usa"); +personElem1.appendChild(addressElem1); + +var addressElem2 = doc.createElement("address"); +addressElem2.setAttribute("street", "123 main st"); +addressElem2.setAttribute("city", "arlington"); +addressElem2.setAttribute("state", "ma"); +addressElem2.setAttribute("country", "usa"); +personElem1.appendChild(addressElem2); + +var personElem2 = doc.createElement("person"); +personElem2.setAttribute("first-name", "jed"); +personElem2.setAttribute("last-name", "brown"); + +var addressElem3 = doc.createElement("address"); +addressElem3.setAttribute("street", "321 north st"); +addressElem3.setAttribute("city", "atlanta"); +addressElem3.setAttribute("state", "ga"); +addressElem3.setAttribute("country", "usa"); +personElem2.appendChild(addressElem3); + +var addressElem4 = doc.createElement("address"); +addressElem4.setAttribute("street", "123 west st"); +addressElem4.setAttribute("city", "seattle"); +addressElem4.setAttribute("state", "wa"); +addressElem4.setAttribute("country", "usa"); +personElem2.appendChild(addressElem4); + +var addressElem5 = doc.createElement("address"); +addressElem5.setAttribute("street", "321 south avenue"); +addressElem5.setAttribute("city", "denver"); +addressElem5.setAttribute("state", "co"); +addressElem5.setAttribute("country", "usa"); +personElem2.appendChild(addressElem5); + +peopleElem.appendChild(personElem1); +peopleElem.appendChild(personElem2); +doc.appendChild(peopleElem); +</pre> + +<p>Si veda anche <a href="/en/XUL_Tutorial/Document_Object_Model" title="en/XUL_Tutorial/Document_Object_Model">Il capitolo sul DOM del Tutorial XUL</a> (in inglese).</p> + +<h4 id="Automatizzando_la_creazione_dinamica_dell'albero_DOM">Automatizzando la creazione dinamica dell'albero DOM</h4> + +<p>L'invocazione dell'API Javascript <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html">W3C DOM</a>, può essere anche automatizzata.</p> + +<p>Non esiste un metodo unico per automatizzare la creazione di un documento XML. Esso dipende molto dal tipo di dati che andremo a scrivere. In ogni caso, per vederne un possibile esempio, si vada all'<a href="#JXON_algoritmi_inversi" title="JXON – Appendice">ultimo paragrafo</a> del <a href="#JXON" title="Convertire un foglio XML in un albero di oggetti Javascript (JXON)">capitolo su JXON</a>.</p> + +<h3 id="Costruire_un_albero_DOM_XML_a_partire_da_stringhe_di_codice_sorgente">Costruire un albero DOM XML a partire da stringhe di codice sorgente</h3> + +<p>Il seguente esempio mostra la costruzione di un albero DOM tramite <em>parsing</em> di un codice sorgente.</p> + +<pre class="brush: js">var sSource = "<a id=\"a\"><b id=\"b\">hey!<\/b><\/a>"; +var oParser = new DOMParser(); +var oDOM = oParser.parseFromString(sSource, "text\/xml"); +// print the name of the root element or error message +dump(oDOM.documentElement.nodeName == "parsererror" ? "error while parsing" : oDOM.documentElement.nodeName);</pre> + +<p><a class="external" href="http://www.van-steenbeek.net/?q=explorer_domparser_parsefromstring">Tutorial su come rendere questo codice cross browser</a> (in inglese)</p> + +<h3 id="Costruire_un_albero_DOM_a_partire_da_un_file">Costruire un albero DOM a partire da un file</h3> + +<p>Preambolo da stendere.</p> + +<h4 id="Usando_DOMParser">Usando <code>DOMParser</code></h4> + +<p>Ciascuna istanza di <code>DOMParser</code> possiede diversi metodi per parsare un documento XML a partire da un file. È possibile fare ricorso a <code>parseFromStream()</code>:</p> + +<pre class="brush: js">function loadXMLFile (sFile) { + var oIOServ = Components.classes["@mozilla.org/network/io-service;1"].getService(Components.interfaces.nsIIOService); + var oChannel = oIOServ.newChannel(sFile,null,null); + var oStream = oChannel.open(); + // alert("oStream.available() = " + oStream.available()); // debug + var parser = new DOMParser(); + + doc = parser.parseFromStream(oStream, "", oStream.available(),"text/xml"); + + // alert("doc=" + doc); // debug + oStream.close(); + + return doc; +} + +// alert(loadXMLFile("file:///home/john/hello.xml")); +</pre> + +<p>oppure utilizzare <code>parseFromBuffer()</code>:</p> + +<pre class="brush: js">// Esempio mancante</pre> + +<p>In ogni caso il metodo più pratico per accedere al contenuto di un file XML resta <em>ajax</em>, per l'uso del quale si rimanda al prossimo paragrafo.</p> + +<h4 id="Usando_XMLHttpRequest">Usando <code>XMLHttpRequest</code></h4> + +<p>Come già precedentemente accennato, sebbene ciascuna istanza di <code>DOMParser</code> possegga un metodo chiamato <code>parseFromStream()</code>, è più facile utilizzare <a href="/it/XMLHttpRequest" title="it/XMLHttpRequest">XMLHttpRequest</a> per parsare documenti XML in alberi DOM (<code>XMLHttpRequest</code> funziona bene sia in locale che in remoto). Di seguito c'è un codice di esempio che legge e parsa in un albero DOM un file XML locale:</p> + +<pre class="brush: js">var oReq = new XMLHttpRequest(); +oReq.open("GET", "chrome://passwdmaker/content/people.xml", false); +oReq.send(null); +// print the name of the root element or error message +var oDOM = oReq.responseXML; +dump(oDOM.documentElement.nodeName == "parsererror" ? "error while parsing" : oDOM.documentElement.nodeName); +</pre> + +<p>N.B. Il metodo <code>responseXML</code> è sempre un'istanza di <code><a class="external" href="http://xulplanet.com/references/objref/Document.html">Document</a></code> – e di conseguenza un <em>oggetto</em> – a differenza del metodo <code>responseText</code>, che è sempre un <em>valore primario</em> (una stringa).</p> + +<h4 id="Usando_l'elemento_HTMLElement(object)_.">Usando l'elemento {{ HTMLElement("object") }}.</h4> + +<p>Di seguito è presentata un'altra via possibile per parsare un file XML in un albero DOM: usando il tag {{ HTMLElement("object") }}. Prima di lanciare il seguente esempio è necessario creare un file XML chiamato <code>purchase_order.xml</code> e contenente un albero simile a questo:</p> + +<p>purchase_order.xml</p> + +<pre class="brush: xml"><?xml version="1.0"?> +<purchaseOrder xmlns="http://example.mozilla.org/PurchaseOrderML"> + <lineItem> + <name>Line Item 1</name> + <price>1.25</price> + </lineItem> + <lineItem> + <name>Line Item 2</name> + <price>2.48</price> + </lineItem> +</purchaseOrder> +</pre> + +<p>Adesso proviamo a lanciare il nostro esempio:</p> + +<pre class="brush: html"><!doctype html> +<html> +<head> +<title>XML Data Block Demo</title> +<script> +function runDemo() { + var doc = document.getElementById("purchase-order").contentDocument; + var lineItems = doc.getElementsByTagNameNS("http://example.mozilla.org/PurchaseOrderML", "lineItem"); + var firstPrice = lineItems[0].getElementsByTagNameNS("http://example.mozilla.org/PurchaseOrderML", "price")[0].textContent; + document.getElementById("output-box").textContent = "The purchase order contains " + lineItems.length + " line items. The price of the first line item is " + firstPrice + "."; +} +</script> +</head> +<body onload="runDemo()";> +<object id="purchase-order" data="purchase_order.xml" type="text/xml" style="display: none;"></object> +<div id="output-box">Demo did not run</div> +</body> +</html> +</pre> + +<p>Per ulteriori approfondimenti, si rimanda all'articolo: <a href="/it/Usare_le_XML_Data_Islands_in_Mozilla" title="it/Usare_le_XML_Data_Islands_in_Mozilla">Usare le XML Data Islands in Mozilla</a>.</p> + +<h2 id="Seconda_parte_decostruire_un_albero_DOM">Seconda parte: decostruire un albero DOM</h2> + +<p>Da adesso in poi daremo per scontato il fatto che <em>abbiamo già</em> un albero DOM nella memoria dell'interprete Javascript e che il nostro scopo è quello di utilizzare tale istanza di <code><a class="external" href="http://xulplanet.com/references/objref/Document.html">Document</a></code> nei modi più disparati.</p> + +<h3 id="Convertire_un_documento_XML_in_stringhe_di_codice_sorgente">Convertire un documento XML in stringhe di codice sorgente</h3> + +<p>L'esempio seguente mostra come ottenere dalla variabile <code>doc</code> — il nostro albero DOM — una stringa contenente l'intero suo codice sorgente:</p> + +<pre class="brush: js">var oSerializer = new XMLSerializer(); +var sXML = oSerializer.serializeToString(doc); +</pre> + +<p>Non è possibile creare un istanza di <code>XMLSerializer</code> (ovvero lanciare: <code>new XMLSerializer()</code>) dall'interno di un componente JS XPCOM o dall'interno di un <a class="internal" href="/it/Moduli_di_codice_JavaScript" title="it/Moduli_di_codice_JavaScript">modulo</a>. Per farlo bisogna lanciare:</p> + +<pre class="brush: js">var oSerializer = Components.classes["@mozilla.org/xmlextras/xmlserializer;1"].createInstance(Components.interfaces.nsIDOMSerializer); +var sXML = oSerializer.serializeToString(doc); +</pre> + +<h4 id="Come_ottenere_stringhe_di_codice_sorgente_di_facile_lettura">Come ottenere stringhe di codice sorgente di facile lettura</h4> + +<p>You can <a class="external" href="http://en.wikipedia.org/wiki/Pretty-print">pretty print</a> a DOM tree using <code>XMLSerializer</code> and <a href="/it/E4X" title="it/E4X">E4X</a>. First, create a DOM tree as described in the <a href="/it/Come_creare_un_albero_DOM" title="it/Come_creare_un_albero_DOM">Come creare un albero DOM</a> article. Alternatively, use a DOM tree obtained from <a href="/it/XMLHttpRequest" title="it/XMLHttpRequest">XMLHttpRequest</a>. We assume it's in the <code>doc</code> variable.</p> + +<pre class="brush: js">var oSerializer = new XMLSerializer(); +var sPrettyXML = XML(oSerializer.serializeToString(doc)).toXMLString();</pre> + +<p>Indents are provided with two spaces. You can, of course, use <a href="/it/DOM/treeWalker" title="it/DOM/treeWalker">DOM:treeWalker</a> to write your own, more performant version which also has the advantage that you can customize the indent string to be whatever you like.</p> + +<p><strong>Note:</strong> When using the E4X <code>toXMLString</code> method your <strong>CDATA elements will be lost</strong> and only the containing text remains. So using the above method might not be useful if you have CDATA elements in your XML.</p> + +<pre class="brush: xml"><content><![CDATA[This is the content]]></content></pre> + +<p>Will become</p> + +<pre class="brush: xml"><content>This is the content</content></pre> + +<h3 id="Convertire_un_foglio_XML_in_un_albero_di_oggetti_Javascript_(JXON)">Convertire un foglio XML in un albero di oggetti Javascript (JXON)</h3> + +<p>JXON (lossless <strong>J</strong>avascript <strong>X</strong>ML <strong>O</strong>bject <strong>N</strong>otation) è un nome generico col quale viene definita la rappresentazione di oggetti Javascript in linguaggio XML. Non esistono veri e propri standard per questa rappresentazione, ma da poco tempo a questa parte cominciano ad affacciarsi in rete alcune convenzioni.</p> + +<p>JXON non è un metodo per indirizzare poche parti di un documento XML, dato che il suo punto di forza è la conversione per intero di un albero DOM. Se il nostro scopo è quello di accedere a delle informazioni limitate di un albero DOM, si raccomanda vivamente di <a href="/it/Usare_XPath" title="it/Usare_XPath">Usare XPath</a>.</p> + +<p>Ci sono casi invece in cui un documento XML è costruito in maniera tale da avere come principale destinatario del proprio contenuto proprio l'interprete Javascript. In tal caso JXON si presenta come la via migliore.</p> + +<p>Per tutto questo capitolo immagineremo di aver parsato, come al solito nella nostra variabile <code>doc</code>, questo documento XML di esempio:</p> + +<h5 id="esempio.xml">esempio.xml</h5> + +<pre class="brush: xml"><?xml version="1.0"?> +<!DOCTYPE catalog SYSTEM "catalog.dtd"> +<catalog> + <product description="Cardigan Sweater"> + <catalog_item gender="Men's"> + <item_number>QWZ5671</item_number> + <price>39.95</price> + <size description="Medium"> + <color_swatch image="red_cardigan.jpg">Red</color_swatch> + <color_swatch image="burgundy_cardigan.jpg">Burgundy</color_swatch> + </size> + <size description="Large"> + <color_swatch image="red_cardigan.jpg">Red</color_swatch> + <color_swatch image="burgundy_cardigan.jpg">Burgundy</color_swatch> + </size> + </catalog_item> + <catalog_item gender="Women's"> + <item_number>RRX9856</item_number> + <discount_until>Dec 25, 1995</discount_until> + <price>42.50</price> + <size description="Medium"> + <color_swatch image="black_cardigan.jpg">Black</color_swatch> + </size> + </catalog_item> + </product> + <script type="text/javascript"><![CDATA[function matchwo(a,b) { + if (a < b && a < 0) { return 1; } + else { return 0; } +}]]></script> +</catalog> +</pre> + +<p>Adesso proveremo a ottenere una rappresentazione della variabile <code>doc</code> — l'albero DOM — attraverso un albero di oggetti Javascript (per approfondire si leggano le guide su <a href="/it/JavaScript/Guida/Lavorare_con_gli_oggetti" title="Lavorare con gli oggetti">come lavorare con gli oggetti</a> e su <a href="/it/Introduzione_al_carattere_Object-Oriented_di_JavaScript" title="Introduzione al carattere Object-Oriented di JavaScript">come Javascript sia <em>Object-Oriented</em></a>). Per far ciò potremo utilizzare diversi algoritmi di conversione.</p> + +<p>Per semplicità gli algoritmi qui proposti (si veda: <a href="#Algoritmo_JXON_1" title="Vai all'algoritmo JXON #1">#1</a>, <a href="#Algoritmo_JXON_2" title="Vai all'algoritmo JXON #2">#2</a>, <a href="#Algoritmo_JXON_3" title="Vai all'algoritmo JXON #3">#3</a>, <a href="#Algoritmo_JXON_4" title="Vai all'algoritmo JXON #4">#4</a>) prenderanno in considerazione unicamente i seguenti tipi di nodi e i loro attributi:</p> + +<ol> + <li><code>Document</code> (solo come argomento della funzione),</li> + <li><code>DocumentFragment</code> (solo come argomento della funzione),</li> + <li><code>Element</code>,</li> + <li><code>Text</code> (mai come argomento della funzione),</li> + <li><code>CDATASection</code> (mai come argomento della funzione).</li> +</ol> + +<p>Si tratta di un buon compromesso per un uso Javascript, dacché la gran parte delle informazioni di un documento XML è contenuta in questo tipo di nodi. Ogni altra informazione (come processing instructions, xml schemas, commenti, etc.) andrà persa. Allo scopo di evitare conflitti, la lettura dei nomi dei nodi e dei loro attributi è <em>case insensitive</em> (resa sempre in <em>minuscolo</em>) e di conseguenza le proprietà locali dell'albero di oggetti così ottenuto, aggiunte via JavaScript, dovranno avere sempre un qualche tipo di lettera maiuscola al loro interno (per evitare di sovrascrivere le proprietà ottenute dal foglio XML), come si può vedere di seguito. I seguenti algoritmi sono liberamente basati sulla <a href="#Convenzione_di_Parker" title="La Convenzione di Parker">Convenzione di Parker, versione 0.4</a>, che prevede il riconoscimento del <code>typeof</code> del contenuto di testo di ogni singolo nodo letto.</p> + +<h4 id="Algoritmo_1_una_via_prolissa">Algoritmo #1: una via prolissa</h4> + +<p>Questo semplice costruttore ricorsivo converte un albero DOM XML in un albero di oggetti Javascript. Il contenuto di testo di ogni nodo sarà salvato all'interno della proprietà <code>keyValue</code>, mentre i <code>nodeAttributes</code>, se esistono, saranno annidati come proprietà dell'oggetto-figlio <code>keyAttributes</code>. L'argomento del costruttore potrà essere l'intero <code>Document</code>, un <code>DocumentFragment</code> o, più semplicemente, un nodo di tipo <code>Element</code> di esso.</p> + +<pre class="brush: js">function buildValue(sValue) { + if (/^\s*$/.test(sValue)) { return null; } + if (/^(true|false)$/i.test(sValue)) { return sValue.toLowerCase() === "true"; } + if (isFinite(sValue)) { return parseFloat(sValue); } + if (isFinite(Date.parse(sValue))) { return new Date(sValue); } + return sValue; +} + +function JXONData (oXMLParent) { + var nAttrLen = 0, nLength = 0, sCollectedTxt = ""; + // children + if (oXMLParent.hasChildNodes()) { + for (var oItChild, sItKey, sItVal, nChildId = 0; nChildId < oXMLParent.childNodes.length; nChildId++) { + oItChild = oXMLParent.childNodes.item(nChildId); + if ((oItChild.nodeType + 1 | 1) === 5) { sCollectedTxt += oItChild.nodeType === 3 ? oItChild.nodeValue.replace(/^\s+|\s+$/g, "") : oItChild.nodeValue; } // nodeType is "Text" (3) or "CDATASection" (4) + else if (oItChild.nodeType === 1 && !oItChild.prefix) { // nodeType is "Element" (1) + sItKey = oItChild.nodeName.toLowerCase(); + sItVal = new JXONData(oItChild); + if (this.hasOwnProperty(sItKey)) { + if (this[sItKey].constructor !== Array) { this[sItKey] = [this[sItKey]]; } + this[sItKey].push(sItVal); + } else { this[sItKey] = sItVal; nLength++; } + } + } + this.keyValue = buildValue(sCollectedTxt); + } else { this.keyValue = null; } + // node attributes + if (oXMLParent.hasAttributes()) { + var oItAttr; + this.keyAttributes = {}; + for (nAttrLen; nAttrLen < oXMLParent.attributes.length; nAttrLen++) { + oItAttr = oXMLParent.attributes.item(nAttrLen); + this.keyAttributes[oItAttr.nodeName.toLowerCase()] = buildValue(oItAttr.nodeValue); + } + } + // optional properties and methods; you could safely adjoust/remove them... + this.keyLength = nLength; + this.attributesLength = nAttrLen; + // this.DOMNode = oXMLParent; + this.valueOf = function() { return this.keyValue; }; + this.toString = function() { return String(this.keyValue); }; + this.getItem = function(nItem) { + if (nLength === 0) { return null; } + var iItem = 0; + for (var sKeyName in this) { if (iItem === nItem) { return this[sKeyName]; } iItem++; } + return null; + }; + this.getAttribute = function(nAttrib) { + if (nAttrLen === 0 || nAttrib + 1 > nAttrLen) { return null; } + var nItAttr = 0; + for (var sAttrName in this.keyAttributes) { if (nItAttr === nAttrib) { return this.keyAttributes[sAttrName]; } nItAttr++; } + return null; + }; + this.hasChildren = function() { return this.keyLength > 0; }; +} + +var myObject = new JXONData(doc); +// abbiamo ottenuto il nostro albero di oggetti Javascript! provare per credere: alert(JSON.stringify(myObject)); +</pre> + +<p>Con questo algoritmo <a href="#XML_di_esempio" title="Go to the sample XML document">il nostro esempio</a> diventerà:</p> + +<pre class="brush: js">{ + "catalog": { + "product": { + "catalog_item": [{ + "item_number": { + "keyValue": "QWZ5671", + "keyLength": 0, + "attributesLength": 0 + }, + "price": { + "keyValue": 39.95, + "keyLength": 0, + "attributesLength": 0 + }, + "size": [{ + "color_swatch": [{ + "keyValue": "Red", + "keyAttributes": { + "image": "red_cardigan.jpg" + }, + "keyLength": 0, + "attributesLength": 1 + }, { + "keyValue": "Burgundy", + "keyAttributes": { + "image": "burgundy_cardigan.jpg" + }, + "keyLength": 0, + "attributesLength": 1 + }], + "keyValue": null, + "keyAttributes": { + "description": "Medium" + }, + "keyLength": 1, + "attributesLength": 1 + }, { + "color_swatch": [{ + "keyValue": "Red", + "keyAttributes": { + "image": "red_cardigan.jpg" + }, + "keyLength": 0, + "attributesLength": 1 + }, { + "keyValue": "Burgundy", + "keyAttributes": { + "image": "burgundy_cardigan.jpg" + }, + "keyLength": 0, + "attributesLength": 1 + }], + "keyValue": null, + "keyAttributes": { + "description": "Large" + }, + "keyLength": 1, + "attributesLength": 1 + }], + "keyValue": null, + "keyAttributes": { + "gender": "Men's" + }, + "keyLength": 3, + "attributesLength": 1 + }, { + "item_number": { + "keyValue": "RRX9856", + "keyLength": 0, + "attributesLength": 0 + }, + "discount_until": { + "keyValue": new Date(1995, 11, 25), + "keyLength": 0, + "attributesLength": 0 + }, + "price": { + "keyValue": 42.5, + "keyLength": 0, + "attributesLength": 0 + }, + "size": { + "color_swatch": { + "keyValue": "Black", + "keyAttributes": { + "image": "black_cardigan.jpg" + }, + "keyLength": 0, + "attributesLength": 1 + }, + "keyValue": null, + "keyAttributes": { + "description": "Medium" + }, + "keyLength": 1, + "attributesLength": 1 + }, + "keyValue": null, + "keyAttributes": { + "gender": "Women's" + }, + "keyLength": 4, + "attributesLength": 1 + }], + "keyValue": null, + "keyAttributes": { + "description": "Cardigan Sweater" + }, + "keyLength": 1, + "attributesLength": 1 + }, + "script": { + "keyValue": "function matchwo(a,b) {\n if (a < b && a < 0) { return 1; }\n else { return 0; }\n}", + "keyAttributes": { + "type": "text/javascript" + }, + "keyLength": 0, + "attributesLength": 1 + }, + "keyValue": null, + "keyLength": 2, + "attributesLength": 0 + }, + "keyValue": null, + "keyLength": 1, + "attributesLength": 0 +} +</pre> + +<p>È un approccio raccomandato nel caso in cui ci sia completamente ignota la struttura del documento XML che andremo a leggere.</p> + +<h4 id="Algoritmo_2_una_via_un_po'_meno_prolissa">Algoritmo #2: una via un po' meno prolissa</h4> + +<p>Quello che segue è un altro, più semplice, metodo di conversione. Dove i <code>nodeAttributes</code> saranno annidati nello stesso oggetto contenente la trascrizione dei nodi figli sebbene, a differenza di quelli, questi saranno contrassegnati dal prefisso “<code>@</code>”. Come sopra, il contenuto di testo di ciascun nodo sarà affidato alla proprietà <code>keyValue</code>. L'argomento del costruttore potrà essere l'intero <code>Document</code>, un <code>DocumentFragment</code> o, più semplicemente, un nodo di tipo <code>Element</code> di esso.</p> + +<pre class="brush: js">function buildValue(sValue) { + if (/^\s*$/.test(sValue)) { return null; } + if (/^(true|false)$/i.test(sValue)) { return sValue.toLowerCase() === "true"; } + if (isFinite(sValue)) { return parseFloat(sValue); } + if (isFinite(Date.parse(sValue))) { return new Date(sValue); } + return sValue; +} + +function JXONData (oXMLParent) { + if (oXMLParent.hasChildNodes()) { + var sCollectedTxt = ""; + for (var oItChild, sItKey, sItVal, nChildId = 0; nChildId < oXMLParent.childNodes.length; nChildId++) { + oItChild = oXMLParent.childNodes.item(nChildId); + if ((oItChild.nodeType + 1 | 1) === 5) { sCollectedTxt += oItChild.nodeType === 3 ? oItChild.nodeValue.replace(/^\s+|\s+$/g, "") : oItChild.nodeValue; } + else if (oItChild.nodeType === 1 && !oItChild.prefix) { + sItKey = oItChild.nodeName.toLowerCase(); + sItVal = new JXONData(oItChild); + if (this.hasOwnProperty(sItKey)) { + if (this[sItKey].constructor !== Array) { this[sItKey] = [this[sItKey]]; } + this[sItKey].push(sItVal); + } else { this[sItKey] = sItVal; } + } + } + if (sCollectedTxt) { this.keyValue = buildValue(sCollectedTxt); } + } + if (oXMLParent.hasAttributes()) { + var oItAttr; + for (var iAttrId = 0; iAttrId < oXMLParent.attributes.length; iAttrId++) { + oItAttr = oXMLParent.attributes.item(iAttrId); + this["@" + oItAttr.nodeName.toLowerCase()] = buildValue(oItAttr.nodeValue); + } + } +} + +var myObject = new JXONData(doc); +// abbiamo ottenuto il nostro albero di oggetti Javascript! provare per credere: alert(JSON.stringify(myObject)); +</pre> + +<p>Con questo algoritmo <a href="#XML_di_esempio" title="Go to the sample XML document">il nostro esempio</a> diventerà:</p> + +<pre class="brush: js">{ + "catalog": { + "product": { + "catalog_item": [{ + "item_number": { + "keyValue": "QWZ5671" + }, + "price": { + "keyValue": 39.95 + }, + "size": [{ + "color_swatch": [{ + "keyValue": "Red", + "@image": "red_cardigan.jpg" + }, { + "keyValue": "Burgundy", + "@image": "burgundy_cardigan.jpg" + }], + "@description": "Medium" + }, { + "color_swatch": [{ + "keyValue": "Red", + "@image": "red_cardigan.jpg" + }, { + "keyValue": "Burgundy", + "@image": "burgundy_cardigan.jpg" + }], + "@description": "Large" + }], + "@gender": "Men's" + }, { + "item_number": { + "keyValue": "RRX9856" + }, + "discount_until": { + "keyValue": new Date(1995, 11, 25) + }, + "price": { + "keyValue": 42.5 + }, + "size": { + "color_swatch": { + "keyValue": "Black", + "@image": "black_cardigan.jpg" + }, + "@description": "Medium" + }, + "@gender": "Women's" + }], + "@description": "Cardigan Sweater" + }, + "script": { + "keyValue": "function matchwo(a,b) {\n if (a < b && a < 0) { return 1; }\n else { return 0; }\n}", + "@type": "text/javascript" + } + } +} +</pre> + +<p>È un approccio possibile nel caso in cui ci sia parzialmente nota la struttura del documento XML che andremo a leggere.</p> + +<h4 id="Algoritmo_3_una_via_sintetica">Algoritmo #3: una via sintetica</h4> + +<p>Ora proveremo un altro metodo di conversione. Questo algoritmo è quello che si avvicina di più alla <a href="#Convenzione_di_Parker" title="La Convenzione di Parker">Convenzione di Parker</a>. Esso è molto simile al precedente, eccetto che per il fatto che i nodi che non contengono alcun nodo-figlio di tipo <code>Element</code>, ma solo nodi-figli di tipo <code>Text</code> e/o <code>CDATASection</code>, non saranno rappresentati da oggetti, ma direttamente da booleani, numeri, stringhe o istanze del costruttore <code>Date</code> (si veda la <a href="#Convenzione_di_Parker" title="La Convenzione di Parker">Convenzione di Parker</a>). La rappresentazione dei nodi completamente vuoti invece (cioè che non contengono né nodi di tipo <code>Element</code>, né nodi di tipo <code>Text</code>, né nodi di tipo <code>CDATASection</code>) avranno come valore predefinito <code>true</code> (su questo punto si vedano le <a href="#JXON_considerazioni" title="Considerazioni sul codice">Considerazioni sul codice</a>). Inoltre questa volta non si è ricorso a un costruttore, ma a una funzione. L'argomento della funzione potrà essere l'intero <code>Document</code>, un <code>DocumentFragment</code> o, più semplicemente, un nodo di tipo <code>Element</code> di esso.</p> + +<p>In molti casi questo rappresenta il metodo di conversione più pratico.</p> + +<pre class="brush: js">function buildValue(sValue) { + if (/^\s*$/.test(sValue)) { return null; } + if (/^(true|false)$/i.test(sValue)) { return sValue.toLowerCase() === "true"; } + if (isFinite(sValue)) { return parseFloat(sValue); } + if (isFinite(Date.parse(sValue))) { return new Date(sValue); } + return sValue; +} + +function getJXONData (oXMLParent) { + var vResult = /* put here the default value for empty nodes! */ true, nLength = 0, sCollectedTxt = ""; + if (oXMLParent.hasAttributes()) { + vResult = {}; + for (nLength; nLength < oXMLParent.attributes.length; nLength++) { + oItAttr = oXMLParent.attributes.item(nLength); + vResult["@" + oItAttr.nodeName.toLowerCase()] = buildValue(oItAttr.nodeValue.replace(/^\s+|\s+$/g, "")); + } + } + if (oXMLParent.hasChildNodes()) { + for (var oItChild, sItKey, sItVal, nChildId = 0; nChildId < oXMLParent.childNodes.length; nChildId++) { + oItChild = oXMLParent.childNodes.item(nChildId); + if (oItChild.nodeType === 4) { sCollectedTxt += oItChild.nodeValue; } /* nodeType is "CDATASection" (4) */ + else if (oItChild.nodeType === 3) { sCollectedTxt += oItChild.nodeValue.replace(/^\s+|\s+$/g, ""); } /* nodeType is "Text" (3) */ + else if (oItChild.nodeType === 1 && !oItChild.prefix) { /* nodeType is "Element" (1) */ + if (nLength === 0) { vResult = {}; } + sItKey = oItChild.nodeName.toLowerCase(); + sItVal = getJXONData(oItChild); + if (vResult.hasOwnProperty(sItKey)) { + if (vResult[sItKey].constructor !== Array) { vResult[sItKey] = [vResult[sItKey]]; } + vResult[sItKey].push(sItVal); + } else { vResult[sItKey] = sItVal; nLength++; } + } + } + } + if (sCollectedTxt) { nLength > 0 ? vResult.keyValue = buildValue(sCollectedTxt) : vResult = buildValue(sCollectedTxt); } + /* if (nLength > 0) { Object.freeze(vResult); } */ + return vResult; +} + +var myObject = getJXONData(doc); +// abbiamo ottenuto il nostro albero di oggetti Javascript! provare per credere: alert(JSON.stringify(myObject)); +</pre> + +<div class="note"><strong>Nota:</strong> Se si vuole <em>congelare</em> l'intero oggetto (a causa della natura "statica" di un documento XML), decommentare la stringa: <code>/* if (nLength > 0) { Object.freeze(vResult); } */</code>. Il metodo <code><a href="/it/Javascript/Glossario/Oggetti_globali/Object/freeze" title="/it/Javascript/Glossario/Oggetti_globali/Object/freeze">Object.freeze</a></code> vieta l'aggiunta di nuove proprietà e la rimozione delle proprietà esistenti, congelando la loro enumerabilità, la loro configurabilità o la loro scrivibilità. In sostanza l'oggetto è reso effettivamente immutabile.</div> + +<p>Con questo algoritmo <a href="#XML_di_esempio" title="Go to the sample XML document">il nostro esempio</a> diventerà:</p> + +<pre class="brush: js">{ + "catalog": { + "product": { + "@description": "Cardigan Sweater", + "catalog_item": [{ + "@gender": "Men's", + "item_number": "QWZ5671", + "price": 39.95, + "size": [{ + "@description": "Medium", + "color_swatch": [{ + "@image": "red_cardigan.jpg", + "keyValue": "Red" + }, { + "@image": "burgundy_cardigan.jpg", + "keyValue": "Burgundy" + }] + }, { + "@description": "Large", + "color_swatch": [{ + "@image": "red_cardigan.jpg", + "keyValue": "Red" + }, { + "@image": "burgundy_cardigan.jpg", + "keyValue": "Burgundy" + }] + }] + }, { + "@gender": "Women's", + "item_number": "RRX9856", + "discount_until": new Date(1995, 11, 25), + "price": 42.5, + "size": { + "@description": "Medium", + "color_swatch": { + "@image": "black_cardigan.jpg", + "keyValue": "Black" + } + } + }] + }, + "script": { + "@type": "text/javascript", + "keyValue": "function matchwo(a,b) {\n if (a < b && a < 0) { return 1; }\n else { return 0; }\n}" + } + } +} +</pre> + +<p>È un approccio raccomandato nel caso in cui ci sia nota la struttura del documento XML che andremo a leggere.</p> + +<h4 id="Algoritmo_4_una_via_davvero_minimalista">Algoritmo #4: una via davvero minimalista</h4> + +<p>La seguente rappresenta un'altra possibile via di conversione. Anch'essa è molto vicina alla <a href="#Convenzione_di_Parker" title="La Convenzione di Parker">Convenzione di Parker</a>. Con questo algoritmo la rappresentazione dei nodi di tipo <code>Element</code> che contengono a loro volta sullo stesso piano nodi-figli di tipo <code>Element</code> insieme con nodi-figli di tipo <code>Text</code> e/o di tipo <code>CDATASection</code> verrà resa per mezzo di istanze dei costruttori <code>Boolean</code>, <code>Number</code>, <code>String</code>, e <code>Date</code>. E di conseguenza la trascrizione di ogni eventuale nodo-figlio sarà annidata in oggetti di questo tipo.</p> + +<p>Per esempio;</p> + +<pre class="brush: xml"><employee type="usher">John Smith</employee> +<manager>Lisa Carlucci</manager> +</pre> + +<p>diventerà</p> + +<pre class="brush: js">var myObject = { + "employee": new String("John Smith"), + "manager": "Lisa Carlucci" +}; + +myObject.employee["@type"] = "usher"; + +// test + +alert(myObject.manager); // "Lisa Carlucci" +alert(myObject.employee["@type"]); // "usher" +alert(myObject.employee); // "John Smith" +</pre> + +<p>Come per il terzo algoritmo, i nodi che non contengono alcun nodo-figlio di tipo <code>Element</code>, ma solo nodi-figli di tipo <code>Text</code> e/o <code>CDATASection</code>, non saranno rappresentati da oggetti, ma direttamente da booleani, numeri, stringhe (valori primitivi) o da istanze del costruttore <code>Date</code> (si veda la <a href="#Convenzione_di_Parker" title="La Convenzione di Parker">Convenzione di Parker</a>). Come per il terzo algoritmo, non si è usato un costruttore, ma una semplice funzione. L'argomento della funzione potrà essere l'intero <code>Document</code>, un <code>DocumentFragment</code> o, più semplicemente, un nodo di tipo <code>Element</code> di esso.</p> + +<pre class="brush: js">function buildValue (sValue) { + if (/^\s*$/.test(sValue)) { return null; } + if (/^(true|false)$/i.test(sValue)) { return sValue.toLowerCase() === "true"; } + if (isFinite(sValue)) { return parseFloat(sValue); } + if (isFinite(Date.parse(sValue))) { return new Date(sValue); } + return sValue; +} + +function objectify (vValue) { + if (vValue === null) { + return new (function() { + this.toString = function() { return "null"; } + this.valueOf = function() { return null; } + })(); + } + return vValue instanceof Object ? vValue : new vValue.constructor(vValue); +} + +var aTmpEls = []; // loaded element nodes cache + +function getJXONData (oXMLParent) { + var sItKey, sItVal, vResult, nLength = 0, nLevelStart = aTmpEls.length, + nChildren = oXMLParent.hasChildNodes() ? oXMLParent.childNodes.length : 0, sCollectedTxt = ""; + + for (var oItChild, nChildId = 0; nChildId < nChildren; nChildId++) { + oItChild = oXMLParent.childNodes.item(nChildId); + if (oItChild.nodeType === 4) { sCollectedTxt += oItChild.nodeValue; } /* nodeType is "CDATASection" (4) */ + else if (oItChild.nodeType === 3) { sCollectedTxt += oItChild.nodeValue.replace(/^\s+|\s+$/g, ""); } /* nodeType is "Text" (3) */ + else if (oItChild.nodeType === 1 && !oItChild.prefix) { aTmpEls.push(oItChild); } /* nodeType is "Element" (1) */ + } + + var nLevelEnd = aTmpEls.length, vBuiltVal = buildValue(sCollectedTxt); + + if (oXMLParent.hasAttributes()) { + vResult = objectify(vBuiltVal); + for (nLength; nLength < oXMLParent.attributes.length; nLength++) { + oItAttr = oXMLParent.attributes.item(nLength); + vResult["@" + oItAttr.nodeName.toLowerCase()] = buildValue(oItAttr.nodeValue.replace(/^\s+|\s+$/g, "")); + } + } else if (nLevelEnd > nLevelStart) { vResult = objectify(vBuiltVal); } + + for (var nElId = nLevelStart; nElId < nLevelEnd; nElId++) { + sItKey = aTmpEls[nElId].nodeName.toLowerCase(); + sItVal = getJXONData(aTmpEls[nElId]); + if (vResult.hasOwnProperty(sItKey)) { + if (vResult[sItKey].constructor !== Array) { vResult[sItKey] = [vResult[sItKey]]; } + vResult[sItKey].push(sItVal); + } else { vResult[sItKey] = sItVal; nLength++; } + } + + aTmpEls.length = nLevelStart; + + if (nLength === 0) { vResult = sCollectedTxt ? vBuiltVal : /* put here the default value for empty nodes: */ true; } + /* else { Object.freeze(vResult); } */ + + return vResult; +} + +var myObject = getJXONData(doc); +alert(myObject.catalog.product.catalog_item[1].size.color_swatch["@image"]); // "black_cardigan.jpg" +alert(myObject.catalog.product.catalog_item[1].size.color_swatch); // "Black" !</pre> + +<div class="note"><strong>Nota:</strong> Se si vuole <em>congelare</em> l'intero oggetto (a causa della natura "statica" di un documento XML), decommentare la stringa: <code>/* else { Object.freeze(vResult); } */</code> . Il metodo <code><a href="/it/Javascript/Glossario/Oggetti_globali/Object/freeze" title="/it/Javascript/Glossario/Oggetti_globali/Object/freeze">Object.freeze</a></code> vieta l'aggiunta di nuove proprietà e la rimozione delle proprietà esistenti, congelando la loro enumerabilità, la loro configurabilità o la loro scrivibilità. In sostanza l'oggetto è reso effettivamente immutabile.</div> + +<p>È un approccio possibile nel caso in cui ci sia nota la struttura del documento XML che andremo a leggere.</p> + +<h4 id="Algoritmi_inversi">Algoritmi inversi</h4> + +<p>È possibile invertire gli algoritmi qui proposti in maniera tale da ottenere un nuovo documento XML a partire da un albero di oggetti Javascript.</p> + +<p>Per semplicità proporremo qui un unico esempio, che in un unico codice rappresenta l'inversione degli algoritmi <a href="#Algoritmo_JXON_2" title="Vai all'algoritmo JXON #2">#2</a> e <a href="#Algoritmo_JXON_3" title="Vai all'algoritmo JXON #3">#3</a>. È molto semplice partire da esso per creare gli inversi anche degli algoritmi <a href="#Algoritmo_JXON_1" title="Vai all'algoritmo JXON #1">#1</a> e <a href="#Algoritmo_JXON_4" title="Vai all'algoritmo JXON #4">#4</a>, qualora se ne abbia la necessità.</p> + +<pre class="brush: js">function createXML (oJXONObj) { + function loadObj (oParentObj, oParentEl) { + var nSameIdx, vValue, oChild; + for (var sName in oParentObj) { + vValue = oParentObj[sName]; + if (sName === "keyValue") { + if (vValue !== null && vValue !== true) { oParentEl.appendChild(oNewDoc.createTextNode(String(vValue))); } + } else if (sName.charAt(0) === "@") { + oParentEl.setAttribute(sName.slice(1), vValue); + } else { + oChild = oNewDoc.createElement(sName); + if (vValue.constructor === Date) { + oChild.appendChild(oNewDoc.createTextNode(vValue.toGMTString())); + } else if (vValue.constructor === Array) { + for (nSameIdx = 0; nSameIdx < vValue.length; nSameIdx++) { loadObj(vValue[nSameIdx], oChild); } + } else if (vValue instanceof Object) { + loadObj(vValue, oChild); + } else if (vValue !== null && vValue !== true) { + oChild.appendChild(oNewDoc.createTextNode(vValue.toString())); + } + oParentEl.appendChild(oChild); + } + } + } + var oNewDoc = document.implementation.createDocument("", "", null); + loadObj(oJXONObj, oNewDoc); + return oNewDoc; +} + +var newDoc = createXML(myObject); +// abbiamo ottenuto il nostro documento! provare per credere: alert((new XMLSerializer()).serializeToString(newDoc)); +</pre> + +<div class="note"><strong>Nota:</strong> Con questo codice le istanze di <code>Date</code> eventualmente presenti verranno convertite in stringhe attraverso l'invocazione del metodo <code>toGMTString()</code>. Nulla vieta l'utilizzo di qualsiasi altro metodo di conversione. Inoltre le proprietà dell'albero con valore uguale a <code>true</code> verranno convertite in elementi privi di nodi di testo (si vedano le <a href="#JXON_considerazioni" title="Considerazioni sul codice">Considerazioni sul codice</a>).</div> + +<p>Si tratta di una buona soluzione nel caso si voglia automatizzare la creazione di un documento XML. È una cattiva scelta invece nel caso in cui si voglia ricostruire un documento XML già precedentemente convertito in JSON. Sebbene la conversione sia molto fedele (eccetto che per i nodi di tipo <code>CDATASection</code>, che verranno riconvertiti in nodi di tipo <code>Text</code>), si tratta di un processo inutilmente dispendioso. Nel caso infatti in cui il nostro scopo sia quello di modificare un documento XML, si raccomanda vivamente di lavorare su di esso invece che di crearne di nuovi.</p> + +<h4 id="La_Convenzione_di_Parker">La Convenzione di Parker</h4> + +<p>Le funzioni precedentemente elencate per la conversione di un documento XML in JSON (spesso chiamate «algoritmi JXON») sono più o meno liberamente basate sulla Convenzione di Parker. È chiamata “Convenzione di Parker”, in opposizione alla “Convenzione di BadgerFish”, sulla falsa riga del fumetto di Cuadrado <em>Parker & Badger</em>. Per ulteriori approfondimenti si veda anche la <a class="external" href="http://badgerfish.ning.com/" title="BadgerFish convention">Convenzione di BadgerFish</a>.</p> + +<p>La seguente è una traduzione dall'inglese del <em>paper</em> originale della Convenzione di Parker (versione 0.4), dalla pagina “<a class="external" href="http://code.google.com/p/xml2json-xslt/wiki/TransformingRules" title="TransformingRules – xml2json-xslt">TransformingRules</a>” del sito del progetto <a class="external" href="http://code.google.com/p/xml2json-xslt/" title="xml2json-xslt project">xml2json-xslt</a>.</p> + +<p>Questa convenzione è stata scritta per regolamentare la conversione in <a href="/it/JSON" title="/it/JSON">JSON</a> da parte di <a href="/it/XSLT" title="/it/XSLT">XSLT</a>, di conseguenza alcune parti di essa sono futili per Javascript.</p> + +<h5 id="Conversione_in_JSON">Conversione in JSON</h5> + +<ol> + <li> + <p>L'elemento <code>root</code> verrà assorbito, poiché ce ne può essere soltanto uno:</p> + + <pre class="brush: xml"><root>test</root></pre> + + <p>diventerà</p> + + <pre class="brush: js">"test" +</pre> + </li> + <li> + <p>I nomi degli elementi diventeranno proprietà di oggetti:</p> + + <pre class="brush: xml"><root><name>Xml</name><encoding>ASCII</encoding></root></pre> + + <p>diventerà</p> + + <pre class="brush: js">{ + "name": "Xml", + "encoding": "ASCII" +} +</pre> + </li> + <li> + <p>I numeri saranno riconosciuti come tali (sia interi che decimali):</p> + + <pre class="brush: xml"><root><age>12</age><height>1.73</height></root> +</pre> + + <p>diventerà</p> + + <pre class="brush: js">{ + "age": 12, + "height": 1.73 +} +</pre> + </li> + <li> + <p>I booleani saranno riconosciuti come tali (<em>case insensitive</em>):</p> + + <pre class="brush: xml"><root><checked>True</checked><answer>FALSE</answer></root></pre> + + <p>diventerà</p> + + <pre class="brush: js">{ + "checked": true, + "answer": false +} +</pre> + </li> + <li> + <p>Le stringhe avranno degli <em>escape</em> quando ce ne sarà la necessità:</p> + + <pre class="brush: xml"><root>Quote: &quot; New-line: +</root> +</pre> + + <p>diventerà</p> + + <pre class="brush: js">"Quote: \" New-line:\n" +</pre> + </li> + <li> + <p>Gli elementi vuoti diventeranno proprietà con valore nullo (<code>null</code>):</p> + + <pre class="brush: xml"><root><nil/><empty></empty></root></pre> + + <p>diventerà</p> + + <pre class="brush: js">{ + "nil": null, + "empty": null +} +</pre> + </li> + <li> + <p>If all sibling elements have the same name, they become an array</p> + + <pre class="brush: xml"><root><item>1</item><item>2</item><item>three</item></root> +</pre> + + <p>becomes</p> + + <pre class="brush: js">[1, 2, "three"] +</pre> + </li> + <li> + <p>Mixed mode text-nodes, comments and attributes get absorbed:</p> + + <pre class="brush: xml"><root version="1.0">testing<!--comment--><elementtest="true">1</element></root> +</pre> + + <p>becomes</p> + + <pre class="brush: js">{ "element": true } +</pre> + </li> + <li> + <p>Namespaces get absorbed, and prefixes will just be part of the property name:</p> + + <pre class="brush: xml"><root xmlns:ding="http://zanstra.com/ding"><ding:dong>binnen</ding:dong></root> +</pre> + + <p>becomes</p> + + <pre class="brush: js">{ "ding:dong" : "binnen" } +</pre> + </li> +</ol> + +<div class="note"><strong>Note:</strong> Our algorithms comply with the points 2, 3, 4 and 7. The third and the fourth algorithm comply also with the point 6 (but <code>true</code> instead of <code>null</code> – si vedano le <a href="#JXON_considerazioni" title="Considerazioni sul codice">Considerazioni sul codice</a>). The point 5 is automatically managed by the Javascript method <code><a href="/it/Javascript/Glossario/Oggetti_globali/JSON/stringify" title="/it/Javascript/Glossario/Oggetti_globali/JSON/stringify">JSON.stringify</a></code>.</div> + +<h5 id="Appendice_Javascript">Appendice Javascript</h5> + +<p>All the same as the JSON translation, but with these extra's:</p> + +<ol> + <li> + <p>Property names are only escaped when necessary</p> + + <pre class="brush: xml"><root><while>true</while><wend>false</wend><only-if/></root></pre> + + <p>becomes</p> + + <pre class="brush: js">{ + "while": true, + wend: false, + "only-if": null +} +</pre> + </li> + <li> + <p>Within a string, closing elements "</" are escaped as "<\/"</p> + + <pre class="brush: xml"><root><![CDATA[<script>alert("YES");</script>]]></root></pre> + + <p>becomes</p> + + <pre class="brush: js">{ script: "<script>alert(\"YES\")<\/script>" } +</pre> + </li> + <li> + <p>Dates are created as <code>new Date()</code> objects</p> + + <pre class="brush: xml"><root>2006-12-25</root></pre> + + <p>becomes</p> + + <pre class="brush: js">new Date(2006, 12 - 1, 25) +</pre> + </li> + <li> + <p>Attributes and comments are shown as comments (for testing-purposes):</p> + + <pre class="brush: xml"><!--testing--><root><test version="1.0">123</test></root> +</pre> + + <p>becomes</p> + + <pre class="brush: js">/* testing */ { test /* @version = "1.0" */ : 123} +</pre> + </li> + <li> + <p>A bit of indentation is done, to keep things ledgible</p> + </li> +</ol> + +<div class="note"><strong>Note:</strong> Our algorithms comply with the point 3 (but without month decrease). The points 1 and 2 are automatically managed by the Javascript method <code><a href="/it/Javascript/Glossario/Oggetti_globali/JSON/stringify" title="/it/Javascript/Glossario/Oggetti_globali/JSON/stringify">JSON.stringify</a></code>.</div> + +<h4 id="In_sintesi">In sintesi</h4> + +<p>Prendiamo <a href="#Algoritmo_JXON_3" title="Vai all'algoritmo JXON #3">il terzo algoritmo</a> come l'algoritmo di conversione JXON più rappresentativo. Un singolo nodo XML di tipo <code>Element</code> può avere in totale otto differenti configurazioni a seconda di quello che contiene. Esso può essere:</p> + +<ol> + <li>un elemento vuoto,</li> + <li>un elemento contenente al suo interno solamente un nodo di testo,</li> + <li>un elemento vuoto ma contenente attributi,</li> + <li>un elemento con attributi contenente al suo interno solamente un nodo di testo,</li> + <li>un elemento contenente ulteriori elementi-figli con nomi diversi,</li> + <li>un elemento contenente ulteriori elementi-figli con nomi uguali,</li> + <li>un elemento contenente ulteriori elementi-figli e un unico nodo di testo (testo <em>contiguo</em>),</li> + <li>un elemento contenente ulteriori elementi-figli e più nodi di testo (testo <em>non contiguo</em>).</li> +</ol> + +<p>The following table shows the corresponding conversion patterns between XML and JSON according to the <a href="#Algoritmo_JXON_3" title="Vai all'algoritmo JXON #3">third algorithm</a>.</p> + +<table> + <thead> + <tr> + <th style="background: #faf9e2; color: #5d5636; text-align: center;"><strong>Case</strong></th> + <th style="background: #faf9e2; color: #5d5636; text-align: center;"><strong>XML</strong></th> + <th style="background: #faf9e2; color: #5d5636; text-align: center;"><strong>JSON</strong></th> + <th style="background: #faf9e2; color: #5d5636; text-align: center;"><strong>Javascript access</strong></th> + </tr> + </thead> + <tbody> + <tr> + <td style="background: #f6f6f6;">1</td> + <td style="background: #f6f6f6;"><code><animal/></code></td> + <td style="background: #f6f6f6;"><code>"animal": true</code></td> + <td style="background: #f6f6f6;"><code>myObject.animal</code></td> + </tr> + <tr> + <td style="background: #e7e5dc;">2</td> + <td style="background: #e7e5dc;"><code><animal>text</animal></code></td> + <td style="background: #e7e5dc;"><code>"animal": "text"</code></td> + <td style="background: #e7e5dc;"><code>myObject.animal</code></td> + </tr> + <tr> + <td style="background: #f6f6f6;">3</td> + <td style="background: #f6f6f6;"><code><animal name="value" /></code></td> + <td style="background: #f6f6f6;"><code>"animal": {"@name": "value"}</code></td> + <td style="background: #f6f6f6;"><code>myObject.animal["@name"]</code></td> + </tr> + <tr> + <td style="background: #e7e5dc;">4</td> + <td style="background: #e7e5dc;"><code><animal name="value">text</animal></code></td> + <td style="background: #e7e5dc;"><code>"animal": { "@name": "value", "keyValue": "text" }</code></td> + <td style="background: #e7e5dc;"><code>myObject.animal["@name"]</code>, <code>myObject.animal.keyValue</code></td> + </tr> + <tr> + <td style="background: #f6f6f6;">5</td> + <td style="background: #f6f6f6;"><code><animal> <dog>Charlie</dog> <cat>Deka</cat> </animal></code></td> + <td style="background: #f6f6f6;"><code>"animal": { "dog": "Charlie", "cat": "Deka" }</code></td> + <td style="background: #f6f6f6;"><code>myObject.animal.dog</code>, <code>myObject.animal.cat</code></td> + </tr> + <tr> + <td style="background: #e7e5dc;">6</td> + <td style="background: #e7e5dc;"><code><animal> <dog>Charlie</dog> <dog>Mad Max</dog> </animal></code></td> + <td style="background: #e7e5dc;"><code>"animal": { "dog": ["Charlie", "Mad Max"] }</code></td> + <td style="background: #e7e5dc;"><code>myObject.animal.dog[0]</code>, <code>myObject.animal.dog[1]</code></td> + </tr> + <tr> + <td style="background: #f6f6f6;">7</td> + <td style="background: #f6f6f6;"><code><animal> in my house <dog>Charlie</dog> </animal></code></td> + <td style="background: #f6f6f6;"><code>"animal": { "keyValue": "in my house", "dog": "Charlie" }</code></td> + <td style="background: #f6f6f6;"><code>myObject.animal.keyValue</code>, <code>myObject.animal.dog</code></td> + </tr> + <tr> + <td style="background: #e7e5dc;">8</td> + <td style="background: #e7e5dc;"><code><animal> in my ho <dog>Charlie</dog> use </animal></code></td> + <td style="background: #e7e5dc;"><code>"animal": { "keyValue": "in my house", "dog": "Charlie" }</code></td> + <td style="background: #e7e5dc;"><code>myObject.animal.keyValue</code>, <code>myObject.animal.dog</code></td> + </tr> + </tbody> +</table> + +<h4 id="Considerazioni_sul_codice">Considerazioni sul codice</h4> + +<p>In these examples we chose to use a property named <code>keyValue</code> for the text content. The lack of standars for XML to JSON conversion leads developers to choose several property names for the text content of XML <code>Element</code> nodes which contain also other child nodes. Sometimes it is used a property called <code>$</code>. Other times it is used a property called <code>#text</code>. In the algorithms proposed here you can easily change this name, depending on your needs.</p> + +<p>The choice of using a <code>true</code> value instead of a <code>null</code> value to represent empty nodes is due to the fact that when in an XML document there is an empty node the reason is often to express a <code>Boolean</code> content, as in this case:</p> + +<pre class="brush: xml"><car> + <type>Ferrari</type> + <bought /> +</car> +</pre> + +<p>If the value were <code>null</code> it would be more cumbersome to launch a code like this:</p> + +<pre class="brush: js">if (myObject.car.bought) { + // do something +} +</pre> + +<div class="note">According to our <a href="#Algoritmo_JXON_3" title="Vai all'algoritmo JXON #3">terzo algoritmo</a> and our <a href="#Algoritmo_JXON_4" title="Vai all'algoritmo JXON #4">quarto algoritmo</a>, just <code>Text</code> nodes or <code>CDATASection</code> nodes which contain nothing but white spaces (precisely: <code>/^\s+$/</code>) are parsed as <code>null</code>.</div> + +<p>An important consideration is that, using the third or the fourth algorithm, an XML Document can be used to create any type of Javascript object. For example, If you want to create an object like the following:</p> + +<pre class="brush: js">{ + "bool": true, + "array": ["Cinema", "Hot dogs", false], + "object": { + "nickname": "Jack", + "registration_date": new Date(1995, 11, 25), + "privileged_user": true + }, + "num": 99, + "text": "Hello World!" +} +</pre> + +<p>you must just create an XML document with the following structure:</p> + +<pre class="brush: xml"><bool>true</bool> +<array>Cinema</array> +<array>Hot dogs</array> +<array>false</array> +<object> + <nickname>Jack</nickname> + <registration_date>Dec 25, 1995</registration_date> + <privileged_user /> +</object> +<num>99</num> +<text>Hello World!</text> +</pre> + +<p>This example also shows how the ideal JXON document is an XML document designed specifically to be converted in JSON format.</p> + +<h3 id="Costruire_file_a_partire_da_istanze_di_Document">Costruire file a partire da istanze di <code>Document</code></h3> + +<p>First, create a DOM tree as described in the <a href="/it/Come_creare_un_albero_DOM" title="it/Come_creare_un_albero_DOM">Come creare un albero DOM</a> article. If you have already have a DOM tree from using <a href="/it/XMLHttpRequest" title="it/XMLHttpRequest">XMLHttpRequest</a>, skip to the end of this section.</p> + +<p>Now, let's serialize <code>doc</code> — the DOM tree — to a file (you can read more <a href="/en/Code_snippets/File_I//O" title="en/Code_snippets/File_I//O">about using files in Mozilla</a>):</p> + +<pre class="brush: js">var oFOStream = Components.classes["@mozilla.org/network/file-output-stream;1"].createInstance(Components.interfaces.nsIFileOutputStream); +var oFile = Components.classes["@mozilla.org/file/directory_service;1"].getService(Components.interfaces.nsIProperties).get("ProfD", Components.interfaces.nsILocalFile); // get profile folder +oFile.append("extensions"); // extensions sub-directory +oFile.append("{5872365E-67D1-4AFD-9480-FD293BEBD20D}"); // GUID of your extension +oFile.append("myXMLFile.xml"); // filename +oFOStream.init(oFile, 0x02 | 0x08 | 0x20, 0664, 0); // write, create, truncate +(new XMLSerializer()).serializeToStream(doc, oFOStream, ""); // rememeber, doc is the DOM tree +oFOStream.close(); +</pre> + +<h3 id="Costruire_file_a_partire_da_istanze_di_XMLHttpRequest">Costruire file a partire da istanze di <code>XMLHttpRequest</code></h3> + +<p>If you already have a DOM tree from using <a href="/it/XMLHttpRequest" title="it/XMLHttpRequest">XMLHttpRequest</a>, use the same code as above but replace <code>serializer.serializeToStream(doc, oFOStream, "")</code> with <code>serializer.serializeToStream(xmlHttpRequest.responseXML.documentElement, oFOStream, "")</code> where <code>xmlHttpRequest</code> is an instance of <code>XMLHttpRequest</code>.</p> + +<p>Note that this first parses the XML retrieved from the server, then re-serializes it into a stream. Depending on your needs, you could just save the <code>xmlHttpRequest.responseText</code> directly.</p> + +<h3 id="Resources">Resources</h3> + +<ul> + <li><a class="external" href="http://xulplanet.com/tutorials/mozsdk/xmlparse.php">Parsing and Serializing XML su XUL Planet</a></li> +</ul> diff --git a/files/it/web/html/attributi/index.html b/files/it/web/html/attributes/index.html index 7bb21c96a2..2da4139452 100644 --- a/files/it/web/html/attributi/index.html +++ b/files/it/web/html/attributes/index.html @@ -1,7 +1,8 @@ --- title: Attributi -slug: Web/HTML/Attributi +slug: Web/HTML/Attributes translation_of: Web/HTML/Attributes +original_slug: Web/HTML/Attributi --- <p>Gli elementi in HTML hanno <strong>attributi</strong>; questi sono valori addizionali che configurano l'elemento o modificano in vari modi il suo comportamento.</p> <h2 id="Lista_degli_attributi">Lista degli attributi</h2> diff --git a/files/it/web/html/canvas/drawing_graphics_with_canvas/index.html b/files/it/web/html/canvas/drawing_graphics_with_canvas/index.html deleted file mode 100644 index 1495605ec5..0000000000 --- a/files/it/web/html/canvas/drawing_graphics_with_canvas/index.html +++ /dev/null @@ -1,162 +0,0 @@ ---- -title: Drawing graphics with canvas -slug: Web/HTML/Canvas/Drawing_graphics_with_canvas -translation_of: Web/API/Canvas_API/Tutorial -translation_of_original: Web/API/Canvas_API/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/web/html/element/figura/index.html b/files/it/web/html/element/figure/index.html index 6a1f4b019f..751a1b0ea6 100644 --- a/files/it/web/html/element/figura/index.html +++ b/files/it/web/html/element/figure/index.html @@ -1,6 +1,6 @@ --- title: <figure> -slug: Web/HTML/Element/figura +slug: Web/HTML/Element/figure tags: - Element - Image @@ -8,6 +8,7 @@ tags: - Presentation - Reference translation_of: Web/HTML/Element/figure +original_slug: Web/HTML/Element/figura --- <div>{{HTMLRef}}</div> diff --git a/files/it/web/html/forms_in_html/index.html b/files/it/web/html/forms_in_html/index.html deleted file mode 100644 index 509b0a278f..0000000000 --- a/files/it/web/html/forms_in_html/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: Forms in HTML5 -slug: Web/HTML/Forms_in_HTML -translation_of: Learn/HTML/Forms/HTML5_updates ---- -<div> - {{gecko_minversion_header("2")}}</div> -<h2 id="Sommario">Sommario</h2> -<p>Gli elementi e gli attributi dei form in <strong>HTML5</strong> forniscono un mark-up più ricco di valore semantico rispetto ad HTML4, e alleggeriscono gli sviluppatori dalla necessità di scripting e styling intensivo richiesta da HTML4. Le caratteristiche dei form HTML5 generano anche una migliore esperienza utente, rendendo i form più coerenti tra i diversi siti web fornendo un feedback immediato all'utente in merito ai dati inseriti. La funzionalità viene fornita anche agli utenti che hanno disabilitato lo scripting nel browser.</p> -<p>Questa sezione descrive gli elementi nuovi o modificati in HTML5, che sono supportati da Gecko / Firefox, versione 4 o superiore.</p> -<h2 id="The_input_element" name="The_input_element">L'elemento <code><input></code></h2> -<p>L'elemento <code>{{HTMLElement("input")}}</code> ha alcuni nuovi valori per l'attributo {{htmlattrxref("type", "input")}}.</p> -<ul> - <li><code>search</code>: L'elemento rappresenta un campo di ricerca. Le interruzioni di riga vengono rimosse automaticamente dal valore immesso, ma nessun'altra sintassi viene imposta.</li> - <li><code>tel</code>: L'elemento rappresenta un controllo per la modifica di un numero telefonico. Le interruzioni di riga vengono rimosse automaticamente dal valore immesso, ma nessun'altra sintassi viene imposta, dato che la formattazione dei numeri di telefono varia notevolmente a livello internazionale. È possibile utilizzare attributi quali {{htmlattrxref("pattern", "input")}} e {{htmlattrxref("maxlength", "input")}} per limitare i valori immessi nel controllo.</li> - <li><code>url</code>: L'elemento rappresenta un controllo per la modifica di un <a class="external" href="http://it.wikipedia.org/wiki/URL" title="http://it.wikipedia.org/wiki/URL">URL</a>. Le interruzioni di riga e gli spazi vuoti finali vengono eliminati automaticamente dal valore immesso.</li> - <li> - <p><code>email</code>: L'elemento rappresenta un controllo per la modifica di un indirizzo email. Le interruzioni di riga vengono rimosse automaticamente dal valore immesso. Un indirizzo e-mail non valido può essere immesso, ma il campo di input verrà validato solo se l'indirizzo di posta elettronica soddisfa la produzione ABNF <code>1*( atext / "." ) "@" ldh-str 1*( "." ldh-str )</code> dove <code>atext</code> è definito in <a class="external" href="http://tools.ietf.org/html/rfc5322#section-3.2.3">RFC 5322 sezione 3.2.3</a>, e <code>ldh-str</code> è definito in <a class="external" href="http://tools.ietf.org/html/rfc1034#section-3.5">RFC 1034 sezione 3.5</a>.</p> - <div class="note"> - <strong>Nota:</strong> Se l'attributo {{htmlattrxref("multiple", "input")}} è presente, potranno essere inseriti diversi indirizzi email nel {{HTMLElement("input")}}, ad esempio una lista di email separate da virgole, ma questa funzionalità al momento non è stata implementata in Firefox.</div> - </li> -</ul> -<p>L'elemento {{HTMLElement("input")}} ha anche nuovi attributi:</p> -<ul> - <li>{{htmlattrxref("list", "input")}}: l'ID di un elemento {{HTMLElement("datalist")}} il cui contenuto, che consiste in elementi {{HTMLElement("option")}}, dovrà essere utilizzato come suggerimento: le {{HTMLElement("option")}} (opzioni) vengono visualizzate nell'area dedicata ai suggerimenti del campo di input.</li> - <li>{{htmlattrxref("pattern", "input")}}: Un'espressione regolare con cui il valore del controllo viene confrontato. Può essere usato negli {{HTMLElement("input")}} di tipo <code>text</code>, <code>tel</code>, <code>search</code>, <code>url</code>, ed <code>email</code>.</li> - <li>{{htmlattrxref("form", "input")}}: Una stringa indicante a quale elemento {{HTMLElement("form")}} "appartiene" l'input. Ogni input può appartenere ad un solo form.</li> - <li>{{htmlattrxref("formmethod", "input")}}: Una stringa indicante il metodo HTTP (GET o POST) da usare per l'invio dei dati al server; sovrascrive l'attributo {{htmlattrxref("method", "form")}} dell'elemento {{HTMLElement("form")}}, se definito. L'attributo {{htmlattrxref("formmethod", "input")}} può essere usato negli {{HTMLElement("input")}} di tipo <code>image</code> o <code>submit</code>, e quando l'attributo {{htmlattrxref("form", "input")}} è stato impostato.</li> - <li>{{htmlattrxref("x-moz-errormessage", "input")}} {{non-standard_inline}}: Una stringa che contiene un messaggio da visualizzare quando il campo non passa la validazione. Questo attributo è un'estensione di Mozilla, non rientra negli standard.</li> -</ul> -<h2 id="The_form_element" name="The_form_element">L'elemento <code><form></code></h2> -<p>L'elemento {{HTMLElement("form")}} ha un nuovo attributo:</p> -<ul> - <li>{{htmlattrxref("novalidate", "form")}}: Questo attributo fa in modo che il form <strong>non</strong> richieda la validazione.</li> -</ul> -<h2 id="The_datalist_element" name="The_datalist_element">L'elemento <code><datalist></code></h2> -<p>L'elemento {{HTMLElement("datalist")}} racchiude una lista di elementi {{HTMLElement("option")}} da suggerire all'utente durante la compilazione di un {{HTMLElement("input")}}.</p> -<p>Puoi aggiungere l'attributo {{htmlattrxref("list", "input")}} ad un elemento {{HTMLElement("input")}} per collegare un campo specifico ad un elemento {{HTMLElement("datalist")}} specifico.</p> -<h2 id="The_output_element" name="The_output_element">L'elemento <code><output></code></h2> -<p>L'elemento <code>{{HTMLElement("output")}}</code> rappresenta il risultato di una computazione (un calcolo).</p> -<p>Puoi usare l'attributo {{htmlattrxref("for", "output")}} per specificare una relazione tra un elemento <code>{{HTMLElement("output")}}</code> e altri elementi del documento che hanno influenzato la computazione (come input o parametri). Il valore dell'attributo {{htmlattrxref("for", "output")}} è una lista di ID degli altri elementi separati da spazi.</p> -<p>{{non-standard_inline}} Gecko 2.0 (ma non necessariamente altri motori di rendering dei browser) supporta la definizione di vincoli di validità personalizzati e messaggi di errore per gli elementi {{HTMLElement("output")}}, e pertanto applica le pseudo-classi CSS {{Cssxref(":invalid")}}, {{Cssxref(":valid")}}, {{Cssxref(":-moz-ui-invalid")}}, e {{Cssxref(":-moz-ui-valid")}} anche ad esso. Ciò può essere utile in situazioni in cui il risultato calcolato viola una regola, ma nessun valore immesso specifico lo fa (per esempio, "La somma totale delle percentuali non deve superare il 100%").</p> -<h2 id="The_placeholder_attribute" name="The_placeholder_attribute">L'attributo <code><placeholder></code> (testo segnaposto)</h2> -<p>L'attributo {{htmlattrxref("placeholder", "input")}} si applica agli elementi {{HTMLElement("input")}} e {{HTMLElement("textarea")}}, fornendo all'utente un suggerimento su cosa dovrebbe immettere nel campo. Il testo segnaposto non deve contenere interruzioni di linea.</p> -<h2 id="The_autofocus_attribute" name="The_autofocus_attribute">L'attributo <code><autofocus></code></h2> -<p>L'attributo {{htmlattrxref("autofocus", "input")}} consente di specificare che un campo dovrebbero ricevere il focus (dovrebbe essere "focalizzato") al caricamento della pagina, a meno che l'utente non decida altrimenti, per esempio immettendo dati in un altro campo. L'attributo <code>autofocus</code>, Booleano, può essere assegnato ad un solo campo per ciascun form. Si applica agli elementi <code>{{HTMLElement("input")}}</code>, <code>{{HTMLElement("button")}}</code>, <code>{{HTMLElement("select")}}</code> e <code>{{HTMLElement("textarea")}}</code>. Unica eccezione: non può essere assegnato agli elementi <code>{{HTMLElement("input")}}</code> che abbiano l'attributo {{htmlattrxref("type", "input")}} impostato su <code>hidden</code> (ovviamente non si può focalizzare un elemento nascosto).</p> -<h2 id="The_label.control_DOM_property" name="The_label.control_DOM_property">La proprietà label.control del DOM</h2> -<p>L'interfaccia DOM <code><a href="/en-US/docs/DOM/HTMLLabelElement" title="DOM/HTMLLabelElement">HTMLLabelElement</a></code> fornisce una proprietà extra, oltre alle proprietà che corrispondono agli attributi dell'elemento HTML <code>{{HTMLElement("label")}}</code>. La proprietà <strong>control</strong> restituisce il campo etichettato, cioè il campo a cui si riferisce l'etichetta (label), che è determinato dall'attributo {{htmlattrxref("for", "label")}} (se definito) o dal primo campo contenuto nell'etichetta.</p> -<h2 id="Constraint_Validation" name="Constraint_Validation">Vincoli di Validazione</h2> -<p>HTML5 fornisce sintassi ed elementi API per supportare la validazione lato client dei form. Anche se questa funzionalità non sostituisce la validazione lato server, che è ancora necessaria per la protezione e l'integrità dei dati, la validazione lato client può fornire una migliore esperienza utente, dando all'utente un feedback immediato sui dati immessi.</p> -<p>Se l'attributo <code>title</code> viene impostato su di un elemento {{HTMLElement("input")}}, il suo valore è usato come tooltip. Tuttavia, se la validazione fallisce, il tooltip sarà sostituito con un messaggio di errore. È possibile personalizzare tale messaggio di errore usando l'attributo non-standard {{htmlattrxref("x-moz-errormessage")}} o con il metodo <code>setCustomValidity()</code>.</p> -<pre class="brush: html"><input type="email" title="Si prega di fornire una e-mail" x-moz-errormessage="E-mail non valida"></pre> -<div class="note"> - <strong>Nota:</strong> I vincoli di validazione non sono supportati dagli elementi {{HTMLElement("button")}}; per assegnare uno stile ai bottoni in base allo status di validazione del form, usare la pseudo-classe {{cssxref(":-moz-submit-invalid")}}.</div> -<h3 id="HTML_Syntax_for_Constraint_Validation" name="HTML_Syntax_for_Constraint_Validation">Sintassi HTML per Vincolare la Validazione</h3> -<p>I seguenti elementi di sintassi HTML5 possono essere usati per specificare i vincoli sui dati immessi nel form.</p> -<ul> - <li>L'attributo {{htmlattrxref("required", "input")}} nell'elemento {{HTMLElement("input")}}, {{HTMLElement("select")}} e {{HTMLElement("textarea")}} indica che il campo deve essere compilato. (Sull'elemento {{HTMLElement("input")}}, {{htmlattrxref("required", "input")}} si applica solo in combinazione con alcuni valori dell'attributo {{htmlattrxref("type", "input")}})</li> - <li>L'attributo {{htmlattrxref("pattern", "input")}} nell'elemento {{HTMLElement("input")}} vincola il valore in modo che corrisponda una specifica espressione regolare.</li> - <li>Gli attributi {{htmlattrxref("min", "input")}} e {{htmlattrxref("max", "input")}} nell'elemento {{HTMLElement("input")}} vincola il valore specificando il valore minimo e massimo che può essere immesso.</li> - <li>L'attributo {{htmlattrxref("step", "input")}} nell'elemento {{HTMLElement("input")}} (se usato in combinazione con gli attributi {{htmlattrxref("min", "input")}} e {{htmlattrxref("max", "input")}} ) vincola la granularità dei valori che possono essere immessi. I valori che non corrispondono ad uno degli "step" consentiti non passano la validazione.</li> - <li>L'attributo {{htmlattrxref("maxlength", "input")}} negli elementi {{HTMLElement("input")}} e {{HTMLElement("textarea")}} vincola il numero massimo di caratteri (in base a punti di codice Unicode) che l'utente può immettere.</li> - <li>I valori <code>url</code> e <code>email</code> nell'attributo {{htmlattrxref("type", "input")}} restringono i valori accettati rispettivamente ad un URL o ad un indirizzo e-mail valido.</li> -</ul> -<p>In aggiunta, è possibile evitare i vincoli di validazione specificando l'attributo {{htmlattrxref("novalidate", "form")}} nel {{HTMLElement("form")}}, o l'attributo {{htmlattrxref("formnovalidate", "button")}} nell'elemento {{HTMLElement("button")}} o nell'elemento {{HTMLElement("input")}} (quando l'attributo {{htmlattrxref("type", "input")}} è impostato su <code>submit</code> o <code>image</code>). Questi attributi indicano che il form <strong>non</strong> deve essere validato.</p> -<h3 id="Constraint_Validation_API" name="Constraint_Validation_API">API per i Vincoli di Validazione</h3> -<p>Le seguenti proprietà e metodi del DOM, correlati ai vincoli di validazione, sono disponibili agli scripts lato client:</p> -<ul> - <li>Negli oggetti <code><a href="/en-US/docs/DOM/HTMLFormElement" title="DOM/HTMLFormElement">HTMLFormElement</a></code>, il metodo <code>checkValidity()</code> restituisce "true" se tutti gli elementi associati a tale elemento del form che sono soggetti a validazione soddisfano i loro vincoli, e "false" se non lo fanno.</li> - <li>On <a href="/en-US/docs/HTML/Content_categories#Form-associated" title="HTML/Content Categories#form-associated">form-associated elements</a>: - <ul> - <li>La proprietà <code>willValidate</code> è "false" se l'elemento non soddisfa i vincoli di validazione.</li> - <li>La proprietà <code>validity</code> è un oggetto <code><a href="/en-US/docs/DOM/ValidityState" title="DOM/ValidityState Interface">ValidityState</a></code> rappresentante lo stato di validazione dell'elemento.</li> - <li>La proprietà <code>validationMessage</code> è un messaggio che descrive eventuali errori relativi ai vincoli impostati sull'elemento.</li> - <li>Il metodo <code>checkValidity()</code>, se l'elemento non soddisfa uno o più dei suoi vincoli, o true in caso contrario.</li> - <li>Il metodo <code>setCustomValidity()</code> imposta un messaggio di errore personalizzato, permettendo anche ai vincoli personalizzati di essere imposti e validati, oltre a quelli predefiniti.</li> - </ul> - </li> -</ul> -<h2 id="Vedi_anche">Vedi anche</h2> -<ul> - <li><a href="/en-US/docs/HTML/Forms" title="/en-US/docs/HTML/Forms">Guida ai Forms HTML</a></li> -</ul> diff --git a/files/it/web/html/riferimento/index.html b/files/it/web/html/reference/index.html index 6dfc71219d..5f66c954ec 100644 --- a/files/it/web/html/riferimento/index.html +++ b/files/it/web/html/reference/index.html @@ -1,6 +1,6 @@ --- title: Riferimento HTML -slug: Web/HTML/Riferimento +slug: Web/HTML/Reference tags: - Elementi - HTML @@ -8,6 +8,7 @@ tags: - Web - tag translation_of: Web/HTML/Reference +original_slug: Web/HTML/Riferimento --- <div>{{HTMLSidebar}}</div> diff --git a/files/it/web/html/utilizzare_application_cache/index.html b/files/it/web/html/using_the_application_cache/index.html index 2c35bbaeae..2103febcb3 100644 --- a/files/it/web/html/utilizzare_application_cache/index.html +++ b/files/it/web/html/using_the_application_cache/index.html @@ -1,7 +1,8 @@ --- title: Utilizzare l'application cache -slug: Web/HTML/utilizzare_application_cache +slug: Web/HTML/Using_the_application_cache translation_of: Web/HTML/Using_the_application_cache +original_slug: Web/HTML/utilizzare_application_cache --- <h2 id="Introduzione">Introduzione</h2> diff --git a/files/it/web/http/basi_http/index.html b/files/it/web/http/basics_of_http/index.html index cbb668f329..ec8f4144a0 100644 --- a/files/it/web/http/basi_http/index.html +++ b/files/it/web/http/basics_of_http/index.html @@ -1,7 +1,8 @@ --- title: Le basi dell'HTTP -slug: Web/HTTP/Basi_HTTP +slug: Web/HTTP/Basics_of_HTTP translation_of: Web/HTTP/Basics_of_HTTP +original_slug: Web/HTTP/Basi_HTTP --- <div>{{HTTPSidebar}}</div> diff --git a/files/it/web/http/compressione/index.html b/files/it/web/http/compression/index.html index 59154440d8..2ef1547341 100644 --- a/files/it/web/http/compressione/index.html +++ b/files/it/web/http/compression/index.html @@ -1,7 +1,8 @@ --- title: Compressione in HTTP -slug: Web/HTTP/Compressione +slug: Web/HTTP/Compression translation_of: Web/HTTP/Compression +original_slug: Web/HTTP/Compressione --- <div>{{HTTPSidebar}}</div> diff --git a/files/it/web/http/negoziazione-del-contenuto/index.html b/files/it/web/http/content_negotiation/index.html index e2be7de758..53312b1461 100644 --- a/files/it/web/http/negoziazione-del-contenuto/index.html +++ b/files/it/web/http/content_negotiation/index.html @@ -1,7 +1,8 @@ --- title: Negoziazione del contenuto -slug: Web/HTTP/negoziazione-del-contenuto +slug: Web/HTTP/Content_negotiation translation_of: Web/HTTP/Content_negotiation +original_slug: Web/HTTP/negoziazione-del-contenuto --- <div>Nel protocollo <a href="/it-IT/docs/Glossary/HTTP">HTTP</a>, la <em><strong>negoziazione del contenuto</strong></em> è il meccanismo utilizzato per servire diverse rappresentazioni di una risorsa avente medesimo URI, in modo che il programma utente possa specificare quale sia più adatta all'utente (ad esempio, quale lingua di un documento, quale formato immagine o quale codifica del contenuto).</div> diff --git a/files/it/web/http/headers/user-agent/firefox/index.html b/files/it/web/http/headers/user-agent/firefox/index.html new file mode 100644 index 0000000000..2a082b77f6 --- /dev/null +++ b/files/it/web/http/headers/user-agent/firefox/index.html @@ -0,0 +1,41 @@ +--- +title: Gli User Agent di Gecko +slug: Web/HTTP/Headers/User-Agent/Firefox +translation_of: Web/HTTP/Headers/User-Agent/Firefox +original_slug: Gli_User_Agent_di_Gecko +--- +<p>Lista degli user agent rilasciati da Netscape e AOL basati su Gecko™.</p> + +<h3 id="Uso_appropriato" name="Uso_appropriato">Uso appropriato</h3> + +<p>Mozilla consiglia di non utilizzare le stringhe User Agent come mezzo primario di identificazione del browser. Si veda <a href="it/Identificazione_del_browser_e_supporto_cross_browser">Identificazione del browser e supporto cross browser</a> per uno sguardo in profondità ai vari approcci per la rilevazione del browser.</p> + +<p>In particolare, Mozilla raccomanda di utilizzare lo user agent solo per l'identificazione lato server. Se il codice già esistente per l'identificazione lato client utilizza lo user agent, è possibile semplicemente cercare la stringa "Gecko" per sapere se il browser è basato su questo motore.</p> + +<p>Per l'identificazione di un browser che utilizza Gecko, è possibile utilizzare l'oggetto <a href="it/Referenza_DOM/navigator">navigator</a>.</p> + +<h3 id="Gli_User_Agent_di_Gecko" name="Gli_User_Agent_di_Gecko">Gli User Agent di Gecko</h3> + +<p>Si veda <a class="external" href="http://www.mozilla.org/build/revised-user-agent-strings.html">mozilla.org's user-agent strings reference</a> per i valori specifici delle voci<em>Platform</em> ,<em>Security</em> ,<em>OS-or-CPU</em> e<em>Localization</em> .</p> + +<ul> + <li>Mozilla/5.0 (Platform; Security; OS-or-CPU; Localization; rv:1.4) Gecko/20030624 Netscape/7.1 (ax)</li> + <li>Mozilla/5.0 (Platform; Security; OS-or-CPU; Localization; rv:1.0.2) Gecko/20030208 Netscape/7.02</li> + <li>Mozilla/5.0 (Platform; Security; OS-or-CPU; Localization; rv:1.0.2) Gecko/20021120 Netscape/7.01</li> + <li>Mozilla/5.0 (Platform; Security; OS-or-CPU; Localization; rv:1.0.1) Gecko/20020823 Netscape/7.0</li> + <li>Mozilla/5.0 (Macintosh; U; PPC Mac OS X; en-US; rv:1.0.1) Gecko/20020730 AOL/7.0</li> + <li>Mozilla/5.0 (Platform; Security; OS-or-CPU; Localization; rv:1.0rc2) Gecko/20020512 Netscape/7.0b1</li> + <li>Mozilla/5.0 (Platform; Security; OS-or-CPU; Localization; rv:0.9.4.2) Gecko/20020220 CS 2000 7.0/7.0 + <ul> + <li>Mozilla/5.0 (Windows; U; Win98; en-US; rv:0.9.4.2) Gecko/20020502 CS 2000 7.0/7.0</li> + </ul> + </li> + <li>Mozilla/5.0 (Platform; Security; OS-or-CPU; Localization; rv:0.9.4.1) Gecko/20020508 Netscape6/6.2.3</li> + <li>Mozilla/5.0 (Platform; Security; OS-or-CPU; Localization; rv:0.9.4.1) Gecko/20020314 Netscape6/6.2.2</li> + <li>Mozilla/5.0 (Platform; Security; OS-or-CPU; Localization; rv:0.9.4) Gecko/20011128 Netscape6/6.2.1</li> + <li>Mozilla/5.0 (Platform; Security; OS-or-CPU; Localization; rv:0.9.2) Gecko/20010726 Netscape6/6.1</li> +</ul> + +<p>Per ulteriori dettagli sulle versioni di Netscape e Mozilla, si veda <a class="external" href="http://www.mozilla.org/releases/cvstags.html">mozilla.org cvstags reference</a>.</p> + +<p>{{ languages( { "ja": "ja/Gecko_User_Agent_Strings", "en": "en/Gecko_User_Agent_Strings", "fr": "fr/Les_cha\u00eenes_UserAgent_de_Gecko" } ) }}</p> diff --git a/files/it/web/http/link_prefetching_faq/index.html b/files/it/web/http/link_prefetching_faq/index.html new file mode 100644 index 0000000000..82faf960e9 --- /dev/null +++ b/files/it/web/http/link_prefetching_faq/index.html @@ -0,0 +1,127 @@ +--- +title: Link prefetching FAQ +slug: Web/HTTP/Link_prefetching_FAQ +tags: + - Gecko + - HTML + - HTTP + - Sviluppo_Web + - Tutte_le_categorie +translation_of: Web/HTTP/Link_prefetching_FAQ +original_slug: Link_prefetching_FAQ +--- +<h3 id="Cos.27.C3.A8_il_link_prefetching.3F" name="Cos.27.C3.A8_il_link_prefetching.3F">Cos'è il link prefetching?</h3> + +<p>Il link prefetching è un meccanismo del browser, che utilizza il tempo di inattività per il download o effettuare il<em>prefetch</em> dei documenti che l'utente potrebbe visitare in un futuro prossimo. Una pagina web fornisce dei consigli per il prefetching al browser, il quale dopo averla caricata, comincia in silenzio il prefetchinf dei documenti specificati e li memorizza nella sua cache. Quando l'utente visita uno dei documenti precaricati, quest'ultimo viene servito velocemente a partire dalla cache del browser.</p> + +<h3 id="Cosa_sono_i_prefetching_consigliati_.28prefetching_hints.29.3F" name="Cosa_sono_i_prefetching_consigliati_.28prefetching_hints.29.3F">Cosa sono i prefetching consigliati (prefetching hints)?</h3> + +<p>Il browser cerca o un tag HTML <code>link</code> o una intestazione HTTP <code>Link:</code> con una relazione tipo <code>next</code> o <code>prefetch</code>. Ecco un esempio usando il tag <code>link</code>:</p> + +<pre class="eval"><link rel="prefetch" href="/images/big.jpeg"> +</pre> + +<p>Lo stesso suggerimento di prefetch usando una intestazione <code>Link:</code>:</p> + +<pre class="eval">Link: </images/big.jpeg>; rel=prefetch +</pre> + +<p>L'intestazione Link: può anche essere specificata all'interno del documento HTML usando un tag <code>meta</code>:</p> + +<pre class="eval"><meta http-equiv="Link" content="&lt;/images/big.jpeg&gt;; rel=prefetch"> +</pre> + +<p>Il formato dell'intestazione <code>Link:</code> viene descritta nella <a class="external" href="http://tools.ietf.org/html/rfc2068" title="http://tools.ietf.org/html/rfc2068">RFC 2068</a>, sezione 19.6.2.4.</p> + +<div class="note">Nota: internamente facciamo riferimento ad una vecchia specifica di HTTP/1.1 dato che la nuova <a class="external" href="http://tools.ietf.org/html/rfc2616" title="http://tools.ietf.org/html/rfc2616">RFC 2616</a> non descrive l'intestazione <code>Link:</code>. Nonostante le intestazioni <code>Link:</code> non siano parte dello standard revisionato, vengono pratiacmente ancora usate dai server per specificare fogli di stile CSS, per questi ne facciamo qui uso.</div> + +<p>Il browser osserva tutti questi suggerimenti ed mette in attesa ogni richiesta per poi effettuare il prefetching nel periodo di inattività del browser. Possono esserci molteplici suggerumenti per ogni pagina, per cui avrebbe senso precaricare molteplici documenti. Ad esempio, il prossimo documento potrebbe contenere diverse immagini di grandi dimensioni.</p> + +<p>Seguono alcuni esempi:</p> + +<pre class="eval"><link rel="prefetch alternate stylesheet" title="Designed for Mozilla" href="mozspecific.css"> +<link rel="next" href="2.html"> +</pre> + +<h3 id="Viene_eseguito_il_prefetch_sui_tag_ancora_.28.3Ca.3E.29.3F" name="Viene_eseguito_il_prefetch_sui_tag_ancora_.28.3Ca.3E.29.3F">Viene eseguito il prefetch sui tag ancora (<a>)?</h3> + +<p>No, solo i tag <code><link></code> con un tipo relazione <code>next</code> o <code>prefetch</code> vengono precaricati. Comunque, in caso di interesse sufficiente, potremmo pensare di estendere il supporto prefetching ai tag <a> che includono un tipo relazione <code>next</code> o <code>prefetch</code>. Fare questo potrebbe aiutare i fornitori di contenuti ad evitare il problema di aggiornare i link precaricati.</p> + +<h3 id="Il_prefetching_.C3.A8_attinente_agli_standard.3F" name="Il_prefetching_.C3.A8_attinente_agli_standard.3F">Il prefetching è attinente agli standard?</h3> + +<p>Si, il prefetching di link, come descritto in questo documento, non viola nessuno standard web. Infatti, le specifiche HTML 4.01 permettono esplicitamente la definizione di nuovi tipi relazione link (<a class="external" href="http://www.w3.org/TR/html4/types.html#type-links">vedere la Sezione 6.12: Link types</a>). Comunque, l'esatto meccanismo usato da Mozilla non è ancora parte dello standard. Un draft è in preparazione.</p> + +<h3 id="Come_viene_determinato_il_periodo_di_inattivit.C3.A0_.28idle.29_del_browser.3F" name="Come_viene_determinato_il_periodo_di_inattivit.C3.A0_.28idle.29_del_browser.3F">Come viene determinato il periodo di inattività (idle) del browser?</h3> + +<p>Nell'implementazione corrente (Mozilla 1.2), il tempo di inattività si determina usando l'API <code>nsIWebProgressListener</code>. Si collega un listener all'oggetto <code>nsIWebProgress</code> ("@mozilla.org/docloaderservice;1"). Da questo, si ricevono notifiche di start e stop, e si approssima il tempo di inattività come il periodo tra l'ultimo documento dal caricamento terminato ed il primo documento dal caricamento iniziato. La notifica dello stop dell'ultimo documento avviene approssimativamente quando il gestore onLoad inizia la sua attività per il documento. Questo accade quando si dà il via a richieste di prefetch. Se un frame figlio contiene suggerimenti di prefetching, il prefetch non inizierà fino a che non siano caricati il documento padre e tutti i figli.</p> + +<h3 id="Cosa_accade_se_viene_cliccato_un_link_mentre_viene_eseguito_il_prefetching_di_qualcosa.3F" name="Cosa_accade_se_viene_cliccato_un_link_mentre_viene_eseguito_il_prefetching_di_qualcosa.3F">Cosa accade se viene cliccato un link mentre viene eseguito il prefetching di qualcosa?</h3> + +<p>QUando l'utente clicca un link, o inizia un qualche tipo di caricamento di pagina, il prefetch di link si interrompe ed ogni suggerimento di prefetch viene ignorato. Se un documento precaricato è stato parzialmente scaricato, viene comunque memorizzato nella cache se il server invia una intestazione "Accept-Ranges: bytes". Questa intestazione viene tipicamente generata dal webserver nel fornire un documento statico. QUando l'utente visita realmente un documento precaricato, la rimanente porzione del documento viene caricata usando una richiesta HTTP byte-range.</p> + +<h3 id="Cosa_succede_se_si_sta_scaricando_qualcosa_in_background.3F_Il_prefetching_del_link_compete_per_la_larghezza_di_banda.3F" name="Cosa_succede_se_si_sta_scaricando_qualcosa_in_background.3F_Il_prefetching_del_link_compete_per_la_larghezza_di_banda.3F">Cosa succede se si sta scaricando qualcosa in background? Il prefetching del link compete per la larghezza di banda?</h3> + +<p>Si e no. Se si sta scaricando qualcosa usando Mozilla, il link prefetching verrà posticipato fino a che i download in background non saranno completati. Ad esempio, se si carica un gruppo di segnalibri (il che significa aprire diverse tab), ogni richiesta di prefetch iniziata da una delle pagine di segnalibro non inizierà fino a quando tutte le tab non avranno terminato il caricamento. Se si usa un'altra applicazione di rete, il link prefetching potrebbe competere per la banda con l'altra applicazione. Questo è un problema che speriamo di risolvere in futuro usando i servizi del sistema operativo per controllare il tempo di inattività della connesione.</p> + +<h3 id="Ci_sono_restrizioni_su_cosa_viene_eseguito_il_prefetching.3F" name="Ci_sono_restrizioni_su_cosa_viene_eseguito_il_prefetching.3F">Ci sono restrizioni su cosa viene eseguito il prefetching?</h3> + +<p>Si, solo gli URL <a class="external" href="http://" rel="freelink">http://</a> possono essere precaricati (URL <a class="link-https" href="https://" rel="freelink">https://</a> non sono mai precaricato per ragioni di sicurezza). Altri protocolli (come FTP) non forniscono un supporto abbastanza ricco per il caching da lato client. In aggiunta a questa restrizione, gli URL con<em>query strings</em> (stringhe di interrogazione) non sono precaricate. Questo perché alcuni URL inviano a documenti che non possono essere riutilizzati fuori dalla cache del browser, per cui il prefetching non darebbe grandi risultati. Abbiamo visto come siti esistenti utilizzino il tag <link rel="next"> con degli URL contenenti query string per fare riferimento al prossimo documento di una serie. Bugzilla ne è un esempio, e questo fa si che i sui report non siano memorizzabili in cache, per cui il prefetch degli URL raddoppierebbe il carico del server del pover Bugzilla! Si possono failmente pensare che altri siti siano stati progettati come Bugzilla, per cui noi esplicitamente non facciamo eseguire il prefetch degli URL con query string. (Avrebbe sensio permettere il prefecth di questi documenti quando è specificato il tipo relazione <code>rel=prefetch</code>, dato che non dovrebbe apparire in nessun contenuto esistente.) Non ci sono altre restrizioni sugli URL precaricati.</p> + +<h3 id="Mozilla_effettua_il_prefetch_di_documenti_da_host_differenti.3F" name="Mozilla_effettua_il_prefetch_di_documenti_da_host_differenti.3F">Mozilla effettua il prefetch di documenti da host differenti?</h3> + +<p>Si. Non ci sono restrizioni sull'origine dei documenti per il link prefetching. Litare il prefetching solo agli URL dello stesso server non offrirebbe nessun aumento della sicurezza del browser.</p> + +<h3 id="Le_richieste_da_prefetching_contengono_una_intestazione_Refer:_.3F" name="Le_richieste_da_prefetching_contengono_una_intestazione_Refer:_.3F">Le richieste da prefetching contengono una intestazione Refer: ?</h3> + +<p>Sì, le richieste da prefetch includono una intestazione HTTP <code>Referer:</code> indicante il documento dal quale il suggerimento di prefetch è stato estratto.</p> + +<p>Questo potrebbe avere impatto sul tracciamento dei refer solitamente usato in molti siti. Per questo, il link prefetching potrebbe non essere appropriato per tutti i contenuti. Comunque, è possibile istruire Mozilla per validare un documento precaricato quando l'utente segue un href verso il documento precaricato, specificando l'intestazione HTTP <code>Cache-control: must-revalidate</code>. Questa intestazione abilita la memorizzazione in cache, ma ha necessita di una richiesta di validazione <code>If-Modified-Since</code> o <code>If-None-Match</code> prima di servire il documento dalla cache stessa.</p> + +<h3 id="Come_amministratore_di_server.2C_posso_distinguere_tra_richieste_di_prefetch_e_richieste_normali.3F" name="Come_amministratore_di_server.2C_posso_distinguere_tra_richieste_di_prefetch_e_richieste_normali.3F">Come amministratore di server, posso distinguere tra richieste di prefetch e richieste normali?</h3> + +<p>Si, mandiamo la seguente intestazione insieme con la richiesta di prefetch:</p> + +<pre>X-moz: prefetch</pre> + +<p>Ovviamente, questa intestazione di richiesta non è del tutto standard, e potrebbe cambiare in future release di Mozilla.</p> + +<h3 id="C.27.C3.A8_una_opzione_per_disabilitare_il_prefetching_di_link.3F" name="C.27.C3.A8_una_opzione_per_disabilitare_il_prefetching_di_link.3F">C'è una opzione per disabilitare il prefetching di link?</h3> + +<p>Si, c'è una preferenza nascosta da impostare per disabilatare il link prefetching. Aggiungere questa linea a prefs.js nella directory del proprio profilo di Mozilla.</p> + +<pre>user_pref("network.prefetch-next",false);</pre> + +<p>Stiamo considerando di aggiungere una Interfaccia Utente per questa preferenza (<s>vedere {{ Bug(166648) }}</s>); in ogni caso, la nostra teoria è che se il link prefetching deve essere disabilitato allora qualcosa è sagliato nella sua implementazione. Cerchiamo di migliorare l'implementazione se questa si rivelasse errata, piuttosto che attenderci che gli utenti vadano a cercare qualche oscura voce di preferenza nell'interfaccia uente. Diamine, l'interfaccia utente di Mozilla per le opzioni è già abbastanza piena ;-)</p> + +<div class="note">Aggiornamento: causa la moltitudine di richieste, Mozilla 1.3+ include una opzione di preferenza nell'interfaccia utente per disabilitare il prefetching. Vedere Preferences->Advanced-> +<pre>user_pref("network.prefetch-next",false);</pre> +</div> + +<h3 id="Riguardo_alle_persone_che_pagano_per_avere_banda.3F" name="Riguardo_alle_persone_che_pagano_per_avere_banda.3F">Riguardo alle persone che pagano per avere banda?</h3> + +<p><span class="comment">Basically, there are two ways of looking at this issue: # websites can already cause things to be silently downloaded using JS/DOM hacks. # prefetching is a browser feature; users should be able to disable it easily. It is important that websites adopt <code><link></code> tag based prefetching instead of trying to roll-in silent downloading using various JS/DOM hacks. The <code><link></code> tag gives the browser the ability to know what sites are up to, and we can use this information to better prioritize document prefetching. The user preference to disable <code><link></code> tag prefetching may simply encourage websites to stick with JS/DOM hacks, and that would not be good for users. This is one reason why prefetching is enabled by default.</span></p> + +<h3 id="Quali_browser_supportano_il_link_prefetching.3F" name="Quali_browser_supportano_il_link_prefetching.3F">Quali browser supportano il link prefetching?</h3> + +<p>I browser basati su Mozilla 1.2 (o successivi) così come browser basati su Mozilla 1.0.2 (o successivi) supportano il prefetching. Questo include Firefox e Netscape 7.01+. Le build di Camino da Marzo 2003 sono basate su Mozilla 1.0.1, pre cui non supportano il prefetching.</p> + +<p><a class="external" href="http://gemal.dk/browserspy/prefetch.php">Effettua un test</a> con il tuo browser per vedere se supporta il Link Prefetching.</p> + +<h3 id="Cos.27altro_riguardo....3F" name="Cos.27altro_riguardo....3F">Cos'altro riguardo...?</h3> + +<p>Per qualasiasi altra domanda o commento riguardo al link prefetching, mandatele pure a me :-)</p> + +<h4 id="Vedere_inoltre..." name="Vedere_inoltre...">Vedere inoltre...</h4> + +<p><a class="external" href="http://www.edochan.com/programming/pf.htm">Prefetching Hints</a></p> + +<div class="originaldocinfo"> +<h2 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h2> + +<ul> + <li>Author(s): Darin Fisher (darin at meer dot net)</li> + <li>Last Updated Date: Updated: March 3, 2003</li> +</ul> +</div> + +<p>{{ languages( { "en": "en/Link_prefetching_FAQ" } ) }}</p> diff --git a/files/it/web/http/panoramica/index.html b/files/it/web/http/overview/index.html index f2cf4c990c..93aa350114 100644 --- a/files/it/web/http/panoramica/index.html +++ b/files/it/web/http/overview/index.html @@ -1,10 +1,11 @@ --- title: Una panoramica su HTTP -slug: Web/HTTP/Panoramica +slug: Web/HTTP/Overview tags: - HTTP - Protocolli translation_of: Web/HTTP/Overview +original_slug: Web/HTTP/Panoramica --- <div>{{HTTPSidebar}}</div> diff --git a/files/it/web/http/richieste_range/index.html b/files/it/web/http/range_requests/index.html index e6bbe43d19..06f965f218 100644 --- a/files/it/web/http/richieste_range/index.html +++ b/files/it/web/http/range_requests/index.html @@ -1,7 +1,8 @@ --- title: Richieste HTTP range -slug: Web/HTTP/Richieste_range +slug: Web/HTTP/Range_requests translation_of: Web/HTTP/Range_requests +original_slug: Web/HTTP/Richieste_range --- <div>{{HTTPSidebar}}</div> diff --git a/files/it/web/http/sessione/index.html b/files/it/web/http/session/index.html index e414eb9d19..77a226b673 100644 --- a/files/it/web/http/sessione/index.html +++ b/files/it/web/http/session/index.html @@ -1,7 +1,8 @@ --- title: Una tipica sessione HTTP -slug: Web/HTTP/Sessione +slug: Web/HTTP/Session translation_of: Web/HTTP/Session +original_slug: Web/HTTP/Sessione --- <div>{{HTTPSidebar}}</div> diff --git a/files/it/web/javascript/una_reintroduzione_al_javascript/index.html b/files/it/web/javascript/a_re-introduction_to_javascript/index.html index 4dc4a484a7..e0d779e1b1 100644 --- a/files/it/web/javascript/una_reintroduzione_al_javascript/index.html +++ b/files/it/web/javascript/a_re-introduction_to_javascript/index.html @@ -1,7 +1,8 @@ --- title: Una reintroduzione al Java Script (Tutorial JS) -slug: Web/JavaScript/Una_reintroduzione_al_JavaScript +slug: Web/JavaScript/A_re-introduction_to_JavaScript translation_of: Web/JavaScript/A_re-introduction_to_JavaScript +original_slug: Web/JavaScript/Una_reintroduzione_al_JavaScript --- <h2 id="Introduzione">Introduzione</h2> diff --git a/files/it/web/javascript/cosè_javascript/index.html b/files/it/web/javascript/about_javascript/index.html index c850023b92..04dc002900 100644 --- a/files/it/web/javascript/cosè_javascript/index.html +++ b/files/it/web/javascript/about_javascript/index.html @@ -1,7 +1,8 @@ --- title: Cos'è JavaScript -slug: Web/JavaScript/Cosè_JavaScript +slug: Web/JavaScript/About_JavaScript translation_of: Web/JavaScript/About_JavaScript +original_slug: Web/JavaScript/Cosè_JavaScript --- <div>{{JsSidebar}}</div> diff --git a/files/it/web/javascript/chiusure/index.html b/files/it/web/javascript/closures/index.html index deee56e54b..b45bf70944 100644 --- a/files/it/web/javascript/chiusure/index.html +++ b/files/it/web/javascript/closures/index.html @@ -1,7 +1,8 @@ --- title: Chiusure -slug: Web/JavaScript/Chiusure +slug: Web/JavaScript/Closures translation_of: Web/JavaScript/Closures +original_slug: Web/JavaScript/Chiusure --- <div>{{jsSidebar("Intermediate")}}</div> diff --git a/files/it/web/javascript/getting_started/index.html b/files/it/web/javascript/getting_started/index.html deleted file mode 100644 index d9c0357ebb..0000000000 --- a/files/it/web/javascript/getting_started/index.html +++ /dev/null @@ -1,331 +0,0 @@ ---- -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 ---- -<h2 id="Why_JavaScript.3F" name="Why_JavaScript.3F">Perché JavaScript?</h2> -<p>JavaScript è un linguaggio per computer potente, complicato, e spesso misconosciuto. Permette lo sviluppo rapido di applicazioni in cui gli utenti possono inserire i dati e vedere i risultati facilmente.</p> -<p>Il vantaggio primario di JavaScript, che è anche conosciuto come ECMAScript, è che è centrato intorno al Web browser, così da avere la capacità di produrre gli stessi risultati su tutte le piattaforme supportate dal browser. Gli esempi in questa pagina, proprio come Google Maps, girano su Linux, Windows, e OS X. Con la recente crescita di numerose librerie JavaScript è ora più facile traversare un documento, selezionare gli elementi del DOM, creare animazioni, trattare eventi, e sviluppare applicazioni Ajax. Diversamente dalla promozione intorno alle altre tecnologie spinta da vari interessi proprietari, JavaScript è realmente il solo linguaggio di programmazione "cross-platform" e "client-side" che è sia libero che universalmente adottato.</p> -<h2 id="What_you_should_already_know" name="What_you_should_already_know">Cosa dovresti già conoscere</h2> -<p>Iniziare a programmare con JavaScript è molto semplice. Tutto quello che serve per cominciare è un editor di testo e un Web browser.</p> -<p>Ci sono molte altre tecnologie che possono essere integrate e sviluppate insieme a Javascript che sono al di fuori di questo documento. Non aspettarti di fare un'intera applicazione come Google Maps tutta nel tuo primo giorno!</p> -<h2 id="Getting_Started" name="Getting_Started">Come iniziare</h2> -<p>Iniziare con JavaScript è molto semplice. Non devi aver precedentemente installato complicati programmi di sviluppo. Non devi conoscere come usare una shell, programmare Make, o usare un compilatore. JavaScript è interpretato dal tuo Web browser. Tutto quello che hai da fare è salvare il tuo programma come file testo e poi aprirlo nel tuo Web browser. E' tutto qui!</p> -<p>JavaScript è un linguaggio di programmazione ideale per linguaggi di computer introduttivi. Permette ai nuovi studenti di avere risposte immediate e insegna loro strumenti che essi troveranno di facile uso nella loro vita reale. Ciò è in assoluto contrasto con C, C++, and Java che sono veramente facili solo per sviluppatori software specializzati.</p> -<h2 id="Browser_Compatibility_Issues" name="Browser_Compatibility_Issues">Browser compatibility issues</h2> -<p>There are variations between what functionality is available in the different browsers. Mozilla, Chrome, Microsoft IE, Apple Safari, and Opera fluctuate in behavior. You can mitigate these issues by using the various cross-platform JavaScript APIs that are available. These APIs provide common functionality and hide these browser fluctuations from you.</p> -<h2 id="How_to_try_the_Examples" name="How_to_try_the_Examples">How to try the examples</h2> -<p>The examples below have some sample code. There are many ways to try these examples out. If you already have your own website, then you should be able to just save these examples as new Web pages on your website.</p> -<p>If you do not have your own website, you can save these examples as files on your computer and open them up with the Web browser you are using now. JavaScript is a very easy language to use for beginning programmers for this reason. You don't need a compiler or a development environment; you and your browser are all you need to get started!</p> -<p>You can also take use of some online programs like <a href="http://jsfiddle.net/">jsfiddle.net</a></p> -<h2 id="Example:_Catching_a_mouse_click" name="Example:_Catching_a_mouse_click">Example: Catching a mouse click</h2> -<p>The specifics of event handling (event types, handler registration, propagation, etc.) are too extensive to be fully covered in this simple example. However, this example cannot demonstrate catching a mouse click without delving a little into the JavaScript event system. Just keep in mind that this example will only graze the full details about JavaScript events and that if you wish to go beyond the basic capabilities described here, read more about the JavaScript event system.</p> -<p>'Mouse' events are a subset of the total events issued by a Web browser in response to user actions. The following is a list of the events emitted in response to a user's mouse action:</p> -<ul> - <li>Click - issued when a user clicks the mouse</li> - <li>DblClick - issued when a user double-clicks the mouse</li> - <li>MouseDown - issued when a user depresses a mouse button (the first half of a click)</li> - <li>MouseUp - issued when a user releases a mouse button (the second half of a click)</li> - <li>MouseOut - issued when the mouse pointer leaves the graphical bounds of the object</li> - <li>MouseOver - issued when the mouse pointer enters the graphical bounds of the object</li> - <li>MouseMove - issued when the mouse pointer moves while within the graphical bounds of the object</li> - <li>ContextMenu - issued when the user clicks using the right mouse button</li> -</ul> -<p>Note that in the latest versions of HTML, the inline event handlers, i.e. the ones added as tag attributes, are expected to be all lowercase and that event handlers in script are always all lowercase.</p> -<p>The simplest method for capturing these events, to register event handlers - using HTML - is to specify the individual events as attributes for your element. Example:</p> -<pre class="brush:js"> <span onclick="alert('Hello World!');">Click Here</span></pre> -<p>The JavaScript code you wish to execute can be inlined as the attribute value or you can call a function which has been defined in a <script> block within the HTML page:</p> -<pre class="brush:js"><script> - function clickHandler() { - alert("Hello, World!"); - } -</script> -<span onclick="clickHandler();">Click Here</span></pre> -<p>Additionally, the event object which is issued can be captured and referenced, providing the developer with access to specifics about the event such as which object received the event, the event's type, and which mouse button was clicked. Using the inline example again:</p> -<pre class="brush:js"><script> - function clickHandler(event) { - var eType = event.type; - /* the following is for compatibility */ - /* Moz populates the target property of the event object */ - /* IE populates the srcElement property */ - var eTarget = event.target || event.srcElement; - - alert( "Captured Event (type=" + eType + ", target=" + eTarget + ")" ); - } -</script> -<span onclick="clickHandler(event);">Click Here</span></pre> -<p>In addition to registering to receive events in your HTML, you can likewise set the same attributes of any HTMLElement objects generated by your JavaScript. The example below instantiates (creates) a span object, appends it to the page body, and registers the span object to receive mouse-over, mouse-out, mouse-down, and mouse-up events.</p> -<pre class="brush:js"><body></body> -<script> - function mouseeventHandler(event) { - /* The following is for compatibility */ - /* IE does NOT by default pass the event object */ - /* obtain a ref to the event if one was not given */ - if (!event) event = window.event; - - /* obtain event type and target as earlier */ - var eType = event.type; - var eTarget = event.target || event.srcElement; - alert(eType +' event on element with id: '+ eTarget.id); - } - - function onloadHandler() { - /* obtain a ref to the 'body' element of the page */ - var body = document.body; - /* create a span element to be clicked */ - var span = document.createElement('span'); - span.id = 'ExampleSpan'; - span.appendChild(document.createTextNode ('Click Here!')); - - /* register the span object to receive specific mouse events - - notice the lowercase of the events but the free choice in the names of the handlers you replace them with. - */ - span.onmousedown = mouseeventHandler; - span.onmouseup = mouseeventHandler; - span.onmouseover = mouseeventHandler; - span.onmouseout = mouseeventHandler; - - /* display the span on the page */ - body.appendChild(span); -} - -window.onload = onloadHandler; // since we replace the handler, we do NOT have () after the function name -</script></pre> -<h2 id="Example:_Catching_a_keyboard_event" name="Example:_Catching_a_keyboard_event">Example: Catching a keyboard event</h2> -<p>Similar to the "Catching a mouse event" example above, catching a keyboard event relies on exploring the JavaScript event system. Keyboard events are fired whenever any key is used on the keyboard.</p> -<p>The list of available keyboard events emitted in response to a keyboard action is considerably smaller than those available for mouse:</p> -<ul> - <li>KeyPress - issued when a key is depressed and released</li> - <li>KeyDown - issued when a key is depressed but hasn't yet been released</li> - <li>KeyUp - issued when a key is released</li> - <li>TextInput (available in Webkit browsers only at time of writing) - issued when text is input either by pasting, speaking, or keyboard. This event will not be covered in this article.</li> -</ul> -<p>In a <a class="new " href="/en-US/docs/DOM/event/keypress" rel="internal">keypress</a> event, the Unicode value of the key pressed is stored in either the <code>keyCode</code> or <code><a href="/en-US/docs/DOM/event.charCode" rel="internal">charCode</a></code> property, never both. If the key pressed generates a character (e.g., 'a'), <code>charCode</code> is set to the code of that character, respecting the letter case (i.e., <code>charCode</code> takes into account whether the shift key is held down). Otherwise, the code of the pressed key is stored in <code>keyCode</code>.</p> -<p>The simplest method for capturing keyboard events is again to register event handlers within the HTML, specifying the individual events as attributes for your element. Example:</p> -<pre class="brush:js"> <input type="text" onkeypress="alert ('Hello World!');"> -</pre> -<p>As with mouse events, the JavaScript code you wish to execute can be inlined as the attribute value or you can call a function which has been defined in a <script> block within the HTML page:</p> -<pre class="brush:js"><script> - function keypressHandler() { - alert ("Hello, World!"); - } -</script> - -<input onkeypress="keypressHandler();" /> -</pre> -<p>Capturing the event and referencing the target (i.e., the actual key that was pressed) is achieved in a similar way to mouse events:</p> -<pre class="brush:js"><script type="text/javascript"> - function keypressHandler(evt) { - var eType = evt.type; // Will return "keypress" as the event type - /* here we again need to use a cross browser method - mozilla based browsers return which and others keyCode. - The <a href="/en-US/docs/JavaScript/Reference/Operators/Conditional_Operator" title="/en-US/docs/JavaScript/Reference/Operators/Conditional_Operator">Conditional operator</a> or ternary is a good choice */ - var keyCode = evt.which?evt.which:evt.keyCode; - var eCode = 'keyCode is ' + keyCode; - var eChar = 'charCode is ' + <span class="typ" style="background-color: transparent; margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; color: rgb(43, 145, 175);">String</span><span class="pun" style="background-color: transparent; color: rgb(0, 0, 0); margin: 0px; padding: 0px; border: 0px; vertical-align: baseline;">.</span><span class="pln" style="background-color: transparent; color: rgb(0, 0, 0); margin: 0px; padding: 0px; border: 0px; vertical-align: baseline;">fromCharCode(</span>keyCode); // or evt.charCode - alert ("Captured Event (type=" + eType + ", key Unicode value=" + eCode + ", ASCII value=" + eChar + ")"); - } -</script> -<input onkeypress="keypressHandler(event);" /></pre> -<p>Capturing any key event from the page can be done by registering the event at the document level and handling it in a function:</p> -<pre class="brush:js"><script> - document.onkeypress = keypressHandler; - document.onkeydown = keypressHandler; - document.onkeyup = keypressHandler; -</script></pre> -<p>Here is a complete example that shows key event handling:</p> -<pre class="brush:js"><!DOCTYPE html> -<html> -<head> - <script> - var metaChar = false; - var exampleKey = 16; - function keyEvent(event) { - var key = event.keyCode || event.which; // alternative to ternary - if there is no keyCode, use which - var keychar = String.fromCharCode(key); - if (key == exampleKey) { - metaChar = true; - } - if (key != exampleKey) { - if (metaChar) { - alert("Combination of metaKey + " + keychar) - metaChar = false; - } else { - alert("Key pressed " + key); - } - } - } - function metaKeyUp(event) { - var key = event.keyCode || event.which; - if (key == exampleKey) { metaChar = false; } - } - </script> -</head> -<body onkeydown="keyEvent(event)" onkeyup="metaKeyUp(event)"> - Try pressing any key! -</body> -</html></pre> -<h3 id="Browser_bugs_and_quirks">Browser bugs and quirks</h3> -<p>The two properties made available through the key events are <code>keyCode</code> and <code>charCode</code>. In simple terms, <code>keyCode</code> refers to the actual keyboard key that was pressed by the user, while <code>charCode</code> is intended to return that key's ASCII value. These two values may not necessarily be the same; for instance, a lower case 'a' and an upper case 'A' have the same <code>keyCode</code>, because the user presses the same key, but a different <code>charCode</code> because the resulting character is different.</p> -<p>The way in which browsers interpret the charCode is not a consistently-applied process. For example, Internet Explorer and Opera do not support <code>charCode</code>. However, they give the character information in <code>keyCode</code>, but only onkeypress. Onkeydown and onkeyup <code>keyCode</code> contain key information. Firefox uses a different word, "which", to distinguish the character.</p> -<p>Refer to the Mozilla Documentation on <a href="/en-US/docs/DOM/Event/UIEvent/KeyboardEvent" title="https://developer.mozilla.org/en-US/docs/DOM/Event/UIEvent/KeyEvent">Keyboard Events</a> for a further treatment of keyboard events.</p> -<p>{{ draft() }}</p> -<h2 id="Example:_Dragging_images_around" name="Example:_Dragging_images_around">Example: Dragging images around</h2> -<p>The following example allows moving the image of Firefox around the page:</p> -<pre class="brush:js"><!DOCTYPE html> -<html> -<head> -<style> -img { position: absolute; } -</style> - -<script> -window.onload = function() { - - movMeId = document.getElementById("ImgMov"); - movMeId.style.top = "80px"; - movMeId.style.left = "80px"; - - document.onmousedown = coordinates; - document.onmouseup = mouseup; - - function coordinates(e) { - if (e == null) { e = window.event;} - - // e.srcElement holds the target element in IE, whereas e.target holds the target element in Firefox - // Both properties return the HTML element the event took place on. - - var sender = (typeof( window.event ) != "undefined" ) ? e.srcElement : e.target; - - if (sender.id=="ImgMov") { - mouseover = true; - pleft = parseInt(movMeId.style.left); - ptop = parseInt(movMeId.style.top); - xcoor = e.clientX; - ycoor = e.clientY; - document.onmousemove = moveImage; - return false; - } - return false; - } - - function moveImage(e) { - if (e == null) { e = window.event; } - movMeId.style.left = pleft+e.clientX-xcoor+"px"; - movMeId.style.top = ptop+e.clientY-ycoor+"px"; - return false; - } - - function mouseup(e) { - document.onmousemove = null; - } -} -</script> -</head> - -<body> - <img id="ImgMov" src="http://placehold.it/100x100&text=JS" width="64" height="64"> - <p>Drag and drop around the image in this page.</p> -</body> - -</html></pre> -<h2 id="Example:_Resizing_things" name="Example:_Resizing_things">Example: Resizing things</h2> -<div> - Example of resizing an image (the actual image is not resized, only the image's rendering.) - <pre class="brush:js"> <!DOCTYPE html> - <html> - <head> - <style> - #resizeImage { - margin-left: 100px; - } - </style> - <script> - window.onload = function() { - - var resizeId = document.getElementById("resizeImage"); - var resizeStartCoordsX, - resizeStartCoordsY, - resizeEndCoordsX, - resizeEndCoordsY; - - var resizeEndCoords; - var resizing = false; - - document.onmousedown = coordinatesMousedown; - document.onmouseup = coordinatesMouseup; - - function coordinatesMousedown(e) { - if (e == null) { - e = window.event; - } - - var element = (typeof( window.event ) != 'undefined' ) ? e.srcElement : e.target; - - if (element.id == "resizeImage") { - resizing = true; - resizeStartCoordsX = e.clientX; - resizeStartCoordsY = e.clientY; - } - return false; - } - - function coordinatesMouseup(e) { - if (e == null) { - e = window.event; - } - - if (resizing === true) { - var currentImageWidth = parseInt(resizeId.width); - var currentImageHeight = parseInt(resizeId.height); - - resizeEndCoordsX = e.clientX; - resizeEndCoordsY = e.clientY; - - resizeId.style.height = currentImageHeight - (resizeStartCoordsY - resizeEndCoordsY) + 'px'; - resizeId.style.width = currentImageWidth - (resizeStartCoordsX - resizeEndCoordsX) + 'px'; - - resizing = false; - } - return false; - } - } - </script> - </head> - - <body> - <img id="resizeImage" src="http://upload.wikimedia.org/wikipedia/commons/e/e7/Mozilla_Firefox_3.5_logo_256.png" -width="64" height="64"> - <p>Click on the image and drag for resizing.</p> - </body> - - </html></pre> -</div> -<h2 id="Example:_Drawing_Lines" name="Example:_Drawing_Lines">Example: Drawing Lines</h2> -<pre class="brush: html"><!DOCTYPE html> -<html> -<head> -<script> -function linedraw(ax,ay,bx,by) -{ - if(ay>by) - { - bx=ax+bx; - ax=bx-ax; - bx=bx-ax; - by=ay+by; - ay=by-ay; - by=by-ay; - } - var calc=Math.atan((ay-by)/(bx-ax)); - calc=calc*180/Math.PI; - var length=Math.sqrt((ax-bx)*(ax-bx)+(ay-by)*(ay-by)); - document.body.innerHTML += "<div id='line' style='height:" + length + "px;width:1px;background-color:black;position:absolute;top:" + (ay) + "px;left:" + (ax) + "px;transform:rotate(" + calc + "deg);-ms-transform:rotate(" + calc + "deg);transform-origin:0% 0%;-moz-transform:rotate(" + calc + "deg);-moz-transform-origin:0% 0%;-webkit-transform:rotate(" + calc + "deg);-webkit-transform-origin:0% 0%;-o-transform:rotate(" + calc + "deg);-o-transform-origin:0% 0%;'></div>" -} -</script> -</head> -<body onload="linedraw(200,400,500,900);"> <!-- Replace with your co-ordinate --> -</body> -</html></pre> -<p> </p> diff --git a/files/it/web/javascript/guida/controllo_del_flusso_e_gestione_degli_errori/index.html b/files/it/web/javascript/guide/control_flow_and_error_handling/index.html index 76e72f5cba..9d162aa359 100644 --- a/files/it/web/javascript/guida/controllo_del_flusso_e_gestione_degli_errori/index.html +++ b/files/it/web/javascript/guide/control_flow_and_error_handling/index.html @@ -1,13 +1,14 @@ --- title: Controllo del flusso di esecuzione e gestione degli errori -slug: Web/JavaScript/Guida/Controllo_del_flusso_e_gestione_degli_errori +slug: Web/JavaScript/Guide/Control_flow_and_error_handling tags: - Controllo di flusso - Guide - JavaScript - Principianti - - 'l10n:priority' + - l10n:priority translation_of: Web/JavaScript/Guide/Control_flow_and_error_handling +original_slug: Web/JavaScript/Guida/Controllo_del_flusso_e_gestione_degli_errori --- <div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Grammar_and_types", "Web/JavaScript/Guide/Loops_and_iteration")}}</div> diff --git a/files/it/web/javascript/guida/dettagli_object_model/index.html b/files/it/web/javascript/guide/details_of_the_object_model/index.html index 1e2d4dc74f..5751006822 100644 --- a/files/it/web/javascript/guida/dettagli_object_model/index.html +++ b/files/it/web/javascript/guide/details_of_the_object_model/index.html @@ -1,11 +1,12 @@ --- title: Dettagli del modello a oggetti -slug: Web/JavaScript/Guida/Dettagli_Object_Model +slug: Web/JavaScript/Guide/Details_of_the_Object_Model tags: - Guide - Intermediate - JavaScript translation_of: Web/JavaScript/Guide/Details_of_the_Object_Model +original_slug: Web/JavaScript/Guida/Dettagli_Object_Model --- <div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Working_with_Objects", "Web/JavaScript/Guide/Iterators_and_Generators")}}</div> diff --git a/files/it/web/javascript/guida/functions/index.html b/files/it/web/javascript/guide/functions/index.html index 4aca8d5a7b..274da563ca 100644 --- a/files/it/web/javascript/guida/functions/index.html +++ b/files/it/web/javascript/guide/functions/index.html @@ -1,7 +1,8 @@ --- title: Funzioni -slug: Web/JavaScript/Guida/Functions +slug: Web/JavaScript/Guide/Functions translation_of: Web/JavaScript/Guide/Functions +original_slug: Web/JavaScript/Guida/Functions --- <div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Loops_and_iteration", "Web/JavaScript/Guide/Expressions_and_Operators")}}</div> diff --git a/files/it/web/javascript/guida/grammar_and_types/index.html b/files/it/web/javascript/guide/grammar_and_types/index.html index 2a43d5230d..6fc3f276b9 100644 --- a/files/it/web/javascript/guida/grammar_and_types/index.html +++ b/files/it/web/javascript/guide/grammar_and_types/index.html @@ -1,7 +1,8 @@ --- title: Grammatica e tipi -slug: Web/JavaScript/Guida/Grammar_and_types +slug: Web/JavaScript/Guide/Grammar_and_types translation_of: Web/JavaScript/Guide/Grammar_and_types +original_slug: Web/JavaScript/Guida/Grammar_and_types --- <div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Introduction", "Web/JavaScript/Guide/Control_flow_and_error_handling")}}</div> diff --git a/files/it/web/javascript/guida/index.html b/files/it/web/javascript/guide/index.html index ba956f21f2..658194bd86 100644 --- a/files/it/web/javascript/guida/index.html +++ b/files/it/web/javascript/guide/index.html @@ -1,6 +1,6 @@ --- title: JavaScript Guide -slug: Web/JavaScript/Guida +slug: Web/JavaScript/Guide tags: - AJAX - JavaScript @@ -8,6 +8,7 @@ tags: - NeedsTranslation - TopicStub translation_of: Web/JavaScript/Guide +original_slug: Web/JavaScript/Guida --- <div>{{jsSidebar("JavaScript Guide")}}</div> diff --git a/files/it/web/javascript/guida/introduzione/index.html b/files/it/web/javascript/guide/introduction/index.html index 3825ded91c..daa5a185ea 100644 --- a/files/it/web/javascript/guida/introduzione/index.html +++ b/files/it/web/javascript/guide/introduction/index.html @@ -1,10 +1,11 @@ --- title: Introduzione -slug: Web/JavaScript/Guida/Introduzione +slug: Web/JavaScript/Guide/Introduction tags: - Guida - JavaScript translation_of: Web/JavaScript/Guide/Introduction +original_slug: Web/JavaScript/Guida/Introduzione --- <div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}}</div> diff --git a/files/it/web/javascript/guida/iteratori_e_generatori/index.html b/files/it/web/javascript/guide/iterators_and_generators/index.html index 49b220cdd1..dbfd114f2d 100644 --- a/files/it/web/javascript/guida/iteratori_e_generatori/index.html +++ b/files/it/web/javascript/guide/iterators_and_generators/index.html @@ -1,7 +1,8 @@ --- title: Iteratori e generatori -slug: Web/JavaScript/Guida/Iteratori_e_generatori +slug: Web/JavaScript/Guide/Iterators_and_Generators translation_of: Web/JavaScript/Guide/Iterators_and_Generators +original_slug: Web/JavaScript/Guida/Iteratori_e_generatori --- <div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Details_of_the_Object_Model", "Web/JavaScript/Guide/Meta_programming")}}</div> diff --git a/files/it/web/javascript/guida/loops_and_iteration/index.html b/files/it/web/javascript/guide/loops_and_iteration/index.html index c677151181..5e5332e541 100644 --- a/files/it/web/javascript/guida/loops_and_iteration/index.html +++ b/files/it/web/javascript/guide/loops_and_iteration/index.html @@ -1,12 +1,13 @@ --- title: Cicli e iterazioni -slug: Web/JavaScript/Guida/Loops_and_iteration +slug: Web/JavaScript/Guide/Loops_and_iteration tags: - Guide - JavaScript - Loop - Sintassi translation_of: Web/JavaScript/Guide/Loops_and_iteration +original_slug: Web/JavaScript/Guida/Loops_and_iteration --- <div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}</div> diff --git a/files/it/web/javascript/guida/espressioni_regolari/index.html b/files/it/web/javascript/guide/regular_expressions/index.html index f876045948..4e95f451a5 100644 --- a/files/it/web/javascript/guida/espressioni_regolari/index.html +++ b/files/it/web/javascript/guide/regular_expressions/index.html @@ -1,7 +1,8 @@ --- title: Espressioni regolari -slug: Web/JavaScript/Guida/Espressioni_Regolari +slug: Web/JavaScript/Guide/Regular_Expressions translation_of: Web/JavaScript/Guide/Regular_Expressions +original_slug: Web/JavaScript/Guida/Espressioni_Regolari --- <div>{{jsSidebar("Guida JavaScript")}} {{PreviousNext("Web/JavaScript/Guide/Text_formatting", "Web/JavaScript/Guide/Indexed_collections")}}</div> diff --git a/files/it/web/javascript/introduzione_al_carattere_object-oriented_di_javascript/index.html b/files/it/web/javascript/introduzione_al_carattere_object-oriented_di_javascript/index.html deleted file mode 100644 index 6281d7ef4b..0000000000 --- a/files/it/web/javascript/introduzione_al_carattere_object-oriented_di_javascript/index.html +++ /dev/null @@ -1,391 +0,0 @@ ---- -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 ---- -<p>{{jsSidebar("Introductory")}}</p> - -<p>Orientato agli oggetti fino dal nucleo, JavaScript offre funzionalità {{Glossary("OOP")}} potenti e flessibili. <span id="result_box" lang="it"><span class="hps">Questo</span> <span class="hps">articolo inizia</span> <span class="hps">con una introduzione</span> <span class="hps">alla</span> <span class="hps">programmazione</span> <span class="hps">orientata agli oggetti</span><span>,</span> quindi presenta <span class="hps">il</span> <span class="hps">modello di oggetti</span> <span class="hps">JavaScript</span> <span class="hps">e, infine,</span> <span class="hps">dimostra</span> <span class="hps">concetti della</span> <span class="hps">programmazione orientata agli oggetti</span> <span class="hps">in JavaScript</span><span>.</span></span></p> - -<h2 id="JavaScript_Review" name="JavaScript_Review">Riesame su JavaScript</h2> - -<p><span id="result_box" lang="it"><span class="hps">Se</span> <span class="hps">non ti senti</span> <span class="hps">sicuro su</span> <span class="hps">concetti</span> <span class="hps">JavaScript</span><span> come</span> <span class="hps">variabili, tipi</span><span>, funzioni e</span> <span class="hps">ambito di applicazione</span><span>,</span> <span class="hps">puoi leggere su</span> <span class="hps">questi argomenti</span> </span>in <a href="/it/JavaScript/Una_re-introduzione_a_JavaScript" title="it/JavaScript/Una_re-introduzione_a_JavaScript">A re-introduction to JavaScript</a>. Puoi<span lang="it"><span class="hps"> inoltre consultare</span> <span class="hps">la</span></span> <a href="/it/JavaScript/Guida" title="it/JavaScript/Guida">Core JavaScript 1.5 Guide</a>.</p> - -<h2 id="Object-oriented_programming" name="Object-oriented_programming">Programmazione object-oriented</h2> - -<p>La programmazione orientata agli oggetti è un paradigma di programmazione che usa astrazione ({{glossary("abstraction")}}) per creare modelli basati sul mondo reale. Utilizza diverse tecniche di paradigmi esistenti, tra cui la modularità ({{glossary("modularity")}}), il polimorfismo ({{glossary("polymorphism")}}) e l'incapsulamento ({{glossary("encapsulation")}}). Oggi molti linguaggi di programmazione (come Java, JavaScript, C #, C ++, Python, PHP, Ruby e Objective-C) supportano la programmazione orientata agli oggetti (OOP).</p> - -<p><span id="result_box" lang="it">OOP <span class="hps">ha una visione del</span> <span class="hps">software come</span> <span class="hps">un insieme di oggetti</span> <span class="hps">cooperanti</span><span>,</span> <span class="hps">piuttosto che </span><span class="hps">un insieme di funzioni</span> <span class="hps">o semplicemente </span><span class="hps">un elenco</span> <span class="hps">di istruzioni per il</span> <span class="hps">computer (come è nella visione tradizionale).</span> <span class="hps">In</span> <span class="hps">OOP</span><span>,</span> <span class="hps">ogni oggetto è</span> <span class="hps">in grado di ricevere</span> <span class="hps">messaggi</span><span>,</span> <span class="hps">elaborare dati</span><span>,</span> <span class="hps">e</span> <span class="hps">inviare messaggi</span> <span class="hps">ad altri oggetti</span><span>.</span> <span class="hps">Ogni oggetto</span> <span class="hps">può essere visto come</span> <span class="hps">una</span> <span class="hps">piccola macchina</span> <span class="hps">indipendente con</span> </span><span lang="it"><span class="hps">ruolo o</span> <span class="hps">responsabilità</span><span> distinti.</span></span></p> - -<p><span id="result_box" lang="it"><span class="hps">OOP</span> <span class="hps">promuove una maggiore</span> <span class="hps">flessibilità e</span> mantenibilità <span class="hps">nella</span> <span class="hps">programmazione</span><span>,</span> <span class="hps">ed è</span> <span class="hps">molto popolare</span> <span class="hps">in</span> <span class="hps">ingegneria del software su larga scala</span><span>.</span> <span class="hps">Poiché</span> <span class="hps">OOP</span> <span class="hps">sottolinea con forza</span> <span class="hps">la modularità</span><span>,</span> <span class="hps">il codice</span> <span class="hps">object-oriented</span> <span class="hps">è più semplice da</span> <span class="hps">sviluppare e</span> <span class="hps">più facile da capire</span> <span class="hps">in seguito.</span> <span class="hps">Il codice</span> <span class="hps">object-oriented</span> <span class="hps">promuove</span> <span class="hps">un'analisi</span><span>,</span> <span class="hps">codifica</span><span>,</span> <span class="hps">e comprensione</span> <span class="hps">di</span> <span class="hps">situazioni</span></span><span lang="it"><span class="hps"> e</span> <span class="hps">procedure</span></span><span id="result_box" lang="it"><span class="hps"> complesse</span></span><span lang="it"><span class="hps"> più</span> <span class="hps">diretta</span> <span class="hps">che con</span> <span class="hps">metodi di programmazione</span> <span class="hps">a minor modularità</span></span><sup>.</sup><a href="https://developer.mozilla.org/it/docs/Web/JavaScript/Introduzione_al_carattere_Object-Oriented_di_JavaScript$edit#cite-1"><sup>1</sup></a></p> - -<h2 id="Terminology" name="Terminology">Terminologia</h2> - -<dl> - <dt>{{Glossary("Namespace")}}</dt> - <dd><span id="result_box" lang="it"><span class="hps">Un contenitore</span> <span class="hps">che</span> <span class="hps">consente agli sviluppatori di</span> <span class="hps">includere tutte</span> <span class="hps">le funzionalità</span> <span class="hps">sotto</span> <span class="hps">un</span> <span class="hps">nome unico, specifico per l'</span><span class="hps">applicazione</span><span>.</span></span></dd> - <dt>{{Glossary("Class")}}</dt> - <dd><span id="result_box" lang="it"><span class="hps">Definisce</span> <span class="hps">le caratteristiche dell'oggetto</span><span>.</span> <span class="hps">Una classe</span> <span class="hps">è una definizione</span> <span class="hps">del modello,</span> <span class="hps">delle proprietà e dei metodi</span> <span class="hps">di un oggetto</span><span>.</span></span></dd> - <dt>{{Glossary("Object")}}</dt> - <dd>Istanza di una classe.</dd> - <dt>{{Glossary("Property")}}</dt> - <dd>Una caratteristica di un oggetto, come un colore.</dd> - <dt>{{Glossary("Method")}}</dt> - <dd>Una capacità di un oggetto, come ad esempio cammina. È una procedura o funzione associata a una classe.</dd> - <dt>{{Glossary("Constructor")}}</dt> - <dd>Un metodo invocato nel momento in cui l'oggetto viene istanziato. Di solito ha lo stesso nome della classe che lo contiene.</dd> - <dt>{{Glossary("Inheritance")}}</dt> - <dd>Una classe può ereditare caratteristiche da un'altra classe.</dd> - <dt>{{Glossary("Encapsulation")}}</dt> - <dd>Una modalità di raggruppamento di dati e metodi che ne fanno uso.</dd> - <dt>{{Glossary("Abstraction")}}</dt> - <dd>L'insieme del complesso di eredità, metodi e proprietà di un oggetto deve rispecchiare adeguatamente un modello reale.</dd> - <dt>{{Glossary("Polymorphism")}}</dt> - <dd><span id="result_box" lang="it"><span class="hps">Poly </span><span class="hps">significa</span> <span class="hps">"<em>molti</em>"</span> <span class="hps">e</span> <span class="hps">morfismo</span> <span class="hps">significa</span> <span class="hps">"<em>forme</em>"</span><span>.</span> <span class="hps">Classi diverse </span><span class="hps">potrebbero</span> <span class="hps">definire lo stesso</span> <span class="hps">metodo o proprietà</span><span>.</span></span></dd> -</dl> - - - -<p><span id="result_box" lang="it"><span class="hps">Per una</span> <span class="hps">descrizione</span> </span><span lang="it"><span class="hps">più ampia</span> <span class="hps">della programmazione</span> <span class="hps">orientata agli oggetti</span><span>, vedi</span> </span>{{interwiki("wikipedia", "Object-oriented programming")}}<span lang="it"> <span class="hps">su Wikipedia</span><span>.</span></span></p> - - - -<h2 id="Programmazione_prototype-based">Programmazione prototype-based</h2> - -<p><span id="result_box" lang="it"><span class="hps">La programmazione p</span></span>rototype-based<span lang="it"><span class="hps"> (basata</span> <span class="hps">sul prototipo)</span> <span class="hps">è un modello</span> <span class="hps">OOP</span> <span class="hps">che non utilizza</span> <span class="hps">le classi</span><span>,</span> <span class="hps">ma piuttosto</span> <span class="hps">prima</span> <span class="hps">completa</span> <span class="hps">il comportamento di</span> <span class="hps">qualsiasi classe</span> <span class="hps">e</span> <span class="hps">poi</span> <span class="hps">riutilizza</span> <span class="atn hps">(</span><span>equivalente</span> <span class="hps">all'</span><span class="hps">ereditarietà</span> <span class="hps">nei linguaggi</span> <span class="hps">basati su classi</span><span>)</span> arricchendo <span class="atn hps">(</span><span>o sviluppando</span><span>)</span> <span class="hps">oggetti <em>prototipo</em></span><span class="hps"> esistenti</span><span>.</span> <span class="atn hps">(</span><span>Chiamata anche</span> <span class="hps">senza classi (</span></span>classless<span lang="it"><span class="hps">)</span><span>,</span> <span class="hps">orientata al prototipo</span><span> (</span></span>prototype-oriented<span lang="it"><span>),</span> <span class="hps">o</span> <span class="hps">programmazione basata</span> su <span class="hps">istanza</span><span> (</span></span>instance-based<span lang="it"><span>).</span><span>)</span></span></p> - -<p><span id="result_box" lang="it"><span class="hps">L'esempio </span></span><span lang="it"><span class="hps">originale</span> <span class="atn hps">(</span><span>e più</span> <span class="hps">canonico</span><span>)</span> <span class="hps"> di un</span> <span class="hps">linguaggio basato sui prototipi</span> <span class="hps">è</span> </span>{{interwiki("wikipedia", "Self (programming language)", "Self")}}<span lang="it"> <span class="hps">sviluppato da</span> <span class="hps">David</span> <span class="hps">Ungar</span> <span class="hps">e Randall</span> <span class="hps">Smith</span><span>.</span> <span class="hps">Tuttavia lo</span> <span class="hps">stile di programmazione</span> <span class="atn hps">senza classi diventa</span> <span class="hps">sempre più popolare</span> <span class="hps">negli ultimi tempi,</span> <span class="hps">ed è stato adottato</span> <span class="hps">per</span> <span class="hps">i linguaggi di programmazione</span> <span class="hps">come JavaScript</span><span>,</span> <span class="hps">Cecil</span><span>,</span> <span class="hps">NewtonScript</span><span>,</span> <span class="hps">Io,</span> <span class="hps">MOO</span><span>,</span> <span class="hps">REBOL</span><span>,</span> <span class="hps">Kevo</span><span>,</span> <span class="hps">Squeak</span> <span class="atn hps">(</span><span>quando si utilizza il</span> <span class="hps">framework</span> </span>Viewer per<span lang="it"><span class="hps"> manipolare</span> <span class="hps">componenti</span> <span class="hps">Morphic</span><span>)</span><span>,</span> <span class="hps">e</span> <span class="hps">molti altri</span></span>.<a href="https://developer.mozilla.org/it/docs/Web/JavaScript/Introduzione_al_carattere_Object-Oriented_di_JavaScript$edit#cite-1"><sup>1</sup></a></p> - -<h2 id="JavaScript_Object_Oriented_Programming" name="JavaScript_Object_Oriented_Programming">Programmazione Object Oriented in JavaScript</h2> - -<h3 id="Namespace">Namespace</h3> - -<p>Un namespace <span id="result_box" lang="it"><span class="hps">è un contenitore</span> <span class="hps">che</span> <span class="hps">consente agli sviluppatori di</span> <span class="hps">includere tutte</span> <span class="hps">le funzionalità</span> <span class="hps">sotto</span> <span class="hps">un</span> <span class="hps">nome unico, specifico per l'</span><span class="hps">applicazione</span></span>. <strong>In JavaScript un namespace è solo un altro oggetto che contiene metodi, proprietà e oggetti.</strong></p> - -<div class="note"> -<p><strong>Nota:</strong> È <span lang="it"><span>importante notare che</span> <span class="hps">in JavaScript</span> <span class="hps">non c'è alcuna differenza</span> <span class="hps">a livello di</span> <span class="hps">linguaggio</span> <span class="hps">tra oggetti</span> <span class="hps">regolari e </span>namespace<span>.</span> <span class="hps">Questo</span> <span class="hps">differenzia da molti altri</span> <span class="hps">linguaggi orientati agli oggetti</span> <span class="hps">e può essere fonte</span><span class="hps"> di confusione</span> <span class="hps">per i nuovi</span> <span class="hps">programmatori JavaScript</span></span>.</p> -</div> - -<p><span id="result_box" lang="it"><span class="hps">L'idea alla base</span> del<span class="hps">la creazione di</span> <span class="hps">un namespace</span> <span class="hps">in JavaScript</span> <span class="hps">è</span> <span class="hps">semplice: creare</span> <span class="hps">un oggetto</span> <span class="hps">globale</span><span>,</span> <span class="hps">e</span> <span class="hps">tutte le variabili</span><span>,</span> <span class="hps">i metodi</span> <span class="hps">e le funzioni</span> <span class="hps">diventano</span> <span class="hps">proprietà di tale oggetto</span><span>.</span> <span class="hps">L'uso</span> <span class="hps">dei namespace</span> <span class="hps">riduce anche</span> <span class="hps">il rischio di</span> <span class="hps">conflitti tra nomi</span> <span class="hps">in un'applicazione</span><span>,</span> <span class="hps">poiché gli oggetti</span> <span class="hps">di ciascuna applicazione</span> <span class="hps">sono</span> <span class="hps">proprietà di un</span> <span class="hps">oggetto globale</span> <span class="hps">definito dall'applicazione</span><span>.</span></span></p> - -<p>Creiamo un oggetto globale chiamato MYAPP:</p> - -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="comment token">// global namespace</span> -<span class="keyword token">var</span> MYAPP <span class="operator token">=</span> MYAPP <span class="operator token">||</span> <span class="punctuation token">{</span><span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre> - -<p><span id="result_box" lang="it"><span class="hps">Nel</span> <span class="hps">codice di esempio di</span> <span class="hps">sopra</span> prima viene testato <span class="hps">se</span> <span class="hps">MYAPP</span> <span class="hps">è già definito</span> <span class="hps">(sia nello</span> <span class="hps">stesso o</span> <span class="hps">in un altro file</span><span>)</span><span>.</span> <span class="hps">Se sì, allora</span> <span class="atn hps">viene utilizzato l'</span><span class="hps">oggetto globale </span></span><span lang="it"><span>MYAPP già</span> <span class="hps">esistente</span><span>,</span> <span class="hps">altrimenti</span> viene creato<span class="hps"> un oggetto</span> <span class="hps">vuoto chiamato</span> <span class="hps">MYAPP</span> <span class="hps">che</span> <span class="hps">incapsula</span> <span class="hps">metodi,</span> <span class="hps">funzioni, variabili</span> <span class="hps">e oggetti</span><span>.</span></span></p> - -<p>Possaimo anche creare sotto-namespace (tieni presente che l'oggetto globale deve essere definito prima):</p> - -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="comment token">// sub namespace</span> -MYAPP<span class="punctuation token">.</span>event <span class="operator token">=</span> <span class="punctuation token">{</span><span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre> - -<p><span id="result_box" lang="it"><span class="hps">La seguente</span> <span class="hps">è</span> <span class="hps">la sintassi del codice</span> <span class="hps">per</span> <span class="hps">la creazione di un</span> namespace <span class="hps">e l'aggiunta di</span> <span class="hps">variabili, funzioni</span><span>,</span> <span class="hps">e</span> <span class="hps">un metodo:</span></span></p> - -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="comment token">// Create container called MYAPP.commonMethod for common method and properties</span> -MYAPP<span class="punctuation token">.</span>commonMethod <span class="operator token">=</span> <span class="punctuation token">{</span> - regExForName<span class="punctuation token">:</span> <span class="string token">""</span><span class="punctuation token">,</span> <span class="comment token">// define regex for name validation</span> - regExForPhone<span class="punctuation token">:</span> <span class="string token">""</span><span class="punctuation token">,</span> <span class="comment token">// define regex for phone no validation</span> - validateName<span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span>name<span class="punctuation token">)</span><span class="punctuation token">{</span> - <span class="comment token">// Do something with name, you can access regExForName variable</span> - <span class="comment token">// using "this.regExForName"</span> - <span class="punctuation token">}</span><span class="punctuation token">,</span> - - validatePhoneNo<span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span>phoneNo<span class="punctuation token">)</span><span class="punctuation token">{</span> - <span class="comment token">// do something with phone number</span> - <span class="punctuation token">}</span> -<span class="punctuation token">}</span> - -<span class="comment token">// Object together with the method declarations</span> -MYAPP<span class="punctuation token">.</span>event <span class="operator token">=</span> <span class="punctuation token">{</span> - addListener<span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span>el<span class="punctuation token">,</span> type<span class="punctuation token">,</span> fn<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="comment token">// code stuff</span> - <span class="punctuation token">}</span><span class="punctuation token">,</span> - removeListener<span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span>el<span class="punctuation token">,</span> type<span class="punctuation token">,</span> fn<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="comment token">// code stuff</span> - <span class="punctuation token">}</span><span class="punctuation token">,</span> - getEvent<span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="comment token">// code stuff</span> - <span class="punctuation token">}</span> - - <span class="comment token">// Can add another method and properties</span> -<span class="punctuation token">}</span> - -<span class="comment token">// Syntax for Using addListener method:</span> -MYAPP<span class="punctuation token">.</span>event<span class="punctuation token">.</span><span class="function token">addListener</span><span class="punctuation token">(</span><span class="string token">"yourel"</span><span class="punctuation token">,</span> <span class="string token">"type"</span><span class="punctuation token">,</span> callback<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> - -<h3 id="Oggetti_incorporati_built-in_standard">Oggetti incorporati (built-in) standard</h3> - -<p><span id="result_box" lang="it"><span class="hps">JavaScript</span> <span class="hps">ha diversi</span> <span class="hps">oggetti inclusi</span> <span class="hps">nel suo nucleo</span><span>,</span> <span class="hps">per esempio ci</span> <span class="hps">sono</span> <span class="hps">oggetti come</span> </span>Math, Object, Array e String<span lang="it"><span>.</span> <span class="hps">L'esempio seguente mostra</span> <span class="hps">come utilizzare</span> <span class="hps">l'oggetto</span> <span class="hps">Math per</span> <span class="hps">ottenere</span> <span class="hps">un numero casuale</span> <span class="hps">utilizzando</span> <span class="hps">il suo</span> <span class="hps">metodo</span></span> <code>random()</code> <span lang="it"><span>.</span></span></p> - -<pre class="brush: js line-numbers language-js"><code class="language-js">console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>Math<span class="punctuation token">.</span><span class="function token">random</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> - -<div class="note"><strong>Nota:</strong> <span id="result_box" lang="it"><span class="hps">Questo</span> <span class="hps">e</span> <span class="hps">tutti gli</span> <span class="hps">ulteriori esempi</span> presuppongono che <span class="hps">una funzione chiamata</span></span> {{domxref("console.log()")}} <span lang="it"><span class="hps">sia definita</span> <span class="hps">a livello globale</span><span>.</span> <span class="hps">La funzione</span> </span><code>console.log()</code> <span lang="it"><span class="hps">in realtà non</span> <span class="hps">è </span><span class="hps">parte</span> <span class="hps">di</span> <span class="hps">JavaScript</span> <span class="hps">in sé</span><span>,</span> <span class="hps">ma</span> <span class="hps">molti browser</span> la implementano <span class="hps">per aiutare</span> <span class="hps">il debug</span><span>.</span></span></div> - -<p>Vedi <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects" title="en-US/docs/Web/JavaScript/Reference/Global_Objects">JavaScript Reference: Standard built-in objects</a> for una lista degli oggetti di nucleo in JavaScript.</p> - -<p>Ogni oggetto in JavaScript è una instanza dell'oggetto <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>Object</code></a> e perciò ne eredita tutte le sue proprietà e metodi.</p> - -<h3 id="Oggetti_utente">Oggetti utente</h3> - -<h4 id="La_classe">La classe</h4> - -<p><span id="result_box" lang="it"><span class="hps">JavaScript è un linguaggio</span> <span class="hps">basato sui prototipi</span> <span class="hps">e</span> <span class="hps">non contiene</span> <span class="hps">alcuna dichiarazione</span> <span class="hps">di classe</span><span>,</span> <span class="hps">come invece si trova</span> <span class="hps">in C</span> <span class="hps">++</span> <span class="hps">o Java</span><span>.</span> <span class="hps">Questo a volte è</span> <span class="hps">fonte di confusione per</span> <span class="hps">i programmatori</span> <span class="hps">abituati</span> <span class="hps">ai linguaggi</span> <span class="hps">con</span> <span class="hps">una dichiarazione</span></span> <code>class</code><span lang="it"><span>.</span> <span class="hps">JavaScript</span> <span class="hps">utilizza le funzioni</span> <span class="hps">come</span> <span class="hps">costruttori</span> <span class="hps">per le classi</span><span>.</span> <span class="hps">Definire una</span> <span class="hps">classe è</span> <span class="hps">facile come</span> <span class="hps">definire una funzione</span><span>.</span> <span class="hps">Nell'esempio sottostante</span> <span class="hps">si definisce una</span> <span class="hps">nuova</span> <span class="hps">classe chiamata</span> <span class="hps">Person con</span> <span class="hps">un</span> <span class="hps">costruttore vuoto</span><span>.</span></span></p> - -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> Person <span class="operator token">=</span> <span class="keyword token">function</span> <span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span><span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre> - -<h4 id="Loggetto_istanza_di_classe">L'oggetto (istanza di classe)</h4> - -<p>Per creare una nuova istanza di un oggetto <code>obj</code> utilizziamo l'istruzione <code>new obj</code> assegnando il risultato (che è di tipo <code>obj</code>) ad una variabile, per poi accedervi successivamente.</p> - -<p>Nell'esempio precedente abbiamo definito una classe chiamata <code>Person</code>. In quello seguente creiamo due istanze (<code>person1</code> e <code>person2</code>).</p> - -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> person1 <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Person</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="keyword token">var</span> person2 <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Person</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> - -<div class="note"><strong>Nota:</strong> Prego vedi {{jsxref("Object.create()")}} per un ulteriore nuovo metodo d'istanza che crea una istanza non inizializzata.</div> - -<h4 id="Il_costruttore">Il costruttore</h4> - -<p><span id="result_box" lang="it"><span class="hps">Il</span> <span class="hps">costruttore viene chiamato</span> quando si instanzia un oggetto <span class="atn hps">(</span><span>il momento in cui</span> <span class="hps">si crea</span> <span class="hps">l'istanza dell'oggetto</span><span>)</span><span>.</span> <span class="hps">Il</span> <span class="hps">costruttore è un</span> <span class="hps">metodo della classe</span><span>.</span> <span class="hps">In JavaScript</span> <span class="hps">la funzione</span> <span class="hps">funge da</span> <span class="hps">costruttore dell'oggetto</span><span>,</span> <span class="hps">pertanto</span> <span class="hps">non è necessario</span> <span class="hps">definire esplicitamente</span> <span class="hps">un</span> <span class="hps">metodo costruttore</span><span>.</span> <span class="hps">Ogni azione</span> <span class="hps">dichiarata</span> <span class="hps">nella classe</span> <span class="hps">viene eseguita</span> <span class="hps">al momento della</span> <span class="hps">creazione di un'istanza</span><span>.</span></span></p> - -<p><span id="result_box" lang="it"><span class="hps">Il costruttore</span> <span class="hps">viene utilizzato per</span> <span class="hps">impostare le proprietà</span> <span class="hps">dell'oggetto</span> <span class="hps">o</span> <span class="hps">per chiamare</span> <span class="hps">i metodi che</span> <span class="atn hps">preparano l'</span><span>oggetto per il suo uso</span><span>.</span> <span class="hps">L'aggiunta di</span> <span class="hps">metodi di classe</span> <span class="hps">e le loro definizioni</span> <span class="hps">si effettua </span><span class="hps">utilizzando una</span> <span class="hps">sintassi diversa</span> <span class="hps">descritta più avanti in</span> <span class="hps">questo</span> <span class="hps">articolo</span><span>.</span></span></p> - -<p>Nell'esempio seguente il costruttore della classe<code> Person</code> registra un messaggio quando viene istanziato un oggetto <code>Person</code>.</p> - -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> Person <span class="operator token">=</span> <span class="keyword token">function</span> <span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'instance created'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span><span class="punctuation token">;</span> - -<span class="keyword token">var</span> person1 <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Person</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="keyword token">var</span> person2 <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Person</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> - -<h4 id="La_proprietà_attributo_di_oggetto">La proprietà (attributo di oggetto)</h4> - -<p>Le proprietà sono variabili contenute nella classe; ogni istanza dell'oggetto ha queste proprietà. Le proprietà sono impostate nel costruttore (funzione) della classe in modo che siano creati su ogni istanza.</p> - -<p><span id="result_box" lang="it"><span class="hps">La</span> <span class="hps">parola chiave</span></span> <code>this</code>, <span lang="it"><span class="hps">che si riferisce</span> <span class="hps">all'oggetto</span> <span class="hps">corrente</span><span>,</span> <span class="hps">consente di lavorare</span> <span class="hps">con le proprietà</span> <span class="hps">all'interno della classe</span><span>.</span> <span class="hps">L'accesso</span> <span class="atn hps">(</span><span>in lettura o</span> <span class="hps">scrittura)</span> <span class="hps">ad una proprietà</span> <span class="hps">al di fuori</span> <span class="hps">della classe</span> <span class="hps">è fatto con</span> <span class="hps">la sintassi</span><span>:</span> </span><code>NomeIstanza.Proprietà</code><span lang="it"><span>,</span> <span class="hps">proprio come in</span> <span class="hps">C</span> <span class="hps">++</span><span>,</span> <span class="hps">Java</span><span>,</span> <span class="hps">e molti altri linguaggi</span><span>.</span> <span class="atn hps">(</span><span>All'interno della</span> <span class="hps">classe la</span> <span class="hps">sintassi </span></span><code>this.Proprietà</code><span lang="it"><span class="hps"> è utilizzata</span> <span class="hps">per ottenere o impostare</span> <span class="hps">il valore della proprietà</span><span>.</span><span>)</span></span></p> - -<p>Nell'esempio seguente, definiamo al momento della creazione la proprietà <code>firstName</code> per la classe <code>Person</code>:</p> - -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> Person <span class="operator token">=</span> <span class="keyword token">function</span> <span class="punctuation token">(</span>firstName<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">this</span><span class="punctuation token">.</span>firstName <span class="operator token">=</span> firstName<span class="punctuation token">;</span> - console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'Person instantiated'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span><span class="punctuation token">;</span> - -<span class="keyword token">var</span> person1 <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Person</span><span class="punctuation token">(</span><span class="string token">'Alice'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="keyword token">var</span> person2 <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Person</span><span class="punctuation token">(</span><span class="string token">'Bob'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - -<span class="comment token">// Show the firstName properties of the objects</span> -console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'person1 is '</span> <span class="operator token">+</span> person1<span class="punctuation token">.</span>firstName<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// logs "person1 is Alice"</span> -console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'person2 is '</span> <span class="operator token">+</span> person2<span class="punctuation token">.</span>firstName<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// logs "person2 is Bob"</span></code></pre> - -<h4 id="I_metodi">I metodi</h4> - -<p>I metodi sono funzioni (e definiti come funzioni), ma per il resto seguono la stessa logica delle proprietà. Chiamare un metodo è simile all'accesso a una proprietà, ma si aggiunge () alla fine del nome del metodo, eventualmente con argomenti. Per definire un metodo va assegnata una funzione a una proprietà della proprietà <code>prototype</code> della classe. In seguito sarà possibile chiamare il metodo sull'oggetto utilizzando lo stesso nome assegnato alla funzione.</p> - -<p>Nell'esempio seguente definiamo e usiamo il metodo <code>sayHello()</code> per la classe <code>Person</code>.</p> - -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> Person <span class="operator token">=</span> <span class="keyword token">function</span> <span class="punctuation token">(</span>firstName<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">this</span><span class="punctuation token">.</span>firstName <span class="operator token">=</span> firstName<span class="punctuation token">;</span> -<span class="punctuation token">}</span><span class="punctuation token">;</span> - -Person<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>sayHello <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">"Hello, I'm "</span> <span class="operator token">+</span> <span class="keyword token">this</span><span class="punctuation token">.</span>firstName<span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span><span class="punctuation token">;</span> - -<span class="keyword token">var</span> person1 <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Person</span><span class="punctuation token">(</span><span class="string token">"Alice"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="keyword token">var</span> person2 <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Person</span><span class="punctuation token">(</span><span class="string token">"Bob"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - -<span class="comment token">// call the Person sayHello method.</span> -person1<span class="punctuation token">.</span><span class="function token">sayHello</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// logs "Hello, I'm Alice"</span> -person2<span class="punctuation token">.</span><span class="function token">sayHello</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// logs "Hello, I'm Bob"</span></code></pre> - -<p>In JavaScript i metodi sono oggetti funzione regolarmente associati a un oggetto come una proprietà, il che significa che è possibile richiamare i metodi "fuori dal contesto". Si consideri il seguente codice di esempio:</p> - -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> Person <span class="operator token">=</span> <span class="keyword token">function</span> <span class="punctuation token">(</span>firstName<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">this</span><span class="punctuation token">.</span>firstName <span class="operator token">=</span> firstName<span class="punctuation token">;</span> -<span class="punctuation token">}</span><span class="punctuation token">;</span> - -Person<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>sayHello <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">"Hello, I'm "</span> <span class="operator token">+</span> <span class="keyword token">this</span><span class="punctuation token">.</span>firstName<span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span><span class="punctuation token">;</span> - -<span class="keyword token">var</span> person1 <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Person</span><span class="punctuation token">(</span><span class="string token">"Alice"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="keyword token">var</span> person2 <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Person</span><span class="punctuation token">(</span><span class="string token">"Bob"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="keyword token">var</span> helloFunction <span class="operator token">=</span> person1<span class="punctuation token">.</span>sayHello<span class="punctuation token">;</span> - -<span class="comment token">// logs "Hello, I'm Alice"</span> -person1<span class="punctuation token">.</span><span class="function token">sayHello</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - -<span class="comment token">// logs "Hello, I'm Bob"</span> -person2<span class="punctuation token">.</span><span class="function token">sayHello</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - -<span class="comment token">// logs "Hello, I'm undefined" (or fails</span> -<span class="comment token">// with a TypeError in strict mode)</span> -<span class="function token">helloFunction</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - -<span class="comment token">// logs true</span> -console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>helloFunction <span class="operator token">===</span> person1<span class="punctuation token">.</span>sayHello<span class="punctuation token">)</span><span class="punctuation token">;</span> - -<span class="comment token">// logs true</span> -console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>helloFunction <span class="operator token">===</span> Person<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>sayHello<span class="punctuation token">)</span><span class="punctuation token">;</span> - -<span class="comment token">// logs "Hello, I'm Alice"</span> -helloFunction<span class="punctuation token">.</span><span class="function token">call</span><span class="punctuation token">(</span>person1<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> - -<p>Come dimostra questo esempio tutti i riferimenti alla funzione <code>sayHello</code> — quello su <code>person1</code>, su <code>Person.prototype</code>, nella variabile <code>helloFunction</code>, ecc.— si riferiscono tutti alla <em>stessa funzione</em>. Il valore di <code>this</code> nel corso di una chiamata alla funzione dipende da come noi lo chiamiamo. Più comunemente, quando chiamiamo <code>this</code> in un'espressione dove abbiamo ottenuto la funzione da una proprietà di oggetto — <code>person1.sayHello()</code>— <code>this</code> è riferito all'oggetto da cui abbiamo ottenuto la funzione (<code>person1</code>), questa è la ragione per cui <code>person1.sayHello()</code> usa il nome "Alice" e <code>person2.sayHello()</code> usa il nome "Bob". Ma se lo chiamiamo in altri modi, <code>this</code> è impostato in modo diverso: chiamare <code>this</code> da una variabile— <code>helloFunction()</code>— <code>imposta this</code> come riferimento all'oggetto globale (<code>window</code>, sui browser). Dal momento che l'oggetto globale (probabilmente) non dispone di una proprietà <code>firstName</code> otteniamo "Hello, I'm undefined". (Questo accade in modalità blanda (loose mode); sarebbe stato diverso [un errore] in <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode" title="/en/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode">strict mode</a>, ma per evitare confusione qui non entreremo nei dettagli). Oppure si può impostare <code>this</code> esplicitamente utilizzando <code>Function#call</code> (o <code>Function#apply</code>), come illustrato alla fine dell'esempio.</p> - -<div class="note"><strong>Nota:</strong> Vedi approfondimenti su <code>this</code> in <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/call">Function#call</a> e <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/apply">Function#apply</a></div> - -<h4 id="Eredità">Eredità</h4> - -<p>L'ereditarietà è un modo per creare una classe come una versione specializzata di una o più classi (<em>JavaScript supporta solo l'ereditarietà singola</em>). La classe specializzata viene comunemente chiamata <em>figlio</em>, e l'altra classe viene comunemente chiamato <em>padre</em>. In JavaScript si esegue questa operazione assegnando un'istanza della classe padre alla classe figlio, e poi specializzandola. Nel browser moderni è anche possibile utilizzare <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create#Classical_inheritance_with_Object.create" title="/en-US/docs/JavaScript/Reference/Global_Objects/Object/create#Classical_inheritance_with_Object.create">Object.create</a> per implementare l'ereditarietà.</p> - -<div class="note"> -<p><strong>Nota:</strong> JavaScript non rileva <code>prototype.constructor</code> della classe figlio (vedi <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype">Object.prototype</a>), quindi devi farlo manualmente. Vedi la domanda "<a href="http://stackoverflow.com/questions/8453887/why-is-it-necessary-to-set-the-prototype-constructor">Why is it necessary to set the prototype constructor?</a>" su Stackoverflow.</p> -</div> - -<p>Nell'esempio seguente definiamo la classe <code>Student</code> come classe figlio di <code>Person</code>. Quindi ridefiniamo il metodo <code>sayHello()</code> e aggiungiamo il metodo <code>sayGoodBye()</code> .</p> - -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="comment token">// Define the Person constructor</span> -<span class="keyword token">var</span> Person <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>firstName<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">this</span><span class="punctuation token">.</span>firstName <span class="operator token">=</span> firstName<span class="punctuation token">;</span> -<span class="punctuation token">}</span><span class="punctuation token">;</span> - -<span class="comment token">// Add a couple of methods to Person.prototype</span> -Person<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>walk <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">{</span> - console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">"I am walking!"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span><span class="punctuation token">;</span> - -Person<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>sayHello <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">{</span> - console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">"Hello, I'm "</span> <span class="operator token">+</span> <span class="keyword token">this</span><span class="punctuation token">.</span>firstName<span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span><span class="punctuation token">;</span> - -<span class="comment token">// Define the Student constructor</span> -<span class="keyword token">function</span> <span class="function token">Student</span><span class="punctuation token">(</span>firstName<span class="punctuation token">,</span> subject<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="comment token">// Call the parent constructor, making sure (using Function#call)</span> - <span class="comment token">// that "this" is set correctly during the call</span> - Person<span class="punctuation token">.</span><span class="function token">call</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">,</span> firstName<span class="punctuation token">)</span><span class="punctuation token">;</span> - - <span class="comment token">// Initialize our Student-specific properties</span> - <span class="keyword token">this</span><span class="punctuation token">.</span>subject <span class="operator token">=</span> subject<span class="punctuation token">;</span> -<span class="punctuation token">}</span><span class="punctuation token">;</span> - -<span class="comment token">// Create a Student.prototype object that inherits from Person.prototype.</span> -<span class="comment token">// Note: A common error here is to use "new Person()" to create the</span> -<span class="comment token">// Student.prototype. That's incorrect for several reasons, not least </span> -<span class="comment token">// that we don't have anything to give Person for the "firstName" </span> -<span class="comment token">// argument. The correct place to call Person is above, where we call </span> -<span class="comment token">// it from Student.</span> -Student<span class="punctuation token">.</span>prototype <span class="operator token">=</span> Object<span class="punctuation token">.</span><span class="function token">create</span><span class="punctuation token">(</span>Person<span class="punctuation token">.</span>prototype<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// See note below</span> - -<span class="comment token">// Set the "constructor" property to refer to Student</span> -Student<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>constructor <span class="operator token">=</span> Student<span class="punctuation token">;</span> - -<span class="comment token">// Replace the "sayHello" method</span> -Student<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>sayHello <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">{</span> - console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">"Hello, I'm "</span> <span class="operator token">+</span> <span class="keyword token">this</span><span class="punctuation token">.</span>firstName <span class="operator token">+</span> <span class="string token">". I'm studying "</span> - <span class="operator token">+</span> <span class="keyword token">this</span><span class="punctuation token">.</span>subject <span class="operator token">+</span> <span class="string token">"."</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span><span class="punctuation token">;</span> - -<span class="comment token">// Add a "sayGoodBye" method</span> -Student<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>sayGoodBye <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">{</span> - console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">"Goodbye!"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span><span class="punctuation token">;</span> - -<span class="comment token">// Example usage:</span> -<span class="keyword token">var</span> student1 <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Student</span><span class="punctuation token">(</span><span class="string token">"Janet"</span><span class="punctuation token">,</span> <span class="string token">"Applied Physics"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -student1<span class="punctuation token">.</span><span class="function token">sayHello</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// "Hello, I'm Janet. I'm studying Applied Physics."</span> -student1<span class="punctuation token">.</span><span class="function token">walk</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// "I am walking!"</span> -student1<span class="punctuation token">.</span><span class="function token">sayGoodBye</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// "Goodbye!"</span> - -<span class="comment token">// Check that instanceof works correctly</span> -console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>student1 <span class="keyword token">instanceof</span> <span class="class-name token">Person</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// true </span> -console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>student1 <span class="keyword token">instanceof</span> <span class="class-name token">Student</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// true</span></code></pre> - -<p>Per quanto riguarda la linea <code>Student.prototype = Object.create(Person.prototype);</code> : in vecchi interpreti JavaScript senza <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create" title="Object.create"><code>Object.create</code></a>, si può utilizzare un "polyfill" (anche detto "shim", vedi l'articolo collegato), oppure utilizzare una funzione che produce il medesimo risultato, come:</p> - -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">createObject</span><span class="punctuation token">(</span>proto<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">function</span> <span class="function token">ctor</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="punctuation token">}</span> - ctor<span class="punctuation token">.</span>prototype <span class="operator token">=</span> proto<span class="punctuation token">;</span> - <span class="keyword token">return</span> <span class="keyword token">new</span> <span class="class-name token">ctor</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span> - -<span class="comment token">// Usage:</span> -Student<span class="punctuation token">.</span>prototype <span class="operator token">=</span> <span class="function token">createObject</span><span class="punctuation token">(</span>Person<span class="punctuation token">.</span>prototype<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> - -<div class="note"><strong>Nota:</strong> Vedi <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create" title="Object.create">Object.create</a> per maggiori informazioni su ciò che fa uno shim per vecchi interpreti.</div> - -<p>Essere sicuri che <code>this</code> punti alla cosa giusta a prescindere da come l'oggetto sia istanziato può essere difficile. Tuttavia c'e una tecnica semplice per renderlo più facile.</p> - -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> Person <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>firstName<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="keyword token">this</span> <span class="keyword token">instanceof</span> <span class="class-name token">Person</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">this</span><span class="punctuation token">.</span>firstName <span class="operator token">=</span> firstName<span class="punctuation token">;</span> - <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span> - <span class="keyword token">return</span> <span class="keyword token">new</span> <span class="class-name token">Person</span><span class="punctuation token">(</span>firstName<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> -<span class="punctuation token">}</span></code></pre> - -<h4 id="Incapsulamento">Incapsulamento</h4> - -<p>Nell'esempio precedente <code>Student</code> non ha bisogno di sapere come sia realizzato il metodo <code>walk()</code> della classe <code>Person</code>, ma può comunque utilizzarlo; la classe <code>Student</code> non ha bisogno di definire in modo esplicito questo metodo se non vogliamo cambiarlo. Questo è chiamato <strong>incapsulamento</strong>, per cui ogni classe impacchetta dati e metodi in una singola unità.</p> - -<p>Il nascondere informazioni (information hiding) è una caratteristica comune ad altre linguaggi, spesso in forma di metodi / proprietà private e protette. Anche se si potrebbe simulare qualcosa di simile in JavaScript, questo non è un requisito per fare programmazione Object Oriented.<a href="https://developer.mozilla.org/it/docs/Web/JavaScript/Introduzione_al_carattere_Object-Oriented_di_JavaScript$edit#cite-2"><sup>2</sup></a></p> - -<h4 id="Astrazione">Astrazione</h4> - -<p>L'astrazione è un meccanismo che permette di modellare la parte corrente del problema, sia con eredità (specializzazione) o la composizione. JavaScript ottiene la specializzazione per eredità, e la composizione permettendo che istanze di classe siano valori di attributi di altri oggetti.</p> - -<p>La classe Function di Javascript eredita dalla classe Object (questo dimostra la specializzazione del modello) e la proprietà Function.prototype è un'istanza di oggetto (ciò dimostra la composizione).</p> - -<p>The JavaScript Function class inherits from the Object class (this demonstrates specialization of the model) and the Function.prototype property is an instance of Object (this demonstrates composition).</p> - -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> foo <span class="operator token">=</span> <span class="keyword token">function</span> <span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span><span class="punctuation token">}</span><span class="punctuation token">;</span> - -<span class="comment token">// logs "foo is a Function: true"</span> -console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'foo is a Function: '</span> <span class="operator token">+</span> <span class="punctuation token">(</span>foo <span class="keyword token">instanceof</span> <span class="class-name token">Function</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - -<span class="comment token">// logs "foo.prototype is an Object: true"</span> -console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'foo.prototype is an Object: '</span> <span class="operator token">+</span> <span class="punctuation token">(</span>foo<span class="punctuation token">.</span>prototype <span class="keyword token">instanceof</span> <span class="class-name token">Object</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> - -<h4 id="Polimorfismo">Polimorfismo</h4> - -<p>Così come tutti i metodi e le proprietà sono definite all'interno della proprietà prototype, classi diverse possono definire metodi con lo stesso nome; i metodi sono nell'ambito della classe in cui sono definiti, a meno che le due classi siano in un rapporto padre-figlio (cioè una eredita dall'altra in una catena di ereditarietà).</p> - - - -<h2 id="Notes" name="Notes">Note</h2> - -<p>Le tecniche presentate in questo articolo per attuare la programmazione orientata agli oggetti non sono le uniche che possono essere utilizzate in JavaScript, che è molto flessibile in termini di come la programmazione orientata agli oggetti possa essere eseguita.</p> - -<p>Allo stesso modo, le tecniche qui indicate non usano alcuna violazione di linguaggio, né imitano implementazioni di teorie di oggetti di altri linguaggi.</p> - -<p>Ci sono altre tecniche che rendono la programmazione orientata agli oggetti in JavaScript ancora più avanzata, ma sono oltre la portata di questo articolo introduttivo.</p> - -<h2 id="References" name="References">Riferimenti</h2> - -<ol> - <li>{{ Ref() }} Mozilla. "Core JavaScript 1.5 Guide", http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Guide</li> - <li>{{ Ref() }} wikipedia. "Object-oriented programming", <a class="external" href="http://en.wikipedia.org/wiki/Object-oriented_programming" rel="freelink">http://en.wikipedia.org/wiki/Object-...ed_programming</a></li> -</ol> - -<div class="originaldocinfo"> -<p><strong>Original Document Information</strong></p> - -<ul> - <li>Author(s): Fernando Trasviña <f_trasvina at hotmail dot com></li> - <li>Copyright Information: © 1998-2005 by individual mozilla.org contributors; content available under a <a class="external" href="http://www.mozilla.org/foundation/licensing/website-content.html">Creative Commons license</a></li> -</ul> -</div> - -<p>{{ languages( { "es": "es/Introducción_a_JavaScript_orientado_a_objetos"} ) }}</p> diff --git a/files/it/web/javascript/il_dom_e_javascript/index.html b/files/it/web/javascript/javascript_technologies_overview/index.html index 9f2b0fbb56..941f6468a3 100644 --- a/files/it/web/javascript/il_dom_e_javascript/index.html +++ b/files/it/web/javascript/javascript_technologies_overview/index.html @@ -1,11 +1,12 @@ --- title: Il DOM e JavaScript -slug: Web/JavaScript/Il_DOM_e_JavaScript +slug: Web/JavaScript/JavaScript_technologies_overview tags: - DOM - JavaScript - Tutte_le_categorie translation_of: Web/JavaScript/JavaScript_technologies_overview +original_slug: Web/JavaScript/Il_DOM_e_JavaScript --- <h3 id="Il_Grande_Disegno" name="Il_Grande_Disegno">Il Grande Disegno</h3> diff --git a/files/it/web/javascript/gestione_della_memoria/index.html b/files/it/web/javascript/memory_management/index.html index d1cd6c4dca..8fb72946cb 100644 --- a/files/it/web/javascript/gestione_della_memoria/index.html +++ b/files/it/web/javascript/memory_management/index.html @@ -1,7 +1,8 @@ --- title: Gestione della memoria -slug: Web/JavaScript/Gestione_della_Memoria +slug: Web/JavaScript/Memory_Management translation_of: Web/JavaScript/Memory_Management +original_slug: Web/JavaScript/Gestione_della_Memoria --- <div>{{JsSidebar("Advanced")}}</div> diff --git a/files/it/web/javascript/reference/classes/costruttore/index.html b/files/it/web/javascript/reference/classes/constructor/index.html index afc6c44526..49c7fc05cd 100644 --- a/files/it/web/javascript/reference/classes/costruttore/index.html +++ b/files/it/web/javascript/reference/classes/constructor/index.html @@ -1,7 +1,8 @@ --- title: costruttore -slug: Web/JavaScript/Reference/Classes/costruttore +slug: Web/JavaScript/Reference/Classes/constructor translation_of: Web/JavaScript/Reference/Classes/constructor +original_slug: Web/JavaScript/Reference/Classes/costruttore --- <div>{{jsSidebar("Classes")}}</div> diff --git a/files/it/web/javascript/reference/functions_and_function_scope/arguments/index.html b/files/it/web/javascript/reference/functions/arguments/index.html index c277074bca..e879c914e3 100644 --- a/files/it/web/javascript/reference/functions_and_function_scope/arguments/index.html +++ b/files/it/web/javascript/reference/functions/arguments/index.html @@ -1,7 +1,8 @@ --- title: Oggetto 'arguments' -slug: Web/JavaScript/Reference/Functions_and_function_scope/arguments +slug: Web/JavaScript/Reference/Functions/arguments translation_of: Web/JavaScript/Reference/Functions/arguments +original_slug: Web/JavaScript/Reference/Functions_and_function_scope/arguments --- <div> <div>{{jsSidebar("Functions")}}</div> diff --git a/files/it/web/javascript/reference/functions_and_function_scope/arrow_functions/index.html b/files/it/web/javascript/reference/functions/arrow_functions/index.html index 2dd258966d..eef7570ec0 100644 --- a/files/it/web/javascript/reference/functions_and_function_scope/arrow_functions/index.html +++ b/files/it/web/javascript/reference/functions/arrow_functions/index.html @@ -1,6 +1,6 @@ --- title: Funzioni a freccia -slug: Web/JavaScript/Reference/Functions_and_function_scope/Arrow_functions +slug: Web/JavaScript/Reference/Functions/Arrow_functions tags: - ECMAScript6 - Funzioni @@ -8,6 +8,7 @@ tags: - JavaScript - Reference translation_of: Web/JavaScript/Reference/Functions/Arrow_functions +original_slug: Web/JavaScript/Reference/Functions_and_function_scope/Arrow_functions --- <div>{{jsSidebar("Functions")}}</div> diff --git a/files/it/web/javascript/reference/functions_and_function_scope/get/index.html b/files/it/web/javascript/reference/functions/get/index.html index 0ed76cf469..439255284c 100644 --- a/files/it/web/javascript/reference/functions_and_function_scope/get/index.html +++ b/files/it/web/javascript/reference/functions/get/index.html @@ -1,7 +1,8 @@ --- title: getter -slug: Web/JavaScript/Reference/Functions_and_function_scope/get +slug: Web/JavaScript/Reference/Functions/get translation_of: Web/JavaScript/Reference/Functions/get +original_slug: Web/JavaScript/Reference/Functions_and_function_scope/get --- <div>{{jsSidebar("Functions")}}</div> diff --git a/files/it/web/javascript/reference/functions_and_function_scope/index.html b/files/it/web/javascript/reference/functions/index.html index 8a5255282c..935190e355 100644 --- a/files/it/web/javascript/reference/functions_and_function_scope/index.html +++ b/files/it/web/javascript/reference/functions/index.html @@ -1,7 +1,8 @@ --- title: Funzioni -slug: Web/JavaScript/Reference/Functions_and_function_scope +slug: Web/JavaScript/Reference/Functions translation_of: Web/JavaScript/Reference/Functions +original_slug: Web/JavaScript/Reference/Functions_and_function_scope --- <div>{{jsSidebar("Functions")}}</div> diff --git a/files/it/web/javascript/reference/functions_and_function_scope/set/index.html b/files/it/web/javascript/reference/functions/set/index.html index 1af0f1c79d..c9f7e6f3fa 100644 --- a/files/it/web/javascript/reference/functions_and_function_scope/set/index.html +++ b/files/it/web/javascript/reference/functions/set/index.html @@ -1,11 +1,12 @@ --- title: setter -slug: Web/JavaScript/Reference/Functions_and_function_scope/set +slug: Web/JavaScript/Reference/Functions/set tags: - Funzioni - JavaScript - setter translation_of: Web/JavaScript/Reference/Functions/set +original_slug: Web/JavaScript/Reference/Functions_and_function_scope/set --- <div>{{jsSidebar("Functions")}}</div> diff --git a/files/it/web/javascript/reference/global_objects/array/prototype/index.html b/files/it/web/javascript/reference/global_objects/array/prototype/index.html deleted file mode 100644 index d4989792a8..0000000000 --- a/files/it/web/javascript/reference/global_objects/array/prototype/index.html +++ /dev/null @@ -1,203 +0,0 @@ ---- -title: Array.prototype -slug: Web/JavaScript/Reference/Global_Objects/Array/prototype -translation_of: Web/JavaScript/Reference/Global_Objects/Array/prototype ---- -<div>{{JSRef}}</div> - -<p>La proprietà <strong><code>Array.prototype</code></strong> rappresenta il prototipo per il costruttore {{jsxref("Array")}} .</p> - -<div>{{js_property_attributes(0, 0, 0)}}</div> - -<h2 id="Description" name="Description">Descrizione</h2> - -<p>Le istanze {{jsxref("Array")}} ereditano da <code>Array.prototype</code>. Come con gli altri costruttori, si può cambiare il prototipo propagando i cambiamenti su tutte le sue istanze.</p> - -<p>Piccola curiosità: <code>Array.prototype</code> è un {{jsxref("Array")}}:</p> - -<pre class="brush: js">Array.isArray(Array.prototype); // true -</pre> - -<h2 id="Properties" name="Properties">Proprietà</h2> - -<dl> - <dt><code>Array.prototype.constructor</code></dt> - <dd>Restituisce il costruttore.</dd> - <dt>{{jsxref("Array.prototype.length")}}</dt> - <dd>Restituisce il numero di elementi in un array.</dd> -</dl> - -<h2 id="Methods" name="Methods">Metodi</h2> - -<h3 id="Mutator_methods" name="Mutator_methods">Metodi mutator</h3> - -<p>Questi metodi modificano l'array:</p> - -<dl> - <dt>{{jsxref("Array.prototype.copyWithin()")}} {{experimental_inline}}</dt> - <dd>Copia una sequenza di elementi dell'array all'interno dello stesso.</dd> - <dt>{{jsxref("Array.prototype.fill()")}} {{experimental_inline}}</dt> - <dd>Riempie le posizioni dell'array contenute tra 2 indici con un valore fisso.</dd> - <dt>{{jsxref("Array.prototype.pop()")}}</dt> - <dd>Rimuove e restituisce l'ultimo elemento dell'array.</dd> - <dt>{{jsxref("Array.prototype.push()")}}</dt> - <dd>Accoda uno o più elementi all'array e restituisce la lunghezza aggiornata dello stesso.</dd> - <dt>{{jsxref("Array.prototype.reverse()")}}</dt> - <dd>Inverte l'ordine delle posizioni degli elementi all'interno dell'array.</dd> - <dt>{{jsxref("Array.prototype.shift()")}}</dt> - <dd>Rimuove e resistuisce il primo elemento di un array.</dd> - <dt>{{jsxref("Array.prototype.sort()")}}</dt> - <dd>Ordina gli elementi di un array all'interno di esso e restituisce l'array.</dd> - <dt>{{jsxref("Array.prototype.splice()")}}</dt> - <dd>Aggiunge e/o rimuove elementi da un array.</dd> - <dt>{{jsxref("Array.prototype.unshift()")}}</dt> - <dd>Aggiunge uno o più elementi all'inizio di un array e restituisce la lunghezza aggiornata dello stesso.</dd> -</dl> - -<h3 id="Accessor_methods" name="Accessor_methods">Metodi accessor</h3> - -<p>Questi metodi non modificano l'array e ne restituiscono una sua rappresentazione.</p> - -<dl> - <dt>{{jsxref("Array.prototype.concat()")}}</dt> - <dd>Restituisce un nuovo array costituito dall'array stesso insieme ad altri array/valori.</dd> - <dt>{{jsxref("Array.prototype.includes()")}} {{experimental_inline}}</dt> - <dd>Restituisce <code>true</code> se l'array contiene un certo elemento, <code>false</code> altrimenti.</dd> - <dt>{{jsxref("Array.prototype.join()")}}</dt> - <dd>Resituisce i valori dell'array come stringa.</dd> - <dt>{{jsxref("Array.prototype.slice()")}}</dt> - <dd>Restituisce un nuovo array cosituito da elementi dell'array originale.</dd> - <dt>{{jsxref("Array.prototype.toSource()")}} {{non-standard_inline}}</dt> - <dd>Returns an array literal representing the specified array; you can use this value to create a new array. Overrides the {{jsxref("Object.prototype.toSource()")}} method.</dd> - <dt>{{jsxref("Array.prototype.toString()")}}</dt> - <dd>Returns a string representing the array and its elements. Overrides the {{jsxref("Object.prototype.toString()")}} method.</dd> - <dt>{{jsxref("Array.prototype.toLocaleString()")}}</dt> - <dd>Returns a localized string representing the array and its elements. Overrides the {{jsxref("Object.prototype.toLocaleString()")}} method.</dd> - <dt>{{jsxref("Array.prototype.indexOf()")}}</dt> - <dd>Returns the first (least) index of an element within the array equal to the specified value, or -1 if none is found.</dd> - <dt>{{jsxref("Array.prototype.lastIndexOf()")}}</dt> - <dd>Returns the last (greatest) index of an element within the array equal to the specified value, or -1 if none is found.</dd> -</dl> - -<h3 id="Iteration_methods" name="Iteration_methods">Iteration methods</h3> - -<p>Several methods take as arguments functions to be called back while processing the array. When these methods are called, the <code>length</code> of the array is sampled, and any element added beyond this length from within the callback is not visited. Other changes to the array (setting the value of or deleting an element) may affect the results of the operation if the method visits the changed element afterwards. While the specific behavior of these methods in such cases is well-defined, you should not rely upon it so as not to confuse others who might read your code. If you must mutate the array, copy into a new array instead.</p> - -<dl> - <dt>{{jsxref("Array.prototype.forEach()")}}</dt> - <dd>Calls a function for each element in the array.</dd> - <dt>{{jsxref("Array.prototype.entries()")}} {{experimental_inline}}</dt> - <dd>Returns a new <code>Array Iterator</code> object that contains the key/value pairs for each index in the array.</dd> - <dt>{{jsxref("Array.prototype.every()")}}</dt> - <dd>Returns true if every element in this array satisfies the provided testing function.</dd> - <dt>{{jsxref("Array.prototype.some()")}}</dt> - <dd>Returns true if at least one element in this array satisfies the provided testing function.</dd> - <dt>{{jsxref("Array.prototype.filter()")}}</dt> - <dd>Creates a new array with all of the elements of this array for which the provided filtering function returns true.</dd> - <dt>{{jsxref("Array.prototype.find()")}} {{experimental_inline}}</dt> - <dd>Returns the found value in the array, if an element in the array satisfies the provided testing function or <code>undefined</code> if not found.</dd> - <dt>{{jsxref("Array.prototype.findIndex()")}} {{experimental_inline}}</dt> - <dd>Returns the found index in the array, if an element in the array satisfies the provided testing function or -1 if not found.</dd> - <dt>{{jsxref("Array.prototype.keys()")}} {{experimental_inline}}</dt> - <dd>Returns a new <code>Array Iterator</code> that contains the keys for each index in the array.</dd> - <dt>{{jsxref("Array.prototype.map()")}}</dt> - <dd>Creates a new array with the results of calling a provided function on every element in this array.</dd> - <dt>{{jsxref("Array.prototype.reduce()")}}</dt> - <dd>Apply a function against an accumulator and each value of the array (from left-to-right) as to reduce it to a single value.</dd> - <dt>{{jsxref("Array.prototype.reduceRight()")}}</dt> - <dd>Apply a function against an accumulator and each value of the array (from right-to-left) as to reduce it to a single value.</dd> - <dt>{{jsxref("Array.prototype.values()")}} {{experimental_inline}}</dt> - <dd>Returns a new <code>Array Iterator</code> object that contains the values for each index in the array.</dd> - <dt>{{jsxref("Array.prototype.@@iterator()", "Array.prototype[@@iterator]()")}} {{experimental_inline}}</dt> - <dd>Returns a new <code>Array Iterator</code> object that contains the values for each index in the array.</dd> -</dl> - -<h3 id="Generic_methods" name="Generic_methods">Generic methods</h3> - -<p>Many methods on the JavaScript Array object are designed to be generally applied to all objects which “look like” Arrays. That is, they can be used on any object which has a <code>length</code> property, and which can usefully be accessed using numeric property names (as with <code>array[5]</code> indexing). <span class="comment">TODO: give examples with Array.prototype.forEach.call, and adding the method to an object like {{jsxref("Global_Objects/JavaArray", "JavaArray")}} or {{jsxref("Global_Objects/String", "String")}}.</span> Some methods, such as {{jsxref("Array.join", "join")}}, only read the <code>length</code> and numeric properties of the object they are called on. Others, like {{jsxref("Array.reverse", "reverse")}}, require that the object's numeric properties and <code>length</code> be mutable; these methods can therefore not be called on objects like {{jsxref("String")}}, which does not permit its <code>length</code> property or synthesized numeric properties to be set.</p> - -<h2 id="Specifications" name="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.4.3.1', 'Array.prototype')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-array.prototype', 'Array.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="See_also" name="See_also">See also</h2> - -<ul> - <li>{{jsxref("Array")}}</li> - <li>{{jsxref("Function.prototype")}}</li> -</ul> diff --git a/files/it/web/javascript/reference/global_objects/object/prototype/index.html b/files/it/web/javascript/reference/global_objects/object/prototype/index.html deleted file mode 100644 index 568165d0be..0000000000 --- a/files/it/web/javascript/reference/global_objects/object/prototype/index.html +++ /dev/null @@ -1,215 +0,0 @@ ---- -title: Object.prototype -slug: Web/JavaScript/Reference/Global_Objects/Object/prototype -translation_of: Web/JavaScript/Reference/Global_Objects/Object -translation_of_original: 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/web/javascript/reference/global_objects/proxy/handler/apply/index.html b/files/it/web/javascript/reference/global_objects/proxy/proxy/apply/index.html index f803b41255..16c5a8dcb2 100644 --- a/files/it/web/javascript/reference/global_objects/proxy/handler/apply/index.html +++ b/files/it/web/javascript/reference/global_objects/proxy/proxy/apply/index.html @@ -1,12 +1,13 @@ --- title: handler.apply() -slug: Web/JavaScript/Reference/Global_Objects/Proxy/handler/apply +slug: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/apply tags: - ECMAScript 2015 - JavaScript - Proxy - metodo translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/apply +original_slug: Web/JavaScript/Reference/Global_Objects/Proxy/handler/apply --- <div>{{JSRef}}</div> diff --git a/files/it/web/javascript/reference/global_objects/proxy/handler/index.html b/files/it/web/javascript/reference/global_objects/proxy/proxy/index.html index 2be6abb116..695cf4ce22 100644 --- a/files/it/web/javascript/reference/global_objects/proxy/handler/index.html +++ b/files/it/web/javascript/reference/global_objects/proxy/proxy/index.html @@ -1,6 +1,6 @@ --- title: Proxy handler -slug: Web/JavaScript/Reference/Global_Objects/Proxy/handler +slug: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy tags: - ECMAScript 2015 - JavaScript @@ -9,6 +9,7 @@ tags: - TopicStub translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy translation_of_original: Web/JavaScript/Reference/Global_Objects/Proxy/handler +original_slug: Web/JavaScript/Reference/Global_Objects/Proxy/handler --- <div>{{JSRef}}</div> diff --git a/files/it/web/javascript/reference/global_objects/proxy/revocabile/index.html b/files/it/web/javascript/reference/global_objects/proxy/revocable/index.html index bf87d7e3e7..5039f6fa07 100644 --- a/files/it/web/javascript/reference/global_objects/proxy/revocabile/index.html +++ b/files/it/web/javascript/reference/global_objects/proxy/revocable/index.html @@ -1,7 +1,8 @@ --- title: Proxy.revocable() -slug: Web/JavaScript/Reference/Global_Objects/Proxy/revocabile +slug: Web/JavaScript/Reference/Global_Objects/Proxy/revocable translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/revocable +original_slug: Web/JavaScript/Reference/Global_Objects/Proxy/revocabile --- <div>{{JSRef}}</div> diff --git a/files/it/web/javascript/reference/global_objects/string/prototype/index.html b/files/it/web/javascript/reference/global_objects/string/prototype/index.html deleted file mode 100644 index c83cec2a54..0000000000 --- a/files/it/web/javascript/reference/global_objects/string/prototype/index.html +++ /dev/null @@ -1,179 +0,0 @@ ---- -title: String.prototype -slug: Web/JavaScript/Reference/Global_Objects/String/prototype -translation_of: Web/JavaScript/Reference/Global_Objects/String -translation_of_original: 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/web/javascript/reference/operators/operatore_virgola/index.html b/files/it/web/javascript/reference/operators/comma_operator/index.html index e4027930a1..f4cf7b3fd6 100644 --- a/files/it/web/javascript/reference/operators/operatore_virgola/index.html +++ b/files/it/web/javascript/reference/operators/comma_operator/index.html @@ -1,7 +1,8 @@ --- title: Operatore virgola -slug: Web/JavaScript/Reference/Operators/Operatore_virgola +slug: Web/JavaScript/Reference/Operators/Comma_Operator translation_of: Web/JavaScript/Reference/Operators/Comma_Operator +original_slug: Web/JavaScript/Reference/Operators/Operatore_virgola --- <div>{{jsSidebar("Operators")}}</div> diff --git a/files/it/web/javascript/reference/operators/operator_condizionale/index.html b/files/it/web/javascript/reference/operators/conditional_operator/index.html index 1ade61b085..1d0bc7f79a 100644 --- a/files/it/web/javascript/reference/operators/operator_condizionale/index.html +++ b/files/it/web/javascript/reference/operators/conditional_operator/index.html @@ -1,9 +1,10 @@ --- title: Operatore condizionale (ternary) -slug: Web/JavaScript/Reference/Operators/Operator_Condizionale +slug: Web/JavaScript/Reference/Operators/Conditional_Operator tags: - JavaScript Operatore operatore translation_of: Web/JavaScript/Reference/Operators/Conditional_Operator +original_slug: Web/JavaScript/Reference/Operators/Operator_Condizionale --- <p>L'<strong>operator</strong><strong>e</strong><strong> condizionale (ternary) </strong>è l'unico operatore JavaScript che necessità di tre operandi. Questo operatore è frequentemente usato al posto del comando <a href="/en-US/docs/Web/JavaScript/Reference/Statements/if...else"><code>if</code></a> per la sua sintassi concisa e perché fornisce direttamente un espressione valutabile.</p> diff --git a/files/it/web/javascript/reference/operators/operatori_aritmetici/index.html b/files/it/web/javascript/reference/operators/operatori_aritmetici/index.html deleted file mode 100644 index e49fe045ae..0000000000 --- a/files/it/web/javascript/reference/operators/operatori_aritmetici/index.html +++ /dev/null @@ -1,292 +0,0 @@ ---- -title: Operatori Aritmetici -slug: Web/JavaScript/Reference/Operators/Operatori_Aritmetici -tags: - - JavaScript - - Operatori - - Operatori Aritmetici -translation_of: Web/JavaScript/Reference/Operators -translation_of_original: Web/JavaScript/Reference/Operators/Arithmetic_Operators ---- -<div>{{jsSidebar("Operators")}}</div> - -<div>Gli <strong>operatori aritmetici</strong> lavorano su operandi numerici (sia letterali che variabili) e ritornano un singolo valore numerico. Gli operatori aritmetici standard sono l'addizione (+), la sottrazione (-), la moltiplicazione (*) e la divisione (/).</div> - -<h2 id="Addizione_()"><a name="Addition">Addizione (+)</a></h2> - -<p>L'operazione di addizione produce la somma di operandi numerici o la concatenzione di stringhe.</p> - -<h3 id="Sintassi">Sintassi</h3> - -<pre class="syntaxbox"><strong>Operatore:</strong> x + y -</pre> - -<h3 id="Esempi">Esempi</h3> - -<pre class="brush: js">// Numero + Numero -> addizione -1 + 2 // 3 - -// Booleano + Numero -> addizione -true + 1 // 2 - -// Booleano + Booleano -> additione -false + false // 0 - -// Numero + Stringa -> concatenazione -5 + "foo" // "5foo" - -// Stringa + Booleano -> concatenazione -"foo" + false // "foofalse" - -// Stringa + Stringa -> concatenazione -"foo" + "bar" // "foobar" -</pre> - -<h2 id="Sottrazione_(-)"><a name="Subtraction">Sottrazione (-)</a></h2> - -<p>L'operatore di sottrazione fa la sottrazione dei due operandi e produce la loro differenza.</p> - -<h3 id="Sintassi_2">Sintassi</h3> - -<pre class="syntaxbox"><strong>Operatore:</strong> x - y -</pre> - -<h3 id="Esempi_2">Esempi</h3> - -<pre class="brush: js">5 - 3 // 2 -3 - 5 // -2 -"foo" - 3 // NaN</pre> - -<h2 id="Divisione_()"><a name="Division">Divisione (/)</a></h2> - -<p>L'operatore di divisione produce il quoziente dei suoi operandi dove l'operando di sinistra è il dividendo e l'operando di destra è il divisore.</p> - -<h3 id="Sintassi_3">Sintassi</h3> - -<pre class="syntaxbox"><strong>Operatore:</strong> x / y -</pre> - -<h3 id="Esempi_3">Esempi</h3> - -<pre class="brush: js">1 / 2 // restituisce 0.5 in JavaScript -1 / 2 // restituisce 0 in Java -// (nessuno degli operandi è un numero in virgola mobile esplicito) - -1.0 / 2.0 // restituisce 0.5 in both JavaScript and Java - -2.0 / 0 // restituisce Infinity in JavaScript -2.0 / 0.0 // restituisce Infinity too -2.0 / -0.0 // restituisce -Infinity in JavaScript</pre> - -<h2 id="Moltiplicazione_(*)"><a name="Multiplication">Moltiplicazione (*)</a></h2> - -<p>The multiplication operator produces the product of the operands.</p> - -<h3 id="Sintassi_4">Sintassi</h3> - -<pre class="syntaxbox"><strong>Operatore:</strong> x * y -</pre> - -<h3 id="Esempi_4">Esempi</h3> - -<pre class="brush: js">2 * 2 // 4 --2 * 2 // -4 -Infinity * 0 // NaN -Infinity * Infinity // Infinity -"foo" * 2 // NaN -</pre> - -<h2 id="Resto_()"><a name="Remainder">Resto (%)</a></h2> - -<p>L'operatore Resto o Modulo restituisce il “resto“ rimasto quando un operando viene diviso per un secondo operando. Calcola il resto della divisione fra il primo e il secondo operando. Porta sempre il segno del dividendo.</p> - -<h3 id="Sintassi_5">Sintassi</h3> - -<pre class="syntaxbox"><strong>Operatore:</strong> var1 % var2 -</pre> - -<h3 id="Esempi_5">Esempi</h3> - -<pre class="brush: js">12 % 5 // 2 --1 % 2 // -1 -NaN % 2 // NaN -1 % 2 // 1 -2 % 3 // 2 --4 % 2 // -0 -</pre> - -<h2 id="Esponente_(**)"><a name="Exponentiation">Esponente (**)</a></h2> - -<p><strong>L'operatore Esponente o esponenziale in JavaScript. </strong>Una delle funzionalità di questa versione è l'operatore di esponenziazione. Esponente restituisce il risultato dell'elevamento a potenza dal primo operando al secondo. Cioè <code>var1</code> <code>var2</code> , <code>var2.</code> <code>var1</code>e <code>var2</code> sono variabili. L'operatore Esponente ha ragione associativa. <code>a ** b ** c</code> equivale a <code>a ** (b ** c)</code>.</p> - -<h3 id="Sintassi_6">Sintassi</h3> - -<pre class="syntaxbox"><strong>Operatore:</strong> var1 ** var2 -</pre> - -<h3 id="Note">Note</h3> - -<p>Nella maggior parte dei linguaggi come PHP e Python e altri che usano l'operatore Esponente (**), ha precedenza rispetto agli altri operatori unari come + e -, salvo in alcune eccezioni. Ad esempio, in Bash l'operatore ** ha una minor importanza rispetto agli operatori unari. In JavaScript, è impossibile scrivere un'espressione Esponente ambigua, ovvero non è possibile inserire un operatore unario ( <code>+/-/~/!/delete/void/typeof</code> ) immediatamente prima del numero di base. Il calcolo della potenza può essere espresso più sinteticamente usando la notazione infissa. Simile ad altri linguaggi come Python o F#, <code>**</code> è usato per indicare l'operatore. </p> - -<pre class="brush: js">-2 ** 2 // equals 4 in ES2016 or in Bash, equals -4 in other languages.</pre> - -<p>Accetta base sul lato sinistro ed esponente sul lato destro, rispettivamente.</p> - -<pre class="brush: js">let value = 5; value **= 2; // value: 25 -</pre> - -<h3 id="Esempi_6">Esempi</h3> - -<pre class="brush: js">2 ** 3 // 8 -3 ** 2 // 9 -3 ** 2.5 // 15.588457268119896 -10 ** -1 // 0.1 -NaN ** 2 // NaN - -2 ** 3 ** 2 // 512 -2 ** (3 ** 2) // 512 -(2 ** 3) ** 2 // 64 - -var a = 3; -var b = a ** 3; -alert("3x3x3 is = " + b); // 27 -</pre> - -<p>Per invertire il segno del risultato di un'espressione di Esponente:</p> - -<pre><code>-(2 ** 2) // -4</code> -</pre> - -<p>Per forzare la base di un'espressione di Esponente ad essere un numero negativo:</p> - -<pre><code>(-2) ** 2 // 4 </code></pre> - -<h2 id="Incremento_()"><a name="Increment">Incremento (++)</a></h2> - -<p>L'operatore di incremento incrementa (aggiunge uno a) il suo operando e restituisce un valore.</p> - -<ul> - <li>Se usato in post posizione, con operatore dopo operando (ad esempio, x ++), restituisce il valore prima di incrementare.</li> - <li>Se usato come prefisso quindi prima dell'operando (ad esempio, ++ x), restituisce il valore dopo l'incremento.</li> -</ul> - -<h3 id="Sintassi_7">Sintassi</h3> - -<pre class="syntaxbox"><strong>Operatore:</strong> x++ or ++x -</pre> - -<h3 id="Esempi_7">Esempi</h3> - -<pre class="brush: js">// Postfix // post posizione -var x = 3; -y = x++; // y = 3, x = 4 - -// Prefix // Prefisso -var a = 2; -b = ++a; // a = 3, b = 3 -</pre> - -<h2 id="Decremento_(--)"><a name="Decrement">Decremento (--)</a></h2> - -<p>L'operatore decrementa decrementa (sottrae uno da) il suo operando e restituisce un valore.</p> - -<ul> - <li>Se usato in post posizione (ad esempio x--), restituisce il valore prima di decrementare.</li> - <li>Se usato come prefisso (ad esempio, --x), restituisce il valore dopo la decrementazione.</li> -</ul> - -<h3 id="Sintassi_8">Sintassi</h3> - -<pre class="syntaxbox"><strong>Operatore:</strong> x-- or --x -</pre> - -<h3 id="Esempi_8">Esempi</h3> - -<pre class="brush: js">// Postfix // post posizione -var x = 3; -y = x--; // y = 3, x = 2 - -// Prefix // Prefisso -var a = 2; -b = --a; // a = 1, b = 1 -</pre> - -<h2 id="Negazione_unaria_(-)"><a name="Unary_negation">Negazione unaria (-)</a></h2> - -<p>L'operatore di negazione unario precede il suo operando e lo nega.</p> - -<h3 id="Sintassi_9">Sintassi</h3> - -<pre class="syntaxbox"><strong>Operatore:</strong> -x -</pre> - -<h3 id="Esempi_9">Esempi</h3> - -<pre><code>var x = 3; -y = -x; // y = -3, x = 3 - -//</code>L'operatore di negazione unario può convertire numeri diversi in un numero<code> -var x = "4"; -y = -x; // y = -4</code></pre> - -<h2 id="Unario_più_()"><a name="Unary_plus">Unario più</a> (+)</h2> - -<p>L'operatore unario più precede il suo operando e valuta il suo operando, ma tenta di convertirlo in un numero, se non lo è già. Anche se la negazione unaria (-) può anche convertire non numeri, unario è il modo più veloce e preferito per convertire qualcosa in un numero, perché non esegue altre operazioni sul numero. È in grado di convertire rappresentazioni di stringa di numeri interi e float, oltre ai valori non stringa <code>true</code> , <code>false</code> e <code>null</code> . Sono supportati i numeri interi decimali ed esadecimali ("0x" -prefixed). I numeri negativi sono supportati (sebbene non per hex). Se non può analizzare un valore particolare, valuterà in <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN">NaN</a>.</p> - -<h3 id="Sintassi_10">Sintassi</h3> - -<pre class="syntaxbox"><strong>Operatore:</strong> +x -</pre> - -<h3 id="Esempi_10">Esempi</h3> - -<pre><code>+3 // 3 -+'3' // 3 -+true // 1 -+false // 0 -+null // 0 -+function(val){ return val } // NaN</code></pre> - -<h2 id="Specificazioni">Specificazioni</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specificazioni</th> - <th scope="col">Stato</th> - <th scope="col">Commento</th> - </tr> - <tr> - <td>ECMAScript 1st Edition.</td> - <td>Standard</td> - <td>Definizione iniziale.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-11.3')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td>Definito in diverse sezioni della specifica: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.6">Additive operators</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.5">Multiplicative operators</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.3">Postfix expressions</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.4">Unary operators</a>.</td> - </tr> - <tr> - <td>{{SpecName('ES2015', '#sec-postfix-expressions')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Definito in diverse sezioni della specifica: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-additive-operators">Additive operators</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-multiplicative-operators">Multiplicative operators</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-postfix-expressions">Postfix expressions</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-unary-operators">Unary operators</a>.</td> - </tr> - <tr> - <td>{{SpecName('ES2016', '#sec-postfix-expressions')}}</td> - <td>{{Spec2('ES2016')}}</td> - <td>Aggiunto <a href="https://github.com/rwaldron/exponentiation-operator">Exponentiation operator</a>.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> - - - -<p>{{Compat("javascript.operators.arithmetic")}}</p> - -<h2 id="Guarda_anche">Guarda anche</h2> - -<ul> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">Assignment operators</a></li> -</ul> diff --git a/files/it/web/javascript/reference/template_strings/index.html b/files/it/web/javascript/reference/template_literals/index.html index 5bb4890ad8..52ca5a1802 100644 --- a/files/it/web/javascript/reference/template_strings/index.html +++ b/files/it/web/javascript/reference/template_literals/index.html @@ -1,7 +1,8 @@ --- title: Stringhe template -slug: Web/JavaScript/Reference/template_strings +slug: Web/JavaScript/Reference/Template_literals translation_of: Web/JavaScript/Reference/Template_literals +original_slug: Web/JavaScript/Reference/template_strings --- <div>{{JsSidebar("More")}}</div> diff --git a/files/it/web/opensearch/index.html b/files/it/web/opensearch/index.html new file mode 100644 index 0000000000..a80723a37a --- /dev/null +++ b/files/it/web/opensearch/index.html @@ -0,0 +1,35 @@ +--- +title: Installare plugin di ricerca dalle pagine web +slug: Web/OpenSearch +tags: + - Plugin_di_ricerca +translation_of: Web/OpenSearch +translation_of_original: Web/API/Window/sidebar/Adding_search_engines_from_Web_pages +original_slug: Installare_plugin_di_ricerca_dalle_pagine_web +--- +<p>Firefox permette di installare dei plugin di ricerca tramite JavaScript e supporta tre formati per questi plugin: MozSearch, OpenSearch e Sherlock. +</p><p>Quando il codice JavaScript tenta di installare un plugin, Firefox propone un messaggio di allerta che chiede all'utente il permesso di installare il plugin. +</p> +<h2 id="Installare_plugin_in_MozSearch_o_OpenSearch">Installare plugin in MozSearch o OpenSearch</h2> +<p>Per installare plugin in MozSearch o OpenSearch, occorre il metodo <a href="it/DOM">DOM</a> <code>window.external.AddSearchProvider()</code>. La sintassi è la seguente: +</p> +<pre class="eval">window.external.AddSearchProvider(<i>URL_del_plugin</i>); +</pre> +<p><i>URL_del_plugin</i> è l'URL del file XML o del plugin. +</p> +<div class="note"><b>Nota:</b> il supporto per MozSearch e OpenSearch è disponibile solo in <a href="it/Firefox_2">Firefox 2</a> e successivi.</div> +<p>Per ulteriori dettagli su MozSearch, vedi <a href="it/Creating_MozSearch_plugins">Creating MozSearch plugins</a>. +</p> +<h2 id="Installare_plugin_in_Sherlock">Installare plugin in Sherlock</h2> +<p>Per installare un plugin in Sherlock, occorre chiamare <code>window.sidebar.addSearchEngine()</code>, la cui sintassi è la seguente: +</p> +<pre class="eval">window.sidebar.addSearchEngine(<i>URL_del_plugin</i>, <i>icona_del_plugin</i>, <i>nome_suggerito</i>, <i>categoria_suggerita</i>); +</pre> +<ul><li> Il parametro <code>URL_del_plugin</code> è l'URL del plugin da installare (un file ".src"). +</li><li> <code>iconURL</code> is the URL to an icon to associate with the plugin. +</li><li> Il parametro <code>nome_suggerito</code> viene utilizzato solo quando il browser chiede all'utente il permesso di installare il plugin, con un messaggio del tipo "Si desidera installare <b>nome_suggerito</b> da <b>URL_del_plugin</b>?". +</li><li> Il parametro <code>suggestedCategory</code> non viene usato. Si dovrebbe inserire una stringa vuota (<code>""</code>) o <code>null</code>. +</li></ul> +<p>Per ulteriori informazioni su Sherlock: +<a class=" external" href="http://developer.apple.com/macosx/sherlock/">http://developer.apple.com/macosx/sherlock/</a> +</p>{{ languages( { "en": "en/Adding_search_engines_from_web_pages", "ja": "ja/Adding_search_engines_from_web_pages" } ) }} diff --git a/files/it/web/performance/percorso_critico_di_rendering/index.html b/files/it/web/performance/critical_rendering_path/index.html index 31c0b82ac8..d80bf04f96 100644 --- a/files/it/web/performance/percorso_critico_di_rendering/index.html +++ b/files/it/web/performance/critical_rendering_path/index.html @@ -1,7 +1,8 @@ --- title: Percorso critico di rendering -slug: Web/Performance/Percorso_critico_di_rendering +slug: Web/Performance/Critical_rendering_path translation_of: Web/Performance/Critical_rendering_path +original_slug: Web/Performance/Percorso_critico_di_rendering --- <p>{{draft}}</p> diff --git a/files/it/web/progressive_web_apps/index.html b/files/it/web/progressive_web_apps/index.html new file mode 100644 index 0000000000..b5a75bd912 --- /dev/null +++ b/files/it/web/progressive_web_apps/index.html @@ -0,0 +1,51 @@ +--- +title: Design Sensibile +slug: Web/Progressive_web_apps +translation_of: Web/Progressive_web_apps +translation_of_original: Web/Guide/Responsive_design +original_slug: Web_Development/Mobile/Design_sensibile +--- +<p>Come risposta ai problemi associati all'approccio per <a href="/en-US/docs/Web_Development/Mobile/Separate_sites">siti separati</a> nel campo del Web design per mobile e desktop, un'idea relativamente nuova (che è <a href="http://www.alistapart.com/articles/dao/">abbastanza datata</a>) sta aumentando la sua popolarità: evitare il rilevamento user-agent, e creare invece una pagina che risponda client-side alle capacità del browser. Questo approccio, introdotto da Ethan Marcotte nel suo articolo dal titolo <a href="http://alistapart.com">A List Apart</a>, è oggi conosciuto come <a href="http://www.alistapart.com/articles/responsive-web-design/">Web Design Sensibile</a>. Come l'approccio a siti separati, il Web Design sensibile possiede aspetti positivi e negativi.</p> +<h2 id="Aspetti_Positivi">Aspetti Positivi</h2> +<p>Sebbene non fosse inizialmente pensato come un metodo per creare siti per dispositivi mobili, il design sensibile ha recentemente ricevuto un sacco di attenzione come metodo per muovere i primi passi verso la mobile-friendliness al posto di creare siti separati.</p> +<ol style="font-size: medium;"> + <li>Fa risparmiare tempo e denaro dato che non vi è la necessità di mantenere più siti separati per diversi dispositivi.</li> + <li>Il Design Sensibile fornisce ogni pagina con un singolo e unico URL.</li> + <li>Le statistiche di condivisione Social (Mi piace di Facebook, Tweets, +1 su Google plus) non sono divise, dato che le versioni mobile e desktop delle vostre pagine web utilizzano un singolo e unico URL.</li> + <li>Il Design Sensibile non si cura degli user agent.</li> +</ol> +<p>Ci sono degli aspetti decisamente buoni in questo approccio. Dato che non si appoggia al rilevamento degli user-agent, è più affidabile e a prova di aggiornamenti dell'approccio a siti separati. Per siti semplici, può essere significativamente più facile da realizzare e mantenere di altre opzioni.</p> +<h2 id="Aspetti_Negativi">Aspetti Negativi</h2> +<p>Questo approccio non è privo di limitazioni. Dato che il contenuto può venire alterato client-side con JavaScript, solo cambiamenti minimali in esso sono consigliati. In genere, le cose possono diventare molto complicate molto in fretta se state provando a codificare due set separati di JavaScript per lavorare sullo stesso DOM. Questa è la ragione principale per la quale le applicazioni Web tendono a non adottare questa soluzione.</p> +<p>Dando al vostro sito un design sensibile implica anche il riscrivere gli stili se non avete realizzato già un <a href="http://www.smashingmagazine.com/2008/06/26/flexible-layouts-challenge-for-the-future/">layout flessibile</a>. Questo potrebbe essere anche un vantaggio mascherato: creare un design sensibile per il vostro sito potrebbe essere una buona opportunità per modernizzarne e pulirne i fogli di stile.</p> +<p>Infine, dato che state aggiungendo codice ai vostri script e fogli di stile, le performance potrebbero peggiorare molto di più che con l'approccio a Siti Separati. Non c'è nessun modo per evitare ciò, anche se una riproduzione meditata dei vostri script e fogli di stile potrebbe salvare qualche byte nel lungo periodo.</p> +<h2 id="Quando_è_bene_scegliere_questa_opzione">Quando è bene scegliere questa opzione</h2> +<p><a href="/@api/deki/files/5894/=teixido_responsive-300x177.png" title="teixido_responsive-300x177.png"><img align="right" alt="teixido_responsive-300x177.png" class="internal rwrap" height="177" src="/@api/deki/files/5894/=teixido_responsive-300x177.png?size=webview" width="300"></a>Come già detto, dato il cambiamento dei contenuti potrebbe essere difficile, utilizzando questo approccio, far vivere agli utenti un'esperienza significativamente diversa agli utenti mobili senza rendere il codice più complesso. Detto ciò, se le versioni desktop e mobile del vostro sito sono molto simili, allora questo approccio è una buona scelta. Va bene per siti il cui nucleo è formato da documenti la cui prima funzione è consistente attraverso i dispositivi, come le pagine di prodotto. Come potete notare gli esempi sottostanti sono tutti blog e portfolio!</p> +<h2 id="Examples" name="Examples" style="overflow: hidden;">Esempi</h2> +<p>Anche se non è popolare come l'approccio a siti separati, ci sono sempre più siti web che utilizzano questa tecnica ogni giorno. Fortunatamente, dato che il codice è tutto client-side, se volete vedere come funziona tecnicamente un sito che utilizza questo approccio, vi basterà visitarne uno e cliccare su "Visualizza il Sorgente Pagina". Quì di seguito riportiamo alcuni esempi:</p> +<ul> + <li><a href="http://teixido.co/">http://teixido.co/</a> – uno dei miei design sensibili preferiti, inserito anche in alcune immagini sottostanti!</li> + <li><a href="http://adactio.com/journal/1696">http://adactio.com/journal/1696</a> – contiene anche un buon articolo da leggere, con i propri esempi.</li> + <li><a href="http://thinkvitamin.com/">http://thinkvitamin.com/</a></li> + <li><a href="http://stephencaver.com/">http://stephencaver.com/</a></li> + <li><a href="http://hicksdesign.co.uk/">http://hicksdesign.co.uk/</a></li> +</ul> +<p>Malgrado sia un approccio relativamente giovane, stanno già emergendo delle pratiche migliori. Per esempio, se state progettando un sito da una bozza con questa opzione in mente, è solitamente utile <a href="http://www.lukew.com/ff/entry.asp?1117">creare un design per piccoli schermi </a>prima, in maniera da avere chiari i vincoli del mobile fin dall'inizio. Altresì valido è l'utilizzo del miglioramento progressivo per i vostri fogli di stile invece di nascondere elementi del vostro sito esistente con delle media query. In questo modo, i vecchi browser che non supportano le media query potranno comunque visualizzare il layout corretto. Una presentazione eccellente sui meriti di questo metodo è disponibile <a href="http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu">qui</a>.</p> +<h2 id="Approcci_per_lo_sviluppo_Web_per_il_mobile">Approcci per lo sviluppo Web per il mobile</h2> +<p>Date un'occhiata agli articoli seguenti per un background e altri approcci per sviluppare piattaforme mobili.</p> +<ul> + <li><a href="/en-US/docs/Web_Development/Mobile/Mobile-friendliness" title="XML Web Services">What is mobile-friendliness?</a></li> + <li><a href="/en-US/docs/Web_Development/Mobile/Separate_sites" title="Web development/Mobile/Separate sites">Separate sites</a></li> + <li><a href="/en-US/docs/Web_development/Mobile/A_hybrid_approach" title="Web development/Mobile/Hybrid approach">A hybrid approach</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/Apps/app_layout/Responsive_design_versus_adaptive_design?search=responsive%20design">Responsive versus adaptive design</a></li> +</ul> +<h2 id="Vedi_anche">Vedi anche</h2> +<ul> + <li><a href="/en-US/docs/Web_Development/Responsive_Web_design" title="Responsive Web design">Responsive Web design</a> per risorse aggiuntive</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/Apps/app_layout/Responsive_design_versus_adaptive_design?search=responsive%20design">Responsive versus adaptive design</a></li> +</ul> +<div class="originaldocinfo"> + <h3 id="Informazioni_originali_sul_documento">Informazioni originali sul documento</h3> + <p>Questo documento è stato originariamente pubblicato il 27 Maggio 2011 sul blog Mozilla Webdev come "<a href="http://blog.mozilla.com/webdev/2011/05/27/approaches-to-mobile-web-development-part-3-responsive-design/" title="http://blog.mozilla.com/webdev/2011/05/27/approaches-to-mobile-web-development-part-3-responsive-design/">Approaches to Mobile Web Development Part 3 - Responsive Design</a>", da Jason Grlicky.</p> +</div> +<p> </p> diff --git a/files/it/web/security/password_insicure/index.html b/files/it/web/security/insecure_passwords/index.html index cfce604aab..9c1595577d 100644 --- a/files/it/web/security/password_insicure/index.html +++ b/files/it/web/security/insecure_passwords/index.html @@ -1,7 +1,8 @@ --- title: Password insicure -slug: Web/Security/Password_insicure +slug: Web/Security/Insecure_passwords translation_of: Web/Security/Insecure_passwords +original_slug: Web/Security/Password_insicure --- <p class="summary"><span id="result_box" lang="it"><span>I dialoghi di Login tramite HTTP sono particolarmente pericolosi a causa della vasta gamma di attacchi che possono essere utilizzati per estrarre la password di un utente.</span> <span>Gli intercettatori della rete potrebbero rubare la password di un utente utilizzando uno "sniffing" della rete o modificando la pagina in uso.</span> <span>Questo documento descrive in dettaglio i meccanismi di sicurezza che Firefox ha messo in atto per avvisare gli utenti e gli sviluppatori dei rischi circa le password insicure e il furto delle stesse.</span></span></p> diff --git a/files/it/web/svg/applying_svg_effects_to_html_content/index.html b/files/it/web/svg/applying_svg_effects_to_html_content/index.html new file mode 100644 index 0000000000..49ab8100df --- /dev/null +++ b/files/it/web/svg/applying_svg_effects_to_html_content/index.html @@ -0,0 +1,51 @@ +--- +title: Introduzione a SVG dentro XHTML +slug: Web/SVG/Applying_SVG_effects_to_HTML_content +translation_of: Web/SVG/Applying_SVG_effects_to_HTML_content +original_slug: Introduzione_a_SVG_dentro_XHTML +--- +<p> </p> +<h3 id="Panoramica" name="Panoramica">Panoramica</h3> +<p>Questo articolo e l'esempio allegato mostrano come utilizzare <a href="it/SVG">SVG</a> per inserire un'immagine di sfondo in un form. Mostra come <a href="it/JavaScript">JavaScript</a> e i <a href="it/CSS">CSS</a> possano essere utilizzati per manipolare l'immagine allo stesso modo in cui manipolano un normale elemento <a href="it/XHTML">XHTML</a>. Si noti che l'esempio funziona sui browser che supportano XHTML (non solo <a href="it/HTML">HTML</a>) e l'integrazione di SVG.</p> +<p>Ecco il codice dell' <a class="external" href="http://developer.mozilla.org/presentations/xtech2005/svg-canvas/SVGDemo.xml">esempio</a>:</p> +<pre><html xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>XTech SVG Demo</title> + <style> + stop.begin { stop-color:yellow; } + stop.end { stop-color:green; } + body.invalid stop.end { stop-color:red; } + #err { display:none; } + body.invalid #err { display:inline; } + </style> + <script> + function signalError() { + document.getElementById('body').setAttribute("class", "invalid"); + } + </script> +</head> +<body id="body" + style="position:absolute; z-index:0; border:1px solid black; left:5%; top:5%; width:90%; height:90%;"> + <form> + <fieldset> + <legend>HTML Form</legend> + <p><label>Enter something:</label> + <input type="text"/> + <span id="err">Incorrect value!</span></p> + <p><button onclick="signalError();">Activate!</button></p> + </fieldset> + </form> + <svg xmlns="http://www.w3.org/2000/svg" version="1.1" + viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice" + style="width:100%; height:100%; position:absolute; top:0; left:0; z-index:-1;"> + <linearGradient id="gradient"> + <stop class="begin" offset="0%"/> + <stop class="end" offset="100%"/> + </linearGradient> + <rect x="0" y="0" width="100" height="100" style="fill:url(#gradient)" /> + <circle cx="50" cy="50" r="30" style="fill:url(#gradient)" /> + </svg> +</body> +</html></pre> +<h3 id="Spiegazione" name="Spiegazione">Spiegazione</h3> +<p>Questa pagina è principalmente normale XHTML, CSS e JavaScript. L'unica parte interessante è l'elemento <svg>. Questo elemento e i suoi figli sono dichiarati nel namespace di SVG.</p> diff --git a/files/it/web/svg/index.html b/files/it/web/svg/index.html new file mode 100644 index 0000000000..840084ad4a --- /dev/null +++ b/files/it/web/svg/index.html @@ -0,0 +1,103 @@ +--- +title: SVG +slug: Web/SVG +tags: + - SVG + - Tutte_le_categorie +translation_of: Web/SVG +original_slug: SVG +--- +<div class="callout-box"><strong><a href="https://developer.mozilla.org/en-US/docs/SVG/Tutorial" title="SVG/Tutorial">Iniziare ad usare SVG</a></strong><br> +Questa esercitazione ti aiuterà ad iniziare ad usare SVG.</div> + +<div><strong>Scalable Vector Graphics (SVG)</strong> è un linguaggio <a href="https://developer.mozilla.org/en-US/docs/XML" title="XML">XML</a> di markup per la descrizione di grafica vettoriale a due dimensioni. Essenzialmente SVG sta alla grafica come <a href="/it/docs/XHTML">XHTML</a> sta al testo. + +<p>SVG è simile negli scopi alla tecnologia proprietaria Macromedia Flash di Adobe, ma quello che distingue SVG da Flash l'essere una <a class="external" href="http://www.w3.org/Graphics/SVG/">raccomandazione W3C</a> (vale a dire, uno standard a tutti gli effetti) e che è basato su XML anzichè essere un formato binario proprietario. E' esplicitamente progettato per lavorare con altri standard <a href="http://www.w3.org/">W3C</a> quali <a href="/it/docs/CSS">CSS</a>, <a href="/it/docs/DOM">DOM</a> e <a class="external" href="http://www.w3.org/AudioVideo/">SMIL</a>.</p> + +<div class="cleared row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="Documentazione">Documentazione</h2> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/SVG/Element" title="SVG/Element">Riferimento degli elementi SVG </a></dt> + <dd>Ottieni i dettagli di ogni elemento SVG.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/SVG/Attribute" title="SVG/Attribute">Riferimento degli attributi SVG</a></dt> + <dd>Ottieni i dettagli di ogni attributo SVG.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Gecko_DOM_Reference#SVG_interfaces" title="Gecko_DOM_Reference#SVG_interfaces">Riferimento alle API nel DOM di SVG</a></dt> + <dd>Ottieni i dettagli sull'intra API nel DOM di SVG.</dd> + <dt>Migliora il contenuto HTML</dt> + <dd>SVG opera insieme ad HTML, CSS e JavaScript. Utilizza SVG per una comune pagna HTML o un'apllicazione web.</dd> + <dt>SVG in Mozilla</dt> + <dd>Note e informazioni su come SVG è implementato in Mozilla. + <ul> + <li><a href="https://developer.mozilla.org/en-US/docs/SVG_in_Firefox" title="SVG_in_Firefox">Quanto è implementato SVG in Firefox</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/SVG_in_Firefox" title="SVG_in_Firefox">Esercitazione sul come utilizzare </a><a href="https://developer.mozilla.org/en-US/docs/SVG_In_HTML_Introduction" title="SVG_In_HTML_Introduction">SVG in XHTML</a></li> + </ul> + </dd> +</dl> + +<p><span class="alllinks"><a href="https://developer.mozilla.org/en-US/docs/tag/SVG" title="tag/SVG">Vedi Tutto...</a></span></p> + +<h2 class="Community" id="Comunità">Comunità</h2> + +<ul> + <li>Vedi i forum di Mozilla... {{DiscussionList("dev-tech-svg", "mozilla.dev.tech.svg")}}</li> +</ul> + +<h2 class="Tools" id="Strumenti">Strumenti</h2> + +<ul> + <li><a href="http://www.w3.org/Graphics/SVG/Test/">Suite di prova per SVG</a></li> + <li><a href="http://jiggles.w3.org/svgvalidator/">SVG Validator</a> (Cessato)</li> + <li><a href="https://developer.mozilla.org/en-US/docs/tag/SVG:Tools" title="tag/SVG:Tools">Ulteriori Strumenti...</a></li> + <li>Altre risorse: <a href="https://developer.mozilla.org/en-US/docs/XML" title="XML">XML</a>, <a href="https://developer.mozilla.org/en-US/docs/CSS" title="CSS">CSS</a>, <a href="https://developer.mozilla.org/en-US/docs/DOM" title="DOM">DOM</a>, <a href="https://developer.mozilla.org/en-US/docs/HTML/Canvas" title="HTML/Canvas">Canvas</a></li> +</ul> +</div> + +<div class="section"> +<h2 class="Related_Topics" id="Esempi">Esempi</h2> + +<ul> + <li>Google <a href="http://maps.google.com">Maps</a> (sovrapposizione del percorso) & <a href="http://docs.google.com">Docs</a> (grafici dei fogli di calcolo)</li> + <li><a href="http://starkravingfinkle.org/projects/demo/svg-bubblemenu-in-html.xml">SVG menu a bolle</a></li> + <li><a href="http://jwatt.org/svg/authoring/">Linee guida SVG per autori</a></li> + <li>Una panoramica del <a href="https://developer.mozilla.org/en-US/docs/Mozilla_SVG_Project" title="Mozilla_SVG_Project">Progetto SVG di Mozilla</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/SVG/FAQ" title="SVG/FAQ">Domande e risposte frequenti</a> su SVG e Mozilla</li> + <li>Diapositive e dimostrazioni da SVG Open 2009 su <a href="http://jwatt.org/svg-open-US/docs/2009/slides.xhtml" title="http://jwatt.org/svg-open-US/docs/2009/slides.xhtml">SVG e Mozilla</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/SVG/SVG_as_an_Image" title="SVG/SVG as an Image">SVG come immagine</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/SVG/SVG_animation_with_SMIL" title="SVG/SVG animation with SMIL">Anmazione SVG con SMIL</a></li> + <li><a href="http://croczilla.com/bits_and_pieces/svg/samples/lion/lion.svg" title="http://croczilla.com/bits_and_pieces/svg/samples/lion/lion.svg">Lion</a>, <a href="http://croczilla.com/bits_and_pieces/svg/samples/butterfly/butterfly.svg" title="http://croczilla.com/bits_and_pieces/svg/samples/butterfly/butterfly.svg">Butterfly</a> & <a href="http://croczilla.com/bits_and_pieces/svg/samples/tiger/tiger.svg" title="http://croczilla.com/bits_and_pieces/svg/samples/tiger/tiger.svg">Tiger</a></li> + <li><a href="http://plurib.us/1shot/2007/svg_gallery/">Galleria d'arte SVG</a></li> + <li>Ulteriori esempi (<a href="http://croczilla.com/bits_and_pieces/svg/samples" title="http://croczilla.com/bits_and_pieces/svg/samples">Esempi SVG croczilla.com</a>, <a href="http://www.carto.net/papers/svg/samples/">carto.net</a>)</li> +</ul> + +<h3 id="Animazione_e_interazione">Animazione e interazione</h3> + +<p>Come HTML, SVG ha un modello di documento a oggetti (DOM) ed events accessibili via JavaScript. Ciò permette agli sviluppatori di creare ricche immagini animate ed interattive.</p> + +<ul> + <li>Alcuni realmente gustosi SVG da <a href="http://svg-wow.org/" title="http://svg-wow.org/">svg-wow.org</a></li> + <li>Estensione di Firefox (<a href="http://schepers.cc/grafox/">Grafox</a>) per aggiungere un sottoinsieme del supporto per animazioni di SMIL</li> + <li>Manipolazione interattiva di <a href="http://people.mozilla.com/%7Evladimir/demos/photos.svg">foto</a></li> + <li><a href="http://starkravingfinkle.org/blog/2007/07/firefox-3-svg-foreignobject/">Trasformazioni HTML</a> utilizzando <code>foreignObject</code> di SVG</li> + <li><a href="http://lab.vodafone.com/vienna/">Arte animata</a></li> +</ul> + +<h3 id="Mappe_grafici_giochi_ed_sperimentazioni_3D">Mappe, grafici, giochi ed sperimentazioni 3D</h3> + +<p>Se un piccolo SVG può fare tanta strada per migliorare il contenuto del web, ecco qualche esempio di uso intensivo di SVG.</p> + +<ul> + <li><a href="http://www.codedread.com/yastframe.php">Un Tetris SVG</a> & <a href="http://www.treebuilder.de/svg/connect4.svg">Connect 4</a></li> + <li><a href="http://files.myopera.com/orinoco/svg/USStates.svg">Gioco Find the State</a></li> + <li><a href="http://www.carto.net/papers/svg/us_population/index.html">Mappa della popolazione degli US</a></li> + <li><a href="http://www.treebuilder.de/default.asp?file=441875.xml">Scatola 3D</a> e <a href="http://www.treebuilder.de/default.asp?file=206524.xml">Scatole 3D</a></li> + <li><a href="http://jvectormap.com/" title="http://jvectormap.com/">jVectorMap</a> (mappe interattive per la visualizzazione dati)</li> +</ul> +</div> +</div> + +<div>{{HTML5ArticleTOC}}<a href="http://www.w3.org/AudioVideo/">SMIL</a>.</div> +</div> + +<p></p> diff --git a/files/it/web/web_components/usare_custom_elements/index.html b/files/it/web/web_components/using_custom_elements/index.html index 4fa75cb380..8183605a23 100644 --- a/files/it/web/web_components/usare_custom_elements/index.html +++ b/files/it/web/web_components/using_custom_elements/index.html @@ -1,7 +1,8 @@ --- title: Usare i custom elements -slug: Web/Web_Components/Usare_custom_elements +slug: Web/Web_Components/Using_custom_elements translation_of: Web/Web_Components/Using_custom_elements +original_slug: Web/Web_Components/Usare_custom_elements --- <div>{{DefaultAPISidebar("Web Components")}}</div> |