From 30feb96f6084a2fb976a24ac01c1f4a054611b62 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:47:54 +0100 Subject: unslug it: move --- files/it/web/accessibility/sviluppo_web/index.html | 67 -- files/it/web/api/canvas_api/index.html | 73 ++ files/it/web/api/canvas_api/tutorial/index.html | 55 + files/it/web/api/document/firstchild/index.html | 41 - files/it/web/api/document/namespaceuri/index.html | 30 - files/it/web/api/document/stylesheets/index.html | 44 - .../document_object_model/introduction/index.html | 257 +++++ .../document_object_model/introduzione/index.html | 257 ----- .../documentorshadowroot/stylesheets/index.html | 44 + .../it/web/api/element/addeventlistener/index.html | 694 ------------ files/it/web/api/element/childnodes/index.html | 99 -- files/it/web/api/element/firstchild/index.html | 90 -- files/it/web/api/element/nodename/index.html | 116 -- files/it/web/api/element/nodetype/index.html | 178 --- files/it/web/api/element/nodevalue/index.html | 75 -- files/it/web/api/element/parentnode/index.html | 61 - files/it/web/api/element/prefix/index.html | 26 - files/it/web/api/element/textcontent/index.html | 138 --- files/it/web/api/event/altkey/index.html | 47 - files/it/web/api/event/button/index.html | 58 - files/it/web/api/event/charcode/index.html | 49 - files/it/web/api/event/ctrlkey/index.html | 45 - files/it/web/api/event/ischar/index.html | 30 - files/it/web/api/event/keycode/index.html | 49 - files/it/web/api/event/layerx/index.html | 102 -- files/it/web/api/event/layery/index.html | 102 -- files/it/web/api/event/metakey/index.html | 31 - files/it/web/api/event/pagex/index.html | 98 -- files/it/web/api/event/pagey/index.html | 98 -- files/it/web/api/event/shiftkey/index.html | 46 - files/it/web/api/event/view/index.html | 22 - files/it/web/api/event/which/index.html | 60 - .../api/eventtarget/addeventlistener/index.html | 694 ++++++++++++ .../api/geolocation/using_geolocation/index.html | 321 ------ files/it/web/api/geolocation_api/index.html | 321 ++++++ .../web/api/htmlhyperlinkelementutils/index.html | 205 ++++ files/it/web/api/keyboardevent/charcode/index.html | 49 + files/it/web/api/keyboardevent/keycode/index.html | 49 + files/it/web/api/keyboardevent/which/index.html | 60 + files/it/web/api/mouseevent/altkey/index.html | 47 + files/it/web/api/mouseevent/button/index.html | 58 + files/it/web/api/mouseevent/ctrlkey/index.html | 45 + files/it/web/api/mouseevent/metakey/index.html | 31 + files/it/web/api/mouseevent/shiftkey/index.html | 46 + files/it/web/api/node/childnodes/index.html | 99 ++ files/it/web/api/node/firstchild/index.html | 90 ++ files/it/web/api/node/namespaceuri/index.html | 30 + files/it/web/api/node/nodename/index.html | 116 ++ files/it/web/api/node/nodetype/index.html | 178 +++ files/it/web/api/node/nodevalue/index.html | 75 ++ files/it/web/api/node/parentnode/index.html | 61 + files/it/web/api/node/prefix/index.html | 26 + files/it/web/api/node/textcontent/index.html | 138 +++ files/it/web/api/notification/dir/index.html | 72 ++ files/it/web/api/notification/index.html | 495 ++++++++ files/it/web/api/notifiche/dir/index.html | 72 -- files/it/web/api/notifiche/index.html | 495 -------- files/it/web/api/plugin/index.html | 63 ++ files/it/web/api/uievent/ischar/index.html | 30 + files/it/web/api/uievent/layerx/index.html | 102 ++ files/it/web/api/uievent/layery/index.html | 102 ++ files/it/web/api/uievent/pagex/index.html | 98 ++ files/it/web/api/uievent/pagey/index.html | 98 ++ files/it/web/api/uievent/view/index.html | 22 + files/it/web/api/urlutils/index.html | 205 ---- files/it/web/api/websockets_api/index.html | 179 +++ .../index.html | 184 +++ .../api/window/domcontentloaded_event/index.html | 75 ++ files/it/web/api/window/find/index.html | 32 + files/it/web/api/window/load_event/index.html | 123 ++ .../clearinterval/index.html | 48 + .../web/api/windowtimers/clearinterval/index.html | 48 - files/it/web/api/windowtimers/index.html | 125 -- .../xmlhttprequest/usare_xmlhttprequest/index.html | 741 ------------ .../xmlhttprequest/using_xmlhttprequest/index.html | 741 ++++++++++++ .../web/css/-moz-font-language-override/index.html | 7 - files/it/web/css/child_combinator/index.html | 121 ++ .../index.html | 40 + .../using_multi-column_layouts/index.html | 67 ++ .../basic_concepts_of_flexbox/index.html | 395 +++++++ .../using_css_flexible_boxes/index.html | 395 ------- .../consistent_list_indentation/index.html | 106 ++ .../index.html" | 40 - files/it/web/css/font-language-override/index.html | 7 + .../web/css/guida_di_riferimento_ai_css/index.html | 96 -- files/it/web/css/layout_cookbook/index.html | 60 + files/it/web/css/reference/index.html | 96 ++ files/it/web/css/ricette_layout/index.html | 60 - .../it/web/css/selettore_figli_diretti/index.html | 121 -- .../web/demos_of_open_web_technologies/index.html | 136 +++ .../web/esempi_di_tecnologie_web_open/index.html | 136 --- files/it/web/events/domcontentloaded/index.html | 75 -- files/it/web/events/load/index.html | 123 -- files/it/web/guide/ajax/getting_started/index.html | 252 +++++ files/it/web/guide/ajax/iniziare/index.html | 252 ----- files/it/web/guide/css/index.html | 24 - .../guide/html/categorie_di_contenuto/index.html | 141 --- .../web/guide/html/content_categories/index.html | 141 +++ files/it/web/guide/html/html5/index.html | 167 +++ .../html/html5/introduction_to_html5/index.html | 22 + .../using_html_sections_and_outlines/index.html | 320 ++++++ files/it/web/guide/mobile/index.html | 18 + .../guide/parsing_and_serializing_xml/index.html | 1193 ++++++++++++++++++++ files/it/web/html/attributes/index.html | 590 ++++++++++ files/it/web/html/attributi/index.html | 590 ---------- .../canvas/drawing_graphics_with_canvas/index.html | 162 --- files/it/web/html/canvas/index.html | 73 -- files/it/web/html/element/figura/index.html | 170 --- files/it/web/html/element/figure/index.html | 170 +++ files/it/web/html/forms_in_html/index.html | 83 -- files/it/web/html/html5/index.html | 167 --- .../html/html5/introduction_to_html5/index.html | 22 - files/it/web/html/reference/index.html | 46 + files/it/web/html/riferimento/index.html | 46 - .../index.html | 320 ------ .../html/using_the_application_cache/index.html | 383 +++++++ .../html/utilizzare_application_cache/index.html | 383 ------- files/it/web/http/basi_http/index.html | 48 - files/it/web/http/basics_of_http/index.html | 48 + files/it/web/http/compression/index.html | 67 ++ files/it/web/http/compressione/index.html | 67 -- files/it/web/http/content_negotiation/index.html | 143 +++ .../web/http/headers/user-agent/firefox/index.html | 40 + files/it/web/http/link_prefetching_faq/index.html | 126 +++ .../web/http/negoziazione-del-contenuto/index.html | 143 --- files/it/web/http/overview/index.html | 176 +++ files/it/web/http/panoramica/index.html | 176 --- files/it/web/http/range_requests/index.html | 115 ++ files/it/web/http/richieste_range/index.html | 115 -- files/it/web/http/session/index.html | 171 +++ files/it/web/http/sessione/index.html | 171 --- .../a_re-introduction_to_javascript/index.html | 966 ++++++++++++++++ .../it/web/javascript/about_javascript/index.html | 57 + files/it/web/javascript/chiusure/index.html | 345 ------ files/it/web/javascript/closures/index.html | 345 ++++++ .../javascript/cos\303\250_javascript/index.html" | 57 - .../javascript/gestione_della_memoria/index.html | 197 ---- files/it/web/javascript/getting_started/index.html | 331 ------ .../index.html | 461 -------- .../guida/dettagli_object_model/index.html | 727 ------------ .../guida/espressioni_regolari/index.html | 647 ----------- files/it/web/javascript/guida/functions/index.html | 646 ----------- .../javascript/guida/grammar_and_types/index.html | 659 ----------- files/it/web/javascript/guida/index.html | 124 -- .../web/javascript/guida/introduzione/index.html | 140 --- .../guida/iteratori_e_generatori/index.html | 162 --- .../guida/loops_and_iteration/index.html | 340 ------ .../control_flow_and_error_handling/index.html | 461 ++++++++ .../guide/details_of_the_object_model/index.html | 727 ++++++++++++ files/it/web/javascript/guide/functions/index.html | 646 +++++++++++ .../javascript/guide/grammar_and_types/index.html | 659 +++++++++++ files/it/web/javascript/guide/index.html | 124 ++ .../web/javascript/guide/introduction/index.html | 140 +++ .../guide/iterators_and_generators/index.html | 162 +++ .../guide/loops_and_iteration/index.html | 340 ++++++ .../guide/regular_expressions/index.html | 647 +++++++++++ .../web/javascript/il_dom_e_javascript/index.html | 81 -- .../index.html | 391 ------- .../javascript_technologies_overview/index.html | 81 ++ .../it/web/javascript/memory_management/index.html | 197 ++++ .../reference/classes/constructor/index.html | 161 +++ .../reference/classes/costruttore/index.html | 161 --- .../reference/functions/arguments/index.html | 224 ++++ .../reference/functions/arrow_functions/index.html | 394 +++++++ .../javascript/reference/functions/get/index.html | 154 +++ .../web/javascript/reference/functions/index.html | 617 ++++++++++ .../javascript/reference/functions/set/index.html | 214 ++++ .../arguments/index.html | 224 ---- .../arrow_functions/index.html | 394 ------- .../functions_and_function_scope/get/index.html | 154 --- .../functions_and_function_scope/index.html | 617 ---------- .../functions_and_function_scope/set/index.html | 214 ---- .../global_objects/array/prototype/index.html | 203 ---- .../global_objects/object/prototype/index.html | 215 ---- .../global_objects/proxy/handler/apply/index.html | 119 -- .../global_objects/proxy/handler/index.html | 84 -- .../global_objects/proxy/proxy/apply/index.html | 119 ++ .../global_objects/proxy/proxy/index.html | 84 ++ .../global_objects/proxy/revocabile/index.html | 86 -- .../global_objects/proxy/revocable/index.html | 86 ++ .../global_objects/string/prototype/index.html | 179 --- .../reference/operators/comma_operator/index.html | 105 ++ .../operators/conditional_operator/index.html | 171 +++ .../operators/operator_condizionale/index.html | 171 --- .../operators/operatore_virgola/index.html | 105 -- .../operators/operatori_aritmetici/index.html | 292 ----- .../reference/template_literals/index.html | 210 ++++ .../reference/template_strings/index.html | 210 ---- .../una_reintroduzione_al_javascript/index.html | 966 ---------------- files/it/web/opensearch/index.html | 34 + .../performance/critical_rendering_path/index.html | 62 + .../percorso_critico_di_rendering/index.html | 62 - files/it/web/progressive_web_apps/index.html | 50 + .../it/web/security/insecure_passwords/index.html | 67 ++ files/it/web/security/password_insicure/index.html | 67 -- .../index.html | 50 + files/it/web/svg/index.html | 102 ++ .../usare_custom_elements/index.html | 297 ----- .../using_custom_elements/index.html | 297 +++++ 199 files changed, 19280 insertions(+), 19094 deletions(-) delete mode 100644 files/it/web/accessibility/sviluppo_web/index.html create mode 100644 files/it/web/api/canvas_api/index.html create mode 100644 files/it/web/api/canvas_api/tutorial/index.html delete mode 100644 files/it/web/api/document/firstchild/index.html delete mode 100644 files/it/web/api/document/namespaceuri/index.html delete mode 100644 files/it/web/api/document/stylesheets/index.html create mode 100644 files/it/web/api/document_object_model/introduction/index.html delete mode 100644 files/it/web/api/document_object_model/introduzione/index.html create mode 100644 files/it/web/api/documentorshadowroot/stylesheets/index.html delete mode 100644 files/it/web/api/element/addeventlistener/index.html delete mode 100644 files/it/web/api/element/childnodes/index.html delete mode 100644 files/it/web/api/element/firstchild/index.html delete mode 100644 files/it/web/api/element/nodename/index.html delete mode 100644 files/it/web/api/element/nodetype/index.html delete mode 100644 files/it/web/api/element/nodevalue/index.html delete mode 100644 files/it/web/api/element/parentnode/index.html delete mode 100644 files/it/web/api/element/prefix/index.html delete mode 100644 files/it/web/api/element/textcontent/index.html delete mode 100644 files/it/web/api/event/altkey/index.html delete mode 100644 files/it/web/api/event/button/index.html delete mode 100644 files/it/web/api/event/charcode/index.html delete mode 100644 files/it/web/api/event/ctrlkey/index.html delete mode 100644 files/it/web/api/event/ischar/index.html delete mode 100644 files/it/web/api/event/keycode/index.html delete mode 100644 files/it/web/api/event/layerx/index.html delete mode 100644 files/it/web/api/event/layery/index.html delete mode 100644 files/it/web/api/event/metakey/index.html delete mode 100644 files/it/web/api/event/pagex/index.html delete mode 100644 files/it/web/api/event/pagey/index.html delete mode 100644 files/it/web/api/event/shiftkey/index.html delete mode 100644 files/it/web/api/event/view/index.html delete mode 100644 files/it/web/api/event/which/index.html create mode 100644 files/it/web/api/eventtarget/addeventlistener/index.html delete mode 100644 files/it/web/api/geolocation/using_geolocation/index.html create mode 100644 files/it/web/api/geolocation_api/index.html create mode 100644 files/it/web/api/htmlhyperlinkelementutils/index.html create mode 100644 files/it/web/api/keyboardevent/charcode/index.html create mode 100644 files/it/web/api/keyboardevent/keycode/index.html create mode 100644 files/it/web/api/keyboardevent/which/index.html create mode 100644 files/it/web/api/mouseevent/altkey/index.html create mode 100644 files/it/web/api/mouseevent/button/index.html create mode 100644 files/it/web/api/mouseevent/ctrlkey/index.html create mode 100644 files/it/web/api/mouseevent/metakey/index.html create mode 100644 files/it/web/api/mouseevent/shiftkey/index.html create mode 100644 files/it/web/api/node/childnodes/index.html create mode 100644 files/it/web/api/node/firstchild/index.html create mode 100644 files/it/web/api/node/namespaceuri/index.html create mode 100644 files/it/web/api/node/nodename/index.html create mode 100644 files/it/web/api/node/nodetype/index.html create mode 100644 files/it/web/api/node/nodevalue/index.html create mode 100644 files/it/web/api/node/parentnode/index.html create mode 100644 files/it/web/api/node/prefix/index.html create mode 100644 files/it/web/api/node/textcontent/index.html create mode 100644 files/it/web/api/notification/dir/index.html create mode 100644 files/it/web/api/notification/index.html delete mode 100644 files/it/web/api/notifiche/dir/index.html delete mode 100644 files/it/web/api/notifiche/index.html create mode 100644 files/it/web/api/plugin/index.html create mode 100644 files/it/web/api/uievent/ischar/index.html create mode 100644 files/it/web/api/uievent/layerx/index.html create mode 100644 files/it/web/api/uievent/layery/index.html create mode 100644 files/it/web/api/uievent/pagex/index.html create mode 100644 files/it/web/api/uievent/pagey/index.html create mode 100644 files/it/web/api/uievent/view/index.html delete mode 100644 files/it/web/api/urlutils/index.html create mode 100644 files/it/web/api/websockets_api/index.html create mode 100644 files/it/web/api/websockets_api/writing_websocket_client_applications/index.html create mode 100644 files/it/web/api/window/domcontentloaded_event/index.html create mode 100644 files/it/web/api/window/find/index.html create mode 100644 files/it/web/api/window/load_event/index.html create mode 100644 files/it/web/api/windoworworkerglobalscope/clearinterval/index.html delete mode 100644 files/it/web/api/windowtimers/clearinterval/index.html delete mode 100644 files/it/web/api/windowtimers/index.html delete mode 100644 files/it/web/api/xmlhttprequest/usare_xmlhttprequest/index.html create mode 100644 files/it/web/api/xmlhttprequest/using_xmlhttprequest/index.html delete mode 100644 files/it/web/css/-moz-font-language-override/index.html create mode 100644 files/it/web/css/child_combinator/index.html create mode 100644 files/it/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html create mode 100644 files/it/web/css/css_columns/using_multi-column_layouts/index.html create mode 100644 files/it/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html delete mode 100644 files/it/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html create mode 100644 files/it/web/css/css_lists_and_counters/consistent_list_indentation/index.html delete mode 100644 "files/it/web/css/cursor/usare_valori_url_per_la_propriet\303\240_cursor/index.html" create mode 100644 files/it/web/css/font-language-override/index.html delete mode 100644 files/it/web/css/guida_di_riferimento_ai_css/index.html create mode 100644 files/it/web/css/layout_cookbook/index.html create mode 100644 files/it/web/css/reference/index.html delete mode 100644 files/it/web/css/ricette_layout/index.html delete mode 100644 files/it/web/css/selettore_figli_diretti/index.html create mode 100644 files/it/web/demos_of_open_web_technologies/index.html delete mode 100644 files/it/web/esempi_di_tecnologie_web_open/index.html delete mode 100644 files/it/web/events/domcontentloaded/index.html delete mode 100644 files/it/web/events/load/index.html create mode 100644 files/it/web/guide/ajax/getting_started/index.html delete mode 100644 files/it/web/guide/ajax/iniziare/index.html delete mode 100644 files/it/web/guide/css/index.html delete mode 100644 files/it/web/guide/html/categorie_di_contenuto/index.html create mode 100644 files/it/web/guide/html/content_categories/index.html create mode 100644 files/it/web/guide/html/html5/index.html create mode 100644 files/it/web/guide/html/html5/introduction_to_html5/index.html create mode 100644 files/it/web/guide/html/using_html_sections_and_outlines/index.html create mode 100644 files/it/web/guide/mobile/index.html create mode 100644 files/it/web/guide/parsing_and_serializing_xml/index.html create mode 100644 files/it/web/html/attributes/index.html delete mode 100644 files/it/web/html/attributi/index.html delete mode 100644 files/it/web/html/canvas/drawing_graphics_with_canvas/index.html delete mode 100644 files/it/web/html/canvas/index.html delete mode 100644 files/it/web/html/element/figura/index.html create mode 100644 files/it/web/html/element/figure/index.html delete mode 100644 files/it/web/html/forms_in_html/index.html delete mode 100644 files/it/web/html/html5/index.html delete mode 100644 files/it/web/html/html5/introduction_to_html5/index.html create mode 100644 files/it/web/html/reference/index.html delete mode 100644 files/it/web/html/riferimento/index.html delete mode 100644 files/it/web/html/sections_and_outlines_of_an_html5_document/index.html create mode 100644 files/it/web/html/using_the_application_cache/index.html delete mode 100644 files/it/web/html/utilizzare_application_cache/index.html delete mode 100644 files/it/web/http/basi_http/index.html create mode 100644 files/it/web/http/basics_of_http/index.html create mode 100644 files/it/web/http/compression/index.html delete mode 100644 files/it/web/http/compressione/index.html create mode 100644 files/it/web/http/content_negotiation/index.html create mode 100644 files/it/web/http/headers/user-agent/firefox/index.html create mode 100644 files/it/web/http/link_prefetching_faq/index.html delete mode 100644 files/it/web/http/negoziazione-del-contenuto/index.html create mode 100644 files/it/web/http/overview/index.html delete mode 100644 files/it/web/http/panoramica/index.html create mode 100644 files/it/web/http/range_requests/index.html delete mode 100644 files/it/web/http/richieste_range/index.html create mode 100644 files/it/web/http/session/index.html delete mode 100644 files/it/web/http/sessione/index.html create mode 100644 files/it/web/javascript/a_re-introduction_to_javascript/index.html create mode 100644 files/it/web/javascript/about_javascript/index.html delete mode 100644 files/it/web/javascript/chiusure/index.html create mode 100644 files/it/web/javascript/closures/index.html delete mode 100644 "files/it/web/javascript/cos\303\250_javascript/index.html" delete mode 100644 files/it/web/javascript/gestione_della_memoria/index.html delete mode 100644 files/it/web/javascript/getting_started/index.html delete mode 100644 files/it/web/javascript/guida/controllo_del_flusso_e_gestione_degli_errori/index.html delete mode 100644 files/it/web/javascript/guida/dettagli_object_model/index.html delete mode 100644 files/it/web/javascript/guida/espressioni_regolari/index.html delete mode 100644 files/it/web/javascript/guida/functions/index.html delete mode 100644 files/it/web/javascript/guida/grammar_and_types/index.html delete mode 100644 files/it/web/javascript/guida/index.html delete mode 100644 files/it/web/javascript/guida/introduzione/index.html delete mode 100644 files/it/web/javascript/guida/iteratori_e_generatori/index.html delete mode 100644 files/it/web/javascript/guida/loops_and_iteration/index.html create mode 100644 files/it/web/javascript/guide/control_flow_and_error_handling/index.html create mode 100644 files/it/web/javascript/guide/details_of_the_object_model/index.html create mode 100644 files/it/web/javascript/guide/functions/index.html create mode 100644 files/it/web/javascript/guide/grammar_and_types/index.html create mode 100644 files/it/web/javascript/guide/index.html create mode 100644 files/it/web/javascript/guide/introduction/index.html create mode 100644 files/it/web/javascript/guide/iterators_and_generators/index.html create mode 100644 files/it/web/javascript/guide/loops_and_iteration/index.html create mode 100644 files/it/web/javascript/guide/regular_expressions/index.html delete mode 100644 files/it/web/javascript/il_dom_e_javascript/index.html delete mode 100644 files/it/web/javascript/introduzione_al_carattere_object-oriented_di_javascript/index.html create mode 100644 files/it/web/javascript/javascript_technologies_overview/index.html create mode 100644 files/it/web/javascript/memory_management/index.html create mode 100644 files/it/web/javascript/reference/classes/constructor/index.html delete mode 100644 files/it/web/javascript/reference/classes/costruttore/index.html create mode 100644 files/it/web/javascript/reference/functions/arguments/index.html create mode 100644 files/it/web/javascript/reference/functions/arrow_functions/index.html create mode 100644 files/it/web/javascript/reference/functions/get/index.html create mode 100644 files/it/web/javascript/reference/functions/index.html create mode 100644 files/it/web/javascript/reference/functions/set/index.html delete mode 100644 files/it/web/javascript/reference/functions_and_function_scope/arguments/index.html delete mode 100644 files/it/web/javascript/reference/functions_and_function_scope/arrow_functions/index.html delete mode 100644 files/it/web/javascript/reference/functions_and_function_scope/get/index.html delete mode 100644 files/it/web/javascript/reference/functions_and_function_scope/index.html delete mode 100644 files/it/web/javascript/reference/functions_and_function_scope/set/index.html delete mode 100644 files/it/web/javascript/reference/global_objects/array/prototype/index.html delete mode 100644 files/it/web/javascript/reference/global_objects/object/prototype/index.html delete mode 100644 files/it/web/javascript/reference/global_objects/proxy/handler/apply/index.html delete mode 100644 files/it/web/javascript/reference/global_objects/proxy/handler/index.html create mode 100644 files/it/web/javascript/reference/global_objects/proxy/proxy/apply/index.html create mode 100644 files/it/web/javascript/reference/global_objects/proxy/proxy/index.html delete mode 100644 files/it/web/javascript/reference/global_objects/proxy/revocabile/index.html create mode 100644 files/it/web/javascript/reference/global_objects/proxy/revocable/index.html delete mode 100644 files/it/web/javascript/reference/global_objects/string/prototype/index.html create mode 100644 files/it/web/javascript/reference/operators/comma_operator/index.html create mode 100644 files/it/web/javascript/reference/operators/conditional_operator/index.html delete mode 100644 files/it/web/javascript/reference/operators/operator_condizionale/index.html delete mode 100644 files/it/web/javascript/reference/operators/operatore_virgola/index.html delete mode 100644 files/it/web/javascript/reference/operators/operatori_aritmetici/index.html create mode 100644 files/it/web/javascript/reference/template_literals/index.html delete mode 100644 files/it/web/javascript/reference/template_strings/index.html delete mode 100644 files/it/web/javascript/una_reintroduzione_al_javascript/index.html create mode 100644 files/it/web/opensearch/index.html create mode 100644 files/it/web/performance/critical_rendering_path/index.html delete mode 100644 files/it/web/performance/percorso_critico_di_rendering/index.html create mode 100644 files/it/web/progressive_web_apps/index.html create mode 100644 files/it/web/security/insecure_passwords/index.html delete mode 100644 files/it/web/security/password_insicure/index.html create mode 100644 files/it/web/svg/applying_svg_effects_to_html_content/index.html create mode 100644 files/it/web/svg/index.html delete mode 100644 files/it/web/web_components/usare_custom_elements/index.html create mode 100644 files/it/web/web_components/using_custom_elements/index.html (limited to 'files/it/web') 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 ---- -

 

- - - - - - - -
-

Accessibilità Web

-
-
- ARIA per sviluppatori
-
-
-
- ARIA rende possibile la creazione di contenuto HTML dinamico accessibile. Ad esempio, regioni di contenuto attivo e widget JavaScript.
-
-
-
- Widget JavaScript navigabili da tastiera
-
- 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.
-
-

Accessibilità di XUL

-
-
-  
-
- Sviluppare componenti personalizzati accessibili con XUL
-
- Come usare tecniche di accessibilità in DHTML per rendere accessibili i propri componenti XUL personalizzati.
-
-
-
- Linee guida alla creazione di XUL accessibile
-
- 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.
-
-
-
-
-
- 		-

Risorse esterne

-
-
- Dive into Accessibility
-
-
-
- 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?"
-
-
-
- Accessible Web Page Authoring
-
- Una pratica lista di controllo sull'accessibilità Web, da IBM.
-
-
-

 

diff --git a/files/it/web/api/canvas_api/index.html b/files/it/web/api/canvas_api/index.html new file mode 100644 index 0000000000..dcded63973 --- /dev/null +++ b/files/it/web/api/canvas_api/index.html @@ -0,0 +1,73 @@ +--- +title: Canvas +slug: Web/HTML/Canvas +translation_of: Web/API/Canvas_API +--- +

Aggiunto con HTML5, HTML {{ HTMLElement("canvas") }} è un elemento che può essere usato per disegnare elementi grafici tramite script (di solito JavaScript). Per esempio, può essere usato per disegnare grafici, creare composizioni fotografiche, creare animazioni e perfino realizzare elvaborazioni video in tempo reale.

+ +

Le applicazioni Mozilla supportano <canvas> a partire da Gecko 1.8 (cioè Firefox 1.5). L'elemento è stato originariamente introdotto da Apple per OS X Dashboard e Safari. Internet Explorer supporta <canvas> dalla versione 9; per versioni precedenti di IE, una pagina può aggiungere il supporto per <canvas> includendo lo script del progetto Explorer Canvas di Google. Anche Google Chrome e Opera 9 supportano <canvas>.

+ +

L'elemento <canvas> è utilizzato anche da WebGL per la grafica 3D con accellerazione hardware nelle pagine web.

+ + + + + + + + +
+

Documentazione

+ +
+
Specifiche
+
L'elemento <canvas> è parte delle specifiche 1.0 della WhatWG per le applicazioni  Web, anche conosciute come HTML5.
+
Esecitazione sui canvas
+
Un'esercitazione completa che copre sia l'utilizzo base  che le caratteristiche avanzate di <canvas>.
+
Frammenti di codice: Canvas
+
Qualche frammento di codice per gli sviluppatori di estensioni che coinvolge <canvas>.
+
Esempi di canvas
+
Alcune dimostraioni sui <canvas>.
+
Disegnare oggetti DOM in un canvas
+
Come disegnare contenuto DOM, come elementi HTML, in un canvas.
+
Un semplice raycaster
+
Una demo di animazione ray-tracing utilizzando il canvas.
+
Interfacce dei Canvas nel DOM
+
Interfacce dei Canvas nel DOM implementate in Gecko.
+
+ +

Vedi tutto...

+ 		+

Comunità

+ +

Guarda i forum di Mozilla...{{DiscussionList("dev-tech-html","mozilla.dev.tech.html")}}
+ Canvas-Developers Yahoo Group

+ +

Risorse

+ + + +

Librerie

+ +
    +
  • libCanvas è un potente e leggero framework per canvas
    • +
  • Processing.js implementzione del linguaggio di visualizzazione Processing
    • +
  • EaselJS è una libreria con un'API simile a Flash
    • +
  • PlotKit è una libreria per la creazione di grafici e diagrammi
    • +
  • Rekapi è un'API per le animazioni Canvas basata sui keyframe
    • +
  • PhiloGL è un framework WebGL per la visualizzazione di dati, programmazione creativa e lo sviluppo di giochi.
    • +
  • JavaScript InfoVis Toolkit crea visualizzazioni di dati interattive per il Web con Canvas 2D
    • +
  • Frame-Engine è un framework per lo sviluppo di applicazioni e giochi
    • +
+ + + + +
+ +
{{ HTML5ArticleTOC() }}
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..577a620cb7 --- /dev/null +++ b/files/it/web/api/canvas_api/tutorial/index.html @@ -0,0 +1,55 @@ +--- +title: Tutorial sulle Canvas +slug: Tutorial_sulle_Canvas +tags: + - Canvas tutorial + - 'HTML:Canvas' +translation_of: Web/API/Canvas_API/Tutorial +--- +
+

<canvas> è un nuovo elemento HTML che può essere utilizzato per disegnare elementi grafici utilizzando lo scripting (di solito JavaScript). Per esempio può essere utilizzato per disegnare grafici, fare composizioni di fotografie o semplici (e non così semplici) animazioni. L'immagine a destra mostra alcuni esempi di implementazioni di <canvas> che vedremo più avanti in questo tutorial.

+
+ +

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.

+ +

<canvas> è stato introdotto originariamente da Apple per il Mac OS X Dashboard e solo implementato da Safari. Anche il browser basato sulla 1.8 Gecko, come ad esempio Firefox 1.5, supporta questo elemento. L'elemento <canvas> è anche parte delle specifiche WhatWG Web applications 1.0 conosciute come HTML 5

+ +

In questo tutorial proveremo a descrivere l'utilizzo dell'elemento <canvas> 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.

+ +

Prima di iniziare

+ +

Utilizzare l'elemento <canvas> non è molto difficile, ma richiede una conoscenza di base di HTML e JavaScript.

+ +

Sebbene l'elemento <canvas> non sia supportato da alcuni vecchi browser dovrebbe essere supportato dalle versioni recenti di tutti i principali browser. La dimensione predefinita del canvas (tela) è di 300px × 150 px (altezza x larghezza). E' possibile personalizzare le dimensioni ricorrendo alle proprietà height e width dei fogli CSS. Nei seguenti esempi ricorreremo a codice javascript (javascript context object) per generare la grafica al volo.

+ +

In questo tutorial

+ + + +

Vedi anche

+ + + +
{{ Next("Web/API/Canvas_API/Tutorial/Basic_usage") }}
+ +

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

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

document.firstChild restituisce il primo nodo figlio del documento.

- -

Sintassi

- -
child = document.firstChild
-
- -

Parametri

- - - -

Esempio

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

Specifiche

- -

DOM Level 2 Core: firstChild

- -

{{ languages( { "pl": "pl/DOM/document.firstChild" } ) }}

diff --git a/files/it/web/api/document/namespaceuri/index.html b/files/it/web/api/document/namespaceuri/index.html deleted file mode 100644 index fc29e0f121..0000000000 --- a/files/it/web/api/document/namespaceuri/index.html +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: document.namespaceURI -slug: Web/API/Document/namespaceURI -translation_of: Web/API/Node/namespaceURI -translation_of_original: Web/API/Document/namespaceURI ---- -
{{APIRef("DOM")}}
- -

namespaceURI restituisce lo spazio dei nomi XML del documento corrente.

- -

Sintassi

- -
NSURI = document.namespaceURI
-
- -

Parametri

- - - -

Note

- -

Il DOM di per sè non supporta la validazione del namespace. Spetta all'applicazione DOM effettuare la necessaria validazione. Si noti inoltre che il prefisso del namespace, una volta associato a un nodo particolare, non può più cambiare.

- -

Specifiche

- -

DOM Level 2 Core: namespaceURI

- -

{{ languages( { "fr": "fr/DOM/document.namespaceURI", "pl": "pl/DOM/document.namespaceURI" } ) }}

diff --git a/files/it/web/api/document/stylesheets/index.html b/files/it/web/api/document/stylesheets/index.html deleted file mode 100644 index 3aa006a94f..0000000000 --- a/files/it/web/api/document/stylesheets/index.html +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: document.styleSheets -slug: Web/API/Document/styleSheets -tags: - - DOM - - Gecko - - Reference_del_DOM_di_Gecko - - Tutte_le_categorie -translation_of: Web/API/DocumentOrShadowRoot/styleSheets -translation_of_original: Web/API/Document/styleSheets ---- -

{{APIRef("DOM")}}

- -

Restituisce una lista di oggetti stylesheet per i fogli stile esplicitamente linkati o inclusi nel documento.

- -

Proprietà

- -

styleSheetList.length - restituisce il numero di oggetti stylesheet contenuti nell'oggetto.

- -

Sintassi

- -
styleSheetList =
-document.styleSheets
-
- -

L'oggetto restituito è di tipo StyleSheetList.

- -

E' una collezione ordinata di oggetti stylesheet. - styleSheetList - .item( - - indice - ) o semplicemente - styleSheetList - {{ mediawiki.external(' - - indice - ') }} restituisce un singolo oggetto stylesheet indicato dall'indice (indice comincia da 0).

- -

Specifiche

- -

DOM Level 2 Style: styleSheets

- -

{{ languages( { "ja": "ja/DOM/document.styleSheets", "pl": "pl/DOM/document.styleSheets" } ) }}

diff --git a/files/it/web/api/document_object_model/introduction/index.html b/files/it/web/api/document_object_model/introduction/index.html new file mode 100644 index 0000000000..328caa0c5c --- /dev/null +++ b/files/it/web/api/document_object_model/introduction/index.html @@ -0,0 +1,257 @@ +--- +title: Introduzione al DOM +slug: Web/API/Document_Object_Model/Introduzione +tags: + - Beginner + - DOM + - Guida + - HTML DOM + - Introduzione + - Principianti + - Tutorial +translation_of: Web/API/Document_Object_Model/Introduction +--- +

Il Document Object Model (DOM) è 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 un documento {{Glossary("HTML")}} o {{Glossary("XML")}} in memoria e come puoi usare le APIs per creare contenuti web e applicazioni.

+ +

Che cos'è il DOM?

+ +

Il Document Object Model (DOM) è una interfaccia di programmazione per documenti HTML e XML. Rappresenta la pagina in modo che i programmi possano modificare la struttura, lo stile e il contenuto del documento. Il DOM rappresenta il documento come nodi e oggetti. In questo modo, i linguaggi di programmazione possono connettersi alla pagina.

+ +

La pagina web è un documento. Questo documento può essere visualizzato nella finestra del browser o come sorgente HTML. Ma è lo stesso documento in entrambi i casi. Il Document Obkect Model (DOM) rappresenta come entrambi i documenti possono essere manipolati. Il DOM è una rappresentazione ad oggetti della pagina web, che può essere modificata con linguaggi di scripting come JavaScript.

+ +

Gli standard W3C DOM e WHATWG DOM sono implementati nei più moderni browsers. Molti browsers estendono lo standard, pertanto è necessario prestare attenzione quando li si utilizza sul Web in cui è possibile accedere ai documenti da vari browser con DOM diversi.

+ +

Per esempio, lo standard DOM specifica che il metodo getElementsByTagName usato qui sotto, dovrebbe ritornare una lista di tutti gli elementi <p> nel documento.

+ +
const paragrafi = document.getElementsByTagName("p");
+// paragrafi[0] è il primo <p> elemento
+// paragrafi[1] è il secondo <p> elemento, etc.
+alert(paragrafi[0].nodeName);
+
+ +

Tutte le proprietà, metodi ed eventi disponibili per la manipolazione e la creazione di pagine web sono organizzate in oggetti (per esempio, l'oggetto document che rappresenta il documento stesso, l'oggetto table che implementa la speciale interfaccia DOM {{domxref("HTMLTableElement")}} per accedere alle tabelle HTML, e così via). Questa documentazione fornisce una documentazione oggetto per oggetto al DOM.

+ +

Il DOM moderno è costruito utilizzando APIs multiple che lavorano insieme. Il DOM principale definisce gli oggetti che descrivono, fondamentalmente, un documento e gli oggetti al suo interno. Questo viene ampliato come richiesto da altre API che aggiungono nuove funzionalità e capacità al DOM. Ad esempio, l'HTML DOM API aggiunge il supporto per la rappresentazione di documenti HTML nel DOM principale.

+ +

DOM e JavaScript

+ +

Il breve esempio qui sotto, come quasi tutti gli esempi in questo riferimento, è {{glossary("JavaScript")}}. Che significa che è scrittp in JavaScript ma usa il DOM per accedere al documenti ed ai suoi elementi. Il DOM non è un linguaggio di programmazione, ma senza di esso, il linguaggio JavaScript non potrebbe avere nessun modello o conoscenza sulla pagina web HTML o XML e le loro componenti (ad es. elementi). Ogni elemento nel documento - il documento nel suo insieme, la testata, le tabelle all'interno del documento, le intestazioni delle tabelle, il testo all'interno della cella della tabella - è parte del document object model per quel documento, che può essere accessibile e manipolato usanto il DOM e linguaggi di scripting come Java.

+ +

Agli inizi, JavaScript e il DOM 

+ +

All'inizio, JavaScript e DOM erano strettamente intrecciati, ma alla fine si sono evoluti in entità separate. Il contenuto della pagina è memorizzato nel DOM e può essere consultato e manipolato tramite JavaScript, in modo da poter scrivere questa equazione approssimativa:

+ +

API = DOM + JavaScript

+ +

Il DOM è stato progettato per essere indipendente da qualsiasi particolare linguaggio di programmazione, rendendo la rappresentazione strutturale del documento disponibile da un'unica API coerente. Sebbene ci concentriamo esclusivamente su JavaScript in questa documentazione di riferimento, le implementazioni del DOM possono essere costruite per qualsiasi linguaggio, come dimostra questo esempio di Python:

+ +
# Esempio DOM in Python
+import xml.dom.minidom as m
+doc = m.parse(r"C:\Projects\Py\chap1.xml")
+doc.nodeName # DOM property of document object
+p_list = doc.getElementsByTagName("para")
+
+ +

Per ulteriori informazioni su quali tecnologie sono coinvolte nella scrittura di JavaScript sul Web, vedere JavaScript technologies overview.

+ +

Accedere al DOM

+ +

Tu non devi fare niente di speciale per avere accesso al DOM. Browser differenti hanno differenti implementazione del DOM, e le loro implementazioni variano in base alla conformazione dello standard DOM (il soggetto che tenta di 

+ +

Non devi fare nulla di speciale per iniziare a utilizzare il DOM. Browser diversi hanno implementazioni diverse del DOM e queste implementazioni presentano vari gradi di conformità allo standard DOM effettivo (un argomento che cerchiamo di evitare in questa documentazione), ma ogni browser Web utilizza alcuni modelli di oggetti per rendere accessibili le pagine Web tramite JavaScript .

+ +

Quando crei uno script, indipendentemente dal fatto che sia in linea in un elemento <script> o incluso nella pagina Web mediante un'istruzione di caricamento degli script, puoi immediatamente iniziare a utilizzare l'API {{domxref ("document")}} o {{domxref("Window", "window")}} per manipolare il documento stesso o per ottenere i figli di quel documento, che sono i vari elementi nella pagina web. La tua programmazione DOM potrebbe essere qualcosa di semplice come la seguente, che visualizza un messaggio di avviso utilizzando la funzione {{domxref("window.alert", "alert()")}} dalla funzione {{domxref("Window", "window")}} oppure può utilizzare metodi DOM più sofisticati per creare effettivamente nuovi contenuti, come nell'esempio più lungo di seguito.

+ +
<body onload="window.alert('Benvenuto nella mia pagina web!');">
+
+ +

Un altro esempio. Questa funzione crea un nuovo elemento H1, gli aggiunge del testo (all'elemento) e, infine, aggiunge l'H1 all'albero di questo documento.

+ +
<html>
+  <head>
+    <script>
+       // esegui questa funzione quando la pagina è stata caricata
+       window.onload = function() {
+
+         // crea un paio di elementi in una pagina HTML altrimenti vuota
+         const heading = document.createElement("h1");
+         const heading_text = document.createTextNode("Big Head!");
+         heading.appendChild(heading_text);
+         document.body.appendChild(heading);
+      }
+    </script>
+  </head>
+  <body>
+  </body>
+</html>
+
+ +

Tipi di dati fondamentali

+ +

Questo riferimento cerca di descrivere i vari oggetti e tipi in termini semplici. Tuttavia, ci sono diversi tipi di dati che vengono trasmessi all'API di cui dovresti essere a conoscenza.

+ +
+

Nota: poiché la stragrande maggioranza del codice che utilizza il DOM ruota attorno alla manipolazione di documenti HTML, è comune fare riferimento ai nodi nel DOM come elementi anche se, a rigor di termini, non tutti i nodi sono un elemento.

+
+ +

La tabella seguente descrive brevemente questi tipi di dati.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Tipi di dati (Interfaccia)Descrizione
{{domxref("Document")}} +

Quando un membro restituisce un oggetto di tipo documento (ad esempio, la proprietà ownerDocument di un elemento restituisce il document a cui appartiene), questo oggetto è l'oggetto del documento radice stesso. Il capitolo DOM document Reference descrive l'oggetto del documento.

+
{{domxref("Node")}}Ogni oggetto situato all'interno di un documento è un nodo di qualche tipo. In un documento HTML, un oggetto può essere un nodo elemento ma anche un nodo testo o nodo attributo.
{{domxref("Element")}}Il tipo element è basado sul node. Si riferisce a un elemento o un nodo di tipo element restituito da un membro dell'API DOM. Anziché dire, ad esempio, che il metodo{{domxref("document.createElement()")}} restituisce un riferimento a un oggetto a un node, diciamo solo che questo metodo restituisce l'element che è stato appena creato nel DOM. Gli oggetti element implementano l'interfaccia DOM Element e anche l'interfaccia Node più basilare, entrambe incluse in questo riferimento. In un documento HTML, gli elementi sono ulteriormente migliorati dall'interfaccia {{domxref("HTMLElement")}} dell'API DOM HTML e da altre interfacce che descrivono le capacità di tipi specifici di elementi (ad esempio {{domxref("HTMLTableElement")}} per {{HTMLElement("table")}} elements).
{{domxref("NodeList")}}Una nodeList è un array di elementi, simili al tipo ritornanto dal metodo.{{domxref("document.getElementsByTagName()")}}. Gli elementi nel nodeList sono accessibili, da indice, tramite due opzioni: +
    +
  • list.item(1)
    • +
  • list[1]
    • +
+ Questi due sono equivalenti. Nel primo, item() è un singolo metodo dell'oggetto nodeList. Quest'ultimo utilizza la tipica sintassi dell'array per recuperare il secondo elemento nell'elenco.
{{domxref("Attribute")}}Quando un attribute viene restituito da un membro (ad es. con il metodo createAttribute()), si ha un riferimento a un oggetto che espone un'interfaccia speciale (sebbene piccola) per gli attributi. Gli attributi sono nodi nel DOM proprio come gli elementi, anche se raramente li puoi usare come tali.
{{domxref("NamedNodeMap")}}Un namedNodeMap è simile a un array ma è possibile accedere agli elementi in base al nome o all'indice, sebbene quest'ultimo caso sia solo una comodità per l'enumerazione, poiché non sono in un ordine particolare nell'elenco. Un namedNodeMap ha un metodo item() per questo scopo e puoi anche aggiungere e rimuovere elementi da una namedNodeMap.
+ +

Ci sono anche alcune considerazioni terminologiche comuni da tenere a mente. È comune fare riferimento a qualsiasi nodo {{domxref ("Attribute")}} semplicemente come un attribute, ad esempio, e fare riferimento a un array di nodi DOM come nodeList. Troverai questi termini e altri da introdurre e utilizzare in tutta la documentazione.

+ +

interfaccia DOM

+ +

Questa guida riguarda gli oggetti e le cose reali che puoi usare per manipolare la gerarchia DOM. Ci sono molti punti in cui capire come questi lavori possono essere fonte di confusione. Ad esempio, l'oggetto che rappresenta l'elemento del modulo HTML ottiene la sua proprietà name dall'interfaccia HTMLFormElement ma la sua proprietà className dall'interfaccia HTMLElement. In entrambi i casi, la proprietà desiderata è semplicemente nell'oggetto modulo.
+
+ Ma la relazione tra gli oggetti e le interfacce che implementano nel DOM può essere confusa, e quindi questa sezione tenta di dire qualcosa sulle interfacce effettive nella specifica DOM e su come sono rese disponibili.

+ +

Interfacce ed oggetti

+ +

Molti oggetti prendono in prestito da diverse interfacce. L'oggetto tabella, ad esempio, implementa un'interfaccia specializzata {{domxref("HTMLTableElement")}}, che include metodi come createCaption e insertRow. Ma poiché è anche un elemento HTML, la table implementa l'interfaccia Element descritta nel capitolo DOM {{domxref ("Element")}}. E infine, poiché un elemento HTML è anche, per quanto riguarda il DOM, un nodo nella struttura ad albero dei nodi che compongono il modello a oggetti per una pagina HTML o XML, l'oggetto table implementa anche l'interfaccia Node di base, da quale Element deriva.

+ +

Quando si ottiene un riferimento a un oggetto table, come nell'esempio seguente, si utilizzano abitualmente tutte e tre queste interfacce in modo intercambiabile sull'oggetto, forse senza saperlo.

+ +
const table = document.getElementById("table");
+const tableAttrs = table.attributes; // Node/Element interface
+for (let i = 0; i < tableAttrs.length; i++) {
+  // HTMLTableElement interface: border attribute
+  if(tableAttrs[i].nodeName.toLowerCase() == "border")
+    table.border = "1";
+}
+// HTMLTableElement interface: summary attribute
+table.summary = "note: increased border";
+
+ +

Principali interfacce nel DOM

+ +

Questa sezione elenca alcune delle interfacce più comunemente utilizzate nel DOM. L'idea non è di descrivere cosa fanno queste API qui, ma di darti un'idea del tipo di metodi e proprietà che vedrai molto spesso mentre usi il DOM. Queste API comuni sono usate negli esempi più lunghi nel capitolo DOM Examples alla fine di questo libro.

+ +

Gli oggetti document e window sono gli oggetti le cui interfacce si utilizzano generalmente più spesso nella programmazione DOM. In termini semplici, l'oggetto window rappresenta qualcosa di simile al browser e l'oggetto document è la radice del documento stesso. L'Element eredita dall'interfaccia del Node generico e insieme queste due interfacce forniscono molti dei metodi e delle proprietà che usi sui singoli elementi. Questi elementi possono anche avere interfacce specifiche per gestire il tipo di dati contenuti in tali elementi, come nell'esempio dell'oggetto tabella nella sezione precedente.

+ +

Di seguito è riportato un breve elenco di API comuni negli script di pagine Web e XML che utilizzano DOM.

+ + + +

Test dell'API DOM

+ +

Questo documento fornisce esempi per ogni interfaccia che è possibile utilizzare nel proprio sviluppo Web. In alcuni casi, gli esempi sono pagine HTML complete, con l'accesso DOM in un elemento <script>, l'interfaccia (ad es. Pulsanti) necessaria per accendere lo script in un modulo e gli elementi HTML su cui opera il DOM elencati come bene. In questo caso, puoi tagliare e incollare l'esempio in un nuovo documento HTML, salvarlo ed eseguire l'esempio dal browser.

+ +

Ci sono alcuni casi, tuttavia, quando gli esempi sono più concisi. Per eseguire esempi che dimostrano solo la relazione di base dell'interfaccia con gli elementi HTML, è possibile impostare una pagina di prova in cui è possibile accedere facilmente alle interfacce dagli script. La seguente pagina Web molto semplice fornisce un elemento <script> nell'intestazione in cui è possibile inserire funzioni che testano l'interfaccia, alcuni elementi HTML con attributi che è possibile recuperare, impostare o altrimenti manipolare e l'interfaccia utente Web necessaria per chiama quelle funzioni dal browser.

+ +

Puoi utilizzare questa pagina di prova o crearne una simile per testare le interfacce DOM che ti interessano e vedere come funzionano sulla piattaforma del browser. È possibile aggiornare il contenuto della funzione test() secondo necessità, creare più pulsanti o aggiungere elementi se necessario.

+ +
<html>
+<head>
+  <title>DOM Tests</title>
+  <script>
+    function setBodyAttr(attr, value) {
+      if (document.body) document.body[attr] = value;
+      else throw new Error("no support");
+    }
+  </script>
+</head>
+<body>
+  <div style="margin: .5in; height: 400px;">
+    <p><b><tt>text</tt></b></p>
+    <form>
+      <select onChange="setBodyAttr('text',
+        this.options[this.selectedIndex].value);">
+        <option value="black">black</option>
+        <option value="red">red</option>
+      </select>
+      <p><b><tt>bgColor</tt></b></p>
+      <select onChange="setBodyAttr('bgColor',
+        this.options[this.selectedIndex].value);">
+        <option value="white">white</option>
+        <option value="lightgrey">gray</option>
+      </select>
+      <p><b><tt>link</tt></b></p>
+      <select onChange="setBodyAttr('link',
+        this.options[this.selectedIndex].value);">
+        <option value="blue">blue</option>
+        <option value="green">green</option>
+      </select>
+      <small>
+        <a href="http://some.website.tld/page.html" id="sample">
+          (sample link)
+        </a>
+      </small><br />
+      <input type="button" value="version" onclick="ver()" />
+    </form>
+  </div>
+</body>
+</html>
+
+ +

Per testare molte interfacce in una singola pagina —ad esempio una "suite" di proprietà che influisce sui colori di una pagina Web— è possibile creare una pagina di test simile con un'intera console di pulsanti, campi di testo e altri elementi HTML. La schermata seguente ti dà un'idea di come le interfacce possono essere raggruppate per il test.

+ +
+
Figure 0.1 Esempio DOM Test Page
+Image:DOM_Ref_Introduction_to_the_DOM.gif
+ +

In questo esempio, i menu drop-down, aggiornano dinamicamente tali aspetti accessibili della pagina Web come il colore di sfondo (bgColor), il colore dei collegamenti ipertestuali (aLink) e il colore del testo (text). Tuttavia, progettate le vostre pagine di test e testare le interfacce mentre le implementate è una parte importante dell'apprendimento dell'uso efficace del DOM.

+ + + + + +
{{DefaultAPISidebar("DOM")}}
diff --git a/files/it/web/api/document_object_model/introduzione/index.html b/files/it/web/api/document_object_model/introduzione/index.html deleted file mode 100644 index 328caa0c5c..0000000000 --- a/files/it/web/api/document_object_model/introduzione/index.html +++ /dev/null @@ -1,257 +0,0 @@ ---- -title: Introduzione al DOM -slug: Web/API/Document_Object_Model/Introduzione -tags: - - Beginner - - DOM - - Guida - - HTML DOM - - Introduzione - - Principianti - - Tutorial -translation_of: Web/API/Document_Object_Model/Introduction ---- -

Il Document Object Model (DOM) è 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 un documento {{Glossary("HTML")}} o {{Glossary("XML")}} in memoria e come puoi usare le APIs per creare contenuti web e applicazioni.

- -

Che cos'è il DOM?

- -

Il Document Object Model (DOM) è una interfaccia di programmazione per documenti HTML e XML. Rappresenta la pagina in modo che i programmi possano modificare la struttura, lo stile e il contenuto del documento. Il DOM rappresenta il documento come nodi e oggetti. In questo modo, i linguaggi di programmazione possono connettersi alla pagina.

- -

La pagina web è un documento. Questo documento può essere visualizzato nella finestra del browser o come sorgente HTML. Ma è lo stesso documento in entrambi i casi. Il Document Obkect Model (DOM) rappresenta come entrambi i documenti possono essere manipolati. Il DOM è una rappresentazione ad oggetti della pagina web, che può essere modificata con linguaggi di scripting come JavaScript.

- -

Gli standard W3C DOM e WHATWG DOM sono implementati nei più moderni browsers. Molti browsers estendono lo standard, pertanto è necessario prestare attenzione quando li si utilizza sul Web in cui è possibile accedere ai documenti da vari browser con DOM diversi.

- -

Per esempio, lo standard DOM specifica che il metodo getElementsByTagName usato qui sotto, dovrebbe ritornare una lista di tutti gli elementi <p> nel documento.

- -
const paragrafi = document.getElementsByTagName("p");
-// paragrafi[0] è il primo <p> elemento
-// paragrafi[1] è il secondo <p> elemento, etc.
-alert(paragrafi[0].nodeName);
-
- -

Tutte le proprietà, metodi ed eventi disponibili per la manipolazione e la creazione di pagine web sono organizzate in oggetti (per esempio, l'oggetto document che rappresenta il documento stesso, l'oggetto table che implementa la speciale interfaccia DOM {{domxref("HTMLTableElement")}} per accedere alle tabelle HTML, e così via). Questa documentazione fornisce una documentazione oggetto per oggetto al DOM.

- -

Il DOM moderno è costruito utilizzando APIs multiple che lavorano insieme. Il DOM principale definisce gli oggetti che descrivono, fondamentalmente, un documento e gli oggetti al suo interno. Questo viene ampliato come richiesto da altre API che aggiungono nuove funzionalità e capacità al DOM. Ad esempio, l'HTML DOM API aggiunge il supporto per la rappresentazione di documenti HTML nel DOM principale.

- -

DOM e JavaScript

- -

Il breve esempio qui sotto, come quasi tutti gli esempi in questo riferimento, è {{glossary("JavaScript")}}. Che significa che è scrittp in JavaScript ma usa il DOM per accedere al documenti ed ai suoi elementi. Il DOM non è un linguaggio di programmazione, ma senza di esso, il linguaggio JavaScript non potrebbe avere nessun modello o conoscenza sulla pagina web HTML o XML e le loro componenti (ad es. elementi). Ogni elemento nel documento - il documento nel suo insieme, la testata, le tabelle all'interno del documento, le intestazioni delle tabelle, il testo all'interno della cella della tabella - è parte del document object model per quel documento, che può essere accessibile e manipolato usanto il DOM e linguaggi di scripting come Java.

- -

Agli inizi, JavaScript e il DOM 

- -

All'inizio, JavaScript e DOM erano strettamente intrecciati, ma alla fine si sono evoluti in entità separate. Il contenuto della pagina è memorizzato nel DOM e può essere consultato e manipolato tramite JavaScript, in modo da poter scrivere questa equazione approssimativa:

- -

API = DOM + JavaScript

- -

Il DOM è stato progettato per essere indipendente da qualsiasi particolare linguaggio di programmazione, rendendo la rappresentazione strutturale del documento disponibile da un'unica API coerente. Sebbene ci concentriamo esclusivamente su JavaScript in questa documentazione di riferimento, le implementazioni del DOM possono essere costruite per qualsiasi linguaggio, come dimostra questo esempio di Python:

- -
# Esempio DOM in Python
-import xml.dom.minidom as m
-doc = m.parse(r"C:\Projects\Py\chap1.xml")
-doc.nodeName # DOM property of document object
-p_list = doc.getElementsByTagName("para")
-
- -

Per ulteriori informazioni su quali tecnologie sono coinvolte nella scrittura di JavaScript sul Web, vedere JavaScript technologies overview.

- -

Accedere al DOM

- -

Tu non devi fare niente di speciale per avere accesso al DOM. Browser differenti hanno differenti implementazione del DOM, e le loro implementazioni variano in base alla conformazione dello standard DOM (il soggetto che tenta di 

- -

Non devi fare nulla di speciale per iniziare a utilizzare il DOM. Browser diversi hanno implementazioni diverse del DOM e queste implementazioni presentano vari gradi di conformità allo standard DOM effettivo (un argomento che cerchiamo di evitare in questa documentazione), ma ogni browser Web utilizza alcuni modelli di oggetti per rendere accessibili le pagine Web tramite JavaScript .

- -

Quando crei uno script, indipendentemente dal fatto che sia in linea in un elemento <script> o incluso nella pagina Web mediante un'istruzione di caricamento degli script, puoi immediatamente iniziare a utilizzare l'API {{domxref ("document")}} o {{domxref("Window", "window")}} per manipolare il documento stesso o per ottenere i figli di quel documento, che sono i vari elementi nella pagina web. La tua programmazione DOM potrebbe essere qualcosa di semplice come la seguente, che visualizza un messaggio di avviso utilizzando la funzione {{domxref("window.alert", "alert()")}} dalla funzione {{domxref("Window", "window")}} oppure può utilizzare metodi DOM più sofisticati per creare effettivamente nuovi contenuti, come nell'esempio più lungo di seguito.

- -
<body onload="window.alert('Benvenuto nella mia pagina web!');">
-
- -

Un altro esempio. Questa funzione crea un nuovo elemento H1, gli aggiunge del testo (all'elemento) e, infine, aggiunge l'H1 all'albero di questo documento.

- -
<html>
-  <head>
-    <script>
-       // esegui questa funzione quando la pagina è stata caricata
-       window.onload = function() {
-
-         // crea un paio di elementi in una pagina HTML altrimenti vuota
-         const heading = document.createElement("h1");
-         const heading_text = document.createTextNode("Big Head!");
-         heading.appendChild(heading_text);
-         document.body.appendChild(heading);
-      }
-    </script>
-  </head>
-  <body>
-  </body>
-</html>
-
- -

Tipi di dati fondamentali

- -

Questo riferimento cerca di descrivere i vari oggetti e tipi in termini semplici. Tuttavia, ci sono diversi tipi di dati che vengono trasmessi all'API di cui dovresti essere a conoscenza.

- -
-

Nota: poiché la stragrande maggioranza del codice che utilizza il DOM ruota attorno alla manipolazione di documenti HTML, è comune fare riferimento ai nodi nel DOM come elementi anche se, a rigor di termini, non tutti i nodi sono un elemento.

-
- -

La tabella seguente descrive brevemente questi tipi di dati.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Tipi di dati (Interfaccia)Descrizione
{{domxref("Document")}} -

Quando un membro restituisce un oggetto di tipo documento (ad esempio, la proprietà ownerDocument di un elemento restituisce il document a cui appartiene), questo oggetto è l'oggetto del documento radice stesso. Il capitolo DOM document Reference descrive l'oggetto del documento.

-
{{domxref("Node")}}Ogni oggetto situato all'interno di un documento è un nodo di qualche tipo. In un documento HTML, un oggetto può essere un nodo elemento ma anche un nodo testo o nodo attributo.
{{domxref("Element")}}Il tipo element è basado sul node. Si riferisce a un elemento o un nodo di tipo element restituito da un membro dell'API DOM. Anziché dire, ad esempio, che il metodo{{domxref("document.createElement()")}} restituisce un riferimento a un oggetto a un node, diciamo solo che questo metodo restituisce l'element che è stato appena creato nel DOM. Gli oggetti element implementano l'interfaccia DOM Element e anche l'interfaccia Node più basilare, entrambe incluse in questo riferimento. In un documento HTML, gli elementi sono ulteriormente migliorati dall'interfaccia {{domxref("HTMLElement")}} dell'API DOM HTML e da altre interfacce che descrivono le capacità di tipi specifici di elementi (ad esempio {{domxref("HTMLTableElement")}} per {{HTMLElement("table")}} elements).
{{domxref("NodeList")}}Una nodeList è un array di elementi, simili al tipo ritornanto dal metodo.{{domxref("document.getElementsByTagName()")}}. Gli elementi nel nodeList sono accessibili, da indice, tramite due opzioni: -
    -
  • list.item(1)
    • -
  • list[1]
    • -
- Questi due sono equivalenti. Nel primo, item() è un singolo metodo dell'oggetto nodeList. Quest'ultimo utilizza la tipica sintassi dell'array per recuperare il secondo elemento nell'elenco.
{{domxref("Attribute")}}Quando un attribute viene restituito da un membro (ad es. con il metodo createAttribute()), si ha un riferimento a un oggetto che espone un'interfaccia speciale (sebbene piccola) per gli attributi. Gli attributi sono nodi nel DOM proprio come gli elementi, anche se raramente li puoi usare come tali.
{{domxref("NamedNodeMap")}}Un namedNodeMap è simile a un array ma è possibile accedere agli elementi in base al nome o all'indice, sebbene quest'ultimo caso sia solo una comodità per l'enumerazione, poiché non sono in un ordine particolare nell'elenco. Un namedNodeMap ha un metodo item() per questo scopo e puoi anche aggiungere e rimuovere elementi da una namedNodeMap.
- -

Ci sono anche alcune considerazioni terminologiche comuni da tenere a mente. È comune fare riferimento a qualsiasi nodo {{domxref ("Attribute")}} semplicemente come un attribute, ad esempio, e fare riferimento a un array di nodi DOM come nodeList. Troverai questi termini e altri da introdurre e utilizzare in tutta la documentazione.

- -

interfaccia DOM

- -

Questa guida riguarda gli oggetti e le cose reali che puoi usare per manipolare la gerarchia DOM. Ci sono molti punti in cui capire come questi lavori possono essere fonte di confusione. Ad esempio, l'oggetto che rappresenta l'elemento del modulo HTML ottiene la sua proprietà name dall'interfaccia HTMLFormElement ma la sua proprietà className dall'interfaccia HTMLElement. In entrambi i casi, la proprietà desiderata è semplicemente nell'oggetto modulo.
-
- Ma la relazione tra gli oggetti e le interfacce che implementano nel DOM può essere confusa, e quindi questa sezione tenta di dire qualcosa sulle interfacce effettive nella specifica DOM e su come sono rese disponibili.

- -

Interfacce ed oggetti

- -

Molti oggetti prendono in prestito da diverse interfacce. L'oggetto tabella, ad esempio, implementa un'interfaccia specializzata {{domxref("HTMLTableElement")}}, che include metodi come createCaption e insertRow. Ma poiché è anche un elemento HTML, la table implementa l'interfaccia Element descritta nel capitolo DOM {{domxref ("Element")}}. E infine, poiché un elemento HTML è anche, per quanto riguarda il DOM, un nodo nella struttura ad albero dei nodi che compongono il modello a oggetti per una pagina HTML o XML, l'oggetto table implementa anche l'interfaccia Node di base, da quale Element deriva.

- -

Quando si ottiene un riferimento a un oggetto table, come nell'esempio seguente, si utilizzano abitualmente tutte e tre queste interfacce in modo intercambiabile sull'oggetto, forse senza saperlo.

- -
const table = document.getElementById("table");
-const tableAttrs = table.attributes; // Node/Element interface
-for (let i = 0; i < tableAttrs.length; i++) {
-  // HTMLTableElement interface: border attribute
-  if(tableAttrs[i].nodeName.toLowerCase() == "border")
-    table.border = "1";
-}
-// HTMLTableElement interface: summary attribute
-table.summary = "note: increased border";
-
- -

Principali interfacce nel DOM

- -

Questa sezione elenca alcune delle interfacce più comunemente utilizzate nel DOM. L'idea non è di descrivere cosa fanno queste API qui, ma di darti un'idea del tipo di metodi e proprietà che vedrai molto spesso mentre usi il DOM. Queste API comuni sono usate negli esempi più lunghi nel capitolo DOM Examples alla fine di questo libro.

- -

Gli oggetti document e window sono gli oggetti le cui interfacce si utilizzano generalmente più spesso nella programmazione DOM. In termini semplici, l'oggetto window rappresenta qualcosa di simile al browser e l'oggetto document è la radice del documento stesso. L'Element eredita dall'interfaccia del Node generico e insieme queste due interfacce forniscono molti dei metodi e delle proprietà che usi sui singoli elementi. Questi elementi possono anche avere interfacce specifiche per gestire il tipo di dati contenuti in tali elementi, come nell'esempio dell'oggetto tabella nella sezione precedente.

- -

Di seguito è riportato un breve elenco di API comuni negli script di pagine Web e XML che utilizzano DOM.

- - - -

Test dell'API DOM

- -

Questo documento fornisce esempi per ogni interfaccia che è possibile utilizzare nel proprio sviluppo Web. In alcuni casi, gli esempi sono pagine HTML complete, con l'accesso DOM in un elemento <script>, l'interfaccia (ad es. Pulsanti) necessaria per accendere lo script in un modulo e gli elementi HTML su cui opera il DOM elencati come bene. In questo caso, puoi tagliare e incollare l'esempio in un nuovo documento HTML, salvarlo ed eseguire l'esempio dal browser.

- -

Ci sono alcuni casi, tuttavia, quando gli esempi sono più concisi. Per eseguire esempi che dimostrano solo la relazione di base dell'interfaccia con gli elementi HTML, è possibile impostare una pagina di prova in cui è possibile accedere facilmente alle interfacce dagli script. La seguente pagina Web molto semplice fornisce un elemento <script> nell'intestazione in cui è possibile inserire funzioni che testano l'interfaccia, alcuni elementi HTML con attributi che è possibile recuperare, impostare o altrimenti manipolare e l'interfaccia utente Web necessaria per chiama quelle funzioni dal browser.

- -

Puoi utilizzare questa pagina di prova o crearne una simile per testare le interfacce DOM che ti interessano e vedere come funzionano sulla piattaforma del browser. È possibile aggiornare il contenuto della funzione test() secondo necessità, creare più pulsanti o aggiungere elementi se necessario.

- -
<html>
-<head>
-  <title>DOM Tests</title>
-  <script>
-    function setBodyAttr(attr, value) {
-      if (document.body) document.body[attr] = value;
-      else throw new Error("no support");
-    }
-  </script>
-</head>
-<body>
-  <div style="margin: .5in; height: 400px;">
-    <p><b><tt>text</tt></b></p>
-    <form>
-      <select onChange="setBodyAttr('text',
-        this.options[this.selectedIndex].value);">
-        <option value="black">black</option>
-        <option value="red">red</option>
-      </select>
-      <p><b><tt>bgColor</tt></b></p>
-      <select onChange="setBodyAttr('bgColor',
-        this.options[this.selectedIndex].value);">
-        <option value="white">white</option>
-        <option value="lightgrey">gray</option>
-      </select>
-      <p><b><tt>link</tt></b></p>
-      <select onChange="setBodyAttr('link',
-        this.options[this.selectedIndex].value);">
-        <option value="blue">blue</option>
-        <option value="green">green</option>
-      </select>
-      <small>
-        <a href="http://some.website.tld/page.html" id="sample">
-          (sample link)
-        </a>
-      </small><br />
-      <input type="button" value="version" onclick="ver()" />
-    </form>
-  </div>
-</body>
-</html>
-
- -

Per testare molte interfacce in una singola pagina —ad esempio una "suite" di proprietà che influisce sui colori di una pagina Web— è possibile creare una pagina di test simile con un'intera console di pulsanti, campi di testo e altri elementi HTML. La schermata seguente ti dà un'idea di come le interfacce possono essere raggruppate per il test.

- -
-
Figure 0.1 Esempio DOM Test Page
-Image:DOM_Ref_Introduction_to_the_DOM.gif
- -

In questo esempio, i menu drop-down, aggiornano dinamicamente tali aspetti accessibili della pagina Web come il colore di sfondo (bgColor), il colore dei collegamenti ipertestuali (aLink) e il colore del testo (text). Tuttavia, progettate le vostre pagine di test e testare le interfacce mentre le implementate è una parte importante dell'apprendimento dell'uso efficace del DOM.

- - - - - -
{{DefaultAPISidebar("DOM")}}
diff --git a/files/it/web/api/documentorshadowroot/stylesheets/index.html b/files/it/web/api/documentorshadowroot/stylesheets/index.html new file mode 100644 index 0000000000..3aa006a94f --- /dev/null +++ b/files/it/web/api/documentorshadowroot/stylesheets/index.html @@ -0,0 +1,44 @@ +--- +title: document.styleSheets +slug: Web/API/Document/styleSheets +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/DocumentOrShadowRoot/styleSheets +translation_of_original: Web/API/Document/styleSheets +--- +

{{APIRef("DOM")}}

+ +

Restituisce una lista di oggetti stylesheet per i fogli stile esplicitamente linkati o inclusi nel documento.

+ +

Proprietà

+ +

styleSheetList.length - restituisce il numero di oggetti stylesheet contenuti nell'oggetto.

+ +

Sintassi

+ +
styleSheetList =
+document.styleSheets
+
+ +

L'oggetto restituito è di tipo StyleSheetList.

+ +

E' una collezione ordinata di oggetti stylesheet. + styleSheetList + .item( + + indice + ) o semplicemente + styleSheetList + {{ mediawiki.external(' + + indice + ') }} restituisce un singolo oggetto stylesheet indicato dall'indice (indice comincia da 0).

+ +

Specifiche

+ +

DOM Level 2 Style: styleSheets

+ +

{{ languages( { "ja": "ja/DOM/document.styleSheets", "pl": "pl/DOM/document.styleSheets" } ) }}

diff --git a/files/it/web/api/element/addeventlistener/index.html b/files/it/web/api/element/addeventlistener/index.html deleted file mode 100644 index 6608e69bd3..0000000000 --- a/files/it/web/api/element/addeventlistener/index.html +++ /dev/null @@ -1,694 +0,0 @@ ---- -title: EventTarget.addEventListener() -slug: Web/API/Element/addEventListener -tags: - - API - - DOM - - EventTarget - - Gestori di Eventi - - JavaScript - - Referenza - - Ricevere Eventi - - Rilevare Eventi - - addEventListener - - attachEvent - - eventi - - metodo - - mselementresize -translation_of: Web/API/EventTarget/addEventListener ---- -
{{APIRef("DOM Events")}}
- -

Il metodo {{domxref("EventTarget")}} addEventListener() imposta una funzione che verrà chiamata ogni volta che l'evento specificato viene consegnato all'elemento di destinazione. I target comuni sono {{domxref("Element")}}, {{domxref("Document")}}, e {{domxref("Window")}}, ma la destinazione può essere qualsiasi oggetto che supporti eventi (come XMLHttpRequest).

- -

addEventListener() funziona aggiungendo una funzione o un oggetto che implementa {{domxref("EventListener")}} all'elenco di listener di eventi per il tipo di evento specificato sul {{domxref("EventTarget")}} sul quale è chiamato.

- -

Sintassi

- -
target.addEventListener(type, listener[, options]);
-target.addEventListener(type, listener[, useCapture]);
-target.addEventListener(type, listener[, useCapture, wantsUntrusted {{Non-standard_inline}}]); // Gecko/Mozilla only
- -

Parametri

- -
-
type
-
Una stringa sensibile al maiuscolo/minuscolo che rappresenta il tipo di evento da assegnare.
-
listener
-
L'oggetto che riceve una notifica (un oggetto che implementa l'interfaccia {{domxref("Event")}}) quando si verifica un evento del tipo specificato. Questo deve essere un oggetto che implementa l'interfaccia {{domxref("EventListener")}}, o una funzione. Vedi {{anch("Il callback del listener di eventi")}} per i dettagli sul callback stesso.
-
options {{optional_inline}}
-
Un oggetto opzioni che specifica le caratteristiche del listener di eventi. Le opzioni disponibili sono: -
    -
  • capture: Un {{jsxref("Boolean")}} che indica che eventi di questo tipo verranno inviati al listener registrato prima di essere inviati a qualsiasi EventTarget sotto di esso nell'albero del DOM.
    • -
  • once: Un {{jsxref("Boolean")}} che indica che il listener dovrebbe essere invocato al massimo una volta dopo essere stato aggiunto. Se ritorna true, il listener verrebbe automaticamente rimosso quando invocato.
    • -
  • passive: Un {{jsxref("Boolean")}} che, se true, indica che la funzione specificata da listener non chiamerà mai {{domxref("Event.preventDefault", "preventDefault()")}}. Se un listener passivo chiama preventDefault(), l'user agent non farà altro che generare un avviso nella console. Vedi {{anch("Miglioramento delle prestazioni di scorrimento con i listeners passivi")}} per saperne di più.
    • -
  • {{non-standard_inline}} mozSystemGroup: Un {{jsxref("Boolean")}} che indica che l'ascoltatore deve essere aggiunto al gruppo di sistema. Disponibile solo nel codice in esecuzione in XBL o nel {{glossary("chrome")}} del browser Firefox.
    • -
-
-
useCapture {{optional_inline}}
-
Un {{jsxref("Boolean")}} che indica se eventi di questo tipo verranno inviati al listener registrato prima di essere inviati a qualsiasi EventTarget sotto di esso nell'albero del DOM. Gli eventi che stanno ribollendo verso l'alto attraverso l'albero non innescheranno un ascoltatore designato ad usare il capturing. Il bubbling e la cattura degli eventi sono due modi di propagare gli eventi che si verificano in un elemento che è annidato in un altro elemento, quando entrambi gli elementi hanno registrato un handle per quell'evento. La modalità di propagazione dell'evento determina l'ordine in cui gli elementi ricevono l'evento. Vedi DOM Level 3 Events e JavaScript Event order per una spiegazione dettagliata. Se non specificato, useCapture di default è false.
-
-
Note: Per gli ascoltatori di eventi collegati al target dell'evento, l'evento si trova nella fase target, piuttosto che nelle fasi di cattura e bubbling. Gli eventi nella fase di destinazione attiveranno tutti gli ascoltatori di un elemento nell'ordine in cui sono stati registrati, indipendentemente dal parametro useCapture.
- -
Note: useCapture non è sempre stato opzionale. Idealmente, dovresti includerlo per la massima compatibilità con i browser.
-
-
wantsUntrusted {{Non-standard_inline}}
-
Un parametro specifico per Firefox (Gecko). Se è true, il listener riceve eventi sintetici inviati dal contenuto web (il valore predefinito è false per il browser {{glossary("chrome")}} e true per le normali pagine Web). Questo parametro è utile per il codice trovato nei componenti aggiuntivi e anche per il browser stesso.
-
- -

Valore di ritorno

- -

undefined

- -

Note di utilizzo

- -

Il callback del listener di eventi

- -

Il listener di eventi può essere specificato come funzione di callback o come oggetto che implementa {{domxref("EventListener")}}, il cui metodo {{domxref("EventListener.handleEvent", "handleEvent()")}} funge da funzione di callback.

- -

La stessa funzione di callback ha gli stessi parametri e il valore di ritorno del metodo handleEvent() cioè, il callback accetta un singolo parametro: un oggetto basato su {{domxref("Event")}} che descrive l'evento che si è verificato e non restituisce nulla.

- -

Ad esempio, un callback del gestore di eventi che può essere utilizzato per gestire entrambi gli eventi {{event("fullscreenchange")}} e {{event("fullscreenerror")}} potrebbe avere il seguente aspetto:

- -
function eventHandler(event) {
-  if (event.type == 'fullscreenchange') {
-    /* gestire un interruttore a schermo intero */
-  } else /* fullscreenerror */ {
-    /* gestire un errore di commutazione a schermo intero */
-  }
-}
- -

Rilevamento sicuro del supporto opzionale

- -

Nelle versioni precedenti della specifica DOM, il terzo parametro di addEventListener() era un valore booleano che indicava se utilizzare o meno l'acquisizione. Nel corso del tempo, è diventato chiaro che erano necessarie più opzioni. Piuttosto che aggiungere altri parametri alla funzione (complicando enormemente le cose quando si tratta di valori opzionali), il terzo parametro è stato modificato in un oggetto che può contenere varie proprietà che definiscono i valori delle opzioni per configurare il processo di rimozione del listener di eventi.

- -

Poiché i browser più vecchi (così come alcuni browser non troppo vecchi) presuppongono ancora che il terzo parametro sia un booleano, è necessario creare il codice per gestire questo scenario in modo intelligente. Puoi farlo utilizzando il rilevamento delle funzioni per ciascuna delle opzioni che ti interessano.

- -

Ad esempio, se si desidera verificare l'opzione passive:

- -
var passiveSupported = false;
-
-try {
-  var options = {
-    get passive() { // Questa funzione verrà chiamata quando il browser
-                    //     tenta di accedere alla proprietà passiva.
-      passiveSupported = true;
-    }
-  };
-
-  window.addEventListener("test", options, options);
-  window.removeEventListener("test", options, options);
-} catch(err) {
-  passiveSupported = false;
-}
-
- -

Questo crea un oggetto options con una funzione getter per la proprietà passive; il getter imposta una flag, passiveSupported, è true se viene chiamato. Ciò significa che se il browser controlla il valore della proprietà passive sull'oggetto options, passiveSupported sarà impostato su true; altrimenti rimarrà false. Chiamiamo quindi addEventListener() per impostare un gestore di eventi falsi, specificando tali opzioni, in modo che le opzioni vengano controllate se il browser riconosce un oggetto come terzo parametro. Quindi, chiamiamo removeEventListener() per pulire dopo noi stessi. (Nota che handleEvent() viene ignorato sui listener di eventi che non vengono chiamati.)

- -

Puoi verificare se un'opzione è supportata in questo modo. Basta aggiungere un getter per quella opzione usando il codice simile a quello mostrato sopra.

- -

Quindi, quando vuoi creare un listener di eventi effettivo che utilizza le opzioni in questione, puoi fare qualcosa di simile a questo:

- -
someElement.addEventListener("mouseup", handleMouseUp, passiveSupported
-                               ? { passive: true } : false);
- -

Qui stiamo aggiungendo un listener per l'evento {{event("mouseup")}} sull'elemento someElement. Per il terzo parametro, se passiveSupported è true, stiamo specificando un oggetto options con passive impostato su true; altrimenti, sappiamo che dobbiamo passare un booleano e passiamo false come valore del parametro useCapture.

- -

Se preferisci, puoi usare una libreria di terze parti come Modernizr o Detect It per fare questo test per te.

- -

È possibile ottenere ulteriori informazioni dall'articolo su EventListenerOptions dal gruppo di Web Incubator Community.

- -

Esempi

- -

Aggiungere un semplice listener

- -

Questo esempio dimostra come utilizzare addEventListener() per controllare i click del mouse su un elemento.

- -

HTML

- -
<table id="outside">
-    <tr><td id="t1">one</td></tr>
-    <tr><td id="t2">two</td></tr>
-</table>
-
- -

JavaScript

- -
// Funzione per modificare il contenuto di t2
-function modifyText() {
-  var t2 = document.getElementById("t2");
-  if (t2.firstChild.nodeValue == "three") {
-    t2.firstChild.nodeValue = "two";
-  } else {
-    t2.firstChild.nodeValue = "three";
-  }
-}
-
-// Aggiungere listener di eventi alla tabella
-var el = document.getElementById("outside");
-el.addEventListener("click", modifyText, false);
-
- -

In questo codice, modifyText() è un listener per gli eventi click registrati usando addEventListener(). Un click in qualsiasi punto della tabella esegue il gestore ed esegue modifyText().

- -

Risultato

- -

{{EmbedLiveSample('Aggiungere_un_semplice_listener')}}

- -

Listener di eventi con funzione anonima

- -

Qui, daremo un'occhiata a come utilizzare una funzione anonima per passare parametri nel listener di eventi.

- -

HTML

- -
<table id="outside">
-    <tr><td id="t1">one</td></tr>
-    <tr><td id="t2">two</td></tr>
-</table>
- -

JavaScript

- -
// Funzione per modificare il contenuto di t2
-function modifyText(new_text) {
-  var t2 = document.getElementById("t2");
-  t2.firstChild.nodeValue = new_text;
-}
-
-// Funzione per aggiungere listener alla tabella
-var el = document.getElementById("outside");
-el.addEventListener("click", function(){modifyText("four")}, false);
-
- -

Nota che il listener è una funzione anonima che incapsula codice che è quindi, a sua volta, in grado di inviare parametri alla funzione modifyText(), che è responsabile per rispondere effettivamente all'evento.

- -

Risultato

- -

{{EmbedLiveSample('Listener_di_eventi_con_funzione_anonima')}}

- -

Listener di eventi con una funzione a freccia

- -

Questo esempio dimostra un semplice listener di eventi implementato utilizzando la notazione della funzione a freccia.

- -

HTML

- -
<table id="outside">
-    <tr><td id="t1">one</td></tr>
-    <tr><td id="t2">two</td></tr>
-</table>
- -

JavaScript

- -
// Funzione per modificare il contenuto di t2
-function modifyText(new_text) {
-  var t2 = document.getElementById("t2");
-  t2.firstChild.nodeValue = new_text;
-}
-
-// Aggiungere un listener alla tabella con una funzione a freccia
-var el = document.getElementById("outside");
-el.addEventListener("click", () => { modifyText("four"); }, false);
-
- -

Risultato

- -

{{EmbedLiveSample('Listener_di_eventi_con_una_funzione_a_freccia')}}

- -

Si noti che, mentre le funzioni anonime e le frecce sono simili, hanno diversi collegamenti this. Mentre le funzioni anonime (e tutte le funzioni JavaScript tradizionali) creano i propri collegamenti this, le funzioni a freccia ereditano il vincolo this della funzione di contenimento.

- -

Ciò significa che le variabili e le costanti disponibili per la funzione di contenimento sono disponibili anche per il gestore di eventi quando si utilizza una funzione di freccia.

- -

Esempio di utilizzo delle opzioni

- -

HTML

- -
<div class="outer">
-    outer, once & none-once
-    <div class="middle" target="_blank">
-        middle, capture & none-capture
-        <a class="inner1" href="https://www.mozilla.org" target="_blank">
-            inner1, passive & preventDefault(which is not allowed)
-        </a>
-        <a class="inner2" href="https://developer.mozilla.org/" target="_blank">
-            inner2, none-passive & preventDefault(not open new page)
-        </a>
-    </div>
-</div>
-
- -

CSS

- -
    .outer, .middle, .inner1, .inner2 {
-        display:block;
-        width:520px;
-        padding:15px;
-        margin:15px;
-        text-decoration:none;
-    }
-    .outer{
-        border:1px solid red;
-        color:red;
-    }
-    .middle{
-        border:1px solid green;
-        color:green;
-        width:460px;
-    }
-    .inner1, .inner2{
-        border:1px solid purple;
-        color:purple;
-        width:400px;
-    }
-
- -

JavaScript

- -
    let outer  = document.getElementsByClassName('outer') [0];
-    let middle = document.getElementsByClassName('middle')[0];
-    let inner1 = document.getElementsByClassName('inner1')[0];
-    let inner2 = document.getElementsByClassName('inner2')[0];
-
-    let capture = {
-        capture : true
-    };
-    let noneCapture = {
-        capture : false
-    };
-    let once = {
-        once : true
-    };
-    let noneOnce = {
-        once : false
-    };
-    let passive = {
-        passive : true
-    };
-    let nonePassive = {
-        passive : false
-    };
-
-
-    outer.addEventListener('click', onceHandler, once);
-    outer.addEventListener('click', noneOnceHandler, noneOnce);
-    middle.addEventListener('click', captureHandler, capture);
-    middle.addEventListener('click', noneCaptureHandler, noneCapture);
-    inner1.addEventListener('click', passiveHandler, passive);
-    inner2.addEventListener('click', nonePassiveHandler, nonePassive);
-
-    function onceHandler(event) {
-        alert('outer, once');
-    }
-    function noneOnceHandler(event) {
-        alert('outer, none-once, default');
-    }
-    function captureHandler(event) {
-        //event.stopImmediatePropagation();
-        alert('middle, capture');
-    }
-    function noneCaptureHandler(event) {
-        alert('middle, none-capture, default');
-    }
-    function passiveHandler(event) {
-        // Unable to preventDefault inside passive event listener invocation.
-        event.preventDefault();
-        alert('inner1, passive, open new page');
-    }
-    function nonePassiveHandler(event) {
-        event.preventDefault();
-        //event.stopPropagation();
-        alert('inner2, none-passive, default, not open new page');
-    }
-
- -

Risultato

- -

Fai click rispettivamente sui contenitori esterni, centrali e interni per vedere come funzionano le opzioni.

- -

{{ EmbedLiveSample('Esempio_di_utilizzo_delle_opzioni', 600, 310, '', 'Web/API/EventTarget/addEventListener') }}

- -

Prima di utilizzare un particolare valore nell'oggetto options è una buona idea assicurarsi che il browser dell'utente lo supporti, poiché si tratta di un'aggiunta che non tutti i browser hanno supportato storicamente. Vedi {{anch("Rilevamento sicuro del supporto opzionale")}} per i dettagli.

- -

Altre note

- -

Perchè usare addEventListener?

- -

addEventListener() è il modo per registrare un listener di eventi come specificato nel DOM W3C. I benefici sono i seguenti:

- - - -

Il modo alternativo, più vecchio per registrare i listener, è descritto di seguito.

- -

Aggiunta di un listener durante la spedizione dell'evento

- -

Se un {{domxref("EventListener")}} viene aggiunto ad un {{domxref("EventTarget")}} mentre sta elaborando un evento, quell'evento non attiva il listener. Tuttavia, lo stesso listener può essere attivato durante una fase successiva del flusso di eventi, come la fase di bubbling.

- -

Più listeners identici

- -

Se più EventListener indentici sono registrati sullo stesso EventTarget con gli stessi parametri, le istanze duplicate vengono scartate. Non causano l'EventListener da chiamare due volte e non devono essere rimossi manualmente con il metodo {{domxref("EventTarget.removeEventListener", "removeEventListener()")}}. Nota tuttavia che quando si utilizza una funzione anonima come gestore, tali listener NON saranno identici poiché le funzioni anonime non sono identiche anche se definite utilizzando il codice sorgente invariato SAME chiamato semplicemente ripetutamente, anche se in un ciclo. Tuttavia, definire ripetutamente la stessa funzione denominata in questi casi può essere più problematico. (vedi Problemi di memoria di seguito.)

- -

Il valore di this all'interno del gestore

- -

È spesso preferibile fare riferimento all'elemento su cui è stato attivato il gestore eventi, ad esempio quando si utilizza un gestore generico per un insieme di elementi simili.

- -

Se si collega un handler ad un elemento utilizzando addEventListener(), il valore di this all'interno del gestore è un riferimento all'elemento. È uguale al valore della proprietà currentTarget dell'argomento evento che viene passato al gestore.

- -
my_element.addEventListener('click', function (e) {
-  console.log(this.className)           // registra il className di my_element
-  console.log(e.currentTarget === this) // ritorna `true`
-})
-
- -

Come promemoria, le funzioni freccia non hanno il loro this contesto.

- -
my_element.addEventListener('click', (e) => {
-  console.log(this.className)           // WARNING: `this` is not `my_element`
-  console.log(e.currentTarget === this) // logs `false`
-})
- -

Se un gestore di eventi (ad esempio, {{domxref("Element.onclick", "onclick")}}) è specificato su un elemento nel codice sorgente HTML, il codice JavaScript nel valore dell'attributo viene effettivamente racchiuso in una funzione di gestore che associa il valore di this in modo coerente con addEventListener(); un'occorrenza di this all'interno del codice rappresenta un riferimento all'elemento.

- -
<table id="my_table" onclick="console.log(this.id);"><!-- `this` refers to the table; logs 'my_table' -->
-  ...
-</table>
-
- -

Si noti che il valore di this all'interno di una funzione, chiamato dal codice nel valore dell'attributo, si comporta come per regole standard. Questo è mostrato nel seguente esempio:

- -
<script>
-  function logID() { console.log(this.id); }
-</script>
-<table id="my_table" onclick="logID();"><!-- when called, `this` will refer to the global object -->
-  ...
-</table>
-
- -

Il valore di this all'interno di logID() è un riferimento all'oggetto globale {{domxref("Window")}} (o undefined nel caso della strict mode).

- -

Specificare this usando bind()

- -

Il metodo Function.prototype.bind() consente di specificare il valore che dovrebbe essere usato come this per tutte le chiamate a una determinata funzione. Ciò ti consente di bypassare facilmente i problemi in cui non è chiaro quale sarà this a seconda del contesto in cui è stata chiamata la tua funzione. Nota, tuttavia, che è necessario mantenere un riferimento per l'ascoltatore in modo da poterlo rimuovere in seguito.

- -

Questo è un esempio con e senza bind():

- -
var Something = function(element) {
-  // |this| is a newly created object
-  this.name = 'Something Good';
-  this.onclick1 = function(event) {
-    console.log(this.name); // undefined, as |this| is the element
-  };
-  this.onclick2 = function(event) {
-    console.log(this.name); // 'Something Good', as |this| is bound to newly created object
-  };
-  element.addEventListener('click', this.onclick1, false);
-  element.addEventListener('click', this.onclick2.bind(this), false); // Trick
-}
-var s = new Something(document.body);
-
- -

Un'altra soluzione sta utilizzando una funzione speciale chiamata handleEvent() per catturare qualsiasi evento:

- -
var Something = function(element) {
-  // |this| is a newly created object
-  this.name = 'Something Good';
-  this.handleEvent = function(event) {
-    console.log(this.name); // 'Something Good', as this is bound to newly created object
-    switch(event.type) {
-      case 'click':
-        // some code here...
-        break;
-      case 'dblclick':
-        // some code here...
-        break;
-    }
-  };
-
-  // Note that the listeners in this case are |this|, not this.handleEvent
-  element.addEventListener('click', this, false);
-  element.addEventListener('dblclick', this, false);
-
-  // You can properly remove the listeners
-  element.removeEventListener('click', this, false);
-  element.removeEventListener('dblclick', this, false);
-}
-var s = new Something(document.body);
-
- -

Un altro modo di gestire il riferimento a this è passare ad EventListener una funzione che chiama il metodo dell'oggetto che contiene i campi a cui è necessario accedere:

- -
class SomeClass {
-
-  constructor() {
-    this.name = 'Something Good';
-  }
-
-  register() {
-    var that = this;
-    window.addEventListener('keydown', function(e) {return that.someMethod(e);});
-  }
-
-  someMethod(e) {
-    console.log(this.name);
-    switch(e.keyCode) {
-      case 5:
-        // some code here...
-        break;
-      case 6:
-        // some code here...
-        break;
-    }
-  }
-
-}
-
-var myObject = new SomeClass();
-myObject.register();
- -

Legacy Internet Explorer e attachEvent

- -

Nelle versioni di Internet Explorer precedenti a IE 9, devi usare {{domxref("EventTarget.attachEvent", "attachEvent()")}}, piuttosto che lo standard addEventListener(). Per IE, modifichiamo l'esempio precedente per:

- -
if (el.addEventListener) {
-  el.addEventListener('click', modifyText, false);
-} else if (el.attachEvent)  {
-  el.attachEvent('onclick', modifyText);
-}
-
- -

C'è un inconveniente di attachEvent(): il valore di this sarà un riferimento all'oggetto window, invece dell'elemento su cui è stato chiamato.

- -

Il metodo attachEvent() potrebbe essere associato all'evento onresize per rilevare quando alcuni elementi di una pagina Web sono stati ridimensionati. L'evento proprietario mselementresize quando abbinato al metodo addEventListener di registrazione dei gestori di eventi, fornisce funzionalità simili a onresize, attivando quando alcuni elementi HTML vengono ridimensionati.

- -

Compatibilità

- -

Puoi lavorare attorno a addEventListener(), removeEventListener(), {{domxref("Event.preventDefault()")}}, e {{domxref("Event.stopPropagation()")}} non supportati da Internet Explorer 8 di usando il seguente codice all'inizio del tuo script. Il codice supporta l'uso di handleEvent() e anche l'evento {{event("DOMContentLoaded")}}.

- -
-

Note: useCapture non è supportato, in quanto IE 8 non ha alcun metodo alternativo. Il seguente codice aggiunge solo il supporto per IE 8. Questo polyfill di IE 8 funziona solo in modalità standard: è richiesta una dichiarazione doctype.

-
- -
(function() {
-  if (!Event.prototype.preventDefault) {
-    Event.prototype.preventDefault=function() {
-      this.returnValue=false;
-    };
-  }
-  if (!Event.prototype.stopPropagation) {
-    Event.prototype.stopPropagation=function() {
-      this.cancelBubble=true;
-    };
-  }
-  if (!Element.prototype.addEventListener) {
-    var eventListeners=[];
-
-    var addEventListener=function(type,listener /*, useCapture (will be ignored) */) {
-      var self=this;
-      var wrapper=function(e) {
-        e.target=e.srcElement;
-        e.currentTarget=self;
-        if (typeof listener.handleEvent != 'undefined') {
-          listener.handleEvent(e);
-        } else {
-          listener.call(self,e);
-        }
-      };
-      if (type=="DOMContentLoaded") {
-        var wrapper2=function(e) {
-          if (document.readyState=="complete") {
-            wrapper(e);
-          }
-        };
-        document.attachEvent("onreadystatechange",wrapper2);
-        eventListeners.push({object:this,type:type,listener:listener,wrapper:wrapper2});
-
-        if (document.readyState=="complete") {
-          var e=new Event();
-          e.srcElement=window;
-          wrapper2(e);
-        }
-      } else {
-        this.attachEvent("on"+type,wrapper);
-        eventListeners.push({object:this,type:type,listener:listener,wrapper:wrapper});
-      }
-    };
-    var removeEventListener=function(type,listener /*, useCapture (will be ignored) */) {
-      var counter=0;
-      while (counter<eventListeners.length) {
-        var eventListener=eventListeners[counter];
-        if (eventListener.object==this && eventListener.type==type && eventListener.listener==listener) {
-          if (type=="DOMContentLoaded") {
-            this.detachEvent("onreadystatechange",eventListener.wrapper);
-          } else {
-            this.detachEvent("on"+type,eventListener.wrapper);
-          }
-          eventListeners.splice(counter, 1);
-          break;
-        }
-        ++counter;
-      }
-    };
-    Element.prototype.addEventListener=addEventListener;
-    Element.prototype.removeEventListener=removeEventListener;
-    if (HTMLDocument) {
-      HTMLDocument.prototype.addEventListener=addEventListener;
-      HTMLDocument.prototype.removeEventListener=removeEventListener;
-    }
-    if (Window) {
-      Window.prototype.addEventListener=addEventListener;
-      Window.prototype.removeEventListener=removeEventListener;
-    }
-  }
-})();
- -

Il modo più antico per registrare i listeners

- -

addEventListener() è stato introdotto con la specifica DOM 2 Prima di allora, gli ascoltatori di eventi sono stati registrati come segue:

- -
// Passando un riferimento alla funzione - non aggiungere "()" dopo di esso, che chiamerebbe la funzione!
-el.onclick = modifyText;
-
-// Using a function expression
-element.onclick = function() {
-  // ... function logic ...
-};
-
- -

Questo metodo sostituisce il listener dell'evento click esistente sull'elemento se ce n'è uno. Altri eventi e gestori di eventi associati come blur (onblur) e keypress (onkeypress) si comportano in modo simile.

- -

Poiché era essenzialmente parte di {{glossary("DOM", "DOM 0")}}, questa tecnica per aggiungere listener di eventi è ampiamente supportata e non richiede uno speciale codice cross-browser. Viene normalmente utilizzato per registrare dinamicamente i listener di eventi a meno che non siano necessarie le funzionalità extra di addEventListener().

- -

Problemi di memoria

- -
var els = document.getElementsByTagName('*');
-
-
-// Case 1
-for(var i = 0; i < els.length; i++) {
-  els[i].addEventListener("click", function(e){/* do something */}, false);
-}
-
-
-// Case 2
-function processEvent(e) {
-  /* do something */
-}
-
-for(var i = 0; i < els.length; i++){
-  els[i].addEventListener("click", processEvent, false);
-}
-
- -

Nel primo caso sopra, viene creata una nuova funzione (anonima) di gestione con ogni iterazione del ciclo. Nel secondo caso, la stessa funzione dichiarata in precedenza viene utilizzata come gestore di eventi, il che si traduce in un minore consumo di memoria poiché è stata creata una sola funzione di gestore. Inoltre, nel primo caso, non è possibile chiamare {{domxref("EventTarget.removeEventListener", "removeEventListener()")}} perché non viene mantenuto alcun riferimento alla funzione anonima (o qui, non mantenuto a nessuna delle più funzioni anonime che il loop potrebbe creare.) Nel secondo caso, è possibile eseguire myElement.removeEventListener("click", processEvent, false) perchè processEvent è il riferimento alla funzione.

- -

In realtà, per quanto riguarda il consumo di memoria, la mancanza di mantenere un riferimento alla funzione non è il vero problema; piuttosto è la mancanza di mantenere un riferimento di funzione STATICO. In entrambi i casi di problemi di seguito, viene mantenuto un riferimento alla funzione, ma poiché viene ridefinito a ogni iterazione, non è statico. Nel terzo caso, il riferimento alla funzione anonima viene riassegnato ad ogni iterazione. Nel quarto caso, l'intera definizione di funzione è invariata, ma viene ancora ripetutamente definita come se fosse nuova (a meno che non fosse [[promoted]] dal compilatore) e quindi non sia statica. Pertanto, sebbene sembrino essere semplicemente [[Multiple identifier event listers]], in entrambi i casi ogni iterazione creerà invece un nuovo listener con il proprio riferimento univoco alla funzione del gestore. Tuttavia, poiché la definizione della funzione stessa non cambia, la STESSA funzione può ancora essere chiamata per ogni listener duplicato (specialmente se il codice viene ottimizzato).

- -

Anche in entrambi i casi, poiché il riferimento alla funzione è stato mantenuto ma ripetutamente ridefinito con ogni aggiunta, l'istruzione remove di sopra può ancora rimuovere un listener, ma ora solo l'ultimo aggiunto.

- -
// Solo a scopo illustrativo: nota che "MISTAKE" di [j] per [i] causando così l'associazione di tutti gli eventi desiderati allo STESSO elemento
-
-// Case 3
-for (var i = 0, j = 0 ; i < els.length ; i++) {
-  /* do lots of stuff with */
-  els[j].addEventListener("click", processEvent = function(e){/* do something */}, false);
-}
-
-// Case 4
-for (var i = 0, j = 0 ; i < els.length ; i++) {
-  /* do lots of stuff with j */
-  function processEvent(e){/* do something */};
-  els[j].addEventListener("click", processEvent, false);
-}
- -

Miglioramento delle prestazioni di scorrimento con i listeners passivi

- -

Secondo la specifica, il valore predefinito per l'opzione passive è sempre falso. Tuttavia, questo introduce il potenziale per gli ascoltatori di eventi che gestiscono determinati eventi di tocco (tra gli altri) per bloccare il thread principale del browser mentre sta tentando di gestire lo scrolling, con conseguente enorme riduzione delle prestazioni durante la gestione dello scorrimento.

- -

Per evitare questo problema, alcuni browser (in particolare, Chrome e Firefox) hanno modificato il valore predefinito dell'opzione passive in true per gli eventi {{event("touchstart")}} e {{event("touchmove")}} sui nodi a livello del documento {{domxref("Window")}}, {{domxref("Document")}}, e {{domxref("Document.body")}}. Questo impedisce al listener di eventi di essere chiamato, quindi non può bloccare il rendering della pagina mentre l'utente sta scorrendo.

- -
-

Note: Vedi la tabella di compatibilità qui sotto se hai bisogno di sapere quali browser (e / o quali versioni di quei browser) implementano questo comportamento alterato.

-
- -

Puoi sovrascrivere questo comportamento impostando esplicitamente il valore di passive a false, come mostrato qui:

- -
/* Feature detection */
-var passiveIfSupported = false;
-
-try {
-  window.addEventListener("test", null, Object.defineProperty({}, "passive", { get: function() { passiveIfSupported = { passive: true }; } }));
-} catch(err) {}
-
-window.addEventListener('scroll', function(event) {
-  /* do something */
-  // can't use event.preventDefault();
-}, passiveIfSupported );
-
- -

Nei browser meno recenti che non supportano il parametro options su addEventListener(), il tentativo di utilizzarlo impedisce l'utilizzo dell'argomento useCapture senza utilizzare correttamente il rilevamento delle funzionalità.

- -

Non è necessario preoccuparsi del valore di passive per l'evento di base {{event("scroll")}}. Poiché non può essere annullato, i listener di eventi non possono comunque bloccare il rendering della pagina.

- -

Specifiche

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificazioneStatoCommento
{{SpecName("DOM WHATWG", "#dom-eventtarget-addeventlistener", "EventTarget.addEventListener()")}}{{Spec2("DOM WHATWG")}} 
{{SpecName("DOM4", "#dom-eventtarget-addeventlistener", "EventTarget.addEventListener()")}}{{Spec2("DOM4")}} 
{{SpecName("DOM2 Events", "#Events-EventTarget-addEventListener", "EventTarget.addEventListener()")}}{{Spec2("DOM2 Events")}}Definizione inziale
- -

Compatibilità con i browser

- - - -

{{Compat("api.EventTarget.addEventListener", 3)}}

- -

Vedi anche

- - diff --git a/files/it/web/api/element/childnodes/index.html b/files/it/web/api/element/childnodes/index.html deleted file mode 100644 index f56bcc4380..0000000000 --- a/files/it/web/api/element/childnodes/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: Node.childNodes -slug: Web/API/Element/childNodes -translation_of: Web/API/Node/childNodes ---- -
-
{{APIRef("DOM")}}
-
- -

La proprietà di sola lettura Node.childNodes restituisce una {{domxref("NodeList")}} dinamica di {{domxref("Node","nodi")}} figli dell'elemento dato in cui il primo nodo figlio viene assegnato all'indice 0.

- -

Sintassi

- -
var nodeList = elementNodeReference.childNodes;
-
- -

Esempi

- -

Utilizzo semplice

- -
// parg è un riferimento a un elemento <p>
-
-// Innanzitutto controlliamo che l'elemento abbia dei nodi figli
-if (parg.hasChildNodes()) {
-  var children = parg.childNodes;
-
-  for (var i = 0; i < children.length; i++) {
-    // fare qualcosa con ogni bambino da children[i]
-    // NOTA: l'elenco è dinamico, l'aggiunta o la rimozione di bambini modificherà l'elenco
-  }
-}
- -

Rimuovi tutti i bambini da un nodo

- -
// Questo è un modo per rimuovere tutti i bambini da una
-// finestra di nodo è un riferimento ad un oggetto
-
-while (box.firstChild) {
-    //L'elenco è DINAMICO, quindi indicizzerà nuovamente ogni chiamata
-    box.removeChild(box.firstChild);
-}
- -

Appunti

- -

Gli elementi nella raccolta di nodi sono oggetti e non stringhe. Per ottenere dati da oggetti nodo, usa le loro proprietà (ad esempio elementNodeReference.childNodes[1].nodeName per ottenere il nome, ecc.).

- -

L'oggetto document ha 2 figli: la dichiarazione Doctype e l'elemento root, in genere documentElement. (Nei documenti (X)HTML questo è l'elemento HTML.)

- -

childNodes include tutti i nodi figli, inclusi nodi non-elemento come nodi di testo e commenti. Per ottenere una raccolta di soli elementi, usa {{domxref("ParentNode.children")}}.

- -

Specifiche

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificaStatoCommento
{{SpecName('DOM WHATWG', '#dom-node-childnodes', 'Node.childNodes')}}{{Spec2('DOM WHATWG')}}Nessun cambiamento
{{SpecName('DOM3 Core', 'core.html#ID-1451460987', 'Node.childNodes')}}{{Spec2('DOM3 Core')}}Nessun cambiamento
{{SpecName('DOM2 Core', 'core.html#ID-1451460987', 'Node.childNodes')}}{{Spec2('DOM2 Core')}}Nessun cambiamento
{{SpecName('DOM1', 'level-one-core.html#ID-1451460987', 'Node.childNodes')}}{{Spec2('DOM1')}}Definizione iniziale
- -

Compatibilità con i browser

- - - -

{{Compat("api.Node.childNodes")}}

- -

Vedi anche

- - diff --git a/files/it/web/api/element/firstchild/index.html b/files/it/web/api/element/firstchild/index.html deleted file mode 100644 index b5052f5dfe..0000000000 --- a/files/it/web/api/element/firstchild/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: Node.firstChild -slug: Web/API/Element/firstChild -tags: - - API - - DOM - - Node - - Proprietà - - Referenza -translation_of: Web/API/Node/firstChild ---- -
{{APIRef("DOM")}}
- -

La proprietà di sola lettura Node.firstChild restituisce il primo figlio del nodo nell'albero o null se il nodo non ha figli. Se il nodo è un Document, restituisce il primo nodo nell'elenco dei suoi figli diretti.

- -

Sintassi

- -
var childNode = node.firstChild;
-
- -

Esempio

- -

Questo esempio dimostra l'uso di firstChild e il modo in cui i nodi degli spazi bianchi potrebbero interferire con l'utilizzo di questa proprietà.

- -
<p id="para-01">
-  <span>First span</span>
-</p>
-
-<script>
-  var p01 = document.getElementById('para-01');
-  console.log(p01.firstChild.nodeName);
-</script>
- -

In quanto sopra, la console console mostrerà '#text' perché viene inserito un nodo di testo per mantenere lo spazio bianco tra la fine dei tag di apertura <p> e <span>. Qualsiasi spazio bianco creerà un nodo #text da un singolo spazio a più spazi, ritorni, schede e così via.

- -

Un altro nodo #text viene inserito tra i tag di chiusura </span> e </p>.

- -

Se questo spazio viene rimosso dall'origine, i nodi #text non vengono inseriti e l'elemento span diventa il primo figlio del paragrafo.

- -
<p id="para-01"><span>First span</span></p>
-
-<script>
-  var p01 = document.getElementById('para-01');
-  console.log(p01.firstChild.nodeName);
-</script>
-
- -

Ora l'avviso mostrerà 'SPAN'.

- -

Per evitare il problema con node.firstChild che restituisce i nodi #text o #comment, {{domxref("ParentNode.firstElementChild")}} può essere utilizzato per restituire solo il primo nodo elemento. Tuttavia, node.firstElementChild richiede uno shim per Internet Explorer 9 e versioni precedenti.

- -

Specifiche

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificaStatoCommentp
{{SpecName('DOM WHATWG', '#dom-node-firstchild', 'Node.firstChild')}}{{Spec2('DOM WHATWG')}}Nessun cambiamento
{{SpecName('DOM3 Core', 'core.html#ID-169727388', 'Node.firstChild')}}{{Spec2('DOM3 Core')}}Nessun cambiamento
{{SpecName('DOM2 Core', 'core.html#ID-169727388', 'Node.firstChild')}}{{Spec2('DOM2 Core')}}Nessun cambiamento
{{SpecName('DOM1', 'level-one-core.html#ID-169727388', 'Node.firstChild')}}{{Spec2('DOM1')}}Definizione iniziale
- -

Compatibilità con i browser

- - - -

{{Compat("api.Node.firstChild")}}

diff --git a/files/it/web/api/element/nodename/index.html b/files/it/web/api/element/nodename/index.html deleted file mode 100644 index 2030226b37..0000000000 --- a/files/it/web/api/element/nodename/index.html +++ /dev/null @@ -1,116 +0,0 @@ ---- -title: Node.nodeName -slug: Web/API/Element/nodeName -tags: - - API - - DOM - - Gecko - - NeedsSpecTable - - Node - - Property - - Read-only -translation_of: Web/API/Node/nodeName ---- -
{{APIRef("DOM")}}
- -

La proprietà di sola lettura nodeName restituisce il nome dell'attuale {{domxref("Node")}} come stringa.

- -

Sintassi

- -
var str = node.nodeName;
-
- -

Valore

- -

Una {{domxref("DOMString")}}. I valori per i diversi tipi di nodi sono:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Interfacciavalore nodeName
{{domxref("Attr")}}Il valore di {{domxref("Attr.name")}}
{{domxref("CDATASection")}}"#cdata-section"
{{domxref("Comment")}}"#comment"
{{domxref("Document")}}"#document"
{{domxref("DocumentFragment")}}"#document-fragment"
{{domxref("DocumentType")}}Il valore di {{domxref("DocumentType.name")}}
{{domxref("Element")}}Il valore di {{domxref("Element.tagName")}}
{{domxref("Entity")}}Il nome dell'entità
{{domxref("EntityReference")}}Il nome del riferimento all'entità
{{domxref("Notation")}}Il nome della notazione
{{domxref("ProcessingInstruction")}}Il valore di {{domxref("ProcessingInstruction.target")}}
{{domxref("Text")}}"#text"
- -

Esempio

- -

Dato il seguente markup:

- -
<div id="d1">hello world</div>
-<input type="text" id="t">
-
- -

e il seguente script:

- -
var div1 = document.getElementById("d1");
-var text_field = document.getElementById("t");
-
-text_field.value = div1.nodeName;
-
- -

IIn XHTML (o in qualsiasi altro formato XML), il valore di text_field sarebbe letto "div". Tuttavia, in HTML, il valore di text_field sarebbe letto "DIV", poichè nodeName e tagName restituiscono in maiuscolo gli elementi HTML nei DOM contrassegnati come documenti HTML. Read more details on nodeName case sensitivity in different browsers.

- -

Nota che la proprietà {{domxref("Element.tagName")}} potrebbe essere stata utilizzata, poiché nodeName ha lo stesso valore di tagName per un elemento. Tieni presente, tuttavia, che nodeName ritornerà "#text" per i nodi di testo mentre tagName restituirà undefined.

- -

Specifiche

- - - -

Compatibilità con i browser

- - - -

{{Compat("api.Node.nodeName")}}

diff --git a/files/it/web/api/element/nodetype/index.html b/files/it/web/api/element/nodetype/index.html deleted file mode 100644 index fba395288a..0000000000 --- a/files/it/web/api/element/nodetype/index.html +++ /dev/null @@ -1,178 +0,0 @@ ---- -title: Node.nodeType -slug: Web/API/Element/nodeType -tags: - - API - - DOM - - Proprietà - - Referenza -translation_of: Web/API/Node/nodeType ---- -
{{APIRef("DOM")}}
- -

La proprietà di sola lettura Node.nodeType è un numero intero che identifica il nodo. Distingue tra diversi tipi di nodi tra loro, come {{domxref("Element", "elements")}}, {{domxref("Text", "text")}} and {{domxref("Comment", "comments")}}.

- -

Sintassi

- -
var type = node.nodeType;
-
- -

Restituisce un numero intero che specifica il tipo del nodo. I valori possibili sono elencati in {{anch("Tipi di nodi costanti")}}.

- -

Constanti

- -

Tipi di nodi costanti

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ConstanteValoreDescrizione
Node.ELEMENT_NODE1Un nodo {{domxref("Element")}} come {{HTMLElement("p")}} o {{HTMLElement("div")}}.
Node.TEXT_NODE3L'attuale {{domxref("Text")}} dentro un {{domxref("Element")}} o {{domxref("Attr")}}.
Node.CDATA_SECTION_NODE4Una {{domxref("CDATASection")}}, ad esempio <!CDATA[[ … ]]>.
Node.PROCESSING_INSTRUCTION_NODE7Una {{domxref("ProcessingInstruction")}} di un documento XML, come <?xml-stylesheet … ?>.
Node.COMMENT_NODE8Un nodo {{domxref("Comment")}}, come <!-- … -->.
Node.DOCUMENT_NODE9Un nodo {{domxref("Document")}}.
Node.DOCUMENT_TYPE_NODE10Un nodo {{domxref("DocumentType")}}, come <!DOCTYPE html>.
Node.DOCUMENT_FRAGMENT_NODE11Un nodo {{domxref("DocumentFragment")}}.
- -

Tipi di nodo deprecati {{deprecated_inline()}}

- -
-

Le seguenti costanti sono state deprecate e non dovrebbero essere più utilizzate.

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ConstanteValoreDescrizione
Node.ATTRIBUTE_NODE2Un {{domxref("Attr", "Attribute")}} di un {{domxref("Element")}}. Gli attributi non implementano più l'interfaccia {{domxref("Node")}} dal {{SpecName("DOM4")}}.
Node.ENTITY_REFERENCE_NODE5Un nodo di riferimento di entità XML, come &foo;. Rimosso nel {{SpecName("DOM4")}}.
Node.ENTITY_NODE6Un nodo XML <!ENTITY …>. Rimosso nel {{SpecName("DOM4")}}.
Node.NOTATION_NODE12Un nodo XML <!NOTATION …>. Rimosso nel {{SpecName("DOM4")}}.
- -

Esempi

- -

Diversi tipi di nodi

- -
document.nodeType === Node.DOCUMENT_NODE; // true
-document.doctype.nodeType === Node.DOCUMENT_TYPE_NODE; // true
-
-document.createDocumentFragment().nodeType === Node.DOCUMENT_FRAGMENT_NODE; // true
-
-var p = document.createElement("p");
-p.textContent = "Once upon a time…";
-
-p.nodeType === Node.ELEMENT_NODE; // true
-p.firstChild.nodeType === Node.TEXT_NODE; // true
-
- -

Commenti

- -

Questo esempio controlla se il primo nodo all'interno dell'elemento del documento è un commento e visualizza un messaggio in caso contrario.

- -
var node = document.documentElement.firstChild;
-if (node.nodeType !== Node.COMMENT_NODE) {
-  console.warn("Dovresti commentare il tuo codice!");
-}
-
- -

Specifiche

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificaStatoCommento
{{SpecName('DOM WHATWG', '#dom-node-nodetype', 'Node.nodeType')}}{{Spec2('DOM WHATWG')}}Deprecated ATTRIBUTE_NODE, ENTITY_REFERENCE_NODE and NOTATION_NODE types.
{{SpecName('DOM3 Core', 'core.html#ID-1950641247', 'Node.nodeType')}}{{Spec2('DOM3 Core')}}Nessun cambiamento.
{{SpecName('DOM2 Core', 'core.html#ID-111237558', 'Node.nodeType')}}{{Spec2('DOM2 Core')}}Nessun cambiamento.
{{SpecName('DOM1', 'level-one-core.html#ID-111237558', 'Node.nodeType')}}{{Spec2('DOM1')}}Definizione iniziale.
- -

Compatibilità con i browser

- - - -

{{Compat("api.Node.nodeType")}}

diff --git a/files/it/web/api/element/nodevalue/index.html b/files/it/web/api/element/nodevalue/index.html deleted file mode 100644 index 547ba77939..0000000000 --- a/files/it/web/api/element/nodevalue/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: element.nodeValue -slug: Web/API/Element/nodeValue -tags: - - DOM - - Gecko - - Reference_del_DOM_di_Gecko - - Tutte_le_categorie -translation_of: Web/API/Node/nodeValue ---- -

{{ ApiRef() }}

-

Sommario

-

Restituisce il valore del nodo corrente.

-

Sintassi

-
valore = document.nodeValue
-
-

valore è una stringa contenente il valore del nodo corrente, se esiste.

-

Note

-

La proprietà nodeValue dell'intero documento, restituisce null. Per un nodo di tipo testo, commento o CDATA, nodeValue restituisce il contenuto del nodo. Per i nodi attributo, restituisce il valore dell'attributo.

-

La tabella seguente mostra i valori restituiti per i vari tipi di elementi:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Attril valore dell'attributo
CDATASectionil contenuto della sezione CDATA
Commentil commento
Documentnull
DocumentFragmentnull
DocumentTypenull
Elementnull
NamedNodeMapnull
EntityReferencenull
Notationnull
ProcessingInstructionl'intero contenuto, escluso il target
Textil contenuto del nodo testo
-

Quando nodeValue è impostato a null, reimpostarlo non ha alcun effetto.

-

Specifiche

-

nodeValue

diff --git a/files/it/web/api/element/parentnode/index.html b/files/it/web/api/element/parentnode/index.html deleted file mode 100644 index 03e89aa432..0000000000 --- a/files/it/web/api/element/parentnode/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: Node.parentNode -slug: Web/API/Element/parentNode -tags: - - API - - DOM - - Gecko - - Proprietà -translation_of: Web/API/Node/parentNode ---- -
-
{{APIRef("DOM")}}
-
- -

La proprietà di sola lettura Node.parentNode restituisce il genitore del nodo specificato nell'albero DOM.

- -

Sintassi

- -
parentNode = node.parentNode
-
- -

parentNode è il genitore del nodo corrente. Il genitore di un elemento è un nodo Element, un nodo Document, o un nodo DocumentFragment.

- -

Esempio

- -
if (node.parentNode) {
-  // rimuovi un nodo dall'albero, a meno che
-  // non sia già nell'albero
-  node.parentNode.removeChild(node);
-}
- -

Note

- -

I nodi Document e DocumentFragment non possono mai avere un genitore, quindi parentNode ritornerà sempre null.

- -

Restituisce anche null se il nodo è appena stato creato e non è ancora collegato all'albero.

- -

Compatibilità con i browser

- - - -

{{Compat("api.Node.parentNode")}}

- -

Specifiche

- - - -

Vedi anche

- - diff --git a/files/it/web/api/element/prefix/index.html b/files/it/web/api/element/prefix/index.html deleted file mode 100644 index 3371ff1f8d..0000000000 --- a/files/it/web/api/element/prefix/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: element.prefix -slug: Web/API/Element/prefix -tags: - - DOM - - Gecko - - Reference_del_DOM_di_Gecko - - Tutte_le_categorie -translation_of: Web/API/Node/prefix ---- -

{{ ApiRef() }}

-

Sommario

-

Restituisce il namespace del nodo, oppure null se il nodo non ha alcun prefisso.

-

Sintassi

-
stringa = element.prefix
-element.prefix =stringa
-
-

Esempi

-

Il seguente esempio produce il messaggio "x".

-
<x:div onclick="alert(this.prefix)"/>
-
-

Note

-

Questa proprietà funziona solo quando si utilizza un interprete in grado di gestire i namespace, per esempio quando un documento viene presentato con il tipo mime XML. Non funziona invece con i documenti HTML.

-

Specifiche

-

Node.prefix (introdotto in DOM2).

-

{{ languages( { "en": "en/DOM/element.prefix", "ja": "ja/DOM/element.prefix", "pl": "pl/DOM/element.prefix" } ) }}

diff --git a/files/it/web/api/element/textcontent/index.html b/files/it/web/api/element/textcontent/index.html deleted file mode 100644 index 137c76a3eb..0000000000 --- a/files/it/web/api/element/textcontent/index.html +++ /dev/null @@ -1,138 +0,0 @@ ---- -title: Node.textContent -slug: Web/API/Element/textContent -tags: - - API - - Command API - - DOM - - Proprietà - - Referenza -translation_of: Web/API/Node/textContent ---- -
{{APIRef("DOM")}}
- -

La proprietà textContent dell'interfaccia {{domxref("Node")}} rappresenta il contenuto del testo di un nodo e dei suoi discendenti.

- -
-

Note: textContent e {{domxref("HTMLElement.innerText")}} sono facilmente confusi, ma i due sono diversi in modi molto importanti.

-
- -

Sintassi

- -
var text = Node.textContent;
-Node.textContent = string;
-
- -

Valore di ritorno

- -

Una stringa o null.

- -

Descrizione

- -

Quando ottieni questa proprietà:

- - - -

L'impostazione di textContent su un nodo rimuove tutti i figli del nodo e li sostituisce con un singolo nodo di testo con il valore di stringa specificato.

- -

Differenze da innerText

- -

Non lasciarti confondere dalle differenze tra Node.textContent e {{domxref("HTMLElement.innerText")}}. Anche se i nomi sembrano simili, ci sono differenze importanti:

- - - -

Differenze da innerHTML

- -

{{domxref("Element.innerHTML")}} restituisce HTML, come indica il nome. A volte le persone usano innerHTML per recuperare o scrivere testo all'interno di un elemento, ma textContent ha prestazioni migliori perché il suo valore non viene analizzato come HTML. Inoltre, l'utilizzo di textContent può impedire gli attacchi XSS.

- -

Esempi

- -

Dato questo codice HTML:

- -
<div id="divA">Questo è <span>un</span> testo!</div>
- -

...puoi usare textContent per ottenere il contenuto del testo dell'elemento:

- -
let text = document.getElementById('divA').textContent;
-// La variabile text è ora: "Questo è un testo!"
- -

...o imposta il contenuto del testo dell'elemento:

- -
document.getElementById('divA').textContent = 'Questo testo è diverso!';
-// L'HTML per divA è ora:
-// <div id="divA">Questo testo è diverso!</div>
-
- -

Polyfill per IE8

- -
// Source: Eli Grey @ https://eligrey.com/blog/post/textcontent-in-ie8
-if (Object.defineProperty
-  && Object.getOwnPropertyDescriptor
-  && Object.getOwnPropertyDescriptor(Element.prototype, "textContent")
-  && !Object.getOwnPropertyDescriptor(Element.prototype, "textContent").get) {
-  (function() {
-    var innerText = Object.getOwnPropertyDescriptor(Element.prototype, "innerText");
-    Object.defineProperty(Element.prototype, "textContent",
-     // Passare innerText o innerText.get direttamente non funziona,
-     // è richiesta la funzione wrapper.
-     {
-       get: function() {
-         return innerText.get.call(this);
-       },
-       set: function(s) {
-         return innerText.set.call(this, s);
-       }
-     }
-   );
-  })();
-}
-
- -

Compatibilità con i browser

- - - -

{{Compat("api.Node.textContent")}}

- -

Specifiche

- - - - - - - - - - - - - - - - - - - - - - - - -
SpecificaStatoCommento
{{SpecName('DOM WHATWG','#dom-node-textcontent','Node.textContent')}}{{Spec2('DOM WHATWG')}}Nessun cambiamento vs. DOM4
{{SpecName('DOM4','#dom-node-textcontent','Node.textContent')}}{{Spec2('DOM4')}}
{{SpecName('DOM3 Core','core.html#Node3-textContent','Node.textContent')}}{{Spec2('DOM3 Core')}}Introdotto
- -

Vedi anche

- - diff --git a/files/it/web/api/event/altkey/index.html b/files/it/web/api/event/altkey/index.html deleted file mode 100644 index 02412cfe6c..0000000000 --- a/files/it/web/api/event/altkey/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: event.altKey -slug: Web/API/Event/altKey -tags: - - DOM - - Gecko - - Reference_del_DOM_di_Gecko - - Tutte_le_categorie -translation_of: Web/API/MouseEvent/altKey -translation_of_original: Web/API/event.altKey ---- -

{{ ApiRef() }}

-

Sommario

-

Indica se il tasto ALT era premuto mentre l'evento si verificava.

-

Syntax

-
bool = event.altKey
-
-

bool vale true se il tasto ALT era premuto, altrimenti false.

-

Esempio

-
<html>
-<head>
-<title>esempio tasto ALT</title>
-
-<script type="text/javascript">
-
-function mostraCarattere(e){
-  alert(
-    "Tasto premuto: " + String.fromCharCode(e.charCode) + "\n"
-    + "Codice carattere: " + e.charCode + "\n"
-    + "Tasto ALT premuto: " + e.altKey + "\n"
-  );
-}
-
-</script>
-</head>
-
-<body onkeypress="mostraCarattere(event);">
-<p>
-Prova a premere un tasto tenendo premuto ALT e prova a premere un tasto senza premere ALT.<br />
-Puoi anche provare a premere ALT+SHIFT.
-</p>
-</body>
-</html>
-
-

Specifiche

-

altKey

-

{{ languages( { "en": "en/DOM/event.altKey", "pl": "pl/DOM/event.altKey" } ) }}

diff --git a/files/it/web/api/event/button/index.html b/files/it/web/api/event/button/index.html deleted file mode 100644 index 7c1f181858..0000000000 --- a/files/it/web/api/event/button/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: event.button -slug: Web/API/Event/button -tags: - - DOM - - Gecko - - Reference_del_DOM_di_Gecko - - Tutte_le_categorie -translation_of: Web/API/MouseEvent/button -translation_of_original: Web/API/event.button ---- -

{{ ApiRef() }}

-

Sommario

-

Restituisce un intero che indica quale tasto del mouse è stato premuto.

-

Sintassi

-
var codiceBottone = event.button;
-
-

codiceBottone può assumere uno dei seguenti valori:

- -

L'ordine dei bottoni è inverso se il mouse è configurato per l'utilizzo da parte dei mancini.

-

Esempio

-
<script type="text/javascript">
-
-function qualeTasto(e)
-{
-  var e = e || window.event;
-  var codiceTasto;
-
-  if ('object' == typeof e){
-    codiceTasto = e.button;
-
-    switch (codiceTasto){
-      case 0  : alert('Hai premuto il tasto sinistro');
-                break;
-      case 1  : alert('Hai premuto il tasto centrale');
-                break;
-      case 2  : alert('Hai premuto il tasto destro');
-                break;
-      default : alert('Codice sconosciuto: ' + btnCode);
-    }
-  }
-}
-
-</script>
-
-<p onclick="qualeBottone(event);">Clicca con il mouse...</p>
-
-
-

Note

-

Poichè i click del mouse spesso vengono intercettati dall'interfaccia utente, in alcuni casi potrebbe essere difficile rilevare la pressione di un bottone che non sia quello standard (generalmente il sinistro).

-

Gli utenti possono cambiare la configurazione dei tasti del loro dispositivo di puntamento in modo tale che se il valore di codiceBottone è 0, questo non è causato dal tasto che si trova fisicamente a sinistra, ma questo non ha molta importanza.

-

Specifiche

-

DOM 2 Events Specification: button

-

{{ languages( { "en": "en/DOM/event.button", "pl": "pl/DOM/event.button" } ) }}

diff --git a/files/it/web/api/event/charcode/index.html b/files/it/web/api/event/charcode/index.html deleted file mode 100644 index fb785e722e..0000000000 --- a/files/it/web/api/event/charcode/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: event.charCode -slug: Web/API/Event/charCode -tags: - - DOM - - Gecko - - Reference_del_DOM_di_Gecko - - Tutte_le_categorie -translation_of: Web/API/KeyboardEvent/charCode ---- -

{{ ApiRef() }}

-

Sommario

-

Restituisce il valore Unicode del tasto carattere che è stato premuto e ha scatenato un evento keypress.

-

Sintassi

-
valore = event.charCode
-
- -

Esempio

-
<html>
-<head>
-<title>esempio di charCode</title>
-
-<script type="text/javascript">
-
-function mostraCarattere(e)
-{
-alert("Tasto premuto: " + String.fromCharCode(e.charCode) + "\n"
-      + "Codice carattere: " + e.charCode);
-}
-
-</script>
-</head>
-
-<body onkeypress="mostraCarattere(event);">
-<p>Premere un qualsiasi tasto carattere.</p>
-</body>
-</html>
-
-

Note

-

In un evento keypress, il valore Unicode del tasto premuto viene registrato nella proprietà keyCode oppure nella proprietà charCode, mai in entrambe. Se il tasto premuto corrisponde a un carattere (per esempio 'a'), charCode assume il valore Unicode di quel carattere (che è diverso per le maiuscole e per le minuscole). In caso contrario, il codice del tasto premuto viene registrato nella proprietà keyCode.

-

charCode non viene mai impostato durante gli eventi keydown e keyup. In questi casi, viene impostato keyCode.

-

Per leggere il codice del tasto indipendentemente dal fatto che esso si trovi in keyCode o in charCode, si può utilizzare la proprietà which.

-

I caratteri inseriti attraverso un IME non vengono registrati nè in keyCode nè in charCode.

-

Per una lista dei possibili valori di charCode e per conoscere i tasti ai quali sono associati, vedere l'esempio Reference del DOM di Gecko:Esempi #Example 7: Mostrare le costanti dell'oggetto Event.

-

Specifiche

-

Non è parte di alcuna specifica. Si veda nsIDOMKeyEvent

-

{{ languages( { "en": "en/DOM/event.charCode", "pl": "pl/DOM/event.charCode" } ) }}

diff --git a/files/it/web/api/event/ctrlkey/index.html b/files/it/web/api/event/ctrlkey/index.html deleted file mode 100644 index 195374d673..0000000000 --- a/files/it/web/api/event/ctrlkey/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: event.ctrlKey -slug: Web/API/Event/ctrlKey -tags: - - DOM - - Gecko - - Reference_del_DOM_di_Gecko - - Tutte_le_categorie -translation_of: Web/API/MouseEvent/ctrlKey -translation_of_original: Web/API/event.ctrlKey ---- -

{{ ApiRef() }}

-

Sommario

-

Indica se il tasto CTRL è stato premuto mentre l'evento si verificava.

-

Sintassi

-
bool = event.ctrlKey
-
-

bool vale true se il tasto CTRL era premuto, altrimenti false.

-

Esempio

-
<html>
-<head>
-<title>esempio tasto control</title>
-
-<script type="text/javascript">
-
-function mostraCarattere(e){
-  alert(
-    "Tasto premuto: " + String.fromCharCode(e.charCode) + "\n"
-    + "Codice carattere: " + e.charCode + "\n"
-    + "Tasto CTRL premuto: " + e.ctrlKey + "\n"
-  );
-}
-
-</script>
-</head>
-
-<body onkeypress="mostraCarattere(event);">
-<p>Prova a premere un tasto tenendo premuto CTRL e prova a premere un tasto senza premere CTRL.<br />
-Puoi anche provare a premere CTRL+SHIFT.</p>
-</body>
-</html>
-
-

Specifiche

-

ctrlKey

-

{{ languages( { "en": "en/DOM/event.ctrlKey", "pl": "pl/DOM/event.ctrlKey" } ) }}

diff --git a/files/it/web/api/event/ischar/index.html b/files/it/web/api/event/ischar/index.html deleted file mode 100644 index ae1edd3975..0000000000 --- a/files/it/web/api/event/ischar/index.html +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: event.isChar -slug: Web/API/Event/isChar -tags: - - DOM - - Gecko - - Reference_del_DOM_di_Gecko - - Tutte_le_categorie -translation_of: Web/API/UIEvent/isChar ---- -

{{ ApiRef() }}

-

Sommario

-

Restituisce un booleano che indica se è stato premuto un tasto carattere o meno.

-

Sintassi

-
bool = event.isChar
-
- -

Esempio

-
 if e.isChar
-   ripetiInput(e.type);
- }
-
-

Note

-

Alcune combinazioni di tasti potrebbero produrre degli eventi ma non produrre alcun carattere (per esempio CTRL+b). Quando questo accade, isChar restituisce false.

-

Attenzione: attualmente isChar è afflitto da un bug, a causa del quale il risultato è sempre false. Gli sviluppatori di Mozilla potrebbero correggere questo bug, ma potrebbero anche decidere di eliminare questa proprietà non standard.

-

Specifiche

-

Non è parte di alcuna specifica.

-

{{ languages( { "en": "en/DOM/event.isChar", "pl": "pl/DOM/event.isChar" } ) }}

diff --git a/files/it/web/api/event/keycode/index.html b/files/it/web/api/event/keycode/index.html deleted file mode 100644 index 40dac8122d..0000000000 --- a/files/it/web/api/event/keycode/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: event.keyCode -slug: Web/API/Event/keyCode -tags: - - DOM - - Gecko - - Reference_del_DOM_di_Gecko - - Tutte_le_categorie -translation_of: Web/API/KeyboardEvent/keyCode -translation_of_original: Web/API/event.keyCode ---- -

{{ ApiRef() }}

-

Sommario

-

Restituisce il valore Unicode di un tasto non-carattere che è stato premuto scatenando un evento keypress, oppure il valore di qualsiasi tasto premuto scatenando un qualsiasi altro evento relativo alla tastiera.

-

Sintassi

-
valore = event.keyCode
-
- -

Esempio

-
<html>
-<head>
-<title>esempio di keyCode</title>
-
-<script type="text/javascript">
-
-function mostraCodiceTasto(e)
-{
-alert("Codice del tasto premuto: " + e.keyCode + "\n");
-}
-
-</script>
-</head>
-
-<body onkeydown="mostraCodiceTasto(event);">
-<p>Premere un tasto qualsiasi.</p>
-</body>
-</html>
-
-

Note

-

In un evento keypress, il valore Unicode del tasto premuto viene registrato nella proprietà keyCode oppure nella proprietà charCode, mai in entrambe. Se il tasto premuto corrisponde a un carattere (per esempio 'a'), charCode assume il valore Unicode di quel carattere (che è diverso per le maiuscole e per le minuscole). In caso contrario, il codice del tasto premuto viene registrato nella proprietà keyCode.

-

charCode non viene mai impostato durante gli eventi keydown e keyup. In questi casi, viene impostato keyCode.

-

Per leggere il codice del tasto indipendentemente dal fatto che esso si trovi in keyCode o in charCode, si può utilizzare la proprietà which.

-

I caratteri inseriti attraverso un IME non vengono registrati nè in keyCode nè in charCode.

-

Per una lista dei possibili valori di charCode e per conoscere i tasti ai quali sono associati, vedere l'esempio Reference del DOM di Gecko:Esempi #Example 7: Mostrare le costanti dell'oggetto Event.

-

Specifiche

-

Non è parte di alcuna specifica. Si veda nsIDOMKeyEvent

-

{{ languages( { "en": "en/DOM/event.keyCode", "pl": "pl/DOM/event.keyCode" } ) }}

diff --git a/files/it/web/api/event/layerx/index.html b/files/it/web/api/event/layerx/index.html deleted file mode 100644 index 80dc20b35b..0000000000 --- a/files/it/web/api/event/layerx/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: event.layerX -slug: Web/API/Event/layerX -tags: - - DOM - - Gecko - - Reference_del_DOM_di_Gecko - - Tutte_le_categorie -translation_of: Web/API/UIEvent/layerX ---- -

{{ ApiRef() }}

-

Sommario

-

Restituisce la coordinata orizzontale del punto in cui si è scatenato l'evento, relativamente al layer corrente.

-

Sintassi

-
X = event.layerX
-
- -

Esempio

-
<html>
-<head>
-<title>esempio di pageX/pageY e layerX/layerY</title>
-
-<script type="text/javascript">
-
-function mostraCoordinate(evt){
-  var form = document.forms.form_coords;
-  var idPadre = evt.target.parentNode.id;
-  form.idPadre.value = idPadre;
-  form.coordinataXpagina.value = evt.pageX;
-  form.coordinataYpagina.value = evt.pageY;
-  form.coordinataXlayer.value = evt.layerX;
-  form.coordinataYlayer.value = evt.layerY;
-}
-
-</script>
-
-<style type="text/css">
-
- #d1 {
-  border: solid blue 1px;
-  padding: 20px;
- }
-
- #d2 {
-  position: absolute;
-  top: 180px;
-  left: 80%;
-  right:auto;
-  width: 40%;
-  border: solid blue 1px;
-  padding: 20px;
- }
-
- #d3 {
-  position: absolute;
-  top: 240px;
-  left: 20%;
-  width: 50%;
-  border: solid blue 1px;
-  padding: 10px;
- }
-
-</style>
-</head>
-
-<body onmousedown="mostraCoordinate(event)">
-
-<p>Per visualizzare le coordinate del mouse clicca in un qualunque punto della pagina.</p>
-
-<div id="d1">
-<span>Questo è un DIV non posizionato, quindi cliccando qui i valori di layerX e layerY
-saranno simili a quelli di pageX e pageY.
-</span>
-</div>
-
-<div id="d2">
-<span>Questo è un DIV posizionato, quindi cliccando qui i valori di layerX e layerY saranno relativi all'angolo in alto a sinistra di questo elemento. Si noti che le proprietà pageX e pageY restituiscono la posizione assoluta all'interno del documento, tenendo conto dello scorrimento della pagina.
-</span>
-
-<span>Fai scorrere ancora la pagina! Questo è un DIV posizionato, quindi cliccando qui i valori di layerX e layerY saranno relativi all'angolo in alto a sinistra di questo elemento. Si noti che le proprietà pageX e pageY restituiscono la posizione assoluta all'interno del documento, tenendo conto dello scorrimento della pagina.</span>
-</div>
-
-<div id="d3">
-<form name="form_coordinate">
- Id elemento padre: <input type="text" name="idPadre" size="7" /><br />
- pageX:<input type="text" name="coordinataXpagina" size="7" />
- pageY:<input type="text" name="coordinataYpagina" size="7" /><br />
- layerX:<input type="text" name="coordinataXlayer" size="7" />
- layerY:<input type="text" name="coordinataYlayer" size="7" />
-</form>
-</div>
-
-</body>
-</html>
-
-

Note

-

layerX tiene conto di eventuali scorrimenti orizzontali avvenuti nella pagina e restituisce un valore relativo all'intero documento, a meno che l'evento non avvenga all'interno di un elemento con posizione fissa; nel qual caso il valore restituito sarà relativo all'angolo in alto a sinistra dell'elemento.

-

Specifiche

-

DOM level 0. Non è parte di alcuna specifica.

-

{{ languages( { "en": "en/DOM/event.layerX", "pl": "pl/DOM/event.layerX" } ) }}

diff --git a/files/it/web/api/event/layery/index.html b/files/it/web/api/event/layery/index.html deleted file mode 100644 index 9bb4f99947..0000000000 --- a/files/it/web/api/event/layery/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: event.layerY -slug: Web/API/Event/layerY -tags: - - DOM - - Gecko - - Reference_del_DOM_di_Gecko - - Tutte_le_categorie -translation_of: Web/API/UIEvent/layerY ---- -

{{ ApiRef() }}

-

Sommario

-

Restituisce la coordinata verticale del punto in cui si è scatenato l'evento, relativamente al layer corrente.

-

Sintassi

-
Y = event.layerY
-
- -

Esempio

-
<html>
-<head>
-<title>esempio di pageX/pageY e layerX/layerY</title>
-
-<script type="text/javascript">
-
-function mostraCoordinate(evt){
-  var form = document.forms.form_coords;
-  var idPadre = evt.target.parentNode.id;
-  form.idPadre.value = idPadre;
-  form.coordinataXpagina.value = evt.pageX;
-  form.coordinataYpagina.value = evt.pageY;
-  form.coordinataXlayer.value = evt.layerX;
-  form.coordinataYlayer.value = evt.layerY;
-}
-
-</script>
-
-<style type="text/css">
-
- #d1 {
-  border: solid blue 1px;
-  padding: 20px;
- }
-
- #d2 {
-  position: absolute;
-  top: 180px;
-  left: 80%;
-  right:auto;
-  width: 40%;
-  border: solid blue 1px;
-  padding: 20px;
- }
-
- #d3 {
-  position: absolute;
-  top: 240px;
-  left: 20%;
-  width: 50%;
-  border: solid blue 1px;
-  padding: 10px;
- }
-
-</style>
-</head>
-
-<body onmousedown="mostraCoordinate(event)">
-
-<p>Per visualizzare le coordinate del mouse clicca in un qualunque punto della pagina.</p>
-
-<div id="d1">
-<span>Questo è un DIV non posizionato, quindi cliccando qui i valori di layerX e layerY
-saranno simili a quelli di pageX e pageY.
-</span>
-</div>
-
-<div id="d2">
-<span>Questo è un DIV posizionato, quindi cliccando qui i valori di layerX e layerY saranno relativi all'angolo in alto a sinistra di questo elemento. Si noti che le proprietà pageX e pageY restituiscono la posizione assoluta all'interno del documento, tenendo conto dello scorrimento della pagina.
-</span>
-
-<span>Fai scorrere ancora la pagina! Questo è un DIV posizionato, quindi cliccando qui i valori di layerX e layerY saranno relativi all'angolo in alto a sinistra di questo elemento. Si noti che le proprietà pageX e pageY restituiscono la posizione assoluta all'interno del documento, tenendo conto dello scorrimento della pagina.</span>
-</div>
-
-<div id="d3">
-<form name="form_coordinate">
- Id elemento padre: <input type="text" name="idPadre" size="7" /><br />
- pageX:<input type="text" name="coordinataXpagina" size="7" />
- pageY:<input type="text" name="coordinataYpagina" size="7" /><br />
- layerX:<input type="text" name="coordinataXlayer" size="7" />
- layerY:<input type="text" name="coordinataYlayer" size="7" />
-</form>
-</div>
-
-</body>
-</html>
-
-

Note

-

layerY tiene conto di eventuali scorrimenti verticali avvenuti nella pagina e restituisce un valore relativo all'intero documento, a meno che l'evento non avvenga all'interno di un elemento con posizione fissa; nel qual caso il valore restituito sarà relativo all'angolo in alto a sinistra dell'elemento.

-

Specifiche

-

DOM level 0. Non è parte di alcuna specifica.

-

{{ languages( { "en": "en/DOM/event.layerX", "pl": "pl/DOM/event.layerX" } ) }}

diff --git a/files/it/web/api/event/metakey/index.html b/files/it/web/api/event/metakey/index.html deleted file mode 100644 index e40fa17379..0000000000 --- a/files/it/web/api/event/metakey/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: event.metaKey -slug: Web/API/Event/metaKey -tags: - - DOM - - Gecko - - Reference_del_DOM_di_Gecko - - Tutte_le_categorie -translation_of: Web/API/MouseEvent/metaKey -translation_of_original: Web/API/event.metaKey ---- -

{{ ApiRef() }}

-

Sommario

-

Indica se il tasto META era premuto mentre l'evento si verificava. Questo tasto è il tasto Apple sui computer Mac, il tasto Windows sui pc con tastiere per Windows sui quali gira questo sistema operativo e potrebbe corrispondere ad altri tasti su altre piattaforme. Non esiste però un unico tasto standard sulla cui presenza si possa fare affidamento per qualsiasi tipo di piattaforma.

-

Sintassi

-
bool = event.metaKey
-
-

bool vale true se il tasto META era premuto, altrimenti false.

-

Esempio

-
 function leggiInput(e) {
- // controlla il tasto meta
-   if e.metaKey
-        // se era premuto si comporta di conseguenza
-     outputBellissimo(e);
-   else
-     outputMediocre(e)
- }
-
-

Specifiche

-

metaKey

-

{{ languages( { "en": "en/DOM/event.metaKey", "pl": "pl/DOM/event.metaKey" } ) }}

diff --git a/files/it/web/api/event/pagex/index.html b/files/it/web/api/event/pagex/index.html deleted file mode 100644 index 90cf1beaac..0000000000 --- a/files/it/web/api/event/pagex/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: event.pageX -slug: Web/API/Event/pageX -tags: - - DOM - - Gecko - - Reference_del_DOM_di_Gecko - - Tutte_le_categorie -translation_of: Web/API/UIEvent/pageX ---- -

{{ ApiRef() }}

-

Sommario

-

Restituisce la coordinata orizzontale dell'evento, all'interno dell'intero documento.

-

Sintassi

-
X =event.pageX;
-
-

X è un intero che rappresenta il valore in pixel della coordinata X del puntatore del mouse, relativamente all'intero documento. La coordinata fa riferimento al momento in cui l'evento si è verificato. Questa proprietà tiene conto di ogni scorrimento orizzontale che è stato effettuato all'interno del browser.

-

Esempio

-
<html>
-<head>
-<title>esempio di pageX/pageY e layerX/layerY</title>
-
-<script type="text/javascript">
-
-function mostraCoordinate(evt){
-  var form = document.forms.form_coords;
-  var idPadre = evt.target.parentNode.id;
-  form.idPadre.value = idPadre;
-  form.coordinataXpagina.value = evt.pageX;
-  form.coordinataYpagina.value = evt.pageY;
-  form.coordinataXlayer.value = evt.layerX;
-  form.coordinataYlayer.value = evt.layerY;
-}
-
-</script>
-
-<style type="text/css">
-
- #d1 {
-  border: solid blue 1px;
-  padding: 20px;
- }
-
- #d2 {
-  position: absolute;
-  top: 180px;
-  left: 80%;
-  right:auto;
-  width: 40%;
-  border: solid blue 1px;
-  padding: 20px;
- }
-
- #d3 {
-  position: absolute;
-  top: 240px;
-  left: 20%;
-  width: 50%;
-  border: solid blue 1px;
-  padding: 10px;
- }
-
-</style>
-</head>
-
-<body onmousedown="mostraCoordinate(event)">
-
-<p>Per visualizzare le coordinate del mouse clicca in un qualunque punto della pagina.</p>
-
-<div id="d1">
-<span>Questo è un DIV non posizionato, quindi cliccando qui i valori di layerX e layerY
-saranno simili a quelli di pageX e pageY.
-</span>
-</div>
-
-<div id="d2">
-<span>Questo è un DIV posizionato, quindi cliccando qui i valori di layerX e layerY saranno relativi all'angolo in alto a sinistra di questo elemento. Si noti che le proprietà pageX e pageY restituiscono la posizione assoluta all'interno del documento, tenendo conto dello scorrimento della pagina.
-</span>
-
-<span>Fai scorrere ancora la pagina! Questo è un DIV posizionato, quindi cliccando qui i valori di layerX e layerY saranno relativi all'angolo in alto a sinistra di questo elemento. Si noti che le proprietà pageX e pageY restituiscono la posizione assoluta all'interno del documento, tenendo conto dello scorrimento della pagina.</span>
-</div>
-
-<div id="d3">
-<form name="form_coordinate">
- Id elemento padre: <input type="text" name="idPadre" size="7" /><br />
- pageX:<input type="text" name="coordinataXpagina" size="7" />
- pageY:<input type="text" name="coordinataYpagina" size="7" /><br />
- layerX:<input type="text" name="coordinataXlayer" size="7" />
- layerY:<input type="text" name="coordinataYlayer" size="7" />
-</form>
-</div>
-
-</body>
-</html>
-
-

Specifiche

-

Non è parte di alcuno standard.

-

{{ languages( { "en": "en/DOM/event.pageX", "es": "es/DOM/event.pageX", "pl": "pl/DOM/event.pageX" } ) }}

diff --git a/files/it/web/api/event/pagey/index.html b/files/it/web/api/event/pagey/index.html deleted file mode 100644 index d0d87573cc..0000000000 --- a/files/it/web/api/event/pagey/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: event.pageY -slug: Web/API/Event/pageY -tags: - - DOM - - Gecko - - Reference_del_DOM_di_Gecko - - Tutte_le_categorie -translation_of: Web/API/UIEvent/pageY ---- -

{{ ApiRef() }}

-

Sommario

-

Restituisce la coordinata verticale dell'evento, all'interno dell'intero documento.

-

Sintassi

-
Y =event.pageY;
-
-

Y è un intero che rappresenta il valore in pixel della coordinata Y del puntatore del mouse, relativamente all'intero documento. La coordinata fa riferimento al momento in cui l'evento si è verificato. Questa proprietà tiene conto di ogni scorrimento verticale che è stato effettuato all'interno del browser.

-

Esempio

-
<html>
-<head>
-<title>esempio di pageX/pageY e layerX/layerY</title>
-
-<script type="text/javascript">
-
-function mostraCoordinate(evt){
-  var form = document.forms.form_coords;
-  var idPadre = evt.target.parentNode.id;
-  form.idPadre.value = idPadre;
-  form.coordinataXpagina.value = evt.pageX;
-  form.coordinataYpagina.value = evt.pageY;
-  form.coordinataXlayer.value = evt.layerX;
-  form.coordinataYlayer.value = evt.layerY;
-}
-
-</script>
-
-<style type="text/css">
-
- #d1 {
-  border: solid blue 1px;
-  padding: 20px;
- }
-
- #d2 {
-  position: absolute;
-  top: 180px;
-  left: 80%;
-  right:auto;
-  width: 40%;
-  border: solid blue 1px;
-  padding: 20px;
- }
-
- #d3 {
-  position: absolute;
-  top: 240px;
-  left: 20%;
-  width: 50%;
-  border: solid blue 1px;
-  padding: 10px;
- }
-
-</style>
-</head>
-
-<body onmousedown="mostraCoordinate(event)">
-
-<p>Per visualizzare le coordinate del mouse clicca in un qualunque punto della pagina.</p>
-
-<div id="d1">
-<span>Questo è un DIV non posizionato, quindi cliccando qui i valori di layerX e layerY
-saranno simili a quelli di pageX e pageY.
-</span>
-</div>
-
-<div id="d2">
-<span>Questo è un DIV posizionato, quindi cliccando qui i valori di layerX e layerY saranno relativi all'angolo in alto a sinistra di questo elemento. Si noti che le proprietà pageX e pageY restituiscono la posizione assoluta all'interno del documento, tenendo conto dello scorrimento della pagina.
-</span>
-
-<span>Fai scorrere ancora la pagina! Questo è un DIV posizionato, quindi cliccando qui i valori di layerX e layerY saranno relativi all'angolo in alto a sinistra di questo elemento. Si noti che le proprietà pageX e pageY restituiscono la posizione assoluta all'interno del documento, tenendo conto dello scorrimento della pagina.</span>
-</div>
-
-<div id="d3">
-<form name="form_coordinate">
- Id elemento padre: <input type="text" name="idPadre" size="7" /><br />
- pageX:<input type="text" name="coordinataXpagina" size="7" />
- pageY:<input type="text" name="coordinataYpagina" size="7" /><br />
- layerX:<input type="text" name="coordinataXlayer" size="7" />
- layerY:<input type="text" name="coordinataYlayer" size="7" />
-</form>
-</div>
-
-</body>
-</html>
-
-

Specifiche

-

Non è parte di alcuno standard.

-

{{ languages( { "es": "es/DOM/event.pageY", "pl": "pl/DOM/event.pageY" } ) }}

diff --git a/files/it/web/api/event/shiftkey/index.html b/files/it/web/api/event/shiftkey/index.html deleted file mode 100644 index 17a581937f..0000000000 --- a/files/it/web/api/event/shiftkey/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: event.shiftKey -slug: Web/API/Event/shiftKey -tags: - - DOM - - Gecko - - Reference_del_DOM_di_Gecko - - Tutte_le_categorie -translation_of: Web/API/MouseEvent/shiftKey -translation_of_original: Web/API/event.shiftKey ---- -

{{ ApiRef() }}

-

Sommario

-

Indica se il tasto SHIFT è stato premuto durante l'evento.

-

Sintassi

-
bool = event.shiftKey
-
-

bool restituisce true se il tasto SHIFT era premuto mentre l'evento si verificava, altrimenti false.

-

Esempio

-
<html>
-<head>
-<title>esempio tasto shift</title>
-
-<script type="text/javascript">
-
-function mostraCarattere(e){
-  alert(
-    "Tasto premuto: " + String.fromCharCode(e.charCode) + "\n"
-    + "Codice carattere: " + e.charCode + "\n"
-    + "Tasto SHIFT premuto: " + e.shiftKey + "\n"
-    + "Tasto ALT premuto: " + e.altKey + "\n"
-  );
-}
-
-</script>
-</head>
-
-<body onkeypress="mostraCarattere(event);">
-<p>Prova a premere un tasto tenendo premuto SHIFT e prova a premere un tasto senza premere SHIFT.<br />
-Puoi anche provare a premere SHIFT+ALT.</p>
-</body>
-</html>
-
-

Specifiche

-

shiftKey

-

{{ languages( { "en": "en/DOM/event.shiftKey", "pl": "pl/DOM/event.shiftKey" } ) }}

diff --git a/files/it/web/api/event/view/index.html b/files/it/web/api/event/view/index.html deleted file mode 100644 index 00d9f88004..0000000000 --- a/files/it/web/api/event/view/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: event.view -slug: Web/API/Event/view -tags: - - DOM - - Gecko - - Reference_del_DOM_di_Gecko - - Tutte_le_categorie -translation_of: Web/API/UIEvent/view ---- -

{{ ApiRef() }}

-

Sommario

-

Restituisce l'oggetto AbstractView nel quale si è verificato l'evento. Nei browser web, questo è l'oggetto window che ha generato l'evento.

-

Sintassi

-
view =event.view
-
- -

Specifiche

-

DOM Level 2 Events: UIEvent.view

-

{{ languages( { "en": "en/DOM/event.view", "pl": "pl/DOM/event.view" } ) }}

diff --git a/files/it/web/api/event/which/index.html b/files/it/web/api/event/which/index.html deleted file mode 100644 index 0ab544b60c..0000000000 --- a/files/it/web/api/event/which/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: event.which -slug: Web/API/Event/which -tags: - - DOM - - Gecko - - Reference_del_DOM_di_Gecko - - Tutte_le_categorie -translation_of: Web/API/KeyboardEvent/which ---- -

{{ ApiRef() }}

-

Sommario

-

Restituisce il valore di keyCode se il tasto premuto non è un tasto carattere, altrimenti restituisce il valore di charCode se è stato premuto un tasto alfanumerico.

-

Sintassi

-
int = event.which
-
-

int è il codice numerico del tasto che è stato premuto, sia esso alfanumerico oppure no. Si vedano charCode e keyCode per ulteriori informazioni.

-

Esempio

-
<html>
-<head>
-<title>esempio con charCode/keyCode/which</title>
-
-<script type="text/javascript">
-
-function mostraTastoPremuto(evt)
-{
-alert("Evento onkeypress: \n"
-      + "proprietà keyCode: " + evt.keyCode + "\n"
-      + "proprietà which: " + evt.which + "\n"
-      + "proprietà charCode: " + evt.charCode + "\n"
-      + "Tasto premuto (se alfanumerico): "
-      + String.fromCharCode(evt.charCode) + "\n"
-     );
-}
-
-
-function pressioneTasto(evt)
-{
-alert("onkeydown handler: \n"
-      + "proprietà keyCode: " + evt.keyCode + "\n"
-      + "proprietà which: " + evt.which + "\n"
-     );
-}
-
-
-</script>
-</head>
-
-<body
- onkeypress="mostraTastoPremuto(event);"
- onkeydown="pressioneTasto(event);"
->
-
-<p>Premere un tasto</p>
-
-</body>
-</html>
-
-

Specifiche

-

Non è parte di alcuna specifica.

diff --git a/files/it/web/api/eventtarget/addeventlistener/index.html b/files/it/web/api/eventtarget/addeventlistener/index.html new file mode 100644 index 0000000000..6608e69bd3 --- /dev/null +++ b/files/it/web/api/eventtarget/addeventlistener/index.html @@ -0,0 +1,694 @@ +--- +title: EventTarget.addEventListener() +slug: Web/API/Element/addEventListener +tags: + - API + - DOM + - EventTarget + - Gestori di Eventi + - JavaScript + - Referenza + - Ricevere Eventi + - Rilevare Eventi + - addEventListener + - attachEvent + - eventi + - metodo + - mselementresize +translation_of: Web/API/EventTarget/addEventListener +--- +
{{APIRef("DOM Events")}}
+ +

Il metodo {{domxref("EventTarget")}} addEventListener() imposta una funzione che verrà chiamata ogni volta che l'evento specificato viene consegnato all'elemento di destinazione. I target comuni sono {{domxref("Element")}}, {{domxref("Document")}}, e {{domxref("Window")}}, ma la destinazione può essere qualsiasi oggetto che supporti eventi (come XMLHttpRequest).

+ +

addEventListener() funziona aggiungendo una funzione o un oggetto che implementa {{domxref("EventListener")}} all'elenco di listener di eventi per il tipo di evento specificato sul {{domxref("EventTarget")}} sul quale è chiamato.

+ +

Sintassi

+ +
target.addEventListener(type, listener[, options]);
+target.addEventListener(type, listener[, useCapture]);
+target.addEventListener(type, listener[, useCapture, wantsUntrusted {{Non-standard_inline}}]); // Gecko/Mozilla only
+ +

Parametri

+ +
+
type
+
Una stringa sensibile al maiuscolo/minuscolo che rappresenta il tipo di evento da assegnare.
+
listener
+
L'oggetto che riceve una notifica (un oggetto che implementa l'interfaccia {{domxref("Event")}}) quando si verifica un evento del tipo specificato. Questo deve essere un oggetto che implementa l'interfaccia {{domxref("EventListener")}}, o una funzione. Vedi {{anch("Il callback del listener di eventi")}} per i dettagli sul callback stesso.
+
options {{optional_inline}}
+
Un oggetto opzioni che specifica le caratteristiche del listener di eventi. Le opzioni disponibili sono: +
    +
  • capture: Un {{jsxref("Boolean")}} che indica che eventi di questo tipo verranno inviati al listener registrato prima di essere inviati a qualsiasi EventTarget sotto di esso nell'albero del DOM.
    • +
  • once: Un {{jsxref("Boolean")}} che indica che il listener dovrebbe essere invocato al massimo una volta dopo essere stato aggiunto. Se ritorna true, il listener verrebbe automaticamente rimosso quando invocato.
    • +
  • passive: Un {{jsxref("Boolean")}} che, se true, indica che la funzione specificata da listener non chiamerà mai {{domxref("Event.preventDefault", "preventDefault()")}}. Se un listener passivo chiama preventDefault(), l'user agent non farà altro che generare un avviso nella console. Vedi {{anch("Miglioramento delle prestazioni di scorrimento con i listeners passivi")}} per saperne di più.
    • +
  • {{non-standard_inline}} mozSystemGroup: Un {{jsxref("Boolean")}} che indica che l'ascoltatore deve essere aggiunto al gruppo di sistema. Disponibile solo nel codice in esecuzione in XBL o nel {{glossary("chrome")}} del browser Firefox.
    • +
+
+
useCapture {{optional_inline}}
+
Un {{jsxref("Boolean")}} che indica se eventi di questo tipo verranno inviati al listener registrato prima di essere inviati a qualsiasi EventTarget sotto di esso nell'albero del DOM. Gli eventi che stanno ribollendo verso l'alto attraverso l'albero non innescheranno un ascoltatore designato ad usare il capturing. Il bubbling e la cattura degli eventi sono due modi di propagare gli eventi che si verificano in un elemento che è annidato in un altro elemento, quando entrambi gli elementi hanno registrato un handle per quell'evento. La modalità di propagazione dell'evento determina l'ordine in cui gli elementi ricevono l'evento. Vedi DOM Level 3 Events e JavaScript Event order per una spiegazione dettagliata. Se non specificato, useCapture di default è false.
+
+
Note: Per gli ascoltatori di eventi collegati al target dell'evento, l'evento si trova nella fase target, piuttosto che nelle fasi di cattura e bubbling. Gli eventi nella fase di destinazione attiveranno tutti gli ascoltatori di un elemento nell'ordine in cui sono stati registrati, indipendentemente dal parametro useCapture.
+ +
Note: useCapture non è sempre stato opzionale. Idealmente, dovresti includerlo per la massima compatibilità con i browser.
+
+
wantsUntrusted {{Non-standard_inline}}
+
Un parametro specifico per Firefox (Gecko). Se è true, il listener riceve eventi sintetici inviati dal contenuto web (il valore predefinito è false per il browser {{glossary("chrome")}} e true per le normali pagine Web). Questo parametro è utile per il codice trovato nei componenti aggiuntivi e anche per il browser stesso.
+
+ +

Valore di ritorno

+ +

undefined

+ +

Note di utilizzo

+ +

Il callback del listener di eventi

+ +

Il listener di eventi può essere specificato come funzione di callback o come oggetto che implementa {{domxref("EventListener")}}, il cui metodo {{domxref("EventListener.handleEvent", "handleEvent()")}} funge da funzione di callback.

+ +

La stessa funzione di callback ha gli stessi parametri e il valore di ritorno del metodo handleEvent() cioè, il callback accetta un singolo parametro: un oggetto basato su {{domxref("Event")}} che descrive l'evento che si è verificato e non restituisce nulla.

+ +

Ad esempio, un callback del gestore di eventi che può essere utilizzato per gestire entrambi gli eventi {{event("fullscreenchange")}} e {{event("fullscreenerror")}} potrebbe avere il seguente aspetto:

+ +
function eventHandler(event) {
+  if (event.type == 'fullscreenchange') {
+    /* gestire un interruttore a schermo intero */
+  } else /* fullscreenerror */ {
+    /* gestire un errore di commutazione a schermo intero */
+  }
+}
+ +

Rilevamento sicuro del supporto opzionale

+ +

Nelle versioni precedenti della specifica DOM, il terzo parametro di addEventListener() era un valore booleano che indicava se utilizzare o meno l'acquisizione. Nel corso del tempo, è diventato chiaro che erano necessarie più opzioni. Piuttosto che aggiungere altri parametri alla funzione (complicando enormemente le cose quando si tratta di valori opzionali), il terzo parametro è stato modificato in un oggetto che può contenere varie proprietà che definiscono i valori delle opzioni per configurare il processo di rimozione del listener di eventi.

+ +

Poiché i browser più vecchi (così come alcuni browser non troppo vecchi) presuppongono ancora che il terzo parametro sia un booleano, è necessario creare il codice per gestire questo scenario in modo intelligente. Puoi farlo utilizzando il rilevamento delle funzioni per ciascuna delle opzioni che ti interessano.

+ +

Ad esempio, se si desidera verificare l'opzione passive:

+ +
var passiveSupported = false;
+
+try {
+  var options = {
+    get passive() { // Questa funzione verrà chiamata quando il browser
+                    //     tenta di accedere alla proprietà passiva.
+      passiveSupported = true;
+    }
+  };
+
+  window.addEventListener("test", options, options);
+  window.removeEventListener("test", options, options);
+} catch(err) {
+  passiveSupported = false;
+}
+
+ +

Questo crea un oggetto options con una funzione getter per la proprietà passive; il getter imposta una flag, passiveSupported, è true se viene chiamato. Ciò significa che se il browser controlla il valore della proprietà passive sull'oggetto options, passiveSupported sarà impostato su true; altrimenti rimarrà false. Chiamiamo quindi addEventListener() per impostare un gestore di eventi falsi, specificando tali opzioni, in modo che le opzioni vengano controllate se il browser riconosce un oggetto come terzo parametro. Quindi, chiamiamo removeEventListener() per pulire dopo noi stessi. (Nota che handleEvent() viene ignorato sui listener di eventi che non vengono chiamati.)

+ +

Puoi verificare se un'opzione è supportata in questo modo. Basta aggiungere un getter per quella opzione usando il codice simile a quello mostrato sopra.

+ +

Quindi, quando vuoi creare un listener di eventi effettivo che utilizza le opzioni in questione, puoi fare qualcosa di simile a questo:

+ +
someElement.addEventListener("mouseup", handleMouseUp, passiveSupported
+                               ? { passive: true } : false);
+ +

Qui stiamo aggiungendo un listener per l'evento {{event("mouseup")}} sull'elemento someElement. Per il terzo parametro, se passiveSupported è true, stiamo specificando un oggetto options con passive impostato su true; altrimenti, sappiamo che dobbiamo passare un booleano e passiamo false come valore del parametro useCapture.

+ +

Se preferisci, puoi usare una libreria di terze parti come Modernizr o Detect It per fare questo test per te.

+ +

È possibile ottenere ulteriori informazioni dall'articolo su EventListenerOptions dal gruppo di Web Incubator Community.

+ +

Esempi

+ +

Aggiungere un semplice listener

+ +

Questo esempio dimostra come utilizzare addEventListener() per controllare i click del mouse su un elemento.

+ +

HTML

+ +
<table id="outside">
+    <tr><td id="t1">one</td></tr>
+    <tr><td id="t2">two</td></tr>
+</table>
+
+ +

JavaScript

+ +
// Funzione per modificare il contenuto di t2
+function modifyText() {
+  var t2 = document.getElementById("t2");
+  if (t2.firstChild.nodeValue == "three") {
+    t2.firstChild.nodeValue = "two";
+  } else {
+    t2.firstChild.nodeValue = "three";
+  }
+}
+
+// Aggiungere listener di eventi alla tabella
+var el = document.getElementById("outside");
+el.addEventListener("click", modifyText, false);
+
+ +

In questo codice, modifyText() è un listener per gli eventi click registrati usando addEventListener(). Un click in qualsiasi punto della tabella esegue il gestore ed esegue modifyText().

+ +

Risultato

+ +

{{EmbedLiveSample('Aggiungere_un_semplice_listener')}}

+ +

Listener di eventi con funzione anonima

+ +

Qui, daremo un'occhiata a come utilizzare una funzione anonima per passare parametri nel listener di eventi.

+ +

HTML

+ +
<table id="outside">
+    <tr><td id="t1">one</td></tr>
+    <tr><td id="t2">two</td></tr>
+</table>
+ +

JavaScript

+ +
// Funzione per modificare il contenuto di t2
+function modifyText(new_text) {
+  var t2 = document.getElementById("t2");
+  t2.firstChild.nodeValue = new_text;
+}
+
+// Funzione per aggiungere listener alla tabella
+var el = document.getElementById("outside");
+el.addEventListener("click", function(){modifyText("four")}, false);
+
+ +

Nota che il listener è una funzione anonima che incapsula codice che è quindi, a sua volta, in grado di inviare parametri alla funzione modifyText(), che è responsabile per rispondere effettivamente all'evento.

+ +

Risultato

+ +

{{EmbedLiveSample('Listener_di_eventi_con_funzione_anonima')}}

+ +

Listener di eventi con una funzione a freccia

+ +

Questo esempio dimostra un semplice listener di eventi implementato utilizzando la notazione della funzione a freccia.

+ +

HTML

+ +
<table id="outside">
+    <tr><td id="t1">one</td></tr>
+    <tr><td id="t2">two</td></tr>
+</table>
+ +

JavaScript

+ +
// Funzione per modificare il contenuto di t2
+function modifyText(new_text) {
+  var t2 = document.getElementById("t2");
+  t2.firstChild.nodeValue = new_text;
+}
+
+// Aggiungere un listener alla tabella con una funzione a freccia
+var el = document.getElementById("outside");
+el.addEventListener("click", () => { modifyText("four"); }, false);
+
+ +

Risultato

+ +

{{EmbedLiveSample('Listener_di_eventi_con_una_funzione_a_freccia')}}

+ +

Si noti che, mentre le funzioni anonime e le frecce sono simili, hanno diversi collegamenti this. Mentre le funzioni anonime (e tutte le funzioni JavaScript tradizionali) creano i propri collegamenti this, le funzioni a freccia ereditano il vincolo this della funzione di contenimento.

+ +

Ciò significa che le variabili e le costanti disponibili per la funzione di contenimento sono disponibili anche per il gestore di eventi quando si utilizza una funzione di freccia.

+ +

Esempio di utilizzo delle opzioni

+ +

HTML

+ +
<div class="outer">
+    outer, once & none-once
+    <div class="middle" target="_blank">
+        middle, capture & none-capture
+        <a class="inner1" href="https://www.mozilla.org" target="_blank">
+            inner1, passive & preventDefault(which is not allowed)
+        </a>
+        <a class="inner2" href="https://developer.mozilla.org/" target="_blank">
+            inner2, none-passive & preventDefault(not open new page)
+        </a>
+    </div>
+</div>
+
+ +

CSS

+ +
    .outer, .middle, .inner1, .inner2 {
+        display:block;
+        width:520px;
+        padding:15px;
+        margin:15px;
+        text-decoration:none;
+    }
+    .outer{
+        border:1px solid red;
+        color:red;
+    }
+    .middle{
+        border:1px solid green;
+        color:green;
+        width:460px;
+    }
+    .inner1, .inner2{
+        border:1px solid purple;
+        color:purple;
+        width:400px;
+    }
+
+ +

JavaScript

+ +
    let outer  = document.getElementsByClassName('outer') [0];
+    let middle = document.getElementsByClassName('middle')[0];
+    let inner1 = document.getElementsByClassName('inner1')[0];
+    let inner2 = document.getElementsByClassName('inner2')[0];
+
+    let capture = {
+        capture : true
+    };
+    let noneCapture = {
+        capture : false
+    };
+    let once = {
+        once : true
+    };
+    let noneOnce = {
+        once : false
+    };
+    let passive = {
+        passive : true
+    };
+    let nonePassive = {
+        passive : false
+    };
+
+
+    outer.addEventListener('click', onceHandler, once);
+    outer.addEventListener('click', noneOnceHandler, noneOnce);
+    middle.addEventListener('click', captureHandler, capture);
+    middle.addEventListener('click', noneCaptureHandler, noneCapture);
+    inner1.addEventListener('click', passiveHandler, passive);
+    inner2.addEventListener('click', nonePassiveHandler, nonePassive);
+
+    function onceHandler(event) {
+        alert('outer, once');
+    }
+    function noneOnceHandler(event) {
+        alert('outer, none-once, default');
+    }
+    function captureHandler(event) {
+        //event.stopImmediatePropagation();
+        alert('middle, capture');
+    }
+    function noneCaptureHandler(event) {
+        alert('middle, none-capture, default');
+    }
+    function passiveHandler(event) {
+        // Unable to preventDefault inside passive event listener invocation.
+        event.preventDefault();
+        alert('inner1, passive, open new page');
+    }
+    function nonePassiveHandler(event) {
+        event.preventDefault();
+        //event.stopPropagation();
+        alert('inner2, none-passive, default, not open new page');
+    }
+
+ +

Risultato

+ +

Fai click rispettivamente sui contenitori esterni, centrali e interni per vedere come funzionano le opzioni.

+ +

{{ EmbedLiveSample('Esempio_di_utilizzo_delle_opzioni', 600, 310, '', 'Web/API/EventTarget/addEventListener') }}

+ +

Prima di utilizzare un particolare valore nell'oggetto options è una buona idea assicurarsi che il browser dell'utente lo supporti, poiché si tratta di un'aggiunta che non tutti i browser hanno supportato storicamente. Vedi {{anch("Rilevamento sicuro del supporto opzionale")}} per i dettagli.

+ +

Altre note

+ +

Perchè usare addEventListener?

+ +

addEventListener() è il modo per registrare un listener di eventi come specificato nel DOM W3C. I benefici sono i seguenti:

+ + + +

Il modo alternativo, più vecchio per registrare i listener, è descritto di seguito.

+ +

Aggiunta di un listener durante la spedizione dell'evento

+ +

Se un {{domxref("EventListener")}} viene aggiunto ad un {{domxref("EventTarget")}} mentre sta elaborando un evento, quell'evento non attiva il listener. Tuttavia, lo stesso listener può essere attivato durante una fase successiva del flusso di eventi, come la fase di bubbling.

+ +

Più listeners identici

+ +

Se più EventListener indentici sono registrati sullo stesso EventTarget con gli stessi parametri, le istanze duplicate vengono scartate. Non causano l'EventListener da chiamare due volte e non devono essere rimossi manualmente con il metodo {{domxref("EventTarget.removeEventListener", "removeEventListener()")}}. Nota tuttavia che quando si utilizza una funzione anonima come gestore, tali listener NON saranno identici poiché le funzioni anonime non sono identiche anche se definite utilizzando il codice sorgente invariato SAME chiamato semplicemente ripetutamente, anche se in un ciclo. Tuttavia, definire ripetutamente la stessa funzione denominata in questi casi può essere più problematico. (vedi Problemi di memoria di seguito.)

+ +

Il valore di this all'interno del gestore

+ +

È spesso preferibile fare riferimento all'elemento su cui è stato attivato il gestore eventi, ad esempio quando si utilizza un gestore generico per un insieme di elementi simili.

+ +

Se si collega un handler ad un elemento utilizzando addEventListener(), il valore di this all'interno del gestore è un riferimento all'elemento. È uguale al valore della proprietà currentTarget dell'argomento evento che viene passato al gestore.

+ +
my_element.addEventListener('click', function (e) {
+  console.log(this.className)           // registra il className di my_element
+  console.log(e.currentTarget === this) // ritorna `true`
+})
+
+ +

Come promemoria, le funzioni freccia non hanno il loro this contesto.

+ +
my_element.addEventListener('click', (e) => {
+  console.log(this.className)           // WARNING: `this` is not `my_element`
+  console.log(e.currentTarget === this) // logs `false`
+})
+ +

Se un gestore di eventi (ad esempio, {{domxref("Element.onclick", "onclick")}}) è specificato su un elemento nel codice sorgente HTML, il codice JavaScript nel valore dell'attributo viene effettivamente racchiuso in una funzione di gestore che associa il valore di this in modo coerente con addEventListener(); un'occorrenza di this all'interno del codice rappresenta un riferimento all'elemento.

+ +
<table id="my_table" onclick="console.log(this.id);"><!-- `this` refers to the table; logs 'my_table' -->
+  ...
+</table>
+
+ +

Si noti che il valore di this all'interno di una funzione, chiamato dal codice nel valore dell'attributo, si comporta come per regole standard. Questo è mostrato nel seguente esempio:

+ +
<script>
+  function logID() { console.log(this.id); }
+</script>
+<table id="my_table" onclick="logID();"><!-- when called, `this` will refer to the global object -->
+  ...
+</table>
+
+ +

Il valore di this all'interno di logID() è un riferimento all'oggetto globale {{domxref("Window")}} (o undefined nel caso della strict mode).

+ +

Specificare this usando bind()

+ +

Il metodo Function.prototype.bind() consente di specificare il valore che dovrebbe essere usato come this per tutte le chiamate a una determinata funzione. Ciò ti consente di bypassare facilmente i problemi in cui non è chiaro quale sarà this a seconda del contesto in cui è stata chiamata la tua funzione. Nota, tuttavia, che è necessario mantenere un riferimento per l'ascoltatore in modo da poterlo rimuovere in seguito.

+ +

Questo è un esempio con e senza bind():

+ +
var Something = function(element) {
+  // |this| is a newly created object
+  this.name = 'Something Good';
+  this.onclick1 = function(event) {
+    console.log(this.name); // undefined, as |this| is the element
+  };
+  this.onclick2 = function(event) {
+    console.log(this.name); // 'Something Good', as |this| is bound to newly created object
+  };
+  element.addEventListener('click', this.onclick1, false);
+  element.addEventListener('click', this.onclick2.bind(this), false); // Trick
+}
+var s = new Something(document.body);
+
+ +

Un'altra soluzione sta utilizzando una funzione speciale chiamata handleEvent() per catturare qualsiasi evento:

+ +
var Something = function(element) {
+  // |this| is a newly created object
+  this.name = 'Something Good';
+  this.handleEvent = function(event) {
+    console.log(this.name); // 'Something Good', as this is bound to newly created object
+    switch(event.type) {
+      case 'click':
+        // some code here...
+        break;
+      case 'dblclick':
+        // some code here...
+        break;
+    }
+  };
+
+  // Note that the listeners in this case are |this|, not this.handleEvent
+  element.addEventListener('click', this, false);
+  element.addEventListener('dblclick', this, false);
+
+  // You can properly remove the listeners
+  element.removeEventListener('click', this, false);
+  element.removeEventListener('dblclick', this, false);
+}
+var s = new Something(document.body);
+
+ +

Un altro modo di gestire il riferimento a this è passare ad EventListener una funzione che chiama il metodo dell'oggetto che contiene i campi a cui è necessario accedere:

+ +
class SomeClass {
+
+  constructor() {
+    this.name = 'Something Good';
+  }
+
+  register() {
+    var that = this;
+    window.addEventListener('keydown', function(e) {return that.someMethod(e);});
+  }
+
+  someMethod(e) {
+    console.log(this.name);
+    switch(e.keyCode) {
+      case 5:
+        // some code here...
+        break;
+      case 6:
+        // some code here...
+        break;
+    }
+  }
+
+}
+
+var myObject = new SomeClass();
+myObject.register();
+ +

Legacy Internet Explorer e attachEvent

+ +

Nelle versioni di Internet Explorer precedenti a IE 9, devi usare {{domxref("EventTarget.attachEvent", "attachEvent()")}}, piuttosto che lo standard addEventListener(). Per IE, modifichiamo l'esempio precedente per:

+ +
if (el.addEventListener) {
+  el.addEventListener('click', modifyText, false);
+} else if (el.attachEvent)  {
+  el.attachEvent('onclick', modifyText);
+}
+
+ +

C'è un inconveniente di attachEvent(): il valore di this sarà un riferimento all'oggetto window, invece dell'elemento su cui è stato chiamato.

+ +

Il metodo attachEvent() potrebbe essere associato all'evento onresize per rilevare quando alcuni elementi di una pagina Web sono stati ridimensionati. L'evento proprietario mselementresize quando abbinato al metodo addEventListener di registrazione dei gestori di eventi, fornisce funzionalità simili a onresize, attivando quando alcuni elementi HTML vengono ridimensionati.

+ +

Compatibilità

+ +

Puoi lavorare attorno a addEventListener(), removeEventListener(), {{domxref("Event.preventDefault()")}}, e {{domxref("Event.stopPropagation()")}} non supportati da Internet Explorer 8 di usando il seguente codice all'inizio del tuo script. Il codice supporta l'uso di handleEvent() e anche l'evento {{event("DOMContentLoaded")}}.

+ +
+

Note: useCapture non è supportato, in quanto IE 8 non ha alcun metodo alternativo. Il seguente codice aggiunge solo il supporto per IE 8. Questo polyfill di IE 8 funziona solo in modalità standard: è richiesta una dichiarazione doctype.

+
+ +
(function() {
+  if (!Event.prototype.preventDefault) {
+    Event.prototype.preventDefault=function() {
+      this.returnValue=false;
+    };
+  }
+  if (!Event.prototype.stopPropagation) {
+    Event.prototype.stopPropagation=function() {
+      this.cancelBubble=true;
+    };
+  }
+  if (!Element.prototype.addEventListener) {
+    var eventListeners=[];
+
+    var addEventListener=function(type,listener /*, useCapture (will be ignored) */) {
+      var self=this;
+      var wrapper=function(e) {
+        e.target=e.srcElement;
+        e.currentTarget=self;
+        if (typeof listener.handleEvent != 'undefined') {
+          listener.handleEvent(e);
+        } else {
+          listener.call(self,e);
+        }
+      };
+      if (type=="DOMContentLoaded") {
+        var wrapper2=function(e) {
+          if (document.readyState=="complete") {
+            wrapper(e);
+          }
+        };
+        document.attachEvent("onreadystatechange",wrapper2);
+        eventListeners.push({object:this,type:type,listener:listener,wrapper:wrapper2});
+
+        if (document.readyState=="complete") {
+          var e=new Event();
+          e.srcElement=window;
+          wrapper2(e);
+        }
+      } else {
+        this.attachEvent("on"+type,wrapper);
+        eventListeners.push({object:this,type:type,listener:listener,wrapper:wrapper});
+      }
+    };
+    var removeEventListener=function(type,listener /*, useCapture (will be ignored) */) {
+      var counter=0;
+      while (counter<eventListeners.length) {
+        var eventListener=eventListeners[counter];
+        if (eventListener.object==this && eventListener.type==type && eventListener.listener==listener) {
+          if (type=="DOMContentLoaded") {
+            this.detachEvent("onreadystatechange",eventListener.wrapper);
+          } else {
+            this.detachEvent("on"+type,eventListener.wrapper);
+          }
+          eventListeners.splice(counter, 1);
+          break;
+        }
+        ++counter;
+      }
+    };
+    Element.prototype.addEventListener=addEventListener;
+    Element.prototype.removeEventListener=removeEventListener;
+    if (HTMLDocument) {
+      HTMLDocument.prototype.addEventListener=addEventListener;
+      HTMLDocument.prototype.removeEventListener=removeEventListener;
+    }
+    if (Window) {
+      Window.prototype.addEventListener=addEventListener;
+      Window.prototype.removeEventListener=removeEventListener;
+    }
+  }
+})();
+ +

Il modo più antico per registrare i listeners

+ +

addEventListener() è stato introdotto con la specifica DOM 2 Prima di allora, gli ascoltatori di eventi sono stati registrati come segue:

+ +
// Passando un riferimento alla funzione - non aggiungere "()" dopo di esso, che chiamerebbe la funzione!
+el.onclick = modifyText;
+
+// Using a function expression
+element.onclick = function() {
+  // ... function logic ...
+};
+
+ +

Questo metodo sostituisce il listener dell'evento click esistente sull'elemento se ce n'è uno. Altri eventi e gestori di eventi associati come blur (onblur) e keypress (onkeypress) si comportano in modo simile.

+ +

Poiché era essenzialmente parte di {{glossary("DOM", "DOM 0")}}, questa tecnica per aggiungere listener di eventi è ampiamente supportata e non richiede uno speciale codice cross-browser. Viene normalmente utilizzato per registrare dinamicamente i listener di eventi a meno che non siano necessarie le funzionalità extra di addEventListener().

+ +

Problemi di memoria

+ +
var els = document.getElementsByTagName('*');
+
+
+// Case 1
+for(var i = 0; i < els.length; i++) {
+  els[i].addEventListener("click", function(e){/* do something */}, false);
+}
+
+
+// Case 2
+function processEvent(e) {
+  /* do something */
+}
+
+for(var i = 0; i < els.length; i++){
+  els[i].addEventListener("click", processEvent, false);
+}
+
+ +

Nel primo caso sopra, viene creata una nuova funzione (anonima) di gestione con ogni iterazione del ciclo. Nel secondo caso, la stessa funzione dichiarata in precedenza viene utilizzata come gestore di eventi, il che si traduce in un minore consumo di memoria poiché è stata creata una sola funzione di gestore. Inoltre, nel primo caso, non è possibile chiamare {{domxref("EventTarget.removeEventListener", "removeEventListener()")}} perché non viene mantenuto alcun riferimento alla funzione anonima (o qui, non mantenuto a nessuna delle più funzioni anonime che il loop potrebbe creare.) Nel secondo caso, è possibile eseguire myElement.removeEventListener("click", processEvent, false) perchè processEvent è il riferimento alla funzione.

+ +

In realtà, per quanto riguarda il consumo di memoria, la mancanza di mantenere un riferimento alla funzione non è il vero problema; piuttosto è la mancanza di mantenere un riferimento di funzione STATICO. In entrambi i casi di problemi di seguito, viene mantenuto un riferimento alla funzione, ma poiché viene ridefinito a ogni iterazione, non è statico. Nel terzo caso, il riferimento alla funzione anonima viene riassegnato ad ogni iterazione. Nel quarto caso, l'intera definizione di funzione è invariata, ma viene ancora ripetutamente definita come se fosse nuova (a meno che non fosse [[promoted]] dal compilatore) e quindi non sia statica. Pertanto, sebbene sembrino essere semplicemente [[Multiple identifier event listers]], in entrambi i casi ogni iterazione creerà invece un nuovo listener con il proprio riferimento univoco alla funzione del gestore. Tuttavia, poiché la definizione della funzione stessa non cambia, la STESSA funzione può ancora essere chiamata per ogni listener duplicato (specialmente se il codice viene ottimizzato).

+ +

Anche in entrambi i casi, poiché il riferimento alla funzione è stato mantenuto ma ripetutamente ridefinito con ogni aggiunta, l'istruzione remove di sopra può ancora rimuovere un listener, ma ora solo l'ultimo aggiunto.

+ +
// Solo a scopo illustrativo: nota che "MISTAKE" di [j] per [i] causando così l'associazione di tutti gli eventi desiderati allo STESSO elemento
+
+// Case 3
+for (var i = 0, j = 0 ; i < els.length ; i++) {
+  /* do lots of stuff with */
+  els[j].addEventListener("click", processEvent = function(e){/* do something */}, false);
+}
+
+// Case 4
+for (var i = 0, j = 0 ; i < els.length ; i++) {
+  /* do lots of stuff with j */
+  function processEvent(e){/* do something */};
+  els[j].addEventListener("click", processEvent, false);
+}
+ +

Miglioramento delle prestazioni di scorrimento con i listeners passivi

+ +

Secondo la specifica, il valore predefinito per l'opzione passive è sempre falso. Tuttavia, questo introduce il potenziale per gli ascoltatori di eventi che gestiscono determinati eventi di tocco (tra gli altri) per bloccare il thread principale del browser mentre sta tentando di gestire lo scrolling, con conseguente enorme riduzione delle prestazioni durante la gestione dello scorrimento.

+ +

Per evitare questo problema, alcuni browser (in particolare, Chrome e Firefox) hanno modificato il valore predefinito dell'opzione passive in true per gli eventi {{event("touchstart")}} e {{event("touchmove")}} sui nodi a livello del documento {{domxref("Window")}}, {{domxref("Document")}}, e {{domxref("Document.body")}}. Questo impedisce al listener di eventi di essere chiamato, quindi non può bloccare il rendering della pagina mentre l'utente sta scorrendo.

+ +
+

Note: Vedi la tabella di compatibilità qui sotto se hai bisogno di sapere quali browser (e / o quali versioni di quei browser) implementano questo comportamento alterato.

+
+ +

Puoi sovrascrivere questo comportamento impostando esplicitamente il valore di passive a false, come mostrato qui:

+ +
/* Feature detection */
+var passiveIfSupported = false;
+
+try {
+  window.addEventListener("test", null, Object.defineProperty({}, "passive", { get: function() { passiveIfSupported = { passive: true }; } }));
+} catch(err) {}
+
+window.addEventListener('scroll', function(event) {
+  /* do something */
+  // can't use event.preventDefault();
+}, passiveIfSupported );
+
+ +

Nei browser meno recenti che non supportano il parametro options su addEventListener(), il tentativo di utilizzarlo impedisce l'utilizzo dell'argomento useCapture senza utilizzare correttamente il rilevamento delle funzionalità.

+ +

Non è necessario preoccuparsi del valore di passive per l'evento di base {{event("scroll")}}. Poiché non può essere annullato, i listener di eventi non possono comunque bloccare il rendering della pagina.

+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificazioneStatoCommento
{{SpecName("DOM WHATWG", "#dom-eventtarget-addeventlistener", "EventTarget.addEventListener()")}}{{Spec2("DOM WHATWG")}} 
{{SpecName("DOM4", "#dom-eventtarget-addeventlistener", "EventTarget.addEventListener()")}}{{Spec2("DOM4")}} 
{{SpecName("DOM2 Events", "#Events-EventTarget-addEventListener", "EventTarget.addEventListener()")}}{{Spec2("DOM2 Events")}}Definizione inziale
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.EventTarget.addEventListener", 3)}}

+ +

Vedi anche

+ + diff --git a/files/it/web/api/geolocation/using_geolocation/index.html b/files/it/web/api/geolocation/using_geolocation/index.html deleted file mode 100644 index 303cb4a8bb..0000000000 --- a/files/it/web/api/geolocation/using_geolocation/index.html +++ /dev/null @@ -1,321 +0,0 @@ ---- -title: Using geolocation -slug: Web/API/Geolocation/Using_geolocation -translation_of: Web/API/Geolocation_API ---- -

{{securecontext_header}}{{APIRef("Geolocation API")}}

- -

Le API per la geolocalizzazione permettono agli utenti di fornire la propria posizione alle applicazioni web. Per ragioni di privacy, all'utente viene richiesta l'autorizzazione all'uso della posizione.

- -

L'oggetto della geolocalizzazione

- -

Le API di geolocalizzazione sono pubblicate tramite l'oggetto {{domxref("navigator.geolocation")}}.

- -

Se l'oggetto esiste, il servizio di geolocalizzazione è disponibile. Puoi testare l'esistenza dell'oggetto tramite:

- -
if ("geolocation" in navigator) {
-  /* la geolocalizzazione è disponibile */
-} else {
-  /* la geolocalizzazione NON È disponibile */
-}
-
- -
-

Nota: Su Firefox 24 e versioni più vecchie, "geolocation" in navigator ritorna sempre true anche se l'API è stata disabilitata. Questa cosa è stata sistemata con Firefox 25. ({{bug(884921)}}).

-
- -

Ottenere la posizione corrente

- -

Per ottenere la posizione corrente dell'utente devi chiamare il metodo {{domxref("geolocation.getCurrentPosition()","getCurrentPosition()")}}. Viene così lanciata una richiesta asincrona che calcola la posizione attuale dell'utente. Quando la posizione viene calcolata, la funzione viene eseguita. Puoi creare una funzione che viene chiamata in caso di errore. Un terzo parametro opzionale è un oggetto che permette di settare il tempo massimo della posizione calcolata, il tempo di attessa per una nuova richiesta e la possibilità di usare la massima accuratezza per il cacolo della posizione.

- -
-

Nota: Per default, {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}} cerca di calcolare la posizione nel modo più veloce possibile avendo però una bassa accuratezza. Questo metodo è utile se ti serve una risposta veloce. Dispositivi con il GPS possono richiedere anche alcuni minuti per fare un calcolo preciso della posizione, quindi dei dati meno accurati (come l'indirizzo IP o il wifi) possono essere usati da {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}.

-
- -
navigator.geolocation.getCurrentPosition(function(position) {
-  do_something(position.coords.latitude, position.coords.longitude);
-});
- -

L'esempio qui sopra chiama la funzione do_something() quando la posizione viene calcolata.

- -

Controllare la posizione attuale

- -

Se la posizione cambia (perché il dispositivo di sposta o perché viene calcolata una posizione più accurata), puoi settare una funzione che viene chiamata quando la posizione attuale si aggiorna. Basta usare la funzione {{domxref("Geolocation.watchPosition()","watchPosition()")}}, che ha gli stessi parametri di input di {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}. Questa funzione viene chiamata più volte così da permettere al browser di sapere sempre la posizione del dispositivo. La funzione di errore è opzionale come lo era per {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}.

- -
-

Nota: Puoi usare {{domxref("Geolocation.watchPosition()","watchPosition()")}} senza una chiamata iniziale a {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}

-
- -
var watchID = navigator.geolocation.watchPosition(function(position) {
-  do_something(position.coords.latitude, position.coords.longitude);
-});
- -

Il metodo {{domxref("Geolocation.watchPosition()","watchPosition()")}} ritorna un ID numerico che può essere usato per identificare univocamente il controllo della posizione; puoi usare questo valore insieme al metodo {{domxref("Geolocation.clearWatch()","clearWatch()")}} per fermare il controllo della posizione.

- -
navigator.geolocation.clearWatch(watchID);
-
- -

Risposta positiva

- -

Sia {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}} che {{domxref("Geolocation.watchPosition()","watchPosition()")}} accettano una risposta positiva, opzionalmente una risposta di errore e un oggetto PositionOptions.

- -

{{page("/en-US/docs/DOM/navigator.geolocation.getCurrentPosition","PositionOptions")}}

- -

Una chiamata a {{domxref("Geolocation.watchPosition()","watchPosition")}} è più o meno così:

- -
function geo_success(position) {
-  do_something(position.coords.latitude, position.coords.longitude);
-}
-
-function geo_error() {
-  alert("Nessuna posizione disponibile.");
-}
-
-var geo_options = {
-  enableHighAccuracy: true,
-  maximumAge        : 30000,
-  timeout           : 27000
-};
-
-var wpid = navigator.geolocation.watchPosition(geo_success, geo_error, geo_options);
- -

Descrivere una posizione

- -

La posizione dell'utente è descritta usando un oggetto Position, che deriva dall'oggetto Coordinates.

- -

{{page("/en-US/docs/DOM/navigator/geolocation/getCurrentPosition","Position")}}

- -

{{page("/en-US/docs/DOM/navigator/geolocation/getCurrentPosition","Coordinates")}}

- -

Errori

- -

La funzione che viene invocata in caso di errore quando si chiamano getCurrentPosition() o watchPosition() vuole un oggetto PositionError come primo parametro.

- -
function errorCallback(error) {
-  alert('ERROR(' + error.code + '): ' + error.message);
-};
-
- -

{{page("/en-US/docs/DOM/navigator/geolocation/getCurrentPosition","PositionError")}}

- -

Esempi live

- - - -

HTML Content

- -
<p><button onclick="geoFindMe()">Viasualizza la mia posizione</button></p>
-<div id="out"></div>
-
- -

JavaScript Content

- -
function geoFindMe() {
-  var output = document.getElementById("out");
-
-  if (!navigator.geolocation){
-    output.innerHTML = "<p>La geolocalizzazione non è supportata dal tuo browser</p>";
-    return;
-  }
-
-  function success(position) {
-    var latitude  = position.coords.latitude;
-    var longitude = position.coords.longitude;
-
-    output.innerHTML = '<p>Latitudine: ' + latitude + '° <br>Longitudine: ' + longitude + '°</p>';
-
-    var img = new Image();
-    img.src = "https://maps.googleapis.com/maps/api/staticmap?center=" + latitude + "," + longitude + "&zoom=13&size=300x300&sensor=false";
-
-    output.appendChild(img);
-  }
-
-  function error() {
-    output.innerHTML = "Impossibile calcolare la tua posizione";
-  }
-
-  output.innerHTML = "<p>Locating…</p>";
-
-  navigator.geolocation.getCurrentPosition(success, error);
-}
-
- -

Risultato live

- -

{{EmbedLiveSample('Geolocation_Live_Example', 350, 410)}}

- -

I permessi

- -

Tutte le estensioni presenti su addons.mozilla.org che richiedono la posizione sono obbligate a chiedere un permesso all'utente. La seguente funzione richiede il permesso per l'uso della posizione. La risposta dell'utente viene salvata nelle preferenze tramite il parametro pref. La funzione fornita nel parametro callback viene chiamata con un valore booleano (true o false) che indica la risposta dell'utente. Se la risposta è true, l'estensione può accedere alla posizione dell'utente.

- -
function prompt(window, pref, message, callback) {
-    let branch = Components.classes["@mozilla.org/preferences-service;1"]
-                           .getService(Components.interfaces.nsIPrefBranch);
-
-    if (branch.getPrefType(pref) === branch.PREF_STRING) {
-        switch (branch.getCharPref(pref)) {
-        case "always":
-            return callback(true);
-        case "never":
-            return callback(false);
-        }
-    }
-
-    let done = false;
-
-    function remember(value, result) {
-        return function() {
-            done = true;
-            branch.setCharPref(pref, value);
-            callback(result);
-        }
-    }
-
-    let self = window.PopupNotifications.show(
-        window.gBrowser.selectedBrowser,
-        "geolocation",
-        message,
-        "geo-notification-icon",
-        {
-            label: "Share Location",
-            accessKey: "S",
-            callback: function(notification) {
-                done = true;
-                callback(true);
-            }
-        }, [
-            {
-                label: "Always Share",
-                accessKey: "A",
-                callback: remember("always", true)
-            },
-            {
-                label: "Never Share",
-                accessKey: "N",
-                callback: remember("never", false)
-            }
-        ], {
-            eventCallback: function(event) {
-                if (event === "dismissed") {
-                    if (!done) callback(false);
-                    done = true;
-                    window.PopupNotifications.remove(self);
-                }
-            },
-            persistWhileVisible: true
-        });
-}
-
-prompt(window,
-       "extensions.foo-addon.allowGeolocation",
-       "Foo Add-on wants to know your location.",
-       function callback(allowed) { alert(allowed); });
-
- -

Compatibilità dei browser

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FunzionalitàChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Supporto base{{CompatChrome(5.0)}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.1")}}[1]910.60
- {{CompatNo}} 15.0
- 16.0		5
Secure origins only{{CompatChrome(50.0)}}{{CompatNo}}{{CompatGeckoDesktop("55")}}{{CompatNo}}3910
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FunzionalitàAndroidAndroid WebviewEdgeFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Supporto base{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("4")}}1.0.1{{CompatUnknown}}10.60
- {{CompatNo}} 15.0
- 16.0		3.2{{CompatVersionUnknown}}
Secure origins only{{CompatUnknown}}{{CompatChrome(50.0)}}{{CompatNo}}{{CompatGeckoMobile("55")}}   10.1{{CompatChrome(50.0)}}
-
- -

[1] Firefox calcola la tua posizione anche usando il tuo WiFi grazie ai Google Location Services. Durante il trasferimento tra Firefox e Google, i dati scambiati includono dei dati sul WiFi Access Point, un token di accesso (simile a un cookie) e l'indirizzo IP dell'utente. Per maggiori informazioni, dai un'occhiata alla Privacy Policy di Mozzilla e alla Privacy Policy di Google.

- -

[2] A causa del punto [1], questa API non si può usare in China. Puoi usare le API di Baidu o di Autonavi.

- -

Firefox 3.6 (Gecko 1.9.2) ha aggiunta il supporto per l'uso del servizio GPSD (GPS daemon) per usare la geolocalizzazione su Linux.

- -

Vedi anche

- - diff --git a/files/it/web/api/geolocation_api/index.html b/files/it/web/api/geolocation_api/index.html new file mode 100644 index 0000000000..303cb4a8bb --- /dev/null +++ b/files/it/web/api/geolocation_api/index.html @@ -0,0 +1,321 @@ +--- +title: Using geolocation +slug: Web/API/Geolocation/Using_geolocation +translation_of: Web/API/Geolocation_API +--- +

{{securecontext_header}}{{APIRef("Geolocation API")}}

+ +

Le API per la geolocalizzazione permettono agli utenti di fornire la propria posizione alle applicazioni web. Per ragioni di privacy, all'utente viene richiesta l'autorizzazione all'uso della posizione.

+ +

L'oggetto della geolocalizzazione

+ +

Le API di geolocalizzazione sono pubblicate tramite l'oggetto {{domxref("navigator.geolocation")}}.

+ +

Se l'oggetto esiste, il servizio di geolocalizzazione è disponibile. Puoi testare l'esistenza dell'oggetto tramite:

+ +
if ("geolocation" in navigator) {
+  /* la geolocalizzazione è disponibile */
+} else {
+  /* la geolocalizzazione NON È disponibile */
+}
+
+ +
+

Nota: Su Firefox 24 e versioni più vecchie, "geolocation" in navigator ritorna sempre true anche se l'API è stata disabilitata. Questa cosa è stata sistemata con Firefox 25. ({{bug(884921)}}).

+
+ +

Ottenere la posizione corrente

+ +

Per ottenere la posizione corrente dell'utente devi chiamare il metodo {{domxref("geolocation.getCurrentPosition()","getCurrentPosition()")}}. Viene così lanciata una richiesta asincrona che calcola la posizione attuale dell'utente. Quando la posizione viene calcolata, la funzione viene eseguita. Puoi creare una funzione che viene chiamata in caso di errore. Un terzo parametro opzionale è un oggetto che permette di settare il tempo massimo della posizione calcolata, il tempo di attessa per una nuova richiesta e la possibilità di usare la massima accuratezza per il cacolo della posizione.

+ +
+

Nota: Per default, {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}} cerca di calcolare la posizione nel modo più veloce possibile avendo però una bassa accuratezza. Questo metodo è utile se ti serve una risposta veloce. Dispositivi con il GPS possono richiedere anche alcuni minuti per fare un calcolo preciso della posizione, quindi dei dati meno accurati (come l'indirizzo IP o il wifi) possono essere usati da {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}.

+
+ +
navigator.geolocation.getCurrentPosition(function(position) {
+  do_something(position.coords.latitude, position.coords.longitude);
+});
+ +

L'esempio qui sopra chiama la funzione do_something() quando la posizione viene calcolata.

+ +

Controllare la posizione attuale

+ +

Se la posizione cambia (perché il dispositivo di sposta o perché viene calcolata una posizione più accurata), puoi settare una funzione che viene chiamata quando la posizione attuale si aggiorna. Basta usare la funzione {{domxref("Geolocation.watchPosition()","watchPosition()")}}, che ha gli stessi parametri di input di {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}. Questa funzione viene chiamata più volte così da permettere al browser di sapere sempre la posizione del dispositivo. La funzione di errore è opzionale come lo era per {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}.

+ +
+

Nota: Puoi usare {{domxref("Geolocation.watchPosition()","watchPosition()")}} senza una chiamata iniziale a {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}

+
+ +
var watchID = navigator.geolocation.watchPosition(function(position) {
+  do_something(position.coords.latitude, position.coords.longitude);
+});
+ +

Il metodo {{domxref("Geolocation.watchPosition()","watchPosition()")}} ritorna un ID numerico che può essere usato per identificare univocamente il controllo della posizione; puoi usare questo valore insieme al metodo {{domxref("Geolocation.clearWatch()","clearWatch()")}} per fermare il controllo della posizione.

+ +
navigator.geolocation.clearWatch(watchID);
+
+ +

Risposta positiva

+ +

Sia {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}} che {{domxref("Geolocation.watchPosition()","watchPosition()")}} accettano una risposta positiva, opzionalmente una risposta di errore e un oggetto PositionOptions.

+ +

{{page("/en-US/docs/DOM/navigator.geolocation.getCurrentPosition","PositionOptions")}}

+ +

Una chiamata a {{domxref("Geolocation.watchPosition()","watchPosition")}} è più o meno così:

+ +
function geo_success(position) {
+  do_something(position.coords.latitude, position.coords.longitude);
+}
+
+function geo_error() {
+  alert("Nessuna posizione disponibile.");
+}
+
+var geo_options = {
+  enableHighAccuracy: true,
+  maximumAge        : 30000,
+  timeout           : 27000
+};
+
+var wpid = navigator.geolocation.watchPosition(geo_success, geo_error, geo_options);
+ +

Descrivere una posizione

+ +

La posizione dell'utente è descritta usando un oggetto Position, che deriva dall'oggetto Coordinates.

+ +

{{page("/en-US/docs/DOM/navigator/geolocation/getCurrentPosition","Position")}}

+ +

{{page("/en-US/docs/DOM/navigator/geolocation/getCurrentPosition","Coordinates")}}

+ +

Errori

+ +

La funzione che viene invocata in caso di errore quando si chiamano getCurrentPosition() o watchPosition() vuole un oggetto PositionError come primo parametro.

+ +
function errorCallback(error) {
+  alert('ERROR(' + error.code + '): ' + error.message);
+};
+
+ +

{{page("/en-US/docs/DOM/navigator/geolocation/getCurrentPosition","PositionError")}}

+ +

Esempi live

+ + + +

HTML Content

+ +
<p><button onclick="geoFindMe()">Viasualizza la mia posizione</button></p>
+<div id="out"></div>
+
+ +

JavaScript Content

+ +
function geoFindMe() {
+  var output = document.getElementById("out");
+
+  if (!navigator.geolocation){
+    output.innerHTML = "<p>La geolocalizzazione non è supportata dal tuo browser</p>";
+    return;
+  }
+
+  function success(position) {
+    var latitude  = position.coords.latitude;
+    var longitude = position.coords.longitude;
+
+    output.innerHTML = '<p>Latitudine: ' + latitude + '° <br>Longitudine: ' + longitude + '°</p>';
+
+    var img = new Image();
+    img.src = "https://maps.googleapis.com/maps/api/staticmap?center=" + latitude + "," + longitude + "&zoom=13&size=300x300&sensor=false";
+
+    output.appendChild(img);
+  }
+
+  function error() {
+    output.innerHTML = "Impossibile calcolare la tua posizione";
+  }
+
+  output.innerHTML = "<p>Locating…</p>";
+
+  navigator.geolocation.getCurrentPosition(success, error);
+}
+
+ +

Risultato live

+ +

{{EmbedLiveSample('Geolocation_Live_Example', 350, 410)}}

+ +

I permessi

+ +

Tutte le estensioni presenti su addons.mozilla.org che richiedono la posizione sono obbligate a chiedere un permesso all'utente. La seguente funzione richiede il permesso per l'uso della posizione. La risposta dell'utente viene salvata nelle preferenze tramite il parametro pref. La funzione fornita nel parametro callback viene chiamata con un valore booleano (true o false) che indica la risposta dell'utente. Se la risposta è true, l'estensione può accedere alla posizione dell'utente.

+ +
function prompt(window, pref, message, callback) {
+    let branch = Components.classes["@mozilla.org/preferences-service;1"]
+                           .getService(Components.interfaces.nsIPrefBranch);
+
+    if (branch.getPrefType(pref) === branch.PREF_STRING) {
+        switch (branch.getCharPref(pref)) {
+        case "always":
+            return callback(true);
+        case "never":
+            return callback(false);
+        }
+    }
+
+    let done = false;
+
+    function remember(value, result) {
+        return function() {
+            done = true;
+            branch.setCharPref(pref, value);
+            callback(result);
+        }
+    }
+
+    let self = window.PopupNotifications.show(
+        window.gBrowser.selectedBrowser,
+        "geolocation",
+        message,
+        "geo-notification-icon",
+        {
+            label: "Share Location",
+            accessKey: "S",
+            callback: function(notification) {
+                done = true;
+                callback(true);
+            }
+        }, [
+            {
+                label: "Always Share",
+                accessKey: "A",
+                callback: remember("always", true)
+            },
+            {
+                label: "Never Share",
+                accessKey: "N",
+                callback: remember("never", false)
+            }
+        ], {
+            eventCallback: function(event) {
+                if (event === "dismissed") {
+                    if (!done) callback(false);
+                    done = true;
+                    window.PopupNotifications.remove(self);
+                }
+            },
+            persistWhileVisible: true
+        });
+}
+
+prompt(window,
+       "extensions.foo-addon.allowGeolocation",
+       "Foo Add-on wants to know your location.",
+       function callback(allowed) { alert(allowed); });
+
+ +

Compatibilità dei browser

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FunzionalitàChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Supporto base{{CompatChrome(5.0)}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.1")}}[1]910.60
+ {{CompatNo}} 15.0
+ 16.0		5
Secure origins only{{CompatChrome(50.0)}}{{CompatNo}}{{CompatGeckoDesktop("55")}}{{CompatNo}}3910
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FunzionalitàAndroidAndroid WebviewEdgeFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Supporto base{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("4")}}1.0.1{{CompatUnknown}}10.60
+ {{CompatNo}} 15.0
+ 16.0		3.2{{CompatVersionUnknown}}
Secure origins only{{CompatUnknown}}{{CompatChrome(50.0)}}{{CompatNo}}{{CompatGeckoMobile("55")}}   10.1{{CompatChrome(50.0)}}
+
+ +

[1] Firefox calcola la tua posizione anche usando il tuo WiFi grazie ai Google Location Services. Durante il trasferimento tra Firefox e Google, i dati scambiati includono dei dati sul WiFi Access Point, un token di accesso (simile a un cookie) e l'indirizzo IP dell'utente. Per maggiori informazioni, dai un'occhiata alla Privacy Policy di Mozzilla e alla Privacy Policy di Google.

+ +

[2] A causa del punto [1], questa API non si può usare in China. Puoi usare le API di Baidu o di Autonavi.

+ +

Firefox 3.6 (Gecko 1.9.2) ha aggiunta il supporto per l'uso del servizio GPSD (GPS daemon) per usare la geolocalizzazione su Linux.

+ +

Vedi anche

+ + diff --git a/files/it/web/api/htmlhyperlinkelementutils/index.html b/files/it/web/api/htmlhyperlinkelementutils/index.html new file mode 100644 index 0000000000..05cc01aa9b --- /dev/null +++ b/files/it/web/api/htmlhyperlinkelementutils/index.html @@ -0,0 +1,205 @@ +--- +title: URLUtils +slug: Web/API/URLUtils +translation_of: Web/API/HTMLHyperlinkElementUtils +--- +

{{ApiRef("URL API")}}{{SeeCompatTable}}

+ +

The URLUtils interface defines utility methods to work with URLs.

+ +

There are no objects of this type, but several objects implement it, such as {{domxref("Location")}}, {{domxref("URL")}}, {{domxref("HTMLAnchorElement")}}, and {{domxref("HTMLAreaElement")}}.

+ +

Properties

+ +

This interface doesn't inherit any property.

+ +
+
{{domxref("URLUtils.href")}}
+
Is a {{domxref("DOMString")}} containing the whole URL.
+
{{domxref("URLUtils.protocol")}}
+
Is a {{domxref("DOMString")}} containing the protocol scheme of the URL, including the final ':'.
+
{{domxref("URLUtils.host")}}
+
Is a {{domxref("DOMString")}} containing the host, that is the hostname, and then, if the port of the URL is not empty (which can happen because it was not specified or because it was specified to be the default port of the URL's scheme), a ':', and the port of the URL.
+
{{domxref("URLUtils.hostname")}}
+
Is a {{domxref("DOMString")}} containing the domain of the URL.
+
{{domxref("URLUtils.port")}}
+
Is a {{domxref("DOMString")}} containing the port number of the URL.
+
{{domxref("URLUtils.pathname")}}
+
Is a {{domxref("DOMString")}} containing an initial '/' followed by the path of the URL.
+
{{domxref("URLUtils.search")}}
+
Is a {{domxref("DOMString")}} containing a '?' followed by the parameters of the URL.
+
{{domxref("URLUtils.hash")}}
+
Is a {{domxref("DOMString")}} containing a '#' followed by the fragment identifier of the URL.
+
{{domxref("URLUtils.username")}}
+
Is a {{domxref("DOMString")}} containing the username specified before the domain name.
+
{{domxref("URLUtils.password")}}
+
Is a {{domxref("DOMString")}} containing the password specified before the domain name.
+
{{domxref("URLUtils.origin")}} {{readonlyInline}}
+
Returns a {{domxref("DOMString")}} containing the origin of the URL, that is its scheme, its domain and its port.
+
{{domxref("URLUtils.searchParams")}}
+
Returns a {{domxref("URLSearchParams")}} object allowing to access the GET query arguments contained in the URL.
+
+ +

Methods

+ +

This interface doesn't inherit any method.

+ +
+
{{domxref("URLUtils.toString()")}}
+
Returns a {{domxref("DOMString")}} containing the whole URL. It is a synonym for {{domxref("URLUtils.href")}}, though it can't be used to modify the value.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('URL', '#urlutils', 'URLUtils')}}{{Spec2('URL')}}Initial definition
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatNo}} [1]{{CompatGeckoDesktop("22")}} [1]{{CompatNo}} [1]{{CompatNo}} [1]{{CompatNo}} [1]
searchParams{{CompatUnknown}}{{CompatGeckoDesktop("29")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
username and password{{CompatUnknown}}{{CompatGeckoDesktop("26")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
origin {{CompatUnknown}}{{CompatGeckoDesktop("26")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
origin on Windows.location{{CompatUnknown}}{{CompatGeckoDesktop("21")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}} [1]{{CompatNo}} [1]{{CompatGeckoMobile("22")}} [1]{{CompatNo}} [1]{{CompatNo}} [1]{{CompatNo}} [1]
searchParams{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
username and password{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("26")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
origin {{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("26")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
origin on Windows.location{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("21")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Though not grouped in a single abstract interface, these methods are directly available on the interfaces that implement it, if this interface is supported.

+ +

See also

+ + + +

+
+
+ +
 
+
diff --git a/files/it/web/api/keyboardevent/charcode/index.html b/files/it/web/api/keyboardevent/charcode/index.html new file mode 100644 index 0000000000..fb785e722e --- /dev/null +++ b/files/it/web/api/keyboardevent/charcode/index.html @@ -0,0 +1,49 @@ +--- +title: event.charCode +slug: Web/API/Event/charCode +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/KeyboardEvent/charCode +--- +

{{ ApiRef() }}

+

Sommario

+

Restituisce il valore Unicode del tasto carattere che è stato premuto e ha scatenato un evento keypress.

+

Sintassi

+
valore = event.charCode
+
+ +

Esempio

+
<html>
+<head>
+<title>esempio di charCode</title>
+
+<script type="text/javascript">
+
+function mostraCarattere(e)
+{
+alert("Tasto premuto: " + String.fromCharCode(e.charCode) + "\n"
+      + "Codice carattere: " + e.charCode);
+}
+
+</script>
+</head>
+
+<body onkeypress="mostraCarattere(event);">
+<p>Premere un qualsiasi tasto carattere.</p>
+</body>
+</html>
+
+

Note

+

In un evento keypress, il valore Unicode del tasto premuto viene registrato nella proprietà keyCode oppure nella proprietà charCode, mai in entrambe. Se il tasto premuto corrisponde a un carattere (per esempio 'a'), charCode assume il valore Unicode di quel carattere (che è diverso per le maiuscole e per le minuscole). In caso contrario, il codice del tasto premuto viene registrato nella proprietà keyCode.

+

charCode non viene mai impostato durante gli eventi keydown e keyup. In questi casi, viene impostato keyCode.

+

Per leggere il codice del tasto indipendentemente dal fatto che esso si trovi in keyCode o in charCode, si può utilizzare la proprietà which.

+

I caratteri inseriti attraverso un IME non vengono registrati nè in keyCode nè in charCode.

+

Per una lista dei possibili valori di charCode e per conoscere i tasti ai quali sono associati, vedere l'esempio Reference del DOM di Gecko:Esempi #Example 7: Mostrare le costanti dell'oggetto Event.

+

Specifiche

+

Non è parte di alcuna specifica. Si veda nsIDOMKeyEvent

+

{{ languages( { "en": "en/DOM/event.charCode", "pl": "pl/DOM/event.charCode" } ) }}

diff --git a/files/it/web/api/keyboardevent/keycode/index.html b/files/it/web/api/keyboardevent/keycode/index.html new file mode 100644 index 0000000000..40dac8122d --- /dev/null +++ b/files/it/web/api/keyboardevent/keycode/index.html @@ -0,0 +1,49 @@ +--- +title: event.keyCode +slug: Web/API/Event/keyCode +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/KeyboardEvent/keyCode +translation_of_original: Web/API/event.keyCode +--- +

{{ ApiRef() }}

+

Sommario

+

Restituisce il valore Unicode di un tasto non-carattere che è stato premuto scatenando un evento keypress, oppure il valore di qualsiasi tasto premuto scatenando un qualsiasi altro evento relativo alla tastiera.

+

Sintassi

+
valore = event.keyCode
+
+ +

Esempio

+
<html>
+<head>
+<title>esempio di keyCode</title>
+
+<script type="text/javascript">
+
+function mostraCodiceTasto(e)
+{
+alert("Codice del tasto premuto: " + e.keyCode + "\n");
+}
+
+</script>
+</head>
+
+<body onkeydown="mostraCodiceTasto(event);">
+<p>Premere un tasto qualsiasi.</p>
+</body>
+</html>
+
+

Note

+

In un evento keypress, il valore Unicode del tasto premuto viene registrato nella proprietà keyCode oppure nella proprietà charCode, mai in entrambe. Se il tasto premuto corrisponde a un carattere (per esempio 'a'), charCode assume il valore Unicode di quel carattere (che è diverso per le maiuscole e per le minuscole). In caso contrario, il codice del tasto premuto viene registrato nella proprietà keyCode.

+

charCode non viene mai impostato durante gli eventi keydown e keyup. In questi casi, viene impostato keyCode.

+

Per leggere il codice del tasto indipendentemente dal fatto che esso si trovi in keyCode o in charCode, si può utilizzare la proprietà which.

+

I caratteri inseriti attraverso un IME non vengono registrati nè in keyCode nè in charCode.

+

Per una lista dei possibili valori di charCode e per conoscere i tasti ai quali sono associati, vedere l'esempio Reference del DOM di Gecko:Esempi #Example 7: Mostrare le costanti dell'oggetto Event.

+

Specifiche

+

Non è parte di alcuna specifica. Si veda nsIDOMKeyEvent

+

{{ languages( { "en": "en/DOM/event.keyCode", "pl": "pl/DOM/event.keyCode" } ) }}

diff --git a/files/it/web/api/keyboardevent/which/index.html b/files/it/web/api/keyboardevent/which/index.html new file mode 100644 index 0000000000..0ab544b60c --- /dev/null +++ b/files/it/web/api/keyboardevent/which/index.html @@ -0,0 +1,60 @@ +--- +title: event.which +slug: Web/API/Event/which +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/KeyboardEvent/which +--- +

{{ ApiRef() }}

+

Sommario

+

Restituisce il valore di keyCode se il tasto premuto non è un tasto carattere, altrimenti restituisce il valore di charCode se è stato premuto un tasto alfanumerico.

+

Sintassi

+
int = event.which
+
+

int è il codice numerico del tasto che è stato premuto, sia esso alfanumerico oppure no. Si vedano charCode e keyCode per ulteriori informazioni.

+

Esempio

+
<html>
+<head>
+<title>esempio con charCode/keyCode/which</title>
+
+<script type="text/javascript">
+
+function mostraTastoPremuto(evt)
+{
+alert("Evento onkeypress: \n"
+      + "proprietà keyCode: " + evt.keyCode + "\n"
+      + "proprietà which: " + evt.which + "\n"
+      + "proprietà charCode: " + evt.charCode + "\n"
+      + "Tasto premuto (se alfanumerico): "
+      + String.fromCharCode(evt.charCode) + "\n"
+     );
+}
+
+
+function pressioneTasto(evt)
+{
+alert("onkeydown handler: \n"
+      + "proprietà keyCode: " + evt.keyCode + "\n"
+      + "proprietà which: " + evt.which + "\n"
+     );
+}
+
+
+</script>
+</head>
+
+<body
+ onkeypress="mostraTastoPremuto(event);"
+ onkeydown="pressioneTasto(event);"
+>
+
+<p>Premere un tasto</p>
+
+</body>
+</html>
+
+

Specifiche

+

Non è parte di alcuna specifica.

diff --git a/files/it/web/api/mouseevent/altkey/index.html b/files/it/web/api/mouseevent/altkey/index.html new file mode 100644 index 0000000000..02412cfe6c --- /dev/null +++ b/files/it/web/api/mouseevent/altkey/index.html @@ -0,0 +1,47 @@ +--- +title: event.altKey +slug: Web/API/Event/altKey +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/MouseEvent/altKey +translation_of_original: Web/API/event.altKey +--- +

{{ ApiRef() }}

+

Sommario

+

Indica se il tasto ALT era premuto mentre l'evento si verificava.

+

Syntax

+
bool = event.altKey
+
+

bool vale true se il tasto ALT era premuto, altrimenti false.

+

Esempio

+
<html>
+<head>
+<title>esempio tasto ALT</title>
+
+<script type="text/javascript">
+
+function mostraCarattere(e){
+  alert(
+    "Tasto premuto: " + String.fromCharCode(e.charCode) + "\n"
+    + "Codice carattere: " + e.charCode + "\n"
+    + "Tasto ALT premuto: " + e.altKey + "\n"
+  );
+}
+
+</script>
+</head>
+
+<body onkeypress="mostraCarattere(event);">
+<p>
+Prova a premere un tasto tenendo premuto ALT e prova a premere un tasto senza premere ALT.<br />
+Puoi anche provare a premere ALT+SHIFT.
+</p>
+</body>
+</html>
+
+

Specifiche

+

altKey

+

{{ languages( { "en": "en/DOM/event.altKey", "pl": "pl/DOM/event.altKey" } ) }}

diff --git a/files/it/web/api/mouseevent/button/index.html b/files/it/web/api/mouseevent/button/index.html new file mode 100644 index 0000000000..7c1f181858 --- /dev/null +++ b/files/it/web/api/mouseevent/button/index.html @@ -0,0 +1,58 @@ +--- +title: event.button +slug: Web/API/Event/button +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/MouseEvent/button +translation_of_original: Web/API/event.button +--- +

{{ ApiRef() }}

+

Sommario

+

Restituisce un intero che indica quale tasto del mouse è stato premuto.

+

Sintassi

+
var codiceBottone = event.button;
+
+

codiceBottone può assumere uno dei seguenti valori:

+ +

L'ordine dei bottoni è inverso se il mouse è configurato per l'utilizzo da parte dei mancini.

+

Esempio

+
<script type="text/javascript">
+
+function qualeTasto(e)
+{
+  var e = e || window.event;
+  var codiceTasto;
+
+  if ('object' == typeof e){
+    codiceTasto = e.button;
+
+    switch (codiceTasto){
+      case 0  : alert('Hai premuto il tasto sinistro');
+                break;
+      case 1  : alert('Hai premuto il tasto centrale');
+                break;
+      case 2  : alert('Hai premuto il tasto destro');
+                break;
+      default : alert('Codice sconosciuto: ' + btnCode);
+    }
+  }
+}
+
+</script>
+
+<p onclick="qualeBottone(event);">Clicca con il mouse...</p>
+
+
+

Note

+

Poichè i click del mouse spesso vengono intercettati dall'interfaccia utente, in alcuni casi potrebbe essere difficile rilevare la pressione di un bottone che non sia quello standard (generalmente il sinistro).

+

Gli utenti possono cambiare la configurazione dei tasti del loro dispositivo di puntamento in modo tale che se il valore di codiceBottone è 0, questo non è causato dal tasto che si trova fisicamente a sinistra, ma questo non ha molta importanza.

+

Specifiche

+

DOM 2 Events Specification: button

+

{{ languages( { "en": "en/DOM/event.button", "pl": "pl/DOM/event.button" } ) }}

diff --git a/files/it/web/api/mouseevent/ctrlkey/index.html b/files/it/web/api/mouseevent/ctrlkey/index.html new file mode 100644 index 0000000000..195374d673 --- /dev/null +++ b/files/it/web/api/mouseevent/ctrlkey/index.html @@ -0,0 +1,45 @@ +--- +title: event.ctrlKey +slug: Web/API/Event/ctrlKey +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/MouseEvent/ctrlKey +translation_of_original: Web/API/event.ctrlKey +--- +

{{ ApiRef() }}

+

Sommario

+

Indica se il tasto CTRL è stato premuto mentre l'evento si verificava.

+

Sintassi

+
bool = event.ctrlKey
+
+

bool vale true se il tasto CTRL era premuto, altrimenti false.

+

Esempio

+
<html>
+<head>
+<title>esempio tasto control</title>
+
+<script type="text/javascript">
+
+function mostraCarattere(e){
+  alert(
+    "Tasto premuto: " + String.fromCharCode(e.charCode) + "\n"
+    + "Codice carattere: " + e.charCode + "\n"
+    + "Tasto CTRL premuto: " + e.ctrlKey + "\n"
+  );
+}
+
+</script>
+</head>
+
+<body onkeypress="mostraCarattere(event);">
+<p>Prova a premere un tasto tenendo premuto CTRL e prova a premere un tasto senza premere CTRL.<br />
+Puoi anche provare a premere CTRL+SHIFT.</p>
+</body>
+</html>
+
+

Specifiche

+

ctrlKey

+

{{ languages( { "en": "en/DOM/event.ctrlKey", "pl": "pl/DOM/event.ctrlKey" } ) }}

diff --git a/files/it/web/api/mouseevent/metakey/index.html b/files/it/web/api/mouseevent/metakey/index.html new file mode 100644 index 0000000000..e40fa17379 --- /dev/null +++ b/files/it/web/api/mouseevent/metakey/index.html @@ -0,0 +1,31 @@ +--- +title: event.metaKey +slug: Web/API/Event/metaKey +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/MouseEvent/metaKey +translation_of_original: Web/API/event.metaKey +--- +

{{ ApiRef() }}

+

Sommario

+

Indica se il tasto META era premuto mentre l'evento si verificava. Questo tasto è il tasto Apple sui computer Mac, il tasto Windows sui pc con tastiere per Windows sui quali gira questo sistema operativo e potrebbe corrispondere ad altri tasti su altre piattaforme. Non esiste però un unico tasto standard sulla cui presenza si possa fare affidamento per qualsiasi tipo di piattaforma.

+

Sintassi

+
bool = event.metaKey
+
+

bool vale true se il tasto META era premuto, altrimenti false.

+

Esempio

+
 function leggiInput(e) {
+ // controlla il tasto meta
+   if e.metaKey
+        // se era premuto si comporta di conseguenza
+     outputBellissimo(e);
+   else
+     outputMediocre(e)
+ }
+
+

Specifiche

+

metaKey

+

{{ languages( { "en": "en/DOM/event.metaKey", "pl": "pl/DOM/event.metaKey" } ) }}

diff --git a/files/it/web/api/mouseevent/shiftkey/index.html b/files/it/web/api/mouseevent/shiftkey/index.html new file mode 100644 index 0000000000..17a581937f --- /dev/null +++ b/files/it/web/api/mouseevent/shiftkey/index.html @@ -0,0 +1,46 @@ +--- +title: event.shiftKey +slug: Web/API/Event/shiftKey +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/MouseEvent/shiftKey +translation_of_original: Web/API/event.shiftKey +--- +

{{ ApiRef() }}

+

Sommario

+

Indica se il tasto SHIFT è stato premuto durante l'evento.

+

Sintassi

+
bool = event.shiftKey
+
+

bool restituisce true se il tasto SHIFT era premuto mentre l'evento si verificava, altrimenti false.

+

Esempio

+
<html>
+<head>
+<title>esempio tasto shift</title>
+
+<script type="text/javascript">
+
+function mostraCarattere(e){
+  alert(
+    "Tasto premuto: " + String.fromCharCode(e.charCode) + "\n"
+    + "Codice carattere: " + e.charCode + "\n"
+    + "Tasto SHIFT premuto: " + e.shiftKey + "\n"
+    + "Tasto ALT premuto: " + e.altKey + "\n"
+  );
+}
+
+</script>
+</head>
+
+<body onkeypress="mostraCarattere(event);">
+<p>Prova a premere un tasto tenendo premuto SHIFT e prova a premere un tasto senza premere SHIFT.<br />
+Puoi anche provare a premere SHIFT+ALT.</p>
+</body>
+</html>
+
+

Specifiche

+

shiftKey

+

{{ languages( { "en": "en/DOM/event.shiftKey", "pl": "pl/DOM/event.shiftKey" } ) }}

diff --git a/files/it/web/api/node/childnodes/index.html b/files/it/web/api/node/childnodes/index.html new file mode 100644 index 0000000000..f56bcc4380 --- /dev/null +++ b/files/it/web/api/node/childnodes/index.html @@ -0,0 +1,99 @@ +--- +title: Node.childNodes +slug: Web/API/Element/childNodes +translation_of: Web/API/Node/childNodes +--- +
+
{{APIRef("DOM")}}
+
+ +

La proprietà di sola lettura Node.childNodes restituisce una {{domxref("NodeList")}} dinamica di {{domxref("Node","nodi")}} figli dell'elemento dato in cui il primo nodo figlio viene assegnato all'indice 0.

+ +

Sintassi

+ +
var nodeList = elementNodeReference.childNodes;
+
+ +

Esempi

+ +

Utilizzo semplice

+ +
// parg è un riferimento a un elemento <p>
+
+// Innanzitutto controlliamo che l'elemento abbia dei nodi figli
+if (parg.hasChildNodes()) {
+  var children = parg.childNodes;
+
+  for (var i = 0; i < children.length; i++) {
+    // fare qualcosa con ogni bambino da children[i]
+    // NOTA: l'elenco è dinamico, l'aggiunta o la rimozione di bambini modificherà l'elenco
+  }
+}
+ +

Rimuovi tutti i bambini da un nodo

+ +
// Questo è un modo per rimuovere tutti i bambini da una
+// finestra di nodo è un riferimento ad un oggetto
+
+while (box.firstChild) {
+    //L'elenco è DINAMICO, quindi indicizzerà nuovamente ogni chiamata
+    box.removeChild(box.firstChild);
+}
+ +

Appunti

+ +

Gli elementi nella raccolta di nodi sono oggetti e non stringhe. Per ottenere dati da oggetti nodo, usa le loro proprietà (ad esempio elementNodeReference.childNodes[1].nodeName per ottenere il nome, ecc.).

+ +

L'oggetto document ha 2 figli: la dichiarazione Doctype e l'elemento root, in genere documentElement. (Nei documenti (X)HTML questo è l'elemento HTML.)

+ +

childNodes include tutti i nodi figli, inclusi nodi non-elemento come nodi di testo e commenti. Per ottenere una raccolta di soli elementi, usa {{domxref("ParentNode.children")}}.

+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('DOM WHATWG', '#dom-node-childnodes', 'Node.childNodes')}}{{Spec2('DOM WHATWG')}}Nessun cambiamento
{{SpecName('DOM3 Core', 'core.html#ID-1451460987', 'Node.childNodes')}}{{Spec2('DOM3 Core')}}Nessun cambiamento
{{SpecName('DOM2 Core', 'core.html#ID-1451460987', 'Node.childNodes')}}{{Spec2('DOM2 Core')}}Nessun cambiamento
{{SpecName('DOM1', 'level-one-core.html#ID-1451460987', 'Node.childNodes')}}{{Spec2('DOM1')}}Definizione iniziale
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Node.childNodes")}}

+ +

Vedi anche

+ + diff --git a/files/it/web/api/node/firstchild/index.html b/files/it/web/api/node/firstchild/index.html new file mode 100644 index 0000000000..b5052f5dfe --- /dev/null +++ b/files/it/web/api/node/firstchild/index.html @@ -0,0 +1,90 @@ +--- +title: Node.firstChild +slug: Web/API/Element/firstChild +tags: + - API + - DOM + - Node + - Proprietà + - Referenza +translation_of: Web/API/Node/firstChild +--- +
{{APIRef("DOM")}}
+ +

La proprietà di sola lettura Node.firstChild restituisce il primo figlio del nodo nell'albero o null se il nodo non ha figli. Se il nodo è un Document, restituisce il primo nodo nell'elenco dei suoi figli diretti.

+ +

Sintassi

+ +
var childNode = node.firstChild;
+
+ +

Esempio

+ +

Questo esempio dimostra l'uso di firstChild e il modo in cui i nodi degli spazi bianchi potrebbero interferire con l'utilizzo di questa proprietà.

+ +
<p id="para-01">
+  <span>First span</span>
+</p>
+
+<script>
+  var p01 = document.getElementById('para-01');
+  console.log(p01.firstChild.nodeName);
+</script>
+ +

In quanto sopra, la console console mostrerà '#text' perché viene inserito un nodo di testo per mantenere lo spazio bianco tra la fine dei tag di apertura <p> e <span>. Qualsiasi spazio bianco creerà un nodo #text da un singolo spazio a più spazi, ritorni, schede e così via.

+ +

Un altro nodo #text viene inserito tra i tag di chiusura </span> e </p>.

+ +

Se questo spazio viene rimosso dall'origine, i nodi #text non vengono inseriti e l'elemento span diventa il primo figlio del paragrafo.

+ +
<p id="para-01"><span>First span</span></p>
+
+<script>
+  var p01 = document.getElementById('para-01');
+  console.log(p01.firstChild.nodeName);
+</script>
+
+ +

Ora l'avviso mostrerà 'SPAN'.

+ +

Per evitare il problema con node.firstChild che restituisce i nodi #text o #comment, {{domxref("ParentNode.firstElementChild")}} può essere utilizzato per restituire solo il primo nodo elemento. Tuttavia, node.firstElementChild richiede uno shim per Internet Explorer 9 e versioni precedenti.

+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommentp
{{SpecName('DOM WHATWG', '#dom-node-firstchild', 'Node.firstChild')}}{{Spec2('DOM WHATWG')}}Nessun cambiamento
{{SpecName('DOM3 Core', 'core.html#ID-169727388', 'Node.firstChild')}}{{Spec2('DOM3 Core')}}Nessun cambiamento
{{SpecName('DOM2 Core', 'core.html#ID-169727388', 'Node.firstChild')}}{{Spec2('DOM2 Core')}}Nessun cambiamento
{{SpecName('DOM1', 'level-one-core.html#ID-169727388', 'Node.firstChild')}}{{Spec2('DOM1')}}Definizione iniziale
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Node.firstChild")}}

diff --git a/files/it/web/api/node/namespaceuri/index.html b/files/it/web/api/node/namespaceuri/index.html new file mode 100644 index 0000000000..fc29e0f121 --- /dev/null +++ b/files/it/web/api/node/namespaceuri/index.html @@ -0,0 +1,30 @@ +--- +title: document.namespaceURI +slug: Web/API/Document/namespaceURI +translation_of: Web/API/Node/namespaceURI +translation_of_original: Web/API/Document/namespaceURI +--- +
{{APIRef("DOM")}}
+ +

namespaceURI restituisce lo spazio dei nomi XML del documento corrente.

+ +

Sintassi

+ +
NSURI = document.namespaceURI
+
+ +

Parametri

+ + + +

Note

+ +

Il DOM di per sè non supporta la validazione del namespace. Spetta all'applicazione DOM effettuare la necessaria validazione. Si noti inoltre che il prefisso del namespace, una volta associato a un nodo particolare, non può più cambiare.

+ +

Specifiche

+ +

DOM Level 2 Core: namespaceURI

+ +

{{ languages( { "fr": "fr/DOM/document.namespaceURI", "pl": "pl/DOM/document.namespaceURI" } ) }}

diff --git a/files/it/web/api/node/nodename/index.html b/files/it/web/api/node/nodename/index.html new file mode 100644 index 0000000000..2030226b37 --- /dev/null +++ b/files/it/web/api/node/nodename/index.html @@ -0,0 +1,116 @@ +--- +title: Node.nodeName +slug: Web/API/Element/nodeName +tags: + - API + - DOM + - Gecko + - NeedsSpecTable + - Node + - Property + - Read-only +translation_of: Web/API/Node/nodeName +--- +
{{APIRef("DOM")}}
+ +

La proprietà di sola lettura nodeName restituisce il nome dell'attuale {{domxref("Node")}} come stringa.

+ +

Sintassi

+ +
var str = node.nodeName;
+
+ +

Valore

+ +

Una {{domxref("DOMString")}}. I valori per i diversi tipi di nodi sono:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Interfacciavalore nodeName
{{domxref("Attr")}}Il valore di {{domxref("Attr.name")}}
{{domxref("CDATASection")}}"#cdata-section"
{{domxref("Comment")}}"#comment"
{{domxref("Document")}}"#document"
{{domxref("DocumentFragment")}}"#document-fragment"
{{domxref("DocumentType")}}Il valore di {{domxref("DocumentType.name")}}
{{domxref("Element")}}Il valore di {{domxref("Element.tagName")}}
{{domxref("Entity")}}Il nome dell'entità
{{domxref("EntityReference")}}Il nome del riferimento all'entità
{{domxref("Notation")}}Il nome della notazione
{{domxref("ProcessingInstruction")}}Il valore di {{domxref("ProcessingInstruction.target")}}
{{domxref("Text")}}"#text"
+ +

Esempio

+ +

Dato il seguente markup:

+ +
<div id="d1">hello world</div>
+<input type="text" id="t">
+
+ +

e il seguente script:

+ +
var div1 = document.getElementById("d1");
+var text_field = document.getElementById("t");
+
+text_field.value = div1.nodeName;
+
+ +

IIn XHTML (o in qualsiasi altro formato XML), il valore di text_field sarebbe letto "div". Tuttavia, in HTML, il valore di text_field sarebbe letto "DIV", poichè nodeName e tagName restituiscono in maiuscolo gli elementi HTML nei DOM contrassegnati come documenti HTML. Read more details on nodeName case sensitivity in different browsers.

+ +

Nota che la proprietà {{domxref("Element.tagName")}} potrebbe essere stata utilizzata, poiché nodeName ha lo stesso valore di tagName per un elemento. Tieni presente, tuttavia, che nodeName ritornerà "#text" per i nodi di testo mentre tagName restituirà undefined.

+ +

Specifiche

+ + + +

Compatibilità con i browser

+ + + +

{{Compat("api.Node.nodeName")}}

diff --git a/files/it/web/api/node/nodetype/index.html b/files/it/web/api/node/nodetype/index.html new file mode 100644 index 0000000000..fba395288a --- /dev/null +++ b/files/it/web/api/node/nodetype/index.html @@ -0,0 +1,178 @@ +--- +title: Node.nodeType +slug: Web/API/Element/nodeType +tags: + - API + - DOM + - Proprietà + - Referenza +translation_of: Web/API/Node/nodeType +--- +
{{APIRef("DOM")}}
+ +

La proprietà di sola lettura Node.nodeType è un numero intero che identifica il nodo. Distingue tra diversi tipi di nodi tra loro, come {{domxref("Element", "elements")}}, {{domxref("Text", "text")}} and {{domxref("Comment", "comments")}}.

+ +

Sintassi

+ +
var type = node.nodeType;
+
+ +

Restituisce un numero intero che specifica il tipo del nodo. I valori possibili sono elencati in {{anch("Tipi di nodi costanti")}}.

+ +

Constanti

+ +

Tipi di nodi costanti

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ConstanteValoreDescrizione
Node.ELEMENT_NODE1Un nodo {{domxref("Element")}} come {{HTMLElement("p")}} o {{HTMLElement("div")}}.
Node.TEXT_NODE3L'attuale {{domxref("Text")}} dentro un {{domxref("Element")}} o {{domxref("Attr")}}.
Node.CDATA_SECTION_NODE4Una {{domxref("CDATASection")}}, ad esempio <!CDATA[[ … ]]>.
Node.PROCESSING_INSTRUCTION_NODE7Una {{domxref("ProcessingInstruction")}} di un documento XML, come <?xml-stylesheet … ?>.
Node.COMMENT_NODE8Un nodo {{domxref("Comment")}}, come <!-- … -->.
Node.DOCUMENT_NODE9Un nodo {{domxref("Document")}}.
Node.DOCUMENT_TYPE_NODE10Un nodo {{domxref("DocumentType")}}, come <!DOCTYPE html>.
Node.DOCUMENT_FRAGMENT_NODE11Un nodo {{domxref("DocumentFragment")}}.
+ +

Tipi di nodo deprecati {{deprecated_inline()}}

+ +
+

Le seguenti costanti sono state deprecate e non dovrebbero essere più utilizzate.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ConstanteValoreDescrizione
Node.ATTRIBUTE_NODE2Un {{domxref("Attr", "Attribute")}} di un {{domxref("Element")}}. Gli attributi non implementano più l'interfaccia {{domxref("Node")}} dal {{SpecName("DOM4")}}.
Node.ENTITY_REFERENCE_NODE5Un nodo di riferimento di entità XML, come &foo;. Rimosso nel {{SpecName("DOM4")}}.
Node.ENTITY_NODE6Un nodo XML <!ENTITY …>. Rimosso nel {{SpecName("DOM4")}}.
Node.NOTATION_NODE12Un nodo XML <!NOTATION …>. Rimosso nel {{SpecName("DOM4")}}.
+ +

Esempi

+ +

Diversi tipi di nodi

+ +
document.nodeType === Node.DOCUMENT_NODE; // true
+document.doctype.nodeType === Node.DOCUMENT_TYPE_NODE; // true
+
+document.createDocumentFragment().nodeType === Node.DOCUMENT_FRAGMENT_NODE; // true
+
+var p = document.createElement("p");
+p.textContent = "Once upon a time…";
+
+p.nodeType === Node.ELEMENT_NODE; // true
+p.firstChild.nodeType === Node.TEXT_NODE; // true
+
+ +

Commenti

+ +

Questo esempio controlla se il primo nodo all'interno dell'elemento del documento è un commento e visualizza un messaggio in caso contrario.

+ +
var node = document.documentElement.firstChild;
+if (node.nodeType !== Node.COMMENT_NODE) {
+  console.warn("Dovresti commentare il tuo codice!");
+}
+
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('DOM WHATWG', '#dom-node-nodetype', 'Node.nodeType')}}{{Spec2('DOM WHATWG')}}Deprecated ATTRIBUTE_NODE, ENTITY_REFERENCE_NODE and NOTATION_NODE types.
{{SpecName('DOM3 Core', 'core.html#ID-1950641247', 'Node.nodeType')}}{{Spec2('DOM3 Core')}}Nessun cambiamento.
{{SpecName('DOM2 Core', 'core.html#ID-111237558', 'Node.nodeType')}}{{Spec2('DOM2 Core')}}Nessun cambiamento.
{{SpecName('DOM1', 'level-one-core.html#ID-111237558', 'Node.nodeType')}}{{Spec2('DOM1')}}Definizione iniziale.
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Node.nodeType")}}

diff --git a/files/it/web/api/node/nodevalue/index.html b/files/it/web/api/node/nodevalue/index.html new file mode 100644 index 0000000000..547ba77939 --- /dev/null +++ b/files/it/web/api/node/nodevalue/index.html @@ -0,0 +1,75 @@ +--- +title: element.nodeValue +slug: Web/API/Element/nodeValue +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Node/nodeValue +--- +

{{ ApiRef() }}

+

Sommario

+

Restituisce il valore del nodo corrente.

+

Sintassi

+
valore = document.nodeValue
+
+

valore è una stringa contenente il valore del nodo corrente, se esiste.

+

Note

+

La proprietà nodeValue dell'intero documento, restituisce null. Per un nodo di tipo testo, commento o CDATA, nodeValue restituisce il contenuto del nodo. Per i nodi attributo, restituisce il valore dell'attributo.

+

La tabella seguente mostra i valori restituiti per i vari tipi di elementi:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Attril valore dell'attributo
CDATASectionil contenuto della sezione CDATA
Commentil commento
Documentnull
DocumentFragmentnull
DocumentTypenull
Elementnull
NamedNodeMapnull
EntityReferencenull
Notationnull
ProcessingInstructionl'intero contenuto, escluso il target
Textil contenuto del nodo testo
+

Quando nodeValue è impostato a null, reimpostarlo non ha alcun effetto.

+

Specifiche

+

nodeValue

diff --git a/files/it/web/api/node/parentnode/index.html b/files/it/web/api/node/parentnode/index.html new file mode 100644 index 0000000000..03e89aa432 --- /dev/null +++ b/files/it/web/api/node/parentnode/index.html @@ -0,0 +1,61 @@ +--- +title: Node.parentNode +slug: Web/API/Element/parentNode +tags: + - API + - DOM + - Gecko + - Proprietà +translation_of: Web/API/Node/parentNode +--- +
+
{{APIRef("DOM")}}
+
+ +

La proprietà di sola lettura Node.parentNode restituisce il genitore del nodo specificato nell'albero DOM.

+ +

Sintassi

+ +
parentNode = node.parentNode
+
+ +

parentNode è il genitore del nodo corrente. Il genitore di un elemento è un nodo Element, un nodo Document, o un nodo DocumentFragment.

+ +

Esempio

+ +
if (node.parentNode) {
+  // rimuovi un nodo dall'albero, a meno che
+  // non sia già nell'albero
+  node.parentNode.removeChild(node);
+}
+ +

Note

+ +

I nodi Document e DocumentFragment non possono mai avere un genitore, quindi parentNode ritornerà sempre null.

+ +

Restituisce anche null se il nodo è appena stato creato e non è ancora collegato all'albero.

+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Node.parentNode")}}

+ +

Specifiche

+ + + +

Vedi anche

+ + diff --git a/files/it/web/api/node/prefix/index.html b/files/it/web/api/node/prefix/index.html new file mode 100644 index 0000000000..3371ff1f8d --- /dev/null +++ b/files/it/web/api/node/prefix/index.html @@ -0,0 +1,26 @@ +--- +title: element.prefix +slug: Web/API/Element/prefix +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Node/prefix +--- +

{{ ApiRef() }}

+

Sommario

+

Restituisce il namespace del nodo, oppure null se il nodo non ha alcun prefisso.

+

Sintassi

+
stringa = element.prefix
+element.prefix =stringa
+
+

Esempi

+

Il seguente esempio produce il messaggio "x".

+
<x:div onclick="alert(this.prefix)"/>
+
+

Note

+

Questa proprietà funziona solo quando si utilizza un interprete in grado di gestire i namespace, per esempio quando un documento viene presentato con il tipo mime XML. Non funziona invece con i documenti HTML.

+

Specifiche

+

Node.prefix (introdotto in DOM2).

+

{{ languages( { "en": "en/DOM/element.prefix", "ja": "ja/DOM/element.prefix", "pl": "pl/DOM/element.prefix" } ) }}

diff --git a/files/it/web/api/node/textcontent/index.html b/files/it/web/api/node/textcontent/index.html new file mode 100644 index 0000000000..137c76a3eb --- /dev/null +++ b/files/it/web/api/node/textcontent/index.html @@ -0,0 +1,138 @@ +--- +title: Node.textContent +slug: Web/API/Element/textContent +tags: + - API + - Command API + - DOM + - Proprietà + - Referenza +translation_of: Web/API/Node/textContent +--- +
{{APIRef("DOM")}}
+ +

La proprietà textContent dell'interfaccia {{domxref("Node")}} rappresenta il contenuto del testo di un nodo e dei suoi discendenti.

+ +
+

Note: textContent e {{domxref("HTMLElement.innerText")}} sono facilmente confusi, ma i due sono diversi in modi molto importanti.

+
+ +

Sintassi

+ +
var text = Node.textContent;
+Node.textContent = string;
+
+ +

Valore di ritorno

+ +

Una stringa o null.

+ +

Descrizione

+ +

Quando ottieni questa proprietà:

+ + + +

L'impostazione di textContent su un nodo rimuove tutti i figli del nodo e li sostituisce con un singolo nodo di testo con il valore di stringa specificato.

+ +

Differenze da innerText

+ +

Non lasciarti confondere dalle differenze tra Node.textContent e {{domxref("HTMLElement.innerText")}}. Anche se i nomi sembrano simili, ci sono differenze importanti:

+ + + +

Differenze da innerHTML

+ +

{{domxref("Element.innerHTML")}} restituisce HTML, come indica il nome. A volte le persone usano innerHTML per recuperare o scrivere testo all'interno di un elemento, ma textContent ha prestazioni migliori perché il suo valore non viene analizzato come HTML. Inoltre, l'utilizzo di textContent può impedire gli attacchi XSS.

+ +

Esempi

+ +

Dato questo codice HTML:

+ +
<div id="divA">Questo è <span>un</span> testo!</div>
+ +

...puoi usare textContent per ottenere il contenuto del testo dell'elemento:

+ +
let text = document.getElementById('divA').textContent;
+// La variabile text è ora: "Questo è un testo!"
+ +

...o imposta il contenuto del testo dell'elemento:

+ +
document.getElementById('divA').textContent = 'Questo testo è diverso!';
+// L'HTML per divA è ora:
+// <div id="divA">Questo testo è diverso!</div>
+
+ +

Polyfill per IE8

+ +
// Source: Eli Grey @ https://eligrey.com/blog/post/textcontent-in-ie8
+if (Object.defineProperty
+  && Object.getOwnPropertyDescriptor
+  && Object.getOwnPropertyDescriptor(Element.prototype, "textContent")
+  && !Object.getOwnPropertyDescriptor(Element.prototype, "textContent").get) {
+  (function() {
+    var innerText = Object.getOwnPropertyDescriptor(Element.prototype, "innerText");
+    Object.defineProperty(Element.prototype, "textContent",
+     // Passare innerText o innerText.get direttamente non funziona,
+     // è richiesta la funzione wrapper.
+     {
+       get: function() {
+         return innerText.get.call(this);
+       },
+       set: function(s) {
+         return innerText.set.call(this, s);
+       }
+     }
+   );
+  })();
+}
+
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Node.textContent")}}

+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('DOM WHATWG','#dom-node-textcontent','Node.textContent')}}{{Spec2('DOM WHATWG')}}Nessun cambiamento vs. DOM4
{{SpecName('DOM4','#dom-node-textcontent','Node.textContent')}}{{Spec2('DOM4')}}
{{SpecName('DOM3 Core','core.html#Node3-textContent','Node.textContent')}}{{Spec2('DOM3 Core')}}Introdotto
+ +

Vedi anche

+ + diff --git a/files/it/web/api/notification/dir/index.html b/files/it/web/api/notification/dir/index.html new file mode 100644 index 0000000000..c1e16410d6 --- /dev/null +++ b/files/it/web/api/notification/dir/index.html @@ -0,0 +1,72 @@ +--- +title: Notification.dir +slug: Web/API/notifiche/dir +translation_of: Web/API/Notification/dir +--- +

{{APIRef("Web Notifications")}}

+ +

La proprieta' in sola lettura dir dell'interfaccia {{domxref("Notification")}} indica la direzione del testo della notifica, puo' essere specificata nell'opzione dir del costruttore di {{domxref("Notification.Notification","Notification()")}} .

+ +

{{AvailableInWorkers}}

+ +

Sintassi

+ +
var direzione = Notification.dir;
+
+ +

Valori

+ +

La {{domxref("DOMString")}} specifica la direzione el testo. I possibili valori sono:

+ + + +
+

Note: La maggior parte dei browser ignora le opzioni esplicite settate e funzionano con le proprie impostazioni.

+
+ +

Esempi

+ +

Il seguente frammento di codice crea un oggetto opzioni, da passare al costruttore Notification().

+ +
var opzioni = {
+  body: 'Amo JavaScript!',
+  dir: 'rtl'
+}
+
+var n = new Notification('Mio titolo',opzioni);
+
+n.dir // dovrebbe ritornare 'rtl'
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Notifications','#dom-notification-dir','dir')}}{{Spec2('Web Notifications')}}Living standard
+ +

Browser compatibility

+ + + +

{{Compat("api.Notification.dir")}}

+ +

See also

+ + diff --git a/files/it/web/api/notification/index.html b/files/it/web/api/notification/index.html new file mode 100644 index 0000000000..ae8300aa01 --- /dev/null +++ b/files/it/web/api/notification/index.html @@ -0,0 +1,495 @@ +--- +title: Notifiche +slug: Web/API/notifiche +translation_of: Web/API/Notification +--- +

{{APIRef("Web Notifications")}}

+ +

L'interfaccia Notification di Notifications API viene usata per configurare e mostrare le notifiche desktop all'utente.

+ +

{{AvailableInWorkers}}

+ +

Costruttore

+ +
+
{{domxref("Notification.Notification", "Notification()")}}
+
Crea una nuova istanza dell'oggetto Notification.
+
+ +

Proprietà

+ +

Proprietà Static

+ +

Queste proprietà sono disponibili solo sull'oggetto Notification stesso.

+ +
+
{{domxref("Notification.permission")}} {{readonlyinline}}
+
Una stringa che rappresenta l'attuale permesso per mostrare le notifiche. I possibili valori sono: denied (l'utente rifiuta la ricezione delle notifiche), granted (l'utente accetta la ricezione delle notifiche), o default (la scelta dell'utente è sconosciuta, quindi il browser agirà come se il valore fosse negato).
+
+ +

Proprietà Instance

+ +

Queste proprietà sono disponibili solo su istanze dell'oggetto Notification.

+ +
+
{{domxref("Notification.actions")}} {{readonlyinline}}
+
L'array di azioni della notifica come specificato nel parametro options del costruttore.
+
{{domxref("Notification.badge")}} {{readonlyinline}}
+
L'URL dell'immagine utilizzata per rappresentare la notifica quando non c'è abbastanza spazio per visualizzare la notifica stessa.
+
{{domxref("Notification.body")}} {{readonlyinline}}
+
La stringa del corpo della notifica come specificato nel parametro options del costruttore.
+
{{domxref("Notification.data")}} {{readonlyinline}}
+
Restituisce un clone strutturato dei dati della notifica.
+
{{domxref("Notification.dir")}} {{readonlyinline}}
+
La direzione del testo della notifica come specificato nel parametro options del costruttore.
+
{{domxref("Notification.lang")}} {{readonlyinline}}
+
Il codice della lingua della notifica come specificato nel parametro options del costruttore.
+
{{domxref("Notification.tag")}} {{readonlyinline}}
+
L'ID della notifica (se presente) come specificato nel parametro options del costruttore.
+
{{domxref("Notification.icon")}} {{readonlyinline}}
+
L'URL dell'immagine utilizzata come icona della notifica come specificato nel parametro options del costruttore.
+
{{domxref("Notification.image")}} {{readonlyinline}}
+
L'URL di un'immagine da visualizzare come parte della notifica, come specificato nel parametro options del costruttore.
+
{{domxref("Notification.requireInteraction")}} {{readonlyinline}}
+
Un {{jsxref("Boolean")}} che indica che una notifica deve rimanere attiva finché l'utente non fa click o non la chiude, anziché chiudersi automaticamente.
+
{{domxref("Notification.silent")}} {{readonlyinline}}
+
Specifica se la notifica deve essere silenziosa, ovvero che non emetta suoni o vibrazioni, indipendentemente dalle impostazioni del dispositivo.
+
{{domxref("Notification.timestamp")}} {{readonlyinline}}
+
Specifica l'ora in cui viene creata o applicata una notifica (passato, presente o fututo).
+
{{domxref("Notification.title")}} {{readonlyinline}}
+
Il titolo della notifica come specificato nel primo parametro del costruttore.
+
{{domxref("Notification.vibrate")}} {{readonlyinline}}
+
Specifica un modello di vibrazione da emettere per i dispositivi con hardware di vibrazione.
+
+ +

Proprietà non supportate

+ +

Le seguenti proprietà sono elencate nelle specifiche più aggiornate, ma non sono ancora supportate da alcuni browser. È consigliabile controllare regolarmente per vedere se lo stato di queste proprietà viene aggiornato, e facci sapere se trovi informazioni non aggiornate.

+ +
+
{{domxref("Notification.noscreen")}} {{readonlyinline}}
+
Specifica se l'attivazione della notifica deve abilitare o meno lo schermo del dispositivo.
+
{{domxref("Notification.renotify")}} {{readonlyinline}}
+
Specifica se l'utente deve essere avvisato dopo che una nuova notifica sostituisce una vecchia.
+
{{domxref("Notification.sound")}} {{readonlyinline}}
+
Specifica una risorsa sonora da riprodurre quando scatta la notifica, al prosto del suono di notifica predefinito del sistema.
+
{{domxref("Notification.sticky")}} {{readonlyinline}}
+
Specifica se la notifica deve essere "sticky", cioè non facilmente modificabile dall'utente.
+
+ +

Gestori di eventi

+ +
+
{{domxref("Notification.onclick")}}
+
Un gestore per l'evento {{event("click")}}. Viene attivato ogni volta che l'utente fa click sulla notifica.
+
{{domxref("Notification.onerror")}}
+
Un gestore per l'evento {{event("error")}}. Viene attivato ogni volta che la notifica incontra un errore.
+
+ +

Obsolete handlers

+ +

The following event handlers are still supported as listed in the {{anch("browser compatibility")}} section below, but are no longer listed in the current spec. It is safe therefore to assume they are obsolete, and may stop working in future browser versions.

+ +
+
{{domxref("Notification.onclose")}}
+
A handler for the {{event("close")}} event. It is triggered when the user closes the notification.
+
{{domxref("Notification.onshow")}}
+
A handler for the {{event("show")}} event. It is triggered when the notification is displayed.
+
+ +

Methods

+ +

Static methods

+ +

These methods are available only on the Notification object itself.

+ +
+
{{domxref("Notification.requestPermission()")}}
+
Requests permission from the user to display notifications.
+
+ +

Instance methods

+ +

These properties are available only on an instance of the Notification object or through its prototype. The Notification object also inherits from the {{domxref("EventTarget")}} interface.

+ +
+
{{domxref("Notification.close()")}}
+
Programmatically closes a notification.
+
+ +

Example

+ +

Assume this basic HTML:

+ +
<button onclick="notifyMe()">Notify me!</button>
+ +

It's possible to send a notification as follows — here we present a fairly verbose and complete set of code you could use if you wanted to first check whether notifications are supported, then check if permission has been granted for the current origin to send notifications, then request permission if required, before then sending a notification.

+ +
function notifyMe() {
+  // Let's check if the browser supports notifications
+  if (!("Notification" in window)) {
+    alert("This browser does not support desktop notification");
+  }
+
+  // Let's check whether notification permissions have already been granted
+  else if (Notification.permission === "granted") {
+    // If it's okay let's create a notification
+    var notification = new Notification("Hi there!");
+  }
+
+  // Otherwise, we need to ask the user for permission
+  else if (Notification.permission !== 'denied') {
+    Notification.requestPermission(function (permission) {
+      // If the user accepts, let's create a notification
+      if (permission === "granted") {
+        var notification = new Notification("Hi there!");
+      }
+    });
+  }
+
+  // At last, if the user has denied notifications, and you
+  // want to be respectful there is no need to bother them any more.
+}
+ +

{{EmbedLiveSample('Example', '100%', 30)}}

+ +

In many cases, you don't need to be this verbose. For example, in our Emogotchi demo (see source code), we simply run {{domxref("Notification.requestPermission")}} regardless to make sure we can get permission to send notifications (this uses the newer promise-based method syntax):

+ +
Notification.requestPermission().then(function(result) {
+  console.log(result);
+});
+ +

Then we run a simple spawnNotification() function when we want to fire a notification — this is passed arguments to specify the body, icon and title we want, then it creates the necessary options object and fires the notification using the {{domxref("Notification.Notification","Notification()")}} constructor.

+ +
function spawnNotification(theBody,theIcon,theTitle) {
+  var options = {
+      body: theBody,
+      icon: theIcon
+  }
+  var n = new Notification(theTitle,options);
+}
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Notifications')}}{{Spec2('Web Notifications')}}Living standard
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support5{{property_prefix("webkit")}}[1]
+ 22		{{CompatVersionUnknown}}4.0 {{property_prefix("moz")}}[2]
+ 22		{{CompatNo}}256[3]
icon5{{property_prefix("webkit")}}[1]
+ 22		{{CompatUnknown}}4.0 {{property_prefix("moz")}}[2]
+ 22		{{CompatNo}}25{{CompatNo}}
Available in workers{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop("41.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
silent{{CompatChrome(43.0)}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
noscreen, sticky{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
sound{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
renotify{{CompatChrome(50.0)}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Promise-based Notification.requestPermission(){{CompatChrome(46.0)}}{{CompatUnknown}}{{CompatGeckoDesktop("47.0")}}{{CompatUnknown}}{{CompatOpera(40)}}{{CompatNo}}
vibrate, actions{{CompatChrome(53.0)}}{{CompatUnknown}}  {{CompatOpera(39)}} 
badge{{CompatChrome(53.0)}}{{CompatUnknown}}  {{CompatOpera(39)}} 
image{{CompatChrome(55.0)}}{{CompatUnknown}}  {{CompatUnknown}} 
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewEdgeFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}} +

{{CompatVersionUnknown}}

+ 		{{CompatVersionUnknown}}4.0{{property_prefix("moz")}}[2]
+ 22		1.0.1{{property_prefix("moz")}}[2]
+ 1.2		{{CompatNo}}{{CompatUnknown}}{{CompatNo}} +

{{CompatVersionUnknown}}

+
icon{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}4.0{{property_prefix("moz")}}[2]
+ 22		1.0.1{{property_prefix("moz")}}[2]
+ 1.2		{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatVersionUnknown}}
Available in workers{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("41.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
silent{{CompatNo}}{{CompatChrome(43.0)}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatChrome(43.0)}}
noscreen, sticky{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
sound{{CompatNo}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}
renotify{{CompatNo}}{{CompatChrome(50.0)}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Promise-based Notification.requestPermission(){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("47.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
vibrate, actions{{CompatNo}}{{CompatChrome(53.0)}}{{CompatUnknown}}   {{CompatOperaMobile(39)}} {{CompatChrome(53.0)}}
badge{{CompatNo}}{{CompatChrome(53.0)}}{{CompatUnknown}}   {{CompatOperaMobile(39)}} {{CompatChrome(53.0)}}
image{{CompatNo}}{{CompatNo}}{{CompatUnknown}}   {{CompatUnknown}} {{CompatChrome(55.0)}}
+
+ +

[1] Before Chrome 22, the support for notification followed an old prefixed version of the specification and used the {{domxref("window.navigator.webkitNotifications","navigator.webkitNotifications")}} object to instantiate a new notification.

+ +

Before Chrome 32, {{domxref("Notification.permission")}} was not supported.

+ +

Before Chrome 42, service worker additions were not supported.

+ +

Starting in Chrome 49, notifications do not work in incognito mode.

+ +

[2] Prior to Firefox 22 (Firefox OS <1.2), the instantiation of a new notification must be done with the {{domxref("window.navigator.mozNotification", "navigator.mozNotification")}} object through its createNotification method.

+ +

Prior to Firefox 22 (Firefox OS <1.2), the Notification was displayed when calling the show method and supported only the click and close events.

+ +

Nick Desaulniers wrote a Notification shim to cover both newer and older implementations.

+ +

One particular Firefox OS issue is that you can pass a path to an icon to use in the notification, but if the app is packaged you cannot use a relative path like /my_icon.png. You also can't use window.location.origin + "/my_icon.png" because window.location.origin is null in packaged apps. The manifest origin field fixes this, but it is only available in Firefox OS 1.1+. A potential solution for supporting Firefox OS <1.1 is to pass an absolute URL to an externally hosted version of the icon. This is less than ideal as the notification is displayed immediately without the icon, then the icon is fetched, but it works on all versions of Firefox OS.

+ +

When using notifications  in a Firefox OS app, be sure to add the desktop-notification permission in your manifest file. Notifications can be used at any permission level, hosted or above: "permissions": { "desktop-notification": {} }

+ +

[3] Safari started to support notification with Safari 6, but only on Mac OSX 10.8+ (Mountain Lion).

+ +

See also

+ + diff --git a/files/it/web/api/notifiche/dir/index.html b/files/it/web/api/notifiche/dir/index.html deleted file mode 100644 index c1e16410d6..0000000000 --- a/files/it/web/api/notifiche/dir/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: Notification.dir -slug: Web/API/notifiche/dir -translation_of: Web/API/Notification/dir ---- -

{{APIRef("Web Notifications")}}

- -

La proprieta' in sola lettura dir dell'interfaccia {{domxref("Notification")}} indica la direzione del testo della notifica, puo' essere specificata nell'opzione dir del costruttore di {{domxref("Notification.Notification","Notification()")}} .

- -

{{AvailableInWorkers}}

- -

Sintassi

- -
var direzione = Notification.dir;
-
- -

Valori

- -

La {{domxref("DOMString")}} specifica la direzione el testo. I possibili valori sono:

- - - -
-

Note: La maggior parte dei browser ignora le opzioni esplicite settate e funzionano con le proprie impostazioni.

-
- -

Esempi

- -

Il seguente frammento di codice crea un oggetto opzioni, da passare al costruttore Notification().

- -
var opzioni = {
-  body: 'Amo JavaScript!',
-  dir: 'rtl'
-}
-
-var n = new Notification('Mio titolo',opzioni);
-
-n.dir // dovrebbe ritornare 'rtl'
-
- -

Specifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Web Notifications','#dom-notification-dir','dir')}}{{Spec2('Web Notifications')}}Living standard
- -

Browser compatibility

- - - -

{{Compat("api.Notification.dir")}}

- -

See also

- - diff --git a/files/it/web/api/notifiche/index.html b/files/it/web/api/notifiche/index.html deleted file mode 100644 index ae8300aa01..0000000000 --- a/files/it/web/api/notifiche/index.html +++ /dev/null @@ -1,495 +0,0 @@ ---- -title: Notifiche -slug: Web/API/notifiche -translation_of: Web/API/Notification ---- -

{{APIRef("Web Notifications")}}

- -

L'interfaccia Notification di Notifications API viene usata per configurare e mostrare le notifiche desktop all'utente.

- -

{{AvailableInWorkers}}

- -

Costruttore

- -
-
{{domxref("Notification.Notification", "Notification()")}}
-
Crea una nuova istanza dell'oggetto Notification.
-
- -

Proprietà

- -

Proprietà Static

- -

Queste proprietà sono disponibili solo sull'oggetto Notification stesso.

- -
-
{{domxref("Notification.permission")}} {{readonlyinline}}
-
Una stringa che rappresenta l'attuale permesso per mostrare le notifiche. I possibili valori sono: denied (l'utente rifiuta la ricezione delle notifiche), granted (l'utente accetta la ricezione delle notifiche), o default (la scelta dell'utente è sconosciuta, quindi il browser agirà come se il valore fosse negato).
-
- -

Proprietà Instance

- -

Queste proprietà sono disponibili solo su istanze dell'oggetto Notification.

- -
-
{{domxref("Notification.actions")}} {{readonlyinline}}
-
L'array di azioni della notifica come specificato nel parametro options del costruttore.
-
{{domxref("Notification.badge")}} {{readonlyinline}}
-
L'URL dell'immagine utilizzata per rappresentare la notifica quando non c'è abbastanza spazio per visualizzare la notifica stessa.
-
{{domxref("Notification.body")}} {{readonlyinline}}
-
La stringa del corpo della notifica come specificato nel parametro options del costruttore.
-
{{domxref("Notification.data")}} {{readonlyinline}}
-
Restituisce un clone strutturato dei dati della notifica.
-
{{domxref("Notification.dir")}} {{readonlyinline}}
-
La direzione del testo della notifica come specificato nel parametro options del costruttore.
-
{{domxref("Notification.lang")}} {{readonlyinline}}
-
Il codice della lingua della notifica come specificato nel parametro options del costruttore.
-
{{domxref("Notification.tag")}} {{readonlyinline}}
-
L'ID della notifica (se presente) come specificato nel parametro options del costruttore.
-
{{domxref("Notification.icon")}} {{readonlyinline}}
-
L'URL dell'immagine utilizzata come icona della notifica come specificato nel parametro options del costruttore.
-
{{domxref("Notification.image")}} {{readonlyinline}}
-
L'URL di un'immagine da visualizzare come parte della notifica, come specificato nel parametro options del costruttore.
-
{{domxref("Notification.requireInteraction")}} {{readonlyinline}}
-
Un {{jsxref("Boolean")}} che indica che una notifica deve rimanere attiva finché l'utente non fa click o non la chiude, anziché chiudersi automaticamente.
-
{{domxref("Notification.silent")}} {{readonlyinline}}
-
Specifica se la notifica deve essere silenziosa, ovvero che non emetta suoni o vibrazioni, indipendentemente dalle impostazioni del dispositivo.
-
{{domxref("Notification.timestamp")}} {{readonlyinline}}
-
Specifica l'ora in cui viene creata o applicata una notifica (passato, presente o fututo).
-
{{domxref("Notification.title")}} {{readonlyinline}}
-
Il titolo della notifica come specificato nel primo parametro del costruttore.
-
{{domxref("Notification.vibrate")}} {{readonlyinline}}
-
Specifica un modello di vibrazione da emettere per i dispositivi con hardware di vibrazione.
-
- -

Proprietà non supportate

- -

Le seguenti proprietà sono elencate nelle specifiche più aggiornate, ma non sono ancora supportate da alcuni browser. È consigliabile controllare regolarmente per vedere se lo stato di queste proprietà viene aggiornato, e facci sapere se trovi informazioni non aggiornate.

- -
-
{{domxref("Notification.noscreen")}} {{readonlyinline}}
-
Specifica se l'attivazione della notifica deve abilitare o meno lo schermo del dispositivo.
-
{{domxref("Notification.renotify")}} {{readonlyinline}}
-
Specifica se l'utente deve essere avvisato dopo che una nuova notifica sostituisce una vecchia.
-
{{domxref("Notification.sound")}} {{readonlyinline}}
-
Specifica una risorsa sonora da riprodurre quando scatta la notifica, al prosto del suono di notifica predefinito del sistema.
-
{{domxref("Notification.sticky")}} {{readonlyinline}}
-
Specifica se la notifica deve essere "sticky", cioè non facilmente modificabile dall'utente.
-
- -

Gestori di eventi

- -
-
{{domxref("Notification.onclick")}}
-
Un gestore per l'evento {{event("click")}}. Viene attivato ogni volta che l'utente fa click sulla notifica.
-
{{domxref("Notification.onerror")}}
-
Un gestore per l'evento {{event("error")}}. Viene attivato ogni volta che la notifica incontra un errore.
-
- -

Obsolete handlers

- -

The following event handlers are still supported as listed in the {{anch("browser compatibility")}} section below, but are no longer listed in the current spec. It is safe therefore to assume they are obsolete, and may stop working in future browser versions.

- -
-
{{domxref("Notification.onclose")}}
-
A handler for the {{event("close")}} event. It is triggered when the user closes the notification.
-
{{domxref("Notification.onshow")}}
-
A handler for the {{event("show")}} event. It is triggered when the notification is displayed.
-
- -

Methods

- -

Static methods

- -

These methods are available only on the Notification object itself.

- -
-
{{domxref("Notification.requestPermission()")}}
-
Requests permission from the user to display notifications.
-
- -

Instance methods

- -

These properties are available only on an instance of the Notification object or through its prototype. The Notification object also inherits from the {{domxref("EventTarget")}} interface.

- -
-
{{domxref("Notification.close()")}}
-
Programmatically closes a notification.
-
- -

Example

- -

Assume this basic HTML:

- -
<button onclick="notifyMe()">Notify me!</button>
- -

It's possible to send a notification as follows — here we present a fairly verbose and complete set of code you could use if you wanted to first check whether notifications are supported, then check if permission has been granted for the current origin to send notifications, then request permission if required, before then sending a notification.

- -
function notifyMe() {
-  // Let's check if the browser supports notifications
-  if (!("Notification" in window)) {
-    alert("This browser does not support desktop notification");
-  }
-
-  // Let's check whether notification permissions have already been granted
-  else if (Notification.permission === "granted") {
-    // If it's okay let's create a notification
-    var notification = new Notification("Hi there!");
-  }
-
-  // Otherwise, we need to ask the user for permission
-  else if (Notification.permission !== 'denied') {
-    Notification.requestPermission(function (permission) {
-      // If the user accepts, let's create a notification
-      if (permission === "granted") {
-        var notification = new Notification("Hi there!");
-      }
-    });
-  }
-
-  // At last, if the user has denied notifications, and you
-  // want to be respectful there is no need to bother them any more.
-}
- -

{{EmbedLiveSample('Example', '100%', 30)}}

- -

In many cases, you don't need to be this verbose. For example, in our Emogotchi demo (see source code), we simply run {{domxref("Notification.requestPermission")}} regardless to make sure we can get permission to send notifications (this uses the newer promise-based method syntax):

- -
Notification.requestPermission().then(function(result) {
-  console.log(result);
-});
- -

Then we run a simple spawnNotification() function when we want to fire a notification — this is passed arguments to specify the body, icon and title we want, then it creates the necessary options object and fires the notification using the {{domxref("Notification.Notification","Notification()")}} constructor.

- -
function spawnNotification(theBody,theIcon,theTitle) {
-  var options = {
-      body: theBody,
-      icon: theIcon
-  }
-  var n = new Notification(theTitle,options);
-}
- -

Specifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Web Notifications')}}{{Spec2('Web Notifications')}}Living standard
- -

Browser compatibility

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support5{{property_prefix("webkit")}}[1]
- 22		{{CompatVersionUnknown}}4.0 {{property_prefix("moz")}}[2]
- 22		{{CompatNo}}256[3]
icon5{{property_prefix("webkit")}}[1]
- 22		{{CompatUnknown}}4.0 {{property_prefix("moz")}}[2]
- 22		{{CompatNo}}25{{CompatNo}}
Available in workers{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop("41.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
silent{{CompatChrome(43.0)}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
noscreen, sticky{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
sound{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
renotify{{CompatChrome(50.0)}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Promise-based Notification.requestPermission(){{CompatChrome(46.0)}}{{CompatUnknown}}{{CompatGeckoDesktop("47.0")}}{{CompatUnknown}}{{CompatOpera(40)}}{{CompatNo}}
vibrate, actions{{CompatChrome(53.0)}}{{CompatUnknown}}  {{CompatOpera(39)}} 
badge{{CompatChrome(53.0)}}{{CompatUnknown}}  {{CompatOpera(39)}} 
image{{CompatChrome(55.0)}}{{CompatUnknown}}  {{CompatUnknown}} 
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidAndroid WebviewEdgeFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}} -

{{CompatVersionUnknown}}

- 		{{CompatVersionUnknown}}4.0{{property_prefix("moz")}}[2]
- 22		1.0.1{{property_prefix("moz")}}[2]
- 1.2		{{CompatNo}}{{CompatUnknown}}{{CompatNo}} -

{{CompatVersionUnknown}}

-
icon{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}4.0{{property_prefix("moz")}}[2]
- 22		1.0.1{{property_prefix("moz")}}[2]
- 1.2		{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatVersionUnknown}}
Available in workers{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("41.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
silent{{CompatNo}}{{CompatChrome(43.0)}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatChrome(43.0)}}
noscreen, sticky{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
sound{{CompatNo}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}
renotify{{CompatNo}}{{CompatChrome(50.0)}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Promise-based Notification.requestPermission(){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("47.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
vibrate, actions{{CompatNo}}{{CompatChrome(53.0)}}{{CompatUnknown}}   {{CompatOperaMobile(39)}} {{CompatChrome(53.0)}}
badge{{CompatNo}}{{CompatChrome(53.0)}}{{CompatUnknown}}   {{CompatOperaMobile(39)}} {{CompatChrome(53.0)}}
image{{CompatNo}}{{CompatNo}}{{CompatUnknown}}   {{CompatUnknown}} {{CompatChrome(55.0)}}
-
- -

[1] Before Chrome 22, the support for notification followed an old prefixed version of the specification and used the {{domxref("window.navigator.webkitNotifications","navigator.webkitNotifications")}} object to instantiate a new notification.

- -

Before Chrome 32, {{domxref("Notification.permission")}} was not supported.

- -

Before Chrome 42, service worker additions were not supported.

- -

Starting in Chrome 49, notifications do not work in incognito mode.

- -

[2] Prior to Firefox 22 (Firefox OS <1.2), the instantiation of a new notification must be done with the {{domxref("window.navigator.mozNotification", "navigator.mozNotification")}} object through its createNotification method.

- -

Prior to Firefox 22 (Firefox OS <1.2), the Notification was displayed when calling the show method and supported only the click and close events.

- -

Nick Desaulniers wrote a Notification shim to cover both newer and older implementations.

- -

One particular Firefox OS issue is that you can pass a path to an icon to use in the notification, but if the app is packaged you cannot use a relative path like /my_icon.png. You also can't use window.location.origin + "/my_icon.png" because window.location.origin is null in packaged apps. The manifest origin field fixes this, but it is only available in Firefox OS 1.1+. A potential solution for supporting Firefox OS <1.1 is to pass an absolute URL to an externally hosted version of the icon. This is less than ideal as the notification is displayed immediately without the icon, then the icon is fetched, but it works on all versions of Firefox OS.

- -

When using notifications  in a Firefox OS app, be sure to add the desktop-notification permission in your manifest file. Notifications can be used at any permission level, hosted or above: "permissions": { "desktop-notification": {} }

- -

[3] Safari started to support notification with Safari 6, but only on Mac OSX 10.8+ (Mountain Lion).

- -

See also

- - diff --git a/files/it/web/api/plugin/index.html b/files/it/web/api/plugin/index.html new file mode 100644 index 0000000000..b6c23742d2 --- /dev/null +++ b/files/it/web/api/plugin/index.html @@ -0,0 +1,63 @@ +--- +title: Plug-in +slug: Plug-in +tags: + - Add-ons + - Plugins + - Tutte_le_categorie +translation_of: Web/API/Plugin +--- +

 

+
+

I Plugins (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 estensioni, che modificano o aggiungono funzionalità già presenti.

+
+ + + + + + + +
+

Documentazione

+
+
+ Gecko Plugin API Reference
+
+ Questo manuale di riferimento descrive le interfacce impiegabili dal programmatore nella realizzazione di plugin per Gecko, e fornisce indicazioni su come usare tali interfacce.
+
+
+
+ Using XPInstall to Install Plugins
+
+ XPInstall è 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.
+
+
+
+ Detecting Plugins (en)
+
+ "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"
+
+
+
+ Scripting Plugins: Macromedia Flash
+
+ Questo articolo spiega come è possibile usare JavaScript per accedere a metodi disponibili in un plugin Flash, ed anche come impiegare la funzionalità chiamata FSCommands per accedere a funzioni JavaScript dall'interno di animazioni Flash.
+
+

Mostra tutto...

+ 		+

Community

+
    +
  • View Mozilla forums...
    • +
+

{{ DiscussionList("dev-tech-plugins", "mozilla.dev.tech.plugins") }}

+ +
+
+ Gecko
+
+
+

Categories

+

Interwiki Language Links

+

 

+

{{ languages( { "en": "en/Plugins", "es": "es/Plugins", "fr": "fr/Plugins", "ja": "ja/Plugins", "pl": "pl/Wtyczki" } ) }}

diff --git a/files/it/web/api/uievent/ischar/index.html b/files/it/web/api/uievent/ischar/index.html new file mode 100644 index 0000000000..ae1edd3975 --- /dev/null +++ b/files/it/web/api/uievent/ischar/index.html @@ -0,0 +1,30 @@ +--- +title: event.isChar +slug: Web/API/Event/isChar +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/UIEvent/isChar +--- +

{{ ApiRef() }}

+

Sommario

+

Restituisce un booleano che indica se è stato premuto un tasto carattere o meno.

+

Sintassi

+
bool = event.isChar
+
+ +

Esempio

+
 if e.isChar
+   ripetiInput(e.type);
+ }
+
+

Note

+

Alcune combinazioni di tasti potrebbero produrre degli eventi ma non produrre alcun carattere (per esempio CTRL+b). Quando questo accade, isChar restituisce false.

+

Attenzione: attualmente isChar è afflitto da un bug, a causa del quale il risultato è sempre false. Gli sviluppatori di Mozilla potrebbero correggere questo bug, ma potrebbero anche decidere di eliminare questa proprietà non standard.

+

Specifiche

+

Non è parte di alcuna specifica.

+

{{ languages( { "en": "en/DOM/event.isChar", "pl": "pl/DOM/event.isChar" } ) }}

diff --git a/files/it/web/api/uievent/layerx/index.html b/files/it/web/api/uievent/layerx/index.html new file mode 100644 index 0000000000..80dc20b35b --- /dev/null +++ b/files/it/web/api/uievent/layerx/index.html @@ -0,0 +1,102 @@ +--- +title: event.layerX +slug: Web/API/Event/layerX +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/UIEvent/layerX +--- +

{{ ApiRef() }}

+

Sommario

+

Restituisce la coordinata orizzontale del punto in cui si è scatenato l'evento, relativamente al layer corrente.

+

Sintassi

+
X = event.layerX
+
+ +

Esempio

+
<html>
+<head>
+<title>esempio di pageX/pageY e layerX/layerY</title>
+
+<script type="text/javascript">
+
+function mostraCoordinate(evt){
+  var form = document.forms.form_coords;
+  var idPadre = evt.target.parentNode.id;
+  form.idPadre.value = idPadre;
+  form.coordinataXpagina.value = evt.pageX;
+  form.coordinataYpagina.value = evt.pageY;
+  form.coordinataXlayer.value = evt.layerX;
+  form.coordinataYlayer.value = evt.layerY;
+}
+
+</script>
+
+<style type="text/css">
+
+ #d1 {
+  border: solid blue 1px;
+  padding: 20px;
+ }
+
+ #d2 {
+  position: absolute;
+  top: 180px;
+  left: 80%;
+  right:auto;
+  width: 40%;
+  border: solid blue 1px;
+  padding: 20px;
+ }
+
+ #d3 {
+  position: absolute;
+  top: 240px;
+  left: 20%;
+  width: 50%;
+  border: solid blue 1px;
+  padding: 10px;
+ }
+
+</style>
+</head>
+
+<body onmousedown="mostraCoordinate(event)">
+
+<p>Per visualizzare le coordinate del mouse clicca in un qualunque punto della pagina.</p>
+
+<div id="d1">
+<span>Questo è un DIV non posizionato, quindi cliccando qui i valori di layerX e layerY
+saranno simili a quelli di pageX e pageY.
+</span>
+</div>
+
+<div id="d2">
+<span>Questo è un DIV posizionato, quindi cliccando qui i valori di layerX e layerY saranno relativi all'angolo in alto a sinistra di questo elemento. Si noti che le proprietà pageX e pageY restituiscono la posizione assoluta all'interno del documento, tenendo conto dello scorrimento della pagina.
+</span>
+
+<span>Fai scorrere ancora la pagina! Questo è un DIV posizionato, quindi cliccando qui i valori di layerX e layerY saranno relativi all'angolo in alto a sinistra di questo elemento. Si noti che le proprietà pageX e pageY restituiscono la posizione assoluta all'interno del documento, tenendo conto dello scorrimento della pagina.</span>
+</div>
+
+<div id="d3">
+<form name="form_coordinate">
+ Id elemento padre: <input type="text" name="idPadre" size="7" /><br />
+ pageX:<input type="text" name="coordinataXpagina" size="7" />
+ pageY:<input type="text" name="coordinataYpagina" size="7" /><br />
+ layerX:<input type="text" name="coordinataXlayer" size="7" />
+ layerY:<input type="text" name="coordinataYlayer" size="7" />
+</form>
+</div>
+
+</body>
+</html>
+
+

Note

+

layerX tiene conto di eventuali scorrimenti orizzontali avvenuti nella pagina e restituisce un valore relativo all'intero documento, a meno che l'evento non avvenga all'interno di un elemento con posizione fissa; nel qual caso il valore restituito sarà relativo all'angolo in alto a sinistra dell'elemento.

+

Specifiche

+

DOM level 0. Non è parte di alcuna specifica.

+

{{ languages( { "en": "en/DOM/event.layerX", "pl": "pl/DOM/event.layerX" } ) }}

diff --git a/files/it/web/api/uievent/layery/index.html b/files/it/web/api/uievent/layery/index.html new file mode 100644 index 0000000000..9bb4f99947 --- /dev/null +++ b/files/it/web/api/uievent/layery/index.html @@ -0,0 +1,102 @@ +--- +title: event.layerY +slug: Web/API/Event/layerY +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/UIEvent/layerY +--- +

{{ ApiRef() }}

+

Sommario

+

Restituisce la coordinata verticale del punto in cui si è scatenato l'evento, relativamente al layer corrente.

+

Sintassi

+
Y = event.layerY
+
+ +

Esempio

+
<html>
+<head>
+<title>esempio di pageX/pageY e layerX/layerY</title>
+
+<script type="text/javascript">
+
+function mostraCoordinate(evt){
+  var form = document.forms.form_coords;
+  var idPadre = evt.target.parentNode.id;
+  form.idPadre.value = idPadre;
+  form.coordinataXpagina.value = evt.pageX;
+  form.coordinataYpagina.value = evt.pageY;
+  form.coordinataXlayer.value = evt.layerX;
+  form.coordinataYlayer.value = evt.layerY;
+}
+
+</script>
+
+<style type="text/css">
+
+ #d1 {
+  border: solid blue 1px;
+  padding: 20px;
+ }
+
+ #d2 {
+  position: absolute;
+  top: 180px;
+  left: 80%;
+  right:auto;
+  width: 40%;
+  border: solid blue 1px;
+  padding: 20px;
+ }
+
+ #d3 {
+  position: absolute;
+  top: 240px;
+  left: 20%;
+  width: 50%;
+  border: solid blue 1px;
+  padding: 10px;
+ }
+
+</style>
+</head>
+
+<body onmousedown="mostraCoordinate(event)">
+
+<p>Per visualizzare le coordinate del mouse clicca in un qualunque punto della pagina.</p>
+
+<div id="d1">
+<span>Questo è un DIV non posizionato, quindi cliccando qui i valori di layerX e layerY
+saranno simili a quelli di pageX e pageY.
+</span>
+</div>
+
+<div id="d2">
+<span>Questo è un DIV posizionato, quindi cliccando qui i valori di layerX e layerY saranno relativi all'angolo in alto a sinistra di questo elemento. Si noti che le proprietà pageX e pageY restituiscono la posizione assoluta all'interno del documento, tenendo conto dello scorrimento della pagina.
+</span>
+
+<span>Fai scorrere ancora la pagina! Questo è un DIV posizionato, quindi cliccando qui i valori di layerX e layerY saranno relativi all'angolo in alto a sinistra di questo elemento. Si noti che le proprietà pageX e pageY restituiscono la posizione assoluta all'interno del documento, tenendo conto dello scorrimento della pagina.</span>
+</div>
+
+<div id="d3">
+<form name="form_coordinate">
+ Id elemento padre: <input type="text" name="idPadre" size="7" /><br />
+ pageX:<input type="text" name="coordinataXpagina" size="7" />
+ pageY:<input type="text" name="coordinataYpagina" size="7" /><br />
+ layerX:<input type="text" name="coordinataXlayer" size="7" />
+ layerY:<input type="text" name="coordinataYlayer" size="7" />
+</form>
+</div>
+
+</body>
+</html>
+
+

Note

+

layerY tiene conto di eventuali scorrimenti verticali avvenuti nella pagina e restituisce un valore relativo all'intero documento, a meno che l'evento non avvenga all'interno di un elemento con posizione fissa; nel qual caso il valore restituito sarà relativo all'angolo in alto a sinistra dell'elemento.

+

Specifiche

+

DOM level 0. Non è parte di alcuna specifica.

+

{{ languages( { "en": "en/DOM/event.layerX", "pl": "pl/DOM/event.layerX" } ) }}

diff --git a/files/it/web/api/uievent/pagex/index.html b/files/it/web/api/uievent/pagex/index.html new file mode 100644 index 0000000000..90cf1beaac --- /dev/null +++ b/files/it/web/api/uievent/pagex/index.html @@ -0,0 +1,98 @@ +--- +title: event.pageX +slug: Web/API/Event/pageX +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/UIEvent/pageX +--- +

{{ ApiRef() }}

+

Sommario

+

Restituisce la coordinata orizzontale dell'evento, all'interno dell'intero documento.

+

Sintassi

+
X =event.pageX;
+
+

X è un intero che rappresenta il valore in pixel della coordinata X del puntatore del mouse, relativamente all'intero documento. La coordinata fa riferimento al momento in cui l'evento si è verificato. Questa proprietà tiene conto di ogni scorrimento orizzontale che è stato effettuato all'interno del browser.

+

Esempio

+
<html>
+<head>
+<title>esempio di pageX/pageY e layerX/layerY</title>
+
+<script type="text/javascript">
+
+function mostraCoordinate(evt){
+  var form = document.forms.form_coords;
+  var idPadre = evt.target.parentNode.id;
+  form.idPadre.value = idPadre;
+  form.coordinataXpagina.value = evt.pageX;
+  form.coordinataYpagina.value = evt.pageY;
+  form.coordinataXlayer.value = evt.layerX;
+  form.coordinataYlayer.value = evt.layerY;
+}
+
+</script>
+
+<style type="text/css">
+
+ #d1 {
+  border: solid blue 1px;
+  padding: 20px;
+ }
+
+ #d2 {
+  position: absolute;
+  top: 180px;
+  left: 80%;
+  right:auto;
+  width: 40%;
+  border: solid blue 1px;
+  padding: 20px;
+ }
+
+ #d3 {
+  position: absolute;
+  top: 240px;
+  left: 20%;
+  width: 50%;
+  border: solid blue 1px;
+  padding: 10px;
+ }
+
+</style>
+</head>
+
+<body onmousedown="mostraCoordinate(event)">
+
+<p>Per visualizzare le coordinate del mouse clicca in un qualunque punto della pagina.</p>
+
+<div id="d1">
+<span>Questo è un DIV non posizionato, quindi cliccando qui i valori di layerX e layerY
+saranno simili a quelli di pageX e pageY.
+</span>
+</div>
+
+<div id="d2">
+<span>Questo è un DIV posizionato, quindi cliccando qui i valori di layerX e layerY saranno relativi all'angolo in alto a sinistra di questo elemento. Si noti che le proprietà pageX e pageY restituiscono la posizione assoluta all'interno del documento, tenendo conto dello scorrimento della pagina.
+</span>
+
+<span>Fai scorrere ancora la pagina! Questo è un DIV posizionato, quindi cliccando qui i valori di layerX e layerY saranno relativi all'angolo in alto a sinistra di questo elemento. Si noti che le proprietà pageX e pageY restituiscono la posizione assoluta all'interno del documento, tenendo conto dello scorrimento della pagina.</span>
+</div>
+
+<div id="d3">
+<form name="form_coordinate">
+ Id elemento padre: <input type="text" name="idPadre" size="7" /><br />
+ pageX:<input type="text" name="coordinataXpagina" size="7" />
+ pageY:<input type="text" name="coordinataYpagina" size="7" /><br />
+ layerX:<input type="text" name="coordinataXlayer" size="7" />
+ layerY:<input type="text" name="coordinataYlayer" size="7" />
+</form>
+</div>
+
+</body>
+</html>
+
+

Specifiche

+

Non è parte di alcuno standard.

+

{{ languages( { "en": "en/DOM/event.pageX", "es": "es/DOM/event.pageX", "pl": "pl/DOM/event.pageX" } ) }}

diff --git a/files/it/web/api/uievent/pagey/index.html b/files/it/web/api/uievent/pagey/index.html new file mode 100644 index 0000000000..d0d87573cc --- /dev/null +++ b/files/it/web/api/uievent/pagey/index.html @@ -0,0 +1,98 @@ +--- +title: event.pageY +slug: Web/API/Event/pageY +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/UIEvent/pageY +--- +

{{ ApiRef() }}

+

Sommario

+

Restituisce la coordinata verticale dell'evento, all'interno dell'intero documento.

+

Sintassi

+
Y =event.pageY;
+
+

Y è un intero che rappresenta il valore in pixel della coordinata Y del puntatore del mouse, relativamente all'intero documento. La coordinata fa riferimento al momento in cui l'evento si è verificato. Questa proprietà tiene conto di ogni scorrimento verticale che è stato effettuato all'interno del browser.

+

Esempio

+
<html>
+<head>
+<title>esempio di pageX/pageY e layerX/layerY</title>
+
+<script type="text/javascript">
+
+function mostraCoordinate(evt){
+  var form = document.forms.form_coords;
+  var idPadre = evt.target.parentNode.id;
+  form.idPadre.value = idPadre;
+  form.coordinataXpagina.value = evt.pageX;
+  form.coordinataYpagina.value = evt.pageY;
+  form.coordinataXlayer.value = evt.layerX;
+  form.coordinataYlayer.value = evt.layerY;
+}
+
+</script>
+
+<style type="text/css">
+
+ #d1 {
+  border: solid blue 1px;
+  padding: 20px;
+ }
+
+ #d2 {
+  position: absolute;
+  top: 180px;
+  left: 80%;
+  right:auto;
+  width: 40%;
+  border: solid blue 1px;
+  padding: 20px;
+ }
+
+ #d3 {
+  position: absolute;
+  top: 240px;
+  left: 20%;
+  width: 50%;
+  border: solid blue 1px;
+  padding: 10px;
+ }
+
+</style>
+</head>
+
+<body onmousedown="mostraCoordinate(event)">
+
+<p>Per visualizzare le coordinate del mouse clicca in un qualunque punto della pagina.</p>
+
+<div id="d1">
+<span>Questo è un DIV non posizionato, quindi cliccando qui i valori di layerX e layerY
+saranno simili a quelli di pageX e pageY.
+</span>
+</div>
+
+<div id="d2">
+<span>Questo è un DIV posizionato, quindi cliccando qui i valori di layerX e layerY saranno relativi all'angolo in alto a sinistra di questo elemento. Si noti che le proprietà pageX e pageY restituiscono la posizione assoluta all'interno del documento, tenendo conto dello scorrimento della pagina.
+</span>
+
+<span>Fai scorrere ancora la pagina! Questo è un DIV posizionato, quindi cliccando qui i valori di layerX e layerY saranno relativi all'angolo in alto a sinistra di questo elemento. Si noti che le proprietà pageX e pageY restituiscono la posizione assoluta all'interno del documento, tenendo conto dello scorrimento della pagina.</span>
+</div>
+
+<div id="d3">
+<form name="form_coordinate">
+ Id elemento padre: <input type="text" name="idPadre" size="7" /><br />
+ pageX:<input type="text" name="coordinataXpagina" size="7" />
+ pageY:<input type="text" name="coordinataYpagina" size="7" /><br />
+ layerX:<input type="text" name="coordinataXlayer" size="7" />
+ layerY:<input type="text" name="coordinataYlayer" size="7" />
+</form>
+</div>
+
+</body>
+</html>
+
+

Specifiche

+

Non è parte di alcuno standard.

+

{{ languages( { "es": "es/DOM/event.pageY", "pl": "pl/DOM/event.pageY" } ) }}

diff --git a/files/it/web/api/uievent/view/index.html b/files/it/web/api/uievent/view/index.html new file mode 100644 index 0000000000..00d9f88004 --- /dev/null +++ b/files/it/web/api/uievent/view/index.html @@ -0,0 +1,22 @@ +--- +title: event.view +slug: Web/API/Event/view +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/UIEvent/view +--- +

{{ ApiRef() }}

+

Sommario

+

Restituisce l'oggetto AbstractView nel quale si è verificato l'evento. Nei browser web, questo è l'oggetto window che ha generato l'evento.

+

Sintassi

+
view =event.view
+
+ +

Specifiche

+

DOM Level 2 Events: UIEvent.view

+

{{ languages( { "en": "en/DOM/event.view", "pl": "pl/DOM/event.view" } ) }}

diff --git a/files/it/web/api/urlutils/index.html b/files/it/web/api/urlutils/index.html deleted file mode 100644 index 05cc01aa9b..0000000000 --- a/files/it/web/api/urlutils/index.html +++ /dev/null @@ -1,205 +0,0 @@ ---- -title: URLUtils -slug: Web/API/URLUtils -translation_of: Web/API/HTMLHyperlinkElementUtils ---- -

{{ApiRef("URL API")}}{{SeeCompatTable}}

- -

The URLUtils interface defines utility methods to work with URLs.

- -

There are no objects of this type, but several objects implement it, such as {{domxref("Location")}}, {{domxref("URL")}}, {{domxref("HTMLAnchorElement")}}, and {{domxref("HTMLAreaElement")}}.

- -

Properties

- -

This interface doesn't inherit any property.

- -
-
{{domxref("URLUtils.href")}}
-
Is a {{domxref("DOMString")}} containing the whole URL.
-
{{domxref("URLUtils.protocol")}}
-
Is a {{domxref("DOMString")}} containing the protocol scheme of the URL, including the final ':'.
-
{{domxref("URLUtils.host")}}
-
Is a {{domxref("DOMString")}} containing the host, that is the hostname, and then, if the port of the URL is not empty (which can happen because it was not specified or because it was specified to be the default port of the URL's scheme), a ':', and the port of the URL.
-
{{domxref("URLUtils.hostname")}}
-
Is a {{domxref("DOMString")}} containing the domain of the URL.
-
{{domxref("URLUtils.port")}}
-
Is a {{domxref("DOMString")}} containing the port number of the URL.
-
{{domxref("URLUtils.pathname")}}
-
Is a {{domxref("DOMString")}} containing an initial '/' followed by the path of the URL.
-
{{domxref("URLUtils.search")}}
-
Is a {{domxref("DOMString")}} containing a '?' followed by the parameters of the URL.
-
{{domxref("URLUtils.hash")}}
-
Is a {{domxref("DOMString")}} containing a '#' followed by the fragment identifier of the URL.
-
{{domxref("URLUtils.username")}}
-
Is a {{domxref("DOMString")}} containing the username specified before the domain name.
-
{{domxref("URLUtils.password")}}
-
Is a {{domxref("DOMString")}} containing the password specified before the domain name.
-
{{domxref("URLUtils.origin")}} {{readonlyInline}}
-
Returns a {{domxref("DOMString")}} containing the origin of the URL, that is its scheme, its domain and its port.
-
{{domxref("URLUtils.searchParams")}}
-
Returns a {{domxref("URLSearchParams")}} object allowing to access the GET query arguments contained in the URL.
-
- -

Methods

- -

This interface doesn't inherit any method.

- -
-
{{domxref("URLUtils.toString()")}}
-
Returns a {{domxref("DOMString")}} containing the whole URL. It is a synonym for {{domxref("URLUtils.href")}}, though it can't be used to modify the value.
-
- -

Specifications

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('URL', '#urlutils', 'URLUtils')}}{{Spec2('URL')}}Initial definition
- -

Browser compatibility

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatNo}} [1]{{CompatGeckoDesktop("22")}} [1]{{CompatNo}} [1]{{CompatNo}} [1]{{CompatNo}} [1]
searchParams{{CompatUnknown}}{{CompatGeckoDesktop("29")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
username and password{{CompatUnknown}}{{CompatGeckoDesktop("26")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
origin {{CompatUnknown}}{{CompatGeckoDesktop("26")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
origin on Windows.location{{CompatUnknown}}{{CompatGeckoDesktop("21")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}} [1]{{CompatNo}} [1]{{CompatGeckoMobile("22")}} [1]{{CompatNo}} [1]{{CompatNo}} [1]{{CompatNo}} [1]
searchParams{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
username and password{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("26")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
origin {{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("26")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
origin on Windows.location{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("21")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

[1] Though not grouped in a single abstract interface, these methods are directly available on the interfaces that implement it, if this interface is supported.

- -

See also

- - - -

-
-
- -
 
-
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..c09953a49e --- /dev/null +++ b/files/it/web/api/websockets_api/index.html @@ -0,0 +1,179 @@ +--- +title: WebSockets +slug: WebSockets +tags: + - References + - WebSockets +translation_of: Web/API/WebSockets_API +--- +

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.

+ +
+
+

Documentazione

+ +
+
Scrivere applicazioni WebSocket lato client
+
Un tutorial per scrivere applicazioni WebSocket da eseguire nel browser.
+
WebSockets reference
+
Informazioni dettagliate sulla API lato client.
+
(TBD) Writing WebSocket servers
+
Una guida per scrivere applicazioni lato server che gestiscano il protocollo WebSocket.
+
+ +

Visualizza tutti

+
+ +
+

Strumenti

+ + + + + + +
+
+ +

Vedi anche

+ + + +

Compatibilità tra browser

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Version -76 support {{obsolete_inline}}6{{CompatGeckoDesktop("2.0")}}{{CompatNo}}11.00 (disabled)5.0.1
Protocol version 7 support {{obsolete_inline}}{{CompatNo}}{{CompatGeckoDesktop("6.0")}}
+ {{property_prefix("Moz")}}		{{CompatNo}}{{CompatNo}}{{CompatNo}}
Protocol version 10 support {{obsolete_inline}}14{{CompatGeckoDesktop("7.0")}}
+ {{property_prefix("Moz")}}		HTML5 Labs{{CompatUnknown}}{{CompatUnknown}}
Standard - RFC 6455 Support16{{CompatGeckoDesktop("11.0")}}1012.106.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Version -76 support {{obsolete_inline}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Protocol version 7 support {{obsolete_inline}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Protocol version 8 support (IETF draft 10) {{obsolete_inline}}{{CompatUnknown}}{{CompatGeckoMobile("7.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Standard - RFC 6455 Support16 (Chrome){{CompatGeckoDesktop("11.0")}}{{CompatUnknown}}12.106.0
+
+ +

Gecko notes

+ +

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.

+ +

Gecko 6.0

+ +

Prior to Gecko 6.0 {{geckoRelease("6.0")}}, there was, incorrectly, a WebSocket object that some sites were thinking implied that WebSocket services were not prefixed; this object has been renamed to MozWebSocket.

+ +

Gecko 7.0

+ +

Starting in Gecko 7.0 {{geckoRelease("7.0")}}, the network.websocket.max-connections preference is used to determine the maximum number of WebSocket connections that can be open at a time. The default value is 200.

+ +

Gecko 8.0

+ +

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.

+ +

Gecko 11.0

+ +

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.

+ +

Additionally, ArrayBuffer send and receive support for binary data has been implemented.

+ +

Starting in Gecko 11.0, the WebSocket API is no longer prefixed.

+ +
Warning: Among other things, a key reason WebSockets was disabled by default in Firefox 4 and 5 is the discovery of a security issue in the protocol's design. This was fixed in Firefox 6 by implementing a newer version of the protocol that corrects the problem.
+ +
{{HTML5ArticleTOC}}
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..a146730537 --- /dev/null +++ b/files/it/web/api/websockets_api/writing_websocket_client_applications/index.html @@ -0,0 +1,184 @@ +--- +title: Writing WebSocket client applications +slug: WebSockets/Writing_WebSocket_client_applications +tags: + - WebSocket +translation_of: Web/API/WebSockets_API/Writing_WebSocket_client_applications +--- +

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

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

{{AvailableInWorkers}}

+ +

Creare un oggetto WebSocket

+ +

Per rendere possibile la comunicazione utilizzando il protocollo WebSocket avrai bisogno di creare un oggetto WebSocket; questo proverà automaticamente a connettersi con il server.

+ +

Il costruttore del WebSocket accetta due parametri, di cui il secondo opzionale:

+ +
WebSocket WebSocket(
+  in DOMString url,
+  in optional DOMString protocols
+);
+
+ +
+
url
+
Lo URL a cui connettersi, questo dovrebbe essere lo URL al quale il server WebSocket risponderà.
+
protocols {{ optional_inline() }}
+
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.
+
+ +

Il costruttore può lanciare un eccezione:

+ +
+
SECURITY_ERR
+
La porta a cui la connessione sta provado ad accedere è bloccata.
+
+ +
+
+ +

Errori di connessione

+ +

Se accade un errore durante un tentativo di connessione, prima un semplice evento con il nome "error" è inviato all'oggetto WebSocket (invocando così il suo gestore onerror), e poi CloseEvent (invocando così il gestore onclose) per indicare la ragione della chiusura di connessione.

+ +

Da Firefox 11 tuttavia, è tipico ricevere un errore descrittivo nella console della piattaforma Mozilla e un codice di chiusura definito in RFC 6455, Section 7.4 attraverso CloseEvent.

+ +

Esempi

+ +

Questo semplice esempio crea un nuovo WebSocket, connettendosi al server all'indirizzo ws://www.example.com/socketserver. Un protocollo chiamato "protocolOne" è presente nella richiesta per il socket in esempio anche se omesso.

+ +
var esempioSocket = new WebSocket("ws://www.example.com/socketserver", "protocolOne");
+
+ +

Alla restituzione, esempioSocket.readyState è CONNECTING. Il readyState diventerà OPEN quando la connessione sarà abilitata a trasmettere dati.

+ +

Se vuoi aprire una connessione e essere flessibile sui protocolli che supporti, puoi specificare un array di protocolli:

+ +
var esempioSocket = new WebSocket("ws://www.example.com/socketserver", ["protocolOne", "protocolTwo"]);
+
+ +

Quando la connessione è stabilita (quindi readyState è OPEN), esempioSocket.protocol ti dirà quale protocollo il server ha selezionato.

+ +

Negli esempi qui sopra, ws sostituisce http, così come wss sostituisce https. Per stabilire un WebSocket ci si basa sul meccanismo di upgrade HTTP, così la richiesta per l'aggiornamento del protocollo è implicita quando richiamiamo il server HTTP come ws://www.example.com oppure wss://www.example.com.

+ +

Inviare dati al server

+ +

Una volta stabilita la connessione puoi trasmettere dati al server. Per farlo, chiama il metodo send() dell'oggetto WebSocket per ogni messaggio che vuoi inviare:

+ +
esempioSocket.send("Ecco del testo che il server sta aspettando di ricevere!");
+
+ +

Puoi inviare dati come una stringa, {{ domxref("Blob") }} o un ArrayBuffer.

+ +
Note: Prima della versione 11, Firefox supportava solamente l'invio di dati come stringa.
+ +

Stabilire una connessione è un'operazione di natura asincrona e quindi incline a errori. Chiamare il metodo send() immediatamente dopo la creazione del WebSocket non ne implica il successo. Possiamo assicurarci che l'invio di dati venga fatto dopo l'avvenuta connessione con un gestore onopen:

+ +
esempioSocket.onopen = function (event) {
+  esempioSocket.send("Ecco del testo che il server sta aspettando di ricevere!");
+};
+
+ +

Usare JSON per trasmettere oggetti

+ +

Una cosa utile che puoi fare è di utilizzare JSON per inviare dati ragionevolmente complessi al server. Per esempio, un programma di chat puoi interagire con il server utilizzando pacchetti di dati JSON-incapsulati:

+ +
// 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 = "";
+}
+
+ +

Ricevere messaggi dal server

+ +

WebSockets è una API dipendente dagli eventi; quando i messaggi sono ricevuti, un evento "message" è inviato alla funzione onmessage. Per iniziare a ascoltare per la ricezione di dati puoi fare così:

+ +
esempioSocket.onmessage = function (event) {
+  console.log(event.data);
+}
+
+ +

Ricevere e interpretare oggetti JSON

+ +

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:

+ + + +

Il codice che interpreta questi messaggi in arrivo potrebbe assomigliare a questo:

+ +
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);
+  }
+};
+
+ +

Qui utilizziamo JSON.parse() per convertire l'oggetto JSON all'oggetto originale, poi esaminiamo e agiamo sui suoi contenuti.

+ +

Formato dati testo

+ +

Il testo ricevuto attraverso una connessione WebSocket è in formato UTF-8.

+ +

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.

+ +

Chiudere la connessione

+ +

Quando hai finito di usare la connessione WebSocket, chiama il metodo close() del WebSocket:

+ +
esempioSocket.close();
+
+ +

Potrebbe essere utile esaminare l'attributo bufferedAmount prima di provare a chiudere la connessione per assicurarsi che non ci siano dati che devono essere ancora trasmessi al network.

+ +

Considerazioni di sicurezza

+ +

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.

diff --git a/files/it/web/api/window/domcontentloaded_event/index.html b/files/it/web/api/window/domcontentloaded_event/index.html new file mode 100644 index 0000000000..9b2cf7467e --- /dev/null +++ b/files/it/web/api/window/domcontentloaded_event/index.html @@ -0,0 +1,75 @@ +--- +title: DOMContentLoaded event +slug: Web/Events/DOMContentLoaded +tags: + - Evento + - Referenza + - Web + - eventi +translation_of: Web/API/Window/DOMContentLoaded_event +--- +
{{APIRef}}
+ +

L'evento DOMContentLoaded si attiva quando il documento HTML iniziale è stato completamente caricato e analizzato, senza attendere che i fogli di stile, le immagini e i sottoframe finiscano di caricarsi.

+ + + + + + + + + + + + + + + + + + + + +
BubblingSì
CancellabileSì (anche se specificato come evento semplice che non è cancellabile)
Interfaccia{{domxref("Event")}}
Proprietà dell'handlerNessuna
+ +

L'obiettivo originale per questo evento è il Document che è stato caricato. È possibile ascoltare questo evento nell'interfaccia Window per gestirlo nelle fasi di capturing o bubbling. Per i dettagli completi su questo evento, consulta la pagina sull'evento Document: DOMContentLoaded.

+ +

Un evento diverso, load, dovrebbe essere utilizzato solo per rilevare una pagina completamente caricata. È un errore comune utilizzare load dove DOMContentLoaded sarebbe più appropriato.

+ +

Esempi

+ +

Utilizzo di base

+ +
document.addEventListener('DOMContentLoaded', (event) => {
+    console.log('DOM completamente caricato e analizzato');
+});
+
+ +

Specifiche

+ + + + + + + + + + + + +
SpecificaStato
{{SpecName('HTML WHATWG', 'indices.html#event-domcontentloaded')}}{{Spec2('HTML WHATWG')}}
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Window.DOMContentLoaded_event")}}

+ +

Vedi anche

+ + 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..ebebfa374d --- /dev/null +++ b/files/it/web/api/window/find/index.html @@ -0,0 +1,32 @@ +--- +title: window.find +slug: window.find +tags: + - DOM + - DOM0 + - Gecko + - Gecko DOM Reference +translation_of: Web/API/Window/find +--- +

{{ ApiRef() }}

+

Sommario

+

Trova una stringa in una finestra.

+

Sintassi

+
window.find(aString, aCaseSensitive, aBackwards, aWrapAround,
+            aWholeWord, aSearchInFrames, aShowDialog);
+
+ +

Returns

+

true if the string is found; otherwise, false.

+

Esempio

+

Note

+

Specifiche

+

{{ DOM0() }} This was added by with {{ Bug(9550) }}.

diff --git a/files/it/web/api/window/load_event/index.html b/files/it/web/api/window/load_event/index.html new file mode 100644 index 0000000000..2939f32c27 --- /dev/null +++ b/files/it/web/api/window/load_event/index.html @@ -0,0 +1,123 @@ +--- +title: load +slug: Web/Events/load +tags: + - CompatibilitàBrowser + - Evento +translation_of: Web/API/Window/load_event +--- +

L'evento load si attiva quando una risorsa e le sue risorse dipendenti hanno completato il caricamento.

+ +

Esempi

+ +

Window

+ +
<script>
+  window.addEventListener("load", function(event) {
+    console.log("Tutte le risorse hanno terminato il caricamento!");
+  });
+</script>
+ +

L'elemento script

+ +
<script>
+  var script = document.createElement("script");
+  script.addEventListener("load", function(event) {
+    console.log("Lo script ha terminato il caricamento e l'esecuzione");
+  });
+  script.src = "http://example.com/example.js";
+  script.async = true;
+  document.getElementsByTagName("script")[0].parentNode.appendChild(script);
+</script>
+ +

Info generali

+ +
+
Specifica
+
DOM L3
+
Interfaccia
+
UIEvent
+
Bubbles
+
No
+
Cancelable
+
No
+
Target
+
Window, Document, Element
+
Azione predefinita
+
Nessuna.
+
+ +

Proprietà

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ProprietàTipoDescrizione
target {{readonlyInline}}{{domxref("EventTarget")}}Il target dell'evento (l'obiettivo più in alto nell'albero del DOM).
type {{readonlyInline}}{{domxref("DOMString")}}Il tipo di evento.
bubbles {{readonlyInline}}{{domxref("Boolean")}}Se l'evento normalmente bolle o no.
cancelable {{readonlyInline}}{{domxref("Boolean")}}Se l'evento è cancellabile o meno.
view {{readonlyInline}}{{domxref("WindowProxy")}}{{domxref("Document.defaultView", "document.defaultView")}} (window del documento)
detail {{readonlyInline}}long (float)0
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('UI Events', '#event-type-load', 'load')}}{{Spec2('UI Events')}} 
{{SpecName('HTML WHATWG', 'parsing.html#the-end:event-load', 'Load event')}}{{Spec2('HTML WHATWG')}}Questo collega alla sezione nei passaggi che vengono eseguiti alla fine del caricamento di un documento. gli eventi di "caricamento" vengono attivati anche a molti elementi. E nota che ci sono molti punti nelle specifiche che fanno riferimento a cose che possono "ritardare l'evento load".
+ +

Eventi correlati

+ + diff --git a/files/it/web/api/windoworworkerglobalscope/clearinterval/index.html b/files/it/web/api/windoworworkerglobalscope/clearinterval/index.html new file mode 100644 index 0000000000..63b0682983 --- /dev/null +++ b/files/it/web/api/windoworworkerglobalscope/clearinterval/index.html @@ -0,0 +1,48 @@ +--- +title: WindowTimers.clearInterval() +slug: Web/API/WindowTimers/clearInterval +translation_of: Web/API/WindowOrWorkerGlobalScope/clearInterval +--- +
+
{{APIRef("HTML DOM")}}
+
+ +

Interrompe l'azione ripetuta dall'utilizzo del comando {{domxref("window.setInterval", "setInterval")}}.

+ +

Sintassi

+ +
window.clearInterval(intervalID)
+
+ +

intervalID è un identificatore dell'azione ripetuta che vuoi cancellare. Questo ID viene passato con il return di setInterval().

+ +

Esempio

+ +

Vedi setInterval() example.

+ +

Specifiche

+ + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'timers.html#timers', 'clearInterval')}}{{Spec2('HTML WHATWG')}}
+ +

Vedi anche

+ + diff --git a/files/it/web/api/windowtimers/clearinterval/index.html b/files/it/web/api/windowtimers/clearinterval/index.html deleted file mode 100644 index 63b0682983..0000000000 --- a/files/it/web/api/windowtimers/clearinterval/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: WindowTimers.clearInterval() -slug: Web/API/WindowTimers/clearInterval -translation_of: Web/API/WindowOrWorkerGlobalScope/clearInterval ---- -
-
{{APIRef("HTML DOM")}}
-
- -

Interrompe l'azione ripetuta dall'utilizzo del comando {{domxref("window.setInterval", "setInterval")}}.

- -

Sintassi

- -
window.clearInterval(intervalID)
-
- -

intervalID è un identificatore dell'azione ripetuta che vuoi cancellare. Questo ID viene passato con il return di setInterval().

- -

Esempio

- -

Vedi setInterval() example.

- -

Specifiche

- - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'timers.html#timers', 'clearInterval')}}{{Spec2('HTML WHATWG')}}
- -

Vedi anche

- - 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 ---- -
{{APIRef("HTML DOM")}}
- -

WindowTimers contains utility methods to set and clear timers.

- -

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.

- -

Properties

- -

This interface does not define any property, nor inherit any.

- -

Methods

- -

This interface does not inherit any method.

- -
-
{{domxref("WindowTimers.clearInterval()")}}
-
Cancels the repeated execution set using {{domxref("WindowTimers.setInterval()")}}.
-
{{domxref("WindowTimers.clearTimeout()")}}
-
Cancels the delayed execution set using {{domxref("WindowTimers.setTimeout()")}}.
-
{{domxref("WindowTimers.setInterval()")}}
-
Schedules the execution of a function each X milliseconds.
-
{{domxref("WindowTimers.setTimeout()")}}
-
Sets a delay for executing a function.
-
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#windowtimers', 'WindowTimers')}}{{Spec2('HTML WHATWG')}}No change since the latest snapshot, {{SpecName("HTML5.1")}}.
{{SpecName('HTML5.1', '#windowtimers', 'WindowTimers')}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName("HTML WHATWG")}}. No change.
{{SpecName("HTML5 W3C", "#windowtimers", "WindowTimers")}}{{Spec2('HTML5 W3C')}}Snapshot of {{SpecName("HTML WHATWG")}}. Creation of WindowBase64 (properties where on the target before it).
- -

Browser compatibility

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatGeckoDesktop(1)}}1.04.04.01.0
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Basic support{{CompatGeckoMobile(1)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

 

- -

See also

- - diff --git a/files/it/web/api/xmlhttprequest/usare_xmlhttprequest/index.html b/files/it/web/api/xmlhttprequest/usare_xmlhttprequest/index.html deleted file mode 100644 index 4f55ac07ff..0000000000 --- a/files/it/web/api/xmlhttprequest/usare_xmlhttprequest/index.html +++ /dev/null @@ -1,741 +0,0 @@ ---- -title: Usare XMLHttpRequest -slug: Web/API/XMLHttpRequest/Usare_XMLHttpRequest -translation_of: Web/API/XMLHttpRequest/Using_XMLHttpRequest ---- -

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 stato HTTP. Questa pagina illustra alcuni dei più comuni e oscuri casi d'uso di questo potente oggetto XMLHttpRequest.

- -
function reqListener () {
-  console.log(this.responseText);
-}
-
-var oReq = new XMLHttpRequest();
-oReq.onload = reqListener;
-oReq.open("GET", "http://www.example.org/example.txt");
-oReq.send();
- -

Tipi di Richieste

- -

Una richiesta inviata con XMLHttpRequest può essere restituita in due modi, sincrona o asincrona. Il tipo di richiesta viene deciso dall'argomento opzionale async (il terzo argomento) che viene impostato nel metodo open() di {{domxref("XMLHttpRequest.open()")}}. Se l'argomento è true o se non è specificato, il XMLHttpRequest è processato in maniera asincrona, in caso contrario è processato in maniera sincrona. Una discussione dettagliata è una dimostrazione di queste due tipologie di richieste possono essere trovate nella pagina richieste sincrone ed asincrone. In generale, dovresti usare raramente le richieste sincrone, se mai ne farai uso.

- -
Nota: Da Gecko 30.0 {{ geckoRelease("30.0") }}, le richieste sincrone sul thread principale sono state deprecate a causa degli effetti negativi sull'esperienza utente.
- -

Gestire le risposte

- -

Ci sono vari tipi di attributi di risposta definite dallo standard W3C sul costruttore XMLHttpRequest. Questi sono in grado di fornire al client che effettua la richiesta importanti informazioni sullo stato della risposta. In alcuni casi in cui si lavora con risposte di tipo non testuale possono riguardare alcuni elementi di analisi e manipulazioni come evidenziato dai paragrafi seguenti.

- -

Analizzare e modificare la proprietà  responseXML

- -

Se si usa l'oggetto XMLHttpRequest per ricevere il contenuto di un documento XML remoto, la proprietà responseXML dell'oggetto stesso sarà assegnata a un oggetto DOM contentente un il documento XML a cui è stata effettuata una operazione di parsing. Se si lavora con tale proprietà può essere difficile analizzare e modificare tale proprietà. Di seguito sono riportate i quattro principali metodi per lavorare con tale documento XML:

- -
    -
  1. Utilizzare XPath per indirizzare (cioè puntare a) parti di esso.
    2. -
  2. Usare JXON per convertire il documento in un albero JavaScript Object.
    3. -
  3. Effettuare il Parsing e la serializzazione XML manualmente su stringhe e oggetti.
    4. -
  4. Utilizzare un XMLSerializer per serializzare alberi DOM su stringhe o file.
    5. -
  5. RegExp possono essere utilizzate se si conosce sempre il contenuto del documento XML a priori. In tal caso, se si utilizzano delle espressioni regolari con coscienza dei ritorni di riga, può essere necessario o consigliato di rimuovere le interruzioni di riga. In ogni caso è sempre sconsigliato utilizzare questo metodo e di considerarlo solo come "ultima spiaggia" in quanto se il documento XML dovesse cambiare anche in modo irrisorio questa metodologia potrebbe fallire.
    6. -
- -

Analizzare e manipolare una proprietà responseText contenentente un documento HTML

- -
Nota: La W3C XMLHttpRequest specification permette il parse del codice HTML tramite la proprietà XMLHttpRequest.responseXML. SI legga l'articolo a riguardo HTML in XMLHttpRequest per dettagli.
- -

Se si utilizza l'oggetto XMLHttpRequest per ottenere il contenuto di una pagina HTML remota, la proprietà responseText conterrà un amalgama di tutti i tag HTML. Ciò può essere difficile da manipolare e analizzare. Ci sono principalmente tre divere metodologie per analizzare questo insieme:

- -
    -
  1. Utilizzare la proprietà XMLHttpRequest.responseXML.
    2. -
  2. Iniettare il contenuto nel corpo di un document fragment attraverso la proprietà fragment.body.innerHTML e navigare il codice DOM del fragment.
    3. -
  3. Ancora una volta RegExp possono essere utlizzate se si conosce sempre il contenuto della risposta HTML. Questo metodo è, comuqnue, sconsigliato perchè anche una piccola modifica del codice HTML sorgente potrebbe protare questa metodologia a fallire.
    4. -
- -

Gestire dati binari

- -

Nonostante l'oggetto XMLHttpRequest è principalmente utilizzato per ricevere e inviare dati testuali, può essere utilizzato per inviare e ricevere dati dal contenuto binario. Esistono svariati metodi ben testati per fare sì che l'oggetto in questione invii dati binari. Questi metodo prevedono l'utilizzo del metodo .overrideMimeType(...) sull'oggetto.

- -
var oReq = new XMLHttpRequest();
-oReq.open("GET", url, true);
-// riceve dei dati non porcessati come una stringa binaria
-oReq.overrideMimeType("text/plain; charset=x-user-defined");
-/* ... */
-
- -

La XMLHttpRequest Level 2 Specification aggiunge un nuovo attributo responseType che permette di inviare e ricevere dati binari in modo molto più semplice.

- -
var oReq = new XMLHttpRequest();
-
-oReq.open("GET", url, true);
-oReq.responseType = "arraybuffer";
-oReq.onload = function(e) {
-  var arraybuffer = oReq.response; // non responseText
-  /* ... */
-}
-oReq.send();
-
- -

Per più esempi si veda la pagina Sending and Receiving Binary Data.

- -

Monitoraggio del progresso

- -

L'oggetto XMLHttpRequest fornisce la possibilità di ascoltare svariati eventi che possono occorrere mentre la richiesta è processata. Questo inclulde periodici aggiornamenti sul progresso, notificazione di errori e così via.

- -

Il supporto agli eventi di monitoraggio del progresso DOM dell'oggetto XMLHttpRequest ripetta le API specification progress events: tali eventi implementano l'interfaccia {{domxref("ProgressEvent")}}.

- -
var oReq = new XMLHttpRequest();
-
-oReq.addEventListener("progress", updateProgress, false);
-oReq.addEventListener("load", transferComplete, false);
-oReq.addEventListener("error", transferFailed, false);
-oReq.addEventListener("abort", transferCanceled, false);
-
-oReq.open();
-
-// ...
-
-// progress on transfers from the server to the client (downloads)
-function updateProgress (oEvent) {
-  if (oEvent.lengthComputable) {
-    var percentComplete = oEvent.loaded / oEvent.total;
-    // ...
-  } else {
-    // Impossibile elaborare il progresso perche' non si conosce la grandezza totale
-  }
-}
-
-function transferComplete(evt) {
-  alert("Trasferimento completato!");
-}
-
-function transferFailed(evt) {
-  alert("E' avvenuto un errore nel trasferimento");
-}
-
-function transferCanceled(evt) {
-  alert("Il trasferimento è stato cancellato dall'utente");
-}
- -

Le linee 3-6 aggiungono degli event listener per i vari eventi che sono inviati mentre si performa un trasferimento di dati con l'oggetto XMLHttpRequest.

- -
Nota: Quando si assegnano degli event listeners è necessario farlo prima di chiamare il metodo open() sulla richiesta. Se ciò non viene effettuato gli eventi non vengono inviati.
- -

L'event handler per il progresso, specificato dalla funzione updateProgress() in questo esempio, riceve il numero totale di byte da trasferire e il numero di byte trasferiti finora nei campi total e loaded rispettivamente. In ogni caso, se il campo lengthComputable risulta falsa, la lunghezza totale risulta sconosciuta e sarà riportata come zero.

- -

Gli eventi di progresso esistono sia per il download che per l'upload. Gli eventi di download sono notificati sull'oggetto XMLHttpRequest stesso, come indicato dall'esempio sopra. Quelli di upload, invece, sono notificati sull'attributo XMLHttpRequest.upload come mostrato sotto:

- -
var oReq = new XMLHttpRequest();
-
-oReq.upload.addEventListener("progress", updateProgress, false);
-oReq.upload.addEventListener("load", transferComplete, false);
-oReq.upload.addEventListener("error", transferFailed, false);
-oReq.upload.addEventListener("abort", transferCanceled, false);
-
-oReq.open();
-
- -
Nota: Gli eventi di progresso non sono disponibili per il protocollo file://.
- -
Nota: Correntemente ci sono dei bug aperti per gli eventi di progresso che affliggono la versione 25 di Firefox su OS X e Linux.
- -
-

Nota: A partire da {{Gecko("9.0")}}, gli eventi di progresso possono essere lanciati per ogni parte di dato ricevuta, inclusa l'ultima parte dove l'ultimo pacchetto è ricevuto e la connesione chiusa prima che l'evento di progresso sia notificato. In questo caso l'evento di progresso è notificato automaticamente quando occorre l'evento di "load" per tale pacchetto. Questo permette di creare un monitoraggio affidabile solamente osservando gli eventi di progresso.

-
- -
-

Nota: A partire da  {{Gecko("12.0")}}, se l'evento di progresso è chiamato con un responseType di tipo moz-blob, il valore di risposta sarà un {{domxref("Blob")}} contenente i dati ricevuti fino a quel punto.

-
- -

Si puà anche rilevare tutti e tre le tipologie di terminazione del caricamento(abort, load o error) utilizzando l'evento loadend:

- -
req.addEventListener("loadend", loadEnd, false);
-
-function loadEnd(e) {
-  alert("Trasferimento terminato (anche se non sappiamo come).");
-}
-
- -

Si noti che non c'è modo di essere sicuri di conoscere con le informazioni ricevute dall'evento loadend quali condizioni hanno causato il termine dell'operazione. In ogni caso si può usare questo per gestire operazioni che devono essere eseguite al termine del trasferimento.

- -

Inviare form e caricare file

- -

Istanze di un oggetto XMLHttpRequest possono essere usate per inviare form in principalmente due modi:

- - - -

Il secondo modo (utilizzando l'oggetto FormData) è il più semplice e veloce, ma ha lo svantaggio che i dati raccolto non possono essere trasformati in stringa.
- Il primo modo, invece, è più complesso, ma è anche in cambio più potente e flessibile.

- -

Usando l'oggetto XMLHttpRequest

- -

Inviare form senza le API dell'oggetto FormData non richiede l'utilizzo di altre API tranne nel caso di FileReader nel caso si voglia caricare più di un file.

- -

Una breve introduzione del metodo submit

- -

Un html {{ HTMLElement("form") }} può essere inviata in quattro possibili modi:

- - - -

Ora, si consideri di inviare una form contenente solo due campi, chiamati foo e baz. Se si sta utilizzando il metodo POST il server riceverà una stringa simile a una delle seguenti tre linee a seconda del tipo di encoding utilizzato:

- - - -

Invece, se si utilizza un metodo GET una stringa simile alla seguente sarà semplicemente aggiunta all'URL:

- -
?foo=bar&baz=The%20first%20line.%0AThe%20second%20line.
- -

Un piccolo framwork vanilla

- -

Tutte queste cose sono eseguite automaticamente dal web browser ogni volta che si esegue il submit di una {{ HTMLElement("form") }}. Ma se si vuole fare lo stesso usando JavaScript bisogna istruire l'interprete su tutte le operazioni da eseguire. Inviare delle form in AJAX puro risulta troppo complesso per essere spiegato qui; per questa ragione abbiamo creato un framework completo (ma comunque puramente didattico) che possa essere usato in tutti e quattro i metodi di submit e anche per caricare dei file.

- -
-
<!doctype html>
-<html>
-<head>
-<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-<title>Sending forms with pure AJAX &ndash; MDN</title>
-<script type="text/javascript">
-
-"use strict";
-
-/*\
-|*|
-|*|  :: XMLHttpRequest.prototype.sendAsBinary() Polyfill ::
-|*|
-|*|  https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest#sendAsBinary()
-\*/
-
-if (!XMLHttpRequest.prototype.sendAsBinary) {
-  XMLHttpRequest.prototype.sendAsBinary = function(sData) {
-    var nBytes = sData.length, ui8Data = new Uint8Array(nBytes);
-    for (var nIdx = 0; nIdx < nBytes; nIdx++) {
-      ui8Data[nIdx] = sData.charCodeAt(nIdx) & 0xff;
-    }
-    /* send as ArrayBufferView...: */
-    this.send(ui8Data);
-    /* ...or as ArrayBuffer (legacy)...: this.send(ui8Data.buffer); */
-  };
-}
-
-/*\
-|*|
-|*|  :: AJAX Form Submit Framework ::
-|*|
-|*|  https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest
-|*|
-|*|  This framework is released under the GNU Public License, version 3 or later.
-|*|  http://www.gnu.org/licenses/gpl-3.0-standalone.html
-|*|
-|*|  Syntax:
-|*|
-|*|   AJAXSubmit(HTMLFormElement);
-\*/
-
-var AJAXSubmit = (function () {
-
-  function ajaxSuccess () {
-    /* console.log("AJAXSubmit - Success!"); */
-    alert(this.responseText);
-    /* you can get the serialized data through the "submittedData" custom property: */
-    /* alert(JSON.stringify(this.submittedData)); */
-  }
-
-  function submitData (oData) {
-    /* the AJAX request... */
-    var oAjaxReq = new XMLHttpRequest();
-    oAjaxReq.submittedData = oData;
-    oAjaxReq.onload = ajaxSuccess;
-    if (oData.technique === 0) {
-      /* method is GET */
-      oAjaxReq.open("get", oData.receiver.replace(/(?:\?.*)?$/, oData.segments.length > 0 ? "?" + oData.segments.join("&") : ""), true);
-      oAjaxReq.send(null);
-    } else {
-      /* method is POST */
-      oAjaxReq.open("post", oData.receiver, true);
-      if (oData.technique === 3) {
-        /* enctype is multipart/form-data */
-        var sBoundary = "---------------------------" + Date.now().toString(16);
-        oAjaxReq.setRequestHeader("Content-Type", "multipart\/form-data; boundary=" + sBoundary);
-        oAjaxReq.sendAsBinary("--" + sBoundary + "\r\n" + oData.segments.join("--" + sBoundary + "\r\n") + "--" + sBoundary + "--\r\n");
-      } else {
-        /* enctype is application/x-www-form-urlencoded or text/plain */
-        oAjaxReq.setRequestHeader("Content-Type", oData.contentType);
-        oAjaxReq.send(oData.segments.join(oData.technique === 2 ? "\r\n" : "&"));
-      }
-    }
-  }
-
-  function processStatus (oData) {
-    if (oData.status > 0) { return; }
-    /* the form is now totally serialized! do something before sending it to the server... */
-    /* doSomething(oData); */
-    /* console.log("AJAXSubmit - The form is now serialized. Submitting..."); */
-    submitData (oData);
-  }
-
-  function pushSegment (oFREvt) {
-    this.owner.segments[this.segmentIdx] += oFREvt.target.result + "\r\n";
-    this.owner.status--;
-    processStatus(this.owner);
-  }
-
-  function plainEscape (sText) {
-    /* how should I treat a text/plain form encoding? what characters are not allowed? this is what I suppose...: */
-    /* "4\3\7 - Einstein said E=mc2" ----> "4\\3\\7\ -\ Einstein\ said\ E\=mc2" */
-    return sText.replace(/[\s\=\\]/g, "\\$&");
-  }
-
-  function SubmitRequest (oTarget) {
-    var nFile, sFieldType, oField, oSegmReq, oFile, bIsPost = oTarget.method.toLowerCase() === "post";
-    /* console.log("AJAXSubmit - Serializing form..."); */
-    this.contentType = bIsPost && oTarget.enctype ? oTarget.enctype : "application\/x-www-form-urlencoded";
-    this.technique = bIsPost ? this.contentType === "multipart\/form-data" ? 3 : this.contentType === "text\/plain" ? 2 : 1 : 0;
-    this.receiver = oTarget.action;
-    this.status = 0;
-    this.segments = [];
-    var fFilter = this.technique === 2 ? plainEscape : escape;
-    for (var nItem = 0; nItem < oTarget.elements.length; nItem++) {
-      oField = oTarget.elements[nItem];
-      if (!oField.hasAttribute("name")) { continue; }
-      sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT";
-      if (sFieldType === "FILE" && oField.files.length > 0) {
-        if (this.technique === 3) {
-          /* enctype is multipart/form-data */
-          for (nFile = 0; nFile < oField.files.length; nFile++) {
-            oFile = oField.files[nFile];
-            oSegmReq = new FileReader();
-            /* (custom properties:) */
-            oSegmReq.segmentIdx = this.segments.length;
-            oSegmReq.owner = this;
-            /* (end of custom properties) */
-            oSegmReq.onload = pushSegment;
-            this.segments.push("Content-Disposition: form-data; name=\"" + oField.name + "\"; filename=\""+ oFile.name + "\"\r\nContent-Type: " + oFile.type + "\r\n\r\n");
-            this.status++;
-            oSegmReq.readAsBinaryString(oFile);
-          }
-        } else {
-          /* enctype is application/x-www-form-urlencoded or text/plain or method is GET: files will not be sent! */
-          for (nFile = 0; nFile < oField.files.length; this.segments.push(fFilter(oField.name) + "=" + fFilter(oField.files[nFile++].name)));
-        }
-      } else if ((sFieldType !== "RADIO" && sFieldType !== "CHECKBOX") || oField.checked) {
-        /* field type is not FILE or is FILE but is empty */
-        this.segments.push(
-          this.technique === 3 ? /* enctype is multipart/form-data */
-            "Content-Disposition: form-data; name=\"" + oField.name + "\"\r\n\r\n" + oField.value + "\r\n"
-          : /* enctype is application/x-www-form-urlencoded or text/plain or method is GET */
-            fFilter(oField.name) + "=" + fFilter(oField.value)
-        );
-      }
-    }
-    processStatus(this);
-  }
-
-  return function (oFormElement) {
-    if (!oFormElement.action) { return; }
-    new SubmitRequest(oFormElement);
-  };
-
-})();
-
-</script>
-</head>
-<body>
-
-<h1>Sending forms with pure AJAX</h1>
-
-<h2>Using the GET method</h2>
-
-<form action="register.php" method="get" onsubmit="AJAXSubmit(this); return false;">
-  <fieldset>
-    <legend>Registration example</legend>
-    <p>
-      First name: <input type="text" name="firstname" /><br />
-      Last name: <input type="text" name="lastname" />
-    </p>
-    <p>
-      <input type="submit" value="Submit" />
-    </p>
-  </fieldset>
-</form>
-
-<h2>Using the POST method</h2>
-<h3>Enctype: application/x-www-form-urlencoded (default)</h3>
-
-<form action="register.php" method="post" onsubmit="AJAXSubmit(this); return false;">
-  <fieldset>
-    <legend>Registration example</legend>
-    <p>
-      First name: <input type="text" name="firstname" /><br />
-      Last name: <input type="text" name="lastname" />
-    </p>
-    <p>
-      <input type="submit" value="Submit" />
-    </p>
-  </fieldset>
-</form>
-
-<h3>Enctype: text/plain</h3>
-
-<form action="register.php" method="post" enctype="text/plain" onsubmit="AJAXSubmit(this); return false;">
-  <fieldset>
-    <legend>Registration example</legend>
-    <p>
-      Your name: <input type="text" name="user" />
-    </p>
-    <p>
-      Your message:<br />
-      <textarea name="message" cols="40" rows="8"></textarea>
-    </p>
-    <p>
-      <input type="submit" value="Submit" />
-    </p>
-  </fieldset>
-</form>
-
-<h3>Enctype: multipart/form-data</h3>
-
-<form action="register.php" method="post" enctype="multipart/form-data" onsubmit="AJAXSubmit(this); return false;">
-  <fieldset>
-    <legend>Upload example</legend>
-    <p>
-      First name: <input type="text" name="firstname" /><br />
-      Last name: <input type="text" name="lastname" /><br />
-      Sex:
-      <input id="sex_male" type="radio" name="sex" value="male" /> <label for="sex_male">Male</label>
-      <input id="sex_female" type="radio" name="sex" value="female" /> <label for="sex_female">Female</label><br />
-      Password: <input type="password" name="secret" /><br />
-      What do you prefer:
-      <select name="image_type">
-        <option>Books</option>
-        <option>Cinema</option>
-        <option>TV</option>
-      </select>
-    </p>
-    <p>
-      Post your photos:
-      <input type="file" multiple name="photos[]">
-    </p>
-    <p>
-      <input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" /> <label for="vehicle_bike">I have a bike</label><br />
-      <input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" /> <label for="vehicle_car">I have a car</label>
-    </p>
-    <p>
-      Describe yourself:<br />
-      <textarea name="description" cols="50" rows="8"></textarea>
-    </p>
-    <p>
-      <input type="submit" value="Submit" />
-    </p>
-  </fieldset>
-</form>
-
-</body>
-</html>
-
- -

Per testarlo, create una pagina chiamata register.php (al quale fanno riferimento gli attributi action di queste form) e inserite il seguente contenuto.

- -
<?php
-/* register.php */
-
-header("Content-type: text/plain");
-
-/*
-NOTE: You should never use `print_r()` in production scripts, or
-otherwise output client-submitted data without sanitizing it first.
-Failing to sanitize can lead to cross-site scripting vulnerabilities.
-*/
-
-echo ":: data received via GET ::\n\n";
-print_r($_GET);
-
-echo "\n\n:: Data received via POST ::\n\n";
-print_r($_POST);
-
-echo "\n\n:: Data received as \"raw\" (text/plain encoding) ::\n\n";
-if (isset($HTTP_RAW_POST_DATA)) { echo $HTTP_RAW_POST_DATA; }
-
-echo "\n\n:: Files received ::\n\n";
-print_r($_FILES);
-
-
- -

La sintassi per attivare lo script è semplicemente:

- -
AJAXSubmit(myForm);
- -
Nota: Questo framework utilizza l'API FileReader per eseguire l'upload dei file. QUesta è una API recente e non ancora implementata nei browser come IE9 o inferiori. Per questa ragione l'upload AJAX-only è considerato una  tecnica sperimentale. Se non si ha bisogno dell'upload di file binari questo framework funzionera egregiamente nella maggior parte dei browser.
- -
Nota: Il modo migliore per inviare dei contenuti binari è attraverso ArrayBuffers o Blobs attraverso il metodo send() e possibilmente il metodo readAsArrayBuffer() dell'API FileReader. Ma, siccome l'obiettivo di questo script è di fuonzionare con dei dati  stringifiabli, si è usato il metodo sendAsBinary() assieme al metodo readAsBinaryString() delle API FileReader. Per questo, lo script sopra funziona sono quando si stanno gestendo file di piccole dimensioni. Se non si intende caricare del contenuto binario, considerare anche l'utilizzo delle API FormData.
- -

Usare oggetti FormData

- -

Il costruttore FormData permette di compliare una serie di coppie chiave/valore da inviare utilizzando una XMLHttpRequest. Si utilizza principalmente per inviare dati in una form, ma può essere usato indipendentemente dalle form per inviare dei dati con chiavi. I dati trasmessi sono gli stessi del formato utilizzato dal metodo submit() che le form usano per inviare i dati se il tipo encoding indicato è "multipart/form-data". Gli oggetti FormData possono essere utilizzati in uno svariato numero possibile con una XMLHttpRequest. Per esempi o speigazioni di come utilizzare una FormData con XMLHttpRequest si veda la pagina Usare l'oggetto FormData. Per fini didattici di seguito una traduzione dell'esempio precedente modificato per accettare l'API delle FormData. Si noti la brevità del codice.

- -
-
<!doctype html>
-<html>
-<head>
-<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-<title>Sending forms with FormData &ndash; MDN</title>
-<script type="text/javascript">
-"use strict";
-
-function ajaxSuccess () {
-  alert(this.responseText);
-}
-
-function AJAXSubmit (oFormElement) {
-  if (!oFormElement.action) { return; }
-  var oReq = new XMLHttpRequest();
-  oReq.onload = ajaxSuccess;
-  if (oFormElement.method.toLowerCase() === "post") {
-    oReq.open("post", oFormElement.action, true);
-    oReq.send(new FormData(oFormElement));
-  } else {
-    var oField, sFieldType, nFile, sSearch = "";
-    for (var nItem = 0; nItem < oFormElement.elements.length; nItem++) {
-      oField = oFormElement.elements[nItem];
-      if (!oField.hasAttribute("name")) { continue; }
-      sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT";
-      if (sFieldType === "FILE") {
-        for (nFile = 0; nFile < oField.files.length; sSearch += "&" + escape(oField.name) + "=" + escape(oField.files[nFile++].name));
-      } else if ((sFieldType !== "RADIO" && sFieldType !== "CHECKBOX") || oField.checked) {
-        sSearch += "&" + escape(oField.name) + "=" + escape(oField.value);
-      }
-    }
-    oReq.open("get", oFormElement.action.replace(/(?:\?.*)?$/, sSearch.replace(/^&/, "?")), true);
-    oReq.send(null);
-  }
-}
-</script>
-</head>
-<body>
-
-<h1>Sending forms with FormData</h1>
-
-<h2>Using the GET method</h2>
-
-<form action="register.php" method="get" onsubmit="AJAXSubmit(this); return false;">
-  <fieldset>
-    <legend>Registration example</legend>
-    <p>
-      First name: <input type="text" name="firstname" /><br />
-      Last name: <input type="text" name="lastname" />
-    </p>
-    <p>
-      <input type="submit" value="Submit" />
-    </p>
-  </fieldset>
-</form>
-
-<h2>Using the POST method</h2>
-<h3>Enctype: application/x-www-form-urlencoded (default)</h3>
-
-<form action="register.php" method="post" onsubmit="AJAXSubmit(this); return false;">
-  <fieldset>
-    <legend>Registration example</legend>
-    <p>
-      First name: <input type="text" name="firstname" /><br />
-      Last name: <input type="text" name="lastname" />
-    </p>
-    <p>
-      <input type="submit" value="Submit" />
-    </p>
-  </fieldset>
-</form>
-
-<h3>Enctype: text/plain</h3>
-
-<p>The text/plain encoding is not supported by the FormData API.</p>
-
-<h3>Enctype: multipart/form-data</h3>
-
-<form action="register.php" method="post" enctype="multipart/form-data" onsubmit="AJAXSubmit(this); return false;">
-  <fieldset>
-    <legend>Upload example</legend>
-    <p>
-      First name: <input type="text" name="firstname" /><br />
-      Last name: <input type="text" name="lastname" /><br />
-      Sex:
-      <input id="sex_male" type="radio" name="sex" value="male" /> <label for="sex_male">Male</label>
-      <input id="sex_female" type="radio" name="sex" value="female" /> <label for="sex_female">Female</label><br />
-      Password: <input type="password" name="secret" /><br />
-      What do you prefer:
-      <select name="image_type">
-        <option>Books</option>
-        <option>Cinema</option>
-        <option>TV</option>
-      </select>
-    </p>
-    <p>
-      Post your photos:
-      <input type="file" multiple name="photos[]">
-    </p>
-    <p>
-      <input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" /> <label for="vehicle_bike">I have a bike</label><br />
-      <input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" /> <label for="vehicle_car">I have a car</label>
-    </p>
-    <p>
-      Describe yourself:<br />
-      <textarea name="description" cols="50" rows="8"></textarea>
-    </p>
-    <p>
-      <input type="submit" value="Submit" />
-    </p>
-  </fieldset>
-</form>
-
-</body>
-</html>
-
- -
Nota: Come si è detto,gli oggetti {{domxref("FormData")}} non sono stringifiabli. Se si desidera porre in stringa dei dati inviati, utilizzare il precedente esempio in AJAX puro. Si noti che ci sono degli elementi file nel campo {{ HTMLElement("input") }}, quando si invia una form attraverso l'API FormData API non è necessario utilizzare le API FileReader: i file sono automaticamente caricati.
- -

Get last modified date

- -
function getHeaderTime () {
-  alert(this.getResponseHeader("Last-Modified"));  /* A valid GMTString date or null */
-}
-
-var oReq = new XMLHttpRequest();
-oReq.open("HEAD" /* use HEAD if you only need the headers! */, "yourpage.html", true);
-oReq.onload = getHeaderTime;
-oReq.send();
- -

Do something when last modified date changes

- -

Let's create these two functions:

- -
function getHeaderTime () {
-
-  var
-    nLastVisit = parseFloat(window.localStorage.getItem('lm_' + this.filepath)),
-    nLastModif = Date.parse(this.getResponseHeader("Last-Modified"));
-
-  if (isNaN(nLastVisit) || nLastModif > nLastVisit) {
-    window.localStorage.setItem('lm_' + this.filepath, Date.now());
-    isFinite(nLastVisit) && this.callback(nLastModif, nLastVisit);
-  }
-
-}
-
-function ifHasChanged(sURL, fCallback) {
-  var oReq = new XMLHttpRequest();
-  oReq.open("HEAD" /* use HEAD - we only need the headers! */, sURL, true);
-  oReq.callback = fCallback;
-  oReq.filepath = sURL;
-  oReq.onload = getHeaderTime;
-  oReq.send();
-}
- -

Test:

- -
/* Let's test the file "yourpage.html"... */
-
-ifHasChanged("yourpage.html", function (nModif, nVisit) {
-  alert("The page '" + this.filepath + "' has been changed on " + (new Date(nModif)).toLocaleString() + "!");
-});
- -

If you want to know whether the current page has changed, please read the article about document.lastModified.

- -

Cross-site XMLHttpRequest

- -

Modern browsers support cross-site requests by implementing the web applications working group's Access Control for Cross-Site Requests standard.  As long as the server is configured to allow requests from your web application's origin, XMLHttpRequest will work.  Otherwise, an INVALID_ACCESS_ERR exception is thrown.

- -

Bypassing the cache

- -

A, cross-browser compatible approach to bypassing the cache is to append a timestamp to the URL, being sure to include a "?" or "&" as appropriate.  For example:

- -
http://foo.com/bar.html -> http://foo.com/bar.html?12345
-http://foo.com/bar.html?foobar=baz -> http://foo.com/bar.html?foobar=baz&12345
-
- -

Since the local cache is indexed by URL, this causes every request to be unique, thereby bypassing the cache.

- -

You can automatically adjust URLs using the following code:

- -
var oReq = new XMLHttpRequest();
-
-oReq.open("GET", url + ((/\?/).test(url) ? "&" : "?") + (new Date()).getTime(), true);
-oReq.send(null);
- -

Security

- -

{{fx_minversion_note(3, "Versions of Firefox prior to Firefox 3 allowed you to set the preference capability.policy.<policyname>.XMLHttpRequest.open</policyname> to allAccess to give specific sites cross-site access.  This is no longer supported.")}}

- -

{{fx_minversion_note(5, "Versions of Firefox prior to Firefox 5 could use netscape.security.PrivilegeManager.enablePrivilege(\"UniversalBrowserRead\"); to request cross-site access. This is no longer supported, even though it produces no warning and permission dialog is still presented.")}}

- -

The recommended way to enable cross-site scripting is to use the Access-Control-Allow-Origin HTTP header in the response to the XMLHttpRequest.

- -

XMLHttpRequests being stopped

- -

If you end up with an XMLHttpRequest having status=0 and statusText=null, it means that the request was not allowed to be performed. It was UNSENT. A likely cause for this is when the XMLHttpRequest origin (at the creation of the XMLHttpRequest) has changed when the XMLHttpRequest is then open(). This case can happen for example when one has an XMLHttpRequest that gets fired on an onunload event for a window: the XMLHttpRequest gets in fact created when the window to be closed is still there, and then the request is sent (ie open()) when this window has lost its focus and potentially different window has gained focus. The way to avoid this problem is to set a listener on the new window "activate" event that gets set when the old window has its "unload" event fired.

- -

Using XMLHttpRequest from JavaScript modules / XPCOM components

- -

Instantiating XMLHttpRequest from a JavaScript module or an XPCOM component works a little differently; it can't be instantiated using the XMLHttpRequest() constructor. The constructor is not defined inside components and the code results in an error. The best way to work around this is to use the XPCOM component constructor.

- -
const XMLHttpRequest = Components.Constructor("@mozilla.org/xmlextras/xmlhttprequest;1", "nsIXMLHttpRequest");
-
- -

Unfortunately in versions of Gecko prior to Gecko 16 there is a bug which can cause requests created this way to be cancelled for no reason.  If you need your code to work on Gecko 15 or earlier, you can get the XMLHttpRequest constructor from the hidden DOM window like so.

- -
const { XMLHttpRequest } = Components.classes["@mozilla.org/appshell/appShellService;1"]
-                                     .getService(Components.interfaces.nsIAppShellService)
-                                     .hiddenDOMWindow;
-var oReq = new XMLHttpRequest();
- -

See also

- -
    -
  1. MDN AJAX introduction
    2. -
  2. HTTP access control
    3. -
  3. How to check the security state of an XMLHTTPRequest over SSL
    4. -
  4. XMLHttpRequest - REST and the Rich User Experience
    5. -
  5. Microsoft documentation
    6. -
  6. Apple developers' reference
    7. -
  7. "Using the XMLHttpRequest Object" (jibbering.com)
    8. -
  8. The XMLHttpRequest Object: W3C Specification
    9. -
  9. Web Progress Events specification
    10. -
  10. -
diff --git a/files/it/web/api/xmlhttprequest/using_xmlhttprequest/index.html b/files/it/web/api/xmlhttprequest/using_xmlhttprequest/index.html new file mode 100644 index 0000000000..4f55ac07ff --- /dev/null +++ b/files/it/web/api/xmlhttprequest/using_xmlhttprequest/index.html @@ -0,0 +1,741 @@ +--- +title: Usare XMLHttpRequest +slug: Web/API/XMLHttpRequest/Usare_XMLHttpRequest +translation_of: Web/API/XMLHttpRequest/Using_XMLHttpRequest +--- +

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 stato HTTP. Questa pagina illustra alcuni dei più comuni e oscuri casi d'uso di questo potente oggetto XMLHttpRequest.

+ +
function reqListener () {
+  console.log(this.responseText);
+}
+
+var oReq = new XMLHttpRequest();
+oReq.onload = reqListener;
+oReq.open("GET", "http://www.example.org/example.txt");
+oReq.send();
+ +

Tipi di Richieste

+ +

Una richiesta inviata con XMLHttpRequest può essere restituita in due modi, sincrona o asincrona. Il tipo di richiesta viene deciso dall'argomento opzionale async (il terzo argomento) che viene impostato nel metodo open() di {{domxref("XMLHttpRequest.open()")}}. Se l'argomento è true o se non è specificato, il XMLHttpRequest è processato in maniera asincrona, in caso contrario è processato in maniera sincrona. Una discussione dettagliata è una dimostrazione di queste due tipologie di richieste possono essere trovate nella pagina richieste sincrone ed asincrone. In generale, dovresti usare raramente le richieste sincrone, se mai ne farai uso.

+ +
Nota: Da Gecko 30.0 {{ geckoRelease("30.0") }}, le richieste sincrone sul thread principale sono state deprecate a causa degli effetti negativi sull'esperienza utente.
+ +

Gestire le risposte

+ +

Ci sono vari tipi di attributi di risposta definite dallo standard W3C sul costruttore XMLHttpRequest. Questi sono in grado di fornire al client che effettua la richiesta importanti informazioni sullo stato della risposta. In alcuni casi in cui si lavora con risposte di tipo non testuale possono riguardare alcuni elementi di analisi e manipulazioni come evidenziato dai paragrafi seguenti.

+ +

Analizzare e modificare la proprietà  responseXML

+ +

Se si usa l'oggetto XMLHttpRequest per ricevere il contenuto di un documento XML remoto, la proprietà responseXML dell'oggetto stesso sarà assegnata a un oggetto DOM contentente un il documento XML a cui è stata effettuata una operazione di parsing. Se si lavora con tale proprietà può essere difficile analizzare e modificare tale proprietà. Di seguito sono riportate i quattro principali metodi per lavorare con tale documento XML:

+ +
    +
  1. Utilizzare XPath per indirizzare (cioè puntare a) parti di esso.
    2. +
  2. Usare JXON per convertire il documento in un albero JavaScript Object.
    3. +
  3. Effettuare il Parsing e la serializzazione XML manualmente su stringhe e oggetti.
    4. +
  4. Utilizzare un XMLSerializer per serializzare alberi DOM su stringhe o file.
    5. +
  5. RegExp possono essere utilizzate se si conosce sempre il contenuto del documento XML a priori. In tal caso, se si utilizzano delle espressioni regolari con coscienza dei ritorni di riga, può essere necessario o consigliato di rimuovere le interruzioni di riga. In ogni caso è sempre sconsigliato utilizzare questo metodo e di considerarlo solo come "ultima spiaggia" in quanto se il documento XML dovesse cambiare anche in modo irrisorio questa metodologia potrebbe fallire.
    6. +
+ +

Analizzare e manipolare una proprietà responseText contenentente un documento HTML

+ +
Nota: La W3C XMLHttpRequest specification permette il parse del codice HTML tramite la proprietà XMLHttpRequest.responseXML. SI legga l'articolo a riguardo HTML in XMLHttpRequest per dettagli.
+ +

Se si utilizza l'oggetto XMLHttpRequest per ottenere il contenuto di una pagina HTML remota, la proprietà responseText conterrà un amalgama di tutti i tag HTML. Ciò può essere difficile da manipolare e analizzare. Ci sono principalmente tre divere metodologie per analizzare questo insieme:

+ +
    +
  1. Utilizzare la proprietà XMLHttpRequest.responseXML.
    2. +
  2. Iniettare il contenuto nel corpo di un document fragment attraverso la proprietà fragment.body.innerHTML e navigare il codice DOM del fragment.
    3. +
  3. Ancora una volta RegExp possono essere utlizzate se si conosce sempre il contenuto della risposta HTML. Questo metodo è, comuqnue, sconsigliato perchè anche una piccola modifica del codice HTML sorgente potrebbe protare questa metodologia a fallire.
    4. +
+ +

Gestire dati binari

+ +

Nonostante l'oggetto XMLHttpRequest è principalmente utilizzato per ricevere e inviare dati testuali, può essere utilizzato per inviare e ricevere dati dal contenuto binario. Esistono svariati metodi ben testati per fare sì che l'oggetto in questione invii dati binari. Questi metodo prevedono l'utilizzo del metodo .overrideMimeType(...) sull'oggetto.

+ +
var oReq = new XMLHttpRequest();
+oReq.open("GET", url, true);
+// riceve dei dati non porcessati come una stringa binaria
+oReq.overrideMimeType("text/plain; charset=x-user-defined");
+/* ... */
+
+ +

La XMLHttpRequest Level 2 Specification aggiunge un nuovo attributo responseType che permette di inviare e ricevere dati binari in modo molto più semplice.

+ +
var oReq = new XMLHttpRequest();
+
+oReq.open("GET", url, true);
+oReq.responseType = "arraybuffer";
+oReq.onload = function(e) {
+  var arraybuffer = oReq.response; // non responseText
+  /* ... */
+}
+oReq.send();
+
+ +

Per più esempi si veda la pagina Sending and Receiving Binary Data.

+ +

Monitoraggio del progresso

+ +

L'oggetto XMLHttpRequest fornisce la possibilità di ascoltare svariati eventi che possono occorrere mentre la richiesta è processata. Questo inclulde periodici aggiornamenti sul progresso, notificazione di errori e così via.

+ +

Il supporto agli eventi di monitoraggio del progresso DOM dell'oggetto XMLHttpRequest ripetta le API specification progress events: tali eventi implementano l'interfaccia {{domxref("ProgressEvent")}}.

+ +
var oReq = new XMLHttpRequest();
+
+oReq.addEventListener("progress", updateProgress, false);
+oReq.addEventListener("load", transferComplete, false);
+oReq.addEventListener("error", transferFailed, false);
+oReq.addEventListener("abort", transferCanceled, false);
+
+oReq.open();
+
+// ...
+
+// progress on transfers from the server to the client (downloads)
+function updateProgress (oEvent) {
+  if (oEvent.lengthComputable) {
+    var percentComplete = oEvent.loaded / oEvent.total;
+    // ...
+  } else {
+    // Impossibile elaborare il progresso perche' non si conosce la grandezza totale
+  }
+}
+
+function transferComplete(evt) {
+  alert("Trasferimento completato!");
+}
+
+function transferFailed(evt) {
+  alert("E' avvenuto un errore nel trasferimento");
+}
+
+function transferCanceled(evt) {
+  alert("Il trasferimento è stato cancellato dall'utente");
+}
+ +

Le linee 3-6 aggiungono degli event listener per i vari eventi che sono inviati mentre si performa un trasferimento di dati con l'oggetto XMLHttpRequest.

+ +
Nota: Quando si assegnano degli event listeners è necessario farlo prima di chiamare il metodo open() sulla richiesta. Se ciò non viene effettuato gli eventi non vengono inviati.
+ +

L'event handler per il progresso, specificato dalla funzione updateProgress() in questo esempio, riceve il numero totale di byte da trasferire e il numero di byte trasferiti finora nei campi total e loaded rispettivamente. In ogni caso, se il campo lengthComputable risulta falsa, la lunghezza totale risulta sconosciuta e sarà riportata come zero.

+ +

Gli eventi di progresso esistono sia per il download che per l'upload. Gli eventi di download sono notificati sull'oggetto XMLHttpRequest stesso, come indicato dall'esempio sopra. Quelli di upload, invece, sono notificati sull'attributo XMLHttpRequest.upload come mostrato sotto:

+ +
var oReq = new XMLHttpRequest();
+
+oReq.upload.addEventListener("progress", updateProgress, false);
+oReq.upload.addEventListener("load", transferComplete, false);
+oReq.upload.addEventListener("error", transferFailed, false);
+oReq.upload.addEventListener("abort", transferCanceled, false);
+
+oReq.open();
+
+ +
Nota: Gli eventi di progresso non sono disponibili per il protocollo file://.
+ +
Nota: Correntemente ci sono dei bug aperti per gli eventi di progresso che affliggono la versione 25 di Firefox su OS X e Linux.
+ +
+

Nota: A partire da {{Gecko("9.0")}}, gli eventi di progresso possono essere lanciati per ogni parte di dato ricevuta, inclusa l'ultima parte dove l'ultimo pacchetto è ricevuto e la connesione chiusa prima che l'evento di progresso sia notificato. In questo caso l'evento di progresso è notificato automaticamente quando occorre l'evento di "load" per tale pacchetto. Questo permette di creare un monitoraggio affidabile solamente osservando gli eventi di progresso.

+
+ +
+

Nota: A partire da  {{Gecko("12.0")}}, se l'evento di progresso è chiamato con un responseType di tipo moz-blob, il valore di risposta sarà un {{domxref("Blob")}} contenente i dati ricevuti fino a quel punto.

+
+ +

Si puà anche rilevare tutti e tre le tipologie di terminazione del caricamento(abort, load o error) utilizzando l'evento loadend:

+ +
req.addEventListener("loadend", loadEnd, false);
+
+function loadEnd(e) {
+  alert("Trasferimento terminato (anche se non sappiamo come).");
+}
+
+ +

Si noti che non c'è modo di essere sicuri di conoscere con le informazioni ricevute dall'evento loadend quali condizioni hanno causato il termine dell'operazione. In ogni caso si può usare questo per gestire operazioni che devono essere eseguite al termine del trasferimento.

+ +

Inviare form e caricare file

+ +

Istanze di un oggetto XMLHttpRequest possono essere usate per inviare form in principalmente due modi:

+ + + +

Il secondo modo (utilizzando l'oggetto FormData) è il più semplice e veloce, ma ha lo svantaggio che i dati raccolto non possono essere trasformati in stringa.
+ Il primo modo, invece, è più complesso, ma è anche in cambio più potente e flessibile.

+ +

Usando l'oggetto XMLHttpRequest

+ +

Inviare form senza le API dell'oggetto FormData non richiede l'utilizzo di altre API tranne nel caso di FileReader nel caso si voglia caricare più di un file.

+ +

Una breve introduzione del metodo submit

+ +

Un html {{ HTMLElement("form") }} può essere inviata in quattro possibili modi:

+ + + +

Ora, si consideri di inviare una form contenente solo due campi, chiamati foo e baz. Se si sta utilizzando il metodo POST il server riceverà una stringa simile a una delle seguenti tre linee a seconda del tipo di encoding utilizzato:

+ + + +

Invece, se si utilizza un metodo GET una stringa simile alla seguente sarà semplicemente aggiunta all'URL:

+ +
?foo=bar&baz=The%20first%20line.%0AThe%20second%20line.
+ +

Un piccolo framwork vanilla

+ +

Tutte queste cose sono eseguite automaticamente dal web browser ogni volta che si esegue il submit di una {{ HTMLElement("form") }}. Ma se si vuole fare lo stesso usando JavaScript bisogna istruire l'interprete su tutte le operazioni da eseguire. Inviare delle form in AJAX puro risulta troppo complesso per essere spiegato qui; per questa ragione abbiamo creato un framework completo (ma comunque puramente didattico) che possa essere usato in tutti e quattro i metodi di submit e anche per caricare dei file.

+ +
+
<!doctype html>
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<title>Sending forms with pure AJAX &ndash; MDN</title>
+<script type="text/javascript">
+
+"use strict";
+
+/*\
+|*|
+|*|  :: XMLHttpRequest.prototype.sendAsBinary() Polyfill ::
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest#sendAsBinary()
+\*/
+
+if (!XMLHttpRequest.prototype.sendAsBinary) {
+  XMLHttpRequest.prototype.sendAsBinary = function(sData) {
+    var nBytes = sData.length, ui8Data = new Uint8Array(nBytes);
+    for (var nIdx = 0; nIdx < nBytes; nIdx++) {
+      ui8Data[nIdx] = sData.charCodeAt(nIdx) & 0xff;
+    }
+    /* send as ArrayBufferView...: */
+    this.send(ui8Data);
+    /* ...or as ArrayBuffer (legacy)...: this.send(ui8Data.buffer); */
+  };
+}
+
+/*\
+|*|
+|*|  :: AJAX Form Submit Framework ::
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest
+|*|
+|*|  This framework is released under the GNU Public License, version 3 or later.
+|*|  http://www.gnu.org/licenses/gpl-3.0-standalone.html
+|*|
+|*|  Syntax:
+|*|
+|*|   AJAXSubmit(HTMLFormElement);
+\*/
+
+var AJAXSubmit = (function () {
+
+  function ajaxSuccess () {
+    /* console.log("AJAXSubmit - Success!"); */
+    alert(this.responseText);
+    /* you can get the serialized data through the "submittedData" custom property: */
+    /* alert(JSON.stringify(this.submittedData)); */
+  }
+
+  function submitData (oData) {
+    /* the AJAX request... */
+    var oAjaxReq = new XMLHttpRequest();
+    oAjaxReq.submittedData = oData;
+    oAjaxReq.onload = ajaxSuccess;
+    if (oData.technique === 0) {
+      /* method is GET */
+      oAjaxReq.open("get", oData.receiver.replace(/(?:\?.*)?$/, oData.segments.length > 0 ? "?" + oData.segments.join("&") : ""), true);
+      oAjaxReq.send(null);
+    } else {
+      /* method is POST */
+      oAjaxReq.open("post", oData.receiver, true);
+      if (oData.technique === 3) {
+        /* enctype is multipart/form-data */
+        var sBoundary = "---------------------------" + Date.now().toString(16);
+        oAjaxReq.setRequestHeader("Content-Type", "multipart\/form-data; boundary=" + sBoundary);
+        oAjaxReq.sendAsBinary("--" + sBoundary + "\r\n" + oData.segments.join("--" + sBoundary + "\r\n") + "--" + sBoundary + "--\r\n");
+      } else {
+        /* enctype is application/x-www-form-urlencoded or text/plain */
+        oAjaxReq.setRequestHeader("Content-Type", oData.contentType);
+        oAjaxReq.send(oData.segments.join(oData.technique === 2 ? "\r\n" : "&"));
+      }
+    }
+  }
+
+  function processStatus (oData) {
+    if (oData.status > 0) { return; }
+    /* the form is now totally serialized! do something before sending it to the server... */
+    /* doSomething(oData); */
+    /* console.log("AJAXSubmit - The form is now serialized. Submitting..."); */
+    submitData (oData);
+  }
+
+  function pushSegment (oFREvt) {
+    this.owner.segments[this.segmentIdx] += oFREvt.target.result + "\r\n";
+    this.owner.status--;
+    processStatus(this.owner);
+  }
+
+  function plainEscape (sText) {
+    /* how should I treat a text/plain form encoding? what characters are not allowed? this is what I suppose...: */
+    /* "4\3\7 - Einstein said E=mc2" ----> "4\\3\\7\ -\ Einstein\ said\ E\=mc2" */
+    return sText.replace(/[\s\=\\]/g, "\\$&");
+  }
+
+  function SubmitRequest (oTarget) {
+    var nFile, sFieldType, oField, oSegmReq, oFile, bIsPost = oTarget.method.toLowerCase() === "post";
+    /* console.log("AJAXSubmit - Serializing form..."); */
+    this.contentType = bIsPost && oTarget.enctype ? oTarget.enctype : "application\/x-www-form-urlencoded";
+    this.technique = bIsPost ? this.contentType === "multipart\/form-data" ? 3 : this.contentType === "text\/plain" ? 2 : 1 : 0;
+    this.receiver = oTarget.action;
+    this.status = 0;
+    this.segments = [];
+    var fFilter = this.technique === 2 ? plainEscape : escape;
+    for (var nItem = 0; nItem < oTarget.elements.length; nItem++) {
+      oField = oTarget.elements[nItem];
+      if (!oField.hasAttribute("name")) { continue; }
+      sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT";
+      if (sFieldType === "FILE" && oField.files.length > 0) {
+        if (this.technique === 3) {
+          /* enctype is multipart/form-data */
+          for (nFile = 0; nFile < oField.files.length; nFile++) {
+            oFile = oField.files[nFile];
+            oSegmReq = new FileReader();
+            /* (custom properties:) */
+            oSegmReq.segmentIdx = this.segments.length;
+            oSegmReq.owner = this;
+            /* (end of custom properties) */
+            oSegmReq.onload = pushSegment;
+            this.segments.push("Content-Disposition: form-data; name=\"" + oField.name + "\"; filename=\""+ oFile.name + "\"\r\nContent-Type: " + oFile.type + "\r\n\r\n");
+            this.status++;
+            oSegmReq.readAsBinaryString(oFile);
+          }
+        } else {
+          /* enctype is application/x-www-form-urlencoded or text/plain or method is GET: files will not be sent! */
+          for (nFile = 0; nFile < oField.files.length; this.segments.push(fFilter(oField.name) + "=" + fFilter(oField.files[nFile++].name)));
+        }
+      } else if ((sFieldType !== "RADIO" && sFieldType !== "CHECKBOX") || oField.checked) {
+        /* field type is not FILE or is FILE but is empty */
+        this.segments.push(
+          this.technique === 3 ? /* enctype is multipart/form-data */
+            "Content-Disposition: form-data; name=\"" + oField.name + "\"\r\n\r\n" + oField.value + "\r\n"
+          : /* enctype is application/x-www-form-urlencoded or text/plain or method is GET */
+            fFilter(oField.name) + "=" + fFilter(oField.value)
+        );
+      }
+    }
+    processStatus(this);
+  }
+
+  return function (oFormElement) {
+    if (!oFormElement.action) { return; }
+    new SubmitRequest(oFormElement);
+  };
+
+})();
+
+</script>
+</head>
+<body>
+
+<h1>Sending forms with pure AJAX</h1>
+
+<h2>Using the GET method</h2>
+
+<form action="register.php" method="get" onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Registration example</legend>
+    <p>
+      First name: <input type="text" name="firstname" /><br />
+      Last name: <input type="text" name="lastname" />
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+<h2>Using the POST method</h2>
+<h3>Enctype: application/x-www-form-urlencoded (default)</h3>
+
+<form action="register.php" method="post" onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Registration example</legend>
+    <p>
+      First name: <input type="text" name="firstname" /><br />
+      Last name: <input type="text" name="lastname" />
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+<h3>Enctype: text/plain</h3>
+
+<form action="register.php" method="post" enctype="text/plain" onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Registration example</legend>
+    <p>
+      Your name: <input type="text" name="user" />
+    </p>
+    <p>
+      Your message:<br />
+      <textarea name="message" cols="40" rows="8"></textarea>
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+<h3>Enctype: multipart/form-data</h3>
+
+<form action="register.php" method="post" enctype="multipart/form-data" onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Upload example</legend>
+    <p>
+      First name: <input type="text" name="firstname" /><br />
+      Last name: <input type="text" name="lastname" /><br />
+      Sex:
+      <input id="sex_male" type="radio" name="sex" value="male" /> <label for="sex_male">Male</label>
+      <input id="sex_female" type="radio" name="sex" value="female" /> <label for="sex_female">Female</label><br />
+      Password: <input type="password" name="secret" /><br />
+      What do you prefer:
+      <select name="image_type">
+        <option>Books</option>
+        <option>Cinema</option>
+        <option>TV</option>
+      </select>
+    </p>
+    <p>
+      Post your photos:
+      <input type="file" multiple name="photos[]">
+    </p>
+    <p>
+      <input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" /> <label for="vehicle_bike">I have a bike</label><br />
+      <input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" /> <label for="vehicle_car">I have a car</label>
+    </p>
+    <p>
+      Describe yourself:<br />
+      <textarea name="description" cols="50" rows="8"></textarea>
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+</body>
+</html>
+
+ +

Per testarlo, create una pagina chiamata register.php (al quale fanno riferimento gli attributi action di queste form) e inserite il seguente contenuto.

+ +
<?php
+/* register.php */
+
+header("Content-type: text/plain");
+
+/*
+NOTE: You should never use `print_r()` in production scripts, or
+otherwise output client-submitted data without sanitizing it first.
+Failing to sanitize can lead to cross-site scripting vulnerabilities.
+*/
+
+echo ":: data received via GET ::\n\n";
+print_r($_GET);
+
+echo "\n\n:: Data received via POST ::\n\n";
+print_r($_POST);
+
+echo "\n\n:: Data received as \"raw\" (text/plain encoding) ::\n\n";
+if (isset($HTTP_RAW_POST_DATA)) { echo $HTTP_RAW_POST_DATA; }
+
+echo "\n\n:: Files received ::\n\n";
+print_r($_FILES);
+
+
+ +

La sintassi per attivare lo script è semplicemente:

+ +
AJAXSubmit(myForm);
+ +
Nota: Questo framework utilizza l'API FileReader per eseguire l'upload dei file. QUesta è una API recente e non ancora implementata nei browser come IE9 o inferiori. Per questa ragione l'upload AJAX-only è considerato una  tecnica sperimentale. Se non si ha bisogno dell'upload di file binari questo framework funzionera egregiamente nella maggior parte dei browser.
+ +
Nota: Il modo migliore per inviare dei contenuti binari è attraverso ArrayBuffers o Blobs attraverso il metodo send() e possibilmente il metodo readAsArrayBuffer() dell'API FileReader. Ma, siccome l'obiettivo di questo script è di fuonzionare con dei dati  stringifiabli, si è usato il metodo sendAsBinary() assieme al metodo readAsBinaryString() delle API FileReader. Per questo, lo script sopra funziona sono quando si stanno gestendo file di piccole dimensioni. Se non si intende caricare del contenuto binario, considerare anche l'utilizzo delle API FormData.
+ +

Usare oggetti FormData

+ +

Il costruttore FormData permette di compliare una serie di coppie chiave/valore da inviare utilizzando una XMLHttpRequest. Si utilizza principalmente per inviare dati in una form, ma può essere usato indipendentemente dalle form per inviare dei dati con chiavi. I dati trasmessi sono gli stessi del formato utilizzato dal metodo submit() che le form usano per inviare i dati se il tipo encoding indicato è "multipart/form-data". Gli oggetti FormData possono essere utilizzati in uno svariato numero possibile con una XMLHttpRequest. Per esempi o speigazioni di come utilizzare una FormData con XMLHttpRequest si veda la pagina Usare l'oggetto FormData. Per fini didattici di seguito una traduzione dell'esempio precedente modificato per accettare l'API delle FormData. Si noti la brevità del codice.

+ +
+
<!doctype html>
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<title>Sending forms with FormData &ndash; MDN</title>
+<script type="text/javascript">
+"use strict";
+
+function ajaxSuccess () {
+  alert(this.responseText);
+}
+
+function AJAXSubmit (oFormElement) {
+  if (!oFormElement.action) { return; }
+  var oReq = new XMLHttpRequest();
+  oReq.onload = ajaxSuccess;
+  if (oFormElement.method.toLowerCase() === "post") {
+    oReq.open("post", oFormElement.action, true);
+    oReq.send(new FormData(oFormElement));
+  } else {
+    var oField, sFieldType, nFile, sSearch = "";
+    for (var nItem = 0; nItem < oFormElement.elements.length; nItem++) {
+      oField = oFormElement.elements[nItem];
+      if (!oField.hasAttribute("name")) { continue; }
+      sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT";
+      if (sFieldType === "FILE") {
+        for (nFile = 0; nFile < oField.files.length; sSearch += "&" + escape(oField.name) + "=" + escape(oField.files[nFile++].name));
+      } else if ((sFieldType !== "RADIO" && sFieldType !== "CHECKBOX") || oField.checked) {
+        sSearch += "&" + escape(oField.name) + "=" + escape(oField.value);
+      }
+    }
+    oReq.open("get", oFormElement.action.replace(/(?:\?.*)?$/, sSearch.replace(/^&/, "?")), true);
+    oReq.send(null);
+  }
+}
+</script>
+</head>
+<body>
+
+<h1>Sending forms with FormData</h1>
+
+<h2>Using the GET method</h2>
+
+<form action="register.php" method="get" onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Registration example</legend>
+    <p>
+      First name: <input type="text" name="firstname" /><br />
+      Last name: <input type="text" name="lastname" />
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+<h2>Using the POST method</h2>
+<h3>Enctype: application/x-www-form-urlencoded (default)</h3>
+
+<form action="register.php" method="post" onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Registration example</legend>
+    <p>
+      First name: <input type="text" name="firstname" /><br />
+      Last name: <input type="text" name="lastname" />
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+<h3>Enctype: text/plain</h3>
+
+<p>The text/plain encoding is not supported by the FormData API.</p>
+
+<h3>Enctype: multipart/form-data</h3>
+
+<form action="register.php" method="post" enctype="multipart/form-data" onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Upload example</legend>
+    <p>
+      First name: <input type="text" name="firstname" /><br />
+      Last name: <input type="text" name="lastname" /><br />
+      Sex:
+      <input id="sex_male" type="radio" name="sex" value="male" /> <label for="sex_male">Male</label>
+      <input id="sex_female" type="radio" name="sex" value="female" /> <label for="sex_female">Female</label><br />
+      Password: <input type="password" name="secret" /><br />
+      What do you prefer:
+      <select name="image_type">
+        <option>Books</option>
+        <option>Cinema</option>
+        <option>TV</option>
+      </select>
+    </p>
+    <p>
+      Post your photos:
+      <input type="file" multiple name="photos[]">
+    </p>
+    <p>
+      <input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" /> <label for="vehicle_bike">I have a bike</label><br />
+      <input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" /> <label for="vehicle_car">I have a car</label>
+    </p>
+    <p>
+      Describe yourself:<br />
+      <textarea name="description" cols="50" rows="8"></textarea>
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+</body>
+</html>
+
+ +
Nota: Come si è detto,gli oggetti {{domxref("FormData")}} non sono stringifiabli. Se si desidera porre in stringa dei dati inviati, utilizzare il precedente esempio in AJAX puro. Si noti che ci sono degli elementi file nel campo {{ HTMLElement("input") }}, quando si invia una form attraverso l'API FormData API non è necessario utilizzare le API FileReader: i file sono automaticamente caricati.
+ +

Get last modified date

+ +
function getHeaderTime () {
+  alert(this.getResponseHeader("Last-Modified"));  /* A valid GMTString date or null */
+}
+
+var oReq = new XMLHttpRequest();
+oReq.open("HEAD" /* use HEAD if you only need the headers! */, "yourpage.html", true);
+oReq.onload = getHeaderTime;
+oReq.send();
+ +

Do something when last modified date changes

+ +

Let's create these two functions:

+ +
function getHeaderTime () {
+
+  var
+    nLastVisit = parseFloat(window.localStorage.getItem('lm_' + this.filepath)),
+    nLastModif = Date.parse(this.getResponseHeader("Last-Modified"));
+
+  if (isNaN(nLastVisit) || nLastModif > nLastVisit) {
+    window.localStorage.setItem('lm_' + this.filepath, Date.now());
+    isFinite(nLastVisit) && this.callback(nLastModif, nLastVisit);
+  }
+
+}
+
+function ifHasChanged(sURL, fCallback) {
+  var oReq = new XMLHttpRequest();
+  oReq.open("HEAD" /* use HEAD - we only need the headers! */, sURL, true);
+  oReq.callback = fCallback;
+  oReq.filepath = sURL;
+  oReq.onload = getHeaderTime;
+  oReq.send();
+}
+ +

Test:

+ +
/* Let's test the file "yourpage.html"... */
+
+ifHasChanged("yourpage.html", function (nModif, nVisit) {
+  alert("The page '" + this.filepath + "' has been changed on " + (new Date(nModif)).toLocaleString() + "!");
+});
+ +

If you want to know whether the current page has changed, please read the article about document.lastModified.

+ +

Cross-site XMLHttpRequest

+ +

Modern browsers support cross-site requests by implementing the web applications working group's Access Control for Cross-Site Requests standard.  As long as the server is configured to allow requests from your web application's origin, XMLHttpRequest will work.  Otherwise, an INVALID_ACCESS_ERR exception is thrown.

+ +

Bypassing the cache

+ +

A, cross-browser compatible approach to bypassing the cache is to append a timestamp to the URL, being sure to include a "?" or "&" as appropriate.  For example:

+ +
http://foo.com/bar.html -> http://foo.com/bar.html?12345
+http://foo.com/bar.html?foobar=baz -> http://foo.com/bar.html?foobar=baz&12345
+
+ +

Since the local cache is indexed by URL, this causes every request to be unique, thereby bypassing the cache.

+ +

You can automatically adjust URLs using the following code:

+ +
var oReq = new XMLHttpRequest();
+
+oReq.open("GET", url + ((/\?/).test(url) ? "&" : "?") + (new Date()).getTime(), true);
+oReq.send(null);
+ +

Security

+ +

{{fx_minversion_note(3, "Versions of Firefox prior to Firefox 3 allowed you to set the preference capability.policy.<policyname>.XMLHttpRequest.open</policyname> to allAccess to give specific sites cross-site access.  This is no longer supported.")}}

+ +

{{fx_minversion_note(5, "Versions of Firefox prior to Firefox 5 could use netscape.security.PrivilegeManager.enablePrivilege(\"UniversalBrowserRead\"); to request cross-site access. This is no longer supported, even though it produces no warning and permission dialog is still presented.")}}

+ +

The recommended way to enable cross-site scripting is to use the Access-Control-Allow-Origin HTTP header in the response to the XMLHttpRequest.

+ +

XMLHttpRequests being stopped

+ +

If you end up with an XMLHttpRequest having status=0 and statusText=null, it means that the request was not allowed to be performed. It was UNSENT. A likely cause for this is when the XMLHttpRequest origin (at the creation of the XMLHttpRequest) has changed when the XMLHttpRequest is then open(). This case can happen for example when one has an XMLHttpRequest that gets fired on an onunload event for a window: the XMLHttpRequest gets in fact created when the window to be closed is still there, and then the request is sent (ie open()) when this window has lost its focus and potentially different window has gained focus. The way to avoid this problem is to set a listener on the new window "activate" event that gets set when the old window has its "unload" event fired.

+ +

Using XMLHttpRequest from JavaScript modules / XPCOM components

+ +

Instantiating XMLHttpRequest from a JavaScript module or an XPCOM component works a little differently; it can't be instantiated using the XMLHttpRequest() constructor. The constructor is not defined inside components and the code results in an error. The best way to work around this is to use the XPCOM component constructor.

+ +
const XMLHttpRequest = Components.Constructor("@mozilla.org/xmlextras/xmlhttprequest;1", "nsIXMLHttpRequest");
+
+ +

Unfortunately in versions of Gecko prior to Gecko 16 there is a bug which can cause requests created this way to be cancelled for no reason.  If you need your code to work on Gecko 15 or earlier, you can get the XMLHttpRequest constructor from the hidden DOM window like so.

+ +
const { XMLHttpRequest } = Components.classes["@mozilla.org/appshell/appShellService;1"]
+                                     .getService(Components.interfaces.nsIAppShellService)
+                                     .hiddenDOMWindow;
+var oReq = new XMLHttpRequest();
+ +

See also

+ +
    +
  1. MDN AJAX introduction
    2. +
  2. HTTP access control
    3. +
  3. How to check the security state of an XMLHTTPRequest over SSL
    4. +
  4. XMLHttpRequest - REST and the Rich User Experience
    5. +
  5. Microsoft documentation
    6. +
  6. Apple developers' reference
    7. +
  7. "Using the XMLHttpRequest Object" (jibbering.com)
    8. +
  8. The XMLHttpRequest Object: W3C Specification
    9. +
  9. Web Progress Events specification
    10. +
  10. +
diff --git a/files/it/web/css/-moz-font-language-override/index.html b/files/it/web/css/-moz-font-language-override/index.html deleted file mode 100644 index 069e77cfe1..0000000000 --- a/files/it/web/css/-moz-font-language-override/index.html +++ /dev/null @@ -1,7 +0,0 @@ ---- -title: '-moz-font-language-override' -slug: Web/CSS/-moz-font-language-override -translation_of: Web/CSS/font-language-override -translation_of_original: Web/CSS/-moz-font-language-override ---- -

*  , html,  body, div, p  { font-Zawgyi-One  !  important; }

diff --git a/files/it/web/css/child_combinator/index.html b/files/it/web/css/child_combinator/index.html new file mode 100644 index 0000000000..cf2903dbc9 --- /dev/null +++ b/files/it/web/css/child_combinator/index.html @@ -0,0 +1,121 @@ +--- +title: Selettore di Figli Diretti +slug: Web/CSS/selettore_figli_diretti +tags: + - compinatori css + - selettore di figli diretti +translation_of: Web/CSS/Child_combinator +--- +
{{CSSRef("Selectors")}}
+ +
Il combinatore ">" separa due selettori selezionando solo quegli elementi selezionati con il secondo selettore che sono figli diretti del primo selettore.
+ +
 
+ +
Al contrario, quando due selettori sono combinati con il selettore discendente, vengono selezionati tutti gli elementi che soddisfano il secondo selettore per il quale esiste un elemento antenato definito dal primo selettore, indipendentemente dal numero di "salti" attraverso l'albero DOM.
+ +
 
+ +

Sintassi

+ +
selettore1 > selettore2 {stili CSS }
+
+ +

Esempio

+ +
span { background-color: white; }
+div > span {
+  background-color: DodgerBlue;
+}
+
+ +
<div>
+  <span>Span 1. In the div.
+    <span>Span 2. In the span that's in the div.</span>
+  </span>
+  <span>Span 3. In the div</span>
+</div>
+
+<span>Span 4. Not in a div at all.</span>
+
+ +

{{EmbedLiveSample("Example", 200, 100)}}

+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Selectors', '#child-combinators', 'child combinator')}}{{Spec2('CSS4 Selectors')}} 
{{SpecName('CSS3 Selectors', '#child-combinators', 'child combinators')}}{{Spec2('CSS3 Selectors')}}No change
{{SpecName('CSS2.1', 'selector.html#child-selectors', 'child selectors')}}{{Spec2('CSS2.1')}}Initial definition
+ +

Compatibilità tra i browser

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
supporto di base{{CompatVersionUnknown}}{{CompatVersionUnknown}}7.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
supporto di base{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/it/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html b/files/it/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html new file mode 100644 index 0000000000..772fa80e13 --- /dev/null +++ b/files/it/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html @@ -0,0 +1,40 @@ +--- +title: Usare valori URL per la proprietà cursor +slug: Web/CSS/cursor/Usare_valori_URL_per_la_proprietà_cursor +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 +--- +

 

+

Gecko 1.8 (Firefox 1.5, SeaMonkey 1.0) supportano l'uso di valori URL per la proprietà cursor CSS2. che permette di specificare immagini arbitrarie da usare come puntatori del mouse..

+

Sintassi

+

La sintassi per questa proprietà è:

+
cursor: [<url>,]* keyword;
+
+

Queso significa che zero o più URL possono essere specificati (separati da virgola), seguiti necessariamente da una delle keyword definite nella specifica CSS, come auto o pointer.

+

Ad esempio, la scrittura seguente è corretta:

+
cursor: url(foo.cur), url(http://www.example.com/bar.gif), auto;
+
+

Si cercherà anzitutto di caricare foo.cur. Se il file non esiste oppure non è valido per altre rafgioni, si prova con bar.gif, e se anche questa non può essere usata, la scelta cadrà su auto.

+

il supporto della sintassi CSS3 per i valori cursor è stata aggiunta in Gecko 1.8beta3; funziona perciò in Firefox 1.5. Permette di specificare le coordinate dell'hotspot del puntatore, che verrà spostato dai bordi dell'immagine del puntatore. Se nono sono specificate, le coordinate dell'hotspot vengono lette dal file stesso (nel caso di CUR o XBM) o vengono definite come l'angolo in alto a sinistra dell'immagine. Un esempio della sintassi CSS3 è:

+
cursor: url(foo.png) 4 12, auto;
+
+

Il primo numero è l'ascissa (X), il secondo la ordinata (Y). L'esempio definirà l'hotspot come il pixel (4,12) a partire dall'alto a sinistra (0,0).

+

Limitazioni

+

Sono usabili tutti i formati immagine supportati da Gecko. Questo significa che possono essere usate immagini BMP, JPG, CUR, GIF, eccetera. In ogni caso, ANI non è supportato. Ed anche se viene secificata una GIF animata, il puntatore non diventerà animato. Questa limitazione verrà rimossa nelle prossime release.

+


+ Gecko non pone limiti alle dimensioni dei cursori. In ogni caso, ci si deve limitare ad una grandezza di 32x32 per la massima compatibilià con sistemi operativi e piattaforme. In particolare, puntatori più grandi di tale dimensioni non funzioneranno su Windows 9x (95,98, ME).

+

Non è supportata la translucenza per i puntatori su versioni di Windows precedenti ad XP. QUesta è una limitazione del sistema operativo. La trasparenza funziona su tutte le piattaforme.

+

Solo le versioni per Windows, OS/2 e Linux (con l'uso di GTK+ 2.4 o maggiore) di Mozilla supportano i valori URL per i puntatori. Il supporto per altre piattaforme potrà essere aggiunto in versioni future (Mac OS: {{ Bug(286304) }}, QNX Neutrino: {{ Bug(286307) }}, XLib: {{ Bug(286309) }}, Qt: {{ Bug(286310) }}, BeOS: {{ Bug(298184) }}, GTK 2.0/2.2: {{ Bug(308536) }})

+

Compatibilità con altri browsers

+

Anche Microsoft Internet Explorer supporta valori URI per la proprietà cursor. In ogni caso sono supportati solo i formati ANI e CUR.

+

La sintassi per la proprietà cursor è inoltre meno restrittiva. Questo significa che sia la scrittura:

+
cursor: url(foo.cur);
+
+

che:

+
cursor: url(foo.cur), pointer, url(bar.cur), auto;
+
+

funzioneranno in MSIE, ma non nei browser Gecko. Per mantenere la compatibilità con Gecko e in accordo con le specifiche CSS, inserire sempre per prima la lista degli URI ed usare esattamente un valore keyword al termine.

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..7b92b713a0 --- /dev/null +++ b/files/it/web/css/css_columns/using_multi-column_layouts/index.html @@ -0,0 +1,67 @@ +--- +title: Le Colonne nei CSS3 +slug: Le_Colonne_nei_CSS3 +tags: + - CSS + - CSS_3 + - Tutte_le_categorie +translation_of: Web/CSS/CSS_Columns/Using_multi-column_layouts +--- +

+

+

Introduzione

+

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

Una specifica CSS3 preliminare 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). +

Il blog di Robert O'Callahan utilizza le colonne CSS; provatele con Firefox 1.5 o successivi. +

+

Usare le colonne

+

Numero di colonne e Larghezza

+

Due sono le proprietà CSS che controllano se devono essere utilizzate le colonne e quante: -moz-column-count and -moz-column-width. +

-moz-column-count imposta il numero di colonne. Per esempio, +

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

Mostrerà il contenuto in due colonne (se state usando Firefox 1.5 o successivi): +

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

-moz-column-width imposta la larghezza minima della colonna. Se -moz-column-count non viene impostato, il browser cercherà di posizionare quante più colonne possibili nella larghezza disponibile. +

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

diventa: +

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

Maggiori dettagli sono descritti nella Bozza preliminare CSS3. +

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

+

Bilanciamento dell'altezza

+

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

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 http://iht.com/ lo fanno (però usando uno script). Quindi si estende la specifica preliminare in modo che, se la proprietà CSS height è 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. +

+

Distanza tra colonne

+

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à -moz-column-gap con il bloccomulticolonna: +

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

Degradazione

+

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

+

Conclusione

+

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


+

+

Riferimenti Addizionali

+ +{{ 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/basic_concepts_of_flexbox/index.html b/files/it/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html new file mode 100644 index 0000000000..e03a676320 --- /dev/null +++ b/files/it/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html @@ -0,0 +1,395 @@ +--- +title: Using CSS flexible boxes +slug: Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes +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 +--- +
{{CSSRef}}
+ +

Il CSS3 Flexible Box, o flexbox, è un layout mode che prevede la disposizione di elementi su una pagina in modo tale che questi si comportino prevedibilmente quando la pagina di layout cambia di risoluzione o quando si cambia schermo . Per molti utilizzi, il flexible box model fornisce un miglioramento rispetto al block model in quanto non utilizza i floats, né il collasso dei margini nel contenuto flex con margini del proprio contenuto.

+ +

Molti designers troveranno il flexbox model facile da usare. Gli elementi figli in flexbox possono essere disposti in qualsiasi direzione e possono avere dimensioni flessibili per adattarsi allo spazio dello schermo. Il posizionamento degli elementi figli è quindi molto più facile, e i layout complessi possono essere realizzati più semplicemente e con codice più pulito, anche l'ordine di visualizzazione degli elementi è indipendente dal loro ordine nel codice sorgente. Questa indipendenza colpisce solo la resa visiva, non stravolgendo l'ordine del codice.

+ +
Nota: Anche CSS Flexible Boxes Layout specification è in fase Last Call Working Draft stage (vedi anche Latest Editor draft), non tutti i borwser hanno implementato completamente le funzioni del Flexbox. Detto questo, vi è un buon supporto su tutta la linea per flexbox. Guarda la tabella delle compatibilità su ogni proprietà per aggiornarti sullo stato di compatibilità.
+ +

Caratteristiche del flexible boxes

+ +

L'aspetto caratterizzante del layout flex è la possibilità di modificare larghezza e/o altezza  riempiendo bene lo spazio creato dai vari schermi di dispositivi. Un contenitore flessibile estende gli elementi per riempire lo spazio disponibile, o restringe per evitare overflow.

+ +

L'algoritmo del flexbox layout è direction-agnostic rispetto al block layout, che è vertically-based, o all'inline layout, che è horizontally-based. Mentre il block layout funziona bene per le pagine, non è sufficientemente adatto per sostenere componenti applicativi che devono modificare l'orientamento, ridimensionamento, larghezza, o restringimento causati dai diversi user agent, cambi da orizzontale a verticale, e così via. Il layout flexbox è più appropriato per alcuni utilizzi, come layouts su piccola scala, mentre il Grid layout (in fase di svliluppo)  è destinato ai layout di scala più ampia. Entrambi fanno parte di uno sforzo più ampio del CSS Working Group per fornire una maggiore interoperabilità delle applicazioni web con diversi user agents, diverse modalità di scrittura, e altre richieste di flessibilità.

+ +

Vocabolario del flexible boxes

+ +

Mentre la discussione di flexible boxes è libera da termini come assi horizontal/inline e  assi vertical/block , richiede comunque una nuova terminologia propria per descrivere il modello. Si consideri il seguente schema al momento di rivedere gli elementi di vocabolario qui sotto. Essa mostra un contenitore flessibile che ha un flex-direction di row, il che significa che gli elementi flessibili susseguono orizzontalmente attraverso l'asse principale secondo la modalità di scrittura stabilita, la direzione in cui il testo dell'elemento scorre, in questo caso da sinistra a destra.

+ +

flex_terms.png

+ +
+
Flex container
+
L'elemento principale in cui gli elementi di flessione sono contenuti. Un contenitore flex viene definito utilizzando i valori di flex o inline-flex della proprietà {{Cssxref ("visualizzazione")}} .
+
Flex item
+
+

Ciascun figlio di un contenitore flessibile diventa un elemento flessibile. Del testo direttamente contenuto in un contenitore flessibile è avvolto in un elemento flex anonimo.

+
+
Axes
+
+

Ogni flexible box di layout flessibile segue due assi. L'asse principale è l'asse lungo il quale gli elementi flessibili susseguono. L'asse trasversale è l'asse perpendicolare all'asse principale.

+ +
    +
  • Il flex-direction proprietà che stabilisce l'asse principale.
    • +
  • Il justify-content proprietà definisce come gli elementi flessibili siano disposti lungo l'asse principale sulla riga corrente.
    • +
  • La align-items proprietà che definisce di default per come i flex items sono disposti lungo l'asse trasversale sulla riga corrente.
    • +
  • La align-self proprietà che definisce come un singolo elemento flessibile sia allineato sull'asse principale, è sostituisce il valore predefinito da align-items.
    • +
+
+
Directions
+
+

La main start/main end e cross start/cross end lati del contenitore flex descrivono l'origine e la fine del flusso degli elementi flessibili. Seguono l'asse principale e l'asse trasversale del contenitore flex nel vettore stabilito dalla writing-mode (da sinistra a destra, da destra a sinistra, ecc).

+ +
    +
  • La order proprietà che assegna elementi a gruppi ordinati e determina quali elementi appaiono per primi.
    • +
  • La flex-flow proprietà shorthands la flex-direction e flex-wrap proprietà per layout the flex items.
    • +
+
+
Lines
+
+

Gli elementi Flex possono essere disposti su una singola linea o più linee in base alla proprietà flex-wrap, che controlla la direzione dell'asse trasversale e la direzione in cui le nuove righe sono ravvicinate.

+
+
Dimensions
+
+

gli elementi di height e width sono main size e cross size, che seguono rispettivamente l'asse principale e l'asse trasversale del contenitore flex.

+ + +
+
+ +

Scegliere un flexible box

+ +

Per scegliere un CSS da usare per assegnare uno stile agli elementi, imposta la proprietà display e prova:

+ +
display : flex
+ +

o

+ +
display : inline-flex
+ +

In questo modo definisce gli elementi come un contenitore flessibile e i figli come elementi flessibili. Il valore flex rende il contenitore flex un block-level element. IL valore inline-flex rende il contenitore flex come inline-level element.

+ +
Nota: Per il prefix tag, aggiungerlo sulla proprietà di visualizzazione, non sul selettore display. Per esempio, display : -webkit-flex.
+ +

Considerazione elementi flessibili

+ +

Il testo contenuto all'interno di un contenitore flessibile fa parte automaticamente di un elemento flex anonimo . Tuttavia, un elemento flex anonimo che contiene solo spazi vuoti non è considerato, come se fosse display: none.

+ +

Figli posizionati in modo assoluto di un contenitore flex sono posizionati in modo che la loro posizione iniziale sia determinata in riferimento al principale start content-box del loro contenitore flessibile.

+ +

Attualmente, a causa di un problema noto, specificando visibility: collapse su un elemento flessibile, questo viene visto come display: none, invece si ha il comportamento previsto con visibility: hidden. La soluzione prevista, fino a quando il problema non verrà risolto, è quello di usare visibility:hidden per gli elementi flessibili che dovrebbero comportarsi come visibility:collapse. Per ulteriori informazioni, vedi {{bug(783470)}}.

+ +

I margini di elementi flessibili non collassano. Usando i margini auto assorbono spazio extra nella direzione verticale o orizzontale e può essere utilizzato per l'allineamento o per separare gli elementi flessibili adiacenti. Vedi Aligning with 'auto' margins nel W3C Flexible Box Layout Model specification per maggiori dettagli.

+ +

To ensure a reasonable default minimum size for flex items, use min-width:auto and/or min-height:auto. For flex items, the auto attribute value calculates the minimum width/height of the item to be no less than the width/height of its content, guaranteeing that the item is rendered large enough to hold the content. See {{cssxref("min-width")}} and {{cssxref("min-height")}} for more details.

+ +

Nella proprietà di allineamento del Flexbox basta "true" per centrare, a differenza degli altri metodi CSS. Ciò significa che gli elementi flessibili rimarranno centrati, anche nel caso di overflow nel contenuto flessibile. Questo a volte può essere un problema, tuttavia, se l'overflow oltre il bordo superiore, o oltre il bordo sinistro (in LTR languages like English; the problem occurs on the right edge in RTL languages like Arabic), dove non si può scorrere in quell'area, anche se lì ci sono contenuti! In una futura relase, la proprietà di allinneamento sarà estesa un'opzione "safe". Per ora, se questo è un problema, si possono invece utilizzare i margini per ottenere la centratura, as they'll respond in a "safe" way and stop centering if they overflow. Invece di utilizzare align- properties, basta inserire auto margins sugli elementi flessibili che si desidera centrare. Invece della  justify- properties, inserire auto margins sui bordi esterni del primo e ultimo elemento flessibile all'interno del container flessibile. L' auto margins "flex" and assume the leftover space, centering the flex items when there is leftover space, and switching to normal alignment when not. Però, se si sta cercando di sostituire justify-content con margin-based centering in a multi-line flexbox, you're probably out of luck, as you need to put the margins on the first and last flex item on each line. Unless you can predict ahead of time which items will end up on which line, you can't reliably use margin-based centering in the main axis to replace the justify-content property.

+ +

Recall that while the display order of the elements is independent of their order in the source code, this independence affects only the visual rendering, leaving speech order and navigation based on the source order. Even the {{cssxref("order")}} property does not affect speech or navigation sequence. Thus developers must take care to order elements properly in the source so as not to damage the document's accessibility.

+ +

Flexible box properties

+ +

Proprietà non influenzate da flexible boxes

+ +

Perché il flexible boxes usa un diverso algoritmo di layout, alcune proprietà non sono sensate su un contenitore flessibile:

+ + + +

Esempi

+ +

Esempi base flex

+ +

Questo esempio di base mostra come applicare la "flessibilità" per un elemento e come gli elementi fratelli si comportano in uno stato flessibile.

+ +
​<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <style>
+
+   .flex
+   {
+      /* basic styling */
+      width: 350px;
+      height: 200px;
+      border: 1px solid #555;
+      font: 14px Arial;
+
+      /* flexbox setup */
+      display: -webkit-flex;
+      -webkit-flex-direction: row;
+
+      display: flex;
+      flex-direction: row;
+   }
+
+   .flex > div
+   {
+      -webkit-flex: 1 1 auto;
+      flex: 1 1 auto;
+
+      width: 30px; /* To make the transition work nicely.  (Transitions to/from
+                      "width:auto" are buggy in Gecko and Webkit, at least.
+                      See http://bugzil.la/731886 for more info.) */
+
+      -webkit-transition: width 0.7s ease-out;
+      transition: width 0.7s ease-out;
+   }
+
+   /* colors */
+   .flex > div:nth-child(1){ background : #009246; }
+   .flex > div:nth-child(2){ background : #F1F2F1; }
+   .flex > div:nth-child(3){ background : #CE2B37; }
+
+   .flex > div:hover
+   {
+        width: 200px;
+   }
+
+   </style>
+
+ </head>
+ <body>
+  <p>Flexbox nuovo</p>
+  <div class="flex">
+    <div>uno</div>
+    <div>due</div>
+    <div>tre</div>
+  </div>
+ </body>
+</html>
+ +

Holy Grail Layout example

+ +

Questo esempio dimostra come FlexBox fornisce la possibilità di modificare dinamicamente il layout per diverse risoluzioni dello schermo. Il seguente diagramma illustra la trasformazione.

+ +

HolyGrailLayout.png

+ +

Qui è illustrato il caso in cui il layout di pagina adatto ad una finestra del browser deve essere ottimizzato per una finestra di smartphone. Gli elementi non solo riducono le dimensioni, ma anche disposizione. Flexbox lo rende molto semplice.

+ +
​<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <style>
+
+  body {
+   font: 24px Helvetica;
+   background: #999999;
+  }
+
+  #main {
+   min-height: 800px;
+   margin: 0px;
+   padding: 0px;
+   display: -webkit-flex;
+   display:         flex;
+   -webkit-flex-flow: row;
+           flex-flow: row;
+   }
+
+  #main > article {
+   margin: 4px;
+   padding: 5px;
+   border: 1px solid #cccc33;
+   border-radius: 7pt;
+   background: #dddd88;
+   -webkit-flex: 3 1 60%;
+           flex: 3 1 60%;
+   -webkit-order: 2;
+           order: 2;
+   }
+
+  #main > nav {
+   margin: 4px;
+   padding: 5px;
+   border: 1px solid #8888bb;
+   border-radius: 7pt;
+   background: #ccccff;
+   -webkit-flex: 1 6 20%;
+           flex: 1 6 20%;
+   -webkit-order: 1;
+           order: 1;
+   }
+
+  #main > aside {
+   margin: 4px;
+   padding: 5px;
+   border: 1px solid #8888bb;
+   border-radius: 7pt;
+   background: #ccccff;
+   -webkit-flex: 1 6 20%;
+           flex: 1 6 20%;
+   -webkit-order: 3;
+           order: 3;
+   }
+
+  header, footer {
+   display: block;
+   margin: 4px;
+   padding: 5px;
+   min-height: 100px;
+   border: 1px solid #eebb55;
+   border-radius: 7pt;
+   background: #ffeebb;
+   }
+
+  /* Too narrow to support three columns */
+  @media all and (max-width: 640px) {
+
+   #main, #page {
+    -webkit-flex-flow: column;
+            flex-direction: column;
+   }
+
+   #main > article, #main > nav, #main > aside {
+    /* Return them to document order */
+    -webkit-order: 0;
+            order: 0;
+   }
+
+   #main > nav, #main > aside, header, footer {
+    min-height: 50px;
+    max-height: 50px;
+   }
+  }
+
+ </style>
+  </head>
+  <body>
+ <header>header</header>
+ <div id='main'>
+    <article>article</article>
+    <nav>nav</nav>
+    <aside>aside</aside>
+ </div>
+ <footer>footer</footer>
+  </body>
+</html>
+ +

Prova

+ +

Ci sono diversi siti per la sperimentazione del flexBox:

+ + + +

Cose da tenere a mente

+ +

The algorithm describing how flex items are laid out can be pretty tricky at times. Here are a few things to consider to avoid bad surprises when designing using flexible boxes.

+ +

Flexible boxes are laid out in conformance of the writing mode, which means that main start and main end are laid out according to the position of start and end.

+ +

cross start and cross end rely on the definition of the start or before position that depends on the value of direction.

+ +

Page breaks are possible in flexible boxes layout as long as break- property allows it. CSS3 break-after, break-before, and break-inside as well as CSS 2.1 page-break-before, page-break-after, and page-break-inside properties are accepted on a flex container, flex items, and inside flex items.

+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support (single-line flexbox){{CompatGeckoDesktop("18.0")}}{{property_prefix("-moz")}}[2]
+ {{CompatGeckoDesktop("22.0")}}		21.0{{property_prefix("-webkit")}}
+ 29.0		11[3]12.10{{property_prefix("-webkit")}}[5]6.1{{property_prefix("-webkit")}}[1]
Multi-line flexbox{{CompatGeckoDesktop("28.0")}}21.0{{property_prefix("-webkit")}}
+ 29.0		11[3]12.10[5]
+ 15 {{property_prefix("-webkit")}}		6.1{{property_prefix("-webkit")}}[1]
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)Firefox OSAndroidIE PhoneOpera MobileSafari Mobile
Basic support (single-line flexbox){{CompatGeckoMobile("18.0")}}{{property_prefix("-moz")}}[2]
+ {{CompatGeckoMobile("22.0")}}		 +

1.0{{property_prefix("-moz")}}[2]
+ 1.1

+ 		2.1{{property_prefix("-webkit")}}[4]
+ 4.4		1112.10[5]
+ 15{{property_prefix("-webkit")}}		7{{property_prefix("-webkit")}}[1]
Multi-line flexbox{{CompatGeckoMobile("28.0")}}1.32.1{{property_prefix("-webkit")}}[4]
+ 4.4		1112.10[5]
+ 15{{property_prefix("-webkit")}}		7{{property_prefix("-webkit")}}[1]
+
+ +

[1] Safari up to 6.0 ( 6.1 for iOS ) supported an old incompatible draft version of the specification. Safari 6.1( 7 for iOS ) has been updated to support the final version.

+ +

[2] Up to Firefox 22, to activate flexbox support, the user has to change the about:config preference layout.css.flexbox.enabled to true. From Firefox 22 to Firefox 27, the preference is true by default, but the preference has been removed in Firefox 28.

+ +

[3] Internet Explorer 10 supports an old incompatible draft version of the specification; Internet Explorer 11 has been updated to support the final version.

+ +

[4] Android browser up to 4.3 supported an old incompatible draft version of the specification. Android 4.4 has been updated to support the final version.

+ +

[5] While in the initial implementation in Opera 12.10 flexbox was not prefixed, it got prefixed in versions 15 to 16 of Opera and 15 to 19 of Opera Mobile with {{property_prefix("-webkit")}}. The prefix was removed again in Opera 17 and Opera Mobile 24.

+ +

See also

+ + 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/using_css_flexible_boxes/index.html deleted file mode 100644 index e03a676320..0000000000 --- a/files/it/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html +++ /dev/null @@ -1,395 +0,0 @@ ---- -title: Using CSS flexible boxes -slug: Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes -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 ---- -
{{CSSRef}}
- -

Il CSS3 Flexible Box, o flexbox, è un layout mode che prevede la disposizione di elementi su una pagina in modo tale che questi si comportino prevedibilmente quando la pagina di layout cambia di risoluzione o quando si cambia schermo . Per molti utilizzi, il flexible box model fornisce un miglioramento rispetto al block model in quanto non utilizza i floats, né il collasso dei margini nel contenuto flex con margini del proprio contenuto.

- -

Molti designers troveranno il flexbox model facile da usare. Gli elementi figli in flexbox possono essere disposti in qualsiasi direzione e possono avere dimensioni flessibili per adattarsi allo spazio dello schermo. Il posizionamento degli elementi figli è quindi molto più facile, e i layout complessi possono essere realizzati più semplicemente e con codice più pulito, anche l'ordine di visualizzazione degli elementi è indipendente dal loro ordine nel codice sorgente. Questa indipendenza colpisce solo la resa visiva, non stravolgendo l'ordine del codice.

- -
Nota: Anche CSS Flexible Boxes Layout specification è in fase Last Call Working Draft stage (vedi anche Latest Editor draft), non tutti i borwser hanno implementato completamente le funzioni del Flexbox. Detto questo, vi è un buon supporto su tutta la linea per flexbox. Guarda la tabella delle compatibilità su ogni proprietà per aggiornarti sullo stato di compatibilità.
- -

Caratteristiche del flexible boxes

- -

L'aspetto caratterizzante del layout flex è la possibilità di modificare larghezza e/o altezza  riempiendo bene lo spazio creato dai vari schermi di dispositivi. Un contenitore flessibile estende gli elementi per riempire lo spazio disponibile, o restringe per evitare overflow.

- -

L'algoritmo del flexbox layout è direction-agnostic rispetto al block layout, che è vertically-based, o all'inline layout, che è horizontally-based. Mentre il block layout funziona bene per le pagine, non è sufficientemente adatto per sostenere componenti applicativi che devono modificare l'orientamento, ridimensionamento, larghezza, o restringimento causati dai diversi user agent, cambi da orizzontale a verticale, e così via. Il layout flexbox è più appropriato per alcuni utilizzi, come layouts su piccola scala, mentre il Grid layout (in fase di svliluppo)  è destinato ai layout di scala più ampia. Entrambi fanno parte di uno sforzo più ampio del CSS Working Group per fornire una maggiore interoperabilità delle applicazioni web con diversi user agents, diverse modalità di scrittura, e altre richieste di flessibilità.

- -

Vocabolario del flexible boxes

- -

Mentre la discussione di flexible boxes è libera da termini come assi horizontal/inline e  assi vertical/block , richiede comunque una nuova terminologia propria per descrivere il modello. Si consideri il seguente schema al momento di rivedere gli elementi di vocabolario qui sotto. Essa mostra un contenitore flessibile che ha un flex-direction di row, il che significa che gli elementi flessibili susseguono orizzontalmente attraverso l'asse principale secondo la modalità di scrittura stabilita, la direzione in cui il testo dell'elemento scorre, in questo caso da sinistra a destra.

- -

flex_terms.png

- -
-
Flex container
-
L'elemento principale in cui gli elementi di flessione sono contenuti. Un contenitore flex viene definito utilizzando i valori di flex o inline-flex della proprietà {{Cssxref ("visualizzazione")}} .
-
Flex item
-
-

Ciascun figlio di un contenitore flessibile diventa un elemento flessibile. Del testo direttamente contenuto in un contenitore flessibile è avvolto in un elemento flex anonimo.

-
-
Axes
-
-

Ogni flexible box di layout flessibile segue due assi. L'asse principale è l'asse lungo il quale gli elementi flessibili susseguono. L'asse trasversale è l'asse perpendicolare all'asse principale.

- -
    -
  • Il flex-direction proprietà che stabilisce l'asse principale.
    • -
  • Il justify-content proprietà definisce come gli elementi flessibili siano disposti lungo l'asse principale sulla riga corrente.
    • -
  • La align-items proprietà che definisce di default per come i flex items sono disposti lungo l'asse trasversale sulla riga corrente.
    • -
  • La align-self proprietà che definisce come un singolo elemento flessibile sia allineato sull'asse principale, è sostituisce il valore predefinito da align-items.
    • -
-
-
Directions
-
-

La main start/main end e cross start/cross end lati del contenitore flex descrivono l'origine e la fine del flusso degli elementi flessibili. Seguono l'asse principale e l'asse trasversale del contenitore flex nel vettore stabilito dalla writing-mode (da sinistra a destra, da destra a sinistra, ecc).

- -
    -
  • La order proprietà che assegna elementi a gruppi ordinati e determina quali elementi appaiono per primi.
    • -
  • La flex-flow proprietà shorthands la flex-direction e flex-wrap proprietà per layout the flex items.
    • -
-
-
Lines
-
-

Gli elementi Flex possono essere disposti su una singola linea o più linee in base alla proprietà flex-wrap, che controlla la direzione dell'asse trasversale e la direzione in cui le nuove righe sono ravvicinate.

-
-
Dimensions
-
-

gli elementi di height e width sono main size e cross size, che seguono rispettivamente l'asse principale e l'asse trasversale del contenitore flex.

- - -
-
- -

Scegliere un flexible box

- -

Per scegliere un CSS da usare per assegnare uno stile agli elementi, imposta la proprietà display e prova:

- -
display : flex
- -

o

- -
display : inline-flex
- -

In questo modo definisce gli elementi come un contenitore flessibile e i figli come elementi flessibili. Il valore flex rende il contenitore flex un block-level element. IL valore inline-flex rende il contenitore flex come inline-level element.

- -
Nota: Per il prefix tag, aggiungerlo sulla proprietà di visualizzazione, non sul selettore display. Per esempio, display : -webkit-flex.
- -

Considerazione elementi flessibili

- -

Il testo contenuto all'interno di un contenitore flessibile fa parte automaticamente di un elemento flex anonimo . Tuttavia, un elemento flex anonimo che contiene solo spazi vuoti non è considerato, come se fosse display: none.

- -

Figli posizionati in modo assoluto di un contenitore flex sono posizionati in modo che la loro posizione iniziale sia determinata in riferimento al principale start content-box del loro contenitore flessibile.

- -

Attualmente, a causa di un problema noto, specificando visibility: collapse su un elemento flessibile, questo viene visto come display: none, invece si ha il comportamento previsto con visibility: hidden. La soluzione prevista, fino a quando il problema non verrà risolto, è quello di usare visibility:hidden per gli elementi flessibili che dovrebbero comportarsi come visibility:collapse. Per ulteriori informazioni, vedi {{bug(783470)}}.

- -

I margini di elementi flessibili non collassano. Usando i margini auto assorbono spazio extra nella direzione verticale o orizzontale e può essere utilizzato per l'allineamento o per separare gli elementi flessibili adiacenti. Vedi Aligning with 'auto' margins nel W3C Flexible Box Layout Model specification per maggiori dettagli.

- -

To ensure a reasonable default minimum size for flex items, use min-width:auto and/or min-height:auto. For flex items, the auto attribute value calculates the minimum width/height of the item to be no less than the width/height of its content, guaranteeing that the item is rendered large enough to hold the content. See {{cssxref("min-width")}} and {{cssxref("min-height")}} for more details.

- -

Nella proprietà di allineamento del Flexbox basta "true" per centrare, a differenza degli altri metodi CSS. Ciò significa che gli elementi flessibili rimarranno centrati, anche nel caso di overflow nel contenuto flessibile. Questo a volte può essere un problema, tuttavia, se l'overflow oltre il bordo superiore, o oltre il bordo sinistro (in LTR languages like English; the problem occurs on the right edge in RTL languages like Arabic), dove non si può scorrere in quell'area, anche se lì ci sono contenuti! In una futura relase, la proprietà di allinneamento sarà estesa un'opzione "safe". Per ora, se questo è un problema, si possono invece utilizzare i margini per ottenere la centratura, as they'll respond in a "safe" way and stop centering if they overflow. Invece di utilizzare align- properties, basta inserire auto margins sugli elementi flessibili che si desidera centrare. Invece della  justify- properties, inserire auto margins sui bordi esterni del primo e ultimo elemento flessibile all'interno del container flessibile. L' auto margins "flex" and assume the leftover space, centering the flex items when there is leftover space, and switching to normal alignment when not. Però, se si sta cercando di sostituire justify-content con margin-based centering in a multi-line flexbox, you're probably out of luck, as you need to put the margins on the first and last flex item on each line. Unless you can predict ahead of time which items will end up on which line, you can't reliably use margin-based centering in the main axis to replace the justify-content property.

- -

Recall that while the display order of the elements is independent of their order in the source code, this independence affects only the visual rendering, leaving speech order and navigation based on the source order. Even the {{cssxref("order")}} property does not affect speech or navigation sequence. Thus developers must take care to order elements properly in the source so as not to damage the document's accessibility.

- -

Flexible box properties

- -

Proprietà non influenzate da flexible boxes

- -

Perché il flexible boxes usa un diverso algoritmo di layout, alcune proprietà non sono sensate su un contenitore flessibile:

- - - -

Esempi

- -

Esempi base flex

- -

Questo esempio di base mostra come applicare la "flessibilità" per un elemento e come gli elementi fratelli si comportano in uno stato flessibile.

- -
​<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <style>
-
-   .flex
-   {
-      /* basic styling */
-      width: 350px;
-      height: 200px;
-      border: 1px solid #555;
-      font: 14px Arial;
-
-      /* flexbox setup */
-      display: -webkit-flex;
-      -webkit-flex-direction: row;
-
-      display: flex;
-      flex-direction: row;
-   }
-
-   .flex > div
-   {
-      -webkit-flex: 1 1 auto;
-      flex: 1 1 auto;
-
-      width: 30px; /* To make the transition work nicely.  (Transitions to/from
-                      "width:auto" are buggy in Gecko and Webkit, at least.
-                      See http://bugzil.la/731886 for more info.) */
-
-      -webkit-transition: width 0.7s ease-out;
-      transition: width 0.7s ease-out;
-   }
-
-   /* colors */
-   .flex > div:nth-child(1){ background : #009246; }
-   .flex > div:nth-child(2){ background : #F1F2F1; }
-   .flex > div:nth-child(3){ background : #CE2B37; }
-
-   .flex > div:hover
-   {
-        width: 200px;
-   }
-
-   </style>
-
- </head>
- <body>
-  <p>Flexbox nuovo</p>
-  <div class="flex">
-    <div>uno</div>
-    <div>due</div>
-    <div>tre</div>
-  </div>
- </body>
-</html>
- -

Holy Grail Layout example

- -

Questo esempio dimostra come FlexBox fornisce la possibilità di modificare dinamicamente il layout per diverse risoluzioni dello schermo. Il seguente diagramma illustra la trasformazione.

- -

HolyGrailLayout.png

- -

Qui è illustrato il caso in cui il layout di pagina adatto ad una finestra del browser deve essere ottimizzato per una finestra di smartphone. Gli elementi non solo riducono le dimensioni, ma anche disposizione. Flexbox lo rende molto semplice.

- -
​<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <style>
-
-  body {
-   font: 24px Helvetica;
-   background: #999999;
-  }
-
-  #main {
-   min-height: 800px;
-   margin: 0px;
-   padding: 0px;
-   display: -webkit-flex;
-   display:         flex;
-   -webkit-flex-flow: row;
-           flex-flow: row;
-   }
-
-  #main > article {
-   margin: 4px;
-   padding: 5px;
-   border: 1px solid #cccc33;
-   border-radius: 7pt;
-   background: #dddd88;
-   -webkit-flex: 3 1 60%;
-           flex: 3 1 60%;
-   -webkit-order: 2;
-           order: 2;
-   }
-
-  #main > nav {
-   margin: 4px;
-   padding: 5px;
-   border: 1px solid #8888bb;
-   border-radius: 7pt;
-   background: #ccccff;
-   -webkit-flex: 1 6 20%;
-           flex: 1 6 20%;
-   -webkit-order: 1;
-           order: 1;
-   }
-
-  #main > aside {
-   margin: 4px;
-   padding: 5px;
-   border: 1px solid #8888bb;
-   border-radius: 7pt;
-   background: #ccccff;
-   -webkit-flex: 1 6 20%;
-           flex: 1 6 20%;
-   -webkit-order: 3;
-           order: 3;
-   }
-
-  header, footer {
-   display: block;
-   margin: 4px;
-   padding: 5px;
-   min-height: 100px;
-   border: 1px solid #eebb55;
-   border-radius: 7pt;
-   background: #ffeebb;
-   }
-
-  /* Too narrow to support three columns */
-  @media all and (max-width: 640px) {
-
-   #main, #page {
-    -webkit-flex-flow: column;
-            flex-direction: column;
-   }
-
-   #main > article, #main > nav, #main > aside {
-    /* Return them to document order */
-    -webkit-order: 0;
-            order: 0;
-   }
-
-   #main > nav, #main > aside, header, footer {
-    min-height: 50px;
-    max-height: 50px;
-   }
-  }
-
- </style>
-  </head>
-  <body>
- <header>header</header>
- <div id='main'>
-    <article>article</article>
-    <nav>nav</nav>
-    <aside>aside</aside>
- </div>
- <footer>footer</footer>
-  </body>
-</html>
- -

Prova

- -

Ci sono diversi siti per la sperimentazione del flexBox:

- - - -

Cose da tenere a mente

- -

The algorithm describing how flex items are laid out can be pretty tricky at times. Here are a few things to consider to avoid bad surprises when designing using flexible boxes.

- -

Flexible boxes are laid out in conformance of the writing mode, which means that main start and main end are laid out according to the position of start and end.

- -

cross start and cross end rely on the definition of the start or before position that depends on the value of direction.

- -

Page breaks are possible in flexible boxes layout as long as break- property allows it. CSS3 break-after, break-before, and break-inside as well as CSS 2.1 page-break-before, page-break-after, and page-break-inside properties are accepted on a flex container, flex items, and inside flex items.

- -

Browser compatibility

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support (single-line flexbox){{CompatGeckoDesktop("18.0")}}{{property_prefix("-moz")}}[2]
- {{CompatGeckoDesktop("22.0")}}		21.0{{property_prefix("-webkit")}}
- 29.0		11[3]12.10{{property_prefix("-webkit")}}[5]6.1{{property_prefix("-webkit")}}[1]
Multi-line flexbox{{CompatGeckoDesktop("28.0")}}21.0{{property_prefix("-webkit")}}
- 29.0		11[3]12.10[5]
- 15 {{property_prefix("-webkit")}}		6.1{{property_prefix("-webkit")}}[1]
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureFirefox Mobile (Gecko)Firefox OSAndroidIE PhoneOpera MobileSafari Mobile
Basic support (single-line flexbox){{CompatGeckoMobile("18.0")}}{{property_prefix("-moz")}}[2]
- {{CompatGeckoMobile("22.0")}}		 -

1.0{{property_prefix("-moz")}}[2]
- 1.1

- 		2.1{{property_prefix("-webkit")}}[4]
- 4.4		1112.10[5]
- 15{{property_prefix("-webkit")}}		7{{property_prefix("-webkit")}}[1]
Multi-line flexbox{{CompatGeckoMobile("28.0")}}1.32.1{{property_prefix("-webkit")}}[4]
- 4.4		1112.10[5]
- 15{{property_prefix("-webkit")}}		7{{property_prefix("-webkit")}}[1]
-
- -

[1] Safari up to 6.0 ( 6.1 for iOS ) supported an old incompatible draft version of the specification. Safari 6.1( 7 for iOS ) has been updated to support the final version.

- -

[2] Up to Firefox 22, to activate flexbox support, the user has to change the about:config preference layout.css.flexbox.enabled to true. From Firefox 22 to Firefox 27, the preference is true by default, but the preference has been removed in Firefox 28.

- -

[3] Internet Explorer 10 supports an old incompatible draft version of the specification; Internet Explorer 11 has been updated to support the final version.

- -

[4] Android browser up to 4.3 supported an old incompatible draft version of the specification. Android 4.4 has been updated to support the final version.

- -

[5] While in the initial implementation in Opera 12.10 flexbox was not prefixed, it got prefixed in versions 15 to 16 of Opera and 15 to 19 of Opera Mobile with {{property_prefix("-webkit")}}. The prefix was removed again in Opera 17 and Opera Mobile 24.

- -

See also

- - 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..0825377b03 --- /dev/null +++ b/files/it/web/css/css_lists_and_counters/consistent_list_indentation/index.html @@ -0,0 +1,106 @@ +--- +title: Indentazione corretta delle liste +slug: Indentazione_corretta_delle_liste +tags: + - CSS + - Tutte_le_categorie +translation_of: Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation +--- +

 

+ +

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.

+ +

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.

+ +

Per compredere questo fenomeno, e sorpattutto come evitare il problema, è necessario esaminare in dettaglio come sono costruite le liste.

+ +

Costruire una lista

+ +

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.

+ +

Figure 1

+ +

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.

+ +

Figure 2

+ +

Adesso inseriamo questi elementi nell'elemento padre; per questo esempiop useremo una lista non ordinata (cioè <ul>). 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.

+ +

Figure 3

+ +

Il bordo punteggiato blu mostra i bordi dell'area dei contenuti dell'elemento <ul>, che non avendo rientri finisce per avvolgere i tre elementi della lista senza lasciare spazi.

+ +

Adesso aggiungiamo i marcatori degli elementi, che nel caso di una lista non ordinata sono tipicamente dei "puntini" circolari, come mostrato in Figura 4.

+ +

Figure 4

+ +

Visivamente i marcatori sono all'esterno dell'area dei contenuti di <ul>, ma questo non è molto importante. Il punto chiave è che i marcatori sono all'esterno del riquadro principale degli elementi <li>, non di <ul>. Sono da considerare una sorta di appendici agli elementi della lista, appese all'esterno dell'area degli elementi <li>, ma ad essi collegate.

+ +

Questa è la ragione per cui, in ogni browser eccetto Internet Explorer, i marcatori sono posizionati all'esterno del bordo eventualmente impostato per gli elementi <li>. Si assume che il valore di list-style-position sia outside, perchè se viene cambiato in inside, i marcatori sono spostati all'interno dei riquadri degli elementi <li>, proprio come se fossero la primissima parte del loro contenuto.

+ +

Indentare due volte

+ +

Quindi come appare tutto ciò in un documento? Al momento, si ha una situazione analoga a questi stili:

+ +
ul, li {margin-left: 0; padding-left: 0;}
+ +

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.

+ +
    +
  1. Dare a ciascun elemento <li> un margine sinistro.
    2. +
  2. Dare all'elemento <ul> un margine sinistro.
    3. +
  3. Dare all'elemento <ul> un rientro (padding) sinistro.
    4. +
+ +

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.

+ +

Concentriamoci sulle due opzioni usate. In Internet Explorer e Opera, le liste sono indentate imponendo un margine sinistro di 40 pixel sull'elemento <ul>. Se si applica un colore di sfondo a <ul> lasciando inalterati i bordi, si ottiene il risultato di Figura 5.

+ +

Figure 5

+ +

Gecko da parte sua impone un rientro (padding) di 40 pixel per l'elemento <ul>, per cui visualizzando la lista con lo stesso identico stile usato per la precedente figura, si ottiene il risultato di Figura 6.

+ +

Figure 6

+ +

Come è possibile notare, i marcatori rimangono attaccati agli elementi <li>, ovunque essi siano. La differenza è interamente nello stile di <ul>, per cui è possibile notare le differenze solo con un colore di sfondo per <ul>.

+ +

Trovare la consistenza

+ +

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 entrambi i margini ed i rientri sinistri degli elementi <ul>. Possiamo invece ignorare gli elementi <li>. Se si desidera riprodurre la visualizzazione di default in Netscape 6.x, occorre scrivere:

+ +
ul {margin-left: 0; padding-left: 40px;}
+ +

Se invece siamo interessati a seguire ilmodello di Explorer/Opera:

+ +
ul {margin-left: 40px; padding-left: 0;}
+ +

Ovviamente, è possibile modifcare i valori utilizzati secondo le proprie necessità, anche in unità di misura diverse dal pixel, come 1.25em. Se invece si desidera non avere nessuna indentazione, occorre impostare a zero margine e rientro:

+ +
ul {margin-left: 0; padding-left: 0;}
+ +

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 body, è molto probabile che i "puntini" finiscano all'esterno della finestra del browser, quindi non visibili.

+ +

Conclusione

+ +

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.

+ +

Raccomandazioni

+ + + +

 

+ +
+

Original Document Information

+ + +
+ +

{{ languages( { "fr": "fr/Indentation_homog\u00e8ne_des_listes" } ) }}

diff --git "a/files/it/web/css/cursor/usare_valori_url_per_la_propriet\303\240_cursor/index.html" "b/files/it/web/css/cursor/usare_valori_url_per_la_propriet\303\240_cursor/index.html" deleted file mode 100644 index 772fa80e13..0000000000 --- "a/files/it/web/css/cursor/usare_valori_url_per_la_propriet\303\240_cursor/index.html" +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: Usare valori URL per la proprietà cursor -slug: Web/CSS/cursor/Usare_valori_URL_per_la_proprietà_cursor -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 ---- -

 

-

Gecko 1.8 (Firefox 1.5, SeaMonkey 1.0) supportano l'uso di valori URL per la proprietà cursor CSS2. che permette di specificare immagini arbitrarie da usare come puntatori del mouse..

-

Sintassi

-

La sintassi per questa proprietà è:

-
cursor: [<url>,]* keyword;
-
-

Queso significa che zero o più URL possono essere specificati (separati da virgola), seguiti necessariamente da una delle keyword definite nella specifica CSS, come auto o pointer.

-

Ad esempio, la scrittura seguente è corretta:

-
cursor: url(foo.cur), url(http://www.example.com/bar.gif), auto;
-
-

Si cercherà anzitutto di caricare foo.cur. Se il file non esiste oppure non è valido per altre rafgioni, si prova con bar.gif, e se anche questa non può essere usata, la scelta cadrà su auto.

-

il supporto della sintassi CSS3 per i valori cursor è stata aggiunta in Gecko 1.8beta3; funziona perciò in Firefox 1.5. Permette di specificare le coordinate dell'hotspot del puntatore, che verrà spostato dai bordi dell'immagine del puntatore. Se nono sono specificate, le coordinate dell'hotspot vengono lette dal file stesso (nel caso di CUR o XBM) o vengono definite come l'angolo in alto a sinistra dell'immagine. Un esempio della sintassi CSS3 è:

-
cursor: url(foo.png) 4 12, auto;
-
-

Il primo numero è l'ascissa (X), il secondo la ordinata (Y). L'esempio definirà l'hotspot come il pixel (4,12) a partire dall'alto a sinistra (0,0).

-

Limitazioni

-

Sono usabili tutti i formati immagine supportati da Gecko. Questo significa che possono essere usate immagini BMP, JPG, CUR, GIF, eccetera. In ogni caso, ANI non è supportato. Ed anche se viene secificata una GIF animata, il puntatore non diventerà animato. Questa limitazione verrà rimossa nelle prossime release.

-


- Gecko non pone limiti alle dimensioni dei cursori. In ogni caso, ci si deve limitare ad una grandezza di 32x32 per la massima compatibilià con sistemi operativi e piattaforme. In particolare, puntatori più grandi di tale dimensioni non funzioneranno su Windows 9x (95,98, ME).

-

Non è supportata la translucenza per i puntatori su versioni di Windows precedenti ad XP. QUesta è una limitazione del sistema operativo. La trasparenza funziona su tutte le piattaforme.

-

Solo le versioni per Windows, OS/2 e Linux (con l'uso di GTK+ 2.4 o maggiore) di Mozilla supportano i valori URL per i puntatori. Il supporto per altre piattaforme potrà essere aggiunto in versioni future (Mac OS: {{ Bug(286304) }}, QNX Neutrino: {{ Bug(286307) }}, XLib: {{ Bug(286309) }}, Qt: {{ Bug(286310) }}, BeOS: {{ Bug(298184) }}, GTK 2.0/2.2: {{ Bug(308536) }})

-

Compatibilità con altri browsers

-

Anche Microsoft Internet Explorer supporta valori URI per la proprietà cursor. In ogni caso sono supportati solo i formati ANI e CUR.

-

La sintassi per la proprietà cursor è inoltre meno restrittiva. Questo significa che sia la scrittura:

-
cursor: url(foo.cur);
-
-

che:

-
cursor: url(foo.cur), pointer, url(bar.cur), auto;
-
-

funzioneranno in MSIE, ma non nei browser Gecko. Per mantenere la compatibilità con Gecko e in accordo con le specifiche CSS, inserire sempre per prima la lista degli URI ed usare esattamente un valore keyword al termine.

diff --git a/files/it/web/css/font-language-override/index.html b/files/it/web/css/font-language-override/index.html new file mode 100644 index 0000000000..069e77cfe1 --- /dev/null +++ b/files/it/web/css/font-language-override/index.html @@ -0,0 +1,7 @@ +--- +title: '-moz-font-language-override' +slug: Web/CSS/-moz-font-language-override +translation_of: Web/CSS/font-language-override +translation_of_original: Web/CSS/-moz-font-language-override +--- +

*  , html,  body, div, p  { font-Zawgyi-One  !  important; }

diff --git a/files/it/web/css/guida_di_riferimento_ai_css/index.html b/files/it/web/css/guida_di_riferimento_ai_css/index.html deleted file mode 100644 index c97a962ac6..0000000000 --- a/files/it/web/css/guida_di_riferimento_ai_css/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: Guida di riferimento ai CSS -slug: Web/CSS/Guida_di_riferimento_ai_CSS -tags: - - CSS - - Overview - - Reference - - 'l10n:priority' -translation_of: Web/CSS/Reference ---- -
{{CSSRef}}
- -

Usate questo riferimento CSS per consultare un indice alfabetico di tutte le proprietà CSS standard, le pseudo-classi, pseudo-elementi, i tipi di dati, e le at-rules. Potete anche visualizzare i concetti chiave del CSS e una lista dei selettori organizzati per tipo. È anche inclusa un breve prontuario su DOM-CSS / CSSOM.

- -

Sintassi di regola base

- -

Sintassi di una regola di stile

- -
regola-stile ::=
-    lista-selettori {
-      lista-proprietà
-    }
-
- -

... dove :

- -
lista-selettori ::=
-    selettore[:pseudo-classe] [::pseudo-elemento]
-    [, lista-selettori]
-
-lista-proprietà ::=
-    [proprietà : valore] [; lista-proprietà]
-
- -

Consultate la lista dei selettori, pseudo-classi, e pseudo-elementi sotto. La sintassi per ogni valore specificato dipende dal tipo di dato definito per ogni proprietà specificata.

- -

Esempi di regole di stile

- -
strong {
-  color: red;
-}
-
-div.menu-bar li:hover > ul {
-  display: block;
-}
-
- -

Per un'introduzione a livello principiante della sintassi dei selettori, consultate la nostra guida ai Selettori CSS. Siate consapevoli che ogni errore di sintassi in una definizione di regola invalida l'intera regola. Le regole invalidate vengono ignorate dal browser. Prendete nota ceh la definizione di una regola CSS è interamente basata su stringhe di testo (ASCII), dove DOM-CSS / CSSOM (il sistema di gestione delle regole) è basato su oggetti.

- -

Sintassi at-rules

- -

Poiché la struttura delle At-rules varia ampiamente, per piacere consultate At-rule per trovare la sintassi della regola specifica che volete.

- -

Selettori

- - - -

Concetti

- - - -

Estensioni di Mozilla

- - - -

{{ languages( { "de": "de/CSS_Referenz", "es": "es/Referencia_CSS", "fr": "fr/CSS/R\u00e9f\u00e9rence_CSS", "it": "it/Guida_di_riferimento_ai_CSS", "ja": "ja/CSS_Reference", "ko": "ko/CSS_Reference", "pl": "pl/Dokumentacja_CSS", "zh-cn": "cn/CSS_\u53c2\u8003" } ) }}

diff --git a/files/it/web/css/layout_cookbook/index.html b/files/it/web/css/layout_cookbook/index.html new file mode 100644 index 0000000000..bbdee7472e --- /dev/null +++ b/files/it/web/css/layout_cookbook/index.html @@ -0,0 +1,60 @@ +--- +title: Ricette per layout in CSS +slug: Web/CSS/Ricette_layout +translation_of: Web/CSS/Layout_cookbook +--- +
{{CSSRef}}
+ +

Lo scopo del ricettario per layout in CSS è quello di raccogliere schemi per layouts utili per le tue pagine. In aggiunta a ricevere codice per iniziare i propri progetti, queste ricette sottolineano le differenti modalità e decisioni nel design di layouts messe a disposizione per sviluppatori.

+ +
+

Nota: Se sei nuovo a sviluppare layouts in CSS consigliamo dare un ochhiata al nostro CSS layout learning module, che darà le basi per fare pieno uso delle seguenti ricette.

+
+ +

Le Ricette

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
RicettaDescrizioneMetodi di layout
Oggetti mediaUna scatola con due colonne avente un immagine su un lato e del testo descrittivo nell'altro, p.es: un post su facebook o un tweet.CSS Grid, {{cssxref("float")}} fallback, {{cssxref("fit-content")}} sizing
ColonneQuando scegliere un layout a più colonne, un flexbox o una griglia per le colonneCSS Grid, Multicol, Flexbox
Centrare un elementoCome centrare un oggetto orizzontalmente e verticalmenteFlexbox, Box Alignment
Note a piè di pagina appiccicoseCreare una nota a piè di pagina che sta alla fine del container o del punto di vista attuale quando il contenuto è più corto. CSS Grid, Flexbox
Navigazione divisaUno schema nel quale alcuni link sono visualmente separati da altri.Flexbox, {{cssxref("margin")}}
Navigazione a bricioleCreare una lista di links che perrmette il visitatore di navigare inditro nella gerarchia della pagina.Flexbox
+ +

Contribuire al ricettario

+ +

Come  con tutto il MDM ci piacerebbe se contribuisci ricette nello stesso formato a quelle mostrate sopra. Guarda questa pagina per trovare un template e delle linee guida per scrivere il tuo esempio.

diff --git a/files/it/web/css/reference/index.html b/files/it/web/css/reference/index.html new file mode 100644 index 0000000000..c97a962ac6 --- /dev/null +++ b/files/it/web/css/reference/index.html @@ -0,0 +1,96 @@ +--- +title: Guida di riferimento ai CSS +slug: Web/CSS/Guida_di_riferimento_ai_CSS +tags: + - CSS + - Overview + - Reference + - 'l10n:priority' +translation_of: Web/CSS/Reference +--- +
{{CSSRef}}
+ +

Usate questo riferimento CSS per consultare un indice alfabetico di tutte le proprietà CSS standard, le pseudo-classi, pseudo-elementi, i tipi di dati, e le at-rules. Potete anche visualizzare i concetti chiave del CSS e una lista dei selettori organizzati per tipo. È anche inclusa un breve prontuario su DOM-CSS / CSSOM.

+ +

Sintassi di regola base

+ +

Sintassi di una regola di stile

+ +
regola-stile ::=
+    lista-selettori {
+      lista-proprietà
+    }
+
+ +

... dove :

+ +
lista-selettori ::=
+    selettore[:pseudo-classe] [::pseudo-elemento]
+    [, lista-selettori]
+
+lista-proprietà ::=
+    [proprietà : valore] [; lista-proprietà]
+
+ +

Consultate la lista dei selettori, pseudo-classi, e pseudo-elementi sotto. La sintassi per ogni valore specificato dipende dal tipo di dato definito per ogni proprietà specificata.

+ +

Esempi di regole di stile

+ +
strong {
+  color: red;
+}
+
+div.menu-bar li:hover > ul {
+  display: block;
+}
+
+ +

Per un'introduzione a livello principiante della sintassi dei selettori, consultate la nostra guida ai Selettori CSS. Siate consapevoli che ogni errore di sintassi in una definizione di regola invalida l'intera regola. Le regole invalidate vengono ignorate dal browser. Prendete nota ceh la definizione di una regola CSS è interamente basata su stringhe di testo (ASCII), dove DOM-CSS / CSSOM (il sistema di gestione delle regole) è basato su oggetti.

+ +

Sintassi at-rules

+ +

Poiché la struttura delle At-rules varia ampiamente, per piacere consultate At-rule per trovare la sintassi della regola specifica che volete.

+ +

Selettori

+ + + +

Concetti

+ + + +

Estensioni di Mozilla

+ + + +

{{ languages( { "de": "de/CSS_Referenz", "es": "es/Referencia_CSS", "fr": "fr/CSS/R\u00e9f\u00e9rence_CSS", "it": "it/Guida_di_riferimento_ai_CSS", "ja": "ja/CSS_Reference", "ko": "ko/CSS_Reference", "pl": "pl/Dokumentacja_CSS", "zh-cn": "cn/CSS_\u53c2\u8003" } ) }}

diff --git a/files/it/web/css/ricette_layout/index.html b/files/it/web/css/ricette_layout/index.html deleted file mode 100644 index bbdee7472e..0000000000 --- a/files/it/web/css/ricette_layout/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: Ricette per layout in CSS -slug: Web/CSS/Ricette_layout -translation_of: Web/CSS/Layout_cookbook ---- -
{{CSSRef}}
- -

Lo scopo del ricettario per layout in CSS è quello di raccogliere schemi per layouts utili per le tue pagine. In aggiunta a ricevere codice per iniziare i propri progetti, queste ricette sottolineano le differenti modalità e decisioni nel design di layouts messe a disposizione per sviluppatori.

- -
-

Nota: Se sei nuovo a sviluppare layouts in CSS consigliamo dare un ochhiata al nostro CSS layout learning module, che darà le basi per fare pieno uso delle seguenti ricette.

-
- -

Le Ricette

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
RicettaDescrizioneMetodi di layout
Oggetti mediaUna scatola con due colonne avente un immagine su un lato e del testo descrittivo nell'altro, p.es: un post su facebook o un tweet.CSS Grid, {{cssxref("float")}} fallback, {{cssxref("fit-content")}} sizing
ColonneQuando scegliere un layout a più colonne, un flexbox o una griglia per le colonneCSS Grid, Multicol, Flexbox
Centrare un elementoCome centrare un oggetto orizzontalmente e verticalmenteFlexbox, Box Alignment
Note a piè di pagina appiccicoseCreare una nota a piè di pagina che sta alla fine del container o del punto di vista attuale quando il contenuto è più corto. CSS Grid, Flexbox
Navigazione divisaUno schema nel quale alcuni link sono visualmente separati da altri.Flexbox, {{cssxref("margin")}}
Navigazione a bricioleCreare una lista di links che perrmette il visitatore di navigare inditro nella gerarchia della pagina.Flexbox
- -

Contribuire al ricettario

- -

Come  con tutto il MDM ci piacerebbe se contribuisci ricette nello stesso formato a quelle mostrate sopra. Guarda questa pagina per trovare un template e delle linee guida per scrivere il tuo esempio.

diff --git a/files/it/web/css/selettore_figli_diretti/index.html b/files/it/web/css/selettore_figli_diretti/index.html deleted file mode 100644 index cf2903dbc9..0000000000 --- a/files/it/web/css/selettore_figli_diretti/index.html +++ /dev/null @@ -1,121 +0,0 @@ ---- -title: Selettore di Figli Diretti -slug: Web/CSS/selettore_figli_diretti -tags: - - compinatori css - - selettore di figli diretti -translation_of: Web/CSS/Child_combinator ---- -
{{CSSRef("Selectors")}}
- -
Il combinatore ">" separa due selettori selezionando solo quegli elementi selezionati con il secondo selettore che sono figli diretti del primo selettore.
- -
 
- -
Al contrario, quando due selettori sono combinati con il selettore discendente, vengono selezionati tutti gli elementi che soddisfano il secondo selettore per il quale esiste un elemento antenato definito dal primo selettore, indipendentemente dal numero di "salti" attraverso l'albero DOM.
- -
 
- -

Sintassi

- -
selettore1 > selettore2 {stili CSS }
-
- -

Esempio

- -
span { background-color: white; }
-div > span {
-  background-color: DodgerBlue;
-}
-
- -
<div>
-  <span>Span 1. In the div.
-    <span>Span 2. In the span that's in the div.</span>
-  </span>
-  <span>Span 3. In the div</span>
-</div>
-
-<span>Span 4. Not in a div at all.</span>
-
- -

{{EmbedLiveSample("Example", 200, 100)}}

- -

Specifiche

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('CSS4 Selectors', '#child-combinators', 'child combinator')}}{{Spec2('CSS4 Selectors')}} 
{{SpecName('CSS3 Selectors', '#child-combinators', 'child combinators')}}{{Spec2('CSS3 Selectors')}}No change
{{SpecName('CSS2.1', 'selector.html#child-selectors', 'child selectors')}}{{Spec2('CSS2.1')}}Initial definition
- -

Compatibilità tra i browser

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
supporto di base{{CompatVersionUnknown}}{{CompatVersionUnknown}}7.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
supporto di base{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
diff --git a/files/it/web/demos_of_open_web_technologies/index.html b/files/it/web/demos_of_open_web_technologies/index.html new file mode 100644 index 0000000000..2244c73297 --- /dev/null +++ b/files/it/web/demos_of_open_web_technologies/index.html @@ -0,0 +1,136 @@ +--- +title: Esempi di tecnologie web open +slug: Web/Esempi_di_tecnologie_web_open +translation_of: Web/Demos_of_open_web_technologies +--- +

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.

+ +

Se sei al corrente di esempi ben fatti o di applicazioni che fanno uso di tecnologia web open, per favore aggiungi un link nella sezione appropriata.

+ +

Grafica 2D

+ +

Canvas

+ + + +

SVG

+ + + +

Video

+ + + +

Grafica 3D

+ +

WebGL

+ + + +

Realtà Virtuale

+ + + +

CSS

+ + + +

Trasformazioni

+ + + +

Giochi

+ + + +

HTML

+ + + +

Web APIs

+ + + +

Notifications API

+ + + + + +

Web Audio API

+ + + +

File API

+ + + +

Web Workers

+ + diff --git a/files/it/web/esempi_di_tecnologie_web_open/index.html b/files/it/web/esempi_di_tecnologie_web_open/index.html deleted file mode 100644 index 2244c73297..0000000000 --- a/files/it/web/esempi_di_tecnologie_web_open/index.html +++ /dev/null @@ -1,136 +0,0 @@ ---- -title: Esempi di tecnologie web open -slug: Web/Esempi_di_tecnologie_web_open -translation_of: Web/Demos_of_open_web_technologies ---- -

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.

- -

Se sei al corrente di esempi ben fatti o di applicazioni che fanno uso di tecnologia web open, per favore aggiungi un link nella sezione appropriata.

- -

Grafica 2D

- -

Canvas

- - - -

SVG

- - - -

Video

- - - -

Grafica 3D

- -

WebGL

- - - -

Realtà Virtuale

- - - -

CSS

- - - -

Trasformazioni

- - - -

Giochi

- - - -

HTML

- - - -

Web APIs

- - - -

Notifications API

- - - - - -

Web Audio API

- - - -

File API

- - - -

Web Workers

- - diff --git a/files/it/web/events/domcontentloaded/index.html b/files/it/web/events/domcontentloaded/index.html deleted file mode 100644 index 9b2cf7467e..0000000000 --- a/files/it/web/events/domcontentloaded/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: DOMContentLoaded event -slug: Web/Events/DOMContentLoaded -tags: - - Evento - - Referenza - - Web - - eventi -translation_of: Web/API/Window/DOMContentLoaded_event ---- -
{{APIRef}}
- -

L'evento DOMContentLoaded si attiva quando il documento HTML iniziale è stato completamente caricato e analizzato, senza attendere che i fogli di stile, le immagini e i sottoframe finiscano di caricarsi.

- - - - - - - - - - - - - - - - - - - - -
BubblingSì
CancellabileSì (anche se specificato come evento semplice che non è cancellabile)
Interfaccia{{domxref("Event")}}
Proprietà dell'handlerNessuna
- -

L'obiettivo originale per questo evento è il Document che è stato caricato. È possibile ascoltare questo evento nell'interfaccia Window per gestirlo nelle fasi di capturing o bubbling. Per i dettagli completi su questo evento, consulta la pagina sull'evento Document: DOMContentLoaded.

- -

Un evento diverso, load, dovrebbe essere utilizzato solo per rilevare una pagina completamente caricata. È un errore comune utilizzare load dove DOMContentLoaded sarebbe più appropriato.

- -

Esempi

- -

Utilizzo di base

- -
document.addEventListener('DOMContentLoaded', (event) => {
-    console.log('DOM completamente caricato e analizzato');
-});
-
- -

Specifiche

- - - - - - - - - - - - -
SpecificaStato
{{SpecName('HTML WHATWG', 'indices.html#event-domcontentloaded')}}{{Spec2('HTML WHATWG')}}
- -

Compatibilità con i browser

- - - -

{{Compat("api.Window.DOMContentLoaded_event")}}

- -

Vedi anche

- - diff --git a/files/it/web/events/load/index.html b/files/it/web/events/load/index.html deleted file mode 100644 index 2939f32c27..0000000000 --- a/files/it/web/events/load/index.html +++ /dev/null @@ -1,123 +0,0 @@ ---- -title: load -slug: Web/Events/load -tags: - - CompatibilitàBrowser - - Evento -translation_of: Web/API/Window/load_event ---- -

L'evento load si attiva quando una risorsa e le sue risorse dipendenti hanno completato il caricamento.

- -

Esempi

- -

Window

- -
<script>
-  window.addEventListener("load", function(event) {
-    console.log("Tutte le risorse hanno terminato il caricamento!");
-  });
-</script>
- -

L'elemento script

- -
<script>
-  var script = document.createElement("script");
-  script.addEventListener("load", function(event) {
-    console.log("Lo script ha terminato il caricamento e l'esecuzione");
-  });
-  script.src = "http://example.com/example.js";
-  script.async = true;
-  document.getElementsByTagName("script")[0].parentNode.appendChild(script);
-</script>
- -

Info generali

- -
-
Specifica
-
DOM L3
-
Interfaccia
-
UIEvent
-
Bubbles
-
No
-
Cancelable
-
No
-
Target
-
Window, Document, Element
-
Azione predefinita
-
Nessuna.
-
- -

Proprietà

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ProprietàTipoDescrizione
target {{readonlyInline}}{{domxref("EventTarget")}}Il target dell'evento (l'obiettivo più in alto nell'albero del DOM).
type {{readonlyInline}}{{domxref("DOMString")}}Il tipo di evento.
bubbles {{readonlyInline}}{{domxref("Boolean")}}Se l'evento normalmente bolle o no.
cancelable {{readonlyInline}}{{domxref("Boolean")}}Se l'evento è cancellabile o meno.
view {{readonlyInline}}{{domxref("WindowProxy")}}{{domxref("Document.defaultView", "document.defaultView")}} (window del documento)
detail {{readonlyInline}}long (float)0
- -

Specifiche

- - - - - - - - - - - - - - - - - - - -
SpecificaStatoCommento
{{SpecName('UI Events', '#event-type-load', 'load')}}{{Spec2('UI Events')}} 
{{SpecName('HTML WHATWG', 'parsing.html#the-end:event-load', 'Load event')}}{{Spec2('HTML WHATWG')}}Questo collega alla sezione nei passaggi che vengono eseguiti alla fine del caricamento di un documento. gli eventi di "caricamento" vengono attivati anche a molti elementi. E nota che ci sono molti punti nelle specifiche che fanno riferimento a cose che possono "ritardare l'evento load".
- -

Eventi correlati

- - diff --git a/files/it/web/guide/ajax/getting_started/index.html b/files/it/web/guide/ajax/getting_started/index.html new file mode 100644 index 0000000000..f473f64d1e --- /dev/null +++ b/files/it/web/guide/ajax/getting_started/index.html @@ -0,0 +1,252 @@ +--- +title: Iniziare +slug: Web/Guide/AJAX/Iniziare +tags: + - AJAX + - Tutte_le_categorie +translation_of: Web/Guide/AJAX/Getting_Started +--- +

 

+ +

Questo articolo spiega le fondamenta di AJAX e fornisce due semplici esempi per iniziare.

+ +

Cos'è AJAX?

+ +

AJAX (Asynchronous JavaScript and XML) è un termine coniato recentemente per descrivere due utili funzionalità che sono presenti nei browser da anni, ma che sono state sottovalutate dalla maggioranza degli sviluppatori web fino a quando, di recente, alcune applicazioni come Gmail, Google suggest e Google Maps le hanno portate in auge.

+ +

Le funzionalità di cui stiamo parlando sono:

+ + + +

Passo 1 – Dì "per favore", o Come fare una richiesta HTTP

+ +

Per effettuare una richiesta HTTP al server utilizzando JavaScript, si utilizza un'istanza di una classe che fornisce detta funzionalità. Tale classe è stata introdotta originariamente in Internet Explorer come oggetto ActiveX e si chiamava XMLHTTP. Successivamente Mozilla, Safari e altri browser hanno implementato la classe XMLHttpRequest, che supporta gli stessi metodi e le stesse proprietà della classe di Microsoft.

+ +

Il risultato è che per creare un'istanza (oggetto) da tale classe che funzioni sui diversi browser, occorre scrivere un codice simile al seguente:

+ +
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
+    http_request = new XMLHttpRequest();
+} else if (window.ActiveXObject) { // IE
+    http_request = new ActiveXObject("Microsoft.XMLHTTP");
+}
+
+ +

(Per scopi illustrativi, il codice qui riportato è una versione leggermente semplificata del codice generalmente utilizzato per creare un'istanza XMLHTTP. Per un esempio più pratico, si veda il Passo 3 di questo articolo)

+ +

Certe versioni di alcuni browser della famiglia Mozilla, non si comportano correttamente nel caso in cui la risposta del server non contiene un'intestazione HTTP mime-type. Per ovviare a questo problema, è possibile utilizzare un metodo aggiuntive per sovrascrivere l'header inviato dal server, nel caso non sia presente o non sia impostato a text/xml.

+ +
http_request = new XMLHttpRequest();
+http_request.overrideMimeType('text/xml');
+
+ +

Dopodichè occorre decidere cosa fare con la risposta inviata dal server. Quindi bisogna dire all'oggetto XMLHttpRequest quale funzione JavaScript elaborerà il codice XML. Questo si fa impostando la proprietà onreadystatechange dell'oggetto con il nome della funzione JavaScript, in questo modo:

+ +

http_request.onreadystatechange = nomeFunzione;

+ +

Si noti che non ci sono parentesi dopo il nome della funzione e non viene passato alcun parametro, perchè si sta semplicemente assegnando un riferimento alla funzione, non la si sta ancora chiamando. Inoltre, invece di passare il nome di una funzione, si potrebbe utilizzare la tecnica JavaScript di definire funzioni "al volo" e di definire le azioni che elaboreranno la risposta XML, in questo modo:

+ +
http_request.onreadystatechange = function(){
+    // azioni da eseguire...
+};
+
+ +

Dopo aver dichiarato ciò che accadrà quando si riceverà la risposta dal server, occorre inviare la richiesta. Bisogna chiamare i metodi open() e send() della classe che esegue le richieste, in questo modo:

+ +
http_request.open('GET', 'http://www.esempio.org/qualsiasi.file', true);
+http_request.send(null);
+
+ + + +

Il parametro del metodo send() è costituito dai dati che si vogliono inviare al server se la richiesta è di tipo POST. I dati vengono passati sotto forma di querystring, così:

+ +

nome1=valore1&nome2=valore2&ecc=ecc

+ +

Si noti che se si desidera inviare i dati come POST, occorre modificare il tipo MIME della richiesta con la riga seguente:

+ +
http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+
+ +

In caso contrario, il server ignorerà la richiesta.

+ +

Step 2 – "Via!" o Come gestire la risposta del server

+ +

Come si è detto, all'atto di inviare la richiesta, si è fornito il nome della funzione JavaScript che deve elaborare la risposta.

+ +

http_request.onreadystatechange = nomeFunzione;

+ +

Ma cosa dovrebbe fare questa funzione? Primo, la funzione deve controllare lo stato della richiesta. Se lo stato ha un valore di 4, significa che la risposta è stata ricevuta per intero e si può continuare l'elaborazione:

+ +

 

+ +
if (http_request.readyState == 4) {
+    // tutto a posto, la risposta è stata ricevuta
+} else {
+    // non sono ancora pronto
+}
+
+ +

Ecco la lista completa dei possibili valori di readyState:

+ + + +

(Fonte) (1)

+ +

Bisognerà poi controllare il codice di stato della risposta HTTP. Tutti i codici possibili sono elencati nel sito del W3C. Per i nostri scopi, ci interessa soltanto il codice 200 OK.

+ +
if (http_request.status == 200) {
+    // perfetto!
+} else {
+    // c'è stato un problema nella richiesta,
+    // per esempio un codice di errore 404 (Not Found)
+    // o 500 (Internal Server Error)
+}
+
+ +

Una volta controllati lo stato della richiesta e il codice di stato HTTP della risposta, sarà lo sviluppatore a decidere cosa desidera fare con i dati ricevuti dal server. Per accedere ad essi, vi sono due possibilità:

+ + + +

Passo 3 - "Tutti insieme ora!", Un semplice esempio

+ +

Vediamo ora tutti gli elementi esaminati finora combinati insieme. Il seguente JavaScript richiede un documento HTML (test.html), che contiene il testo "Sono un test.", e farà un alert() coi contenuti di questo file.

+ +
<script type="text/javascript" language="javascript">
+
+
+
+    function eseguiRichiesta(url) {
+
+        var http_request = false;
+
+        if (window.XMLHttpRequest) { // Mozilla, Safari,...
+            http_request = new XMLHttpRequest();
+            if (http_request.overrideMimeType) {
+                http_request.overrideMimeType('text/xml');
+                // Vedi note sotto
+            }
+        } else if (window.ActiveXObject) { // IE
+            try {
+                http_request = new ActiveXObject("Msxml2.XMLHTTP");
+            } catch (e) {
+                try {
+                    http_request = new ActiveXObject("Microsoft.XMLHTTP");
+                } catch (e) {}
+            }
+        }
+
+        if (!http_request) {
+            alert('Giving up :( Non riesco a creare una istanza XMLHTTP');
+            return false;
+        }
+        http_request.onreadystatechange = function() { alertContents(http_request); };
+        http_request.open('GET', url, true);
+        http_request.send(null);
+
+    }
+
+    function alertContents(http_request) {
+
+        if (http_request.readyState == 4) {
+            if (http_request.status == 200) {
+                alert(http_request.responseText);
+            } else {
+                alert('Si è verificato un problema con la richiesta');
+            }
+        }
+
+    }
+</script>
+<span
+    style="cursor: pointer; text-decoration: underline"
+    onclick="eseguiRichiesta('test.html')">
+        Fai una richiesta
+</span>
+
+ +

In questo esempio:

+ + + +

Si può provare questo esempio qui e si può leggere il file "test.html" qui.

+ +

Nota: La riga di codice http_request.overrideMimeType('text/xml'); causa degli errori nella Console JavaScript di Firefox 1.5 o superiore nel caso che la pagina chiamata non sia costituita da XML ben formato (come in questo caso). Questo comportamento è corretto ed è documentato qui: https://bugzilla.mozilla.org/show_bug.cgi?id=311724 - l'articolo verrà rivisto per correggere questo errore.

+ +

Nota 2: se si invia una richiesta con una porzione di codice che restituisce XML e non un file XML statico, bisogna impostare alcune intestazioni nella risposta perchè la pagina funzioni anche su Internet Explorer. Se non si imposta l'intestazione Content-Type: application/xml, IE lancia un errore JavaScript 'Object Expected' appena si cerca di accedere a un elemento XML. Se non si imposta l'intestazione Cache-Control: no-cache, il browser registra la risposta nella cache e non rieseguirà più la richiesta, il che fa impazzire molti sviluppatori in fase di debugging.

+ +

Nota 3: se la variabile http_request è globale, se vi sono altre funzioni che chiamano makeRequest(), possono sovrasciversi a vicenda. Per evitare questo problema, occorre dichiarare questa variabile come locale e passarla alla funzione alertContent().

+ +

Nota 4: nel registrare la funzione callback per onreadystatechange non è possibile passare alcun argomento:

+ +
http_request.onreadystatechange = function() { alertContents(http_request); };  //1 (richiesta simultanea)
+http_request.onreadystatechange = alertContents(http_request); //2 (non funziona)
+http_request.onreadystatechange = alertContents;  //3 (variabile globale)
+
+ +

Il metodo 1 permette di elaborare diverse richieste simultaneamente. Il metodo 2 non funziona. Il metodo 3 è da utilizzare se http_request è una variabile globale.

+ +

Passo 4 - "Gli X-Files", o Elaborare la risposta XML

+ +

Nell'esempio precedente, dopo che la risposta HTTP è stata ricevuta si è utilizzata la proprietà reponseText dell'oggetto richiesta, che conteneva i contenuti del file <tt>test.html</tt>. Proveremo ora a utilizzare la proprietà responseXML.

+ +

Prima di tutto, occorre creare un documento XML valido che verrà chiamato in seguito. Il documento (<tt>test.xml</tt>) contiene quanto segue:

+ +
<?xml version="1.0" ?>
+<root>
+    Sono un test.
+</root>
+
+ +

Nello script occorre cambiare soltanto la riga seguente:

+ +
...
+onclick="eseguiRichiesta('test.xml')">
+...
+
+ +

In alertContents(), bisogna poi sostituire la riga alert(http_request.responseText); con:

+ +
var xmldoc = http_request.responseXML;
+var root_node = xmldoc.getElementsByTagName('root').item(0);
+alert(root_node.firstChild.data);
+
+ +

Questo codice prende l'oggetto XMLDocument fornito da responseXML e utilizza i metodi DOM per accedere ai dati contenuti nel documento XML. Si può vedere test.xml qui. Si può vedere in azione questa versione dello script qui.

+ +

Per ulteriori dettagli sui metodi DOM, si vedano i documenti sull'Implementazione DOM di Mozilla.

+ +
+

La bozza di standard del W3C indica i seguenti valori per la proprietà readystate:

+ + + +

Fonte

+ +

{{ languages( { "ca": "ca/AJAX/Primers_passos", "de": "de/AJAX/Getting_Started", "en": "en/AJAX/Getting_Started", "es": "es/AJAX/Primeros_Pasos", "fr": "fr/AJAX/Premiers_pas", "ja": "ja/AJAX/Getting_Started", "pl": "pl/AJAX/Na_pocz\u0105tek", "pt": "pt/AJAX/Como_come\u00e7ar" } ) }}

diff --git a/files/it/web/guide/ajax/iniziare/index.html b/files/it/web/guide/ajax/iniziare/index.html deleted file mode 100644 index f473f64d1e..0000000000 --- a/files/it/web/guide/ajax/iniziare/index.html +++ /dev/null @@ -1,252 +0,0 @@ ---- -title: Iniziare -slug: Web/Guide/AJAX/Iniziare -tags: - - AJAX - - Tutte_le_categorie -translation_of: Web/Guide/AJAX/Getting_Started ---- -

 

- -

Questo articolo spiega le fondamenta di AJAX e fornisce due semplici esempi per iniziare.

- -

Cos'è AJAX?

- -

AJAX (Asynchronous JavaScript and XML) è un termine coniato recentemente per descrivere due utili funzionalità che sono presenti nei browser da anni, ma che sono state sottovalutate dalla maggioranza degli sviluppatori web fino a quando, di recente, alcune applicazioni come Gmail, Google suggest e Google Maps le hanno portate in auge.

- -

Le funzionalità di cui stiamo parlando sono:

- - - -

Passo 1 – Dì "per favore", o Come fare una richiesta HTTP

- -

Per effettuare una richiesta HTTP al server utilizzando JavaScript, si utilizza un'istanza di una classe che fornisce detta funzionalità. Tale classe è stata introdotta originariamente in Internet Explorer come oggetto ActiveX e si chiamava XMLHTTP. Successivamente Mozilla, Safari e altri browser hanno implementato la classe XMLHttpRequest, che supporta gli stessi metodi e le stesse proprietà della classe di Microsoft.

- -

Il risultato è che per creare un'istanza (oggetto) da tale classe che funzioni sui diversi browser, occorre scrivere un codice simile al seguente:

- -
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
-    http_request = new XMLHttpRequest();
-} else if (window.ActiveXObject) { // IE
-    http_request = new ActiveXObject("Microsoft.XMLHTTP");
-}
-
- -

(Per scopi illustrativi, il codice qui riportato è una versione leggermente semplificata del codice generalmente utilizzato per creare un'istanza XMLHTTP. Per un esempio più pratico, si veda il Passo 3 di questo articolo)

- -

Certe versioni di alcuni browser della famiglia Mozilla, non si comportano correttamente nel caso in cui la risposta del server non contiene un'intestazione HTTP mime-type. Per ovviare a questo problema, è possibile utilizzare un metodo aggiuntive per sovrascrivere l'header inviato dal server, nel caso non sia presente o non sia impostato a text/xml.

- -
http_request = new XMLHttpRequest();
-http_request.overrideMimeType('text/xml');
-
- -

Dopodichè occorre decidere cosa fare con la risposta inviata dal server. Quindi bisogna dire all'oggetto XMLHttpRequest quale funzione JavaScript elaborerà il codice XML. Questo si fa impostando la proprietà onreadystatechange dell'oggetto con il nome della funzione JavaScript, in questo modo:

- -

http_request.onreadystatechange = nomeFunzione;

- -

Si noti che non ci sono parentesi dopo il nome della funzione e non viene passato alcun parametro, perchè si sta semplicemente assegnando un riferimento alla funzione, non la si sta ancora chiamando. Inoltre, invece di passare il nome di una funzione, si potrebbe utilizzare la tecnica JavaScript di definire funzioni "al volo" e di definire le azioni che elaboreranno la risposta XML, in questo modo:

- -
http_request.onreadystatechange = function(){
-    // azioni da eseguire...
-};
-
- -

Dopo aver dichiarato ciò che accadrà quando si riceverà la risposta dal server, occorre inviare la richiesta. Bisogna chiamare i metodi open() e send() della classe che esegue le richieste, in questo modo:

- -
http_request.open('GET', 'http://www.esempio.org/qualsiasi.file', true);
-http_request.send(null);
-
- - - -

Il parametro del metodo send() è costituito dai dati che si vogliono inviare al server se la richiesta è di tipo POST. I dati vengono passati sotto forma di querystring, così:

- -

nome1=valore1&nome2=valore2&ecc=ecc

- -

Si noti che se si desidera inviare i dati come POST, occorre modificare il tipo MIME della richiesta con la riga seguente:

- -
http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
-
- -

In caso contrario, il server ignorerà la richiesta.

- -

Step 2 – "Via!" o Come gestire la risposta del server

- -

Come si è detto, all'atto di inviare la richiesta, si è fornito il nome della funzione JavaScript che deve elaborare la risposta.

- -

http_request.onreadystatechange = nomeFunzione;

- -

Ma cosa dovrebbe fare questa funzione? Primo, la funzione deve controllare lo stato della richiesta. Se lo stato ha un valore di 4, significa che la risposta è stata ricevuta per intero e si può continuare l'elaborazione:

- -

 

- -
if (http_request.readyState == 4) {
-    // tutto a posto, la risposta è stata ricevuta
-} else {
-    // non sono ancora pronto
-}
-
- -

Ecco la lista completa dei possibili valori di readyState:

- - - -

(Fonte) (1)

- -

Bisognerà poi controllare il codice di stato della risposta HTTP. Tutti i codici possibili sono elencati nel sito del W3C. Per i nostri scopi, ci interessa soltanto il codice 200 OK.

- -
if (http_request.status == 200) {
-    // perfetto!
-} else {
-    // c'è stato un problema nella richiesta,
-    // per esempio un codice di errore 404 (Not Found)
-    // o 500 (Internal Server Error)
-}
-
- -

Una volta controllati lo stato della richiesta e il codice di stato HTTP della risposta, sarà lo sviluppatore a decidere cosa desidera fare con i dati ricevuti dal server. Per accedere ad essi, vi sono due possibilità:

- - - -

Passo 3 - "Tutti insieme ora!", Un semplice esempio

- -

Vediamo ora tutti gli elementi esaminati finora combinati insieme. Il seguente JavaScript richiede un documento HTML (test.html), che contiene il testo "Sono un test.", e farà un alert() coi contenuti di questo file.

- -
<script type="text/javascript" language="javascript">
-
-
-
-    function eseguiRichiesta(url) {
-
-        var http_request = false;
-
-        if (window.XMLHttpRequest) { // Mozilla, Safari,...
-            http_request = new XMLHttpRequest();
-            if (http_request.overrideMimeType) {
-                http_request.overrideMimeType('text/xml');
-                // Vedi note sotto
-            }
-        } else if (window.ActiveXObject) { // IE
-            try {
-                http_request = new ActiveXObject("Msxml2.XMLHTTP");
-            } catch (e) {
-                try {
-                    http_request = new ActiveXObject("Microsoft.XMLHTTP");
-                } catch (e) {}
-            }
-        }
-
-        if (!http_request) {
-            alert('Giving up :( Non riesco a creare una istanza XMLHTTP');
-            return false;
-        }
-        http_request.onreadystatechange = function() { alertContents(http_request); };
-        http_request.open('GET', url, true);
-        http_request.send(null);
-
-    }
-
-    function alertContents(http_request) {
-
-        if (http_request.readyState == 4) {
-            if (http_request.status == 200) {
-                alert(http_request.responseText);
-            } else {
-                alert('Si è verificato un problema con la richiesta');
-            }
-        }
-
-    }
-</script>
-<span
-    style="cursor: pointer; text-decoration: underline"
-    onclick="eseguiRichiesta('test.html')">
-        Fai una richiesta
-</span>
-
- -

In questo esempio:

- - - -

Si può provare questo esempio qui e si può leggere il file "test.html" qui.

- -

Nota: La riga di codice http_request.overrideMimeType('text/xml'); causa degli errori nella Console JavaScript di Firefox 1.5 o superiore nel caso che la pagina chiamata non sia costituita da XML ben formato (come in questo caso). Questo comportamento è corretto ed è documentato qui: https://bugzilla.mozilla.org/show_bug.cgi?id=311724 - l'articolo verrà rivisto per correggere questo errore.

- -

Nota 2: se si invia una richiesta con una porzione di codice che restituisce XML e non un file XML statico, bisogna impostare alcune intestazioni nella risposta perchè la pagina funzioni anche su Internet Explorer. Se non si imposta l'intestazione Content-Type: application/xml, IE lancia un errore JavaScript 'Object Expected' appena si cerca di accedere a un elemento XML. Se non si imposta l'intestazione Cache-Control: no-cache, il browser registra la risposta nella cache e non rieseguirà più la richiesta, il che fa impazzire molti sviluppatori in fase di debugging.

- -

Nota 3: se la variabile http_request è globale, se vi sono altre funzioni che chiamano makeRequest(), possono sovrasciversi a vicenda. Per evitare questo problema, occorre dichiarare questa variabile come locale e passarla alla funzione alertContent().

- -

Nota 4: nel registrare la funzione callback per onreadystatechange non è possibile passare alcun argomento:

- -
http_request.onreadystatechange = function() { alertContents(http_request); };  //1 (richiesta simultanea)
-http_request.onreadystatechange = alertContents(http_request); //2 (non funziona)
-http_request.onreadystatechange = alertContents;  //3 (variabile globale)
-
- -

Il metodo 1 permette di elaborare diverse richieste simultaneamente. Il metodo 2 non funziona. Il metodo 3 è da utilizzare se http_request è una variabile globale.

- -

Passo 4 - "Gli X-Files", o Elaborare la risposta XML

- -

Nell'esempio precedente, dopo che la risposta HTTP è stata ricevuta si è utilizzata la proprietà reponseText dell'oggetto richiesta, che conteneva i contenuti del file <tt>test.html</tt>. Proveremo ora a utilizzare la proprietà responseXML.

- -

Prima di tutto, occorre creare un documento XML valido che verrà chiamato in seguito. Il documento (<tt>test.xml</tt>) contiene quanto segue:

- -
<?xml version="1.0" ?>
-<root>
-    Sono un test.
-</root>
-
- -

Nello script occorre cambiare soltanto la riga seguente:

- -
...
-onclick="eseguiRichiesta('test.xml')">
-...
-
- -

In alertContents(), bisogna poi sostituire la riga alert(http_request.responseText); con:

- -
var xmldoc = http_request.responseXML;
-var root_node = xmldoc.getElementsByTagName('root').item(0);
-alert(root_node.firstChild.data);
-
- -

Questo codice prende l'oggetto XMLDocument fornito da responseXML e utilizza i metodi DOM per accedere ai dati contenuti nel documento XML. Si può vedere test.xml qui. Si può vedere in azione questa versione dello script qui.

- -

Per ulteriori dettagli sui metodi DOM, si vedano i documenti sull'Implementazione DOM di Mozilla.

- -
-

La bozza di standard del W3C indica i seguenti valori per la proprietà readystate:

- - - -

Fonte

- -

{{ languages( { "ca": "ca/AJAX/Primers_passos", "de": "de/AJAX/Getting_Started", "en": "en/AJAX/Getting_Started", "es": "es/AJAX/Primeros_Pasos", "fr": "fr/AJAX/Premiers_pas", "ja": "ja/AJAX/Getting_Started", "pl": "pl/AJAX/Na_pocz\u0105tek", "pt": "pt/AJAX/Como_come\u00e7ar" } ) }}

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

{{draft}}

-

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

-

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

-

{{LandingPageListSubpages}}

-

Pages elsewhere

-

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

-

See also

- diff --git a/files/it/web/guide/html/categorie_di_contenuto/index.html b/files/it/web/guide/html/categorie_di_contenuto/index.html deleted file mode 100644 index 94eae32320..0000000000 --- a/files/it/web/guide/html/categorie_di_contenuto/index.html +++ /dev/null @@ -1,141 +0,0 @@ ---- -title: Categorie di contenuto -slug: Web/Guide/HTML/Categorie_di_contenuto -translation_of: Web/Guide/HTML/Content_categories ---- -

Ciascun elemento HTML deve rispettare le regole che definiscono che tipo di contenuto può avere. Queste regole sono raggruppate in modelli di contenuto comuni a diversi elementi. 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.

- -

Vi sono tre tipi di categorie di contenuto:

- - - -
Content_categories_venn.png
- -

Categorie di contenuto principale

- -

Contenuto di Metadati

- -

Gli elementi appartenenti alla categoria dei metadati modificano la presentazione o il comportamento del resto del documento, impostano collegamenti ad altri documenti, o comunicano altre informazioni non in linea.

- -

Gli elementi che appartengono a questa categoria sono {{HTMLElement("base")}}, {{HTMLElement("command")}}, {{HTMLElement("link")}}, {{HTMLElement("meta")}}, {{HTMLElement("noscript")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} e {{HTMLElement("title")}}.

- -

Contenuto di flusso

- -

Gli elementi che appartengono alla catogoria dei contenuti di flusso tipicamente contengono testo o altri contenuti. Essi sono: {{HTMLElement("a")}}, {{HTMLElement("abbr")}}, {{HTMLElement("address")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}}, {{HTMLElement("bdo")}}, {{HTMLElement("blockquote")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{HTMLElement("command")}}, {{HTMLElement("datalist")}}, {{HTMLElement("del")}}, {{HTMLElement("details")}}, {{HTMLElement("dfn")}}, {{HTMLElement("div")}}, {{HTMLElement("dl")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}}, {{HTMLElement("footer")}}, {{HTMLElement("form")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("header")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("hr")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("ins")}}, {{HTMLElement("kbd")}}, {{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("map")}}, {{HTMLElement("mark")}}, {{MathMLElement("math")}}, {{HTMLElement("menu")}}, {{HTMLElement("meter")}}, {{HTMLElement("nav")}}, {{HTMLElement("noscript")}}, {{HTMLElement("object")}}, {{HTMLElement("ol")}}, {{HTMLElement("output")}}, {{HTMLElement("p")}}, {{HTMLElement("pre")}}, {{HTMLElement("progress")}}, {{HTMLElement("q")}}, {{HTMLElement("ruby")}}, {{HTMLElement("samp")}}, {{HTMLElement("script")}}, {{HTMLElement("section")}}, {{HTMLElement("select")}}, {{HTMLElement("small")}}, {{HTMLElement("span")}}, {{HTMLElement("strong")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{HTMLElement("svg")}}, {{HTMLElement("table")}}, {{HTMLElement("textarea")}}, {{HTMLElement("time")}}, {{HTMLElement("ul")}}, {{HTMLElement("var")}}, {{HTMLElement("video")}}, {{HTMLElement("wbr")}} e Text.

- -

Pochi altri elementi appartengono a questa categoria, ma solo in determinale condizioni:

- - - -

Contenuto di sezione

- -

Gli elementi che appartengono ai modelli di contenuti di sezione creano una sezione nell'attuale contorno che definisce gli'ambiti degli elementi  {{HTMLElement("header")}} , degli elementi {{HTMLElement("footer")}} , e dei contenuti di intestazione.

- -

Elementi appartenenti a questa categoria sono {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("nav")}} e {{HTMLElement("section")}}. 

- -
-

Nota: non confondere questo modello di contenuto con la categoria  sezione radice , che isola il suo contenuto dal regolare contorno.

-
- -

Contenuto di intestazione

- -

Il contenuto di intestazione definisce il titolo della sezione, se contrassegnato da un esplicito elemento di contenuto di intestazione  o implicitamente definito da un contenuto di intestazione.

- -

Elementi appartenenti a questa categoria sono {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}} e {{HTMLElement("hgroup")}}.

- -
-

Nota: Consideralo possibilmente come un contenuto di intestazione, l' {{HTMLElement("header")}} non è un contenuto di intestazione.

-
- -

Contenuto di enunciazione

- -

Il contenuto di enunciazione definisce il testo e la marcatura che essa contiene.Si appropria del contenuto di Enunciazione dei paragrafi.

- -

Elementi appartenenti a questa categoria sono {{HTMLElement("abbr")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{HTMLElement("command")}}, {{HTMLElement("datalist")}}, {{HTMLElement("dfn")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("kbd")}}, {{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("mark")}}, {{MathMLElement("math")}}, {{HTMLElement("meter")}}, {{HTMLElement("noscript")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("q")}}, {{HTMLElement("ruby")}}, {{HTMLElement("samp")}}, {{HTMLElement("script")}}, {{HTMLElement("select")}}, {{HTMLElement("small")}}, {{HTMLElement("span")}}, {{HTMLElement("strong")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{SVGElement("svg")}}, {{HTMLElement("textarea")}}, {{HTMLElement("time")}}, {{HTMLElement("var")}}, {{HTMLElement("video")}}, {{HTMLElement("wbr")}} e il puro text (che non consiste soltanto nello spazio bianco dei caratteri).

- -

Molte altri elementi appartengono da questa categoria,ma solo se vengono soddisfatte delle specifiche condizioni:

- - - -

Contenuto integrato

- -

Il contenuto integrato importa un'altra risorsa o inserisce contenuto da un'altro linguaggio di marcatura o un namespace nel documento.Elementi che appartengono a questa categoria includono: {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{MathMLElement("math")}}, {{HTMLElement("object")}}, {{HTMLElement("svg")}}, {{HTMLElement("video")}}.

- -

Contenuto interattivo

- -

Il contenuto interattivo include elementi che sono speficatamente progettati per l'interazione dell'utente. Elementi che provengono da questa categoria includono: {{HTMLElement("a")}}, {{HTMLElement("button")}}, {{HTMLElement("details")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("select")}}, e {{HTMLElement("textarea")}}.
- Alcuni elementi appartengono a questa categoria solo sotto  specifiche condizioni:

- - - -

Contenuto modulo-associato

- -

Il contento modulo-associato comprende elementi che ha un modulo beneficiario ,mostrato attraverso l'attributo form.Un beneficiario di un modulo  è o l'elemento contenente {{HTMLElement("form")}} o è l' elemento che ha id specificato nell'attributo form.

- - - -

 Questa categoria contiene diverse altre sotto-categorie:

- -
-
elencati
-
Elementi che sono elencati nel elementi.modulo ed il fieldset.Collezioni di elementi IDL. Contiene{{HTMLElement("button")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("select")}}, e {{HTMLElement("textarea")}}.
-
l'abilità labelable
-
Elementi che possono essere associati con elementi {{HTMLElement("label")}}. Contiene {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("meter")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("select")}}, e {{HTMLElement("textarea")}}.
-
Dati Inviabili tramite un form
-
Elementi che possono essere usati per costruire il modulo dati quando il modulo é stato inviato. Contiene {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, e {{HTMLElement("textarea")}}.
-
reset dei dati di un form
-
Elementi che possono essere usati per portare il form al reset delle impostazioni originarie.Contiene {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("output")}},{{HTMLElement("select")}}, e {{HTMLElement("textarea")}}.
-
- -

Modello di contenuto trasparente

- -

Se un elemento ha un modello di contenuto trasparente,allora i suoi contenuti possono essere strutturati come quelli validi in  HTML5, perfino se l'elemento trasparente era stato rimosso e rimpiazzato da elemento figlio.

- -

Per esempio, gli elementi {{HTMLElement("del")}} e {{HTMLELement("ins")}}sono trasparenti:

- -
<p>Tratteniamo queste verità per essere<del><em>consacrate &amp; innegabili</em></del> <ins>chiare</ins>.</p>
-
- -

Se quegli elementi verranno rimossi, questo frammento potrebbe essere ancora un valido HTML (anche se non in corretto italiano).

- -
<p>Tratteniamo queste verità per essere<del><em>consacrate &amp; innegabili</em></del> <ins>chiare</ins>.</p>
- -

Altri modelli di contenuto

- -

Sezione radice.

diff --git a/files/it/web/guide/html/content_categories/index.html b/files/it/web/guide/html/content_categories/index.html new file mode 100644 index 0000000000..94eae32320 --- /dev/null +++ b/files/it/web/guide/html/content_categories/index.html @@ -0,0 +1,141 @@ +--- +title: Categorie di contenuto +slug: Web/Guide/HTML/Categorie_di_contenuto +translation_of: Web/Guide/HTML/Content_categories +--- +

Ciascun elemento HTML deve rispettare le regole che definiscono che tipo di contenuto può avere. Queste regole sono raggruppate in modelli di contenuto comuni a diversi elementi. 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.

+ +

Vi sono tre tipi di categorie di contenuto:

+ + + +
Content_categories_venn.png
+ +

Categorie di contenuto principale

+ +

Contenuto di Metadati

+ +

Gli elementi appartenenti alla categoria dei metadati modificano la presentazione o il comportamento del resto del documento, impostano collegamenti ad altri documenti, o comunicano altre informazioni non in linea.

+ +

Gli elementi che appartengono a questa categoria sono {{HTMLElement("base")}}, {{HTMLElement("command")}}, {{HTMLElement("link")}}, {{HTMLElement("meta")}}, {{HTMLElement("noscript")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} e {{HTMLElement("title")}}.

+ +

Contenuto di flusso

+ +

Gli elementi che appartengono alla catogoria dei contenuti di flusso tipicamente contengono testo o altri contenuti. Essi sono: {{HTMLElement("a")}}, {{HTMLElement("abbr")}}, {{HTMLElement("address")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}}, {{HTMLElement("bdo")}}, {{HTMLElement("blockquote")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{HTMLElement("command")}}, {{HTMLElement("datalist")}}, {{HTMLElement("del")}}, {{HTMLElement("details")}}, {{HTMLElement("dfn")}}, {{HTMLElement("div")}}, {{HTMLElement("dl")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}}, {{HTMLElement("footer")}}, {{HTMLElement("form")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("header")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("hr")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("ins")}}, {{HTMLElement("kbd")}}, {{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("map")}}, {{HTMLElement("mark")}}, {{MathMLElement("math")}}, {{HTMLElement("menu")}}, {{HTMLElement("meter")}}, {{HTMLElement("nav")}}, {{HTMLElement("noscript")}}, {{HTMLElement("object")}}, {{HTMLElement("ol")}}, {{HTMLElement("output")}}, {{HTMLElement("p")}}, {{HTMLElement("pre")}}, {{HTMLElement("progress")}}, {{HTMLElement("q")}}, {{HTMLElement("ruby")}}, {{HTMLElement("samp")}}, {{HTMLElement("script")}}, {{HTMLElement("section")}}, {{HTMLElement("select")}}, {{HTMLElement("small")}}, {{HTMLElement("span")}}, {{HTMLElement("strong")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{HTMLElement("svg")}}, {{HTMLElement("table")}}, {{HTMLElement("textarea")}}, {{HTMLElement("time")}}, {{HTMLElement("ul")}}, {{HTMLElement("var")}}, {{HTMLElement("video")}}, {{HTMLElement("wbr")}} e Text.

+ +

Pochi altri elementi appartengono a questa categoria, ma solo in determinale condizioni:

+ + + +

Contenuto di sezione

+ +

Gli elementi che appartengono ai modelli di contenuti di sezione creano una sezione nell'attuale contorno che definisce gli'ambiti degli elementi  {{HTMLElement("header")}} , degli elementi {{HTMLElement("footer")}} , e dei contenuti di intestazione.

+ +

Elementi appartenenti a questa categoria sono {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("nav")}} e {{HTMLElement("section")}}. 

+ +
+

Nota: non confondere questo modello di contenuto con la categoria  sezione radice , che isola il suo contenuto dal regolare contorno.

+
+ +

Contenuto di intestazione

+ +

Il contenuto di intestazione definisce il titolo della sezione, se contrassegnato da un esplicito elemento di contenuto di intestazione  o implicitamente definito da un contenuto di intestazione.

+ +

Elementi appartenenti a questa categoria sono {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}} e {{HTMLElement("hgroup")}}.

+ +
+

Nota: Consideralo possibilmente come un contenuto di intestazione, l' {{HTMLElement("header")}} non è un contenuto di intestazione.

+
+ +

Contenuto di enunciazione

+ +

Il contenuto di enunciazione definisce il testo e la marcatura che essa contiene.Si appropria del contenuto di Enunciazione dei paragrafi.

+ +

Elementi appartenenti a questa categoria sono {{HTMLElement("abbr")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{HTMLElement("command")}}, {{HTMLElement("datalist")}}, {{HTMLElement("dfn")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("kbd")}}, {{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("mark")}}, {{MathMLElement("math")}}, {{HTMLElement("meter")}}, {{HTMLElement("noscript")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("q")}}, {{HTMLElement("ruby")}}, {{HTMLElement("samp")}}, {{HTMLElement("script")}}, {{HTMLElement("select")}}, {{HTMLElement("small")}}, {{HTMLElement("span")}}, {{HTMLElement("strong")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{SVGElement("svg")}}, {{HTMLElement("textarea")}}, {{HTMLElement("time")}}, {{HTMLElement("var")}}, {{HTMLElement("video")}}, {{HTMLElement("wbr")}} e il puro text (che non consiste soltanto nello spazio bianco dei caratteri).

+ +

Molte altri elementi appartengono da questa categoria,ma solo se vengono soddisfatte delle specifiche condizioni:

+ + + +

Contenuto integrato

+ +

Il contenuto integrato importa un'altra risorsa o inserisce contenuto da un'altro linguaggio di marcatura o un namespace nel documento.Elementi che appartengono a questa categoria includono: {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{MathMLElement("math")}}, {{HTMLElement("object")}}, {{HTMLElement("svg")}}, {{HTMLElement("video")}}.

+ +

Contenuto interattivo

+ +

Il contenuto interattivo include elementi che sono speficatamente progettati per l'interazione dell'utente. Elementi che provengono da questa categoria includono: {{HTMLElement("a")}}, {{HTMLElement("button")}}, {{HTMLElement("details")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("select")}}, e {{HTMLElement("textarea")}}.
+ Alcuni elementi appartengono a questa categoria solo sotto  specifiche condizioni:

+ + + +

Contenuto modulo-associato

+ +

Il contento modulo-associato comprende elementi che ha un modulo beneficiario ,mostrato attraverso l'attributo form.Un beneficiario di un modulo  è o l'elemento contenente {{HTMLElement("form")}} o è l' elemento che ha id specificato nell'attributo form.

+ + + +

 Questa categoria contiene diverse altre sotto-categorie:

+ +
+
elencati
+
Elementi che sono elencati nel elementi.modulo ed il fieldset.Collezioni di elementi IDL. Contiene{{HTMLElement("button")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("select")}}, e {{HTMLElement("textarea")}}.
+
l'abilità labelable
+
Elementi che possono essere associati con elementi {{HTMLElement("label")}}. Contiene {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("meter")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("select")}}, e {{HTMLElement("textarea")}}.
+
Dati Inviabili tramite un form
+
Elementi che possono essere usati per costruire il modulo dati quando il modulo é stato inviato. Contiene {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, e {{HTMLElement("textarea")}}.
+
reset dei dati di un form
+
Elementi che possono essere usati per portare il form al reset delle impostazioni originarie.Contiene {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("output")}},{{HTMLElement("select")}}, e {{HTMLElement("textarea")}}.
+
+ +

Modello di contenuto trasparente

+ +

Se un elemento ha un modello di contenuto trasparente,allora i suoi contenuti possono essere strutturati come quelli validi in  HTML5, perfino se l'elemento trasparente era stato rimosso e rimpiazzato da elemento figlio.

+ +

Per esempio, gli elementi {{HTMLElement("del")}} e {{HTMLELement("ins")}}sono trasparenti:

+ +
<p>Tratteniamo queste verità per essere<del><em>consacrate &amp; innegabili</em></del> <ins>chiare</ins>.</p>
+
+ +

Se quegli elementi verranno rimossi, questo frammento potrebbe essere ancora un valido HTML (anche se non in corretto italiano).

+ +
<p>Tratteniamo queste verità per essere<del><em>consacrate &amp; innegabili</em></del> <ins>chiare</ins>.</p>
+ +

Altri modelli di contenuto

+ +

Sezione radice.

diff --git a/files/it/web/guide/html/html5/index.html b/files/it/web/guide/html/html5/index.html new file mode 100644 index 0000000000..be6fc91a82 --- /dev/null +++ b/files/it/web/guide/html/html5/index.html @@ -0,0 +1,167 @@ +--- +title: HTML5 +slug: Web/HTML/HTML5 +translation_of: Web/Guide/HTML/HTML5 +--- +

HTML5 è l'ultima evoluzione dello standard che definisce HTML. Il termine rappresenta due concetti differenti:

+ + + +

Progettata per essere usabile da tutti gli sviluppatori Open Web, questa pagina di riferimento ha numerosi collegamenti a risorse riguardanti le tecnologie HTML5, classificate in diversi gruppi in base alla loro funzione.

+ + + +
+
+

Semantica

+ +
+
Sezioni e struttura in HTML5
+
Uno sguardo ai nuovi elementi di sezionamento e contorno in HTML5: {{HTMLElement("section")}} , {{HTMLElement("article")}} , {{HTMLElement("nav")}} , {{HTMLElement("header")}} , {{HTMLElement("footer")}} , {{HTMLElement("aside")}} e {{HTMLElement("hgroup")}}.
+
Integrare audio e video in HTML5
+
Gli elementi {{HTMLElement("audio")}} e {{HTMLElement("video")}} permettono l'integrazione e la manipolazione di nuovi contenuti multimediali.
+
Forms in HTML5
+
Uno sguardo ai miglioramenti dei form in HTML5: le API di convalida dei campi, parecchi nuovi attributi, nuovi valori per l'attributo {{htmlattrxref("type", "input")}} degli {{HTMLElement("input")}}, e il nuovo elemento {{HTMLElement("output")}}.
+
Nuovi elementi semantici
+
Accanto a sezioni, multimedia e le novità dei forms, ci sono numerosi nuovi elementi come {{HTMLElement("mark")}}, {{HTMLElement("figure")}}, {{HTMLElement("figcaption")}}, {{HTMLElement("data")}}, {{HTMLElement("time")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, o {{HTMLElement("meter")}}, che accrescono la quantità di elementi validi di HTML5.
+
Miglioramenti degli {{HTMLElement("iframe")}}
+
Utilizzando {{htmlattrxref("sandbox", "iframe")}}, {{htmlattrxref("seamless", "iframe")}}, e gli attributi {{htmlattrxref("srcdoc", "iframe")}}, gli autori possono ora precisare il livello di sicurezza e il rendering desiderato di un elemento {{HTMLElement("iframe")}}.
+
MathML
+
Permette di incorporare direttamente formule matematiche.
+
Introduzione a HTML5
+
Questo articolo introduce al problema di come indicare al browser che stai utilizzando HTML5 nel tuo progetto o applicazione web.
+
Parser di HTML5-compatibile
+
Il parser, che converte i byte di un documento HTML nel DOM, è stato esteso ed ora riconosce con precisione il comportamento da adottare in tutti i casi, anche quando incontra HTML non valido. Ciò conduce ad una maggiore prevedibilità e interoperabilità tra i browser compatibili con HTML5.
+
+ +

Connettività

+ +
+
Web Sockets
+
Permette di creare una connessione permanente tra la pagina ed il server e di scambiare dati, non HTML, attraverso questo mezzo.
+
Server-event inviati
+
Permetta a un server di sottoporre eventi al client, contrariamente al classico paradigma per cui il server invia dati solo in risposta alla richiesta del client.
+
WebRTC
+
Questa tecnologia, in cui RTC sta per Real Time Communication, permette di connettersi ad altre persone e controllare direttamente la videoconferenza nel browser, senza bisogno di plugin o applicazioni esterne.
+
+ +

Offline & Memorizzazione

+ +
+
Risorse Offline: la cache dell'applicazione
+
Firefox supporta a pieno le specifiche offline di HTML5. La maggior parte degli altri browser hanno un qualche livello di supporto per le risorse offline.
+
Eventi online e offline
+
Firefox 3 supporta eventi WHATWG online e offline, che lasciano rilevare alle applicazioni ed estensioni se c'è o no una connessione internet attiva, nonché quando la connessione cambia stato.
+
Sessione WHATWG lato client e memorizzazione persistente (alias Memorizzazione DOM)
+
La memorizzazione lato client, persistente e di sessione, permette alle applicazioni web di immagazzinare strutture dati lato client.
+
IndexedDB
+
E' uno standard web per la memorizzazione nel browser di significative quantità di dati strutturati e per ricerche indicizzate ad elevate prestazioni su tali dati.
+
Utilizzare file da applicazioni web
+
Il supporto per le nuove API per i file in HTML5 è stato aggiunto a Gecko, rendendo possibile l'accesso a file locali selezionati dall'utente. Ciò include il supporto per la selezione multipla di file utilizzando il nuovo attributo multiple con type file dell'elemento {{HTMLElement("input")}}. C'è anche FileReader.
+
+ +

Multimedia

+ +
+
Utilizzare audio e video in HTML5
+
Gli elementi {{HTMLElement("audio")}} e {{HTMLElement("video")}} incorporano e permetto la manipolazione di nuovi contenuti multimediali.
+
WebRTC
+
Questa tecnologia, in cui RTC sta per Real Time Communication, permette di connettersi ad altre persone e controlla direttamente la videoconferenza nel browser, senza bisogno di plugin o applicazioni esterne.
+
Utilizzo della API Camera
+
Permette di usare, manipolare e memorizzare un'immagine dalla fotocamera del computer.
+
Track e WebVTT
+
L'elemento {{HTMLElement("track")}} consente capitoli e sottotitoli. WebVTT è un formato di traccia testuale.
+
+ +

Grafica & Effetti 3D

+ +
+
Tutorial sui Canvas
+
Apprendi il nuovo elemento {{HTMLElement("canvas")}} e come disegnare grafica ed altri oggetti in Firefox
+
API di testo per gli elementi <canvas>  di HTML5
+
Le API di testo di HTML5 sono ora supportate agli elementi {{HTMLElement("canvas")}}.
+
WebGL
+
WebGL porta la grafica 3D sul Web introducendo una API strettamente conforme a OpenGL ES 2.0 utilizzata negli elementi {{HTMLElement("canvas")}} di HTML5.
+
SVG
+
Un formato di immagine vettoriale basato su XML che può essere direttamente incorporato nel documento HTML.
+
+
+ +
+

Prestazioni & integrazione

+ +
+
Web Workers
+
Permette di delegare l'esecuzione JavaScript a thread in background, impedendo a queste attività di rallentare gli eventi interattivi.
+
XMLHttpRequest Livello 2
+
Permette di ottenere asincronamente qualche parte della pagina e di visualizzarne dinamicamente il contenuto, variandolo nel tempo e in base alle azioni dell'utente. Questa è la tecnologia dietro Ajax.
+
JIT-motori JavaScript compilati
+
La nuova generazione di motori JavaScript sono molto più potenti, e garantiscono maggiori prestazioni.
+
History API
+
Permette la manipolazione della cronologia del browser. Ciò è particolarmente utile per le pagine che caricano nuove informazioni interattivamente.
+
L'attributo contentEditable: trasforma il tuo sito web in un wiki!
+
HTML5 ha standardizzato l'attributo contentEditable.
+
Drag & drop
+
Le API per il drag & drop in HTML5 supportano il trascinamento e rilascio di voci all'interno del sito e tra siti web. Fornisce anche una API più semplice per l'uso da parte di estensioni e applicazioni basate su Mozilla.
+
Gestione del focus in HTML
+
Sono supportati i nuovi attributiHTML5 activeElement e hasFocus.
+
Gestori di protocollo basato sul Web
+
E' ora possibile registrare applicazioni web come gestori di protocollo utilizzando il metodo navigator.registerProtocolHandler().
+
requestAnimationFrame
+
Permette di controllare il rendering delle animazioni per ottenere prestazioni ottimali.
+
Fullscreen API
+
Controlla l'utilizzo a pieno schermo da parte di pagine web e applicazioni, senza la visualizzazione della UI del browser.
+
Pointer Lock API
+
Permette di bloccare il puntatore al contenuto, così giochi e applicazioni simili non perdono il focus quando il puntatore ne oltrepassa il margine.
+
Eventi online ed offline
+
Al fine di costruire una buona applicazione web capace di lavorare offline, hai bisogno di sapere quando l'applicazione è offline. Hai anche bisogno di sapere quando l'applicazione torna nello stato online.
+
+ +

Accesso ai Dispositivi

+ +
+
Utilizzare le API Camera
+
Permette di utilizzare, manipolare e immagazzinare immagini dalla fotocamera del computer.
+
Eventi Touch
+
Gestori che reagiscono ad eventi creati dalla pressione sullo schermo da parte dell'utente.
+
Utilizzare la geolocalizzazione
+
Permetti al browser di localizzare la posizione dell'utente grazie alla geolocalizzazione.
+
Rilevazione orientamento del dispositivo
+
Lascia che il browser sia informato del cambio di orientamento del dispositivo. Può essere utilizzato come metodo di input (per esempio per realizzare giochi che reagiscono alla posizione del dispositivo) o per adattare l'impaginazione all'orientamento dello schermo (potrait o landscape).
+
Pointer Lock API
+
Permette di bloccare il puntatore al contenuto, così giochi e applicazioni simili non perdono il focus quando il puntatore ne oltrepassa il margine.
+
+ +

Stile

+ +

CSS è stato esteso consentendo elementi di stile più complessi. E' spesso identificato come CSS3, sebbene CSS non sia comunque una specifica monolitica e i differenti moduli non siano tutti di livello 3: alcuni sono di livello 1, ed altri di livello 4, con tutti i livelli intermedi.

+ +
+
Nuove caratteristiche di stile per lo sfondo
+
E' ora possibile aggiungere un'ombra a un box, utilizzando{{cssxref("box-shadow")}} ed impostare sfondi multipli.
+
Bordi più fantasiosi
+
Non è solo possibile utilizzare le immagini come stile dei bordi, utilizzando {{cssxref("border-image")}} e le proprietà associate, ma sono supportati i bordi arrotondati per mezzo della proprietà {{cssxref("border-radius")}}.
+
Anima il tuo stile
+
Utilizzando le Transizioni CSS per animare il passaggio tra stati, o utilizzando le Animazioni CSS per animare parti della pagina senza un evento scatenante, puoi controllare gli elementi mobili sulla pagina.
+
Miglioramenti tipografici
+
Gli autori hanno un miglior controllo per ottenere un migliore aspetto tipografico. Possono controllare il {{cssxref("text-overflow")}} e la sillabazione, ma possono anche applicare un'ombra o controllare più precisamente la decorazione. Caratteri tipografici personalizzati possono essere scaricati e applicati grazie alla nuova regola {{cssxref("@font-face")}}.
+
Nuove impaginazioni per la presentazione
+
Al fine di migliorare la flessibilità di progettazione, sono stati aggiunti due nuovi layout: Impaginazione CSS a colonna multipla, e l'impaginazione CSS a box flessibile.
+
+
+
+ +

 

diff --git a/files/it/web/guide/html/html5/introduction_to_html5/index.html b/files/it/web/guide/html/html5/introduction_to_html5/index.html new file mode 100644 index 0000000000..14fe305eb6 --- /dev/null +++ b/files/it/web/guide/html/html5/introduction_to_html5/index.html @@ -0,0 +1,22 @@ +--- +title: Introduzione a HTML5 +slug: Web/HTML/HTML5/Introduction_to_HTML5 +translation_of: Web/Guide/HTML/HTML5/Introduction_to_HTML5 +--- +

HTML5 è 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.

+

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 pagina principale di HTML5. Per informazioni dettagliate sul supporto degli altri browser delle funzionalità HTML5, fare riferimento al sito web CanIUse.

+

Dichiarare che un documento contiene mark-up HTML5 con il doctype HTML

+

Il doctype per HTML5 è semplicissimo. Per specificare che il vostro contenuto HTML utilizza HTML5, basta dichiarare:

+
<!DOCTYPE html>
+
+

Così facendo persino i browser che attualmente non supportano HTML5 entreranno in modalità standard, cioè interpreteranno il codice HTML in modo compatibile con HTML5, ignorando le nuove funzionalità di HTML5 se non le supportano.

+

È molto più semplice rispetto ai precedenti doctype, oltre che più breve, quindi più facile da ricordare e riduce anche la quantità di byte scaricati dall'utente.

+

Dichiarare il set di caratteri con <meta charset>

+

Indicare il set di caratteri che verrà utilizzato è solitamente la prima cosa da fare in un documento HTML. La specifica precedente richiedeva un elemento {{HTMLElement("meta")}} molto complesso. Ora è facilissimo:

+
<meta charset="UTF-8">
+

Ricordati di inserire questo tag subito dopo l'apertura del {{HTMLElement("head") }}, perché alcuni browser riavviano il parsing di un documento HTML se il set di caratteri dichiarato è diverso da quello che avevano previsto. Inoltre consigliamo sempre di usare il set UTF-8, ove possibile, perché semplifica la gestione dei caratteri nei documenti utilizzando diversi script.

+

Nota bene: HTML5 limita il set di caratteri validi a quelli compatibili con ASCII e che usano almeno 8 bit. Ciò è stato deciso per motivi di sicurezza e per prevenire alcuni tipi di attacchi.

+

Usare il nuovo parser HTML5

+

La regola di parsing di HTML5, che analizza il significato del mark-up, è stata definita con maggiore precisione in HTML5. Fino all'introduzione di HTML5, le uniche regole riguardavano il mark-up valido, quindi il comportamento del parser in caso di errori (e la maggior parte dei siti web ne ha almeno uno) era indefinito. In sostanza, tutti i browser si comportavano in modo diverso. Ora, di fronte a errori nel mark-up, tutti i browser conformi devono comportarsi esattamente nello stesso modo.

+

Questo obbligo aiuta non poco gli sviluppatori. Anche se tutti i browser moderni ora applicano queste regole di analisi HTML5, alcuni utenti navigano ancora con browser non compatibili con HTML5. Tenete a mente che è ancora altamente raccomandato stendere mark-up valido, in modo che il codice sia facile da leggere e mantenere nel tempo, e diminuisca notevolmente la probabilità di incompatibilità con i vari browser più datati.

+

Non preoccuparti — non devi cambiare nulla del tuo sito Web — gli sviluppatori dei browser hanno già fatto tutto per te!

diff --git a/files/it/web/guide/html/using_html_sections_and_outlines/index.html b/files/it/web/guide/html/using_html_sections_and_outlines/index.html new file mode 100644 index 0000000000..822543a758 --- /dev/null +++ b/files/it/web/guide/html/using_html_sections_and_outlines/index.html @@ -0,0 +1,320 @@ +--- +title: Sezioni e Struttura di un Documento HTML5 +slug: Web/HTML/Sections_and_Outlines_of_an_HTML5_document +translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines +--- +

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.

+

Struttura di un Documento in HTML 4

+

La struttura di un documento, cioè la struttura semantica di ciò che si trova tra <body> e </body>, è fondamentale nella presentazione della pagina all'utente. HTML 4 usa le nozioni di sezione e sotto-sezione di un documento per descrivere la sua struttura. Una sezione è definita da un Elemento HTML di Divisione ( {{HTMLElement("div")}} ) con un Elemento HTML di Intestazione ( {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, o {{HTMLElement("h6")}} ) al suo interno, che ne definisce il titolo. La relazione tra gli Elementi HTML di Divisione e gli Elementi HTML di Intestazione genera la struttura del documento.

+

Dunque il seguente mark-up:

+
+ 
<div class="section" id="elefanti-delle-foreste" >
+<h1>Elefanti delle foreste</h1>
+<p>In questa sezione, parliamo dei poco noti elefanti delle foreste.
+...la sezione continua...
+<div class="subsection" id="elefanti-habitat" >
+<h2>Habitat</h2>
+<p>Gli elefanti delle foreste non vivono su gli alberi, ma tra di essi.
+...la sotto-sezione continua...
+</div>
+</div>
+
+
+

genera la seguente struttura:

+
1. Elefanti delle foreste
+   1.1 Habitat
+
+

L'elemento {{HTMLElement("div")}} non è strettamente necessario per definire una nuova sezione. La mera presenza di un Elemento HTML di Intestazione è abbastanza per indicare una nuova sezione. Perciò:

+
<h1>Elefanti delle foreste</h1>
+<p>In questa sezione, parliamo dei poco noti elefanti delle foreste.
+...la sezione continua...
+<h2>Habitat</h2>
+<p>Gli elefanti delle foreste non vivono su gli alberi, ma tra di essi.
+...la sotto-sezione continua...
+<h2>Dieta</h2>
+<h1>Gerbilli della Mongolia</h1>
+
+

genera la seguente struttura:

+
1. Elefanti delle foreste
+   1.1 Habitat
+   1.2 Dieta
+2. Gerbilli della Mongolia
+
+

Problemi Risolti da HTML5

+

La definizione della struttura di un documento di HTML 4 è molto approssimativa e causa numerosi problemi:

+
    +
  1. L'uso di un {{HTMLElement("div")}} per definire sezioni semantiche, senza la definizione di valori specifici nell'attributo class, rende impossibile per un algoritmo automatico definire la struttura ("Questo {{HTMLElement("div")}} è parte della struttura della pagina, definisce una sezione o una sotto-sezione?" o "è solo un {{HTMLElement("div")}} inserito ai fini di presentazione, usato per scopi estetici?"). In altri termini, la specifica HTML4 è poco precisa riguardo a cosa è una sezione e come definire il suo scopo. La generazione automatica di una struttura è importante, in modo particolare per le tecnologie assistive, che sono in grado di adattare la presentazione delle informazioni alla struttura del documento. HTML5 rimuove l'elemento {{HTMLElement("div")}} dall'algoritmo che genera la struttura, introducendo l'elemento {{HTMLElement("section")}}, cioè un Elemento HTML di Sezione.
    2. +
  2. Unire più documenti è difficile: inserire un sotto-documento in un documento principale richiede di cambiare il "grado" delle intestazioni in modo che la struttura venga mantenuta. Questo problema viene risolto in HTML5, grazie ai nuovi elementi di sezionamento ( {{HTMLElement("article")}} , {{HTMLElement("section")}} , {{HTMLElement("nav")}} e {{HTMLElement("aside")}} ) che sono sempre sotto-sezioni della sezione che li contiene, indipendentemente dalle sezioni create dagli Elementi HTML di Intestazione.
    3. +
  3. Poiché ogni Elemento HTML di Intestazione cambia la struttura, non è possibile assegnare un sotto-titolo o un titolo secondario (es., <h1>Justine</h1><h2>Les Malheurs de la Vertu</h2> genera la struttura 1. Justine 1.1 Les Malheurs de la Vertu). HTML5 introduce l'elemento {{HTMLElement("hgroup")}} che "nasconde" tutti gli elementi di intestazione tranne quello di grado più elevato (es., <hgroup><h1>Justine</h1><h2>Les Malheurs de la Vertu</h2></hgroup> genera la struttura 1. Justine).
    4. +
  4. Nel HTML4, ogni sezione è parte della struttura del documento. Ma spesso i documenti non sono così lineari. Un documento può avere sezioni speciali contenenti informazioni che non fanno parte del flusso principale, anche se correlati ad esso, come una pubblicità o un approfondimento. HTML5 introduce l'elemento {{HTMLElement("aside")}} permettendo a questo tipo di sezioni di rimanere estranee al flusso principale.
    5. +
  5. Ancora, nel HTML4, dato che ogni sezione è parte della struttura del documento, non c'è modo di avere sezioni relative non al documento ma a tutto il sito, come il logo, i menu, una tabella dei contenuti, o le informazioni legali e sul copyright. A tal fine, HTML5 introduce tre elementi per altrettante sezioni specifiche: {{HTMLElement("nav")}} per i gruppi di links, come le tabelle dei contenuti, {{HTMLElement("footer")}} e {{HTMLElement("header")}} per le informazioni correlate al sito.
    6. +
+

Più in generale HTML5 aggiunge precisione alle funzionalità di sezionamento ed intestazione, permettendo una struttura del documento prevedibile e utilizzata dai browser per migliorare l'esperienza utente.

+

L'Algoritmo della Struttura di HTML5

+

Definire Sezioni nel HTML5

+

Tutto il contenuto dell'elemento {{HTMLElement("body")}} appartiene ad una sezione. Le sezioni HTML5 possono essere nidificate. Accanto alla sezione principale, definita dall'elemento {{HTMLElement("body")}}, i confini delle sezioni vengono definiti esplicitamente o implicitamente. Le sezioni esplicite sono contenute negli elementi {{HTMLElement("body")}}, {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}}, e {{HTMLElement("nav")}}.

+
+ Nota: Ogni sezione può avere la propria gerarchia di intestazioni. Quindi anche un elemento nidificato può avere un'intestazione {{HTMLElement("h1")}}. Vedi Definire le Intestazioni in HTML5.
+

Esempio:

+
<section>
+  <h1>Elefanti delle foreste</h1>
+  <section>
+    <h1>Introduzione</h1>
+    <p>In questa sezione, parliamo dei poco noti elefanti delle foreste.
+  </section>
+  <section>
+    <h1>Habitat</h1>
+    <p>Gli elefanti delle foreste non vivono su gli alberi, ma tra di essi.
+  </section>
+  <aside>
+    <p>pubblicità
+  </aside>
+</section>
+<footer>
+  <p>(c) 2010 Esempi S.P.A.
+</footer>
+

Questo frammento di HTML definisce due sezioni di primo livello:

+
<section>
+  <h1>Elefanti delle foreste</h1>
+  <section>
+    <h1>Introduzione</h1>
+    <p>In questa sezione, parliamo dei poco noti elefanti delle foreste.
+  </section>
+  <section>
+    <h1>Habitat</h1>
+    <p>Gli elefanti delle foreste non vivono su gli alberi, ma tra di essi.
+  </section>
+   <aside>
+    <p>pubblicità
+  </aside>
+</section>
+
+<footer>
+  <p>(c) 2010 Esempi S.P.A.
+</footer>
+

La prima sezione ha tre sotto-sezioni:

+
<section>
+  <h1>Elefanti delle foreste</h1>
+
+  <section>
+    <h1>Introduzione</h1>
+    <p>In questa sezione, parliamo dei poco noti elefanti delle foreste.
+  </section>
+
+  <section>
+    <h1>Habitat</h1>
+    <p>Gli elefanti delle foreste non vivono su gli alberi, ma tra di essi.
+  </section>
+
+  <aside>
+    <p>pubblicità
+  </aside>
+</section>
+
+<footer>
+  <p>(c) 2010 Esempi S.P.A.
+</footer>
+

Il che genera la seguente struttura:

+
1. Elefanti delle foreste
+   1.1 Introduzione
+   1.2 Habitat
+   1.3 Sezione (aside)
+
+

Definire le Intestazioni in HTML5

+

L'Elemento HTML di Sezione definisce la struttura del documento, ma c'è bisogno anche delle intestazioni. La regola di base è semplice: il primo Elemento HTML di Intestazione (uno tra {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}} ) definisce l'intestazione della sezione corrente.

+

Gli elementi di intestazione hanno un grado dato dal numero nell'elemento, dove {{HTMLElement("h1")}} è il grado più alto, e {{HTMLElement("h6")}} quello più basso. Il grado relativo ha importanza solo all'interno di una sezione; è la struttura delle sezioni a determinare lo schema definitivo, non il grado di ciascuna intestazione. Per esempio, questo codice:

+
<section>
+  <h1>Elefanti delle foreste</h1>
+  <p>In questa sezione, parliamo dei poco noti elefanti delle foreste.
+    ...la sezione continua...
+  <section>
+    <h2>Habitat</h2>
+    <p>Gli elefanti delle foreste non vivono su gli alberi, ma tra di essi.
+        ...la sotto-sezione continua...
+  </section>
+</section>
+<section>
+  <h3>Gerbilli della Mongolia</h3>
+  <p>In questa sezione, parliamo dei famosi gerbilli della Mongolia.
+     ...la sezione continua...
+</section>
+

genera la seguente struttura:

+
1. Elefanti delle foreste
+   1.1 Habitat
+2. Gerbilli della Mongolia
+

Notare come il grado delle intestazioni (nell'esempio {{HTMLElement("h1")}} per la prima sezione di primo livello, {{HTMLElement("h2")}} per la sotto-sezione e {{HTMLElement("h3")}} per la seconda sezione di primo livello) non conta. (Qualsiasi grado può essere utilizzato come intestazione di una sezione esplicitamente definita, anche se questa pratica non è consigliata.)

+

Sezionamento implicito

+

Poiché gli elementi HTML5 di sezionamento non sono obbligatori per definire una struttura, c'è un modo per definire sezioni senza di essi, per mantenere la compatibilità con la rete esistente dominata da HTML4. Questa tecnica è chiamata sezionamento implicito.

+

Gli Elementi HTML di Intestazione da ( {{HTMLElement("h1")}} a {{HTMLElement("h6")}} ) definiscono una nuova sezione implicita quando non sono la prima voce del loro contenitore, che è sempre una sezione esplicita. Il modo in cui questa sezione implicita viene posizionata nella struttura è definito dal suo grado relativo all'intestazione precedente nella sezione che le contiene. Se il grado è inferiore rispetto all'intestazione precedente, viene aperta una sotto-sezione implicita. Questo codice:

+
<section>
+  <h1>Elefanti delle foreste</h1>
+  <p>In questa sezione, parliamo dei poco noti elefanti delle foreste.
+    ...la sezione continua...
+  <h3 class="implicit subsection">Habitat</h3>
+  <p>Gli elefanti delle foreste non vivono su gli alberi, ma tra di essi.
+    ...la sotto-sezione continua...
+</section>
+

genera la seguente struttura:

+
1. Elefanti delle foreste
+   1.1 Habitat (implicitly defined by the h3 element)
+
+

Se l'intestazione ha lo stesso grado di quella precedente, la sezione corrente viene chiusa (anche se esplicita!) e se ne apre una nuova, implicita, dello stesso livello:

+
<section>
+  <h1>Elefanti delle foreste</h1>
+  <p>In questa sezione, parliamo dei poco noti elefanti delle foreste.
+    ...la sezione continua...
+  <h1 class="implicit section">Gerbilli della Mongolia</h1>
+  <p>Gerbilli della Mongolia are cute little mammals.
+    ...la sezione continua...
+</section>
+

genera la seguente struttura: 

+
1. Elefanti delle foreste
+2. Gerbilli della Mongolia (implicitamente definita dall'elemento h1, che allo stesso tempo ha chiuso la sezione precedente)
+
+

Se ha grado superiore all'intestazione precedente, chiude la sezione corrente e ne apre una nuova, implicita, di livello superiore:

+
<body>
+  <h1>Mammiferi</h1>
+  <h2>Balene</h2>
+  <p>In questa sezione, parliamo delle balene nuotatrici.
+    ...la sezione continua...
+  <section>
+    <h3>Elefanti delle foreste</h3>
+    <p>In questa sezione, parliamo dei poco noti elefanti delle foreste.
+      ...la sezione continua...
+    <h3>Gerbilli della Mongolia</h3>
+      <p>Hordes of gerbils have spread their range far beyond Mongolia.
+         ...la sotto-sezione continua...
+    <h2>Rettili</h2>
+      <p>I rettili sono animali dal sangue freddo.
+          ...la sotto-sezione continua...
+  </section>
+</body>
+

genera la seguente struttura:

+
1. Mammiferi
+   1.1 Balene (definita implicitamente dall'elemento h2)
+   1.2 Elefanti delle foreste (definita esplicitamente dall'elemento section)
+   1.3 Gerbilli della Mongolia (definita implicitamente dall'elemento h3, che allo stesso tempo chiude la sezione precedente)
+   1.4 Rettili (definita implicitamente dall'elemento h2, che allo stesso tempo chiude la sezione precedente)
+
+

Questa non è la struttura che ci si potrebbe aspettare dopo un rapido sguardo alle intestazioni. Per rendere il vostro markup comprensibile all'uomo, è una buona pratica usare sezioni esplicite, e far combaciare il grado dell'intestazione con il livello di nidificazione previsto. Tuttavia, ciò non è richiesto dalla specifica HTML5. Se si riscontra che i browser rendono la struttura del vostro documento in modi inaspettati, verificare se alcune sezioni vengono chiuse implicitamente dagli elementi di intestazione.

+

Un'eccezione alla regola empirica che il grado dell'intestazione deve corrispondere al livello di nidificazione della sezione avviene per le sezioni che vengono riutilizzate in più documenti. Per esempio, una sezione potrebbe essere memorizzata in un sistema di gestione dei contenuti ed inserita nel documento in fase di runtime. In questo caso, una buona pratica è partire sempre da un elemento {{HTMLElement("h1")}} per la prima intestazione della sezione. Il livello di nidificazione della sezione riutilizzabile sarà determinato dalla struttura del documento in cui appare. I tag di sezione esplicita sono comunque utili in questi casi.

+

Sovrascrivere il Sezionamento Implicito

+

A volte, una sezione ha bisogno di avere più intestazioni. Alcuni casi comuni sono:

+ +

A causa del sezionamento implicito, questo non è possibile senza l'aiuto dell'Elemento HTML di Raggruppamento delle Intestazioni ( {{HTMLElement("hgroup")}} ) introdotto da HTML5. Esso "nasconde" tutte le intestazioni dalla struttura, eccetto la prima, consentendo di evitare il sezionamento implicito. Grazie a questo elemento l'esempio del libro secondario:

+
<section>
+  <hgroup>
+    <h1>Justine</h1>
+    <h2>Les Malheurs de la vertu</h2>
+  </hgroup>
+  ... Contenuti ...
+</section>
+
+

genera la seguente struttura:

+
1. Justine
+

Sezioni "root"

+

Una sezione "root" (radice) è un elemento HTML che può avere una propria struttura, ma le sezioni ed intestazioni interne ad esso non interferiscono con la struttura del suo contenitore. Oltre al {{HTMLElement("body")}} che è la sezione "root" logica di un documento, le sezioni root sono spesso elementi che aggiungono contenuto esterno alla pagina: {{HTMLElement("blockquote")}}, {{HTMLElement("details")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}} e {{HTMLElement("td")}}.

+

Esempio:

+
<section>
+  <h1>Elefanti delle foreste</h1>
+  <section>
+    <h2>Introduzione</h2>
+    <p>In questa sezione, parliamo dei poco noti elefanti delle foreste.
+  </section>
+  <section>
+    <h2>Habitat</h2>
+    <p>Gli elefanti delle foreste non vivono su gli alberi, ma tra di essi.
+       Vediamo cosa dicono gli scienziati in "<cite>Gli elefanti delle foreste nel Borneo</cite>":
+    <blockquote>
+       <h1>Borneo
+       <p>L'elemento foresta vive nel Borneo...
+    </blockquote>
+  </section>
+</section>
+
+

Questo esempio genera la seguente struttura:

+
1. Elefanti delle foreste
+   1.1 Introduzione
+   1.2 Habitat
+

La struttura principale non contiene la struttura interna dell'elemento {{HTMLElement("blockquote")}}, che, trattandosi di una citazione esterna, è un elemento di sezione "root", perciò la sua struttura interna viene isolata.

+

Sezioni oltre la struttura

+

HTML5 introduce quattro nuovi elementi che permettono di definire sezioni che non fanno parte della struttura principale del documento:

+
    +
  1. L'Elemento HTML di Sezione Aside ( {{HTMLElement("aside")}} ) definisce una sezione che, anche se correlata all'elemento principale, non appartiene al flusso principale, come un box di approfondimento o una pubblicità. Ha la sua propria struttura, ma non appartiene a quella principale.
    2. +
  2. L'Elemento HTML di Sezione Navigazione ( {{HTMLElement("nav")}} ) definisce una sezione che contiene i link di navigazione. In un documento possono essere presenti molti elementi di navigazione, ad esempio: uno con i link interni alla pagina, come le tabelle dei contenuti, e un altro con i link di navigazione del sito. Questi links non fanno parte del flusso o della struttura principale e generalmente il loro rendering viene eseguito per ultimo dagli screen readers e da tecnologie assistive simili.
    3. +
  3. L'Elemento HTML di Sezione Header ( {{HTMLElement("header")}} ) definisce la testata di una pagina, che generalmente contiene il logo e il nome del sito, occasionalmente una barra di navigazione. A dispetto del nome, non viene necessariamente posizionato all'inizio del documento.
    4. +
  4. L'Elemento HTML di Sezione Footer ( {{HTMLElement("footer")}} ) definisce il piè di pagina, che generalmente contiene il copyright, le informazioni legali ed a volte altri links. A dispetto del nome, non viene necessariamente posizionato alla fine del documento.
    5. +
+

Indirizzi e data di pubblicazione negli elementi di sezionamento

+

L'autore di un documento spesso vuole pubblicare alcune informazioni personali, come nome e indirizzo dell'autore. HTML4 lo permetteva tramite l'elemento {{HTMLElement("address")}}, che è stato esteso in HTML5.

+

Un documento può essere fatto di diverse sezioni scritte da diversi autori. Una sezione curata da un autore diverso rispetto alla sezione principale può essere definita da un elemento {{HTMLElement("article")}}. Di conseguenza, l'elemento {{HTMLElement("address")}} è ora riferito al più vicino tra gli elementi {{HTMLElement("body")}} e {{HTMLElement("article")}} che lo contengono.

+

In modo simile, il nuovo elemento {{HTMLElement("time")}}, con il suo set di attributi {{htmlattrxref("pubdate", "time")}}, rappresenta la data di pubblicazione di tutto il documento, rispettivamente all'articolo, legato al più vicino contenitore {{HTMLElement("body")}} o {{HTMLElement("article")}}.

+

Usare Elementi HTML5 nei Browser Non-HTML5

+

Sezioni ed intestazioni dovrebbero funzionare nella maggior parte dei browser non-HTML5-compatibili. Anche se non supportati, non necessitano di una interfaccia DOM specifica ma solo di uno stile CSS dedicato, perché agli elementi sconosciuti viene assegnato display:inline di default:

+
section, article, aside, footer, header, nav, hgroup {
+  display:block;
+}
+
+

Naturalmente lo sviluppatore può assegnargli uno stile differente, ma tenendo a mente che nei browser non compatibili con HTML5 il rendering di default è diverso da quel che ci si potrebbe aspettare. Notare che l'elemento {{HTMLElement("time")}} non è stato incluso di proposito, perché in questo caso il rendering di default dei browser non-HTML5-compatibili corrisponde a quello previsto.

+

Questo metodo però ha delle limitazioni, perché alcuni browser non permettono di applicare stili CSS agli elementi non supportati. È il caso di Internet Explorer (versione 8 e precedenti), che necessita di uno script per abilitare il rendering di tali elementi:

+
<!--[if lt IE 9]>
+  <script>
+    document.createElement("header");
+    document.createElement("footer");
+    document.createElement("section");
+    document.createElement("aside");
+
+    document.createElement("nav");
+    document.createElement("article");
+    document.createElement("hgroup");
+    document.createElement("time");
+  </script>
+<![endif]-->
+

Questo significa che, in caso di Internet Explorer (8 e precedenti), javascript deve essere abilitato affinché gli elementi HTML vengano visualizzati correttamente. Altrimenti essi non verranno visualizzati (o verranno visualizzati senza stili applicati NdT), il che potrebbe rivelarsi problematico, dato che si tratta di elementi che definiscono la struttura dell'intera pagina. Ecco perché un elemento {{HTMLElement("noscript")}} dovrebbe essere aggiunto per questi casi specifici, come nell'esempio di seguito:

+
<noscript>
+   <strong>Attenzione !</strong>
+   Dato che il tuo browser non supporta HTML5, alcuni elementi vengono simulati usando JScript.
+   Sfortunatamente il tuo browser ha disattivato lo scripting. Per favore abilita JScript per visualizzare la pagina.
+</noscript>
+

Ciò ci porta al seguente codice per permettere il supporto delle sezioni e delle intestazioni HTML5 nei browser non-HTML5, anche nel caso di Internet Explorer (8 e precedenti), con un fallback adeguato nel caso in il browser non permetta l'esecuzione di javascript:

+
<!--[if lt IE 9]>
+  <script>
+    document.createElement("header");
+    document.createElement("footer");
+    document.createElement("section");
+    document.createElement("aside");
+    document.createElement("nav");
+    document.createElement("article");
+    document.createElement("hgroup");
+    document.createElement("time");
+  </script>
+  <noscript>
+   <strong>Attenzione !</strong>
+   Dato che il tuo browser non supporta HTML5, alcuni elementi vengono simulati usando JScript.
+   Sfortunatamente il tuo browser ha disattivato lo scripting. Per favore abilita JScript per visualizzare la pagina.
+</noscript>
+<![endif]-->
+

Conclusioni

+

Le nuove sezioni e intestazioni introdotte in HTML5 danno agli sviluppatori la capacità di descrivere la struttura di un documento web in maniera standard. Portano un grande vantaggio per le persone che hanno browser supportanti HTML5 e che hanno bisogno della struttura per comprendere la pagina, per esempio le le persone che necessitano l'aiuto di una tecnologia assistiva. I nuovi elementi semantici sono semplici da usare e, con pochi aggiustamenti, funzionano anche nei browser non-HTML5. Pertanto possono essere utilizzati senza restrizioni.

+
+ {{HTML5ArticleTOC()}}
diff --git a/files/it/web/guide/mobile/index.html b/files/it/web/guide/mobile/index.html new file mode 100644 index 0000000000..cc288a9c45 --- /dev/null +++ b/files/it/web/guide/mobile/index.html @@ -0,0 +1,18 @@ +--- +title: Mobile Web development +slug: Web_Development/Mobile +tags: + - Mobile + - NeedsTranslation + - TopicStub + - Web Development +translation_of: Web/Guide/Mobile +translation_of_original: Web_Development/Mobile +--- +

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.

+ 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..563552085e --- /dev/null +++ b/files/it/web/guide/parsing_and_serializing_xml/index.html @@ -0,0 +1,1193 @@ +--- +title: Costruire e decostruire un documento XML +slug: Costruire_e_decostruire_un_documento_XML +translation_of: Web/Guide/Parsing_and_serializing_XML +--- +

Quest'articolo si propone di fornire una guida esaustiva per l'uso di XML per mezzo Javascript. Esso si divide in due sezioni. Nella prima sezione verranno illustrati tutti i possibili metodi per costruire un albero DOM, nella seconda invece si darà per scontato che saremo già in possesso di un albero DOM e il nostro scopo sarà quello di trattarne il contenuto.

+ +

Che cos'è un albero DOM?

+ +

Per albero DOM s'intende un'istanza di Document. 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.

+ +

DOM trees can be queried using XPath expressions, converted to strings or written to a local or remote files using XMLSerializer (without having to first convert to a string), POSTed to a web server (via XMLHttpRequest),

+ +

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.

+ +

Mozilla gestisce ampiamente XML. Sono gestite diverse Raccomandazioni e bozze del World Wide Web Consortium (W3C) 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:

+ + + +

È possibile comunque creare manualmente propri algoritmi per la serializzazione o la conversione di un documento XML, come si vedrà in seguito.

+ +

Prima parte: costruire un albero DOM

+ +

Come precedentemente accennato, in questa prima sezione il nostro scopo sarà quello di ottenere un albero DOM.

+ +

Un albero DOM è un oggetto (e precisamente un'istanza di Document). 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.

+ +

Creare dinamicamente un albero DOM

+ +

Questo paragrafo illustra come utilizzare l'API JavaScript W3C DOM per creare e modificare oggetti DOM. Essa è attiva in tutte le applicazioni Gecko-based (come Firefox, per esempio) sia in privileged code (estensioni) che in unprivileged code (pagine internet).

+ +

Scrivendolo a mano

+ +

L'API JavaScript W3C DOM, supportata da Mozilla, può essere invocata manualmente.

+ +

Si consideri il seguente documento 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>
+
+ +

Grazie all'API W3C DOM è possibile creare una rappresentazione di esso come la seguente, presente unicamente nella memoria dell'interprete:

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

Si veda anche Il capitolo sul DOM del Tutorial XUL (in inglese).

+ +

Automatizzando la creazione dinamica dell'albero DOM

+ +

L'invocazione dell'API Javascript W3C DOM, può essere anche automatizzata.

+ +

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'ultimo paragrafo del capitolo su JXON.

+ +

Costruire un albero DOM XML a partire da stringhe di codice sorgente

+ +

Il seguente esempio mostra la costruzione di un albero DOM tramite parsing di un codice sorgente.

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

Tutorial su come rendere questo codice cross browser (in inglese)

+ +

Costruire un albero DOM a partire da un file

+ +

Preambolo da stendere.

+ +

Usando DOMParser

+ +

Ciascuna istanza di DOMParser possiede diversi metodi per parsare un documento XML a partire da un file. È possibile fare ricorso a parseFromStream():

+ +
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"));
+
+ +

oppure utilizzare parseFromBuffer():

+ +
// Esempio mancante
+ +

In ogni caso il metodo più pratico per accedere al contenuto di un file XML resta ajax, per l'uso del quale si rimanda al prossimo paragrafo.

+ +

Usando XMLHttpRequest

+ +

Come già precedentemente accennato, sebbene ciascuna istanza di DOMParser possegga un metodo chiamato parseFromStream(), è più facile utilizzare XMLHttpRequest per parsare documenti XML in alberi DOM (XMLHttpRequest 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:

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

N.B. Il metodo responseXML è sempre un'istanza di Document – e di conseguenza un oggetto – a differenza del metodo responseText, che è sempre un valore primario (una stringa).

+ +

Usando l'elemento {{ HTMLElement("object") }}.

+ +

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 purchase_order.xml e contenente un albero simile a questo:

+ +

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

Adesso proviamo a lanciare il nostro esempio:

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

Per ulteriori approfondimenti, si rimanda all'articolo: Usare le XML Data Islands in Mozilla.

+ +

Seconda parte: decostruire un albero DOM

+ +

Da adesso in poi daremo per scontato il fatto che abbiamo già un albero DOM nella memoria dell'interprete Javascript e che il nostro scopo è quello di utilizzare tale istanza di Document nei modi più disparati.

+ +

Convertire un documento XML in stringhe di codice sorgente

+ +

L'esempio seguente mostra come ottenere dalla variabile doc — il nostro albero DOM — una stringa contenente l'intero suo codice sorgente:

+ +
var oSerializer = new XMLSerializer();
+var sXML = oSerializer.serializeToString(doc);
+
+ +

Non è possibile creare un istanza di XMLSerializer (ovvero lanciare: new XMLSerializer()) dall'interno di un componente JS XPCOM o dall'interno di un modulo. Per farlo bisogna lanciare:

+ +
var oSerializer = Components.classes["@mozilla.org/xmlextras/xmlserializer;1"].createInstance(Components.interfaces.nsIDOMSerializer);
+var sXML = oSerializer.serializeToString(doc);
+
+ +

Come ottenere stringhe di codice sorgente di facile lettura

+ +

You can pretty print a DOM tree using XMLSerializer and E4X. First, create a DOM tree as described in the Come creare un albero DOM article. Alternatively, use a DOM tree obtained from XMLHttpRequest. We assume it's in the doc variable.

+ +
var oSerializer = new XMLSerializer();
+var sPrettyXML = XML(oSerializer.serializeToString(doc)).toXMLString();
+ +

Indents are provided with two spaces. You can, of course, use DOM:treeWalker to write your own, more performant version which also has the advantage that you can customize the indent string to be whatever you like.

+ +

Note: When using the E4X toXMLString method your CDATA elements will be lost and only the containing text remains. So using the above method might not be useful if you have CDATA elements in your XML.

+ +
<content><![CDATA[This is the content]]></content>
+ +

Will become

+ +
<content>This is the content</content>
+ +

Convertire un foglio XML in un albero di oggetti Javascript (JXON)

+ +

JXON (lossless Javascript XML Object Notation) è 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.

+ +

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 Usare XPath.

+ +

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.

+ +

Per tutto questo capitolo immagineremo di aver parsato, come al solito nella nostra variabile doc, questo documento XML di esempio:

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

Adesso proveremo a ottenere una rappresentazione della variabile doc — l'albero DOM — attraverso un albero di oggetti Javascript (per approfondire si leggano le guide su come lavorare con gli oggetti e su come Javascript sia Object-Oriented). Per far ciò potremo utilizzare diversi algoritmi di conversione.

+ +

Per semplicità gli algoritmi qui proposti (si veda: #1, #2, #3, #4) prenderanno in considerazione unicamente i seguenti tipi di nodi e i loro attributi:

+ +
    +
  1. Document (solo come argomento della funzione),
    2. +
  2. DocumentFragment (solo come argomento della funzione),
    3. +
  3. Element,
    4. +
  4. Text (mai come argomento della funzione),
    5. +
  5. CDATASection (mai come argomento della funzione).
    6. +
+ +

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 è case insensitive (resa sempre in minuscolo) 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 Convenzione di Parker, versione 0.4, che prevede il riconoscimento del typeof del contenuto di testo di ogni singolo nodo letto.

+ +

Algoritmo #1: una via prolissa

+ +

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à keyValue, mentre i nodeAttributes, se esistono, saranno annidati come proprietà dell'oggetto-figlio keyAttributes. L'argomento del costruttore potrà essere l'intero Document, un DocumentFragment o, più semplicemente, un nodo di tipo Element di esso.

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

Con questo algoritmo il nostro esempio diventerà:

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

È un approccio raccomandato nel caso in cui ci sia completamente ignota la struttura del documento XML che andremo a leggere.

+ +

Algoritmo #2: una via un po' meno prolissa

+ +

Quello che segue è un altro, più semplice, metodo di conversione. Dove i nodeAttributes saranno annidati nello stesso oggetto contenente la trascrizione dei nodi figli sebbene, a differenza di quelli, questi saranno contrassegnati dal prefisso “@”. Come sopra, il contenuto di testo di ciascun nodo sarà affidato alla proprietà keyValue. L'argomento del costruttore potrà essere l'intero Document, un DocumentFragment o, più semplicemente, un nodo di tipo Element di esso.

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

Con questo algoritmo il nostro esempio diventerà:

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

È un approccio possibile nel caso in cui ci sia parzialmente nota la struttura del documento XML che andremo a leggere.

+ +

Algoritmo #3: una via sintetica

+ +

Ora proveremo un altro metodo di conversione. Questo algoritmo è quello che si avvicina di più alla Convenzione di Parker. Esso è molto simile al precedente, eccetto che per il fatto che i nodi che non contengono alcun nodo-figlio di tipo Element, ma solo nodi-figli di tipo Text e/o CDATASection, non saranno rappresentati da oggetti, ma direttamente da booleani, numeri, stringhe o istanze del costruttore Date (si veda la Convenzione di Parker). La rappresentazione dei nodi completamente vuoti invece (cioè che non contengono né nodi di tipo Element, né nodi di tipo Text, né nodi di tipo CDATASection) avranno come valore predefinito true (su questo punto si vedano le Considerazioni sul codice). Inoltre questa volta non si è ricorso a un costruttore, ma a una funzione. L'argomento della funzione potrà essere l'intero Document, un DocumentFragment o, più semplicemente, un nodo di tipo Element di esso.

+ +

In molti casi questo rappresenta il metodo di conversione più pratico.

+ +
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));
+
+ +
Nota: Se si vuole congelare l'intero oggetto (a causa della natura "statica" di un documento XML), decommentare la stringa: /* if (nLength > 0) { Object.freeze(vResult); } */. Il metodo Object.freeze 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.
+ +

Con questo algoritmo il nostro esempio diventerà:

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

È un approccio raccomandato nel caso in cui ci sia nota la struttura del documento XML che andremo a leggere.

+ +

Algoritmo #4: una via davvero minimalista

+ +

La seguente rappresenta un'altra possibile via di conversione. Anch'essa è molto vicina alla Convenzione di Parker. Con questo algoritmo la rappresentazione dei nodi di tipo Element che contengono a loro volta sullo stesso piano nodi-figli di tipo Element insieme con nodi-figli di tipo Text e/o di tipo CDATASection verrà resa per mezzo di istanze dei costruttori Boolean, Number, String, e Date. E di conseguenza la trascrizione di ogni eventuale nodo-figlio sarà annidata in oggetti di questo tipo.

+ +

Per esempio;

+ +
<employee type="usher">John Smith</employee>
+<manager>Lisa Carlucci</manager>
+
+ +

diventerà

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

Come per il terzo algoritmo, i nodi che non contengono alcun nodo-figlio di tipo Element, ma solo nodi-figli di tipo Text e/o CDATASection, non saranno rappresentati da oggetti, ma direttamente da booleani, numeri, stringhe (valori primitivi) o da istanze del costruttore Date (si veda la Convenzione di Parker). Come per il terzo algoritmo, non si è usato un costruttore, ma una semplice funzione. L'argomento della funzione potrà essere l'intero Document, un DocumentFragment o, più semplicemente, un nodo di tipo Element di esso.

+ +
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" !
+ +
Nota: Se si vuole congelare l'intero oggetto (a causa della natura "statica" di un documento XML), decommentare la stringa: /* else { Object.freeze(vResult); } */ . Il metodo Object.freeze 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.
+ +

È un approccio possibile nel caso in cui ci sia nota la struttura del documento XML che andremo a leggere.

+ +

Algoritmi inversi

+ +

È possibile invertire gli algoritmi qui proposti in maniera tale da ottenere un nuovo documento XML a partire da un albero di oggetti Javascript.

+ +

Per semplicità proporremo qui un unico esempio, che in un unico codice rappresenta l'inversione degli algoritmi #2 e #3. È molto semplice partire da esso per creare gli inversi anche degli algoritmi #1 e #4, qualora se ne abbia la necessità.

+ +
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));
+
+ +
Nota: Con questo codice le istanze di Date eventualmente presenti verranno convertite in stringhe attraverso l'invocazione del metodo toGMTString(). Nulla vieta l'utilizzo di qualsiasi altro metodo di conversione. Inoltre le proprietà dell'albero con valore uguale a true verranno convertite in elementi privi di nodi di testo (si vedano le Considerazioni sul codice).
+ +

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 CDATASection, che verranno riconvertiti in nodi di tipo Text), 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.

+ +

La Convenzione di Parker

+ +

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 Parker & Badger. Per ulteriori approfondimenti si veda anche la Convenzione di BadgerFish.

+ +

La seguente è una traduzione dall'inglese del paper originale della Convenzione di Parker (versione 0.4), dalla pagina “TransformingRules” del sito del progetto xml2json-xslt.

+ +

Questa convenzione è stata scritta per regolamentare la conversione in JSON da parte di XSLT, di conseguenza alcune parti di essa sono futili per Javascript.

+ +
Conversione in JSON
+ +
    +
  1. +

    L'elemento root verrà assorbito, poiché ce ne può essere soltanto uno:

    + + 
    <root>test</root>
    + +

    diventerà

    + + 
    "test"
+
    +
    2. +
  2. +

    I nomi degli elementi diventeranno proprietà di oggetti:

    + + 
    <root><name>Xml</name><encoding>ASCII</encoding></root>
    + +

    diventerà

    + + 
    {
+  "name": "Xml",
+  "encoding": "ASCII"
+}
+
    +
    3. +
  3. +

    I numeri saranno riconosciuti come tali (sia interi che decimali):

    + + 
    <root><age>12</age><height>1.73</height></root>
+
    + +

    diventerà

    + + 
    {
+  "age": 12,
+  "height": 1.73
+}
+
    +
    4. +
  4. +

    I booleani saranno riconosciuti come tali (case insensitive):

    + + 
    <root><checked>True</checked><answer>FALSE</answer></root>
    + +

    diventerà

    + + 
    {
+  "checked": true,
+  "answer": false
+}
+
    +
    5. +
  5. +

    Le stringhe avranno degli escape quando ce ne sarà la necessità:

    + + 
    <root>Quote: &quot; New-line:
+</root>
+
    + +

    diventerà

    + + 
    "Quote: \" New-line:\n"
+
    +
    6. +
  6. +

    Gli elementi vuoti diventeranno proprietà con valore nullo (null):

    + + 
    <root><nil/><empty></empty></root>
    + +

    diventerà

    + + 
    {
+  "nil": null,
+  "empty": null
+}
+
    +
    7. +
  7. +

    If all sibling elements have the same name, they become an array

    + + 
    <root><item>1</item><item>2</item><item>three</item></root>
+
    + +

    becomes

    + + 
    [1, 2, "three"]
+
    +
    8. +
  8. +

    Mixed mode text-nodes, comments and attributes get absorbed:

    + + 
    <root version="1.0">testing<!--comment--><elementtest="true">1</element></root>
+
    + +

    becomes

    + + 
    { "element": true }
+
    +
    9. +
  9. +

    Namespaces get absorbed, and prefixes will just be part of the property name:

    + + 
    <root xmlns:ding="http://zanstra.com/ding"><ding:dong>binnen</ding:dong></root>
+
    + +

    becomes

    + + 
    { "ding:dong" : "binnen" }
+
    +
    10. +
+ +
Note: Our algorithms comply with the points 2, 3, 4 and 7. The third and the fourth algorithm comply also with the point 6 (but true instead of null – si vedano le Considerazioni sul codice). The point 5 is automatically managed by the Javascript method JSON.stringify.
+ +
Appendice Javascript
+ +

All the same as the JSON translation, but with these extra's:

+ +
    +
  1. +

    Property names are only escaped when necessary

    + + 
    <root><while>true</while><wend>false</wend><only-if/></root>
    + +

    becomes

    + + 
    {
+  "while": true,
+  wend: false,
+  "only-if": null
+}
+
    +
    2. +
  2. +

    Within a string, closing elements "</" are escaped as "<\/"

    + + 
    <root><![CDATA[<script>alert("YES");</script>]]></root>
    + +

    becomes

    + + 
    { script: "<script>alert(\"YES\")<\/script>" }
+
    +
    3. +
  3. +

    Dates are created as new Date() objects

    + + 
    <root>2006-12-25</root>
    + +

    becomes

    + + 
    new Date(2006, 12 - 1, 25)
+
    +
    4. +
  4. +

    Attributes and comments are shown as comments (for testing-purposes):

    + + 
    <!--testing--><root><test version="1.0">123</test></root>
+
    + +

    becomes

    + + 
    /* testing */ { test /* @version = "1.0" */ : 123}
+
    +
    5. +
  5. +

    A bit of indentation is done, to keep things ledgible

    +
    6. +
+ +
Note: Our algorithms comply with the point 3 (but without month decrease). The points 1 and 2 are automatically managed by the Javascript method JSON.stringify.
+ +

In sintesi

+ +

Prendiamo il terzo algoritmo come l'algoritmo di conversione JXON più rappresentativo. Un singolo nodo XML di tipo Element può avere in totale otto differenti configurazioni a seconda di quello che contiene. Esso può essere:

+ +
    +
  1. un elemento vuoto,
    2. +
  2. un elemento contenente al suo interno solamente un nodo di testo,
    3. +
  3. un elemento vuoto ma contenente attributi,
    4. +
  4. un elemento con attributi contenente al suo interno solamente un nodo di testo,
    5. +
  5. un elemento contenente ulteriori elementi-figli con nomi diversi,
    6. +
  6. un elemento contenente ulteriori elementi-figli con nomi uguali,
    7. +
  7. un elemento contenente ulteriori elementi-figli e un unico nodo di testo (testo contiguo),
    8. +
  8. un elemento contenente ulteriori elementi-figli e più nodi di testo (testo non contiguo).
    9. +
+ +

The following table shows the corresponding conversion patterns between XML and JSON according to the third algorithm.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaseXMLJSONJavascript access
1<animal/>"animal": truemyObject.animal
2<animal>text</animal>"animal": "text"myObject.animal
3<animal name="value" />"animal": {"@name": "value"}myObject.animal["@name"]
4<animal name="value">text</animal>"animal": { "@name": "value", "keyValue": "text" }myObject.animal["@name"], myObject.animal.keyValue
5<animal> <dog>Charlie</dog> <cat>Deka</cat> </animal>"animal": { "dog": "Charlie", "cat": "Deka" }myObject.animal.dog, myObject.animal.cat
6<animal> <dog>Charlie</dog> <dog>Mad Max</dog> </animal>"animal": { "dog": ["Charlie", "Mad Max"] }myObject.animal.dog[0], myObject.animal.dog[1]
7<animal> in my house <dog>Charlie</dog> </animal>"animal": { "keyValue": "in my house", "dog": "Charlie" }myObject.animal.keyValue, myObject.animal.dog
8<animal> in my ho <dog>Charlie</dog> use </animal>"animal": { "keyValue": "in my house", "dog": "Charlie" }myObject.animal.keyValue, myObject.animal.dog
+ +

Considerazioni sul codice

+ +

In these examples we chose to use a property named keyValue 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 Element nodes which contain also other child nodes. Sometimes it is used a property called $. Other times it is used a property called #text. In the algorithms proposed here you can easily change this name, depending on your needs.

+ +

The choice of using a true value instead of a null 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 Boolean content, as in this case:

+ +
<car>
+  <type>Ferrari</type>
+  <bought />
+</car>
+
+ +

If the value were null it would be more cumbersome to launch a code like this:

+ +
if (myObject.car.bought) {
+  // do something
+}
+
+ +
According to our terzo algoritmo and our quarto algoritmo, just Text nodes or CDATASection nodes which contain nothing but white spaces (precisely: /^\s+$/) are parsed as null.
+ +

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:

+ +
{
+  "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!"
+}
+
+ +

you must just create an XML document with the following structure:

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

This example also shows how the ideal JXON document is an XML document designed specifically to be converted in JSON format.

+ +

Costruire file a partire da istanze di Document

+ +

First, create a DOM tree as described in the Come creare un albero DOM article. If you have already have a DOM tree from using XMLHttpRequest, skip to the end of this section.

+ +

Now, let's serialize doc — the DOM tree — to a file (you can read more about using files in Mozilla):

+ +
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();
+
+ +

Costruire file a partire da istanze di XMLHttpRequest

+ +

If you already have a DOM tree from using XMLHttpRequest, use the same code as above but replace serializer.serializeToStream(doc, oFOStream, "") with serializer.serializeToStream(xmlHttpRequest.responseXML.documentElement, oFOStream, "") where xmlHttpRequest is an instance of XMLHttpRequest.

+ +

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 xmlHttpRequest.responseText directly.

+ +

Resources

+ + diff --git a/files/it/web/html/attributes/index.html b/files/it/web/html/attributes/index.html new file mode 100644 index 0000000000..7bb21c96a2 --- /dev/null +++ b/files/it/web/html/attributes/index.html @@ -0,0 +1,590 @@ +--- +title: Attributi +slug: Web/HTML/Attributi +translation_of: Web/HTML/Attributes +--- +

Gli elementi in HTML hanno attributi; questi sono valori addizionali che configurano l'elemento o modificano in vari modi il suo comportamento.

+

Lista degli attributi

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Nome dell'attributoElementi supportatiDescrizione
accept{{ HTMLElement("form") }}, {{ HTMLElement("input") }}Lista di tipi che il server accetta, normalmente un file di tipo type.
accept-charset{{ HTMLElement("form") }}Lista delle codifiche di caratteri supportate.
accesskeyAttributo globaleDefinisce una scorciatoia da tastiera per attivare o aggiungere il focus all'elemento.
action{{ HTMLElement("form") }}L' URI di un programma che processa le informazioni inviate per mezzo di un modulo.
align{{ HTMLElement("applet") }}, {{ HTMLElement("caption") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }},  {{ HTMLElement("hr") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }},  {{ HTMLElement("td") }},  {{ HTMLElement("tfoot") }} , {{ HTMLElement("th") }}, {{ HTMLElement("thead") }}, {{ HTMLElement("tr") }}Specifica l'allineamento orizzontale dell'elemento.
alt +

{{ HTMLElement("applet") }}, {{ HTMLElement("area") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}

+ 		Testo alternativo in caso un immagine non possa essere visualizzata.
async{{ HTMLElement("script") }}Indica che lo script deve essere eseguito in modalità asincrona.
autocomplete{{ HTMLElement("form") }}, {{ HTMLElement("input") }}Indica che i controlli in questo modulo possono, di defaut, avere il loro valore completato automaticamente dal browser.
autofocus{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}L'elemento riceve il focus automaticamente dopo il caricamento della pagina.
autoplay{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}L'audio o il video devo partire appena possibile.
bgcolor{{ HTMLElement("body") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }}, {{ HTMLElement("tfoot") }}, {{ HTMLElement("td") }}, {{ HTMLElement("th") }}, {{ HTMLElement("tr") }} +

Colore di sottofondo dell'elemento.

+

Nota: Questo è un attibuto ereditato. Utilizzare la proprietà {{ Cssxref("background-color") }} in sostituzione.

+
border{{ HTMLElement("img") }}, {{ HTMLElement("object") }}, {{ HTMLElement("table") }} +

La larghezza del bordo.

+

Nota: Questo è un attributo ereditato. Utilizzare la proprietà  CSS {{ Cssxref("border") }} in sostituzione.

+
buffered{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}Contiene l'intervallo di tempo del media già bufferizzato.
challenge{{ HTMLElement("keygen") }}Una stringa che viene presentata con la chiave pubblica.
charset{{ HTMLElement("meta") }}, {{ HTMLElement("script") }}Dichiara la codifica di caratteri della pagina o dello script.
checked{{ HTMLElement("command") }}, {{ HTMLElement("input") }}Indica che l'elemento deve essere conrollato al caricamento della pagina.
cite{{ HTMLElement("blockquote") }}, {{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("q") }}Contiene un URI che punta alla sorgente di quanto citato o modificato.
classAttributo globaleUsato spesso con i CSS per modellare elementi con proprietà comuni.
code{{ HTMLElement("applet") }}Specifica l'URL del file class della applet che deve essere caricato ed eseguito.
codebase{{ HTMLElement("applet") }}Questo attibuto fornisce l'URL assoluto o relativo della directory dove il file .class dell'applet  referenziata dall'attributo code è memorizzato.
color{{ HTMLElement("basefont") }}, {{ HTMLElement("font") }}, {{ HTMLElement("hr") }} +

Questo attributo imposta il colore del testo utilizzando un nome colore o specificando il suo valore in formato esadecimale #RRGGBB.

+

Note: Questo è un attributo ereditato. Utilizzare la proprietà CSS {{ Cssxref("color") }} in sostituzione.

+
cols{{ HTMLElement("textarea") }}Definisce il numero delle colonne in un'area di testo.
colspan{{ HTMLElement("td") }}, {{ HTMLElement("th") }}L'attributo colspan definisce il numero delle colonne nelle quali una cella dovrebbe espandersi.
content{{ HTMLElement("meta") }}Un valore associato con http-equiv o name a seconda del contesto.
contenteditableAttributo globaleIndica che il contenuto dell'elemento è editabile.
contextmenuAttributo globaleDefinisce l'ID di un elemento {{ HTMLElement("menu") }} che servirà come menù contestuale dell'elemento.
controls{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}Indica che il browser deve visualizzare i controlli di playack per l'utente.
coords{{ HTMLElement("area") }}Una serie di valori che specificano le coordinate di un area selezionabile all'interno di una regione.
data{{ HTMLElement("object") }}Specifica l'URL della risorsa.
datetime{{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("time") }}Indica data e ora associate con l'elemento.
default{{ HTMLElement("track") }}Indica che la traccia deve essere abilitata a meno che le preferenze dell'utente indichino diversamente.
defer{{ HTMLElement("script") }}Indicano che lo script deve essere eseguito dopo che la pagina è stata analizzata.
dirAttributo globaleDefinisce la direzione del testo. I valori permessi sono ltr (Left-To-Right: da sinistra a destra) or rtl (Right-To-Left: da destra a sinistra)
dirname{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }} 
disabled{{ HTMLElement("button") }}, {{ HTMLElement("command") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Indica che l'utente non può interagire con l'elemento.
download{{ HTMLElement("a") }}, {{ HTMLElement("area") }}Indica che il collegamento ipertestuale è da utilizzare per scaricare una risorsa.
draggableAttributo globaleDefinisce l'elemeno come trascinabile.
dropzoneAttributo globaleIndica che l'elemento consente l'eliminazione dei contenuti da esso.
enctype{{ HTMLElement("form") }}Definisce il tipo di contenuto dei dati del form quando il method è POST.
for{{ HTMLElement("label") }}, {{ HTMLElement("output") }}Descrive elementi che appartengono a questo.
form{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("label") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Indicano il form al quale l'elemento si riferisce.
headers{{ HTMLElement("td") }}, {{ HTMLElement("th") }}L'ID che gli elementi <th> applicano a quest'ultimi.
height{{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }}Note: In qualche caso, come per {{ HTMLElement("div") }}, questo attributo è ereditato, e quindi deve essere usata la proprietà CSS {{ Cssxref("height") }} in sostituzione. In altri casi, come per {{ HTMLElement("canvas") }}, l'altezza deve essere specificata con questo attributo.
hiddenGlobal attributeIndica la rilevanza di un elemento.
high{{ HTMLElement("meter") }}Indica il limite inferiore del range superiore
href{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("link") }} L'URL di una risorsa collegata.
hreflang{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}Specifica la lingua della risorsa collegata.
http-equiv{{ HTMLElement("meta") }} 
icon{{ HTMLElement("command") }}Spefifica una figura che rappresenta il comando.
idAttributo globaleSpesso utilizzato con CSS per applicare uno stile ad uno specifico elemento. Il valore di questo attributo deve essere unico.
ismap{{ HTMLElement("img") }}Indica che l'immagine è una parte della mappa immagine lato server.
itempropAttributo globale 
keytype{{ HTMLElement("keygen") }}Specifica il tipo della chiave da generata.
kind{{ HTMLElement("track") }}Specifica il tipo della traccia di testo.
label{{ HTMLElement("track") }}Specifica un titolo leggibile dall'utente della traccia di testo.
langAttributo globaleDefinisce la lingua usata nell'elemento.
language{{ HTMLElement("script") }}Definisce la lingua dello script usato nell'elemento.
list{{ HTMLElement("input") }}Identifica una lista di opzioni predefinite da suggerire all'utente.
loop{{ HTMLElement("audio") }}, {{ HTMLElement("bgsound") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("video") }}Indica che il media deve essere riprodotto dall'inizio quando terminato.
low{{ HTMLElement("meter") }}Indica il valore limite superiore del campo inferiore.
manifest{{ HTMLElement("html") }}Specifica l'URL del manifesto della cache del documento.
max{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}Indica il valore massimo consentito.
maxlength{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Definisce il numero massimo di caratteri consentiti nell'elemento.
media{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}Specifica un suggerimento del media per il quale è stata disegnata la risorsa.
method{{ HTMLElement("form") }}Definisce il metodo HTTP da usare alla sottomissione del form. Può essere GET (default) o POST.
min{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}Indica il valore minimo consentito.
multiple{{ HTMLElement("input") }}, {{ HTMLElement("select") }}Indica che possono essere inseriti valori multipi come input ad un tipo email o file.
name{{ HTMLElement("button") }}, {{ HTMLElement("form") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}, {{ HTMLElement("map") }}, {{ HTMLElement("meta") }}, {{ HTMLElement("param") }}Nome dell'elemento. E' ad esempio utilizzato dal server per identificare i campi nel form suttomesso.
novalidate{{ HTMLElement("form") }}Questo attributo indica che il form non deve essere validato alla sottomissione.
open{{ HTMLElement("details") }}Indica se i dettagli verranno visualizzati al caricamento della pagina.
optimum{{ HTMLElement("meter") }}Indica il valore numerico ottimale.
pattern{{ HTMLElement("input") }}Definisce un'espressione regolare con la quale validare il valore dell'elemento.
ping{{ HTMLElement("a") }}, {{ HTMLElement("area") }} 
placeholder{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Fornisce un suggerimento all'utente circa cosa può essere inserito nel campo.
poster{{ HTMLElement("video") }}Un URL che indica un fotogramma da mostrare finché l'utente esegue o cerca.
preload{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}Indica se l'intera risorsa, parte di essa o niente deve essere precaricata.
pubdate{{ HTMLElement("time") }}Indica che queste data e ora sono dati dell'elemento progenitore più vicino {{ HTMLElement("article") }}.
radiogroup{{ HTMLElement("command") }} 
readonly{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Indica se l'elemento è editabile.
rel{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}Specifica la relazione dell'oggetto obbiettivo con l'oggetto di collegamento.
required{{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Indica se questo elemento deve essere compilato o meno.
reversed{{ HTMLElement("ol") }}Indica se l'elenco deve essere visualizzato in ordine decrescente anzichè ascendente.
rows{{ HTMLElement("textarea") }}Definisce il numero di righe in area di testo.
rowspan{{ HTMLElement("td") }}, {{ HTMLElement("th") }}Definisce il numero di righe sopra le quali si estende la cella della tabella.
sandbox{{ HTMLElement("iframe") }} 
spellcheckAttributo globaleIndica se il controllo ortografico è consentito per l'elemento.
scope{{ HTMLElement("th") }} 
scoped{{ HTMLElement("style") }} 
seamless{{ HTMLElement("iframe") }} 
selected{{ HTMLElement("option") }}Definisce un valore che sarà selezionato al caricamento della pagina.
shape{{ HTMLElement("a") }}, {{ HTMLElement("area") }} 
size{{ HTMLElement("input") }}, {{ HTMLElement("select") }}Definisce la larghezza dell'elemento (in pixel). Se l'attributo type dell'elemento è text o password rappresenta il numero di caratteri.
sizes{{ HTMLElement("link") }} 
span{{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }} 
src{{ HTMLElement("audio") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("track") }}, {{ HTMLElement("video") }}L'URL del contenuto incorporabile.
srcdoc{{ HTMLElement("iframe") }} 
srclang{{ HTMLElement("track") }} 
start{{ HTMLElement("ol") }}Definisce il primo numero se diverso da 1.
step{{ HTMLElement("input") }} 
styleAttributo globaleDefinisce gli stili CSS che sovrasteranno gli stili precedentemente impostati.
summary{{ HTMLElement("table") }} 
tabindexAttributo globaleSovrascrive l'ordinamento della tabella impostato di default dal browser e segue quello specificato al posto suo.
target{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("form") }} 
titleAttributo globaleTesto da visualizzare in un suggerimento quando si passa sopra all'elemento.
type{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("command") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("object") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}, {{ HTMLElement("menu") }}Definisce il tipo dell'elemento.
usemap{{ HTMLElement("img") }},  {{ HTMLElement("input") }}, {{ HTMLElement("object") }} 
value{{ HTMLElement("button") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("li") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("param") }}Definisce un valore di default che verrà visualizzato nell'elemento al caricamento della pagina.
width{{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }}Nota: In qualche caso, come per {{ HTMLElement("div") }}, questo è un attributo ereditato, quindi deve essere utilizzata la proprietà CSS {{ Cssxref("width") }} in sostituzione. In altri casi, come per {{ HTMLElement("canvas") }}, la larghezza deve essere specificata con questo attributo.
wrap{{ HTMLElement("textarea") }}Indica se il testo deve essere circondato.
+

Attributi di contenuto contro attributi IDL

+

In HTML, molti attributi hanno due facce: l'attributo di contenuto e l'attributo IDL.

+

L'attributo del contenuto è quello che viene impostato nel contenuto (il codice HTML) e può essere impostato o ricavato tramite {{domxref("element.setAttribute()")}} o {{domxref("element.getAttribute()")}}. L'attributo di contenuto è sempre una stringa, anche quando il valore aspettato dovrebbe essere un intero. Ad esempio, per impostare il maxlength di un elemento {{HTMLElement("input")}} a 42 usando l'attributo di contenuto, occorre chiamare setAttribute("maxlength", "42") su quell'elemento.

+

L'attributo IDL è conosciuto anche come proprietà JavaScript. Questi attributi possono essere letti o impostati utilizzando proprietà JavaScript come element.foo. L'attributo IDL utilizzerà sempre (ma potrebbe trasformare) l'attributo di contenuto sottostante per ritornare un valore quando viene richiesto e salverà qualcosa nell'attributo di contenuto quando viene impostato. In altre parole, l'attributo IDL riflette, essenzialmente, l'attributo di contenuto.

+

Il più delle volte, l'attributo IDL ritornerà i loro valori così come sono realmente utilizzati. Ad esempio, il type di default per gli elementi {{HTMLElement("input")}} è "text", se viene impostato come input.type="foobar", l'elemento <input> sarà di tipo testo (nell'apparenza e nel comportamento) ma il valore dell'attributo di contenuto "type" sarà "foobar". Tuttavia, l'attributo IDL type ritornerà la stringa "text".

+

Gli attributi IDL non sono sempre stringhe; ad esempio, input.maxlength è un numero (un long segnato). Quando viene utilizzato l'attributo IDL, viene letto o impostato il valore del tipo desiderato, quindi input.maxlength ritornerà sempre un numero e quando si imposta input.maxlength ,esso vuole un numero. Se viene passato un altro tipo, sarà automaticamente convertito in numero così come specificato dalle regole Javascript standard per la conversione di tipo.

+

L'attributo IDL può riflettere altri tipi come long senza segno, URL, valori booleani, etc. Sfortunatamente, non ci sono regole chiare e il modo con il quale si comportano gli attributi IDL in congiunzione con il loro contenuto corrispondente dipenda dall'attributo stesso. Il più delle volte, seguirà le norme stabilite nelle specifiche, ma a volte no. Le specifiche HTML tentano di renderlo il più possibile facile per gli sviluppatori, ma per varie ragioni (soprattutto storiche), alcuni attributi  si comportano stranamente (select.size, ad esempio) e occorre leggere le specifiche per comprendere esattamente il loro comportamento.

+

Vedi anche

+ +

{{ languages( { "fr": "fr/HTML/Attributs", "en": "en/HTML/Attributes", "ja": "ja/HTML/Attributes" } ) }}

diff --git a/files/it/web/html/attributi/index.html b/files/it/web/html/attributi/index.html deleted file mode 100644 index 7bb21c96a2..0000000000 --- a/files/it/web/html/attributi/index.html +++ /dev/null @@ -1,590 +0,0 @@ ---- -title: Attributi -slug: Web/HTML/Attributi -translation_of: Web/HTML/Attributes ---- -

Gli elementi in HTML hanno attributi; questi sono valori addizionali che configurano l'elemento o modificano in vari modi il suo comportamento.

-

Lista degli attributi

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Nome dell'attributoElementi supportatiDescrizione
accept{{ HTMLElement("form") }}, {{ HTMLElement("input") }}Lista di tipi che il server accetta, normalmente un file di tipo type.
accept-charset{{ HTMLElement("form") }}Lista delle codifiche di caratteri supportate.
accesskeyAttributo globaleDefinisce una scorciatoia da tastiera per attivare o aggiungere il focus all'elemento.
action{{ HTMLElement("form") }}L' URI di un programma che processa le informazioni inviate per mezzo di un modulo.
align{{ HTMLElement("applet") }}, {{ HTMLElement("caption") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }},  {{ HTMLElement("hr") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }},  {{ HTMLElement("td") }},  {{ HTMLElement("tfoot") }} , {{ HTMLElement("th") }}, {{ HTMLElement("thead") }}, {{ HTMLElement("tr") }}Specifica l'allineamento orizzontale dell'elemento.
alt -

{{ HTMLElement("applet") }}, {{ HTMLElement("area") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}

- 		Testo alternativo in caso un immagine non possa essere visualizzata.
async{{ HTMLElement("script") }}Indica che lo script deve essere eseguito in modalità asincrona.
autocomplete{{ HTMLElement("form") }}, {{ HTMLElement("input") }}Indica che i controlli in questo modulo possono, di defaut, avere il loro valore completato automaticamente dal browser.
autofocus{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}L'elemento riceve il focus automaticamente dopo il caricamento della pagina.
autoplay{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}L'audio o il video devo partire appena possibile.
bgcolor{{ HTMLElement("body") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }}, {{ HTMLElement("tfoot") }}, {{ HTMLElement("td") }}, {{ HTMLElement("th") }}, {{ HTMLElement("tr") }} -

Colore di sottofondo dell'elemento.

-

Nota: Questo è un attibuto ereditato. Utilizzare la proprietà {{ Cssxref("background-color") }} in sostituzione.

-
border{{ HTMLElement("img") }}, {{ HTMLElement("object") }}, {{ HTMLElement("table") }} -

La larghezza del bordo.

-

Nota: Questo è un attributo ereditato. Utilizzare la proprietà  CSS {{ Cssxref("border") }} in sostituzione.

-
buffered{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}Contiene l'intervallo di tempo del media già bufferizzato.
challenge{{ HTMLElement("keygen") }}Una stringa che viene presentata con la chiave pubblica.
charset{{ HTMLElement("meta") }}, {{ HTMLElement("script") }}Dichiara la codifica di caratteri della pagina o dello script.
checked{{ HTMLElement("command") }}, {{ HTMLElement("input") }}Indica che l'elemento deve essere conrollato al caricamento della pagina.
cite{{ HTMLElement("blockquote") }}, {{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("q") }}Contiene un URI che punta alla sorgente di quanto citato o modificato.
classAttributo globaleUsato spesso con i CSS per modellare elementi con proprietà comuni.
code{{ HTMLElement("applet") }}Specifica l'URL del file class della applet che deve essere caricato ed eseguito.
codebase{{ HTMLElement("applet") }}Questo attibuto fornisce l'URL assoluto o relativo della directory dove il file .class dell'applet  referenziata dall'attributo code è memorizzato.
color{{ HTMLElement("basefont") }}, {{ HTMLElement("font") }}, {{ HTMLElement("hr") }} -

Questo attributo imposta il colore del testo utilizzando un nome colore o specificando il suo valore in formato esadecimale #RRGGBB.

-

Note: Questo è un attributo ereditato. Utilizzare la proprietà CSS {{ Cssxref("color") }} in sostituzione.

-
cols{{ HTMLElement("textarea") }}Definisce il numero delle colonne in un'area di testo.
colspan{{ HTMLElement("td") }}, {{ HTMLElement("th") }}L'attributo colspan definisce il numero delle colonne nelle quali una cella dovrebbe espandersi.
content{{ HTMLElement("meta") }}Un valore associato con http-equiv o name a seconda del contesto.
contenteditableAttributo globaleIndica che il contenuto dell'elemento è editabile.
contextmenuAttributo globaleDefinisce l'ID di un elemento {{ HTMLElement("menu") }} che servirà come menù contestuale dell'elemento.
controls{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}Indica che il browser deve visualizzare i controlli di playack per l'utente.
coords{{ HTMLElement("area") }}Una serie di valori che specificano le coordinate di un area selezionabile all'interno di una regione.
data{{ HTMLElement("object") }}Specifica l'URL della risorsa.
datetime{{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("time") }}Indica data e ora associate con l'elemento.
default{{ HTMLElement("track") }}Indica che la traccia deve essere abilitata a meno che le preferenze dell'utente indichino diversamente.
defer{{ HTMLElement("script") }}Indicano che lo script deve essere eseguito dopo che la pagina è stata analizzata.
dirAttributo globaleDefinisce la direzione del testo. I valori permessi sono ltr (Left-To-Right: da sinistra a destra) or rtl (Right-To-Left: da destra a sinistra)
dirname{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }} 
disabled{{ HTMLElement("button") }}, {{ HTMLElement("command") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Indica che l'utente non può interagire con l'elemento.
download{{ HTMLElement("a") }}, {{ HTMLElement("area") }}Indica che il collegamento ipertestuale è da utilizzare per scaricare una risorsa.
draggableAttributo globaleDefinisce l'elemeno come trascinabile.
dropzoneAttributo globaleIndica che l'elemento consente l'eliminazione dei contenuti da esso.
enctype{{ HTMLElement("form") }}Definisce il tipo di contenuto dei dati del form quando il method è POST.
for{{ HTMLElement("label") }}, {{ HTMLElement("output") }}Descrive elementi che appartengono a questo.
form{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("label") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Indicano il form al quale l'elemento si riferisce.
headers{{ HTMLElement("td") }}, {{ HTMLElement("th") }}L'ID che gli elementi <th> applicano a quest'ultimi.
height{{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }}Note: In qualche caso, come per {{ HTMLElement("div") }}, questo attributo è ereditato, e quindi deve essere usata la proprietà CSS {{ Cssxref("height") }} in sostituzione. In altri casi, come per {{ HTMLElement("canvas") }}, l'altezza deve essere specificata con questo attributo.
hiddenGlobal attributeIndica la rilevanza di un elemento.
high{{ HTMLElement("meter") }}Indica il limite inferiore del range superiore
href{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("link") }} L'URL di una risorsa collegata.
hreflang{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}Specifica la lingua della risorsa collegata.
http-equiv{{ HTMLElement("meta") }} 
icon{{ HTMLElement("command") }}Spefifica una figura che rappresenta il comando.
idAttributo globaleSpesso utilizzato con CSS per applicare uno stile ad uno specifico elemento. Il valore di questo attributo deve essere unico.
ismap{{ HTMLElement("img") }}Indica che l'immagine è una parte della mappa immagine lato server.
itempropAttributo globale 
keytype{{ HTMLElement("keygen") }}Specifica il tipo della chiave da generata.
kind{{ HTMLElement("track") }}Specifica il tipo della traccia di testo.
label{{ HTMLElement("track") }}Specifica un titolo leggibile dall'utente della traccia di testo.
langAttributo globaleDefinisce la lingua usata nell'elemento.
language{{ HTMLElement("script") }}Definisce la lingua dello script usato nell'elemento.
list{{ HTMLElement("input") }}Identifica una lista di opzioni predefinite da suggerire all'utente.
loop{{ HTMLElement("audio") }}, {{ HTMLElement("bgsound") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("video") }}Indica che il media deve essere riprodotto dall'inizio quando terminato.
low{{ HTMLElement("meter") }}Indica il valore limite superiore del campo inferiore.
manifest{{ HTMLElement("html") }}Specifica l'URL del manifesto della cache del documento.
max{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}Indica il valore massimo consentito.
maxlength{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Definisce il numero massimo di caratteri consentiti nell'elemento.
media{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}Specifica un suggerimento del media per il quale è stata disegnata la risorsa.
method{{ HTMLElement("form") }}Definisce il metodo HTTP da usare alla sottomissione del form. Può essere GET (default) o POST.
min{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}Indica il valore minimo consentito.
multiple{{ HTMLElement("input") }}, {{ HTMLElement("select") }}Indica che possono essere inseriti valori multipi come input ad un tipo email o file.
name{{ HTMLElement("button") }}, {{ HTMLElement("form") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}, {{ HTMLElement("map") }}, {{ HTMLElement("meta") }}, {{ HTMLElement("param") }}Nome dell'elemento. E' ad esempio utilizzato dal server per identificare i campi nel form suttomesso.
novalidate{{ HTMLElement("form") }}Questo attributo indica che il form non deve essere validato alla sottomissione.
open{{ HTMLElement("details") }}Indica se i dettagli verranno visualizzati al caricamento della pagina.
optimum{{ HTMLElement("meter") }}Indica il valore numerico ottimale.
pattern{{ HTMLElement("input") }}Definisce un'espressione regolare con la quale validare il valore dell'elemento.
ping{{ HTMLElement("a") }}, {{ HTMLElement("area") }} 
placeholder{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Fornisce un suggerimento all'utente circa cosa può essere inserito nel campo.
poster{{ HTMLElement("video") }}Un URL che indica un fotogramma da mostrare finché l'utente esegue o cerca.
preload{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}Indica se l'intera risorsa, parte di essa o niente deve essere precaricata.
pubdate{{ HTMLElement("time") }}Indica che queste data e ora sono dati dell'elemento progenitore più vicino {{ HTMLElement("article") }}.
radiogroup{{ HTMLElement("command") }} 
readonly{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Indica se l'elemento è editabile.
rel{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}Specifica la relazione dell'oggetto obbiettivo con l'oggetto di collegamento.
required{{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Indica se questo elemento deve essere compilato o meno.
reversed{{ HTMLElement("ol") }}Indica se l'elenco deve essere visualizzato in ordine decrescente anzichè ascendente.
rows{{ HTMLElement("textarea") }}Definisce il numero di righe in area di testo.
rowspan{{ HTMLElement("td") }}, {{ HTMLElement("th") }}Definisce il numero di righe sopra le quali si estende la cella della tabella.
sandbox{{ HTMLElement("iframe") }} 
spellcheckAttributo globaleIndica se il controllo ortografico è consentito per l'elemento.
scope{{ HTMLElement("th") }} 
scoped{{ HTMLElement("style") }} 
seamless{{ HTMLElement("iframe") }} 
selected{{ HTMLElement("option") }}Definisce un valore che sarà selezionato al caricamento della pagina.
shape{{ HTMLElement("a") }}, {{ HTMLElement("area") }} 
size{{ HTMLElement("input") }}, {{ HTMLElement("select") }}Definisce la larghezza dell'elemento (in pixel). Se l'attributo type dell'elemento è text o password rappresenta il numero di caratteri.
sizes{{ HTMLElement("link") }} 
span{{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }} 
src{{ HTMLElement("audio") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("track") }}, {{ HTMLElement("video") }}L'URL del contenuto incorporabile.
srcdoc{{ HTMLElement("iframe") }} 
srclang{{ HTMLElement("track") }} 
start{{ HTMLElement("ol") }}Definisce il primo numero se diverso da 1.
step{{ HTMLElement("input") }} 
styleAttributo globaleDefinisce gli stili CSS che sovrasteranno gli stili precedentemente impostati.
summary{{ HTMLElement("table") }} 
tabindexAttributo globaleSovrascrive l'ordinamento della tabella impostato di default dal browser e segue quello specificato al posto suo.
target{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("form") }} 
titleAttributo globaleTesto da visualizzare in un suggerimento quando si passa sopra all'elemento.
type{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("command") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("object") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}, {{ HTMLElement("menu") }}Definisce il tipo dell'elemento.
usemap{{ HTMLElement("img") }},  {{ HTMLElement("input") }}, {{ HTMLElement("object") }} 
value{{ HTMLElement("button") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("li") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("param") }}Definisce un valore di default che verrà visualizzato nell'elemento al caricamento della pagina.
width{{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }}Nota: In qualche caso, come per {{ HTMLElement("div") }}, questo è un attributo ereditato, quindi deve essere utilizzata la proprietà CSS {{ Cssxref("width") }} in sostituzione. In altri casi, come per {{ HTMLElement("canvas") }}, la larghezza deve essere specificata con questo attributo.
wrap{{ HTMLElement("textarea") }}Indica se il testo deve essere circondato.
-

Attributi di contenuto contro attributi IDL

-

In HTML, molti attributi hanno due facce: l'attributo di contenuto e l'attributo IDL.

-

L'attributo del contenuto è quello che viene impostato nel contenuto (il codice HTML) e può essere impostato o ricavato tramite {{domxref("element.setAttribute()")}} o {{domxref("element.getAttribute()")}}. L'attributo di contenuto è sempre una stringa, anche quando il valore aspettato dovrebbe essere un intero. Ad esempio, per impostare il maxlength di un elemento {{HTMLElement("input")}} a 42 usando l'attributo di contenuto, occorre chiamare setAttribute("maxlength", "42") su quell'elemento.

-

L'attributo IDL è conosciuto anche come proprietà JavaScript. Questi attributi possono essere letti o impostati utilizzando proprietà JavaScript come element.foo. L'attributo IDL utilizzerà sempre (ma potrebbe trasformare) l'attributo di contenuto sottostante per ritornare un valore quando viene richiesto e salverà qualcosa nell'attributo di contenuto quando viene impostato. In altre parole, l'attributo IDL riflette, essenzialmente, l'attributo di contenuto.

-

Il più delle volte, l'attributo IDL ritornerà i loro valori così come sono realmente utilizzati. Ad esempio, il type di default per gli elementi {{HTMLElement("input")}} è "text", se viene impostato come input.type="foobar", l'elemento <input> sarà di tipo testo (nell'apparenza e nel comportamento) ma il valore dell'attributo di contenuto "type" sarà "foobar". Tuttavia, l'attributo IDL type ritornerà la stringa "text".

-

Gli attributi IDL non sono sempre stringhe; ad esempio, input.maxlength è un numero (un long segnato). Quando viene utilizzato l'attributo IDL, viene letto o impostato il valore del tipo desiderato, quindi input.maxlength ritornerà sempre un numero e quando si imposta input.maxlength ,esso vuole un numero. Se viene passato un altro tipo, sarà automaticamente convertito in numero così come specificato dalle regole Javascript standard per la conversione di tipo.

-

L'attributo IDL può riflettere altri tipi come long senza segno, URL, valori booleani, etc. Sfortunatamente, non ci sono regole chiare e il modo con il quale si comportano gli attributi IDL in congiunzione con il loro contenuto corrispondente dipenda dall'attributo stesso. Il più delle volte, seguirà le norme stabilite nelle specifiche, ma a volte no. Le specifiche HTML tentano di renderlo il più possibile facile per gli sviluppatori, ma per varie ragioni (soprattutto storiche), alcuni attributi  si comportano stranamente (select.size, ad esempio) e occorre leggere le specifiche per comprendere esattamente il loro comportamento.

-

Vedi anche

- -

{{ languages( { "fr": "fr/HTML/Attributs", "en": "en/HTML/Attributes", "ja": "ja/HTML/Attributes" } ) }}

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

Most of this content (but not the documentation on drawWindow) has been rolled into the more expansive Canvas tutorial, this page should probably be redirected there as it's now redundant but some information may still be relevant.

-
-

Introduction

-

With Firefox 1.5, Firefox includes a new HTML element for programmable graphics. <canvas> is based on the WHATWG canvas specification, which itself is based on Apple's <canvas> implemented in Safari. It can be used for rendering graphs, UI elements, and other custom graphics on the client.

-

<canvas> creates a fixed size drawing surface that exposes one or more rendering contexts. We'll focus on the 2D rendering context. For 3D graphics, you should use the WebGL rendering context.

-

The 2D Rendering Context

-

A Simple Example

-

To start off, here's a simple example that draws two intersecting rectangles, one of which has alpha transparency:

-
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);
-}
-
- -

{{EmbedLiveSample('A_Simple_Example','150','150','/@api/deki/files/602/=Canvas_ex1.png')}}

-

The draw function gets the canvas element, then obtains the 2d context. The ctx 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 fillRect. The second fillStyle uses rgba() to specify an alpha value along with the color.

-

The fillRect, strokeRect, and clearRect calls render a filled, outlined, or clear rectangle. To render more complex shapes, paths are used.

-

Using Paths

-

The beginPath function starts a new path, and moveTo, lineTo, arcTo, arc, and similar methods are used to add segments to the path. The path can be closed using closePath. Once a path is created, you can use fill or stroke to render the path to the canvas.

-
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();
-}
-
- -

{{EmbedLiveSample('Using_Paths','190','190','/@api/deki/files/603/=Canvas_ex2.png')}}

-

Calling fill() or stroke() causes the current path to be used. To be filled or stroked again, the path must be recreated.

-

Graphics State

-

Attributes of the context such as fillStyle, strokeStyle, lineWidth, and lineJoin are part of the current graphics state. The context provides two methods, save() and restore(), that can be used to move the current state to and from the state stack.

-

A More Complicated Example

-

Here's a little more complicated example, that uses paths, state, and also introduces the current transformation matrix. The context methods translate(), scale(), and rotate() all transform the current matrix. All rendered points are first transformed by this matrix.

-
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();
-}
-
- -

{{EmbedLiveSample('A_More_Complicated_Example','215','215','/@api/deki/files/604/=Canvas_ex3.png')}}

-

This defines two methods, drawBowtie and dot, that are called 4 times. Before each call, translate() and rotate() are used to set up the current transformation matrix, which in turn positions the dot and the bowtie. dot renders a small black square centered at (0, 0). That dot is moved around by the transformation matrix. drawBowtie renders a simple bowtie path using the passed-in fill style.

-

As matrix operations are cumulative, save() and restore() 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 translate() rotate() translate() sequence will yield different results than a translate() translate() rotate() series of calls.

-

Compatibility With Apple <canvas>

-

For the most part, <canvas> is compatible with Apple's and other implementations. There are, however, a few issues to be aware of, described here.

-

Required </canvas> tag

-

In the Apple Safari implementation, <canvas> is an element implemented in much the same way <img> is; it does not have an end tag. However, for <canvas> to have widespread use on the web, some facility for fallback content must be provided. Therefore, Mozilla's implementation has a required end tag.

-

If fallback content is not needed, a simple <canvas id="foo" ...></canvas> will be fully compatible with both Safari and Mozilla -- Safari will simply ignore the end tag.

-

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

-
canvas {
-  font-size: 0.00001px !ie;
-}
-

Additional Features

-

Rendering Web Content Into A Canvas

-
- This feature is only available for code running with Chrome privileges. It is not allowed in normal HTML pages. Read why.
-

Mozilla's canvas is extended with the drawWindow() method. This method draws a snapshot of the contents of a DOM window into the canvas. For example,

-
ctx.drawWindow(window, 0, 0, 100, 200, "rgb(255,255,255)");
-
-

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

-

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.

-

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.

-

Ted Mielczarek's tab preview extension uses this technique in chrome to provide thumbnails of web pages, and the source is available for reference.

-
- Note: Using canvas.drawWindow() while handling a document's onload event doesn't work. In Firefox 3.5 or later, you can do this in a handler for the MozAfterPaint event to successfully draw HTML content into a canvas on page load.
-

See also

- diff --git a/files/it/web/html/canvas/index.html b/files/it/web/html/canvas/index.html deleted file mode 100644 index dcded63973..0000000000 --- a/files/it/web/html/canvas/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: Canvas -slug: Web/HTML/Canvas -translation_of: Web/API/Canvas_API ---- -

Aggiunto con HTML5, HTML {{ HTMLElement("canvas") }} è un elemento che può essere usato per disegnare elementi grafici tramite script (di solito JavaScript). Per esempio, può essere usato per disegnare grafici, creare composizioni fotografiche, creare animazioni e perfino realizzare elvaborazioni video in tempo reale.

- -

Le applicazioni Mozilla supportano <canvas> a partire da Gecko 1.8 (cioè Firefox 1.5). L'elemento è stato originariamente introdotto da Apple per OS X Dashboard e Safari. Internet Explorer supporta <canvas> dalla versione 9; per versioni precedenti di IE, una pagina può aggiungere il supporto per <canvas> includendo lo script del progetto Explorer Canvas di Google. Anche Google Chrome e Opera 9 supportano <canvas>.

- -

L'elemento <canvas> è utilizzato anche da WebGL per la grafica 3D con accellerazione hardware nelle pagine web.

- - - - - - - - -
-

Documentazione

- -
-
Specifiche
-
L'elemento <canvas> è parte delle specifiche 1.0 della WhatWG per le applicazioni  Web, anche conosciute come HTML5.
-
Esecitazione sui canvas
-
Un'esercitazione completa che copre sia l'utilizzo base  che le caratteristiche avanzate di <canvas>.
-
Frammenti di codice: Canvas
-
Qualche frammento di codice per gli sviluppatori di estensioni che coinvolge <canvas>.
-
Esempi di canvas
-
Alcune dimostraioni sui <canvas>.
-
Disegnare oggetti DOM in un canvas
-
Come disegnare contenuto DOM, come elementi HTML, in un canvas.
-
Un semplice raycaster
-
Una demo di animazione ray-tracing utilizzando il canvas.
-
Interfacce dei Canvas nel DOM
-
Interfacce dei Canvas nel DOM implementate in Gecko.
-
- -

Vedi tutto...

- 		-

Comunità

- -

Guarda i forum di Mozilla...{{DiscussionList("dev-tech-html","mozilla.dev.tech.html")}}
- Canvas-Developers Yahoo Group

- -

Risorse

- - - -

Librerie

- -
    -
  • libCanvas è un potente e leggero framework per canvas
    • -
  • Processing.js implementzione del linguaggio di visualizzazione Processing
    • -
  • EaselJS è una libreria con un'API simile a Flash
    • -
  • PlotKit è una libreria per la creazione di grafici e diagrammi
    • -
  • Rekapi è un'API per le animazioni Canvas basata sui keyframe
    • -
  • PhiloGL è un framework WebGL per la visualizzazione di dati, programmazione creativa e lo sviluppo di giochi.
    • -
  • JavaScript InfoVis Toolkit crea visualizzazioni di dati interattive per il Web con Canvas 2D
    • -
  • Frame-Engine è un framework per lo sviluppo di applicazioni e giochi
    • -
- - - - -
- -
{{ HTML5ArticleTOC() }}
diff --git a/files/it/web/html/element/figura/index.html b/files/it/web/html/element/figura/index.html deleted file mode 100644 index 6a1f4b019f..0000000000 --- a/files/it/web/html/element/figura/index.html +++ /dev/null @@ -1,170 +0,0 @@ ---- -title:
-slug: Web/HTML/Element/figura -tags: - - Element - - Image - - Information - - Presentation - - Reference -translation_of: Web/HTML/Element/figure ---- -
{{HTMLRef}}
- -

L'elemento HTML <figure> rappresenta un contenuto indipendente che può avere una descrizione tramite l'elemento ({{HTMLElement("figcaption")}}). L'immagine, la descrizione e il suo contenuto hanno riferimenti indipendenti.

- -
{{EmbedInteractiveExample("pages/tabbed/figure.html","tabbed-shorter")}}
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Categorie di contenutiContenuti di flusso, sezioni e struttura
Contenuti permessiL'elemento {{HTMLElement("figcaption")}}, seguito da contenuti di flusso; o contenuti di flusso seguiti dall'elemento {{HTMLElement("figcaption")}}; o contenuti di flusso.
Omissione del tag{{no_tag_omission}}
Genitori permessi -

Qualsiasi elemento che accetti Contenuti di flusso.

-
Ruoli ARIA permessi{{ARIARole("group")}}, {{ARIARole("presentation")}}
Interfaccia DOM{{domxref("HTMLElement")}}
- -

Attributi

- -

Questo elemento include gli attributi globali.

- -

Note sull'utilizzo

- - - -

Esempi

- -

Immagini

- -
<!-- Solo un'immagine -->
-<figure>
-  <img
-  src="https://developer.mozilla.org/static/img/favicon144.png"
-  alt="Il bellissimo logo MDN.">
-</figure>
-
-<!-- Un'immagine con descrizione -->
-<figure>
-  <img
-  src="https://developer.mozilla.org/static/img/favicon144.png"
-  alt="Il bellissimo logo MDN.">
-  <figcaption>MDN Logo</figcaption>
-</figure>
-
- -
{{EmbedLiveSample("Immagini", "100%", 375)}}
- -

Frammenti di codice

- -
<figure>
-  <figcaption>Ottieni dettagli sul browser utilizzando <code>navigator</code>.</figcaption>
-  <pre>
-function NavigatorExample() {
-  var txt;
-  txt = "Browser CodeName: " + navigator.appCodeName + "; ";
-  txt+= "Browser Name: " + navigator.appName + "; ";
-  txt+= "Browser Version: " + navigator.appVersion  + "; ";
-  txt+= "Cookies Enabled: " + navigator.cookieEnabled  + "; ";
-  txt+= "Platform: " + navigator.platform  + "; ";
-  txt+= "User-agent header: " + navigator.userAgent  + "; ";
-  console.log("NavigatorExample", txt);
-}
-  </pre>
-</figure>
- -
{{EmbedLiveSample("Frammenti_di_codice", "100%", 250)}}
- -

Citazioni

- -
<figure>
-  <figcaption><cite>Edsger Dijkstra:</cite></figcaption>
-  <blockquote>If debugging is the process of removing software bugs,
-  then programming must be the process of putting them in.</blockquote>
-</figure>
-
- -
{{EmbedLiveSample("Citazioni")}}
- -

Poemi

- -
<figure>
-  <p style="white-space:pre">
-Bid me discourse, I will enchant thine ear,
-  Or like a fairy trip upon the green,
-Or, like a nymph, with long dishevell'd hair,
-  Dance on the sands, and yet no footing seen:
-Love is a spirit all compact of fire,
-  Not gross to sink, but light, and will aspire.</p>
-  <figcaption><cite>Venus and Adonis</cite>,
-    by William Shakespeare</figcaption>
-</figure>
- -
{{EmbedLiveSample("Poemi", "100%", 250)}}
- -

Specifiche

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'semantics.html#the-figure-element', '<figure>')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.2', 'grouping-content.html#the-figure-element', '<figure>')}}{{Spec2('HTML5.2')}}Nessun cambiamento da HTML 5.0.
{{SpecName('HTML5 W3C', 'grouping-content.html#the-figure-element', '<figure>')}}{{Spec2('HTML5 W3C')}}
- -

Compatibilità dei browser

- - - -

{{Compat("html.elements.figure")}}

- -

See also

- - diff --git a/files/it/web/html/element/figure/index.html b/files/it/web/html/element/figure/index.html new file mode 100644 index 0000000000..6a1f4b019f --- /dev/null +++ b/files/it/web/html/element/figure/index.html @@ -0,0 +1,170 @@ +--- +title:
+slug: Web/HTML/Element/figura +tags: + - Element + - Image + - Information + - Presentation + - Reference +translation_of: Web/HTML/Element/figure +--- +
{{HTMLRef}}
+ +

L'elemento HTML <figure> rappresenta un contenuto indipendente che può avere una descrizione tramite l'elemento ({{HTMLElement("figcaption")}}). L'immagine, la descrizione e il suo contenuto hanno riferimenti indipendenti.

+ +
{{EmbedInteractiveExample("pages/tabbed/figure.html","tabbed-shorter")}}
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Categorie di contenutiContenuti di flusso, sezioni e struttura
Contenuti permessiL'elemento {{HTMLElement("figcaption")}}, seguito da contenuti di flusso; o contenuti di flusso seguiti dall'elemento {{HTMLElement("figcaption")}}; o contenuti di flusso.
Omissione del tag{{no_tag_omission}}
Genitori permessi +

Qualsiasi elemento che accetti Contenuti di flusso.

+
Ruoli ARIA permessi{{ARIARole("group")}}, {{ARIARole("presentation")}}
Interfaccia DOM{{domxref("HTMLElement")}}
+ +

Attributi

+ +

Questo elemento include gli attributi globali.

+ +

Note sull'utilizzo

+ +
    +
  • Solitamente l'elemento <figure> è un'immagine, un'illustrazione, un diagramma, un frammento di codice, etc., relativo al flusso principale di un documento, ma che può essere posizionato in un'altra parte del documento o all'appendice senza impatti sul flusso principale.
    • +
  • Può essere associata una descrizione all'elemento <figure> inserendo l'elemento {{HTMLElement("figcaption")}} al suo interno (sia come primo che come ultimo figlio). Il primo elemento <figcaption> trovato sarà utilizzato come descrizione.
    • +
+ +

Esempi

+ +

Immagini

+ +
<!-- Solo un'immagine -->
+<figure>
+  <img
+  src="https://developer.mozilla.org/static/img/favicon144.png"
+  alt="Il bellissimo logo MDN.">
+</figure>
+
+<!-- Un'immagine con descrizione -->
+<figure>
+  <img
+  src="https://developer.mozilla.org/static/img/favicon144.png"
+  alt="Il bellissimo logo MDN.">
+  <figcaption>MDN Logo</figcaption>
+</figure>
+
+ +
{{EmbedLiveSample("Immagini", "100%", 375)}}
+ +

Frammenti di codice

+ +
<figure>
+  <figcaption>Ottieni dettagli sul browser utilizzando <code>navigator</code>.</figcaption>
+  <pre>
+function NavigatorExample() {
+  var txt;
+  txt = "Browser CodeName: " + navigator.appCodeName + "; ";
+  txt+= "Browser Name: " + navigator.appName + "; ";
+  txt+= "Browser Version: " + navigator.appVersion  + "; ";
+  txt+= "Cookies Enabled: " + navigator.cookieEnabled  + "; ";
+  txt+= "Platform: " + navigator.platform  + "; ";
+  txt+= "User-agent header: " + navigator.userAgent  + "; ";
+  console.log("NavigatorExample", txt);
+}
+  </pre>
+</figure>
+ +
{{EmbedLiveSample("Frammenti_di_codice", "100%", 250)}}
+ +

Citazioni

+ +
<figure>
+  <figcaption><cite>Edsger Dijkstra:</cite></figcaption>
+  <blockquote>If debugging is the process of removing software bugs,
+  then programming must be the process of putting them in.</blockquote>
+</figure>
+
+ +
{{EmbedLiveSample("Citazioni")}}
+ +

Poemi

+ +
<figure>
+  <p style="white-space:pre">
+Bid me discourse, I will enchant thine ear,
+  Or like a fairy trip upon the green,
+Or, like a nymph, with long dishevell'd hair,
+  Dance on the sands, and yet no footing seen:
+Love is a spirit all compact of fire,
+  Not gross to sink, but light, and will aspire.</p>
+  <figcaption><cite>Venus and Adonis</cite>,
+    by William Shakespeare</figcaption>
+</figure>
+ +
{{EmbedLiveSample("Poemi", "100%", 250)}}
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'semantics.html#the-figure-element', '<figure>')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.2', 'grouping-content.html#the-figure-element', '<figure>')}}{{Spec2('HTML5.2')}}Nessun cambiamento da HTML 5.0.
{{SpecName('HTML5 W3C', 'grouping-content.html#the-figure-element', '<figure>')}}{{Spec2('HTML5 W3C')}}
+ +

Compatibilità dei browser

+ + + +

{{Compat("html.elements.figure")}}

+ +

See also

+ +
    +
  • L'elemento {{HTMLElement("figcaption")}}.
    • +
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 ---- -
- {{gecko_minversion_header("2")}}
-

Sommario

-

Gli elementi e gli attributi dei form in HTML5 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.

-

Questa sezione descrive gli elementi nuovi o modificati in HTML5, che sono supportati da Gecko / Firefox, versione 4 o superiore.

-

L'elemento <input>

-

L'elemento {{HTMLElement("input")}} ha alcuni nuovi valori per l'attributo {{htmlattrxref("type", "input")}}.

-
    -
  • search: L'elemento rappresenta un campo di ricerca. Le interruzioni di riga vengono rimosse automaticamente dal valore immesso, ma nessun'altra sintassi viene imposta.
    • -
  • tel: 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.
    • -
  • url: L'elemento rappresenta un controllo per la modifica di un URL. Le interruzioni di riga e gli spazi vuoti finali vengono eliminati automaticamente dal valore immesso.
    • -
  • -

    email: 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 1*( atext / "." ) "@" ldh-str 1*( "." ldh-str ) dove atext è definito in RFC 5322 sezione 3.2.3, e ldh-str è definito in RFC 1034 sezione 3.5.

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

L'elemento {{HTMLElement("input")}} ha anche nuovi attributi:

-
    -
  • {{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.
    • -
  • {{htmlattrxref("pattern", "input")}}: Un'espressione regolare con cui il valore del controllo viene confrontato. Può essere usato negli {{HTMLElement("input")}} di tipo text, tel, search, url, ed email.
    • -
  • {{htmlattrxref("form", "input")}}: Una stringa indicante a quale elemento {{HTMLElement("form")}} "appartiene" l'input. Ogni input può appartenere ad un solo form.
    • -
  • {{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 image o submit, e quando l'attributo {{htmlattrxref("form", "input")}} è stato impostato.
    • -
  • {{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.
    • -
-

L'elemento <form>

-

L'elemento {{HTMLElement("form")}} ha un nuovo attributo:

-
    -
  • {{htmlattrxref("novalidate", "form")}}: Questo attributo fa in modo che il form non richieda la validazione.
    • -
-

L'elemento <datalist>

-

L'elemento {{HTMLElement("datalist")}} racchiude una lista di elementi {{HTMLElement("option")}} da suggerire all'utente durante la compilazione di un {{HTMLElement("input")}}.

-

Puoi aggiungere l'attributo {{htmlattrxref("list", "input")}} ad un elemento {{HTMLElement("input")}} per collegare un campo specifico ad un elemento {{HTMLElement("datalist")}} specifico.

-

L'elemento <output>

-

L'elemento {{HTMLElement("output")}} rappresenta il risultato di una computazione (un calcolo).

-

Puoi usare l'attributo {{htmlattrxref("for", "output")}} per specificare una relazione tra un elemento {{HTMLElement("output")}} 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.

-

{{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%").

-

L'attributo <placeholder> (testo segnaposto)

-

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.

-

L'attributo <autofocus>

-

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 autofocus, Booleano, può essere assegnato ad un solo campo per ciascun form. Si applica agli elementi {{HTMLElement("input")}}, {{HTMLElement("button")}}, {{HTMLElement("select")}} e {{HTMLElement("textarea")}}. Unica eccezione: non può essere assegnato agli elementi {{HTMLElement("input")}} che abbiano l'attributo {{htmlattrxref("type", "input")}} impostato su hidden (ovviamente non si può focalizzare un elemento nascosto).

-

La proprietà label.control del DOM

-

L'interfaccia DOM HTMLLabelElement fornisce una proprietà extra, oltre alle proprietà che corrispondono agli attributi dell'elemento HTML {{HTMLElement("label")}}. La proprietà control 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.

-

Vincoli di Validazione

-

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.

-

Se l'attributo title 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 setCustomValidity().

-
<input type="email" title="Si prega di fornire una e-mail" x-moz-errormessage="E-mail non valida">
-
- Nota: 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")}}.
-

Sintassi HTML per Vincolare la Validazione

-

I seguenti elementi di sintassi HTML5 possono essere usati per specificare i vincoli sui dati immessi nel form.

-
    -
  • 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")}})
    • -
  • L'attributo {{htmlattrxref("pattern", "input")}} nell'elemento {{HTMLElement("input")}} vincola il valore in modo che corrisponda una specifica espressione regolare.
    • -
  • 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.
    • -
  • 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.
    • -
  • 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.
    • -
  • I valori url e email nell'attributo {{htmlattrxref("type", "input")}} restringono i valori accettati rispettivamente ad un URL o ad un indirizzo e-mail valido.
    • -
-

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 submit o image). Questi attributi indicano che il form non deve essere validato.

-

API per i Vincoli di Validazione

-

Le seguenti proprietà e metodi del DOM, correlati ai vincoli di validazione, sono disponibili agli scripts lato client:

-
    -
  • Negli oggetti HTMLFormElement, il metodo checkValidity() 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.
    • -
  • On form-associated elements: -
      -
    • La proprietà willValidate è "false" se l'elemento non soddisfa i vincoli di validazione.
      • -
    • La proprietà validity è un oggetto ValidityState rappresentante lo stato di validazione dell'elemento.
      • -
    • La proprietà validationMessage è un messaggio che descrive eventuali errori relativi ai vincoli impostati sull'elemento.
      • -
    • Il metodo checkValidity(), se l'elemento non soddisfa uno o più dei suoi vincoli, o true in caso contrario.
      • -
    • Il metodo setCustomValidity() imposta un messaggio di errore personalizzato, permettendo anche ai vincoli personalizzati di essere imposti e validati, oltre a quelli predefiniti.
      • -
    -
    • -
-

Vedi anche

- diff --git a/files/it/web/html/html5/index.html b/files/it/web/html/html5/index.html deleted file mode 100644 index be6fc91a82..0000000000 --- a/files/it/web/html/html5/index.html +++ /dev/null @@ -1,167 +0,0 @@ ---- -title: HTML5 -slug: Web/HTML/HTML5 -translation_of: Web/Guide/HTML/HTML5 ---- -

HTML5 è l'ultima evoluzione dello standard che definisce HTML. Il termine rappresenta due concetti differenti:

- -
    -
  • Una nuova versione del linguaggio HTML, con nuovi elementi, attributi e comportamenti
    • -
  • Un più ampio insieme di tecnologie che permettono siti web e applicazioni più diversificate e potenti: Questo insieme è chiamato HTML5 & compagni ed è spesso abbreviato in HTML5
    • -
- -

Progettata per essere usabile da tutti gli sviluppatori Open Web, questa pagina di riferimento ha numerosi collegamenti a risorse riguardanti le tecnologie HTML5, classificate in diversi gruppi in base alla loro funzione.

- -
    -
  • Semantica: descrivere con maggiore precisione il contenuto.
    • -
  • Connettività: comunicare con il server in modi nuovi e innovativi.
    • -
  • Offline & Memorizzazione: permettere alle pagine web di immagazzinare dati sul client per operare più efficientemente offline.
    • -
  • Multimedia: rendere audio e video cittadini di prima classe nell'Open Web.
    • -
  • Effetti e Grafica 2D/3D: usare una gamma molto più ampia di opzioni di rappresentazione.
    • -
  • Prestazioni & Integrazione: ottimizzare la velocità di caricamento e ottenere un migliore utilizzo delle risorse hardware.
    • -
  • Accesso ai dispositivi: usare vari dispositivi di input e output.
    • -
  • Stile: consentire agli autori di realizzare temi più sofisticati.
    • -
- -
-
-

Semantica

- -
-
Sezioni e struttura in HTML5
-
Uno sguardo ai nuovi elementi di sezionamento e contorno in HTML5: {{HTMLElement("section")}} , {{HTMLElement("article")}} , {{HTMLElement("nav")}} , {{HTMLElement("header")}} , {{HTMLElement("footer")}} , {{HTMLElement("aside")}} e {{HTMLElement("hgroup")}}.
-
Integrare audio e video in HTML5
-
Gli elementi {{HTMLElement("audio")}} e {{HTMLElement("video")}} permettono l'integrazione e la manipolazione di nuovi contenuti multimediali.
-
Forms in HTML5
-
Uno sguardo ai miglioramenti dei form in HTML5: le API di convalida dei campi, parecchi nuovi attributi, nuovi valori per l'attributo {{htmlattrxref("type", "input")}} degli {{HTMLElement("input")}}, e il nuovo elemento {{HTMLElement("output")}}.
-
Nuovi elementi semantici
-
Accanto a sezioni, multimedia e le novità dei forms, ci sono numerosi nuovi elementi come {{HTMLElement("mark")}}, {{HTMLElement("figure")}}, {{HTMLElement("figcaption")}}, {{HTMLElement("data")}}, {{HTMLElement("time")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, o {{HTMLElement("meter")}}, che accrescono la quantità di elementi validi di HTML5.
-
Miglioramenti degli {{HTMLElement("iframe")}}
-
Utilizzando {{htmlattrxref("sandbox", "iframe")}}, {{htmlattrxref("seamless", "iframe")}}, e gli attributi {{htmlattrxref("srcdoc", "iframe")}}, gli autori possono ora precisare il livello di sicurezza e il rendering desiderato di un elemento {{HTMLElement("iframe")}}.
-
MathML
-
Permette di incorporare direttamente formule matematiche.
-
Introduzione a HTML5
-
Questo articolo introduce al problema di come indicare al browser che stai utilizzando HTML5 nel tuo progetto o applicazione web.
-
Parser di HTML5-compatibile
-
Il parser, che converte i byte di un documento HTML nel DOM, è stato esteso ed ora riconosce con precisione il comportamento da adottare in tutti i casi, anche quando incontra HTML non valido. Ciò conduce ad una maggiore prevedibilità e interoperabilità tra i browser compatibili con HTML5.
-
- -

Connettività

- -
-
Web Sockets
-
Permette di creare una connessione permanente tra la pagina ed il server e di scambiare dati, non HTML, attraverso questo mezzo.
-
Server-event inviati
-
Permetta a un server di sottoporre eventi al client, contrariamente al classico paradigma per cui il server invia dati solo in risposta alla richiesta del client.
-
WebRTC
-
Questa tecnologia, in cui RTC sta per Real Time Communication, permette di connettersi ad altre persone e controllare direttamente la videoconferenza nel browser, senza bisogno di plugin o applicazioni esterne.
-
- -

Offline & Memorizzazione

- -
-
Risorse Offline: la cache dell'applicazione
-
Firefox supporta a pieno le specifiche offline di HTML5. La maggior parte degli altri browser hanno un qualche livello di supporto per le risorse offline.
-
Eventi online e offline
-
Firefox 3 supporta eventi WHATWG online e offline, che lasciano rilevare alle applicazioni ed estensioni se c'è o no una connessione internet attiva, nonché quando la connessione cambia stato.
-
Sessione WHATWG lato client e memorizzazione persistente (alias Memorizzazione DOM)
-
La memorizzazione lato client, persistente e di sessione, permette alle applicazioni web di immagazzinare strutture dati lato client.
-
IndexedDB
-
E' uno standard web per la memorizzazione nel browser di significative quantità di dati strutturati e per ricerche indicizzate ad elevate prestazioni su tali dati.
-
Utilizzare file da applicazioni web
-
Il supporto per le nuove API per i file in HTML5 è stato aggiunto a Gecko, rendendo possibile l'accesso a file locali selezionati dall'utente. Ciò include il supporto per la selezione multipla di file utilizzando il nuovo attributo multiple con type file dell'elemento {{HTMLElement("input")}}. C'è anche FileReader.
-
- -

Multimedia

- -
-
Utilizzare audio e video in HTML5
-
Gli elementi {{HTMLElement("audio")}} e {{HTMLElement("video")}} incorporano e permetto la manipolazione di nuovi contenuti multimediali.
-
WebRTC
-
Questa tecnologia, in cui RTC sta per Real Time Communication, permette di connettersi ad altre persone e controlla direttamente la videoconferenza nel browser, senza bisogno di plugin o applicazioni esterne.
-
Utilizzo della API Camera
-
Permette di usare, manipolare e memorizzare un'immagine dalla fotocamera del computer.
-
Track e WebVTT
-
L'elemento {{HTMLElement("track")}} consente capitoli e sottotitoli. WebVTT è un formato di traccia testuale.
-
- -

Grafica & Effetti 3D

- -
-
Tutorial sui Canvas
-
Apprendi il nuovo elemento {{HTMLElement("canvas")}} e come disegnare grafica ed altri oggetti in Firefox
-
API di testo per gli elementi <canvas>  di HTML5
-
Le API di testo di HTML5 sono ora supportate agli elementi {{HTMLElement("canvas")}}.
-
WebGL
-
WebGL porta la grafica 3D sul Web introducendo una API strettamente conforme a OpenGL ES 2.0 utilizzata negli elementi {{HTMLElement("canvas")}} di HTML5.
-
SVG
-
Un formato di immagine vettoriale basato su XML che può essere direttamente incorporato nel documento HTML.
-
-
- -
-

Prestazioni & integrazione

- -
-
Web Workers
-
Permette di delegare l'esecuzione JavaScript a thread in background, impedendo a queste attività di rallentare gli eventi interattivi.
-
XMLHttpRequest Livello 2
-
Permette di ottenere asincronamente qualche parte della pagina e di visualizzarne dinamicamente il contenuto, variandolo nel tempo e in base alle azioni dell'utente. Questa è la tecnologia dietro Ajax.
-
JIT-motori JavaScript compilati
-
La nuova generazione di motori JavaScript sono molto più potenti, e garantiscono maggiori prestazioni.
-
History API
-
Permette la manipolazione della cronologia del browser. Ciò è particolarmente utile per le pagine che caricano nuove informazioni interattivamente.
-
L'attributo contentEditable: trasforma il tuo sito web in un wiki!
-
HTML5 ha standardizzato l'attributo contentEditable.
-
Drag & drop
-
Le API per il drag & drop in HTML5 supportano il trascinamento e rilascio di voci all'interno del sito e tra siti web. Fornisce anche una API più semplice per l'uso da parte di estensioni e applicazioni basate su Mozilla.
-
Gestione del focus in HTML
-
Sono supportati i nuovi attributiHTML5 activeElement e hasFocus.
-
Gestori di protocollo basato sul Web
-
E' ora possibile registrare applicazioni web come gestori di protocollo utilizzando il metodo navigator.registerProtocolHandler().
-
requestAnimationFrame
-
Permette di controllare il rendering delle animazioni per ottenere prestazioni ottimali.
-
Fullscreen API
-
Controlla l'utilizzo a pieno schermo da parte di pagine web e applicazioni, senza la visualizzazione della UI del browser.
-
Pointer Lock API
-
Permette di bloccare il puntatore al contenuto, così giochi e applicazioni simili non perdono il focus quando il puntatore ne oltrepassa il margine.
-
Eventi online ed offline
-
Al fine di costruire una buona applicazione web capace di lavorare offline, hai bisogno di sapere quando l'applicazione è offline. Hai anche bisogno di sapere quando l'applicazione torna nello stato online.
-
- -

Accesso ai Dispositivi

- -
-
Utilizzare le API Camera
-
Permette di utilizzare, manipolare e immagazzinare immagini dalla fotocamera del computer.
-
Eventi Touch
-
Gestori che reagiscono ad eventi creati dalla pressione sullo schermo da parte dell'utente.
-
Utilizzare la geolocalizzazione
-
Permetti al browser di localizzare la posizione dell'utente grazie alla geolocalizzazione.
-
Rilevazione orientamento del dispositivo
-
Lascia che il browser sia informato del cambio di orientamento del dispositivo. Può essere utilizzato come metodo di input (per esempio per realizzare giochi che reagiscono alla posizione del dispositivo) o per adattare l'impaginazione all'orientamento dello schermo (potrait o landscape).
-
Pointer Lock API
-
Permette di bloccare il puntatore al contenuto, così giochi e applicazioni simili non perdono il focus quando il puntatore ne oltrepassa il margine.
-
- -

Stile

- -

CSS è stato esteso consentendo elementi di stile più complessi. E' spesso identificato come CSS3, sebbene CSS non sia comunque una specifica monolitica e i differenti moduli non siano tutti di livello 3: alcuni sono di livello 1, ed altri di livello 4, con tutti i livelli intermedi.

- -
-
Nuove caratteristiche di stile per lo sfondo
-
E' ora possibile aggiungere un'ombra a un box, utilizzando{{cssxref("box-shadow")}} ed impostare sfondi multipli.
-
Bordi più fantasiosi
-
Non è solo possibile utilizzare le immagini come stile dei bordi, utilizzando {{cssxref("border-image")}} e le proprietà associate, ma sono supportati i bordi arrotondati per mezzo della proprietà {{cssxref("border-radius")}}.
-
Anima il tuo stile
-
Utilizzando le Transizioni CSS per animare il passaggio tra stati, o utilizzando le Animazioni CSS per animare parti della pagina senza un evento scatenante, puoi controllare gli elementi mobili sulla pagina.
-
Miglioramenti tipografici
-
Gli autori hanno un miglior controllo per ottenere un migliore aspetto tipografico. Possono controllare il {{cssxref("text-overflow")}} e la sillabazione, ma possono anche applicare un'ombra o controllare più precisamente la decorazione. Caratteri tipografici personalizzati possono essere scaricati e applicati grazie alla nuova regola {{cssxref("@font-face")}}.
-
Nuove impaginazioni per la presentazione
-
Al fine di migliorare la flessibilità di progettazione, sono stati aggiunti due nuovi layout: Impaginazione CSS a colonna multipla, e l'impaginazione CSS a box flessibile.
-
-
-
- -

 

diff --git a/files/it/web/html/html5/introduction_to_html5/index.html b/files/it/web/html/html5/introduction_to_html5/index.html deleted file mode 100644 index 14fe305eb6..0000000000 --- a/files/it/web/html/html5/introduction_to_html5/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: Introduzione a HTML5 -slug: Web/HTML/HTML5/Introduction_to_HTML5 -translation_of: Web/Guide/HTML/HTML5/Introduction_to_HTML5 ---- -

HTML5 è 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.

-

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 pagina principale di HTML5. Per informazioni dettagliate sul supporto degli altri browser delle funzionalità HTML5, fare riferimento al sito web CanIUse.

-

Dichiarare che un documento contiene mark-up HTML5 con il doctype HTML

-

Il doctype per HTML5 è semplicissimo. Per specificare che il vostro contenuto HTML utilizza HTML5, basta dichiarare:

-
<!DOCTYPE html>
-
-

Così facendo persino i browser che attualmente non supportano HTML5 entreranno in modalità standard, cioè interpreteranno il codice HTML in modo compatibile con HTML5, ignorando le nuove funzionalità di HTML5 se non le supportano.

-

È molto più semplice rispetto ai precedenti doctype, oltre che più breve, quindi più facile da ricordare e riduce anche la quantità di byte scaricati dall'utente.

-

Dichiarare il set di caratteri con <meta charset>

-

Indicare il set di caratteri che verrà utilizzato è solitamente la prima cosa da fare in un documento HTML. La specifica precedente richiedeva un elemento {{HTMLElement("meta")}} molto complesso. Ora è facilissimo:

-
<meta charset="UTF-8">
-

Ricordati di inserire questo tag subito dopo l'apertura del {{HTMLElement("head") }}, perché alcuni browser riavviano il parsing di un documento HTML se il set di caratteri dichiarato è diverso da quello che avevano previsto. Inoltre consigliamo sempre di usare il set UTF-8, ove possibile, perché semplifica la gestione dei caratteri nei documenti utilizzando diversi script.

-

Nota bene: HTML5 limita il set di caratteri validi a quelli compatibili con ASCII e che usano almeno 8 bit. Ciò è stato deciso per motivi di sicurezza e per prevenire alcuni tipi di attacchi.

-

Usare il nuovo parser HTML5

-

La regola di parsing di HTML5, che analizza il significato del mark-up, è stata definita con maggiore precisione in HTML5. Fino all'introduzione di HTML5, le uniche regole riguardavano il mark-up valido, quindi il comportamento del parser in caso di errori (e la maggior parte dei siti web ne ha almeno uno) era indefinito. In sostanza, tutti i browser si comportavano in modo diverso. Ora, di fronte a errori nel mark-up, tutti i browser conformi devono comportarsi esattamente nello stesso modo.

-

Questo obbligo aiuta non poco gli sviluppatori. Anche se tutti i browser moderni ora applicano queste regole di analisi HTML5, alcuni utenti navigano ancora con browser non compatibili con HTML5. Tenete a mente che è ancora altamente raccomandato stendere mark-up valido, in modo che il codice sia facile da leggere e mantenere nel tempo, e diminuisca notevolmente la probabilità di incompatibilità con i vari browser più datati.

-

Non preoccuparti — non devi cambiare nulla del tuo sito Web — gli sviluppatori dei browser hanno già fatto tutto per te!

diff --git a/files/it/web/html/reference/index.html b/files/it/web/html/reference/index.html new file mode 100644 index 0000000000..6dfc71219d --- /dev/null +++ b/files/it/web/html/reference/index.html @@ -0,0 +1,46 @@ +--- +title: Riferimento HTML +slug: Web/HTML/Riferimento +tags: + - Elementi + - HTML + - Riferimento + - Web + - tag +translation_of: Web/HTML/Reference +--- +
{{HTMLSidebar}}
+ +

HTML è il linguaggio che descrive la struttura e la semantica del contenuto di un documento Web; è composto da elementi, ciascuno dei quali può essere modificato da alcuni attributi. Il contenuto di una pagina Web viene marcato con etichette di elementi HTML come per esempio {{HTMLElement("img")}}, {{HTMLElement("title")}}, {{HTMLElement("p")}}, {{HTMLElement("div")}}, etc.

+ +

I contenuti qui presentati costituiscono materiale di riferimento da utilizzare per lo sviluppo Web. MDN offre un riferimento a tutti gli elementi di HTML, così come a tutti gli attributi che governano il comportamento degli elementi.

+ +
+
+

Contenuti

+ +
+
HTML element reference
+
This page lists all the HTML elements, which are created using tags.
+
HTML attribute reference
+
Elements in HTML have attributes; these are additional values that configure the elements or adjust their behavior in various ways to meet the criteria the users want.
+
Global attributes
+
Global attributes are attributes common to all HTML elements; they can be used on all elements, though they may have no effect on some elements.
+
Link types
+
In HTML, the following link types indicate the relationship between two documents, in which one links to the other using an <a>, <area>, or <link> element.
+
Content Categories
+
Every HTML element is a member of one or more content categories — these categories group elements that share common characteristics.
+
+ +

View All...

+
+ +
+

Guide e Tutorials

+ +
+
Guida allo sviluppo HTML
+
Articoli MDN che mostrano tecniche specifiche per creare contenuti Web in HTML, tutorial e altro materiale utile a portata di mano.
+
+
+
diff --git a/files/it/web/html/riferimento/index.html b/files/it/web/html/riferimento/index.html deleted file mode 100644 index 6dfc71219d..0000000000 --- a/files/it/web/html/riferimento/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: Riferimento HTML -slug: Web/HTML/Riferimento -tags: - - Elementi - - HTML - - Riferimento - - Web - - tag -translation_of: Web/HTML/Reference ---- -
{{HTMLSidebar}}
- -

HTML è il linguaggio che descrive la struttura e la semantica del contenuto di un documento Web; è composto da elementi, ciascuno dei quali può essere modificato da alcuni attributi. Il contenuto di una pagina Web viene marcato con etichette di elementi HTML come per esempio {{HTMLElement("img")}}, {{HTMLElement("title")}}, {{HTMLElement("p")}}, {{HTMLElement("div")}}, etc.

- -

I contenuti qui presentati costituiscono materiale di riferimento da utilizzare per lo sviluppo Web. MDN offre un riferimento a tutti gli elementi di HTML, così come a tutti gli attributi che governano il comportamento degli elementi.

- -
-
-

Contenuti

- -
-
HTML element reference
-
This page lists all the HTML elements, which are created using tags.
-
HTML attribute reference
-
Elements in HTML have attributes; these are additional values that configure the elements or adjust their behavior in various ways to meet the criteria the users want.
-
Global attributes
-
Global attributes are attributes common to all HTML elements; they can be used on all elements, though they may have no effect on some elements.
-
Link types
-
In HTML, the following link types indicate the relationship between two documents, in which one links to the other using an <a>, <area>, or <link> element.
-
Content Categories
-
Every HTML element is a member of one or more content categories — these categories group elements that share common characteristics.
-
- -

View All...

-
- -
-

Guide e Tutorials

- -
-
Guida allo sviluppo HTML
-
Articoli MDN che mostrano tecniche specifiche per creare contenuti Web in HTML, tutorial e altro materiale utile a portata di mano.
-
-
-
diff --git a/files/it/web/html/sections_and_outlines_of_an_html5_document/index.html b/files/it/web/html/sections_and_outlines_of_an_html5_document/index.html deleted file mode 100644 index 822543a758..0000000000 --- a/files/it/web/html/sections_and_outlines_of_an_html5_document/index.html +++ /dev/null @@ -1,320 +0,0 @@ ---- -title: Sezioni e Struttura di un Documento HTML5 -slug: Web/HTML/Sections_and_Outlines_of_an_HTML5_document -translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines ---- -

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.

-

Struttura di un Documento in HTML 4

-

La struttura di un documento, cioè la struttura semantica di ciò che si trova tra <body> e </body>, è fondamentale nella presentazione della pagina all'utente. HTML 4 usa le nozioni di sezione e sotto-sezione di un documento per descrivere la sua struttura. Una sezione è definita da un Elemento HTML di Divisione ( {{HTMLElement("div")}} ) con un Elemento HTML di Intestazione ( {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, o {{HTMLElement("h6")}} ) al suo interno, che ne definisce il titolo. La relazione tra gli Elementi HTML di Divisione e gli Elementi HTML di Intestazione genera la struttura del documento.

-

Dunque il seguente mark-up:

-
- 
<div class="section" id="elefanti-delle-foreste" >
-<h1>Elefanti delle foreste</h1>
-<p>In questa sezione, parliamo dei poco noti elefanti delle foreste.
-...la sezione continua...
-<div class="subsection" id="elefanti-habitat" >
-<h2>Habitat</h2>
-<p>Gli elefanti delle foreste non vivono su gli alberi, ma tra di essi.
-...la sotto-sezione continua...
-</div>
-</div>
-
-
-

genera la seguente struttura:

-
1. Elefanti delle foreste
-   1.1 Habitat
-
-

L'elemento {{HTMLElement("div")}} non è strettamente necessario per definire una nuova sezione. La mera presenza di un Elemento HTML di Intestazione è abbastanza per indicare una nuova sezione. Perciò:

-
<h1>Elefanti delle foreste</h1>
-<p>In questa sezione, parliamo dei poco noti elefanti delle foreste.
-...la sezione continua...
-<h2>Habitat</h2>
-<p>Gli elefanti delle foreste non vivono su gli alberi, ma tra di essi.
-...la sotto-sezione continua...
-<h2>Dieta</h2>
-<h1>Gerbilli della Mongolia</h1>
-
-

genera la seguente struttura:

-
1. Elefanti delle foreste
-   1.1 Habitat
-   1.2 Dieta
-2. Gerbilli della Mongolia
-
-

Problemi Risolti da HTML5

-

La definizione della struttura di un documento di HTML 4 è molto approssimativa e causa numerosi problemi:

-
    -
  1. L'uso di un {{HTMLElement("div")}} per definire sezioni semantiche, senza la definizione di valori specifici nell'attributo class, rende impossibile per un algoritmo automatico definire la struttura ("Questo {{HTMLElement("div")}} è parte della struttura della pagina, definisce una sezione o una sotto-sezione?" o "è solo un {{HTMLElement("div")}} inserito ai fini di presentazione, usato per scopi estetici?"). In altri termini, la specifica HTML4 è poco precisa riguardo a cosa è una sezione e come definire il suo scopo. La generazione automatica di una struttura è importante, in modo particolare per le tecnologie assistive, che sono in grado di adattare la presentazione delle informazioni alla struttura del documento. HTML5 rimuove l'elemento {{HTMLElement("div")}} dall'algoritmo che genera la struttura, introducendo l'elemento {{HTMLElement("section")}}, cioè un Elemento HTML di Sezione.
    2. -
  2. Unire più documenti è difficile: inserire un sotto-documento in un documento principale richiede di cambiare il "grado" delle intestazioni in modo che la struttura venga mantenuta. Questo problema viene risolto in HTML5, grazie ai nuovi elementi di sezionamento ( {{HTMLElement("article")}} , {{HTMLElement("section")}} , {{HTMLElement("nav")}} e {{HTMLElement("aside")}} ) che sono sempre sotto-sezioni della sezione che li contiene, indipendentemente dalle sezioni create dagli Elementi HTML di Intestazione.
    3. -
  3. Poiché ogni Elemento HTML di Intestazione cambia la struttura, non è possibile assegnare un sotto-titolo o un titolo secondario (es., <h1>Justine</h1><h2>Les Malheurs de la Vertu</h2> genera la struttura 1. Justine 1.1 Les Malheurs de la Vertu). HTML5 introduce l'elemento {{HTMLElement("hgroup")}} che "nasconde" tutti gli elementi di intestazione tranne quello di grado più elevato (es., <hgroup><h1>Justine</h1><h2>Les Malheurs de la Vertu</h2></hgroup> genera la struttura 1. Justine).
    4. -
  4. Nel HTML4, ogni sezione è parte della struttura del documento. Ma spesso i documenti non sono così lineari. Un documento può avere sezioni speciali contenenti informazioni che non fanno parte del flusso principale, anche se correlati ad esso, come una pubblicità o un approfondimento. HTML5 introduce l'elemento {{HTMLElement("aside")}} permettendo a questo tipo di sezioni di rimanere estranee al flusso principale.
    5. -
  5. Ancora, nel HTML4, dato che ogni sezione è parte della struttura del documento, non c'è modo di avere sezioni relative non al documento ma a tutto il sito, come il logo, i menu, una tabella dei contenuti, o le informazioni legali e sul copyright. A tal fine, HTML5 introduce tre elementi per altrettante sezioni specifiche: {{HTMLElement("nav")}} per i gruppi di links, come le tabelle dei contenuti, {{HTMLElement("footer")}} e {{HTMLElement("header")}} per le informazioni correlate al sito.
    6. -
-

Più in generale HTML5 aggiunge precisione alle funzionalità di sezionamento ed intestazione, permettendo una struttura del documento prevedibile e utilizzata dai browser per migliorare l'esperienza utente.

-

L'Algoritmo della Struttura di HTML5

-

Definire Sezioni nel HTML5

-

Tutto il contenuto dell'elemento {{HTMLElement("body")}} appartiene ad una sezione. Le sezioni HTML5 possono essere nidificate. Accanto alla sezione principale, definita dall'elemento {{HTMLElement("body")}}, i confini delle sezioni vengono definiti esplicitamente o implicitamente. Le sezioni esplicite sono contenute negli elementi {{HTMLElement("body")}}, {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}}, e {{HTMLElement("nav")}}.

-
- Nota: Ogni sezione può avere la propria gerarchia di intestazioni. Quindi anche un elemento nidificato può avere un'intestazione {{HTMLElement("h1")}}. Vedi Definire le Intestazioni in HTML5.
-

Esempio:

-
<section>
-  <h1>Elefanti delle foreste</h1>
-  <section>
-    <h1>Introduzione</h1>
-    <p>In questa sezione, parliamo dei poco noti elefanti delle foreste.
-  </section>
-  <section>
-    <h1>Habitat</h1>
-    <p>Gli elefanti delle foreste non vivono su gli alberi, ma tra di essi.
-  </section>
-  <aside>
-    <p>pubblicità
-  </aside>
-</section>
-<footer>
-  <p>(c) 2010 Esempi S.P.A.
-</footer>
-

Questo frammento di HTML definisce due sezioni di primo livello:

-
<section>
-  <h1>Elefanti delle foreste</h1>
-  <section>
-    <h1>Introduzione</h1>
-    <p>In questa sezione, parliamo dei poco noti elefanti delle foreste.
-  </section>
-  <section>
-    <h1>Habitat</h1>
-    <p>Gli elefanti delle foreste non vivono su gli alberi, ma tra di essi.
-  </section>
-   <aside>
-    <p>pubblicità
-  </aside>
-</section>
-
-<footer>
-  <p>(c) 2010 Esempi S.P.A.
-</footer>
-

La prima sezione ha tre sotto-sezioni:

-
<section>
-  <h1>Elefanti delle foreste</h1>
-
-  <section>
-    <h1>Introduzione</h1>
-    <p>In questa sezione, parliamo dei poco noti elefanti delle foreste.
-  </section>
-
-  <section>
-    <h1>Habitat</h1>
-    <p>Gli elefanti delle foreste non vivono su gli alberi, ma tra di essi.
-  </section>
-
-  <aside>
-    <p>pubblicità
-  </aside>
-</section>
-
-<footer>
-  <p>(c) 2010 Esempi S.P.A.
-</footer>
-

Il che genera la seguente struttura:

-
1. Elefanti delle foreste
-   1.1 Introduzione
-   1.2 Habitat
-   1.3 Sezione (aside)
-
-

Definire le Intestazioni in HTML5

-

L'Elemento HTML di Sezione definisce la struttura del documento, ma c'è bisogno anche delle intestazioni. La regola di base è semplice: il primo Elemento HTML di Intestazione (uno tra {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}} ) definisce l'intestazione della sezione corrente.

-

Gli elementi di intestazione hanno un grado dato dal numero nell'elemento, dove {{HTMLElement("h1")}} è il grado più alto, e {{HTMLElement("h6")}} quello più basso. Il grado relativo ha importanza solo all'interno di una sezione; è la struttura delle sezioni a determinare lo schema definitivo, non il grado di ciascuna intestazione. Per esempio, questo codice:

-
<section>
-  <h1>Elefanti delle foreste</h1>
-  <p>In questa sezione, parliamo dei poco noti elefanti delle foreste.
-    ...la sezione continua...
-  <section>
-    <h2>Habitat</h2>
-    <p>Gli elefanti delle foreste non vivono su gli alberi, ma tra di essi.
-        ...la sotto-sezione continua...
-  </section>
-</section>
-<section>
-  <h3>Gerbilli della Mongolia</h3>
-  <p>In questa sezione, parliamo dei famosi gerbilli della Mongolia.
-     ...la sezione continua...
-</section>
-

genera la seguente struttura:

-
1. Elefanti delle foreste
-   1.1 Habitat
-2. Gerbilli della Mongolia
-

Notare come il grado delle intestazioni (nell'esempio {{HTMLElement("h1")}} per la prima sezione di primo livello, {{HTMLElement("h2")}} per la sotto-sezione e {{HTMLElement("h3")}} per la seconda sezione di primo livello) non conta. (Qualsiasi grado può essere utilizzato come intestazione di una sezione esplicitamente definita, anche se questa pratica non è consigliata.)

-

Sezionamento implicito

-

Poiché gli elementi HTML5 di sezionamento non sono obbligatori per definire una struttura, c'è un modo per definire sezioni senza di essi, per mantenere la compatibilità con la rete esistente dominata da HTML4. Questa tecnica è chiamata sezionamento implicito.

-

Gli Elementi HTML di Intestazione da ( {{HTMLElement("h1")}} a {{HTMLElement("h6")}} ) definiscono una nuova sezione implicita quando non sono la prima voce del loro contenitore, che è sempre una sezione esplicita. Il modo in cui questa sezione implicita viene posizionata nella struttura è definito dal suo grado relativo all'intestazione precedente nella sezione che le contiene. Se il grado è inferiore rispetto all'intestazione precedente, viene aperta una sotto-sezione implicita. Questo codice:

-
<section>
-  <h1>Elefanti delle foreste</h1>
-  <p>In questa sezione, parliamo dei poco noti elefanti delle foreste.
-    ...la sezione continua...
-  <h3 class="implicit subsection">Habitat</h3>
-  <p>Gli elefanti delle foreste non vivono su gli alberi, ma tra di essi.
-    ...la sotto-sezione continua...
-</section>
-

genera la seguente struttura:

-
1. Elefanti delle foreste
-   1.1 Habitat (implicitly defined by the h3 element)
-
-

Se l'intestazione ha lo stesso grado di quella precedente, la sezione corrente viene chiusa (anche se esplicita!) e se ne apre una nuova, implicita, dello stesso livello:

-
<section>
-  <h1>Elefanti delle foreste</h1>
-  <p>In questa sezione, parliamo dei poco noti elefanti delle foreste.
-    ...la sezione continua...
-  <h1 class="implicit section">Gerbilli della Mongolia</h1>
-  <p>Gerbilli della Mongolia are cute little mammals.
-    ...la sezione continua...
-</section>
-

genera la seguente struttura: 

-
1. Elefanti delle foreste
-2. Gerbilli della Mongolia (implicitamente definita dall'elemento h1, che allo stesso tempo ha chiuso la sezione precedente)
-
-

Se ha grado superiore all'intestazione precedente, chiude la sezione corrente e ne apre una nuova, implicita, di livello superiore:

-
<body>
-  <h1>Mammiferi</h1>
-  <h2>Balene</h2>
-  <p>In questa sezione, parliamo delle balene nuotatrici.
-    ...la sezione continua...
-  <section>
-    <h3>Elefanti delle foreste</h3>
-    <p>In questa sezione, parliamo dei poco noti elefanti delle foreste.
-      ...la sezione continua...
-    <h3>Gerbilli della Mongolia</h3>
-      <p>Hordes of gerbils have spread their range far beyond Mongolia.
-         ...la sotto-sezione continua...
-    <h2>Rettili</h2>
-      <p>I rettili sono animali dal sangue freddo.
-          ...la sotto-sezione continua...
-  </section>
-</body>
-

genera la seguente struttura:

-
1. Mammiferi
-   1.1 Balene (definita implicitamente dall'elemento h2)
-   1.2 Elefanti delle foreste (definita esplicitamente dall'elemento section)
-   1.3 Gerbilli della Mongolia (definita implicitamente dall'elemento h3, che allo stesso tempo chiude la sezione precedente)
-   1.4 Rettili (definita implicitamente dall'elemento h2, che allo stesso tempo chiude la sezione precedente)
-
-

Questa non è la struttura che ci si potrebbe aspettare dopo un rapido sguardo alle intestazioni. Per rendere il vostro markup comprensibile all'uomo, è una buona pratica usare sezioni esplicite, e far combaciare il grado dell'intestazione con il livello di nidificazione previsto. Tuttavia, ciò non è richiesto dalla specifica HTML5. Se si riscontra che i browser rendono la struttura del vostro documento in modi inaspettati, verificare se alcune sezioni vengono chiuse implicitamente dagli elementi di intestazione.

-

Un'eccezione alla regola empirica che il grado dell'intestazione deve corrispondere al livello di nidificazione della sezione avviene per le sezioni che vengono riutilizzate in più documenti. Per esempio, una sezione potrebbe essere memorizzata in un sistema di gestione dei contenuti ed inserita nel documento in fase di runtime. In questo caso, una buona pratica è partire sempre da un elemento {{HTMLElement("h1")}} per la prima intestazione della sezione. Il livello di nidificazione della sezione riutilizzabile sarà determinato dalla struttura del documento in cui appare. I tag di sezione esplicita sono comunque utili in questi casi.

-

Sovrascrivere il Sezionamento Implicito

-

A volte, una sezione ha bisogno di avere più intestazioni. Alcuni casi comuni sono:

-
    -
  • una sezione su un libro o un film, che ha un titolo secondario: - 
    <section>
-  <h1>Justine</h1>
-  <h2>Les Malheurs de la vertu</h2>
-</section>
    -

    genera la seguente struttura:

    - 
    1. Justine
-   1.1 Les Malheurs de la vertu
-
    -
    • -
  • un elenco di tag: - 
    <section>
-  <h1>Strutture e Schemi di un documento</h1>
-  <h2>HTML, HTML5, Sezioni, Schemi</h2>
-</section>
    -

    genera la seguente struttura:

    - 
    1. Strutture e schemi di un documento
-   1.1 HTML, HTML5, Sezioni, Schemi
    -
    • -
-

A causa del sezionamento implicito, questo non è possibile senza l'aiuto dell'Elemento HTML di Raggruppamento delle Intestazioni ( {{HTMLElement("hgroup")}} ) introdotto da HTML5. Esso "nasconde" tutte le intestazioni dalla struttura, eccetto la prima, consentendo di evitare il sezionamento implicito. Grazie a questo elemento l'esempio del libro secondario:

-
<section>
-  <hgroup>
-    <h1>Justine</h1>
-    <h2>Les Malheurs de la vertu</h2>
-  </hgroup>
-  ... Contenuti ...
-</section>
-
-

genera la seguente struttura:

-
1. Justine
-

Sezioni "root"

-

Una sezione "root" (radice) è un elemento HTML che può avere una propria struttura, ma le sezioni ed intestazioni interne ad esso non interferiscono con la struttura del suo contenitore. Oltre al {{HTMLElement("body")}} che è la sezione "root" logica di un documento, le sezioni root sono spesso elementi che aggiungono contenuto esterno alla pagina: {{HTMLElement("blockquote")}}, {{HTMLElement("details")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}} e {{HTMLElement("td")}}.

-

Esempio:

-
<section>
-  <h1>Elefanti delle foreste</h1>
-  <section>
-    <h2>Introduzione</h2>
-    <p>In questa sezione, parliamo dei poco noti elefanti delle foreste.
-  </section>
-  <section>
-    <h2>Habitat</h2>
-    <p>Gli elefanti delle foreste non vivono su gli alberi, ma tra di essi.
-       Vediamo cosa dicono gli scienziati in "<cite>Gli elefanti delle foreste nel Borneo</cite>":
-    <blockquote>
-       <h1>Borneo
-       <p>L'elemento foresta vive nel Borneo...
-    </blockquote>
-  </section>
-</section>
-
-

Questo esempio genera la seguente struttura:

-
1. Elefanti delle foreste
-   1.1 Introduzione
-   1.2 Habitat
-

La struttura principale non contiene la struttura interna dell'elemento {{HTMLElement("blockquote")}}, che, trattandosi di una citazione esterna, è un elemento di sezione "root", perciò la sua struttura interna viene isolata.

-

Sezioni oltre la struttura

-

HTML5 introduce quattro nuovi elementi che permettono di definire sezioni che non fanno parte della struttura principale del documento:

-
    -
  1. L'Elemento HTML di Sezione Aside ( {{HTMLElement("aside")}} ) definisce una sezione che, anche se correlata all'elemento principale, non appartiene al flusso principale, come un box di approfondimento o una pubblicità. Ha la sua propria struttura, ma non appartiene a quella principale.
    2. -
  2. L'Elemento HTML di Sezione Navigazione ( {{HTMLElement("nav")}} ) definisce una sezione che contiene i link di navigazione. In un documento possono essere presenti molti elementi di navigazione, ad esempio: uno con i link interni alla pagina, come le tabelle dei contenuti, e un altro con i link di navigazione del sito. Questi links non fanno parte del flusso o della struttura principale e generalmente il loro rendering viene eseguito per ultimo dagli screen readers e da tecnologie assistive simili.
    3. -
  3. L'Elemento HTML di Sezione Header ( {{HTMLElement("header")}} ) definisce la testata di una pagina, che generalmente contiene il logo e il nome del sito, occasionalmente una barra di navigazione. A dispetto del nome, non viene necessariamente posizionato all'inizio del documento.
    4. -
  4. L'Elemento HTML di Sezione Footer ( {{HTMLElement("footer")}} ) definisce il piè di pagina, che generalmente contiene il copyright, le informazioni legali ed a volte altri links. A dispetto del nome, non viene necessariamente posizionato alla fine del documento.
    5. -
-

Indirizzi e data di pubblicazione negli elementi di sezionamento

-

L'autore di un documento spesso vuole pubblicare alcune informazioni personali, come nome e indirizzo dell'autore. HTML4 lo permetteva tramite l'elemento {{HTMLElement("address")}}, che è stato esteso in HTML5.

-

Un documento può essere fatto di diverse sezioni scritte da diversi autori. Una sezione curata da un autore diverso rispetto alla sezione principale può essere definita da un elemento {{HTMLElement("article")}}. Di conseguenza, l'elemento {{HTMLElement("address")}} è ora riferito al più vicino tra gli elementi {{HTMLElement("body")}} e {{HTMLElement("article")}} che lo contengono.

-

In modo simile, il nuovo elemento {{HTMLElement("time")}}, con il suo set di attributi {{htmlattrxref("pubdate", "time")}}, rappresenta la data di pubblicazione di tutto il documento, rispettivamente all'articolo, legato al più vicino contenitore {{HTMLElement("body")}} o {{HTMLElement("article")}}.

-

Usare Elementi HTML5 nei Browser Non-HTML5

-

Sezioni ed intestazioni dovrebbero funzionare nella maggior parte dei browser non-HTML5-compatibili. Anche se non supportati, non necessitano di una interfaccia DOM specifica ma solo di uno stile CSS dedicato, perché agli elementi sconosciuti viene assegnato display:inline di default:

-
section, article, aside, footer, header, nav, hgroup {
-  display:block;
-}
-
-

Naturalmente lo sviluppatore può assegnargli uno stile differente, ma tenendo a mente che nei browser non compatibili con HTML5 il rendering di default è diverso da quel che ci si potrebbe aspettare. Notare che l'elemento {{HTMLElement("time")}} non è stato incluso di proposito, perché in questo caso il rendering di default dei browser non-HTML5-compatibili corrisponde a quello previsto.

-

Questo metodo però ha delle limitazioni, perché alcuni browser non permettono di applicare stili CSS agli elementi non supportati. È il caso di Internet Explorer (versione 8 e precedenti), che necessita di uno script per abilitare il rendering di tali elementi:

-
<!--[if lt IE 9]>
-  <script>
-    document.createElement("header");
-    document.createElement("footer");
-    document.createElement("section");
-    document.createElement("aside");
-
-    document.createElement("nav");
-    document.createElement("article");
-    document.createElement("hgroup");
-    document.createElement("time");
-  </script>
-<![endif]-->
-

Questo significa che, in caso di Internet Explorer (8 e precedenti), javascript deve essere abilitato affinché gli elementi HTML vengano visualizzati correttamente. Altrimenti essi non verranno visualizzati (o verranno visualizzati senza stili applicati NdT), il che potrebbe rivelarsi problematico, dato che si tratta di elementi che definiscono la struttura dell'intera pagina. Ecco perché un elemento {{HTMLElement("noscript")}} dovrebbe essere aggiunto per questi casi specifici, come nell'esempio di seguito:

-
<noscript>
-   <strong>Attenzione !</strong>
-   Dato che il tuo browser non supporta HTML5, alcuni elementi vengono simulati usando JScript.
-   Sfortunatamente il tuo browser ha disattivato lo scripting. Per favore abilita JScript per visualizzare la pagina.
-</noscript>
-

Ciò ci porta al seguente codice per permettere il supporto delle sezioni e delle intestazioni HTML5 nei browser non-HTML5, anche nel caso di Internet Explorer (8 e precedenti), con un fallback adeguato nel caso in il browser non permetta l'esecuzione di javascript:

-
<!--[if lt IE 9]>
-  <script>
-    document.createElement("header");
-    document.createElement("footer");
-    document.createElement("section");
-    document.createElement("aside");
-    document.createElement("nav");
-    document.createElement("article");
-    document.createElement("hgroup");
-    document.createElement("time");
-  </script>
-  <noscript>
-   <strong>Attenzione !</strong>
-   Dato che il tuo browser non supporta HTML5, alcuni elementi vengono simulati usando JScript.
-   Sfortunatamente il tuo browser ha disattivato lo scripting. Per favore abilita JScript per visualizzare la pagina.
-</noscript>
-<![endif]-->
-

Conclusioni

-

Le nuove sezioni e intestazioni introdotte in HTML5 danno agli sviluppatori la capacità di descrivere la struttura di un documento web in maniera standard. Portano un grande vantaggio per le persone che hanno browser supportanti HTML5 e che hanno bisogno della struttura per comprendere la pagina, per esempio le le persone che necessitano l'aiuto di una tecnologia assistiva. I nuovi elementi semantici sono semplici da usare e, con pochi aggiustamenti, funzionano anche nei browser non-HTML5. Pertanto possono essere utilizzati senza restrizioni.

-
- {{HTML5ArticleTOC()}}
diff --git a/files/it/web/html/using_the_application_cache/index.html b/files/it/web/html/using_the_application_cache/index.html new file mode 100644 index 0000000000..2c35bbaeae --- /dev/null +++ b/files/it/web/html/using_the_application_cache/index.html @@ -0,0 +1,383 @@ +--- +title: Utilizzare l'application cache +slug: Web/HTML/utilizzare_application_cache +translation_of: Web/HTML/Using_the_application_cache +--- +

Introduzione

+ +

HTML5 possiede un meccanismo di application caching che permette alle applicazioni web-based di funzionare anche offline. Gli sviluppatori possono utilizzare l'interfaccia Application Cache (AppCache)  per specificare le risorse che il browser deve memorizzare nella cache e rendere disponibili per gli utenti offline. Le applicazioni in cache si caricano e funzionano correttamente anche se gli utenti cliccano sul tasto refresh del browser quando sono offline.

+ +

L'uso dell'application cache fornisce all'applicazione i seguenti benefici:

+ +
    +
  • Navigazione offline: gli utenti possono navigare un sito anche se sono offline.
    • +
  • Velocità: le risorse sono memorizzate in locale, quindi si caricano più velocemente.
    • +
  • Riduzione del carico server: il browser scarica dal server solo le risorse che sono state modificate.
    • +
+ +

Come funziona l'application cache

+ +

Abilitare l'application cache

+ +

Per abilitare l'application cache per un'applicazione, è necessario includere l'attributo {{htmlattrxref("manifest", "html")}} nell'elemento {{HTMLElement("html")}} delle pagine della tua applicazione, come mostrato nel seguente esempio:

+ +
+
<html manifest="example.appcache">
+  ...
+</html>
+
+
+ +

L'attributo manifest fa riferimento ad un cache manifest, un file di testo che elenca tutte le risorse (files) che il browser deve memorizzare per la tua applicazione.

+ +

Bisogna includere l'attributo manifest in tutte le pagine dell'applicazione che vuoi memorizzare nella cache, il browser non memorizza le pagine che non contengono l'attributo manifest, a meno che tali pagine siano esplicitamente elencate nel file manifest stesso. Non c'è bisogno di elencare nel cache manifest tutte le pagine che si vogliono memorizzare nella cache, il browser implicitamente aggiunge ogni pagina che l'utente visita e che ha l'attributo manifest settato sull'application cache.

+ +

Alcuni browser (es. Firefox) mostrano una barra di notifica la prima volta che un utente carica un'applicazione che usa l'application cache. La barra di notifica mostra un messaggio tipo:

+ +

Questo sito web (www.example.com) richiede di salvare dati sul computer per l'utilizzo non in linea. [Permetti] [Mai per questo sito] [Non adesso]

+ +

Il termine "offline(-enabled) applications" qualche volta fa riferimento alle applicazioni che l'utente ha esplicitamente abilitato ad utilizzare le capacità offline.

+ +

Caricare documenti

+ +

L'uso dell'application cache modifica il normale processo di caricamento del documento:

+ +
    +
  • Se esiste un'application cache, il browser carica il documento e le sue risorse associate direttamente dalla cache, senza accedere alla rete. Ciò velocizza il tempo di caricamento del documento.
    • +
  • Il browser quindi controlla se il cache manifest è stato aggiornato sul server.
    • +
  • Se il cache manifest è stato aggiornato, il browser scarica la nuova versione e le risorse elencate. Quest'operazione viene eseguita in background e non influenza la performance significativamente.
    • +
+ +

Il processo di caricamento del documento ed aggiornamento dell'application cache è specificato in maggior dettaglio qui sotto:

+ +
    +
  1. Quando il browser visita un documento che include l'attributo manifest, se non esiste un application cache, il browser carica il documento e poi va a prendere tutte le risorse elencate nel file manifest, creando la prima versione dell'application cache.
    2. +
  2. Nelle visite successive, il browser preleverà il documento e tutte le risorse specificate nel file manifest direttamente dall'applcation cache (non dal server). In più, il browser invia un evento checking all'oggetto window.applicationCache e processa il file manifest, seguendo le appropriate regole di chaching HTTP.
    3. +
  3. Se la copia attualmente memorizzata del manifest è aggiornata, il browser invia un evento noupdate all'oggetto applicationCache, ed il processo di aggiornamento è completo. Da notare che se viene modificata una qualsiasi delle risorse sul server, bisogna modificare anche il file manifest, in maniera tale che il browser sappia che ha bisogno di processare tutte le risorse nuovamente.
    4. +
  4. Se il file manifest è stato modificato, tutti i file elencati in esso - così come quelli aggiunti alla cache utilizzando applicationCache.add() - sono aggiunti ad una cache temporanea, seguendo le appropriate regole di caching HTTP. Per ogni file memorizzato in questa cache temporanea, il browser invia un evento progress all'oggetto applicationCache. In caso di errore, il browser invia un evento error e blocca l'aggiornamento dell'application cache.
    5. +
  5. Una volta che tutti i files sono stati recuperati con successo, vengono automaticamente spostati nella vera cache offline, e viene inviato un evento cached all'oggetto applicationCache. Dato che il documento è stato già caricato nel browser prelevandolo dalla cache, il documento aggiornato non sarà renderizzato finchè non viene ricaricato (manualmente o attraverso la programmazione).
    6. +
+ +

Percorso di memorizzazione e cancellazione della cache offline

+ +

Su Chrome è possibile cancellare la cache offline sia selezionando  "Clear browsing data..." dalle preferenze, oppure visitando  chrome://appcache-internals/. Safari ha una voce "Svuota cache" simile nelle sue preferenze, ma potrebbe essere necessario riavviare il browser.

+ +

Su Firefox, i dati della cache offline vengono memorizzati separatamente dal profilo Firefox — insieme ai dati degli altri programmi installati:

+ +
    +
  • Windows Vista/7: C:\Users\<username>\AppData\Local\Mozilla\Firefox\Profiles\<salt>.<profile name>\OfflineCache
    • +
  • Mac/Linux: /Users/<username>/Library/Caches/Firefox/Profiles/<salt>.<profile name>/OfflineCache
    • +
+ +

Su Firefox è possibile ispezionare lo stato della cache offline sulla pagina about:cache (box "Offline cache device"). La cache offline può essere cancellata separatamente per ogni sito utilizzando il tasto "Rimuovi..." presente in:
+ Firefox -> Opzioni -> Avanzate -> Rete -> Dati non in linea e informazioni utente.

+ +

Nelle versioni precedenti a Firefox 11, l'application cache non poteva essere cancellata utilizzando
+ Tools -> Clear Recent History
+ oppure
+ Tools -> Options -> Advanced -> Network -> Offline data -> Clear Now Questo bug è stato fixato nelle versioni successive.

+ +

Vedi anche clearing the DOM Storage data.

+ +

Le application cache possono anche diventare obsolete. Se il un file manifest dell'applicazione viene rimosso dal server, il browser rimuove tutte le application cache che utilizzano quel manifest ed invia un evento "obsoleted" all'oggetto applicationCache. Questo imposta lo stato dell'application cache su OBSOLETE.

+ +

Il file cache manifest

+ +

Includere un file cache manifest

+ +

L'attributo manifest in un'applicazione web può specificare sia il percorso relativo di un file cache manifest che un URL assoluto (gli URL assoluti devono provenire dalla stessa origine dell'applicazione). Un file cache manifest può avere diverse estensioni, ma come MIME type deve avere text/cache-manifest.

+ +
Nota: Sui server Apache, il MIME type per i file manifest (.appcache) può essere impostato aggiungendo AddType text/cache-manifest .appcache ad un file .htaccess posizionato nella cartella root, oppure nella stessa cartella dell'applicazione.
+ +

Le voci in un file cache manifest

+ +

Il cache manifest è un semplice file di testo che elenca le risorse che il browser deve memorizzare per l'accesso offline. Le risorse sono identificate da un URI. Le voci elencate nel cache manifest devono avere lo stesso schema, host e porta come nel manifest.

+ +

Esempio 1: un semplice cache manifest

+ +

Il seguente è un semplice file di cache manifest, example.appcache, per un ipotetico sito web all'indirizzo www.example.com.

+ +
CACHE MANIFEST
+# v1 - 2011-08-13
+# This is a comment.
+http://www.example.com/index.html
+http://www.example.com/header.png
+http://www.example.com/blah/blah
+
+ +

Un file cache manifest può includere 3 sezioni (CACHE, NETWORK, e FALLBACK, verranno discusse in seguito). Nell'esempio qui sopra, non c'è una sezione header, quindi si assume che tutte le risorse siano elencate nell'esplicita sezione (CACHE), intendendo che il browser deve memorizzare nell'application cache tutte le risorse elencate. Le risorse possono essere specificate utilizzando sia URL assoluti che relativi (es. index.html).

+ +

Il commento "v1" si trova lì per una buona ragione. I browser aggiornano  l'application cache solo se il file manifest viene modificato. Se una risorsa presente nella cache viene modificata (per esempio, viene aggiornata l'immagine header.png con un nuovo contenuto), bisogna anche cambiare il contenuto del file manifest per permettere ai browser di sapere che c'è bisogno di refreshare la cache. Si può effettuare qualsiasi modifica al file manifest, ma la best practice è modificare il numero di versione.

+ +
Importante: Non includere mai il cache manifest tra le voci del file stesso, altrimenti verrà sempre prelevato dalla cache locale e sarà quasi impossibile informare il browser che un nuovo manifest è disponibile sul server.
+ +

Le sezioni di un file cache manifest: CACHE, NETWORK, e FALLBACK

+ +

Un manifest può avere 3 sezioni distine: CACHE, NETWORK, e FALLBACK.

+ +
+
CACHE:
+
Questa è la sezione di default per le voci in un cache manifest. I files elencati sotto l'header della sezione CACHE: (oppure subito dopo la riga CACHE MANIFEST) sono esplicitamente memorizzati nella cache dopo che vengono scaricati per la prima volta.
+
NETWORK:
+
I files elencati sotto l'header della sezione NETWORK: sono risorse inserite in una white-list che richiedono una connessione al server. Tutte le richieste a queste risorse bypassano la cache, anche se l'utente è offline. È possibile utilizzare wildcards.
+
FALLBACK:
+
Nella sezione FALLBACK: vengono specificate le pagine alternative che il browser deve utilizzare nel caso una risorsa non sia accessibile. Ogni voce in questa sezione è composta da 2 URI - il primo è la risorsa, il secondo il fallback. Entrambi gli URI devono essere relativi e provenienti dalla stessa origine del file manifest. È possibile utilizzare wildcards.
+
+ +

Le sezioni CACHE, NETWORK, e FALLBACK possono essere elencate in qualsiasi ordine, ogni sezione può apparire più volte nello stesso cache manifest.

+ +

Example 2: un cache manifest più completo

+ +

Il seguente è un esempio più completo di un cache manifest per un ipotetico sito web all'indirizzo www.example.com.

+ +
CACHE MANIFEST
+# v1 2011-08-14
+# This is another comment
+index.html
+cache.html
+style.css
+image1.png
+
+# Use from network if available
+NETWORK:
+network.html
+
+# Fallback content
+FALLBACK:
+/ fallback.html
+
+ +

Questo esempio utilizza le sezioni  NETWORK e FALLBACK per specificare che la pagina network.html deve essere sempre prelevata dalla rete e che la pagina fallback.html deve essere servita nel caso una risorsa non sia disponibile (es. nel caso sia impossibile stabilire una connessione col server).

+ +

Struttura di un file cache manifest

+ +

Un cache manifest deve essere servito con il MIME type text/cache-manifest. Tutte le risorse servite utilizzando questo MIME type devono seguire la sintassi per l'application cache manifest, come definito in questa sezione.

+ +

I cache manifest sono file di testo in formato UTF-8 e possono opzionalmente contenere un carattere BOM. Gli a capo possono essere rappresentati dal line feed (U+000A), dal carriage return (U+000D), o da entrambi i caratteri.

+ +

La prima riga del cache manifest deve obbligatoriamente essere la stringa CACHE MANIFEST (con un singolo spazio U+0020 tra le due parole), seguita da zero o pià caratteri di tabulazione. Qualsiasi altro testo su questa riga verrà ignorato.

+ +

Il resto del manifesto cache deve essere composto da zero o più delle seguenti righe:

+ +
+
Righe vuote
+
È possibile utilizzare righe vuote composte da zero o più spazi e/o caratteri di tabulazione (tab).
+
Commenti
+
I commenti consistono in zero o più tab e/o spazi seguiti da un singolo carattere #, seguito da zero o più caratteri che compongono il testo del commento. Ogni riga di commento deve essere composta in questa maniera, non esiste una coppia di delimitatori inizio/fine per wrappare intere porzioni di codice.
+
Header della sezione
+
Gli header di sezione specificano quale sezione del cache manifest stiamo per manipolare. Ci sono 3 possibili tipi di header:
+
+ +
+ + + + + + + + + + + + + + + + + + + +
Header di sezioneDescrizione
CACHE:Sezione che definisce quali risorse memorizzare nella cache (questa è la sezione di default, se l'header non è specificato).
NETWORK:Sezione che definisce quali risorse devono essere sempre scaricate dalla rete.
FALLBACK:Sezione che definisce dei fallback nel caso una risorsa risulti non disponibile.
+
+ +
+
L'header di sezione può includere spazi, ma deve includere i due punti (:) nel nome della sezione.
+
dati della sezione
+
Il formato per le righe di dati varia da sezione a sezione. In quella esplicita (CACHE:), ogni riga è un riferimento URI o IRI valido ad una risorsa da memorizzare nella cache (non è possibile utilizzare caretteri jolly in queste sezioni). Si possono inserire spazi vuoti prima o dopo l'URI o l'IRI. Nella sezione di fallback ogni riga è un riferimento URI o IRI valido ad una risorsa, seguito dalla risorsa di fallback che deve essere servita qualndo non si può stabilire una connessione col server. nella sezione network, ogni riga è un riferimento URI o IRI valido ad una risorsa da prelevare dalla rete. (In questa sezione è consentito utilizzare il carattere jolly *). +
Note: Gli URI relativi sono relativi all'URI del cache manifest, non all'URI del documento che fa riferimento al cache manifest.
+
+
+ +

I file cache manifest possono passare da una sezione all'altra a piacimento (ogni header di sezione può essere utilizzato più di una volta), le sezioni possono anche essere vuote.

+ +

Risorse nell'application cache

+ +

Un application cache include sempre almeno una risorsa, identificata da un URI. Tutte le risorse rientrano in una delle seguenti categorie:

+ +
+
Master entries
+
Queste risorse sono aggiunte alla cache perchè sono legate ad una pagina che includeva l'attributo  manifest.
+
Explicit entries
+
Le risorse esplicitamente indicate nel cache manifest.
+
Network entries
+
Le risorse elencate nel file manifest dell'application cache che devono essere sempre recuperate dalla rete.
+
Fallback entries
+
Le risorse elencate nel file manifest che devono essere utilizzate come alternativa ad una risorsa non raggiungibile.
+
+ +
Note: Una risorsa può rientrare in più categorie, per esempio può apparire sia nella sezione esplicita che in quella di fallback.
+ +

Le categorie di risorse sono descritte in dettaglio qui di seguito.

+ +

Master entries

+ +

Le master entries sono un qualsiasi file HTML che include l'attributo {{htmlattrxref("manifest","html")}} nell'elemento {{HTMLElement("html")}}. Per esempio, diciamo che abbiamo il file HTML http://www.example.com/entry.html, composto in questa maniera:

+ +
<html manifest="example.appcache">
+  <h1>Application Cache Example</h1>
+</html>
+
+ +

se entry.html non è elencato nel file cache manifest example.appcache, basta visitare la pagina per farla aggiungere all'application cache in qualità di master entry.

+ +

Explicit entries

+ +

Le Explicit entries sono le risorse esplicitamente elencate in una sezione CACHE del file cache manifest.

+ +

Network entries

+ +

La sezione NETWORK di un cache manifest, specifica le risorse dell'applicazione web che richiedono l'accesso online. Queste voci sono essenzialmente una "online whitelist" — le URI specificate nella sezione NETWORK sono sempre caricate dal server invece che dalla cache. In questo modo il modello di sicurezza del browser protegge l'utente da potenziali falle di sicurezza limitando l'accesso alle risorse approvate.

+ +

Per esempio, si può utilizzare la lista delle risorse network per caricare ed eseguire script ed altro codice dal server invece che dalla cache:

+ +
CACHE MANIFEST
+NETWORK:
+/api
+
+ +

La sezione del cache manifest mostrata qui sopra assicura che tutte le richieste di files contenuti nella sottocartella http://www.example.com/api/ vengano sempre caricate dalla rete senza accedere alla cache.

+ +
Note: Omettere semplicemente le master entries (i files che contengono l'attributo manifest nell'elemento html) dal file manifest potrebbe non avere lo stesso risultato, perchè le master entries sarebbero scaricate solo la prima volta dalla rete, per poi essere aggiunte e prelevate dalla cache ai successivi accessi.
+ +

Fallback entries

+ +

Fallback entries sono utilizzate quando fallisce il tentativo di caricare una risorsa. Per esempio, diciamo che il cache manifest http://www.example.com/example.appcache includa il seguente contenuto:

+ +
CACHE MANIFEST
+FALLBACK:
+example/bar/ example.html
+
+ +

Qualsiasi richiesta a http://www.example.com/example/bar/ o a una qualsiasi delle sue sottocartelle ed il loro contenuto fa partire una richiesta newtwork per caricare la risorsa richiesta. Se il tentativo fallisce, a causa della connessione o di un qualsiasi errore del server, il browser carica il file example.html al suo posto.

+ +

Stati della cache

+ +

Ogni application cache possiede uno stato, che indica la condizione corrente della cache. Le cache che condividono la stessa URI per il manifest, condividono anche lo stesso stato della cache, che può essere uno dei seguenti:

+ +
+
UNCACHED
+
Un valore speciale che indica che l'oggetto application cache non è inizializzato completamente.
+
IDLE
+
L'application cache non è attualmente in fase di aggiornamento.
+
CHECKING
+
Il manifest è in fase di prelievo e controllo aggiornamenti.
+
DOWNLOADING
+
Le risorse sono in fase di scaricamento per essere aggiunte alla cache, a causa di una risorsa modificata nel manifest.
+
UPDATEREADY
+
C'è una nuova versione dell'application cache disponibile. C'è un evento corrispondente updateready, che è lanciato al posto dell'evento cached quando un nuovo aggiornamento è stato scaricato ma non ancora attivato tramite il metodo swapCache().
+
OBSOLETE
+
Il gruppo application cache è obsoleto.
+
+ +

Controllare gli aggiornamenti per il cache manifest

+ +

Si può effettuare, attraverso JavaScript, un test per vedere se un'applicazione ha il cache manifest aggiornato. Dato che un cache manifest può essere stato aggiornato prima che uno script venga caricato ed attacchi un event listener per controllare gli aggiornamenti, gli script devono sempre utilizzare il test window.applicationCache.status.

+ +
function onUpdateReady() {
+  alert('found new version!');
+}
+window.applicationCache.addEventListener('updateready', onUpdateReady);
+if(window.applicationCache.status === window.applicationCache.UPDATEREADY) {
+  onUpdateReady();
+}
+ +

Per testare manualmente un nuovo file manifest, è possibile utilizzare window.applicationCache.update().

+ +

Trappole da evitare (aka Gotchas)

+ +
    +
  • Non accedere mai ai file nella cache utilizzando i parametri tradizionali della  GET (es. other-cached-page.html?parameterName=value). In questo modo il browser ignorerà la cache e andrà a prendere il file dalla rete. Per linkare risorse nella cache che hanno parametri parsati in Javascript, utilizzare i parametri dopo l'hash (#), come per esempio: other-cached-page.html#whatever?parameterName=value.
    • +
  • Quando le applicazioni sono memorizzate nella cache, non è sufficiente aggiornare i files nella cache che sono utilizzati nella pagina web per aggiornarli. E' necessario aggiornare anche il file cache manifest stesso prima che il browser prelevi ed utilizzi i files aggiornati. Si può fare tramite programmazione utilizzando  window.applicationCache.swapCache(), anche se le risorse che sono state già caricate non saranno interessate. Per assicurarsi che le risorse vengono caricate da una nuova versione della cache dell'applicazione, ricaricare la pagina è l'ideale.
    • +
  • Una buona prassi è quella di settare gli expires headers sul tuo web server per far sì che i files *.appcache scadano immediatamente. Questo evita il rischio di inserire nella cache il cache manifest stesso. Per esempio, su Apache è possibile impostare questo comportamento nella seguente:
    + ExpiresByType text/cache-manifest "access plus 0 seconds"
    • +
+ +

Compatibilità con i browser

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support4.03.510.010.64.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support2.1{{CompatVersionUnknown}}{{CompatNo}}11.03.2
+
+ +

Nota: Le versioni di Firefox precedenti alla 3.5 ignorano le sezioni NETWORK e FALLBACK del file cache manifest.

+ +

Vedi anche

+ + + +
{{HTML5ArticleTOC}}
diff --git a/files/it/web/html/utilizzare_application_cache/index.html b/files/it/web/html/utilizzare_application_cache/index.html deleted file mode 100644 index 2c35bbaeae..0000000000 --- a/files/it/web/html/utilizzare_application_cache/index.html +++ /dev/null @@ -1,383 +0,0 @@ ---- -title: Utilizzare l'application cache -slug: Web/HTML/utilizzare_application_cache -translation_of: Web/HTML/Using_the_application_cache ---- -

Introduzione

- -

HTML5 possiede un meccanismo di application caching che permette alle applicazioni web-based di funzionare anche offline. Gli sviluppatori possono utilizzare l'interfaccia Application Cache (AppCache)  per specificare le risorse che il browser deve memorizzare nella cache e rendere disponibili per gli utenti offline. Le applicazioni in cache si caricano e funzionano correttamente anche se gli utenti cliccano sul tasto refresh del browser quando sono offline.

- -

L'uso dell'application cache fornisce all'applicazione i seguenti benefici:

- -
    -
  • Navigazione offline: gli utenti possono navigare un sito anche se sono offline.
    • -
  • Velocità: le risorse sono memorizzate in locale, quindi si caricano più velocemente.
    • -
  • Riduzione del carico server: il browser scarica dal server solo le risorse che sono state modificate.
    • -
- -

Come funziona l'application cache

- -

Abilitare l'application cache

- -

Per abilitare l'application cache per un'applicazione, è necessario includere l'attributo {{htmlattrxref("manifest", "html")}} nell'elemento {{HTMLElement("html")}} delle pagine della tua applicazione, come mostrato nel seguente esempio:

- -
-
<html manifest="example.appcache">
-  ...
-</html>
-
-
- -

L'attributo manifest fa riferimento ad un cache manifest, un file di testo che elenca tutte le risorse (files) che il browser deve memorizzare per la tua applicazione.

- -

Bisogna includere l'attributo manifest in tutte le pagine dell'applicazione che vuoi memorizzare nella cache, il browser non memorizza le pagine che non contengono l'attributo manifest, a meno che tali pagine siano esplicitamente elencate nel file manifest stesso. Non c'è bisogno di elencare nel cache manifest tutte le pagine che si vogliono memorizzare nella cache, il browser implicitamente aggiunge ogni pagina che l'utente visita e che ha l'attributo manifest settato sull'application cache.

- -

Alcuni browser (es. Firefox) mostrano una barra di notifica la prima volta che un utente carica un'applicazione che usa l'application cache. La barra di notifica mostra un messaggio tipo:

- -

Questo sito web (www.example.com) richiede di salvare dati sul computer per l'utilizzo non in linea. [Permetti] [Mai per questo sito] [Non adesso]

- -

Il termine "offline(-enabled) applications" qualche volta fa riferimento alle applicazioni che l'utente ha esplicitamente abilitato ad utilizzare le capacità offline.

- -

Caricare documenti

- -

L'uso dell'application cache modifica il normale processo di caricamento del documento:

- -
    -
  • Se esiste un'application cache, il browser carica il documento e le sue risorse associate direttamente dalla cache, senza accedere alla rete. Ciò velocizza il tempo di caricamento del documento.
    • -
  • Il browser quindi controlla se il cache manifest è stato aggiornato sul server.
    • -
  • Se il cache manifest è stato aggiornato, il browser scarica la nuova versione e le risorse elencate. Quest'operazione viene eseguita in background e non influenza la performance significativamente.
    • -
- -

Il processo di caricamento del documento ed aggiornamento dell'application cache è specificato in maggior dettaglio qui sotto:

- -
    -
  1. Quando il browser visita un documento che include l'attributo manifest, se non esiste un application cache, il browser carica il documento e poi va a prendere tutte le risorse elencate nel file manifest, creando la prima versione dell'application cache.
    2. -
  2. Nelle visite successive, il browser preleverà il documento e tutte le risorse specificate nel file manifest direttamente dall'applcation cache (non dal server). In più, il browser invia un evento checking all'oggetto window.applicationCache e processa il file manifest, seguendo le appropriate regole di chaching HTTP.
    3. -
  3. Se la copia attualmente memorizzata del manifest è aggiornata, il browser invia un evento noupdate all'oggetto applicationCache, ed il processo di aggiornamento è completo. Da notare che se viene modificata una qualsiasi delle risorse sul server, bisogna modificare anche il file manifest, in maniera tale che il browser sappia che ha bisogno di processare tutte le risorse nuovamente.
    4. -
  4. Se il file manifest è stato modificato, tutti i file elencati in esso - così come quelli aggiunti alla cache utilizzando applicationCache.add() - sono aggiunti ad una cache temporanea, seguendo le appropriate regole di caching HTTP. Per ogni file memorizzato in questa cache temporanea, il browser invia un evento progress all'oggetto applicationCache. In caso di errore, il browser invia un evento error e blocca l'aggiornamento dell'application cache.
    5. -
  5. Una volta che tutti i files sono stati recuperati con successo, vengono automaticamente spostati nella vera cache offline, e viene inviato un evento cached all'oggetto applicationCache. Dato che il documento è stato già caricato nel browser prelevandolo dalla cache, il documento aggiornato non sarà renderizzato finchè non viene ricaricato (manualmente o attraverso la programmazione).
    6. -
- -

Percorso di memorizzazione e cancellazione della cache offline

- -

Su Chrome è possibile cancellare la cache offline sia selezionando  "Clear browsing data..." dalle preferenze, oppure visitando  chrome://appcache-internals/. Safari ha una voce "Svuota cache" simile nelle sue preferenze, ma potrebbe essere necessario riavviare il browser.

- -

Su Firefox, i dati della cache offline vengono memorizzati separatamente dal profilo Firefox — insieme ai dati degli altri programmi installati:

- -
    -
  • Windows Vista/7: C:\Users\<username>\AppData\Local\Mozilla\Firefox\Profiles\<salt>.<profile name>\OfflineCache
    • -
  • Mac/Linux: /Users/<username>/Library/Caches/Firefox/Profiles/<salt>.<profile name>/OfflineCache
    • -
- -

Su Firefox è possibile ispezionare lo stato della cache offline sulla pagina about:cache (box "Offline cache device"). La cache offline può essere cancellata separatamente per ogni sito utilizzando il tasto "Rimuovi..." presente in:
- Firefox -> Opzioni -> Avanzate -> Rete -> Dati non in linea e informazioni utente.

- -

Nelle versioni precedenti a Firefox 11, l'application cache non poteva essere cancellata utilizzando
- Tools -> Clear Recent History
- oppure
- Tools -> Options -> Advanced -> Network -> Offline data -> Clear Now Questo bug è stato fixato nelle versioni successive.

- -

Vedi anche clearing the DOM Storage data.

- -

Le application cache possono anche diventare obsolete. Se il un file manifest dell'applicazione viene rimosso dal server, il browser rimuove tutte le application cache che utilizzano quel manifest ed invia un evento "obsoleted" all'oggetto applicationCache. Questo imposta lo stato dell'application cache su OBSOLETE.

- -

Il file cache manifest

- -

Includere un file cache manifest

- -

L'attributo manifest in un'applicazione web può specificare sia il percorso relativo di un file cache manifest che un URL assoluto (gli URL assoluti devono provenire dalla stessa origine dell'applicazione). Un file cache manifest può avere diverse estensioni, ma come MIME type deve avere text/cache-manifest.

- -
Nota: Sui server Apache, il MIME type per i file manifest (.appcache) può essere impostato aggiungendo AddType text/cache-manifest .appcache ad un file .htaccess posizionato nella cartella root, oppure nella stessa cartella dell'applicazione.
- -

Le voci in un file cache manifest

- -

Il cache manifest è un semplice file di testo che elenca le risorse che il browser deve memorizzare per l'accesso offline. Le risorse sono identificate da un URI. Le voci elencate nel cache manifest devono avere lo stesso schema, host e porta come nel manifest.

- -

Esempio 1: un semplice cache manifest

- -

Il seguente è un semplice file di cache manifest, example.appcache, per un ipotetico sito web all'indirizzo www.example.com.

- -
CACHE MANIFEST
-# v1 - 2011-08-13
-# This is a comment.
-http://www.example.com/index.html
-http://www.example.com/header.png
-http://www.example.com/blah/blah
-
- -

Un file cache manifest può includere 3 sezioni (CACHE, NETWORK, e FALLBACK, verranno discusse in seguito). Nell'esempio qui sopra, non c'è una sezione header, quindi si assume che tutte le risorse siano elencate nell'esplicita sezione (CACHE), intendendo che il browser deve memorizzare nell'application cache tutte le risorse elencate. Le risorse possono essere specificate utilizzando sia URL assoluti che relativi (es. index.html).

- -

Il commento "v1" si trova lì per una buona ragione. I browser aggiornano  l'application cache solo se il file manifest viene modificato. Se una risorsa presente nella cache viene modificata (per esempio, viene aggiornata l'immagine header.png con un nuovo contenuto), bisogna anche cambiare il contenuto del file manifest per permettere ai browser di sapere che c'è bisogno di refreshare la cache. Si può effettuare qualsiasi modifica al file manifest, ma la best practice è modificare il numero di versione.

- -
Importante: Non includere mai il cache manifest tra le voci del file stesso, altrimenti verrà sempre prelevato dalla cache locale e sarà quasi impossibile informare il browser che un nuovo manifest è disponibile sul server.
- -

Le sezioni di un file cache manifest: CACHE, NETWORK, e FALLBACK

- -

Un manifest può avere 3 sezioni distine: CACHE, NETWORK, e FALLBACK.

- -
-
CACHE:
-
Questa è la sezione di default per le voci in un cache manifest. I files elencati sotto l'header della sezione CACHE: (oppure subito dopo la riga CACHE MANIFEST) sono esplicitamente memorizzati nella cache dopo che vengono scaricati per la prima volta.
-
NETWORK:
-
I files elencati sotto l'header della sezione NETWORK: sono risorse inserite in una white-list che richiedono una connessione al server. Tutte le richieste a queste risorse bypassano la cache, anche se l'utente è offline. È possibile utilizzare wildcards.
-
FALLBACK:
-
Nella sezione FALLBACK: vengono specificate le pagine alternative che il browser deve utilizzare nel caso una risorsa non sia accessibile. Ogni voce in questa sezione è composta da 2 URI - il primo è la risorsa, il secondo il fallback. Entrambi gli URI devono essere relativi e provenienti dalla stessa origine del file manifest. È possibile utilizzare wildcards.
-
- -

Le sezioni CACHE, NETWORK, e FALLBACK possono essere elencate in qualsiasi ordine, ogni sezione può apparire più volte nello stesso cache manifest.

- -

Example 2: un cache manifest più completo

- -

Il seguente è un esempio più completo di un cache manifest per un ipotetico sito web all'indirizzo www.example.com.

- -
CACHE MANIFEST
-# v1 2011-08-14
-# This is another comment
-index.html
-cache.html
-style.css
-image1.png
-
-# Use from network if available
-NETWORK:
-network.html
-
-# Fallback content
-FALLBACK:
-/ fallback.html
-
- -

Questo esempio utilizza le sezioni  NETWORK e FALLBACK per specificare che la pagina network.html deve essere sempre prelevata dalla rete e che la pagina fallback.html deve essere servita nel caso una risorsa non sia disponibile (es. nel caso sia impossibile stabilire una connessione col server).

- -

Struttura di un file cache manifest

- -

Un cache manifest deve essere servito con il MIME type text/cache-manifest. Tutte le risorse servite utilizzando questo MIME type devono seguire la sintassi per l'application cache manifest, come definito in questa sezione.

- -

I cache manifest sono file di testo in formato UTF-8 e possono opzionalmente contenere un carattere BOM. Gli a capo possono essere rappresentati dal line feed (U+000A), dal carriage return (U+000D), o da entrambi i caratteri.

- -

La prima riga del cache manifest deve obbligatoriamente essere la stringa CACHE MANIFEST (con un singolo spazio U+0020 tra le due parole), seguita da zero o pià caratteri di tabulazione. Qualsiasi altro testo su questa riga verrà ignorato.

- -

Il resto del manifesto cache deve essere composto da zero o più delle seguenti righe:

- -
-
Righe vuote
-
È possibile utilizzare righe vuote composte da zero o più spazi e/o caratteri di tabulazione (tab).
-
Commenti
-
I commenti consistono in zero o più tab e/o spazi seguiti da un singolo carattere #, seguito da zero o più caratteri che compongono il testo del commento. Ogni riga di commento deve essere composta in questa maniera, non esiste una coppia di delimitatori inizio/fine per wrappare intere porzioni di codice.
-
Header della sezione
-
Gli header di sezione specificano quale sezione del cache manifest stiamo per manipolare. Ci sono 3 possibili tipi di header:
-
- -
- - - - - - - - - - - - - - - - - - - -
Header di sezioneDescrizione
CACHE:Sezione che definisce quali risorse memorizzare nella cache (questa è la sezione di default, se l'header non è specificato).
NETWORK:Sezione che definisce quali risorse devono essere sempre scaricate dalla rete.
FALLBACK:Sezione che definisce dei fallback nel caso una risorsa risulti non disponibile.
-
- -
-
L'header di sezione può includere spazi, ma deve includere i due punti (:) nel nome della sezione.
-
dati della sezione
-
Il formato per le righe di dati varia da sezione a sezione. In quella esplicita (CACHE:), ogni riga è un riferimento URI o IRI valido ad una risorsa da memorizzare nella cache (non è possibile utilizzare caretteri jolly in queste sezioni). Si possono inserire spazi vuoti prima o dopo l'URI o l'IRI. Nella sezione di fallback ogni riga è un riferimento URI o IRI valido ad una risorsa, seguito dalla risorsa di fallback che deve essere servita qualndo non si può stabilire una connessione col server. nella sezione network, ogni riga è un riferimento URI o IRI valido ad una risorsa da prelevare dalla rete. (In questa sezione è consentito utilizzare il carattere jolly *). -
Note: Gli URI relativi sono relativi all'URI del cache manifest, non all'URI del documento che fa riferimento al cache manifest.
-
-
- -

I file cache manifest possono passare da una sezione all'altra a piacimento (ogni header di sezione può essere utilizzato più di una volta), le sezioni possono anche essere vuote.

- -

Risorse nell'application cache

- -

Un application cache include sempre almeno una risorsa, identificata da un URI. Tutte le risorse rientrano in una delle seguenti categorie:

- -
-
Master entries
-
Queste risorse sono aggiunte alla cache perchè sono legate ad una pagina che includeva l'attributo  manifest.
-
Explicit entries
-
Le risorse esplicitamente indicate nel cache manifest.
-
Network entries
-
Le risorse elencate nel file manifest dell'application cache che devono essere sempre recuperate dalla rete.
-
Fallback entries
-
Le risorse elencate nel file manifest che devono essere utilizzate come alternativa ad una risorsa non raggiungibile.
-
- -
Note: Una risorsa può rientrare in più categorie, per esempio può apparire sia nella sezione esplicita che in quella di fallback.
- -

Le categorie di risorse sono descritte in dettaglio qui di seguito.

- -

Master entries

- -

Le master entries sono un qualsiasi file HTML che include l'attributo {{htmlattrxref("manifest","html")}} nell'elemento {{HTMLElement("html")}}. Per esempio, diciamo che abbiamo il file HTML http://www.example.com/entry.html, composto in questa maniera:

- -
<html manifest="example.appcache">
-  <h1>Application Cache Example</h1>
-</html>
-
- -

se entry.html non è elencato nel file cache manifest example.appcache, basta visitare la pagina per farla aggiungere all'application cache in qualità di master entry.

- -

Explicit entries

- -

Le Explicit entries sono le risorse esplicitamente elencate in una sezione CACHE del file cache manifest.

- -

Network entries

- -

La sezione NETWORK di un cache manifest, specifica le risorse dell'applicazione web che richiedono l'accesso online. Queste voci sono essenzialmente una "online whitelist" — le URI specificate nella sezione NETWORK sono sempre caricate dal server invece che dalla cache. In questo modo il modello di sicurezza del browser protegge l'utente da potenziali falle di sicurezza limitando l'accesso alle risorse approvate.

- -

Per esempio, si può utilizzare la lista delle risorse network per caricare ed eseguire script ed altro codice dal server invece che dalla cache:

- -
CACHE MANIFEST
-NETWORK:
-/api
-
- -

La sezione del cache manifest mostrata qui sopra assicura che tutte le richieste di files contenuti nella sottocartella http://www.example.com/api/ vengano sempre caricate dalla rete senza accedere alla cache.

- -
Note: Omettere semplicemente le master entries (i files che contengono l'attributo manifest nell'elemento html) dal file manifest potrebbe non avere lo stesso risultato, perchè le master entries sarebbero scaricate solo la prima volta dalla rete, per poi essere aggiunte e prelevate dalla cache ai successivi accessi.
- -

Fallback entries

- -

Fallback entries sono utilizzate quando fallisce il tentativo di caricare una risorsa. Per esempio, diciamo che il cache manifest http://www.example.com/example.appcache includa il seguente contenuto:

- -
CACHE MANIFEST
-FALLBACK:
-example/bar/ example.html
-
- -

Qualsiasi richiesta a http://www.example.com/example/bar/ o a una qualsiasi delle sue sottocartelle ed il loro contenuto fa partire una richiesta newtwork per caricare la risorsa richiesta. Se il tentativo fallisce, a causa della connessione o di un qualsiasi errore del server, il browser carica il file example.html al suo posto.

- -

Stati della cache

- -

Ogni application cache possiede uno stato, che indica la condizione corrente della cache. Le cache che condividono la stessa URI per il manifest, condividono anche lo stesso stato della cache, che può essere uno dei seguenti:

- -
-
UNCACHED
-
Un valore speciale che indica che l'oggetto application cache non è inizializzato completamente.
-
IDLE
-
L'application cache non è attualmente in fase di aggiornamento.
-
CHECKING
-
Il manifest è in fase di prelievo e controllo aggiornamenti.
-
DOWNLOADING
-
Le risorse sono in fase di scaricamento per essere aggiunte alla cache, a causa di una risorsa modificata nel manifest.
-
UPDATEREADY
-
C'è una nuova versione dell'application cache disponibile. C'è un evento corrispondente updateready, che è lanciato al posto dell'evento cached quando un nuovo aggiornamento è stato scaricato ma non ancora attivato tramite il metodo swapCache().
-
OBSOLETE
-
Il gruppo application cache è obsoleto.
-
- -

Controllare gli aggiornamenti per il cache manifest

- -

Si può effettuare, attraverso JavaScript, un test per vedere se un'applicazione ha il cache manifest aggiornato. Dato che un cache manifest può essere stato aggiornato prima che uno script venga caricato ed attacchi un event listener per controllare gli aggiornamenti, gli script devono sempre utilizzare il test window.applicationCache.status.

- -
function onUpdateReady() {
-  alert('found new version!');
-}
-window.applicationCache.addEventListener('updateready', onUpdateReady);
-if(window.applicationCache.status === window.applicationCache.UPDATEREADY) {
-  onUpdateReady();
-}
- -

Per testare manualmente un nuovo file manifest, è possibile utilizzare window.applicationCache.update().

- -

Trappole da evitare (aka Gotchas)

- -
    -
  • Non accedere mai ai file nella cache utilizzando i parametri tradizionali della  GET (es. other-cached-page.html?parameterName=value). In questo modo il browser ignorerà la cache e andrà a prendere il file dalla rete. Per linkare risorse nella cache che hanno parametri parsati in Javascript, utilizzare i parametri dopo l'hash (#), come per esempio: other-cached-page.html#whatever?parameterName=value.
    • -
  • Quando le applicazioni sono memorizzate nella cache, non è sufficiente aggiornare i files nella cache che sono utilizzati nella pagina web per aggiornarli. E' necessario aggiornare anche il file cache manifest stesso prima che il browser prelevi ed utilizzi i files aggiornati. Si può fare tramite programmazione utilizzando  window.applicationCache.swapCache(), anche se le risorse che sono state già caricate non saranno interessate. Per assicurarsi che le risorse vengono caricate da una nuova versione della cache dell'applicazione, ricaricare la pagina è l'ideale.
    • -
  • Una buona prassi è quella di settare gli expires headers sul tuo web server per far sì che i files *.appcache scadano immediatamente. Questo evita il rischio di inserire nella cache il cache manifest stesso. Per esempio, su Apache è possibile impostare questo comportamento nella seguente:
    - ExpiresByType text/cache-manifest "access plus 0 seconds"
    • -
- -

Compatibilità con i browser

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support4.03.510.010.64.0
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support2.1{{CompatVersionUnknown}}{{CompatNo}}11.03.2
-
- -

Nota: Le versioni di Firefox precedenti alla 3.5 ignorano le sezioni NETWORK e FALLBACK del file cache manifest.

- -

Vedi anche

- - - -
{{HTML5ArticleTOC}}
diff --git a/files/it/web/http/basi_http/index.html b/files/it/web/http/basi_http/index.html deleted file mode 100644 index cbb668f329..0000000000 --- a/files/it/web/http/basi_http/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: Le basi dell'HTTP -slug: Web/HTTP/Basi_HTTP -translation_of: Web/HTTP/Basics_of_HTTP ---- -
{{HTTPSidebar}}
- -

HTTP è un protocollo espandibile che si basa su concetti come le risorse e gli URI (Uniform Resource Identifiers), la semplice struttura del messaggio, e il flusso di comunicazione client-server. Oltre a questi concetti di base, nel corso degli anni sono state sviluppate numerose estensioni che aggiungono funzionalità e semantica aggiornate con nuovi metodi HTTP o intestazioni.

- -

Articoli

- -
-
Descrizione dell'HTTP
-
Descrive cos'è l'HTTP e il suo ruolo nell'architettura web, compresa la sua posizione nella pila dei protocolli.
-
Evoluzione dell'HTTP
-
L'HTTP è stato creato all'inizio degli anni '90 ed è stato ampliato più volte. Questo articolo ripercorre la sua storia e descrive HTTP/0.9, HTTP/1.0, HTTP/1.1, e il moderno HTTP/2, oltre alle novità introdotte nel corso degli anni.
-
Risorse e URIs
-
Una breve introduzione al concetto di risorse, identificatori e posizioni sul web.
-
Identificare le risorse sul Web
-
Descrive come sono referenziate le risorse web e come individuarle.
-
Data URIs
-
Un tipo specifico di URI che incorpora direttamente la risorsa che rappresenta. I data URIs sono molto convenienti, ma hanno qualche pecca.
-
Resource URLs {{Non-standard_Inline}}
-
-

I Resource URLs, quelli con il prefisso dello schema delle risorse, sono utilizzati da Firefox e dalle estensioni del browser Firefox per caricare le risorse internamente, ma sono disponibili anche per alcuni siti a cui il browser si connette.

-
-
Separare l'identità e la posizione di una risorsa: L'intestazione HTTP Alt-Svc
-
La maggior parte delle volte l'identità e la posizione di una risorsa web sono condivise, questo può cambiare con l'intestazione Alt-Svc.
-
MIME types
-
Da HTTP/1.0, possono essere trasmessi diversi tipi di contenuto. Questo articolo spiega come questo è compiuto usando l' {{HTTPHeader("Content-Type")}} header e il MIME standard.
-
Choosing between www and non-www URLs
-
Questo articolo fornisce indicazioni sul come scegliere se usi un www-prefixed domain o no, insieme alle conseguenze di quella scelta.
-
Flow of an HTTP session
-
Questo articolo fondamentale descrive una tipica sessione HTTP:
- Cosa succede dietro le quinte quando fai clic su un collegamento nel tuo browser.
-
HTTP Messages
-
I messaggi HTTP trasmessi durante la richiesta o risposta hanno una chiara struttura. Questo articolo introduttivo descrive questa struttura, il suo scopo, e le sue possibilità.
-
Frame and message structure in HTTP/2
-
HTTP/2 eincapsula e rappresenta messaggi HTTP/1.x in un frame binario. Questo articolo spiega la struttura del frame, il suo scopo, e i vari modi con il quale può essere scritto sotto forma di codice.
-
Connection management in HTTP/1.x
-
HTTP/1.1 era la prima versione di HTTP per supportare persistent connection and pipelining. Questo articolo spiega entrambi i concetti.
-
Connection management in HTTP/2
-
HTTP/2 completely revisited how connections are created and maintained. This article explains how HTTP frames allow multiplexing and solve the 'head-of-line' blocking problem of former HTTP versions.
-
Content Negotiation
-
HTTP introduces a set of headers, starting with Accept as a way for a browser to announce the format, language, or encoding it prefers. This article explains how this advertisement happens, how the server is expected to react, and how it chooses the most adequate response.
-
- -
diff --git a/files/it/web/http/basics_of_http/index.html b/files/it/web/http/basics_of_http/index.html new file mode 100644 index 0000000000..cbb668f329 --- /dev/null +++ b/files/it/web/http/basics_of_http/index.html @@ -0,0 +1,48 @@ +--- +title: Le basi dell'HTTP +slug: Web/HTTP/Basi_HTTP +translation_of: Web/HTTP/Basics_of_HTTP +--- +
{{HTTPSidebar}}
+ +

HTTP è un protocollo espandibile che si basa su concetti come le risorse e gli URI (Uniform Resource Identifiers), la semplice struttura del messaggio, e il flusso di comunicazione client-server. Oltre a questi concetti di base, nel corso degli anni sono state sviluppate numerose estensioni che aggiungono funzionalità e semantica aggiornate con nuovi metodi HTTP o intestazioni.

+ +

Articoli

+ +
+
Descrizione dell'HTTP
+
Descrive cos'è l'HTTP e il suo ruolo nell'architettura web, compresa la sua posizione nella pila dei protocolli.
+
Evoluzione dell'HTTP
+
L'HTTP è stato creato all'inizio degli anni '90 ed è stato ampliato più volte. Questo articolo ripercorre la sua storia e descrive HTTP/0.9, HTTP/1.0, HTTP/1.1, e il moderno HTTP/2, oltre alle novità introdotte nel corso degli anni.
+
Risorse e URIs
+
Una breve introduzione al concetto di risorse, identificatori e posizioni sul web.
+
Identificare le risorse sul Web
+
Descrive come sono referenziate le risorse web e come individuarle.
+
Data URIs
+
Un tipo specifico di URI che incorpora direttamente la risorsa che rappresenta. I data URIs sono molto convenienti, ma hanno qualche pecca.
+
Resource URLs {{Non-standard_Inline}}
+
+

I Resource URLs, quelli con il prefisso dello schema delle risorse, sono utilizzati da Firefox e dalle estensioni del browser Firefox per caricare le risorse internamente, ma sono disponibili anche per alcuni siti a cui il browser si connette.

+
+
Separare l'identità e la posizione di una risorsa: L'intestazione HTTP Alt-Svc
+
La maggior parte delle volte l'identità e la posizione di una risorsa web sono condivise, questo può cambiare con l'intestazione Alt-Svc.
+
MIME types
+
Da HTTP/1.0, possono essere trasmessi diversi tipi di contenuto. Questo articolo spiega come questo è compiuto usando l' {{HTTPHeader("Content-Type")}} header e il MIME standard.
+
Choosing between www and non-www URLs
+
Questo articolo fornisce indicazioni sul come scegliere se usi un www-prefixed domain o no, insieme alle conseguenze di quella scelta.
+
Flow of an HTTP session
+
Questo articolo fondamentale descrive una tipica sessione HTTP:
+ Cosa succede dietro le quinte quando fai clic su un collegamento nel tuo browser.
+
HTTP Messages
+
I messaggi HTTP trasmessi durante la richiesta o risposta hanno una chiara struttura. Questo articolo introduttivo descrive questa struttura, il suo scopo, e le sue possibilità.
+
Frame and message structure in HTTP/2
+
HTTP/2 eincapsula e rappresenta messaggi HTTP/1.x in un frame binario. Questo articolo spiega la struttura del frame, il suo scopo, e i vari modi con il quale può essere scritto sotto forma di codice.
+
Connection management in HTTP/1.x
+
HTTP/1.1 era la prima versione di HTTP per supportare persistent connection and pipelining. Questo articolo spiega entrambi i concetti.
+
Connection management in HTTP/2
+
HTTP/2 completely revisited how connections are created and maintained. This article explains how HTTP frames allow multiplexing and solve the 'head-of-line' blocking problem of former HTTP versions.
+
Content Negotiation
+
HTTP introduces a set of headers, starting with Accept as a way for a browser to announce the format, language, or encoding it prefers. This article explains how this advertisement happens, how the server is expected to react, and how it chooses the most adequate response.
+
+ +
diff --git a/files/it/web/http/compression/index.html b/files/it/web/http/compression/index.html new file mode 100644 index 0000000000..59154440d8 --- /dev/null +++ b/files/it/web/http/compression/index.html @@ -0,0 +1,67 @@ +--- +title: Compressione in HTTP +slug: Web/HTTP/Compressione +translation_of: Web/HTTP/Compression +--- +
{{HTTPSidebar}}
+ +

La compressione è un valido modo per incrementare le performance di un sito web. Per alcuni documenti, infatti, la riduzione del peso fino al 70% permette di dimiuire la larghezza di banda necessaria. Nel corso degli anni, inoltre, gli algoritmi sono diventati più efficienti e allo stesso tempo client e server ne supportano di nuovi.

+ +

A livello pratico non è necessario che gli sviluppatori web implementino dei meccanismi di compressione, dato che sia browser che server li hanno già implementati, ma devono tuttavia assicurarsi che il server sia adeguatamente configurato. La compressione avviene a tre livelli differenti:

+ +
    +
  • prima alcuni formati di file vengono compressi con  specifici metodi ottimizzati,
    • +
  • quindi la crittografia generale può avvenire a livello HTTP (la risorsa viene trasmessa compressa da un capo all'altro),
    • +
  • e infine la compressione può essere definita a livello di connessione, tra due nodi di una connessione HTTP.
    • +
+ +

Formato di compressione dei file

+ +

Ogni tipo di dati ha una certa ridondanza, ovvero uno spreco di spazio. Se il testo può in genere avere una ridondanza fino al 60%, questa percentuale può essere molto più alta per altri media come audio e video. A differenza del testo, questi altri tipi di supporti utilizzano molto spazio per archiviare i dati, di conseguenza la necessità di ottimizzare l'archiviazione e recuperare spazio si manifestò fin da subito. Gli ingegneri hanno progettato l'algoritmo di compressione ottimizzato utilizzato dai formati di file progettati per questo scopo specifico. Gli algoritmi di compressione utilizzati per i file possono essere raggruppati in due grandi categorie:

+ +
    +
  • Compressione loss-less (senza perdite), in cui il ciclo di compressione-decompressione non altera i dati recuperati, che corrisponderanno (byte per byte) all'originale.
    + Ad esempio, nel caso delle immagini, gif e png utilizzano la compressione senza perdite.
    • +
  • Compressione lossy (con perdita), in cui il ciclo altera i dati originali in maniera (auspicabilmente) impercettibile per l'utente.
    + I formati video sul Web sono con perdite; anche il formato di immagine jpeg è con perdita di dati.
    • +
+ +

Alcuni formati possono essere utilizzati sia per la compressione loss-less che lossy, come ad esempio webp, e di solito l'algoritmo di compressione con perdita può essere configurato per comprimere più o meno, il che ovviamente porta a una qualità inferiore o superiore. Per migliorare le prestazioni di un sito Web l'ideale è comprimerlo il più possibile, mantenendo allo stesso tempo un livello di qualità accettabile. Per le immagini, un'immagine generata da uno strumento potrebbe non essere sufficientemente ottimizzata per il Web; si consiglia di utilizzare strumenti che comprimeranno il più possibile con la qualità richiesta. Esistono numerosi strumenti specializzati per questo.

+ +

Gli algoritmi di compressione lossy sono generalmente più efficienti di quelli lossless.

+ +
+

Poiché la compressione funziona meglio su un tipo specifico di file, di solito non fornisce nulla per comprimerli una seconda volta. In effetti, questo è spesso controproducente in quanto il costo del sovraccarico (gli algoritmi di solito richiedono un dizionario che si aggiunge alla dimensione iniziale) può essere superiore al guadagno extra nella compressione risultando in un file più grande. Non utilizzare le due seguenti tecniche per i file in un formato compresso.

+
+ +

Compression End-to-end

+ +

Per la compressione, la compressione end-to-end è il luogo in cui risiedono i maggiori miglioramenti delle prestazioni dei siti Web. La compressione end-to-end si riferisce a una compressione del corpo di un messaggio che viene eseguita dal server e durerà inalterata fino a quando non raggiunge il client. Qualunque siano i nodi intermedi, lasciano il corpo intatto.

+ +

+ +

Tutti i browser e server moderni lo supportano e l'unica cosa da negoziare è l'algoritmo di compressione da utilizzare. Questi algoritmi sono ottimizzati per il testo. Negli anni '90, la tecnologia di compressione stava avanzando a un ritmo rapido e numerosi algoritmi successivi sono stati aggiunti alla serie di scelte possibili. Al giorno d'oggi, solo due sono rilevanti: gzip, il più comune, e br il nuovo sfidante.

+ +

Per selezionare l'algoritmo da utilizzare, i browser e i server utilizzano la negoziazione proattiva dei contenuti. Il browser invia un'intestazione {{HTTPHeader ("Accept-Encoding")}} con l'algoritmo che supporta e il suo ordine di precedenza, il server ne sceglie uno, lo utilizza per comprimere il corpo della risposta e utilizza {{HTTPHeader (" Content-Encoding ")}} per indicare al browser l'algoritmo che ha scelto. Poiché la negoziazione del contenuto è stata utilizzata per scegliere una rappresentazione basata sulla sua codifica, il server deve inviare un'intestazione {{HTTPHeader ("Vary")}} contenente almeno {{HTTPHeader ("Accept-Encoding")}} accanto a questa intestazione in la risposta; in questo modo, le cache saranno in grado di memorizzare nella cache le diverse rappresentazioni della risorsa.

+ +

+ +

Poiché la compressione apporta miglioramenti significativi alle prestazioni, si consiglia di attivarla per tutti i file, ma già compressi come immagini, file audio e video.

+ +

Apache supporta la compressione e utilizza mod_deflate; per nginx c'è ngx_http_gzip_module; per IIS, l'elemento <httpCompression>.

+ +

Hop-by-hop compression

+ +

La compressione hop-by-hop, sebbene simile alla compressione end-to-end, differisce per un elemento fondamentale: la compressione non avviene sulla risorsa nel server, creando una rappresentazione specifica che viene poi trasmessa, ma sul corpo di il messaggio tra due nodi qualsiasi sul percorso tra il client e il server. Le connessioni tra i nodi intermedi successivi possono applicare una compressione diversa.

+ +

+ +

Per fare ciò, HTTP utilizza un meccanismo simile alla negoziazione del contenuto per la compressione end-to-end: il nodo che trasmette la richiesta annuncia la sua volontà utilizzando l'intestazione {{HTTPHeader ("TE")}} e l'altro nodo sceglie il metodo adeguato , lo applica e indica la sua scelta con l'intestazione {{HTTPHeader ("Transfer-Encoding")}}.

+ +

+ +

I

+ +

In pratica, la compressione hop-by-hop è trasparente per il server e il client ed è usata raramente. {{HTTPHeader ("TE")}} e {{HTTPHeader ("Transfer-Encoding")}} sono usati principalmente per inviare una risposta a blocchi, consentendo di iniziare a trasmettere una risorsa senza conoscerne la lunghezza.

+ +

Si noti che l'utilizzo di {{HTTPHeader ("Transfer-Encoding")}} e la compressione a livello di hop è così raro che la maggior parte dei server, come Apache, nginx o IIS, non ha un modo semplice per configurarlo. Tale configurazione di solito avviene a livello di proxy.

diff --git a/files/it/web/http/compressione/index.html b/files/it/web/http/compressione/index.html deleted file mode 100644 index 59154440d8..0000000000 --- a/files/it/web/http/compressione/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: Compressione in HTTP -slug: Web/HTTP/Compressione -translation_of: Web/HTTP/Compression ---- -
{{HTTPSidebar}}
- -

La compressione è un valido modo per incrementare le performance di un sito web. Per alcuni documenti, infatti, la riduzione del peso fino al 70% permette di dimiuire la larghezza di banda necessaria. Nel corso degli anni, inoltre, gli algoritmi sono diventati più efficienti e allo stesso tempo client e server ne supportano di nuovi.

- -

A livello pratico non è necessario che gli sviluppatori web implementino dei meccanismi di compressione, dato che sia browser che server li hanno già implementati, ma devono tuttavia assicurarsi che il server sia adeguatamente configurato. La compressione avviene a tre livelli differenti:

- -
    -
  • prima alcuni formati di file vengono compressi con  specifici metodi ottimizzati,
    • -
  • quindi la crittografia generale può avvenire a livello HTTP (la risorsa viene trasmessa compressa da un capo all'altro),
    • -
  • e infine la compressione può essere definita a livello di connessione, tra due nodi di una connessione HTTP.
    • -
- -

Formato di compressione dei file

- -

Ogni tipo di dati ha una certa ridondanza, ovvero uno spreco di spazio. Se il testo può in genere avere una ridondanza fino al 60%, questa percentuale può essere molto più alta per altri media come audio e video. A differenza del testo, questi altri tipi di supporti utilizzano molto spazio per archiviare i dati, di conseguenza la necessità di ottimizzare l'archiviazione e recuperare spazio si manifestò fin da subito. Gli ingegneri hanno progettato l'algoritmo di compressione ottimizzato utilizzato dai formati di file progettati per questo scopo specifico. Gli algoritmi di compressione utilizzati per i file possono essere raggruppati in due grandi categorie:

- -
    -
  • Compressione loss-less (senza perdite), in cui il ciclo di compressione-decompressione non altera i dati recuperati, che corrisponderanno (byte per byte) all'originale.
    - Ad esempio, nel caso delle immagini, gif e png utilizzano la compressione senza perdite.
    • -
  • Compressione lossy (con perdita), in cui il ciclo altera i dati originali in maniera (auspicabilmente) impercettibile per l'utente.
    - I formati video sul Web sono con perdite; anche il formato di immagine jpeg è con perdita di dati.
    • -
- -

Alcuni formati possono essere utilizzati sia per la compressione loss-less che lossy, come ad esempio webp, e di solito l'algoritmo di compressione con perdita può essere configurato per comprimere più o meno, il che ovviamente porta a una qualità inferiore o superiore. Per migliorare le prestazioni di un sito Web l'ideale è comprimerlo il più possibile, mantenendo allo stesso tempo un livello di qualità accettabile. Per le immagini, un'immagine generata da uno strumento potrebbe non essere sufficientemente ottimizzata per il Web; si consiglia di utilizzare strumenti che comprimeranno il più possibile con la qualità richiesta. Esistono numerosi strumenti specializzati per questo.

- -

Gli algoritmi di compressione lossy sono generalmente più efficienti di quelli lossless.

- -
-

Poiché la compressione funziona meglio su un tipo specifico di file, di solito non fornisce nulla per comprimerli una seconda volta. In effetti, questo è spesso controproducente in quanto il costo del sovraccarico (gli algoritmi di solito richiedono un dizionario che si aggiunge alla dimensione iniziale) può essere superiore al guadagno extra nella compressione risultando in un file più grande. Non utilizzare le due seguenti tecniche per i file in un formato compresso.

-
- -

Compression End-to-end

- -

Per la compressione, la compressione end-to-end è il luogo in cui risiedono i maggiori miglioramenti delle prestazioni dei siti Web. La compressione end-to-end si riferisce a una compressione del corpo di un messaggio che viene eseguita dal server e durerà inalterata fino a quando non raggiunge il client. Qualunque siano i nodi intermedi, lasciano il corpo intatto.

- -

- -

Tutti i browser e server moderni lo supportano e l'unica cosa da negoziare è l'algoritmo di compressione da utilizzare. Questi algoritmi sono ottimizzati per il testo. Negli anni '90, la tecnologia di compressione stava avanzando a un ritmo rapido e numerosi algoritmi successivi sono stati aggiunti alla serie di scelte possibili. Al giorno d'oggi, solo due sono rilevanti: gzip, il più comune, e br il nuovo sfidante.

- -

Per selezionare l'algoritmo da utilizzare, i browser e i server utilizzano la negoziazione proattiva dei contenuti. Il browser invia un'intestazione {{HTTPHeader ("Accept-Encoding")}} con l'algoritmo che supporta e il suo ordine di precedenza, il server ne sceglie uno, lo utilizza per comprimere il corpo della risposta e utilizza {{HTTPHeader (" Content-Encoding ")}} per indicare al browser l'algoritmo che ha scelto. Poiché la negoziazione del contenuto è stata utilizzata per scegliere una rappresentazione basata sulla sua codifica, il server deve inviare un'intestazione {{HTTPHeader ("Vary")}} contenente almeno {{HTTPHeader ("Accept-Encoding")}} accanto a questa intestazione in la risposta; in questo modo, le cache saranno in grado di memorizzare nella cache le diverse rappresentazioni della risorsa.

- -

- -

Poiché la compressione apporta miglioramenti significativi alle prestazioni, si consiglia di attivarla per tutti i file, ma già compressi come immagini, file audio e video.

- -

Apache supporta la compressione e utilizza mod_deflate; per nginx c'è ngx_http_gzip_module; per IIS, l'elemento <httpCompression>.

- -

Hop-by-hop compression

- -

La compressione hop-by-hop, sebbene simile alla compressione end-to-end, differisce per un elemento fondamentale: la compressione non avviene sulla risorsa nel server, creando una rappresentazione specifica che viene poi trasmessa, ma sul corpo di il messaggio tra due nodi qualsiasi sul percorso tra il client e il server. Le connessioni tra i nodi intermedi successivi possono applicare una compressione diversa.

- -

- -

Per fare ciò, HTTP utilizza un meccanismo simile alla negoziazione del contenuto per la compressione end-to-end: il nodo che trasmette la richiesta annuncia la sua volontà utilizzando l'intestazione {{HTTPHeader ("TE")}} e l'altro nodo sceglie il metodo adeguato , lo applica e indica la sua scelta con l'intestazione {{HTTPHeader ("Transfer-Encoding")}}.

- -

- -

I

- -

In pratica, la compressione hop-by-hop è trasparente per il server e il client ed è usata raramente. {{HTTPHeader ("TE")}} e {{HTTPHeader ("Transfer-Encoding")}} sono usati principalmente per inviare una risposta a blocchi, consentendo di iniziare a trasmettere una risorsa senza conoscerne la lunghezza.

- -

Si noti che l'utilizzo di {{HTTPHeader ("Transfer-Encoding")}} e la compressione a livello di hop è così raro che la maggior parte dei server, come Apache, nginx o IIS, non ha un modo semplice per configurarlo. Tale configurazione di solito avviene a livello di proxy.

diff --git a/files/it/web/http/content_negotiation/index.html b/files/it/web/http/content_negotiation/index.html new file mode 100644 index 0000000000..e2be7de758 --- /dev/null +++ b/files/it/web/http/content_negotiation/index.html @@ -0,0 +1,143 @@ +--- +title: Negoziazione del contenuto +slug: Web/HTTP/negoziazione-del-contenuto +translation_of: Web/HTTP/Content_negotiation +--- +
Nel protocollo HTTP, la negoziazione del contenuto è 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).
+ +
+

Nota: alcuni svantaggi della negoziazione del contenuto HTTP sono spiegati in una pagina wiki del WHATWG. HTML5 fornisce alternative alla negoziazione del contenuto tramite, ad esempio, l'elemento <source>.

+
+ +

Principi di negoziazione dei contenuti

+ +

Uno specifico documento è chiamato risorsa. Quando un client desidera ottenere una risorsa, il client la richiede utilizzando il suo URL. Il server utilizza questo URL per scegliere una delle varianti che fornisce - ogni variante viene chiamata rappresentazione - e restituisce una rappresentazione specifica per il client. La risorsa complessiva, così come ciascuna delle rappresentazioni, ha un URL specifico. Il modo in cui viene scelta una rappresentazione specifica quando la risorsa viene chiamata è determinato dalla negoziazione del contenuto e ci sono diversi modi per negoziare tra il client e il server.

+ +

+ +

La determinazione della rappresentazione più adatta avviene attraverso uno dei seguenti meccanismi:

+ +
    +
  • Intestazioni HTTP specifiche da parte del client (negoziazione guidata dal server o negoziazione proattiva), che è il modo standard di negoziare un tipo specifico di risorsa.
    • +
  • La restituzione dei codici di risposta HTTP {{HTTPStatus("300")}} (Multiple Choices) o {{HTTPStatus("406")}} (Not Acceptable) dal server (negoziazione guidata dall'agente o negoziazione reattiva), utilizzati come meccanismi di riserva.
    • +
+ +

Nel corso degli anni sono state avanzate altre proposte di negoziazione dei contenuti, come la negoziazione trasparente dei contenuti e l'intestazione Alternates, ma non hanno ottenuto la giusta attenzione e sono state quindi abbandonate.

+ +

Negoziazione dei contenuti gestita dal server

+ +

Nella negoziazione del contenuto gestita lato server, o negoziazione proattiva del contenuto, il browser (o qualsiasi altro tipo di user-agent) invia diverse intestazioni HTTP insieme all'URL. Queste intestazioni descrivono la scelta preferita dell'utente. Il server li utilizza come suggerimenti e un algoritmo interno sceglie il contenuto migliore da offrire al client. L'algoritmo è specifico del server e non è definito dallo standard. Vedi, ad esempio, l'algoritmo di negoziazione di Apache.

+ +

+ +

Lo standard HTTP / 1.1 definisce l'elenco delle intestazioni standard che avviano la negoziazione guidata dal server ({{HTTPHeader("Accept")}}, {{HTTPHeader("Accept-Charset")}}, {{HTTPHeader("Accept-Encoding")}}, {{HTTPHeader("Accept-Language")}}). Sebbene in senso stretto {{HTTPHeader ("User-Agent")}} non sia in questo elenco, a volte viene anche utilizzato per inviare una rappresentazione specifica della risorsa richiesta, per quanto questa non sia considerata una buona pratica. Il server utilizza l'intestazione {{HTTPHeader ("Vary")}} per indicare quali intestazioni ha effettivamente utilizzato per la negoziazione del contenuto (o più precisamente le intestazioni di risposta associate), in modo che le cache possano funzionare in modo ottimale.

+ +

Oltre a questi, c'è una proposta sperimentale per aggiungere più intestazioni all'elenco delle intestazioni disponibili, chiamate suggerimenti del client. I suggerimenti del client indicano il tipo di dispositivo su cui viene eseguito l'user agent (ad esempio, se si tratta di un computer desktop o di un dispositivo mobile).

+ +

Anche se la negoziazione del contenuto guidata dal server è il modo più comune per concordare una rappresentazione specifica di una risorsa, presenta diversi svantaggi:

+ +
    +
  • Il server non ha una conoscenza totale del browser. Anche con l'estensione dei suggerimenti del client, non ha una conoscenza completa delle capacità del browser. A differenza della negoziazione del contenuto reattivo in cui il client fa la scelta, la scelta del server è sempre piuttosto arbitraria;
    • +
  • Le informazioni fornite dal client sono piuttosto dettagliate (la compressione dell'intestazione HTTP / 2 mitiga questo problema) e un rischio per la privacy (impronta digitale HTTP);
    • +
  • Poiché vengono inviate diverse rappresentazioni di una determinata risorsa, le cache condivise sono meno efficienti e le implementazioni del server sono più complesse.
    • +
+ +

Intestazione Accept

+ +

L’ intestazione {{HTTPHeader("Accept")}} elenca i tipi di risorse media MIME che l’interprete vuole processare. È una lista di elementi MIME separati da virgole, ognuno combinato con un indice di qualità, ovvero un parametro che indica il relativo grado di preferenza tra diversi tipi MIME.

+ +

L’ intestazione {{HTTPHeader("Accept")}} è definita dal browser, o da qualunque altro interprete, e può variare in base al contesto, come ottenre una pagina HTML, un'immagine, un video o uno script: diverge quando si ottiene un documento inserito nella barra degli indirizzi, o un elemento linkato via {{ HTMLElement("img") }}, {{ HTMLElement("video") }} or {{ HTMLElement("audio") }}. I browser sono liberi di usare il valore dell’intestazione che pensano sia il più adeguato; è disponibile una lista di valori standard per I browers più comuni. is available.

+ +

L’intestazione Accept-CH {{experimental_inline}}

+ +
+

Questa è parte di una tecnologia sperimentale chiamata Client Hints. É supportata da Chrome 46 in poi. Il valore Device-Memoryè presente da Chrome 61 in poi.

+
+ +

L’header sperimentale {{HTTPHeader("Accept-CH")}}elenca dati di configurazione che possono essere usati dal server per elaborare una risposta appropriate. I valori validi sono:

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
ValoreSignificato
Device-MemoryIndica in modo approssimativo la quantità di memoria RAM. Questo valore è un approssimazione ottenuta arrotondando alla potenza di due più vicina e dividendo ciò per 1024. Per esempio, 512 megabytes diventano 0.5.
DPRIndica la risoluzione del dispositivo del client.
Viewport-WidthIndica la larghezza dell’area visibile in pixel CSS.
WidthIndica la reale larghezza di una risorsa (per esempio la larghezza di un’immagine).
+ +

L’intestazione Accept-Charset

+ +

L’ intestazione {{HTTPHeader("Accept-Charset")}} indica al server che tipo di codifica dei caratteri viene accettata dall’interprete. DI solito, è impostata con valori differenti per ogni browser locale, per esempio ISO-8859-1,utf-8;q=0.7,*;q=0.7 for a per l’Europa occidentale.

+ +

Essendo UTF-8 molto diffuso e il metodo più usato per la codifica dei caratteri, e per garantire una maggiore privacy attraverso meno configuration-based entropy , il browser omette Accept-Charset l’intestazione: Internet Explorer 8, Safari 5, Opera 11, Firefox 10 e Chrome 27 hanno abbandonato questa intestazione.

+ +

L’intestazione Accept-CH-Lifetime

+ +
+

Questa è parte di una tecnologia sperimentale chiamata Client Hints. É supportata da Chrome 61 in poi.

+
+ +

L’intestazione {{HTTPHeader("Accept-CH-Lifetime")}} è usata con il valore Device-Memory dell’intestazione Accept-CH e indica il tempo che il dispositivo dovrebbe impiegare per condividere una certa quantità di memoria del dispositivo con il server. Il valore è in millisecondi ed è opzionale.

+ +

L’intestazione Accept-Encoding

+ +

L’intestazione {{HTTPHeader("Accept-Encoding")}} definisce il metodo di compressione utilizzato. Il valore è una lista di fattori q (es.: br, gzip;q=0.8) che indica la priorità del valore di codifica. Il valore di default di identità è quello a proprità più bassa (a meno che non sia specificato diversamente).

+ +

La comprensione dei messaggi http è uno dei modi migliori per migliorare le prestazioni di un sito web, esso diminuisce la dimensione dei dati trasmessi permettendo un uso migliore della larghezza di banda; I browser inviano sempre questa intestazone e il server deve essere configurato per addatarsi a tale intestazione ed usare la compressione.

+ +

L' intestazione Accept-Language

+ +

L'intestazione Accept-Language L'intestazone {{HTTPHeader("Accept-Language")}} indica il linguaggio predefinito dell'utente. E' una lista di valori con fattori di qualità(es.:"de, en;q=0.7"). Un valore di default è spesso deciso a seconda del linguaggio dell'interfaccia grafica dell'interprete, ma la maggior parte dei browser permette di impostare lingue differenti.

+ +

A causa dell'aumento dell'uso dei configuration-based entropy si può usare un valore modificato per identificare l'utente, non è consigliato cambiarlo e un sito web non può fidarsi di questo valore per interpretare la richiesta dell'utente. I Site designers non devono essere troppo scrupolosi nell'usare un interprete attraverso questa intestazione dato che risulterebbe scomodo all'utente:

+ +
    +
  • Devono sempre fornire un modo per ovviare al linguaggio scelto dal server, ad esempio fornendo una scelta di lingue nel sito. La maggiorparte degli interpreti fornisce un valore di default dell'intestazione Accept-Language adottata in base alla lingua dell' utente che spesso non la cambia, perchè non sa come farlo, o perchè non può, come nel caso di un Internet cafè.
    • +
  • Una volta che l'utente ha cambiato la lingua scelta dal server il sito non deve più identificare la lingua e deve usare la lingua esplicitamente scelta. In altre parole, solo la pagina iniziale del sito deve identificare la lingua adatta usando questa intestazione.
    • +
+ +

L'intestazione User-Agent 

+ +
+

Anche se esistono usi appropriati di questa intastazione per selezionare contenuto, è considerata una cattiva abitudine affidarsi ad esso per definire quali funzioni sono supportate dall' interprete.

+
+ +

L'intestazione {{HTTPHeader("User-Agent")}} identifica il browser che invia la richiesta. Questa stringa può contenere una lista di product token e commenti separati da spazi.

+ +

Un product token è un nome seguito da '/' e un numero di versione, come Firefox/4.0.1. Ci possono essere tanti product token quanti ne vuole l'interprete. Un comment è una stringa qualsiasi delimitata da parentesi. Ovviamente le parentesi non possono essere usate nella stringa. Il formato del commento non è definito da nessuno standard, ma molti browser ci inseriscono molti token, separati da ';'.

+ +

L'intestazione di risposta Vary 

+ +

In contrasto alle precedenti intestazioni Accept-* che sono inviate dal client, l'intestazione  {{HTTPHeader("Vary")}} è inviata dal web server come risposta. Indica la lista delle intestazioni usate dal server durante la fase di negoziazione gestita dal server. L'intestazione è necessaria per informare la cache dei criteri decisionali in modo da replicarli, permettendo alla cache di essere funzionale e prevenendo l'invio di servizi errati all'utente.

+ +

Il valore '*' esprime che la fase di negoziazione gestita dal server usa anche informazioni non trasmesse in un'intestazione per scegliere il contenuto appropriato.

+ +

L'intestazione Vary è stata aggiunta nella versione HTTP 1.1 ed è necessaria per permettere alle cache di funzionare in modo adeguato. Una cache, per funzionare con la fase di negoziazione gestita dal server necessita di sapere i criteri usati dal server per scegliere il contenuto trasmesso. In questo modo lòa cache può replicare l'argoritmo in modo da fornire contenuti adeguati senza altre richieste al server. Ovviamente il carattere '*' previene la memorizzazione, dato che la cache non conosce che algoritmi ci stanno dietro.

+ +

Negoziazione Agent-driven

+ +

La negoziazione Server-driven presenta alcuni svantaggi: non è molto scalabile. C'è un'intestazione per ogni funzione/caratteristica usate nella negoziazione. Se vuoi usare risoluzione dello schermo deve essere creata una nuova intestazione HTTP. L'invio delle intestazioni deve essere fatto ad ogni richiest. Questo portebrebbe ad una diminuzione delle performance in caso di molte intestazioni. Più intestazioni specifiche vengono inviate, più il complesso risulta ambiguo, portando a problemi di privacy.

+ +

Sin dagli albori di HTTP, il protocollo permette un altro tipo di negoziazione: agent-driven negotiation o reactive negotiation. In questa negoziazione, quando si presenta una richiesta ambigua, il server risponde con una pagina contenente dei link alle risorse alternative disponibili. All'utente vengono presentate le risorse e sceglie quale usare.

+ +

+ +

Sfortunatamente lo standard HTTP non specifica il formato della pagina, permettendo di scegliere tra le risorse disponobili non permettendo una facile automatizzazione del processo. Inoltre si ricade nella negoziazione server-driven, questo metodo è quasi sempre usato insieme allo scripting, specialmente utilizzando JavaScript per i redirect: dopo aver controllato i criteri di memorizzazione, il codice esegue il redirect. Un secondo problema è che è necessaria una richiesta per ottenere la risorsa, compromettendo la disponibilità della risorsa all'utente.

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..0c4a3c17e2 --- /dev/null +++ b/files/it/web/http/headers/user-agent/firefox/index.html @@ -0,0 +1,40 @@ +--- +title: Gli User Agent di Gecko +slug: Gli_User_Agent_di_Gecko +translation_of: Web/HTTP/Headers/User-Agent/Firefox +--- +

Lista degli user agent rilasciati da Netscape e AOL basati su Gecko™.

+ +

Uso appropriato

+ +

Mozilla consiglia di non utilizzare le stringhe User Agent come mezzo primario di identificazione del browser. Si veda Identificazione del browser e supporto cross browser per uno sguardo in profondità ai vari approcci per la rilevazione del browser.

+ +

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.

+ +

Per l'identificazione di un browser che utilizza Gecko, è possibile utilizzare l'oggetto navigator.

+ +

Gli User Agent di Gecko

+ +

Si veda mozilla.org's user-agent strings reference per i valori specifici delle vociPlatform ,Security ,OS-or-CPU eLocalization .

+ +
    +
  • Mozilla/5.0 (Platform; Security; OS-or-CPU; Localization; rv:1.4) Gecko/20030624 Netscape/7.1 (ax)
    • +
  • Mozilla/5.0 (Platform; Security; OS-or-CPU; Localization; rv:1.0.2) Gecko/20030208 Netscape/7.02
    • +
  • Mozilla/5.0 (Platform; Security; OS-or-CPU; Localization; rv:1.0.2) Gecko/20021120 Netscape/7.01
    • +
  • Mozilla/5.0 (Platform; Security; OS-or-CPU; Localization; rv:1.0.1) Gecko/20020823 Netscape/7.0
    • +
  • Mozilla/5.0 (Macintosh; U; PPC Mac OS X; en-US; rv:1.0.1) Gecko/20020730 AOL/7.0
    • +
  • Mozilla/5.0 (Platform; Security; OS-or-CPU; Localization; rv:1.0rc2) Gecko/20020512 Netscape/7.0b1
    • +
  • Mozilla/5.0 (Platform; Security; OS-or-CPU; Localization; rv:0.9.4.2) Gecko/20020220 CS 2000 7.0/7.0 +
      +
    • Mozilla/5.0 (Windows; U; Win98; en-US; rv:0.9.4.2) Gecko/20020502 CS 2000 7.0/7.0
      • +
    +
    • +
  • Mozilla/5.0 (Platform; Security; OS-or-CPU; Localization; rv:0.9.4.1) Gecko/20020508 Netscape6/6.2.3
    • +
  • Mozilla/5.0 (Platform; Security; OS-or-CPU; Localization; rv:0.9.4.1) Gecko/20020314 Netscape6/6.2.2
    • +
  • Mozilla/5.0 (Platform; Security; OS-or-CPU; Localization; rv:0.9.4) Gecko/20011128 Netscape6/6.2.1
    • +
  • Mozilla/5.0 (Platform; Security; OS-or-CPU; Localization; rv:0.9.2) Gecko/20010726 Netscape6/6.1
    • +
+ +

Per ulteriori dettagli sulle versioni di Netscape e Mozilla, si veda mozilla.org cvstags reference.

+ +

{{ languages( { "ja": "ja/Gecko_User_Agent_Strings", "en": "en/Gecko_User_Agent_Strings", "fr": "fr/Les_cha\u00eenes_UserAgent_de_Gecko" } ) }}

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..41a0e183c1 --- /dev/null +++ b/files/it/web/http/link_prefetching_faq/index.html @@ -0,0 +1,126 @@ +--- +title: Link prefetching FAQ +slug: Link_prefetching_FAQ +tags: + - Gecko + - HTML + - HTTP + - Sviluppo_Web + - Tutte_le_categorie +translation_of: Web/HTTP/Link_prefetching_FAQ +--- + + +

Il link prefetching è un meccanismo del browser, che utilizza il tempo di inattività per il download o effettuare ilprefetch 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.

+ +

Cosa sono i prefetching consigliati (prefetching hints)?

+ +

Il browser cerca o un tag HTML link o una intestazione HTTP Link: con una relazione tipo next o prefetch. Ecco un esempio usando il tag link:

+ +
<link rel="prefetch" href="/images/big.jpeg">
+
+ +

Lo stesso suggerimento di prefetch usando una intestazione Link::

+ +
Link: </images/big.jpeg>; rel=prefetch
+
+ +

L'intestazione Link: può anche essere specificata all'interno del documento HTML usando un tag meta:

+ +
<meta http-equiv="Link" content="&lt;/images/big.jpeg&gt;; rel=prefetch">
+
+ +

Il formato dell'intestazione Link: viene descritta nella RFC 2068, sezione 19.6.2.4.

+ +
Nota: internamente facciamo riferimento ad una vecchia specifica di HTTP/1.1 dato che la nuova RFC 2616 non descrive l'intestazione Link:. Nonostante le intestazioni Link: non siano parte dello standard revisionato, vengono pratiacmente ancora usate dai server per specificare fogli di stile CSS, per questi ne facciamo qui uso.
+ +

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.

+ +

Seguono alcuni esempi:

+ +
<link rel="prefetch alternate stylesheet" title="Designed for Mozilla" href="mozspecific.css">
+<link rel="next" href="2.html">
+
+ +

Viene eseguito il prefetch sui tag ancora (<a>)?

+ +

No, solo i tag <link> con un tipo relazione next o prefetch vengono precaricati. Comunque, in caso di interesse sufficiente, potremmo pensare di estendere il supporto prefetching ai tag <a> che includono un tipo relazione next o prefetch. Fare questo potrebbe aiutare i fornitori di contenuti ad evitare il problema di aggiornare i link precaricati.

+ +

Il prefetching è attinente agli standard?

+ +

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 (vedere la Sezione 6.12: Link types). Comunque, l'esatto meccanismo usato da Mozilla non è ancora parte dello standard. Un draft è in preparazione.

+ +

Come viene determinato il periodo di inattività (idle) del browser?

+ +

Nell'implementazione corrente (Mozilla 1.2), il tempo di inattività si determina usando l'API nsIWebProgressListener. Si collega un listener all'oggetto nsIWebProgress ("@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.

+ + + +

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.

+ + + +

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.

+ +

Ci sono restrizioni su cosa viene eseguito il prefetching?

+ +

Si, solo gli URL http:// possono essere precaricati (URL https:// 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 conquery strings (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 rel=prefetch, dato che non dovrebbe apparire in nessun contenuto esistente.) Non ci sono altre restrizioni sugli URL precaricati.

+ +

Mozilla effettua il prefetch di documenti da host differenti?

+ +

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.

+ +

Le richieste da prefetching contengono una intestazione Refer: ?

+ +

Sì, le richieste da prefetch includono una intestazione HTTP Referer: indicante il documento dal quale il suggerimento di prefetch è stato estratto.

+ +

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 Cache-control: must-revalidate. Questa intestazione abilita la memorizzazione in cache, ma ha necessita di una richiesta di validazione If-Modified-Since o If-None-Match prima di servire il documento dalla cache stessa.

+ +

Come amministratore di server, posso distinguere tra richieste di prefetch e richieste normali?

+ +

Si, mandiamo la seguente intestazione insieme con la richiesta di prefetch:

+ +
X-moz: prefetch
+ +

Ovviamente, questa intestazione di richiesta non è del tutto standard, e potrebbe cambiare in future release di Mozilla.

+ +

C'è una opzione per disabilitare il prefetching di link?

+ +

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.

+ +
user_pref("network.prefetch-next",false);
+ +

Stiamo considerando di aggiungere una Interfaccia Utente per questa preferenza (vedere {{ Bug(166648) }}); 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 ;-)

+ +
Aggiornamento: causa la moltitudine di richieste, Mozilla 1.3+ include una opzione di preferenza nell'interfaccia utente per disabilitare il prefetching. Vedere Preferences->Advanced-> +
user_pref("network.prefetch-next",false);
+
+ +

Riguardo alle persone che pagano per avere banda?

+ +

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.

+ + + +

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.

+ +

Effettua un test con il tuo browser per vedere se supporta il Link Prefetching.

+ +

Cos'altro riguardo...?

+ +

Per qualasiasi altra domanda o commento riguardo al link prefetching, mandatele pure a me :-)

+ +

Vedere inoltre...

+ +

Prefetching Hints

+ +
+

Original Document Information

+ +
    +
  • Author(s): Darin Fisher (darin at meer dot net)
    • +
  • Last Updated Date: Updated: March 3, 2003
    • +
+
+ +

{{ languages( { "en": "en/Link_prefetching_FAQ" } ) }}

diff --git a/files/it/web/http/negoziazione-del-contenuto/index.html b/files/it/web/http/negoziazione-del-contenuto/index.html deleted file mode 100644 index e2be7de758..0000000000 --- a/files/it/web/http/negoziazione-del-contenuto/index.html +++ /dev/null @@ -1,143 +0,0 @@ ---- -title: Negoziazione del contenuto -slug: Web/HTTP/negoziazione-del-contenuto -translation_of: Web/HTTP/Content_negotiation ---- -
Nel protocollo HTTP, la negoziazione del contenuto è 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).
- -
-

Nota: alcuni svantaggi della negoziazione del contenuto HTTP sono spiegati in una pagina wiki del WHATWG. HTML5 fornisce alternative alla negoziazione del contenuto tramite, ad esempio, l'elemento <source>.

-
- -

Principi di negoziazione dei contenuti

- -

Uno specifico documento è chiamato risorsa. Quando un client desidera ottenere una risorsa, il client la richiede utilizzando il suo URL. Il server utilizza questo URL per scegliere una delle varianti che fornisce - ogni variante viene chiamata rappresentazione - e restituisce una rappresentazione specifica per il client. La risorsa complessiva, così come ciascuna delle rappresentazioni, ha un URL specifico. Il modo in cui viene scelta una rappresentazione specifica quando la risorsa viene chiamata è determinato dalla negoziazione del contenuto e ci sono diversi modi per negoziare tra il client e il server.

- -

- -

La determinazione della rappresentazione più adatta avviene attraverso uno dei seguenti meccanismi:

- -
    -
  • Intestazioni HTTP specifiche da parte del client (negoziazione guidata dal server o negoziazione proattiva), che è il modo standard di negoziare un tipo specifico di risorsa.
    • -
  • La restituzione dei codici di risposta HTTP {{HTTPStatus("300")}} (Multiple Choices) o {{HTTPStatus("406")}} (Not Acceptable) dal server (negoziazione guidata dall'agente o negoziazione reattiva), utilizzati come meccanismi di riserva.
    • -
- -

Nel corso degli anni sono state avanzate altre proposte di negoziazione dei contenuti, come la negoziazione trasparente dei contenuti e l'intestazione Alternates, ma non hanno ottenuto la giusta attenzione e sono state quindi abbandonate.

- -

Negoziazione dei contenuti gestita dal server

- -

Nella negoziazione del contenuto gestita lato server, o negoziazione proattiva del contenuto, il browser (o qualsiasi altro tipo di user-agent) invia diverse intestazioni HTTP insieme all'URL. Queste intestazioni descrivono la scelta preferita dell'utente. Il server li utilizza come suggerimenti e un algoritmo interno sceglie il contenuto migliore da offrire al client. L'algoritmo è specifico del server e non è definito dallo standard. Vedi, ad esempio, l'algoritmo di negoziazione di Apache.

- -

- -

Lo standard HTTP / 1.1 definisce l'elenco delle intestazioni standard che avviano la negoziazione guidata dal server ({{HTTPHeader("Accept")}}, {{HTTPHeader("Accept-Charset")}}, {{HTTPHeader("Accept-Encoding")}}, {{HTTPHeader("Accept-Language")}}). Sebbene in senso stretto {{HTTPHeader ("User-Agent")}} non sia in questo elenco, a volte viene anche utilizzato per inviare una rappresentazione specifica della risorsa richiesta, per quanto questa non sia considerata una buona pratica. Il server utilizza l'intestazione {{HTTPHeader ("Vary")}} per indicare quali intestazioni ha effettivamente utilizzato per la negoziazione del contenuto (o più precisamente le intestazioni di risposta associate), in modo che le cache possano funzionare in modo ottimale.

- -

Oltre a questi, c'è una proposta sperimentale per aggiungere più intestazioni all'elenco delle intestazioni disponibili, chiamate suggerimenti del client. I suggerimenti del client indicano il tipo di dispositivo su cui viene eseguito l'user agent (ad esempio, se si tratta di un computer desktop o di un dispositivo mobile).

- -

Anche se la negoziazione del contenuto guidata dal server è il modo più comune per concordare una rappresentazione specifica di una risorsa, presenta diversi svantaggi:

- -
    -
  • Il server non ha una conoscenza totale del browser. Anche con l'estensione dei suggerimenti del client, non ha una conoscenza completa delle capacità del browser. A differenza della negoziazione del contenuto reattivo in cui il client fa la scelta, la scelta del server è sempre piuttosto arbitraria;
    • -
  • Le informazioni fornite dal client sono piuttosto dettagliate (la compressione dell'intestazione HTTP / 2 mitiga questo problema) e un rischio per la privacy (impronta digitale HTTP);
    • -
  • Poiché vengono inviate diverse rappresentazioni di una determinata risorsa, le cache condivise sono meno efficienti e le implementazioni del server sono più complesse.
    • -
- -

Intestazione Accept

- -

L’ intestazione {{HTTPHeader("Accept")}} elenca i tipi di risorse media MIME che l’interprete vuole processare. È una lista di elementi MIME separati da virgole, ognuno combinato con un indice di qualità, ovvero un parametro che indica il relativo grado di preferenza tra diversi tipi MIME.

- -

L’ intestazione {{HTTPHeader("Accept")}} è definita dal browser, o da qualunque altro interprete, e può variare in base al contesto, come ottenre una pagina HTML, un'immagine, un video o uno script: diverge quando si ottiene un documento inserito nella barra degli indirizzi, o un elemento linkato via {{ HTMLElement("img") }}, {{ HTMLElement("video") }} or {{ HTMLElement("audio") }}. I browser sono liberi di usare il valore dell’intestazione che pensano sia il più adeguato; è disponibile una lista di valori standard per I browers più comuni. is available.

- -

L’intestazione Accept-CH {{experimental_inline}}

- -
-

Questa è parte di una tecnologia sperimentale chiamata Client Hints. É supportata da Chrome 46 in poi. Il valore Device-Memoryè presente da Chrome 61 in poi.

-
- -

L’header sperimentale {{HTTPHeader("Accept-CH")}}elenca dati di configurazione che possono essere usati dal server per elaborare una risposta appropriate. I valori validi sono:

- - - - - - - - - - - - - - - - - - - - - - - - - - -
ValoreSignificato
Device-MemoryIndica in modo approssimativo la quantità di memoria RAM. Questo valore è un approssimazione ottenuta arrotondando alla potenza di due più vicina e dividendo ciò per 1024. Per esempio, 512 megabytes diventano 0.5.
DPRIndica la risoluzione del dispositivo del client.
Viewport-WidthIndica la larghezza dell’area visibile in pixel CSS.
WidthIndica la reale larghezza di una risorsa (per esempio la larghezza di un’immagine).
- -

L’intestazione Accept-Charset

- -

L’ intestazione {{HTTPHeader("Accept-Charset")}} indica al server che tipo di codifica dei caratteri viene accettata dall’interprete. DI solito, è impostata con valori differenti per ogni browser locale, per esempio ISO-8859-1,utf-8;q=0.7,*;q=0.7 for a per l’Europa occidentale.

- -

Essendo UTF-8 molto diffuso e il metodo più usato per la codifica dei caratteri, e per garantire una maggiore privacy attraverso meno configuration-based entropy , il browser omette Accept-Charset l’intestazione: Internet Explorer 8, Safari 5, Opera 11, Firefox 10 e Chrome 27 hanno abbandonato questa intestazione.

- -

L’intestazione Accept-CH-Lifetime

- -
-

Questa è parte di una tecnologia sperimentale chiamata Client Hints. É supportata da Chrome 61 in poi.

-
- -

L’intestazione {{HTTPHeader("Accept-CH-Lifetime")}} è usata con il valore Device-Memory dell’intestazione Accept-CH e indica il tempo che il dispositivo dovrebbe impiegare per condividere una certa quantità di memoria del dispositivo con il server. Il valore è in millisecondi ed è opzionale.

- -

L’intestazione Accept-Encoding

- -

L’intestazione {{HTTPHeader("Accept-Encoding")}} definisce il metodo di compressione utilizzato. Il valore è una lista di fattori q (es.: br, gzip;q=0.8) che indica la priorità del valore di codifica. Il valore di default di identità è quello a proprità più bassa (a meno che non sia specificato diversamente).

- -

La comprensione dei messaggi http è uno dei modi migliori per migliorare le prestazioni di un sito web, esso diminuisce la dimensione dei dati trasmessi permettendo un uso migliore della larghezza di banda; I browser inviano sempre questa intestazone e il server deve essere configurato per addatarsi a tale intestazione ed usare la compressione.

- -

L' intestazione Accept-Language

- -

L'intestazione Accept-Language L'intestazone {{HTTPHeader("Accept-Language")}} indica il linguaggio predefinito dell'utente. E' una lista di valori con fattori di qualità(es.:"de, en;q=0.7"). Un valore di default è spesso deciso a seconda del linguaggio dell'interfaccia grafica dell'interprete, ma la maggior parte dei browser permette di impostare lingue differenti.

- -

A causa dell'aumento dell'uso dei configuration-based entropy si può usare un valore modificato per identificare l'utente, non è consigliato cambiarlo e un sito web non può fidarsi di questo valore per interpretare la richiesta dell'utente. I Site designers non devono essere troppo scrupolosi nell'usare un interprete attraverso questa intestazione dato che risulterebbe scomodo all'utente:

- -
    -
  • Devono sempre fornire un modo per ovviare al linguaggio scelto dal server, ad esempio fornendo una scelta di lingue nel sito. La maggiorparte degli interpreti fornisce un valore di default dell'intestazione Accept-Language adottata in base alla lingua dell' utente che spesso non la cambia, perchè non sa come farlo, o perchè non può, come nel caso di un Internet cafè.
    • -
  • Una volta che l'utente ha cambiato la lingua scelta dal server il sito non deve più identificare la lingua e deve usare la lingua esplicitamente scelta. In altre parole, solo la pagina iniziale del sito deve identificare la lingua adatta usando questa intestazione.
    • -
- -

L'intestazione User-Agent 

- -
-

Anche se esistono usi appropriati di questa intastazione per selezionare contenuto, è considerata una cattiva abitudine affidarsi ad esso per definire quali funzioni sono supportate dall' interprete.

-
- -

L'intestazione {{HTTPHeader("User-Agent")}} identifica il browser che invia la richiesta. Questa stringa può contenere una lista di product token e commenti separati da spazi.

- -

Un product token è un nome seguito da '/' e un numero di versione, come Firefox/4.0.1. Ci possono essere tanti product token quanti ne vuole l'interprete. Un comment è una stringa qualsiasi delimitata da parentesi. Ovviamente le parentesi non possono essere usate nella stringa. Il formato del commento non è definito da nessuno standard, ma molti browser ci inseriscono molti token, separati da ';'.

- -

L'intestazione di risposta Vary 

- -

In contrasto alle precedenti intestazioni Accept-* che sono inviate dal client, l'intestazione  {{HTTPHeader("Vary")}} è inviata dal web server come risposta. Indica la lista delle intestazioni usate dal server durante la fase di negoziazione gestita dal server. L'intestazione è necessaria per informare la cache dei criteri decisionali in modo da replicarli, permettendo alla cache di essere funzionale e prevenendo l'invio di servizi errati all'utente.

- -

Il valore '*' esprime che la fase di negoziazione gestita dal server usa anche informazioni non trasmesse in un'intestazione per scegliere il contenuto appropriato.

- -

L'intestazione Vary è stata aggiunta nella versione HTTP 1.1 ed è necessaria per permettere alle cache di funzionare in modo adeguato. Una cache, per funzionare con la fase di negoziazione gestita dal server necessita di sapere i criteri usati dal server per scegliere il contenuto trasmesso. In questo modo lòa cache può replicare l'argoritmo in modo da fornire contenuti adeguati senza altre richieste al server. Ovviamente il carattere '*' previene la memorizzazione, dato che la cache non conosce che algoritmi ci stanno dietro.

- -

Negoziazione Agent-driven

- -

La negoziazione Server-driven presenta alcuni svantaggi: non è molto scalabile. C'è un'intestazione per ogni funzione/caratteristica usate nella negoziazione. Se vuoi usare risoluzione dello schermo deve essere creata una nuova intestazione HTTP. L'invio delle intestazioni deve essere fatto ad ogni richiest. Questo portebrebbe ad una diminuzione delle performance in caso di molte intestazioni. Più intestazioni specifiche vengono inviate, più il complesso risulta ambiguo, portando a problemi di privacy.

- -

Sin dagli albori di HTTP, il protocollo permette un altro tipo di negoziazione: agent-driven negotiation o reactive negotiation. In questa negoziazione, quando si presenta una richiesta ambigua, il server risponde con una pagina contenente dei link alle risorse alternative disponibili. All'utente vengono presentate le risorse e sceglie quale usare.

- -

- -

Sfortunatamente lo standard HTTP non specifica il formato della pagina, permettendo di scegliere tra le risorse disponobili non permettendo una facile automatizzazione del processo. Inoltre si ricade nella negoziazione server-driven, questo metodo è quasi sempre usato insieme allo scripting, specialmente utilizzando JavaScript per i redirect: dopo aver controllato i criteri di memorizzazione, il codice esegue il redirect. Un secondo problema è che è necessaria una richiesta per ottenere la risorsa, compromettendo la disponibilità della risorsa all'utente.

diff --git a/files/it/web/http/overview/index.html b/files/it/web/http/overview/index.html new file mode 100644 index 0000000000..f2cf4c990c --- /dev/null +++ b/files/it/web/http/overview/index.html @@ -0,0 +1,176 @@ +--- +title: Una panoramica su HTTP +slug: Web/HTTP/Panoramica +tags: + - HTTP + - Protocolli +translation_of: Web/HTTP/Overview +--- +
{{HTTPSidebar}}
+ +

HTTP è un {{Glossary("protocollo")}} che permette il recupero di risorse, come le pagine HTML. È il fondamento di ogni scambio di dati sul Web ed è un protocollo client-server,il che significa che le richieste vengono avviate dal destinatario, solitamente il browser Web. Un documento completo viene ricostruito dai diversi sotto-documenti recuperati, ad esempio testo, descrizione del layout, immagini, video, script e altro.

+ +

A Web document is the composition of different resources

+ +

Client e server comunicano scambiando messaggi individuali (al contrario di un flusso di dati). I messaggi inviati dal client, solitamente un browser Web, sono chiamati richieste (requests) e i messaggi inviati dal server come risposta sono chiamati risposte (responses).

+ +

HTTP as an application layer protocol, on top of TCP (transport layer) and IP (network layer) and below the presentation layer.Progettato all'inizio degli anni '90 (1990), HTTP è un protocollo estensibile che si è evoluto nel tempo. È un protocollo a livello di applicazione che viene inviato mediante {{Glossary("TCP")}}, o mediante una connessione TCP cifrata {{Glossary("TLS")}}, anche se teoricamente potrebbe essere utilizzato qualsiasi protocollo di trasporto affidabile. Grazie alla sua estensibilità, viene utilizzato non solo per recuperare documenti ipertestuali, ma anche immagini e video o per pubblicare contenuti su server, come con i risultati dei moduli HTML. HTTP può essere utilizzato anche per recuperare parti di documenti per aggiornare pagine Web su richiesta.

+ +

Componenti di sistemi basati su HTTP

+ +

HTTP è un protocollo client-server: le richieste vengono inviate da un'entità, lo user-agent (o un proxy per conto di esso). Il più delle volte lo user-agent è un browser Web, ma può essere qualsiasi cosa, ad esempio un robot che esegue la scansione del Web per popolare e mantenere un indice del motore di ricerca.

+ +

Ogni singola richiesta viene inviata a un server, che la gestisce e fornisce una risposta, chiamata response. Tra il client e il server ci sono numerose entità, chiamate collettivamente {{Glossary("Proxy_server", "proxies")}}, che eseguono operazioni diverse e fungono da gateway o {{Glossary("Cache", "caches")}}, per esempio.

+ +

Client server chain

+ +

In realtà, ci sono più computer tra un browser e il server che gestisce la richiesta: ci sono router, modem e altro. Grazie alla struttura a strati del Web, questi sono nascosti nella rete e nei livelli di trasporto. L'HTTP è in cima, a livello applicazione. Sebbene importanti per diagnosticare i problemi di rete, i livelli sottostanti sono per lo più irrilevanti per la descrizione di HTTP.

+ +

Client: lo user-agent

+ +

Lo user-agent è qualsiasi strumento che agisce per conto dell'utente. Questo ruolo viene svolto principalmente dal browser Web; altre possibilità sono i programmi utilizzati da ingegneri e sviluppatori Web per eseguire il debug delle loro applicazioni.

+ +

Il browser è sempre l'entità che avvia la richiesta. Non è mai il server (sebbene nel corso degli anni siano stati aggiunti alcuni meccanismi per simulare i messaggi avviati dal server).

+ +

Per presentare una pagina Web, il browser invia una richiesta iniziale per recuperare il documento HTML che rappresenta la pagina. Quindi analizza questo file, effettuando richieste aggiuntive corrispondenti a script di esecuzione, informazioni sul layout (CSS) da visualizzare e sotto-risorse contenute all'interno della pagina (solitamente immagini e video). Il browser Web quindi compone queste risorse per presentare all'utente un documento completo, la pagina Web. Gli script eseguiti dal browser possono recuperare più risorse nelle fasi successive e il browser aggiorna la pagina Web di conseguenza.

+ +

Una pagina Web è un documento ipertestuale. Ciò significa che alcune parti del testo visualizzato sono collegamenti che possono essere attivati (di solito con un clic del mouse) per recuperare una nuova pagina Web, consentendo all'utente di dirigere il proprio user-agent e navigare nel Web. Il browser traduce queste indicazioni in richieste HTTP e interpreta ulteriormente le risposte HTTP per presentare all'utente una risposta chiara.

+ +

Il Web server

+ +

Sul lato opposto del canale di comunicazione, è il server, che serve (restituisce) il documento come richiesto dal client. Un server appare virtualmente come un'unica macchina: questo perché potrebbe essere un insieme di server, i quali condividono il carico (bilanciamento del carico) o un complesso software che interroga altri computer (come una cache, un DB server o un e-commerce server), generando totalmente o parzialmente il documento su richiesta.

+ +

Un server non è necessariamente una singola macchina, ma più istanze di software server possono essere ospitate sulla stessa macchina. Con HTTP / 1.1 e l'intestazione {{HTTPHeader ("Host")}}, possono persino condividere lo stesso indirizzo IP. HERE!!!

+ +

Proxies

+ +

Between the Web browser and the server, numerous computers and machines relay the HTTP messages. Due to the layered structure of the Web stack, most of these operate at the transport, network or physical levels, becoming transparent at the HTTP layer and potentially making a significant impact on performance. Those operating at the application layers are generally called proxies. These can be transparent, forwarding on the requests they receive without altering them in any way, or non-transparent, in which case they will change the request in some way before passing it along to the server. Proxies may perform numerous functions:

+ +
    +
  • caching (the cache can be public or private, like the browser cache)
    • +
  • filtering (like an antivirus scan or parental controls)
    • +
  • load balancing (to allow multiple servers to serve the different requests)
    • +
  • authentication (to control access to different resources)
    • +
  • logging (allowing the storage of historical information)
    • +
+ +

Basic aspects of HTTP

+ +

HTTP is simple

+ +

HTTP is generally designed to be simple and human readable, even with the added complexity introduced in HTTP/2 by encapsulating HTTP messages into frames. HTTP messages can be read and understood by humans, providing easier testing for developers, and reduced complexity for newcomers.

+ +

HTTP is extensible

+ +

Introduced in HTTP/1.0, HTTP headers make this protocol easy to extend and experiment with. New functionality can even be introduced by a simple agreement between a client and a server about a new header's semantics.

+ +

HTTP is stateless, but not sessionless

+ +

HTTP is stateless: there is no link between two requests being successively carried out on the same connection. This immediately has the prospect of being problematic for users attempting to interact with certain pages coherently, for example, using e-commerce shopping baskets. But while the core of HTTP itself is stateless, HTTP cookies allow the use of stateful sessions. Using header extensibility, HTTP Cookies are added to the workflow, allowing session creation on each HTTP request to share the same context, or the same state.

+ +

HTTP and connections

+ +

A connection is controlled at the transport layer, and therefore fundamentally out of scope for HTTP. Though HTTP doesn't require the underlying transport protocol to be connection-based; only requiring it to be reliable, or not lose messages (so at minimum presenting an error). Among the two most common transport protocols on the Internet, TCP is reliable and UDP isn't. HTTP therefore relies on the TCP standard, which is connection-based.

+ +

Before a client and server can exchange an HTTP request/response pair, they must establish a TCP connection, a process which requires several round-trips. The default behavior of HTTP/1.0 is to open a separate TCP connection for each HTTP request/response pair. This is less efficient than sharing a single TCP connection when multiple requests are sent in close succession.

+ +

In order to mitigate this flaw, HTTP/1.1 introduced pipelining (which proved difficult to implement) and persistent connections: the underlying TCP connection can be partially controlled using the {{HTTPHeader("Connection")}} header. HTTP/2 went a step further by multiplexing messages over a single connection, helping keep the connection warm and more efficient.

+ +

Experiments are in progress to design a better transport protocol more suited to HTTP. For example, Google is experimenting with QUIC which builds on UDP to provide a more reliable and efficient transport protocol.

+ +

What can be controlled by HTTP

+ +

This extensible nature of HTTP has, over time, allowed for more control and functionality of the Web. Cache or authentication methods were functions handled early in HTTP history. The ability to relax the origin constraint, by contrast, has only been added in the 2010s.

+ +

Here is a list of common features controllable with HTTP.

+ +
    +
  • Caching
    + How documents are cached can be controlled by HTTP. The server can instruct proxies and clients, about what to cache and for how long. The client can instruct intermediate cache proxies to ignore the stored document.
    • +
  • Relaxing the origin constraint
    + To prevent snooping and other privacy invasions, Web browsers enforce strict separation between Web sites. Only pages from the same origin can access all the information of a Web page. Though such constraint is a burden to the server, HTTP headers can relax this strict separation on the server side, allowing a document to become a patchwork of information sourced from different domains; there could even be security-related reasons to do so.
    • +
  • Authentication
    + Some pages may be protected so that only specific users can access them. Basic authentication may be provided by HTTP, either using the {{HTTPHeader("WWW-Authenticate")}} and similar headers, or by setting a specific session using HTTP cookies.
    • +
  • Proxy and tunneling
    + Servers or clients are often located on intranets and hide their true IP address from other computers. HTTP requests then go through proxies to cross this network barrier. Not all proxies are HTTP proxies. The SOCKS protocol, for example, operates at a lower level. Other protocols, like ftp, can be handled by these proxies.
    • +
  • Sessions
    + Using HTTP cookies allows you to link requests with the state of the server. This creates sessions, despite basic HTTP being a state-less protocol. This is useful not only for e-commerce shopping baskets, but also for any site allowing user configuration of the output.
    • +
+ +

HTTP flow

+ +

When a client wants to communicate with a server, either the final server or an intermediate proxy, it performs the following steps:

+ +
    +
  1. Open a TCP connection: The TCP connection is used to send a request, or several, and receive an answer. The client may open a new connection, reuse an existing connection, or open several TCP connections to the servers.
    2. +
  2. Send an HTTP message: HTTP messages (before HTTP/2) are human-readable. With HTTP/2, these simple messages are encapsulated in frames, making them impossible to read directly, but the principle remains the same. For example: + 
    GET / HTTP/1.1
+Host: developer.mozilla.org
+Accept-Language: fr
    +
    3. +
  3. Read the response sent by the server, such as: + 
    HTTP/1.1 200 OK
+Date: Sat, 09 Oct 2010 14:28:02 GMT
+Server: Apache
+Last-Modified: Tue, 01 Dec 2009 20:18:22 GMT
+ETag: "51142bc1-7449-479b075b2891b"
+Accept-Ranges: bytes
+Content-Length: 29769
+Content-Type: text/html
+
+<!DOCTYPE html... (here comes the 29769 bytes of the requested web page)
    +
    4. +
  4. Close or reuse the connection for further requests.
    5. +
+ +

If HTTP pipelining is activated, several requests can be sent without waiting for the first response to be fully received. HTTP pipelining has proven difficult to implement in existing networks, where old pieces of software coexist with modern versions. HTTP pipelining has been superseded in HTTP/2 with more robust multiplexing requests within a frame.

+ +

HTTP Messages

+ +

HTTP messages, as defined in HTTP/1.1 and earlier, are human-readable. In HTTP/2, these messages are embedded into a binary structure, a frame, allowing optimizations like compression of headers and multiplexing. Even if only part of the original HTTP message is sent in this version of HTTP, the semantics of each message is unchanged and the client reconstitutes (virtually) the original HTTP/1.1 request. It is therefore useful to comprehend HTTP/2 messages in the HTTP/1.1 format.

+ +

There are two types of HTTP messages, requests and responses, each with its own format.

+ +

Requests

+ +

An example HTTP request:

+ +

A basic HTTP request

+ +

Requests consists of the following elements:

+ +
    +
  • An HTTP method, usually a verb like {{HTTPMethod("GET")}}, {{HTTPMethod("POST")}} or a noun like {{HTTPMethod("OPTIONS")}} or {{HTTPMethod("HEAD")}} that defines the operation the client wants to perform. Typically, a client wants to fetch a resource (using GET) or post the value of an HTML form (using POST), though more operations may be needed in other cases.
    • +
  • The path of the resource to fetch; the URL of the resource stripped from elements that are obvious from the context, for example without the {{Glossary("protocol")}} (http://), the {{Glossary("domain")}} (here, developer.mozilla.org), or the TCP {{Glossary("port")}} (here, 80).
    • +
  • The version of the HTTP protocol.
    • +
  • Optional headers that convey additional information for the servers.
    • +
  • Or a body, for some methods like POST, similar to those in responses, which contain the resource sent.
    • +
+ +

Responses

+ +

An example response:

+ +

+ +

Responses consist of the following elements:

+ +
    +
  • The version of the HTTP protocol they follow.
    • +
  • A status code, indicating if the request was successful, or not, and why.
    • +
  • A status message, a non-authoritative short description of the status code.
    • +
  • HTTP headers, like those for requests.
    • +
  • Optionally, a body containing the fetched resource.
    • +
+ +

APIs based on HTTP

+ +

The most commonly used API based on HTTP is the {{domxref("XMLHttpRequest")}} API, which can be used to exchange data between a {{Glossary("user agent")}} and a server. The modern {{domxref("Fetch API")}} provides the same features with a more powerful and flexible feature set.

+ +

Another API, server-sent events, is a one-way service that allows a server to send events to the client, using HTTP as a transport mechanism. Using the {{domxref("EventSource")}} interface, the client opens a connection and establishes event handlers. The client browser automatically converts the messages that arrive on the HTTP stream into appropriate {{domxref("Event")}} objects, delivering them to the event handlers that have been registered for the events' {{domxref("Event.type", "type")}} if known, or to the {{domxref("EventSource.onmessage", "onmessage")}} event handler if no type-specific event handler was established.

+ +

Conclusion

+ +

HTTP è un protocollo estensibile che è facile da usare. The client-server structure, combined with the ability to simply add headers, allows HTTP to advance along with the extended capabilities of the Web.

+ +

Though HTTP/2 adds some complexity, by embedding HTTP messages in frames to improve performance, the basic structure of messages has stayed the same since HTTP/1.0. Session flow remains simple, allowing it to be investigated, and debugged with a simple HTTP message monitor.

diff --git a/files/it/web/http/panoramica/index.html b/files/it/web/http/panoramica/index.html deleted file mode 100644 index f2cf4c990c..0000000000 --- a/files/it/web/http/panoramica/index.html +++ /dev/null @@ -1,176 +0,0 @@ ---- -title: Una panoramica su HTTP -slug: Web/HTTP/Panoramica -tags: - - HTTP - - Protocolli -translation_of: Web/HTTP/Overview ---- -
{{HTTPSidebar}}
- -

HTTP è un {{Glossary("protocollo")}} che permette il recupero di risorse, come le pagine HTML. È il fondamento di ogni scambio di dati sul Web ed è un protocollo client-server,il che significa che le richieste vengono avviate dal destinatario, solitamente il browser Web. Un documento completo viene ricostruito dai diversi sotto-documenti recuperati, ad esempio testo, descrizione del layout, immagini, video, script e altro.

- -

A Web document is the composition of different resources

- -

Client e server comunicano scambiando messaggi individuali (al contrario di un flusso di dati). I messaggi inviati dal client, solitamente un browser Web, sono chiamati richieste (requests) e i messaggi inviati dal server come risposta sono chiamati risposte (responses).

- -

HTTP as an application layer protocol, on top of TCP (transport layer) and IP (network layer) and below the presentation layer.Progettato all'inizio degli anni '90 (1990), HTTP è un protocollo estensibile che si è evoluto nel tempo. È un protocollo a livello di applicazione che viene inviato mediante {{Glossary("TCP")}}, o mediante una connessione TCP cifrata {{Glossary("TLS")}}, anche se teoricamente potrebbe essere utilizzato qualsiasi protocollo di trasporto affidabile. Grazie alla sua estensibilità, viene utilizzato non solo per recuperare documenti ipertestuali, ma anche immagini e video o per pubblicare contenuti su server, come con i risultati dei moduli HTML. HTTP può essere utilizzato anche per recuperare parti di documenti per aggiornare pagine Web su richiesta.

- -

Componenti di sistemi basati su HTTP

- -

HTTP è un protocollo client-server: le richieste vengono inviate da un'entità, lo user-agent (o un proxy per conto di esso). Il più delle volte lo user-agent è un browser Web, ma può essere qualsiasi cosa, ad esempio un robot che esegue la scansione del Web per popolare e mantenere un indice del motore di ricerca.

- -

Ogni singola richiesta viene inviata a un server, che la gestisce e fornisce una risposta, chiamata response. Tra il client e il server ci sono numerose entità, chiamate collettivamente {{Glossary("Proxy_server", "proxies")}}, che eseguono operazioni diverse e fungono da gateway o {{Glossary("Cache", "caches")}}, per esempio.

- -

Client server chain

- -

In realtà, ci sono più computer tra un browser e il server che gestisce la richiesta: ci sono router, modem e altro. Grazie alla struttura a strati del Web, questi sono nascosti nella rete e nei livelli di trasporto. L'HTTP è in cima, a livello applicazione. Sebbene importanti per diagnosticare i problemi di rete, i livelli sottostanti sono per lo più irrilevanti per la descrizione di HTTP.

- -

Client: lo user-agent

- -

Lo user-agent è qualsiasi strumento che agisce per conto dell'utente. Questo ruolo viene svolto principalmente dal browser Web; altre possibilità sono i programmi utilizzati da ingegneri e sviluppatori Web per eseguire il debug delle loro applicazioni.

- -

Il browser è sempre l'entità che avvia la richiesta. Non è mai il server (sebbene nel corso degli anni siano stati aggiunti alcuni meccanismi per simulare i messaggi avviati dal server).

- -

Per presentare una pagina Web, il browser invia una richiesta iniziale per recuperare il documento HTML che rappresenta la pagina. Quindi analizza questo file, effettuando richieste aggiuntive corrispondenti a script di esecuzione, informazioni sul layout (CSS) da visualizzare e sotto-risorse contenute all'interno della pagina (solitamente immagini e video). Il browser Web quindi compone queste risorse per presentare all'utente un documento completo, la pagina Web. Gli script eseguiti dal browser possono recuperare più risorse nelle fasi successive e il browser aggiorna la pagina Web di conseguenza.

- -

Una pagina Web è un documento ipertestuale. Ciò significa che alcune parti del testo visualizzato sono collegamenti che possono essere attivati (di solito con un clic del mouse) per recuperare una nuova pagina Web, consentendo all'utente di dirigere il proprio user-agent e navigare nel Web. Il browser traduce queste indicazioni in richieste HTTP e interpreta ulteriormente le risposte HTTP per presentare all'utente una risposta chiara.

- -

Il Web server

- -

Sul lato opposto del canale di comunicazione, è il server, che serve (restituisce) il documento come richiesto dal client. Un server appare virtualmente come un'unica macchina: questo perché potrebbe essere un insieme di server, i quali condividono il carico (bilanciamento del carico) o un complesso software che interroga altri computer (come una cache, un DB server o un e-commerce server), generando totalmente o parzialmente il documento su richiesta.

- -

Un server non è necessariamente una singola macchina, ma più istanze di software server possono essere ospitate sulla stessa macchina. Con HTTP / 1.1 e l'intestazione {{HTTPHeader ("Host")}}, possono persino condividere lo stesso indirizzo IP. HERE!!!

- -

Proxies

- -

Between the Web browser and the server, numerous computers and machines relay the HTTP messages. Due to the layered structure of the Web stack, most of these operate at the transport, network or physical levels, becoming transparent at the HTTP layer and potentially making a significant impact on performance. Those operating at the application layers are generally called proxies. These can be transparent, forwarding on the requests they receive without altering them in any way, or non-transparent, in which case they will change the request in some way before passing it along to the server. Proxies may perform numerous functions:

- -
    -
  • caching (the cache can be public or private, like the browser cache)
    • -
  • filtering (like an antivirus scan or parental controls)
    • -
  • load balancing (to allow multiple servers to serve the different requests)
    • -
  • authentication (to control access to different resources)
    • -
  • logging (allowing the storage of historical information)
    • -
- -

Basic aspects of HTTP

- -

HTTP is simple

- -

HTTP is generally designed to be simple and human readable, even with the added complexity introduced in HTTP/2 by encapsulating HTTP messages into frames. HTTP messages can be read and understood by humans, providing easier testing for developers, and reduced complexity for newcomers.

- -

HTTP is extensible

- -

Introduced in HTTP/1.0, HTTP headers make this protocol easy to extend and experiment with. New functionality can even be introduced by a simple agreement between a client and a server about a new header's semantics.

- -

HTTP is stateless, but not sessionless

- -

HTTP is stateless: there is no link between two requests being successively carried out on the same connection. This immediately has the prospect of being problematic for users attempting to interact with certain pages coherently, for example, using e-commerce shopping baskets. But while the core of HTTP itself is stateless, HTTP cookies allow the use of stateful sessions. Using header extensibility, HTTP Cookies are added to the workflow, allowing session creation on each HTTP request to share the same context, or the same state.

- -

HTTP and connections

- -

A connection is controlled at the transport layer, and therefore fundamentally out of scope for HTTP. Though HTTP doesn't require the underlying transport protocol to be connection-based; only requiring it to be reliable, or not lose messages (so at minimum presenting an error). Among the two most common transport protocols on the Internet, TCP is reliable and UDP isn't. HTTP therefore relies on the TCP standard, which is connection-based.

- -

Before a client and server can exchange an HTTP request/response pair, they must establish a TCP connection, a process which requires several round-trips. The default behavior of HTTP/1.0 is to open a separate TCP connection for each HTTP request/response pair. This is less efficient than sharing a single TCP connection when multiple requests are sent in close succession.

- -

In order to mitigate this flaw, HTTP/1.1 introduced pipelining (which proved difficult to implement) and persistent connections: the underlying TCP connection can be partially controlled using the {{HTTPHeader("Connection")}} header. HTTP/2 went a step further by multiplexing messages over a single connection, helping keep the connection warm and more efficient.

- -

Experiments are in progress to design a better transport protocol more suited to HTTP. For example, Google is experimenting with QUIC which builds on UDP to provide a more reliable and efficient transport protocol.

- -

What can be controlled by HTTP

- -

This extensible nature of HTTP has, over time, allowed for more control and functionality of the Web. Cache or authentication methods were functions handled early in HTTP history. The ability to relax the origin constraint, by contrast, has only been added in the 2010s.

- -

Here is a list of common features controllable with HTTP.

- -
    -
  • Caching
    - How documents are cached can be controlled by HTTP. The server can instruct proxies and clients, about what to cache and for how long. The client can instruct intermediate cache proxies to ignore the stored document.
    • -
  • Relaxing the origin constraint
    - To prevent snooping and other privacy invasions, Web browsers enforce strict separation between Web sites. Only pages from the same origin can access all the information of a Web page. Though such constraint is a burden to the server, HTTP headers can relax this strict separation on the server side, allowing a document to become a patchwork of information sourced from different domains; there could even be security-related reasons to do so.
    • -
  • Authentication
    - Some pages may be protected so that only specific users can access them. Basic authentication may be provided by HTTP, either using the {{HTTPHeader("WWW-Authenticate")}} and similar headers, or by setting a specific session using HTTP cookies.
    • -
  • Proxy and tunneling
    - Servers or clients are often located on intranets and hide their true IP address from other computers. HTTP requests then go through proxies to cross this network barrier. Not all proxies are HTTP proxies. The SOCKS protocol, for example, operates at a lower level. Other protocols, like ftp, can be handled by these proxies.
    • -
  • Sessions
    - Using HTTP cookies allows you to link requests with the state of the server. This creates sessions, despite basic HTTP being a state-less protocol. This is useful not only for e-commerce shopping baskets, but also for any site allowing user configuration of the output.
    • -
- -

HTTP flow

- -

When a client wants to communicate with a server, either the final server or an intermediate proxy, it performs the following steps:

- -
    -
  1. Open a TCP connection: The TCP connection is used to send a request, or several, and receive an answer. The client may open a new connection, reuse an existing connection, or open several TCP connections to the servers.
    2. -
  2. Send an HTTP message: HTTP messages (before HTTP/2) are human-readable. With HTTP/2, these simple messages are encapsulated in frames, making them impossible to read directly, but the principle remains the same. For example: - 
    GET / HTTP/1.1
-Host: developer.mozilla.org
-Accept-Language: fr
    -
    3. -
  3. Read the response sent by the server, such as: - 
    HTTP/1.1 200 OK
-Date: Sat, 09 Oct 2010 14:28:02 GMT
-Server: Apache
-Last-Modified: Tue, 01 Dec 2009 20:18:22 GMT
-ETag: "51142bc1-7449-479b075b2891b"
-Accept-Ranges: bytes
-Content-Length: 29769
-Content-Type: text/html
-
-<!DOCTYPE html... (here comes the 29769 bytes of the requested web page)
    -
    4. -
  4. Close or reuse the connection for further requests.
    5. -
- -

If HTTP pipelining is activated, several requests can be sent without waiting for the first response to be fully received. HTTP pipelining has proven difficult to implement in existing networks, where old pieces of software coexist with modern versions. HTTP pipelining has been superseded in HTTP/2 with more robust multiplexing requests within a frame.

- -

HTTP Messages

- -

HTTP messages, as defined in HTTP/1.1 and earlier, are human-readable. In HTTP/2, these messages are embedded into a binary structure, a frame, allowing optimizations like compression of headers and multiplexing. Even if only part of the original HTTP message is sent in this version of HTTP, the semantics of each message is unchanged and the client reconstitutes (virtually) the original HTTP/1.1 request. It is therefore useful to comprehend HTTP/2 messages in the HTTP/1.1 format.

- -

There are two types of HTTP messages, requests and responses, each with its own format.

- -

Requests

- -

An example HTTP request:

- -

A basic HTTP request

- -

Requests consists of the following elements:

- -
    -
  • An HTTP method, usually a verb like {{HTTPMethod("GET")}}, {{HTTPMethod("POST")}} or a noun like {{HTTPMethod("OPTIONS")}} or {{HTTPMethod("HEAD")}} that defines the operation the client wants to perform. Typically, a client wants to fetch a resource (using GET) or post the value of an HTML form (using POST), though more operations may be needed in other cases.
    • -
  • The path of the resource to fetch; the URL of the resource stripped from elements that are obvious from the context, for example without the {{Glossary("protocol")}} (http://), the {{Glossary("domain")}} (here, developer.mozilla.org), or the TCP {{Glossary("port")}} (here, 80).
    • -
  • The version of the HTTP protocol.
    • -
  • Optional headers that convey additional information for the servers.
    • -
  • Or a body, for some methods like POST, similar to those in responses, which contain the resource sent.
    • -
- -

Responses

- -

An example response:

- -

- -

Responses consist of the following elements:

- -
    -
  • The version of the HTTP protocol they follow.
    • -
  • A status code, indicating if the request was successful, or not, and why.
    • -
  • A status message, a non-authoritative short description of the status code.
    • -
  • HTTP headers, like those for requests.
    • -
  • Optionally, a body containing the fetched resource.
    • -
- -

APIs based on HTTP

- -

The most commonly used API based on HTTP is the {{domxref("XMLHttpRequest")}} API, which can be used to exchange data between a {{Glossary("user agent")}} and a server. The modern {{domxref("Fetch API")}} provides the same features with a more powerful and flexible feature set.

- -

Another API, server-sent events, is a one-way service that allows a server to send events to the client, using HTTP as a transport mechanism. Using the {{domxref("EventSource")}} interface, the client opens a connection and establishes event handlers. The client browser automatically converts the messages that arrive on the HTTP stream into appropriate {{domxref("Event")}} objects, delivering them to the event handlers that have been registered for the events' {{domxref("Event.type", "type")}} if known, or to the {{domxref("EventSource.onmessage", "onmessage")}} event handler if no type-specific event handler was established.

- -

Conclusion

- -

HTTP è un protocollo estensibile che è facile da usare. The client-server structure, combined with the ability to simply add headers, allows HTTP to advance along with the extended capabilities of the Web.

- -

Though HTTP/2 adds some complexity, by embedding HTTP messages in frames to improve performance, the basic structure of messages has stayed the same since HTTP/1.0. Session flow remains simple, allowing it to be investigated, and debugged with a simple HTTP message monitor.

diff --git a/files/it/web/http/range_requests/index.html b/files/it/web/http/range_requests/index.html new file mode 100644 index 0000000000..e6bbe43d19 --- /dev/null +++ b/files/it/web/http/range_requests/index.html @@ -0,0 +1,115 @@ +--- +title: Richieste HTTP range +slug: Web/HTTP/Richieste_range +translation_of: Web/HTTP/Range_requests +--- +
{{HTTPSidebar}}
+ +

Le richieste HTTP range permettono di mandare una sola porzione di un messaggio HTTP da un server a un client invece del messaggio intero. Le richieste parziali sono utili per file di grandi dimensioni o per mettere un download in pausa e riprenderlo successivamente.

+ +

Controllare se un server supporta richieste parziali

+ +

Se l'header {{HTTPHeader("Accept-Ranges")}} è presente nelle risposte HTTP (e il suo valore non è "none"), il server supporta richieste HTTP range. E' possibile controllarlo creando una richiesta {{HTTPMethod("HEAD")}} con cURL, ad esempio.

+ +
curl -I http://i.imgur.com/z4d4kWk.jpg
+
+HTTP/1.1 200 OK
+...
+Accept-Ranges: bytes
+Content-Length: 146515
+
+ +

In questa risposta, Accept-Ranges: bytes indica che i bytes possono essere usati come unità base per definire un range (intervallo). Qui anche l'header {{HTTPHeader("Content-Length")}} è utile perché indica la dimensione dell'intero file contenente l'immagine.

+ +

Se il sito omette l'header Accept-Ranges, probabilmente non supporta richieste parziali. Alcuni siti mandano esplicitamente "none" come valore, indicando che non supportano la funzionalità. In questo caso, i download managers di alcune app disabiliteranno i loro pulsanti di pausa.

+ +
curl -I https://www.youtube.com/watch?v=EwTZ2xpQwpA
+
+HTTP/1.1 200 OK
+...
+Accept-Ranges: none
+
+ +

Richiedere un range specifico

+ +

Se il server supporta richieste range, è possibile effettuare questa richiesta tramite l'header {{HTTPHeader("Range")}}, che indica la parte o le parti di un documento con le quali il server dovrà rispondere.

+ +

Range formato da una singola parte

+ +

Possiamo richiedere un singolo range da una risorsa. Possiamo fare una richiesta di prova tramite cURL. L'opzione "-H" appenderà una riga all'header alla richiesta, in questo caso l'header Range che richiede i primi 1024 bytes.

+ +
curl http://i.imgur.com/z4d4kWk.jpg -i -H "Range: bytes=0-1023"
+ +

La richiesta effettuata è la seguente:

+ +
GET /z4d4kWk.jpg HTTP/1.1
+Host: i.imgur.com
+Range: bytes=0-1023
+ +

Il server risponde con lo stato {{HTTPStatus("206")}} Partial Content:

+ +
HTTP/1.1 206 Partial Content
+Content-Range: bytes 0-1023/146515
+Content-Length: 1024
+...
+(binary content)
+
+ +

L'header {{HTTPHeader("Content-Length")}} ora indica la dimensione dell'intervallo richiesto (non la dimensione totale dell'immagine). L'header {{HTTPHeader("Content-Range")}} nella risposta indica la posizione del messaggio parziale all'interno del file.

+ +

Range formato da più parti

+ +

L'header {{HTTPHeader("Range")}} permette anche di ottenere più di un intervallo alla volta. Gli intervalli sono separati da una virgola.

+ +
curl http://www.example.com -i -H "Range: bytes=0-50, 100-150"
+ +

Il server risponde con lo stato {{HTTPStatus("206")}} Partial Content e l'header {{HTTPHeader("Content-Type")}}: multipart/byteranges; boundary=3d6b6a416f9b5, indicando che un range multiparte segue. Ogni parte contiene il proprio campo Content-Type and Content-Range.

+ +
HTTP/1.1 206 Partial Content
+Content-Type: multipart/byteranges; boundary=3d6b6a416f9b5
+Content-Length: 282
+
+--3d6b6a416f9b5
+Content-Type: text/html
+Content-Range: bytes 0-50/1270
+
+<!doctype html>
+<html>
+<head>
+    <title>Example Do
+--3d6b6a416f9b5
+Content-Type: text/html
+Content-Range: bytes 100-150/1270
+
+eta http-equiv="Content-type" content="text/html; c
+--3d6b6a416f9b5--
+ +

Richieste di range condizionali

+ +

Quando la richiesta è in pausa e viene successivamente ripresa, è necessario garantire che la risorsa remota non sia stata modificata da quando l'ultimo frammento è stato ricevuto.

+ +

L'header della richiesta HTTP {{HTTPHeader("If-Range")}} rende una richiesta range condizionale: se la condizione è verificata, la richiesta verrà effettuata e il server restituirà lo stato {{HTTPStatus("206")}} Partial Content con il corpo appropriato. Se la condizione non è verificata, il server restituirà l'intera risorsa con status {{HTTPStatus("200")}} OK. Questo header può essere usato in combinazione con un validatore {{HTTPHeader("Last-Modified")}} oppure un {{HTTPHeader("ETag")}}, ma non entrambi.

+ +
If-Range: Wed, 21 Oct 2015 07:28:00 GMT
+ +

Risposte alle richieste parziali

+ +

Quando si lavora con richieste range, esistono tre stati rilevanti:

+ +
    +
  • In caso di richiesta riuscita, il server restituisce lo stato {{HTTPStatus("206")}} Partial Content.
    • +
  • In caso di una richiesta out of bounds (i valori di range si sovrappongono), il server risponde con lo stato {{HTTPStatus("416")}} Requested Range Not Satisfiable.
    • +
  • Se la richiesta range non è supportata verrà restituito lo stato {{HTTPStatus("200")}} OK.
    • +
+ +

Confronto con Transfer-Encoding frammentato

+ +

L'header {{HTTPHeader("Transfer-Encoding")}} permette la codifica a frammenti, che è utile quando grandi quantità di dati sono mandati al client e la dimensione totale della risposta non è conosciuta fino a quando la richiesta è stata processata. Il server manda dati al client immediatamente senza fare buffering della risposta o determinare la lunghezza esatta, migliorando la latenza. Richieste range e chunking sono compatibili e possono essere usate contemporaneamente.

+ +

Vedi anche

+ +
    +
  • Codici di stato: {{HTTPStatus("200")}}, {{HTTPStatus("206")}}, {{HTTPStatus("416")}}.
    • +
  • Headers: {{HTTPHeader("Accept-Ranges")}}, {{HTTPHeader("Range")}}, {{HTTPHeader("Content-Range")}}, {{HTTPHeader("If-Range")}}, {{HTTPHeader("Transfer-Encoding")}}.
    • +
  • Riprendere i download in Internet Explorer
    • +
diff --git a/files/it/web/http/richieste_range/index.html b/files/it/web/http/richieste_range/index.html deleted file mode 100644 index e6bbe43d19..0000000000 --- a/files/it/web/http/richieste_range/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: Richieste HTTP range -slug: Web/HTTP/Richieste_range -translation_of: Web/HTTP/Range_requests ---- -
{{HTTPSidebar}}
- -

Le richieste HTTP range permettono di mandare una sola porzione di un messaggio HTTP da un server a un client invece del messaggio intero. Le richieste parziali sono utili per file di grandi dimensioni o per mettere un download in pausa e riprenderlo successivamente.

- -

Controllare se un server supporta richieste parziali

- -

Se l'header {{HTTPHeader("Accept-Ranges")}} è presente nelle risposte HTTP (e il suo valore non è "none"), il server supporta richieste HTTP range. E' possibile controllarlo creando una richiesta {{HTTPMethod("HEAD")}} con cURL, ad esempio.

- -
curl -I http://i.imgur.com/z4d4kWk.jpg
-
-HTTP/1.1 200 OK
-...
-Accept-Ranges: bytes
-Content-Length: 146515
-
- -

In questa risposta, Accept-Ranges: bytes indica che i bytes possono essere usati come unità base per definire un range (intervallo). Qui anche l'header {{HTTPHeader("Content-Length")}} è utile perché indica la dimensione dell'intero file contenente l'immagine.

- -

Se il sito omette l'header Accept-Ranges, probabilmente non supporta richieste parziali. Alcuni siti mandano esplicitamente "none" come valore, indicando che non supportano la funzionalità. In questo caso, i download managers di alcune app disabiliteranno i loro pulsanti di pausa.

- -
curl -I https://www.youtube.com/watch?v=EwTZ2xpQwpA
-
-HTTP/1.1 200 OK
-...
-Accept-Ranges: none
-
- -

Richiedere un range specifico

- -

Se il server supporta richieste range, è possibile effettuare questa richiesta tramite l'header {{HTTPHeader("Range")}}, che indica la parte o le parti di un documento con le quali il server dovrà rispondere.

- -

Range formato da una singola parte

- -

Possiamo richiedere un singolo range da una risorsa. Possiamo fare una richiesta di prova tramite cURL. L'opzione "-H" appenderà una riga all'header alla richiesta, in questo caso l'header Range che richiede i primi 1024 bytes.

- -
curl http://i.imgur.com/z4d4kWk.jpg -i -H "Range: bytes=0-1023"
- -

La richiesta effettuata è la seguente:

- -
GET /z4d4kWk.jpg HTTP/1.1
-Host: i.imgur.com
-Range: bytes=0-1023
- -

Il server risponde con lo stato {{HTTPStatus("206")}} Partial Content:

- -
HTTP/1.1 206 Partial Content
-Content-Range: bytes 0-1023/146515
-Content-Length: 1024
-...
-(binary content)
-
- -

L'header {{HTTPHeader("Content-Length")}} ora indica la dimensione dell'intervallo richiesto (non la dimensione totale dell'immagine). L'header {{HTTPHeader("Content-Range")}} nella risposta indica la posizione del messaggio parziale all'interno del file.

- -

Range formato da più parti

- -

L'header {{HTTPHeader("Range")}} permette anche di ottenere più di un intervallo alla volta. Gli intervalli sono separati da una virgola.

- -
curl http://www.example.com -i -H "Range: bytes=0-50, 100-150"
- -

Il server risponde con lo stato {{HTTPStatus("206")}} Partial Content e l'header {{HTTPHeader("Content-Type")}}: multipart/byteranges; boundary=3d6b6a416f9b5, indicando che un range multiparte segue. Ogni parte contiene il proprio campo Content-Type and Content-Range.

- -
HTTP/1.1 206 Partial Content
-Content-Type: multipart/byteranges; boundary=3d6b6a416f9b5
-Content-Length: 282
-
---3d6b6a416f9b5
-Content-Type: text/html
-Content-Range: bytes 0-50/1270
-
-<!doctype html>
-<html>
-<head>
-    <title>Example Do
---3d6b6a416f9b5
-Content-Type: text/html
-Content-Range: bytes 100-150/1270
-
-eta http-equiv="Content-type" content="text/html; c
---3d6b6a416f9b5--
- -

Richieste di range condizionali

- -

Quando la richiesta è in pausa e viene successivamente ripresa, è necessario garantire che la risorsa remota non sia stata modificata da quando l'ultimo frammento è stato ricevuto.

- -

L'header della richiesta HTTP {{HTTPHeader("If-Range")}} rende una richiesta range condizionale: se la condizione è verificata, la richiesta verrà effettuata e il server restituirà lo stato {{HTTPStatus("206")}} Partial Content con il corpo appropriato. Se la condizione non è verificata, il server restituirà l'intera risorsa con status {{HTTPStatus("200")}} OK. Questo header può essere usato in combinazione con un validatore {{HTTPHeader("Last-Modified")}} oppure un {{HTTPHeader("ETag")}}, ma non entrambi.

- -
If-Range: Wed, 21 Oct 2015 07:28:00 GMT
- -

Risposte alle richieste parziali

- -

Quando si lavora con richieste range, esistono tre stati rilevanti:

- -
    -
  • In caso di richiesta riuscita, il server restituisce lo stato {{HTTPStatus("206")}} Partial Content.
    • -
  • In caso di una richiesta out of bounds (i valori di range si sovrappongono), il server risponde con lo stato {{HTTPStatus("416")}} Requested Range Not Satisfiable.
    • -
  • Se la richiesta range non è supportata verrà restituito lo stato {{HTTPStatus("200")}} OK.
    • -
- -

Confronto con Transfer-Encoding frammentato

- -

L'header {{HTTPHeader("Transfer-Encoding")}} permette la codifica a frammenti, che è utile quando grandi quantità di dati sono mandati al client e la dimensione totale della risposta non è conosciuta fino a quando la richiesta è stata processata. Il server manda dati al client immediatamente senza fare buffering della risposta o determinare la lunghezza esatta, migliorando la latenza. Richieste range e chunking sono compatibili e possono essere usate contemporaneamente.

- -

Vedi anche

- -
    -
  • Codici di stato: {{HTTPStatus("200")}}, {{HTTPStatus("206")}}, {{HTTPStatus("416")}}.
    • -
  • Headers: {{HTTPHeader("Accept-Ranges")}}, {{HTTPHeader("Range")}}, {{HTTPHeader("Content-Range")}}, {{HTTPHeader("If-Range")}}, {{HTTPHeader("Transfer-Encoding")}}.
    • -
  • Riprendere i download in Internet Explorer
    • -
diff --git a/files/it/web/http/session/index.html b/files/it/web/http/session/index.html new file mode 100644 index 0000000000..e414eb9d19 --- /dev/null +++ b/files/it/web/http/session/index.html @@ -0,0 +1,171 @@ +--- +title: Una tipica sessione HTTP +slug: Web/HTTP/Sessione +translation_of: Web/HTTP/Session +--- +
{{HTTPSidebar}}
+ +

Nei protocolli client-server come l’HTTP, la sessione è composta da tre fasi:

+ +
    +
  1. Il cliente stabilisce una connessione TCP (o l’appropriata connessione nel caso non sia TCP).
    2. +
  2. Il cliente manda la sua richiesta e aspetta per la risposta.
    3. +
  3. Il server processa la richiesta, mandando poi la sua risposta, con al suo interno il codice di stato e un dato appropriato.
    4. +
+ +

Da quando è uscito HTTP/1.1, la connessione non si chiude più dopo la terza fase, e il cliente può fare un altra richiesta: questo significa che la seconda e terza fase possono essere usate molte volte.

+ +

Stabilire una connessione

+ +

Nei protocolli client-server è il client che stabilisce la connessione. Aprire una connessione in HTTP significa avviare una connessione nel livello di trasporto sottostante, che di solito è il TCP.

+ +

Con TCP la porta di default, per un server HTTP su un computer, è la porta 80. Possono essere usate anche altre porte, come la 8000 o la 8080. L’URL della pagina da raggiungere contiene sia il nome del dominio che la numero di porta, anche se quest’ultimo può essere omesso se è 80. Vedi identificare le risorse sul web per maggiori dettagli.

+ +
Nota: Il modello client-server non permette al server di inviare dati al client senza una specifica richiesta da parte di esso. Per aggirare questo problema, gli sviluppatori web usano varie tecniche: pingare il server periodicamente con XMLHTTPRequest, Fetch APIs, usando il WebSockets API, o protocolli simili.
+ +

Mandare una client request

+ +

Una volta che la connessione si è stabilita, il programma utente può mandare la richiesta (un programma utente è tipicamente un web browser, ma può essere tante cose, per esempio un motore di ricerca). Una client request consiste nelle direttive testuali, separate dal CRLF (carriage return line feed), divise in 3 blocchi:

+ +
    +
  1. La prima riga contiene un request method seguito dai suoi parametri: +
      +
    • il percorso di un documento, quindi l’URL assoluto senza protocollo o dominio.
      • +
    • Versione del protocollo HTTP.
      • +
    +
    2. +
  2. righe susseguenti rappresentano un header HTTP, che danno al server le informazioni su quale tipo di dato è più appropriato (ad esempio  che liguaggio o tipo di MIME) o altri dati che alterano il suo comportamento (ad esempio non mandare una risposta anche se già   memorizzata nella cache). Gli header HTTP formano un blocco che termina con una riga vuota.
    3. +
  3. L’ultimo blocco è facoltativo, e contiene dati superflui usati principalmente dal POST method.
    4. +
+ +

Esempi:

+ +

recuperare la pagina radice di developer.mozilla.org , e dire al server che il programma utente preferirebbe, se possibile, avere la pagina in lingua francese.

+ +
GET / HTTP/1.1
+Host: developer.mozilla.org
+Accept-Language: fr
+
+ +

Si osservi che l’ultima riga è vuota, questo separa il blocco data da quello header. Dato che non c’è nessuna content-lenght nell’ header HTTP, questo blocco di dati si presenta vuoto, marcando la fine degli headers, permettendo così al server di processare la richiesta dal momento in cui riceve quella riga vuota.

+ +

Per esempio, mandando il risultato di un form:

+ +
POST /contact_form.php HTTP/1.1
+Host: developer.mozilla.org
+Content-Length: 64
+Content-Type: application/x-www-form-urlencoded
+
+name=Joe%20User&request=Send%20me%20one%20of%20your%20catalogue
+
+ +

Metodi di richiesta

+ +

L’HTTP definisce un set di richieste metodo che indicano l’azione desiderata da fare a seconda della risorsa. Anche se possono essere nomi, queste richieste sono alcune volte riferite come dei verbi HTTP. La richieste più comuni sono GET e POST:

+ +
    +
  • il metodo GET richiede un dato rappresentante la risorsa specificata. Richieste fatte usando il GET  può solo recuperare dati.
    • +
  • Il metodo POST invia dati al server che potrebbe cambiare il suo stato. Questo è il metodo spesso usati per i Form HTML.
    • +
+ +

Struttura di una risposta server

+ +

Dopo che l’agente connesso ha inviato la richiesta, il web server lo processa, e alla fine restituisce una risposta. Analogamente alla richiesta client, una risposta server è formata da direttive, separate dal CRLF, sebbene divise in tre blocchi:

+ +
    +
  1. La prima linea, lastatus line, consiste in un riconoscimento della versione http usata, seguita da un status request (e il suo breve significato in parole comprensibili dall’uomo).
    2. +
  2. Le righe successive rappresentano specifici header HTTP, che danno al client informazioni riguardanti i dati inviati (per esempio: tipo, dimensione dei dati, algoritmo di compressione usato, note sul caching). Analogamente al blocco di header HTTP di una richiesta client, questi header HTTP formano un blocco finale con una linea vuota.
    3. +
  3. Il blocco finale è un blocco di dati, che contieni i dati opzionali.
    4. +
+ +

Esempio di risposte

+ +

Risposta pagina web riuscita:

+ +
HTTP/1.1 200 OK
+Content-Type: text/html; charset=utf-8
+Content-Length: 55743
+Connection: keep-alive
+Cache-Control: s-maxage=300, public, max-age=0
+Content-Language: en-US
+Date: Thu, 06 Dec 2018 17:37:18 GMT
+ETag: "2e77ad1dc6ab0b53a2996dfd4653c1c3"
+Server: meinheld/0.6.1
+Strict-Transport-Security: max-age=63072000
+X-Content-Type-Options: nosniff
+X-Frame-Options: DENY
+X-XSS-Protection: 1; mode=block
+Vary: Accept-Encoding,Cookie
+Age: 7
+
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>A simple webpage</title>
+</head>
+<body>
+  <h1>Simple HTML5 webpage</h1>
+  <p>Hello, world!</p>
+</body>
+</html>
+
+ +

Notifica che la risorsa richiesta è stata definitivamente trasferita:

+ +
HTTP/1.1 301 Moved Permanently
+Server: Apache/2.4.37 (Red Hat)
+Content-Type: text/html; charset=utf-8
+Date: Thu, 06 Dec 2018 17:33:08 GMT
+Location: https://developer.mozilla.org/ (questo è il nuovo link della risorsa; ci si aspetta che l’utente agente lo prenda)
+Keep-Alive: timeout=15, max=98
+Accept-Ranges: bytes
+Via: Moz-Cache-zlb05
+Connection: Keep-Alive
+Content-Length: 325 (Il contenuto è una pagina di default da mostrare se l’utente agente non è in grado di seguire il link)
+
+
+<!DOCTYPE html... (contiene un pagina personalizzata che aiuta l’utente a trovare la risorsa mancante)
+
+ +

Notifica che la risorsa richiesta non esiste:

+ +
HTTP/1.1 404 Not Found
+Content-Type: text/html; charset=utf-8
+Content-Length: 38217
+Connection: keep-alive
+Cache-Control: no-cache, no-store, must-revalidate, max-age=0
+Content-Language: en-US
+Date: Thu, 06 Dec 2018 17:35:13 GMT
+Expires: Thu, 06 Dec 2018 17:35:13 GMT
+Server: meinheld/0.6.1
+Strict-Transport-Security: max-age=63072000
+X-Content-Type-Options: nosniff
+X-Frame-Options: DENY
+X-XSS-Protection: 1; mode=block
+Vary: Accept-Encoding,Cookie
+X-Cache: Error from cloudfront
+
+
+<!DOCTYPE html... (contiene un pagina personalizzata che aiuta l’utente a trovare la risorsa mancante)
+
+ +

Status code di risposta

+ +

HTTP response status codes indica se una specifica richiesta HTTP sia stata completata con successo. Le risposte sono suddivise in cinque classi: risposte informative, risposte di successo, reindirizzamenti, errori client, ed errori server.

+ +
    +
  • {{HTTPStatus(200)}}: OK. La richiesta ha avuto successo.
    • +
  • {{HTTPStatus(301)}}: Definitivamente Trasferita. Questo codice di risposta significa che l’URL della risorsa richiesta è stata cambiata.
    • +
  • {{HTTPStatus(404)}}: Non trovato. Il server non riesce a trovare la risorsa richiesta.
    • +
+ +

Vedi anche

+ + diff --git a/files/it/web/http/sessione/index.html b/files/it/web/http/sessione/index.html deleted file mode 100644 index e414eb9d19..0000000000 --- a/files/it/web/http/sessione/index.html +++ /dev/null @@ -1,171 +0,0 @@ ---- -title: Una tipica sessione HTTP -slug: Web/HTTP/Sessione -translation_of: Web/HTTP/Session ---- -
{{HTTPSidebar}}
- -

Nei protocolli client-server come l’HTTP, la sessione è composta da tre fasi:

- -
    -
  1. Il cliente stabilisce una connessione TCP (o l’appropriata connessione nel caso non sia TCP).
    2. -
  2. Il cliente manda la sua richiesta e aspetta per la risposta.
    3. -
  3. Il server processa la richiesta, mandando poi la sua risposta, con al suo interno il codice di stato e un dato appropriato.
    4. -
- -

Da quando è uscito HTTP/1.1, la connessione non si chiude più dopo la terza fase, e il cliente può fare un altra richiesta: questo significa che la seconda e terza fase possono essere usate molte volte.

- -

Stabilire una connessione

- -

Nei protocolli client-server è il client che stabilisce la connessione. Aprire una connessione in HTTP significa avviare una connessione nel livello di trasporto sottostante, che di solito è il TCP.

- -

Con TCP la porta di default, per un server HTTP su un computer, è la porta 80. Possono essere usate anche altre porte, come la 8000 o la 8080. L’URL della pagina da raggiungere contiene sia il nome del dominio che la numero di porta, anche se quest’ultimo può essere omesso se è 80. Vedi identificare le risorse sul web per maggiori dettagli.

- -
Nota: Il modello client-server non permette al server di inviare dati al client senza una specifica richiesta da parte di esso. Per aggirare questo problema, gli sviluppatori web usano varie tecniche: pingare il server periodicamente con XMLHTTPRequest, Fetch APIs, usando il WebSockets API, o protocolli simili.
- -

Mandare una client request

- -

Una volta che la connessione si è stabilita, il programma utente può mandare la richiesta (un programma utente è tipicamente un web browser, ma può essere tante cose, per esempio un motore di ricerca). Una client request consiste nelle direttive testuali, separate dal CRLF (carriage return line feed), divise in 3 blocchi:

- -
    -
  1. La prima riga contiene un request method seguito dai suoi parametri: -
      -
    • il percorso di un documento, quindi l’URL assoluto senza protocollo o dominio.
      • -
    • Versione del protocollo HTTP.
      • -
    -
    2. -
  2. righe susseguenti rappresentano un header HTTP, che danno al server le informazioni su quale tipo di dato è più appropriato (ad esempio  che liguaggio o tipo di MIME) o altri dati che alterano il suo comportamento (ad esempio non mandare una risposta anche se già   memorizzata nella cache). Gli header HTTP formano un blocco che termina con una riga vuota.
    3. -
  3. L’ultimo blocco è facoltativo, e contiene dati superflui usati principalmente dal POST method.
    4. -
- -

Esempi:

- -

recuperare la pagina radice di developer.mozilla.org , e dire al server che il programma utente preferirebbe, se possibile, avere la pagina in lingua francese.

- -
GET / HTTP/1.1
-Host: developer.mozilla.org
-Accept-Language: fr
-
- -

Si osservi che l’ultima riga è vuota, questo separa il blocco data da quello header. Dato che non c’è nessuna content-lenght nell’ header HTTP, questo blocco di dati si presenta vuoto, marcando la fine degli headers, permettendo così al server di processare la richiesta dal momento in cui riceve quella riga vuota.

- -

Per esempio, mandando il risultato di un form:

- -
POST /contact_form.php HTTP/1.1
-Host: developer.mozilla.org
-Content-Length: 64
-Content-Type: application/x-www-form-urlencoded
-
-name=Joe%20User&request=Send%20me%20one%20of%20your%20catalogue
-
- -

Metodi di richiesta

- -

L’HTTP definisce un set di richieste metodo che indicano l’azione desiderata da fare a seconda della risorsa. Anche se possono essere nomi, queste richieste sono alcune volte riferite come dei verbi HTTP. La richieste più comuni sono GET e POST:

- -
    -
  • il metodo GET richiede un dato rappresentante la risorsa specificata. Richieste fatte usando il GET  può solo recuperare dati.
    • -
  • Il metodo POST invia dati al server che potrebbe cambiare il suo stato. Questo è il metodo spesso usati per i Form HTML.
    • -
- -

Struttura di una risposta server

- -

Dopo che l’agente connesso ha inviato la richiesta, il web server lo processa, e alla fine restituisce una risposta. Analogamente alla richiesta client, una risposta server è formata da direttive, separate dal CRLF, sebbene divise in tre blocchi:

- -
    -
  1. La prima linea, lastatus line, consiste in un riconoscimento della versione http usata, seguita da un status request (e il suo breve significato in parole comprensibili dall’uomo).
    2. -
  2. Le righe successive rappresentano specifici header HTTP, che danno al client informazioni riguardanti i dati inviati (per esempio: tipo, dimensione dei dati, algoritmo di compressione usato, note sul caching). Analogamente al blocco di header HTTP di una richiesta client, questi header HTTP formano un blocco finale con una linea vuota.
    3. -
  3. Il blocco finale è un blocco di dati, che contieni i dati opzionali.
    4. -
- -

Esempio di risposte

- -

Risposta pagina web riuscita:

- -
HTTP/1.1 200 OK
-Content-Type: text/html; charset=utf-8
-Content-Length: 55743
-Connection: keep-alive
-Cache-Control: s-maxage=300, public, max-age=0
-Content-Language: en-US
-Date: Thu, 06 Dec 2018 17:37:18 GMT
-ETag: "2e77ad1dc6ab0b53a2996dfd4653c1c3"
-Server: meinheld/0.6.1
-Strict-Transport-Security: max-age=63072000
-X-Content-Type-Options: nosniff
-X-Frame-Options: DENY
-X-XSS-Protection: 1; mode=block
-Vary: Accept-Encoding,Cookie
-Age: 7
-
-
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>A simple webpage</title>
-</head>
-<body>
-  <h1>Simple HTML5 webpage</h1>
-  <p>Hello, world!</p>
-</body>
-</html>
-
- -

Notifica che la risorsa richiesta è stata definitivamente trasferita:

- -
HTTP/1.1 301 Moved Permanently
-Server: Apache/2.4.37 (Red Hat)
-Content-Type: text/html; charset=utf-8
-Date: Thu, 06 Dec 2018 17:33:08 GMT
-Location: https://developer.mozilla.org/ (questo è il nuovo link della risorsa; ci si aspetta che l’utente agente lo prenda)
-Keep-Alive: timeout=15, max=98
-Accept-Ranges: bytes
-Via: Moz-Cache-zlb05
-Connection: Keep-Alive
-Content-Length: 325 (Il contenuto è una pagina di default da mostrare se l’utente agente non è in grado di seguire il link)
-
-
-<!DOCTYPE html... (contiene un pagina personalizzata che aiuta l’utente a trovare la risorsa mancante)
-
- -

Notifica che la risorsa richiesta non esiste:

- -
HTTP/1.1 404 Not Found
-Content-Type: text/html; charset=utf-8
-Content-Length: 38217
-Connection: keep-alive
-Cache-Control: no-cache, no-store, must-revalidate, max-age=0
-Content-Language: en-US
-Date: Thu, 06 Dec 2018 17:35:13 GMT
-Expires: Thu, 06 Dec 2018 17:35:13 GMT
-Server: meinheld/0.6.1
-Strict-Transport-Security: max-age=63072000
-X-Content-Type-Options: nosniff
-X-Frame-Options: DENY
-X-XSS-Protection: 1; mode=block
-Vary: Accept-Encoding,Cookie
-X-Cache: Error from cloudfront
-
-
-<!DOCTYPE html... (contiene un pagina personalizzata che aiuta l’utente a trovare la risorsa mancante)
-
- -

Status code di risposta

- -

HTTP response status codes indica se una specifica richiesta HTTP sia stata completata con successo. Le risposte sono suddivise in cinque classi: risposte informative, risposte di successo, reindirizzamenti, errori client, ed errori server.

- -
    -
  • {{HTTPStatus(200)}}: OK. La richiesta ha avuto successo.
    • -
  • {{HTTPStatus(301)}}: Definitivamente Trasferita. Questo codice di risposta significa che l’URL della risorsa richiesta è stata cambiata.
    • -
  • {{HTTPStatus(404)}}: Non trovato. Il server non riesce a trovare la risorsa richiesta.
    • -
- -

Vedi anche

- - diff --git a/files/it/web/javascript/a_re-introduction_to_javascript/index.html b/files/it/web/javascript/a_re-introduction_to_javascript/index.html new file mode 100644 index 0000000000..4dc4a484a7 --- /dev/null +++ b/files/it/web/javascript/a_re-introduction_to_javascript/index.html @@ -0,0 +1,966 @@ +--- +title: Una reintroduzione al Java Script (Tutorial JS) +slug: Web/JavaScript/Una_reintroduzione_al_JavaScript +translation_of: Web/JavaScript/A_re-introduction_to_JavaScript +--- +

Introduzione

+ +

Perchè una reintroduzione? Perchè  JavaScript ha la ragionevole pretesa di essere il linguaggio di programmazione più frainteso del mondo. Benchè spesso considerato ironicamente come un giocattolo, la sua ingannevole semplicità nasconde alcune potenti caratteristiche. JavaScript viene attualmente utilizzato da un numero incredibile di applicazioni di alto profilo, che mostrano come la conoscenza profonda di questa tecnologia sia un importante abilità per qualunque sviluppatore web.

+ +

È utile iniziare con un accenno alla storia del linguaggio. JavaScript fu creato nel 1995 da Brendan Eich, mentre lavorava come ingegnere presso Netscape, e rilasciata per la prima volta con Netscape 2 all'inizio del 1996. Originariamente doveva essere chiamato LiveScript, ma fu poi rinominato in Javacript per una fatalmente dannosa decisione di marketing che tentava di approfittare della popolarità del linguaggio Java della Sun Microsystem — nonostante abbiano molto poco in comune. Questa è stata una fonte di confusione da allora.

+ +

Diversi mesi dopo, Microsoft rilasciò JScript con Internet Explorer 3, un linguaggio che lavorava in modo simile a JavaScript ed era quasi del tutto compatibile con esso. Netscape sottomise il linguaggio alla Ecma International, un'organizzazione europea di standardizzazione, che porta alla nascita della prima edizione degli standard ECMAScript. Lo standard ricevette un significativo aggiornamento come ECMAScript edition 3 nel 1999, ed è rimasto più o meno stabile da allora. La quarta edizione fu abbandonata a causa delle differenze di vedute sulla complessità del linguaggio. Molte parti della quarta edizione formano la base del nuovo ECMAScript edizione 5, pubblicato nel dicembre del 2009, e per la sesta edizione pubblicata a giugno 2015.

+ +

Diversamente dalla maggior parte dei linguaggi di programmazione, il linguaggio JavaScript non ha il concetto di input e output. È stato concepito per essere eseguito come linguaggio di scripting in un ambiente ospite, ed è responsabilità dell'ambiente ospite fornire meccanismi per comunicare con il mondo esterno. L'ambiente ospite più comune è il browser, ma interpreti JavaScript possono essere trovati anche in Adobe Acrobat, Photoshop, motore Widget di Yahoo! , e addirittura in ambienti lato server o in desktop environment come GNOME (una delle GUI più popolari per i sistemi GNU/Linux) e altri ancora.

+ +

Panoramica

+ +

JavaScript è un linguaggio dinamico orientato agli oggetti; esso ha tipi e operatori, oggetti nucleo, e metodi. La sua sintassi deriva dai linguaggi Java e C, quindi molte strutture utilizzate da questi linguaggi ricorrono anche in JavaScript. Una delle differenze chiave è che JavaScript non ha classi; invece, la funzionalità di classe è realizzata dai prototipi oggetto. L'altra differenza principale è che le funzioni sono oggetti, dando alle funzioni la capacità di mantenere codice eseguibile ed essere passate in giro come ogni altro oggetto.

+ +

Cominciamo guardando il blocco di costruzione di qualsiasi linguaggio: i tipi. I programmmi JavaScript manipolano valori, e tutti quei valori appartengono ad un tipo. I tipi JavaScript sono:

+ + + +

... oh, e Undefined (indefiniti) e Null (nulli), che sono leggermente strani. E gli Array, che sono un tipo speciale di oggetto. E Date ed Espressioni regolari, che sono oggetti che si ottengono gratuitamente. E per essere tecnicamente precisi, le funzioni sono solo un tipo speciale di oggetto. Quindi il diagramma dei tipi somiglia più a questo:

+ +
    +
  • Numeri
    • +
  • Stringhe
    • +
  • Booleani
    • +
  • Oggetti +
      +
    • Funzioni
      • +
    • Array
      • +
    • Date
      • +
    • ExpReg
      • +
    +
    • +
  • Null
    • +
  • Undefined
    • +
+ +

E ci sono anche alcuni tipi nativi di Errori. Comunque, le cose sono molto più semplici se ci atteniamo al primo diagramma

+ +

Numeri

+ +

I numeri in JavaScript sono in formato 64-bit a doppia precisione valore del IEEE 754, secondo le specifiche. Questo ha qualche interessante conseguenza. Non esiste una cosa come un intero in JavaScript, quindi bisogna stare un pò attenti con la vostra aritmetica, se siete abituati alla matematica in C o Java. Stare attenti a cose come:

+ +
0.1 + 0.2 == 0.30000000000000004
+
+ +

In pratica, i valori interi sono trattati come int a 32-bit (e sono memorizzati in questo modo in alcune implementazioni dei browser), che può essere importante per operazioni in bit. Per dettagli, consulta La Guida Completa sui Numeri JavaScript.

+ +

Gli operatori numerici standard sono supportati, incluso addizione, sottrazione, modulo (o resto) aritmetico e così via. Vi sono anche oggetti nativi che non sono stati menzionati prima, chiamati Math per trattare funzioni matematiche più avanzate e costanti:

+ +
Math.sin(3.5);
+var d = Math.PI * r * r;
+
+ +

E' possibile convertire una stringa in un intero utilizzando la funzione nativa parseInt(). Questo prende la base per la conversione come secondo argomento opzionale, che si dovrebbe fornire sempre:

+ +
> parseInt("123", 10)
+123
+> parseInt("010", 10)
+10
+
+ +

Se non si fornisce la base, si possono ricevere risultati inattesi:

+ +
> parseInt("010")
+8
+
+ +

Questo succede perchè la funzione parseInt ha deciso di trattare la stringa come un ottale a causa del primo 0.

+ +

Se si vuole convertire un numero binario in un intero, basta cambiare la base:

+ +
> parseInt("11", 2)
+3
+
+ +

Similmente, è possibile analizzare numeri in virgola mobile usando la funzione nativa parseFloat() che utilizza sempre la base 10 diversamente dalla cugina parseInt().

+ +

E' inoltre possibile utilizzare l'operatore unario + per convertire valori in numeri:

+ +
> + "42"
+42
+
+ +

Un valore speciale chiamato NaN (abbreviazione per "Not a Number" - Non un Numero) viene restituita se la stringa non è numerica:

+ +
> parseInt("hello", 10)
+NaN
+
+ +

Il NaN è tossico: se viene fornito come input a qualsiasi operazione matematica, il risultato sarà anch'esso NaN:

+ +
> NaN + 5
+NaN
+
+ +

E' possibile verificare se NaN usando la funzione nativa isNaN():

+ +
> isNaN(NaN)
+true
+
+ +

Anche JavaScript ha i valori speciali Infinity e  -Infinity:

+ +
> 1 / 0
+Infinity
+> -1 / 0
+-Infinity
+
+ +

E' possibile analizzare i valori Infinity, -Infinity e NaN usando la funzione nativa isFinite():

+ +
> isFinite(1/0)
+false
+> isFinite(-Infinity)
+false
+> isFinite(NaN)
+false
+
+ +
Nota: Le funzioni parseInt() e parseFloat() analizzano una stringa finchè raggiungono un carattere che è non è valido per il formato numerico specificato, quindi restituiscono il numero analizzato fino a quel punto. Tuttavia l'operatore "+" converte semplicemente la stringa a NaN se è presente in essa qualche carattere invalido. E' sufficiente provare ad eseguire l'analisi della stringa "10.2abc" con ogni metodo da soli utilizzando la console e sarà possibile capire meglio le differenze.
+ +

Stringhe

+ +

Le stringhe in JavaScript sono sequenze di caratteri. Più precisamente, sono sequenze di Caratteri Unicode, con ogni carattere rappresentato da un numero a 16-bit. Questa dovrebbe essere una buona notizia per tutti coloro che hanno avuto a che fare con l'internazionalizzazione.

+ +

Se si vuole rappresentare un singolo carattere, occorre semplicemente utilizzare una stringa di lunghezza 1.

+ +

Per trovare la lunghezza di una stringa, accedere la sua proprietà length:

+ +
> "hello".length
+5
+
+ +

Ecco il nostro primo assaggio degli oggetti JavaScript! E' stato menzionato che le stringhe sono anch'esse oggetti? Ed hanno anche metodi:

+ +
> "hello".charAt(0)
+h
+> "hello, world".replace("hello", "goodbye")
+goodbye, world
+> "hello".toUpperCase()
+HELLO
+
+ +

Altri tipi

+ +

JavaScript distingue tra null, che è un oggetto di tipo 'object' che indica un mancanza deliberata di valore, e undefined, che è un oggetto di tipo 'undefined' che indica un valore non inizializzato — ossia un valore che non è stato ancora assegnato. Parleremo delle variabili più avanti, ma in JavaScript è possibile dichiarare una variabile senza assegnarle un valore. Facendo questo, il tipo della variabile creata sarà undefined.

+ +

JavaScript ha il tipo booleano, con possibili valori true (vero) e false (falso) (entrambi i quali sono parole chiave). Qualunque valore può essere convertito in booleano seguendo le seguenti regole:

+ +
    +
  1. false, 0, la stringa vuota (""), NaN, null, e undefined diventano tutti false
    2. +
  2. tutti gli altri valori diventano true
    3. +
+ +

E' possibile eseguire questa conversione esplicitamente usando la funzione Boolean():

+ +
> Boolean("")
+false
+> Boolean(234)
+true
+
+ +

Tuttavia, questo raramente è necessario, JavaScript eseguirà silenziosamente la conversione quando si aspetta un booleano, così come in una istruzione  if (vedi sotto). Per questa ragione, a volte si parla semplicemente di "valori veri" e "valori falsi" valori significativi che diventano true e false, rispettivamente, quando convertiti in booleani. In alternativa, tali valori possono essere chiamati "truthy" e "falsy", rispettivamente.

+ +

Le operazioni booleane come && (and logico), || (or logico), e ! (not logico) sono supportate; vedi sotto.

+ +

Variabili

+ +

Le nuove varibili sono dichiarate in JavaScript utilizzando la parola chiave var:

+ +
var a;
+var name = "simon";
+
+ +

Se la variabile viene dichiarata senza assegnarle un valore, il suo tipo sarà undefined. 

+ +

Una differenza importante rispetto ad altri linguaggi come Java è che in JavaScript, i blocchi non hanno ambito; solo le funzioni hanno ambito. Quindi se una variabile viene definita utilizzando var in una istruzione composta (ad esempio all'interno di una struttura di controllo if), essa sarà visibile da parte dell'intera funzione.

+ +

Operatori

+ +

Gli operatori numerici in JavaScript sono +, -, *, / e  % - che è l'operatore per il resto. I valori sono assegnanti usando =, e vi sono anche le istruzioni di assegnamento composte tipo += e -=. Questi comprimono la forma x = x operatore y.

+ +
x += 5
+x = x + 5
+
+ +

E' possibile utilizzare ++ e -- per incrementare e decrementare rispettivamente. Questi possono essere usati come operatori prefissi o postfissi.

+ +

L'operatore + compie anche la concatenazione di stringhe:

+ +
> "hello" + " world"
+hello world
+
+ +

Se si somma una stringa ad un numero (o ad un altro valore) tutto viene convertito dalla prima stringa. Questo esempio potrebbe aiutare a chiarire il tutto:

+ +
> "3" + 4 + 5
+345
+> 3 + 4 + "5"
+75
+
+ +

Sommare una stringa vuota ad un altro tipo è un utile maniera per convertirlo.

+ +

I confronti in JavaScript possono essere eseguiti usando <, >, <= e >=. Essi funzionano sia per le stringhe che per i numeri. L'uguaglianza è un pochino meno lineare. L'operatore di doppio uguale esegue la coercizione di tipo se viene eseguita tra tipi differenti, con a volte risultati interessanti:

+ +
> "dog" == "dog"
+true
+> 1 == true
+true
+
+ +

Per evitare la coercizione di tipo, si utilizza l'operatore triplo uguale:

+ +
> 1 === true
+false
+> true === true
+true
+
+ +

Vi sono anche gli operatori != e  !== .

+ +

JavaScript ha inoltre le operazioni bit per bit. Se si desidera utilizzarle, sono lì.

+ +

Strutture di controllo

+ +

JavaScript ha una serie di strutture di controllo simili agli altri linguaggi della famiglia del C. Le istruzioni condizionali sono supportate da if e else (se e altrimenti) che possono essere concatenati insieme se desiderato:

+ +
var name = "kittens";
+if (name == "puppies") {
+  name += "!";
+} else if (name == "kittens") {
+  name += "!!";
+} else {
+  name = "!" + name;
+}
+name == "kittens!!"
+
+ +

JavaScript ha il ciclo while ed il ciclo do-while. Il primo è utile per un ciclo basico; il secondo per i cicli che si vuole essere sicuri che vengano eseguiti almeno una volta:

+ +
while (true) {
+  // an infinite loop!
+}
+
+var input;
+do {
+  input = get_input();
+} while (inputIsNotValid(input))
+
+ +

Il ciclo for in JavaScript è lo stesso che in C e Java: esso permette di fornire le informazioni di controllo per il ciclo in una linea singola.

+ +
for (var i = 0; i < 5; i++) {
+  // Will execute 5 times
+}
+
+ +

Gli operatori &&(and logico) e ||(or logico) usano un corto-circuito logico, questo significa che quando vengono eseguiti il secondo operando è dipendente dal primo. Questo è utile per verificare oggetti nulli prima di accedere ai loro attributi:

+ +
var name = o && o.getName();
+
+ +

Oppure per impostare valori di default:

+ +
var name = otherName || "default";
+
+ +

JavaScript ha un operatore ternario per espressioni condizionali:

+ +
var allowed = (age > 18) ? "yes" : "no";
+
+ +

L'istruzione switch può essere utilizzata per più diramazioni sulla base di un numero o una stringa:

+ +
switch(action) {
+    case 'draw':
+        drawit();
+        break;
+    case 'eat':
+        eatit();
+        break;
+    default:
+        donothing();
+}
+
+ +

Se non viene inserita l'istruzione break, l'esecuzione "naufragherà" nel prossimo livello. Questo è raramente il risultato voluto — in realtà vale la pena in particolare inserire un etichettatura deliberatamente con un commento, se vi vuole aiutare il debug:

+ +
switch(a) {
+    case 1: // fallthrough
+    case 2:
+        eatit();
+        break;
+    default:
+        donothing();
+}
+
+ +

La clausula default è opzionale. Si possono avere espressioni sia nello switch sia che nel case se si vuole; i confronti avvengono tra i due con l'operatore ===:

+ +
switch(1 + 3) {
+    case 2 + 2:
+        yay();
+        break;
+    default:
+        neverhappens();
+}
+
+ +

Oggetti

+ +

Gli oggetti JavaScript sono semplicemente collezioni di coppie nome-valore. Come tali, essi sono simili a:

+ +
    +
  • Dizionari in Python
    • +
  • Hashes in Perl e Ruby
    • +
  • Hash tables in C e C++
    • +
  • HashMaps in Java
    • +
  • Array associativi in PHP
    • +
+ +

Il fatto che questa struttura dati è così diffusa è la prova della sua versatilità. Dal momento che tutto (barra i tipi base) in JavaScript è un oggetto, qualunque programma JavaScript implica naturalmente un grande ricorso alla ricerca nelle tabelle hash. E' buona cosa che siano così veloci!

+ +

La parte "name" è una stringa JavaScript, mentre il valore può essere qualunque valore JavaScript — incluso più oggetti. Questo permette di costruire strutture dati di complessità arbitraria.

+ +

Ci sono due modalità di base per creare un oggetto vuoto:

+ +
var obj = new Object();
+
+ +

E:

+ +
var obj = {};
+
+ +

Entrambe sono semanticamente equivalenti; la seconda è chiamata sintassi letterale dell'oggetto, ed è più conveniente. Questa sintassi è anche la base del formato JSON e dovrebbe essere preferita ogni volta.

+ +

Una volta creato si può accedere alle proprietà di un oggetto in una o due modalità:

+ +
obj.name = "Simon";
+var name = obj.name;
+
+ +

E...

+ +
obj["name"] = "Simon";
+var name = obj["name"];
+
+ +

Anche queste sono semanticamente equivalenti. Il secondo metodo ha il vantaggio che il nome della proprietà viene fornito come stringa, che significa che può essere calcolato durante l'esecuzione e l'utilizzo di questo metodo evita che siano applicate ottimizzazioni del motore JavaScript e minifier. Può essere inoltre usato per impostare o ottenere proprietà con nomi che sono parole riservate:

+ +
obj.for = "Simon"; // Syntax error, because 'for' is a reserved word
+obj["for"] = "Simon"; // works fine
+
+ +

La sintassi dell'oggetto letterale può essere usata per inizializzare un oggetto nella sua interezza:

+ +
var obj = {
+    name: "Carrot",
+    "for": "Max",
+    details: {
+        color: "orange",
+        size: 12
+    }
+}
+
+ +

Attributi di accesso possono essere concatenati:

+ +
> obj.details.color
+orange
+> obj["details"]["size"]
+12
+
+ +

Array (matrici)

+ +

Gli array in JavaScript sono un tipo speciale di oggetto. Essi funzionano in modo molto simile agli oggetti regolari (si può accedere alle proprietà numeriche solo usando la sintassi []) ma hanno una proprietà magica chiamata 'length'. Questa è sempre uno in più dell'indice massimo dell'array.

+ +

Il vecchio metodo per creare un array è il seguente:

+ +
> var a = new Array();
+> a[0] = "dog";
+> a[1] = "cat";
+> a[2] = "hen";
+> a.length
+3
+
+ +

Una notazione più conveniente è l'utilizzo di una array letterale:

+ +
> var a = ["dog", "cat", "hen"];
+> a.length
+3
+
+ +

Lasciare una virgola finale al termine di un array letterale è incompatibile tra i browser, quindi non fatelo.

+ +

Nota che array.length non è necessariamente il numero di elementi nell'array. Considera il seguente esempio:

+ +
> var a = ["dog", "cat", "hen"];
+> a[100] = "fox";
+> a.length
+101
+
+ +

Ricorda — la lunghezza dell'array è uno più dell'indice più alto.

+ +

Se si interroga un indice dell'array inesistente, la risposta sarà undefined:

+ +
> typeof a[90]
+undefined
+
+ +

Se si prende in considerazione quanto sopra, è possibile scorrere un array utilizzando le istruzioni seguenti:

+ +
for (var i = 0; i < a.length; i++) {
+    // Do something with a[i]
+}
+
+ +

Questo è un po' inefficiente, poichè si ricerca la proprietà length una volta ogni ciclo. Un possibile miglioramento è questo:

+ +
for (var i = 0, len = a.length; i < len; i++) {
+    // Do something with a[i]
+}
+
+ +

Un modo ancora più simpatico è questo:

+ +
for (var i = 0, item; item = a[i++];) {
+    // Do something with item
+}
+
+ +

Qui si stanno impostando due variabili. L'assegnamento nella parte centrale del ciclo for è anche verificato per veridicità — se ha successo, il ciclo continua. Siccome i viene incrementato ogni volta, gli elementi dalla matrice saranno assegnati all'elemento in ordine sequenziale. Il ciclo termina quando viene trovato un elemento "falso" (come un undefined).

+ +

Nota che questo trucco dovrebbe essere usato solo per gli array che sappiamo non contengano valori "falsi" (array di oggetti o nodi del DOM per esempio). Se si effettua l'iterazione dei dati numerici che potrebbero includere uno 0, o dati stringa che potrebbero includere la stringa vuota, è necessario utilizza l'idioma i, len in sostituzione.

+ +

Un altro modo per iterare è di utilizzare il ciclo for...in. Nota che se vengono aggiunte nuove proprietà all' Array.prototype, saranno anch'esse iterate da questo ciclo:

+ +
for (var i in a) {
+  // Do something with a[i]
+}
+
+ +

Se si vuole accodare un elemento all'array, la maniera più sicura per farlo è questa:

+ +
a[a.length] = item;                 // same as a.push(item);
+
+ +

Poichè a.length è uno in più dell'indice più alto, si può essere sicuri che l'elemento sarà assegnato ad una posizione vuota alla fine dell'array.

+ +

Gli arrays nascono con alcuni metodi:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Method nameDescription
a.toString()
a.toLocaleString()
a.concat(item[, itemN])Restituisce un nuovo array con gli elementi aggiunti ad esso.
a.join(sep)
a.pop()Rimuove e restituisce l'ultimo elemento.
a.push(item[, itemN])Push aggiunge uno o più elementi alla fine.
a.reverse()
a.shift()
a.slice(start, end)Restituisce un sub-array.
a.sort([cmpfn])Riceve una funzione di comparazione opzionale.
a.splice(start, delcount[, itemN])Permette di modificare un array cancellando una sezione e sostituendola con più elementi.
a.unshift([item])Antepone elementi all'inizio dell'array
+ +

Funzioni

+ +

Insieme con gli oggetti, le funzioni sono la componente principale nella comprensione di JavaScript. La funzione più elementare non potrebbe essere molto più semplice:

+ +
function add(x, y) {
+    var total = x + y;
+    return total;
+}
+
+ +

Ciò dimostra tutto quello che c'è da sapere sulle funzioni di base. Una funzione JavaScript può ricevere 0 (zero) o più parametri. Il corpo della funzione può contenere tutte le istruzioni che si desidera, e può dichiarare le proprie variabili che saranno locali alla stessa. L'istruzione return può essere usata per restituire un valore in qualsiasi momento, terminando la funzione. Se non viene utilizzata l'istruzione return (oppure viene restituito un valore vuoto o indefinito), JavaScript restituisce undefined.

+ +

I parametri denominati risultano più simili alle linee guida di ogni altra cosa. È possibile chiamare una funzione senza passare i parametri che si aspetta, nel qual caso saranno impostati su undefined.

+ +
> add()
+NaN // You can't perform addition on undefined
+
+ +

È anche possibile passare più argomenti di quelli che la funzione si aspetta:

+ +
> add(2, 3, 4)
+5 // added the first two; 4 was ignored
+
+ +

Questo può sembrare un po' sciocco, ma le funzioni hanno accesso a una variabile aggiuntiva all'interno del loro corpo chiamata argomenti, che è un oggetto simil array che detiene tutti i valori passati alla funzione. Riscriviamo la funzione somma per ricevere tutti i valori che vogliamo:

+ +
function add() {
+    var sum = 0;
+    for (var i = 0, j = arguments.length; i < j; i++) {
+        sum += arguments[i];
+    }
+    return sum;
+}
+
+> add(2, 3, 4, 5)
+14
+
+ +

Questo, però, non è realmente più utile che scrivere 2 + 3 + 4 + 5. Creiamo una funzione per il calcolo della media:

+ +
function avg() {
+    var sum = 0;
+    for (var i = 0, j = arguments.length; i < j; i++) {
+        sum += arguments[i];
+    }
+    return sum / arguments.length;
+}
+> avg(2, 3, 4, 5)
+3.5
+
+ +

Questa è piuttosto utile, ma introduce un nuovo problema. La funzione avg() riceve una lista di argomenti separati da una virgola — ma cosa succede se si vuole trovare la media di un array? Si potrebbe semplicemente riscrivere la funzione come segue:

+ +
function avgArray(arr) {
+    var sum = 0;
+    for (var i = 0, j = arr.length; i < j; i++) {
+        sum += arr[i];
+    }
+    return sum / arr.length;
+}
+> avgArray([2, 3, 4, 5])
+3.5
+
+ +

Ma sarebbe bello essere in grado di riutilizzare la funzione che abbiamo già creato. Fortunatamente, JavaScript permette di chiamare una funzione e di chiamarla con un array arbitrario di argomenti, usando il metodo apply() di qualunque oggetto di funzione.

+ +
> avg.apply(null, [2, 3, 4, 5])
+3.5 is the array to use as arguments; the first will be discussed later on. This emphasizes the fact that functions are objects too.
+
+ +

JavaScript permette la creazione di funzioni anonime.

+ +
var avg = function() {
+    var sum = 0;
+    for (var i = 0, j = arguments.length; i < j; i++) {
+        sum += arguments[i];
+    }
+    return sum / arguments.length;
+}
+
+ +

Questa è semanticamente equivalente alla forma function avg(). Essa è estremamente potente, in quando consente di definire una funzione ovunque si possa normalmente inserire un espressione. Questo consente ogni sorta di trucco intelligente. Ecco un modo di "nascondere" alcune variabili locali - come in un ambito di blocco in C:

+ +
> var a = 1;
+> var b = 2;
+> (function() {
+    var b = 3;
+    a += b;
+})();
+> a
+4
+> b
+2
+
+ +

JavaScript consente di chiamare le funzioni in modo ricorsivo. Ciò è particolarmente utile per affrontare le strutture ad albero, come ad esempio nel DOM del browser.

+ +
function countChars(elm) {
+    if (elm.nodeType == 3) { // TEXT_NODE
+        return elm.nodeValue.length;
+    }
+    var count = 0;
+    for (var i = 0, child; child = elm.childNodes[i]; i++) {
+        count += countChars(child);
+    }
+    return count;
+}
+
+ +

Questo mette in evidenza un potenziale problema con le funzioni anonime: come fare a richiamarle ricorsivamente se non hanno un nome? La risposta si trova con l'oggetto arguments, che oltre ad agire come una lista di argomenti, fornisce anche una propietà chiamata arguments.callee. L'uso della arguments.callee è deprecato e anche disabilitato nel modo strict (rigoroso). In sostituzione si devono utilizzare le "funzioni anonime nominate" come di seguito:

+ +
var charsInBody = (function counter(elm) {
+    if (elm.nodeType == 3) { // TEXT_NODE
+        return elm.nodeValue.length;
+    }
+    var count = 0;
+    for (var i = 0, child; child = elm.childNodes[i]; i++) {
+        count += counter(child);
+    }
+    return count;
+})(document.body);
+
+ +

Il nome fornito a una funzione anonima come sopra è (o almeno dovrebbe essere) disponibile solo nell'ambito stesso della funzione. Questo consente sia più ottimizzazioni da svolgere da parte del motore sia un codice più leggibile.

+ +

Oggetti personalizzati

+ +
Nota: Per una discussione più dettagliata della programmazione orientata agli oggetti, vedi Introduzione a JavaScript Orientato agli Oggetti.
+ +

Nella programmazione Object Oriented classica, gli oggetti sono collezioni di dati e metodi che operano su quei dati. JavaScript è un linguaggio basato su prototipi e non contiene l'istruzione classe, così come si trova in C++ o Java. (Questo a volte è fonte di confusione per i programmatori abituati ai linguaggi con una dichiarazione di classe.) Al suo posto, JavaScript usa le funzioni come classi. Consideriamo un oggetto persona con i campi nome e cognome. Ci sono due modi di visualizzare il nominativo: come  "nome cognome" o come "cognome, nome". Usando le funzioni e gli oggetti che abbiamo visto in precedenza, ecco un modo di ottenere il risultato voluto:

+ +
function makePerson(first, last) {
+    return {
+        first: first,
+        last: last
+    }
+}
+function personFullName(person) {
+    return person.first + ' ' + person.last;
+}
+function personFullNameReversed(person) {
+    return person.last + ', ' + person.first
+}
+> s = makePerson("Simon", "Willison");
+> personFullName(s)
+Simon Willison
+> personFullNameReversed(s)
+Willison, Simon
+
+ +

Questo funziona, ma è piuttosto brutto. Si finisce con dozzine di funzioni nel namespace globale. Ciò di cui abbiamo veramente bisogno è un modo per associare una funzione ad un oggetto. Dal momento che le funzioni sono oggetti, questo è facile:

+ +
function makePerson(first, last) {
+    return {
+        first: first,
+        last: last,
+        fullName: function() {
+            return this.first + ' ' + this.last;
+        },
+        fullNameReversed: function() {
+            return this.last + ', ' + this.first;
+        }
+    }
+}
+> s = makePerson("Simon", "Willison")
+> s.fullName()
+Simon Willison
+> s.fullNameReversed()
+Willison, Simon
+
+ +

Vi è qualcosa che non abbiamo visto prima: la parola chiave 'this'. Usata dentro una funzione, 'this' si riferisce all'oggetto corrente. Che cosa significa in realtà è specificato dal modo in cui è stata chiamata tale funzione. Se è stata chiamata usando la notazione col punto o la notazione con le parentesi su un oggetto, questo oggetto diventa 'this'. Se la notazione col punto non è stata usata per la chiamata, 'this' si riferisce all'oggetto globale. Questa è una causa di errori frequente. Ad esempio:

+ +
> s = makePerson("Simon", "Willison")
+> var fullName = s.fullName;
+> fullName()
+undefined undefined
+
+ +

Quando chiamiamo fullName(), 'this' è legata all'oggetto globale. Dato che non ci sono variabili globali chiamate first o last riceviamo undefined per ognuna delle due.

+ +

Possiamo prendere il vantaggio della parola chiave 'this' per migliorare la nostra funzione makePerson:

+ +
function Person(first, last) {
+    this.first = first;
+    this.last = last;
+    this.fullName = function() {
+        return this.first + ' ' + this.last;
+    }
+    this.fullNameReversed = function() {
+        return this.last + ', ' + this.first;
+    }
+}
+var s = new Person("Simon", "Willison");
+
+ +

Abbiamo introdotto un'altra parola chiave: 'new'. new è fortemente correlata a 'this'. Quello che fa è creare un oggetto vuoto nuovo di zecca e quindi chiamare la funzione specificata, con 'this' impostato sul nuovo oggetto. Le funzioni che sono disegnate per essere richiamate dalla 'new' sono chiamate costruttori. La pratica comune è di nominare queste funzioni con la prima lettera maiuscola in modo da ricordarsi di chiamarle con il new.

+ +

I nostri oggetti persona stanno migliorando, ma vi sono ancora alcuni lati brutti in loro. Ogni volta che si crea un oggetto persona, stiamo creando due nuovi oggetti funzione all'interno di esso - non sarebbe meglio se il codice fosse stato condiviso?

+ +
function personFullName() {
+    return this.first + ' ' + this.last;
+}
+function personFullNameReversed() {
+    return this.last + ', ' + this.first;
+}
+function Person(first, last) {
+    this.first = first;
+    this.last = last;
+    this.fullName = personFullName;
+    this.fullNameReversed = personFullNameReversed;
+}
+
+ +

Così va meglio: stiamo creando i metodi della funzione una sola volta, e assegnando ad essi i riferimenti all'interno del costruttore. Possiamo fare di meglio? La risposta è sì:

+ +
function Person(first, last) {
+    this.first = first;
+    this.last = last;
+}
+Person.prototype.fullName = function() {
+    return this.first + ' ' + this.last;
+}
+Person.prototype.fullNameReversed = function() {
+    return this.last + ', ' + this.first;
+}
+
+ +

Person.prototype è un oggetto condiviso da tutte le istanze di Person. Essa fa parte di una catena di ricerca (che ha un nome speciale, "catena di prototipi"): ogni volta che si tenta di accedere ad una proprietà di Person che non è impostata, JavaScript controllerà Person.prototype per vedere se quella proprietà esiste al suo interno. Come risultato, qualsiasi valore assegnato a Person.prototype diventa disponibile a tutte le istanze del costruttore per mezzo dell'oggetto this.

+ +

Si tratta di uno strumento incredibilmente potente. JavaScript consente di modificare il prototipo di qualcosa in qualsiasi momento nel programma, il che significa che è possibile aggiungere metodi extra per gli oggetti esistenti in fase di esecuzione:

+ +
> s = new Person("Simon", "Willison");
+> s.firstNameCaps();
+TypeError on line 1: s.firstNameCaps is not a function
+> Person.prototype.firstNameCaps = function() {
+    return this.first.toUpperCase()
+}
+> s.firstNameCaps()
+SIMON
+
+ +

È interessante notare che è anche possibile aggiungere le cose al prototipo degli oggetti nativi JavaScript. Aggiungiamo un metodo a String che restituisca la stringa al contrario:

+ +
> var s = "Simon";
+> s.reversed()
+TypeError on line 1: s.reversed is not a function
+> String.prototype.reversed = function() {
+    var r = "";
+    for (var i = this.length - 1; i >= 0; i--) {
+        r += this[i];
+    }
+    return r;
+}
+> s.reversed()
+nomiS
+
+ +

Il nostro nuovo metodo funziona anche con le stringhe letterali!

+ +
> "This can now be reversed".reversed()
+desrever eb won nac sihT
+
+ +

Come detto prima, il prototipo fa parte di una catena. La radice di questa catena è Object.prototype, i cui metodi includono toString() — è questo metodo che viene chiamato quando si tenta di rappresentare un oggetto come una stringa. Questo è utile per verificare il nostro oggetto Person:

+ +
> var s = new Person("Simon", "Willison");
+> s
+[object Object]
+> Person.prototype.toString = function() {
+    return '<Person: ' + this.fullName() + '>';
+}
+> s
+<Person: Simon Willison>
+
+ +

Ricordate come avg.apply() aveva un primo argomento nullo? Possiamo riesaminarlo adesso. Il primo argomento di apply() è l'oggetto che dovrebbe essere trattato come 'this'. Per esempio, qui una semplice implementazione di 'new':

+ +
function trivialNew(constructor) {
+    var o = {}; // Create an object
+    constructor.apply(o, arguments);
+    return o;
+}
+
+ +

Questa non è un'esatta replica di new in quanto non imposta la catena del prototipo (sarebbe difficile da illustrare). Non è una cosa che si usa molto spesso, ma è utile conoscerla. In questo snippet, ...args (puntini inclusi) è chiamato il "rest arguments" – come indicato dal nome, e contiene il resto degli argomenti. Per ora, questa "feature" è sperimentale e solo disponibile in Firefox; è raccomandato attaccare gli arguments per ora.

+ +

Chiamare

+ +
var bill = trivialNew(Person, "William", "Orange");
+ +
+ +

è dunque quasi equivalente a

+ +
var bill = new Person("William", "Orange");
+ +
+ +

apply() ha una funzione sorella dal nome call, che di nuovo ti consente di impostare 'this' ma prende una lista espansa di argomenti invece che un array.

+ +
function lastNameCaps() {
+    return this.last.toUpperCase();
+}
+var s = new Person("Simon", "Willison");
+lastNameCaps.call(s);
+// Is the same as:
+s.lastNameCaps = lastNameCaps;
+s.lastNameCaps();
+
+ +

Inner functions

+ +

In JavaScript è consentito dichiarare una funzione all'interno di un'altra funzione. Lo abbiamo già visto prima, nel caso della precedente funzione makePerson(). Un dettaglio importante di funzioni innestate in JavaScript è che esse possono accedere alle variabili della funzione di livello superiore:

+ +
function betterExampleNeeded() {
+    var a = 1;
+    function oneMoreThanA() {
+        return a + 1;
+    }
+    return oneMoreThanA();
+}
+
+ +

Ciò è di grande utilità per scrivere codice più manutenibile. Se una funzione dipende da una o due altre funzioni che non sono usate in nessuna altra parte del tuo codice, è possibile nidificare quelle funzioni di utilità dentro la funzione che sarà chiamata dall'esterno. Questo riduce il numero di funzioni che si trovano nel "global scope", che è sempre una buona cosa.

+ +

Questa è anche una grande cosa contro il richiamo di variabili globali. Quando si scrive codice complesso si è spesso tentati di usare variabili globali per condividere i valori tra più funzioni — e ciò rende il codice difficile da manutenere. Le funzioni nidificate possono condividere le variabili della funzione padre, così è possibile usare questo meccanismo per accoppiare le funzioni quando serve, senza contaminare il tuo namespace globale — rendi locali le variabili globali per piacere. Questa tecnica dovrebbe essere usata con parsimonia, ma è una capacità utile da avere.

+ +

Closures

+ +

Questo ci porta ad una delle più potenti astrazioni che JavaScript ha da offrire — ma anche quella che può generare più confusione. Cosa fa questo codice sotto?

+ +
function makeAdder(a) {
+    return function(b) {
+        return a + b;
+    }
+}
+x = makeAdder(5);
+y = makeAdder(20);
+x(6)
+?
+y(7)
+?
+
+ +

Il nome della funzione makeAdder dovrebbe essere esplicito: essa può creare delle nuove funzioni 'adder', che, se chiamate con un determinato argomento, lo addizionano all'argomento con il quale sono state create.

+ +

Quello che sta avvenendo qui è praticamente la stessa cosa vista precedentemente con le "inner functions": una funzione definita dentro un'altra funzione ha accesso alle variabili della funzione esterna. La sola differenza è che in questo caso la funzione esterna ha già restituito il suo risultato, e quindi il senso comune sembrerebbe indicare che le sue variabili locali non siano più disponibili. Ma esse esistono ancora — altrimenti le funzioni "adder" non sarebbero capaci di lavorare. Quello che c'è di più è che ci sono due "copie" differenti delle variabili locali di makeAdder — una nella quale a è 5 e una nella quale a è 20. Così il risultato di quelle chiamate di funzione è il seguente:

+ +
x(6) // returns 11
+y(7) // returns 27
+
+ +

Ecco cosa sta effettivamente avvenendo. Quando JavaScript esegue una funzione, viene creato un oggetto con il proprio ambito di visibilità ('scope object') per trattenere le variabili locali di quella funzione. Esso è inizializzato con tutte le variabili passate in ingresso alla funzione come parametri. Ciò è simile all'oggetto globale in cui si trovano tutte le variabili globali e le funzioni, ma con una paio di differenze importanti: primo, un nuovo 'scope object' etichettato è creato ogni volta che una funzione inizia l'esecuzione, e secondo, a differenza dell'oggetto globale (che nei bowser è accessibile come 'window') non si può accedere direttamente a questi 'scope object' dal tuo codice JavaScript. Ad esempio non c'è nessun meccanismo per iterare sulle proprietà dello 'scope object' corrente.

+ +

Quindi, quando makeAdder è chiamato viene creato un oggetto scope con una proprietà: a, che è l'argomento passato alla funzione makeAdder . A questo punto makeAdder restituisce quindi una funzione appena creata. Normalmente il raccoglitore di rifiuti  di JavaScript eliminerebbe l'oggetto scope creato per makeAdder , ma la funzione restituita mantiene un riferimento a tale oggetto scope. Di conseguenza l'oggetto scope non verrà eliminato finchè non ci saranno più riferimenti all'oggetto che la funzione makeAdder restituisce.

+ +

Gli oggetti scope formano una catena chiamata 'scope chain', simile alla catena di prototipi, 'prototype chain', del sistema a oggetti di JavaScript.

+ +

Una closure è la combinazione di una funzione e dell'oggetto scope in cui è stata creata.

+ +

Le closures ti consentono di salvare lo stato e in quanto tali, possono spesso essere utilizzate al posto degli oggetti. Puoi trovare alcune eccellenti introduzioni alle closures (in lingua inglese).

+ +

Memory leaks

+ +
 Uno sfortunato effetto collaterale delle chiusure è il rendere facile perdere memoria
+ su Internet Explorer. JavaScript alloca gli oggetti nella memoria al momento della loro
+ creazione e tale memoria viene recuperata dal browser quando non rimangono riferimenti a un
+ oggetto.
+ Gli oggetti forniti dall'host vengono gestiti da quell'ambiente.
+
+ Gli host del browser devono gestire un gran numero di oggetti che rappresentano
+ la pagina HTML presentata: gli oggetti del DOM. Spetta al browser gestire l'assegnazione e
+ il recupero di questi.
+
+ Internet Explorer utilizza il proprio schema di raccolta dei rifiuti per questo,
+ separato dal meccanismo utilizzato da JavaScript.
+ È l'interazione tra i due che può causare perdite di memoria.
+
+Una perdita di memoria in IE si verifica ogni volta che viene formato un riferimento circolare
+tra un oggetto JavaScript e un oggetto nativo. Considera quanto segue:
+ +
function leakMemory() {
+    var el = document.getElementById('el');
+    var o = { 'el': el };
+    el.o = o;
+}
+
+ +

Il riferimento circolare formato sopra crea una perdita di memoria;

+ +

IE non libererà la memoria utilizzata da el fino al completo riavvio del browser. Il caso di cui sopra rischia di passare inosservato; le perdite di memoria diventano un problema reale solo nelle applicazioni a esecuzione prolungata o nelle applicazioni che perdono grandi quantità di memoria a causa di grandi strutture di dati o schemi di perdite all'interno dei loop. Le perdite sono raramente così ovvie: spesso la struttura dei dati trapelati può avere molti livelli di riferimenti, oscurando il riferimento circolare. Le chiusure rendono facile creare una perdita di memoria senza volerlo. Considera questo:

+ +
function addHandler() {
+    var el = document.getElementById('el');
+    el.onclick = function() {
+        this.style.backgroundColor = 'red';
+    }
+}
+
+ +

Il codice precedente imposta l'elemento in modo che diventi rosso quando viene cliccato. Crea anche una perdita di memoria. Perché? Perché il riferimento a el è inavvertitamente catturato nella chiusura creata per la funzione interna anonima. Questo crea un riferimento circolare tra un oggetto JavaScript (la funzione) e un oggetto nativo (el).

+ +
needsTechnicalReview();
+
+ +

Esistono numerose soluzioni per questo problema. Il più semplice è non usare la variabile el:

+ +
function addHandler(){
+    document.getElementById('el').onclick = function(){
+        this.style.backgroundColor = 'red';
+    }
+}
+
+ +

Sorprendentemente, un trucco per rompere i riferimenti circolari introdotti da una chiusura è aggiungere un'altra chiusura:

+ +
function addHandler() {
+    var clickHandler = function() {
+        this.style.backgroundColor = 'red';
+    };
+    (function() {
+        var el = document.getElementById('el');
+        el.onclick = clickHandler;
+    })();
+}
+
+ +

La funzione interna viene eseguita immediatamente, e nasconde il suo contenuto dalla chiusura creata con clickHandler. Un altro buon trucco per evitare le chiusure è rompere i riferimenti circolari durante l'evento window.onunload. Molte librerie di eventi lo faranno per te. Nota che così facendo si disabilita bfcache in Firefox 1.5, quindi non dovresti registrare un listener di scaricamento in Firefox, a meno che tu non abbia altri motivi per farlo.

+ +
+

Original Document Information

+ +
    +
  • Author: Simon Willison
    • +
  • Last Updated Date: March 7, 2006
    • +
  • Copyright: © 2006 Simon Willison, contributed under the Creative Commons: Attribute-Sharealike 2.0 license.
    • +
  • More information: For more information about this tutorial (and for links to the original talk's slides), see Simon's Etech weblog post.
    • +
+
diff --git a/files/it/web/javascript/about_javascript/index.html b/files/it/web/javascript/about_javascript/index.html new file mode 100644 index 0000000000..c850023b92 --- /dev/null +++ b/files/it/web/javascript/about_javascript/index.html @@ -0,0 +1,57 @@ +--- +title: Cos'è JavaScript +slug: Web/JavaScript/Cosè_JavaScript +translation_of: Web/JavaScript/About_JavaScript +--- +
{{JsSidebar}}
+ +

Cos'è JavaScript?

+ +

JavaScript® (spesso abbreviato con JS) è un linguaggio di programmazione, interpretato, orientato agli oggetti  con  first-class functions,  ed è meglio conosciuto come linguaggio di scripting client-side per pagine web, nonostante questo è anche utilizzato in molte applicazioninon solamente basate sul web. Il linguaggio è prototype-based,  è  dinamico, imperativo, e il offre uno stile di programmazione funzionale.

+ +

JavaScript viene eseguito direttamente lato "client-side" della pagina web e può essere utilizzato per dare un design e stabilire il comportamento delle pagine web quando viene scatenato una particolare evento da parte dell'utente. JavaScript è semplice da apprendere e nello stesso tempo rappresenta un linguaggio che permette un controllo quasi totale sulla pagina web.

+ +

Contrariamente alla concezione popolare, JavaScript non è "Java Interpretato". JavaScript è un linguaggio di scripting dinamico che supporta la costruzione degli oggetti basata su prototype. La sintassi base è intenzionalmente basata su entrambi i maggiori e più conosciuti linguaggi, C++ e Java e questo ha permesso la riduzione di nuovi concetti per lo studio del linguaggio. Costrutti del linguaggio come if, cicli for e  while, switch e blocchi try ... catch hanno il medesimo significato in questi linguaggi.

+ +

JavaScript permette di programmare sia in modo procedurale sia in orientato agli oggetti. Gli oggetti vengono creati a livello di programmazione in JavaScript, allegando metodi e proprietà agli oggetti altrimenti vuoti in fase di esecuzione, in contrasto con le definizioni di classe sintattiche comuni linguaggi compilati come C ++ e Java. Una volta che un oggetto è stato costruito può essere utilizzato come modello (o prototipo) per creare oggetti simili.

+ +

JavaScript permette la costruzione a runtime di oggetti, elenchi di parametri, funzioni come variabili, pemette la creazione di script dinamici (tramite eval), permette di esaminare a runtime tipo e proprietà di un oggetto (tramite for ... in), e il recupero del codice sorgente ( i programmi JavaScript possono decompilare parti di funzione e mostrarne il codice sorgente all'interno del codice sorgente stesso).

+ +

Per una più esaustiva trattazione del linguaggio JavaScript consulta il seguente link JavaScript resources.

+ +

Quali implementazioni del linguaggio JavaScript sono disponibili?

+ +

Il progetto Mozilla fornisce due implementazioni JavaScript. Il primo JavaScript è stato creato da Brendan Eich a Netscape, e da allora è stato aggiornato per conformarsi alle ECMA-262 Edition 5 e versioni successive. Questo motore, nome in codice SpiderMonkey, è implementato in C / C ++. Il motore di Rhino, creati principalmente da Norris Boyd (anche lui a Netscape) è una implementazione JavaScript scritto in Java. Come SpiderMonkey, Rhino è ECMA-262 Edition 5 compatibile.

+ +

Diverse ed importanti ottimizzazioni sono state aggiunte, come TraceMonkey (Firefox 3.5), JägerMonkey (Firefox 4) e IonMonkey al motore SpiderMonkey JavaScript nel corso del tempo. Il lavoro è sempre in corso per migliorare le prestazioni di esecuzione di JavaScript.

+ +

Oltre alle implementazioni di cui sopra, ci sono molti altri popolari motori JavaScript, quali: -

+ +
    +
  • V8 di Google, che viene utilizzato nel browser Google Chrome e nelle versioni recenti del browser Opera. V8 è anche il motore utilizzato per Node.js.
    • +
  • JavaScriptCore(SquirrelFish / Nitro) utilizzato in alcuni browser WebKit, come Safari di Apple.
    • +
  • Carakan nelle vecchie versioni di Opera.
    • +
  • Chakra utilizzato in Internet Explorer (anche se il linguaggio che implementa è formalmente chiamato "JScript" al fine di evitare problemi legati al marchio).
    • +
+ +

Ognuno dei motori JavaScript di Mozilla espone una API pubblica per gli sviluppatori e questa viene utilizzata per integrare JavaScript nella loro software. Di gran lunga, l'ambiente host più comune per JavaScript e lo stesso browser web. I browser Web utilizzano in genere l'API pubblica di JavaScript per la gestione e la visualizzazione della struttura DOM delle pagine web.

+ +

Un'altra applicazione comune  per cui possiamo utilizzare JavaScript è come linguaggio di scripting lato server. Un server web JavaScript esporrebbe oggetti  che rappresentano una richiesta HTTP e oggetti di risposta, che possono successivamente essere manipolati da un programma JavaScript per generare dinamicamente pagine web. Node.js è un esempio popolare di questo.

+ +

Risorse JavaScript

+ +
+
SpiderMonkey
+
Informazioni specifiche riguardanti l'implementazione del motore scritto in C / C ++ (aka SpiderMonkey), compreso il modo di incorporare nelle applicazioni.
+
+ +
+
Rhino
+
Informazioni specifiche riguardanti l'implementazione del motore scritto in Java (aka Rhino).
+
Risorse sul linguaggio
+
Informazioni sugli standard del linguaggio JavaScript.
+
Re-Introduzione a JavaScript
+
Guida JavaScript e JavaScript Reference.
+
+ +

JavaScript® è un marchio registrato di Oracle negli U.S. e in altri paesi.

diff --git a/files/it/web/javascript/chiusure/index.html b/files/it/web/javascript/chiusure/index.html deleted file mode 100644 index deee56e54b..0000000000 --- a/files/it/web/javascript/chiusure/index.html +++ /dev/null @@ -1,345 +0,0 @@ ---- -title: Chiusure -slug: Web/JavaScript/Chiusure -translation_of: Web/JavaScript/Closures ---- -
{{jsSidebar("Intermediate")}}
- -
- -

Una closure è la combinazione di una funzione e dello stato nella quale è stata creata (ambito lessicale). In altre parole, una closure consente a una funzione interna di accedere allo scope della funzione che la racchiude. In Javascript le closure sono create ogni volta che una funzione viene creata, al momento della creazione della funzione stessa.

- -

Lexical scoping

- -

Considerate la seguente:

- -
-
function init() {
-  var name = "Mozilla"; // name è una variabile locale creata da init
-  function displayName() { // displayName() è una funzione interna, una chiusura
-    alert(name); // utilizza la variabile dichiarata nella funzione padre
-  }
-  displayName();
-}
-init();
-
- -

init() crea una variabile locale name e poi una funzione chiamata displayName(). displayName() è una funzione interna che è definita dentro init() ed è disponibile solo all'interno del corpo di quella funzione. displayName() non ha proprie variabili locali. Tuttavia, poiché le funzioni interne hanno accesso alle variabili di quelle esterne, displayName() può accedere alla variabile name dichiarata nella funzione genitore, init() Tuttavia verrebbero usate le variabili locali in displayName(), se esistessero.

- -

{{JSFiddleEmbed("https://jsfiddle.net/78dg25ax/", "js,result", 200)}}

- -

Esegui il codice e verifica che funziona. Questo è un esempio di lexical scoping: in JavaScript, la visibilità (scope) di una variabile è definita dalla sua posizione all'interno del codice sorgente (si evince dal codice stesso [lexically]) e le funzioni innestate hanno accesso a variabili dichiarate nella funzione esterna (outer scope).

- -

Closure

- -

Considerate ora l'esempio seguente:

- -
function makeFunc() {
-  var name = "Mozilla";
-  function displayName() {
-    alert(name);
-  }
-  return displayName;
-}
-
-var myFunc = makeFunc();
-myFunc();
-
- -

L'esecuzione di questo codice ha esattamente lo stesso effetto dell'esempio precedente della funzione init():  la stringa "Mozilla" verrà visualizzata in una casella di avviso JavaScript. La cosa differente ed interessante, è che la funzione interna displayName() viene restituita dalla funzione esterna prima di essere eseguita.

- -

A un primo sguardo sembrerebbe controintuitivo che il codice funzioni ancora. In alcuni linguaggi di programmazione le variabili locali interne a una funzione esistono solo per la durata dell'esecuzione della funzione stessa. Una volta che makeFunc() ha terminato la propria esecuzione, ci si potrebbe aspettare che la variabile name non sia più accessibile. Tuttavia, poiché il codice funziona ancora, è ovvio che in JavaScript non è il caso.

- -

La ragione è che le funzioni in JavaScript formano closures. Una closure è la combinazione di una funzione e dell'ambito lessicale in cui questa funzione è stata dichiarata. In questo caso, myFunc è un riferimento all'istanza della funzione displayName creata quando makeFunc è eseguita.

- -

La soluzione di questo rompicampo è che myFunc è diventata una closure. Una closure è uno speciale tipo di oggetto che combina due cose: una funzione e l'ambito in cui questa è stata creata. L'ambito consiste in qualsiasi variabile locale che era nel suo scope nel momento in cui la closure è stata creata. In questo caso, myFunc è una closure che incorpora sia la funzione displayName che la stringa "Mozilla", già esistente quando la closure è stata creata.

- -

Ecco un esempio leggermente più interessante — una funzione makeAdder:

- -
function makeAdder(x) {
-  return function(y) {
-    return x + y;
-  };
-}
-
-var add5 = makeAdder(5);
-var add10 = makeAdder(10);
-
-console.log(add5(2));  // 7
-console.log(add10(2)); // 12
-
- -

In questo esempio, abbiamo definito una funzione makeAdder(x) che prende un singolo argomento x e restituisce una nuova funzione. La funzione restituita prende un singolo argomento y, e restituisce la somma tra x e y.

- -

In sostanza, makeAdder è una factory function — crea funzioni che possono aggiungere uno specifico valore come argomento. Nell'esempio sopra usiamo la nostra factory function per creare due nuove funzioni — una che aggiunge 5 ai suoi argomenti, e una che aggiunge 10.

- -

add5 e add10 sono entrambe closures. Condividono la stessa definizione del corpo della funzione, ma memorizzano diversi ambienti. Nell'ambiente di add5, x vale 5. Per quanto riguarda add10 , x vale 10.

- -

Practical closures

- -

That's the theory of closures — but are closures actually useful? Let's consider their practical implications. A closure lets you associate some data (the environment) with a function that operates on that data. This has obvious parallels to object oriented programming, where objects allow us to associate some data (the object's properties) with one or more methods.

- -

Consequently, you can use a closure anywhere that you might normally use an object with only a single method.

- -

Situations where you might want to do this are particularly common on the web. Much of the code we write in web JavaScript is event-based — we define some behavior, then attach it to an event that is triggered by the user (such as a click or a keypress). Our code is generally attached as a callback: a single function which is executed in response to the event.

- -

Here's a practical example: suppose we wish to add some buttons to a page that adjust the text size. One way of doing this is to specify the font-size of the body element in pixels, then set the size of the other elements on the page (such as headers) using the relative em unit:

- -
body {
-  font-family: Helvetica, Arial, sans-serif;
-  font-size: 12px;
-}
-
-h1 {
-  font-size: 1.5em;
-}
-
-h2 {
-  font-size: 1.2em;
-}
-
- -

Our interactive text size buttons can change the font-size property of the body element, and the adjustments will be picked up by other elements on the page thanks to the relative units.

- -

Qui c'è il codice JavaScript:

- -
function makeSizer(size) {
-  return function() {
-    document.body.style.fontSize = size + 'px';
-  };
-}
-
-var size12 = makeSizer(12);
-var size14 = makeSizer(14);
-var size16 = makeSizer(16);
-
- -

size12, size14, and size16 are now functions which will resize the body text to 12, 14, and 16 pixels, respectively. We can attach them to buttons (in this case links) as follows:

- -
document.getElementById('size-12').onclick = size12;
-document.getElementById('size-14').onclick = size14;
-document.getElementById('size-16').onclick = size16;
-
- -
<a href="#" id="size-12">12</a>
-<a href="#" id="size-14">14</a>
-<a href="#" id="size-16">16</a>
-
- -

{{JSFiddleEmbed("https://jsfiddle.net/vnkuZ/","","200")}}

- -

Emulare metodi privati con chiusure

- -

Languages such as Java provide the ability to declare methods private, meaning that they can only be called by other methods in the same class.

- -

JavaScript does not provide a native way of doing this, but it is possible to emulate private methods using closures. Private methods aren't just useful for restricting access to code: they also provide a powerful way of managing your global namespace, keeping non-essential methods from cluttering up the public interface to your code.

- -

Here's how to define some public functions that can access private functions and variables, using closures which is also known as the module pattern:

- -
var counter = (function() {
-  var privateCounter = 0;
-  function changeBy(val) {
-    privateCounter += val;
-  }
-  return {
-    increment: function() {
-      changeBy(1);
-    },
-    decrement: function() {
-      changeBy(-1);
-    },
-    value: function() {
-      return privateCounter;
-    }
-  };
-})();
-
-console.log(counter.value()); // logs 0
-counter.increment();
-counter.increment();
-console.log(counter.value()); // logs 2
-counter.decrement();
-console.log(counter.value()); // logs 1
-
- -

There's a lot going on here. In previous examples each closure has had its own environment; here we create a single environment which is shared by three functions: counter.increment, counter.decrement, and counter.value.

- -

The shared environment is created in the body of an anonymous function, which is executed as soon as it has been defined. The environment contains two private items: a variable called privateCounter and a function called changeBy. Neither of these private items can be accessed directly from outside the anonymous function. Instead, they must be accessed by the three public functions that are returned from the anonymous wrapper.

- -

Those three public functions are closures that share the same environment. Thanks to JavaScript's lexical scoping, they each have access to the privateCounter variable and changeBy function.

- -

You'll notice we're defining an anonymous function that creates a counter, and then we call it immediately and assign the result to the counter variable. We could store this function in a separate variable makeCounter and use it to create several counters.

- -
var makeCounter = function() {
-  var privateCounter = 0;
-  function changeBy(val) {
-    privateCounter += val;
-  }
-  return {
-    increment: function() {
-      changeBy(1);
-    },
-    decrement: function() {
-      changeBy(-1);
-    },
-    value: function() {
-      return privateCounter;
-    }
-  }
-};
-
-var counter1 = makeCounter();
-var counter2 = makeCounter();
-alert(counter1.value()); /* Alerts 0 */
-counter1.increment();
-counter1.increment();
-alert(counter1.value()); /* Alerts 2 */
-counter1.decrement();
-alert(counter1.value()); /* Alerts 1 */
-alert(counter2.value()); /* Alerts 0 */
-
- -

Notice how each of the two counters maintains its independence from the other. Its environment during the call of the makeCounter() function is different each time. The closure variable privateCounter contains a different instance each time.

- -

Using closures in this way provides a number of benefits that are normally associated with object oriented programming, in particular data hiding and encapsulation.

- -

Creating closures in loops: A common mistake

- -

Prior to the introduction of the let keyword in ECMAScript 6, a common problem with closures occurred when they were created inside a loop. Consider the following example:

- -
<p id="help">Helpful notes will appear here</p>
-<p>E-mail: <input type="text" id="email" name="email"></p>
-<p>Name: <input type="text" id="name" name="name"></p>
-<p>Age: <input type="text" id="age" name="age"></p>
-
- -
function showHelp(help) {
-  document.getElementById('help').innerHTML = help;
-}
-
-function setupHelp() {
-  var helpText = [
-      {'id': 'email', 'help': 'Your e-mail address'},
-      {'id': 'name', 'help': 'Your full name'},
-      {'id': 'age', 'help': 'Your age (you must be over 16)'}
-    ];
-
-  for (var i = 0; i < helpText.length; i++) {
-    var item = helpText[i];
-    document.getElementById(item.id).onfocus = function() {
-      showHelp(item.help);
-    }
-  }
-}
-
-setupHelp();
-
- -

{{JSFiddleEmbed("https://jsfiddle.net/v7gjv/", "", 200)}}

- -

The helpText array defines three helpful hints, each associated with the ID of an input field in the document. The loop cycles through these definitions, hooking up an onfocus event to each one that shows the associated help method.

- -

If you try this code out, you'll see that it doesn't work as expected. No matter what field you focus on, the message about your age will be displayed.

- -

The reason for this is that the functions assigned to onfocus are closures; they consist of the function definition and the captured environment from the setupHelp function's scope. Three closures have been created, but each one shares the same single environment. By the time the onfocus callbacks are executed, the loop has run its course and the item variable (shared by all three closures) has been left pointing to the last entry in the helpText list.

- -

One solution in this case is to use more closures: in particular, to use a function factory as described earlier on:

- -
function showHelp(help) {
-  document.getElementById('help').innerHTML = help;
-}
-
-function makeHelpCallback(help) {
-  return function() {
-    showHelp(help);
-  };
-}
-
-function setupHelp() {
-  var helpText = [
-      {'id': 'email', 'help': 'Your e-mail address'},
-      {'id': 'name', 'help': 'Your full name'},
-      {'id': 'age', 'help': 'Your age (you must be over 16)'}
-    ];
-
-  for (var i = 0; i < helpText.length; i++) {
-    var item = helpText[i];
-    document.getElementById(item.id).onfocus = makeHelpCallback(item.help);
-  }
-}
-
-setupHelp();
-
- -

{{JSFiddleEmbed("https://jsfiddle.net/v7gjv/1/", "", 300)}}

- -

This works as expected. Rather than the callbacks all sharing a single environment, the makeHelpCallback function creates a new environment for each one in which help refers to the corresponding string from the helpText array.

- -

Performance considerations

- -

It is unwise to unnecessarily create functions within other functions if closures are not needed for a particular task, as it will negatively affect script performance both in terms of processing speed and memory consumption.

- -

For instance, when creating a new object/class, methods should normally be associated to the object's prototype rather than defined into the object constructor. The reason is that whenever the constructor is called, the methods would get reassigned (that is, for every object creation).

- -

Consider the following impractical but demonstrative case:

- -
function MyObject(name, message) {
-  this.name = name.toString();
-  this.message = message.toString();
-  this.getName = function() {
-    return this.name;
-  };
-
-  this.getMessage = function() {
-    return this.message;
-  };
-}
-
- -

The previous code does not take advantage of the benefits of closures and thus could instead be formulated:

- -
function MyObject(name, message) {
-  this.name = name.toString();
-  this.message = message.toString();
-}
-MyObject.prototype = {
-  getName: function() {
-    return this.name;
-  },
-  getMessage: function() {
-    return this.message;
-  }
-};
-
- -

However, redefining the prototype is not recommended, so the following example is even better because it appends to the existing prototype:

- -
function MyObject(name, message) {
-  this.name = name.toString();
-  this.message = message.toString();
-}
-MyObject.prototype.getName = function() {
-  return this.name;
-};
-MyObject.prototype.getMessage = function() {
-  return this.message;
-};
-
- -

Il codice sopra può essere riscritto meglio in un modo più pulito, con lo stesso risultato:

- -
function MyObject(name, message) {
-    this.name = name.toString();
-    this.message = message.toString();
-}
-(function() {
-    this.getName = function() {
-        return this.name;
-    };
-    this.getMessage = function() {
-        return this.message;
-    };
-}).call(MyObject.prototype);
-
- -

In the two previous examples, the inherited prototype can be shared by all objects and the method definitions need not occur at every object creation. See Details of the Object Model for more details.

diff --git a/files/it/web/javascript/closures/index.html b/files/it/web/javascript/closures/index.html new file mode 100644 index 0000000000..deee56e54b --- /dev/null +++ b/files/it/web/javascript/closures/index.html @@ -0,0 +1,345 @@ +--- +title: Chiusure +slug: Web/JavaScript/Chiusure +translation_of: Web/JavaScript/Closures +--- +
{{jsSidebar("Intermediate")}}
+ +
+ +

Una closure è la combinazione di una funzione e dello stato nella quale è stata creata (ambito lessicale). In altre parole, una closure consente a una funzione interna di accedere allo scope della funzione che la racchiude. In Javascript le closure sono create ogni volta che una funzione viene creata, al momento della creazione della funzione stessa.

+ +

Lexical scoping

+ +

Considerate la seguente:

+ +
+
function init() {
+  var name = "Mozilla"; // name è una variabile locale creata da init
+  function displayName() { // displayName() è una funzione interna, una chiusura
+    alert(name); // utilizza la variabile dichiarata nella funzione padre
+  }
+  displayName();
+}
+init();
+
+ +

init() crea una variabile locale name e poi una funzione chiamata displayName(). displayName() è una funzione interna che è definita dentro init() ed è disponibile solo all'interno del corpo di quella funzione. displayName() non ha proprie variabili locali. Tuttavia, poiché le funzioni interne hanno accesso alle variabili di quelle esterne, displayName() può accedere alla variabile name dichiarata nella funzione genitore, init() Tuttavia verrebbero usate le variabili locali in displayName(), se esistessero.

+ +

{{JSFiddleEmbed("https://jsfiddle.net/78dg25ax/", "js,result", 200)}}

+ +

Esegui il codice e verifica che funziona. Questo è un esempio di lexical scoping: in JavaScript, la visibilità (scope) di una variabile è definita dalla sua posizione all'interno del codice sorgente (si evince dal codice stesso [lexically]) e le funzioni innestate hanno accesso a variabili dichiarate nella funzione esterna (outer scope).

+ +

Closure

+ +

Considerate ora l'esempio seguente:

+ +
function makeFunc() {
+  var name = "Mozilla";
+  function displayName() {
+    alert(name);
+  }
+  return displayName;
+}
+
+var myFunc = makeFunc();
+myFunc();
+
+ +

L'esecuzione di questo codice ha esattamente lo stesso effetto dell'esempio precedente della funzione init():  la stringa "Mozilla" verrà visualizzata in una casella di avviso JavaScript. La cosa differente ed interessante, è che la funzione interna displayName() viene restituita dalla funzione esterna prima di essere eseguita.

+ +

A un primo sguardo sembrerebbe controintuitivo che il codice funzioni ancora. In alcuni linguaggi di programmazione le variabili locali interne a una funzione esistono solo per la durata dell'esecuzione della funzione stessa. Una volta che makeFunc() ha terminato la propria esecuzione, ci si potrebbe aspettare che la variabile name non sia più accessibile. Tuttavia, poiché il codice funziona ancora, è ovvio che in JavaScript non è il caso.

+ +

La ragione è che le funzioni in JavaScript formano closures. Una closure è la combinazione di una funzione e dell'ambito lessicale in cui questa funzione è stata dichiarata. In questo caso, myFunc è un riferimento all'istanza della funzione displayName creata quando makeFunc è eseguita.

+ +

La soluzione di questo rompicampo è che myFunc è diventata una closure. Una closure è uno speciale tipo di oggetto che combina due cose: una funzione e l'ambito in cui questa è stata creata. L'ambito consiste in qualsiasi variabile locale che era nel suo scope nel momento in cui la closure è stata creata. In questo caso, myFunc è una closure che incorpora sia la funzione displayName che la stringa "Mozilla", già esistente quando la closure è stata creata.

+ +

Ecco un esempio leggermente più interessante — una funzione makeAdder:

+ +
function makeAdder(x) {
+  return function(y) {
+    return x + y;
+  };
+}
+
+var add5 = makeAdder(5);
+var add10 = makeAdder(10);
+
+console.log(add5(2));  // 7
+console.log(add10(2)); // 12
+
+ +

In questo esempio, abbiamo definito una funzione makeAdder(x) che prende un singolo argomento x e restituisce una nuova funzione. La funzione restituita prende un singolo argomento y, e restituisce la somma tra x e y.

+ +

In sostanza, makeAdder è una factory function — crea funzioni che possono aggiungere uno specifico valore come argomento. Nell'esempio sopra usiamo la nostra factory function per creare due nuove funzioni — una che aggiunge 5 ai suoi argomenti, e una che aggiunge 10.

+ +

add5 e add10 sono entrambe closures. Condividono la stessa definizione del corpo della funzione, ma memorizzano diversi ambienti. Nell'ambiente di add5, x vale 5. Per quanto riguarda add10 , x vale 10.

+ +

Practical closures

+ +

That's the theory of closures — but are closures actually useful? Let's consider their practical implications. A closure lets you associate some data (the environment) with a function that operates on that data. This has obvious parallels to object oriented programming, where objects allow us to associate some data (the object's properties) with one or more methods.

+ +

Consequently, you can use a closure anywhere that you might normally use an object with only a single method.

+ +

Situations where you might want to do this are particularly common on the web. Much of the code we write in web JavaScript is event-based — we define some behavior, then attach it to an event that is triggered by the user (such as a click or a keypress). Our code is generally attached as a callback: a single function which is executed in response to the event.

+ +

Here's a practical example: suppose we wish to add some buttons to a page that adjust the text size. One way of doing this is to specify the font-size of the body element in pixels, then set the size of the other elements on the page (such as headers) using the relative em unit:

+ +
body {
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 12px;
+}
+
+h1 {
+  font-size: 1.5em;
+}
+
+h2 {
+  font-size: 1.2em;
+}
+
+ +

Our interactive text size buttons can change the font-size property of the body element, and the adjustments will be picked up by other elements on the page thanks to the relative units.

+ +

Qui c'è il codice JavaScript:

+ +
function makeSizer(size) {
+  return function() {
+    document.body.style.fontSize = size + 'px';
+  };
+}
+
+var size12 = makeSizer(12);
+var size14 = makeSizer(14);
+var size16 = makeSizer(16);
+
+ +

size12, size14, and size16 are now functions which will resize the body text to 12, 14, and 16 pixels, respectively. We can attach them to buttons (in this case links) as follows:

+ +
document.getElementById('size-12').onclick = size12;
+document.getElementById('size-14').onclick = size14;
+document.getElementById('size-16').onclick = size16;
+
+ +
<a href="#" id="size-12">12</a>
+<a href="#" id="size-14">14</a>
+<a href="#" id="size-16">16</a>
+
+ +

{{JSFiddleEmbed("https://jsfiddle.net/vnkuZ/","","200")}}

+ +

Emulare metodi privati con chiusure

+ +

Languages such as Java provide the ability to declare methods private, meaning that they can only be called by other methods in the same class.

+ +

JavaScript does not provide a native way of doing this, but it is possible to emulate private methods using closures. Private methods aren't just useful for restricting access to code: they also provide a powerful way of managing your global namespace, keeping non-essential methods from cluttering up the public interface to your code.

+ +

Here's how to define some public functions that can access private functions and variables, using closures which is also known as the module pattern:

+ +
var counter = (function() {
+  var privateCounter = 0;
+  function changeBy(val) {
+    privateCounter += val;
+  }
+  return {
+    increment: function() {
+      changeBy(1);
+    },
+    decrement: function() {
+      changeBy(-1);
+    },
+    value: function() {
+      return privateCounter;
+    }
+  };
+})();
+
+console.log(counter.value()); // logs 0
+counter.increment();
+counter.increment();
+console.log(counter.value()); // logs 2
+counter.decrement();
+console.log(counter.value()); // logs 1
+
+ +

There's a lot going on here. In previous examples each closure has had its own environment; here we create a single environment which is shared by three functions: counter.increment, counter.decrement, and counter.value.

+ +

The shared environment is created in the body of an anonymous function, which is executed as soon as it has been defined. The environment contains two private items: a variable called privateCounter and a function called changeBy. Neither of these private items can be accessed directly from outside the anonymous function. Instead, they must be accessed by the three public functions that are returned from the anonymous wrapper.

+ +

Those three public functions are closures that share the same environment. Thanks to JavaScript's lexical scoping, they each have access to the privateCounter variable and changeBy function.

+ +

You'll notice we're defining an anonymous function that creates a counter, and then we call it immediately and assign the result to the counter variable. We could store this function in a separate variable makeCounter and use it to create several counters.

+ +
var makeCounter = function() {
+  var privateCounter = 0;
+  function changeBy(val) {
+    privateCounter += val;
+  }
+  return {
+    increment: function() {
+      changeBy(1);
+    },
+    decrement: function() {
+      changeBy(-1);
+    },
+    value: function() {
+      return privateCounter;
+    }
+  }
+};
+
+var counter1 = makeCounter();
+var counter2 = makeCounter();
+alert(counter1.value()); /* Alerts 0 */
+counter1.increment();
+counter1.increment();
+alert(counter1.value()); /* Alerts 2 */
+counter1.decrement();
+alert(counter1.value()); /* Alerts 1 */
+alert(counter2.value()); /* Alerts 0 */
+
+ +

Notice how each of the two counters maintains its independence from the other. Its environment during the call of the makeCounter() function is different each time. The closure variable privateCounter contains a different instance each time.

+ +

Using closures in this way provides a number of benefits that are normally associated with object oriented programming, in particular data hiding and encapsulation.

+ +

Creating closures in loops: A common mistake

+ +

Prior to the introduction of the let keyword in ECMAScript 6, a common problem with closures occurred when they were created inside a loop. Consider the following example:

+ +
<p id="help">Helpful notes will appear here</p>
+<p>E-mail: <input type="text" id="email" name="email"></p>
+<p>Name: <input type="text" id="name" name="name"></p>
+<p>Age: <input type="text" id="age" name="age"></p>
+
+ +
function showHelp(help) {
+  document.getElementById('help').innerHTML = help;
+}
+
+function setupHelp() {
+  var helpText = [
+      {'id': 'email', 'help': 'Your e-mail address'},
+      {'id': 'name', 'help': 'Your full name'},
+      {'id': 'age', 'help': 'Your age (you must be over 16)'}
+    ];
+
+  for (var i = 0; i < helpText.length; i++) {
+    var item = helpText[i];
+    document.getElementById(item.id).onfocus = function() {
+      showHelp(item.help);
+    }
+  }
+}
+
+setupHelp();
+
+ +

{{JSFiddleEmbed("https://jsfiddle.net/v7gjv/", "", 200)}}

+ +

The helpText array defines three helpful hints, each associated with the ID of an input field in the document. The loop cycles through these definitions, hooking up an onfocus event to each one that shows the associated help method.

+ +

If you try this code out, you'll see that it doesn't work as expected. No matter what field you focus on, the message about your age will be displayed.

+ +

The reason for this is that the functions assigned to onfocus are closures; they consist of the function definition and the captured environment from the setupHelp function's scope. Three closures have been created, but each one shares the same single environment. By the time the onfocus callbacks are executed, the loop has run its course and the item variable (shared by all three closures) has been left pointing to the last entry in the helpText list.

+ +

One solution in this case is to use more closures: in particular, to use a function factory as described earlier on:

+ +
function showHelp(help) {
+  document.getElementById('help').innerHTML = help;
+}
+
+function makeHelpCallback(help) {
+  return function() {
+    showHelp(help);
+  };
+}
+
+function setupHelp() {
+  var helpText = [
+      {'id': 'email', 'help': 'Your e-mail address'},
+      {'id': 'name', 'help': 'Your full name'},
+      {'id': 'age', 'help': 'Your age (you must be over 16)'}
+    ];
+
+  for (var i = 0; i < helpText.length; i++) {
+    var item = helpText[i];
+    document.getElementById(item.id).onfocus = makeHelpCallback(item.help);
+  }
+}
+
+setupHelp();
+
+ +

{{JSFiddleEmbed("https://jsfiddle.net/v7gjv/1/", "", 300)}}

+ +

This works as expected. Rather than the callbacks all sharing a single environment, the makeHelpCallback function creates a new environment for each one in which help refers to the corresponding string from the helpText array.

+ +

Performance considerations

+ +

It is unwise to unnecessarily create functions within other functions if closures are not needed for a particular task, as it will negatively affect script performance both in terms of processing speed and memory consumption.

+ +

For instance, when creating a new object/class, methods should normally be associated to the object's prototype rather than defined into the object constructor. The reason is that whenever the constructor is called, the methods would get reassigned (that is, for every object creation).

+ +

Consider the following impractical but demonstrative case:

+ +
function MyObject(name, message) {
+  this.name = name.toString();
+  this.message = message.toString();
+  this.getName = function() {
+    return this.name;
+  };
+
+  this.getMessage = function() {
+    return this.message;
+  };
+}
+
+ +

The previous code does not take advantage of the benefits of closures and thus could instead be formulated:

+ +
function MyObject(name, message) {
+  this.name = name.toString();
+  this.message = message.toString();
+}
+MyObject.prototype = {
+  getName: function() {
+    return this.name;
+  },
+  getMessage: function() {
+    return this.message;
+  }
+};
+
+ +

However, redefining the prototype is not recommended, so the following example is even better because it appends to the existing prototype:

+ +
function MyObject(name, message) {
+  this.name = name.toString();
+  this.message = message.toString();
+}
+MyObject.prototype.getName = function() {
+  return this.name;
+};
+MyObject.prototype.getMessage = function() {
+  return this.message;
+};
+
+ +

Il codice sopra può essere riscritto meglio in un modo più pulito, con lo stesso risultato:

+ +
function MyObject(name, message) {
+    this.name = name.toString();
+    this.message = message.toString();
+}
+(function() {
+    this.getName = function() {
+        return this.name;
+    };
+    this.getMessage = function() {
+        return this.message;
+    };
+}).call(MyObject.prototype);
+
+ +

In the two previous examples, the inherited prototype can be shared by all objects and the method definitions need not occur at every object creation. See Details of the Object Model for more details.

diff --git "a/files/it/web/javascript/cos\303\250_javascript/index.html" "b/files/it/web/javascript/cos\303\250_javascript/index.html" deleted file mode 100644 index c850023b92..0000000000 --- "a/files/it/web/javascript/cos\303\250_javascript/index.html" +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: Cos'è JavaScript -slug: Web/JavaScript/Cosè_JavaScript -translation_of: Web/JavaScript/About_JavaScript ---- -
{{JsSidebar}}
- -

Cos'è JavaScript?

- -

JavaScript® (spesso abbreviato con JS) è un linguaggio di programmazione, interpretato, orientato agli oggetti  con  first-class functions,  ed è meglio conosciuto come linguaggio di scripting client-side per pagine web, nonostante questo è anche utilizzato in molte applicazioninon solamente basate sul web. Il linguaggio è prototype-based,  è  dinamico, imperativo, e il offre uno stile di programmazione funzionale.

- -

JavaScript viene eseguito direttamente lato "client-side" della pagina web e può essere utilizzato per dare un design e stabilire il comportamento delle pagine web quando viene scatenato una particolare evento da parte dell'utente. JavaScript è semplice da apprendere e nello stesso tempo rappresenta un linguaggio che permette un controllo quasi totale sulla pagina web.

- -

Contrariamente alla concezione popolare, JavaScript non è "Java Interpretato". JavaScript è un linguaggio di scripting dinamico che supporta la costruzione degli oggetti basata su prototype. La sintassi base è intenzionalmente basata su entrambi i maggiori e più conosciuti linguaggi, C++ e Java e questo ha permesso la riduzione di nuovi concetti per lo studio del linguaggio. Costrutti del linguaggio come if, cicli for e  while, switch e blocchi try ... catch hanno il medesimo significato in questi linguaggi.

- -

JavaScript permette di programmare sia in modo procedurale sia in orientato agli oggetti. Gli oggetti vengono creati a livello di programmazione in JavaScript, allegando metodi e proprietà agli oggetti altrimenti vuoti in fase di esecuzione, in contrasto con le definizioni di classe sintattiche comuni linguaggi compilati come C ++ e Java. Una volta che un oggetto è stato costruito può essere utilizzato come modello (o prototipo) per creare oggetti simili.

- -

JavaScript permette la costruzione a runtime di oggetti, elenchi di parametri, funzioni come variabili, pemette la creazione di script dinamici (tramite eval), permette di esaminare a runtime tipo e proprietà di un oggetto (tramite for ... in), e il recupero del codice sorgente ( i programmi JavaScript possono decompilare parti di funzione e mostrarne il codice sorgente all'interno del codice sorgente stesso).

- -

Per una più esaustiva trattazione del linguaggio JavaScript consulta il seguente link JavaScript resources.

- -

Quali implementazioni del linguaggio JavaScript sono disponibili?

- -

Il progetto Mozilla fornisce due implementazioni JavaScript. Il primo JavaScript è stato creato da Brendan Eich a Netscape, e da allora è stato aggiornato per conformarsi alle ECMA-262 Edition 5 e versioni successive. Questo motore, nome in codice SpiderMonkey, è implementato in C / C ++. Il motore di Rhino, creati principalmente da Norris Boyd (anche lui a Netscape) è una implementazione JavaScript scritto in Java. Come SpiderMonkey, Rhino è ECMA-262 Edition 5 compatibile.

- -

Diverse ed importanti ottimizzazioni sono state aggiunte, come TraceMonkey (Firefox 3.5), JägerMonkey (Firefox 4) e IonMonkey al motore SpiderMonkey JavaScript nel corso del tempo. Il lavoro è sempre in corso per migliorare le prestazioni di esecuzione di JavaScript.

- -

Oltre alle implementazioni di cui sopra, ci sono molti altri popolari motori JavaScript, quali: -

- -
    -
  • V8 di Google, che viene utilizzato nel browser Google Chrome e nelle versioni recenti del browser Opera. V8 è anche il motore utilizzato per Node.js.
    • -
  • JavaScriptCore(SquirrelFish / Nitro) utilizzato in alcuni browser WebKit, come Safari di Apple.
    • -
  • Carakan nelle vecchie versioni di Opera.
    • -
  • Chakra utilizzato in Internet Explorer (anche se il linguaggio che implementa è formalmente chiamato "JScript" al fine di evitare problemi legati al marchio).
    • -
- -

Ognuno dei motori JavaScript di Mozilla espone una API pubblica per gli sviluppatori e questa viene utilizzata per integrare JavaScript nella loro software. Di gran lunga, l'ambiente host più comune per JavaScript e lo stesso browser web. I browser Web utilizzano in genere l'API pubblica di JavaScript per la gestione e la visualizzazione della struttura DOM delle pagine web.

- -

Un'altra applicazione comune  per cui possiamo utilizzare JavaScript è come linguaggio di scripting lato server. Un server web JavaScript esporrebbe oggetti  che rappresentano una richiesta HTTP e oggetti di risposta, che possono successivamente essere manipolati da un programma JavaScript per generare dinamicamente pagine web. Node.js è un esempio popolare di questo.

- -

Risorse JavaScript

- -
-
SpiderMonkey
-
Informazioni specifiche riguardanti l'implementazione del motore scritto in C / C ++ (aka SpiderMonkey), compreso il modo di incorporare nelle applicazioni.
-
- -
-
Rhino
-
Informazioni specifiche riguardanti l'implementazione del motore scritto in Java (aka Rhino).
-
Risorse sul linguaggio
-
Informazioni sugli standard del linguaggio JavaScript.
-
Re-Introduzione a JavaScript
-
Guida JavaScript e JavaScript Reference.
-
- -

JavaScript® è un marchio registrato di Oracle negli U.S. e in altri paesi.

diff --git a/files/it/web/javascript/gestione_della_memoria/index.html b/files/it/web/javascript/gestione_della_memoria/index.html deleted file mode 100644 index d1cd6c4dca..0000000000 --- a/files/it/web/javascript/gestione_della_memoria/index.html +++ /dev/null @@ -1,197 +0,0 @@ ---- -title: Gestione della memoria -slug: Web/JavaScript/Gestione_della_Memoria -translation_of: Web/JavaScript/Memory_Management ---- -
{{JsSidebar("Advanced")}}
- -

Introduzione

- -

Alcuni linguaggi di programmazione, come ad esempio C e C++, possiedono funzioni per la gestione della memoria a basso livello come malloc() e free(); in JavaScript l'allocazione e la de-allocazione della memoria (oggetti, stringhe, ecc.) avviene "automaticamente" grazie alla presenza del Garbage Collection. Il termine "automaticamente" è spesso fonte di confusione tra i programmatori JavaScript (e di altri linguaggi ad alto livello) poichè da l'impressione che si possa non preoccuparsi riguardo la gestione della memoria. Questo è un errore!

- -

Ciclo di vita della memoria

- -

A prescindere dal linguaggio di programmazione, il ciclo di vita della memoria è pressappoco sempre lo stesso:

- -
    -
  1. Allocazione della memoria necessaria
    2. -
  2. Utilizzo della memoria (scrittura, lettura)
    3. -
  3. Rilascio della memoria allocata quando non è più necessaria
    4. -
- -

I primi due punti sono espliciti in tutti i linguaggi; l'ultimo invece è esplicito nei linguaggi a basso livello, mentre il più delle volte implicito nei linguaggi ad alto livello come JavaScript.

- -

Allocazione in JavaScript

- -

Inizializzazione con valore

- -

Per evitare che il programmatore debba allocare ogni variabile utilizzata, JavaScript lo fa contestualmente alla dichiarazione:

- -
var n = 123; // alloca memoria per un numero
-var s = "qwerty"; // alloca memoria per una stringa
-
-var o = {
-  a: 1,
-  b: null
-}; // alloca memoria per un oggetto e i valori contenuti
-
-// (come un oggetto) alloca memoria per l'array e i valori contenuti
-var a = [1, null, "abra"];
-
-function f(a){
-  return a + 2;
-} // alloca una funzione (cioè un oggetto invocabile)
-
-// istruzioni più complesse anche allocano un oggetto
-someElement.addEventListener('click', function(){
-  someElement.style.backgroundColor = 'blue';
-}, false);
-
- -

Allocazione via chiamata di funzione

- -

La chiamata di alcune funzioni risultano nell'allocazione di un oggetto, come nel seguente esempio:

- -
var d = new Date();
-// alloca un DOM element
-var e = document.createElement('div');
-
- -

Alcuni metodi allocano nuovi valori od oggetti:

- -
var s = "qwerty";
-var s2 = s.substr(0, 3); // s2 è una nuova stringa
-// Dato che le stringhe sono valori immutabili,
-// JavaScript può decidere di non allocare memoria per una nuova stringa,
-// ma semplicemente di salvare il range [0, 3].
-
-var a = ["ouais ouais", "nan nan"];
-var a2 = ["generation", "nan nan"];
-var a3 = a.concat(a2);
-// Un nuovo array di 4 elementi, la concatenazione degli elementi di a e a2
-
- -

Utilizzo dei valori

- -

Usare i valori in sostanza significa accedere alla memoria allocata. Questo può essere fatto leggendo o scrivendo il valore di una variabile, di una proprietà di un oggetto, o anche semplicemente passando un argomento a una funzione.

- -

Rilascio della memoria quando non più necessaria

- -

La maggior parte dei problemi riguardo la gestione della memoria arrivano in questa fase; L'impresa più difficile è determinare quando "la memoria allocata non è più necessaria". Ciò si traduce per il programmatore in individuare dove, nel codice, questo pezzo di memoria non risulta più necessario, e quindi liberarlo.

- -

I linguaggi ad alto livello hanno una funzionalità chiamata "Garbage Collector" il cui compito è di seguire l'allocazione e l'uso della memoria così da determinare quando una porzione della memoria allocata non è più necessaria e liberarla automaticamente. Questo processo è un approssimazione dato che il problema generico di conoscere se una porzione di memoria serve o no è irrisolvibile (non può essere risolto da un algoritmo).

- -

Garbage Collection

- -

Partendo dal presupposto che il generico problema di sapere dove una determinata porzione di memoria "non serve più" è irrisolvibile, come conseguenza, l'implementazione dei garbege collection sono una restrizione della soluzione del problema generico. Questa sezione illustra le nozioni necessarie a capire il funzionamento dei principali algoritmi che implementano i garbage collection e le loro limitazioni.

- -

Referenze

- -

L'idea principale su cui si basano gli algoritmi di garbage collection sono le referenze. Nel contesto della gestione della memoria, un oggetto è referente di un altro se può accedere a quest'ultimo (sia in modo implicito che esplicito). Ad esempio, un oggetto JavaScript è referente del suo prototype (referenza implicita) e ai valori delle sue proprietà (referenza esplicita).

- -

In questo contesto, il concetto di "oggetto" si estende a qualcosa di molto più ampio rispetto al tradizionale concetto di "oggetto JavaScript" e contiene function scopes (or the global lexical scope).

- -

Reference-counting garbage collection

- -

Quello qui descritto è l'algoritmo di garbage collection più semplice. Esso riduce il problema da "quando un oggetto non serve più" a "quando un oggetto non è più referenziato da nessun altro oggetto". Un oggetto è considerato garbage collectable (letteralmente, spazzatura da raccogliere) se nessun altro oggetto ha almeno una referenza ad esso.

- -

Esempio

- -
var o = {
-  a: {
-    b:2
-  }
-};
-// Alloca 2 oggetti. Il primo è referenziato dall'altro come sua proprietà.
-// L'altro è referenziato dalla dalla virtù di essere assegnato alla variabile 'o'.
-// Ovviamente, nessuno dei due può essere cancellato per liberare memoria
-
-
-var o2 = o; // la variabile 'o2' è il secondo oggetto
-            // che referenzia lo stesso oggetto di 'o'
-o = 1;      // ora l'oggetto che originariamente era in 'o' ha un'unica referenza
-            // rappresentata dalla variabile 'o2'
-
-var oa = o2.a; // referenza alla proprietà 'a' dell'oggetto.
-               // Quest'oggetto ora ha 2 referenze: una come proprietà di 'o2'
-               // e una come variabile 'oa'
-
-o2 = "yo"; // L'oggetto che originariamente era in 'o' adesso non
-           // più alcuna referenza e può essere cancellato.
-           // Però la sua proprietà 'a' è ancora referenziata
-           // dall'oggetto 'oa', quindi non può essere ancora eliminato
-
-oa = null; // la proprietà 'a' del precedente oggetto adesso non ha
-           // alcuna referenza. Può essere cancellata.
-
- -

Limitazione: cicli di referenze

- -

Questo algotitmo ha una limitazione quando entra in un ciclo di referenze. Nell'esempio seguente sono creati due oggetti che si referenziano a vicenda, uno referenzia l'altro e viceversa, creando un ciclo di referenze (dipendenza ciclica). In questo modo ogni oggetto ha almento una referenza, l'algoritmo del reference-countig (ovvero quello che "conta" quante referenze ha un oggetto) da come risultato che nessuno dei due oggetti può essere cancellato (non sono garbage-collactable).

- -
function f(){
-  var o = {};
-  var o2 = {};
-  o.a = o2; // o referenzia o2
-  o2.a = o; // o2 referenzia o
-
-  return "qwerty";
-}
-
-f();
-// Two objects are created and reference one another thus creating a cycle.
-// They will not get out of the function scope after the function call, so they
-// are effectively useless and could be free'd.
-// However, the reference-counting algorithm considers that since each of both
-// object is referenced at least once, none can be garbage-collected.
-
- -

Esempio reale

- -

Internet Explorer 6 e 7 sono conosciuti per avere un reference-counting garbage collector per gli oggetti DOM. I cicli di referenze sono errori comuni che possono generare uno spreco di memoria (memory leaks).

- -
var div;
-window.onload = function(){
-  div = document.getElementById("myDivElement");
-  div.circularReference = div;
-  div.lotsOfData = new Array(10000).join("*");
-};
-
- -

Nell'esempio precedente, l'elemento "myDivElement" ha una referenza circolare con se stesso nella proprietà "circularReference". Se la proprietà non è esplicitamente rimossa o annullata, un reference-counting garbage collector avrà sempre almeno una referenza intatta che manterrà l'elemento in memoria anche se esso fosse rimosso dal DOM. Se un oggetto trattiene molta memoria e ha almeno una referenza (come illustrato nell'esempio precedente con la proprietà "lotsOfData") la memoria da esso occupata non sarà mai rilasciata.

- -

L'algoritmo mark-and-sweep

- -

Questo algoritmo è il più famoso degli algoritmi di tracing; la tecnica del tracing è concettualmente molto semplice e si basa sulla definizione "quando un oggetto diventa irraggiungibile".

- -

Essa consiste nel prendere come riferimento gli oggetti root (indice dell'albero) e, partendo da essi, mediante una ricorsione, marcare (tramite un bit o una mappa distinta) tutti gli oggetti collegati tra loro da un riferimento. Al termine di questa operazione, gli oggetti raggiungibili saranno marcati mentre quelli non raggiungibili saranno eliminati.

- -

L'algoritmo mark-and-sweep (marca e butta via) si suddivide in due fasi: la prima fase (mark) nella quale l'algoritmo marca tutti gli oggetti che hanno almeno un riferimento attivo; nella seconda fase (sweep) nella quale tutti gli oggetti non marcati vengono liberati e la memoria viene restituita.

- -

A differenza della tecnica del reference counting il cui il costo dell'algoritmo è proporzionale all'ammontare del lavoro eseguito dal programma (ogni volta che si alloca/dealloca un oggetto bisogna creare-incrementare/decrementare il contatore), la tecnica del tracing è proporzionale alla dimensione della memoria ed è sicuramente più efficiente.

- -

I cicli non sono più un problema

- -

Nel primo esempio, dopo che la funzione ha restituito un risultato, i 2 oggetti non sono più referenziati da nessun altro oggetto raggiungibile dall'oggetto globale (root). Ne consegue che saranno irraggiungibili dal garbage collector e quindi eleminati.

- -

La stessa cosa accade con il secondo esempio. Una volta che il div e la sua variabile sono diventati irraggiungibili dalle radici, essi possono essere cancellati nonostante abbiano una referenza ciascuno.

- -

Limitazione: gli oggetti devono essere esplicitamente irragiungibili

- -

Sebbene sia marcata come una limitazione, è raramente raggiunta in pratica ed è anche il motivo per cui nessuno si preoccupa, di solito, dei garbage collector.

- -
-

Piccolo appunto italiano

- -

Tutte le parole tagliate sono state tradotte letteralmente ma in modo che la frase non perda di significato.

- -

cit. Il traduttore

-
- -

See also

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

Perché JavaScript?

-

JavaScript è un linguaggio per computer potente, complicato, e spesso misconosciuto. Permette lo sviluppo rapido di applicazioni in cui gli utenti possono inserire i dati e vedere i risultati facilmente.

-

Il vantaggio primario di JavaScript, che è anche conosciuto come ECMAScript, è che è centrato intorno al Web browser, così da avere la capacità di produrre gli stessi risultati su tutte le piattaforme supportate dal browser. Gli esempi in questa pagina, proprio come Google Maps, girano su Linux, Windows, e OS X. Con la recente crescita di numerose librerie JavaScript è ora più facile traversare un documento, selezionare gli elementi del DOM, creare animazioni, trattare eventi, e sviluppare applicazioni Ajax. Diversamente dalla promozione intorno alle altre tecnologie spinta da vari interessi proprietari, JavaScript è realmente il solo linguaggio di programmazione "cross-platform" e "client-side" che è sia libero che universalmente adottato.

-

Cosa dovresti già conoscere

-

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

-

Ci sono molte altre tecnologie che possono essere integrate e sviluppate insieme a Javascript che sono al di fuori di questo documento. Non aspettarti di fare un'intera applicazione come Google Maps tutta nel tuo primo giorno!

-

Come iniziare

-

Iniziare con JavaScript è molto semplice. Non devi aver precedentemente installato complicati programmi di sviluppo. Non devi conoscere come usare una shell, programmare Make, o usare un compilatore. JavaScript è interpretato dal tuo Web browser. Tutto quello che hai da fare è salvare il tuo programma come file testo e poi aprirlo nel tuo Web browser. E' tutto qui!

-

JavaScript è un linguaggio di programmazione ideale per linguaggi di computer introduttivi. Permette ai nuovi studenti di avere risposte immediate e insegna loro strumenti che essi troveranno di facile uso nella loro vita reale. Ciò è in assoluto contrasto con C, C++, and Java che sono veramente facili solo per sviluppatori software specializzati.

-

Browser compatibility issues

-

There are variations between what functionality is available in the different browsers. Mozilla, Chrome, Microsoft IE, Apple Safari, and Opera fluctuate in behavior. You can mitigate these issues by using the various cross-platform JavaScript APIs that are available. These APIs provide common functionality and hide these browser fluctuations from you.

-

How to try the examples

-

The examples below have some sample code. There are many ways to try these examples out. If you already have your own website, then you should be able to just save these examples as new Web pages on your website.

-

If you do not have your own website, you can save these examples as files on your computer and open them up with the Web browser you are using now. JavaScript is a very easy language to use for beginning programmers for this reason. You don't need a compiler or a development environment; you and your browser are all you need to get started!

-

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

-

Example: Catching a mouse click

-

The specifics of event handling (event types, handler registration, propagation, etc.) are too extensive to be fully covered in this simple example. However, this example cannot demonstrate catching a mouse click without delving a little into the JavaScript event system. Just keep in mind that this example will only graze the full details about JavaScript events and that if you wish to go beyond the basic capabilities described here, read more about the JavaScript event system.

-

'Mouse' events are a subset of the total events issued by a Web browser in response to user actions. The following is a list of the events emitted in response to a user's mouse action:

-
    -
  • Click - issued when a user clicks the mouse
    • -
  • DblClick - issued when a user double-clicks the mouse
    • -
  • MouseDown - issued when a user depresses a mouse button (the first half of a click)
    • -
  • MouseUp - issued when a user releases a mouse button (the second half of a click)
    • -
  • MouseOut - issued when the mouse pointer leaves the graphical bounds of the object
    • -
  • MouseOver - issued when the mouse pointer enters the graphical bounds of the object
    • -
  • MouseMove - issued when the mouse pointer moves while within the graphical bounds of the object
    • -
  • ContextMenu - issued when the user clicks using the right mouse button
    • -
-

Note that in the latest versions of HTML, the inline event handlers, i.e. the ones added as tag attributes, are expected to be all lowercase and that event handlers in script are always all lowercase.

-

The simplest method for capturing these events, to register event handlers - using HTML - is to specify the individual events as attributes for your element. Example:

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

The JavaScript code you wish to execute can be inlined as the attribute value or you can call a function which has been defined in a <script> block within the HTML page:

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

Additionally, the event object which is issued can be captured and referenced, providing the developer with access to specifics about the event such as which object received the event, the event's type, and which mouse button was clicked. Using the inline example again:

-
<script>
-  function clickHandler(event) {
-    var eType = event.type;
-    /* the following is for compatibility */
-    /* Moz populates the target property of the event object */
-    /* IE populates the srcElement property */
-    var eTarget = event.target || event.srcElement;
-
-    alert( "Captured Event (type=" + eType + ", target=" + eTarget + ")" );
-  }
-</script>
-<span onclick="clickHandler(event);">Click Here</span>
-

In addition to registering to receive events in your HTML, you can likewise set the same attributes of any HTMLElement objects generated by your JavaScript. The example below instantiates (creates) a span object, appends it to the page body, and registers the span object to receive mouse-over, mouse-out, mouse-down, and mouse-up events.

-
<body></body>
-<script>
-  function mouseeventHandler(event) {
-    /* The following is for compatibility */
-    /* IE does NOT by default pass the event object */
-    /* obtain a ref to the event if one was not given */
-    if (!event) event = window.event;
-
-    /* obtain event type and target as earlier */
-    var eType = event.type;
-    var eTarget = event.target || event.srcElement;
-    alert(eType +' event on element with id: '+ eTarget.id);
-  }
-
- function onloadHandler() {
-   /* obtain a ref to the 'body' element of the page */
-   var body = document.body;
-   /* create a span element to be clicked */
-   var span = document.createElement('span');
-   span.id = 'ExampleSpan';
-   span.appendChild(document.createTextNode ('Click Here!'));
-
-   /* register the span object to receive specific mouse events -
-      notice the lowercase of the events but the free choice in the names of the handlers you replace them with.
-   */
-   span.onmousedown = mouseeventHandler;
-   span.onmouseup = mouseeventHandler;
-   span.onmouseover = mouseeventHandler;
-   span.onmouseout = mouseeventHandler;
-
-   /* display the span on the page */
-   body.appendChild(span);
-}
-
-window.onload = onloadHandler; // since we replace the handler, we do NOT have () after the function name
-</script>
-

Example: Catching a keyboard event

-

Similar to the "Catching a mouse event" example above, catching a keyboard event relies on exploring the JavaScript event system. Keyboard events are fired whenever any key is used on the keyboard.

-

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

-
    -
  • KeyPress - issued when a key is depressed and released
    • -
  • KeyDown - issued when a key is depressed but hasn't yet been released
    • -
  • KeyUp - issued when a key is released
    • -
  • 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.
    • -
-

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

-

The simplest method for capturing keyboard events is again to register event handlers within the HTML, specifying the individual events as attributes for your element. Example:

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

As with mouse events, the JavaScript code you wish to execute can be inlined as the attribute value or you can call a function which has been defined in a <script> block within the HTML page:

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

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

-
<script type="text/javascript">
-  function keypressHandler(evt) {
-      var eType = evt.type; // Will return "keypress" as the event type
-      /* here we again need to use a cross browser method
-         mozilla based browsers return which and others keyCode.
-         The Conditional operator or ternary is a good choice */
-      var keyCode = evt.which?evt.which:evt.keyCode;
-      var eCode = 'keyCode is ' + keyCode;
-      var eChar = 'charCode is ' + String.fromCharCode(keyCode); // or evt.charCode
-      alert ("Captured Event (type=" + eType + ", key Unicode value=" + eCode + ", ASCII value=" + eChar + ")");
-   }
-</script>
-<input onkeypress="keypressHandler(event);" />
-

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

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

Here is a complete example that shows key event handling:

-
<!DOCTYPE html>
-<html>
-<head>
-  <script>
-    var metaChar = false;
-    var exampleKey = 16;
-    function keyEvent(event) {
-      var key = event.keyCode || event.which; // alternative to ternary - if there is no keyCode, use which
-      var keychar = String.fromCharCode(key);
-      if (key == exampleKey) {
-        metaChar = true;
-      }
-      if (key != exampleKey) {
-         if (metaChar) {
-            alert("Combination of metaKey + " + keychar)
-            metaChar = false;
-         } else {
-           alert("Key pressed " + key);
-         }
-      }
-    }
-    function metaKeyUp(event) {
-      var key = event.keyCode || event.which;
-      if (key == exampleKey) { metaChar = false; }
-    }
-  </script>
-</head>
-<body onkeydown="keyEvent(event)" onkeyup="metaKeyUp(event)">
-    Try pressing any key!
-</body>
-</html>
-

Browser bugs and quirks

-

The two properties made available through the key events are keyCode and charCode. In simple terms, keyCode refers to the actual keyboard key that was pressed by the user, while charCode is intended to return that key's ASCII value. These two values may not necessarily be the same; for instance, a lower case 'a' and an upper case 'A' have the same keyCode, because the user presses the same key, but a different charCode because the resulting character is different.

-

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

-

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

-

{{ draft() }}

-

Example: Dragging images around

-

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

-
<!DOCTYPE html>
-<html>
-<head>
-<style>
-img { position: absolute; }
-</style>
-
-<script>
-window.onload = function() {
-
-  movMeId = document.getElementById("ImgMov");
-  movMeId.style.top = "80px";
-  movMeId.style.left = "80px";
-
-  document.onmousedown = coordinates;
-  document.onmouseup = mouseup;
-
-  function coordinates(e) {
-    if (e == null) { e = window.event;}
-
-    // e.srcElement holds the target element in IE, whereas e.target holds the target element in Firefox
-    // Both properties return the HTML element the event took place on.
-
-    var sender = (typeof( window.event ) != "undefined" ) ? e.srcElement : e.target;
-
-    if (sender.id=="ImgMov") {
-      mouseover = true;
-      pleft = parseInt(movMeId.style.left);
-      ptop = parseInt(movMeId.style.top);
-      xcoor = e.clientX;
-      ycoor = e.clientY;
-      document.onmousemove = moveImage;
-      return false;
-    }
-    return false;
-  }
-
-  function moveImage(e) {
-    if (e == null) { e = window.event; }
-    movMeId.style.left = pleft+e.clientX-xcoor+"px";
-    movMeId.style.top = ptop+e.clientY-ycoor+"px";
-    return false;
-  }
-
-  function mouseup(e) {
-    document.onmousemove = null;
-  }
-}
-</script>
-</head>
-
-<body>
-  <img id="ImgMov" src="http://placehold.it/100x100&text=JS" width="64" height="64">
-  <p>Drag and drop around the image in this page.</p>
-</body>
-
-</html>
-

Example: Resizing things

-
- Example of resizing an image (the actual image is not resized, only the image's rendering.) - 
  <!DOCTYPE html>
-  <html>
-    <head>
-      <style>
-        #resizeImage {
-          margin-left: 100px;
-        }
-      </style>
-      <script>
-      window.onload = function() {
-
-        var resizeId = document.getElementById("resizeImage");
-        var resizeStartCoordsX,
-            resizeStartCoordsY,
-            resizeEndCoordsX,
-            resizeEndCoordsY;
-
-        var resizeEndCoords;
-        var resizing = false;
-
-        document.onmousedown = coordinatesMousedown;
-        document.onmouseup = coordinatesMouseup;
-
-        function coordinatesMousedown(e) {
-          if (e == null) {
-            e = window.event;
-          }
-
-          var element = (typeof( window.event ) != 'undefined' ) ? e.srcElement : e.target;
-
-          if (element.id == "resizeImage") {
-            resizing = true;
-            resizeStartCoordsX = e.clientX;
-            resizeStartCoordsY = e.clientY;
-          }
-          return false;
-        }
-
-        function coordinatesMouseup(e) {
-          if (e == null) {
-            e = window.event;
-          }
-
-          if (resizing === true) {
-            var currentImageWidth = parseInt(resizeId.width);
-            var currentImageHeight = parseInt(resizeId.height);
-
-            resizeEndCoordsX = e.clientX;
-            resizeEndCoordsY = e.clientY;
-
-            resizeId.style.height = currentImageHeight - (resizeStartCoordsY - resizeEndCoordsY) + 'px';
-            resizeId.style.width = currentImageWidth - (resizeStartCoordsX - resizeEndCoordsX) + 'px';
-
-            resizing = false;
-          }
-          return false;
-        }
-      }
-      </script>
-    </head>
-
-    <body>
-      <img id="resizeImage" src="http://upload.wikimedia.org/wikipedia/commons/e/e7/Mozilla_Firefox_3.5_logo_256.png"
-width="64" height="64">
-      <p>Click on the image and drag for resizing.</p>
-    </body>
-
-  </html>
-
-

Example: Drawing Lines

-
<!DOCTYPE html>
-<html>
-<head>
-<script>
-function linedraw(ax,ay,bx,by)
-{
-    if(ay>by)
-    {
-        bx=ax+bx;
-        ax=bx-ax;
-        bx=bx-ax;
-        by=ay+by;
-        ay=by-ay;
-        by=by-ay;
-    }
-    var calc=Math.atan((ay-by)/(bx-ax));
-    calc=calc*180/Math.PI;
-    var length=Math.sqrt((ax-bx)*(ax-bx)+(ay-by)*(ay-by));
-    document.body.innerHTML += "<div id='line' style='height:" + length + "px;width:1px;background-color:black;position:absolute;top:" + (ay) + "px;left:" + (ax) + "px;transform:rotate(" + calc + "deg);-ms-transform:rotate(" + calc + "deg);transform-origin:0% 0%;-moz-transform:rotate(" + calc + "deg);-moz-transform-origin:0% 0%;-webkit-transform:rotate(" + calc  + "deg);-webkit-transform-origin:0% 0%;-o-transform:rotate(" + calc + "deg);-o-transform-origin:0% 0%;'></div>"
-}
-</script>
-</head>
-<body onload="linedraw(200,400,500,900);"> <!-- Replace with your co-ordinate -->
-</body>
-</html>
-

 

diff --git a/files/it/web/javascript/guida/controllo_del_flusso_e_gestione_degli_errori/index.html b/files/it/web/javascript/guida/controllo_del_flusso_e_gestione_degli_errori/index.html deleted file mode 100644 index 76e72f5cba..0000000000 --- a/files/it/web/javascript/guida/controllo_del_flusso_e_gestione_degli_errori/index.html +++ /dev/null @@ -1,461 +0,0 @@ ---- -title: Controllo del flusso di esecuzione e gestione degli errori -slug: Web/JavaScript/Guida/Controllo_del_flusso_e_gestione_degli_errori -tags: - - Controllo di flusso - - Guide - - JavaScript - - Principianti - - 'l10n:priority' -translation_of: Web/JavaScript/Guide/Control_flow_and_error_handling ---- -
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Grammar_and_types", "Web/JavaScript/Guide/Loops_and_iteration")}}
- -

JavaScript prevede un insieme di istruzioni compatto, specifico per il controllo del flusso di esecuzione, che si può utilizzare per aggiungere un'elevata interattività alle proprie applicazioni. Questo capitolo fornisce una panoramica su queste istruzioni.

- -

Il JavaScript reference contiene dettagli esaustivi sulle istruzioni di questo capitolo. Il carattere punto e virgola (;) è usato per separare le varie istruzioni del codice JavaScript.

- -

Ogni espressione JavaScript è a sua volta un'istruzione. Si veda a riguardo Espressioni ed operatori per una completa descrizione delle espressioni.

- -

Costrutto di blocco

- -

Un costrutto fondamentale è il blocco, usato per raggruppare insieme più istruzioni, delimitato da un paio di parentesi graffe ({}):

- -
{
-  istruzione_1;
-  istruzione_2;
-  .
-  .
-  .
-  istruzione_n;
-}
-
- -

Esempi

- -

Il blocco è comunemente usato assieme alle istruzioni per il controllo del flusso (e.g. if, for, while).

- -
while (x < 10) {
-  x++;
-}
-
- -

Qui, { x++; } rappresenta un blocco.

- -

Importante: JavaScript prima di ECMAScript2015 non aveva la visibilità di blocco. Le variabili definite nel blocco hanno una visibilità a livello di funzione o di script in cui sono contenute e l'effetto di assegnare loro un valore persiste oltre il blocco stesso. Cioè il blocco non definisce un campo di visibilità. I blocchi "Indipendenti" ("Standalone" blocks) in JavaScript possono dare un risultato differente da quello che avrebbero prodotto in C o in Java. Per esempio:

- -
var x = 1;
-{
-  var x = 2;
-}
-console.log(x); // produce 2
-
- -

Risulta 2 perché l'istruzione di definizione var x dentro il blocco ha lo stesso campo di visibilità dell'istruzione var x al di fuori del blocco. Mentre in C o Java, il codice equivalente avrebbe prodotto 1.

- -

A partire da ECMAScript2015, la dichiarazione di variabile con l'istruzione let ha visibilità di blocco. Si veda il riferimento a {{jsxref("Statements/let", "let")}} per ulteriori informazioni.

- -

Costrutti Condizionali

- -

Un costrutto condizionale è un insieme di istruzioni che vengono eseguite se una specifica condizione risulta vera. JavaScript prevede due costrutti condizionali: if...else e switch.

- -

Costrutto if...else

- -

Si usa il costrutto if per eseguire un blocco di istruzioni se una condizione logica è vera. Si usa la clausola opzionale else per eseguire istruzioni nel caso in cui la stessa condizione sia falsa. Un costrutto if...else si presenta come qui sotto:

- -
if (condizione) {
-  istruzioni_se_vera_la_condizione;
-} else {// opzionale
-  istruzioni_se_falsa_la_condizione;
-}
- -

Qui la condizione è qualsiasi espressione che sia valutabile come vera oppure falsa (true o false). Si veda il riferimento a Boolean per una spiegazione su cosa possa essere valutabile come true o false. Se la condizione viene valutata true, istruzioni_se_vera_la_condzione verrà eseguito, altrimenti verrà eseguito istruzioni_se_falsa_la_condzione. istruzioni_se_vera_la_condzione e istruzioni_se_falsa_la_condzione possono essere qualsiasi istruzione, incluso un altro if.

- -

Si possono pure combinare le istruizioni else if per testare molteplici condizioni in sequenza, come il seguente codice dimostra:

- -
if (condizione_1) {
-  istruzione_1;
-} else if (condizione_2) {
-  istruzione_2;
-} else if (condizione_n) {
-  istruzione_n;
-} else {
-  ultima_istruzione;
-}
-
- -

Nel caso di condizioni plurime solo la prima che sia valutata come vera sarà eseguita. Per eseguire più istruzioni si devono raggruppare in un blocco ({ ... }) . In generale è buona pratica usare un blocco specialmente se si usano if annidati:

- -
if (condizione) {
-  istruzione_1_eseguita_se_vera_la_condizione;
-  istruzione_2_eseguita_se_vera_la_condizione;
-  ...
-} else {
-  istruzione_3_eseguita_se_falsa_la_condizione;
-  istruzione_4_eseguita_se_falsa_la_condizione;
-  ...
-}
-
- -
Non è consigliabile usare la semplice assegnazione in una espressione condizionale, perché l'assegnamento potrebbe essere confuso con il segno di uguaglianza quando si dia un'occhiata rapida al codice. Ad esempio, non si usi il seguente codice:
- -
- -
if (x = y) {// questa è una assegnazione
-  /* istruzioni qui */
-}
- -

Se si deve proprio usare un assegnamento in una espressione condizionale è pratica comune aggiungere un paio di parentesi tonde attorno all'assegnamento. Per esempio:

- -
if ((x = y)) {
-  /* istruzioni qui */
-}
-
- -

Valori valutabili a false

- -

I seguenti valori si valutano a false (sono anche detti {{Glossary("Falsy")}} value):

- -
    -
  • false
    • -
  • undefined
    • -
  • null
    • -
  • 0
    • -
  • NaN
    • -
  • la stringa vuota ("")
    • -
- -

Tutti gli altri valori, inclusi gli oggetti, saranno valutati a true in una istruzione condizionale.

- -

Non si confonda il valori primitivi booleani true e false con i valori true e false dell'oggetto {{jsxref("Boolean")}}. Ad esempio:

- -
var b = new Boolean(false);
-
-if (b) // questa condizione è valutata a true
-       // perché 'b' in questo caso è un oggetto
-       // e si sa che tutti gli oggetti sono valutati a true
-
-if (b == true) // mentre questa a false,
-               // perché si va a prelevare il contenuto dell'oggetto 'b' che è false
-
- -

Esempi

- -

Nell'esempio a seguire la funzione controllaDati ritorna true se il numero di caratteri contenuti nella proprietà value dell'oggetto Text (treCaratteri) è tre, altrimenti mostra un popup di alert e, infine, ritorna il valore false.

- -
function controllaDati() {
-  if (document.form1.treCaratteri.value.length == 3) {
-    return true;
-  } else {
-    alert("Immetti esattemente tre caratteri. " +
-    document.form1.treCaratteri.value + " non è valido.");
-    return false;
-  }
-}
-
- -

Costrutto switch

- -

Un costrutto switch permette ad un programma di valutare un'espressione e tentare di trovare la corrispondenza esatta tra il valore risultante dalla valutazione dell'espressione e l'etichetta specificata nella clausola case. Se si incontra una corrisopondenza il programma eseguirà le istruzioni associate. Un costrutto switch si presenta  come nell'esempio qui sotto riportato:

- -
switch (espressione) {
-  case etichetta_1:
-    istruzione_1
-    [break;]// opzionale
-  case etichetta_2:
-    istruzione_2
-    [break;]
-    ...
-  default:
-    istruzioni_di_default
-    [break;]
-}
-
- -

Il programma cerca la prima corrispondenza tra il valore ottentuto della valutazione dell'espressione e l'etichetta nella clausola case, poi trasferisce il controllo al corpo della medesima clausola eseguendo le istruzioni relative. Se non è stata trovata alcuna corrispondeza il programma va alla clausola opzionale default e, se la trova, esegue le istruizioni ad essa relative. Se non è stata data alcuna clausola default il programma continuerà con l'istruzione successiva al blocco switch. La clausola default è l'ultima che appare nel blocco switch, ma questa è una convenzione non la regola.

- -

Il break opzionale, associato con ogni clausola case, assicura che il programma esca dal blocco switch una volta eseguite le istruzioni associate alla clausola e continui la sua esecuzione all'istruzione che segue il costrutto switch. Se il break è omesso il programma continua la sua esecuzione all'istruzione successiva nello stesso costrutto switch, ciò significa che eseguirà le istruzioni associate alla clausola case/default (se ci sono) successiva a quella appena terminata.

- -

Esempi

- -

Nel seguente esempio, se la variabile tipidifrutto contiene "Banane", il programma cercherà la corrispondente clausola case "Banane" ed eseguirà le istruzioni associate. Quando incontra il break, il porgramma esce dallo switch ed esegue l'istruzione successiva al blocco di switch. Se, invece, il break fosse stato omesso le istuzioni collegate con la clausola case "Ciliege" sarebbero state eseguite.

- -
switch (tipidifrutta) {
-  case "Arance":
-    console.log("Le Arance sono a €0.59 il chilo.");
-    break;
-  case "Mele":
-    console.log("Le mele sono a €0.32 il chilo.");
-    break;
-  case "Banane":
-    console.log("Le Banane sono €0.48 il chilo.");
-    break;
-  case "Ciliege":
-    console.log("Le ciliege sono s €3.00 il chilo.");
-    break;
-  case "Mango":
-    console.log("Il Mango è è €0.56 il chilo.");
-    break;
-  case "Papaia":
-    console.log("Il Mango e la Papaia sono a €2.79 il chilo.");
-    break;
-  default:
-    console.log("Spiacenti, abbiano terminato " + tipidifrutta + ".");
-}
-console.log("C'è qualcos'altro che ti piace?");
- -

Costrutti di gestione delle Eccezioni

- -

Si può sollevare/generare un'eccezione attraverso l'istruzione throw e si possono gestire usando il costrutto try...catch.

- - - -

Tipi di eccezione

- -

Quasi ogni tipo di oggetto può essere usato per sollevare/generare un'eccezione JavaScript. Tuttavia non tutti gli oggetti utili a questo scopo sono creati in modo eguale. Mentre è abbastanza comune usare numeri o stringhe per indicare un errore, è più efficace usare uno dei tipi di eccezione specificatamente creati a questo scopo:

- - - -

Istruzione throw

- -

Si usa l'istruzione throw per sollevare/generare un'eccezione. Quando si genera un'eccezione va specificata un'espressione che produca un valore da usarsi come eccezione:

- -
throw espressione;
-
- -

Si può usare una qualsiasi espressione con l'istruzione throw e non solamente espressioni di un certo tipo. Il seguente pezzo di codice lo dimostra:

- -
throw "Errore2";  // tipo String
-throw 42;         // tipo Number
-throw true;       // tipo Boolean
-throw {toString: function() { return "Sono un oggetto!"; } };
-
- -
Note: Si può specificare un oggetto quando si genera un'eccezione. Si può poi far riferimento alle proprietà dell'oggetto nel blocco catch. Il seguente esempio crea un oggetto myUserException del tipo UserException e lo usa nell'istruzione throw.
- -
// Crea un oggetto di tipo UserException
-function UserException(messaggio) {
-  this.message = messaggio;
-  this.name    = "UserException";
-}
-
-// Sovrascrive il metodo toString() affinché l'oggetto
-// dia una descrizione di se stesso al momento di usarlo come stringa.
-// (e.g. come messaggio nella console degli errori)
-UserException.prototype.toString = function() {
-  return this.name + ': "' + this.message + '"';
-}
-
-// Crea un'istanza dell'oggetto e lo usa nell'istruzione throw
-throw new UserException("Valore troppo alto!);
- -

Costrutto try...catch (... finally)

- -

Il costrutto try...catch racchiude un blocco di istruzioni, che potrebbero generare un'eccezione, e specifica uno o più azioni per gestire l'eccezione che potrebbe essere sollevata. Se viene sollevata un'eccezione il costrutto try...catch la cattura.

- -

Il costrutto try...catch è costituito da un blocco try, che contiene a sua volta uno o più istruzioni, e da al più (vedi nota più sotto) un blocco catch, contenenti istruzioni per gestire l'eccezione che eventulmente sarà sollevata all'interno del blocco try.  Cioè si vorrebbe che il blocco try fosse eseguito senza errori, ma se non fosse possibile si vuole che l'esecuzione passi al blocco catch. Se un'istruzione contenuta nel blocco (o in una funzione chiamata all'interno del blocco) try genera un'eccezione, il controllo passa immediatamente al blocco catch. Se nessuna eccezione è sollevata all'interno del blocco try, il blocco catch è semplicemente ignorato. Il blocco finally (opzionale se c'è il blocco catch, ma necessario se manca quest'utimo) è eseguito subito dopo l'esecuzione dei blocchi try/catch, ma prima di una qualsiasi istruzione che segua gli stessi try...catch...finally.

- -
-

In realtà il browser Firefox è in grado di suppostare i blocchi catch condizionati, oltre quello incondizionato, rendendo virtualmeente illimitata la definizione di più di un blocco catch per uno stesso blocco try. Tuttavia questa caratteristica non è standard e se ne scoraggia l'uso, si veda a proposito la referenza {{jsxref("Statements/try...catch", "try...catch")}}.

-
- -

L'esempio che segue usa il costrutto di try...catch. L'esempio chiama una funzione che ritorna il nome del mese estratto da un array grazie al parametro mo passato alla funzione. Se il valore passato non corrispondesse al numero di mese consentito (tra 1 e 12), un'eccezione verrebbe sollevata col valore "numeroMeseNonValido" e il blocco catch assegnerebbe alla variabile nomeDelMese il vaore di "sconoscuto".

- -
function getNomeDelMese(mo) {
-  mo = mo - 1; // Sistema il numero del mese (1 = Gen, 12 = Dic)
-  var mesi = ["Gen","Feb","Mar","Apr","Mag","Giu","Lug",
-                "Ago","Set","Ott","Nov","Dic"];
-  if (mesi[mo]) {
-    return mesi[mo];
-  } else {
-    throw "numeroMeseNonValido"; //l'istruzione throw è usata qui
-  }
-}
-
-try { // blocco try
-  nomeDelMese = getNomeDelMese(mese); // la funzione potrebbe sollevare un'eccezione
-}
-catch (eccezione) {
-  nomeDelMese = "sconosciuto";
-  logDegliErrori(eccezione); // Passa l'eccezione a un gestore -> una propria funzione
-
- -

Il blocco catch

- -

Si può usare il blocco catch per gestire le eccezioni che possono essere generate nel blocco try.

- -
catch (catchID) {
-  // istruzioni
-}
-
- -

Il blocco catch viene specificato un identificatore (catchID nel precedente esempio) che conterrà il valore specificato nell'istruzione throw. Si può usare questo identificatore per ottenere informazione ulteriori circa l'eccezione che è stata generata. JavaScript crea questo identificatore quando si entra nel blocco catch. L'identificatore è valido solo per la durata in esecuzione del blocco catch stesso, infatti usciti dal blocco catch termina la sua esistenza e non è più disponibile.

- -

Per esempio, il seguente codice solleva un'eccezione. Quando l'eccezione si realizza il controllo passa al blocco catch.

- -
try {
-  throw "miaEccezione"; // genera una eccezione
-}
-catch (eccezione) { // "eccezione" è l'identificatore con conterrà
-  // l'oggetto usato nell'istruzione thrown, in questo caso la stringa "miaEccezione"
-
-  // istruzioni che gestiscono l'eccezione
-  gestisciErrori(eccezione); // passa l'oggetto eccezione al gestore
-}
-
- -

Il blocco finally

- -

Il blocco finally contiene istruzioni che vengono eseguite subito dopo i blocchi try ed eventualmente catch, ma prima di ogni altra istruzione che segua il costrutto try...catch...finally. Il blocco finally è eseguito indipendentemente dal fatto che un'eccezione sia o meno generata. Se un'eccezione viene sollevata le istruzioni nel blocco finally saranno eseguite anche se il blocco catch corrispondente la gestisce.

- -

Si può usare il blocco finally per permettere agli script di terminare elegantemente in presenza di un'eccezione, ad esempio, se si deve liberare una risorsa che lo script trattiene. Il seguente esempio apre un file e lo usa (JavaScript lato server permette di accedere al file system). Se si solleva un'eccezione mentre il file è aperto il blocco finally chiude il file prima che lo script termini/fallisca.

- -
apriMioFile();
-try {
-  ScriviMioFile(dati); //Qui si può verificare un'eccezione/errore
-} catch(e) {
-  gestisciErrore(e); // Se avviene un errore lo si gestisce
-} finally {
-  chiudiMioFile(); // chiude comunque la risorsa
-}
-
- -

Se il blocco finally ritorna un valore questo diviene il valore ritornato dall'intero costrutto try-catch-finally a dispetto di qualsiasi valore eventualmente ritornato dai blocchi try/catch:

- -
function f() {
-  try {
-    console.log(0);
-    throw "fasulla";
-  } catch(e) {
-    console.log(1);
-    return true; // quasta istruzione di ritorno è sospesa
-                 // finché il blocco finally non termina
-    console.log(2); // istruzione non raggiungibile
-  } finally {
-    console.log(3);
-    return false; // sovrascrive il precedente "return"
-    console.log(4); // istruzione non raggiungibile
-  }
-  // "return false" è eseguito ora
-  console.log(5); // istruzione non raggiungibile
-}
-f(); // nel log a console troviamo stampato: 0, 1, 3 e false
-
- -

La sovrascrittura dei valori di ritorno, da parte del blocco finally, colpisce anche le eccezioni generate e/o ri-generate dentro il blocco catch:

- -
function f() {
-  try {
-    throw "fasulla";
-  } catch(e) {
-    console.log('catturata l\'eccezione interna "fasulla"');
-    throw e; // Quasta istruzione throw è sospesa
-             // finché il blocco finally non termina
-  } finally {
-    return false; // sovrascrive il precedente "throw"
-  }
-  // "return false" è eseguita ora
-}
-
-try {
-  f();
-} catch(e) {
-  // Questo blocco non sarà mai raggiunto in quanto l'istruzione
-  // throw dentro il blocco catch (vedi più sopra) è sovrascritta
-  // dal return della clausola finally
-  console.log('catturata l\'eccezione esterna "fasulla"');
-}
-
-// OUTPUT
-// catturata l'eccezione interna "fasulla"
- -

try...catch innestati

- -

Si possono annidare try...catch. Se un blocco try...catch interno non ha il blocco catch (in questo caso è d'obbligo che ci sia il blocco finally, anche vuoto, altrimenti si ha un errore sintattico), il blocco catch, del costrutto try...catch che lo racchiude, catturerà l'eventuale eccezione.

- -
try{// try-catch esterno
-  try{
-   // try-finally interno
-    throw "eccezione fasulla";
-  }
-  // Manca il blocco catch, ma deve esserci il blocco finally
-  finally{
-    // vuoto
-  }
-}
-catch(e){
-  // Viene catturata l'eccezione sollevata dal blocco più interno
-  console.log("cattura esterna: " + e);
-}
-
-//nella console sarà stampato: "cattura esterna: eccezione fasulla"
- -

Utilizzo degli oggetti Error

- -

A seconda del tipo di errore se si è in grado di usare le proprietà 'name' e 'message' si può avere un messaggio più ricco. 'name' fornisce la classe generale dell'Error (e.g., 'DOMException' o 'Error'), mentre 'message' generalmente fornisce un messaggio più conciso rispetto al convertire l'oggetto corrispondente all'errore in una stringa.

- -

Se si crea una propria eccezione affiché ci si avvantaggi di queste proprietà (come nel caso, ad esempio, del blocco catch che non discrimini tra l'oggetto rappresentante la propria eccezione e quello di sistema) si può usare il costruttore dell'oggetto Error:

- -
function faiQualcosaSoggettaAdErrore () {
-  if (codiceCheProduceUnErrore()) {
-    throw (new Error('Il Messaggio'));
-  } else {
-    faiQualcosaPerOttenereUnEorreDiJavascript();
-  }
-}
-....
-try {
-  faiQualcosaSoggettaAdErrore();
-} catch (e) {
-  console.log(e.name);    // Scrive a console: 'Error'
-  console.log(e.message); // Scrive a console: 'Il Messaggio' o un messaggio di errore di JavaScript)
-}
- -

I Promise

- -

A partire da ECMAScript2015, JavaScript acquisisce il supporto agli oggetti {{jsxref("Promise")}} permettendo di controllare l'esecuzione di operazioni in modo differito e asincrono.

- -

Un Promise può essere in uno di questi stati:

- -
    -
  • pending: stato iniziale, non fulfilled o rejected.
    • -
  • fulfilled: operazione risucita.
    • -
  • rejected: operazione fallita.
    • -
  • settled: il Promise è alternativamente fulfilled o rejected, ma non pending.
    • -
- -

- -

Caricare un'immagine con XHR

- -

Un esempio di semplice utilizzo di un Promise e XMLHttpRequest per caricare un'immagine è disponibile nel repository promise-test di MDN GitHub. Si può anche vedere in azione. Ogni passo  è commentato e ti permette di seguire il Promise e l'architettura XHR da vicino. Qui, invece, la versione non commentata che mostra l'utilizzo del Promise per darti un'idea del suo funzionamento:

- -
function caricaImmagine(url) {
-  return new Promise(function(resolve, reject) {
-    var request = new XMLHttpRequest();
-    request.open('GET', url);
-    request.responseType = 'blob';
-    request.onload = function() {
-      if (request.status === 200) {
-        resolve(request.response);
-      } else {
-        reject(Error('L\'immagine non è stata caricata con successo; codice di errore:'
-                     + request.statusText));
-      }
-    };
-    request.onerror = function() {
-      reject(Error('C\'è stato un errore di connessione'));
-    };
-    request.send();
-  });
-}
- -

Per informazioni più dettagliate si veda la pagina di riferimento relativa al {{jsxref("Promise")}}.

- -
{{PreviousNext("Web/JavaScript/Guide/Grammar_and_types", "Web/JavaScript/Guide/Loops_and_iteration")}}
diff --git a/files/it/web/javascript/guida/dettagli_object_model/index.html b/files/it/web/javascript/guida/dettagli_object_model/index.html deleted file mode 100644 index 1e2d4dc74f..0000000000 --- a/files/it/web/javascript/guida/dettagli_object_model/index.html +++ /dev/null @@ -1,727 +0,0 @@ ---- -title: Dettagli del modello a oggetti -slug: Web/JavaScript/Guida/Dettagli_Object_Model -tags: - - Guide - - Intermediate - - JavaScript -translation_of: Web/JavaScript/Guide/Details_of_the_Object_Model ---- -
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Working_with_Objects", "Web/JavaScript/Guide/Iterators_and_Generators")}}
- -
-

Il contenuto di questo articolo è in discussione. Lascia un feedback e aiutaci a rendere migliore questa pagina: {{bug(1201380)}}.

-
- -

JavaScript è un linguaggio ad oggetti basato su prototipi, piuttosto che sulle classi. A causa di questa diversa base, può essere meno evidente come JavaScript permette di creare gerarchie di oggetti e di avere l'ereditarietà delle proprietà e dei loro valori. Questo articolo cerca di chiarire questo aspetto.

- -

Questo capitolo presuppone una certa familiarità con JavaScript e con l'uso delle funzioni per la creazione di semplici oggetti.

- -

Linguaggi class-based vs. linguaggi prototype-based

- -

I linguaggi ad oggetti basati su classi, come Java e C++, si basano su due entità distinte: le classi (classes) e le istanze (instances).

- -
    -
  • Una classe definisce tutte le proprietà (considering methods and fields in Java, or members in C++, to be properties) che caratterizzano una determinata collezione di oggetti. Una classe è un'entità astratta, più che un membro del gruppo di oggetti che descrive. Per esempio, la classe Employee può rappresentare il gruppo di tutti i dipendenti.
    • -
  • Un'istanza, d'altra parte, è l'istanziazione di una classe; cioè uno dei suoi membri. Per esempio Victoria può essere un'istanza della classe Employee, che rappresenta un particolare individuo come un dipendente. Un'istanza ha esattamente le stesse proprietà della classe a cui appartiene (né più, né meno).
    • -
- -

Un linguaggio basato su prototipi, come JavaScript, non fa questa distinzione: ha solo oggetti. Introduce la nozione di oggetto prototipo (prototypical object), un oggetto usato come modello da cui prendere le proprietà iniziali per un nuovo oggetto. Ogni oggetto può specificare le sue proprietà, anche quando viene creato o in fase di esecuzione.Inoltre, ogni oggetto può essere associato ad un altro oggetto come prototipo, consentendo al secondo oggetto di condividere le proprietà del primo.

- -

Definizione di una classe

- -

Nei linguaggi basati su classi, le classi vengono definite in class definition separate. In queste definizioni è possibile specificare metodi speciali, chiamari costruttori (constructors), per creare istanze della classe. Un costruttore può specificare i valori iniziali per le proprietà dell'istanza ed eseguire altre elaborazioni adatte al momento della creazione. Per creare le istanze di una classe si utilizza l'operatore new associato al metodo costruttore.

- -

JavaScript segue un modello simile, ma non prevede la definizione della classe separata dal costruttore. Invece, per creare oggetti con un particolare set di proprietà e valori si definisce una funzione costruttore. Ogni funzione JavaScript può essere usata come costruttore. Per creare un nuovo oggetto si utilizza l'operatore new associato a una funzione costruttore.

- -

Sottoclassi e ereditarietà

- -

In un linguaggio basato su classi, si crea una gerarchia tra le classi attraverso le definizioni delle classi stesse. All'interno della definizione di una classe è possibile specificare che la nuova classe è una sottoclasse (subclass) di una classe esistente. La sottoclasse eredita tutte le proprietà della superclasse e può inoltre aggiungere nuove proprietà o modificare quelle ereditate. Per esempio, assumiamo che la classe Employee include solo le proprietà name e dept, e Manager è una sottoclasse di Employee che aggiunge la proprietà reports. In questo caso, un'istanza della classe Manager avrà tutte e tre le proprietà: name, dept, e reports.

- -

JavaScript implementa l'ereditarietà permettendo di associare un oggetto prototipo ad ogni funzione costruttore. Quindi, è possibile ricreare esattamente l'esempio visto in precedenza, ma usando una terminologia leggermente diversa. Innanzitutto  si definisce la funzione costruttore Employee, specificando le proprietà name e dept. In seguito, si definisce la funzione costruttore Manager, chiamando il costruttore Employee e specificando la proprietà reports. Infine, si assegna a un nuovo oggetto derivato da Employee.prototype come il prototipo per la funzione costruttore Manager. Quando si crea un nuovo Manager, questo eredita le proprietà name e dept dall'oggetto Employee.

- -

Aggiungere e rimuovere proprietà

- -

Nei linguaggi basati su classi, una classe viene solitamente creata in fase di compilazione mentre le istanze possono essere create in fase di compilazione o in fase di esecuzione. Non è possibile cambiare il numero o il tipo di proprietà di una classe dopo che questa è stata definita. In JavaScript in fase di esecuzione si possono aggiungere o rimuovere proprietà a qualunque oggetto. Se si aggiunge una proprietà a un oggetto che è usato come prototipo per un gruppo di oggetti, anche gli oggetti del gruppo ereditano la nuova proprietà.

- -

Riepilogo delle differenze

- -

La tabella seguente fornisce un breve riepilogo di alcune di queste differenze. Il resto di questo capitolo descrive nel detteglio l'uso in JavaScript di costruttori e prototipi per creare una gerarchia di oggetti e lo confronta con la procedura che si userebbe in Java.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Confronto tra il sistema di oggetti basato su classi (Java) e il sistema di oggetti basato su prototipi (JavaScript)
Class-based (Java)Prototype-based (JavaScript)
Classi e istanze sono entità separate.Tutti gli oggetti possono ereditare da un altro oggetto.
Definire una classe con una definizione; istanziare una classe con un metodo costruttoreDefinire e creare una collezione di oggetti con una funzione costruttore.
Creare un singolo oggetto con l'operatore new.Uguale.
Costruire una gerarchia di oggetti usando la definizione di classe per definire le sottoclassi di classi esistenti.Costruire una gerarchia di oggetti assegnando un oggetto come prototipo associato a una funzione costruttore.
Ereditare le proprietà seguendo la catena delle classi.Ereditare le proprietà seguendo la catena dei prototipi.
La definizione di classe specifica tutte le proprietà di tutte le istanze della classe. Non è possibile aggiungere proprietà dinamicamente durante l'esecuzione.La funzione costruttore o il prototipo specificano un set iniziale di proprietà. È possibile aggiungere o rimuovere dinamicamente proprietà ai singoli oggetti o all'intero gruppo di oggetti.
- -

L'esempio 'dipendente'

- -

Il resto di questo capitolo usa la gerarchia dei dipendenti mostrata nella figura seguente.

- -
-
-

Una semplice gerarchia con gli oggetti seguenti:

- -

-
- -
-
    -
  • Employee ha le proprietà name (il cui valore di default è una stringa vuota) e dept (il cui valore di default è "general").
    • -
  • Manager è basato su Employee. Aggiunge la proprietà reports  (il cui valore di default è un array vuoto, destinato a contenere una serie di oggetti Employee).
    • -
  • WorkerBee è anch'esso basato su Employee. Aggiunge la proprietà projects (il cui valore di default è un array vuoto, destinato a contenere una serie di stringhe).
    • -
  • SalesPerson è basato su WorkerBee. Aggiunge la proprietà quota (il cui valore di default è 100). Sovrascrive inoltre la proprietà dept con il valore "sales", che indica che tutti i venditori si trovano nello stesso dipartimento.
    • -
  • Engineer è basato su WorkerBee. Aggiunge la proprietà machine (il cui valore di default è una stringa vuota) e sovrascrive la proprietà dept con il valore "engineering".
    • -
-
-
- -

Creazione della gerarchia

- -

Ci sono diversi modi per definire una funzione costruttore appropriata per implementare la gerarchia dei dipendenti. Il modo scelto per definirli dipende molto da cosa si vuole riuscire a fare nella propria applicazione.

- -

Questa sezione mostra come usare definizioni molto semplici (e relativamente rigide) per dimostrare come far funzionare l'ereditarietà. In queste definizioni, quando si crea un oggetto non è possibile specificare il valore di nessuna proprietà. L'oggetto creato avrà semplicemente i valori di default, che potranno essere cambiati in un secondo momento.

- -

In una applicazione reale, probabilmente si vorranno definire dei costruttori che permettono di impostare i valori delle proprietà mentre si crea un oggetto (per maggiori informazioni si veda la sezione Costruttori più flessibili). Per adesso, queste semplici definizioni dimostrano come le proprietà vengono ereditate.

- -

Le seguenti definizioni Java e JavaScript di Employee sono simili. L'unica differenza è che in Java si ha la necessità di specificare il tipo di ogni proprietà (questo è dovuto al fatto che Java è un linguaggio fortemente tipizzato mentre JavaScript è un linguaggio a tipizzazione dinamica.

- -
-

JavaScript

- -
function Employee() {
-  this.name = "";
-  this.dept = "general";
-}
-
- -

Java

- -
public class Employee {
-   public String name = "";
-   public String dept = "general";
-}
-
-
- -

Le definizioni di Manager e WorkerBee mostrano la differenza nel modo di specificare l'oggetto seguente che si trova più in alto nella catena di ereditarietà. In JavaScript si aggiunge un'istanza prototipo come valore della proprietà prototype della funzione costrutore. È possibile farlo in qualsiasi momento dopo aver definito il costruttore. In Java, si specifica la superclasse all'interno della definizione della classe. Non è possibile cambiare la superclasse all'esterno della definizione.

- -
-

JavaScript

- -
function Manager() {
-  Employee.call(this);
-  this.reports = [];
-}
-Manager.prototype = Object.create(Employee.prototype);
-
-function WorkerBee() {
-  Employee.call(this);
-  this.projects = [];
-}
-WorkerBee.prototype = Object.create(Employee.prototype);
-
- -

Java

- -
public class Manager extends Employee {
-   public Employee[] reports = new Employee[0];
-}
-
-
-
-public class WorkerBee extends Employee {
-   public String[] projects = new String[0];
-}
-
-
-
-
- -

Le definizioni di Engineer e SalesPerson creano oggetti che discendono da  WorkerBee, e quindi da Employee. Un oggetto di questo tipo ha le proprietà di tutti gli oggetti che si trovano sopra di esso nella catena. Inoltre, queste definizioni sovrascrivono il valore ereditato delle proprietà  dept con nuovi valori specifici per questi oggetti.

- -
-

JavaScript

- -
function SalesPerson() {
-   WorkerBee.call(this);
-   this.dept = "sales";
-   this.quota = 100;
-}
-SalesPerson.prototype = Object.create(WorkerBee.prototype);
-
-function Engineer() {
-   WorkerBee.call(this);
-   this.dept = "engineering";
-   this.machine = "";
-}
-Engineer.prototype = Object.create(WorkerBee.prototype);
-
- -

Java

- -
public class SalesPerson extends WorkerBee {
-   public String dept = "sales";
-   public double quota = 100.0;
-}
-
-
-public class Engineer extends WorkerBee {
-   public String machine;
-   public String dept = "engineering";
-   public String machine = "";
-}
-
-
-
- -

Usando queste definizioni è possibile creare istanze di questi oggetti che ricevono i valori di default delle loro proprietà. La figura seguente illustra l'utilizzo di queste definizioni JavaScript per creare nuovi oggetti e mostra i valori delle diverse proprietà per questi nuovi oggetti.

- -
-

Nota: Il termine istanza ha uno specifico significato tecnico nei linguaggi basati su classi. In questi linguaggi, un'istanza è una singola istanziazione di una classe ed è fondamentalmente differente dala classe. In JavaScript, "istanza" non ha questo significato tecnico perché JavaScript non ha questa differenza tra classi e istanze. Tuttavia, parlando di JavaScript, "istanza" può essere usato in modo informale per riferirsi a un oggetto creato usando una particolare funzione costruttore. Quindi, in questo esempio, è possibile dire che jane è un'istanza di Engineer. Allo stesso modo, sebbene i termini genitore  (parent), figlio (child), antenato (ancestor) e discendente (descendant) non hanno un significato conenzionale in JavaScript, possono essere usati in modo informale per riferirsi a oggetti che si trovano più o meno in alto nella catena dei prototipi.

-
- -

Creazione di oggetti con definizioni semplici

- -
-

Gerarchia degli oggetti

- -

La gerarchia seguente è creata usando il codice sulla destra.

- -

- -

 

- -

singoli oggetti

- -
var jim = new Employee;
-// jim.name is ''
-// jim.dept is 'general'
-
-var sally = new Manager;
-// sally.name is ''
-// sally.dept is 'general'
-// sally.reports is []
-
-var mark = new WorkerBee;
-// mark.name is ''
-// mark.dept is 'general'
-// mark.projects is []
-
-var fred = new SalesPerson;
-// fred.name is ''
-// fred.dept is 'sales'
-// fred.projects is []
-// fred.quota is 100
-
-var jane = new Engineer;
-// jane.name is ''
-// jane.dept is 'engineering'
-// jane.projects is []
-// jane.machine is ''
-
-
- -

Proprietà degli oggetti

- -

Questa sezione spiega come gli oggetti ereditano le proprietà da altri oggetti presenti nella catena dei prototipi e cosa succede quando viene aggiunta una proprietà in fase di esecuzione.

- -

Ereditare le proprietà

- -

Supponiamo di creare un nuovo oggetto WorkerBee chiamato mark con l'istruzione seguente:

- -
var mark = new WorkerBee;
-
- -

Quando JavaScript vede l'operatore new, crea un nuovo oggeto generico e lo passa come valore della parola chiave this nella funzione costruttore WorkerBee. La funzione costruttore imposta esplicitamente il valore della proprietà projects e implicitamente il valore della proprietà interna __proto__ uguale al valore WorkerBee.prototype. (Il nome di questa proprietà ha due underscores iniziali e due finali). La proprietà __proto__ determina la catena di prototipi usata per restituire i valori delle proprietà. Una volta che queste proprietà sono impostate, JavaScript restituisce il nuovo oggetto e l'istruzione di assegnazione imposta la variabile mark per questo oggetto.

- -

Questo processo non inserisce esplicitamente valori nell'oggetto mark (valori locali) per le proprietà che l'oggetto eredita dalla catena dei prototipi. Quando si richiede un valore di una proprietà, JavaScript prima controlla se il valore è presente nell'oggetto. Se c'è, viene restituito quel valore. Se il valore non è presente a livello locale, JavaScript controlla la catena dei prototipi (sfruttando la proprietà __proto__). Se un oggetto nella catena dei prototipi ha un valore per la proprietà, viene restituito. Se non viene trovata la proprietà, JavaScript risponde che l'oggetto non ha la proprietà cercata. In questo modo, l'oggetto mark ha le seguenti propietà con i rispettivi valori:

- -
mark.name = "";
-mark.dept = "general";
-mark.projects = [];
-
- -

L'oggetto mark eredita i valori per le proprietà name e dept dall'oggetto prototipo presente in mark.__proto__. Il costruttore WorkerBee assegna un valore locale per la proprietà projects. L'ereditarietà di proprietà e valori in JavaScript fnziona in questo modo. Alcune sottigliezze su questo processo sono trattate nella sezione Ereditare le proprietà (revisited).

- -

Poiché questi costruttori non permettono di fornire valori specifici per una singola istanza, questa informazione è generica. I valori delle proprietà sono quelli di default condivisi da tutti i nuovi oggetti creati da WorkerBee. È oviamente possibile cambiare i valori di ognuna di queste proprietà. È quindi possibile assegnare informazioni specifice per mark nel modo seguente:

- -
mark.name = "Doe, Mark";
-mark.dept = "admin";
-mark.projects = ["navigator"];
- -

Aggiungere proprietà

- -

In JavaScript, è possibile aggiungere proprietà a qualsiasi oggetto in fase di esecuzione. Non si è costretti ad usare solo le proprietà fornite dalla funzione costruttore. Per aggiungere una proprietà che sia specifica per un singolo oggetto, si deve assegnare il valore all'oggetto nel modo seguente::

- -
mark.bonus = 3000;
-
- -

Ora, l'oggetto markha una proprietà bonus, ma nessun altro WorkerBee ha questa proprietà.

- -

Se si aggiunge una nuova proprietà a un oggetto che viene usato come prototipo per una funzione costruttore, la proprietà sarà aggiunta a tutti gli oggetti che ereditano le proprietà dal prototipo. Per esempio, è possibile aggiungere la proprietà specialty a tutti i dipendenti con l'istruzione seguente:

- -
Employee.prototype.specialty = "none";
-
- -

Non appena JavaScript esegue questa istruzione, anche l'oggetto mark avrà la proprietà specialty con il valore "none". La figura seguente mostra cosa succede qunado questa proprietà viene aggiunta al prototipo Employee e in seguito la si sovrascrive per il prototipo Engineer.

- -


- Aggiungere le proprietà

- -

Costruttori più flessibili

- -

Le funzioni costruttore mostrate finora non permettono di specificare i valori delle proprietà qunado viene creata un'istanza. Come in Java, è possibile fornire argomenti al costruttore per inizializzare i valori delle proprietà per le istanze. La figura seguente mostra un modo per farlo.

- -


- Specificare le proprietà in un costruttore, modo 1

- -

La tabella seguente mostra le definizioni di questi oggetti in JavaScript e in Java.

- -
-

JavaScript

- -

Java

-
- -
-
function Employee (name, dept) {
-  this.name = name || "";
-  this.dept = dept || "general";
-}
-
- -

 

- -

 

- -

 

- -

 

- -
public class Employee {
-   public String name;
-   public String dept;
-   public Employee () {
-      this("", "general");
-   }
-   public Employee (String name) {
-      this(name, "general");
-   }
-   public Employee (String name, String dept) {
-      this.name = name;
-      this.dept = dept;
-   }
-}
-
-
- -
-
function WorkerBee (projs) {
-
- this.projects = projs || [];
-}
-WorkerBee.prototype = new Employee;
-
- -

 

- -

 

- -
public class WorkerBee extends Employee {
-   public String[] projects;
-   public WorkerBee () {
-      this(new String[0]);
-   }
-   public WorkerBee (String[] projs) {
-      projects = projs;
-   }
-}
-
-
- -
-
-function Engineer (mach) {
-   this.dept = "engineering";
-   this.machine = mach || "";
-}
-Engineer.prototype = new WorkerBee;
-
- -

 

- -

 

- -
public class Engineer extends WorkerBee {
-   public String machine;
-   public Engineer () {
-      dept = "engineering";
-      machine = "";
-   }
-   public Engineer (String mach) {
-      dept = "engineering";
-      machine = mach;
-   }
-}
-
-
- -

Queste definizioni JavaScript usano un linguaggio speciale per impostare i valori di default:

- -
this.name = name || "";
-
- -

In JavaScript l'operatore logico OR (||) valuta il suo primo argomento. Se questa espressione può essere convertita a true, l'operatore restituisce il primo argomento. Altrimenti l'operatore restituisce il valore del secondo argomento. Quindi, questa linea di codice verifica se name ha un valore utile per la proprietà name. Se ce l'ha, imposta this.name a questo valore. Altrimenti, imposta this.name a una stringa vuota. Questo capitolo usa questo linguaggio per brevità, comunque può disorientare a prima vista.

- -
-

Nota: Potrebbe non funzionare come atteso se la funzione costruttore è chiamata con un argomento che converte a false (come ad esempio 0 (zero) o una stringa vuota ("")). In questo caso verrà scelto il valore di default.

-
- -

Con queste definizioni, quando si crea un'istanza di un oggetto, è possibile specificare i valori per le proprietà definite localmente. Per creare un nuovo Engineer è possibile utilizzare l'espressione seguente:

- -
var jane = new Engineer("belau");
-
- -

Le proprietà di Jane sono ora:

- -
jane.name == "";
-jane.dept == "engineering";
-jane.projects == [];
-jane.machine == "belau"
-
- -

È da notare che con queste definizioni non è possibile specificare una valore iniziale per le proprietà ereditate, come ad esempio name. Se si desidera specificare un valore iniziale per una proprietà ereditata, in JavaScript è necessario aggiungere ulteriore codice alla funzione costruttore.

- -

Finora, la funzione costruttore ha creato un oggetto generico e poi ha specificato proprietà locali e valori per il nuovo oggetto. È possibile fare in modo che il costruttore aggiunga più proprietà chiamando direttamente la funzione costruttore per un oggetto che si trova a un livello più alto nella catena dei prototipi. La figura seguente mostra queste nuove definizioni.

- -


- Specificare le proprietà in un costruttore, modo 2

- -

Guardiamo nel dettaglio una di queste definizioni. Ecco la nuova definizione per il costruttore Engineer:

- -
function Engineer (name, projs, mach) {
-  this.base = WorkerBee;
-  this.base(name, "engineering", projs);
-  this.machine = mach || "";
-}
-
- -

Supponiamo di creare un nuovo oggetto Engineer nel modo seguente:

- -
var jane = new Engineer("Doe, Jane", ["navigator", "javascript"], "belau");
-
- -

JavaScript segue questa procedura:

- -
    -
  1. L'operatore new crea un oggetto generico e imposta il valore Engineer.prototype per la sua proprietà __proto__.
    2. -
  2. L'operatore new passa il nuovo oggetto come valore della parola chiave this nella funzione costruttore Engineer.
    3. -
  3. Il costruttore crea una nuova proprietà per l'oggetto chiamata base e assegna il valore del costruttore WorkerBee alla proprietà base. Questo rende il costruttore WorkerBee un metode dell'oggetto Engineer. Il nome della proprietà base non è peculiare. È possibile usare qualsiasi nome per la proprietà; base è semplicemente evocativo dello scopo.
    4. -
  4. Il costruttore chiama il metodo base, passando come suoi argomenti due degli argomenti passati al costruttore ("Doe, Jane" e ["navigator", "javascript"]) e anche la stringa "engineering". Usando esplicitamente "engineering" nel costruttore indica che tutti gli oggetti Engineer hanno lo stesso valore per la proprietà dept ereditata, e questo valore sovrascrive il valore ereditato dal costruttore Employee.
    5. -
  5. Poiché base è un metodo di Engineer, all'interno della chiamata di base, JavaScript aggiunge la parola chiave this all'oggetto creato al passaggio 1. In questo modo, la funzione WorkerBee a sua volta passa gli argomenti "Doe, Jane" e "engineering" alla funzione costruttore Employee. Dopo l'esecuzione della funzione costruttore Employee, la funzione WorkerBee utilizza l'argomento rimanente per impostare la proprietà projects.
    6. -
  6. Dopo l'esecuzione del metodo base, il costruttore Engineer inizializza la proprietà machine dell'oggetto al valore "belau".
    7. -
  7. Dopo l'esecuzione del costruttore, JavaScript assegna il nuovo oggetto alla variabile jane.
    8. -
- -

Avendo chiamato il costruttore WorkerBee dall'interno del costruttore Engineer, si potrebbe pensare di aver impostato in modo corretto l'ereditarietà per gli oggetti Engineer. Questo non è il caso. Chiamare il costruttore WorkerBee assicura che un oggetto Engineer venga creato con le proprietà specificate in tutte le funzioni costruttore che sono chiamate. Però, se in un secondo momento vengono aggiunte proprietà ai prototipi Employee o WorkerBee, queste proprietà non saranno ereditate dall'oggetto Engineer. Per esempio, se si considera il codice seguente:

- -
function Engineer (name, projs, mach) {
-  this.base = WorkerBee;
-  this.base(name, "engineering", projs);
-  this.machine = mach || "";
-}
-var jane = new Engineer("Doe, Jane", ["navigator", "javascript"], "belau");
-Employee.prototype.specialty = "none";
-
- -

L'oggetto jane non eredita la proprietà specialty. È comunque necessario impostare esplicitamente il prototipo per garantire l'ereditarietà dinamica. Se si considera invece l'esempio seguente:

- -
function Engineer (name, projs, mach) {
-  this.base = WorkerBee;
-  this.base(name, "engineering", projs);
-  this.machine = mach || "";
-}
-Engineer.prototype = new WorkerBee;
-var jane = new Engineer("Doe, Jane", ["navigator", "javascript"], "belau");
-Employee.prototype.specialty = "none";
-
- -

Adesso il valore per l'oggetto jane della proprietà specialty è "none".

- -

Un altro modo per ereditare le proprietà è l'utilizzo dei metodi call() e apply(). Gli esempi sottostanti si equivalgono:

- -
-
function Engineer (name, projs, mach) {
-  this.base = WorkerBee;
-  this.base(name, "engineering", projs);
-  this.machine = mach || "";
-}
-
- -
function Engineer (name, projs, mach) {
-  WorkerBee.call(this, name, "engineering", projs);
-  this.machine = mach || "";
-}
-
-
- -

L'utilizzo del metodo call() costituisce un'implementazione più pulita poiché la proprietà base non è più necessaria.

- -

Ereditare le proprietà (revisited)

- -

Le sezioni precedenti descrivono come i costruttori e i prototipi consentono di avere gerarchia ed ereditarietà in JavaScript. Questa sezione espone alcune sottiglienzze che non erano necessariamente evidenti nelle discussioni precedenti.

- -

Valori locali vs. valori ereditati

- -

Quando si accede a una proprietà di un oggetto, JavaScript esegue i seguenti passaggi, come descritto in precedenza in questo capitolo:

- -
    -
  1. Verifica se il valore è presente a livello locale. Se c'è, restituisce quel valore.
    2. -
  2. Se non è presente, verifica la catena dei prototipi (usando la proprietà __proto__).
    3. -
  3. Se un oggetto nella catena dei prototipi ha un valore per la proprietà specificata, restituisce quel valore.
    4. -
  4. Se la proprietà non viene trovata, l'oggetto non ha la proprietà.
    5. -
- -

Il risultato di questo processo dipende da come sono stati definiti gli elementi. L'esempio iniziale aveva queste definizioni:

- -
function Employee () {
-  this.name = "";
-  this.dept = "general";
-}
-
-function WorkerBee () {
-  this.projects = [];
-}
-WorkerBee.prototype = new Employee;
-
- -

Con queste definizioni, si supponga di creare amy come un'istanza di WorkerBee con la seguente istruzione:

- -
var amy = new WorkerBee;
-
- -

L'oggetto amy ha una proprietà locale, projects. I valori per le proprietà name e dept non sono specifici per amy e quindi derivano dalla proprietà __proto__ dell'oggetto amy. Quindi, amy ha i seguenti valori:

- -
amy.name == "";
-amy.dept == "general";
-amy.projects == [];
-
- -

Ora si supponga di cambiare il valore della proprietà name nel prototipo associato con Employee:

- -
Employee.prototype.name = "Unknown"
-
- -

Ci si potrebbe aspettare che il nuovo valore si propaghi a tutte le istanze di Employee. Invece, non lo fa.

- -

Quando si crea qualsiasi istanza dell'oggetto Employee, questa istanza riceve un valore locale per la proprietà name (la stringa vuota). Questo significa che quando si imposta il prototipo WorkerBee creando un nuovo oggetto Employee, WorkerBee.prototype avrà un valore locale per la proprietà name. Quindi, quando JavaScript legge la proprietà name dell'oggetto amy (istanza di WorkerBee), trova in WorkerBee.prototype il valore locale di questa proprietà. Pertanto non continua a cercare nella catena salendo a Employee.prototype.

- -

Se si vuole cambiare il valore di una proprietà di un oggetto in fase di esecuzione e si vuole che il nuovo valore venga ereditato da tutti i discendenti dell'oggetto, non è possibile definire la proprietà all'interno della funzione costruttore dell'oggetto. Invece, si aggiunge la proprietà al prototipo associato al costruttore. Per esempio, assumiamo di cambiare il codice precedente con quello che segue:

- -
function Employee () {
-  this.dept = "general";    // Note that this.name (a local variable) does not appear here
-}
-Employee.prototype.name = "";    // A single copy
-
-function WorkerBee () {
-  this.projects = [];
-}
-WorkerBee.prototype = new Employee;
-
-var amy = new WorkerBee;
-
-Employee.prototype.name = "Unknown";
-
- -

In questo caso, il valore della proprietà name di amy diventa "Unknown".

- -

Come mostra questo esempio, se si vogliono avere i valori di default per le proprietà dell'oggetto e si vuole avere la possibilità di cambiare questi valori in fase di esecuzione, si devono impostare le proprietà nel prototipo del costruttore, e non direttamente nella funzione costruttore.

- -

Determinazione delle relazioni tra istanze

- -

In JavaScript la ricerca delle proprietà (property lookup) controlla prima tra le proprietà specifiche dell'oggetto e, se il nome della proprietà non viene trovato, controlla la proprietà speciale __proto__. Il processo, chiamato "ricerca nella catena dei prototipi" (lookup in the prototype chain), continua ricorsivamente .

- -

Quando un oggetto viene costruito, la proprietà speciale __proto__ viene impostata al valore della proprietà prototype del costruttore. L'espressione new Foo() crea un oggetto con __proto__ == Foo.prototype. Di conseguenza, le modifiche alle proprietà di Foo.prototype alterano la ricerca delle proprietà per tutti gli oggetti che sono stati creati con new Foo().

- -

Ogni oggetto ha una proprietà __proto__ (ad eccezione di Object); ogni funzione ha una proprietà prototype. Quindi gli oggetti possono essere correlati ad altri oggetti attraverso una 'ereditarietà prototipale' (prototypal inheritance). È possibile verificare l'ereditarietà confrontando la proprietà __proto__ di un oggetto con l'oggetto prototype di una funzione. JavaScript fornisce una scorciatoia: l'operatore instanceof confronta un oggetto con una funzione e restituisce true se l'oggetto eredita dal prototipo della funzione. Per esempio,

- -
var f = new Foo();
-var isTrue = (f instanceof Foo);
- -

Per un esempio più dettagliato, supponiamo di avere lo stesso gruppo di definizioni visto nella sezione For a more detailed example, suppose you have the same set of definitions shown in Ereditare le proprietà. Creiamo un oggetto Engineer nel modo seguente:

- -
var chris = new Engineer("Pigman, Chris", ["jsd"], "fiji");
-
- -

Per questo oggetto, tutti gli enunciati seguenti sono veri:

- -
chris.__proto__ == Engineer.prototype;
-chris.__proto__.__proto__ == WorkerBee.prototype;
-chris.__proto__.__proto__.__proto__ == Employee.prototype;
-chris.__proto__.__proto__.__proto__.__proto__ == Object.prototype;
-chris.__proto__.__proto__.__proto__.__proto__.__proto__ == null;
-
- -

Dato ciò, è possibile scrivere una funzione instanceOf come segue:

- -
function instanceOf(object, constructor) {
-   object = object.__proto__;
-   while (object != null) {
-      if (object == constructor.prototype)
-         return true;
-      if (typeof object == 'xml') {
-        return constructor.prototype == XML.prototype;
-      }
-      object = object.__proto__;
-   }
-   return false;
-}
-
- -
-

Nota: L'implementazione vista sopra verifica se l'oggetto è di tipo "xml" per ovviare a una stranezza nel modo in cui gli oggetti XML sono rappresentati nelle versioni recenti di JavaScript. Per i dettagli essenziali si veda il {{ bug(634150) }}.

-
- -

Se si utilizza la funzione instanceOf definita in precedenza, queste espressioni sono vere:

- -
instanceOf (chris, Engineer)
-instanceOf (chris, WorkerBee)
-instanceOf (chris, Employee)
-instanceOf (chris, Object)
-
- -

Ma l'espressione seguente è falsa:

- -
instanceOf (chris, SalesPerson)
-
- -

Informazioni globali nei costruttori

- -

Quando vengono creati dei costruttori, è necessario essere scrupolosi se si impostano informazioni globali all'interno del costruttore. Per esempio, se si vuole che un ID univoco venga assegnato automaticamente a ogni nuovo Employee si potrebbe usare la definizione seguente:

- -
var idCounter = 1;
-
-function Employee (name, dept) {
-   this.name = name || "";
-   this.dept = dept || "general";
-   this.id = idCounter++;
-}
-
- -

Con questa definizione, quando viene creato un nuovo Employee, il costruttore assegna l'ID seguente e incrementa il contatore globale (idCounter). Così, se l'istruzione successiva è la seguente, l'ID di victoria sarà 1, l'ID di harry sarà 2:

- -
var victoria = new Employee("Pigbert, Victoria", "pubs")
-var harry = new Employee("Tschopik, Harry", "sales")
-
- -

Questa a prima vista potrebbe sembrare la procedura corretta. Tuttavia, il contatore globale idCounter viene incrementato ogni volta che viene creato un oggetto Employee, per qualsiasi scopo. Se viene creata l'intera gerarchia di oggetti Employee mostrata in questo capitolo, il costruttore Employee viene chiamato ogni volta che si definisce un prototipo. Supponiamo di avere il codice seguente:

- -
var idCounter = 1;
-
-function Employee (name, dept) {
-   this.name = name || "";
-   this.dept = dept || "general";
-   this.id = idCounter++;
-}
-
-function Manager (name, dept, reports) {...}
-Manager.prototype = new Employee;
-
-function WorkerBee (name, dept, projs) {...}
-WorkerBee.prototype = new Employee;
-
-function Engineer (name, projs, mach) {...}
-Engineer.prototype = new WorkerBee;
-
-function SalesPerson (name, projs, quota) {...}
-SalesPerson.prototype = new WorkerBee;
-
-var mac = new Engineer("Wood, Mac");
-
- -

Si assuma inoltre che le definizioni omesse abbiano la proprietà base e chiamino il costruttore che si trova al livello superiore nella catena dei prototipi. In questo caso, nel momento in cui viene creato l'oggetto mac, il valore di mac.id sarà 5.

- -

A seconda dell'applicazione, può essere più o meno importante che il valore del contatore sia stato incrementato queste volte aggiuntive. Se interessa il valore esatto di questo contatore, una soluzione possibile può prevedere l'uso del costruttore seguente al posto di quello visto in precedenza:

- -
function Employee (name, dept) {
-   this.name = name || "";
-   this.dept = dept || "general";
-   if (name)
-      this.id = idCounter++;
-}
-
- -

Quando viene creata un'istanza di Employee che deve essere usata come prototipo, non vengono forniti argomenti al costruttore. Usando questa definizione del costruttore, quando non vengono inseriti argomenti, il costruttore non assegna un valore all'ID e non aggiorna il contatore. Quindi, affinché a un oggetto Employee venga assegnato un ID, è necesario specificare un nome per il dipendente. In questo esempio, l'ID di mac sarà 1.

- -

JavaScript non supporta l'ereditarietà multipla

- -

Alcuni linguaggi ad oggetti ammettono l'ereditarietà multipla. Ossia, un oggetto può ereditare proprietà e valori da oggetti genitori non correlati. Javascript non supporta l'ereditarietà multipla.

- -

L'eredità dei valori delle proprietà si ha in fase di esecuzione quando JavaScript cerca attraverso la catena dei prototipo di un oggetto per trovare un valore. Poiché un oggetto ha un unico prototipo associato, JavaScript non può ereditare dinamicamente da più di una catena di prototipi.

- -

In JavaScript, è possibile che una funzione costruttore chiami al suo interno diverse funzioni costruttore. Questo dà l'illusione dell'ereditarietà multipla. Per esempio consideriamo le istruzioni seguenti:

- -
function Hobbyist (hobby) {
-   this.hobby = hobby || "scuba";
-}
-
-function Engineer (name, projs, mach, hobby) {
-   this.base1 = WorkerBee;
-   this.base1(name, "engineering", projs);
-   this.base2 = Hobbyist;
-   this.base2(hobby);
-   this.machine = mach || "";
-}
-Engineer.prototype = new WorkerBee;
-
-var dennis = new Engineer("Doe, Dennis", ["collabra"], "hugo")
-
- -

Assumiamo inoltre che la definizione di WorkerBee sia quella usata in precedenza in questo capitolo. In questo caso, l'oggetto dennis avrà queste proprietà:

- -
dennis.name == "Doe, Dennis"
-dennis.dept == "engineering"
-dennis.projects == ["collabra"]
-dennis.machine == "hugo"
-dennis.hobby == "scuba"
-
- -

Quindi dennis riceve la proprietà hobby dal costruttore Hobbyist. Però, se in seguito si aggiunge una proprietà al prototipo del costruttore Hobbyist:

- -
Hobbyist.prototype.equipment = ["mask", "fins", "regulator", "bcd"]
-
- -

L'oggetto dennis non erediterà questa nuova proprietà.

- -
{{PreviousNext("Web/JavaScript/Guide/Working_with_Objects", "Web/JavaScript/Guide/Iterators_and_Generators")}}
diff --git a/files/it/web/javascript/guida/espressioni_regolari/index.html b/files/it/web/javascript/guida/espressioni_regolari/index.html deleted file mode 100644 index f876045948..0000000000 --- a/files/it/web/javascript/guida/espressioni_regolari/index.html +++ /dev/null @@ -1,647 +0,0 @@ ---- -title: Espressioni regolari -slug: Web/JavaScript/Guida/Espressioni_Regolari -translation_of: Web/JavaScript/Guide/Regular_Expressions ---- -
{{jsSidebar("Guida JavaScript")}} {{PreviousNext("Web/JavaScript/Guide/Text_formatting", "Web/JavaScript/Guide/Indexed_collections")}}
- -

Le espressioni regolari sono schemi usati per confrontare combinazioni di caratteri nelle stringhe. In JavaScript, le espressioni regolari sono anche oggetti. Questi pattern sono usati con i metodi {{jsxref("RegExp.exec", "exec()")}} e {{jsxref("RegExp.test", "test()")}} della classe {{jsxref("RegExp")}}, e con i metodi {{jsxref("String.match", "match()")}},   {{jsxref("String.matchAll", "matchAll()")}}, {{jsxref("String.replace", "replace()")}}, {{jsxref("String.search", "search()")}}, e {{jsxref("String.split", "split()")}} della classe {{jsxref("String")}}. Questo capitolo descrive le espressioni regolari in JavaScript.

- -

Creazione di un'espressione regolare

- -

Puoi creare un'espressione regolare in uno dei seguenti modi:

- -
    -
  • -

    Usando un'espressione regolare letterale, che consiste in uno schema racchiuso tra slash, come segue:

    - - 
    var re = /ab+c/;
-
    - -

    Le Espressioni Regolari letterali forniscono la compilazione dell'espressione regolare quando lo script è caricato. Se l'espressione regolare rimane costante, usare questo modo può migliorare le prestazioni.

    -
    • -
  • -

    O chiamando il costruttore dell'oggetto {{jsxref("RegExp")}} object, come segue:

    - - 
    var re = new RegExp("ab+c");
-
    - -

    Usando il costruttore avviene una compilazione runtime dell'espressione regolare. Usa il costruttore quando sai che lo schema dell'espressione regolare cambierà, o non sai lo schema a priori ma lo devi ricavare da un'altra risorsa, come un input dell'utente.

    -
    • -
- -

Scrivere uno schema per espressioni regolari

- -

Uno schema di espressione regolare è composto da caratteri semplici, come /abc/, o da una combinazione di caratteri semplici e speciali, come /ab*c/ o /Chapter (\d+)\.\d*/. L'ultimo esempio include parentesi che sono usate come un dispositivo di memoria. Il confronto fatto con queste parti dello schema è ricordato per usi futuri, come descritto in  {{ web.link("#Using_parenthesized_substring_matches", "Using parenthesized substring matches") }}.

- -
-

Nota: Se hai già familiarità con la struttura di un'espressione regolare, potresti anche leggere il cheatsheet per una rapida ricerca di un modello/costrutto specifico

-
- -

Usare modelli semplici

- -

I modelli semplici sono costituiti da carattrei per i quali si desidera trovare una corrispondenza diretta. Ad esempio, il modello /abc/ corrisponde solo quando esattamente i caratteri "abc" si presentano insieme e in quell'ordine. Una tale corrispondenza avrebbe successo nelle stringhe "Ciao, conosci il tuo abc?" e "Gli ultimi progetti di aeroplani si sono evoluti da slabcraft". In entrambi i casi la corrispondenza con la sottostringa "abc" avviene. Non c'è corrispondenza nella stringa "Grab crab" perché invece di contenere l'esatta sottostringa "abc" coniente la sottostringa "ab c".

- -

Usare caratteri speciali

- -

Quando la ricerca di una corrispondenza richiede qualcosa di più di una corrispondenza diretta, come la ricerca di una o più b o la ricerca di spazi bianchi, il modello include caratteri speciali. Ad esempio, per abbinare una singola "a" seguita da zero o più "b" seguita da "c", dovresti usare il modello /ab*c/: il * dopo "b" significa "0 o più occorrenze dell'elemento precedente". Nella stringa "cbbabbbbcdebc", questo modello corrisponderà alla sottostringa "abbbbc".
-
- La tabella seguente fornisce un elenco completo e una descrizione dei caratteri speciali che possono essere utilizzati nelle espressioni regolari.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Caratteri speciali nelle espressioni regolari
CarattereSignificato/Utilizzo
\ -

Matches according to the following rules:
-
- A backslash that precedes a non-special character indicates that the next character is special and is not to be interpreted literally. For example, a 'b' without a preceding '\' generally matches lowercase 'b's wherever they occur. But a '\b' by itself doesn't match any character; it forms the special word boundary character.
-
- A backslash that precedes a special character indicates that the next character is not special and should be interpreted literally. For example, the pattern /a*/ relies on the special character '*' to match 0 or more a's. By contrast, the pattern /a\*/ removes the specialness of the '*' to enable matches with strings like 'a*'.
-
- Do not forget to escape \ itself while using the RegExp("pattern") notation because \ is also an escape character in strings.

-
^Matches beginning of input. If the multiline flag is set to true, also matches immediately after a line break character.
-
- For example, /^A/ does not match the 'A' in "an A", but does match the 'A' in "An E".
-
- The '^' has a different meaning when it appears as the first character in a character set pattern. See complemented character sets for details and an example.
$ -

Matches end of input. If the multiline flag is set to true, also matches immediately before a line break character.

- -

For example, /t$/ does not match the 't' in "eater", but does match it in "eat".

-
* -

Matches the preceding expression 0 or more times. Equivalent to {0,}.

- -

For example, /bo*/ matches 'boooo' in "A ghost booooed" and 'b' in "A bird warbled", but nothing in "A goat grunted".

-
+ -

Matches the preceding expression 1 or more times. Equivalent to {1,}.

- -

For example, /a+/ matches the 'a' in "candy" and all the a's in "caaaaaaandy", but nothing in "cndy".

-
?Matches the preceding expression 0 or 1 time. Equivalent to {0,1}.
-
- For example, /e?le?/ matches the 'el' in "angel" and the 'le' in "angle" and also the 'l' in "oslo".
-
- If used immediately after any of the quantifiers *, +, ?, or {}, makes the quantifier non-greedy (matching the fewest possible characters), as opposed to the default, which is greedy (matching as many characters as possible). For example, applying /\d+/ to "123abc" matches "123". But applying /\d+?/ to that same string matches only the "1".
-
- Also used in lookahead assertions, as described in the x(?=y) and x(?!y) entries of this table.
-  
. -

(The decimal point) matches any single character except the newline character.

- -

For example, /.n/ matches 'an' and 'on' in "nay, an apple is on the tree", but not 'nay'.

-
(x) -

Matches 'x' and remembers the match, as the following example shows. The parentheses are called capturing parentheses.
-
- The '(foo)' and '(bar)' in the pattern /(foo) (bar) \1 \2/ match and remember the first two words in the string "foo bar foo bar". The \1 and \2 in the pattern match the string's last two words. Note that \1, \2, \n are used in the matching part of the regex. In the replacement part of a regex the syntax $1, $2, $n must be used, e.g.: 'bar foo'.replace( /(...) (...)/, '$2 $1' ).

-
(?:x)Matches 'x' but does not remember the match. The parentheses are called non-capturing parentheses, and let you define subexpressions for regular expression operators to work with. Consider the sample expression /(?:foo){1,2}/. If the expression was /foo{1,2}/, the {1,2} characters would apply only to the last 'o' in 'foo'. With the non-capturing parentheses, the {1,2} applies to the entire word 'foo'.
x(?=y) -

Matches 'x' only if 'x' is followed by 'y'. This is called a lookahead.

- -

For example, /Jack(?=Sprat)/ matches 'Jack' only if it is followed by 'Sprat'. /Jack(?=Sprat|Frost)/ matches 'Jack' only if it is followed by 'Sprat' or 'Frost'. However, neither 'Sprat' nor 'Frost' is part of the match results.

-
x(?!y) -

Matches 'x' only if 'x' is not followed by 'y'. This is called a negated lookahead.

- -

For example, /\d+(?!\.)/ matches a number only if it is not followed by a decimal point. The regular expression /\d+(?!\.)/.exec("3.141") matches '141' but not '3.141'.

-
x|y -

Matches either 'x' or 'y'.

- -

For example, /green|red/ matches 'green' in "green apple" and 'red' in "red apple."

-
{n}Matches exactly n occurrences of the preceding expression. N must be a positive integer.
-
- For example, /a{2}/ doesn't match the 'a' in "candy," but it does match all of the a's in "caandy," and the first two a's in "caaandy."
{n,m} -

Where n and m are positive integers and n <= m. Matches at least n and at most m occurrences of the preceding expression. When m is omitted, it's treated as ∞.

- -

For example, /a{1,3}/ matches nothing in "cndy", the 'a' in "candy," the first two a's in "caandy," and the first three a's in "caaaaaaandy". Notice that when matching "caaaaaaandy", the match is "aaa", even though the original string had more a's in it.

-
[xyz]Character set. This pattern type matches any one of the characters in the brackets, including escape sequences. Special characters like the dot(.) and asterisk (*) are not special inside a character set, so they don't need to be escaped. You can specify a range of characters by using a hyphen, as the following examples illustrate.
-
- The pattern [a-d], which performs the same match as [abcd], matches the 'b' in "brisket" and the 'c' in "city". The patterns /[a-z.]+/ and /[\w.]+/ match the entire string "test.i.ng".
[^xyz] -

A negated or complemented character set. That is, it matches anything that is not enclosed in the brackets. You can specify a range of characters by using a hyphen. Everything that works in the normal character set also works here.

- -

For example, [^abc] is the same as [^a-c]. They initially match 'r' in "brisket" and 'h' in "chop."

-
[\b]Matches a backspace (U+0008). You need to use square brackets if you want to match a literal backspace character. (Not to be confused with \b.)
\b -

Matches a word boundary. A word boundary matches the position where a word character is not followed or preceeded by another word-character. Note that a matched word boundary is not included in the match. In other words, the length of a matched word boundary is zero. (Not to be confused with [\b].)

- -

Examples:
- /\bm/ matches the 'm' in "moon" ;
- /oo\b/ does not match the 'oo' in "moon", because 'oo' is followed by 'n' which is a word character;
- /oon\b/ matches the 'oon' in "moon", because 'oon' is the end of the string, thus not followed by a word character;
- /\w\b\w/ will never match anything, because a word character can never be followed by both a non-word and a word character.

- -
-

Note: JavaScript's regular expression engine defines a specific set of characters to be "word" characters. Any character not in that set is considered a word break. This set of characters is fairly limited: it consists solely of the Roman alphabet in both upper- and lower-case, decimal digits, and the underscore character. Accented characters, such as "é" or "ü" are, unfortunately, treated as word breaks.

-
-
\B -

Matches a non-word boundary. This matches a position where the previous and next character are of the same type: Either both must be words, or both must be non-words. The beginning and end of a string are considered non-words.

- -

For example, /\B../ matches 'oo' in "noonday", and /y\B./ matches 'ye' in "possibly yesterday."

-
\cX -

Where X is a character ranging from A to Z. Matches a control character in a string.

- -

For example, /\cM/ matches control-M (U+000D) in a string.

-
\d -

Matches a digit character. Equivalent to [0-9].

- -

For example, /\d/ or /[0-9]/ matches '2' in "B2 is the suite number."

-
\D -

Matches any non-digit character. Equivalent to [^0-9].

- -

For example, /\D/ or /[^0-9]/ matches 'B' in "B2 is the suite number."

-
\fMatches a form feed (U+000C).
\nMatches a line feed (U+000A).
\rMatches a carriage return (U+000D).
\s -

Matches a single white space character, including space, tab, form feed, line feed. Equivalent to [ \f\n\r\t\v\u00a0\u1680\u180e\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff].

- -

For example, /\s\w*/ matches ' bar' in "foo bar."

-
\S -

Matches a single character other than white space. Equivalent to [^ \f\n\r\t\v\u00a0\u1680\u180e\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff].

- -

For example, /\S\w*/ matches 'foo' in "foo bar."

-
\tMatches a tab (U+0009).
\vMatches a vertical tab (U+000B).
\w -

Matches any alphanumeric character including the underscore. Equivalent to [A-Za-z0-9_].

- -

For example, /\w/ matches 'a' in "apple," '5' in "$5.28," and '3' in "3D."

-
\W -

Matches any non-word character. Equivalent to [^A-Za-z0-9_].

- -

For example, /\W/ or /[^A-Za-z0-9_]/ matches '%' in "50%."

-
\n -

Where n is a positive integer, a back reference to the last substring matching the n parenthetical in the regular expression (counting left parentheses).

- -

For example, /apple(,)\sorange\1/ matches 'apple, orange,' in "apple, orange, cherry, peach."

-
\0Matches a NULL (U+0000) character. Do not follow this with another digit, because \0<digits> is an octal escape sequence.
\xhhMatches the character with the code hh (two hexadecimal digits)
\uhhhhMatches the character with the code hhhh (four hexadecimal digits).
\u{hhhh}(only when u flag is set) Matches the character with the Unicode value hhhh (hexadecimal digits).
- -

Escaping user input to be treated as a literal string within a regular expression can be accomplished by simple replacement:

- -
function escapeRegExp(string){
-  return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); // $& means the whole matched string
-}
- -

Using parentheses

- -

Parentheses around any part of the regular expression pattern cause that part of the matched substring to be remembered. Once remembered, the substring can be recalled for other use, as described in {{ web.link("#Using_parenthesized_substring_matches", "Using Parenthesized Substring Matches") }}.

- -

For example, the pattern /Chapter (\d+)\.\d*/ illustrates additional escaped and special characters and indicates that part of the pattern should be remembered. It matches precisely the characters 'Chapter ' followed by one or more numeric characters (\d means any numeric character and + means 1 or more times), followed by a decimal point (which in itself is a special character; preceding the decimal point with \ means the pattern must look for the literal character '.'), followed by any numeric character 0 or more times (\d means numeric character, * means 0 or more times). In addition, parentheses are used to remember the first matched numeric characters.

- -

This pattern is found in "Open Chapter 4.3, paragraph 6" and '4' is remembered. The pattern is not found in "Chapter 3 and 4", because that string does not have a period after the '3'.

- -

To match a substring without causing the matched part to be remembered, within the parentheses preface the pattern with ?:. For example, (?:\d+) matches one or more numeric characters but does not remember the matched characters.

- -

Lavorare con le espressioni regolari

- -

Le espressioni regolari sono usate con i metodi test and exec di RegExp e con i metodi match, replace, search, and split di String .Questi metodi sono spiegati in dettaglio nelle  JavaScript reference.

- -

Metodi che usano le espressioni regolari

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
MetodoDescrizione
{{jsxref("RegExp.exec", "exec")}} -

Un metodo di RegExp che esegue una ricerca per una corrispondenza in una stringa. Ritorna un array di informazioni, o null se non trova corrispondenze.

-
{{jsxref("RegExp.test", "test")}}Un metodo di RegExp che testa le corrispondenze in una stinga. Ritorna true o false. 
{{jsxref("String.match", "match")}}Un metodo di String che esegue una ricerca per una corrispondenza in una stringa. Ritorna un array di informazioni, o null se non trova corrispondenze.
{{jsxref("String.search", "search")}}A String method that tests for a match in a string. It returns the index of the match, or -1 if the search fails.
{{jsxref("String.replace", "replace")}}A String method that executes a search for a match in a string, and replaces the matched substring with a replacement substring.
{{jsxref("String.split", "split")}}A String method that uses a regular expression or a fixed string to break a string into an array of substrings.
- -

When you want to know whether a pattern is found in a string, use the test or search method; for more information (but slower execution) use the exec or match methods. If you use exec or match and if the match succeeds, these methods return an array and update properties of the associated regular expression object and also of the predefined regular expression object, RegExp. If the match fails, the exec method returns null (which coerces to false).

- -

In the following example, the script uses the exec method to find a match in a string.

- -
var myRe = /d(b+)d/g;
-var myArray = myRe.exec("cdbbdbsbz");
-
- -

If you do not need to access the properties of the regular expression, an alternative way of creating myArray is with this script:

- -
var myArray = /d(b+)d/g.exec("cdbbdbsbz"); // equivalent to "cdbbdbsbz".match(/d(b+)d/g);
-
- -

If you want to construct the regular expression from a string, yet another alternative is this script:

- -
var myRe = new RegExp("d(b+)d", "g");
-var myArray = myRe.exec("cdbbdbsbz");
-
- -

With these scripts, the match succeeds and returns the array and updates the properties shown in the following table.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Results of regular expression execution.
ObjectProperty or indexDescriptionIn this example
myArrayThe matched string and all remembered substrings.["dbbd", "bb"]
indexThe 0-based index of the match in the input string.1
inputThe original string."cdbbdbsbz"
[0]The last matched characters."dbbd"
myRelastIndexThe index at which to start the next match. (This property is set only if the regular expression uses the g option, described in {{ web.link("#Advanced_searching_with_flags", "Advanced Searching With Flags") }}.)5
sourceThe text of the pattern. Updated at the time that the regular expression is created, not executed."d(b+)d"
- -

As shown in the second form of this example, you can use a regular expression created with an object initializer without assigning it to a variable. If you do, however, every occurrence is a new regular expression. For this reason, if you use this form without assigning it to a variable, you cannot subsequently access the properties of that regular expression. For example, assume you have this script:

- -
var myRe = /d(b+)d/g;
-var myArray = myRe.exec("cdbbdbsbz");
-console.log("The value of lastIndex is " + myRe.lastIndex);
-
-// "The value of lastIndex is 5"
-
- -

However, if you have this script:

- -
var myArray = /d(b+)d/g.exec("cdbbdbsbz");
-console.log("The value of lastIndex is " + /d(b+)d/g.lastIndex);
-
-// "The value of lastIndex is 0"
-
- -

The occurrences of /d(b+)d/g in the two statements are different regular expression objects and hence have different values for their lastIndex property. If you need to access the properties of a regular expression created with an object initializer, you should first assign it to a variable.

- -

Using parenthesized substring matches

- -

Including parentheses in a regular expression pattern causes the corresponding submatch to be remembered. For example, /a(b)c/ matches the characters 'abc' and remembers 'b'. To recall these parenthesized substring matches, use the Array elements [1], ..., [n].

- -

The number of possible parenthesized substrings is unlimited. The returned array holds all that were found. The following examples illustrate how to use parenthesized substring matches.

- -

The following script uses the {{jsxref("String.replace", "replace()")}} method to switch the words in the string. For the replacement text, the script uses the $1 and $2 in the replacement to denote the first and second parenthesized substring matches.

- -
var re = /(\w+)\s(\w+)/;
-var str = "John Smith";
-var newstr = str.replace(re, "$2, $1");
-console.log(newstr);
-
- -

This prints "Smith, John".

- -

Advanced searching with flags

- -

Regular expressions have four optional flags that allow for global and case insensitive searching. These flags can be used separately or together in any order, and are included as part of the regular expression.

- - - - - - - - - - - - - - - - - - - - - - - - - - - -
Regular expression flags
FlagDescription
gGlobal search.
iCase-insensitive search.
mMulti-line search.
yPerform a "sticky" search that matches starting at the current position in the target string. See {{jsxref("RegExp.sticky", "sticky")}}
- -

To include a flag with the regular expression, use this syntax:

- -
var re = /pattern/flags;
-
- -

or

- -
var re = new RegExp("pattern", "flags");
-
- -

Note that the flags are an integral part of a regular expression. They cannot be added or removed later.

- -

For example, re = /\w+\s/g creates a regular expression that looks for one or more characters followed by a space, and it looks for this combination throughout the string.

- -
var re = /\w+\s/g;
-var str = "fee fi fo fum";
-var myArray = str.match(re);
-console.log(myArray);
-
- -

This displays ["fee ", "fi ", "fo "]. In this example, you could replace the line:

- -
var re = /\w+\s/g;
-
- -

with:

- -
var re = new RegExp("\\w+\\s", "g");
-
- -

and get the same result.

- -

The m flag is used to specify that a multiline input string should be treated as multiple lines. If the m flag is used, ^ and $ match at the start or end of any line within the input string instead of the start or end of the entire string.

- -

Examples

- -

The following examples show some uses of regular expressions.

- -

Changing the order in an input string

- -

The following example illustrates the formation of regular expressions and the use of string.split() and string.replace(). It cleans a roughly formatted input string containing names (first name first) separated by blanks, tabs and exactly one semicolon. Finally, it reverses the name order (last name first) and sorts the list.

- -
// The name string contains multiple spaces and tabs,
-// and may have multiple spaces between first and last names.
-var names = "Harry Trump ;Fred Barney; Helen Rigby ; Bill Abel ; Chris Hand ";
-
-var output = ["---------- Original String\n", names + "\n"];
-
-// Prepare two regular expression patterns and array storage.
-// Split the string into array elements.
-
-// pattern: possible white space then semicolon then possible white space
-var pattern = /\s*;\s*/;
-
-// Break the string into pieces separated by the pattern above and
-// store the pieces in an array called nameList
-var nameList = names.split(pattern);
-
-// new pattern: one or more characters then spaces then characters.
-// Use parentheses to "memorize" portions of the pattern.
-// The memorized portions are referred to later.
-pattern = /(\w+)\s+(\w+)/;
-
-// New array for holding names being processed.
-var bySurnameList = [];
-
-// Display the name array and populate the new array
-// with comma-separated names, last first.
-//
-// The replace method removes anything matching the pattern
-// and replaces it with the memorized string—second memorized portion
-// followed by comma space followed by first memorized portion.
-//
-// The variables $1 and $2 refer to the portions
-// memorized while matching the pattern.
-
-output.push("---------- After Split by Regular Expression");
-
-var i, len;
-for (i = 0, len = nameList.length; i < len; i++){
-  output.push(nameList[i]);
-  bySurnameList[i] = nameList[i].replace(pattern, "$2, $1");
-}
-
-// Display the new array.
-output.push("---------- Names Reversed");
-for (i = 0, len = bySurnameList.length; i < len; i++){
-  output.push(bySurnameList[i]);
-}
-
-// Sort by last name, then display the sorted array.
-bySurnameList.sort();
-output.push("---------- Sorted");
-for (i = 0, len = bySurnameList.length; i < len; i++){
-  output.push(bySurnameList[i]);
-}
-
-output.push("---------- End");
-
-console.log(output.join("\n"));
-
- -

Using special characters to verify input

- -

In the following example, the user is expected to enter a phone number. When the user presses the "Check" button, the script checks the validity of the number. If the number is valid (matches the character sequence specified by the regular expression), the script shows a message thanking the user and confirming the number. If the number is invalid, the script informs the user that the phone number is not valid.

- -

Within non-capturing parentheses (?: , the regular expression looks for three numeric characters \d{3} OR | a left parenthesis \( followed by three digits \d{3}, followed by a close parenthesis \), (end non-capturing parenthesis )), followed by one dash, forward slash, or decimal point and when found, remember the character ([-\/\.]), followed by three digits \d{3}, followed by the remembered match of a dash, forward slash, or decimal point \1, followed by four digits \d{4}.

- -

The Change event activated when the user presses Enter sets the value of RegExp.input.

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
-    <meta http-equiv="Content-Script-Type" content="text/javascript">
-    <script type="text/javascript">
-      var re = /(?:\d{3}|\(\d{3}\))([-\/\.])\d{3}\1\d{4}/;
-      function testInfo(phoneInput){
-        var OK = re.exec(phoneInput.value);
-        if (!OK)
-          window.alert(phoneInput.value + " isn't a phone number with area code!");
-        else
-          window.alert("Thanks, your phone number is " + OK[0]);
-      }
-    </script>
-  </head>
-  <body>
-    <p>Enter your phone number (with area code) and then click "Check".
-        <br>The expected format is like ###-###-####.</p>
-    <form action="#">
-      <input id="phone"><button onclick="testInfo(document.getElementById('phone'));">Check</button>
-    </form>
-  </body>
-</html>
-
- -
{{PreviousNext("Web/JavaScript/Guide/Text_formatting", "Web/JavaScript/Guide/Indexed_collections")}}
diff --git a/files/it/web/javascript/guida/functions/index.html b/files/it/web/javascript/guida/functions/index.html deleted file mode 100644 index 4aca8d5a7b..0000000000 --- a/files/it/web/javascript/guida/functions/index.html +++ /dev/null @@ -1,646 +0,0 @@ ---- -title: Funzioni -slug: Web/JavaScript/Guida/Functions -translation_of: Web/JavaScript/Guide/Functions ---- -
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Loops_and_iteration", "Web/JavaScript/Guide/Expressions_and_Operators")}}
- -
 
- -

Le funzioni sono tra i blocchi di programmazione fondamentali in JavaScript. Una funzione è una procedura JavaScript — un gruppo di istruzioni ( statement ) che esegue un compito o calcola un valore. Per usare una funzione, occorre definirla, all'interno dello scope dal quale la si invocherà.

- -

Vedi anche l'esaustivo capitolo della guida di riferimento, che tratta delle funzioni JavaScript, per avere maggiori dettagli.

- -

Definire una funzione

- -

Dichiarazioni di funzione

- -

Una definizione di funzione ( o dichiarazione di funzione, o istruzione di funzione ) consiste della parola chiave function, seguita da:

- -
    -
  • il nome della funzione.
    • -
  • una lista di argomenti per la funzione, chiusi tra due parentesi e separati da una virgola.
    • -
  • le istruzioni JavaScript che definiscono la funzione, chiuse tra due parentesi graffe, { }.
    • -
- -

Per esempio, il codice seguente definisce una funzione semplice chiamata square:

- -
function square(number) {
-  return number * number;
-}
-
- -

La funzione square riceve un argomento, chiamato number. La funzione contiene una sola istruzione che dice di restituire ( return ) l'argomento della funzione ( number ) moltiplicato per se stesso. L'istruzione return specifica il valore restituito dalla funzione.

- -
return number * number;
-
- -

I parametri primitivi ( quale un numero ) vengono passati alla funzione come valore; il valore è passato alla funzione, ma se la funzione cambia il valore del parametro, questo cambiamento non si riflette globalmente, o nella funzione chiamante ( la funzione che, eventualmente, ha invocato la funzione in esecuzione ).

- -

Se, invece, alla funzione viene passato un oggetto ( un valore non-primitivo, come, ad esempio, un Array oppure un oggetto definito dall'utente ) come parametro e la funzione modifica le proprietà dell'oggetto, quella modifica sarà visibile anche fuori dalla funzione, come si può vedere dal seguente esempio:

- -
function myFunc(theObject) {
-  theObject.make = "Toyota";
-}
-
-var mycar = {make: "Honda", model: "Accord", year: 1998};
-var x, y;
-
-x = mycar.make; // x gets the value "Honda"
-
-myFunc(mycar);
-y = mycar.make; // y gets the value "Toyota"
-                // (the make property was changed by the function)
-
- -

Espressioni di funzione

- -

Mentre la dichiarazione di funzione di cui sopra è, da un punto di vista sintattico, un'istruzione, le funzioni possono anche essere create da un'espressione di funzione. Una funzione di questo tipo può anche essere anonima; vale a dire, non deve avere un nome. Per esempio, la funzione square potrebbe essere stata definita come:

- -
var square = function(number) { return number * number };
-var x = square(4) // x gets the value 16
- -

Tuttavia, è possibile assegnare un nome alla funzione anche con l'espressione di funzione e quel nome potrà essere utilizzato all'interno della funzione, per riferirsi alla funzione stessa, oppure in un debugger, per identificare la funzione all'interno dello stack:

- -
var factorial = function fac(n) { return n<2 ? 1 : n*fac(n-1) };
-
-console.log(factorial(3));
-
- -

NB: l'oggetto console non è un oggetto standard. Non usatelo in un sito web, poichè potrebbe non funzionare correttamente. Per verificare il funzionamento dell'esempio precedente, usate, piuttosto:

- -

           window.alert(factorial(3));

- -

Le espressioni di funzione sono utili quando si vuole passare una funzione ad un'altra funzione, come argomento. Il prossimo esempio mostra una funzione map che viene definita e poi invocata, con una funzione anonima come primo parametro:

- -
function map(f,a) {
-  var result = [], // Create a new Array
-      i;
-  for (i = 0; i != a.length; i++)
-    result[i] = f(a[i]);
-  return result;
-}
-
- -

Il seguente codice:

- -
map(function(x) {return x * x * x}, [0, 1, 2, 5, 10]);
-
- -

restituisce [0, 1, 8, 125, 1000].

- -

In JavaScript, una funzione può essere definita in base ad una condizione. Per esempio, la definizione di funzione seguente definisce la funzione myFunc solo se num è uguale a 0 ( zero ):

- -
var myFunc;
-if (num == 0){
-  myFunc = function(theObject) {
-    theObject.make = "Toyota"
-  }
-}
- -

Per definire una funzione, inoltre, è possibile usare il costruttore Function, per creare funzioni da una stringa, in runtime, in modo simile a eval().

- -

Un metodo è una funzione che è una proprietà di un oggetto. Leggi di più sugli oggetti e sui metodi in Working with objects.

- -

Chiamare ( invocare ) una funzione

- -

Definire una funzione non significa eseguirla. Definire una funzione significa semplicemente darle un nome e specificare cosa fare quando la funzione viene chiamata ( invocata ). Chiamare una funzione significa eseguire le azioni specificate, utilizzando i parametri indicati. Per esempio, se definiamo la funzione square, possiamo chiamarla o invocarla nel modo seguente:

- -
square(5);
-
- -

Questa istruzione chiama la funzione, inviandole un argomento, il numero 5. La funzione esegue le sue istruzioni e restituisce il valore 25.

- -

Le funzioni devono essere in scope quando vengono chiamate, ma la dichiarazione di funzione può anche apparire sotto la chiamata, nel codice sorgente, come nell'esempio seguente:

- -
console.log(square(5));
-/* ... */
-function square(n) { return n*n }
-
- -

Lo scope di una funzione è la funzione nella quale è stata dichiarata, oppure l'intero programma se la dichiarazione è stata fatta al livello più alto, non annidata in alcun altro blocco di programmazione.

- -
-

Nota: l'ultimo esempio funziona solo quando la funzione viene definita utilizzando la sintassi usata nell'esempio ( function funcName(){} ). Il codice seguente, invece, non funzionerà:

-
- -
console.log(square(5));
-square = function (n) {
-  return n * n;
-}
-
- -

Gli argomenti di una funzione non sono limitati alle stringhe testuali e ai numeri. È possibile passare anche interi oggetti ad una funzione. La funzione show_props() (definita in Working with objects) è un esempio di funzione che riceve, come argomento, un oggetto.

- -

Una funzione può chiamare se stessa. Per esempio, ecco una funzione che calcola in modo ricorsivo i fattoriali ( molto simile alla funzione fac() vista poco prima in questa stessa pagina ):

- -
function factorial(n){
-  if ((n == 0) || (n == 1))
-    return 1;
-  else
-    return (n * factorial(n - 1));
-}
-
- -

A questo punto, è possibile calcolare i fattoriali dei cinque numeri seguenti:

- -
var a, b, c, d, e;
-a = factorial(1); // a gets the value 1
-b = factorial(2); // b gets the value 2
-c = factorial(3); // c gets the value 6
-d = factorial(4); // d gets the value 24
-e = factorial(5); // e gets the value 120
-
- -

Esistono altri metodi per chiamare una funzione. Ci sono casi in cui una funzione deve essere chiamata dinamicamente, oppure casi in cui il numero degli argomenti passati alla funzione varia, oppure casi in cui il contesto della chiamata di funzione deve essere impostato ad uno specifico oggetto, determinato in runtime ( tempo di esecuzione ). È chiaro che le funzioni sono, esse stesse, oggetti, e che questi oggetti hanno propri metodi (vedi l'oggetto Function). Uno di questi metodi, apply(), può essere usato a questo scopo.

- -

Lo scope di una funzione

- -

Alle variabili definite all'interno di una funzione non è possibile accedere dall'esterno della funzione, poichè la variabile è definita solo per lo scope della funzione ( scope: portata, ambiente, ambito in cui il nome della variabile può essere utilizzato per riferirsi ad essa ). Tuttavia, una funzione può accedere a tutte le variabili e a tutte le funzioni definite all'interno dello scope in cui è stata definita. In altre parole, una funzione definita nello scope globale può accedere a tutte le variabili definite nello scope globale. Una funzione definita all'interno di un'altra funzione può accedere anche a tutte le variabili definite nella funzione genitrice ( parent ), oltre che a tutte le altre variabili alle quali può accedere la funzione genitrice.

- -
// Queste variabili sono definite nello scope globale
-
-var num1 = 20,
-    num2 = 3,
-    name = "Chamahk";
-
-// Questa funzione è definita nello scope globale
-
-function multiply() {
-    return num1 * num2;
-    }
-
-multiply(); // restituisce 60
-
-// Un esempio di funzione annidata
-function getScore () {
-  var num1 = 2,
-      num2 = 3;
-
-  function add() {
-    return name + " scored " + (num1 + num2);
-  }
-
-  return add();
-}
-
-getScore(); // restituisce "Chamahk scored 5"
-
- -

Scope e lo stack della funzione

- -

Ricorsione

- -

Una funzione può chiamare se stessa. Esistono tre modi per una funzione di chiamare se stessa:

- -
    -
  1. il nome della funzione
    2. -
  2. arguments.callee
    3. -
  3. una variabile in-scope che fa da riferimento alla funzione
    4. -
- -

Per esempio, considerate la seguente definizione di funzione:

- -
var foo = function bar() {
-   // statements go here
-};
-
- -

All'interno del corpo della funzione, le tre seguenti istruzioni sono equivalenti:

- -
    -
  1. bar()
    2. -
  2. arguments.callee()
    3. -
  3. foo()
    4. -
- -

Una funzione che chiama se stessa viene detta funzione ricorsiva. In qualche modo, la ricorsione è analoga ad un loop. Entrambi eseguono lo stesso codice più volte ed entrambi richiedono una condizione (per evitare un loop infinito, o piuttosto, una ricorsione infinita, in questo caso). Per esempio, il loop seguente:

- -
var x = 0;
-while (x < 10) { // "x < 10" is the loop condition
-   // do stuff
-   x++;
-}
-
- -

può essere convertito in una funzione ricorsiva e in una chiamata a quella funzione:

- -
function loop(x) {
-  if (x >= 10) // "x >= 10" is the exit condition (equivalent to "!(x < 10)")
-    return;
-  // do stuff
-  loop(x + 1); // the recursive call
-}
-loop(0);
-
- -

Tuttavia, alcuni algoritmi non possono essere semplici loop iterativi. Per esempio, per avere tutti i nodi di una struttura ad albero (per esempio, il DOM) è molto più semplice usare la ricorsione:

- -
function walkTree(node) {
-  if (node == null) //
-    return;
-  // do something with node
-  for (var i = 0; i < node.childNodes.length; i++) {
-    walkTree(node.childNodes[i]);
-  }
-}
-
- -

Paragonato alla funzione loop, ciascuna chiamata ricorsiva, qui, esegue, a sua volta, molte chiamate ricorsive.

- -

È possibile convertire qualsiasi algoritmo ricorsivo in un algoritmo non ricorsivo, ma spesso la logica è molto più complessa e per farlo è necessario utilizzare uno stack. In effetti, la ricorsione stessa usa uno stack: lo stack della funzione.

- -

Un comportamento paragonabile allo stack può essere visto nell'esempio seguente:

- -
function foo(i) {
-  if (i < 0)
-    return;
-  console.log('begin:' + i);
-  foo(i - 1);
-  console.log('end:' + i);
-}
-foo(3);
-
-// Output:
-
-// begin:3
-// begin:2
-// begin:1
-// begin:0
-// end:0
-// end:1
-// end:2
-// end:3
- -

Funzioni annidate e chiusure

- -

È possibile annidare una funzione all'interno di una funzione. La funzione annidata ( interna ) è privata, rispetto alla funzione che la contiene (outer o esterna). Essa forma anche una chiusura ( closure ). Una chiusura è un'espressione (normalmente, una funzione) che può avere variabili libere ( non locali ) legate ad un ambiente (ambiente che "chiude" l'espressione).

- -

Dal momento in cui una funzione annidata è una chiusura, una funzione annidata può "ereditare" gli argomenti e le variabili della sua funzione contenitore (esterna o genitrice). In altre parole, la funzione interna contiene lo scope ( ambiente ) della funzione esterna.

- -

Per riepilogare:

- -
    -
  • alla funzione interna possono accedere solo le istruzioni contenute nella funzione esterna.
    • -
- -
    -
  • la funzione interna forma una chiusura: la funzione interna può utilizzare gli argomenti e le variabili della funzione esterna, mentre la funzione esterna non può utilizzare gli argomenti e le variabili della funzione interna.
    • -
- -

Ecco un esempio di funzione annidata:

- -
function addSquares(a,b) {
-  function square(x) {
-    return x * x;
-  }
-  return square(a) + square(b);
-}
-a = addSquares(2,3); // restituisce 13
-b = addSquares(3,4); // restituisce 25
-c = addSquares(4,5); // restituisce 41
-
- -

Dal momento in cui la funzione interna forma una chiusura, è possibile chiamare la funzione esterna e specificare gli argomenti per entrambe le funzioni, quella esterna e quella interna:

- -
function outside(x) {
-  function inside(y) {
-    return x + y;
-  }
-  return inside;
-}
-fn_inside = outside(3); // Come dire: dammi una funzione che addizioni 3 a qualsiasi altro valore le venga passato
-result = fn_inside(5); // restituisce 8
-
-result1 = outside(3)(5); // restituisce 8
-
- -

Persistenza delle variabili

- -

Da notare come x venga preservata anche all'uscita da inside. Una chiusura deve preservare argomenti e variabili in tutti gli scope ai quali è riferita. Poichè ogni chiamata potrebbe trasportare argomenti differenti, per ogni chiamata alla funzione outside viene creata una nuova chiusura. La memoria può essere liberata solo quando inside non è più accessibile.

- -

Una chiusura non è differente da un riferimento ad un oggetto, ma è meno ovvia di quest'ultimo, perchè non richiede di impostare direttamente il riferimento e perchè non è possibile ispezionare l'oggetto al quale il riferimento punta.

- -

Funzioni annidate multiple

- -

Le funzioni possono essere annidate a più livelli. Per esempio, una funzione (A), può contenere una funzione (B), che può contenere, a sua volta, una funzione (C). Entrambe le funzioni B e C formano una chiusura, qui, così B può accedere ad A e C può accedere a B. Inoltre, visto che C può accedere a B che può accedere ad A, C può anche accedere ad A. Quindi, le chiusure possono contenere più scope; ciascuna chiusura contiene lo scope delle funzioni che la contengono. Questo meccanismo è chiamato scope chaining ( catena di scope ). (Perchè è chiamata "catena" sarà chiaro tra poco.)

- -

Considerate l'esempio seguente:

- -
function A(x) {
-  function B(y) {
-    function C(z) {
-      console.log(x + y + z);
-    }
-    C(3);
-  }
-  B(2);
-}
-A(1); // logs 6 (1 + 2 + 3)
-
- -

In questo esempio, C accede alla variabile y di B e alla x di A. Questo accade perchè:

- -
    -
  1. B forma una chiusura che include A: quindi, B può accedere agli argomenti ed alle variabili di A.
    2. -
  2. C forma una chiusura che include B.
    3. -
  3. Poichè la chiusura di B include A, la chiusura di C include A; C può accedere agli argomenti ed alle variabili sia di B che di A. In altre parole, C unisce in una catena gli scope di B ed A in quell'ordine.
    4. -
- -

Il contrario, tuttavia, non è vero. A non può accedere a C, perchè A non può accedere ad alcun argomento o variabile di B, di cui C è una variabile. Quindi, C resta privata solo a  B.

- -

Conflitti tra nomi

- -

Quando due argomenti o variabili, all'interno degli scope di una chiusura hanno lo stesso nome, nasce un conflitto tra nomi. Gli scope più interni hanno la precedenza, così lo scope più annidato ha la precedenza più elevata, mentre lo scope più esterno ha la precedenza più bassa. Questa è la catena degli scope. Il primo della catena è lo scope più annidato, mentre l'ultimo è lo scope più esterno. Vediamo il seguente esempio:

- -
function outside() {
-  var x = 10;
-  function inside(x) {
-    return x;
-  }
-  return inside;
-}
-result = outside()(20); // returns 20 instead of 10
- -

Il conflitto tra nomi avviene con l'istruzione return x ed è tra il nome del parametro x di inside ed il nome della variabile x di outside. La catena di scope qui è {inside, outside, global object}. Quindi, la x di inside ha la precedenza sulla x di outside: il valore restituito, alla fine, sarà 20 ( la x di inside ) e non 10 ( la x di  outside ).

- -

Closure

- -

Le closure sono uno dei meccanismi più potenti di JavaScript. JavaScript permette l'annidamento di funzioni e riconosce alla funzione interna il pieno accesso a tutte le variabili e a tutte le funzioni definite nella funzione esterna ( e a tutte le altre variabili e funzioni cui la funzione esterna ha accesso ). Tuttavia, la funzione esterna non ha accesso alle variabili ed alle funzioni definite nella funzione interna. Questo offre una certa protezione alle variabili della funzione interna. Inoltre, dal momento in cui la funzione interna ha accesso allo scope della funzione esterna, le variabili e le funzioni definite nella funzione esterna sopravviveranno alla funzione esterna stessa, se la funzione interna fa in modo di sopravvivere alla funzione esterna. Una closure viene creata quando la funzione interna viene resa disponibile in qualche modo agli scope esterni alla funzione esterna.

- -
var pet = function(name) {   // La funzione esterna definisce una variabile di nome "name"
-  var getName = function() {
-    return name;             // La funzione interna ha accesso alla variabile "name" della funzione esterna
-  }
-  return getName;            // restituisce la funzione interna, esponendola, quindi, a scope esterni
-},
-myPet = pet("Vivie");
-
-myPet();                     // restituisce "Vivie"
-
- -

Può essere molto più complicato del codice scritto sopra. Può essere restituito un oggetto contenente metodi per manipolare le variabili interne della funzione esterna.

- -
var createPet = function(name) {
-  var sex;
-
-  return {
-    setName: function(newName) {
-      name = newName;
-    },
-
-    getName: function() {
-      return name;
-    },
-
-    getSex: function() {
-      return sex;
-    },
-
-    setSex: function(newSex) {
-      if(typeof newSex == "string" && (newSex.toLowerCase() == "male" || newSex.toLowerCase() == "female")) {
-        sex = newSex;
-      }
-    }
-  }
-}
-
-var pet = createPet("Vivie");
-pet.getName();                  // Vivie
-
-pet.setName("Oliver");
-pet.setSex("male");
-pet.getSex();                   // male
-pet.getName();                  // Oliver
-
- -

Nel codice sopra, la variabile name della funzione esterna è accessibile alle funzioni interne e non c'è modo di accedere alle variabili interne, se non attraverso le funzioni interne. Le variabili interne della funzione interna agiscono come magazzino sicuro per le funzioni interne. Esse conservano i dati "persistenti" e sicuri che le funzioni interne utilizzano. Le funzioni non hanno nemmeno bisogno di vedersi assegnare ad una variabile o di avere un nome.

- -
var getCode = (function(){
-  var secureCode = "0]Eal(eh&2";    // A code we do not want outsiders to be able to modify...
-
-  return function () {
-    return secureCode;
-  };
-})();
-
-getCode();    // Returns the secureCode
-
- -

Ci sono, tuttavia, alcuni pericoli dai quali guardarsi, quando si utilizzano le closure. Se una funzione chiusa definisce una variabile che ha lo stesso nome di una variabile definita nello scope esterno, non sarà più possibile riferirsi alla variabile esterna.

- -
var createPet = function(name) {  // Outer function defines a variable called "name"
-  return {
-    setName: function(name) {    // Enclosed function also defines a variable called "name"
-      name = name;               // ??? How do we access the "name" defined by the outer function ???
-    }
-  }
-}
-
- -

È davvero  complicato usare la variabile magica this nelle closure. La variabile this è da usarsi con cautela, poichè ciò a cui this si riferisce dipende esclusivamente da dove è stata invocata la funzione, piuttosto che da dove è stata definita.

- -

Usare l'oggetto arguments

- -

Gli argomenti di una funzione vengono memorizzati in un oggetto, strutturato come un array. All'interno di una funzione, è possibile riferirsi agli argomenti passati alla funzione stessa nel modo seguente:

- -
arguments[i]
-
- -

dove i è il numero ordinale dell'argomento, a partire da zero. Così, il primo argomento passato ad una funzione sarà arguments[0]. Il numero totale degli argomenti è dato da arguments.length.

- -

Usando l'oggetto arguments, è possibile chiamare una funzione con più argomenti di quanti ne possa formalmente accettare. Questo è spesso utile se non si sa in anticipo quanti argomenti verranno passati alla funzione. Si può usare l'attributo  arguments.length per determinare il numero degli argomenti realmente passati alla funzione, per poi accedere a ciascuno di essi usando l'oggetto arguments.

- -

Prendiamo, per esempio, una funzione che unisca più stringhe. Il solo argomento formale previsto per la funzione è una stringa che specifica i caratteri da usare per separare le singole voci. La funzione viene definita così:

- -
function myConcat(separator) {
-   var result = "", // initialize list
-       i;
-   // iterate through arguments
-   for (i = 1; i < arguments.length; i++) {
-      result += arguments[i] + separator;
-   }
-   return result;
-}
-
- -

È possibile passare una quantità qualsiasi di argomenti alla funzione e la funzione comporrà una stringa testuale contenente tutti gli argomenti passati:

- -
// returns "red, orange, blue, "
-myConcat(", ", "red", "orange", "blue");
-
-// returns "elephant; giraffe; lion; cheetah; "
-myConcat("; ", "elephant", "giraffe", "lion", "cheetah");
-
-// returns "sage. basil. oregano. pepper. parsley. "
-myConcat(". ", "sage", "basil", "oregano", "pepper", "parsley");
-
- -
-

Nota: La variabile arguments è simile ad un array (  "array-like" ), ma non è un array. È simile ad un array poichè ha un indice numerato ed una proprietà length. Tuttavia, non possiede tutti i metodi di manipolazione degli array.

-
- -

Vedi l'oggetto Function nella JavaScript reference, per avere maggiori informazioni.

- -

I parametri di una funzione

- -

A partire da ECMAScript 6, esistono due nuovi tipi di parametri: i parametri di default e i parametri rest.

- -

I parametri di default

- -

In JavaScript, i parametri di una funzione hanno come valore di default undefined. Tuttavia, in alcune situazioni potrebbe essere utile impostare un diverso valore di default. In questo, possono aiutare i parametri di default.

- -

In passato, la strategia comune per impostare i valori di default era quella di verificare i valori dei parametri, all'interno del corpo della funzione, ed assegnare loro un valore, nel caso fossero stati undefined. Se nell'esempio seguente non venisse passato, durante la chiamata, alcun valore per b, il suo valore sarebbe undefined, anche quando venisse valutata l'istruzione a*b, e la chiamata a multiply restituirebbe NaN ( Not a Number ). Tuttavia, questo valore viene definito nella seconda riga:

- -
function multiply(a, b) {
-  b = typeof b !== 'undefined' ?  b : 1;
-
-  return a*b;
-}
-
-multiply(5); // 5
-
- -

Con i parametri di deafult, la verifica all'interno del corpo della funzione non è più necessaria. Ora, è possibile mettere 1 come valore di default per b nella dichiarazione della funzione:

- -
function multiply(a, b = 1) {
-  return a*b;
-}
-
-multiply(5); // 5
- -

Per maggiori dettagli, vedi paremetri di default nella Javascript reference.

- -

I parametri Rest

- -

La sintassi dei rest parameter permette di rappresentare un indefinito numero di argomenti come un array. Nell'esempio, usiamo i parametri rest per rappresentare l'insieme degli argomenti composto dagli argomenti successivi al primo ( a partire dal secondo argomento fino alla fine ). Poi, moltiplichiamo ciascun argomento dell'insieme per il primo. Questo esempio utilizza una funzione a freccia, che verrà introdotta nella prossima sezione.

- -
function multiply(multiplier, ...theArgs) {
-  return theArgs.map(x => multiplier * x);
-}
-
-var arr = multiply(2, 1, 2, 3);
-console.log(arr); // [2, 4, 6]
- -

Le funzioni a freccia

- -

Una espressione di funzione a freccia ( nota anche come fat arrow function ) ha una sintassi più stringata rispetto alle espressioni di funzione e forza, lessicalmente, il valore di this. Le funzioni a freccia sono sempre anonime. Vedi anche il post di hacks.mozilla.org: "ES6 In Depth: Arrow functions".

- -

Sono due i fattori che influenzarono l'introduzione delle funzioni a freccia: la brevità delle funzioni ed il this lessicale.

- -

Funzioni più brevi

- -

In alcuni modelli funzionali, funzioni più brevi sono le benvenute. Paragoniamo le due istruzioni seguenti:

- -
var a = [
-  "Hydrogen",
-  "Helium",
-  "Lithium",
-  "Beryl­lium"
-];
-
-var a2 = a.map(function(s){ return s.length });
-var a3 = a.map( s => s.length );
- -

Il this lessicale

- -

Until arrow functions, every new function defined its own this value (a new object in case of a constructor, undefined in strict mode function calls, the context object if the function is called as an "object method", etc.). This proved to be annoying with an object-oriented style of programming.

- -
function Person() {
-  // The Person() constructor defines `this` as itself.
-  this.age = 0;
-
-  setInterval(function growUp() {
-    // In nonstrict mode, the growUp() function defines `this`
-    // as the global object, which is different from the `this`
-    // defined by the Person() constructor.
-    this.age++;
-  }, 1000);
-}
-
-var p = new Person();
- -

In ECMAScript 3/5, this issue was fixed by assigning the value in this to a variable that could be closed over.

- -
function Person() {
-  var self = this; // Some choose `that` instead of `self`.
-                   // Choose one and be consistent.
-  self.age = 0;
-
-  setInterval(function growUp() {
-    // The callback refers to the `self` variable of which
-    // the value is the expected object.
-    self.age++;
-  }, 1000);
-}
- -

Alternatively, a bound function could be created so that the proper this value would be passed to the growUp() function.

- -

Arrow functions capture the this value of the enclosing context, so the following code works as expected.

- -
function Person(){
-  this.age = 0;
-
-  setInterval(() => {
-    this.age++; // |this| properly refers to the person object
-  }, 1000);
-}
-
-var p = new Person();
- -

Predefined functions

- -

JavaScript has several top-level, built-in functions:

- -
-
{{jsxref("Global_Objects/eval", "eval()")}}
-
-

The eval() method evaluates JavaScript code represented as a string.

-
-
{{jsxref("Global_Objects/uneval", "uneval()")}} {{non-standard_inline}}
-
-

The uneval() method creates a string representation of the source code of an {{jsxref("Object")}}.

-
-
{{jsxref("Global_Objects/isFinite", "isFinite()")}}
-
-

The global isFinite() function determines whether the passed value is a finite number. If needed, the parameter is first converted to a number.

-
-
{{jsxref("Global_Objects/isNaN", "isNaN()")}}
-
-

The isNaN() function determines whether a value is {{jsxref("Global_Objects/NaN", "NaN")}} or not. Note: coercion inside the isNaN function has interesting rules; you may alternatively want to use {{jsxref("Number.isNaN()")}}, as defined in ECMAScript 6, or you can use typeof to determine if the value is Not-A-Number.

-
-
{{jsxref("Global_Objects/parseFloat", "parseFloat()")}}
-
-

The parseFloat() function parses a string argument and returns a floating point number.

-
-
{{jsxref("Global_Objects/parseInt", "parseInt()")}}
-
-

The parseInt() function parses a string argument and returns an integer of the specified radix (the base in mathematical numeral systems).

-
-
{{jsxref("Global_Objects/decodeURI", "decodeURI()")}}
-
-

The decodeURI() function decodes a Uniform Resource Identifier (URI) previously created by {{jsxref("Global_Objects/encodeURI", "encodeURI")}} or by a similar routine.

-
-
{{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent()")}}
-
-

The decodeURIComponent() method decodes a Uniform Resource Identifier (URI) component previously created by {{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent")}} or by a similar routine.

-
-
{{jsxref("Global_Objects/encodeURI", "encodeURI()")}}
-
-

The encodeURI() method encodes a Uniform Resource Identifier (URI) by replacing each instance of certain characters by one, two, three, or four escape sequences representing the UTF-8 encoding of the character (will only be four escape sequences for characters composed of two "surrogate" characters).

-
-
{{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent()")}}
-
-

The encodeURIComponent() method encodes a Uniform Resource Identifier (URI) component by replacing each instance of certain characters by one, two, three, or four escape sequences representing the UTF-8 encoding of the character (will only be four escape sequences for characters composed of two "surrogate" characters).

-
-
{{jsxref("Global_Objects/escape", "escape()")}} {{deprecated_inline}}
-
-

The deprecated escape() method computes a new string in which certain characters have been replaced by a hexadecimal escape sequence. Use {{jsxref("Global_Objects/encodeURI", "encodeURI")}} or {{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent")}} instead.

-
-
{{jsxref("Global_Objects/unescape", "unescape()")}} {{deprecated_inline}}
-
-

The deprecated unescape() method computes a new string in which hexadecimal escape sequences are replaced with the character that it represents. The escape sequences might be introduced by a function like {{jsxref("Global_Objects/escape", "escape")}}. Because unescape() is deprecated, use {{jsxref("Global_Objects/decodeURI", "decodeURI()")}} or {{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent")}} instead.

-
-
- -

{{PreviousNext("Web/JavaScript/Guide/Loops_and_iteration", "Web/JavaScript/Guide/Expressions_and_Operators")}}

diff --git a/files/it/web/javascript/guida/grammar_and_types/index.html b/files/it/web/javascript/guida/grammar_and_types/index.html deleted file mode 100644 index 2a43d5230d..0000000000 --- a/files/it/web/javascript/guida/grammar_and_types/index.html +++ /dev/null @@ -1,659 +0,0 @@ ---- -title: Grammatica e tipi -slug: Web/JavaScript/Guida/Grammar_and_types -translation_of: Web/JavaScript/Guide/Grammar_and_types ---- -
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Introduction", "Web/JavaScript/Guide/Control_flow_and_error_handling")}}
- -

Questo capitolo tratta la sintassi di base di JavaScript, le dichiarazioni di variabili, i tipi di dati e i letterali.

- -

Nozioni di base

- -

JavaScript mutua molta della sua sintassi da Java, ma è anche influenzato da Awk, Perl e Python.

- -

JavaScript è sensibile al maiuscolo-minuscolo (case-sensitive) e usa l'insieme di caratteri Unicode.

- -

In JavaScript, le istruzioni sono separate da punto e vigola (;). Spazi, tabulazioni e caratteri di a capo sono chiamati spazi bianchi. Il testo sorgente di uno script JavaScript viene analizzato da sinistra verso destra ed è convertito in una sequenza di elementi di input che sono: token, caratteri di controllo, terminatori di linea, commenti o spazi bianchi. ECMAScript definisce anche determinate parole chiave e letterali e ha delle regole per l'inserimento automatico dei punti e virgola (ASI) per chiudere le istruzioni. Tuttavia si raccomanda di aggiungere sempre un punto e virgola per terminare ogni istruzione, questo eviterà effetti collaterali. Per maggiori informazioni si veda il riferimento dettagliato riguardo la lexical grammar di JavaScript.

- -

Commenti

- -

La sintassi dei commenti è la stessa di quelli del C++ e di molti altri linguaggi:

- -
// una linea di commento
-
-/* questo è un commento più lungo,
-   occupa più linee
- */
-
-/* Però non puoi /* annidare i commenti */ SyntaxError */
- -

Dichiarazioni

- -

Ci sono tre tipi di dichiarazioni in JavaScript.

- -
-
{{jsxref("Statements/var", "var")}}
-
Dichiarazione di una variabile, opzionalmente inizializzata ad un valore.
-
{{experimental_inline}} {{jsxref("Statements/let", "let")}}
-
Dichiarazione di una variabile locale con visibilità nel blocco, opzionalmente inizializzata ad un valore.
-
{{experimental_inline}} {{jsxref("Statements/const", "const")}}
-
Dichiarazione di una costante in sola lettura con un nome.
-
- -

Variabili

- -

Le variabili sono nomi simbolici da usare nelle applicazioni in luogo dei valori che rappresentano. I nomi delle variabili, chiamati  {{Glossary("Identifier", "identificatori")}}, devono seguire certe regole di scrittura.

- -

Un identificatore JavaScript deve iniziare con una lettera, un trattino basso (_) o segno del dollaro ($), mentre i caratteri successivi possono anche essere le cifre (0-9). Siccome JavaScript è case-sensitive, le lettere includono i caratteri da "A" fino a "Z" (maiuscoli) e i caratteri da "a" fino a "z" (minuscoli).

- -

Si possono usare anche le lettere ISO 8859-1 o Unicode come per esempio å e ü negli identificatori. Possono essere usate anche le sequenze di escape di Unicode come caratteri negli identificatori.

- -

Alcuni esempi di nomi leciti sono Number_hits, temp99 e _name.

- -

Dichiarazione di variabili

- -

Una variabile può essere dichiarata in tre modi:

- -
    -
  • Con la parola chiave {{jsxref("Statements/var", "var")}}, per esempio, var x = 42. Questa sintassi può essere usata per dichiarare sia variabili locali che globali.
    • -
  • Semplicemente assegnandole un valore. Per esempio, x = 42. questo dichiara sempre una variabile globale. Genera uno warning nella modalità strict di JavaScript. Questa variante non dovrebbe essere usata.
    • -
  • Con la parola chiave {{jsxref("Statements/let", "let")}}, ad esempio, let y = 13. Questa sintassi può essere usata per dichiarare una variabile locale visibile in un blocco. Vedi Visibilità delle variabili più in basso.
    • -
- -

Valutazione delle variabili

- -

Una variabile dichiarata usando le istruzioni  var o let senza nessun valore iniziale specificato ha il valore {{jsxref("undefined")}}.

- -

Il tentativo di accedere ad una variabile non dichiarata o di accedere ad un identificatore dichiarato con l'istruzione let, prima di una sua inizializzazione, provocherà un'eccezione di {{jsxref("ReferenceError")}}:

- -
var a;
-console.log("Il valore di a è " + a); // Scrive nel log "Il valore di a è undefined"
-
-console.log("Il valore di b è " + b); // Solleva una eccezione ReferenceError
-
-console.log("Il valore di c è " + c); // Scrive nel log "Il valore di c è undefined" 
-var c;
-
-console.log("Il valore di x è " + x); // Solleva una eccezione ReferenceError: x is not defined
-let x;
- -

Si può usare undefined per determinare se una variabile ha un valore oppure no. Nel codice seguente alla variabile input non è stato assegnato un valore e la condizione dell'istruzione if è

- -

valuta a true.

- -
var input;
-if(input === undefined){
-  faiQuesto();
-} else {
-  faiQuello();
-}
-
- -

Il valore undefined si comporta come false quando viene usato in un contesto booleano. Ad esempio il codice seguente esegue la funzione miaFunzione perché l'elemento di mioArray non è definito:

- -
var mioArray = [];
-if (!mioArray[0]) miaFunzione();
-
- -

Il valore undefined viene convertito in NaN quando viene usato in un contesto numerico.

- -
var a;
-a + 2;  // Viene valutato a NaN
- -

Quando viene valutata una variabile {{jsxref("null")}}, il valore null si comporta come 0 in un contesto numerico e false in un contesto booleano. Per esempio:

- -
var n = null;
-console.log(n * 32); // Visualizzera nella console 0
-
- -

Visibilità delle variabili

- -

Quando una variabile viene dichiarata fuori da una qualsiasi funzione viene chiamata variabile globale, poiché è disponibile  in tutto il codice nel documento corrente. Quando invece la variabile viene dichiarata in una funzione viene chiamata variabile locale, perché è disponibile soltanto all'interno di quella funzione.

- -

JavaScript prima di ECMAScript 2015 non aveva una visibilità a livello di blocco; piuttosto una variabile dichiarata all'interno di un blocco era locale alla funzione (o al contesto globale) in cui il blocco risiedeva. Per esempio il seguente codice scriverà nel log 5, perché la visibilità di x è la funzione (o il contesto globale) all'interno del quale x viene dichiarata e non il blocco, che in questo caso è l'istruzione if.

- -
if (true) {
-  var x = 5;
-}
-console.log(x);  // 5
-
- -

Il comportamento cambia quando si usa l'istruzione let introdotta in ECMAScript 2015.

- -
if (true) {
-  let y = 5;
-}
-console.log(y);  // ReferenceError: y non è definita
-
- -

Sollevamento delle variabili

- -

Un'altra cosa inusuale riguardo le variabili in JavaScript è che si può fare riferimento ad una variabile dichiarata più avanti nello script senza causare una eccezione. Questo concetto è conosciuto come innalzamento (hoisting); le variabili in JavaScript sono in un certo senso "sollevate" o spostate all'inizio della definizione del corpo della funzione o dell'istruzione. Tuttavia le variabili che sono state sollevate ritornano il valore undefined. Dunque se viene usata (o si fa riferimento ad) una variabile prima che venga dichiarata questa ritornà undefined.

- -
/**
- * Esempio 1
- */
-console.log(x === undefined); // visualizza "true" nel log
-var x = 3;
-
-/**
- * Esempio 2
- */
-var myvar = "mio valore";
-
-(function() {
-  console.log(myvar); // visualizza "undefined" nel log
-  var myvar = "valore locale";
-})();
-
- -

L'esempio sopra sarà interpretato nello stesso modo di:

- -
/**
- * Esempio 1
- */
-var x;
-console.log(x === undefined); // visualizza nel log "true"
-x = 3;
-
-/**
- * Esempio 2
- */
-var myvar = "mio valore";
-
-(function() {
-  var myvar;
-  console.log(myvar); // undefined
-  myvar = "valore locale";
-})();
-
- -

Per via dell'innalzamento, tutte le istruzioni var in una funzione dovrebbero essere posizionate prima di ogni altra istruzione che vada a definire una funzione. Questa buona pratica incrementa la chiarezza del codice.

- -

In ECMAScript 2015, let (const) non solleverà/sposterà la variabile all'inizio della dichiarazione del blocco, dunque un riferimento alla variabile nel blocco prima che questa venga dichiarata risulterà in un'eccezione di {{jsxref("ReferenceError")}}. La variabile si dice in una "zona temporale morta" ("temporal dead zone") dall'inizio del blocco fino alla a che non si incontri la sua dichiarazione.

- -
console.log(x); // Solleverà un'eccezione ReferenceError
-let x = 3
- -

Sollevamento delle Funzioni

- -

Nel caso delle funzioni, solo la dichiarazione della funzione verrà spostata all'inizio. Se la funzione viene introdotta da un'espressione, in questo caso non verrà spostata.

- -
/* Function declaration */
-
-foo(); // "bar"
-
-function foo() {
-  console.log("bar");
-}
-
-
-/* Function expression */
-
-baz(); // TypeError: baz is not a function
-
-var baz = function() {
-  console.log("bar2");
-};
- -

Variabli globali

- -

Le variabili globali sono in effetti proprietà dell'oggetto globale. Nelle pagine web l'oggetto globale è {{domxref("window")}} quindi è possibile impostare e accedere alle variabili globali usando la sintassi window.variabile.

- -

Di conseguenza è possibile accedere a variabili globali dichiarate in una finestra o un frame da un'altra finestra o frame specificando il nome della finestra o del frame. Per esempio, se una variabile chiamata numeroDiTelefono è dichiarata in un documento, è possibile far riferimento a questa variabile dall'interno di un iframe come parent.numeroDiTelefono.

- -

Costanti

- -

È possibile creare una costante in sola lettura dandole un nome usando la parola chiave {{jsxref("Statements/const", "const")}}. La sintassi di un identificatore di costante è la stessa di un identificatore di variabile: deve iniziare con una lettera, trattino basso (_) o segno del dollaro ($) e può contenere caratteri alfabetici, numerici o trattini bassi.

- -
const PI = 3.14;
-
- -

Una costante non può cambiare il suo valore attraverso ulteriori assegnazioni o essere ridichiarata mentre lo script è in esecuzione. Deve anche essere inizializzata ad un valore.

- -

Le regole di visibilità per le costanti sono le stesse di quelle per le variabil con visibilità al livello di blocco dichiarate con l'istruzione let. Se la parola chiave const viene omessa si assume che l'identificatore rappresenta una variabile.

- -

Non è possibile dichiarare una costante con lo stesso nome di una funzione o di una variabile nello stesso spazio di visibilità. Per esempio:

- -
// QUESTO CAUSERÀ UN ERRORE
-function f() {};
-const f = 5;
-
-// ANCHE QUESTO CAUSERÀ UN ERRORE
-function f() {
-  const g = 5;
-  var g;
-
-  //istruzioni
-}
-
- -

Strutture dati e tipi

- -

Tipi di dato

- -

L'ultimo standard ECMAScript definisce sette tipi di dati:

- -
    -
  • Sei tipi di dato che sono {{Glossary("Primitive", "primitives")}}: -
      -
    • {{Glossary("Boolean")}}. true e false.
      • -
    • {{Glossary("null")}}. Una parola chiave che denota un valore nullo. Siccome JavaScript è case-sensitive, null non è lo stesso di Null, NULL, o qualsiasi altra variante.
      • -
    • {{Glossary("undefined")}}. Una proprietà top-level il cui valore non è stato definito.
      • -
    • {{Glossary("Number")}}. 42 oppure 3.14159.
      • -
    • {{Glossary("String")}}. "Salve"
      • -
    • {{Glossary("Symbol")}} (nuovo in ECMAScript 2015). Un tipo di dato la cui istanza è unica e immutabile.
      • -
    -
    • -
  • e {{Glossary("Object")}}
    • -
- -

Sebbene questi tipi di dati siano relativamente pochi questi permettono di eseguire funzioni utili nelle applicazioni. {{jsxref("Object", "Objects")}} e {{jsxref("Function", "functions")}} sono altri elementi fondamentali nel linguaggio. Si può pensatre agli oggetti come a contenitori con un nome per dei valori e alle funzioni come a procedure che l'applicazione può compiere.

- -

Conversione dei tipi dei dati

- -

JavaScript è un linguaggio con tipi assegnati dinamicamente. Questo significa che non si va a specificare il tipo di dato che una variabile conterrà quando viene dichiarata e anche che il tipo di un dato viene convertito automaticamente a seconda delle necessità durante l'esecuzione dello script. Così, per esempio, si può definire una variabile come segue:

- -
var risposta = 42;
-
- -

E più avanti è possibile assegnare alla stessa variabile un valore testo (stringa), per esempio:

- -
risposta = "Grazie per tutti i pesci...";
-
- -

Poiché in JavaScript i tipi si assegnano dinamicamente questa assegnazione non causerà un messaggio di errore.

- -

Nelle espressioni che coinvolgono valori numerici e stringhe con l'operatore + JavaScript converte i valori numerici in stringhe. Per esempio si considerino le seguenti istruzioni:

- -
x = "La risposta è " + 42 // "La risposta è 42"
-y = 42 + " è la risposta" // "42 è la risposta"
-
- -

In istruzioni che coinvolgono altri operatori JavaScript non converte valori numerici in stringa. Per esempio:

- -
"37" - 7 // 30
-"37" + 7 // "377"
-
- -

Conversione delle stringhe in numeri

- -

Nel caso in cui il valore che rappresenta un numero è memorizzato come stringa ci sono dei metodi per eseguire la conversione:

- -
    -
  • {{jsxref("parseInt", "parseInt()")}}
    • -
  • {{jsxref("parseFloat", "parseFloat()")}}
    • -
- -

parseInt ritornerà soltanto numeri interi,  ha una utilità ridotta per i numeri decimali. In aggiunta è buona pratica nell'uso di parseInt includere il parametro base, questo parametro è usato per specificare quale sistema di numerazione deve essere usato.

- -

Un metodo alternativo per recuperare un numero da un testo è di usare l'operatore + (più unario):

- -
"1.1" + "1.1" = "1.11.1"
-(+"1.1") + (+"1.1") = 2.2
-// Note: le parentesi sono aggiunte per chiarezza, non sono richieste.
- -

Letterali

- -

I letterali sono usati per rappresentare i valori in JavaScript. Questi sono valori fissati, non variabili, che venvono letteralmente inseriti nello script. Questa sezione descrive i seguenti tipi di letterali:

- -
    -
  • {{anch("Letterali di array")}}
    • -
  • {{anch("Letterali di booleani")}}
    • -
  • {{anch("Letterali di numeri in virgola-mobile")}}
    • -
  • {{anch("Letterali di numeri Interi")}}
    • -
  • {{anch("Letterali di oggeti")}}
    • -
  • {{anch("Letterali di RegExp")}}
    • -
  • {{anch("Letterali di stringhe")}}
    • -
- -

Letterali di array

- -

Un letterale di array è un elenco di zero o più espressioni ognuna delle quali rappresenta un elemento dell'array, inclusa in parentesi quadre ([]). Quando si crea un array usando un letterale l'array stesso viene inizializzato con i valori specificati come elementi, la sua lunghezza è impostata al numero di elementi specificati.

- -

Il seguente esempio crea un array tipiDiCaffe con tre elementi e una lunghezza di tre:

- -
var tipiDiCaffe = ["French Roast", "Colombian", "Kona"];
-
- -
-

Nota: Un letterale di array è un tipo di inizializzatore di oggetto. Vedi Usando inizializzatori di Oggetti.

-
- -

Se un array viene creato usando un letterale in uno script top-level, JavaScript interpreta l'array ogni volta che valuta l'espressione che contiene l'array letterale. In aggiunta l'array letterale usato in una funzione viene creato ogni volta che la funzione viene chiamata.

- -

Gli array letterali sono anche oggetti Array. Si veda {{jsxref("Array")}} e Collezione indicizzata per i dettagli sugli oggetti Array.

- -

Virgole aggiuntive negli array letterali

- -

Non è obbligatorio specificare tutti gli elementi in un array letterale. Mettendo due virgole in fila l'array viene creato con il valore undefined per gli elementi non specificati. Il seguente esempio crea l'array pesce:

- -
var pesce = ["Leone", , "Angelo"];
-
- -

Questo array ha due elementi con un valore e un elemento vuoto (pesce[0] is "Leone", pesce[1] è undefined, e pesce[2] è "Angelo").

- -

Inserendo una virgola in fondo alla lista degli elementi la virgola stessa verrà ignorata. Nel seguente esempio la lunghezza dell'array è tre, non c'è un miaLista[3]. Tutte le altre virgole nell'elenco indicano un elemento nuovo.

- -
-

Nota: Le virgole in coda possono creare errori nelle versioni più vecchie dei browser ed è buona pratica rimuoverle.

-
- -
var miaLista = ['casa', , 'scuola', ];
-
- -

Nel seguente esempio la lunghezza dell'array è quattro e miaLista[0] e mialista[2] sono mancanti.

- -
var miaLista = [ , 'casa', , 'scuola'];
-
- -

Nel seguente esempio la lunghezza dell'array è quattro e mialista[1] e miaLista[3] sono mancanti. Soltanto l'ultima virgola viene ignorata.

- -
var miaLista = ['casa', , 'scuola', , ];
-
- -

Comprendere il comportamento delle virgole in più è importante per comprendere JavaScript come linguaggio, in ogni caso nella scrittura del codice: è buona norma dichiarare esplicitamente gli elementi mancanti come undefined, questo migliorerà la chiarezza e la manutenibilità del codice.

- -

Letterali di booleani

- -

Il tipo Boolean ha due valori letterali: true e false.

- -

Non vanno confusi i valori primitivi Booleani true e false con i valori true e false dell'oggetto Boolean. L'oggetto Boolean è un involucro intorno al tipo primitivo Booleano. Vedi {{jsxref("Global_Objects/Boolean", "Boolean")}} per maggiori informazioni.

- -

Letterali di numeri Interi

- -

Gli interi possono essere rappresentati in decimale (base 10), esadecimale (base 16), ottale (base 8) e binario (base 2).

- -
    -
  • I letterali decimali interi sono formati da una sequenza di cifre senza uno 0 (zero) iniziale.
    • -
  • 0 (zero) iniziali in un letterale intero, o un iniziale 0o (o 0O) indicano che il numero è in ottale. Gli interi ottali possono includere soltanto le cifre 0-7.
    • -
  • Un iniziale 0x (o 0X) indica l'esadecimale. Interi esadecimali possono includere le cifre (0-9) e le lettere a-f e A-F.
    • -
  • -

    Un iniziale 0b (o 0B) indica il binario. Gli interi binari possono includere soltanto le cifre 0 e 1.

    -
    • -
- -

Alcuni esempi i di letterali di interi sono:

- -
0, 117 and -345 (decimale, base 10)
-015, 0001 and -0o77 (ottale, base 8)
-0x1123, 0x00111 and -0xF1A7 (esadecimale, "hex" o base 16)
-0b11, 0b0011 and -0b11 (binario, base 2)
-
- -

Per maggiori informazioni, vedi Numeric literals in the Lexical grammar reference.

- -

Letterali di numeri in virgola-mobile

- -

Un letterale per un numero in virgola mobile può avere le seguenti parti:

- -
    -
  • Un intero in base dieci che può avere un segno (cioè può essere preceduto da "+" o "-"),
    • -
  • Un punto decimale ("."),
    • -
  • Una parte decimale (un altro numero in base dieci),
    • -
  • Un esponente.
    • -
- -

La parte esponente è una "e" o "E" seguita da un intero che può essere con segno (preceduto da "+" o "-"). Un numero in virgola mobile deve avere almeno una cifra e un punto oppure una "e" (o "E").

- -

Più concisamente la sintassi è:

- -
[(+|-)][cifre][.cifre][(E|e)[(+|-)]cifre]
-
- -

Per esempio:

- -
3.1415926
--.123456789
--3.1E+12
-.1e-23
-
- -

Letterali di oggetti

- -

Un letterale di un oggetto è una lista di zero o più coppie di nomi di proprietà e valori associati di un oggetto racchiusi in parentesi graffe ({}). Non andrebbe usato un letterale di un oggetto all'inizio di una istruzione, questo porterà ad un errore o non si comporterà come ci si aspetta perché { sarà interpretata come l'inizio di un blocco.

- -

Quello seguente è un esempio di un letterale di un oggetto. Il primo elemento dell'oggetto automobile definisce un proprietà, miaAutomobile, e gli assegna il testo "Saturn"; il secondo elemento, la proprietà getAutomobile, è immediatamente assegnata al valore risultante dall'invocazione della funzione (tipiDiAutomobile("Honda")); il terzo elemento, la proprietà speciale, usa una variabile esistente (saldi).

- -
var saldi = "Toyota";
-
-function tipiDiAutomobile(nome) {
-  if (nome === "Honda") {
-    return nome;
-  } else {
-    return "Spiacente, noi non vendiamo " + nome + ".";
-  }
-}
-
-var automobile = { miaAutomobile: "Saturn", getAutomobile: tipiDiAutomobile("Honda"), speciale: saldi };
-
-console.log(automobile.miaAutomobile);   // Saturn
-console.log(automobile.getAutomobile);  // Honda
-console.log(automobile.speciale); // Toyota
-
- -

In aggiunta si possono usare letterali di tipo numerico o testo come nome di una proprietà o annidare un oggetto dentro un altro. Il seguente esempio usa queste opzioni.

- -
var automobile = { molteAutomobili: {a: "Saab", "b": "Jeep"}, 7: "Mazda" };
-
-console.log(automobile.molteAutomobili.b); // Jeep
-console.log(automobile[7]); // Mazda
-
- -

I nomi delle proprietà degli oggetti possono essere un testo qualsiasi, incluso il testo vuoto. Se il nome della proprietà non è un {{Glossary("Identifier","identifier")}} JavaScript valido o un numero dovrà essere racchiuso tra virgolette. I nomi di proprietà che non sono identificatori validi non possono neanche essere acceduti usando il punto (.), potranno però essere acceduti e impostati usando la notazione analoga a quella degli array ("[]").

- -
var nomiDiProprietaInusuali = {
-  "": "Una stringa vuota",
-  "!": "Bang!"
-}
-console.log(nomiDiProprietaInusuali."");   // SyntaxError: Unexpected string
-console.log(nomiDiProprietaInusuali[""]);  // Una stringa vuota
-console.log(nomiDiProprietaInusuali.!);    // SyntaxError: Unexpected token !
-console.log(nomiDiProprietaInusuali["!"]); // Bang!
- -

In ES2015, i letterali di oggetti sono estesi per supportare l'impostazione del prototipo al momento della costruzione, forme abbreviate per le assegnazioni tipo foo: foo, definizioni di metodi, eseguire chiamate a super e calcolare il nome di proprietà con espressioni. Nel'insieme queste aggiunte avvicinano i letterali di oggetti e le dichiarazioni delle classi permettendo quindi di beneficiare di alcune delle stesse comodità della progettazione orientata agli oggetti.

- -
var obj = {
-    // __proto__
-    __proto__: theProtoObj,
-    // Abbreviazione per ‘handler: handler’
-    handler,
-    // Metodi
-    toString() {
-     // Super calls
-     return "d " + super.toString();
-    },
-    // Nomi di proprietà calcolati (dinamici)
-    [ 'prop_' + (() => 42)() ]: 42
-};
- -

Nota che:

- -
var foo = {a: "alpha", 2: "two"};
-console.log(foo.a);    // alpha
-console.log(foo[2]);   // two
-//console.log(foo.2);  // Error: missing ) after argument list
-//console.log(foo[a]); // Error: a is not defined
-console.log(foo["a"]); // alpha
-console.log(foo["2"]); // two
-
- -

Letterali di RegExp

- -

Un letterale di espressione regolare (RegExp) è un modello (pattern) racchiuso tra barre. il seguente è un esempio di un letterale di una espressione regolare.

- -
var re = /ab+c/;
- -

Letterali di stringhe

- -

Un letterale di testo (stringa nel preguo del testo) è formato da zero o più caratteri racchiusi tra virgolette doppie  (") o singole (').  Una stringa deve essere delimitata da virgolette dello stesso tipo; cioè o entrambe singole o entrambe doppie. I seguenti sono esempi di leterali di testo:

- -
"foo"
-'bar'
-"1234"
-"una linea \n altra linea"
-"prima dell'una"
-
- -

È possibile chiamare qualsiasi metodo dell'oggetto String su una stringa —JavaScript converte automaticamente la stringa in un oggetto temporaneo di tipo String, chiama il metodo, poi elimina l'oggetto temporaneo. È anche possibile usare la proprietà String.length con una stringa letterale:

- -
console.log("John's cat".length)
-// Stamperà il numero di simboli nel testo inclusi gli spazi.
-// In questo caso 10.
-
- -

In ES2015 sono disponibili i letterali modello. I letterali modello sono racchiusi tra accenti gravi (` `)  (accento grave) anziché apici doppi o singoli. Le stringhe modello fornisco dello "zucchero sintattico" per la costruzione delle stringhe. È simile all'interpolazione delle stringhe di Perl, Python e altri. Opzionalmente, un'etichetta può essere aggiunta per permettere la personalizzazione nella costruzione della stringa, evitare gli attacchi per injection o costruire strutture dati di livello più alto dal contenuto di una stringa.

- -
// Creazione di un letterale string di base
-`In JavaScript '\n' is a line-feed.`
-
-// Stringa multilinea
-`In JavaScript this is
- not legal.`
-
-// Interpolazione di stringhe
-var name = "Bob", time = "today";
-`Hello ${name}, how are you ${time}?`
-
-// La costruzione di un prefisso di richiesta HTTP è usata per interpretare le sostituzioni e le costruzioni
-POST`http://foo.org/bar?a=${a}&b=${b}
-     Content-Type: application/json
-     X-Credentials: ${credentials}
-     { "foo": ${foo},
-       "bar": ${bar}}`(myOnReadyStateChangeHandler);
- -

Si dovrebbero usare i letterali stringa a meno che non ci sia specifico bisogno di usare un oggetto String. Si veda {{jsxref("String")}} per dettagli sull'oggetto String.

- -

Uso di caratteri speciali nelle stringhe

- -

Oltre ai caratteri ordinari si possono includere anche dei caratteri speciali nelle stringhe come mostrato nel seguente esempio.

- -
"prima linea \n seconda linea"
-
- -

La seguente tabella elenca i caratteri speciali che possono essere usati nelle stringhe JavaScript.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Table: JavaScript caratteri speciali
CarattereSignificato
\0Byte null
\bBackspace
\fForm feed
\nNew line
\rCarriage return
\tTab
\vTab verticale
\'Apostrofo o virgoletta singola
\"Virgoletta doppia
\\Il carattere backslash
\XXXIl carattere con la codifica Latin-1 specificata da fino a tre caratteri XXX tra 0 e 377. Per esempio \251 è la sequenza ottale per il simbolo di copyright.
\xXXIl carattere con la codifica Latin-1 specificata da due cifre esadecimali XX comprese tra 00 e FF. Per esempio \xA9 è la sequenza ottale per il simbolo di copyright.
\uXXXXIl carattere Unicode specificato da quattro cifre esadecimali XXXX. Per esempio \u00A9 è la sequenza Unicode per il simbolo di copyright. Vedi Unicode escape sequences.
\u{XXXXX}Escape per Unicode code point. Per esempio \u{2F804} è la stessa cosa dell'esape semplice Unicode \uD87E\uDC04.
- -

Caratteri a cui aggiungere il backslash (Escaping)

- -

Per i caratteri non elencati nella tabella un backslash (\) prefisso viene ignorato, questo uso è deprecato e devrebbe essere evitato.

- -

Le virgolette possono essere inserite in una stringa precedendole da un backslash. Questo è noto come escaping delle virgolette. Per esempio:

- -
var quote = "Lui legge \"The Cremation of Sam McGee\" by R.W. Service.";
-console.log(quote);
-
- -

Il risultato sarebbe:

- -
Lui legge "The Cremation of Sam McGee" by R.W. Service.
-
- -

Per includere un backslash in una stringa va fatto l'esape del carattere backslash. Per esempio, per assegnare il percorso c:\temp ad una stringa, usare il seguente:

- -
var home = "c:\\temp";
-
- -

Si può anche fare l'escape delle interruzioni di linea precedendole con un backslash. Sia il backslash che l'interruzione di linea saranno rimosse dal valore della stringa.

- -
var str = "questa stringa \
-è spezzata \
-attraverso multiple\
-linee."
-console.log(str);   // questa stringa è spezzata attraverso multiple linee.
-
- -

Sebbene JavaScript non abbia una sintassi tipo "heredoc", è possibile fare qualcosa di simile aggiungendo una sequenza di escape per "a capo" e facendo l'escape dell'a capo alla fine della linea:

- -
var poem =
-"Roses are red,\n\
-Violets are blue.\n\
-I'm schizophrenic,\n\
-And so am I."
-
- -

Ulteriori informazioni

- -

Questo capitolo si concentra sulla sintassi di base per i tipi e le dichiarazioni. Per imparare di più riguardo i costrutti del linguaggio JavaScript vedi anche i seguenti capitoli in questa guida:

- - - -

Nel prossimo capitolo, tratteremo i costrutti del controllo del flusso e la gestione degli errori.

- -

{{PreviousNext("Web/JavaScript/Guide/Introduction", "Web/JavaScript/Guide/Control_flow_and_error_handling")}}

diff --git a/files/it/web/javascript/guida/index.html b/files/it/web/javascript/guida/index.html deleted file mode 100644 index ba956f21f2..0000000000 --- a/files/it/web/javascript/guida/index.html +++ /dev/null @@ -1,124 +0,0 @@ ---- -title: JavaScript Guide -slug: Web/JavaScript/Guida -tags: - - AJAX - - JavaScript - - JavaScript_Guide - - NeedsTranslation - - TopicStub -translation_of: Web/JavaScript/Guide ---- -
{{jsSidebar("JavaScript Guide")}}
- -

La Guida JavaScript mostra come utilizzare JavaScript e offre una panoramica del linguaggio. Se hai bisogno di informazioni esaustive su una sua funzione, dai un'occhiata alle reference JavaScript.

- -

Capitoli

- -

Questa guida è divisa in vari capitoli:

- - - - - - - - - -

{{Next("Web/JavaScript/Guide/Introduction")}}

diff --git a/files/it/web/javascript/guida/introduzione/index.html b/files/it/web/javascript/guida/introduzione/index.html deleted file mode 100644 index 3825ded91c..0000000000 --- a/files/it/web/javascript/guida/introduzione/index.html +++ /dev/null @@ -1,140 +0,0 @@ ---- -title: Introduzione -slug: Web/JavaScript/Guida/Introduzione -tags: - - Guida - - JavaScript -translation_of: Web/JavaScript/Guide/Introduction ---- -
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}}
- -

Questo capitolo introduce JavaScript e discute alcuni dei suoi concetti fondamentali.

- -

Che cosa dovresti già sapere

- -

Questa guida parte dal presupposto che tu abbia già queste nozioni di base:

- -
    -
  • Una comprensione generica di Internet e del World Wide Web ({{Glossary("WWW")}}).
    • -
  • Una buona conoscenza operativa del HyperText Markup Language ({{Glossary("HTML")}}).
    • -
  • Un po' di esperienza di programmazione. Se sei nuovo della programmazione, prova uno dei tutorials linkati nella pagina principale di JavaScript.
    • -
- -

Dove trovare informazioni su JavaScript

- -

La documentazione JavaScript su MDN comprende:

- -
    -
  • Capire il web fornisce informazioni per i principianti ed introduce i concetti base della programmazione e di Internet.
    • -
  • Guida JavaScript (questa guida) fornisce una panoramica su JavaScript ed i suoi oggetti.
    • -
  • Riferimento JavaScript fornisce materiale di riferimento dettagliato su JavaScript.
    • -
- -

Se sei nuovo di JavaScript, inizia con gli articoli presenti in Capire il web e nella  Guida JavaScript. Quando avrai una chiara comprensione dei fondamentali, potrai usare il  Riferimento JavaScript per apprendere maggiori dettagli su singoli oggetti e parti del linguaggio.

- -

Che cos'è JavaScript?

- -

JavaScript è un linguaggio di scripting cross-platform e object-oriented. È un linguaggio piccolo e leggero. All interno di un ambiente ospite (ad esempio un web browser), JavaScript può essere connesso agli oggetti del suo ambiente per fornire controllo programmatico su di essi.

- -

JavaScript contiene una libreria standard di oggetti come Array, Date e Math, ed una serie di elementi base del linguaggio come operatori, strutture di controllo e dichiarazioni. La base di JavaScript può essere estesa per una varietà di scopi fornendogli oggetti aggiuntivi; ad esempio:

- -
    -
  • Client-side JavaScript estende il linguaggio base fornendo oggetti per controllare il browser ed il suo Document Object Model (DOM). Per esempio, le estensioni client-side permettono ad una applicazione di inserire elementi in un form HTML e rispondere ad eventi dell'utente come il click del mouse, input nei form e navigazione delle pagine.
    • -
  • Server-side JavaScript estende il linguaggio base fornendo oggetti rilevanti per eseguire JavaScript in un server. Per esempio le estensioni server-side consentono ad una applicazione di comunicare con un database, forniscono continuità di informazioni da una chiamata ad un altra dell'applicazione, o permettono la manipolazione di files nel server.
    • -
- -

JavaScript e Java

- -

JavaScript e Java sono simili per certi aspetti, ma fondamentalmente diversi per altri. Il linguaggio JavaScript assomiglia a Java ma non ha la tipizzazione statica ed il controllo forte dei tipi di Java. JavaScript segue larga parte della sintassi delle espressioni di Java, la convenzione sui nomi ed i principali costrutti di controllo di flusso, e questa è la ragione per cui è stato rinominato da LiveScript a JavaScript.
- A differenza del sistema di classi costruito dalle dichiarazione a tempo di compilazione di Java, JavaScript supporta un sistema runtime basato su un piccolo numero di tipi di dato che rappresentano valori Booleani, numerici e di tipo stringa. JavaScript dispone di un modello ad oggetti basato su prototype al posto del più comune modello ad oggetti basato su classi. Il modello prototype-based fornisce ereditarietà dinamica; che significa che ciò che viene ereditato può variare per singoli oggetti. JavaScript inoltre supporta funzioni senza speciali requisiti dichiarativi. Le funzioni possono essere proprietà di oggetti, eseguite come metodi debolmente tipizzati.

- -

JavaScript è un linguaggio con un formalismo molto libero se confrontato a Java. Non è necessario dichiarare tutte le variabili, classi e metodi. Non ci si deve preoccupare se i metodi sono public, privare e protected, e non è necessario implementare interfacce. Variabili, parametri e valori di ritorno delle funzioni non sono tipizzati in modo esplicito.

- -

Java è un linguaggio di programmazione basato su classi progettato per essere veloce e con un controllo dei tipi rigoroso. Con controllo dei tipi rigoroso si intende per esempio, che non è possibile forzare un intero Java in un riferimento ad oggetto o accedere alla memoria privata corrompendo i bytecodes Java. Il modello basato sulle classi di Java significa che i programmi sono composti esclusivamente da classi con i propri metodi. L'ereditarietà delle classi di Java e la tipizzazione forte di solito richiedono gerarchie di oggetti strettamente definite. Questi requisiti rendono la programmazione di Java più complessa rispetto alla programmazione di JavaScript.

- -

D'altra parte, JavaScript si ispira ad una linea di linguaggi più piccoli, tipizzati dinamicamente come HyperTalk e dBASE. Questi linguaggi di scripting offrono strumenti di programmazione ad un pubblico più vasto grazie alla loro sintassi più facile, alle funzionalità specializzate predefinite nel linguaggio, ed ai minimi requisiti per la creazione di oggetti.

- - - - - - - - - - - - - - - - - - - - - - - -
JavaScript confrontato con Java
JavaScriptJava
-

Orientato ad oggetti. Non c'è distinzione tra tipi di oggetti. Ereditarietà con il meccanismo dei prototype e le proprietà ed i metodi possono essere aggiunti ad ogni oggetto dinamicamente.

- 		-

Basato su classi. Gli oggetti vengono distinti in classi ed istanze con tutta l'ereditarietà costruita con lagerarchia delle classi. Classi ed istanze non possono avere proprietà o metodi aggiunti dinamicamente.

-
Le variabili ed i tipi non sono dichiarati (tipizzazione dinamica).Le variabili ed i tipi di dato devono essere dichiarati (tipizzazione statica).
Non si può scrivere automaticamente suk disco fisso.Si può scrivere automaticamente su disco fisso.
- -

Per maggiori informazioni sulle differenze tra JavaScript e Java, vedi il capitolo Dettagli sul modello ad oggetti.

- -

JavaScript e le specifiche ECMAScript

- -

JavaScript è standardizzato da Ecma International — l'associazione Europea per la standardizzazione dei sisteni di comunicazione ed informazione (ECMA è l'acronimo di European Computer Manufacturers Association) per distribuire linguaggio di programmazione standardizzato ed internazionale basato su JavaScript. Questa versione standardizzata di JavaScript, chiamata ECMAScript, si comporta alla stesso modo in tutte le applicazioni che supportano lo standard. Le aziende possono usare il linguaggo standard aperto per svilupare le proprie implementazioni di JavaScript. Lo standard ECMAScript è documentato nelle specifiche ECMA-262. Consulta Novità in JavaScript per conoscere di più sulle differenti versioni di JavaScript e delle edizioni delle specifiche ECMAScript.

- -

Lo standard ECMA-262 è anche approvato da ISO (International Organization for Standardization) come ISO-16262. Si possono trovare le specifiche nel sito Ecma internazionale. Le specifiche ECMAScript non descrivono il Document Object Model (DOM), che viene standardizzato dal World Wide Web Consortium (W3C). Il DOM definisce il modo in cui gli oggetti di un documento HTML vengono esposti al tuo script. Per farti un'idea migliore sulle differenti tecnologie che si usano quando si programma con JavaScript, consulta l'articolo Panoramicha delle tecnologie JavaScript.

- -

Documentazione JavaScript a confronto con le specifiche ECMAScript

- -

Le specifiche ECMAScript sono una serie di requisiti per implementare ECMAScript; sono utili per chi desidera implementare funzionalità compatibili con lo standard del linguaggio nella propria implementazione di ECMAScript (come SpiderMonkey in Firefox, o v8 in Chrome).

- -

La documentazione ECMAScript non è indirizzata ad aiutare i programmatori di script; usa la documentazione di JavaScript per informazioni su come scrivere script.

- -

Le specifiche ECMAScript usano terminologie e sintassi che possono risultare non  familiari ai programmatori JavaScript Sebbene la descrizione del linguaggio possa essere diversa in ECMAScript, il linguaggio in se rimane lo stesso. JavaScript supporta tutte le funzionalità descritte nelle specifiche ECMAScript.

- -

La documentazione JavaScript descrive aspetti del linguaggio che sono appropriati per il programmatore JavaScript.

- -

Iniziare con JavaScript

- -

Iniziare con JavaScript è facile: la sola cosa che serve è un Web browser moderno. Questa guida include alcune funzionalità di JavaScript che sono attualmente disponibili solo nell'ultima versione di Firefox, per questo raccomandiamo di usare la versione più recente di Firefox.

- -

In Firefox sono presenti due strumenti che sono utili per sperimentare con JavaScript: la Console Web ed il Blocco per gli appunti.

- -

La Console Web

- -

La Console Web espone informazioni sulla pagina Web attualmente caricata, ed include una command line che si può usare per eseguire espressioni nella pagina corrente.

- -

Per aprire la Console Web (Ctrl+Shift+K), scegli "Console web" dal menu "Sviluppo web", che si trova nel menu "Strumenti" di Firefox. Essa appare sotto la finestra del browser. Alla fine della console è presente la linea di comando che si può usare per inserire comandi JavaScript ed il risultato compare nel pannello soprastante:

- -

- -

Blocco per gli appunti

- -

La Console Web è magnifica per eseguire singole linee di JavaScript, ma sebbene si possano eseguire linee multiple, non è molto comoda per questo e non è possibile salvare i propri esempi di codice con la Console Web. Quindi per esempi più complessi di codice il Blocco per gli appunti è uno strumento migliore.

- -

Per aprire il Blocco per gli appunti (Shift+F4), scegli "Blocco per gli appunti" dal menu "Sviluppo web", che si trova nel menu "Strumenti" di Firefox. Si apre in una finestra separata ed un editor che puoi usare per scrivere ed eseguire JavaScript nel browser. Si possono anche salvare scripts nel disco e caricare scripts salvati.

- -

- -

Hello world

- -

Per iniziare a scrivere programmi JavaScript, apri il Blocco per gli appunti e scrivi il tuo primo codice "Hello world" JavaScript:

- -
function greetMe(yourName) {
-  alert("Hello " + yourName);
-}
-
-greetMe("World");
-
- -

Seleziona il codice nel blocco e premi Ctrl+R per vedere il risultato nel browser!

- -

Nelle prossime pagine, questa guida ti itrodurra alla sintassi di JavaScript ed alle caratteristiche del linguaggio, in questo modo sarai in grado di scrivere applicazioni più complesse.

- -

{{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}}

diff --git a/files/it/web/javascript/guida/iteratori_e_generatori/index.html b/files/it/web/javascript/guida/iteratori_e_generatori/index.html deleted file mode 100644 index 49b220cdd1..0000000000 --- a/files/it/web/javascript/guida/iteratori_e_generatori/index.html +++ /dev/null @@ -1,162 +0,0 @@ ---- -title: Iteratori e generatori -slug: Web/JavaScript/Guida/Iteratori_e_generatori -translation_of: Web/JavaScript/Guide/Iterators_and_Generators ---- -
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Details_of_the_Object_Model", "Web/JavaScript/Guide/Meta_programming")}}
- -

Processare ognuno degli elementi in una collezione è un'operazione molto comune. JavaScript fornisce tutta una serie di costrutti per iterare una collezione di elementi, dai semplici cicli {{jsxref("Statements/for","for")}} a {{jsxref("Global_Objects/Array/map","map()")}} e {{jsxref("Global_Objects/Array/filter","filter()")}}. Iterators e Generators portano il concetto di iterazione direttamente al cuore del linguaggio e forniscono un meccanismo per personalizzare i cicli {{jsxref("Statements/for...of","for...of")}}.

- -

Per maggiori dettagli, vedi anche:

- -
    -
  • Iteration protocols
    • -
  • {{jsxref("Statements/for...of","for...of")}}
    • -
  • {{jsxref("Statements/function*","function*")}} e {{jsxref("Generator")}}
    • -
  • {{jsxref("Operators/yield","yield")}} e {{jsxref("Operators/yield*","yield*")}}
    • -
- -

Iterators

- -

Un oggetto è un iterator quando sa come accedere agli elementi di una collezione uno per volta, conservando l'informazione sulla sua posizione corrente nella sequenza. In Javascript un iterator è un oggetto che implementa il metodo next() , il quale ritorna l'elemento successivo della sequenza. Questo metodo ritorna un oggetto con due proprietà: done evalue.

- -

Una volta che è stato creato, un iterator può essere utlizzato esplicitamente chiamando più volte il metodo next().

- -
function makeIterator(array) {
-    var nextIndex = 0;
-
-    return {
-       next: function() {
-           return nextIndex < array.length ?
-               {value: array[nextIndex++], done: false} :
-               {done: true};
-       }
-    };
-}
- -

Una volta che un iterator è stato inizializzato, il metodonext() può essere chiamato per accedere a coppie chiave-valore dall'oggetto ritornato:

- -
var it = makeIterator(['yo', 'ya']);
-console.log(it.next().value); // 'yo'
-console.log(it.next().value); // 'ya'
-console.log(it.next().done);  // true
- -

Generators

- -

Nonostante implementare un iterator possa essere utile, richiede una considerevole attenzione nella programmazione a causa del bisogno esplicito di mantenere lo stato interno dell'iteratore. I {{jsxref("Global_Objects/Generator","Generators","","true")}} forniscono una potente alternativa: ti permettono di definire un algoritmo iterativo scrivendo una singola funzione in grado di mantenere il proprio stato.

- -

Una GeneratorFunction è uno speciale tipo di funzione che opera come una "fabbrica" di iterators. Quando viene eseguita ritorna un nuovo oggetto Generator. Una funzione diventa una GeneratorFunction se usa la sintassi {{jsxref("Statements/function*","function*")}}.

- -
function* idMaker() {
-  var index = 0;
-  while(true)
-    yield index++;
-}
-
-var gen = idMaker();
-
-console.log(gen.next().value); // 0
-console.log(gen.next().value); // 1
-console.log(gen.next().value); // 2
-// ...
- -

Iterables

- -

Un oggetto è un iterable se definisce un comportamento di iterazione, come per esempio quali valori sono considerati in un costrutto {{jsxref("Statements/for...of", "for...of")}}. Alcuni tipi built-in di Javascript (come {{jsxref("Array")}} o {{jsxref("Map")}}) hanno un comportamento predefinito, mentre altri tipi (come {{jsxref("Object")}}) non ce l'hanno.

- -

Affinché un oggetto possa essere considerato un iterable deve implementare il metodo @@iterator, cioè l'oggetto (o uno degli oggetti che lo precedono nella catena dei prototipi) deve avere una proprietà con una chiave {{jsxref("Symbol.iterator")}}.

- -

Iterables definiti dall'utente

- -

Possiamo creare i nostri iterables in questo modo:

- -
var myIterable = {};
-myIterable[Symbol.iterator] = function* () {
-    yield 1;
-    yield 2;
-    yield 3;
-};
-
-for (let value of myIterable) {
-    console.log(value);
-}
-// 1
-// 2
-// 3
-
-or
-
-[...myIterable]; // [1, 2, 3]
-
- -

Iterables Built-in

- -

{{jsxref("String")}}, {{jsxref("Array")}}, {{jsxref("TypedArray")}}, {{jsxref("Map")}} e {{jsxref("Set")}} sono tutti iterables built-in nel linguaggio, perché i loro oggetti prototipi hanno tutti un metodo {{jsxref("Symbol.iterator")}}.

- -

Sintassi che si aspettano degli iterables

- -

Alcuni costrutti ed espressioni si aspettano degli iterables, per esempio il ciclo {{jsxref("Statements/for...of","for-of")}}, la {{jsxref("Operators/Spread_operator","sintassi spread","","true")}}, {{jsxref("Operators/yield*","yield*")}}, e l'{{jsxref("Operators/Destructuring_assignment","assegnamento di destrutturazione","","true")}}.

- -
for (let value of ['a', 'b', 'c']) {
-    console.log(value);
-}
-// "a"
-// "b"
-// "c"
-
-[...'abc']; // ["a", "b", "c"]
-
-function* gen() {
-  yield* ['a', 'b', 'c'];
-}
-
-gen().next(); // { value: "a", done: false }
-
-[a, b, c] = new Set(['a', 'b', 'c']);
-a; // "a"
-
-
- -

Generators avanzati

- -

I generators calcolano i loro valori solo quando vengono effettivamente richiesti, il che gli permette di rappresentare sequenze che sono troppo onerose da calcolare, o perfino sequenze infinite, come nella funzione idMaker().

- -

Il metodo {{jsxref("Global_Objects/Generator/next","next()")}} accetta anche un valore che può essere utilizzato per modificare lo stato interno di un generatore. Un valore passato a next() sarà trattato come il risultato dell'ultima espressione yield che ha messo in pausa il generator.

- -

Ecco un generator che produce una sequenza di numeri di Fibonacci. In questo generator il metodonext(x) può essere utilizzato per reinizializzare la sequenza:

- -
function* fibonacci() {
-  var fn1 = 0;
-  var fn2 = 1;
-  while (true) {
-    var current = fn1;
-    fn1 = fn2;
-    fn2 = current + fn1;
-    var reset = yield current;
-    if (reset) {
-        fn1 = 0;
-        fn2 = 1;
-    }
-  }
-}
-
-var sequence = fibonacci();
-console.log(sequence.next().value);     // 0
-console.log(sequence.next().value);     // 1
-console.log(sequence.next().value);     // 1
-console.log(sequence.next().value);     // 2
-console.log(sequence.next().value);     // 3
-console.log(sequence.next().value);     // 5
-console.log(sequence.next().value);     // 8
-console.log(sequence.next(true).value); // 0
-console.log(sequence.next().value);     // 1
-console.log(sequence.next().value);     // 1
-console.log(sequence.next().value);     // 2
- -

Puoi forzare un generator a lanciare una eccezione chiamando il suo metodo {{jsxref("Global_Objects/Generator/throw","throw()")}} e passandogli il valore che dovrebbe lanciare. Questa eccezione sarà lanciata dal corrente context sospeso del generator, come se lo yield che è attualmente sospeso fosse invece una dichiarazione throw value.

- -

Se non si incontra uno yield durante la risoluzione della eccezione lanciata, allora l'eccezione si propagherà fino alla chiamata athrow(), e in tutte le successive chiamate a next() la proprietà done saràtrue.

- -

I generators hanno un metodo {{jsxref("Global_Objects/Generator/return","return(value)")}} che ritorna un valore e termina il generator stesso.

- -

{{PreviousNext("Web/JavaScript/Guide/Details_of_the_Object_Model", "Web/JavaScript/Guide/Meta_programming")}}

diff --git a/files/it/web/javascript/guida/loops_and_iteration/index.html b/files/it/web/javascript/guida/loops_and_iteration/index.html deleted file mode 100644 index c677151181..0000000000 --- a/files/it/web/javascript/guida/loops_and_iteration/index.html +++ /dev/null @@ -1,340 +0,0 @@ ---- -title: Cicli e iterazioni -slug: Web/JavaScript/Guida/Loops_and_iteration -tags: - - Guide - - JavaScript - - Loop - - Sintassi -translation_of: Web/JavaScript/Guide/Loops_and_iteration ---- -
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}
- -

I cicli offrono un modo semplice e rapido per fare cose ripetutamente. Questo capitolo della guida al JavaScript introduce i diversi metodi di iterazione disponibili in JavaScript.

- -

Si può pensare al loop come ad una versione computerizzata di un gioco dove si dice a qualcuno di andare X passi in una direzione e Y passi in un'atra; per esempio "vai 5 passi a est" può essere espresso in questo modo con un loop:

- -
var passi;
-for (passi = 0; passi < 5; passi++) {
-  // Viene eseguito 5 volte, con un valore di passi che va da 0 a 4.
-  console.log('Fai un passo verso est');
-}
-
- -

Ci sono differenti tipi di ciclo, ma sono essenzialmente tutti la stessa cosa: ripetono un'azione o un insieme di azioni un certo numero di volte (è possibile che questo numero sia anche 0).

- -

I diversi meccanismi di ciclo offrono differenti modi di determinare l'inizio e la fine del ciclo. Ci sono casi che si prestano più ad un tipo di ciclo rispetto ad altri.

- -

Le istruzioni per i loop foriti in JavaScript sono:

- -
    -
  • {{anch("ciclo for")}}
    • -
  • {{anch("ciclo do...while")}}
    • -
  • {{anch("ciclo while")}}
    • -
  • {{anch("labeled statement")}}
    • -
  • {{anch("break statement")}}
    • -
  • {{anch("continue statement")}}
    • -
  • {{anch("ciclo for...in")}}
    • -
  • {{anch("ciclo for...of")}}
    • -
- -

Istruzione for

- -

Il {{jsxref("statements/for","ciclo for")}} continua finché la condizione valutata non è falsa. Il fir loop JavaScript è simile a quello del Java e de C. L'istruzione for è definita come segue:

- -
for ([espressioneIniziale]; [condizione]; [incremento])
-  istruzione
-
- -

Quando viene eseguito un ciclo for, questo è ciò che accade:

- -
    -
  1. espressioneIniziale, se esiste, viene eseguita. L'espressione di solito inizializza uno o più indici, ma la sintassi permette di scrivere espressioni con diversi gradi di compessità. Questa espressione può anche dichiarare delle variabili.
    2. -
  2. La condizione viene verificata. Se il suo valore è true, l'espressione istruzione viene eseguita. Se invece condizione è false, il ciclo finisce. Se condizione è omessa, l'espressione si assume sia true.
    3. -
  3. istruzione viene esguita. Per eseguire diverse istruzioni, è necessario usare il blocco ({ ... }) per raggrupparle.
    4. -
  4. Viene incrementata la l'espressione incremento, se esiste, eseguita, e il ciclo for va al passo successivo.
    5. -
- -

Esempio

- -

Il seguente esempio contiene un ciclo for che conta il numero di opzioni selezionate in una lista a scorrimento (a {{HTMLElement("select")}} che permette selezioni multiple). L'istruzione for dichiara una variabile i e la inizializza a zero. Controlla che i sia minore del numero di opzioni dell'elemento <select> , esegue l'istruzione if e incrementa i di uno alla fine di ogni ciclo.

- -
<form name="selectForm">
-  <p>
-    <label for="musicTypes">Choose some music types, then click the button below:</label>
-    <select id="musicTypes" name="musicTypes" multiple="multiple">
-      <option selected="selected">R&B</option>
-      <option>Jazz</option>
-      <option>Blues</option>
-      <option>New Age</option>
-      <option>Classical</option>
-      <option>Opera</option>
-    </select>
-  </p>
-  <p><input id="btn" type="button" value="Quanti sono selezionati?" /></p>
-</form>
-
-<script>
-function howMany(selectObject) {
-  var numberSelected = 0;
-  for (var i = 0; i < selectObject.options.length; i++) {
-    if (selectObject.options[i].selected) {
-      numberSelected++;
-    }
-  }
-  return numberSelected;
-}
-
-var btn = document.getElementById("btn");
-btn.addEventListener("click", function(){
-  alert('Number of options selected: ' + howMany(document.selectForm.musicTypes))
-});
-</script>
-
-
- -

Istruzione do...while

- -

Il ciclo {{jsxref("statements/do...while", "do...while")}} si ripete finché la condizione non è falsa. Il do...while è viene definito come segue:

- -
do
-  istruzione
-while (condizione);
-
- -

l'istruzione viene eseguita una volta prima che la condizione venga controllata. Per eseguire più istruzioni, è necessario usare il blocco ({ ... }) . Se la condizione è vera l'istruzione viene eseguita nuovamente. Alla fine di ogni esecuzione di istruzione, condizione viene controllata. Quando condizione è falsa l'esecuzione del ciclo do..while termina.

- -

Esempio

- -

Nel seguente esempio il ciclo do..while itera almeno una volta e continua finché il valore di i è minore di 5.

- -
var i = 0;
-do {
-  i += 1;
-  console.log(i);
-} while (i < 5);
- -

Istruzione while

- -

Il ciclo {{jsxref("statements/while","while")}} esegue un'istruzione fino a quando una condizione è true. Ecco un esempio si un ciclo while:

- -
while (condizione)
-  istruzione   //...statement
-
- -

Se condizione diventa false, istruzione non viene eseguita a si passa ad eseguire i comandi successivi.

- -

Durante il ciclo condizione viene testata prima di eseguire istruzione. Se condizione è true, istruzione viene esguita e condizione viene verificata nuovamente. Se condizione è false il ciclo di ferma e viene eseguito il codice successivo al ciclo while.

- -

Per eseguire istruzioni multiple, è necessario usare il blocco ({ ... }) così da raggruppare le istruzioni.

- -

Esempio 1

- -

Il seguente esempio di ciclo while si ripete fino a quando n è minore di tre:

- -
var n = 0;
-var x = 0;
-while (n < 3) {
-  n++;
-  x += n;
-}
-
- -

Ad ogni iterazione, il ciclo incrementa n e aggiunge quel valore a x. Pertanto,x e n assumono i seguenti valori:

- -
    -
  • Dopo il primo passaggio: n = 1 and x = 1
    • -
  • Dopo il secondo passaggio: n = 2 and x = 3
    • -
  • Dopo il terzo passaggio: n = 3 and x = 6
    • -
- -

Dopo aver completato il terzo passaggio, la condizione n < 3 non è più vera, quindi il ciclo termina.

- -

Esempio 2

- -

Evita loop infiniti. Assicurati che la condizione in un loop alla fine diventi falsa; altrimenti, il ciclo non terminerà mai. Le istruzioni nel seguente ciclo while vengono eseguite per sempre perché la condizione non diventa mai falsa:

- -
-
//I loop infiniti non vanno affatto bene
-while (true) {
-  console.log("Buongiorno, Mondo");
-}
-
- -

Istruzione "etichettata"

- -

Un {{jsxref("statements/label","label")}} fornisce un'istruzione con un identificatore che ti consente di fare riferimento ad esso altrove nel tuo programma. Ad esempio, è possibile utilizzare un'etichetta per identificare un ciclo e quindi utilizzare le istruzioni break o continue per indicare se un programma deve interrompere il loop o continuare la sua esecuzione.

- -

La sintassi dell'istruzione etichettata è simile alla seguente:

- -
label :
-   istruzione // statement
-
- -

Il valore dell'etichetta label può essere qualsiasi identificatore JavaScript che non sia una parola riservata. L'affermazione che ti identifichi con un'etichetta statement può essere una qualsiasi affermazione.

- -

Esempio

- -

In questo esempio, la label markLoop identifica un ciclo while.

- -
markLoop:
-while (theMark == true) {
-   doSomething();
-}
- -

Istruzione break

- -

Utilizzare l'istruzione {{jsxref("statements/break","break")}} per terminare un ciclo, uno switch o in congiunzione con un'istruzione etichettata.

- -
    -
  • Quando si utilizza break senza un'etichetta, termina l'enclosure più interno while, do-while, for, o switch immediatamente e trasferisce il controllo alla seguente istruzione.
    • -
  • Quando usi la break con un'etichetta, termina l'istruzione etichettata specificata.
    • -
- -

La sintassi dell'istruzione break è simile a questa:

- -
break [label];
-
- -

La prima forma della sintassi termina il ciclo switch di chiusura più interno; la seconda forma della sintassi termina l'istruzione dell'etichettata specificata.

- -

Esempio 1

- -

L'esempio seguente esegue iterazioni attraverso gli elementi di un array (una matrice) fino a quando non trova l'indice di un elemento il cui valore è theValue:

- -
for (var i = 0; i < a.length; i++) {
-  if (a[i] == theValue) {
-    break;
-  }
-}
- -

Esempio 2: Breaking to a label - Interruzione su un'etichetta

- -
var x = 0;
-var z = 0;
-labelCancelLoops: while (true) {
-  console.log("Outer loops: " + x);
-  x += 1;
-  z = 1;
-  while (true) {
-    console.log("Inner loops: " + z);
-    z += 1;
-    if (z === 10 && x === 10) {
-      break labelCancelLoops;
-    } else if (z === 10) {
-      break;
-    }
-  }
-}
- -

Istruzione continue

- -

The {{jsxref("statements/continue","continue")}} statement can be used to restart a while, do-while, for, or label statement.

- -
    -
  • Quando usi continue senza un'etichetta, termina l'iterazione corrente dell'istruzione racchiudente, mentre while, do-while, o for continua l'esecuzione del ciclo con l'iterazione successiva. In contrasto con l'istruzione break, continue non termina interamente l'esecuzione del ciclo. In un ciclo while, torna alla condizione. In un ciclo for, salta all'espressione di incremento increment-expression.
    • -
  • Quando si utilizza continue con un'etichetta, si applica all'istruzione looping identificata con tale etichetta.
    • -
- -

La sintassi dell'istruzione continue ha il seguente aspetto:

- -
continue [label];
-
- -

Esempio 1

- -

L'esempio seguente mostra un ciclo while con un'istruzione continue che viene eseguita quando il valore di i è tre. Quindi, n assume i valori uno, tre, sette e dodici.

- -
var i = 0;
-var n = 0;
-while (i < 5) {
-  i++;
-  if (i == 3) {
-    continue;
-  }
-  n += i;
-}
- -

Esempio 2

- -

Una dichiarazione etichettata checkiandj contiene una dichiarazione etichettata checkj. Se si incontra continue il programma termina l'iterazione corrente di checkj e inizia la successiva iterazione. Ogni volta che si incontra continue, checkj viene reiterato finché la condizione non restituisce false. Quando viene restituito false, il resto dell'istruzione checkiandj è completato e checkiandj reiterate fino a quando la condizione non restituisce false. Quando viene restituito false, il programma continua con la seguente istruzione checkiandj.

- -

Se continue ha un'etichetta di checkiandj, il programma continuerà nella parte superiore del checkiandj istruzione.

- -
var i = 0;
-var j = 10;
-checkiandj:
-  while (i < 4) {
-    console.log(i);
-    i += 1;
-    checkj:
-      while (j > 4) {
-        console.log(j);
-        j -= 1;
-        if ((j % 2) == 0) {
-          continue checkj;
-        }
-        console.log(j + ' is odd.');
-      }
-      console.log('i = ' + i);
-      console.log('j = ' + j);
-}
- -

Istruzione for...in

- -

L'istruzione {{jsxref("statements/for...in","for...in")}} itera una variabile specificata su tutte le proprietà enumerabili di un oggetto. Per ogni proprietà distinta, JavaScript esegue le istruzioni specificate. L'istruzione for...in ha il seguente aspetto:

- -
for (variabile in oggetto) {
-  istruzione
-}
-// for (variable in object) {
-//  statements
-// }
-
- -

Esempio

- -

La seguente funzione prende come argomento un oggetto e il nome dell'oggetto. Quindi itera su tutte le proprietà dell'oggetto e restituisce una stringa che elenca i nomi delle proprietà e i loro valori.

- -
function dump_props(obj, obj_name) {
-  var result = "";
-  for (var i in obj) {
-    result += obj_name + "." + i + " = " + obj[i] + "<br>";
-  }
-  result += "<hr>";
-  return result;
-}
-
- -

Per un oggetto car con proprietà make e model, result sarebbe:

- -
car.make = Ford
-car.model = Mustang
-
- -

Arrays / Matrici

- -

Anche se può essere allettante usarla come un modo per iterare sugli elementi {{jsxref("Array")}} , l'istruzione the for...in restituirà il nome delle proprietà definite dall'utente oltre agli indici numerici. Quindi è meglio usare un ciclo tradizionale {{jsxref("statements/for","for")}} con un indice numerico quando si itera su array, perché l'istruzione for...in itera sulle proprietà definite dall'utente oltre agli elementi dell'array, se si modifica l'oggetto Array, (come ad esempio l'aggiunta di proprietà o metodi personalizzati).

- -

Istruzione for...of

- -

L'istruzione {{jsxref("statements/for...of","for...of")}} crea un ciclo che itera su oggetti iterabili (inclusi oggetti di tipo {{jsxref("Array")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, {{jsxref("functions/arguments","arguments")}} e così via), richiamando un aggancio di iterazione personalizzato con istruzioni da eseguire per il valore di ogni proprietà distinta.

- -
for (variabile di oggetto) {
-  istruzione
-}
- -

Il seguente esempio mostra la differenza tra un ciclo for...of e un {{jsxref("statements/for...in","for...in")}} ciclo continuo. Mentre for...in itera sopra i nomi delle proprietà, for...of itera sui valori delle proprietà:

- -
let arr = [3, 5, 7];
-arr.foo = "hello";
-
-for (let i in arr) {
-   console.log(i); // logs "0", "1", "2", "foo"
-}
-
-for (let i of arr) {
-   console.log(i); // logs "3", "5", "7"
-}
- -

{{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}

diff --git a/files/it/web/javascript/guide/control_flow_and_error_handling/index.html b/files/it/web/javascript/guide/control_flow_and_error_handling/index.html new file mode 100644 index 0000000000..76e72f5cba --- /dev/null +++ b/files/it/web/javascript/guide/control_flow_and_error_handling/index.html @@ -0,0 +1,461 @@ +--- +title: Controllo del flusso di esecuzione e gestione degli errori +slug: Web/JavaScript/Guida/Controllo_del_flusso_e_gestione_degli_errori +tags: + - Controllo di flusso + - Guide + - JavaScript + - Principianti + - 'l10n:priority' +translation_of: Web/JavaScript/Guide/Control_flow_and_error_handling +--- +
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Grammar_and_types", "Web/JavaScript/Guide/Loops_and_iteration")}}
+ +

JavaScript prevede un insieme di istruzioni compatto, specifico per il controllo del flusso di esecuzione, che si può utilizzare per aggiungere un'elevata interattività alle proprie applicazioni. Questo capitolo fornisce una panoramica su queste istruzioni.

+ +

Il JavaScript reference contiene dettagli esaustivi sulle istruzioni di questo capitolo. Il carattere punto e virgola (;) è usato per separare le varie istruzioni del codice JavaScript.

+ +

Ogni espressione JavaScript è a sua volta un'istruzione. Si veda a riguardo Espressioni ed operatori per una completa descrizione delle espressioni.

+ +

Costrutto di blocco

+ +

Un costrutto fondamentale è il blocco, usato per raggruppare insieme più istruzioni, delimitato da un paio di parentesi graffe ({}):

+ +
{
+  istruzione_1;
+  istruzione_2;
+  .
+  .
+  .
+  istruzione_n;
+}
+
+ +

Esempi

+ +

Il blocco è comunemente usato assieme alle istruzioni per il controllo del flusso (e.g. if, for, while).

+ +
while (x < 10) {
+  x++;
+}
+
+ +

Qui, { x++; } rappresenta un blocco.

+ +

Importante: JavaScript prima di ECMAScript2015 non aveva la visibilità di blocco. Le variabili definite nel blocco hanno una visibilità a livello di funzione o di script in cui sono contenute e l'effetto di assegnare loro un valore persiste oltre il blocco stesso. Cioè il blocco non definisce un campo di visibilità. I blocchi "Indipendenti" ("Standalone" blocks) in JavaScript possono dare un risultato differente da quello che avrebbero prodotto in C o in Java. Per esempio:

+ +
var x = 1;
+{
+  var x = 2;
+}
+console.log(x); // produce 2
+
+ +

Risulta 2 perché l'istruzione di definizione var x dentro il blocco ha lo stesso campo di visibilità dell'istruzione var x al di fuori del blocco. Mentre in C o Java, il codice equivalente avrebbe prodotto 1.

+ +

A partire da ECMAScript2015, la dichiarazione di variabile con l'istruzione let ha visibilità di blocco. Si veda il riferimento a {{jsxref("Statements/let", "let")}} per ulteriori informazioni.

+ +

Costrutti Condizionali

+ +

Un costrutto condizionale è un insieme di istruzioni che vengono eseguite se una specifica condizione risulta vera. JavaScript prevede due costrutti condizionali: if...else e switch.

+ +

Costrutto if...else

+ +

Si usa il costrutto if per eseguire un blocco di istruzioni se una condizione logica è vera. Si usa la clausola opzionale else per eseguire istruzioni nel caso in cui la stessa condizione sia falsa. Un costrutto if...else si presenta come qui sotto:

+ +
if (condizione) {
+  istruzioni_se_vera_la_condizione;
+} else {// opzionale
+  istruzioni_se_falsa_la_condizione;
+}
+ +

Qui la condizione è qualsiasi espressione che sia valutabile come vera oppure falsa (true o false). Si veda il riferimento a Boolean per una spiegazione su cosa possa essere valutabile come true o false. Se la condizione viene valutata true, istruzioni_se_vera_la_condzione verrà eseguito, altrimenti verrà eseguito istruzioni_se_falsa_la_condzione. istruzioni_se_vera_la_condzione e istruzioni_se_falsa_la_condzione possono essere qualsiasi istruzione, incluso un altro if.

+ +

Si possono pure combinare le istruizioni else if per testare molteplici condizioni in sequenza, come il seguente codice dimostra:

+ +
if (condizione_1) {
+  istruzione_1;
+} else if (condizione_2) {
+  istruzione_2;
+} else if (condizione_n) {
+  istruzione_n;
+} else {
+  ultima_istruzione;
+}
+
+ +

Nel caso di condizioni plurime solo la prima che sia valutata come vera sarà eseguita. Per eseguire più istruzioni si devono raggruppare in un blocco ({ ... }) . In generale è buona pratica usare un blocco specialmente se si usano if annidati:

+ +
if (condizione) {
+  istruzione_1_eseguita_se_vera_la_condizione;
+  istruzione_2_eseguita_se_vera_la_condizione;
+  ...
+} else {
+  istruzione_3_eseguita_se_falsa_la_condizione;
+  istruzione_4_eseguita_se_falsa_la_condizione;
+  ...
+}
+
+ +
Non è consigliabile usare la semplice assegnazione in una espressione condizionale, perché l'assegnamento potrebbe essere confuso con il segno di uguaglianza quando si dia un'occhiata rapida al codice. Ad esempio, non si usi il seguente codice:
+ +
+ +
if (x = y) {// questa è una assegnazione
+  /* istruzioni qui */
+}
+ +

Se si deve proprio usare un assegnamento in una espressione condizionale è pratica comune aggiungere un paio di parentesi tonde attorno all'assegnamento. Per esempio:

+ +
if ((x = y)) {
+  /* istruzioni qui */
+}
+
+ +

Valori valutabili a false

+ +

I seguenti valori si valutano a false (sono anche detti {{Glossary("Falsy")}} value):

+ +
    +
  • false
    • +
  • undefined
    • +
  • null
    • +
  • 0
    • +
  • NaN
    • +
  • la stringa vuota ("")
    • +
+ +

Tutti gli altri valori, inclusi gli oggetti, saranno valutati a true in una istruzione condizionale.

+ +

Non si confonda il valori primitivi booleani true e false con i valori true e false dell'oggetto {{jsxref("Boolean")}}. Ad esempio:

+ +
var b = new Boolean(false);
+
+if (b) // questa condizione è valutata a true
+       // perché 'b' in questo caso è un oggetto
+       // e si sa che tutti gli oggetti sono valutati a true
+
+if (b == true) // mentre questa a false,
+               // perché si va a prelevare il contenuto dell'oggetto 'b' che è false
+
+ +

Esempi

+ +

Nell'esempio a seguire la funzione controllaDati ritorna true se il numero di caratteri contenuti nella proprietà value dell'oggetto Text (treCaratteri) è tre, altrimenti mostra un popup di alert e, infine, ritorna il valore false.

+ +
function controllaDati() {
+  if (document.form1.treCaratteri.value.length == 3) {
+    return true;
+  } else {
+    alert("Immetti esattemente tre caratteri. " +
+    document.form1.treCaratteri.value + " non è valido.");
+    return false;
+  }
+}
+
+ +

Costrutto switch

+ +

Un costrutto switch permette ad un programma di valutare un'espressione e tentare di trovare la corrispondenza esatta tra il valore risultante dalla valutazione dell'espressione e l'etichetta specificata nella clausola case. Se si incontra una corrisopondenza il programma eseguirà le istruzioni associate. Un costrutto switch si presenta  come nell'esempio qui sotto riportato:

+ +
switch (espressione) {
+  case etichetta_1:
+    istruzione_1
+    [break;]// opzionale
+  case etichetta_2:
+    istruzione_2
+    [break;]
+    ...
+  default:
+    istruzioni_di_default
+    [break;]
+}
+
+ +

Il programma cerca la prima corrispondenza tra il valore ottentuto della valutazione dell'espressione e l'etichetta nella clausola case, poi trasferisce il controllo al corpo della medesima clausola eseguendo le istruzioni relative. Se non è stata trovata alcuna corrispondeza il programma va alla clausola opzionale default e, se la trova, esegue le istruizioni ad essa relative. Se non è stata data alcuna clausola default il programma continuerà con l'istruzione successiva al blocco switch. La clausola default è l'ultima che appare nel blocco switch, ma questa è una convenzione non la regola.

+ +

Il break opzionale, associato con ogni clausola case, assicura che il programma esca dal blocco switch una volta eseguite le istruzioni associate alla clausola e continui la sua esecuzione all'istruzione che segue il costrutto switch. Se il break è omesso il programma continua la sua esecuzione all'istruzione successiva nello stesso costrutto switch, ciò significa che eseguirà le istruzioni associate alla clausola case/default (se ci sono) successiva a quella appena terminata.

+ +

Esempi

+ +

Nel seguente esempio, se la variabile tipidifrutto contiene "Banane", il programma cercherà la corrispondente clausola case "Banane" ed eseguirà le istruzioni associate. Quando incontra il break, il porgramma esce dallo switch ed esegue l'istruzione successiva al blocco di switch. Se, invece, il break fosse stato omesso le istuzioni collegate con la clausola case "Ciliege" sarebbero state eseguite.

+ +
switch (tipidifrutta) {
+  case "Arance":
+    console.log("Le Arance sono a €0.59 il chilo.");
+    break;
+  case "Mele":
+    console.log("Le mele sono a €0.32 il chilo.");
+    break;
+  case "Banane":
+    console.log("Le Banane sono €0.48 il chilo.");
+    break;
+  case "Ciliege":
+    console.log("Le ciliege sono s €3.00 il chilo.");
+    break;
+  case "Mango":
+    console.log("Il Mango è è €0.56 il chilo.");
+    break;
+  case "Papaia":
+    console.log("Il Mango e la Papaia sono a €2.79 il chilo.");
+    break;
+  default:
+    console.log("Spiacenti, abbiano terminato " + tipidifrutta + ".");
+}
+console.log("C'è qualcos'altro che ti piace?");
+ +

Costrutti di gestione delle Eccezioni

+ +

Si può sollevare/generare un'eccezione attraverso l'istruzione throw e si possono gestire usando il costrutto try...catch.

+ + + +

Tipi di eccezione

+ +

Quasi ogni tipo di oggetto può essere usato per sollevare/generare un'eccezione JavaScript. Tuttavia non tutti gli oggetti utili a questo scopo sono creati in modo eguale. Mentre è abbastanza comune usare numeri o stringhe per indicare un errore, è più efficace usare uno dei tipi di eccezione specificatamente creati a questo scopo:

+ + + +

Istruzione throw

+ +

Si usa l'istruzione throw per sollevare/generare un'eccezione. Quando si genera un'eccezione va specificata un'espressione che produca un valore da usarsi come eccezione:

+ +
throw espressione;
+
+ +

Si può usare una qualsiasi espressione con l'istruzione throw e non solamente espressioni di un certo tipo. Il seguente pezzo di codice lo dimostra:

+ +
throw "Errore2";  // tipo String
+throw 42;         // tipo Number
+throw true;       // tipo Boolean
+throw {toString: function() { return "Sono un oggetto!"; } };
+
+ +
Note: Si può specificare un oggetto quando si genera un'eccezione. Si può poi far riferimento alle proprietà dell'oggetto nel blocco catch. Il seguente esempio crea un oggetto myUserException del tipo UserException e lo usa nell'istruzione throw.
+ +
// Crea un oggetto di tipo UserException
+function UserException(messaggio) {
+  this.message = messaggio;
+  this.name    = "UserException";
+}
+
+// Sovrascrive il metodo toString() affinché l'oggetto
+// dia una descrizione di se stesso al momento di usarlo come stringa.
+// (e.g. come messaggio nella console degli errori)
+UserException.prototype.toString = function() {
+  return this.name + ': "' + this.message + '"';
+}
+
+// Crea un'istanza dell'oggetto e lo usa nell'istruzione throw
+throw new UserException("Valore troppo alto!);
+ +

Costrutto try...catch (... finally)

+ +

Il costrutto try...catch racchiude un blocco di istruzioni, che potrebbero generare un'eccezione, e specifica uno o più azioni per gestire l'eccezione che potrebbe essere sollevata. Se viene sollevata un'eccezione il costrutto try...catch la cattura.

+ +

Il costrutto try...catch è costituito da un blocco try, che contiene a sua volta uno o più istruzioni, e da al più (vedi nota più sotto) un blocco catch, contenenti istruzioni per gestire l'eccezione che eventulmente sarà sollevata all'interno del blocco try.  Cioè si vorrebbe che il blocco try fosse eseguito senza errori, ma se non fosse possibile si vuole che l'esecuzione passi al blocco catch. Se un'istruzione contenuta nel blocco (o in una funzione chiamata all'interno del blocco) try genera un'eccezione, il controllo passa immediatamente al blocco catch. Se nessuna eccezione è sollevata all'interno del blocco try, il blocco catch è semplicemente ignorato. Il blocco finally (opzionale se c'è il blocco catch, ma necessario se manca quest'utimo) è eseguito subito dopo l'esecuzione dei blocchi try/catch, ma prima di una qualsiasi istruzione che segua gli stessi try...catch...finally.

+ +
+

In realtà il browser Firefox è in grado di suppostare i blocchi catch condizionati, oltre quello incondizionato, rendendo virtualmeente illimitata la definizione di più di un blocco catch per uno stesso blocco try. Tuttavia questa caratteristica non è standard e se ne scoraggia l'uso, si veda a proposito la referenza {{jsxref("Statements/try...catch", "try...catch")}}.

+
+ +

L'esempio che segue usa il costrutto di try...catch. L'esempio chiama una funzione che ritorna il nome del mese estratto da un array grazie al parametro mo passato alla funzione. Se il valore passato non corrispondesse al numero di mese consentito (tra 1 e 12), un'eccezione verrebbe sollevata col valore "numeroMeseNonValido" e il blocco catch assegnerebbe alla variabile nomeDelMese il vaore di "sconoscuto".

+ +
function getNomeDelMese(mo) {
+  mo = mo - 1; // Sistema il numero del mese (1 = Gen, 12 = Dic)
+  var mesi = ["Gen","Feb","Mar","Apr","Mag","Giu","Lug",
+                "Ago","Set","Ott","Nov","Dic"];
+  if (mesi[mo]) {
+    return mesi[mo];
+  } else {
+    throw "numeroMeseNonValido"; //l'istruzione throw è usata qui
+  }
+}
+
+try { // blocco try
+  nomeDelMese = getNomeDelMese(mese); // la funzione potrebbe sollevare un'eccezione
+}
+catch (eccezione) {
+  nomeDelMese = "sconosciuto";
+  logDegliErrori(eccezione); // Passa l'eccezione a un gestore -> una propria funzione
+
+ +

Il blocco catch

+ +

Si può usare il blocco catch per gestire le eccezioni che possono essere generate nel blocco try.

+ +
catch (catchID) {
+  // istruzioni
+}
+
+ +

Il blocco catch viene specificato un identificatore (catchID nel precedente esempio) che conterrà il valore specificato nell'istruzione throw. Si può usare questo identificatore per ottenere informazione ulteriori circa l'eccezione che è stata generata. JavaScript crea questo identificatore quando si entra nel blocco catch. L'identificatore è valido solo per la durata in esecuzione del blocco catch stesso, infatti usciti dal blocco catch termina la sua esistenza e non è più disponibile.

+ +

Per esempio, il seguente codice solleva un'eccezione. Quando l'eccezione si realizza il controllo passa al blocco catch.

+ +
try {
+  throw "miaEccezione"; // genera una eccezione
+}
+catch (eccezione) { // "eccezione" è l'identificatore con conterrà
+  // l'oggetto usato nell'istruzione thrown, in questo caso la stringa "miaEccezione"
+
+  // istruzioni che gestiscono l'eccezione
+  gestisciErrori(eccezione); // passa l'oggetto eccezione al gestore
+}
+
+ +

Il blocco finally

+ +

Il blocco finally contiene istruzioni che vengono eseguite subito dopo i blocchi try ed eventualmente catch, ma prima di ogni altra istruzione che segua il costrutto try...catch...finally. Il blocco finally è eseguito indipendentemente dal fatto che un'eccezione sia o meno generata. Se un'eccezione viene sollevata le istruzioni nel blocco finally saranno eseguite anche se il blocco catch corrispondente la gestisce.

+ +

Si può usare il blocco finally per permettere agli script di terminare elegantemente in presenza di un'eccezione, ad esempio, se si deve liberare una risorsa che lo script trattiene. Il seguente esempio apre un file e lo usa (JavaScript lato server permette di accedere al file system). Se si solleva un'eccezione mentre il file è aperto il blocco finally chiude il file prima che lo script termini/fallisca.

+ +
apriMioFile();
+try {
+  ScriviMioFile(dati); //Qui si può verificare un'eccezione/errore
+} catch(e) {
+  gestisciErrore(e); // Se avviene un errore lo si gestisce
+} finally {
+  chiudiMioFile(); // chiude comunque la risorsa
+}
+
+ +

Se il blocco finally ritorna un valore questo diviene il valore ritornato dall'intero costrutto try-catch-finally a dispetto di qualsiasi valore eventualmente ritornato dai blocchi try/catch:

+ +
function f() {
+  try {
+    console.log(0);
+    throw "fasulla";
+  } catch(e) {
+    console.log(1);
+    return true; // quasta istruzione di ritorno è sospesa
+                 // finché il blocco finally non termina
+    console.log(2); // istruzione non raggiungibile
+  } finally {
+    console.log(3);
+    return false; // sovrascrive il precedente "return"
+    console.log(4); // istruzione non raggiungibile
+  }
+  // "return false" è eseguito ora
+  console.log(5); // istruzione non raggiungibile
+}
+f(); // nel log a console troviamo stampato: 0, 1, 3 e false
+
+ +

La sovrascrittura dei valori di ritorno, da parte del blocco finally, colpisce anche le eccezioni generate e/o ri-generate dentro il blocco catch:

+ +
function f() {
+  try {
+    throw "fasulla";
+  } catch(e) {
+    console.log('catturata l\'eccezione interna "fasulla"');
+    throw e; // Quasta istruzione throw è sospesa
+             // finché il blocco finally non termina
+  } finally {
+    return false; // sovrascrive il precedente "throw"
+  }
+  // "return false" è eseguita ora
+}
+
+try {
+  f();
+} catch(e) {
+  // Questo blocco non sarà mai raggiunto in quanto l'istruzione
+  // throw dentro il blocco catch (vedi più sopra) è sovrascritta
+  // dal return della clausola finally
+  console.log('catturata l\'eccezione esterna "fasulla"');
+}
+
+// OUTPUT
+// catturata l'eccezione interna "fasulla"
+ +

try...catch innestati

+ +

Si possono annidare try...catch. Se un blocco try...catch interno non ha il blocco catch (in questo caso è d'obbligo che ci sia il blocco finally, anche vuoto, altrimenti si ha un errore sintattico), il blocco catch, del costrutto try...catch che lo racchiude, catturerà l'eventuale eccezione.

+ +
try{// try-catch esterno
+  try{
+   // try-finally interno
+    throw "eccezione fasulla";
+  }
+  // Manca il blocco catch, ma deve esserci il blocco finally
+  finally{
+    // vuoto
+  }
+}
+catch(e){
+  // Viene catturata l'eccezione sollevata dal blocco più interno
+  console.log("cattura esterna: " + e);
+}
+
+//nella console sarà stampato: "cattura esterna: eccezione fasulla"
+ +

Utilizzo degli oggetti Error

+ +

A seconda del tipo di errore se si è in grado di usare le proprietà 'name' e 'message' si può avere un messaggio più ricco. 'name' fornisce la classe generale dell'Error (e.g., 'DOMException' o 'Error'), mentre 'message' generalmente fornisce un messaggio più conciso rispetto al convertire l'oggetto corrispondente all'errore in una stringa.

+ +

Se si crea una propria eccezione affiché ci si avvantaggi di queste proprietà (come nel caso, ad esempio, del blocco catch che non discrimini tra l'oggetto rappresentante la propria eccezione e quello di sistema) si può usare il costruttore dell'oggetto Error:

+ +
function faiQualcosaSoggettaAdErrore () {
+  if (codiceCheProduceUnErrore()) {
+    throw (new Error('Il Messaggio'));
+  } else {
+    faiQualcosaPerOttenereUnEorreDiJavascript();
+  }
+}
+....
+try {
+  faiQualcosaSoggettaAdErrore();
+} catch (e) {
+  console.log(e.name);    // Scrive a console: 'Error'
+  console.log(e.message); // Scrive a console: 'Il Messaggio' o un messaggio di errore di JavaScript)
+}
+ +

I Promise

+ +

A partire da ECMAScript2015, JavaScript acquisisce il supporto agli oggetti {{jsxref("Promise")}} permettendo di controllare l'esecuzione di operazioni in modo differito e asincrono.

+ +

Un Promise può essere in uno di questi stati:

+ +
    +
  • pending: stato iniziale, non fulfilled o rejected.
    • +
  • fulfilled: operazione risucita.
    • +
  • rejected: operazione fallita.
    • +
  • settled: il Promise è alternativamente fulfilled o rejected, ma non pending.
    • +
+ +

+ +

Caricare un'immagine con XHR

+ +

Un esempio di semplice utilizzo di un Promise e XMLHttpRequest per caricare un'immagine è disponibile nel repository promise-test di MDN GitHub. Si può anche vedere in azione. Ogni passo  è commentato e ti permette di seguire il Promise e l'architettura XHR da vicino. Qui, invece, la versione non commentata che mostra l'utilizzo del Promise per darti un'idea del suo funzionamento:

+ +
function caricaImmagine(url) {
+  return new Promise(function(resolve, reject) {
+    var request = new XMLHttpRequest();
+    request.open('GET', url);
+    request.responseType = 'blob';
+    request.onload = function() {
+      if (request.status === 200) {
+        resolve(request.response);
+      } else {
+        reject(Error('L\'immagine non è stata caricata con successo; codice di errore:'
+                     + request.statusText));
+      }
+    };
+    request.onerror = function() {
+      reject(Error('C\'è stato un errore di connessione'));
+    };
+    request.send();
+  });
+}
+ +

Per informazioni più dettagliate si veda la pagina di riferimento relativa al {{jsxref("Promise")}}.

+ +
{{PreviousNext("Web/JavaScript/Guide/Grammar_and_types", "Web/JavaScript/Guide/Loops_and_iteration")}}
diff --git a/files/it/web/javascript/guide/details_of_the_object_model/index.html b/files/it/web/javascript/guide/details_of_the_object_model/index.html new file mode 100644 index 0000000000..1e2d4dc74f --- /dev/null +++ b/files/it/web/javascript/guide/details_of_the_object_model/index.html @@ -0,0 +1,727 @@ +--- +title: Dettagli del modello a oggetti +slug: Web/JavaScript/Guida/Dettagli_Object_Model +tags: + - Guide + - Intermediate + - JavaScript +translation_of: Web/JavaScript/Guide/Details_of_the_Object_Model +--- +
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Working_with_Objects", "Web/JavaScript/Guide/Iterators_and_Generators")}}
+ +
+

Il contenuto di questo articolo è in discussione. Lascia un feedback e aiutaci a rendere migliore questa pagina: {{bug(1201380)}}.

+
+ +

JavaScript è un linguaggio ad oggetti basato su prototipi, piuttosto che sulle classi. A causa di questa diversa base, può essere meno evidente come JavaScript permette di creare gerarchie di oggetti e di avere l'ereditarietà delle proprietà e dei loro valori. Questo articolo cerca di chiarire questo aspetto.

+ +

Questo capitolo presuppone una certa familiarità con JavaScript e con l'uso delle funzioni per la creazione di semplici oggetti.

+ +

Linguaggi class-based vs. linguaggi prototype-based

+ +

I linguaggi ad oggetti basati su classi, come Java e C++, si basano su due entità distinte: le classi (classes) e le istanze (instances).

+ +
    +
  • Una classe definisce tutte le proprietà (considering methods and fields in Java, or members in C++, to be properties) che caratterizzano una determinata collezione di oggetti. Una classe è un'entità astratta, più che un membro del gruppo di oggetti che descrive. Per esempio, la classe Employee può rappresentare il gruppo di tutti i dipendenti.
    • +
  • Un'istanza, d'altra parte, è l'istanziazione di una classe; cioè uno dei suoi membri. Per esempio Victoria può essere un'istanza della classe Employee, che rappresenta un particolare individuo come un dipendente. Un'istanza ha esattamente le stesse proprietà della classe a cui appartiene (né più, né meno).
    • +
+ +

Un linguaggio basato su prototipi, come JavaScript, non fa questa distinzione: ha solo oggetti. Introduce la nozione di oggetto prototipo (prototypical object), un oggetto usato come modello da cui prendere le proprietà iniziali per un nuovo oggetto. Ogni oggetto può specificare le sue proprietà, anche quando viene creato o in fase di esecuzione.Inoltre, ogni oggetto può essere associato ad un altro oggetto come prototipo, consentendo al secondo oggetto di condividere le proprietà del primo.

+ +

Definizione di una classe

+ +

Nei linguaggi basati su classi, le classi vengono definite in class definition separate. In queste definizioni è possibile specificare metodi speciali, chiamari costruttori (constructors), per creare istanze della classe. Un costruttore può specificare i valori iniziali per le proprietà dell'istanza ed eseguire altre elaborazioni adatte al momento della creazione. Per creare le istanze di una classe si utilizza l'operatore new associato al metodo costruttore.

+ +

JavaScript segue un modello simile, ma non prevede la definizione della classe separata dal costruttore. Invece, per creare oggetti con un particolare set di proprietà e valori si definisce una funzione costruttore. Ogni funzione JavaScript può essere usata come costruttore. Per creare un nuovo oggetto si utilizza l'operatore new associato a una funzione costruttore.

+ +

Sottoclassi e ereditarietà

+ +

In un linguaggio basato su classi, si crea una gerarchia tra le classi attraverso le definizioni delle classi stesse. All'interno della definizione di una classe è possibile specificare che la nuova classe è una sottoclasse (subclass) di una classe esistente. La sottoclasse eredita tutte le proprietà della superclasse e può inoltre aggiungere nuove proprietà o modificare quelle ereditate. Per esempio, assumiamo che la classe Employee include solo le proprietà name e dept, e Manager è una sottoclasse di Employee che aggiunge la proprietà reports. In questo caso, un'istanza della classe Manager avrà tutte e tre le proprietà: name, dept, e reports.

+ +

JavaScript implementa l'ereditarietà permettendo di associare un oggetto prototipo ad ogni funzione costruttore. Quindi, è possibile ricreare esattamente l'esempio visto in precedenza, ma usando una terminologia leggermente diversa. Innanzitutto  si definisce la funzione costruttore Employee, specificando le proprietà name e dept. In seguito, si definisce la funzione costruttore Manager, chiamando il costruttore Employee e specificando la proprietà reports. Infine, si assegna a un nuovo oggetto derivato da Employee.prototype come il prototipo per la funzione costruttore Manager. Quando si crea un nuovo Manager, questo eredita le proprietà name e dept dall'oggetto Employee.

+ +

Aggiungere e rimuovere proprietà

+ +

Nei linguaggi basati su classi, una classe viene solitamente creata in fase di compilazione mentre le istanze possono essere create in fase di compilazione o in fase di esecuzione. Non è possibile cambiare il numero o il tipo di proprietà di una classe dopo che questa è stata definita. In JavaScript in fase di esecuzione si possono aggiungere o rimuovere proprietà a qualunque oggetto. Se si aggiunge una proprietà a un oggetto che è usato come prototipo per un gruppo di oggetti, anche gli oggetti del gruppo ereditano la nuova proprietà.

+ +

Riepilogo delle differenze

+ +

La tabella seguente fornisce un breve riepilogo di alcune di queste differenze. Il resto di questo capitolo descrive nel detteglio l'uso in JavaScript di costruttori e prototipi per creare una gerarchia di oggetti e lo confronta con la procedura che si userebbe in Java.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Confronto tra il sistema di oggetti basato su classi (Java) e il sistema di oggetti basato su prototipi (JavaScript)
Class-based (Java)Prototype-based (JavaScript)
Classi e istanze sono entità separate.Tutti gli oggetti possono ereditare da un altro oggetto.
Definire una classe con una definizione; istanziare una classe con un metodo costruttoreDefinire e creare una collezione di oggetti con una funzione costruttore.
Creare un singolo oggetto con l'operatore new.Uguale.
Costruire una gerarchia di oggetti usando la definizione di classe per definire le sottoclassi di classi esistenti.Costruire una gerarchia di oggetti assegnando un oggetto come prototipo associato a una funzione costruttore.
Ereditare le proprietà seguendo la catena delle classi.Ereditare le proprietà seguendo la catena dei prototipi.
La definizione di classe specifica tutte le proprietà di tutte le istanze della classe. Non è possibile aggiungere proprietà dinamicamente durante l'esecuzione.La funzione costruttore o il prototipo specificano un set iniziale di proprietà. È possibile aggiungere o rimuovere dinamicamente proprietà ai singoli oggetti o all'intero gruppo di oggetti.
+ +

L'esempio 'dipendente'

+ +

Il resto di questo capitolo usa la gerarchia dei dipendenti mostrata nella figura seguente.

+ +
+
+

Una semplice gerarchia con gli oggetti seguenti:

+ +

+
+ +
+
    +
  • Employee ha le proprietà name (il cui valore di default è una stringa vuota) e dept (il cui valore di default è "general").
    • +
  • Manager è basato su Employee. Aggiunge la proprietà reports  (il cui valore di default è un array vuoto, destinato a contenere una serie di oggetti Employee).
    • +
  • WorkerBee è anch'esso basato su Employee. Aggiunge la proprietà projects (il cui valore di default è un array vuoto, destinato a contenere una serie di stringhe).
    • +
  • SalesPerson è basato su WorkerBee. Aggiunge la proprietà quota (il cui valore di default è 100). Sovrascrive inoltre la proprietà dept con il valore "sales", che indica che tutti i venditori si trovano nello stesso dipartimento.
    • +
  • Engineer è basato su WorkerBee. Aggiunge la proprietà machine (il cui valore di default è una stringa vuota) e sovrascrive la proprietà dept con il valore "engineering".
    • +
+
+
+ +

Creazione della gerarchia

+ +

Ci sono diversi modi per definire una funzione costruttore appropriata per implementare la gerarchia dei dipendenti. Il modo scelto per definirli dipende molto da cosa si vuole riuscire a fare nella propria applicazione.

+ +

Questa sezione mostra come usare definizioni molto semplici (e relativamente rigide) per dimostrare come far funzionare l'ereditarietà. In queste definizioni, quando si crea un oggetto non è possibile specificare il valore di nessuna proprietà. L'oggetto creato avrà semplicemente i valori di default, che potranno essere cambiati in un secondo momento.

+ +

In una applicazione reale, probabilmente si vorranno definire dei costruttori che permettono di impostare i valori delle proprietà mentre si crea un oggetto (per maggiori informazioni si veda la sezione Costruttori più flessibili). Per adesso, queste semplici definizioni dimostrano come le proprietà vengono ereditate.

+ +

Le seguenti definizioni Java e JavaScript di Employee sono simili. L'unica differenza è che in Java si ha la necessità di specificare il tipo di ogni proprietà (questo è dovuto al fatto che Java è un linguaggio fortemente tipizzato mentre JavaScript è un linguaggio a tipizzazione dinamica.

+ +
+

JavaScript

+ +
function Employee() {
+  this.name = "";
+  this.dept = "general";
+}
+
+ +

Java

+ +
public class Employee {
+   public String name = "";
+   public String dept = "general";
+}
+
+
+ +

Le definizioni di Manager e WorkerBee mostrano la differenza nel modo di specificare l'oggetto seguente che si trova più in alto nella catena di ereditarietà. In JavaScript si aggiunge un'istanza prototipo come valore della proprietà prototype della funzione costrutore. È possibile farlo in qualsiasi momento dopo aver definito il costruttore. In Java, si specifica la superclasse all'interno della definizione della classe. Non è possibile cambiare la superclasse all'esterno della definizione.

+ +
+

JavaScript

+ +
function Manager() {
+  Employee.call(this);
+  this.reports = [];
+}
+Manager.prototype = Object.create(Employee.prototype);
+
+function WorkerBee() {
+  Employee.call(this);
+  this.projects = [];
+}
+WorkerBee.prototype = Object.create(Employee.prototype);
+
+ +

Java

+ +
public class Manager extends Employee {
+   public Employee[] reports = new Employee[0];
+}
+
+
+
+public class WorkerBee extends Employee {
+   public String[] projects = new String[0];
+}
+
+
+
+
+ +

Le definizioni di Engineer e SalesPerson creano oggetti che discendono da  WorkerBee, e quindi da Employee. Un oggetto di questo tipo ha le proprietà di tutti gli oggetti che si trovano sopra di esso nella catena. Inoltre, queste definizioni sovrascrivono il valore ereditato delle proprietà  dept con nuovi valori specifici per questi oggetti.

+ +
+

JavaScript

+ +
function SalesPerson() {
+   WorkerBee.call(this);
+   this.dept = "sales";
+   this.quota = 100;
+}
+SalesPerson.prototype = Object.create(WorkerBee.prototype);
+
+function Engineer() {
+   WorkerBee.call(this);
+   this.dept = "engineering";
+   this.machine = "";
+}
+Engineer.prototype = Object.create(WorkerBee.prototype);
+
+ +

Java

+ +
public class SalesPerson extends WorkerBee {
+   public String dept = "sales";
+   public double quota = 100.0;
+}
+
+
+public class Engineer extends WorkerBee {
+   public String machine;
+   public String dept = "engineering";
+   public String machine = "";
+}
+
+
+
+ +

Usando queste definizioni è possibile creare istanze di questi oggetti che ricevono i valori di default delle loro proprietà. La figura seguente illustra l'utilizzo di queste definizioni JavaScript per creare nuovi oggetti e mostra i valori delle diverse proprietà per questi nuovi oggetti.

+ +
+

Nota: Il termine istanza ha uno specifico significato tecnico nei linguaggi basati su classi. In questi linguaggi, un'istanza è una singola istanziazione di una classe ed è fondamentalmente differente dala classe. In JavaScript, "istanza" non ha questo significato tecnico perché JavaScript non ha questa differenza tra classi e istanze. Tuttavia, parlando di JavaScript, "istanza" può essere usato in modo informale per riferirsi a un oggetto creato usando una particolare funzione costruttore. Quindi, in questo esempio, è possibile dire che jane è un'istanza di Engineer. Allo stesso modo, sebbene i termini genitore  (parent), figlio (child), antenato (ancestor) e discendente (descendant) non hanno un significato conenzionale in JavaScript, possono essere usati in modo informale per riferirsi a oggetti che si trovano più o meno in alto nella catena dei prototipi.

+
+ +

Creazione di oggetti con definizioni semplici

+ +
+

Gerarchia degli oggetti

+ +

La gerarchia seguente è creata usando il codice sulla destra.

+ +

+ +

 

+ +

singoli oggetti

+ +
var jim = new Employee;
+// jim.name is ''
+// jim.dept is 'general'
+
+var sally = new Manager;
+// sally.name is ''
+// sally.dept is 'general'
+// sally.reports is []
+
+var mark = new WorkerBee;
+// mark.name is ''
+// mark.dept is 'general'
+// mark.projects is []
+
+var fred = new SalesPerson;
+// fred.name is ''
+// fred.dept is 'sales'
+// fred.projects is []
+// fred.quota is 100
+
+var jane = new Engineer;
+// jane.name is ''
+// jane.dept is 'engineering'
+// jane.projects is []
+// jane.machine is ''
+
+
+ +

Proprietà degli oggetti

+ +

Questa sezione spiega come gli oggetti ereditano le proprietà da altri oggetti presenti nella catena dei prototipi e cosa succede quando viene aggiunta una proprietà in fase di esecuzione.

+ +

Ereditare le proprietà

+ +

Supponiamo di creare un nuovo oggetto WorkerBee chiamato mark con l'istruzione seguente:

+ +
var mark = new WorkerBee;
+
+ +

Quando JavaScript vede l'operatore new, crea un nuovo oggeto generico e lo passa come valore della parola chiave this nella funzione costruttore WorkerBee. La funzione costruttore imposta esplicitamente il valore della proprietà projects e implicitamente il valore della proprietà interna __proto__ uguale al valore WorkerBee.prototype. (Il nome di questa proprietà ha due underscores iniziali e due finali). La proprietà __proto__ determina la catena di prototipi usata per restituire i valori delle proprietà. Una volta che queste proprietà sono impostate, JavaScript restituisce il nuovo oggetto e l'istruzione di assegnazione imposta la variabile mark per questo oggetto.

+ +

Questo processo non inserisce esplicitamente valori nell'oggetto mark (valori locali) per le proprietà che l'oggetto eredita dalla catena dei prototipi. Quando si richiede un valore di una proprietà, JavaScript prima controlla se il valore è presente nell'oggetto. Se c'è, viene restituito quel valore. Se il valore non è presente a livello locale, JavaScript controlla la catena dei prototipi (sfruttando la proprietà __proto__). Se un oggetto nella catena dei prototipi ha un valore per la proprietà, viene restituito. Se non viene trovata la proprietà, JavaScript risponde che l'oggetto non ha la proprietà cercata. In questo modo, l'oggetto mark ha le seguenti propietà con i rispettivi valori:

+ +
mark.name = "";
+mark.dept = "general";
+mark.projects = [];
+
+ +

L'oggetto mark eredita i valori per le proprietà name e dept dall'oggetto prototipo presente in mark.__proto__. Il costruttore WorkerBee assegna un valore locale per la proprietà projects. L'ereditarietà di proprietà e valori in JavaScript fnziona in questo modo. Alcune sottigliezze su questo processo sono trattate nella sezione Ereditare le proprietà (revisited).

+ +

Poiché questi costruttori non permettono di fornire valori specifici per una singola istanza, questa informazione è generica. I valori delle proprietà sono quelli di default condivisi da tutti i nuovi oggetti creati da WorkerBee. È oviamente possibile cambiare i valori di ognuna di queste proprietà. È quindi possibile assegnare informazioni specifice per mark nel modo seguente:

+ +
mark.name = "Doe, Mark";
+mark.dept = "admin";
+mark.projects = ["navigator"];
+ +

Aggiungere proprietà

+ +

In JavaScript, è possibile aggiungere proprietà a qualsiasi oggetto in fase di esecuzione. Non si è costretti ad usare solo le proprietà fornite dalla funzione costruttore. Per aggiungere una proprietà che sia specifica per un singolo oggetto, si deve assegnare il valore all'oggetto nel modo seguente::

+ +
mark.bonus = 3000;
+
+ +

Ora, l'oggetto markha una proprietà bonus, ma nessun altro WorkerBee ha questa proprietà.

+ +

Se si aggiunge una nuova proprietà a un oggetto che viene usato come prototipo per una funzione costruttore, la proprietà sarà aggiunta a tutti gli oggetti che ereditano le proprietà dal prototipo. Per esempio, è possibile aggiungere la proprietà specialty a tutti i dipendenti con l'istruzione seguente:

+ +
Employee.prototype.specialty = "none";
+
+ +

Non appena JavaScript esegue questa istruzione, anche l'oggetto mark avrà la proprietà specialty con il valore "none". La figura seguente mostra cosa succede qunado questa proprietà viene aggiunta al prototipo Employee e in seguito la si sovrascrive per il prototipo Engineer.

+ +


+ Aggiungere le proprietà

+ +

Costruttori più flessibili

+ +

Le funzioni costruttore mostrate finora non permettono di specificare i valori delle proprietà qunado viene creata un'istanza. Come in Java, è possibile fornire argomenti al costruttore per inizializzare i valori delle proprietà per le istanze. La figura seguente mostra un modo per farlo.

+ +


+ Specificare le proprietà in un costruttore, modo 1

+ +

La tabella seguente mostra le definizioni di questi oggetti in JavaScript e in Java.

+ +
+

JavaScript

+ +

Java

+
+ +
+
function Employee (name, dept) {
+  this.name = name || "";
+  this.dept = dept || "general";
+}
+
+ +

 

+ +

 

+ +

 

+ +

 

+ +
public class Employee {
+   public String name;
+   public String dept;
+   public Employee () {
+      this("", "general");
+   }
+   public Employee (String name) {
+      this(name, "general");
+   }
+   public Employee (String name, String dept) {
+      this.name = name;
+      this.dept = dept;
+   }
+}
+
+
+ +
+
function WorkerBee (projs) {
+
+ this.projects = projs || [];
+}
+WorkerBee.prototype = new Employee;
+
+ +

 

+ +

 

+ +
public class WorkerBee extends Employee {
+   public String[] projects;
+   public WorkerBee () {
+      this(new String[0]);
+   }
+   public WorkerBee (String[] projs) {
+      projects = projs;
+   }
+}
+
+
+ +
+
+function Engineer (mach) {
+   this.dept = "engineering";
+   this.machine = mach || "";
+}
+Engineer.prototype = new WorkerBee;
+
+ +

 

+ +

 

+ +
public class Engineer extends WorkerBee {
+   public String machine;
+   public Engineer () {
+      dept = "engineering";
+      machine = "";
+   }
+   public Engineer (String mach) {
+      dept = "engineering";
+      machine = mach;
+   }
+}
+
+
+ +

Queste definizioni JavaScript usano un linguaggio speciale per impostare i valori di default:

+ +
this.name = name || "";
+
+ +

In JavaScript l'operatore logico OR (||) valuta il suo primo argomento. Se questa espressione può essere convertita a true, l'operatore restituisce il primo argomento. Altrimenti l'operatore restituisce il valore del secondo argomento. Quindi, questa linea di codice verifica se name ha un valore utile per la proprietà name. Se ce l'ha, imposta this.name a questo valore. Altrimenti, imposta this.name a una stringa vuota. Questo capitolo usa questo linguaggio per brevità, comunque può disorientare a prima vista.

+ +
+

Nota: Potrebbe non funzionare come atteso se la funzione costruttore è chiamata con un argomento che converte a false (come ad esempio 0 (zero) o una stringa vuota ("")). In questo caso verrà scelto il valore di default.

+
+ +

Con queste definizioni, quando si crea un'istanza di un oggetto, è possibile specificare i valori per le proprietà definite localmente. Per creare un nuovo Engineer è possibile utilizzare l'espressione seguente:

+ +
var jane = new Engineer("belau");
+
+ +

Le proprietà di Jane sono ora:

+ +
jane.name == "";
+jane.dept == "engineering";
+jane.projects == [];
+jane.machine == "belau"
+
+ +

È da notare che con queste definizioni non è possibile specificare una valore iniziale per le proprietà ereditate, come ad esempio name. Se si desidera specificare un valore iniziale per una proprietà ereditata, in JavaScript è necessario aggiungere ulteriore codice alla funzione costruttore.

+ +

Finora, la funzione costruttore ha creato un oggetto generico e poi ha specificato proprietà locali e valori per il nuovo oggetto. È possibile fare in modo che il costruttore aggiunga più proprietà chiamando direttamente la funzione costruttore per un oggetto che si trova a un livello più alto nella catena dei prototipi. La figura seguente mostra queste nuove definizioni.

+ +


+ Specificare le proprietà in un costruttore, modo 2

+ +

Guardiamo nel dettaglio una di queste definizioni. Ecco la nuova definizione per il costruttore Engineer:

+ +
function Engineer (name, projs, mach) {
+  this.base = WorkerBee;
+  this.base(name, "engineering", projs);
+  this.machine = mach || "";
+}
+
+ +

Supponiamo di creare un nuovo oggetto Engineer nel modo seguente:

+ +
var jane = new Engineer("Doe, Jane", ["navigator", "javascript"], "belau");
+
+ +

JavaScript segue questa procedura:

+ +
    +
  1. L'operatore new crea un oggetto generico e imposta il valore Engineer.prototype per la sua proprietà __proto__.
    2. +
  2. L'operatore new passa il nuovo oggetto come valore della parola chiave this nella funzione costruttore Engineer.
    3. +
  3. Il costruttore crea una nuova proprietà per l'oggetto chiamata base e assegna il valore del costruttore WorkerBee alla proprietà base. Questo rende il costruttore WorkerBee un metode dell'oggetto Engineer. Il nome della proprietà base non è peculiare. È possibile usare qualsiasi nome per la proprietà; base è semplicemente evocativo dello scopo.
    4. +
  4. Il costruttore chiama il metodo base, passando come suoi argomenti due degli argomenti passati al costruttore ("Doe, Jane" e ["navigator", "javascript"]) e anche la stringa "engineering". Usando esplicitamente "engineering" nel costruttore indica che tutti gli oggetti Engineer hanno lo stesso valore per la proprietà dept ereditata, e questo valore sovrascrive il valore ereditato dal costruttore Employee.
    5. +
  5. Poiché base è un metodo di Engineer, all'interno della chiamata di base, JavaScript aggiunge la parola chiave this all'oggetto creato al passaggio 1. In questo modo, la funzione WorkerBee a sua volta passa gli argomenti "Doe, Jane" e "engineering" alla funzione costruttore Employee. Dopo l'esecuzione della funzione costruttore Employee, la funzione WorkerBee utilizza l'argomento rimanente per impostare la proprietà projects.
    6. +
  6. Dopo l'esecuzione del metodo base, il costruttore Engineer inizializza la proprietà machine dell'oggetto al valore "belau".
    7. +
  7. Dopo l'esecuzione del costruttore, JavaScript assegna il nuovo oggetto alla variabile jane.
    8. +
+ +

Avendo chiamato il costruttore WorkerBee dall'interno del costruttore Engineer, si potrebbe pensare di aver impostato in modo corretto l'ereditarietà per gli oggetti Engineer. Questo non è il caso. Chiamare il costruttore WorkerBee assicura che un oggetto Engineer venga creato con le proprietà specificate in tutte le funzioni costruttore che sono chiamate. Però, se in un secondo momento vengono aggiunte proprietà ai prototipi Employee o WorkerBee, queste proprietà non saranno ereditate dall'oggetto Engineer. Per esempio, se si considera il codice seguente:

+ +
function Engineer (name, projs, mach) {
+  this.base = WorkerBee;
+  this.base(name, "engineering", projs);
+  this.machine = mach || "";
+}
+var jane = new Engineer("Doe, Jane", ["navigator", "javascript"], "belau");
+Employee.prototype.specialty = "none";
+
+ +

L'oggetto jane non eredita la proprietà specialty. È comunque necessario impostare esplicitamente il prototipo per garantire l'ereditarietà dinamica. Se si considera invece l'esempio seguente:

+ +
function Engineer (name, projs, mach) {
+  this.base = WorkerBee;
+  this.base(name, "engineering", projs);
+  this.machine = mach || "";
+}
+Engineer.prototype = new WorkerBee;
+var jane = new Engineer("Doe, Jane", ["navigator", "javascript"], "belau");
+Employee.prototype.specialty = "none";
+
+ +

Adesso il valore per l'oggetto jane della proprietà specialty è "none".

+ +

Un altro modo per ereditare le proprietà è l'utilizzo dei metodi call() e apply(). Gli esempi sottostanti si equivalgono:

+ +
+
function Engineer (name, projs, mach) {
+  this.base = WorkerBee;
+  this.base(name, "engineering", projs);
+  this.machine = mach || "";
+}
+
+ +
function Engineer (name, projs, mach) {
+  WorkerBee.call(this, name, "engineering", projs);
+  this.machine = mach || "";
+}
+
+
+ +

L'utilizzo del metodo call() costituisce un'implementazione più pulita poiché la proprietà base non è più necessaria.

+ +

Ereditare le proprietà (revisited)

+ +

Le sezioni precedenti descrivono come i costruttori e i prototipi consentono di avere gerarchia ed ereditarietà in JavaScript. Questa sezione espone alcune sottiglienzze che non erano necessariamente evidenti nelle discussioni precedenti.

+ +

Valori locali vs. valori ereditati

+ +

Quando si accede a una proprietà di un oggetto, JavaScript esegue i seguenti passaggi, come descritto in precedenza in questo capitolo:

+ +
    +
  1. Verifica se il valore è presente a livello locale. Se c'è, restituisce quel valore.
    2. +
  2. Se non è presente, verifica la catena dei prototipi (usando la proprietà __proto__).
    3. +
  3. Se un oggetto nella catena dei prototipi ha un valore per la proprietà specificata, restituisce quel valore.
    4. +
  4. Se la proprietà non viene trovata, l'oggetto non ha la proprietà.
    5. +
+ +

Il risultato di questo processo dipende da come sono stati definiti gli elementi. L'esempio iniziale aveva queste definizioni:

+ +
function Employee () {
+  this.name = "";
+  this.dept = "general";
+}
+
+function WorkerBee () {
+  this.projects = [];
+}
+WorkerBee.prototype = new Employee;
+
+ +

Con queste definizioni, si supponga di creare amy come un'istanza di WorkerBee con la seguente istruzione:

+ +
var amy = new WorkerBee;
+
+ +

L'oggetto amy ha una proprietà locale, projects. I valori per le proprietà name e dept non sono specifici per amy e quindi derivano dalla proprietà __proto__ dell'oggetto amy. Quindi, amy ha i seguenti valori:

+ +
amy.name == "";
+amy.dept == "general";
+amy.projects == [];
+
+ +

Ora si supponga di cambiare il valore della proprietà name nel prototipo associato con Employee:

+ +
Employee.prototype.name = "Unknown"
+
+ +

Ci si potrebbe aspettare che il nuovo valore si propaghi a tutte le istanze di Employee. Invece, non lo fa.

+ +

Quando si crea qualsiasi istanza dell'oggetto Employee, questa istanza riceve un valore locale per la proprietà name (la stringa vuota). Questo significa che quando si imposta il prototipo WorkerBee creando un nuovo oggetto Employee, WorkerBee.prototype avrà un valore locale per la proprietà name. Quindi, quando JavaScript legge la proprietà name dell'oggetto amy (istanza di WorkerBee), trova in WorkerBee.prototype il valore locale di questa proprietà. Pertanto non continua a cercare nella catena salendo a Employee.prototype.

+ +

Se si vuole cambiare il valore di una proprietà di un oggetto in fase di esecuzione e si vuole che il nuovo valore venga ereditato da tutti i discendenti dell'oggetto, non è possibile definire la proprietà all'interno della funzione costruttore dell'oggetto. Invece, si aggiunge la proprietà al prototipo associato al costruttore. Per esempio, assumiamo di cambiare il codice precedente con quello che segue:

+ +
function Employee () {
+  this.dept = "general";    // Note that this.name (a local variable) does not appear here
+}
+Employee.prototype.name = "";    // A single copy
+
+function WorkerBee () {
+  this.projects = [];
+}
+WorkerBee.prototype = new Employee;
+
+var amy = new WorkerBee;
+
+Employee.prototype.name = "Unknown";
+
+ +

In questo caso, il valore della proprietà name di amy diventa "Unknown".

+ +

Come mostra questo esempio, se si vogliono avere i valori di default per le proprietà dell'oggetto e si vuole avere la possibilità di cambiare questi valori in fase di esecuzione, si devono impostare le proprietà nel prototipo del costruttore, e non direttamente nella funzione costruttore.

+ +

Determinazione delle relazioni tra istanze

+ +

In JavaScript la ricerca delle proprietà (property lookup) controlla prima tra le proprietà specifiche dell'oggetto e, se il nome della proprietà non viene trovato, controlla la proprietà speciale __proto__. Il processo, chiamato "ricerca nella catena dei prototipi" (lookup in the prototype chain), continua ricorsivamente .

+ +

Quando un oggetto viene costruito, la proprietà speciale __proto__ viene impostata al valore della proprietà prototype del costruttore. L'espressione new Foo() crea un oggetto con __proto__ == Foo.prototype. Di conseguenza, le modifiche alle proprietà di Foo.prototype alterano la ricerca delle proprietà per tutti gli oggetti che sono stati creati con new Foo().

+ +

Ogni oggetto ha una proprietà __proto__ (ad eccezione di Object); ogni funzione ha una proprietà prototype. Quindi gli oggetti possono essere correlati ad altri oggetti attraverso una 'ereditarietà prototipale' (prototypal inheritance). È possibile verificare l'ereditarietà confrontando la proprietà __proto__ di un oggetto con l'oggetto prototype di una funzione. JavaScript fornisce una scorciatoia: l'operatore instanceof confronta un oggetto con una funzione e restituisce true se l'oggetto eredita dal prototipo della funzione. Per esempio,

+ +
var f = new Foo();
+var isTrue = (f instanceof Foo);
+ +

Per un esempio più dettagliato, supponiamo di avere lo stesso gruppo di definizioni visto nella sezione For a more detailed example, suppose you have the same set of definitions shown in Ereditare le proprietà. Creiamo un oggetto Engineer nel modo seguente:

+ +
var chris = new Engineer("Pigman, Chris", ["jsd"], "fiji");
+
+ +

Per questo oggetto, tutti gli enunciati seguenti sono veri:

+ +
chris.__proto__ == Engineer.prototype;
+chris.__proto__.__proto__ == WorkerBee.prototype;
+chris.__proto__.__proto__.__proto__ == Employee.prototype;
+chris.__proto__.__proto__.__proto__.__proto__ == Object.prototype;
+chris.__proto__.__proto__.__proto__.__proto__.__proto__ == null;
+
+ +

Dato ciò, è possibile scrivere una funzione instanceOf come segue:

+ +
function instanceOf(object, constructor) {
+   object = object.__proto__;
+   while (object != null) {
+      if (object == constructor.prototype)
+         return true;
+      if (typeof object == 'xml') {
+        return constructor.prototype == XML.prototype;
+      }
+      object = object.__proto__;
+   }
+   return false;
+}
+
+ +
+

Nota: L'implementazione vista sopra verifica se l'oggetto è di tipo "xml" per ovviare a una stranezza nel modo in cui gli oggetti XML sono rappresentati nelle versioni recenti di JavaScript. Per i dettagli essenziali si veda il {{ bug(634150) }}.

+
+ +

Se si utilizza la funzione instanceOf definita in precedenza, queste espressioni sono vere:

+ +
instanceOf (chris, Engineer)
+instanceOf (chris, WorkerBee)
+instanceOf (chris, Employee)
+instanceOf (chris, Object)
+
+ +

Ma l'espressione seguente è falsa:

+ +
instanceOf (chris, SalesPerson)
+
+ +

Informazioni globali nei costruttori

+ +

Quando vengono creati dei costruttori, è necessario essere scrupolosi se si impostano informazioni globali all'interno del costruttore. Per esempio, se si vuole che un ID univoco venga assegnato automaticamente a ogni nuovo Employee si potrebbe usare la definizione seguente:

+ +
var idCounter = 1;
+
+function Employee (name, dept) {
+   this.name = name || "";
+   this.dept = dept || "general";
+   this.id = idCounter++;
+}
+
+ +

Con questa definizione, quando viene creato un nuovo Employee, il costruttore assegna l'ID seguente e incrementa il contatore globale (idCounter). Così, se l'istruzione successiva è la seguente, l'ID di victoria sarà 1, l'ID di harry sarà 2:

+ +
var victoria = new Employee("Pigbert, Victoria", "pubs")
+var harry = new Employee("Tschopik, Harry", "sales")
+
+ +

Questa a prima vista potrebbe sembrare la procedura corretta. Tuttavia, il contatore globale idCounter viene incrementato ogni volta che viene creato un oggetto Employee, per qualsiasi scopo. Se viene creata l'intera gerarchia di oggetti Employee mostrata in questo capitolo, il costruttore Employee viene chiamato ogni volta che si definisce un prototipo. Supponiamo di avere il codice seguente:

+ +
var idCounter = 1;
+
+function Employee (name, dept) {
+   this.name = name || "";
+   this.dept = dept || "general";
+   this.id = idCounter++;
+}
+
+function Manager (name, dept, reports) {...}
+Manager.prototype = new Employee;
+
+function WorkerBee (name, dept, projs) {...}
+WorkerBee.prototype = new Employee;
+
+function Engineer (name, projs, mach) {...}
+Engineer.prototype = new WorkerBee;
+
+function SalesPerson (name, projs, quota) {...}
+SalesPerson.prototype = new WorkerBee;
+
+var mac = new Engineer("Wood, Mac");
+
+ +

Si assuma inoltre che le definizioni omesse abbiano la proprietà base e chiamino il costruttore che si trova al livello superiore nella catena dei prototipi. In questo caso, nel momento in cui viene creato l'oggetto mac, il valore di mac.id sarà 5.

+ +

A seconda dell'applicazione, può essere più o meno importante che il valore del contatore sia stato incrementato queste volte aggiuntive. Se interessa il valore esatto di questo contatore, una soluzione possibile può prevedere l'uso del costruttore seguente al posto di quello visto in precedenza:

+ +
function Employee (name, dept) {
+   this.name = name || "";
+   this.dept = dept || "general";
+   if (name)
+      this.id = idCounter++;
+}
+
+ +

Quando viene creata un'istanza di Employee che deve essere usata come prototipo, non vengono forniti argomenti al costruttore. Usando questa definizione del costruttore, quando non vengono inseriti argomenti, il costruttore non assegna un valore all'ID e non aggiorna il contatore. Quindi, affinché a un oggetto Employee venga assegnato un ID, è necesario specificare un nome per il dipendente. In questo esempio, l'ID di mac sarà 1.

+ +

JavaScript non supporta l'ereditarietà multipla

+ +

Alcuni linguaggi ad oggetti ammettono l'ereditarietà multipla. Ossia, un oggetto può ereditare proprietà e valori da oggetti genitori non correlati. Javascript non supporta l'ereditarietà multipla.

+ +

L'eredità dei valori delle proprietà si ha in fase di esecuzione quando JavaScript cerca attraverso la catena dei prototipo di un oggetto per trovare un valore. Poiché un oggetto ha un unico prototipo associato, JavaScript non può ereditare dinamicamente da più di una catena di prototipi.

+ +

In JavaScript, è possibile che una funzione costruttore chiami al suo interno diverse funzioni costruttore. Questo dà l'illusione dell'ereditarietà multipla. Per esempio consideriamo le istruzioni seguenti:

+ +
function Hobbyist (hobby) {
+   this.hobby = hobby || "scuba";
+}
+
+function Engineer (name, projs, mach, hobby) {
+   this.base1 = WorkerBee;
+   this.base1(name, "engineering", projs);
+   this.base2 = Hobbyist;
+   this.base2(hobby);
+   this.machine = mach || "";
+}
+Engineer.prototype = new WorkerBee;
+
+var dennis = new Engineer("Doe, Dennis", ["collabra"], "hugo")
+
+ +

Assumiamo inoltre che la definizione di WorkerBee sia quella usata in precedenza in questo capitolo. In questo caso, l'oggetto dennis avrà queste proprietà:

+ +
dennis.name == "Doe, Dennis"
+dennis.dept == "engineering"
+dennis.projects == ["collabra"]
+dennis.machine == "hugo"
+dennis.hobby == "scuba"
+
+ +

Quindi dennis riceve la proprietà hobby dal costruttore Hobbyist. Però, se in seguito si aggiunge una proprietà al prototipo del costruttore Hobbyist:

+ +
Hobbyist.prototype.equipment = ["mask", "fins", "regulator", "bcd"]
+
+ +

L'oggetto dennis non erediterà questa nuova proprietà.

+ +
{{PreviousNext("Web/JavaScript/Guide/Working_with_Objects", "Web/JavaScript/Guide/Iterators_and_Generators")}}
diff --git a/files/it/web/javascript/guide/functions/index.html b/files/it/web/javascript/guide/functions/index.html new file mode 100644 index 0000000000..4aca8d5a7b --- /dev/null +++ b/files/it/web/javascript/guide/functions/index.html @@ -0,0 +1,646 @@ +--- +title: Funzioni +slug: Web/JavaScript/Guida/Functions +translation_of: Web/JavaScript/Guide/Functions +--- +
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Loops_and_iteration", "Web/JavaScript/Guide/Expressions_and_Operators")}}
+ +
 
+ +

Le funzioni sono tra i blocchi di programmazione fondamentali in JavaScript. Una funzione è una procedura JavaScript — un gruppo di istruzioni ( statement ) che esegue un compito o calcola un valore. Per usare una funzione, occorre definirla, all'interno dello scope dal quale la si invocherà.

+ +

Vedi anche l'esaustivo capitolo della guida di riferimento, che tratta delle funzioni JavaScript, per avere maggiori dettagli.

+ +

Definire una funzione

+ +

Dichiarazioni di funzione

+ +

Una definizione di funzione ( o dichiarazione di funzione, o istruzione di funzione ) consiste della parola chiave function, seguita da:

+ +
    +
  • il nome della funzione.
    • +
  • una lista di argomenti per la funzione, chiusi tra due parentesi e separati da una virgola.
    • +
  • le istruzioni JavaScript che definiscono la funzione, chiuse tra due parentesi graffe, { }.
    • +
+ +

Per esempio, il codice seguente definisce una funzione semplice chiamata square:

+ +
function square(number) {
+  return number * number;
+}
+
+ +

La funzione square riceve un argomento, chiamato number. La funzione contiene una sola istruzione che dice di restituire ( return ) l'argomento della funzione ( number ) moltiplicato per se stesso. L'istruzione return specifica il valore restituito dalla funzione.

+ +
return number * number;
+
+ +

I parametri primitivi ( quale un numero ) vengono passati alla funzione come valore; il valore è passato alla funzione, ma se la funzione cambia il valore del parametro, questo cambiamento non si riflette globalmente, o nella funzione chiamante ( la funzione che, eventualmente, ha invocato la funzione in esecuzione ).

+ +

Se, invece, alla funzione viene passato un oggetto ( un valore non-primitivo, come, ad esempio, un Array oppure un oggetto definito dall'utente ) come parametro e la funzione modifica le proprietà dell'oggetto, quella modifica sarà visibile anche fuori dalla funzione, come si può vedere dal seguente esempio:

+ +
function myFunc(theObject) {
+  theObject.make = "Toyota";
+}
+
+var mycar = {make: "Honda", model: "Accord", year: 1998};
+var x, y;
+
+x = mycar.make; // x gets the value "Honda"
+
+myFunc(mycar);
+y = mycar.make; // y gets the value "Toyota"
+                // (the make property was changed by the function)
+
+ +

Espressioni di funzione

+ +

Mentre la dichiarazione di funzione di cui sopra è, da un punto di vista sintattico, un'istruzione, le funzioni possono anche essere create da un'espressione di funzione. Una funzione di questo tipo può anche essere anonima; vale a dire, non deve avere un nome. Per esempio, la funzione square potrebbe essere stata definita come:

+ +
var square = function(number) { return number * number };
+var x = square(4) // x gets the value 16
+ +

Tuttavia, è possibile assegnare un nome alla funzione anche con l'espressione di funzione e quel nome potrà essere utilizzato all'interno della funzione, per riferirsi alla funzione stessa, oppure in un debugger, per identificare la funzione all'interno dello stack:

+ +
var factorial = function fac(n) { return n<2 ? 1 : n*fac(n-1) };
+
+console.log(factorial(3));
+
+ +

NB: l'oggetto console non è un oggetto standard. Non usatelo in un sito web, poichè potrebbe non funzionare correttamente. Per verificare il funzionamento dell'esempio precedente, usate, piuttosto:

+ +

           window.alert(factorial(3));

+ +

Le espressioni di funzione sono utili quando si vuole passare una funzione ad un'altra funzione, come argomento. Il prossimo esempio mostra una funzione map che viene definita e poi invocata, con una funzione anonima come primo parametro:

+ +
function map(f,a) {
+  var result = [], // Create a new Array
+      i;
+  for (i = 0; i != a.length; i++)
+    result[i] = f(a[i]);
+  return result;
+}
+
+ +

Il seguente codice:

+ +
map(function(x) {return x * x * x}, [0, 1, 2, 5, 10]);
+
+ +

restituisce [0, 1, 8, 125, 1000].

+ +

In JavaScript, una funzione può essere definita in base ad una condizione. Per esempio, la definizione di funzione seguente definisce la funzione myFunc solo se num è uguale a 0 ( zero ):

+ +
var myFunc;
+if (num == 0){
+  myFunc = function(theObject) {
+    theObject.make = "Toyota"
+  }
+}
+ +

Per definire una funzione, inoltre, è possibile usare il costruttore Function, per creare funzioni da una stringa, in runtime, in modo simile a eval().

+ +

Un metodo è una funzione che è una proprietà di un oggetto. Leggi di più sugli oggetti e sui metodi in Working with objects.

+ +

Chiamare ( invocare ) una funzione

+ +

Definire una funzione non significa eseguirla. Definire una funzione significa semplicemente darle un nome e specificare cosa fare quando la funzione viene chiamata ( invocata ). Chiamare una funzione significa eseguire le azioni specificate, utilizzando i parametri indicati. Per esempio, se definiamo la funzione square, possiamo chiamarla o invocarla nel modo seguente:

+ +
square(5);
+
+ +

Questa istruzione chiama la funzione, inviandole un argomento, il numero 5. La funzione esegue le sue istruzioni e restituisce il valore 25.

+ +

Le funzioni devono essere in scope quando vengono chiamate, ma la dichiarazione di funzione può anche apparire sotto la chiamata, nel codice sorgente, come nell'esempio seguente:

+ +
console.log(square(5));
+/* ... */
+function square(n) { return n*n }
+
+ +

Lo scope di una funzione è la funzione nella quale è stata dichiarata, oppure l'intero programma se la dichiarazione è stata fatta al livello più alto, non annidata in alcun altro blocco di programmazione.

+ +
+

Nota: l'ultimo esempio funziona solo quando la funzione viene definita utilizzando la sintassi usata nell'esempio ( function funcName(){} ). Il codice seguente, invece, non funzionerà:

+
+ +
console.log(square(5));
+square = function (n) {
+  return n * n;
+}
+
+ +

Gli argomenti di una funzione non sono limitati alle stringhe testuali e ai numeri. È possibile passare anche interi oggetti ad una funzione. La funzione show_props() (definita in Working with objects) è un esempio di funzione che riceve, come argomento, un oggetto.

+ +

Una funzione può chiamare se stessa. Per esempio, ecco una funzione che calcola in modo ricorsivo i fattoriali ( molto simile alla funzione fac() vista poco prima in questa stessa pagina ):

+ +
function factorial(n){
+  if ((n == 0) || (n == 1))
+    return 1;
+  else
+    return (n * factorial(n - 1));
+}
+
+ +

A questo punto, è possibile calcolare i fattoriali dei cinque numeri seguenti:

+ +
var a, b, c, d, e;
+a = factorial(1); // a gets the value 1
+b = factorial(2); // b gets the value 2
+c = factorial(3); // c gets the value 6
+d = factorial(4); // d gets the value 24
+e = factorial(5); // e gets the value 120
+
+ +

Esistono altri metodi per chiamare una funzione. Ci sono casi in cui una funzione deve essere chiamata dinamicamente, oppure casi in cui il numero degli argomenti passati alla funzione varia, oppure casi in cui il contesto della chiamata di funzione deve essere impostato ad uno specifico oggetto, determinato in runtime ( tempo di esecuzione ). È chiaro che le funzioni sono, esse stesse, oggetti, e che questi oggetti hanno propri metodi (vedi l'oggetto Function). Uno di questi metodi, apply(), può essere usato a questo scopo.

+ +

Lo scope di una funzione

+ +

Alle variabili definite all'interno di una funzione non è possibile accedere dall'esterno della funzione, poichè la variabile è definita solo per lo scope della funzione ( scope: portata, ambiente, ambito in cui il nome della variabile può essere utilizzato per riferirsi ad essa ). Tuttavia, una funzione può accedere a tutte le variabili e a tutte le funzioni definite all'interno dello scope in cui è stata definita. In altre parole, una funzione definita nello scope globale può accedere a tutte le variabili definite nello scope globale. Una funzione definita all'interno di un'altra funzione può accedere anche a tutte le variabili definite nella funzione genitrice ( parent ), oltre che a tutte le altre variabili alle quali può accedere la funzione genitrice.

+ +
// Queste variabili sono definite nello scope globale
+
+var num1 = 20,
+    num2 = 3,
+    name = "Chamahk";
+
+// Questa funzione è definita nello scope globale
+
+function multiply() {
+    return num1 * num2;
+    }
+
+multiply(); // restituisce 60
+
+// Un esempio di funzione annidata
+function getScore () {
+  var num1 = 2,
+      num2 = 3;
+
+  function add() {
+    return name + " scored " + (num1 + num2);
+  }
+
+  return add();
+}
+
+getScore(); // restituisce "Chamahk scored 5"
+
+ +

Scope e lo stack della funzione

+ +

Ricorsione

+ +

Una funzione può chiamare se stessa. Esistono tre modi per una funzione di chiamare se stessa:

+ +
    +
  1. il nome della funzione
    2. +
  2. arguments.callee
    3. +
  3. una variabile in-scope che fa da riferimento alla funzione
    4. +
+ +

Per esempio, considerate la seguente definizione di funzione:

+ +
var foo = function bar() {
+   // statements go here
+};
+
+ +

All'interno del corpo della funzione, le tre seguenti istruzioni sono equivalenti:

+ +
    +
  1. bar()
    2. +
  2. arguments.callee()
    3. +
  3. foo()
    4. +
+ +

Una funzione che chiama se stessa viene detta funzione ricorsiva. In qualche modo, la ricorsione è analoga ad un loop. Entrambi eseguono lo stesso codice più volte ed entrambi richiedono una condizione (per evitare un loop infinito, o piuttosto, una ricorsione infinita, in questo caso). Per esempio, il loop seguente:

+ +
var x = 0;
+while (x < 10) { // "x < 10" is the loop condition
+   // do stuff
+   x++;
+}
+
+ +

può essere convertito in una funzione ricorsiva e in una chiamata a quella funzione:

+ +
function loop(x) {
+  if (x >= 10) // "x >= 10" is the exit condition (equivalent to "!(x < 10)")
+    return;
+  // do stuff
+  loop(x + 1); // the recursive call
+}
+loop(0);
+
+ +

Tuttavia, alcuni algoritmi non possono essere semplici loop iterativi. Per esempio, per avere tutti i nodi di una struttura ad albero (per esempio, il DOM) è molto più semplice usare la ricorsione:

+ +
function walkTree(node) {
+  if (node == null) //
+    return;
+  // do something with node
+  for (var i = 0; i < node.childNodes.length; i++) {
+    walkTree(node.childNodes[i]);
+  }
+}
+
+ +

Paragonato alla funzione loop, ciascuna chiamata ricorsiva, qui, esegue, a sua volta, molte chiamate ricorsive.

+ +

È possibile convertire qualsiasi algoritmo ricorsivo in un algoritmo non ricorsivo, ma spesso la logica è molto più complessa e per farlo è necessario utilizzare uno stack. In effetti, la ricorsione stessa usa uno stack: lo stack della funzione.

+ +

Un comportamento paragonabile allo stack può essere visto nell'esempio seguente:

+ +
function foo(i) {
+  if (i < 0)
+    return;
+  console.log('begin:' + i);
+  foo(i - 1);
+  console.log('end:' + i);
+}
+foo(3);
+
+// Output:
+
+// begin:3
+// begin:2
+// begin:1
+// begin:0
+// end:0
+// end:1
+// end:2
+// end:3
+ +

Funzioni annidate e chiusure

+ +

È possibile annidare una funzione all'interno di una funzione. La funzione annidata ( interna ) è privata, rispetto alla funzione che la contiene (outer o esterna). Essa forma anche una chiusura ( closure ). Una chiusura è un'espressione (normalmente, una funzione) che può avere variabili libere ( non locali ) legate ad un ambiente (ambiente che "chiude" l'espressione).

+ +

Dal momento in cui una funzione annidata è una chiusura, una funzione annidata può "ereditare" gli argomenti e le variabili della sua funzione contenitore (esterna o genitrice). In altre parole, la funzione interna contiene lo scope ( ambiente ) della funzione esterna.

+ +

Per riepilogare:

+ +
    +
  • alla funzione interna possono accedere solo le istruzioni contenute nella funzione esterna.
    • +
+ +
    +
  • la funzione interna forma una chiusura: la funzione interna può utilizzare gli argomenti e le variabili della funzione esterna, mentre la funzione esterna non può utilizzare gli argomenti e le variabili della funzione interna.
    • +
+ +

Ecco un esempio di funzione annidata:

+ +
function addSquares(a,b) {
+  function square(x) {
+    return x * x;
+  }
+  return square(a) + square(b);
+}
+a = addSquares(2,3); // restituisce 13
+b = addSquares(3,4); // restituisce 25
+c = addSquares(4,5); // restituisce 41
+
+ +

Dal momento in cui la funzione interna forma una chiusura, è possibile chiamare la funzione esterna e specificare gli argomenti per entrambe le funzioni, quella esterna e quella interna:

+ +
function outside(x) {
+  function inside(y) {
+    return x + y;
+  }
+  return inside;
+}
+fn_inside = outside(3); // Come dire: dammi una funzione che addizioni 3 a qualsiasi altro valore le venga passato
+result = fn_inside(5); // restituisce 8
+
+result1 = outside(3)(5); // restituisce 8
+
+ +

Persistenza delle variabili

+ +

Da notare come x venga preservata anche all'uscita da inside. Una chiusura deve preservare argomenti e variabili in tutti gli scope ai quali è riferita. Poichè ogni chiamata potrebbe trasportare argomenti differenti, per ogni chiamata alla funzione outside viene creata una nuova chiusura. La memoria può essere liberata solo quando inside non è più accessibile.

+ +

Una chiusura non è differente da un riferimento ad un oggetto, ma è meno ovvia di quest'ultimo, perchè non richiede di impostare direttamente il riferimento e perchè non è possibile ispezionare l'oggetto al quale il riferimento punta.

+ +

Funzioni annidate multiple

+ +

Le funzioni possono essere annidate a più livelli. Per esempio, una funzione (A), può contenere una funzione (B), che può contenere, a sua volta, una funzione (C). Entrambe le funzioni B e C formano una chiusura, qui, così B può accedere ad A e C può accedere a B. Inoltre, visto che C può accedere a B che può accedere ad A, C può anche accedere ad A. Quindi, le chiusure possono contenere più scope; ciascuna chiusura contiene lo scope delle funzioni che la contengono. Questo meccanismo è chiamato scope chaining ( catena di scope ). (Perchè è chiamata "catena" sarà chiaro tra poco.)

+ +

Considerate l'esempio seguente:

+ +
function A(x) {
+  function B(y) {
+    function C(z) {
+      console.log(x + y + z);
+    }
+    C(3);
+  }
+  B(2);
+}
+A(1); // logs 6 (1 + 2 + 3)
+
+ +

In questo esempio, C accede alla variabile y di B e alla x di A. Questo accade perchè:

+ +
    +
  1. B forma una chiusura che include A: quindi, B può accedere agli argomenti ed alle variabili di A.
    2. +
  2. C forma una chiusura che include B.
    3. +
  3. Poichè la chiusura di B include A, la chiusura di C include A; C può accedere agli argomenti ed alle variabili sia di B che di A. In altre parole, C unisce in una catena gli scope di B ed A in quell'ordine.
    4. +
+ +

Il contrario, tuttavia, non è vero. A non può accedere a C, perchè A non può accedere ad alcun argomento o variabile di B, di cui C è una variabile. Quindi, C resta privata solo a  B.

+ +

Conflitti tra nomi

+ +

Quando due argomenti o variabili, all'interno degli scope di una chiusura hanno lo stesso nome, nasce un conflitto tra nomi. Gli scope più interni hanno la precedenza, così lo scope più annidato ha la precedenza più elevata, mentre lo scope più esterno ha la precedenza più bassa. Questa è la catena degli scope. Il primo della catena è lo scope più annidato, mentre l'ultimo è lo scope più esterno. Vediamo il seguente esempio:

+ +
function outside() {
+  var x = 10;
+  function inside(x) {
+    return x;
+  }
+  return inside;
+}
+result = outside()(20); // returns 20 instead of 10
+ +

Il conflitto tra nomi avviene con l'istruzione return x ed è tra il nome del parametro x di inside ed il nome della variabile x di outside. La catena di scope qui è {inside, outside, global object}. Quindi, la x di inside ha la precedenza sulla x di outside: il valore restituito, alla fine, sarà 20 ( la x di inside ) e non 10 ( la x di  outside ).

+ +

Closure

+ +

Le closure sono uno dei meccanismi più potenti di JavaScript. JavaScript permette l'annidamento di funzioni e riconosce alla funzione interna il pieno accesso a tutte le variabili e a tutte le funzioni definite nella funzione esterna ( e a tutte le altre variabili e funzioni cui la funzione esterna ha accesso ). Tuttavia, la funzione esterna non ha accesso alle variabili ed alle funzioni definite nella funzione interna. Questo offre una certa protezione alle variabili della funzione interna. Inoltre, dal momento in cui la funzione interna ha accesso allo scope della funzione esterna, le variabili e le funzioni definite nella funzione esterna sopravviveranno alla funzione esterna stessa, se la funzione interna fa in modo di sopravvivere alla funzione esterna. Una closure viene creata quando la funzione interna viene resa disponibile in qualche modo agli scope esterni alla funzione esterna.

+ +
var pet = function(name) {   // La funzione esterna definisce una variabile di nome "name"
+  var getName = function() {
+    return name;             // La funzione interna ha accesso alla variabile "name" della funzione esterna
+  }
+  return getName;            // restituisce la funzione interna, esponendola, quindi, a scope esterni
+},
+myPet = pet("Vivie");
+
+myPet();                     // restituisce "Vivie"
+
+ +

Può essere molto più complicato del codice scritto sopra. Può essere restituito un oggetto contenente metodi per manipolare le variabili interne della funzione esterna.

+ +
var createPet = function(name) {
+  var sex;
+
+  return {
+    setName: function(newName) {
+      name = newName;
+    },
+
+    getName: function() {
+      return name;
+    },
+
+    getSex: function() {
+      return sex;
+    },
+
+    setSex: function(newSex) {
+      if(typeof newSex == "string" && (newSex.toLowerCase() == "male" || newSex.toLowerCase() == "female")) {
+        sex = newSex;
+      }
+    }
+  }
+}
+
+var pet = createPet("Vivie");
+pet.getName();                  // Vivie
+
+pet.setName("Oliver");
+pet.setSex("male");
+pet.getSex();                   // male
+pet.getName();                  // Oliver
+
+ +

Nel codice sopra, la variabile name della funzione esterna è accessibile alle funzioni interne e non c'è modo di accedere alle variabili interne, se non attraverso le funzioni interne. Le variabili interne della funzione interna agiscono come magazzino sicuro per le funzioni interne. Esse conservano i dati "persistenti" e sicuri che le funzioni interne utilizzano. Le funzioni non hanno nemmeno bisogno di vedersi assegnare ad una variabile o di avere un nome.

+ +
var getCode = (function(){
+  var secureCode = "0]Eal(eh&2";    // A code we do not want outsiders to be able to modify...
+
+  return function () {
+    return secureCode;
+  };
+})();
+
+getCode();    // Returns the secureCode
+
+ +

Ci sono, tuttavia, alcuni pericoli dai quali guardarsi, quando si utilizzano le closure. Se una funzione chiusa definisce una variabile che ha lo stesso nome di una variabile definita nello scope esterno, non sarà più possibile riferirsi alla variabile esterna.

+ +
var createPet = function(name) {  // Outer function defines a variable called "name"
+  return {
+    setName: function(name) {    // Enclosed function also defines a variable called "name"
+      name = name;               // ??? How do we access the "name" defined by the outer function ???
+    }
+  }
+}
+
+ +

È davvero  complicato usare la variabile magica this nelle closure. La variabile this è da usarsi con cautela, poichè ciò a cui this si riferisce dipende esclusivamente da dove è stata invocata la funzione, piuttosto che da dove è stata definita.

+ +

Usare l'oggetto arguments

+ +

Gli argomenti di una funzione vengono memorizzati in un oggetto, strutturato come un array. All'interno di una funzione, è possibile riferirsi agli argomenti passati alla funzione stessa nel modo seguente:

+ +
arguments[i]
+
+ +

dove i è il numero ordinale dell'argomento, a partire da zero. Così, il primo argomento passato ad una funzione sarà arguments[0]. Il numero totale degli argomenti è dato da arguments.length.

+ +

Usando l'oggetto arguments, è possibile chiamare una funzione con più argomenti di quanti ne possa formalmente accettare. Questo è spesso utile se non si sa in anticipo quanti argomenti verranno passati alla funzione. Si può usare l'attributo  arguments.length per determinare il numero degli argomenti realmente passati alla funzione, per poi accedere a ciascuno di essi usando l'oggetto arguments.

+ +

Prendiamo, per esempio, una funzione che unisca più stringhe. Il solo argomento formale previsto per la funzione è una stringa che specifica i caratteri da usare per separare le singole voci. La funzione viene definita così:

+ +
function myConcat(separator) {
+   var result = "", // initialize list
+       i;
+   // iterate through arguments
+   for (i = 1; i < arguments.length; i++) {
+      result += arguments[i] + separator;
+   }
+   return result;
+}
+
+ +

È possibile passare una quantità qualsiasi di argomenti alla funzione e la funzione comporrà una stringa testuale contenente tutti gli argomenti passati:

+ +
// returns "red, orange, blue, "
+myConcat(", ", "red", "orange", "blue");
+
+// returns "elephant; giraffe; lion; cheetah; "
+myConcat("; ", "elephant", "giraffe", "lion", "cheetah");
+
+// returns "sage. basil. oregano. pepper. parsley. "
+myConcat(". ", "sage", "basil", "oregano", "pepper", "parsley");
+
+ +
+

Nota: La variabile arguments è simile ad un array (  "array-like" ), ma non è un array. È simile ad un array poichè ha un indice numerato ed una proprietà length. Tuttavia, non possiede tutti i metodi di manipolazione degli array.

+
+ +

Vedi l'oggetto Function nella JavaScript reference, per avere maggiori informazioni.

+ +

I parametri di una funzione

+ +

A partire da ECMAScript 6, esistono due nuovi tipi di parametri: i parametri di default e i parametri rest.

+ +

I parametri di default

+ +

In JavaScript, i parametri di una funzione hanno come valore di default undefined. Tuttavia, in alcune situazioni potrebbe essere utile impostare un diverso valore di default. In questo, possono aiutare i parametri di default.

+ +

In passato, la strategia comune per impostare i valori di default era quella di verificare i valori dei parametri, all'interno del corpo della funzione, ed assegnare loro un valore, nel caso fossero stati undefined. Se nell'esempio seguente non venisse passato, durante la chiamata, alcun valore per b, il suo valore sarebbe undefined, anche quando venisse valutata l'istruzione a*b, e la chiamata a multiply restituirebbe NaN ( Not a Number ). Tuttavia, questo valore viene definito nella seconda riga:

+ +
function multiply(a, b) {
+  b = typeof b !== 'undefined' ?  b : 1;
+
+  return a*b;
+}
+
+multiply(5); // 5
+
+ +

Con i parametri di deafult, la verifica all'interno del corpo della funzione non è più necessaria. Ora, è possibile mettere 1 come valore di default per b nella dichiarazione della funzione:

+ +
function multiply(a, b = 1) {
+  return a*b;
+}
+
+multiply(5); // 5
+ +

Per maggiori dettagli, vedi paremetri di default nella Javascript reference.

+ +

I parametri Rest

+ +

La sintassi dei rest parameter permette di rappresentare un indefinito numero di argomenti come un array. Nell'esempio, usiamo i parametri rest per rappresentare l'insieme degli argomenti composto dagli argomenti successivi al primo ( a partire dal secondo argomento fino alla fine ). Poi, moltiplichiamo ciascun argomento dell'insieme per il primo. Questo esempio utilizza una funzione a freccia, che verrà introdotta nella prossima sezione.

+ +
function multiply(multiplier, ...theArgs) {
+  return theArgs.map(x => multiplier * x);
+}
+
+var arr = multiply(2, 1, 2, 3);
+console.log(arr); // [2, 4, 6]
+ +

Le funzioni a freccia

+ +

Una espressione di funzione a freccia ( nota anche come fat arrow function ) ha una sintassi più stringata rispetto alle espressioni di funzione e forza, lessicalmente, il valore di this. Le funzioni a freccia sono sempre anonime. Vedi anche il post di hacks.mozilla.org: "ES6 In Depth: Arrow functions".

+ +

Sono due i fattori che influenzarono l'introduzione delle funzioni a freccia: la brevità delle funzioni ed il this lessicale.

+ +

Funzioni più brevi

+ +

In alcuni modelli funzionali, funzioni più brevi sono le benvenute. Paragoniamo le due istruzioni seguenti:

+ +
var a = [
+  "Hydrogen",
+  "Helium",
+  "Lithium",
+  "Beryl­lium"
+];
+
+var a2 = a.map(function(s){ return s.length });
+var a3 = a.map( s => s.length );
+ +

Il this lessicale

+ +

Until arrow functions, every new function defined its own this value (a new object in case of a constructor, undefined in strict mode function calls, the context object if the function is called as an "object method", etc.). This proved to be annoying with an object-oriented style of programming.

+ +
function Person() {
+  // The Person() constructor defines `this` as itself.
+  this.age = 0;
+
+  setInterval(function growUp() {
+    // In nonstrict mode, the growUp() function defines `this`
+    // as the global object, which is different from the `this`
+    // defined by the Person() constructor.
+    this.age++;
+  }, 1000);
+}
+
+var p = new Person();
+ +

In ECMAScript 3/5, this issue was fixed by assigning the value in this to a variable that could be closed over.

+ +
function Person() {
+  var self = this; // Some choose `that` instead of `self`.
+                   // Choose one and be consistent.
+  self.age = 0;
+
+  setInterval(function growUp() {
+    // The callback refers to the `self` variable of which
+    // the value is the expected object.
+    self.age++;
+  }, 1000);
+}
+ +

Alternatively, a bound function could be created so that the proper this value would be passed to the growUp() function.

+ +

Arrow functions capture the this value of the enclosing context, so the following code works as expected.

+ +
function Person(){
+  this.age = 0;
+
+  setInterval(() => {
+    this.age++; // |this| properly refers to the person object
+  }, 1000);
+}
+
+var p = new Person();
+ +

Predefined functions

+ +

JavaScript has several top-level, built-in functions:

+ +
+
{{jsxref("Global_Objects/eval", "eval()")}}
+
+

The eval() method evaluates JavaScript code represented as a string.

+
+
{{jsxref("Global_Objects/uneval", "uneval()")}} {{non-standard_inline}}
+
+

The uneval() method creates a string representation of the source code of an {{jsxref("Object")}}.

+
+
{{jsxref("Global_Objects/isFinite", "isFinite()")}}
+
+

The global isFinite() function determines whether the passed value is a finite number. If needed, the parameter is first converted to a number.

+
+
{{jsxref("Global_Objects/isNaN", "isNaN()")}}
+
+

The isNaN() function determines whether a value is {{jsxref("Global_Objects/NaN", "NaN")}} or not. Note: coercion inside the isNaN function has interesting rules; you may alternatively want to use {{jsxref("Number.isNaN()")}}, as defined in ECMAScript 6, or you can use typeof to determine if the value is Not-A-Number.

+
+
{{jsxref("Global_Objects/parseFloat", "parseFloat()")}}
+
+

The parseFloat() function parses a string argument and returns a floating point number.

+
+
{{jsxref("Global_Objects/parseInt", "parseInt()")}}
+
+

The parseInt() function parses a string argument and returns an integer of the specified radix (the base in mathematical numeral systems).

+
+
{{jsxref("Global_Objects/decodeURI", "decodeURI()")}}
+
+

The decodeURI() function decodes a Uniform Resource Identifier (URI) previously created by {{jsxref("Global_Objects/encodeURI", "encodeURI")}} or by a similar routine.

+
+
{{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent()")}}
+
+

The decodeURIComponent() method decodes a Uniform Resource Identifier (URI) component previously created by {{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent")}} or by a similar routine.

+
+
{{jsxref("Global_Objects/encodeURI", "encodeURI()")}}
+
+

The encodeURI() method encodes a Uniform Resource Identifier (URI) by replacing each instance of certain characters by one, two, three, or four escape sequences representing the UTF-8 encoding of the character (will only be four escape sequences for characters composed of two "surrogate" characters).

+
+
{{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent()")}}
+
+

The encodeURIComponent() method encodes a Uniform Resource Identifier (URI) component by replacing each instance of certain characters by one, two, three, or four escape sequences representing the UTF-8 encoding of the character (will only be four escape sequences for characters composed of two "surrogate" characters).

+
+
{{jsxref("Global_Objects/escape", "escape()")}} {{deprecated_inline}}
+
+

The deprecated escape() method computes a new string in which certain characters have been replaced by a hexadecimal escape sequence. Use {{jsxref("Global_Objects/encodeURI", "encodeURI")}} or {{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent")}} instead.

+
+
{{jsxref("Global_Objects/unescape", "unescape()")}} {{deprecated_inline}}
+
+

The deprecated unescape() method computes a new string in which hexadecimal escape sequences are replaced with the character that it represents. The escape sequences might be introduced by a function like {{jsxref("Global_Objects/escape", "escape")}}. Because unescape() is deprecated, use {{jsxref("Global_Objects/decodeURI", "decodeURI()")}} or {{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent")}} instead.

+
+
+ +

{{PreviousNext("Web/JavaScript/Guide/Loops_and_iteration", "Web/JavaScript/Guide/Expressions_and_Operators")}}

diff --git a/files/it/web/javascript/guide/grammar_and_types/index.html b/files/it/web/javascript/guide/grammar_and_types/index.html new file mode 100644 index 0000000000..2a43d5230d --- /dev/null +++ b/files/it/web/javascript/guide/grammar_and_types/index.html @@ -0,0 +1,659 @@ +--- +title: Grammatica e tipi +slug: Web/JavaScript/Guida/Grammar_and_types +translation_of: Web/JavaScript/Guide/Grammar_and_types +--- +
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Introduction", "Web/JavaScript/Guide/Control_flow_and_error_handling")}}
+ +

Questo capitolo tratta la sintassi di base di JavaScript, le dichiarazioni di variabili, i tipi di dati e i letterali.

+ +

Nozioni di base

+ +

JavaScript mutua molta della sua sintassi da Java, ma è anche influenzato da Awk, Perl e Python.

+ +

JavaScript è sensibile al maiuscolo-minuscolo (case-sensitive) e usa l'insieme di caratteri Unicode.

+ +

In JavaScript, le istruzioni sono separate da punto e vigola (;). Spazi, tabulazioni e caratteri di a capo sono chiamati spazi bianchi. Il testo sorgente di uno script JavaScript viene analizzato da sinistra verso destra ed è convertito in una sequenza di elementi di input che sono: token, caratteri di controllo, terminatori di linea, commenti o spazi bianchi. ECMAScript definisce anche determinate parole chiave e letterali e ha delle regole per l'inserimento automatico dei punti e virgola (ASI) per chiudere le istruzioni. Tuttavia si raccomanda di aggiungere sempre un punto e virgola per terminare ogni istruzione, questo eviterà effetti collaterali. Per maggiori informazioni si veda il riferimento dettagliato riguardo la lexical grammar di JavaScript.

+ +

Commenti

+ +

La sintassi dei commenti è la stessa di quelli del C++ e di molti altri linguaggi:

+ +
// una linea di commento
+
+/* questo è un commento più lungo,
+   occupa più linee
+ */
+
+/* Però non puoi /* annidare i commenti */ SyntaxError */
+ +

Dichiarazioni

+ +

Ci sono tre tipi di dichiarazioni in JavaScript.

+ +
+
{{jsxref("Statements/var", "var")}}
+
Dichiarazione di una variabile, opzionalmente inizializzata ad un valore.
+
{{experimental_inline}} {{jsxref("Statements/let", "let")}}
+
Dichiarazione di una variabile locale con visibilità nel blocco, opzionalmente inizializzata ad un valore.
+
{{experimental_inline}} {{jsxref("Statements/const", "const")}}
+
Dichiarazione di una costante in sola lettura con un nome.
+
+ +

Variabili

+ +

Le variabili sono nomi simbolici da usare nelle applicazioni in luogo dei valori che rappresentano. I nomi delle variabili, chiamati  {{Glossary("Identifier", "identificatori")}}, devono seguire certe regole di scrittura.

+ +

Un identificatore JavaScript deve iniziare con una lettera, un trattino basso (_) o segno del dollaro ($), mentre i caratteri successivi possono anche essere le cifre (0-9). Siccome JavaScript è case-sensitive, le lettere includono i caratteri da "A" fino a "Z" (maiuscoli) e i caratteri da "a" fino a "z" (minuscoli).

+ +

Si possono usare anche le lettere ISO 8859-1 o Unicode come per esempio å e ü negli identificatori. Possono essere usate anche le sequenze di escape di Unicode come caratteri negli identificatori.

+ +

Alcuni esempi di nomi leciti sono Number_hits, temp99 e _name.

+ +

Dichiarazione di variabili

+ +

Una variabile può essere dichiarata in tre modi:

+ +
    +
  • Con la parola chiave {{jsxref("Statements/var", "var")}}, per esempio, var x = 42. Questa sintassi può essere usata per dichiarare sia variabili locali che globali.
    • +
  • Semplicemente assegnandole un valore. Per esempio, x = 42. questo dichiara sempre una variabile globale. Genera uno warning nella modalità strict di JavaScript. Questa variante non dovrebbe essere usata.
    • +
  • Con la parola chiave {{jsxref("Statements/let", "let")}}, ad esempio, let y = 13. Questa sintassi può essere usata per dichiarare una variabile locale visibile in un blocco. Vedi Visibilità delle variabili più in basso.
    • +
+ +

Valutazione delle variabili

+ +

Una variabile dichiarata usando le istruzioni  var o let senza nessun valore iniziale specificato ha il valore {{jsxref("undefined")}}.

+ +

Il tentativo di accedere ad una variabile non dichiarata o di accedere ad un identificatore dichiarato con l'istruzione let, prima di una sua inizializzazione, provocherà un'eccezione di {{jsxref("ReferenceError")}}:

+ +
var a;
+console.log("Il valore di a è " + a); // Scrive nel log "Il valore di a è undefined"
+
+console.log("Il valore di b è " + b); // Solleva una eccezione ReferenceError
+
+console.log("Il valore di c è " + c); // Scrive nel log "Il valore di c è undefined" 
+var c;
+
+console.log("Il valore di x è " + x); // Solleva una eccezione ReferenceError: x is not defined
+let x;
+ +

Si può usare undefined per determinare se una variabile ha un valore oppure no. Nel codice seguente alla variabile input non è stato assegnato un valore e la condizione dell'istruzione if è

+ +

valuta a true.

+ +
var input;
+if(input === undefined){
+  faiQuesto();
+} else {
+  faiQuello();
+}
+
+ +

Il valore undefined si comporta come false quando viene usato in un contesto booleano. Ad esempio il codice seguente esegue la funzione miaFunzione perché l'elemento di mioArray non è definito:

+ +
var mioArray = [];
+if (!mioArray[0]) miaFunzione();
+
+ +

Il valore undefined viene convertito in NaN quando viene usato in un contesto numerico.

+ +
var a;
+a + 2;  // Viene valutato a NaN
+ +

Quando viene valutata una variabile {{jsxref("null")}}, il valore null si comporta come 0 in un contesto numerico e false in un contesto booleano. Per esempio:

+ +
var n = null;
+console.log(n * 32); // Visualizzera nella console 0
+
+ +

Visibilità delle variabili

+ +

Quando una variabile viene dichiarata fuori da una qualsiasi funzione viene chiamata variabile globale, poiché è disponibile  in tutto il codice nel documento corrente. Quando invece la variabile viene dichiarata in una funzione viene chiamata variabile locale, perché è disponibile soltanto all'interno di quella funzione.

+ +

JavaScript prima di ECMAScript 2015 non aveva una visibilità a livello di blocco; piuttosto una variabile dichiarata all'interno di un blocco era locale alla funzione (o al contesto globale) in cui il blocco risiedeva. Per esempio il seguente codice scriverà nel log 5, perché la visibilità di x è la funzione (o il contesto globale) all'interno del quale x viene dichiarata e non il blocco, che in questo caso è l'istruzione if.

+ +
if (true) {
+  var x = 5;
+}
+console.log(x);  // 5
+
+ +

Il comportamento cambia quando si usa l'istruzione let introdotta in ECMAScript 2015.

+ +
if (true) {
+  let y = 5;
+}
+console.log(y);  // ReferenceError: y non è definita
+
+ +

Sollevamento delle variabili

+ +

Un'altra cosa inusuale riguardo le variabili in JavaScript è che si può fare riferimento ad una variabile dichiarata più avanti nello script senza causare una eccezione. Questo concetto è conosciuto come innalzamento (hoisting); le variabili in JavaScript sono in un certo senso "sollevate" o spostate all'inizio della definizione del corpo della funzione o dell'istruzione. Tuttavia le variabili che sono state sollevate ritornano il valore undefined. Dunque se viene usata (o si fa riferimento ad) una variabile prima che venga dichiarata questa ritornà undefined.

+ +
/**
+ * Esempio 1
+ */
+console.log(x === undefined); // visualizza "true" nel log
+var x = 3;
+
+/**
+ * Esempio 2
+ */
+var myvar = "mio valore";
+
+(function() {
+  console.log(myvar); // visualizza "undefined" nel log
+  var myvar = "valore locale";
+})();
+
+ +

L'esempio sopra sarà interpretato nello stesso modo di:

+ +
/**
+ * Esempio 1
+ */
+var x;
+console.log(x === undefined); // visualizza nel log "true"
+x = 3;
+
+/**
+ * Esempio 2
+ */
+var myvar = "mio valore";
+
+(function() {
+  var myvar;
+  console.log(myvar); // undefined
+  myvar = "valore locale";
+})();
+
+ +

Per via dell'innalzamento, tutte le istruzioni var in una funzione dovrebbero essere posizionate prima di ogni altra istruzione che vada a definire una funzione. Questa buona pratica incrementa la chiarezza del codice.

+ +

In ECMAScript 2015, let (const) non solleverà/sposterà la variabile all'inizio della dichiarazione del blocco, dunque un riferimento alla variabile nel blocco prima che questa venga dichiarata risulterà in un'eccezione di {{jsxref("ReferenceError")}}. La variabile si dice in una "zona temporale morta" ("temporal dead zone") dall'inizio del blocco fino alla a che non si incontri la sua dichiarazione.

+ +
console.log(x); // Solleverà un'eccezione ReferenceError
+let x = 3
+ +

Sollevamento delle Funzioni

+ +

Nel caso delle funzioni, solo la dichiarazione della funzione verrà spostata all'inizio. Se la funzione viene introdotta da un'espressione, in questo caso non verrà spostata.

+ +
/* Function declaration */
+
+foo(); // "bar"
+
+function foo() {
+  console.log("bar");
+}
+
+
+/* Function expression */
+
+baz(); // TypeError: baz is not a function
+
+var baz = function() {
+  console.log("bar2");
+};
+ +

Variabli globali

+ +

Le variabili globali sono in effetti proprietà dell'oggetto globale. Nelle pagine web l'oggetto globale è {{domxref("window")}} quindi è possibile impostare e accedere alle variabili globali usando la sintassi window.variabile.

+ +

Di conseguenza è possibile accedere a variabili globali dichiarate in una finestra o un frame da un'altra finestra o frame specificando il nome della finestra o del frame. Per esempio, se una variabile chiamata numeroDiTelefono è dichiarata in un documento, è possibile far riferimento a questa variabile dall'interno di un iframe come parent.numeroDiTelefono.

+ +

Costanti

+ +

È possibile creare una costante in sola lettura dandole un nome usando la parola chiave {{jsxref("Statements/const", "const")}}. La sintassi di un identificatore di costante è la stessa di un identificatore di variabile: deve iniziare con una lettera, trattino basso (_) o segno del dollaro ($) e può contenere caratteri alfabetici, numerici o trattini bassi.

+ +
const PI = 3.14;
+
+ +

Una costante non può cambiare il suo valore attraverso ulteriori assegnazioni o essere ridichiarata mentre lo script è in esecuzione. Deve anche essere inizializzata ad un valore.

+ +

Le regole di visibilità per le costanti sono le stesse di quelle per le variabil con visibilità al livello di blocco dichiarate con l'istruzione let. Se la parola chiave const viene omessa si assume che l'identificatore rappresenta una variabile.

+ +

Non è possibile dichiarare una costante con lo stesso nome di una funzione o di una variabile nello stesso spazio di visibilità. Per esempio:

+ +
// QUESTO CAUSERÀ UN ERRORE
+function f() {};
+const f = 5;
+
+// ANCHE QUESTO CAUSERÀ UN ERRORE
+function f() {
+  const g = 5;
+  var g;
+
+  //istruzioni
+}
+
+ +

Strutture dati e tipi

+ +

Tipi di dato

+ +

L'ultimo standard ECMAScript definisce sette tipi di dati:

+ +
    +
  • Sei tipi di dato che sono {{Glossary("Primitive", "primitives")}}: +
      +
    • {{Glossary("Boolean")}}. true e false.
      • +
    • {{Glossary("null")}}. Una parola chiave che denota un valore nullo. Siccome JavaScript è case-sensitive, null non è lo stesso di Null, NULL, o qualsiasi altra variante.
      • +
    • {{Glossary("undefined")}}. Una proprietà top-level il cui valore non è stato definito.
      • +
    • {{Glossary("Number")}}. 42 oppure 3.14159.
      • +
    • {{Glossary("String")}}. "Salve"
      • +
    • {{Glossary("Symbol")}} (nuovo in ECMAScript 2015). Un tipo di dato la cui istanza è unica e immutabile.
      • +
    +
    • +
  • e {{Glossary("Object")}}
    • +
+ +

Sebbene questi tipi di dati siano relativamente pochi questi permettono di eseguire funzioni utili nelle applicazioni. {{jsxref("Object", "Objects")}} e {{jsxref("Function", "functions")}} sono altri elementi fondamentali nel linguaggio. Si può pensatre agli oggetti come a contenitori con un nome per dei valori e alle funzioni come a procedure che l'applicazione può compiere.

+ +

Conversione dei tipi dei dati

+ +

JavaScript è un linguaggio con tipi assegnati dinamicamente. Questo significa che non si va a specificare il tipo di dato che una variabile conterrà quando viene dichiarata e anche che il tipo di un dato viene convertito automaticamente a seconda delle necessità durante l'esecuzione dello script. Così, per esempio, si può definire una variabile come segue:

+ +
var risposta = 42;
+
+ +

E più avanti è possibile assegnare alla stessa variabile un valore testo (stringa), per esempio:

+ +
risposta = "Grazie per tutti i pesci...";
+
+ +

Poiché in JavaScript i tipi si assegnano dinamicamente questa assegnazione non causerà un messaggio di errore.

+ +

Nelle espressioni che coinvolgono valori numerici e stringhe con l'operatore + JavaScript converte i valori numerici in stringhe. Per esempio si considerino le seguenti istruzioni:

+ +
x = "La risposta è " + 42 // "La risposta è 42"
+y = 42 + " è la risposta" // "42 è la risposta"
+
+ +

In istruzioni che coinvolgono altri operatori JavaScript non converte valori numerici in stringa. Per esempio:

+ +
"37" - 7 // 30
+"37" + 7 // "377"
+
+ +

Conversione delle stringhe in numeri

+ +

Nel caso in cui il valore che rappresenta un numero è memorizzato come stringa ci sono dei metodi per eseguire la conversione:

+ +
    +
  • {{jsxref("parseInt", "parseInt()")}}
    • +
  • {{jsxref("parseFloat", "parseFloat()")}}
    • +
+ +

parseInt ritornerà soltanto numeri interi,  ha una utilità ridotta per i numeri decimali. In aggiunta è buona pratica nell'uso di parseInt includere il parametro base, questo parametro è usato per specificare quale sistema di numerazione deve essere usato.

+ +

Un metodo alternativo per recuperare un numero da un testo è di usare l'operatore + (più unario):

+ +
"1.1" + "1.1" = "1.11.1"
+(+"1.1") + (+"1.1") = 2.2
+// Note: le parentesi sono aggiunte per chiarezza, non sono richieste.
+ +

Letterali

+ +

I letterali sono usati per rappresentare i valori in JavaScript. Questi sono valori fissati, non variabili, che venvono letteralmente inseriti nello script. Questa sezione descrive i seguenti tipi di letterali:

+ +
    +
  • {{anch("Letterali di array")}}
    • +
  • {{anch("Letterali di booleani")}}
    • +
  • {{anch("Letterali di numeri in virgola-mobile")}}
    • +
  • {{anch("Letterali di numeri Interi")}}
    • +
  • {{anch("Letterali di oggeti")}}
    • +
  • {{anch("Letterali di RegExp")}}
    • +
  • {{anch("Letterali di stringhe")}}
    • +
+ +

Letterali di array

+ +

Un letterale di array è un elenco di zero o più espressioni ognuna delle quali rappresenta un elemento dell'array, inclusa in parentesi quadre ([]). Quando si crea un array usando un letterale l'array stesso viene inizializzato con i valori specificati come elementi, la sua lunghezza è impostata al numero di elementi specificati.

+ +

Il seguente esempio crea un array tipiDiCaffe con tre elementi e una lunghezza di tre:

+ +
var tipiDiCaffe = ["French Roast", "Colombian", "Kona"];
+
+ +
+

Nota: Un letterale di array è un tipo di inizializzatore di oggetto. Vedi Usando inizializzatori di Oggetti.

+
+ +

Se un array viene creato usando un letterale in uno script top-level, JavaScript interpreta l'array ogni volta che valuta l'espressione che contiene l'array letterale. In aggiunta l'array letterale usato in una funzione viene creato ogni volta che la funzione viene chiamata.

+ +

Gli array letterali sono anche oggetti Array. Si veda {{jsxref("Array")}} e Collezione indicizzata per i dettagli sugli oggetti Array.

+ +

Virgole aggiuntive negli array letterali

+ +

Non è obbligatorio specificare tutti gli elementi in un array letterale. Mettendo due virgole in fila l'array viene creato con il valore undefined per gli elementi non specificati. Il seguente esempio crea l'array pesce:

+ +
var pesce = ["Leone", , "Angelo"];
+
+ +

Questo array ha due elementi con un valore e un elemento vuoto (pesce[0] is "Leone", pesce[1] è undefined, e pesce[2] è "Angelo").

+ +

Inserendo una virgola in fondo alla lista degli elementi la virgola stessa verrà ignorata. Nel seguente esempio la lunghezza dell'array è tre, non c'è un miaLista[3]. Tutte le altre virgole nell'elenco indicano un elemento nuovo.

+ +
+

Nota: Le virgole in coda possono creare errori nelle versioni più vecchie dei browser ed è buona pratica rimuoverle.

+
+ +
var miaLista = ['casa', , 'scuola', ];
+
+ +

Nel seguente esempio la lunghezza dell'array è quattro e miaLista[0] e mialista[2] sono mancanti.

+ +
var miaLista = [ , 'casa', , 'scuola'];
+
+ +

Nel seguente esempio la lunghezza dell'array è quattro e mialista[1] e miaLista[3] sono mancanti. Soltanto l'ultima virgola viene ignorata.

+ +
var miaLista = ['casa', , 'scuola', , ];
+
+ +

Comprendere il comportamento delle virgole in più è importante per comprendere JavaScript come linguaggio, in ogni caso nella scrittura del codice: è buona norma dichiarare esplicitamente gli elementi mancanti come undefined, questo migliorerà la chiarezza e la manutenibilità del codice.

+ +

Letterali di booleani

+ +

Il tipo Boolean ha due valori letterali: true e false.

+ +

Non vanno confusi i valori primitivi Booleani true e false con i valori true e false dell'oggetto Boolean. L'oggetto Boolean è un involucro intorno al tipo primitivo Booleano. Vedi {{jsxref("Global_Objects/Boolean", "Boolean")}} per maggiori informazioni.

+ +

Letterali di numeri Interi

+ +

Gli interi possono essere rappresentati in decimale (base 10), esadecimale (base 16), ottale (base 8) e binario (base 2).

+ +
    +
  • I letterali decimali interi sono formati da una sequenza di cifre senza uno 0 (zero) iniziale.
    • +
  • 0 (zero) iniziali in un letterale intero, o un iniziale 0o (o 0O) indicano che il numero è in ottale. Gli interi ottali possono includere soltanto le cifre 0-7.
    • +
  • Un iniziale 0x (o 0X) indica l'esadecimale. Interi esadecimali possono includere le cifre (0-9) e le lettere a-f e A-F.
    • +
  • +

    Un iniziale 0b (o 0B) indica il binario. Gli interi binari possono includere soltanto le cifre 0 e 1.

    +
    • +
+ +

Alcuni esempi i di letterali di interi sono:

+ +
0, 117 and -345 (decimale, base 10)
+015, 0001 and -0o77 (ottale, base 8)
+0x1123, 0x00111 and -0xF1A7 (esadecimale, "hex" o base 16)
+0b11, 0b0011 and -0b11 (binario, base 2)
+
+ +

Per maggiori informazioni, vedi Numeric literals in the Lexical grammar reference.

+ +

Letterali di numeri in virgola-mobile

+ +

Un letterale per un numero in virgola mobile può avere le seguenti parti:

+ +
    +
  • Un intero in base dieci che può avere un segno (cioè può essere preceduto da "+" o "-"),
    • +
  • Un punto decimale ("."),
    • +
  • Una parte decimale (un altro numero in base dieci),
    • +
  • Un esponente.
    • +
+ +

La parte esponente è una "e" o "E" seguita da un intero che può essere con segno (preceduto da "+" o "-"). Un numero in virgola mobile deve avere almeno una cifra e un punto oppure una "e" (o "E").

+ +

Più concisamente la sintassi è:

+ +
[(+|-)][cifre][.cifre][(E|e)[(+|-)]cifre]
+
+ +

Per esempio:

+ +
3.1415926
+-.123456789
+-3.1E+12
+.1e-23
+
+ +

Letterali di oggetti

+ +

Un letterale di un oggetto è una lista di zero o più coppie di nomi di proprietà e valori associati di un oggetto racchiusi in parentesi graffe ({}). Non andrebbe usato un letterale di un oggetto all'inizio di una istruzione, questo porterà ad un errore o non si comporterà come ci si aspetta perché { sarà interpretata come l'inizio di un blocco.

+ +

Quello seguente è un esempio di un letterale di un oggetto. Il primo elemento dell'oggetto automobile definisce un proprietà, miaAutomobile, e gli assegna il testo "Saturn"; il secondo elemento, la proprietà getAutomobile, è immediatamente assegnata al valore risultante dall'invocazione della funzione (tipiDiAutomobile("Honda")); il terzo elemento, la proprietà speciale, usa una variabile esistente (saldi).

+ +
var saldi = "Toyota";
+
+function tipiDiAutomobile(nome) {
+  if (nome === "Honda") {
+    return nome;
+  } else {
+    return "Spiacente, noi non vendiamo " + nome + ".";
+  }
+}
+
+var automobile = { miaAutomobile: "Saturn", getAutomobile: tipiDiAutomobile("Honda"), speciale: saldi };
+
+console.log(automobile.miaAutomobile);   // Saturn
+console.log(automobile.getAutomobile);  // Honda
+console.log(automobile.speciale); // Toyota
+
+ +

In aggiunta si possono usare letterali di tipo numerico o testo come nome di una proprietà o annidare un oggetto dentro un altro. Il seguente esempio usa queste opzioni.

+ +
var automobile = { molteAutomobili: {a: "Saab", "b": "Jeep"}, 7: "Mazda" };
+
+console.log(automobile.molteAutomobili.b); // Jeep
+console.log(automobile[7]); // Mazda
+
+ +

I nomi delle proprietà degli oggetti possono essere un testo qualsiasi, incluso il testo vuoto. Se il nome della proprietà non è un {{Glossary("Identifier","identifier")}} JavaScript valido o un numero dovrà essere racchiuso tra virgolette. I nomi di proprietà che non sono identificatori validi non possono neanche essere acceduti usando il punto (.), potranno però essere acceduti e impostati usando la notazione analoga a quella degli array ("[]").

+ +
var nomiDiProprietaInusuali = {
+  "": "Una stringa vuota",
+  "!": "Bang!"
+}
+console.log(nomiDiProprietaInusuali."");   // SyntaxError: Unexpected string
+console.log(nomiDiProprietaInusuali[""]);  // Una stringa vuota
+console.log(nomiDiProprietaInusuali.!);    // SyntaxError: Unexpected token !
+console.log(nomiDiProprietaInusuali["!"]); // Bang!
+ +

In ES2015, i letterali di oggetti sono estesi per supportare l'impostazione del prototipo al momento della costruzione, forme abbreviate per le assegnazioni tipo foo: foo, definizioni di metodi, eseguire chiamate a super e calcolare il nome di proprietà con espressioni. Nel'insieme queste aggiunte avvicinano i letterali di oggetti e le dichiarazioni delle classi permettendo quindi di beneficiare di alcune delle stesse comodità della progettazione orientata agli oggetti.

+ +
var obj = {
+    // __proto__
+    __proto__: theProtoObj,
+    // Abbreviazione per ‘handler: handler’
+    handler,
+    // Metodi
+    toString() {
+     // Super calls
+     return "d " + super.toString();
+    },
+    // Nomi di proprietà calcolati (dinamici)
+    [ 'prop_' + (() => 42)() ]: 42
+};
+ +

Nota che:

+ +
var foo = {a: "alpha", 2: "two"};
+console.log(foo.a);    // alpha
+console.log(foo[2]);   // two
+//console.log(foo.2);  // Error: missing ) after argument list
+//console.log(foo[a]); // Error: a is not defined
+console.log(foo["a"]); // alpha
+console.log(foo["2"]); // two
+
+ +

Letterali di RegExp

+ +

Un letterale di espressione regolare (RegExp) è un modello (pattern) racchiuso tra barre. il seguente è un esempio di un letterale di una espressione regolare.

+ +
var re = /ab+c/;
+ +

Letterali di stringhe

+ +

Un letterale di testo (stringa nel preguo del testo) è formato da zero o più caratteri racchiusi tra virgolette doppie  (") o singole (').  Una stringa deve essere delimitata da virgolette dello stesso tipo; cioè o entrambe singole o entrambe doppie. I seguenti sono esempi di leterali di testo:

+ +
"foo"
+'bar'
+"1234"
+"una linea \n altra linea"
+"prima dell'una"
+
+ +

È possibile chiamare qualsiasi metodo dell'oggetto String su una stringa —JavaScript converte automaticamente la stringa in un oggetto temporaneo di tipo String, chiama il metodo, poi elimina l'oggetto temporaneo. È anche possibile usare la proprietà String.length con una stringa letterale:

+ +
console.log("John's cat".length)
+// Stamperà il numero di simboli nel testo inclusi gli spazi.
+// In questo caso 10.
+
+ +

In ES2015 sono disponibili i letterali modello. I letterali modello sono racchiusi tra accenti gravi (` `)  (accento grave) anziché apici doppi o singoli. Le stringhe modello fornisco dello "zucchero sintattico" per la costruzione delle stringhe. È simile all'interpolazione delle stringhe di Perl, Python e altri. Opzionalmente, un'etichetta può essere aggiunta per permettere la personalizzazione nella costruzione della stringa, evitare gli attacchi per injection o costruire strutture dati di livello più alto dal contenuto di una stringa.

+ +
// Creazione di un letterale string di base
+`In JavaScript '\n' is a line-feed.`
+
+// Stringa multilinea
+`In JavaScript this is
+ not legal.`
+
+// Interpolazione di stringhe
+var name = "Bob", time = "today";
+`Hello ${name}, how are you ${time}?`
+
+// La costruzione di un prefisso di richiesta HTTP è usata per interpretare le sostituzioni e le costruzioni
+POST`http://foo.org/bar?a=${a}&b=${b}
+     Content-Type: application/json
+     X-Credentials: ${credentials}
+     { "foo": ${foo},
+       "bar": ${bar}}`(myOnReadyStateChangeHandler);
+ +

Si dovrebbero usare i letterali stringa a meno che non ci sia specifico bisogno di usare un oggetto String. Si veda {{jsxref("String")}} per dettagli sull'oggetto String.

+ +

Uso di caratteri speciali nelle stringhe

+ +

Oltre ai caratteri ordinari si possono includere anche dei caratteri speciali nelle stringhe come mostrato nel seguente esempio.

+ +
"prima linea \n seconda linea"
+
+ +

La seguente tabella elenca i caratteri speciali che possono essere usati nelle stringhe JavaScript.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Table: JavaScript caratteri speciali
CarattereSignificato
\0Byte null
\bBackspace
\fForm feed
\nNew line
\rCarriage return
\tTab
\vTab verticale
\'Apostrofo o virgoletta singola
\"Virgoletta doppia
\\Il carattere backslash
\XXXIl carattere con la codifica Latin-1 specificata da fino a tre caratteri XXX tra 0 e 377. Per esempio \251 è la sequenza ottale per il simbolo di copyright.
\xXXIl carattere con la codifica Latin-1 specificata da due cifre esadecimali XX comprese tra 00 e FF. Per esempio \xA9 è la sequenza ottale per il simbolo di copyright.
\uXXXXIl carattere Unicode specificato da quattro cifre esadecimali XXXX. Per esempio \u00A9 è la sequenza Unicode per il simbolo di copyright. Vedi Unicode escape sequences.
\u{XXXXX}Escape per Unicode code point. Per esempio \u{2F804} è la stessa cosa dell'esape semplice Unicode \uD87E\uDC04.
+ +

Caratteri a cui aggiungere il backslash (Escaping)

+ +

Per i caratteri non elencati nella tabella un backslash (\) prefisso viene ignorato, questo uso è deprecato e devrebbe essere evitato.

+ +

Le virgolette possono essere inserite in una stringa precedendole da un backslash. Questo è noto come escaping delle virgolette. Per esempio:

+ +
var quote = "Lui legge \"The Cremation of Sam McGee\" by R.W. Service.";
+console.log(quote);
+
+ +

Il risultato sarebbe:

+ +
Lui legge "The Cremation of Sam McGee" by R.W. Service.
+
+ +

Per includere un backslash in una stringa va fatto l'esape del carattere backslash. Per esempio, per assegnare il percorso c:\temp ad una stringa, usare il seguente:

+ +
var home = "c:\\temp";
+
+ +

Si può anche fare l'escape delle interruzioni di linea precedendole con un backslash. Sia il backslash che l'interruzione di linea saranno rimosse dal valore della stringa.

+ +
var str = "questa stringa \
+è spezzata \
+attraverso multiple\
+linee."
+console.log(str);   // questa stringa è spezzata attraverso multiple linee.
+
+ +

Sebbene JavaScript non abbia una sintassi tipo "heredoc", è possibile fare qualcosa di simile aggiungendo una sequenza di escape per "a capo" e facendo l'escape dell'a capo alla fine della linea:

+ +
var poem =
+"Roses are red,\n\
+Violets are blue.\n\
+I'm schizophrenic,\n\
+And so am I."
+
+ +

Ulteriori informazioni

+ +

Questo capitolo si concentra sulla sintassi di base per i tipi e le dichiarazioni. Per imparare di più riguardo i costrutti del linguaggio JavaScript vedi anche i seguenti capitoli in questa guida:

+ + + +

Nel prossimo capitolo, tratteremo i costrutti del controllo del flusso e la gestione degli errori.

+ +

{{PreviousNext("Web/JavaScript/Guide/Introduction", "Web/JavaScript/Guide/Control_flow_and_error_handling")}}

diff --git a/files/it/web/javascript/guide/index.html b/files/it/web/javascript/guide/index.html new file mode 100644 index 0000000000..ba956f21f2 --- /dev/null +++ b/files/it/web/javascript/guide/index.html @@ -0,0 +1,124 @@ +--- +title: JavaScript Guide +slug: Web/JavaScript/Guida +tags: + - AJAX + - JavaScript + - JavaScript_Guide + - NeedsTranslation + - TopicStub +translation_of: Web/JavaScript/Guide +--- +
{{jsSidebar("JavaScript Guide")}}
+ +

La Guida JavaScript mostra come utilizzare JavaScript e offre una panoramica del linguaggio. Se hai bisogno di informazioni esaustive su una sua funzione, dai un'occhiata alle reference JavaScript.

+ +

Capitoli

+ +

Questa guida è divisa in vari capitoli:

+ + + + + + + + + +

{{Next("Web/JavaScript/Guide/Introduction")}}

diff --git a/files/it/web/javascript/guide/introduction/index.html b/files/it/web/javascript/guide/introduction/index.html new file mode 100644 index 0000000000..3825ded91c --- /dev/null +++ b/files/it/web/javascript/guide/introduction/index.html @@ -0,0 +1,140 @@ +--- +title: Introduzione +slug: Web/JavaScript/Guida/Introduzione +tags: + - Guida + - JavaScript +translation_of: Web/JavaScript/Guide/Introduction +--- +
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}}
+ +

Questo capitolo introduce JavaScript e discute alcuni dei suoi concetti fondamentali.

+ +

Che cosa dovresti già sapere

+ +

Questa guida parte dal presupposto che tu abbia già queste nozioni di base:

+ +
    +
  • Una comprensione generica di Internet e del World Wide Web ({{Glossary("WWW")}}).
    • +
  • Una buona conoscenza operativa del HyperText Markup Language ({{Glossary("HTML")}}).
    • +
  • Un po' di esperienza di programmazione. Se sei nuovo della programmazione, prova uno dei tutorials linkati nella pagina principale di JavaScript.
    • +
+ +

Dove trovare informazioni su JavaScript

+ +

La documentazione JavaScript su MDN comprende:

+ +
    +
  • Capire il web fornisce informazioni per i principianti ed introduce i concetti base della programmazione e di Internet.
    • +
  • Guida JavaScript (questa guida) fornisce una panoramica su JavaScript ed i suoi oggetti.
    • +
  • Riferimento JavaScript fornisce materiale di riferimento dettagliato su JavaScript.
    • +
+ +

Se sei nuovo di JavaScript, inizia con gli articoli presenti in Capire il web e nella  Guida JavaScript. Quando avrai una chiara comprensione dei fondamentali, potrai usare il  Riferimento JavaScript per apprendere maggiori dettagli su singoli oggetti e parti del linguaggio.

+ +

Che cos'è JavaScript?

+ +

JavaScript è un linguaggio di scripting cross-platform e object-oriented. È un linguaggio piccolo e leggero. All interno di un ambiente ospite (ad esempio un web browser), JavaScript può essere connesso agli oggetti del suo ambiente per fornire controllo programmatico su di essi.

+ +

JavaScript contiene una libreria standard di oggetti come Array, Date e Math, ed una serie di elementi base del linguaggio come operatori, strutture di controllo e dichiarazioni. La base di JavaScript può essere estesa per una varietà di scopi fornendogli oggetti aggiuntivi; ad esempio:

+ +
    +
  • Client-side JavaScript estende il linguaggio base fornendo oggetti per controllare il browser ed il suo Document Object Model (DOM). Per esempio, le estensioni client-side permettono ad una applicazione di inserire elementi in un form HTML e rispondere ad eventi dell'utente come il click del mouse, input nei form e navigazione delle pagine.
    • +
  • Server-side JavaScript estende il linguaggio base fornendo oggetti rilevanti per eseguire JavaScript in un server. Per esempio le estensioni server-side consentono ad una applicazione di comunicare con un database, forniscono continuità di informazioni da una chiamata ad un altra dell'applicazione, o permettono la manipolazione di files nel server.
    • +
+ +

JavaScript e Java

+ +

JavaScript e Java sono simili per certi aspetti, ma fondamentalmente diversi per altri. Il linguaggio JavaScript assomiglia a Java ma non ha la tipizzazione statica ed il controllo forte dei tipi di Java. JavaScript segue larga parte della sintassi delle espressioni di Java, la convenzione sui nomi ed i principali costrutti di controllo di flusso, e questa è la ragione per cui è stato rinominato da LiveScript a JavaScript.
+ A differenza del sistema di classi costruito dalle dichiarazione a tempo di compilazione di Java, JavaScript supporta un sistema runtime basato su un piccolo numero di tipi di dato che rappresentano valori Booleani, numerici e di tipo stringa. JavaScript dispone di un modello ad oggetti basato su prototype al posto del più comune modello ad oggetti basato su classi. Il modello prototype-based fornisce ereditarietà dinamica; che significa che ciò che viene ereditato può variare per singoli oggetti. JavaScript inoltre supporta funzioni senza speciali requisiti dichiarativi. Le funzioni possono essere proprietà di oggetti, eseguite come metodi debolmente tipizzati.

+ +

JavaScript è un linguaggio con un formalismo molto libero se confrontato a Java. Non è necessario dichiarare tutte le variabili, classi e metodi. Non ci si deve preoccupare se i metodi sono public, privare e protected, e non è necessario implementare interfacce. Variabili, parametri e valori di ritorno delle funzioni non sono tipizzati in modo esplicito.

+ +

Java è un linguaggio di programmazione basato su classi progettato per essere veloce e con un controllo dei tipi rigoroso. Con controllo dei tipi rigoroso si intende per esempio, che non è possibile forzare un intero Java in un riferimento ad oggetto o accedere alla memoria privata corrompendo i bytecodes Java. Il modello basato sulle classi di Java significa che i programmi sono composti esclusivamente da classi con i propri metodi. L'ereditarietà delle classi di Java e la tipizzazione forte di solito richiedono gerarchie di oggetti strettamente definite. Questi requisiti rendono la programmazione di Java più complessa rispetto alla programmazione di JavaScript.

+ +

D'altra parte, JavaScript si ispira ad una linea di linguaggi più piccoli, tipizzati dinamicamente come HyperTalk e dBASE. Questi linguaggi di scripting offrono strumenti di programmazione ad un pubblico più vasto grazie alla loro sintassi più facile, alle funzionalità specializzate predefinite nel linguaggio, ed ai minimi requisiti per la creazione di oggetti.

+ + + + + + + + + + + + + + + + + + + + + + + +
JavaScript confrontato con Java
JavaScriptJava
+

Orientato ad oggetti. Non c'è distinzione tra tipi di oggetti. Ereditarietà con il meccanismo dei prototype e le proprietà ed i metodi possono essere aggiunti ad ogni oggetto dinamicamente.

+ 		+

Basato su classi. Gli oggetti vengono distinti in classi ed istanze con tutta l'ereditarietà costruita con lagerarchia delle classi. Classi ed istanze non possono avere proprietà o metodi aggiunti dinamicamente.

+
Le variabili ed i tipi non sono dichiarati (tipizzazione dinamica).Le variabili ed i tipi di dato devono essere dichiarati (tipizzazione statica).
Non si può scrivere automaticamente suk disco fisso.Si può scrivere automaticamente su disco fisso.
+ +

Per maggiori informazioni sulle differenze tra JavaScript e Java, vedi il capitolo Dettagli sul modello ad oggetti.

+ +

JavaScript e le specifiche ECMAScript

+ +

JavaScript è standardizzato da Ecma International — l'associazione Europea per la standardizzazione dei sisteni di comunicazione ed informazione (ECMA è l'acronimo di European Computer Manufacturers Association) per distribuire linguaggio di programmazione standardizzato ed internazionale basato su JavaScript. Questa versione standardizzata di JavaScript, chiamata ECMAScript, si comporta alla stesso modo in tutte le applicazioni che supportano lo standard. Le aziende possono usare il linguaggo standard aperto per svilupare le proprie implementazioni di JavaScript. Lo standard ECMAScript è documentato nelle specifiche ECMA-262. Consulta Novità in JavaScript per conoscere di più sulle differenti versioni di JavaScript e delle edizioni delle specifiche ECMAScript.

+ +

Lo standard ECMA-262 è anche approvato da ISO (International Organization for Standardization) come ISO-16262. Si possono trovare le specifiche nel sito Ecma internazionale. Le specifiche ECMAScript non descrivono il Document Object Model (DOM), che viene standardizzato dal World Wide Web Consortium (W3C). Il DOM definisce il modo in cui gli oggetti di un documento HTML vengono esposti al tuo script. Per farti un'idea migliore sulle differenti tecnologie che si usano quando si programma con JavaScript, consulta l'articolo Panoramicha delle tecnologie JavaScript.

+ +

Documentazione JavaScript a confronto con le specifiche ECMAScript

+ +

Le specifiche ECMAScript sono una serie di requisiti per implementare ECMAScript; sono utili per chi desidera implementare funzionalità compatibili con lo standard del linguaggio nella propria implementazione di ECMAScript (come SpiderMonkey in Firefox, o v8 in Chrome).

+ +

La documentazione ECMAScript non è indirizzata ad aiutare i programmatori di script; usa la documentazione di JavaScript per informazioni su come scrivere script.

+ +

Le specifiche ECMAScript usano terminologie e sintassi che possono risultare non  familiari ai programmatori JavaScript Sebbene la descrizione del linguaggio possa essere diversa in ECMAScript, il linguaggio in se rimane lo stesso. JavaScript supporta tutte le funzionalità descritte nelle specifiche ECMAScript.

+ +

La documentazione JavaScript descrive aspetti del linguaggio che sono appropriati per il programmatore JavaScript.

+ +

Iniziare con JavaScript

+ +

Iniziare con JavaScript è facile: la sola cosa che serve è un Web browser moderno. Questa guida include alcune funzionalità di JavaScript che sono attualmente disponibili solo nell'ultima versione di Firefox, per questo raccomandiamo di usare la versione più recente di Firefox.

+ +

In Firefox sono presenti due strumenti che sono utili per sperimentare con JavaScript: la Console Web ed il Blocco per gli appunti.

+ +

La Console Web

+ +

La Console Web espone informazioni sulla pagina Web attualmente caricata, ed include una command line che si può usare per eseguire espressioni nella pagina corrente.

+ +

Per aprire la Console Web (Ctrl+Shift+K), scegli "Console web" dal menu "Sviluppo web", che si trova nel menu "Strumenti" di Firefox. Essa appare sotto la finestra del browser. Alla fine della console è presente la linea di comando che si può usare per inserire comandi JavaScript ed il risultato compare nel pannello soprastante:

+ +

+ +

Blocco per gli appunti

+ +

La Console Web è magnifica per eseguire singole linee di JavaScript, ma sebbene si possano eseguire linee multiple, non è molto comoda per questo e non è possibile salvare i propri esempi di codice con la Console Web. Quindi per esempi più complessi di codice il Blocco per gli appunti è uno strumento migliore.

+ +

Per aprire il Blocco per gli appunti (Shift+F4), scegli "Blocco per gli appunti" dal menu "Sviluppo web", che si trova nel menu "Strumenti" di Firefox. Si apre in una finestra separata ed un editor che puoi usare per scrivere ed eseguire JavaScript nel browser. Si possono anche salvare scripts nel disco e caricare scripts salvati.

+ +

+ +

Hello world

+ +

Per iniziare a scrivere programmi JavaScript, apri il Blocco per gli appunti e scrivi il tuo primo codice "Hello world" JavaScript:

+ +
function greetMe(yourName) {
+  alert("Hello " + yourName);
+}
+
+greetMe("World");
+
+ +

Seleziona il codice nel blocco e premi Ctrl+R per vedere il risultato nel browser!

+ +

Nelle prossime pagine, questa guida ti itrodurra alla sintassi di JavaScript ed alle caratteristiche del linguaggio, in questo modo sarai in grado di scrivere applicazioni più complesse.

+ +

{{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}}

diff --git a/files/it/web/javascript/guide/iterators_and_generators/index.html b/files/it/web/javascript/guide/iterators_and_generators/index.html new file mode 100644 index 0000000000..49b220cdd1 --- /dev/null +++ b/files/it/web/javascript/guide/iterators_and_generators/index.html @@ -0,0 +1,162 @@ +--- +title: Iteratori e generatori +slug: Web/JavaScript/Guida/Iteratori_e_generatori +translation_of: Web/JavaScript/Guide/Iterators_and_Generators +--- +
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Details_of_the_Object_Model", "Web/JavaScript/Guide/Meta_programming")}}
+ +

Processare ognuno degli elementi in una collezione è un'operazione molto comune. JavaScript fornisce tutta una serie di costrutti per iterare una collezione di elementi, dai semplici cicli {{jsxref("Statements/for","for")}} a {{jsxref("Global_Objects/Array/map","map()")}} e {{jsxref("Global_Objects/Array/filter","filter()")}}. Iterators e Generators portano il concetto di iterazione direttamente al cuore del linguaggio e forniscono un meccanismo per personalizzare i cicli {{jsxref("Statements/for...of","for...of")}}.

+ +

Per maggiori dettagli, vedi anche:

+ +
    +
  • Iteration protocols
    • +
  • {{jsxref("Statements/for...of","for...of")}}
    • +
  • {{jsxref("Statements/function*","function*")}} e {{jsxref("Generator")}}
    • +
  • {{jsxref("Operators/yield","yield")}} e {{jsxref("Operators/yield*","yield*")}}
    • +
+ +

Iterators

+ +

Un oggetto è un iterator quando sa come accedere agli elementi di una collezione uno per volta, conservando l'informazione sulla sua posizione corrente nella sequenza. In Javascript un iterator è un oggetto che implementa il metodo next() , il quale ritorna l'elemento successivo della sequenza. Questo metodo ritorna un oggetto con due proprietà: done evalue.

+ +

Una volta che è stato creato, un iterator può essere utlizzato esplicitamente chiamando più volte il metodo next().

+ +
function makeIterator(array) {
+    var nextIndex = 0;
+
+    return {
+       next: function() {
+           return nextIndex < array.length ?
+               {value: array[nextIndex++], done: false} :
+               {done: true};
+       }
+    };
+}
+ +

Una volta che un iterator è stato inizializzato, il metodonext() può essere chiamato per accedere a coppie chiave-valore dall'oggetto ritornato:

+ +
var it = makeIterator(['yo', 'ya']);
+console.log(it.next().value); // 'yo'
+console.log(it.next().value); // 'ya'
+console.log(it.next().done);  // true
+ +

Generators

+ +

Nonostante implementare un iterator possa essere utile, richiede una considerevole attenzione nella programmazione a causa del bisogno esplicito di mantenere lo stato interno dell'iteratore. I {{jsxref("Global_Objects/Generator","Generators","","true")}} forniscono una potente alternativa: ti permettono di definire un algoritmo iterativo scrivendo una singola funzione in grado di mantenere il proprio stato.

+ +

Una GeneratorFunction è uno speciale tipo di funzione che opera come una "fabbrica" di iterators. Quando viene eseguita ritorna un nuovo oggetto Generator. Una funzione diventa una GeneratorFunction se usa la sintassi {{jsxref("Statements/function*","function*")}}.

+ +
function* idMaker() {
+  var index = 0;
+  while(true)
+    yield index++;
+}
+
+var gen = idMaker();
+
+console.log(gen.next().value); // 0
+console.log(gen.next().value); // 1
+console.log(gen.next().value); // 2
+// ...
+ +

Iterables

+ +

Un oggetto è un iterable se definisce un comportamento di iterazione, come per esempio quali valori sono considerati in un costrutto {{jsxref("Statements/for...of", "for...of")}}. Alcuni tipi built-in di Javascript (come {{jsxref("Array")}} o {{jsxref("Map")}}) hanno un comportamento predefinito, mentre altri tipi (come {{jsxref("Object")}}) non ce l'hanno.

+ +

Affinché un oggetto possa essere considerato un iterable deve implementare il metodo @@iterator, cioè l'oggetto (o uno degli oggetti che lo precedono nella catena dei prototipi) deve avere una proprietà con una chiave {{jsxref("Symbol.iterator")}}.

+ +

Iterables definiti dall'utente

+ +

Possiamo creare i nostri iterables in questo modo:

+ +
var myIterable = {};
+myIterable[Symbol.iterator] = function* () {
+    yield 1;
+    yield 2;
+    yield 3;
+};
+
+for (let value of myIterable) {
+    console.log(value);
+}
+// 1
+// 2
+// 3
+
+or
+
+[...myIterable]; // [1, 2, 3]
+
+ +

Iterables Built-in

+ +

{{jsxref("String")}}, {{jsxref("Array")}}, {{jsxref("TypedArray")}}, {{jsxref("Map")}} e {{jsxref("Set")}} sono tutti iterables built-in nel linguaggio, perché i loro oggetti prototipi hanno tutti un metodo {{jsxref("Symbol.iterator")}}.

+ +

Sintassi che si aspettano degli iterables

+ +

Alcuni costrutti ed espressioni si aspettano degli iterables, per esempio il ciclo {{jsxref("Statements/for...of","for-of")}}, la {{jsxref("Operators/Spread_operator","sintassi spread","","true")}}, {{jsxref("Operators/yield*","yield*")}}, e l'{{jsxref("Operators/Destructuring_assignment","assegnamento di destrutturazione","","true")}}.

+ +
for (let value of ['a', 'b', 'c']) {
+    console.log(value);
+}
+// "a"
+// "b"
+// "c"
+
+[...'abc']; // ["a", "b", "c"]
+
+function* gen() {
+  yield* ['a', 'b', 'c'];
+}
+
+gen().next(); // { value: "a", done: false }
+
+[a, b, c] = new Set(['a', 'b', 'c']);
+a; // "a"
+
+
+ +

Generators avanzati

+ +

I generators calcolano i loro valori solo quando vengono effettivamente richiesti, il che gli permette di rappresentare sequenze che sono troppo onerose da calcolare, o perfino sequenze infinite, come nella funzione idMaker().

+ +

Il metodo {{jsxref("Global_Objects/Generator/next","next()")}} accetta anche un valore che può essere utilizzato per modificare lo stato interno di un generatore. Un valore passato a next() sarà trattato come il risultato dell'ultima espressione yield che ha messo in pausa il generator.

+ +

Ecco un generator che produce una sequenza di numeri di Fibonacci. In questo generator il metodonext(x) può essere utilizzato per reinizializzare la sequenza:

+ +
function* fibonacci() {
+  var fn1 = 0;
+  var fn2 = 1;
+  while (true) {
+    var current = fn1;
+    fn1 = fn2;
+    fn2 = current + fn1;
+    var reset = yield current;
+    if (reset) {
+        fn1 = 0;
+        fn2 = 1;
+    }
+  }
+}
+
+var sequence = fibonacci();
+console.log(sequence.next().value);     // 0
+console.log(sequence.next().value);     // 1
+console.log(sequence.next().value);     // 1
+console.log(sequence.next().value);     // 2
+console.log(sequence.next().value);     // 3
+console.log(sequence.next().value);     // 5
+console.log(sequence.next().value);     // 8
+console.log(sequence.next(true).value); // 0
+console.log(sequence.next().value);     // 1
+console.log(sequence.next().value);     // 1
+console.log(sequence.next().value);     // 2
+ +

Puoi forzare un generator a lanciare una eccezione chiamando il suo metodo {{jsxref("Global_Objects/Generator/throw","throw()")}} e passandogli il valore che dovrebbe lanciare. Questa eccezione sarà lanciata dal corrente context sospeso del generator, come se lo yield che è attualmente sospeso fosse invece una dichiarazione throw value.

+ +

Se non si incontra uno yield durante la risoluzione della eccezione lanciata, allora l'eccezione si propagherà fino alla chiamata athrow(), e in tutte le successive chiamate a next() la proprietà done saràtrue.

+ +

I generators hanno un metodo {{jsxref("Global_Objects/Generator/return","return(value)")}} che ritorna un valore e termina il generator stesso.

+ +

{{PreviousNext("Web/JavaScript/Guide/Details_of_the_Object_Model", "Web/JavaScript/Guide/Meta_programming")}}

diff --git a/files/it/web/javascript/guide/loops_and_iteration/index.html b/files/it/web/javascript/guide/loops_and_iteration/index.html new file mode 100644 index 0000000000..c677151181 --- /dev/null +++ b/files/it/web/javascript/guide/loops_and_iteration/index.html @@ -0,0 +1,340 @@ +--- +title: Cicli e iterazioni +slug: Web/JavaScript/Guida/Loops_and_iteration +tags: + - Guide + - JavaScript + - Loop + - Sintassi +translation_of: Web/JavaScript/Guide/Loops_and_iteration +--- +
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}
+ +

I cicli offrono un modo semplice e rapido per fare cose ripetutamente. Questo capitolo della guida al JavaScript introduce i diversi metodi di iterazione disponibili in JavaScript.

+ +

Si può pensare al loop come ad una versione computerizzata di un gioco dove si dice a qualcuno di andare X passi in una direzione e Y passi in un'atra; per esempio "vai 5 passi a est" può essere espresso in questo modo con un loop:

+ +
var passi;
+for (passi = 0; passi < 5; passi++) {
+  // Viene eseguito 5 volte, con un valore di passi che va da 0 a 4.
+  console.log('Fai un passo verso est');
+}
+
+ +

Ci sono differenti tipi di ciclo, ma sono essenzialmente tutti la stessa cosa: ripetono un'azione o un insieme di azioni un certo numero di volte (è possibile che questo numero sia anche 0).

+ +

I diversi meccanismi di ciclo offrono differenti modi di determinare l'inizio e la fine del ciclo. Ci sono casi che si prestano più ad un tipo di ciclo rispetto ad altri.

+ +

Le istruzioni per i loop foriti in JavaScript sono:

+ +
    +
  • {{anch("ciclo for")}}
    • +
  • {{anch("ciclo do...while")}}
    • +
  • {{anch("ciclo while")}}
    • +
  • {{anch("labeled statement")}}
    • +
  • {{anch("break statement")}}
    • +
  • {{anch("continue statement")}}
    • +
  • {{anch("ciclo for...in")}}
    • +
  • {{anch("ciclo for...of")}}
    • +
+ +

Istruzione for

+ +

Il {{jsxref("statements/for","ciclo for")}} continua finché la condizione valutata non è falsa. Il fir loop JavaScript è simile a quello del Java e de C. L'istruzione for è definita come segue:

+ +
for ([espressioneIniziale]; [condizione]; [incremento])
+  istruzione
+
+ +

Quando viene eseguito un ciclo for, questo è ciò che accade:

+ +
    +
  1. espressioneIniziale, se esiste, viene eseguita. L'espressione di solito inizializza uno o più indici, ma la sintassi permette di scrivere espressioni con diversi gradi di compessità. Questa espressione può anche dichiarare delle variabili.
    2. +
  2. La condizione viene verificata. Se il suo valore è true, l'espressione istruzione viene eseguita. Se invece condizione è false, il ciclo finisce. Se condizione è omessa, l'espressione si assume sia true.
    3. +
  3. istruzione viene esguita. Per eseguire diverse istruzioni, è necessario usare il blocco ({ ... }) per raggrupparle.
    4. +
  4. Viene incrementata la l'espressione incremento, se esiste, eseguita, e il ciclo for va al passo successivo.
    5. +
+ +

Esempio

+ +

Il seguente esempio contiene un ciclo for che conta il numero di opzioni selezionate in una lista a scorrimento (a {{HTMLElement("select")}} che permette selezioni multiple). L'istruzione for dichiara una variabile i e la inizializza a zero. Controlla che i sia minore del numero di opzioni dell'elemento <select> , esegue l'istruzione if e incrementa i di uno alla fine di ogni ciclo.

+ +
<form name="selectForm">
+  <p>
+    <label for="musicTypes">Choose some music types, then click the button below:</label>
+    <select id="musicTypes" name="musicTypes" multiple="multiple">
+      <option selected="selected">R&B</option>
+      <option>Jazz</option>
+      <option>Blues</option>
+      <option>New Age</option>
+      <option>Classical</option>
+      <option>Opera</option>
+    </select>
+  </p>
+  <p><input id="btn" type="button" value="Quanti sono selezionati?" /></p>
+</form>
+
+<script>
+function howMany(selectObject) {
+  var numberSelected = 0;
+  for (var i = 0; i < selectObject.options.length; i++) {
+    if (selectObject.options[i].selected) {
+      numberSelected++;
+    }
+  }
+  return numberSelected;
+}
+
+var btn = document.getElementById("btn");
+btn.addEventListener("click", function(){
+  alert('Number of options selected: ' + howMany(document.selectForm.musicTypes))
+});
+</script>
+
+
+ +

Istruzione do...while

+ +

Il ciclo {{jsxref("statements/do...while", "do...while")}} si ripete finché la condizione non è falsa. Il do...while è viene definito come segue:

+ +
do
+  istruzione
+while (condizione);
+
+ +

l'istruzione viene eseguita una volta prima che la condizione venga controllata. Per eseguire più istruzioni, è necessario usare il blocco ({ ... }) . Se la condizione è vera l'istruzione viene eseguita nuovamente. Alla fine di ogni esecuzione di istruzione, condizione viene controllata. Quando condizione è falsa l'esecuzione del ciclo do..while termina.

+ +

Esempio

+ +

Nel seguente esempio il ciclo do..while itera almeno una volta e continua finché il valore di i è minore di 5.

+ +
var i = 0;
+do {
+  i += 1;
+  console.log(i);
+} while (i < 5);
+ +

Istruzione while

+ +

Il ciclo {{jsxref("statements/while","while")}} esegue un'istruzione fino a quando una condizione è true. Ecco un esempio si un ciclo while:

+ +
while (condizione)
+  istruzione   //...statement
+
+ +

Se condizione diventa false, istruzione non viene eseguita a si passa ad eseguire i comandi successivi.

+ +

Durante il ciclo condizione viene testata prima di eseguire istruzione. Se condizione è true, istruzione viene esguita e condizione viene verificata nuovamente. Se condizione è false il ciclo di ferma e viene eseguito il codice successivo al ciclo while.

+ +

Per eseguire istruzioni multiple, è necessario usare il blocco ({ ... }) così da raggruppare le istruzioni.

+ +

Esempio 1

+ +

Il seguente esempio di ciclo while si ripete fino a quando n è minore di tre:

+ +
var n = 0;
+var x = 0;
+while (n < 3) {
+  n++;
+  x += n;
+}
+
+ +

Ad ogni iterazione, il ciclo incrementa n e aggiunge quel valore a x. Pertanto,x e n assumono i seguenti valori:

+ +
    +
  • Dopo il primo passaggio: n = 1 and x = 1
    • +
  • Dopo il secondo passaggio: n = 2 and x = 3
    • +
  • Dopo il terzo passaggio: n = 3 and x = 6
    • +
+ +

Dopo aver completato il terzo passaggio, la condizione n < 3 non è più vera, quindi il ciclo termina.

+ +

Esempio 2

+ +

Evita loop infiniti. Assicurati che la condizione in un loop alla fine diventi falsa; altrimenti, il ciclo non terminerà mai. Le istruzioni nel seguente ciclo while vengono eseguite per sempre perché la condizione non diventa mai falsa:

+ +
+
//I loop infiniti non vanno affatto bene
+while (true) {
+  console.log("Buongiorno, Mondo");
+}
+
+ +

Istruzione "etichettata"

+ +

Un {{jsxref("statements/label","label")}} fornisce un'istruzione con un identificatore che ti consente di fare riferimento ad esso altrove nel tuo programma. Ad esempio, è possibile utilizzare un'etichetta per identificare un ciclo e quindi utilizzare le istruzioni break o continue per indicare se un programma deve interrompere il loop o continuare la sua esecuzione.

+ +

La sintassi dell'istruzione etichettata è simile alla seguente:

+ +
label :
+   istruzione // statement
+
+ +

Il valore dell'etichetta label può essere qualsiasi identificatore JavaScript che non sia una parola riservata. L'affermazione che ti identifichi con un'etichetta statement può essere una qualsiasi affermazione.

+ +

Esempio

+ +

In questo esempio, la label markLoop identifica un ciclo while.

+ +
markLoop:
+while (theMark == true) {
+   doSomething();
+}
+ +

Istruzione break

+ +

Utilizzare l'istruzione {{jsxref("statements/break","break")}} per terminare un ciclo, uno switch o in congiunzione con un'istruzione etichettata.

+ +
    +
  • Quando si utilizza break senza un'etichetta, termina l'enclosure più interno while, do-while, for, o switch immediatamente e trasferisce il controllo alla seguente istruzione.
    • +
  • Quando usi la break con un'etichetta, termina l'istruzione etichettata specificata.
    • +
+ +

La sintassi dell'istruzione break è simile a questa:

+ +
break [label];
+
+ +

La prima forma della sintassi termina il ciclo switch di chiusura più interno; la seconda forma della sintassi termina l'istruzione dell'etichettata specificata.

+ +

Esempio 1

+ +

L'esempio seguente esegue iterazioni attraverso gli elementi di un array (una matrice) fino a quando non trova l'indice di un elemento il cui valore è theValue:

+ +
for (var i = 0; i < a.length; i++) {
+  if (a[i] == theValue) {
+    break;
+  }
+}
+ +

Esempio 2: Breaking to a label - Interruzione su un'etichetta

+ +
var x = 0;
+var z = 0;
+labelCancelLoops: while (true) {
+  console.log("Outer loops: " + x);
+  x += 1;
+  z = 1;
+  while (true) {
+    console.log("Inner loops: " + z);
+    z += 1;
+    if (z === 10 && x === 10) {
+      break labelCancelLoops;
+    } else if (z === 10) {
+      break;
+    }
+  }
+}
+ +

Istruzione continue

+ +

The {{jsxref("statements/continue","continue")}} statement can be used to restart a while, do-while, for, or label statement.

+ +
    +
  • Quando usi continue senza un'etichetta, termina l'iterazione corrente dell'istruzione racchiudente, mentre while, do-while, o for continua l'esecuzione del ciclo con l'iterazione successiva. In contrasto con l'istruzione break, continue non termina interamente l'esecuzione del ciclo. In un ciclo while, torna alla condizione. In un ciclo for, salta all'espressione di incremento increment-expression.
    • +
  • Quando si utilizza continue con un'etichetta, si applica all'istruzione looping identificata con tale etichetta.
    • +
+ +

La sintassi dell'istruzione continue ha il seguente aspetto:

+ +
continue [label];
+
+ +

Esempio 1

+ +

L'esempio seguente mostra un ciclo while con un'istruzione continue che viene eseguita quando il valore di i è tre. Quindi, n assume i valori uno, tre, sette e dodici.

+ +
var i = 0;
+var n = 0;
+while (i < 5) {
+  i++;
+  if (i == 3) {
+    continue;
+  }
+  n += i;
+}
+ +

Esempio 2

+ +

Una dichiarazione etichettata checkiandj contiene una dichiarazione etichettata checkj. Se si incontra continue il programma termina l'iterazione corrente di checkj e inizia la successiva iterazione. Ogni volta che si incontra continue, checkj viene reiterato finché la condizione non restituisce false. Quando viene restituito false, il resto dell'istruzione checkiandj è completato e checkiandj reiterate fino a quando la condizione non restituisce false. Quando viene restituito false, il programma continua con la seguente istruzione checkiandj.

+ +

Se continue ha un'etichetta di checkiandj, il programma continuerà nella parte superiore del checkiandj istruzione.

+ +
var i = 0;
+var j = 10;
+checkiandj:
+  while (i < 4) {
+    console.log(i);
+    i += 1;
+    checkj:
+      while (j > 4) {
+        console.log(j);
+        j -= 1;
+        if ((j % 2) == 0) {
+          continue checkj;
+        }
+        console.log(j + ' is odd.');
+      }
+      console.log('i = ' + i);
+      console.log('j = ' + j);
+}
+ +

Istruzione for...in

+ +

L'istruzione {{jsxref("statements/for...in","for...in")}} itera una variabile specificata su tutte le proprietà enumerabili di un oggetto. Per ogni proprietà distinta, JavaScript esegue le istruzioni specificate. L'istruzione for...in ha il seguente aspetto:

+ +
for (variabile in oggetto) {
+  istruzione
+}
+// for (variable in object) {
+//  statements
+// }
+
+ +

Esempio

+ +

La seguente funzione prende come argomento un oggetto e il nome dell'oggetto. Quindi itera su tutte le proprietà dell'oggetto e restituisce una stringa che elenca i nomi delle proprietà e i loro valori.

+ +
function dump_props(obj, obj_name) {
+  var result = "";
+  for (var i in obj) {
+    result += obj_name + "." + i + " = " + obj[i] + "<br>";
+  }
+  result += "<hr>";
+  return result;
+}
+
+ +

Per un oggetto car con proprietà make e model, result sarebbe:

+ +
car.make = Ford
+car.model = Mustang
+
+ +

Arrays / Matrici

+ +

Anche se può essere allettante usarla come un modo per iterare sugli elementi {{jsxref("Array")}} , l'istruzione the for...in restituirà il nome delle proprietà definite dall'utente oltre agli indici numerici. Quindi è meglio usare un ciclo tradizionale {{jsxref("statements/for","for")}} con un indice numerico quando si itera su array, perché l'istruzione for...in itera sulle proprietà definite dall'utente oltre agli elementi dell'array, se si modifica l'oggetto Array, (come ad esempio l'aggiunta di proprietà o metodi personalizzati).

+ +

Istruzione for...of

+ +

L'istruzione {{jsxref("statements/for...of","for...of")}} crea un ciclo che itera su oggetti iterabili (inclusi oggetti di tipo {{jsxref("Array")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, {{jsxref("functions/arguments","arguments")}} e così via), richiamando un aggancio di iterazione personalizzato con istruzioni da eseguire per il valore di ogni proprietà distinta.

+ +
for (variabile di oggetto) {
+  istruzione
+}
+ +

Il seguente esempio mostra la differenza tra un ciclo for...of e un {{jsxref("statements/for...in","for...in")}} ciclo continuo. Mentre for...in itera sopra i nomi delle proprietà, for...of itera sui valori delle proprietà:

+ +
let arr = [3, 5, 7];
+arr.foo = "hello";
+
+for (let i in arr) {
+   console.log(i); // logs "0", "1", "2", "foo"
+}
+
+for (let i of arr) {
+   console.log(i); // logs "3", "5", "7"
+}
+ +

{{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}

diff --git a/files/it/web/javascript/guide/regular_expressions/index.html b/files/it/web/javascript/guide/regular_expressions/index.html new file mode 100644 index 0000000000..f876045948 --- /dev/null +++ b/files/it/web/javascript/guide/regular_expressions/index.html @@ -0,0 +1,647 @@ +--- +title: Espressioni regolari +slug: Web/JavaScript/Guida/Espressioni_Regolari +translation_of: Web/JavaScript/Guide/Regular_Expressions +--- +
{{jsSidebar("Guida JavaScript")}} {{PreviousNext("Web/JavaScript/Guide/Text_formatting", "Web/JavaScript/Guide/Indexed_collections")}}
+ +

Le espressioni regolari sono schemi usati per confrontare combinazioni di caratteri nelle stringhe. In JavaScript, le espressioni regolari sono anche oggetti. Questi pattern sono usati con i metodi {{jsxref("RegExp.exec", "exec()")}} e {{jsxref("RegExp.test", "test()")}} della classe {{jsxref("RegExp")}}, e con i metodi {{jsxref("String.match", "match()")}},   {{jsxref("String.matchAll", "matchAll()")}}, {{jsxref("String.replace", "replace()")}}, {{jsxref("String.search", "search()")}}, e {{jsxref("String.split", "split()")}} della classe {{jsxref("String")}}. Questo capitolo descrive le espressioni regolari in JavaScript.

+ +

Creazione di un'espressione regolare

+ +

Puoi creare un'espressione regolare in uno dei seguenti modi:

+ +
    +
  • +

    Usando un'espressione regolare letterale, che consiste in uno schema racchiuso tra slash, come segue:

    + + 
    var re = /ab+c/;
+
    + +

    Le Espressioni Regolari letterali forniscono la compilazione dell'espressione regolare quando lo script è caricato. Se l'espressione regolare rimane costante, usare questo modo può migliorare le prestazioni.

    +
    • +
  • +

    O chiamando il costruttore dell'oggetto {{jsxref("RegExp")}} object, come segue:

    + + 
    var re = new RegExp("ab+c");
+
    + +

    Usando il costruttore avviene una compilazione runtime dell'espressione regolare. Usa il costruttore quando sai che lo schema dell'espressione regolare cambierà, o non sai lo schema a priori ma lo devi ricavare da un'altra risorsa, come un input dell'utente.

    +
    • +
+ +

Scrivere uno schema per espressioni regolari

+ +

Uno schema di espressione regolare è composto da caratteri semplici, come /abc/, o da una combinazione di caratteri semplici e speciali, come /ab*c/ o /Chapter (\d+)\.\d*/. L'ultimo esempio include parentesi che sono usate come un dispositivo di memoria. Il confronto fatto con queste parti dello schema è ricordato per usi futuri, come descritto in  {{ web.link("#Using_parenthesized_substring_matches", "Using parenthesized substring matches") }}.

+ +
+

Nota: Se hai già familiarità con la struttura di un'espressione regolare, potresti anche leggere il cheatsheet per una rapida ricerca di un modello/costrutto specifico

+
+ +

Usare modelli semplici

+ +

I modelli semplici sono costituiti da carattrei per i quali si desidera trovare una corrispondenza diretta. Ad esempio, il modello /abc/ corrisponde solo quando esattamente i caratteri "abc" si presentano insieme e in quell'ordine. Una tale corrispondenza avrebbe successo nelle stringhe "Ciao, conosci il tuo abc?" e "Gli ultimi progetti di aeroplani si sono evoluti da slabcraft". In entrambi i casi la corrispondenza con la sottostringa "abc" avviene. Non c'è corrispondenza nella stringa "Grab crab" perché invece di contenere l'esatta sottostringa "abc" coniente la sottostringa "ab c".

+ +

Usare caratteri speciali

+ +

Quando la ricerca di una corrispondenza richiede qualcosa di più di una corrispondenza diretta, come la ricerca di una o più b o la ricerca di spazi bianchi, il modello include caratteri speciali. Ad esempio, per abbinare una singola "a" seguita da zero o più "b" seguita da "c", dovresti usare il modello /ab*c/: il * dopo "b" significa "0 o più occorrenze dell'elemento precedente". Nella stringa "cbbabbbbcdebc", questo modello corrisponderà alla sottostringa "abbbbc".
+
+ La tabella seguente fornisce un elenco completo e una descrizione dei caratteri speciali che possono essere utilizzati nelle espressioni regolari.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Caratteri speciali nelle espressioni regolari
CarattereSignificato/Utilizzo
\ +

Matches according to the following rules:
+
+ A backslash that precedes a non-special character indicates that the next character is special and is not to be interpreted literally. For example, a 'b' without a preceding '\' generally matches lowercase 'b's wherever they occur. But a '\b' by itself doesn't match any character; it forms the special word boundary character.
+
+ A backslash that precedes a special character indicates that the next character is not special and should be interpreted literally. For example, the pattern /a*/ relies on the special character '*' to match 0 or more a's. By contrast, the pattern /a\*/ removes the specialness of the '*' to enable matches with strings like 'a*'.
+
+ Do not forget to escape \ itself while using the RegExp("pattern") notation because \ is also an escape character in strings.

+
^Matches beginning of input. If the multiline flag is set to true, also matches immediately after a line break character.
+
+ For example, /^A/ does not match the 'A' in "an A", but does match the 'A' in "An E".
+
+ The '^' has a different meaning when it appears as the first character in a character set pattern. See complemented character sets for details and an example.
$ +

Matches end of input. If the multiline flag is set to true, also matches immediately before a line break character.

+ +

For example, /t$/ does not match the 't' in "eater", but does match it in "eat".

+
* +

Matches the preceding expression 0 or more times. Equivalent to {0,}.

+ +

For example, /bo*/ matches 'boooo' in "A ghost booooed" and 'b' in "A bird warbled", but nothing in "A goat grunted".

+
+ +

Matches the preceding expression 1 or more times. Equivalent to {1,}.

+ +

For example, /a+/ matches the 'a' in "candy" and all the a's in "caaaaaaandy", but nothing in "cndy".

+
?Matches the preceding expression 0 or 1 time. Equivalent to {0,1}.
+
+ For example, /e?le?/ matches the 'el' in "angel" and the 'le' in "angle" and also the 'l' in "oslo".
+
+ If used immediately after any of the quantifiers *, +, ?, or {}, makes the quantifier non-greedy (matching the fewest possible characters), as opposed to the default, which is greedy (matching as many characters as possible). For example, applying /\d+/ to "123abc" matches "123". But applying /\d+?/ to that same string matches only the "1".
+
+ Also used in lookahead assertions, as described in the x(?=y) and x(?!y) entries of this table.
+  
. +

(The decimal point) matches any single character except the newline character.

+ +

For example, /.n/ matches 'an' and 'on' in "nay, an apple is on the tree", but not 'nay'.

+
(x) +

Matches 'x' and remembers the match, as the following example shows. The parentheses are called capturing parentheses.
+
+ The '(foo)' and '(bar)' in the pattern /(foo) (bar) \1 \2/ match and remember the first two words in the string "foo bar foo bar". The \1 and \2 in the pattern match the string's last two words. Note that \1, \2, \n are used in the matching part of the regex. In the replacement part of a regex the syntax $1, $2, $n must be used, e.g.: 'bar foo'.replace( /(...) (...)/, '$2 $1' ).

+
(?:x)Matches 'x' but does not remember the match. The parentheses are called non-capturing parentheses, and let you define subexpressions for regular expression operators to work with. Consider the sample expression /(?:foo){1,2}/. If the expression was /foo{1,2}/, the {1,2} characters would apply only to the last 'o' in 'foo'. With the non-capturing parentheses, the {1,2} applies to the entire word 'foo'.
x(?=y) +

Matches 'x' only if 'x' is followed by 'y'. This is called a lookahead.

+ +

For example, /Jack(?=Sprat)/ matches 'Jack' only if it is followed by 'Sprat'. /Jack(?=Sprat|Frost)/ matches 'Jack' only if it is followed by 'Sprat' or 'Frost'. However, neither 'Sprat' nor 'Frost' is part of the match results.

+
x(?!y) +

Matches 'x' only if 'x' is not followed by 'y'. This is called a negated lookahead.

+ +

For example, /\d+(?!\.)/ matches a number only if it is not followed by a decimal point. The regular expression /\d+(?!\.)/.exec("3.141") matches '141' but not '3.141'.

+
x|y +

Matches either 'x' or 'y'.

+ +

For example, /green|red/ matches 'green' in "green apple" and 'red' in "red apple."

+
{n}Matches exactly n occurrences of the preceding expression. N must be a positive integer.
+
+ For example, /a{2}/ doesn't match the 'a' in "candy," but it does match all of the a's in "caandy," and the first two a's in "caaandy."
{n,m} +

Where n and m are positive integers and n <= m. Matches at least n and at most m occurrences of the preceding expression. When m is omitted, it's treated as ∞.

+ +

For example, /a{1,3}/ matches nothing in "cndy", the 'a' in "candy," the first two a's in "caandy," and the first three a's in "caaaaaaandy". Notice that when matching "caaaaaaandy", the match is "aaa", even though the original string had more a's in it.

+
[xyz]Character set. This pattern type matches any one of the characters in the brackets, including escape sequences. Special characters like the dot(.) and asterisk (*) are not special inside a character set, so they don't need to be escaped. You can specify a range of characters by using a hyphen, as the following examples illustrate.
+
+ The pattern [a-d], which performs the same match as [abcd], matches the 'b' in "brisket" and the 'c' in "city". The patterns /[a-z.]+/ and /[\w.]+/ match the entire string "test.i.ng".
[^xyz] +

A negated or complemented character set. That is, it matches anything that is not enclosed in the brackets. You can specify a range of characters by using a hyphen. Everything that works in the normal character set also works here.

+ +

For example, [^abc] is the same as [^a-c]. They initially match 'r' in "brisket" and 'h' in "chop."

+
[\b]Matches a backspace (U+0008). You need to use square brackets if you want to match a literal backspace character. (Not to be confused with \b.)
\b +

Matches a word boundary. A word boundary matches the position where a word character is not followed or preceeded by another word-character. Note that a matched word boundary is not included in the match. In other words, the length of a matched word boundary is zero. (Not to be confused with [\b].)

+ +

Examples:
+ /\bm/ matches the 'm' in "moon" ;
+ /oo\b/ does not match the 'oo' in "moon", because 'oo' is followed by 'n' which is a word character;
+ /oon\b/ matches the 'oon' in "moon", because 'oon' is the end of the string, thus not followed by a word character;
+ /\w\b\w/ will never match anything, because a word character can never be followed by both a non-word and a word character.

+ +
+

Note: JavaScript's regular expression engine defines a specific set of characters to be "word" characters. Any character not in that set is considered a word break. This set of characters is fairly limited: it consists solely of the Roman alphabet in both upper- and lower-case, decimal digits, and the underscore character. Accented characters, such as "é" or "ü" are, unfortunately, treated as word breaks.

+
+
\B +

Matches a non-word boundary. This matches a position where the previous and next character are of the same type: Either both must be words, or both must be non-words. The beginning and end of a string are considered non-words.

+ +

For example, /\B../ matches 'oo' in "noonday", and /y\B./ matches 'ye' in "possibly yesterday."

+
\cX +

Where X is a character ranging from A to Z. Matches a control character in a string.

+ +

For example, /\cM/ matches control-M (U+000D) in a string.

+
\d +

Matches a digit character. Equivalent to [0-9].

+ +

For example, /\d/ or /[0-9]/ matches '2' in "B2 is the suite number."

+
\D +

Matches any non-digit character. Equivalent to [^0-9].

+ +

For example, /\D/ or /[^0-9]/ matches 'B' in "B2 is the suite number."

+
\fMatches a form feed (U+000C).
\nMatches a line feed (U+000A).
\rMatches a carriage return (U+000D).
\s +

Matches a single white space character, including space, tab, form feed, line feed. Equivalent to [ \f\n\r\t\v\u00a0\u1680\u180e\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff].

+ +

For example, /\s\w*/ matches ' bar' in "foo bar."

+
\S +

Matches a single character other than white space. Equivalent to [^ \f\n\r\t\v\u00a0\u1680\u180e\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff].

+ +

For example, /\S\w*/ matches 'foo' in "foo bar."

+
\tMatches a tab (U+0009).
\vMatches a vertical tab (U+000B).
\w +

Matches any alphanumeric character including the underscore. Equivalent to [A-Za-z0-9_].

+ +

For example, /\w/ matches 'a' in "apple," '5' in "$5.28," and '3' in "3D."

+
\W +

Matches any non-word character. Equivalent to [^A-Za-z0-9_].

+ +

For example, /\W/ or /[^A-Za-z0-9_]/ matches '%' in "50%."

+
\n +

Where n is a positive integer, a back reference to the last substring matching the n parenthetical in the regular expression (counting left parentheses).

+ +

For example, /apple(,)\sorange\1/ matches 'apple, orange,' in "apple, orange, cherry, peach."

+
\0Matches a NULL (U+0000) character. Do not follow this with another digit, because \0<digits> is an octal escape sequence.
\xhhMatches the character with the code hh (two hexadecimal digits)
\uhhhhMatches the character with the code hhhh (four hexadecimal digits).
\u{hhhh}(only when u flag is set) Matches the character with the Unicode value hhhh (hexadecimal digits).
+ +

Escaping user input to be treated as a literal string within a regular expression can be accomplished by simple replacement:

+ +
function escapeRegExp(string){
+  return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); // $& means the whole matched string
+}
+ +

Using parentheses

+ +

Parentheses around any part of the regular expression pattern cause that part of the matched substring to be remembered. Once remembered, the substring can be recalled for other use, as described in {{ web.link("#Using_parenthesized_substring_matches", "Using Parenthesized Substring Matches") }}.

+ +

For example, the pattern /Chapter (\d+)\.\d*/ illustrates additional escaped and special characters and indicates that part of the pattern should be remembered. It matches precisely the characters 'Chapter ' followed by one or more numeric characters (\d means any numeric character and + means 1 or more times), followed by a decimal point (which in itself is a special character; preceding the decimal point with \ means the pattern must look for the literal character '.'), followed by any numeric character 0 or more times (\d means numeric character, * means 0 or more times). In addition, parentheses are used to remember the first matched numeric characters.

+ +

This pattern is found in "Open Chapter 4.3, paragraph 6" and '4' is remembered. The pattern is not found in "Chapter 3 and 4", because that string does not have a period after the '3'.

+ +

To match a substring without causing the matched part to be remembered, within the parentheses preface the pattern with ?:. For example, (?:\d+) matches one or more numeric characters but does not remember the matched characters.

+ +

Lavorare con le espressioni regolari

+ +

Le espressioni regolari sono usate con i metodi test and exec di RegExp e con i metodi match, replace, search, and split di String .Questi metodi sono spiegati in dettaglio nelle  JavaScript reference.

+ +

Metodi che usano le espressioni regolari

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MetodoDescrizione
{{jsxref("RegExp.exec", "exec")}} +

Un metodo di RegExp che esegue una ricerca per una corrispondenza in una stringa. Ritorna un array di informazioni, o null se non trova corrispondenze.

+
{{jsxref("RegExp.test", "test")}}Un metodo di RegExp che testa le corrispondenze in una stinga. Ritorna true o false. 
{{jsxref("String.match", "match")}}Un metodo di String che esegue una ricerca per una corrispondenza in una stringa. Ritorna un array di informazioni, o null se non trova corrispondenze.
{{jsxref("String.search", "search")}}A String method that tests for a match in a string. It returns the index of the match, or -1 if the search fails.
{{jsxref("String.replace", "replace")}}A String method that executes a search for a match in a string, and replaces the matched substring with a replacement substring.
{{jsxref("String.split", "split")}}A String method that uses a regular expression or a fixed string to break a string into an array of substrings.
+ +

When you want to know whether a pattern is found in a string, use the test or search method; for more information (but slower execution) use the exec or match methods. If you use exec or match and if the match succeeds, these methods return an array and update properties of the associated regular expression object and also of the predefined regular expression object, RegExp. If the match fails, the exec method returns null (which coerces to false).

+ +

In the following example, the script uses the exec method to find a match in a string.

+ +
var myRe = /d(b+)d/g;
+var myArray = myRe.exec("cdbbdbsbz");
+
+ +

If you do not need to access the properties of the regular expression, an alternative way of creating myArray is with this script:

+ +
var myArray = /d(b+)d/g.exec("cdbbdbsbz"); // equivalent to "cdbbdbsbz".match(/d(b+)d/g);
+
+ +

If you want to construct the regular expression from a string, yet another alternative is this script:

+ +
var myRe = new RegExp("d(b+)d", "g");
+var myArray = myRe.exec("cdbbdbsbz");
+
+ +

With these scripts, the match succeeds and returns the array and updates the properties shown in the following table.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Results of regular expression execution.
ObjectProperty or indexDescriptionIn this example
myArrayThe matched string and all remembered substrings.["dbbd", "bb"]
indexThe 0-based index of the match in the input string.1
inputThe original string."cdbbdbsbz"
[0]The last matched characters."dbbd"
myRelastIndexThe index at which to start the next match. (This property is set only if the regular expression uses the g option, described in {{ web.link("#Advanced_searching_with_flags", "Advanced Searching With Flags") }}.)5
sourceThe text of the pattern. Updated at the time that the regular expression is created, not executed."d(b+)d"
+ +

As shown in the second form of this example, you can use a regular expression created with an object initializer without assigning it to a variable. If you do, however, every occurrence is a new regular expression. For this reason, if you use this form without assigning it to a variable, you cannot subsequently access the properties of that regular expression. For example, assume you have this script:

+ +
var myRe = /d(b+)d/g;
+var myArray = myRe.exec("cdbbdbsbz");
+console.log("The value of lastIndex is " + myRe.lastIndex);
+
+// "The value of lastIndex is 5"
+
+ +

However, if you have this script:

+ +
var myArray = /d(b+)d/g.exec("cdbbdbsbz");
+console.log("The value of lastIndex is " + /d(b+)d/g.lastIndex);
+
+// "The value of lastIndex is 0"
+
+ +

The occurrences of /d(b+)d/g in the two statements are different regular expression objects and hence have different values for their lastIndex property. If you need to access the properties of a regular expression created with an object initializer, you should first assign it to a variable.

+ +

Using parenthesized substring matches

+ +

Including parentheses in a regular expression pattern causes the corresponding submatch to be remembered. For example, /a(b)c/ matches the characters 'abc' and remembers 'b'. To recall these parenthesized substring matches, use the Array elements [1], ..., [n].

+ +

The number of possible parenthesized substrings is unlimited. The returned array holds all that were found. The following examples illustrate how to use parenthesized substring matches.

+ +

The following script uses the {{jsxref("String.replace", "replace()")}} method to switch the words in the string. For the replacement text, the script uses the $1 and $2 in the replacement to denote the first and second parenthesized substring matches.

+ +
var re = /(\w+)\s(\w+)/;
+var str = "John Smith";
+var newstr = str.replace(re, "$2, $1");
+console.log(newstr);
+
+ +

This prints "Smith, John".

+ +

Advanced searching with flags

+ +

Regular expressions have four optional flags that allow for global and case insensitive searching. These flags can be used separately or together in any order, and are included as part of the regular expression.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
Regular expression flags
FlagDescription
gGlobal search.
iCase-insensitive search.
mMulti-line search.
yPerform a "sticky" search that matches starting at the current position in the target string. See {{jsxref("RegExp.sticky", "sticky")}}
+ +

To include a flag with the regular expression, use this syntax:

+ +
var re = /pattern/flags;
+
+ +

or

+ +
var re = new RegExp("pattern", "flags");
+
+ +

Note that the flags are an integral part of a regular expression. They cannot be added or removed later.

+ +

For example, re = /\w+\s/g creates a regular expression that looks for one or more characters followed by a space, and it looks for this combination throughout the string.

+ +
var re = /\w+\s/g;
+var str = "fee fi fo fum";
+var myArray = str.match(re);
+console.log(myArray);
+
+ +

This displays ["fee ", "fi ", "fo "]. In this example, you could replace the line:

+ +
var re = /\w+\s/g;
+
+ +

with:

+ +
var re = new RegExp("\\w+\\s", "g");
+
+ +

and get the same result.

+ +

The m flag is used to specify that a multiline input string should be treated as multiple lines. If the m flag is used, ^ and $ match at the start or end of any line within the input string instead of the start or end of the entire string.

+ +

Examples

+ +

The following examples show some uses of regular expressions.

+ +

Changing the order in an input string

+ +

The following example illustrates the formation of regular expressions and the use of string.split() and string.replace(). It cleans a roughly formatted input string containing names (first name first) separated by blanks, tabs and exactly one semicolon. Finally, it reverses the name order (last name first) and sorts the list.

+ +
// The name string contains multiple spaces and tabs,
+// and may have multiple spaces between first and last names.
+var names = "Harry Trump ;Fred Barney; Helen Rigby ; Bill Abel ; Chris Hand ";
+
+var output = ["---------- Original String\n", names + "\n"];
+
+// Prepare two regular expression patterns and array storage.
+// Split the string into array elements.
+
+// pattern: possible white space then semicolon then possible white space
+var pattern = /\s*;\s*/;
+
+// Break the string into pieces separated by the pattern above and
+// store the pieces in an array called nameList
+var nameList = names.split(pattern);
+
+// new pattern: one or more characters then spaces then characters.
+// Use parentheses to "memorize" portions of the pattern.
+// The memorized portions are referred to later.
+pattern = /(\w+)\s+(\w+)/;
+
+// New array for holding names being processed.
+var bySurnameList = [];
+
+// Display the name array and populate the new array
+// with comma-separated names, last first.
+//
+// The replace method removes anything matching the pattern
+// and replaces it with the memorized string—second memorized portion
+// followed by comma space followed by first memorized portion.
+//
+// The variables $1 and $2 refer to the portions
+// memorized while matching the pattern.
+
+output.push("---------- After Split by Regular Expression");
+
+var i, len;
+for (i = 0, len = nameList.length; i < len; i++){
+  output.push(nameList[i]);
+  bySurnameList[i] = nameList[i].replace(pattern, "$2, $1");
+}
+
+// Display the new array.
+output.push("---------- Names Reversed");
+for (i = 0, len = bySurnameList.length; i < len; i++){
+  output.push(bySurnameList[i]);
+}
+
+// Sort by last name, then display the sorted array.
+bySurnameList.sort();
+output.push("---------- Sorted");
+for (i = 0, len = bySurnameList.length; i < len; i++){
+  output.push(bySurnameList[i]);
+}
+
+output.push("---------- End");
+
+console.log(output.join("\n"));
+
+ +

Using special characters to verify input

+ +

In the following example, the user is expected to enter a phone number. When the user presses the "Check" button, the script checks the validity of the number. If the number is valid (matches the character sequence specified by the regular expression), the script shows a message thanking the user and confirming the number. If the number is invalid, the script informs the user that the phone number is not valid.

+ +

Within non-capturing parentheses (?: , the regular expression looks for three numeric characters \d{3} OR | a left parenthesis \( followed by three digits \d{3}, followed by a close parenthesis \), (end non-capturing parenthesis )), followed by one dash, forward slash, or decimal point and when found, remember the character ([-\/\.]), followed by three digits \d{3}, followed by the remembered match of a dash, forward slash, or decimal point \1, followed by four digits \d{4}.

+ +

The Change event activated when the user presses Enter sets the value of RegExp.input.

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
+    <meta http-equiv="Content-Script-Type" content="text/javascript">
+    <script type="text/javascript">
+      var re = /(?:\d{3}|\(\d{3}\))([-\/\.])\d{3}\1\d{4}/;
+      function testInfo(phoneInput){
+        var OK = re.exec(phoneInput.value);
+        if (!OK)
+          window.alert(phoneInput.value + " isn't a phone number with area code!");
+        else
+          window.alert("Thanks, your phone number is " + OK[0]);
+      }
+    </script>
+  </head>
+  <body>
+    <p>Enter your phone number (with area code) and then click "Check".
+        <br>The expected format is like ###-###-####.</p>
+    <form action="#">
+      <input id="phone"><button onclick="testInfo(document.getElementById('phone'));">Check</button>
+    </form>
+  </body>
+</html>
+
+ +
{{PreviousNext("Web/JavaScript/Guide/Text_formatting", "Web/JavaScript/Guide/Indexed_collections")}}
diff --git a/files/it/web/javascript/il_dom_e_javascript/index.html b/files/it/web/javascript/il_dom_e_javascript/index.html deleted file mode 100644 index 9f2b0fbb56..0000000000 --- a/files/it/web/javascript/il_dom_e_javascript/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: Il DOM e JavaScript -slug: Web/JavaScript/Il_DOM_e_JavaScript -tags: - - DOM - - JavaScript - - Tutte_le_categorie -translation_of: Web/JavaScript/JavaScript_technologies_overview ---- -

Il Grande Disegno

- -

Gli effetti visivi come muovere i layer sulla pagina, mostrare e nascondere layer, far comparire menu, eccetera, sono spesso indicati come "DHTML", o "Dynamic HTML". Alcuni hanno dubbi sull'effettiva utilità di queste tecnologie in pagine web che dovrebbero trasmettere del contenuto e non la presentazione, ma dobbiamo comunque prendere atto della loro larga diffusione.

- -

Molti web master si limitano ad andare sui siti che offrono script DHTML e ricopiare il codice nelle loro pagine, senza interessarsi a come funzionano quegli script DHTML. Sfortunatamente la maggior parte di questi siti parlano di "javascript" e "DHTML", ma mai di DOM, il quale, sebbene sia un concetto introdotto da parecchio, solo di recente sta entrando nel gergo del web designer medio.

- -

E' una grande sfida per un progetto come Mozilla convincere i possessori di questi siti che ***it is worth coding for the W3C DOM, which sometimes means a lot of work, and drops support for the older browsers. It is also a big challenge to get the facts straight concerning the support for the W3C DOM. *** Uno dei più grandi problemi che incontrano alcuni web developer è la confusione tra JavaScript, DHTML e il DOM. In questo articolo tenteremo di chiarire le cose, e di spiegare le relazioni fra queste utili ed elaborate tecnologie.

- -

JavaScript, IL Linguaggio di Web Scripting

- -

JavaScript è un "linguaggio di scripting di oggetti" sviluppato inizialmente alla Netscape Communications Corp. da Brendan Eich, che oggi è uno dei leader del progetto Mozilla. Il motore JavaScript usato da Mozilla si chiama SpiderMonkey, e aderisce alla specifica ECMA-262 3°revisione(di cui è un superset; guarda anche la pagina ECMAScript).

- -

Contrariamente a diffuse errate credenze, JavaScript non è "Java Interpretato". Possiamo dire che JavaScript è un linguaggio di scripting dinamico che supporta la costruzione di oggetti basata su prototipi. La sintassi di base è volutamente simile sia a Java che a C++ per ridurre il numero di nuovi concetti richiesti per imparare il linguaggio. Il grande vantaggio di JavaScript è che è estremamente facile da imparare se vuoi fare programmazione di base (come quella richiesta per semplici DHTML). Niente tipi di variabili a vista, stringhe semplici da usare, neutralità totale della piattaforma,ecc. Per i programmatori avanzati può essere usato sia come linguaggio orientato agli oggetti che come linguaggio procedurale.

- -

Gran parte di questo paragrafo su JavaScript è stato preso dalla pagina JavaScript di Mozilla. Puoi anche consultare la più recente specifica ECMA.

- -

Il Modello a Oggetti del Documento, un insieme di interfacce indipendenti dal linguaggio

- -

Mentre Javascript è il linguaggio di programmazione che ti permette di operare sugli oggetti DOM, il DOM ti fornisce metodi e proprietà per recuperare, modificare, aggiornare ed eliminare parti del documento su cui stai lavorando. Per esempio, potresti recuperare il valore di un campo di testo e metterlo in una variabile stringa con il DOM; a questo punto puoi usare l'operatore Javascript di concatenazione + , per unire quella stringa ad un'altra, in base a ciò che vuoi ottenere. Potresti quindi usare il metodo alert() per mostrare la stringa all'utente attraverso una finestra di dialogo. Guarda anche gli altri esempi più sotto.

- -

In che senso "indipendente dal linguaggio"? Non è javascript l'unico modo per accedere al DOM? No, ad esempio Mozilla usa il DOM sia col C++ che col Javascript per la sua interfaccia utente. Questi sono alcuni dei linguaggi che hanno un'implementazione del DOM: Perl, Java, ActiveX, Python; ciò è possibile grazie all'indipendenza del DOM dal linguaggio di programmazione.

- -

Il DOM e Javascript - Chi sta facendo cosa?

- -

Arriviamo al punto principale di questo documento: chi sta facendo cosa? In uno script che ho inserito nella mia pagina, dov'è il DOM, e dov'è Javascript? Guardiamo da vicino un piccolo esempio: il codice prende tutti i tag <a> della pagina e li mette in una NodeList che abbiamo chiamato "anchorTags". Quindi per ogni tag ancora facciamo comparire un avviso contenente il valore dell'attributo href del tag. In blu c'è Javascript, in rosso il DOM.

- -
var anchorTags = document.getElementsByTagName("a");
-for (var i = 0; i < anchorTags.length ; i++)
-{
-   alert("Href of " + i + "-th element is : " + anchorTags[i].href + "\n");
-}
-
- -

Spiegazione

- -

Questo frammento di codice mostra cos'è Javascript, e cos'è DOM..

- -
-
var anchorTags =
-
Crea una variabile chiamata "anchorTags".
-
document.getElementsByTagName("a")
-
L'interfaccia Document è la prima interfaccia definita nel DOM1 Core, e document è l'oggetto che implementa l'interfaccia Document. L'oggetto document contiene tutto ciò che c'è nella pagina.
- Il DOM1 Core definisce il metodo getElementsByTagName() Nell'interfaccia Document. Questo metodo mette in una NodeList(una sorta di array specifico per contenere i nodi del DOM)tutti i tag il cui nome corrisponde al parametro passato alla funzione, in ordine di apparizione nel codice sorgente del documento. La variabile anchorTags è quindi ora una NodeList.
-
;
-
Il punto e virgola che chiude le istruzioni. Roba di Javascript.
-
for (var i = 0; i <
-
Tipico ciclo "for" in un linguaggio di programmazione. Ci consente di scorrere tutti i nodi contenuto nella NodeList salvata in anchorTags. "i" è una variabile temporanea di Javascript.
-
anchorTags.length
-
Nel DOM1 Core è definita la proprietà length dell'interfaccia NodeList. Restituisce un intero che è il numero di nodi contenuti nella NodeList.
-
; i++) {
-
Tipica istruzione per incrementare di 1 una variabile. Javascript.
-
alert(
-
alert() è un metodo del DOM che apre una finestrella in mezzo allo schermo con dentro la stringa che gli hai passato. Nota: questo metodo fa parte di ciò che viene chiamato DOM level 0, o DOM0; è un insieme di interfacce che non fanno parte di nessuna specifica DOM, ma sono comunque implementate da alcuni browser.
-
"Href of this a element is : " +
-
Una stringa letterale e un operatore di concatenazione di stringhe. JavaScript.
-
anchorTags{{ mediawiki.external('i') }}.href
-
"href" è una proprietà definita dall'intefaccia HTMLAnchorElement della specifica DOM1 HTML. Restituisce il valore dell'attributo href dell'elemento ancora, se presente.
- Usiamo anche anchorTags{{ mediawiki.external('i') }}, la stessa sintassi usata in Javascript per accedere all'i-esimo elemento di un array. Un modo più "linguaggio-indipendente" per accedere a un elemento di una NodeList è l'uso del metodo item(), definito nella interfaccia NodeList: anchorTags.item(1).href, ma la maggior parte delle implementazioni Javascript permettono di usare la più sbrigativa sintassi per array, che è ciò che la maggior parte dei programmatori usano.
-
+ "\n");
-
Un'altra concatenazione di stringhe. Inserisce un ritorno del carrello alla fine della stringa.
-
}
-
Fine del ciclo "for".
-
- -
-

Original Document Information

- -
    -
  • Author(s): Fabian Guisset <fguisset at softhome dot net>
    • -
  • Copyright Information: © 1998-2005 by individual mozilla.org contributors; content available under a Creative Commons license
    • -
-
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 ---- -

{{jsSidebar("Introductory")}}

- -

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

- -

Riesame su JavaScript

- -

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

- -

Programmazione object-oriented

- -

La programmazione orientata agli oggetti è un paradigma di programmazione che usa astrazione ({{glossary("abstraction")}}) per creare modelli basati sul mondo reale. Utilizza diverse tecniche di paradigmi esistenti, tra cui la modularità ({{glossary("modularity")}}), il polimorfismo ({{glossary("polymorphism")}}) e l'incapsulamento ({{glossary("encapsulation")}}). Oggi molti linguaggi di programmazione (come Java, JavaScript, C #, C ++, Python, PHP, Ruby e Objective-C) supportano la programmazione orientata agli oggetti (OOP).

- -

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

- -

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

- -

Terminologia

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

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

- - - -

Programmazione  prototype-based

- -

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

- -

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

- -

Programmazione  Object Oriented in JavaScript

- -

Namespace

- -

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

- -
-

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

-
- -

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

- -

Creiamo un oggetto globale chiamato MYAPP:

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

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

- -

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

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

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

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

Oggetti incorporati (built-in) standard

- -

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

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

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

- -

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

- -

Oggetti utente

- -

La classe

- -

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

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

L'oggetto (istanza di classe)

- -

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

- -

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

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

Il costruttore

- -

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

- -

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

- -

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

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

La proprietà (attributo di oggetto)

- -

Le proprietà sono variabili contenute nella classe; ogni istanza dell'oggetto ha queste proprietà. Le proprietà sono impostate nel costruttore (funzione) della classe in modo che siano creati su ogni istanza.

- -

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

- -

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

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

I metodi

- -

I metodi sono funzioni (e definiti come funzioni), ma per il resto seguono la stessa logica delle proprietà. Chiamare un metodo è simile all'accesso a una proprietà, ma si aggiunge () alla fine del nome del metodo, eventualmente con argomenti. Per definire un metodo va assegnata una funzione a una proprietà della proprietà prototype della classe. In seguito sarà possibile chiamare il metodo sull'oggetto utilizzando lo stesso nome assegnato alla funzione.

- -

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

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

In JavaScript i metodi sono oggetti funzione regolarmente associati a un oggetto come una proprietà, il che significa che è possibile richiamare i metodi "fuori dal contesto". Si consideri il seguente codice di esempio:

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

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

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

Eredità

- -

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

- -
-

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

-
- -

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

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

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

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

Essere sicuri che  this punti alla cosa giusta a prescindere da come l'oggetto sia istanziato può essere difficile. Tuttavia c'e una tecnica semplice per renderlo più facile.

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

Incapsulamento

- -

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

- -

Il nascondere informazioni (information hiding) è una caratteristica comune ad altre linguaggi, spesso in forma di  metodi / proprietà private e protette. Anche se si potrebbe simulare qualcosa di simile in JavaScript, questo non è un requisito per fare programmazione Object Oriented.2

- -

Astrazione

- -

L'astrazione è un meccanismo che permette di modellare la parte corrente del problema, sia con eredità (specializzazione) o la composizione. JavaScript ottiene la specializzazione per eredità, e la composizione permettendo che istanze di classe siano valori di attributi di altri oggetti.

- -

La classe Function di Javascript eredita dalla classe Object (questo dimostra la specializzazione del modello) e la proprietà Function.prototype è un'istanza di oggetto (ciò dimostra la composizione).

- -

The JavaScript Function class inherits from the Object class (this demonstrates specialization of the model) and the Function.prototype property is an instance of Object (this demonstrates composition).

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

Polimorfismo

- -

Così come tutti i metodi e le proprietà sono definite all'interno della proprietà prototype, classi diverse possono definire metodi con lo stesso nome; i metodi sono nell'ambito della classe in cui sono definiti, a meno che le due classi siano in un rapporto padre-figlio (cioè una eredita dall'altra in una catena di ereditarietà).

- - - -

Note

- -

Le tecniche presentate in questo articolo per attuare la programmazione orientata agli oggetti non sono le uniche che possono essere utilizzate in JavaScript, che è molto flessibile in termini di come la programmazione orientata agli oggetti possa essere eseguita.

- -

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

- -

Ci sono altre tecniche che rendono la programmazione orientata agli oggetti in JavaScript ancora più avanzata, ma sono oltre la portata di questo articolo introduttivo.

- -

Riferimenti

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

Original Document Information

- -
    -
  • Author(s): Fernando Trasviña <f_trasvina at hotmail dot com>
    • -
  • Copyright Information: © 1998-2005 by individual mozilla.org contributors; content available under a Creative Commons license
    • -
-
- -

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

diff --git a/files/it/web/javascript/javascript_technologies_overview/index.html b/files/it/web/javascript/javascript_technologies_overview/index.html new file mode 100644 index 0000000000..9f2b0fbb56 --- /dev/null +++ b/files/it/web/javascript/javascript_technologies_overview/index.html @@ -0,0 +1,81 @@ +--- +title: Il DOM e JavaScript +slug: Web/JavaScript/Il_DOM_e_JavaScript +tags: + - DOM + - JavaScript + - Tutte_le_categorie +translation_of: Web/JavaScript/JavaScript_technologies_overview +--- +

Il Grande Disegno

+ +

Gli effetti visivi come muovere i layer sulla pagina, mostrare e nascondere layer, far comparire menu, eccetera, sono spesso indicati come "DHTML", o "Dynamic HTML". Alcuni hanno dubbi sull'effettiva utilità di queste tecnologie in pagine web che dovrebbero trasmettere del contenuto e non la presentazione, ma dobbiamo comunque prendere atto della loro larga diffusione.

+ +

Molti web master si limitano ad andare sui siti che offrono script DHTML e ricopiare il codice nelle loro pagine, senza interessarsi a come funzionano quegli script DHTML. Sfortunatamente la maggior parte di questi siti parlano di "javascript" e "DHTML", ma mai di DOM, il quale, sebbene sia un concetto introdotto da parecchio, solo di recente sta entrando nel gergo del web designer medio.

+ +

E' una grande sfida per un progetto come Mozilla convincere i possessori di questi siti che ***it is worth coding for the W3C DOM, which sometimes means a lot of work, and drops support for the older browsers. It is also a big challenge to get the facts straight concerning the support for the W3C DOM. *** Uno dei più grandi problemi che incontrano alcuni web developer è la confusione tra JavaScript, DHTML e il DOM. In questo articolo tenteremo di chiarire le cose, e di spiegare le relazioni fra queste utili ed elaborate tecnologie.

+ +

JavaScript, IL Linguaggio di Web Scripting

+ +

JavaScript è un "linguaggio di scripting di oggetti" sviluppato inizialmente alla Netscape Communications Corp. da Brendan Eich, che oggi è uno dei leader del progetto Mozilla. Il motore JavaScript usato da Mozilla si chiama SpiderMonkey, e aderisce alla specifica ECMA-262 3°revisione(di cui è un superset; guarda anche la pagina ECMAScript).

+ +

Contrariamente a diffuse errate credenze, JavaScript non è "Java Interpretato". Possiamo dire che JavaScript è un linguaggio di scripting dinamico che supporta la costruzione di oggetti basata su prototipi. La sintassi di base è volutamente simile sia a Java che a C++ per ridurre il numero di nuovi concetti richiesti per imparare il linguaggio. Il grande vantaggio di JavaScript è che è estremamente facile da imparare se vuoi fare programmazione di base (come quella richiesta per semplici DHTML). Niente tipi di variabili a vista, stringhe semplici da usare, neutralità totale della piattaforma,ecc. Per i programmatori avanzati può essere usato sia come linguaggio orientato agli oggetti che come linguaggio procedurale.

+ +

Gran parte di questo paragrafo su JavaScript è stato preso dalla pagina JavaScript di Mozilla. Puoi anche consultare la più recente specifica ECMA.

+ +

Il Modello a Oggetti del Documento, un insieme di interfacce indipendenti dal linguaggio

+ +

Mentre Javascript è il linguaggio di programmazione che ti permette di operare sugli oggetti DOM, il DOM ti fornisce metodi e proprietà per recuperare, modificare, aggiornare ed eliminare parti del documento su cui stai lavorando. Per esempio, potresti recuperare il valore di un campo di testo e metterlo in una variabile stringa con il DOM; a questo punto puoi usare l'operatore Javascript di concatenazione + , per unire quella stringa ad un'altra, in base a ciò che vuoi ottenere. Potresti quindi usare il metodo alert() per mostrare la stringa all'utente attraverso una finestra di dialogo. Guarda anche gli altri esempi più sotto.

+ +

In che senso "indipendente dal linguaggio"? Non è javascript l'unico modo per accedere al DOM? No, ad esempio Mozilla usa il DOM sia col C++ che col Javascript per la sua interfaccia utente. Questi sono alcuni dei linguaggi che hanno un'implementazione del DOM: Perl, Java, ActiveX, Python; ciò è possibile grazie all'indipendenza del DOM dal linguaggio di programmazione.

+ +

Il DOM e Javascript - Chi sta facendo cosa?

+ +

Arriviamo al punto principale di questo documento: chi sta facendo cosa? In uno script che ho inserito nella mia pagina, dov'è il DOM, e dov'è Javascript? Guardiamo da vicino un piccolo esempio: il codice prende tutti i tag <a> della pagina e li mette in una NodeList che abbiamo chiamato "anchorTags". Quindi per ogni tag ancora facciamo comparire un avviso contenente il valore dell'attributo href del tag. In blu c'è Javascript, in rosso il DOM.

+ +
var anchorTags = document.getElementsByTagName("a");
+for (var i = 0; i < anchorTags.length ; i++)
+{
+   alert("Href of " + i + "-th element is : " + anchorTags[i].href + "\n");
+}
+
+ +

Spiegazione

+ +

Questo frammento di codice mostra cos'è Javascript, e cos'è DOM..

+ +
+
var anchorTags =
+
Crea una variabile chiamata "anchorTags".
+
document.getElementsByTagName("a")
+
L'interfaccia Document è la prima interfaccia definita nel DOM1 Core, e document è l'oggetto che implementa l'interfaccia Document. L'oggetto document contiene tutto ciò che c'è nella pagina.
+ Il DOM1 Core definisce il metodo getElementsByTagName() Nell'interfaccia Document. Questo metodo mette in una NodeList(una sorta di array specifico per contenere i nodi del DOM)tutti i tag il cui nome corrisponde al parametro passato alla funzione, in ordine di apparizione nel codice sorgente del documento. La variabile anchorTags è quindi ora una NodeList.
+
;
+
Il punto e virgola che chiude le istruzioni. Roba di Javascript.
+
for (var i = 0; i <
+
Tipico ciclo "for" in un linguaggio di programmazione. Ci consente di scorrere tutti i nodi contenuto nella NodeList salvata in anchorTags. "i" è una variabile temporanea di Javascript.
+
anchorTags.length
+
Nel DOM1 Core è definita la proprietà length dell'interfaccia NodeList. Restituisce un intero che è il numero di nodi contenuti nella NodeList.
+
; i++) {
+
Tipica istruzione per incrementare di 1 una variabile. Javascript.
+
alert(
+
alert() è un metodo del DOM che apre una finestrella in mezzo allo schermo con dentro la stringa che gli hai passato. Nota: questo metodo fa parte di ciò che viene chiamato DOM level 0, o DOM0; è un insieme di interfacce che non fanno parte di nessuna specifica DOM, ma sono comunque implementate da alcuni browser.
+
"Href of this a element is : " +
+
Una stringa letterale e un operatore di concatenazione di stringhe. JavaScript.
+
anchorTags{{ mediawiki.external('i') }}.href
+
"href" è una proprietà definita dall'intefaccia HTMLAnchorElement della specifica DOM1 HTML. Restituisce il valore dell'attributo href dell'elemento ancora, se presente.
+ Usiamo anche anchorTags{{ mediawiki.external('i') }}, la stessa sintassi usata in Javascript per accedere all'i-esimo elemento di un array. Un modo più "linguaggio-indipendente" per accedere a un elemento di una NodeList è l'uso del metodo item(), definito nella interfaccia NodeList: anchorTags.item(1).href, ma la maggior parte delle implementazioni Javascript permettono di usare la più sbrigativa sintassi per array, che è ciò che la maggior parte dei programmatori usano.
+
+ "\n");
+
Un'altra concatenazione di stringhe. Inserisce un ritorno del carrello alla fine della stringa.
+
}
+
Fine del ciclo "for".
+
+ +
+

Original Document Information

+ +
    +
  • Author(s): Fabian Guisset <fguisset at softhome dot net>
    • +
  • Copyright Information: © 1998-2005 by individual mozilla.org contributors; content available under a Creative Commons license
    • +
+
diff --git a/files/it/web/javascript/memory_management/index.html b/files/it/web/javascript/memory_management/index.html new file mode 100644 index 0000000000..d1cd6c4dca --- /dev/null +++ b/files/it/web/javascript/memory_management/index.html @@ -0,0 +1,197 @@ +--- +title: Gestione della memoria +slug: Web/JavaScript/Gestione_della_Memoria +translation_of: Web/JavaScript/Memory_Management +--- +
{{JsSidebar("Advanced")}}
+ +

Introduzione

+ +

Alcuni linguaggi di programmazione, come ad esempio C e C++, possiedono funzioni per la gestione della memoria a basso livello come malloc() e free(); in JavaScript l'allocazione e la de-allocazione della memoria (oggetti, stringhe, ecc.) avviene "automaticamente" grazie alla presenza del Garbage Collection. Il termine "automaticamente" è spesso fonte di confusione tra i programmatori JavaScript (e di altri linguaggi ad alto livello) poichè da l'impressione che si possa non preoccuparsi riguardo la gestione della memoria. Questo è un errore!

+ +

Ciclo di vita della memoria

+ +

A prescindere dal linguaggio di programmazione, il ciclo di vita della memoria è pressappoco sempre lo stesso:

+ +
    +
  1. Allocazione della memoria necessaria
    2. +
  2. Utilizzo della memoria (scrittura, lettura)
    3. +
  3. Rilascio della memoria allocata quando non è più necessaria
    4. +
+ +

I primi due punti sono espliciti in tutti i linguaggi; l'ultimo invece è esplicito nei linguaggi a basso livello, mentre il più delle volte implicito nei linguaggi ad alto livello come JavaScript.

+ +

Allocazione in JavaScript

+ +

Inizializzazione con valore

+ +

Per evitare che il programmatore debba allocare ogni variabile utilizzata, JavaScript lo fa contestualmente alla dichiarazione:

+ +
var n = 123; // alloca memoria per un numero
+var s = "qwerty"; // alloca memoria per una stringa
+
+var o = {
+  a: 1,
+  b: null
+}; // alloca memoria per un oggetto e i valori contenuti
+
+// (come un oggetto) alloca memoria per l'array e i valori contenuti
+var a = [1, null, "abra"];
+
+function f(a){
+  return a + 2;
+} // alloca una funzione (cioè un oggetto invocabile)
+
+// istruzioni più complesse anche allocano un oggetto
+someElement.addEventListener('click', function(){
+  someElement.style.backgroundColor = 'blue';
+}, false);
+
+ +

Allocazione via chiamata di funzione

+ +

La chiamata di alcune funzioni risultano nell'allocazione di un oggetto, come nel seguente esempio:

+ +
var d = new Date();
+// alloca un DOM element
+var e = document.createElement('div');
+
+ +

Alcuni metodi allocano nuovi valori od oggetti:

+ +
var s = "qwerty";
+var s2 = s.substr(0, 3); // s2 è una nuova stringa
+// Dato che le stringhe sono valori immutabili,
+// JavaScript può decidere di non allocare memoria per una nuova stringa,
+// ma semplicemente di salvare il range [0, 3].
+
+var a = ["ouais ouais", "nan nan"];
+var a2 = ["generation", "nan nan"];
+var a3 = a.concat(a2);
+// Un nuovo array di 4 elementi, la concatenazione degli elementi di a e a2
+
+ +

Utilizzo dei valori

+ +

Usare i valori in sostanza significa accedere alla memoria allocata. Questo può essere fatto leggendo o scrivendo il valore di una variabile, di una proprietà di un oggetto, o anche semplicemente passando un argomento a una funzione.

+ +

Rilascio della memoria quando non più necessaria

+ +

La maggior parte dei problemi riguardo la gestione della memoria arrivano in questa fase; L'impresa più difficile è determinare quando "la memoria allocata non è più necessaria". Ciò si traduce per il programmatore in individuare dove, nel codice, questo pezzo di memoria non risulta più necessario, e quindi liberarlo.

+ +

I linguaggi ad alto livello hanno una funzionalità chiamata "Garbage Collector" il cui compito è di seguire l'allocazione e l'uso della memoria così da determinare quando una porzione della memoria allocata non è più necessaria e liberarla automaticamente. Questo processo è un approssimazione dato che il problema generico di conoscere se una porzione di memoria serve o no è irrisolvibile (non può essere risolto da un algoritmo).

+ +

Garbage Collection

+ +

Partendo dal presupposto che il generico problema di sapere dove una determinata porzione di memoria "non serve più" è irrisolvibile, come conseguenza, l'implementazione dei garbege collection sono una restrizione della soluzione del problema generico. Questa sezione illustra le nozioni necessarie a capire il funzionamento dei principali algoritmi che implementano i garbage collection e le loro limitazioni.

+ +

Referenze

+ +

L'idea principale su cui si basano gli algoritmi di garbage collection sono le referenze. Nel contesto della gestione della memoria, un oggetto è referente di un altro se può accedere a quest'ultimo (sia in modo implicito che esplicito). Ad esempio, un oggetto JavaScript è referente del suo prototype (referenza implicita) e ai valori delle sue proprietà (referenza esplicita).

+ +

In questo contesto, il concetto di "oggetto" si estende a qualcosa di molto più ampio rispetto al tradizionale concetto di "oggetto JavaScript" e contiene function scopes (or the global lexical scope).

+ +

Reference-counting garbage collection

+ +

Quello qui descritto è l'algoritmo di garbage collection più semplice. Esso riduce il problema da "quando un oggetto non serve più" a "quando un oggetto non è più referenziato da nessun altro oggetto". Un oggetto è considerato garbage collectable (letteralmente, spazzatura da raccogliere) se nessun altro oggetto ha almeno una referenza ad esso.

+ +

Esempio

+ +
var o = {
+  a: {
+    b:2
+  }
+};
+// Alloca 2 oggetti. Il primo è referenziato dall'altro come sua proprietà.
+// L'altro è referenziato dalla dalla virtù di essere assegnato alla variabile 'o'.
+// Ovviamente, nessuno dei due può essere cancellato per liberare memoria
+
+
+var o2 = o; // la variabile 'o2' è il secondo oggetto
+            // che referenzia lo stesso oggetto di 'o'
+o = 1;      // ora l'oggetto che originariamente era in 'o' ha un'unica referenza
+            // rappresentata dalla variabile 'o2'
+
+var oa = o2.a; // referenza alla proprietà 'a' dell'oggetto.
+               // Quest'oggetto ora ha 2 referenze: una come proprietà di 'o2'
+               // e una come variabile 'oa'
+
+o2 = "yo"; // L'oggetto che originariamente era in 'o' adesso non
+           // più alcuna referenza e può essere cancellato.
+           // Però la sua proprietà 'a' è ancora referenziata
+           // dall'oggetto 'oa', quindi non può essere ancora eliminato
+
+oa = null; // la proprietà 'a' del precedente oggetto adesso non ha
+           // alcuna referenza. Può essere cancellata.
+
+ +

Limitazione: cicli di referenze

+ +

Questo algotitmo ha una limitazione quando entra in un ciclo di referenze. Nell'esempio seguente sono creati due oggetti che si referenziano a vicenda, uno referenzia l'altro e viceversa, creando un ciclo di referenze (dipendenza ciclica). In questo modo ogni oggetto ha almento una referenza, l'algoritmo del reference-countig (ovvero quello che "conta" quante referenze ha un oggetto) da come risultato che nessuno dei due oggetti può essere cancellato (non sono garbage-collactable).

+ +
function f(){
+  var o = {};
+  var o2 = {};
+  o.a = o2; // o referenzia o2
+  o2.a = o; // o2 referenzia o
+
+  return "qwerty";
+}
+
+f();
+// Two objects are created and reference one another thus creating a cycle.
+// They will not get out of the function scope after the function call, so they
+// are effectively useless and could be free'd.
+// However, the reference-counting algorithm considers that since each of both
+// object is referenced at least once, none can be garbage-collected.
+
+ +

Esempio reale

+ +

Internet Explorer 6 e 7 sono conosciuti per avere un reference-counting garbage collector per gli oggetti DOM. I cicli di referenze sono errori comuni che possono generare uno spreco di memoria (memory leaks).

+ +
var div;
+window.onload = function(){
+  div = document.getElementById("myDivElement");
+  div.circularReference = div;
+  div.lotsOfData = new Array(10000).join("*");
+};
+
+ +

Nell'esempio precedente, l'elemento "myDivElement" ha una referenza circolare con se stesso nella proprietà "circularReference". Se la proprietà non è esplicitamente rimossa o annullata, un reference-counting garbage collector avrà sempre almeno una referenza intatta che manterrà l'elemento in memoria anche se esso fosse rimosso dal DOM. Se un oggetto trattiene molta memoria e ha almeno una referenza (come illustrato nell'esempio precedente con la proprietà "lotsOfData") la memoria da esso occupata non sarà mai rilasciata.

+ +

L'algoritmo mark-and-sweep

+ +

Questo algoritmo è il più famoso degli algoritmi di tracing; la tecnica del tracing è concettualmente molto semplice e si basa sulla definizione "quando un oggetto diventa irraggiungibile".

+ +

Essa consiste nel prendere come riferimento gli oggetti root (indice dell'albero) e, partendo da essi, mediante una ricorsione, marcare (tramite un bit o una mappa distinta) tutti gli oggetti collegati tra loro da un riferimento. Al termine di questa operazione, gli oggetti raggiungibili saranno marcati mentre quelli non raggiungibili saranno eliminati.

+ +

L'algoritmo mark-and-sweep (marca e butta via) si suddivide in due fasi: la prima fase (mark) nella quale l'algoritmo marca tutti gli oggetti che hanno almeno un riferimento attivo; nella seconda fase (sweep) nella quale tutti gli oggetti non marcati vengono liberati e la memoria viene restituita.

+ +

A differenza della tecnica del reference counting il cui il costo dell'algoritmo è proporzionale all'ammontare del lavoro eseguito dal programma (ogni volta che si alloca/dealloca un oggetto bisogna creare-incrementare/decrementare il contatore), la tecnica del tracing è proporzionale alla dimensione della memoria ed è sicuramente più efficiente.

+ +

I cicli non sono più un problema

+ +

Nel primo esempio, dopo che la funzione ha restituito un risultato, i 2 oggetti non sono più referenziati da nessun altro oggetto raggiungibile dall'oggetto globale (root). Ne consegue che saranno irraggiungibili dal garbage collector e quindi eleminati.

+ +

La stessa cosa accade con il secondo esempio. Una volta che il div e la sua variabile sono diventati irraggiungibili dalle radici, essi possono essere cancellati nonostante abbiano una referenza ciascuno.

+ +

Limitazione: gli oggetti devono essere esplicitamente irragiungibili

+ +

Sebbene sia marcata come una limitazione, è raramente raggiunta in pratica ed è anche il motivo per cui nessuno si preoccupa, di solito, dei garbage collector.

+ +
+

Piccolo appunto italiano

+ +

Tutte le parole tagliate sono state tradotte letteralmente ma in modo che la frase non perda di significato.

+ +

cit. Il traduttore

+
+ +

See also

+ + diff --git a/files/it/web/javascript/reference/classes/constructor/index.html b/files/it/web/javascript/reference/classes/constructor/index.html new file mode 100644 index 0000000000..afc6c44526 --- /dev/null +++ b/files/it/web/javascript/reference/classes/constructor/index.html @@ -0,0 +1,161 @@ +--- +title: costruttore +slug: Web/JavaScript/Reference/Classes/costruttore +translation_of: Web/JavaScript/Reference/Classes/constructor +--- +
{{jsSidebar("Classes")}}
+ +

Il metodo constructor è un metodo speciale usato per la creazione e l'inizializzazione di un oggetto creato da  una classe.

+ +

Sintassi

+ +
constructor([argomenti]) { ... }
+ +

Descrizione

+ +

In una classe ci può essere un solo metodo con il nome "constructor". Se una classe contiene una o più occorrenze del metodo constructor viene sollevato un errore di tipo {{jsxref("SyntaxError")}}. 

+ +

Un costruttore può usare la keyword super per chiamare il costruttore di una classe genitore.

+ +

Se non viene specificato un metodo constructor, verrà usato quello di default.

+ +

Esempi

+ +

Usare il metodo constructor

+ +

Questo pezzo di codice è stato preso da classes sample (live demo).

+ +
class Square extends Polygon {
+  constructor(length) {
+    // Chiama il costruttore della classe padre usando lo stesso valore length
+    // come altezza e come larghezza del Poligono
+    super(length, length);
+    // Nota: Nelle classi derivate, super() deve essere chiamato prima
+    // dell'utilizzo di 'this', altrimenti viene sollevato un reference error.
+    this.name = 'Square';
+  }
+
+  get area() {
+    return this.height * this.width;
+  }
+
+  set area(value) {
+    this.area = value;
+  }
+}
+ +

Costruttori predefinito

+ +

Se non viene specificato un metodo costruttore, verrà usato quello di default. Per le classi base il costruttore di default è:

+ +
constructor() {}
+
+ +

Per le classi derivate invece è:

+ +
constructor(...args) {
+  super(...args);
+}
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('ES6', '#sec-static-semantics-constructormethod', 'Constructor Method')}}{{Spec2('ES6')}}Initial definition.
{{SpecName('ESDraft', '#sec-static-semantics-constructormethod', 'Constructor Method')}}{{Spec2('ESDraft')}} 
+ +

Compatibilità con i Browser

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Supporto Base{{CompatChrome(42.0)}}{{CompatGeckoDesktop(45)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Costruttore predefinito{{CompatUnknown}}{{CompatGeckoDesktop(45)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome per Android
Supporto Base{{CompatNo}}{{CompatChrome(42.0)}}{{CompatGeckoMobile(45)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(42.0)}}
Costruttore predefinito{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(45)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Vedi anche

+ + diff --git a/files/it/web/javascript/reference/classes/costruttore/index.html b/files/it/web/javascript/reference/classes/costruttore/index.html deleted file mode 100644 index afc6c44526..0000000000 --- a/files/it/web/javascript/reference/classes/costruttore/index.html +++ /dev/null @@ -1,161 +0,0 @@ ---- -title: costruttore -slug: Web/JavaScript/Reference/Classes/costruttore -translation_of: Web/JavaScript/Reference/Classes/constructor ---- -
{{jsSidebar("Classes")}}
- -

Il metodo constructor è un metodo speciale usato per la creazione e l'inizializzazione di un oggetto creato da  una classe.

- -

Sintassi

- -
constructor([argomenti]) { ... }
- -

Descrizione

- -

In una classe ci può essere un solo metodo con il nome "constructor". Se una classe contiene una o più occorrenze del metodo constructor viene sollevato un errore di tipo {{jsxref("SyntaxError")}}. 

- -

Un costruttore può usare la keyword super per chiamare il costruttore di una classe genitore.

- -

Se non viene specificato un metodo constructor, verrà usato quello di default.

- -

Esempi

- -

Usare il metodo constructor

- -

Questo pezzo di codice è stato preso da classes sample (live demo).

- -
class Square extends Polygon {
-  constructor(length) {
-    // Chiama il costruttore della classe padre usando lo stesso valore length
-    // come altezza e come larghezza del Poligono
-    super(length, length);
-    // Nota: Nelle classi derivate, super() deve essere chiamato prima
-    // dell'utilizzo di 'this', altrimenti viene sollevato un reference error.
-    this.name = 'Square';
-  }
-
-  get area() {
-    return this.height * this.width;
-  }
-
-  set area(value) {
-    this.area = value;
-  }
-}
- -

Costruttori predefinito

- -

Se non viene specificato un metodo costruttore, verrà usato quello di default. Per le classi base il costruttore di default è:

- -
constructor() {}
-
- -

Per le classi derivate invece è:

- -
constructor(...args) {
-  super(...args);
-}
- -

Specifiche

- - - - - - - - - - - - - - - - - - - -
SpecificaStatoCommento
{{SpecName('ES6', '#sec-static-semantics-constructormethod', 'Constructor Method')}}{{Spec2('ES6')}}Initial definition.
{{SpecName('ESDraft', '#sec-static-semantics-constructormethod', 'Constructor Method')}}{{Spec2('ESDraft')}} 
- -

Compatibilità con i Browser

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Supporto Base{{CompatChrome(42.0)}}{{CompatGeckoDesktop(45)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Costruttore predefinito{{CompatUnknown}}{{CompatGeckoDesktop(45)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificaAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome per Android
Supporto Base{{CompatNo}}{{CompatChrome(42.0)}}{{CompatGeckoMobile(45)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(42.0)}}
Costruttore predefinito{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(45)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

Vedi anche

- - diff --git a/files/it/web/javascript/reference/functions/arguments/index.html b/files/it/web/javascript/reference/functions/arguments/index.html new file mode 100644 index 0000000000..c277074bca --- /dev/null +++ b/files/it/web/javascript/reference/functions/arguments/index.html @@ -0,0 +1,224 @@ +--- +title: Oggetto 'arguments' +slug: Web/JavaScript/Reference/Functions_and_function_scope/arguments +translation_of: Web/JavaScript/Reference/Functions/arguments +--- +
+
{{jsSidebar("Functions")}}
+
+ +

L'oggetto arguments è un oggetto Array-like corrispondente agli argomenti passati in una funzione 

+ +

{{EmbedInteractiveExample("pages/js/functions-arguments.html")}}

+ + + +

Sintassi

+ +
arguments
+ +

Descrizione

+ +

L'oggetto arguments è una variabile locale disponibile in tutte le funzioni (non-arrow). Si può fare riferimento agli argomenti di una funzione, al suo interno, usando l'oggetto  arguments. Questo oggetto contiene un elemento per ogni argomento passato alla funzione, il primo elemento è indicizzato a 0. Per esempio, se a una funzione sono passati tre argomenti, ci si può riferire ad essi come segue:

+ +
arguments[0]
+arguments[1]
+arguments[2]
+
+ +

Gli argomenti possono anche essere settati:

+ +
arguments[1] = 'nuovo valore';
+
+ +

L'oggetto arguments non è un {{jsxref("Array")}}. E' simile a un  Array, ma non ha le proprietà dell'Array, eccetto length. Per esempio, non ha il metodo pop. Tuttavia può essere convertito in un vero Array:

+ +
var args = Array.prototype.slice.call(arguments);
+var args = [].slice.call(arguments);
+
+// ES2015
+const args = Array.from(arguments);
+
+ +
+

Usare slice su arguments impedisce le ottimizzazioni in alcuni motori JavaScript (per esempio V8 - più informazioni). Se ne avete bisogno, provate a costruire un nuovo array iterando sull'oggetto arguments, piuttosto. Un'alternativa potrebbe essere usare l'odiato costruttore Array come una funzione:

+ +
var args = (arguments.length === 1 ? [arguments[0]] : Array.apply(null, arguments));
+
+ +

Si può usare l'oggetto arguments se si chiama una funzione con più argomenti di quanti la funzione dichiari formalmente di accettare. Questa tecnica è utile per le funzioni cui possono essere passati un numero variabile di argomenti. Si usi arguments.length per determinare il numero di argomenti passati alla funzione, e quindi si processi ogni argomento usando l'oggetto arguments. Per determinare il numero di parametri presenti nella dichiarazione di una funzione, si usi la proprietà Function.length.

+ +

Usare typeof con Arguments

+ +

Il typeof di arguments ritorna 'object'. 

+ +
console.log(typeof arguments); // 'object'
+ +

Il typeof di ogni signolo argomento può essere determinato con l'uso degli indici.

+ +
console.log(typeof arguments[0]); //this will return the typeof individual arguments.
+ +

Usare la sintassi Spread con Arguments

+ +

Come è possibile fare con qualsiasi oggetto Array-like, si può usare il metodo {{jsxref("Array.from()")}} o lo spread operator per convertire arguments in un vero Array:

+ +
var args = Array.from(arguments);
+var args = [...arguments];
+
+ +

Proprietà

+ +
+
arguments.callee
+
Riferimento alla funzione in esecuzione.
+
arguments.caller {{ Obsolete_inline() }}
+
Riferimento alla funzione che ha invocato la funzione in esecuzione.
+
arguments.length
+
Riferimento al numero di argomenti passati alla funzione.
+
arguments[@@iterator]
+
Ritorna un nuovo oggetto Array Iterator che contiene i valori per ogni indice in arguments.
+
+ +

Esempi

+ +

Definire una funzione che concatena divere stringhe 

+ +

Questo esempio definisce una funzione che concatena diverse stringhe. L'unico argomento formale per la funzione è una stringa che specifica il carattere di separazione per gli elementi da concatenare. La funzione si definisce come segue:

+ +
function myConcat(separator) {
+  var args = Array.prototype.slice.call(arguments, 1);
+  return args.join(separator);
+}
+ +

Si può passare un numero indefinito di argomenti a questa funzione, e lei creerà una lista inserendo ciascun argomento come item della lista. 

+ +
// returns "red, orange, blue"
+myConcat(', ', 'red', 'orange', 'blue');
+
+// returns "elephant; giraffe; lion; cheetah"
+myConcat('; ', 'elephant', 'giraffe', 'lion', 'cheetah');
+
+// returns "sage. basil. oregano. pepper. parsley"
+myConcat('. ', 'sage', 'basil', 'oregano', 'pepper', 'parsley');
+ +

Definire una funzione che crea liste HTML

+ +

Questo esempio definisce una funzione che crea una stringa contenente l'HTML di una lista. L'unico argomento formale della funzione è una  stringa che è "u" se la lista deve essere ordinata, e "o" se la lista deve essere ordinata (numerata). La funzione è definita come segue:

+ +
function list(type) {
+  var result = '<' + type + 'l><li>';
+  var args = Array.prototype.slice.call(arguments, 1);
+  result += args.join('</li><li>');
+  result += '</li></' + type + 'l>'; // end list
+
+  return result;
+}
+ +

Si può passare un numero indefinito di argomenti a questa funzione, e lei aggiungerà ogni argomento come un elemento della lista del tipo indicato. Per esempio:

+ +
var listHTML = list('u', 'One', 'Two', 'Three');
+
+/* listHTML is:
+
+"<ul><li>One</li><li>Two</li><li>Three</li></ul>"
+
+*/
+ +

Parametri rest, default, e destructured

+ +

L'oggetto arguments può essere usato insieme a parametri rest, default, e destructured.

+ +
function foo(...args) {
+  return args;
+}
+foo(1, 2, 3); // [1,2,3]
+
+ +

Sebbene la presenza di parametri rest, default, o destructured non altera il comportamento dell'oggetto arguments nel codice scritto in strict mode, c'è una sottile differenza tra modalità strict e non-strict.

+ +

Quando una funzione non-strict non contiene parametri rest, default, o destructured, allora i valori nell'oggetto arguments  tracciano il valore degli argomenti (e vice versa). Si guardi il codice qui sotto:

+ +
function func(a) {
+  arguments[0] = 99; // updating arguments[0] also updates a
+  console.log(a);
+}
+func(10); // 99
+
+ +

e

+ +
function func(a) {
+  a = 99; // updating a also updates arguments[0]
+  console.log(arguments[0]);
+}
+func(10); // 99
+
+ +

Quando una funzione non-strict contiene parametri rest, default, o destructured, allora i valori nell'oggetto arguments non tracciano il valore degli argomenti (e vice versa). Al contrario, riflettono gli argomenti forniti al momento dell'invocazione:

+ +
function func(a = 55) {
+  arguments[0] = 99; // updating arguments[0] does not also update a
+  console.log(a);
+}
+func(10); // 10
+ +

e

+ +
function func(a = 55) {
+  a = 99; // updating a does not also update arguments[0]
+  console.log(arguments[0]);
+}
+func(10); // 10
+
+ +

e

+ +
function func(a = 55) {
+  console.log(arguments[0]);
+}
+func(); // undefined
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES1')}}{{Spec2('ES1')}}Definizione iniziale. Impelementata in JavaScript 1.1
{{SpecName('ES5.1', '#sec-10.6', 'Arguments Object')}}{{Spec2('ES5.1')}} 
{{SpecName('ES2015', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}{{Spec2('ES2015')}} 
{{SpecName('ESDraft', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}{{Spec2('ESDraft')}} 
+ +

Browser compatibility

+ + + +

{{Compat("javascript.functions.arguments")}}

+ +

Si guardi anche

+ +
    +
  • {{jsxref("Function")}}
    • +
diff --git a/files/it/web/javascript/reference/functions/arrow_functions/index.html b/files/it/web/javascript/reference/functions/arrow_functions/index.html new file mode 100644 index 0000000000..2dd258966d --- /dev/null +++ b/files/it/web/javascript/reference/functions/arrow_functions/index.html @@ -0,0 +1,394 @@ +--- +title: Funzioni a freccia +slug: Web/JavaScript/Reference/Functions_and_function_scope/Arrow_functions +tags: + - ECMAScript6 + - Funzioni + - Intermediate + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Functions/Arrow_functions +--- +
{{jsSidebar("Functions")}}
+ +

Una funzione a freccia ha una sintassi più compatta rispetto alla notazione a funzione e non associa i propri this, arguments, super o new.target. Le funzioni a freccia sono sempre anonime. Questa notazione è maggiormente indicata per le funzioni che non sono metodi, e non possono essere usate come costruttori.

+ +

Sintassi

+ +

Sintassi di base

+ +
(param1, param2, …, paramN) => { statements }
+(param1, param2, …, paramN) => expression
+// equivalente a: (param1, param2, …, paramN) => { return expression; }
+
+// Le Parentesi sono opzionali se è presente un solo parametro:
+(singleParam) => { statements }
+singleParam => { statements }
+
+// Una funzione senza parametri richiede comunque le parentesi:
+() => { statements }
+() => expression // equivalente a: () => { return expression; }
+
+ +

Sintassi avanzata

+ +
// Il body tra parentesi indica la restituzione di un oggetto:
+params => ({foo: bar})
+
+// Sono supportati ...rest e i parametri di default
+(param1, param2, ...rest) => { statements }
+(param1 = defaultValue1, param2, …, paramN = defaultValueN) => { statements }
+
+// Si può anche destrutturare all'interno della lista dei parametri
+var f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
+f();  // 6
+
+ +

Esempi dettagliati di sintassi sono disponibili qui.

+ +

Descrizione

+ +

Vedi anche "ES6 In Depth: Arrow functions" su hacks.mozilla.org.

+ +

L'introduzione delle funzioni a freccia è stata influenzata da due fattori: sintassi più compatta e la non associazione di this.

+ +

Funzioni più corte

+ +

In alcuni pattern, è meglio avere funzioni più corte. Per comparazione:

+ +
var materials = [
+  "Hydrogen",
+  "Helium",
+  "Lithium",
+  "Beryllium"
+];
+
+materials.map(function(material) {
+  return material.length;
+}); // [8, 6, 7, 9]
+
+materials.map((material) => {
+  return material.length;
+}); // [8, 6, 7, 9]
+
+materials.map(material => material.length); // [8, 6, 7, 9]
+ +

Mancato binding di this

+ +

Prima delle funzioni a freccia, ogni nuova funzione definiva il proprio  this (un nuovo oggetto nel caso di un costruttore, undefined se una funzione viene chiamata in strict mode, l'oggetto di contesto se la funzione viene chiamata come "metodo", etc.). Questo è risultato fastidioso in uno stile di programmazione orientato agli oggetti.

+ +
function Person() {
+  // The Person() constructor defines `this` as an instance of itself.
+  this.age = 0;
+
+  setInterval(function growUp() {
+    // In non-strict mode, the growUp() function defines `this`
+    // as the global object, which is different from the `this`
+    // defined by the Person() constructor.
+    this.age++;
+  }, 1000);
+}
+
+var p = new Person();
+ +

In ECMAScript 3/5, questo problema veniva aggirato assegnando il valore this a una variabile.

+ +
function Person() {
+  var that = this;
+  that.age = 0;
+
+  setInterval(function growUp() {
+    // The callback refers to the `that` variable of which
+    // the value is the expected object.
+    that.age++;
+  }, 1000);
+}
+ +

In alternativa, poteva essere usato Function.prototype.bind per assegnare il valore corretto di this da usare nella funzione  growUp().

+ +

Una funziona a freccia invece non crea  il proprio this, e quindi this mantiene il significato che aveva all'interno dello scope genitore. Perciò il codice seguente funziona come ci si aspetta.

+ +
function Person(){
+  this.age = 0;
+
+  setInterval(() => {
+    this.age++; // |this| properly refers to the person object
+  }, 1000);
+}
+
+var p = new Person();
+ +

Relazione con strict mode

+ +

Poiché  this è lessicale, le regole di strict mode relative a this sono semplicemente ignorate.

+ +
var f = () => {'use strict'; return this};
+f() === window; // o l'oggetto globale
+ +

Il resto delle regole si applica normalmente.

+ +

Invocazione attraverso call or apply

+ +

Poiché this non viene assegnato nelle funzioni a freccia, i metodi call() o apply() possono passare solo come argomenti; this viene ignorato:

+ +
var adder = {
+  base : 1,
+
+  add : function(a) {
+    var f = v => v + this.base;
+    return f(a);
+  },
+
+  addThruCall: function(a) {
+    var f = v => v + this.base;
+    var b = {
+      base : 2
+    };
+
+    return f.call(b, a);
+  }
+};
+
+console.log(adder.add(1));         // This would log to 2
+console.log(adder.addThruCall(1)); // This would log to 2 still
+ +

Mancato binding di arguments

+ +

Le funzioni a freccia non definiscono il proprio  arguments. Perciò, arguments è semplicemente una reference alla variabile nello scope genitore.

+ +
var arguments = 42;
+var arr = () => arguments;
+
+arr(); // 42
+
+function foo() {
+  var f = (i) => arguments[0]+i; // foo's implicit arguments binding
+  return f(2);
+}
+
+foo(1); // 3
+ +

Le funzioni a freccia non hanno il proprio oggetto arguments, ma in molti casi  i parametri rest rappresentano una valida alternativa:

+ +
function foo() {
+  var f = (...args) => args[0];
+  return f(2);
+}
+
+foo(1); // 2
+ +

Funzioni a freccia come metodi

+ +

Come già citato, le funzioni a freccia sono sconsigliate come metodi. Vediamo cosa succede quando proviamo a usarle: 

+ +
'use strict';
+var obj = {
+  i: 10,
+  b: () => console.log(this.i, this),
+  c: function() {
+    console.log( this.i, this)
+  }
+}
+obj.b(); // prints undefined, Window
+obj.c(); // prints 10, Object {...}
+ +

Le funzioni a freccia non definiscono  ("bind") il proprio this. un altro esempio usando {{jsxref("Object.defineProperty()")}}:

+ +
'use strict';
+var obj = {
+  a: 10
+};
+
+Object.defineProperty(obj, "b", {
+  get: () => {
+    console.log(this.a, typeof this.a, this);
+    return this.a+10; // represents global object 'Window', therefore 'this.a' returns 'undefined'
+  }
+});
+
+ +

Uso dell'operatore new 

+ +

Le funzioni a freccia non possono essere usate come costruttori, ed emetteranno un errore se usate con new.

+ +

Uso di yield 

+ +

La keyword yield non deve essere usata nel body di una funzione a freccia (eccetto quando permesso in eventuali funzioni al loro interno). Conseguentemente, le funzioni a freccia non possono essere usate come generatori.

+ +

Body della funzione

+ +

Le funzioni a freccia possono avere un "body conciso" o l'usuale "blocco body".

+ +

Nel primo caso è necessaria solo un'espressione, e il return è implicito. Nel secondo caso, devi usare esplicitamente return.

+ +
var func = x => x * x;                  // concise syntax, implied "return"
+var func = (x, y) => { return x + y; }; // with block body, explicit "return" needed
+
+ +

Restituire object literals

+ +

Tieni a mente che restituire oggetti letterali usando la sintassi concisa  params => {object:literal} non funzionerà:

+ +
var func = () => {  foo: 1  };               // Calling func() returns undefined!
+var func = () => {  foo: function() {}  };   // SyntaxError: function statement requires a name
+ +

Questo perché il codice all'interno delle parentesi graffe ({}) è processato come una sequenza di statement (i.e. foo è trattato come un label, non come una key di un oggetto).

+ +

Tuttavia, è sufficente racchiudere l'oggetto tra parentesi tonde:

+ +
var func = () => ({ foo: 1 });
+ +

Newline

+ +

Le funzioni a freccia non possono contenere un newline tra i parametri e la freccia.

+ +
var func = ()
+           => 1; // SyntaxError: expected expression, got '=>'
+ +

Ordine di parsing

+ +

La freccia in una funziona a freccia non è un'operatore, ma le funzioni a freccia hanno delle regole di parsing specifiche che interagiscono differentemente con la precedenza degli operatori, rispetto alle funzioni normali.

+ +
let callback;
+
+callback = callback || function() {}; // ok
+callback = callback || () => {};      // SyntaxError: invalid arrow-function arguments
+callback = callback || (() => {});    // ok
+
+ +

Altri esempi

+ +
// Una funzione a freccie vuota restituisce undefined
+let empty = () => {};
+
+(() => "foobar")() // IIFE, restituisce "foobar"
+
+var simple = a => a > 15 ? 15 : a;
+simple(16); // 15
+simple(10); // 10
+
+let max = (a, b) => a > b ? a : b;
+
+// Più semplice gestire filtering, mapping, ... di array
+
+var arr = [5, 6, 13, 0, 1, 18, 23];
+var sum = arr.reduce((a, b) => a + b);  // 66
+var even = arr.filter(v => v % 2 == 0); // [6, 0, 18]
+var double = arr.map(v => v * 2);       // [10, 12, 26, 0, 2, 36, 46]
+
+// Le catene di promise sono più concise
+promise.then(a => {
+  // ...
+}).then(b => {
+   // ...
+});
+
+// le funzioni a freccia senza parametri sono più semplici da visualizzare
+setTimeout( _ => {
+  console.log("I happen sooner");
+  setTimeout( _ => {
+    // deeper code
+    console.log("I happen later");
+  }, 1);
+}, 1);
+
+ +

 

+ +

 

+ +

 

+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES6', '#sec-arrow-function-definitions', 'Arrow Function Definitions')}}{{Spec2('ES6')}}Initial definition.
{{SpecName('ESDraft', '#sec-arrow-function-definitions', 'Arrow Function Definitions')}}{{Spec2('ESDraft')}} 
+ +

Compatibilità dei Browser 

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)EdgeIEOperaSafari
Basic support{{CompatChrome(45.0)}}{{CompatGeckoDesktop("22.0")}}{{CompatVersionUnknown}} +

{{CompatNo}}

+ 		{{CompatOpera(32)}}{{CompatSafari(10.0)}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatChrome(45.0)}}{{CompatGeckoMobile("22.0")}}{{CompatNo}}{{CompatNo}}{{CompatSafari(10.0)}}{{CompatChrome(45.0)}}
+
+ +

Note specifiche per Firefox

+ +
    +
  • L'implementazione iniziale delle funzioni a freccia in Firefox le rendeva automaticamente strict. Questo è cambiato da Firefox 24. L'uso di "use strict"; è ora obbligatorio.
    • +
  • Le funzioni a freccia sono semanticamente differenti dalle  non-standard {{jsxref("Operators/Expression_Closures", "expression closures", "", 1)}} aggiunte in Firefox 3 (details: JavaScript 1.8), perché {{jsxref("Operators/Expression_Closures", "expression closures", "", 1)}} non assegnano this in modo lessicale.
    • +
  • Fino a Firefox 39, un newline (\n) era erroneamente accettato dopo i parametri della funzione. Questo è stato risolto in conformità alle specifiche ES6 e codice come () \n => {} emetterà un {{jsxref("SyntaxError")}} in questa versione e successive.
    • +
+ +

Vedi anche

+ + diff --git a/files/it/web/javascript/reference/functions/get/index.html b/files/it/web/javascript/reference/functions/get/index.html new file mode 100644 index 0000000000..0ed76cf469 --- /dev/null +++ b/files/it/web/javascript/reference/functions/get/index.html @@ -0,0 +1,154 @@ +--- +title: getter +slug: Web/JavaScript/Reference/Functions_and_function_scope/get +translation_of: Web/JavaScript/Reference/Functions/get +--- +
{{jsSidebar("Functions")}}
+ +

La sintassi get  associa una proprietà dell'oggetto a una funzione che verrà chiamata quando la proprietà verrà richiesta.

+ +
{{EmbedInteractiveExample("pages/js/functions-getter.html")}}
+ + + +

Sintassi

+ +
{get prop() { ... } }
+{get [expression]() { ... } }
+ +

Parametri

+ +
+
prop
+
Il nome della proprietà da associare alla funzione specificata.
+
espressione
+
A partire da ECMAScript 2015, è anche possibile utilizzare espressioni per un nome di proprietà calcolato per associarsi alla funzione specificata.
+
+ +

Descrizione

+ +

A volte è preferibile consentire l'accesso a una proprietà che restituisce un valore calcolato in modo dinamico, oppure è possibile che si desideri riflettere lo stato di una variabile interna senza richiedere l'uso di chiamate esplicite al metodo. In JavaScript, questo può essere realizzato con l'uso di un getter. Non è possibile avere simultaneamente un getter legato a una proprietà e avere quella proprietà contenuta in un valore, anche se è possibile usare un getter e un setter insieme per creare un tipo di pseudo-proprietà.

+ +

Tieni presente quanto segue quando lavori con la sintassi get:

+ +
+ +
+ +

Un getter può essere rimosso usando l'operatore  delete

+ +

Esempi

+ +

Definizione di un getter sui nuovi oggetti negli inizializzatori di oggetti

+ +

Questo creerà una pseudo-proprietà latest più recente per object obj, che restituirà l'ultimo elemento dell'array in log.

+ +
var obj = {
+  log: ['example','test'],
+  get latest() {
+    if (this.log.length == 0) return undefined;
+    return this.log[this.log.length - 1];
+  }
+}
+console.log(obj.latest); // "test".
+
+ +

Si noti che il tentativo di assegnare un valore a latest non lo cambierà.

+ +

Cancellare un getter usando l'operatore delete

+ +

Se vuoi rimuovere il getter, puoi semplicemente usare delete :

+ +
delete obj.latest;
+
+ +

Definire un getter su un oggetto esistente usando defineProperty

+ +

Per aggiungere un getter a un oggetto esistente in un secondo momento, usa {{jsxref("Object.defineProperty()")}}.

+ +
var o = {a: 0};
+
+Object.defineProperty(o, 'b', { get: function() { return this.a + 1; } });
+
+console.log(o.b) // Runs the getter, which yields a + 1 (which is 1)
+ +

Utilizzando un nome di proprietà calcolato

+ +
var expr = 'foo';
+
+var obj = {
+  get [expr]() { return 'bar'; }
+};
+
+console.log(obj.foo); // "bar"
+ +

Smart / self-overwriting / lazy getters

+ +

I getter ti danno un modo per definire una proprietà di un oggetto, ma non calcolano il valore della proprietà finché non avviene l'accesso. Un getter rinvia il costo del calcolo del valore fino a quando il valore è necessario e, se non è mai necessario, non si paga mai il costo.

+ +

Un'ulteriore tecnica di ottimizzazione per lazificare o ritardare il calcolo di un valore di una proprietà e memorizzarla nella cache per un accesso successivo sono smart o memoized getters. Il valore viene calcolato la prima volta che viene chiamato il getter e viene quindi memorizzato nella cache in modo che gli accessi successivi restituiscano il valore memorizzato nella cache senza ricalcolarlo. Questo è utile nelle seguenti situazioni:

+ +
    +
  • Se il calcolo di un valore di una proprietà è costoso (richiede molta RAM o tempo di CPU, genera thread di lavoro, recupera file remoto, ecc.).
    • +
  • Se il valore non è necessario solo ora. Sarà usato più tardi, o in alcuni casi non è usato affatto.
    • +
  • Se viene utilizzato, sarà accessibile più volte e non è necessario ricalcolare il valore che non verrà mai modificato o non dovrebbe essere ricalcolato.
    • +
+ +

Ciò significa che non si dovrebbe usare un getter pigro per una proprietà il cui valore si prevede possa cambiare, poiché il getter non ricalcola il valore.

+ +

Nell'esempio seguente, l'oggetto ha un getter come proprietà propria. Quando si ottiene la proprietà, la proprietà viene rimossa dall'oggetto e riaggiunta, ma questa volta implicitamente come proprietà dei dati. Alla fine il valore viene restituito.

+ +
get notifier() {
+  delete this.notifier;
+  return this.notifier = document.getElementById('bookmarked-notification-anchor');
+},
+ +

Per il codice di Firefox, vedere anche il modulo del codice XPCOMUtils.jsm, che definisce la funzione defineLazyGetter().

+ +

Specificazioni

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES5.1', '#sec-11.1.5', 'Object Initializer')}}{{Spec2('ES5.1')}}Definizione iniziale.
{{SpecName('ES2015', '#sec-method-definitions', 'Method definitions')}}{{Spec2('ES2015')}}Aggiunti nomi di proprietà calcolate.
{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}{{Spec2('ESDraft')}} 
+ +

Compatibilità con il browser

+ + + +

{{Compat("javascript.functions.get")}}

+ +

Guarda anche

+ +
    +
  • setter
    • +
  • {{jsxref("Operators/delete", "delete")}}
    • +
  • {{jsxref("Object.defineProperty()")}}
    • +
  • {{jsxref("Object.defineGetter", "__defineGetter__")}}
    • +
  • {{jsxref("Object.defineSetter", "__defineSetter__")}}
    • +
  • Defining Getters and Setters in JavaScript Guide
    • +
diff --git a/files/it/web/javascript/reference/functions/index.html b/files/it/web/javascript/reference/functions/index.html new file mode 100644 index 0000000000..8a5255282c --- /dev/null +++ b/files/it/web/javascript/reference/functions/index.html @@ -0,0 +1,617 @@ +--- +title: Funzioni +slug: Web/JavaScript/Reference/Functions_and_function_scope +translation_of: Web/JavaScript/Reference/Functions +--- +
{{jsSidebar("Functions")}}
+ +

Parlando in termini generici, una funzione è un "sottopogramma" che può essere chiamato da un codice esterno (o interno nel caso di ricorsione) alla funzione stessa. Come il programma stesso, una funzione è composta da una sequenza di istruzioni chiamata corpo della funzione. Ad una funzione possono essere passati valori, e la funzione restituisce un valore.

+ +

In JavaScript, le funzioni sono oggetti di prima classe, perchè sono dotate di proprietà e di metodi, proprio come qualsiasi altro oggetto. Ciò che le distingue dagli altri oggetti è la possibilità di essere chiamate ( invocate ). Le funzioni sono oggetti di tipo Function.

+ +

Per maggiori esempi e spiegazioni, vedere anche JavaScript la guida sulle funzioni.

+ +

Descrizione

+ +

Ogni funzione in JavaScript è un oggetto di tipo Function. Vedi la pagina Function for informazioni su proprietà e metodi dell'oggetto Function.

+ +

Le funzioni non sono come le procedure. Una funzione restituisce sempre un valore, mentre una procedura può anche non restituire alcun valore.

+ +

Per restituire un valore specifico differente da quello di default, una fuzione deve avere un istruzione return che specifica il valore di ritorno. Una funzione senza un istruzione di ritorno restituirà il valore di  default. Nel caso di un costruttore invocato con la parola chiave new, il valore di default è il valore del suo parametro this. Per tutte le altre funzioni, il valore di ritorno di default è undefined.

+ +

I parametri di una chiamata di funzione sono gli argomenti della funzione. Gli argomenti sono passati alla funzione per valore. Se la funzione cambia il valore di un argomento, questo cambiamento non si riflette globalmente o nella funzione chiamante. Sebbene anche i riferimenti a oggetti siano valori, essi sono speciali: se una funzione cambia le proprietà di un oggetto a cui riferisce, quel cambiamento è visibile anche al di fuori della funzione, come dimostrato nel seguente esempio:

+ +
/* Dichiarazione della funzione 'myFunc' */
+function myFunc(theObject) {
+   theObject.brand = "Toyota";
+ }
+
+ /*
+  * Dichiarazione della variabile 'mycar';
+  * creazione e inizializzazione di un nuovo Object;
+  * associazione alla riferimento 'mycar'
+  */
+ var mycar = {
+   brand: "Honda",
+   model: "Accord",
+   year: 1998
+ };
+
+ /* Logs 'Honda' */
+ console.log(mycar.brand);
+
+ /* Passaggio del riferimento dell'oggetto alla funzione */
+ myFunc(mycar);
+
+ /*
+  * Logs 'Toyota' come il valore della proprietà 'brand'
+  * dell'oggetto, come è stato cambiato dalla funzione.
+  */
+ console.log(mycar.brand);
+
+ +

NB: l'oggetto console non è un oggetto standard. Non usatelo in un sito web, poichè potrebbe non funzionare correttamente. Per verificare il funzionamento dell'esempio precedente, usate, piuttosto:

+ +

           window.alert(mycar.brand);

+ +

La parola chiave this non fa riferimento alla funzione attualmente in esecuzione, per questo motivo si deve far riferimento ad oggetti Function  per nome, anche quando all'interno del corpo della funzione stessa.

+ +

Definizione di funzioni

+ +

Ci sono diversi modi per definire le funzioni:

+ +

La dichiarazione di funzione (istruzione function)

+ +

C'è una speciale sintassi per la dichiarazione di funzioni (per dettagli guarda function statement):

+ +
function name([param[, param[, ... param]]]) {
+   statements
+}
+
+ +
+
name
+
Il nome della funzione
+
+ +
+
param
+
Il nome di un argomento da passare alla funzione. Una funzione può avere fino a 255 argomenti.
+
+ +
+
statements
+
Le istruzioni comprese nel corpo della funzione.
+
+ +

L'espressione di funzione (espressione function)

+ +

Una espressione di funzione è simile ed ha la stessa sintassi della dichiarazione di funzione (per dettagli guarda function expression):

+ +
function [name]([param] [, param] [..., param]) {
+   statements
+}
+
+ +
+
name
+
Il nome della funzione. Può essere omesso, in qual caso la funzione è nota come funzione anonima.
+
+ +
+
param
+
Il nome di un argomento da passare alla funzione. Una funzione può avere fino a 255 argomenti.
+
statements
+
Le istruzioni comprese nel corpo della funzione.
+
+ +

La dichiarazione di funzione generatrice (espressione function*)

+ +
+

Note: Le funzioni generatrici sono un tecnologia sperimentale, parte della proposta di specifica ECMAScript 6, e non sono ancora ampiamente supportate dai browsers.

+
+ +

C'è una sintassi speciale per le funzioni generatrici (per dettagli vedi function* statement ):

+ +
function* name([param[, param[, ... param]]]) {
+   statements
+}
+
+ +
+
name
+
Nome della funzione.
+
+ +
+
param
+
Nome dell'argomento da passare alla funzione. Una funzione può avere fino a 255 agromenti.
+
+ +
+
statements
+
Le istruzioni comprese nel corpo della funzione.
+
+ +

L'espressione di funzione generatrice (espressione function*)

+ +
+

Note: Le funzioni generatrici sono una tecnologia sperimentale, parte della proposta di specifica ECMAScript 6, e non sono ancora ampiamente supportamente dai browsers.

+
+ +

Una espressione di funzione generatrice è similare ed ha la stessa sintassi di una dichiarazione di funzione generatrice (per dettagli vedi function* expression ):

+ +
function* [name]([param] [, param] [..., param]) {
+   statements
+}
+
+ +
+
name
+
Nome della funzione. Può essere omesso, nel qual caso la funzione è nota come funzione anonima.
+
+ +
+
param
+
+
Nome dell'argomento da passare alla funzione. Una funzione può avere fino a 255 agromenti.
+
+
statements
+
Le istruzioni comprese nel corpo della funzione.
+
+ +

L'espressione di funzione a freccia (=>)

+ +
+

Note: L'espressione di funzione a freccia sono una tecnologia sperimentare, parte della proposta di specifica ECMAScript 6, e non sono ancora ampiamente supportate dai browsers.

+
+ +

Un' espressione di funzione a freccia ha una sintassi ridotta e lessicalmnete associa il proprio valore this (per dettagli vedere arrow functions ):

+ +
([param] [, param]) => {
+   statements
+}
+
+param => expression
+
+ +
+
param
+
Il nome di un parametro. È necessario indicare l'assenza di parametri con (). Le parentesi non sono richieste nel caso in cui ci sia solo un parametro (come foo => 1).
+
statements or expression
+
Molteplici istruzioni devono essere racchiuse tra parentesi. Una singola espressione non necessita di parantesi. expression è anche l'implicito valore restituito dalla funzione.
+
+ +

Il costruttore Function

+ +
+

Nota: l'utilizzo del costruttore Function per creare funzioni non è raccomandato, poichè richiede che il corpo della funzione sia scritto come stringa, fatto che può comportare una mancata ottimizzazione da parte di alcuni motori javascript e causare altri problemi.

+
+ +

Come tutti gli altri oggetti, un oggetto Function può essere creato utilizzando l'operatore new:

+ +
new Function (arg1, arg2, ... argN, functionBody)
+
+ +
+
arg1, arg2, ... argN
+
Zero o più nomi da usare come nomi formali di argomenti. Ciascun nome deve essere rappresentato da una stringa testuale che sia conforme alle norme che regolano la definizione di identificatori JavaScript validi, oppure da una lista di stringhe testuali, separate da una virgola; per esempio: "x", "theValue", oppure "a,b".
+
+ +
+
functionBody
+
Una stringa testuale che contenga le istruzioni Javascript comprese nella definizione della funzione.
+
+ +

Invocare il costruttore Function come funzione ( senza utilizzare l'operatore new ) ha lo stesso effetto di quando lo si invoca come costruttore.

+ +

Il costruttore GeneratorFunction

+ +
+

Nota: le espressioni di funzione a freccia ( arrow function expression ) sono una tecnologia sperimentale, parte della proposta ECMAScript 6, e non sono ancora completamente supportate dai browser.

+
+ +
+

Nota: il costruttore GeneratorFunction non è un oggetto globale, ma può essere ottenuto dall'istanza della funzione generatrice ( vedi GeneratorFunction per maggiori dettagli ).

+
+ +
+

Nota: l'utilizzo del costruttore GeneratorFunction per creare funzioni non è raccomandato, poichè richiede che il corpo della funzione sia scritto come stringa, fatto che può comportare una mancata ottimizzazione da parte di alcuni motori javascript e causare altri problemi.

+
+ +

Come tutti gli altri oggetti, un oggetto GeneratorFunction può essere creato utilizzando l'operatore new:

+ +
new GeneratorFunction (arg1, arg2, ... argN, functionBody)
+
+ +
+
arg1, arg2, ... argN
+
Zero o più nomi da usare come nomi formali di argomenti. Ciascun nome deve essere rappresentato da una stringa testuale che sia conforme alle norme che regolano la definizione di identificatori JavaScript validi, oppure da una lista di stringhe testuali, separate da una virgola; per esempio: "x", "theValue", oppure "a,b".
+
+ +
+
functionBody
+
Una stringa testuale che contenga le istruzioni Javascript comprese nella definizione della funzione.
+
+ +

Invocare il costruttore Function come funzione ( senza utilizzare l'operatore new ) ha lo stesso effetto di quando lo si invoca come costruttore.

+ +

I parametri di una funzione

+ +
+

Nota: i parametri di default ed i parametri rest sono tecnologie sperimentali, parte della proposta  ECMAScript 6, e non sono ancora completamente supportati dai browser.

+
+ +

Parametri di default

+ +

La sintassi per definire i valori di default dei parametri di una funzione permette di inizializzare i parametri formali con valori di default, sempre che non venga passato il valore undefined oppure non venga passato alcun valore. Per maggiori dettagli, vedi default parameters.

+ +

I parametri Rest

+ +

La sintassi per i parametri rest permette di rappresentare un indefinito numero di argomenti come un array. Per maggiori dettagli, vedi rest parameters.

+ +

L'oggetto arguments

+ +

È possibile riferirsi agli argomenti di una funzione, all'interno della funzione, utilizzando l'oggetto arguments. Vedi arguments.

+ +
    +
  • arguments: un oggetto, strutturato come un array, contenente gli argomenti passati alla funzione in esecuzione.
    • +
  • arguments.callee {{Deprecated_inline}}: la funzione in esecuzione.
    • +
  • arguments.caller {{Obsolete_inline}} : la funzione che ha invocato la funzione in esecuzione.
    • +
  • arguments.length: il numero degli argomenti passati alla funzione.
    • +
+ +

Definire metodi

+ +

Funzioni Getter e setter

+ +

È possibile definire metodi getter ( accessor method: metodi per l'accesso al valore di una variabile privata ) e metodi setter ( mutator method: metodi per la modifica del valore di una variabile privata ) per qulasiasi oggetto standard built-in o per qualsiasi oggetto definito dall'utente che supporti l'aggiunta di nuove proprietà. La sintassi da usare per la definizione di metodi getter e setter utilizza la sintassi per la definizione di valori letterali.

+ +
+
get
+
+

Lega ( bind ) una proprietà di un oggetto ad una funzione, che verrà invocata ogni volta in cui si cercherà di leggere il valore di quella proprietà.

+
+
set
+
Lega ( bind ) una proprietà di un oggetto alla funzione da invocare ogni volta in cui si cercherà di modificare il valore di quella proprietà.
+
+ +

Sintassi per la definizione dei metodi

+ +
+

Nota: le definizioni dei metodi sono tecnologie sperimentali, parte della proposta  ECMAScript 6, e non sono ancora completamente supportate dai browser.

+
+ +

A partire da ECMAScript 6, è possibile definire propri metodi usando una sintassi più breve, simile alla sintassi usata per i metodi getter e setter. Vedi method definitions per maggiori informazioni.

+ +
var obj = {
+  foo() {},
+  bar() {}
+};
+ +

Il costruttore Function vs. la dichiarazione di funzione vs. l'espressione di funzione

+ +

Compara i seguenti esempi:

+ +

Una funzione definita con la dichiarazione di funzione:

+ +
function multiply(x, y) {
+   return x * y;
+}
+
+ +

Una espressione di funzione di una funzione anonima ( senza nome ), assegnata alla variabile multiply:

+ +
var multiply = function(x, y) {
+   return x * y;
+};
+
+ +

Una espressione di funzione di una funzione chiamata func_name , assegnata alla variabile multiply:

+ +
var multiply = function func_name(x, y) {
+   return x * y;
+};
+
+ +

Differenze

+ +

Tutti e tre gli esempi fanno più o meno la stessa cosa, con qualche piccola differenza:

+ +

C'è una differenza tra il nome di una funzione e la variabile alla quale la funzione viene assegnata. Il nome di una funzione non può essere modificato, mentre la variabile alla quale viene assegnata la funzione può essere riassegnata. Il nome di una funzione può essere utilizzato solo all'interno del corpo della funzione. Tentare di utilizzarlo al di fuori del corpo della funzione genererà un errore ( oppure restituirà undefined se il nome della funzione era stato precedentemente dichiarato con un'istruzione var ). Per esempio:

+ +
var y = function x() {};
+alert(x); // throws an error
+
+ +

Il nome di una funzione appare anche quando la funzione viene serializzata usando il metodo toString applicato alla funzione.

+ +

Dall'altro lato, la variabile alla quale viene assegnata la funzione è limitata solo dal suo scope, la cui inclusione è garantita al momento della dichiarazione di funzione.

+ +

Come si può vedere dal quarto esempio, il nome della funzione può essere diverso dal nome della variabile alla quale la funzione viene assegnata. I due nomi non hanno alcuna relazione tra loro. Una dichiarazione di funzione crea anche una variabile con lo stesso nome della funzione. Quindi, diversamente dalle funzioni definite attraverso un'espressione di funzione, le funzioni definite attraverso una dichiarazione di funzione offrono la possibilità di accedere ad esse attraverso il loro nome, almeno all'interno dello scope in cui erano state definite.

+ +

Una funzione definita con il costruttore 'new Function' non possiede un nome. Tuttavia, nel motore JavaScript SpiderMonkey, la forma serializzata della funzione mostra il nome "anonymous". Per esempio, il codice alert(new Function()) restituisce:

+ +
function anonymous() {
+}
+
+ +

Poichè la funzione, in realtà, non ha un nome, anonymous non è una variabile alla quale si potrà accedere, all'interno della funzione. Per esempio, il seguente codice restituirebbe un errore:

+ +
var foo = new Function("alert(anonymous);");
+foo();
+
+ +

Diversamente da quanto accade con le funzioni definite con espressioni di funzione o con il costruttore Function, una funzione definita con una dichiarazione di funzione può essere usata prima della dichiarazione di funzione stessa. Per esempio:

+ +
foo(); // alerts FOO!
+function foo() {
+   alert('FOO!');
+}
+
+ +

Una funzione definita da un'espressione di funzione eredita lo scope corrente. Vale a dire, la funzione forma una chiusura. Dall'altro lato, una funzione definita dal costruttore Function non eredita alcuno scope, se non quello globale ( che eredita qualsiasi funzione ).

+ +

Le funzioni definite con espressioni di funzione e dichiarazioni di funzione vengono analizzate ( parsed ) solo una volta, mentre quelle definite con il costruttore Function no. Vale a dire, la stringa testuale del corpo della funzione passata al costruttore Function deve essere analizzata ( parsed ) ogni volta in cui viene invocato il costruttore. Sebbene un'espressione di funzione crei ogni volta una chiusura, il corpo della funzione non viene rianalizzato ( reparsed ), così le espressioni di funzione sono ancora più veloci del "new Function(...)". Quindi, il costruttore Function dovrebbe, generalmente, essere evitato dove possibile.

+ +

Occorre tenere presente, tuttavia, che le espressioni di funzione e le dichiarazioni di funzione annidate in una funzione generata dall'analisi ( parsing ) di una stringa del costruttore Function non vengono analizzate ( parsed ) continuamente. Per esempio:

+ +
var foo = (new Function("var bar = \'FOO!\';\nreturn(function() {\n\talert(bar);\n});"))();
+foo(); // The segment "function() {\n\talert(bar);\n}" of the function body string is not re-parsed.
+ +

Una dichiarazione di funzione è molto facilmente ( e spesso, anche non intenzionalmente ) convertita in un'espressione di funzione. Una dichiarazione di funzione cessa di essere tale quando:

+ +
    +
  • diventa parte di un'espressione
    • +
  • non è più un "elemento sorgente" di una funzione o dello stesso script. Un "elemento sorgente" ( source element ) è un'istruzione non annidata, presente nello script o nel corpo della funzione:
    • +
+ +
var x = 0;               // source element
+if (x == 0) {            // source element
+   x = 10;               // not a source element
+   function boo() {}     // not a source element
+}
+function foo() {         // source element
+   var y = 20;           // source element
+   function bar() {}     // source element
+   while (y == 10) {     // source element
+      function blah() {} // not a source element
+      y++;               // not a source element
+   }
+}
+
+ +

Examples

+ +
// function declaration
+function foo() {}
+
+// function expression
+(function bar() {})
+
+// function expression
+x = function hello() {}
+
+
+if (x) {
+   // function expression
+   function world() {}
+}
+
+
+// function declaration
+function a() {
+   // function declaration
+   function b() {}
+   if (0) {
+      // function expression
+      function c() {}
+   }
+}
+
+ +

Definire una funzione in modo condizionato

+ +

Le funzioni possono essere definite in modo condizionato, utilizzando sia le istruzioni di funzione ( un'estensione prevista nello standard ECMA-262 Edition 3 ), sia il costruttore Function. Da notare, però, che le  istruzioni di funzione non sono più accettate in ES5 strict mode. Inoltre, questa funzionalità non funziona bene attraverso più browser, quindi sarebbe meglio non farci affidamento.

+ +

Nello script seguente, la funzione zero non verrà mai definita e non potrà mai essere invocata, visto che 'if (0)' restituisce sempre false:

+ +
if (0) {
+   function zero() {
+      document.writeln("This is zero.");
+   }
+}
+
+ +

Se la condizione diventasse 'if (1)', la funzione zero verrebbe definita.

+ +

Nota: sebbene questo tipo di funzione sembri una dichiarazione di funzione, in realtà siamo di fronte ad una espressione ( o statement, o istruzione ), poichè la dichiarazione è annidata all'interno di un'altra istruzione. Vedi le differenze tra dichiarazioni di funzione ed espressioni di funzione.

+ +

Nota: alcuni motori JavaScript, eslcuso SpiderMonkey, trattano, non correttamente, qualsiasi espressione di funzione in modo da assegnare loro un nome, al momento della definizione. Questo comporterebbe che la funzione zero sarebbe comunque definita, anche nell'eventualità che la condizione if restituisse sempre false. Un modo più sicuro per definire le funzioni in modo condizionato è di definirle come funzioni anonime ed assegnarle, poi, ad una variabile:

+ +
if (0) {
+   var zero = function() {
+      document.writeln("This is zero.");
+   }
+}
+
+ +

Esempi

+ +

Restituire un numero formattato

+ +

La seguente funzione restituisce ( return ) una stringa contenente la rappresentazione formattata di un numero, completato ( padded ) con degli zero iniziali.

+ +
// This function returns a string padded with leading zeros
+function padZeros(num, totalLen) {
+   var numStr = num.toString();             // Initialize return value as string
+   var numZeros = totalLen - numStr.length; // Calculate no. of zeros
+   for (var i = 1; i <= numZeros; i++) {
+      numStr = "0" + numStr;
+   }
+   return numStr;
+}
+
+ +

Queste istruzioni invocano la funzione padZeros.

+ +
var result;
+result = padZeros(42,4); // returns "0042"
+result = padZeros(42,2); // returns "42"
+result = padZeros(5,4);  // returns "0005"
+
+ +

Determinare l'esistenza di una funzione

+ +

È possibile determinare se una funzione esiste, utilizzando l'operatore typeof. Nell'esempio seguente, viene eseguito un test per determinare se l'oggetto window ha una proprietà, che sia una funzione, chiamata noFunc. Se così, la funzione verrà utilizzata; in caso contrario, verrà eseguita una qualsiasi altra azione.

+ +
 if ('function' == typeof window.noFunc) {
+   // use noFunc()
+ } else {
+   // do something else
+ }
+
+ +

Da notare che nel test if  viene usato un riferimento a noFunc  — senza usare le parentesi "()" dopo il nome della funzione: in questo modo, la funzione non viene invocata.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
ECMAScript 1st Edition.StandardInitial definition. Implemented in JavaScript 1.0
{{SpecName('ES5.1', '#sec-13', 'Function Definition')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-function-definitions', 'Function definitions')}}{{Spec2('ES6')}}New: Arrow functions, Generator functions, default parameters, rest parameters
{{SpecName('ES6', '#', 'function*')}}{{Spec2('ES6')}}Initial definition.
{{SpecName('ES6', '#sec-arrow-function-definitions', 'Arrow Function Definitions')}}{{Spec2('ES6')}}Initial definition.
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Generator function39{{CompatGeckoDesktop("26.0")}}{{CompatUnknown}}26{{CompatUnknown}}
Arrow function{{CompatNo}}{{CompatGeckoDesktop("22.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Generator function{{CompatUnknown}}39{{CompatGeckoMobile("26.0")}}{{CompatUnknown}}26{{CompatUnknown}}
Arrow function{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("22.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

See also

+ +
    +
  • {{jsxref("Statements/function", "function statement")}}
    • +
  • {{jsxref("Operators/function", "function expression")}}
    • +
  • {{jsxref("Statements/function*", "function* statement")}}
    • +
  • {{jsxref("Operators/function*", "function* expression")}}
    • +
  • {{jsxref("Function")}}
    • +
  • {{jsxref("GeneratorFunction")}}
    • +
  • {{jsxref("Functions/Arrow_functions", "Arrow functions")}}
    • +
  • {{jsxref("Functions/Default_parameters", "Default parameters")}}
    • +
  • {{jsxref("Functions/rest_parameters", "Rest parameters")}}
    • +
  • {{jsxref("Functions/arguments", "Arguments object")}}
    • +
  • {{jsxref("Functions/get", "getter")}}
    • +
  • {{jsxref("Functions/set", "setter")}}
    • +
  • {{jsxref("Functions/Method_definitions", "Method definitions")}}
    • +
  • Functions and function scope
    • +
diff --git a/files/it/web/javascript/reference/functions/set/index.html b/files/it/web/javascript/reference/functions/set/index.html new file mode 100644 index 0000000000..1af0f1c79d --- /dev/null +++ b/files/it/web/javascript/reference/functions/set/index.html @@ -0,0 +1,214 @@ +--- +title: setter +slug: Web/JavaScript/Reference/Functions_and_function_scope/set +tags: + - Funzioni + - JavaScript + - setter +translation_of: Web/JavaScript/Reference/Functions/set +--- +
{{jsSidebar("Functions")}}
+ +

Il costrutto sintattico set collega una proprietà di un oggetto ad una funzione che viene chiamata quando si ha un tentativo di modifica di quella proprietà.

+ +

Sintassi

+ +
{set prop(val) { . . . }}
+{set [expression](val) { . . . }}
+ +

Parametri

+ +
+
prop
+
Il nome della proprietà da collegare alla funzione data.
+
+ +
+
val
+
Un alias per la variabile che contiene il valore che si sta cercando di assegnare a prop.
+
expression
+
A partire da ECMAScript 6, è possibile anche usare espressioni per nomi di proprietà computate da collegare alla funzione data.
+
+ +

Descrizione

+ +

In JavaScript, un setter può essere utilizzato per eseguire una funzione ogniqualvolta una proprietà specificata sta per essere modificata. I setters sono quasi sempre utilizzati insieme ai getters per creare un tipo di pseudo proprietà. Non è possibile avere un setter su una normale proprietà che contiene un valore.

+ +

Alcune note da considerare quando si utilizza il costrutto sintattico set:

+ +
+ +
+ +

Un setter può essere eliminato usando l'operatore delete.

+ +

Esempi

+ +

Definire un setter per nuovi oggetti in inizializzatori di oggetti

+ +

Questo snippet di codice definisce una pseudo proprietà current di un oggetto o che, una volta che vi si assegna un valore, aggiornerà log con quel valore:

+ +
var o = {
+  set current (str) {
+    this.log[this.log.length] = str;
+  },
+  log: []
+}
+
+ +

Nota che  current non è definito ed ogni tentativo di accedervi risulterà in un undefined.

+ +

Rimuovere un setter con l'operatore delete

+ +

Se vuoi rimuovere il setter usato sopra, puoi semplicemente usare delete:

+ +
delete o.current;
+
+ +

Definire un setter su oggetti pre-esistenti usando defineProperty

+ +

Per aggiungere un setter ad un oggetto pre-esistente, usa{{jsxref("Object.defineProperty()")}}.

+ +
var o = { a:0 };
+
+Object.defineProperty(o, "b", { set: function (x) { this.a = x / 2; } });
+
+o.b = 10; // Runs the setter, which assigns 10 / 2 (5) to the 'a' property
+console.log(o.a) // 5
+ +

Usare il nome di una proprietà computata

+ +
+

Nota: Le proprietà computate sono una tecnologia sperimentale, parte dello standard proposto ECMAScript 6, e non sono ancora sufficientemente supportate dai browsers. L'uso di queste proprietà in ambienti che non le supportano produrrà un errore di sintassi.

+
+ +
var expr = "foo";
+
+var obj = {
+  baz: "bar",
+  set [expr](v) { this.baz = v; }
+};
+
+console.log(obj.baz); // "bar"
+obj.foo = "baz";      // run the setter
+console.log(obj.baz); // "baz"
+
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatusCommento
{{SpecName('ES5.1', '#sec-11.1.5', 'Object Initializer')}}{{Spec2('ES5.1')}}Definizione iniziale.
{{SpecName('ES6', '#sec-method-definitions', 'Method definitions')}}{{Spec2('ES6')}}Aggiunti i nomi di proprietà computate.
{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}{{Spec2('ESDraft')}}
+ +

Compatibilità dei browsers

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaratteristicaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Supporto base{{CompatChrome(1)}}{{ CompatGeckoDesktop("1.8.1") }}{{ CompatIE(9) }}9.53
Nomi di proprietà computate{{CompatNo}}{{ CompatGeckoDesktop("34") }}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaratteristicaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Supporto base{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{ CompatGeckoMobile("1.8.1") }}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Nomi di proprietà computate{{CompatNo}}{{CompatNo}}{{ CompatGeckoMobile("34.0") }}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Note specifiche per SpiderMonkey

+ +
    +
  • A partire da JavaScript 1.8.1,  i setters non sono più chiamati durante il setting delle properietà negli inizializzatori di oggetti od array.
    • +
  • A partire da SpiderMonkey 38, un setter con {{jsxref("Functions/rest_parameters", "rest parameter", "", 1)}} produce un {{jsxref("SyntaxError")}} come  da specifica ES6.
    • +
+ +

Guarda anche

+ +
    +
  • getter
    • +
  • {{jsxref("Operators/delete", "delete")}}
    • +
  • {{jsxref("Object.defineProperty()")}}
    • +
  • {{jsxref("Object.defineGetter", "__defineGetter__")}}
    • +
  • {{jsxref("Object.defineSetter", "__defineSetter__")}}
    • +
  • Defining Getters and Setters nella guida JavaScript
    • +
diff --git a/files/it/web/javascript/reference/functions_and_function_scope/arguments/index.html b/files/it/web/javascript/reference/functions_and_function_scope/arguments/index.html deleted file mode 100644 index c277074bca..0000000000 --- a/files/it/web/javascript/reference/functions_and_function_scope/arguments/index.html +++ /dev/null @@ -1,224 +0,0 @@ ---- -title: Oggetto 'arguments' -slug: Web/JavaScript/Reference/Functions_and_function_scope/arguments -translation_of: Web/JavaScript/Reference/Functions/arguments ---- -
-
{{jsSidebar("Functions")}}
-
- -

L'oggetto arguments è un oggetto Array-like corrispondente agli argomenti passati in una funzione 

- -

{{EmbedInteractiveExample("pages/js/functions-arguments.html")}}

- - - -

Sintassi

- -
arguments
- -

Descrizione

- -

L'oggetto arguments è una variabile locale disponibile in tutte le funzioni (non-arrow). Si può fare riferimento agli argomenti di una funzione, al suo interno, usando l'oggetto  arguments. Questo oggetto contiene un elemento per ogni argomento passato alla funzione, il primo elemento è indicizzato a 0. Per esempio, se a una funzione sono passati tre argomenti, ci si può riferire ad essi come segue:

- -
arguments[0]
-arguments[1]
-arguments[2]
-
- -

Gli argomenti possono anche essere settati:

- -
arguments[1] = 'nuovo valore';
-
- -

L'oggetto arguments non è un {{jsxref("Array")}}. E' simile a un  Array, ma non ha le proprietà dell'Array, eccetto length. Per esempio, non ha il metodo pop. Tuttavia può essere convertito in un vero Array:

- -
var args = Array.prototype.slice.call(arguments);
-var args = [].slice.call(arguments);
-
-// ES2015
-const args = Array.from(arguments);
-
- -
-

Usare slice su arguments impedisce le ottimizzazioni in alcuni motori JavaScript (per esempio V8 - più informazioni). Se ne avete bisogno, provate a costruire un nuovo array iterando sull'oggetto arguments, piuttosto. Un'alternativa potrebbe essere usare l'odiato costruttore Array come una funzione:

- -
var args = (arguments.length === 1 ? [arguments[0]] : Array.apply(null, arguments));
-
- -

Si può usare l'oggetto arguments se si chiama una funzione con più argomenti di quanti la funzione dichiari formalmente di accettare. Questa tecnica è utile per le funzioni cui possono essere passati un numero variabile di argomenti. Si usi arguments.length per determinare il numero di argomenti passati alla funzione, e quindi si processi ogni argomento usando l'oggetto arguments. Per determinare il numero di parametri presenti nella dichiarazione di una funzione, si usi la proprietà Function.length.

- -

Usare typeof con Arguments

- -

Il typeof di arguments ritorna 'object'. 

- -
console.log(typeof arguments); // 'object'
- -

Il typeof di ogni signolo argomento può essere determinato con l'uso degli indici.

- -
console.log(typeof arguments[0]); //this will return the typeof individual arguments.
- -

Usare la sintassi Spread con Arguments

- -

Come è possibile fare con qualsiasi oggetto Array-like, si può usare il metodo {{jsxref("Array.from()")}} o lo spread operator per convertire arguments in un vero Array:

- -
var args = Array.from(arguments);
-var args = [...arguments];
-
- -

Proprietà

- -
-
arguments.callee
-
Riferimento alla funzione in esecuzione.
-
arguments.caller {{ Obsolete_inline() }}
-
Riferimento alla funzione che ha invocato la funzione in esecuzione.
-
arguments.length
-
Riferimento al numero di argomenti passati alla funzione.
-
arguments[@@iterator]
-
Ritorna un nuovo oggetto Array Iterator che contiene i valori per ogni indice in arguments.
-
- -

Esempi

- -

Definire una funzione che concatena divere stringhe 

- -

Questo esempio definisce una funzione che concatena diverse stringhe. L'unico argomento formale per la funzione è una stringa che specifica il carattere di separazione per gli elementi da concatenare. La funzione si definisce come segue:

- -
function myConcat(separator) {
-  var args = Array.prototype.slice.call(arguments, 1);
-  return args.join(separator);
-}
- -

Si può passare un numero indefinito di argomenti a questa funzione, e lei creerà una lista inserendo ciascun argomento come item della lista. 

- -
// returns "red, orange, blue"
-myConcat(', ', 'red', 'orange', 'blue');
-
-// returns "elephant; giraffe; lion; cheetah"
-myConcat('; ', 'elephant', 'giraffe', 'lion', 'cheetah');
-
-// returns "sage. basil. oregano. pepper. parsley"
-myConcat('. ', 'sage', 'basil', 'oregano', 'pepper', 'parsley');
- -

Definire una funzione che crea liste HTML

- -

Questo esempio definisce una funzione che crea una stringa contenente l'HTML di una lista. L'unico argomento formale della funzione è una  stringa che è "u" se la lista deve essere ordinata, e "o" se la lista deve essere ordinata (numerata). La funzione è definita come segue:

- -
function list(type) {
-  var result = '<' + type + 'l><li>';
-  var args = Array.prototype.slice.call(arguments, 1);
-  result += args.join('</li><li>');
-  result += '</li></' + type + 'l>'; // end list
-
-  return result;
-}
- -

Si può passare un numero indefinito di argomenti a questa funzione, e lei aggiungerà ogni argomento come un elemento della lista del tipo indicato. Per esempio:

- -
var listHTML = list('u', 'One', 'Two', 'Three');
-
-/* listHTML is:
-
-"<ul><li>One</li><li>Two</li><li>Three</li></ul>"
-
-*/
- -

Parametri rest, default, e destructured

- -

L'oggetto arguments può essere usato insieme a parametri rest, default, e destructured.

- -
function foo(...args) {
-  return args;
-}
-foo(1, 2, 3); // [1,2,3]
-
- -

Sebbene la presenza di parametri rest, default, o destructured non altera il comportamento dell'oggetto arguments nel codice scritto in strict mode, c'è una sottile differenza tra modalità strict e non-strict.

- -

Quando una funzione non-strict non contiene parametri rest, default, o destructured, allora i valori nell'oggetto arguments  tracciano il valore degli argomenti (e vice versa). Si guardi il codice qui sotto:

- -
function func(a) {
-  arguments[0] = 99; // updating arguments[0] also updates a
-  console.log(a);
-}
-func(10); // 99
-
- -

e

- -
function func(a) {
-  a = 99; // updating a also updates arguments[0]
-  console.log(arguments[0]);
-}
-func(10); // 99
-
- -

Quando una funzione non-strict contiene parametri rest, default, o destructured, allora i valori nell'oggetto arguments non tracciano il valore degli argomenti (e vice versa). Al contrario, riflettono gli argomenti forniti al momento dell'invocazione:

- -
function func(a = 55) {
-  arguments[0] = 99; // updating arguments[0] does not also update a
-  console.log(a);
-}
-func(10); // 10
- -

e

- -
function func(a = 55) {
-  a = 99; // updating a does not also update arguments[0]
-  console.log(arguments[0]);
-}
-func(10); // 10
-
- -

e

- -
function func(a = 55) {
-  console.log(arguments[0]);
-}
-func(); // undefined
- -

Specifiche

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('ES1')}}{{Spec2('ES1')}}Definizione iniziale. Impelementata in JavaScript 1.1
{{SpecName('ES5.1', '#sec-10.6', 'Arguments Object')}}{{Spec2('ES5.1')}} 
{{SpecName('ES2015', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}{{Spec2('ES2015')}} 
{{SpecName('ESDraft', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}{{Spec2('ESDraft')}} 
- -

Browser compatibility

- - - -

{{Compat("javascript.functions.arguments")}}

- -

Si guardi anche

- -
    -
  • {{jsxref("Function")}}
    • -
diff --git a/files/it/web/javascript/reference/functions_and_function_scope/arrow_functions/index.html b/files/it/web/javascript/reference/functions_and_function_scope/arrow_functions/index.html deleted file mode 100644 index 2dd258966d..0000000000 --- a/files/it/web/javascript/reference/functions_and_function_scope/arrow_functions/index.html +++ /dev/null @@ -1,394 +0,0 @@ ---- -title: Funzioni a freccia -slug: Web/JavaScript/Reference/Functions_and_function_scope/Arrow_functions -tags: - - ECMAScript6 - - Funzioni - - Intermediate - - JavaScript - - Reference -translation_of: Web/JavaScript/Reference/Functions/Arrow_functions ---- -
{{jsSidebar("Functions")}}
- -

Una funzione a freccia ha una sintassi più compatta rispetto alla notazione a funzione e non associa i propri this, arguments, super o new.target. Le funzioni a freccia sono sempre anonime. Questa notazione è maggiormente indicata per le funzioni che non sono metodi, e non possono essere usate come costruttori.

- -

Sintassi

- -

Sintassi di base

- -
(param1, param2, …, paramN) => { statements }
-(param1, param2, …, paramN) => expression
-// equivalente a: (param1, param2, …, paramN) => { return expression; }
-
-// Le Parentesi sono opzionali se è presente un solo parametro:
-(singleParam) => { statements }
-singleParam => { statements }
-
-// Una funzione senza parametri richiede comunque le parentesi:
-() => { statements }
-() => expression // equivalente a: () => { return expression; }
-
- -

Sintassi avanzata

- -
// Il body tra parentesi indica la restituzione di un oggetto:
-params => ({foo: bar})
-
-// Sono supportati ...rest e i parametri di default
-(param1, param2, ...rest) => { statements }
-(param1 = defaultValue1, param2, …, paramN = defaultValueN) => { statements }
-
-// Si può anche destrutturare all'interno della lista dei parametri
-var f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
-f();  // 6
-
- -

Esempi dettagliati di sintassi sono disponibili qui.

- -

Descrizione

- -

Vedi anche "ES6 In Depth: Arrow functions" su hacks.mozilla.org.

- -

L'introduzione delle funzioni a freccia è stata influenzata da due fattori: sintassi più compatta e la non associazione di this.

- -

Funzioni più corte

- -

In alcuni pattern, è meglio avere funzioni più corte. Per comparazione:

- -
var materials = [
-  "Hydrogen",
-  "Helium",
-  "Lithium",
-  "Beryllium"
-];
-
-materials.map(function(material) {
-  return material.length;
-}); // [8, 6, 7, 9]
-
-materials.map((material) => {
-  return material.length;
-}); // [8, 6, 7, 9]
-
-materials.map(material => material.length); // [8, 6, 7, 9]
- -

Mancato binding di this

- -

Prima delle funzioni a freccia, ogni nuova funzione definiva il proprio  this (un nuovo oggetto nel caso di un costruttore, undefined se una funzione viene chiamata in strict mode, l'oggetto di contesto se la funzione viene chiamata come "metodo", etc.). Questo è risultato fastidioso in uno stile di programmazione orientato agli oggetti.

- -
function Person() {
-  // The Person() constructor defines `this` as an instance of itself.
-  this.age = 0;
-
-  setInterval(function growUp() {
-    // In non-strict mode, the growUp() function defines `this`
-    // as the global object, which is different from the `this`
-    // defined by the Person() constructor.
-    this.age++;
-  }, 1000);
-}
-
-var p = new Person();
- -

In ECMAScript 3/5, questo problema veniva aggirato assegnando il valore this a una variabile.

- -
function Person() {
-  var that = this;
-  that.age = 0;
-
-  setInterval(function growUp() {
-    // The callback refers to the `that` variable of which
-    // the value is the expected object.
-    that.age++;
-  }, 1000);
-}
- -

In alternativa, poteva essere usato Function.prototype.bind per assegnare il valore corretto di this da usare nella funzione  growUp().

- -

Una funziona a freccia invece non crea  il proprio this, e quindi this mantiene il significato che aveva all'interno dello scope genitore. Perciò il codice seguente funziona come ci si aspetta.

- -
function Person(){
-  this.age = 0;
-
-  setInterval(() => {
-    this.age++; // |this| properly refers to the person object
-  }, 1000);
-}
-
-var p = new Person();
- -

Relazione con strict mode

- -

Poiché  this è lessicale, le regole di strict mode relative a this sono semplicemente ignorate.

- -
var f = () => {'use strict'; return this};
-f() === window; // o l'oggetto globale
- -

Il resto delle regole si applica normalmente.

- -

Invocazione attraverso call or apply

- -

Poiché this non viene assegnato nelle funzioni a freccia, i metodi call() o apply() possono passare solo come argomenti; this viene ignorato:

- -
var adder = {
-  base : 1,
-
-  add : function(a) {
-    var f = v => v + this.base;
-    return f(a);
-  },
-
-  addThruCall: function(a) {
-    var f = v => v + this.base;
-    var b = {
-      base : 2
-    };
-
-    return f.call(b, a);
-  }
-};
-
-console.log(adder.add(1));         // This would log to 2
-console.log(adder.addThruCall(1)); // This would log to 2 still
- -

Mancato binding di arguments

- -

Le funzioni a freccia non definiscono il proprio  arguments. Perciò, arguments è semplicemente una reference alla variabile nello scope genitore.

- -
var arguments = 42;
-var arr = () => arguments;
-
-arr(); // 42
-
-function foo() {
-  var f = (i) => arguments[0]+i; // foo's implicit arguments binding
-  return f(2);
-}
-
-foo(1); // 3
- -

Le funzioni a freccia non hanno il proprio oggetto arguments, ma in molti casi  i parametri rest rappresentano una valida alternativa:

- -
function foo() {
-  var f = (...args) => args[0];
-  return f(2);
-}
-
-foo(1); // 2
- -

Funzioni a freccia come metodi

- -

Come già citato, le funzioni a freccia sono sconsigliate come metodi. Vediamo cosa succede quando proviamo a usarle: 

- -
'use strict';
-var obj = {
-  i: 10,
-  b: () => console.log(this.i, this),
-  c: function() {
-    console.log( this.i, this)
-  }
-}
-obj.b(); // prints undefined, Window
-obj.c(); // prints 10, Object {...}
- -

Le funzioni a freccia non definiscono  ("bind") il proprio this. un altro esempio usando {{jsxref("Object.defineProperty()")}}:

- -
'use strict';
-var obj = {
-  a: 10
-};
-
-Object.defineProperty(obj, "b", {
-  get: () => {
-    console.log(this.a, typeof this.a, this);
-    return this.a+10; // represents global object 'Window', therefore 'this.a' returns 'undefined'
-  }
-});
-
- -

Uso dell'operatore new 

- -

Le funzioni a freccia non possono essere usate come costruttori, ed emetteranno un errore se usate con new.

- -

Uso di yield 

- -

La keyword yield non deve essere usata nel body di una funzione a freccia (eccetto quando permesso in eventuali funzioni al loro interno). Conseguentemente, le funzioni a freccia non possono essere usate come generatori.

- -

Body della funzione

- -

Le funzioni a freccia possono avere un "body conciso" o l'usuale "blocco body".

- -

Nel primo caso è necessaria solo un'espressione, e il return è implicito. Nel secondo caso, devi usare esplicitamente return.

- -
var func = x => x * x;                  // concise syntax, implied "return"
-var func = (x, y) => { return x + y; }; // with block body, explicit "return" needed
-
- -

Restituire object literals

- -

Tieni a mente che restituire oggetti letterali usando la sintassi concisa  params => {object:literal} non funzionerà:

- -
var func = () => {  foo: 1  };               // Calling func() returns undefined!
-var func = () => {  foo: function() {}  };   // SyntaxError: function statement requires a name
- -

Questo perché il codice all'interno delle parentesi graffe ({}) è processato come una sequenza di statement (i.e. foo è trattato come un label, non come una key di un oggetto).

- -

Tuttavia, è sufficente racchiudere l'oggetto tra parentesi tonde:

- -
var func = () => ({ foo: 1 });
- -

Newline

- -

Le funzioni a freccia non possono contenere un newline tra i parametri e la freccia.

- -
var func = ()
-           => 1; // SyntaxError: expected expression, got '=>'
- -

Ordine di parsing

- -

La freccia in una funziona a freccia non è un'operatore, ma le funzioni a freccia hanno delle regole di parsing specifiche che interagiscono differentemente con la precedenza degli operatori, rispetto alle funzioni normali.

- -
let callback;
-
-callback = callback || function() {}; // ok
-callback = callback || () => {};      // SyntaxError: invalid arrow-function arguments
-callback = callback || (() => {});    // ok
-
- -

Altri esempi

- -
// Una funzione a freccie vuota restituisce undefined
-let empty = () => {};
-
-(() => "foobar")() // IIFE, restituisce "foobar"
-
-var simple = a => a > 15 ? 15 : a;
-simple(16); // 15
-simple(10); // 10
-
-let max = (a, b) => a > b ? a : b;
-
-// Più semplice gestire filtering, mapping, ... di array
-
-var arr = [5, 6, 13, 0, 1, 18, 23];
-var sum = arr.reduce((a, b) => a + b);  // 66
-var even = arr.filter(v => v % 2 == 0); // [6, 0, 18]
-var double = arr.map(v => v * 2);       // [10, 12, 26, 0, 2, 36, 46]
-
-// Le catene di promise sono più concise
-promise.then(a => {
-  // ...
-}).then(b => {
-   // ...
-});
-
-// le funzioni a freccia senza parametri sono più semplici da visualizzare
-setTimeout( _ => {
-  console.log("I happen sooner");
-  setTimeout( _ => {
-    // deeper code
-    console.log("I happen later");
-  }, 1);
-}, 1);
-
- -

 

- -

 

- -

 

- -

Specifiche

- - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('ES6', '#sec-arrow-function-definitions', 'Arrow Function Definitions')}}{{Spec2('ES6')}}Initial definition.
{{SpecName('ESDraft', '#sec-arrow-function-definitions', 'Arrow Function Definitions')}}{{Spec2('ESDraft')}} 
- -

Compatibilità dei Browser 

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)EdgeIEOperaSafari
Basic support{{CompatChrome(45.0)}}{{CompatGeckoDesktop("22.0")}}{{CompatVersionUnknown}} -

{{CompatNo}}

- 		{{CompatOpera(32)}}{{CompatSafari(10.0)}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatChrome(45.0)}}{{CompatGeckoMobile("22.0")}}{{CompatNo}}{{CompatNo}}{{CompatSafari(10.0)}}{{CompatChrome(45.0)}}
-
- -

Note specifiche per Firefox

- -
    -
  • L'implementazione iniziale delle funzioni a freccia in Firefox le rendeva automaticamente strict. Questo è cambiato da Firefox 24. L'uso di "use strict"; è ora obbligatorio.
    • -
  • Le funzioni a freccia sono semanticamente differenti dalle  non-standard {{jsxref("Operators/Expression_Closures", "expression closures", "", 1)}} aggiunte in Firefox 3 (details: JavaScript 1.8), perché {{jsxref("Operators/Expression_Closures", "expression closures", "", 1)}} non assegnano this in modo lessicale.
    • -
  • Fino a Firefox 39, un newline (\n) era erroneamente accettato dopo i parametri della funzione. Questo è stato risolto in conformità alle specifiche ES6 e codice come () \n => {} emetterà un {{jsxref("SyntaxError")}} in questa versione e successive.
    • -
- -

Vedi anche

- - diff --git a/files/it/web/javascript/reference/functions_and_function_scope/get/index.html b/files/it/web/javascript/reference/functions_and_function_scope/get/index.html deleted file mode 100644 index 0ed76cf469..0000000000 --- a/files/it/web/javascript/reference/functions_and_function_scope/get/index.html +++ /dev/null @@ -1,154 +0,0 @@ ---- -title: getter -slug: Web/JavaScript/Reference/Functions_and_function_scope/get -translation_of: Web/JavaScript/Reference/Functions/get ---- -
{{jsSidebar("Functions")}}
- -

La sintassi get  associa una proprietà dell'oggetto a una funzione che verrà chiamata quando la proprietà verrà richiesta.

- -
{{EmbedInteractiveExample("pages/js/functions-getter.html")}}
- - - -

Sintassi

- -
{get prop() { ... } }
-{get [expression]() { ... } }
- -

Parametri

- -
-
prop
-
Il nome della proprietà da associare alla funzione specificata.
-
espressione
-
A partire da ECMAScript 2015, è anche possibile utilizzare espressioni per un nome di proprietà calcolato per associarsi alla funzione specificata.
-
- -

Descrizione

- -

A volte è preferibile consentire l'accesso a una proprietà che restituisce un valore calcolato in modo dinamico, oppure è possibile che si desideri riflettere lo stato di una variabile interna senza richiedere l'uso di chiamate esplicite al metodo. In JavaScript, questo può essere realizzato con l'uso di un getter. Non è possibile avere simultaneamente un getter legato a una proprietà e avere quella proprietà contenuta in un valore, anche se è possibile usare un getter e un setter insieme per creare un tipo di pseudo-proprietà.

- -

Tieni presente quanto segue quando lavori con la sintassi get:

- -
- -
- -

Un getter può essere rimosso usando l'operatore  delete

- -

Esempi

- -

Definizione di un getter sui nuovi oggetti negli inizializzatori di oggetti

- -

Questo creerà una pseudo-proprietà latest più recente per object obj, che restituirà l'ultimo elemento dell'array in log.

- -
var obj = {
-  log: ['example','test'],
-  get latest() {
-    if (this.log.length == 0) return undefined;
-    return this.log[this.log.length - 1];
-  }
-}
-console.log(obj.latest); // "test".
-
- -

Si noti che il tentativo di assegnare un valore a latest non lo cambierà.

- -

Cancellare un getter usando l'operatore delete

- -

Se vuoi rimuovere il getter, puoi semplicemente usare delete :

- -
delete obj.latest;
-
- -

Definire un getter su un oggetto esistente usando defineProperty

- -

Per aggiungere un getter a un oggetto esistente in un secondo momento, usa {{jsxref("Object.defineProperty()")}}.

- -
var o = {a: 0};
-
-Object.defineProperty(o, 'b', { get: function() { return this.a + 1; } });
-
-console.log(o.b) // Runs the getter, which yields a + 1 (which is 1)
- -

Utilizzando un nome di proprietà calcolato

- -
var expr = 'foo';
-
-var obj = {
-  get [expr]() { return 'bar'; }
-};
-
-console.log(obj.foo); // "bar"
- -

Smart / self-overwriting / lazy getters

- -

I getter ti danno un modo per definire una proprietà di un oggetto, ma non calcolano il valore della proprietà finché non avviene l'accesso. Un getter rinvia il costo del calcolo del valore fino a quando il valore è necessario e, se non è mai necessario, non si paga mai il costo.

- -

Un'ulteriore tecnica di ottimizzazione per lazificare o ritardare il calcolo di un valore di una proprietà e memorizzarla nella cache per un accesso successivo sono smart o memoized getters. Il valore viene calcolato la prima volta che viene chiamato il getter e viene quindi memorizzato nella cache in modo che gli accessi successivi restituiscano il valore memorizzato nella cache senza ricalcolarlo. Questo è utile nelle seguenti situazioni:

- -
    -
  • Se il calcolo di un valore di una proprietà è costoso (richiede molta RAM o tempo di CPU, genera thread di lavoro, recupera file remoto, ecc.).
    • -
  • Se il valore non è necessario solo ora. Sarà usato più tardi, o in alcuni casi non è usato affatto.
    • -
  • Se viene utilizzato, sarà accessibile più volte e non è necessario ricalcolare il valore che non verrà mai modificato o non dovrebbe essere ricalcolato.
    • -
- -

Ciò significa che non si dovrebbe usare un getter pigro per una proprietà il cui valore si prevede possa cambiare, poiché il getter non ricalcola il valore.

- -

Nell'esempio seguente, l'oggetto ha un getter come proprietà propria. Quando si ottiene la proprietà, la proprietà viene rimossa dall'oggetto e riaggiunta, ma questa volta implicitamente come proprietà dei dati. Alla fine il valore viene restituito.

- -
get notifier() {
-  delete this.notifier;
-  return this.notifier = document.getElementById('bookmarked-notification-anchor');
-},
- -

Per il codice di Firefox, vedere anche il modulo del codice XPCOMUtils.jsm, che definisce la funzione defineLazyGetter().

- -

Specificazioni

- - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('ES5.1', '#sec-11.1.5', 'Object Initializer')}}{{Spec2('ES5.1')}}Definizione iniziale.
{{SpecName('ES2015', '#sec-method-definitions', 'Method definitions')}}{{Spec2('ES2015')}}Aggiunti nomi di proprietà calcolate.
{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}{{Spec2('ESDraft')}} 
- -

Compatibilità con il browser

- - - -

{{Compat("javascript.functions.get")}}

- -

Guarda anche

- -
    -
  • setter
    • -
  • {{jsxref("Operators/delete", "delete")}}
    • -
  • {{jsxref("Object.defineProperty()")}}
    • -
  • {{jsxref("Object.defineGetter", "__defineGetter__")}}
    • -
  • {{jsxref("Object.defineSetter", "__defineSetter__")}}
    • -
  • Defining Getters and Setters in JavaScript Guide
    • -
diff --git a/files/it/web/javascript/reference/functions_and_function_scope/index.html b/files/it/web/javascript/reference/functions_and_function_scope/index.html deleted file mode 100644 index 8a5255282c..0000000000 --- a/files/it/web/javascript/reference/functions_and_function_scope/index.html +++ /dev/null @@ -1,617 +0,0 @@ ---- -title: Funzioni -slug: Web/JavaScript/Reference/Functions_and_function_scope -translation_of: Web/JavaScript/Reference/Functions ---- -
{{jsSidebar("Functions")}}
- -

Parlando in termini generici, una funzione è un "sottopogramma" che può essere chiamato da un codice esterno (o interno nel caso di ricorsione) alla funzione stessa. Come il programma stesso, una funzione è composta da una sequenza di istruzioni chiamata corpo della funzione. Ad una funzione possono essere passati valori, e la funzione restituisce un valore.

- -

In JavaScript, le funzioni sono oggetti di prima classe, perchè sono dotate di proprietà e di metodi, proprio come qualsiasi altro oggetto. Ciò che le distingue dagli altri oggetti è la possibilità di essere chiamate ( invocate ). Le funzioni sono oggetti di tipo Function.

- -

Per maggiori esempi e spiegazioni, vedere anche JavaScript la guida sulle funzioni.

- -

Descrizione

- -

Ogni funzione in JavaScript è un oggetto di tipo Function. Vedi la pagina Function for informazioni su proprietà e metodi dell'oggetto Function.

- -

Le funzioni non sono come le procedure. Una funzione restituisce sempre un valore, mentre una procedura può anche non restituire alcun valore.

- -

Per restituire un valore specifico differente da quello di default, una fuzione deve avere un istruzione return che specifica il valore di ritorno. Una funzione senza un istruzione di ritorno restituirà il valore di  default. Nel caso di un costruttore invocato con la parola chiave new, il valore di default è il valore del suo parametro this. Per tutte le altre funzioni, il valore di ritorno di default è undefined.

- -

I parametri di una chiamata di funzione sono gli argomenti della funzione. Gli argomenti sono passati alla funzione per valore. Se la funzione cambia il valore di un argomento, questo cambiamento non si riflette globalmente o nella funzione chiamante. Sebbene anche i riferimenti a oggetti siano valori, essi sono speciali: se una funzione cambia le proprietà di un oggetto a cui riferisce, quel cambiamento è visibile anche al di fuori della funzione, come dimostrato nel seguente esempio:

- -
/* Dichiarazione della funzione 'myFunc' */
-function myFunc(theObject) {
-   theObject.brand = "Toyota";
- }
-
- /*
-  * Dichiarazione della variabile 'mycar';
-  * creazione e inizializzazione di un nuovo Object;
-  * associazione alla riferimento 'mycar'
-  */
- var mycar = {
-   brand: "Honda",
-   model: "Accord",
-   year: 1998
- };
-
- /* Logs 'Honda' */
- console.log(mycar.brand);
-
- /* Passaggio del riferimento dell'oggetto alla funzione */
- myFunc(mycar);
-
- /*
-  * Logs 'Toyota' come il valore della proprietà 'brand'
-  * dell'oggetto, come è stato cambiato dalla funzione.
-  */
- console.log(mycar.brand);
-
- -

NB: l'oggetto console non è un oggetto standard. Non usatelo in un sito web, poichè potrebbe non funzionare correttamente. Per verificare il funzionamento dell'esempio precedente, usate, piuttosto:

- -

           window.alert(mycar.brand);

- -

La parola chiave this non fa riferimento alla funzione attualmente in esecuzione, per questo motivo si deve far riferimento ad oggetti Function  per nome, anche quando all'interno del corpo della funzione stessa.

- -

Definizione di funzioni

- -

Ci sono diversi modi per definire le funzioni:

- -

La dichiarazione di funzione (istruzione function)

- -

C'è una speciale sintassi per la dichiarazione di funzioni (per dettagli guarda function statement):

- -
function name([param[, param[, ... param]]]) {
-   statements
-}
-
- -
-
name
-
Il nome della funzione
-
- -
-
param
-
Il nome di un argomento da passare alla funzione. Una funzione può avere fino a 255 argomenti.
-
- -
-
statements
-
Le istruzioni comprese nel corpo della funzione.
-
- -

L'espressione di funzione (espressione function)

- -

Una espressione di funzione è simile ed ha la stessa sintassi della dichiarazione di funzione (per dettagli guarda function expression):

- -
function [name]([param] [, param] [..., param]) {
-   statements
-}
-
- -
-
name
-
Il nome della funzione. Può essere omesso, in qual caso la funzione è nota come funzione anonima.
-
- -
-
param
-
Il nome di un argomento da passare alla funzione. Una funzione può avere fino a 255 argomenti.
-
statements
-
Le istruzioni comprese nel corpo della funzione.
-
- -

La dichiarazione di funzione generatrice (espressione function*)

- -
-

Note: Le funzioni generatrici sono un tecnologia sperimentale, parte della proposta di specifica ECMAScript 6, e non sono ancora ampiamente supportate dai browsers.

-
- -

C'è una sintassi speciale per le funzioni generatrici (per dettagli vedi function* statement ):

- -
function* name([param[, param[, ... param]]]) {
-   statements
-}
-
- -
-
name
-
Nome della funzione.
-
- -
-
param
-
Nome dell'argomento da passare alla funzione. Una funzione può avere fino a 255 agromenti.
-
- -
-
statements
-
Le istruzioni comprese nel corpo della funzione.
-
- -

L'espressione di funzione generatrice (espressione function*)

- -
-

Note: Le funzioni generatrici sono una tecnologia sperimentale, parte della proposta di specifica ECMAScript 6, e non sono ancora ampiamente supportamente dai browsers.

-
- -

Una espressione di funzione generatrice è similare ed ha la stessa sintassi di una dichiarazione di funzione generatrice (per dettagli vedi function* expression ):

- -
function* [name]([param] [, param] [..., param]) {
-   statements
-}
-
- -
-
name
-
Nome della funzione. Può essere omesso, nel qual caso la funzione è nota come funzione anonima.
-
- -
-
param
-
-
Nome dell'argomento da passare alla funzione. Una funzione può avere fino a 255 agromenti.
-
-
statements
-
Le istruzioni comprese nel corpo della funzione.
-
- -

L'espressione di funzione a freccia (=>)

- -
-

Note: L'espressione di funzione a freccia sono una tecnologia sperimentare, parte della proposta di specifica ECMAScript 6, e non sono ancora ampiamente supportate dai browsers.

-
- -

Un' espressione di funzione a freccia ha una sintassi ridotta e lessicalmnete associa il proprio valore this (per dettagli vedere arrow functions ):

- -
([param] [, param]) => {
-   statements
-}
-
-param => expression
-
- -
-
param
-
Il nome di un parametro. È necessario indicare l'assenza di parametri con (). Le parentesi non sono richieste nel caso in cui ci sia solo un parametro (come foo => 1).
-
statements or expression
-
Molteplici istruzioni devono essere racchiuse tra parentesi. Una singola espressione non necessita di parantesi. expression è anche l'implicito valore restituito dalla funzione.
-
- -

Il costruttore Function

- -
-

Nota: l'utilizzo del costruttore Function per creare funzioni non è raccomandato, poichè richiede che il corpo della funzione sia scritto come stringa, fatto che può comportare una mancata ottimizzazione da parte di alcuni motori javascript e causare altri problemi.

-
- -

Come tutti gli altri oggetti, un oggetto Function può essere creato utilizzando l'operatore new:

- -
new Function (arg1, arg2, ... argN, functionBody)
-
- -
-
arg1, arg2, ... argN
-
Zero o più nomi da usare come nomi formali di argomenti. Ciascun nome deve essere rappresentato da una stringa testuale che sia conforme alle norme che regolano la definizione di identificatori JavaScript validi, oppure da una lista di stringhe testuali, separate da una virgola; per esempio: "x", "theValue", oppure "a,b".
-
- -
-
functionBody
-
Una stringa testuale che contenga le istruzioni Javascript comprese nella definizione della funzione.
-
- -

Invocare il costruttore Function come funzione ( senza utilizzare l'operatore new ) ha lo stesso effetto di quando lo si invoca come costruttore.

- -

Il costruttore GeneratorFunction

- -
-

Nota: le espressioni di funzione a freccia ( arrow function expression ) sono una tecnologia sperimentale, parte della proposta ECMAScript 6, e non sono ancora completamente supportate dai browser.

-
- -
-

Nota: il costruttore GeneratorFunction non è un oggetto globale, ma può essere ottenuto dall'istanza della funzione generatrice ( vedi GeneratorFunction per maggiori dettagli ).

-
- -
-

Nota: l'utilizzo del costruttore GeneratorFunction per creare funzioni non è raccomandato, poichè richiede che il corpo della funzione sia scritto come stringa, fatto che può comportare una mancata ottimizzazione da parte di alcuni motori javascript e causare altri problemi.

-
- -

Come tutti gli altri oggetti, un oggetto GeneratorFunction può essere creato utilizzando l'operatore new:

- -
new GeneratorFunction (arg1, arg2, ... argN, functionBody)
-
- -
-
arg1, arg2, ... argN
-
Zero o più nomi da usare come nomi formali di argomenti. Ciascun nome deve essere rappresentato da una stringa testuale che sia conforme alle norme che regolano la definizione di identificatori JavaScript validi, oppure da una lista di stringhe testuali, separate da una virgola; per esempio: "x", "theValue", oppure "a,b".
-
- -
-
functionBody
-
Una stringa testuale che contenga le istruzioni Javascript comprese nella definizione della funzione.
-
- -

Invocare il costruttore Function come funzione ( senza utilizzare l'operatore new ) ha lo stesso effetto di quando lo si invoca come costruttore.

- -

I parametri di una funzione

- -
-

Nota: i parametri di default ed i parametri rest sono tecnologie sperimentali, parte della proposta  ECMAScript 6, e non sono ancora completamente supportati dai browser.

-
- -

Parametri di default

- -

La sintassi per definire i valori di default dei parametri di una funzione permette di inizializzare i parametri formali con valori di default, sempre che non venga passato il valore undefined oppure non venga passato alcun valore. Per maggiori dettagli, vedi default parameters.

- -

I parametri Rest

- -

La sintassi per i parametri rest permette di rappresentare un indefinito numero di argomenti come un array. Per maggiori dettagli, vedi rest parameters.

- -

L'oggetto arguments

- -

È possibile riferirsi agli argomenti di una funzione, all'interno della funzione, utilizzando l'oggetto arguments. Vedi arguments.

- -
    -
  • arguments: un oggetto, strutturato come un array, contenente gli argomenti passati alla funzione in esecuzione.
    • -
  • arguments.callee {{Deprecated_inline}}: la funzione in esecuzione.
    • -
  • arguments.caller {{Obsolete_inline}} : la funzione che ha invocato la funzione in esecuzione.
    • -
  • arguments.length: il numero degli argomenti passati alla funzione.
    • -
- -

Definire metodi

- -

Funzioni Getter e setter

- -

È possibile definire metodi getter ( accessor method: metodi per l'accesso al valore di una variabile privata ) e metodi setter ( mutator method: metodi per la modifica del valore di una variabile privata ) per qulasiasi oggetto standard built-in o per qualsiasi oggetto definito dall'utente che supporti l'aggiunta di nuove proprietà. La sintassi da usare per la definizione di metodi getter e setter utilizza la sintassi per la definizione di valori letterali.

- -
-
get
-
-

Lega ( bind ) una proprietà di un oggetto ad una funzione, che verrà invocata ogni volta in cui si cercherà di leggere il valore di quella proprietà.

-
-
set
-
Lega ( bind ) una proprietà di un oggetto alla funzione da invocare ogni volta in cui si cercherà di modificare il valore di quella proprietà.
-
- -

Sintassi per la definizione dei metodi

- -
-

Nota: le definizioni dei metodi sono tecnologie sperimentali, parte della proposta  ECMAScript 6, e non sono ancora completamente supportate dai browser.

-
- -

A partire da ECMAScript 6, è possibile definire propri metodi usando una sintassi più breve, simile alla sintassi usata per i metodi getter e setter. Vedi method definitions per maggiori informazioni.

- -
var obj = {
-  foo() {},
-  bar() {}
-};
- -

Il costruttore Function vs. la dichiarazione di funzione vs. l'espressione di funzione

- -

Compara i seguenti esempi:

- -

Una funzione definita con la dichiarazione di funzione:

- -
function multiply(x, y) {
-   return x * y;
-}
-
- -

Una espressione di funzione di una funzione anonima ( senza nome ), assegnata alla variabile multiply:

- -
var multiply = function(x, y) {
-   return x * y;
-};
-
- -

Una espressione di funzione di una funzione chiamata func_name , assegnata alla variabile multiply:

- -
var multiply = function func_name(x, y) {
-   return x * y;
-};
-
- -

Differenze

- -

Tutti e tre gli esempi fanno più o meno la stessa cosa, con qualche piccola differenza:

- -

C'è una differenza tra il nome di una funzione e la variabile alla quale la funzione viene assegnata. Il nome di una funzione non può essere modificato, mentre la variabile alla quale viene assegnata la funzione può essere riassegnata. Il nome di una funzione può essere utilizzato solo all'interno del corpo della funzione. Tentare di utilizzarlo al di fuori del corpo della funzione genererà un errore ( oppure restituirà undefined se il nome della funzione era stato precedentemente dichiarato con un'istruzione var ). Per esempio:

- -
var y = function x() {};
-alert(x); // throws an error
-
- -

Il nome di una funzione appare anche quando la funzione viene serializzata usando il metodo toString applicato alla funzione.

- -

Dall'altro lato, la variabile alla quale viene assegnata la funzione è limitata solo dal suo scope, la cui inclusione è garantita al momento della dichiarazione di funzione.

- -

Come si può vedere dal quarto esempio, il nome della funzione può essere diverso dal nome della variabile alla quale la funzione viene assegnata. I due nomi non hanno alcuna relazione tra loro. Una dichiarazione di funzione crea anche una variabile con lo stesso nome della funzione. Quindi, diversamente dalle funzioni definite attraverso un'espressione di funzione, le funzioni definite attraverso una dichiarazione di funzione offrono la possibilità di accedere ad esse attraverso il loro nome, almeno all'interno dello scope in cui erano state definite.

- -

Una funzione definita con il costruttore 'new Function' non possiede un nome. Tuttavia, nel motore JavaScript SpiderMonkey, la forma serializzata della funzione mostra il nome "anonymous". Per esempio, il codice alert(new Function()) restituisce:

- -
function anonymous() {
-}
-
- -

Poichè la funzione, in realtà, non ha un nome, anonymous non è una variabile alla quale si potrà accedere, all'interno della funzione. Per esempio, il seguente codice restituirebbe un errore:

- -
var foo = new Function("alert(anonymous);");
-foo();
-
- -

Diversamente da quanto accade con le funzioni definite con espressioni di funzione o con il costruttore Function, una funzione definita con una dichiarazione di funzione può essere usata prima della dichiarazione di funzione stessa. Per esempio:

- -
foo(); // alerts FOO!
-function foo() {
-   alert('FOO!');
-}
-
- -

Una funzione definita da un'espressione di funzione eredita lo scope corrente. Vale a dire, la funzione forma una chiusura. Dall'altro lato, una funzione definita dal costruttore Function non eredita alcuno scope, se non quello globale ( che eredita qualsiasi funzione ).

- -

Le funzioni definite con espressioni di funzione e dichiarazioni di funzione vengono analizzate ( parsed ) solo una volta, mentre quelle definite con il costruttore Function no. Vale a dire, la stringa testuale del corpo della funzione passata al costruttore Function deve essere analizzata ( parsed ) ogni volta in cui viene invocato il costruttore. Sebbene un'espressione di funzione crei ogni volta una chiusura, il corpo della funzione non viene rianalizzato ( reparsed ), così le espressioni di funzione sono ancora più veloci del "new Function(...)". Quindi, il costruttore Function dovrebbe, generalmente, essere evitato dove possibile.

- -

Occorre tenere presente, tuttavia, che le espressioni di funzione e le dichiarazioni di funzione annidate in una funzione generata dall'analisi ( parsing ) di una stringa del costruttore Function non vengono analizzate ( parsed ) continuamente. Per esempio:

- -
var foo = (new Function("var bar = \'FOO!\';\nreturn(function() {\n\talert(bar);\n});"))();
-foo(); // The segment "function() {\n\talert(bar);\n}" of the function body string is not re-parsed.
- -

Una dichiarazione di funzione è molto facilmente ( e spesso, anche non intenzionalmente ) convertita in un'espressione di funzione. Una dichiarazione di funzione cessa di essere tale quando:

- -
    -
  • diventa parte di un'espressione
    • -
  • non è più un "elemento sorgente" di una funzione o dello stesso script. Un "elemento sorgente" ( source element ) è un'istruzione non annidata, presente nello script o nel corpo della funzione:
    • -
- -
var x = 0;               // source element
-if (x == 0) {            // source element
-   x = 10;               // not a source element
-   function boo() {}     // not a source element
-}
-function foo() {         // source element
-   var y = 20;           // source element
-   function bar() {}     // source element
-   while (y == 10) {     // source element
-      function blah() {} // not a source element
-      y++;               // not a source element
-   }
-}
-
- -

Examples

- -
// function declaration
-function foo() {}
-
-// function expression
-(function bar() {})
-
-// function expression
-x = function hello() {}
-
-
-if (x) {
-   // function expression
-   function world() {}
-}
-
-
-// function declaration
-function a() {
-   // function declaration
-   function b() {}
-   if (0) {
-      // function expression
-      function c() {}
-   }
-}
-
- -

Definire una funzione in modo condizionato

- -

Le funzioni possono essere definite in modo condizionato, utilizzando sia le istruzioni di funzione ( un'estensione prevista nello standard ECMA-262 Edition 3 ), sia il costruttore Function. Da notare, però, che le  istruzioni di funzione non sono più accettate in ES5 strict mode. Inoltre, questa funzionalità non funziona bene attraverso più browser, quindi sarebbe meglio non farci affidamento.

- -

Nello script seguente, la funzione zero non verrà mai definita e non potrà mai essere invocata, visto che 'if (0)' restituisce sempre false:

- -
if (0) {
-   function zero() {
-      document.writeln("This is zero.");
-   }
-}
-
- -

Se la condizione diventasse 'if (1)', la funzione zero verrebbe definita.

- -

Nota: sebbene questo tipo di funzione sembri una dichiarazione di funzione, in realtà siamo di fronte ad una espressione ( o statement, o istruzione ), poichè la dichiarazione è annidata all'interno di un'altra istruzione. Vedi le differenze tra dichiarazioni di funzione ed espressioni di funzione.

- -

Nota: alcuni motori JavaScript, eslcuso SpiderMonkey, trattano, non correttamente, qualsiasi espressione di funzione in modo da assegnare loro un nome, al momento della definizione. Questo comporterebbe che la funzione zero sarebbe comunque definita, anche nell'eventualità che la condizione if restituisse sempre false. Un modo più sicuro per definire le funzioni in modo condizionato è di definirle come funzioni anonime ed assegnarle, poi, ad una variabile:

- -
if (0) {
-   var zero = function() {
-      document.writeln("This is zero.");
-   }
-}
-
- -

Esempi

- -

Restituire un numero formattato

- -

La seguente funzione restituisce ( return ) una stringa contenente la rappresentazione formattata di un numero, completato ( padded ) con degli zero iniziali.

- -
// This function returns a string padded with leading zeros
-function padZeros(num, totalLen) {
-   var numStr = num.toString();             // Initialize return value as string
-   var numZeros = totalLen - numStr.length; // Calculate no. of zeros
-   for (var i = 1; i <= numZeros; i++) {
-      numStr = "0" + numStr;
-   }
-   return numStr;
-}
-
- -

Queste istruzioni invocano la funzione padZeros.

- -
var result;
-result = padZeros(42,4); // returns "0042"
-result = padZeros(42,2); // returns "42"
-result = padZeros(5,4);  // returns "0005"
-
- -

Determinare l'esistenza di una funzione

- -

È possibile determinare se una funzione esiste, utilizzando l'operatore typeof. Nell'esempio seguente, viene eseguito un test per determinare se l'oggetto window ha una proprietà, che sia una funzione, chiamata noFunc. Se così, la funzione verrà utilizzata; in caso contrario, verrà eseguita una qualsiasi altra azione.

- -
 if ('function' == typeof window.noFunc) {
-   // use noFunc()
- } else {
-   // do something else
- }
-
- -

Da notare che nel test if  viene usato un riferimento a noFunc  — senza usare le parentesi "()" dopo il nome della funzione: in questo modo, la funzione non viene invocata.

- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
ECMAScript 1st Edition.StandardInitial definition. Implemented in JavaScript 1.0
{{SpecName('ES5.1', '#sec-13', 'Function Definition')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-function-definitions', 'Function definitions')}}{{Spec2('ES6')}}New: Arrow functions, Generator functions, default parameters, rest parameters
{{SpecName('ES6', '#', 'function*')}}{{Spec2('ES6')}}Initial definition.
{{SpecName('ES6', '#sec-arrow-function-definitions', 'Arrow Function Definitions')}}{{Spec2('ES6')}}Initial definition.
- -

Browser compatibility

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Generator function39{{CompatGeckoDesktop("26.0")}}{{CompatUnknown}}26{{CompatUnknown}}
Arrow function{{CompatNo}}{{CompatGeckoDesktop("22.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Generator function{{CompatUnknown}}39{{CompatGeckoMobile("26.0")}}{{CompatUnknown}}26{{CompatUnknown}}
Arrow function{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("22.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -

See also

- -
    -
  • {{jsxref("Statements/function", "function statement")}}
    • -
  • {{jsxref("Operators/function", "function expression")}}
    • -
  • {{jsxref("Statements/function*", "function* statement")}}
    • -
  • {{jsxref("Operators/function*", "function* expression")}}
    • -
  • {{jsxref("Function")}}
    • -
  • {{jsxref("GeneratorFunction")}}
    • -
  • {{jsxref("Functions/Arrow_functions", "Arrow functions")}}
    • -
  • {{jsxref("Functions/Default_parameters", "Default parameters")}}
    • -
  • {{jsxref("Functions/rest_parameters", "Rest parameters")}}
    • -
  • {{jsxref("Functions/arguments", "Arguments object")}}
    • -
  • {{jsxref("Functions/get", "getter")}}
    • -
  • {{jsxref("Functions/set", "setter")}}
    • -
  • {{jsxref("Functions/Method_definitions", "Method definitions")}}
    • -
  • Functions and function scope
    • -
diff --git a/files/it/web/javascript/reference/functions_and_function_scope/set/index.html b/files/it/web/javascript/reference/functions_and_function_scope/set/index.html deleted file mode 100644 index 1af0f1c79d..0000000000 --- a/files/it/web/javascript/reference/functions_and_function_scope/set/index.html +++ /dev/null @@ -1,214 +0,0 @@ ---- -title: setter -slug: Web/JavaScript/Reference/Functions_and_function_scope/set -tags: - - Funzioni - - JavaScript - - setter -translation_of: Web/JavaScript/Reference/Functions/set ---- -
{{jsSidebar("Functions")}}
- -

Il costrutto sintattico set collega una proprietà di un oggetto ad una funzione che viene chiamata quando si ha un tentativo di modifica di quella proprietà.

- -

Sintassi

- -
{set prop(val) { . . . }}
-{set [expression](val) { . . . }}
- -

Parametri

- -
-
prop
-
Il nome della proprietà da collegare alla funzione data.
-
- -
-
val
-
Un alias per la variabile che contiene il valore che si sta cercando di assegnare a prop.
-
expression
-
A partire da ECMAScript 6, è possibile anche usare espressioni per nomi di proprietà computate da collegare alla funzione data.
-
- -

Descrizione

- -

In JavaScript, un setter può essere utilizzato per eseguire una funzione ogniqualvolta una proprietà specificata sta per essere modificata. I setters sono quasi sempre utilizzati insieme ai getters per creare un tipo di pseudo proprietà. Non è possibile avere un setter su una normale proprietà che contiene un valore.

- -

Alcune note da considerare quando si utilizza il costrutto sintattico set:

- -
- -
- -

Un setter può essere eliminato usando l'operatore delete.

- -

Esempi

- -

Definire un setter per nuovi oggetti in inizializzatori di oggetti

- -

Questo snippet di codice definisce una pseudo proprietà current di un oggetto o che, una volta che vi si assegna un valore, aggiornerà log con quel valore:

- -
var o = {
-  set current (str) {
-    this.log[this.log.length] = str;
-  },
-  log: []
-}
-
- -

Nota che  current non è definito ed ogni tentativo di accedervi risulterà in un undefined.

- -

Rimuovere un setter con l'operatore delete

- -

Se vuoi rimuovere il setter usato sopra, puoi semplicemente usare delete:

- -
delete o.current;
-
- -

Definire un setter su oggetti pre-esistenti usando defineProperty

- -

Per aggiungere un setter ad un oggetto pre-esistente, usa{{jsxref("Object.defineProperty()")}}.

- -
var o = { a:0 };
-
-Object.defineProperty(o, "b", { set: function (x) { this.a = x / 2; } });
-
-o.b = 10; // Runs the setter, which assigns 10 / 2 (5) to the 'a' property
-console.log(o.a) // 5
- -

Usare il nome di una proprietà computata

- -
-

Nota: Le proprietà computate sono una tecnologia sperimentale, parte dello standard proposto ECMAScript 6, e non sono ancora sufficientemente supportate dai browsers. L'uso di queste proprietà in ambienti che non le supportano produrrà un errore di sintassi.

-
- -
var expr = "foo";
-
-var obj = {
-  baz: "bar",
-  set [expr](v) { this.baz = v; }
-};
-
-console.log(obj.baz); // "bar"
-obj.foo = "baz";      // run the setter
-console.log(obj.baz); // "baz"
-
- -

Specifiche

- - - - - - - - - - - - - - - - - - - - - - - - -
SpecificaStatusCommento
{{SpecName('ES5.1', '#sec-11.1.5', 'Object Initializer')}}{{Spec2('ES5.1')}}Definizione iniziale.
{{SpecName('ES6', '#sec-method-definitions', 'Method definitions')}}{{Spec2('ES6')}}Aggiunti i nomi di proprietà computate.
{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}{{Spec2('ESDraft')}}
- -

Compatibilità dei browsers

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaratteristicaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Supporto base{{CompatChrome(1)}}{{ CompatGeckoDesktop("1.8.1") }}{{ CompatIE(9) }}9.53
Nomi di proprietà computate{{CompatNo}}{{ CompatGeckoDesktop("34") }}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaratteristicaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Supporto base{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{ CompatGeckoMobile("1.8.1") }}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Nomi di proprietà computate{{CompatNo}}{{CompatNo}}{{ CompatGeckoMobile("34.0") }}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -

Note specifiche per SpiderMonkey

- -
    -
  • A partire da JavaScript 1.8.1,  i setters non sono più chiamati durante il setting delle properietà negli inizializzatori di oggetti od array.
    • -
  • A partire da SpiderMonkey 38, un setter con {{jsxref("Functions/rest_parameters", "rest parameter", "", 1)}} produce un {{jsxref("SyntaxError")}} come  da specifica ES6.
    • -
- -

Guarda anche

- -
    -
  • getter
    • -
  • {{jsxref("Operators/delete", "delete")}}
    • -
  • {{jsxref("Object.defineProperty()")}}
    • -
  • {{jsxref("Object.defineGetter", "__defineGetter__")}}
    • -
  • {{jsxref("Object.defineSetter", "__defineSetter__")}}
    • -
  • Defining Getters and Setters nella guida JavaScript
    • -
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 ---- -
{{JSRef}}
- -

La proprietà Array.prototype rappresenta il prototipo per il costruttore {{jsxref("Array")}} .

- -
{{js_property_attributes(0, 0, 0)}}
- -

Descrizione

- -

Le istanze {{jsxref("Array")}} ereditano da Array.prototype. Come con gli altri costruttori, si può cambiare il prototipo propagando i cambiamenti su tutte le sue istanze.

- -

Piccola curiosità: Array.prototype è un {{jsxref("Array")}}:

- -
Array.isArray(Array.prototype); // true
-
- -

Proprietà

- -
-
Array.prototype.constructor
-
Restituisce il costruttore.
-
{{jsxref("Array.prototype.length")}}
-
Restituisce il numero di elementi in un array.
-
- -

Metodi

- -

Metodi mutator

- -

Questi metodi modificano l'array:

- -
-
{{jsxref("Array.prototype.copyWithin()")}} {{experimental_inline}}
-
Copia una sequenza di elementi dell'array all'interno dello stesso.
-
{{jsxref("Array.prototype.fill()")}} {{experimental_inline}}
-
Riempie le posizioni dell'array contenute tra 2 indici con un valore fisso.
-
{{jsxref("Array.prototype.pop()")}}
-
Rimuove e restituisce l'ultimo elemento dell'array.
-
{{jsxref("Array.prototype.push()")}}
-
Accoda uno o più elementi all'array e restituisce la lunghezza aggiornata dello stesso.
-
{{jsxref("Array.prototype.reverse()")}}
-
Inverte l'ordine delle posizioni degli elementi all'interno dell'array.
-
{{jsxref("Array.prototype.shift()")}}
-
Rimuove e resistuisce il primo elemento di un array.
-
{{jsxref("Array.prototype.sort()")}}
-
Ordina gli elementi di un array all'interno di esso e restituisce l'array.
-
{{jsxref("Array.prototype.splice()")}}
-
Aggiunge e/o rimuove elementi da un array.
-
{{jsxref("Array.prototype.unshift()")}}
-
Aggiunge uno o più elementi all'inizio di un array e restituisce la lunghezza aggiornata dello stesso.
-
- -

Metodi accessor

- -

Questi metodi non modificano l'array e ne restituiscono una sua rappresentazione.

- -
-
{{jsxref("Array.prototype.concat()")}}
-
Restituisce un nuovo array costituito dall'array stesso insieme ad altri array/valori.
-
{{jsxref("Array.prototype.includes()")}} {{experimental_inline}}
-
Restituisce true se l'array contiene un certo elemento, false altrimenti.
-
{{jsxref("Array.prototype.join()")}}
-
Resituisce i valori dell'array come stringa.
-
{{jsxref("Array.prototype.slice()")}}
-
Restituisce un nuovo array cosituito da elementi dell'array originale.
-
{{jsxref("Array.prototype.toSource()")}} {{non-standard_inline}}
-
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.
-
{{jsxref("Array.prototype.toString()")}}
-
Returns a string representing the array and its elements. Overrides the {{jsxref("Object.prototype.toString()")}} method.
-
{{jsxref("Array.prototype.toLocaleString()")}}
-
Returns a localized string representing the array and its elements. Overrides the {{jsxref("Object.prototype.toLocaleString()")}} method.
-
{{jsxref("Array.prototype.indexOf()")}}
-
Returns the first (least) index of an element within the array equal to the specified value, or -1 if none is found.
-
{{jsxref("Array.prototype.lastIndexOf()")}}
-
Returns the last (greatest) index of an element within the array equal to the specified value, or -1 if none is found.
-
- -

Iteration methods

- -

Several methods take as arguments functions to be called back while processing the array. When these methods are called, the length 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.

- -
-
{{jsxref("Array.prototype.forEach()")}}
-
Calls a function for each element in the array.
-
{{jsxref("Array.prototype.entries()")}} {{experimental_inline}}
-
Returns a new Array Iterator object that contains the key/value pairs for each index in the array.
-
{{jsxref("Array.prototype.every()")}}
-
Returns true if every element in this array satisfies the provided testing function.
-
{{jsxref("Array.prototype.some()")}}
-
Returns true if at least one element in this array satisfies the provided testing function.
-
{{jsxref("Array.prototype.filter()")}}
-
Creates a new array with all of the elements of this array for which the provided filtering function returns true.
-
{{jsxref("Array.prototype.find()")}} {{experimental_inline}}
-
Returns the found value in the array, if an element in the array satisfies the provided testing function or undefined if not found.
-
{{jsxref("Array.prototype.findIndex()")}} {{experimental_inline}}
-
Returns the found index in the array, if an element in the array satisfies the provided testing function or -1 if not found.
-
{{jsxref("Array.prototype.keys()")}} {{experimental_inline}}
-
Returns a new Array Iterator that contains the keys for each index in the array.
-
{{jsxref("Array.prototype.map()")}}
-
Creates a new array with the results of calling a provided function on every element in this array.
-
{{jsxref("Array.prototype.reduce()")}}
-
Apply a function against an accumulator and each value of the array (from left-to-right) as to reduce it to a single value.
-
{{jsxref("Array.prototype.reduceRight()")}}
-
Apply a function against an accumulator and each value of the array (from right-to-left) as to reduce it to a single value.
-
{{jsxref("Array.prototype.values()")}} {{experimental_inline}}
-
Returns a new Array Iterator object that contains the values for each index in the array.
-
{{jsxref("Array.prototype.@@iterator()", "Array.prototype[@@iterator]()")}} {{experimental_inline}}
-
Returns a new Array Iterator object that contains the values for each index in the array.
-
- -

Generic methods

- -

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 length property, and which can usefully be accessed using numeric property names (as with array[5] indexing). 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")}}. Some methods, such as {{jsxref("Array.join", "join")}}, only read the length and numeric properties of the object they are called on. Others, like {{jsxref("Array.reverse", "reverse")}}, require that the object's numeric properties and length be mutable; these methods can therefore not be called on objects like {{jsxref("String")}}, which does not permit its length property or synthesized numeric properties to be set.

- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('ES1')}}{{Spec2('ES1')}}Initial definition.
{{SpecName('ES5.1', '#sec-15.4.3.1', 'Array.prototype')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-array.prototype', 'Array.prototype')}}{{Spec2('ES6')}} 
- -

Browser compatibility

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

See also

- -
    -
  • {{jsxref("Array")}}
    • -
  • {{jsxref("Function.prototype")}}
    • -
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 ---- -
{{JSRef("Global_Objects", "Object")}}
- -

Sommario

- -

La proprietà Object.prototype rappresenta l'oggetto prototipo di {{jsxref("Global_Objects/Object", "Object")}}.

- -

{{js_property_attributes(0, 0, 0)}}

- -

Descrizione

- -

In JavaScript, tutti gli oggetti sono discendenti di {{jsxref("Global_Objects/Object", "Object")}}; tutti gli oggetti ereditano metodi e proprietà di Object.prototype (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à constructor 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.

- -

Proprietà

- -
-
{{jsxref("Object.prototype.constructor")}}
-
Specifica la funzione che ha creato l'oggetto a partire dal prototipo.
-
{{jsxref("Object.prototype.__proto__")}} {{non-standard_inline}}
-
È un riferimento all'oggetto usato come prototipo quando l'oggetto è stato istanziato.
-
{{jsxref("Object.prototype.__noSuchMethod__")}} {{non-standard_inline}}
-
Permette di definire una funzione che venga chiamata quando viene chiamato un metodo non definito.
-
{{jsxref("Object.prototype.__count__")}} {{obsolete_inline}}
-
Rappresenta il numero di proprietà persenti in un oggetto, ma è stato rimosso.
-
{{jsxref("Object.prototype.__parent__")}} {{obsolete_inline}}
-
Rappresenta il contesto di un oggetto, ma è stato rimosso.
-
- -

Metodi

- -
-
{{jsxref("Object.prototype.__defineGetter__()")}} {{non-standard_inline}} {{deprecated_inline}}
-
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.
-
{{jsxref("Object.prototype.__defineSetter__()")}} {{non-standard_inline}} {{deprecated_inline}}
-
Associa una funzione a una proprietà di un oggetto. Quando si tenta di cambiare il valore di tale proprietà, viene eseguita la funzione.
-
{{jsxref("Object.prototype.__lookupGetter__()")}} {{non-standard_inline}} {{deprecated_inline}}
-
Restituisce la funzione definita tramite {{jsxref("Object.prototype.defineGetter", "__defineGetter__()")}}.
-
{{jsxref("Object.prototype.__lookupSetter__()")}} {{non-standard_inline}} {{deprecated_inline}}
-
Restituisce la funzione definita tramite {{jsxref("Object.prototype.defineSetter", "__defineSetter__()")}}.
-
{{jsxref("Object.prototype.hasOwnProperty()")}}
-
Determina se l'oggetto contiene direttamente una proprietà (non ereditata tramite il prototipo).
-
{{jsxref("Object.prototype.isPrototypeOf()")}}
-
Determina se un oggetto fa parte della catena dei prototipi dell'oggetto sul quale è richiamato questo metodo.
-
{{jsxref("Object.prototype.propertyIsEnumerable()")}}
-
Determina se l'attributo DontEnum di ECMAScript interno è presente.
-
{{jsxref("Object.prototype.toSource()")}} {{non-standard_inline}}
-
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.
-
{{jsxref("Object.prototype.toLocaleString()")}}
-
Richiama {{jsxref("Object.prototype.toString", "toString()")}}.
-
{{jsxref("Object.prototype.toString()")}}
-
Restituisce la rappresentazione dell'oggetto sotto forma di stringa.
-
{{jsxref("Object.prototype.unwatch()")}} {{non-standard_inline}}
-
Termina di osservare i cambiamenti di una proprietà dell'oggetto.
-
{{jsxref("Object.prototype.valueOf()")}}
-
Ritorna il valore primitivo dell'oggetto.
-
{{jsxref("Object.prototype.watch()")}} {{non-standard_inline}}
-
Inizia a osservare i cambiamenti di una proprietà di un oggetto.
-
{{jsxref("Object.prototype.eval()")}} {{obsolete_inline}}
-
Esegue una stringa di codice JavaScript nel contesto dell'oggetto, ma è stato rimosso.
-
- -

Esempi

- -

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:

- -
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();
-
- -

Stamperà:

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

Specifiche

- - - - - - - - - - - - - - - - - - - - - - - - -
SpecificaStatoCommenti
ECMAScript 1st Edition. Implemented in JavaScript 1.0.StandardDefinizione iniziale.
{{SpecName('ES5.1', '#sec-15.2.3.1', 'Object.prototype')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-object.prototype', 'Object.prototype')}}{{Spec2('ES6')}} 
- -

Compatibilità con i browser

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
FunzionalitàChromeFirefox (Gecko)Internet ExplorerOperaSafari
Supporto di base{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FunzionalitàAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Supporto di base{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

See also

- - diff --git a/files/it/web/javascript/reference/global_objects/proxy/handler/apply/index.html b/files/it/web/javascript/reference/global_objects/proxy/handler/apply/index.html deleted file mode 100644 index f803b41255..0000000000 --- a/files/it/web/javascript/reference/global_objects/proxy/handler/apply/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: handler.apply() -slug: Web/JavaScript/Reference/Global_Objects/Proxy/handler/apply -tags: - - ECMAScript 2015 - - JavaScript - - Proxy - - metodo -translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/apply ---- -
{{JSRef}}
- -

Il metodo handler.apply() costituisce una trap per una chiamata a funzione.

- -
{{EmbedInteractiveExample("pages/js/proxyhandler-apply.html", "taller")}}
- - - -

Sintassi

- -
var p = new Proxy(target, {
-  apply: function(target, thisArg, argumentsList) {
-  }
-});
-
- -

Parametri

- -

I seguenti parametri vengono passati al metodo apply. this è legato all'handler.

- -
-
target
-
L'oggetto target.
-
thisArg
-
Il valore di this relativo alla chiamata.
-
argumentsList
-
La lista degli argomenti della chiamata.
-
- -

Valore di ritorno

- -

Il metodo apply può restituire qualsiasi valore.

- -

Descrizione

- -

Il metodo handler.apply è una trap per le chiamate a funzione.

- -

Operazioni intercettate

- -

Questa trap può intercettare le seguenti operazioni:

- -
    -
  • proxy(...args)
    • -
  • {{jsxref("Function.prototype.apply()")}} e {{jsxref("Function.prototype.call()")}}
    • -
  • {{jsxref("Reflect.apply()")}}
    • -
- -

Invarianti

- -

Se le seguenti invarianti non sono rispettate il proxy emetterà un TypeError:

- -
    -
  • Lo stesso target deve essere un oggetto richiamabile, cioè deve essere un oggetto funzione.
    • -
- -

Esempi

- -

Il codice seguente intercetta una chiamata a funzione.

- -
var p = new Proxy(function() {}, {
-  apply: function(target, thisArg, argumentsList) {
-    console.log('chiamato con: ' + argumentsList.join(', '));
-    return argumentsList[0] + argumentsList[1] + argumentsList[2];
-  }
-});
-
-console.log(p(1, 2, 3)); // "chiamato con: 1, 2, 3"
-                         // 6
-
- -

Specifiche

- - - - - - - - - - - - - - - - - - - -
SpecificaStatoCommenti
{{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-call-thisargument-argumentslist', '[[Call]]')}}{{Spec2('ES2015')}}Initial definition.
{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-call-thisargument-argumentslist', '[[Call]]')}}{{Spec2('ESDraft')}} 
- -

Compatibilità browser

- -
- - -

{{Compat("javascript.builtins.Proxy.handler.apply")}}

-
- -

Vedi anche

- -
    -
  • {{jsxref("Proxy")}}
    • -
  • {{jsxref("Proxy.handler", "handler")}}
    • -
  • {{jsxref("Function.prototype.apply")}}
    • -
  • {{jsxref("Function.prototype.call")}}
    • -
  • {{jsxref("Reflect.apply()")}}
    • -
diff --git a/files/it/web/javascript/reference/global_objects/proxy/handler/index.html b/files/it/web/javascript/reference/global_objects/proxy/handler/index.html deleted file mode 100644 index 2be6abb116..0000000000 --- a/files/it/web/javascript/reference/global_objects/proxy/handler/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: Proxy handler -slug: Web/JavaScript/Reference/Global_Objects/Proxy/handler -tags: - - ECMAScript 2015 - - JavaScript - - NeedsTranslation - - Proxy - - TopicStub -translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy -translation_of_original: Web/JavaScript/Reference/Global_Objects/Proxy/handler ---- -
{{JSRef}}
- -

The proxy's handler object is a placeholder object which contains traps for {{jsxref("Proxy", "proxies", "", 1)}}.

- -

Methods

- -

All traps are optional. If a trap has not been defined, the default behavior is to forward the operation to the target.

- -
-
{{jsxref("Global_Objects/Proxy/handler/getPrototypeOf", "handler.getPrototypeOf()")}}
-
A trap for {{jsxref("Object.getPrototypeOf")}}.
-
{{jsxref("Global_Objects/Proxy/handler/setPrototypeOf", "handler.setPrototypeOf()")}}
-
A trap for {{jsxref("Object.setPrototypeOf")}}.
-
{{jsxref("Global_Objects/Proxy/handler/isExtensible", "handler.isExtensible()")}}
-
A trap for {{jsxref("Object.isExtensible")}}.
-
{{jsxref("Global_Objects/Proxy/handler/preventExtensions", "handler.preventExtensions()")}}
-
A trap for {{jsxref("Object.preventExtensions")}}.
-
{{jsxref("Global_Objects/Proxy/handler/getOwnPropertyDescriptor", "handler.getOwnPropertyDescriptor()")}}
-
A trap for {{jsxref("Object.getOwnPropertyDescriptor")}}.
-
{{jsxref("Global_Objects/Proxy/handler/defineProperty", "handler.defineProperty()")}}
-
A trap for {{jsxref("Object.defineProperty")}}.
-
{{jsxref("Global_Objects/Proxy/handler/has", "handler.has()")}}
-
A trap for the {{jsxref("Operators/in", "in")}} operator.
-
{{jsxref("Global_Objects/Proxy/handler/get", "handler.get()")}}
-
A trap for getting property values.
-
{{jsxref("Global_Objects/Proxy/handler/set", "handler.set()")}}
-
A trap for setting property values.
-
{{jsxref("Global_Objects/Proxy/handler/deleteProperty", "handler.deleteProperty()")}}
-
A trap for the {{jsxref("Operators/delete", "delete")}} operator.
-
{{jsxref("Global_Objects/Proxy/handler/ownKeys", "handler.ownKeys()")}}
-
A trap for {{jsxref("Object.getOwnPropertyNames")}} and {{jsxref("Object.getOwnPropertySymbols")}}.
-
{{jsxref("Global_Objects/Proxy/handler/apply", "handler.apply()")}}
-
A trap for a function call.
-
{{jsxref("Global_Objects/Proxy/handler/construct", "handler.construct()")}}
-
A trap for the {{jsxref("Operators/new", "new")}} operator.
-
- -

Some non-standard traps are obsolete and have been removed.

- -

Specifications

- - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots', 'Proxy Object Internal Methods and Internal Slots')}}{{Spec2('ES2015')}}Initial definition.
{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots', 'Proxy Object Internal Methods and Internal Slots')}}{{Spec2('ESDraft')}}The enumerate handler has been removed.
- -

Browser compatibility

- - - -

{{Compat("javascript.builtins.Proxy.handler")}}

- -

See also

- -
    -
  • {{jsxref("Proxy")}}
    • -
diff --git a/files/it/web/javascript/reference/global_objects/proxy/proxy/apply/index.html b/files/it/web/javascript/reference/global_objects/proxy/proxy/apply/index.html new file mode 100644 index 0000000000..f803b41255 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/proxy/proxy/apply/index.html @@ -0,0 +1,119 @@ +--- +title: handler.apply() +slug: Web/JavaScript/Reference/Global_Objects/Proxy/handler/apply +tags: + - ECMAScript 2015 + - JavaScript + - Proxy + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/apply +--- +
{{JSRef}}
+ +

Il metodo handler.apply() costituisce una trap per una chiamata a funzione.

+ +
{{EmbedInteractiveExample("pages/js/proxyhandler-apply.html", "taller")}}
+ + + +

Sintassi

+ +
var p = new Proxy(target, {
+  apply: function(target, thisArg, argumentsList) {
+  }
+});
+
+ +

Parametri

+ +

I seguenti parametri vengono passati al metodo apply. this è legato all'handler.

+ +
+
target
+
L'oggetto target.
+
thisArg
+
Il valore di this relativo alla chiamata.
+
argumentsList
+
La lista degli argomenti della chiamata.
+
+ +

Valore di ritorno

+ +

Il metodo apply può restituire qualsiasi valore.

+ +

Descrizione

+ +

Il metodo handler.apply è una trap per le chiamate a funzione.

+ +

Operazioni intercettate

+ +

Questa trap può intercettare le seguenti operazioni:

+ +
    +
  • proxy(...args)
    • +
  • {{jsxref("Function.prototype.apply()")}} e {{jsxref("Function.prototype.call()")}}
    • +
  • {{jsxref("Reflect.apply()")}}
    • +
+ +

Invarianti

+ +

Se le seguenti invarianti non sono rispettate il proxy emetterà un TypeError:

+ +
    +
  • Lo stesso target deve essere un oggetto richiamabile, cioè deve essere un oggetto funzione.
    • +
+ +

Esempi

+ +

Il codice seguente intercetta una chiamata a funzione.

+ +
var p = new Proxy(function() {}, {
+  apply: function(target, thisArg, argumentsList) {
+    console.log('chiamato con: ' + argumentsList.join(', '));
+    return argumentsList[0] + argumentsList[1] + argumentsList[2];
+  }
+});
+
+console.log(p(1, 2, 3)); // "chiamato con: 1, 2, 3"
+                         // 6
+
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommenti
{{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-call-thisargument-argumentslist', '[[Call]]')}}{{Spec2('ES2015')}}Initial definition.
{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-call-thisargument-argumentslist', '[[Call]]')}}{{Spec2('ESDraft')}} 
+ +

Compatibilità browser

+ +
+ + +

{{Compat("javascript.builtins.Proxy.handler.apply")}}

+
+ +

Vedi anche

+ +
    +
  • {{jsxref("Proxy")}}
    • +
  • {{jsxref("Proxy.handler", "handler")}}
    • +
  • {{jsxref("Function.prototype.apply")}}
    • +
  • {{jsxref("Function.prototype.call")}}
    • +
  • {{jsxref("Reflect.apply()")}}
    • +
diff --git a/files/it/web/javascript/reference/global_objects/proxy/proxy/index.html b/files/it/web/javascript/reference/global_objects/proxy/proxy/index.html new file mode 100644 index 0000000000..2be6abb116 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/proxy/proxy/index.html @@ -0,0 +1,84 @@ +--- +title: Proxy handler +slug: Web/JavaScript/Reference/Global_Objects/Proxy/handler +tags: + - ECMAScript 2015 + - JavaScript + - NeedsTranslation + - Proxy + - TopicStub +translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy +translation_of_original: Web/JavaScript/Reference/Global_Objects/Proxy/handler +--- +
{{JSRef}}
+ +

The proxy's handler object is a placeholder object which contains traps for {{jsxref("Proxy", "proxies", "", 1)}}.

+ +

Methods

+ +

All traps are optional. If a trap has not been defined, the default behavior is to forward the operation to the target.

+ +
+
{{jsxref("Global_Objects/Proxy/handler/getPrototypeOf", "handler.getPrototypeOf()")}}
+
A trap for {{jsxref("Object.getPrototypeOf")}}.
+
{{jsxref("Global_Objects/Proxy/handler/setPrototypeOf", "handler.setPrototypeOf()")}}
+
A trap for {{jsxref("Object.setPrototypeOf")}}.
+
{{jsxref("Global_Objects/Proxy/handler/isExtensible", "handler.isExtensible()")}}
+
A trap for {{jsxref("Object.isExtensible")}}.
+
{{jsxref("Global_Objects/Proxy/handler/preventExtensions", "handler.preventExtensions()")}}
+
A trap for {{jsxref("Object.preventExtensions")}}.
+
{{jsxref("Global_Objects/Proxy/handler/getOwnPropertyDescriptor", "handler.getOwnPropertyDescriptor()")}}
+
A trap for {{jsxref("Object.getOwnPropertyDescriptor")}}.
+
{{jsxref("Global_Objects/Proxy/handler/defineProperty", "handler.defineProperty()")}}
+
A trap for {{jsxref("Object.defineProperty")}}.
+
{{jsxref("Global_Objects/Proxy/handler/has", "handler.has()")}}
+
A trap for the {{jsxref("Operators/in", "in")}} operator.
+
{{jsxref("Global_Objects/Proxy/handler/get", "handler.get()")}}
+
A trap for getting property values.
+
{{jsxref("Global_Objects/Proxy/handler/set", "handler.set()")}}
+
A trap for setting property values.
+
{{jsxref("Global_Objects/Proxy/handler/deleteProperty", "handler.deleteProperty()")}}
+
A trap for the {{jsxref("Operators/delete", "delete")}} operator.
+
{{jsxref("Global_Objects/Proxy/handler/ownKeys", "handler.ownKeys()")}}
+
A trap for {{jsxref("Object.getOwnPropertyNames")}} and {{jsxref("Object.getOwnPropertySymbols")}}.
+
{{jsxref("Global_Objects/Proxy/handler/apply", "handler.apply()")}}
+
A trap for a function call.
+
{{jsxref("Global_Objects/Proxy/handler/construct", "handler.construct()")}}
+
A trap for the {{jsxref("Operators/new", "new")}} operator.
+
+ +

Some non-standard traps are obsolete and have been removed.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots', 'Proxy Object Internal Methods and Internal Slots')}}{{Spec2('ES2015')}}Initial definition.
{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots', 'Proxy Object Internal Methods and Internal Slots')}}{{Spec2('ESDraft')}}The enumerate handler has been removed.
+ +

Browser compatibility

+ + + +

{{Compat("javascript.builtins.Proxy.handler")}}

+ +

See also

+ +
    +
  • {{jsxref("Proxy")}}
    • +
diff --git a/files/it/web/javascript/reference/global_objects/proxy/revocabile/index.html b/files/it/web/javascript/reference/global_objects/proxy/revocabile/index.html deleted file mode 100644 index bf87d7e3e7..0000000000 --- a/files/it/web/javascript/reference/global_objects/proxy/revocabile/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: Proxy.revocable() -slug: Web/JavaScript/Reference/Global_Objects/Proxy/revocabile -translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/revocable ---- -
{{JSRef}}
- -

Il metodo Proxy.revocable() è usato per creare un oggetto {{jsxref("Proxy")}} revocabile.

- -

Sintassi

- -
Proxy.revocable(target, handler);
-
- -

Parametri

- -
{{ Page("it/docs/Web/JavaScript/Reference/Global_Objects/Proxy", "Parametri") }}
- -

Valore restituito

- -

Un nuovo oggetto Proxy revocabile.

- -

Descrizione

- -

Un Proxy revocabile è un oggetto con le seguenti due proprietà {proxy: proxy, revoke: revoke}.

- -
-
proxy
-
L'oggetto Proxy creato con new Proxy(target, handler).
-
revoke
-
Una funzione che non richiede argomenti per disattivare il proxy.
-
- -

Se la funzione revoke() viene invocata, il proxy diventa inutilizzabile: se si tenta di farne uso si otterrà un {{jsxref("TypeError")}}. Una volta che il proxy è revocato rimarrà in questo stato e potrà essere eliminato dal garbage collector. Successive invocazioni di revoke() non avranno effetto.

- -

Esempi

- -
var revocable = Proxy.revocable({}, {
-  get: function(target, name) {
-    return "[[" + name + "]]";
-  }
-});
-var proxy = revocable.proxy;
-console.log(proxy.foo); // "[[foo]]"
-
-revocable.revoke();
-
-console.log(proxy.foo); // viene sollevato un TypeError
-proxy.foo = 1           // viene sollevato un TypeError
-delete proxy.foo;       // viene sollevato un TypeError
-typeof proxy            // "object", typeof non innesca nessuna trappola
-
- -

Specifiche

- - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('ES2015', '#sec-proxy.revocable', 'Proxy Revocation Functions')}}{{Spec2('ES2015')}}Definizione iniziale.
{{SpecName('ESDraft', '#sec-proxy.revocable', 'Proxy Revocation Functions')}}{{Spec2('ESDraft')}} 
- -

Compatibilità tra Browser

- - - -

{{Compat("javascript.builtins.Proxy.revocable")}}

- -

Vedi anche

- -
    -
  • {{jsxref("Proxy")}}
    • -
diff --git a/files/it/web/javascript/reference/global_objects/proxy/revocable/index.html b/files/it/web/javascript/reference/global_objects/proxy/revocable/index.html new file mode 100644 index 0000000000..bf87d7e3e7 --- /dev/null +++ b/files/it/web/javascript/reference/global_objects/proxy/revocable/index.html @@ -0,0 +1,86 @@ +--- +title: Proxy.revocable() +slug: Web/JavaScript/Reference/Global_Objects/Proxy/revocabile +translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/revocable +--- +
{{JSRef}}
+ +

Il metodo Proxy.revocable() è usato per creare un oggetto {{jsxref("Proxy")}} revocabile.

+ +

Sintassi

+ +
Proxy.revocable(target, handler);
+
+ +

Parametri

+ +
{{ Page("it/docs/Web/JavaScript/Reference/Global_Objects/Proxy", "Parametri") }}
+ +

Valore restituito

+ +

Un nuovo oggetto Proxy revocabile.

+ +

Descrizione

+ +

Un Proxy revocabile è un oggetto con le seguenti due proprietà {proxy: proxy, revoke: revoke}.

+ +
+
proxy
+
L'oggetto Proxy creato con new Proxy(target, handler).
+
revoke
+
Una funzione che non richiede argomenti per disattivare il proxy.
+
+ +

Se la funzione revoke() viene invocata, il proxy diventa inutilizzabile: se si tenta di farne uso si otterrà un {{jsxref("TypeError")}}. Una volta che il proxy è revocato rimarrà in questo stato e potrà essere eliminato dal garbage collector. Successive invocazioni di revoke() non avranno effetto.

+ +

Esempi

+ +
var revocable = Proxy.revocable({}, {
+  get: function(target, name) {
+    return "[[" + name + "]]";
+  }
+});
+var proxy = revocable.proxy;
+console.log(proxy.foo); // "[[foo]]"
+
+revocable.revoke();
+
+console.log(proxy.foo); // viene sollevato un TypeError
+proxy.foo = 1           // viene sollevato un TypeError
+delete proxy.foo;       // viene sollevato un TypeError
+typeof proxy            // "object", typeof non innesca nessuna trappola
+
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES2015', '#sec-proxy.revocable', 'Proxy Revocation Functions')}}{{Spec2('ES2015')}}Definizione iniziale.
{{SpecName('ESDraft', '#sec-proxy.revocable', 'Proxy Revocation Functions')}}{{Spec2('ESDraft')}} 
+ +

Compatibilità tra Browser

+ + + +

{{Compat("javascript.builtins.Proxy.revocable")}}

+ +

Vedi anche

+ +
    +
  • {{jsxref("Proxy")}}
    • +
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 ---- -
{{JSRef}}
- -

La proprietà String.prototyperappresenta l'oggetto prototipo {{jsxref("String")}}.

- -
{{js_property_attributes(0, 0, 0)}}
- -

Description

- -

Tutte le istanze {{jsxref("String")}} ereditano da String.prototype . Le modifiche all'oggetto prototipo String vengono propagate a tutte le istanze {{jsxref("String")}}.

- -

Properties

- -
-
String.prototype.constructor
-
Specifica la funzione che crea il prototipo di un oggetto.
-
{{jsxref("String.prototype.length")}}
-
Riflette la lunghezza della stringa.
-
N
-
Utilizzato per accedere al carattere in N posizione in cui N è un numero intero positivo compreso tra 0 e uno inferiore al valore della {{jsxref("String.length", "length")}}. Queste proprietà sono di sola lettura.
-
- -

Metodi

- -

Metodi non correlati HTML

- -
-
{{jsxref("String.prototype.charAt()")}}
-
Restituisce il carattere (esattamente un'unità di codice UTF-16) all'indice specificato
-
{{jsxref("String.prototype.charCodeAt()")}}
-
Restituisce un numero che corrisponde al valore dell'unità di codice UTF-16 nell'indice specificato.
-
{{jsxref("String.prototype.codePointAt()")}}
-
Restituisce un numero intero non negativo Numero che è il valore del punto di codice codificato UTF-16 che inizia con l'indice specificato.
-
{{jsxref("String.prototype.concat()")}}
-
Combina il testo di due stringhe e restituisce una nuova stringa.
-
{{jsxref("String.prototype.includes()")}}
-
Determina se una stringa può essere trovata all'interno di un'altra stringa.
-
{{jsxref("String.prototype.endsWith()")}}
-
Determina se una stringa termina con i caratteri di un'altra stringa.
-
{{jsxref("String.prototype.indexOf()")}}
-
Restituisce l'indice all'interno dell'oggetto {{jsxref("String")}} chiamante della prima occorrenza del valore specificato o -1 se non trovato.
-
{{jsxref("String.prototype.lastIndexOf()")}}
-
Restituisce l'indice all'interno dell'oggetto {{jsxref("String")}} chiamante della prima occorrenza del valore specificato o -1 se non trovato.
-
{{jsxref("String.prototype.localeCompare()")}}
-
Restituisce un numero che indica se una stringa di riferimento viene prima o dopo o è uguale alla stringa specificata in ordine di ordinamento.
-
{{jsxref("String.prototype.match()")}}
-
Utilizzato per abbinare un'espressione regolare a una stringa.
-
{{jsxref("String.prototype.normalize()")}}
-
Restituisce il modulo di normalizzazione Unicode del valore della stringa chiamante.
-
{{jsxref("String.prototype.padEnd()")}}
-
Riempie la stringa corrente dalla fine con una determinata stringa per creare una nuova stringa di una determinata lunghezza.
-
{{jsxref("String.prototype.padStart()")}}
-
Riempie la stringa corrente dall'inizio con una determinata stringa per creare una nuova stringa da una determinata lunghezza.
-
{{jsxref("String.prototype.quote()")}} {{obsolete_inline}}
-
Avvolge la stringa tra virgolette (""").
-
{{jsxref("String.prototype.repeat()")}}
-
Restituisce una stringa composta da elementi dell'oggetto ripetuti i tempi indicati.
-
{{jsxref("String.prototype.replace()")}}
-
Utilizzato per trovare una corrispondenza tra un'espressione regolare e una stringa e per sostituire la sottostringa con corrispondenza con una nuova sottostringa.
-
{{jsxref("String.prototype.search()")}}
-
Esegue la ricerca di una corrispondenza tra un'espressione regolare e una stringa specificata.
-
{{jsxref("String.prototype.slice()")}}
-
Estrae una sezione di una stringa e restituisce una nuova stringa.
-
{{jsxref("String.prototype.split()")}}
-
Divide un oggetto  {{jsxref("Global_Objects/String", "String")}} in una matrice di stringhe separando la stringa in sottostringhe.
-
{{jsxref("String.prototype.startsWith()")}}
-
Determina se una stringa inizia con i caratteri di un'altra stringa.
-
{{jsxref("String.prototype.substr()")}} {{deprecated_inline}}
-
Restituisce i caratteri in una stringa che inizia nella posizione specificata attraverso il numero specificato di caratteri.
-
{{jsxref("String.prototype.substring()")}}
-
Restituisce i caratteri in una stringa tra due indici nella stringa.
-
{{jsxref("String.prototype.toLocaleLowerCase()")}}
-
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()")}}.
-
{{jsxref("String.prototype.toLocaleUpperCase()")}}
-
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()")}}.
-
{{jsxref("String.prototype.toLowerCase()")}}
-
Restituisce il valore della stringa chiamante convertito in minuscolo.
-
{{jsxref("String.prototype.toSource()")}} {{non-standard_inline}}
-
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.
-
{{jsxref("String.prototype.toString()")}}
-
Restituisce una stringa che rappresenta l'oggetto specificato. Sostituisce il metodo {{jsxref("Object.prototype.toString()")}} .
-
{{jsxref("String.prototype.toUpperCase()")}}
-
Restituisce il valore della stringa chiamante convertito in maiuscolo.
-
{{jsxref("String.prototype.trim()")}}
-
Taglia gli spazi bianchi all'inizio e alla fine della stringa. Parte dello standard ECMAScript 5.
-
{{jsxref("String.prototype.trimStart()")}}
- {{jsxref("String.prototype.trimLeft()")}}
-
Taglia gli spazi bianchi dall'inizio della stringa.
-
{{jsxref("String.prototype.trimEnd()")}}
- {{jsxref("String.prototype.trimRight()")}}
-
Taglia gli spazi bianchi dalla fine della stringa.
-
{{jsxref("String.prototype.valueOf()")}}
-
Restituisce il valore primitivo dell'oggetto specificato. Sostituisce il metodo {{jsxref("Object.prototype.valueOf()")}}.
-
{{jsxref("String.prototype.@@iterator()", "String.prototype[@@iterator]()")}}
-
Restituisce un nuovo oggetto Iterator che itera sopra i punti di codice di un valore String, restituendo ogni punto di codice come valore String.
-
- -

HTML metodi wrapper (involucro)

- -

Questi metodi sono di uso limitato, in quanto forniscono solo un sottoinsieme dei tag e degli attributi HTML disponibili.

- -
-
{{jsxref("String.prototype.anchor()")}} {{deprecated_inline}}
-
{{htmlattrxref("name", "a", "<a name=\"name\">")}} (hypertext target)
-
{{jsxref("String.prototype.big()")}} {{deprecated_inline}}
-
{{HTMLElement("big")}}
-
{{jsxref("String.prototype.blink()")}} {{deprecated_inline}}
-
{{HTMLElement("blink")}}
-
{{jsxref("String.prototype.bold()")}} {{deprecated_inline}}
-
{{HTMLElement("b")}}
-
{{jsxref("String.prototype.fixed()")}} {{deprecated_inline}}
-
{{HTMLElement("tt")}}
-
{{jsxref("String.prototype.fontcolor()")}} {{deprecated_inline}}
-
{{htmlattrxref("color", "font", "<font color=\"color\">")}}
-
{{jsxref("String.prototype.fontsize()")}} {{deprecated_inline}}
-
{{htmlattrxref("size", "font", "<font size=\"size\">")}}
-
{{jsxref("String.prototype.italics()")}} {{deprecated_inline}}
-
{{HTMLElement("i")}}
-
{{jsxref("String.prototype.link()")}} {{deprecated_inline}}
-
{{htmlattrxref("href", "a", "<a href=\"url\">")}} (link to URL)
-
{{jsxref("String.prototype.small()")}} {{deprecated_inline}}
-
{{HTMLElement("small")}}
-
{{jsxref("String.prototype.strike()")}} {{deprecated_inline}}
-
{{HTMLElement("strike")}}
-
{{jsxref("String.prototype.sub()")}} {{deprecated_inline}}
-
{{HTMLElement("sub")}}
-
{{jsxref("String.prototype.sup()")}} {{deprecated_inline}}
-
{{HTMLElement("sup")}}
-
- -

Specificazioni

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificazioniStatoCommento
{{SpecName('ES1')}}{{Spec2('ES1')}}Definizione iniziale.
{{SpecName('ES5.1', '#sec-15.5.3.1', 'String.prototype')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-string.prototype', 'String.prototype')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-string.prototype', 'String.prototype')}}{{Spec2('ESDraft')}} 
- -

Compatibilità con il browser

- - - -

{{Compat("javascript.builtins.String.prototype")}}

- -

Guarda anche

- -
    -
  • {{jsxref("String")}}
    • -
  • {{jsxref("Function.prototype")}}
    • -
diff --git a/files/it/web/javascript/reference/operators/comma_operator/index.html b/files/it/web/javascript/reference/operators/comma_operator/index.html new file mode 100644 index 0000000000..e4027930a1 --- /dev/null +++ b/files/it/web/javascript/reference/operators/comma_operator/index.html @@ -0,0 +1,105 @@ +--- +title: Operatore virgola +slug: Web/JavaScript/Reference/Operators/Operatore_virgola +translation_of: Web/JavaScript/Reference/Operators/Comma_Operator +--- +
{{jsSidebar("Operators")}}
+ +

L'operatore virgola valuta ciascuno dei suoi operandi, da sinistra a destra, e restituisce il valore dell'ultimo operando.

+ +
{{EmbedInteractiveExample("pages/js/expressions-commaoperators.html")}}
+ + + +

Sintassi

+ +
expr1, expr2, expr3...
+ +

Parametri

+ +
+
expr1, expr2, expr3...
+
Qualsiasi espressione.
+
+ +

Descrizione

+ +

Puoi utilizzare l'operatore virgola quando vuoi includere più espressioni in una posizione che richiede una singola espressione. L'uso più comune di questo operatore è di fornire più parametri in un ciclo for.

+ +

L'operatore virgola è completamente differente dalla virgola utilizzata negli array, negli oggetti, e negli argomenti e parametri di funzione.

+ +

Esempi

+ +

Considerando a un array di 2 dimensioni contenente 10 elementi per ciascun lato, il seguente codice utilizza l'operatore virgola per incrementare i e decrementare j contemporaneamente.

+ +

Il seguente codice stampa i valori degli elementi in posizione diagonale dell'array:

+ +
for (var i = 0, j = 9; i <= 9; i++, j--)
+  console.log('a[' + i + '][' + j + '] = ' + a[i][j]);
+ +

Si noti che gli operatori virgola nelle assegnazioni potrebbero non avere l'effetto normale degli operatori virgola perché non esistono all'interno di un'espressione. Nel seguente esempio, a é impostato al valore di b = 3 (che é 3), ma l'espressione c = 4 continua a essere valutata e il suo valore viene restituito alla console (cioé 4). Questo é dovuto alla precedenza e all'associtività dell'operatore.

+ +
var a, b, c;
+
+a = b = 3, c = 4; // restituisce 4 nella console
+console.log(a); // 3 (più a sinistra)
+
+var x, y, z;
+
+x = (y = 5, z = 6); // restituisce 6 nella console
+console.log(x); // 6 (più a destra)
+
+ +

Elaborazione e restituzione

+ +

Un altro esempio che si potrebbe fare con l'operatore virgola è quello di eleborare prima di restituire. Come detto, solo l'ultimo elemento viene restituito ma anche tutti gli altri vengono valutati. Quindi, si potrebbe fare:

+ +
function myFunc() {
+  var x = 0;
+
+  return (x += 1, x); // stesso comportamento di ++x;
+}
+ +

Specificazioni

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ESDraft', '#sec-comma-operator', 'Comma operator')}}{{Spec2('ESDraft')}}
{{SpecName('ES6', '#sec-comma-operator', 'Comma operator')}}{{Spec2('ES6')}}
{{SpecName('ES5.1', '#sec-11.14', 'Comma operator')}}{{Spec2('ES5.1')}}
{{SpecName('ES1', '#sec-11.14', 'Comma operator')}}{{Spec2('ES1')}}Initial definition
+ +

Compatibilità con i browser

+ + + +

{{Compat("javascript.operators.comma")}}

+ +

Vedi anche

+ + diff --git a/files/it/web/javascript/reference/operators/conditional_operator/index.html b/files/it/web/javascript/reference/operators/conditional_operator/index.html new file mode 100644 index 0000000000..1ade61b085 --- /dev/null +++ b/files/it/web/javascript/reference/operators/conditional_operator/index.html @@ -0,0 +1,171 @@ +--- +title: Operatore condizionale (ternary) +slug: Web/JavaScript/Reference/Operators/Operator_Condizionale +tags: + - JavaScript Operatore operatore +translation_of: Web/JavaScript/Reference/Operators/Conditional_Operator +--- +

L'operatore condizionale (ternary) è  l'unico operatore JavaScript che necessità di tre operandi. Questo operatore è frequentemente usato al posto del comando if per la sua sintassi concisa e perché fornisce direttamente un espressione valutabile.

+ +

Sintassi

+ +
condizione ? espressione1 : espressione2
+ +

Parametri

+ +
+
condizione
+
Un espressione booleana (che viene valutata in vero o falso).
+
+ +
+
espressione1, espressione2
+
Espressione di qualunque tipo (vedi avanti nella pagina).
+
+ +

Descrizione

+ +

Se la condizione è vera, l'operatore ritorna il valore di espressione1; altrimenti, ritorna il valore di espressione2.  Per esempio, puoi usare questa espressione per mostrare un messaggio che cambia in base al valore della variabile isMember:

+ +
"The fee is " + (isMember ? "$2.00" : "$10.00")
+
+ +

Puoi anche assegnare variabili dipendenti dal risultato di un operatore ternario:

+ +
var elvisLives = Math.PI > 4 ? "Yep" : "Nope";
+ +

Sono anche possibili espressioni con operatori ternari multipli (nota: l'operatore condizionale è associativo a destra):

+ +
var firstCheck = false,
+    secondCheck = false,
+    access = firstCheck ? "Access denied" : secondCheck ? "Access denied" : "Access granted";
+
+console.log( access ); // logs "Access granted"
+ +

Puoi anche usare l'operatore ternario direttamente senza assegnamenti e senza combinazioni con altre espressioni, con lo scopo di valutare operazioni alternative:

+ +
var stop = false, age = 16;
+
+age > 18 ? location.assign("continue.html") : stop = true;
+
+ +

Puoi anche valutare operazioni multiple separandole con delle virgole:

+ +
var stop = false, age = 23;
+
+age > 18 ? (
+    alert("OK, you can go."),
+    location.assign("continue.html")
+) : (
+    stop = true,
+    alert("Sorry, you are much too young!")
+);
+
+ +

Puoi anche valutare più operazioni durante l'assegnamento di una variabile. In questo caso, l'ultimo valore separato da una virgola nelle parentesi sarà il valore assegnato.

+ +
var age = 16;
+
+var url = age > 18 ? (
+    alert("OK, you can go."),
+    // alert returns "undefined", but it will be ignored because
+    // isn't the last comma-separated value of the parenthesis
+    "continue.html" // the value to be assigned if age > 18
+) : (
+    alert("You are much too young!"),
+    alert("Sorry :-("),
+    // etc. etc.
+    "stop.html" // the value to be assigned if !(age > 18)
+);
+
+location.assign(url); // "stop.html"
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ESDraft', '#sec-conditional-operator', 'Conditional Operator')}}{{Spec2('ESDraft')}} 
{{SpecName('ES6', '#sec-conditional-operator', 'Conditional Operator')}}{{Spec2('ES6')}} 
{{SpecName('ES5.1', '#sec-11.12', 'The conditional operator')}}{{Spec2('ES5.1')}} 
{{SpecName('ES1', '#sec-11.12', 'The conditional operator')}}{{Spec2('ES1')}}Initial definition. Implemented in JavaScript 1.0.
+ +

Compatibilità con Browser

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vedi anche

+ + diff --git a/files/it/web/javascript/reference/operators/operator_condizionale/index.html b/files/it/web/javascript/reference/operators/operator_condizionale/index.html deleted file mode 100644 index 1ade61b085..0000000000 --- a/files/it/web/javascript/reference/operators/operator_condizionale/index.html +++ /dev/null @@ -1,171 +0,0 @@ ---- -title: Operatore condizionale (ternary) -slug: Web/JavaScript/Reference/Operators/Operator_Condizionale -tags: - - JavaScript Operatore operatore -translation_of: Web/JavaScript/Reference/Operators/Conditional_Operator ---- -

L'operatore condizionale (ternary) è  l'unico operatore JavaScript che necessità di tre operandi. Questo operatore è frequentemente usato al posto del comando if per la sua sintassi concisa e perché fornisce direttamente un espressione valutabile.

- -

Sintassi

- -
condizione ? espressione1 : espressione2
- -

Parametri

- -
-
condizione
-
Un espressione booleana (che viene valutata in vero o falso).
-
- -
-
espressione1, espressione2
-
Espressione di qualunque tipo (vedi avanti nella pagina).
-
- -

Descrizione

- -

Se la condizione è vera, l'operatore ritorna il valore di espressione1; altrimenti, ritorna il valore di espressione2.  Per esempio, puoi usare questa espressione per mostrare un messaggio che cambia in base al valore della variabile isMember:

- -
"The fee is " + (isMember ? "$2.00" : "$10.00")
-
- -

Puoi anche assegnare variabili dipendenti dal risultato di un operatore ternario:

- -
var elvisLives = Math.PI > 4 ? "Yep" : "Nope";
- -

Sono anche possibili espressioni con operatori ternari multipli (nota: l'operatore condizionale è associativo a destra):

- -
var firstCheck = false,
-    secondCheck = false,
-    access = firstCheck ? "Access denied" : secondCheck ? "Access denied" : "Access granted";
-
-console.log( access ); // logs "Access granted"
- -

Puoi anche usare l'operatore ternario direttamente senza assegnamenti e senza combinazioni con altre espressioni, con lo scopo di valutare operazioni alternative:

- -
var stop = false, age = 16;
-
-age > 18 ? location.assign("continue.html") : stop = true;
-
- -

Puoi anche valutare operazioni multiple separandole con delle virgole:

- -
var stop = false, age = 23;
-
-age > 18 ? (
-    alert("OK, you can go."),
-    location.assign("continue.html")
-) : (
-    stop = true,
-    alert("Sorry, you are much too young!")
-);
-
- -

Puoi anche valutare più operazioni durante l'assegnamento di una variabile. In questo caso, l'ultimo valore separato da una virgola nelle parentesi sarà il valore assegnato.

- -
var age = 16;
-
-var url = age > 18 ? (
-    alert("OK, you can go."),
-    // alert returns "undefined", but it will be ignored because
-    // isn't the last comma-separated value of the parenthesis
-    "continue.html" // the value to be assigned if age > 18
-) : (
-    alert("You are much too young!"),
-    alert("Sorry :-("),
-    // etc. etc.
-    "stop.html" // the value to be assigned if !(age > 18)
-);
-
-location.assign(url); // "stop.html"
- -

Specifiche

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('ESDraft', '#sec-conditional-operator', 'Conditional Operator')}}{{Spec2('ESDraft')}} 
{{SpecName('ES6', '#sec-conditional-operator', 'Conditional Operator')}}{{Spec2('ES6')}} 
{{SpecName('ES5.1', '#sec-11.12', 'The conditional operator')}}{{Spec2('ES5.1')}} 
{{SpecName('ES1', '#sec-11.12', 'The conditional operator')}}{{Spec2('ES1')}}Initial definition. Implemented in JavaScript 1.0.
- -

Compatibilità con Browser

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vedi anche

- - diff --git a/files/it/web/javascript/reference/operators/operatore_virgola/index.html b/files/it/web/javascript/reference/operators/operatore_virgola/index.html deleted file mode 100644 index e4027930a1..0000000000 --- a/files/it/web/javascript/reference/operators/operatore_virgola/index.html +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: Operatore virgola -slug: Web/JavaScript/Reference/Operators/Operatore_virgola -translation_of: Web/JavaScript/Reference/Operators/Comma_Operator ---- -
{{jsSidebar("Operators")}}
- -

L'operatore virgola valuta ciascuno dei suoi operandi, da sinistra a destra, e restituisce il valore dell'ultimo operando.

- -
{{EmbedInteractiveExample("pages/js/expressions-commaoperators.html")}}
- - - -

Sintassi

- -
expr1, expr2, expr3...
- -

Parametri

- -
-
expr1, expr2, expr3...
-
Qualsiasi espressione.
-
- -

Descrizione

- -

Puoi utilizzare l'operatore virgola quando vuoi includere più espressioni in una posizione che richiede una singola espressione. L'uso più comune di questo operatore è di fornire più parametri in un ciclo for.

- -

L'operatore virgola è completamente differente dalla virgola utilizzata negli array, negli oggetti, e negli argomenti e parametri di funzione.

- -

Esempi

- -

Considerando a un array di 2 dimensioni contenente 10 elementi per ciascun lato, il seguente codice utilizza l'operatore virgola per incrementare i e decrementare j contemporaneamente.

- -

Il seguente codice stampa i valori degli elementi in posizione diagonale dell'array:

- -
for (var i = 0, j = 9; i <= 9; i++, j--)
-  console.log('a[' + i + '][' + j + '] = ' + a[i][j]);
- -

Si noti che gli operatori virgola nelle assegnazioni potrebbero non avere l'effetto normale degli operatori virgola perché non esistono all'interno di un'espressione. Nel seguente esempio, a é impostato al valore di b = 3 (che é 3), ma l'espressione c = 4 continua a essere valutata e il suo valore viene restituito alla console (cioé 4). Questo é dovuto alla precedenza e all'associtività dell'operatore.

- -
var a, b, c;
-
-a = b = 3, c = 4; // restituisce 4 nella console
-console.log(a); // 3 (più a sinistra)
-
-var x, y, z;
-
-x = (y = 5, z = 6); // restituisce 6 nella console
-console.log(x); // 6 (più a destra)
-
- -

Elaborazione e restituzione

- -

Un altro esempio che si potrebbe fare con l'operatore virgola è quello di eleborare prima di restituire. Come detto, solo l'ultimo elemento viene restituito ma anche tutti gli altri vengono valutati. Quindi, si potrebbe fare:

- -
function myFunc() {
-  var x = 0;
-
-  return (x += 1, x); // stesso comportamento di ++x;
-}
- -

Specificazioni

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('ESDraft', '#sec-comma-operator', 'Comma operator')}}{{Spec2('ESDraft')}}
{{SpecName('ES6', '#sec-comma-operator', 'Comma operator')}}{{Spec2('ES6')}}
{{SpecName('ES5.1', '#sec-11.14', 'Comma operator')}}{{Spec2('ES5.1')}}
{{SpecName('ES1', '#sec-11.14', 'Comma operator')}}{{Spec2('ES1')}}Initial definition
- -

Compatibilità con i browser

- - - -

{{Compat("javascript.operators.comma")}}

- -

Vedi anche

- - 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 ---- -
{{jsSidebar("Operators")}}
- -
Gli operatori aritmetici 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 (/).
- -

Addizione (+)

- -

L'operazione di addizione produce la somma di operandi numerici o la concatenzione di stringhe.

- -

Sintassi

- -
Operatore: x + y
-
- -

Esempi

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

Sottrazione (-)

- -

L'operatore di sottrazione fa la sottrazione dei due operandi e produce la loro differenza.

- -

Sintassi

- -
Operatore: x - y
-
- -

Esempi

- -
5 - 3 // 2
-3 - 5 // -2
-"foo" - 3 // NaN
- -

Divisione (/)

- -

L'operatore di divisione produce il quoziente dei suoi operandi dove l'operando di sinistra è il dividendo e l'operando di destra è il divisore.

- -

Sintassi

- -
Operatore: x / y
-
- -

Esempi

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

Moltiplicazione (*)

- -

The multiplication operator produces the product of the operands.

- -

Sintassi

- -
Operatore: x * y
-
- -

Esempi

- -
2 * 2 // 4
--2 * 2 // -4
-Infinity * 0 // NaN
-Infinity * Infinity // Infinity
-"foo" * 2 // NaN
-
- -

Resto (%)

- -

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.

- -

Sintassi

- -
Operatore: var1 % var2
-
- -

Esempi

- -
12 % 5 // 2
--1 % 2 // -1
-NaN % 2 // NaN
-1 % 2 // 1
-2 % 3 // 2
--4 % 2 // -0
-
- -

Esponente (**)

- -

L'operatore Esponente o esponenziale in JavaScript. Una delle funzionalità di questa versione è l'operatore di esponenziazione. Esponente restituisce il risultato dell'elevamento a potenza dal primo operando al secondo. Cioè var1 var2 , var2. var1e var2 sono variabili. L'operatore Esponente ha ragione associativa. a ** b ** c equivale a a ** (b ** c).

- -

Sintassi

- -
Operatore: var1 ** var2
-
- -

Note

- -

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 ( +/-/~/!/delete/void/typeof ) 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#, ** è usato per indicare l'operatore. 

- -
-2 ** 2 // equals 4 in ES2016 or in Bash, equals -4 in other languages.
- -

Accetta base sul lato sinistro ed esponente sul lato destro, rispettivamente.

- -
let value = 5; value **= 2; // value: 25
-
- -

Esempi

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

Per invertire il segno del risultato di un'espressione di Esponente:

- -
-(2 ** 2) // -4
-
- -

Per forzare la base di un'espressione di Esponente ad essere un numero negativo:

- -
(-2) ** 2 // 4
- -

Incremento (++)

- -

L'operatore di incremento incrementa (aggiunge uno a) il suo operando e restituisce un valore.

- -
    -
  • Se usato in post posizione, con operatore dopo operando (ad esempio, x ++), restituisce il valore prima di incrementare.
    • -
  • Se usato come prefisso quindi prima dell'operando (ad esempio, ++ x), restituisce il valore dopo l'incremento.
    • -
- -

Sintassi

- -
Operatore: x++ or ++x
-
- -

Esempi

- -
// Postfix // post posizione
-var x = 3;
-y = x++; // y = 3, x = 4
-
-// Prefix // Prefisso
-var a = 2;
-b = ++a; // a = 3, b = 3
-
- -

Decremento (--)

- -

L'operatore decrementa decrementa (sottrae uno da) il suo operando e restituisce un valore.

- -
    -
  • Se usato in post posizione (ad esempio x--), restituisce il valore prima di decrementare.
    • -
  • Se usato come prefisso (ad esempio, --x), restituisce il valore dopo la decrementazione.
    • -
- -

Sintassi

- -
Operatore: x-- or --x
-
- -

Esempi

- -
// Postfix // post posizione
-var x = 3;
-y = x--; // y = 3, x = 2
-
-// Prefix // Prefisso
-var a = 2;
-b = --a; // a = 1, b = 1
-
- -

Negazione unaria (-)

- -

L'operatore di negazione unario precede il suo operando e lo nega.

- -

Sintassi

- -
Operatore: -x
-
- -

Esempi

- -
var x = 3;
-y = -x; // y = -3, x = 3
-
-//L'operatore di negazione unario può convertire numeri diversi in un numero
-var x = "4";
-y = -x; // y = -4
- -

Unario più (+)

- -

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 true , false e null . 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 NaN.

- -

Sintassi

- -
Operatore: +x
-
- -

Esempi

- -
+3     // 3
-+'3'   // 3
-+true  // 1
-+false // 0
-+null  // 0
-+function(val){  return val } // NaN
- -

Specificazioni

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificazioniStatoCommento
ECMAScript 1st Edition.StandardDefinizione iniziale.
{{SpecName('ES5.1', '#sec-11.3')}}{{Spec2('ES5.1')}}Definito in diverse sezioni della specifica: Additive operators, Multiplicative operators, Postfix expressions, Unary operators.
{{SpecName('ES2015', '#sec-postfix-expressions')}}{{Spec2('ES2015')}}Definito in diverse sezioni della specifica: Additive operators, Multiplicative operators, Postfix expressions, Unary operators.
{{SpecName('ES2016', '#sec-postfix-expressions')}}{{Spec2('ES2016')}}Aggiunto Exponentiation operator.
- -

Compatibilità con i browser

- - - -

{{Compat("javascript.operators.arithmetic")}}

- -

Guarda anche

- - diff --git a/files/it/web/javascript/reference/template_literals/index.html b/files/it/web/javascript/reference/template_literals/index.html new file mode 100644 index 0000000000..5bb4890ad8 --- /dev/null +++ b/files/it/web/javascript/reference/template_literals/index.html @@ -0,0 +1,210 @@ +--- +title: Stringhe template +slug: Web/JavaScript/Reference/template_strings +translation_of: Web/JavaScript/Reference/Template_literals +--- +
{{JsSidebar("More")}}
+ +

Le stringhe template sono stringhe letterali che consentono espressioni incorporate. Puoi usare stringhe multi-linea e caratteristiche di interpolazione stringa con esse.

+ +

Sintassi

+ +
`stringa testo`
+
+`stringa testo linea 1
+ stringa testo linea 2`
+
+`stringa testo ${espressione} stringa testo`
+
+tag `stringa testo ${espressione} stringa testo`
+
+ +

Descrizione

+ +

Le stringhe template sono racchiuse dal carattere backtick (` `) (accento grave) invece delle singole o doppie virgolette. Le stringhe template possono contenere segnaposti. Questi sono indicati dal segno del Dollaro e parentesi graffe (${espressione}). Le espressioni nei segnaposti e nel testo compreso vengono passati ad una funzione. La funzione predefinita semplicemente concatena le parti in una stringa. Se c'è un'espressione che precede (tag qui), la stringa template è chiamata "stringa template taggata". In questo caso, l'espressione tag (di solito una funzione) viene chiamata con la stringa template processata, con cui puoi in seguito manipolare prima dell'output.

+ +

Stringhe multilinea

+ +

Ogni carattere di nuova linea inseriti nel sorgente sono parte della stringa template. Usando stringhe normali, potresti usare la seguente sintassi per ottenere stringhe multilinea:

+ +
console.log("stringa testo linea 1\n"+
+"stringa testo linea 2");
+// "stringa testo linea 1
+// stringa testo linea 2"
+ +

Per avere lo stesso effetto con le stringhe multilinea, puoi adesso scrivere:

+ +
console.log(`stringa testo linea 1
+stringa testo linea 2`);
+// "stringa testo linea 1
+// stringa testo linea 2"
+ +

Interpolazione di espressioni

+ +

Per incorporare espressioni dentro normale stringhe, potresti fare uso della seguente sintassi:

+ +
var a = 5;
+var b = 10;
+console.log("Quindici è " + (a + b) + " e\nnon " + (2 * a + b) + ".");
+// "Quindici è 15 e
+// non 20."
+ +

Adesso, con le stringhe template, puoi fare uso della sintassi ridotta facendo sostituzioni come questa più leggibile:

+ +
var a = 5;
+var b = 10;
+console.log(`Quindici è ${a + b} e\nnon ${2 * a + b}.`);
+// "Quindici è 15 e
+// non 20."
+ +

Stringhe template taggate

+ +

Una forma più avanzata di stringhe template sono le stringhe template taggate. Con esse puoi modificare l'output delle stringhe template usando una funzione. Il primo argomento contiene un array di stringhe letterali ("Ciao" e " mondo" in questo esempio). Il secondo, ed ogni argomento dopo il primo, sono i valori delle espressioni di sostituzione ("15" e "50" qui) processate (o a volte detto lavorate). Alla fine, la tua funzione ritorna la stringa manipolata. Non c'è nulla di speciale sul nome tag nel seguente esempio. Il nome della funzione può essere qualsiasi cosa tu voglia.

+ +
var a = 5;
+var b = 10;
+
+function tag(strings, ...values) {
+  console.log(strings[0]); // "Ciao "
+  console.log(strings[1]); // " mondo "
+  console.log(values[0]);  // 15
+  console.log(values[1]);  // 50
+
+  return "Bazinga!";
+}
+
+tag`Ciao ${ a + b } mondo ${ a * b }`;
+// "Bazinga!"
+
+ +

Le funzioni Tag non devono per forza ritornare una stringa, come mostrato nel seguente esempio.

+ +
function template(strings, ...keys) {
+  return (function(...values) {
+    var dict = values[values.length - 1] || {};
+    var result = [strings[0]];
+    keys.forEach(function(key, i) {
+      var value = Number.isInteger(key) ? values[key] : dict[key];
+      result.push(value, strings[i + 1]);
+    });
+    return result.join('');
+  });
+}
+
+template`${0}${1}${0}!`('Y', 'A');  // "YAY!"
+template`${0} ${'foo'}!`('Ciao', {foo: 'Mondo'});  // "Ciao Mondo!"
+
+ +

Stringhe grezze

+ +

La proprietà speciale raw, disponibile sull'argomento della prima funzione delle stringhe template taggate, ti consente di accedere alle stringhe grezze per come sono state inserite.

+ +
function tag(strings, ...values) {
+  console.log(strings.raw[0]);
+  // "stringa testo linea 1 \\n stringa testo linea 2"
+}
+
+tag`stringa testo linea 1 \n stringa testo linea 2`;
+
+ +

In aggiunta, il metodo {{jsxref("String.raw()")}} esiste per creare stringhe grezze proprio come la funzione template predefinita e contatenazione di stringhe potrebbero creare.

+ +
String.raw`Salve\n${2+3}!`;
+// "Salve\n5!"
+ +

Sicurezza

+ +

Le stringhe template NON DEVONO essere costruite da utenti non fidati, poichè hanno accesso a variabili e funzioni.

+ +
`${console.warn("this is",this)}`; // "this is" Window
+
+let a = 10;
+console.warn(`${a+=20}`); // "30"
+console.warn(a); // 30
+
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES6', '#sec-template-literals', 'Template Literals')}}{{Spec2('ES6')}}Definizione iniziale. Definita in molte sezioni della specifica: Template Literals, Tagged Templates
{{SpecName('ESDraft', '#sec-template-literals', 'Template Literals')}}{{Spec2('ESDraft')}}Definita in molte sezioni della specifica: Template Literals, Tagged Templates
+ +

Compatibilità browser

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaratteristicaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Supporto base{{CompatChrome(41)}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("34")}}{{CompatNo}}{{CompatOpera(28)}}{{CompatSafari(9)}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaratteristicaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Supporto base{{CompatNo}}{{CompatChrome(41)}}{{CompatGeckoMobile("34")}}{{CompatNo}}{{CompatOpera(28)}}{{CompatSafari(9)}}
+
+ +

Vedi anche

+ + diff --git a/files/it/web/javascript/reference/template_strings/index.html b/files/it/web/javascript/reference/template_strings/index.html deleted file mode 100644 index 5bb4890ad8..0000000000 --- a/files/it/web/javascript/reference/template_strings/index.html +++ /dev/null @@ -1,210 +0,0 @@ ---- -title: Stringhe template -slug: Web/JavaScript/Reference/template_strings -translation_of: Web/JavaScript/Reference/Template_literals ---- -
{{JsSidebar("More")}}
- -

Le stringhe template sono stringhe letterali che consentono espressioni incorporate. Puoi usare stringhe multi-linea e caratteristiche di interpolazione stringa con esse.

- -

Sintassi

- -
`stringa testo`
-
-`stringa testo linea 1
- stringa testo linea 2`
-
-`stringa testo ${espressione} stringa testo`
-
-tag `stringa testo ${espressione} stringa testo`
-
- -

Descrizione

- -

Le stringhe template sono racchiuse dal carattere backtick (` `) (accento grave) invece delle singole o doppie virgolette. Le stringhe template possono contenere segnaposti. Questi sono indicati dal segno del Dollaro e parentesi graffe (${espressione}). Le espressioni nei segnaposti e nel testo compreso vengono passati ad una funzione. La funzione predefinita semplicemente concatena le parti in una stringa. Se c'è un'espressione che precede (tag qui), la stringa template è chiamata "stringa template taggata". In questo caso, l'espressione tag (di solito una funzione) viene chiamata con la stringa template processata, con cui puoi in seguito manipolare prima dell'output.

- -

Stringhe multilinea

- -

Ogni carattere di nuova linea inseriti nel sorgente sono parte della stringa template. Usando stringhe normali, potresti usare la seguente sintassi per ottenere stringhe multilinea:

- -
console.log("stringa testo linea 1\n"+
-"stringa testo linea 2");
-// "stringa testo linea 1
-// stringa testo linea 2"
- -

Per avere lo stesso effetto con le stringhe multilinea, puoi adesso scrivere:

- -
console.log(`stringa testo linea 1
-stringa testo linea 2`);
-// "stringa testo linea 1
-// stringa testo linea 2"
- -

Interpolazione di espressioni

- -

Per incorporare espressioni dentro normale stringhe, potresti fare uso della seguente sintassi:

- -
var a = 5;
-var b = 10;
-console.log("Quindici è " + (a + b) + " e\nnon " + (2 * a + b) + ".");
-// "Quindici è 15 e
-// non 20."
- -

Adesso, con le stringhe template, puoi fare uso della sintassi ridotta facendo sostituzioni come questa più leggibile:

- -
var a = 5;
-var b = 10;
-console.log(`Quindici è ${a + b} e\nnon ${2 * a + b}.`);
-// "Quindici è 15 e
-// non 20."
- -

Stringhe template taggate

- -

Una forma più avanzata di stringhe template sono le stringhe template taggate. Con esse puoi modificare l'output delle stringhe template usando una funzione. Il primo argomento contiene un array di stringhe letterali ("Ciao" e " mondo" in questo esempio). Il secondo, ed ogni argomento dopo il primo, sono i valori delle espressioni di sostituzione ("15" e "50" qui) processate (o a volte detto lavorate). Alla fine, la tua funzione ritorna la stringa manipolata. Non c'è nulla di speciale sul nome tag nel seguente esempio. Il nome della funzione può essere qualsiasi cosa tu voglia.

- -
var a = 5;
-var b = 10;
-
-function tag(strings, ...values) {
-  console.log(strings[0]); // "Ciao "
-  console.log(strings[1]); // " mondo "
-  console.log(values[0]);  // 15
-  console.log(values[1]);  // 50
-
-  return "Bazinga!";
-}
-
-tag`Ciao ${ a + b } mondo ${ a * b }`;
-// "Bazinga!"
-
- -

Le funzioni Tag non devono per forza ritornare una stringa, come mostrato nel seguente esempio.

- -
function template(strings, ...keys) {
-  return (function(...values) {
-    var dict = values[values.length - 1] || {};
-    var result = [strings[0]];
-    keys.forEach(function(key, i) {
-      var value = Number.isInteger(key) ? values[key] : dict[key];
-      result.push(value, strings[i + 1]);
-    });
-    return result.join('');
-  });
-}
-
-template`${0}${1}${0}!`('Y', 'A');  // "YAY!"
-template`${0} ${'foo'}!`('Ciao', {foo: 'Mondo'});  // "Ciao Mondo!"
-
- -

Stringhe grezze

- -

La proprietà speciale raw, disponibile sull'argomento della prima funzione delle stringhe template taggate, ti consente di accedere alle stringhe grezze per come sono state inserite.

- -
function tag(strings, ...values) {
-  console.log(strings.raw[0]);
-  // "stringa testo linea 1 \\n stringa testo linea 2"
-}
-
-tag`stringa testo linea 1 \n stringa testo linea 2`;
-
- -

In aggiunta, il metodo {{jsxref("String.raw()")}} esiste per creare stringhe grezze proprio come la funzione template predefinita e contatenazione di stringhe potrebbero creare.

- -
String.raw`Salve\n${2+3}!`;
-// "Salve\n5!"
- -

Sicurezza

- -

Le stringhe template NON DEVONO essere costruite da utenti non fidati, poichè hanno accesso a variabili e funzioni.

- -
`${console.warn("this is",this)}`; // "this is" Window
-
-let a = 10;
-console.warn(`${a+=20}`); // "30"
-console.warn(a); // 30
-
- -

Specifiche

- - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('ES6', '#sec-template-literals', 'Template Literals')}}{{Spec2('ES6')}}Definizione iniziale. Definita in molte sezioni della specifica: Template Literals, Tagged Templates
{{SpecName('ESDraft', '#sec-template-literals', 'Template Literals')}}{{Spec2('ESDraft')}}Definita in molte sezioni della specifica: Template Literals, Tagged Templates
- -

Compatibilità browser

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - - - -
CaratteristicaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Supporto base{{CompatChrome(41)}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("34")}}{{CompatNo}}{{CompatOpera(28)}}{{CompatSafari(9)}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaratteristicaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Supporto base{{CompatNo}}{{CompatChrome(41)}}{{CompatGeckoMobile("34")}}{{CompatNo}}{{CompatOpera(28)}}{{CompatSafari(9)}}
-
- -

Vedi anche

- - diff --git a/files/it/web/javascript/una_reintroduzione_al_javascript/index.html b/files/it/web/javascript/una_reintroduzione_al_javascript/index.html deleted file mode 100644 index 4dc4a484a7..0000000000 --- a/files/it/web/javascript/una_reintroduzione_al_javascript/index.html +++ /dev/null @@ -1,966 +0,0 @@ ---- -title: Una reintroduzione al Java Script (Tutorial JS) -slug: Web/JavaScript/Una_reintroduzione_al_JavaScript -translation_of: Web/JavaScript/A_re-introduction_to_JavaScript ---- -

Introduzione

- -

Perchè una reintroduzione? Perchè  JavaScript ha la ragionevole pretesa di essere il linguaggio di programmazione più frainteso del mondo. Benchè spesso considerato ironicamente come un giocattolo, la sua ingannevole semplicità nasconde alcune potenti caratteristiche. JavaScript viene attualmente utilizzato da un numero incredibile di applicazioni di alto profilo, che mostrano come la conoscenza profonda di questa tecnologia sia un importante abilità per qualunque sviluppatore web.

- -

È utile iniziare con un accenno alla storia del linguaggio. JavaScript fu creato nel 1995 da Brendan Eich, mentre lavorava come ingegnere presso Netscape, e rilasciata per la prima volta con Netscape 2 all'inizio del 1996. Originariamente doveva essere chiamato LiveScript, ma fu poi rinominato in Javacript per una fatalmente dannosa decisione di marketing che tentava di approfittare della popolarità del linguaggio Java della Sun Microsystem — nonostante abbiano molto poco in comune. Questa è stata una fonte di confusione da allora.

- -

Diversi mesi dopo, Microsoft rilasciò JScript con Internet Explorer 3, un linguaggio che lavorava in modo simile a JavaScript ed era quasi del tutto compatibile con esso. Netscape sottomise il linguaggio alla Ecma International, un'organizzazione europea di standardizzazione, che porta alla nascita della prima edizione degli standard ECMAScript. Lo standard ricevette un significativo aggiornamento come ECMAScript edition 3 nel 1999, ed è rimasto più o meno stabile da allora. La quarta edizione fu abbandonata a causa delle differenze di vedute sulla complessità del linguaggio. Molte parti della quarta edizione formano la base del nuovo ECMAScript edizione 5, pubblicato nel dicembre del 2009, e per la sesta edizione pubblicata a giugno 2015.

- -

Diversamente dalla maggior parte dei linguaggi di programmazione, il linguaggio JavaScript non ha il concetto di input e output. È stato concepito per essere eseguito come linguaggio di scripting in un ambiente ospite, ed è responsabilità dell'ambiente ospite fornire meccanismi per comunicare con il mondo esterno. L'ambiente ospite più comune è il browser, ma interpreti JavaScript possono essere trovati anche in Adobe Acrobat, Photoshop, motore Widget di Yahoo! , e addirittura in ambienti lato server o in desktop environment come GNOME (una delle GUI più popolari per i sistemi GNU/Linux) e altri ancora.

- -

Panoramica

- -

JavaScript è un linguaggio dinamico orientato agli oggetti; esso ha tipi e operatori, oggetti nucleo, e metodi. La sua sintassi deriva dai linguaggi Java e C, quindi molte strutture utilizzate da questi linguaggi ricorrono anche in JavaScript. Una delle differenze chiave è che JavaScript non ha classi; invece, la funzionalità di classe è realizzata dai prototipi oggetto. L'altra differenza principale è che le funzioni sono oggetti, dando alle funzioni la capacità di mantenere codice eseguibile ed essere passate in giro come ogni altro oggetto.

- -

Cominciamo guardando il blocco di costruzione di qualsiasi linguaggio: i tipi. I programmmi JavaScript manipolano valori, e tutti quei valori appartengono ad un tipo. I tipi JavaScript sono:

- - - -

... oh, e Undefined (indefiniti) e Null (nulli), che sono leggermente strani. E gli Array, che sono un tipo speciale di oggetto. E Date ed Espressioni regolari, che sono oggetti che si ottengono gratuitamente. E per essere tecnicamente precisi, le funzioni sono solo un tipo speciale di oggetto. Quindi il diagramma dei tipi somiglia più a questo:

- -
    -
  • Numeri
    • -
  • Stringhe
    • -
  • Booleani
    • -
  • Oggetti -
      -
    • Funzioni
      • -
    • Array
      • -
    • Date
      • -
    • ExpReg
      • -
    -
    • -
  • Null
    • -
  • Undefined
    • -
- -

E ci sono anche alcuni tipi nativi di Errori. Comunque, le cose sono molto più semplici se ci atteniamo al primo diagramma

- -

Numeri

- -

I numeri in JavaScript sono in formato 64-bit a doppia precisione valore del IEEE 754, secondo le specifiche. Questo ha qualche interessante conseguenza. Non esiste una cosa come un intero in JavaScript, quindi bisogna stare un pò attenti con la vostra aritmetica, se siete abituati alla matematica in C o Java. Stare attenti a cose come:

- -
0.1 + 0.2 == 0.30000000000000004
-
- -

In pratica, i valori interi sono trattati come int a 32-bit (e sono memorizzati in questo modo in alcune implementazioni dei browser), che può essere importante per operazioni in bit. Per dettagli, consulta La Guida Completa sui Numeri JavaScript.

- -

Gli operatori numerici standard sono supportati, incluso addizione, sottrazione, modulo (o resto) aritmetico e così via. Vi sono anche oggetti nativi che non sono stati menzionati prima, chiamati Math per trattare funzioni matematiche più avanzate e costanti:

- -
Math.sin(3.5);
-var d = Math.PI * r * r;
-
- -

E' possibile convertire una stringa in un intero utilizzando la funzione nativa parseInt(). Questo prende la base per la conversione come secondo argomento opzionale, che si dovrebbe fornire sempre:

- -
> parseInt("123", 10)
-123
-> parseInt("010", 10)
-10
-
- -

Se non si fornisce la base, si possono ricevere risultati inattesi:

- -
> parseInt("010")
-8
-
- -

Questo succede perchè la funzione parseInt ha deciso di trattare la stringa come un ottale a causa del primo 0.

- -

Se si vuole convertire un numero binario in un intero, basta cambiare la base:

- -
> parseInt("11", 2)
-3
-
- -

Similmente, è possibile analizzare numeri in virgola mobile usando la funzione nativa parseFloat() che utilizza sempre la base 10 diversamente dalla cugina parseInt().

- -

E' inoltre possibile utilizzare l'operatore unario + per convertire valori in numeri:

- -
> + "42"
-42
-
- -

Un valore speciale chiamato NaN (abbreviazione per "Not a Number" - Non un Numero) viene restituita se la stringa non è numerica:

- -
> parseInt("hello", 10)
-NaN
-
- -

Il NaN è tossico: se viene fornito come input a qualsiasi operazione matematica, il risultato sarà anch'esso NaN:

- -
> NaN + 5
-NaN
-
- -

E' possibile verificare se NaN usando la funzione nativa isNaN():

- -
> isNaN(NaN)
-true
-
- -

Anche JavaScript ha i valori speciali Infinity e  -Infinity:

- -
> 1 / 0
-Infinity
-> -1 / 0
--Infinity
-
- -

E' possibile analizzare i valori Infinity, -Infinity e NaN usando la funzione nativa isFinite():

- -
> isFinite(1/0)
-false
-> isFinite(-Infinity)
-false
-> isFinite(NaN)
-false
-
- -
Nota: Le funzioni parseInt() e parseFloat() analizzano una stringa finchè raggiungono un carattere che è non è valido per il formato numerico specificato, quindi restituiscono il numero analizzato fino a quel punto. Tuttavia l'operatore "+" converte semplicemente la stringa a NaN se è presente in essa qualche carattere invalido. E' sufficiente provare ad eseguire l'analisi della stringa "10.2abc" con ogni metodo da soli utilizzando la console e sarà possibile capire meglio le differenze.
- -

Stringhe

- -

Le stringhe in JavaScript sono sequenze di caratteri. Più precisamente, sono sequenze di Caratteri Unicode, con ogni carattere rappresentato da un numero a 16-bit. Questa dovrebbe essere una buona notizia per tutti coloro che hanno avuto a che fare con l'internazionalizzazione.

- -

Se si vuole rappresentare un singolo carattere, occorre semplicemente utilizzare una stringa di lunghezza 1.

- -

Per trovare la lunghezza di una stringa, accedere la sua proprietà length:

- -
> "hello".length
-5
-
- -

Ecco il nostro primo assaggio degli oggetti JavaScript! E' stato menzionato che le stringhe sono anch'esse oggetti? Ed hanno anche metodi:

- -
> "hello".charAt(0)
-h
-> "hello, world".replace("hello", "goodbye")
-goodbye, world
-> "hello".toUpperCase()
-HELLO
-
- -

Altri tipi

- -

JavaScript distingue tra null, che è un oggetto di tipo 'object' che indica un mancanza deliberata di valore, e undefined, che è un oggetto di tipo 'undefined' che indica un valore non inizializzato — ossia un valore che non è stato ancora assegnato. Parleremo delle variabili più avanti, ma in JavaScript è possibile dichiarare una variabile senza assegnarle un valore. Facendo questo, il tipo della variabile creata sarà undefined.

- -

JavaScript ha il tipo booleano, con possibili valori true (vero) e false (falso) (entrambi i quali sono parole chiave). Qualunque valore può essere convertito in booleano seguendo le seguenti regole:

- -
    -
  1. false, 0, la stringa vuota (""), NaN, null, e undefined diventano tutti false
    2. -
  2. tutti gli altri valori diventano true
    3. -
- -

E' possibile eseguire questa conversione esplicitamente usando la funzione Boolean():

- -
> Boolean("")
-false
-> Boolean(234)
-true
-
- -

Tuttavia, questo raramente è necessario, JavaScript eseguirà silenziosamente la conversione quando si aspetta un booleano, così come in una istruzione  if (vedi sotto). Per questa ragione, a volte si parla semplicemente di "valori veri" e "valori falsi" valori significativi che diventano true e false, rispettivamente, quando convertiti in booleani. In alternativa, tali valori possono essere chiamati "truthy" e "falsy", rispettivamente.

- -

Le operazioni booleane come && (and logico), || (or logico), e ! (not logico) sono supportate; vedi sotto.

- -

Variabili

- -

Le nuove varibili sono dichiarate in JavaScript utilizzando la parola chiave var:

- -
var a;
-var name = "simon";
-
- -

Se la variabile viene dichiarata senza assegnarle un valore, il suo tipo sarà undefined. 

- -

Una differenza importante rispetto ad altri linguaggi come Java è che in JavaScript, i blocchi non hanno ambito; solo le funzioni hanno ambito. Quindi se una variabile viene definita utilizzando var in una istruzione composta (ad esempio all'interno di una struttura di controllo if), essa sarà visibile da parte dell'intera funzione.

- -

Operatori

- -

Gli operatori numerici in JavaScript sono +, -, *, / e  % - che è l'operatore per il resto. I valori sono assegnanti usando =, e vi sono anche le istruzioni di assegnamento composte tipo += e -=. Questi comprimono la forma x = x operatore y.

- -
x += 5
-x = x + 5
-
- -

E' possibile utilizzare ++ e -- per incrementare e decrementare rispettivamente. Questi possono essere usati come operatori prefissi o postfissi.

- -

L'operatore + compie anche la concatenazione di stringhe:

- -
> "hello" + " world"
-hello world
-
- -

Se si somma una stringa ad un numero (o ad un altro valore) tutto viene convertito dalla prima stringa. Questo esempio potrebbe aiutare a chiarire il tutto:

- -
> "3" + 4 + 5
-345
-> 3 + 4 + "5"
-75
-
- -

Sommare una stringa vuota ad un altro tipo è un utile maniera per convertirlo.

- -

I confronti in JavaScript possono essere eseguiti usando <, >, <= e >=. Essi funzionano sia per le stringhe che per i numeri. L'uguaglianza è un pochino meno lineare. L'operatore di doppio uguale esegue la coercizione di tipo se viene eseguita tra tipi differenti, con a volte risultati interessanti:

- -
> "dog" == "dog"
-true
-> 1 == true
-true
-
- -

Per evitare la coercizione di tipo, si utilizza l'operatore triplo uguale:

- -
> 1 === true
-false
-> true === true
-true
-
- -

Vi sono anche gli operatori != e  !== .

- -

JavaScript ha inoltre le operazioni bit per bit. Se si desidera utilizzarle, sono lì.

- -

Strutture di controllo

- -

JavaScript ha una serie di strutture di controllo simili agli altri linguaggi della famiglia del C. Le istruzioni condizionali sono supportate da if e else (se e altrimenti) che possono essere concatenati insieme se desiderato:

- -
var name = "kittens";
-if (name == "puppies") {
-  name += "!";
-} else if (name == "kittens") {
-  name += "!!";
-} else {
-  name = "!" + name;
-}
-name == "kittens!!"
-
- -

JavaScript ha il ciclo while ed il ciclo do-while. Il primo è utile per un ciclo basico; il secondo per i cicli che si vuole essere sicuri che vengano eseguiti almeno una volta:

- -
while (true) {
-  // an infinite loop!
-}
-
-var input;
-do {
-  input = get_input();
-} while (inputIsNotValid(input))
-
- -

Il ciclo for in JavaScript è lo stesso che in C e Java: esso permette di fornire le informazioni di controllo per il ciclo in una linea singola.

- -
for (var i = 0; i < 5; i++) {
-  // Will execute 5 times
-}
-
- -

Gli operatori &&(and logico) e ||(or logico) usano un corto-circuito logico, questo significa che quando vengono eseguiti il secondo operando è dipendente dal primo. Questo è utile per verificare oggetti nulli prima di accedere ai loro attributi:

- -
var name = o && o.getName();
-
- -

Oppure per impostare valori di default:

- -
var name = otherName || "default";
-
- -

JavaScript ha un operatore ternario per espressioni condizionali:

- -
var allowed = (age > 18) ? "yes" : "no";
-
- -

L'istruzione switch può essere utilizzata per più diramazioni sulla base di un numero o una stringa:

- -
switch(action) {
-    case 'draw':
-        drawit();
-        break;
-    case 'eat':
-        eatit();
-        break;
-    default:
-        donothing();
-}
-
- -

Se non viene inserita l'istruzione break, l'esecuzione "naufragherà" nel prossimo livello. Questo è raramente il risultato voluto — in realtà vale la pena in particolare inserire un etichettatura deliberatamente con un commento, se vi vuole aiutare il debug:

- -
switch(a) {
-    case 1: // fallthrough
-    case 2:
-        eatit();
-        break;
-    default:
-        donothing();
-}
-
- -

La clausula default è opzionale. Si possono avere espressioni sia nello switch sia che nel case se si vuole; i confronti avvengono tra i due con l'operatore ===:

- -
switch(1 + 3) {
-    case 2 + 2:
-        yay();
-        break;
-    default:
-        neverhappens();
-}
-
- -

Oggetti

- -

Gli oggetti JavaScript sono semplicemente collezioni di coppie nome-valore. Come tali, essi sono simili a:

- -
    -
  • Dizionari in Python
    • -
  • Hashes in Perl e Ruby
    • -
  • Hash tables in C e C++
    • -
  • HashMaps in Java
    • -
  • Array associativi in PHP
    • -
- -

Il fatto che questa struttura dati è così diffusa è la prova della sua versatilità. Dal momento che tutto (barra i tipi base) in JavaScript è un oggetto, qualunque programma JavaScript implica naturalmente un grande ricorso alla ricerca nelle tabelle hash. E' buona cosa che siano così veloci!

- -

La parte "name" è una stringa JavaScript, mentre il valore può essere qualunque valore JavaScript — incluso più oggetti. Questo permette di costruire strutture dati di complessità arbitraria.

- -

Ci sono due modalità di base per creare un oggetto vuoto:

- -
var obj = new Object();
-
- -

E:

- -
var obj = {};
-
- -

Entrambe sono semanticamente equivalenti; la seconda è chiamata sintassi letterale dell'oggetto, ed è più conveniente. Questa sintassi è anche la base del formato JSON e dovrebbe essere preferita ogni volta.

- -

Una volta creato si può accedere alle proprietà di un oggetto in una o due modalità:

- -
obj.name = "Simon";
-var name = obj.name;
-
- -

E...

- -
obj["name"] = "Simon";
-var name = obj["name"];
-
- -

Anche queste sono semanticamente equivalenti. Il secondo metodo ha il vantaggio che il nome della proprietà viene fornito come stringa, che significa che può essere calcolato durante l'esecuzione e l'utilizzo di questo metodo evita che siano applicate ottimizzazioni del motore JavaScript e minifier. Può essere inoltre usato per impostare o ottenere proprietà con nomi che sono parole riservate:

- -
obj.for = "Simon"; // Syntax error, because 'for' is a reserved word
-obj["for"] = "Simon"; // works fine
-
- -

La sintassi dell'oggetto letterale può essere usata per inizializzare un oggetto nella sua interezza:

- -
var obj = {
-    name: "Carrot",
-    "for": "Max",
-    details: {
-        color: "orange",
-        size: 12
-    }
-}
-
- -

Attributi di accesso possono essere concatenati:

- -
> obj.details.color
-orange
-> obj["details"]["size"]
-12
-
- -

Array (matrici)

- -

Gli array in JavaScript sono un tipo speciale di oggetto. Essi funzionano in modo molto simile agli oggetti regolari (si può accedere alle proprietà numeriche solo usando la sintassi []) ma hanno una proprietà magica chiamata 'length'. Questa è sempre uno in più dell'indice massimo dell'array.

- -

Il vecchio metodo per creare un array è il seguente:

- -
> var a = new Array();
-> a[0] = "dog";
-> a[1] = "cat";
-> a[2] = "hen";
-> a.length
-3
-
- -

Una notazione più conveniente è l'utilizzo di una array letterale:

- -
> var a = ["dog", "cat", "hen"];
-> a.length
-3
-
- -

Lasciare una virgola finale al termine di un array letterale è incompatibile tra i browser, quindi non fatelo.

- -

Nota che array.length non è necessariamente il numero di elementi nell'array. Considera il seguente esempio:

- -
> var a = ["dog", "cat", "hen"];
-> a[100] = "fox";
-> a.length
-101
-
- -

Ricorda — la lunghezza dell'array è uno più dell'indice più alto.

- -

Se si interroga un indice dell'array inesistente, la risposta sarà undefined:

- -
> typeof a[90]
-undefined
-
- -

Se si prende in considerazione quanto sopra, è possibile scorrere un array utilizzando le istruzioni seguenti:

- -
for (var i = 0; i < a.length; i++) {
-    // Do something with a[i]
-}
-
- -

Questo è un po' inefficiente, poichè si ricerca la proprietà length una volta ogni ciclo. Un possibile miglioramento è questo:

- -
for (var i = 0, len = a.length; i < len; i++) {
-    // Do something with a[i]
-}
-
- -

Un modo ancora più simpatico è questo:

- -
for (var i = 0, item; item = a[i++];) {
-    // Do something with item
-}
-
- -

Qui si stanno impostando due variabili. L'assegnamento nella parte centrale del ciclo for è anche verificato per veridicità — se ha successo, il ciclo continua. Siccome i viene incrementato ogni volta, gli elementi dalla matrice saranno assegnati all'elemento in ordine sequenziale. Il ciclo termina quando viene trovato un elemento "falso" (come un undefined).

- -

Nota che questo trucco dovrebbe essere usato solo per gli array che sappiamo non contengano valori "falsi" (array di oggetti o nodi del DOM per esempio). Se si effettua l'iterazione dei dati numerici che potrebbero includere uno 0, o dati stringa che potrebbero includere la stringa vuota, è necessario utilizza l'idioma i, len in sostituzione.

- -

Un altro modo per iterare è di utilizzare il ciclo for...in. Nota che se vengono aggiunte nuove proprietà all' Array.prototype, saranno anch'esse iterate da questo ciclo:

- -
for (var i in a) {
-  // Do something with a[i]
-}
-
- -

Se si vuole accodare un elemento all'array, la maniera più sicura per farlo è questa:

- -
a[a.length] = item;                 // same as a.push(item);
-
- -

Poichè a.length è uno in più dell'indice più alto, si può essere sicuri che l'elemento sarà assegnato ad una posizione vuota alla fine dell'array.

- -

Gli arrays nascono con alcuni metodi:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Method nameDescription
a.toString()
a.toLocaleString()
a.concat(item[, itemN])Restituisce un nuovo array con gli elementi aggiunti ad esso.
a.join(sep)
a.pop()Rimuove e restituisce l'ultimo elemento.
a.push(item[, itemN])Push aggiunge uno o più elementi alla fine.
a.reverse()
a.shift()
a.slice(start, end)Restituisce un sub-array.
a.sort([cmpfn])Riceve una funzione di comparazione opzionale.
a.splice(start, delcount[, itemN])Permette di modificare un array cancellando una sezione e sostituendola con più elementi.
a.unshift([item])Antepone elementi all'inizio dell'array
- -

Funzioni

- -

Insieme con gli oggetti, le funzioni sono la componente principale nella comprensione di JavaScript. La funzione più elementare non potrebbe essere molto più semplice:

- -
function add(x, y) {
-    var total = x + y;
-    return total;
-}
-
- -

Ciò dimostra tutto quello che c'è da sapere sulle funzioni di base. Una funzione JavaScript può ricevere 0 (zero) o più parametri. Il corpo della funzione può contenere tutte le istruzioni che si desidera, e può dichiarare le proprie variabili che saranno locali alla stessa. L'istruzione return può essere usata per restituire un valore in qualsiasi momento, terminando la funzione. Se non viene utilizzata l'istruzione return (oppure viene restituito un valore vuoto o indefinito), JavaScript restituisce undefined.

- -

I parametri denominati risultano più simili alle linee guida di ogni altra cosa. È possibile chiamare una funzione senza passare i parametri che si aspetta, nel qual caso saranno impostati su undefined.

- -
> add()
-NaN // You can't perform addition on undefined
-
- -

È anche possibile passare più argomenti di quelli che la funzione si aspetta:

- -
> add(2, 3, 4)
-5 // added the first two; 4 was ignored
-
- -

Questo può sembrare un po' sciocco, ma le funzioni hanno accesso a una variabile aggiuntiva all'interno del loro corpo chiamata argomenti, che è un oggetto simil array che detiene tutti i valori passati alla funzione. Riscriviamo la funzione somma per ricevere tutti i valori che vogliamo:

- -
function add() {
-    var sum = 0;
-    for (var i = 0, j = arguments.length; i < j; i++) {
-        sum += arguments[i];
-    }
-    return sum;
-}
-
-> add(2, 3, 4, 5)
-14
-
- -

Questo, però, non è realmente più utile che scrivere 2 + 3 + 4 + 5. Creiamo una funzione per il calcolo della media:

- -
function avg() {
-    var sum = 0;
-    for (var i = 0, j = arguments.length; i < j; i++) {
-        sum += arguments[i];
-    }
-    return sum / arguments.length;
-}
-> avg(2, 3, 4, 5)
-3.5
-
- -

Questa è piuttosto utile, ma introduce un nuovo problema. La funzione avg() riceve una lista di argomenti separati da una virgola — ma cosa succede se si vuole trovare la media di un array? Si potrebbe semplicemente riscrivere la funzione come segue:

- -
function avgArray(arr) {
-    var sum = 0;
-    for (var i = 0, j = arr.length; i < j; i++) {
-        sum += arr[i];
-    }
-    return sum / arr.length;
-}
-> avgArray([2, 3, 4, 5])
-3.5
-
- -

Ma sarebbe bello essere in grado di riutilizzare la funzione che abbiamo già creato. Fortunatamente, JavaScript permette di chiamare una funzione e di chiamarla con un array arbitrario di argomenti, usando il metodo apply() di qualunque oggetto di funzione.

- -
> avg.apply(null, [2, 3, 4, 5])
-3.5 is the array to use as arguments; the first will be discussed later on. This emphasizes the fact that functions are objects too.
-
- -

JavaScript permette la creazione di funzioni anonime.

- -
var avg = function() {
-    var sum = 0;
-    for (var i = 0, j = arguments.length; i < j; i++) {
-        sum += arguments[i];
-    }
-    return sum / arguments.length;
-}
-
- -

Questa è semanticamente equivalente alla forma function avg(). Essa è estremamente potente, in quando consente di definire una funzione ovunque si possa normalmente inserire un espressione. Questo consente ogni sorta di trucco intelligente. Ecco un modo di "nascondere" alcune variabili locali - come in un ambito di blocco in C:

- -
> var a = 1;
-> var b = 2;
-> (function() {
-    var b = 3;
-    a += b;
-})();
-> a
-4
-> b
-2
-
- -

JavaScript consente di chiamare le funzioni in modo ricorsivo. Ciò è particolarmente utile per affrontare le strutture ad albero, come ad esempio nel DOM del browser.

- -
function countChars(elm) {
-    if (elm.nodeType == 3) { // TEXT_NODE
-        return elm.nodeValue.length;
-    }
-    var count = 0;
-    for (var i = 0, child; child = elm.childNodes[i]; i++) {
-        count += countChars(child);
-    }
-    return count;
-}
-
- -

Questo mette in evidenza un potenziale problema con le funzioni anonime: come fare a richiamarle ricorsivamente se non hanno un nome? La risposta si trova con l'oggetto arguments, che oltre ad agire come una lista di argomenti, fornisce anche una propietà chiamata arguments.callee. L'uso della arguments.callee è deprecato e anche disabilitato nel modo strict (rigoroso). In sostituzione si devono utilizzare le "funzioni anonime nominate" come di seguito:

- -
var charsInBody = (function counter(elm) {
-    if (elm.nodeType == 3) { // TEXT_NODE
-        return elm.nodeValue.length;
-    }
-    var count = 0;
-    for (var i = 0, child; child = elm.childNodes[i]; i++) {
-        count += counter(child);
-    }
-    return count;
-})(document.body);
-
- -

Il nome fornito a una funzione anonima come sopra è (o almeno dovrebbe essere) disponibile solo nell'ambito stesso della funzione. Questo consente sia più ottimizzazioni da svolgere da parte del motore sia un codice più leggibile.

- -

Oggetti personalizzati

- -
Nota: Per una discussione più dettagliata della programmazione orientata agli oggetti, vedi Introduzione a JavaScript Orientato agli Oggetti.
- -

Nella programmazione Object Oriented classica, gli oggetti sono collezioni di dati e metodi che operano su quei dati. JavaScript è un linguaggio basato su prototipi e non contiene l'istruzione classe, così come si trova in C++ o Java. (Questo a volte è fonte di confusione per i programmatori abituati ai linguaggi con una dichiarazione di classe.) Al suo posto, JavaScript usa le funzioni come classi. Consideriamo un oggetto persona con i campi nome e cognome. Ci sono due modi di visualizzare il nominativo: come  "nome cognome" o come "cognome, nome". Usando le funzioni e gli oggetti che abbiamo visto in precedenza, ecco un modo di ottenere il risultato voluto:

- -
function makePerson(first, last) {
-    return {
-        first: first,
-        last: last
-    }
-}
-function personFullName(person) {
-    return person.first + ' ' + person.last;
-}
-function personFullNameReversed(person) {
-    return person.last + ', ' + person.first
-}
-> s = makePerson("Simon", "Willison");
-> personFullName(s)
-Simon Willison
-> personFullNameReversed(s)
-Willison, Simon
-
- -

Questo funziona, ma è piuttosto brutto. Si finisce con dozzine di funzioni nel namespace globale. Ciò di cui abbiamo veramente bisogno è un modo per associare una funzione ad un oggetto. Dal momento che le funzioni sono oggetti, questo è facile:

- -
function makePerson(first, last) {
-    return {
-        first: first,
-        last: last,
-        fullName: function() {
-            return this.first + ' ' + this.last;
-        },
-        fullNameReversed: function() {
-            return this.last + ', ' + this.first;
-        }
-    }
-}
-> s = makePerson("Simon", "Willison")
-> s.fullName()
-Simon Willison
-> s.fullNameReversed()
-Willison, Simon
-
- -

Vi è qualcosa che non abbiamo visto prima: la parola chiave 'this'. Usata dentro una funzione, 'this' si riferisce all'oggetto corrente. Che cosa significa in realtà è specificato dal modo in cui è stata chiamata tale funzione. Se è stata chiamata usando la notazione col punto o la notazione con le parentesi su un oggetto, questo oggetto diventa 'this'. Se la notazione col punto non è stata usata per la chiamata, 'this' si riferisce all'oggetto globale. Questa è una causa di errori frequente. Ad esempio:

- -
> s = makePerson("Simon", "Willison")
-> var fullName = s.fullName;
-> fullName()
-undefined undefined
-
- -

Quando chiamiamo fullName(), 'this' è legata all'oggetto globale. Dato che non ci sono variabili globali chiamate first o last riceviamo undefined per ognuna delle due.

- -

Possiamo prendere il vantaggio della parola chiave 'this' per migliorare la nostra funzione makePerson:

- -
function Person(first, last) {
-    this.first = first;
-    this.last = last;
-    this.fullName = function() {
-        return this.first + ' ' + this.last;
-    }
-    this.fullNameReversed = function() {
-        return this.last + ', ' + this.first;
-    }
-}
-var s = new Person("Simon", "Willison");
-
- -

Abbiamo introdotto un'altra parola chiave: 'new'. new è fortemente correlata a 'this'. Quello che fa è creare un oggetto vuoto nuovo di zecca e quindi chiamare la funzione specificata, con 'this' impostato sul nuovo oggetto. Le funzioni che sono disegnate per essere richiamate dalla 'new' sono chiamate costruttori. La pratica comune è di nominare queste funzioni con la prima lettera maiuscola in modo da ricordarsi di chiamarle con il new.

- -

I nostri oggetti persona stanno migliorando, ma vi sono ancora alcuni lati brutti in loro. Ogni volta che si crea un oggetto persona, stiamo creando due nuovi oggetti funzione all'interno di esso - non sarebbe meglio se il codice fosse stato condiviso?

- -
function personFullName() {
-    return this.first + ' ' + this.last;
-}
-function personFullNameReversed() {
-    return this.last + ', ' + this.first;
-}
-function Person(first, last) {
-    this.first = first;
-    this.last = last;
-    this.fullName = personFullName;
-    this.fullNameReversed = personFullNameReversed;
-}
-
- -

Così va meglio: stiamo creando i metodi della funzione una sola volta, e assegnando ad essi i riferimenti all'interno del costruttore. Possiamo fare di meglio? La risposta è sì:

- -
function Person(first, last) {
-    this.first = first;
-    this.last = last;
-}
-Person.prototype.fullName = function() {
-    return this.first + ' ' + this.last;
-}
-Person.prototype.fullNameReversed = function() {
-    return this.last + ', ' + this.first;
-}
-
- -

Person.prototype è un oggetto condiviso da tutte le istanze di Person. Essa fa parte di una catena di ricerca (che ha un nome speciale, "catena di prototipi"): ogni volta che si tenta di accedere ad una proprietà di Person che non è impostata, JavaScript controllerà Person.prototype per vedere se quella proprietà esiste al suo interno. Come risultato, qualsiasi valore assegnato a Person.prototype diventa disponibile a tutte le istanze del costruttore per mezzo dell'oggetto this.

- -

Si tratta di uno strumento incredibilmente potente. JavaScript consente di modificare il prototipo di qualcosa in qualsiasi momento nel programma, il che significa che è possibile aggiungere metodi extra per gli oggetti esistenti in fase di esecuzione:

- -
> s = new Person("Simon", "Willison");
-> s.firstNameCaps();
-TypeError on line 1: s.firstNameCaps is not a function
-> Person.prototype.firstNameCaps = function() {
-    return this.first.toUpperCase()
-}
-> s.firstNameCaps()
-SIMON
-
- -

È interessante notare che è anche possibile aggiungere le cose al prototipo degli oggetti nativi JavaScript. Aggiungiamo un metodo a String che restituisca la stringa al contrario:

- -
> var s = "Simon";
-> s.reversed()
-TypeError on line 1: s.reversed is not a function
-> String.prototype.reversed = function() {
-    var r = "";
-    for (var i = this.length - 1; i >= 0; i--) {
-        r += this[i];
-    }
-    return r;
-}
-> s.reversed()
-nomiS
-
- -

Il nostro nuovo metodo funziona anche con le stringhe letterali!

- -
> "This can now be reversed".reversed()
-desrever eb won nac sihT
-
- -

Come detto prima, il prototipo fa parte di una catena. La radice di questa catena è Object.prototype, i cui metodi includono toString() — è questo metodo che viene chiamato quando si tenta di rappresentare un oggetto come una stringa. Questo è utile per verificare il nostro oggetto Person:

- -
> var s = new Person("Simon", "Willison");
-> s
-[object Object]
-> Person.prototype.toString = function() {
-    return '<Person: ' + this.fullName() + '>';
-}
-> s
-<Person: Simon Willison>
-
- -

Ricordate come avg.apply() aveva un primo argomento nullo? Possiamo riesaminarlo adesso. Il primo argomento di apply() è l'oggetto che dovrebbe essere trattato come 'this'. Per esempio, qui una semplice implementazione di 'new':

- -
function trivialNew(constructor) {
-    var o = {}; // Create an object
-    constructor.apply(o, arguments);
-    return o;
-}
-
- -

Questa non è un'esatta replica di new in quanto non imposta la catena del prototipo (sarebbe difficile da illustrare). Non è una cosa che si usa molto spesso, ma è utile conoscerla. In questo snippet, ...args (puntini inclusi) è chiamato il "rest arguments" – come indicato dal nome, e contiene il resto degli argomenti. Per ora, questa "feature" è sperimentale e solo disponibile in Firefox; è raccomandato attaccare gli arguments per ora.

- -

Chiamare

- -
var bill = trivialNew(Person, "William", "Orange");
- -
- -

è dunque quasi equivalente a

- -
var bill = new Person("William", "Orange");
- -
- -

apply() ha una funzione sorella dal nome call, che di nuovo ti consente di impostare 'this' ma prende una lista espansa di argomenti invece che un array.

- -
function lastNameCaps() {
-    return this.last.toUpperCase();
-}
-var s = new Person("Simon", "Willison");
-lastNameCaps.call(s);
-// Is the same as:
-s.lastNameCaps = lastNameCaps;
-s.lastNameCaps();
-
- -

Inner functions

- -

In JavaScript è consentito dichiarare una funzione all'interno di un'altra funzione. Lo abbiamo già visto prima, nel caso della precedente funzione makePerson(). Un dettaglio importante di funzioni innestate in JavaScript è che esse possono accedere alle variabili della funzione di livello superiore:

- -
function betterExampleNeeded() {
-    var a = 1;
-    function oneMoreThanA() {
-        return a + 1;
-    }
-    return oneMoreThanA();
-}
-
- -

Ciò è di grande utilità per scrivere codice più manutenibile. Se una funzione dipende da una o due altre funzioni che non sono usate in nessuna altra parte del tuo codice, è possibile nidificare quelle funzioni di utilità dentro la funzione che sarà chiamata dall'esterno. Questo riduce il numero di funzioni che si trovano nel "global scope", che è sempre una buona cosa.

- -

Questa è anche una grande cosa contro il richiamo di variabili globali. Quando si scrive codice complesso si è spesso tentati di usare variabili globali per condividere i valori tra più funzioni — e ciò rende il codice difficile da manutenere. Le funzioni nidificate possono condividere le variabili della funzione padre, così è possibile usare questo meccanismo per accoppiare le funzioni quando serve, senza contaminare il tuo namespace globale — rendi locali le variabili globali per piacere. Questa tecnica dovrebbe essere usata con parsimonia, ma è una capacità utile da avere.

- -

Closures

- -

Questo ci porta ad una delle più potenti astrazioni che JavaScript ha da offrire — ma anche quella che può generare più confusione. Cosa fa questo codice sotto?

- -
function makeAdder(a) {
-    return function(b) {
-        return a + b;
-    }
-}
-x = makeAdder(5);
-y = makeAdder(20);
-x(6)
-?
-y(7)
-?
-
- -

Il nome della funzione makeAdder dovrebbe essere esplicito: essa può creare delle nuove funzioni 'adder', che, se chiamate con un determinato argomento, lo addizionano all'argomento con il quale sono state create.

- -

Quello che sta avvenendo qui è praticamente la stessa cosa vista precedentemente con le "inner functions": una funzione definita dentro un'altra funzione ha accesso alle variabili della funzione esterna. La sola differenza è che in questo caso la funzione esterna ha già restituito il suo risultato, e quindi il senso comune sembrerebbe indicare che le sue variabili locali non siano più disponibili. Ma esse esistono ancora — altrimenti le funzioni "adder" non sarebbero capaci di lavorare. Quello che c'è di più è che ci sono due "copie" differenti delle variabili locali di makeAdder — una nella quale a è 5 e una nella quale a è 20. Così il risultato di quelle chiamate di funzione è il seguente:

- -
x(6) // returns 11
-y(7) // returns 27
-
- -

Ecco cosa sta effettivamente avvenendo. Quando JavaScript esegue una funzione, viene creato un oggetto con il proprio ambito di visibilità ('scope object') per trattenere le variabili locali di quella funzione. Esso è inizializzato con tutte le variabili passate in ingresso alla funzione come parametri. Ciò è simile all'oggetto globale in cui si trovano tutte le variabili globali e le funzioni, ma con una paio di differenze importanti: primo, un nuovo 'scope object' etichettato è creato ogni volta che una funzione inizia l'esecuzione, e secondo, a differenza dell'oggetto globale (che nei bowser è accessibile come 'window') non si può accedere direttamente a questi 'scope object' dal tuo codice JavaScript. Ad esempio non c'è nessun meccanismo per iterare sulle proprietà dello 'scope object' corrente.

- -

Quindi, quando makeAdder è chiamato viene creato un oggetto scope con una proprietà: a, che è l'argomento passato alla funzione makeAdder . A questo punto makeAdder restituisce quindi una funzione appena creata. Normalmente il raccoglitore di rifiuti  di JavaScript eliminerebbe l'oggetto scope creato per makeAdder , ma la funzione restituita mantiene un riferimento a tale oggetto scope. Di conseguenza l'oggetto scope non verrà eliminato finchè non ci saranno più riferimenti all'oggetto che la funzione makeAdder restituisce.

- -

Gli oggetti scope formano una catena chiamata 'scope chain', simile alla catena di prototipi, 'prototype chain', del sistema a oggetti di JavaScript.

- -

Una closure è la combinazione di una funzione e dell'oggetto scope in cui è stata creata.

- -

Le closures ti consentono di salvare lo stato e in quanto tali, possono spesso essere utilizzate al posto degli oggetti. Puoi trovare alcune eccellenti introduzioni alle closures (in lingua inglese).

- -

Memory leaks

- -
 Uno sfortunato effetto collaterale delle chiusure è il rendere facile perdere memoria
- su Internet Explorer. JavaScript alloca gli oggetti nella memoria al momento della loro
- creazione e tale memoria viene recuperata dal browser quando non rimangono riferimenti a un
- oggetto.
- Gli oggetti forniti dall'host vengono gestiti da quell'ambiente.
-
- Gli host del browser devono gestire un gran numero di oggetti che rappresentano
- la pagina HTML presentata: gli oggetti del DOM. Spetta al browser gestire l'assegnazione e
- il recupero di questi.
-
- Internet Explorer utilizza il proprio schema di raccolta dei rifiuti per questo,
- separato dal meccanismo utilizzato da JavaScript.
- È l'interazione tra i due che può causare perdite di memoria.
-
-Una perdita di memoria in IE si verifica ogni volta che viene formato un riferimento circolare
-tra un oggetto JavaScript e un oggetto nativo. Considera quanto segue:
- -
function leakMemory() {
-    var el = document.getElementById('el');
-    var o = { 'el': el };
-    el.o = o;
-}
-
- -

Il riferimento circolare formato sopra crea una perdita di memoria;

- -

IE non libererà la memoria utilizzata da el fino al completo riavvio del browser. Il caso di cui sopra rischia di passare inosservato; le perdite di memoria diventano un problema reale solo nelle applicazioni a esecuzione prolungata o nelle applicazioni che perdono grandi quantità di memoria a causa di grandi strutture di dati o schemi di perdite all'interno dei loop. Le perdite sono raramente così ovvie: spesso la struttura dei dati trapelati può avere molti livelli di riferimenti, oscurando il riferimento circolare. Le chiusure rendono facile creare una perdita di memoria senza volerlo. Considera questo:

- -
function addHandler() {
-    var el = document.getElementById('el');
-    el.onclick = function() {
-        this.style.backgroundColor = 'red';
-    }
-}
-
- -

Il codice precedente imposta l'elemento in modo che diventi rosso quando viene cliccato. Crea anche una perdita di memoria. Perché? Perché il riferimento a el è inavvertitamente catturato nella chiusura creata per la funzione interna anonima. Questo crea un riferimento circolare tra un oggetto JavaScript (la funzione) e un oggetto nativo (el).

- -
needsTechnicalReview();
-
- -

Esistono numerose soluzioni per questo problema. Il più semplice è non usare la variabile el:

- -
function addHandler(){
-    document.getElementById('el').onclick = function(){
-        this.style.backgroundColor = 'red';
-    }
-}
-
- -

Sorprendentemente, un trucco per rompere i riferimenti circolari introdotti da una chiusura è aggiungere un'altra chiusura:

- -
function addHandler() {
-    var clickHandler = function() {
-        this.style.backgroundColor = 'red';
-    };
-    (function() {
-        var el = document.getElementById('el');
-        el.onclick = clickHandler;
-    })();
-}
-
- -

La funzione interna viene eseguita immediatamente, e nasconde il suo contenuto dalla chiusura creata con clickHandler. Un altro buon trucco per evitare le chiusure è rompere i riferimenti circolari durante l'evento window.onunload. Molte librerie di eventi lo faranno per te. Nota che così facendo si disabilita bfcache in Firefox 1.5, quindi non dovresti registrare un listener di scaricamento in Firefox, a meno che tu non abbia altri motivi per farlo.

- -
-

Original Document Information

- -
    -
  • Author: Simon Willison
    • -
  • Last Updated Date: March 7, 2006
    • -
  • Copyright: © 2006 Simon Willison, contributed under the Creative Commons: Attribute-Sharealike 2.0 license.
    • -
  • More information: For more information about this tutorial (and for links to the original talk's slides), see Simon's Etech weblog post.
    • -
-
diff --git a/files/it/web/opensearch/index.html b/files/it/web/opensearch/index.html new file mode 100644 index 0000000000..87aa850da0 --- /dev/null +++ b/files/it/web/opensearch/index.html @@ -0,0 +1,34 @@ +--- +title: Installare plugin di ricerca dalle pagine web +slug: Installare_plugin_di_ricerca_dalle_pagine_web +tags: + - Plugin_di_ricerca +translation_of: Web/OpenSearch +translation_of_original: Web/API/Window/sidebar/Adding_search_engines_from_Web_pages +--- +

Firefox permette di installare dei plugin di ricerca tramite JavaScript e supporta tre formati per questi plugin: MozSearch, OpenSearch e Sherlock. +

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

+

Installare plugin in MozSearch o OpenSearch

+

Per installare plugin in MozSearch o OpenSearch, occorre il metodo DOM window.external.AddSearchProvider(). La sintassi è la seguente: +

+
window.external.AddSearchProvider(URL_del_plugin);
+
+

URL_del_plugin è l'URL del file XML o del plugin. +

+
Nota: il supporto per MozSearch e OpenSearch è disponibile solo in Firefox 2 e successivi.
+

Per ulteriori dettagli su MozSearch, vedi Creating MozSearch plugins. +

+

Installare plugin in Sherlock

+

Per installare un plugin in Sherlock, occorre chiamare window.sidebar.addSearchEngine(), la cui sintassi è la seguente: +

+
window.sidebar.addSearchEngine(URL_del_plugin, icona_del_plugin, nome_suggerito, categoria_suggerita);
+
+
  • Il parametro URL_del_plugin è l'URL del plugin da installare (un file ".src"). +
  • iconURL is the URL to an icon to associate with the plugin. +
  • Il parametro nome_suggerito viene utilizzato solo quando il browser chiede all'utente il permesso di installare il plugin, con un messaggio del tipo "Si desidera installare nome_suggerito da URL_del_plugin?". +
  • Il parametro suggestedCategory non viene usato. Si dovrebbe inserire una stringa vuota ("") o null. +
+

Per ulteriori informazioni su Sherlock: +http://developer.apple.com/macosx/sherlock/ +

{{ languages( { "en": "en/Adding_search_engines_from_web_pages", "ja": "ja/Adding_search_engines_from_web_pages" } ) }} diff --git a/files/it/web/performance/critical_rendering_path/index.html b/files/it/web/performance/critical_rendering_path/index.html new file mode 100644 index 0000000000..31c0b82ac8 --- /dev/null +++ b/files/it/web/performance/critical_rendering_path/index.html @@ -0,0 +1,62 @@ +--- +title: Percorso critico di rendering +slug: Web/Performance/Percorso_critico_di_rendering +translation_of: Web/Performance/Critical_rendering_path +--- +

{{draft}}

+ +

Il Percorso Critico di Rendering (in inglese: Critical Rendering Path, CRP) è la sequenza di passi che il browser compie per convertire HTML, CSS e Javascript in pixel sullo schermo. Ottimizzare il CRP migliora la performance. Il percorso include ilDocument Object Model (DOM), il CSS Object Model (CSSOM), l'albero di rendering e il layout.

+ +

Il DOM è creato man mano che l'HTML viene parsificato. L'HTML può richiedere Javascript, il quale potrebbe a sua volte alterare il DOM. L'HTML include o richiede fogli di stile, la cui parsificazione costruisce il CSSOM. Il motore del browser combina il DOM e il CSSOM per costruire l'albero di rendering. La fase di layout determina le dimensioni e posizione di ogni elemento della pagine. Infine, i pixel sono dipinti sullo schermo.

+ +

Ottimizzare il CRP migliora il tempo che il browser impiega ad effettuare il primo render. Capire e ottimizzare il percorso critico di rendering è importante per assicurarsi che i reflow e repaint vengano effettuato a 60 frame al secondo, risultando in una migliore esperienza per l'utente.

+ +

Capire il CRP

+ +

La performance di un sito web dipende dal tempo impiegato per effettuare richieste al server, risposte, caricare risorse, eseguire script, rendering, layout, e dipingere i pixel sullo schermo.

+ +

Una richiesta per una pagina web o una web app inizia con una richiesta HTML. Il server risponde alla richiesta con il codice sorgente in linguaggio HTML. A questo punto, il browser inizia a parsificare l'HTML, costrudendo l'albero DOM.

+ +

Il browser manda ulteriori richieste ogni volta che trova link a risorse esterne, che siano fogli di stile, script, o referenze a immagini. Alcune richieste sono bloccanti, il che significa che la parsificazione del resto dell'HTML viene interrotta fino a quando la risorsa importata non viene scaricata e manipolata. In seguito, il browser continua a parsificare l'HTML fino ad arrivare alla fine del file. A questo punto, il browser comincia a costruire il CSSOM. Quando il DOM e il CSSOM sono completi, il browser costruisce l'albero di rendering, calcolando gli stili per tutto il contenuto visibile. Quando l'albero è completo, viene calcolato il layout, che definisce le dimensioni e posizione di tutti gli elementi dell'albero di rendering. Una volta completato, la pagina viene "dipinta" sullo schermo.

+ +

Document Object Model

+ +

La costruzione del DOM è incrementale. La risposta HTML si transforma in token, la quale si trasforma in nodi che costituiscono l'albero DOM. Un singolo nodo DOM comincia con un token startTag e finisce con un token endTag. I nodi contengono tutte le informazioni rilevanti sull'elemento HTML, descritta attraversi i token. I nodi sono connessi in un albero DOM in base alla gerarchia dei token. Per esempio, se un paio di token startTag ed endTag appaiono nel mezzo di un altro paio, questo genera un nodo padre ed un nodo figlio.

+ +

Un grande numero di nodi può dunque impattare la performance, complicando il critical rendering path.

+ +

CSS Object Model

+ +

Il DOM contiene l'intero contenuto della pagina. il CSSOM contiene tutti gli stili. La costruzione del DOM è incrementale, ma quella del CSSOM non lo è. Il CSS è render-blocking: il browser blocca il rendering di una pagina finché non riceve e processa tutto il CSS. Questo perché le regole possono essere sovrascritte, quindi il contenuto non può essere mostrato fino a quando il CSS non è completo. 

+ +

Il CSS ha le proprie regole per identificare token validi. Quando il parser converte i token in nodi, i nodi discendenti ereditano regole dai genitori. Il CSSOM viene costruito mentre il CSS viene parsificato, ma non può essere usato per costruire il render tree fino a quando la parsificazione viene completata perché stili che vengono sovrascritti in seguito non devono essere visualizzati.

+ +

Selettori meno specifici sono più performanti. Per esempio, .foo {} è più veloce di .bar .foo {} perché quando il browser trova .foo, nel secondo scenario, deve salire nel DOM per controllare se .foo ha un genitore .bar.

+ +

I browser processano il CSS molto rapidamente. La regola specifica è più lenta perché deve attraversare più nodi nell'albero DOM, ma questo costo aggiuntivo è solitamente minimo. L'ottimizzazione dei selettori CSS solitamente porta a velocizzazioni nell'ordine dei microsecondi. Ci sono altri modi più efficaci per ottimizzare il CSS, come la mininizzazione, e separare il CSS in richieste non-blocking usando media queries.

+ +

L'albero di rendering

+ +

L'albero di rendering cattura sia il contenuto che gli stili combinando il DOM ed il CSSOM. Per costruirlo, il browser controlla ogni nodo, a partire dalla radice dell'albero DOM, e determina quali regole CSS sono applicate al nodo.

+ +

L'albero di rendering mantiene informazioni solo su elementi visibili. La sezione head solitamente non contiene informazioni visibili, e quindi non è inclusa. Se display: none; è settato su un elemento, né questo elemento né i suoi discendenti sono inclusi.

+ +

Layout

+ +

Quando l'albero di rendering è completamente costruito, il layout diventa possibile. Il layout dipende dalle dimensioni dello schermo e determina dove e come gli elementi sono posizionati nella pagina, inclusi largezza ed altezza di ogni elemento, e dove sono posizionati rispetto ad altri elementi.

+ +

Elementi block-level hanno una largezza in default di 100% del genitore. L'elemento body ha una larghezza dal 100% del viewport.

+ +

Il meta tag "viewport" definisce la larghezza del viewport. In assenza di questo tag, il browser usa la larghezza viewport di default, che su browser a tutto schermo è solitamente 960px. Su browser a tutto schermo, come il browser degli smartphone, il settaggio <meta name="viewport" content="width=device-width"> fa in modo che la larghezza sarà quella del dispositivo invece di quella di default. La device-width cambia quando l'utente ruota il telefono tra modalità landscape e ritratto. Il layout viene calcolato ogni volta che un dispositivo viene ruotato o il browser viene in qualche modo ridimensionato.

+ +

La performance della fase di layout è impattato dal numero di nodi nel DOM. La fase di layout può diventare un collo di bottiglia se richiesto durante lo scorrimento del mouse o altre animazioni. Un ritardo di 20ms al caricamento della pagina o al cambiamento di orientamento è accettabile, ma potrebbe portare a problemi se avviene durante lo scorrimento del mouse o durante animazioni. Ogni volta che l'albero di rendering è modificato, il passo di layout viene eseguito.

+ +

Per ridurre la frequenza e durate degli eventi di layout, è consigliabile effettuare un batch degli aggiornamenti ed evitare di animare proprietà del box model.

+ +

Paint

+ +

L'ultimo passo è mostrare i pixel sullo schermo. Questo può avvenire quando l'albero di rendering è creato e il layout calcolato. L'intero schermo è dipinto quando la pagina viene caricata. Successivamente, solo le parti dello schermo interessate verranno ridipinte grazie alle ottimizzazioni dei browser moderni. Il tempo necessario a un repaint è solitamente molto veloce, ma è importante ricordarsi di conteggiare il tempo di layout e ripittura quando si misura il tempo richiesto da un animation frame.

+ +

Optimizing for CRP

+ +

Improve page load speed by prioritizing which resources get loaded, controlling the order in which they area loaded, and reducing the file sizes of those resources. Performance tips include 1) minimizing the number of critical resources by deferring their download, marking them as async, or eliminating them altogether, 2) optimizing the number of requests required along with the file size of each request, and 3) optimizing the order in which critical resources are loaded by prioritizing the downloading critical assets, shorten the critical path length.

diff --git a/files/it/web/performance/percorso_critico_di_rendering/index.html b/files/it/web/performance/percorso_critico_di_rendering/index.html deleted file mode 100644 index 31c0b82ac8..0000000000 --- a/files/it/web/performance/percorso_critico_di_rendering/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: Percorso critico di rendering -slug: Web/Performance/Percorso_critico_di_rendering -translation_of: Web/Performance/Critical_rendering_path ---- -

{{draft}}

- -

Il Percorso Critico di Rendering (in inglese: Critical Rendering Path, CRP) è la sequenza di passi che il browser compie per convertire HTML, CSS e Javascript in pixel sullo schermo. Ottimizzare il CRP migliora la performance. Il percorso include ilDocument Object Model (DOM), il CSS Object Model (CSSOM), l'albero di rendering e il layout.

- -

Il DOM è creato man mano che l'HTML viene parsificato. L'HTML può richiedere Javascript, il quale potrebbe a sua volte alterare il DOM. L'HTML include o richiede fogli di stile, la cui parsificazione costruisce il CSSOM. Il motore del browser combina il DOM e il CSSOM per costruire l'albero di rendering. La fase di layout determina le dimensioni e posizione di ogni elemento della pagine. Infine, i pixel sono dipinti sullo schermo.

- -

Ottimizzare il CRP migliora il tempo che il browser impiega ad effettuare il primo render. Capire e ottimizzare il percorso critico di rendering è importante per assicurarsi che i reflow e repaint vengano effettuato a 60 frame al secondo, risultando in una migliore esperienza per l'utente.

- -

Capire il CRP

- -

La performance di un sito web dipende dal tempo impiegato per effettuare richieste al server, risposte, caricare risorse, eseguire script, rendering, layout, e dipingere i pixel sullo schermo.

- -

Una richiesta per una pagina web o una web app inizia con una richiesta HTML. Il server risponde alla richiesta con il codice sorgente in linguaggio HTML. A questo punto, il browser inizia a parsificare l'HTML, costrudendo l'albero DOM.

- -

Il browser manda ulteriori richieste ogni volta che trova link a risorse esterne, che siano fogli di stile, script, o referenze a immagini. Alcune richieste sono bloccanti, il che significa che la parsificazione del resto dell'HTML viene interrotta fino a quando la risorsa importata non viene scaricata e manipolata. In seguito, il browser continua a parsificare l'HTML fino ad arrivare alla fine del file. A questo punto, il browser comincia a costruire il CSSOM. Quando il DOM e il CSSOM sono completi, il browser costruisce l'albero di rendering, calcolando gli stili per tutto il contenuto visibile. Quando l'albero è completo, viene calcolato il layout, che definisce le dimensioni e posizione di tutti gli elementi dell'albero di rendering. Una volta completato, la pagina viene "dipinta" sullo schermo.

- -

Document Object Model

- -

La costruzione del DOM è incrementale. La risposta HTML si transforma in token, la quale si trasforma in nodi che costituiscono l'albero DOM. Un singolo nodo DOM comincia con un token startTag e finisce con un token endTag. I nodi contengono tutte le informazioni rilevanti sull'elemento HTML, descritta attraversi i token. I nodi sono connessi in un albero DOM in base alla gerarchia dei token. Per esempio, se un paio di token startTag ed endTag appaiono nel mezzo di un altro paio, questo genera un nodo padre ed un nodo figlio.

- -

Un grande numero di nodi può dunque impattare la performance, complicando il critical rendering path.

- -

CSS Object Model

- -

Il DOM contiene l'intero contenuto della pagina. il CSSOM contiene tutti gli stili. La costruzione del DOM è incrementale, ma quella del CSSOM non lo è. Il CSS è render-blocking: il browser blocca il rendering di una pagina finché non riceve e processa tutto il CSS. Questo perché le regole possono essere sovrascritte, quindi il contenuto non può essere mostrato fino a quando il CSS non è completo. 

- -

Il CSS ha le proprie regole per identificare token validi. Quando il parser converte i token in nodi, i nodi discendenti ereditano regole dai genitori. Il CSSOM viene costruito mentre il CSS viene parsificato, ma non può essere usato per costruire il render tree fino a quando la parsificazione viene completata perché stili che vengono sovrascritti in seguito non devono essere visualizzati.

- -

Selettori meno specifici sono più performanti. Per esempio, .foo {} è più veloce di .bar .foo {} perché quando il browser trova .foo, nel secondo scenario, deve salire nel DOM per controllare se .foo ha un genitore .bar.

- -

I browser processano il CSS molto rapidamente. La regola specifica è più lenta perché deve attraversare più nodi nell'albero DOM, ma questo costo aggiuntivo è solitamente minimo. L'ottimizzazione dei selettori CSS solitamente porta a velocizzazioni nell'ordine dei microsecondi. Ci sono altri modi più efficaci per ottimizzare il CSS, come la mininizzazione, e separare il CSS in richieste non-blocking usando media queries.

- -

L'albero di rendering

- -

L'albero di rendering cattura sia il contenuto che gli stili combinando il DOM ed il CSSOM. Per costruirlo, il browser controlla ogni nodo, a partire dalla radice dell'albero DOM, e determina quali regole CSS sono applicate al nodo.

- -

L'albero di rendering mantiene informazioni solo su elementi visibili. La sezione head solitamente non contiene informazioni visibili, e quindi non è inclusa. Se display: none; è settato su un elemento, né questo elemento né i suoi discendenti sono inclusi.

- -

Layout

- -

Quando l'albero di rendering è completamente costruito, il layout diventa possibile. Il layout dipende dalle dimensioni dello schermo e determina dove e come gli elementi sono posizionati nella pagina, inclusi largezza ed altezza di ogni elemento, e dove sono posizionati rispetto ad altri elementi.

- -

Elementi block-level hanno una largezza in default di 100% del genitore. L'elemento body ha una larghezza dal 100% del viewport.

- -

Il meta tag "viewport" definisce la larghezza del viewport. In assenza di questo tag, il browser usa la larghezza viewport di default, che su browser a tutto schermo è solitamente 960px. Su browser a tutto schermo, come il browser degli smartphone, il settaggio <meta name="viewport" content="width=device-width"> fa in modo che la larghezza sarà quella del dispositivo invece di quella di default. La device-width cambia quando l'utente ruota il telefono tra modalità landscape e ritratto. Il layout viene calcolato ogni volta che un dispositivo viene ruotato o il browser viene in qualche modo ridimensionato.

- -

La performance della fase di layout è impattato dal numero di nodi nel DOM. La fase di layout può diventare un collo di bottiglia se richiesto durante lo scorrimento del mouse o altre animazioni. Un ritardo di 20ms al caricamento della pagina o al cambiamento di orientamento è accettabile, ma potrebbe portare a problemi se avviene durante lo scorrimento del mouse o durante animazioni. Ogni volta che l'albero di rendering è modificato, il passo di layout viene eseguito.

- -

Per ridurre la frequenza e durate degli eventi di layout, è consigliabile effettuare un batch degli aggiornamenti ed evitare di animare proprietà del box model.

- -

Paint

- -

L'ultimo passo è mostrare i pixel sullo schermo. Questo può avvenire quando l'albero di rendering è creato e il layout calcolato. L'intero schermo è dipinto quando la pagina viene caricata. Successivamente, solo le parti dello schermo interessate verranno ridipinte grazie alle ottimizzazioni dei browser moderni. Il tempo necessario a un repaint è solitamente molto veloce, ma è importante ricordarsi di conteggiare il tempo di layout e ripittura quando si misura il tempo richiesto da un animation frame.

- -

Optimizing for CRP

- -

Improve page load speed by prioritizing which resources get loaded, controlling the order in which they area loaded, and reducing the file sizes of those resources. Performance tips include 1) minimizing the number of critical resources by deferring their download, marking them as async, or eliminating them altogether, 2) optimizing the number of requests required along with the file size of each request, and 3) optimizing the order in which critical resources are loaded by prioritizing the downloading critical assets, shorten the critical path length.

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..d7c931fec6 --- /dev/null +++ b/files/it/web/progressive_web_apps/index.html @@ -0,0 +1,50 @@ +--- +title: Design Sensibile +slug: Web_Development/Mobile/Design_sensibile +translation_of: Web/Progressive_web_apps +translation_of_original: Web/Guide/Responsive_design +--- +

Come risposta ai problemi associati all'approccio per siti separati nel campo del Web design per mobile e desktop, un'idea relativamente nuova (che è abbastanza datata) 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 List Apart, è oggi conosciuto come Web Design Sensibile. Come l'approccio a siti separati, il Web Design sensibile possiede aspetti positivi e negativi.

+

Aspetti Positivi

+

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.

+
    +
  1. Fa risparmiare tempo e denaro dato che non vi è la necessità di mantenere più siti separati per diversi dispositivi.
    2. +
  2. Il Design Sensibile fornisce ogni pagina con un singolo e unico URL.
    3. +
  3. 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.
    4. +
  4. Il Design Sensibile non si cura degli user agent.
    5. +
+

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.

+

Aspetti Negativi

+

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.

+

Dando al vostro sito un design sensibile implica anche il riscrivere gli stili se non avete realizzato già un layout flessibile. 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.

+

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.

+

Quando è bene scegliere questa opzione

+

teixido_responsive-300x177.pngCome 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!

+

Esempi

+

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:

+ +

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 creare un design per piccoli schermi 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 qui.

+

Approcci per lo sviluppo Web per il mobile

+

Date un'occhiata agli articoli seguenti per un background e altri approcci per sviluppare piattaforme mobili.

+ +

Vedi anche

+ +
+

Informazioni originali sul documento

+

Questo documento è stato originariamente pubblicato il 27 Maggio 2011 sul blog Mozilla Webdev come "Approaches to Mobile Web Development Part 3 - Responsive Design", da Jason Grlicky.

+
+

 

diff --git a/files/it/web/security/insecure_passwords/index.html b/files/it/web/security/insecure_passwords/index.html new file mode 100644 index 0000000000..cfce604aab --- /dev/null +++ b/files/it/web/security/insecure_passwords/index.html @@ -0,0 +1,67 @@ +--- +title: Password insicure +slug: Web/Security/Password_insicure +translation_of: Web/Security/Insecure_passwords +--- +

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. Gli intercettatori della rete potrebbero rubare la password di un utente utilizzando uno "sniffing" della rete o modificando la pagina in uso. 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.

+ +

Il protocollo HTTPS è progettato per proteggere i dati degli utenti da intercettazioni (riservatezza) e da modifiche (integrità) sulla rete. I siti web che gestiscono i dati degli utenti devono utilizzare l'HTTPS per proteggere i loro utenti dagli aggressori. Se un sito Web utilizza HTTP anziché HTTPS, è banale rubare le informazioni dell'utente (come le credenziali di accesso). Questo è stato notoriamente dimostrato da Firesheep.

+ +

Per risolvere questo problema, installa e configura un certificato SSL / TLS sul proprio server. Ci sono vari fornitori che offrono certificati gratuiti e a pagamento. Se si utilizza una piattaforma cloud, potrebbero essere in uso propri metodi per abilitare l'HTTPS.

+ +

Indicatori di sicurezza password di Firefox

+ +

Per avvisarti della minaccia di cui sopra, Firefox implementa molti meccanismi di avviso:

+ +
    +
  1. +

    Firefox 51+ mostra un'icona a forma di lucchetto barrato in rosso nella barra degli indirizzi quando una pagina non ha una connessione sicura, come mostrato di seguito.

    + +

    Lock Icon

    +
    2. +
  2. +

    Firefox 52+ mostra un avviso chiaro nella barra degli URL e sotto un campo di richiesta password in qualsiasi dialogo non protetto:

    + +

    Warning

    +
    3. +
  3. +

    Firefox 52+ disabilita il riempimento automatico in dialoghi di accesso non sicuri. Gli utenti possono comunque eseguire manualmente il completamento automatico degli accessi salvati dal menu a discesa.

    +
    4. +
  4. +

    Avvertenze sui dialoghi di accesso non sicuri sono disponibili anche nel pannello di sicurezza della console per sviluppatori in tutte le versioni di Firefox, come descritto nella prossima sezione.

    +
    5. +
+ +

Messaggi della console Web

+ +

Questa sezione descrive i messaggi di sicurezza visualizzati nella console di sviluppo di Firefox DevTools, in risposta a password non sicure.

+ +

Effettuando un login in ambiente HTTP

+ +

Anche se il login richiesto è ad un URL HTTPS, il dialogo di login non è protetto; un utente malintenzionato può modificare la pagina in uso (ad esempio, gli autori di attacchi possono modificare la destinazione per inviare i dati sensibili a un server che essi controllano, oppure possono inserire uno script keylogging che cancella la password mentre viene digitata). La scheda di sicurezza della console Web avvisa gli sviluppatori e gli utenti del problema di sicurezza:

+ +

Insecure login form shown with the Web Console and contextual warning on the password field.

+ +
+

Nota: Inoltre, non è sicuro incorporare una pagina di accesso HTTPS in un documento HTTP: un utente malintenzionato potrebbe modificare l'URL del frame in modo che punti a un sito dannoso.

+
+ + + +

In questo caso, qualsiasi dato inserito dall'utente viene inviato attraverso la rete come testo normale. La password dell'utente è chiaramente visibile a chiunque faccia "sniffing" sulla rete dal momento in cui la password lascia il computer dell'utente al momento in cui raggiunge i server del sito web.

+ +

Insecure login form action shown with the Web Console and contextual warning on the password field.

+ +

Nota sul riutilizzo delle password

+ +

A volte i siti web richiedono nome utente e password, ma in realtà non memorizzano dati coì sensibili. Ad esempio, un sito di news può salvare quegli articoli che un utente potrebbe tornare a leggere, ma non salvare alcun altro dato riguardante l'utente. Gli sviluppatori Web del sito di news potrebbero perciò essere poco motivati a proteggere il proprio sito e le credenziali dell'utente.

+ +

Sfortunatamente, il riutilizzo di una password è un grande problem. Gli utenti utilizzano la stessa password su più siti (siti Web di news, social network, provider di posta elettronica, banche). Quindi, anche se l'accesso al nome utente e alla password di un sito non ti sembra un grosso rischio, è un grosso rischio per gli utenti che hanno utilizzato lo stesso nome utente e password per accedere ai loro conti bancari. Gli aggressori stanno diventando più intelligenti; rubano le coppie nome utente / password da un sito e poi tentano di riutilizzarle su siti più redditizi.

+ +

Vedi anche

+ + + +

{{QuickLinksWithSubpages("/en-US/docs/Web/Security")}}

diff --git a/files/it/web/security/password_insicure/index.html b/files/it/web/security/password_insicure/index.html deleted file mode 100644 index cfce604aab..0000000000 --- a/files/it/web/security/password_insicure/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: Password insicure -slug: Web/Security/Password_insicure -translation_of: Web/Security/Insecure_passwords ---- -

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. Gli intercettatori della rete potrebbero rubare la password di un utente utilizzando uno "sniffing" della rete o modificando la pagina in uso. 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.

- -

Il protocollo HTTPS è progettato per proteggere i dati degli utenti da intercettazioni (riservatezza) e da modifiche (integrità) sulla rete. I siti web che gestiscono i dati degli utenti devono utilizzare l'HTTPS per proteggere i loro utenti dagli aggressori. Se un sito Web utilizza HTTP anziché HTTPS, è banale rubare le informazioni dell'utente (come le credenziali di accesso). Questo è stato notoriamente dimostrato da Firesheep.

- -

Per risolvere questo problema, installa e configura un certificato SSL / TLS sul proprio server. Ci sono vari fornitori che offrono certificati gratuiti e a pagamento. Se si utilizza una piattaforma cloud, potrebbero essere in uso propri metodi per abilitare l'HTTPS.

- -

Indicatori di sicurezza password di Firefox

- -

Per avvisarti della minaccia di cui sopra, Firefox implementa molti meccanismi di avviso:

- -
    -
  1. -

    Firefox 51+ mostra un'icona a forma di lucchetto barrato in rosso nella barra degli indirizzi quando una pagina non ha una connessione sicura, come mostrato di seguito.

    - -

    Lock Icon

    -
    2. -
  2. -

    Firefox 52+ mostra un avviso chiaro nella barra degli URL e sotto un campo di richiesta password in qualsiasi dialogo non protetto:

    - -

    Warning

    -
    3. -
  3. -

    Firefox 52+ disabilita il riempimento automatico in dialoghi di accesso non sicuri. Gli utenti possono comunque eseguire manualmente il completamento automatico degli accessi salvati dal menu a discesa.

    -
    4. -
  4. -

    Avvertenze sui dialoghi di accesso non sicuri sono disponibili anche nel pannello di sicurezza della console per sviluppatori in tutte le versioni di Firefox, come descritto nella prossima sezione.

    -
    5. -
- -

Messaggi della console Web

- -

Questa sezione descrive i messaggi di sicurezza visualizzati nella console di sviluppo di Firefox DevTools, in risposta a password non sicure.

- -

Effettuando un login in ambiente HTTP

- -

Anche se il login richiesto è ad un URL HTTPS, il dialogo di login non è protetto; un utente malintenzionato può modificare la pagina in uso (ad esempio, gli autori di attacchi possono modificare la destinazione per inviare i dati sensibili a un server che essi controllano, oppure possono inserire uno script keylogging che cancella la password mentre viene digitata). La scheda di sicurezza della console Web avvisa gli sviluppatori e gli utenti del problema di sicurezza:

- -

Insecure login form shown with the Web Console and contextual warning on the password field.

- -
-

Nota: Inoltre, non è sicuro incorporare una pagina di accesso HTTPS in un documento HTTP: un utente malintenzionato potrebbe modificare l'URL del frame in modo che punti a un sito dannoso.

-
- - - -

In questo caso, qualsiasi dato inserito dall'utente viene inviato attraverso la rete come testo normale. La password dell'utente è chiaramente visibile a chiunque faccia "sniffing" sulla rete dal momento in cui la password lascia il computer dell'utente al momento in cui raggiunge i server del sito web.

- -

Insecure login form action shown with the Web Console and contextual warning on the password field.

- -

Nota sul riutilizzo delle password

- -

A volte i siti web richiedono nome utente e password, ma in realtà non memorizzano dati coì sensibili. Ad esempio, un sito di news può salvare quegli articoli che un utente potrebbe tornare a leggere, ma non salvare alcun altro dato riguardante l'utente. Gli sviluppatori Web del sito di news potrebbero perciò essere poco motivati a proteggere il proprio sito e le credenziali dell'utente.

- -

Sfortunatamente, il riutilizzo di una password è un grande problem. Gli utenti utilizzano la stessa password su più siti (siti Web di news, social network, provider di posta elettronica, banche). Quindi, anche se l'accesso al nome utente e alla password di un sito non ti sembra un grosso rischio, è un grosso rischio per gli utenti che hanno utilizzato lo stesso nome utente e password per accedere ai loro conti bancari. Gli aggressori stanno diventando più intelligenti; rubano le coppie nome utente / password da un sito e poi tentano di riutilizzarle su siti più redditizi.

- -

Vedi anche

- - - -

{{QuickLinksWithSubpages("/en-US/docs/Web/Security")}}

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..b277a2fc86 --- /dev/null +++ b/files/it/web/svg/applying_svg_effects_to_html_content/index.html @@ -0,0 +1,50 @@ +--- +title: Introduzione a SVG dentro XHTML +slug: Introduzione_a_SVG_dentro_XHTML +translation_of: Web/SVG/Applying_SVG_effects_to_HTML_content +--- +

 

+

Panoramica

+

Questo articolo e l'esempio allegato mostrano come utilizzare SVG per inserire un'immagine di sfondo in un form. Mostra come JavaScript e i CSS possano essere utilizzati per manipolare l'immagine allo stesso modo in cui manipolano un normale elemento XHTML. Si noti che l'esempio funziona sui browser che supportano XHTML (non solo HTML) e l'integrazione di SVG.

+

Ecco il codice dell' esempio:

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

Spiegazione

+

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.

diff --git a/files/it/web/svg/index.html b/files/it/web/svg/index.html new file mode 100644 index 0000000000..4fcdc7a78d --- /dev/null +++ b/files/it/web/svg/index.html @@ -0,0 +1,102 @@ +--- +title: SVG +slug: SVG +tags: + - SVG + - Tutte_le_categorie +translation_of: Web/SVG +--- +
Iniziare ad usare SVG
+Questa esercitazione ti aiuterà ad iniziare ad usare SVG.
+ +
Scalable Vector Graphics (SVG) è un linguaggio XML di markup per la descrizione di grafica vettoriale a due dimensioni. Essenzialmente SVG sta alla grafica come XHTML sta al testo. + +

SVG è simile negli scopi alla tecnologia proprietaria Macromedia Flash di Adobe, ma quello che distingue SVG da Flash l'essere una raccomandazione W3C (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 W3C quali CSS, DOM e SMIL.

+ +
+
+

Documentazione

+ +
+
Riferimento degli elementi SVG
+
Ottieni i dettagli di ogni elemento SVG.
+
Riferimento degli attributi SVG
+
Ottieni i dettagli di ogni attributo SVG.
+
Riferimento alle API nel DOM di SVG
+
Ottieni i dettagli sull'intra API nel DOM di SVG.
+
Migliora il contenuto HTML
+
SVG opera insieme ad HTML, CSS e JavaScript. Utilizza SVG per una comune pagna HTML o un'apllicazione web.
+
SVG in Mozilla
+
Note e informazioni su come SVG è implementato in Mozilla. + +
+
+ +

Vedi Tutto...

+ +

Comunità

+ +
    +
  • Vedi i forum di Mozilla... {{DiscussionList("dev-tech-svg", "mozilla.dev.tech.svg")}}
    • +
+ +

Strumenti

+ + +
+ +
+ + + + +

Animazione e interazione

+ +

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.

+ + + +

Mappe, grafici, giochi ed sperimentazioni  3D

+ +

Se un piccolo SVG può fare tanta strada per migliorare il contenuto del web, ecco qualche esempio di uso intensivo di SVG.

+ + +
+
+ +
{{HTML5ArticleTOC}}SMIL.
+
+ +

diff --git a/files/it/web/web_components/usare_custom_elements/index.html b/files/it/web/web_components/usare_custom_elements/index.html deleted file mode 100644 index 4fa75cb380..0000000000 --- a/files/it/web/web_components/usare_custom_elements/index.html +++ /dev/null @@ -1,297 +0,0 @@ ---- -title: Usare i custom elements -slug: Web/Web_Components/Usare_custom_elements -translation_of: Web/Web_Components/Using_custom_elements ---- -
{{DefaultAPISidebar("Web Components")}}
- -

Una delle caratteristiche chiave dei Web Components standard è la capacità di creare elementi personalizzati che contengono le funzionalità che vuoi sviluppare direttamente in una pagina HTML, anzichè che sviluppare una lunga serie di singoli elementi innestati per avere, in una pagina, le funzionalità che desideri. Questo articolo ti introduce all'uso delle Custom Elements API.

- -
-

Nota: I custom elements sono supportati di default in Firefox, Chrome, e Edge (76). Opera e Safari fino ad ora supportano solo custom elements proprietari.

-
- -

Panoramica generale

- -

Il controller dei custom elements in un web document è l'oggetto {{domxref("CustomElementRegistry")}} — questo oggetto ti permette di registrareun custom element nella pagina, ritornare informazioni su cosa restituire informazioni su quali elementi personalizzati sono registrati etc.

- -

Per registrare un custom element nella pagina, usa il metodo {{domxref("CustomElementRegistry.define()")}}. Questo metodo ha questi argomenti:

- -
    -
  • Il {{domxref("DOMString")}} rappresenta il nome che vuoi dare all'elemento. Ricorda che i nomi dei custom elements richiedono un trattino (kebab-case); non possono essere una singole parole.
    • -
  • Un oggetto classe che definisce le funzionalità dell'elemento.
    • -
  • Opzionalmente, un oggetto contenente una proprietà extends, che specifica le caratteristiche dell'elemento che vengono ereditate nel custom element creato.
    • -
- -

Per esempio, possiamo definire un custom word-count element come questo:

- -
customElements.define('word-count', WordCount, { extends: 'p' });
- -

L'elemento è chiamato word-count, la sua classe è WordCount, ed estende l'elemento {{htmlelement("p")}}.

- -

Una classe custom element viene scritta usando la sintassi standard ES 2015. Per esempio, WordCount è strutturata così:

- -
class WordCount extends HTMLParagraphElement {
-  constructor() {
-    // Always call super first in constructor
-    super();
-
-    // Element functionality written in here
-
-    ...
-  }
-}
- -

This is just a simple example, but there is more you can do here. It is possible to define specific lifecycle callbacks inside the class, which run at specific points in the element's lifecycle. For example, connectedCallback is invoked each time the custom element is appended into a document-connected element, while attributeChangedCallback is invoked when one of the custom element's attributes is added, removed, or changed.

- -

You'll learn more about these in the {{anch("Using the lifecycle callbacks")}} section below.

- -

There are two types of custom elements:

- -
    -
  • Autonomous custom elements are standalone — they don't inherit from standard HTML elements. You use these on a page by literally writing them out as an HTML element. For example <popup-info>, or document.createElement("popup-info").
    • -
  • Customized built-in elements inherit from basic HTML elements. To create one of these, you have to specify which element they extend (as implied in the examples above), and they are used by writing out the basic element but specifying the name of the custom element in the {{htmlattrxref("is")}} attribute (or property). For example <p is="word-count">, or document.createElement("p", { is: "word-count" }).
    • -
- -

Working through some simple examples

- -

At this point, let's go through some more simple examples to show you how custom elements are created in more detail.

- -

Autonomous custom elements

- -

Let's have a look at an example of an autonomous custom element — <popup-info-box> (see a live example). This takes an image icon and a text string, and embeds the icon into the page. When the icon is focused, it displays the text in a pop up information box to provide further in-context information.

- -

To begin with, the JavaScript file defines a class called PopUpInfo, which extends {{domxref("HTMLElement")}}. Autonomous custom elements nearly always extend HTMLElement.

- -
class PopUpInfo extends HTMLElement {
-  constructor() {
-    // Always call super first in constructor
-    super();
-
-    // write element functionality in here
-
-    ...
-  }
-}
- -

The preceding code snippet contains the constructor() definition for the class, which always starts by calling super() so that the correct prototype chain is established.

- -

Inside the constructor, we define all the functionality the element will have when an instance of it is instantiated. In this case we attach a shadow root to the custom element, use some DOM manipulation to create the element's internal shadow DOM structure — which is then attached to the shadow root — and finally attach some CSS to the shadow root to style it.

- -
// Create a shadow root
-var shadow = this.attachShadow({mode: 'open'});
-
-// Create spans
-var wrapper = document.createElement('span');
-wrapper.setAttribute('class','wrapper');
-var icon = document.createElement('span');
-icon.setAttribute('class','icon');
-icon.setAttribute('tabindex', 0);
-var info = document.createElement('span');
-info.setAttribute('class','info');
-
-// Take attribute content and put it inside the info span
-var text = this.getAttribute('text');
-info.textContent = text;
-
-// Insert icon
-var imgUrl;
-if(this.hasAttribute('img')) {
-  imgUrl = this.getAttribute('img');
-} else {
-  imgUrl = 'img/default.png';
-}
-var img = document.createElement('img');
-img.src = imgUrl;
-icon.appendChild(img);
-
-// Create some CSS to apply to the shadow dom
-var style = document.createElement('style');
-
-style.textContent = '.wrapper {' +
-// CSS truncated for brevity
-
-// attach the created elements to the shadow dom
-
-shadow.appendChild(style);
-shadow.appendChild(wrapper);
-wrapper.appendChild(icon);
-wrapper.appendChild(info);
- -

Finally, we register our custom element on the CustomElementRegistry using the define() method we mentioned earlier — in the parameters we specify the element name, and then the class name that defines its functionality:

- -
customElements.define('popup-info', PopUpInfo);
- -

It is now available to use on our page. Over in our HTML, we use it like so:

- -
<popup-info img="img/alt.png" text="Your card validation code (CVC)
-  is an extra security feature — it is the last 3 or 4 numbers on the
-  back of your card."></popup-info>
- -
-

Note: You can see the full JavaScript source code here.

-
- -
-

Note: Remember that for the custom element to work, the script that registers it has to be loaded after the DOM is parsed. This can be done either by including the <script> element at the bottom of the <body>, or by including the defer attribute in your <script> element.

-
- -

Internal vs. external styles

- -

In the above example we apply style to the Shadow DOM using a {{htmlelement("style")}} element, but it is perfectly possible to do it by referencing an external stylesheet from a {{htmlelement("link")}} element instead.

- -

For example, take a look at this code from our popup-info-box-external-stylesheet example (see the source code):

- -
// Apply external styles to the shadow dom
-const linkElem = document.createElement('link');
-linkElem.setAttribute('rel', 'stylesheet');
-linkElem.setAttribute('href', 'style.css');
-
-// Attach the created element to the shadow dom
-shadow.appendChild(linkElem);
- -

Note that {{htmlelement("link")}} elements do not block paint of the shadow root, so there may be a flash of unstyled content (FOUC) while the stylesheet loads.

- -

Many modern browsers implement an optimization for {{htmlelement("style")}} tags either cloned from a common node or that have identical text, to allow them to share a single backing stylesheet. With this optimization the performance of external and internal styles should be similar.

- -

Customized built-in elements

- -

Now let's have a look at another customized built in element example — expanding-list (see it live also). This turns any unordered list into an expanding/collapsing menu.

- -

First of all, we define our element's class, in the same manner as before:

- -
class ExpandingList extends HTMLUListElement {
-  constructor() {
-    // Always call super first in constructor
-    super();
-
-    // write element functionality in here
-
-    ...
-  }
-}
- -

We will not explain the element functionality in any detail here, but you can discover how it works by checking out the source code. The only real difference here is that our element is extending the {{domxref("HTMLUListElement")}} interface, and not {{domxref("HTMLElement")}}. So it has all the characteristics of a {{htmlelement("ul")}} element with the functionality we define built on top, rather than being a standalone element. This is what makes it a customized built-in, rather than an autonomous element.

- -

Next, we register the element using the define() method as before, except that this time it also includes an options object that details what element our custom element inherits from:

- -
customElements.define('expanding-list', ExpandingList, { extends: "ul" });
- -

Using the built-in element in a web document also looks somewhat different:

- -
<ul is="expanding-list">
-
-  ...
-
-</ul>
- -

You use a <ul> element as normal, but specify the name of the custom element inside the is attribute.

- -
-

Note: Again, you can see the full JavaScript source code here.

-
- -

Using the lifecycle callbacks

- -

You can define several different callbacks inside a custom element's class definition, which fire at different points in the element's lifecycle:

- -
    -
  • connectedCallback: Invoked each time the custom element is appended into a document-connected element. This will happen each time the node is moved, and may happen before the element's contents have been fully parsed. - -
    -

    Note: connectedCallback may be called once your element is no longer connected, use {{domxref("Node.isConnected")}} to make sure.

    -
    -
    • -
  • disconnectedCallback: Invoked each time the custom element is disconnected from the document's DOM.
    • -
  • adoptedCallback: Invoked each time the custom element is moved to a new document.
    • -
  • attributeChangedCallback: Invoked each time one of the custom element's attributes is added, removed, or changed. Which attributes to notice change for is specified in a static get observedAttributes method
    • -
- -

Let's look at an example of these in use. The code below is taken from the life-cycle-callbacks example (see it running live). This is a trivial example that simply generates a colored square of a fixed size on the page. The custom element looks like this:

- -
<custom-square l="100" c="red"></custom-square>
- -

The class constructor is really simple — here we attach a shadow DOM to the element, then attach empty {{htmlelement("div")}} and {{htmlelement("style")}} elements to the shadow root:

- -
var shadow = this.attachShadow({mode: 'open'});
-
-var div = document.createElement('div');
-var style = document.createElement('style');
-shadow.appendChild(style);
-shadow.appendChild(div);
- -

The key function in this example is updateStyle() — this takes an element, gets its shadow root, finds its <style> element, and adds {{cssxref("width")}}, {{cssxref("height")}}, and {{cssxref("background-color")}} to the style.

- -
function updateStyle(elem) {
-  const shadow = elem.shadowRoot;
-  shadow.querySelector('style').textContent = `
-    div {
-      width: ${elem.getAttribute('l')}px;
-      height: ${elem.getAttribute('l')}px;
-      background-color: ${elem.getAttribute('c')};
-    }
-  `;
-}
- -

The actual updates are all handled by the life cycle callbacks, which are placed inside the class definition as methods. The connectedCallback() runs each time the element is added to the DOM — here we run the updateStyle() function to make sure the square is styled as defined in its attributes:

- -
connectedCallback() {
-  console.log('Custom square element added to page.');
-  updateStyle(this);
-}
- -

The disconnectedCallback() and adoptedCallback() callbacks log simple messages to the console to inform us when the element is either removed from the DOM, or moved to a different page:

- -
disconnectedCallback() {
-  console.log('Custom square element removed from page.');
-}
-
-adoptedCallback() {
-  console.log('Custom square element moved to new page.');
-}
- -

The attributeChangedCallback() callback is run whenever one of the element's attributes is changed in some way. As you can see from its properties, it is possible to act on attributes individually, looking at their name, and old and new attribute values. In this case however, we are just running the updateStyle() function again to make sure that the square's style is updated as per the new values:

- -
attributeChangedCallback(name, oldValue, newValue) {
-  console.log('Custom square element attributes changed.');
-  updateStyle(this);
-}
- -

Note that to get the attributeChangedCallback() callback to fire when an attribute changes, you have to observe the attributes. This is done by specifying a static get observedAttributes() method inside custom element class - this should return  an array containing the names of the attributes you want to observe:

- -
static get observedAttributes() { return ['c', 'l']; }
- -

This is placed right at the top of the constructor, in our example.

- -
-

Note: Find the full JavaScript source here.

-
- -

Polyfills vs. classes

- -

Custom Element polyfills may patch native constructors such as HTMLElement and others, and return a different instance from the one just created.

- -

If you need a constructor and a mandatory super call, remember to pass along optional arguments and return the result of such a super call operation.

- -
class CustomElement extends HTMLElement {
-  constructor(...args) {
-    const self = super(...args);
-    // self functionality written in here
-    // self.addEventListener(...)
-    // return the right context
-    return self;
-  }
-}
- -

If you don't need to perform any operation in the constructor, you can simply omit it so that its native behavior (see following) will be preserved.

- -
 constructor(...args) { return super(...args); }
-
- -

Transpilers vs. classes

- -

Please note that ES2015 classes cannot reliably be transpiled in Babel 6 or TypeScript targeting legacy browsers. You can either use Babel 7 or the babel-plugin-transform-builtin-classes for Babel 6, and target ES2015 in TypeScript instead of legacy.

- -

Libraries

- -

There are several libraries that are built on Web Components with the aim of increasing the level of abstraction when creating custom elements. Some of these libraries are snuggsi ツ, X-Tag, Slim.js, LitElement, Smart, and Stencil.

diff --git a/files/it/web/web_components/using_custom_elements/index.html b/files/it/web/web_components/using_custom_elements/index.html new file mode 100644 index 0000000000..4fa75cb380 --- /dev/null +++ b/files/it/web/web_components/using_custom_elements/index.html @@ -0,0 +1,297 @@ +--- +title: Usare i custom elements +slug: Web/Web_Components/Usare_custom_elements +translation_of: Web/Web_Components/Using_custom_elements +--- +
{{DefaultAPISidebar("Web Components")}}
+ +

Una delle caratteristiche chiave dei Web Components standard è la capacità di creare elementi personalizzati che contengono le funzionalità che vuoi sviluppare direttamente in una pagina HTML, anzichè che sviluppare una lunga serie di singoli elementi innestati per avere, in una pagina, le funzionalità che desideri. Questo articolo ti introduce all'uso delle Custom Elements API.

+ +
+

Nota: I custom elements sono supportati di default in Firefox, Chrome, e Edge (76). Opera e Safari fino ad ora supportano solo custom elements proprietari.

+
+ +

Panoramica generale

+ +

Il controller dei custom elements in un web document è l'oggetto {{domxref("CustomElementRegistry")}} — questo oggetto ti permette di registrareun custom element nella pagina, ritornare informazioni su cosa restituire informazioni su quali elementi personalizzati sono registrati etc.

+ +

Per registrare un custom element nella pagina, usa il metodo {{domxref("CustomElementRegistry.define()")}}. Questo metodo ha questi argomenti:

+ +
    +
  • Il {{domxref("DOMString")}} rappresenta il nome che vuoi dare all'elemento. Ricorda che i nomi dei custom elements richiedono un trattino (kebab-case); non possono essere una singole parole.
    • +
  • Un oggetto classe che definisce le funzionalità dell'elemento.
    • +
  • Opzionalmente, un oggetto contenente una proprietà extends, che specifica le caratteristiche dell'elemento che vengono ereditate nel custom element creato.
    • +
+ +

Per esempio, possiamo definire un custom word-count element come questo:

+ +
customElements.define('word-count', WordCount, { extends: 'p' });
+ +

L'elemento è chiamato word-count, la sua classe è WordCount, ed estende l'elemento {{htmlelement("p")}}.

+ +

Una classe custom element viene scritta usando la sintassi standard ES 2015. Per esempio, WordCount è strutturata così:

+ +
class WordCount extends HTMLParagraphElement {
+  constructor() {
+    // Always call super first in constructor
+    super();
+
+    // Element functionality written in here
+
+    ...
+  }
+}
+ +

This is just a simple example, but there is more you can do here. It is possible to define specific lifecycle callbacks inside the class, which run at specific points in the element's lifecycle. For example, connectedCallback is invoked each time the custom element is appended into a document-connected element, while attributeChangedCallback is invoked when one of the custom element's attributes is added, removed, or changed.

+ +

You'll learn more about these in the {{anch("Using the lifecycle callbacks")}} section below.

+ +

There are two types of custom elements:

+ +
    +
  • Autonomous custom elements are standalone — they don't inherit from standard HTML elements. You use these on a page by literally writing them out as an HTML element. For example <popup-info>, or document.createElement("popup-info").
    • +
  • Customized built-in elements inherit from basic HTML elements. To create one of these, you have to specify which element they extend (as implied in the examples above), and they are used by writing out the basic element but specifying the name of the custom element in the {{htmlattrxref("is")}} attribute (or property). For example <p is="word-count">, or document.createElement("p", { is: "word-count" }).
    • +
+ +

Working through some simple examples

+ +

At this point, let's go through some more simple examples to show you how custom elements are created in more detail.

+ +

Autonomous custom elements

+ +

Let's have a look at an example of an autonomous custom element — <popup-info-box> (see a live example). This takes an image icon and a text string, and embeds the icon into the page. When the icon is focused, it displays the text in a pop up information box to provide further in-context information.

+ +

To begin with, the JavaScript file defines a class called PopUpInfo, which extends {{domxref("HTMLElement")}}. Autonomous custom elements nearly always extend HTMLElement.

+ +
class PopUpInfo extends HTMLElement {
+  constructor() {
+    // Always call super first in constructor
+    super();
+
+    // write element functionality in here
+
+    ...
+  }
+}
+ +

The preceding code snippet contains the constructor() definition for the class, which always starts by calling super() so that the correct prototype chain is established.

+ +

Inside the constructor, we define all the functionality the element will have when an instance of it is instantiated. In this case we attach a shadow root to the custom element, use some DOM manipulation to create the element's internal shadow DOM structure — which is then attached to the shadow root — and finally attach some CSS to the shadow root to style it.

+ +
// Create a shadow root
+var shadow = this.attachShadow({mode: 'open'});
+
+// Create spans
+var wrapper = document.createElement('span');
+wrapper.setAttribute('class','wrapper');
+var icon = document.createElement('span');
+icon.setAttribute('class','icon');
+icon.setAttribute('tabindex', 0);
+var info = document.createElement('span');
+info.setAttribute('class','info');
+
+// Take attribute content and put it inside the info span
+var text = this.getAttribute('text');
+info.textContent = text;
+
+// Insert icon
+var imgUrl;
+if(this.hasAttribute('img')) {
+  imgUrl = this.getAttribute('img');
+} else {
+  imgUrl = 'img/default.png';
+}
+var img = document.createElement('img');
+img.src = imgUrl;
+icon.appendChild(img);
+
+// Create some CSS to apply to the shadow dom
+var style = document.createElement('style');
+
+style.textContent = '.wrapper {' +
+// CSS truncated for brevity
+
+// attach the created elements to the shadow dom
+
+shadow.appendChild(style);
+shadow.appendChild(wrapper);
+wrapper.appendChild(icon);
+wrapper.appendChild(info);
+ +

Finally, we register our custom element on the CustomElementRegistry using the define() method we mentioned earlier — in the parameters we specify the element name, and then the class name that defines its functionality:

+ +
customElements.define('popup-info', PopUpInfo);
+ +

It is now available to use on our page. Over in our HTML, we use it like so:

+ +
<popup-info img="img/alt.png" text="Your card validation code (CVC)
+  is an extra security feature — it is the last 3 or 4 numbers on the
+  back of your card."></popup-info>
+ +
+

Note: You can see the full JavaScript source code here.

+
+ +
+

Note: Remember that for the custom element to work, the script that registers it has to be loaded after the DOM is parsed. This can be done either by including the <script> element at the bottom of the <body>, or by including the defer attribute in your <script> element.

+
+ +

Internal vs. external styles

+ +

In the above example we apply style to the Shadow DOM using a {{htmlelement("style")}} element, but it is perfectly possible to do it by referencing an external stylesheet from a {{htmlelement("link")}} element instead.

+ +

For example, take a look at this code from our popup-info-box-external-stylesheet example (see the source code):

+ +
// Apply external styles to the shadow dom
+const linkElem = document.createElement('link');
+linkElem.setAttribute('rel', 'stylesheet');
+linkElem.setAttribute('href', 'style.css');
+
+// Attach the created element to the shadow dom
+shadow.appendChild(linkElem);
+ +

Note that {{htmlelement("link")}} elements do not block paint of the shadow root, so there may be a flash of unstyled content (FOUC) while the stylesheet loads.

+ +

Many modern browsers implement an optimization for {{htmlelement("style")}} tags either cloned from a common node or that have identical text, to allow them to share a single backing stylesheet. With this optimization the performance of external and internal styles should be similar.

+ +

Customized built-in elements

+ +

Now let's have a look at another customized built in element example — expanding-list (see it live also). This turns any unordered list into an expanding/collapsing menu.

+ +

First of all, we define our element's class, in the same manner as before:

+ +
class ExpandingList extends HTMLUListElement {
+  constructor() {
+    // Always call super first in constructor
+    super();
+
+    // write element functionality in here
+
+    ...
+  }
+}
+ +

We will not explain the element functionality in any detail here, but you can discover how it works by checking out the source code. The only real difference here is that our element is extending the {{domxref("HTMLUListElement")}} interface, and not {{domxref("HTMLElement")}}. So it has all the characteristics of a {{htmlelement("ul")}} element with the functionality we define built on top, rather than being a standalone element. This is what makes it a customized built-in, rather than an autonomous element.

+ +

Next, we register the element using the define() method as before, except that this time it also includes an options object that details what element our custom element inherits from:

+ +
customElements.define('expanding-list', ExpandingList, { extends: "ul" });
+ +

Using the built-in element in a web document also looks somewhat different:

+ +
<ul is="expanding-list">
+
+  ...
+
+</ul>
+ +

You use a <ul> element as normal, but specify the name of the custom element inside the is attribute.

+ +
+

Note: Again, you can see the full JavaScript source code here.

+
+ +

Using the lifecycle callbacks

+ +

You can define several different callbacks inside a custom element's class definition, which fire at different points in the element's lifecycle:

+ +
    +
  • connectedCallback: Invoked each time the custom element is appended into a document-connected element. This will happen each time the node is moved, and may happen before the element's contents have been fully parsed. + +
    +

    Note: connectedCallback may be called once your element is no longer connected, use {{domxref("Node.isConnected")}} to make sure.

    +
    +
    • +
  • disconnectedCallback: Invoked each time the custom element is disconnected from the document's DOM.
    • +
  • adoptedCallback: Invoked each time the custom element is moved to a new document.
    • +
  • attributeChangedCallback: Invoked each time one of the custom element's attributes is added, removed, or changed. Which attributes to notice change for is specified in a static get observedAttributes method
    • +
+ +

Let's look at an example of these in use. The code below is taken from the life-cycle-callbacks example (see it running live). This is a trivial example that simply generates a colored square of a fixed size on the page. The custom element looks like this:

+ +
<custom-square l="100" c="red"></custom-square>
+ +

The class constructor is really simple — here we attach a shadow DOM to the element, then attach empty {{htmlelement("div")}} and {{htmlelement("style")}} elements to the shadow root:

+ +
var shadow = this.attachShadow({mode: 'open'});
+
+var div = document.createElement('div');
+var style = document.createElement('style');
+shadow.appendChild(style);
+shadow.appendChild(div);
+ +

The key function in this example is updateStyle() — this takes an element, gets its shadow root, finds its <style> element, and adds {{cssxref("width")}}, {{cssxref("height")}}, and {{cssxref("background-color")}} to the style.

+ +
function updateStyle(elem) {
+  const shadow = elem.shadowRoot;
+  shadow.querySelector('style').textContent = `
+    div {
+      width: ${elem.getAttribute('l')}px;
+      height: ${elem.getAttribute('l')}px;
+      background-color: ${elem.getAttribute('c')};
+    }
+  `;
+}
+ +

The actual updates are all handled by the life cycle callbacks, which are placed inside the class definition as methods. The connectedCallback() runs each time the element is added to the DOM — here we run the updateStyle() function to make sure the square is styled as defined in its attributes:

+ +
connectedCallback() {
+  console.log('Custom square element added to page.');
+  updateStyle(this);
+}
+ +

The disconnectedCallback() and adoptedCallback() callbacks log simple messages to the console to inform us when the element is either removed from the DOM, or moved to a different page:

+ +
disconnectedCallback() {
+  console.log('Custom square element removed from page.');
+}
+
+adoptedCallback() {
+  console.log('Custom square element moved to new page.');
+}
+ +

The attributeChangedCallback() callback is run whenever one of the element's attributes is changed in some way. As you can see from its properties, it is possible to act on attributes individually, looking at their name, and old and new attribute values. In this case however, we are just running the updateStyle() function again to make sure that the square's style is updated as per the new values:

+ +
attributeChangedCallback(name, oldValue, newValue) {
+  console.log('Custom square element attributes changed.');
+  updateStyle(this);
+}
+ +

Note that to get the attributeChangedCallback() callback to fire when an attribute changes, you have to observe the attributes. This is done by specifying a static get observedAttributes() method inside custom element class - this should return  an array containing the names of the attributes you want to observe:

+ +
static get observedAttributes() { return ['c', 'l']; }
+ +

This is placed right at the top of the constructor, in our example.

+ +
+

Note: Find the full JavaScript source here.

+
+ +

Polyfills vs. classes

+ +

Custom Element polyfills may patch native constructors such as HTMLElement and others, and return a different instance from the one just created.

+ +

If you need a constructor and a mandatory super call, remember to pass along optional arguments and return the result of such a super call operation.

+ +
class CustomElement extends HTMLElement {
+  constructor(...args) {
+    const self = super(...args);
+    // self functionality written in here
+    // self.addEventListener(...)
+    // return the right context
+    return self;
+  }
+}
+ +

If you don't need to perform any operation in the constructor, you can simply omit it so that its native behavior (see following) will be preserved.

+ +
 constructor(...args) { return super(...args); }
+
+ +

Transpilers vs. classes

+ +

Please note that ES2015 classes cannot reliably be transpiled in Babel 6 or TypeScript targeting legacy browsers. You can either use Babel 7 or the babel-plugin-transform-builtin-classes for Babel 6, and target ES2015 in TypeScript instead of legacy.

+ +

Libraries

+ +

There are several libraries that are built on Web Components with the aim of increasing the level of abstraction when creating custom elements. Some of these libraries are snuggsi ツ, X-Tag, Slim.js, LitElement, Smart, and Stencil.

-- cgit v1.2.3-54-g00ecf