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 --- .../index.html | 34 - files/it/circa_il_document_object_model/index.html | 18 - .../learn/css/building_blocks/selectors/index.html | 151 ++ .../learn/css/first_steps/how_css_works/index.html | 118 ++ .../index.html | 107 ++ files/it/conflicting/learn/css/index.html | 24 + .../learn/getting_started_with_the_web/index.html | 277 ++++ .../javascript_basics/index.html | 331 +++++ .../learn/javascript/objects/index.html | 391 +++++ .../learn/server-side/django/index.html | 106 ++ files/it/conflicting/web/accessibility/index.html | 67 + .../web/api/canvas_api/tutorial/index.html | 162 +++ .../web/api/document_object_model/index.html | 18 + .../conflicting/web/api/node/firstchild/index.html | 41 + .../web/api/windoworworkerglobalscope/index.html | 125 ++ .../index.html | 41 + files/it/conflicting/web/guide/index.html | 52 + .../reference/global_objects/object/index.html | 215 +++ .../reference/global_objects/string/index.html | 179 +++ .../web/javascript/reference/operators/index.html | 292 ++++ .../cascata_ed_ereditariet\303\240/index.html" | 87 -- .../conoscere_i_css/che_cosa_sono_i_css/index.html | 114 -- .../come_funzionano_i_css/index.html | 118 -- files/it/conoscere_i_css/css_leggibili/index.html | 157 -- files/it/conoscere_i_css/i_selettori/index.html | 151 -- files/it/conoscere_i_css/index.html | 43 - .../perch\303\251_usare_i_css/index.html" | 107 -- .../index.html | 1193 ---------------- files/it/dare_una_mano_al_puntatore/index.html | 41 - files/it/dhtml/index.html | 56 - files/it/dom/index.html | 84 -- files/it/dom_inspector/index.html | 24 - files/it/firefox_1.5_per_sviluppatori/index.html | 165 --- files/it/firefox_18_for_developers/index.html | 109 -- files/it/firefox_2.0_per_sviluppatori/index.html | 117 -- files/it/gli_user_agent_di_gecko/index.html | 40 - files/it/glossary/dhtml/index.html | 56 + files/it/glossary/dom/index.html | 84 ++ files/it/glossary/header_di_risposta/index.html | 38 - files/it/glossary/localization/index.html | 10 + files/it/glossary/protocol/index.html | 27 + files/it/glossary/protocollo/index.html | 27 - files/it/glossary/response_header/index.html | 38 + files/it/glossary/xhtml/index.html | 26 + .../indentazione_corretta_delle_liste/index.html | 106 -- .../index.html | 34 - .../it/introduzione_a_svg_dentro_xhtml/index.html | 50 - files/it/le_colonne_nei_css3/index.html | 67 - .../accessibility_troubleshooting/index.html | 113 ++ .../accessibility/css_and_javascript/index.html | 359 +++++ files/it/learn/accessibility/html/index.html | 538 +++++++ files/it/learn/accessibility/index.html | 67 + files/it/learn/accessibility/mobile/index.html | 336 +++++ files/it/learn/accessibility/multimedia/index.html | 392 +++++ .../learn/accessibility/wai-aria_basics/index.html | 422 ++++++ .../accessibility/what_is_accessibility/index.html | 196 +++ .../index.html" | 336 ----- .../index.html" | 113 -- .../cosa_\303\250_accessibilit\303\240/index.html" | 196 --- .../index.html" | 359 ----- .../html_accessibilit\303\240/index.html" | 538 ------- "files/it/learn/accessibilit\303\240/index.html" | 67 - .../accessibilit\303\240/multimedia/index.html" | 392 ----- .../wai-aria_basics/index.html" | 422 ------ files/it/learn/come_contribuire/index.html | 88 -- .../cascade_and_inheritance/index.html | 87 ++ .../learn/css/building_blocks/selectors/index.html | 231 +++ .../learn/css/building_blocks/selettori/index.html | 231 --- .../first_steps/how_css_is_structured/index.html | 157 ++ .../learn/css/first_steps/how_css_works/index.html | 114 ++ files/it/learn/css/first_steps/index.html | 43 + .../styling_text/definire_stili_link/index.html | 438 ------ .../css/styling_text/styling_links/index.html | 438 ++++++ files/it/learn/forms/form_validation/index.html | 846 +++++++++++ .../how_to_build_custom_form_controls/index.html | 825 +++++++++++ files/it/learn/forms/index.html | 85 ++ .../index.html" | 117 -- .../come_funziona_il_web/index.html | 99 -- .../dealing_with_files/index.html | 95 ++ .../gestire_i_file/index.html | 95 -- .../how_the_web_works/index.html | 99 ++ .../pubbicare_sito/index.html | 128 -- .../publishing_your_website/index.html | 128 ++ .../what_will_your_website_look_like/index.html | 117 ++ .../index.html | 825 ----------- .../it/learn/html/forms/form_validation/index.html | 846 ----------- files/it/learn/html/forms/index.html | 85 -- .../html/howto/use_data_attributes/index.html | 82 ++ .../learn/html/howto/uso_attributi_data/index.html | 82 -- .../fondamenti_di_testo_html/index.html | 953 ------------- .../html_text_fundamentals/index.html | 953 +++++++++++++ .../i_metadata_nella_head_in_html/index.html | 265 ---- .../the_head_metadata_in_html/index.html | 265 ++++ .../contenuti_video_e_audio/index.html | 270 ---- .../immagini_reattive/index.html | 241 ---- .../responsive_images/index.html | 241 ++++ .../video_and_audio_content/index.html | 270 ++++ .../scrivi_una_semplice_pagina_in_html/index.html | 277 ---- files/it/learn/javascript/comefare/index.html | 291 ---- .../cosa_\303\250_andato_storto/index.html" | 253 ---- .../javascript/first_steps/variabili/index.html | 337 ----- .../javascript/first_steps/variables/index.html | 337 +++++ .../first_steps/what_went_wrong/index.html | 253 ++++ files/it/learn/javascript/howto/index.html | 291 ++++ .../it/learn/javascript/objects/basics/index.html | 242 ++++ files/it/learn/javascript/objects/index.html | 51 + files/it/learn/javascript/objects/json/index.html | 345 +++++ .../it/learn/javascript/oggetti/basics/index.html | 242 ---- files/it/learn/javascript/oggetti/index.html | 51 - files/it/learn/javascript/oggetti/json/index.html | 345 ----- .../server-side/django/introduction/index.html | 281 ++++ .../server-side/django/introduzione/index.html | 281 ---- files/it/link_prefetching_faq/index.html | 126 -- files/it/localization/index.html | 10 - files/it/mdn/at_ten/index.html | 41 + files/it/mdn/community/index.html | 49 - .../creating_and_editing_pages/index.html | 110 -- .../howto/create_an_mdn_account/index.html | 49 - .../howto/create_and_edit_pages/index.html | 110 ++ .../contribute/howto/delete_my_profile/index.html | 24 - .../howto/do_a_technical_review/index.html | 50 - .../howto/do_an_editorial_review/index.html | 46 - .../index.html | 57 - files/it/mdn/editor/index.html | 9 - .../guidelines/conventions_definitions/index.html | 34 + files/it/mdn/guidelines/macros/index.html | 42 - .../it/mdn/guidelines/migliore_pratica/index.html | 34 - .../mdn/structures/compatibility_tables/index.html | 496 +++++++ files/it/mdn/structures/macros/index.html | 42 + .../tabelle_compatibilit\303\240/index.html" | 496 ------- files/it/mdn_at_ten/index.html | 41 - .../webextensions/content_scripts/index.html | 494 +++++++ .../cosa_sono_le_webextensions/index.html | 59 - .../la_tua_prima_webextension/index.html | 153 -- .../webextensions/script_contenuto/index.html | 494 ------- .../what_are_webextensions/index.html | 59 + .../your_first_webextension/index.html | 153 ++ .../firefox/experimental_features/index.html | 1506 ++++++++++++++++++++ .../funzionalit\303\240_sperimentali/index.html" | 1506 -------------------- .../index.html | 34 + files/it/mozilla/firefox/releases/1.5/index.html | 165 +++ files/it/mozilla/firefox/releases/18/index.html | 109 ++ files/it/mozilla/firefox/releases/2/index.html | 117 ++ .../it/orphaned/learn/how_to_contribute/index.html | 88 ++ .../learn/html/forms/html5_updates/index.html | 83 ++ files/it/orphaned/mdn/community/index.html | 49 + .../howto/create_an_mdn_account/index.html | 49 + .../contribute/howto/delete_my_profile/index.html | 24 + .../howto/do_a_technical_review/index.html | 50 + .../howto/do_an_editorial_review/index.html | 46 + .../howto/set_the_summary_for_a_page/index.html | 57 + files/it/orphaned/mdn/editor/index.html | 9 + .../tools/add-ons/dom_inspector/index.html | 24 + files/it/orphaned/tools/add-ons/index.html | 17 + .../global_objects/array/prototype/index.html | 203 +++ files/it/plug-in/index.html | 63 - files/it/python/index.html | 106 -- files/it/svg/index.html | 102 -- files/it/sviluppo_web/index.html | 52 - files/it/tools/add-ons/index.html | 17 - files/it/tools/performance/index.html | 91 ++ files/it/tools/prestazioni/index.html | 91 -- files/it/tools/responsive_design_mode/index.html | 79 + .../it/tools/visualizzazione_flessibile/index.html | 79 - files/it/tutorial_sulle_canvas/index.html | 55 - 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 ++++ .../mobile/design_sensibile/index.html | 50 - files/it/web_development/mobile/index.html | 18 - files/it/websockets/index.html | 179 --- .../index.html | 184 --- files/it/window.find/index.html | 32 - files/it/xhtml/index.html | 26 - 370 files changed, 35746 insertions(+), 35746 deletions(-) delete mode 100644 files/it/adattare_le_applicazioni_xul_a_firefox_1.5/index.html delete mode 100644 files/it/circa_il_document_object_model/index.html create mode 100644 files/it/conflicting/learn/css/building_blocks/selectors/index.html create mode 100644 files/it/conflicting/learn/css/first_steps/how_css_works/index.html create mode 100644 files/it/conflicting/learn/css/first_steps/how_css_works_113cfc53c4b8d07b4694368d9b18bd49/index.html create mode 100644 files/it/conflicting/learn/css/index.html create mode 100644 files/it/conflicting/learn/getting_started_with_the_web/index.html create mode 100644 files/it/conflicting/learn/getting_started_with_the_web/javascript_basics/index.html create mode 100644 files/it/conflicting/learn/javascript/objects/index.html create mode 100644 files/it/conflicting/learn/server-side/django/index.html create mode 100644 files/it/conflicting/web/accessibility/index.html create mode 100644 files/it/conflicting/web/api/canvas_api/tutorial/index.html create mode 100644 files/it/conflicting/web/api/document_object_model/index.html create mode 100644 files/it/conflicting/web/api/node/firstchild/index.html create mode 100644 files/it/conflicting/web/api/windoworworkerglobalscope/index.html create mode 100644 files/it/conflicting/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html create mode 100644 files/it/conflicting/web/guide/index.html create mode 100644 files/it/conflicting/web/javascript/reference/global_objects/object/index.html create mode 100644 files/it/conflicting/web/javascript/reference/global_objects/string/index.html create mode 100644 files/it/conflicting/web/javascript/reference/operators/index.html delete mode 100644 "files/it/conoscere_i_css/cascata_ed_ereditariet\303\240/index.html" delete mode 100644 files/it/conoscere_i_css/che_cosa_sono_i_css/index.html delete mode 100644 files/it/conoscere_i_css/come_funzionano_i_css/index.html delete mode 100644 files/it/conoscere_i_css/css_leggibili/index.html delete mode 100644 files/it/conoscere_i_css/i_selettori/index.html delete mode 100644 files/it/conoscere_i_css/index.html delete mode 100644 "files/it/conoscere_i_css/perch\303\251_usare_i_css/index.html" delete mode 100644 files/it/costruire_e_decostruire_un_documento_xml/index.html delete mode 100644 files/it/dare_una_mano_al_puntatore/index.html delete mode 100644 files/it/dhtml/index.html delete mode 100644 files/it/dom/index.html delete mode 100644 files/it/dom_inspector/index.html delete mode 100644 files/it/firefox_1.5_per_sviluppatori/index.html delete mode 100644 files/it/firefox_18_for_developers/index.html delete mode 100644 files/it/firefox_2.0_per_sviluppatori/index.html delete mode 100644 files/it/gli_user_agent_di_gecko/index.html create mode 100644 files/it/glossary/dhtml/index.html create mode 100644 files/it/glossary/dom/index.html delete mode 100644 files/it/glossary/header_di_risposta/index.html create mode 100644 files/it/glossary/localization/index.html create mode 100644 files/it/glossary/protocol/index.html delete mode 100644 files/it/glossary/protocollo/index.html create mode 100644 files/it/glossary/response_header/index.html create mode 100644 files/it/glossary/xhtml/index.html delete mode 100644 files/it/indentazione_corretta_delle_liste/index.html delete mode 100644 files/it/installare_plugin_di_ricerca_dalle_pagine_web/index.html delete mode 100644 files/it/introduzione_a_svg_dentro_xhtml/index.html delete mode 100644 files/it/le_colonne_nei_css3/index.html create mode 100644 files/it/learn/accessibility/accessibility_troubleshooting/index.html create mode 100644 files/it/learn/accessibility/css_and_javascript/index.html create mode 100644 files/it/learn/accessibility/html/index.html create mode 100644 files/it/learn/accessibility/index.html create mode 100644 files/it/learn/accessibility/mobile/index.html create mode 100644 files/it/learn/accessibility/multimedia/index.html create mode 100644 files/it/learn/accessibility/wai-aria_basics/index.html create mode 100644 files/it/learn/accessibility/what_is_accessibility/index.html delete mode 100644 "files/it/learn/accessibilit\303\240/accessibilit\303\240_dispositivi_mobili/index.html" delete mode 100644 "files/it/learn/accessibilit\303\240/accessibilit\303\240_test_risoluzione_problemi/index.html" delete mode 100644 "files/it/learn/accessibilit\303\240/cosa_\303\250_accessibilit\303\240/index.html" delete mode 100644 "files/it/learn/accessibilit\303\240/css_e_javascript_accessibilit\303\240/index.html" delete mode 100644 "files/it/learn/accessibilit\303\240/html_accessibilit\303\240/index.html" delete mode 100644 "files/it/learn/accessibilit\303\240/index.html" delete mode 100644 "files/it/learn/accessibilit\303\240/multimedia/index.html" delete mode 100644 "files/it/learn/accessibilit\303\240/wai-aria_basics/index.html" delete mode 100644 files/it/learn/come_contribuire/index.html create mode 100644 files/it/learn/css/building_blocks/cascade_and_inheritance/index.html create mode 100644 files/it/learn/css/building_blocks/selectors/index.html delete mode 100644 files/it/learn/css/building_blocks/selettori/index.html create mode 100644 files/it/learn/css/first_steps/how_css_is_structured/index.html create mode 100644 files/it/learn/css/first_steps/how_css_works/index.html create mode 100644 files/it/learn/css/first_steps/index.html delete mode 100644 files/it/learn/css/styling_text/definire_stili_link/index.html create mode 100644 files/it/learn/css/styling_text/styling_links/index.html create mode 100644 files/it/learn/forms/form_validation/index.html create mode 100644 files/it/learn/forms/how_to_build_custom_form_controls/index.html create mode 100644 files/it/learn/forms/index.html delete mode 100644 "files/it/learn/getting_started_with_the_web/che_aspetto_avr\303\240_il_tuo_sito_web/index.html" delete mode 100644 files/it/learn/getting_started_with_the_web/come_funziona_il_web/index.html create mode 100644 files/it/learn/getting_started_with_the_web/dealing_with_files/index.html delete mode 100644 files/it/learn/getting_started_with_the_web/gestire_i_file/index.html create mode 100644 files/it/learn/getting_started_with_the_web/how_the_web_works/index.html delete mode 100644 files/it/learn/getting_started_with_the_web/pubbicare_sito/index.html create mode 100644 files/it/learn/getting_started_with_the_web/publishing_your_website/index.html create mode 100644 files/it/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html delete mode 100644 files/it/learn/html/forms/come_costruire_custom_form_widgets_personalizzati/index.html delete mode 100644 files/it/learn/html/forms/form_validation/index.html delete mode 100644 files/it/learn/html/forms/index.html create mode 100644 files/it/learn/html/howto/use_data_attributes/index.html delete mode 100644 files/it/learn/html/howto/uso_attributi_data/index.html delete mode 100644 files/it/learn/html/introduction_to_html/fondamenti_di_testo_html/index.html create mode 100644 files/it/learn/html/introduction_to_html/html_text_fundamentals/index.html delete mode 100644 files/it/learn/html/introduction_to_html/i_metadata_nella_head_in_html/index.html create mode 100644 files/it/learn/html/introduction_to_html/the_head_metadata_in_html/index.html delete mode 100644 files/it/learn/html/multimedia_and_embedding/contenuti_video_e_audio/index.html delete mode 100644 files/it/learn/html/multimedia_and_embedding/immagini_reattive/index.html create mode 100644 files/it/learn/html/multimedia_and_embedding/responsive_images/index.html create mode 100644 files/it/learn/html/multimedia_and_embedding/video_and_audio_content/index.html delete mode 100644 files/it/learn/html/scrivi_una_semplice_pagina_in_html/index.html delete mode 100644 files/it/learn/javascript/comefare/index.html delete mode 100644 "files/it/learn/javascript/first_steps/cosa_\303\250_andato_storto/index.html" delete mode 100644 files/it/learn/javascript/first_steps/variabili/index.html create mode 100644 files/it/learn/javascript/first_steps/variables/index.html create mode 100644 files/it/learn/javascript/first_steps/what_went_wrong/index.html create mode 100644 files/it/learn/javascript/howto/index.html create mode 100644 files/it/learn/javascript/objects/basics/index.html create mode 100644 files/it/learn/javascript/objects/index.html create mode 100644 files/it/learn/javascript/objects/json/index.html delete mode 100644 files/it/learn/javascript/oggetti/basics/index.html delete mode 100644 files/it/learn/javascript/oggetti/index.html delete mode 100644 files/it/learn/javascript/oggetti/json/index.html create mode 100644 files/it/learn/server-side/django/introduction/index.html delete mode 100644 files/it/learn/server-side/django/introduzione/index.html delete mode 100644 files/it/link_prefetching_faq/index.html delete mode 100644 files/it/localization/index.html create mode 100644 files/it/mdn/at_ten/index.html delete mode 100644 files/it/mdn/community/index.html delete mode 100644 files/it/mdn/contribute/creating_and_editing_pages/index.html delete mode 100644 files/it/mdn/contribute/howto/create_an_mdn_account/index.html create mode 100644 files/it/mdn/contribute/howto/create_and_edit_pages/index.html delete mode 100644 files/it/mdn/contribute/howto/delete_my_profile/index.html delete mode 100644 files/it/mdn/contribute/howto/do_a_technical_review/index.html delete mode 100644 files/it/mdn/contribute/howto/do_an_editorial_review/index.html delete mode 100644 files/it/mdn/contribute/howto/impostare_il_riassunto_di_una_pagina/index.html delete mode 100644 files/it/mdn/editor/index.html create mode 100644 files/it/mdn/guidelines/conventions_definitions/index.html delete mode 100644 files/it/mdn/guidelines/macros/index.html delete mode 100644 files/it/mdn/guidelines/migliore_pratica/index.html create mode 100644 files/it/mdn/structures/compatibility_tables/index.html create mode 100644 files/it/mdn/structures/macros/index.html delete mode 100644 "files/it/mdn/structures/tabelle_compatibilit\303\240/index.html" delete mode 100644 files/it/mdn_at_ten/index.html create mode 100644 files/it/mozilla/add-ons/webextensions/content_scripts/index.html delete mode 100644 files/it/mozilla/add-ons/webextensions/cosa_sono_le_webextensions/index.html delete mode 100644 files/it/mozilla/add-ons/webextensions/la_tua_prima_webextension/index.html delete mode 100644 files/it/mozilla/add-ons/webextensions/script_contenuto/index.html create mode 100644 files/it/mozilla/add-ons/webextensions/what_are_webextensions/index.html create mode 100644 files/it/mozilla/add-ons/webextensions/your_first_webextension/index.html create mode 100644 files/it/mozilla/firefox/experimental_features/index.html delete mode 100644 "files/it/mozilla/firefox/funzionalit\303\240_sperimentali/index.html" create mode 100644 files/it/mozilla/firefox/releases/1.5/adapting_xul_applications_for_firefox_1.5/index.html create mode 100644 files/it/mozilla/firefox/releases/1.5/index.html create mode 100644 files/it/mozilla/firefox/releases/18/index.html create mode 100644 files/it/mozilla/firefox/releases/2/index.html create mode 100644 files/it/orphaned/learn/how_to_contribute/index.html create mode 100644 files/it/orphaned/learn/html/forms/html5_updates/index.html create mode 100644 files/it/orphaned/mdn/community/index.html create mode 100644 files/it/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html create mode 100644 files/it/orphaned/mdn/contribute/howto/delete_my_profile/index.html create mode 100644 files/it/orphaned/mdn/contribute/howto/do_a_technical_review/index.html create mode 100644 files/it/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html create mode 100644 files/it/orphaned/mdn/contribute/howto/set_the_summary_for_a_page/index.html create mode 100644 files/it/orphaned/mdn/editor/index.html create mode 100644 files/it/orphaned/tools/add-ons/dom_inspector/index.html create mode 100644 files/it/orphaned/tools/add-ons/index.html create mode 100644 files/it/orphaned/web/javascript/reference/global_objects/array/prototype/index.html delete mode 100644 files/it/plug-in/index.html delete mode 100644 files/it/python/index.html delete mode 100644 files/it/svg/index.html delete mode 100644 files/it/sviluppo_web/index.html delete mode 100644 files/it/tools/add-ons/index.html create mode 100644 files/it/tools/performance/index.html delete mode 100644 files/it/tools/prestazioni/index.html create mode 100644 files/it/tools/responsive_design_mode/index.html delete mode 100644 files/it/tools/visualizzazione_flessibile/index.html delete mode 100644 files/it/tutorial_sulle_canvas/index.html 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 delete mode 100644 files/it/web_development/mobile/design_sensibile/index.html delete mode 100644 files/it/web_development/mobile/index.html delete mode 100644 files/it/websockets/index.html delete mode 100644 files/it/websockets/writing_websocket_client_applications/index.html delete mode 100644 files/it/window.find/index.html delete mode 100644 files/it/xhtml/index.html diff --git a/files/it/adattare_le_applicazioni_xul_a_firefox_1.5/index.html b/files/it/adattare_le_applicazioni_xul_a_firefox_1.5/index.html deleted file mode 100644 index 7062b6a3ae..0000000000 --- a/files/it/adattare_le_applicazioni_xul_a_firefox_1.5/index.html +++ /dev/null @@ -1,34 +0,0 @@ ---- -title: Adattare le applicazioni XUL a Firefox 1.5 -slug: Adattare_le_applicazioni_XUL_a_Firefox_1.5 -tags: - - Estensioni - - Tutte_le_categorie - - XUL -translation_of: Mozilla/Firefox/Releases/1.5/Adapting_XUL_Applications_for_Firefox_1.5 ---- -
{{FirefoxSidebar}}

 

- -

Questa pagina contiene un elenco di modifiche in Firefox 1.5, che coinvolgono gli sviluppatori XUL.

- -

Cambiamenti specifici

- - - -

Altre informazioni

- - - -

{{ languages( { "fr": "fr/Adaptation_des_applications_XUL_pour_Firefox_1.5", "en": "en/Adapting_XUL_Applications_for_Firefox_1.5" } ) }}

diff --git a/files/it/circa_il_document_object_model/index.html b/files/it/circa_il_document_object_model/index.html deleted file mode 100644 index a151cd40c5..0000000000 --- a/files/it/circa_il_document_object_model/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: Circa il Document Object Model -slug: Circa_il_Document_Object_Model -tags: - - DOM - - Tutte_le_categorie -translation_of: Web/API/Document_Object_Model -translation_of_original: Web/Guide/API/DOM ---- -

Cos'è il DOM?

-

Il Modello a Oggetti del Documento è una API per i documenti HTML e XML. Esso fornisce una rappresentazione strutturale del documento, dando la possibilità di modificarne il contenuto e la presentazione visiva. In poche parole, connette le pagine web agli script o ai linguaggi di programmazione.

-

Tutte le proprietà, i metodi e gli eventi disponibili per il programmatore per creare e manipolare le pagine web sono organizzate in oggetti (ad esempio, l'oggetto document rappresenta il documento stesso, l'oggetto table rappresenta l'elemento tabella e così via). Questi oggetti sono accessibili tramite linguaggi di scripting.

-

Il linguaggio più usato in congiunzione con il DOM è JavaScript. Precisamente, il codice viene scritto in JavaScript, ma usa la rappresentazione creata con il DOM per accedere alla pagina web e ai suoi elementi. Ad ogni modo, il DOM é stato pensato e implementato come indipendente da qualsiasi linguaggio di programmazione, al fine di rendere la rappresentazione strutturale del documento disponibile a chiunque, attraverso una singola conforme API. Sebbene in questo sito poniamo l'attenzione su JavaScript, le implementazioni del DOM possono essere fatte da qualunque linguaggio.

-

Il Consorzio per il World Wide Web stabilisce uno standard per il DOM, chiamato W3C DOM. Questo dovrebbe, ora che i più importanti browser lo implementano, permettere la creazione di potenti applicazioni cross-browser.

-

Perchè è importante il supporto al DOM in Mozilla?

-

"HTML Dinamico" (DHTML) è un termine usato da alcuni fornitori per descrivere la combinazione di HTML, fogli di stile e script che insieme permettono di animare i documenti. Il W3C DOM Working Group è al lavoro per assicurare che le soluzioni interoperabili e indipendenti dal linguaggio siano concordate da tutti (vedi anche la FAQ del W3C. Dal momento che Mozilla si propone come piattaforma per il web, il supporto per il DOM diventa una delle caratteristiche più richieste, ed è necessaria a Mozilla se vuole essere una possibile alternativa agli altri browser.

-

Ancora più importante è il fatto che l'interfaccia utente di Mozilla (e quindi anche di Firefox e Thunderbird) è stata creata usando XUL - un linguaggio per l'interfaccia utente basato sulle regole di XML . Perciò Mozilla usa il DOM per manipolare la sua stessa UI.

-

 

diff --git a/files/it/conflicting/learn/css/building_blocks/selectors/index.html b/files/it/conflicting/learn/css/building_blocks/selectors/index.html new file mode 100644 index 0000000000..aece606365 --- /dev/null +++ b/files/it/conflicting/learn/css/building_blocks/selectors/index.html @@ -0,0 +1,151 @@ +--- +title: I Selettori +slug: Conoscere_i_CSS/I_Selettori +tags: + - Conoscere_i_CSS +translation_of: Learn/CSS/Building_blocks/Selectors +translation_of_original: Web/Guide/CSS/Getting_started/Selectors +--- +

+

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

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

+

Informazioni: I Selettori

+

I CSS hanno una terminologia propria per descrivere il linguaggio CSS. +Precedentemente in questa guida, abbiamo creato una stringa nel foglio di stile come questa: +

+
strong {color: red;}
+
+

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

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

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

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

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

+
+


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

In aggiunta al nome dei tag possono essere utilizzati anche i valori di alcuni attributi. Questa permette di usare i selettori in modo più specifico. +

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

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

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

L'attributo id di un tag serve ad assegnare un id al tag. Anche in questo caso il nome è a piacere, ma deve essere unico per un dato documento. +

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

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

L'id "principal" deve essere unica in tutto il documento ma gli altri tag nel documento potranno appartenere alla stessa classe ed avere quindi lo stesso valore dell'attributo class. +

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

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

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

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


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

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

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

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

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

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

+
+


+Se un foglio di stile contiene regole in conflitto e con lo stesso grado di specificità, avrà prevalenza la regola che viene dopo nel foglio di stile. +

Se si incontrano dei problemi con delle regole in conflitto si può provare a risolverli rendendo una delle due regole più specifica. Se ciò non è possibile, si può provare a spostare la regola che si intende far prevalere in fondo al foglio di stile, per far sì che abbia la priorità. +

+

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

+

Apri il file HTML e duplica il paragrafo facendo copia/incolla. +Quindi aggiungi gli attributi di id e class al primo paragrafo, e solo l'id al secondo, come mostrato sotto. In alternativa si può copiare e incollare quanto sotto, sostituendo l'intero file: +

+
+
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
+<HTML>
+  <HEAD>
+  <TITLE>Sample document</TITLE>
+  <LINK rel="stylesheet" type="text/css" href="style1.css">
+  </HEAD>
+  <BODY>
+    <P id="first">
+      <STRONG class="carrot">C</STRONG>ascading
+      <STRONG class="spinach">S</STRONG>tyle
+      <STRONG class="spinach">S</STRONG>heets
+    </P>
+    <P id="second">
+      <STRONG>C</STRONG>ascading
+      <STRONG>S</STRONG>tyle
+      <STRONG>S</STRONG>heets
+    </P>
+  </BODY>
+</HTML>
+
+
+

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

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

Aggiorna il browser per vedere il risultato: +

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


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

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

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

+ + +
Esercizi +
Senza modificare il file HTML, aggiungi un unica regola al file CSS che mantenga il colore delle lettere iniziali, ma renda il testo del secondo paragrafo di colore blu: + + + + +
Cascading Style Sheets +
Cascading Style Sheets +
+

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

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


+

+

Cos'altro?

+

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

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

{{ languages( { "en": "en/CSS/Getting_Started/Selectors", "fr": "fr/CSS/Premiers_pas/Les_s\u00e9lecteurs", "pl": "pl/CSS/Na_pocz\u0105tek/Selektory", "pt": "pt/CSS/Como_come\u00e7ar/Seletores" } ) }} diff --git a/files/it/conflicting/learn/css/first_steps/how_css_works/index.html b/files/it/conflicting/learn/css/first_steps/how_css_works/index.html new file mode 100644 index 0000000000..c5565b371f --- /dev/null +++ b/files/it/conflicting/learn/css/first_steps/how_css_works/index.html @@ -0,0 +1,118 @@ +--- +title: Come funzionano i CSS +slug: Conoscere_i_CSS/Come_funzionano_i_CSS +tags: + - Conoscere_i_CSS + - DOM + - Tutte_le_categorie +translation_of: Learn/CSS/First_steps/How_CSS_works +translation_of_original: Web/Guide/CSS/Getting_started/How_CSS_works +--- +

+

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

+

Informazioni: Come funzionano i CSS

+

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

+ + +

Un linguaggio di marcatura utilizza i tag per definire la struttura del documento. Un tag può anche essere un contenitore, con altri tag tra il suo inizio e la sua fine. +

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

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

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

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

+
+

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

+
+
+

Comprendere il DOM aiuta nel progettare, correggere e manutenere il CSS, poiché il DOM è il luogo in cui si incontrano CSS e contenuto del documento. +

+

Azione: Analizzare un DOM

+

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

Apri il documento di esempio con il browser Mozilla. +

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

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

Se non hai intenzione di installare il DOMi, puoi saltare questa parte e andare direttamente alla prossima pagina. +Saltare questa sezione non interferisce con la comprensione del resto della guida. +

+
+


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

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

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

+ + +
+

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

+
+
+

Quando si seleziona un nodo, nel pannello di destra del DOMi vengono mostrate informazioni ulteriori a proposito di quel nodo. +Per esempio quando si seleziona un nodo di testo, il DOMi mostra il testo nel pannello di destra. +

Quando viene selezionato il nodo di un elemento, il DOMi lo analizza e fornisce una grande quantità di informazioni nel pannello di destra. Le informazioni sullo stile non sono che una parte di quelle fornite. +


+

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

Utilizza il pannello di destra del DOMi per trovare in quale punto viene definito il colore rosso del nodo e dove il suo aspetto viene reso più marcato del testo normale. +

+
+


+

+

Cos'altro?

+

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

Se hai eseguito gli esercizi, hai potuto vedere come le informazioni sullo stile siano presenti in diversi posti ed interagiscano per rendere lo stile finale dell'elemento. +

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

{{ languages( { "en": "en/CSS/Getting_Started/How_CSS_works", "fr": "fr/CSS/Premiers_pas/Fonctionnement_de_CSS", "ja": "ja/CSS/Getting_Started/How_CSS_works", "pl": "pl/CSS/Na_pocz\u0105tek/Jak_dzia\u0142a_CSS", "pt": "pt/CSS/Como_come\u00e7ar/Como_o_CSS_trabalha" } ) }} diff --git a/files/it/conflicting/learn/css/first_steps/how_css_works_113cfc53c4b8d07b4694368d9b18bd49/index.html b/files/it/conflicting/learn/css/first_steps/how_css_works_113cfc53c4b8d07b4694368d9b18bd49/index.html new file mode 100644 index 0000000000..4048fe74e3 --- /dev/null +++ b/files/it/conflicting/learn/css/first_steps/how_css_works_113cfc53c4b8d07b4694368d9b18bd49/index.html @@ -0,0 +1,107 @@ +--- +title: Perché usare i CSS +slug: Conoscere_i_CSS/Perché_usare_i_CSS +tags: + - Conoscere_i_CSS +translation_of: Learn/CSS/First_steps/How_CSS_works +translation_of_original: Web/Guide/CSS/Getting_started/Why_use_CSS +--- +

 

+ +

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

+ +

Informazioni: Perché usare i CSS?

+ +

I CSS aiutano a mantenere le informazioni sul contenuto di un documento separate dai dettagli su come presentarlo. Le informazioni sulla presentazione del documento sono note come stile. Mantenere lo stile separato dal contenuto permette di:

+ + + + + + + + + + +
Esempi
1) Il tuo sito web potrebbe avere migliaia di pagine che si assomigliano. Utilizzando i CSS si possono immagazzinare le informazioni sullo stile in dei file comuni che vengono condivisi da tutte le pagine. +

2) E' possibile creare differenti stili in modo che quando l'utente visualizza una pagina web, il browser carichi determinate informazioni sullo stile insieme al contenuto della pagina. Quando invece l'utente stampa la pagina web, venga fornito uno stile diverso che renda la pagina stampata più semplice da leggere.

+
+ +

In linea di massima il linguaggio di markup è utilizzato per descrivere le informazioni sul contenuto di un documento, non il suo stile. I CSS, al contrario, definiscono lo stile, non il contenuto. (Più avanti nella guida vedremo qualche eccezione.)

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

Quando si utilizzano i CSS normalmente si evita di "sporcare" in questo modo il codice di markup, concentrando tutte le informazioni sullo stile in un solo posto, possibilmente separato.

+
+ +

Azione: Creare un foglio di stile

+ +

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

+ +

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

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

Collegare il foglio di stile al proprio documento

+ +

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

+ +
+
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
+<HTML>
+  <HEAD>
+  <TITLE>Sample document</TITLE>
+  <LINK rel="stylesheet" type="text/css" href="style1.css">
+  </HEAD>
+  <BODY>
+    <P>
+      <STRONG>C</STRONG>ascading
+      <STRONG>S</STRONG>tyle
+      <STRONG>S</STRONG>heets
+    </P>
+  </BODY>
+</HTML>
+
+
+ +

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

+ + + + + + + +
Cascading Style Sheets
+ + + + + + + + +
Esercizi
Oltre al rosso ("red"), i CSS accettano altri nomi per indicare i colori (in inglese). Senza guardare una referenza, trova cinque o più nomi di colori che funzionino.
+ +

 

+ +

Cos'altro?

+ +

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

+ +

Ora che hai un documento di esempio collegato ad un foglio di stile separato, sei pronto per saperne di più su come il browser li combina quando visualizza il documento: Come funzionano i CSS

+ +

{{ languages( { "en": "en/CSS/Getting_Started/Why_use_CSS", "fr": "fr/CSS/Premiers_pas/Pourquoi_utiliser_CSS", "ja": "ja/CSS/Getting_Started/Why_use_CSS", "pl": "pl/CSS/Na_pocz\u0105tek/Po_co_u\u017cywa\u0107_CSS", "pt": "pt/CSS/Como_come\u00e7ar/Porque_usar_CSS" } ) }}

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

{{draft}}

+

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

+

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

+

{{LandingPageListSubpages}}

+

Pages elsewhere

+

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

+

See also

+ diff --git a/files/it/conflicting/learn/getting_started_with_the_web/index.html b/files/it/conflicting/learn/getting_started_with_the_web/index.html new file mode 100644 index 0000000000..c52f7ca3e2 --- /dev/null +++ b/files/it/conflicting/learn/getting_started_with_the_web/index.html @@ -0,0 +1,277 @@ +--- +title: Scrivi una semplice pagina in HTML +slug: Learn/HTML/Scrivi_una_semplice_pagina_in_HTML +tags: + - Guide + - HTML + - Principianti + - Web Development +translation_of: Learn/Getting_started_with_the_web +translation_of_original: Learn/HTML/Write_a_simple_page_in_HTML +--- +
+

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

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

Sommario

+ +

La semplice pagina web è solo un documento {{Glossary("HTML")}}.Le uniche cose del quale hai bisogno sono un documento HTML valido sul tuo computer e un web browser.Vediamo come usare HTML {{Glossary("Tag","tags")}} e potrai essere in grado di vedere la pagina che hai creato nel browser.

+ +

Apprendimento attivo

+ +

Prima di tutto accertiamoci di avere un editore di testo che sia comodo e un web browser funzionante. Praticamente qualsiasi editore di testo può farlo, ad esempio Notepad in Windows o TextEdit sul Mac, ma assicurati di avere creato un semplice documento di testo (solo caratteri senza alcun supporto di formattazione). Se vuoi usare TextEdit sul MAc scegli "Make Plain Text" dal menu "Format.

+ +

Primo passo: Un file

+ +

una singola pagina web è fatta (almeno) da un file HTML, così inziamo a creare una di quelle che lo comporranno. Apri il tuo editore di testo e crea un nuovo file di testo poi scrivi qualcosa come nell'esempio:

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

Se vuoi puoi apportare delle modifiche rispetto all'esempio sentiti libero di aggiungere o cambiare il testo nel body o nel title e poi salva il file. Assicurati in fine di dare un nome al file con estensione ".html". Per esempio, potresti nominarla "my_page.html".

+ +

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

+ +

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

+ +

Facendo un doppio click sul file si aprirà nel browser,  per aprire il file direttamente sull' editore di testo al fine di modificarlo puoi: fare click con il tasto destro e scegliere di aprire il documento nell'editore di testo; oppure trascinare il documento all'interno dell'editore od aprire il documento scegliendo "Open" dal menu dell'editore "File". La somiglianza all'esempio che vedi sotto dipende dall'editore che utilizzi:

+ +

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

+ +

Secondo passo: Un web browser

+ +

All'interno del file explorer (come Windows Explorer, Finder sul Mac, o Files in Ubuntu), trovi il documento che hai appena creato e lo apri con il browser (fai doppio click o lo trascini nell'icona del browser). Adesso il browser mostra il testo dal file HTML che hai creato e il tab mostra il titolo della pagina il tutto potrebbe assomigliare all'esempio che visualizzi sotto ,fermo restando che la visalizzazione cambia a seconda della piattaforma e del browser da te utilizzati:

+ +

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

+ +

Come puoi vedere il contenuto del tag body corrisponde al contenuto della pagina e il contenuto del tag title da te scelto è mostrato nel tab, ma le due linee di testo non sono scritte su due differente ma su un'unica linea. Interessante.

+ +

Terzo passo: Sperimenta e impara

+ +

Prova a rimuovere parti dell' HTML e guarda cosa accade. Alcuni cambiamenti ti permetteranno di mostrare la pagina  nel browser ed altri daranno risultati sbagliati.Ciò Accade perchè il browser cerca di compensare alcuni errori comuni.

+ +

La prima cosa da notare è che l'unica cosa che vedi sullo schermo è il testo che non è all'interno delle parentesi angolate (altrimenti conosciute come i simboli di maggiore e minore ma che chiamiamo parentesi angolate quando parliamo di HTML). Ogni cosa all'interno delle parentesi angolate è un{{Glossary("tag")}}, che rappresenta una struttura o scheletro della pagina web.Tutti i contenuti mostrati sono racchiusi tra i tags.

+ +

Il nostro esempio di pagina HTML ha due grandi sezioni: un intestazione contenuta all'interno {{HTMLElement("head")}} elemento blocco "block", ed un corpo, contenuto {{HTMLElement("body")}}. Il corpo contiene il testo mostrato all'interno della pagina web.

+ +

Ogni tag ha un significato specifico e può essere usato di conseguenza. Per esempio {{HTMLElement("title")}} è usato per indicare il titolo della pagina che può differire dal nome del file, nota che anche che i tag possono presentaresi all'interno del contenuto di altri tags. L'{{HTMLElement("title")}} è contenuto all'interno {{HTMLElement("head")}}, per esempio.

+ +

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

+ +
<!DOCTYPE html>
+<html>
+<head>
+  <title>Hi there</title>
+</head>
+<body>
+  This is a page
+  a simple page
+  <img src="unicorn_pic.png" alt="Unicorn picture :)" />
+  now with a unicorn
+</body>
+</html>
+ +

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

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

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

+ +

Poi inserisci un file nominato "unicorn_pic.png" nella stessa cartella del documento HTML.Quando avrai aggiornato la finestra del browser o riaperto il documento, vedrai i cambiamenti di contenuto, completa con unicorno!(non dimenticare di salvare la pagina).

+ +

Original file for the unicorn image

+ +
+

Nota: Puoi prendere una copia dell'immagine dell'unicorno per usarla nei tuoi sperimenti cliccando con il tasto destro sopra l'immagine e scegliendo "Save image As..." dal menu che appare.

+
+ +

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

+ +

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

+ +

Il risultato mostrato nel browser è questo:

+ +

Screenshot for the example with a picture

+ +

Come hai notato il tag{{HTMLElement("img")}} ha {{Glossary("attribute","attributes")}} che dà informazioni addizionali necessarie a costruire l'oggetto richiesto in questo caso il nome del file dell'immagine da mostrare e il testo alternativo qualora l'immagine non possa essere caricata.

+ +

Questo è un esempio di come aggiungere un'immagine alla pagina, ma puoi usare una tecnica similare per aggiungere musica, video e molto altro tutto usando nient'altro che l'HTML.

+ +

Più in profondità

+ +

Questa non è una pagina web molto carina

+ +

Come avrai notato questa pagina non è certo un miracolo di design e bellezza, questo perchè HTML è tutto ciò che riguarda il contenuto e ciò che il contenuto significa (in termini del suo contesto e la relazione tra i blocchi di contenuto), piuttosto che design.

+ +

{{Glossary("CSS")}} ti permette di fare contenuti scintillanti aggiungendo layout, colore, font e così via. Un puro HTML è buono abbastanza per costruire semplici pagine web, ma pagine più complesse (o sebbene semplici con un design accattivante) hanno bisogno del CSS e possibilmente  {{Glossary("JavaScript")}}. HTML costruisce il contenuto, CSS gli stili e JavaScript rende il contenuto dinamico.

+ +

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

+ +
<!DOCTYPE html>
+<html>
+<head>
+  <title>Hi there</title>
+  <style>
+    body {
+      color: blue;
+    }
+  </style>
+</head>
+  <body>
+    <p>This is a some blue text</p>
+    <img src="unicorn_pic.png" alt="Unicorn picture :)" />
+  </body>
+</html>
+ +

Nota l'aggiunta{{HTMLElement("style")}} alla pagina all'interno{{HTMLElement("head")}}. Questo specifica quale caratteristica CSS sarà da applicare al testo contenuto nel tag body.

+ +

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

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

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

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

Il risultato finale sarà questo:

+ +
<html>
+<head>
+  <title>Hi there</title>
+  <style>
+  body {
+    color: blue;
+    text-decoration: underline;
+    font-size: 42px;
+  }
+  </style>
+</head>
+<body>
+  <p>This is a blue underlined big text</p>
+  <img src="unicorn_pic.png" alt="Unicorn picture :)" />
+</body>
+</html>
+ +

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

+ +

Screenshot of the browser with the page with some CSS

+ +

Andiamo alla seconda pagina

+ +

Quando navighi nel Web spesso incontri {{Glossary("hyperlink","links")}}, il modo più utile per navigare da una pagina all'altra. Dal momento in cui l'HTML si occupa del contenuto e i link sono il modulo del contenuto, puoi creare collegamenti tra le pagine utilizzando soltanto l'HTML.

+ +

Collega due pagine locali

+ +

Per questo esercizio abbiamo bisogno di creare un secondo documento HTML sul computer aggiungiamo un link ad ogni pagina così possiamo passare velocemente avanti e indietro tra esse.

+ +

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

+ +
<!DOCTYPE html>
+<html>
+<head>
+  <title>Page 1 to ground control</title>
+</head>
+<body>
+  This is page 1.
+  <a href="page2.html" title="to page 2">What is going on on page 2?</a>
+</body>
+</html>
+ +

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

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

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

+
+ +

Puoi adesso navigare tra i due documenti HTML apri la page 1 nel browser e fai click nel link per aprire la page 2 e viceversa. Puoi inoltre testare il bottone "previous" nel tuo browser esso dovrebbe portarti all'ultima pagina visitata.

+ +

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

+ +

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

+ +

La Page 1 sarà così visualizzata nel browser:

+ +

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

+ +

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

+ +

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

+ +
+

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

+
+ +

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

+ +

Collegamento ad un altra pagina web

+ +

In questo esercizio aggiungiamo un link al documento HTML così che il lettore possa velocemente prendere alcune pagine utili nel Web. Puoi collegare qualsiasi cosa sia disponibile nel Web pubblico, prova a creare un collegamento con Wikipedia:

+ +
<!DOCTYPE html>
+<html>
+<head>
+  <title>My page</title>
+</head>
+<body>
+  One day,...Unicorns are great...See you.
+  <a href="https://en.wikipedia.org/wiki/Unicorn" title="Unicorn page on Wikipedia">Want to go know more about unicorns? Wikipedia is right here</a>
+</body>
+</html>
+ +

Potrebbe più o meno assomigliare a questo nel browser:

+ +

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

+ +

Passando il puntatore del mouse sopra il link vedrai l'attributo{{htmlattrxref("title")}} mostrato in un tooltip.Questo può essere usato per dare maggiori informazioni sul link così che l'utente possa fare una scelta formazioni tra il cliccare su esso o meno.

+ +
+

Ricorda: Ogni volta che modifichi la pagina non dimenticare di salvare il documento sull'editor e di aggiornare la pagina sul browser così che possa vedere i cambiamenti fatti.

+
+ +

Prossimi passi

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

Perché JavaScript?

+

JavaScript è un linguaggio per computer potente, complicato, e spesso misconosciuto. Permette lo sviluppo rapido di applicazioni in cui gli utenti possono inserire i dati e vedere i risultati facilmente.

+

Il vantaggio primario di JavaScript, che è anche conosciuto come ECMAScript, è che è centrato intorno al Web browser, così da avere la capacità di produrre gli stessi risultati su tutte le piattaforme supportate dal browser. Gli esempi in questa pagina, proprio come Google Maps, girano su Linux, Windows, e OS X. Con la recente crescita di numerose librerie JavaScript è ora più facile traversare un documento, selezionare gli elementi del DOM, creare animazioni, trattare eventi, e sviluppare applicazioni Ajax. Diversamente dalla promozione intorno alle altre tecnologie spinta da vari interessi proprietari, JavaScript è realmente il solo linguaggio di programmazione "cross-platform" e "client-side" che è sia libero che universalmente adottato.

+

Cosa dovresti già conoscere

+

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

+

Ci sono molte altre tecnologie che possono essere integrate e sviluppate insieme a Javascript che sono al di fuori di questo documento. Non aspettarti di fare un'intera applicazione come Google Maps tutta nel tuo primo giorno!

+

Come iniziare

+

Iniziare con JavaScript è molto semplice. Non devi aver precedentemente installato complicati programmi di sviluppo. Non devi conoscere come usare una shell, programmare Make, o usare un compilatore. JavaScript è interpretato dal tuo Web browser. Tutto quello che hai da fare è salvare il tuo programma come file testo e poi aprirlo nel tuo Web browser. E' tutto qui!

+

JavaScript è un linguaggio di programmazione ideale per linguaggi di computer introduttivi. Permette ai nuovi studenti di avere risposte immediate e insegna loro strumenti che essi troveranno di facile uso nella loro vita reale. Ciò è in assoluto contrasto con C, C++, and Java che sono veramente facili solo per sviluppatori software specializzati.

+

Browser compatibility issues

+

There are variations between what functionality is available in the different browsers. Mozilla, Chrome, Microsoft IE, Apple Safari, and Opera fluctuate in behavior. You can mitigate these issues by using the various cross-platform JavaScript APIs that are available. These APIs provide common functionality and hide these browser fluctuations from you.

+

How to try the examples

+

The examples below have some sample code. There are many ways to try these examples out. If you already have your own website, then you should be able to just save these examples as new Web pages on your website.

+

If you do not have your own website, you can save these examples as files on your computer and open them up with the Web browser you are using now. JavaScript is a very easy language to use for beginning programmers for this reason. You don't need a compiler or a development environment; you and your browser are all you need to get started!

+

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

+

Example: Catching a mouse click

+

The specifics of event handling (event types, handler registration, propagation, etc.) are too extensive to be fully covered in this simple example. However, this example cannot demonstrate catching a mouse click without delving a little into the JavaScript event system. Just keep in mind that this example will only graze the full details about JavaScript events and that if you wish to go beyond the basic capabilities described here, read more about the JavaScript event system.

+

'Mouse' events are a subset of the total events issued by a Web browser in response to user actions. The following is a list of the events emitted in response to a user's mouse action:

+ +

Note that in the latest versions of HTML, the inline event handlers, i.e. the ones added as tag attributes, are expected to be all lowercase and that event handlers in script are always all lowercase.

+

The simplest method for capturing these events, to register event handlers - using HTML - is to specify the individual events as attributes for your element. Example:

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

The JavaScript code you wish to execute can be inlined as the attribute value or you can call a function which has been defined in a <script> block within the HTML page:

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

Additionally, the event object which is issued can be captured and referenced, providing the developer with access to specifics about the event such as which object received the event, the event's type, and which mouse button was clicked. Using the inline example again:

+
<script>
+  function clickHandler(event) {
+    var eType = event.type;
+    /* the following is for compatibility */
+    /* Moz populates the target property of the event object */
+    /* IE populates the srcElement property */
+    var eTarget = event.target || event.srcElement;
+
+    alert( "Captured Event (type=" + eType + ", target=" + eTarget + ")" );
+  }
+</script>
+<span onclick="clickHandler(event);">Click Here</span>
+

In addition to registering to receive events in your HTML, you can likewise set the same attributes of any HTMLElement objects generated by your JavaScript. The example below instantiates (creates) a span object, appends it to the page body, and registers the span object to receive mouse-over, mouse-out, mouse-down, and mouse-up events.

+
<body></body>
+<script>
+  function mouseeventHandler(event) {
+    /* The following is for compatibility */
+    /* IE does NOT by default pass the event object */
+    /* obtain a ref to the event if one was not given */
+    if (!event) event = window.event;
+
+    /* obtain event type and target as earlier */
+    var eType = event.type;
+    var eTarget = event.target || event.srcElement;
+    alert(eType +' event on element with id: '+ eTarget.id);
+  }
+
+ function onloadHandler() {
+   /* obtain a ref to the 'body' element of the page */
+   var body = document.body;
+   /* create a span element to be clicked */
+   var span = document.createElement('span');
+   span.id = 'ExampleSpan';
+   span.appendChild(document.createTextNode ('Click Here!'));
+
+   /* register the span object to receive specific mouse events -
+      notice the lowercase of the events but the free choice in the names of the handlers you replace them with.
+   */
+   span.onmousedown = mouseeventHandler;
+   span.onmouseup = mouseeventHandler;
+   span.onmouseover = mouseeventHandler;
+   span.onmouseout = mouseeventHandler;
+
+   /* display the span on the page */
+   body.appendChild(span);
+}
+
+window.onload = onloadHandler; // since we replace the handler, we do NOT have () after the function name
+</script>
+

Example: Catching a keyboard event

+

Similar to the "Catching a mouse event" example above, catching a keyboard event relies on exploring the JavaScript event system. Keyboard events are fired whenever any key is used on the keyboard.

+

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

+ +

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

+

The simplest method for capturing keyboard events is again to register event handlers within the HTML, specifying the individual events as attributes for your element. Example:

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

As with mouse events, the JavaScript code you wish to execute can be inlined as the attribute value or you can call a function which has been defined in a <script> block within the HTML page:

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

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

+
<script type="text/javascript">
+  function keypressHandler(evt) {
+      var eType = evt.type; // Will return "keypress" as the event type
+      /* here we again need to use a cross browser method
+         mozilla based browsers return which and others keyCode.
+         The Conditional operator or ternary is a good choice */
+      var keyCode = evt.which?evt.which:evt.keyCode;
+      var eCode = 'keyCode is ' + keyCode;
+      var eChar = 'charCode is ' + String.fromCharCode(keyCode); // or evt.charCode
+      alert ("Captured Event (type=" + eType + ", key Unicode value=" + eCode + ", ASCII value=" + eChar + ")");
+   }
+</script>
+<input onkeypress="keypressHandler(event);" />
+

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

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

Here is a complete example that shows key event handling:

+
<!DOCTYPE html>
+<html>
+<head>
+  <script>
+    var metaChar = false;
+    var exampleKey = 16;
+    function keyEvent(event) {
+      var key = event.keyCode || event.which; // alternative to ternary - if there is no keyCode, use which
+      var keychar = String.fromCharCode(key);
+      if (key == exampleKey) {
+        metaChar = true;
+      }
+      if (key != exampleKey) {
+         if (metaChar) {
+            alert("Combination of metaKey + " + keychar)
+            metaChar = false;
+         } else {
+           alert("Key pressed " + key);
+         }
+      }
+    }
+    function metaKeyUp(event) {
+      var key = event.keyCode || event.which;
+      if (key == exampleKey) { metaChar = false; }
+    }
+  </script>
+</head>
+<body onkeydown="keyEvent(event)" onkeyup="metaKeyUp(event)">
+    Try pressing any key!
+</body>
+</html>
+

Browser bugs and quirks

+

The two properties made available through the key events are keyCode and charCode. In simple terms, keyCode refers to the actual keyboard key that was pressed by the user, while charCode is intended to return that key's ASCII value. These two values may not necessarily be the same; for instance, a lower case 'a' and an upper case 'A' have the same keyCode, because the user presses the same key, but a different charCode because the resulting character is different.

+

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

+

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

+

{{ draft() }}

+

Example: Dragging images around

+

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

+
<!DOCTYPE html>
+<html>
+<head>
+<style>
+img { position: absolute; }
+</style>
+
+<script>
+window.onload = function() {
+
+  movMeId = document.getElementById("ImgMov");
+  movMeId.style.top = "80px";
+  movMeId.style.left = "80px";
+
+  document.onmousedown = coordinates;
+  document.onmouseup = mouseup;
+
+  function coordinates(e) {
+    if (e == null) { e = window.event;}
+
+    // e.srcElement holds the target element in IE, whereas e.target holds the target element in Firefox
+    // Both properties return the HTML element the event took place on.
+
+    var sender = (typeof( window.event ) != "undefined" ) ? e.srcElement : e.target;
+
+    if (sender.id=="ImgMov") {
+      mouseover = true;
+      pleft = parseInt(movMeId.style.left);
+      ptop = parseInt(movMeId.style.top);
+      xcoor = e.clientX;
+      ycoor = e.clientY;
+      document.onmousemove = moveImage;
+      return false;
+    }
+    return false;
+  }
+
+  function moveImage(e) {
+    if (e == null) { e = window.event; }
+    movMeId.style.left = pleft+e.clientX-xcoor+"px";
+    movMeId.style.top = ptop+e.clientY-ycoor+"px";
+    return false;
+  }
+
+  function mouseup(e) {
+    document.onmousemove = null;
+  }
+}
+</script>
+</head>
+
+<body>
+  <img id="ImgMov" src="http://placehold.it/100x100&text=JS" width="64" height="64">
+  <p>Drag and drop around the image in this page.</p>
+</body>
+
+</html>
+

Example: Resizing things

+
+ Example of resizing an image (the actual image is not resized, only the image's rendering.) + 
  <!DOCTYPE html>
+  <html>
+    <head>
+      <style>
+        #resizeImage {
+          margin-left: 100px;
+        }
+      </style>
+      <script>
+      window.onload = function() {
+
+        var resizeId = document.getElementById("resizeImage");
+        var resizeStartCoordsX,
+            resizeStartCoordsY,
+            resizeEndCoordsX,
+            resizeEndCoordsY;
+
+        var resizeEndCoords;
+        var resizing = false;
+
+        document.onmousedown = coordinatesMousedown;
+        document.onmouseup = coordinatesMouseup;
+
+        function coordinatesMousedown(e) {
+          if (e == null) {
+            e = window.event;
+          }
+
+          var element = (typeof( window.event ) != 'undefined' ) ? e.srcElement : e.target;
+
+          if (element.id == "resizeImage") {
+            resizing = true;
+            resizeStartCoordsX = e.clientX;
+            resizeStartCoordsY = e.clientY;
+          }
+          return false;
+        }
+
+        function coordinatesMouseup(e) {
+          if (e == null) {
+            e = window.event;
+          }
+
+          if (resizing === true) {
+            var currentImageWidth = parseInt(resizeId.width);
+            var currentImageHeight = parseInt(resizeId.height);
+
+            resizeEndCoordsX = e.clientX;
+            resizeEndCoordsY = e.clientY;
+
+            resizeId.style.height = currentImageHeight - (resizeStartCoordsY - resizeEndCoordsY) + 'px';
+            resizeId.style.width = currentImageWidth - (resizeStartCoordsX - resizeEndCoordsX) + 'px';
+
+            resizing = false;
+          }
+          return false;
+        }
+      }
+      </script>
+    </head>
+
+    <body>
+      <img id="resizeImage" src="http://upload.wikimedia.org/wikipedia/commons/e/e7/Mozilla_Firefox_3.5_logo_256.png"
+width="64" height="64">
+      <p>Click on the image and drag for resizing.</p>
+    </body>
+
+  </html>
+
+

Example: Drawing Lines

+
<!DOCTYPE html>
+<html>
+<head>
+<script>
+function linedraw(ax,ay,bx,by)
+{
+    if(ay>by)
+    {
+        bx=ax+bx;
+        ax=bx-ax;
+        bx=bx-ax;
+        by=ay+by;
+        ay=by-ay;
+        by=by-ay;
+    }
+    var calc=Math.atan((ay-by)/(bx-ax));
+    calc=calc*180/Math.PI;
+    var length=Math.sqrt((ax-bx)*(ax-bx)+(ay-by)*(ay-by));
+    document.body.innerHTML += "<div id='line' style='height:" + length + "px;width:1px;background-color:black;position:absolute;top:" + (ay) + "px;left:" + (ax) + "px;transform:rotate(" + calc + "deg);-ms-transform:rotate(" + calc + "deg);transform-origin:0% 0%;-moz-transform:rotate(" + calc + "deg);-moz-transform-origin:0% 0%;-webkit-transform:rotate(" + calc  + "deg);-webkit-transform-origin:0% 0%;-o-transform:rotate(" + calc + "deg);-o-transform-origin:0% 0%;'></div>"
+}
+</script>
+</head>
+<body onload="linedraw(200,400,500,900);"> <!-- Replace with your co-ordinate -->
+</body>
+</html>
+

 

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

{{jsSidebar("Introductory")}}

+ +

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

+ +

Riesame su JavaScript

+ +

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

+ +

Programmazione object-oriented

+ +

La programmazione orientata agli oggetti è un paradigma di programmazione che usa astrazione ({{glossary("abstraction")}}) per creare modelli basati sul mondo reale. Utilizza diverse tecniche di paradigmi esistenti, tra cui la modularità ({{glossary("modularity")}}), il polimorfismo ({{glossary("polymorphism")}}) e l'incapsulamento ({{glossary("encapsulation")}}). Oggi molti linguaggi di programmazione (come Java, JavaScript, C #, C ++, Python, PHP, Ruby e Objective-C) supportano la programmazione orientata agli oggetti (OOP).

+ +

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

+ +

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

+ +

Terminologia

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

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

+ + + +

Programmazione  prototype-based

+ +

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

+ +

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

+ +

Programmazione  Object Oriented in JavaScript

+ +

Namespace

+ +

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

+ +
+

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

+
+ +

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

+ +

Creiamo un oggetto globale chiamato MYAPP:

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

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

+ +

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

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

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

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

Oggetti incorporati (built-in) standard

+ +

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

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

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

+ +

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

+ +

Oggetti utente

+ +

La classe

+ +

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

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

L'oggetto (istanza di classe)

+ +

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

+ +

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

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

Il costruttore

+ +

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

+ +

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

+ +

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

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

La proprietà (attributo di oggetto)

+ +

Le proprietà sono variabili contenute nella classe; ogni istanza dell'oggetto ha queste proprietà. Le proprietà sono impostate nel costruttore (funzione) della classe in modo che siano creati su ogni istanza.

+ +

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

+ +

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

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

I metodi

+ +

I metodi sono funzioni (e definiti come funzioni), ma per il resto seguono la stessa logica delle proprietà. Chiamare un metodo è simile all'accesso a una proprietà, ma si aggiunge () alla fine del nome del metodo, eventualmente con argomenti. Per definire un metodo va assegnata una funzione a una proprietà della proprietà prototype della classe. In seguito sarà possibile chiamare il metodo sull'oggetto utilizzando lo stesso nome assegnato alla funzione.

+ +

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

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

In JavaScript i metodi sono oggetti funzione regolarmente associati a un oggetto come una proprietà, il che significa che è possibile richiamare i metodi "fuori dal contesto". Si consideri il seguente codice di esempio:

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

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

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

Eredità

+ +

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

+ +
+

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

+
+ +

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

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

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

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

Essere sicuri che  this punti alla cosa giusta a prescindere da come l'oggetto sia istanziato può essere difficile. Tuttavia c'e una tecnica semplice per renderlo più facile.

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

Incapsulamento

+ +

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

+ +

Il nascondere informazioni (information hiding) è una caratteristica comune ad altre linguaggi, spesso in forma di  metodi / proprietà private e protette. Anche se si potrebbe simulare qualcosa di simile in JavaScript, questo non è un requisito per fare programmazione Object Oriented.2

+ +

Astrazione

+ +

L'astrazione è un meccanismo che permette di modellare la parte corrente del problema, sia con eredità (specializzazione) o la composizione. JavaScript ottiene la specializzazione per eredità, e la composizione permettendo che istanze di classe siano valori di attributi di altri oggetti.

+ +

La classe Function di Javascript eredita dalla classe Object (questo dimostra la specializzazione del modello) e la proprietà Function.prototype è un'istanza di oggetto (ciò dimostra la composizione).

+ +

The JavaScript Function class inherits from the Object class (this demonstrates specialization of the model) and the Function.prototype property is an instance of Object (this demonstrates composition).

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

Polimorfismo

+ +

Così come tutti i metodi e le proprietà sono definite all'interno della proprietà prototype, classi diverse possono definire metodi con lo stesso nome; i metodi sono nell'ambito della classe in cui sono definiti, a meno che le due classi siano in un rapporto padre-figlio (cioè una eredita dall'altra in una catena di ereditarietà).

+ + + +

Note

+ +

Le tecniche presentate in questo articolo per attuare la programmazione orientata agli oggetti non sono le uniche che possono essere utilizzate in JavaScript, che è molto flessibile in termini di come la programmazione orientata agli oggetti possa essere eseguita.

+ +

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

+ +

Ci sono altre tecniche che rendono la programmazione orientata agli oggetti in JavaScript ancora più avanzata, ma sono oltre la portata di questo articolo introduttivo.

+ +

Riferimenti

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

Original Document Information

+ + +
+ +

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

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

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

+ +

Imparare Python

+ +

Libri digitali (gratuiti)

+ +

Dive Into Python è considerata una delle migliori introduzioni a Python disponibili, anche se è aggiornato al 2004. Ciò nonostante, fornisce una buona trattazione delle basi del linguaggio e dei compiti più comuni per cui è usato il linguaggio come le richieste web o le operazioni sui file. Per gli argomenti più complessi, Text Processing In Python è un eccellente tutorial (o reference).

+ +

Ci sono poi altri tutorial e risorse gratuite, disponibili:

+ + + +

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

+ +

Corsi Online (gratuiti)

+ + + +

Python nelle applicazioni Mozilla

+ +

XPCOM di per sè supporta solamente la comunicazione tra C++ e JavaScript. Il modulo Python XPCOM (chiamato anche PyXPCOM) è uno strato di basso-livello che mette insieme Python e Mozilla, permettendo ai componenti XPCOM scritti in C++ o JavaScript di comunicare con Python, o viceversa. PyXPCOM non è incluso di default in Firefox, quindi si dovrebbe usare una versione di terze-parti che include il modulo. Un esempio di utilizzatori di PyXPCOM sono la famiglia di prodotti Komodo.

+ +

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

+ +

Strumenti scritti in Python

+ +

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

+ +

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

+ +

L'uso di Python in Mozilla

+ +

Mozilla ha diverse infrastrutture basate su Python:

+ + + +

Python in Mozilla-Central

+ +

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

+ +

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

+ + + +

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

+ +

Pacchetti Python

+ +

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

+ +

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

+ +
easy_install PyYAML
+
+ +

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

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

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

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

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

+ +

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

+ +

Vedi anche:

+ + diff --git a/files/it/conflicting/web/accessibility/index.html b/files/it/conflicting/web/accessibility/index.html new file mode 100644 index 0000000000..fccfa1f152 --- /dev/null +++ b/files/it/conflicting/web/accessibility/index.html @@ -0,0 +1,67 @@ +--- +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/conflicting/web/api/canvas_api/tutorial/index.html b/files/it/conflicting/web/api/canvas_api/tutorial/index.html new file mode 100644 index 0000000000..1495605ec5 --- /dev/null +++ b/files/it/conflicting/web/api/canvas_api/tutorial/index.html @@ -0,0 +1,162 @@ +--- +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/conflicting/web/api/document_object_model/index.html b/files/it/conflicting/web/api/document_object_model/index.html new file mode 100644 index 0000000000..a151cd40c5 --- /dev/null +++ b/files/it/conflicting/web/api/document_object_model/index.html @@ -0,0 +1,18 @@ +--- +title: Circa il Document Object Model +slug: Circa_il_Document_Object_Model +tags: + - DOM + - Tutte_le_categorie +translation_of: Web/API/Document_Object_Model +translation_of_original: Web/Guide/API/DOM +--- +

Cos'è il DOM?

+

Il Modello a Oggetti del Documento è una API per i documenti HTML e XML. Esso fornisce una rappresentazione strutturale del documento, dando la possibilità di modificarne il contenuto e la presentazione visiva. In poche parole, connette le pagine web agli script o ai linguaggi di programmazione.

+

Tutte le proprietà, i metodi e gli eventi disponibili per il programmatore per creare e manipolare le pagine web sono organizzate in oggetti (ad esempio, l'oggetto document rappresenta il documento stesso, l'oggetto table rappresenta l'elemento tabella e così via). Questi oggetti sono accessibili tramite linguaggi di scripting.

+

Il linguaggio più usato in congiunzione con il DOM è JavaScript. Precisamente, il codice viene scritto in JavaScript, ma usa la rappresentazione creata con il DOM per accedere alla pagina web e ai suoi elementi. Ad ogni modo, il DOM é stato pensato e implementato come indipendente da qualsiasi linguaggio di programmazione, al fine di rendere la rappresentazione strutturale del documento disponibile a chiunque, attraverso una singola conforme API. Sebbene in questo sito poniamo l'attenzione su JavaScript, le implementazioni del DOM possono essere fatte da qualunque linguaggio.

+

Il Consorzio per il World Wide Web stabilisce uno standard per il DOM, chiamato W3C DOM. Questo dovrebbe, ora che i più importanti browser lo implementano, permettere la creazione di potenti applicazioni cross-browser.

+

Perchè è importante il supporto al DOM in Mozilla?

+

"HTML Dinamico" (DHTML) è un termine usato da alcuni fornitori per descrivere la combinazione di HTML, fogli di stile e script che insieme permettono di animare i documenti. Il W3C DOM Working Group è al lavoro per assicurare che le soluzioni interoperabili e indipendenti dal linguaggio siano concordate da tutti (vedi anche la FAQ del W3C. Dal momento che Mozilla si propone come piattaforma per il web, il supporto per il DOM diventa una delle caratteristiche più richieste, ed è necessaria a Mozilla se vuole essere una possibile alternativa agli altri browser.

+

Ancora più importante è il fatto che l'interfaccia utente di Mozilla (e quindi anche di Firefox e Thunderbird) è stata creata usando XUL - un linguaggio per l'interfaccia utente basato sulle regole di XML . Perciò Mozilla usa il DOM per manipolare la sua stessa UI.

+

 

diff --git a/files/it/conflicting/web/api/node/firstchild/index.html b/files/it/conflicting/web/api/node/firstchild/index.html new file mode 100644 index 0000000000..99a2a04fc2 --- /dev/null +++ b/files/it/conflicting/web/api/node/firstchild/index.html @@ -0,0 +1,41 @@ +--- +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/conflicting/web/api/windoworworkerglobalscope/index.html b/files/it/conflicting/web/api/windoworworkerglobalscope/index.html new file mode 100644 index 0000000000..ce963ed81e --- /dev/null +++ b/files/it/conflicting/web/api/windoworworkerglobalscope/index.html @@ -0,0 +1,125 @@ +--- +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/conflicting/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html b/files/it/conflicting/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html new file mode 100644 index 0000000000..b54d7a7367 --- /dev/null +++ b/files/it/conflicting/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html @@ -0,0 +1,41 @@ +--- +title: Dare una mano al puntatore +slug: Dare_una_mano_al_puntatore +tags: + - CSS + - Tutte_le_categorie +translation_of: Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property +translation_of_original: Giving_'cursor'_a_Hand +--- +

Un buon numero di sviluppatori ha chiesto quando Mozilla e Netscape 6+ abbiano pianificato di implementare il supporto per la proprietà cursor. Spesso si stupiscono di scoprire che entrambi i browser già la supportano. Comunque, ciò che non dovrebbe sorprendere è che il supporto è basato sulle specifiche approvate dal W3C per i CSS2.

+

Il problema di base è questo: Internet Explorer 5.x per Windows riconosce il valore hand, che non appare mai nella sezione 18.1 dei CSS2– ne' in altra specifica. Il valore che più si avvicina al comportamento di hand è pointer, che le specifiche definiscono così: "Il cursore è un puntatore che indica un collegamento". Si noti che non viene mai detto niente riguardo l'apparizione di una manina, anche se è ormai pratica convenzionale dei browser.

+

Sfortunatamente, IE5.x/Win non riconosce il valore pointer. Entrambi IE6/Win and IE5.x/Mac riconoscono pointer e hand, fortunatamente. D'altra parte, Mozilla e Netscape 6+ seguono la specifica CSS2 e gestiscono pointer, ignorando il valore proprietario hand.

+

Se Mozilla/Netscape ignorano hand e IE5.x/Win ignora pointer, come deve comportarsi uno sviluppatore? E' necessario specificare entrambi.

+
a { cursor: pointer; cursor: hand; }
+

Si faccia attenzione a non invertire i due valori! Scrivendo i fogli di stile come mostrato sopra, NS6+ mostrerà il primo valore e ignorerà il secondo, così si ottiene il valore pointer. IE5.x/Win riconosce entrambi ed userà il secondo, cioè hand. Invertendo i due valori, Netscape 6+ continuerà a lavorare interpretare correttamente lo stile, mentre IE5.x/Win tenterà di usare il secondo, senza ottenere il risultato voluto.

+

Con questo semplice metodo, è possibile assicurarsi la presenza della "manina" in ogni caso.

+

Una avvertenza: seguendo l'approccio raccomandato, il foglio di stile non passerà una eventuale validazione, dato che contiene un valore non permesso per la proprietà cursor. Gli sviluppatori sono quindi avvisati di prendere in considerazione questo inconveniente rispetto al vantaggio che porta la soluzione, quindi decidere cosa è più importante e procedere di conseguenza.

+

Testare il supporto

+

Vi chiedete come si comporti il vostro browser con hand e pointer? Provate direttamente a spostare il puntatore sulla tabella di test sotto riportata!

+ + + + + + + + +
Questa cella ha lo stile cursor: pointer. Si dovrebbe ottenere un puntatore che cambia in una manina, su Mozilla e Netscape 6+, IE6/Win, and IE5.x/Mac, ma non in IE5.x/Win.Questa cella non ha uno stile cursor per cui il puntatore rimarrà quello standard.Questa cella ha uno stile cursor: hand. Si dovrebbe ottenere un puntatore che cambia in una manina, su IE5+/Win, ma non in Mozilla e Netscape 6+.
+

Collegamenti

+ +
+

Original Document Information

+ +
diff --git a/files/it/conflicting/web/guide/index.html b/files/it/conflicting/web/guide/index.html new file mode 100644 index 0000000000..955b27f5d9 --- /dev/null +++ b/files/it/conflicting/web/guide/index.html @@ -0,0 +1,52 @@ +--- +title: Sviluppo Web +slug: Sviluppo_Web +tags: + - Sviluppo_Web + - Tutte_le_categorie +translation_of: Web/Guide +translation_of_original: Web_Development +--- +

+

+
Lo sviluppo Web comprende tutti gli aspetti di sviluppo di un sito web o di una applicazione web.
+ + +
+

Documentazione

+
Migrare applicazioni da Internet Explorer a Mozilla +
Doron Rosenberg vi dice come assicurarvi che le vostre applicazioni web sia con IE che con Mozilla. +
+
Usare valori URL per la proprietà cursor +
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. +
+
Usare il caching di Firefox 1.5 +
Firefox 1.5 memorizza intere pagine web, incluso il loro stato JavaScript, in memoria. La navigazione in avanti ed indietro tra le pagine visitate non richiede caricamento di pagina e lo stato del JavaScript è preservato. Questa carateristica permette una navigazione delle pagine molto veloce. +
+

Vedi tutti... +

+		 +

Community

+
  • Visita i forum Mozilla... +
+

{{ DiscussionList("dev-web-development", "mozilla.dev.web-development") }} +

+ +

Strumenti

+ +

Vedi tutti... +

+

Argomenti correlati

+
AJAX, CSS, HTML, JavaScript, Standard Web, XHTML, XML +
+
+

Categories +

Interwiki Language Links +


+

{{ languages( { "en": "en/Web_Development", "de": "de/Webentwicklung", "es": "es/Desarrollo_Web", "fr": "fr/D\u00e9veloppement_Web", "ja": "ja/Web_Development", "pl": "pl/Programowanie_WWW" } ) }} diff --git a/files/it/conflicting/web/javascript/reference/global_objects/object/index.html b/files/it/conflicting/web/javascript/reference/global_objects/object/index.html new file mode 100644 index 0000000000..568165d0be --- /dev/null +++ b/files/it/conflicting/web/javascript/reference/global_objects/object/index.html @@ -0,0 +1,215 @@ +--- +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/conflicting/web/javascript/reference/global_objects/string/index.html b/files/it/conflicting/web/javascript/reference/global_objects/string/index.html new file mode 100644 index 0000000000..c83cec2a54 --- /dev/null +++ b/files/it/conflicting/web/javascript/reference/global_objects/string/index.html @@ -0,0 +1,179 @@ +--- +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

+ + diff --git a/files/it/conflicting/web/javascript/reference/operators/index.html b/files/it/conflicting/web/javascript/reference/operators/index.html new file mode 100644 index 0000000000..e49fe045ae --- /dev/null +++ b/files/it/conflicting/web/javascript/reference/operators/index.html @@ -0,0 +1,292 @@ +--- +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.

+ + + +

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.

+ + + +

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/conoscere_i_css/cascata_ed_ereditariet\303\240/index.html" "b/files/it/conoscere_i_css/cascata_ed_ereditariet\303\240/index.html" deleted file mode 100644 index 66702c1bdd..0000000000 --- "a/files/it/conoscere_i_css/cascata_ed_ereditariet\303\240/index.html" +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: Cascata ed ereditarietà -slug: Conoscere_i_CSS/Cascata_ed_ereditarietà -tags: - - Conoscere_i_CSS -translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance -translation_of_original: Web/Guide/CSS/Getting_started/Cascading_and_inheritance ---- -

-

Questa pagina delinea come diversi fogli di stile interagiscano in cascata e come gli elementi ereditino lo stile dai loro elementi genitori. -

Verranno aggiunte delle informazioni al foglio di stile di esempio, modificando lo stile di molte parti del documento con una sola mossa. -

link title== Headline text ==== Informazioni: Cascata ed ereditarietà == -Lo stile finale di un elemento può essere definito in molti luoghi diversi, che possono intergire fra loro in modo complesso. -Questa complessa interazione rende i CSS molto potenti, ma può anche rendere una correzione confusa e difficile. -

Le tre sorgenti principali di informazioni sullo stile che generano la cascata sono: -

- -

Lo stile dell'utente modifica lo stile predefinito del browser. Lo stile dell'autore del documento modifica ulteriormente lo stile. In questa guida tu sei l'autore del documento di esempio, e verrà considerato solo il foglio di stile dell'autore. -

- -
Esempio -Quando leggi questo articolo della guida nel tuo browser Mozilla, parte dello stile che vedi proviene da quello predefinito del browser per l'HTML. Un altra parte potrebbe essere definita dalle impostazioni del browser nel menu Strumenti>Opzioni, o dal file userContent.css nel tuo profilo del browser. Un'altra parte deriva infine dal foglio di stile associato al documento dal server del wiki. -
-


-Quando apri il documento di esempio con il browser, gli elementi STRONG sono più marcati del resto del testo. Questo effetto deriva dallo stile predefinito del browser per l'HTML. -

Gli elementi STRONG sono rossi. Questo è stato definto dal tuo foglio di stile di esempio. -

Gli elementi STRONG inoltre ereditano gran parte dello stile dell'elemento P, poiché ne sono figli. Allo stesso modo l'elemento P eredita gran parte dello stile dall'elemento BODY. -

Negi stili in cascata, il foglio di stile dell'autore ha la precedenza, quindi viene il foglio dell'utente ed infine quello predefinito del browser. -

Per gli stili ereditati, lo stile proprio del nodo figlio ha la precedenza su quello ereditato dal genitore. -

Questo non è l'unico ordine di precedenze che viene applicato, ma lo riprenderemo più avanti nella guida. -

- - -
Di più... -
I CSS forniscono un modo all'utente per prevalere sullo stile definito dall'autore del documento, utilizzando la parola chiave !important. -

Questo significa anche che l'autore del documento non può prevedere esattamente cosa vedrà l'utente. -

Per consocere tutti i dettagli circa la cascata e l'ereditarietà, guarda la sezione relativa a "Assegnare valori alle proprietà, Cascata ed ereditarietà"(EN) nelle specifiche dei CSS. -

-
-

Azione: Utilizzare l'ereditarietà

-

Modifica il tuo file CSS di esempio. -

Aggiungi la seguente linea facendo copia e incolla. -Non è molto importante dove viene incollata. In ogni caso è più logico aggiungerla all'inizio perché nel documento l'elemento P è genitore dell'elemento STRONG: -

-
p {color: blue; text-decoration: underline;}
-
-

Ora aggiorna il browser e nota i cambiamenti al docuemnto di esempio. -La sottolineatura influenza tutto il testo contenuto nel paragrafo, incluse le lettere iniziali. -L'elemento STRON ha ereditato lo stile sottolineato dall'elemento genitore P. -

Ma gli elementi STRONG continuano ad essere di colore rosso. Questo perché il colore rosso è lo stile proprio dell'elemento, che prevale sull'elemento blu dell'elemento P. -

- - -
- - -
Prima -
Cascading Style Sheets -
-		 - - -
Dopo -
Cascading Style Sheets -
-
-


-

- - -
Esercizi -
Cambia il foglio di stile per fare in modo che solo le lettere rosse risultino sottolineate: - - -
Cascading Style Sheets -
-
-


-

-

Cos'altro?

-

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

Il foglio di stile d'esempio specifica lo stile per i tag P e STRONG modificandone lo stile per tutto il documento. La prossima pagina spiega come specificare lo stile in modo più selettivo: -I Selettori -

{{ languages( { "en": "en/CSS/Getting_Started/Cascading_and_inheritance", "fr": "fr/CSS/Premiers_pas/Cascade_et_h\u00e9ritage", "ja": "ja/CSS/Getting_Started/Cascading_and_inheritance", "pl": "pl/CSS/Na_pocz\u0105tek/Kaskadowo\u015b\u0107_i_dziedziczenie", "pt": "pt/CSS/Como_come\u00e7ar/Cascata_e_heran\u00e7a" } ) }} diff --git a/files/it/conoscere_i_css/che_cosa_sono_i_css/index.html b/files/it/conoscere_i_css/che_cosa_sono_i_css/index.html deleted file mode 100644 index 9e65e269af..0000000000 --- a/files/it/conoscere_i_css/che_cosa_sono_i_css/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: Cosa è CSS -slug: Conoscere_i_CSS/Che_cosa_sono_i_CSS -translation_of: Learn/CSS/First_steps/How_CSS_works -translation_of_original: Web/Guide/CSS/Getting_started/What_is_CSS ---- -

{{ CSSTutorialTOC() }}

- -

{{previousPage("/it/docs/CSS/Getting_Started", "Getting started")}} Questa è la prima sezione dell'esercitazione "Iniziare (Esercitazione di CSS)" che spiega cosa è CSS. Si creerà un semplice documento su cui lavorare nelle pagine seguenti

- -

Informazione: Cosa è CSS?

- -

Cascading Style Sheets (CSS) è un linguaggio per specificare come i documenti sono presentati all'utente.

- -

Un documento è un insieme di informazioni strutturate utilizzando un linguaggio a marcatori.

- -
-
Esempi
- -

Una pagine web come quella che si legge è un documento.
- Le informazioni che si vedono in una pagina web sono strutturare utilizzando il linguaggio a marcatori HTML  (HyperText Markup Language).
- Le finestre di dialogo, anche chiamate finestre modali, di una applicazione sono spesso documenti.
- Tali finestre modali potrebbero essere strutturate utilizzano un linguaggio a marcatori, come XUL. E' questo il caso frequente delle applicazioni di Mozilla, ma non è il caso comune.

-
- -

In questa esercitazione, i riquadri titolati Maggiori dettagli come quello seguente contengono informazioni facoltative. Se hai fretta di andare avanti con l'esercitazione potresti saltarli, e forse tornare a leggerli più tardi. Diversamente leggerli quando li incontri, e forse seguire i link per imparare di più.

- -
-
Maggiori dettagli
- -

Un documento non è un file. Potrebbe o non potrebbe essere memorizzato in un file.

- -

Per esempio, il documento che stai leggendo non è memorizzaotin un file. Quando il browser web richiede questa pagina, il server interroga un database e genera il documento, traendone le sue parti da molti file. D'altra parte, in questa esercitazione si lavora con documenti che sono memorizzati nei file.

- -

Per maggiori informazioni sui documenti e i linguaggi a amrcatori, si vedano altre parti di questo sito web—per esempio:

- - - - - - - - - - - - - - - - - - - - -
HTMLper le pagine web
XMLper i documenti strutturati in generale
SVGper la grafica
XULper le interfacce utente in Mozillafor user interfaces in Mozilla
- -

Nella Parte II di questa esercitazione si vedranno esempi di questi linguaggi a marcatore.

-
- -

Presentare un documento ad un utente significa convertirlo in una forma utilizzabile dall'essere umano. Browser, come FireFox, Chrome o Internet Explorer, sono progettati per presentare visivamente i documenti — per esempio, sullo schermo di un computer, un proiettore o una stampante.

- - - - - - - - -
 
-
Maggiori dettagli
- CSS non è solo per i browser, e non solo per presentazioni visive. Nella terminologia fomale di CSS, il programma che presenta un documento a un utente è chiamatouser agent (UA). Un browser è solo un tipo di UA. Comunque, nella Parte I dell'esercitazione si lavora esclusivamente con CSS in un browser. - -

Per qualche definizione formale della terminologia relativa a CSS, vedere le Definizioni nelle specifiche CSS.

-
- -

Azione: Creare un documento

- -

Utilizzare il proprio computer per creare una nuova cartella ed un nuovo file di testo al suo interno. Il file conterrà il tuo documento.
- Copia ed incolla il codice HTML mostrato sotto. Salva il file utilizzando il nome doc1.html

- -
<!DOCTYPE html>
-<html>
-  <head>
-  <meta charset="UTF-8">
-  <title>Sample document</title>
-  </head>
-
-  <body>
-    <p>
-      <strong>C</strong>ascading
-      <strong>S</strong>tyle
-      <strong>S</strong>heets
-    </p>
-  </body>
-</html>
- -

Nel proprio browser, aprire una nuova scheda o una nuova finestra, e aprirvi il file.

- -

Si dovrebbe vedere il testo con le lettere iniziali in grassetto, come questo:

- - - - - - - -
Cascading Style Sheets
- -

Quello che vedi nel tuo browser potrebbe non apparire esattametne uguale a questo, a causa delle impostazioni utilizzate dal browser e da questo wiki. Se ci sono differenze di font, spaziatura e colori, non ha importanza.

- -

E poi?

- -

{{nextPage("/en-US/docs/CSS/Getting_Started/Why_use_CSS", "Why use CSS?")}}Il documento ancora non utilizza CSS. Nella prossima sezione si utilizzerà CSS per specificare lo stile.

diff --git a/files/it/conoscere_i_css/come_funzionano_i_css/index.html b/files/it/conoscere_i_css/come_funzionano_i_css/index.html deleted file mode 100644 index c5565b371f..0000000000 --- a/files/it/conoscere_i_css/come_funzionano_i_css/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: Come funzionano i CSS -slug: Conoscere_i_CSS/Come_funzionano_i_CSS -tags: - - Conoscere_i_CSS - - DOM - - Tutte_le_categorie -translation_of: Learn/CSS/First_steps/How_CSS_works -translation_of_original: Web/Guide/CSS/Getting_started/How_CSS_works ---- -

-

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

-

Informazioni: Come funzionano i CSS

-

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

- - -

Un linguaggio di marcatura utilizza i tag per definire la struttura del documento. Un tag può anche essere un contenitore, con altri tag tra il suo inizio e la sua fine. -

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

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

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

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

-
-

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

-
-
-

Comprendere il DOM aiuta nel progettare, correggere e manutenere il CSS, poiché il DOM è il luogo in cui si incontrano CSS e contenuto del documento. -

-

Azione: Analizzare un DOM

-

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

Apri il documento di esempio con il browser Mozilla. -

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

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

Se non hai intenzione di installare il DOMi, puoi saltare questa parte e andare direttamente alla prossima pagina. -Saltare questa sezione non interferisce con la comprensione del resto della guida. -

-
-


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

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

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

- - -
-

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

-
-
-

Quando si seleziona un nodo, nel pannello di destra del DOMi vengono mostrate informazioni ulteriori a proposito di quel nodo. -Per esempio quando si seleziona un nodo di testo, il DOMi mostra il testo nel pannello di destra. -

Quando viene selezionato il nodo di un elemento, il DOMi lo analizza e fornisce una grande quantità di informazioni nel pannello di destra. Le informazioni sullo stile non sono che una parte di quelle fornite. -


-

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

Utilizza il pannello di destra del DOMi per trovare in quale punto viene definito il colore rosso del nodo e dove il suo aspetto viene reso più marcato del testo normale. -

-
-


-

-

Cos'altro?

-

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

Se hai eseguito gli esercizi, hai potuto vedere come le informazioni sullo stile siano presenti in diversi posti ed interagiscano per rendere lo stile finale dell'elemento. -

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

{{ languages( { "en": "en/CSS/Getting_Started/How_CSS_works", "fr": "fr/CSS/Premiers_pas/Fonctionnement_de_CSS", "ja": "ja/CSS/Getting_Started/How_CSS_works", "pl": "pl/CSS/Na_pocz\u0105tek/Jak_dzia\u0142a_CSS", "pt": "pt/CSS/Como_come\u00e7ar/Como_o_CSS_trabalha" } ) }} diff --git a/files/it/conoscere_i_css/css_leggibili/index.html b/files/it/conoscere_i_css/css_leggibili/index.html deleted file mode 100644 index 7942e9a4a9..0000000000 --- a/files/it/conoscere_i_css/css_leggibili/index.html +++ /dev/null @@ -1,157 +0,0 @@ ---- -title: CSS leggibili -slug: Conoscere_i_CSS/CSS_leggibili -tags: - - Conoscere_i_CSS -translation_of: Learn/CSS/Introduction_to_CSS/Syntax#Beyond_syntax_make_CSS_readable -translation_of_original: Web/Guide/CSS/Getting_started/Readable_CSS ---- -

-

In questa pagina si parla dello stile e della grammatica del linguaggio CSS stesso. -

Impareremo a cambiare l'aspetto del file CSS di prova per renderlo più leggibile. -

-

Informazioni: CSS leggibili

-

E' possibile aggiungere spazi bianchi e commenti ai propri fogli di stile al fine di renderli più leggibili. -Inoltre si possono raggruppare insieme i selettori quando viene applicata a diversi elementi la stessa regola di stile. -

-

Spazi bianchi

-

Spazi bianchi significa proprio spaziatura, tabulazione e nuove linee. -Si possono aggiungere degli spazi bianchi per rendere i fogli di stile più leggibili. -

Al momento il file CSS di prova ha una regola per ogni linea ed il minimo degli spazi bianchi. In un foglio di stile complesso questa struttura sarebbe molto difficile da decifrare, rendendo la manutenzione e la modifica del foglio di stile alquanto faticose. -

La struttura da scegliere generalmente risponde alle preferenze personali dell'autore, ma in un progetto condiviso potrebbero esistere delle particolari convenzioni comuni. -

- - -
Esempi -
Alcuni autori preferisono una struttura molto compatta (simile a quella utilizzata fin ora per il file di esempio), dividendo la linea solo quando diventa troppo lunga: -
-.carrot {color: orange; text-decoration: underline; font-style: italic;}
-
-

Altri preferiscono il metodo "una proprietà per linea": -

-
-
.carrot
-{
-color: orange;
-text-decoration: underline;
-font-style: italic;
-}
-
-
-

Altri ancora utilizzano l'indentazione—due, quattro spazi, o una tabulazione sono comuni: -

-
-
.carrot {
-  color: orange;
-  text-decoration: underline;
-  font-style: italic;
-}
-
-
-

Alcuni autori addirittura preferiscono allineare tutto verticalmente (ma una struttura simile risulta difficile da mantenere): -

-
-
.carrot
-    {
-    color           : orange;
-    text-decoration : underline;
-    font-style      : italic;
-    }
-
-
-

Alcuni usano la tabulazione. Altri solo gli spazi. -

-
-

Commenti

-

I commenti nei CSS iniziano con /* e terminano con */. -

I commenti possono essere utilizzati sia per scrivere un vero e proprio commento al foglio di stile, sia per isolare temporaneamente alcune parti di codice per scopi di test. -

Per isolare una parte del foglio di stile è sufficiente porre quella parte all'interno di un commento. In tal modo il browser la ignorerà. Occorre prestare molta attenzione al punto di inizio e di fine del commento. -Il resto del documento deve continuare ad avere una sintassi corretta. -

- - -
Esempio -
Un commento vero e proprio: -
-
/* stile per la lettere iniziale C del primo paragrafo */
-.carrot {
-  color:            orange;
-  text-decoration:  underline;
-  font-style:       italic;
-  }
-
-
-

Un isolamento: -

-
-
/* isolo una porzione del codice
-.carrot {
-  color:            orange;
-  text-decoration:  underline;
-  font-style:       italic;
-  }
- */
-
-
-
-

Raggruppare i selettori

-

Se molti elementi hanno lo stesso stile è possibile raggruppare i selettori creando un gruppo separato da virgole. -La dichiarazione verrà applicata a tutti gli elementi selezionati. -

Altrove nel foglio di stile sarà anche possibile trattare individualmente gli stessi selettori, per applicare delle regole di stile personalizzate. -

- - -
Esempi -
Questa regola rende gli elementi H1, H2 e H3 dello stesso colore. -

E' comodo indicare tale colore in un solo posto per rendere più agevole e veloce l'eventuale modifica. -

-
-
/* colore dei titoli */
-h1, h2, h3 {color: navy;}
-
-
-
-

Azione: Aggiungere commenti e migliorare la struttura

-

Modifica il file CSS e assicurati che al suo interno contenga le seguenti regole (in qualsiasi ordine): -

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

Rendi il foglio di stile più leggibile strutturandolo nel modo che ritieni più logico ed aggiungendo spazi bianchi e commenti dove pare opportuno. -

Salva il file ed aggiorna la finestra del browser per assicurarti che i cambiamenti effettuati non influiscano sul funzionamento del foglio di stile: -

- - - - -
Cascading Style Sheets -
Cascading Style Sheets -
-


-

- - -
Esercizi -
Isola una parte del foglio di stile, senza modificare nient'altro, per rendere la prima lettera del documento rossa: - - - - -
Cascading Style Sheets -
Cascading Style Sheets -
-

(Esiste più di un modo per ottenere questo risultato.) -

-
-


-

-

Cos'altro?

-

Il foglio di stile dell'esempio utilizza solamente il testo corsivo (italic) o il testo sottolineato (underline). -La prossima pagina della guida spiega ulteriori modi per specificare l'aspetto del testo in un documento: -Stili del testo -

{{ languages( { "en": "en/CSS/Getting_Started/Readable_CSS", "fr": "fr/CSS/Premiers_pas/Des_CSS_lisibles", "pl": "pl/CSS/Na_pocz\u0105tek/Czytelny_CSS", "pt": "pt/CSS/Como_come\u00e7ar/CSS_leg\u00edvel" } ) }} diff --git a/files/it/conoscere_i_css/i_selettori/index.html b/files/it/conoscere_i_css/i_selettori/index.html deleted file mode 100644 index aece606365..0000000000 --- a/files/it/conoscere_i_css/i_selettori/index.html +++ /dev/null @@ -1,151 +0,0 @@ ---- -title: I Selettori -slug: Conoscere_i_CSS/I_Selettori -tags: - - Conoscere_i_CSS -translation_of: Learn/CSS/Building_blocks/Selectors -translation_of_original: Web/Guide/CSS/Getting_started/Selectors ---- -

-

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

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

-

Informazioni: I Selettori

-

I CSS hanno una terminologia propria per descrivere il linguaggio CSS. -Precedentemente in questa guida, abbiamo creato una stringa nel foglio di stile come questa: -

-
strong {color: red;}
-
-

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

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

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

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

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

-
-


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

In aggiunta al nome dei tag possono essere utilizzati anche i valori di alcuni attributi. Questa permette di usare i selettori in modo più specifico. -

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

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

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

L'attributo id di un tag serve ad assegnare un id al tag. Anche in questo caso il nome è a piacere, ma deve essere unico per un dato documento. -

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

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

L'id "principal" deve essere unica in tutto il documento ma gli altri tag nel documento potranno appartenere alla stessa classe ed avere quindi lo stesso valore dell'attributo class. -

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

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

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

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


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

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

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

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

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

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

-
-


-Se un foglio di stile contiene regole in conflitto e con lo stesso grado di specificità, avrà prevalenza la regola che viene dopo nel foglio di stile. -

Se si incontrano dei problemi con delle regole in conflitto si può provare a risolverli rendendo una delle due regole più specifica. Se ciò non è possibile, si può provare a spostare la regola che si intende far prevalere in fondo al foglio di stile, per far sì che abbia la priorità. -

-

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

-

Apri il file HTML e duplica il paragrafo facendo copia/incolla. -Quindi aggiungi gli attributi di id e class al primo paragrafo, e solo l'id al secondo, come mostrato sotto. In alternativa si può copiare e incollare quanto sotto, sostituendo l'intero file: -

-
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
-<HTML>
-  <HEAD>
-  <TITLE>Sample document</TITLE>
-  <LINK rel="stylesheet" type="text/css" href="style1.css">
-  </HEAD>
-  <BODY>
-    <P id="first">
-      <STRONG class="carrot">C</STRONG>ascading
-      <STRONG class="spinach">S</STRONG>tyle
-      <STRONG class="spinach">S</STRONG>heets
-    </P>
-    <P id="second">
-      <STRONG>C</STRONG>ascading
-      <STRONG>S</STRONG>tyle
-      <STRONG>S</STRONG>heets
-    </P>
-  </BODY>
-</HTML>
-
-
-

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

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

Aggiorna il browser per vedere il risultato: -

- - - - -
Cascading Style Sheets -
Cascading Style Sheets -
-


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

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

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

- - -
Esercizi -
Senza modificare il file HTML, aggiungi un unica regola al file CSS che mantenga il colore delle lettere iniziali, ma renda il testo del secondo paragrafo di colore blu: - - - - -
Cascading Style Sheets -
Cascading Style Sheets -
-

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

- - - - -
Cascading Style Sheets -
Cascading Style Sheets -
-
-


-

-

Cos'altro?

-

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

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

{{ languages( { "en": "en/CSS/Getting_Started/Selectors", "fr": "fr/CSS/Premiers_pas/Les_s\u00e9lecteurs", "pl": "pl/CSS/Na_pocz\u0105tek/Selektory", "pt": "pt/CSS/Como_come\u00e7ar/Seletores" } ) }} diff --git a/files/it/conoscere_i_css/index.html b/files/it/conoscere_i_css/index.html deleted file mode 100644 index 106bf156d6..0000000000 --- a/files/it/conoscere_i_css/index.html +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: Iniziare (Esercitazione di CSS) -slug: Conoscere_i_CSS -translation_of: Learn/CSS/First_steps -translation_of_original: Web/Guide/CSS/Getting_started ---- -

Rivolto ai principianti assoluti, questa esercitazione di CSS per principianti presenta il Cascading Style Sheets (CSS). Guida l'utente attraverso le caratteristiche di base del linguaggio con esempi pratici che possono essere provati sul proprio computer e illustra le caratteristiche standard di CSS che funzionano nei moderni browser.

- -

Questa esercitazione è principalmente per principianti di CSS, ma va bene anche per chi ha qualche conoscenza base di CSS. Se sei un esperto di CSS qusta esercitazione probabilmente non è molto utile, la pagina principale di CSS elenca risorse più avanzate.

- - - -

Di cosa hai bisogno per iniziare?

- -

Per ottenere il massimo da questa esercitazione, hai bisogno di un editor per file di testo e un moderno browser. Devi anche avere una minima conoscenza del loro utilizzo.

- -

Se non vuoi modificare i file, allora puoi anche solo leggere l'esercitazione e guardare le immagini, ma è il modo meno efficace per imparare.

- -

Nota:  CSS fornisce un modo di lavorare con il colore, quindi parte di questa esercitazione dipende dal colore. Puoi utilizzare queste parti dell'esercitazione semplicemente se ha un display a colori e una normale visione dei colori.

- -

Come utilizzare questa esercitazione

- -

Per utilizzare questa esercitazione, leggi le pagine attentamente e in sequenza. Se salti una pagina, ti potresti trovare in difficoltà nel compredere le pagine successive.

- -

In ogni pagina, puoi usare la sezione Informazioni per capire come funziona CSS. Usare la sezione Azione per provare ad utilizzare CSS sul proprio computer.

- -

Per mettere alla prova la propria comprensione, cogli la sfida alla fine di ogni pagina. Le soluzioni alle sfide sono linkate sotto le sfide stesse, quindi non si ha bisogno di guardarle se non lo si vuole.

- -

Per comprendere CSS in maggiore profondità, leggere le informazioni che si trovano nei box titolati Maggiori dettagli. Utilizzare i collegamenti presenti per trovare informazioni di riferimento su CSS.

- -

Esercitazione Parte II

- -

Una seconda parte dell'esercitazione fornisce esempi che mostrano la visibilità di CSS utilizzato con altre tecnologie web e Mozilla

- -
    -
  1. JavaScript
    2. -
  2. Grafica SVG
    3. -
  3. Dati XML
    4. -
  4. Collegamento XBL
    5. -
  5. Interfacce utente XUL
    6. -
- -

 

diff --git "a/files/it/conoscere_i_css/perch\303\251_usare_i_css/index.html" "b/files/it/conoscere_i_css/perch\303\251_usare_i_css/index.html" deleted file mode 100644 index 4048fe74e3..0000000000 --- "a/files/it/conoscere_i_css/perch\303\251_usare_i_css/index.html" +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: Perché usare i CSS -slug: Conoscere_i_CSS/Perché_usare_i_CSS -tags: - - Conoscere_i_CSS -translation_of: Learn/CSS/First_steps/How_CSS_works -translation_of_original: Web/Guide/CSS/Getting_started/Why_use_CSS ---- -

 

- -

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

- -

Informazioni: Perché usare i CSS?

- -

I CSS aiutano a mantenere le informazioni sul contenuto di un documento separate dai dettagli su come presentarlo. Le informazioni sulla presentazione del documento sono note come stile. Mantenere lo stile separato dal contenuto permette di:

- - - - - - - - - - -
Esempi
1) Il tuo sito web potrebbe avere migliaia di pagine che si assomigliano. Utilizzando i CSS si possono immagazzinare le informazioni sullo stile in dei file comuni che vengono condivisi da tutte le pagine. -

2) E' possibile creare differenti stili in modo che quando l'utente visualizza una pagina web, il browser carichi determinate informazioni sullo stile insieme al contenuto della pagina. Quando invece l'utente stampa la pagina web, venga fornito uno stile diverso che renda la pagina stampata più semplice da leggere.

-
- -

In linea di massima il linguaggio di markup è utilizzato per descrivere le informazioni sul contenuto di un documento, non il suo stile. I CSS, al contrario, definiscono lo stile, non il contenuto. (Più avanti nella guida vedremo qualche eccezione.)

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

Quando si utilizzano i CSS normalmente si evita di "sporcare" in questo modo il codice di markup, concentrando tutte le informazioni sullo stile in un solo posto, possibilmente separato.

-
- -

Azione: Creare un foglio di stile

- -

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

- -

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

- -
-
strong {color: red;}
-
-
- -

Collegare il foglio di stile al proprio documento

- -

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

- -
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
-<HTML>
-  <HEAD>
-  <TITLE>Sample document</TITLE>
-  <LINK rel="stylesheet" type="text/css" href="style1.css">
-  </HEAD>
-  <BODY>
-    <P>
-      <STRONG>C</STRONG>ascading
-      <STRONG>S</STRONG>tyle
-      <STRONG>S</STRONG>heets
-    </P>
-  </BODY>
-</HTML>
-
-
- -

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

- - - - - - - -
Cascading Style Sheets
- - - - - - - - -
Esercizi
Oltre al rosso ("red"), i CSS accettano altri nomi per indicare i colori (in inglese). Senza guardare una referenza, trova cinque o più nomi di colori che funzionino.
- -

 

- -

Cos'altro?

- -

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

- -

Ora che hai un documento di esempio collegato ad un foglio di stile separato, sei pronto per saperne di più su come il browser li combina quando visualizza il documento: Come funzionano i CSS

- -

{{ languages( { "en": "en/CSS/Getting_Started/Why_use_CSS", "fr": "fr/CSS/Premiers_pas/Pourquoi_utiliser_CSS", "ja": "ja/CSS/Getting_Started/Why_use_CSS", "pl": "pl/CSS/Na_pocz\u0105tek/Po_co_u\u017cywa\u0107_CSS", "pt": "pt/CSS/Como_come\u00e7ar/Porque_usar_CSS" } ) }}

diff --git a/files/it/costruire_e_decostruire_un_documento_xml/index.html b/files/it/costruire_e_decostruire_un_documento_xml/index.html deleted file mode 100644 index 563552085e..0000000000 --- a/files/it/costruire_e_decostruire_un_documento_xml/index.html +++ /dev/null @@ -1,1193 +0,0 @@ ---- -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/dare_una_mano_al_puntatore/index.html b/files/it/dare_una_mano_al_puntatore/index.html deleted file mode 100644 index b54d7a7367..0000000000 --- a/files/it/dare_una_mano_al_puntatore/index.html +++ /dev/null @@ -1,41 +0,0 @@ ---- -title: Dare una mano al puntatore -slug: Dare_una_mano_al_puntatore -tags: - - CSS - - Tutte_le_categorie -translation_of: Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property -translation_of_original: Giving_'cursor'_a_Hand ---- -

Un buon numero di sviluppatori ha chiesto quando Mozilla e Netscape 6+ abbiano pianificato di implementare il supporto per la proprietà cursor. Spesso si stupiscono di scoprire che entrambi i browser già la supportano. Comunque, ciò che non dovrebbe sorprendere è che il supporto è basato sulle specifiche approvate dal W3C per i CSS2.

-

Il problema di base è questo: Internet Explorer 5.x per Windows riconosce il valore hand, che non appare mai nella sezione 18.1 dei CSS2– ne' in altra specifica. Il valore che più si avvicina al comportamento di hand è pointer, che le specifiche definiscono così: "Il cursore è un puntatore che indica un collegamento". Si noti che non viene mai detto niente riguardo l'apparizione di una manina, anche se è ormai pratica convenzionale dei browser.

-

Sfortunatamente, IE5.x/Win non riconosce il valore pointer. Entrambi IE6/Win and IE5.x/Mac riconoscono pointer e hand, fortunatamente. D'altra parte, Mozilla e Netscape 6+ seguono la specifica CSS2 e gestiscono pointer, ignorando il valore proprietario hand.

-

Se Mozilla/Netscape ignorano hand e IE5.x/Win ignora pointer, come deve comportarsi uno sviluppatore? E' necessario specificare entrambi.

-
a { cursor: pointer; cursor: hand; }
-

Si faccia attenzione a non invertire i due valori! Scrivendo i fogli di stile come mostrato sopra, NS6+ mostrerà il primo valore e ignorerà il secondo, così si ottiene il valore pointer. IE5.x/Win riconosce entrambi ed userà il secondo, cioè hand. Invertendo i due valori, Netscape 6+ continuerà a lavorare interpretare correttamente lo stile, mentre IE5.x/Win tenterà di usare il secondo, senza ottenere il risultato voluto.

-

Con questo semplice metodo, è possibile assicurarsi la presenza della "manina" in ogni caso.

-

Una avvertenza: seguendo l'approccio raccomandato, il foglio di stile non passerà una eventuale validazione, dato che contiene un valore non permesso per la proprietà cursor. Gli sviluppatori sono quindi avvisati di prendere in considerazione questo inconveniente rispetto al vantaggio che porta la soluzione, quindi decidere cosa è più importante e procedere di conseguenza.

-

Testare il supporto

-

Vi chiedete come si comporti il vostro browser con hand e pointer? Provate direttamente a spostare il puntatore sulla tabella di test sotto riportata!

- - - - - - - - -
Questa cella ha lo stile cursor: pointer. Si dovrebbe ottenere un puntatore che cambia in una manina, su Mozilla e Netscape 6+, IE6/Win, and IE5.x/Mac, ma non in IE5.x/Win.Questa cella non ha uno stile cursor per cui il puntatore rimarrà quello standard.Questa cella ha uno stile cursor: hand. Si dovrebbe ottenere un puntatore che cambia in una manina, su IE5+/Win, ma non in Mozilla e Netscape 6+.
-

Collegamenti

- -
-

Original Document Information

- -
diff --git a/files/it/dhtml/index.html b/files/it/dhtml/index.html deleted file mode 100644 index fbc1dbcbe4..0000000000 --- a/files/it/dhtml/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: DHTML -slug: DHTML -tags: - - DHTML -translation_of: Glossary/DHTML ---- -

 

-
- DHTML è un acronimo per "Dynamic HTML", ovvero HTML Dinamico. DHTML è un termine impiegato per riferirsi al codice posto dietro quelle pagine web con un certo livello di interattività ottenuta senza l'uso di plugin o tecnologie come Flash o Java. Comunemente, questo termine indica l'insieme di funzionalità a disposizione di uno sviluppatore web che fa uso di HTML, CSS, DOM (Document Object Model, il Modello ad Oggetti per i Documenti), e JavaScript.
- - - - - - - -
-

Documentazione

-
-
- Manuale di riferimento del DOM nei client web
-
- Questo manuale di riferimento fornisce tutte le informazioni sugli oggetti comunemente usati in DHTML nei vari web client, allo scopo di fornire indicazioni su quali proprietà sono supportate nei vari browser.
-
-
-
- Esempi di DHTML usando DOM e Stili
-
- Dimostrazioni sul funzionamento del Modello ad Oggetti per i Documenti (DOM), esempi di codice funzionanti su qualsiasi browser, ed altre risorse per comprendere DOM e gli stili.
-
-
-
- en:Working around the Firefox 1.0.3 DHTML regression (en)
-
- Come aggirare le problematiche del DHTML presenti in Firefox 1.0.3. Si noti che gli argomenti coperti da questo articolo sono stati corretti in Firefox 1.0.4, e questo documento riguarda esclusivamente la versione 1.0.3 del browser.
-
-

Mostra tutto...

- 		-

Comunità

-
    -
  • View Mozilla forums...
    • -
-

{{ DiscussionList("dev-ajax", "mozilla.dev.ajax") }}

-

Tools

- - -
-
- AJAX, CSS, DOM, HTML, JavaScript
-
-
-

Categories

-

 

diff --git a/files/it/dom/index.html b/files/it/dom/index.html deleted file mode 100644 index 8b6769d83e..0000000000 --- a/files/it/dom/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: DOM -slug: DOM -translation_of: Glossary/DOM -translation_of_original: Document_Object_Model_(DOM) ---- -
- Utilizzare il DOM Base Livello 1 del W3C
- Introduzione al DOM di W3C.
-
-

Il Modello a Oggetti del Documento (DOM) è una API per documenti HTML e XML. Fornisce una rappresentazione strutturale del documento, permettendo la modifica del suo contenuto e la presentazione visuale utilizzando un linguaggio di script come JavaScript.

-
-
-
-

Documentazione sul DOM

-
-
- Riferimento al DOM di Gecko
-
- La guida di riferimento al Modello a Oggetti del Documento in Gecko.
-
- A proposito del Modello a Oggetti del Documento
-
- Una breve introduzione al DOM.
-
- Il DOM e JavaScript
-
- Cos'è il DOM? Cos'è JavaScript? Come usarli insieme nella pagina web? Questo documento risponde a queste ed altre domande.
-
- Utilizzare le informazioni di stile dinamiche
-
- Come ottenere informazioni e manipolare lo stile attraverso il DOM.
-
- Riferimento agli eventi del DOM
-
- Elenca tutti gli eventi del DOM e il loro significato.
-
- History API: Manipolare la cronologia del browser
-
- Illustra l'oggetto {{ domxref("window.history") }} introdotto dal DOM di HTML5, permettendo la modifica dinamica della cronologia del browser.
-
- File API: Utilizzare i file dalle applicazioni web
-
- Descrive la capacità introdotta da HTML5 di selezionare un file locale e leggere i dati da questo.
-
- Utilizzare la Page Visibility API
-
- Spiega come intercettare ed utilizzare le informazioni su una pagina web in primo piano o sullo sfondo.
-
- Fullscreen API: Utilizzare la modalità a pieno schermo
-
- Descrive come impostare un pagina che utilizza lo schermo intero, senza alcuna UI del browser intorno.
-
- Determinare la dimensione degli elementi
-
- Capire il modo giusto per determinare le dimensioni degli elementi, secondo le proprie necessità.
-
- Modificare dinamicamente l'interfaccia utente basata su XUL
-
- I principi della manipolazione della UI XUL con i metodi del DOM.
-
-

Vedi Tutto...

-
-
-

Ottenere aiuto dalla comunità

-

Hai bisogno di aiuto su una questione legata al DOM e non trovi la soluzione nella documentazione?

-
    -
  • Consulta la sezione del forum di Mozilla dedicata: {{ DiscussionList("dev-tech-dom", "mozilla.dev.tech.dom") }}
    • -
-

Strumenti che semplificano il lavoro con il DOM

- -

Vedi Tutto...

- - -
-
-

 

diff --git a/files/it/dom_inspector/index.html b/files/it/dom_inspector/index.html deleted file mode 100644 index d6566854ca..0000000000 --- a/files/it/dom_inspector/index.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: DOM Inspector -slug: DOM_Inspector -tags: - - 'DOM:Strumenti' - - Estensioni - - 'Estensioni:Strumenti' - - Strumenti - - Sviluppo_Web - - 'Sviluppo_Web:Strumenti' - - 'Temi:Strumenti' - - Tutte_le_categorie - - XUL - - 'XUL:Strumenti' -translation_of: Tools/Add-ons/DOM_Inspector ---- -

-

Il DOM Inspector (conosciuto anche con l'acronimo DOMi) è un tool di Mozilla usato per ispezionare, visualizzare, modificare il Modello a Oggetti di un Documento (DOM - Document Object Model), normalmente una pagina web o una finestra XUL. -

Per ulteriore informazioni sul DOMi, visitare la pagina del DOM Inspector su MozillaZine. -

Per utilizzare DOMi con Thunderbird 2.0 o superiore, occorre installare Thunderbird con le seguenti opzioni: -

-
ac_add_options --enable-extensions="default inspector"
-ac_add_options --enable-inspector-apis
-{{ languages( { "en": "en/DOM_Inspector", "fr": "fr/Inspecteur_DOM", "ja": "ja/DOM_Inspector", "pl": "pl/Inspektor_DOM", "ko": "ko/DOM_Inspector" } ) }} diff --git a/files/it/firefox_1.5_per_sviluppatori/index.html b/files/it/firefox_1.5_per_sviluppatori/index.html deleted file mode 100644 index 6c47af6552..0000000000 --- a/files/it/firefox_1.5_per_sviluppatori/index.html +++ /dev/null @@ -1,165 +0,0 @@ ---- -title: Firefox 1.5 per Sviluppatori -slug: Firefox_1.5_per_Sviluppatori -tags: - - Da_unire - - Sviluppo_Web - - Tutte_le_categorie -translation_of: Mozilla/Firefox/Releases/1.5 ---- -
{{FirefoxSidebar}}

Firefox 1.5

- -

Firefox 1.5 è stato rilasciato ed è disponibile per il download. Basato sul motore Gecko 1.8, questa ultima versione del browser migliora il supporto agli standard e fornisce nuove possibilità per implementare applicazioni web di ultima generazione. Le funzionalità di Firefox 1.5 comprendono un supporto più esteso ai CSS livello 2 e 3, API per applicazioni grafiche vettoriali 2D tramite SVG 1.1 e l'elemento <canvas>, eventi XForms e XML, oltre a miglioramenti per DHTML, JavaScript e DOM.

- -

Firefox 1.5 è disponibile per il download a questo indirizzo: http://www.mozilla.com/firefox/

- -

Strumenti di sviluppo

- -

Esistono diversi strumenti ed estensioni che possono essere d'aiuto agli sviluppatori per supportare Firefox 1.5.

- - - -

Nota: alcune estensioni potrebbero non supportare ancora Firefox 1.5 e potrebbero essere automaticamente disabilitate.

- -

Nota: non tutte le estensioni hanno una traduzione in italiano.

- -

Panoramica

- -

Alcune nuove funzionalità di Firefox 1.5.

- -

Sviluppatori di siti e applicazioni web

- -
-
Introduzione a SVG in HTML
-
impara a utilizzare JavaScript e i CSS per manipolare le immagini nello stesso modo in cui manipoleresti un normale documento XHTML. Vedi anche SVG in Firefox 1.5 per conoscere lo stato e i problemi conosciuti dell'implementazione di SVG in Firefox 1.5.
-
- -
-
Disegnare grafici con le Canvas
-
come utilizzare il nuovo tag <canvas> per disegnare grafici e altri oggetti.
-
- -
-
Le colonne CSS3
-
Il supporto per il testo multicolonna introdotto da CSS3.
-
- -
-
Usare la cache di Firefox 1.5
-
Come bfcache velocizza la navigazione coi tasti Indietro e Avanti
-
- -

Sviluppatori XUL e sviluppatori di estensioni

- -
-
Creare un'estensione
-
Questo tutorial spiega tutti i passi necessari per creare una semplicissima estensione per Firefox. Si veda anche another tutorial on MozillaZine knowledge base (EN), che illustra le nuove funzionalità dell'Extension Manager nell'1.5 e spiega come creare una nuova estensione ancora più facile.
-
- -
-
XPCNativeWrapper
-
XPCNativeWrapper è un modo per far sì che un oggetto sia accessibile in maniera sicura dal DOM. Si può utilizzare in tutte le versioni di Firefox, sebbene il suo comportamento sia leggermente cambiato in Firefox 1.5.
-
- -
-
Sistema di Preferenze
-
Illustra i nuovi widget che permettono di creare finestre di opzioni in maniera molto semplice e utilizzando poco codice JavaScript.
-
- -
-
Caratteri internazionali nel JavaScript di XUL
-
i file JavaScript delle applicazioni XUL ora possono contenere caratteri non ASCII.
-
- -
-
Cambiementi nell'API di Tree
-
Le interfacce per accedere all'elemento XUL <tree> sono cambiate.
-
- -
-
Modifiche a XUL in Firefox 1.5
-
Un sommario dei cambiamenti di XUL. Si veda anche Adattare le applicazioni XUL per Firefox 1.5.
-
- -
-
Modifiche relative al networking
-
 
-
- - - -

Nuove funzionalità per gli utenti finali

- -

Esperienza utente

- - - -

Sicurezza e Privacy

- - - -

Supporto agli standard

- -

Firefox offre un supporto coerente multipiattaforma per i seguenti standard del web:

- - - -

Firefox 1.5 supporta anche:

- - - -

Cambiamenti da Firefox 1.0

- -

Sono stati introdotti diversi cambiamenti in Firefox dalla sua prima release il 9 novembre 2004. Questo browser ha visto molti progressi, molte nuove funzionalità e sono stati corretti molti bug. Lerelease notes sono un'eccellente fonte di informazioni sulle modifiche che sono state apportate:

- - - -

Nota: le note di rilascio qui linkate sono tutte in inglese.

- -

{{ languages( { "en": "en/Firefox_1.5_for_Developers", "es": "es/Firefox_1.5_para_Desarrolladores", "fr": "fr/Firefox_1.5_pour_les_d\u00e9veloppeurs", "ja": "ja/Firefox_1.5_for_Developers", "nl": "nl/Firefox_1.5_voor_ontwikkelaars", "pl": "pl/Firefox_1.5_dla_programist\u00f3w", "pt": "pt/Firefox_1.5_para_Desenvolvedores" } ) }}

diff --git a/files/it/firefox_18_for_developers/index.html b/files/it/firefox_18_for_developers/index.html deleted file mode 100644 index 41af59d3c9..0000000000 --- a/files/it/firefox_18_for_developers/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: Firefox 18 per sviluppatori -slug: Firefox_18_for_developers -tags: - - Firefox - - Firefox 18 -translation_of: Mozilla/Firefox/Releases/18 ---- -
{{FirefoxSidebar}}

{{ draft() }}

- -

Firefox 18 è stato pubblicato l'8 gennaio 2013. In questo articolo sono elencate le modifiche principali che sono utili non solo per gli sviluppatori web, ma anche gli sviluppatori di Firefox e Gecko così come add-on per gli sviluppatori.
-
- Vuoi aiutare la documentazione di Firefox 18? lista dei bug su cui bisogna scrivere (Vedi l'elenco dei bug )

- -

Modifiche per gli sviluppatori Web

- -

HTML

- - - -

CSS

- - - -

 DOM

- - - -

JavaScript

- - - -

WebGL

- -

SVG

- -

MathML

- -

XUL

- -

Network

- - - -

Strumenti di sviluppo

- -

Novità per add-on e sviluppatori Mozilla

- -

Novità dell'Interfaccia

- -
-
{{ interface("nsIStreamListener") }}
-
The 4th parameter (aOffset) of onDataAvailable() method changes to unsigned long long. ({{bug("784912")}})
-
{{ interface("nsIUploadChannel") }}
-
setUploadStream() supports over 2GB content-length ({{bug("790617")}})
-
{{ interface("nsIEditor") }}
-
addEditorObserver() has been removed, use setEditorObserver() instead, removeEditorObserver() no longer takes a {{ interface("nsIEditorObserver") }} parameter ({{bug("785091")}})
-
- -
-
{{ interface("nsIHttpProtocolHandler") }}
-
http-on-modify-request observers are no longer guaranteed to be called synchronously during
- nsIChannel.asyncOpen(). For observers that need to be called during asyncOpen(), the new http-on-opening-request observer topic has been added.  See ({{bug("800799")}})
-
- -

New interfaces

- -

Removed interfaces

- -

The following interfaces have been removed.

- - - -

See also

- - - -

Older versions

- -

{{Firefox_for_developers('17')}}

diff --git a/files/it/firefox_2.0_per_sviluppatori/index.html b/files/it/firefox_2.0_per_sviluppatori/index.html deleted file mode 100644 index 4f8d46f2cf..0000000000 --- a/files/it/firefox_2.0_per_sviluppatori/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: Firefox 2.0 per Sviluppatori -slug: Firefox_2.0_per_Sviluppatori -tags: - - Sviluppo_Web - - Tutte_le_categorie -translation_of: Mozilla/Firefox/Releases/2 ---- -
{{FirefoxSidebar}}

Nuove funzionalità per sviluppatori in Firefox 2

- -

Firefox 2 introduce una vasta gamma di nuove funzionalità. Questo articolo fornisce i link alle rispettive pagine.

- -

Per gli sviluppatori di siti web e di applicazioni

- -
-
Microsummaries (EN)
-
I microsommari sono informazioni importanti regolarmente aggiornate e succinte riguardo alle pagine web. Sia un sito che degli sviluppatori esterni possono fornirle e gli utenti possono scegliere di visualizzare i microsommari invece dei titoli statici nei bookmark.
-
- -
-
Creare un Microsommario
-
Un tutorial che insegna a creare un generatore di microsommari.
-
- -
-
Creare Plugin MozSearch
-
Firefox 2 supporta MozSearch, un formato per i plugin di ricerca basato su OpenSearch.
-
- -
-
Supportare i suggerimenti nei plugin di ricerca
-
Come permettere ai plugin in MozSearch di supportare i suggerimenti di ricerca, che appaiono in una casella popup mentre di scrive nella barra di ricerca.
-
- -
-
Novità in JavaScript 1.7
-
Firefox 2 supporta JavaScript 1.7, che comprende nuove funzionalità come let, assegnamento destrutturato, generatori e iteratori.
-
- -
-
WHATWG Client-side session and persistent storage (EN)
-
La persistenza dei dati permette alle applicazioni web di immagazzinare dati strutturati nel browser.
-
- -
-
SVG in Firefox
-
Firefox 2 migliora il supporto a Scalable Vector Graphics (SVG), implementando l'elemento <textPath> e aggiungendo il supporto ad alcuni attributi precedentemente ignorati.
-
- -

Per gli sviluppatori di applicazioni XUL e di estensioni

- -
-
Session restore API
-
Aiuta a salvare e recuperare successivamente i dati di sessione in sessione.
-
- -
-
Feed content access API
-
Questa API è ancora in stato di revisione; la documentazione verrà pubblicata in futuro.
-
- -
-
Supporto a SAX
-
API di un parser XML basata sugli eventi.
-
- -
-
Installare plugin di ricerca dalle pagine web
-
E' possibile installare in Firefox un nuovo motore di ricerca tramite JavaScript. Il plugin di ricerca può essere scritto utilizzando anche OpenSearch o il formato Sherlock.
-
- -
-
Aggiungere fornitori di dati anti-phishing
-
E' possibile migliorare la protezione anti-phishing aggiungendo alcuni fornitori di fati per la navigazione sicura.
-
- -
-
mozStorage
-
Firefox 2 introduce mozStorage, un'architettura di database basata su SqlLite.
-
- -
-
Le pratiche migliori per il versioning delle estensioni
-
Come utilizzare i numeri di versione.
-
- -

Nuove funzionalità per gli utenti finali

- -

Firefox 2 offre una versione migliorata dell'interfaccia utente impiegata nelle versioni precedenti, a cui sono state aggiunte varie caratteristiche di sicurezza finalizzate a rendere la vostra navigazione più semplice e piacevole di prima.

- -

Esperienza utente

- - - -

Sicurezza e Privacy

- - - -

Argomenti correlati

- - - -

{{ languages( { "en": "en/Firefox_2_for_developers", "fr": "fr/Firefox_2_pour_les_d\u00e9veloppeurs", "ja": "ja/Firefox_2_for_developers", "pt": "pt/Firefox_2_para_desenvolvedores" } ) }}

diff --git a/files/it/gli_user_agent_di_gecko/index.html b/files/it/gli_user_agent_di_gecko/index.html deleted file mode 100644 index 0c4a3c17e2..0000000000 --- a/files/it/gli_user_agent_di_gecko/index.html +++ /dev/null @@ -1,40 +0,0 @@ ---- -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 .

- - - -

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/glossary/dhtml/index.html b/files/it/glossary/dhtml/index.html new file mode 100644 index 0000000000..fbc1dbcbe4 --- /dev/null +++ b/files/it/glossary/dhtml/index.html @@ -0,0 +1,56 @@ +--- +title: DHTML +slug: DHTML +tags: + - DHTML +translation_of: Glossary/DHTML +--- +

 

+
+ DHTML è un acronimo per "Dynamic HTML", ovvero HTML Dinamico. DHTML è un termine impiegato per riferirsi al codice posto dietro quelle pagine web con un certo livello di interattività ottenuta senza l'uso di plugin o tecnologie come Flash o Java. Comunemente, questo termine indica l'insieme di funzionalità a disposizione di uno sviluppatore web che fa uso di HTML, CSS, DOM (Document Object Model, il Modello ad Oggetti per i Documenti), e JavaScript.
+ + + + + + + +
+

Documentazione

+
+
+ Manuale di riferimento del DOM nei client web
+
+ Questo manuale di riferimento fornisce tutte le informazioni sugli oggetti comunemente usati in DHTML nei vari web client, allo scopo di fornire indicazioni su quali proprietà sono supportate nei vari browser.
+
+
+
+ Esempi di DHTML usando DOM e Stili
+
+ Dimostrazioni sul funzionamento del Modello ad Oggetti per i Documenti (DOM), esempi di codice funzionanti su qualsiasi browser, ed altre risorse per comprendere DOM e gli stili.
+
+
+
+ en:Working around the Firefox 1.0.3 DHTML regression (en)
+
+ Come aggirare le problematiche del DHTML presenti in Firefox 1.0.3. Si noti che gli argomenti coperti da questo articolo sono stati corretti in Firefox 1.0.4, e questo documento riguarda esclusivamente la versione 1.0.3 del browser.
+
+

Mostra tutto...

+ 		+

Comunità

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

{{ DiscussionList("dev-ajax", "mozilla.dev.ajax") }}

+

Tools

+ + +
+
+ AJAX, CSS, DOM, HTML, JavaScript
+
+
+

Categories

+

 

diff --git a/files/it/glossary/dom/index.html b/files/it/glossary/dom/index.html new file mode 100644 index 0000000000..8b6769d83e --- /dev/null +++ b/files/it/glossary/dom/index.html @@ -0,0 +1,84 @@ +--- +title: DOM +slug: DOM +translation_of: Glossary/DOM +translation_of_original: Document_Object_Model_(DOM) +--- +
+ Utilizzare il DOM Base Livello 1 del W3C
+ Introduzione al DOM di W3C.
+
+

Il Modello a Oggetti del Documento (DOM) è una API per documenti HTML e XML. Fornisce una rappresentazione strutturale del documento, permettendo la modifica del suo contenuto e la presentazione visuale utilizzando un linguaggio di script come JavaScript.

+
+
+
+

Documentazione sul DOM

+
+
+ Riferimento al DOM di Gecko
+
+ La guida di riferimento al Modello a Oggetti del Documento in Gecko.
+
+ A proposito del Modello a Oggetti del Documento
+
+ Una breve introduzione al DOM.
+
+ Il DOM e JavaScript
+
+ Cos'è il DOM? Cos'è JavaScript? Come usarli insieme nella pagina web? Questo documento risponde a queste ed altre domande.
+
+ Utilizzare le informazioni di stile dinamiche
+
+ Come ottenere informazioni e manipolare lo stile attraverso il DOM.
+
+ Riferimento agli eventi del DOM
+
+ Elenca tutti gli eventi del DOM e il loro significato.
+
+ History API: Manipolare la cronologia del browser
+
+ Illustra l'oggetto {{ domxref("window.history") }} introdotto dal DOM di HTML5, permettendo la modifica dinamica della cronologia del browser.
+
+ File API: Utilizzare i file dalle applicazioni web
+
+ Descrive la capacità introdotta da HTML5 di selezionare un file locale e leggere i dati da questo.
+
+ Utilizzare la Page Visibility API
+
+ Spiega come intercettare ed utilizzare le informazioni su una pagina web in primo piano o sullo sfondo.
+
+ Fullscreen API: Utilizzare la modalità a pieno schermo
+
+ Descrive come impostare un pagina che utilizza lo schermo intero, senza alcuna UI del browser intorno.
+
+ Determinare la dimensione degli elementi
+
+ Capire il modo giusto per determinare le dimensioni degli elementi, secondo le proprie necessità.
+
+ Modificare dinamicamente l'interfaccia utente basata su XUL
+
+ I principi della manipolazione della UI XUL con i metodi del DOM.
+
+

Vedi Tutto...

+
+
+

Ottenere aiuto dalla comunità

+

Hai bisogno di aiuto su una questione legata al DOM e non trovi la soluzione nella documentazione?

+
    +
  • Consulta la sezione del forum di Mozilla dedicata: {{ DiscussionList("dev-tech-dom", "mozilla.dev.tech.dom") }}
    • +
+

Strumenti che semplificano il lavoro con il DOM

+ +

Vedi Tutto...

+ + +
+
+

 

diff --git a/files/it/glossary/header_di_risposta/index.html b/files/it/glossary/header_di_risposta/index.html deleted file mode 100644 index 6363a8b84a..0000000000 --- a/files/it/glossary/header_di_risposta/index.html +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: Header di risposta -slug: Glossary/Header_di_risposta -tags: - - Glossário -translation_of: Glossary/Response_header ---- -

Un header di risposta è un {{glossary("header", "HTTP header")}} che può essere utilizzato in una risposta HTTP e che non fa riferimento al contenuto del messaggio. Gli header di risposta, come {{HTTPHeader("Age")}}, {{HTTPHeader("Location")}} o {{HTTPHeader("Server")}} sono usati per fornire un contesto della risposta più dettagliato.

- -

Non tutti gli header che compaiono in una risposta sono header di risposta. Ad esempio, l'header {{HTTPHeader("Content-Length")}} è un {{glossary("entity header")}} che fa riferimento alla dimensione del corpo del messaggio di risposta. Tuttavia queste entità sono chiamate solitamente header di risposta in questo contesto.

- -

Di seguito sono mostrati alcuni header di risposta dopo una richiesta {{HTTPMethod("GET")}} . Si noti che, strettamente parlando, gli header {{HTTPHeader("Content-Encoding")}} e {{HTTPHeader("Content-Type")}} sono {{glossary("entity headers")}}:

- -
200 OK
-Access-Control-Allow-Origin: *
-Connection: Keep-Alive
-Content-Encoding: gzip
-Content-Type: text/html; charset=utf-8
-Date: Mon, 18 Jul 2016 16:06:00 GMT
-Etag: "c561c68d0ba92bbeb8b0f612a9199f722e3a621a"
-Keep-Alive: timeout=5, max=997
-Last-Modified: Mon, 18 Jul 2016 02:36:04 GMT
-Server: Apache
-Set-Cookie: mykey=myvalue; expires=Mon, 17-Jul-2017 16:06:00 GMT; Max-Age=31449600; Path=/; secure
-Transfer-Encoding: chunked
-Vary: Cookie, Accept-Encoding
-X-Backend-Server: developer2.webapp.scl3.mozilla.com
-X-Cache-Info: not cacheable; meta data too large
-X-kuma-revision: 1085259
-x-frame-options: DENY
- -

Scopri di più

- -

Conoscenza tecnica

- - diff --git a/files/it/glossary/localization/index.html b/files/it/glossary/localization/index.html new file mode 100644 index 0000000000..678f3670ed --- /dev/null +++ b/files/it/glossary/localization/index.html @@ -0,0 +1,10 @@ +--- +title: Localization +slug: Localization +tags: + - Da_unire + - Tutte_le_categorie +translation_of: Glossary/Localization +--- +

La localizzazione è il processo di traduzione delle interfacce utente di un software da un linguaggio a un altro adattandolo anche a una cultura straniera. Queste risorse servono ad aiutare la localizzazione delle applicazioni e delle estensioni basate su Mozilla.

+

{{ languages( { "es": "es/Localizaci\u00f3n", "fr": "fr/Localisation", "ja": "ja/Localization", "pl": "pl/Lokalizacja", "pt": "pt/Localiza\u00e7\u00e3o" } ) }}

diff --git a/files/it/glossary/protocol/index.html b/files/it/glossary/protocol/index.html new file mode 100644 index 0000000000..d764b42322 --- /dev/null +++ b/files/it/glossary/protocol/index.html @@ -0,0 +1,27 @@ +--- +title: protocollo +slug: Glossary/Protocollo +tags: + - Glossário + - Infrastruttura + - Protocolli +translation_of: Glossary/Protocol +--- +

Un protocollo è un sistema di regole che stabilisce come vengono scambiati i dati fra computer diversi o all’interno dello stesso computer. Per comunicare tra loro, i dispositivi devono scambiarsi i dati in un formato comune. L’insieme delle regole che definisce un formato si chiama protocollo.

+ +

Vedi altro

+ +

Conoscenze generali

+ + + +

Vedi anche

+ + diff --git a/files/it/glossary/protocollo/index.html b/files/it/glossary/protocollo/index.html deleted file mode 100644 index d764b42322..0000000000 --- a/files/it/glossary/protocollo/index.html +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: protocollo -slug: Glossary/Protocollo -tags: - - Glossário - - Infrastruttura - - Protocolli -translation_of: Glossary/Protocol ---- -

Un protocollo è un sistema di regole che stabilisce come vengono scambiati i dati fra computer diversi o all’interno dello stesso computer. Per comunicare tra loro, i dispositivi devono scambiarsi i dati in un formato comune. L’insieme delle regole che definisce un formato si chiama protocollo.

- -

Vedi altro

- -

Conoscenze generali

- - - -

Vedi anche

- - diff --git a/files/it/glossary/response_header/index.html b/files/it/glossary/response_header/index.html new file mode 100644 index 0000000000..6363a8b84a --- /dev/null +++ b/files/it/glossary/response_header/index.html @@ -0,0 +1,38 @@ +--- +title: Header di risposta +slug: Glossary/Header_di_risposta +tags: + - Glossário +translation_of: Glossary/Response_header +--- +

Un header di risposta è un {{glossary("header", "HTTP header")}} che può essere utilizzato in una risposta HTTP e che non fa riferimento al contenuto del messaggio. Gli header di risposta, come {{HTTPHeader("Age")}}, {{HTTPHeader("Location")}} o {{HTTPHeader("Server")}} sono usati per fornire un contesto della risposta più dettagliato.

+ +

Non tutti gli header che compaiono in una risposta sono header di risposta. Ad esempio, l'header {{HTTPHeader("Content-Length")}} è un {{glossary("entity header")}} che fa riferimento alla dimensione del corpo del messaggio di risposta. Tuttavia queste entità sono chiamate solitamente header di risposta in questo contesto.

+ +

Di seguito sono mostrati alcuni header di risposta dopo una richiesta {{HTTPMethod("GET")}} . Si noti che, strettamente parlando, gli header {{HTTPHeader("Content-Encoding")}} e {{HTTPHeader("Content-Type")}} sono {{glossary("entity headers")}}:

+ +
200 OK
+Access-Control-Allow-Origin: *
+Connection: Keep-Alive
+Content-Encoding: gzip
+Content-Type: text/html; charset=utf-8
+Date: Mon, 18 Jul 2016 16:06:00 GMT
+Etag: "c561c68d0ba92bbeb8b0f612a9199f722e3a621a"
+Keep-Alive: timeout=5, max=997
+Last-Modified: Mon, 18 Jul 2016 02:36:04 GMT
+Server: Apache
+Set-Cookie: mykey=myvalue; expires=Mon, 17-Jul-2017 16:06:00 GMT; Max-Age=31449600; Path=/; secure
+Transfer-Encoding: chunked
+Vary: Cookie, Accept-Encoding
+X-Backend-Server: developer2.webapp.scl3.mozilla.com
+X-Cache-Info: not cacheable; meta data too large
+X-kuma-revision: 1085259
+x-frame-options: DENY
+ +

Scopri di più

+ +

Conoscenza tecnica

+ + diff --git a/files/it/glossary/xhtml/index.html b/files/it/glossary/xhtml/index.html new file mode 100644 index 0000000000..ea600cce7c --- /dev/null +++ b/files/it/glossary/xhtml/index.html @@ -0,0 +1,26 @@ +--- +title: XHTML +slug: XHTML +tags: + - Tutte_le_categorie + - XHTML +translation_of: Glossary/XHTML +--- +

+

XHTML sta a XML come HTML sta a SGML. Questo significa che XHTML è un linguaggio a markup simile a HTML, ma con una sintassi più rigida. Le due versioni di XHTML definite dal W3C sono: +

+ +

Una terza versione, XHTML 2, che comprende modifiche significative al vocabolario degli elementi, è attualmente in sviluppo. +

Per ulteriori informazioni si veda: +

+ +

Strumenti

+ +{{ languages( { "en": "en/XHTML", "es": "es/XHTML", "fr": "fr/XHTML", "pt": "pt/XHTML" } ) }} diff --git a/files/it/indentazione_corretta_delle_liste/index.html b/files/it/indentazione_corretta_delle_liste/index.html deleted file mode 100644 index 0825377b03..0000000000 --- a/files/it/indentazione_corretta_delle_liste/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -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/installare_plugin_di_ricerca_dalle_pagine_web/index.html b/files/it/installare_plugin_di_ricerca_dalle_pagine_web/index.html deleted file mode 100644 index 87aa850da0..0000000000 --- a/files/it/installare_plugin_di_ricerca_dalle_pagine_web/index.html +++ /dev/null @@ -1,34 +0,0 @@ ---- -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);
-
- -

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/introduzione_a_svg_dentro_xhtml/index.html b/files/it/introduzione_a_svg_dentro_xhtml/index.html deleted file mode 100644 index b277a2fc86..0000000000 --- a/files/it/introduzione_a_svg_dentro_xhtml/index.html +++ /dev/null @@ -1,50 +0,0 @@ ---- -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/le_colonne_nei_css3/index.html b/files/it/le_colonne_nei_css3/index.html deleted file mode 100644 index 7b92b713a0..0000000000 --- a/files/it/le_colonne_nei_css3/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -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/learn/accessibility/accessibility_troubleshooting/index.html b/files/it/learn/accessibility/accessibility_troubleshooting/index.html new file mode 100644 index 0000000000..8c0e97dab4 --- /dev/null +++ b/files/it/learn/accessibility/accessibility_troubleshooting/index.html @@ -0,0 +1,113 @@ +--- +title: 'Test di valutazione: risoluzione di problemi di accessibilità' +slug: Learn/Accessibilità/Accessibilità_test_risoluzione_problemi +tags: + - Accessibilità + - CSS + - HTML + - JavaScript + - Principiante + - Test di valutazione + - WAI-ARIA +translation_of: Learn/Accessibility/Accessibility_troubleshooting +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/Accessibilità/Accessibilità_dispositivi_mobili", "Learn/Accessibilità")}}
+ +

Nella sezione di valutazione di questo modulo ti proponiamo un semplice sito web che presenta alcuni problemi di accessibilità che devi individuare e risolvere.

+ + + + + + + + + + + + +
Prerequisiti:Conoscimenti basici sull'uso del computer, livello basico di HTML, CSS e JavaScript, e aver letto i  precedenti articoli del corso.
Obiettivo:Mettere alla prova la tua preparazione su alcuni aspetti fondamentali dell’accessibilità.
+ +

Punto di partenza

+ +

 

+ +

Come primo passo, dovresti scaricare l’archivio ZIP contenente i file che compongono il sito di esempio. Decomprimi l’archivio in una cartella locale sul tuo computer.

+ +

Il risultato finale del test dovrebbe apparire così:

+ +

 

+ +

+ +

Inizialmente aprendo il sito d’esempio nel tuo browser vedrai che appare diverso in alcuni aspetti dall’immagine del risultato finale. Ciò è dovuto al fatto che il codice sorgente di partenza contiene differenze rispetto a quello a cui vogliamo arrivare, differenze che si riflettono nel modo in cui CSS fa visualizzare il sito. Non ti preoccupare, nelle sezioni seguenti sistemeremo tutti questi problemi.

+ +

Schema del progetto

+ +

Il punto di partenza è un immaginario sito sulla natura che mostra un articolo sugli orsi. Il sito presenta numerosi problemi di accessibilità. Il tuo compito è individuarli e, per quanto possibile, risolverli. Usa le domande riportate qui sotto come guida.

+ +

Colori

+ +

Allo stato attuale il testo è di difficile lettura, a causa dello schema di colori in uso. Puoi effettuare un test del contrasto dei colori (colore del testo/colore di fondo) e sistemare il problema cambiando i colori usati?

+ +

HTML semantico

+ +
    +
  1. Il contenuto continua ad essere poco accessibile. Fai una prova di navigazione con un lettore di schermo.
    2. +
  2. Puoi aggiornare il testo dell’articolo per renderlo più facilmente navigabile tramite lettore di schermo?
    3. +
  3. Il menu di navigazione (racchiuso tra le etichette <div class="nav"> e </div>) potrebbe essere reso più accessibile usando un elemento semantico HTML5 appropriato. Di quale elemento si tratta? Aggiorna il menu usando l’elemento appropriato.
    4. +
+ +
+

Nota: dovrai anche aggiornare i selettori CSS che controllano lo stile del contenitore del menu di navigazione.

+
+ +

Le immagini

+ +

Allo stato attuale le immagini sono inaccessibili agli utenti che usano lettore di schermo. Puoi risolvere questo problema?

+ +

Il lettore audio

+ +
    +
  1. Il lettore <audio> non è accessibile alle persone con disabilità uditiva. Puoi aggiungere una alternativa accessibile a questo tipo di utenti?
    2. +
  2. Il lettore <audio> non è accessibile agli utenti che usano browser che non supportano l’audio HTML5. Cosa puoi fare per permettere anche a questi utenti di accedere al contenuto audio?
    3. +
+ +

I formulari

+ +
    +
  1. Sarebbe utile aggiungere un’etichetta all’elemento <input> della barra di ricerca, ma non vogliamo usare un’etichetta visibile, che potrebbe rovinare il disegno della pagina e non è realmente necessaria agli utenti che vedono. Come puoi aggiungere un’etichetta che sia accessibile solo ai lettori di schermo?
    2. +
  2. I due elementi <input> del formulario di commento hanno etichette testuali, ma queste etichette non sono associate ai loro relativi campi in una forma che si possa definire completamente non ambigua. Come puoi risolvere questa imprecisione? Nota che dovrai aggiornare anche alcune regole CSS.
    3. +
+ +

Il bottone mostra/nascondi commenti

+ +

Il bottone mostra/nascondi commenti non è attualmente accessibile tramite tastiera. Puoi renderlo accessibile da tastiera, rendendolo sia selezionabile tramite tasto TAB che attivabile tramite tasto INVIO?

+ +

La tabella

+ +

La tabella dati non è molto accessibile. Risulta difficile per gli utenti che usano lettore di schermo distinguere file e colonne, e inoltre la tabella non ha associata nessuna forma di didascalia che spieghi chiaramente a cosa fa riferimento. Puoi aggiungere tali funzionalità al codice HTML per risolvere questi problemi?

+ +

Altre considerazioni?

+ +

Puoi indicare due ulteriori idee per rendere il sito più accessibile?

+ +

Valutazione

+ +

Se stai sostenendo questa prova di valutazione come parte di un corso organizzato puoi mandare il tuo progetto al tuo insegnante perchè lo valuti. Se invece stai studiando per conto tuo, puoi ricevere una guida alla valutazione richiedendola nel forum di discussione su questo esercizio, o nel canale IRC #mdn su Mozilla IRC. In ogni caso, raccomandiamo di non guardare le soluzioni senza prima fare uno sforzo per risolvere gli esercizi per conto tuo.

+ +

{{PreviousMenu("Learn/Accessibilità/Accessibilità_dispositivi_mobili", "Learn/Accessibilità")}}

+ +

In questo modulo

+ + diff --git a/files/it/learn/accessibility/css_and_javascript/index.html b/files/it/learn/accessibility/css_and_javascript/index.html new file mode 100644 index 0000000000..6f5e69fea4 --- /dev/null +++ b/files/it/learn/accessibility/css_and_javascript/index.html @@ -0,0 +1,359 @@ +--- +title: Linee guida di accessibilità per CSS e JavaScript +slug: Learn/Accessibilità/CSS_e_JavaScript_accessibilità +tags: + - Accessibilità + - Articolo + - CSS + - Guida + - JavaScript + - colore + - contrasto + - imparare + - nascondere + - non intrusivo +translation_of: Learn/Accessibility/CSS_and_JavaScript +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Accessibilità/HTML_accessibilità","Learn/Accessibility/WAI-ARIA_basics", "Learn/Accessibilità")}}
+ +

CSS e JavaScript, quando utilizzati propriamente, possono contribuire ad offrire una esperienza accessibile della rete. Se invece vengono utilizzati in maniera incorretta possono causare una drastica riduzione dell'accessibilità. Questo articolo riporta alcune linee guida per l'utilizzo di CSS e JavaScript che devono essere tenute in considerazione per permettere a contenuti anche molto complessi di avere il più alto grado di accessibilità possibile.

+ + + + + + + + + + + + +
Prerequisiti:Conoscimenti basici sull'uso del computer, livello basico di HTML, CSS e JavaScript e una idea chiara di cosa è l'accessibilità.
Obiettivo:Imparare le basi di come utilizzare CSS e JavaScript correttamente per massimizzare l'accessibilità dei propri siti e allo stesso tempo evitare errori che potrebbero ridurla.
+ +

CSS e JavaScript sono accessibili?

+ +

CSS e JavaScript non hanno per l'accessibilità lo stesso livello di importanza che ha HTML, ma possono comunque arrecare grandi danni se usati impropriamente. Per dirlo in un'altra maniera, è importante che tu apprenda alcune linee guida sull'uso di CSS e JavaScript, per evitare di rovinare l'accessibilità dei tuoi documenti web.

+ +

CSS

+ +

Cominciamo col dare un'occhiata a CSS.

+ +

Semantiche corrette e aspettative dell'utente

+ +

È possibile usare CSS per modificare in qualsiasi modo l'aspetto di qualsiasi elemento HTML, ma questo non significa che lo devi fare obbligatoriamente. Come abbiamo detto più volte nell'articolo HTML: una buona base per l'accessibilità, dovresti utilizzare sempre l'elemento semantico più appropriato per ogni situazione, a meno che sia davvero impossibile. Se non lo fai, puoi causare confusione e problemi di usabilità a tutti gli utenti, e in particolare a quelli con disabilità. Usare le semantiche corrette significa soprattutto venire incontro alle aspettative degli utenti: gli elementi devono apparire e funzionare secondo certi criteri, a seconda della loro funzione, e gli utenti si aspettano che queste convenzioni siano rispettate. 

+ +

Per esempio, un utente che usa lettore di schermo non può navigare una pagina attraverso gli elementi di heading se lo sviluppatore del sito non ha usato gli heading appropriati per etichettare il contenuto. Allo stesso modo, un heading perde la sua funzione visuale se lo hai modificato fino al punto in cui non appare più come un heading.

+ +

La regola generale è che puoi modificare lo stile di un elemento perchè sia congruente con lo stile generale del tuo sito, ma non modificarlo tanto da far si che non appaia o agisca come ci si aspetterebbe. Le sezioni seguenti riassumono i principali elementi HTML da prendere in considerazione.

+ +

Struttura del contenuto testuale "standard"

+ +

Heading, paragrafi, liste... Il contenuto testuale principale della tua pagina:

+ +
<h1>Heading</h1>
+
+<p>Paragrafo</p>
+
+<ul>
+  <li>Lista</li>
+  <li>Lista di due elementi.</li>
+</ul>
+ +

Un codice CSS tipico potrebbe essere il seguente:

+ +
h1 {
+  font-size: 5rem;
+}
+
+p, li {
+  line-height: 1.5;
+  font-size: 1.6rem;
+}
+ +

Dovresti:

+ + + +

Vedi gli articoli in inglese  Fondamenti di testo in HTML e Modificare lo stile del testo per maggiori informazioni.

+ +

Testo enfatizzato

+ +

L'etichetta <em> conferisce enfasi al testo, mostrandolo in corsivo. L'etichetta <strong> ha lo stesso scopo, ma mostra il testo in grassetto:

+ +
<p>L'acqua è <em>molto calda</em>.</p>
+
+<p>Le gocce d'acqua che si formano su una suoerficie sono chiamate <strong>condensa</strong>.</p>
+ +

Potresti aggiungere un colore particolare per il testo in evidenza:

+ +
strong, em {
+  color: #a60000;
+}
+ +

Ad ogni modo, raramente avrai bisogno di modificare lo stile di elementi enfatizzati. Gli stili standard grassetto e corsivo sono molto riconoscibili, e modificarli potrebbe creare confusione. Per maggiori informazioni sull'enfasi vedi l'articolo in inglese Enfasi e importanza.

+ +

Abbreviazioni

+ +

l'etichetta <abbr> indica una abbreviazione o un acronimo, e permette, tramite l'attributo title, di fornire la versione estesa della frase o parola abbreviata:

+ +
<p>Il contenuto di un sito è codificato tramite <abbr title="Hypertext Markup Language">HTML</abbr>.</p>
+ +

Anche in questo caso potresti voler apportare qualche semplice modifica allo stile:

+ +
abbr {
+  color: #a60000;
+}
+ +

Lo standard riconosciuto per indicare le abbreviazioni è una sottolineatura punteggiata, ed è raccomandabile non modificarlo significativamente. Per maggiori dettagli sulle abbreviazioni, vedi l'articolo in inglese Abbreviazioni.

+ + + +

I link sono il mezzo con cui ti muovi da un punto all'altro della rete:

+ +
<p>Visita la <a href="https://www.mozilla.org">homepage di Mozilla</a>.</p>
+ +

Qui sotto sono riportate alcune semplici modifiche allo stile dei link:

+ +
a {
+  color: #ff0000;
+}
+
+a:hover, a:visited, a:focus {
+  color: #a60000;
+  text-decoration: none;
+}
+
+a:active {
+  color: #000000;
+  background-color: #a60000;
+}
+ +

Lo stile di default per i link è la sottolineatura, inoltre si presentano in diversi colori a seconda del loro stato: blu è il colore nello stato di default, viola nel caso il link sia stato visitato, rosso quando si "attiva" cliccandoci sopra. Oltre a ciò, il puntatore del mouse cambia forma quando lo si passa su un link, e il link viene messo in evidenza quando riceve focus (per esempio tramite tast TAB). Nell'immagine qui sotto possiamo vedere l'evidenziazione di un link in Firefox (cornice punteggiata) e Chrome (cornice azzurra):

+ +

+ +

+ +

Puoi modificare lo stile dei link come più ti piace, ma facendo attenzione a fornire agli utenti un feedback quando interagiscono coi link. Quando un link cambia di stato si dovrebbe notare. Inoltre, evita di rimuovere stili di default come il cambio di puntatore del mouse o l'evidenziazione quando un link riceve focus: entrambi sono molto importanti per l'accessibilità degli utenti che usano tastiera.

+ +

Formulari

+ +

I formulari sono elementi che permettono agli utenti di introdurre dati in un sito web:

+ +
<div>
+  <label for="nome">Introduci il tuo nome</label>
+  <input type="text" id="nome" name="nome">
+</div>
+ +

Puoi vedere un buon esempio di uso di CSS  in un formulario qui: form-css.html (vedi anche la versione live).

+ +

La maggior parte del codice CSS che scriverai per i formulari sarà per modificare le dimensioni degli elementi, allineare elementi label e input e migliorarne l'aspetto esteriore.

+ +

Non dovresti comunque modificare troppo il feedback visuale che gli elementi di un formulario mostrano quando ricevono focus, che è in pratica lo stesso dei link (vedi sopra). Puoi modificare l'aspetto delle evidenziazioni applicate agli elementi del formulario quando ricevono focus o hover del puntatore del mouse per far si che lo stile del tuo sito sia consistente sui diversi browser, ma evita di rimuoverle. Come già detto, alcuni utenti contano su tali "segnali" per poter interpretare ciò che sta accadendo mentre navigano un sito.

+ +

Tabelle

+ +

Prendiamo ora in considerazione le tabelle che si usano per presentare dati.

+ +

Puoi vedere un buon esempio di tabella costruita con HTML e CSS qui:  table-css.html (vedi anche la versione live).

+ +

Il codice CSS applicato alle tabelle serve in genere a uniformarle allo stile generale del sito e a migliorarle esteticamente. Alcune buone pratiche sono ad esempio far si che gli header(intestazioni di file o colonne) della tabella siano in risalto, per esempio usando il grassetto, e far uso di una alternanza di sfondo chiaro e scuro per rendere più facile la distinzione tra le varie file della tabella.

+ +

Colore e contrasto

+ +

Quando scegli uno schema di colori per il tuo sito, assicurati che il testo abbia un colore che contrasta bene con lo sfondo. Un basso contrasto dei colori può produrre un effetto interessante dal punto di vista estetico, ma renderà molto difficile poter leggere il tuo contenuto alle persone con problemi visivi come il daltonismo.

+ +

C'è un modo molto facile per verificare se il contrasto che hai scelto è abbastanza alto da non causare problemi. Ci sono numerosi siti che ti permettono di introdurre il colore del testo e quello dello sfondo, per verificarne il contrasto. Per esempio il sito Color Contrast Checker è facile da usare, e fornisce una spiegazione (in inglese) dei criteri WCAG (Linee guida per l'accessibilità dei contenuti Web) sul contrasto dei colori.

+ +
+

Nota: un contrasto alto sarà d'aiuto per poter leggere con maggiore facilità anche a chi si connette tramite telefono o tablet in ambienti con molta luce, come un parco o una piazza. 

+
+ +

Un altro consiglio è di non fare affidamento solo sul colore per fornire un certo tipo di informazioni o segnali, in quanto tali informazioni non potranno essere interpretate da chi non vede i colori. Per esempio, invece di limitarti a marcare in rosso i campi di un formulario che sono da compilare obbligatoriamente, marcali anche con un asterisco.

+ +

Nascondere elementi

+ +

Ci sono molte situazioni nelle quali è necessario che non tutto il contenuto sia mostrato allo stesso tempo. Per esempio nel nostro info box a schede (vedi codice sorgente) abbiamo tre schede con informazioni posizionate una sopra l'altra, e ci sono tre bottoni cliccabili per passare da una scheda all'altra (il box è accessibile anche da tastiera, usando il tasto TAB per spostarsi tra i bottoni e INVIO per selezionare una scheda).

+ +

+ +

Gli utenti che usano lettori di schermo non avranno problemi a leggere tutte le schede, l'importante è che l'ordine del contenuto sia sensato. Usare position: absolute (come nel nostro esempio) è in generale considerato come uno dei migliori metodi per nascondere contenuto, perchè non impedisce ai lettori di schermo di leggerlo.

+ +

D'altro canto, non dovresti usare {{cssxref("visibility")}}:hidden o {{cssxref("display")}}:none, perchè nascondono il contenuto ai lettori di schermo. A meno che, ovviamente, ci sia una buona ragione per nascondere questo contenuto ai lettori di schermo.

+ +
+

Nota: l'articolo in inglese Contenuto visibile solo ai lettori di schermo fornisce molti più dettagli su questo argomento.

+
+ +

È possibile che gli utenti modifichino lo stile dei tuoi elementi

+ +

A volte gli utenti alterano gli stili che hai impostato sostituendoli con stili personalizzati. Per esempio:

+ + + +

Gli utenti modificano il CSS per differenti ragioni: un utente con problemi di vista potrebbe voler ingrandire automaticamente il testo su tutti i siti che visita, un utente con daltonismo potrebbe voler aumentare il contrasto dei colori per facilitare la lettura. Qualunque sia la ragione, dovresti tenere in considerazione questa possibilità, e usare un disegno del tuo sito che sia sufficientemente flessibile per poter gestire tali cambi. Per esempio, dovresti assicurarti che l'area dove è situato il tuo contenuto principale può supportare un ingrandimento del testo, mantenendone il formato base e senza farne scomparire parti.

+ +

JavaScript

+ +

 

+ +

Anche JavaScript può causare problemi di accessibilità, dipendendo da come si utilizza.

+ +

JavaScript è un linguaggio molto potente, e possiamo usarlo per compiere un'infinità di funzioni, da semplici aggiornamenti del contenuto o della IU a giochi completi in 2D o 3D. Nessuna regola dice che tutto il contenuto deve essere accessibile al 100% a tutti, ma devi fare tutto il possibile, e cercare di rendere le tue applicazioni il più accessibili possibile.

+ +

Il contenuto e gli elementi funzionali semplici sono relativamente facili da rendere accessibili: per esempio testo, immagini, tabelle, formulari e bottoni. Come abbiamo visto nell'articolo HTML: una buona base per l'accessibilità, le considerazioni chiave sono:

+ + + +

Abbiamo inoltre visto un esempio di uso di JavaScript per migliorare l'accessibilità aggiungendo una funzionalità che mancava (vedi Implementare l'accessibilità da tastiera in un secondo tempo). Questo procedimento non è ideale, visto che si dovrebbe usare l'elemento più appropriato per ogni funzione sin dall'inizio, ma dimostra che è possibile intervenire sul codice in situazioni in cui è necessario modificarlo dopo la sua creazione. Un altro modo per migliorare l'accessibilità degli elementi che usano JavaScript non semantico è usare la tecnologia WAI-ARIA per fornire valore semantico extra per gli utenti che usano lettori di schermo. Il prossimo articolo spiegherà in dettaglio come farlo.

+ +

Funzionalità complesse come i giochi in 3D non sono tanto facili da rendere accessibili. Un gioco 3D creato usando WebGL si svilupperà su un elemento {{htmlelement("canvas")}} , che al momento non permette di fornire alternative testuali o altre informazioni utili per persone con disabilità visiva. Si può ragionevolmente obbiettare che un tale tipo di gioco non ha nel suo target di utenza persone non vedenti, e in effetti sarebbe esagerato pretendere di renderlo accessibile al 100%. Ma ad ogni modo è consigliabile implementare alcuni elementi di accessibilità come i controlli da tastiera, che permettono di giocare anche a utenti senza mouse, e assicurarsi che lo schema dei colori abbia un contrasto sufficientemente alto per essere usabile da persone con daltonismo.

+ +

Il problema di un uso eccessivo di JavaScript

+ +

Spesso gli sviluppatori di siti fanno un uso eccessivo di JavaScript. A volte si trovano siti in cui tutto è stato fatto con JavaScript, perfino HTML e CSS sono stati generati con JavaScript. Questo tipo di siti presentano grossi problemi di accessibilità e non solo, ed è sconsigliato sviluppare siti in questo modo.

+ +

Così come devi usare il giusto elemento per ogni funzione, assicurati anche di star usando la giusta tecnologia! Pensa bene se vale davvero la pena ricorrere a JavaScript per creare un pannello informazioni in 3D, mentre un semplice pannello testuale potrebbe essere sufficiente. Chiediti se hai davvero bisogno di un formulario basato su un widget super complesso, quando magari un semplice campo di input testuale andrebbe bene. E non generare tutto il tuo contenuto HTML con JavaScript.  

+ +

Mantieni un uso non intrusivo di JavaScript

+ +

Dovresti usare JavaScript con discrezione quando crei il tuo contenuto. L'idea di base è che JavaScript dovrebbe essere usato quando possibile per migliorare una funzionalità, ma non per costruirla. Le funzioni più basiche del sito dovrebbero essere indipendenti da JavaScript, anche se a volte ciò non è possibile. Una buona pratica è usare funzionalità già presenti nei browser quando è possibile.

+ +

Buoni esempi di uso non intrusivo di JavaScript sono:

+ + + +

Per fare un esempio abbiamo creato un semplice formulario con validazione dal lato cliente, vedi: form-validation.html (vedi anche la versione live). Nella pagina vedrai un formulario, e, quando provi a inviarlo, se avrai lasciato uno o entrambi i campi vuoti apparirà un messaggio di errore per spiegarti qual è il problema.

+ +

Questo tipo di validazione di un formulario è non intrusiva, puoi infatti usare il formulario anche con JavaScript disabilitato, e inoltre il formulario dovrà comunque essere validato anche dal lato server, poichè sarebbe troppo facile per un utente con cattive intenzioni bypassare la validazione dal lato cliente (per esempio disattivando JavaScript nel browser). La validazione dal lato cliente è utile per segnalare istantaneamente eventuali errori all'utente, senza dover attendere la risposta del server, migliorando così l'usabilità del formulario.

+ +
+

Nota: nel nostro esempio la validazione dal lato server non è stata implementata. 

+
+ +

Abbiamo inoltre reso la validazione di questo formulario accessibile, usando l'elemento {{htmlelement("label")}} per assicurarci che ogni campo di input abbia associata una etichetta senza alcuna ambiguità, di modo che i lettori di schermo possano leggere il blocco input+etichetta come una sola unità:  

+ +
<label for="nome">Inserisci il tuo nome:</label>
+<input type="text" name="nome" id="nome">
+ +

La validazione avviene solo al momento dell'invio del formulario. In questo modo la IU non viene aggiornata troppo spesso potendo causare confusione negli utenti che usano lettori di schermo (e anche in quelli che non li usano):

+ +
form.onsubmit = validate;
+
+function validate(e) {
+  errorList.innerHTML = '';
+  for(var i = 0; i < formItems.length; i++) {
+    var testItem = formItems[i];
+    if(testItem.input.value === '') {
+      errorField.style.left = '360px';
+      createLink(testItem);
+    }
+  }
+
+  if(errorList.innerHTML !== '') {
+    e.preventDefault();
+  }
+}
+ +
+

Nota: in questo esempio stiamo nascondendo e mostrando il messaggio di errore usando position: absolute invece che un altro metodo come visibility: hidden o display: none, perchè in questo modo il lettore di schermo potrà leggerlo senza problemi.  

+
+ +

Una validazione reale sarebbe molto più complessa, dovremmo controllare che il nome introdotto sembri effettivamente un nome, che l'età sia un numero e che sia realistica (per esempio non può essere un numero negativo, o di 4 cifre). Nell'esempio abbiamo implementato solo un sistema di verifica che controlla se i campi sono stati riempiti o no (if(testItem.input.value === '')).

+ +

Quando la validazione ha terminato con esito positivo, il formulario viene inviato. Se ci sono errori (if(errorList.innerHTML !== '')) l'invio viene bloccato (usando preventDefault()), e si mostra il messaggio di errore (vedi sotto). Con questo meccanismo gli errori saranno mostrati solo se ci saranno effettivamente errori, migliorando l'usabilità. 

+ +

Per ogni campo del formulario che è vuoto al momento dell'invio creiamo un item con un link e lo inseriamo nella lista errori (errorList).

+ +
function createLink(testItem) {
+  var listItem = document.createElement('li');
+  var anchor = document.createElement('a');
+  anchor.textContent = testItem.input.name + ' field is empty: fill in your ' + testItem.input.name + '.';
+  anchor.href = '#' + testItem.input.name;
+  anchor.onclick = function() {
+    testItem.input.focus();
+  };
+  listItem.appendChild(anchor);
+  errorList.appendChild(listItem);
+}
+ +

Ogni link ha una doppia funzionalità: segnala il tipo di errore e inoltre cliccandoci sopra sposta il focus automaticamente sul campo vuoto da riempire.

+ +
+

Nota: il metodo focus() dell'esempio può creare confusione. Chrome e Edge (e le ultime versioni di IE) sposteranno il focus al campo relativo quando si clicca sul link, senza bisogno della funzione onclick/focus(). Safari si limiterà a evidenziare il campo, ma ha bisogno di onclick/focus() per spostare effettivamente il focus su di esso. Firefox al momento non è in grado di spostare il focus su un campo specifico, quindi il metodo non funzionerà su Firefox. Il problema dovrebbe essere risolto in futuro.

+
+ +

 

+ +

Inoltre, il messaggio di errore è stato posto in cima nel codice HTML (anche se poi viene visualizzato in un altro punto della pagina usando CSS per posizionarlo), di modo che l'utente, tornando in cima alla pagina, può sapere che errore c'è nel suo formulario e andare direttamente al campo in questione.

+ +

Come annotazione finale, si noti che abbiamo usato alcuni attributi WAI-ARIA nel nostro esempio, per aiutare a risolvere problemi di accessibilità causati da aree del contenuto che si aggiornano costantemente senza che la pagina si ricarichi (di default i lettori di schermo non segnaleranno ciò agli utenti):

+ +

 

+ +
<div class="errors" role="alert" aria-relevant="all">
+  <ul>
+  </ul>
+</div>
+ +

Torneremo a occuparci più dettagliatamente di questo tipo di attributi nel prossimo articolo sulla tecnologia WAI-ARIA.

+ +
+

Nota: forse starai pensando che HTML5 include già alcuni meccanismi di validazione come gli attributi required, min/minlength, e max/maxlength. Non abbiamo fatto uso di tali attributi nell'esempio, perchè non presentano ancora un livello accettabile di compatibilità nei differenti browser (per esempio Safari non li supporta, Internet Explorer solo a partire dalla versione 10).

+
+ +
+

Nota: l'articolo in inglese Forme usabili ed accessibili di validazione di formulari e risoluzione di errori fornisce ulteriori utili informazioni su come creare un processo di validazione acessibile.

+
+ +

Altri problemi di accessibilità con JavaScript

+ +

Ci sono altri aspetti relativi all'accessibilità da tenere in conto quando si usa JavaScript. Ne aggiungeremo altri all'articolo in futuro.

+ +

Eventi specifici del mouse

+ +

Come forse già saprai, le interazioni dell'utente con il sito tramite mouse sono gestite in JavaScript usando i gestori di eventi (event handlers), che ci permettono di eseguire funzioni in risposta a determinati eventi attivati dalle azioni compiute dall’utente con il mouse. Alcuni esempi di eventi specificamente relativi al mouse sono mouseover, mouseout, dblclick, ecc. Le funzionalità associate a tali eventi non sono accessibili usando altri dispositivi, come per esempio la tastiera.  

+ +

Per attenuare i problemi di accessibilità che ne derivano, dovresti associare a tali eventi altri eventi simili ma che sono attivati in altra maniera (i cosiddetti gestori di eventi indipendenti dal dispositivo). Per esempio focus e blur forniscono accessibilità per gli utenti che navigano con la tastiera.

+ +

Vediamo ora un esempio che dimostra questo tipo di situazione. Supponiamo che in una pagina del nostro sito ci sia una immagine in miniatura, che si espande quando ci si passa sopra con il puntatore del mouse, oppure quando riceve focus (per esempio pensiamo al catalogo di un sito di e-commerce).

+ +

Abbiamo creato un esempio molto semplice, che puoi trovare qui: mouse-and-keyboard-events.html (vedi anche il codice sorgente). Il codice ha due funzioni per mostrare o nascondere l'immagine ingrandita; qui sotto vediamo il codice dei gestori degli eventi:

+ +
imgThumb.onmouseover = showImg;
+imgThumb.onmouseout = hideImg;
+
+imgThumb.onfocus = showImg;
+imgThumb.onblur = hideImg;
+ +

Le prime due linee di codice riguardano il mouse: la prima funzione si attiva al passare il puntatore del mouse sulla miniatura, mentre la seconda si attiva al togliere il puntatore dall'area della miniatura. Questo codice però non permette di vedere l'immagine ingrandita tramite tastiera. Per poterlo fare, abbiamo aggiunto le atre due linee di codice, che attivano le stesse funzioni quando la miniatura riceve focus o lo perde. Si può spostare il focus sulla miniatura usando il tasto TAB, perchè al codice HTML dell'elemento abbiamo aggiunto l'attributo  tabindex="0".

+ +

L'evento click è interessante, a prima vista potrebbe sembrare un evento esclusivamente relativo  al mouse, ma nella maggior parte dei browser il gestore di eventi onclick si attiverà anche premendo il tasto INVIO su un link o un elemento di formulario con focus, o quando si clicca sull'elemento con il dito se si usa un dispositivo con touchscreen.

+ +

Tieni presente comunque che questo non funziona nel caso in cui si usi tabindex per dare il focus a un elemento che di default non lo potrebbe avere. In casi come questo devi rilevare quando il tasto specifico è premuto (vedi Implementare l'accessibilità da tastiera in un secondo tempo).

+ +

Riassunto

+ +

 

+ +

Speriamo che questo articolo ti sia servito a capire meglio i problemi di accessibilità relativi all'uso di CSS e JavaScript sui tuoi siti o applicazioni.

+ +

E ora, WAI-ARIA!

+ +
{{PreviousMenuNext("Learn/Accessibilità/HTML_accessibilità","Learn/Accessibilità/WAI-ARIA_basics", "Learn/Accessibilità")}}
diff --git a/files/it/learn/accessibility/html/index.html b/files/it/learn/accessibility/html/index.html new file mode 100644 index 0000000000..26129068e4 --- /dev/null +++ b/files/it/learn/accessibility/html/index.html @@ -0,0 +1,538 @@ +--- +title: 'HTML: una buona base per l''accessibilità' +slug: Learn/Accessibilità/HTML_accessibilità +tags: + - Accessibilità + - Articolo + - Bottoni + - Formulari + - HTML semantico + - Lettore di schermo + - Link + - Principiante + - TA + - Testo Alternativo + - tastiera + - tecnologie assistive +translation_of: Learn/Accessibility/HTML +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Accessibilità/Cosa_è_accessibilità","Learn/Accessibilità/CSS_e_JavaScript_accessibilità", "Learn/Accessibilità")}}
+ +

Buona parte del contenuto di un sito può essere reso accessibile semplicemente facendo attenzione ad usare sempre nella maniera corretta gli elementi HTML più opportuni per le funzionalità che si vogliono implementare. Questo articolo analizza in dettaglio come il linguaggio HTML può essere usato al meglio per garantire la massima accessibilità.

+ + + + + + + + + + + + +
Prerequisiti:Conoscimenti basici sull'uso del computer, livello basico di HTML e una idea chiara di cosa è l'accessibilità.
Obiettivo:Acquisire familiarità con le caratteristiche di HTML che hanno effetti positivi sull'accessibilità, e imparare a usarle correttamente nello sviluppo dei propri siti e applicazioni. 
+ +

HTML e accessibilità

+ +

 

+ +

Man mano che impari cose nuove su HTML (leggendo nuove risorse, analizzando esempi di codice, ecc.), ti accorgerai sicuramente di un tema ricorrente: l'importanza di usare HTML semantico (a volte chiamato POSH, Plain Old Semantic HTML). Ciò significa utilizzare il più possibile gli elementi HTML più corretti per il proprio scopo.

+ +

Forse ti chiederai perché è tanto importante. Dopotutto, puoi usare un combinazione di CSS e JavaScript per far sì che qualsiasi elemento HTML si comporti esattamente come tu vuoi. Per esempio, un bottone che controlla la riproduzione di un video sul tuo sito si potrebbe codificare così:

+ +

 

+ +
<div>Play video</div>
+ +

Ma, come vedrai in dettaglio più avanti, ha molto più senso usare un elemento più specifico:

+ +
<button>Play video</button>
+ +

Non solo l'elemento <button> presenta di default uno stile più appropriato alla sua funzione (anche se probabilmente in seguito modificherai tale stile), ma è anche perfettamente accessibile con la tastiera. Ciò significa che un utente che usa la tastiera per navigare potrà spostarsi da un bottone all'altro del sito usando il tasto TAB, e premere i bottoni usando INVIO.

+ +

L'HTML semantico non richiede più tempo per essere scritto del codice non-semantico se lo utilizzi con consistenza sin dal principio del progetto, e inoltre presenta numerosi altri benefici che vanno al di là dell'accessibilità:

+ +

 

+ +
    +
  1. Maggior facilità nello sviluppo — come già detto in precedenza, gli elementi HTML semantici hanno già integrate in sè alcune funzionalità aggiuntive. inoltre rendono il codice più facile da leggere e interpretare.
    2. +
  2. Miglior rendimento su dispositivi mobili — l'HTML semantico è più leggero del non-semantico, e più facile da rendere responsivo.
    3. +
  3. Utile per il SEO — i motori di ricerca danno maggior importanza alle parole chiave contenute in heading, link, ecc. rispetto a quelle contenute in generici <div> non-semantici, dunque i tuoi siti saranno più facili da trovare. 
    4. +
+ +

Ora vedremo più in dettaglio come produrre un codice HTML accessibile.

+ +
+

Nota: È una buona idea installare un lettore di schermo sul tuo computer, così che tu possa testare gli esempi mostrati più avanti. Vedi la guida in inglese Guida ai lettori di schermo per maggiori dettagli.

+
+ +

Semantiche corrette

+ +

 

+ +

Abbiamo già parlato dell'importanza di usare la giusta semantica, e perchè è importante usare i corretti elementi HTML per ogni situazione. Questa pratica non può essere ignorata, visto che è una delle principali situazioni in cui l'accessibilità viene compromessa se non si agisce propriamente.

+ +

Se si analizzano i siti presenti in rete, si noterà che ci sono casi di utilizzo molto poco ortodosso del codice HTML. Alcuni errori sono dovuti a pratiche ormai in disuso che non sono state debitamente aggiornate, altri semplicemente a ignoranza. In ogni caso, ogni volta che trovi del codice erroneo, dovresti fare il possibile per sistemarlo.

+ +

A volte non sei nella posizione di poter correggere del codice mal scritto, per esempio se le tue pagine si basano su un framework esterno su cui non hai controllo, o se sul tuo sito è presente contenuto di terze parti (come ad esempio banners pubblicitari) che non puoi modificare.

+ +

Comunque, tieni a mente che l'obiettivo non è "tutto o niente". Ogni piccolo miglioramento che riuscirai a implementare sarà utile alla causa dell'accessibilità.

+ +

Contenuto testuale

+ +

Uno dei più grandi aiuti per un utente che usa un lettore di schermo è una buona struttura del contenuto, diviso in headings, paragrafi, liste ecc. Un buon esempio può essere il seguente codice:

+ +
<h1>Titolo</h1>
+
+<p>Questa è la prima sezione del mio documento.</p>
+
+<p>Ecco qui un altro paragrafo.</p>
+
+<ol>
+  <li>Questa è</li>
+  <li>una lista</li>
+  <li>composta da</li>
+  <li>vari elementi</li>
+</ol>
+
+<h2>Sottosezione</h2>
+
+<p>Questa è la prima sottosezione del mio documento. Dovrebbe essere facile trovarla!</p>
+
+<h2>Seconda sottosezione</h2>
+
+<p>Questa è la seconda sottosezione del mio documento.</p>
+ +

Abbiamo preparato un'altra versione più lunga che puoi provare a navigare con un lettore di schermo (vedi: buone-semantiche.html). Se provi a leggere tale pagina, ti renderai conto che è facile da navigare:

+ +
    +
  1. Il lettore di schermo legge ogni etichetta man mano che avanza nella lettura del contenuto, facendoti sapere quale è un heading, quale un paragrafo ecc.
    2. +
  2. Il lettore si ferma dopo ogni elemento, permettendoti di procedere al ritmo di lettura che ti è più comodo.
    3. +
  3. Nella maggior parte dei lettori di schermo, puoi saltare al precedente o seguente heading.
    4. +
  4. Molti lettori di schermo inoltre ti forniscono una lista di tutti gli heading presenti, permettendoti di avere un utile indice per trovare contenuti specifici. 
    5. +
+ +

A volte si scrivono headings e paragrafi usando HTML non semantico e salti di linea, come nel caso seguente:

+ +
<font size="7">Titolo</font>
+<br><br>
+Questa è la prima sezione del mio documento.
+<br><br>
+Ecco qui un altro paragrafo.
+<br><br>
+1. Questa è
+<br><br>
+2. una lista
+<br><br>
+3. composta da
+<br><br>
+4. vari elementi
+<br><br>
+<font size="5">Sottosezione</font>
+<br><br>
+Questa è la prima sottosezione del mio documento. Dovrebbe essere facile trovarla!
+<br><br>
+<font size="5">Seconda sottosezione</font>
+<br><br>
+Questa è la seconda sottosezione del mio documento.
+ +

Se provi a leggere questa versione con un lettore di schermo (vedi cattive-semantiche.html), l’esperienza non ti risulterà positiva. Il lettore di schermo non avrà riferimenti che lo guidino, e non potrà fornirti un sommario dei contenuti. L'intera pagina gli apparirà come un blocco unico, e la leggerà tutta in una volta.

+ +

Ci sono inoltre altri problemi che vanno al di là dell'accessibilità: per esempio è difficile applicare stile al contenuto usando CSS, o manipolarlo con JavaScript, perchè non ci sono elementi da usare come selettori.

+ +

Usare un linguaggio chiaro

+ +

Anche il linguaggio che usi può avere un effetto sull'accessibilità. In generale dovresti usare un linguaggio chiaro e non troppo complesso, privo di termini gergali o eccessivamente tecnici. Ciò non è d'aiuto solo alle persone con disabilità cognitive o di altro tipo; è anche utile ad utenti per i quali il testo è scritto in una lingua che non conoscono bene, a utenti di età molto giovane... Di fatto, è utile a tutti! A parte ciò, dovresti anche fare attenzione a non usare termini e caratteri che risultino poco chiari se letti con un lettore di schermo. Per esempio:

+ + + +

Layout di pagina

+ +

Molto tempo fa, era pratica abituale creare layout di pagina con tabelle HTML, usando le celle di una tabella per contenere header, footer, barra laterale, la colonna del contenuto principale ecc. Questa non è una buona pratica, visto che un lettore di schermo molto probabilmente darà una lettura confusa delle celle, soprattutto se il layout è complesso e presenta sottotabelle secondarie.

+ +

Prova questo esempio: layout-tabella.html, che corrisponde al seguente codice:

+ +
<table width="1200">
+      <!-- fila del titolo della tabella -->
+      <tr id="titolo">
+        <td colspan="6">
+
+          <h1 align="center">Header</h1>
+
+        </td>
+      </tr>
+      <!-- fila del  menu di navigazione  -->
+      <tr id="nav" bgcolor="#ffffff">
+        <td width="200">
+          <a href="#" align="center">Home</a>
+        </td>
+        <td width="200">
+          <a href="#" align="center">Our team</a>
+        </td>
+        <td width="200">
+          <a href="#" align="center">Projects</a>
+        </td>
+        <td width="200">
+          <a href="#" align="center">Contact</a>
+        </td>
+        <td width="300">
+          <form width="300">
+            <input type="search" name="q" placeholder="Search query" width="300">
+          </form>
+        </td>
+        <td width="100">
+          <button width="100">Go!</button>
+        </td>
+      </tr>
+      <!-- spacer row -->
+      <tr id="spacer" height="10">
+        <td>
+
+        </td>
+      </tr>
+      <!-- fila del contenuto principale e sezione laterale -->
+      <tr id="main">
+        <td id="content" colspan="4" bgcolor="#ffffff">
+
+          <!-- contenuto principale -->
+        </td>
+        <td id="aside" colspan="2" bgcolor="#ff80ff" valign="top">
+          <h2>Related</h2>
+
+          <!-- sezione laterale -->
+
+        </td>
+      </tr>
+      <!-- spacer row -->
+      <tr id="spacer" height="10">
+        <td>
+
+        </td>
+      </tr>
+      <!-- fila del footer -->
+      <tr id="footer" bgcolor="#ffffff">
+        <td colspan="6">
+          <p>©Copyright 2050 by nobody. All rights reversed.</p>
+        </td>
+      </tr>
+    </table>
+ +

 

+ +

Se provi a navigare la pagina con un lettore di schermo, probabilmente ti dirà che c'è una tabella (anche se alcuni lettori di schermo riescono a differenziare i layout a tabella dalle tabelle di dati). Poi dovrai (a seconda del lettore di schermo che stai usando) esplorare la tabella cella per cella, e infine uscirne per poter navigare il contenuto.

+ +

I layout a tabella son una reliquia del passato, avevano senso in un'epoca in cui non tutti i browser supportavano CSS, ma creano confusione per gli utenti che usano lettori di schermo, e inoltre sono una cattiva pratica per molte altre ragioni (per esempio richiedono una quantità maggiore di codice e rendono il disegno meno flessibile). Non usarli!

+ +

Puoi verificare queste affermazioni comparando le tue esperienze precedenti con un esempio di struttura più moderna del sito, che corrisponde al seguente codice:

+ +
<header>
+  <h1>Header</h1>
+</header>
+
+<nav>
+  <!-- navigazione principale -->
+</nav>
+
+<!-- contenuto principale -->
+<main>
+
+  <!-- articolo -->
+  <article>
+    <h2>Article heading</h2>
+
+    <!-- contenuto dell'articolo -->
+  </article>
+
+  <aside>
+    <h2>Related</h2>
+
+    <!-- contenuto della sezione laterale -->
+  </aside>
+
+</main>
+
+<!-- footer, usato in tutte le pagine del sito -->
+
+<footer>
+  <!-- contenuto del footer -->
+</footer>
+ +

Se provi questa nuova versione del sito con un lettore di schermo, vedrai che il layout del codice non è più un ostacolo alla lettura del contenuto. Inoltre puoi notare come sia molto più agile e leggero in termini di quantità di codice, cosa che implica una maggior facilità di gestione e mantenimento, e minor utilizzo di banda da parte dell'utente (molto utile per chi ha una connessione lenta).

+ +

Un'altro aspetto da tenere presente quando si creano layout è quello di usare HTML5 semantico, come visto nell'esempio precedente (vedi il compendio in inglese sezioni del contenuto). Potresti creare un layout usando solo elementi annidati {{htmlelement("div")}}, ma è molto meglio usare elementi specifici appropriati per distinguere le varie sezioni della pagina, come la sezione con gli elementi di navigazione ({{htmlelement("nav")}}), il footer ({{htmlelement("footer")}}), unità di contenuto che si ripetono ({{htmlelement("article")}}), ecc. Questi elementi forniscono un ulteriore contenuto semantico per i lettori di schermo (e per altri strumenti) per dare agli utenti indicazioni extra riguardo il contenuto che stanno navigando (vedi l'articolo in inglese Supporto dei nuovi elementi HTML5 di sezione nei lettori di schermo per farti un'idea dello stato del supporto nei lettori di schermo).

+ +
+

Nota: oltre ad una buona semantica ed un layout esteticamente apprezzabile, il tuo contenuto dovrebbe essere organizzato in un ordine logico. Puoi sempre muoverlo in seguito utilizzando CSS, ma il codice sorgente dovrebbe essere nel giusto ordine, di modo che gli utenti che usano lettori di schermo lo possano interpretare correttamente. 

+
+ +

Controlli di Interfaccia Utente

+ +

Con il termine “controlli IU” intendiamo i componenti di un sito con cui gli utenti interagiscono. I più comuni sono bottoni, link e formulari. In questa sezione analizzeremo gli aspetti basici da tenere in considerazione quando si creano tali elementi. Più avanti gli articoli su WAI-ARIA e multimedia prenderanno in considerazione altri aspetti dell'accessibilità IU.

+ +

Un aspetto chiave dell'accessibilità dei controlli IU è che di default i browser permettono di interagire con essi tramite tastiera. Puoi fare una prova usando il nostro esempio accessibilità-tastiera-nativa.html (vedi il codice sorgente): apri la pagina in una nuova scheda e prova a premere il bottone TAB; dopo averlo premuto qualche volta, dovresti vedere il focus muoversi da un elemento all'altro della pagina. Gli elementi con focus hanno un sistema di evidenziazione per rendere chiaro quale elemento è selezionato al momento. Questo sistema varia leggermente da browser a browser.

+ +

+ +

Dopo averlo selezionato tramite TAB, puoi usare il tasto INVIO per premere un bottone (nell'esempio i bottoni quando premuti producono un messaggio di avviso); allo stesso modo, premendo INVIO puoi aprire un link che hai selezionato. Inoltre, dopo averlo selezionato con il tasto TAB, puoi scrivere in un campo del formulario, o selezionare un elemento dal menu a tendina usando i tasti freccia della tastiera.

+ +
+

Nota: i vari browser possono presentare differenti opzioni di controllo da tastiera. Vedi l'articolo in inglese Accessibilità con la tastiera per maggiori dettagli.

+
+ +

In ogni caso tutti  i browser sono già preconfigurati per la navigazione con tastiera, l'unica cosa di cui devi preoccuparti è usare gli elementi HTML correttamente. Per esempio:

+ +
<h1>Links</h1>
+
+<p>Questo è un link a <a href="https://www.mozilla.org">Mozilla</a>.</p>
+
+<p>Un altro link, a <a href="https://developer.mozilla.org">Mozilla Developer Network</a>.</p>
+
+<h2>Bottoni</h2>
+
+<p>
+  <button data-message="Questo messaggio viene dal primo bottone">Cliccami!</button>
+  <button data-message="Questo messaggio viene dal secondo bottone">Clicca anche me!</button>
+  <button data-message="Questo messaggio viene dal terzo bottone">E me!</button>
+</p>
+
+<h2>Formulario</h2>
+
+<form>
+  <div>
+    <label for="name">Inserisci il tuo nome:</label>
+    <input type="text" id="name" name="name">
+  </div>
+  <div>
+    <label for="age">Inserisci la tua età:</label>
+    <input type="text" id="age" name="age">
+  </div>
+  <div>
+    <label for="mood">Come ti senti?</label>
+    <select id="mood" name="mood">
+      <option>Felice</option>
+      <option>Triste</option>
+      <option>Arrabbiato</option>
+      <option>Preoccupato</option>
+    </select>
+  </div>
+</form>
+ +

Questo significa usare link, bottoni, elementi del formulario ed etichette appropriatamente (includendo l'elemento {{htmlelement("label")}} nei campi del formulario).

+ +

Purtroppo a volte queste buone pratiche non sono rispettate. Ad esempio, a volte si trovano bottoni codificati usando elementi {{htmlelement("div")}}:

+ +
<div data-message="Questo messaggio viene dal primo bottone">Cliccami!</div>
+<div data-message="Questo messaggio viene dal secondo bottone">Clicca anche me!</div>
+<div data-message="Questo messaggio viene dal terzo bottone">E me!</div>
+ +

Questo modo di scrivere codice è altamente sconsigliato: non solo perdi l'accessibilità da tastiera che avresti avuto automaticamente usando l'etichetta {{htmlelement("button")}}, ma perdi anche gli stili CSS di default che l'etichetta {{htmlelement("button")}} contiene.

+ +

Implementare l'accessibilità da tastiera in un secondo tempo

+ +

Risolvere problemi di accessibilità da tastiera in un sito già ultimato può richiedere un certo sforzo (per un esempio vedi la pagina   falsi-bottoni-usando-div.html e il suo  codice sorgente). In questo esempio abbiamo dato ad alcuni bottoni, erroneamente creati con una etichetta <div>, la possibilità di ricevere focus tramite tasto TAB fornendo a ognuno l'attributo tabindex="0":

+ +
<div data-message="Questo messaggio viene dal primo bottone" tabindex="0">Cliccami!</div>
+<div data-message="Questo messaggio viene dal secondo bottone" tabindex="0">Clicca anche me!</div>
+<div data-message="Questo messaggio viene dal terzo bottone" tabindex="0">E me!</div>
+ +

L'attributo {{htmlattrxref("tabindex")}} è stato creato per dare agli elementi selezionabili tramite tasto TAB un ordine di focus personalizzato (specificato con numeri positivi in ordine crescente), differente dall'ordine standard con cui sono presenti nel codice sorgente. In generale questa non è una buona pratica, e può causare confusione nell'utente. Questo attributo sarebbe da usare solo in casi particolari, per esempio se il layout mostra gli elementi in una forma molto diversa dal codice sorgente. Ma ci sono altri due possibili usi di tabindex che sono utili per l'accessibilità:

+ + + +

L'uso di tabindex rende i bottoni creati erroneamente usando <div> selezionabili tramite tasto TAB, ma non ci permette di cliccarli usando INVIO. Per renderli cliccabili, dobbiamo ricorrere a Javascript:  

+ +
document.onkeydown = function(e) {
+  if(e.keyCode === 13) { // Il tasto ENTER
+    document.activeElement.onclick(e);
+  }
+};
+ +

Spiegazione del codice: abbiamo aggiunto un listener al documento, di modo che il codice rileva ogni occasione in cui un tasto della tastiera viene premuto. Tramite la proprietà KeyCode il codice individua quale tasto è stato premuto. Se il tasto premuto è INVIO, la funzione associata tramite onclick al bottone attualmente selezionato viene eseguita. La linea document.activeElement.onclick() serve proprio a rilevare l'elemento che attualmente sta ricevendo focus nella pagina, in questo caso il bottone che abbiamo selezionato tramite tasto TAB. 

+ +
+

Nota: Tieni presente che questa tecnica funzionerà solo se usi onclick. Usare addEventListener non funzionerà.

+
+ +

Come vedi, implementare l'uso della tastiera in un secondo momento non è un lavoro semplice né veloce, e inoltre può causare malfunzionamenti del sito. È molto meglio utilizzare l'elemento più appropriato per ogni funzionalità del sito sin dal principio.

+ +

Usare testi con significato

+ +

Una interfaccia utente che presenta une nomenclatura chiara ed esplicativa è utile a tutti, ma avere testi ed etichette curati nei dettagli è particolarmente importante per gli utenti che hanno una disabilità.

+ +

Assicurati che i tuoi bottoni e i tuoi link presentino testi facilmente comprensibili e che distinguano bene un elemento dall'altro. Non usare frasi come "Clicca qui", perchè gli utenti che usano lettori di schermo possono avere difficoltà a distinguere la funzione o destinazione del bottone o link, soprattutto se ce ne sono molti nella pagina. La seguente immagine mostra alcuni campi di un formulario così come sono letti da VoiceOver.

+ +

+ +

Assicurati che i nomi che assegni agli elementi abbiano senso anche se letti fuori dal loro contesto, allo stesso modo in cui hanno senso nel contesto del paragrafo in cui sono contenuti. Il seguente esempio mostra un esempio di costruzione corretta del testo di un link:

+ +
<p>Le balene sono creature davvero straordinarie. <a href="balene.html">Scopri di più sulle balene</a>.</p>
+ +

Mentre questo è un esempio di cattivo uso:

+ +
<p>Le balene sono creature davvero straordinarie. Per saperne di più sulle balene, <a href="balene.html">clicca qui</a>.</p>
+ +
+

Nota: Puoi saperne di più sulle migliori pratiche di implementazione di link nel nostro articolo (in inglese) Creazione di link. Puoi inoltre vedere esempi di buona costruzione di link nella pagina buoni-link.html ed esempi di link mal costruiti nella pagina cattivi-link.html.

+
+ +

Un altro elemento importante sono le etichette <label> dei formulari, che forniscono una indicazione su cosa l'utente deve inserire nel campo del formulario. Il seguente esempio può sembrare una maniera corretta di implementare un campo di formulario:

+ +
Scrivi il tuo nome: <input type="text" id="nome" name="nome">
+ +

Tuttavia, questo campo non sarebbe utile a utenti con disabilità visiva. Non c'è nessuna indicazione non visuale che associ chiaramente il campo di input con il testo "Scrivi il tuo nome:". Se navighi questo elemento con un lettore di schermo, potresti ricevere una descrizione generica tipo "scrivi testo qui".

+ +

Il seguente è un esempio molto migliore:

+ +
<div>
+  <label for="nome">Scrivi il tuo nome:</label>
+  <input type="text" id="nome" name="nome">
+</div>
+ +

Con questo codice, il testo sarà chiaramente associato al campo di input; il lettore di schermo pronuncerà una frase come: "Scrivi il tuo nome: scrivi testo qui". 

+ +

Inoltre, nella maggior parte dei browser associare un testo a un campo di input tramite etichetta <label> permette di selezionare/attivare il campo input cliccando anche sul testo oltre che sul campo stesso. Ciò rende molto più facile selezionare il campo in cui scrivere.

+ +
+

Nota: Puoi vedere esempi di formulari ben costruiti nella pagina esempi-di-buoni-form.html ed esempi di formulari poco accessibili nella pagina esempi-di-cattivi-form.html.

+
+ +

Tabelle dati accessibili

+ +

Una tabella dati basica si può scrivere in modo molto semplice, come per esempio:

+ +
<table>
+  <tr>
+    <td>Nome</td>
+    <td>Età</td>
+    <td>Genere</td>
+  </tr>
+  <tr>
+    <td>Gabriel</td>
+    <td>13</td>
+    <td>Maschio</td>
+  </tr>
+  <tr>
+    <td>Elva</td>
+    <td>8</td>
+    <td>Femmina</td>
+  </tr>
+  <tr>
+    <td>Freida</td>
+    <td>5</td>
+    <td>Femmina</td>
+  </tr>
+</table>
+ +

Ma questo codice può causare problemi: non dà agli utenti che usano lettori di schermo la possibilità di associare file e colonne in gruppi di dati relazionati tra loro. Per rendere ciò possibile devi sapere quali elementi della tabella sono header di file o colonne. Nel caso della tabella qui sopra ciò è possibile solo visualizzandola (vedi tabella-incorretta.html).

+ +

Ora invece considera l'esempio tabella gruppi punk. Puoi notare alcune aggiunte nel codice che migliorano l'accessibilità:

+ + + +
+

Nota: vedi l'articolo in inglese Caratteristiche avanzate delle tabelle HTML e accessibilità per maggiori dettagli sull'accessibilità delle tabelle dati.

+
+ +

Alternative testuali

+ +

Mentre il contenuto testuale è per sua natura accessibile, non si può dire lo stesso per il contenuto multimediale: immagini e video non possono essere visualizzati da persone con disabilità visiva grave, e il contenuto audio è difficile o impossibile da ascoltare per persone con disabilità auditiva. Ci occuperemo dell’accessibilità del contenuto audio e video in un altro articolo, in questa sezione tratteremo il tema dell'accessibilità per gli elementi {{htmlelement("img")}}.

+ +

Proponiamo qui un semplice esempio, immagine-accessibile.html, nel quale possiamo vedere 4 copie della stessa immagine.

+ +

Riportiamo qui sotto il relativo codice HTML tradotto all'italiano (nella pagina del link sarà in inglese):

+ +
<img src="dinosauro.png">
+
+<img src="dinosauro.png"
+     alt="Un Tirannosauro Rex: un dinosauro bipede che sta in piedi come un umano, con braccia piccole e una grande testa con denti aguzzi.">
+
+<img src="dinosauro.png"
+     alt="Un Tirannosauro Rex: un dinosauro bipede che sta in piedi come un umano, con braccia piccole e una grande testa con denti aguzzi."
+     title="Il dinosauro rosso di Mozilla">
+
+
+<img src="dinosauro.png" aria-labelledby="dino-label">
+
+<p id="dino-label">Il Tirannosauro Rex rosso di Mozilla: un dinosauro bipede che sta in piedi come un umano, con braccia piccole e una grande testa con denti aguzzi.</p>
+
+ +

La prima immagine, se si usa un lettore di schermo, non è molto accessibile. Per esempio VoiceOver leggerebbe il nome del file come "dinosauro.png, immagine". L'utente saprebbe almeno che nell'immagine è rappresentato un dinosauro di qualche tipo. Ma spesso le immagini che si trovano su internet non hanno neanche un titolo minimamente descrittivo come “dinosauro.png”, e usano invece come titoli codici alfanumerici o nomi generati automaticamente (per esempio da una macchina fotografica), che non forniscono alcun tipo di contesto riguardo al contenuto dell'immagine.

+ +
+

Nota: non dovresti mai includere contenuto testuale in una immagine. I lettori di schermo non lo possono leggere. Ci sono inoltre altri svantaggi, per esempio non è possibile selezionarlo e copiarlo. Non farlo! 

+
+ +

Nel caso della seconda immagine, un lettore di schermo leggerà tutto l'attributo alt: "Un Tirannosauro Rex: un dinosauro bipede che sta in piedi come un umano, con braccia piccole e una grande testa con denti aguzzi.".

+ +

Dunque è importante fornire alle immagini nomi descrittivi, e anche assicurarsi di fornire testo alternativo ogni volta che è possibile. Fai attenzione a fornire nell'attributo alt un testo che sia una rappresentazione il più possible diretta del contenuto dell'immagine. Evita di includere informazioni extra che non riguardano direttamente l'immagine.

+ +

Un altro aspetto da considerare è se un'immagine ha un significato importante nel contesto del contenuto in cui si trova, o se si tratta solo di un'immagine decorativa. Se un’immagine è solo decorativa, è meglio includerla nella pagina con la proprietà background-image di CSS piuttosto che con l’etichetta <img>.

+ +
+

Nota: Leggi Immagini in HTML e Immagini reattive per saperne di più sulle pratiche ottimali per l'implementazione delle immagini.

+
+ +

Se desideri fornire informazioni contestuali extra, dovresti includerle nel testo vicino all'immagine, o usare un attributo title, come mostrato nel codice della terza immagine. La maggior parte dei lettori di schermo leggerà il testo alternativo, il testo dell'attributo title, e il nome del file. Inoltre, i browser mostrano il testo contenuto in title quando un utente passa sopra l'immagine con il puntatore del mouse.

+ +

+ +

Diamo ora un'occhiata al codice della quarta immagine:

+ +
<img src="dinosauro.png" aria-labelledby="dino-label"> <p id="dino-label">Il Tirannosauro...</p>
+ +

In questo caso non stiamo usando l'attributo alt. Invece, abbiamo presentato la descrizione dell'immagine come un normale paragrafo, le abbiamo assegnato un id, e poi abbiamo usato l'attributo aria-labelledby  associandolo all'id. In questo modo i lettori di schermo useranno il paragrafo come testo alternativo per l'immagine. Questo metodo è utile nel caso in cui si voglia usare lo stesso testo alternativo per multiple immagini, procedimento che è sconsigliabile implementare usando l’attributo alt

+ +
+

Nota: aria-labelledby è parte della specificazione WAI-ARIA, che permette agli sviluppatori di aggiungere valore semantico extra al loro codice e migliorare l'accessiblità per i lettori di schermo. Per saperne di più su come funziona, leggi l'articolo basi di WAI-ARIA.

+
+ +

Altri metodi di testo alternativo

+ +

Ci sono anche altri metodi per associare alle immagini un testo che le descriva. Per esempio, c'è un attributo chiamato longdesc che permette di richiamare descrizioni dettagliate delle immagini presenti in una pagina da un documento HTML esterno. Per esempio:

+ +
<img src="dinosauro.png" longdesc="dino-info.html">
+ +

Questa può sembrare una soluzione ottimale, soprattutto per immagini con grandi contenuti informativi come grafici che rappresentano statistiche o risultati. Ma purtroppo l'attributo longdesc non è supportato con consistenza dai lettori di schermo, e inoltre il suo contenuto è totalmente inaccessibile agli utenti che non usano lettori di schermo. Si raccomanda dunque di includere la descrizione testuale nella stessa pagina in cui si trova l'immagine, o rimandare alla descrizione con un link standard.

+ +

In HTML5 sono inclusi inoltre altri due elementi, {{htmlelement("figure")}} e {{htmlelement("figcaption")}}, che servono ad associare un elemento figurativo (non necessariamente un'immagine) ad una didascalia: 

+ +
<figure>
+  <img src="dinosauro.png" alt="Il Tirannosauro di Mozilla">
+  <figcaption>Un Tirannosauro Rex: un dinosauro bipede che sta in piedi come un umano, con braccia piccole e una grande testa con denti aguzzi.</figcaption>
+</figure>
+ +

Purtroppo anche in questo caso la maggior parte dei lettori di schermo non è ancora in grado di interpretare correttamente gli elementi {{htmlelement("figure")}} e {{htmlelement("figcaption")}}, ma l'uso di questi elementi può essere comunque utile per effettuare modifiche allo stile tramite CSS; inoltre questi elementi danno la possibilità di collocare la descrizione di una immagine nello stesso punto in cui l'immagine è inserita nel codice.

+ +

Attributi alt vuoti

+ +
<h3>
+  <img src="icona-articolo.png" alt="">
+  Tirannosauro Rex: il re dei dinosauti
+</h3>
+ +

In alcuni casi un'immagine viene inclusa in una pagina con uno scopo puramente decorativo. Come puoi notare nel codice qui sopra, l'attributo alt dell'immagine è lasciato vuoto. Questo procedimento permette ai lettori di schermo di riconoscere la presenza di un'immagine, evitando però di fornirne una descrizione (pronuncerebbero solo una frase come "immagine").

+ +

La ragione per cui è buona pratica usare un attributo alt vuoto invece di non includerlo del tutto è perchè molti lettori di schermo, nel caso in cui non incontrino nessun attributo alt associato a un'immagine, leggono al suo posto l'URL dell'immagine. Nell'esempio qui sopra, l'immagine ha una funzione decorativa dell'heading a cui è associata. In casi come questo, e in tutti i casi in cui un'immagine ha una funzione puramente decorativa e nessun valore di contenuto, dovresti associarle un attributo alt vuoto (alt=""). Un'alternativa è usare l'attributo ARIA role (con forma: role="presentation"), che indica ai lettori di schermo di non leggere il testo alternativo.

+ +
+

Nota: se possibile è meglio usare CSS per mostrare immagini con funzione puramente decorativa.

+
+ +

Riassunto

+ +

Dopo aver letto questo articolo dovresti avere un’idea piuttosto chiara di come scrivere HTML accessibile nella maggior parte delle situazioni. Il nostro articolo su WAI-ARIA ti darà informazioni più approfondite, ma con quanto hai già letto e imparato sei in possesso di una buona base. Nei prossimi articoli esploreremo CSS e JavaScript, e come l'accessibilità è influenzata dal loro corretto o incorretto utilizzo.

+ +

{{PreviousMenuNext("Learn/Accessibilità/Cosa_è_accessibilità","Learn/Accessibilità/CSS_e_JavaScript_accessibilità", "Learn/Accessibilità")}}

diff --git a/files/it/learn/accessibility/index.html b/files/it/learn/accessibility/index.html new file mode 100644 index 0000000000..57dee47809 --- /dev/null +++ b/files/it/learn/accessibility/index.html @@ -0,0 +1,67 @@ +--- +title: Accessibilità +slug: Learn/Accessibilità +tags: + - ARIA + - Accessibilità + - Articoli + - CSS + - Guida accessibilità + - HTML + - Imparare accessibilità + - JavaScript + - Lezioni accessibilità + - Manuale accessibiltà + - Moduli + - Principiante + - Sviluppo Web + - imparare +translation_of: Learn/Accessibility +--- +
{{LearnSidebar}}
+ +

Imparare HTML, CSS e Javascript è fondamentale se vuoi diventare uno sviluppatore web, ma la tua preparazione deve andare al di là del semplice utilizzo delle tecnologie di programmazione web: devi imparare ad utilizzarle in modo responsabile, in maniera tale da massimizzare il numero di utenti che possano usufruire pienamente dei tuoi siti, senza lasciare nessuno chiuso fuori. Per ottenere questi risultati devi seguire con attenzione alcune linee guida (che sono indicate nelle sezioni HTML, CSS, e JavaScript), praticare test su differenti browser e prendere in considerazione l'accessibilità sin dal principio dei tuoi progetti di sviluppo web. In questo modulo ci occuperemo in dettaglio di quest'ultimo aspetto.

+ +

Prerequisiti

+ +

Per ottenere il massimo da questo modulo, è consigliabile aver seguito almeno i primi due moduli delle sezioni HTML, CSS, e JavaScript, oppure, ancor meglio, seguire le varie parti del modulo sull'accessibilità mentre studi (o rivedi) le relative sezioni di HTML, CSS, e JavaScript.  

+ +
+

Nota: Se stai usando un computer, tablet o altro dispositivo sul quale non hai la possibilità di creare files, puoi testare la maggior parte degli esempi di codice che troverai in questo modulo usando un programma online come JSBin o Thimble.

+
+ +

Guide

+ +
+
Cos'è l'accessibilità?
+
Questo articolo inaugura il modulo con una visione generale di cosa è realmente l'accessibilità. Sono inclusi argomenti come: quali gruppi di persone dobbiamo tenere in considerazione e perché, quali strumenti di supporto le persone usano per interagire con la rete, e come possiamo rendere l'accessibilità parte integrante del nostro processo di sviluppo web.
+
HTML: una buona base per l'accessibilità
+
Buona parte del contenuto di un sito può essere reso accessibile semplicemente facendo attenzione ad usare sempre nella maniera corretta gli elementi HTML più opportuni per le funzionalità che si vogliono implementare. Questo articolo analizza in dettaglio come il linguaggio HTML può essere usato al meglio per garantire la massima accessibilità.
+
Linee guida di accessibiltà per CSS e JavaScript
+
CSS e JavaScript, quando utilizzati propriamente, possono contribuire ad offrire una esperienza accessibile della rete. Se invece vengono utilizzati in maniera incorretta possono causare una drastica riduzione dell'accessibilità. Questo articolo riporta alcune linee guida per l'utilizzo di CSS e JavaScript che devono essere tenute in considerazione per permettere a contenuti anche molto complessi di avere il più alto grado di accessibilità possibile.
+
Basi della tecnologia WAI-ARIA
+
Proseguendo i temi trattati nell'articolo precedente, può risultare complicato creare elementi di interfaccia utente accessibili quando gli stessi si basano su HTML non semantico e presentano contenuto aggiornato dinamicamente tramite JavaScript. La tecnologia WAI-ARIA può essere d'aiuto aggiungendo valore semantico addizionale, che i browser e le tecnologie assistive possono riconoscere e utilizzare per permettere agli utenti di decifrare più chiaramente il contesto e ciò che sta accadendo durante la navigazione del sito. In questo articolo vedremo come usare questa tecnologia a un livello basico per migliorare l'accessibilità.
+
Accessibilità multimediale
+
+
+

Un'altra categoria di contenuti che possono dare problemi di accessibilità sono gli elementi multimediali: audio, video e immagini devono sempre essere associati ad adeguate alternative testuali, di modo che possano essere interpretati correttamente dalle tecnologie assistive e dagli utenti che ne fanno uso. Questo articolo spiega come gestire l'accessibilità di questo tipo di contenuti.

+
+
+
Accessibilità per dispositivi mobili
+
L'uso di internet su dispositivi mobili è sempre più diffuso, e le principali piattaforme come iOS e Android sono dotate di numerosi strumenti per garantire l'accessibilità. È dunque importante prendere in considerazione l'accessibilità del tuo contenuto web su tali piattaforme. Questo articolo propone considerazioni sull'accessibilità specificamente pensate per dispositivi mobili.
+
+ +

Test di valutazione

+ +
+
Risoluzione di problemi di accessibilità 
+
Nella sezione di valutazione di questo modulo ti proponiamo un semplice sito web che presenta alcuni problemi di accessibilità che devi individuare e risolvere.
+
+ +

Vedi anche

+ + diff --git a/files/it/learn/accessibility/mobile/index.html b/files/it/learn/accessibility/mobile/index.html new file mode 100644 index 0000000000..46a2b24c4d --- /dev/null +++ b/files/it/learn/accessibility/mobile/index.html @@ -0,0 +1,336 @@ +--- +title: Accessibilità per dispositivi mobili +slug: Learn/Accessibilità/Accessibilità_dispositivi_mobili +tags: + - Accessibilità + - Articolo + - Mobile + - Principiante + - Responsivo + - Touchscreen + - imparare + - screenreader + - touch +translation_of: Learn/Accessibility/Mobile +--- +
+
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Accessibilità/Multimedia","Learn/Accessibility/Accessibility_troubleshooting", "Learn/Accessibilità")}}
+ +

L’uso di internet tramite dispositivi mobili è sempre più diffuso, e i sistemi operativi per dispositivi mobili più popolari, Android e iOS, sono dotati di strumenti nativi per l’accessibilità. È dunque importante prendere in considerazione l’accessibilità dei tuoi contenuti su tali piattaforme. Questo articolo tratta specificamente dell’accessibilità per dispositivi mobili.

+ + + + + + + + + + + + +
Prerequisiti:Conoscimenti basici sull'uso del computer, livello basico di HTML, CSS e JavaScript, e aver letto i precedenti articoli del corso.
Obiettivo:Comprendere i problemi di accessibilità relativi ai dispositivi mobili, e come risolverli.
+ +

Accessibilità per dispositivi mobili

+ +

Lo stato attuale dell’accessibilità, e del supporto degli standard web in generale, è buono nei dispositivi mobili moderni. Sono lontani i giorni in cui i dispositivi mobili utilizzavano tecnologie web completamente differenti dai browser per pc, obbligando gli sviluppatori a fornire siti completamente separati per le due piattaforme (anche se comunque molte aziende continuano a fornire un sito specifico per dispositivi mobili, di solito contenente la parola “mobile” nel dominio).

+ +

 

+ +

Oggigiorno, in generale, i dispositivi mobili non hanno problemi a visualizzare correttamente tutti i tipi di siti, e i principali sistemi operativi mobili hanno lettori di schermo nativi. I browser moderni per dispositivi mobili hanno anche un buon supporto per WAI-ARIA.

+ +

Per rendere un sito accessibile e usabile su dispositivi mobili devi solo rispettare le buone pratiche generali di disegno e accessibilità web.

+ +

 

+ +

Ci sono però alcune eccezioni che richiedono una attenzione particolare; le principali sono:

+ + + +

Riassunto dei test sui lettori di schermo per  Android e iOS

+ +

I più comuni sistemi operativi per dispositivi mobili hanno installati lettori di schermo nativi pienamente funzionanti. Questi funzionano praticamente alla stessa maniera dei lettori di schermo per pc, ma si usano con gesti touch invece che con combinazioni di tasti.

+ +

Prendiamo in considerazione i due principali lettori di schermo per dispositivi mobili: TalkBack per Android e VoiceOver per iOS.

+ +

Android TalkBack

+ +

 

+ +

TalkBack è il lettore di schermo presente di default su Android.

+ +

Per attivarlo, selezionaImpostazioni > Accessibilità > TalkBack, e premi lo switch di attivazione/disattivazione. Inoltre segui qualsiasi altra indicazione che il sistema ti fornisca.

+ +

Nota: versioni anteriori di TalkBack si attivano con metodi leggermente differenti.

+ +

Quando TalkBack è attivato, i controlli basici del tuo dispositivo Android presenteranno alcune differenze rispetto alla modalità normale. Per esempio:

+ +

 

+ +
    +
  1. Fare click sull’icona di una app la selezionerà senza aprirla, e il lettore pronuncerà il nome della app.
    2. +
  2. Fare swipe a destra o a sinistra farà selezionare un’altra app, oppure, se stai navigando un menu, un altro bottone/controllo. Il dispositivo leggerà ogni opzione man mano che le selezioni.
    3. +
  3. Fare doppio click aprirà la app selezionata o attiverà/disattiverà la opzione selezionata.
    4. +
  4. Puoi anche “esplorare col dito“: mantieni premuto il dito sullo schermo e fallo scorrere lungo la superficie dello stesso. Il dispositivo leggerà il nome delle varie app o oggetti su cui passerai il dito.
    5. +
+ +

Se vuoi disattivare TalkBack:

+ +
    +
  1. Naviga alle Impostazioni
    2. +
  2. Naviga a Accessibilità > TalkBack.
    3. +
  3. Naviga allo switch di attivazione/disattivazione e disattivalo.
    4. +
+ +

Nota: puoi navigare alla schermata di inizio in qualsiasi momento facendo swipe in alto e a sinistra lentamente. Se hai più di una schermata di inizio, puoi muoverti da una all’altra facendo swipe con due dita a destra e sinistra.

+ +

Per una lista più completa dei gesti che puoi usare con TalkBack, vedi Utilizzare i gesti TalkBack.

+ +

Sbloccare il telefono

+ +

Quando TalkBack è attivato, la procedura per sbloccare il telefono cambia leggermente.

+ +

Devi fare swipe con due dita dal basso verso l’alto. Se ci sono una password o un codice impostati, sarai reindirizzato allo schermo dove inserirli.

+ +

Puoi anche esplorare con il dito, troverai il bottone di sblocco nel centro della parte bassa dello schermo. Fai doppio click sul bottone per sbloccare lo schermo.

+ + + +

TalkBack ti permette di accedere ai menu contestuali locali e globali del dispositivo da qualunque punto del sistema operativo. I menu globali sono quelli che permettono di accedere ai controlli e alle opzioni generali del dispositivo, mentre i menu locali sono relativi alla applicazione o schermata in cui ti trovi al momento.

+ +

Per accedere ai menu:

+ +
    +
  1. Per accedere al menu globale, fai swipe veloce verso il basso e poi a destra.
    2. +
  2. Per accedere al menu locale, fai swipe veloce verso l’alto e poi a destra.
    3. +
  3. Fai swipe a sinistra o a destra per muoverti da una opzione all’altra.
    4. +
  4. Quando l’opzione che ti interessa è selezionata, fai doppio click per attivarla o disattivarla.
    5. +
+ +

Per maggiori dettagli su tutte le opzioni disponibili nei menu locali e globali, vedi Menu contestuali locali e globali.

+ + + +

Puoi usare il menu contestuale locale del browser per trovare le opzioni per navigare le pagine web usando gli headings, i campi dei formulari, i link, ecc., oppure navigare linea per linea.

+ +

Per esempio, con TalkBack attivato:

+ +
    +
  1. Apri il tuo web browser.
    2. +
  2. Attiva la barra URL.
    3. +
  3. Introduci l’url di una pagina web che ha una serie di headings, come per esempio la pagina bbc.co.uk. Per introdurre il testo dell’URL: +
      +
    • Seleziona la barra URL facendo swipe a destra/sinistra fino a trovarla, e poi fai doppio click.
      • +
    • Mantieni il dito premuto sulla tastiera virtuale fino a quando trovi il carattere che vuoi scrivere, e rilascia il dito per introdurlo. Ripeti il procedimento per ogni carattere.
      • +
    • Quando hai terminato, seleziona il tasto INVIO e premilo.
      • +
    +
    4. +
  4. Fai swipe a sinistra o destra per muoverti tra i differenti oggetti presenti sulla pagina.
    5. +
  5. Fai swipe in alto e a destra per aprire il menu contestuale locale.
    6. +
  6. Fai swipe a destra fino a trovare la opzione "Headings e punti di riferimento".
    7. +
  7. Fai doppio click per selezionarla. Ora puoi fare swipe a destra o sinistra per muoverti tra headings e punti di riferimento ARIA.
    8. +
  8. Per ritornare al modo di default, apri il menu contestuale locale facendo swipe in alto a destra, seleziona l’opzione “Default” e fai doppio click per attivarla.
    9. +
+ +

Nota: Vedi Guida introduttiva a TalkBack su Android per una documentazione più completa.

+ +

iOS VoiceOver

+ +

 

+ +

Una versione di VoiceOver per dispositivi mobili è inclusa in tutti i sistemi operativi iOS.

+ +

Per attivarlo, vai alla tua appImpostazionie selezionaGenerale>Accessibilità>VoiceOver. Premi lo switchVoiceOverper attivarlo (vedrai anche alcune altre opzioni relative a VoiceOver in questa pagina).

+ +

Quando VoiceOver sarà attivato, i controlli basici del sistema saranno leggermente diversi:

+ +

 

+ +
    +
  1. Un click singolo selezionerà l’oggetto su cui premi; il dispositivo pronuncerà il nome dell’oggetto selezionato.
    2. +
  2. Puoi inoltre navigare tra gli oggeti presenti sullo schermo facendo swipe a destra o sinistra per muoverti dall’uno all’altro, o facendo scorrere il dito per lo schermo. Quando troverai l’oggetto che vuoi attivare, rimuovi il dito dallo schermo per selezionarlo.
    3. +
  3. Per attivare l’oggetto dopo averlo selezionato, per esempio se vuoi aprire una applicazione, fai doppio click in qualsiasi punto dello schermo.
    4. +
  4. Fai swipe con tre dita per scorrere attraverso una pagina.
    5. +
  5. Fai click con due dita per eseguire una azione relativa al contesto corrente, come per esempio scattare una foto con la applicazione fotocamera aperta.
    6. +
+ +

Per disattivare VoiceOver, naviga aImpostazioni>Generale>Accessibilità>VoiceOver e premi lo switchVoiceOver.

+ +

Come usare il Rotore

+ +

Quando VoiceOver è attivo, avrai a tua disposizione una funzionalità dei navigazione chiamata Rotore, che ti permette di accedere rapidamente ad alcune opzioni di uso comune. Per usarlo:

+ +

Using the Rotor

+ +

When VoiceOver is turned on, you have a navigation feature called the Rotor available to you, which allows you to quickly choose from a number of common useful options. To use it:

+ +
    +
  1. Muovi due dita in circolo per lo schermo, come se stessi usando un vecchio telefono a disco. Il dispositivo pronuncerà il nome delle varie opzioni una dopo l’altra man mano che vai muovendo le dita. Puoi andare avanti e indietro mentre il dispositivo passa da un’opzione all’altra ciclicamente.
    2. +
  2. Quando hai trovato l’opzione che ti interessa: +
      +
    • Rimuovi le dita dallo schermo per selezionarla.
      • +
    • Se si tratta di una opzione il cui valore è aumentabile/diminuibile, come per esempio il Volume o la Velocità di Locuzione, puoi fare swipe verso l’alto o verso il basso per aumentare o diminuire il valore dell’opzione selezionata.
      • +
    +
    3. +
+ +

Le opzioni disponibili tramite il Rotore dipendono dal contesto: quando apri il Rotore le opzioni che troverai saranno relative all’applicazione o alla schermata in cui ti trovi (vedi qui sotto per un esempio).

+ + + +

Vediamo come navigare in internet usando VoiceOver:

+ +
    +
  1. Apri il tuo browser.
    2. +
  2. Attiva la barra URL.
    3. +
  3. Introduci l’url di una pagina web che ha una serie di headings, come per esempio la pagina bbc.co.uk. Per introdurre il testo dell’URL: +
      +
    • Seleziona la barra URL facendo swipe a destra o a sinistra fino a trovarla, e poi fai doppio click.
      • +
    • Mantieni il dito premuto sulla tastiera virtuale fino a quando trovi il carattere che vuoi scrivere, e rilascia il dito per selezionarlo. Fai doppio click per introdurlo. Ripeti il procedimento per ogni carattere.
      • +
    • Quando hai terminato, seleziona il tasto INVIO e premilo.
      • +
    +
    4. +
  4. Fai swipe a sinistra e a destra per muoverti tra i differenti oggetti presenti sulla pagina. Fai doppio click su un oggetto per selezionarlo (per esempio, per seguire un link).
    5. +
  5. L’opzione del Rotore selzionata per default è la Velocità di Locuzione; puoi fare swipe in su o in giù per aumentare o diminuire la velocità di locuzione del lettore di schermo.
    6. +
  6. Ora muovi due dita in circolo per lo schermo per aprire il Rotore e far scorrere le sue opzioni. Riportiamo qui alcuni esempi delle opzioni disponibili nel Rotore: +
      +
    • Velocità di locuzione: cambia la velocità di locuzione del dispositivo.
      • +
    • Contenitori: il lettore di schermo si muove per i vari contenitori semantici presenti nella pagina.
      • +
    • Headings: il lettore di schermo si muove per i vari heading presenti nella pagina.
      • +
    • Links: il lettore di schermo si muove per i vari link presenti nella pagina.
      • +
    • Controlli formulario: il lettore di schermo si muove per i vari campi dei formulari presenti nella pagina.
      • +
    • Lingue: cambia la lingua della pagina, se sono disponibili differenti traduzioni.
      • +
    +
    7. +
  7. Seleziona Headings. Ora potrai fare swipe in su e in giù per muoverti da un heading all’altro della pagina.
    8. +
+ +

Nota: per un riferimento più completo sui gesti disponibili in VoiceOver e altri suggerimenti sul testing dell’accessibilità in iOS, vedi Test Accessibility on Your Device with VoiceOver.

+ +

Meccanismi di controllo

+ +

Nel nostro articolo sull’accessibilità in CSS e JavaScript abbiamo preso in considerazione eventi che sono associati a specifici meccanismi di controllo (vedi eventi specifici del mousedel mouse). Per ricapitolare, tali eventi causano problemi di accessibilità, perchè altri meccanismi di controllo non possono attivare le funzionalità ad essi associate.

+ +

Ad esempio, l’evento click è ottimale in termini di accessibilità: un gestore di eventi associato ad esso può essere attivato cliccando con il mouse sull’elemento su cui l’evento è impostato, oppure selezionandolo tramite tasto TAB e premendo INVIO, oppure facendo click con un dito su un touchscreen. Prova il nostro esempio-di-bottone-semplice.html (vedi la versione live) per capire di cosa parliamo.

+ +

Altri eventi simili, come mousedown e mouseup possono creare problemi, in quanto i loro gestori di eventi non possono essere attivati usando controli alternativi al mouse.

+ +

Se provi a controllare il nostro esempio di simple-box-drag.html (vedi la versione live) tramite tastiera o touchscreen, capirai qual è il problema. Ciò succede perchè stiamo usando un codice come il seguente:

+ +
div.onmousedown = function() {
+  initialBoxX = div.offsetLeft;
+  initialBoxY = div.offsetTop;
+  movePanel();
+}
+
+document.onmouseup = stopMove;
+ +

Per abilitare altre forme di controllo, devi usare eventi alternativi equivalenti. Per esempio, gli eventi touch sono pensati specificamente per i dispositivi con touchscreen:

+ +
div.ontouchstart = function(e) {
+  initialBoxX = div.offsetLeft;
+  initialBoxY = div.offsetTop;
+  positionHandler(e);
+  movePanel();
+}
+
+panel.ontouchend = stopMove;
+ +

Presentiamo qui un semplice esempio che mostra come usare gli eventi mouse e touch insieme. Vedi  multi-control-box-drag.html (vedi la versione liveee the example live).

+ +

Nota: puoi vedere esempi di come implementare differenti meccanismi di controllo nell’articolo in inglese  Implementing game control mechanisms.

+ +

Disegno responsivo

+ +

 

+ +

Il disegno responsivo è la pratica di realizzare layout e altre caratteristiche delle applicazioni in una forma che cambia dinamicamente secondo alcuni fattori come le dimensioni dello schermo e la risoluzione dello stesso, di modo che le applicazioni siano usabili e accessibili a utenti che usano differenti tipi di dispositivi.

+ +

In particolare, gli aspetti più comuni del disegno responsivo che si devono prendere in considerazione per i dispositivi mobili sono:

+ +

 

+ + + +

Nota: non forniremo una spiegazione dettagliata delle tecniche di disegno responsivo qui, dato che sono già trattate in altri articoli presenti su questo sito (vedi i link qui sopra).

+ +

Considerazioni specifiche per dispositivi mobili

+ +

Ci sono altri importanti aspetti da prendere in considerazione per ottimizzare l’accessibilità dei siti sui dispositivi mobili. Riportiamo due esempi qui sotto, e in futuro speriamo di riuscire ad aggiungerne altri.

+ +

Non disabilitare lo zoom

+ +

Utilizzando viewport, è possibile disabilitare la funzionalità di zoom, ponendo il seguente codice nella <head>:

+ +
<meta name="viewport" content="user-scalable=no">
+ +

Non dovresti mai farlo, a meno che sia strettamente necessario. Molte persone infatti usano lo zoom per migliorare la visibilità e leggibilità del contenuto, e privare i tuoi utenti di tale possibilità non è una buona pratica. Ci sono alcune situazioni in cui l’uso dello zoom può effettivamente danneggiare la struttura dell’interfaccia utente; in tali casi, se davvero ritieni necessario disabilitare lo zoom, dovresti fornire una funzionalità equivalente, come per esempio dei controlli per aumentare le dimensioni del testo senza alterare altri elementi dell’interfaccia utente.

+ +

Accessibilità dei menu

+ +

È una pratica molto comune, quando un sito viene visualizzato su un dispositivo con schermo di dimensioni ridotte, usare media queries per ridurre il menu di navigazione a un semplice bottone o una icona, che quando vengono premuti si espandono mostrando gli elementi del menu in forma di menu drop-down, o menu a tendina. Di solito si utilizza una icona con tre linee orizzontali, nota come "menu ad hamburger".

+ +

 

+ +

Quando implementi un menu di questo tipo, devi assicurarti che l’”hamburger” sia accessibile con gli appropriati meccanismi di controllo (normalmente su dispositivo mobile vi si accede tramite touch), come discusso in {{anch("Meccanismi di controllo")}} più sopra, e che il resto della pagina sia nascosto o comunque disabilitato mentre il menu sia attivo, per evitare confusione durante l’utilizzo dello stesso.

+ +

Qui puoi trovare un buon esempio di menu ad hamburger.

+ +

Input dell’utente

+ +

Quando si usano dispositivi mobili, inserire dati è di solito un’esperienza più lenta e tediosa che il suo equivalente su pc o laptop. È molto più facile scrivere con una tastiera normale che con una virtuale o una di dimensioni ridotte.

+ +

Per tale ragione, vale la pena cercare di minimizzare il più possibile la quantità di dati da introdurre manualmente sui dispositivi mobili. Per esempio, se vuoi che gli utenti specifichino qual è il loro lavoro, invece di usare un campo di testo aperto puoi usare un menu a selezione {{htmlelement("select")}} contenente le opzioni più comuni (cosa che tra l’altro aiuta anche a migliorare la consistenza dei dati), e offrire tra le opzioni una categoria “Altro” che, se selezionata, fa comparire un campo di testo dove l’utente può scrivere liberamente per specificare la sua occupazione. Puoi vedere un esempio di questa idea alla pagina tipi-di-lavoro-comuni (vedi la versione live).

+ +

Inoltre, vale la pena prendere in considerazione l’uso di tipi di input HTML5 nativi, come per esempio il tipo “date”, che su dispositivi mobili Androd e iOS vengono gestiti automaticamente da widget nativi integrati all’interfaccia che l’utente è già abituato a usare sul dispositivo. Vedi esempi-formulari-html5.html per alcuni esempi (vedi anche la versione live). Prova a visualizzare e usare questi esempi su un dispositivo mobile.

+ +

 

+ +

Alcuni esempi di tipi di input HTML5 e come appaiono quando sono usati da dispositivo mobile:

+ +

 

+ + + +

Se vuoi fornire una versione della tua applicazione specifica per dispositivi mobili e diversa da quella per pc e laptop, puoi usare una tecnologia di feature detection per rilevare il tipo di dispositivo su cui l’applicazione viene visualizzata. Vedi l’articolo in inglese  input types per maggiori informazioni sui differenti tipi di input, e anche il nostro articolo in inglese sulla feature detection.

+ +

Riassunto

+ +

In questo articolo abbiamo riportato alcuni dettagli sui più comuni problemi di accessibilità su dispositivi mobili, e alcune linee guida su come superarli. Abbiamo inoltre fornito indicazioni sull’uso dei più comuni lettori di schermo per dispositivi mobili, per aiutarti nella realizzazione di test di accessibilità.

+ +

Vedi anche

+ + + +
{{PreviousMenuNext("Learn/Accessibilità/Multimedia","Learn/Accessibilità/Accessibility_troubleshooting", "Learn/Accessibilità")}}
+ +
+

In questo modulo

+ + +
+
diff --git a/files/it/learn/accessibility/multimedia/index.html b/files/it/learn/accessibility/multimedia/index.html new file mode 100644 index 0000000000..f920e59050 --- /dev/null +++ b/files/it/learn/accessibility/multimedia/index.html @@ -0,0 +1,392 @@ +--- +title: Accessibilità multimediale +slug: Learn/Accessibilità/Multimedia +tags: + - Accessibilità + - Articolo + - Audio + - Didascalie + - HTML + - Immagine + - JavaScript + - Multimedia + - Principiante + - Sottotitoli + - Tracce testuali + - Video +translation_of: Learn/Accessibility/Multimedia +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Accessibilità/WAI-ARIA_basics","Learn/Accessibilità/Mobile", "Learn/Accessibilità")}}
+ +

Un’altra categoria di contenuti che possono dare problemi di accessibilità sono gli elementi multimediali: audio, video e immagini devono sempre essere associati ad adeguate alternative testuali, di modo che possano essere interpretati correttamente dalle tecnologie assistive e dagli utenti che ne fanno uso. Questo articolo spiega come gestire l’accessibilità di questo tipo di contenuti.

+ + + + + + + + + + + + +
Prerequisiti:Conoscimenti basici sull'uso del computer, livello basico di HTML, CSS e JavaScript, e una idea chiara di cosa è l'accessibilità.
Obiettivo:Comprendere i problemi di accessibilità relativi agli elementi multimediali, e come risolverli.
+ +

Multimedia e accessibilità

+ +

Fino ad ora in questo modulo sull’accessibilità abbiamo preso in considerazione le procedure necessarie per rendere accessibili una varietà di contenuti: da semplice contenuto testuale a tabelle di dati, immagini, controlli nativi come campi di formulari e bottoni, e anche strutture e intefacce più complesse (con le quali si usano gli attributi WAI-ARIA).

+ +

Questo articolo si occupa di un’altra classe di contenuti per i quali solitamente non è facile garantire una buona accessibilità: i contenuti multimediali. Immagini, video, elementi <canvas>, filmati Flash ecc. non sono facili da interpretare per i lettori di schermo, né da navigare tramite tastiera.

+ +

Ma non ti preoccupare, in questo articolo ti mostreremo le tecniche disponibili per rendere il contenuto multimediale accessibile.

+ +

Immagini

+ +

Abbiamo già discusso delle alternative testuali per le immagini in HTML nell’articolo HTML: una buona base per l’accessibilità: fai riferimento all’articolo per maggiori dettagli. Riassumendo in poche parole l’articolo, per garantire l’accessibilità delle immagini devi assicurarti che al contenuto visuale sia associato un testo alternativo che descriva dettagliatamente l’immagine, e che tale contenuto possa essere letto dai lettori di schermo.

+ +

Per esempio:

+ +
<img src="dinosaur.png"
+     alt="Un Tirannosauro Rex: un dinosauro bipede che sta in piedi come un umano, con braccia piccole e una grande testa con denti aguzzi.">
+
+ +

Controlli audio e video accessibili

+ +

Implementare controlli di riproduzione per elementi audio e video non dovrebbe essere un problema no? Diamo un’occhiata.

+ +

Il problema con i controlli nativi in HTML5

+ +

Gli elementi audio e video di HTML5 hanno un set di controlli nativi che permettono di gestire la riproduzione dei contenuti multimediali. Per esempio (vedi native-controls.html, codice sorgente e versione live):

+ +
<audio controls>
+  <source src="viper.mp3" type="audio/mp3">
+  <source src="viper.ogg" type="audio/ogg">
+  <p>Il tuo browser non supporta l’audio in HTML5. Puoi scaricare il file per ascoltarlo. Qui trovi il <a href="viper.mp3">link al file audio.</p>
+</audio>
+
+<br>
+
+<video controls>
+  <source src="rabbit320.mp4" type="video/mp4">
+  <source src="rabbit320.webm" type="video/webm">
+  <p>Il tuo browser non supporta i video in HTML5. Puoi scaricare il file per visualizzarlo. Qui trovi il <a href="rabbit320.mp4"> link al file video.</p>
+</video>
+ +

L’attributo controls fornisce il bottone play/pausa, uno slider di posizionamento e altri controlli basici di un lettore multimediale generico. In Firefox e Chrome i controlli HTML5 hanno questo aspetto:

+ +

Screenshot of Video Controls in Firefox

+ +

Screenshot of Video Controls in Chrome

+ +

Tuttavia, ci sono alcuni problemi associati a questi controlli:

+ + + +

Per porre rimedio a queste limitazioni, possiamo creare i nostri propri controlli personalizzati. Vediamo come fare.

+ +

Creare controlli audio e video personalizzati

+ +

Gli elementi audio e video di HTML5 hanno in comune una API, chiamata HTML Media Element, che permette di applicare funzionalità personalizzate ai bottoni e ad altri controlli definiti dallo sviluppatore.

+ +

Aggiungiamo ora controlli personalizzati al video di esempio qui sopra.

+ +

Setup basico

+ +

 

+ +

Per prima cosa, salva una copia dei file controlli-custom-start.html, controlli-custom-controls.css, rabbit320.mp4 e rabbit320.webm in una cartella del tuo hard-disk.

+ +

Crea un nuovo file chiamato main.js e salvalo nella stessa cartella.

+ +

Ora diamo un’occhiata al codice HTML del lettore video:

+ +
<section class="player">
+  <video controls>
+    <source src="rabbit320.mp4" type="video/mp4">
+    <source src="rabbit320.webm" type="video/webm">
+    <p>Il tuo browser non supporta i video in HTML5. Puoi scaricare il file per visualizzarlo. Qui trovi il <a href="rabbit320.mp4"> link al file video.</p>
+  </video>
+
+  <div class="controls">
+    <button class="playpause">Play</button>
+    <button class="stop">Stop</button>
+    <button class="rwd">Rwd</button>
+    <button class="fwd">Fwd</button>
+    <div class="time">00:00</div>
+  </div>
+</section>
+ +

Setup basico di JavaScript

+ +

 

+ +

Abbiamo inserito alcuni bottoni nella barra dei controlli posizionata sotto al video. Tali controlli ovviamente non funzionano di default; è necessario usare JavaScript per assegnargli una funzionalità.

+ +

Innanzitutto dobbiamo creare variabli di riferimento per ognuno dei controlli. Aggiungi il seguente codice al tuo file JavaScript:

+ +

 

+ +
var playPauseBtn = document.querySelector('.playpause');
+var stopBtn = document.querySelector('.stop');
+var rwdBtn = document.querySelector('.rwd');
+var fwdBtn = document.querySelector('.fwd');
+var timeLabel = document.querySelector('.time');
+ +

In seguito dobbiamo creare una variabile di riferimento al lettore audio/video stesso. Aggiungi questa linea al codice aggiunto in precedenza:

+ +
var player = document.querySelector('video');
+ +

 

+ +

Questa variabile fa riferimento a un oggetto HTMLMediaElement, che contiene numerosi metodi e proprietà che si possono usare per assegnare funzionalità ai nostri bottoni.

+ +

Prima di procedere ad assegnare funzionalità ai nostri bottoni rimuoviamo i controlli nativi, di modo che non si possano verificare conflitti con i nostri controlli personalizzati. Aggiungi il seguente codice, al fondo del tuo file JavaScript:

+ +

 

+ +
player.removeAttribute('controls');
+ +

Usando questo metodo, anziché quello di evitare di includere l’attributo controls dal principio, ha il vantaggio che, se il nostro codice JavaScript smettesse di funzionare per una qualsiasi ragione, i controlli nativi si riattiveranno automaticamente, permettendo agli utenti di continuare a usare i contenuti multimediali.

+ +

Collegare i nostri bottoni

+ +

Come primo passo, attiviamo il bottone Play/pausa. Possiamo alternare gli stati di play e pausa usando una semplice funzione condizionale, come la seguente. Aggiungila al fondo del tuo codice JavaScript:

+ +
playPauseBtn.onclick = function() {
+  if(player.paused) {
+    player.play();
+    playPauseBtn.textContent = 'Pause';
+  } else {
+    player.pause();
+    playPauseBtn.textContent = 'Play';
+  }
+};
+ +

In seguito, aggiungi questo codice, che controlla il bottone Stop:

+ +
stopBtn.onclick = function() {
+  player.pause();
+  player.currentTime = 0;
+  playPauseBtn.textContent = 'Play';
+};
+ +

 

+ +

Non esiste una funzione stop() nativa negli elementi HTMLMediaElement, dunque al suo posto usiamo pause(), e allo stesso tempo resettiamo a zero il tempo di riproduzione currentTime.

+ +

Aggiungiamo ora i bottoni Riavvolgimento e Avanzamento Rapido. Aggiungi i seguenti blocchi di codice in fondo al file:

+ +

 

+ +
rwdBtn.onclick = function() {
+  player.currentTime -= 3;
+};
+
+fwdBtn.onclick = function() {
+  player.currentTime += 3;
+  if(player.currentTime >= player.duration || player.paused) {
+    player.pause();
+    player.currentTime = 0;
+    playPauseBtn.textContent = 'Play';
+  }
+};
+ +

 

+ +

Questi bottoni sono controlli molto basici, non fanno altro che far avanzare o tornare indietro il video di 3 secondi ogni volta che vengono cliccati. In una applicazione reale probabilmente vorrai aggiungere uno slider di posizionamento più elaborato o qualcosa di simile.

+ +

Nota inoltre che ogni volta che il bottone di Avanzamento Rapido viene cliccato controlliamo se il momento attuale della riproduzione currentTime è maggiore del tempo totale duration, o se la riproduzione è in pausa. Se una delle due condizioni è vera fermiamo la riproduzione del video, per evitare che si verifichino errori nel lettore multimediale se l’utente cerca di avanzare oltre la fine del video o quando il video si trova in stato di pausa.

+ +

Come ultimo passo, aggiungi questo codice al fondo del file, per controllare il display del tempo trascorso:

+ +
player.ontimeupdate = function() {
+  var minutes = Math.floor(player.currentTime / 60);
+  var seconds = Math.floor(player.currentTime - minutes * 60);
+  var minuteValue;
+  var secondValue;
+
+  if (minutes<10) {
+    minuteValue = "0" + minutes;
+  } else {
+    minuteValue = minutes;
+  }
+
+  if (seconds<10) {
+    secondValue = "0" + seconds;
+  } else {
+    secondValue = seconds;
+  }
+
+  mediaTime = minuteValue + ":" + secondValue;
+  timeLabel.textContent = mediaTime;
+};
+ +

Ogni volta che il tempo si aggiorna (ogni secondo), questa funzione viene eseguita. A partire dal valore di currentTime, che si esprime in secondi, la funzione calcola il numero di minuti e secondi trascorsi, aggiunge uno 0 davanti al numero di minuti o secondi se tale numero è inferiore a 10, dà al risultato il formato “minuti:secondi” e infine lo invia al display timeLabel perchè sia mostrato all’utente.

+ +

Ulteriori letture

+ +

Quanto spiegato finora ti dà un’idea basica di come aggiungere funzionalità personalizzate ai lettori audio/video. Per maggiori informazioni su come aggiungere funzionalità più complesse, incluso come utilizzare Flash come fallback per i browser più vecchi, vedi gli articoli (in inglese):

+ + + +

Abbiamo inoltre creato un esempio avanzato che mostra come si può creare un sistema orientato ad oggetti che trova ogni lettore audio o video presente in una pagina e gli aggiunge i nostri controlli personalizzati. Vedi custom-controls-oojs (qui trovi il codice sorgente).

+ +

Trascrizioni audio

+ +

Per rendere i contenuti audio accessibili alle persone con difficoltà auditive devi ricorrere a trascrizioni testuali. Le trascrizioni possono includersi nella stessa pagina dove l’audio viene riprodotto, o in una pagina separata collegata ad essa con un link.

+ +

Dal punto di vista pratico, le opzioni per la creazione delle trascrizioni sono:

+ + + +

NON è una buona pratica quella di pubblicare del contenuto audio e promettere di pubblicare le trascrizioni in un secondo momento. Spesso tali promesse non vengono compiute, danneggiando la fiducia che gli utenti ripongono in chi pubblica il contenuto. Nel caso in cui l’audio che si pubblica sia un dialogo o un evento come una conferenza pubblica, è accettabile pubblicare note riassuntive del contenuto insieme all’audio.

+ +

Esempi di trascrizioni

+ +

Se ricorri a un servizio di trascrizione automatico, probabilmente dovrai usare l’interfaccia utente fornita dal servizio. Per esempio, apri il video Audio Transcription Sample 1 e clicca sui tre puntini delle opzioni aggiuntive. In seguito clicca su Apri trascrizione.

+ +

Se stai creando una interfaccia personalizzata per presentare il tuo contenuto audio e le relative trascrizioni, tieni in considerazione l’idea di includere un pannello-trascrizioni che appare/scompare; vedi il nostro esempio audio-transcript-iu  (vedi anche il codice sorgente).

+ +

Descrizioni audio

+ +

 

+ +

Se al contenuto audio è associato anche un contenuto visuale, devi fornire descrizioni audio di tale contenuto visuale.

+ +

In molti casi si tratterà di contenuto video, e in tal caso puoi associargli didascalie usando le tecniche descritte nella prossima sezione di questo articolo.

+ +

 

+ +

Tuttavia ci sono dei casi limite. Per esempio, potresti dover pubblicare una registrazione audio di una conferenza durante la quale si fa riferimento a una risorsa visuale, come una tabella o un grafico. In tali casi, dovresti fare in modo che tali risorse vengano fornite insieme all’audio e alla trascrizione, avendo cura di porre un link alle risorse nel punto della trascrizione in cui si fa riferimento ad esse. Questo procedimento sarà di aiuto a tutti gli utenti, non solo alle persone con difficoltà auditive.

+ +
+

Nota: una trascrizione audio sarà utile a vari tipi di utente. Oltre a permettere alle persone con difficoltà auditive di accedere al contenuto audio, sarà molto utile anche agli utenti che navigano con una connessione lenta, che probabilmente preferiscono non scaricare il contenuto audio. Pensa inoltre a un utente che si trova in un ambiente rumoroso, come un pub, e non può udire il contenuto audio correttamente.

+
+ +

Tracce testuali nei video

+ +

Per rendere i contenuti video accessibili a persone con difficoltà auditive o visive, e anche ad altri gruppi di utenti, come per esempio quelli che non capiscono la lingua che si parla nel video, devi associare al contenuto video una traccia testuale.

+ +
+

Nota: le tracce testuali sono utili ad ogni tipo di utente, non solo a chi ha una disabilità. Per esempio, un utente potrebbe non essere in grado di udire l’audio perchè si trova in un ambiente rumoroso, come un bar affollato, o un altro potrebbe decidere di togliere l’audio a un video per non disturbare chi gli sta vicino, se si trova per esempio in una biblioteca.

+
+ +

Non si tratta certo di un concetto nuovo, le stazioni televisive usano le tracce testuali già da moltissimo tempo:

+ +

Frame from an old-timey cartoon with closed captioning "Good work, Goldie. Keep it up!"

+ +

Molti paesi trasmettono i film in inglese con sottotitoli nella lingua del paese, e spesso nei film in DVD si trovano disponibili tracce testuali in varie lingue. Per esempio:

+ +

An English film with German subtitles "Emo, warum erkennst du nicht die Schonheit dieses Ortes?"

+ +

Esistono diversi tipi di traccia testuale, con differenti scopi. I tipi principali sono:

+ + + +

Implementare le tracce testuali in HTML5

+ +

Le tracce testuali da mostrarsi associate a un video in HTML5 devono essere scritte in WebVTT, un formato che contiene stringhe di testo associate a metadati come il momento del video in cui si desidera mostrare ogni stringa, e anche informazioni sullo stile e il posizionamento della stringa. Tali stringhe di testo sono chiamate “cues”.

+ +

Un file WebVTT tipico è più o meno così:

+ +
WEBVTT
+
+1
+00:00:22.230 --> 00:00:24.606
+Questo è il primo sottotitolo.
+
+2
+00:00:30.739 --> 00:00:34.074
+Questo è il secondo.
+
+  ...
+ +

To get this displayed along with the HTML media playback, you need to:

+ + + +

Un esempio:

+ +
<video controls>
+    <source src="example.mp4" type="video/mp4">
+    <source src="example.webm" type="video/webm">
+    <track kind="subtitles" src="subtitles_en.vtt" srclang="en">
+</video>
+ +

Il risultato sarà un video sottotitolato, simile a questo: 

+ +

Video player with standard controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."

+ +

Per maggiori dettagli leggi l’articolo (in inglese) Adding captions and subtitles to HTML5 video. Puoi trovare l’esempio che appare nell’articolo su Github, scritto da Ian Devlin (vedi anche il codice sorgente). Questo esempio, tramite l’uso di JavaScript, permette agli utenti di scegliere tra differenti sottotitoli. Nota che, per attivare i sottotitoli, devi premere il bottone “CC” e selezionare una opzione tra inglese, tedesco o spagnolo.

+ +
+

Nota: le tracce testuali e le trascrizioni contribuiscono anche al SEO, poichè i motori di ricerca danno molta importanza al contenuto testuale. Le tracce testuali possono perfino permettere ai motori di ricerca di ridirigere l’utente a un punto specifico del video.

+
+ +

Altro contenuto multimediale

+ +

Le sezioni precedenti non trattano tutti i tipi di contenuto multimediale che potresti voler usare sul tuo sito o applicazione. Potresti trovarti a dover gestire giochi, animazioni, slideshow, video inseriti da fonti esterne, o altro contenuto creato usando tecnologie come:

+ + + +

Per tali contenuti è necessario gestire i problemi di accessibilità secondo ogni caso particolare. In alcuni casi non è particolarmente difficile, per esempio:

+ + + +

Tuttavia, ci sono altri tipi di contenuto multimediale per i quali non è facile implementare l’accessibilità. Per esempio, se stai lavorando su un gioco immersivo in 3D o una applicazione di realtà virtuale, è realmente difficile fornire alternative testuali per tale tipo di esperienza. D’altro canto si può obiettare che le persone con vista ridotta non sono parte del target di pubblico di tali applicazioni.

+ +

Dovresti comunque assicurarti che tale tipo di applicazioni abbiano un contrasto dei colori ottimale, di modo che siano più facilmente visualizzabili a persone con vista ridotta o daltonismo. Inoltre dovresti fare tutto il possibile per renderli accessibili da tastiera. Ricorda che è necessario cercare di fare sempre tutto il possibile invece di puntare al 100% dell’accessibilità in ogni situazione, un obiettivo spesso impossibile da raggiungere.

+ +

Riassunto

+ +

Questo articolo ha fornito una sintesi dei problemi di accessibilità relativi ai contenuti multimediali, e inoltre alcune soluzioni pratiche a tali problemi.

+ +

{{PreviousMenuNext("Learn/Accessibilità/WAI-ARIA_basics","Learn/Accessibilità/Mobile", "Learn/Accessibilità")}}

+ +

 

+ +

In questo modulo

+ + + +

 

diff --git a/files/it/learn/accessibility/wai-aria_basics/index.html b/files/it/learn/accessibility/wai-aria_basics/index.html new file mode 100644 index 0000000000..09891c8a11 --- /dev/null +++ b/files/it/learn/accessibility/wai-aria_basics/index.html @@ -0,0 +1,422 @@ +--- +title: Basi della tecnologia WAI-ARIA +slug: Learn/Accessibilità/WAI-ARIA_basics +tags: + - ARIA + - Accessibilità + - Articolo + - Guida + - HTML + - HTML semantico + - JavaScript + - Principiante + - WAI-ARIA +translation_of: Learn/Accessibility/WAI-ARIA_basics +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Accessibilità/CSS_e_JavaScript_accessibilità","Learn/Accessibilità/Multimedia", "Learn/Accessibilità")}}
+ +

Proseguendo i temi trattati nell'articolo precedente, può risultare complicato creare elementi di interfaccia utente accessibili quando gli stessi si basano su HTML non semantico e presentano contenuto aggiornato dinamicamente tramite JavaScript. La tecnologia WAI-ARIA può essere d'aiuto aggiungendo valore semantico addizionale, che i browser e le tecnologie assistive possono riconoscere e utilizzare per permettere agli utenti di decifrare più chiaramente il contesto e ciò che sta accadendo durante la navigazione del sito. In questo articolo vedremo come usare questa tecnologia a un livello basico per migliorare l'accessibilità.

+ + + + + + + + + + + + +
Prerequisiti:Conoscimenti basici sull'uso del computer, livello basico di HTML, CSS e JavaScript, aver letto i precedenti articoli del corso.
Obiettivo:Acquisire familiarità con la tecnologia WAI-ARIA e imparare a usarla dove necessario per fornire valore semantico addizionale che migliori l'accessibilità.
+ +

Cosa è WAI-ARIA?

+ +

Cominciamo col dare un'occhiata a cosa è WAI-ARIA, e in che modo ci può essere utile.

+ +

Un nuovo set di problemi

+ +

Man mano che le applicazioni web cominciarono ad essere sempre più complesse e dinamiche, nuovi problemi di accessibilità iniziarono a manifestarsi.

+ +

Per esempio, HTML5 ha introdotto alcuni elementi semantici per definire componenti di uso comune nelle pagine ({{htmlelement("nav")}}, {{htmlelement("footer")}}, ecc.). Prima dell'arrivo di questi elementi, gli sviluppatori si limitavano a usare {{htmlelement("div")}} con ID o classi, per esempio <div class="nav">. Ma questi elementi erano problematici, perchè non fornivano un sistema standard per individuare programmaticamente i componenti di una pagina, dunque i lettori di schermo non potevano distinguere chiaramente le varie sezioni da cui la pagina era composta. 

+ +

La soluzione inizialmente consisteva nell’aggiungere uno o più link nascosti nella parte alta della pagina. Tali link reindirizzavano alle varie sezioni della pagina, come per esempio la barra di navigazione:

+ +
<a href="#hidden" class="hidden">Vai alla barra di navigazione</a>
+ +

 

+ +

Ma questo sistema non è molto preciso, e può essere usato solo quando il lettore di schermo comincia a leggere dalla parte alta della pagina.

+ +

Per fare un altro esempio, ad un certo punto le applicazioni cominciarono a includere controlli complessi come selezionatori di data o slider per selezionare valori. HTML5 mette a disposizione alcuni tipi speciali di input nativi, specifici per tali controlli:

+ +
<input type="date">
+<input type="range">
+ +

Ma questi elementi non sono supportati da tutti i browser, ed inoltre sono molto difficili da personalizzare, rendendoli complicati da integrare nel disegno di un sito. Di conseguenza, gli sviluppatori spesso fanno uso di librerie JavaScript e creano tali controlli come una serie di {{htmlelement("div")}} annidati o elementi di una tabella a cui assegnano classi, e in seguito li personalizzano con CSS e li controllano con funzioni di JavaScript.

+ +

Il problema di questo metodo è che i lettori di schermo non riescono ad interpretare di cosa si tratta, e riportano solo la presenza di una serie di elementi dei quali non possono descrivere la funzione.

+ +

E arrivò WAI-ARIA

+ +

WAI-ARIA è una specifica, cioè una raccolta di indicazioni, prodotta dal W3C, che definisce una serie di attributi HTML addizionali che possono essere applicati agli elementi per fornire maggior valore semantico e migliorare l'accessibilità dovunque sia necessario. Ci sono tre caratteristiche principali definite nella raccolta:  

+ + + +

Un punto importante da tenere in considerazione riguardo gli attributi WAI-ARIA è che non influiscono in alcun modo sulla pagina, eccetto che sulle informazioni fornite dalla API di accessibilità del browser (dalla quale i lettori di schermo prendono le informazioni). WAI-ARIA non cambia la struttura della pagina, il DOM o altro, anche se i suoi attributi possono essere utili per selezionare gli elementi in CSS.

+ +
+

Nota: puoi trovare una utile lista di tutti i ruoli ARIA e i loro usi, con link a informazioni più approfondite, nella specifica WAI-ARIA: vedi Definizione di Ruoli (in inglese).

+ +

La specifica contiene anche una lista delle proprietà e degli stati, con link ad ulteriori informazioni. Vedi  Definizioni di Stati e Proprietà (in inglese).

+
+ +

Dove è supportata WAI-ARIA?

+ +

A questa domanda non è facile rispondere. È difficile trovare  una risorsa che indichi in maniera completa quali funzionalità di WAI-ARIA sono supportate e dove, perchè:

+ +
    +
  1. Ci sono molte funzionalità nella specifica WAI-ARIA.
    2. +
  2. Ci sono moltissime combinazioni possibili di sistemi operativi, browser e lettori di schermo.
    3. +
+ +

L'ultimo punto è fondamentale: per poter usare un lettore di schermo il tuo sistema operativo deve avere installato almeno un browser con la necessaria API di accessibilità, che fornisca ai lettori di schermo le informazioni necessarie perchè funzionino. La maggior parte dei sistemi operativi ha di serie uno o due browser che funzionano con i lettori di schermo. Sul sito di Paciello Group si può trovare una guida aggiornata costantemente che fornisce dati sul supporto dei lettori di schermo nei vari sistemi operativi. Vedi l'articolo (in inglese) Guida: browser, sistemi operativi e supporto per i lettori di schermo.

+ +

Il seguente passo è assicurarsi che i browser usati supportino la tecnologia ARIA e la trasmettano tramite le loro API, ma anche che i lettori di schermo riconoscano le informazioni che ricevono e le presentino agli utenti in una forma ottimale.

+ +
    +
  1. Il supporto dei browser in generale è molto buono. Al momento della stesura di questo articolo, il sito caniuse.com riporta un livello globale di supporto di WAI-ARIA nei vari browser di circa l'88%.
    2. +
  2. Il supporto di ARIA nei lettori di schermo non è al momento a un livello comparabile, ma i lettori di schermo più popolari stanno facendo grandi sforzi per migliorare la compatibilità con WAI-ARIA.  Puoi farti un'idea del livello di supporto leggendo l'articolo (in inglese) Compatibilità dei lettori di schermo con WAI-ARIA .
    3. +
+ +

In questo articolo non spiegheremo tutte le funzionalità di WAI-ARIA e i dettagli sul supporto che hanno. Cercheremo invece di presentare le funzionalità più importanti e utili agli sviluppatori web; in generale se non facciamo riferimento al livello di supporto di una funzionalità, puoi considerare che il supporto è ragionevolmente buono. In caso di eccezioni lo indicheremo esplicitamente.

+ +
+

Nota: alcune librerie JavaScript supportano WAI-ARIA. Ciò significa che quando generano elementi IU, come per esempio formulari complessi, aggiungono automaticamente attributi ARIA per migliorarne l'accessibilità. Se stai valutando l'utilizzo di una libreria Javascript per sviluppare elementi IU più rapidamente, dovresti tenere in conto il livello di accessibilità della libreria quando scegli quale usare. Buoni esempi sono jQuery UI (vedi l'articolo in inglese jQuery UI: supporto all'accessibilità), ExtJS, e Dojo/Dijit.

+
+ +

Quando dovresti usare WAI-ARIA?

+ +

Abbiamo già discusso di alcuni dei problemi che hanno spinto alla creazione di WAI-ARIA, dovuti soprattutto alla crescente complessità delle moderne applicazioni web. Essenzialmente ci sono 4 grandi aree in cui WAI-ARIA è utile: 

+ +
    +
  1. Indicatori/riferimenti: gli attributi role possono funzionare come descrizioni che fanno riferimento a elementi HTML5 replicandone il valore semantico (per esempio {{htmlelement("nav")}}), oppure possono andare oltre HTML5, e funzionare come indicatori che descrivono differenti aree funzionali, per esempio search, tabgroup, tab, listbox, ecc.
    2. +
  2. Aggiornamento dinamico del contenuto: i lettori di schermo in generale hanno difficoltà a indicare quando il contenuto subisce cambiamenti; con ARIA possiamo usare aria-live per indicare agli utenti che usano lettori di schermo quando un' area del contenuto viene aggiornata, per esempio tramite XMLHttpRequest, o DOM APIs .
    3. +
  3. Migliorare l'accessibilità da tastiera: ci sono elementi HTML che hanno accessibilità da tastiera nativa; quando però invece di usare tali elementi se ne usano altri che li "simulano" in combinazione con JavaScript, l'accessibilità da tastiera e la qualità di lettura dei lettori di schermo ne risentono. In questi casi possiamo usare WAI-ARIA per dare focus a tali elementi  (usando tabindex).
    4. +
  4. Accessibilità dei controlli non semantici: quando si usano una serie di <div> annidati in combinazione con CSS e JavaScript per creare una funzionalità IU particolarmente complessa, oppure quando un controllo nativo viene notevolmente modificato tramite JavaScript, l'accessibilità può risultare danneggiata. Gli utenti che usano lettori di schermo troveranno difficile capire come funzionano tali elementi se non ci sono indicazioni semantiche che lo spieghino. In situazioni come queste la tecnologia ARIA può aiutare a fornire le indicazioni necessarie tramite una combinazione di ruoli come button, listbox, o tabgroup, e proprietà come aria-required o aria-posinset.
    5. +
+ +

Ricorda: dovresti ricorrere a WAI-ARIA solo quando è necessario! Idealmente, dovresti usare sempre funzionalità HTML native per fornire le indicazioni semantiche necessarie ai lettori di schermo per interpretare correttamente il contesto. A volte però ciò non è possibile, forse perchè non hai pieno controllo sul codice, o perchè stai creando qualcosa di particolarmente complesso, che non puoi implementare con un elemento HTML standard. In tali casi, WAI-ARIA può essere un utile strumento di miglioramento dell'accessibilità. 

+ +

Ma ricorda, usala solo quando è necessario!

+ +
+

Nota: cerca di testare il tuo sito con la maggior varietà possibile di utenti reali: persone non disabili, persone che usano lettori di schermo, persone che navigano con la tastiera, ecc. Queste persone sapranno indicarti cosa funziona e cosa no in maniera molto più accurata di ciò che può emergere se ti limiti ad effettuare test di utilizzo in prima persona.

+
+ +

Esempi di uso pratico di WAI-ARIA 

+ +

Nella prossima sezione analizzeremo le 4 aree di utilizzo di WAI-ARIA più dettagliatamente, e forniremo alcuni esempi pratici. Prima di continuare però, dovresti attivare un lettore di schermo, per poter testare alcuni degli esempi.

+ +

Vedi la sezione (in inglese) sul testing con lettori di schermo per maggiori informazioni.

+ +

Indicatori/riferimenti

+ +

WAI-ARIA trasmette ai browser l'attributo role, che permette di aggiungere valore semantico extra agli elementi del tuo sito dovunque sia necessario. La principale utilità di questo attributo è che permette agli utenti che usano lettori di schermo di individuare più facilmente gli elementi più comuni delle pagine. Vediamo un esempio:  il nostro sito senza attributi role (vedi la versione live) ha la seguente struttura:

+ +
<header>
+  <h1>...</h1>
+  <nav>
+    <ul>...</ul>
+    <form>
+      <!-- search form  -->
+    </form>
+  </nav>
+</header>
+
+<main>
+  <article>...</article>
+  <aside>...</aside>
+</main>
+
+<footer>...</footer>
+ +

Se provi a navigare il sito con un lettore di schermo in un browser moderno, riceverai diverse informazioni utili. Per esempio, VoiceOver fornisce le seguenti indicazioni:

+ + + +

Se ti rechi nella sezione Rotore di VoiceOver (premendo VO-U), vedrai che la maggior parte degli elementi più importanti sono elencati ordinatamente e si può accedere ad essi rapidamente.

+ +

+ +

Ma in realtà, la situazione è migliorabile. Il campo di ricerca è un punto di riferimento importante che gli utenti vorranno trovare, ma non compare nella lista degli elementi e non è trattato come un elemento di riferimento, a parte l'indicazione che si tratta di una casella di ricerca (<input type="search">). Inoltre, alcuni browser più vecchi (per esempio IE8), non riconoscono le indicazioni semantiche degli elementi HTML5. 

+ +

Possiamo migliorare il tutto usando alcune funzionalità ARIA. Per prima cosa aggiungiamo alcuni attributi role alla nostra struttura HTML. Il nostro  esempio di sito con ruoli aria (vedi la versione live) ha la seguente struttura:

+ +
<header>
+  <h1>...</h1>
+  <nav role="navigation">
+    <ul>...</ul>
+    <form role="search">
+      <!-- search form  -->
+    </form>
+  </nav>
+</header>
+
+<main>
+  <article role="article">...</article>
+  <aside role="complementary">...</aside>
+</main>
+
+<footer>...</footer>
+ +

C'è anche una funzionalità bonus in questo esempio: all'elemento {{htmlelement("input")}} è stato assegnato l'attributo aria-label, che fornisce ai lettori di schermo un’etichetta descrittiva, anche se non abbiamo incluso un elemento {{htmlelement("label")}}. In casi come questo è molto utile usare l’attributo ARIA. Un campo di ricerca è infatti un elemento molto comune e facilmente riconoscibile, e aggiungere una etichetta visuale potrebbe danneggiare il disegno della pagina.

+ +
<input type="search" name="q" placeholder="Scrivi qui ciò che vuoi cercare" aria-label="Campo per cercare nel contenuto del sito">
+ +

Se ora usiamo VoiceOver per navigare il sito d'esempio, notiamo alcuni miglioramenti:

+ + + +

Inoltre, il sito è ora maggiormente accessibile per utenti che navigano con browser antiquati come IE8; vale la pena includere ruoli ARIA anche per questo. E se per caso il tuo sito è stato costruito usando solo elementi <div>, dovresti decisamente includere i ruoli ARIA per fornire le necessarie semantiche!

+ +

Il valore semantico migliorato del campo di ricerca ha mostrato cosa è possibile fare quando ARIA va oltre le semantiche disponibili con HTML5. Potrai sapere molto di più sulle semantiche e il potere delle proprietà/attributi ARIA qui sotto, specialmente nella sezione {{anch("Accessibilità dei controlli non semantici")}}. Per ora, vediamo come ARIA ci può aiutare a gestire gli aggiornamenti del contenuto dinamico.

+ +

Aggiornamenti del contenuto dinamico

+ +

In generale tutto il contenuto caricato nel DOM può essere facilmente interpretato usando un lettore di schermo, dal contenuto testuale fino al testo alternativo delle immagini. I tradizionali siti statici con contenuto largamente testuale sono dunque facili da rendere accessibili alle persone con deficit visivo.

+ +

Il problema è che le applicazioni web moderne spesso non sono composte da testo statico, di solito hanno una gran quantità di contenuto che si aggiorna dinamicamente, cioè contenuto che si agigorna senza che l'intera pagina si ricarichi, tramite meccanismi come XMLHttpRequest, Fetch, o DOM APIs. Queste aree del contenuto sono talvolta chiamate “aree vive”, o  live regions.

+ +

Consideriamo un esempio: aria-no-live.html (vedi anche la versione live). In questo esempio troviamo un paragrafo contenente una citazione selezionata casualmente:

+ +
<section>
+  <h1>Citazione casuale</h1>
+  <blockquote>
+    <p></p>
+  </blockquote>
+</section>
+ +

JavaScript riceve tramite XMLHttpRequest un file JSON contenente una serie di citazioni con il rispettivo autore. Dopo che la prima citazone tratta dal file è stata caricata nel paragrafo si attiva un loop setInterval() che carica una nuova citazione nel paragrafo ogni 10 secondi:

+ +
var intervalID = window.setInterval(showQuote, 10000);
+ +

Questo sistema funziona correttamente , ma non è ottimale in termini di accessibilità. Gli aggiornamenti del contenuto non sono rilevati dai lettori di schermo, e gli utenti che li usano non possono rendersi conto di ciò che sta succedendo. Questo esempio è molto basico, ma prova a immaginare cosa succederebbe se stessi creando una interfaccia utente più complessa, con molte aree del contenutto che si aggiornano costantemente, come una chat room, un gioco strategico o magari un sito di e-commerce con un carrello della spesa che si aggiorna con i prodotti selezionati dall'utente. Sarebbe impossibile utilizzare l'applicazione con un lettore di schermo, in assenza di un sistema che avverta gli utenti degli aggiornamenti del contenuto.

+ +

Fortunatamente WAI-ARIA ci mette a disposizione un utile meccanismo per fornire tali avvertimenti, la proprietà aria-live. Applicarla a un elemento fa sì che i lettori di schermo leggano il contenuto che viene aggiornato. Con quanta frequenza il contenuto viene letto dipende dal valore assegnato:

+ + + +

Generalmente, assegnare il valore assertive è sufficiente perchè gli aggiornamenti vengano annunciati in tempo reale, anche se nel caso di aggiornamenti di multiple aree di contenuto che avvengono allo stesso tempo i vari aggiornamenti saranno annunciati in sequenza, quindi con la possibilità di un breve ritardo sul tempo reale. Si raccomanda di usare rude solo per aggiornamenti ad alta priorità che devono "passare davanti" agli altri aggiornamenti in corso.

+ +

Prova a realizzare una copia di aria-no-live.html e quotes.json, e modificare l'etichetta <section> così:

+ +
<section aria-live="assertive">
+ +

D'ora in poi il lettore di schermo leggerà il contenuto ogni volta che quest'ultimo sarà aggiornato.

+ +
+

Nota: : la maggior parte dei browser attiverà una security exception se provi ad effettuare un XMLHttpRequest da un URL file://. Per esempio se carichi il file direttamente nel browser (facendo doppio click). Per farlo funzionare, devi caricare il file a un server, per esempio usando GitHub (articolo in inglese), o un server locale come Python's SimpleHTTPServer (articolo in inglese).

+
+ +

C'è però una considerazione da tenere in conto: il lettore di schermo legge solo la parte del testo che viene aggiornata. È utile dunque che legga anche l'heading, per aiutare l'utente a ricordare quale sezione della pagina è stata aggiornata. Per farlo, possiamo aggiungere la proprietà aria-atomic alla sezione. Modifica la tua etichetta <section> così:

+ +
<section aria-live="assertive" aria-atomic="true">
+ +

L'attributo aria-atomic="true" indica al lettore di schermo che deve leggere l'intero contenuto dell'elemento, non solo le parti che sono state aggiornate.  

+ +
+

Nota: : puoi vedere l'esempio completo qui: aria-live.html (vedi anche la versione live).

+
+ +
+

Nota: : la proprietà aria-relevant è utile per controllare cosa viene letto quando un'area di contenuto viene aggiornata. Per esempio puoi far si che siano lette solo le parti aggiunte o al contrario le parti rimosse dal contenuto.

+
+ +

Migliorare l'accessibilità da tastiera

+ +

Come abbiamo già detto in altri articoli di questo modulo, uno dei punti forti di HTML in termini di accessibilità è che implementa automaticamente l'accessibilità da tastiera per funzionalità come i bottoni, i campi dei formulari e i link. In generale, puoi sempre usare il tasto TAB per muoverti da un elemento all'altro e il tasto INVIO per selezionare o attivare gli elementi. In alcune circostanze puoi anche usare altri tasti (per esempio le frecce, per muoverti su e giù tra le opzioni di una lista <select>).

+ +

Ciononostante, a volte ti troverai a dover scrivere codice che fa uso di elementi non semantici che compiono la funzione di bottoni (o altri tipi di elementi), o codice che usa elementi che possono ricevere focus per scopi diversi dal normale. Forse starai cercando di sistemare del codice mal scritto in precedenza, o di costruire un qualche tipo di widget complesso che richiede tecniche non ortodosse.

+ +

Per rendere focalizzabili elementi che normalmente non lo sono, WAI-ARIA estende l'attributo tabindex con alcuni nuovi valori:

+ + + +

Abbiamo discusso questi valori in maggior dettaglio e mostrato una implementazione tipica nel nostro articolo sull'accessibilità in HTML, vedi Implementare l'accessibilità da tastiera in un secondo tempo.

+ +

Accessibilità dei controlli non semantici

+ +

Proseguendo con il tema trattato nella sezione precedente, quando si usa una serie di <div> annidati in congiunto con CSS o JavaScript per creare una funzionalità complessa per l’interfaccia utente, o se si cambia/migliora sostanzialmente un controllo nativo tramite JavaScript, non solo è possibile che l’accessibilità da tastiera ne risulti ridotta, ma anche per gli utenti che usano lettori di schermo potrebbero prodursi difficoltà a comprendere l’uso della funzionalità, se non ci sono indicazioni semantiche o altri indizi. In tali situazioni, ARIA può aiutare a fornire il valore semantico addizionale necessario. 

+ +

Validazione di formulari e avvisi di errore

+ +

Innanzitutto, rivediamo l’esempio di formulario che avevamo preso in considerazione nell’articolo sull’accessibilità in CSS e JavaScript (vedi Mantieni un uso non intrusivo di JavaScript). Alla fine di tale sezione abbiamo mostrato alcuni attributi ARIA che sono stati aggiunti al messaggio che appare se ci sono errori di validazione quando provi a inviare il formulario:

+ +
<div class="errors" role="alert" aria-relevant="all">
+  <ul>
+  </ul>
+</div>
+ + + +

Possiamo ora procedere oltre con il nostro utilizzo di ARIA, e fornire ulteriore assitenza nella validazione dei dati. Per esempio, perchè non indicare dal principio quali campi sono obbligatori, e quale intervallo di età è permesso introdurre?

+ +
    +
  1. A questo punto, salva sul tuo dispositivo una copia dei files  validazione-formulario.html e validazione.js.
    2. +
  2. Aprili entrambi in un editor di testo e dai un’occhiata a come funziona il codice.
    3. +
  3. Per prima cosa, aggiungi un paragrafo come quello che vedi qui sotto giusto prima della etichetta di apertura del formulario <form>, e marca entrambe le etichette <label> del formulario con un asterisco. Questo è il metodo con cui normalmente si segnalano i campi obbligatori agli utenti che non hanno limitazioni visuali. + 
    <p>I campi marcati con un asterisco (*) sono obbligatori.</p>
    +
    4. +
  4. Questa indicazione è utile dal punto di vista visuale, ma non è facile da cogliere per gli utenti che usano lettori di schermo. Fortunatamente, WAI-ARIA fornisce l’attributo  aria-required , che suggerisce al lettore di schermo di indicare all’utente quali sono i campi del formulario che devono essere compilati obbligatoriamente. Aggiorna gli elementi <input> come vedi qui sotto:                                                              
    5. +
  5. + 
    <input type="text" name="name" id="name" aria-required="true">
+
+<input type="number" name="age" id="age" aria-required="true">
    +
    6. +
  6. A questo punto se salvi l’esempio e lo testi con un lettore di schermo dovresti ascoltare qualcosa come “Introduci il tuo nome asterisco, obbligatorio, modifica testo”.
    7. +
  7. Potrebbe inoltre risultare utile indicare agli utenti l’intervallo di anni dentro il quale dovrebbe situarsi il valore dell’età. Spesso tale valore si indica tramite un placeholder, ossia un valore indicativo che appare all’interno del campo quando non è ancora stato compilato. WAI-ARIA include le proprietà aria-valuemin e aria-valuemax per specificare un intervallo di valori minimo e massimo, ma queste proprietà al momento non hanno un supporto ampio; una caratteristica che gode di un migliore supporto è l’attributo HTML5 placeholder, che contiene un messaggio che viene mostrato nel campo quando l’utente non vi ha ancora introdotto nessun valore, e viene letto da un certo numero di lettori di schermo. Aggiorna il campo età come indicato qui: + 
    <input type="number" name="age" id="age" placeholder="introduci un numero compreso tra 1 e 150" aria-required="true">
    +
    8. +
+ +
+

Nota: puoi vedere un esempio completo qui: validazione-formulario-aggiornato.html.

+
+ +

WAI-ARIA permette inoltre alcune tecniche avanzate di etichettazione dei formulari, che vanno al di là del classico elemento {{htmlelement("label")}}. Abbiamo già discusso sull’utilizzo della proprietà aria-label per rendere un’etichetta {{htmlelement("label")}} invisibile agli utenti che non usano lettori di schermo (vedi la sezione Indicatori/riferimenti sopra). Ci sono anche altre tecniche di etichettazione che fanno uso di proprietà come aria-labelledby, se vuoi usare un elemento non-<label> come etichetta o se vuoi etichettare multipli campi del formulario con la stessa etichetta, e aria-describedby, se vuoi associare informazione aggiuntiva a un campo del formulario e vuoi che il lettore di schermo la legga. Vedi l’articolo in inglese  WebAIM's Advanced Form Labeling per maggiori dettagli.

+ +

Ci sono inoltre molte altre proprietà e attributi utili per indicare lo stato di un elemento di un formulario. Per esempio, si può usare aria-disabled="true" per indicare che un campo è disabilitato. Molti browser salteranno i campi disabilitati, e i lettori di schermo non li leggeranno, ma in alcuni casi saranno comunque indicati, dunque è una buona idea includere questo attributo per permettere al lettore di schermo di sapere che un campo è effettivamente disabilitato.

+ +

Se esiste la possibilità che lo stato di un campo cambi da disabilitato ad abilitato è buona norma indicarlo all’utente, e  inoltre spiegare le conseguenze di tale cambio. Per esempio, nel nostro formulario demo validazione-formulario-casella-disabilitata.html c’è una casella che, quando è selezionata, abilita un altro campo del formulario, tramite il quale si possono introdurre informazioni aggiuntive. Abbiamo preparato un paragrafo nascosto:

+ +
<p class="hidden-alert" aria-live="assertive"></p>
+ +

Questo elemento è nascosto alla vista tramite position: absolute. Quando la casella viene selezionata/deselezionata, il contenuto dell’area nascosta si aggiorna per segnalare agli utenti che usano lettore di schermo in che modo la struttura del formulario è cambiata dopo aver selezionato la casella; inoltre si aggiorna anche lo stato dell’attributo aria-disabled e si fornisce anche un indicazione visuale del cambio:

+ +
function toggleMusician(bool) {
+  var instruItem = formItems[formItems.length-1];
+  if(bool) {
+    instruItem.input.disabled = false;
+    instruItem.label.style.color = '#000';
+    instruItem.input.setAttribute('aria-disabled', 'false');
+    hiddenAlert.textContent = 'I'Il campo strumenti suonati è ora abilitato; usalo per indicarci quali strumenti sai suonare.';
+  } else {
+    instruItem.input.disabled = true;
+    instruItem.label.style.color = '#999';
+    instruItem.input.setAttribute('aria-disabled', 'true');
+    instruItem.input.removeAttribute('aria-label');
+    hiddenAlert.textContent = ''Il campo Strumenti suonati è ora disabilitato.';
+  }
+}
+ +

Descrivere bottoni non semantici come bottoni

+ +

Ci è già capitato di discutere della accessiblità nativa di alcuni elementi come bottoni, link o campi di formulario, e dei problemi di accessibilità che sorgono quando si usano elementi sostitutivi per compiere le stesse funzioni di questi elementi. Vedi Controlli di interfaccia utente nell’articolo sull’accessibilità in HTML, e Migliorare l’accessibilità da tastiera, qui sopra). In molti casi è possibile restituire l’accessibilità da tastiera a tali elementi senza troppi problemi, usando tabindex e un poco di JavaScript.

+ +

Ma come fare con i lettori di schermo? Non potranno interpretare gli elementi sostitutivi come bottoni. Se facciamo un test con il nostro esempio  div-falsi-bottoni.html e un lettore di schermo, i falsi bottoni saranno segnalati all’utente con frasi come “Cliccami!, gruppo”, che risultano di difficile interpretazione.

+ +

Possiamo rimediare al problema usando un ruolo WAI-ARIA. Salva la pagina div-falsi-buttoni.html, e aggiungi role="button" ad ogni <div> che compie la funzione di bottone, come per esempio:

+ +
<div data-message="Questo messaggio viene dal primo bottone" tabindex="0" role="button">Cliccami!</div>
+ +

Se ora provi a navigare la pagina con un lettore di schermo, i bottoni saranno letti come “Cliccami!, bottone”, e tutto risulterà molto più chiaro.

+ +
+

Nota: non dimenticare che usare il corretto elemento semantico è sempre una opzione migliore. Se vuoi creare un bottone e non ci sono ragioni valide per non usare un elemento  <button>, dovresti usare un elemento <button>!

+
+ +

Guidare gli utenti nell’uso di widget complessi

+ +

Ci sono molti altri ruoli che danno la possibilità di assegnare ad elementi non semantici lo status di comuni elementi dell’interfaccia utente, elementi che vanno al di là di ciò che è disponibile nell’HTML standard, come per esempio  combobox, slider, tabpanel, tree. Puoi trovare alcuni utili esempi nella Deque university code library, per farti un'idea di come tali elementi possono essere resi accessibili.

+ +

Prendiamo in considerazione un esempio. Torniamo ad usare il nostro semplice infobox a schede (vedi Nascondere elementi nell’articolo sull’accessibilità in CSS e JavaScript), che puoi trovare qui: infobox a schede (vedi codice sorgente).

+ +

Questo esempio funziona perfettamente in termini di accessibilità da tastiera: puoi muoverti facilmente da una scheda all’altra usando il tasto TAB e selezionare una scheda con INVIO per visualizzarne il contenuto. È inoltre abbastanza accessibile se si usa un lettore di schermo, puoi infatti usare gli headings per navigare il contenuto anche senza vederlo. Ciò che però non risulterà del tutto chiaro è in cosa consiste il contenuto stesso: un lettore di schermo riporta il contenuto dell’infobox come composto da un lista di link e da dell’altro contenuto con tre headings. Non da nessuna indicazione di come i contenuti sono relazionati tra loro. Fornire all’utente indicazioni precise su come il contenuto è strutturato è sempre una buona idea.

+ +

Abbiamo creato una versione migliorata dell’esempio, chiamata aria-tabbed-info-box.html (vedi versione live). Abbiamo aggiornato l’interfaccia del box così:

+ +
<ul role="tablist">
+  <li class="active" role="tab" aria-selected="true" aria-setsize="3" aria-posinset="1" tabindex="0">Tab 1</li>
+  <li role="tab" aria-selected="false" aria-setsize="3" aria-posinset="2" tabindex="0">Tab 2</li>
+  <li role="tab" aria-selected="false" aria-setsize="3" aria-posinset="3" tabindex="0">Tab 3</li>
+</ul>
+<div class="panels">
+  <article class="active-panel" role="tabpanel" aria-hidden="false">
+    ...
+  </article>
+  <article role="tabpanel" aria-hidden="true">
+    ...
+  </article>
+  <article role="tabpanel" aria-hidden="true">
+    ...
+  </article>
+</div>
+ +
+

Nota: il cambio più evidente è la rimozione dei link che erano presenti precedentemente nell’esempio. Ora si usano i componenti li della lista per identificare le schede. Questo procedimento rende il tutto meno confuso per gli utenti che usano lettori di schermo, in quanto i link che c’erano in precedenza non conducevano da nessuna parte, servivano solo a cambiare di scheda. Inoltre gli attributi aria-setsize e aria-posinset permettono ora di identificare chiaramente le schede tramite il lettore di schermo: in precedenza, con i link, il browser trasmetteva sempre al lettore “1 di 1”, e non “1 di 3”, “2 di 3”, ecc.

+
+ +

 

+ +

Le nuove funzionalità aggiunte all’infobox di esempio sono le seguenti:

+ + + +

Secondo i nostri test, questa nuova struttura ha migliorato sensibilmente l’accessibilità dell’infobox a schede. Le schede sono ora riconosciute come schede (ora il lettore pronuncia “scheda”, o perlomeno “tab”, in inglese), la scheda attualmente selezionata è chiaramente indicata, pronunciando il lettore la parola “selezionata” insieme al nome della scheda, e il lettore di schermo indica anche il numero della scheda in cui si trova l’utente. Inoltre, grazie ai valori di aria-hidden impostati (solo la scheda attualmente selezionata ha il valore aria-hidden="false"), il contenuto non nascosto è il solo che il lettore può leggere, rendendolo il tutto più facile e meno confuso da navigare per l’utente.

+ +

 

+ +
+

Nota: puoi assegnare l’attributo aria-hidden="true"  a qualsiasi contenuto che vuoi che sia ignorato dai lettori di schermo.

+
+ +

Riassunto

+ +

Questo articolo non è da considerarsi esaustivo per quanto riguarda tutte le funzionalità disponibili con la tecnologia WAI-ARIA, ma dovrebbe averti fornito informazioni sufficienti a capire come usarla, e come identificare le situazioni più comuni in cui avrai bisogno di ricorrere ad essa.

+ +

Vedi anche

+ + + +

{{PreviousMenuNext("Learn/Accessibilità/CSS_e_JavaScript_accessibilità","Learn/Accessibilità/Multimedia", "Learn/Accessibilità")}}

diff --git a/files/it/learn/accessibility/what_is_accessibility/index.html b/files/it/learn/accessibility/what_is_accessibility/index.html new file mode 100644 index 0000000000..52a5c138f8 --- /dev/null +++ b/files/it/learn/accessibility/what_is_accessibility/index.html @@ -0,0 +1,196 @@ +--- +title: Cosa è l'accessibilità? +slug: Learn/Accessibilità/Cosa_è_accessibilità +tags: + - Accessibilità + - Articolo + - CSS + - HTML + - JavaScript + - Principiante + - Strumenti + - TA + - disabilità + - imparare + - lettore schermo + - tastiera + - tecnologie assistive + - utenti +translation_of: Learn/Accessibility/What_is_accessibility +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/Accessibilità/HTML_accessibilità", "Learn/Accessibilità")}}
+ +

Questo articolo inaugura il modulo con una visione generale di cosa è realmente l'accessibilità. Sono inclusi argomenti come: quali gruppi di persone dobbiamo tenere in considerazione e perché, quali strumenti di supporto le persone usano per interagire con la rete, e come possiamo rendere l'accessibilità parte integrante del nostro processo di sviluppo web.

+ + + + + + + + + + + + +
Prerequisiti:Conoscimenti basici sull'uso del computer, livello basico di HTML e CSS.
Obiettivo:Acquisire familiarità con il concetto di accessibilità, capire di cosa si tratta e in che modo influisce sulla tua attività di sviluppatore web. 
+ +

Dunque, cosa è l'accessibilità?

+ +

L'accessibilità è la pratica di rendere i tuoi siti utilizzabili dal maggior numero di persone possibile. Di solito si pensa che il tema dell'accessibilità riguardi solo le persone che soffrono di una disabilità, ma in realtà l'accessibilità è un concetto importante anche per altri gruppi di persone, come coloro che usano dispositivi mobili o chi naviga in internet con una connessione lenta.

+ +

Puoi anche pensare all'accessibilità come alla pratica di trattare tutti alla stessa maniera e dare a tutti le stesse opportunità, indipendentemente dalle loro capacità e circostanze. Così come non è corretto impedire l'accesso a un edificio a una persona che si muove in sedia a rotelle (e infatti gli edifici pubblici devono essere dotati di rampe e ascensori), allo stesso modo non si deve escludere una persona dall'utilizzo di un sito web per il fatto che abbia un handicap o stia usando un dispositivo mobile. Tutti gli utenti devono avere gli stessi diritti.

+ +

Rendere un sito accessibile non solo è la cosa giusta da fare da un punto di vista etico, ma in molti paesi è anche obbligatorio per legge, e inoltre può contribuire a raggiungere categorie di utenti e clienti che altrimenti non potrebbero usare i tuoi servizi o acquistare i tuoi prodotti.

+ +

Rispettare le pratiche di accessibilità è benefico per tutti:

+ + + +

Quali tipi di disabilità prendere in considerazione?

+ +

Le persone con disabilità sono molto diverse tra loro, così come quelle senza disabilità. Il concetto chiave da imparare è smettere di pensare a come tu stesso usi il computer e navighi in internet, e cominciare a considerare come lo fanno gli altri. I principali tipi di disabilità sono spiegati qui sotto, insieme agli strumenti che le persone disabili usano per navigare il web (conosciuti come tecnologie assistive, o TA).

+ +
+

Nota: la Organizzazione Mondiale della Sanità nel suo rapporto (in inglese) Disabilità e salute afferma che "Oltre un miliardo di persone, circa il 15% della popolazione mondiale, ha una qualche forma di disabilità", e "Tra 110 e 190 milioni di adulti hanno significative difficoltà funzionali". 

+
+ +

Persone con deficit visivo

+ +

Questa categoria include persone non vedenti, persone con una capacità visiva molto ridotta (ipovedenti), daltonici, ecc. Molte di queste persone usano ingranditori di schermo (sia fisici che software, per esempio la maggior parte dei navigatori è dotata di funzioni di zoom), e alcuni usano lettori di schermo, cioè programmi che leggono a voce alta il contenuto digitale:

+ + + +

È una buona idea acquisire familiarità con i lettori di schermo; dovresti provare a installarne uno e usarlo, per farti una idea di come funziona. Per maggiori dettagli su come usarli, fai riferimento alla nostra guida (in inglese) Guida al testing dei lettori di schermo su differenti browser. Il video qui sotto inoltre fornisce una breve testimonianza sull'uso dei lettori di schermo.

+ +

{{EmbedYouTube("IK97XMibEws")}}

+ +

In termini statistici, la Organizzazione Mondiale della Sanità stima che "circa 285 milioni di persone nel mondo hanno gravi deficit visivi: 39 milioni sono non vedenti e 246 milioni ipovedenti". (vedi il rapporto in inglese Deficit visivo e cecità). Si tratta di una significativa quantità di utenti, pari quasi alla popolazione degli Stati Uniti, che non potrà usufruire del tuo sito se non lo avrai reso accessibile.

+ +

Persone con deficit uditivo

+ +

Questa categoria di persone presentano una capacità uditiva molto ridotta o del tutto assente. Le persone con deficit uditivo spesso usano TA (vedi l'articolo in inglese Strumenti assistivi per persone con disfunzioni uditive, della voce, dell'apparato fonatorio o del linguaggio), ma non esistono in realtà tecnologie assistive specifiche per l'uso del computer o di internet. 

+ +

Ci sono, comunque, tecniche specifiche da tenere in conto per fornire alternative testuali ai contenuti audio, come per esempio trascrizioni o sottotitoli sincronizzati nei video. Più avanti si tratteranno queste tecniche nel dettaglio in un altro articolo.

+ +

Anche le persone con deficit uditivo rappresentano una significativa base di utenza. Come indica la Organizzazione Mondiale della Sanità nel rapporto in inglese Sordità e perdita dell'udito, "360 milioni di persone nel mondo presentano deficit uditivi gravi".

+ +

Persone con problemi di mobilità

+ +

Alcune persone soffrono di disabilità che riguardano il movimento. Ciò può riferirsi a problemi puramente fisici (come la perdita di un arto o uno stato di paralisi), o a disordini di tipo neurologico/genetico che comportano difficoltà nei movimenti o perdita di controllo sugli arti. Alcune persone possono avere difficoltà a compiere i movimenti della mano necessari per usare un mouse, mentre altre possono presentare problemi più gravi, come per esempio uno stato di paralisi estesa, che rende necessario l'uso di un puntatore comandato tramite movimenti della testa per interagire con il computer. 

+ +

Questo tipo di disabilità può anche essere dovuto all'età avanzata, piuttosto che a un trauma o una condizione specifica, e può anche essere attribuibile a limitazioni dell'hardware, come nel caso di utenti che non hanno un mouse a disposizione.

+ +

In generale, per gestire questo tipo di limitazioni è necessario sviluppare i propri siti o applicazioni in maniera tale che siano utilizzabili tramite tastiera. Tratteremo l'argomento dell'accessibilità tramite tastiera con articoli specifici più avanti nel modulo, ma nel frattempo ti consigliamo di provare a navigare alcuni siti usando solo la tastiera, per farti un'idea di come funziona. Per esempio, puoi usare il tasto TAB per muoverti da un campo all'altro di un formulario? Puoi trovare ulteriori dettagli sull'uso della tastiera per la navigazione dei siti nella sezione (in inglese) Test di accessibilità della navigazione con tastiera su differenti browser.

+ +

Secondo le statistiche, un numero significativo di persone soffre di limitazioni alla mobilità. Il rapporto (in inglese) Disabilità e funzionamento (adulti maggiorenni non ricoverati) indica che negli Stati Uniti la percentuale di adulti con difficoltà di funzionamento fisico è del 15,1%.

+ +

Persone con deficit cognitivo

+ +

Probabilmente il più ampio range di disabilità è quello compreso in quest'ultima categoria. Il termine deficit cognitivo può infatti riferirsi ad un'ampia gamma di disfunzioni, dalle malattie mentali alle difficoltà di apprendimento, da problemi di comprensione e concentrazione, come la sindrome da deficit di attenzione e iperattività, a persone che presentano una forma di autismo, o persone che soffrono di schizofrenia, e molti altri tipi di disturbo. Questo tipo di disabilità possono influenzare molte attività della vita quotidiana, causando problemi di memoria, comprensione, attenzione, ecc.

+ +

Le forme più comuni con cui tali forme di disabilità influenzano l'uso di un sito sono: difficoltà nel capire il procedimento da seguire per raggiungere un risultato; difficoltà nel ricordare come ripetere un'azione compiuta precedentemente; un senso di frustrazione causato da alcune caratteristiche del sito che lo rendono confuso e inconsistente nella navigazione.

+ +

Diversamente da altri problemi di accessibilità web, è impossibile fornire linee guida specifiche per risolvere le difficoltà causate da deficit cognitivo; la strategia migliore è di impegnarsi a disegnare i propri siti nella forma più logica, consistente e usabile possibile. Per esempio, assicurati che:

+ + + +

Queste non sono soltanto tecniche di accessibilità, ma piuttosto buone pratiche di disegno web che saranno utili a chiunque userà i tuoi siti, e dovrebbero essere pratiche standard nel tuo lavoro di sviluppo web.

+ +

In termini statistici, anche in questo caso i numeri sono significativi. Per esempio, il rapporto (in inglese) della Cornell University Rapporto sullo stato della disabilità 2014 (PDF, 511KB) indica che nel 2014 il 4.5% della popolazione degli Stati Uniti di età compresa tra 21 e 64 anni presenta una qualche forma di disabilità cognitiva.

+ +
+

Nota:  La sezione (in inglese) Cognitive del sito WebAIM fornisce utili approfondimenti sulle pratiche riportate sopra, ed è certamente una lettura consigliata.

+
+ +

Come implementare l'accessibilità nei tuoi progetti

+ +

Un mito molto comune sull'accessibilità è che questa sia una sorta di "costoso extra". Questo mito può essere veritiero se:

+ + + +

Se invece l'accessibilità è parte integrante del tuo progetto sin dal principio, il costo per rendere il contenuto accesibile sarà minimo.

+ +

Quando pianifichi un progetto, introduci test di accessibilità nella tua routine di testing, allo stesso modo in cui effettui test per gli altri segmenti di utenza (come per esempio gli utenti che usano pc desktop, iOS o dispositivi mobili, ecc.). Effettua test sin dall'inizio e con frequenza, idealmente facendo uso di test automatizzati che rilevino sistematicamente caratteristiche mancanti (come per esempio mancanza di testo alternativo nelle immagini, o la presenza di link testuali mal costruiti. Vedi l'articolo in inglese Relazione tra elementi e contesto) ed anche, se possibile, effettuando test con persone disabili per verificare il funzionamento delle caratteristiche più complesse del sito. Per esempio: 

+ + + +

Dovresti prendere nota di tutte le potenziali aree problematiche del tuo contenuto su cui sarà necessario intervenire perchè siano rese accessibili, assicurarti che siano testate a sufficienza e pensare a soluzioni o alternative. Il contenuto testuale (come vedrai nel prossimo articolo) è facile da gestire, ma come fare con il contenuto multimediale, o le grafiche 3D? Dovresti considerare il budget a disposizione e pensare a quali possibilità hai per rendere il contenuto accessibile. Per esempio, potresti decidere di pagare qualcuno per trascrivere tutto il contenuto multimediale. Può essere costoso, ma è fattibile.

+ +

Inoltre, devi essere realista. Un sito accessibile al 100% è un ideale irraggiungibile, ci sarà sempre qualche situazione particolare per la quale un utente troverà difficile usare il tuo contenuto, ma devi fare tutto il possibile per evitare che si verifichino tali situazioni. Se hai in mente di includere nel tuo sito uno spettacolare grafico a torta 3D creato con WebGL, dovresti anche includere, come alternativa accessibile, una tabella dati standard. Oppure, potresti addirittura decidere di eliminare il grafico 3D: la tabella è accessibile a tutti, più rapida da creare, richiede meno risorse CPU ed è più facile da mantenere.

+ +

D'altro canto se stai costruendo un sito-galleria per opere d'arte in 3D, non sarebbe ragionevole pretendere che ogni opera fosse perfettamente accessibile alle persone con disabilità visiva, dato che si tratta di un medium interamente visuale.

+ +

Per dimostrare che hai grande considerazione per l'accessibilità e che l'hai inclusa nel tuo progetto, pubblica una dichiarazione di accessibilità sul tuo sito nella quale spieghi in dettaglio la tua politica sull'accessibilità, e quali misure hai adottato per rendere il sito accessibile. Se un utente ti contatta lamentando un problema di accessibilità, assicurati di ascoltarlo con attenzione e chiarire tutti i dettagli, sii empatico, e adotta tutte le misure ragionevoli per risolvere il problema.

+ +
+

Nota: Il nostro articolo (in inglese) Come gestire i problemi di accessibilità più comuni spiega con maggiori dettagli le specifiche di accessibilità che devono essere testate. 

+
+ +

Per riassumere:

+ + + +

Linee guida di accessibilità e legge

+ +

Ci sono numerose checklist e set di linee guida disponibili per effettuare test basici di accessibilità, e a prima vista possono apparire complicate. Ti consigliamo innanzitutto di acquisire familiarità con le aree più importantidi cui devi occuparti, e di cercare di comprendere le strutture generali delle linee guida che sono più rilevanti al tuo caso specifico.

+ + + +

È una buona idea leggere il testo della legge italiana sull'accessibilità, per familiarizzarsi con essa ed evitare eventuali problemi legali per i tuoi siti.

+ +

API per l'accessibilità

+ +

I browser fanno uso di alcune API speciali per l'accessibilità (fornite dal sistema operativo) che mostrano informazioni utili per le tecnologie assistive (TA). Le TA in generale usano solo informazioni semantiche, dunque non prendono in considerazione aspetti come lo stile di una pagina o gli script in JavaScript. Le informazioni sono strutturate in una mappa ad albero.

+ +

Ogni sistema operativo ha la sua API per l'accessibilità:

+ + + +

Quando le informazioni semantiche native fornite dagli elementi HTML della tua applicazione web non sono sufficienti, puoi supplementarle con caratteristiche della specificazione WAI-ARIA (articolo in inglese), che aggiunge informazione semantica alla mappa ad albero per migliorare l'accessibilità. Puoi sapere di più su WAI-ARIA nel nostro articolo basi di WAI-ARIA.

+ +

Riassunto

+ +

Questo articolo dovrebbe averti fornito una utile panoramica sull'accessibilità, averti mostrato perchè è importante, e come puoi inserirla nel tuo flusso di lavoro. Dovrebbe inoltre aver suscitato il tuo interesse e un desiderio di conoscere i dettagli su come implementare l'accessibilità nei tuoi progetti. Cominceremo a occuparcene proprio nella prossima sezione, dove spiegheremo come HTML costituisce un'ottima base per l'accessibilità. 

+ +
{{NextMenu("Learn/Accessibilità/HTML_accessibilità", "Learn/Accessibilità")}}
diff --git "a/files/it/learn/accessibilit\303\240/accessibilit\303\240_dispositivi_mobili/index.html" "b/files/it/learn/accessibilit\303\240/accessibilit\303\240_dispositivi_mobili/index.html" deleted file mode 100644 index 46a2b24c4d..0000000000 --- "a/files/it/learn/accessibilit\303\240/accessibilit\303\240_dispositivi_mobili/index.html" +++ /dev/null @@ -1,336 +0,0 @@ ---- -title: Accessibilità per dispositivi mobili -slug: Learn/Accessibilità/Accessibilità_dispositivi_mobili -tags: - - Accessibilità - - Articolo - - Mobile - - Principiante - - Responsivo - - Touchscreen - - imparare - - screenreader - - touch -translation_of: Learn/Accessibility/Mobile ---- -
-
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Accessibilità/Multimedia","Learn/Accessibility/Accessibility_troubleshooting", "Learn/Accessibilità")}}
- -

L’uso di internet tramite dispositivi mobili è sempre più diffuso, e i sistemi operativi per dispositivi mobili più popolari, Android e iOS, sono dotati di strumenti nativi per l’accessibilità. È dunque importante prendere in considerazione l’accessibilità dei tuoi contenuti su tali piattaforme. Questo articolo tratta specificamente dell’accessibilità per dispositivi mobili.

- - - - - - - - - - - - -
Prerequisiti:Conoscimenti basici sull'uso del computer, livello basico di HTML, CSS e JavaScript, e aver letto i precedenti articoli del corso.
Obiettivo:Comprendere i problemi di accessibilità relativi ai dispositivi mobili, e come risolverli.
- -

Accessibilità per dispositivi mobili

- -

Lo stato attuale dell’accessibilità, e del supporto degli standard web in generale, è buono nei dispositivi mobili moderni. Sono lontani i giorni in cui i dispositivi mobili utilizzavano tecnologie web completamente differenti dai browser per pc, obbligando gli sviluppatori a fornire siti completamente separati per le due piattaforme (anche se comunque molte aziende continuano a fornire un sito specifico per dispositivi mobili, di solito contenente la parola “mobile” nel dominio).

- -

 

- -

Oggigiorno, in generale, i dispositivi mobili non hanno problemi a visualizzare correttamente tutti i tipi di siti, e i principali sistemi operativi mobili hanno lettori di schermo nativi. I browser moderni per dispositivi mobili hanno anche un buon supporto per WAI-ARIA.

- -

Per rendere un sito accessibile e usabile su dispositivi mobili devi solo rispettare le buone pratiche generali di disegno e accessibilità web.

- -

 

- -

Ci sono però alcune eccezioni che richiedono una attenzione particolare; le principali sono:

- - - -

Riassunto dei test sui lettori di schermo per  Android e iOS

- -

I più comuni sistemi operativi per dispositivi mobili hanno installati lettori di schermo nativi pienamente funzionanti. Questi funzionano praticamente alla stessa maniera dei lettori di schermo per pc, ma si usano con gesti touch invece che con combinazioni di tasti.

- -

Prendiamo in considerazione i due principali lettori di schermo per dispositivi mobili: TalkBack per Android e VoiceOver per iOS.

- -

Android TalkBack

- -

 

- -

TalkBack è il lettore di schermo presente di default su Android.

- -

Per attivarlo, selezionaImpostazioni > Accessibilità > TalkBack, e premi lo switch di attivazione/disattivazione. Inoltre segui qualsiasi altra indicazione che il sistema ti fornisca.

- -

Nota: versioni anteriori di TalkBack si attivano con metodi leggermente differenti.

- -

Quando TalkBack è attivato, i controlli basici del tuo dispositivo Android presenteranno alcune differenze rispetto alla modalità normale. Per esempio:

- -

 

- -
    -
  1. Fare click sull’icona di una app la selezionerà senza aprirla, e il lettore pronuncerà il nome della app.
    2. -
  2. Fare swipe a destra o a sinistra farà selezionare un’altra app, oppure, se stai navigando un menu, un altro bottone/controllo. Il dispositivo leggerà ogni opzione man mano che le selezioni.
    3. -
  3. Fare doppio click aprirà la app selezionata o attiverà/disattiverà la opzione selezionata.
    4. -
  4. Puoi anche “esplorare col dito“: mantieni premuto il dito sullo schermo e fallo scorrere lungo la superficie dello stesso. Il dispositivo leggerà il nome delle varie app o oggetti su cui passerai il dito.
    5. -
- -

Se vuoi disattivare TalkBack:

- -
    -
  1. Naviga alle Impostazioni
    2. -
  2. Naviga a Accessibilità > TalkBack.
    3. -
  3. Naviga allo switch di attivazione/disattivazione e disattivalo.
    4. -
- -

Nota: puoi navigare alla schermata di inizio in qualsiasi momento facendo swipe in alto e a sinistra lentamente. Se hai più di una schermata di inizio, puoi muoverti da una all’altra facendo swipe con due dita a destra e sinistra.

- -

Per una lista più completa dei gesti che puoi usare con TalkBack, vedi Utilizzare i gesti TalkBack.

- -

Sbloccare il telefono

- -

Quando TalkBack è attivato, la procedura per sbloccare il telefono cambia leggermente.

- -

Devi fare swipe con due dita dal basso verso l’alto. Se ci sono una password o un codice impostati, sarai reindirizzato allo schermo dove inserirli.

- -

Puoi anche esplorare con il dito, troverai il bottone di sblocco nel centro della parte bassa dello schermo. Fai doppio click sul bottone per sbloccare lo schermo.

- - - -

TalkBack ti permette di accedere ai menu contestuali locali e globali del dispositivo da qualunque punto del sistema operativo. I menu globali sono quelli che permettono di accedere ai controlli e alle opzioni generali del dispositivo, mentre i menu locali sono relativi alla applicazione o schermata in cui ti trovi al momento.

- -

Per accedere ai menu:

- -
    -
  1. Per accedere al menu globale, fai swipe veloce verso il basso e poi a destra.
    2. -
  2. Per accedere al menu locale, fai swipe veloce verso l’alto e poi a destra.
    3. -
  3. Fai swipe a sinistra o a destra per muoverti da una opzione all’altra.
    4. -
  4. Quando l’opzione che ti interessa è selezionata, fai doppio click per attivarla o disattivarla.
    5. -
- -

Per maggiori dettagli su tutte le opzioni disponibili nei menu locali e globali, vedi Menu contestuali locali e globali.

- - - -

Puoi usare il menu contestuale locale del browser per trovare le opzioni per navigare le pagine web usando gli headings, i campi dei formulari, i link, ecc., oppure navigare linea per linea.

- -

Per esempio, con TalkBack attivato:

- -
    -
  1. Apri il tuo web browser.
    2. -
  2. Attiva la barra URL.
    3. -
  3. Introduci l’url di una pagina web che ha una serie di headings, come per esempio la pagina bbc.co.uk. Per introdurre il testo dell’URL: -
      -
    • Seleziona la barra URL facendo swipe a destra/sinistra fino a trovarla, e poi fai doppio click.
      • -
    • Mantieni il dito premuto sulla tastiera virtuale fino a quando trovi il carattere che vuoi scrivere, e rilascia il dito per introdurlo. Ripeti il procedimento per ogni carattere.
      • -
    • Quando hai terminato, seleziona il tasto INVIO e premilo.
      • -
    -
    4. -
  4. Fai swipe a sinistra o destra per muoverti tra i differenti oggetti presenti sulla pagina.
    5. -
  5. Fai swipe in alto e a destra per aprire il menu contestuale locale.
    6. -
  6. Fai swipe a destra fino a trovare la opzione "Headings e punti di riferimento".
    7. -
  7. Fai doppio click per selezionarla. Ora puoi fare swipe a destra o sinistra per muoverti tra headings e punti di riferimento ARIA.
    8. -
  8. Per ritornare al modo di default, apri il menu contestuale locale facendo swipe in alto a destra, seleziona l’opzione “Default” e fai doppio click per attivarla.
    9. -
- -

Nota: Vedi Guida introduttiva a TalkBack su Android per una documentazione più completa.

- -

iOS VoiceOver

- -

 

- -

Una versione di VoiceOver per dispositivi mobili è inclusa in tutti i sistemi operativi iOS.

- -

Per attivarlo, vai alla tua appImpostazionie selezionaGenerale>Accessibilità>VoiceOver. Premi lo switchVoiceOverper attivarlo (vedrai anche alcune altre opzioni relative a VoiceOver in questa pagina).

- -

Quando VoiceOver sarà attivato, i controlli basici del sistema saranno leggermente diversi:

- -

 

- -
    -
  1. Un click singolo selezionerà l’oggetto su cui premi; il dispositivo pronuncerà il nome dell’oggetto selezionato.
    2. -
  2. Puoi inoltre navigare tra gli oggeti presenti sullo schermo facendo swipe a destra o sinistra per muoverti dall’uno all’altro, o facendo scorrere il dito per lo schermo. Quando troverai l’oggetto che vuoi attivare, rimuovi il dito dallo schermo per selezionarlo.
    3. -
  3. Per attivare l’oggetto dopo averlo selezionato, per esempio se vuoi aprire una applicazione, fai doppio click in qualsiasi punto dello schermo.
    4. -
  4. Fai swipe con tre dita per scorrere attraverso una pagina.
    5. -
  5. Fai click con due dita per eseguire una azione relativa al contesto corrente, come per esempio scattare una foto con la applicazione fotocamera aperta.
    6. -
- -

Per disattivare VoiceOver, naviga aImpostazioni>Generale>Accessibilità>VoiceOver e premi lo switchVoiceOver.

- -

Come usare il Rotore

- -

Quando VoiceOver è attivo, avrai a tua disposizione una funzionalità dei navigazione chiamata Rotore, che ti permette di accedere rapidamente ad alcune opzioni di uso comune. Per usarlo:

- -

Using the Rotor

- -

When VoiceOver is turned on, you have a navigation feature called the Rotor available to you, which allows you to quickly choose from a number of common useful options. To use it:

- -
    -
  1. Muovi due dita in circolo per lo schermo, come se stessi usando un vecchio telefono a disco. Il dispositivo pronuncerà il nome delle varie opzioni una dopo l’altra man mano che vai muovendo le dita. Puoi andare avanti e indietro mentre il dispositivo passa da un’opzione all’altra ciclicamente.
    2. -
  2. Quando hai trovato l’opzione che ti interessa: -
      -
    • Rimuovi le dita dallo schermo per selezionarla.
      • -
    • Se si tratta di una opzione il cui valore è aumentabile/diminuibile, come per esempio il Volume o la Velocità di Locuzione, puoi fare swipe verso l’alto o verso il basso per aumentare o diminuire il valore dell’opzione selezionata.
      • -
    -
    3. -
- -

Le opzioni disponibili tramite il Rotore dipendono dal contesto: quando apri il Rotore le opzioni che troverai saranno relative all’applicazione o alla schermata in cui ti trovi (vedi qui sotto per un esempio).

- - - -

Vediamo come navigare in internet usando VoiceOver:

- -
    -
  1. Apri il tuo browser.
    2. -
  2. Attiva la barra URL.
    3. -
  3. Introduci l’url di una pagina web che ha una serie di headings, come per esempio la pagina bbc.co.uk. Per introdurre il testo dell’URL: -
      -
    • Seleziona la barra URL facendo swipe a destra o a sinistra fino a trovarla, e poi fai doppio click.
      • -
    • Mantieni il dito premuto sulla tastiera virtuale fino a quando trovi il carattere che vuoi scrivere, e rilascia il dito per selezionarlo. Fai doppio click per introdurlo. Ripeti il procedimento per ogni carattere.
      • -
    • Quando hai terminato, seleziona il tasto INVIO e premilo.
      • -
    -
    4. -
  4. Fai swipe a sinistra e a destra per muoverti tra i differenti oggetti presenti sulla pagina. Fai doppio click su un oggetto per selezionarlo (per esempio, per seguire un link).
    5. -
  5. L’opzione del Rotore selzionata per default è la Velocità di Locuzione; puoi fare swipe in su o in giù per aumentare o diminuire la velocità di locuzione del lettore di schermo.
    6. -
  6. Ora muovi due dita in circolo per lo schermo per aprire il Rotore e far scorrere le sue opzioni. Riportiamo qui alcuni esempi delle opzioni disponibili nel Rotore: -
      -
    • Velocità di locuzione: cambia la velocità di locuzione del dispositivo.
      • -
    • Contenitori: il lettore di schermo si muove per i vari contenitori semantici presenti nella pagina.
      • -
    • Headings: il lettore di schermo si muove per i vari heading presenti nella pagina.
      • -
    • Links: il lettore di schermo si muove per i vari link presenti nella pagina.
      • -
    • Controlli formulario: il lettore di schermo si muove per i vari campi dei formulari presenti nella pagina.
      • -
    • Lingue: cambia la lingua della pagina, se sono disponibili differenti traduzioni.
      • -
    -
    7. -
  7. Seleziona Headings. Ora potrai fare swipe in su e in giù per muoverti da un heading all’altro della pagina.
    8. -
- -

Nota: per un riferimento più completo sui gesti disponibili in VoiceOver e altri suggerimenti sul testing dell’accessibilità in iOS, vedi Test Accessibility on Your Device with VoiceOver.

- -

Meccanismi di controllo

- -

Nel nostro articolo sull’accessibilità in CSS e JavaScript abbiamo preso in considerazione eventi che sono associati a specifici meccanismi di controllo (vedi eventi specifici del mousedel mouse). Per ricapitolare, tali eventi causano problemi di accessibilità, perchè altri meccanismi di controllo non possono attivare le funzionalità ad essi associate.

- -

Ad esempio, l’evento click è ottimale in termini di accessibilità: un gestore di eventi associato ad esso può essere attivato cliccando con il mouse sull’elemento su cui l’evento è impostato, oppure selezionandolo tramite tasto TAB e premendo INVIO, oppure facendo click con un dito su un touchscreen. Prova il nostro esempio-di-bottone-semplice.html (vedi la versione live) per capire di cosa parliamo.

- -

Altri eventi simili, come mousedown e mouseup possono creare problemi, in quanto i loro gestori di eventi non possono essere attivati usando controli alternativi al mouse.

- -

Se provi a controllare il nostro esempio di simple-box-drag.html (vedi la versione live) tramite tastiera o touchscreen, capirai qual è il problema. Ciò succede perchè stiamo usando un codice come il seguente:

- -
div.onmousedown = function() {
-  initialBoxX = div.offsetLeft;
-  initialBoxY = div.offsetTop;
-  movePanel();
-}
-
-document.onmouseup = stopMove;
- -

Per abilitare altre forme di controllo, devi usare eventi alternativi equivalenti. Per esempio, gli eventi touch sono pensati specificamente per i dispositivi con touchscreen:

- -
div.ontouchstart = function(e) {
-  initialBoxX = div.offsetLeft;
-  initialBoxY = div.offsetTop;
-  positionHandler(e);
-  movePanel();
-}
-
-panel.ontouchend = stopMove;
- -

Presentiamo qui un semplice esempio che mostra come usare gli eventi mouse e touch insieme. Vedi  multi-control-box-drag.html (vedi la versione liveee the example live).

- -

Nota: puoi vedere esempi di come implementare differenti meccanismi di controllo nell’articolo in inglese  Implementing game control mechanisms.

- -

Disegno responsivo

- -

 

- -

Il disegno responsivo è la pratica di realizzare layout e altre caratteristiche delle applicazioni in una forma che cambia dinamicamente secondo alcuni fattori come le dimensioni dello schermo e la risoluzione dello stesso, di modo che le applicazioni siano usabili e accessibili a utenti che usano differenti tipi di dispositivi.

- -

In particolare, gli aspetti più comuni del disegno responsivo che si devono prendere in considerazione per i dispositivi mobili sono:

- -

 

- - - -

Nota: non forniremo una spiegazione dettagliata delle tecniche di disegno responsivo qui, dato che sono già trattate in altri articoli presenti su questo sito (vedi i link qui sopra).

- -

Considerazioni specifiche per dispositivi mobili

- -

Ci sono altri importanti aspetti da prendere in considerazione per ottimizzare l’accessibilità dei siti sui dispositivi mobili. Riportiamo due esempi qui sotto, e in futuro speriamo di riuscire ad aggiungerne altri.

- -

Non disabilitare lo zoom

- -

Utilizzando viewport, è possibile disabilitare la funzionalità di zoom, ponendo il seguente codice nella <head>:

- -
<meta name="viewport" content="user-scalable=no">
- -

Non dovresti mai farlo, a meno che sia strettamente necessario. Molte persone infatti usano lo zoom per migliorare la visibilità e leggibilità del contenuto, e privare i tuoi utenti di tale possibilità non è una buona pratica. Ci sono alcune situazioni in cui l’uso dello zoom può effettivamente danneggiare la struttura dell’interfaccia utente; in tali casi, se davvero ritieni necessario disabilitare lo zoom, dovresti fornire una funzionalità equivalente, come per esempio dei controlli per aumentare le dimensioni del testo senza alterare altri elementi dell’interfaccia utente.

- -

Accessibilità dei menu

- -

È una pratica molto comune, quando un sito viene visualizzato su un dispositivo con schermo di dimensioni ridotte, usare media queries per ridurre il menu di navigazione a un semplice bottone o una icona, che quando vengono premuti si espandono mostrando gli elementi del menu in forma di menu drop-down, o menu a tendina. Di solito si utilizza una icona con tre linee orizzontali, nota come "menu ad hamburger".

- -

 

- -

Quando implementi un menu di questo tipo, devi assicurarti che l’”hamburger” sia accessibile con gli appropriati meccanismi di controllo (normalmente su dispositivo mobile vi si accede tramite touch), come discusso in {{anch("Meccanismi di controllo")}} più sopra, e che il resto della pagina sia nascosto o comunque disabilitato mentre il menu sia attivo, per evitare confusione durante l’utilizzo dello stesso.

- -

Qui puoi trovare un buon esempio di menu ad hamburger.

- -

Input dell’utente

- -

Quando si usano dispositivi mobili, inserire dati è di solito un’esperienza più lenta e tediosa che il suo equivalente su pc o laptop. È molto più facile scrivere con una tastiera normale che con una virtuale o una di dimensioni ridotte.

- -

Per tale ragione, vale la pena cercare di minimizzare il più possibile la quantità di dati da introdurre manualmente sui dispositivi mobili. Per esempio, se vuoi che gli utenti specifichino qual è il loro lavoro, invece di usare un campo di testo aperto puoi usare un menu a selezione {{htmlelement("select")}} contenente le opzioni più comuni (cosa che tra l’altro aiuta anche a migliorare la consistenza dei dati), e offrire tra le opzioni una categoria “Altro” che, se selezionata, fa comparire un campo di testo dove l’utente può scrivere liberamente per specificare la sua occupazione. Puoi vedere un esempio di questa idea alla pagina tipi-di-lavoro-comuni (vedi la versione live).

- -

Inoltre, vale la pena prendere in considerazione l’uso di tipi di input HTML5 nativi, come per esempio il tipo “date”, che su dispositivi mobili Androd e iOS vengono gestiti automaticamente da widget nativi integrati all’interfaccia che l’utente è già abituato a usare sul dispositivo. Vedi esempi-formulari-html5.html per alcuni esempi (vedi anche la versione live). Prova a visualizzare e usare questi esempi su un dispositivo mobile.

- -

 

- -

Alcuni esempi di tipi di input HTML5 e come appaiono quando sono usati da dispositivo mobile:

- -

 

- - - -

Se vuoi fornire una versione della tua applicazione specifica per dispositivi mobili e diversa da quella per pc e laptop, puoi usare una tecnologia di feature detection per rilevare il tipo di dispositivo su cui l’applicazione viene visualizzata. Vedi l’articolo in inglese  input types per maggiori informazioni sui differenti tipi di input, e anche il nostro articolo in inglese sulla feature detection.

- -

Riassunto

- -

In questo articolo abbiamo riportato alcuni dettagli sui più comuni problemi di accessibilità su dispositivi mobili, e alcune linee guida su come superarli. Abbiamo inoltre fornito indicazioni sull’uso dei più comuni lettori di schermo per dispositivi mobili, per aiutarti nella realizzazione di test di accessibilità.

- -

Vedi anche

- - - -
{{PreviousMenuNext("Learn/Accessibilità/Multimedia","Learn/Accessibilità/Accessibility_troubleshooting", "Learn/Accessibilità")}}
- -
-

In questo modulo

- - -
-
diff --git "a/files/it/learn/accessibilit\303\240/accessibilit\303\240_test_risoluzione_problemi/index.html" "b/files/it/learn/accessibilit\303\240/accessibilit\303\240_test_risoluzione_problemi/index.html" deleted file mode 100644 index 8c0e97dab4..0000000000 --- "a/files/it/learn/accessibilit\303\240/accessibilit\303\240_test_risoluzione_problemi/index.html" +++ /dev/null @@ -1,113 +0,0 @@ ---- -title: 'Test di valutazione: risoluzione di problemi di accessibilità' -slug: Learn/Accessibilità/Accessibilità_test_risoluzione_problemi -tags: - - Accessibilità - - CSS - - HTML - - JavaScript - - Principiante - - Test di valutazione - - WAI-ARIA -translation_of: Learn/Accessibility/Accessibility_troubleshooting ---- -
{{LearnSidebar}}
- -
{{PreviousMenu("Learn/Accessibilità/Accessibilità_dispositivi_mobili", "Learn/Accessibilità")}}
- -

Nella sezione di valutazione di questo modulo ti proponiamo un semplice sito web che presenta alcuni problemi di accessibilità che devi individuare e risolvere.

- - - - - - - - - - - - -
Prerequisiti:Conoscimenti basici sull'uso del computer, livello basico di HTML, CSS e JavaScript, e aver letto i  precedenti articoli del corso.
Obiettivo:Mettere alla prova la tua preparazione su alcuni aspetti fondamentali dell’accessibilità.
- -

Punto di partenza

- -

 

- -

Come primo passo, dovresti scaricare l’archivio ZIP contenente i file che compongono il sito di esempio. Decomprimi l’archivio in una cartella locale sul tuo computer.

- -

Il risultato finale del test dovrebbe apparire così:

- -

 

- -

- -

Inizialmente aprendo il sito d’esempio nel tuo browser vedrai che appare diverso in alcuni aspetti dall’immagine del risultato finale. Ciò è dovuto al fatto che il codice sorgente di partenza contiene differenze rispetto a quello a cui vogliamo arrivare, differenze che si riflettono nel modo in cui CSS fa visualizzare il sito. Non ti preoccupare, nelle sezioni seguenti sistemeremo tutti questi problemi.

- -

Schema del progetto

- -

Il punto di partenza è un immaginario sito sulla natura che mostra un articolo sugli orsi. Il sito presenta numerosi problemi di accessibilità. Il tuo compito è individuarli e, per quanto possibile, risolverli. Usa le domande riportate qui sotto come guida.

- -

Colori

- -

Allo stato attuale il testo è di difficile lettura, a causa dello schema di colori in uso. Puoi effettuare un test del contrasto dei colori (colore del testo/colore di fondo) e sistemare il problema cambiando i colori usati?

- -

HTML semantico

- -
    -
  1. Il contenuto continua ad essere poco accessibile. Fai una prova di navigazione con un lettore di schermo.
    2. -
  2. Puoi aggiornare il testo dell’articolo per renderlo più facilmente navigabile tramite lettore di schermo?
    3. -
  3. Il menu di navigazione (racchiuso tra le etichette <div class="nav"> e </div>) potrebbe essere reso più accessibile usando un elemento semantico HTML5 appropriato. Di quale elemento si tratta? Aggiorna il menu usando l’elemento appropriato.
    4. -
- -
-

Nota: dovrai anche aggiornare i selettori CSS che controllano lo stile del contenitore del menu di navigazione.

-
- -

Le immagini

- -

Allo stato attuale le immagini sono inaccessibili agli utenti che usano lettore di schermo. Puoi risolvere questo problema?

- -

Il lettore audio

- -
    -
  1. Il lettore <audio> non è accessibile alle persone con disabilità uditiva. Puoi aggiungere una alternativa accessibile a questo tipo di utenti?
    2. -
  2. Il lettore <audio> non è accessibile agli utenti che usano browser che non supportano l’audio HTML5. Cosa puoi fare per permettere anche a questi utenti di accedere al contenuto audio?
    3. -
- -

I formulari

- -
    -
  1. Sarebbe utile aggiungere un’etichetta all’elemento <input> della barra di ricerca, ma non vogliamo usare un’etichetta visibile, che potrebbe rovinare il disegno della pagina e non è realmente necessaria agli utenti che vedono. Come puoi aggiungere un’etichetta che sia accessibile solo ai lettori di schermo?
    2. -
  2. I due elementi <input> del formulario di commento hanno etichette testuali, ma queste etichette non sono associate ai loro relativi campi in una forma che si possa definire completamente non ambigua. Come puoi risolvere questa imprecisione? Nota che dovrai aggiornare anche alcune regole CSS.
    3. -
- -

Il bottone mostra/nascondi commenti

- -

Il bottone mostra/nascondi commenti non è attualmente accessibile tramite tastiera. Puoi renderlo accessibile da tastiera, rendendolo sia selezionabile tramite tasto TAB che attivabile tramite tasto INVIO?

- -

La tabella

- -

La tabella dati non è molto accessibile. Risulta difficile per gli utenti che usano lettore di schermo distinguere file e colonne, e inoltre la tabella non ha associata nessuna forma di didascalia che spieghi chiaramente a cosa fa riferimento. Puoi aggiungere tali funzionalità al codice HTML per risolvere questi problemi?

- -

Altre considerazioni?

- -

Puoi indicare due ulteriori idee per rendere il sito più accessibile?

- -

Valutazione

- -

Se stai sostenendo questa prova di valutazione come parte di un corso organizzato puoi mandare il tuo progetto al tuo insegnante perchè lo valuti. Se invece stai studiando per conto tuo, puoi ricevere una guida alla valutazione richiedendola nel forum di discussione su questo esercizio, o nel canale IRC #mdn su Mozilla IRC. In ogni caso, raccomandiamo di non guardare le soluzioni senza prima fare uno sforzo per risolvere gli esercizi per conto tuo.

- -

{{PreviousMenu("Learn/Accessibilità/Accessibilità_dispositivi_mobili", "Learn/Accessibilità")}}

- -

In questo modulo

- - diff --git "a/files/it/learn/accessibilit\303\240/cosa_\303\250_accessibilit\303\240/index.html" "b/files/it/learn/accessibilit\303\240/cosa_\303\250_accessibilit\303\240/index.html" deleted file mode 100644 index 52a5c138f8..0000000000 --- "a/files/it/learn/accessibilit\303\240/cosa_\303\250_accessibilit\303\240/index.html" +++ /dev/null @@ -1,196 +0,0 @@ ---- -title: Cosa è l'accessibilità? -slug: Learn/Accessibilità/Cosa_è_accessibilità -tags: - - Accessibilità - - Articolo - - CSS - - HTML - - JavaScript - - Principiante - - Strumenti - - TA - - disabilità - - imparare - - lettore schermo - - tastiera - - tecnologie assistive - - utenti -translation_of: Learn/Accessibility/What_is_accessibility ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/Accessibilità/HTML_accessibilità", "Learn/Accessibilità")}}
- -

Questo articolo inaugura il modulo con una visione generale di cosa è realmente l'accessibilità. Sono inclusi argomenti come: quali gruppi di persone dobbiamo tenere in considerazione e perché, quali strumenti di supporto le persone usano per interagire con la rete, e come possiamo rendere l'accessibilità parte integrante del nostro processo di sviluppo web.

- - - - - - - - - - - - -
Prerequisiti:Conoscimenti basici sull'uso del computer, livello basico di HTML e CSS.
Obiettivo:Acquisire familiarità con il concetto di accessibilità, capire di cosa si tratta e in che modo influisce sulla tua attività di sviluppatore web. 
- -

Dunque, cosa è l'accessibilità?

- -

L'accessibilità è la pratica di rendere i tuoi siti utilizzabili dal maggior numero di persone possibile. Di solito si pensa che il tema dell'accessibilità riguardi solo le persone che soffrono di una disabilità, ma in realtà l'accessibilità è un concetto importante anche per altri gruppi di persone, come coloro che usano dispositivi mobili o chi naviga in internet con una connessione lenta.

- -

Puoi anche pensare all'accessibilità come alla pratica di trattare tutti alla stessa maniera e dare a tutti le stesse opportunità, indipendentemente dalle loro capacità e circostanze. Così come non è corretto impedire l'accesso a un edificio a una persona che si muove in sedia a rotelle (e infatti gli edifici pubblici devono essere dotati di rampe e ascensori), allo stesso modo non si deve escludere una persona dall'utilizzo di un sito web per il fatto che abbia un handicap o stia usando un dispositivo mobile. Tutti gli utenti devono avere gli stessi diritti.

- -

Rendere un sito accessibile non solo è la cosa giusta da fare da un punto di vista etico, ma in molti paesi è anche obbligatorio per legge, e inoltre può contribuire a raggiungere categorie di utenti e clienti che altrimenti non potrebbero usare i tuoi servizi o acquistare i tuoi prodotti.

- -

Rispettare le pratiche di accessibilità è benefico per tutti:

- - - -

Quali tipi di disabilità prendere in considerazione?

- -

Le persone con disabilità sono molto diverse tra loro, così come quelle senza disabilità. Il concetto chiave da imparare è smettere di pensare a come tu stesso usi il computer e navighi in internet, e cominciare a considerare come lo fanno gli altri. I principali tipi di disabilità sono spiegati qui sotto, insieme agli strumenti che le persone disabili usano per navigare il web (conosciuti come tecnologie assistive, o TA).

- -
-

Nota: la Organizzazione Mondiale della Sanità nel suo rapporto (in inglese) Disabilità e salute afferma che "Oltre un miliardo di persone, circa il 15% della popolazione mondiale, ha una qualche forma di disabilità", e "Tra 110 e 190 milioni di adulti hanno significative difficoltà funzionali". 

-
- -

Persone con deficit visivo

- -

Questa categoria include persone non vedenti, persone con una capacità visiva molto ridotta (ipovedenti), daltonici, ecc. Molte di queste persone usano ingranditori di schermo (sia fisici che software, per esempio la maggior parte dei navigatori è dotata di funzioni di zoom), e alcuni usano lettori di schermo, cioè programmi che leggono a voce alta il contenuto digitale:

- - - -

È una buona idea acquisire familiarità con i lettori di schermo; dovresti provare a installarne uno e usarlo, per farti una idea di come funziona. Per maggiori dettagli su come usarli, fai riferimento alla nostra guida (in inglese) Guida al testing dei lettori di schermo su differenti browser. Il video qui sotto inoltre fornisce una breve testimonianza sull'uso dei lettori di schermo.

- -

{{EmbedYouTube("IK97XMibEws")}}

- -

In termini statistici, la Organizzazione Mondiale della Sanità stima che "circa 285 milioni di persone nel mondo hanno gravi deficit visivi: 39 milioni sono non vedenti e 246 milioni ipovedenti". (vedi il rapporto in inglese Deficit visivo e cecità). Si tratta di una significativa quantità di utenti, pari quasi alla popolazione degli Stati Uniti, che non potrà usufruire del tuo sito se non lo avrai reso accessibile.

- -

Persone con deficit uditivo

- -

Questa categoria di persone presentano una capacità uditiva molto ridotta o del tutto assente. Le persone con deficit uditivo spesso usano TA (vedi l'articolo in inglese Strumenti assistivi per persone con disfunzioni uditive, della voce, dell'apparato fonatorio o del linguaggio), ma non esistono in realtà tecnologie assistive specifiche per l'uso del computer o di internet. 

- -

Ci sono, comunque, tecniche specifiche da tenere in conto per fornire alternative testuali ai contenuti audio, come per esempio trascrizioni o sottotitoli sincronizzati nei video. Più avanti si tratteranno queste tecniche nel dettaglio in un altro articolo.

- -

Anche le persone con deficit uditivo rappresentano una significativa base di utenza. Come indica la Organizzazione Mondiale della Sanità nel rapporto in inglese Sordità e perdita dell'udito, "360 milioni di persone nel mondo presentano deficit uditivi gravi".

- -

Persone con problemi di mobilità

- -

Alcune persone soffrono di disabilità che riguardano il movimento. Ciò può riferirsi a problemi puramente fisici (come la perdita di un arto o uno stato di paralisi), o a disordini di tipo neurologico/genetico che comportano difficoltà nei movimenti o perdita di controllo sugli arti. Alcune persone possono avere difficoltà a compiere i movimenti della mano necessari per usare un mouse, mentre altre possono presentare problemi più gravi, come per esempio uno stato di paralisi estesa, che rende necessario l'uso di un puntatore comandato tramite movimenti della testa per interagire con il computer. 

- -

Questo tipo di disabilità può anche essere dovuto all'età avanzata, piuttosto che a un trauma o una condizione specifica, e può anche essere attribuibile a limitazioni dell'hardware, come nel caso di utenti che non hanno un mouse a disposizione.

- -

In generale, per gestire questo tipo di limitazioni è necessario sviluppare i propri siti o applicazioni in maniera tale che siano utilizzabili tramite tastiera. Tratteremo l'argomento dell'accessibilità tramite tastiera con articoli specifici più avanti nel modulo, ma nel frattempo ti consigliamo di provare a navigare alcuni siti usando solo la tastiera, per farti un'idea di come funziona. Per esempio, puoi usare il tasto TAB per muoverti da un campo all'altro di un formulario? Puoi trovare ulteriori dettagli sull'uso della tastiera per la navigazione dei siti nella sezione (in inglese) Test di accessibilità della navigazione con tastiera su differenti browser.

- -

Secondo le statistiche, un numero significativo di persone soffre di limitazioni alla mobilità. Il rapporto (in inglese) Disabilità e funzionamento (adulti maggiorenni non ricoverati) indica che negli Stati Uniti la percentuale di adulti con difficoltà di funzionamento fisico è del 15,1%.

- -

Persone con deficit cognitivo

- -

Probabilmente il più ampio range di disabilità è quello compreso in quest'ultima categoria. Il termine deficit cognitivo può infatti riferirsi ad un'ampia gamma di disfunzioni, dalle malattie mentali alle difficoltà di apprendimento, da problemi di comprensione e concentrazione, come la sindrome da deficit di attenzione e iperattività, a persone che presentano una forma di autismo, o persone che soffrono di schizofrenia, e molti altri tipi di disturbo. Questo tipo di disabilità possono influenzare molte attività della vita quotidiana, causando problemi di memoria, comprensione, attenzione, ecc.

- -

Le forme più comuni con cui tali forme di disabilità influenzano l'uso di un sito sono: difficoltà nel capire il procedimento da seguire per raggiungere un risultato; difficoltà nel ricordare come ripetere un'azione compiuta precedentemente; un senso di frustrazione causato da alcune caratteristiche del sito che lo rendono confuso e inconsistente nella navigazione.

- -

Diversamente da altri problemi di accessibilità web, è impossibile fornire linee guida specifiche per risolvere le difficoltà causate da deficit cognitivo; la strategia migliore è di impegnarsi a disegnare i propri siti nella forma più logica, consistente e usabile possibile. Per esempio, assicurati che:

- - - -

Queste non sono soltanto tecniche di accessibilità, ma piuttosto buone pratiche di disegno web che saranno utili a chiunque userà i tuoi siti, e dovrebbero essere pratiche standard nel tuo lavoro di sviluppo web.

- -

In termini statistici, anche in questo caso i numeri sono significativi. Per esempio, il rapporto (in inglese) della Cornell University Rapporto sullo stato della disabilità 2014 (PDF, 511KB) indica che nel 2014 il 4.5% della popolazione degli Stati Uniti di età compresa tra 21 e 64 anni presenta una qualche forma di disabilità cognitiva.

- -
-

Nota:  La sezione (in inglese) Cognitive del sito WebAIM fornisce utili approfondimenti sulle pratiche riportate sopra, ed è certamente una lettura consigliata.

-
- -

Come implementare l'accessibilità nei tuoi progetti

- -

Un mito molto comune sull'accessibilità è che questa sia una sorta di "costoso extra". Questo mito può essere veritiero se:

- - - -

Se invece l'accessibilità è parte integrante del tuo progetto sin dal principio, il costo per rendere il contenuto accesibile sarà minimo.

- -

Quando pianifichi un progetto, introduci test di accessibilità nella tua routine di testing, allo stesso modo in cui effettui test per gli altri segmenti di utenza (come per esempio gli utenti che usano pc desktop, iOS o dispositivi mobili, ecc.). Effettua test sin dall'inizio e con frequenza, idealmente facendo uso di test automatizzati che rilevino sistematicamente caratteristiche mancanti (come per esempio mancanza di testo alternativo nelle immagini, o la presenza di link testuali mal costruiti. Vedi l'articolo in inglese Relazione tra elementi e contesto) ed anche, se possibile, effettuando test con persone disabili per verificare il funzionamento delle caratteristiche più complesse del sito. Per esempio: 

- - - -

Dovresti prendere nota di tutte le potenziali aree problematiche del tuo contenuto su cui sarà necessario intervenire perchè siano rese accessibili, assicurarti che siano testate a sufficienza e pensare a soluzioni o alternative. Il contenuto testuale (come vedrai nel prossimo articolo) è facile da gestire, ma come fare con il contenuto multimediale, o le grafiche 3D? Dovresti considerare il budget a disposizione e pensare a quali possibilità hai per rendere il contenuto accessibile. Per esempio, potresti decidere di pagare qualcuno per trascrivere tutto il contenuto multimediale. Può essere costoso, ma è fattibile.

- -

Inoltre, devi essere realista. Un sito accessibile al 100% è un ideale irraggiungibile, ci sarà sempre qualche situazione particolare per la quale un utente troverà difficile usare il tuo contenuto, ma devi fare tutto il possibile per evitare che si verifichino tali situazioni. Se hai in mente di includere nel tuo sito uno spettacolare grafico a torta 3D creato con WebGL, dovresti anche includere, come alternativa accessibile, una tabella dati standard. Oppure, potresti addirittura decidere di eliminare il grafico 3D: la tabella è accessibile a tutti, più rapida da creare, richiede meno risorse CPU ed è più facile da mantenere.

- -

D'altro canto se stai costruendo un sito-galleria per opere d'arte in 3D, non sarebbe ragionevole pretendere che ogni opera fosse perfettamente accessibile alle persone con disabilità visiva, dato che si tratta di un medium interamente visuale.

- -

Per dimostrare che hai grande considerazione per l'accessibilità e che l'hai inclusa nel tuo progetto, pubblica una dichiarazione di accessibilità sul tuo sito nella quale spieghi in dettaglio la tua politica sull'accessibilità, e quali misure hai adottato per rendere il sito accessibile. Se un utente ti contatta lamentando un problema di accessibilità, assicurati di ascoltarlo con attenzione e chiarire tutti i dettagli, sii empatico, e adotta tutte le misure ragionevoli per risolvere il problema.

- -
-

Nota: Il nostro articolo (in inglese) Come gestire i problemi di accessibilità più comuni spiega con maggiori dettagli le specifiche di accessibilità che devono essere testate. 

-
- -

Per riassumere:

- - - -

Linee guida di accessibilità e legge

- -

Ci sono numerose checklist e set di linee guida disponibili per effettuare test basici di accessibilità, e a prima vista possono apparire complicate. Ti consigliamo innanzitutto di acquisire familiarità con le aree più importantidi cui devi occuparti, e di cercare di comprendere le strutture generali delle linee guida che sono più rilevanti al tuo caso specifico.

- - - -

È una buona idea leggere il testo della legge italiana sull'accessibilità, per familiarizzarsi con essa ed evitare eventuali problemi legali per i tuoi siti.

- -

API per l'accessibilità

- -

I browser fanno uso di alcune API speciali per l'accessibilità (fornite dal sistema operativo) che mostrano informazioni utili per le tecnologie assistive (TA). Le TA in generale usano solo informazioni semantiche, dunque non prendono in considerazione aspetti come lo stile di una pagina o gli script in JavaScript. Le informazioni sono strutturate in una mappa ad albero.

- -

Ogni sistema operativo ha la sua API per l'accessibilità:

- - - -

Quando le informazioni semantiche native fornite dagli elementi HTML della tua applicazione web non sono sufficienti, puoi supplementarle con caratteristiche della specificazione WAI-ARIA (articolo in inglese), che aggiunge informazione semantica alla mappa ad albero per migliorare l'accessibilità. Puoi sapere di più su WAI-ARIA nel nostro articolo basi di WAI-ARIA.

- -

Riassunto

- -

Questo articolo dovrebbe averti fornito una utile panoramica sull'accessibilità, averti mostrato perchè è importante, e come puoi inserirla nel tuo flusso di lavoro. Dovrebbe inoltre aver suscitato il tuo interesse e un desiderio di conoscere i dettagli su come implementare l'accessibilità nei tuoi progetti. Cominceremo a occuparcene proprio nella prossima sezione, dove spiegheremo come HTML costituisce un'ottima base per l'accessibilità. 

- -
{{NextMenu("Learn/Accessibilità/HTML_accessibilità", "Learn/Accessibilità")}}
diff --git "a/files/it/learn/accessibilit\303\240/css_e_javascript_accessibilit\303\240/index.html" "b/files/it/learn/accessibilit\303\240/css_e_javascript_accessibilit\303\240/index.html" deleted file mode 100644 index 6f5e69fea4..0000000000 --- "a/files/it/learn/accessibilit\303\240/css_e_javascript_accessibilit\303\240/index.html" +++ /dev/null @@ -1,359 +0,0 @@ ---- -title: Linee guida di accessibilità per CSS e JavaScript -slug: Learn/Accessibilità/CSS_e_JavaScript_accessibilità -tags: - - Accessibilità - - Articolo - - CSS - - Guida - - JavaScript - - colore - - contrasto - - imparare - - nascondere - - non intrusivo -translation_of: Learn/Accessibility/CSS_and_JavaScript ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Accessibilità/HTML_accessibilità","Learn/Accessibility/WAI-ARIA_basics", "Learn/Accessibilità")}}
- -

CSS e JavaScript, quando utilizzati propriamente, possono contribuire ad offrire una esperienza accessibile della rete. Se invece vengono utilizzati in maniera incorretta possono causare una drastica riduzione dell'accessibilità. Questo articolo riporta alcune linee guida per l'utilizzo di CSS e JavaScript che devono essere tenute in considerazione per permettere a contenuti anche molto complessi di avere il più alto grado di accessibilità possibile.

- - - - - - - - - - - - -
Prerequisiti:Conoscimenti basici sull'uso del computer, livello basico di HTML, CSS e JavaScript e una idea chiara di cosa è l'accessibilità.
Obiettivo:Imparare le basi di come utilizzare CSS e JavaScript correttamente per massimizzare l'accessibilità dei propri siti e allo stesso tempo evitare errori che potrebbero ridurla.
- -

CSS e JavaScript sono accessibili?

- -

CSS e JavaScript non hanno per l'accessibilità lo stesso livello di importanza che ha HTML, ma possono comunque arrecare grandi danni se usati impropriamente. Per dirlo in un'altra maniera, è importante che tu apprenda alcune linee guida sull'uso di CSS e JavaScript, per evitare di rovinare l'accessibilità dei tuoi documenti web.

- -

CSS

- -

Cominciamo col dare un'occhiata a CSS.

- -

Semantiche corrette e aspettative dell'utente

- -

È possibile usare CSS per modificare in qualsiasi modo l'aspetto di qualsiasi elemento HTML, ma questo non significa che lo devi fare obbligatoriamente. Come abbiamo detto più volte nell'articolo HTML: una buona base per l'accessibilità, dovresti utilizzare sempre l'elemento semantico più appropriato per ogni situazione, a meno che sia davvero impossibile. Se non lo fai, puoi causare confusione e problemi di usabilità a tutti gli utenti, e in particolare a quelli con disabilità. Usare le semantiche corrette significa soprattutto venire incontro alle aspettative degli utenti: gli elementi devono apparire e funzionare secondo certi criteri, a seconda della loro funzione, e gli utenti si aspettano che queste convenzioni siano rispettate. 

- -

Per esempio, un utente che usa lettore di schermo non può navigare una pagina attraverso gli elementi di heading se lo sviluppatore del sito non ha usato gli heading appropriati per etichettare il contenuto. Allo stesso modo, un heading perde la sua funzione visuale se lo hai modificato fino al punto in cui non appare più come un heading.

- -

La regola generale è che puoi modificare lo stile di un elemento perchè sia congruente con lo stile generale del tuo sito, ma non modificarlo tanto da far si che non appaia o agisca come ci si aspetterebbe. Le sezioni seguenti riassumono i principali elementi HTML da prendere in considerazione.

- -

Struttura del contenuto testuale "standard"

- -

Heading, paragrafi, liste... Il contenuto testuale principale della tua pagina:

- -
<h1>Heading</h1>
-
-<p>Paragrafo</p>
-
-<ul>
-  <li>Lista</li>
-  <li>Lista di due elementi.</li>
-</ul>
- -

Un codice CSS tipico potrebbe essere il seguente:

- -
h1 {
-  font-size: 5rem;
-}
-
-p, li {
-  line-height: 1.5;
-  font-size: 1.6rem;
-}
- -

Dovresti:

- - - -

Vedi gli articoli in inglese  Fondamenti di testo in HTML e Modificare lo stile del testo per maggiori informazioni.

- -

Testo enfatizzato

- -

L'etichetta <em> conferisce enfasi al testo, mostrandolo in corsivo. L'etichetta <strong> ha lo stesso scopo, ma mostra il testo in grassetto:

- -
<p>L'acqua è <em>molto calda</em>.</p>
-
-<p>Le gocce d'acqua che si formano su una suoerficie sono chiamate <strong>condensa</strong>.</p>
- -

Potresti aggiungere un colore particolare per il testo in evidenza:

- -
strong, em {
-  color: #a60000;
-}
- -

Ad ogni modo, raramente avrai bisogno di modificare lo stile di elementi enfatizzati. Gli stili standard grassetto e corsivo sono molto riconoscibili, e modificarli potrebbe creare confusione. Per maggiori informazioni sull'enfasi vedi l'articolo in inglese Enfasi e importanza.

- -

Abbreviazioni

- -

l'etichetta <abbr> indica una abbreviazione o un acronimo, e permette, tramite l'attributo title, di fornire la versione estesa della frase o parola abbreviata:

- -
<p>Il contenuto di un sito è codificato tramite <abbr title="Hypertext Markup Language">HTML</abbr>.</p>
- -

Anche in questo caso potresti voler apportare qualche semplice modifica allo stile:

- -
abbr {
-  color: #a60000;
-}
- -

Lo standard riconosciuto per indicare le abbreviazioni è una sottolineatura punteggiata, ed è raccomandabile non modificarlo significativamente. Per maggiori dettagli sulle abbreviazioni, vedi l'articolo in inglese Abbreviazioni.

- - - -

I link sono il mezzo con cui ti muovi da un punto all'altro della rete:

- -
<p>Visita la <a href="https://www.mozilla.org">homepage di Mozilla</a>.</p>
- -

Qui sotto sono riportate alcune semplici modifiche allo stile dei link:

- -
a {
-  color: #ff0000;
-}
-
-a:hover, a:visited, a:focus {
-  color: #a60000;
-  text-decoration: none;
-}
-
-a:active {
-  color: #000000;
-  background-color: #a60000;
-}
- -

Lo stile di default per i link è la sottolineatura, inoltre si presentano in diversi colori a seconda del loro stato: blu è il colore nello stato di default, viola nel caso il link sia stato visitato, rosso quando si "attiva" cliccandoci sopra. Oltre a ciò, il puntatore del mouse cambia forma quando lo si passa su un link, e il link viene messo in evidenza quando riceve focus (per esempio tramite tast TAB). Nell'immagine qui sotto possiamo vedere l'evidenziazione di un link in Firefox (cornice punteggiata) e Chrome (cornice azzurra):

- -

- -

- -

Puoi modificare lo stile dei link come più ti piace, ma facendo attenzione a fornire agli utenti un feedback quando interagiscono coi link. Quando un link cambia di stato si dovrebbe notare. Inoltre, evita di rimuovere stili di default come il cambio di puntatore del mouse o l'evidenziazione quando un link riceve focus: entrambi sono molto importanti per l'accessibilità degli utenti che usano tastiera.

- -

Formulari

- -

I formulari sono elementi che permettono agli utenti di introdurre dati in un sito web:

- -
<div>
-  <label for="nome">Introduci il tuo nome</label>
-  <input type="text" id="nome" name="nome">
-</div>
- -

Puoi vedere un buon esempio di uso di CSS  in un formulario qui: form-css.html (vedi anche la versione live).

- -

La maggior parte del codice CSS che scriverai per i formulari sarà per modificare le dimensioni degli elementi, allineare elementi label e input e migliorarne l'aspetto esteriore.

- -

Non dovresti comunque modificare troppo il feedback visuale che gli elementi di un formulario mostrano quando ricevono focus, che è in pratica lo stesso dei link (vedi sopra). Puoi modificare l'aspetto delle evidenziazioni applicate agli elementi del formulario quando ricevono focus o hover del puntatore del mouse per far si che lo stile del tuo sito sia consistente sui diversi browser, ma evita di rimuoverle. Come già detto, alcuni utenti contano su tali "segnali" per poter interpretare ciò che sta accadendo mentre navigano un sito.

- -

Tabelle

- -

Prendiamo ora in considerazione le tabelle che si usano per presentare dati.

- -

Puoi vedere un buon esempio di tabella costruita con HTML e CSS qui:  table-css.html (vedi anche la versione live).

- -

Il codice CSS applicato alle tabelle serve in genere a uniformarle allo stile generale del sito e a migliorarle esteticamente. Alcune buone pratiche sono ad esempio far si che gli header(intestazioni di file o colonne) della tabella siano in risalto, per esempio usando il grassetto, e far uso di una alternanza di sfondo chiaro e scuro per rendere più facile la distinzione tra le varie file della tabella.

- -

Colore e contrasto

- -

Quando scegli uno schema di colori per il tuo sito, assicurati che il testo abbia un colore che contrasta bene con lo sfondo. Un basso contrasto dei colori può produrre un effetto interessante dal punto di vista estetico, ma renderà molto difficile poter leggere il tuo contenuto alle persone con problemi visivi come il daltonismo.

- -

C'è un modo molto facile per verificare se il contrasto che hai scelto è abbastanza alto da non causare problemi. Ci sono numerosi siti che ti permettono di introdurre il colore del testo e quello dello sfondo, per verificarne il contrasto. Per esempio il sito Color Contrast Checker è facile da usare, e fornisce una spiegazione (in inglese) dei criteri WCAG (Linee guida per l'accessibilità dei contenuti Web) sul contrasto dei colori.

- -
-

Nota: un contrasto alto sarà d'aiuto per poter leggere con maggiore facilità anche a chi si connette tramite telefono o tablet in ambienti con molta luce, come un parco o una piazza. 

-
- -

Un altro consiglio è di non fare affidamento solo sul colore per fornire un certo tipo di informazioni o segnali, in quanto tali informazioni non potranno essere interpretate da chi non vede i colori. Per esempio, invece di limitarti a marcare in rosso i campi di un formulario che sono da compilare obbligatoriamente, marcali anche con un asterisco.

- -

Nascondere elementi

- -

Ci sono molte situazioni nelle quali è necessario che non tutto il contenuto sia mostrato allo stesso tempo. Per esempio nel nostro info box a schede (vedi codice sorgente) abbiamo tre schede con informazioni posizionate una sopra l'altra, e ci sono tre bottoni cliccabili per passare da una scheda all'altra (il box è accessibile anche da tastiera, usando il tasto TAB per spostarsi tra i bottoni e INVIO per selezionare una scheda).

- -

- -

Gli utenti che usano lettori di schermo non avranno problemi a leggere tutte le schede, l'importante è che l'ordine del contenuto sia sensato. Usare position: absolute (come nel nostro esempio) è in generale considerato come uno dei migliori metodi per nascondere contenuto, perchè non impedisce ai lettori di schermo di leggerlo.

- -

D'altro canto, non dovresti usare {{cssxref("visibility")}}:hidden o {{cssxref("display")}}:none, perchè nascondono il contenuto ai lettori di schermo. A meno che, ovviamente, ci sia una buona ragione per nascondere questo contenuto ai lettori di schermo.

- -
-

Nota: l'articolo in inglese Contenuto visibile solo ai lettori di schermo fornisce molti più dettagli su questo argomento.

-
- -

È possibile che gli utenti modifichino lo stile dei tuoi elementi

- -

A volte gli utenti alterano gli stili che hai impostato sostituendoli con stili personalizzati. Per esempio:

- - - -

Gli utenti modificano il CSS per differenti ragioni: un utente con problemi di vista potrebbe voler ingrandire automaticamente il testo su tutti i siti che visita, un utente con daltonismo potrebbe voler aumentare il contrasto dei colori per facilitare la lettura. Qualunque sia la ragione, dovresti tenere in considerazione questa possibilità, e usare un disegno del tuo sito che sia sufficientemente flessibile per poter gestire tali cambi. Per esempio, dovresti assicurarti che l'area dove è situato il tuo contenuto principale può supportare un ingrandimento del testo, mantenendone il formato base e senza farne scomparire parti.

- -

JavaScript

- -

 

- -

Anche JavaScript può causare problemi di accessibilità, dipendendo da come si utilizza.

- -

JavaScript è un linguaggio molto potente, e possiamo usarlo per compiere un'infinità di funzioni, da semplici aggiornamenti del contenuto o della IU a giochi completi in 2D o 3D. Nessuna regola dice che tutto il contenuto deve essere accessibile al 100% a tutti, ma devi fare tutto il possibile, e cercare di rendere le tue applicazioni il più accessibili possibile.

- -

Il contenuto e gli elementi funzionali semplici sono relativamente facili da rendere accessibili: per esempio testo, immagini, tabelle, formulari e bottoni. Come abbiamo visto nell'articolo HTML: una buona base per l'accessibilità, le considerazioni chiave sono:

- - - -

Abbiamo inoltre visto un esempio di uso di JavaScript per migliorare l'accessibilità aggiungendo una funzionalità che mancava (vedi Implementare l'accessibilità da tastiera in un secondo tempo). Questo procedimento non è ideale, visto che si dovrebbe usare l'elemento più appropriato per ogni funzione sin dall'inizio, ma dimostra che è possibile intervenire sul codice in situazioni in cui è necessario modificarlo dopo la sua creazione. Un altro modo per migliorare l'accessibilità degli elementi che usano JavaScript non semantico è usare la tecnologia WAI-ARIA per fornire valore semantico extra per gli utenti che usano lettori di schermo. Il prossimo articolo spiegherà in dettaglio come farlo.

- -

Funzionalità complesse come i giochi in 3D non sono tanto facili da rendere accessibili. Un gioco 3D creato usando WebGL si svilupperà su un elemento {{htmlelement("canvas")}} , che al momento non permette di fornire alternative testuali o altre informazioni utili per persone con disabilità visiva. Si può ragionevolmente obbiettare che un tale tipo di gioco non ha nel suo target di utenza persone non vedenti, e in effetti sarebbe esagerato pretendere di renderlo accessibile al 100%. Ma ad ogni modo è consigliabile implementare alcuni elementi di accessibilità come i controlli da tastiera, che permettono di giocare anche a utenti senza mouse, e assicurarsi che lo schema dei colori abbia un contrasto sufficientemente alto per essere usabile da persone con daltonismo.

- -

Il problema di un uso eccessivo di JavaScript

- -

Spesso gli sviluppatori di siti fanno un uso eccessivo di JavaScript. A volte si trovano siti in cui tutto è stato fatto con JavaScript, perfino HTML e CSS sono stati generati con JavaScript. Questo tipo di siti presentano grossi problemi di accessibilità e non solo, ed è sconsigliato sviluppare siti in questo modo.

- -

Così come devi usare il giusto elemento per ogni funzione, assicurati anche di star usando la giusta tecnologia! Pensa bene se vale davvero la pena ricorrere a JavaScript per creare un pannello informazioni in 3D, mentre un semplice pannello testuale potrebbe essere sufficiente. Chiediti se hai davvero bisogno di un formulario basato su un widget super complesso, quando magari un semplice campo di input testuale andrebbe bene. E non generare tutto il tuo contenuto HTML con JavaScript.  

- -

Mantieni un uso non intrusivo di JavaScript

- -

Dovresti usare JavaScript con discrezione quando crei il tuo contenuto. L'idea di base è che JavaScript dovrebbe essere usato quando possibile per migliorare una funzionalità, ma non per costruirla. Le funzioni più basiche del sito dovrebbero essere indipendenti da JavaScript, anche se a volte ciò non è possibile. Una buona pratica è usare funzionalità già presenti nei browser quando è possibile.

- -

Buoni esempi di uso non intrusivo di JavaScript sono:

- - - -

Per fare un esempio abbiamo creato un semplice formulario con validazione dal lato cliente, vedi: form-validation.html (vedi anche la versione live). Nella pagina vedrai un formulario, e, quando provi a inviarlo, se avrai lasciato uno o entrambi i campi vuoti apparirà un messaggio di errore per spiegarti qual è il problema.

- -

Questo tipo di validazione di un formulario è non intrusiva, puoi infatti usare il formulario anche con JavaScript disabilitato, e inoltre il formulario dovrà comunque essere validato anche dal lato server, poichè sarebbe troppo facile per un utente con cattive intenzioni bypassare la validazione dal lato cliente (per esempio disattivando JavaScript nel browser). La validazione dal lato cliente è utile per segnalare istantaneamente eventuali errori all'utente, senza dover attendere la risposta del server, migliorando così l'usabilità del formulario.

- -
-

Nota: nel nostro esempio la validazione dal lato server non è stata implementata. 

-
- -

Abbiamo inoltre reso la validazione di questo formulario accessibile, usando l'elemento {{htmlelement("label")}} per assicurarci che ogni campo di input abbia associata una etichetta senza alcuna ambiguità, di modo che i lettori di schermo possano leggere il blocco input+etichetta come una sola unità:  

- -
<label for="nome">Inserisci il tuo nome:</label>
-<input type="text" name="nome" id="nome">
- -

La validazione avviene solo al momento dell'invio del formulario. In questo modo la IU non viene aggiornata troppo spesso potendo causare confusione negli utenti che usano lettori di schermo (e anche in quelli che non li usano):

- -
form.onsubmit = validate;
-
-function validate(e) {
-  errorList.innerHTML = '';
-  for(var i = 0; i < formItems.length; i++) {
-    var testItem = formItems[i];
-    if(testItem.input.value === '') {
-      errorField.style.left = '360px';
-      createLink(testItem);
-    }
-  }
-
-  if(errorList.innerHTML !== '') {
-    e.preventDefault();
-  }
-}
- -
-

Nota: in questo esempio stiamo nascondendo e mostrando il messaggio di errore usando position: absolute invece che un altro metodo come visibility: hidden o display: none, perchè in questo modo il lettore di schermo potrà leggerlo senza problemi.  

-
- -

Una validazione reale sarebbe molto più complessa, dovremmo controllare che il nome introdotto sembri effettivamente un nome, che l'età sia un numero e che sia realistica (per esempio non può essere un numero negativo, o di 4 cifre). Nell'esempio abbiamo implementato solo un sistema di verifica che controlla se i campi sono stati riempiti o no (if(testItem.input.value === '')).

- -

Quando la validazione ha terminato con esito positivo, il formulario viene inviato. Se ci sono errori (if(errorList.innerHTML !== '')) l'invio viene bloccato (usando preventDefault()), e si mostra il messaggio di errore (vedi sotto). Con questo meccanismo gli errori saranno mostrati solo se ci saranno effettivamente errori, migliorando l'usabilità. 

- -

Per ogni campo del formulario che è vuoto al momento dell'invio creiamo un item con un link e lo inseriamo nella lista errori (errorList).

- -
function createLink(testItem) {
-  var listItem = document.createElement('li');
-  var anchor = document.createElement('a');
-  anchor.textContent = testItem.input.name + ' field is empty: fill in your ' + testItem.input.name + '.';
-  anchor.href = '#' + testItem.input.name;
-  anchor.onclick = function() {
-    testItem.input.focus();
-  };
-  listItem.appendChild(anchor);
-  errorList.appendChild(listItem);
-}
- -

Ogni link ha una doppia funzionalità: segnala il tipo di errore e inoltre cliccandoci sopra sposta il focus automaticamente sul campo vuoto da riempire.

- -
-

Nota: il metodo focus() dell'esempio può creare confusione. Chrome e Edge (e le ultime versioni di IE) sposteranno il focus al campo relativo quando si clicca sul link, senza bisogno della funzione onclick/focus(). Safari si limiterà a evidenziare il campo, ma ha bisogno di onclick/focus() per spostare effettivamente il focus su di esso. Firefox al momento non è in grado di spostare il focus su un campo specifico, quindi il metodo non funzionerà su Firefox. Il problema dovrebbe essere risolto in futuro.

-
- -

 

- -

Inoltre, il messaggio di errore è stato posto in cima nel codice HTML (anche se poi viene visualizzato in un altro punto della pagina usando CSS per posizionarlo), di modo che l'utente, tornando in cima alla pagina, può sapere che errore c'è nel suo formulario e andare direttamente al campo in questione.

- -

Come annotazione finale, si noti che abbiamo usato alcuni attributi WAI-ARIA nel nostro esempio, per aiutare a risolvere problemi di accessibilità causati da aree del contenuto che si aggiornano costantemente senza che la pagina si ricarichi (di default i lettori di schermo non segnaleranno ciò agli utenti):

- -

 

- -
<div class="errors" role="alert" aria-relevant="all">
-  <ul>
-  </ul>
-</div>
- -

Torneremo a occuparci più dettagliatamente di questo tipo di attributi nel prossimo articolo sulla tecnologia WAI-ARIA.

- -
-

Nota: forse starai pensando che HTML5 include già alcuni meccanismi di validazione come gli attributi required, min/minlength, e max/maxlength. Non abbiamo fatto uso di tali attributi nell'esempio, perchè non presentano ancora un livello accettabile di compatibilità nei differenti browser (per esempio Safari non li supporta, Internet Explorer solo a partire dalla versione 10).

-
- -
-

Nota: l'articolo in inglese Forme usabili ed accessibili di validazione di formulari e risoluzione di errori fornisce ulteriori utili informazioni su come creare un processo di validazione acessibile.

-
- -

Altri problemi di accessibilità con JavaScript

- -

Ci sono altri aspetti relativi all'accessibilità da tenere in conto quando si usa JavaScript. Ne aggiungeremo altri all'articolo in futuro.

- -

Eventi specifici del mouse

- -

Come forse già saprai, le interazioni dell'utente con il sito tramite mouse sono gestite in JavaScript usando i gestori di eventi (event handlers), che ci permettono di eseguire funzioni in risposta a determinati eventi attivati dalle azioni compiute dall’utente con il mouse. Alcuni esempi di eventi specificamente relativi al mouse sono mouseover, mouseout, dblclick, ecc. Le funzionalità associate a tali eventi non sono accessibili usando altri dispositivi, come per esempio la tastiera.  

- -

Per attenuare i problemi di accessibilità che ne derivano, dovresti associare a tali eventi altri eventi simili ma che sono attivati in altra maniera (i cosiddetti gestori di eventi indipendenti dal dispositivo). Per esempio focus e blur forniscono accessibilità per gli utenti che navigano con la tastiera.

- -

Vediamo ora un esempio che dimostra questo tipo di situazione. Supponiamo che in una pagina del nostro sito ci sia una immagine in miniatura, che si espande quando ci si passa sopra con il puntatore del mouse, oppure quando riceve focus (per esempio pensiamo al catalogo di un sito di e-commerce).

- -

Abbiamo creato un esempio molto semplice, che puoi trovare qui: mouse-and-keyboard-events.html (vedi anche il codice sorgente). Il codice ha due funzioni per mostrare o nascondere l'immagine ingrandita; qui sotto vediamo il codice dei gestori degli eventi:

- -
imgThumb.onmouseover = showImg;
-imgThumb.onmouseout = hideImg;
-
-imgThumb.onfocus = showImg;
-imgThumb.onblur = hideImg;
- -

Le prime due linee di codice riguardano il mouse: la prima funzione si attiva al passare il puntatore del mouse sulla miniatura, mentre la seconda si attiva al togliere il puntatore dall'area della miniatura. Questo codice però non permette di vedere l'immagine ingrandita tramite tastiera. Per poterlo fare, abbiamo aggiunto le atre due linee di codice, che attivano le stesse funzioni quando la miniatura riceve focus o lo perde. Si può spostare il focus sulla miniatura usando il tasto TAB, perchè al codice HTML dell'elemento abbiamo aggiunto l'attributo  tabindex="0".

- -

L'evento click è interessante, a prima vista potrebbe sembrare un evento esclusivamente relativo  al mouse, ma nella maggior parte dei browser il gestore di eventi onclick si attiverà anche premendo il tasto INVIO su un link o un elemento di formulario con focus, o quando si clicca sull'elemento con il dito se si usa un dispositivo con touchscreen.

- -

Tieni presente comunque che questo non funziona nel caso in cui si usi tabindex per dare il focus a un elemento che di default non lo potrebbe avere. In casi come questo devi rilevare quando il tasto specifico è premuto (vedi Implementare l'accessibilità da tastiera in un secondo tempo).

- -

Riassunto

- -

 

- -

Speriamo che questo articolo ti sia servito a capire meglio i problemi di accessibilità relativi all'uso di CSS e JavaScript sui tuoi siti o applicazioni.

- -

E ora, WAI-ARIA!

- -
{{PreviousMenuNext("Learn/Accessibilità/HTML_accessibilità","Learn/Accessibilità/WAI-ARIA_basics", "Learn/Accessibilità")}}
diff --git "a/files/it/learn/accessibilit\303\240/html_accessibilit\303\240/index.html" "b/files/it/learn/accessibilit\303\240/html_accessibilit\303\240/index.html" deleted file mode 100644 index 26129068e4..0000000000 --- "a/files/it/learn/accessibilit\303\240/html_accessibilit\303\240/index.html" +++ /dev/null @@ -1,538 +0,0 @@ ---- -title: 'HTML: una buona base per l''accessibilità' -slug: Learn/Accessibilità/HTML_accessibilità -tags: - - Accessibilità - - Articolo - - Bottoni - - Formulari - - HTML semantico - - Lettore di schermo - - Link - - Principiante - - TA - - Testo Alternativo - - tastiera - - tecnologie assistive -translation_of: Learn/Accessibility/HTML ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Accessibilità/Cosa_è_accessibilità","Learn/Accessibilità/CSS_e_JavaScript_accessibilità", "Learn/Accessibilità")}}
- -

Buona parte del contenuto di un sito può essere reso accessibile semplicemente facendo attenzione ad usare sempre nella maniera corretta gli elementi HTML più opportuni per le funzionalità che si vogliono implementare. Questo articolo analizza in dettaglio come il linguaggio HTML può essere usato al meglio per garantire la massima accessibilità.

- - - - - - - - - - - - -
Prerequisiti:Conoscimenti basici sull'uso del computer, livello basico di HTML e una idea chiara di cosa è l'accessibilità.
Obiettivo:Acquisire familiarità con le caratteristiche di HTML che hanno effetti positivi sull'accessibilità, e imparare a usarle correttamente nello sviluppo dei propri siti e applicazioni. 
- -

HTML e accessibilità

- -

 

- -

Man mano che impari cose nuove su HTML (leggendo nuove risorse, analizzando esempi di codice, ecc.), ti accorgerai sicuramente di un tema ricorrente: l'importanza di usare HTML semantico (a volte chiamato POSH, Plain Old Semantic HTML). Ciò significa utilizzare il più possibile gli elementi HTML più corretti per il proprio scopo.

- -

Forse ti chiederai perché è tanto importante. Dopotutto, puoi usare un combinazione di CSS e JavaScript per far sì che qualsiasi elemento HTML si comporti esattamente come tu vuoi. Per esempio, un bottone che controlla la riproduzione di un video sul tuo sito si potrebbe codificare così:

- -

 

- -
<div>Play video</div>
- -

Ma, come vedrai in dettaglio più avanti, ha molto più senso usare un elemento più specifico:

- -
<button>Play video</button>
- -

Non solo l'elemento <button> presenta di default uno stile più appropriato alla sua funzione (anche se probabilmente in seguito modificherai tale stile), ma è anche perfettamente accessibile con la tastiera. Ciò significa che un utente che usa la tastiera per navigare potrà spostarsi da un bottone all'altro del sito usando il tasto TAB, e premere i bottoni usando INVIO.

- -

L'HTML semantico non richiede più tempo per essere scritto del codice non-semantico se lo utilizzi con consistenza sin dal principio del progetto, e inoltre presenta numerosi altri benefici che vanno al di là dell'accessibilità:

- -

 

- -
    -
  1. Maggior facilità nello sviluppo — come già detto in precedenza, gli elementi HTML semantici hanno già integrate in sè alcune funzionalità aggiuntive. inoltre rendono il codice più facile da leggere e interpretare.
    2. -
  2. Miglior rendimento su dispositivi mobili — l'HTML semantico è più leggero del non-semantico, e più facile da rendere responsivo.
    3. -
  3. Utile per il SEO — i motori di ricerca danno maggior importanza alle parole chiave contenute in heading, link, ecc. rispetto a quelle contenute in generici <div> non-semantici, dunque i tuoi siti saranno più facili da trovare. 
    4. -
- -

Ora vedremo più in dettaglio come produrre un codice HTML accessibile.

- -
-

Nota: È una buona idea installare un lettore di schermo sul tuo computer, così che tu possa testare gli esempi mostrati più avanti. Vedi la guida in inglese Guida ai lettori di schermo per maggiori dettagli.

-
- -

Semantiche corrette

- -

 

- -

Abbiamo già parlato dell'importanza di usare la giusta semantica, e perchè è importante usare i corretti elementi HTML per ogni situazione. Questa pratica non può essere ignorata, visto che è una delle principali situazioni in cui l'accessibilità viene compromessa se non si agisce propriamente.

- -

Se si analizzano i siti presenti in rete, si noterà che ci sono casi di utilizzo molto poco ortodosso del codice HTML. Alcuni errori sono dovuti a pratiche ormai in disuso che non sono state debitamente aggiornate, altri semplicemente a ignoranza. In ogni caso, ogni volta che trovi del codice erroneo, dovresti fare il possibile per sistemarlo.

- -

A volte non sei nella posizione di poter correggere del codice mal scritto, per esempio se le tue pagine si basano su un framework esterno su cui non hai controllo, o se sul tuo sito è presente contenuto di terze parti (come ad esempio banners pubblicitari) che non puoi modificare.

- -

Comunque, tieni a mente che l'obiettivo non è "tutto o niente". Ogni piccolo miglioramento che riuscirai a implementare sarà utile alla causa dell'accessibilità.

- -

Contenuto testuale

- -

Uno dei più grandi aiuti per un utente che usa un lettore di schermo è una buona struttura del contenuto, diviso in headings, paragrafi, liste ecc. Un buon esempio può essere il seguente codice:

- -
<h1>Titolo</h1>
-
-<p>Questa è la prima sezione del mio documento.</p>
-
-<p>Ecco qui un altro paragrafo.</p>
-
-<ol>
-  <li>Questa è</li>
-  <li>una lista</li>
-  <li>composta da</li>
-  <li>vari elementi</li>
-</ol>
-
-<h2>Sottosezione</h2>
-
-<p>Questa è la prima sottosezione del mio documento. Dovrebbe essere facile trovarla!</p>
-
-<h2>Seconda sottosezione</h2>
-
-<p>Questa è la seconda sottosezione del mio documento.</p>
- -

Abbiamo preparato un'altra versione più lunga che puoi provare a navigare con un lettore di schermo (vedi: buone-semantiche.html). Se provi a leggere tale pagina, ti renderai conto che è facile da navigare:

- -
    -
  1. Il lettore di schermo legge ogni etichetta man mano che avanza nella lettura del contenuto, facendoti sapere quale è un heading, quale un paragrafo ecc.
    2. -
  2. Il lettore si ferma dopo ogni elemento, permettendoti di procedere al ritmo di lettura che ti è più comodo.
    3. -
  3. Nella maggior parte dei lettori di schermo, puoi saltare al precedente o seguente heading.
    4. -
  4. Molti lettori di schermo inoltre ti forniscono una lista di tutti gli heading presenti, permettendoti di avere un utile indice per trovare contenuti specifici. 
    5. -
- -

A volte si scrivono headings e paragrafi usando HTML non semantico e salti di linea, come nel caso seguente:

- -
<font size="7">Titolo</font>
-<br><br>
-Questa è la prima sezione del mio documento.
-<br><br>
-Ecco qui un altro paragrafo.
-<br><br>
-1. Questa è
-<br><br>
-2. una lista
-<br><br>
-3. composta da
-<br><br>
-4. vari elementi
-<br><br>
-<font size="5">Sottosezione</font>
-<br><br>
-Questa è la prima sottosezione del mio documento. Dovrebbe essere facile trovarla!
-<br><br>
-<font size="5">Seconda sottosezione</font>
-<br><br>
-Questa è la seconda sottosezione del mio documento.
- -

Se provi a leggere questa versione con un lettore di schermo (vedi cattive-semantiche.html), l’esperienza non ti risulterà positiva. Il lettore di schermo non avrà riferimenti che lo guidino, e non potrà fornirti un sommario dei contenuti. L'intera pagina gli apparirà come un blocco unico, e la leggerà tutta in una volta.

- -

Ci sono inoltre altri problemi che vanno al di là dell'accessibilità: per esempio è difficile applicare stile al contenuto usando CSS, o manipolarlo con JavaScript, perchè non ci sono elementi da usare come selettori.

- -

Usare un linguaggio chiaro

- -

Anche il linguaggio che usi può avere un effetto sull'accessibilità. In generale dovresti usare un linguaggio chiaro e non troppo complesso, privo di termini gergali o eccessivamente tecnici. Ciò non è d'aiuto solo alle persone con disabilità cognitive o di altro tipo; è anche utile ad utenti per i quali il testo è scritto in una lingua che non conoscono bene, a utenti di età molto giovane... Di fatto, è utile a tutti! A parte ciò, dovresti anche fare attenzione a non usare termini e caratteri che risultino poco chiari se letti con un lettore di schermo. Per esempio:

- - - -

Layout di pagina

- -

Molto tempo fa, era pratica abituale creare layout di pagina con tabelle HTML, usando le celle di una tabella per contenere header, footer, barra laterale, la colonna del contenuto principale ecc. Questa non è una buona pratica, visto che un lettore di schermo molto probabilmente darà una lettura confusa delle celle, soprattutto se il layout è complesso e presenta sottotabelle secondarie.

- -

Prova questo esempio: layout-tabella.html, che corrisponde al seguente codice:

- -
<table width="1200">
-      <!-- fila del titolo della tabella -->
-      <tr id="titolo">
-        <td colspan="6">
-
-          <h1 align="center">Header</h1>
-
-        </td>
-      </tr>
-      <!-- fila del  menu di navigazione  -->
-      <tr id="nav" bgcolor="#ffffff">
-        <td width="200">
-          <a href="#" align="center">Home</a>
-        </td>
-        <td width="200">
-          <a href="#" align="center">Our team</a>
-        </td>
-        <td width="200">
-          <a href="#" align="center">Projects</a>
-        </td>
-        <td width="200">
-          <a href="#" align="center">Contact</a>
-        </td>
-        <td width="300">
-          <form width="300">
-            <input type="search" name="q" placeholder="Search query" width="300">
-          </form>
-        </td>
-        <td width="100">
-          <button width="100">Go!</button>
-        </td>
-      </tr>
-      <!-- spacer row -->
-      <tr id="spacer" height="10">
-        <td>
-
-        </td>
-      </tr>
-      <!-- fila del contenuto principale e sezione laterale -->
-      <tr id="main">
-        <td id="content" colspan="4" bgcolor="#ffffff">
-
-          <!-- contenuto principale -->
-        </td>
-        <td id="aside" colspan="2" bgcolor="#ff80ff" valign="top">
-          <h2>Related</h2>
-
-          <!-- sezione laterale -->
-
-        </td>
-      </tr>
-      <!-- spacer row -->
-      <tr id="spacer" height="10">
-        <td>
-
-        </td>
-      </tr>
-      <!-- fila del footer -->
-      <tr id="footer" bgcolor="#ffffff">
-        <td colspan="6">
-          <p>©Copyright 2050 by nobody. All rights reversed.</p>
-        </td>
-      </tr>
-    </table>
- -

 

- -

Se provi a navigare la pagina con un lettore di schermo, probabilmente ti dirà che c'è una tabella (anche se alcuni lettori di schermo riescono a differenziare i layout a tabella dalle tabelle di dati). Poi dovrai (a seconda del lettore di schermo che stai usando) esplorare la tabella cella per cella, e infine uscirne per poter navigare il contenuto.

- -

I layout a tabella son una reliquia del passato, avevano senso in un'epoca in cui non tutti i browser supportavano CSS, ma creano confusione per gli utenti che usano lettori di schermo, e inoltre sono una cattiva pratica per molte altre ragioni (per esempio richiedono una quantità maggiore di codice e rendono il disegno meno flessibile). Non usarli!

- -

Puoi verificare queste affermazioni comparando le tue esperienze precedenti con un esempio di struttura più moderna del sito, che corrisponde al seguente codice:

- -
<header>
-  <h1>Header</h1>
-</header>
-
-<nav>
-  <!-- navigazione principale -->
-</nav>
-
-<!-- contenuto principale -->
-<main>
-
-  <!-- articolo -->
-  <article>
-    <h2>Article heading</h2>
-
-    <!-- contenuto dell'articolo -->
-  </article>
-
-  <aside>
-    <h2>Related</h2>
-
-    <!-- contenuto della sezione laterale -->
-  </aside>
-
-</main>
-
-<!-- footer, usato in tutte le pagine del sito -->
-
-<footer>
-  <!-- contenuto del footer -->
-</footer>
- -

Se provi questa nuova versione del sito con un lettore di schermo, vedrai che il layout del codice non è più un ostacolo alla lettura del contenuto. Inoltre puoi notare come sia molto più agile e leggero in termini di quantità di codice, cosa che implica una maggior facilità di gestione e mantenimento, e minor utilizzo di banda da parte dell'utente (molto utile per chi ha una connessione lenta).

- -

Un'altro aspetto da tenere presente quando si creano layout è quello di usare HTML5 semantico, come visto nell'esempio precedente (vedi il compendio in inglese sezioni del contenuto). Potresti creare un layout usando solo elementi annidati {{htmlelement("div")}}, ma è molto meglio usare elementi specifici appropriati per distinguere le varie sezioni della pagina, come la sezione con gli elementi di navigazione ({{htmlelement("nav")}}), il footer ({{htmlelement("footer")}}), unità di contenuto che si ripetono ({{htmlelement("article")}}), ecc. Questi elementi forniscono un ulteriore contenuto semantico per i lettori di schermo (e per altri strumenti) per dare agli utenti indicazioni extra riguardo il contenuto che stanno navigando (vedi l'articolo in inglese Supporto dei nuovi elementi HTML5 di sezione nei lettori di schermo per farti un'idea dello stato del supporto nei lettori di schermo).

- -
-

Nota: oltre ad una buona semantica ed un layout esteticamente apprezzabile, il tuo contenuto dovrebbe essere organizzato in un ordine logico. Puoi sempre muoverlo in seguito utilizzando CSS, ma il codice sorgente dovrebbe essere nel giusto ordine, di modo che gli utenti che usano lettori di schermo lo possano interpretare correttamente. 

-
- -

Controlli di Interfaccia Utente

- -

Con il termine “controlli IU” intendiamo i componenti di un sito con cui gli utenti interagiscono. I più comuni sono bottoni, link e formulari. In questa sezione analizzeremo gli aspetti basici da tenere in considerazione quando si creano tali elementi. Più avanti gli articoli su WAI-ARIA e multimedia prenderanno in considerazione altri aspetti dell'accessibilità IU.

- -

Un aspetto chiave dell'accessibilità dei controlli IU è che di default i browser permettono di interagire con essi tramite tastiera. Puoi fare una prova usando il nostro esempio accessibilità-tastiera-nativa.html (vedi il codice sorgente): apri la pagina in una nuova scheda e prova a premere il bottone TAB; dopo averlo premuto qualche volta, dovresti vedere il focus muoversi da un elemento all'altro della pagina. Gli elementi con focus hanno un sistema di evidenziazione per rendere chiaro quale elemento è selezionato al momento. Questo sistema varia leggermente da browser a browser.

- -

- -

Dopo averlo selezionato tramite TAB, puoi usare il tasto INVIO per premere un bottone (nell'esempio i bottoni quando premuti producono un messaggio di avviso); allo stesso modo, premendo INVIO puoi aprire un link che hai selezionato. Inoltre, dopo averlo selezionato con il tasto TAB, puoi scrivere in un campo del formulario, o selezionare un elemento dal menu a tendina usando i tasti freccia della tastiera.

- -
-

Nota: i vari browser possono presentare differenti opzioni di controllo da tastiera. Vedi l'articolo in inglese Accessibilità con la tastiera per maggiori dettagli.

-
- -

In ogni caso tutti  i browser sono già preconfigurati per la navigazione con tastiera, l'unica cosa di cui devi preoccuparti è usare gli elementi HTML correttamente. Per esempio:

- -
<h1>Links</h1>
-
-<p>Questo è un link a <a href="https://www.mozilla.org">Mozilla</a>.</p>
-
-<p>Un altro link, a <a href="https://developer.mozilla.org">Mozilla Developer Network</a>.</p>
-
-<h2>Bottoni</h2>
-
-<p>
-  <button data-message="Questo messaggio viene dal primo bottone">Cliccami!</button>
-  <button data-message="Questo messaggio viene dal secondo bottone">Clicca anche me!</button>
-  <button data-message="Questo messaggio viene dal terzo bottone">E me!</button>
-</p>
-
-<h2>Formulario</h2>
-
-<form>
-  <div>
-    <label for="name">Inserisci il tuo nome:</label>
-    <input type="text" id="name" name="name">
-  </div>
-  <div>
-    <label for="age">Inserisci la tua età:</label>
-    <input type="text" id="age" name="age">
-  </div>
-  <div>
-    <label for="mood">Come ti senti?</label>
-    <select id="mood" name="mood">
-      <option>Felice</option>
-      <option>Triste</option>
-      <option>Arrabbiato</option>
-      <option>Preoccupato</option>
-    </select>
-  </div>
-</form>
- -

Questo significa usare link, bottoni, elementi del formulario ed etichette appropriatamente (includendo l'elemento {{htmlelement("label")}} nei campi del formulario).

- -

Purtroppo a volte queste buone pratiche non sono rispettate. Ad esempio, a volte si trovano bottoni codificati usando elementi {{htmlelement("div")}}:

- -
<div data-message="Questo messaggio viene dal primo bottone">Cliccami!</div>
-<div data-message="Questo messaggio viene dal secondo bottone">Clicca anche me!</div>
-<div data-message="Questo messaggio viene dal terzo bottone">E me!</div>
- -

Questo modo di scrivere codice è altamente sconsigliato: non solo perdi l'accessibilità da tastiera che avresti avuto automaticamente usando l'etichetta {{htmlelement("button")}}, ma perdi anche gli stili CSS di default che l'etichetta {{htmlelement("button")}} contiene.

- -

Implementare l'accessibilità da tastiera in un secondo tempo

- -

Risolvere problemi di accessibilità da tastiera in un sito già ultimato può richiedere un certo sforzo (per un esempio vedi la pagina   falsi-bottoni-usando-div.html e il suo  codice sorgente). In questo esempio abbiamo dato ad alcuni bottoni, erroneamente creati con una etichetta <div>, la possibilità di ricevere focus tramite tasto TAB fornendo a ognuno l'attributo tabindex="0":

- -
<div data-message="Questo messaggio viene dal primo bottone" tabindex="0">Cliccami!</div>
-<div data-message="Questo messaggio viene dal secondo bottone" tabindex="0">Clicca anche me!</div>
-<div data-message="Questo messaggio viene dal terzo bottone" tabindex="0">E me!</div>
- -

L'attributo {{htmlattrxref("tabindex")}} è stato creato per dare agli elementi selezionabili tramite tasto TAB un ordine di focus personalizzato (specificato con numeri positivi in ordine crescente), differente dall'ordine standard con cui sono presenti nel codice sorgente. In generale questa non è una buona pratica, e può causare confusione nell'utente. Questo attributo sarebbe da usare solo in casi particolari, per esempio se il layout mostra gli elementi in una forma molto diversa dal codice sorgente. Ma ci sono altri due possibili usi di tabindex che sono utili per l'accessibilità:

- - - -

L'uso di tabindex rende i bottoni creati erroneamente usando <div> selezionabili tramite tasto TAB, ma non ci permette di cliccarli usando INVIO. Per renderli cliccabili, dobbiamo ricorrere a Javascript:  

- -
document.onkeydown = function(e) {
-  if(e.keyCode === 13) { // Il tasto ENTER
-    document.activeElement.onclick(e);
-  }
-};
- -

Spiegazione del codice: abbiamo aggiunto un listener al documento, di modo che il codice rileva ogni occasione in cui un tasto della tastiera viene premuto. Tramite la proprietà KeyCode il codice individua quale tasto è stato premuto. Se il tasto premuto è INVIO, la funzione associata tramite onclick al bottone attualmente selezionato viene eseguita. La linea document.activeElement.onclick() serve proprio a rilevare l'elemento che attualmente sta ricevendo focus nella pagina, in questo caso il bottone che abbiamo selezionato tramite tasto TAB. 

- -
-

Nota: Tieni presente che questa tecnica funzionerà solo se usi onclick. Usare addEventListener non funzionerà.

-
- -

Come vedi, implementare l'uso della tastiera in un secondo momento non è un lavoro semplice né veloce, e inoltre può causare malfunzionamenti del sito. È molto meglio utilizzare l'elemento più appropriato per ogni funzionalità del sito sin dal principio.

- -

Usare testi con significato

- -

Una interfaccia utente che presenta une nomenclatura chiara ed esplicativa è utile a tutti, ma avere testi ed etichette curati nei dettagli è particolarmente importante per gli utenti che hanno una disabilità.

- -

Assicurati che i tuoi bottoni e i tuoi link presentino testi facilmente comprensibili e che distinguano bene un elemento dall'altro. Non usare frasi come "Clicca qui", perchè gli utenti che usano lettori di schermo possono avere difficoltà a distinguere la funzione o destinazione del bottone o link, soprattutto se ce ne sono molti nella pagina. La seguente immagine mostra alcuni campi di un formulario così come sono letti da VoiceOver.

- -

- -

Assicurati che i nomi che assegni agli elementi abbiano senso anche se letti fuori dal loro contesto, allo stesso modo in cui hanno senso nel contesto del paragrafo in cui sono contenuti. Il seguente esempio mostra un esempio di costruzione corretta del testo di un link:

- -
<p>Le balene sono creature davvero straordinarie. <a href="balene.html">Scopri di più sulle balene</a>.</p>
- -

Mentre questo è un esempio di cattivo uso:

- -
<p>Le balene sono creature davvero straordinarie. Per saperne di più sulle balene, <a href="balene.html">clicca qui</a>.</p>
- -
-

Nota: Puoi saperne di più sulle migliori pratiche di implementazione di link nel nostro articolo (in inglese) Creazione di link. Puoi inoltre vedere esempi di buona costruzione di link nella pagina buoni-link.html ed esempi di link mal costruiti nella pagina cattivi-link.html.

-
- -

Un altro elemento importante sono le etichette <label> dei formulari, che forniscono una indicazione su cosa l'utente deve inserire nel campo del formulario. Il seguente esempio può sembrare una maniera corretta di implementare un campo di formulario:

- -
Scrivi il tuo nome: <input type="text" id="nome" name="nome">
- -

Tuttavia, questo campo non sarebbe utile a utenti con disabilità visiva. Non c'è nessuna indicazione non visuale che associ chiaramente il campo di input con il testo "Scrivi il tuo nome:". Se navighi questo elemento con un lettore di schermo, potresti ricevere una descrizione generica tipo "scrivi testo qui".

- -

Il seguente è un esempio molto migliore:

- -
<div>
-  <label for="nome">Scrivi il tuo nome:</label>
-  <input type="text" id="nome" name="nome">
-</div>
- -

Con questo codice, il testo sarà chiaramente associato al campo di input; il lettore di schermo pronuncerà una frase come: "Scrivi il tuo nome: scrivi testo qui". 

- -

Inoltre, nella maggior parte dei browser associare un testo a un campo di input tramite etichetta <label> permette di selezionare/attivare il campo input cliccando anche sul testo oltre che sul campo stesso. Ciò rende molto più facile selezionare il campo in cui scrivere.

- -
-

Nota: Puoi vedere esempi di formulari ben costruiti nella pagina esempi-di-buoni-form.html ed esempi di formulari poco accessibili nella pagina esempi-di-cattivi-form.html.

-
- -

Tabelle dati accessibili

- -

Una tabella dati basica si può scrivere in modo molto semplice, come per esempio:

- -
<table>
-  <tr>
-    <td>Nome</td>
-    <td>Età</td>
-    <td>Genere</td>
-  </tr>
-  <tr>
-    <td>Gabriel</td>
-    <td>13</td>
-    <td>Maschio</td>
-  </tr>
-  <tr>
-    <td>Elva</td>
-    <td>8</td>
-    <td>Femmina</td>
-  </tr>
-  <tr>
-    <td>Freida</td>
-    <td>5</td>
-    <td>Femmina</td>
-  </tr>
-</table>
- -

Ma questo codice può causare problemi: non dà agli utenti che usano lettori di schermo la possibilità di associare file e colonne in gruppi di dati relazionati tra loro. Per rendere ciò possibile devi sapere quali elementi della tabella sono header di file o colonne. Nel caso della tabella qui sopra ciò è possibile solo visualizzandola (vedi tabella-incorretta.html).

- -

Ora invece considera l'esempio tabella gruppi punk. Puoi notare alcune aggiunte nel codice che migliorano l'accessibilità:

- - - -
-

Nota: vedi l'articolo in inglese Caratteristiche avanzate delle tabelle HTML e accessibilità per maggiori dettagli sull'accessibilità delle tabelle dati.

-
- -

Alternative testuali

- -

Mentre il contenuto testuale è per sua natura accessibile, non si può dire lo stesso per il contenuto multimediale: immagini e video non possono essere visualizzati da persone con disabilità visiva grave, e il contenuto audio è difficile o impossibile da ascoltare per persone con disabilità auditiva. Ci occuperemo dell’accessibilità del contenuto audio e video in un altro articolo, in questa sezione tratteremo il tema dell'accessibilità per gli elementi {{htmlelement("img")}}.

- -

Proponiamo qui un semplice esempio, immagine-accessibile.html, nel quale possiamo vedere 4 copie della stessa immagine.

- -

Riportiamo qui sotto il relativo codice HTML tradotto all'italiano (nella pagina del link sarà in inglese):

- -
<img src="dinosauro.png">
-
-<img src="dinosauro.png"
-     alt="Un Tirannosauro Rex: un dinosauro bipede che sta in piedi come un umano, con braccia piccole e una grande testa con denti aguzzi.">
-
-<img src="dinosauro.png"
-     alt="Un Tirannosauro Rex: un dinosauro bipede che sta in piedi come un umano, con braccia piccole e una grande testa con denti aguzzi."
-     title="Il dinosauro rosso di Mozilla">
-
-
-<img src="dinosauro.png" aria-labelledby="dino-label">
-
-<p id="dino-label">Il Tirannosauro Rex rosso di Mozilla: un dinosauro bipede che sta in piedi come un umano, con braccia piccole e una grande testa con denti aguzzi.</p>
-
- -

La prima immagine, se si usa un lettore di schermo, non è molto accessibile. Per esempio VoiceOver leggerebbe il nome del file come "dinosauro.png, immagine". L'utente saprebbe almeno che nell'immagine è rappresentato un dinosauro di qualche tipo. Ma spesso le immagini che si trovano su internet non hanno neanche un titolo minimamente descrittivo come “dinosauro.png”, e usano invece come titoli codici alfanumerici o nomi generati automaticamente (per esempio da una macchina fotografica), che non forniscono alcun tipo di contesto riguardo al contenuto dell'immagine.

- -
-

Nota: non dovresti mai includere contenuto testuale in una immagine. I lettori di schermo non lo possono leggere. Ci sono inoltre altri svantaggi, per esempio non è possibile selezionarlo e copiarlo. Non farlo! 

-
- -

Nel caso della seconda immagine, un lettore di schermo leggerà tutto l'attributo alt: "Un Tirannosauro Rex: un dinosauro bipede che sta in piedi come un umano, con braccia piccole e una grande testa con denti aguzzi.".

- -

Dunque è importante fornire alle immagini nomi descrittivi, e anche assicurarsi di fornire testo alternativo ogni volta che è possibile. Fai attenzione a fornire nell'attributo alt un testo che sia una rappresentazione il più possible diretta del contenuto dell'immagine. Evita di includere informazioni extra che non riguardano direttamente l'immagine.

- -

Un altro aspetto da considerare è se un'immagine ha un significato importante nel contesto del contenuto in cui si trova, o se si tratta solo di un'immagine decorativa. Se un’immagine è solo decorativa, è meglio includerla nella pagina con la proprietà background-image di CSS piuttosto che con l’etichetta <img>.

- -
-

Nota: Leggi Immagini in HTML e Immagini reattive per saperne di più sulle pratiche ottimali per l'implementazione delle immagini.

-
- -

Se desideri fornire informazioni contestuali extra, dovresti includerle nel testo vicino all'immagine, o usare un attributo title, come mostrato nel codice della terza immagine. La maggior parte dei lettori di schermo leggerà il testo alternativo, il testo dell'attributo title, e il nome del file. Inoltre, i browser mostrano il testo contenuto in title quando un utente passa sopra l'immagine con il puntatore del mouse.

- -

- -

Diamo ora un'occhiata al codice della quarta immagine:

- -
<img src="dinosauro.png" aria-labelledby="dino-label"> <p id="dino-label">Il Tirannosauro...</p>
- -

In questo caso non stiamo usando l'attributo alt. Invece, abbiamo presentato la descrizione dell'immagine come un normale paragrafo, le abbiamo assegnato un id, e poi abbiamo usato l'attributo aria-labelledby  associandolo all'id. In questo modo i lettori di schermo useranno il paragrafo come testo alternativo per l'immagine. Questo metodo è utile nel caso in cui si voglia usare lo stesso testo alternativo per multiple immagini, procedimento che è sconsigliabile implementare usando l’attributo alt

- -
-

Nota: aria-labelledby è parte della specificazione WAI-ARIA, che permette agli sviluppatori di aggiungere valore semantico extra al loro codice e migliorare l'accessiblità per i lettori di schermo. Per saperne di più su come funziona, leggi l'articolo basi di WAI-ARIA.

-
- -

Altri metodi di testo alternativo

- -

Ci sono anche altri metodi per associare alle immagini un testo che le descriva. Per esempio, c'è un attributo chiamato longdesc che permette di richiamare descrizioni dettagliate delle immagini presenti in una pagina da un documento HTML esterno. Per esempio:

- -
<img src="dinosauro.png" longdesc="dino-info.html">
- -

Questa può sembrare una soluzione ottimale, soprattutto per immagini con grandi contenuti informativi come grafici che rappresentano statistiche o risultati. Ma purtroppo l'attributo longdesc non è supportato con consistenza dai lettori di schermo, e inoltre il suo contenuto è totalmente inaccessibile agli utenti che non usano lettori di schermo. Si raccomanda dunque di includere la descrizione testuale nella stessa pagina in cui si trova l'immagine, o rimandare alla descrizione con un link standard.

- -

In HTML5 sono inclusi inoltre altri due elementi, {{htmlelement("figure")}} e {{htmlelement("figcaption")}}, che servono ad associare un elemento figurativo (non necessariamente un'immagine) ad una didascalia: 

- -
<figure>
-  <img src="dinosauro.png" alt="Il Tirannosauro di Mozilla">
-  <figcaption>Un Tirannosauro Rex: un dinosauro bipede che sta in piedi come un umano, con braccia piccole e una grande testa con denti aguzzi.</figcaption>
-</figure>
- -

Purtroppo anche in questo caso la maggior parte dei lettori di schermo non è ancora in grado di interpretare correttamente gli elementi {{htmlelement("figure")}} e {{htmlelement("figcaption")}}, ma l'uso di questi elementi può essere comunque utile per effettuare modifiche allo stile tramite CSS; inoltre questi elementi danno la possibilità di collocare la descrizione di una immagine nello stesso punto in cui l'immagine è inserita nel codice.

- -

Attributi alt vuoti

- -
<h3>
-  <img src="icona-articolo.png" alt="">
-  Tirannosauro Rex: il re dei dinosauti
-</h3>
- -

In alcuni casi un'immagine viene inclusa in una pagina con uno scopo puramente decorativo. Come puoi notare nel codice qui sopra, l'attributo alt dell'immagine è lasciato vuoto. Questo procedimento permette ai lettori di schermo di riconoscere la presenza di un'immagine, evitando però di fornirne una descrizione (pronuncerebbero solo una frase come "immagine").

- -

La ragione per cui è buona pratica usare un attributo alt vuoto invece di non includerlo del tutto è perchè molti lettori di schermo, nel caso in cui non incontrino nessun attributo alt associato a un'immagine, leggono al suo posto l'URL dell'immagine. Nell'esempio qui sopra, l'immagine ha una funzione decorativa dell'heading a cui è associata. In casi come questo, e in tutti i casi in cui un'immagine ha una funzione puramente decorativa e nessun valore di contenuto, dovresti associarle un attributo alt vuoto (alt=""). Un'alternativa è usare l'attributo ARIA role (con forma: role="presentation"), che indica ai lettori di schermo di non leggere il testo alternativo.

- -
-

Nota: se possibile è meglio usare CSS per mostrare immagini con funzione puramente decorativa.

-
- -

Riassunto

- -

Dopo aver letto questo articolo dovresti avere un’idea piuttosto chiara di come scrivere HTML accessibile nella maggior parte delle situazioni. Il nostro articolo su WAI-ARIA ti darà informazioni più approfondite, ma con quanto hai già letto e imparato sei in possesso di una buona base. Nei prossimi articoli esploreremo CSS e JavaScript, e come l'accessibilità è influenzata dal loro corretto o incorretto utilizzo.

- -

{{PreviousMenuNext("Learn/Accessibilità/Cosa_è_accessibilità","Learn/Accessibilità/CSS_e_JavaScript_accessibilità", "Learn/Accessibilità")}}

diff --git "a/files/it/learn/accessibilit\303\240/index.html" "b/files/it/learn/accessibilit\303\240/index.html" deleted file mode 100644 index 57dee47809..0000000000 --- "a/files/it/learn/accessibilit\303\240/index.html" +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: Accessibilità -slug: Learn/Accessibilità -tags: - - ARIA - - Accessibilità - - Articoli - - CSS - - Guida accessibilità - - HTML - - Imparare accessibilità - - JavaScript - - Lezioni accessibilità - - Manuale accessibiltà - - Moduli - - Principiante - - Sviluppo Web - - imparare -translation_of: Learn/Accessibility ---- -
{{LearnSidebar}}
- -

Imparare HTML, CSS e Javascript è fondamentale se vuoi diventare uno sviluppatore web, ma la tua preparazione deve andare al di là del semplice utilizzo delle tecnologie di programmazione web: devi imparare ad utilizzarle in modo responsabile, in maniera tale da massimizzare il numero di utenti che possano usufruire pienamente dei tuoi siti, senza lasciare nessuno chiuso fuori. Per ottenere questi risultati devi seguire con attenzione alcune linee guida (che sono indicate nelle sezioni HTML, CSS, e JavaScript), praticare test su differenti browser e prendere in considerazione l'accessibilità sin dal principio dei tuoi progetti di sviluppo web. In questo modulo ci occuperemo in dettaglio di quest'ultimo aspetto.

- -

Prerequisiti

- -

Per ottenere il massimo da questo modulo, è consigliabile aver seguito almeno i primi due moduli delle sezioni HTML, CSS, e JavaScript, oppure, ancor meglio, seguire le varie parti del modulo sull'accessibilità mentre studi (o rivedi) le relative sezioni di HTML, CSS, e JavaScript.  

- -
-

Nota: Se stai usando un computer, tablet o altro dispositivo sul quale non hai la possibilità di creare files, puoi testare la maggior parte degli esempi di codice che troverai in questo modulo usando un programma online come JSBin o Thimble.

-
- -

Guide

- -
-
Cos'è l'accessibilità?
-
Questo articolo inaugura il modulo con una visione generale di cosa è realmente l'accessibilità. Sono inclusi argomenti come: quali gruppi di persone dobbiamo tenere in considerazione e perché, quali strumenti di supporto le persone usano per interagire con la rete, e come possiamo rendere l'accessibilità parte integrante del nostro processo di sviluppo web.
-
HTML: una buona base per l'accessibilità
-
Buona parte del contenuto di un sito può essere reso accessibile semplicemente facendo attenzione ad usare sempre nella maniera corretta gli elementi HTML più opportuni per le funzionalità che si vogliono implementare. Questo articolo analizza in dettaglio come il linguaggio HTML può essere usato al meglio per garantire la massima accessibilità.
-
Linee guida di accessibiltà per CSS e JavaScript
-
CSS e JavaScript, quando utilizzati propriamente, possono contribuire ad offrire una esperienza accessibile della rete. Se invece vengono utilizzati in maniera incorretta possono causare una drastica riduzione dell'accessibilità. Questo articolo riporta alcune linee guida per l'utilizzo di CSS e JavaScript che devono essere tenute in considerazione per permettere a contenuti anche molto complessi di avere il più alto grado di accessibilità possibile.
-
Basi della tecnologia WAI-ARIA
-
Proseguendo i temi trattati nell'articolo precedente, può risultare complicato creare elementi di interfaccia utente accessibili quando gli stessi si basano su HTML non semantico e presentano contenuto aggiornato dinamicamente tramite JavaScript. La tecnologia WAI-ARIA può essere d'aiuto aggiungendo valore semantico addizionale, che i browser e le tecnologie assistive possono riconoscere e utilizzare per permettere agli utenti di decifrare più chiaramente il contesto e ciò che sta accadendo durante la navigazione del sito. In questo articolo vedremo come usare questa tecnologia a un livello basico per migliorare l'accessibilità.
-
Accessibilità multimediale
-
-
-

Un'altra categoria di contenuti che possono dare problemi di accessibilità sono gli elementi multimediali: audio, video e immagini devono sempre essere associati ad adeguate alternative testuali, di modo che possano essere interpretati correttamente dalle tecnologie assistive e dagli utenti che ne fanno uso. Questo articolo spiega come gestire l'accessibilità di questo tipo di contenuti.

-
-
-
Accessibilità per dispositivi mobili
-
L'uso di internet su dispositivi mobili è sempre più diffuso, e le principali piattaforme come iOS e Android sono dotate di numerosi strumenti per garantire l'accessibilità. È dunque importante prendere in considerazione l'accessibilità del tuo contenuto web su tali piattaforme. Questo articolo propone considerazioni sull'accessibilità specificamente pensate per dispositivi mobili.
-
- -

Test di valutazione

- -
-
Risoluzione di problemi di accessibilità 
-
Nella sezione di valutazione di questo modulo ti proponiamo un semplice sito web che presenta alcuni problemi di accessibilità che devi individuare e risolvere.
-
- -

Vedi anche

- - diff --git "a/files/it/learn/accessibilit\303\240/multimedia/index.html" "b/files/it/learn/accessibilit\303\240/multimedia/index.html" deleted file mode 100644 index f920e59050..0000000000 --- "a/files/it/learn/accessibilit\303\240/multimedia/index.html" +++ /dev/null @@ -1,392 +0,0 @@ ---- -title: Accessibilità multimediale -slug: Learn/Accessibilità/Multimedia -tags: - - Accessibilità - - Articolo - - Audio - - Didascalie - - HTML - - Immagine - - JavaScript - - Multimedia - - Principiante - - Sottotitoli - - Tracce testuali - - Video -translation_of: Learn/Accessibility/Multimedia ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Accessibilità/WAI-ARIA_basics","Learn/Accessibilità/Mobile", "Learn/Accessibilità")}}
- -

Un’altra categoria di contenuti che possono dare problemi di accessibilità sono gli elementi multimediali: audio, video e immagini devono sempre essere associati ad adeguate alternative testuali, di modo che possano essere interpretati correttamente dalle tecnologie assistive e dagli utenti che ne fanno uso. Questo articolo spiega come gestire l’accessibilità di questo tipo di contenuti.

- - - - - - - - - - - - -
Prerequisiti:Conoscimenti basici sull'uso del computer, livello basico di HTML, CSS e JavaScript, e una idea chiara di cosa è l'accessibilità.
Obiettivo:Comprendere i problemi di accessibilità relativi agli elementi multimediali, e come risolverli.
- -

Multimedia e accessibilità

- -

Fino ad ora in questo modulo sull’accessibilità abbiamo preso in considerazione le procedure necessarie per rendere accessibili una varietà di contenuti: da semplice contenuto testuale a tabelle di dati, immagini, controlli nativi come campi di formulari e bottoni, e anche strutture e intefacce più complesse (con le quali si usano gli attributi WAI-ARIA).

- -

Questo articolo si occupa di un’altra classe di contenuti per i quali solitamente non è facile garantire una buona accessibilità: i contenuti multimediali. Immagini, video, elementi <canvas>, filmati Flash ecc. non sono facili da interpretare per i lettori di schermo, né da navigare tramite tastiera.

- -

Ma non ti preoccupare, in questo articolo ti mostreremo le tecniche disponibili per rendere il contenuto multimediale accessibile.

- -

Immagini

- -

Abbiamo già discusso delle alternative testuali per le immagini in HTML nell’articolo HTML: una buona base per l’accessibilità: fai riferimento all’articolo per maggiori dettagli. Riassumendo in poche parole l’articolo, per garantire l’accessibilità delle immagini devi assicurarti che al contenuto visuale sia associato un testo alternativo che descriva dettagliatamente l’immagine, e che tale contenuto possa essere letto dai lettori di schermo.

- -

Per esempio:

- -
<img src="dinosaur.png"
-     alt="Un Tirannosauro Rex: un dinosauro bipede che sta in piedi come un umano, con braccia piccole e una grande testa con denti aguzzi.">
-
- -

Controlli audio e video accessibili

- -

Implementare controlli di riproduzione per elementi audio e video non dovrebbe essere un problema no? Diamo un’occhiata.

- -

Il problema con i controlli nativi in HTML5

- -

Gli elementi audio e video di HTML5 hanno un set di controlli nativi che permettono di gestire la riproduzione dei contenuti multimediali. Per esempio (vedi native-controls.html, codice sorgente e versione live):

- -
<audio controls>
-  <source src="viper.mp3" type="audio/mp3">
-  <source src="viper.ogg" type="audio/ogg">
-  <p>Il tuo browser non supporta l’audio in HTML5. Puoi scaricare il file per ascoltarlo. Qui trovi il <a href="viper.mp3">link al file audio.</p>
-</audio>
-
-<br>
-
-<video controls>
-  <source src="rabbit320.mp4" type="video/mp4">
-  <source src="rabbit320.webm" type="video/webm">
-  <p>Il tuo browser non supporta i video in HTML5. Puoi scaricare il file per visualizzarlo. Qui trovi il <a href="rabbit320.mp4"> link al file video.</p>
-</video>
- -

L’attributo controls fornisce il bottone play/pausa, uno slider di posizionamento e altri controlli basici di un lettore multimediale generico. In Firefox e Chrome i controlli HTML5 hanno questo aspetto:

- -

Screenshot of Video Controls in Firefox

- -

Screenshot of Video Controls in Chrome

- -

Tuttavia, ci sono alcuni problemi associati a questi controlli:

- - - -

Per porre rimedio a queste limitazioni, possiamo creare i nostri propri controlli personalizzati. Vediamo come fare.

- -

Creare controlli audio e video personalizzati

- -

Gli elementi audio e video di HTML5 hanno in comune una API, chiamata HTML Media Element, che permette di applicare funzionalità personalizzate ai bottoni e ad altri controlli definiti dallo sviluppatore.

- -

Aggiungiamo ora controlli personalizzati al video di esempio qui sopra.

- -

Setup basico

- -

 

- -

Per prima cosa, salva una copia dei file controlli-custom-start.html, controlli-custom-controls.css, rabbit320.mp4 e rabbit320.webm in una cartella del tuo hard-disk.

- -

Crea un nuovo file chiamato main.js e salvalo nella stessa cartella.

- -

Ora diamo un’occhiata al codice HTML del lettore video:

- -
<section class="player">
-  <video controls>
-    <source src="rabbit320.mp4" type="video/mp4">
-    <source src="rabbit320.webm" type="video/webm">
-    <p>Il tuo browser non supporta i video in HTML5. Puoi scaricare il file per visualizzarlo. Qui trovi il <a href="rabbit320.mp4"> link al file video.</p>
-  </video>
-
-  <div class="controls">
-    <button class="playpause">Play</button>
-    <button class="stop">Stop</button>
-    <button class="rwd">Rwd</button>
-    <button class="fwd">Fwd</button>
-    <div class="time">00:00</div>
-  </div>
-</section>
- -

Setup basico di JavaScript

- -

 

- -

Abbiamo inserito alcuni bottoni nella barra dei controlli posizionata sotto al video. Tali controlli ovviamente non funzionano di default; è necessario usare JavaScript per assegnargli una funzionalità.

- -

Innanzitutto dobbiamo creare variabli di riferimento per ognuno dei controlli. Aggiungi il seguente codice al tuo file JavaScript:

- -

 

- -
var playPauseBtn = document.querySelector('.playpause');
-var stopBtn = document.querySelector('.stop');
-var rwdBtn = document.querySelector('.rwd');
-var fwdBtn = document.querySelector('.fwd');
-var timeLabel = document.querySelector('.time');
- -

In seguito dobbiamo creare una variabile di riferimento al lettore audio/video stesso. Aggiungi questa linea al codice aggiunto in precedenza:

- -
var player = document.querySelector('video');
- -

 

- -

Questa variabile fa riferimento a un oggetto HTMLMediaElement, che contiene numerosi metodi e proprietà che si possono usare per assegnare funzionalità ai nostri bottoni.

- -

Prima di procedere ad assegnare funzionalità ai nostri bottoni rimuoviamo i controlli nativi, di modo che non si possano verificare conflitti con i nostri controlli personalizzati. Aggiungi il seguente codice, al fondo del tuo file JavaScript:

- -

 

- -
player.removeAttribute('controls');
- -

Usando questo metodo, anziché quello di evitare di includere l’attributo controls dal principio, ha il vantaggio che, se il nostro codice JavaScript smettesse di funzionare per una qualsiasi ragione, i controlli nativi si riattiveranno automaticamente, permettendo agli utenti di continuare a usare i contenuti multimediali.

- -

Collegare i nostri bottoni

- -

Come primo passo, attiviamo il bottone Play/pausa. Possiamo alternare gli stati di play e pausa usando una semplice funzione condizionale, come la seguente. Aggiungila al fondo del tuo codice JavaScript:

- -
playPauseBtn.onclick = function() {
-  if(player.paused) {
-    player.play();
-    playPauseBtn.textContent = 'Pause';
-  } else {
-    player.pause();
-    playPauseBtn.textContent = 'Play';
-  }
-};
- -

In seguito, aggiungi questo codice, che controlla il bottone Stop:

- -
stopBtn.onclick = function() {
-  player.pause();
-  player.currentTime = 0;
-  playPauseBtn.textContent = 'Play';
-};
- -

 

- -

Non esiste una funzione stop() nativa negli elementi HTMLMediaElement, dunque al suo posto usiamo pause(), e allo stesso tempo resettiamo a zero il tempo di riproduzione currentTime.

- -

Aggiungiamo ora i bottoni Riavvolgimento e Avanzamento Rapido. Aggiungi i seguenti blocchi di codice in fondo al file:

- -

 

- -
rwdBtn.onclick = function() {
-  player.currentTime -= 3;
-};
-
-fwdBtn.onclick = function() {
-  player.currentTime += 3;
-  if(player.currentTime >= player.duration || player.paused) {
-    player.pause();
-    player.currentTime = 0;
-    playPauseBtn.textContent = 'Play';
-  }
-};
- -

 

- -

Questi bottoni sono controlli molto basici, non fanno altro che far avanzare o tornare indietro il video di 3 secondi ogni volta che vengono cliccati. In una applicazione reale probabilmente vorrai aggiungere uno slider di posizionamento più elaborato o qualcosa di simile.

- -

Nota inoltre che ogni volta che il bottone di Avanzamento Rapido viene cliccato controlliamo se il momento attuale della riproduzione currentTime è maggiore del tempo totale duration, o se la riproduzione è in pausa. Se una delle due condizioni è vera fermiamo la riproduzione del video, per evitare che si verifichino errori nel lettore multimediale se l’utente cerca di avanzare oltre la fine del video o quando il video si trova in stato di pausa.

- -

Come ultimo passo, aggiungi questo codice al fondo del file, per controllare il display del tempo trascorso:

- -
player.ontimeupdate = function() {
-  var minutes = Math.floor(player.currentTime / 60);
-  var seconds = Math.floor(player.currentTime - minutes * 60);
-  var minuteValue;
-  var secondValue;
-
-  if (minutes<10) {
-    minuteValue = "0" + minutes;
-  } else {
-    minuteValue = minutes;
-  }
-
-  if (seconds<10) {
-    secondValue = "0" + seconds;
-  } else {
-    secondValue = seconds;
-  }
-
-  mediaTime = minuteValue + ":" + secondValue;
-  timeLabel.textContent = mediaTime;
-};
- -

Ogni volta che il tempo si aggiorna (ogni secondo), questa funzione viene eseguita. A partire dal valore di currentTime, che si esprime in secondi, la funzione calcola il numero di minuti e secondi trascorsi, aggiunge uno 0 davanti al numero di minuti o secondi se tale numero è inferiore a 10, dà al risultato il formato “minuti:secondi” e infine lo invia al display timeLabel perchè sia mostrato all’utente.

- -

Ulteriori letture

- -

Quanto spiegato finora ti dà un’idea basica di come aggiungere funzionalità personalizzate ai lettori audio/video. Per maggiori informazioni su come aggiungere funzionalità più complesse, incluso come utilizzare Flash come fallback per i browser più vecchi, vedi gli articoli (in inglese):

- - - -

Abbiamo inoltre creato un esempio avanzato che mostra come si può creare un sistema orientato ad oggetti che trova ogni lettore audio o video presente in una pagina e gli aggiunge i nostri controlli personalizzati. Vedi custom-controls-oojs (qui trovi il codice sorgente).

- -

Trascrizioni audio

- -

Per rendere i contenuti audio accessibili alle persone con difficoltà auditive devi ricorrere a trascrizioni testuali. Le trascrizioni possono includersi nella stessa pagina dove l’audio viene riprodotto, o in una pagina separata collegata ad essa con un link.

- -

Dal punto di vista pratico, le opzioni per la creazione delle trascrizioni sono:

- - - -

NON è una buona pratica quella di pubblicare del contenuto audio e promettere di pubblicare le trascrizioni in un secondo momento. Spesso tali promesse non vengono compiute, danneggiando la fiducia che gli utenti ripongono in chi pubblica il contenuto. Nel caso in cui l’audio che si pubblica sia un dialogo o un evento come una conferenza pubblica, è accettabile pubblicare note riassuntive del contenuto insieme all’audio.

- -

Esempi di trascrizioni

- -

Se ricorri a un servizio di trascrizione automatico, probabilmente dovrai usare l’interfaccia utente fornita dal servizio. Per esempio, apri il video Audio Transcription Sample 1 e clicca sui tre puntini delle opzioni aggiuntive. In seguito clicca su Apri trascrizione.

- -

Se stai creando una interfaccia personalizzata per presentare il tuo contenuto audio e le relative trascrizioni, tieni in considerazione l’idea di includere un pannello-trascrizioni che appare/scompare; vedi il nostro esempio audio-transcript-iu  (vedi anche il codice sorgente).

- -

Descrizioni audio

- -

 

- -

Se al contenuto audio è associato anche un contenuto visuale, devi fornire descrizioni audio di tale contenuto visuale.

- -

In molti casi si tratterà di contenuto video, e in tal caso puoi associargli didascalie usando le tecniche descritte nella prossima sezione di questo articolo.

- -

 

- -

Tuttavia ci sono dei casi limite. Per esempio, potresti dover pubblicare una registrazione audio di una conferenza durante la quale si fa riferimento a una risorsa visuale, come una tabella o un grafico. In tali casi, dovresti fare in modo che tali risorse vengano fornite insieme all’audio e alla trascrizione, avendo cura di porre un link alle risorse nel punto della trascrizione in cui si fa riferimento ad esse. Questo procedimento sarà di aiuto a tutti gli utenti, non solo alle persone con difficoltà auditive.

- -
-

Nota: una trascrizione audio sarà utile a vari tipi di utente. Oltre a permettere alle persone con difficoltà auditive di accedere al contenuto audio, sarà molto utile anche agli utenti che navigano con una connessione lenta, che probabilmente preferiscono non scaricare il contenuto audio. Pensa inoltre a un utente che si trova in un ambiente rumoroso, come un pub, e non può udire il contenuto audio correttamente.

-
- -

Tracce testuali nei video

- -

Per rendere i contenuti video accessibili a persone con difficoltà auditive o visive, e anche ad altri gruppi di utenti, come per esempio quelli che non capiscono la lingua che si parla nel video, devi associare al contenuto video una traccia testuale.

- -
-

Nota: le tracce testuali sono utili ad ogni tipo di utente, non solo a chi ha una disabilità. Per esempio, un utente potrebbe non essere in grado di udire l’audio perchè si trova in un ambiente rumoroso, come un bar affollato, o un altro potrebbe decidere di togliere l’audio a un video per non disturbare chi gli sta vicino, se si trova per esempio in una biblioteca.

-
- -

Non si tratta certo di un concetto nuovo, le stazioni televisive usano le tracce testuali già da moltissimo tempo:

- -

Frame from an old-timey cartoon with closed captioning "Good work, Goldie. Keep it up!"

- -

Molti paesi trasmettono i film in inglese con sottotitoli nella lingua del paese, e spesso nei film in DVD si trovano disponibili tracce testuali in varie lingue. Per esempio:

- -

An English film with German subtitles "Emo, warum erkennst du nicht die Schonheit dieses Ortes?"

- -

Esistono diversi tipi di traccia testuale, con differenti scopi. I tipi principali sono:

- - - -

Implementare le tracce testuali in HTML5

- -

Le tracce testuali da mostrarsi associate a un video in HTML5 devono essere scritte in WebVTT, un formato che contiene stringhe di testo associate a metadati come il momento del video in cui si desidera mostrare ogni stringa, e anche informazioni sullo stile e il posizionamento della stringa. Tali stringhe di testo sono chiamate “cues”.

- -

Un file WebVTT tipico è più o meno così:

- -
WEBVTT
-
-1
-00:00:22.230 --> 00:00:24.606
-Questo è il primo sottotitolo.
-
-2
-00:00:30.739 --> 00:00:34.074
-Questo è il secondo.
-
-  ...
- -

To get this displayed along with the HTML media playback, you need to:

- - - -

Un esempio:

- -
<video controls>
-    <source src="example.mp4" type="video/mp4">
-    <source src="example.webm" type="video/webm">
-    <track kind="subtitles" src="subtitles_en.vtt" srclang="en">
-</video>
- -

Il risultato sarà un video sottotitolato, simile a questo: 

- -

Video player with standard controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."

- -

Per maggiori dettagli leggi l’articolo (in inglese) Adding captions and subtitles to HTML5 video. Puoi trovare l’esempio che appare nell’articolo su Github, scritto da Ian Devlin (vedi anche il codice sorgente). Questo esempio, tramite l’uso di JavaScript, permette agli utenti di scegliere tra differenti sottotitoli. Nota che, per attivare i sottotitoli, devi premere il bottone “CC” e selezionare una opzione tra inglese, tedesco o spagnolo.

- -
-

Nota: le tracce testuali e le trascrizioni contribuiscono anche al SEO, poichè i motori di ricerca danno molta importanza al contenuto testuale. Le tracce testuali possono perfino permettere ai motori di ricerca di ridirigere l’utente a un punto specifico del video.

-
- -

Altro contenuto multimediale

- -

Le sezioni precedenti non trattano tutti i tipi di contenuto multimediale che potresti voler usare sul tuo sito o applicazione. Potresti trovarti a dover gestire giochi, animazioni, slideshow, video inseriti da fonti esterne, o altro contenuto creato usando tecnologie come:

- - - -

Per tali contenuti è necessario gestire i problemi di accessibilità secondo ogni caso particolare. In alcuni casi non è particolarmente difficile, per esempio:

- - - -

Tuttavia, ci sono altri tipi di contenuto multimediale per i quali non è facile implementare l’accessibilità. Per esempio, se stai lavorando su un gioco immersivo in 3D o una applicazione di realtà virtuale, è realmente difficile fornire alternative testuali per tale tipo di esperienza. D’altro canto si può obiettare che le persone con vista ridotta non sono parte del target di pubblico di tali applicazioni.

- -

Dovresti comunque assicurarti che tale tipo di applicazioni abbiano un contrasto dei colori ottimale, di modo che siano più facilmente visualizzabili a persone con vista ridotta o daltonismo. Inoltre dovresti fare tutto il possibile per renderli accessibili da tastiera. Ricorda che è necessario cercare di fare sempre tutto il possibile invece di puntare al 100% dell’accessibilità in ogni situazione, un obiettivo spesso impossibile da raggiungere.

- -

Riassunto

- -

Questo articolo ha fornito una sintesi dei problemi di accessibilità relativi ai contenuti multimediali, e inoltre alcune soluzioni pratiche a tali problemi.

- -

{{PreviousMenuNext("Learn/Accessibilità/WAI-ARIA_basics","Learn/Accessibilità/Mobile", "Learn/Accessibilità")}}

- -

 

- -

In questo modulo

- - - -

 

diff --git "a/files/it/learn/accessibilit\303\240/wai-aria_basics/index.html" "b/files/it/learn/accessibilit\303\240/wai-aria_basics/index.html" deleted file mode 100644 index 09891c8a11..0000000000 --- "a/files/it/learn/accessibilit\303\240/wai-aria_basics/index.html" +++ /dev/null @@ -1,422 +0,0 @@ ---- -title: Basi della tecnologia WAI-ARIA -slug: Learn/Accessibilità/WAI-ARIA_basics -tags: - - ARIA - - Accessibilità - - Articolo - - Guida - - HTML - - HTML semantico - - JavaScript - - Principiante - - WAI-ARIA -translation_of: Learn/Accessibility/WAI-ARIA_basics ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Accessibilità/CSS_e_JavaScript_accessibilità","Learn/Accessibilità/Multimedia", "Learn/Accessibilità")}}
- -

Proseguendo i temi trattati nell'articolo precedente, può risultare complicato creare elementi di interfaccia utente accessibili quando gli stessi si basano su HTML non semantico e presentano contenuto aggiornato dinamicamente tramite JavaScript. La tecnologia WAI-ARIA può essere d'aiuto aggiungendo valore semantico addizionale, che i browser e le tecnologie assistive possono riconoscere e utilizzare per permettere agli utenti di decifrare più chiaramente il contesto e ciò che sta accadendo durante la navigazione del sito. In questo articolo vedremo come usare questa tecnologia a un livello basico per migliorare l'accessibilità.

- - - - - - - - - - - - -
Prerequisiti:Conoscimenti basici sull'uso del computer, livello basico di HTML, CSS e JavaScript, aver letto i precedenti articoli del corso.
Obiettivo:Acquisire familiarità con la tecnologia WAI-ARIA e imparare a usarla dove necessario per fornire valore semantico addizionale che migliori l'accessibilità.
- -

Cosa è WAI-ARIA?

- -

Cominciamo col dare un'occhiata a cosa è WAI-ARIA, e in che modo ci può essere utile.

- -

Un nuovo set di problemi

- -

Man mano che le applicazioni web cominciarono ad essere sempre più complesse e dinamiche, nuovi problemi di accessibilità iniziarono a manifestarsi.

- -

Per esempio, HTML5 ha introdotto alcuni elementi semantici per definire componenti di uso comune nelle pagine ({{htmlelement("nav")}}, {{htmlelement("footer")}}, ecc.). Prima dell'arrivo di questi elementi, gli sviluppatori si limitavano a usare {{htmlelement("div")}} con ID o classi, per esempio <div class="nav">. Ma questi elementi erano problematici, perchè non fornivano un sistema standard per individuare programmaticamente i componenti di una pagina, dunque i lettori di schermo non potevano distinguere chiaramente le varie sezioni da cui la pagina era composta. 

- -

La soluzione inizialmente consisteva nell’aggiungere uno o più link nascosti nella parte alta della pagina. Tali link reindirizzavano alle varie sezioni della pagina, come per esempio la barra di navigazione:

- -
<a href="#hidden" class="hidden">Vai alla barra di navigazione</a>
- -

 

- -

Ma questo sistema non è molto preciso, e può essere usato solo quando il lettore di schermo comincia a leggere dalla parte alta della pagina.

- -

Per fare un altro esempio, ad un certo punto le applicazioni cominciarono a includere controlli complessi come selezionatori di data o slider per selezionare valori. HTML5 mette a disposizione alcuni tipi speciali di input nativi, specifici per tali controlli:

- -
<input type="date">
-<input type="range">
- -

Ma questi elementi non sono supportati da tutti i browser, ed inoltre sono molto difficili da personalizzare, rendendoli complicati da integrare nel disegno di un sito. Di conseguenza, gli sviluppatori spesso fanno uso di librerie JavaScript e creano tali controlli come una serie di {{htmlelement("div")}} annidati o elementi di una tabella a cui assegnano classi, e in seguito li personalizzano con CSS e li controllano con funzioni di JavaScript.

- -

Il problema di questo metodo è che i lettori di schermo non riescono ad interpretare di cosa si tratta, e riportano solo la presenza di una serie di elementi dei quali non possono descrivere la funzione.

- -

E arrivò WAI-ARIA

- -

WAI-ARIA è una specifica, cioè una raccolta di indicazioni, prodotta dal W3C, che definisce una serie di attributi HTML addizionali che possono essere applicati agli elementi per fornire maggior valore semantico e migliorare l'accessibilità dovunque sia necessario. Ci sono tre caratteristiche principali definite nella raccolta:  

- - - -

Un punto importante da tenere in considerazione riguardo gli attributi WAI-ARIA è che non influiscono in alcun modo sulla pagina, eccetto che sulle informazioni fornite dalla API di accessibilità del browser (dalla quale i lettori di schermo prendono le informazioni). WAI-ARIA non cambia la struttura della pagina, il DOM o altro, anche se i suoi attributi possono essere utili per selezionare gli elementi in CSS.

- -
-

Nota: puoi trovare una utile lista di tutti i ruoli ARIA e i loro usi, con link a informazioni più approfondite, nella specifica WAI-ARIA: vedi Definizione di Ruoli (in inglese).

- -

La specifica contiene anche una lista delle proprietà e degli stati, con link ad ulteriori informazioni. Vedi  Definizioni di Stati e Proprietà (in inglese).

-
- -

Dove è supportata WAI-ARIA?

- -

A questa domanda non è facile rispondere. È difficile trovare  una risorsa che indichi in maniera completa quali funzionalità di WAI-ARIA sono supportate e dove, perchè:

- -
    -
  1. Ci sono molte funzionalità nella specifica WAI-ARIA.
    2. -
  2. Ci sono moltissime combinazioni possibili di sistemi operativi, browser e lettori di schermo.
    3. -
- -

L'ultimo punto è fondamentale: per poter usare un lettore di schermo il tuo sistema operativo deve avere installato almeno un browser con la necessaria API di accessibilità, che fornisca ai lettori di schermo le informazioni necessarie perchè funzionino. La maggior parte dei sistemi operativi ha di serie uno o due browser che funzionano con i lettori di schermo. Sul sito di Paciello Group si può trovare una guida aggiornata costantemente che fornisce dati sul supporto dei lettori di schermo nei vari sistemi operativi. Vedi l'articolo (in inglese) Guida: browser, sistemi operativi e supporto per i lettori di schermo.

- -

Il seguente passo è assicurarsi che i browser usati supportino la tecnologia ARIA e la trasmettano tramite le loro API, ma anche che i lettori di schermo riconoscano le informazioni che ricevono e le presentino agli utenti in una forma ottimale.

- -
    -
  1. Il supporto dei browser in generale è molto buono. Al momento della stesura di questo articolo, il sito caniuse.com riporta un livello globale di supporto di WAI-ARIA nei vari browser di circa l'88%.
    2. -
  2. Il supporto di ARIA nei lettori di schermo non è al momento a un livello comparabile, ma i lettori di schermo più popolari stanno facendo grandi sforzi per migliorare la compatibilità con WAI-ARIA.  Puoi farti un'idea del livello di supporto leggendo l'articolo (in inglese) Compatibilità dei lettori di schermo con WAI-ARIA .
    3. -
- -

In questo articolo non spiegheremo tutte le funzionalità di WAI-ARIA e i dettagli sul supporto che hanno. Cercheremo invece di presentare le funzionalità più importanti e utili agli sviluppatori web; in generale se non facciamo riferimento al livello di supporto di una funzionalità, puoi considerare che il supporto è ragionevolmente buono. In caso di eccezioni lo indicheremo esplicitamente.

- -
-

Nota: alcune librerie JavaScript supportano WAI-ARIA. Ciò significa che quando generano elementi IU, come per esempio formulari complessi, aggiungono automaticamente attributi ARIA per migliorarne l'accessibilità. Se stai valutando l'utilizzo di una libreria Javascript per sviluppare elementi IU più rapidamente, dovresti tenere in conto il livello di accessibilità della libreria quando scegli quale usare. Buoni esempi sono jQuery UI (vedi l'articolo in inglese jQuery UI: supporto all'accessibilità), ExtJS, e Dojo/Dijit.

-
- -

Quando dovresti usare WAI-ARIA?

- -

Abbiamo già discusso di alcuni dei problemi che hanno spinto alla creazione di WAI-ARIA, dovuti soprattutto alla crescente complessità delle moderne applicazioni web. Essenzialmente ci sono 4 grandi aree in cui WAI-ARIA è utile: 

- -
    -
  1. Indicatori/riferimenti: gli attributi role possono funzionare come descrizioni che fanno riferimento a elementi HTML5 replicandone il valore semantico (per esempio {{htmlelement("nav")}}), oppure possono andare oltre HTML5, e funzionare come indicatori che descrivono differenti aree funzionali, per esempio search, tabgroup, tab, listbox, ecc.
    2. -
  2. Aggiornamento dinamico del contenuto: i lettori di schermo in generale hanno difficoltà a indicare quando il contenuto subisce cambiamenti; con ARIA possiamo usare aria-live per indicare agli utenti che usano lettori di schermo quando un' area del contenuto viene aggiornata, per esempio tramite XMLHttpRequest, o DOM APIs .
    3. -
  3. Migliorare l'accessibilità da tastiera: ci sono elementi HTML che hanno accessibilità da tastiera nativa; quando però invece di usare tali elementi se ne usano altri che li "simulano" in combinazione con JavaScript, l'accessibilità da tastiera e la qualità di lettura dei lettori di schermo ne risentono. In questi casi possiamo usare WAI-ARIA per dare focus a tali elementi  (usando tabindex).
    4. -
  4. Accessibilità dei controlli non semantici: quando si usano una serie di <div> annidati in combinazione con CSS e JavaScript per creare una funzionalità IU particolarmente complessa, oppure quando un controllo nativo viene notevolmente modificato tramite JavaScript, l'accessibilità può risultare danneggiata. Gli utenti che usano lettori di schermo troveranno difficile capire come funzionano tali elementi se non ci sono indicazioni semantiche che lo spieghino. In situazioni come queste la tecnologia ARIA può aiutare a fornire le indicazioni necessarie tramite una combinazione di ruoli come button, listbox, o tabgroup, e proprietà come aria-required o aria-posinset.
    5. -
- -

Ricorda: dovresti ricorrere a WAI-ARIA solo quando è necessario! Idealmente, dovresti usare sempre funzionalità HTML native per fornire le indicazioni semantiche necessarie ai lettori di schermo per interpretare correttamente il contesto. A volte però ciò non è possibile, forse perchè non hai pieno controllo sul codice, o perchè stai creando qualcosa di particolarmente complesso, che non puoi implementare con un elemento HTML standard. In tali casi, WAI-ARIA può essere un utile strumento di miglioramento dell'accessibilità. 

- -

Ma ricorda, usala solo quando è necessario!

- -
-

Nota: cerca di testare il tuo sito con la maggior varietà possibile di utenti reali: persone non disabili, persone che usano lettori di schermo, persone che navigano con la tastiera, ecc. Queste persone sapranno indicarti cosa funziona e cosa no in maniera molto più accurata di ciò che può emergere se ti limiti ad effettuare test di utilizzo in prima persona.

-
- -

Esempi di uso pratico di WAI-ARIA 

- -

Nella prossima sezione analizzeremo le 4 aree di utilizzo di WAI-ARIA più dettagliatamente, e forniremo alcuni esempi pratici. Prima di continuare però, dovresti attivare un lettore di schermo, per poter testare alcuni degli esempi.

- -

Vedi la sezione (in inglese) sul testing con lettori di schermo per maggiori informazioni.

- -

Indicatori/riferimenti

- -

WAI-ARIA trasmette ai browser l'attributo role, che permette di aggiungere valore semantico extra agli elementi del tuo sito dovunque sia necessario. La principale utilità di questo attributo è che permette agli utenti che usano lettori di schermo di individuare più facilmente gli elementi più comuni delle pagine. Vediamo un esempio:  il nostro sito senza attributi role (vedi la versione live) ha la seguente struttura:

- -
<header>
-  <h1>...</h1>
-  <nav>
-    <ul>...</ul>
-    <form>
-      <!-- search form  -->
-    </form>
-  </nav>
-</header>
-
-<main>
-  <article>...</article>
-  <aside>...</aside>
-</main>
-
-<footer>...</footer>
- -

Se provi a navigare il sito con un lettore di schermo in un browser moderno, riceverai diverse informazioni utili. Per esempio, VoiceOver fornisce le seguenti indicazioni:

- - - -

Se ti rechi nella sezione Rotore di VoiceOver (premendo VO-U), vedrai che la maggior parte degli elementi più importanti sono elencati ordinatamente e si può accedere ad essi rapidamente.

- -

- -

Ma in realtà, la situazione è migliorabile. Il campo di ricerca è un punto di riferimento importante che gli utenti vorranno trovare, ma non compare nella lista degli elementi e non è trattato come un elemento di riferimento, a parte l'indicazione che si tratta di una casella di ricerca (<input type="search">). Inoltre, alcuni browser più vecchi (per esempio IE8), non riconoscono le indicazioni semantiche degli elementi HTML5. 

- -

Possiamo migliorare il tutto usando alcune funzionalità ARIA. Per prima cosa aggiungiamo alcuni attributi role alla nostra struttura HTML. Il nostro  esempio di sito con ruoli aria (vedi la versione live) ha la seguente struttura:

- -
<header>
-  <h1>...</h1>
-  <nav role="navigation">
-    <ul>...</ul>
-    <form role="search">
-      <!-- search form  -->
-    </form>
-  </nav>
-</header>
-
-<main>
-  <article role="article">...</article>
-  <aside role="complementary">...</aside>
-</main>
-
-<footer>...</footer>
- -

C'è anche una funzionalità bonus in questo esempio: all'elemento {{htmlelement("input")}} è stato assegnato l'attributo aria-label, che fornisce ai lettori di schermo un’etichetta descrittiva, anche se non abbiamo incluso un elemento {{htmlelement("label")}}. In casi come questo è molto utile usare l’attributo ARIA. Un campo di ricerca è infatti un elemento molto comune e facilmente riconoscibile, e aggiungere una etichetta visuale potrebbe danneggiare il disegno della pagina.

- -
<input type="search" name="q" placeholder="Scrivi qui ciò che vuoi cercare" aria-label="Campo per cercare nel contenuto del sito">
- -

Se ora usiamo VoiceOver per navigare il sito d'esempio, notiamo alcuni miglioramenti:

- - - -

Inoltre, il sito è ora maggiormente accessibile per utenti che navigano con browser antiquati come IE8; vale la pena includere ruoli ARIA anche per questo. E se per caso il tuo sito è stato costruito usando solo elementi <div>, dovresti decisamente includere i ruoli ARIA per fornire le necessarie semantiche!

- -

Il valore semantico migliorato del campo di ricerca ha mostrato cosa è possibile fare quando ARIA va oltre le semantiche disponibili con HTML5. Potrai sapere molto di più sulle semantiche e il potere delle proprietà/attributi ARIA qui sotto, specialmente nella sezione {{anch("Accessibilità dei controlli non semantici")}}. Per ora, vediamo come ARIA ci può aiutare a gestire gli aggiornamenti del contenuto dinamico.

- -

Aggiornamenti del contenuto dinamico

- -

In generale tutto il contenuto caricato nel DOM può essere facilmente interpretato usando un lettore di schermo, dal contenuto testuale fino al testo alternativo delle immagini. I tradizionali siti statici con contenuto largamente testuale sono dunque facili da rendere accessibili alle persone con deficit visivo.

- -

Il problema è che le applicazioni web moderne spesso non sono composte da testo statico, di solito hanno una gran quantità di contenuto che si aggiorna dinamicamente, cioè contenuto che si agigorna senza che l'intera pagina si ricarichi, tramite meccanismi come XMLHttpRequest, Fetch, o DOM APIs. Queste aree del contenuto sono talvolta chiamate “aree vive”, o  live regions.

- -

Consideriamo un esempio: aria-no-live.html (vedi anche la versione live). In questo esempio troviamo un paragrafo contenente una citazione selezionata casualmente:

- -
<section>
-  <h1>Citazione casuale</h1>
-  <blockquote>
-    <p></p>
-  </blockquote>
-</section>
- -

JavaScript riceve tramite XMLHttpRequest un file JSON contenente una serie di citazioni con il rispettivo autore. Dopo che la prima citazone tratta dal file è stata caricata nel paragrafo si attiva un loop setInterval() che carica una nuova citazione nel paragrafo ogni 10 secondi:

- -
var intervalID = window.setInterval(showQuote, 10000);
- -

Questo sistema funziona correttamente , ma non è ottimale in termini di accessibilità. Gli aggiornamenti del contenuto non sono rilevati dai lettori di schermo, e gli utenti che li usano non possono rendersi conto di ciò che sta succedendo. Questo esempio è molto basico, ma prova a immaginare cosa succederebbe se stessi creando una interfaccia utente più complessa, con molte aree del contenutto che si aggiornano costantemente, come una chat room, un gioco strategico o magari un sito di e-commerce con un carrello della spesa che si aggiorna con i prodotti selezionati dall'utente. Sarebbe impossibile utilizzare l'applicazione con un lettore di schermo, in assenza di un sistema che avverta gli utenti degli aggiornamenti del contenuto.

- -

Fortunatamente WAI-ARIA ci mette a disposizione un utile meccanismo per fornire tali avvertimenti, la proprietà aria-live. Applicarla a un elemento fa sì che i lettori di schermo leggano il contenuto che viene aggiornato. Con quanta frequenza il contenuto viene letto dipende dal valore assegnato:

- - - -

Generalmente, assegnare il valore assertive è sufficiente perchè gli aggiornamenti vengano annunciati in tempo reale, anche se nel caso di aggiornamenti di multiple aree di contenuto che avvengono allo stesso tempo i vari aggiornamenti saranno annunciati in sequenza, quindi con la possibilità di un breve ritardo sul tempo reale. Si raccomanda di usare rude solo per aggiornamenti ad alta priorità che devono "passare davanti" agli altri aggiornamenti in corso.

- -

Prova a realizzare una copia di aria-no-live.html e quotes.json, e modificare l'etichetta <section> così:

- -
<section aria-live="assertive">
- -

D'ora in poi il lettore di schermo leggerà il contenuto ogni volta che quest'ultimo sarà aggiornato.

- -
-

Nota: : la maggior parte dei browser attiverà una security exception se provi ad effettuare un XMLHttpRequest da un URL file://. Per esempio se carichi il file direttamente nel browser (facendo doppio click). Per farlo funzionare, devi caricare il file a un server, per esempio usando GitHub (articolo in inglese), o un server locale come Python's SimpleHTTPServer (articolo in inglese).

-
- -

C'è però una considerazione da tenere in conto: il lettore di schermo legge solo la parte del testo che viene aggiornata. È utile dunque che legga anche l'heading, per aiutare l'utente a ricordare quale sezione della pagina è stata aggiornata. Per farlo, possiamo aggiungere la proprietà aria-atomic alla sezione. Modifica la tua etichetta <section> così:

- -
<section aria-live="assertive" aria-atomic="true">
- -

L'attributo aria-atomic="true" indica al lettore di schermo che deve leggere l'intero contenuto dell'elemento, non solo le parti che sono state aggiornate.  

- -
-

Nota: : puoi vedere l'esempio completo qui: aria-live.html (vedi anche la versione live).

-
- -
-

Nota: : la proprietà aria-relevant è utile per controllare cosa viene letto quando un'area di contenuto viene aggiornata. Per esempio puoi far si che siano lette solo le parti aggiunte o al contrario le parti rimosse dal contenuto.

-
- -

Migliorare l'accessibilità da tastiera

- -

Come abbiamo già detto in altri articoli di questo modulo, uno dei punti forti di HTML in termini di accessibilità è che implementa automaticamente l'accessibilità da tastiera per funzionalità come i bottoni, i campi dei formulari e i link. In generale, puoi sempre usare il tasto TAB per muoverti da un elemento all'altro e il tasto INVIO per selezionare o attivare gli elementi. In alcune circostanze puoi anche usare altri tasti (per esempio le frecce, per muoverti su e giù tra le opzioni di una lista <select>).

- -

Ciononostante, a volte ti troverai a dover scrivere codice che fa uso di elementi non semantici che compiono la funzione di bottoni (o altri tipi di elementi), o codice che usa elementi che possono ricevere focus per scopi diversi dal normale. Forse starai cercando di sistemare del codice mal scritto in precedenza, o di costruire un qualche tipo di widget complesso che richiede tecniche non ortodosse.

- -

Per rendere focalizzabili elementi che normalmente non lo sono, WAI-ARIA estende l'attributo tabindex con alcuni nuovi valori:

- - - -

Abbiamo discusso questi valori in maggior dettaglio e mostrato una implementazione tipica nel nostro articolo sull'accessibilità in HTML, vedi Implementare l'accessibilità da tastiera in un secondo tempo.

- -

Accessibilità dei controlli non semantici

- -

Proseguendo con il tema trattato nella sezione precedente, quando si usa una serie di <div> annidati in congiunto con CSS o JavaScript per creare una funzionalità complessa per l’interfaccia utente, o se si cambia/migliora sostanzialmente un controllo nativo tramite JavaScript, non solo è possibile che l’accessibilità da tastiera ne risulti ridotta, ma anche per gli utenti che usano lettori di schermo potrebbero prodursi difficoltà a comprendere l’uso della funzionalità, se non ci sono indicazioni semantiche o altri indizi. In tali situazioni, ARIA può aiutare a fornire il valore semantico addizionale necessario. 

- -

Validazione di formulari e avvisi di errore

- -

Innanzitutto, rivediamo l’esempio di formulario che avevamo preso in considerazione nell’articolo sull’accessibilità in CSS e JavaScript (vedi Mantieni un uso non intrusivo di JavaScript). Alla fine di tale sezione abbiamo mostrato alcuni attributi ARIA che sono stati aggiunti al messaggio che appare se ci sono errori di validazione quando provi a inviare il formulario:

- -
<div class="errors" role="alert" aria-relevant="all">
-  <ul>
-  </ul>
-</div>
- - - -

Possiamo ora procedere oltre con il nostro utilizzo di ARIA, e fornire ulteriore assitenza nella validazione dei dati. Per esempio, perchè non indicare dal principio quali campi sono obbligatori, e quale intervallo di età è permesso introdurre?

- -
    -
  1. A questo punto, salva sul tuo dispositivo una copia dei files  validazione-formulario.html e validazione.js.
    2. -
  2. Aprili entrambi in un editor di testo e dai un’occhiata a come funziona il codice.
    3. -
  3. Per prima cosa, aggiungi un paragrafo come quello che vedi qui sotto giusto prima della etichetta di apertura del formulario <form>, e marca entrambe le etichette <label> del formulario con un asterisco. Questo è il metodo con cui normalmente si segnalano i campi obbligatori agli utenti che non hanno limitazioni visuali. - 
    <p>I campi marcati con un asterisco (*) sono obbligatori.</p>
    -
    4. -
  4. Questa indicazione è utile dal punto di vista visuale, ma non è facile da cogliere per gli utenti che usano lettori di schermo. Fortunatamente, WAI-ARIA fornisce l’attributo  aria-required , che suggerisce al lettore di schermo di indicare all’utente quali sono i campi del formulario che devono essere compilati obbligatoriamente. Aggiorna gli elementi <input> come vedi qui sotto:                                                              
    5. -
  5. - 
    <input type="text" name="name" id="name" aria-required="true">
-
-<input type="number" name="age" id="age" aria-required="true">
    -
    6. -
  6. A questo punto se salvi l’esempio e lo testi con un lettore di schermo dovresti ascoltare qualcosa come “Introduci il tuo nome asterisco, obbligatorio, modifica testo”.
    7. -
  7. Potrebbe inoltre risultare utile indicare agli utenti l’intervallo di anni dentro il quale dovrebbe situarsi il valore dell’età. Spesso tale valore si indica tramite un placeholder, ossia un valore indicativo che appare all’interno del campo quando non è ancora stato compilato. WAI-ARIA include le proprietà aria-valuemin e aria-valuemax per specificare un intervallo di valori minimo e massimo, ma queste proprietà al momento non hanno un supporto ampio; una caratteristica che gode di un migliore supporto è l’attributo HTML5 placeholder, che contiene un messaggio che viene mostrato nel campo quando l’utente non vi ha ancora introdotto nessun valore, e viene letto da un certo numero di lettori di schermo. Aggiorna il campo età come indicato qui: - 
    <input type="number" name="age" id="age" placeholder="introduci un numero compreso tra 1 e 150" aria-required="true">
    -
    8. -
- -
-

Nota: puoi vedere un esempio completo qui: validazione-formulario-aggiornato.html.

-
- -

WAI-ARIA permette inoltre alcune tecniche avanzate di etichettazione dei formulari, che vanno al di là del classico elemento {{htmlelement("label")}}. Abbiamo già discusso sull’utilizzo della proprietà aria-label per rendere un’etichetta {{htmlelement("label")}} invisibile agli utenti che non usano lettori di schermo (vedi la sezione Indicatori/riferimenti sopra). Ci sono anche altre tecniche di etichettazione che fanno uso di proprietà come aria-labelledby, se vuoi usare un elemento non-<label> come etichetta o se vuoi etichettare multipli campi del formulario con la stessa etichetta, e aria-describedby, se vuoi associare informazione aggiuntiva a un campo del formulario e vuoi che il lettore di schermo la legga. Vedi l’articolo in inglese  WebAIM's Advanced Form Labeling per maggiori dettagli.

- -

Ci sono inoltre molte altre proprietà e attributi utili per indicare lo stato di un elemento di un formulario. Per esempio, si può usare aria-disabled="true" per indicare che un campo è disabilitato. Molti browser salteranno i campi disabilitati, e i lettori di schermo non li leggeranno, ma in alcuni casi saranno comunque indicati, dunque è una buona idea includere questo attributo per permettere al lettore di schermo di sapere che un campo è effettivamente disabilitato.

- -

Se esiste la possibilità che lo stato di un campo cambi da disabilitato ad abilitato è buona norma indicarlo all’utente, e  inoltre spiegare le conseguenze di tale cambio. Per esempio, nel nostro formulario demo validazione-formulario-casella-disabilitata.html c’è una casella che, quando è selezionata, abilita un altro campo del formulario, tramite il quale si possono introdurre informazioni aggiuntive. Abbiamo preparato un paragrafo nascosto:

- -
<p class="hidden-alert" aria-live="assertive"></p>
- -

Questo elemento è nascosto alla vista tramite position: absolute. Quando la casella viene selezionata/deselezionata, il contenuto dell’area nascosta si aggiorna per segnalare agli utenti che usano lettore di schermo in che modo la struttura del formulario è cambiata dopo aver selezionato la casella; inoltre si aggiorna anche lo stato dell’attributo aria-disabled e si fornisce anche un indicazione visuale del cambio:

- -
function toggleMusician(bool) {
-  var instruItem = formItems[formItems.length-1];
-  if(bool) {
-    instruItem.input.disabled = false;
-    instruItem.label.style.color = '#000';
-    instruItem.input.setAttribute('aria-disabled', 'false');
-    hiddenAlert.textContent = 'I'Il campo strumenti suonati è ora abilitato; usalo per indicarci quali strumenti sai suonare.';
-  } else {
-    instruItem.input.disabled = true;
-    instruItem.label.style.color = '#999';
-    instruItem.input.setAttribute('aria-disabled', 'true');
-    instruItem.input.removeAttribute('aria-label');
-    hiddenAlert.textContent = ''Il campo Strumenti suonati è ora disabilitato.';
-  }
-}
- -

Descrivere bottoni non semantici come bottoni

- -

Ci è già capitato di discutere della accessiblità nativa di alcuni elementi come bottoni, link o campi di formulario, e dei problemi di accessibilità che sorgono quando si usano elementi sostitutivi per compiere le stesse funzioni di questi elementi. Vedi Controlli di interfaccia utente nell’articolo sull’accessibilità in HTML, e Migliorare l’accessibilità da tastiera, qui sopra). In molti casi è possibile restituire l’accessibilità da tastiera a tali elementi senza troppi problemi, usando tabindex e un poco di JavaScript.

- -

Ma come fare con i lettori di schermo? Non potranno interpretare gli elementi sostitutivi come bottoni. Se facciamo un test con il nostro esempio  div-falsi-bottoni.html e un lettore di schermo, i falsi bottoni saranno segnalati all’utente con frasi come “Cliccami!, gruppo”, che risultano di difficile interpretazione.

- -

Possiamo rimediare al problema usando un ruolo WAI-ARIA. Salva la pagina div-falsi-buttoni.html, e aggiungi role="button" ad ogni <div> che compie la funzione di bottone, come per esempio:

- -
<div data-message="Questo messaggio viene dal primo bottone" tabindex="0" role="button">Cliccami!</div>
- -

Se ora provi a navigare la pagina con un lettore di schermo, i bottoni saranno letti come “Cliccami!, bottone”, e tutto risulterà molto più chiaro.

- -
-

Nota: non dimenticare che usare il corretto elemento semantico è sempre una opzione migliore. Se vuoi creare un bottone e non ci sono ragioni valide per non usare un elemento  <button>, dovresti usare un elemento <button>!

-
- -

Guidare gli utenti nell’uso di widget complessi

- -

Ci sono molti altri ruoli che danno la possibilità di assegnare ad elementi non semantici lo status di comuni elementi dell’interfaccia utente, elementi che vanno al di là di ciò che è disponibile nell’HTML standard, come per esempio  combobox, slider, tabpanel, tree. Puoi trovare alcuni utili esempi nella Deque university code library, per farti un'idea di come tali elementi possono essere resi accessibili.

- -

Prendiamo in considerazione un esempio. Torniamo ad usare il nostro semplice infobox a schede (vedi Nascondere elementi nell’articolo sull’accessibilità in CSS e JavaScript), che puoi trovare qui: infobox a schede (vedi codice sorgente).

- -

Questo esempio funziona perfettamente in termini di accessibilità da tastiera: puoi muoverti facilmente da una scheda all’altra usando il tasto TAB e selezionare una scheda con INVIO per visualizzarne il contenuto. È inoltre abbastanza accessibile se si usa un lettore di schermo, puoi infatti usare gli headings per navigare il contenuto anche senza vederlo. Ciò che però non risulterà del tutto chiaro è in cosa consiste il contenuto stesso: un lettore di schermo riporta il contenuto dell’infobox come composto da un lista di link e da dell’altro contenuto con tre headings. Non da nessuna indicazione di come i contenuti sono relazionati tra loro. Fornire all’utente indicazioni precise su come il contenuto è strutturato è sempre una buona idea.

- -

Abbiamo creato una versione migliorata dell’esempio, chiamata aria-tabbed-info-box.html (vedi versione live). Abbiamo aggiornato l’interfaccia del box così:

- -
<ul role="tablist">
-  <li class="active" role="tab" aria-selected="true" aria-setsize="3" aria-posinset="1" tabindex="0">Tab 1</li>
-  <li role="tab" aria-selected="false" aria-setsize="3" aria-posinset="2" tabindex="0">Tab 2</li>
-  <li role="tab" aria-selected="false" aria-setsize="3" aria-posinset="3" tabindex="0">Tab 3</li>
-</ul>
-<div class="panels">
-  <article class="active-panel" role="tabpanel" aria-hidden="false">
-    ...
-  </article>
-  <article role="tabpanel" aria-hidden="true">
-    ...
-  </article>
-  <article role="tabpanel" aria-hidden="true">
-    ...
-  </article>
-</div>
- -
-

Nota: il cambio più evidente è la rimozione dei link che erano presenti precedentemente nell’esempio. Ora si usano i componenti li della lista per identificare le schede. Questo procedimento rende il tutto meno confuso per gli utenti che usano lettori di schermo, in quanto i link che c’erano in precedenza non conducevano da nessuna parte, servivano solo a cambiare di scheda. Inoltre gli attributi aria-setsize e aria-posinset permettono ora di identificare chiaramente le schede tramite il lettore di schermo: in precedenza, con i link, il browser trasmetteva sempre al lettore “1 di 1”, e non “1 di 3”, “2 di 3”, ecc.

-
- -

 

- -

Le nuove funzionalità aggiunte all’infobox di esempio sono le seguenti:

- - - -

Secondo i nostri test, questa nuova struttura ha migliorato sensibilmente l’accessibilità dell’infobox a schede. Le schede sono ora riconosciute come schede (ora il lettore pronuncia “scheda”, o perlomeno “tab”, in inglese), la scheda attualmente selezionata è chiaramente indicata, pronunciando il lettore la parola “selezionata” insieme al nome della scheda, e il lettore di schermo indica anche il numero della scheda in cui si trova l’utente. Inoltre, grazie ai valori di aria-hidden impostati (solo la scheda attualmente selezionata ha il valore aria-hidden="false"), il contenuto non nascosto è il solo che il lettore può leggere, rendendolo il tutto più facile e meno confuso da navigare per l’utente.

- -

 

- -
-

Nota: puoi assegnare l’attributo aria-hidden="true"  a qualsiasi contenuto che vuoi che sia ignorato dai lettori di schermo.

-
- -

Riassunto

- -

Questo articolo non è da considerarsi esaustivo per quanto riguarda tutte le funzionalità disponibili con la tecnologia WAI-ARIA, ma dovrebbe averti fornito informazioni sufficienti a capire come usarla, e come identificare le situazioni più comuni in cui avrai bisogno di ricorrere ad essa.

- -

Vedi anche

- - - -

{{PreviousMenuNext("Learn/Accessibilità/CSS_e_JavaScript_accessibilità","Learn/Accessibilità/Multimedia", "Learn/Accessibilità")}}

diff --git a/files/it/learn/come_contribuire/index.html b/files/it/learn/come_contribuire/index.html deleted file mode 100644 index bd3d90966a..0000000000 --- a/files/it/learn/come_contribuire/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: Come contribuire nell'area di MDN dedicata all'apprendimento -slug: Learn/Come_contribuire -tags: - - Apprendimento - - Articolo - - Contribuire - - Didattica - - Glossário - - Guida - - Materiale - - Principiante - - insegnante - - sviluppatore -translation_of: Learn/How_to_contribute ---- -

{{LearnSidebar}}

- -

Se sei qui per la prima volta o dopo un'approfondita ricerca, probabilmente ti interessa contribuire all'area di MDN dedicata all'apprendimento. Questa è una grande notizia!

- -

In questa pagina, troverai tutto ciò che ti occorre per iniziare a migliorare i contenuti dedicati all'apprendimento in MDN. Ci sono molte cose che puoi fare, a seconda del tempo a tua disposizione e se sei un principiante, uno sviluppatore web o un insegnante.

- -
-

Nota: Puoi trovare una guida per scrivere un nuovo articolo nell'area dedicata all'apprendimento su Come scrivere un nuovo articolo per aiutare gli utenti a conoscere il Web.

-
- -

Trova un compito specifico

- -

I contributori stanno utilizzando una bacheca Trello per organizzare i propri compiti. In questo modo puoi trovare dei compiti specifici da fare nel progetto. Per essere coinvolto, basta creare un account Trello e avvisare Chris Mills per ricevere i permessi di scrittura sulla bacheca.

- -

Contribuire è il modo migliore per divertirsi, imparando nuove cose. Se ti senti perso o hai domande, non esitare a raggiungerci nella nostra lista email o canale IRC (dettagli a fine pagina). Chris Mills guida gli argomenti per l'area apprendimento — Puoi anche contattarlo direttamente.

- -

La seguente sezione fornisce delle idee generali di compiti che puoi fare.

- -

Sono un principiante

- -

Questo è meraviglioso! I principianti sono molto importanti e preziosi per creare materiale didattico e raccogliere feedback su di esso. In quanto diretto destinatario di questo materiale, riesci a restituire una prospettiva unica su di esso e ciò ti rende un elemento fondamentale del nostro team. Invece, se stai utilizzando i nostri articoli per imparare qualcosa ma ti trovi in difficoltà o trovi un articolo caotico, puoi sia correggerlo oppure farci sapere del problema affinché possiamo provvedere noi a correggerlo.

- -

Di seguito sono riportati i modi in cui puoi contribuire:

- -
-
Aggiungi tags ai nostri articoli (5 min)
-
Aggiungere dei tag ai contenuti di MDN è uno dei modi più semplici di dare il tuo contributo. Poichè molte delle nostre sezioni utilizzano i tags per aiutare a fornire le giuste informazioni, contribuire a definire i tags stessi è senz'altro un contributo molto prezioso. Da' un'occhiata alla lista dei lemmi del glossario e agli articoli didattici ancora privi di tags per iniziare a contribuire.
-
Leggi e correggi le voci del glossario (5 min)
-
In qualità di principiante, noi abbiamo bisogno della freschezza del tuo sguardo. Se una voce del glossario ti sembra difficile da comprendere, ciò significa che occorre migliorarla. Sentiti libero di operare qualunque cambiamento ritieni necessario. Se non ti sembra di essere in grado tu stesso di apportare eventuali correzioni, puoi comunque segnalarcelo alla nostra mailing list.
-
Scrivi una nuova voce del glossario (20 min)
-
Ecco il modo più efficace per imparare qualcosa di nuovo. Scegli un concetto che vorresti capire meglio e, mentre impari, scrivi la nuova voce del glossario che gli pertiene. Provare a spiegare qualcosa agli altri è un modo efficace di "fissare" quanto stai imparando nel tuo cervello e di elaborare tu stesso il significato delle cose. Tutto ciò, mentre stai cercando di aiutare qualcun altro: si vince tutti!
-
Leggi e controlla un articolo didattico (2 ore)
-
Compito molto simile al precedente (v. sopra); solo richiede maggior tempo, perchè questi articoli in genere sono più lunghi.
-
- -

Sono uno sviluppatore

- -

Fantastico! Le tue competenze tecniche sono proprio quello che ci serve per offrire ai principianti dei contenuti tecnicamente accurati. Poichè questa sezione di MDN è dedicata all'apprendimento del Web, fa in modo che le tue spiegazioni siano il più semplice possibile, ma non così semplici da risultare inutili. E' preferibile essere compresi piuttosto che esageratamente precisi.

- -
-
Leggi e correggi le voci del glossario (5 min)
-
In quanto sviluppatore, vorremmo essere sicuri che farai in modo di rendere i nostri contenuti in maniera tecnicamente accurata ma non pedante. Sentiti libero di apportare tutte le correzioni del caso. Se vuoi confrontarti sui contenuti prima di intervenire, contattaci via mailing list o IRC channel.
-
Scrivi una nuova voce del glossario (20 min)
-
Rendere più chiaro il linguaggio tecnico è un ottimo metodo per imparare e, allo stesso tempo, per essere tecnicamente precisi. I principianti te ne saranno grati. Ci sono molti termini da definire che richiedono la tua attenzione. Scégline uno e sei pronto per cominciare.
-
Leggi e correggi un articolo didattico (2 ore)
-
Stessa cosa del controllare una voce del glossario (v. sopra); richiede solo un po' più di tempo perchè questi articoli sono generalmente più lunghi.
-
Scrivi un nuovo articolo didattico (4 ore o più)
-
In MDN mancano ancora semplici chiari articoli  dedicati all'utilizzo delle tecnologie per il Web (HTML, CSS, JavaScript, ecc). Ci sono anche contenuti ormai obsoleti che avrebbero bisogno di essere controllati e riorganizzati. Mettiti alla prova e contribuisci a rendere le tecnologie per il Web accessibili anche per i principianti.
-
Crea strumenti didattici interattivi , esempi di codice o esercizi  (? ore)
-
Ciascuno dei nostri articoli didattici prevede quello che chiamiamo materiale di "apprendimento attivo", perchè le persone imparano meglio se fanno loro stessi. Tale materiale è costituito da esercizi o contenuti interattivi, che consentono all'utente di applicare e manipolare i concetti espressi nell'articolo. Esistono diversi modi di creare contenuti didattici per l'apprendimento attivo, dal creare esempi di codice con JSFiddle o simili, alla composizione di contenuti interattivi e del tutto modificabili con Thimble. Scatena la tua fantasia!
-
- -

Sono un insegnante

- -

MDN ha una lunga storia di eccellenza tecnica, ma siamo ancora agli inizi per ciò che riguarda gli strumenti didattici migliori per insegnare ai principianti. Ecco dove il tuo aiuto è prezioso, come insegnante o facilitatore: puoi aiutarci a far sì che il nostro materiale fornisca un percorso didattico efficace e pratico per i nostri lettori.

- -
-
Leggi e correggi una voce del glossario (15 min)
-
Controlla un lemma del glossario e séntiti libero di apportare tutte le correzioni del caso. Se vuoi confrontarti sul contenuto prima di modificarlo, puoi contattarci tramite la nostra mailing list o IRC channel.
-
Scrivi una nuova voce del glossario (1 ora)
-
Definizioni dei termini chiare e semplici e supervisione dei concetti di base del glossario sono elementi fondamentali per aiutare i principianti. La tua esperienza come educatore può essere molto utile per creare delle voci del glossario efficaci; ci sono molti termini da definire che richiedono la tua attenzione. Scégline uno e datti da fare.
-
Aggiungi illustrazioni e/o schemi agli articoli (1 ora)
-
Come saprai, le illustrazioni sono una parte inestimabile di qualunque contenuto didattico. Ecco una cosa che spesso ci manca qui in MDN e la tua abilità può far la differenza in questa sezione. Scorri gli articoli privi di illustrazioni e scégline uno cui vuoi aggiungere la parte grafica.
-
Leggi e correggi un articolo didattico (2 ore)
-
Compito simile alla correzione delle voci del glossario (v. sopra), ma richiede maggior tempo dal momento che gli articoli sono generalmente più lunghi.
-
Scivi un nuovo articolo didattico (4 ore)
-
Ci servono articoli chiari e semplici sull'ecosistema Web e sugli argomenti inerenti di tipo funzionale. Dal momento che questi articoli didattici hanno lo scopo di essere soprattutto educativi e non di coprire letteralmente tutto quello che c'è da sapere, la tua esperienza riguardo cosa e come sia effettivamente da trattare sarà di grande aiuto.
-
Inventa esercizi, questionari o strumenti didattici interattivi (? ore)
-
Tutti i nostri articoli didattici prevedono materiale di "apprendimento attivo". Tale materiale consiste in contenuti interattivi o esercizi, che aiuteranno gli utenti ad apprendere come utilizzare ed espandere i concetti espressi nell'articolo in questione. Ci sono molti modi in cui tu puoi contribuire qui, dal creare quiz al comporre nuovi contenuti interattivi e modificabili su Thimble. Scatena la tua fantasia!
-
Crea percorsi didattici (? ore)
-
Al fine di fornire tutorials di facile comprensione e nella corretta progressione, ci occorre organizzare i contenuti in percorsi didattici: è un modo di raccogliere contenuti preesistenti e individuare ciò che ancora manca, così da proporre gli argomenti per nuovi articoli didattici ancora da scrivere.
-
diff --git a/files/it/learn/css/building_blocks/cascade_and_inheritance/index.html b/files/it/learn/css/building_blocks/cascade_and_inheritance/index.html new file mode 100644 index 0000000000..66702c1bdd --- /dev/null +++ b/files/it/learn/css/building_blocks/cascade_and_inheritance/index.html @@ -0,0 +1,87 @@ +--- +title: Cascata ed ereditarietà +slug: Conoscere_i_CSS/Cascata_ed_ereditarietà +tags: + - Conoscere_i_CSS +translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance +translation_of_original: Web/Guide/CSS/Getting_started/Cascading_and_inheritance +--- +

+

Questa pagina delinea come diversi fogli di stile interagiscano in cascata e come gli elementi ereditino lo stile dai loro elementi genitori. +

Verranno aggiunte delle informazioni al foglio di stile di esempio, modificando lo stile di molte parti del documento con una sola mossa. +

link title== Headline text ==== Informazioni: Cascata ed ereditarietà == +Lo stile finale di un elemento può essere definito in molti luoghi diversi, che possono intergire fra loro in modo complesso. +Questa complessa interazione rende i CSS molto potenti, ma può anche rendere una correzione confusa e difficile. +

Le tre sorgenti principali di informazioni sullo stile che generano la cascata sono: +

+ +

Lo stile dell'utente modifica lo stile predefinito del browser. Lo stile dell'autore del documento modifica ulteriormente lo stile. In questa guida tu sei l'autore del documento di esempio, e verrà considerato solo il foglio di stile dell'autore. +

+ +
Esempio +Quando leggi questo articolo della guida nel tuo browser Mozilla, parte dello stile che vedi proviene da quello predefinito del browser per l'HTML. Un altra parte potrebbe essere definita dalle impostazioni del browser nel menu Strumenti>Opzioni, o dal file userContent.css nel tuo profilo del browser. Un'altra parte deriva infine dal foglio di stile associato al documento dal server del wiki. +
+


+Quando apri il documento di esempio con il browser, gli elementi STRONG sono più marcati del resto del testo. Questo effetto deriva dallo stile predefinito del browser per l'HTML. +

Gli elementi STRONG sono rossi. Questo è stato definto dal tuo foglio di stile di esempio. +

Gli elementi STRONG inoltre ereditano gran parte dello stile dell'elemento P, poiché ne sono figli. Allo stesso modo l'elemento P eredita gran parte dello stile dall'elemento BODY. +

Negi stili in cascata, il foglio di stile dell'autore ha la precedenza, quindi viene il foglio dell'utente ed infine quello predefinito del browser. +

Per gli stili ereditati, lo stile proprio del nodo figlio ha la precedenza su quello ereditato dal genitore. +

Questo non è l'unico ordine di precedenze che viene applicato, ma lo riprenderemo più avanti nella guida. +

+ + +
Di più... +
I CSS forniscono un modo all'utente per prevalere sullo stile definito dall'autore del documento, utilizzando la parola chiave !important. +

Questo significa anche che l'autore del documento non può prevedere esattamente cosa vedrà l'utente. +

Per consocere tutti i dettagli circa la cascata e l'ereditarietà, guarda la sezione relativa a "Assegnare valori alle proprietà, Cascata ed ereditarietà"(EN) nelle specifiche dei CSS. +

+
+

Azione: Utilizzare l'ereditarietà

+

Modifica il tuo file CSS di esempio. +

Aggiungi la seguente linea facendo copia e incolla. +Non è molto importante dove viene incollata. In ogni caso è più logico aggiungerla all'inizio perché nel documento l'elemento P è genitore dell'elemento STRONG: +

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

Ora aggiorna il browser e nota i cambiamenti al docuemnto di esempio. +La sottolineatura influenza tutto il testo contenuto nel paragrafo, incluse le lettere iniziali. +L'elemento STRON ha ereditato lo stile sottolineato dall'elemento genitore P. +

Ma gli elementi STRONG continuano ad essere di colore rosso. Questo perché il colore rosso è lo stile proprio dell'elemento, che prevale sull'elemento blu dell'elemento P. +

+ + +
+ + +
Prima +
Cascading Style Sheets +
+		 + + +
Dopo +
Cascading Style Sheets +
+
+


+

+ + +
Esercizi +
Cambia il foglio di stile per fare in modo che solo le lettere rosse risultino sottolineate: + + +
Cascading Style Sheets +
+
+


+

+

Cos'altro?

+

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

Il foglio di stile d'esempio specifica lo stile per i tag P e STRONG modificandone lo stile per tutto il documento. La prossima pagina spiega come specificare lo stile in modo più selettivo: +I Selettori +

{{ languages( { "en": "en/CSS/Getting_Started/Cascading_and_inheritance", "fr": "fr/CSS/Premiers_pas/Cascade_et_h\u00e9ritage", "ja": "ja/CSS/Getting_Started/Cascading_and_inheritance", "pl": "pl/CSS/Na_pocz\u0105tek/Kaskadowo\u015b\u0107_i_dziedziczenie", "pt": "pt/CSS/Como_come\u00e7ar/Cascata_e_heran\u00e7a" } ) }} diff --git a/files/it/learn/css/building_blocks/selectors/index.html b/files/it/learn/css/building_blocks/selectors/index.html new file mode 100644 index 0000000000..cf0f6662cf --- /dev/null +++ b/files/it/learn/css/building_blocks/selectors/index.html @@ -0,0 +1,231 @@ +--- +title: selettori CSS +slug: Learn/CSS/Building_blocks/Selettori +tags: + - Attributo + - CSS + - Classe + - Impara + - Principiante + - Pseudo + - Selettori +translation_of: Learn/CSS/Building_blocks/Selectors +--- +
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}
+ +

Nei {{Glossary("CSS")}}, i selettori vengono usati per selezionare elementi {{glossary("HTML")}} della pagina web di cui vogliamo curare lo stile. Esiste una grande varietá di selettori CSS, rendendo possibile selezionare gli elementi con particolare accuratezza. In questo articolo e nelle sue sezioni ci soffermeremo nel dettaglio sui diversi tipi di selettori, osservandone il funzionamento.

+ + + + + + + + + + + + +
Prerequisiti:Conoscenze informatiche di base, istallazione di software fondamentali, conoscenze base di gestione dei file, basi di HTML (vedi Introduzione ad HTML) ed avere un'idea di base di come funzionano i CDD (vedi primi passi con i CSS).
Obbiettivo:Apprendere nel dettaglio il funzionamento dei selettori CSS.
+ +

Cos'é un selettore?

+ +

Hai giá incontrato i selettori prima di questo articolo: un selettore CSS corrisponde infatti alla prima parte di una regola e non é altro che un insieme di termini che dicono al browser quali elementi HTML devono essere selezionati in modo che vi si possano applicare le proprietá contenute dentro la regola. L'elemento o gli elementi selezionati tramite un selettore sono noti come soggetto del selettore.

+ +

Some code with the h1 highlighted.

+ +

Nei precedenti articoli hai incontrato diversi selettori e imparato che alcuni di essi effettuano la selezione in modi differenti — selezionando ad esempio tutti gli elementi h1 oppure una classe come .special.

+ +

Nei CSS, i selettori sono definiti nelle specifiche sui selettori CSS e come ogni parte dei CSS necessitano del supporto del browser per poter funzionare. La maggior parte dei selettori che incontrerai sono definiti in Level 3 Selectors specification (specifica sui selettori di livello 3),  la quale é una raccolta curata e condivisa e i selettori lí elencati hanno il pieno supporto della maggior parte dei browser.

+ +

Liste di selettori

+ +

Nel caso in cui tu abbia  piú elementi che condividano le stesse regole di CSS, allora piú selettori individuali possono essere combinati in una lista. Ad esempio, se mi trovo ad avere lo stesso CSS per un h1 ed anche per la classe .special, potrei scriverlo nel seguente modo.

+ +
h1 {
+  color: blue;
+}
+
+.special {
+  color: blue;
+}
+ +

Per sintetizzare questo codice posso unire i due selettori dentro una lista, separandoli con una virgola.

+ +
h1, .special {
+  color: blue;
+}
+ +

Sono ammessi spazi bianchi prima o dopo la virgola. Potresti considerare piú ordinato e leggibile il codice ponendo ogni selettore su una singola riga.

+ +
h1,
+.special {
+  color: blue;
+}
+ +

Dall'esempio precedente, prova a combinare i due selettori con la stessa dichiarazione. Dovresti ottenere lo stesso risultando visivo pur modificando la sintassi del codice.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1000)}} 

+ +

Quando raggruppi i selettori in quasto modo, se alcuni di essi non sono validi l'intera regola verrá ignorata.

+ +

Nell'esempio seguente, il selettore di classe non é corretto e pertanto la sua dichiarazione verrá ignorata, mentre il selettore h1 non presenta errori e la sua dichiarazione verrá eseguita correttamente.

+ +
h1 {
+  color: blue;
+}
+
+..special {
+  color: blue;
+}
+ +

Tuttavia se combinati, né il selettore h1 né il selettore di classe verranno considerati e l'intera regola sará quindi ignorata.

+ +
h1, ..special {
+  color: blue;
+}
+ +

Tipi di selettori

+ +

I selettori sono raggruppabili per tipo e conoscerne la classificazione é il primo passo per poter ricercare agevolmente quello giusto per ogni occorrenza. In questa sezione vedremo nel dettaglio i differenti gruppi di selettori.

+ +

Selettori di tipo, classe e ID

+ +

Questo gruppo include i selettori usati per gli elementi della pagina HTML come <h1>.

+ +
h1 { }
+ +

Include inoltre i selettori di classe:

+ +
.box { }
+ +

oppure di ID:

+ +
#unique { }
+ +

Selettori di attributo

+ +

Questo gruppo di selettori fornisce diversi modi per selezionare elementi tramite la presenza di un particolare attributo su di essi:

+ +
a[title] { }
+ +

Oppure seleziona basandosi sulla presenza di un attributo con uno specifico valore:

+ +
a[href="https://example.com"] { }
+ +

Pseudo-classi e pseudo-elementi

+ +

Questo gruppo di selettori include le pseudo-classi, le cui selezioni hanno effetto solo in determinate condizioni. Ad esempio, la pseudo classe :hover seleziona un elemento solo quando su questo vi passa sopra il puntatore del mouse:

+ +
a:hover { }
+ +

Include inoltre gli pseudo-elementi, i quali selezionano solo una parte dell'elemento in questione. Ad esempio, ::first-line seleziona sempre la prima riga di testo di un elemento (un elemento <p> nell'esempio seguente), come se questa fosse messa dentro un blocco  <span>  e selezionata.

+ +
p::first-line { }
+ +

Combinatori

+ +

L'ultimo gruppo di selettori combina gli altri selettori in modo da poter selezionare piú elementi della pagina. Il seguente esempio seleziona i paragrafi che sono figli di <article> utilizzando il combinatore (>):

+ +
article > p { }
+ +

Prossimo passo

+ +

Puoi dare un'occhiata alla seguente tabella riassuntiva sui selettori, visitare i link di questa guida o di MDN, relativi al tipo di selettore corrispondente, oppure proseguire con la tua esplorazione alla scoperta dei selettori di tipo, classe e id.

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}

+ +

Tabella riassuntiva dei selettori

+ +

La tabella sottostante ti fornisce una panoramica dei selettori incontrati con i relativi link alle pagine di questa guida che mostrano come usarli. Vi sono inoltre anche dei link alle pagine MDN del corrispondente tipo di selettore dove é possibile ottenere informazioni su supporto e compatibilitá dei principali browser. Puoi usare questa tabella come punto d'appoggio per ripassare o ricercare i selettori o, piú in generale, mentre ti eserciti coi CSS.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SelettoreEsempioTutorial sui CSS
Selettore di tipoh1 {  }Selettore di tipo
Selettore universale* {  }Selettore universale
Selettore di classe.box {  }Selettore di classe
Selettore di ID#unique { }Selettore di ID
Selettore di attributoa[title] {  }Selettore di attributo
Pseudo-classip:first-child { }Pseudo-classi
Pseudo-elementip::first-line { }Pseudo-elementi
Combinatore di discendenzaarticle pCombinatore di discendenza
Combinatore di figliarticle > pCombinatore di figli
Combinatore di fratelli adiacentih1 + pCombinatore di fratelli adiacenti
Combinatore di fratelli genericih1 ~ pCombinatore di fratelli generici
+ +

In this module

+ +
    +
  1. Cascade and inheritance
    2. +
  2. CSS selectors + +
    3. +
  3. The box model
    4. +
  4. Backgrounds and borders
    5. +
  5. Handling different text directions
    6. +
  6. Overflowing content
    7. +
  7. Values and units
    8. +
  8. Sizing items in CSS
    9. +
  9. Images, media, and form elements
    10. +
  10. Styling tables
    11. +
  11. Debugging CSS
    12. +
  12. Organizing your CSS
    13. +
diff --git a/files/it/learn/css/building_blocks/selettori/index.html b/files/it/learn/css/building_blocks/selettori/index.html deleted file mode 100644 index cf0f6662cf..0000000000 --- a/files/it/learn/css/building_blocks/selettori/index.html +++ /dev/null @@ -1,231 +0,0 @@ ---- -title: selettori CSS -slug: Learn/CSS/Building_blocks/Selettori -tags: - - Attributo - - CSS - - Classe - - Impara - - Principiante - - Pseudo - - Selettori -translation_of: Learn/CSS/Building_blocks/Selectors ---- -
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}
- -

Nei {{Glossary("CSS")}}, i selettori vengono usati per selezionare elementi {{glossary("HTML")}} della pagina web di cui vogliamo curare lo stile. Esiste una grande varietá di selettori CSS, rendendo possibile selezionare gli elementi con particolare accuratezza. In questo articolo e nelle sue sezioni ci soffermeremo nel dettaglio sui diversi tipi di selettori, osservandone il funzionamento.

- - - - - - - - - - - - -
Prerequisiti:Conoscenze informatiche di base, istallazione di software fondamentali, conoscenze base di gestione dei file, basi di HTML (vedi Introduzione ad HTML) ed avere un'idea di base di come funzionano i CDD (vedi primi passi con i CSS).
Obbiettivo:Apprendere nel dettaglio il funzionamento dei selettori CSS.
- -

Cos'é un selettore?

- -

Hai giá incontrato i selettori prima di questo articolo: un selettore CSS corrisponde infatti alla prima parte di una regola e non é altro che un insieme di termini che dicono al browser quali elementi HTML devono essere selezionati in modo che vi si possano applicare le proprietá contenute dentro la regola. L'elemento o gli elementi selezionati tramite un selettore sono noti come soggetto del selettore.

- -

Some code with the h1 highlighted.

- -

Nei precedenti articoli hai incontrato diversi selettori e imparato che alcuni di essi effettuano la selezione in modi differenti — selezionando ad esempio tutti gli elementi h1 oppure una classe come .special.

- -

Nei CSS, i selettori sono definiti nelle specifiche sui selettori CSS e come ogni parte dei CSS necessitano del supporto del browser per poter funzionare. La maggior parte dei selettori che incontrerai sono definiti in Level 3 Selectors specification (specifica sui selettori di livello 3),  la quale é una raccolta curata e condivisa e i selettori lí elencati hanno il pieno supporto della maggior parte dei browser.

- -

Liste di selettori

- -

Nel caso in cui tu abbia  piú elementi che condividano le stesse regole di CSS, allora piú selettori individuali possono essere combinati in una lista. Ad esempio, se mi trovo ad avere lo stesso CSS per un h1 ed anche per la classe .special, potrei scriverlo nel seguente modo.

- -
h1 {
-  color: blue;
-}
-
-.special {
-  color: blue;
-}
- -

Per sintetizzare questo codice posso unire i due selettori dentro una lista, separandoli con una virgola.

- -
h1, .special {
-  color: blue;
-}
- -

Sono ammessi spazi bianchi prima o dopo la virgola. Potresti considerare piú ordinato e leggibile il codice ponendo ogni selettore su una singola riga.

- -
h1,
-.special {
-  color: blue;
-}
- -

Dall'esempio precedente, prova a combinare i due selettori con la stessa dichiarazione. Dovresti ottenere lo stesso risultando visivo pur modificando la sintassi del codice.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1000)}} 

- -

Quando raggruppi i selettori in quasto modo, se alcuni di essi non sono validi l'intera regola verrá ignorata.

- -

Nell'esempio seguente, il selettore di classe non é corretto e pertanto la sua dichiarazione verrá ignorata, mentre il selettore h1 non presenta errori e la sua dichiarazione verrá eseguita correttamente.

- -
h1 {
-  color: blue;
-}
-
-..special {
-  color: blue;
-}
- -

Tuttavia se combinati, né il selettore h1 né il selettore di classe verranno considerati e l'intera regola sará quindi ignorata.

- -
h1, ..special {
-  color: blue;
-}
- -

Tipi di selettori

- -

I selettori sono raggruppabili per tipo e conoscerne la classificazione é il primo passo per poter ricercare agevolmente quello giusto per ogni occorrenza. In questa sezione vedremo nel dettaglio i differenti gruppi di selettori.

- -

Selettori di tipo, classe e ID

- -

Questo gruppo include i selettori usati per gli elementi della pagina HTML come <h1>.

- -
h1 { }
- -

Include inoltre i selettori di classe:

- -
.box { }
- -

oppure di ID:

- -
#unique { }
- -

Selettori di attributo

- -

Questo gruppo di selettori fornisce diversi modi per selezionare elementi tramite la presenza di un particolare attributo su di essi:

- -
a[title] { }
- -

Oppure seleziona basandosi sulla presenza di un attributo con uno specifico valore:

- -
a[href="https://example.com"] { }
- -

Pseudo-classi e pseudo-elementi

- -

Questo gruppo di selettori include le pseudo-classi, le cui selezioni hanno effetto solo in determinate condizioni. Ad esempio, la pseudo classe :hover seleziona un elemento solo quando su questo vi passa sopra il puntatore del mouse:

- -
a:hover { }
- -

Include inoltre gli pseudo-elementi, i quali selezionano solo una parte dell'elemento in questione. Ad esempio, ::first-line seleziona sempre la prima riga di testo di un elemento (un elemento <p> nell'esempio seguente), come se questa fosse messa dentro un blocco  <span>  e selezionata.

- -
p::first-line { }
- -

Combinatori

- -

L'ultimo gruppo di selettori combina gli altri selettori in modo da poter selezionare piú elementi della pagina. Il seguente esempio seleziona i paragrafi che sono figli di <article> utilizzando il combinatore (>):

- -
article > p { }
- -

Prossimo passo

- -

Puoi dare un'occhiata alla seguente tabella riassuntiva sui selettori, visitare i link di questa guida o di MDN, relativi al tipo di selettore corrispondente, oppure proseguire con la tua esplorazione alla scoperta dei selettori di tipo, classe e id.

- -

{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}

- -

Tabella riassuntiva dei selettori

- -

La tabella sottostante ti fornisce una panoramica dei selettori incontrati con i relativi link alle pagine di questa guida che mostrano come usarli. Vi sono inoltre anche dei link alle pagine MDN del corrispondente tipo di selettore dove é possibile ottenere informazioni su supporto e compatibilitá dei principali browser. Puoi usare questa tabella come punto d'appoggio per ripassare o ricercare i selettori o, piú in generale, mentre ti eserciti coi CSS.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SelettoreEsempioTutorial sui CSS
Selettore di tipoh1 {  }Selettore di tipo
Selettore universale* {  }Selettore universale
Selettore di classe.box {  }Selettore di classe
Selettore di ID#unique { }Selettore di ID
Selettore di attributoa[title] {  }Selettore di attributo
Pseudo-classip:first-child { }Pseudo-classi
Pseudo-elementip::first-line { }Pseudo-elementi
Combinatore di discendenzaarticle pCombinatore di discendenza
Combinatore di figliarticle > pCombinatore di figli
Combinatore di fratelli adiacentih1 + pCombinatore di fratelli adiacenti
Combinatore di fratelli genericih1 ~ pCombinatore di fratelli generici
- -

In this module

- -
    -
  1. Cascade and inheritance
    2. -
  2. CSS selectors - -
    3. -
  3. The box model
    4. -
  4. Backgrounds and borders
    5. -
  5. Handling different text directions
    6. -
  6. Overflowing content
    7. -
  7. Values and units
    8. -
  8. Sizing items in CSS
    9. -
  9. Images, media, and form elements
    10. -
  10. Styling tables
    11. -
  11. Debugging CSS
    12. -
  12. Organizing your CSS
    13. -
diff --git a/files/it/learn/css/first_steps/how_css_is_structured/index.html b/files/it/learn/css/first_steps/how_css_is_structured/index.html new file mode 100644 index 0000000000..7942e9a4a9 --- /dev/null +++ b/files/it/learn/css/first_steps/how_css_is_structured/index.html @@ -0,0 +1,157 @@ +--- +title: CSS leggibili +slug: Conoscere_i_CSS/CSS_leggibili +tags: + - Conoscere_i_CSS +translation_of: Learn/CSS/Introduction_to_CSS/Syntax#Beyond_syntax_make_CSS_readable +translation_of_original: Web/Guide/CSS/Getting_started/Readable_CSS +--- +

+

In questa pagina si parla dello stile e della grammatica del linguaggio CSS stesso. +

Impareremo a cambiare l'aspetto del file CSS di prova per renderlo più leggibile. +

+

Informazioni: CSS leggibili

+

E' possibile aggiungere spazi bianchi e commenti ai propri fogli di stile al fine di renderli più leggibili. +Inoltre si possono raggruppare insieme i selettori quando viene applicata a diversi elementi la stessa regola di stile. +

+

Spazi bianchi

+

Spazi bianchi significa proprio spaziatura, tabulazione e nuove linee. +Si possono aggiungere degli spazi bianchi per rendere i fogli di stile più leggibili. +

Al momento il file CSS di prova ha una regola per ogni linea ed il minimo degli spazi bianchi. In un foglio di stile complesso questa struttura sarebbe molto difficile da decifrare, rendendo la manutenzione e la modifica del foglio di stile alquanto faticose. +

La struttura da scegliere generalmente risponde alle preferenze personali dell'autore, ma in un progetto condiviso potrebbero esistere delle particolari convenzioni comuni. +

+ + +
Esempi +
Alcuni autori preferisono una struttura molto compatta (simile a quella utilizzata fin ora per il file di esempio), dividendo la linea solo quando diventa troppo lunga: +
+.carrot {color: orange; text-decoration: underline; font-style: italic;}
+
+

Altri preferiscono il metodo "una proprietà per linea": +

+
+
.carrot
+{
+color: orange;
+text-decoration: underline;
+font-style: italic;
+}
+
+
+

Altri ancora utilizzano l'indentazione—due, quattro spazi, o una tabulazione sono comuni: +

+
+
.carrot {
+  color: orange;
+  text-decoration: underline;
+  font-style: italic;
+}
+
+
+

Alcuni autori addirittura preferiscono allineare tutto verticalmente (ma una struttura simile risulta difficile da mantenere): +

+
+
.carrot
+    {
+    color           : orange;
+    text-decoration : underline;
+    font-style      : italic;
+    }
+
+
+

Alcuni usano la tabulazione. Altri solo gli spazi. +

+
+

Commenti

+

I commenti nei CSS iniziano con /* e terminano con */. +

I commenti possono essere utilizzati sia per scrivere un vero e proprio commento al foglio di stile, sia per isolare temporaneamente alcune parti di codice per scopi di test. +

Per isolare una parte del foglio di stile è sufficiente porre quella parte all'interno di un commento. In tal modo il browser la ignorerà. Occorre prestare molta attenzione al punto di inizio e di fine del commento. +Il resto del documento deve continuare ad avere una sintassi corretta. +

+ + +
Esempio +
Un commento vero e proprio: +
+
/* stile per la lettere iniziale C del primo paragrafo */
+.carrot {
+  color:            orange;
+  text-decoration:  underline;
+  font-style:       italic;
+  }
+
+
+

Un isolamento: +

+
+
/* isolo una porzione del codice
+.carrot {
+  color:            orange;
+  text-decoration:  underline;
+  font-style:       italic;
+  }
+ */
+
+
+
+

Raggruppare i selettori

+

Se molti elementi hanno lo stesso stile è possibile raggruppare i selettori creando un gruppo separato da virgole. +La dichiarazione verrà applicata a tutti gli elementi selezionati. +

Altrove nel foglio di stile sarà anche possibile trattare individualmente gli stessi selettori, per applicare delle regole di stile personalizzate. +

+ + +
Esempi +
Questa regola rende gli elementi H1, H2 e H3 dello stesso colore. +

E' comodo indicare tale colore in un solo posto per rendere più agevole e veloce l'eventuale modifica. +

+
+
/* colore dei titoli */
+h1, h2, h3 {color: navy;}
+
+
+
+

Azione: Aggiungere commenti e migliorare la struttura

+

Modifica il file CSS e assicurati che al suo interno contenga le seguenti regole (in qualsiasi ordine): +

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

Rendi il foglio di stile più leggibile strutturandolo nel modo che ritieni più logico ed aggiungendo spazi bianchi e commenti dove pare opportuno. +

Salva il file ed aggiorna la finestra del browser per assicurarti che i cambiamenti effettuati non influiscano sul funzionamento del foglio di stile: +

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


+

+ + +
Esercizi +
Isola una parte del foglio di stile, senza modificare nient'altro, per rendere la prima lettera del documento rossa: + + + + +
Cascading Style Sheets +
Cascading Style Sheets +
+

(Esiste più di un modo per ottenere questo risultato.) +

+
+


+

+

Cos'altro?

+

Il foglio di stile dell'esempio utilizza solamente il testo corsivo (italic) o il testo sottolineato (underline). +La prossima pagina della guida spiega ulteriori modi per specificare l'aspetto del testo in un documento: +Stili del testo +

{{ languages( { "en": "en/CSS/Getting_Started/Readable_CSS", "fr": "fr/CSS/Premiers_pas/Des_CSS_lisibles", "pl": "pl/CSS/Na_pocz\u0105tek/Czytelny_CSS", "pt": "pt/CSS/Como_come\u00e7ar/CSS_leg\u00edvel" } ) }} diff --git a/files/it/learn/css/first_steps/how_css_works/index.html b/files/it/learn/css/first_steps/how_css_works/index.html new file mode 100644 index 0000000000..9e65e269af --- /dev/null +++ b/files/it/learn/css/first_steps/how_css_works/index.html @@ -0,0 +1,114 @@ +--- +title: Cosa è CSS +slug: Conoscere_i_CSS/Che_cosa_sono_i_CSS +translation_of: Learn/CSS/First_steps/How_CSS_works +translation_of_original: Web/Guide/CSS/Getting_started/What_is_CSS +--- +

{{ CSSTutorialTOC() }}

+ +

{{previousPage("/it/docs/CSS/Getting_Started", "Getting started")}} Questa è la prima sezione dell'esercitazione "Iniziare (Esercitazione di CSS)" che spiega cosa è CSS. Si creerà un semplice documento su cui lavorare nelle pagine seguenti

+ +

Informazione: Cosa è CSS?

+ +

Cascading Style Sheets (CSS) è un linguaggio per specificare come i documenti sono presentati all'utente.

+ +

Un documento è un insieme di informazioni strutturate utilizzando un linguaggio a marcatori.

+ +
+
Esempi
+ +

Una pagine web come quella che si legge è un documento.
+ Le informazioni che si vedono in una pagina web sono strutturare utilizzando il linguaggio a marcatori HTML  (HyperText Markup Language).
+ Le finestre di dialogo, anche chiamate finestre modali, di una applicazione sono spesso documenti.
+ Tali finestre modali potrebbero essere strutturate utilizzano un linguaggio a marcatori, come XUL. E' questo il caso frequente delle applicazioni di Mozilla, ma non è il caso comune.

+
+ +

In questa esercitazione, i riquadri titolati Maggiori dettagli come quello seguente contengono informazioni facoltative. Se hai fretta di andare avanti con l'esercitazione potresti saltarli, e forse tornare a leggerli più tardi. Diversamente leggerli quando li incontri, e forse seguire i link per imparare di più.

+ +
+
Maggiori dettagli
+ +

Un documento non è un file. Potrebbe o non potrebbe essere memorizzato in un file.

+ +

Per esempio, il documento che stai leggendo non è memorizzaotin un file. Quando il browser web richiede questa pagina, il server interroga un database e genera il documento, traendone le sue parti da molti file. D'altra parte, in questa esercitazione si lavora con documenti che sono memorizzati nei file.

+ +

Per maggiori informazioni sui documenti e i linguaggi a amrcatori, si vedano altre parti di questo sito web—per esempio:

+ + + + + + + + + + + + + + + + + + + + +
HTMLper le pagine web
XMLper i documenti strutturati in generale
SVGper la grafica
XULper le interfacce utente in Mozillafor user interfaces in Mozilla
+ +

Nella Parte II di questa esercitazione si vedranno esempi di questi linguaggi a marcatore.

+
+ +

Presentare un documento ad un utente significa convertirlo in una forma utilizzabile dall'essere umano. Browser, come FireFox, Chrome o Internet Explorer, sono progettati per presentare visivamente i documenti — per esempio, sullo schermo di un computer, un proiettore o una stampante.

+ + + + + + + + +
 
+
Maggiori dettagli
+ CSS non è solo per i browser, e non solo per presentazioni visive. Nella terminologia fomale di CSS, il programma che presenta un documento a un utente è chiamatouser agent (UA). Un browser è solo un tipo di UA. Comunque, nella Parte I dell'esercitazione si lavora esclusivamente con CSS in un browser. + +

Per qualche definizione formale della terminologia relativa a CSS, vedere le Definizioni nelle specifiche CSS.

+
+ +

Azione: Creare un documento

+ +

Utilizzare il proprio computer per creare una nuova cartella ed un nuovo file di testo al suo interno. Il file conterrà il tuo documento.
+ Copia ed incolla il codice HTML mostrato sotto. Salva il file utilizzando il nome doc1.html

+ +
<!DOCTYPE html>
+<html>
+  <head>
+  <meta charset="UTF-8">
+  <title>Sample document</title>
+  </head>
+
+  <body>
+    <p>
+      <strong>C</strong>ascading
+      <strong>S</strong>tyle
+      <strong>S</strong>heets
+    </p>
+  </body>
+</html>
+ +

Nel proprio browser, aprire una nuova scheda o una nuova finestra, e aprirvi il file.

+ +

Si dovrebbe vedere il testo con le lettere iniziali in grassetto, come questo:

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

Quello che vedi nel tuo browser potrebbe non apparire esattametne uguale a questo, a causa delle impostazioni utilizzate dal browser e da questo wiki. Se ci sono differenze di font, spaziatura e colori, non ha importanza.

+ +

E poi?

+ +

{{nextPage("/en-US/docs/CSS/Getting_Started/Why_use_CSS", "Why use CSS?")}}Il documento ancora non utilizza CSS. Nella prossima sezione si utilizzerà CSS per specificare lo stile.

diff --git a/files/it/learn/css/first_steps/index.html b/files/it/learn/css/first_steps/index.html new file mode 100644 index 0000000000..106bf156d6 --- /dev/null +++ b/files/it/learn/css/first_steps/index.html @@ -0,0 +1,43 @@ +--- +title: Iniziare (Esercitazione di CSS) +slug: Conoscere_i_CSS +translation_of: Learn/CSS/First_steps +translation_of_original: Web/Guide/CSS/Getting_started +--- +

Rivolto ai principianti assoluti, questa esercitazione di CSS per principianti presenta il Cascading Style Sheets (CSS). Guida l'utente attraverso le caratteristiche di base del linguaggio con esempi pratici che possono essere provati sul proprio computer e illustra le caratteristiche standard di CSS che funzionano nei moderni browser.

+ +

Questa esercitazione è principalmente per principianti di CSS, ma va bene anche per chi ha qualche conoscenza base di CSS. Se sei un esperto di CSS qusta esercitazione probabilmente non è molto utile, la pagina principale di CSS elenca risorse più avanzate.

+ + + +

Di cosa hai bisogno per iniziare?

+ +

Per ottenere il massimo da questa esercitazione, hai bisogno di un editor per file di testo e un moderno browser. Devi anche avere una minima conoscenza del loro utilizzo.

+ +

Se non vuoi modificare i file, allora puoi anche solo leggere l'esercitazione e guardare le immagini, ma è il modo meno efficace per imparare.

+ +

Nota:  CSS fornisce un modo di lavorare con il colore, quindi parte di questa esercitazione dipende dal colore. Puoi utilizzare queste parti dell'esercitazione semplicemente se ha un display a colori e una normale visione dei colori.

+ +

Come utilizzare questa esercitazione

+ +

Per utilizzare questa esercitazione, leggi le pagine attentamente e in sequenza. Se salti una pagina, ti potresti trovare in difficoltà nel compredere le pagine successive.

+ +

In ogni pagina, puoi usare la sezione Informazioni per capire come funziona CSS. Usare la sezione Azione per provare ad utilizzare CSS sul proprio computer.

+ +

Per mettere alla prova la propria comprensione, cogli la sfida alla fine di ogni pagina. Le soluzioni alle sfide sono linkate sotto le sfide stesse, quindi non si ha bisogno di guardarle se non lo si vuole.

+ +

Per comprendere CSS in maggiore profondità, leggere le informazioni che si trovano nei box titolati Maggiori dettagli. Utilizzare i collegamenti presenti per trovare informazioni di riferimento su CSS.

+ +

Esercitazione Parte II

+ +

Una seconda parte dell'esercitazione fornisce esempi che mostrano la visibilità di CSS utilizzato con altre tecnologie web e Mozilla

+ +
    +
  1. JavaScript
    2. +
  2. Grafica SVG
    3. +
  3. Dati XML
    4. +
  4. Collegamento XBL
    5. +
  5. Interfacce utente XUL
    6. +
+ +

 

diff --git a/files/it/learn/css/styling_text/definire_stili_link/index.html b/files/it/learn/css/styling_text/definire_stili_link/index.html deleted file mode 100644 index b6bdc7a6fa..0000000000 --- a/files/it/learn/css/styling_text/definire_stili_link/index.html +++ /dev/null @@ -1,438 +0,0 @@ ---- -title: Definire gli stili dei link -slug: Learn/CSS/Styling_text/Definire_stili_link -translation_of: Learn/CSS/Styling_text/Styling_links ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}
- -

Quando si vogliono assegnare degli stili ai link, è importante capire come fare uso delle pseudo-classi per definire efficacemente gli stili dei vari stati dei link, e come attribuire gli stili ai link per il loro uso nei più comuni elementi di interfaccia, come i menu di navigazione e le schede. Nel seguente articolo illustreremo tutti questi argomenti.

- - - - - - - - - - - - -
Prerequisiti:Conoscenza informatica di base, elementi di HTML (leggi Introduction to HTML), elementi di CSS (leggi Introduction to CSS), Fondamenti di testo e font con CSS.
Obbiettivo:Imparare a definire gli stili degli stati dei link, e come utilizzarli efficacemente per i più comuni elementi di interfaccia come i menu di navigazione.
- - - -

Abbiamo visto come i link possano essere impiegati nel tuo codice HTML in accordo con le best practices viste in Creare gli hyperlink. Nell'articolo aumenteremo ulteriormente questa conoscenza, mostrandoti le best practices per la definizione degli stili dei link.

- - - -

La prima cosa da capire è il concetto di stato dei link — esistono stati differenti dei link, ai quali è possibile attribuire gli stili utilizzando differenti pseudo-classi:

- - - -

Stili predefiniti

- -

L'esempio seguente mostra il comportamento predefinito di un link (in questo caso il CSS aumenta il font e centra il testo per risaltarlo maggiormente).

- -
<p><a href="#">A simple link</a></p>
-
- -
p {
-  font-size: 2rem;
-  text-align: center;
-}
- -

{{ EmbedLiveSample('Default_styles', '100%', 120) }}

- -
-

Nota: Tutti i link inseriti negli esempi della pagina sono simulati — sono stati inseriti i simboli # (cancelletto) o $ (sterlina) al posto dell'URL reale. Questo perché se fossero inclusi gli URL reali, cliccando su di essi, si interromperebbero gli esempi (si potrebbe verificare un errore, o caricare una pagina da cui non si potrebbe tornare indietro). Il # (cancelletto) invece si connette esclusivamente alla pagina corrente.

-
- -

Quando esplorerete gli stili predefiniti, si noteranno alcune cose:

- - - -

E' abbastanza interessante il fatto che questi stili predefiniti sono relativamente gli stessi rispetto a quelli usciti nei primi tempi dei browser verso la metà degli anni 90. Questo perché gli utenti conoscono e si aspettano questo comportamento — se i link avessero stili differenti da questi, confonderebbero un sacco di persone. Questo non significa che non si debbano definire gli stili del tutto, ma solo che non ci si deve allontanare troppo dalla visualizzazione che gli utenti si aspettano. Si dovrebbe almeno:

- - - -

Gli stili predefiniti possono essere modificati o disattivati utilizzando le seguenti proprietà dei CSS:

- - - -
-

Nota: tu non sei limitato alle suddette proprietà per definire gli stili dei tuoi link — sentiti libero di utilizzare le proprietà che più ti piacciono. Cerca solo di non diventare troppo fantasioso !

-
- -

Definiamo qualche stile

- -

Ora che abbiamo visto qualche dettaglio sugli stati predefiniti, diamo uno sguardo ad un tipico set di stili dei link.

- -

Per cominciare, scriviamo il nostro set di stili vuoto:

- -
a {
-
-}
-
-
-a:link {
-
-}
-
-a:visited {
-
-}
-
-a:focus {
-
-}
-
-a:hover {
-
-}
-
-a:active {
-
-}
- -

Questo ordine è importante perché gli stili dei link si sovrappongono l'uno sull'altro, per esempio gli stili definiti nella prima regola si applicheranno a tutti quelli seguenti, e quando si attiva un link, ci si passa anche sopra con il mouse. Se si indicano nell'ordine sbagliato, le cose potrebbero non lavorare nel verso giusto.  Per ricordare questo ordine, si può provare ad usare, come aiuto mnemonico, LoVe Fears HAte.

- -

Adesso si aggiungano alcune altre impostazioni per una appropriata definizione degli stili:

- -
body {
-  width: 300px;
-  margin: 0 auto;
-  font-size: 1.2rem;
-  font-family: sans-serif;
-}
-
-p {
-  line-height: 1.4;
-}
-
-a {
-  outline: none;
-  text-decoration: none;
-  padding: 2px 1px 0;
-}
-
-a:link {
-  color: #265301;
-}
-
-a:visited {
-  color: #437A16;
-}
-
-a:focus {
-  border-bottom: 1px solid;
-  background: #BAE498;
-}
-
-a:hover {
-  border-bottom: 1px solid;
-  background: #CDFEAA;
-}
-
-a:active {
-  background: #265301;
-  color: #CDFEAA;
-}
- -

Forniamo anche il seguente esempio HTML a cui applicare il CSS:

- -
<p>There are several browsers available, such as <a href="#">Mozilla
-Firefox</a>, <a href="#">Google Chrome</a>, and
-<a href="#">Microsoft Edge</a>.</p>
- -

Mettendoli insieme il risultato sarà questo:

- -

{{ EmbedLiveSample('Styling_some_links', '100%', 150) }}

- -

Quindi che cosa abbiamo fatto qui? Il risultato è certamente differente rispetto allo stile predefinito, ma propone ancora un'esperienza abbastanza familiare per gli utenti che sanno cosa sta succedendo:

- - - -

Active learning: Definisci i tuoi stili

- -

In questa sessione di active learning, ci piacerebbe che tu prendessi il nostro set di regole vuoto e aggiungessi le tue dichiarazioni per rendere i link veramente mitici. Usa la tua immaginazione e scatenati. Siamo sicuri che ti potrà venire in mente qualcosa di più fantasioso e funzionale rispetto al nostro esempio sopra.

- -

Se fai un errore, puoi sempre ripartire usando il pulsante Reset. E se rimani bloccato, clicca sul bottone Show solution per inserire l'esempio che ti abbiamo mostrato sopra.

- - - -

{{ EmbedLiveSample('Playable_code', 700, 800) }}

- - - -

Una pratica comune consiste nell'includere le icone sui link, per fornire più di un indicatore per quanto riguarda il tipo di contenuto a cui punta il link. Vediamo sotto un esempio molto semplice che associa un'icona ad un link esterno (sono i link che collegano ad altri siti). In genere tale icona è rappresentata come una piccola freccia che indica fuori da un box — per questo esempio, useremo il grande esempio fornito da icons8.com.

- -

Guardiamo l'HTML e il CSS che ci daranno l'effetto che vogliamo. Per prima cosa, abbiamo del semplice HTML da definire:

- -
<p>For more information on the weather, visit our <a href="#">weather page</a>,
-look at <a href="#">weather on Wikipedia</a>, or check
-out <a href="#">weather on Extreme Science</a>.</p>
- -

Quindi il CSS:

- -
body {
-  width: 300px;
-  margin: 0 auto;
-  font-family: sans-serif;
-}
-
-p {
-  line-height: 1.4;
-}
-
-a {
-  outline: none;
-  text-decoration: none;
-  padding: 2px 1px 0;
-}
-
-a:link {
-  color: blue;
-}
-
-a:visited {
-  color: purple;
-}
-
-a:focus, a:hover {
-  border-bottom: 1px solid;
-}
-
-a:active {
-  color: red;
-}
-
-a[href*="http"] {
-  background: url('https://mdn.mozillademos.org/files/12982/external-link-52.png') no-repeat 100% 0;
-  background-size: 16px 16px;
-  padding-right: 19px;
-}
- -

{{ EmbedLiveSample('Including_icons_on_links', '100%', 150) }}

- -

So what's going on here? We'll skip over most of the CSS, as it's just the same information you've looked at before. The last rule however is interesting — here we are inserting a custom background image on external links in a similar manner to how we handled custom bullets on list items in the last article — this time however we are using {{cssxref("background")}} shorthand instead of the individual properties. We set the path to the image we want to insert, specify no-repeat so we only get one copy inserted, and then specify the position as 100% of the way over to the right of the text content, and 0 pixels from the top.

- -

We also use {{cssxref("background-size")}} to specify the size we want the background image to be shown at — it is useful to have a larger icon and then resize it like this as needed for responsive web design purposes. This does however only work with IE 9 and later, so if you need to support those older browsers, you'll just have to resize the image and insert it as is.

- -

Finally, we set some {{cssxref("padding-right")}} on the links to make space for the background image to appear in, so we aren't overlapping it with the text.

- -

A final word — how did we select just external links? Well, if you are writing your HTML links properly, you should only be using absolute URLs for external links — it is more efficient to use relative links to link to other parts of your own site. The text "http" should therefore only appear in external links, and we can select this with an attribute selector: a[href*="http"] selects {{htmlelement("a")}} elements, but only if they have an {{htmlattrxref("href","a")}} attribute with a value that contains "http" somewhere inside it.

- -

So that's it — try revisiting the active learning section above and trying this new technique out!

- -
-

Note: Don't worry if you are not familiar with backgrounds and responsive web design yet; these are explained in other places.

-
- - - -

The tools you've explored so far in this article can also be used in other ways. For example, states like hover can be used to style many different elements, not just links — you might want to style the hover state of paragraphs, list items, or other things.

- -

In addition, links are quite commonly styled to look and behave like buttons in certain circumstances — a website navigation menu is usually marked up as a list containing links, and this can be easily styled to look like a set of control buttons or tabs that provide the user with access to other parts of the site. Let's explore how.

- -

First, some HTML:

- -
<ul>
-  <li><a href="#">Home</a></li><li><a href="#">Pizza</a></li><li><a href="#">Music</a></li><li><a href="#">Wombats</a></li><li><a href="#">Finland</a></li>
-</ul>
- -

And now our CSS:

- -
body,html {
-  margin: 0;
-  font-family: sans-serif;
-}
-
-ul {
-  padding: 0;
-  width: 100%;
-}
-
-li {
-  display: inline;
-}
-
-a {
-  outline: none;
-  text-decoration: none;
-  display: inline-block;
-  width: 19.5%;
-  margin-right: 0.625%;
-  text-align: center;
-  line-height: 3;
-  color: black;
-}
-
-li:last-child a {
-  margin-right: 0;
-}
-
-a:link, a:visited, a:focus {
-  background: yellow;
-}
-
-a:hover {
-  background: orange;
-}
-
-a:active {
-  background: red;
-  color: white;
-}
- -

This gives us the following result:

- -

{{ EmbedLiveSample('Styling_links_as_buttons', '100%', 100) }}

- -

Let's explain what's going on here, focusing on the most interesting parts:

- - - -
-

Note: You may have noticed that the list items in the HTML are all put on the same line as each other — this is done because spaces/line breaks in between inline block elements create spaces on the page, just like the spaces in between words, and such spaces would break our horizontal navigation menu layout. So we've removed the spaces. You can find more information about this problem (and solutions) at Fighting the space between inline block elements.

-
- -

Summary

- -

We hope this article has provided you with all you'll need to know about links — for now! The final article in our Styling text module details how to use custom fonts on your websites, or web fonts as they are better known.

- -

{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}

- -

 

- -

In this module

- - - -

 

diff --git a/files/it/learn/css/styling_text/styling_links/index.html b/files/it/learn/css/styling_text/styling_links/index.html new file mode 100644 index 0000000000..b6bdc7a6fa --- /dev/null +++ b/files/it/learn/css/styling_text/styling_links/index.html @@ -0,0 +1,438 @@ +--- +title: Definire gli stili dei link +slug: Learn/CSS/Styling_text/Definire_stili_link +translation_of: Learn/CSS/Styling_text/Styling_links +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}
+ +

Quando si vogliono assegnare degli stili ai link, è importante capire come fare uso delle pseudo-classi per definire efficacemente gli stili dei vari stati dei link, e come attribuire gli stili ai link per il loro uso nei più comuni elementi di interfaccia, come i menu di navigazione e le schede. Nel seguente articolo illustreremo tutti questi argomenti.

+ + + + + + + + + + + + +
Prerequisiti:Conoscenza informatica di base, elementi di HTML (leggi Introduction to HTML), elementi di CSS (leggi Introduction to CSS), Fondamenti di testo e font con CSS.
Obbiettivo:Imparare a definire gli stili degli stati dei link, e come utilizzarli efficacemente per i più comuni elementi di interfaccia come i menu di navigazione.
+ + + +

Abbiamo visto come i link possano essere impiegati nel tuo codice HTML in accordo con le best practices viste in Creare gli hyperlink. Nell'articolo aumenteremo ulteriormente questa conoscenza, mostrandoti le best practices per la definizione degli stili dei link.

+ + + +

La prima cosa da capire è il concetto di stato dei link — esistono stati differenti dei link, ai quali è possibile attribuire gli stili utilizzando differenti pseudo-classi:

+ + + +

Stili predefiniti

+ +

L'esempio seguente mostra il comportamento predefinito di un link (in questo caso il CSS aumenta il font e centra il testo per risaltarlo maggiormente).

+ +
<p><a href="#">A simple link</a></p>
+
+ +
p {
+  font-size: 2rem;
+  text-align: center;
+}
+ +

{{ EmbedLiveSample('Default_styles', '100%', 120) }}

+ +
+

Nota: Tutti i link inseriti negli esempi della pagina sono simulati — sono stati inseriti i simboli # (cancelletto) o $ (sterlina) al posto dell'URL reale. Questo perché se fossero inclusi gli URL reali, cliccando su di essi, si interromperebbero gli esempi (si potrebbe verificare un errore, o caricare una pagina da cui non si potrebbe tornare indietro). Il # (cancelletto) invece si connette esclusivamente alla pagina corrente.

+
+ +

Quando esplorerete gli stili predefiniti, si noteranno alcune cose:

+ + + +

E' abbastanza interessante il fatto che questi stili predefiniti sono relativamente gli stessi rispetto a quelli usciti nei primi tempi dei browser verso la metà degli anni 90. Questo perché gli utenti conoscono e si aspettano questo comportamento — se i link avessero stili differenti da questi, confonderebbero un sacco di persone. Questo non significa che non si debbano definire gli stili del tutto, ma solo che non ci si deve allontanare troppo dalla visualizzazione che gli utenti si aspettano. Si dovrebbe almeno:

+ + + +

Gli stili predefiniti possono essere modificati o disattivati utilizzando le seguenti proprietà dei CSS:

+ + + +
+

Nota: tu non sei limitato alle suddette proprietà per definire gli stili dei tuoi link — sentiti libero di utilizzare le proprietà che più ti piacciono. Cerca solo di non diventare troppo fantasioso !

+
+ +

Definiamo qualche stile

+ +

Ora che abbiamo visto qualche dettaglio sugli stati predefiniti, diamo uno sguardo ad un tipico set di stili dei link.

+ +

Per cominciare, scriviamo il nostro set di stili vuoto:

+ +
a {
+
+}
+
+
+a:link {
+
+}
+
+a:visited {
+
+}
+
+a:focus {
+
+}
+
+a:hover {
+
+}
+
+a:active {
+
+}
+ +

Questo ordine è importante perché gli stili dei link si sovrappongono l'uno sull'altro, per esempio gli stili definiti nella prima regola si applicheranno a tutti quelli seguenti, e quando si attiva un link, ci si passa anche sopra con il mouse. Se si indicano nell'ordine sbagliato, le cose potrebbero non lavorare nel verso giusto.  Per ricordare questo ordine, si può provare ad usare, come aiuto mnemonico, LoVe Fears HAte.

+ +

Adesso si aggiungano alcune altre impostazioni per una appropriata definizione degli stili:

+ +
body {
+  width: 300px;
+  margin: 0 auto;
+  font-size: 1.2rem;
+  font-family: sans-serif;
+}
+
+p {
+  line-height: 1.4;
+}
+
+a {
+  outline: none;
+  text-decoration: none;
+  padding: 2px 1px 0;
+}
+
+a:link {
+  color: #265301;
+}
+
+a:visited {
+  color: #437A16;
+}
+
+a:focus {
+  border-bottom: 1px solid;
+  background: #BAE498;
+}
+
+a:hover {
+  border-bottom: 1px solid;
+  background: #CDFEAA;
+}
+
+a:active {
+  background: #265301;
+  color: #CDFEAA;
+}
+ +

Forniamo anche il seguente esempio HTML a cui applicare il CSS:

+ +
<p>There are several browsers available, such as <a href="#">Mozilla
+Firefox</a>, <a href="#">Google Chrome</a>, and
+<a href="#">Microsoft Edge</a>.</p>
+ +

Mettendoli insieme il risultato sarà questo:

+ +

{{ EmbedLiveSample('Styling_some_links', '100%', 150) }}

+ +

Quindi che cosa abbiamo fatto qui? Il risultato è certamente differente rispetto allo stile predefinito, ma propone ancora un'esperienza abbastanza familiare per gli utenti che sanno cosa sta succedendo:

+ + + +

Active learning: Definisci i tuoi stili

+ +

In questa sessione di active learning, ci piacerebbe che tu prendessi il nostro set di regole vuoto e aggiungessi le tue dichiarazioni per rendere i link veramente mitici. Usa la tua immaginazione e scatenati. Siamo sicuri che ti potrà venire in mente qualcosa di più fantasioso e funzionale rispetto al nostro esempio sopra.

+ +

Se fai un errore, puoi sempre ripartire usando il pulsante Reset. E se rimani bloccato, clicca sul bottone Show solution per inserire l'esempio che ti abbiamo mostrato sopra.

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 800) }}

+ + + +

Una pratica comune consiste nell'includere le icone sui link, per fornire più di un indicatore per quanto riguarda il tipo di contenuto a cui punta il link. Vediamo sotto un esempio molto semplice che associa un'icona ad un link esterno (sono i link che collegano ad altri siti). In genere tale icona è rappresentata come una piccola freccia che indica fuori da un box — per questo esempio, useremo il grande esempio fornito da icons8.com.

+ +

Guardiamo l'HTML e il CSS che ci daranno l'effetto che vogliamo. Per prima cosa, abbiamo del semplice HTML da definire:

+ +
<p>For more information on the weather, visit our <a href="#">weather page</a>,
+look at <a href="#">weather on Wikipedia</a>, or check
+out <a href="#">weather on Extreme Science</a>.</p>
+ +

Quindi il CSS:

+ +
body {
+  width: 300px;
+  margin: 0 auto;
+  font-family: sans-serif;
+}
+
+p {
+  line-height: 1.4;
+}
+
+a {
+  outline: none;
+  text-decoration: none;
+  padding: 2px 1px 0;
+}
+
+a:link {
+  color: blue;
+}
+
+a:visited {
+  color: purple;
+}
+
+a:focus, a:hover {
+  border-bottom: 1px solid;
+}
+
+a:active {
+  color: red;
+}
+
+a[href*="http"] {
+  background: url('https://mdn.mozillademos.org/files/12982/external-link-52.png') no-repeat 100% 0;
+  background-size: 16px 16px;
+  padding-right: 19px;
+}
+ +

{{ EmbedLiveSample('Including_icons_on_links', '100%', 150) }}

+ +

So what's going on here? We'll skip over most of the CSS, as it's just the same information you've looked at before. The last rule however is interesting — here we are inserting a custom background image on external links in a similar manner to how we handled custom bullets on list items in the last article — this time however we are using {{cssxref("background")}} shorthand instead of the individual properties. We set the path to the image we want to insert, specify no-repeat so we only get one copy inserted, and then specify the position as 100% of the way over to the right of the text content, and 0 pixels from the top.

+ +

We also use {{cssxref("background-size")}} to specify the size we want the background image to be shown at — it is useful to have a larger icon and then resize it like this as needed for responsive web design purposes. This does however only work with IE 9 and later, so if you need to support those older browsers, you'll just have to resize the image and insert it as is.

+ +

Finally, we set some {{cssxref("padding-right")}} on the links to make space for the background image to appear in, so we aren't overlapping it with the text.

+ +

A final word — how did we select just external links? Well, if you are writing your HTML links properly, you should only be using absolute URLs for external links — it is more efficient to use relative links to link to other parts of your own site. The text "http" should therefore only appear in external links, and we can select this with an attribute selector: a[href*="http"] selects {{htmlelement("a")}} elements, but only if they have an {{htmlattrxref("href","a")}} attribute with a value that contains "http" somewhere inside it.

+ +

So that's it — try revisiting the active learning section above and trying this new technique out!

+ +
+

Note: Don't worry if you are not familiar with backgrounds and responsive web design yet; these are explained in other places.

+
+ + + +

The tools you've explored so far in this article can also be used in other ways. For example, states like hover can be used to style many different elements, not just links — you might want to style the hover state of paragraphs, list items, or other things.

+ +

In addition, links are quite commonly styled to look and behave like buttons in certain circumstances — a website navigation menu is usually marked up as a list containing links, and this can be easily styled to look like a set of control buttons or tabs that provide the user with access to other parts of the site. Let's explore how.

+ +

First, some HTML:

+ +
<ul>
+  <li><a href="#">Home</a></li><li><a href="#">Pizza</a></li><li><a href="#">Music</a></li><li><a href="#">Wombats</a></li><li><a href="#">Finland</a></li>
+</ul>
+ +

And now our CSS:

+ +
body,html {
+  margin: 0;
+  font-family: sans-serif;
+}
+
+ul {
+  padding: 0;
+  width: 100%;
+}
+
+li {
+  display: inline;
+}
+
+a {
+  outline: none;
+  text-decoration: none;
+  display: inline-block;
+  width: 19.5%;
+  margin-right: 0.625%;
+  text-align: center;
+  line-height: 3;
+  color: black;
+}
+
+li:last-child a {
+  margin-right: 0;
+}
+
+a:link, a:visited, a:focus {
+  background: yellow;
+}
+
+a:hover {
+  background: orange;
+}
+
+a:active {
+  background: red;
+  color: white;
+}
+ +

This gives us the following result:

+ +

{{ EmbedLiveSample('Styling_links_as_buttons', '100%', 100) }}

+ +

Let's explain what's going on here, focusing on the most interesting parts:

+ + + +
+

Note: You may have noticed that the list items in the HTML are all put on the same line as each other — this is done because spaces/line breaks in between inline block elements create spaces on the page, just like the spaces in between words, and such spaces would break our horizontal navigation menu layout. So we've removed the spaces. You can find more information about this problem (and solutions) at Fighting the space between inline block elements.

+
+ +

Summary

+ +

We hope this article has provided you with all you'll need to know about links — for now! The final article in our Styling text module details how to use custom fonts on your websites, or web fonts as they are better known.

+ +

{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}

+ +

 

+ +

In this module

+ + + +

 

diff --git a/files/it/learn/forms/form_validation/index.html b/files/it/learn/forms/form_validation/index.html new file mode 100644 index 0000000000..9557758529 --- /dev/null +++ b/files/it/learn/forms/form_validation/index.html @@ -0,0 +1,846 @@ +--- +title: Validazione lato client delle form +slug: Learn/HTML/Forms/Form_validation +tags: + - Apprendere + - Esempio + - Forms + - Guida + - HTML + - JavaScript + - Principiante + - Web + - regex +translation_of: Learn/Forms/Form_validation +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Forms/UI_pseudo-classes", "Learn/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms")}}
+ +
Prima di inviare dati al server, è importante assicurarsi che tutti i campi richiesti della form siano stati inseriti e siano nel formato richiesto. Questa viene chiamata validazione delle form lato client, ed aiuta a fare in modo che i dati inviati siano consistenti con quanto richiesto. Questo articolo illustra anche con esempi i concetti base della validazione.
+ +
+ + + + + + + + + + + + +
Prerequisiti:Conoscenze informatiche, ed una ragionevole comprensione di HTML, CSS, e JavaScript.
Obiettivo:Capire che cos'è la validazione delle form lato client, perché è importante e come applicare le varie tecniche per implementarla.
+ +

La validazione lato client è un controllo che va fatto subito ed è una caratteristica importante per una buona esperienza untente; trovando i dati non corretti nel lato client, l'utente li può correggere immediatamente. Se i dati non corretti venissero inviati al server e rifiutati, si assisterebbe ad un considerevole e fastidioso ritardo operativo dovuto al traffico tra client e server per le richieste di correzione.

+ +

Comunque, la validazione lato client non dovrebbe essere considerata una misura di sicurezza sufficiente! La tua app dovrebbe sempre eseguire controlli di sicurezza anche nel lato server, perché le validazioni lato client sono troppo facili da bypassare, quindi gli utenti malevoli potrebbero comunque spedire dati non corretti al server. Leggi l'articolo Website security per farti un idea di quello che potrebbe succedere; in questo articolo non trattiamo la validazione lato server, ma tu dovresti tenerla presente.

+ +

Che cos'è la validazione delle form?

+ +

Vai su qualche diffuso sito con registrazione delle form e ti accorgerai che ti  fornirà informazioni immediate se non inserisci i dati nel formato che loro si aspettano. Otterrai messaggi simili a questi:

+ + + +

Questa viene chiamata validazione della form. Quando inserisci i dati il browser e/o il web server controllano se i dati sono corretti secondo le regole stabilite dalla applicazione. La validazione fatta dal browser viene chiamata validazione lato client e quella fatta dal server viene chiamata validazione lato server. Questo articolo si occupa della validazione lato client.

+ +

Se le informazioni hanno il formato corretto, l'applicazione consente che vengano spedite al server il quale di solito le salva in un database. Se invece non sono corrette, viene mandato un messaggo all'utente spiegando l'errore e consentendo di riprovare.

+ +

Noi desideriamo che l'inserimento delle form sia il più facile possibile. Quindi per quale motivo insistiamo per la validazione? I motivi principali sono tre:

+ + + +

Differenti tipi di validazione lato client

+ +

Ci sono due tipi di validazione che si possono incontrare nel web:

+ + + +

Usare la validazione built-in delle form

+ +

Una delle funzionalità più significative dei HTML5 form controls è la capacità di effettuare molte validazioni senza richiedere l'uso di JavaScript. Questo viene fatto usando attributi di validazione negli elementi della form. Lo abbiamo visto anche in altre occasioni, ma ricapitolando:

+ + + +

Se i dati inseriti nella form seguono tutte le regole specificate dagli attributi è considerata valida. Altrimenti viene considerata non valida.

+ +

Quando un elemento è valido, le seguenti cose sono vere:

+ + + +

Quando un elemento non è valido, le seguenti cose sono vere:

+ + + +
+

Nota: Esistiono alcuni errori che impediscono la spedizione della form, compreso {{domxref('validityState.badInput', 'badInput')}}, {{domxref('validityState.patternMismatch','patternMismatch')}}, {{domxref('validityState.rangeOverflow','rangeOverflow')}} o {{domxref('validityState.rangeUnderflow','rangeUnderflow')}}, {{domxref('validityState.stepMismatch','stepMismatch')}}, {{domxref('validityState.tooLong','tooLong')}} or {{domxref('validityState.tooShort','tooShort')}}, {{domxref('validityState.typeMismatch','typeMismatch')}}, {{domxref('validityState.valueMissing','valueMissing')}}, o un {{domxref('validityState.customError','customError')}}.

+
+ +

Esempi di validazione built-in delle form

+ +

In questa sezione proveremo alcuni degli attributi di cui abbiamo parlato sopra.

+ +

Semplice esempio iniziale

+ +

Incominciamo con un esempio semplice: Un campo di testo che ti permette di scegliere se preferisci le banane o le ciliege (banana or cherry). Questo esempio richiede un semplice testo {{HTMLElement("input")}} con associata una {{htmlelement("label")}} e un pulsante di invio {{htmlelement("button")}}. Il codice sorgente si trova su GitHub su fruit-start.html con un esempio live.

+ +
<form>
+  <label for="choose">Would you prefer a banana or cherry?</label>
+  <input id="choose" name="i_like">
+  <button>Submit</button>
+</form>
+ +
input:invalid {
+  border: 2px dashed red;
+}
+
+input:valid {
+  border: 2px solid black;
+}
+ +

{{EmbedLiveSample("Simple_start_file", "100%", 80)}}

+ +

Per incominciare fai una copia di  fruit-start.html in una directory vuota del tuo disco fisso.

+ +

L'attributo required

+ +

La validazione HTML5 più semplice è l'attributo required. Per rendere obbligatorio un campo input aggiungi questo attributo. Se è presente, l'elemento esegue il controllo con la pseudo-classe {{cssxref(':required')}} e la form non viene inviata e visualizza un messaggio d'errore se il campo input è vuoto. Quando è vuoto il campo è considerato non valido anche dalla pseudo-classe {{cssxref(':invalid')}}.

+ +

Aggiungi l'attributo required come si vede qui sotto.

+ +
<form>
+  <label for="choose">Would you prefer a banana or cherry? (required)</label>
+  <input id="choose" name="i_like" required>
+  <button>Submit</button>
+</form>
+ +

Considera il CSS che è incluso nel file d'esempio:

+ +
input:invalid {
+  border: 2px dashed red;
+}
+
+input:invalid:required {
+  background-image: linear-gradient(to right, pink, lightgreen);
+}
+
+input:valid {
+  border: 2px solid black;
+}
+ +

Questo CSS assegna all'input un bordo rosso a trattini quando il valore non è valido ed una linea nera più sottile quando è valido. Abbiamo anche aggiunto uno sfondo a gradiente quando è richiesto e non valido. Prova il nuovo comportamento nell'esempio sotto:

+ +

{{EmbedLiveSample("The_required_attribute", "100%", 80)}}

+ +
+

Nota: Puoi trovare questo esempio live su GitHub come fruit-validation.html (vedi anche il codice sorgente.)

+
+ +

Prova ad inviare la form senza un valore. Nota che i campo non valido acquista il focus ed appare il messaggio predefinito ("Per favore inserisci questo campo"), e la form non viene inviata.

+ +

La presenza dell'attributo required in un elemento che lo supporta comporta che l'elemento controlla la pseudoclasse {{cssxref(':required')}} per controllare se contiene un valore oppure no. Se il campo {{HTMLElement("input")}} non ha un valore, attiva la pseudoclasse {{cssxref(':invalid')}}.

+ +
+

Nota: Per una buona esperienza utente, indica all'utente quando un campo è richiesto. Non è solo una buona pratica, ma è anche richiesto dalle linee guida accessibility del WCAG. È anche bene rendere obbligatori i soli campi che ti servono. è inutile rendere obbligatori i campi di cui non hai reale necessità.

+
+ +

Validazione con una regular expression

+ +

Un'altra caratteristica di validazione molto usata è l'attributo pattern, che si aspetta una Regular Expression come valore. Una regular expression (regex) è un modello che può essere usato per confrontare una combinazione di caratteri in una stringa, questo li rende ottimi per la validazione delle form e vengono usati anche per un certo numero di altri usi in JavaScript.

+ +

I regex sono abbastanza complessi, e non riusciamo a spiegarli in modo completo in questo articolo. Di seguito riportiamo alcuni esempi per darti un'idea di base su come funzionano.

+ + + +

Ci sono moltissime altre possibilità che non trattiamo. Per la lista completa e molti esempi consulta la nostra documentazione delle Regular expressions.

+ +

Proviamo ad implementare un esemio. Modifica il tuo HTML per aggiungere un attributo pattern come il seguente:

+ +
<form>
+  <label for="choose">Would you prefer a banana or a cherry?</label>
+  <input id="choose" name="i_like" required pattern="[Bb]anana|[Cc]herry">
+  <button>Submit</button>
+</form>
+
+ + + +

Che ci da il seguente aggiornamento — prova:

+ +

{{EmbedLiveSample("Validating_against_a_regular_expression", "100%", 80)}}

+ +
+

Nota: Puoi trovare questo esempio live su GitHub su fruit-pattern.html (guarda anche il codice sorgente.)

+
+ +

In questo esempio, l'elemento {{HTMLElement("input")}} accetta una di quattro possibili valori: "banana", "Banana", "cherry", o "Cherry". Le regular expressions sono sono sensibili a maiuscole e minuscole, ma noi abbiamo supportato sia le parole minuscole che quelle con la prima maiuscola usando il modello "Aa" racchiuso tra parentesi quadre.

+ +

Prova ora a cambiare il valore dell attributo pattern con gli esempi visti in precedenza e vedi in che modo cambiano i valori che puoi inserire. Prova anche a scrivere qualche regola per conto tuo e cerca di dare un senso alle regole rispetto al esempio della frutta!

+ +

Se un valore di {{HTMLElement("input")}} non soddisfa il modello della regular expression il campo input  applicherà la pseudoclasse  {{cssxref(':invalid')}}.

+ +
+

Nota: Alcuni tipi di elemento {{HTMLElement("input")}} non necessitano di un attributo pattern per essere validati secondo una regular expression. Specificando il tipo email, ad esempio, l'input viene validato con il consolidato modello per la validazione delle email o con il modello per una lista di email separate da virgole se ha anche l'attributo multiple.

+
+ +
+

Nota: L'elemento {{HTMLElement("textarea")}} non supporta l'attributo pattern.

+
+ +

Limitare la dimensione dei campi

+ +

Puoi limitare la dimensione dei campi testo creati con  {{HTMLElement("input")}} o {{HTMLElement("textarea")}} usando gli attributi minlength e maxlength. Un campo non è valido se ha meno caratteri del valore di minlength o maggiore del valore di maxlength.

+ +

I browsers spesso non consentono all'utente di inserire più caratteri di quelli consentiti dal campo. Per migliorare l'esperienza utente invece di usare solamente maxlength si può fornire l'indicazione del numero di caratteri residui per dare modo all'utente di regolarsi. Un esempio di questo si trova in Twitter. Con JavaScript esiste una soluzione che usa maxlength, che si può utilizzare.

+ +

Limitare i valori dei campi

+ +

Per i campi numerici (es. <input type="number">), gli attirbuti min e max possono essere utilizzati per fornire i limiti di valori validi. Se il campo contiene valori fuori dai limiti non è valido.

+ +

Vediamo un altro esempio. Creiamo una copia del file fruit-start.html.

+ +

Ora sostituiamo i contenuto dell'elemento <body> con il seguente:

+ +
<form>
+  <div>
+    <label for="choose">Would you prefer a banana or a cherry?</label>
+    <input type="text" id="choose" name="i_like" required minlength="6" maxlength="6">
+  </div>
+  <div>
+    <label for="number">How many would you like?</label>
+    <input type="number" id="number" name="amount" value="1" min="1" max="10">
+  </div>
+  <div>
+    <button>Submit</button>
+  </div>
+</form>
+ + + + + +

Ecco un esempio live:

+ +

{{EmbedLiveSample("Constraining_the_values_of_your_entries", "100%", 100)}}

+ +
+

Nota: Puoi trovare questo esempio live su GitHub su fruit-length.html (guarda anche il codice sorgente.)

+
+ +
+

Nota: <input type="number"> (ed anche altri tipi come range e date) possono anche avere l'attributo step, che specifica il valore minimo di incremento e decremento quando viene usato il campo (ad esempio premendo i pulsanti su e giu dei campi numerici). Nel esempio precedente non abbiamo inserito l'attributo step quindi il valore parte da 1. Questo significa che i numeri con la virgola come 3.2, sono anch'essi non validi.

+
+ +

Esempio completo

+ +

Ecco un esempio completo che dimostra l'uso delle funzionalità di validazione built-in di HTML:

+ +
<form>
+  <p>
+    <fieldset>
+      <legend>Do you have a driver's license?<abbr title="This field is mandatory" aria-label="required">*</abbr></legend>
+      <!-- While only one radio button in a same-named group can be selected at a time,
+           and therefore only one radio button in a same-named group having the "required"
+           attribute suffices in making a selection a requirement -->
+      <input type="radio" required name="driver" id="r1" value="yes"><label for="r1">Yes</label>
+      <input type="radio" required name="driver" id="r2" value="no"><label for="r2">No</label>
+    </fieldset>
+  </p>
+  <p>
+    <label for="n1">How old are you?</label>
+    <!-- The pattern attribute can act as a fallback for browsers which
+         don't implement the number input type but support the pattern attribute.
+         Please note that browsers that support the pattern attribute will make it
+         fail silently when used with a number field.
+         Its usage here acts only as a fallback -->
+    <input type="number" min="12" max="120" step="1" id="n1" name="age"
+           pattern="\d+">
+  </p>
+  <p>
+    <label for="t1">What's your favorite fruit?<abbr title="This field is mandatory" aria-label="required">*</abbr></label>
+    <input type="text" id="t1" name="fruit" list="l1" required
+           pattern="[Bb]anana|[Cc]herry|[Aa]pple|[Ss]trawberry|[Ll]emon|[Oo]range">
+    <datalist id="l1">
+      <option>Banana</option>
+      <option>Cherry</option>
+      <option>Apple</option>
+      <option>Strawberry</option>
+      <option>Lemon</option>
+      <option>Orange</option>
+    </datalist>
+  </p>
+  <p>
+    <label for="t2">What's your e-mail address?</label>
+    <input type="email" id="t2" name="email">
+  </p>
+  <p>
+    <label for="t3">Leave a short message</label>
+    <textarea id="t3" name="msg" maxlength="140" rows="5"></textarea>
+  </p>
+  <p>
+    <button>Submit</button>
+  </p>
+</form>
+ +

Ed ora un po' di CSS per dare stile al HTML:

+ +
form {
+  font: 1em sans-serif;
+  max-width: 320px;
+}
+
+p > label {
+  display: block;
+}
+
+input[type="text"],
+input[type="email"],
+input[type="number"],
+textarea,
+fieldset {
+  width : 100%;
+  border: 1px solid #333;
+  box-sizing: border-box;
+}
+
+input:invalid {
+  box-shadow: 0 0 5px 1px red;
+}
+
+input:focus:invalid {
+  box-shadow: none;
+}
+ +

Questo viene presentato nel modo seguente:

+ +

{{EmbedLiveSample("Full_example", "100%", 420)}}

+ +

Vedi Validation-related attributes per la lista completa degli attributi che possono essere utilizzati per limitare i valori ed i tipi di input che li supportano.

+ +
+

Nota: Puoi trovare questo esempio live su GitHub su  full-example.html (guarda anche il codice sorgente.)

+
+ +

Validazione delle forms con JavaScript

+ +

Sei costretto ad usare JavaScript se desideri controllare l'aspetto dei messaggi nativi d'errore o per conformarti ai browsers più vecchi che non supportano la validazione built-in di HTML. In questa sezione daremo un occhiata a diversi modi per farlo.

+ +

Le API di limitazione della validazione

+ +

Molti browsers supportano le Constraint Validation API, che consistono in un gruppo di metodi e proprietà disponibili nelle seguienti interfaccie degli elementi delle form del DOM:

+ + + +

Le API di validazione rendono le seguenti proprietà disponibili per li elementi di cui sopra.

+ + + +

Le API di validazione rendono anche disponibili i seguenti metodi per gli elementi di cui sopra.

+ + + +

Implementare un messaggio di errore personalizzato

+ +

Come abbiamo visto negli esempi di limiti di validazione HTML5 in precedenza, ogni volta che l'utente tenta di inviare una form non valida, il browser visualizza un messaggio d'errore. Il modo in cui viene visualizzato dipende dal browser.

+ +

Questi messaggi automatizzati hanno due controindicazioni:

+ + + +

Example of an error message with Firefox in French on an English page

+ +

Personalizzare questi messaggi di errore è uno dei casi più comuni di utilizzo delle constraint validation API. Vediamo un piccolo esempio di come fare questo.

+ +

Incominciamo con un po' di HTML semplice (prova ad inserirlo in un file HTML vuoto o usa come base una copia di of fruit-start.html come preferisci):

+ +
<form>
+  <label for="mail">I would like you to provide me with an e-mail address:</label>
+  <input type="email" id="mail" name="mail">
+  <button>Submit</button>
+</form>
+ +

Ed aggiungi il seguente JavaScript alla pagina:

+ +
const email = document.getElementById("mail");
+
+email.addEventListener("input", function (event) {
+  if (email.validity.typeMismatch) {
+    email.setCustomValidity("I am expecting an e-mail address!");
+  } else {
+    email.setCustomValidity("");
+  }
+});
+ +

Qui aggiungiamo un riferimento al campo email ed aggiungiamo un event listener che viene eseguito ogni volta che il valore cambia.

+ +

Nel codici controlliamo se la proprietà validity.typeMismatch del campo emali diventa true, significa che il valore contenuto non corrisponde al modello degli indirizzi email. Se è così viene chiamato il metodo setCustomValidity() con un messaggio appropriato. Questo rende il campo non valido, in modo che quando viene inviata la form, l'invio fallisce e viene visualizzato il messaggio di errore.

+ +

Se la proprietà validity.typeMismatch restituisce false, chiamiamo il metodo setCustomValidity() con una stringa vuota che rende valido il campo in modo che possa essere spedito.

+ +

Lo puoi provare con:

+ +

{{EmbedGHLiveSample("learning-area/html/forms/form-validation/custom-error-message.html", '100%', 80)}}

+ +
+

Nota: Puoi trovare questo esempio live su GitHub su custom-error-message.html (vedi anche il codice sorgente.)

+
+ +

Un esempio più dettagliato

+ +

Ora che abbiamo visto un esempio molto semplice, vediamo come possiamo usare le API per costurire un sistema di validazione un po' più complesso.

+ +

Prima di tutto il codice HTML:

+ +
<form novalidate>
+  <p>
+    <label for="mail">
+      <span>Please enter an email address:</span>
+      <input type="email" id="mail" name="mail" required minlength="8">
+      <span class="error" aria-live="polite"></span>
+    </label>
+  </p>
+  <button>Submit</button>
+</form>
+ +

Questa semplice form usa l'attributo novalidate per disattivare la validazine automatica del browser; questo consente al nostro script di prendere il controllo della validazione. Questo comunque non disabilita il supporto per le API di validazione e l'applicazione delle pseudoclassi CSS come {{cssxref(":valid")}}, ecc. Questo significa che se anche il browser con controlla la validità della form prima di spedire i dati, tu puoi comunque farlo dal solo ed applicare lo stile appropriato.

+ +

Il nostro input da validare è un <input type="email">, che è required, ed ha un minlength di 8 caratteri. Proviamo a controllare la validità usando il nostro codice e visualizziamo un messaggio appropriato per ciascun attributo.

+ +

Ci proponiamo di visualizzare il messaggio all'intermo di un elemento <span>. L'attributo aria-live per assicurarci che il nostro messaggio di errore verrà reso disponibile a tutti compresi coloro che usano i lettori di schermo.

+ +
+

Nota: Il punto chiave qui è l'uso dell'attributo novalidate per la form che è ciò che impedisce alla form di vidualizzare il proprio messaggio di errore e ci consente invece di visualizzare il nostro messaggio presonalizzato nel DOM in qualche modo scelto da noi.

+
+ +

Ora un po' di CSS oer migliorare leggermente il look della form, e fornire qualche tipo di informazione quando il valore non è valido:

+ +
body {
+  font: 1em sans-serif;
+  width: 200px;
+  padding: 0;
+  margin : 0 auto;
+}
+
+p * {
+  display: block;
+}
+
+input[type=email]{
+  -webkit-appearance: none;
+  appearance: none;
+
+  width: 100%;
+  border: 1px solid #333;
+  margin: 0;
+
+  font-family: inherit;
+  font-size: 90%;
+
+  box-sizing: border-box;
+}
+
+/* This is our style for the invalid fields */
+input:invalid{
+  border-color: #900;
+  background-color: #FDD;
+}
+
+input:focus:invalid {
+  outline: none;
+}
+
+/* This is the style of our error messages */
+.error {
+  width  : 100%;
+  padding: 0;
+
+  font-size: 80%;
+  color: white;
+  background-color: #900;
+  border-radius: 0 0 5px 5px;
+
+  box-sizing: border-box;
+}
+
+.error.active {
+  padding: 0.3em;
+}
+ +

Ora vediamo il codice JavaScript che implementa l'errore personalizzato di validazione.

+ +
// There are many ways to pick a DOM node; here we get the form itself and the email
+// input box, as well as the span element into which we will place the error message.
+const form  = document.getElementsByTagName('form')[0];
+
+const email = document.getElementById('mail');
+const emailError = document.querySelector('#mail + span.error');
+
+email.addEventListener('input', function (event) {
+  // Each time the user types something, we check if the
+  // form fields are valid.
+
+  if (email.validity.valid) {
+    // In case there is an error message visible, if the field
+    // is valid, we remove the error message.
+    emailError.innerHTML = ''; // Reset the content of the message
+    emailError.className = 'error'; // Reset the visual state of the message
+  } else {
+    // If there is still an error, show the correct error
+    showError();
+  }
+});
+
+form.addEventListener('submit', function (event) {
+  // if the email field is valid, we let the form submit
+
+  if(!email.validity.valid) {
+    // If it isn't, we display an appropriate error message
+    showError();
+    // Then we prevent the form from being sent by canceling the event
+    event.preventDefault();
+  }
+});
+
+function showError() {
+  if(email.validity.valueMissing) {
+    // If the field is empty
+    // display the following error message.
+    emailError.textContent = 'You need to enter an e-mail address.';
+  } else if(email.validity.typeMismatch) {
+    // If the field doesn't contain an email address
+    // display the following error message.
+    emailError.textContent = 'Entered value needs to be an e-mail address.';
+  } else if(email.validity.tooShort) {
+    // If the data is too short
+    // display the following error message.
+    emailError.textContent = `Email should be at least ${ email.minLength } characters; you entered ${ email.value.length }.`;
+  }
+
+  // Set the styling appropriately
+  emailError.className = 'error active';
+}
+ +

I commenti spiegano le cose per bene, ma brevemente:

+ + + +

Ecco il risultato live:

+ +

{{EmbedGHLiveSample("learning-area/html/forms/form-validation/detailed-custom-validation.html", '100%', 150)}}

+ +
+

Nota: Puoi trovare questo esempio live su GitHub su detailed-custom-validation.html (vedi anche il codice sorgente.)

+
+ +

Le API di validazione ti forniscono uno stumento potente per gestire la validaizone delle form, fornendoti un grande controllo sulla interfaccia utente sopra e sotto quello che puoi fare con i soli HTML e CSS.

+ +
+

Nota: Per ulteriori ingormazioni vedi il nostro Constraint validation guide, ed il riferimento Constraint Validation API.

+
+ +

Validare le forms senza le built-in API

+ +

In alcuni casi come ad esempio per i browsers più vecchi o per il supporto ai custom controls, non sarà possibile usare le API di validazione. Potrai ancora utilizzare JavaScript per validare la tua form, ma devi scrivere tutto da solo.

+ +

Per validare la form fatti alcune domande:

+ +
+
Che tipo di validazione devo eseguire?
+
Devi determinare come validare i tuoi dati: operazioni sulle stringhe, conversioni di tipo, regular expressions, e via discorrendo. Sta tutto a te.
+
Cosa devo fare se la form non è valida?
+
Questo chiaramente è materia di UI. Devi decidere come si deve comportare la form. Deve la form spedire i dati ugualmente? Devi illuminare i campi che sono in errore? Devi visualizzare messaggi di errore?
+
Come posso aiutare l'utente a correggere i dati non validi?
+
Per ridurre la frustrazione dell'utente, è molto importante fornire il maggior numero di informazioni possibili per guidarlo a correggere gli errori. Dovresti fornire suggerimenti sui dati attesi ed anche messaggi di errore chiari e comprensibili. Se vuoi approfondire come approntare la UI adeguata per la validazione, ecco alcuni articoli utili che dovresti leggere: + +
+
+ +

Un esempio che non usa le API di validazione

+ +

Per illustrare questo, quello che segue è una versione semplificata dell'esempio precedente che funziona anche con i browsers più vecchi.

+ +

Il HTML è quasi uguale; abbiamo solo rimosso alcune funzionalità di validazione.

+ +
<form>
+  <p>
+    <label for="mail">
+        <span>Please enter an email address:</span>
+        <input type="text" class="mail" id="mail" name="mail">
+        <span class="error" aria-live="polite"></span>
+    </label>
+  </p>
+  <!-- Some legacy browsers need to have the `type` attribute
+       explicitly set to `submit` on the `button`element -->
+  <button type="submit">Submit</button>
+</form>
+ +

Allo stesso modo, anche il CSS non necessita di grandi modifiche; abbiamo solo trasformato la pseudoclasse {{cssxref(":invalid")}} in una vera classe ed evitato di usare il selettore di attiributo che non funziona con Internet Explorer 6.

+ +
body {
+  font: 1em sans-serif;
+  width: 200px;
+  padding: 0;
+  margin : 0 auto;
+}
+
+form {
+  max-width: 200px;
+}
+
+p * {
+  display: block;
+}
+
+input.mail {
+  -webkit-appearance: none;
+
+  width: 100%;
+  border: 1px solid #333;
+  margin: 0;
+
+  font-family: inherit;
+  font-size: 90%;
+
+  box-sizing: border-box;
+}
+
+/* This is our style for the invalid fields */
+input.invalid{
+  border-color: #900;
+  background-color: #FDD;
+}
+
+input:focus.invalid {
+  outline: none;
+}
+
+/* This is the style of our error messages */
+.error {
+  width  : 100%;
+  padding: 0;
+
+  font-size: 80%;
+  color: white;
+  background-color: #900;
+  border-radius: 0 0 5px 5px;
+  box-sizing: border-box;
+}
+
+.error.active {
+  padding: 0.3em;
+}
+ +

Le modifiche maggiori sono nel codice JavaScript, che richiede una revisione molto più pesante.

+ +
// There are fewer ways to pick a DOM node with legacy browsers
+const form  = document.getElementsByTagName('form')[0];
+const email = document.getElementById('mail');
+
+// The following is a trick to reach the next sibling Element node in the DOM
+// This is dangerous because you can easily build an infinite loop.
+// In modern browsers, you should prefer using element.nextElementSibling
+let error = email;
+while ((error = error.nextSibling).nodeType != 1);
+
+// As per the HTML5 Specification
+const emailRegExp = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
+
+// Many legacy browsers do not support the addEventListener method.
+// Here is a simple way to handle this; it's far from the only one.
+function addEvent(element, event, callback) {
+  let previousEventCallBack = element["on"+event];
+  element["on"+event] = function (e) {
+    const output = callback(e);
+
+    // A callback that returns `false` stops the callback chain
+    // and interrupts the execution of the event callback.
+    if (output === false) return false;
+
+    if (typeof previousEventCallBack === 'function') {
+      output = previousEventCallBack(e);
+      if(output === false) return false;
+    }
+  }
+};
+
+// Now we can rebuild our validation constraint
+// Because we do not rely on CSS pseudo-class, we have to
+// explicitly set the valid/invalid class on our email field
+addEvent(window, "load", function () {
+  // Here, we test if the field is empty (remember, the field is not required)
+  // If it is not, we check if its content is a well-formed e-mail address.
+  const test = email.value.length === 0 || emailRegExp.test(email.value);
+
+  email.className = test ? "valid" : "invalid";
+});
+
+// This defines what happens when the user types in the field
+addEvent(email, "input", function () {
+  const test = email.value.length === 0 || emailRegExp.test(email.value);
+  if (test) {
+    email.className = "valid";
+    error.innerHTML = "";
+    error.className = "error";
+  } else {
+    email.className = "invalid";
+  }
+});
+
+// This defines what happens when the user tries to submit the data
+addEvent(form, "submit", function () {
+  const test = email.value.length === 0 || emailRegExp.test(email.value);
+
+  if (!test) {
+    email.className = "invalid";
+    error.innerHTML = "I expect an e-mail, darling!";
+    error.className = "error active";
+
+    // Some legacy browsers do not support the event.preventDefault() method
+    return false;
+  } else {
+    email.className = "valid";
+    error.innerHTML = "";
+    error.className = "error";
+  }
+});
+ +

Il risultato assomiglia a questo:

+ +

{{EmbedLiveSample("An_example_that_doesnt_use_the_constraint_validation_API", "100%", 130)}}

+ +

Come puoi vedere, non è proprio così difficile costruire un tuo sistema di validazione. La parte difficile è di renderlo abbastanza generico da essere usato su tutte le piattaforme e con ogni form che andarai a creare. Ci sono anche molte librerie pronte che ti aiuntano nella validazione come ad esempio Validate.js.

+ +

Metti alla prova le tue capacità!

+ +

Sei arrivato alla fine di questo articolo, ma riesci a ricordare le informazioni più importanti? Puoi trovare alcuni ulteriori test per verificare che tu abbia recepito questi informazioni prima di proseguire — vedi Test your skills: Form validation.

+ +

Sommario

+ +

La validazione delle form lato client alle volte richiede JavaScript se desideri configurare lo stile ed i messaggi di errore, ma richiede sempre che tu pensi attentamente all'utente. Ricordati sempre di guidare l'utente ad inserire dati corretti. Quindi assicurati di:

+ + + +

Quando hai controllato che la form è stata compilata correttamente, la puoi inviare. In seguito spieghiamo come spedire i dati delle form.

+ +

{{PreviousMenuNext("Learn/Forms/UI_pseudo-classes", "Learn/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms")}}

+ +

In questo modulo

+ + + +

Argomenti avanzati

+ + diff --git a/files/it/learn/forms/how_to_build_custom_form_controls/index.html b/files/it/learn/forms/how_to_build_custom_form_controls/index.html new file mode 100644 index 0000000000..288fa8e1c2 --- /dev/null +++ b/files/it/learn/forms/how_to_build_custom_form_controls/index.html @@ -0,0 +1,825 @@ +--- +title: Come costruire form widget personalizzati +slug: Learn/HTML/Forms/Come_costruire_custom_form_widgets_personalizzati +translation_of: Learn/Forms/How_to_build_custom_form_controls +--- +
{{PreviousMenuNext("Learn/HTML/Forms/Form_validation", "Learn/HTML/Forms/Sending_forms_through_JavaScript", "Learn/HTML/Forms")}}
+ +

Ci sono molti casi in cui i widget del modulo html disponibili non sono abbastanza. Se vuoi eseguire uno styling avanzato su alcuni widget come l'elemento {{HTMLElement("select")}}  o sei vuoi fornirli di comportamenti personalizzati, l'unica scelta che hai è quella di costruirti il tuo widget personale.

+ +

In quest'articolo vedremo come costruire questo tipo di widget. A tal fine lavoreremo con un esempio: ricostruire l'elemento {{HTMLElement("select")}} .

+ +
+

Nota: ci concentreremo sulla costruzione del widget, non su come rendere il codice generico e riutilizzabile; questo comporterebbe del codice JavaScript and la manipolazione del DOM in un contesto sconosciuto, uscendo fuori dallo scopo di quest'articolo.

+
+ +

Design, strutture, e semantica

+ +

Prima di costruire un widget personalizzato, dovresti cominciare a pensare esattamente cosa vuoi. Questo ti aiuterà a evitare perdite di tempo. In particolare, e' importante definire chiaramente tutti gli stati del tuo widget. Per fare ciò, è bene cominciare da un widget esistente che ha stati e comportamenti ben noti.

+ +

Nel nostro esempio ricostruiremo l'elemento {{HTMLElement("select")}} . Ecco il risultato che vogliamo raggiungere:

+ +

The three states of a select box

+ +

Questo screenshot ci illustra i tre stati principali del nostro widget: lo stato normale(a sinistra); lo stato di attivazione ( al centro) and lo stato aperto (a destra).

+ +

In termini di compartamento vogliamo che il nostro widget sia utilizabile con il mouse e con la tastiera, proprio come un ogni widget non modificato. Cominciamo definendo come il widget raggiungerà uno stato:

+ +
+
Il widget è nel suo stato normale quando:
+
+
    +
  • la pagina carica
    • +
  • Il widget era attivo e l'utente fa clico ovunque al di fuori del widget
    • +
  • il widget era attivo e l'utente sposta lo stato attivo su un altro widget usando la tastiera
    • +
+ +
+

Nota: Moving the focus around the page is usually done through hitting the tab key, but this is not standard everywhere. For example cycling through links on a page is done in Safari by default using the Option+Tab combination.

+
+
+
Il widget è nel suo stato attivo quando:
+
+
    +
  • L'user lo clicca
    • +
  • L'user clicca il tasto tab e lo evidenzia
    • +
  • il widget era aperto and l'user clicca sul widget.
    • +
+
+
Il widget è nello stato di apertura quando:
+
+
    +
  • il widget è in uno stato diverso da quello aperto e l'utente fa clic su di esso
    • +
+
+
+ +

Una volta compreso come cambiare gli stati, e importante definire come cambiare i valori del widget:

+ +
+
I valori cambiano quando:
+
+
    +
  • l'user clicca su un'opzione quando il widget è nello stato di apertura
    • +
  • l'user preme dalla tastiera la frecciasu o giù quando il widget è aperto 
    • +
+
+
+ +

Finalmente, possiamo definire come le opzioni del widget dovranno comportarsi:

+ + + +

Ai fini del nostro esempio, ci fermeremo qui; comunque, se sei un lettore attendo avrai notato che mancano dei comportamenti. Per esempio: Cosa accadrà se l'user preme tab MENTRE il widget è aperto?La risposta è... Nulla. OK, il comportamento corretto sembra ovvio ma il fatto è che, poiché non è definito nelle nostre specifiche, è molto facile trascurare questo comportamento. Ciò è particolarmente vero in un ambiente di squadra quando le persone che progettano il comportamento del widget sono diverse da quelle che lo implementano.

+ +

Un altro esempio divertente: Cosa succederà se l'user premerà il tasto su o giù mentre il widget è aperto? Questo è un po' più complicato. Se consideri che lo stato attivo e lo stato aperto sono totalmente diversi, la risposta è di nuovo " non succederà niente"!
+ Perchè non abbiamo definito nessuna interazione con la tastiera quando il widget è aperto.D'altronde, se si considera che lo stato attivo e lo stato aperto si sovrappongono un po', il valore potrebbe cambiare ma l'opzione ma l'opzione non sarà sicuramente evidenziata di conseguenza, ancora una volta perchè non abbiamo definito interazioni con la tastiera con le opzioni quando il widget si trova nel suo stato aperto (abbiamo solo definito cosa dovrebbe accadere quando il widget è aperto, ma nulla dopo).

+ +

le specifiche mancanti sono ovvie, quindi le gestiremo, ma potrebbe rivelare dei problemi in widget nuovi ed esotici, fper cui nessuno ha la minima idea di quale sia il comportamento giusto. E' sempre opportuno utilizzare bene il proprio tempo in questa fase di desgin: se definisci malamente un comportamento, o dimentichi di definirne uno, sarà molto difficile ridefinirlo una volta che gli utenti si saranno abituati. Se hai dubbi, chiedi l'opinione altrui , e se disponi di un budget non esitare in un user tests. Questo processo è chiamato UX design. Se vuoi conoscere di più a proposito di questo argomento, dovresti controllare le seguenti risorse:

+ + + +
+

Nota: In molti sistemi c'è un modo per aprire l'elemento {{HTMLElement("select")}} per esaminare tutte le scelte disponibili (lo stesso elemento {{HTMLElement("select")}} ). This is achieved with Alt+Down arrow under Windows and was not implemented in our example —but it would be easy to do so, as the mechanism has already been implemented for the click event.

+
+ +

Definire la struttura e la semantica HTML

+ +

Ora che le funzionalità basi del nostro widget sono state deficse, e' tempo di cominciare a costruire il nostro widget. Il primo passo è di definire la struttura HTML . Questo è ciò che dobbiamo ricostruire {{HTMLElement("select")}}:

+ +
<!-- Questo è il nostro container
+     principale per il nostro widget.
+     l'attributo tabindex permette
+     all'utente di concentrarsi sul widget.
+     Vedremo dopo cos'è meglio
+     utilizzare con javascript. -->
+
+<div class="select" tabindex="0">
+
+  <!-- Questo container verrà usato per stampare il valore corrente del widget -->
+  <span class="value">Cherry</span>
+
+  <!-- Questo container conterrà tutte le opzioni disponibili per il nostro widget.
+       dato che sarà una lista, utilizzare l'opzione ul è valido. -->
+  <ul class="optList">
+    <!-- Ogni opzione contiene solo il valore da visualizzare, vedremo dopo come
+         manipolare il reale valore che vogliamo inviare col form -->
+    <li class="option">Cherry</li>
+    <li class="option">Lemon</li>
+    <li class="option">Banana</li>
+    <li class="option">Strawberry</li>
+    <li class="option">Apple</li>
+  </ul>
+
+</div>
+ +

Nota l'uso del nome delle classi; questi identificano ciascuna parte rilevante indipendentemente dagli effettivi elementi HTML sottostanti utilizzati. Questo è importante per essere sicuri che non legheremo il nostro CSS e JavaScript ad una forte struttura HTML, in modo da poter apportare modifiche all'implementazione in un secondo momento senza rompere il codice che utilizza il widget. Per esempio se desideri implementare l'equivalente dell'elemento {{HTMLElement("optgroup")}}.

+ +

Creare l'aspetto grafico utilizzando i CSS

+ +

Ora che abbiamo una struttura HTML possiamo cominciare a disegnare il nostro widget. L'intero punto di costruzione di questo widget personalizzato è di essere in grado di modellare questo widget esattamente come vogliamo. Al fine di ciò, divideremo i nostri CSS in due parti: la prima parte sarà necessaria per avere un widget simile a {{HTMLElement("select")}} ,la seconda parte consisterà nella parte grafica in modo che appaia come noi vogliamo.

+ +

Stili richiesti

+ +

Gli stili richiesti sono quelli necessari per gestire i tre stati del nostro widget.

+ +
.select {
+  /* Questo creerà un contesto di posizionamento per l'elenco di opzioni */
+  position: relative;
+
+  /*Questo renderà il nostro widget parte del flusso di testo e allo stesso tempo considerevole */
+  display : inline-block;
+}
+ +

Abbiamo bisogno di una classe extra "active" per definire il look del nostro widget quando è nello stato di attivazione. Poichè il nostro widget è selezionabile,dobbiamo raddoppiare questo stile personale con la pseudo-classe {{cssxref(":focus")}} In modo da essere sicuri che abbiano lo stesso comportamento.

+ +
.select.active,
+.select:focus {
+  outline: none;
+
+  /* Questo box-shadow non è richiesto al corretto funzionamento ,
+     tuttavia è importante per essere sicuro che lo stato di attivazione
+     sia visibile e che lo utilizziamo come valore di defaul,
+     sentiti libero di modificarlo. */
+  box-shadow: 0 0 3px 1px #227755;
+}
+ +

Ora manipoliamo la lista delle opzioni:

+ +
/* il selettore .select è zucchero sintattico ( traduzione letterale,
+   concettualmente vuol dire " rendere del codice più dolce, più umano "
+   per essere sicuri che le classi che definiamo siano quelli all'interno del nostro widget.
+ */
+
+.select .optList {
+  /* Ciò assicurerà che il nostro elenco di opzioni sia visualizzato sotto il valore
+      e fuori dal flusso HTML */
+  position : absolute;
+  top      : 100%;
+  left     : 0;
+}
+ +

Abbiamo bisogno di una classe extra per manipolare la lista quando le opzioni sono nascoste. Questo è necessario per gestire le differenze tra lo stato attivo e lo stato aperto che non corrispondono esattamente.

+ +
.select .optList.hidden {
+  /* Questo è un modo semplice per nascondere la lista in modo accessibile,
+      parleremo di più sull'accessibilità alla fine */
+  max-height: 0;
+  visibility: hidden;
+}
+ +

Abbellimento

+ +

Ora che abbiamo le funzionalità base, possiamo cominciare a divertirci. Quello seguente è solo un esempio di ciò che è possibile, e corrisponderà allo screenshot all'inizio di questo articolo. Dovresti sentirti libero di sperimentare e vedere cosa accade.

+ +
.select {
+  /* Tutte le taglie saranno espresse con il valore em per motivi di accessibilità
+      (per assicurarsi che il widget rimanga ridimensionabile se l'utente usa il
+      zoom del browser in modalità solo testo). I calcoli sono fatti
+      assumendo 1em == 16px quale è il valore predefinito nella maggior parte dei browser.
+      Se ti perdi la conversione di px in em, prova http://riddle.pl/emcalc/ * /
+  font-size   : 0.625em;
+  font-family : Verdana, Arial, sans-serif;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  /* Abbiamo bisogno di spazio extra per la freccia in giù che aggiungeremo
+ */
+  padding : .1em 2.5em .2em .5em; /* 1px 25px 2px 5px */
+  width   : 10em; /* 100px */
+
+  border        : .2em solid #000; /* 2px */
+  border-radius : .4em; /* 4px */
+  box-shadow    : 0 .1em .2em rgba(0,0,0,.45); /* 0 1px 2px */
+
+  /* La prima dichiarazione serve per i browser che non supportano i gradienti lineari.
+     La seconda dichiarazione è perché i browser basati su WebKit non hanno ancora una definizione prefissata.
+     Se vuoi supportare i browser legacy prova http://www.colorzilla.com/gradient-editor/ */
+  background : #F0F0F0;
+  background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+  background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+}
+
+.select .value {
+  /* poichè i valori possono essere più larghi del nostro widget, dobbiamo essere sicuri
+     che il widget cambierà dimensione */
+  display  : inline-block;
+  width    : 100%;
+  overflow : hidden;
+
+  vertical-align: top;
+
+  /* E se il contenuto va in overflow, è bello avere un bell'elisse . */
+  white-space  : nowrap;
+  text-overflow: ellipsis;
+}
+ +

Non abbiamo bisogno di altri elementi per disegnare la freccia in basso; useremo invece lo pseudo-elemento {{cssxref(":after")}}. Comunque potrebbe anche essere implementato usando una semplice immagine  di background.

+ +
.select:after {
+  content : "▼"; /* utilizziamo il carattere unicode U+25BC; vedi http://www.utf8-chartable.de */
+  position: absolute;
+  z-index : 1; /* importante per la posizione della freccia in modo da evitare
+               sovrapposizionamenti */
+  top     : 0;
+  right   : 0;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  height  : 100%;
+  width   : 2em;  /* 20px */
+  padding-top : .1em; /* 1px */
+
+  border-left  : .2em solid #000; /* 2px */
+  border-radius: 0 .1em .1em 0;  /* 0 1px 1px 0 */
+
+  background-color : #000;
+  color : #FFF;
+  text-align : center;
+}
+ +

ora cominciamo il design della lista delle opzioni:

+ +
.select .optList {
+  z-index : 2; /* Dichiariamo esplicitamente che la lista delle opzioni si sovraporrà
+                  alla freccia */
+
+  /*Questo resetterà lo stile di default degli elementi <ul> */
+  list-style: none;
+  margin : 0;
+  padding: 0;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  /* Ciò assicurerà che anche se i valori sono inferiori al widget,
+      l'elenco delle opzioni sarà grande quanto il widget stesso */
+  min-width : 100%;
+
+  /*Nel caso in cui l'elenco sia troppo lungo, il suo contenuto si sovrapporrà verticalmente
+      (che aggiungerà automaticamente una barra di scorrimento verticale) ma mai in orizzontale
+      (poiché non abbiamo impostato una larghezza, la lista regolerà automaticamente la sua larghezza.
+      Se non è possibile, il contenuto verrà troncato) */
+  max-height: 10em; /* 100px */
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  border: .2em solid #000; /* 2px */
+  border-top-width : .1em; /* 1px */
+  border-radius: 0 0 .4em .4em; /* 0 0 4px 4px */
+
+  box-shadow: 0 .2em .4em rgba(0,0,0,.4); /* 0 2px 4px */
+  background: #f0f0f0;
+}
+ +

Per le opzioni abbiamo bisogno di aggiungere la classe highlight in modo da identificare il valore che l'user selezionerà (o ha selezionato).

+ +
.select .option {
+  padding: .2em .3em; /* 2px 3px */
+}
+
+.select .highlight {
+  background: #000;
+  color: #FFFFFF;
+}
+ +

ecco i risultati dei nostri 3 stati:

+ + + + + + + + + + + + + + + + + + + +
Basic stateActive stateOpen state
{{EmbedLiveSample("Basic_state",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_1")}}{{EmbedLiveSample("Active_state",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_1")}}{{EmbedLiveSample("Open_state",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_1")}}
Check out the source code
+ +

Porta in vita il tuo widget con javascript

+ +

Ora che il nostro designe e la nostra struttura sono pronti possiamo scrivere il codice JavaScript che farà effettivamente lavorare il widget.

+ +
+

Pericolo: Il seguente codice è educativo e non dovrebbe essere usato così com'è. Tra le tante cose, come vedremo, non è a prova di futuro e non funzionerà sui browser legacy. Ha anche parti ridondanti che dovrebbero essere ottimizzate nel codice di produzione.

+
+ +
+

Nota: Creare widget riutilizzabili è qualcosa che può essere un po 'complicato. La bozza del componente Web W3C è una delle risposte a questo specifico problema. Il progetto X-Tag è un'implementazione di test di questa specifica; ti invitiamo a dare un'occhiata a questo.

+
+ +

Perchè non funziona?

+ +

Prima di cominciare, è importante ricordare qualcosa di fondamentale a proposito di JavaScript: dentro un browser, è una tecnologia inaffidabile. Quando stai costruendo widget personalizzati, dovrai fare affidamento su javascript perchè è un filo necessario per legare tutto insieme. Tuttavia, ci sono molti casi in cui JavaScript non può essere eseguito nel browser:

+ + + +

Per via di questi rischi, è molto importante considerare seriamente cosa accadrà se JavaScript non funziona. Trattare dettagliatamente questo problema è fuori dallo scopo di questo articolo perché è strettamente legato al modo in cui si desidera rendere generico e riutilizzabile lo script, ma nel nostro esempio considereremo le basi di ciò.

+ +

Nel nostro esempio, se il nostro codice JavaScript non è in esecuzione, ricorreremo alla visualizzazione di un elemento {{HTMLElement("select")}}. Per raggiungere questo abbiamo bisogno di due cose.

+ +

Per prima cosa, dobbiamo aggiungere un normale elemento {{HTMLElement ("select")}} prima di ogni utilizzo del nostro widget personalizzato. Questo è in realtà richiesto anche per poter inviare dati dal nostro widget personalizzato insieme al resto dei dati del nostro modulo;diremo di più a proposito più tardi.

+ +
<body class="no-widget">
+  <form>
+    <select name="myFruit">
+      <option>Cherry</option>
+      <option>Lemon</option>
+      <option>Banana</option>
+      <option>Strawberry</option>
+      <option>Apple</option>
+    </select>
+
+    <div class="select">
+      <span class="value">Cherry</span>
+      <ul class="optList hidden">
+        <li class="option">Cherry</li>
+        <li class="option">Lemon</li>
+        <li class="option">Banana</li>
+        <li class="option">Strawberry</li>
+        <li class="option">Apple</li>
+      </ul>
+    </div>
+  </form>
+
+</body>
+ +

Secondo, abbiamo bisogno di due nuove classi per nascondere l'elemento non necessario (cioè, l'elemento "reale" {{HTMLElement ("select")}} se il nostro script non è in esecuzione o il widget personalizzato è in esecuzione) . Nota che per impostazione predefinita, il nostro codice HTML nasconde il nostro widget personalizzato.

+ +
.widget select,
+.no-widget .select {
+  /*Questo selettore css afferma:
+     - o abbiamo impostato la classe del corpo su "widget",
+       quindi nascondiamo l'effettivo elemento {{HTMLElement ("select")}}
+      - o non abbiamo cambiato la classe del corpo, quindi la classe del corpo
+         è ancora "no-widget",
+        quindi gli elementi di classe "select" devono essere nascosti */
+  position : absolute;
+  left     : -5000em;
+  height   : 0;
+  overflow : hidden;
+}
+ +

Ora abbiamo solo bisogno di un interruttore JavaScript per determinare se lo script è in esecuzione o meno. Questa opzione è molto semplice: se al momento del caricamento della pagina il nostro script è in esecuzione, rimuoverà la classe no-widget e aggiungerà la classe widget, scambiando così la visibilità dell'elemento {{HTMLElement ("select")}} e del widget personalizzato.

+ +
window.addEventListener("load", function () {
+  document.body.classList.remove("no-widget");
+  document.body.classList.add("widget");
+});
+ + + + + + + + + + + + + + + + + +
Without JSWith JS
{{EmbedLiveSample("No_JS",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_2")}}{{EmbedLiveSample("JS",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_2")}}
Check out the source code
+ +
+

Nota: Se vuoi veramente rendere il tuo codice generico e riutilizzabile, invece di fare un cambio di classe è meglio aggiungere semplicemente la classe del widget per nascondere gli elementi {{HTMLElement ("select")}} e aggiungere dinamicamente l'albero DOM che rappresenta il widget personalizzato dopo ogni {{HTMLElement ("select")}} elemento nella pagina.

+
+ +

Rendere il lavoro più facile

+ +

Nel codice che stiamo per costruire, useremo l'API DOM standard per fare tutto il lavoro di cui abbiamo bisogno. Tuttavia, sebbene il supporto dell'API DOM sia diventato molto meglio nei browser, ci sono sempre problemi con i browser legacy (specialmente con il buon vecchio Internet Explorer).

+ +

Se vuoi evitare problemi con i browser legacy, ci sono due modi per farlo: usando un framework dedicato come jQuery, $ dom, prototype, Dojo, YUI, o simili, o facendo il polyfilling della funzione mancante che vuoi usare ( che può essere fatto facilmente attraverso il caricamento condizionale, ad esempio con la libreria yepnope).

+ +

Le funzionalità che intendiamo utilizzare sono le seguenti (ordinate dal più rischioso al più sicuro):

+ +
    +
  1. {{domxref("element.classList","classList")}}
    2. +
  2. {{domxref("EventTarget.addEventListener","addEventListener")}}
    3. +
  3. forEach (This is not DOM but modern JavaScript)
    4. +
  4. {{domxref("element.querySelector","querySelector")}} and {{domxref("element.querySelectorAll","querySelectorAll")}}
    5. +
+ +

Oltre alla disponibilità di tali funzionalità specifiche, rimane ancora un problema prima dell'avvio. L'oggetto restituito dalla funzione {{domxref ("element.querySelectorAll", "querySelectorAll ()")}} è un {{domxref ("NodeList")}} piuttosto che una matrice. Questo è importante perché gli oggetti Array supportano la funzione forEach, ma {{domxref ("NodeList")}} no. Poiché {{domxref ("NodeList")}} sembra davvero un array e poiché forEach è così comodo da usare, possiamo facilmente aggiungere il supporto di forEach a {{domxref ("NodeList")}} per rendere la nostra vita più facile, così:

+ +
NodeList.prototype.forEach = function (callback) {
+  Array.prototype.forEach.call(this, callback);
+}
+ +

We weren't kidding when we said it's easy to do.

+ +

Creazione di eventi Callback

+ +

Il terreno è pronto, ora possiamo iniziare a definire tutte le funzioni che verranno utilizzate ogni volta che l'utente interagisce con il nostro widget.

+ +
// Questa funzione verrà utilizzata ogni volta che si desidera disattivare un widget personalizzato
+// Richiede un parametro
+// seleziona: il nodo DOM con la classe `select` da disattivare
+function deactivateSelect(select) {
+
+  // Se il widget non è attivo non c'è nulla da fare
+  if (!select.classList.contains('active')) return;
+
+  // Abbiamo bisogno di ottenere l'elenco delle opzioni per il widget personalizzato
+  var optList = select.querySelector('.optList');
+
+  // Chiudiamo la lista delle opzioni
+  optList.classList.add('hidden');
+
+  // e disattiviamo il custom widget
+  select.classList.remove('active');
+}
+
+// questa funzione verrà utilizzata ogni volta che l'user(dis)attiverà il widget
+// prende due parametri:
+// select : il nodo del DOM con le classi 'select' da attivare
+// selectList :la lista di tutti i nodi dom con la la classe 'select'
+
+function activeSelect(select, selectList) {
+
+  // Se il widget è già attivo non c'è niente da fare
+  if (select.classList.contains('active')) return;
+
+  // Dobbiamo disattivare lo stato attivo su tutti i widget personalizzati
+   // Perché la funzione deactivateSelect soddisfa tutti i requisiti di
+   // per ogni funzione di callback, la usiamo direttamente senza usare un intermediario
+   // funzione anonima.
+  selectList.forEach(deactivateSelect);
+
+  // E attiviamo lo stato attivo per questo specifico widget
+  select.classList.add('active');
+}
+
+// Questa funzione verrà utilizzata ogni volta che l'utente desidera aprire / chiudere l'elenco di opzioni
+// Richiede un parametro:
+// seleziona: il nodo DOM con l'elenco da attivare
+function toggleOptList(select) {
+
+ // L'elenco è tenuto dal widget
+  var optList = select.querySelector('.optList');
+
+  // Modifichiamo la classe dell'elenco per mostrarlo / nasconderlo
+  optList.classList.toggle('hidden');
+}
+
+// Questa funzione verrà utilizzata ogni volta che sarà necessario evidenziare un'opzione
+// Ci vogliono due parametri:
+// seleziona: il nodo DOM con la classe `select` contenente l'opzione da evidenziare
+// opzione: il nodo DOM con la classe `option` da evidenziare
+function highlightOption(select, option) {
+
+  // Otteniamo l'elenco di tutte le opzioni disponibili per il nostro elemento di selezione personalizza
+  var optionList = select.querySelectorAll('.option');
+
+  // Rimuoviamo l'evidenziazione da tutte le opzioni
+  optionList.forEach(function (other) {
+    other.classList.remove('highlight');
+  });
+
+ // Evidenziamo l'opzione giusta
+  option.classList.add('highlight');
+};
+ +

 

+ +

Questo è tutto ciò che serve per gestire i vari stati del widget personalizzato.

+ +

Successivamente, associamo queste funzioni agli eventi appropriati:

+ +

 

+ +
// Gestiamo il binding di eventi quando il documento è caricato.
+window.addEventListener('load', function () {
+  var selectList = document.querySelectorAll('.select');
+
+  // Each custom widget needs to be initialized
+  selectList.forEach(function (select) {
+
+    // Ogni widget personalizzato deve essere inizializzato
+    var optionList = select.querySelectorAll('.option');
+
+    // Ogni volta che un utente passa il mouse su un'opzione, evidenziamo l'opzione data
+    optionList.forEach(function (option) {
+      option.addEventListener('mouseover', function () {
+        // Nota: le variabili `select` e` option` sono le chiusure
+         // disponibile nell'ambito della nostra chiamata di funzione.
+        highlightOption(select, option);
+      });
+    });
+
+    // Ogni volta che l'utente fa clic su un elemento di selezione personalizzato
+    select.addEventListener('click', function (event) {
+     // Nota: la variabile `select` è una chiusura
+       // disponibile nell'ambito della nostra chiamata di funzione.
+
+      // Accendiamo la visibilità dell'elenco di opzioni
+      toggleOptList(select);
+    });
+
+    // Nel caso in cui il widget ottenga lo stato attivo
+     // Il widget ottiene l'attenzione ogni volta che l'utente fa clic su di esso o ogni volta
+     // usano la chiave di tabulazione per accedere al widget
+    select.addEventListener('focus', function (event) {
+      // Nota: le variabili `select` e` selectList` sono le chiusure
+       // disponibile nell'ambito della nostra chiamata di funzione.
+
+      // Attiviamo il widget
+      activeSelect(select, selectList);
+    });
+
+    // Nel caso in cui il widget lasci il focus
+    select.addEventListener('blur', function (event) {
+      // Nota: la variabile `select` è una chiusura
+       // disponibile nell'ambito della nostra chiamata di funzione.
+
+       // Disattiamo il widget
+      deactivateSelect(select);
+    });
+  });
+});
+ +

A quel punto, il nostro widget cambierà stato in base al nostro progetto, ma il suo valore non viene ancora aggiornato. Lo gestiremo dopo.

+ + + + + + + + + + + + + + + +
Live example
{{EmbedLiveSample("Change_states",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_3")}}
Check out the source code
+ +

Gestire il valore del Widget

+ +

 

+ +

Ora che il nostro widget funziona, dobbiamo aggiungere del codice per aggiornarne il valore in base all'input dell'utente e rendere possibile l'invio del valore insieme ai dati del modulo.

+ +

Il modo più semplice per farlo è usare un widget nativo sotto il cofano. Tale widget terrà traccia del valore con tutti i controlli integrati forniti dal browser e il valore verrà inviato normalmente al momento della presentazione di un modulo. Non ha senso reinventare la ruota quando possiamo fare tutto questo per noi.

+ +

Come visto in precedenza, utilizziamo già un widget di selezione nativo come fallback per motivi di accessibilità; possiamo semplicemente sincronizzare il suo valore con quello del nostro widget personalizzato:

+ +

 

+ +
// Questa funzione aggiorna il valore visualizzato e lo sincronizza con il widget nativo.
+// Ci vogliono due parametri:
+// seleziona: il nodo DOM con la classe `select` contenente il valore da aggiornare
+// indice: l'indice del valore da selezionare
+function updateValue(select, index) {
+ // Abbiamo bisogno di ottenere il widget nativo per il widget personalizzato specificato
+   // Nel nostro esempio, quel widget nativo è un fratello del widget personalizzato
+  var nativeWidget = select.previousElementSibling;
+
+  // Abbiamo anche bisogno di ottenere il valore segnaposto del nostro widget personalizzato
+  var value = select.querySelector('.value');
+
+  // E abbiamo bisogno dell'intero elenco di opzioni
+  var optionList = select.querySelectorAll('.option');
+
+  // Impostiamo l'indice selezionato sull'indice di nostra scelta
+  nativeWidget.selectedIndex = index;
+
+  // Aggiorniamo il valore placeholder di conseguenza
+  value.innerHTML = optionList[index].innerHTML;
+
+  // E evidenziamo l'opzione corrispondente del nostro widget personalizzato
+  highlightOption(select, optionList[index]);
+};
+
+// Questa funzione restituisce l'indice selezionato corrente nel widget nativo
+// Richiede un parametro:
+// seleziona: il nodo DOM con la classe `select` relativa al widget nativo
+function getIndex(select) {
+ // È necessario accedere al widget nativo per il widget personalizzato specificato
+   // Nel nostro esempio, quel widget nativo è un fratello del widget personalizzato
+  var nativeWidget = select.previousElementSibling;
+
+  return nativeWidget.selectedIndex;
+};
+ +

Con queste due funzioni, possiamo associare i widget nativi a quelli personalizzati:

+ +
// Gestiamo il binding di eventi quando il documento è caricato.
+window.addEventListener('load', function () {
+  var selectList = document.querySelectorAll('.select');
+
+ // Ogni widget personalizzato deve essere inizializzato
+  selectList.forEach(function (select) {
+    var optionList = select.querySelectorAll('.option'),
+        selectedIndex = getIndex(select);
+
+    // Rendiamo focalizzabile il nostro widget personalizzato
+    select.tabIndex = 0;
+
+// Facciamo in modo che il widget nativo non sia più focalizzabile
+    select.previousElementSibling.tabIndex = -1;
+
+    // Ci assicuriamo che il valore selezionato di default sia visualizzato correttamente
+    updateValue(select, selectedIndex);
+
+    // Ogni volta che un utente fa clic su un'opzione, aggiorniamo di conseguenza il valore
+    optionList.forEach(function (option, index) {
+      option.addEventListener('click', function (event) {
+        updateValue(select, index);
+      });
+    });
+
+    // Ogni volta che un utente usa la propria tastiera su un widget focalizzato, aggiorniamo di conseguenza il valore
+    select.addEventListener('keyup', function (event) {
+      var length = optionList.length,
+          index  = getIndex(select);
+
+     // Quando l'utente preme la freccia giù, passiamo all'opzione successiva
+      if (event.keyCode === 40 && index < length - 1) { index++; }
+
+// Quando l'utente preme la freccia su, passiamo all'opzione precedente
+      if (event.keyCode === 38 && index > 0) { index--; }
+
+      updateValue(select, index);
+    });
+  });
+});
+ +

 

+ +

Nel codice sopra, vale la pena notare l'uso della proprietà tabIndex. L'utilizzo di questa proprietà è necessario per garantire che il widget nativo non acquisisca mai l'attenzione e per assicurarsi che il nostro widget personalizzato ottenga lo stato attivo quando l'utente utilizza la sua tastiera o il suo mouse.

+ +

Con quello, abbiamo finito! Ecco il risultato:

+ +

 

+ + + + + + + + + + + + + + + +
Live example
{{EmbedLiveSample("Change_states",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_4")}}
Check out the source code
+ +

Ma aspetta un secondo, abbiamo davvero finito?

+ +

Renderlo accessibile

+ +

 

+ +

Abbiamo costruito qualcosa che funziona e sebbene siamo lontani da una casella di selezione completa, funziona bene. Ma quello che abbiamo fatto non è altro che il violino con il DOM. Non ha una vera semantica e, anche se sembra una casella di selezione, dal punto di vista del browser non ne è uno, quindi le tecnologie assistive non saranno in grado di capire che è una casella di selezione. In breve, questa nuova casella di selezione non è accessibile!

+ +

Fortunatamente, esiste una soluzione e si chiama ARIA. ARIA è l'acronimo di "Accessible Rich Internet Application" ed è una specifica W3C specificamente progettata per ciò che stiamo facendo qui: rendere accessibili le applicazioni web e i widget personalizzati. È fondamentalmente un insieme di attributi che estendono l'HTML in modo da poter meglio descrivere ruoli, stati e proprietà come se l'elemento che abbiamo appena escogitato fosse l'elemento nativo per cui tentava di passare. L'utilizzo di questi attributi è estremamente semplice, quindi facciamolo.

+ +

 

+ +

L'attributo 'role'

+ +

 

+ +

L'attributo chiave utilizzato da ARIA è l'attributo 'role'. L'attributo 'role' accetta un valore che definisce per cosa viene usato un elemento. Ogni 'role' definisce i propri requisiti e comportamenti. Nel nostro esempio, useremo 'role listbox'. È un "ruolo composito", ovvero gli elementi con quel ruolo si aspettano di avere figli, ciascuno con un ruolo specifico (in questo caso, almeno un bambino con il ruolo di opzione).

+ +

Vale anche la pena notare che ARIA definisce i ruoli che vengono applicati di default al markup HTML standard. Ad esempio, l'elemento {{HTMLElement ("table")}} corrisponde alla griglia del ruolo e l'elemento {{HTMLElement ("ul")}} corrisponde all'elenco dei ruoli. Poiché utilizziamo un elemento {{HTMLElement ("ul")}}, vogliamo assicurarci che il ruolo listbox del nostro widget sostituisca il ruolo di lista dell'elemento {{HTMLElement ("ul")}}. A tal fine, useremo la presentazione del ruolo. Questo ruolo è stato progettato per farci indicare che un elemento non ha un significato speciale e viene utilizzato esclusivamente per presentare informazioni. Lo applicheremo al nostro elemento {{HTMLElement ("ul")}}.

+ +

Per supportare il ruolo listbox, dobbiamo solo aggiornare il nostro codice HTML in questo modo:

+ +

 

+ +
<! - Aggiungiamo l'attributo role = "listbox" al nostro elemento principale -><div class="select" role="listbox">
+  <span class="value">Cherry</span>
+  <! - Aggiungiamo anche il role = "presentation" all'elemento ul ->
+  <ul class="optList" role="presentation">
+    <! - E aggiungiamo l'attributo role = "option" a tutti gli elementi li ->
+    <li role="option" class="option">Cherry</li>
+    <li role="option" class="option">Lemon</li>
+    <li role="option" class="option">Banana</li>
+    <li role="option" class="option">Strawberry</li>
+    <li role="option" class="option">Apple</li>
+  </ul>
+</div>
+ +
+

Nota: Includere sia l'attributo role sia un attributo class è necessario solo se si desidera supportare i browser legacy che non supportano i selettori dell'attributo CSS. CSS attribute selectors.

+
+ +

L'attributo aria-selected 

+ +

Usare l'attributo role non è abbastanza. ARIA fornisce anche molti stati e attributi di proprietà. Più e meglio li usi, più il tuo widget sarà compreso dalle tecnologie assistive. Nel nostro caso, limiteremo il nostro utilizzo a un attributo: aria-selected.

+ +

l'attributo aria-selected è usato per contrassegnare quale opzione è attualmente selezionata; questo consente alle tecnologie assistive di informare l'utente su quale sia la selezione corrente. Lo useremo dinamicamente con JavaScript per contrassegnare l'opzione selezionata ogni volta che l'utente ne sceglie uno. A tal fine, abbiamo bisogno di rivedere la nostra funzione updateValue():

+ +
function updateValue(select, index) {
+  var nativeWidget = select.previousElementSibling;
+  var value = select.querySelector('.value');
+  var optionList = select.querySelectorAll('.option');
+
+  // Ci assicuriamo che tutte le opzioni non siano selezionate
+  optionList.forEach(function (other) {
+    other.setAttribute('aria-selected', 'false');
+  });
+
+  // Ci assicuriamo che l'opzione scelta sia selezionata
+  optionList[index].setAttribute('aria-selected', 'true');
+
+  nativeWidget.selectedIndex = index;
+  value.innerHTML = optionList[index].innerHTML;
+  highlightOption(select, optionList[index]);
+};
+ +

Ecco il risultato finale di tutti questi cambiamenti (otterrai una sensazione migliore provandola con una tecnologia di assistenza come NVDA o VoiceOver):

+ + + + + + + + + + + + + + + +
Live example
{{EmbedLiveSample("Change_states",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_5")}}
Check out the final source code
+ +

Conclusioni

+ +

 

+ +

Abbiamo visto tutti i fondamenti della creazione di un widget di modulo personalizzato, ma come puoi vedere non è banale da fare, e spesso è meglio e più facile affidarsi a librerie di terze parti invece di codificarle da zero da soli (a meno che, ovviamente, il tuo obiettivo è costruire una tale biblioteca).

+ +

Ecco alcune librerie da prendere in considerazione prima di codificare le tue:

+ +

 

+ + + +

Se vuoi andare avanti, il codice in questo esempio necessita di qualche miglioramento prima che diventi generico e riutilizzabile. Questo è un esercizio che puoi provare ad esibirti. Due suggerimenti per aiutarti in questo: il primo argomento per tutte le nostre funzioni è lo stesso, il che significa che quelle funzioni necessitano dello stesso contesto. Costruire un oggetto per condividere quel contesto sarebbe saggio. Inoltre, è necessario renderlo a prova di funzionalità; cioè, deve essere in grado di funzionare meglio con una varietà di browser la cui compatibilità con gli standard Web utilizzati varia. Divertiti!

+ +

{{PreviousMenuNext("Learn/HTML/Forms/Form_validation", "Learn/HTML/Forms/Sending_forms_through_JavaScript", "Learn/HTML/Forms")}}

+ +

 

+ +

In questo modulo

+ + + +

 

diff --git a/files/it/learn/forms/index.html b/files/it/learn/forms/index.html new file mode 100644 index 0000000000..45c0d055dd --- /dev/null +++ b/files/it/learn/forms/index.html @@ -0,0 +1,85 @@ +--- +title: HTML forms +slug: Learn/HTML/Forms +tags: + - Beginner + - Featured + - Forms + - Guide + - HTML + - Landing + - Learn + - NeedsTranslation + - TopicStub + - Web +translation_of: Learn/Forms +--- +
{{LearnSidebar}}
+ +

Questo modulo fornisce una serie di articoli che ti aiuteranno ad apprendere le parti essenziali dei web forms. I web forms sono dei tool molto potenti per l'interazione con gli utenti - sono usati di solito per la raccolta di dati dagli utenti, o per permettere loro di controllare l'interfaccia utente. Tuttavia, per questioni storiche e tecniche non è sempre chiaro come sfruttare tutto il loro potenziale. Negli articoli che seguono, copriremo tutti gli aspetti essenziali dei web forms includendo anche la realizzazione della loro struttura HTML, dello stile dei controlli del form, della validazione dei dati del form, e dell'invio dei dati al server.

+ +

Prerequisiti

+ +

Prima di iniziare questo modulo, dovresti almeno affrontare la nostra parte di introduzione all'HTML A questo punto dovresti trovare le {{anch("guide introduttive")}} facili da capire, e dovresti anche sapere utilizzare la guida base sui Native form controls.

+ +

Sapere utilizzare perfettamente i forms, comunque, richede molto più della semplice conoscenza HTML - avrai anche bisogno di imparare alcune specifiche tecniche per dare uno stile ai controlli del form, ed è richiesta anche un pò di conoscenza di scripting per affronte cose come la validazione e la creazione di controlli del form personalizzati. Pertanto, prima di andare ad affrontare le altre sezioni presenti qui sotto, ti raccomandiamo di abbandonare questa pagina ed imparare prima un pò di CSS e Javascript.

+ +

Il paragrafo qui sopra spiega bene il perchè abbiamo messo i web forms in una pagina a solo, piuttosto che mischiare un pò di questi contenuti nelle aree delle pagine che spiegano HTML, CSS e Javascript — gli elementi del form sono molto più complessi rispetto a tutti gli altri elementi HTML, e richiedono anche un connubio perfetto con le tecniche CSS e Javascript per ottenere il massimo da loro.

+ +
+

Nota bene: Se stai lavorando su un computer/tablet/altro dispositivo dove non sei in grado di creare i tuoi file, dovresti provare gli esempi di codice su un programma di coding online come JSBin o Glitch

+
+ +

Guida introduttiva

+ +
+
Il tuo primo form HTML
+
The first article in our series provides your very first experience of creating an HTML form, including designing a simple form, implementing it using the right HTML elements, adding some very simple styling via CSS, and how data is sent to a server.
+
How to structure an HTML form
+
With the basics out of the way, we now look in more detail at the elements used to provide structure and meaning to the different parts of a form.
+
+ +

What form widgets are available?

+ +
+
The native form widgets
+
We now look at the functionality of the different form widgets in detail, looking at what options are available to collect different types of data.
+
+ +

Validating and submitting form data

+ +
+
Sending form data
+
This article looks at what happens when a user submits a form — where does the data go, and how do we handle it when it gets there? We also look at some of the security concerns associated with sending form data.
+
Form data validation
+
Sending data is not enough — we also need to make sure that the data users fill out in forms is in the correct format we need to process it successfully, and that it won't break our applications. We also want to help our users to fill out our forms correctly and don't get frustrated when trying to use our apps. Form validation helps us achieve these goals — this article tells you what you need to know.
+
+ +

Advanced guides

+ +
+
How to build custom form widgets
+
You'll come across some cases where the native form widgets just don't provide what you need, e.g. because of styling or functionality. In such cases, you may need to build your own form widget out of raw HTML. This article explains how you'd do this and the considerations you need to be aware of when doing so, with a practical case study.
+
Sending forms through JavaScript
+
This article looks at ways to use a form to assemble an HTTP request and send it via custom JavaScript, rather than standard form submission. It also looks at why you'd want to do this, and the implications of doing so. (See also Using FormData objects.)
+
HTML forms in legacy browsers
+
Article covering feature detection, etc. This should be redirected to the cross browser testing module, as the same stuff is covered better there.
+
+ +

Form styling guides

+ +
+
Styling HTML forms
+
This article provides an introduction to styling forms with CSS, including all the basics you might need to know for basic styling tasks.
+
Advanced styling for HTML forms
+
Here we look at some more advanced form styling techniques that need to be used when trying to deal with some of the more difficult-to-style elements.
+
Property compatibility table for form widgets
+
This last article provides a handy reference allowing you to look up what CSS properties are compatible with what form elements.
+
+ +

See also

+ + diff --git "a/files/it/learn/getting_started_with_the_web/che_aspetto_avr\303\240_il_tuo_sito_web/index.html" "b/files/it/learn/getting_started_with_the_web/che_aspetto_avr\303\240_il_tuo_sito_web/index.html" deleted file mode 100644 index 3d3bc69f60..0000000000 --- "a/files/it/learn/getting_started_with_the_web/che_aspetto_avr\303\240_il_tuo_sito_web/index.html" +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: Che aspetto avrà il tuo sito Web? -slug: Learn/Getting_started_with_the_web/Che_aspetto_avrà_il_tuo_sito_web -tags: - - Basi - - Design - - Fonts - - Grafica - - Web - - imparare -translation_of: Learn/Getting_started_with_the_web/What_will_your_website_look_like ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}
- -
-

Che aspetto avrà il tuo sito? spiega come pianificare e lavorare sul design prima di iniziare a scrivere le primissime righe di codice. Esso include risposte a domande come "Che informazioni offre il mio sito Web?", "Quale font e colore voglio?" e "Cosa fa il mio sito?" 

-
- -

Prima di tutto: pianifica

- -

Prima che tu faccia qualsiasi cosa, devi avere qualche idea. Il tuo sito Web cosa dovrebbe esattamente fare? Un sito Web può fare praticamente tutto, ma inizialmente dovresti mantenere le cose semplici. Inizieremo creando una semplice pagina con un'intestazione, un'immagine e un po' di paragrafi.

- -

Prima di iniziare dovrai rispondere a questi domande:

- -
    -
  1. Di cosa tratterà il tuo sito Web? Ti piacciono i cani, New York, o Pacman?
    2. -
  2. Quali informazioni vorrai portare su quell'argomento? Scrivi un titolo e un po' di paragrafi e pensa a un'immagine che vorresti far vedere nella pagina.
    3. -
  3. Che aspetto ha il tuo sito Web in breve? Qual è il suo colore di sfondo? Quale genere di font è più appropriato: formale, grassetto e rumoroso, simile a un sottotitolo?
    4. -
- -
-

Nota bene: Progetti complessi necessitano di linee guida dettagliate che vadano a fondo su ogni dettaglio di colore, font, spaziatura tra gli elementi di una pagina, stile di scrittura, e così via. Per fare questo ci si basa, di solito, su guide e linee guida severe. Puoi vedere un esempio su Firefox OS Guidelines.

-
- -

Fare uno schizzo del design

- -

Successivamente, prendi carta e penna e fai uno schizzo veloce su come il tuo sito Web dovrebbe essere. Per le tue prime pagine non ci sarà molto da disegnare, ma ti abituerebbe a farlo. È un'abitudine che aiuta: ricorda che non avrai bisogno di essere Van Gogh!

- -

- -
-

Nota bene: Anche nei siti Web complessi e professionali, i team grafici di solito iniziano con diversi schizzi veloci su carta e, solo successivamente, sviluppano un modello grafico con editor o tecnologie Web.

- -

I gruppi di sviluppo Web spesso hanno sia un grafico (front-end developer) che un programmatore (back-end developer). I grafici, ovviamente, mettono insieme le idee grafiche per il sito. Gli sviluppatori UX hanno un ruolo più astratto e si occupano di come l'utente finale si interfaccerà con il sito.

-
- -

Scegliere le tue risorse

- -

A questo punto è bene iniziare a mettere insieme il contenuto che apparirà sul tuo sito Web.

- -

Testo

- -

Dovresti già avere i tuoi paragrafi e il tuo titolo da prima. Per ora tienili là.

- -

Colori del tema

- -

Per scegliere un colore, vai qui e trova il colore che più ti piace. Quando premi su un colore, vedrai uno strano codice a sei cifre come #660066. Questo è chiamato codice esadecimale, e rappresenta il tuo colore. Copia il codice in un posto sicuro per ora.

- -

- -

Immagini

- -

Per scegliere un'immagine, vai su Google Immagini e cerca qualcosa che faccia al caso tuo.

- -
    -
  1. Quando trovi l'immagine che desideri, premi sull'immagine.
    2. -
  2. Premi sul bottone Visualizza immagine.
    3. -
  3. Sulla pagina che si aprirà, premi con il tasto destro del mouse sull'immagine (Ctrl + click sul Mac), scegli Salva immagine come...,  e scegli un posto sicuro in cui salvare l'immagine. In alternativa, copia l'URL dell'immagine che trovi sulla barra degli indirizzi del tuo browser per un utilizzo futuro.
    4. -
- -

- -

- -
-

Nota bene: La maggior parte delle immagini sul Web, comprese quelle su Google Immagini, sono protette da copyright. Per ridurre la tua possibilità di una violazione del diritto d'autore, puoi usare il filtro di licenza Google. Semplicemente premi su 1) Strumenti, poi su 2) Diritti di utilizzo e, infine, sulla scelta che più soddisfa le vostre necessità:

- -

-
- -

Font

- -

Per scegliere un font:

- -
    -
  1. Vai su Google Fonts e passa la lista fino a quando non troverai quello che più ti piace. Puoi anche usare il pannello sulla destra per filtrare la ricerca.
    2. -
  2. Premi il bottone con l'icona '+' (Add to) vicino al font che desideri.
    3. -
  3. Premi sul bottone "* Family Selected" nel pannello a fondo della pagina ("*" dipenderà da quanti font avrete selezionato).
    4. -
  4. Nel pop-up che esce, puoi vedere e copiare le linee di codice che Google ti darà. Ricordati di salvarle in un editor di testo, cosicché possa usarle futuro.
    5. -
- -

- -

 

- -

- -

{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}

- -

 

- -

In questo modulo

- - - -

 

diff --git a/files/it/learn/getting_started_with_the_web/come_funziona_il_web/index.html b/files/it/learn/getting_started_with_the_web/come_funziona_il_web/index.html deleted file mode 100644 index 47fb54afda..0000000000 --- a/files/it/learn/getting_started_with_the_web/come_funziona_il_web/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: Come funziona il Web -slug: Learn/Getting_started_with_the_web/Come_funziona_il_Web -translation_of: Learn/Getting_started_with_the_web/How_the_Web_works ---- -
{{LearnSidebar}}
- -
{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}
- -
-

Come funziona il Web spiega in modo semplice quello che accade quando visualizzi una pagina web sul browser del tuo computer o telefono.

-
- -

Questa parte teorica non è essenziale sin da subito per scrivere il codice web, ma a breve ti avvantaggerà capire cosa c'è sullo sfondo.

- -

Client e server

- -

I computer connessi sul web sono chiamati client e server. Il seguente schema semplificato mostra come possono interagire tra loro:

- -

I due cerchi rappresentano client e server. Due frecce indicano rispettivamente una richiesta dal client al server e una risposta dal server al client

- - - -

Le restanti componenti del Web

- -

La descrizione appena fatta di client e server non racconta l'intera storia. Ci sono altri numerosi elementi coinvolti che descriveremo di seguito.

- -

Immaginiamo per adesso che la rete sia una strada. A un estremo della strada si trova il client, che è come la tua abitazione. All'altro estremo della strada c'è il server, che è come un negozio dal quale vuoi acquistare qualcosa.

- -

- -

Oltre al client e al server dobbiamo anche considerare:

- - - -

Ma allora: cosa accade esattamente?

- -

Quando digiti un indirizzo web all'interno del tuo browser (seguendo la nostra analogia, è come raggiungere il negozio camminando):

- -
    -
  1. Il browser contatta il server DNS e cerca il reale indirizzo del server su cui è ospitato il sito web (equivale a trovare l'indirizzo del negozio).
    2. -
  2. Il browser invia un messaggio di richiesta HTTP al server, chiedendogli di inviare una copia del sito web al client (equivale ad andare nel negozio e ordinare le merci). Questo messaggio e tutti gli altri dati inviati tra client e server sono inviati attraverso la tua connessione Internet, usando il protocollo TCP/IP.
    3. -
  3. Se il server approva la richiesta del client, gli invia un messaggio con scritto "200 OK", che significa "Ma certo che puoi guardare quel sito web! Eccolo" e inizia quindi ad inviare i file del sito web al browser in una serie di piccoli pezzi chiamati pacchetti di dati (seguendo l'analogia, al negozio ricevi i tuoi acquisti e li porti a casa).
    4. -
  4. Il browser assembla i piccoli pezzi in una pagina web completa e te la mostra (nell'analogia, l'ordine arriva alla porta di casa — sfavillante roba nuova, fantastico!).
    5. -
- -

Chiarimenti sul DNS

- -

I veri indirizzi web non sono quelle stringhe semplici e facili da ricordare che inserisci all'interno della tua barra degli indirizzi per cercare i tuoi siti web preferiti. Sono piuttosto numeri speciali dall'aspetto simile a questo: 63.245.215.20.

- -

Si chiama {{Glossary("IP Address", "IP address")}} e rappresenta una posizione unica nel Web. Ad ogni modo, non è molto facile da ricordare, non è vero? Ecco perché sono stati inventati i Domain Name Server. Si tratta di server speciali che abbinano l'indirizzo web che digiti all'interno del tuo browser (come "mozilla.org") all'indirizzo (IP) reale del sito internet.

- -

I siti web possono essere raggiunti direttamente attraverso il loro indirizzo IP. Puoi trovare l'indirizzo IP di un sito web digitando il suo dominio in uno strumento tipo IP Checker.

- -

Chiarimenti sui pacchetti

- -

Prima abbiamo usato il termine "pacchetti" per descrivere il formato in cui i dati sono inviati dal server al client. Che cosa significa? In pratica, quando i dati vengono inviati in tutto il Web, essi sono inviati sotto forma di migliaia di piccoli pezzi in modo tale che differenti utenti possano scaricare lo stesso sito web contemporaneamente. Se i siti web fossero inviati sotto forma di grandi pacchetti singoli, solamente un utente alla volta potrebbe scaricare il che, ovviamente, renderebbe il Web davvero inefficiente e poco divertente da usare.

- -

Vedi anche

- - - -

Credit

- -

Street photo: Street composing, by Kevin D.

- -

{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}

- -

In questo modulo

- - diff --git a/files/it/learn/getting_started_with_the_web/dealing_with_files/index.html b/files/it/learn/getting_started_with_the_web/dealing_with_files/index.html new file mode 100644 index 0000000000..d7c574320b --- /dev/null +++ b/files/it/learn/getting_started_with_the_web/dealing_with_files/index.html @@ -0,0 +1,95 @@ +--- +title: Gestire i file +slug: Learn/Getting_started_with_the_web/Gestire_i_file +translation_of: Learn/Getting_started_with_the_web/Dealing_with_files +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}
+ +
+

Un sito web è composto da molti file: contenuti testuali, codice, fogli di stile, contenuti multimediali e molto altro. Quando crei un sito web, devi assemblare questi files nel tuo computer in maniera strutturata,  facendo si che essi possano dialogare tra di loro e facendo in modo che tutto il contenuto appaia correttamente, prima di (eventualmente) caricarli su un server. Questa pagina esamina alcune problematiche che dovresti conoscere, così da saper impostare una struttura  corretta dei files necessari al tuo sito web.

+
+ +

Dove andrebbe collocato il tuo sito web all'interno del tuo computer?

+ +

Quando stai lavorando a un sito web localmente sul tuo computer, dovresti tenere tutti i file in una singola cartella che rispecchi la struttura di file all'interno del tuo server. Questa cartella può essere creata ovunque tu voglia, ma dovresti posizionarla in una directory dove tu possa facilmente trovarla, magari sul tuo Desktop, nella tua cartella di Home, o nella root del tuo hard drive.

+ +
    +
  1. Seleziona un posto dove archiviare i tuoi progetti web. Qui, crea una nuova cartella chiamata progetti-web (o qualcosa di simile). Ecco dove vivrà il tuo intero sito web.
    2. +
  2. Dentro questa prima cartella, crea un'altra cartella per archiviare al suo interno il tuo primo sito web. Chiamala sito-test (o qualcosa di più fantasioso).
    3. +
+ +

Un chiarimento riguardo gli spazi e la distinzione tra maiuscole e minuscole

+ +

Forse hai notato che, nel corso di questo articolo, i nomi delle cartelle e dei file sono sempre in minuscolo e senza spazi. Questo perchè:

+ +
    +
  1. Tanti computer, particolarmente i server web, fanno una distinzione tra lettere maiuscole e minuscole. Ad esempio: se crei un'immagine nella cartella test-site e le assegni il nome MyImage.jpg, ma successivamente provi ad aprirla usando myimage.jpg, potrebbe non funzionare.
    2. +
  2. Browsers, server web e linguaggi di programmazione non gestiscono gli spazi tutti allo stesso modo. Per esempio, se usi gli spazi nella denominazione di un file, alcuni sistemi li tratteranno come se fossero più nomi. Alcuni server sostituiscono lo spazio con "%20" (il codice carattere che viene usato al posto degli  spazi nei URL), rendendo impossibile aprire  tutti i tuoi link. È  meglio quindi separare con dei trattini o con delle sottolineature, ad esempio: my-file.html o my_file.html.
    3. +
+ +

In ogni caso dovresti usare il trattino per separare le parole. Google considera i trattini come separatori delle parole, ma non tratta le sottilineature allo stesso modo. Per queste ragioni è buona abitudine scrivere il nome dei file e delle cartelle in minuscolo senza spazi e separando le parole con trattini, almeno fino a quando sai cosa stai facendo. In questo modo non cadrai in errori comuni nel futuro.

+ +

Quale struttura dovrebbe avere il tuo sito?

+ +

La struttura più utilizzata in qualsiasi progetto è un file HTML, che funge da homepage, e delle cartelle per contenere immagini, fogli di stile e file di script. Vediamola insieme:

+ +
    +
  1. index.html: Questo file racchiude generalmente il contenuto della tua homepage, cioè il testo e le immagini che le persone vedono quando accedono per la prima volta al tuo sito. Usando il tuo text editor, crea un nuovo file chiamato index.html e salvalo nella cartella test-site.
    2. +
  2. cartella images: Questa cartella racchiude tutte le immagini che usi nel tuo sito. Crea una sottocartella chiamata images, nella cartella test-site.
    3. +
  3. cartella styles: Questa cartella racchiude il codice CSS usato per creare il contenuto  grafico  (per esempio, quale font usare, quali colori usare come sfondo). Crea una sottocartella chiamata  styles, nella cartella test-site.
    4. +
  4. cartella scripts: Questa cartella racchiude tutto il codice JavaScript usato per aggiungere funzioni interattive al tuo sito (per. es. tasti che caricano dei dati quando vengono cliccati ). Crea una sottocartella chiamata scripts, nella cartella test-site.
    5. +
+ +
+

Nota: Su Windows, potresti avere problemi a vedere l'estensione dei file, perchè Windows ha un opzione chiamata Nascondi estensioni per tipi di file conosciuti attivata per default. Normalmente puoi disattivarla in Windows Explorer, selezionando Opzioni cartella... , deselezionare Nascondi estensioni per tipi di file conosciuti, poi cliccando OK. Per avere più informazioni sulla tua versione di Windows, fai una ricerca su internet!

+
+ +

Percorsi dei file

+ +

Per permettere ad un file di trovarne un altro, dovremo indicare un percorso tra di loro - in pratica creare un itinerario, così che un file possa sapere dov'è l'altro. Per dimostrare ciò, inseriremo un po' di codice HTML nel nostro file index.html, rendendo così possibile mostrare l'immagine scelta nell'articolo "Come dovrebbe apparire il tuo sito web?"

+ +
    +
  1. Copia l'immagine scelta in precedenza nella cartella images.
    2. +
  2. Apri il file index.html, e inserisci il codice che segue, così come lo vedi scritto. Non preoccuparti  del suo significato per ora - approfondiremo i dettagli più avanti. + 
    <!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>La mia pagina di prova</title>
+  </head>
+  <body>
+    <img src="" alt="La mia immagine di prova">
+  </body>
+</html>
    +
    3. +
  3. La riga <img src="" alt="My test image"> è il codice HTML che si occupa di mostrare l'immagine nella pagina. Dobbiamo indicare nell'HTML dove trovare l'immagine: essa si trova all'interno della directory images, che a sua volta è nella directory comune a index.html. Scorrendo lo schema strutturale da index.html alla nostra immagine, il percorso che dovremmo avere è: images/your-image-filename. Se ad esempio, la mia immagine si chiama firefox-icon.png, allora il percorso corretto sarà images/firefox-icon.png.
    4. +
  4. Scrivi l'indirizzo del file nel codice HTML, tra le virgolette di src="".
    5. +
  5. Salva il tuo file HTML, ed aprilo con il browser web (puoi farlo velocemente con un doppio click). Dovresti vedere l'immagine nella tua pagina web appena creata.
    6. +
+ +

A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world

+ +

Alcune regole generali per i percorsi dei file:

+ + + +

For now, this is about all you need to know.

+ +
+

Nota: Il file system di Windows, usa i backslash, non i forward slash, esempio: C:\windows. Questo nel codice HTML non conta — anche se stai sviluppando il tuo sito web su Windows, è obbligatorio usare i forward slash nel codice.

+
+ +

Cos'altro dovrei fare?

+ +

Per ora è tutto. L'albero della tua cartella / directory, dovrebbe essere simile a questo:

+ +

A file structure in mac os x finder, showing an images folder with an image in, empty scripts and styles folders, and an index.html file

+ +

{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}

diff --git a/files/it/learn/getting_started_with_the_web/gestire_i_file/index.html b/files/it/learn/getting_started_with_the_web/gestire_i_file/index.html deleted file mode 100644 index d7c574320b..0000000000 --- a/files/it/learn/getting_started_with_the_web/gestire_i_file/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: Gestire i file -slug: Learn/Getting_started_with_the_web/Gestire_i_file -translation_of: Learn/Getting_started_with_the_web/Dealing_with_files ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}
- -
-

Un sito web è composto da molti file: contenuti testuali, codice, fogli di stile, contenuti multimediali e molto altro. Quando crei un sito web, devi assemblare questi files nel tuo computer in maniera strutturata,  facendo si che essi possano dialogare tra di loro e facendo in modo che tutto il contenuto appaia correttamente, prima di (eventualmente) caricarli su un server. Questa pagina esamina alcune problematiche che dovresti conoscere, così da saper impostare una struttura  corretta dei files necessari al tuo sito web.

-
- -

Dove andrebbe collocato il tuo sito web all'interno del tuo computer?

- -

Quando stai lavorando a un sito web localmente sul tuo computer, dovresti tenere tutti i file in una singola cartella che rispecchi la struttura di file all'interno del tuo server. Questa cartella può essere creata ovunque tu voglia, ma dovresti posizionarla in una directory dove tu possa facilmente trovarla, magari sul tuo Desktop, nella tua cartella di Home, o nella root del tuo hard drive.

- -
    -
  1. Seleziona un posto dove archiviare i tuoi progetti web. Qui, crea una nuova cartella chiamata progetti-web (o qualcosa di simile). Ecco dove vivrà il tuo intero sito web.
    2. -
  2. Dentro questa prima cartella, crea un'altra cartella per archiviare al suo interno il tuo primo sito web. Chiamala sito-test (o qualcosa di più fantasioso).
    3. -
- -

Un chiarimento riguardo gli spazi e la distinzione tra maiuscole e minuscole

- -

Forse hai notato che, nel corso di questo articolo, i nomi delle cartelle e dei file sono sempre in minuscolo e senza spazi. Questo perchè:

- -
    -
  1. Tanti computer, particolarmente i server web, fanno una distinzione tra lettere maiuscole e minuscole. Ad esempio: se crei un'immagine nella cartella test-site e le assegni il nome MyImage.jpg, ma successivamente provi ad aprirla usando myimage.jpg, potrebbe non funzionare.
    2. -
  2. Browsers, server web e linguaggi di programmazione non gestiscono gli spazi tutti allo stesso modo. Per esempio, se usi gli spazi nella denominazione di un file, alcuni sistemi li tratteranno come se fossero più nomi. Alcuni server sostituiscono lo spazio con "%20" (il codice carattere che viene usato al posto degli  spazi nei URL), rendendo impossibile aprire  tutti i tuoi link. È  meglio quindi separare con dei trattini o con delle sottolineature, ad esempio: my-file.html o my_file.html.
    3. -
- -

In ogni caso dovresti usare il trattino per separare le parole. Google considera i trattini come separatori delle parole, ma non tratta le sottilineature allo stesso modo. Per queste ragioni è buona abitudine scrivere il nome dei file e delle cartelle in minuscolo senza spazi e separando le parole con trattini, almeno fino a quando sai cosa stai facendo. In questo modo non cadrai in errori comuni nel futuro.

- -

Quale struttura dovrebbe avere il tuo sito?

- -

La struttura più utilizzata in qualsiasi progetto è un file HTML, che funge da homepage, e delle cartelle per contenere immagini, fogli di stile e file di script. Vediamola insieme:

- -
    -
  1. index.html: Questo file racchiude generalmente il contenuto della tua homepage, cioè il testo e le immagini che le persone vedono quando accedono per la prima volta al tuo sito. Usando il tuo text editor, crea un nuovo file chiamato index.html e salvalo nella cartella test-site.
    2. -
  2. cartella images: Questa cartella racchiude tutte le immagini che usi nel tuo sito. Crea una sottocartella chiamata images, nella cartella test-site.
    3. -
  3. cartella styles: Questa cartella racchiude il codice CSS usato per creare il contenuto  grafico  (per esempio, quale font usare, quali colori usare come sfondo). Crea una sottocartella chiamata  styles, nella cartella test-site.
    4. -
  4. cartella scripts: Questa cartella racchiude tutto il codice JavaScript usato per aggiungere funzioni interattive al tuo sito (per. es. tasti che caricano dei dati quando vengono cliccati ). Crea una sottocartella chiamata scripts, nella cartella test-site.
    5. -
- -
-

Nota: Su Windows, potresti avere problemi a vedere l'estensione dei file, perchè Windows ha un opzione chiamata Nascondi estensioni per tipi di file conosciuti attivata per default. Normalmente puoi disattivarla in Windows Explorer, selezionando Opzioni cartella... , deselezionare Nascondi estensioni per tipi di file conosciuti, poi cliccando OK. Per avere più informazioni sulla tua versione di Windows, fai una ricerca su internet!

-
- -

Percorsi dei file

- -

Per permettere ad un file di trovarne un altro, dovremo indicare un percorso tra di loro - in pratica creare un itinerario, così che un file possa sapere dov'è l'altro. Per dimostrare ciò, inseriremo un po' di codice HTML nel nostro file index.html, rendendo così possibile mostrare l'immagine scelta nell'articolo "Come dovrebbe apparire il tuo sito web?"

- -
    -
  1. Copia l'immagine scelta in precedenza nella cartella images.
    2. -
  2. Apri il file index.html, e inserisci il codice che segue, così come lo vedi scritto. Non preoccuparti  del suo significato per ora - approfondiremo i dettagli più avanti. - 
    <!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>La mia pagina di prova</title>
-  </head>
-  <body>
-    <img src="" alt="La mia immagine di prova">
-  </body>
-</html>
    -
    3. -
  3. La riga <img src="" alt="My test image"> è il codice HTML che si occupa di mostrare l'immagine nella pagina. Dobbiamo indicare nell'HTML dove trovare l'immagine: essa si trova all'interno della directory images, che a sua volta è nella directory comune a index.html. Scorrendo lo schema strutturale da index.html alla nostra immagine, il percorso che dovremmo avere è: images/your-image-filename. Se ad esempio, la mia immagine si chiama firefox-icon.png, allora il percorso corretto sarà images/firefox-icon.png.
    4. -
  4. Scrivi l'indirizzo del file nel codice HTML, tra le virgolette di src="".
    5. -
  5. Salva il tuo file HTML, ed aprilo con il browser web (puoi farlo velocemente con un doppio click). Dovresti vedere l'immagine nella tua pagina web appena creata.
    6. -
- -

A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world

- -

Alcune regole generali per i percorsi dei file:

- - - -

For now, this is about all you need to know.

- -
-

Nota: Il file system di Windows, usa i backslash, non i forward slash, esempio: C:\windows. Questo nel codice HTML non conta — anche se stai sviluppando il tuo sito web su Windows, è obbligatorio usare i forward slash nel codice.

-
- -

Cos'altro dovrei fare?

- -

Per ora è tutto. L'albero della tua cartella / directory, dovrebbe essere simile a questo:

- -

A file structure in mac os x finder, showing an images folder with an image in, empty scripts and styles folders, and an index.html file

- -

{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}

diff --git a/files/it/learn/getting_started_with_the_web/how_the_web_works/index.html b/files/it/learn/getting_started_with_the_web/how_the_web_works/index.html new file mode 100644 index 0000000000..47fb54afda --- /dev/null +++ b/files/it/learn/getting_started_with_the_web/how_the_web_works/index.html @@ -0,0 +1,99 @@ +--- +title: Come funziona il Web +slug: Learn/Getting_started_with_the_web/Come_funziona_il_Web +translation_of: Learn/Getting_started_with_the_web/How_the_Web_works +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}
+ +
+

Come funziona il Web spiega in modo semplice quello che accade quando visualizzi una pagina web sul browser del tuo computer o telefono.

+
+ +

Questa parte teorica non è essenziale sin da subito per scrivere il codice web, ma a breve ti avvantaggerà capire cosa c'è sullo sfondo.

+ +

Client e server

+ +

I computer connessi sul web sono chiamati client e server. Il seguente schema semplificato mostra come possono interagire tra loro:

+ +

I due cerchi rappresentano client e server. Due frecce indicano rispettivamente una richiesta dal client al server e una risposta dal server al client

+ + + +

Le restanti componenti del Web

+ +

La descrizione appena fatta di client e server non racconta l'intera storia. Ci sono altri numerosi elementi coinvolti che descriveremo di seguito.

+ +

Immaginiamo per adesso che la rete sia una strada. A un estremo della strada si trova il client, che è come la tua abitazione. All'altro estremo della strada c'è il server, che è come un negozio dal quale vuoi acquistare qualcosa.

+ +

+ +

Oltre al client e al server dobbiamo anche considerare:

+ + + +

Ma allora: cosa accade esattamente?

+ +

Quando digiti un indirizzo web all'interno del tuo browser (seguendo la nostra analogia, è come raggiungere il negozio camminando):

+ +
    +
  1. Il browser contatta il server DNS e cerca il reale indirizzo del server su cui è ospitato il sito web (equivale a trovare l'indirizzo del negozio).
    2. +
  2. Il browser invia un messaggio di richiesta HTTP al server, chiedendogli di inviare una copia del sito web al client (equivale ad andare nel negozio e ordinare le merci). Questo messaggio e tutti gli altri dati inviati tra client e server sono inviati attraverso la tua connessione Internet, usando il protocollo TCP/IP.
    3. +
  3. Se il server approva la richiesta del client, gli invia un messaggio con scritto "200 OK", che significa "Ma certo che puoi guardare quel sito web! Eccolo" e inizia quindi ad inviare i file del sito web al browser in una serie di piccoli pezzi chiamati pacchetti di dati (seguendo l'analogia, al negozio ricevi i tuoi acquisti e li porti a casa).
    4. +
  4. Il browser assembla i piccoli pezzi in una pagina web completa e te la mostra (nell'analogia, l'ordine arriva alla porta di casa — sfavillante roba nuova, fantastico!).
    5. +
+ +

Chiarimenti sul DNS

+ +

I veri indirizzi web non sono quelle stringhe semplici e facili da ricordare che inserisci all'interno della tua barra degli indirizzi per cercare i tuoi siti web preferiti. Sono piuttosto numeri speciali dall'aspetto simile a questo: 63.245.215.20.

+ +

Si chiama {{Glossary("IP Address", "IP address")}} e rappresenta una posizione unica nel Web. Ad ogni modo, non è molto facile da ricordare, non è vero? Ecco perché sono stati inventati i Domain Name Server. Si tratta di server speciali che abbinano l'indirizzo web che digiti all'interno del tuo browser (come "mozilla.org") all'indirizzo (IP) reale del sito internet.

+ +

I siti web possono essere raggiunti direttamente attraverso il loro indirizzo IP. Puoi trovare l'indirizzo IP di un sito web digitando il suo dominio in uno strumento tipo IP Checker.

+ +

Chiarimenti sui pacchetti

+ +

Prima abbiamo usato il termine "pacchetti" per descrivere il formato in cui i dati sono inviati dal server al client. Che cosa significa? In pratica, quando i dati vengono inviati in tutto il Web, essi sono inviati sotto forma di migliaia di piccoli pezzi in modo tale che differenti utenti possano scaricare lo stesso sito web contemporaneamente. Se i siti web fossero inviati sotto forma di grandi pacchetti singoli, solamente un utente alla volta potrebbe scaricare il che, ovviamente, renderebbe il Web davvero inefficiente e poco divertente da usare.

+ +

Vedi anche

+ + + +

Credit

+ +

Street photo: Street composing, by Kevin D.

+ +

{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}

+ +

In questo modulo

+ + diff --git a/files/it/learn/getting_started_with_the_web/pubbicare_sito/index.html b/files/it/learn/getting_started_with_the_web/pubbicare_sito/index.html deleted file mode 100644 index 933bd4245c..0000000000 --- a/files/it/learn/getting_started_with_the_web/pubbicare_sito/index.html +++ /dev/null @@ -1,128 +0,0 @@ ---- -title: Pubblicare il tuo sito -slug: Learn/Getting_started_with_the_web/Pubbicare_sito -tags: - - Advanced - - Beginner - - CodingScripting - - FTP - - GitHub - - Google App Engine - - Learn - - Web - - 'l10n:priority' - - publishing - - web server -translation_of: Learn/Getting_started_with_the_web/Publishing_your_website ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}
- -
-

Una volta finito di scrivere il codice e di organizzare i file del tuo sito, dovrai caricarli online per permettere ad altri di accedervi. Questo articolo ti aiuterà a mettere online la tua creazione senza troppi sforzi.

-
- -

Quali opzioni ho?

- -

Ci sono molti modi per pubblicare un sito e l'argomento è molto vasto. Lo scopo di questo articolo non è compilare una lista di tutte le opzioni possibili, ma piuttosto illustrare i pro e i contro dei tre metodi principali più indicati per i principianti e orientarti verso uno in particolare che dà risultati immediati per la maggior parte dei lettori.

- -

Acquistare un hosting e un dominio

- -

Per gestire più liberamente i contenuti e l'aspetto del proprio sito, molti scelgono di acquistare:

- - - -

Molti siti professionali adottano questa soluzione.

- -

Inoltre avrai bisogno di un programma {{Glossary("FTP", "File Transfer Protocol (FTP)")}} per trasferire i file dal tuo computer al server web (consulta How much does it cost: software per ulteriori dettagli). Ogni programma FTP funziona in modo diverso, ma in linea generale devi connetterli al tuo server web immettendo le credenziali fornite dalla tua compagnia di hosting (es. username, password, hostname). Una volta connesso, vedrai i file locali (sul tuo PC) e i file del server web in due finestre separate e potrai trasferirli da una parte all'altra:

- -

- -

Consigli su hosting e domini

- - - -

Usare una piattaforma online come GitHub o Google App Engine

- -

Puoi pubblicare il tuo sito anche attraverso alcune piattaforme:

- - - -

A differenza della maggior parte degli hosting, questi strumenti sono gratuiti ma hanno delle funzionalità limitate.

- -

Usare un IDE online come CodePen

- -

Online si possono trovare numerose applicazioni web che emulano l'ambiente di sviluppo di un sito, consentendoti di vedere in tempo reale come appare il codice HTML, CSS e JavaScript mentre lo scrivi… tutto in un'unica finestra del browser! In generale, questi strumenti sono abbastanza semplici, ottimi per imparare e per condividere codice (ad esempio se vuoi mostrare una certa procedura o chiedere ai colleghi di effettuare un debug) e gratuiti accontentandosi delle funzionalità base. La pagina generata dal tuo codice viene ospitata su un indirizzo web univoco. Le funzionalità base sono però limitate e di solito non offrono spazio per ospitare risorse (come le immagini).

- -

Prova alcuni tra questi servizi e scegli quello più adatto alle tue esigenze:

- - - -

- -

Pubblicare con GitHub

- -

Vediamo ora i passi per pubblicare il tuo sito su GitHub Pages:

- -
    -
  1. Registra un account GitHub e verifica il tuo indirizzo email.
    2. -
  2. Crea un repository per i tuoi file.
    3. -
  3. Su questa pagina, nella casella Repository name, inserisci username.github.io, dove username è il tuo username. Per esempio, Mario Rossi scriverà qualcosa come mariorossi.github.io.
    - Inoltre, spunta la casella "Initialize this repository with a README" e fai clic su Create repository.
    4. -
  4. Ora trascina e rilascia i contenuti del tuo sito nel repository e fai clic su Commit changes. -
    -

    Nota: Assicurati che la tua cartella contenga un file chiamato index.html.

    -
    -
    5. -
  5. -

    Apri username.github.io per vedere il tuo sito online. Per esempio, per il nome utente chrisdavidmills, vai a chrisdavidmills.github.io.

    - -
    -

    Nota: Potrebbero essere necessari alcuni minuti perché il sito vada online. Se non lo vedi immediatamente, attendi alcuni minuti e riprova.

    -
    -
    6. -
- -

Per approfondire consulta GitHub Pages Help.

- -

Approfondimenti

- - - -

{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}

- -

In questo modulo

- - diff --git a/files/it/learn/getting_started_with_the_web/publishing_your_website/index.html b/files/it/learn/getting_started_with_the_web/publishing_your_website/index.html new file mode 100644 index 0000000000..933bd4245c --- /dev/null +++ b/files/it/learn/getting_started_with_the_web/publishing_your_website/index.html @@ -0,0 +1,128 @@ +--- +title: Pubblicare il tuo sito +slug: Learn/Getting_started_with_the_web/Pubbicare_sito +tags: + - Advanced + - Beginner + - CodingScripting + - FTP + - GitHub + - Google App Engine + - Learn + - Web + - 'l10n:priority' + - publishing + - web server +translation_of: Learn/Getting_started_with_the_web/Publishing_your_website +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}
+ +
+

Una volta finito di scrivere il codice e di organizzare i file del tuo sito, dovrai caricarli online per permettere ad altri di accedervi. Questo articolo ti aiuterà a mettere online la tua creazione senza troppi sforzi.

+
+ +

Quali opzioni ho?

+ +

Ci sono molti modi per pubblicare un sito e l'argomento è molto vasto. Lo scopo di questo articolo non è compilare una lista di tutte le opzioni possibili, ma piuttosto illustrare i pro e i contro dei tre metodi principali più indicati per i principianti e orientarti verso uno in particolare che dà risultati immediati per la maggior parte dei lettori.

+ +

Acquistare un hosting e un dominio

+ +

Per gestire più liberamente i contenuti e l'aspetto del proprio sito, molti scelgono di acquistare:

+ + + +

Molti siti professionali adottano questa soluzione.

+ +

Inoltre avrai bisogno di un programma {{Glossary("FTP", "File Transfer Protocol (FTP)")}} per trasferire i file dal tuo computer al server web (consulta How much does it cost: software per ulteriori dettagli). Ogni programma FTP funziona in modo diverso, ma in linea generale devi connetterli al tuo server web immettendo le credenziali fornite dalla tua compagnia di hosting (es. username, password, hostname). Una volta connesso, vedrai i file locali (sul tuo PC) e i file del server web in due finestre separate e potrai trasferirli da una parte all'altra:

+ +

+ +

Consigli su hosting e domini

+ + + +

Usare una piattaforma online come GitHub o Google App Engine

+ +

Puoi pubblicare il tuo sito anche attraverso alcune piattaforme:

+ + + +

A differenza della maggior parte degli hosting, questi strumenti sono gratuiti ma hanno delle funzionalità limitate.

+ +

Usare un IDE online come CodePen

+ +

Online si possono trovare numerose applicazioni web che emulano l'ambiente di sviluppo di un sito, consentendoti di vedere in tempo reale come appare il codice HTML, CSS e JavaScript mentre lo scrivi… tutto in un'unica finestra del browser! In generale, questi strumenti sono abbastanza semplici, ottimi per imparare e per condividere codice (ad esempio se vuoi mostrare una certa procedura o chiedere ai colleghi di effettuare un debug) e gratuiti accontentandosi delle funzionalità base. La pagina generata dal tuo codice viene ospitata su un indirizzo web univoco. Le funzionalità base sono però limitate e di solito non offrono spazio per ospitare risorse (come le immagini).

+ +

Prova alcuni tra questi servizi e scegli quello più adatto alle tue esigenze:

+ + + +

+ +

Pubblicare con GitHub

+ +

Vediamo ora i passi per pubblicare il tuo sito su GitHub Pages:

+ +
    +
  1. Registra un account GitHub e verifica il tuo indirizzo email.
    2. +
  2. Crea un repository per i tuoi file.
    3. +
  3. Su questa pagina, nella casella Repository name, inserisci username.github.io, dove username è il tuo username. Per esempio, Mario Rossi scriverà qualcosa come mariorossi.github.io.
    + Inoltre, spunta la casella "Initialize this repository with a README" e fai clic su Create repository.
    4. +
  4. Ora trascina e rilascia i contenuti del tuo sito nel repository e fai clic su Commit changes. +
    +

    Nota: Assicurati che la tua cartella contenga un file chiamato index.html.

    +
    +
    5. +
  5. +

    Apri username.github.io per vedere il tuo sito online. Per esempio, per il nome utente chrisdavidmills, vai a chrisdavidmills.github.io.

    + +
    +

    Nota: Potrebbero essere necessari alcuni minuti perché il sito vada online. Se non lo vedi immediatamente, attendi alcuni minuti e riprova.

    +
    +
    6. +
+ +

Per approfondire consulta GitHub Pages Help.

+ +

Approfondimenti

+ + + +

{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}

+ +

In questo modulo

+ + diff --git a/files/it/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html b/files/it/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html new file mode 100644 index 0000000000..3d3bc69f60 --- /dev/null +++ b/files/it/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html @@ -0,0 +1,117 @@ +--- +title: Che aspetto avrà il tuo sito Web? +slug: Learn/Getting_started_with_the_web/Che_aspetto_avrà_il_tuo_sito_web +tags: + - Basi + - Design + - Fonts + - Grafica + - Web + - imparare +translation_of: Learn/Getting_started_with_the_web/What_will_your_website_look_like +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}
+ +
+

Che aspetto avrà il tuo sito? spiega come pianificare e lavorare sul design prima di iniziare a scrivere le primissime righe di codice. Esso include risposte a domande come "Che informazioni offre il mio sito Web?", "Quale font e colore voglio?" e "Cosa fa il mio sito?" 

+
+ +

Prima di tutto: pianifica

+ +

Prima che tu faccia qualsiasi cosa, devi avere qualche idea. Il tuo sito Web cosa dovrebbe esattamente fare? Un sito Web può fare praticamente tutto, ma inizialmente dovresti mantenere le cose semplici. Inizieremo creando una semplice pagina con un'intestazione, un'immagine e un po' di paragrafi.

+ +

Prima di iniziare dovrai rispondere a questi domande:

+ +
    +
  1. Di cosa tratterà il tuo sito Web? Ti piacciono i cani, New York, o Pacman?
    2. +
  2. Quali informazioni vorrai portare su quell'argomento? Scrivi un titolo e un po' di paragrafi e pensa a un'immagine che vorresti far vedere nella pagina.
    3. +
  3. Che aspetto ha il tuo sito Web in breve? Qual è il suo colore di sfondo? Quale genere di font è più appropriato: formale, grassetto e rumoroso, simile a un sottotitolo?
    4. +
+ +
+

Nota bene: Progetti complessi necessitano di linee guida dettagliate che vadano a fondo su ogni dettaglio di colore, font, spaziatura tra gli elementi di una pagina, stile di scrittura, e così via. Per fare questo ci si basa, di solito, su guide e linee guida severe. Puoi vedere un esempio su Firefox OS Guidelines.

+
+ +

Fare uno schizzo del design

+ +

Successivamente, prendi carta e penna e fai uno schizzo veloce su come il tuo sito Web dovrebbe essere. Per le tue prime pagine non ci sarà molto da disegnare, ma ti abituerebbe a farlo. È un'abitudine che aiuta: ricorda che non avrai bisogno di essere Van Gogh!

+ +

+ +
+

Nota bene: Anche nei siti Web complessi e professionali, i team grafici di solito iniziano con diversi schizzi veloci su carta e, solo successivamente, sviluppano un modello grafico con editor o tecnologie Web.

+ +

I gruppi di sviluppo Web spesso hanno sia un grafico (front-end developer) che un programmatore (back-end developer). I grafici, ovviamente, mettono insieme le idee grafiche per il sito. Gli sviluppatori UX hanno un ruolo più astratto e si occupano di come l'utente finale si interfaccerà con il sito.

+
+ +

Scegliere le tue risorse

+ +

A questo punto è bene iniziare a mettere insieme il contenuto che apparirà sul tuo sito Web.

+ +

Testo

+ +

Dovresti già avere i tuoi paragrafi e il tuo titolo da prima. Per ora tienili là.

+ +

Colori del tema

+ +

Per scegliere un colore, vai qui e trova il colore che più ti piace. Quando premi su un colore, vedrai uno strano codice a sei cifre come #660066. Questo è chiamato codice esadecimale, e rappresenta il tuo colore. Copia il codice in un posto sicuro per ora.

+ +

+ +

Immagini

+ +

Per scegliere un'immagine, vai su Google Immagini e cerca qualcosa che faccia al caso tuo.

+ +
    +
  1. Quando trovi l'immagine che desideri, premi sull'immagine.
    2. +
  2. Premi sul bottone Visualizza immagine.
    3. +
  3. Sulla pagina che si aprirà, premi con il tasto destro del mouse sull'immagine (Ctrl + click sul Mac), scegli Salva immagine come...,  e scegli un posto sicuro in cui salvare l'immagine. In alternativa, copia l'URL dell'immagine che trovi sulla barra degli indirizzi del tuo browser per un utilizzo futuro.
    4. +
+ +

+ +

+ +
+

Nota bene: La maggior parte delle immagini sul Web, comprese quelle su Google Immagini, sono protette da copyright. Per ridurre la tua possibilità di una violazione del diritto d'autore, puoi usare il filtro di licenza Google. Semplicemente premi su 1) Strumenti, poi su 2) Diritti di utilizzo e, infine, sulla scelta che più soddisfa le vostre necessità:

+ +

+
+ +

Font

+ +

Per scegliere un font:

+ +
    +
  1. Vai su Google Fonts e passa la lista fino a quando non troverai quello che più ti piace. Puoi anche usare il pannello sulla destra per filtrare la ricerca.
    2. +
  2. Premi il bottone con l'icona '+' (Add to) vicino al font che desideri.
    3. +
  3. Premi sul bottone "* Family Selected" nel pannello a fondo della pagina ("*" dipenderà da quanti font avrete selezionato).
    4. +
  4. Nel pop-up che esce, puoi vedere e copiare le linee di codice che Google ti darà. Ricordati di salvarle in un editor di testo, cosicché possa usarle futuro.
    5. +
+ +

+ +

 

+ +

+ +

{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}

+ +

 

+ +

In questo modulo

+ + + +

 

diff --git a/files/it/learn/html/forms/come_costruire_custom_form_widgets_personalizzati/index.html b/files/it/learn/html/forms/come_costruire_custom_form_widgets_personalizzati/index.html deleted file mode 100644 index 288fa8e1c2..0000000000 --- a/files/it/learn/html/forms/come_costruire_custom_form_widgets_personalizzati/index.html +++ /dev/null @@ -1,825 +0,0 @@ ---- -title: Come costruire form widget personalizzati -slug: Learn/HTML/Forms/Come_costruire_custom_form_widgets_personalizzati -translation_of: Learn/Forms/How_to_build_custom_form_controls ---- -
{{PreviousMenuNext("Learn/HTML/Forms/Form_validation", "Learn/HTML/Forms/Sending_forms_through_JavaScript", "Learn/HTML/Forms")}}
- -

Ci sono molti casi in cui i widget del modulo html disponibili non sono abbastanza. Se vuoi eseguire uno styling avanzato su alcuni widget come l'elemento {{HTMLElement("select")}}  o sei vuoi fornirli di comportamenti personalizzati, l'unica scelta che hai è quella di costruirti il tuo widget personale.

- -

In quest'articolo vedremo come costruire questo tipo di widget. A tal fine lavoreremo con un esempio: ricostruire l'elemento {{HTMLElement("select")}} .

- -
-

Nota: ci concentreremo sulla costruzione del widget, non su come rendere il codice generico e riutilizzabile; questo comporterebbe del codice JavaScript and la manipolazione del DOM in un contesto sconosciuto, uscendo fuori dallo scopo di quest'articolo.

-
- -

Design, strutture, e semantica

- -

Prima di costruire un widget personalizzato, dovresti cominciare a pensare esattamente cosa vuoi. Questo ti aiuterà a evitare perdite di tempo. In particolare, e' importante definire chiaramente tutti gli stati del tuo widget. Per fare ciò, è bene cominciare da un widget esistente che ha stati e comportamenti ben noti.

- -

Nel nostro esempio ricostruiremo l'elemento {{HTMLElement("select")}} . Ecco il risultato che vogliamo raggiungere:

- -

The three states of a select box

- -

Questo screenshot ci illustra i tre stati principali del nostro widget: lo stato normale(a sinistra); lo stato di attivazione ( al centro) and lo stato aperto (a destra).

- -

In termini di compartamento vogliamo che il nostro widget sia utilizabile con il mouse e con la tastiera, proprio come un ogni widget non modificato. Cominciamo definendo come il widget raggiungerà uno stato:

- -
-
Il widget è nel suo stato normale quando:
-
-
    -
  • la pagina carica
    • -
  • Il widget era attivo e l'utente fa clico ovunque al di fuori del widget
    • -
  • il widget era attivo e l'utente sposta lo stato attivo su un altro widget usando la tastiera
    • -
- -
-

Nota: Moving the focus around the page is usually done through hitting the tab key, but this is not standard everywhere. For example cycling through links on a page is done in Safari by default using the Option+Tab combination.

-
-
-
Il widget è nel suo stato attivo quando:
-
-
    -
  • L'user lo clicca
    • -
  • L'user clicca il tasto tab e lo evidenzia
    • -
  • il widget era aperto and l'user clicca sul widget.
    • -
-
-
Il widget è nello stato di apertura quando:
-
-
    -
  • il widget è in uno stato diverso da quello aperto e l'utente fa clic su di esso
    • -
-
-
- -

Una volta compreso come cambiare gli stati, e importante definire come cambiare i valori del widget:

- -
-
I valori cambiano quando:
-
-
    -
  • l'user clicca su un'opzione quando il widget è nello stato di apertura
    • -
  • l'user preme dalla tastiera la frecciasu o giù quando il widget è aperto 
    • -
-
-
- -

Finalmente, possiamo definire come le opzioni del widget dovranno comportarsi:

- - - -

Ai fini del nostro esempio, ci fermeremo qui; comunque, se sei un lettore attendo avrai notato che mancano dei comportamenti. Per esempio: Cosa accadrà se l'user preme tab MENTRE il widget è aperto?La risposta è... Nulla. OK, il comportamento corretto sembra ovvio ma il fatto è che, poiché non è definito nelle nostre specifiche, è molto facile trascurare questo comportamento. Ciò è particolarmente vero in un ambiente di squadra quando le persone che progettano il comportamento del widget sono diverse da quelle che lo implementano.

- -

Un altro esempio divertente: Cosa succederà se l'user premerà il tasto su o giù mentre il widget è aperto? Questo è un po' più complicato. Se consideri che lo stato attivo e lo stato aperto sono totalmente diversi, la risposta è di nuovo " non succederà niente"!
- Perchè non abbiamo definito nessuna interazione con la tastiera quando il widget è aperto.D'altronde, se si considera che lo stato attivo e lo stato aperto si sovrappongono un po', il valore potrebbe cambiare ma l'opzione ma l'opzione non sarà sicuramente evidenziata di conseguenza, ancora una volta perchè non abbiamo definito interazioni con la tastiera con le opzioni quando il widget si trova nel suo stato aperto (abbiamo solo definito cosa dovrebbe accadere quando il widget è aperto, ma nulla dopo).

- -

le specifiche mancanti sono ovvie, quindi le gestiremo, ma potrebbe rivelare dei problemi in widget nuovi ed esotici, fper cui nessuno ha la minima idea di quale sia il comportamento giusto. E' sempre opportuno utilizzare bene il proprio tempo in questa fase di desgin: se definisci malamente un comportamento, o dimentichi di definirne uno, sarà molto difficile ridefinirlo una volta che gli utenti si saranno abituati. Se hai dubbi, chiedi l'opinione altrui , e se disponi di un budget non esitare in un user tests. Questo processo è chiamato UX design. Se vuoi conoscere di più a proposito di questo argomento, dovresti controllare le seguenti risorse:

- - - -
-

Nota: In molti sistemi c'è un modo per aprire l'elemento {{HTMLElement("select")}} per esaminare tutte le scelte disponibili (lo stesso elemento {{HTMLElement("select")}} ). This is achieved with Alt+Down arrow under Windows and was not implemented in our example —but it would be easy to do so, as the mechanism has already been implemented for the click event.

-
- -

Definire la struttura e la semantica HTML

- -

Ora che le funzionalità basi del nostro widget sono state deficse, e' tempo di cominciare a costruire il nostro widget. Il primo passo è di definire la struttura HTML . Questo è ciò che dobbiamo ricostruire {{HTMLElement("select")}}:

- -
<!-- Questo è il nostro container
-     principale per il nostro widget.
-     l'attributo tabindex permette
-     all'utente di concentrarsi sul widget.
-     Vedremo dopo cos'è meglio
-     utilizzare con javascript. -->
-
-<div class="select" tabindex="0">
-
-  <!-- Questo container verrà usato per stampare il valore corrente del widget -->
-  <span class="value">Cherry</span>
-
-  <!-- Questo container conterrà tutte le opzioni disponibili per il nostro widget.
-       dato che sarà una lista, utilizzare l'opzione ul è valido. -->
-  <ul class="optList">
-    <!-- Ogni opzione contiene solo il valore da visualizzare, vedremo dopo come
-         manipolare il reale valore che vogliamo inviare col form -->
-    <li class="option">Cherry</li>
-    <li class="option">Lemon</li>
-    <li class="option">Banana</li>
-    <li class="option">Strawberry</li>
-    <li class="option">Apple</li>
-  </ul>
-
-</div>
- -

Nota l'uso del nome delle classi; questi identificano ciascuna parte rilevante indipendentemente dagli effettivi elementi HTML sottostanti utilizzati. Questo è importante per essere sicuri che non legheremo il nostro CSS e JavaScript ad una forte struttura HTML, in modo da poter apportare modifiche all'implementazione in un secondo momento senza rompere il codice che utilizza il widget. Per esempio se desideri implementare l'equivalente dell'elemento {{HTMLElement("optgroup")}}.

- -

Creare l'aspetto grafico utilizzando i CSS

- -

Ora che abbiamo una struttura HTML possiamo cominciare a disegnare il nostro widget. L'intero punto di costruzione di questo widget personalizzato è di essere in grado di modellare questo widget esattamente come vogliamo. Al fine di ciò, divideremo i nostri CSS in due parti: la prima parte sarà necessaria per avere un widget simile a {{HTMLElement("select")}} ,la seconda parte consisterà nella parte grafica in modo che appaia come noi vogliamo.

- -

Stili richiesti

- -

Gli stili richiesti sono quelli necessari per gestire i tre stati del nostro widget.

- -
.select {
-  /* Questo creerà un contesto di posizionamento per l'elenco di opzioni */
-  position: relative;
-
-  /*Questo renderà il nostro widget parte del flusso di testo e allo stesso tempo considerevole */
-  display : inline-block;
-}
- -

Abbiamo bisogno di una classe extra "active" per definire il look del nostro widget quando è nello stato di attivazione. Poichè il nostro widget è selezionabile,dobbiamo raddoppiare questo stile personale con la pseudo-classe {{cssxref(":focus")}} In modo da essere sicuri che abbiano lo stesso comportamento.

- -
.select.active,
-.select:focus {
-  outline: none;
-
-  /* Questo box-shadow non è richiesto al corretto funzionamento ,
-     tuttavia è importante per essere sicuro che lo stato di attivazione
-     sia visibile e che lo utilizziamo come valore di defaul,
-     sentiti libero di modificarlo. */
-  box-shadow: 0 0 3px 1px #227755;
-}
- -

Ora manipoliamo la lista delle opzioni:

- -
/* il selettore .select è zucchero sintattico ( traduzione letterale,
-   concettualmente vuol dire " rendere del codice più dolce, più umano "
-   per essere sicuri che le classi che definiamo siano quelli all'interno del nostro widget.
- */
-
-.select .optList {
-  /* Ciò assicurerà che il nostro elenco di opzioni sia visualizzato sotto il valore
-      e fuori dal flusso HTML */
-  position : absolute;
-  top      : 100%;
-  left     : 0;
-}
- -

Abbiamo bisogno di una classe extra per manipolare la lista quando le opzioni sono nascoste. Questo è necessario per gestire le differenze tra lo stato attivo e lo stato aperto che non corrispondono esattamente.

- -
.select .optList.hidden {
-  /* Questo è un modo semplice per nascondere la lista in modo accessibile,
-      parleremo di più sull'accessibilità alla fine */
-  max-height: 0;
-  visibility: hidden;
-}
- -

Abbellimento

- -

Ora che abbiamo le funzionalità base, possiamo cominciare a divertirci. Quello seguente è solo un esempio di ciò che è possibile, e corrisponderà allo screenshot all'inizio di questo articolo. Dovresti sentirti libero di sperimentare e vedere cosa accade.

- -
.select {
-  /* Tutte le taglie saranno espresse con il valore em per motivi di accessibilità
-      (per assicurarsi che il widget rimanga ridimensionabile se l'utente usa il
-      zoom del browser in modalità solo testo). I calcoli sono fatti
-      assumendo 1em == 16px quale è il valore predefinito nella maggior parte dei browser.
-      Se ti perdi la conversione di px in em, prova http://riddle.pl/emcalc/ * /
-  font-size   : 0.625em;
-  font-family : Verdana, Arial, sans-serif;
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  /* Abbiamo bisogno di spazio extra per la freccia in giù che aggiungeremo
- */
-  padding : .1em 2.5em .2em .5em; /* 1px 25px 2px 5px */
-  width   : 10em; /* 100px */
-
-  border        : .2em solid #000; /* 2px */
-  border-radius : .4em; /* 4px */
-  box-shadow    : 0 .1em .2em rgba(0,0,0,.45); /* 0 1px 2px */
-
-  /* La prima dichiarazione serve per i browser che non supportano i gradienti lineari.
-     La seconda dichiarazione è perché i browser basati su WebKit non hanno ancora una definizione prefissata.
-     Se vuoi supportare i browser legacy prova http://www.colorzilla.com/gradient-editor/ */
-  background : #F0F0F0;
-  background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
-  background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
-}
-
-.select .value {
-  /* poichè i valori possono essere più larghi del nostro widget, dobbiamo essere sicuri
-     che il widget cambierà dimensione */
-  display  : inline-block;
-  width    : 100%;
-  overflow : hidden;
-
-  vertical-align: top;
-
-  /* E se il contenuto va in overflow, è bello avere un bell'elisse . */
-  white-space  : nowrap;
-  text-overflow: ellipsis;
-}
- -

Non abbiamo bisogno di altri elementi per disegnare la freccia in basso; useremo invece lo pseudo-elemento {{cssxref(":after")}}. Comunque potrebbe anche essere implementato usando una semplice immagine  di background.

- -
.select:after {
-  content : "▼"; /* utilizziamo il carattere unicode U+25BC; vedi http://www.utf8-chartable.de */
-  position: absolute;
-  z-index : 1; /* importante per la posizione della freccia in modo da evitare
-               sovrapposizionamenti */
-  top     : 0;
-  right   : 0;
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  height  : 100%;
-  width   : 2em;  /* 20px */
-  padding-top : .1em; /* 1px */
-
-  border-left  : .2em solid #000; /* 2px */
-  border-radius: 0 .1em .1em 0;  /* 0 1px 1px 0 */
-
-  background-color : #000;
-  color : #FFF;
-  text-align : center;
-}
- -

ora cominciamo il design della lista delle opzioni:

- -
.select .optList {
-  z-index : 2; /* Dichiariamo esplicitamente che la lista delle opzioni si sovraporrà
-                  alla freccia */
-
-  /*Questo resetterà lo stile di default degli elementi <ul> */
-  list-style: none;
-  margin : 0;
-  padding: 0;
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  /* Ciò assicurerà che anche se i valori sono inferiori al widget,
-      l'elenco delle opzioni sarà grande quanto il widget stesso */
-  min-width : 100%;
-
-  /*Nel caso in cui l'elenco sia troppo lungo, il suo contenuto si sovrapporrà verticalmente
-      (che aggiungerà automaticamente una barra di scorrimento verticale) ma mai in orizzontale
-      (poiché non abbiamo impostato una larghezza, la lista regolerà automaticamente la sua larghezza.
-      Se non è possibile, il contenuto verrà troncato) */
-  max-height: 10em; /* 100px */
-  overflow-y: auto;
-  overflow-x: hidden;
-
-  border: .2em solid #000; /* 2px */
-  border-top-width : .1em; /* 1px */
-  border-radius: 0 0 .4em .4em; /* 0 0 4px 4px */
-
-  box-shadow: 0 .2em .4em rgba(0,0,0,.4); /* 0 2px 4px */
-  background: #f0f0f0;
-}
- -

Per le opzioni abbiamo bisogno di aggiungere la classe highlight in modo da identificare il valore che l'user selezionerà (o ha selezionato).

- -
.select .option {
-  padding: .2em .3em; /* 2px 3px */
-}
-
-.select .highlight {
-  background: #000;
-  color: #FFFFFF;
-}
- -

ecco i risultati dei nostri 3 stati:

- - - - - - - - - - - - - - - - - - - -
Basic stateActive stateOpen state
{{EmbedLiveSample("Basic_state",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_1")}}{{EmbedLiveSample("Active_state",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_1")}}{{EmbedLiveSample("Open_state",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_1")}}
Check out the source code
- -

Porta in vita il tuo widget con javascript

- -

Ora che il nostro designe e la nostra struttura sono pronti possiamo scrivere il codice JavaScript che farà effettivamente lavorare il widget.

- -
-

Pericolo: Il seguente codice è educativo e non dovrebbe essere usato così com'è. Tra le tante cose, come vedremo, non è a prova di futuro e non funzionerà sui browser legacy. Ha anche parti ridondanti che dovrebbero essere ottimizzate nel codice di produzione.

-
- -
-

Nota: Creare widget riutilizzabili è qualcosa che può essere un po 'complicato. La bozza del componente Web W3C è una delle risposte a questo specifico problema. Il progetto X-Tag è un'implementazione di test di questa specifica; ti invitiamo a dare un'occhiata a questo.

-
- -

Perchè non funziona?

- -

Prima di cominciare, è importante ricordare qualcosa di fondamentale a proposito di JavaScript: dentro un browser, è una tecnologia inaffidabile. Quando stai costruendo widget personalizzati, dovrai fare affidamento su javascript perchè è un filo necessario per legare tutto insieme. Tuttavia, ci sono molti casi in cui JavaScript non può essere eseguito nel browser:

- - - -

Per via di questi rischi, è molto importante considerare seriamente cosa accadrà se JavaScript non funziona. Trattare dettagliatamente questo problema è fuori dallo scopo di questo articolo perché è strettamente legato al modo in cui si desidera rendere generico e riutilizzabile lo script, ma nel nostro esempio considereremo le basi di ciò.

- -

Nel nostro esempio, se il nostro codice JavaScript non è in esecuzione, ricorreremo alla visualizzazione di un elemento {{HTMLElement("select")}}. Per raggiungere questo abbiamo bisogno di due cose.

- -

Per prima cosa, dobbiamo aggiungere un normale elemento {{HTMLElement ("select")}} prima di ogni utilizzo del nostro widget personalizzato. Questo è in realtà richiesto anche per poter inviare dati dal nostro widget personalizzato insieme al resto dei dati del nostro modulo;diremo di più a proposito più tardi.

- -
<body class="no-widget">
-  <form>
-    <select name="myFruit">
-      <option>Cherry</option>
-      <option>Lemon</option>
-      <option>Banana</option>
-      <option>Strawberry</option>
-      <option>Apple</option>
-    </select>
-
-    <div class="select">
-      <span class="value">Cherry</span>
-      <ul class="optList hidden">
-        <li class="option">Cherry</li>
-        <li class="option">Lemon</li>
-        <li class="option">Banana</li>
-        <li class="option">Strawberry</li>
-        <li class="option">Apple</li>
-      </ul>
-    </div>
-  </form>
-
-</body>
- -

Secondo, abbiamo bisogno di due nuove classi per nascondere l'elemento non necessario (cioè, l'elemento "reale" {{HTMLElement ("select")}} se il nostro script non è in esecuzione o il widget personalizzato è in esecuzione) . Nota che per impostazione predefinita, il nostro codice HTML nasconde il nostro widget personalizzato.

- -
.widget select,
-.no-widget .select {
-  /*Questo selettore css afferma:
-     - o abbiamo impostato la classe del corpo su "widget",
-       quindi nascondiamo l'effettivo elemento {{HTMLElement ("select")}}
-      - o non abbiamo cambiato la classe del corpo, quindi la classe del corpo
-         è ancora "no-widget",
-        quindi gli elementi di classe "select" devono essere nascosti */
-  position : absolute;
-  left     : -5000em;
-  height   : 0;
-  overflow : hidden;
-}
- -

Ora abbiamo solo bisogno di un interruttore JavaScript per determinare se lo script è in esecuzione o meno. Questa opzione è molto semplice: se al momento del caricamento della pagina il nostro script è in esecuzione, rimuoverà la classe no-widget e aggiungerà la classe widget, scambiando così la visibilità dell'elemento {{HTMLElement ("select")}} e del widget personalizzato.

- -
window.addEventListener("load", function () {
-  document.body.classList.remove("no-widget");
-  document.body.classList.add("widget");
-});
- - - - - - - - - - - - - - - - - -
Without JSWith JS
{{EmbedLiveSample("No_JS",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_2")}}{{EmbedLiveSample("JS",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_2")}}
Check out the source code
- -
-

Nota: Se vuoi veramente rendere il tuo codice generico e riutilizzabile, invece di fare un cambio di classe è meglio aggiungere semplicemente la classe del widget per nascondere gli elementi {{HTMLElement ("select")}} e aggiungere dinamicamente l'albero DOM che rappresenta il widget personalizzato dopo ogni {{HTMLElement ("select")}} elemento nella pagina.

-
- -

Rendere il lavoro più facile

- -

Nel codice che stiamo per costruire, useremo l'API DOM standard per fare tutto il lavoro di cui abbiamo bisogno. Tuttavia, sebbene il supporto dell'API DOM sia diventato molto meglio nei browser, ci sono sempre problemi con i browser legacy (specialmente con il buon vecchio Internet Explorer).

- -

Se vuoi evitare problemi con i browser legacy, ci sono due modi per farlo: usando un framework dedicato come jQuery, $ dom, prototype, Dojo, YUI, o simili, o facendo il polyfilling della funzione mancante che vuoi usare ( che può essere fatto facilmente attraverso il caricamento condizionale, ad esempio con la libreria yepnope).

- -

Le funzionalità che intendiamo utilizzare sono le seguenti (ordinate dal più rischioso al più sicuro):

- -
    -
  1. {{domxref("element.classList","classList")}}
    2. -
  2. {{domxref("EventTarget.addEventListener","addEventListener")}}
    3. -
  3. forEach (This is not DOM but modern JavaScript)
    4. -
  4. {{domxref("element.querySelector","querySelector")}} and {{domxref("element.querySelectorAll","querySelectorAll")}}
    5. -
- -

Oltre alla disponibilità di tali funzionalità specifiche, rimane ancora un problema prima dell'avvio. L'oggetto restituito dalla funzione {{domxref ("element.querySelectorAll", "querySelectorAll ()")}} è un {{domxref ("NodeList")}} piuttosto che una matrice. Questo è importante perché gli oggetti Array supportano la funzione forEach, ma {{domxref ("NodeList")}} no. Poiché {{domxref ("NodeList")}} sembra davvero un array e poiché forEach è così comodo da usare, possiamo facilmente aggiungere il supporto di forEach a {{domxref ("NodeList")}} per rendere la nostra vita più facile, così:

- -
NodeList.prototype.forEach = function (callback) {
-  Array.prototype.forEach.call(this, callback);
-}
- -

We weren't kidding when we said it's easy to do.

- -

Creazione di eventi Callback

- -

Il terreno è pronto, ora possiamo iniziare a definire tutte le funzioni che verranno utilizzate ogni volta che l'utente interagisce con il nostro widget.

- -
// Questa funzione verrà utilizzata ogni volta che si desidera disattivare un widget personalizzato
-// Richiede un parametro
-// seleziona: il nodo DOM con la classe `select` da disattivare
-function deactivateSelect(select) {
-
-  // Se il widget non è attivo non c'è nulla da fare
-  if (!select.classList.contains('active')) return;
-
-  // Abbiamo bisogno di ottenere l'elenco delle opzioni per il widget personalizzato
-  var optList = select.querySelector('.optList');
-
-  // Chiudiamo la lista delle opzioni
-  optList.classList.add('hidden');
-
-  // e disattiviamo il custom widget
-  select.classList.remove('active');
-}
-
-// questa funzione verrà utilizzata ogni volta che l'user(dis)attiverà il widget
-// prende due parametri:
-// select : il nodo del DOM con le classi 'select' da attivare
-// selectList :la lista di tutti i nodi dom con la la classe 'select'
-
-function activeSelect(select, selectList) {
-
-  // Se il widget è già attivo non c'è niente da fare
-  if (select.classList.contains('active')) return;
-
-  // Dobbiamo disattivare lo stato attivo su tutti i widget personalizzati
-   // Perché la funzione deactivateSelect soddisfa tutti i requisiti di
-   // per ogni funzione di callback, la usiamo direttamente senza usare un intermediario
-   // funzione anonima.
-  selectList.forEach(deactivateSelect);
-
-  // E attiviamo lo stato attivo per questo specifico widget
-  select.classList.add('active');
-}
-
-// Questa funzione verrà utilizzata ogni volta che l'utente desidera aprire / chiudere l'elenco di opzioni
-// Richiede un parametro:
-// seleziona: il nodo DOM con l'elenco da attivare
-function toggleOptList(select) {
-
- // L'elenco è tenuto dal widget
-  var optList = select.querySelector('.optList');
-
-  // Modifichiamo la classe dell'elenco per mostrarlo / nasconderlo
-  optList.classList.toggle('hidden');
-}
-
-// Questa funzione verrà utilizzata ogni volta che sarà necessario evidenziare un'opzione
-// Ci vogliono due parametri:
-// seleziona: il nodo DOM con la classe `select` contenente l'opzione da evidenziare
-// opzione: il nodo DOM con la classe `option` da evidenziare
-function highlightOption(select, option) {
-
-  // Otteniamo l'elenco di tutte le opzioni disponibili per il nostro elemento di selezione personalizza
-  var optionList = select.querySelectorAll('.option');
-
-  // Rimuoviamo l'evidenziazione da tutte le opzioni
-  optionList.forEach(function (other) {
-    other.classList.remove('highlight');
-  });
-
- // Evidenziamo l'opzione giusta
-  option.classList.add('highlight');
-};
- -

 

- -

Questo è tutto ciò che serve per gestire i vari stati del widget personalizzato.

- -

Successivamente, associamo queste funzioni agli eventi appropriati:

- -

 

- -
// Gestiamo il binding di eventi quando il documento è caricato.
-window.addEventListener('load', function () {
-  var selectList = document.querySelectorAll('.select');
-
-  // Each custom widget needs to be initialized
-  selectList.forEach(function (select) {
-
-    // Ogni widget personalizzato deve essere inizializzato
-    var optionList = select.querySelectorAll('.option');
-
-    // Ogni volta che un utente passa il mouse su un'opzione, evidenziamo l'opzione data
-    optionList.forEach(function (option) {
-      option.addEventListener('mouseover', function () {
-        // Nota: le variabili `select` e` option` sono le chiusure
-         // disponibile nell'ambito della nostra chiamata di funzione.
-        highlightOption(select, option);
-      });
-    });
-
-    // Ogni volta che l'utente fa clic su un elemento di selezione personalizzato
-    select.addEventListener('click', function (event) {
-     // Nota: la variabile `select` è una chiusura
-       // disponibile nell'ambito della nostra chiamata di funzione.
-
-      // Accendiamo la visibilità dell'elenco di opzioni
-      toggleOptList(select);
-    });
-
-    // Nel caso in cui il widget ottenga lo stato attivo
-     // Il widget ottiene l'attenzione ogni volta che l'utente fa clic su di esso o ogni volta
-     // usano la chiave di tabulazione per accedere al widget
-    select.addEventListener('focus', function (event) {
-      // Nota: le variabili `select` e` selectList` sono le chiusure
-       // disponibile nell'ambito della nostra chiamata di funzione.
-
-      // Attiviamo il widget
-      activeSelect(select, selectList);
-    });
-
-    // Nel caso in cui il widget lasci il focus
-    select.addEventListener('blur', function (event) {
-      // Nota: la variabile `select` è una chiusura
-       // disponibile nell'ambito della nostra chiamata di funzione.
-
-       // Disattiamo il widget
-      deactivateSelect(select);
-    });
-  });
-});
- -

A quel punto, il nostro widget cambierà stato in base al nostro progetto, ma il suo valore non viene ancora aggiornato. Lo gestiremo dopo.

- - - - - - - - - - - - - - - -
Live example
{{EmbedLiveSample("Change_states",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_3")}}
Check out the source code
- -

Gestire il valore del Widget

- -

 

- -

Ora che il nostro widget funziona, dobbiamo aggiungere del codice per aggiornarne il valore in base all'input dell'utente e rendere possibile l'invio del valore insieme ai dati del modulo.

- -

Il modo più semplice per farlo è usare un widget nativo sotto il cofano. Tale widget terrà traccia del valore con tutti i controlli integrati forniti dal browser e il valore verrà inviato normalmente al momento della presentazione di un modulo. Non ha senso reinventare la ruota quando possiamo fare tutto questo per noi.

- -

Come visto in precedenza, utilizziamo già un widget di selezione nativo come fallback per motivi di accessibilità; possiamo semplicemente sincronizzare il suo valore con quello del nostro widget personalizzato:

- -

 

- -
// Questa funzione aggiorna il valore visualizzato e lo sincronizza con il widget nativo.
-// Ci vogliono due parametri:
-// seleziona: il nodo DOM con la classe `select` contenente il valore da aggiornare
-// indice: l'indice del valore da selezionare
-function updateValue(select, index) {
- // Abbiamo bisogno di ottenere il widget nativo per il widget personalizzato specificato
-   // Nel nostro esempio, quel widget nativo è un fratello del widget personalizzato
-  var nativeWidget = select.previousElementSibling;
-
-  // Abbiamo anche bisogno di ottenere il valore segnaposto del nostro widget personalizzato
-  var value = select.querySelector('.value');
-
-  // E abbiamo bisogno dell'intero elenco di opzioni
-  var optionList = select.querySelectorAll('.option');
-
-  // Impostiamo l'indice selezionato sull'indice di nostra scelta
-  nativeWidget.selectedIndex = index;
-
-  // Aggiorniamo il valore placeholder di conseguenza
-  value.innerHTML = optionList[index].innerHTML;
-
-  // E evidenziamo l'opzione corrispondente del nostro widget personalizzato
-  highlightOption(select, optionList[index]);
-};
-
-// Questa funzione restituisce l'indice selezionato corrente nel widget nativo
-// Richiede un parametro:
-// seleziona: il nodo DOM con la classe `select` relativa al widget nativo
-function getIndex(select) {
- // È necessario accedere al widget nativo per il widget personalizzato specificato
-   // Nel nostro esempio, quel widget nativo è un fratello del widget personalizzato
-  var nativeWidget = select.previousElementSibling;
-
-  return nativeWidget.selectedIndex;
-};
- -

Con queste due funzioni, possiamo associare i widget nativi a quelli personalizzati:

- -
// Gestiamo il binding di eventi quando il documento è caricato.
-window.addEventListener('load', function () {
-  var selectList = document.querySelectorAll('.select');
-
- // Ogni widget personalizzato deve essere inizializzato
-  selectList.forEach(function (select) {
-    var optionList = select.querySelectorAll('.option'),
-        selectedIndex = getIndex(select);
-
-    // Rendiamo focalizzabile il nostro widget personalizzato
-    select.tabIndex = 0;
-
-// Facciamo in modo che il widget nativo non sia più focalizzabile
-    select.previousElementSibling.tabIndex = -1;
-
-    // Ci assicuriamo che il valore selezionato di default sia visualizzato correttamente
-    updateValue(select, selectedIndex);
-
-    // Ogni volta che un utente fa clic su un'opzione, aggiorniamo di conseguenza il valore
-    optionList.forEach(function (option, index) {
-      option.addEventListener('click', function (event) {
-        updateValue(select, index);
-      });
-    });
-
-    // Ogni volta che un utente usa la propria tastiera su un widget focalizzato, aggiorniamo di conseguenza il valore
-    select.addEventListener('keyup', function (event) {
-      var length = optionList.length,
-          index  = getIndex(select);
-
-     // Quando l'utente preme la freccia giù, passiamo all'opzione successiva
-      if (event.keyCode === 40 && index < length - 1) { index++; }
-
-// Quando l'utente preme la freccia su, passiamo all'opzione precedente
-      if (event.keyCode === 38 && index > 0) { index--; }
-
-      updateValue(select, index);
-    });
-  });
-});
- -

 

- -

Nel codice sopra, vale la pena notare l'uso della proprietà tabIndex. L'utilizzo di questa proprietà è necessario per garantire che il widget nativo non acquisisca mai l'attenzione e per assicurarsi che il nostro widget personalizzato ottenga lo stato attivo quando l'utente utilizza la sua tastiera o il suo mouse.

- -

Con quello, abbiamo finito! Ecco il risultato:

- -

 

- - - - - - - - - - - - - - - -
Live example
{{EmbedLiveSample("Change_states",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_4")}}
Check out the source code
- -

Ma aspetta un secondo, abbiamo davvero finito?

- -

Renderlo accessibile

- -

 

- -

Abbiamo costruito qualcosa che funziona e sebbene siamo lontani da una casella di selezione completa, funziona bene. Ma quello che abbiamo fatto non è altro che il violino con il DOM. Non ha una vera semantica e, anche se sembra una casella di selezione, dal punto di vista del browser non ne è uno, quindi le tecnologie assistive non saranno in grado di capire che è una casella di selezione. In breve, questa nuova casella di selezione non è accessibile!

- -

Fortunatamente, esiste una soluzione e si chiama ARIA. ARIA è l'acronimo di "Accessible Rich Internet Application" ed è una specifica W3C specificamente progettata per ciò che stiamo facendo qui: rendere accessibili le applicazioni web e i widget personalizzati. È fondamentalmente un insieme di attributi che estendono l'HTML in modo da poter meglio descrivere ruoli, stati e proprietà come se l'elemento che abbiamo appena escogitato fosse l'elemento nativo per cui tentava di passare. L'utilizzo di questi attributi è estremamente semplice, quindi facciamolo.

- -

 

- -

L'attributo 'role'

- -

 

- -

L'attributo chiave utilizzato da ARIA è l'attributo 'role'. L'attributo 'role' accetta un valore che definisce per cosa viene usato un elemento. Ogni 'role' definisce i propri requisiti e comportamenti. Nel nostro esempio, useremo 'role listbox'. È un "ruolo composito", ovvero gli elementi con quel ruolo si aspettano di avere figli, ciascuno con un ruolo specifico (in questo caso, almeno un bambino con il ruolo di opzione).

- -

Vale anche la pena notare che ARIA definisce i ruoli che vengono applicati di default al markup HTML standard. Ad esempio, l'elemento {{HTMLElement ("table")}} corrisponde alla griglia del ruolo e l'elemento {{HTMLElement ("ul")}} corrisponde all'elenco dei ruoli. Poiché utilizziamo un elemento {{HTMLElement ("ul")}}, vogliamo assicurarci che il ruolo listbox del nostro widget sostituisca il ruolo di lista dell'elemento {{HTMLElement ("ul")}}. A tal fine, useremo la presentazione del ruolo. Questo ruolo è stato progettato per farci indicare che un elemento non ha un significato speciale e viene utilizzato esclusivamente per presentare informazioni. Lo applicheremo al nostro elemento {{HTMLElement ("ul")}}.

- -

Per supportare il ruolo listbox, dobbiamo solo aggiornare il nostro codice HTML in questo modo:

- -

 

- -
<! - Aggiungiamo l'attributo role = "listbox" al nostro elemento principale -><div class="select" role="listbox">
-  <span class="value">Cherry</span>
-  <! - Aggiungiamo anche il role = "presentation" all'elemento ul ->
-  <ul class="optList" role="presentation">
-    <! - E aggiungiamo l'attributo role = "option" a tutti gli elementi li ->
-    <li role="option" class="option">Cherry</li>
-    <li role="option" class="option">Lemon</li>
-    <li role="option" class="option">Banana</li>
-    <li role="option" class="option">Strawberry</li>
-    <li role="option" class="option">Apple</li>
-  </ul>
-</div>
- -
-

Nota: Includere sia l'attributo role sia un attributo class è necessario solo se si desidera supportare i browser legacy che non supportano i selettori dell'attributo CSS. CSS attribute selectors.

-
- -

L'attributo aria-selected 

- -

Usare l'attributo role non è abbastanza. ARIA fornisce anche molti stati e attributi di proprietà. Più e meglio li usi, più il tuo widget sarà compreso dalle tecnologie assistive. Nel nostro caso, limiteremo il nostro utilizzo a un attributo: aria-selected.

- -

l'attributo aria-selected è usato per contrassegnare quale opzione è attualmente selezionata; questo consente alle tecnologie assistive di informare l'utente su quale sia la selezione corrente. Lo useremo dinamicamente con JavaScript per contrassegnare l'opzione selezionata ogni volta che l'utente ne sceglie uno. A tal fine, abbiamo bisogno di rivedere la nostra funzione updateValue():

- -
function updateValue(select, index) {
-  var nativeWidget = select.previousElementSibling;
-  var value = select.querySelector('.value');
-  var optionList = select.querySelectorAll('.option');
-
-  // Ci assicuriamo che tutte le opzioni non siano selezionate
-  optionList.forEach(function (other) {
-    other.setAttribute('aria-selected', 'false');
-  });
-
-  // Ci assicuriamo che l'opzione scelta sia selezionata
-  optionList[index].setAttribute('aria-selected', 'true');
-
-  nativeWidget.selectedIndex = index;
-  value.innerHTML = optionList[index].innerHTML;
-  highlightOption(select, optionList[index]);
-};
- -

Ecco il risultato finale di tutti questi cambiamenti (otterrai una sensazione migliore provandola con una tecnologia di assistenza come NVDA o VoiceOver):

- - - - - - - - - - - - - - - -
Live example
{{EmbedLiveSample("Change_states",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_5")}}
Check out the final source code
- -

Conclusioni

- -

 

- -

Abbiamo visto tutti i fondamenti della creazione di un widget di modulo personalizzato, ma come puoi vedere non è banale da fare, e spesso è meglio e più facile affidarsi a librerie di terze parti invece di codificarle da zero da soli (a meno che, ovviamente, il tuo obiettivo è costruire una tale biblioteca).

- -

Ecco alcune librerie da prendere in considerazione prima di codificare le tue:

- -

 

- - - -

Se vuoi andare avanti, il codice in questo esempio necessita di qualche miglioramento prima che diventi generico e riutilizzabile. Questo è un esercizio che puoi provare ad esibirti. Due suggerimenti per aiutarti in questo: il primo argomento per tutte le nostre funzioni è lo stesso, il che significa che quelle funzioni necessitano dello stesso contesto. Costruire un oggetto per condividere quel contesto sarebbe saggio. Inoltre, è necessario renderlo a prova di funzionalità; cioè, deve essere in grado di funzionare meglio con una varietà di browser la cui compatibilità con gli standard Web utilizzati varia. Divertiti!

- -

{{PreviousMenuNext("Learn/HTML/Forms/Form_validation", "Learn/HTML/Forms/Sending_forms_through_JavaScript", "Learn/HTML/Forms")}}

- -

 

- -

In questo modulo

- - - -

 

diff --git a/files/it/learn/html/forms/form_validation/index.html b/files/it/learn/html/forms/form_validation/index.html deleted file mode 100644 index 9557758529..0000000000 --- a/files/it/learn/html/forms/form_validation/index.html +++ /dev/null @@ -1,846 +0,0 @@ ---- -title: Validazione lato client delle form -slug: Learn/HTML/Forms/Form_validation -tags: - - Apprendere - - Esempio - - Forms - - Guida - - HTML - - JavaScript - - Principiante - - Web - - regex -translation_of: Learn/Forms/Form_validation ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Forms/UI_pseudo-classes", "Learn/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms")}}
- -
Prima di inviare dati al server, è importante assicurarsi che tutti i campi richiesti della form siano stati inseriti e siano nel formato richiesto. Questa viene chiamata validazione delle form lato client, ed aiuta a fare in modo che i dati inviati siano consistenti con quanto richiesto. Questo articolo illustra anche con esempi i concetti base della validazione.
- -
- - - - - - - - - - - - -
Prerequisiti:Conoscenze informatiche, ed una ragionevole comprensione di HTML, CSS, e JavaScript.
Obiettivo:Capire che cos'è la validazione delle form lato client, perché è importante e come applicare le varie tecniche per implementarla.
- -

La validazione lato client è un controllo che va fatto subito ed è una caratteristica importante per una buona esperienza untente; trovando i dati non corretti nel lato client, l'utente li può correggere immediatamente. Se i dati non corretti venissero inviati al server e rifiutati, si assisterebbe ad un considerevole e fastidioso ritardo operativo dovuto al traffico tra client e server per le richieste di correzione.

- -

Comunque, la validazione lato client non dovrebbe essere considerata una misura di sicurezza sufficiente! La tua app dovrebbe sempre eseguire controlli di sicurezza anche nel lato server, perché le validazioni lato client sono troppo facili da bypassare, quindi gli utenti malevoli potrebbero comunque spedire dati non corretti al server. Leggi l'articolo Website security per farti un idea di quello che potrebbe succedere; in questo articolo non trattiamo la validazione lato server, ma tu dovresti tenerla presente.

- -

Che cos'è la validazione delle form?

- -

Vai su qualche diffuso sito con registrazione delle form e ti accorgerai che ti  fornirà informazioni immediate se non inserisci i dati nel formato che loro si aspettano. Otterrai messaggi simili a questi:

- - - -

Questa viene chiamata validazione della form. Quando inserisci i dati il browser e/o il web server controllano se i dati sono corretti secondo le regole stabilite dalla applicazione. La validazione fatta dal browser viene chiamata validazione lato client e quella fatta dal server viene chiamata validazione lato server. Questo articolo si occupa della validazione lato client.

- -

Se le informazioni hanno il formato corretto, l'applicazione consente che vengano spedite al server il quale di solito le salva in un database. Se invece non sono corrette, viene mandato un messaggo all'utente spiegando l'errore e consentendo di riprovare.

- -

Noi desideriamo che l'inserimento delle form sia il più facile possibile. Quindi per quale motivo insistiamo per la validazione? I motivi principali sono tre:

- - - -

Differenti tipi di validazione lato client

- -

Ci sono due tipi di validazione che si possono incontrare nel web:

- - - -

Usare la validazione built-in delle form

- -

Una delle funzionalità più significative dei HTML5 form controls è la capacità di effettuare molte validazioni senza richiedere l'uso di JavaScript. Questo viene fatto usando attributi di validazione negli elementi della form. Lo abbiamo visto anche in altre occasioni, ma ricapitolando:

- - - -

Se i dati inseriti nella form seguono tutte le regole specificate dagli attributi è considerata valida. Altrimenti viene considerata non valida.

- -

Quando un elemento è valido, le seguenti cose sono vere:

- - - -

Quando un elemento non è valido, le seguenti cose sono vere:

- - - -
-

Nota: Esistiono alcuni errori che impediscono la spedizione della form, compreso {{domxref('validityState.badInput', 'badInput')}}, {{domxref('validityState.patternMismatch','patternMismatch')}}, {{domxref('validityState.rangeOverflow','rangeOverflow')}} o {{domxref('validityState.rangeUnderflow','rangeUnderflow')}}, {{domxref('validityState.stepMismatch','stepMismatch')}}, {{domxref('validityState.tooLong','tooLong')}} or {{domxref('validityState.tooShort','tooShort')}}, {{domxref('validityState.typeMismatch','typeMismatch')}}, {{domxref('validityState.valueMissing','valueMissing')}}, o un {{domxref('validityState.customError','customError')}}.

-
- -

Esempi di validazione built-in delle form

- -

In questa sezione proveremo alcuni degli attributi di cui abbiamo parlato sopra.

- -

Semplice esempio iniziale

- -

Incominciamo con un esempio semplice: Un campo di testo che ti permette di scegliere se preferisci le banane o le ciliege (banana or cherry). Questo esempio richiede un semplice testo {{HTMLElement("input")}} con associata una {{htmlelement("label")}} e un pulsante di invio {{htmlelement("button")}}. Il codice sorgente si trova su GitHub su fruit-start.html con un esempio live.

- -
<form>
-  <label for="choose">Would you prefer a banana or cherry?</label>
-  <input id="choose" name="i_like">
-  <button>Submit</button>
-</form>
- -
input:invalid {
-  border: 2px dashed red;
-}
-
-input:valid {
-  border: 2px solid black;
-}
- -

{{EmbedLiveSample("Simple_start_file", "100%", 80)}}

- -

Per incominciare fai una copia di  fruit-start.html in una directory vuota del tuo disco fisso.

- -

L'attributo required

- -

La validazione HTML5 più semplice è l'attributo required. Per rendere obbligatorio un campo input aggiungi questo attributo. Se è presente, l'elemento esegue il controllo con la pseudo-classe {{cssxref(':required')}} e la form non viene inviata e visualizza un messaggio d'errore se il campo input è vuoto. Quando è vuoto il campo è considerato non valido anche dalla pseudo-classe {{cssxref(':invalid')}}.

- -

Aggiungi l'attributo required come si vede qui sotto.

- -
<form>
-  <label for="choose">Would you prefer a banana or cherry? (required)</label>
-  <input id="choose" name="i_like" required>
-  <button>Submit</button>
-</form>
- -

Considera il CSS che è incluso nel file d'esempio:

- -
input:invalid {
-  border: 2px dashed red;
-}
-
-input:invalid:required {
-  background-image: linear-gradient(to right, pink, lightgreen);
-}
-
-input:valid {
-  border: 2px solid black;
-}
- -

Questo CSS assegna all'input un bordo rosso a trattini quando il valore non è valido ed una linea nera più sottile quando è valido. Abbiamo anche aggiunto uno sfondo a gradiente quando è richiesto e non valido. Prova il nuovo comportamento nell'esempio sotto:

- -

{{EmbedLiveSample("The_required_attribute", "100%", 80)}}

- -
-

Nota: Puoi trovare questo esempio live su GitHub come fruit-validation.html (vedi anche il codice sorgente.)

-
- -

Prova ad inviare la form senza un valore. Nota che i campo non valido acquista il focus ed appare il messaggio predefinito ("Per favore inserisci questo campo"), e la form non viene inviata.

- -

La presenza dell'attributo required in un elemento che lo supporta comporta che l'elemento controlla la pseudoclasse {{cssxref(':required')}} per controllare se contiene un valore oppure no. Se il campo {{HTMLElement("input")}} non ha un valore, attiva la pseudoclasse {{cssxref(':invalid')}}.

- -
-

Nota: Per una buona esperienza utente, indica all'utente quando un campo è richiesto. Non è solo una buona pratica, ma è anche richiesto dalle linee guida accessibility del WCAG. È anche bene rendere obbligatori i soli campi che ti servono. è inutile rendere obbligatori i campi di cui non hai reale necessità.

-
- -

Validazione con una regular expression

- -

Un'altra caratteristica di validazione molto usata è l'attributo pattern, che si aspetta una Regular Expression come valore. Una regular expression (regex) è un modello che può essere usato per confrontare una combinazione di caratteri in una stringa, questo li rende ottimi per la validazione delle form e vengono usati anche per un certo numero di altri usi in JavaScript.

- -

I regex sono abbastanza complessi, e non riusciamo a spiegarli in modo completo in questo articolo. Di seguito riportiamo alcuni esempi per darti un'idea di base su come funzionano.

- - - -

Ci sono moltissime altre possibilità che non trattiamo. Per la lista completa e molti esempi consulta la nostra documentazione delle Regular expressions.

- -

Proviamo ad implementare un esemio. Modifica il tuo HTML per aggiungere un attributo pattern come il seguente:

- -
<form>
-  <label for="choose">Would you prefer a banana or a cherry?</label>
-  <input id="choose" name="i_like" required pattern="[Bb]anana|[Cc]herry">
-  <button>Submit</button>
-</form>
-
- - - -

Che ci da il seguente aggiornamento — prova:

- -

{{EmbedLiveSample("Validating_against_a_regular_expression", "100%", 80)}}

- -
-

Nota: Puoi trovare questo esempio live su GitHub su fruit-pattern.html (guarda anche il codice sorgente.)

-
- -

In questo esempio, l'elemento {{HTMLElement("input")}} accetta una di quattro possibili valori: "banana", "Banana", "cherry", o "Cherry". Le regular expressions sono sono sensibili a maiuscole e minuscole, ma noi abbiamo supportato sia le parole minuscole che quelle con la prima maiuscola usando il modello "Aa" racchiuso tra parentesi quadre.

- -

Prova ora a cambiare il valore dell attributo pattern con gli esempi visti in precedenza e vedi in che modo cambiano i valori che puoi inserire. Prova anche a scrivere qualche regola per conto tuo e cerca di dare un senso alle regole rispetto al esempio della frutta!

- -

Se un valore di {{HTMLElement("input")}} non soddisfa il modello della regular expression il campo input  applicherà la pseudoclasse  {{cssxref(':invalid')}}.

- -
-

Nota: Alcuni tipi di elemento {{HTMLElement("input")}} non necessitano di un attributo pattern per essere validati secondo una regular expression. Specificando il tipo email, ad esempio, l'input viene validato con il consolidato modello per la validazione delle email o con il modello per una lista di email separate da virgole se ha anche l'attributo multiple.

-
- -
-

Nota: L'elemento {{HTMLElement("textarea")}} non supporta l'attributo pattern.

-
- -

Limitare la dimensione dei campi

- -

Puoi limitare la dimensione dei campi testo creati con  {{HTMLElement("input")}} o {{HTMLElement("textarea")}} usando gli attributi minlength e maxlength. Un campo non è valido se ha meno caratteri del valore di minlength o maggiore del valore di maxlength.

- -

I browsers spesso non consentono all'utente di inserire più caratteri di quelli consentiti dal campo. Per migliorare l'esperienza utente invece di usare solamente maxlength si può fornire l'indicazione del numero di caratteri residui per dare modo all'utente di regolarsi. Un esempio di questo si trova in Twitter. Con JavaScript esiste una soluzione che usa maxlength, che si può utilizzare.

- -

Limitare i valori dei campi

- -

Per i campi numerici (es. <input type="number">), gli attirbuti min e max possono essere utilizzati per fornire i limiti di valori validi. Se il campo contiene valori fuori dai limiti non è valido.

- -

Vediamo un altro esempio. Creiamo una copia del file fruit-start.html.

- -

Ora sostituiamo i contenuto dell'elemento <body> con il seguente:

- -
<form>
-  <div>
-    <label for="choose">Would you prefer a banana or a cherry?</label>
-    <input type="text" id="choose" name="i_like" required minlength="6" maxlength="6">
-  </div>
-  <div>
-    <label for="number">How many would you like?</label>
-    <input type="number" id="number" name="amount" value="1" min="1" max="10">
-  </div>
-  <div>
-    <button>Submit</button>
-  </div>
-</form>
- - - - - -

Ecco un esempio live:

- -

{{EmbedLiveSample("Constraining_the_values_of_your_entries", "100%", 100)}}

- -
-

Nota: Puoi trovare questo esempio live su GitHub su fruit-length.html (guarda anche il codice sorgente.)

-
- -
-

Nota: <input type="number"> (ed anche altri tipi come range e date) possono anche avere l'attributo step, che specifica il valore minimo di incremento e decremento quando viene usato il campo (ad esempio premendo i pulsanti su e giu dei campi numerici). Nel esempio precedente non abbiamo inserito l'attributo step quindi il valore parte da 1. Questo significa che i numeri con la virgola come 3.2, sono anch'essi non validi.

-
- -

Esempio completo

- -

Ecco un esempio completo che dimostra l'uso delle funzionalità di validazione built-in di HTML:

- -
<form>
-  <p>
-    <fieldset>
-      <legend>Do you have a driver's license?<abbr title="This field is mandatory" aria-label="required">*</abbr></legend>
-      <!-- While only one radio button in a same-named group can be selected at a time,
-           and therefore only one radio button in a same-named group having the "required"
-           attribute suffices in making a selection a requirement -->
-      <input type="radio" required name="driver" id="r1" value="yes"><label for="r1">Yes</label>
-      <input type="radio" required name="driver" id="r2" value="no"><label for="r2">No</label>
-    </fieldset>
-  </p>
-  <p>
-    <label for="n1">How old are you?</label>
-    <!-- The pattern attribute can act as a fallback for browsers which
-         don't implement the number input type but support the pattern attribute.
-         Please note that browsers that support the pattern attribute will make it
-         fail silently when used with a number field.
-         Its usage here acts only as a fallback -->
-    <input type="number" min="12" max="120" step="1" id="n1" name="age"
-           pattern="\d+">
-  </p>
-  <p>
-    <label for="t1">What's your favorite fruit?<abbr title="This field is mandatory" aria-label="required">*</abbr></label>
-    <input type="text" id="t1" name="fruit" list="l1" required
-           pattern="[Bb]anana|[Cc]herry|[Aa]pple|[Ss]trawberry|[Ll]emon|[Oo]range">
-    <datalist id="l1">
-      <option>Banana</option>
-      <option>Cherry</option>
-      <option>Apple</option>
-      <option>Strawberry</option>
-      <option>Lemon</option>
-      <option>Orange</option>
-    </datalist>
-  </p>
-  <p>
-    <label for="t2">What's your e-mail address?</label>
-    <input type="email" id="t2" name="email">
-  </p>
-  <p>
-    <label for="t3">Leave a short message</label>
-    <textarea id="t3" name="msg" maxlength="140" rows="5"></textarea>
-  </p>
-  <p>
-    <button>Submit</button>
-  </p>
-</form>
- -

Ed ora un po' di CSS per dare stile al HTML:

- -
form {
-  font: 1em sans-serif;
-  max-width: 320px;
-}
-
-p > label {
-  display: block;
-}
-
-input[type="text"],
-input[type="email"],
-input[type="number"],
-textarea,
-fieldset {
-  width : 100%;
-  border: 1px solid #333;
-  box-sizing: border-box;
-}
-
-input:invalid {
-  box-shadow: 0 0 5px 1px red;
-}
-
-input:focus:invalid {
-  box-shadow: none;
-}
- -

Questo viene presentato nel modo seguente:

- -

{{EmbedLiveSample("Full_example", "100%", 420)}}

- -

Vedi Validation-related attributes per la lista completa degli attributi che possono essere utilizzati per limitare i valori ed i tipi di input che li supportano.

- -
-

Nota: Puoi trovare questo esempio live su GitHub su  full-example.html (guarda anche il codice sorgente.)

-
- -

Validazione delle forms con JavaScript

- -

Sei costretto ad usare JavaScript se desideri controllare l'aspetto dei messaggi nativi d'errore o per conformarti ai browsers più vecchi che non supportano la validazione built-in di HTML. In questa sezione daremo un occhiata a diversi modi per farlo.

- -

Le API di limitazione della validazione

- -

Molti browsers supportano le Constraint Validation API, che consistono in un gruppo di metodi e proprietà disponibili nelle seguienti interfaccie degli elementi delle form del DOM:

- - - -

Le API di validazione rendono le seguenti proprietà disponibili per li elementi di cui sopra.

- - - -

Le API di validazione rendono anche disponibili i seguenti metodi per gli elementi di cui sopra.

- - - -

Implementare un messaggio di errore personalizzato

- -

Come abbiamo visto negli esempi di limiti di validazione HTML5 in precedenza, ogni volta che l'utente tenta di inviare una form non valida, il browser visualizza un messaggio d'errore. Il modo in cui viene visualizzato dipende dal browser.

- -

Questi messaggi automatizzati hanno due controindicazioni:

- - - -

Example of an error message with Firefox in French on an English page

- -

Personalizzare questi messaggi di errore è uno dei casi più comuni di utilizzo delle constraint validation API. Vediamo un piccolo esempio di come fare questo.

- -

Incominciamo con un po' di HTML semplice (prova ad inserirlo in un file HTML vuoto o usa come base una copia di of fruit-start.html come preferisci):

- -
<form>
-  <label for="mail">I would like you to provide me with an e-mail address:</label>
-  <input type="email" id="mail" name="mail">
-  <button>Submit</button>
-</form>
- -

Ed aggiungi il seguente JavaScript alla pagina:

- -
const email = document.getElementById("mail");
-
-email.addEventListener("input", function (event) {
-  if (email.validity.typeMismatch) {
-    email.setCustomValidity("I am expecting an e-mail address!");
-  } else {
-    email.setCustomValidity("");
-  }
-});
- -

Qui aggiungiamo un riferimento al campo email ed aggiungiamo un event listener che viene eseguito ogni volta che il valore cambia.

- -

Nel codici controlliamo se la proprietà validity.typeMismatch del campo emali diventa true, significa che il valore contenuto non corrisponde al modello degli indirizzi email. Se è così viene chiamato il metodo setCustomValidity() con un messaggio appropriato. Questo rende il campo non valido, in modo che quando viene inviata la form, l'invio fallisce e viene visualizzato il messaggio di errore.

- -

Se la proprietà validity.typeMismatch restituisce false, chiamiamo il metodo setCustomValidity() con una stringa vuota che rende valido il campo in modo che possa essere spedito.

- -

Lo puoi provare con:

- -

{{EmbedGHLiveSample("learning-area/html/forms/form-validation/custom-error-message.html", '100%', 80)}}

- -
-

Nota: Puoi trovare questo esempio live su GitHub su custom-error-message.html (vedi anche il codice sorgente.)

-
- -

Un esempio più dettagliato

- -

Ora che abbiamo visto un esempio molto semplice, vediamo come possiamo usare le API per costurire un sistema di validazione un po' più complesso.

- -

Prima di tutto il codice HTML:

- -
<form novalidate>
-  <p>
-    <label for="mail">
-      <span>Please enter an email address:</span>
-      <input type="email" id="mail" name="mail" required minlength="8">
-      <span class="error" aria-live="polite"></span>
-    </label>
-  </p>
-  <button>Submit</button>
-</form>
- -

Questa semplice form usa l'attributo novalidate per disattivare la validazine automatica del browser; questo consente al nostro script di prendere il controllo della validazione. Questo comunque non disabilita il supporto per le API di validazione e l'applicazione delle pseudoclassi CSS come {{cssxref(":valid")}}, ecc. Questo significa che se anche il browser con controlla la validità della form prima di spedire i dati, tu puoi comunque farlo dal solo ed applicare lo stile appropriato.

- -

Il nostro input da validare è un <input type="email">, che è required, ed ha un minlength di 8 caratteri. Proviamo a controllare la validità usando il nostro codice e visualizziamo un messaggio appropriato per ciascun attributo.

- -

Ci proponiamo di visualizzare il messaggio all'intermo di un elemento <span>. L'attributo aria-live per assicurarci che il nostro messaggio di errore verrà reso disponibile a tutti compresi coloro che usano i lettori di schermo.

- -
-

Nota: Il punto chiave qui è l'uso dell'attributo novalidate per la form che è ciò che impedisce alla form di vidualizzare il proprio messaggio di errore e ci consente invece di visualizzare il nostro messaggio presonalizzato nel DOM in qualche modo scelto da noi.

-
- -

Ora un po' di CSS oer migliorare leggermente il look della form, e fornire qualche tipo di informazione quando il valore non è valido:

- -
body {
-  font: 1em sans-serif;
-  width: 200px;
-  padding: 0;
-  margin : 0 auto;
-}
-
-p * {
-  display: block;
-}
-
-input[type=email]{
-  -webkit-appearance: none;
-  appearance: none;
-
-  width: 100%;
-  border: 1px solid #333;
-  margin: 0;
-
-  font-family: inherit;
-  font-size: 90%;
-
-  box-sizing: border-box;
-}
-
-/* This is our style for the invalid fields */
-input:invalid{
-  border-color: #900;
-  background-color: #FDD;
-}
-
-input:focus:invalid {
-  outline: none;
-}
-
-/* This is the style of our error messages */
-.error {
-  width  : 100%;
-  padding: 0;
-
-  font-size: 80%;
-  color: white;
-  background-color: #900;
-  border-radius: 0 0 5px 5px;
-
-  box-sizing: border-box;
-}
-
-.error.active {
-  padding: 0.3em;
-}
- -

Ora vediamo il codice JavaScript che implementa l'errore personalizzato di validazione.

- -
// There are many ways to pick a DOM node; here we get the form itself and the email
-// input box, as well as the span element into which we will place the error message.
-const form  = document.getElementsByTagName('form')[0];
-
-const email = document.getElementById('mail');
-const emailError = document.querySelector('#mail + span.error');
-
-email.addEventListener('input', function (event) {
-  // Each time the user types something, we check if the
-  // form fields are valid.
-
-  if (email.validity.valid) {
-    // In case there is an error message visible, if the field
-    // is valid, we remove the error message.
-    emailError.innerHTML = ''; // Reset the content of the message
-    emailError.className = 'error'; // Reset the visual state of the message
-  } else {
-    // If there is still an error, show the correct error
-    showError();
-  }
-});
-
-form.addEventListener('submit', function (event) {
-  // if the email field is valid, we let the form submit
-
-  if(!email.validity.valid) {
-    // If it isn't, we display an appropriate error message
-    showError();
-    // Then we prevent the form from being sent by canceling the event
-    event.preventDefault();
-  }
-});
-
-function showError() {
-  if(email.validity.valueMissing) {
-    // If the field is empty
-    // display the following error message.
-    emailError.textContent = 'You need to enter an e-mail address.';
-  } else if(email.validity.typeMismatch) {
-    // If the field doesn't contain an email address
-    // display the following error message.
-    emailError.textContent = 'Entered value needs to be an e-mail address.';
-  } else if(email.validity.tooShort) {
-    // If the data is too short
-    // display the following error message.
-    emailError.textContent = `Email should be at least ${ email.minLength } characters; you entered ${ email.value.length }.`;
-  }
-
-  // Set the styling appropriately
-  emailError.className = 'error active';
-}
- -

I commenti spiegano le cose per bene, ma brevemente:

- - - -

Ecco il risultato live:

- -

{{EmbedGHLiveSample("learning-area/html/forms/form-validation/detailed-custom-validation.html", '100%', 150)}}

- -
-

Nota: Puoi trovare questo esempio live su GitHub su detailed-custom-validation.html (vedi anche il codice sorgente.)

-
- -

Le API di validazione ti forniscono uno stumento potente per gestire la validaizone delle form, fornendoti un grande controllo sulla interfaccia utente sopra e sotto quello che puoi fare con i soli HTML e CSS.

- -
-

Nota: Per ulteriori ingormazioni vedi il nostro Constraint validation guide, ed il riferimento Constraint Validation API.

-
- -

Validare le forms senza le built-in API

- -

In alcuni casi come ad esempio per i browsers più vecchi o per il supporto ai custom controls, non sarà possibile usare le API di validazione. Potrai ancora utilizzare JavaScript per validare la tua form, ma devi scrivere tutto da solo.

- -

Per validare la form fatti alcune domande:

- -
-
Che tipo di validazione devo eseguire?
-
Devi determinare come validare i tuoi dati: operazioni sulle stringhe, conversioni di tipo, regular expressions, e via discorrendo. Sta tutto a te.
-
Cosa devo fare se la form non è valida?
-
Questo chiaramente è materia di UI. Devi decidere come si deve comportare la form. Deve la form spedire i dati ugualmente? Devi illuminare i campi che sono in errore? Devi visualizzare messaggi di errore?
-
Come posso aiutare l'utente a correggere i dati non validi?
-
Per ridurre la frustrazione dell'utente, è molto importante fornire il maggior numero di informazioni possibili per guidarlo a correggere gli errori. Dovresti fornire suggerimenti sui dati attesi ed anche messaggi di errore chiari e comprensibili. Se vuoi approfondire come approntare la UI adeguata per la validazione, ecco alcuni articoli utili che dovresti leggere: - -
-
- -

Un esempio che non usa le API di validazione

- -

Per illustrare questo, quello che segue è una versione semplificata dell'esempio precedente che funziona anche con i browsers più vecchi.

- -

Il HTML è quasi uguale; abbiamo solo rimosso alcune funzionalità di validazione.

- -
<form>
-  <p>
-    <label for="mail">
-        <span>Please enter an email address:</span>
-        <input type="text" class="mail" id="mail" name="mail">
-        <span class="error" aria-live="polite"></span>
-    </label>
-  </p>
-  <!-- Some legacy browsers need to have the `type` attribute
-       explicitly set to `submit` on the `button`element -->
-  <button type="submit">Submit</button>
-</form>
- -

Allo stesso modo, anche il CSS non necessita di grandi modifiche; abbiamo solo trasformato la pseudoclasse {{cssxref(":invalid")}} in una vera classe ed evitato di usare il selettore di attiributo che non funziona con Internet Explorer 6.

- -
body {
-  font: 1em sans-serif;
-  width: 200px;
-  padding: 0;
-  margin : 0 auto;
-}
-
-form {
-  max-width: 200px;
-}
-
-p * {
-  display: block;
-}
-
-input.mail {
-  -webkit-appearance: none;
-
-  width: 100%;
-  border: 1px solid #333;
-  margin: 0;
-
-  font-family: inherit;
-  font-size: 90%;
-
-  box-sizing: border-box;
-}
-
-/* This is our style for the invalid fields */
-input.invalid{
-  border-color: #900;
-  background-color: #FDD;
-}
-
-input:focus.invalid {
-  outline: none;
-}
-
-/* This is the style of our error messages */
-.error {
-  width  : 100%;
-  padding: 0;
-
-  font-size: 80%;
-  color: white;
-  background-color: #900;
-  border-radius: 0 0 5px 5px;
-  box-sizing: border-box;
-}
-
-.error.active {
-  padding: 0.3em;
-}
- -

Le modifiche maggiori sono nel codice JavaScript, che richiede una revisione molto più pesante.

- -
// There are fewer ways to pick a DOM node with legacy browsers
-const form  = document.getElementsByTagName('form')[0];
-const email = document.getElementById('mail');
-
-// The following is a trick to reach the next sibling Element node in the DOM
-// This is dangerous because you can easily build an infinite loop.
-// In modern browsers, you should prefer using element.nextElementSibling
-let error = email;
-while ((error = error.nextSibling).nodeType != 1);
-
-// As per the HTML5 Specification
-const emailRegExp = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
-
-// Many legacy browsers do not support the addEventListener method.
-// Here is a simple way to handle this; it's far from the only one.
-function addEvent(element, event, callback) {
-  let previousEventCallBack = element["on"+event];
-  element["on"+event] = function (e) {
-    const output = callback(e);
-
-    // A callback that returns `false` stops the callback chain
-    // and interrupts the execution of the event callback.
-    if (output === false) return false;
-
-    if (typeof previousEventCallBack === 'function') {
-      output = previousEventCallBack(e);
-      if(output === false) return false;
-    }
-  }
-};
-
-// Now we can rebuild our validation constraint
-// Because we do not rely on CSS pseudo-class, we have to
-// explicitly set the valid/invalid class on our email field
-addEvent(window, "load", function () {
-  // Here, we test if the field is empty (remember, the field is not required)
-  // If it is not, we check if its content is a well-formed e-mail address.
-  const test = email.value.length === 0 || emailRegExp.test(email.value);
-
-  email.className = test ? "valid" : "invalid";
-});
-
-// This defines what happens when the user types in the field
-addEvent(email, "input", function () {
-  const test = email.value.length === 0 || emailRegExp.test(email.value);
-  if (test) {
-    email.className = "valid";
-    error.innerHTML = "";
-    error.className = "error";
-  } else {
-    email.className = "invalid";
-  }
-});
-
-// This defines what happens when the user tries to submit the data
-addEvent(form, "submit", function () {
-  const test = email.value.length === 0 || emailRegExp.test(email.value);
-
-  if (!test) {
-    email.className = "invalid";
-    error.innerHTML = "I expect an e-mail, darling!";
-    error.className = "error active";
-
-    // Some legacy browsers do not support the event.preventDefault() method
-    return false;
-  } else {
-    email.className = "valid";
-    error.innerHTML = "";
-    error.className = "error";
-  }
-});
- -

Il risultato assomiglia a questo:

- -

{{EmbedLiveSample("An_example_that_doesnt_use_the_constraint_validation_API", "100%", 130)}}

- -

Come puoi vedere, non è proprio così difficile costruire un tuo sistema di validazione. La parte difficile è di renderlo abbastanza generico da essere usato su tutte le piattaforme e con ogni form che andarai a creare. Ci sono anche molte librerie pronte che ti aiuntano nella validazione come ad esempio Validate.js.

- -

Metti alla prova le tue capacità!

- -

Sei arrivato alla fine di questo articolo, ma riesci a ricordare le informazioni più importanti? Puoi trovare alcuni ulteriori test per verificare che tu abbia recepito questi informazioni prima di proseguire — vedi Test your skills: Form validation.

- -

Sommario

- -

La validazione delle form lato client alle volte richiede JavaScript se desideri configurare lo stile ed i messaggi di errore, ma richiede sempre che tu pensi attentamente all'utente. Ricordati sempre di guidare l'utente ad inserire dati corretti. Quindi assicurati di:

- - - -

Quando hai controllato che la form è stata compilata correttamente, la puoi inviare. In seguito spieghiamo come spedire i dati delle form.

- -

{{PreviousMenuNext("Learn/Forms/UI_pseudo-classes", "Learn/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms")}}

- -

In questo modulo

- - - -

Argomenti avanzati

- - diff --git a/files/it/learn/html/forms/index.html b/files/it/learn/html/forms/index.html deleted file mode 100644 index 45c0d055dd..0000000000 --- a/files/it/learn/html/forms/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: HTML forms -slug: Learn/HTML/Forms -tags: - - Beginner - - Featured - - Forms - - Guide - - HTML - - Landing - - Learn - - NeedsTranslation - - TopicStub - - Web -translation_of: Learn/Forms ---- -
{{LearnSidebar}}
- -

Questo modulo fornisce una serie di articoli che ti aiuteranno ad apprendere le parti essenziali dei web forms. I web forms sono dei tool molto potenti per l'interazione con gli utenti - sono usati di solito per la raccolta di dati dagli utenti, o per permettere loro di controllare l'interfaccia utente. Tuttavia, per questioni storiche e tecniche non è sempre chiaro come sfruttare tutto il loro potenziale. Negli articoli che seguono, copriremo tutti gli aspetti essenziali dei web forms includendo anche la realizzazione della loro struttura HTML, dello stile dei controlli del form, della validazione dei dati del form, e dell'invio dei dati al server.

- -

Prerequisiti

- -

Prima di iniziare questo modulo, dovresti almeno affrontare la nostra parte di introduzione all'HTML A questo punto dovresti trovare le {{anch("guide introduttive")}} facili da capire, e dovresti anche sapere utilizzare la guida base sui Native form controls.

- -

Sapere utilizzare perfettamente i forms, comunque, richede molto più della semplice conoscenza HTML - avrai anche bisogno di imparare alcune specifiche tecniche per dare uno stile ai controlli del form, ed è richiesta anche un pò di conoscenza di scripting per affronte cose come la validazione e la creazione di controlli del form personalizzati. Pertanto, prima di andare ad affrontare le altre sezioni presenti qui sotto, ti raccomandiamo di abbandonare questa pagina ed imparare prima un pò di CSS e Javascript.

- -

Il paragrafo qui sopra spiega bene il perchè abbiamo messo i web forms in una pagina a solo, piuttosto che mischiare un pò di questi contenuti nelle aree delle pagine che spiegano HTML, CSS e Javascript — gli elementi del form sono molto più complessi rispetto a tutti gli altri elementi HTML, e richiedono anche un connubio perfetto con le tecniche CSS e Javascript per ottenere il massimo da loro.

- -
-

Nota bene: Se stai lavorando su un computer/tablet/altro dispositivo dove non sei in grado di creare i tuoi file, dovresti provare gli esempi di codice su un programma di coding online come JSBin o Glitch

-
- -

Guida introduttiva

- -
-
Il tuo primo form HTML
-
The first article in our series provides your very first experience of creating an HTML form, including designing a simple form, implementing it using the right HTML elements, adding some very simple styling via CSS, and how data is sent to a server.
-
How to structure an HTML form
-
With the basics out of the way, we now look in more detail at the elements used to provide structure and meaning to the different parts of a form.
-
- -

What form widgets are available?

- -
-
The native form widgets
-
We now look at the functionality of the different form widgets in detail, looking at what options are available to collect different types of data.
-
- -

Validating and submitting form data

- -
-
Sending form data
-
This article looks at what happens when a user submits a form — where does the data go, and how do we handle it when it gets there? We also look at some of the security concerns associated with sending form data.
-
Form data validation
-
Sending data is not enough — we also need to make sure that the data users fill out in forms is in the correct format we need to process it successfully, and that it won't break our applications. We also want to help our users to fill out our forms correctly and don't get frustrated when trying to use our apps. Form validation helps us achieve these goals — this article tells you what you need to know.
-
- -

Advanced guides

- -
-
How to build custom form widgets
-
You'll come across some cases where the native form widgets just don't provide what you need, e.g. because of styling or functionality. In such cases, you may need to build your own form widget out of raw HTML. This article explains how you'd do this and the considerations you need to be aware of when doing so, with a practical case study.
-
Sending forms through JavaScript
-
This article looks at ways to use a form to assemble an HTTP request and send it via custom JavaScript, rather than standard form submission. It also looks at why you'd want to do this, and the implications of doing so. (See also Using FormData objects.)
-
HTML forms in legacy browsers
-
Article covering feature detection, etc. This should be redirected to the cross browser testing module, as the same stuff is covered better there.
-
- -

Form styling guides

- -
-
Styling HTML forms
-
This article provides an introduction to styling forms with CSS, including all the basics you might need to know for basic styling tasks.
-
Advanced styling for HTML forms
-
Here we look at some more advanced form styling techniques that need to be used when trying to deal with some of the more difficult-to-style elements.
-
Property compatibility table for form widgets
-
This last article provides a handy reference allowing you to look up what CSS properties are compatible with what form elements.
-
- -

See also

- - diff --git a/files/it/learn/html/howto/use_data_attributes/index.html b/files/it/learn/html/howto/use_data_attributes/index.html new file mode 100644 index 0000000000..f256a42aaf --- /dev/null +++ b/files/it/learn/html/howto/use_data_attributes/index.html @@ -0,0 +1,82 @@ +--- +title: Uso degli attributi data +slug: Learn/HTML/Howto/Uso_attributi_data +tags: + - Attributi Di Dati Personalizzati + - Esempi + - Guide + - HTML + - HTML5 + - Web +translation_of: Learn/HTML/Howto/Use_data_attributes +--- +
{{LearnSidebar}}
+ +

HTML5 è progettato tenendo conto dell'estensibilità per i dati che possono essere associati ad un particolare elemento anche se questi non hanno alcun significato definito. I data-* attributes ci permettono di memorizzare informazioni extra su elementi semantici HTML standard senza utilizzare altri hack quali l'utilizzo di attributi non standard, proprietà extra nel DOM o {{domxref("Node.setUserData()")}}.

+ +

Sintassi HTML

+ +

La sintassi è semplice. Qualsiasi attributo associato ad un qualsivoglia elemento, il cui nome inizi con data- è un attributo data. Facciamo l'esempio di un elemento article nel quale vogliamo memorizzare qualche informazione extra che non ha alcuna rappresentazione visuale. E' sufficiente utilizzare l'attributo data per ottenere ciò:

+ +
<article
+  id="electriccars"
+  data-columns="3"
+  data-index-number="12314"
+  data-parent="cars">
+...
+</article>
+ +

Accesso mediante JavaScript

+ +

Accedere ai valori di questi attributi mediante JavaScript è molto semplice. E' possibile utilizzare {{domxref("Element.getAttribute", "getAttribute()")}} con il loro nome HTML completo, nello stesso modo in cui si accede a qualsiasi attributo di un elemento HTML, tuttavia lo standard HTML definisce un modo più semplice, un {{domxref("DOMStringMap")}} a cui è possibile accedere attraverso la proprietà {{domxref("HTMLElement.dataset", "dataset")}}.

+ +

Per ottenere un attributo data attraverso l'oggetto dataset, è sufficiente ricavare la proprietà utilizzando la parte del nome dell'attributo dopo data- (notare che i trattini vengono converti in camelCase).

+ +
var article = document.getElementById('electriccars');
+
+article.dataset.columns // "3"
+article.dataset.indexNumber // "12314"
+article.dataset.parent // "cars"
+ +

Ogni proprietà è una stringa e può essere letta e scritta. Nel caso precedente impostare article.dataset.columns = 5 cambierebbe il valore dell'attributo a "5".

+ +

Accesso mediante CSS

+ +

E' importante notare che, poichè gli attributi data sono semplici attributi HTML, è possibile accedere a questi anche via CSS. Ad esempio per mostrare i dati del genitore sull'elemento article è possibile ricorrere contenuti generati in CSS con la funzione {{cssxref("attr")}}:

+ +
article::before {
+  content: attr(data-parent);
+}
+ +

E' possibile anche utilizzare i selettori d'attributi in CSS  per cambiare lo stile in base ai dati:

+ +
article[data-columns='3'] {
+  width: 400px;
+}
+article[data-columns='4'] {
+  width: 600px;
+}
+ +

E' possibile vedere tutto ciò all'opera in questo esempio JSBin. 

+ +

Gli attributi data possono anche essere usati per memorizzare informazioni in costante cambiamento, come gli scores in un gioco. Utilizzare qui i selettori CSS e l'accesso via JavaScript è ciò che permette di ottenere effetti molto eleganti senza dover scrivere le proprie routine di visualizzazione. Vedi questo screencast per vedere un esempio che utilizza contenuti generati e transizioni CSS  (esempio JSBin).

+ +

I valori degli attributi data sono stringhe. I valori numerici devono essere virgolettati affinchè la stilizzazione abbia effetto.

+ +

Problemi

+ +

Non memorizzare contenuti che devono essere visibili e accessibili negli attributi data, poichè le tecnologie assistive potrebbero non accederci. In aggiunta, crawler di ricerca potrebbero non indicizzare i valori degli attributi data.

+ +

Le problematiche principali da considerare sono il supporto di Internet Explorer e la performance. Internet Explorer 11+ fornisce supporto per lo standard, ma le versioni precedenti non supportano dataset. Per supportare IE 10 e precedenti è necessario accedere agli attributi data utilizzando {{domxref("Element.getAttribute", "getAttribute()")}}. Inoltre, le prestazioni di lettura degli attributi data rispetto alla memorizzazione di questi dati in un oggetto JS regolare sono scarse. Inoltre, la performance di lettura degli attributi data comparata alla memorizzazione in un oggetto JavaScript è bassa.

+ +

Tenuto conto di ciò, tuttavia, per metadati personalizzati associati ad un elemento HTML, sono un'ottima soluzione.

+ +

In Firefox 49.0.2 (e probabilmente versioni antecedenti e precedenti), gli attributi data che eccedono 1022 caratteri non verranno letti da Javascript (EcmaScript 4).

+ +

Vedi anche

+ + diff --git a/files/it/learn/html/howto/uso_attributi_data/index.html b/files/it/learn/html/howto/uso_attributi_data/index.html deleted file mode 100644 index f256a42aaf..0000000000 --- a/files/it/learn/html/howto/uso_attributi_data/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: Uso degli attributi data -slug: Learn/HTML/Howto/Uso_attributi_data -tags: - - Attributi Di Dati Personalizzati - - Esempi - - Guide - - HTML - - HTML5 - - Web -translation_of: Learn/HTML/Howto/Use_data_attributes ---- -
{{LearnSidebar}}
- -

HTML5 è progettato tenendo conto dell'estensibilità per i dati che possono essere associati ad un particolare elemento anche se questi non hanno alcun significato definito. I data-* attributes ci permettono di memorizzare informazioni extra su elementi semantici HTML standard senza utilizzare altri hack quali l'utilizzo di attributi non standard, proprietà extra nel DOM o {{domxref("Node.setUserData()")}}.

- -

Sintassi HTML

- -

La sintassi è semplice. Qualsiasi attributo associato ad un qualsivoglia elemento, il cui nome inizi con data- è un attributo data. Facciamo l'esempio di un elemento article nel quale vogliamo memorizzare qualche informazione extra che non ha alcuna rappresentazione visuale. E' sufficiente utilizzare l'attributo data per ottenere ciò:

- -
<article
-  id="electriccars"
-  data-columns="3"
-  data-index-number="12314"
-  data-parent="cars">
-...
-</article>
- -

Accesso mediante JavaScript

- -

Accedere ai valori di questi attributi mediante JavaScript è molto semplice. E' possibile utilizzare {{domxref("Element.getAttribute", "getAttribute()")}} con il loro nome HTML completo, nello stesso modo in cui si accede a qualsiasi attributo di un elemento HTML, tuttavia lo standard HTML definisce un modo più semplice, un {{domxref("DOMStringMap")}} a cui è possibile accedere attraverso la proprietà {{domxref("HTMLElement.dataset", "dataset")}}.

- -

Per ottenere un attributo data attraverso l'oggetto dataset, è sufficiente ricavare la proprietà utilizzando la parte del nome dell'attributo dopo data- (notare che i trattini vengono converti in camelCase).

- -
var article = document.getElementById('electriccars');
-
-article.dataset.columns // "3"
-article.dataset.indexNumber // "12314"
-article.dataset.parent // "cars"
- -

Ogni proprietà è una stringa e può essere letta e scritta. Nel caso precedente impostare article.dataset.columns = 5 cambierebbe il valore dell'attributo a "5".

- -

Accesso mediante CSS

- -

E' importante notare che, poichè gli attributi data sono semplici attributi HTML, è possibile accedere a questi anche via CSS. Ad esempio per mostrare i dati del genitore sull'elemento article è possibile ricorrere contenuti generati in CSS con la funzione {{cssxref("attr")}}:

- -
article::before {
-  content: attr(data-parent);
-}
- -

E' possibile anche utilizzare i selettori d'attributi in CSS  per cambiare lo stile in base ai dati:

- -
article[data-columns='3'] {
-  width: 400px;
-}
-article[data-columns='4'] {
-  width: 600px;
-}
- -

E' possibile vedere tutto ciò all'opera in questo esempio JSBin. 

- -

Gli attributi data possono anche essere usati per memorizzare informazioni in costante cambiamento, come gli scores in un gioco. Utilizzare qui i selettori CSS e l'accesso via JavaScript è ciò che permette di ottenere effetti molto eleganti senza dover scrivere le proprie routine di visualizzazione. Vedi questo screencast per vedere un esempio che utilizza contenuti generati e transizioni CSS  (esempio JSBin).

- -

I valori degli attributi data sono stringhe. I valori numerici devono essere virgolettati affinchè la stilizzazione abbia effetto.

- -

Problemi

- -

Non memorizzare contenuti che devono essere visibili e accessibili negli attributi data, poichè le tecnologie assistive potrebbero non accederci. In aggiunta, crawler di ricerca potrebbero non indicizzare i valori degli attributi data.

- -

Le problematiche principali da considerare sono il supporto di Internet Explorer e la performance. Internet Explorer 11+ fornisce supporto per lo standard, ma le versioni precedenti non supportano dataset. Per supportare IE 10 e precedenti è necessario accedere agli attributi data utilizzando {{domxref("Element.getAttribute", "getAttribute()")}}. Inoltre, le prestazioni di lettura degli attributi data rispetto alla memorizzazione di questi dati in un oggetto JS regolare sono scarse. Inoltre, la performance di lettura degli attributi data comparata alla memorizzazione in un oggetto JavaScript è bassa.

- -

Tenuto conto di ciò, tuttavia, per metadati personalizzati associati ad un elemento HTML, sono un'ottima soluzione.

- -

In Firefox 49.0.2 (e probabilmente versioni antecedenti e precedenti), gli attributi data che eccedono 1022 caratteri non verranno letti da Javascript (EcmaScript 4).

- -

Vedi anche

- - diff --git a/files/it/learn/html/introduction_to_html/fondamenti_di_testo_html/index.html b/files/it/learn/html/introduction_to_html/fondamenti_di_testo_html/index.html deleted file mode 100644 index e5496dcb1a..0000000000 --- a/files/it/learn/html/introduction_to_html/fondamenti_di_testo_html/index.html +++ /dev/null @@ -1,953 +0,0 @@ ---- -title: Fondamenti di testo HTML -slug: Learn/HTML/Introduction_to_HTML/fondamenti_di_testo_html -translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Imparare/HTML/Introduzione_all_HTML/I_metadati_del_head_HTML", "Imparare/HTML/Introduzione_all_HTML/Creazione_di_collegamenti_ipertestuali", "Imparare/HTML/Introduzione_all_HTML")}}
- -

Una delle funzioni principali dell'HTML è quella di dare struttura e significato ai testi (conosciuto anche come {{glossary("semantica")}}) in modo che un browser possa visualizzarli correttamente. Questo articolo spiega il modo in cui l'{{glossary ("HTML")}} può essere usato per strutturare una pagina di testo aggiungendo titoli e paragrafi, enfatizzando parole, creando elenchi e altro.

- - - - - - - - - - - - -
Prerequisiti:Conoscenza di base dell'HTML, come spiegato in Getting started with HTML.
Obiettivi:Scopri come costruire una pagina di testo di base per dargli struttura e significato, inclusi paragrafi, intestazioni, elenchi, enfasi e citazioni.
- -

Le basi: Intestazioni e paragrafi

- -

Un testo più strutturato è composto da intestazioni e paragrafi, indipendentemente dal fatto che tu stia leggendo una storia, un giornale, un libro di testo del college, una rivista, ecc.

- -

An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs.

- -

Il contenuto strutturato rende l'esperienza di lettura più facile e divertente.

- -

In HTML, ogni paragrafo dev'essere racchiuso in un elemento {{htmlelement("p")}}, in questo modo:

- -
<p>Sono un paragrafo, oh si lo sono.</p>
- -

Ogni intestazione dev'essere racchiuso in un elemento d'intestazione:

- -
<h1>Sono il titolo della storia.</h1>
- -

Ci sono sei elementi di intestazione — {{htmlelement("h1")}}, {{htmlelement("h2")}}, {{htmlelement("h3")}}, {{htmlelement("h4")}}, {{htmlelement("h5")}}, e {{htmlelement("h6")}}. Ogni elemento rappresenta un livello di contenuto differente nel documento; <h1> rappresenta l'intestazione principale, <h2> rappresenta i sottotitoli, <h3> rappresenta i sub-sottovoci, e cosi via.

- -

Implementazione della gerarchia strutturale

- -

Come esempio, in una storia, <h1> rappresenterebbe il titolo della storia, <h2> rappresenterebbe il titolo di ogni capitolo e <h3> rappresenterebbe le sottosezioni di ogni capitolo, e cosi via.

- -
<h1>La noia schiacciante</h1>
-
-<p>Di Chris Mills</p>
-
-<h2>Capitolo 1: La notte scura</h2>
-
-<p>Era una notte scura. Da qualche parte, un gufo ha bubolato. La pioggia si abbetté sul ...</p>
-
-<h2>Capitolo 2: Il silenzio eterno</h2>
-
-<p>Il nostro protagonista non poteva nemmeno un sussurro uscire dalla figura oscura ...</p>
-
-<h3>Lo spettro parla</h3>
-
-<p>Erano passate altre ore, quando tutto d'un tratto lo spettro si raddrizzò e esclamò: "Per favore abbi pietà della mia anima!"</p>
- -

Dipende solo da te che cosa rappresentano esattamente gli elementi coinvolti, purché la gerarchia abbia un senso. Devi solo tenere a mente alcune buone pratiche mentre crei tali strutture:

- - - -

Perché abbiamo bisogno di una struttura?

- -

Per rispondere a questa domanda, diamo un'occhiata a  text-start.html — il punto di inizio del nostro esempio per questo articolo (un'ottima ricetta per l'hummus). Dovresti salvare una copia di questo file sul tuo computer, così come avrai bisogno di fare per gli esercizi più avanti. Il corpo di questo documento attualmente contiene molti pezzi di contenuto — non sono marcati in alcun modo, ma sono separati con degli a capo (Invio premuto per andare alla riga successiva).

- -

Tuttavia, quando aprirai il documento nel tuo browser, vedrai che il testo apparirà come un blocco unico!

- -

A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it.

- -

Questo succede perché non ci sono elemnti per dare una struttura al contenuto, così il browser non sa quale sia l'intestazione e quale sia il paragrafo. Inoltre:

- - - -

Abbiamo quindi bisogno di dare al nostro contenuto un markup strutturale.

- -

Apprendimento attivo: Dare una struttura al nostro contenuto

- -

Approfondiamo con un esempio. Nell'esempio qui sotto, aggiungi degli elementi al testo nel campo Input in modo che appaia come un'intestazione e due paragrafi nel campo  Output.

- -

In caso di errore, puoi sempre ripartire da zero usando il pulsante Reset. Se ti blocchi, premi il pulsante Show solution per vedere la risposta.

- - - -

{{ EmbedLiveSample('Playable_code', 700, 400, "", "", "hide-codepen-jsfiddle") }}

- -

Perché abbiamo bisogno delle semantiche?

- -

Le semantiche vengono utilizzate continuamente intorno a noi — ci affidiamo all'esperienza per predire la funzione degli oggetti che usiamo tutti i giorni; quando vediamo qualcosa, sappiamo quale sarà la sua funzione. Così, per esempio, ci aspettiamo che una luce rossa del semaforo significhi "fermati", e una luce verde significhi "vai".  Le cose diventano complicate rapidamente se vengono applicate le semantiche sbagliate (forse qualche Paese usa il rosso per dire "vai"? Spero di no.)

- -

Sulla stessa falsariga, dobbiamo essere sicuri che stiamo usando gli elementi giusti, per dare al nostro contenuto il giusto significato, funzione o aspetto. In questo contesto l'elemento {{htmlelement("h1")}} è anche un elemento semantico, che conferisce al testo che racchiude il ruolo (o il significato) di "intestazione di primo livello sulla tua pagina".

- -
<h1>This is a top level heading</h1>
- -

Per impostazione predefinita, il browser darà al suo font una dimensione grande per farlo apparire come un'intestazione (anche se potresti dargli uno stile per farlo apparire in qualsiasi modo tu voglia usando CSS). E' ancora più importante osservare che il suo valore semantico verrà usato in molti modi, ad esempio dai motori di ricerca e dagli screen reader (come spiegato in precedenza).

- -

Dall'atro lato, potresti far sembrare qualsiasi elemento come un'intestazione di primo livello. Considera quanto segue:

- -
<span style="font-size: 32px; margin: 21px 0;">Is this a top level heading?</span>
- -

Questo è un elemento {{htmlelement("span")}}. non ha semantiche. Lo usi per includere contenuto quando vuoi applicargli il CSS (o lavorarci con JavaScript) senza dargli alcun ulteriore significato (troverai di più su questo argomento più avanti nel corso). Abbiamo applicato del CSS per farlo apparire come un'intestazione di primo livello, m dal momento che non ha valore semantico non avrà nessuna delle qualità extra descritte sopra. E' una buona idea usare per questo scopo l'HTML appropriato.

- -

Liste

- -

Ora rivolgiamo la nostra attenzione alle liste. Le liste sono ovunque nella nostra vita — dalla lista della spesa alle indicazioni che in maniera inconscia segui per tornare a casa tutti i giorni, alla lista di istruzioni che stai seguendo in questi tutorial! Le liste sono ovunque anche sul Web, e abbiamo tre tipi differenti di cui occuparci.

- -

Puntata

- -

La lista puntanta viene utilizzata come mark up per elementi di cui l'ordine non è importante — prepara la tua lista della spesa.

- -
milk
-eggs
-bread
-hummus
- -

Ogni lista puntata comincia con un {{htmlelement("ul")}} che racchiude la lista:

- -
<ul>
-milk
-eggs
-bread
-hummus
-</ul>
- -

L'ultimo step è racchiudere ogni elemento della lista con {{htmlelement("li")}} (list item):

- -
<ul>
-  <li>milk</li>
-  <li>eggs</li>
-  <li>bread</li>
-  <li>hummus</li>
-</ul>
- -

Apprendimento attivo: prepara la tua lista a punti

- -

Prova a editare in diretta l'esempio sottostante per creare la tua lista puntata in HTML.

- - - -

{{ EmbedLiveSample('Playable_code_2', 700, 400, "", "", "hide-codepen-jsfiddle") }}

- -

Numerata

- -

La lista numerata viene utilizzata per elementi di cui l'ordine è importante — ecco un esempio:

- -
Drive to the end of the road
-Turn right
-Go straight across the first two roundabouts
-Turn left at the third roundabout
-The school is on your right, 300 meters up the road
- -

La struttura è la stessa della lista puntata ad eccezione che chiuderai la lista di elementi con  {{htmlelement("ol")}} element, al posto del <ul>:

- -
<ol>
-  <li>Drive to the end of the road</li>
-  <li>Turn right</li>
-  <li>Go straight across the first two roundabouts</li>
-  <li>Turn left at the third roundabout</li>
-  <li>The school is on your right, 300 meters up the road</li>
-</ol>
- -

Active learning: Marking up an ordered list

- -

Try editing the live sample below to create your very own HTML ordered list.

- - - -

{{ EmbedLiveSample('Playable_code_3', 700, 500, "", "", "hide-codepen-jsfiddle") }}

- -

Active learning: Marking up our recipe page

- -

So at this point in the article, you have all the information you need to mark up our recipe page example. You can choose to either save a local copy of our text-start.html starting file and do the work there, or do it in the editable example below. Doing it locally will probably be better, as then you'll get to save the work you are doing, whereas if you fill it in to the editable example, it will be lost the next time you open the page. Both have pros and cons.

- - - -

{{ EmbedLiveSample('Playable_code_4', 900, 500, "", "", "hide-codepen-jsfiddle") }}

- -

If you get stuck, you can always press the Show solution button, or check out our text-complete.html example on our github repo.

- -

Nesting lists

- -

It is perfectly ok to nest one list inside another one. You might want to have some sub-bullets sitting below a top level bullet. Let's take the second list from our recipe example:

- -
<ol>
-  <li>Remove the skin from the garlic, and chop coarsely.</li>
-  <li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>
-  <li>Add all the ingredients into a food processor.</li>
-  <li>Process all the ingredients into a paste.</li>
-  <li>If you want a coarse "chunky" hummus, process it for a short time.</li>
-  <li>If you want a smooth hummus, process it for a longer time.</li>
-</ol>
- -

Since the last two bullets are very closely related to the one before them (they read like sub-instructions or choices that fit below that bullet), it might make sense to nest them inside their own unordered list, and put that list inside the current fourth bullet. This would look like so:

- -
<ol>
-  <li>Remove the skin from the garlic, and chop coarsely.</li>
-  <li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>
-  <li>Add all the ingredients into a food processor.</li>
-  <li>Process all the ingredients into a paste.
-    <ul>
-      <li>If you want a coarse "chunky" hummus, process it for a short time.</li>
-      <li>If you want a smooth hummus, process it for a longer time.</li>
-    </ul>
-  </li>
-</ol>
- -

Try going back to the previous active learning example and updating the second list like this.

- -

Emphasis and importance

- -

In human language, we often emphasise certain words to alter the meaning of a sentence, and we often want to mark certain words as important or different in some way. HTML provides various semantic elements to allow us to mark up textual content with such effects, and in this section, we'll look at a few of the most common ones.

- -

Emphasis

- -

When we want to add emphasis in spoken language, we stress certain words, subtly altering the meaning of what we are saying. Similarly, in written language we tend to stress words by putting them in italics. For example, the following two sentences have different meanings.

- -

I am glad you weren't late.

- -

I am glad you weren't late.

- -

The first sentence sounds genuinely relieved that the person wasn't late. In contrast, the second one sounds sarcastic or passive-aggressive, expressing annoyance that the person arrived a bit late.

- -

In HTML we use the {{htmlelement("em")}} (emphasis) element to mark up such instances. As well as making the document more interesting to read, these are recognised by screen readers and spoken out in a different tone of voice. Browsers style this as italic by default, but you shouldn't use this tag purely to get italic styling. To do that, you'd use a {{htmlelement("span")}} element and some CSS, or perhaps an {{htmlelement("i")}} element (see below.)

- -
<p>I am <em>glad</em> you weren't <em>late</em>.</p>
- -

Strong importance

- -

To emphasize important words, we tend to stress them in spoken language and bold them in written language. For example:

- -

This liquid is highly toxic.

- -

I am counting on you. Do not be late!

- -

In HTML we use the {{htmlelement("strong")}} (strong importance) element to mark up such instances. As well as making the document more useful, again these are recognized by screen readers and spoken in a different tone of voice. Browsers style this as bold text by default, but you shouldn't use this tag purely to get bold styling. To do that, you'd use a {{htmlelement("span")}} element and some CSS, or perhaps a {{htmlelement("b")}} element (see below.)

- -
<p>This liquid is <strong>highly toxic</strong>.</p>
-
-<p>I am counting on you. <strong>Do not</strong> be late!</p>
- -

You can nest strong and emphasis inside one another if desired:

- -
<p>This liquid is <strong>highly toxic</strong> —
-if you drink it, <strong>you may <em>die</em></strong>.</p>
- -

Active learning: Let's be important!

- -

In this active learning section, we have provided an editable example. Inside it, we'd like you to try adding emphasis and strong importance to the words you think need them, just to have some practice.

- - - -

{{ EmbedLiveSample('Playable_code_5', 700, 500, "", "", "hide-codepen-jsfiddle") }}

- -

Italic, bold, underline...

- -

The elements we've discussed so far have clearcut associated semantics. The situation with {{htmlelement("b")}}, {{htmlelement("i")}}, and {{htmlelement("u")}} is somewhat more complicated. They came about so people could write bold, italics, or underlined text in an era when CSS was still supported poorly or not at all. Elements like this, which only affect presentation and not semantics, are known as presentational elements and should no longer be used, because as we've seen before, semantics is so important to accessibility, SEO, etc.

- -

HTML5 redefined <b>, <i> and <u> with new, somewhat confusing, semantic roles.

- -

Here's the best rule of thumb: it's likely appropriate to use <b>, <i>, or <u> to convey a meaning traditionally conveyed with bold, italics, or underline, provided there is no more suitable element. However, it always remains critical to keep an accessibility mindset. The concept of italics isn't very helpful to people using screen readers, or to people using a writing system other than the Latin alphabet.

- - - -
-

A kind warning about underline: People strongly associate underlining with hyperlinks. Therefore, on the Web, it's best to underline only links. Use the <u> element when it's semantically appropriate, but consider using CSS to change the default underline to something more appropriate on the Web. The example below illustrates how it can be done.

-
- -
<!-- scientific names -->
-<p>
-  The Ruby-throated Hummingbird (<i>Archilochus colubris</i>)
-  is the most common hummingbird in Eastern North America.
-</p>
-
-<!-- foreign words -->
-<p>
-  The menu was a sea of exotic words like <i lang="uk-latn">vatrushka</i>,
-  <i lang="id">nasi goreng</i> and <i lang="fr">soupe à l'oignon</i>.
-</p>
-
-<!-- a known misspelling -->
-<p>
-  Someday I'll learn how to <u>spel</u> better.
-</p>
-
-<!-- Highlight keywords in a set of instructions -->
-<ol>
-  <li>
-    <b>Slice</b> two pieces of bread off the loaf.
-  </li>
-  <li>
-    <b>Insert</b> a tomato slice and a leaf of
-    lettuce between the slices of bread.
-  </li>
-</ol>
- -

Summary

- -

That's it for now! This article should have given you a good idea of how to start marking up text in HTML, and introduced you to some of the most important elements in this area. There are a lot more semantic elements to cover in this area, and we'll look at a lot more in our 'More Semantic Elements' article, later on in the course. In the next article, we'll be looking in detail at how to create hyperlinks, possibly the most important element on the Web.

- -

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}

- -

In this module

- - diff --git a/files/it/learn/html/introduction_to_html/html_text_fundamentals/index.html b/files/it/learn/html/introduction_to_html/html_text_fundamentals/index.html new file mode 100644 index 0000000000..e5496dcb1a --- /dev/null +++ b/files/it/learn/html/introduction_to_html/html_text_fundamentals/index.html @@ -0,0 +1,953 @@ +--- +title: Fondamenti di testo HTML +slug: Learn/HTML/Introduction_to_HTML/fondamenti_di_testo_html +translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Imparare/HTML/Introduzione_all_HTML/I_metadati_del_head_HTML", "Imparare/HTML/Introduzione_all_HTML/Creazione_di_collegamenti_ipertestuali", "Imparare/HTML/Introduzione_all_HTML")}}
+ +

Una delle funzioni principali dell'HTML è quella di dare struttura e significato ai testi (conosciuto anche come {{glossary("semantica")}}) in modo che un browser possa visualizzarli correttamente. Questo articolo spiega il modo in cui l'{{glossary ("HTML")}} può essere usato per strutturare una pagina di testo aggiungendo titoli e paragrafi, enfatizzando parole, creando elenchi e altro.

+ + + + + + + + + + + + +
Prerequisiti:Conoscenza di base dell'HTML, come spiegato in Getting started with HTML.
Obiettivi:Scopri come costruire una pagina di testo di base per dargli struttura e significato, inclusi paragrafi, intestazioni, elenchi, enfasi e citazioni.
+ +

Le basi: Intestazioni e paragrafi

+ +

Un testo più strutturato è composto da intestazioni e paragrafi, indipendentemente dal fatto che tu stia leggendo una storia, un giornale, un libro di testo del college, una rivista, ecc.

+ +

An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs.

+ +

Il contenuto strutturato rende l'esperienza di lettura più facile e divertente.

+ +

In HTML, ogni paragrafo dev'essere racchiuso in un elemento {{htmlelement("p")}}, in questo modo:

+ +
<p>Sono un paragrafo, oh si lo sono.</p>
+ +

Ogni intestazione dev'essere racchiuso in un elemento d'intestazione:

+ +
<h1>Sono il titolo della storia.</h1>
+ +

Ci sono sei elementi di intestazione — {{htmlelement("h1")}}, {{htmlelement("h2")}}, {{htmlelement("h3")}}, {{htmlelement("h4")}}, {{htmlelement("h5")}}, e {{htmlelement("h6")}}. Ogni elemento rappresenta un livello di contenuto differente nel documento; <h1> rappresenta l'intestazione principale, <h2> rappresenta i sottotitoli, <h3> rappresenta i sub-sottovoci, e cosi via.

+ +

Implementazione della gerarchia strutturale

+ +

Come esempio, in una storia, <h1> rappresenterebbe il titolo della storia, <h2> rappresenterebbe il titolo di ogni capitolo e <h3> rappresenterebbe le sottosezioni di ogni capitolo, e cosi via.

+ +
<h1>La noia schiacciante</h1>
+
+<p>Di Chris Mills</p>
+
+<h2>Capitolo 1: La notte scura</h2>
+
+<p>Era una notte scura. Da qualche parte, un gufo ha bubolato. La pioggia si abbetté sul ...</p>
+
+<h2>Capitolo 2: Il silenzio eterno</h2>
+
+<p>Il nostro protagonista non poteva nemmeno un sussurro uscire dalla figura oscura ...</p>
+
+<h3>Lo spettro parla</h3>
+
+<p>Erano passate altre ore, quando tutto d'un tratto lo spettro si raddrizzò e esclamò: "Per favore abbi pietà della mia anima!"</p>
+ +

Dipende solo da te che cosa rappresentano esattamente gli elementi coinvolti, purché la gerarchia abbia un senso. Devi solo tenere a mente alcune buone pratiche mentre crei tali strutture:

+ + + +

Perché abbiamo bisogno di una struttura?

+ +

Per rispondere a questa domanda, diamo un'occhiata a  text-start.html — il punto di inizio del nostro esempio per questo articolo (un'ottima ricetta per l'hummus). Dovresti salvare una copia di questo file sul tuo computer, così come avrai bisogno di fare per gli esercizi più avanti. Il corpo di questo documento attualmente contiene molti pezzi di contenuto — non sono marcati in alcun modo, ma sono separati con degli a capo (Invio premuto per andare alla riga successiva).

+ +

Tuttavia, quando aprirai il documento nel tuo browser, vedrai che il testo apparirà come un blocco unico!

+ +

A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it.

+ +

Questo succede perché non ci sono elemnti per dare una struttura al contenuto, così il browser non sa quale sia l'intestazione e quale sia il paragrafo. Inoltre:

+ + + +

Abbiamo quindi bisogno di dare al nostro contenuto un markup strutturale.

+ +

Apprendimento attivo: Dare una struttura al nostro contenuto

+ +

Approfondiamo con un esempio. Nell'esempio qui sotto, aggiungi degli elementi al testo nel campo Input in modo che appaia come un'intestazione e due paragrafi nel campo  Output.

+ +

In caso di errore, puoi sempre ripartire da zero usando il pulsante Reset. Se ti blocchi, premi il pulsante Show solution per vedere la risposta.

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 400, "", "", "hide-codepen-jsfiddle") }}

+ +

Perché abbiamo bisogno delle semantiche?

+ +

Le semantiche vengono utilizzate continuamente intorno a noi — ci affidiamo all'esperienza per predire la funzione degli oggetti che usiamo tutti i giorni; quando vediamo qualcosa, sappiamo quale sarà la sua funzione. Così, per esempio, ci aspettiamo che una luce rossa del semaforo significhi "fermati", e una luce verde significhi "vai".  Le cose diventano complicate rapidamente se vengono applicate le semantiche sbagliate (forse qualche Paese usa il rosso per dire "vai"? Spero di no.)

+ +

Sulla stessa falsariga, dobbiamo essere sicuri che stiamo usando gli elementi giusti, per dare al nostro contenuto il giusto significato, funzione o aspetto. In questo contesto l'elemento {{htmlelement("h1")}} è anche un elemento semantico, che conferisce al testo che racchiude il ruolo (o il significato) di "intestazione di primo livello sulla tua pagina".

+ +
<h1>This is a top level heading</h1>
+ +

Per impostazione predefinita, il browser darà al suo font una dimensione grande per farlo apparire come un'intestazione (anche se potresti dargli uno stile per farlo apparire in qualsiasi modo tu voglia usando CSS). E' ancora più importante osservare che il suo valore semantico verrà usato in molti modi, ad esempio dai motori di ricerca e dagli screen reader (come spiegato in precedenza).

+ +

Dall'atro lato, potresti far sembrare qualsiasi elemento come un'intestazione di primo livello. Considera quanto segue:

+ +
<span style="font-size: 32px; margin: 21px 0;">Is this a top level heading?</span>
+ +

Questo è un elemento {{htmlelement("span")}}. non ha semantiche. Lo usi per includere contenuto quando vuoi applicargli il CSS (o lavorarci con JavaScript) senza dargli alcun ulteriore significato (troverai di più su questo argomento più avanti nel corso). Abbiamo applicato del CSS per farlo apparire come un'intestazione di primo livello, m dal momento che non ha valore semantico non avrà nessuna delle qualità extra descritte sopra. E' una buona idea usare per questo scopo l'HTML appropriato.

+ +

Liste

+ +

Ora rivolgiamo la nostra attenzione alle liste. Le liste sono ovunque nella nostra vita — dalla lista della spesa alle indicazioni che in maniera inconscia segui per tornare a casa tutti i giorni, alla lista di istruzioni che stai seguendo in questi tutorial! Le liste sono ovunque anche sul Web, e abbiamo tre tipi differenti di cui occuparci.

+ +

Puntata

+ +

La lista puntanta viene utilizzata come mark up per elementi di cui l'ordine non è importante — prepara la tua lista della spesa.

+ +
milk
+eggs
+bread
+hummus
+ +

Ogni lista puntata comincia con un {{htmlelement("ul")}} che racchiude la lista:

+ +
<ul>
+milk
+eggs
+bread
+hummus
+</ul>
+ +

L'ultimo step è racchiudere ogni elemento della lista con {{htmlelement("li")}} (list item):

+ +
<ul>
+  <li>milk</li>
+  <li>eggs</li>
+  <li>bread</li>
+  <li>hummus</li>
+</ul>
+ +

Apprendimento attivo: prepara la tua lista a punti

+ +

Prova a editare in diretta l'esempio sottostante per creare la tua lista puntata in HTML.

+ + + +

{{ EmbedLiveSample('Playable_code_2', 700, 400, "", "", "hide-codepen-jsfiddle") }}

+ +

Numerata

+ +

La lista numerata viene utilizzata per elementi di cui l'ordine è importante — ecco un esempio:

+ +
Drive to the end of the road
+Turn right
+Go straight across the first two roundabouts
+Turn left at the third roundabout
+The school is on your right, 300 meters up the road
+ +

La struttura è la stessa della lista puntata ad eccezione che chiuderai la lista di elementi con  {{htmlelement("ol")}} element, al posto del <ul>:

+ +
<ol>
+  <li>Drive to the end of the road</li>
+  <li>Turn right</li>
+  <li>Go straight across the first two roundabouts</li>
+  <li>Turn left at the third roundabout</li>
+  <li>The school is on your right, 300 meters up the road</li>
+</ol>
+ +

Active learning: Marking up an ordered list

+ +

Try editing the live sample below to create your very own HTML ordered list.

+ + + +

{{ EmbedLiveSample('Playable_code_3', 700, 500, "", "", "hide-codepen-jsfiddle") }}

+ +

Active learning: Marking up our recipe page

+ +

So at this point in the article, you have all the information you need to mark up our recipe page example. You can choose to either save a local copy of our text-start.html starting file and do the work there, or do it in the editable example below. Doing it locally will probably be better, as then you'll get to save the work you are doing, whereas if you fill it in to the editable example, it will be lost the next time you open the page. Both have pros and cons.

+ + + +

{{ EmbedLiveSample('Playable_code_4', 900, 500, "", "", "hide-codepen-jsfiddle") }}

+ +

If you get stuck, you can always press the Show solution button, or check out our text-complete.html example on our github repo.

+ +

Nesting lists

+ +

It is perfectly ok to nest one list inside another one. You might want to have some sub-bullets sitting below a top level bullet. Let's take the second list from our recipe example:

+ +
<ol>
+  <li>Remove the skin from the garlic, and chop coarsely.</li>
+  <li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>
+  <li>Add all the ingredients into a food processor.</li>
+  <li>Process all the ingredients into a paste.</li>
+  <li>If you want a coarse "chunky" hummus, process it for a short time.</li>
+  <li>If you want a smooth hummus, process it for a longer time.</li>
+</ol>
+ +

Since the last two bullets are very closely related to the one before them (they read like sub-instructions or choices that fit below that bullet), it might make sense to nest them inside their own unordered list, and put that list inside the current fourth bullet. This would look like so:

+ +
<ol>
+  <li>Remove the skin from the garlic, and chop coarsely.</li>
+  <li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>
+  <li>Add all the ingredients into a food processor.</li>
+  <li>Process all the ingredients into a paste.
+    <ul>
+      <li>If you want a coarse "chunky" hummus, process it for a short time.</li>
+      <li>If you want a smooth hummus, process it for a longer time.</li>
+    </ul>
+  </li>
+</ol>
+ +

Try going back to the previous active learning example and updating the second list like this.

+ +

Emphasis and importance

+ +

In human language, we often emphasise certain words to alter the meaning of a sentence, and we often want to mark certain words as important or different in some way. HTML provides various semantic elements to allow us to mark up textual content with such effects, and in this section, we'll look at a few of the most common ones.

+ +

Emphasis

+ +

When we want to add emphasis in spoken language, we stress certain words, subtly altering the meaning of what we are saying. Similarly, in written language we tend to stress words by putting them in italics. For example, the following two sentences have different meanings.

+ +

I am glad you weren't late.

+ +

I am glad you weren't late.

+ +

The first sentence sounds genuinely relieved that the person wasn't late. In contrast, the second one sounds sarcastic or passive-aggressive, expressing annoyance that the person arrived a bit late.

+ +

In HTML we use the {{htmlelement("em")}} (emphasis) element to mark up such instances. As well as making the document more interesting to read, these are recognised by screen readers and spoken out in a different tone of voice. Browsers style this as italic by default, but you shouldn't use this tag purely to get italic styling. To do that, you'd use a {{htmlelement("span")}} element and some CSS, or perhaps an {{htmlelement("i")}} element (see below.)

+ +
<p>I am <em>glad</em> you weren't <em>late</em>.</p>
+ +

Strong importance

+ +

To emphasize important words, we tend to stress them in spoken language and bold them in written language. For example:

+ +

This liquid is highly toxic.

+ +

I am counting on you. Do not be late!

+ +

In HTML we use the {{htmlelement("strong")}} (strong importance) element to mark up such instances. As well as making the document more useful, again these are recognized by screen readers and spoken in a different tone of voice. Browsers style this as bold text by default, but you shouldn't use this tag purely to get bold styling. To do that, you'd use a {{htmlelement("span")}} element and some CSS, or perhaps a {{htmlelement("b")}} element (see below.)

+ +
<p>This liquid is <strong>highly toxic</strong>.</p>
+
+<p>I am counting on you. <strong>Do not</strong> be late!</p>
+ +

You can nest strong and emphasis inside one another if desired:

+ +
<p>This liquid is <strong>highly toxic</strong> —
+if you drink it, <strong>you may <em>die</em></strong>.</p>
+ +

Active learning: Let's be important!

+ +

In this active learning section, we have provided an editable example. Inside it, we'd like you to try adding emphasis and strong importance to the words you think need them, just to have some practice.

+ + + +

{{ EmbedLiveSample('Playable_code_5', 700, 500, "", "", "hide-codepen-jsfiddle") }}

+ +

Italic, bold, underline...

+ +

The elements we've discussed so far have clearcut associated semantics. The situation with {{htmlelement("b")}}, {{htmlelement("i")}}, and {{htmlelement("u")}} is somewhat more complicated. They came about so people could write bold, italics, or underlined text in an era when CSS was still supported poorly or not at all. Elements like this, which only affect presentation and not semantics, are known as presentational elements and should no longer be used, because as we've seen before, semantics is so important to accessibility, SEO, etc.

+ +

HTML5 redefined <b>, <i> and <u> with new, somewhat confusing, semantic roles.

+ +

Here's the best rule of thumb: it's likely appropriate to use <b>, <i>, or <u> to convey a meaning traditionally conveyed with bold, italics, or underline, provided there is no more suitable element. However, it always remains critical to keep an accessibility mindset. The concept of italics isn't very helpful to people using screen readers, or to people using a writing system other than the Latin alphabet.

+ + + +
+

A kind warning about underline: People strongly associate underlining with hyperlinks. Therefore, on the Web, it's best to underline only links. Use the <u> element when it's semantically appropriate, but consider using CSS to change the default underline to something more appropriate on the Web. The example below illustrates how it can be done.

+
+ +
<!-- scientific names -->
+<p>
+  The Ruby-throated Hummingbird (<i>Archilochus colubris</i>)
+  is the most common hummingbird in Eastern North America.
+</p>
+
+<!-- foreign words -->
+<p>
+  The menu was a sea of exotic words like <i lang="uk-latn">vatrushka</i>,
+  <i lang="id">nasi goreng</i> and <i lang="fr">soupe à l'oignon</i>.
+</p>
+
+<!-- a known misspelling -->
+<p>
+  Someday I'll learn how to <u>spel</u> better.
+</p>
+
+<!-- Highlight keywords in a set of instructions -->
+<ol>
+  <li>
+    <b>Slice</b> two pieces of bread off the loaf.
+  </li>
+  <li>
+    <b>Insert</b> a tomato slice and a leaf of
+    lettuce between the slices of bread.
+  </li>
+</ol>
+ +

Summary

+ +

That's it for now! This article should have given you a good idea of how to start marking up text in HTML, and introduced you to some of the most important elements in this area. There are a lot more semantic elements to cover in this area, and we'll look at a lot more in our 'More Semantic Elements' article, later on in the course. In the next article, we'll be looking in detail at how to create hyperlinks, possibly the most important element on the Web.

+ +

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}

+ +

In this module

+ + diff --git a/files/it/learn/html/introduction_to_html/i_metadata_nella_head_in_html/index.html b/files/it/learn/html/introduction_to_html/i_metadata_nella_head_in_html/index.html deleted file mode 100644 index de092cd8b9..0000000000 --- a/files/it/learn/html/introduction_to_html/i_metadata_nella_head_in_html/index.html +++ /dev/null @@ -1,265 +0,0 @@ ---- -title: Cosa c'è nella head? Metadata in HTML -slug: Learn/HTML/Introduction_to_HTML/I_metadata_nella_head_in_HTML -tags: - - Guida - - HTML - - Principiante - - favicon - - head - - lang - - metadata -translation_of: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}
- -

La {{glossary("Head", "head")}} di un documento HTML è la parte che non viene visualizzata nel browser quando la pagina viene caricata. Contiene informazioni come il {{htmlelement("title")}}, della pagina, i link ai {{glossary("CSS")}} (se vuoi applicare uno stile al contenuto tramite i CSS), i link alle favicons personalizzate, e altri metadata (dati relativi all'HTML, come chi lo ha scritto, o importanti parole chiave che descrivono il documento). In questo articolo vedremo tutto ciò e anche altro, per darti una buona base del markup e di altro codice che dovrebbe trovarsi nella head.

- - - - - - - - - - - - -
Prerequisiti:Familiarità con le basi di HTML, spiegate in Cominciare con l'HTML.
Obbiettivi:Conoscere la head dell'HTML, qual è il suo scopo, i più importanti elementi che può contenere e quale effetto può avere sul documento HTML.
- -

Cosa è la head?

- -

Riprendiamo il semplice esempio di documento HTML che abbiamo visto nell'articolo precedente.

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>My test page</title>
-  </head>
-  <body>
-    <p>This is my page</p>
-  </body>
-</html>
- -

La head HTML è il contenuto dell'elemento {{htmlelement("head")}} — diversamente dal contenuto dell'elemento {{htmlelement("body")}} (che è visualizzato quando la pagina viene caricata dal browser), il contenuto della head non viene visualizzato nella pagina. Invece, il compito della head è di contenere dei {{glossary("Metadata", "metadata")}} relativi al documento. Nell'esempio precedente, la head è piuttosto ridotta:

- -
<head>
-  <meta charset="utf-8">
-  <title>My test page</title>
-</head>
- -

In pagine più corpose tuttavia, la head può diventare piuttosto piena di elementi — prova ad andare in qualcuno dei tuoi siti favoriti e usando i developer tools esamina il contenuto della loro head. Il nostro scopo qui, non è di mostrarti l'uso di qualsiasi cosa sia possibile mettere nella head, ma piuttosto di insegnarti come usare le cose più ovvie da mettere nella head e fare in modo che tu abbia un po' di familiarità con quelle. Andiamo a cominciare.

- -

Aggiungere un title

- -

Abbiamo già visto l'elemento {{htmlelement("title")}} in azione — può essere usato per aggiungere un titolo ad un documento. Ciò può confondere conl'elemento {{htmlelement("h1")}} che è usato per aggiungere l'intestazione principale al contenuto del body — a cui ci si riferisce lo stesso come al titolo della pagina; ma sono due cose differenti!

- - - -

Active learning: esaminare un sempice esempio.

- -
    -
  1. Per avviare questo active learning, ci piacerebbe che andassi al nostro repositori Github e scaricassi una copia della nostra pagina title-example.html. Per farlo puoi usare uno dei due modi seguenti: - -
      -
    1. copiare ed incollare il codice della pagina in un nuovo file di testo creato col tuo editor e salvarlo in un posto adatto;
      2. -
    2. Premere il tasto "Raw" nella pagina, scegliere File > Save Page As... nel menù del browser e scegliere un posto in cui salvarlo.
      3. -
    -
    2. -
  2. Adesso apri il file nel browser. Dovresti vedere questo: -

    A simple web page with the title set to <title> element, and the <h1> set to <h1> element.Adesso dovrebbe essere chiaro dove appare il contenuto dell'elemento <h1> e dove appare il contenutodell'elemento <title>!

    -
    3. -
  3. Dovresti anche provare as aprire il codice nell'editor, modificare il contenuto di questi elementi, ricaricare la pagina nel browser. Adesso puoi divertiti un po'!
    4. -
- -

Il contenuto dell'elemento <title> è anche usato in altri modi. Per esempio, se provi a salvare  la pagina nei preferiti (Bookmarks > Bookmark This Page, in Firefox), vedrai il contenuto del <title> come nome suggerito per il segnalibro.

- -

A webpage being bookmarked in firefox; the bookmark name has been automatically filled in with the contents of the <title> element

- -

Il <title> è usato anche nelle ricerche, come vedrai più avanti.

- -

Metadata: l'elemento <meta>

- -

I metadati sono dati che descrivono altri dati. In HTML c'è un modo "ufficiale" per aggiungere metadata al documento: l'elemento {{htmlelement("meta")}}. Inoltre, le altre cose di cui parliamo in questo articolo possono essere pensate anch'esse come metadata. Ci sono molti tipi di elementi <meta> che possono essere inseriti nella <head> del documento, ma non vogliamo cercare di parlare di tutti adesso, perché renderebbe tutto troppo complicato. Invece, spiegheremo poche cose che potrai vedere più spesso, solo per darti un'idea.

- -

Specificare la codifica dei caratteri del documento

- -

Nell'esempio che abbiamo visto, c'era questa riga:

- -
<meta charset="utf-8">
- -

Questo elemento specifica semplicemente la codifica dei caratteri del documento: il set di caratteri che il documento può usare.  utf-8 è un set di caratteri universale, che include pressoché ogni carattere di ogni linguaggio umano. Ciò significa che la tua pagina web potrà mostrare qualsiasi lingua; pertanto è una buona cosa usare questo set di caratteri per ogni pagina che crei! Per esempio, la tua pagina potrebbe tranquillamente gestire sia l'inglese che il giapponese:

- -

a web page containing English and Japanese characters, with the character encoding set to universal, or utf-8. Both languages display fine,Se imposti il set di caratteri ISO-8859-1, per esempio (il set di caratteri per l'alfabeto latino), il rendering della pagina potrebbe essere scombinato:

- -

a web page containing English and Japanese characters, with the character encoding set to latin. The Japanese characters don't display correctly

- -

Active learning: esercitarsi con la codifica dei caratteri

- -

Per questa prova, riprendi il modello di HTML che hai scaricato durante la precedente sezione riguardante l'elemento <title> (il title-example.html), prova a cambiare il set dei caratteri (il valore di charset) a ISO-8859-1 e aggiungi del giapponese alla pagina; questo è il codice che abbiamo usato:

- -
<p>Japanese example: ご飯が熱い。</p>
- -

Aggiungere l'autore e la descrizione

- -

Molti elementi <meta> includono gli attributi name e content :

- - - -

Due degli elementi meta che è utile inserire nella pagina definiscono l'autore della pagina e una concisa descrizione della stessa. Vediamo un esempio:

- -
<meta name="author" content="Chris Mills">
-<meta name="description" content="The MDN Learning Area aims to provide
-complete beginners to the Web with all they need to know to get
-started with developing web sites and applications.">
- -

Specificare un autore è utile per ricavare chi ha scritto la pagina: nel caso li si voglia contattare per chiarimenti riguardo al contenuto. Alcuni Content Management Systems (CMS) hanno dei meccanismi per estrarre automaticamente le informazioni sull'autore e renderle disponibili per questo scopo.

- -

Specificare una descrizione che includa parole chiave relative al contenuto della pagina è utile perché può far apparire la pagina più avanti nei risultati delle ricerche fatte con i motori di ricerca (questo è un tema trattato in Search Engine Optimization, o {{glossary("SEO")}}.)

- -

Active learning: L'uso della descrizione nei motori di ricerca

- -

La descrizione è usata anche per la generazione delle pagine dei risultati della ricerca. Facciamo un esercizio per capire meglio.

- -
    -
  1. Vai alla prima pagina di The Mozilla Developer Network.
    2. -
  2. Guarda il sorgente della pagina (Right/Ctrl + click sulla pagina, nel menù contestuale scegli View Page Source/Visualizza sorgente pagina).
    3. -
  3. Trova il meta tag description. Sarà così: - 
    <meta name="description" content="The Mozilla Developer Network (MDN) provides
-information about Open Web technologies including HTML, CSS, and APIs for both
-Web sites and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">
    -
    4. -
  4. Adesso cerca "Mozilla Developer Network" con il tuo motore di ricerca preferito (We used Yahoo.) Vedrai il contenuto dell'elemento <meta> description e il contenuto dell'elemento <title> usati nei risultati della ricerca. — Vale decisamente la pena averli! -

    A Yahoo search result for "Mozilla Developer Network"

    -
    5. -
- -
-

Note: In Google, vedrai alcune altre pagine rilevanti del sito MDN elencate sotto il link alla homepage MDN — sono chiamati sitelinks e sono configurabili negli strumenti di Google per webmasters (Google's webmaster tools) — un modo per migliorare i risultati del tuo sito nelle ricerche fatte col motore di ricerca di Google.

-
- -
-

Note: Molte proprietà <meta> non sono più usate. Per esempio, l'elemento <meta> keyword  — che si supponeva dover essere usato per fornire ai motori di ricerca termini per rendere la pagina rilevante per le ricerche di quei termini — è ignorato dai motori di ricerca perché gli spammers lo riempivano di centinaia di parole chiave, pregiudicando i risultati della ricerca.

-
- -

Altri tipi di metadata

- -

Setacciando il Web, troverai altri tipi di metadata. Molte delle proprietà che vedrai nei siti web sono creazioni proprietarie (coperte da Copyright), progettate per dotare alcuni siti (tipo i social network) di particolari informazioni che loro possono usare.

- -

Per esempio, Open Graph Data è un insieme di metadata (un protocollo) che Facebook ha inventato per  avere dei metadata più ricchi per i siti web. Nel codice sorgente MDN troverai questo:

- -
<meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png">
-<meta property="og:description" content="The Mozilla Developer Network (MDN) provides
-information about Open Web technologies including HTML, CSS, and APIs for both Web sites
-and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">
-<meta property="og:title" content="Mozilla Developer Network">
- -

Un effetto è che quando crei un link a MDN su facebook, il collegamento appare accompagnato da una immagine e da una descrizione: è una esperienza più ricca per gli utenti.

- -

Open graph protocol data from the MDN homepage as displayed on facebook, showing an image, title, and description.Anche Twitter ha i suoi metadati proprietari simili, che hanno un effetto simile quando l'indirizzo del sito è mostrato su twitter.com. Per esempio:

- -
<meta name="twitter:title" content="Mozilla Developer Network">
- -

Aggiungere icone personalizzate al tuo sito

- -

Per arricchire ulteriormente il progetto del tuo sito, puoi aggiungere un riferimento a delle icone personalizzate nei tuoi metadata e queste saranno mostrate in alcuni contesti.

- -

Le humble favicon, che hanno girato per molti molti anni, sono state le prime icone di questo tipo: icone 16 x 16 pixel usate in molti modi. Le favicon possono essere aggiunte alla pagina :

- -
    -
  1. Salvandole nella stessa directory in cui è salvato il file index.html nel formato .ico (molti browser supportano le favicons in formati più comuni, come .gif or .png,  ma usando il formato .ico si è sicuri che funzionino anche con browser vecchi come Internet Explorer 6.)
    2. -
  2. Aggiungendo la seguente riga nella <head> del docuemnto HTML per creare un riferimento all'icona: - 
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    -
    3. -
- -

I browser moderni usano le favicon in molti posti, come nella scheda in cui la pagina è aperta o nel pannello dei segnalibri quando la pagina è salvata tra i preferiti.

- -

The Firefox bookmarks panel, showing a bookmarked example with a favicon displayed next to it.

- -

Ci sono molti altri tipi di icone da prendere in considerazione attualmente. Per esempio, nel codice della homepage MDN troverai questo:

- -
<!-- third-generation iPad with high-resolution Retina display: -->
-<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png">
-<!-- iPhone with high-resolution Retina display: -->
-<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.cdn.mozilla.net/static/img/favicon114.0e9fabd44f85.png">
-<!-- first- and second-generation iPad: -->
-<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.cdn.mozilla.net/static/img/favicon72.8ff9d87c82a0.png">
-<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
-<link rel="apple-touch-icon-precomposed" href="https://developer.cdn.mozilla.net/static/img/favicon57.a2490b9a2d76.png">
-<!-- basic favicon -->
-<link rel="shortcut icon" href="https://developer.cdn.mozilla.net/static/img/favicon32.e02854fdcf73.png">
- -

I commenti spiegano per cosa è usata ciascuna icona — questi elementisoddisfano esigenze quali, ad esempio, fornire una piacevole icona ad alta risoluzione quando il sito è salvato nello schermo di un iPad.

- -

Non preoccuparti troppo di aggiungere tutti questi tipi di icone al momento — sono caratteristiche piuttosto avanzate e non ci si aspetta che tu conosca queste cose per progredire nel corso. Lo scopo principale, qui, è farti sapere cosa sono queste cose nel caso le incontri mentre navighi il codice sorgente di altri siti web.

- -

Applicare CSS e JavaScript all'HTML

- -

Pressoché tutti i siti web, oggi, impiegano i {{glossary("CSS")}} per apparire fantastici e i  {{glossary("JavaScript")}} per potenziare l'interattività, i video players, le mappe, i giochi e altro. CSS e JavaScript sono generalmente applicati alle pagine web usando l'elemento {{htmlelement("link")}} e l'elemento {{htmlelement("script")}} rispettivamente.

- - - -

Active learning: applicare CSS e JavaScript ad una pagina

- -
    -
  1. Per iniziare questo apprendimento attivo, preleva una copia del nostro meta-example.html, dello script.js e del file style.css , e salvali nel tuo computer nella stessa directory. Assicurati che siano salvati con i nomi e le estensioni dei nomi corrette.
    2. -
  2. Apri il file HTML sia nel browser che nel tuo editor di testo
    3. -
  3. Seguendo le informazioni date precedentemente, aggiungi gli elementi {{htmlelement("link")}} e {{htmlelement("script")}} al tuo HTML così che il CSS e il JavaScript gli siano applicati.
    4. -
- -

Se fatto correttamente, quando salvi l' HTML e ricarichi la pagina del browser, vedrai cambiare le cose (la lista non ci sarà, perché la dovete fare voi; il testo dice: "Qui sotto c'è una lista dinamica. Clicca ovunque fuori dalla lista per aggiungerle un nuovo punto. Clicca un punto della lista per cambiare il suo testo in qualcos'altro").

- -

Example showing a page with CSS and JavaScript applied to it. The CSS has made the page go green, whereas the JavaScript has added a dynamic list to the page.

- - - -
-

Note: se sei bloccato e non riesci ad applicare i CSS/JS , prova ad esaminare la pagina d'esempio css-and-js.html.

-
- -

Impostare la lingua principale del documento

- -

In fine. vale la pena dire che si può (e lo si dovrebbe proprio fare) impostare la lingua della pagina. Può essere fatto aggiungendo l'attributo lang al tag HTML di apertura (come visto nel meta-example.html.)

- -
<html lang="en-US">
- -

Ciò si rivela utile in molti modi. Il tuo documento sarà indicizzato meglio dai motori di ricerca (permettendoti di apparire correttamente nelle ricerche per linguaggi specifici) ed è utile agli utenti con disabilità visive che usano degli screen readers (per esempio, la parola "six" esiste sia in francese che in inglese, ma è pronunciata diversamente.)

- -

Puoi anche impostare sottosezioni del documento perché vengano riconosciute come scritte in altre lingue; possiamo impostare la lingua giapponese per il nostro esempio in questo modo:

- -
<p>Japanese example: <span lang="jp">ご飯が熱い。</span>.</p>
- -

Questi codici sono definiti dalla ISO 639-1. Puoi trovare più informazioni a questo riguardo in Language tags in HTML and XML.

- - - -

Queso segna la fine del corso accelerato sull'elemento HTML head — ci sarebbe molto di più da dire, ma un corso completo sarebbe noioso e porterebbe confusione a questo stadio dell'apprendimento; volevamo solo darti un'idea delle cose che più comunemente vi ci troverai. Nel prossimo articolo vedremo i fondamenti dell'HTML per il testo.

- -

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}

diff --git a/files/it/learn/html/introduction_to_html/the_head_metadata_in_html/index.html b/files/it/learn/html/introduction_to_html/the_head_metadata_in_html/index.html new file mode 100644 index 0000000000..de092cd8b9 --- /dev/null +++ b/files/it/learn/html/introduction_to_html/the_head_metadata_in_html/index.html @@ -0,0 +1,265 @@ +--- +title: Cosa c'è nella head? Metadata in HTML +slug: Learn/HTML/Introduction_to_HTML/I_metadata_nella_head_in_HTML +tags: + - Guida + - HTML + - Principiante + - favicon + - head + - lang + - metadata +translation_of: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}
+ +

La {{glossary("Head", "head")}} di un documento HTML è la parte che non viene visualizzata nel browser quando la pagina viene caricata. Contiene informazioni come il {{htmlelement("title")}}, della pagina, i link ai {{glossary("CSS")}} (se vuoi applicare uno stile al contenuto tramite i CSS), i link alle favicons personalizzate, e altri metadata (dati relativi all'HTML, come chi lo ha scritto, o importanti parole chiave che descrivono il documento). In questo articolo vedremo tutto ciò e anche altro, per darti una buona base del markup e di altro codice che dovrebbe trovarsi nella head.

+ + + + + + + + + + + + +
Prerequisiti:Familiarità con le basi di HTML, spiegate in Cominciare con l'HTML.
Obbiettivi:Conoscere la head dell'HTML, qual è il suo scopo, i più importanti elementi che può contenere e quale effetto può avere sul documento HTML.
+ +

Cosa è la head?

+ +

Riprendiamo il semplice esempio di documento HTML che abbiamo visto nell'articolo precedente.

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>My test page</title>
+  </head>
+  <body>
+    <p>This is my page</p>
+  </body>
+</html>
+ +

La head HTML è il contenuto dell'elemento {{htmlelement("head")}} — diversamente dal contenuto dell'elemento {{htmlelement("body")}} (che è visualizzato quando la pagina viene caricata dal browser), il contenuto della head non viene visualizzato nella pagina. Invece, il compito della head è di contenere dei {{glossary("Metadata", "metadata")}} relativi al documento. Nell'esempio precedente, la head è piuttosto ridotta:

+ +
<head>
+  <meta charset="utf-8">
+  <title>My test page</title>
+</head>
+ +

In pagine più corpose tuttavia, la head può diventare piuttosto piena di elementi — prova ad andare in qualcuno dei tuoi siti favoriti e usando i developer tools esamina il contenuto della loro head. Il nostro scopo qui, non è di mostrarti l'uso di qualsiasi cosa sia possibile mettere nella head, ma piuttosto di insegnarti come usare le cose più ovvie da mettere nella head e fare in modo che tu abbia un po' di familiarità con quelle. Andiamo a cominciare.

+ +

Aggiungere un title

+ +

Abbiamo già visto l'elemento {{htmlelement("title")}} in azione — può essere usato per aggiungere un titolo ad un documento. Ciò può confondere conl'elemento {{htmlelement("h1")}} che è usato per aggiungere l'intestazione principale al contenuto del body — a cui ci si riferisce lo stesso come al titolo della pagina; ma sono due cose differenti!

+ + + +

Active learning: esaminare un sempice esempio.

+ +
    +
  1. Per avviare questo active learning, ci piacerebbe che andassi al nostro repositori Github e scaricassi una copia della nostra pagina title-example.html. Per farlo puoi usare uno dei due modi seguenti: + +
      +
    1. copiare ed incollare il codice della pagina in un nuovo file di testo creato col tuo editor e salvarlo in un posto adatto;
      2. +
    2. Premere il tasto "Raw" nella pagina, scegliere File > Save Page As... nel menù del browser e scegliere un posto in cui salvarlo.
      3. +
    +
    2. +
  2. Adesso apri il file nel browser. Dovresti vedere questo: +

    A simple web page with the title set to <title> element, and the <h1> set to <h1> element.Adesso dovrebbe essere chiaro dove appare il contenuto dell'elemento <h1> e dove appare il contenutodell'elemento <title>!

    +
    3. +
  3. Dovresti anche provare as aprire il codice nell'editor, modificare il contenuto di questi elementi, ricaricare la pagina nel browser. Adesso puoi divertiti un po'!
    4. +
+ +

Il contenuto dell'elemento <title> è anche usato in altri modi. Per esempio, se provi a salvare  la pagina nei preferiti (Bookmarks > Bookmark This Page, in Firefox), vedrai il contenuto del <title> come nome suggerito per il segnalibro.

+ +

A webpage being bookmarked in firefox; the bookmark name has been automatically filled in with the contents of the <title> element

+ +

Il <title> è usato anche nelle ricerche, come vedrai più avanti.

+ +

Metadata: l'elemento <meta>

+ +

I metadati sono dati che descrivono altri dati. In HTML c'è un modo "ufficiale" per aggiungere metadata al documento: l'elemento {{htmlelement("meta")}}. Inoltre, le altre cose di cui parliamo in questo articolo possono essere pensate anch'esse come metadata. Ci sono molti tipi di elementi <meta> che possono essere inseriti nella <head> del documento, ma non vogliamo cercare di parlare di tutti adesso, perché renderebbe tutto troppo complicato. Invece, spiegheremo poche cose che potrai vedere più spesso, solo per darti un'idea.

+ +

Specificare la codifica dei caratteri del documento

+ +

Nell'esempio che abbiamo visto, c'era questa riga:

+ +
<meta charset="utf-8">
+ +

Questo elemento specifica semplicemente la codifica dei caratteri del documento: il set di caratteri che il documento può usare.  utf-8 è un set di caratteri universale, che include pressoché ogni carattere di ogni linguaggio umano. Ciò significa che la tua pagina web potrà mostrare qualsiasi lingua; pertanto è una buona cosa usare questo set di caratteri per ogni pagina che crei! Per esempio, la tua pagina potrebbe tranquillamente gestire sia l'inglese che il giapponese:

+ +

a web page containing English and Japanese characters, with the character encoding set to universal, or utf-8. Both languages display fine,Se imposti il set di caratteri ISO-8859-1, per esempio (il set di caratteri per l'alfabeto latino), il rendering della pagina potrebbe essere scombinato:

+ +

a web page containing English and Japanese characters, with the character encoding set to latin. The Japanese characters don't display correctly

+ +

Active learning: esercitarsi con la codifica dei caratteri

+ +

Per questa prova, riprendi il modello di HTML che hai scaricato durante la precedente sezione riguardante l'elemento <title> (il title-example.html), prova a cambiare il set dei caratteri (il valore di charset) a ISO-8859-1 e aggiungi del giapponese alla pagina; questo è il codice che abbiamo usato:

+ +
<p>Japanese example: ご飯が熱い。</p>
+ +

Aggiungere l'autore e la descrizione

+ +

Molti elementi <meta> includono gli attributi name e content :

+ + + +

Due degli elementi meta che è utile inserire nella pagina definiscono l'autore della pagina e una concisa descrizione della stessa. Vediamo un esempio:

+ +
<meta name="author" content="Chris Mills">
+<meta name="description" content="The MDN Learning Area aims to provide
+complete beginners to the Web with all they need to know to get
+started with developing web sites and applications.">
+ +

Specificare un autore è utile per ricavare chi ha scritto la pagina: nel caso li si voglia contattare per chiarimenti riguardo al contenuto. Alcuni Content Management Systems (CMS) hanno dei meccanismi per estrarre automaticamente le informazioni sull'autore e renderle disponibili per questo scopo.

+ +

Specificare una descrizione che includa parole chiave relative al contenuto della pagina è utile perché può far apparire la pagina più avanti nei risultati delle ricerche fatte con i motori di ricerca (questo è un tema trattato in Search Engine Optimization, o {{glossary("SEO")}}.)

+ +

Active learning: L'uso della descrizione nei motori di ricerca

+ +

La descrizione è usata anche per la generazione delle pagine dei risultati della ricerca. Facciamo un esercizio per capire meglio.

+ +
    +
  1. Vai alla prima pagina di The Mozilla Developer Network.
    2. +
  2. Guarda il sorgente della pagina (Right/Ctrl + click sulla pagina, nel menù contestuale scegli View Page Source/Visualizza sorgente pagina).
    3. +
  3. Trova il meta tag description. Sarà così: + 
    <meta name="description" content="The Mozilla Developer Network (MDN) provides
+information about Open Web technologies including HTML, CSS, and APIs for both
+Web sites and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">
    +
    4. +
  4. Adesso cerca "Mozilla Developer Network" con il tuo motore di ricerca preferito (We used Yahoo.) Vedrai il contenuto dell'elemento <meta> description e il contenuto dell'elemento <title> usati nei risultati della ricerca. — Vale decisamente la pena averli! +

    A Yahoo search result for "Mozilla Developer Network"

    +
    5. +
+ +
+

Note: In Google, vedrai alcune altre pagine rilevanti del sito MDN elencate sotto il link alla homepage MDN — sono chiamati sitelinks e sono configurabili negli strumenti di Google per webmasters (Google's webmaster tools) — un modo per migliorare i risultati del tuo sito nelle ricerche fatte col motore di ricerca di Google.

+
+ +
+

Note: Molte proprietà <meta> non sono più usate. Per esempio, l'elemento <meta> keyword  — che si supponeva dover essere usato per fornire ai motori di ricerca termini per rendere la pagina rilevante per le ricerche di quei termini — è ignorato dai motori di ricerca perché gli spammers lo riempivano di centinaia di parole chiave, pregiudicando i risultati della ricerca.

+
+ +

Altri tipi di metadata

+ +

Setacciando il Web, troverai altri tipi di metadata. Molte delle proprietà che vedrai nei siti web sono creazioni proprietarie (coperte da Copyright), progettate per dotare alcuni siti (tipo i social network) di particolari informazioni che loro possono usare.

+ +

Per esempio, Open Graph Data è un insieme di metadata (un protocollo) che Facebook ha inventato per  avere dei metadata più ricchi per i siti web. Nel codice sorgente MDN troverai questo:

+ +
<meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png">
+<meta property="og:description" content="The Mozilla Developer Network (MDN) provides
+information about Open Web technologies including HTML, CSS, and APIs for both Web sites
+and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">
+<meta property="og:title" content="Mozilla Developer Network">
+ +

Un effetto è che quando crei un link a MDN su facebook, il collegamento appare accompagnato da una immagine e da una descrizione: è una esperienza più ricca per gli utenti.

+ +

Open graph protocol data from the MDN homepage as displayed on facebook, showing an image, title, and description.Anche Twitter ha i suoi metadati proprietari simili, che hanno un effetto simile quando l'indirizzo del sito è mostrato su twitter.com. Per esempio:

+ +
<meta name="twitter:title" content="Mozilla Developer Network">
+ +

Aggiungere icone personalizzate al tuo sito

+ +

Per arricchire ulteriormente il progetto del tuo sito, puoi aggiungere un riferimento a delle icone personalizzate nei tuoi metadata e queste saranno mostrate in alcuni contesti.

+ +

Le humble favicon, che hanno girato per molti molti anni, sono state le prime icone di questo tipo: icone 16 x 16 pixel usate in molti modi. Le favicon possono essere aggiunte alla pagina :

+ +
    +
  1. Salvandole nella stessa directory in cui è salvato il file index.html nel formato .ico (molti browser supportano le favicons in formati più comuni, come .gif or .png,  ma usando il formato .ico si è sicuri che funzionino anche con browser vecchi come Internet Explorer 6.)
    2. +
  2. Aggiungendo la seguente riga nella <head> del docuemnto HTML per creare un riferimento all'icona: + 
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    +
    3. +
+ +

I browser moderni usano le favicon in molti posti, come nella scheda in cui la pagina è aperta o nel pannello dei segnalibri quando la pagina è salvata tra i preferiti.

+ +

The Firefox bookmarks panel, showing a bookmarked example with a favicon displayed next to it.

+ +

Ci sono molti altri tipi di icone da prendere in considerazione attualmente. Per esempio, nel codice della homepage MDN troverai questo:

+ +
<!-- third-generation iPad with high-resolution Retina display: -->
+<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png">
+<!-- iPhone with high-resolution Retina display: -->
+<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.cdn.mozilla.net/static/img/favicon114.0e9fabd44f85.png">
+<!-- first- and second-generation iPad: -->
+<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.cdn.mozilla.net/static/img/favicon72.8ff9d87c82a0.png">
+<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
+<link rel="apple-touch-icon-precomposed" href="https://developer.cdn.mozilla.net/static/img/favicon57.a2490b9a2d76.png">
+<!-- basic favicon -->
+<link rel="shortcut icon" href="https://developer.cdn.mozilla.net/static/img/favicon32.e02854fdcf73.png">
+ +

I commenti spiegano per cosa è usata ciascuna icona — questi elementisoddisfano esigenze quali, ad esempio, fornire una piacevole icona ad alta risoluzione quando il sito è salvato nello schermo di un iPad.

+ +

Non preoccuparti troppo di aggiungere tutti questi tipi di icone al momento — sono caratteristiche piuttosto avanzate e non ci si aspetta che tu conosca queste cose per progredire nel corso. Lo scopo principale, qui, è farti sapere cosa sono queste cose nel caso le incontri mentre navighi il codice sorgente di altri siti web.

+ +

Applicare CSS e JavaScript all'HTML

+ +

Pressoché tutti i siti web, oggi, impiegano i {{glossary("CSS")}} per apparire fantastici e i  {{glossary("JavaScript")}} per potenziare l'interattività, i video players, le mappe, i giochi e altro. CSS e JavaScript sono generalmente applicati alle pagine web usando l'elemento {{htmlelement("link")}} e l'elemento {{htmlelement("script")}} rispettivamente.

+ + + +

Active learning: applicare CSS e JavaScript ad una pagina

+ +
    +
  1. Per iniziare questo apprendimento attivo, preleva una copia del nostro meta-example.html, dello script.js e del file style.css , e salvali nel tuo computer nella stessa directory. Assicurati che siano salvati con i nomi e le estensioni dei nomi corrette.
    2. +
  2. Apri il file HTML sia nel browser che nel tuo editor di testo
    3. +
  3. Seguendo le informazioni date precedentemente, aggiungi gli elementi {{htmlelement("link")}} e {{htmlelement("script")}} al tuo HTML così che il CSS e il JavaScript gli siano applicati.
    4. +
+ +

Se fatto correttamente, quando salvi l' HTML e ricarichi la pagina del browser, vedrai cambiare le cose (la lista non ci sarà, perché la dovete fare voi; il testo dice: "Qui sotto c'è una lista dinamica. Clicca ovunque fuori dalla lista per aggiungerle un nuovo punto. Clicca un punto della lista per cambiare il suo testo in qualcos'altro").

+ +

Example showing a page with CSS and JavaScript applied to it. The CSS has made the page go green, whereas the JavaScript has added a dynamic list to the page.

+ + + +
+

Note: se sei bloccato e non riesci ad applicare i CSS/JS , prova ad esaminare la pagina d'esempio css-and-js.html.

+
+ +

Impostare la lingua principale del documento

+ +

In fine. vale la pena dire che si può (e lo si dovrebbe proprio fare) impostare la lingua della pagina. Può essere fatto aggiungendo l'attributo lang al tag HTML di apertura (come visto nel meta-example.html.)

+ +
<html lang="en-US">
+ +

Ciò si rivela utile in molti modi. Il tuo documento sarà indicizzato meglio dai motori di ricerca (permettendoti di apparire correttamente nelle ricerche per linguaggi specifici) ed è utile agli utenti con disabilità visive che usano degli screen readers (per esempio, la parola "six" esiste sia in francese che in inglese, ma è pronunciata diversamente.)

+ +

Puoi anche impostare sottosezioni del documento perché vengano riconosciute come scritte in altre lingue; possiamo impostare la lingua giapponese per il nostro esempio in questo modo:

+ +
<p>Japanese example: <span lang="jp">ご飯が熱い。</span>.</p>
+ +

Questi codici sono definiti dalla ISO 639-1. Puoi trovare più informazioni a questo riguardo in Language tags in HTML and XML.

+ + + +

Queso segna la fine del corso accelerato sull'elemento HTML head — ci sarebbe molto di più da dire, ma un corso completo sarebbe noioso e porterebbe confusione a questo stadio dell'apprendimento; volevamo solo darti un'idea delle cose che più comunemente vi ci troverai. Nel prossimo articolo vedremo i fondamenti dell'HTML per il testo.

+ +

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}

diff --git a/files/it/learn/html/multimedia_and_embedding/contenuti_video_e_audio/index.html b/files/it/learn/html/multimedia_and_embedding/contenuti_video_e_audio/index.html deleted file mode 100644 index 3c15046cd4..0000000000 --- a/files/it/learn/html/multimedia_and_embedding/contenuti_video_e_audio/index.html +++ /dev/null @@ -1,270 +0,0 @@ ---- -title: Contenuti video e audio -slug: Learn/HTML/Multimedia_and_embedding/contenuti_video_e_audio -translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}
- -

Adesso che siamo pratici con l'aggiunta di immagini, il passo successivo è cominciare ad aggiungere lettori video e audio ai documenti HTML. In questo articolo vedremo come farlo, con gli elementi {{htmlelement("video")}} e {{htmlelement("audio")}}; finiremo dando uno sguardo a come si aggiungono i sottotitoli ai video.

- - - - - - - - - - - - -
Prerequisiti:Competenze base sui computer, software di base installato, conoscenze base di gestione dei file (working with files), familiarità coi fondamenti di HTML (come trattati in Cominciare con l'HTML) e con Immagini in HTML.
Obbiettivi:Imparare ad inserire contenuti video e audio nelle webpage e aggiungere i sottotitoli ai video.
- -

Audio e video nel web

- -

Gli sviluppatori Web han voluto usare video e audio per lungo tempo, fin dai primi anni del terzo millennio, quando abbiamo cominciato ad avere la banda larga, veloce abbastanza da supportare ogni tipo di video (i file video sono molto più grandi dei file testo o immagine). Nei primi tempi, le tecnologie nate per il web, come l'HTML, non avevano la capacità di integrare video e audio nel web, così, per poterlo fare, sono diventate popolari delle tecnologie proprietarie (e i plugin basati su di esse), come Flash (e più tardi Silverlight). Questo tipo di tecnologie funziona bene, ma ha numerosi problemi, tra cui: non essere ben integrate con HTML/CSS, problemi di sicurezza e di accessibilità.

- -

Una soluzione nativa, sviluppata apposta, avrebbe risolto molti di questi problemi. Fortunatamente, pochi anni dopo, la specifica {{glossary("HTML5")}} aveva queste caratteristiche, conferite dall'aggiunta degli elementi {{htmlelement("video")}} e {{htmlelement("audio")}} e di alcune brillanti nuove {{Glossary("JavaScript")}} {{Glossary("API","APIs")}} per il loro controllo. Non vedremo JavaScript qui — vedremo solo le fondamenta che possono essere ottenute con l'HTML.

- -

Non ti insegneremo a produrre file audio e video, cosa per la quale sono richieste competenze totalmente diverse. Ti forniremo campioni audio, video e esempi di codice per i tuoi esperimenti, nel caso che tu non possa ottenerli per tuo conto.

- -
-

Nota: Prima di cominciare, dovresti anche sapere che ci sono abbastanza pochi {{glossary("OVP","OVPs")}} (online video providers - fornitori di video online) come YouTube, Dailymotion, e Vimeo, e fornitori di audio online, come Soundcloud. Queste compagnie offrono un modo comodo e facile per pubblicare e fruire di video, così che tu non ti debba preoccupare dell'enorme consumo di banda. Queste compagnie OVP, in genere, offrono anche il codice da usare per integrare video/audio nelle tue pagine web. Se segui questa strada puoi evitare alcune delle difficoltà di cui discutiamo in questo articolo. Vedremo un po meglio questo tipo di servizi nel prossimo articolo.

-
- -

L'elemento <video>

- -

L'elemento {{htmlelement("video")}} permette di aggiungere un video in modo molto semplice. Un esempio può essere questo:

- -
<video src="rabbit320.webm" controls>
-  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.webm">link to the video</a> instead.</p>
-</video>
- -

Le caratteristiche sono:

- -
-
{{htmlattrxref("src","video")}}
-
Come per l'elemento {{htmlelement("img")}}, l'attributo src contiene il percorso al video che vuoi integrare nella pagina; funziona esattamente nello stesso modo.
-
{{htmlattrxref("controls","video")}}
-
Gli utenti devono poter controllare il riavvolgimento e la ripetizione del video o dell'audio (è particolarmente importante per i malati di epilessia). Si può usare sia l'attributo controls per aggiungere l'interfaccia di controllo propria del browser, sia costruire la propria interfaccia usando le appropriate API JavaScript. Come minimo, l'interfaccia deve offrire la possibilità di avviare e fermare il media e di regolare il volume.
-
Il paragrafo tra i tag <video>
-
Questo paragrafo è chiamato fallback content (contenuto di ripiego) — sarà mostrato se il browser che accede alla pagina non supporta l'elemento <video>, offrendo un'alternativa per i vecchi browser. Può essere qualunque cosa vogliate; si può ad esempio fornire un collegamento diretto al file video, così che l'utente possa accedervi in qualche modo, indipendentemente dal browser che usa.
-
- -

Il video integrato apparirà più o meno così:

- -

A simple video player showing a video of a small white rabbit

- -

Puoi provare l'esempio qui: try the example (vedi anche il codice sorgente).

- -

Supportare molti formati

- -

C'è un problema con l'esempio qui sopra, che potresti aver già notato se hai provato ad accedere il live link con un browser come Safari o Internet Explorer. Il video non parte! Ciò è dovuto al fatto che i browser supportano formati video (e audio) diversi.

- -

Passiamo rapidamente in rassegna la terminologia. Formati come MP3, MP4 e WebM sono chiamati container formats (formati container). Contengono diverse parti che costituiscono l'intera canzone o video — come un'unica traccia audio (o un unica traccia video nel caso dei video) e i metadati per descrivere il media (mezzo espressivo) che viene presentato.

- -

Anche le tracce audio e video hanno diversi formati, per esempio:

- - - -

Un player audio tenderà a riprodurre una traccia audio direttamente, ad es. un MP3 o un file Ogg; queste non necessitano di contenitori.

- -
-

Nota: non è così semplice, come puoi vedere nella nostra tabella audio-video codec compatibility table. Inoltre, molti browser dei portatili possono riprodurre un formato non supportato passandone la gestione al media player del sistema perché lo riproduca. Ma per ora ce n'è già abbastanza.

-
- -

I formati precedenti esistono per comprimere i video e gli audio in file maneggiabili (i video e gli audio originali sono molto pesanti). I browser contengono differenti {{Glossary("Codec","Codecs")}}, come Vorbis o H.264, che sono usati per covertire i video e gli audio compressi in file binari e viceversa. Come già detto, sfortunatamente, non tutti i borwser supportano gli stessi codecs, così si dovranno fornire molti file, per ogni riproduttore di media. Se manca il giusto codec per decodificare il media, questo non si avvierà.

- -
-

Nota: ti potresti chiedere il perché di questa situazione. I formati MP3 (for audio) and MP4/H.264 (for video) sono entrambi ampiamente supportati e di buona qualità. Tuttavia, sono anche ricoperti da brevetto — Il brevetto americano copre MP3 fino almeno al 2017, e H.264 fino al 2027 come minimo; ciò significa che i browser che non detengono il brevetto devono pagare parecchio per poter supportare questi formati. Inoltre, molte persone evitano per principio i software con delle restrizioni, in favore dei formati aperti.

-
- -

Quindi, come facciamo ad offrire diversi formati? Dai uno sguardo al seguente updated example (try it live here, also):

- -
<video controls>
-  <source src="rabbit320.mp4" type="video/mp4">
-  <source src="rabbit320.webm" type="video/webm">
-  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
-</video>
- -

Qui abbiamo tirato fuori l'attributo src dal tag <video> e abbiamo invece incluso elementi {{htmlelement("source")}} che puntano ciascuno a una risorsa. In questo caso il browser cercherà tra gli elementi <source> e riprodurrà il primo per il quale ha il codec. Includere i formati WebM e MP4 dovrebbe essere sufficiente a riprodurre il tuo video sulla maggioranza delle piattaforme e dei browser di oggi.

- -

Ogni elemento <source> ha un attributo type; è opzionale, ma è consigliato metterlo — contiene i {{glossary("MIME type","MIME types")}} dei file video e i browser possono leggerli e scartare immediatamente i formati che non capiscono. Se non viene messo, i browser dovranno caricare i file e provare a riprodurli fino a che ne troveranno uno che funziona, usando molto più tempo e risorse.

- -
-

Nota: il nostro articolo sui formati media supportati contiene alcuni comuni {{glossary("MIME type","MIME types")}}.

-
- -

Altre caratteristiche dell'elemento <video>

- -

Ci sono numerose altre funzionalità che possono essere incluse in un video HTML5. Dai un occhiata al nostro terzo esempio:

- -
<video controls width="400" height="400"
-       autoplay loop muted
-       poster="poster.png">
-  <source src="rabbit320.mp4" type="video/mp4">
-  <source src="rabbit320.webm" type="video/webm">
-  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
-</video>
-
- -

Questo ci darà un output simile a questo:

- -

A video player showing a poster image before it plays. The poster image says HTML5 video example, OMG hell yeah!Le nuove funzionalità sono:

- -
-
{{htmlattrxref("width","video")}} e {{htmlattrxref("height","video")}}
-
Puoi controllare la dimensione del video sia con questi attributi che con i {{Glossary("CSS")}}. In entrambi i casi i video mantengono il loro rapporto larghezza-altezza nativo, conosciuto come aspect ratio. Se il rapporto d'aspetto non è mantenuto dalle dimensioni impostate da te, il video sarà ridimensionato fino alla dimensione orizzontale e lo spazio non occupato verticalmente verrà riempito, di default, con uno sfondo colorato.
-
{{htmlattrxref("autoplay","video")}}
-
Questo attributo fa partire l'audio o il video immediatamente, durante il caricamento della pagina. Ti suggeriamo di non usare l'autoplay nel tuo sito, perché gli utenti possono trovarlo molto fastidioso.
-
{{htmlattrxref("loop","video")}}
-
Questo attributo fa ricominciare il video (o l'audio) nuovamente, ogni volta che finisce. Anche questo può essere fastidioso, quindi usalo solo se necessario.
-
{{htmlattrxref("muted","video")}}
-
Questo attributo fa si che il video parta con l'audio disattivato per default.
-
{{htmlattrxref("poster","video")}}
-
Questo attributo ha per valore l'URL di una immagine che sarà mostrata prima dell'avvio del video. Si suppone sia usata come schermata di lancio, promozionale.
-
- -

Puoi trovare gli esempi sopra su play live on Github (also see the source code). Nota che non abbiamo incluso l'attributo autoplay nella versione live — se il video parte appena la pagina viene caricata, non potrai vedere il poster!

- -

L'elemento <audio>

- -

L'elemento {{htmlelement("audio")}} funziona esattamente come l'elemento {{htmlelement("video")}}, con poche minime differenze illustrate qui sotto. Un esempio tipico potrebbe apparire così:

- -
<audio controls>
-  <source src="viper.mp3" type="audio/mp3">
-  <source src="viper.ogg" type="audio/ogg">
-  <p>Your browser doesn't support HTML5 audio. Here is a <a href="viper.mp3">link to the audio</a> instead.</p>
-</audio>
- -

Ciò produce qualcosa del genere, in un browser:

- -

A simple audio player with a play button, timer, volume control, and progress bar

- -
-

Nota: Puoi riprodurre the audio demo live on Github (also see the audio player source code.)

-
- -

Questo occupa meno spazio di un player video, perché non c'è la componente visiva — devi solo visualizzare i controlli per l'audio. Altre differenze dall'HTML5 video sono queste:

- - - -

A parte ciò,  <audio> supporta tutte le caratteristiche di <video> — puoi vedere la precedente sezione per avere informazioni a riguardo, se non l'hai ancora vista.

- -

Mostrare le traccie testuali (sottotitoli) dei video

- -

Adesso discuteremo un concetto leggermente più avanzato, che è molto utile conoscere. Molta gente non può o non vuole ascoltare il contenuto audio del web, almeno certe volte. Per esempio:

- - - -

Non sarebbe bello poter fornire a queste persone una trascrizione del testo enunciato nel video/audio? Bene, grazie all'HTML5 si può; con il formato WebVTT e l'elemento {{htmlelement("track")}}.

- -
-

Nota: "Transcribe (trascrivere)" e "transcript (trascrizione)" significa creare un testo scritto che riproduce le parole come sono pronunciate.

-
- -

WebVTT è un formato  per scrivere file di testo contenenti molteplici stringhe di testo insieme a metadati come il tempo a cui vuoi che ogni stringa sia mostrata e limitate informazioni relative allo stile e alla opsizione. Queste stringhe di testo sono chiamate cues (battute), e se ne possono visualizzare diversi tipi che hanno scopi diversi; le più comuni sono:

- -
-
subtitles
-
Traduzioni di materiale straniero, per chi non capisce la lingua
-
captions
-
trascrizioni sincronizzate di dialoghi o descrizioni di suoni significativi, per permettere a chi non può sentire l'audio di capire cosa sta succedendo.
-
timed descriptions
-
testo che deve essere convertito in audio, per essere disponibile a chi ha disabilità visive.
-
- -

Un tipico file WebVTT appare così:

- -
WEBVTT
-
-1
-00:00:22.230 --> 00:00:24.606
-This is the first subtitle.
-
-2
-00:00:30.739 --> 00:00:34.074
-This is the second.
-
-  ...
-
- -

Per visualizzarlo insieme al riproduttore di media HTML, devi:

- -
    -
  1. salvarlo come file .vtt in un posto adatto
    2. -
  2. collegare il file .vttcon l'elemento {{htmlelement("track")}}. Questo elemento <track> deve essere annidato dentro <audio> o <video>, ma dopo tutti gli elementi <source>. Usa l'attributo {{htmlattrxref("kind","track")}} per specificare se le battute sono subtitles, captions, o descriptions. Inoltre, usa l'attributo {{htmlattrxref("srclang","track")}} per dire al browser in quale lingua sono scritti i sottotitoli.
    3. -
- -

Ecco un esempio:

- -
<video controls>
-    <source src="example.mp4" type="video/mp4">
-    <source src="example.webm" type="video/webm">
-    <track kind="subtitles" src="subtitles_en.vtt" srclang="en">
-</video>
- -

Ciò produrrà un video coi sottotitoli visualizzati più o meno così:

- -

Video player with stand controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."

- -

Per avere più dettagli, leggi Adding captions and subtitles to HTML5 video. Puoi trovare l'esempio sviluppato in questo articolo qui: find the example, su Github, scritto da Ian Devlin (guarda anche il codice sorgente). Questo esempio usa alcuni JavaScript per permettere agli utenti di scegliere tra differenti sottotitoli. Nota che per attivare i sottotitoli, devi premere il bottone "CC" e selezionare un'opzione — English, Deutch, o Español. 

- -
-

Nota: le "Text tracks" ti aiutano anche con la {{glossary("SEO")}}, perché i motori di ricerca brillano particolarmente coi testi.  I sottotitoli (Text tracks/traccie di testo) permettono ai motori di ricerca, persino di linkare direttamente una certa parte del video.

-
- -

Active learning: Includere un proprio audio o video

- -

Per questo apprendimento attivo, ci piacerebbe che tu andassi fuori a registrare alcuni video tuoi — molti telefoni, oggi, consentono di registrare audio e video molto facilmente e se riesci a trasferirli sul tuo computer, li puoi usare. Potresti dover fare alcune conversioni per ottenere i formati WebM o MP4, per i video, oppure MP3 o Ogg, per l'audio, ma ci sono molti programmi che permettono di farlo senza problemi, come Miro Video Converter e Audacity. Ci piacerebbe che facessi un tentativo!

- -

Se non sai generare acun video o audio, allora puoi usare i nostri campioni di file video e audio per portare a termine l'esercizio. Puoi anche usare i campioni di codice come riferimento.

- -

Ci piacerebbe che:

- -
    -
  1. salvassi i tuoi file audio e video in una nuova directory sul tuo computer,
    2. -
  2. creassi un nuovo file index.html nella stessa directory,
    3. -
  3. aggiungessi gli elementi <audio> e <video> alla pagina facendogli mostrare i controlli di default del browser,
    4. -
  4. dessi a entrambi degli elementi <source> così che il browser trovi il formato che supportano meglio e lo caricassero; ciò include l'uso dell'attributo type,
    5. -
  5. dessi all'elemento <video> un poster da visualizzare prima che il video venga avviato. Divertiti a creare il tuo personale poster disegnato.
    6. -
- -

Per raggiungere dei bonus, puoi provare a cercare text tracks (sottotitoli) e studiare come aggiungere qualche trascrizione al tuo video.

- -

Conclusioni

- -

Questo è quanto. Speriamo tu ti sia divertito/a a giocare con contenuti video e audio! Nel prossimo articolo vedremo altri modi per inserire contenuti nelle pagine web, usando tecnologie come gli {{htmlelement("iframe")}} e gli {{htmlelement("object")}}.

- -

Vedi anche

- - - -

{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}

- -
-
- - diff --git a/files/it/learn/html/multimedia_and_embedding/immagini_reattive/index.html b/files/it/learn/html/multimedia_and_embedding/immagini_reattive/index.html deleted file mode 100644 index cc3dbd7892..0000000000 --- a/files/it/learn/html/multimedia_and_embedding/immagini_reattive/index.html +++ /dev/null @@ -1,241 +0,0 @@ ---- -title: Immagini reattive -slug: Learn/HTML/Multimedia_and_embedding/immagini_reattive -translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page", "Learn/HTML/Multimedia_and_embedding")}}
- -
-

In questo articolo impareremo il concetto di "immagini reattive" (responsive images) — immagini che funzionano correttamente su dispositivi con monitor di dimensioni e risoluzioni  anche molto diverse — e vedremo quali strumenti l'HTML ci mette a disposizione per implementarle. Le immagini reattive sono solo una parte della progettazione di un web reattivo (responsive web design), e pongono delle buone basi per un argomento del quale si imparerà molto di più in un modulo seguente sui CSS.

-
- - - - - - - - - - - - -
Prerequisiti:Dovresti già conoscere basics of HTML e come aggiungere immagini a una pagina web.
Obiettivi:Imparare ad usare caratteristiche quali l'attributo {{htmlattrxref("srcset", "img")}} e l'elemento {{htmlelement("picture")}} per aggiungere immagini reattive ai siti web, usando diverse soluzioni.
- -

Perché le immagini reattive?

- -

Quale problema stiamo cercando di risolvere con le immagini reattive? Esaminiamo uno scenario tipico. Un sito web, probabilmente, avrà una immagine di testa (header image) per piacere ai visitatori, più, forse, altre immagini più giù nel contenuto. Probabilmente si vorrà che l'immagine di testa occupi l'intera larghezza della pagina e che le immagini nel contenuto riempiano le colonne. Vediamo un esempio:

- -

Our example site as viewed on a wide screen - here the first image works ok, as it is big enough to see the detail in the center.

- -

Ciò funziona bene su un dispositivo con uno schermo ampio, come un laptop o un desktop (you can see the example live and find the source code on Github). Non discuteremo molto dei CSS, salvo che per dire questo:

- - - -

Così va bene, ma il problema arriva quando cominci a vedere il sito su un dispositivo con uno schermo stretto — l'immagine di testata si vede bene, ma inizia a prendere gran parte dell'altezza dello schermo per un dispositivo portatile; d'altra parte la prima immagine del contenuto si vede malissimo - a questa dimensione si possono appena vedere le persone.

- -

Our example site as viewed on a narrow screen; the first image has shrunk to the point where it is hard to make out the detail on it.

- -

Quando il sito è visualizzato su uno schermo stretto, sarebbe molto meglio mostrare una versione ritagliata dell'immagine che contenga i dettagli importanti dello scatto e magari una via di mezzo tra le due foto quando lo schermo è di media dimensione, come per i tablet. - Questa situazione è nota come art direction problem.

- -

Inoltre, non c'è bisogno di includere immagini così grandi se la pagina vien vista sui piccoli schermi dei portatili. - Questa è nota come resolution switching problem. Una immagine raster è definita da un certo numero di pixel di larghezza e da un certo numero in altezza; come abbiamo visto parlando di vector graphics, una immagine raster inizia a sgranarsi e a sfocarsi se è mostrata più grande della sua dimensione originale (ciò non accade per le immagini vettoriali), mentre se la visualizziamo più piccola stiamo sprecando banda per far scaricare un file immagine più pesante del necessario - specialmente gli utenti di dispositivi portatili non vogliono che questo accada dal momento che una piccola immagine farebbe a caso loro. Una soluzione ideale la si avrebbe se si avessero diverse immagini, con diverse dimensioni e risoluzioni, da caricare sui diversi dispositivi.

- -

A rendere le cose ancora più complicate, hanno schermi ad alta risoluzione che necessitano di immagini più grandi di quello che ci si potrebbe aspettare per apparire al meglio. Questo problema è essenzialmente analogo, ma in un contesto leggermente diverso.

- -

Si potrebbe pensare che le immagini vettoriali possano risolvere questi problemi e in certa misura lo fanno: sono leggere, vengono scalate (ingrandite in scala) bene e dove possibile le si dovrebbe usare. Tuttavia non sono adatte a qualsiasi tipo di immagine: mentre sono ottime per grafiche semplici, cominciano a diventare molto complesse per creare immagini con il livello di dettaglio che si vorrebbe per una foto. Le immagini raster dei formati come ad es. JPEG sono più adatte ai tipi di immagini che abbiamo visto negli esempi precedenti.

- -

Questo tipo di problemi non esisteva quando il web era agli esordi, nei primi anni 90: allora, gli unici dispositivi esistenti per navigare il web erano i desktop e i laptop, così i progettisti di browser e gli scrittori non dovevano pensare alle soluzioni. Le tecnologie per le immagini reattive (Responsive image technologies) sono state aggiunte di recente per risolvere i problemi accennati sopra, permettendoti di fornire al browser diversi file immagine, che contengono le stesse immagini ma ad una risoluzione diversa, con diverso numero di pixel (resolution switching), o immagini diverse adatte a spazi di allocazione di dimensione diversa (art direction.)

- -
-

Nota: Le nuove caratteristiche trattate in questo articolo — {{htmlattrxref("srcset", "img")}}/{{htmlattrxref("sizes", "img")}}/{{htmlelement("picture")}} — sono tutte supportate nelle versioni più aggiornate dei browser per desktop e per dispositivi mobili (incluso il browser Microsoft Edge, non da Internet Explorer.) 

-
- -

Come creare immagini reattive?

- -

In questa sezione, esamineremo i 2 problemi illustrati e mostreremo come risolverli usando le caratteristiche dell'HTML per le immagini reattive. Dovreste notare che ci concentreremo sull'elemento {{htmlelement("img")}} come trattato nell'esempio precedente — l'immagine nella header è solo decorativa e perciò è aggiunta usando i CSS. I CSS hanno probabilmente migliori strumenti per il responsive design dell'HTML; ne parleremo in un successivo modulo sui CSS.

- -

Cambiare risoluzione: dimensioni differenti

- -

Qual è il problema che vogliamo risolvere cambiando la risoluzione? Vogliamo mostrare una immagine identica, ma più grande o più piccola in funzione del dispositivo — è la situazione che abbiamo con la seconda immagine del nostro esempio. L'elemento standard {{htmlelement("img")}} tradizionalmente, permette solo di puntare a un singolo file sorgente.

- -
<img src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">
- -

Tuttavia, possiamo usare 2 nuovi attributi — {{htmlattrxref("srcset", "img")}} e {{htmlattrxref("sizes", "img")}} — per fornire molte sorgenti di immagine addizionali insieme a dei suggerimenti per aiutare il browser a prelevare quella giusta. Si può vedere un esempio nel nostro reponsive.html su Github (vedere anche il codice sorgente):

- -
<img srcset="elva-fairy-320w.jpg 320w,
-             elva-fairy-480w.jpg 480w,
-             elva-fairy-800w.jpg 800w"
-     sizes="(max-width: 320px) 280px,
-            (max-width: 480px) 440px,
-            800px"
-     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">
- -

Gli attributi srcset e sizes sembrano complicati da capire, ma non lo sono poi tanto se li si formatta come mostrato qui sopra: con una parte del valore dell'attributo per riga. Ogni valore contiene una lista  separata da virgole e ogni parte della lista è fatta di 3 sottoparti. Esaminiamo il contenuto di ognuna:

- -

srcset definisce il set di immagini tra le quali vogliamo che il browser scelga e quali dimensioni hanno. Prima di ogni virgola, scriviamo:

- -
    -
  1. un nome di file immagine (elva-fairy-480w.jpg.)
    2. -
  2. uno spazio
    3. -
  3. la dimensione della larghezza dell'immagine in pixels (480w) — notate l'uso dell'unità w e non px come ci si potrebbe aspettare. Si tratta della reale dimensione dell'immagine, che si può trovare esaminando il file immagine sul computer (per esempio in un Mac si può selezionare l'immagine in  Finder, e premere Cmd + I per aprire la scheramta di informazioni).
    4. -
- -

sizes definisce un set di condizioni (ad es. la larghezza dello schermo) e indica quale dimensione di immagine sarebbe meglio scegliere quando si verificano quelle condizioni — questi sono i suggerimenti di cui si parlava prima. In questo caso, prima di ogni virgola scriviamo:

- -
    -
  1. una media condition ((max-width:480px)) — imparerete di più a questo riguardo nella sezione sui CSS, ma per adesso diciamo solo che la "media condition" descrive un possibile stato dello schermo. In questo caso, si stà dicendo: "quando la larghezza visualizzata è 480 pixels o meno".
    2. -
  2. uno spazio
    3. -
  3. La larghezza della posizione che l'immagine occuperà quando si realizza la condizione (440px.)
    4. -
- -
-

Nota: Per la larghezza della posizione, si può fornire una misura assoluta (px, em) o una relativa (come una percentuale). Potreste aver notato che l'ultima larghezza non ha media condition — questa è perciò la condizione di default che deve essere scelta quando nessuna delle condizioni sui dispositivi è vera. Il browser ignora tutto ciò che segue la prima condizione verificata, perciò bisogna fare attenzione all'ordine delle condizioni.

-
- -

Quindi, definiti questi attributi, il browser farà:

- -
    -
  1. verifica della larghezza del suo dispositivo
    2. -
  2. calcolo di quale sia la prima condizione tra la lista dell'atributo sizes ad essere vera
    3. -
  3. Look at the slot size given to that media query.
    4. -
  4. Caricamento dell'immagine elencata nell'attributo srcset che maggiormente si avvicina alla dimensione della posizione (slot) scelta.
    5. -
- -

Fatto! Così a questo punto, se un browser col supporto con una larghezza della viewport di 480px carica la pagina, la (max-width: 480px) media condition sarà vera, perciò verrà scelta la slot da 440px, quindi sarà caricata la elva-fairy-480w.jpg, poiché la sua larghezza (480w) è la più vicina ai 440px. L'immagine da 800px occupa 128KB su disco, mentre la versione da 480px solo 63KB — un risparmio di 65KB. Adesso immagina se fosse una pagina con molte immagini. Usando questa tecnica si può far risparmiare agli utenti mobile un sacco di  ampiezza di banda.

- -

I browser più vecchi che non supportano queste caratteristiche, semplicemente le ignoreranno e andranno avanti a caricare l'immagine indicata dall'attributo {{htmlattrxref("src", "img")}} come al solito.

- -
-

Note: nell'elemento {{htmlelement("head")}} del documento si troverà la linea <meta name="viewport" content="width=device-width">: questo obbliga i browser dei dispositivi mobili ad adottare la loro reale larghezza viewport per caricare le pagine web (alcuni browser mentono riguardo alla larghezza e caricano invece pagine a una risoluzione maggiore e poi la riducono, che non è molto utile con una progettazione o una immagine reattiva. Spiegheremo di più a questo proposito in un modulo successivo).

-
- -

Utili strumenti di sviluppo

- -

Ci sono alcuni utili developer tools nei browser, per aiutare a calcolare le necessarie larghezze slot, ecc. che si ha bisogno di usare. Mentre le stavo calcolando, prima di tutto ho caricato la versione non reattiva dell'esempio (not-responsive.html), poi sono andato in Responsive Design View (Tools > Web Developer > Responsive Design View - In Firefox, dal sandwich menù -> Sviluppo -> Modalità visualizzazione flessibile), che ti permette di guardare il layout della tua pagina come se fosse visto attraverso dispositivi con diversa dimensione dello schermo.

- -

Ho impostato la larghezza viewport a 320px e poi a 480px; per ciascuna sono andato nel DOM Inspector, ho cliccato sull'elemento {{htmlelement("img")}} a cui ero interessato e ho guardato la dimensione nella scheda vista Box Model sulla destra del monitor. Questo dovrebbe dare la larghezza dell'immagine di cui si ha bisogno.

- -

A screenshot of the firefox devtools with an image element highlighted in the dom, showing its dimensions as 440 by 293 pixels.

- -

Dopo, si può controllare se srcset sta funzionando impostando la larghezza viewport come si desidera (impostatela stretta, per esempio), aprendo il Network Inspector (Tools > Web Developer > Network), poi ricaricando la pagina. Questo dovrebbe dare una lista di risorse che sono state scaricate per per mostrare la pagina e quindi si potrà verificare quale file è stato scelto e scaricato.

- -

a screenshot of the network inspector in firefox devtools, showing that the HTML for the page has been downloaded, along with three images, which include the two 800 wide versions of the responsive images

- -

Modificare la risoluzione: stessa dimensione, diverse risoluzioni

- -

Se stai supportando diverse risoluzioni, ma tutti vedono la tua immagine alla stessa dimensione reale sullo schermo, puoi permettere al browser di scegliere una immagine di risoluzione appropriata usando l'attributo srcset con il descrittore x (x-descriptors) e senza sizes — una sintassi piuttosto semplice! Puoi trovare un esempio di come appare in srcset-resolutions.html (vedere anche il codice sorgente):

- -
<img srcset="elva-fairy-320w.jpg,
-             elva-fairy-480w.jpg 1.5x,
-             elva-fairy-640w.jpg 2x"
-     src="elva-fairy-640w.jpg" alt="Elva dressed as a fairy">
-
- -

A picture of a little girl dressed up as a fairy, with an old camera film effect applied to the imageIn questo esempio è stato applicato il seguente CSS all'immagine per farle avere una larghezza di 320 pixels sullo schermo (also called CSS pixels):

- -
img {
-  width: 320px;
-}
- -

In questo caso sizes non è necessario — il browser calcola qual è la risoluzione del display su cui è mostrato e fornisce l'immagine più appropriata tra quelle elencate in srcset. Così se il dispositivo che accede alla pagina ha un display standard a bassa risoluzione, with one device pixel representing each CSS pixel, viene caricata l'immagine elva-fairy-320w.jpg (il descrittore 1x è implicito e non c'è bisogno di specificarlo.) Se il dispositivo ha una alta risoluzione di 2 pixel per ogni pixel CSS o più, viene caricata l'immagine elva-fairy-640w.jpg. L'immagine a 640px è di 93KB, mentre quella a 320px è di soli 39KB.

- -

Art direction

- -

To recap, the art direction problem involves wanting to change the image displayed to suit different image display sizes. For example, if a large landscape shot with a person in the middle is shown on a website when viewed on a desktop browser, then shrunk down when the website is viewed on a mobile browser, it will look bad as the person will be really tiny and hard to see. It would probably be better to show a smaller, portrait image on mobile, which shows the person zoomed in. The {{htmlelement("picture")}} element allows us to implement just this kind of solution.

- -

Returning to our original not-responsive.html example, we have an image that badly needs art direction:

- -
<img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
- -

Let's fix this, with {{htmlelement("picture")}}! Like <video> and <audio>, The <picture> element is a wrapper containing several {{htmlelement("source")}} elements that provide several different sources for the browser to choose between, followed by the all-important {{htmlelement("img")}} element. the code in responsive.html looks like so:

- -
<picture>
-  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
-  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
-  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
-</picture>
-
- - - -

This code allows us to display a suitable image on both wide screen and narrow screen displays, as shown below:

- -

Our example site as viewed on a wide screen - here the first image works ok, as it is big enough to see the detail in the center.Our example site as viewed on a narrow screen with the picture element used to switch the first image to a portrait close up of the detail, making it a lot more useful on a narrow screen

- -
-

Note: You should use the media attribute only in art direction scenarios; when you do use media, don't also offer media conditions within the sizes attribute.

-
- -

Why can't we just do this using CSS or JavaScript?

- -

When the browser starts to load a page, it starts to download (preload) any images before the main parser has started to load and interpret the page's CSS and JavaScript. This is a useful technique, which on average has shaved 20% off page load times. However, it is not helpful for responsive images, hence the need to implement solutions like srcset. You couldn't for example load the {{htmlelement("img")}} element, then detect the viewport width with JavaScript and dynamically change the source image to a smaller one if desired. By then, the original image would already have been loaded, and you would load the small image as well, which is even worse in responsive image terms.

- - - -

Use modern image formats boldly

- -

There are several exciting new image formats (such as WebP and JPEG-2000) that can maintain a low file size and high quality at the same time. However, browser support is spotty.

- -

<picture> lets us continue catering to older browsers. You can supply MIME types inside type attributes so the browser can immediately reject unsupported file types:

- -
<picture>
-  <source type="image/svg+xml" srcset="pyramid.svg">
-  <source type="image/webp" srcset="pyramid.webp">
-  <img src="pyramid.png" alt="regular pyramid built from four equilateral triangles">
-</picture>
-
- - - -

Active learning: Implementing your own responsive images

- -

For this active learning, we're expecting you to be brave and go it alone ... mostly. We want you to implement your own suitable art directed narrow screen/wide screen shot using <picture>, and a resolution switching example that uses srcset.

- -
    -
  1. Write some simple HTML to contain your code (use not-responsive.html as a starting point, if you like)
    2. -
  2. Find a nice wide screen landscape image with some kind of detail contained in it somewhere. Create a web-sized version of it using a graphics editor, then crop it to show a smaller part that zooms in on the detail, and create a second image (about 480px wide is good for this.)
    3. -
  3. Use the <picture> element to implement an art direction picture switcher!
    4. -
  4. Create multiple image files of different sizes, each showing the same picture.
    5. -
  5. Use srcset/size to create a resolution switcher example, either to serve the same size image at different resolutions, or different image sizes at different viewport widths.
    6. -
- -
-

Note: Use the browser devtools to help work out what sizes you need, as mentioned above.

-
- -

Summary

- -

That's a wrap for responsive images — we hope you enjoyed playing with these new techniques. As a recap, there are two distinct problems we've been discussing here:

- - - -

This also draws to a close the entire Multimedia and embedding module! The only thing to do now before moving on is to try our multimedia assessment, and see how you get on. Have fun.

- -

See also

- - - -
{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page", "Learn/HTML/Multimedia_and_embedding")}}
diff --git a/files/it/learn/html/multimedia_and_embedding/responsive_images/index.html b/files/it/learn/html/multimedia_and_embedding/responsive_images/index.html new file mode 100644 index 0000000000..cc3dbd7892 --- /dev/null +++ b/files/it/learn/html/multimedia_and_embedding/responsive_images/index.html @@ -0,0 +1,241 @@ +--- +title: Immagini reattive +slug: Learn/HTML/Multimedia_and_embedding/immagini_reattive +translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page", "Learn/HTML/Multimedia_and_embedding")}}
+ +
+

In questo articolo impareremo il concetto di "immagini reattive" (responsive images) — immagini che funzionano correttamente su dispositivi con monitor di dimensioni e risoluzioni  anche molto diverse — e vedremo quali strumenti l'HTML ci mette a disposizione per implementarle. Le immagini reattive sono solo una parte della progettazione di un web reattivo (responsive web design), e pongono delle buone basi per un argomento del quale si imparerà molto di più in un modulo seguente sui CSS.

+
+ + + + + + + + + + + + +
Prerequisiti:Dovresti già conoscere basics of HTML e come aggiungere immagini a una pagina web.
Obiettivi:Imparare ad usare caratteristiche quali l'attributo {{htmlattrxref("srcset", "img")}} e l'elemento {{htmlelement("picture")}} per aggiungere immagini reattive ai siti web, usando diverse soluzioni.
+ +

Perché le immagini reattive?

+ +

Quale problema stiamo cercando di risolvere con le immagini reattive? Esaminiamo uno scenario tipico. Un sito web, probabilmente, avrà una immagine di testa (header image) per piacere ai visitatori, più, forse, altre immagini più giù nel contenuto. Probabilmente si vorrà che l'immagine di testa occupi l'intera larghezza della pagina e che le immagini nel contenuto riempiano le colonne. Vediamo un esempio:

+ +

Our example site as viewed on a wide screen - here the first image works ok, as it is big enough to see the detail in the center.

+ +

Ciò funziona bene su un dispositivo con uno schermo ampio, come un laptop o un desktop (you can see the example live and find the source code on Github). Non discuteremo molto dei CSS, salvo che per dire questo:

+ + + +

Così va bene, ma il problema arriva quando cominci a vedere il sito su un dispositivo con uno schermo stretto — l'immagine di testata si vede bene, ma inizia a prendere gran parte dell'altezza dello schermo per un dispositivo portatile; d'altra parte la prima immagine del contenuto si vede malissimo - a questa dimensione si possono appena vedere le persone.

+ +

Our example site as viewed on a narrow screen; the first image has shrunk to the point where it is hard to make out the detail on it.

+ +

Quando il sito è visualizzato su uno schermo stretto, sarebbe molto meglio mostrare una versione ritagliata dell'immagine che contenga i dettagli importanti dello scatto e magari una via di mezzo tra le due foto quando lo schermo è di media dimensione, come per i tablet. - Questa situazione è nota come art direction problem.

+ +

Inoltre, non c'è bisogno di includere immagini così grandi se la pagina vien vista sui piccoli schermi dei portatili. - Questa è nota come resolution switching problem. Una immagine raster è definita da un certo numero di pixel di larghezza e da un certo numero in altezza; come abbiamo visto parlando di vector graphics, una immagine raster inizia a sgranarsi e a sfocarsi se è mostrata più grande della sua dimensione originale (ciò non accade per le immagini vettoriali), mentre se la visualizziamo più piccola stiamo sprecando banda per far scaricare un file immagine più pesante del necessario - specialmente gli utenti di dispositivi portatili non vogliono che questo accada dal momento che una piccola immagine farebbe a caso loro. Una soluzione ideale la si avrebbe se si avessero diverse immagini, con diverse dimensioni e risoluzioni, da caricare sui diversi dispositivi.

+ +

A rendere le cose ancora più complicate, hanno schermi ad alta risoluzione che necessitano di immagini più grandi di quello che ci si potrebbe aspettare per apparire al meglio. Questo problema è essenzialmente analogo, ma in un contesto leggermente diverso.

+ +

Si potrebbe pensare che le immagini vettoriali possano risolvere questi problemi e in certa misura lo fanno: sono leggere, vengono scalate (ingrandite in scala) bene e dove possibile le si dovrebbe usare. Tuttavia non sono adatte a qualsiasi tipo di immagine: mentre sono ottime per grafiche semplici, cominciano a diventare molto complesse per creare immagini con il livello di dettaglio che si vorrebbe per una foto. Le immagini raster dei formati come ad es. JPEG sono più adatte ai tipi di immagini che abbiamo visto negli esempi precedenti.

+ +

Questo tipo di problemi non esisteva quando il web era agli esordi, nei primi anni 90: allora, gli unici dispositivi esistenti per navigare il web erano i desktop e i laptop, così i progettisti di browser e gli scrittori non dovevano pensare alle soluzioni. Le tecnologie per le immagini reattive (Responsive image technologies) sono state aggiunte di recente per risolvere i problemi accennati sopra, permettendoti di fornire al browser diversi file immagine, che contengono le stesse immagini ma ad una risoluzione diversa, con diverso numero di pixel (resolution switching), o immagini diverse adatte a spazi di allocazione di dimensione diversa (art direction.)

+ +
+

Nota: Le nuove caratteristiche trattate in questo articolo — {{htmlattrxref("srcset", "img")}}/{{htmlattrxref("sizes", "img")}}/{{htmlelement("picture")}} — sono tutte supportate nelle versioni più aggiornate dei browser per desktop e per dispositivi mobili (incluso il browser Microsoft Edge, non da Internet Explorer.) 

+
+ +

Come creare immagini reattive?

+ +

In questa sezione, esamineremo i 2 problemi illustrati e mostreremo come risolverli usando le caratteristiche dell'HTML per le immagini reattive. Dovreste notare che ci concentreremo sull'elemento {{htmlelement("img")}} come trattato nell'esempio precedente — l'immagine nella header è solo decorativa e perciò è aggiunta usando i CSS. I CSS hanno probabilmente migliori strumenti per il responsive design dell'HTML; ne parleremo in un successivo modulo sui CSS.

+ +

Cambiare risoluzione: dimensioni differenti

+ +

Qual è il problema che vogliamo risolvere cambiando la risoluzione? Vogliamo mostrare una immagine identica, ma più grande o più piccola in funzione del dispositivo — è la situazione che abbiamo con la seconda immagine del nostro esempio. L'elemento standard {{htmlelement("img")}} tradizionalmente, permette solo di puntare a un singolo file sorgente.

+ +
<img src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">
+ +

Tuttavia, possiamo usare 2 nuovi attributi — {{htmlattrxref("srcset", "img")}} e {{htmlattrxref("sizes", "img")}} — per fornire molte sorgenti di immagine addizionali insieme a dei suggerimenti per aiutare il browser a prelevare quella giusta. Si può vedere un esempio nel nostro reponsive.html su Github (vedere anche il codice sorgente):

+ +
<img srcset="elva-fairy-320w.jpg 320w,
+             elva-fairy-480w.jpg 480w,
+             elva-fairy-800w.jpg 800w"
+     sizes="(max-width: 320px) 280px,
+            (max-width: 480px) 440px,
+            800px"
+     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">
+ +

Gli attributi srcset e sizes sembrano complicati da capire, ma non lo sono poi tanto se li si formatta come mostrato qui sopra: con una parte del valore dell'attributo per riga. Ogni valore contiene una lista  separata da virgole e ogni parte della lista è fatta di 3 sottoparti. Esaminiamo il contenuto di ognuna:

+ +

srcset definisce il set di immagini tra le quali vogliamo che il browser scelga e quali dimensioni hanno. Prima di ogni virgola, scriviamo:

+ +
    +
  1. un nome di file immagine (elva-fairy-480w.jpg.)
    2. +
  2. uno spazio
    3. +
  3. la dimensione della larghezza dell'immagine in pixels (480w) — notate l'uso dell'unità w e non px come ci si potrebbe aspettare. Si tratta della reale dimensione dell'immagine, che si può trovare esaminando il file immagine sul computer (per esempio in un Mac si può selezionare l'immagine in  Finder, e premere Cmd + I per aprire la scheramta di informazioni).
    4. +
+ +

sizes definisce un set di condizioni (ad es. la larghezza dello schermo) e indica quale dimensione di immagine sarebbe meglio scegliere quando si verificano quelle condizioni — questi sono i suggerimenti di cui si parlava prima. In questo caso, prima di ogni virgola scriviamo:

+ +
    +
  1. una media condition ((max-width:480px)) — imparerete di più a questo riguardo nella sezione sui CSS, ma per adesso diciamo solo che la "media condition" descrive un possibile stato dello schermo. In questo caso, si stà dicendo: "quando la larghezza visualizzata è 480 pixels o meno".
    2. +
  2. uno spazio
    3. +
  3. La larghezza della posizione che l'immagine occuperà quando si realizza la condizione (440px.)
    4. +
+ +
+

Nota: Per la larghezza della posizione, si può fornire una misura assoluta (px, em) o una relativa (come una percentuale). Potreste aver notato che l'ultima larghezza non ha media condition — questa è perciò la condizione di default che deve essere scelta quando nessuna delle condizioni sui dispositivi è vera. Il browser ignora tutto ciò che segue la prima condizione verificata, perciò bisogna fare attenzione all'ordine delle condizioni.

+
+ +

Quindi, definiti questi attributi, il browser farà:

+ +
    +
  1. verifica della larghezza del suo dispositivo
    2. +
  2. calcolo di quale sia la prima condizione tra la lista dell'atributo sizes ad essere vera
    3. +
  3. Look at the slot size given to that media query.
    4. +
  4. Caricamento dell'immagine elencata nell'attributo srcset che maggiormente si avvicina alla dimensione della posizione (slot) scelta.
    5. +
+ +

Fatto! Così a questo punto, se un browser col supporto con una larghezza della viewport di 480px carica la pagina, la (max-width: 480px) media condition sarà vera, perciò verrà scelta la slot da 440px, quindi sarà caricata la elva-fairy-480w.jpg, poiché la sua larghezza (480w) è la più vicina ai 440px. L'immagine da 800px occupa 128KB su disco, mentre la versione da 480px solo 63KB — un risparmio di 65KB. Adesso immagina se fosse una pagina con molte immagini. Usando questa tecnica si può far risparmiare agli utenti mobile un sacco di  ampiezza di banda.

+ +

I browser più vecchi che non supportano queste caratteristiche, semplicemente le ignoreranno e andranno avanti a caricare l'immagine indicata dall'attributo {{htmlattrxref("src", "img")}} come al solito.

+ +
+

Note: nell'elemento {{htmlelement("head")}} del documento si troverà la linea <meta name="viewport" content="width=device-width">: questo obbliga i browser dei dispositivi mobili ad adottare la loro reale larghezza viewport per caricare le pagine web (alcuni browser mentono riguardo alla larghezza e caricano invece pagine a una risoluzione maggiore e poi la riducono, che non è molto utile con una progettazione o una immagine reattiva. Spiegheremo di più a questo proposito in un modulo successivo).

+
+ +

Utili strumenti di sviluppo

+ +

Ci sono alcuni utili developer tools nei browser, per aiutare a calcolare le necessarie larghezze slot, ecc. che si ha bisogno di usare. Mentre le stavo calcolando, prima di tutto ho caricato la versione non reattiva dell'esempio (not-responsive.html), poi sono andato in Responsive Design View (Tools > Web Developer > Responsive Design View - In Firefox, dal sandwich menù -> Sviluppo -> Modalità visualizzazione flessibile), che ti permette di guardare il layout della tua pagina come se fosse visto attraverso dispositivi con diversa dimensione dello schermo.

+ +

Ho impostato la larghezza viewport a 320px e poi a 480px; per ciascuna sono andato nel DOM Inspector, ho cliccato sull'elemento {{htmlelement("img")}} a cui ero interessato e ho guardato la dimensione nella scheda vista Box Model sulla destra del monitor. Questo dovrebbe dare la larghezza dell'immagine di cui si ha bisogno.

+ +

A screenshot of the firefox devtools with an image element highlighted in the dom, showing its dimensions as 440 by 293 pixels.

+ +

Dopo, si può controllare se srcset sta funzionando impostando la larghezza viewport come si desidera (impostatela stretta, per esempio), aprendo il Network Inspector (Tools > Web Developer > Network), poi ricaricando la pagina. Questo dovrebbe dare una lista di risorse che sono state scaricate per per mostrare la pagina e quindi si potrà verificare quale file è stato scelto e scaricato.

+ +

a screenshot of the network inspector in firefox devtools, showing that the HTML for the page has been downloaded, along with three images, which include the two 800 wide versions of the responsive images

+ +

Modificare la risoluzione: stessa dimensione, diverse risoluzioni

+ +

Se stai supportando diverse risoluzioni, ma tutti vedono la tua immagine alla stessa dimensione reale sullo schermo, puoi permettere al browser di scegliere una immagine di risoluzione appropriata usando l'attributo srcset con il descrittore x (x-descriptors) e senza sizes — una sintassi piuttosto semplice! Puoi trovare un esempio di come appare in srcset-resolutions.html (vedere anche il codice sorgente):

+ +
<img srcset="elva-fairy-320w.jpg,
+             elva-fairy-480w.jpg 1.5x,
+             elva-fairy-640w.jpg 2x"
+     src="elva-fairy-640w.jpg" alt="Elva dressed as a fairy">
+
+ +

A picture of a little girl dressed up as a fairy, with an old camera film effect applied to the imageIn questo esempio è stato applicato il seguente CSS all'immagine per farle avere una larghezza di 320 pixels sullo schermo (also called CSS pixels):

+ +
img {
+  width: 320px;
+}
+ +

In questo caso sizes non è necessario — il browser calcola qual è la risoluzione del display su cui è mostrato e fornisce l'immagine più appropriata tra quelle elencate in srcset. Così se il dispositivo che accede alla pagina ha un display standard a bassa risoluzione, with one device pixel representing each CSS pixel, viene caricata l'immagine elva-fairy-320w.jpg (il descrittore 1x è implicito e non c'è bisogno di specificarlo.) Se il dispositivo ha una alta risoluzione di 2 pixel per ogni pixel CSS o più, viene caricata l'immagine elva-fairy-640w.jpg. L'immagine a 640px è di 93KB, mentre quella a 320px è di soli 39KB.

+ +

Art direction

+ +

To recap, the art direction problem involves wanting to change the image displayed to suit different image display sizes. For example, if a large landscape shot with a person in the middle is shown on a website when viewed on a desktop browser, then shrunk down when the website is viewed on a mobile browser, it will look bad as the person will be really tiny and hard to see. It would probably be better to show a smaller, portrait image on mobile, which shows the person zoomed in. The {{htmlelement("picture")}} element allows us to implement just this kind of solution.

+ +

Returning to our original not-responsive.html example, we have an image that badly needs art direction:

+ +
<img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
+ +

Let's fix this, with {{htmlelement("picture")}}! Like <video> and <audio>, The <picture> element is a wrapper containing several {{htmlelement("source")}} elements that provide several different sources for the browser to choose between, followed by the all-important {{htmlelement("img")}} element. the code in responsive.html looks like so:

+ +
<picture>
+  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
+  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
+  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
+</picture>
+
+ + + +

This code allows us to display a suitable image on both wide screen and narrow screen displays, as shown below:

+ +

Our example site as viewed on a wide screen - here the first image works ok, as it is big enough to see the detail in the center.Our example site as viewed on a narrow screen with the picture element used to switch the first image to a portrait close up of the detail, making it a lot more useful on a narrow screen

+ +
+

Note: You should use the media attribute only in art direction scenarios; when you do use media, don't also offer media conditions within the sizes attribute.

+
+ +

Why can't we just do this using CSS or JavaScript?

+ +

When the browser starts to load a page, it starts to download (preload) any images before the main parser has started to load and interpret the page's CSS and JavaScript. This is a useful technique, which on average has shaved 20% off page load times. However, it is not helpful for responsive images, hence the need to implement solutions like srcset. You couldn't for example load the {{htmlelement("img")}} element, then detect the viewport width with JavaScript and dynamically change the source image to a smaller one if desired. By then, the original image would already have been loaded, and you would load the small image as well, which is even worse in responsive image terms.

+ + + +

Use modern image formats boldly

+ +

There are several exciting new image formats (such as WebP and JPEG-2000) that can maintain a low file size and high quality at the same time. However, browser support is spotty.

+ +

<picture> lets us continue catering to older browsers. You can supply MIME types inside type attributes so the browser can immediately reject unsupported file types:

+ +
<picture>
+  <source type="image/svg+xml" srcset="pyramid.svg">
+  <source type="image/webp" srcset="pyramid.webp">
+  <img src="pyramid.png" alt="regular pyramid built from four equilateral triangles">
+</picture>
+
+ + + +

Active learning: Implementing your own responsive images

+ +

For this active learning, we're expecting you to be brave and go it alone ... mostly. We want you to implement your own suitable art directed narrow screen/wide screen shot using <picture>, and a resolution switching example that uses srcset.

+ +
    +
  1. Write some simple HTML to contain your code (use not-responsive.html as a starting point, if you like)
    2. +
  2. Find a nice wide screen landscape image with some kind of detail contained in it somewhere. Create a web-sized version of it using a graphics editor, then crop it to show a smaller part that zooms in on the detail, and create a second image (about 480px wide is good for this.)
    3. +
  3. Use the <picture> element to implement an art direction picture switcher!
    4. +
  4. Create multiple image files of different sizes, each showing the same picture.
    5. +
  5. Use srcset/size to create a resolution switcher example, either to serve the same size image at different resolutions, or different image sizes at different viewport widths.
    6. +
+ +
+

Note: Use the browser devtools to help work out what sizes you need, as mentioned above.

+
+ +

Summary

+ +

That's a wrap for responsive images — we hope you enjoyed playing with these new techniques. As a recap, there are two distinct problems we've been discussing here:

+ + + +

This also draws to a close the entire Multimedia and embedding module! The only thing to do now before moving on is to try our multimedia assessment, and see how you get on. Have fun.

+ +

See also

+ + + +
{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page", "Learn/HTML/Multimedia_and_embedding")}}
diff --git a/files/it/learn/html/multimedia_and_embedding/video_and_audio_content/index.html b/files/it/learn/html/multimedia_and_embedding/video_and_audio_content/index.html new file mode 100644 index 0000000000..3c15046cd4 --- /dev/null +++ b/files/it/learn/html/multimedia_and_embedding/video_and_audio_content/index.html @@ -0,0 +1,270 @@ +--- +title: Contenuti video e audio +slug: Learn/HTML/Multimedia_and_embedding/contenuti_video_e_audio +translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}
+ +

Adesso che siamo pratici con l'aggiunta di immagini, il passo successivo è cominciare ad aggiungere lettori video e audio ai documenti HTML. In questo articolo vedremo come farlo, con gli elementi {{htmlelement("video")}} e {{htmlelement("audio")}}; finiremo dando uno sguardo a come si aggiungono i sottotitoli ai video.

+ + + + + + + + + + + + +
Prerequisiti:Competenze base sui computer, software di base installato, conoscenze base di gestione dei file (working with files), familiarità coi fondamenti di HTML (come trattati in Cominciare con l'HTML) e con Immagini in HTML.
Obbiettivi:Imparare ad inserire contenuti video e audio nelle webpage e aggiungere i sottotitoli ai video.
+ +

Audio e video nel web

+ +

Gli sviluppatori Web han voluto usare video e audio per lungo tempo, fin dai primi anni del terzo millennio, quando abbiamo cominciato ad avere la banda larga, veloce abbastanza da supportare ogni tipo di video (i file video sono molto più grandi dei file testo o immagine). Nei primi tempi, le tecnologie nate per il web, come l'HTML, non avevano la capacità di integrare video e audio nel web, così, per poterlo fare, sono diventate popolari delle tecnologie proprietarie (e i plugin basati su di esse), come Flash (e più tardi Silverlight). Questo tipo di tecnologie funziona bene, ma ha numerosi problemi, tra cui: non essere ben integrate con HTML/CSS, problemi di sicurezza e di accessibilità.

+ +

Una soluzione nativa, sviluppata apposta, avrebbe risolto molti di questi problemi. Fortunatamente, pochi anni dopo, la specifica {{glossary("HTML5")}} aveva queste caratteristiche, conferite dall'aggiunta degli elementi {{htmlelement("video")}} e {{htmlelement("audio")}} e di alcune brillanti nuove {{Glossary("JavaScript")}} {{Glossary("API","APIs")}} per il loro controllo. Non vedremo JavaScript qui — vedremo solo le fondamenta che possono essere ottenute con l'HTML.

+ +

Non ti insegneremo a produrre file audio e video, cosa per la quale sono richieste competenze totalmente diverse. Ti forniremo campioni audio, video e esempi di codice per i tuoi esperimenti, nel caso che tu non possa ottenerli per tuo conto.

+ +
+

Nota: Prima di cominciare, dovresti anche sapere che ci sono abbastanza pochi {{glossary("OVP","OVPs")}} (online video providers - fornitori di video online) come YouTube, Dailymotion, e Vimeo, e fornitori di audio online, come Soundcloud. Queste compagnie offrono un modo comodo e facile per pubblicare e fruire di video, così che tu non ti debba preoccupare dell'enorme consumo di banda. Queste compagnie OVP, in genere, offrono anche il codice da usare per integrare video/audio nelle tue pagine web. Se segui questa strada puoi evitare alcune delle difficoltà di cui discutiamo in questo articolo. Vedremo un po meglio questo tipo di servizi nel prossimo articolo.

+
+ +

L'elemento <video>

+ +

L'elemento {{htmlelement("video")}} permette di aggiungere un video in modo molto semplice. Un esempio può essere questo:

+ +
<video src="rabbit320.webm" controls>
+  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.webm">link to the video</a> instead.</p>
+</video>
+ +

Le caratteristiche sono:

+ +
+
{{htmlattrxref("src","video")}}
+
Come per l'elemento {{htmlelement("img")}}, l'attributo src contiene il percorso al video che vuoi integrare nella pagina; funziona esattamente nello stesso modo.
+
{{htmlattrxref("controls","video")}}
+
Gli utenti devono poter controllare il riavvolgimento e la ripetizione del video o dell'audio (è particolarmente importante per i malati di epilessia). Si può usare sia l'attributo controls per aggiungere l'interfaccia di controllo propria del browser, sia costruire la propria interfaccia usando le appropriate API JavaScript. Come minimo, l'interfaccia deve offrire la possibilità di avviare e fermare il media e di regolare il volume.
+
Il paragrafo tra i tag <video>
+
Questo paragrafo è chiamato fallback content (contenuto di ripiego) — sarà mostrato se il browser che accede alla pagina non supporta l'elemento <video>, offrendo un'alternativa per i vecchi browser. Può essere qualunque cosa vogliate; si può ad esempio fornire un collegamento diretto al file video, così che l'utente possa accedervi in qualche modo, indipendentemente dal browser che usa.
+
+ +

Il video integrato apparirà più o meno così:

+ +

A simple video player showing a video of a small white rabbit

+ +

Puoi provare l'esempio qui: try the example (vedi anche il codice sorgente).

+ +

Supportare molti formati

+ +

C'è un problema con l'esempio qui sopra, che potresti aver già notato se hai provato ad accedere il live link con un browser come Safari o Internet Explorer. Il video non parte! Ciò è dovuto al fatto che i browser supportano formati video (e audio) diversi.

+ +

Passiamo rapidamente in rassegna la terminologia. Formati come MP3, MP4 e WebM sono chiamati container formats (formati container). Contengono diverse parti che costituiscono l'intera canzone o video — come un'unica traccia audio (o un unica traccia video nel caso dei video) e i metadati per descrivere il media (mezzo espressivo) che viene presentato.

+ +

Anche le tracce audio e video hanno diversi formati, per esempio:

+ + + +

Un player audio tenderà a riprodurre una traccia audio direttamente, ad es. un MP3 o un file Ogg; queste non necessitano di contenitori.

+ +
+

Nota: non è così semplice, come puoi vedere nella nostra tabella audio-video codec compatibility table. Inoltre, molti browser dei portatili possono riprodurre un formato non supportato passandone la gestione al media player del sistema perché lo riproduca. Ma per ora ce n'è già abbastanza.

+
+ +

I formati precedenti esistono per comprimere i video e gli audio in file maneggiabili (i video e gli audio originali sono molto pesanti). I browser contengono differenti {{Glossary("Codec","Codecs")}}, come Vorbis o H.264, che sono usati per covertire i video e gli audio compressi in file binari e viceversa. Come già detto, sfortunatamente, non tutti i borwser supportano gli stessi codecs, così si dovranno fornire molti file, per ogni riproduttore di media. Se manca il giusto codec per decodificare il media, questo non si avvierà.

+ +
+

Nota: ti potresti chiedere il perché di questa situazione. I formati MP3 (for audio) and MP4/H.264 (for video) sono entrambi ampiamente supportati e di buona qualità. Tuttavia, sono anche ricoperti da brevetto — Il brevetto americano copre MP3 fino almeno al 2017, e H.264 fino al 2027 come minimo; ciò significa che i browser che non detengono il brevetto devono pagare parecchio per poter supportare questi formati. Inoltre, molte persone evitano per principio i software con delle restrizioni, in favore dei formati aperti.

+
+ +

Quindi, come facciamo ad offrire diversi formati? Dai uno sguardo al seguente updated example (try it live here, also):

+ +
<video controls>
+  <source src="rabbit320.mp4" type="video/mp4">
+  <source src="rabbit320.webm" type="video/webm">
+  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
+</video>
+ +

Qui abbiamo tirato fuori l'attributo src dal tag <video> e abbiamo invece incluso elementi {{htmlelement("source")}} che puntano ciascuno a una risorsa. In questo caso il browser cercherà tra gli elementi <source> e riprodurrà il primo per il quale ha il codec. Includere i formati WebM e MP4 dovrebbe essere sufficiente a riprodurre il tuo video sulla maggioranza delle piattaforme e dei browser di oggi.

+ +

Ogni elemento <source> ha un attributo type; è opzionale, ma è consigliato metterlo — contiene i {{glossary("MIME type","MIME types")}} dei file video e i browser possono leggerli e scartare immediatamente i formati che non capiscono. Se non viene messo, i browser dovranno caricare i file e provare a riprodurli fino a che ne troveranno uno che funziona, usando molto più tempo e risorse.

+ +
+

Nota: il nostro articolo sui formati media supportati contiene alcuni comuni {{glossary("MIME type","MIME types")}}.

+
+ +

Altre caratteristiche dell'elemento <video>

+ +

Ci sono numerose altre funzionalità che possono essere incluse in un video HTML5. Dai un occhiata al nostro terzo esempio:

+ +
<video controls width="400" height="400"
+       autoplay loop muted
+       poster="poster.png">
+  <source src="rabbit320.mp4" type="video/mp4">
+  <source src="rabbit320.webm" type="video/webm">
+  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
+</video>
+
+ +

Questo ci darà un output simile a questo:

+ +

A video player showing a poster image before it plays. The poster image says HTML5 video example, OMG hell yeah!Le nuove funzionalità sono:

+ +
+
{{htmlattrxref("width","video")}} e {{htmlattrxref("height","video")}}
+
Puoi controllare la dimensione del video sia con questi attributi che con i {{Glossary("CSS")}}. In entrambi i casi i video mantengono il loro rapporto larghezza-altezza nativo, conosciuto come aspect ratio. Se il rapporto d'aspetto non è mantenuto dalle dimensioni impostate da te, il video sarà ridimensionato fino alla dimensione orizzontale e lo spazio non occupato verticalmente verrà riempito, di default, con uno sfondo colorato.
+
{{htmlattrxref("autoplay","video")}}
+
Questo attributo fa partire l'audio o il video immediatamente, durante il caricamento della pagina. Ti suggeriamo di non usare l'autoplay nel tuo sito, perché gli utenti possono trovarlo molto fastidioso.
+
{{htmlattrxref("loop","video")}}
+
Questo attributo fa ricominciare il video (o l'audio) nuovamente, ogni volta che finisce. Anche questo può essere fastidioso, quindi usalo solo se necessario.
+
{{htmlattrxref("muted","video")}}
+
Questo attributo fa si che il video parta con l'audio disattivato per default.
+
{{htmlattrxref("poster","video")}}
+
Questo attributo ha per valore l'URL di una immagine che sarà mostrata prima dell'avvio del video. Si suppone sia usata come schermata di lancio, promozionale.
+
+ +

Puoi trovare gli esempi sopra su play live on Github (also see the source code). Nota che non abbiamo incluso l'attributo autoplay nella versione live — se il video parte appena la pagina viene caricata, non potrai vedere il poster!

+ +

L'elemento <audio>

+ +

L'elemento {{htmlelement("audio")}} funziona esattamente come l'elemento {{htmlelement("video")}}, con poche minime differenze illustrate qui sotto. Un esempio tipico potrebbe apparire così:

+ +
<audio controls>
+  <source src="viper.mp3" type="audio/mp3">
+  <source src="viper.ogg" type="audio/ogg">
+  <p>Your browser doesn't support HTML5 audio. Here is a <a href="viper.mp3">link to the audio</a> instead.</p>
+</audio>
+ +

Ciò produce qualcosa del genere, in un browser:

+ +

A simple audio player with a play button, timer, volume control, and progress bar

+ +
+

Nota: Puoi riprodurre the audio demo live on Github (also see the audio player source code.)

+
+ +

Questo occupa meno spazio di un player video, perché non c'è la componente visiva — devi solo visualizzare i controlli per l'audio. Altre differenze dall'HTML5 video sono queste:

+ + + +

A parte ciò,  <audio> supporta tutte le caratteristiche di <video> — puoi vedere la precedente sezione per avere informazioni a riguardo, se non l'hai ancora vista.

+ +

Mostrare le traccie testuali (sottotitoli) dei video

+ +

Adesso discuteremo un concetto leggermente più avanzato, che è molto utile conoscere. Molta gente non può o non vuole ascoltare il contenuto audio del web, almeno certe volte. Per esempio:

+ + + +

Non sarebbe bello poter fornire a queste persone una trascrizione del testo enunciato nel video/audio? Bene, grazie all'HTML5 si può; con il formato WebVTT e l'elemento {{htmlelement("track")}}.

+ +
+

Nota: "Transcribe (trascrivere)" e "transcript (trascrizione)" significa creare un testo scritto che riproduce le parole come sono pronunciate.

+
+ +

WebVTT è un formato  per scrivere file di testo contenenti molteplici stringhe di testo insieme a metadati come il tempo a cui vuoi che ogni stringa sia mostrata e limitate informazioni relative allo stile e alla opsizione. Queste stringhe di testo sono chiamate cues (battute), e se ne possono visualizzare diversi tipi che hanno scopi diversi; le più comuni sono:

+ +
+
subtitles
+
Traduzioni di materiale straniero, per chi non capisce la lingua
+
captions
+
trascrizioni sincronizzate di dialoghi o descrizioni di suoni significativi, per permettere a chi non può sentire l'audio di capire cosa sta succedendo.
+
timed descriptions
+
testo che deve essere convertito in audio, per essere disponibile a chi ha disabilità visive.
+
+ +

Un tipico file WebVTT appare così:

+ +
WEBVTT
+
+1
+00:00:22.230 --> 00:00:24.606
+This is the first subtitle.
+
+2
+00:00:30.739 --> 00:00:34.074
+This is the second.
+
+  ...
+
+ +

Per visualizzarlo insieme al riproduttore di media HTML, devi:

+ +
    +
  1. salvarlo come file .vtt in un posto adatto
    2. +
  2. collegare il file .vttcon l'elemento {{htmlelement("track")}}. Questo elemento <track> deve essere annidato dentro <audio> o <video>, ma dopo tutti gli elementi <source>. Usa l'attributo {{htmlattrxref("kind","track")}} per specificare se le battute sono subtitles, captions, o descriptions. Inoltre, usa l'attributo {{htmlattrxref("srclang","track")}} per dire al browser in quale lingua sono scritti i sottotitoli.
    3. +
+ +

Ecco un esempio:

+ +
<video controls>
+    <source src="example.mp4" type="video/mp4">
+    <source src="example.webm" type="video/webm">
+    <track kind="subtitles" src="subtitles_en.vtt" srclang="en">
+</video>
+ +

Ciò produrrà un video coi sottotitoli visualizzati più o meno così:

+ +

Video player with stand controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."

+ +

Per avere più dettagli, leggi Adding captions and subtitles to HTML5 video. Puoi trovare l'esempio sviluppato in questo articolo qui: find the example, su Github, scritto da Ian Devlin (guarda anche il codice sorgente). Questo esempio usa alcuni JavaScript per permettere agli utenti di scegliere tra differenti sottotitoli. Nota che per attivare i sottotitoli, devi premere il bottone "CC" e selezionare un'opzione — English, Deutch, o Español. 

+ +
+

Nota: le "Text tracks" ti aiutano anche con la {{glossary("SEO")}}, perché i motori di ricerca brillano particolarmente coi testi.  I sottotitoli (Text tracks/traccie di testo) permettono ai motori di ricerca, persino di linkare direttamente una certa parte del video.

+
+ +

Active learning: Includere un proprio audio o video

+ +

Per questo apprendimento attivo, ci piacerebbe che tu andassi fuori a registrare alcuni video tuoi — molti telefoni, oggi, consentono di registrare audio e video molto facilmente e se riesci a trasferirli sul tuo computer, li puoi usare. Potresti dover fare alcune conversioni per ottenere i formati WebM o MP4, per i video, oppure MP3 o Ogg, per l'audio, ma ci sono molti programmi che permettono di farlo senza problemi, come Miro Video Converter e Audacity. Ci piacerebbe che facessi un tentativo!

+ +

Se non sai generare acun video o audio, allora puoi usare i nostri campioni di file video e audio per portare a termine l'esercizio. Puoi anche usare i campioni di codice come riferimento.

+ +

Ci piacerebbe che:

+ +
    +
  1. salvassi i tuoi file audio e video in una nuova directory sul tuo computer,
    2. +
  2. creassi un nuovo file index.html nella stessa directory,
    3. +
  3. aggiungessi gli elementi <audio> e <video> alla pagina facendogli mostrare i controlli di default del browser,
    4. +
  4. dessi a entrambi degli elementi <source> così che il browser trovi il formato che supportano meglio e lo caricassero; ciò include l'uso dell'attributo type,
    5. +
  5. dessi all'elemento <video> un poster da visualizzare prima che il video venga avviato. Divertiti a creare il tuo personale poster disegnato.
    6. +
+ +

Per raggiungere dei bonus, puoi provare a cercare text tracks (sottotitoli) e studiare come aggiungere qualche trascrizione al tuo video.

+ +

Conclusioni

+ +

Questo è quanto. Speriamo tu ti sia divertito/a a giocare con contenuti video e audio! Nel prossimo articolo vedremo altri modi per inserire contenuti nelle pagine web, usando tecnologie come gli {{htmlelement("iframe")}} e gli {{htmlelement("object")}}.

+ +

Vedi anche

+ + + +

{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}

+ +
+
+ + diff --git a/files/it/learn/html/scrivi_una_semplice_pagina_in_html/index.html b/files/it/learn/html/scrivi_una_semplice_pagina_in_html/index.html deleted file mode 100644 index c52f7ca3e2..0000000000 --- a/files/it/learn/html/scrivi_una_semplice_pagina_in_html/index.html +++ /dev/null @@ -1,277 +0,0 @@ ---- -title: Scrivi una semplice pagina in HTML -slug: Learn/HTML/Scrivi_una_semplice_pagina_in_HTML -tags: - - Guide - - HTML - - Principianti - - Web Development -translation_of: Learn/Getting_started_with_the_web -translation_of_original: Learn/HTML/Write_a_simple_page_in_HTML ---- -
-

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

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

Sommario

- -

La semplice pagina web è solo un documento {{Glossary("HTML")}}.Le uniche cose del quale hai bisogno sono un documento HTML valido sul tuo computer e un web browser.Vediamo come usare HTML {{Glossary("Tag","tags")}} e potrai essere in grado di vedere la pagina che hai creato nel browser.

- -

Apprendimento attivo

- -

Prima di tutto accertiamoci di avere un editore di testo che sia comodo e un web browser funzionante. Praticamente qualsiasi editore di testo può farlo, ad esempio Notepad in Windows o TextEdit sul Mac, ma assicurati di avere creato un semplice documento di testo (solo caratteri senza alcun supporto di formattazione). Se vuoi usare TextEdit sul MAc scegli "Make Plain Text" dal menu "Format.

- -

Primo passo: Un file

- -

una singola pagina web è fatta (almeno) da un file HTML, così inziamo a creare una di quelle che lo comporranno. Apri il tuo editore di testo e crea un nuovo file di testo poi scrivi qualcosa come nell'esempio:

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

Se vuoi puoi apportare delle modifiche rispetto all'esempio sentiti libero di aggiungere o cambiare il testo nel body o nel title e poi salva il file. Assicurati in fine di dare un nome al file con estensione ".html". Per esempio, potresti nominarla "my_page.html".

- -

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

- -

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

- -

Facendo un doppio click sul file si aprirà nel browser,  per aprire il file direttamente sull' editore di testo al fine di modificarlo puoi: fare click con il tasto destro e scegliere di aprire il documento nell'editore di testo; oppure trascinare il documento all'interno dell'editore od aprire il documento scegliendo "Open" dal menu dell'editore "File". La somiglianza all'esempio che vedi sotto dipende dall'editore che utilizzi:

- -

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

- -

Secondo passo: Un web browser

- -

All'interno del file explorer (come Windows Explorer, Finder sul Mac, o Files in Ubuntu), trovi il documento che hai appena creato e lo apri con il browser (fai doppio click o lo trascini nell'icona del browser). Adesso il browser mostra il testo dal file HTML che hai creato e il tab mostra il titolo della pagina il tutto potrebbe assomigliare all'esempio che visualizzi sotto ,fermo restando che la visalizzazione cambia a seconda della piattaforma e del browser da te utilizzati:

- -

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

- -

Come puoi vedere il contenuto del tag body corrisponde al contenuto della pagina e il contenuto del tag title da te scelto è mostrato nel tab, ma le due linee di testo non sono scritte su due differente ma su un'unica linea. Interessante.

- -

Terzo passo: Sperimenta e impara

- -

Prova a rimuovere parti dell' HTML e guarda cosa accade. Alcuni cambiamenti ti permetteranno di mostrare la pagina  nel browser ed altri daranno risultati sbagliati.Ciò Accade perchè il browser cerca di compensare alcuni errori comuni.

- -

La prima cosa da notare è che l'unica cosa che vedi sullo schermo è il testo che non è all'interno delle parentesi angolate (altrimenti conosciute come i simboli di maggiore e minore ma che chiamiamo parentesi angolate quando parliamo di HTML). Ogni cosa all'interno delle parentesi angolate è un{{Glossary("tag")}}, che rappresenta una struttura o scheletro della pagina web.Tutti i contenuti mostrati sono racchiusi tra i tags.

- -

Il nostro esempio di pagina HTML ha due grandi sezioni: un intestazione contenuta all'interno {{HTMLElement("head")}} elemento blocco "block", ed un corpo, contenuto {{HTMLElement("body")}}. Il corpo contiene il testo mostrato all'interno della pagina web.

- -

Ogni tag ha un significato specifico e può essere usato di conseguenza. Per esempio {{HTMLElement("title")}} è usato per indicare il titolo della pagina che può differire dal nome del file, nota che anche che i tag possono presentaresi all'interno del contenuto di altri tags. L'{{HTMLElement("title")}} è contenuto all'interno {{HTMLElement("head")}}, per esempio.

- -

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

- -
<!DOCTYPE html>
-<html>
-<head>
-  <title>Hi there</title>
-</head>
-<body>
-  This is a page
-  a simple page
-  <img src="unicorn_pic.png" alt="Unicorn picture :)" />
-  now with a unicorn
-</body>
-</html>
- -

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

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

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

- -

Poi inserisci un file nominato "unicorn_pic.png" nella stessa cartella del documento HTML.Quando avrai aggiornato la finestra del browser o riaperto il documento, vedrai i cambiamenti di contenuto, completa con unicorno!(non dimenticare di salvare la pagina).

- -

Original file for the unicorn image

- -
-

Nota: Puoi prendere una copia dell'immagine dell'unicorno per usarla nei tuoi sperimenti cliccando con il tasto destro sopra l'immagine e scegliendo "Save image As..." dal menu che appare.

-
- -

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

- -

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

- -

Il risultato mostrato nel browser è questo:

- -

Screenshot for the example with a picture

- -

Come hai notato il tag{{HTMLElement("img")}} ha {{Glossary("attribute","attributes")}} che dà informazioni addizionali necessarie a costruire l'oggetto richiesto in questo caso il nome del file dell'immagine da mostrare e il testo alternativo qualora l'immagine non possa essere caricata.

- -

Questo è un esempio di come aggiungere un'immagine alla pagina, ma puoi usare una tecnica similare per aggiungere musica, video e molto altro tutto usando nient'altro che l'HTML.

- -

Più in profondità

- -

Questa non è una pagina web molto carina

- -

Come avrai notato questa pagina non è certo un miracolo di design e bellezza, questo perchè HTML è tutto ciò che riguarda il contenuto e ciò che il contenuto significa (in termini del suo contesto e la relazione tra i blocchi di contenuto), piuttosto che design.

- -

{{Glossary("CSS")}} ti permette di fare contenuti scintillanti aggiungendo layout, colore, font e così via. Un puro HTML è buono abbastanza per costruire semplici pagine web, ma pagine più complesse (o sebbene semplici con un design accattivante) hanno bisogno del CSS e possibilmente  {{Glossary("JavaScript")}}. HTML costruisce il contenuto, CSS gli stili e JavaScript rende il contenuto dinamico.

- -

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

- -
<!DOCTYPE html>
-<html>
-<head>
-  <title>Hi there</title>
-  <style>
-    body {
-      color: blue;
-    }
-  </style>
-</head>
-  <body>
-    <p>This is a some blue text</p>
-    <img src="unicorn_pic.png" alt="Unicorn picture :)" />
-  </body>
-</html>
- -

Nota l'aggiunta{{HTMLElement("style")}} alla pagina all'interno{{HTMLElement("head")}}. Questo specifica quale caratteristica CSS sarà da applicare al testo contenuto nel tag body.

- -

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

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

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

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

Il risultato finale sarà questo:

- -
<html>
-<head>
-  <title>Hi there</title>
-  <style>
-  body {
-    color: blue;
-    text-decoration: underline;
-    font-size: 42px;
-  }
-  </style>
-</head>
-<body>
-  <p>This is a blue underlined big text</p>
-  <img src="unicorn_pic.png" alt="Unicorn picture :)" />
-</body>
-</html>
- -

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

- -

Screenshot of the browser with the page with some CSS

- -

Andiamo alla seconda pagina

- -

Quando navighi nel Web spesso incontri {{Glossary("hyperlink","links")}}, il modo più utile per navigare da una pagina all'altra. Dal momento in cui l'HTML si occupa del contenuto e i link sono il modulo del contenuto, puoi creare collegamenti tra le pagine utilizzando soltanto l'HTML.

- -

Collega due pagine locali

- -

Per questo esercizio abbiamo bisogno di creare un secondo documento HTML sul computer aggiungiamo un link ad ogni pagina così possiamo passare velocemente avanti e indietro tra esse.

- -

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

- -
<!DOCTYPE html>
-<html>
-<head>
-  <title>Page 1 to ground control</title>
-</head>
-<body>
-  This is page 1.
-  <a href="page2.html" title="to page 2">What is going on on page 2?</a>
-</body>
-</html>
- -

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

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

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

-
- -

Puoi adesso navigare tra i due documenti HTML apri la page 1 nel browser e fai click nel link per aprire la page 2 e viceversa. Puoi inoltre testare il bottone "previous" nel tuo browser esso dovrebbe portarti all'ultima pagina visitata.

- -

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

- -

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

- -

La Page 1 sarà così visualizzata nel browser:

- -

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

- -

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

- -

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

- -
-

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

-
- -

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

- -

Collegamento ad un altra pagina web

- -

In questo esercizio aggiungiamo un link al documento HTML così che il lettore possa velocemente prendere alcune pagine utili nel Web. Puoi collegare qualsiasi cosa sia disponibile nel Web pubblico, prova a creare un collegamento con Wikipedia:

- -
<!DOCTYPE html>
-<html>
-<head>
-  <title>My page</title>
-</head>
-<body>
-  One day,...Unicorns are great...See you.
-  <a href="https://en.wikipedia.org/wiki/Unicorn" title="Unicorn page on Wikipedia">Want to go know more about unicorns? Wikipedia is right here</a>
-</body>
-</html>
- -

Potrebbe più o meno assomigliare a questo nel browser:

- -

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

- -

Passando il puntatore del mouse sopra il link vedrai l'attributo{{htmlattrxref("title")}} mostrato in un tooltip.Questo può essere usato per dare maggiori informazioni sul link così che l'utente possa fare una scelta formazioni tra il cliccare su esso o meno.

- -
-

Ricorda: Ogni volta che modifichi la pagina non dimenticare di salvare il documento sull'editor e di aggiornare la pagina sul browser così che possa vedere i cambiamenti fatti.

-
- -

Prossimi passi

- - diff --git a/files/it/learn/javascript/comefare/index.html b/files/it/learn/javascript/comefare/index.html deleted file mode 100644 index 275eb0cf8d..0000000000 --- a/files/it/learn/javascript/comefare/index.html +++ /dev/null @@ -1,291 +0,0 @@ ---- -title: Risolvere problematiche frequenti nel tuo codice JavaScript -slug: Learn/JavaScript/Comefare -tags: - - Principianti - - imparare -translation_of: Learn/JavaScript/Howto ---- -
R{{LearnSidebar}}
- -

I link seguenti indicano soluzioni a problematiche frequenti in cui puoi imbatterti quando programmi in javaScript.

- -

Errori comuni dei principianti

- -

Ortografia corretta

- -

Se il tuo codice non funziona e/o il browser segnala che qualcosa non è definito, controlla di aver scritto tutti i tuoi nomi di variabili, nomi di funzioni, etc. correttamente.

- -

Alcune comuni funzioni built-in del browser che causano problemi sono: 

- - - - - - - - - - - - - - - - - - - - - - - - - - -
CorrettoSbagliato
getElementsByTagName()getElementbyTagName()
getElementsByName()getElementByName()
getElementsByClassName()getElementByClassName()
getElementById()getElementsById()
- -

Posizione del punto e virgola

- -

Devi assicurarti di non aver posizionato il punto e virgola nel posto sbagliato, ad esempio :

- - - - - - - - - - - - -
CorrettoSbagliato
elem.style.color = 'red';elem.style.color = 'red;'
- -

Funzioni

- -

Ci sono alcune cose che possono andare storte con le funzioni.

- -

Uno degli errori più comuni è dichiarare la funzione ma non chiamarla da nessuna parte. Per esempio:

- -
function myFunction() {
-  alert('This is my function.');
-};
- -

Questo codice non farà nulla, a meno che non venga chiamato con la seguente istruzione:

- -
myFunction();
- -

Ambito (scope) della funzione

- -

Ricorda che le funzioni hanno il loro specifico ambito (scope) — non è possibile accedere ad una variabile definita all'interno di una funzione al di fuori di essa, a meno di dichiararla globalmente (ossia fuori da ogni funzione), oppure restituire il valore (return) dalla funzione stessa.

- -

Eseguire codice posto dopo un istruzione return

- -

Ricordati anche che quando incontra l'istruzione return, l'interprete JavaScript esce dalla funzione — nessun codice all'interno della funzione verrà eseguito dopo l'istruzione return.

- -

Infatti, alcuni browsers (come Firefox) ti daranno un messaggio di errore nella console dello sviluppatore se hai inserito codice dopo un'istruzione return. Firefox restituirà "unreachable code after return statement" (codice irraggiungibile dopo l'istruzione return).

- -

Notazione per gli oggetti opposto al normale assegnamento

- -

Quando fai un normale assegnamento in JavaScript, usi un singolo simbolo di uguale, ad es. :

- -
const myNumber = 0;
- -

Con gli Oggetti occorre invece prestare attenzione alla corretta sintassi. L'oggetto deve essere definito delimitandolo con parentesi graffe, i nomi dei membri devono essere separati dai loro valori con i due punti e i membri tra loro da virgole. Per esempio:

- -
const myObject = {
-  name: 'Chris',
-  age: 38
-}
- -

Definizioni Base

- -
-
- -
- -
- -
-
- -

Casi base d'uso

- -
-
-

Generali

- - - -

Variabili

- - - -

Tipi di dati numerici

- - - -

Stringhe

- - -
- -
-

Arrays

- - - -

Debugging JavaScript

- - - -

For more information on JavaScript debugging, see Handling common JavaScript problems. Also, see Other common errors for a description of common errors.

- -

Making decisions in code

- - - -

Looping/iteration

- - -
-
- -

Intermediate use cases

- -
-
-

Functions

- - - -

Objects

- - - -

JSON

- - -
- -
-

Events

- - - -

Object-oriented JavaScript

- - - -

Web APIs

- - -
-
diff --git "a/files/it/learn/javascript/first_steps/cosa_\303\250_andato_storto/index.html" "b/files/it/learn/javascript/first_steps/cosa_\303\250_andato_storto/index.html" deleted file mode 100644 index 1fa4343de8..0000000000 --- "a/files/it/learn/javascript/first_steps/cosa_\303\250_andato_storto/index.html" +++ /dev/null @@ -1,253 +0,0 @@ ---- -title: Cosa è andato storto? Problemi con Javacript -slug: Learn/JavaScript/First_steps/Cosa_è_andato_storto -translation_of: Learn/JavaScript/First_steps/What_went_wrong ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps")}}
- -

Quando abbiamo realizzato il gioco "Indovina il numero"  nell'articole precedente, potresti esserti accorto che non funziona. Niente paura — questo articolo mira ad aiutarti e non farti strappare i capelli per tali problemi, fornendoti alcuni semplici aiuti su come trovare e correggere gli errori in JavaScript .

- - - - - - - - - - - - -
Prerequisites:Basic computer literacy, a basic understanding of HTML and CSS, an understanding of what JavaScript is.
Objective:To gain the ability and confidence to start fixing simple problems in your own code.
- -

Types of error

- -

Generally speaking, when you do something wrong in code, there are two main types of error that you'll come across:

- - - -

Okay, so it's not quite that simple — there are some other differentiators as you drill down deeper. But the above classifications will do at this early stage in your career. We'll look at both of these types going forward.

- -

An erroneous example

- -

To get started, let's return to our number guessing game — except this time we'll be exploring a version that has some deliberate errors introduced. Go to Github and make yourself a local copy of number-game-errors.html (see it running live here).

- -
    -
  1. To get started, open the local copy inside your favourite text editor, and your browser.
    2. -
  2. Try playing the game — you'll notice that when you press the "Submit guess" button, it doesn't work!
    3. -
- -
-

Note: You might well have your own version of the game example that doesn't work, which you might want to fix! We'd still like you to work through the article with our version, so that you can learn the techniques we are teaching here. Then you can go back and try to fix your example.

-
- -

At this point, let's consult the developer console to see if we can see any syntax errors, then try to fix them. You'll learn how below.

- -

Fixing syntax errors

- -

Earlier on in the course we got you to type some simple JavaScript commands into the developer tools JavaScript console (if you can't remember how to open this in your browser, follow the previous link to find out how). What's even more useful is that the console gives you error messages whenever a syntax error exists inside the JavaScript being fed into the browser's JavaScript engine. Now let's go hunting.

- -
    -
  1. Go to the tab that you've got number-game-errors.html open in, and open your JavaScript console. You should see an error message along the following lines:
    2. -
  2. This is a pretty easy error to track down, and the browser gives you several useful bits of information to help you out (the screenshot above is from Firefox, but other browsers provide similar information). From left to right, we've got: -
      -
    • A red "x" to indicate that this is an error.
      • -
    • An error message to indicate what's gone wrong: "TypeError: guessSubmit.addeventListener is not a function"
      • -
    • A "Learn More" link that links through to an MDN page that explains what this error means in huge amounts of detail.
      • -
    • The name of the JavaScript file, which links through to the Debugger tab of the devtools. If you follow this link, you'll see the exact line where the error is highlighted.
      • -
    • The line number where the error is, and the character number in that line where the error is first seen. In this case, we've got line 86, character number 3.
      • -
    -
    3. -
  3. If we look at line 86 in our code editor, we'll find this line: - 
    guessSubmit.addeventListener('click', checkGuess);
    -
    4. -
  4. The error message says "guessSubmit.addeventListener is not a function", so we've probably spelled something wrong. If you are not sure of the correct spelling of a piece of syntax, it is often good to look up the feature on MDN. The best way to do this currently is to search for "mdn name-of-feature" on your favourite search engine. Here's a shortcut to save you some time in this instance: addEventListener().
    5. -
  5. So, looking at this page, the error appears to be that we've spelled the function name wrong! Remember that JavaScript is case sensitive, so any slight difference in spelling or casing will cause an error. Changing addeventListener to addEventListener should fix this. Do this now.
    6. -
- -
-

Note: See our TypeError: "x" is not a function reference page for more details about this error.

-
- -

Syntax errors round two

- -
    -
  1. Save your page and refresh, and you should see the error has gone.
    2. -
  2. Now if you try to enter a guess and press the Submit guess button, you'll see ... another error!
    3. -
  3. This time the error being reported is "TypeError: lowOrHi is null", on line 78. -
    Note: Null is a special value that means "nothing", or "no value". So lowOrHi has been declared and initialised, but not with any meaningful value — it has no type or value.
    - -
    Note: This error didn't come up as soon as the page was loaded because this error occurred inside a function (inside the checkGuess() { ... } block). As you'll learn in more detail in our later functions article, code inside functions runs in a separate scope than code outside functions. In this case, the code was not run and the error was not thrown until the checkGuess() function was run by line 86.
    -
    4. -
  4. Have a look at line 78, and you'll see the following code: - 
    lowOrHi.textContent = 'Last guess was too high!';
    -
    5. -
  5. This line is trying to set the textContent property of the lowOrHi variable to a text string, but it's not working because lowOrHi does not contain what it's supposed to. Let's see why this is — try searching for other instances of lowOrHi in the code. The earliest instance you'll find in the JavaScript is on line 48: - 
    var lowOrHi = document.querySelector('lowOrHi');
    -
    6. -
  6. At this point we are trying to make the variable contain a reference to an element in the document's HTML. Let's check whether the value is null after this line has been run. Add the following code on line 49: - 
    console.log(lowOrHi);
    - -
    -

    Note: console.log() is a really useful debugging function that prints a value to the console. So it will print the value of lowOrHi to the console as soon as we have tried to set it in line 48.

    -
    -
    7. -
  7. Save and refesh, and you should now see the console.log() result in your console. Sure enough, lowOrHi's value is null at this point, so there is definitely a problem with line 48.
    8. -
  8. Let's think about what the problem could be. Line 48 is using a document.querySelector() method to get a reference to an element by selecting it with a CSS selector. Looking further up our file, we can find the paragraph in question: - 
    <p class="lowOrHi"></p>
    -
    9. -
  9. So we need a class selector here, which begins with a dot (.), but the selector being passed into the querySelector() method in line 48 has no dot. This could be the problem! Try changing lowOrHi to .lowOrHi in line 48.
    10. -
  10. Try saving and refreshing again, and your console.log() statement should return the <p> element we want. Phew! Another error fixed! You can delete your console.log() line now, or keep it to reference later on — your choice.
    11. -
- -
-

Note: See our TypeError: "x" is (not) "y" reference page for more details about this error.

-
- -

Syntax errors round three

- -
    -
  1. Now if you try playing the game through again, you should get more success — the game should play through absolutely fine, until you end the game, either by guessing the right number, or by running out of lives.
    2. -
  2. At that point, the game fails again, and the same error is spat out that we got at the beginning — "TypeError: resetButton.addeventListener is not a function"! However, this time it's listed as coming from line 94.
    3. -
  3. Looking at line number 94, it is easy to see that we've made the same mistake here. We again just need to change addeventListener to .addEventListener. Do this now.
    4. -
- -

A logic error

- -

At this point, the game should play through fine, however after playing through a few times you'll undoubtedly notice that the "random" number you've got to guess is always 1. Definitely not quite how we want the game to play out!

- -

There's definitely a problem in the game logic somewhere — the game is not returning an error; it just isn't playing right.

- -
    -
  1. Search for the randomNumber variable, and the lines where the random number is first set. The instance that stores the random number that we want to guess at the start of the game should be around line number 44: - - 
    var randomNumber = Math.floor(Math.random()) + 1;
    - And the one that generates the random number before each subsequent game is around line 113:
    2. -
  2. - 
    randomNumber = Math.floor(Math.random()) + 1;
    -
    3. -
  3. To check whether these lines are indeed the problem, let's turn to our friend console.log() again — insert the following line directly below each of the above two lines: - 
    console.log(randomNumber);
    -
    4. -
  4. Save and refresh, then play a few games — you'll see that randomNumber is equal to 1 at each point where it is logged to the console.
    5. -
- -

Working through the logic

- -

To fix this, let's consider how this line is working. First, we invoke Math.random(), which generates a random decimal number between 0 and 1, e.g. 0.5675493843.

- -
Math.random()
- -

Next, we pass the result of invoking Math.random() through Math.floor(), which rounds the number passed to it down to the nearest whole number. We then add 1 to that result:

- -
Math.floor(Math.random()) + 1
- -

Rounding a random decimal number between 0 and 1 down will always return 0, so adding 1 to it will always return 1.  We need to multiply the random number by 100 before we round it down. The following would give us a random number between 0 and 99:

- -
Math.floor(Math.random()*100);
- -

Hence us wanting to add 1, to give us a random number between 1 and 100:

- -
Math.floor(Math.random()*100) + 1;
- -

Try updating both lines like this, then save and refresh — the game should now play like we are intending it to!

- -

Other common errors

- -

There are other common errors you'll come across in your code. This section highlights most of them.

- -

SyntaxError: missing ; before statement

- -

This error generally means that you have missed a semi colon at the end of one of your lines of code, but it can sometimes be more cryptic. For example, if we change this line inside the checkGuess() function:

- -
var userGuess = Number(guessField.value);
- -

to

- -
var userGuess === Number(guessField.value);
- -

It throws this error because it thinks you are trying to do something different. You should make sure that you don't mix up the assignment operator (=) — which sets a variable to be equal to a value — with the strict equality operator (===), which tests whether one value is equal to another, and returns a true/false result.

- -
-

Note: See our SyntaxError: missing ; before statement reference page for more details about this error.

-
- -

The program always says you've won, regardless of the guess you enter

- -

This could be another symptom of mixing up the assignment and strict equality operators. For example, if we were to change this line inside checkGuess():

- -
if (userGuess === randomNumber) {
- -

to

- -
if (userGuess = randomNumber) {
- -

the test would always return true, causing the program to report that the game has been won. Be careful!

- -

SyntaxError: missing ) after argument list

- -

This one is pretty simple — it generally means that you've missed the closing parenthesis off the end of a function/method call.

- -
-

Note: See our SyntaxError: missing ) after argument list reference page for more details about this error.

-
- -

SyntaxError: missing : after property id

- -

This error usually relates to an incorrectly formed JavaScript object, but in this case we managed to get it by changing

- -
function checkGuess() {
- -

to

- -
function checkGuess( {
- -

This has caused the browser to think that we are trying to pass the contents of the function into the function as an argument. Be careful with those parentheses!

- -

SyntaxError: missing } after function body

- -

This is easy — it generally means that you've missed one of your curly braces from a function or conditional structure. We got this error by deleting one of the closing curly braces near the bottom of the checkGuess() function.

- -

SyntaxError: expected expression, got 'string' or SyntaxError: unterminated string literal

- -

These errors generally mean that you've missed off a string value's opening or closing quote mark. In the first error above, string would be replaced with the unexpected character(s) that the browser found instead of a quote mark at the start of a string. The second error means that the string has not been ended with a quote mark.

- -

For all of these errors, think about how we tackled the examples we looked at in the walkthrough. When an error arises, look at the line number you are given, go to that line and see if you can spot what's wrong. Bear in mind that the error is not necessarily going to be on that line, and also that the error might not be caused by the exact same problem we cited above!

- -
-

Note: See our SyntaxError: Unexpected token and SyntaxError: unterminated string literal reference pages for more details about these errors.

-
- -

Summary

- -

So there we have it, the basics of figuring out errors in simple JavaScript programs. It won't always be that simple to work out what's wrong in your code, but at least this will save you a few hours of sleep and allow you to progress a bit faster when things don't turn out right earlier on in your learning journey.

- -

See also

- -
- -
- -

{{PreviousMenuNext("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps")}}

- -

In this module

- - diff --git a/files/it/learn/javascript/first_steps/variabili/index.html b/files/it/learn/javascript/first_steps/variabili/index.html deleted file mode 100644 index 38da82e607..0000000000 --- a/files/it/learn/javascript/first_steps/variabili/index.html +++ /dev/null @@ -1,337 +0,0 @@ ---- -title: Memorizzazione delle informazioni necessarie - Variabili -slug: Learn/JavaScript/First_steps/Variabili -translation_of: Learn/JavaScript/First_steps/Variables ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps")}}
- -

Dopo aver letto gli ultimi due articoli, ora dovresti sapere cos'è JavaScript, cosa può fare per te, come lo usi insieme ad altre tecnologie web e quali sono le sue caratteristiche principali da un livello elevato. In questo articolo, passeremo alle basi reali, esaminando come lavorare con i blocchi di base di JavaScript - Variabili.

- - - - - - - - - - - - -
Prerequisiti:Nozioni di base di informatica, comprensione di base di HTML e CSS, comprensione di cosa sia JavaScript
Obiettivo:Acquisire familiarità con le basi delle variabili JavaScript.
- -

Strumenti di cui hai bisogno

- -

In questo articolo ti verrà chiesto di digitare righe di codice per testare la tua comprensione del contenuto. Se si utilizza un browser desktop, il posto migliore per digitare il codice di esempio è la console JavaScript del browser (vedere Quali sono gli strumenti di sviluppo del browser per ulteriori informazioni su come accedere a questo strumento).

- -

Cosa è una variabile?

- -

Una variabile è un contenitore per un valore, come un numero che potremmo usare in una somma o una stringa che potremmo usare come parte di una frase. Ma una cosa speciale delle variabili è che i loro valori possono cambiare. Diamo un'occhiata a un semplice esempio:

- -
<button>Press me</button>
- -
const button = document.querySelector('button');
-
-button.onclick = function() {
-  let name = prompt('What is your name?');
-  alert('Hello ' + name + ', nice to see you!');
-}
- -

{{ EmbedLiveSample('What_is_a_variable', '100%', 50, "", "", "hide-codepen-jsfiddle") }}

- -

In questo esempio, premendo il bottone viene eseguito un paio di righe di codice. La prima riga apre una finestra sullo schermo che chiede al lettore di inserire il proprio nome, quindi memorizza il valore in una variabile. La seconda riga mostra un messaggio di benvenuto che include il loro nome, preso dal valore della variabile.

- -

Per capire perché questo è così utile, pensiamo a come scrivere questo esempio senza usare una variabile. Finirebbe per assomigliare a questo:

- -
let name = prompt('What is your name?');
-
-if (name === 'Adam') {
-  alert('Hello Adam, nice to see you!');
-} else if (name === 'Alan') {
-  alert('Hello Alan, nice to see you!');
-} else if (name === 'Bella') {
-  alert('Hello Bella, nice to see you!');
-} else if (name === 'Bianca') {
-  alert('Hello Bianca, nice to see you!');
-} else if (name === 'Chris') {
-  alert('Hello Chris, nice to see you!');
-}
-
-// ... and so on ...
- -

Potresti non comprendere appieno la sintassi che stiamo usando (ancora!), ma dovresti essere in grado di farti un'idea - se non avessimo variabili disponibili, dovremmo implementare un blocco di codice gigante che controlla quale sia il nome inserito e quindi visualizzare il messaggio appropriato per quel nome. Questo è ovviamente molto inefficiente (il codice è molto più grande, anche solo per cinque scelte), e semplicemente non funzionerebbe - non è possibile memorizzare tutte le possibili scelte.

- -

Le variabili hanno senso e, man mano che impari di più su JavaScript, inizieranno a diventare una seconda natura.

- -

Un'altra cosa speciale delle variabili è che possono contenere qualsiasi cosa, non solo stringhe e numeri. Le variabili possono anche contenere dati complessi e persino intere funzioni per fare cose sorprendenti. Imparerai di più su questo mentre procedi.

- -
-

Nota:Diciamo che le variabili contengono valori. Questa è una distinzione importante da fare. Le variabili non sono i valori stessi; sono contenitori per valori. Puoi pensare che siano come piccole scatole di cartone in cui puoi riporre le cose.

-
- -

- -

Dichiarare una variabile

- -

Per usare una variabile, devi prima crearla - più precisamente, dobbiamo dichiarare la variabile. Per fare ciò, utilizziamo la parola chiave var o let seguita dal nome che vuoi chiamare la tua variabile:

- -
let myName;
-let myAge;
- -

Qui stiamo creando due variabili chiamate myName e myAge. Prova a digitare queste righe nella console del tuo browser web. Successivamente, prova a creare una (o due) variabili chiamandole a tuo piacimento.

- -
-

Nota: In JavaScript, tutte le istruzioni del codice dovrebbero terminare con un punto e virgola (;) - il codice potrebbe funzionare correttamente per singole righe, ma probabilmente non funzionerà quando si scrivono più righe di codice insieme. Cerca di prendere l'abitudine di includerlo.

-
- -

Puoi verificare se questi valori ora esistono nell'ambiente di esecuzione digitando solo il nome della variabile, ad es.

- -
myName;
-myAge;
- -

Al momento non hanno valore; sono contenitori vuoti. Quando si immettono i nomi delle variabili, è necessario ottenere un valore undefined. Se non esistono, verrà visualizzato un messaggio di errore: "try typing in

- -
scoobyDoo;
- -
-

Nota: Non confondere una variabile esistente ma che non ha alcun valore definito con una variabile che non esiste affatto: sono cose molto diverse. Nell'analogia della scatola che hai visto sopra, non esistere significherebbe che non esiste una scatola (variabile) in cui inserire un valore. Nessun valore definito significherebbe che c'è una scatola, ma non ha alcun valore al suo interno.

-
- -

Inizializzare una Variabile

- -

Una volta che hai dichiarato una variabiale, puoi inizializzarla con un valore. Puoi farlo digitando il nome della variabile, seguito dal segno di uguale (=), seguito poi dal valore che vuoi dargli. Per esempio: 

- -
myName = 'Chris';
-myAge = 37;
- -

Prova a tornare alla console ora e digita queste linee. Dovresti vedere il valore che hai assegnato alla variabile restituita nella console per confermarla, in ogni caso. Ancora una volta, puoi restituire i valori delle variabili semplicemente digitandone il nome nella console. Riprova:

- -
myName;
-myAge;
- -

Puoi dichiarare e inizializzare una variabile nello stesso tempo, come questo: 

- -
let myDog = 'Rover';
- -

Questo è probabilmente ciò che farai la maggior parte del tempo, essendo il metodo più veloce rispetto alle due azioni separate. 

- -

Differenza tra var e let

- -

A questo punto potresti pensare "perchè abbiamo bisogno di due keywords (parole chiavi) per definire le variabili?? Perchè avere  var e let?".

- -

Le ragioni sono in qualche modo storiche.  Ai tempi della creazione di JavaScript, c'era solo var. Questa funziona fondamentalmente in molti casi, ma ha alcuni problemi nel modo in cui funziona — il suo design può qualche volta essere confuso o decisamente fastidioso. Così,  let è stata creata nella moderna versione di JavaScript, una nuova keyword (parola chiave) per creare variabili che funzionano differentemente da var, risolvendo i suoi problemi nel processo.

- -

Di seguito sono spiegate alcune semplici differenze. Non le affronteremo ora tutte, ma inizierai a scoprirle mentre impari più su JavaScript. (se vuoi davvero leggere su di loro ora, non esitare a controllare la nostra pagina di riferimento let).

- -

Per iniziare, se scrivi un multilinea JavaScript che dichiara e inizializza una variabile, puoi effettivamente dichiarare una variabile con var dopo averla inizializzata funzionerà comunque. Per esempio:

- -
myName = 'Chris';
-
-function logName() {
-  console.log(myName);
-}
-
-logName();
-
-var myName;
- -
-

Nota:  Questo non funziona quando digiti linee individuali in una JavaScript console, ma solo quando viene eseguita in linee multiple in un documento web. 

-
- -

Questo lfunziona a causa di hoisting — leggi var hoisting per maggiori dettagli sull'argomento. 

- -

Hoisting non funziona con  let. Se cambiamo var a let  nell'esempio precedente, da un errore. Questa è una buona cosa — dichiarare una variabile dopo che averla inizializzata si traduce in un codice confuso e difficile da capire.

- -

In secondo luogo, quando usi  var, puoi dichiarare la stessa variabile tutte le volte che vuoi, ma con  let non puoi. Quanto segue funzionerebbe: 

- -
var myName = 'Chris';
-var myName = 'Bob';
- -

Ma il seguente darebbe un errore sulla seconda linea: 

- -
let myName = 'Chris';
-let myName = 'Bob';
- -

Dovresti invece fare questo: 

- -
let myName = 'Chris';
-myName = 'Bob';
- -

Ancora una volta, questa è un scelta linquistica più corretta. Non c'è motivo di ridichiarare le variabili: rende le cose più confuse.

- -

Per queste ragioni e altre, noi raccomandiamo di usare let il più possibile nel tuo codice, piuttosto che var. Non ci sono motivi per usare var, a meno che non sia necessario supportare vecchie versioni di Internet Explorer proprio con il tuo codice.  ( let non è supportato fino fino alla versione 11, il moderno  Windows Edge browser supporta bene let).

- -
-

Nota:  Attualmente stiamo aggiornando il corso per usare più  let piuttosto che var. Abbi pazienza con noi!

-
- -

Aggiornare una variabile

- -

Una volta che una variabile è stata inizializzata con un valore, puoi cambiarlo (o aggiornarlo) dandogli semplicemente un valore differente. Prova a inserire le seguenti linee nella tua console: 

- -
myName = 'Bob';
-myAge = 40;
- -

Regole di denominazione delle variabili

- -

Puoi chiamare una variabile praticamente come preferisci, ma ci sono delle limitazioni. Generalmente, dovresti limitarti ad usare i caratteri latini (0-9, a-z, A-Z) e l'underscore ( _ ).

- - - -
-

Nota: Puoi trovare un elenco abbastanza completo di parole riservate da evitare a Lexical grammar — keywords.

-
- -

Esempi di nomi corretti: 

- -
age
-myAge
-init
-initialColor
-finalOutputValue
-audio1
-audio2
- -

Esempi di nomi errati: 

- -
1
-a
-_12
-myage
-MYAGE
-var
-Document
-skjfndskjfnbdskjfb
-thisisareallylongstupidvariablenameman
- -

Esempi di nomi soggetti a errori: 

- -
var
-Document
-
- -

Prova a creare qualche altra variabile ora, tenendo presente le indicazioni sopra riportate. 

- -

Tipi di Variabili

- -

Esistono diversi tipi di dati che possiamo archiviare in variabili. In questa sezione li descriveremo in breve, quindi in articoli futuri, imparerai su di loro in modo più dettagliato.

- -

Finora abbiamo esaminato i primi due, ma che ne sono altri. 

- -

Numeri

- -

Puoi memorizzare numeri nelle variabili, numeri interi come 30  o numeri decimali come 2,456 (chiamati anche numeri mobili o in virgola mobile). Non è necessario dichiarare i tipi di variabili in JavaScript, a differenza di altri linguaggi di programmazione. Quando dai a una variabile un valore numerico, non si usa le virgolette:

- -
let myAge = 17;
- -

Stringhe

- -

Le stringhe sono pezzi di testo. Quando dai a una variabile un valore di una stringa, hai bisogno di metterla in singole o doppie virgolette; altrimenti, JavaScript cerca di interpretarlo come un altro nome della variabile. 

- -
let dolphinGoodbye = 'So long and thanks for all the fish';
- -

Booleani

- -

I booleani sono dei valori vero/falso — possono avere due valori true o false. Questi sono generalmente usati per testare delle condizioni, dopo di che il codice viene eseguito come appropriato . Ad esempio, un semplice caso sarebbe:

- -
let iAmAlive = true;
- -

Considerando che in realtà sarebbe usato più così:

- -
let test = 6 < 3;
- -

Questo sta usando l'operatore "minore di" (<) per verificare se 6 è minore di 3. Come ci si potrebbe aspettare, restituisce false, perché 6 non è inferiore a 3! Imparerai molto di più su questi operatori più avanti nel corso.

- -

Arrays

- -

Un  array è un singolo oggetto che contiene valori multipli racchiusi in parentesi quadre e separate da virgole. Prova a inserire le seguenti linee nella tua console:

- -
let myNameArray = ['Chris', 'Bob', 'Jim'];
-let myNumberArray = [10, 15, 40];
- -

Una volta che gli  arrays sono definiti,  è possibile accedere a ciascun valore in base alla posizione all'interno dell'array. Prova queste linee:

- -
myNameArray[0]; // should return 'Chris'
-myNumberArray[2]; // should return 40
- -

Le parentesi quadre specificano un valore di indice corrispondente alla posizione del valore che si desidera restituire. Potresti aver notato che gli array in JavaScript sono indicizzatI a zero: il primo elemento si trova all'indice 0.

- -

Puoi imparare molto sugli arrays in un futuro articolo.

- -

Oggetti

- -

In programmazione, un oggetto è una struttura di codice che modella un oggetto reale. Puoi avere un oggetto semplice che rappresenta una box e contiene informazioni sulla sua larghezza, lunghezza e altezza, oppure potresti avere un oggetto che rappresenta una persona e contenere dati sul suo nome, altezza, peso, quale lingua parla, come salutarli
- e altro ancora.

- -

Prova a inserire il seguente codice nella tua console:

- -
let dog = { name : 'Spot', breed : 'Dalmatian' };
- -

Per recuperare le informazioni archiviate nell'oggetto, è possibile utilizzare la seguente sintassi:

- -
dog.name
- -

Per ora non esamineremo più gli oggetti: puoi saperne di più su quelli in un  modulo futuro.

- -

Tipizzazione dinamica

- -

JavaScript è un "linguaggio a tipizzazione dinamica", questo significa che,  a differenza di altri linguaggi, non è necessario specificare quale tipo di dati conterrà una variabile (numeri, stringhe, array, ecc.).

- -

Ad esempio, se dichiari una variabile e le assegni un valore racchiuso tra virgolette, il browser considera la variabile come una stringa:

- -
let myString = 'Hello';
- -

Anche se il valore contiene numeri, è comunque una stringa, quindi fai attenzione:

- -
let myNumber = '500'; // oops, questa è ancora una stringa
-typeof myNumber;
-myNumber = 500; // molto meglio - adesso questo è un numero
-typeof myNumber;
- -

Prova a inserire le quattro righe sopra nella console una per una e guarda quali sono i risultati. Noterai che stiamo usando un speciale operatore chiamato typeof- questo restituisce il tipo di dati della variabile che scrivi dopo. La prima volta che viene chiamato, dovrebbe restituire string, poiché a quel punto la variabile myNumber contiene una stringa, '500'.
- Dai un'occhiata e vedi cosa restituisce la seconda volta che lo chiami.

- -

Costanti in JavaScript

- -

Molti linguaggi di programmazione hanno il concetto di costante - un valore che una volta dichiarato non può mai essere modificato. Ci sono molte ragioni per cui vorresti farlo, dalla sicurezza (se uno script di terze parti ha cambiato tali valori potrebbe causare problemi) al debug e alla comprensione del codice (è più difficile cambiare accidentalmente valori che non dovrebbero essere cambiati e fare confusione).

- -

All'inizio di JavaScript, le costanti non esistevano. Nel moderno JavaScript, abbiamo la parola chiave const, che ci consente di memorizzare valori che non possono mai essere modificati:

- -
const daysInWeek = 7;
-const hoursInDay = 24;
- -

const lavora esattamente come let, eccetto che non puoi dare aconst un nuovo valore. Nell'esempio seguente, la seconda linea genera un errore:

- -
const daysInWeek = 7;
-daysInWeek = 8;
- -

Sommario 

- -

Ormai dovresti conoscere una quantità ragionevole di variabili JavaScript e come crearle. Nel prossimo articolo, ci concentreremo sui numeri in modo più dettagliato, esaminando come eseguire la matematica di base in JavaScript.

- -

{{PreviousMenuNext("Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps/Maths", "Learn/JavaScript/First_steps")}}

- -

In this module

- - diff --git a/files/it/learn/javascript/first_steps/variables/index.html b/files/it/learn/javascript/first_steps/variables/index.html new file mode 100644 index 0000000000..38da82e607 --- /dev/null +++ b/files/it/learn/javascript/first_steps/variables/index.html @@ -0,0 +1,337 @@ +--- +title: Memorizzazione delle informazioni necessarie - Variabili +slug: Learn/JavaScript/First_steps/Variabili +translation_of: Learn/JavaScript/First_steps/Variables +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps")}}
+ +

Dopo aver letto gli ultimi due articoli, ora dovresti sapere cos'è JavaScript, cosa può fare per te, come lo usi insieme ad altre tecnologie web e quali sono le sue caratteristiche principali da un livello elevato. In questo articolo, passeremo alle basi reali, esaminando come lavorare con i blocchi di base di JavaScript - Variabili.

+ + + + + + + + + + + + +
Prerequisiti:Nozioni di base di informatica, comprensione di base di HTML e CSS, comprensione di cosa sia JavaScript
Obiettivo:Acquisire familiarità con le basi delle variabili JavaScript.
+ +

Strumenti di cui hai bisogno

+ +

In questo articolo ti verrà chiesto di digitare righe di codice per testare la tua comprensione del contenuto. Se si utilizza un browser desktop, il posto migliore per digitare il codice di esempio è la console JavaScript del browser (vedere Quali sono gli strumenti di sviluppo del browser per ulteriori informazioni su come accedere a questo strumento).

+ +

Cosa è una variabile?

+ +

Una variabile è un contenitore per un valore, come un numero che potremmo usare in una somma o una stringa che potremmo usare come parte di una frase. Ma una cosa speciale delle variabili è che i loro valori possono cambiare. Diamo un'occhiata a un semplice esempio:

+ +
<button>Press me</button>
+ +
const button = document.querySelector('button');
+
+button.onclick = function() {
+  let name = prompt('What is your name?');
+  alert('Hello ' + name + ', nice to see you!');
+}
+ +

{{ EmbedLiveSample('What_is_a_variable', '100%', 50, "", "", "hide-codepen-jsfiddle") }}

+ +

In questo esempio, premendo il bottone viene eseguito un paio di righe di codice. La prima riga apre una finestra sullo schermo che chiede al lettore di inserire il proprio nome, quindi memorizza il valore in una variabile. La seconda riga mostra un messaggio di benvenuto che include il loro nome, preso dal valore della variabile.

+ +

Per capire perché questo è così utile, pensiamo a come scrivere questo esempio senza usare una variabile. Finirebbe per assomigliare a questo:

+ +
let name = prompt('What is your name?');
+
+if (name === 'Adam') {
+  alert('Hello Adam, nice to see you!');
+} else if (name === 'Alan') {
+  alert('Hello Alan, nice to see you!');
+} else if (name === 'Bella') {
+  alert('Hello Bella, nice to see you!');
+} else if (name === 'Bianca') {
+  alert('Hello Bianca, nice to see you!');
+} else if (name === 'Chris') {
+  alert('Hello Chris, nice to see you!');
+}
+
+// ... and so on ...
+ +

Potresti non comprendere appieno la sintassi che stiamo usando (ancora!), ma dovresti essere in grado di farti un'idea - se non avessimo variabili disponibili, dovremmo implementare un blocco di codice gigante che controlla quale sia il nome inserito e quindi visualizzare il messaggio appropriato per quel nome. Questo è ovviamente molto inefficiente (il codice è molto più grande, anche solo per cinque scelte), e semplicemente non funzionerebbe - non è possibile memorizzare tutte le possibili scelte.

+ +

Le variabili hanno senso e, man mano che impari di più su JavaScript, inizieranno a diventare una seconda natura.

+ +

Un'altra cosa speciale delle variabili è che possono contenere qualsiasi cosa, non solo stringhe e numeri. Le variabili possono anche contenere dati complessi e persino intere funzioni per fare cose sorprendenti. Imparerai di più su questo mentre procedi.

+ +
+

Nota:Diciamo che le variabili contengono valori. Questa è una distinzione importante da fare. Le variabili non sono i valori stessi; sono contenitori per valori. Puoi pensare che siano come piccole scatole di cartone in cui puoi riporre le cose.

+
+ +

+ +

Dichiarare una variabile

+ +

Per usare una variabile, devi prima crearla - più precisamente, dobbiamo dichiarare la variabile. Per fare ciò, utilizziamo la parola chiave var o let seguita dal nome che vuoi chiamare la tua variabile:

+ +
let myName;
+let myAge;
+ +

Qui stiamo creando due variabili chiamate myName e myAge. Prova a digitare queste righe nella console del tuo browser web. Successivamente, prova a creare una (o due) variabili chiamandole a tuo piacimento.

+ +
+

Nota: In JavaScript, tutte le istruzioni del codice dovrebbero terminare con un punto e virgola (;) - il codice potrebbe funzionare correttamente per singole righe, ma probabilmente non funzionerà quando si scrivono più righe di codice insieme. Cerca di prendere l'abitudine di includerlo.

+
+ +

Puoi verificare se questi valori ora esistono nell'ambiente di esecuzione digitando solo il nome della variabile, ad es.

+ +
myName;
+myAge;
+ +

Al momento non hanno valore; sono contenitori vuoti. Quando si immettono i nomi delle variabili, è necessario ottenere un valore undefined. Se non esistono, verrà visualizzato un messaggio di errore: "try typing in

+ +
scoobyDoo;
+ +
+

Nota: Non confondere una variabile esistente ma che non ha alcun valore definito con una variabile che non esiste affatto: sono cose molto diverse. Nell'analogia della scatola che hai visto sopra, non esistere significherebbe che non esiste una scatola (variabile) in cui inserire un valore. Nessun valore definito significherebbe che c'è una scatola, ma non ha alcun valore al suo interno.

+
+ +

Inizializzare una Variabile

+ +

Una volta che hai dichiarato una variabiale, puoi inizializzarla con un valore. Puoi farlo digitando il nome della variabile, seguito dal segno di uguale (=), seguito poi dal valore che vuoi dargli. Per esempio: 

+ +
myName = 'Chris';
+myAge = 37;
+ +

Prova a tornare alla console ora e digita queste linee. Dovresti vedere il valore che hai assegnato alla variabile restituita nella console per confermarla, in ogni caso. Ancora una volta, puoi restituire i valori delle variabili semplicemente digitandone il nome nella console. Riprova:

+ +
myName;
+myAge;
+ +

Puoi dichiarare e inizializzare una variabile nello stesso tempo, come questo: 

+ +
let myDog = 'Rover';
+ +

Questo è probabilmente ciò che farai la maggior parte del tempo, essendo il metodo più veloce rispetto alle due azioni separate. 

+ +

Differenza tra var e let

+ +

A questo punto potresti pensare "perchè abbiamo bisogno di due keywords (parole chiavi) per definire le variabili?? Perchè avere  var e let?".

+ +

Le ragioni sono in qualche modo storiche.  Ai tempi della creazione di JavaScript, c'era solo var. Questa funziona fondamentalmente in molti casi, ma ha alcuni problemi nel modo in cui funziona — il suo design può qualche volta essere confuso o decisamente fastidioso. Così,  let è stata creata nella moderna versione di JavaScript, una nuova keyword (parola chiave) per creare variabili che funzionano differentemente da var, risolvendo i suoi problemi nel processo.

+ +

Di seguito sono spiegate alcune semplici differenze. Non le affronteremo ora tutte, ma inizierai a scoprirle mentre impari più su JavaScript. (se vuoi davvero leggere su di loro ora, non esitare a controllare la nostra pagina di riferimento let).

+ +

Per iniziare, se scrivi un multilinea JavaScript che dichiara e inizializza una variabile, puoi effettivamente dichiarare una variabile con var dopo averla inizializzata funzionerà comunque. Per esempio:

+ +
myName = 'Chris';
+
+function logName() {
+  console.log(myName);
+}
+
+logName();
+
+var myName;
+ +
+

Nota:  Questo non funziona quando digiti linee individuali in una JavaScript console, ma solo quando viene eseguita in linee multiple in un documento web. 

+
+ +

Questo lfunziona a causa di hoisting — leggi var hoisting per maggiori dettagli sull'argomento. 

+ +

Hoisting non funziona con  let. Se cambiamo var a let  nell'esempio precedente, da un errore. Questa è una buona cosa — dichiarare una variabile dopo che averla inizializzata si traduce in un codice confuso e difficile da capire.

+ +

In secondo luogo, quando usi  var, puoi dichiarare la stessa variabile tutte le volte che vuoi, ma con  let non puoi. Quanto segue funzionerebbe: 

+ +
var myName = 'Chris';
+var myName = 'Bob';
+ +

Ma il seguente darebbe un errore sulla seconda linea: 

+ +
let myName = 'Chris';
+let myName = 'Bob';
+ +

Dovresti invece fare questo: 

+ +
let myName = 'Chris';
+myName = 'Bob';
+ +

Ancora una volta, questa è un scelta linquistica più corretta. Non c'è motivo di ridichiarare le variabili: rende le cose più confuse.

+ +

Per queste ragioni e altre, noi raccomandiamo di usare let il più possibile nel tuo codice, piuttosto che var. Non ci sono motivi per usare var, a meno che non sia necessario supportare vecchie versioni di Internet Explorer proprio con il tuo codice.  ( let non è supportato fino fino alla versione 11, il moderno  Windows Edge browser supporta bene let).

+ +
+

Nota:  Attualmente stiamo aggiornando il corso per usare più  let piuttosto che var. Abbi pazienza con noi!

+
+ +

Aggiornare una variabile

+ +

Una volta che una variabile è stata inizializzata con un valore, puoi cambiarlo (o aggiornarlo) dandogli semplicemente un valore differente. Prova a inserire le seguenti linee nella tua console: 

+ +
myName = 'Bob';
+myAge = 40;
+ +

Regole di denominazione delle variabili

+ +

Puoi chiamare una variabile praticamente come preferisci, ma ci sono delle limitazioni. Generalmente, dovresti limitarti ad usare i caratteri latini (0-9, a-z, A-Z) e l'underscore ( _ ).

+ + + +
+

Nota: Puoi trovare un elenco abbastanza completo di parole riservate da evitare a Lexical grammar — keywords.

+
+ +

Esempi di nomi corretti: 

+ +
age
+myAge
+init
+initialColor
+finalOutputValue
+audio1
+audio2
+ +

Esempi di nomi errati: 

+ +
1
+a
+_12
+myage
+MYAGE
+var
+Document
+skjfndskjfnbdskjfb
+thisisareallylongstupidvariablenameman
+ +

Esempi di nomi soggetti a errori: 

+ +
var
+Document
+
+ +

Prova a creare qualche altra variabile ora, tenendo presente le indicazioni sopra riportate. 

+ +

Tipi di Variabili

+ +

Esistono diversi tipi di dati che possiamo archiviare in variabili. In questa sezione li descriveremo in breve, quindi in articoli futuri, imparerai su di loro in modo più dettagliato.

+ +

Finora abbiamo esaminato i primi due, ma che ne sono altri. 

+ +

Numeri

+ +

Puoi memorizzare numeri nelle variabili, numeri interi come 30  o numeri decimali come 2,456 (chiamati anche numeri mobili o in virgola mobile). Non è necessario dichiarare i tipi di variabili in JavaScript, a differenza di altri linguaggi di programmazione. Quando dai a una variabile un valore numerico, non si usa le virgolette:

+ +
let myAge = 17;
+ +

Stringhe

+ +

Le stringhe sono pezzi di testo. Quando dai a una variabile un valore di una stringa, hai bisogno di metterla in singole o doppie virgolette; altrimenti, JavaScript cerca di interpretarlo come un altro nome della variabile. 

+ +
let dolphinGoodbye = 'So long and thanks for all the fish';
+ +

Booleani

+ +

I booleani sono dei valori vero/falso — possono avere due valori true o false. Questi sono generalmente usati per testare delle condizioni, dopo di che il codice viene eseguito come appropriato . Ad esempio, un semplice caso sarebbe:

+ +
let iAmAlive = true;
+ +

Considerando che in realtà sarebbe usato più così:

+ +
let test = 6 < 3;
+ +

Questo sta usando l'operatore "minore di" (<) per verificare se 6 è minore di 3. Come ci si potrebbe aspettare, restituisce false, perché 6 non è inferiore a 3! Imparerai molto di più su questi operatori più avanti nel corso.

+ +

Arrays

+ +

Un  array è un singolo oggetto che contiene valori multipli racchiusi in parentesi quadre e separate da virgole. Prova a inserire le seguenti linee nella tua console:

+ +
let myNameArray = ['Chris', 'Bob', 'Jim'];
+let myNumberArray = [10, 15, 40];
+ +

Una volta che gli  arrays sono definiti,  è possibile accedere a ciascun valore in base alla posizione all'interno dell'array. Prova queste linee:

+ +
myNameArray[0]; // should return 'Chris'
+myNumberArray[2]; // should return 40
+ +

Le parentesi quadre specificano un valore di indice corrispondente alla posizione del valore che si desidera restituire. Potresti aver notato che gli array in JavaScript sono indicizzatI a zero: il primo elemento si trova all'indice 0.

+ +

Puoi imparare molto sugli arrays in un futuro articolo.

+ +

Oggetti

+ +

In programmazione, un oggetto è una struttura di codice che modella un oggetto reale. Puoi avere un oggetto semplice che rappresenta una box e contiene informazioni sulla sua larghezza, lunghezza e altezza, oppure potresti avere un oggetto che rappresenta una persona e contenere dati sul suo nome, altezza, peso, quale lingua parla, come salutarli
+ e altro ancora.

+ +

Prova a inserire il seguente codice nella tua console:

+ +
let dog = { name : 'Spot', breed : 'Dalmatian' };
+ +

Per recuperare le informazioni archiviate nell'oggetto, è possibile utilizzare la seguente sintassi:

+ +
dog.name
+ +

Per ora non esamineremo più gli oggetti: puoi saperne di più su quelli in un  modulo futuro.

+ +

Tipizzazione dinamica

+ +

JavaScript è un "linguaggio a tipizzazione dinamica", questo significa che,  a differenza di altri linguaggi, non è necessario specificare quale tipo di dati conterrà una variabile (numeri, stringhe, array, ecc.).

+ +

Ad esempio, se dichiari una variabile e le assegni un valore racchiuso tra virgolette, il browser considera la variabile come una stringa:

+ +
let myString = 'Hello';
+ +

Anche se il valore contiene numeri, è comunque una stringa, quindi fai attenzione:

+ +
let myNumber = '500'; // oops, questa è ancora una stringa
+typeof myNumber;
+myNumber = 500; // molto meglio - adesso questo è un numero
+typeof myNumber;
+ +

Prova a inserire le quattro righe sopra nella console una per una e guarda quali sono i risultati. Noterai che stiamo usando un speciale operatore chiamato typeof- questo restituisce il tipo di dati della variabile che scrivi dopo. La prima volta che viene chiamato, dovrebbe restituire string, poiché a quel punto la variabile myNumber contiene una stringa, '500'.
+ Dai un'occhiata e vedi cosa restituisce la seconda volta che lo chiami.

+ +

Costanti in JavaScript

+ +

Molti linguaggi di programmazione hanno il concetto di costante - un valore che una volta dichiarato non può mai essere modificato. Ci sono molte ragioni per cui vorresti farlo, dalla sicurezza (se uno script di terze parti ha cambiato tali valori potrebbe causare problemi) al debug e alla comprensione del codice (è più difficile cambiare accidentalmente valori che non dovrebbero essere cambiati e fare confusione).

+ +

All'inizio di JavaScript, le costanti non esistevano. Nel moderno JavaScript, abbiamo la parola chiave const, che ci consente di memorizzare valori che non possono mai essere modificati:

+ +
const daysInWeek = 7;
+const hoursInDay = 24;
+ +

const lavora esattamente come let, eccetto che non puoi dare aconst un nuovo valore. Nell'esempio seguente, la seconda linea genera un errore:

+ +
const daysInWeek = 7;
+daysInWeek = 8;
+ +

Sommario 

+ +

Ormai dovresti conoscere una quantità ragionevole di variabili JavaScript e come crearle. Nel prossimo articolo, ci concentreremo sui numeri in modo più dettagliato, esaminando come eseguire la matematica di base in JavaScript.

+ +

{{PreviousMenuNext("Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps/Maths", "Learn/JavaScript/First_steps")}}

+ +

In this module

+ + diff --git a/files/it/learn/javascript/first_steps/what_went_wrong/index.html b/files/it/learn/javascript/first_steps/what_went_wrong/index.html new file mode 100644 index 0000000000..1fa4343de8 --- /dev/null +++ b/files/it/learn/javascript/first_steps/what_went_wrong/index.html @@ -0,0 +1,253 @@ +--- +title: Cosa è andato storto? Problemi con Javacript +slug: Learn/JavaScript/First_steps/Cosa_è_andato_storto +translation_of: Learn/JavaScript/First_steps/What_went_wrong +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps")}}
+ +

Quando abbiamo realizzato il gioco "Indovina il numero"  nell'articole precedente, potresti esserti accorto che non funziona. Niente paura — questo articolo mira ad aiutarti e non farti strappare i capelli per tali problemi, fornendoti alcuni semplici aiuti su come trovare e correggere gli errori in JavaScript .

+ + + + + + + + + + + + +
Prerequisites:Basic computer literacy, a basic understanding of HTML and CSS, an understanding of what JavaScript is.
Objective:To gain the ability and confidence to start fixing simple problems in your own code.
+ +

Types of error

+ +

Generally speaking, when you do something wrong in code, there are two main types of error that you'll come across:

+ + + +

Okay, so it's not quite that simple — there are some other differentiators as you drill down deeper. But the above classifications will do at this early stage in your career. We'll look at both of these types going forward.

+ +

An erroneous example

+ +

To get started, let's return to our number guessing game — except this time we'll be exploring a version that has some deliberate errors introduced. Go to Github and make yourself a local copy of number-game-errors.html (see it running live here).

+ +
    +
  1. To get started, open the local copy inside your favourite text editor, and your browser.
    2. +
  2. Try playing the game — you'll notice that when you press the "Submit guess" button, it doesn't work!
    3. +
+ +
+

Note: You might well have your own version of the game example that doesn't work, which you might want to fix! We'd still like you to work through the article with our version, so that you can learn the techniques we are teaching here. Then you can go back and try to fix your example.

+
+ +

At this point, let's consult the developer console to see if we can see any syntax errors, then try to fix them. You'll learn how below.

+ +

Fixing syntax errors

+ +

Earlier on in the course we got you to type some simple JavaScript commands into the developer tools JavaScript console (if you can't remember how to open this in your browser, follow the previous link to find out how). What's even more useful is that the console gives you error messages whenever a syntax error exists inside the JavaScript being fed into the browser's JavaScript engine. Now let's go hunting.

+ +
    +
  1. Go to the tab that you've got number-game-errors.html open in, and open your JavaScript console. You should see an error message along the following lines:
    2. +
  2. This is a pretty easy error to track down, and the browser gives you several useful bits of information to help you out (the screenshot above is from Firefox, but other browsers provide similar information). From left to right, we've got: +
      +
    • A red "x" to indicate that this is an error.
      • +
    • An error message to indicate what's gone wrong: "TypeError: guessSubmit.addeventListener is not a function"
      • +
    • A "Learn More" link that links through to an MDN page that explains what this error means in huge amounts of detail.
      • +
    • The name of the JavaScript file, which links through to the Debugger tab of the devtools. If you follow this link, you'll see the exact line where the error is highlighted.
      • +
    • The line number where the error is, and the character number in that line where the error is first seen. In this case, we've got line 86, character number 3.
      • +
    +
    3. +
  3. If we look at line 86 in our code editor, we'll find this line: + 
    guessSubmit.addeventListener('click', checkGuess);
    +
    4. +
  4. The error message says "guessSubmit.addeventListener is not a function", so we've probably spelled something wrong. If you are not sure of the correct spelling of a piece of syntax, it is often good to look up the feature on MDN. The best way to do this currently is to search for "mdn name-of-feature" on your favourite search engine. Here's a shortcut to save you some time in this instance: addEventListener().
    5. +
  5. So, looking at this page, the error appears to be that we've spelled the function name wrong! Remember that JavaScript is case sensitive, so any slight difference in spelling or casing will cause an error. Changing addeventListener to addEventListener should fix this. Do this now.
    6. +
+ +
+

Note: See our TypeError: "x" is not a function reference page for more details about this error.

+
+ +

Syntax errors round two

+ +
    +
  1. Save your page and refresh, and you should see the error has gone.
    2. +
  2. Now if you try to enter a guess and press the Submit guess button, you'll see ... another error!
    3. +
  3. This time the error being reported is "TypeError: lowOrHi is null", on line 78. +
    Note: Null is a special value that means "nothing", or "no value". So lowOrHi has been declared and initialised, but not with any meaningful value — it has no type or value.
    + +
    Note: This error didn't come up as soon as the page was loaded because this error occurred inside a function (inside the checkGuess() { ... } block). As you'll learn in more detail in our later functions article, code inside functions runs in a separate scope than code outside functions. In this case, the code was not run and the error was not thrown until the checkGuess() function was run by line 86.
    +
    4. +
  4. Have a look at line 78, and you'll see the following code: + 
    lowOrHi.textContent = 'Last guess was too high!';
    +
    5. +
  5. This line is trying to set the textContent property of the lowOrHi variable to a text string, but it's not working because lowOrHi does not contain what it's supposed to. Let's see why this is — try searching for other instances of lowOrHi in the code. The earliest instance you'll find in the JavaScript is on line 48: + 
    var lowOrHi = document.querySelector('lowOrHi');
    +
    6. +
  6. At this point we are trying to make the variable contain a reference to an element in the document's HTML. Let's check whether the value is null after this line has been run. Add the following code on line 49: + 
    console.log(lowOrHi);
    + +
    +

    Note: console.log() is a really useful debugging function that prints a value to the console. So it will print the value of lowOrHi to the console as soon as we have tried to set it in line 48.

    +
    +
    7. +
  7. Save and refesh, and you should now see the console.log() result in your console. Sure enough, lowOrHi's value is null at this point, so there is definitely a problem with line 48.
    8. +
  8. Let's think about what the problem could be. Line 48 is using a document.querySelector() method to get a reference to an element by selecting it with a CSS selector. Looking further up our file, we can find the paragraph in question: + 
    <p class="lowOrHi"></p>
    +
    9. +
  9. So we need a class selector here, which begins with a dot (.), but the selector being passed into the querySelector() method in line 48 has no dot. This could be the problem! Try changing lowOrHi to .lowOrHi in line 48.
    10. +
  10. Try saving and refreshing again, and your console.log() statement should return the <p> element we want. Phew! Another error fixed! You can delete your console.log() line now, or keep it to reference later on — your choice.
    11. +
+ +
+

Note: See our TypeError: "x" is (not) "y" reference page for more details about this error.

+
+ +

Syntax errors round three

+ +
    +
  1. Now if you try playing the game through again, you should get more success — the game should play through absolutely fine, until you end the game, either by guessing the right number, or by running out of lives.
    2. +
  2. At that point, the game fails again, and the same error is spat out that we got at the beginning — "TypeError: resetButton.addeventListener is not a function"! However, this time it's listed as coming from line 94.
    3. +
  3. Looking at line number 94, it is easy to see that we've made the same mistake here. We again just need to change addeventListener to .addEventListener. Do this now.
    4. +
+ +

A logic error

+ +

At this point, the game should play through fine, however after playing through a few times you'll undoubtedly notice that the "random" number you've got to guess is always 1. Definitely not quite how we want the game to play out!

+ +

There's definitely a problem in the game logic somewhere — the game is not returning an error; it just isn't playing right.

+ +
    +
  1. Search for the randomNumber variable, and the lines where the random number is first set. The instance that stores the random number that we want to guess at the start of the game should be around line number 44: + + 
    var randomNumber = Math.floor(Math.random()) + 1;
    + And the one that generates the random number before each subsequent game is around line 113:
    2. +
  2. + 
    randomNumber = Math.floor(Math.random()) + 1;
    +
    3. +
  3. To check whether these lines are indeed the problem, let's turn to our friend console.log() again — insert the following line directly below each of the above two lines: + 
    console.log(randomNumber);
    +
    4. +
  4. Save and refresh, then play a few games — you'll see that randomNumber is equal to 1 at each point where it is logged to the console.
    5. +
+ +

Working through the logic

+ +

To fix this, let's consider how this line is working. First, we invoke Math.random(), which generates a random decimal number between 0 and 1, e.g. 0.5675493843.

+ +
Math.random()
+ +

Next, we pass the result of invoking Math.random() through Math.floor(), which rounds the number passed to it down to the nearest whole number. We then add 1 to that result:

+ +
Math.floor(Math.random()) + 1
+ +

Rounding a random decimal number between 0 and 1 down will always return 0, so adding 1 to it will always return 1.  We need to multiply the random number by 100 before we round it down. The following would give us a random number between 0 and 99:

+ +
Math.floor(Math.random()*100);
+ +

Hence us wanting to add 1, to give us a random number between 1 and 100:

+ +
Math.floor(Math.random()*100) + 1;
+ +

Try updating both lines like this, then save and refresh — the game should now play like we are intending it to!

+ +

Other common errors

+ +

There are other common errors you'll come across in your code. This section highlights most of them.

+ +

SyntaxError: missing ; before statement

+ +

This error generally means that you have missed a semi colon at the end of one of your lines of code, but it can sometimes be more cryptic. For example, if we change this line inside the checkGuess() function:

+ +
var userGuess = Number(guessField.value);
+ +

to

+ +
var userGuess === Number(guessField.value);
+ +

It throws this error because it thinks you are trying to do something different. You should make sure that you don't mix up the assignment operator (=) — which sets a variable to be equal to a value — with the strict equality operator (===), which tests whether one value is equal to another, and returns a true/false result.

+ +
+

Note: See our SyntaxError: missing ; before statement reference page for more details about this error.

+
+ +

The program always says you've won, regardless of the guess you enter

+ +

This could be another symptom of mixing up the assignment and strict equality operators. For example, if we were to change this line inside checkGuess():

+ +
if (userGuess === randomNumber) {
+ +

to

+ +
if (userGuess = randomNumber) {
+ +

the test would always return true, causing the program to report that the game has been won. Be careful!

+ +

SyntaxError: missing ) after argument list

+ +

This one is pretty simple — it generally means that you've missed the closing parenthesis off the end of a function/method call.

+ +
+

Note: See our SyntaxError: missing ) after argument list reference page for more details about this error.

+
+ +

SyntaxError: missing : after property id

+ +

This error usually relates to an incorrectly formed JavaScript object, but in this case we managed to get it by changing

+ +
function checkGuess() {
+ +

to

+ +
function checkGuess( {
+ +

This has caused the browser to think that we are trying to pass the contents of the function into the function as an argument. Be careful with those parentheses!

+ +

SyntaxError: missing } after function body

+ +

This is easy — it generally means that you've missed one of your curly braces from a function or conditional structure. We got this error by deleting one of the closing curly braces near the bottom of the checkGuess() function.

+ +

SyntaxError: expected expression, got 'string' or SyntaxError: unterminated string literal

+ +

These errors generally mean that you've missed off a string value's opening or closing quote mark. In the first error above, string would be replaced with the unexpected character(s) that the browser found instead of a quote mark at the start of a string. The second error means that the string has not been ended with a quote mark.

+ +

For all of these errors, think about how we tackled the examples we looked at in the walkthrough. When an error arises, look at the line number you are given, go to that line and see if you can spot what's wrong. Bear in mind that the error is not necessarily going to be on that line, and also that the error might not be caused by the exact same problem we cited above!

+ +
+

Note: See our SyntaxError: Unexpected token and SyntaxError: unterminated string literal reference pages for more details about these errors.

+
+ +

Summary

+ +

So there we have it, the basics of figuring out errors in simple JavaScript programs. It won't always be that simple to work out what's wrong in your code, but at least this will save you a few hours of sleep and allow you to progress a bit faster when things don't turn out right earlier on in your learning journey.

+ +

See also

+ +
+ +
+ +

{{PreviousMenuNext("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps")}}

+ +

In this module

+ + diff --git a/files/it/learn/javascript/howto/index.html b/files/it/learn/javascript/howto/index.html new file mode 100644 index 0000000000..275eb0cf8d --- /dev/null +++ b/files/it/learn/javascript/howto/index.html @@ -0,0 +1,291 @@ +--- +title: Risolvere problematiche frequenti nel tuo codice JavaScript +slug: Learn/JavaScript/Comefare +tags: + - Principianti + - imparare +translation_of: Learn/JavaScript/Howto +--- +
R{{LearnSidebar}}
+ +

I link seguenti indicano soluzioni a problematiche frequenti in cui puoi imbatterti quando programmi in javaScript.

+ +

Errori comuni dei principianti

+ +

Ortografia corretta

+ +

Se il tuo codice non funziona e/o il browser segnala che qualcosa non è definito, controlla di aver scritto tutti i tuoi nomi di variabili, nomi di funzioni, etc. correttamente.

+ +

Alcune comuni funzioni built-in del browser che causano problemi sono: 

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
CorrettoSbagliato
getElementsByTagName()getElementbyTagName()
getElementsByName()getElementByName()
getElementsByClassName()getElementByClassName()
getElementById()getElementsById()
+ +

Posizione del punto e virgola

+ +

Devi assicurarti di non aver posizionato il punto e virgola nel posto sbagliato, ad esempio :

+ + + + + + + + + + + + +
CorrettoSbagliato
elem.style.color = 'red';elem.style.color = 'red;'
+ +

Funzioni

+ +

Ci sono alcune cose che possono andare storte con le funzioni.

+ +

Uno degli errori più comuni è dichiarare la funzione ma non chiamarla da nessuna parte. Per esempio:

+ +
function myFunction() {
+  alert('This is my function.');
+};
+ +

Questo codice non farà nulla, a meno che non venga chiamato con la seguente istruzione:

+ +
myFunction();
+ +

Ambito (scope) della funzione

+ +

Ricorda che le funzioni hanno il loro specifico ambito (scope) — non è possibile accedere ad una variabile definita all'interno di una funzione al di fuori di essa, a meno di dichiararla globalmente (ossia fuori da ogni funzione), oppure restituire il valore (return) dalla funzione stessa.

+ +

Eseguire codice posto dopo un istruzione return

+ +

Ricordati anche che quando incontra l'istruzione return, l'interprete JavaScript esce dalla funzione — nessun codice all'interno della funzione verrà eseguito dopo l'istruzione return.

+ +

Infatti, alcuni browsers (come Firefox) ti daranno un messaggio di errore nella console dello sviluppatore se hai inserito codice dopo un'istruzione return. Firefox restituirà "unreachable code after return statement" (codice irraggiungibile dopo l'istruzione return).

+ +

Notazione per gli oggetti opposto al normale assegnamento

+ +

Quando fai un normale assegnamento in JavaScript, usi un singolo simbolo di uguale, ad es. :

+ +
const myNumber = 0;
+ +

Con gli Oggetti occorre invece prestare attenzione alla corretta sintassi. L'oggetto deve essere definito delimitandolo con parentesi graffe, i nomi dei membri devono essere separati dai loro valori con i due punti e i membri tra loro da virgole. Per esempio:

+ +
const myObject = {
+  name: 'Chris',
+  age: 38
+}
+ +

Definizioni Base

+ +
+
+ +
+ +
+ +
+
+ +

Casi base d'uso

+ +
+
+

Generali

+ + + +

Variabili

+ + + +

Tipi di dati numerici

+ + + +

Stringhe

+ + +
+ +
+

Arrays

+ + + +

Debugging JavaScript

+ + + +

For more information on JavaScript debugging, see Handling common JavaScript problems. Also, see Other common errors for a description of common errors.

+ +

Making decisions in code

+ + + +

Looping/iteration

+ + +
+
+ +

Intermediate use cases

+ +
+
+

Functions

+ + + +

Objects

+ + + +

JSON

+ + +
+ +
+

Events

+ + + +

Object-oriented JavaScript

+ + + +

Web APIs

+ + +
+
diff --git a/files/it/learn/javascript/objects/basics/index.html b/files/it/learn/javascript/objects/basics/index.html new file mode 100644 index 0000000000..539df5c2e0 --- /dev/null +++ b/files/it/learn/javascript/objects/basics/index.html @@ -0,0 +1,242 @@ +--- +title: Basi degli oggetti JavaScript +slug: Learn/JavaScript/Oggetti/Basics +translation_of: Learn/JavaScript/Objects/Basics +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}
+ +

Nel primo articolo sugli oggetti JavaScript, vedremo la sintassi fondamentale degli oggetti JavaScript, e rivedremo alcune funzionalità di JavaScript che abbiamo già esamintato in precedenza in questo corso, rimarcando il fatto che molte delle funzionalità che abbiamo già incontrato son di fatto oggetti.

+ + + + + + + + + + + + +
Prerequisiti:Conoscenza basilare dei computers, comprensione di base di HTML e CSS, familiarità con le basi di JavaScript (vedi Primi passi e Costruire blocchi).
Obiettivo:Capire le basi della teoria che stà dietro alla programmazione object-oriented, come questa si relazione con JavaScript ("la maggior parte delle cose sono oggetti"), e come incominciare a lavorare con gli oggetti JavaScript.
+ +

Basi degli oggetti

+ +

Un oggetto è una collezione di dati e/o funzionalità correlati (che di solito consiste in alcune variabili e funzioni — che sono chiamate proprietà e metodi quando fanno parte di oggetti.) Proviamo con un esempio per vedere come si comportano.

+ +

Per incomiciare, facciamo una copia locale del nostro file oojs.html. Questo contiene un piccolissimo — elemento {{HTMLElement("script")}} che possiamo usare per scrivere il nostro sorgente, un elemento {{HTMLElement("input")}} per insrire istruzioni di esempio quando la pagina viene visualizzata, alcune definizioni di variabili, ed una funzione che invia ciò che si inserisce in input in un elemento {{HTMLElement("p")}}. Useremo questo come base per esplorare i concetti fondamentali della sintassi degli oggetti.

+ +

Come molte cose in JavaScript, creare un oggetto spesso inizia definendo ed inizializzando una variabile. Prova ad inserire ciò che segue sotto al codice JavaScript già presente nel file, quindi salva e ricarica:

+ +
var person = {};
+ +

Se scrivi person nella casella di testo e premi il pulsante, dovresti ottenere il seguente risulatato:

+ +
[object Object]
+ +

Congratulazioni, hai appena creato il tuo primo oggetto. Ben fatto! Ma questo è un oggetto vuoto, perciò non ci possiamo fare molto. Aggiorniamo il nostro oggetto in questo modo:

+ +
var person = {
+  name: ['Bob', 'Smith'],
+  age: 32,
+  gender: 'male',
+  interests: ['music', 'skiing'],
+  bio: function() {
+    alert(this.name[0] + ' ' + this.name[1] + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');
+  },
+  greeting: function() {
+    alert('Hi! I\'m ' + this.name[0] + '.');
+  }
+};
+
+ +

Dopo aver salvato e ricaricato la pagina, prova ad inserire alcuni di questi nella casella di input:

+ +
person.name[0]
+person.age
+person.interests[1]
+person.bio()
+person.greeting()
+ +

Ora hai ottenuto alcuni dati e funzionalità nel tuo oggetto, ed ora puoi accedere ad essi con alcune sintassi semplici e graziose!

+ +
+

Nota: Se hai problemi ad ottenere questo risultato, prova comparare quello che hai scritto con la nostra versione — vedi oojs-finished.html (e anche la versione funzionante). Un errore comune quando si inizia con gli oggetti è quello di mettere una virgola dopo l'ultimo elenemto — questo genera un errore.

+
+ +

Quindi che cosa è successo qui? Bene, un oggetto è composto da svariati membri, ogniuno dei quali ha un nome (es. name e age sopra), ed un valore (es, ['Bob', 'Smith'] e 32). Ogni coppia nome/valore deve essere separata da una virgola, ed ogni nome e valore devono essere separati dai due punti. La sintassi segue sempre questo schema:

+ +
var objectName = {
+  member1Name: member1Value,
+  member2Name: member2Value,
+  member3Name: member3Value
+}
+ +

Il valore di un membro di un oggetto può essere qualsiasi cosa — nel nostro oggetto persona abbiamo una strigna, un numero, due array e due funzioni. I primi quatto elementi sono dati e ad essi ci si riferisce come le proprietà (properties) del oggetto. Gli ultimi due elementi sono funzioni che consentono all'oggetto di fare qualcosa con i dati, e ad esse ci si riferisce come i metodi (methods) dell'oggetto.

+ +

Un oggetto come questo viene considerato un oggetto letterale — noi abbiamo scritto letteralmente il conenuto dell'oggetto nel momento che lo abbiamo creato. Questo è in contrasto con l'istanziazione di oggetti da classi, che vedremo un po' più avanti.

+ +

È molto comune creare oggetti letterali quando si desidera trasferire una serie di dati relazionati e strutturati in qualche maniera, ad esempio per inviare richieste al server per inserire i dati nel database. Inviare un singolo oggetto è molto più efficiente che inviare i dati individualmente, ed è più facile lavorarci rispetto agli array, perché i dati vengono identificati per nome.

+ +

Notazione puntata

+ +

Sopra, abbiamo acceduto alle proprietà ed ai metodi degli oggetti utilizzando la notazione puntata. Il nome dell'oggetto (person) serve da namespace — e deve essere insirito prima per accedere a qualsiasi cosa incapsulata nell'oggetto. Quindi si scrive il punto seguito dell'elemento a cui si vuole accedere — 
+ questo può essere il nome di una proprietà semplice, un elemento di una proprietà di tipo array, o una chiamata ad uno dei metodi dell oggetto, ad esempio:

+ +
person.age
+person.interests[1]
+person.bio()
+ +

Namespaces nidificati

+ +

È anche possibile assegnare un altro oggetto ad un membro di un oggetto. Ad esempio prova a cambiare la property name da

+ +
name: ['Bob', 'Smith'],
+ +

a

+ +
name : {
+  first: 'Bob',
+  last: 'Smith'
+},
+ +

In questo modo abbiamo effettivamente creato un  sotto-namespace. Può sembrare complesso, ma non lo è veramente — per accedere a questi devi solo concatenare un ulteriore passo alla fine con un altro punto. Prova questi:

+ +
person.name.first
+person.name.last
+ +

Importante: A questo punto devi anche cambiare il codice dei tuoi metodi e cambiare ogni istanza di

+ +
name[0]
+name[1]
+ +

con

+ +
name.first
+name.last
+ +

Altrimenti i tuoi metodi non funzioneranno più.

+ +

Notazione con parentesi quadre

+ +

C'è un altro modo per accedere alle proprietà degli oggetti — usando la notazione delle parentesi quadre. Invece di usare questi:

+ +
person.age
+person.name.first
+ +

Puoi usare

+ +
person['age']
+person['name']['first']
+ +

Questo assomiglia molto al modo in cui accedi agli elementi di un array, ed è sostanzialmente la stessa cosa — invece di usare un indice numerico per scegliere un elemento, stai usando il nome associato ad ogni valore membro. Non c'è da meravigliarsi che gli oggetti a volte vengono chiamati array associativi — essi infatti associano le stringhe ai valori nello stesso modo in cui gli arrays associano i numeri ai valori.

+ +

Assegnare i membri degli oggetti

+ +

Fino a qui abbiamo solo recuperato (get) valori dei menbri degli oggetti — si possono anche assegnare (set) i valori ai menbri degli oggetti semplicemente dichiarando i membri che si desidera assegnare (usando la notazione puntata o con quadre), cone ad esempio:

+ +
person.age = 45;
+person['name']['last'] = 'Cratchit';
+ +

Prova ad inserire queste linee e poi rileggi i dati nuovamente per vedere che cosa è cambiato:

+ +
person.age
+person['name']['last']
+ +

Setting members doesn't just stop at updating the values of existing properties and methods; you can also create completely new members. Try these:

+ +
person['eyes'] = 'hazel';
+person.farewell = function() { alert("Bye everybody!"); }
+ +

Ora possiamo provare i nostri nuovi membri:

+ +
person['eyes']
+person.farewell()
+ +

Un utile aspetto della notazione con parentesi quadre è che non solo può essere usata per assegnare valori dinamicamente, ma anche per assegnare i nomi dei mebri. Ad esempio se desideriamo che gli utenti siano in grado di assegnare tipi di dato personalizzati scrivendo il nome della proprietà ed il suo valore in due campi di input, possiamo oggenere questi valori in questo modo:

+ +
var myDataName = nameInput.value;
+var myDataValue = nameValue.value;
+ +

e possiamo aggiungere questi nomi e valori nel nostro oggetto person in questo modo:

+ +
person[myDataName] = myDataValue;
+ +

Puoi testare questo aggiungendo le linee seguenti nel tuo codice appena prima della parentesi graffa chiusa nel oggetto person:

+ +
var myDataName = 'height';
+var myDataValue = '1.75m';
+person[myDataName] = myDataValue;
+ +

Ora prova s salvare e ricaricare la pagina ed inserisci ciò che segue nella casella di testo:

+ +
person.height
+ +

Non è possibile aggiungere proprità ad oggetti con il metodo descritto usando la notazione puntata, che accetta solo nomi aggiunti in modo letterale e non valori di variabili puntate da un nome.

+ +

Che cos'è "this"?

+ +

Forse ti sei accorto di qualcosa di leggermente strano nei nostri metodi. Guarda questo per esempio:

+ +
greeting: function() {
+  alert('Hi! I\'m ' + this.name.first + '.');
+}
+ +

Forse ti sei chiesto che cos'è "this". La parola chiave this fa riferimento all'oggetto in cui abbiamo scritto il codice — perciò in questo caso this è equivalente a person. Quindi perché non scrivere invece semplicemente person? Come vedrai nell'articolo Object-oriented JavaScript per principianti quando incominceremo a creare costruttori ecc., this è molto utile — perché garantisce sempre che venga trovato il valore corretto quando il contesto cambia (es. due diverse istanze dell'oggetto person possono avere nomi diversi, ma vogliamo accedere al nome corretto quando vogliamo fargli gli auguri).

+ +

Proviamo ad illustrare ciò che intendiamo con un paio di oggetti person semplificati:

+ +
var person1 = {
+  name: 'Chris',
+  greeting: function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  }
+}
+
+var person2 = {
+  name: 'Brian',
+  greeting: function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  }
+}
+ +

In questo caso, person1.greeting() visualizza "Hi! I'm Chris."; e person2.greeting() "Hi! I'm Brian.", anche se il codice del metodo è esattamente identico. Come abbiamo detto prima, this fa riferimento al valore interno all'oggetto — questo non è molto importante per gli oggetti letterali scritti a mano, ma lo diventa quando gli oggetti vengono generati dinamicamente (per esempio usando i costruttori). Diventerà più chiaro in seguito.

+ +

Finora hai usato oggetti tutto il tempo

+ +

Avendo provato questi esempi, probabilmente hai pensato che la notazione a punto fin qui usata è molto familiare. Questo perché l'hai già usata durante il corso! Tutte le volte che abbiamo lavorato con un esempio che usa le API built-in del browser o oggetti JavaScript, abbiamo usato oggetti, perché quelle funzionalità sono state costruite usando lo stesso tipo di strutture di oggetti che stiamo vedendo qui, anche se molto più complesse dei nostri semplici esempi.

+ +

Quindi quando ha usato un metodo di stringa come:

+ +
myString.split(',');
+ +

Non hai fatto altro che usare un metodo disponibile in una istanza della classe String. Ogni volta che crei una stringa nel tuo codice, viene automaticamente creata una istanza di String, che ha ha disposizione alcuni metodi/proprietà comuni.

+ +

Quando hai acceduto al modello di oggetto documento usando righe come queste:

+ +
var myDiv = document.createElement('div');
+var myVideo = document.querySelector('video');
+ +

Tu hai usato i metodi disponibili in una istanza della classe Document. Per ogni pagina web caricara viene crata una istanza di Document chiamata document, che rappresenta l'intera struttura della pagina, il contenuto e le altre funzionalità come il suo URL. Nuovamente questo significa che ci sono diversi metodi/proprietà comuni disponibili.

+ +

Questo è vero anche per molti degli altri oggetti/API built-in che hai usato — Array, Math, ecc.

+ +

Nota che gli Oggetti/API built-in non sempre creano le istanze di oggetto automaticamente. Ad esempio, le Notifications API — che consentono ai browsers moderni di attivare notifiche di sistema — richiedono che venga instanziato una nuova istanza utilizzando il costruttore per ogni notifica che vuoi avviare. Prova scrivendo questo nella tua console JavaScript:

+ +
var myNotification = new Notification('Hello!');
+ +

Spiegheremo i costruttori in un prossimo articolo.

+ +
+

Nota: È utile pensare al modo in cui gli oggetti comunicano come ad un passaggio di messaggi — quando un oggetto ha bisogno che un altro oggetto faccia qualcosa, spesso manda un messaggio all'altro oggetto usando uno dei suoi metodi, ed aspetta la risposta sottoforma di valore restituito.

+
+ +

Sommario

+ +

Congratulazioni, hai raggiunto la fine del nostro primo artocolo sugli oggetti JS — ora dovresti avere una buona idesa di come lavorare con gli oggetti in JavaScript — compresa la creazione di tuoi semplici oggetti. Dovresti anche apprezzare che gli oggetti sono molto utili come strutture per memorizzare dati e funzionalità correlati — se hai provato a tenere traccia delle proprietà e dei metodi del nostro oggetto person in forma di variabili e funzioni separate, dovrebbe essere stato inefficente e frustrante, ed hai corso il rischio di confondere i dati con altre variabli con lo stesso  nome. Gli oggetti ci permettono di tenere le informazioni confinate in modo sicuro nel proprio pacchetto senza rischio.

+ +

Nel prossimo articolo incominceremo ad introdurre la teoria della programmazione object-oriented (OOP), ed in che modo queste tecniche possono essere usate in JavaScript.

+ +

{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}

diff --git a/files/it/learn/javascript/objects/index.html b/files/it/learn/javascript/objects/index.html new file mode 100644 index 0000000000..5fa859db74 --- /dev/null +++ b/files/it/learn/javascript/objects/index.html @@ -0,0 +1,51 @@ +--- +title: Introduzione agli oggetti in JavaScript +slug: Learn/JavaScript/Oggetti +tags: + - Articolo + - Guida + - JavaScript + - Oggetti + - Principiante + - Tutorial + - Verifica + - imparare +translation_of: Learn/JavaScript/Objects +--- +
{{LearnSidebar}}
+ +

In JavaScript molte cose sono oggetti, a partire da caratteristiche base di JavaScript come stringhe ed array, fino alle API del browser costruite in JavaScript. Potete anche creare i vostri oggetti, incapsulando funzioni e variabili tra loro correlate in pacchetti funzionalmente efficienti e che funzionano da comodi contenitori di dati. Se volete progredire nella vostra conoscenza di JavaScript, è importante comprendere la sua natura object-oriented (orientata agli oggetti), perciò abbiamo approntato questo modulo per aiutarvi. Qui parleremo in dettaglio della teoria e della sintassi degli oggetti; successivamente vedremo come creare i vostri oggetti personalizzati.

+ +

Prerequisiti

+ +

Prima di iniziare questo modulo, dovreste avere una qualche familiarità con HTML e CSS. Vi consigliamo di seguire i moduli Introduzione a HTML e Introduzione a CSS prima di cimentarvi con JavaScript.

+ +

Dovreste anche avere qualche familiarità con i fondamenti di JavaScript prima di affrontare in dettaglio gli oggetti in JavaScript. Prima di procedere con questo modulo vi consigliamo di seguire i moduli Primi passi con JavaScript e JavaScript building blocks.

+ +
+

Nota: Se state lavorando su un computer, tablet o altro dispositivo sul quale non fosse possibile creare i vostri file, potete sperimentare buona parte del codice di esempio in un programma di scrittura codice online, come ad esempio JSBin o Thimble.

+
+ +

Guide

+ +
+
Fondamenti sugli oggetti
+
Nel primo articolo riguardante gli oggetti JavaScript vedremo la sintassi fondamentale degli oggetti, e rivisiteremo alcune caratteristiche di JavaScript che abbiamo già introdotto durante il corso, verificando che molte delle caratteristche con cui avete già avuto a che fare sono di fatto oggetti.
+
Object-oriented JavaScript per principianti
+
Una volta acquisite le basi ci focalizzeremo sul JavaScript orientato agli oggetti (object-oriented JavaScript, OOJS) — questo articolo illustra i fondamenti della programmazione orientata agli oggetti (object-oriented programming, OOP), per poi esplorare come JavaScript emuli le classi di oggetti tramite le funzioni costruttore, e come creare istanze di un oggetto .
+
Prototipi di oggetto (object prototypes)
+
I prototipi sono il meccanismo tramite il quale gli oggetti JavaScript ereditano caratteristiche tra di loro, e funzionano diversamente dai meccanismi di ereditarietà presenti nei classici linguaggi orientati agli oggetti. In questo articolo esploreremo questa differenza, spiegheremo come funzionano le catene di prototipi, e vedremo come la proprietà di prototipo può essere usata per aggiungere metodi a costruttori esistenti..
+
Ereditarietà in JavaScript
+
Dopo aver spiegato buona parte delle frattaglie dell'OOJS, questo articolo mostra come creare classi di oggetti "figli" che ereditano caratteristiche dalle loro classi "antenate". Presentiamo inoltre alcuni consigli circa quando e dove potreste usare OOJS.
+
Lavorare con i dati JSON
+
JavaScript Object Notation (JSON) è un formato standard per rappresentare dati strutturati come oggetti JavaScript. Esso è comunemente usato per rappresentare e trasmettere dati sui siti web (ad esempio inviare alcuni dati dal server al client, cosicché venga visualizzato in una pagina web). Poiché lo incontrerete piuttosto spesso, in quest'articolo vi daremo tutto ciò di cui avete bisogno per lavorare con JSON usando JavaScript, incluso come accedere agli elementi di dati in un oggetto JSON e come scrivere il vostro JSON.
+
Pratica della costruzione di oggetti
+
Negli articoli precedenti abbiamo descritto la teoria essenziale degli oggetti JavaScript e i dettagli sulla sintassi, dandovi una base solida da cui Partire. In questo articolo ci cimenteremo in un esercizio pratico, in cui costruirete oggetti JavaScript personalizzati che producono qualcosa di divertente e colorato — alcune palline colorate rimbalzanti.
+
+ +

Verifiche

+ +
+
Aggiungere caratteristiche alla demo "bouncing balls"
+
In questa verifiche userete la demo delle palline rimbalzanti come punto di partenza, aggiungendole alcune nuove ed interessanti caratteristiche.
+
diff --git a/files/it/learn/javascript/objects/json/index.html b/files/it/learn/javascript/objects/json/index.html new file mode 100644 index 0000000000..71cf166e15 --- /dev/null +++ b/files/it/learn/javascript/objects/json/index.html @@ -0,0 +1,345 @@ +--- +title: Lavorare con JSON +slug: Learn/JavaScript/Oggetti/JSON +translation_of: Learn/JavaScript/Objects/JSON +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}}
+ +

JavaScript Object Notation (JSON) è un formato testuale standard, usato per rappresentare dati strutturati basati sulla sintassi degli oggetti in JavaScript. E' usato comunemente per la trasmissione dati nelle applicazioni web (ad es. inviare dati dal server al client in modo da visualizzarli in una pagina web o viceversa). Ti imbatterai abbastanza spesso in questo formato, così in questo articolo ti forniremo tutto ciò che ti occorre per lavorare con JSON usando JavaScript, incluso la lettura (parsing) del JSON in modo da accedere ai dati in esso contenuti, così come a generare JSON.

+ + + + + + + + + + + + +
Prerequisiti:Conoscenza informatica di base, comprensione base di HTML e CSS, familiarità con i concetti base di JavaScript (vedi Primi passi e Costruzione blocchi) e con i concetti base degli oggetti JS (vedi Introduzione agli oggetti).
Obiettivi:Comprendere il funzionamento dei dati megorizzati in JSON e creare i tuoi oggetti JSON.
+ +

No, davvero, cos'è JSON?

+ +

{{glossary("JSON")}} è un formato dati testuale che segue la sintassi degli oggetti JavaScript, reso popolare da Douglas Crockford. Anche se richiama da vicino la sintassi letterale degli oggetti JavaScript, può essere usato indipendentemente da JavaScript, e molti ambienti di programmazione supportano la lettura (parsing) e la generazione di JSON.

+ +

JSON esiste sotto forma di una stringa — utile quando vuoi trasmettere dati in una rete. Deve essere poi convertito in un oggetto javaScript nativo quando vuoi accedere ai dati che rappresenta. La conversione tra i due è piuttosto banale —  grazie ai metodi dell'oggetto globale JSON di JavaScript.

+ +
+

Nota: Convertire una stringa in un oggetto nativo è chiamata deserializzazione, mentre convertire un oggetto nativo in una stringa in modo da poterlo trasmettere in rete, è chiamata serializzazione.

+
+ +

Un oggetto JSON object può essere memorizzato in un file dedicato, essenzialmente un file di testo con estensione .json, e un {{glossary("tipo MIME")}} application/json.

+ +

Struutura di un JSON 

+ +

Come descritto sopra, un JSON non è altro che una stringa il cui formato è molto simile al formato letterale di un oggetto JavaScript. E' possibile includere in JSON gli stessi tipi di dato base possibili in un oggetto standard di JavaScript — stringhe, numeri, arrays, booleani e altri oggetti letterali. Questo ti consente di costruire una gerarchia dei dati, ad esempio:

+ +
{
+  "squadName": "Super hero squad",
+  "homeTown": "Metro City",
+  "formed": 2016,
+  "secretBase": "Super tower",
+  "active": true,
+  "members": [
+    {
+      "name": "Molecule Man",
+      "age": 29,
+      "secretIdentity": "Dan Jukes",
+      "powers": [
+        "Radiation resistance",
+        "Turning tiny",
+        "Radiation blast"
+      ]
+    },
+    {
+      "name": "Madame Uppercut",
+      "age": 39,
+      "secretIdentity": "Jane Wilson",
+      "powers": [
+        "Million tonne punch",
+        "Damage resistance",
+        "Superhuman reflexes"
+      ]
+    },
+    {
+      "name": "Eternal Flame",
+      "age": 1000000,
+      "secretIdentity": "Unknown",
+      "powers": [
+        "Immortality",
+        "Heat Immunity",
+        "Inferno",
+        "Teleportation",
+        "Interdimensional travel"
+      ]
+    }
+  ]
+}
+ +

Se carichiamo questo oggetto in un programma, processato in una variabile chiamata superHeroes per esempio, potremmo accedere ai dati che contiene usando la medesima notazione punto/parentesi vista nell'articolo Fondamentali degli oggetti JavaScript. Per esempio:

+ +
superHeroes.homeTown
+superHeroes['active']
+ +

Per accedere ai dati gerarchicamente inferiori, occorre semplicemente concatenare i nome delle proprietà e gli indici degli array.  Ad esempio, per accedere al terzo superpotere del secondo eroe nella lista dei membri, procedi come segue:

+ +
superHeroes['members'][1]['powers'][2]
+ +
    +
  1. Per primo abbiamo il nome della variabile — superHeroes.
    2. +
  2. All'interno della variabile vogliamo accedere alla proprietà members, così utilizziamo ["members"].
    3. +
  3. members contiene un array popolato da oggetti. Noi vogliamo accedere al secondo oggetto dell'array, quindi usiamo [1].
    4. +
  4. all'interno dell'oggetto così trovato, vogliamo poi accedere alla proprietà powers e per ciò usiamo ["powers"].
    5. +
  5. La proprietà powers contiene a sua volta un array in cui sono elencate i superpoteri dell'eroe selezionato. Noi vogliamo la terza in lista, usiamo quindi [2].
    6. +
+ +
+

Note: Abbiamo reso disponibile il JSON visto sopra, in una variabile del nostro esempio JSONTest.html (vedi il codice sorgente). Prova a caricarlo e poi accedi alla variabile dalla console JavaScript del tuo browser.

+
+ +

Arrays as JSON

+ +

Above we mentioned that JSON text basically looks like a JavaScript object, and this is mostly right. The reason we said "mostly right" is that an array is also valid JSON, for example:

+ +
[
+  {
+    "name": "Molecule Man",
+    "age": 29,
+    "secretIdentity": "Dan Jukes",
+    "powers": [
+      "Radiation resistance",
+      "Turning tiny",
+      "Radiation blast"
+    ]
+  },
+  {
+    "name": "Madame Uppercut",
+    "age": 39,
+    "secretIdentity": "Jane Wilson",
+    "powers": [
+      "Million tonne punch",
+      "Damage resistance",
+      "Superhuman reflexes"
+    ]
+  }
+]
+ +

The above is perfectly valid JSON. You'd just have to access array items (in its parsed version) by starting with an array index, for example [0]["powers"][0].

+ +

Other notes

+ + + +

Active learning: Working through a JSON example

+ +

So, let's work through an example to show how we could make use of some JSON data on a website.

+ +

Getting started

+ +

To begin with, make local copies of our heroes.html and style.css files. The latter contains some simple CSS to style our page, while the former contains some very simple body HTML:

+ +
<header>
+</header>
+
+<section>
+</section>
+ +

Plus a {{HTMLElement("script")}} element to contain the JavaScript code we will be writing in this exercise. At the moment it only contains two lines, which grab references to the {{HTMLElement("header")}} and {{HTMLElement("section")}} elements and store them in variables:

+ +
const header = document.querySelector('header');
+const section = document.querySelector('section');
+ +

We have made our JSON data available on our GitHub, at https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json.

+ +

We are going to load it into our page, and use some nifty DOM manipulation to display it, like this:

+ +

+ +

Obtaining the JSON

+ +

To obtain the JSON, we use an API called {{domxref("XMLHttpRequest")}} (often called XHR). This is a very useful JavaScript object that allows us to make network requests to retrieve resources from a server via JavaScript (e.g. images, text, JSON, even HTML snippets), meaning that we can update small sections of content without having to reload the entire page. This has led to more responsive web pages, and sounds exciting, but it is beyond the scope of this article to teach it in much more detail.

+ +
    +
  1. To start with, we store the URL of the JSON we want to retrieve in a variable. Add the following at the bottom of your JavaScript code: + 
    let requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';
    +
    2. +
  2. To create a request, we need to create a new request object instance from the XMLHttpRequest constructor, using the new keyword. Add the following below your last line: + 
    let request = new XMLHttpRequest();
    +
    3. +
  3. Now we need to open the request using the open() method. Add the following line: + 
    request.open('GET', requestURL);
    + +

    This takes at least two parameters — there are other optional parameters available. We only need the two mandatory ones for this simple example:

    + +
      +
    • The HTTP method to use when making the network request. In this case GET is fine, as we are just retrieving some simple data.
      • +
    • The URL to make the request to — this is the URL of the JSON file that we stored earlier.
      • +
    +
    4. +
  4. Next, add the following two lines — here we are setting the responseType to JSON, so that XHR knows that the server will be returning JSON, and that this should be converted behind the scenes into a JavaScript object. Then we send the request with the send() method: + 
    request.responseType = 'json';
+request.send();
    +
    5. +
  5. The last bit of this section involves waiting for the response to return from the server, then dealing with it. Add the following code below your previous code: + 
    request.onload = function() {
+  const superHeroes = request.response;
+  populateHeader(superHeroes);
+  showHeroes(superHeroes);
+}
    +
    6. +
+ +

Here we are storing the response to our request (available in the response property) in a variable called superHeroes; this variable now contains the JavaScript object based on the JSON! We are then passing that object to two function calls — the first one fills the <header> with the correct data, while the second one creates an information card for each hero on the team, and inserts it into the <section>.

+ +

We have wrapped the code in an event handler that runs when the load event fires on the request object (see onload) — this is because the load event fires when the response has successfully returned; doing it this way guarantees that request.response will definitely be available when we come to try to do something with it.

+ +

Populating the header

+ +

Now that we've retrieved the JSON data and converted it into a JavaScript object, let's make use of it by writing the two functions we referenced above. First of all, add the following function definition below the previous code:

+ +
function populateHeader(jsonObj) {
+  const myH1 = document.createElement('h1');
+  myH1.textContent = jsonObj['squadName'];
+  header.appendChild(myH1);
+
+  const myPara = document.createElement('p');
+  myPara.textContent = 'Hometown: ' + jsonObj['homeTown'] + ' // Formed: ' + jsonObj['formed'];
+  header.appendChild(myPara);
+}
+ +

We named the parameter jsonObj, to remind ourselves that this JavaScript object originated from JSON. Here we first create an {{HTMLElement("h1")}} element with createElement(), set its textContent to equal the squadName property of the object, then append it to the header using appendChild(). We then do a very similar operation with a paragraph: create it, set its text content and append it to the header. The only difference is that its text is set to a concatenated string containing both the homeTown and formed properties of the object.

+ +

Creating the hero information cards

+ +

Next, add the following function at the bottom of the code, which creates and displays the superhero cards:

+ +
function showHeroes(jsonObj) {
+  const heroes = jsonObj['members'];
+
+  for (let i = 0; i < heroes.length; i++) {
+    const myArticle = document.createElement('article');
+    const myH2 = document.createElement('h2');
+    const myPara1 = document.createElement('p');
+    const myPara2 = document.createElement('p');
+    const myPara3 = document.createElement('p');
+    const myList = document.createElement('ul');
+
+    myH2.textContent = heroes[i].name;
+    myPara1.textContent = 'Secret identity: ' + heroes[i].secretIdentity;
+    myPara2.textContent = 'Age: ' + heroes[i].age;
+    myPara3.textContent = 'Superpowers:';
+
+    const superPowers = heroes[i].powers;
+    for (let j = 0; j < superPowers.length; j++) {
+      const listItem = document.createElement('li');
+      listItem.textContent = superPowers[j];
+      myList.appendChild(listItem);
+    }
+
+    myArticle.appendChild(myH2);
+    myArticle.appendChild(myPara1);
+    myArticle.appendChild(myPara2);
+    myArticle.appendChild(myPara3);
+    myArticle.appendChild(myList);
+
+    section.appendChild(myArticle);
+  }
+}
+ +

To start with, we store the members property of the JavaScript object in a new variable. This array contains multiple objects that contain the information for each hero.

+ +

Next, we use a for loop to loop through each object in the array. For each one, we:

+ +
    +
  1. Create several new elements: an <article>, an <h2>, three <p>s, and a <ul>.
    2. +
  2. Set the <h2> to contain the current hero's name.
    3. +
  3. Fill the three paragraphs with their secretIdentity, age, and a line saying "Superpowers:" to introduce the information in the list.
    4. +
  4. Store the powers property in another new constant called superPowers — this contains an array that lists the current hero's superpowers.
    5. +
  5. Use another for loop to loop through the current hero's superpowers — for each one we create an <li> element, put the superpower inside it, then put the listItem inside the <ul> element (myList) using appendChild().
    6. +
  6. The very last thing we do is to append the <h2>, <p>s, and <ul> inside the <article> (myArticle), then append the <article> inside the <section>. The order in which things are appended is important, as this is the order they will be displayed inside the HTML.
    7. +
+ +
+

Note: If you are having trouble getting the example to work, try referring to our heroes-finished.html source code (see it running live also.)

+
+ +
+

Note: If you are having trouble following the dot/bracket notation we are using to access the JavaScript object, it can help to have the superheroes.json file open in another tab or your text editor, and refer to it as you look at our JavaScript. You should also refer back to our JavaScript object basics article for more information on dot and bracket notation.

+
+ +

Converting between objects and text

+ +

The above example was simple in terms of accessing the JavaScript object, because we set the XHR request to convert the JSON response directly into a JavaScript object using:

+ +
request.responseType = 'json';
+ +

But sometimes we aren't so lucky — sometimes we receive a raw JSON string, and we need to convert it to an object ourselves. And when we want to send a JavaScript object across the network, we need to convert it to JSON (a string) before sending. Luckily, these two problems are so common in web development that a built-in JSON object is available in browsers, which contains the following two methods:

+ + + +

You can see the first one in action in our heroes-finished-json-parse.html example (see the source code) — this does exactly the same thing as the example we built up earlier, except that we set the XHR to return the raw JSON text, then used parse() to convert it to an actual JavaScript object. The key snippet of code is here:

+ +
request.open('GET', requestURL);
+request.responseType = 'text'; // now we're getting a string!
+request.send();
+
+request.onload = function() {
+  const superHeroesText = request.response; // get the string from the response
+  const superHeroes = JSON.parse(superHeroesText); // convert it to an object
+  populateHeader(superHeroes);
+  showHeroes(superHeroes);
+}
+ +

As you might guess, stringify() works the opposite way. Try entering the following lines into your browser's JavaScript console one by one to see it in action:

+ +
let myJSON = { "name": "Chris", "age": "38" };
+myJSON
+let myString = JSON.stringify(myJSON);
+myString
+ +

Here we're creating a JavaScript object, then checking what it contains, then converting it to a JSON string using stringify() — saving the return value in a new variable — then checking it again.

+ +

Test your skills!

+ +

You've reached the end of this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see Test your skills: JSON.

+ +

Summary

+ +

In this article, we've given you a simple guide to using JSON in your programs, including how to create and parse JSON, and how to access data locked inside it. In the next article, we'll begin looking at object-oriented JavaScript.

+ +

See also

+ + + +

{{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}}

+ +

In this module

+ + diff --git a/files/it/learn/javascript/oggetti/basics/index.html b/files/it/learn/javascript/oggetti/basics/index.html deleted file mode 100644 index 539df5c2e0..0000000000 --- a/files/it/learn/javascript/oggetti/basics/index.html +++ /dev/null @@ -1,242 +0,0 @@ ---- -title: Basi degli oggetti JavaScript -slug: Learn/JavaScript/Oggetti/Basics -translation_of: Learn/JavaScript/Objects/Basics ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}
- -

Nel primo articolo sugli oggetti JavaScript, vedremo la sintassi fondamentale degli oggetti JavaScript, e rivedremo alcune funzionalità di JavaScript che abbiamo già esamintato in precedenza in questo corso, rimarcando il fatto che molte delle funzionalità che abbiamo già incontrato son di fatto oggetti.

- - - - - - - - - - - - -
Prerequisiti:Conoscenza basilare dei computers, comprensione di base di HTML e CSS, familiarità con le basi di JavaScript (vedi Primi passi e Costruire blocchi).
Obiettivo:Capire le basi della teoria che stà dietro alla programmazione object-oriented, come questa si relazione con JavaScript ("la maggior parte delle cose sono oggetti"), e come incominciare a lavorare con gli oggetti JavaScript.
- -

Basi degli oggetti

- -

Un oggetto è una collezione di dati e/o funzionalità correlati (che di solito consiste in alcune variabili e funzioni — che sono chiamate proprietà e metodi quando fanno parte di oggetti.) Proviamo con un esempio per vedere come si comportano.

- -

Per incomiciare, facciamo una copia locale del nostro file oojs.html. Questo contiene un piccolissimo — elemento {{HTMLElement("script")}} che possiamo usare per scrivere il nostro sorgente, un elemento {{HTMLElement("input")}} per insrire istruzioni di esempio quando la pagina viene visualizzata, alcune definizioni di variabili, ed una funzione che invia ciò che si inserisce in input in un elemento {{HTMLElement("p")}}. Useremo questo come base per esplorare i concetti fondamentali della sintassi degli oggetti.

- -

Come molte cose in JavaScript, creare un oggetto spesso inizia definendo ed inizializzando una variabile. Prova ad inserire ciò che segue sotto al codice JavaScript già presente nel file, quindi salva e ricarica:

- -
var person = {};
- -

Se scrivi person nella casella di testo e premi il pulsante, dovresti ottenere il seguente risulatato:

- -
[object Object]
- -

Congratulazioni, hai appena creato il tuo primo oggetto. Ben fatto! Ma questo è un oggetto vuoto, perciò non ci possiamo fare molto. Aggiorniamo il nostro oggetto in questo modo:

- -
var person = {
-  name: ['Bob', 'Smith'],
-  age: 32,
-  gender: 'male',
-  interests: ['music', 'skiing'],
-  bio: function() {
-    alert(this.name[0] + ' ' + this.name[1] + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');
-  },
-  greeting: function() {
-    alert('Hi! I\'m ' + this.name[0] + '.');
-  }
-};
-
- -

Dopo aver salvato e ricaricato la pagina, prova ad inserire alcuni di questi nella casella di input:

- -
person.name[0]
-person.age
-person.interests[1]
-person.bio()
-person.greeting()
- -

Ora hai ottenuto alcuni dati e funzionalità nel tuo oggetto, ed ora puoi accedere ad essi con alcune sintassi semplici e graziose!

- -
-

Nota: Se hai problemi ad ottenere questo risultato, prova comparare quello che hai scritto con la nostra versione — vedi oojs-finished.html (e anche la versione funzionante). Un errore comune quando si inizia con gli oggetti è quello di mettere una virgola dopo l'ultimo elenemto — questo genera un errore.

-
- -

Quindi che cosa è successo qui? Bene, un oggetto è composto da svariati membri, ogniuno dei quali ha un nome (es. name e age sopra), ed un valore (es, ['Bob', 'Smith'] e 32). Ogni coppia nome/valore deve essere separata da una virgola, ed ogni nome e valore devono essere separati dai due punti. La sintassi segue sempre questo schema:

- -
var objectName = {
-  member1Name: member1Value,
-  member2Name: member2Value,
-  member3Name: member3Value
-}
- -

Il valore di un membro di un oggetto può essere qualsiasi cosa — nel nostro oggetto persona abbiamo una strigna, un numero, due array e due funzioni. I primi quatto elementi sono dati e ad essi ci si riferisce come le proprietà (properties) del oggetto. Gli ultimi due elementi sono funzioni che consentono all'oggetto di fare qualcosa con i dati, e ad esse ci si riferisce come i metodi (methods) dell'oggetto.

- -

Un oggetto come questo viene considerato un oggetto letterale — noi abbiamo scritto letteralmente il conenuto dell'oggetto nel momento che lo abbiamo creato. Questo è in contrasto con l'istanziazione di oggetti da classi, che vedremo un po' più avanti.

- -

È molto comune creare oggetti letterali quando si desidera trasferire una serie di dati relazionati e strutturati in qualche maniera, ad esempio per inviare richieste al server per inserire i dati nel database. Inviare un singolo oggetto è molto più efficiente che inviare i dati individualmente, ed è più facile lavorarci rispetto agli array, perché i dati vengono identificati per nome.

- -

Notazione puntata

- -

Sopra, abbiamo acceduto alle proprietà ed ai metodi degli oggetti utilizzando la notazione puntata. Il nome dell'oggetto (person) serve da namespace — e deve essere insirito prima per accedere a qualsiasi cosa incapsulata nell'oggetto. Quindi si scrive il punto seguito dell'elemento a cui si vuole accedere — 
- questo può essere il nome di una proprietà semplice, un elemento di una proprietà di tipo array, o una chiamata ad uno dei metodi dell oggetto, ad esempio:

- -
person.age
-person.interests[1]
-person.bio()
- -

Namespaces nidificati

- -

È anche possibile assegnare un altro oggetto ad un membro di un oggetto. Ad esempio prova a cambiare la property name da

- -
name: ['Bob', 'Smith'],
- -

a

- -
name : {
-  first: 'Bob',
-  last: 'Smith'
-},
- -

In questo modo abbiamo effettivamente creato un  sotto-namespace. Può sembrare complesso, ma non lo è veramente — per accedere a questi devi solo concatenare un ulteriore passo alla fine con un altro punto. Prova questi:

- -
person.name.first
-person.name.last
- -

Importante: A questo punto devi anche cambiare il codice dei tuoi metodi e cambiare ogni istanza di

- -
name[0]
-name[1]
- -

con

- -
name.first
-name.last
- -

Altrimenti i tuoi metodi non funzioneranno più.

- -

Notazione con parentesi quadre

- -

C'è un altro modo per accedere alle proprietà degli oggetti — usando la notazione delle parentesi quadre. Invece di usare questi:

- -
person.age
-person.name.first
- -

Puoi usare

- -
person['age']
-person['name']['first']
- -

Questo assomiglia molto al modo in cui accedi agli elementi di un array, ed è sostanzialmente la stessa cosa — invece di usare un indice numerico per scegliere un elemento, stai usando il nome associato ad ogni valore membro. Non c'è da meravigliarsi che gli oggetti a volte vengono chiamati array associativi — essi infatti associano le stringhe ai valori nello stesso modo in cui gli arrays associano i numeri ai valori.

- -

Assegnare i membri degli oggetti

- -

Fino a qui abbiamo solo recuperato (get) valori dei menbri degli oggetti — si possono anche assegnare (set) i valori ai menbri degli oggetti semplicemente dichiarando i membri che si desidera assegnare (usando la notazione puntata o con quadre), cone ad esempio:

- -
person.age = 45;
-person['name']['last'] = 'Cratchit';
- -

Prova ad inserire queste linee e poi rileggi i dati nuovamente per vedere che cosa è cambiato:

- -
person.age
-person['name']['last']
- -

Setting members doesn't just stop at updating the values of existing properties and methods; you can also create completely new members. Try these:

- -
person['eyes'] = 'hazel';
-person.farewell = function() { alert("Bye everybody!"); }
- -

Ora possiamo provare i nostri nuovi membri:

- -
person['eyes']
-person.farewell()
- -

Un utile aspetto della notazione con parentesi quadre è che non solo può essere usata per assegnare valori dinamicamente, ma anche per assegnare i nomi dei mebri. Ad esempio se desideriamo che gli utenti siano in grado di assegnare tipi di dato personalizzati scrivendo il nome della proprietà ed il suo valore in due campi di input, possiamo oggenere questi valori in questo modo:

- -
var myDataName = nameInput.value;
-var myDataValue = nameValue.value;
- -

e possiamo aggiungere questi nomi e valori nel nostro oggetto person in questo modo:

- -
person[myDataName] = myDataValue;
- -

Puoi testare questo aggiungendo le linee seguenti nel tuo codice appena prima della parentesi graffa chiusa nel oggetto person:

- -
var myDataName = 'height';
-var myDataValue = '1.75m';
-person[myDataName] = myDataValue;
- -

Ora prova s salvare e ricaricare la pagina ed inserisci ciò che segue nella casella di testo:

- -
person.height
- -

Non è possibile aggiungere proprità ad oggetti con il metodo descritto usando la notazione puntata, che accetta solo nomi aggiunti in modo letterale e non valori di variabili puntate da un nome.

- -

Che cos'è "this"?

- -

Forse ti sei accorto di qualcosa di leggermente strano nei nostri metodi. Guarda questo per esempio:

- -
greeting: function() {
-  alert('Hi! I\'m ' + this.name.first + '.');
-}
- -

Forse ti sei chiesto che cos'è "this". La parola chiave this fa riferimento all'oggetto in cui abbiamo scritto il codice — perciò in questo caso this è equivalente a person. Quindi perché non scrivere invece semplicemente person? Come vedrai nell'articolo Object-oriented JavaScript per principianti quando incominceremo a creare costruttori ecc., this è molto utile — perché garantisce sempre che venga trovato il valore corretto quando il contesto cambia (es. due diverse istanze dell'oggetto person possono avere nomi diversi, ma vogliamo accedere al nome corretto quando vogliamo fargli gli auguri).

- -

Proviamo ad illustrare ciò che intendiamo con un paio di oggetti person semplificati:

- -
var person1 = {
-  name: 'Chris',
-  greeting: function() {
-    alert('Hi! I\'m ' + this.name + '.');
-  }
-}
-
-var person2 = {
-  name: 'Brian',
-  greeting: function() {
-    alert('Hi! I\'m ' + this.name + '.');
-  }
-}
- -

In questo caso, person1.greeting() visualizza "Hi! I'm Chris."; e person2.greeting() "Hi! I'm Brian.", anche se il codice del metodo è esattamente identico. Come abbiamo detto prima, this fa riferimento al valore interno all'oggetto — questo non è molto importante per gli oggetti letterali scritti a mano, ma lo diventa quando gli oggetti vengono generati dinamicamente (per esempio usando i costruttori). Diventerà più chiaro in seguito.

- -

Finora hai usato oggetti tutto il tempo

- -

Avendo provato questi esempi, probabilmente hai pensato che la notazione a punto fin qui usata è molto familiare. Questo perché l'hai già usata durante il corso! Tutte le volte che abbiamo lavorato con un esempio che usa le API built-in del browser o oggetti JavaScript, abbiamo usato oggetti, perché quelle funzionalità sono state costruite usando lo stesso tipo di strutture di oggetti che stiamo vedendo qui, anche se molto più complesse dei nostri semplici esempi.

- -

Quindi quando ha usato un metodo di stringa come:

- -
myString.split(',');
- -

Non hai fatto altro che usare un metodo disponibile in una istanza della classe String. Ogni volta che crei una stringa nel tuo codice, viene automaticamente creata una istanza di String, che ha ha disposizione alcuni metodi/proprietà comuni.

- -

Quando hai acceduto al modello di oggetto documento usando righe come queste:

- -
var myDiv = document.createElement('div');
-var myVideo = document.querySelector('video');
- -

Tu hai usato i metodi disponibili in una istanza della classe Document. Per ogni pagina web caricara viene crata una istanza di Document chiamata document, che rappresenta l'intera struttura della pagina, il contenuto e le altre funzionalità come il suo URL. Nuovamente questo significa che ci sono diversi metodi/proprietà comuni disponibili.

- -

Questo è vero anche per molti degli altri oggetti/API built-in che hai usato — Array, Math, ecc.

- -

Nota che gli Oggetti/API built-in non sempre creano le istanze di oggetto automaticamente. Ad esempio, le Notifications API — che consentono ai browsers moderni di attivare notifiche di sistema — richiedono che venga instanziato una nuova istanza utilizzando il costruttore per ogni notifica che vuoi avviare. Prova scrivendo questo nella tua console JavaScript:

- -
var myNotification = new Notification('Hello!');
- -

Spiegheremo i costruttori in un prossimo articolo.

- -
-

Nota: È utile pensare al modo in cui gli oggetti comunicano come ad un passaggio di messaggi — quando un oggetto ha bisogno che un altro oggetto faccia qualcosa, spesso manda un messaggio all'altro oggetto usando uno dei suoi metodi, ed aspetta la risposta sottoforma di valore restituito.

-
- -

Sommario

- -

Congratulazioni, hai raggiunto la fine del nostro primo artocolo sugli oggetti JS — ora dovresti avere una buona idesa di come lavorare con gli oggetti in JavaScript — compresa la creazione di tuoi semplici oggetti. Dovresti anche apprezzare che gli oggetti sono molto utili come strutture per memorizzare dati e funzionalità correlati — se hai provato a tenere traccia delle proprietà e dei metodi del nostro oggetto person in forma di variabili e funzioni separate, dovrebbe essere stato inefficente e frustrante, ed hai corso il rischio di confondere i dati con altre variabli con lo stesso  nome. Gli oggetti ci permettono di tenere le informazioni confinate in modo sicuro nel proprio pacchetto senza rischio.

- -

Nel prossimo articolo incominceremo ad introdurre la teoria della programmazione object-oriented (OOP), ed in che modo queste tecniche possono essere usate in JavaScript.

- -

{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}

diff --git a/files/it/learn/javascript/oggetti/index.html b/files/it/learn/javascript/oggetti/index.html deleted file mode 100644 index 5fa859db74..0000000000 --- a/files/it/learn/javascript/oggetti/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: Introduzione agli oggetti in JavaScript -slug: Learn/JavaScript/Oggetti -tags: - - Articolo - - Guida - - JavaScript - - Oggetti - - Principiante - - Tutorial - - Verifica - - imparare -translation_of: Learn/JavaScript/Objects ---- -
{{LearnSidebar}}
- -

In JavaScript molte cose sono oggetti, a partire da caratteristiche base di JavaScript come stringhe ed array, fino alle API del browser costruite in JavaScript. Potete anche creare i vostri oggetti, incapsulando funzioni e variabili tra loro correlate in pacchetti funzionalmente efficienti e che funzionano da comodi contenitori di dati. Se volete progredire nella vostra conoscenza di JavaScript, è importante comprendere la sua natura object-oriented (orientata agli oggetti), perciò abbiamo approntato questo modulo per aiutarvi. Qui parleremo in dettaglio della teoria e della sintassi degli oggetti; successivamente vedremo come creare i vostri oggetti personalizzati.

- -

Prerequisiti

- -

Prima di iniziare questo modulo, dovreste avere una qualche familiarità con HTML e CSS. Vi consigliamo di seguire i moduli Introduzione a HTML e Introduzione a CSS prima di cimentarvi con JavaScript.

- -

Dovreste anche avere qualche familiarità con i fondamenti di JavaScript prima di affrontare in dettaglio gli oggetti in JavaScript. Prima di procedere con questo modulo vi consigliamo di seguire i moduli Primi passi con JavaScript e JavaScript building blocks.

- -
-

Nota: Se state lavorando su un computer, tablet o altro dispositivo sul quale non fosse possibile creare i vostri file, potete sperimentare buona parte del codice di esempio in un programma di scrittura codice online, come ad esempio JSBin o Thimble.

-
- -

Guide

- -
-
Fondamenti sugli oggetti
-
Nel primo articolo riguardante gli oggetti JavaScript vedremo la sintassi fondamentale degli oggetti, e rivisiteremo alcune caratteristiche di JavaScript che abbiamo già introdotto durante il corso, verificando che molte delle caratteristche con cui avete già avuto a che fare sono di fatto oggetti.
-
Object-oriented JavaScript per principianti
-
Una volta acquisite le basi ci focalizzeremo sul JavaScript orientato agli oggetti (object-oriented JavaScript, OOJS) — questo articolo illustra i fondamenti della programmazione orientata agli oggetti (object-oriented programming, OOP), per poi esplorare come JavaScript emuli le classi di oggetti tramite le funzioni costruttore, e come creare istanze di un oggetto .
-
Prototipi di oggetto (object prototypes)
-
I prototipi sono il meccanismo tramite il quale gli oggetti JavaScript ereditano caratteristiche tra di loro, e funzionano diversamente dai meccanismi di ereditarietà presenti nei classici linguaggi orientati agli oggetti. In questo articolo esploreremo questa differenza, spiegheremo come funzionano le catene di prototipi, e vedremo come la proprietà di prototipo può essere usata per aggiungere metodi a costruttori esistenti..
-
Ereditarietà in JavaScript
-
Dopo aver spiegato buona parte delle frattaglie dell'OOJS, questo articolo mostra come creare classi di oggetti "figli" che ereditano caratteristiche dalle loro classi "antenate". Presentiamo inoltre alcuni consigli circa quando e dove potreste usare OOJS.
-
Lavorare con i dati JSON
-
JavaScript Object Notation (JSON) è un formato standard per rappresentare dati strutturati come oggetti JavaScript. Esso è comunemente usato per rappresentare e trasmettere dati sui siti web (ad esempio inviare alcuni dati dal server al client, cosicché venga visualizzato in una pagina web). Poiché lo incontrerete piuttosto spesso, in quest'articolo vi daremo tutto ciò di cui avete bisogno per lavorare con JSON usando JavaScript, incluso come accedere agli elementi di dati in un oggetto JSON e come scrivere il vostro JSON.
-
Pratica della costruzione di oggetti
-
Negli articoli precedenti abbiamo descritto la teoria essenziale degli oggetti JavaScript e i dettagli sulla sintassi, dandovi una base solida da cui Partire. In questo articolo ci cimenteremo in un esercizio pratico, in cui costruirete oggetti JavaScript personalizzati che producono qualcosa di divertente e colorato — alcune palline colorate rimbalzanti.
-
- -

Verifiche

- -
-
Aggiungere caratteristiche alla demo "bouncing balls"
-
In questa verifiche userete la demo delle palline rimbalzanti come punto di partenza, aggiungendole alcune nuove ed interessanti caratteristiche.
-
diff --git a/files/it/learn/javascript/oggetti/json/index.html b/files/it/learn/javascript/oggetti/json/index.html deleted file mode 100644 index 71cf166e15..0000000000 --- a/files/it/learn/javascript/oggetti/json/index.html +++ /dev/null @@ -1,345 +0,0 @@ ---- -title: Lavorare con JSON -slug: Learn/JavaScript/Oggetti/JSON -translation_of: Learn/JavaScript/Objects/JSON ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}}
- -

JavaScript Object Notation (JSON) è un formato testuale standard, usato per rappresentare dati strutturati basati sulla sintassi degli oggetti in JavaScript. E' usato comunemente per la trasmissione dati nelle applicazioni web (ad es. inviare dati dal server al client in modo da visualizzarli in una pagina web o viceversa). Ti imbatterai abbastanza spesso in questo formato, così in questo articolo ti forniremo tutto ciò che ti occorre per lavorare con JSON usando JavaScript, incluso la lettura (parsing) del JSON in modo da accedere ai dati in esso contenuti, così come a generare JSON.

- - - - - - - - - - - - -
Prerequisiti:Conoscenza informatica di base, comprensione base di HTML e CSS, familiarità con i concetti base di JavaScript (vedi Primi passi e Costruzione blocchi) e con i concetti base degli oggetti JS (vedi Introduzione agli oggetti).
Obiettivi:Comprendere il funzionamento dei dati megorizzati in JSON e creare i tuoi oggetti JSON.
- -

No, davvero, cos'è JSON?

- -

{{glossary("JSON")}} è un formato dati testuale che segue la sintassi degli oggetti JavaScript, reso popolare da Douglas Crockford. Anche se richiama da vicino la sintassi letterale degli oggetti JavaScript, può essere usato indipendentemente da JavaScript, e molti ambienti di programmazione supportano la lettura (parsing) e la generazione di JSON.

- -

JSON esiste sotto forma di una stringa — utile quando vuoi trasmettere dati in una rete. Deve essere poi convertito in un oggetto javaScript nativo quando vuoi accedere ai dati che rappresenta. La conversione tra i due è piuttosto banale —  grazie ai metodi dell'oggetto globale JSON di JavaScript.

- -
-

Nota: Convertire una stringa in un oggetto nativo è chiamata deserializzazione, mentre convertire un oggetto nativo in una stringa in modo da poterlo trasmettere in rete, è chiamata serializzazione.

-
- -

Un oggetto JSON object può essere memorizzato in un file dedicato, essenzialmente un file di testo con estensione .json, e un {{glossary("tipo MIME")}} application/json.

- -

Struutura di un JSON 

- -

Come descritto sopra, un JSON non è altro che una stringa il cui formato è molto simile al formato letterale di un oggetto JavaScript. E' possibile includere in JSON gli stessi tipi di dato base possibili in un oggetto standard di JavaScript — stringhe, numeri, arrays, booleani e altri oggetti letterali. Questo ti consente di costruire una gerarchia dei dati, ad esempio:

- -
{
-  "squadName": "Super hero squad",
-  "homeTown": "Metro City",
-  "formed": 2016,
-  "secretBase": "Super tower",
-  "active": true,
-  "members": [
-    {
-      "name": "Molecule Man",
-      "age": 29,
-      "secretIdentity": "Dan Jukes",
-      "powers": [
-        "Radiation resistance",
-        "Turning tiny",
-        "Radiation blast"
-      ]
-    },
-    {
-      "name": "Madame Uppercut",
-      "age": 39,
-      "secretIdentity": "Jane Wilson",
-      "powers": [
-        "Million tonne punch",
-        "Damage resistance",
-        "Superhuman reflexes"
-      ]
-    },
-    {
-      "name": "Eternal Flame",
-      "age": 1000000,
-      "secretIdentity": "Unknown",
-      "powers": [
-        "Immortality",
-        "Heat Immunity",
-        "Inferno",
-        "Teleportation",
-        "Interdimensional travel"
-      ]
-    }
-  ]
-}
- -

Se carichiamo questo oggetto in un programma, processato in una variabile chiamata superHeroes per esempio, potremmo accedere ai dati che contiene usando la medesima notazione punto/parentesi vista nell'articolo Fondamentali degli oggetti JavaScript. Per esempio:

- -
superHeroes.homeTown
-superHeroes['active']
- -

Per accedere ai dati gerarchicamente inferiori, occorre semplicemente concatenare i nome delle proprietà e gli indici degli array.  Ad esempio, per accedere al terzo superpotere del secondo eroe nella lista dei membri, procedi come segue:

- -
superHeroes['members'][1]['powers'][2]
- -
    -
  1. Per primo abbiamo il nome della variabile — superHeroes.
    2. -
  2. All'interno della variabile vogliamo accedere alla proprietà members, così utilizziamo ["members"].
    3. -
  3. members contiene un array popolato da oggetti. Noi vogliamo accedere al secondo oggetto dell'array, quindi usiamo [1].
    4. -
  4. all'interno dell'oggetto così trovato, vogliamo poi accedere alla proprietà powers e per ciò usiamo ["powers"].
    5. -
  5. La proprietà powers contiene a sua volta un array in cui sono elencate i superpoteri dell'eroe selezionato. Noi vogliamo la terza in lista, usiamo quindi [2].
    6. -
- -
-

Note: Abbiamo reso disponibile il JSON visto sopra, in una variabile del nostro esempio JSONTest.html (vedi il codice sorgente). Prova a caricarlo e poi accedi alla variabile dalla console JavaScript del tuo browser.

-
- -

Arrays as JSON

- -

Above we mentioned that JSON text basically looks like a JavaScript object, and this is mostly right. The reason we said "mostly right" is that an array is also valid JSON, for example:

- -
[
-  {
-    "name": "Molecule Man",
-    "age": 29,
-    "secretIdentity": "Dan Jukes",
-    "powers": [
-      "Radiation resistance",
-      "Turning tiny",
-      "Radiation blast"
-    ]
-  },
-  {
-    "name": "Madame Uppercut",
-    "age": 39,
-    "secretIdentity": "Jane Wilson",
-    "powers": [
-      "Million tonne punch",
-      "Damage resistance",
-      "Superhuman reflexes"
-    ]
-  }
-]
- -

The above is perfectly valid JSON. You'd just have to access array items (in its parsed version) by starting with an array index, for example [0]["powers"][0].

- -

Other notes

- - - -

Active learning: Working through a JSON example

- -

So, let's work through an example to show how we could make use of some JSON data on a website.

- -

Getting started

- -

To begin with, make local copies of our heroes.html and style.css files. The latter contains some simple CSS to style our page, while the former contains some very simple body HTML:

- -
<header>
-</header>
-
-<section>
-</section>
- -

Plus a {{HTMLElement("script")}} element to contain the JavaScript code we will be writing in this exercise. At the moment it only contains two lines, which grab references to the {{HTMLElement("header")}} and {{HTMLElement("section")}} elements and store them in variables:

- -
const header = document.querySelector('header');
-const section = document.querySelector('section');
- -

We have made our JSON data available on our GitHub, at https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json.

- -

We are going to load it into our page, and use some nifty DOM manipulation to display it, like this:

- -

- -

Obtaining the JSON

- -

To obtain the JSON, we use an API called {{domxref("XMLHttpRequest")}} (often called XHR). This is a very useful JavaScript object that allows us to make network requests to retrieve resources from a server via JavaScript (e.g. images, text, JSON, even HTML snippets), meaning that we can update small sections of content without having to reload the entire page. This has led to more responsive web pages, and sounds exciting, but it is beyond the scope of this article to teach it in much more detail.

- -
    -
  1. To start with, we store the URL of the JSON we want to retrieve in a variable. Add the following at the bottom of your JavaScript code: - 
    let requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';
    -
    2. -
  2. To create a request, we need to create a new request object instance from the XMLHttpRequest constructor, using the new keyword. Add the following below your last line: - 
    let request = new XMLHttpRequest();
    -
    3. -
  3. Now we need to open the request using the open() method. Add the following line: - 
    request.open('GET', requestURL);
    - -

    This takes at least two parameters — there are other optional parameters available. We only need the two mandatory ones for this simple example:

    - -
      -
    • The HTTP method to use when making the network request. In this case GET is fine, as we are just retrieving some simple data.
      • -
    • The URL to make the request to — this is the URL of the JSON file that we stored earlier.
      • -
    -
    4. -
  4. Next, add the following two lines — here we are setting the responseType to JSON, so that XHR knows that the server will be returning JSON, and that this should be converted behind the scenes into a JavaScript object. Then we send the request with the send() method: - 
    request.responseType = 'json';
-request.send();
    -
    5. -
  5. The last bit of this section involves waiting for the response to return from the server, then dealing with it. Add the following code below your previous code: - 
    request.onload = function() {
-  const superHeroes = request.response;
-  populateHeader(superHeroes);
-  showHeroes(superHeroes);
-}
    -
    6. -
- -

Here we are storing the response to our request (available in the response property) in a variable called superHeroes; this variable now contains the JavaScript object based on the JSON! We are then passing that object to two function calls — the first one fills the <header> with the correct data, while the second one creates an information card for each hero on the team, and inserts it into the <section>.

- -

We have wrapped the code in an event handler that runs when the load event fires on the request object (see onload) — this is because the load event fires when the response has successfully returned; doing it this way guarantees that request.response will definitely be available when we come to try to do something with it.

- -

Populating the header

- -

Now that we've retrieved the JSON data and converted it into a JavaScript object, let's make use of it by writing the two functions we referenced above. First of all, add the following function definition below the previous code:

- -
function populateHeader(jsonObj) {
-  const myH1 = document.createElement('h1');
-  myH1.textContent = jsonObj['squadName'];
-  header.appendChild(myH1);
-
-  const myPara = document.createElement('p');
-  myPara.textContent = 'Hometown: ' + jsonObj['homeTown'] + ' // Formed: ' + jsonObj['formed'];
-  header.appendChild(myPara);
-}
- -

We named the parameter jsonObj, to remind ourselves that this JavaScript object originated from JSON. Here we first create an {{HTMLElement("h1")}} element with createElement(), set its textContent to equal the squadName property of the object, then append it to the header using appendChild(). We then do a very similar operation with a paragraph: create it, set its text content and append it to the header. The only difference is that its text is set to a concatenated string containing both the homeTown and formed properties of the object.

- -

Creating the hero information cards

- -

Next, add the following function at the bottom of the code, which creates and displays the superhero cards:

- -
function showHeroes(jsonObj) {
-  const heroes = jsonObj['members'];
-
-  for (let i = 0; i < heroes.length; i++) {
-    const myArticle = document.createElement('article');
-    const myH2 = document.createElement('h2');
-    const myPara1 = document.createElement('p');
-    const myPara2 = document.createElement('p');
-    const myPara3 = document.createElement('p');
-    const myList = document.createElement('ul');
-
-    myH2.textContent = heroes[i].name;
-    myPara1.textContent = 'Secret identity: ' + heroes[i].secretIdentity;
-    myPara2.textContent = 'Age: ' + heroes[i].age;
-    myPara3.textContent = 'Superpowers:';
-
-    const superPowers = heroes[i].powers;
-    for (let j = 0; j < superPowers.length; j++) {
-      const listItem = document.createElement('li');
-      listItem.textContent = superPowers[j];
-      myList.appendChild(listItem);
-    }
-
-    myArticle.appendChild(myH2);
-    myArticle.appendChild(myPara1);
-    myArticle.appendChild(myPara2);
-    myArticle.appendChild(myPara3);
-    myArticle.appendChild(myList);
-
-    section.appendChild(myArticle);
-  }
-}
- -

To start with, we store the members property of the JavaScript object in a new variable. This array contains multiple objects that contain the information for each hero.

- -

Next, we use a for loop to loop through each object in the array. For each one, we:

- -
    -
  1. Create several new elements: an <article>, an <h2>, three <p>s, and a <ul>.
    2. -
  2. Set the <h2> to contain the current hero's name.
    3. -
  3. Fill the three paragraphs with their secretIdentity, age, and a line saying "Superpowers:" to introduce the information in the list.
    4. -
  4. Store the powers property in another new constant called superPowers — this contains an array that lists the current hero's superpowers.
    5. -
  5. Use another for loop to loop through the current hero's superpowers — for each one we create an <li> element, put the superpower inside it, then put the listItem inside the <ul> element (myList) using appendChild().
    6. -
  6. The very last thing we do is to append the <h2>, <p>s, and <ul> inside the <article> (myArticle), then append the <article> inside the <section>. The order in which things are appended is important, as this is the order they will be displayed inside the HTML.
    7. -
- -
-

Note: If you are having trouble getting the example to work, try referring to our heroes-finished.html source code (see it running live also.)

-
- -
-

Note: If you are having trouble following the dot/bracket notation we are using to access the JavaScript object, it can help to have the superheroes.json file open in another tab or your text editor, and refer to it as you look at our JavaScript. You should also refer back to our JavaScript object basics article for more information on dot and bracket notation.

-
- -

Converting between objects and text

- -

The above example was simple in terms of accessing the JavaScript object, because we set the XHR request to convert the JSON response directly into a JavaScript object using:

- -
request.responseType = 'json';
- -

But sometimes we aren't so lucky — sometimes we receive a raw JSON string, and we need to convert it to an object ourselves. And when we want to send a JavaScript object across the network, we need to convert it to JSON (a string) before sending. Luckily, these two problems are so common in web development that a built-in JSON object is available in browsers, which contains the following two methods:

- - - -

You can see the first one in action in our heroes-finished-json-parse.html example (see the source code) — this does exactly the same thing as the example we built up earlier, except that we set the XHR to return the raw JSON text, then used parse() to convert it to an actual JavaScript object. The key snippet of code is here:

- -
request.open('GET', requestURL);
-request.responseType = 'text'; // now we're getting a string!
-request.send();
-
-request.onload = function() {
-  const superHeroesText = request.response; // get the string from the response
-  const superHeroes = JSON.parse(superHeroesText); // convert it to an object
-  populateHeader(superHeroes);
-  showHeroes(superHeroes);
-}
- -

As you might guess, stringify() works the opposite way. Try entering the following lines into your browser's JavaScript console one by one to see it in action:

- -
let myJSON = { "name": "Chris", "age": "38" };
-myJSON
-let myString = JSON.stringify(myJSON);
-myString
- -

Here we're creating a JavaScript object, then checking what it contains, then converting it to a JSON string using stringify() — saving the return value in a new variable — then checking it again.

- -

Test your skills!

- -

You've reached the end of this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see Test your skills: JSON.

- -

Summary

- -

In this article, we've given you a simple guide to using JSON in your programs, including how to create and parse JSON, and how to access data locked inside it. In the next article, we'll begin looking at object-oriented JavaScript.

- -

See also

- - - -

{{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}}

- -

In this module

- - diff --git a/files/it/learn/server-side/django/introduction/index.html b/files/it/learn/server-side/django/introduction/index.html new file mode 100644 index 0000000000..4eb36683eb --- /dev/null +++ b/files/it/learn/server-side/django/introduction/index.html @@ -0,0 +1,281 @@ +--- +title: Introduzione a Django +slug: Learn/Server-side/Django/Introduzione +tags: + - Introduzione + - Learn + - Principianti + - Python + - django + - programmazione lato server +translation_of: Learn/Server-side/Django/Introduction +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django")}}
+ +
In questo primo articolo su Django risponderemo alla domanda "Cos'è Django?" e forniremo una panoramica su cosa rende speciale questo web framework. Andremo a sottolinearne le principali caratteristiche, incluse alcune delle funzionalità avanzate, che però in questo modulo non avremo tempo di presentare nel dettaglio. Mostreremo poi alcuni dei principali blocchi che compongono un'applicazione Django (sebbene a questo punto non dovreste ancora avere un ambiente di sviluppo in cui poterla testare).
+ + + + + + + + + + + + +
Prerequisiti: +

Conoscenza base del computer. Un'introduzione generale alla programmazione lato server, in particolare ai meccanismi di interazione client-server.

+
Obiettivo:Acquisire familiarità con l'ambiente Django: cos'è, come funziona, quali sono le principali funzionalità che mette a disposizione e i blocchi principali delle applicazioni Django.
+ +

Che cos'è Django?

+ +

Django è un framework web Python di alto livello che consente un rapido sviluppo di siti web sicuri e manutenibili. Costruito da sviluppatori esperti, Django si occupa di gran parte del problema dello sviluppo web, in modo da potersi concentrare sulla scrittura della propria app senza dover reinventare la ruota. È gratuito e open source, ha una comunità fiorente e attiva, un'ottima documentazione e molte opzioni per il supporto gratuito e a pagamento. 

+ +

Django vi aiuta a scrivere software che è:

+ +
+
Completo
+
Django segue la filosofia "Batterie incluse" e fornisce quasi tutto ciò che gli sviluppatori potrebbero voler fare "out of the box". Poiché tutto ciò di cui si ha bisogno è parte di un unico "prodotto", funziona tutto insieme senza soluzione di continuità, segue principi di progettazione coerenti e ha una vasta e aggiornata documentazione.
+
Versatile
+
Django può essere (ed è stato) utilizzato per costruire quasi ogni tipo di sito web - dai sistemi di gestione dei contenuti e wiki, fino ai social network e ai siti di notizie. Può funzionare con qualsiasi framework lato client, e può fornire contenuti in quasi tutti i formati (inclusi HTML, feed RSS, JSON, XML, ecc.). Il sito che state leggendo è basato su Django!
+
Internamente, mentre fornisce scelte per quasi tutte le funzionalità che si possono desiderare (ad esempio, diversi database popolari, motori di modellizzazione, ecc), può anche essere esteso per utilizzare altri componenti se necessario.
+
Sicuro
+
Django aiuta gli sviluppatori ad evitare molti errori di sicurezza comuni, fornendo un framework che è stato progettato per "fare le cose giuste" per proteggere automaticamente il sito web. Ad esempio, Django fornisce un modo sicuro per gestire gli account utente e le password, evitando i comuni errori come l'inserimento di informazioni di sessione nei cookie dove sono vulnerabili (i cookie contengono solo una chiave e i dati reali sono memorizzati nel database) o la memorizzazione diretta delle password piuttosto che l'hash della password.
+
Un hash della password è un valore di lunghezza fissa creato inviando la password attraverso una funzione di hash crittografico. Django può controllare se una password inserita è corretta eseguendola attraverso la funzione hash e confrontando l'uscita con il valore hash memorizzato. Tuttavia, a causa della natura "unidirezionale" della funzione, anche se un valore hash memorizzato è compromesso, è difficile per un aggressore elaborare la password originale.
+
Django consente la protezione contro molte vulnerabilità di default, tra cui SQL injection, cross-site scripting, cross-site request forgery e clickjacking (vedere Sicurezza del sito web per maggiori dettagli su tali attacchi).
+
Scalabile
+
Django utilizza un'architettura basata su componenti "shared-nothing" (ogni parte dell'architettura è indipendente dalle altre e può quindi essere sostituita o modificata se necessario). Avere una chiara separazione tra le diverse parti significa che può scalare per l'aumento del traffico aggiungendo hardware a qualsiasi livello: server di caching, server di database o server di applicazioni. Alcuni dei siti più trafficati hanno scalato con successo Django per soddisfare le loro richieste (ad esempio Instagram e Disqus, per citarne solo due).
+
Manutenibile
+
Il codice Django è scritto utilizzando principi di progettazione e modelli che incoraggiano la creazione di codice manutenibile e riutilizzabile. In particolare, si avvale del principio Don't Repeat Yourself (DRY) per evitare inutili duplicazioni, riducendo la quantità di codice. Django promuove anche il raggruppamento delle funzionalità correlate in "applicazioni" riutilizzabili e, ad un livello più basso, raggruppa il codice correlato in moduli (sulla falsariga del modello Model View Controller (MVC)).
+
Portabile
+
Django è scritto in Python, che funziona su molte piattaforme. Ciò significa che non siete legati a nessuna particolare piattaforma server e potete eseguire le vostre applicazioni su molti tipi di Linux, Windows e Mac OS X. Inoltre, Django è ben supportato da molti web hosting provider, che spesso forniscono infrastrutture e documentazione specifiche per l'hosting dei siti Django.
+
+ +

Da dove proviene?

+ +

Django è stato inizialmente sviluppato tra il 2003 e il 2005 da un team web che si occupava della creazione e della manutenzione dei siti web dei giornali. Dopo aver creato un certo numero di siti, il team ha iniziato a elaborare e riutilizzare un sacco di codice e modelli di design comuni. Questo codice comune si è evoluto in un generico framework di sviluppo web, che è stato "open-sourced" come progetto "Django" nel luglio 2005. 

+ +

Django ha continuato a crescere e migliorare, dalla sua prima release milestone (1.0) nel settembre 2008 fino alla recente versione 2.0 (2017). Ogni release ha aggiunto nuove funzionalità e correzioni di bug, che vanno dal supporto per nuovi tipi di database, motori di template e caching, fino all'aggiunta di funzioni di visualizzazione e classi "generiche" (che riducono la quantità di codice che gli sviluppatori devono scrivere per una serie di attività di programmazione). 

+ +
+

Nota: Date un'occhiata alle note di rilascio sul sito web di Django per vedere cosa è cambiato nelle ultime versioni, e quanto lavoro si sta facendo per rendere Django migliore.

+
+ +

Django è ora un progetto open source fiorente e collaborativo, con molte migliaia di utenti e collaboratori. Pur avendo ancora alcune caratteristiche che riflettono la sua origine, Django si è evoluto in un framework versatile in grado di sviluppare qualsiasi tipo di sito web. 

+ +

Quanto è popolare Django?

+ +

Non c'è una misura disponibile e definitiva della popolarità dei framework lato server (anche se siti come Hot Frameworks tentano di valutare la popolarità usando meccanismi come il conteggio del numero di progetti GitHub e le domande di StackOverflow per ogni piattaforma). Una domanda migliore è se Django è "abbastanza popolare" per scongiurare i problemi delle piattaforme poco popolari. Continua ad evolversi? Puoi chiedere aiuto se ne hai bisogno? C'è la possibilità di ottenere un lavoro retribuito se si impara Django? 

+ +

In base al numero di siti di alto profilo che utilizzano Django, al numero di persone che contribuiscono al codice e al numero di persone che forniscono supporto sia gratuito che a pagamento, allora sì, Django è un framework popolare!

+ +

I siti di alto profilo che utilizzano Django includono: Disqus, Instagram, Knight Foundation, MacArthur Foundation, Mozilla, National Geographic, Open Knowledge Foundation, Pinterest e Open Stack (fonte: home page di Django).

+ +

Django è dogmatico?

+ +

I framework web spesso si riferiscono a se stessi come "dogmatici" o "non dogmatici".

+ +

I framework dogmatici sono quelli che hanno dogmi sul "giusto modo" di gestire un particolare compito. Spesso supportano un rapido sviluppo in un particolare dominio (risolvere problemi di un particolare tipo) perché il modo giusto di fare qualsiasi cosa è di solito ben compreso e ben documentato. Tuttavia possono essere meno flessibili nel risolvere i problemi al di fuori del loro dominio principale e tendono ad offrire meno scelte per quali componenti e approcci si possono utilizzare.

+ +

I framework non dogmatici, al contrario, hanno molte meno restrizioni sul modo migliore per collegare i componenti per raggiungere un obiettivo, o anche su quali componenti usare. Con essi è più facile per gli sviluppatori utilizzare gli strumenti più adatti per completare un particolare compito, al anche se devono sostenere un dispendio di energie per trovare da soli quei componenti.

+ +

Django è "mediamente dogmatico", e quindi fornisce il "meglio di entrambi i mondi". Fornisce un insieme di componenti per gestire la maggior parte dei compiti di sviluppo web e uno (o due) modi preferiti per utilizzarli. Tuttavia, l'architettura disaccoppiata di Django significa che di solito è possibile scegliere tra una serie di opzioni diverse, o, se lo si desidera, aggiungere il supporto per quelle completamente nuove.

+ +

Che aspetto ha il codice di Django?

+ +

In un sito web tradizionale basato su dati, un'applicazione web attende le richieste HTTP dal browser web (o da un altro client). Quando una richiesta viene ricevuta, l'applicazione elabora ciò che è necessario in base all'URL ed eventualmente alle informazioni contenute nei dati POST o nei dati GET. A seconda di ciò che è richiesto, può quindi leggere o scrivere informazioni da un database o eseguire altri compiti necessari per soddisfare la richiesta. L'applicazione restituisce quindi una risposta al browser web, spesso creando dinamicamente una pagina HTML che il browser può visualizzare inserendo i dati recuperati nei segnaposto in un modello HTML.

+ +

Le applicazioni web Django tipicamente raggruppano il codice che gestisce ciascuno di questi passaggi in file separati:

+ + + +
+

Nota: Django si riferisce a questa organizzazione come all'architettura "Model View Template (MVT)". Ha molte somiglianze con la più familiare architettura del Model View Controller.

+
+ + + +

Le sezioni seguenti vi daranno un'idea di come sono fatte queste parti principali di un'applicazione Django (approfondiremo i dettagli più avanti nel corso, una volta creato un ambiente di sviluppo).

+ +

Inviare la richiesta alla vista giusta (urls.py)

+ +

Un URL mapper è tipicamente memorizzato in un file chiamato urls.py. Nell'esempio seguente, il mapper (urlpatterns) definisce una lista di mappature tra le routes (specifici URL patterns ) e le corrispondenti funzioni di visualizzazione (view). Se viene ricevuta una richiesta HTTP che ha un URL che corrisponde a uno specifico pattern, allora la funzione di view associata sarà chiamata e passerà la richiesta.

+ +
urlpatterns = [
+    path('admin/', admin.site.urls),
+    path('book/<int:id>/', views.book_detail, name='book_detail'),
+    path('catalog/', include('catalog.urls')),
+    re_path(r'^([0-9]+)/$', views.best),
+]
+
+ +

L'oggetto urlpatterns è una lista di funzioni path() e/o re_path() (le liste Python sono definite usando parentesi quadre, dove gli elementi sono separati da virgole e possono avere una virgola di tracciamento opzionale. Per esempio: [item1, item2, item3,]).

+ +

Il primo argomento per entrambi i metodi è il percorso (pattern) che sarà abbinato. Il metodo path() usa le parentesi angolari per definire le parti di un URL che saranno catturate e passate alla funzione di visualizzazione come argomenti. La funzione re_path() usa un approccio flessibile per la corrispondenza dei pattern, noto come espressione regolare. Ne parleremo in un articolo successivo!

+ +

Il secondo argomento è la funzione che viene chiamata in abbinamento al pattern. La notazione views.book_detail indica che la funzione chiamata book_detail() può essere trovata in un modulo chiamato views (cioè all'interno di un file chiamato views.py)

+ +

Gestione della richiesta (views.py)

+ +

Le views sono il cuore dell'applicazione web, ricevono le richieste HTTP dai client web e restituiscono le risposte HTTP. Nel mezzo, esse mettono a disposizione le altre risorse del framework per accedere ai database, rendere i modelli, ecc. 

+ +

L'esempio seguente mostra una minima funzione di view index(), che avrebbe potuto essere chiamata dal nostro URL mapper nella sezione precedente.  Come tutte le funzioni di view riceve un oggetto HttpRequest come parametro (request) e restituisce un oggetto HttpResponse. In questo caso non facciamo nulla con la richiesta, e la nostra risposta restituisce semplicemente una stringa codificata. Vi mostreremo una richiesta che fa qualcosa di più interessante in una sezione successiva.

+ +
# filename: views.py (Django view functions)
+
+from django.http import HttpResponse
+
+def index(request):
+    # Get an HttpRequest - the request parameter
+    # perform operations using information from the request.
+    # Return HttpResponse
+    return HttpResponse('Hello from Django!')
+
+ +
+

Nota: Un po' di Python:

+ + +
+ + + +

Le views sono solitamente salvate in un file chiamato views.py.

+ +

Definizione dei modelli di dati (models.py)

+ +

Le applicazioni web Django gestiscono e interrogano i dati attraverso oggetti Python chiamati modelli (models). I modelli definiscono la struttura dei dati memorizzati, inclusi i tipi di campo ed eventualmente anche la loro dimensione massima, i valori di default, le opzioni della lista di selezione, il testo di aiuto per la documentazione, il testo dell'etichetta per i moduli, ecc. La definizione del modello è indipendente dal database sottostante - è possibile scegliere uno dei diversi modelli come parte delle impostazioni del progetto. Una volta scelto il database che si vuole utilizzare, non è necessario parlare direttamente con esso - basta scrivere la struttura del modello e altro codice, e Django si occupa per voi di tutto il lavoro sporco di comunicazione con il database.

+ +

Il frammento di codice qui sotto mostra un modello Django molto semplice per un oggetto Team. La classe Team è derivata dalla classe django model.Model. Essa definisce il nome del team e il livello del team come campi di caratteri e specifica un numero massimo di caratteri da memorizzare per ogni record. Il team_level può essere uno dei diversi valori, quindi lo definiamo come un campo di scelta e forniamo una mappatura tra le scelte da visualizzare e i dati da memorizzare, insieme ad un valore predefinito. 

+ +
# filename: models.py
+
+from django.db import models
+
+class Team(models.Model):
+    team_name = models.CharField(max_length=40)
+
+    TEAM_LEVELS = (
+        ('U09', 'Under 09s'),
+        ('U10', 'Under 10s'),
+        ('U11', 'Under 11s'),
+        ...  #list other team levels
+    )
+    team_level = models.CharField(max_length=3, choices=TEAM_LEVELS, default='U11')
+
+ +
+

Nota: Un po' di Python:

+ + +
+ +

Interrogare i dati (views.py)

+ +

Il modello Django fornisce una semplice API di interrogazione per la ricerca nel database. Questa può essere confrontata con una serie di campi alla volta utilizzando diversi criteri (ad es. esatto, non sensibile alle maiuscole, maggiore di, ecc.), e può supportare affermazioni complesse (ad esempio, è possibile specificare una ricerca su squadre U11 che hanno un nome di squadra che inizia con "Fr" o finisce con "al"). 

+ +

Il frammento di codice mostra una funzione di visualizzazione (gestore di risorse) per la visualizzazione di tutti i nostri team U09. La linea in grassetto mostra come possiamo usare l'API della query del modello per filtrare per tutti i record dove il campo team_level ha esattamente il testo 'U09' (notare come questo criterio è passato alla funzione filter() come argomento con il nome del campo e il tipo di match separati da un doppio underscore: team_level__exact).

+ +
## filename: views.py
+
+from django.shortcuts import render
+from .models import Team
+
+def index(request):
+    list_teams = Team.objects.filter(team_level__exact="U09")
+    context = {'youngest_teams': list_teams}
+    return render(request, '/best/index.html', context)
+
+ +
+
+ +

Questa funzione utilizza la funzione render() per creare la HttpResponse che viene inviata al browser. Questa funzione è una scorciatoia; crea un file HTML combinando un template HTML specificato e alcuni dati da inserire nel template (forniti nella variabile denominata "context"). Nella sezione successiva mostriamo come il template ha i dati inseriti per creare l'HTML.

+ +

Visualizzazione dei dati (HTML templates)

+ +

I sistemi di template consentono di specificare la struttura di un documento di output, utilizzando dei segnaposto per i dati che verranno compilati al momento della generazione di una pagina. I template sono spesso usati per creare HTML, ma possono anche creare altri tipi di documenti. Django supporta sia il suo sistema di template nativo che un'altra popolare libreria Python chiamata Jinja2 out of the box (può anche essere realizzata per supportare altri sistemi se necessario). 

+ +

Il frammento di codice mostra come potrebbe apparire il template HTML chiamato dalla funzione render() nella sezione precedente. Questo template è stato scritto partendo dal presupposto che avrà accesso ad una variabile di lista chiamata youngest_teams al momento del rendering (contenuta nella variabile context all'interno della funzione render() di cui sopra). All'interno dello scheletro HTML abbiamo un'espressione che prima controlla se la variabile youngest_teams esiste, e poi la itera in un ciclo for. Su ogni iterazione il template mostra il valore team_name di ogni squadra in un elemento {{htmlelement("li")}}.

+ +
## filename: best/templates/best/index.html
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Home page</title>
+</head>
+<body>
+  {% if youngest_teams %}
+    <ul>
+      {% for team in youngest_teams %}
+        <li>\{\{ team.team_name \}\}</li>
+      {% endfor %}
+    </ul>
+  {% else %}
+    <p>No teams are available.</p>
+  {% endif %}
+</body>
+</html>
+ +

Cos'altro si può fare?

+ +

Le sezioni precedenti mostrano le principali caratteristiche che utilizzerete in quasi tutte le applicazioni web: URL mapping, views, modelli e templates. Solo alcune delle altre cose fornite da Django includono: 

+ + + +

Sommario

+ +

Congratulazioni, hai completato il primo passo del tuo viaggio Django! Ora dovreste aver compreso i principali vantaggi di Django, un po' della sua storia e più o meno come potrebbero essere le parti principali di un'applicazione Django. Dovreste anche aver imparato alcune cose sul linguaggio di programmazione Python, compresa la sintassi per le liste, le funzioni e le classi.

+ +

Avete già visto un po' di vero codice Django qui sopra, ma a differenza del codice lato client, è necessario impostare un ambiente di sviluppo per eseguirlo. Questo è il nostro prossimo passo.
+  

+ +
{{NextMenu("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django")}}
+ +

In this module

+ + diff --git a/files/it/learn/server-side/django/introduzione/index.html b/files/it/learn/server-side/django/introduzione/index.html deleted file mode 100644 index 4eb36683eb..0000000000 --- a/files/it/learn/server-side/django/introduzione/index.html +++ /dev/null @@ -1,281 +0,0 @@ ---- -title: Introduzione a Django -slug: Learn/Server-side/Django/Introduzione -tags: - - Introduzione - - Learn - - Principianti - - Python - - django - - programmazione lato server -translation_of: Learn/Server-side/Django/Introduction ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django")}}
- -
In questo primo articolo su Django risponderemo alla domanda "Cos'è Django?" e forniremo una panoramica su cosa rende speciale questo web framework. Andremo a sottolinearne le principali caratteristiche, incluse alcune delle funzionalità avanzate, che però in questo modulo non avremo tempo di presentare nel dettaglio. Mostreremo poi alcuni dei principali blocchi che compongono un'applicazione Django (sebbene a questo punto non dovreste ancora avere un ambiente di sviluppo in cui poterla testare).
- - - - - - - - - - - - -
Prerequisiti: -

Conoscenza base del computer. Un'introduzione generale alla programmazione lato server, in particolare ai meccanismi di interazione client-server.

-
Obiettivo:Acquisire familiarità con l'ambiente Django: cos'è, come funziona, quali sono le principali funzionalità che mette a disposizione e i blocchi principali delle applicazioni Django.
- -

Che cos'è Django?

- -

Django è un framework web Python di alto livello che consente un rapido sviluppo di siti web sicuri e manutenibili. Costruito da sviluppatori esperti, Django si occupa di gran parte del problema dello sviluppo web, in modo da potersi concentrare sulla scrittura della propria app senza dover reinventare la ruota. È gratuito e open source, ha una comunità fiorente e attiva, un'ottima documentazione e molte opzioni per il supporto gratuito e a pagamento. 

- -

Django vi aiuta a scrivere software che è:

- -
-
Completo
-
Django segue la filosofia "Batterie incluse" e fornisce quasi tutto ciò che gli sviluppatori potrebbero voler fare "out of the box". Poiché tutto ciò di cui si ha bisogno è parte di un unico "prodotto", funziona tutto insieme senza soluzione di continuità, segue principi di progettazione coerenti e ha una vasta e aggiornata documentazione.
-
Versatile
-
Django può essere (ed è stato) utilizzato per costruire quasi ogni tipo di sito web - dai sistemi di gestione dei contenuti e wiki, fino ai social network e ai siti di notizie. Può funzionare con qualsiasi framework lato client, e può fornire contenuti in quasi tutti i formati (inclusi HTML, feed RSS, JSON, XML, ecc.). Il sito che state leggendo è basato su Django!
-
Internamente, mentre fornisce scelte per quasi tutte le funzionalità che si possono desiderare (ad esempio, diversi database popolari, motori di modellizzazione, ecc), può anche essere esteso per utilizzare altri componenti se necessario.
-
Sicuro
-
Django aiuta gli sviluppatori ad evitare molti errori di sicurezza comuni, fornendo un framework che è stato progettato per "fare le cose giuste" per proteggere automaticamente il sito web. Ad esempio, Django fornisce un modo sicuro per gestire gli account utente e le password, evitando i comuni errori come l'inserimento di informazioni di sessione nei cookie dove sono vulnerabili (i cookie contengono solo una chiave e i dati reali sono memorizzati nel database) o la memorizzazione diretta delle password piuttosto che l'hash della password.
-
Un hash della password è un valore di lunghezza fissa creato inviando la password attraverso una funzione di hash crittografico. Django può controllare se una password inserita è corretta eseguendola attraverso la funzione hash e confrontando l'uscita con il valore hash memorizzato. Tuttavia, a causa della natura "unidirezionale" della funzione, anche se un valore hash memorizzato è compromesso, è difficile per un aggressore elaborare la password originale.
-
Django consente la protezione contro molte vulnerabilità di default, tra cui SQL injection, cross-site scripting, cross-site request forgery e clickjacking (vedere Sicurezza del sito web per maggiori dettagli su tali attacchi).
-
Scalabile
-
Django utilizza un'architettura basata su componenti "shared-nothing" (ogni parte dell'architettura è indipendente dalle altre e può quindi essere sostituita o modificata se necessario). Avere una chiara separazione tra le diverse parti significa che può scalare per l'aumento del traffico aggiungendo hardware a qualsiasi livello: server di caching, server di database o server di applicazioni. Alcuni dei siti più trafficati hanno scalato con successo Django per soddisfare le loro richieste (ad esempio Instagram e Disqus, per citarne solo due).
-
Manutenibile
-
Il codice Django è scritto utilizzando principi di progettazione e modelli che incoraggiano la creazione di codice manutenibile e riutilizzabile. In particolare, si avvale del principio Don't Repeat Yourself (DRY) per evitare inutili duplicazioni, riducendo la quantità di codice. Django promuove anche il raggruppamento delle funzionalità correlate in "applicazioni" riutilizzabili e, ad un livello più basso, raggruppa il codice correlato in moduli (sulla falsariga del modello Model View Controller (MVC)).
-
Portabile
-
Django è scritto in Python, che funziona su molte piattaforme. Ciò significa che non siete legati a nessuna particolare piattaforma server e potete eseguire le vostre applicazioni su molti tipi di Linux, Windows e Mac OS X. Inoltre, Django è ben supportato da molti web hosting provider, che spesso forniscono infrastrutture e documentazione specifiche per l'hosting dei siti Django.
-
- -

Da dove proviene?

- -

Django è stato inizialmente sviluppato tra il 2003 e il 2005 da un team web che si occupava della creazione e della manutenzione dei siti web dei giornali. Dopo aver creato un certo numero di siti, il team ha iniziato a elaborare e riutilizzare un sacco di codice e modelli di design comuni. Questo codice comune si è evoluto in un generico framework di sviluppo web, che è stato "open-sourced" come progetto "Django" nel luglio 2005. 

- -

Django ha continuato a crescere e migliorare, dalla sua prima release milestone (1.0) nel settembre 2008 fino alla recente versione 2.0 (2017). Ogni release ha aggiunto nuove funzionalità e correzioni di bug, che vanno dal supporto per nuovi tipi di database, motori di template e caching, fino all'aggiunta di funzioni di visualizzazione e classi "generiche" (che riducono la quantità di codice che gli sviluppatori devono scrivere per una serie di attività di programmazione). 

- -
-

Nota: Date un'occhiata alle note di rilascio sul sito web di Django per vedere cosa è cambiato nelle ultime versioni, e quanto lavoro si sta facendo per rendere Django migliore.

-
- -

Django è ora un progetto open source fiorente e collaborativo, con molte migliaia di utenti e collaboratori. Pur avendo ancora alcune caratteristiche che riflettono la sua origine, Django si è evoluto in un framework versatile in grado di sviluppare qualsiasi tipo di sito web. 

- -

Quanto è popolare Django?

- -

Non c'è una misura disponibile e definitiva della popolarità dei framework lato server (anche se siti come Hot Frameworks tentano di valutare la popolarità usando meccanismi come il conteggio del numero di progetti GitHub e le domande di StackOverflow per ogni piattaforma). Una domanda migliore è se Django è "abbastanza popolare" per scongiurare i problemi delle piattaforme poco popolari. Continua ad evolversi? Puoi chiedere aiuto se ne hai bisogno? C'è la possibilità di ottenere un lavoro retribuito se si impara Django? 

- -

In base al numero di siti di alto profilo che utilizzano Django, al numero di persone che contribuiscono al codice e al numero di persone che forniscono supporto sia gratuito che a pagamento, allora sì, Django è un framework popolare!

- -

I siti di alto profilo che utilizzano Django includono: Disqus, Instagram, Knight Foundation, MacArthur Foundation, Mozilla, National Geographic, Open Knowledge Foundation, Pinterest e Open Stack (fonte: home page di Django).

- -

Django è dogmatico?

- -

I framework web spesso si riferiscono a se stessi come "dogmatici" o "non dogmatici".

- -

I framework dogmatici sono quelli che hanno dogmi sul "giusto modo" di gestire un particolare compito. Spesso supportano un rapido sviluppo in un particolare dominio (risolvere problemi di un particolare tipo) perché il modo giusto di fare qualsiasi cosa è di solito ben compreso e ben documentato. Tuttavia possono essere meno flessibili nel risolvere i problemi al di fuori del loro dominio principale e tendono ad offrire meno scelte per quali componenti e approcci si possono utilizzare.

- -

I framework non dogmatici, al contrario, hanno molte meno restrizioni sul modo migliore per collegare i componenti per raggiungere un obiettivo, o anche su quali componenti usare. Con essi è più facile per gli sviluppatori utilizzare gli strumenti più adatti per completare un particolare compito, al anche se devono sostenere un dispendio di energie per trovare da soli quei componenti.

- -

Django è "mediamente dogmatico", e quindi fornisce il "meglio di entrambi i mondi". Fornisce un insieme di componenti per gestire la maggior parte dei compiti di sviluppo web e uno (o due) modi preferiti per utilizzarli. Tuttavia, l'architettura disaccoppiata di Django significa che di solito è possibile scegliere tra una serie di opzioni diverse, o, se lo si desidera, aggiungere il supporto per quelle completamente nuove.

- -

Che aspetto ha il codice di Django?

- -

In un sito web tradizionale basato su dati, un'applicazione web attende le richieste HTTP dal browser web (o da un altro client). Quando una richiesta viene ricevuta, l'applicazione elabora ciò che è necessario in base all'URL ed eventualmente alle informazioni contenute nei dati POST o nei dati GET. A seconda di ciò che è richiesto, può quindi leggere o scrivere informazioni da un database o eseguire altri compiti necessari per soddisfare la richiesta. L'applicazione restituisce quindi una risposta al browser web, spesso creando dinamicamente una pagina HTML che il browser può visualizzare inserendo i dati recuperati nei segnaposto in un modello HTML.

- -

Le applicazioni web Django tipicamente raggruppano il codice che gestisce ciascuno di questi passaggi in file separati:

- - - -
-

Nota: Django si riferisce a questa organizzazione come all'architettura "Model View Template (MVT)". Ha molte somiglianze con la più familiare architettura del Model View Controller.

-
- - - -

Le sezioni seguenti vi daranno un'idea di come sono fatte queste parti principali di un'applicazione Django (approfondiremo i dettagli più avanti nel corso, una volta creato un ambiente di sviluppo).

- -

Inviare la richiesta alla vista giusta (urls.py)

- -

Un URL mapper è tipicamente memorizzato in un file chiamato urls.py. Nell'esempio seguente, il mapper (urlpatterns) definisce una lista di mappature tra le routes (specifici URL patterns ) e le corrispondenti funzioni di visualizzazione (view). Se viene ricevuta una richiesta HTTP che ha un URL che corrisponde a uno specifico pattern, allora la funzione di view associata sarà chiamata e passerà la richiesta.

- -
urlpatterns = [
-    path('admin/', admin.site.urls),
-    path('book/<int:id>/', views.book_detail, name='book_detail'),
-    path('catalog/', include('catalog.urls')),
-    re_path(r'^([0-9]+)/$', views.best),
-]
-
- -

L'oggetto urlpatterns è una lista di funzioni path() e/o re_path() (le liste Python sono definite usando parentesi quadre, dove gli elementi sono separati da virgole e possono avere una virgola di tracciamento opzionale. Per esempio: [item1, item2, item3,]).

- -

Il primo argomento per entrambi i metodi è il percorso (pattern) che sarà abbinato. Il metodo path() usa le parentesi angolari per definire le parti di un URL che saranno catturate e passate alla funzione di visualizzazione come argomenti. La funzione re_path() usa un approccio flessibile per la corrispondenza dei pattern, noto come espressione regolare. Ne parleremo in un articolo successivo!

- -

Il secondo argomento è la funzione che viene chiamata in abbinamento al pattern. La notazione views.book_detail indica che la funzione chiamata book_detail() può essere trovata in un modulo chiamato views (cioè all'interno di un file chiamato views.py)

- -

Gestione della richiesta (views.py)

- -

Le views sono il cuore dell'applicazione web, ricevono le richieste HTTP dai client web e restituiscono le risposte HTTP. Nel mezzo, esse mettono a disposizione le altre risorse del framework per accedere ai database, rendere i modelli, ecc. 

- -

L'esempio seguente mostra una minima funzione di view index(), che avrebbe potuto essere chiamata dal nostro URL mapper nella sezione precedente.  Come tutte le funzioni di view riceve un oggetto HttpRequest come parametro (request) e restituisce un oggetto HttpResponse. In questo caso non facciamo nulla con la richiesta, e la nostra risposta restituisce semplicemente una stringa codificata. Vi mostreremo una richiesta che fa qualcosa di più interessante in una sezione successiva.

- -
# filename: views.py (Django view functions)
-
-from django.http import HttpResponse
-
-def index(request):
-    # Get an HttpRequest - the request parameter
-    # perform operations using information from the request.
-    # Return HttpResponse
-    return HttpResponse('Hello from Django!')
-
- -
-

Nota: Un po' di Python:

- - -
- - - -

Le views sono solitamente salvate in un file chiamato views.py.

- -

Definizione dei modelli di dati (models.py)

- -

Le applicazioni web Django gestiscono e interrogano i dati attraverso oggetti Python chiamati modelli (models). I modelli definiscono la struttura dei dati memorizzati, inclusi i tipi di campo ed eventualmente anche la loro dimensione massima, i valori di default, le opzioni della lista di selezione, il testo di aiuto per la documentazione, il testo dell'etichetta per i moduli, ecc. La definizione del modello è indipendente dal database sottostante - è possibile scegliere uno dei diversi modelli come parte delle impostazioni del progetto. Una volta scelto il database che si vuole utilizzare, non è necessario parlare direttamente con esso - basta scrivere la struttura del modello e altro codice, e Django si occupa per voi di tutto il lavoro sporco di comunicazione con il database.

- -

Il frammento di codice qui sotto mostra un modello Django molto semplice per un oggetto Team. La classe Team è derivata dalla classe django model.Model. Essa definisce il nome del team e il livello del team come campi di caratteri e specifica un numero massimo di caratteri da memorizzare per ogni record. Il team_level può essere uno dei diversi valori, quindi lo definiamo come un campo di scelta e forniamo una mappatura tra le scelte da visualizzare e i dati da memorizzare, insieme ad un valore predefinito. 

- -
# filename: models.py
-
-from django.db import models
-
-class Team(models.Model):
-    team_name = models.CharField(max_length=40)
-
-    TEAM_LEVELS = (
-        ('U09', 'Under 09s'),
-        ('U10', 'Under 10s'),
-        ('U11', 'Under 11s'),
-        ...  #list other team levels
-    )
-    team_level = models.CharField(max_length=3, choices=TEAM_LEVELS, default='U11')
-
- -
-

Nota: Un po' di Python:

- - -
- -

Interrogare i dati (views.py)

- -

Il modello Django fornisce una semplice API di interrogazione per la ricerca nel database. Questa può essere confrontata con una serie di campi alla volta utilizzando diversi criteri (ad es. esatto, non sensibile alle maiuscole, maggiore di, ecc.), e può supportare affermazioni complesse (ad esempio, è possibile specificare una ricerca su squadre U11 che hanno un nome di squadra che inizia con "Fr" o finisce con "al"). 

- -

Il frammento di codice mostra una funzione di visualizzazione (gestore di risorse) per la visualizzazione di tutti i nostri team U09. La linea in grassetto mostra come possiamo usare l'API della query del modello per filtrare per tutti i record dove il campo team_level ha esattamente il testo 'U09' (notare come questo criterio è passato alla funzione filter() come argomento con il nome del campo e il tipo di match separati da un doppio underscore: team_level__exact).

- -
## filename: views.py
-
-from django.shortcuts import render
-from .models import Team
-
-def index(request):
-    list_teams = Team.objects.filter(team_level__exact="U09")
-    context = {'youngest_teams': list_teams}
-    return render(request, '/best/index.html', context)
-
- -
-
- -

Questa funzione utilizza la funzione render() per creare la HttpResponse che viene inviata al browser. Questa funzione è una scorciatoia; crea un file HTML combinando un template HTML specificato e alcuni dati da inserire nel template (forniti nella variabile denominata "context"). Nella sezione successiva mostriamo come il template ha i dati inseriti per creare l'HTML.

- -

Visualizzazione dei dati (HTML templates)

- -

I sistemi di template consentono di specificare la struttura di un documento di output, utilizzando dei segnaposto per i dati che verranno compilati al momento della generazione di una pagina. I template sono spesso usati per creare HTML, ma possono anche creare altri tipi di documenti. Django supporta sia il suo sistema di template nativo che un'altra popolare libreria Python chiamata Jinja2 out of the box (può anche essere realizzata per supportare altri sistemi se necessario). 

- -

Il frammento di codice mostra come potrebbe apparire il template HTML chiamato dalla funzione render() nella sezione precedente. Questo template è stato scritto partendo dal presupposto che avrà accesso ad una variabile di lista chiamata youngest_teams al momento del rendering (contenuta nella variabile context all'interno della funzione render() di cui sopra). All'interno dello scheletro HTML abbiamo un'espressione che prima controlla se la variabile youngest_teams esiste, e poi la itera in un ciclo for. Su ogni iterazione il template mostra il valore team_name di ogni squadra in un elemento {{htmlelement("li")}}.

- -
## filename: best/templates/best/index.html
-
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>Home page</title>
-</head>
-<body>
-  {% if youngest_teams %}
-    <ul>
-      {% for team in youngest_teams %}
-        <li>\{\{ team.team_name \}\}</li>
-      {% endfor %}
-    </ul>
-  {% else %}
-    <p>No teams are available.</p>
-  {% endif %}
-</body>
-</html>
- -

Cos'altro si può fare?

- -

Le sezioni precedenti mostrano le principali caratteristiche che utilizzerete in quasi tutte le applicazioni web: URL mapping, views, modelli e templates. Solo alcune delle altre cose fornite da Django includono: 

- - - -

Sommario

- -

Congratulazioni, hai completato il primo passo del tuo viaggio Django! Ora dovreste aver compreso i principali vantaggi di Django, un po' della sua storia e più o meno come potrebbero essere le parti principali di un'applicazione Django. Dovreste anche aver imparato alcune cose sul linguaggio di programmazione Python, compresa la sintassi per le liste, le funzioni e le classi.

- -

Avete già visto un po' di vero codice Django qui sopra, ma a differenza del codice lato client, è necessario impostare un ambiente di sviluppo per eseguirlo. Questo è il nostro prossimo passo.
-  

- -
{{NextMenu("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django")}}
- -

In this module

- - diff --git a/files/it/link_prefetching_faq/index.html b/files/it/link_prefetching_faq/index.html deleted file mode 100644 index 41a0e183c1..0000000000 --- a/files/it/link_prefetching_faq/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -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

- - -
- -

{{ languages( { "en": "en/Link_prefetching_FAQ" } ) }}

diff --git a/files/it/localization/index.html b/files/it/localization/index.html deleted file mode 100644 index 678f3670ed..0000000000 --- a/files/it/localization/index.html +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: Localization -slug: Localization -tags: - - Da_unire - - Tutte_le_categorie -translation_of: Glossary/Localization ---- -

La localizzazione è il processo di traduzione delle interfacce utente di un software da un linguaggio a un altro adattandolo anche a una cultura straniera. Queste risorse servono ad aiutare la localizzazione delle applicazioni e delle estensioni basate su Mozilla.

-

{{ languages( { "es": "es/Localizaci\u00f3n", "fr": "fr/Localisation", "ja": "ja/Localization", "pl": "pl/Lokalizacja", "pt": "pt/Localiza\u00e7\u00e3o" } ) }}

diff --git a/files/it/mdn/at_ten/index.html b/files/it/mdn/at_ten/index.html new file mode 100644 index 0000000000..ab7c64d1ad --- /dev/null +++ b/files/it/mdn/at_ten/index.html @@ -0,0 +1,41 @@ +--- +title: 10 anni di MDN +slug: MDN_at_ten +tags: + - History + - Landing + - MDN Meta +translation_of: MDN_at_ten +--- +

Celebra 10 anni di documentazione Web.

+ +
+
+

La storia di MDN

+ +

All'inizio del 2005 una piccola squadra di idealisti si unì per creare una nuova raccolta di risorse per gli sviluppatori web che fosse gratuita e costruita dalla comunità. Dalla loro idea tanto brillante quanto anticonformista crebbe il Mozilla Developer Network che conosciamo oggi, ovvero la principale fonte di risorse per tutte le tecnologie web aperte. Dieci anni più tardi la nostra comunità globale è più grande che mai e continuiamo ancora a creare documentazione, codice d'esempio, risorse relative a tutte le tecnologie web open, incluse CSS, HTML e Javascript, e tutti gli strumenti che rendono l'open Web all'avanguardia.

+ +

Scopri di più about the history

+ + +

Collaborare a MDN

+ +

Da dieci anni la community di MDN sta documentando l'open Web. Dalla correzione di semplici errori di battitura fino ad arrivare allo sviluppo di API completamente nuove, tutti hanno qualcosa da offrire e non esistono contributi troppo piccoli o troppo grandi. MDN annovera oltre 90.000 pagine scritte o tradotte da membri della nostra fantastica comunità di Mozillians. Anche tu puoi diventare uno di loro, anzi, uno di noi.

+ +

Scopri di più about contributing

+ +

 

+ +

 

+
+ +
{{TenthCampaignQuote}}
+ +

Vedi anche

+ +
    +
  1. 10 anni di MDN
    2. +
  2. La storia di MDN
    3. +
  3. Contribuire a MDN
    4. +
+
diff --git a/files/it/mdn/community/index.html b/files/it/mdn/community/index.html deleted file mode 100644 index 14a121baca..0000000000 --- a/files/it/mdn/community/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: Join the MDN community -slug: MDN/Community -translation_of: MDN/Community ---- -
{{MDNSidebar}}
- -

{{IncludeSubnav("/it-IT/docs/MDN")}}

- -
-

MDN (l'abbreviazione sta per Mozilla Developer Network) è più di un wiki: è una comunità di sviluppatore che lavorano insieme per rendere MDN una risorsa eccezionale per gli sviluppatori che usano le tecnologie web di tipo open.

-
- -

Ci fa piacere se contribuisci a MDN, ma ci piacerebbe ancora di più se tu partecipassi alla community di MDN. Ecco come puoi connetterti, in tre facili passi:

- -
    -
  1. Crea un account MDN.
    2. -
  2. Unisciti a una conversazione.
    3. -
  3. Segui ciò che avviene.
    4. -
- -

Come lavora la community

- -

Quelli che seguono sono articoli aggiuntivi per descrivere la community di MDN.

- -
-
-
-
Regole della Community
-
Ci sono alcuni ruoli nella community di MDN che hanno specifiche responsabilità.
-
Sprint di documentazione
-
Questa è una guida per organizzare uno sprint documentale. Contiene consigli e trucchi forniti da chi ne ha organizzati, per fare in modo che anche tu ne possa organizzarne uno.
-
Segui cosa succede
-
MDN ti viene proposto dalla community del Mozilla Developer Network. Questi sono alcuni modi che utilizziamo per condividere le informazioni circa ciò che facciamo.
-
- -
-
-
- -
-
-
Conversazioni nella community di MDN
-
Il "lavoro" di MDN avviene sul sito MDN, ma la "community" appare anche in discussioni (di tipo asincrono) e chat e meeting (di tipo sincrono).
-
Lavorare nella community
-
Una parte interessante nel contribuire alla documentazione di MDN a qualsiasi livello  è capire come lavorare come parte della community di MDN. Questo articolo offre consigli per aiutarti a gestire la maggior parte delle interazioni sia con altri autori che con team di sviluppo.
-
-
-
diff --git a/files/it/mdn/contribute/creating_and_editing_pages/index.html b/files/it/mdn/contribute/creating_and_editing_pages/index.html deleted file mode 100644 index 2ffa7888a4..0000000000 --- a/files/it/mdn/contribute/creating_and_editing_pages/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: 'creare., edizione paginaCreazione e modifica delle pagine' -slug: MDN/Contribute/Creating_and_editing_pages -translation_of: MDN/Contribute/Howto/Create_and_edit_pages ---- -
{{MDNSidebar}}

Modificare e creare una pagina sono le due attività più comuni per la maggior parte dei  COLLABORATORI MDN.  Questo articolo spiega come eseguire queste due operazioni.

- -

Modificare una pagina esistente

- -

E' facile modificare-

- - - -

Anteprima delle modifiche

- -

Per osservare le tue modifiche-

- - - -

Attenzione! L'anteprima di una pagina non salva i tuoi cambiamenti, quindi ricorda di non chiudere la finestra in cui stai modificando.

- -

Commenti di correzione

- -

Dopo aver visualizzato i cambiamenti, vorrai salvare la tua revisione. Prima di salvare, verfica i commenti di correzione nella finestra sotto la sezione del titolo e lascia un commento per informare gli altri collaboratori sul perchè hai effettuato qualche cambiamento. Per esempio, potresti aver aggiunto una nuova sezione, cambiato qualche parole per rendere la terminologia più appropriata, riscritto un paragrafo per renderlo più chiaro, oppure rimosso informazioni ridondanti.

- -

Tags

- -

Puoi aggiungere o rimuovere etichette che descrivono il contenuto della pagina e funzioni sotto la sezione di modifica della pagina. Visita Come taggare in modo appropriato una pagina per avere informazioni su quali etichette applicare.

- -

Revisione necessaria?

- -

Se un esperto o un collaboratore esperto dovrebbe controllare le tue modifiche, puoi richiedere una revisione tecnica (per codice, API o tecnologie), una revisione editoriale (per forma, grammatica e contenuto), oppure una revisione della rappresentazione (per il codice KumaScript) facendo una spunta nel box prima di salvare.

- -

Allegare file

- -

Se volessi allegare un file ad una pagina esistente per aggiungere un'illustrazione oppure ulteriori chiarimenti, puoi farlo a fondo pagina.

- -

Salvare, scartare o continuare a modificare

- -

Quando hai terminato di modificare e sei soddisfatto dell'anteprima, puoi salvare il tuo lavoro e i tuoi commenti cliccando "Salva cambiamenti" (in verde) a destra del titolo della pagina. Se cambi idea, puoi scartare le tue modifiche cliccando su "Scarta cambiamenti" (in rosso) a destra del titolo della pagina.

- -

Premendo invio nel campo commenti di revisione equivale a cliccare "Salva e continua a modificare".

- -

Creare una nuova pagina

- -

Se non sai dove inserire un nuovo articolo, non preoccuparti! Mettilo ovunque, noi lo troveremo e lo sposteremo nel posto giusto o lo aggiungeremo ad un contenuto esistente se è più sensato. Inoltre non preoccuparti di renderlo perfetto. Abbiamo aiutanti gnomi che saranno felici di migliorare il tuo contenuto.

- -

Ci sono alcuni modi di creare una nuova pagina:

- - - -

Collegamento da una pagina esistente

- -
    -
  1. Inserisci il nome della nuova pagina ovunque abbia senso nel testo di una pagina esistente.
    2. -
  2. Evidenzia il nome e clicca l'icona Link () nella barra degli strumenti di modifica. La finestra di dialogo "Update Link" si apre, con il testo evidenziato nel campo "Link To".
    3. -
  3. "/en-US/docs/"  viene inserito di default all'inizio del campo URL. Inserisci il nome della pagina dopo "/en-US/docs/". (Il nome della pagina non deve essere lo stesso del link.)
    4. -
  4. Clicca OK per creare e inserire il link.
    5. -
- -

Se la pagina non esiste ancora il link viene visualizzato in rosso. Se la pagina esiste già, il link viene visualizzato in blu. Se vuoi creare una nuova pagina, ma il titolo della pagina che vuoi utilizzare esiste già controlla prima se non sia meglio aiutare a modificare e migliorare la pagina esistente. Altrimenti pensa a un titolo diverso per la tua nuova pagina e creane uno. Fai riferimento alla guida per nominare le pagine per linee guida.

- -

Per aggiungere un contenuto alla tua nuova pagina clicca nel link in rosso che hai appena creato (dopo aver salvato e chiuso l'editor). La nuova pagina si apre nella modalità di modifica così che potrai cominciare a scrivere. Fai riferimento alla sezione Modificare una pagina esistente di questo articolo sull'utilizzo della modalità di modifica.

- - - -

Per creare una nuova pagina senza link da altre pagine, inserisci un nome unico per la pagina nel campo URL del tuo browser. Per esempio, se inserisci:

- -
https://developer.mozilla.org/en-US/docs/FooBar
- -

MDN crea una nuova pagina con il titolo "FooBar" e apre l'editor così che tu possa aggiungere il contenuto nella nuova pagina. Vedi la sezione Modificare una pagina esistente di questo articolo per sapere come usare la modalità editor.

- -

Sottopagina di una pagina esistente

- -

Per creare una pagina che sia sotto una pagina esistente nella gerarchia della pagina:

- -
    -
  1. In una pagina "padre", clicca sulla voce di menu Advanced (l'icona ingranaggio nella toolbar) e clicca New sub-page. Un editor sarà aperto per la creazione di un nuovo documento.
    2. -
  2. Digita il titolo del documento nel campo Title.
    3. -
  3. Cambia il campo Slug se necessario (per esempio, se il titolo è molto lungo e tu vuoi una URL più breve). Questo campo è automaticamente riempito dall'editor, sostituendo con i caratteri undescores gli spazi nel titolo. In questo caso, puoi cambiare solo l'ultima parte della URL del documento.
    4. -
  4. Nel campo TOC, seleziona il livello di heading che vuoi che venga automaticamente visualizzato nella tabella dei contenuti per la pagina, oppure "No table of contents" se la pagina non ne contiene uno.
    5. -
  5. Scrivi il contenuto della pagina nel pannello dell'editor e salva le modifiche. Vedi la sezione Modificare una pagina esistente di questo articolo per sapere come usare la modalità editor.
    6. -
- -

Clonare una pagina esistente

- -

Se esiste una pagina di cui vuoi usare il formato per una nuova, puoi "clonare" la pagina e quindi le modificare il contenuto.

- -
    -
  1. Sulla pagina originale, clicca sulla voce di menu Advanced  (l'icona ingranaggio della toolbar) e clicca Clone this page. Un editor si editor si aprirà per creare un nuovo documento.
    2. -
  2. Cambia il Title della pagina come appropriato per il nuovo contenuto. Il campo Slug sarà modificato automaticamente quando cambierai il campo Title.
    3. -
  3. Se necessario, cambia la parte del path del campo Slug,  per inserire il nuovo documento una diversa parte della gerarchia del documento (nella maggior parte dei casi non è necessario, poiché la pagina clonata ha un contenuto simile all'originale, e perciò  dovrebbe essere posizionata nello stesso posto).
    4. -
  4. Nel campo TOC, seleziona il livello di heading che vuoi che sia automaticamente visualizzato nella tabella dei contenuti della pagina o "No table of contents" se la pagina non ne necessita uno.
    5. -
  5. Scrivi il contenuto di una pagina nel pannello di editor e salva le modifiche. Vedi la sezione Modificare una pagina esistemte di questo articolo per conoscere come usare la modalità editor.
    6. -
- -

 

diff --git a/files/it/mdn/contribute/howto/create_an_mdn_account/index.html b/files/it/mdn/contribute/howto/create_an_mdn_account/index.html deleted file mode 100644 index c6759dc479..0000000000 --- a/files/it/mdn/contribute/howto/create_an_mdn_account/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: Come creare un account su MDN -slug: MDN/Contribute/Howto/Create_an_MDN_account -tags: - - Documentazione - - Guide - - MDN - - Principianti - - Sviluppatori -translation_of: MDN/Contribute/Howto/Create_an_MDN_account ---- -
{{MDNSidebar}}
- -

Per apportare qualsiasi modifica ai contenuti di MDN hai bisogno di un profilo MDN. Tranquillo, non hai bisogno di un profilo MDN se vuoi solo leggere e cercare in MDN! Questa semplice guida ti aiuta a creare un profilo MDN.

- -
-
-

Perché MDN ha bisogno del mio indirizzo email?
-
- Il tuo indirizzo email serve per recuperare l'account, oppure se gli amministratori di MDN hanno la necessità di contattarti in merito al tuo account o alla tua attività sul sito.
-
- Inoltre hai la possibilità di registrarti per ricevere le notifiche (come quando una certa pagina è cambiata) e messaggi (ad esempio, se decidici di unirti al nostro gruppo di beta testing, potresti ricevere email in merito alle nuove funzionalità che hanno bisogno di essere controllate).
-
- Il tuo indirizzo email non verrà mai visualizzato su MDN e sarà usato solo in accordo alla nostra informativa sulla privacy.

- -
Se fai login tramite Github ed usi un indirizzo email "noreply" su Github, non riceverai i messaggi da MDN (comprese le notifiche quando ti registri alle pagine.)
-
-
- -
    -
  1. In cima ad ogni pagina su MDN trovi un pulsante con etichetta Accedi. Muovi il mouse sul pulsante (o fai tap sullo stesso se usi un dispositivo mobile) per visualizzare una lista dei servizi di autenticazione che usiamo per accedere a MDN.
    2. -
  2. -

    Seleziona il servizio che vuoi usare per accedere. Attualmente è disponibile solo GitHub. Nota che se usi GitHub, un link al tuo profilo GitHub verrà incluso nella tua pagina pubblica del profilo MDN.

    -
    3. -
  3. -

    Segui le richieste di GitHub per collegare il tuo account a MDN.

    -
    4. -
  4. Quando il servizio di autenticazione ti riporta su MDN, ti verrà chiesto da MDN di inserire un nome utente ed un indirizzo email. Il tuo nome utente sarà visualizzato pubblicamente per identificare il lavoro che hai svolto. Non usare il tuo indirizzo email come nome utente.
    5. -
  5. Fai click su Crea nuovo profilo.
    6. -
  6. Se l'indirizzo email che hai indicato al punto 4 non è lo stesso che usi con il servizio di autenticazione, controlla la tua email e fai click sul link nell'email di conferma che ti abbiamo inviato.
    7. -
- -

Fatto! Ora hai un account MDN e puoi immediatamente modificare le pagine!

- -

Puoi fare click sul tuo nome in cima ad ogni pagina MDN per vedere il tuo profilo pubblico. Da lì puoi fare click su Modifica per fare modifiche od aggiunte al tuo profilo.

- -
-

I nuovi nomi utenti non possono contenere spazi o il carattere "@". Ricordati che il tuo nome utente sarà visualizzato pubblicamente per identificare il lavoro che hai svolto!

-
diff --git a/files/it/mdn/contribute/howto/create_and_edit_pages/index.html b/files/it/mdn/contribute/howto/create_and_edit_pages/index.html new file mode 100644 index 0000000000..2ffa7888a4 --- /dev/null +++ b/files/it/mdn/contribute/howto/create_and_edit_pages/index.html @@ -0,0 +1,110 @@ +--- +title: 'creare., edizione paginaCreazione e modifica delle pagine' +slug: MDN/Contribute/Creating_and_editing_pages +translation_of: MDN/Contribute/Howto/Create_and_edit_pages +--- +
{{MDNSidebar}}

Modificare e creare una pagina sono le due attività più comuni per la maggior parte dei  COLLABORATORI MDN.  Questo articolo spiega come eseguire queste due operazioni.

+ +

Modificare una pagina esistente

+ +

E' facile modificare-

+ + + +

Anteprima delle modifiche

+ +

Per osservare le tue modifiche-

+ + + +

Attenzione! L'anteprima di una pagina non salva i tuoi cambiamenti, quindi ricorda di non chiudere la finestra in cui stai modificando.

+ +

Commenti di correzione

+ +

Dopo aver visualizzato i cambiamenti, vorrai salvare la tua revisione. Prima di salvare, verfica i commenti di correzione nella finestra sotto la sezione del titolo e lascia un commento per informare gli altri collaboratori sul perchè hai effettuato qualche cambiamento. Per esempio, potresti aver aggiunto una nuova sezione, cambiato qualche parole per rendere la terminologia più appropriata, riscritto un paragrafo per renderlo più chiaro, oppure rimosso informazioni ridondanti.

+ +

Tags

+ +

Puoi aggiungere o rimuovere etichette che descrivono il contenuto della pagina e funzioni sotto la sezione di modifica della pagina. Visita Come taggare in modo appropriato una pagina per avere informazioni su quali etichette applicare.

+ +

Revisione necessaria?

+ +

Se un esperto o un collaboratore esperto dovrebbe controllare le tue modifiche, puoi richiedere una revisione tecnica (per codice, API o tecnologie), una revisione editoriale (per forma, grammatica e contenuto), oppure una revisione della rappresentazione (per il codice KumaScript) facendo una spunta nel box prima di salvare.

+ +

Allegare file

+ +

Se volessi allegare un file ad una pagina esistente per aggiungere un'illustrazione oppure ulteriori chiarimenti, puoi farlo a fondo pagina.

+ +

Salvare, scartare o continuare a modificare

+ +

Quando hai terminato di modificare e sei soddisfatto dell'anteprima, puoi salvare il tuo lavoro e i tuoi commenti cliccando "Salva cambiamenti" (in verde) a destra del titolo della pagina. Se cambi idea, puoi scartare le tue modifiche cliccando su "Scarta cambiamenti" (in rosso) a destra del titolo della pagina.

+ +

Premendo invio nel campo commenti di revisione equivale a cliccare "Salva e continua a modificare".

+ +

Creare una nuova pagina

+ +

Se non sai dove inserire un nuovo articolo, non preoccuparti! Mettilo ovunque, noi lo troveremo e lo sposteremo nel posto giusto o lo aggiungeremo ad un contenuto esistente se è più sensato. Inoltre non preoccuparti di renderlo perfetto. Abbiamo aiutanti gnomi che saranno felici di migliorare il tuo contenuto.

+ +

Ci sono alcuni modi di creare una nuova pagina:

+ + + +

Collegamento da una pagina esistente

+ +
    +
  1. Inserisci il nome della nuova pagina ovunque abbia senso nel testo di una pagina esistente.
    2. +
  2. Evidenzia il nome e clicca l'icona Link () nella barra degli strumenti di modifica. La finestra di dialogo "Update Link" si apre, con il testo evidenziato nel campo "Link To".
    3. +
  3. "/en-US/docs/"  viene inserito di default all'inizio del campo URL. Inserisci il nome della pagina dopo "/en-US/docs/". (Il nome della pagina non deve essere lo stesso del link.)
    4. +
  4. Clicca OK per creare e inserire il link.
    5. +
+ +

Se la pagina non esiste ancora il link viene visualizzato in rosso. Se la pagina esiste già, il link viene visualizzato in blu. Se vuoi creare una nuova pagina, ma il titolo della pagina che vuoi utilizzare esiste già controlla prima se non sia meglio aiutare a modificare e migliorare la pagina esistente. Altrimenti pensa a un titolo diverso per la tua nuova pagina e creane uno. Fai riferimento alla guida per nominare le pagine per linee guida.

+ +

Per aggiungere un contenuto alla tua nuova pagina clicca nel link in rosso che hai appena creato (dopo aver salvato e chiuso l'editor). La nuova pagina si apre nella modalità di modifica così che potrai cominciare a scrivere. Fai riferimento alla sezione Modificare una pagina esistente di questo articolo sull'utilizzo della modalità di modifica.

+ + + +

Per creare una nuova pagina senza link da altre pagine, inserisci un nome unico per la pagina nel campo URL del tuo browser. Per esempio, se inserisci:

+ +
https://developer.mozilla.org/en-US/docs/FooBar
+ +

MDN crea una nuova pagina con il titolo "FooBar" e apre l'editor così che tu possa aggiungere il contenuto nella nuova pagina. Vedi la sezione Modificare una pagina esistente di questo articolo per sapere come usare la modalità editor.

+ +

Sottopagina di una pagina esistente

+ +

Per creare una pagina che sia sotto una pagina esistente nella gerarchia della pagina:

+ +
    +
  1. In una pagina "padre", clicca sulla voce di menu Advanced (l'icona ingranaggio nella toolbar) e clicca New sub-page. Un editor sarà aperto per la creazione di un nuovo documento.
    2. +
  2. Digita il titolo del documento nel campo Title.
    3. +
  3. Cambia il campo Slug se necessario (per esempio, se il titolo è molto lungo e tu vuoi una URL più breve). Questo campo è automaticamente riempito dall'editor, sostituendo con i caratteri undescores gli spazi nel titolo. In questo caso, puoi cambiare solo l'ultima parte della URL del documento.
    4. +
  4. Nel campo TOC, seleziona il livello di heading che vuoi che venga automaticamente visualizzato nella tabella dei contenuti per la pagina, oppure "No table of contents" se la pagina non ne contiene uno.
    5. +
  5. Scrivi il contenuto della pagina nel pannello dell'editor e salva le modifiche. Vedi la sezione Modificare una pagina esistente di questo articolo per sapere come usare la modalità editor.
    6. +
+ +

Clonare una pagina esistente

+ +

Se esiste una pagina di cui vuoi usare il formato per una nuova, puoi "clonare" la pagina e quindi le modificare il contenuto.

+ +
    +
  1. Sulla pagina originale, clicca sulla voce di menu Advanced  (l'icona ingranaggio della toolbar) e clicca Clone this page. Un editor si editor si aprirà per creare un nuovo documento.
    2. +
  2. Cambia il Title della pagina come appropriato per il nuovo contenuto. Il campo Slug sarà modificato automaticamente quando cambierai il campo Title.
    3. +
  3. Se necessario, cambia la parte del path del campo Slug,  per inserire il nuovo documento una diversa parte della gerarchia del documento (nella maggior parte dei casi non è necessario, poiché la pagina clonata ha un contenuto simile all'originale, e perciò  dovrebbe essere posizionata nello stesso posto).
    4. +
  4. Nel campo TOC, seleziona il livello di heading che vuoi che sia automaticamente visualizzato nella tabella dei contenuti della pagina o "No table of contents" se la pagina non ne necessita uno.
    5. +
  5. Scrivi il contenuto di una pagina nel pannello di editor e salva le modifiche. Vedi la sezione Modificare una pagina esistemte di questo articolo per conoscere come usare la modalità editor.
    6. +
+ +

 

diff --git a/files/it/mdn/contribute/howto/delete_my_profile/index.html b/files/it/mdn/contribute/howto/delete_my_profile/index.html deleted file mode 100644 index 182bc6a241..0000000000 --- a/files/it/mdn/contribute/howto/delete_my_profile/index.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: Come rimuovere il mio profilo -slug: MDN/Contribute/Howto/Delete_my_profile -translation_of: MDN/Contribute/Howto/Delete_my_profile ---- -
{{MDNSidebar}}
- -

Nel caso decidessi di non voler più far parte di MDN, puoi richiedere la cancellazione del tuo profilo. Ciò nonostante, non possiamo cancellare alcuna tua revisione (modifiche alle pagine), e la nostra licenza del contenuto prevede che le tue modifiche abbiano una fonte. Se hai fatto delle modifiche, dovrai decidere di volerle attribuire al tuo nome utente, o ri-attribuirle ad "Anonimo".

- -
    -
  1. Dopo aver eseguito l'accesso su MDN, clicca sul tuo profilo nella barra di navigazione in alto visibile in qualsiasi pagina. Si aprirà la tua pagina di profilo, mostrando tutte le informazioni su ciò a cui hai contribuito. Annota se le revisioni sono elencate in Attività Documenti Recenti.
    2. -
  2. Clicca su Modifica. Si apirà il modulo Modifica il tuo profilo.
    3. -
  3. Scorri fino alla fine del modulo e fai clic sul link "Elimina il tuo account". Si aprirà il modulo "Elimina il tuo profilo".
    4. -
  4. Seleziona una delle seguenti opzioni: -
      -
    • Non ho fatto alcuna modifica, cancella il mio account. Scegli questa opzione se non c'era alcun elemento in Attività Documenti Recenti.
      • -
    • Mantieni il mio nome utente come fonte per le mie modifiche, cancella il mio indirizzo email e sospendi il mio account, in modo che non possa più eseguire l'accesso.  Se scegli questa opzione, il tuo profilo verrà associato con le tue modifiche, ma non sarai più in grado di accedere a MDN. La tua pagina del profilo continuerà ad esistere, ma le informazioni personali verranno rimosse.
      • -
    • Cambia la fonte delle mie modifiche in "Anonimo", e cancella il mio account. Se scegli questa opzione, tutte le modifiche da te eseguite verranno attribuite ad "Anonimo". Il tuo account e pagina del profilo verranno rimosse. Non ci sarà più alcuna associazione tra te e le tue modifiche.
      • -
    -
    5. -
  5. Fai clic su Segnala un Bug per Chiudere il tuo Account. Questa azione creerà un nuovo caso nel sistema di tracciamento dei problemi Bugzilla per la tua richiesta di cancellazione dell'account, con i campi Riepilogo e Descrizione precompilati in base al tuo nome utente e all'opzione che hai scelto. Questo passaggio è necessario perché un essere umano esaminerà la tua richiesta ed eseguirà le azioni necessarie.
    6. -
  6. Devi accedere a Bugzilla per inviare la richiesta. Se non hai un account Bugzilla, dovrai crearne uno.
    7. -
  7. Fare clic su Invia bug per inviare la richiesta. Quando la tua richiesta è stata gestita, riceverai una notifica da Bugzilla all'indirizzo email che hai utilizzato per accedere a Bugzilla.
    8. -
diff --git a/files/it/mdn/contribute/howto/do_a_technical_review/index.html b/files/it/mdn/contribute/howto/do_a_technical_review/index.html deleted file mode 100644 index 31f0885a09..0000000000 --- a/files/it/mdn/contribute/howto/do_a_technical_review/index.html +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: Come effettuare una revisione tecnica -slug: MDN/Contribute/Howto/Do_a_technical_review -translation_of: MDN/Contribute/Howto/Do_a_technical_review ---- -
{{MDNSidebar}}

La revisione tecnica consiste nel controllo dell'accuratezza tecnica e della completezza di un articolo e, se necessario, nella sua correzione. Se chi scrive un articolo desidera che qualcun altro verifichi il contenuto tecnico di un articolo, può segnalarlo attivando l'opzione "Revisione tecnica" durante la modifica di una pagina. A volte chi scrive contatta un ingegnere specifico affinché effettui la revisione tecnica, ma chiunque abbia esperienza tecnica può farlo.

-

Questo articolo spiega come effettuare una revisione tecnica, permettendo così di mantenere corretto il contenuto di MDN.

- - - - - - - - - - - - - - - - - - - -
In cosa consiste?Revisionare e correggere gli articoli per assicurarsi che siano tecnicamente corretti e completi
Dove è necessaria?In articoli specifici che sono contrassegnati per essere sottoposti a una revisione tecnica.
Cosa hai bisogno di sapere per completare l'operazione? -
    -
  • Conoscenza da esperto sull'argomento dell'articolo che stai revisionando.
    • -
  • Capacità di modificare un articolo wiki su MDN.
    • -
-
Quali sono i passi necessari? -
    -
  1. Scegli un articolo da revisionare -
      -
    1. Visita l'elenco delle pagine che necessitano di revisioni tecniche. Questo contiene tutte le pagine per le quali è stata richiesta una revisione tecnica.
      2. -
    2. Scegli una pagina che tratta di un argomento con cui hai familiarità.
      3. -
    3. Fai clic sul link dell'articolo per caricare la pagina.
      4. -
    -
    2. -
  2. Al termine del caricamento della pagina, fai clic sul pulsante MODIFICA in alto a sinistra; verrà aperto l'editor di MDN. Non esitare a cambiare pagina se la prima che hai scelto non ti è congeniale.
    3. -
  3. Man mano che leggi l'articolo, sistema qualsiasi informazione errata e aggiungi le parti importanti mancanti.
    4. -
  4. Inserisci un Commento per la revisione nell'apposito campo in fondo alla pagina, ad esempio 'Revisione tecnica completata'. Se hai corretto qualche informazione, includi le modifiche effettuate nel commento, ad esempio 'Revisione tecnica: corrette le descrizioni dei parametri'.
    5. -
  5. Fai clic sul pulsante SALVA MODIFICHE.
    6. -
  6. Alla chiusura dell'editor, quando l'articolo a cui sono state apportate le correzioni verrà visualizzato sullo schermo, spunta la voce Tecnica a lato (nel riquadro Sono state richieste le seguenti revisioni) e fai clic su CARICA REVISIONE.
    7. -
  7. Congratulazioni! Hai concluso la revisione!
    8. -
-
-


-  

diff --git a/files/it/mdn/contribute/howto/do_an_editorial_review/index.html b/files/it/mdn/contribute/howto/do_an_editorial_review/index.html deleted file mode 100644 index 7bfc4bf759..0000000000 --- a/files/it/mdn/contribute/howto/do_an_editorial_review/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: Come effettuare una revisione editoriale -slug: MDN/Contribute/Howto/Do_an_editorial_review -translation_of: MDN/Contribute/Howto/Do_an_editorial_review ---- -
{{MDNSidebar}}

Una revisione editoriale consiste nel sistemare errori di digitazione, grammatica, utilizzo, ortografia in un articolo. Non tutti i collaboratori sono traduttori esperti, ma data la loro conoscenza hanno scritto articoli estremamente utili, che necessitano di revisioni e correzioni; questo è lo scopo della revisione editoriale.

-

Questo articolo descrive come eseguire una revisione editoriale, così da accertarsi che il contenuto di MDN sia accurato.

- - - - - - - - - - - - - - - - - - - -
In che cosa consiste?In una revisione e correzione di articoli per i quali è richiesta una revisione editoriale.
Quando è necessaria?In articoli specifici che sono contrassegnati per essere sottoposti a una revisione editoriale.
Cosa hai bisogno di sapere per completare l'operazione?Ti serve avere una buona conoscenza della grammatica e del lessico della lingua in questione.
Quali sono i passi necessari? -
    -
  1. Scegli un articolo da revisionare: -
      -
    1. Visita l'elenco delle pagine che necessitano di revisione editoriale. Questo contiene tutte le pagine per le quali è stata richiesta una revisione editoriale.
      2. -
    2. Scegli una pagina che possiede un titolo nella lingua in questione e il cui indirizzo non inizia con Template:.
      3. -
    3. Fai clic sul collegamento per caricare la pagina.
      4. -
    -
    2. -
  2. Al termine del caricamento della pagina, fai clic sul pulsante MODIFICA in alto a sinistra; verrà aperto l'editor di MDN. Non esitare a cambiare pagina se la prima che hai scelto non ti è congeniale.
    3. -
  3. Correggi tutti gli errori di digitazione, grammatica, utilizzo che trovi.
    4. -
  4. Inserisci un Commento per la revisione nell'apposito campo in fondo alla pagina, ad esempio 'Revisione editoriale completata: sistemati errori digitazione, grammatica e ortografia'.
    5. -
  5. Fai clic sul pulsante SALVA MODIFICHE.
    6. -
  6. Alla chiusura dell'editor, quando l'articolo a cui sono state apportate le correzioni verrà visualizzato sullo schermo, spunta la voce Editoriale a lato (nel riquadro Sono state richieste le seguenti revisioni) e fai clic su CARICA REVISIONE.
    7. -
  7. -

    Congratulazioni! Hai concluso la revisione!

    -
    8. -
-
-

 

diff --git a/files/it/mdn/contribute/howto/impostare_il_riassunto_di_una_pagina/index.html b/files/it/mdn/contribute/howto/impostare_il_riassunto_di_una_pagina/index.html deleted file mode 100644 index ba8df38979..0000000000 --- a/files/it/mdn/contribute/howto/impostare_il_riassunto_di_una_pagina/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: Come impostare il riassunto di una pagina -slug: MDN/Contribute/Howto/impostare_il_riassunto_di_una_pagina -tags: - - Community - - Documentazione - - Guida - - MDN - - Riassunto Pagina -translation_of: MDN/Contribute/Howto/Set_the_summary_for_a_page ---- -
{{MDNSidebar}}

Il riassunto di una pagina di MDN è definito in modo da essere utilizzabile in vari ambiti, tra cui i risultati dei motori di ricerca, in altre pagine di MDN, come ad esempio nelle landing pages relative a diversi argomenti, e nei tooltips. Deve essere quindi un testo che conservi il proprio significato sia nel contesto della propria pagina, sia quando si trova in contesti differenti, privato dei contenuti della pagina di origine.

-

Un riassunto può essere identificato esplicitamente all'interno della pagina. In caso contrario, si utilizza in genere la prima frase, il che non sempre si rivela la scelta più adatta per raggiungere lo scopo prefissato.

- - - - - - - - - - - - - - - - - - - -
Qual è il tuo compito?Evidenziare la parte di testo all' interno della pagina che, a tuo parere, dovrebbe essere utilizzata come riassunto della pagina nei vari contesti; questo compito richiede talvolta la scrittura di un testo appropriato, là dove ve ne sia necessità.
Dove c'è bisogno del tuo intervento?In quelle pagine che non hanno riassunto o ne presentano uno di scarsa qualità.
Di cosa hai bisogno per portare a termine la tua missione?Conoscenza dell' editor testi di MDN; buone capacità di scrittura in lingua inglese; sufficiente familiarità con l'argomento della pagina in questione, al fine di poterne scrivere un valido riassunto.
Le tappe del tuo lavoro: -
    -
  1. Scegli una pagina di cui fare il riassunto: -
      -
    1. Nella pagina MDN documentation status, sotto Sections, seleziona l'argomento che meglio conosci (ad esempio HTML):
      -
      2. -
    2. Nella pagina dello stato di documentazione dell'argomento scelto, clicca sulla casella Pages della tabella Summary. Si aprirà un indice di tutte le pagine di quell'argomento; nella colonna di sinistra troverai i links delle pagine, in quella di destra i tags e i riassunti:
      -
      3. -
    3. Scegli una pagina senza riassunto o con un riassunto mediocre:
      -
      4. -
    4. Clicca il link per aprire quella pagina.
      5. -
    -
    2. -
  2. Clicca su Edit per aprire la pagina nell'editor testi di MDN.
    3. -
  3. Cerca una o due frasi adatte per un riassunto, o, all'occorrenza, creane di nuove o modificane di esistenti allo scopo di creare un buon riassunto.
    4. -
  4. Seleziona il testo da utilizzare come riassunto
    5. -
  5. Nello Styles widget della barra degli strumenti di editor, seleziona SEO Summary. (Si crea così un elemento {{HTMLElement("span")}} nella page source con class="seoSummary" attorno al testo prescelto.) -

    -
    6. -
  6. Salva le modifiche con un commento di revisione del tipo "riassunto pagina".
    7. -
-
-

 

-

 

-

 

diff --git a/files/it/mdn/editor/index.html b/files/it/mdn/editor/index.html deleted file mode 100644 index 856ef1fc2d..0000000000 --- a/files/it/mdn/editor/index.html +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: Guida all'editor di MDN -slug: MDN/Editor -translation_of: MDN/Editor ---- -
{{MDNSidebar}}

L'editor WYSIWYG (what-you-see-is-what-you-get, ciò che vedi è ciò che ottieni) messo a disposizione dal wiki del Mozilla Developer Network semplifica la creazione di nuovi contenuti. La guida all'editor di MDN fornisce alcune informazioni sull'utilizzo dell'editor e su alcune caratteristiche utili che possono migliorare la tua produttività.

-

La guida di stile di MDN fornisce alcune informazioni sulla formattazione e lo stile da applicare ai contenuti, comprese le regole di grammatica che preferiamo vengano utilizzate.

-

{{LandingPageListSubpages}}

-

{{EditorGuideQuicklinks}}

diff --git a/files/it/mdn/guidelines/conventions_definitions/index.html b/files/it/mdn/guidelines/conventions_definitions/index.html new file mode 100644 index 0000000000..2aadc92c27 --- /dev/null +++ b/files/it/mdn/guidelines/conventions_definitions/index.html @@ -0,0 +1,34 @@ +--- +title: Migliore pratica +slug: MDN/Guidelines/Migliore_pratica +tags: + - Guida + - MDN Meta + - linee guida +translation_of: MDN/Guidelines/Conventions_definitions +--- +
{{MDNSidebar}}

Quest'articolo descrive i metodi raccomandati di lavoro con il contenuto su MDN. Queste linee guida descrivono i metodi preferiti per fare tutto ciò che porta ad un miglior risultato, o offrire un consiglio nel decidere tra diversi metodi nel fare cose simili.

+ +

Copiare il contenuto

+ +

A volte, avrai la necessità di utilizzare lo stesso testo su più pagine (oppure utilizzare il modello di una pagina per un'altra). Hai tre opzioni:

+ + diff --git a/files/it/mdn/guidelines/macros/index.html b/files/it/mdn/guidelines/macros/index.html deleted file mode 100644 index a09cf37e30..0000000000 --- a/files/it/mdn/guidelines/macros/index.html +++ /dev/null @@ -1,42 +0,0 @@ ---- -title: Using macros on MDN -slug: MDN/Guidelines/Macros -tags: - - italino tags -translation_of: MDN/Structures/Macros ---- -
{{MDNSidebar}}

The Kuma platform on which MDN runs provides a powerful macro system, KumaScript, which makes it possible to do a wide variety of things automatically. This article provides information on how to invoke MDN's macros within articles.

- -

The KumaScript guide provides an in-depth look at how to use macros on MDN, so this section is more of a brief overview. If you've already read the section above on {{SectionOnPage("/en-US/docs/Project:MDN/Contributing/Editor_guide/Links", "Using link macros")}}, you're already at least a little bit familiar with the concept.

- -

How macros are implemented

- -

Macros on MDN are implemented using server-executed JavaScript code, interpreted using Node.js. On top of that we have a number of libraries we've implemented that provide wiki-oriented services and features to let macros interact with the wiki platform and its contents. If you're interested in learning more, see the KumaScript guide; the KumaScript reference provides details on the libraries and other KumaScript APIs we've implemented.

- -

Using a macro in content

- -

To actually use a macro, you simply enclose the call to the macro in a pair of double-braces, with its parameters, if any, enclosed in parentheses; that is:

- -
\{{macroname(parameter-list)}}
- -

A few notes about macro calls:

- - - -

Macros are heavily cached; for any set of input values (both parameters and environmental values such as the URL for which the macro was run), the results are stored and reused. This means that the macro is only actually run when the inputs change.

- -
-

Note: You can force all the macros on a page to be re-evaluated by force-refreshing the page in your browser (that is, a shift-reload).

-
- -

Macros can be as simple as just inserting a larger block of text or swapping in contents from another part of MDN, or as complex as building an entire index of content by searching through parts of the site, styling the output, and adding links.

- -

You can read up on our most commonly-used macros on the Custom macros page; also, there's a complete list of all macros here. Most macros have documentation built into them, as comments at the top.

- -

{{EditorGuideQuicklinks}}

diff --git a/files/it/mdn/guidelines/migliore_pratica/index.html b/files/it/mdn/guidelines/migliore_pratica/index.html deleted file mode 100644 index 2aadc92c27..0000000000 --- a/files/it/mdn/guidelines/migliore_pratica/index.html +++ /dev/null @@ -1,34 +0,0 @@ ---- -title: Migliore pratica -slug: MDN/Guidelines/Migliore_pratica -tags: - - Guida - - MDN Meta - - linee guida -translation_of: MDN/Guidelines/Conventions_definitions ---- -
{{MDNSidebar}}

Quest'articolo descrive i metodi raccomandati di lavoro con il contenuto su MDN. Queste linee guida descrivono i metodi preferiti per fare tutto ciò che porta ad un miglior risultato, o offrire un consiglio nel decidere tra diversi metodi nel fare cose simili.

- -

Copiare il contenuto

- -

A volte, avrai la necessità di utilizzare lo stesso testo su più pagine (oppure utilizzare il modello di una pagina per un'altra). Hai tre opzioni:

- - diff --git a/files/it/mdn/structures/compatibility_tables/index.html b/files/it/mdn/structures/compatibility_tables/index.html new file mode 100644 index 0000000000..81ee695696 --- /dev/null +++ b/files/it/mdn/structures/compatibility_tables/index.html @@ -0,0 +1,496 @@ +--- +title: Tabelle di compatibilità +slug: MDN/Structures/Tabelle_compatibilità +translation_of: MDN/Structures/Compatibility_tables +--- +
{{MDNSidebar}}
{{IncludeSubnav("/en-US/docs/MDN")}}
+ +

MDN ha un formato standard di tabelle di compatibilità per la nostra documentazione web open; in altre parole, la documentazione di tecnologie come DOM, HTML, CSS, JavaScript, SVG, ecc., che viene condivisa attraverso tutti i browsers. Questo articolo spiega come usare le nostre funzionalità per aggiungere dati di compatibilità alle pagine MDN.

+ +
+

Importante: Il modo in cui i dati sono generati è cambiato. Storicamente le nostre tabelle erano inserite sulla pagina e i dati inseriti manualmente.   Questo è inefficiente, rende la manutenzione difficile e rende i dati inflessibili. Per questo, stiamo cambiando i dati di compatibilità per browser al fine di essere immagazzinati in una repository dati (vedi https://github.com/mdn/browser-compat-data) generando le tabelle programmaticamente.
+
+ In questa guida, documentiamo il nuovo metodo per aggiungere dati di compatibilità in MDN, mantenendo tuttavia, la documentazione sul vecchio metodo, poiché saranno ancora presenti per un po' le tabelle popolate manualmente su MDN. Se hai bisogno di vedere la vecchia documentazione, controlla il nostro articolo Old compatibility tables.

+
+ +
+

Nota: Se hai bisogno di aiuto con un qualsiasi step di questa guida, puoi contattarci al MDN discussion forum.

+
+ +

Come accedere alla repository dati

+ +

I dati sono conservati in un repository GitHub — vedi https://github.com/mdn/browser-compat-data. Per accedervi, hai bisogno di un account GitHub, fare un fork del repository browser-compat-data attraverso il tuo account, infine clonare il fork localmente sulla tua macchina.

+ +

Choosing a feature to add data for

+ +

First of all, find a feature that you want to add browser-compat-data for. This could be an HTML element, CSS property, JS language feature or JS API interface, for example. We would like to encourage you to work on API features, as we already have people working on HTML, JS, and CSS. You can find the status of features that need their data adding to the repo on our Browser Compat Data migration spreadsheet.

+ +

The process for using this is as follows:

+ +
    +
  1. Go ahead and choose a feature that is not already being worked on or complete. Put your name in the "Who" column, preferably along with your MDN username so we can find your email address and contact you if we need to.
    2. +
  2. If the feature you want to work on is not already listed in the spreadsheet, add rows for it in an appropriate place, copying the format that is already there. You should also use the same granularity (e.g. per element for HTML, per property or selector for CSS, per object for JS, per interface for APIs).
    3. +
  3. Once you've started work on adding the data, put the status to "In progress".
    4. +
  4. Once you've added the data and submitted a pull request to the main repo, put the status to "PR done".
    5. +
  5. As your data is merged to the repo, then added to the npm package, update the status as necessary.
    6. +
  6. Once you've updated the documentation page(s) for your feature to use the new macro to dynamically generate the appropriate data table on each page, set the status to "Article updated". At this point, you are done.
    7. +
+ +

Preparing to add the data

+ +

Before adding some new data, you should make sure that your fork is up-to-date with the main repo (it contains the same content), create a new branch inside your fork to contain your additions, then pull that branch into your local clone so you can start working inside it:

+ +

Let's look at a simple way to make sure your fork is to-to-date is as follows:

+ +

Adding the main browser-compat-data repo as a remote

+ +

Go to your local clone of your fork in your terminal/command line, and add a remote pointing to the main (upstream) repo like so (you only need to do this once):

+ +
git remote add upstream https://github.com/mdn/browser-compat-data.git
+ +

If you are unsure whether you've done this, you can check what remotes your repo has using

+ +
git remote -v
+ +

Updating your fork with the remote's content

+ +

Now, whenever you want to update your fork, you can do so by:

+ +
    +
  1. +

    Making sure you are in the master branch:

    + + 
    git checkout master
    +
    2. +
  2. +

    fetching the up-to-date repo contents using the following:

    + + 
    git fetch upstream
    +
    3. +
  3. +

    rebasing the contents of your master with the main repo's contents:

    + + 
    git rebase upstream/master
    +
    4. +
  4. +

    pushing these updates back to your remote fork using this:

    + + 
    git push -f
    +
    5. +
+ +

Creating a new branch to do your work in

+ +

Next, go to your remote fork (it will be at https://github.com/your-username/browser-compat-data) and create a new branch to store your changes for this data addition. This can be done by:

+ +
    +
  1. Clicking on the "Branch: Master" button.
    2. +
  2. Entering a new branch name into the "Find or create a branch..." text field.
    3. +
  3. Pressing the resulting "Create branch name-of-branch from Master" button.
    4. +
+ +

For example, if you were wanting to add data for the WebVR API, you'd create a branch called something like "webvr".

+ +

Switching to the new branch

+ +

At this point, go back to your terminal/command line, and update your fork's local clone to include your new branch using the following command:

+ +
git pull
+ +

Now switch to your new branch using this:

+ +
git checkout name-of-branch
+ +

You should now be ready to start adding your data!

+ +

Adding the data

+ +

To add the data, you need to create a new file or files to store your compat data in. The files you need to create differ, depending on what technology you are working on:

+ + + +
+

Note: You'll notice that the repo also contains data for Browser Extensions and HTTP. These data sets are basically finished as they stand, but more features may need to be added in the future.

+
+ +

Each file you create has to follow the pattern defined in the schema contained within our repo; you can see the detailed schema description here.

+ +

Basic compat data structure

+ +

Let's look at an example. CSS property JSON files for example need the following basic structure:

+ +
{
+  "css": {
+    "properties": {
+      "border-width": {
+        "__compat": {
+          ...
+        }
+      }
+    }
+  }
+}
+ +

You have the css object, inside of which is a properties object. Inside the properties object, you need one member for each of the specific features you want to define the compat data for. Each of these members has a __compat member, inside of which the actual data goes.

+ +

The above data is found in the border-width.json file — compare this to the rendered border-width support table on MDN.

+ +

Other types of features work in the same way, but with different object names:

+ + + +
+

In HTML, CSS, and JS pages, you'll normally only need one feature. API interfaces work slightly differently — they always have multiple sub-features (see {{anch("Sub-features")}}, below).

+ +

Basic structure inside a feature

+ +

Inside a feature __compat member, you need to include the following members:

+ + + +

The names of the browser members are defined in the schema (see Browser identifiers). You should use the full list of currently defined identifiers. If you wish to add another browser, talk to us first, as this could have a wide-ranging impact and should not be done without careful thought.

+ +

In a basic browser compat data file, you'll only need to include "version_added" inside the browser identifier members (we'll cover {{anch("Advanced cases")}} later on). The different values you might want to include are as follows:

+ + + +

Inside the status member, you'll include three submembers:

+ + + +

The feature data for border-width (also see border-width.json) is shown below as an example:

+ +
"__compat": {
+  "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/border-width",
+  "support": {
+    "chrome": {
+      "version_added": "1"
+    },
+    "webview_android": {
+      "version_added": "2"
+    },
+    "edge": {
+      "version_added": true
+    },
+    "edge_mobile": {
+      "version_added": true
+    },
+    "firefox": {
+      "version_added": "1"
+    },
+    "firefox_android": {
+      "version_added": "1"
+    },
+    "ie": {
+      "version_added": "4"
+    },
+    "ie_mobile": {
+      "version_added": "6"
+    },
+    "opera": {
+      "version_added": "3.5"
+    },
+    "opera_android": {
+      "version_added": "11"
+    },
+    "safari": {
+      "version_added": "1"
+    },
+    "safari_ios": {
+      "version_added": "3"
+    }
+  },
+  "status": {
+    "experimental": false,
+    "standard_track": true,
+    "deprecated": false
+  }
+}
+ +

Adding a description

+ +

There is a fourth, optional, member that can go inside the __compat member — description. This can be used to include a human-readable description of the feature. You should only include this if it is hard to see what the feature is from glancing at the data. For example, it might not be that obvious what a constructor is from looking at the data structure, so you can include a description like so:

+ +
{
+  "api": {
+    "AbortController": {
+      "__compat": {
+        ...
+      },
+      "AbortController": {
+        "__compat": {
+          "mdn_url": "https://developer.mozilla.org/docs/Web/API/AbortController/AbortController",
+          "description": "<code>AbortController()</code> constructor",
+          "support": {
+            ...
+          }
+        }
+      }
+
+      ... etc.
+    }
+  }
+}
+ +

Sub-features

+ +

In a page where the compat table has more than one row, you'll need multiple subfeatures inside each feature to define the information for each row. This can happen, for example, when you've got the basic support for a feature stored in one row, but then the feature also has a new property or value type that was addded much later in the specification's life and is only supported in a couple of browsers.

+ +

As an example, see the compat data and corresponding MDN page for the background-color property. The basic support exists inside the __compat object as explained above, then you have an additional row for browsers' support for "alpha channel for hex values", which contains its own __compat object.

+ +
{
+  "css": {
+    "properties": {
+      "background-color": {
+        "__compat": {
+          ...
+        },
+        "alpha_ch_for_hex": {
+          "__compat": {
+            ...
+          },
+        }
+      }
+    }
+  }
+}
+ +

For an API, you've got the top two levels defined as api.name-of-the-interface, then a top-level __compat section to define the overall browser compatibility of the interface, then a sub-feature for each of the methods, properties, and constructors contained inside the interface. The basic structure looks like this:

+ +
{
+  "api": {
+    "VRDisplay": {
+      "__compat": {
+        ...
+      },
+      "cancelAnimationFrame": {
+        "__compat": {
+          ...
+        }
+      },
+      "capabilities": {
+        "__compat": {
+          ...
+        }
+      },
+
+      ... etc.
+
+    }
+  }
+}
+ +

See VRDisplay.json for a full example.

+
+ +

Adding data: Advanced cases

+ +

There are some advanced features that you'll want to include in browser compat data. The aim of this section is to list the most common ones, providing an example of each to show how you can implement them in your own compat data.

+ +

Including a footnote

+ +

Often compat tables will include footnotes related to certain entries that explain useful details or strange behavior that developers will find useful. As an example, the Chrome Android entry for {{domxref("VRDisplay.capabilities")}} (see also VRDisplay.json)  (at the time of writing) had a footnote "Currently supported only by Google Daydream." To include this in the capabilities data, we added a "notes" submember inside the relevant "chrome_android" submember; it would look like this:

+ +
"chrome_android": {
+  "version_added": true,
+  "notes": "Currently supported only by Google Daydream."
+}
+ +

Including a vendor prefix

+ +

If a feature is supported behind a vendor prefix in one or more browsers, you'll want to make that clear in the browser compat data. imagine you had a feature that was supported with a -moz- prefix in Firefox. To specify this in the compat data, you'd need to add a "prefix" submember inside the relevant "firefox" submember. It would look something like this:

+ +
"firefox": {
+  "version_added": true,
+  "prefix": "-moz-"
+}
+ +

Including browser preferences or flags

+ +

Some features may be supported in a browser, but they are experimental and turned off by default. If a user wants to play with this feature they need to turn it on using a preference/flag.

+ +

To represent this in the compat data, you need to add the "flags" submember inside the relevant browser identifier submember. The value of "flags" is an array of objects each of which contains of three members:

+ + + +

So to add a preference/flag to the Chrome support for a feature, you'd do something like this:

+ +
"chrome": {
+  "version_added": "50",
+  "flags": [
+    {
+      "type": "preference",
+      "name": "Enable Experimental Web Platform Features",
+      "value_to_set": "true"
+    }
+  ]
+},
+ +

If a feature is behind two or more flags, you can add additional objects to the "flags" array, like in this case, for example:

+ +
"firefox": {
+  "version_added": "57",
+  "flags": [
+    {
+      "type": "preference",
+      "name": "dom.streams.enabled",
+      "value_to_set": "true"
+    },
+    {
+      "type": "preference",
+      "name": "javascript.options.streams",
+      "value_to_set": "true"
+    }
+  ]
+},
+ +

Including a version where support was removed

+ +

Sometimes a feature will be added in a certain browser version, but then removed again as the feature is deprecated. This can be easily represented using the "version_removed" submember, which takes as its value a string representing the version number it was removed on. For example:

+ +
"firefox": {
+  "version_added": "35",
+  "version_removed": "47",
+},
+ +

Including multiple support points for the same browser entry

+ +

Sometimes you'll want to add multiple support data points for the same browser inside the same feature.

+ +

As an example, the {{cssxref("text-align-last")}} property (see also text-align-last.json) was added to Chrome in version 35, supported behind a pref.

+ +

The support mentioned above was then removed in version 47; also in version 47, support was added for text-align-last enabled by default.

+ +

To include both of these data points, you can make the value of the "chrome" submember an array containing two support information objects, rather than just a single support information object:

+ +
"chrome": [
+  {
+    "version_added": "47"
+  },
+  {
+    "version_added": "35",
+    "version_removed": "47",
+    "flags": [
+      {
+        "type": "preference",
+        "name": "Enable Experimental Web Platform Features",
+        "value_to_set": "true"
+      }
+    ]
+  }
+],
+ +
+

Note: You should put the most current or important support point first in the array — this makes the data easier to read for people who just want to scan it for the latest info.

+
+ +

Including an alternative name

+ +

Occasionally browsers will support a feature under a different name to the name defined in its specification. This might be for example because a browser added experimental support for a feature early, and then the name changed before the spec stabilized.

+ +

To include such a case in the browser compat data, you can include a support information point that specifies the alternative name inside an "alternative_name" member.

+ +
+

Note: The alternative name might not be an exact alias — it might have differing behaviour to the standard version.

+
+ +

Let's look at an example. The {{cssxref("border-top-right-radius")}} property (see also border-top-right-radius.json) was supported in Firefox:

+ + + +

To represent this in the data, we used the following JSON:

+ +
"firefox": [
+  {
+    "version_added": "4",
+    "notes": "Prior to Firefox 50.0, border styles of rounded corners were always rendered as if <code>border-style</code> was solid. This has been fixed in Firefox 50.0."
+  },
+  {
+    "prefix": "-webkit-",
+    "version_added": "49",
+    "notes": "From Firefox 44 to 48, the <code>-webkit-</code> prefix was available with the <code>layout.css.prefixes.webkit</code> preference. Starting with Firefox 49, the preference defaults to <code>true</code>."
+  },
+  {
+    "alternative_name": "-moz-border-radius-topright",
+    "version_added": "1",
+    "version_removed": "12"
+  }
+],
+ +

Pushing a change back to the main repo

+ +

Once you are finished with adding your compat data, you should first test it using the following commands:

+ + + +

If it is looking OK, you then need to commit it and push it back up to your remote fork on GitHub. You can do this easily with terminal commands like this:

+ +
git add .
+git commit -m 'adding compat data for name-of-feature'
+git push
+ +

Now go to your remote fork (i.e. https://github.com/your-username/browser-compat-data) and you should see information about your push at the top of the files list (under "Your recently pushed branches"). You can create a pull request (starting the process of pushing this to the main repo) by pressing the "Compare & pull request" button, then following the simple prompts on the subsequent screen.

+ +

At this point, you just need to wait. A reviewer will review your pull request, and merge it with the main repo, OR request that you make changes. If changes are needed, make the changes and submit again until the PR is accepted.

+ +

Inserting the data into MDN pages

+ +

Once your new data has been included in the main repo, you can start dynamically generating browser compat tables based on that data on MDN pages using the \{{Compat}} macro. This takes a single parameter, the dot notation required to walk down the JSON data and find the object representing the feature you want to generate the compat table for.

+ +

Above the macro call, to help other contributors finding their way, you should add a hidden text that is only visible in MDN contributors in edit mode:

+ +
<div class="hidden">
+<p>The compatibility table on this page is generated from structured data.
+If you'd like to contribute to the data, please check out
+<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>
+and send us a pull request.</p>
+</div>
+ +

As an example, on the {{httpheader("Accept-Charset")}} HTTP header page, the macro call looks like this: \{{Compat("http.headers.Accept-Charset")}}. If you look at the accept-charset.json file in the repo, you'll see how this is reflected in the JSON data.

+ +

As another example, The compat table for the {{domxref("VRDisplay.capabilities")}} property is generated using \{{Compat("api.VRDisplay.capabilities")}}. The macro call generates the following table (and corresponding set of notes):

+ +
+ + +

{{Compat("api.VRDisplay.capabilities")}}

+ +
+

Note: The filenames often match the labels given to the interfaces inside the JSON structures, but it is not always the case. When the macro calls generate the tables, they walk through all the files until they find the relevant JSON to use, so the filenames are not critical. Saying that, you should always name them as intuitively as possible.

+
diff --git a/files/it/mdn/structures/macros/index.html b/files/it/mdn/structures/macros/index.html new file mode 100644 index 0000000000..a09cf37e30 --- /dev/null +++ b/files/it/mdn/structures/macros/index.html @@ -0,0 +1,42 @@ +--- +title: Using macros on MDN +slug: MDN/Guidelines/Macros +tags: + - italino tags +translation_of: MDN/Structures/Macros +--- +
{{MDNSidebar}}

The Kuma platform on which MDN runs provides a powerful macro system, KumaScript, which makes it possible to do a wide variety of things automatically. This article provides information on how to invoke MDN's macros within articles.

+ +

The KumaScript guide provides an in-depth look at how to use macros on MDN, so this section is more of a brief overview. If you've already read the section above on {{SectionOnPage("/en-US/docs/Project:MDN/Contributing/Editor_guide/Links", "Using link macros")}}, you're already at least a little bit familiar with the concept.

+ +

How macros are implemented

+ +

Macros on MDN are implemented using server-executed JavaScript code, interpreted using Node.js. On top of that we have a number of libraries we've implemented that provide wiki-oriented services and features to let macros interact with the wiki platform and its contents. If you're interested in learning more, see the KumaScript guide; the KumaScript reference provides details on the libraries and other KumaScript APIs we've implemented.

+ +

Using a macro in content

+ +

To actually use a macro, you simply enclose the call to the macro in a pair of double-braces, with its parameters, if any, enclosed in parentheses; that is:

+ +
\{{macroname(parameter-list)}}
+ +

A few notes about macro calls:

+ + + +

Macros are heavily cached; for any set of input values (both parameters and environmental values such as the URL for which the macro was run), the results are stored and reused. This means that the macro is only actually run when the inputs change.

+ +
+

Note: You can force all the macros on a page to be re-evaluated by force-refreshing the page in your browser (that is, a shift-reload).

+
+ +

Macros can be as simple as just inserting a larger block of text or swapping in contents from another part of MDN, or as complex as building an entire index of content by searching through parts of the site, styling the output, and adding links.

+ +

You can read up on our most commonly-used macros on the Custom macros page; also, there's a complete list of all macros here. Most macros have documentation built into them, as comments at the top.

+ +

{{EditorGuideQuicklinks}}

diff --git "a/files/it/mdn/structures/tabelle_compatibilit\303\240/index.html" "b/files/it/mdn/structures/tabelle_compatibilit\303\240/index.html" deleted file mode 100644 index 81ee695696..0000000000 --- "a/files/it/mdn/structures/tabelle_compatibilit\303\240/index.html" +++ /dev/null @@ -1,496 +0,0 @@ ---- -title: Tabelle di compatibilità -slug: MDN/Structures/Tabelle_compatibilità -translation_of: MDN/Structures/Compatibility_tables ---- -
{{MDNSidebar}}
{{IncludeSubnav("/en-US/docs/MDN")}}
- -

MDN ha un formato standard di tabelle di compatibilità per la nostra documentazione web open; in altre parole, la documentazione di tecnologie come DOM, HTML, CSS, JavaScript, SVG, ecc., che viene condivisa attraverso tutti i browsers. Questo articolo spiega come usare le nostre funzionalità per aggiungere dati di compatibilità alle pagine MDN.

- -
-

Importante: Il modo in cui i dati sono generati è cambiato. Storicamente le nostre tabelle erano inserite sulla pagina e i dati inseriti manualmente.   Questo è inefficiente, rende la manutenzione difficile e rende i dati inflessibili. Per questo, stiamo cambiando i dati di compatibilità per browser al fine di essere immagazzinati in una repository dati (vedi https://github.com/mdn/browser-compat-data) generando le tabelle programmaticamente.
-
- In questa guida, documentiamo il nuovo metodo per aggiungere dati di compatibilità in MDN, mantenendo tuttavia, la documentazione sul vecchio metodo, poiché saranno ancora presenti per un po' le tabelle popolate manualmente su MDN. Se hai bisogno di vedere la vecchia documentazione, controlla il nostro articolo Old compatibility tables.

-
- -
-

Nota: Se hai bisogno di aiuto con un qualsiasi step di questa guida, puoi contattarci al MDN discussion forum.

-
- -

Come accedere alla repository dati

- -

I dati sono conservati in un repository GitHub — vedi https://github.com/mdn/browser-compat-data. Per accedervi, hai bisogno di un account GitHub, fare un fork del repository browser-compat-data attraverso il tuo account, infine clonare il fork localmente sulla tua macchina.

- -

Choosing a feature to add data for

- -

First of all, find a feature that you want to add browser-compat-data for. This could be an HTML element, CSS property, JS language feature or JS API interface, for example. We would like to encourage you to work on API features, as we already have people working on HTML, JS, and CSS. You can find the status of features that need their data adding to the repo on our Browser Compat Data migration spreadsheet.

- -

The process for using this is as follows:

- -
    -
  1. Go ahead and choose a feature that is not already being worked on or complete. Put your name in the "Who" column, preferably along with your MDN username so we can find your email address and contact you if we need to.
    2. -
  2. If the feature you want to work on is not already listed in the spreadsheet, add rows for it in an appropriate place, copying the format that is already there. You should also use the same granularity (e.g. per element for HTML, per property or selector for CSS, per object for JS, per interface for APIs).
    3. -
  3. Once you've started work on adding the data, put the status to "In progress".
    4. -
  4. Once you've added the data and submitted a pull request to the main repo, put the status to "PR done".
    5. -
  5. As your data is merged to the repo, then added to the npm package, update the status as necessary.
    6. -
  6. Once you've updated the documentation page(s) for your feature to use the new macro to dynamically generate the appropriate data table on each page, set the status to "Article updated". At this point, you are done.
    7. -
- -

Preparing to add the data

- -

Before adding some new data, you should make sure that your fork is up-to-date with the main repo (it contains the same content), create a new branch inside your fork to contain your additions, then pull that branch into your local clone so you can start working inside it:

- -

Let's look at a simple way to make sure your fork is to-to-date is as follows:

- -

Adding the main browser-compat-data repo as a remote

- -

Go to your local clone of your fork in your terminal/command line, and add a remote pointing to the main (upstream) repo like so (you only need to do this once):

- -
git remote add upstream https://github.com/mdn/browser-compat-data.git
- -

If you are unsure whether you've done this, you can check what remotes your repo has using

- -
git remote -v
- -

Updating your fork with the remote's content

- -

Now, whenever you want to update your fork, you can do so by:

- -
    -
  1. -

    Making sure you are in the master branch:

    - - 
    git checkout master
    -
    2. -
  2. -

    fetching the up-to-date repo contents using the following:

    - - 
    git fetch upstream
    -
    3. -
  3. -

    rebasing the contents of your master with the main repo's contents:

    - - 
    git rebase upstream/master
    -
    4. -
  4. -

    pushing these updates back to your remote fork using this:

    - - 
    git push -f
    -
    5. -
- -

Creating a new branch to do your work in

- -

Next, go to your remote fork (it will be at https://github.com/your-username/browser-compat-data) and create a new branch to store your changes for this data addition. This can be done by:

- -
    -
  1. Clicking on the "Branch: Master" button.
    2. -
  2. Entering a new branch name into the "Find or create a branch..." text field.
    3. -
  3. Pressing the resulting "Create branch name-of-branch from Master" button.
    4. -
- -

For example, if you were wanting to add data for the WebVR API, you'd create a branch called something like "webvr".

- -

Switching to the new branch

- -

At this point, go back to your terminal/command line, and update your fork's local clone to include your new branch using the following command:

- -
git pull
- -

Now switch to your new branch using this:

- -
git checkout name-of-branch
- -

You should now be ready to start adding your data!

- -

Adding the data

- -

To add the data, you need to create a new file or files to store your compat data in. The files you need to create differ, depending on what technology you are working on:

- - - -
-

Note: You'll notice that the repo also contains data for Browser Extensions and HTTP. These data sets are basically finished as they stand, but more features may need to be added in the future.

-
- -

Each file you create has to follow the pattern defined in the schema contained within our repo; you can see the detailed schema description here.

- -

Basic compat data structure

- -

Let's look at an example. CSS property JSON files for example need the following basic structure:

- -
{
-  "css": {
-    "properties": {
-      "border-width": {
-        "__compat": {
-          ...
-        }
-      }
-    }
-  }
-}
- -

You have the css object, inside of which is a properties object. Inside the properties object, you need one member for each of the specific features you want to define the compat data for. Each of these members has a __compat member, inside of which the actual data goes.

- -

The above data is found in the border-width.json file — compare this to the rendered border-width support table on MDN.

- -

Other types of features work in the same way, but with different object names:

- - - -
-

In HTML, CSS, and JS pages, you'll normally only need one feature. API interfaces work slightly differently — they always have multiple sub-features (see {{anch("Sub-features")}}, below).

- -

Basic structure inside a feature

- -

Inside a feature __compat member, you need to include the following members:

- - - -

The names of the browser members are defined in the schema (see Browser identifiers). You should use the full list of currently defined identifiers. If you wish to add another browser, talk to us first, as this could have a wide-ranging impact and should not be done without careful thought.

- -

In a basic browser compat data file, you'll only need to include "version_added" inside the browser identifier members (we'll cover {{anch("Advanced cases")}} later on). The different values you might want to include are as follows:

- - - -

Inside the status member, you'll include three submembers:

- - - -

The feature data for border-width (also see border-width.json) is shown below as an example:

- -
"__compat": {
-  "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/border-width",
-  "support": {
-    "chrome": {
-      "version_added": "1"
-    },
-    "webview_android": {
-      "version_added": "2"
-    },
-    "edge": {
-      "version_added": true
-    },
-    "edge_mobile": {
-      "version_added": true
-    },
-    "firefox": {
-      "version_added": "1"
-    },
-    "firefox_android": {
-      "version_added": "1"
-    },
-    "ie": {
-      "version_added": "4"
-    },
-    "ie_mobile": {
-      "version_added": "6"
-    },
-    "opera": {
-      "version_added": "3.5"
-    },
-    "opera_android": {
-      "version_added": "11"
-    },
-    "safari": {
-      "version_added": "1"
-    },
-    "safari_ios": {
-      "version_added": "3"
-    }
-  },
-  "status": {
-    "experimental": false,
-    "standard_track": true,
-    "deprecated": false
-  }
-}
- -

Adding a description

- -

There is a fourth, optional, member that can go inside the __compat member — description. This can be used to include a human-readable description of the feature. You should only include this if it is hard to see what the feature is from glancing at the data. For example, it might not be that obvious what a constructor is from looking at the data structure, so you can include a description like so:

- -
{
-  "api": {
-    "AbortController": {
-      "__compat": {
-        ...
-      },
-      "AbortController": {
-        "__compat": {
-          "mdn_url": "https://developer.mozilla.org/docs/Web/API/AbortController/AbortController",
-          "description": "<code>AbortController()</code> constructor",
-          "support": {
-            ...
-          }
-        }
-      }
-
-      ... etc.
-    }
-  }
-}
- -

Sub-features

- -

In a page where the compat table has more than one row, you'll need multiple subfeatures inside each feature to define the information for each row. This can happen, for example, when you've got the basic support for a feature stored in one row, but then the feature also has a new property or value type that was addded much later in the specification's life and is only supported in a couple of browsers.

- -

As an example, see the compat data and corresponding MDN page for the background-color property. The basic support exists inside the __compat object as explained above, then you have an additional row for browsers' support for "alpha channel for hex values", which contains its own __compat object.

- -
{
-  "css": {
-    "properties": {
-      "background-color": {
-        "__compat": {
-          ...
-        },
-        "alpha_ch_for_hex": {
-          "__compat": {
-            ...
-          },
-        }
-      }
-    }
-  }
-}
- -

For an API, you've got the top two levels defined as api.name-of-the-interface, then a top-level __compat section to define the overall browser compatibility of the interface, then a sub-feature for each of the methods, properties, and constructors contained inside the interface. The basic structure looks like this:

- -
{
-  "api": {
-    "VRDisplay": {
-      "__compat": {
-        ...
-      },
-      "cancelAnimationFrame": {
-        "__compat": {
-          ...
-        }
-      },
-      "capabilities": {
-        "__compat": {
-          ...
-        }
-      },
-
-      ... etc.
-
-    }
-  }
-}
- -

See VRDisplay.json for a full example.

-
- -

Adding data: Advanced cases

- -

There are some advanced features that you'll want to include in browser compat data. The aim of this section is to list the most common ones, providing an example of each to show how you can implement them in your own compat data.

- -

Including a footnote

- -

Often compat tables will include footnotes related to certain entries that explain useful details or strange behavior that developers will find useful. As an example, the Chrome Android entry for {{domxref("VRDisplay.capabilities")}} (see also VRDisplay.json)  (at the time of writing) had a footnote "Currently supported only by Google Daydream." To include this in the capabilities data, we added a "notes" submember inside the relevant "chrome_android" submember; it would look like this:

- -
"chrome_android": {
-  "version_added": true,
-  "notes": "Currently supported only by Google Daydream."
-}
- -

Including a vendor prefix

- -

If a feature is supported behind a vendor prefix in one or more browsers, you'll want to make that clear in the browser compat data. imagine you had a feature that was supported with a -moz- prefix in Firefox. To specify this in the compat data, you'd need to add a "prefix" submember inside the relevant "firefox" submember. It would look something like this:

- -
"firefox": {
-  "version_added": true,
-  "prefix": "-moz-"
-}
- -

Including browser preferences or flags

- -

Some features may be supported in a browser, but they are experimental and turned off by default. If a user wants to play with this feature they need to turn it on using a preference/flag.

- -

To represent this in the compat data, you need to add the "flags" submember inside the relevant browser identifier submember. The value of "flags" is an array of objects each of which contains of three members:

- - - -

So to add a preference/flag to the Chrome support for a feature, you'd do something like this:

- -
"chrome": {
-  "version_added": "50",
-  "flags": [
-    {
-      "type": "preference",
-      "name": "Enable Experimental Web Platform Features",
-      "value_to_set": "true"
-    }
-  ]
-},
- -

If a feature is behind two or more flags, you can add additional objects to the "flags" array, like in this case, for example:

- -
"firefox": {
-  "version_added": "57",
-  "flags": [
-    {
-      "type": "preference",
-      "name": "dom.streams.enabled",
-      "value_to_set": "true"
-    },
-    {
-      "type": "preference",
-      "name": "javascript.options.streams",
-      "value_to_set": "true"
-    }
-  ]
-},
- -

Including a version where support was removed

- -

Sometimes a feature will be added in a certain browser version, but then removed again as the feature is deprecated. This can be easily represented using the "version_removed" submember, which takes as its value a string representing the version number it was removed on. For example:

- -
"firefox": {
-  "version_added": "35",
-  "version_removed": "47",
-},
- -

Including multiple support points for the same browser entry

- -

Sometimes you'll want to add multiple support data points for the same browser inside the same feature.

- -

As an example, the {{cssxref("text-align-last")}} property (see also text-align-last.json) was added to Chrome in version 35, supported behind a pref.

- -

The support mentioned above was then removed in version 47; also in version 47, support was added for text-align-last enabled by default.

- -

To include both of these data points, you can make the value of the "chrome" submember an array containing two support information objects, rather than just a single support information object:

- -
"chrome": [
-  {
-    "version_added": "47"
-  },
-  {
-    "version_added": "35",
-    "version_removed": "47",
-    "flags": [
-      {
-        "type": "preference",
-        "name": "Enable Experimental Web Platform Features",
-        "value_to_set": "true"
-      }
-    ]
-  }
-],
- -
-

Note: You should put the most current or important support point first in the array — this makes the data easier to read for people who just want to scan it for the latest info.

-
- -

Including an alternative name

- -

Occasionally browsers will support a feature under a different name to the name defined in its specification. This might be for example because a browser added experimental support for a feature early, and then the name changed before the spec stabilized.

- -

To include such a case in the browser compat data, you can include a support information point that specifies the alternative name inside an "alternative_name" member.

- -
-

Note: The alternative name might not be an exact alias — it might have differing behaviour to the standard version.

-
- -

Let's look at an example. The {{cssxref("border-top-right-radius")}} property (see also border-top-right-radius.json) was supported in Firefox:

- - - -

To represent this in the data, we used the following JSON:

- -
"firefox": [
-  {
-    "version_added": "4",
-    "notes": "Prior to Firefox 50.0, border styles of rounded corners were always rendered as if <code>border-style</code> was solid. This has been fixed in Firefox 50.0."
-  },
-  {
-    "prefix": "-webkit-",
-    "version_added": "49",
-    "notes": "From Firefox 44 to 48, the <code>-webkit-</code> prefix was available with the <code>layout.css.prefixes.webkit</code> preference. Starting with Firefox 49, the preference defaults to <code>true</code>."
-  },
-  {
-    "alternative_name": "-moz-border-radius-topright",
-    "version_added": "1",
-    "version_removed": "12"
-  }
-],
- -

Pushing a change back to the main repo

- -

Once you are finished with adding your compat data, you should first test it using the following commands:

- - - -

If it is looking OK, you then need to commit it and push it back up to your remote fork on GitHub. You can do this easily with terminal commands like this:

- -
git add .
-git commit -m 'adding compat data for name-of-feature'
-git push
- -

Now go to your remote fork (i.e. https://github.com/your-username/browser-compat-data) and you should see information about your push at the top of the files list (under "Your recently pushed branches"). You can create a pull request (starting the process of pushing this to the main repo) by pressing the "Compare & pull request" button, then following the simple prompts on the subsequent screen.

- -

At this point, you just need to wait. A reviewer will review your pull request, and merge it with the main repo, OR request that you make changes. If changes are needed, make the changes and submit again until the PR is accepted.

- -

Inserting the data into MDN pages

- -

Once your new data has been included in the main repo, you can start dynamically generating browser compat tables based on that data on MDN pages using the \{{Compat}} macro. This takes a single parameter, the dot notation required to walk down the JSON data and find the object representing the feature you want to generate the compat table for.

- -

Above the macro call, to help other contributors finding their way, you should add a hidden text that is only visible in MDN contributors in edit mode:

- -
<div class="hidden">
-<p>The compatibility table on this page is generated from structured data.
-If you'd like to contribute to the data, please check out
-<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>
-and send us a pull request.</p>
-</div>
- -

As an example, on the {{httpheader("Accept-Charset")}} HTTP header page, the macro call looks like this: \{{Compat("http.headers.Accept-Charset")}}. If you look at the accept-charset.json file in the repo, you'll see how this is reflected in the JSON data.

- -

As another example, The compat table for the {{domxref("VRDisplay.capabilities")}} property is generated using \{{Compat("api.VRDisplay.capabilities")}}. The macro call generates the following table (and corresponding set of notes):

- -
- - -

{{Compat("api.VRDisplay.capabilities")}}

- -
-

Note: The filenames often match the labels given to the interfaces inside the JSON structures, but it is not always the case. When the macro calls generate the tables, they walk through all the files until they find the relevant JSON to use, so the filenames are not critical. Saying that, you should always name them as intuitively as possible.

-
diff --git a/files/it/mdn_at_ten/index.html b/files/it/mdn_at_ten/index.html deleted file mode 100644 index ab7c64d1ad..0000000000 --- a/files/it/mdn_at_ten/index.html +++ /dev/null @@ -1,41 +0,0 @@ ---- -title: 10 anni di MDN -slug: MDN_at_ten -tags: - - History - - Landing - - MDN Meta -translation_of: MDN_at_ten ---- -

Celebra 10 anni di documentazione Web.

- -
-
-

La storia di MDN

- -

All'inizio del 2005 una piccola squadra di idealisti si unì per creare una nuova raccolta di risorse per gli sviluppatori web che fosse gratuita e costruita dalla comunità. Dalla loro idea tanto brillante quanto anticonformista crebbe il Mozilla Developer Network che conosciamo oggi, ovvero la principale fonte di risorse per tutte le tecnologie web aperte. Dieci anni più tardi la nostra comunità globale è più grande che mai e continuiamo ancora a creare documentazione, codice d'esempio, risorse relative a tutte le tecnologie web open, incluse CSS, HTML e Javascript, e tutti gli strumenti che rendono l'open Web all'avanguardia.

- -

Scopri di più about the history

- - -

Collaborare a MDN

- -

Da dieci anni la community di MDN sta documentando l'open Web. Dalla correzione di semplici errori di battitura fino ad arrivare allo sviluppo di API completamente nuove, tutti hanno qualcosa da offrire e non esistono contributi troppo piccoli o troppo grandi. MDN annovera oltre 90.000 pagine scritte o tradotte da membri della nostra fantastica comunità di Mozillians. Anche tu puoi diventare uno di loro, anzi, uno di noi.

- -

Scopri di più about contributing

- -

 

- -

 

-
- -
{{TenthCampaignQuote}}
- -

Vedi anche

- -
    -
  1. 10 anni di MDN
    2. -
  2. La storia di MDN
    3. -
  3. Contribuire a MDN
    4. -
-
diff --git a/files/it/mozilla/add-ons/webextensions/content_scripts/index.html b/files/it/mozilla/add-ons/webextensions/content_scripts/index.html new file mode 100644 index 0000000000..4ee11316c5 --- /dev/null +++ b/files/it/mozilla/add-ons/webextensions/content_scripts/index.html @@ -0,0 +1,494 @@ +--- +title: Script di contenuto +slug: Mozilla/Add-ons/WebExtensions/Script_contenuto +tags: + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Content_scripts +--- +
{{AddonSidebar}}
+ +

Uno script di contenuto è una parte dell'estensione che viene eseguita nel contesto di una particolare pagina Web (al contrario degli script di sfondo che fanno parte dell'estensione o degli script che fanno parte del sito stesso, come quelli caricati utilizzando l'elemento {{HTMLElement("script")}}).

+ +

Gli script in Background possono accedere a tutte le WebExtension JavaScript APIs, ma non possono accedere direttamente al contenuto delle pagine Web. Quindi, se la tua estensione ha bisogno di farlo, hai bisogno degli script di contenuto .

+ +

Proprio come gli script caricati da normali pagine web, gli script di contenuto possono leggere e modificare il contenuto delle loro pagine usando le API DOM standard.

+ +

Gli script di contenuto possono accedere solo a un piccolo sottoinsieme delle API di WebExtension, ma possono comunicare con script in background utilizzando un sistema di messaggistica e quindi accedere indirettamente alle API di WebExtension.

+ +

Gli script di contenuto possono accedere solo a un piccolo sottoinsieme delle WebExtension APIs, ma possono comunicare con gli script in background utilizzando un sistema di messaggistica e quindi accedere indirettamente alle WebExtension APIs.

+ +
+

Nota che gli script di contenuto sono bloccati nei seguenti domini:

+ + + +

Se provi a iniettare uno script di contenuto in una pagina in uno di questi domini, l'operazione fallirà e la pagina registrerà un errore CSP.

+ +

Poiché queste restrizioni includono addons.mozilla.org, gli utenti possono essere tentati di utilizzare l'estensione immediatamente dopo l'installazione, solo per scoprire che non funziona! È possibile aggiungere un avviso appropriato o una pagina di inserimento per spostare gli utenti da addons.mozilla.org.

+
+ +
+

Valori aggiunti all'ambito globale di uno script di contenuto con var foo o window.foo = "bar" potrebbe scomparire a causa di un bug 1408996.

+
+ +

Caricamento di script di contenuto

+ +

Puoi caricare uno script di contenuto in una pagina web in tre modi:

+ +

Al momento dell'installazione, nelle pagine che corrispondono ai pattern URL: utilizzando la chiave content_scripts in manifest.json, è possibile chiedere al browser di caricare uno script di contenuto ogni volta che il browser carica una pagina il cui URL corrisponde a un determinato pattern.

+ +
    +
  1. Al momento dell'installazione, nelle pagine che corrispondono al pattern URL: utilizzando il tag content_scripts nel vostro file manifest.json, è possibile chiedere al browser di caricare uno script di contenuto ogni volta che il browser carica una pagina il cui URL corrisponde ad un determinato pattern
    2. +
  2. In fase di runtime, nelle pagine che corrispondono a un determinato pattern URL: utilizzando {{WebExtAPIRef("contentScripts")}} API, potete chiedere al browser di caricare uno script di contenuto ogni volta che il browser carica una pagina il cui URL corrisponde ad un determinato pattern. Questo è un metodo possibile (1), tranne che è possibile aggiungere e rimuovere script di contenuto in fase di esecuzione.
    3. +
  3. In fase di runtime, in specifiche schede: utilizzando le tabs.executeScript() API, è possibile caricare uno script di contenuto in una scheda specifica ogni volta che si desidera: ad esempio, in risposta all'utente che fa clic su una azione del browser.
    4. +
+ +

Esiste un solo ambito globale per frame e per estensione. Ciò significa che le variabili di uno script di contenuto possono essere direttamente accessibili da un altro script di contenuto, indipendentemente dal modo in cui è stato caricato.

+ +

Utilizzando i metodi (1) e (2), è possibile caricare gli script solo in pagine i cui URL possono essere rappresentati utilizzando un pattern di confronto.

+ +

Usando il metodo (3), puoi anche caricare script in pagine contenute nella tua estensione, ma non puoi caricare script in pagine del browser privilegiate (come "about: debugging" o "about: addons").

+ +

Ambiente degli script di contenuto

+ +

accesso al DOM

+ +

Gli script di contenuto possono accedere e modificare il DOM della pagina, proprio come possono fare i normali script di pagina. Possono anche vedere eventuali modifiche apportate al DOM tramite script di pagina.

+ +

Tuttavia, gli script di contenuto ottengono una "visualizzazione originale del DOM". Questo significa:

+ + + +

In Firefox, questo comportamento è chiamato Xray vision.

+ +

Consideriamo una pagina web come questa:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+  </head>
+
+  <body>
+    <script src="page-scripts/page-script.js"></script>
+  </body>
+</html>
+ +

Lo script "page-script.js" esegue:

+ +
// page-script.js
+
+// add a new element to the DOM
+var p = document.createElement("p");
+p.textContent = "This paragraph was added by a page script.";
+p.setAttribute("id", "page-script-para");
+document.body.appendChild(p);
+
+// define a new property on the window
+window.foo = "This global variable was added by a page script";
+
+// redefine the built-in window.confirm() function
+window.confirm = function() {
+  alert("The page script has also redefined 'confirm'");
+}
+ +

Ora un'estensione inietta uno script di contenuto nella pagina:

+ +
// content-script.js
+
+// can access and modify the DOM
+var pageScriptPara = document.getElementById("page-script-para");
+pageScriptPara.style.backgroundColor = "blue";
+
+// can't see page-script-added properties
+console.log(window.foo);  // undefined
+
+// sees the original form of redefined properties
+window.confirm("Are you sure?"); // calls the original window.confirm()
+ +

Lo stesso vale al contrario: gli script di pagina non possono vedere le proprietà JavaScript aggiunte dagli script di contenuto.

+ +

Ciò significa che gli script di contenuto possono contare su proprietà DOM che si comportano in modo prevedibile, senza preoccuparsi delle sue variabili che si scontrano con le variabili dello script di pagina.

+ +

Una conseguenza pratica di questo comportamento è che uno script di contenuto non avrà accesso a nessuna libreria JavaScript caricata dalla pagina. Ad esempio, se la pagina include jQuery, lo script di contenuto non sarà in grado di vederlo.

+ +

Se uno script di contenuto desidera utilizzare una libreria JavaScript, la stessa libreria deve essere iniettata come script di contenuto insieme allo script di contenuto che vuole utilizzarlo:

+ +
"content_scripts": [
+  {
+    "matches": ["*://*.mozilla.org/*"],
+    "js": ["jquery.js", "content-script.js"]
+  }
+]
+ +
+

Nota: Firefox fornisce alcune API che consentono agli script di contenuto di accedere agli oggetti JavaScript creati dagli script di pagina e di esporre i propri oggetti JavaScript agli script di pagina.

+ +

Vedere Condivisione di oggetti con script di pagina per maggiori dettagli.

+
+ +

WebExtension APIs

+ +

Oltre alle API DOM standard, gli script di contenuto possono utilizzare le seguenti API WebExtension:

+ +

Da extension:

+ + + +

Da runtime:

+ + + +

Da i18n:

+ + + +

Da menus:

+ + + +

Tutto da storage.

+ +

XHR e Fetch

+ +

Gli script di contenuto posso fare delle normali richieste usando window.XMLHttpRequest e window.fetch() APIs.

+ +

Gli script di contenuto ottengono gli stessi privilegi per i cross-domain del resto dell'estensione: quindi se l'estensione ha richiesto l'accesso tra cross-domain per un dominio utilizzando il tag permissions nel file manifest.json, i suoi script di contenuto ottengono l'accesso anche a quel dominio.

+ +

Ciò si ottiene esponendo le istanze XHR e di recupero più privilegiate nello script di contenuto, che ha l'effetto collaterale di non impostare le intestazioni di Origin e Referer come una richiesta dalla pagina stessa, spesso è preferibile evitare che la richiesta sveli la sua natura trasversale. Dalla versione 58 in poi le estensioni che devono eseguire richieste che si comportano come se fossero inviate dal contenuto stesso possono utilizzare content.XMLHttpRequest e content.fetch() instead. Per le estensioni cross-browser, la loro presenza deve essere rilevata dalla funzione.

+ +

Communicazione con gli script di background

+ +

Sebbene gli script di contenuto non possano utilizzare direttamente la maggior parte delle API di WebExtension, possono comunicare con gli script in background dell'estensione utilizzando le API di messaggistica e pertanto possono accedere indirettamente a tutte le API a cui possono accedere gli script in background.

+ +

Esistono due schemi di base per la comunicazione tra gli script in background e gli script di contenuto: è possibile inviare messaggi una tantum, con una risposta opzionale, oppure è possibile impostare una connessione più longeva tra i due lati e utilizzare tale connessione per scambiare messaggi .

+ +

Messaggi one-off

+ +

Per inviare messaggi one-off, con una risposta opzionale, puoi utilizzare le seguenti API:

+ + + + + + + + + + + + + + + + + + + + + +
 In content scriptIn background script
Invia un messaggibrowser.runtime.sendMessage()browser.tabs.sendMessage()
Ricevi un messaggiobrowser.runtime.onMessagebrowser.runtime.onMessage
+ +

Ad esempio, ecco uno script di contenuto che si pone in ascolto degli eventi click in una pagina web.
+
+ Se il clic era su un collegamento, invia la pagina di sfondo con l'URL di destinazione:

+ +
// content-script.js
+
+window.addEventListener("click", notifyExtension);
+
+function notifyExtension(e) {
+  if (e.target.tagName != "A") {
+    return;
+  }
+  browser.runtime.sendMessage({"url": e.target.href});
+}
+ +

Lo script in background ascolta questi messaggi e visualizza una notifica utilizzando le notifications API:

+ +
// background-script.js
+
+browser.runtime.onMessage.addListener(notify);
+
+function notify(message) {
+  browser.notifications.create({
+    "type": "basic",
+    "iconUrl": browser.extension.getURL("link.png"),
+    "title": "You clicked a link!",
+    "message": message.url
+  });
+}
+
+ +

(Questo codice di esempio è una riduzione dell'esempio notify-link-clicks-i18n che è possibile trovare su GitHub.)

+ +

Messaggi connection-based

+ +

L'invio di messaggi one-off può risultare complicato se si scambiano molti messaggi tra uno script in background e uno script di contenuto. Quindi uno schema alternativo è stabilire una connessione più longeva tra i due contesti e usare questa connessione per scambiare messaggi.

+ +

Ogni lato ha un oggetto runtime.Port, che può utilizzare per scambiare messaggi.

+ +

Per creare la connessione:

+ + + +

Questo metodo ritorna un oggetto di tipo runtime.Port.

+ + + +

Dopo che tutti e due i lati hanno una porta di comunicazione possono:

+ + + +

Ad esempio, appena viene caricato, questo script di contenuto:

+ + + +
// content-script.js
+
+var myPort = browser.runtime.connect({name:"port-from-cs"});
+myPort.postMessage({greeting: "hello from content script"});
+
+myPort.onMessage.addListener(function(m) {
+  console.log("In content script, received message from background script: ");
+  console.log(m.greeting);
+});
+
+document.body.addEventListener("click", function() {
+  myPort.postMessage({greeting: "they clicked the page!"});
+});
+ +

Lo script di sfondo corrispondente:

+ + + +
// background-script.js
+
+var portFromCS;
+
+function connected(p) {
+  portFromCS = p;
+  portFromCS.postMessage({greeting: "hi there content script!"});
+  portFromCS.onMessage.addListener(function(m) {
+    console.log("In background script, received message from content script");
+    console.log(m.greeting);
+  });
+}
+
+browser.runtime.onConnect.addListener(connected);
+
+browser.browserAction.onClicked.addListener(function() {
+  portFromCS.postMessage({greeting: "they clicked the button!"});
+});
+
+ +

Multipli script di contenuto

+ +

Se si dispone di più script di contenuto che comunicano contemporaneamente, è possibile memorizzare ciascuna connessione in un array.

+ + + +
// background-script.js
+
+var ports = []
+
+function connected(p) {
+  ports[p.sender.tab.id]    = p
+  //...
+}
+
+browser.runtime.onConnect.addListener(connected)
+
+browser.browserAction.onClicked.addListener(function() {
+  ports.forEach(p => {
+        p.postMessage({greeting: "they clicked the button!"})
+    })
+});
+
+ + + +

Communicazione con la pagina web

+ +

Sebbene per impostazione predefinita gli script di contenuto non abbiano accesso agli oggetti creati dagli script di pagina, possono comunicare con gli script di pagina utilizzando la API DOM window.postMessage e window.addEventListener.

+ +

Per esempio:

+ +
// page-script.js
+
+var messenger = document.getElementById("from-page-script");
+
+messenger.addEventListener("click", messageContentScript);
+
+function messageContentScript() {
+  window.postMessage({
+    direction: "from-page-script",
+    message: "Message from the page"
+  }, "*");
+ +
// content-script.js
+
+window.addEventListener("message", function(event) {
+  if (event.source == window &&
+      event.data &&
+      event.data.direction == "from-page-script") {
+    alert("Content script received message: \"" + event.data.message + "\"");
+  }
+});
+ +

Per un esempio completo e funzionante, visitate la pagina demo su GitHub e seguite le istruzioni.

+ +
+

Nota che ogni volta che si interagisce con contenuti web non fidati in questo modo, è necessario fare molta attenzione. Le estensioni sono codici privilegiati che possono avere potenti funzionalità e pagine Web ostili possono facilmente ingannarli per accedere a tali funzionalità.
+
+ Per fare un esempio banale, supponiamo che il codice dello script del contenuto che riceve il messaggio faccia qualcosa del genere: 

+ +
window.addEventListener("message", function(event) {
+  if (event.source == window &&
+      event.data.direction &&
+      event.data.direction == "from-page-script") {
+    eval(event.data.message);
+  }
+});
+ +

Ora lo script di pagina può eseguire qualsiasi codice con tutti i privilegi dello script di contenuto.

+
+ +

Usare eval() in uno script di contenuto

+ +

In Chrome, eval() esegue sempre il codice nel contesto dello script del contenuto, non nel contesto della pagina.

+ +

In Firefox:

+ + + +

Per esempio, considerate uno script di contenuto simile a questo:

+ +
// content-script.js
+
+window.eval('window.x = 1;');
+eval('window.y = 2');
+
+console.log(`In content script, window.x: ${window.x}`);
+console.log(`In content script, window.y: ${window.y}`);
+
+window.postMessage({
+  message: "check"
+}, "*");
+ +

Questo codice crea semplicemente le variabili x e y usando window.eval() and eval(), quindi invia i loro valori al log della console, ed infine invia un messaggio alla pagina.

+ +

Alla ricezione del messaggio, lo script della pagina invia le variabili al log della console:

+ +

 

+ +
window.addEventListener("message", function(event) {
+  if (event.source === window && event.data && event.data.message === "check") {
+    console.log(`In page script, window.x: ${window.x}`);
+    console.log(`In page script, window.y: ${window.y}`);
+  }
+});
+ +

In Chrome, si ottine questo risultato:

+ +
In content script, window.x: 1
+In content script, window.y: 2
+In page script, window.x: undefined
+In page script, window.y: undefined
+ +

In Firefox, invece, il risultato sarà il seguente:

+ +
In content script, window.x: undefined
+In content script, window.y: 2
+In page script, window.x: 1
+In page script, window.y: undefined
+ +

Lo stesso vale per setTimeout(), setInterval(), e Function().

+ +
+

Quando si esegue il codice nel contesto della pagina, è necessario prestare molta attenzione. L'ambiente della pagina è controllato da pagine Web potenzialmente dannose, che possono ridefinire gli oggetti con cui interagire per comportarsi in modi imprevisti:

+ +
// page.js redefines console.log
+
+var original = console.log;
+
+console.log = function() {
+  original(true);
+}
+
+ + +
// content-script.js calls the redefined version
+
+window.eval('console.log(false)');
+
+
diff --git a/files/it/mozilla/add-ons/webextensions/cosa_sono_le_webextensions/index.html b/files/it/mozilla/add-ons/webextensions/cosa_sono_le_webextensions/index.html deleted file mode 100644 index c74fbd8473..0000000000 --- a/files/it/mozilla/add-ons/webextensions/cosa_sono_le_webextensions/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: Cosa sono le estensioni? -slug: Mozilla/Add-ons/WebExtensions/Cosa_sono_le_WebExtensions -tags: - - Estensioni - - WebExtension -translation_of: Mozilla/Add-ons/WebExtensions/What_are_WebExtensions ---- -
{{AddonSidebar}}
- -

Un'estensione modifica le funzionalità di un browser. Viene creata utilizzando gli standard della tecnologia web - HTML, CSS, e JavaScript. Può trarre vantaggio dalle stesse web API come JavaScript può in una pagina web, ma un'estensione ha anche accesso ad un proprio set di API JavaScript. Questo significa che puoi fare molto di più in un'estensione di quanto tu ne possa fare con il codice in una pagina. Questi sono soltanto alcuni esempi delle cose che puoi fare:

- -

Migliorare o completare un sito web: Usa un'estensione per inviare nel browser caratteristiche o informazioni aggiuntive dal tuo sito web. Permettere agli utenti di raccogliere informazioni dalle pagine che visitano per migliorare il servizio che offri.

- -

- -

Esempi: Amazon Assistant, OneNote Web Clipper e Grammarly for Firefox

- -

Permettere agli utenti di mostrare la loro personalità: Le estensioni del browser possono manipolare il contenuto delle pagine che l'utente visita. Aiuta gli utenti ad aggiungere un logo o un'immagine preferita come sfondo di tutte le pagine che visitano. Le estensioni ti danno anche la possibilità di aggiornare l'aspetto di Firefox. (Puoi aggiornare l'aspetto di Firefox anche con i temi).

- -

- -

Esempi: MyWeb New Tab, Tabliss e VivaldiFox

- -

Aggiungere o rimuovere contenuti dalle pagine web: Potresti voler aiutare le persone a bloccare le pubblicità intrusive dalle pagine web, fornire l'accesso ad una guida di viaggio ogni volta che un paese o una città vengono menzionati in una pagina web, o ristrutturare il contenuto di una pagina per offrire un'esperienza di lettura coerente. Con la possibilità di poter accedere e aggiornare sia l'HTML che il CSS di una pagina, puoi aiutare gli utenti a fargli vedere il web nel modo in cui lo desiderano.

- -

- -

Esempi: uBlock Origin, Reader e Toolbox for Google Play Store™

- -

Aggiungere strumenti e nuove funzionalità di navigazione: Aggiungi nuove funzionalità ad una taskboard, o generare immagini di codici QR da URL, da collegamenti ipertestuali, o dal testo di una pagina. Con le opzioni flessibili dell'UI e dal potenziale delle WebExtension API, puoi aggiungere facilmente nuove funzionalità ad un browser. Inoltre, puoi aumentare le caratteristiche e le funzionalità di qualsiasi sito web, anche se non è il tuo.

- -

- -

Esempi: QR Code Image Generator, Swimlanes for Trello e Tomato Clock

- -

Giochi: Offri giochi per computer tradizionali, con la possibilità di giocare offline, ma anche esplorare nuove possibilità di gioco, ad esempio, incorporando il gameplay nella navigazione di tutti i giorni.

- -

 

- -

Esempi: Asteroids in Popup, Solitaire Card Game New Tab e 2048 Prime

- -

Aggiungere strumenti di sviluppo: Puoi fornire strumenti di sviluppo web per il tuo lavoro, o hai sviluppato una tecnica utile o un approccio allo sviluppo web che vuoi condividere. In entrambi i casi, puoi migliorare gli strumenti di sviluppo integrati in Firefox aggiungendo una nuova scheda alla barra di strumenti per sviluppatori.

- -

- -

Esempi: Web Developer, Web React Developer Tools e aXe Developer Tools

- -

Le estensioni per Firefox vengono create utilizzando le WebExtension API, un sistema cross-browser per lo sviluppo delle estensioni. In gran parte, l'API è compatibile con l'API delle estensioni supportato da Google Chrome e Opera. Le estensioni scritte per questi browser in molti casi funzioneranno in Firefox o Microsoft Edge soltanto con poche modifiche. L'API è anche completamente compatibile con multiprocess Firefox.

- -

Se hai idee, domande, o hai bisogno di aiuto per migrare un add-on ad una WebExtension, puoi raggiungerci nelladev-addons mailing list o in #extdev su IRC.

- -

E adesso?

- - diff --git a/files/it/mozilla/add-ons/webextensions/la_tua_prima_webextension/index.html b/files/it/mozilla/add-ons/webextensions/la_tua_prima_webextension/index.html deleted file mode 100644 index fac1b12e36..0000000000 --- a/files/it/mozilla/add-ons/webextensions/la_tua_prima_webextension/index.html +++ /dev/null @@ -1,153 +0,0 @@ ---- -title: La tua prima estensione -slug: Mozilla/Add-ons/WebExtensions/La_tua_prima_WebExtension -tags: - - Guida - - WebExtension -translation_of: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension ---- -
{{AddonSidebar}}
- -

In questo articolo creeremo passo dopo passo un'estensione per Firefox, dall'inizio alla fine. L'estensione aggiungerà un bordo rosso a tutte le pagine caricate da "mozilla.org" o da un suo sottodominio.

- -

Il codice sorgente di questo esempio è su GitHub: https://github.com/mdn/webextensions-examples/tree/master/borderify.

- -

Per prima cosa hai bisogno di Firefox versione 45 o superiore.

- -

Scrittura dell'estensione

- -

Crea una cartella e posizionati al suo interno:

- -
mkdir borderify
-cd borderify
- -

manifest.json

- -

Ora, crea un nuovo file chiamato "manifest.json" all'interno della cartella "borderify". Scrivi nel file il seguente contenuto:

- -
{
-
-  "manifest_version": 2,
-  "name": "Borderify",
-  "version": "1.0",
-
-  "description": "Aggiunge un bordo rosso a tutte le pagine caricate da mozilla.org.",
-
-  "icons": {
-    "48": "icons/border-48.png"
-  },
-
-  "content_scripts": [
-    {
-      "matches": ["*://*.mozilla.org/*"],
-      "js": ["borderify.js"]
-    }
-  ]
-
-}
- - - -

La chiave più interessante è content_scripts, dice a Firefox di caricare uno script nelle pagine Web i cui URL corrispondono ad uno schema specifico. In questo caso, chiediamo a Firefox di caricare uno script chiamato "borderify.js" in tutto le pagine HTTP o HTTPS fornite da "mozilla.org" o dai suoi sottodomini.

- - - -
-

In alcune situazioni è necessario specificare un ID per la propria estensione. Se devi specificare l'ID dell'estensione, includi la chiave  applications nel file manifest.json e imposta la sua proprietà gecko.id:

- -
"applications": {
-  "gecko": {
-    "id": "borderify@example.com"
-  }
-}
-
- -

icons/border-48.png

- -

L'estensione dovrebbe avere un'icona. Essa verrà mostrata accanto alla lista delle estensioni in Gestione componenti aggiuntivi. Il file manifest.json ha dichiarato di avere un'icona a "icons/border-48.png".

- -

Crea la cartella "icons" all'interno della cartella "borderify". Salva un'icona al suo interno chiamata "border-48.png".  Puoi usare la stessa del nostro esempio, presa dal set di icone di Google Material Design, e usata secondo i termini della licenza Creative Commons Attribution-ShareAlike.

- -

Se scegli di usare la tua icona, dovrebbe essere di 48x48 pixel. Potresti anche fornire un'icona di 96x96 pixel, per i display ad alta risoluzione. Se la aggiungi, dovrà essere specificata con la proprietà 96 dell'oggetto icons nel file manifest.json:

- -
"icons": {
-  "48": "icons/border-48.png",
-  "96": "icons/border-96.png"
-}
- -

In alternativa, potresti fornite un file SVG che verrà ridimensionato correttamente. (Comunque: se utilizzi SVG e la tua icona comprende del testo, puoi utilizzare lo strumento "converti in percorso" dell'editor SVG per appiattire il testo, in modo da poter essere ridimensionato con una dimensione/posizione coerente.)

- - - -

borderify.js

- -

Infine, crea un file chiamato "borderify.js" all'interno della cartella "borderify" e scrivici questo contenuto:

- -
document.body.style.border = "5px solid red";
- -

Questo script verrà caricato in tutte le pagine che corrispondono allo schema specificato nella chiave content_scripts nel file manifest.json. Lo script ha accesso diretto al documento, proprio come gli script caricati normalmente dalla pagina.

- - - -

Provala

- -

Innanzitutto, controlla di avere i file giusti nei posti giusti:

- -
borderify/
-    icons/
-        border-48.png
-    borderify.js
-    manifest.json
- -

Installazione

- -

Apri "about:debugging" in Firefox, clicca "Carica comp. aggiuntivo temporaneo" e seleziona un qualsiasi file nella cartella dell'estensione:

- -

{{EmbedYouTube("cer9EUKegG4")}}

- -

L'estensione verrà ora installata e rimarrà finché non riavvii Firefox.

- -

In alternativa, puoi eseguire l'estensione da riga di comanto utilizzando lo strumento web-ext.

- -

Prova

- -

Ora prova a visitare una pagina di "mozilla.org", dovresti vedere un bordo rosso intorno alla pagina:

- -

{{EmbedYouTube("rxBQl2Z9IBQ")}}

- -
-

Non provarlo su addons.mozilla.org, però! Gli script di contenuto sono attualmente bloccatu su quel dominio.

-
- -

Prova a sperimentare un po. Modifica lo script per far cambiare il colore del bordo, o fai qualcosaltro al contenuto della pagina. Salva lo script e ricarica i file dell'estensione cliccando il pulsante "Ricarica" in about:debugging. Puoi vedere subito i cambiamenti:

- -

{{EmbedYouTube("NuajE60jfGY")}}

- - - -

Impacchettamento e pubblicazione

- -

Per far utilizzare la tua estensione ad altre persone, devi impacchettarla e inviarla a Mozilla per firmarla. Per saperne di più, guarda "Pubblicazione della tua estensione".

- -

E adesso?

- -

Ora hai un'idea del processo di sviluppo di una WebExtension per firefox, prosegui con:

- - diff --git a/files/it/mozilla/add-ons/webextensions/script_contenuto/index.html b/files/it/mozilla/add-ons/webextensions/script_contenuto/index.html deleted file mode 100644 index 4ee11316c5..0000000000 --- a/files/it/mozilla/add-ons/webextensions/script_contenuto/index.html +++ /dev/null @@ -1,494 +0,0 @@ ---- -title: Script di contenuto -slug: Mozilla/Add-ons/WebExtensions/Script_contenuto -tags: - - WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/Content_scripts ---- -
{{AddonSidebar}}
- -

Uno script di contenuto è una parte dell'estensione che viene eseguita nel contesto di una particolare pagina Web (al contrario degli script di sfondo che fanno parte dell'estensione o degli script che fanno parte del sito stesso, come quelli caricati utilizzando l'elemento {{HTMLElement("script")}}).

- -

Gli script in Background possono accedere a tutte le WebExtension JavaScript APIs, ma non possono accedere direttamente al contenuto delle pagine Web. Quindi, se la tua estensione ha bisogno di farlo, hai bisogno degli script di contenuto .

- -

Proprio come gli script caricati da normali pagine web, gli script di contenuto possono leggere e modificare il contenuto delle loro pagine usando le API DOM standard.

- -

Gli script di contenuto possono accedere solo a un piccolo sottoinsieme delle API di WebExtension, ma possono comunicare con script in background utilizzando un sistema di messaggistica e quindi accedere indirettamente alle API di WebExtension.

- -

Gli script di contenuto possono accedere solo a un piccolo sottoinsieme delle WebExtension APIs, ma possono comunicare con gli script in background utilizzando un sistema di messaggistica e quindi accedere indirettamente alle WebExtension APIs.

- -
-

Nota che gli script di contenuto sono bloccati nei seguenti domini:

- - - -

Se provi a iniettare uno script di contenuto in una pagina in uno di questi domini, l'operazione fallirà e la pagina registrerà un errore CSP.

- -

Poiché queste restrizioni includono addons.mozilla.org, gli utenti possono essere tentati di utilizzare l'estensione immediatamente dopo l'installazione, solo per scoprire che non funziona! È possibile aggiungere un avviso appropriato o una pagina di inserimento per spostare gli utenti da addons.mozilla.org.

-
- -
-

Valori aggiunti all'ambito globale di uno script di contenuto con var foo o window.foo = "bar" potrebbe scomparire a causa di un bug 1408996.

-
- -

Caricamento di script di contenuto

- -

Puoi caricare uno script di contenuto in una pagina web in tre modi:

- -

Al momento dell'installazione, nelle pagine che corrispondono ai pattern URL: utilizzando la chiave content_scripts in manifest.json, è possibile chiedere al browser di caricare uno script di contenuto ogni volta che il browser carica una pagina il cui URL corrisponde a un determinato pattern.

- -
    -
  1. Al momento dell'installazione, nelle pagine che corrispondono al pattern URL: utilizzando il tag content_scripts nel vostro file manifest.json, è possibile chiedere al browser di caricare uno script di contenuto ogni volta che il browser carica una pagina il cui URL corrisponde ad un determinato pattern
    2. -
  2. In fase di runtime, nelle pagine che corrispondono a un determinato pattern URL: utilizzando {{WebExtAPIRef("contentScripts")}} API, potete chiedere al browser di caricare uno script di contenuto ogni volta che il browser carica una pagina il cui URL corrisponde ad un determinato pattern. Questo è un metodo possibile (1), tranne che è possibile aggiungere e rimuovere script di contenuto in fase di esecuzione.
    3. -
  3. In fase di runtime, in specifiche schede: utilizzando le tabs.executeScript() API, è possibile caricare uno script di contenuto in una scheda specifica ogni volta che si desidera: ad esempio, in risposta all'utente che fa clic su una azione del browser.
    4. -
- -

Esiste un solo ambito globale per frame e per estensione. Ciò significa che le variabili di uno script di contenuto possono essere direttamente accessibili da un altro script di contenuto, indipendentemente dal modo in cui è stato caricato.

- -

Utilizzando i metodi (1) e (2), è possibile caricare gli script solo in pagine i cui URL possono essere rappresentati utilizzando un pattern di confronto.

- -

Usando il metodo (3), puoi anche caricare script in pagine contenute nella tua estensione, ma non puoi caricare script in pagine del browser privilegiate (come "about: debugging" o "about: addons").

- -

Ambiente degli script di contenuto

- -

accesso al DOM

- -

Gli script di contenuto possono accedere e modificare il DOM della pagina, proprio come possono fare i normali script di pagina. Possono anche vedere eventuali modifiche apportate al DOM tramite script di pagina.

- -

Tuttavia, gli script di contenuto ottengono una "visualizzazione originale del DOM". Questo significa:

- - - -

In Firefox, questo comportamento è chiamato Xray vision.

- -

Consideriamo una pagina web come questa:

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-  </head>
-
-  <body>
-    <script src="page-scripts/page-script.js"></script>
-  </body>
-</html>
- -

Lo script "page-script.js" esegue:

- -
// page-script.js
-
-// add a new element to the DOM
-var p = document.createElement("p");
-p.textContent = "This paragraph was added by a page script.";
-p.setAttribute("id", "page-script-para");
-document.body.appendChild(p);
-
-// define a new property on the window
-window.foo = "This global variable was added by a page script";
-
-// redefine the built-in window.confirm() function
-window.confirm = function() {
-  alert("The page script has also redefined 'confirm'");
-}
- -

Ora un'estensione inietta uno script di contenuto nella pagina:

- -
// content-script.js
-
-// can access and modify the DOM
-var pageScriptPara = document.getElementById("page-script-para");
-pageScriptPara.style.backgroundColor = "blue";
-
-// can't see page-script-added properties
-console.log(window.foo);  // undefined
-
-// sees the original form of redefined properties
-window.confirm("Are you sure?"); // calls the original window.confirm()
- -

Lo stesso vale al contrario: gli script di pagina non possono vedere le proprietà JavaScript aggiunte dagli script di contenuto.

- -

Ciò significa che gli script di contenuto possono contare su proprietà DOM che si comportano in modo prevedibile, senza preoccuparsi delle sue variabili che si scontrano con le variabili dello script di pagina.

- -

Una conseguenza pratica di questo comportamento è che uno script di contenuto non avrà accesso a nessuna libreria JavaScript caricata dalla pagina. Ad esempio, se la pagina include jQuery, lo script di contenuto non sarà in grado di vederlo.

- -

Se uno script di contenuto desidera utilizzare una libreria JavaScript, la stessa libreria deve essere iniettata come script di contenuto insieme allo script di contenuto che vuole utilizzarlo:

- -
"content_scripts": [
-  {
-    "matches": ["*://*.mozilla.org/*"],
-    "js": ["jquery.js", "content-script.js"]
-  }
-]
- -
-

Nota: Firefox fornisce alcune API che consentono agli script di contenuto di accedere agli oggetti JavaScript creati dagli script di pagina e di esporre i propri oggetti JavaScript agli script di pagina.

- -

Vedere Condivisione di oggetti con script di pagina per maggiori dettagli.

-
- -

WebExtension APIs

- -

Oltre alle API DOM standard, gli script di contenuto possono utilizzare le seguenti API WebExtension:

- -

Da extension:

- - - -

Da runtime:

- - - -

Da i18n:

- - - -

Da menus:

- - - -

Tutto da storage.

- -

XHR e Fetch

- -

Gli script di contenuto posso fare delle normali richieste usando window.XMLHttpRequest e window.fetch() APIs.

- -

Gli script di contenuto ottengono gli stessi privilegi per i cross-domain del resto dell'estensione: quindi se l'estensione ha richiesto l'accesso tra cross-domain per un dominio utilizzando il tag permissions nel file manifest.json, i suoi script di contenuto ottengono l'accesso anche a quel dominio.

- -

Ciò si ottiene esponendo le istanze XHR e di recupero più privilegiate nello script di contenuto, che ha l'effetto collaterale di non impostare le intestazioni di Origin e Referer come una richiesta dalla pagina stessa, spesso è preferibile evitare che la richiesta sveli la sua natura trasversale. Dalla versione 58 in poi le estensioni che devono eseguire richieste che si comportano come se fossero inviate dal contenuto stesso possono utilizzare content.XMLHttpRequest e content.fetch() instead. Per le estensioni cross-browser, la loro presenza deve essere rilevata dalla funzione.

- -

Communicazione con gli script di background

- -

Sebbene gli script di contenuto non possano utilizzare direttamente la maggior parte delle API di WebExtension, possono comunicare con gli script in background dell'estensione utilizzando le API di messaggistica e pertanto possono accedere indirettamente a tutte le API a cui possono accedere gli script in background.

- -

Esistono due schemi di base per la comunicazione tra gli script in background e gli script di contenuto: è possibile inviare messaggi una tantum, con una risposta opzionale, oppure è possibile impostare una connessione più longeva tra i due lati e utilizzare tale connessione per scambiare messaggi .

- -

Messaggi one-off

- -

Per inviare messaggi one-off, con una risposta opzionale, puoi utilizzare le seguenti API:

- - - - - - - - - - - - - - - - - - - - - -
 In content scriptIn background script
Invia un messaggibrowser.runtime.sendMessage()browser.tabs.sendMessage()
Ricevi un messaggiobrowser.runtime.onMessagebrowser.runtime.onMessage
- -

Ad esempio, ecco uno script di contenuto che si pone in ascolto degli eventi click in una pagina web.
-
- Se il clic era su un collegamento, invia la pagina di sfondo con l'URL di destinazione:

- -
// content-script.js
-
-window.addEventListener("click", notifyExtension);
-
-function notifyExtension(e) {
-  if (e.target.tagName != "A") {
-    return;
-  }
-  browser.runtime.sendMessage({"url": e.target.href});
-}
- -

Lo script in background ascolta questi messaggi e visualizza una notifica utilizzando le notifications API:

- -
// background-script.js
-
-browser.runtime.onMessage.addListener(notify);
-
-function notify(message) {
-  browser.notifications.create({
-    "type": "basic",
-    "iconUrl": browser.extension.getURL("link.png"),
-    "title": "You clicked a link!",
-    "message": message.url
-  });
-}
-
- -

(Questo codice di esempio è una riduzione dell'esempio notify-link-clicks-i18n che è possibile trovare su GitHub.)

- -

Messaggi connection-based

- -

L'invio di messaggi one-off può risultare complicato se si scambiano molti messaggi tra uno script in background e uno script di contenuto. Quindi uno schema alternativo è stabilire una connessione più longeva tra i due contesti e usare questa connessione per scambiare messaggi.

- -

Ogni lato ha un oggetto runtime.Port, che può utilizzare per scambiare messaggi.

- -

Per creare la connessione:

- - - -

Questo metodo ritorna un oggetto di tipo runtime.Port.

- - - -

Dopo che tutti e due i lati hanno una porta di comunicazione possono:

- - - -

Ad esempio, appena viene caricato, questo script di contenuto:

- - - -
// content-script.js
-
-var myPort = browser.runtime.connect({name:"port-from-cs"});
-myPort.postMessage({greeting: "hello from content script"});
-
-myPort.onMessage.addListener(function(m) {
-  console.log("In content script, received message from background script: ");
-  console.log(m.greeting);
-});
-
-document.body.addEventListener("click", function() {
-  myPort.postMessage({greeting: "they clicked the page!"});
-});
- -

Lo script di sfondo corrispondente:

- - - -
// background-script.js
-
-var portFromCS;
-
-function connected(p) {
-  portFromCS = p;
-  portFromCS.postMessage({greeting: "hi there content script!"});
-  portFromCS.onMessage.addListener(function(m) {
-    console.log("In background script, received message from content script");
-    console.log(m.greeting);
-  });
-}
-
-browser.runtime.onConnect.addListener(connected);
-
-browser.browserAction.onClicked.addListener(function() {
-  portFromCS.postMessage({greeting: "they clicked the button!"});
-});
-
- -

Multipli script di contenuto

- -

Se si dispone di più script di contenuto che comunicano contemporaneamente, è possibile memorizzare ciascuna connessione in un array.

- - - -
// background-script.js
-
-var ports = []
-
-function connected(p) {
-  ports[p.sender.tab.id]    = p
-  //...
-}
-
-browser.runtime.onConnect.addListener(connected)
-
-browser.browserAction.onClicked.addListener(function() {
-  ports.forEach(p => {
-        p.postMessage({greeting: "they clicked the button!"})
-    })
-});
-
- - - -

Communicazione con la pagina web

- -

Sebbene per impostazione predefinita gli script di contenuto non abbiano accesso agli oggetti creati dagli script di pagina, possono comunicare con gli script di pagina utilizzando la API DOM window.postMessage e window.addEventListener.

- -

Per esempio:

- -
// page-script.js
-
-var messenger = document.getElementById("from-page-script");
-
-messenger.addEventListener("click", messageContentScript);
-
-function messageContentScript() {
-  window.postMessage({
-    direction: "from-page-script",
-    message: "Message from the page"
-  }, "*");
- -
// content-script.js
-
-window.addEventListener("message", function(event) {
-  if (event.source == window &&
-      event.data &&
-      event.data.direction == "from-page-script") {
-    alert("Content script received message: \"" + event.data.message + "\"");
-  }
-});
- -

Per un esempio completo e funzionante, visitate la pagina demo su GitHub e seguite le istruzioni.

- -
-

Nota che ogni volta che si interagisce con contenuti web non fidati in questo modo, è necessario fare molta attenzione. Le estensioni sono codici privilegiati che possono avere potenti funzionalità e pagine Web ostili possono facilmente ingannarli per accedere a tali funzionalità.
-
- Per fare un esempio banale, supponiamo che il codice dello script del contenuto che riceve il messaggio faccia qualcosa del genere: 

- -
window.addEventListener("message", function(event) {
-  if (event.source == window &&
-      event.data.direction &&
-      event.data.direction == "from-page-script") {
-    eval(event.data.message);
-  }
-});
- -

Ora lo script di pagina può eseguire qualsiasi codice con tutti i privilegi dello script di contenuto.

-
- -

Usare eval() in uno script di contenuto

- -

In Chrome, eval() esegue sempre il codice nel contesto dello script del contenuto, non nel contesto della pagina.

- -

In Firefox:

- - - -

Per esempio, considerate uno script di contenuto simile a questo:

- -
// content-script.js
-
-window.eval('window.x = 1;');
-eval('window.y = 2');
-
-console.log(`In content script, window.x: ${window.x}`);
-console.log(`In content script, window.y: ${window.y}`);
-
-window.postMessage({
-  message: "check"
-}, "*");
- -

Questo codice crea semplicemente le variabili x e y usando window.eval() and eval(), quindi invia i loro valori al log della console, ed infine invia un messaggio alla pagina.

- -

Alla ricezione del messaggio, lo script della pagina invia le variabili al log della console:

- -

 

- -
window.addEventListener("message", function(event) {
-  if (event.source === window && event.data && event.data.message === "check") {
-    console.log(`In page script, window.x: ${window.x}`);
-    console.log(`In page script, window.y: ${window.y}`);
-  }
-});
- -

In Chrome, si ottine questo risultato:

- -
In content script, window.x: 1
-In content script, window.y: 2
-In page script, window.x: undefined
-In page script, window.y: undefined
- -

In Firefox, invece, il risultato sarà il seguente:

- -
In content script, window.x: undefined
-In content script, window.y: 2
-In page script, window.x: 1
-In page script, window.y: undefined
- -

Lo stesso vale per setTimeout(), setInterval(), e Function().

- -
-

Quando si esegue il codice nel contesto della pagina, è necessario prestare molta attenzione. L'ambiente della pagina è controllato da pagine Web potenzialmente dannose, che possono ridefinire gli oggetti con cui interagire per comportarsi in modi imprevisti:

- -
// page.js redefines console.log
-
-var original = console.log;
-
-console.log = function() {
-  original(true);
-}
-
- - -
// content-script.js calls the redefined version
-
-window.eval('console.log(false)');
-
-
diff --git a/files/it/mozilla/add-ons/webextensions/what_are_webextensions/index.html b/files/it/mozilla/add-ons/webextensions/what_are_webextensions/index.html new file mode 100644 index 0000000000..c74fbd8473 --- /dev/null +++ b/files/it/mozilla/add-ons/webextensions/what_are_webextensions/index.html @@ -0,0 +1,59 @@ +--- +title: Cosa sono le estensioni? +slug: Mozilla/Add-ons/WebExtensions/Cosa_sono_le_WebExtensions +tags: + - Estensioni + - WebExtension +translation_of: Mozilla/Add-ons/WebExtensions/What_are_WebExtensions +--- +
{{AddonSidebar}}
+ +

Un'estensione modifica le funzionalità di un browser. Viene creata utilizzando gli standard della tecnologia web - HTML, CSS, e JavaScript. Può trarre vantaggio dalle stesse web API come JavaScript può in una pagina web, ma un'estensione ha anche accesso ad un proprio set di API JavaScript. Questo significa che puoi fare molto di più in un'estensione di quanto tu ne possa fare con il codice in una pagina. Questi sono soltanto alcuni esempi delle cose che puoi fare:

+ +

Migliorare o completare un sito web: Usa un'estensione per inviare nel browser caratteristiche o informazioni aggiuntive dal tuo sito web. Permettere agli utenti di raccogliere informazioni dalle pagine che visitano per migliorare il servizio che offri.

+ +

+ +

Esempi: Amazon Assistant, OneNote Web Clipper e Grammarly for Firefox

+ +

Permettere agli utenti di mostrare la loro personalità: Le estensioni del browser possono manipolare il contenuto delle pagine che l'utente visita. Aiuta gli utenti ad aggiungere un logo o un'immagine preferita come sfondo di tutte le pagine che visitano. Le estensioni ti danno anche la possibilità di aggiornare l'aspetto di Firefox. (Puoi aggiornare l'aspetto di Firefox anche con i temi).

+ +

+ +

Esempi: MyWeb New Tab, Tabliss e VivaldiFox

+ +

Aggiungere o rimuovere contenuti dalle pagine web: Potresti voler aiutare le persone a bloccare le pubblicità intrusive dalle pagine web, fornire l'accesso ad una guida di viaggio ogni volta che un paese o una città vengono menzionati in una pagina web, o ristrutturare il contenuto di una pagina per offrire un'esperienza di lettura coerente. Con la possibilità di poter accedere e aggiornare sia l'HTML che il CSS di una pagina, puoi aiutare gli utenti a fargli vedere il web nel modo in cui lo desiderano.

+ +

+ +

Esempi: uBlock Origin, Reader e Toolbox for Google Play Store™

+ +

Aggiungere strumenti e nuove funzionalità di navigazione: Aggiungi nuove funzionalità ad una taskboard, o generare immagini di codici QR da URL, da collegamenti ipertestuali, o dal testo di una pagina. Con le opzioni flessibili dell'UI e dal potenziale delle WebExtension API, puoi aggiungere facilmente nuove funzionalità ad un browser. Inoltre, puoi aumentare le caratteristiche e le funzionalità di qualsiasi sito web, anche se non è il tuo.

+ +

+ +

Esempi: QR Code Image Generator, Swimlanes for Trello e Tomato Clock

+ +

Giochi: Offri giochi per computer tradizionali, con la possibilità di giocare offline, ma anche esplorare nuove possibilità di gioco, ad esempio, incorporando il gameplay nella navigazione di tutti i giorni.

+ +

 

+ +

Esempi: Asteroids in Popup, Solitaire Card Game New Tab e 2048 Prime

+ +

Aggiungere strumenti di sviluppo: Puoi fornire strumenti di sviluppo web per il tuo lavoro, o hai sviluppato una tecnica utile o un approccio allo sviluppo web che vuoi condividere. In entrambi i casi, puoi migliorare gli strumenti di sviluppo integrati in Firefox aggiungendo una nuova scheda alla barra di strumenti per sviluppatori.

+ +

+ +

Esempi: Web Developer, Web React Developer Tools e aXe Developer Tools

+ +

Le estensioni per Firefox vengono create utilizzando le WebExtension API, un sistema cross-browser per lo sviluppo delle estensioni. In gran parte, l'API è compatibile con l'API delle estensioni supportato da Google Chrome e Opera. Le estensioni scritte per questi browser in molti casi funzioneranno in Firefox o Microsoft Edge soltanto con poche modifiche. L'API è anche completamente compatibile con multiprocess Firefox.

+ +

Se hai idee, domande, o hai bisogno di aiuto per migrare un add-on ad una WebExtension, puoi raggiungerci nelladev-addons mailing list o in #extdev su IRC.

+ +

E adesso?

+ + diff --git a/files/it/mozilla/add-ons/webextensions/your_first_webextension/index.html b/files/it/mozilla/add-ons/webextensions/your_first_webextension/index.html new file mode 100644 index 0000000000..fac1b12e36 --- /dev/null +++ b/files/it/mozilla/add-ons/webextensions/your_first_webextension/index.html @@ -0,0 +1,153 @@ +--- +title: La tua prima estensione +slug: Mozilla/Add-ons/WebExtensions/La_tua_prima_WebExtension +tags: + - Guida + - WebExtension +translation_of: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension +--- +
{{AddonSidebar}}
+ +

In questo articolo creeremo passo dopo passo un'estensione per Firefox, dall'inizio alla fine. L'estensione aggiungerà un bordo rosso a tutte le pagine caricate da "mozilla.org" o da un suo sottodominio.

+ +

Il codice sorgente di questo esempio è su GitHub: https://github.com/mdn/webextensions-examples/tree/master/borderify.

+ +

Per prima cosa hai bisogno di Firefox versione 45 o superiore.

+ +

Scrittura dell'estensione

+ +

Crea una cartella e posizionati al suo interno:

+ +
mkdir borderify
+cd borderify
+ +

manifest.json

+ +

Ora, crea un nuovo file chiamato "manifest.json" all'interno della cartella "borderify". Scrivi nel file il seguente contenuto:

+ +
{
+
+  "manifest_version": 2,
+  "name": "Borderify",
+  "version": "1.0",
+
+  "description": "Aggiunge un bordo rosso a tutte le pagine caricate da mozilla.org.",
+
+  "icons": {
+    "48": "icons/border-48.png"
+  },
+
+  "content_scripts": [
+    {
+      "matches": ["*://*.mozilla.org/*"],
+      "js": ["borderify.js"]
+    }
+  ]
+
+}
+ + + +

La chiave più interessante è content_scripts, dice a Firefox di caricare uno script nelle pagine Web i cui URL corrispondono ad uno schema specifico. In questo caso, chiediamo a Firefox di caricare uno script chiamato "borderify.js" in tutto le pagine HTTP o HTTPS fornite da "mozilla.org" o dai suoi sottodomini.

+ + + +
+

In alcune situazioni è necessario specificare un ID per la propria estensione. Se devi specificare l'ID dell'estensione, includi la chiave  applications nel file manifest.json e imposta la sua proprietà gecko.id:

+ +
"applications": {
+  "gecko": {
+    "id": "borderify@example.com"
+  }
+}
+
+ +

icons/border-48.png

+ +

L'estensione dovrebbe avere un'icona. Essa verrà mostrata accanto alla lista delle estensioni in Gestione componenti aggiuntivi. Il file manifest.json ha dichiarato di avere un'icona a "icons/border-48.png".

+ +

Crea la cartella "icons" all'interno della cartella "borderify". Salva un'icona al suo interno chiamata "border-48.png".  Puoi usare la stessa del nostro esempio, presa dal set di icone di Google Material Design, e usata secondo i termini della licenza Creative Commons Attribution-ShareAlike.

+ +

Se scegli di usare la tua icona, dovrebbe essere di 48x48 pixel. Potresti anche fornire un'icona di 96x96 pixel, per i display ad alta risoluzione. Se la aggiungi, dovrà essere specificata con la proprietà 96 dell'oggetto icons nel file manifest.json:

+ +
"icons": {
+  "48": "icons/border-48.png",
+  "96": "icons/border-96.png"
+}
+ +

In alternativa, potresti fornite un file SVG che verrà ridimensionato correttamente. (Comunque: se utilizzi SVG e la tua icona comprende del testo, puoi utilizzare lo strumento "converti in percorso" dell'editor SVG per appiattire il testo, in modo da poter essere ridimensionato con una dimensione/posizione coerente.)

+ + + +

borderify.js

+ +

Infine, crea un file chiamato "borderify.js" all'interno della cartella "borderify" e scrivici questo contenuto:

+ +
document.body.style.border = "5px solid red";
+ +

Questo script verrà caricato in tutte le pagine che corrispondono allo schema specificato nella chiave content_scripts nel file manifest.json. Lo script ha accesso diretto al documento, proprio come gli script caricati normalmente dalla pagina.

+ + + +

Provala

+ +

Innanzitutto, controlla di avere i file giusti nei posti giusti:

+ +
borderify/
+    icons/
+        border-48.png
+    borderify.js
+    manifest.json
+ +

Installazione

+ +

Apri "about:debugging" in Firefox, clicca "Carica comp. aggiuntivo temporaneo" e seleziona un qualsiasi file nella cartella dell'estensione:

+ +

{{EmbedYouTube("cer9EUKegG4")}}

+ +

L'estensione verrà ora installata e rimarrà finché non riavvii Firefox.

+ +

In alternativa, puoi eseguire l'estensione da riga di comanto utilizzando lo strumento web-ext.

+ +

Prova

+ +

Ora prova a visitare una pagina di "mozilla.org", dovresti vedere un bordo rosso intorno alla pagina:

+ +

{{EmbedYouTube("rxBQl2Z9IBQ")}}

+ +
+

Non provarlo su addons.mozilla.org, però! Gli script di contenuto sono attualmente bloccatu su quel dominio.

+
+ +

Prova a sperimentare un po. Modifica lo script per far cambiare il colore del bordo, o fai qualcosaltro al contenuto della pagina. Salva lo script e ricarica i file dell'estensione cliccando il pulsante "Ricarica" in about:debugging. Puoi vedere subito i cambiamenti:

+ +

{{EmbedYouTube("NuajE60jfGY")}}

+ + + +

Impacchettamento e pubblicazione

+ +

Per far utilizzare la tua estensione ad altre persone, devi impacchettarla e inviarla a Mozilla per firmarla. Per saperne di più, guarda "Pubblicazione della tua estensione".

+ +

E adesso?

+ +

Ora hai un'idea del processo di sviluppo di una WebExtension per firefox, prosegui con:

+ + diff --git a/files/it/mozilla/firefox/experimental_features/index.html b/files/it/mozilla/firefox/experimental_features/index.html new file mode 100644 index 0000000000..2cc528ad36 --- /dev/null +++ b/files/it/mozilla/firefox/experimental_features/index.html @@ -0,0 +1,1506 @@ +--- +title: Funzionalità sperimentali in Firefox +slug: Mozilla/Firefox/Funzionalità_sperimentali +translation_of: Mozilla/Firefox/Experimental_features +--- +
{{FirefoxSidebar}}
+ +

In order to test new features, Mozilla publishes a test version of the Firefox browser, Firefox Nightly, every day. These nightly builds of Firefox typically include experimental or partially-implemented features, including those for proposed or cutting-edge Web platform standards.

+ +

This page lists features that are in Nightly versions of Firefox along with information on how to activate them, if necessary. You can test your Web sites and applications before these features get released and ensure everything will still work with the latest Web technology capabilities.

+ +

To test these experimental features, you need to download Firefox Nightly or Firefox Developer Edition. Which you need is described alongside each feature's description below.

+ +
+

Editor's note: When adding features to these tables, please try to include a link to the relevant bug or bugs using the {{TemplateLink("bug")}} macro: \{{bug(bug-number)}}.

+
+ +

HTML

+ +

Element: <dialog>

+ +

The HTML {{HTMLElement("dialog")}} element and its associated DOM APIs provide support for HTML-based modal dialog boxes. The current implementation is a little inelegant but is basically functional. See {{bug(840640)}} for more details.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly53No
Developer Edition53No
Beta53No
Release53No
Preference namedom.dialog_element.enabled
+ +

Global attribute: inputmode

+ +

Our implementation of the inputmode global attribute has been updated as per the WHATWG spec ({{bug(1509527)}}), but we still need to make other changes too, like making it available on contenteditable content. See also {{bug(1205133)}} for details.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly75Yes
Developer Edition75No
Beta75No
Release75No
Preference namedom.forms.inputmode
+ + + +

The {{HTMLElement("link")}} element's {{htmlattrxref("rel", "link")}} attribute is intended to help provide performance gains by letting you download resources earlier in the page lifecycle, ensuring that they're available earlier and are less likely to block page rendering. Read Preloading content with rel="preload" for more details. For more details on the status of this feature, see {{bug(1639607)}}.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly78Yes
Developer Edition78Yes
Beta78Yes
Release78No
Preference namenetwork.preload
+ +

CSS

+ +

Display stray control characters in CSS as hex boxes

+ +

This feature renders control characters (Unicode category Cc) other than tab (U+0009), line feed (U+000A), form feed (U+000C), and carriage return (U+000D) as a hexbox when they are not expected.
+
+ See {{bug(1099557)}} for more details.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly43Yes
Developer Edition43No
Beta43No
Release43No
Preference namelayout.css.control-characters.enabled or layout.css.control-characters.visible
+ +

Property: initial-letter

+ +

The {{cssxref("initial-letter")}} CSS property is part of the {{SpecName("CSS3 Inline")}} specification and allows you to specify how dropped, raised, and sunken initial letters are displayed.
+
+ See {{bug(1223880)}} for more details.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly50No
Developer Edition50No
Beta50No
Release50No
Preference namelayout.css.initial-letter.enabled
+ +

Conic gradients

+ +

Conic gradients expand CSS gradients to allow the color transitions to be rendered circling around a center point rather than radiating from it. See {{bug(1175958)}} for more details.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly75No
Developer Edition75No
Beta75No
Release75No
Preference namelayout.css.conic-gradient.enabled and gfx.webrender.all
+ +

Pseudo-class: :focus-visible

+ +

Allows focus styles to be applied to elements like buttons and form controls, only when they are focused using the keyboard (e.g. when tabbing between elements), and not when they are focused using a mouse or other pointing device. See bug 1617600 for more details.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly75No
Developer Edition75No
Beta75No
Release75No
Preference namelayout.css.focus-visible.enabled
+ +

Single numbers as aspect ratio in media queries

+ +

Support for using a single {{cssxref("number")}} as a {{cssxref("ratio")}} when specifying the aspect ratio for a media query. See {{bug(1565562)}} for more details.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly70No
Developer Edition70No
Beta70No
Release70No
Preference namelayout.css.aspect-ratio-number.enabled
+ +

Property: backdrop-filter

+ +

The {{cssxref("backdrop-filter")}} property applies filter effects to the area behind an element. See {{bug(1178765)}} for more details.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly70No
Developer Edition70No
Beta70No
Release70No
Preference namelayout.css.backdrop-filter.enabled
+ +

Grid: Masonry layout

+ +

Adds support for a masonry style layout based on grid layout where one axis has a masonry layout while having normal grid layout on the other. This allows to create gallery style layouts like on Pinterest. See {{bug(1607954)}} for more details.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly77No
Developer Edition77No
Beta77No
Release77No
Preference namelayout.css.grid-template-masonry-value.enabled
+ +

APIs

+ +

Graphics: Canvas, WebGL, and WebGPU

+ +

Interface: OffscreenCanvas

+ +

The {{domxref("OffscreenCanvas")}} interface provides a canvas that can be rendered offscreen. It is available in both the window and worker contexts. See {{bug(1390089)}} for more details.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly44No
Developer Edition44No
Beta44No
Release44No
Preference namegfx.offscreencanvas.enabled
+ +

Hit regions

+ +

Whether the mouse coordinates are within a particular area on the canvas is a common problem to solve. The hit region API allows you define an area of your canvas and provides another possibility to expose interactive content on a canvas to accessibility tools.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly30No
Developer Edition30No
Beta30No
Release30No
Preference namecanvas.hitregions.enabled
+ +

WebGL: Draft extensions

+ +

When this preference is enabled, any WebGL extensions currently in "draft" status which are being tested are enabled for use. Currently, there are no WebGL extensions being tested by Firefox.

+ +

WebGPU API

+ +

This new API provides low-level support for performing computation and graphics rendering using the {{interwiki("wikipedia", "Graphics Processing Unit")}} (GPU) of the user's device or computer. The specification is still a work-in-progress. See {{bug(1602129)}} for our progress on this API.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly73No
Developer Edition73No
Beta73No
Release73No
Preference namedom.webgpu.enabled
+ +

HTML DOM API

+ +

Global event: beforeinput

+ +

The global {{domxref("HTMLElement.beforeinput_event", "beforeinput")}} event is sent to an {{HTMLElement("input")}} element—or any element whose {{htmlattrxref("contenteditable")}} attribute is enabled—immediately before the element's value changes.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly74No
Developer Edition74No
Beta74No
Release74No
Preference namedom.input_events.beforeinput.enabled
+ +

HTMLMediaElement method: setInkId()

+ +

{{domxref("HTMLMediaElement.setSinkId()")}} allows you to set the sink ID of an audio output device on an {{domxref("HTMLMediaElement")}}, thereby changing where the audio is being output. See {{bug(934425)}} for more details.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly64No
Developer Edition64No
Beta64No
Release64No
Preference namemedia.setsinkid.enabled
+ +

HTMLMediaElement properties: audioTracks and videoTracks

+ +

Enabling this feature adds the {{domxref("HTMLMediaElement.audioTracks")}} and {{domxref("HTMLMediaElement.videoTracks")}} properties to all HTML media elements. However, because Firefox doesn't currently suport multiple audio and video tracks, the most common use cases for these properties don't work, so they're both disabled by default. See {{bug(1057233)}} for more details.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly33No
Developer Edition33No
Beta33No
Release33No
Preference namemedia.track.enabled
+ +

DOM

+ +

Document property: autoplayPolicy

+ +

The {{domxref("document")}} property {{domxref("Document.autoplayPolicy", "autoplayPolicy")}} returns a string indicating how the browser handles requests to automatically play media (either using the {{domxref("HTMLMediaElement.autoplay", "autoplay")}} property on a media element or by attempting to trigger playback from JavaScript code. The spec for this API is still being written. The value changes over time depending on what the user is doing, their preferences, and the state of the browser in general. Potential values include allowed (autoplay is currently permitted), allowed-muted (autoplay is allowed but only with no—or muted—audio), and disallowed (autoplay is not allowed at this time). See {{bug(1506289)}} for more details.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly66No
Developer Edition66No
Beta66No
Release66No
Preference namedom.media.autoplay.autoplay-policy-api
+ +

GeometryUtils methods: convertPointFromNode(), convertRectFromNode(), and convertQuadFromNode()

+ +

The {{domxref("GeometryUtils")}} methods {{domxref("GeometryUtils.convertPointFromNode", "convertPointFromNode()")}}, {{domxref("GeometryUtils.convertRectFromNode", "convertRectFromNode()")}}, and {{domxref("GeometryUtils.convertQuadFromNode", "convertQuadFromNode()")}} map the given point, rectangle, or quadruple from the {{domxref("Node")}} on which they're called to another node. See {{bug(918189)}} for more details.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly31Yes
Developer Edition31No
Beta31No
Release31No
Preference namelayout.css.getBoxQuads.enabled
+ +

GeometryUtils method: getBoxQuads()

+ +

The {{domxref("GeometryUtils")}} method {{domxref("GeometryUtils.getBoxQuads", "getBoxQuads()")}} returns the CSS boxes for a {{domxref("Node")}} relative to any other node or viewport. See {{bug(917755)}} for more details.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly31Yes
Developer Edition31No
Beta31No
Release31No
Preference namelayout.css.convertFromNode.enable
+ +

Payment Request API

+ +

Primary payment handling

+ +

The Payment Request API provides support for handling web-based payments within web content or apps. Due to a bug that came up during testing of the user interface, we have decided to postpone shipping this API while discussions over potential changes to the API are held. Work is ongoing. See {{bug(1318984)}} for more details on the state of this API.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly55No
Developer Edition55No
Beta55No
Release55No
Preference namedom.payments.request.enabled and
+ dom.payments.request.supportedRegions
+ +

Basic Card API

+ +

Extends the Payment Request API with dictionaries that define data structures describing card payment types and payment responses. See {{domxref("BasicCardRequest")}} and {{domxref("BasicCardResponse")}}.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly56No
Developer Edition56No
Beta56No
Release56No
Preference namedom.payments.request.enabled and
+ dom.payments.request.supportedRegions
+ +

Visual Viewport API

+ +

The Visual Viewport API provides access to information describing the position of the {{Glossary("visual viewport")}} relative to the document as well as to the window's content area. It also supports events to monitor changes to this information. See {{bug(1550390)}} for more details. There currently is no real plan to ship this on desktop, but you can track the state of that just in case it changes in {{bug(1551302)}}.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly63No
Developer Edition63No
Beta63No
Release63Starting in Firefox 68, on Android only
Preference namedom.visualviewport.enabled
+ +

Constructable stylesheets

+ +

The addition of a constructor to the {{domxref("CSSStyleSheet")}} interface as well as a variety of related changes makes it possible to directly create new stylesheets without having to add the sheet to the HTML. This makes it much easier to create reusable stylesheets for use with Shadow DOM. Our implementation is not yet complete; see {{bug(1520690)}} for more details.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly73No
Developer Edition73No
Beta73No
Release73No
Preference namelayout.css.constructable-stylesheets.enabled
+ +

WebRTC and media

+ +

The following experimental features include those found in the WebRTC API, the Web Audio API, the Media Session API, the Media Source Extensions API, the Encrypted Media Extensions API, and the Media Capture and Streams API.

+ +

Media Session API

+ +

The entire Firefox implementation of the Media Session API is currently experimental. This API is used to customize the handling of media-related notifications, to manage events and data useful for presenting a user interface for managing media playback, and to obtain media file metadata. See {{bug(1112032)}} for more details.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly71Yes
Developer Edition71No
Beta71No
Release71No
Preference namedom.media.mediasession.enabled
+ +

Asynchronous SourceBuffer add and remove

+ +

This adds the promise-based methods {{domxref("SourceBuffer.appendBufferAsync", "appendBufferAsync()")}} and {{domxref("SourceBuffer.removeAsync", "removeAsync()")}} for adding and removing media source buffers to the {{domxref("SourceBuffer")}} interface. See {{bug(1280613)}} and {{bug(778617)}} for more information.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly62No
Developer Edition62No
Beta62No
Release62No
Preference namemedia.mediasource.experimental.enabled
+ +

AVIF (AV1 Image File format) support

+ +

With this feature enabled, Firefox supports the AV1 Image File (AVIF) format. This is a still image file format that leverages the capabilities of the AV1 video compression algorithms to reduce image size. See {{bug(1443863)}} for more details.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly77No
Developer Edition77No
Beta77No
Release77No
Preference nameimage.avif.enabled
+ +

Security and privacy

+ +

Block plain text requests from Flash on encrypted pages

+ +

In order to help mitigate man-in-the-middle (MitM) attacks caused by Flash content on encrypted pages, a preference has been added to treat OBJECT_SUBREQUESTs as active content. See {{bug(1190623)}} for more details.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly59No
Developer Edition59No
Beta59No
Release59No
Preference namesecurity.mixed_content.block_object_subrequest
+ +

Insecure page labeling

+ +

These two preferences add a "Not secure" text label in the address bar next to the traditional lock icon when a page is loaded insecurely (that is, using {{Glossary("HTTP")}} rather than {{Glossary("HTTPS")}}). See {{bug(1335970)}} for more details.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly60No
Developer Edition60No
Beta60No
Release60No
Preference namesecurity.insecure_connection_text.enabled for normal browsing mode; security.insecure_connection_text.pbmode.enabled for private browsing mode
+ +

Upgrading mixed display content

+ +

When enabled, this preference causes Firefox to automatically upgrade requests for media content from HTTP to HTTPS on secure pages. The intent is to prevent mixed-content conditions in which some content is loaded securely while other content is insecure. If the upgrade fails (because the media's host doesn't support HTTPS), the media is not loaded. See {{bug(1435733)}} for more details.

+ +

This also changes the console warning; if the upgrade succeeds, the message indicates that the request was upgraded, instead of showing a warning.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly60No
Developer Edition60No
Beta60No
Release60No
Preference namesecurity.mixed_content.upgrade_display_content
+ + + +

Following Safari's lead, this experiment causes setting the {{htmlattrxref("target", "a")}} attribute on an {{HTMLElement("a")}} element to _blank (that is, using target="_blank") to imply that the default value of {{htmlattrxref("rel", "a")}} is noopener rather than opener, which is the usual default. To bypass this security measure, web developers should explicitly request an opener relationship using rel="opener" on their <a> elements that use target="_blank" to open the link into a new window or tab. See {{bug(1503681)}} for more details.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly65Yes
Developer Edition65Yes
Beta65Yes
Release65No
Preference namedom.targetBlankNoOpener.enabled
+ +

FTP support disabled

+ +

For security reasons, Mozilla intends to remove support for {{Glossary("FTP")}} from Firefox in 2010, effective in Firefox 82. See {{bug(1622409)}} for implementation progress. The network.ftp.enabled preference must be enabled (set to true) to allow FTP to be used.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly77Yes
Developer Edition77No
Beta77No
Release77No
Preference namenetwork.ftp.enabled
+ +

Developer tools

+ +

Mozilla's developer tools are constantly evolving. We experiment with new ideas, add new features, and test them on the Nightly and Developer Edition channels before letting them go through to beta and release. The features below are the current crop of experimental developer tool features.

+ +

Color scheme simulation

+ +

Adds an option to simulate different color schemes allowing to test {{cssxref("@media/prefers-color-scheme", "@prefers-color-scheme")}} media queries. Using this media query lets your style sheet specify whether it prefers a light or dark user interface. This feature lets you test your code without having to change settings in your browser (or operating system, if the browser follows a system-wide color scheme setting).

+ +

See {{bug(1550804)}} and {{bug(1137699)}} for more details.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly72No
Developer Edition72No
Beta72No
Release72No
Preference namedevtools.inspector.color-scheme-simulation.enabled
+ +

Execution context selector

+ +

This feature displays a button on the console's command line that lets you change the context in which the expression you enter will be executed. See {{bug(1605154)}} and {{bug(1605153)}} for more details.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly75No
Developer Edition75No
Beta75No
Release75No
Preference namedevtools.webconsole.input.context
+ +

Mobile gesture support in Responsive Design Mode

+ +

Mouse gestures are used to simulate mobile gestures like swiping/scrolling, double-tap and pinch-zooming and long-press to select/open the context menu. See {{bug(1621781)}}, {{bug(1245183)}}, and {{bug(1401304)}} for more details.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly76[1]Yes
Developer Edition76[1]Yes
Beta76[1]Yes
Release76[1]No
Preference namen/a
+ +

[1] Support for zooming using the double-tap gesture was added in Firefox 76. The other gestures were added for Firefox 79.

+ +

Compatibility panel

+ +

A side panel for the Page Inspector that shows you information detailing your app's cross-browser compatibility status. See {{bug(1584464)}} for more details.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly71Yes
Developer Edition71Yes
Beta71No
Release71No
Preference namedevtools.inspector.compatibility.enabled
+ +

UI

+ +

Desktop zooming

+ +

This feature lets you enable smooth pinch zooming on desktop computers without requiring layout reflows, just like mobile devices do. See {{bug(1245183)}} for further details.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Release channelVersion addedEnabled by default?
Nightly42No
Developer Edition42No
Beta42No
Release42No
Preference nameapz.allow_zooming and (on Windows) apz.windows.use_direct_manipulation
+ +

See also

+ + diff --git "a/files/it/mozilla/firefox/funzionalit\303\240_sperimentali/index.html" "b/files/it/mozilla/firefox/funzionalit\303\240_sperimentali/index.html" deleted file mode 100644 index 2cc528ad36..0000000000 --- "a/files/it/mozilla/firefox/funzionalit\303\240_sperimentali/index.html" +++ /dev/null @@ -1,1506 +0,0 @@ ---- -title: Funzionalità sperimentali in Firefox -slug: Mozilla/Firefox/Funzionalità_sperimentali -translation_of: Mozilla/Firefox/Experimental_features ---- -
{{FirefoxSidebar}}
- -

In order to test new features, Mozilla publishes a test version of the Firefox browser, Firefox Nightly, every day. These nightly builds of Firefox typically include experimental or partially-implemented features, including those for proposed or cutting-edge Web platform standards.

- -

This page lists features that are in Nightly versions of Firefox along with information on how to activate them, if necessary. You can test your Web sites and applications before these features get released and ensure everything will still work with the latest Web technology capabilities.

- -

To test these experimental features, you need to download Firefox Nightly or Firefox Developer Edition. Which you need is described alongside each feature's description below.

- -
-

Editor's note: When adding features to these tables, please try to include a link to the relevant bug or bugs using the {{TemplateLink("bug")}} macro: \{{bug(bug-number)}}.

-
- -

HTML

- -

Element: <dialog>

- -

The HTML {{HTMLElement("dialog")}} element and its associated DOM APIs provide support for HTML-based modal dialog boxes. The current implementation is a little inelegant but is basically functional. See {{bug(840640)}} for more details.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Release channelVersion addedEnabled by default?
Nightly53No
Developer Edition53No
Beta53No
Release53No
Preference namedom.dialog_element.enabled
- -

Global attribute: inputmode

- -

Our implementation of the inputmode global attribute has been updated as per the WHATWG spec ({{bug(1509527)}}), but we still need to make other changes too, like making it available on contenteditable content. See also {{bug(1205133)}} for details.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Release channelVersion addedEnabled by default?
Nightly75Yes
Developer Edition75No
Beta75No
Release75No
Preference namedom.forms.inputmode
- - - -

The {{HTMLElement("link")}} element's {{htmlattrxref("rel", "link")}} attribute is intended to help provide performance gains by letting you download resources earlier in the page lifecycle, ensuring that they're available earlier and are less likely to block page rendering. Read Preloading content with rel="preload" for more details. For more details on the status of this feature, see {{bug(1639607)}}.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Release channelVersion addedEnabled by default?
Nightly78Yes
Developer Edition78Yes
Beta78Yes
Release78No
Preference namenetwork.preload
- -

CSS

- -

Display stray control characters in CSS as hex boxes

- -

This feature renders control characters (Unicode category Cc) other than tab (U+0009), line feed (U+000A), form feed (U+000C), and carriage return (U+000D) as a hexbox when they are not expected.
-
- See {{bug(1099557)}} for more details.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Release channelVersion addedEnabled by default?
Nightly43Yes
Developer Edition43No
Beta43No
Release43No
Preference namelayout.css.control-characters.enabled or layout.css.control-characters.visible
- -

Property: initial-letter

- -

The {{cssxref("initial-letter")}} CSS property is part of the {{SpecName("CSS3 Inline")}} specification and allows you to specify how dropped, raised, and sunken initial letters are displayed.
-
- See {{bug(1223880)}} for more details.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Release channelVersion addedEnabled by default?
Nightly50No
Developer Edition50No
Beta50No
Release50No
Preference namelayout.css.initial-letter.enabled
- -

Conic gradients

- -

Conic gradients expand CSS gradients to allow the color transitions to be rendered circling around a center point rather than radiating from it. See {{bug(1175958)}} for more details.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Release channelVersion addedEnabled by default?
Nightly75No
Developer Edition75No
Beta75No
Release75No
Preference namelayout.css.conic-gradient.enabled and gfx.webrender.all
- -

Pseudo-class: :focus-visible

- -

Allows focus styles to be applied to elements like buttons and form controls, only when they are focused using the keyboard (e.g. when tabbing between elements), and not when they are focused using a mouse or other pointing device. See bug 1617600 for more details.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Release channelVersion addedEnabled by default?
Nightly75No
Developer Edition75No
Beta75No
Release75No
Preference namelayout.css.focus-visible.enabled
- -

Single numbers as aspect ratio in media queries

- -

Support for using a single {{cssxref("number")}} as a {{cssxref("ratio")}} when specifying the aspect ratio for a media query. See {{bug(1565562)}} for more details.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Release channelVersion addedEnabled by default?
Nightly70No
Developer Edition70No
Beta70No
Release70No
Preference namelayout.css.aspect-ratio-number.enabled
- -

Property: backdrop-filter

- -

The {{cssxref("backdrop-filter")}} property applies filter effects to the area behind an element. See {{bug(1178765)}} for more details.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Release channelVersion addedEnabled by default?
Nightly70No
Developer Edition70No
Beta70No
Release70No
Preference namelayout.css.backdrop-filter.enabled
- -

Grid: Masonry layout

- -

Adds support for a masonry style layout based on grid layout where one axis has a masonry layout while having normal grid layout on the other. This allows to create gallery style layouts like on Pinterest. See {{bug(1607954)}} for more details.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Release channelVersion addedEnabled by default?
Nightly77No
Developer Edition77No
Beta77No
Release77No
Preference namelayout.css.grid-template-masonry-value.enabled
- -

APIs

- -

Graphics: Canvas, WebGL, and WebGPU

- -

Interface: OffscreenCanvas

- -

The {{domxref("OffscreenCanvas")}} interface provides a canvas that can be rendered offscreen. It is available in both the window and worker contexts. See {{bug(1390089)}} for more details.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Release channelVersion addedEnabled by default?
Nightly44No
Developer Edition44No
Beta44No
Release44No
Preference namegfx.offscreencanvas.enabled
- -

Hit regions

- -

Whether the mouse coordinates are within a particular area on the canvas is a common problem to solve. The hit region API allows you define an area of your canvas and provides another possibility to expose interactive content on a canvas to accessibility tools.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Release channelVersion addedEnabled by default?
Nightly30No
Developer Edition30No
Beta30No
Release30No
Preference namecanvas.hitregions.enabled
- -

WebGL: Draft extensions

- -

When this preference is enabled, any WebGL extensions currently in "draft" status which are being tested are enabled for use. Currently, there are no WebGL extensions being tested by Firefox.

- -

WebGPU API

- -

This new API provides low-level support for performing computation and graphics rendering using the {{interwiki("wikipedia", "Graphics Processing Unit")}} (GPU) of the user's device or computer. The specification is still a work-in-progress. See {{bug(1602129)}} for our progress on this API.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Release channelVersion addedEnabled by default?
Nightly73No
Developer Edition73No
Beta73No
Release73No
Preference namedom.webgpu.enabled
- -

HTML DOM API

- -

Global event: beforeinput

- -

The global {{domxref("HTMLElement.beforeinput_event", "beforeinput")}} event is sent to an {{HTMLElement("input")}} element—or any element whose {{htmlattrxref("contenteditable")}} attribute is enabled—immediately before the element's value changes.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Release channelVersion addedEnabled by default?
Nightly74No
Developer Edition74No
Beta74No
Release74No
Preference namedom.input_events.beforeinput.enabled
- -

HTMLMediaElement method: setInkId()

- -

{{domxref("HTMLMediaElement.setSinkId()")}} allows you to set the sink ID of an audio output device on an {{domxref("HTMLMediaElement")}}, thereby changing where the audio is being output. See {{bug(934425)}} for more details.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Release channelVersion addedEnabled by default?
Nightly64No
Developer Edition64No
Beta64No
Release64No
Preference namemedia.setsinkid.enabled
- -

HTMLMediaElement properties: audioTracks and videoTracks

- -

Enabling this feature adds the {{domxref("HTMLMediaElement.audioTracks")}} and {{domxref("HTMLMediaElement.videoTracks")}} properties to all HTML media elements. However, because Firefox doesn't currently suport multiple audio and video tracks, the most common use cases for these properties don't work, so they're both disabled by default. See {{bug(1057233)}} for more details.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Release channelVersion addedEnabled by default?
Nightly33No
Developer Edition33No
Beta33No
Release33No
Preference namemedia.track.enabled
- -

DOM

- -

Document property: autoplayPolicy

- -

The {{domxref("document")}} property {{domxref("Document.autoplayPolicy", "autoplayPolicy")}} returns a string indicating how the browser handles requests to automatically play media (either using the {{domxref("HTMLMediaElement.autoplay", "autoplay")}} property on a media element or by attempting to trigger playback from JavaScript code. The spec for this API is still being written. The value changes over time depending on what the user is doing, their preferences, and the state of the browser in general. Potential values include allowed (autoplay is currently permitted), allowed-muted (autoplay is allowed but only with no—or muted—audio), and disallowed (autoplay is not allowed at this time). See {{bug(1506289)}} for more details.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Release channelVersion addedEnabled by default?
Nightly66No
Developer Edition66No
Beta66No
Release66No
Preference namedom.media.autoplay.autoplay-policy-api
- -

GeometryUtils methods: convertPointFromNode(), convertRectFromNode(), and convertQuadFromNode()

- -

The {{domxref("GeometryUtils")}} methods {{domxref("GeometryUtils.convertPointFromNode", "convertPointFromNode()")}}, {{domxref("GeometryUtils.convertRectFromNode", "convertRectFromNode()")}}, and {{domxref("GeometryUtils.convertQuadFromNode", "convertQuadFromNode()")}} map the given point, rectangle, or quadruple from the {{domxref("Node")}} on which they're called to another node. See {{bug(918189)}} for more details.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Release channelVersion addedEnabled by default?
Nightly31Yes
Developer Edition31No
Beta31No
Release31No
Preference namelayout.css.getBoxQuads.enabled
- -

GeometryUtils method: getBoxQuads()

- -

The {{domxref("GeometryUtils")}} method {{domxref("GeometryUtils.getBoxQuads", "getBoxQuads()")}} returns the CSS boxes for a {{domxref("Node")}} relative to any other node or viewport. See {{bug(917755)}} for more details.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Release channelVersion addedEnabled by default?
Nightly31Yes
Developer Edition31No
Beta31No
Release31No
Preference namelayout.css.convertFromNode.enable
- -

Payment Request API

- -

Primary payment handling

- -

The Payment Request API provides support for handling web-based payments within web content or apps. Due to a bug that came up during testing of the user interface, we have decided to postpone shipping this API while discussions over potential changes to the API are held. Work is ongoing. See {{bug(1318984)}} for more details on the state of this API.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Release channelVersion addedEnabled by default?
Nightly55No
Developer Edition55No
Beta55No
Release55No
Preference namedom.payments.request.enabled and
- dom.payments.request.supportedRegions
- -

Basic Card API

- -

Extends the Payment Request API with dictionaries that define data structures describing card payment types and payment responses. See {{domxref("BasicCardRequest")}} and {{domxref("BasicCardResponse")}}.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Release channelVersion addedEnabled by default?
Nightly56No
Developer Edition56No
Beta56No
Release56No
Preference namedom.payments.request.enabled and
- dom.payments.request.supportedRegions
- -

Visual Viewport API

- -

The Visual Viewport API provides access to information describing the position of the {{Glossary("visual viewport")}} relative to the document as well as to the window's content area. It also supports events to monitor changes to this information. See {{bug(1550390)}} for more details. There currently is no real plan to ship this on desktop, but you can track the state of that just in case it changes in {{bug(1551302)}}.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Release channelVersion addedEnabled by default?
Nightly63No
Developer Edition63No
Beta63No
Release63Starting in Firefox 68, on Android only
Preference namedom.visualviewport.enabled
- -

Constructable stylesheets

- -

The addition of a constructor to the {{domxref("CSSStyleSheet")}} interface as well as a variety of related changes makes it possible to directly create new stylesheets without having to add the sheet to the HTML. This makes it much easier to create reusable stylesheets for use with Shadow DOM. Our implementation is not yet complete; see {{bug(1520690)}} for more details.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Release channelVersion addedEnabled by default?
Nightly73No
Developer Edition73No
Beta73No
Release73No
Preference namelayout.css.constructable-stylesheets.enabled
- -

WebRTC and media

- -

The following experimental features include those found in the WebRTC API, the Web Audio API, the Media Session API, the Media Source Extensions API, the Encrypted Media Extensions API, and the Media Capture and Streams API.

- -

Media Session API

- -

The entire Firefox implementation of the Media Session API is currently experimental. This API is used to customize the handling of media-related notifications, to manage events and data useful for presenting a user interface for managing media playback, and to obtain media file metadata. See {{bug(1112032)}} for more details.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Release channelVersion addedEnabled by default?
Nightly71Yes
Developer Edition71No
Beta71No
Release71No
Preference namedom.media.mediasession.enabled
- -

Asynchronous SourceBuffer add and remove

- -

This adds the promise-based methods {{domxref("SourceBuffer.appendBufferAsync", "appendBufferAsync()")}} and {{domxref("SourceBuffer.removeAsync", "removeAsync()")}} for adding and removing media source buffers to the {{domxref("SourceBuffer")}} interface. See {{bug(1280613)}} and {{bug(778617)}} for more information.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Release channelVersion addedEnabled by default?
Nightly62No
Developer Edition62No
Beta62No
Release62No
Preference namemedia.mediasource.experimental.enabled
- -

AVIF (AV1 Image File format) support

- -

With this feature enabled, Firefox supports the AV1 Image File (AVIF) format. This is a still image file format that leverages the capabilities of the AV1 video compression algorithms to reduce image size. See {{bug(1443863)}} for more details.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Release channelVersion addedEnabled by default?
Nightly77No
Developer Edition77No
Beta77No
Release77No
Preference nameimage.avif.enabled
- -

Security and privacy

- -

Block plain text requests from Flash on encrypted pages

- -

In order to help mitigate man-in-the-middle (MitM) attacks caused by Flash content on encrypted pages, a preference has been added to treat OBJECT_SUBREQUESTs as active content. See {{bug(1190623)}} for more details.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Release channelVersion addedEnabled by default?
Nightly59No
Developer Edition59No
Beta59No
Release59No
Preference namesecurity.mixed_content.block_object_subrequest
- -

Insecure page labeling

- -

These two preferences add a "Not secure" text label in the address bar next to the traditional lock icon when a page is loaded insecurely (that is, using {{Glossary("HTTP")}} rather than {{Glossary("HTTPS")}}). See {{bug(1335970)}} for more details.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Release channelVersion addedEnabled by default?
Nightly60No
Developer Edition60No
Beta60No
Release60No
Preference namesecurity.insecure_connection_text.enabled for normal browsing mode; security.insecure_connection_text.pbmode.enabled for private browsing mode
- -

Upgrading mixed display content

- -

When enabled, this preference causes Firefox to automatically upgrade requests for media content from HTTP to HTTPS on secure pages. The intent is to prevent mixed-content conditions in which some content is loaded securely while other content is insecure. If the upgrade fails (because the media's host doesn't support HTTPS), the media is not loaded. See {{bug(1435733)}} for more details.

- -

This also changes the console warning; if the upgrade succeeds, the message indicates that the request was upgraded, instead of showing a warning.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Release channelVersion addedEnabled by default?
Nightly60No
Developer Edition60No
Beta60No
Release60No
Preference namesecurity.mixed_content.upgrade_display_content
- - - -

Following Safari's lead, this experiment causes setting the {{htmlattrxref("target", "a")}} attribute on an {{HTMLElement("a")}} element to _blank (that is, using target="_blank") to imply that the default value of {{htmlattrxref("rel", "a")}} is noopener rather than opener, which is the usual default. To bypass this security measure, web developers should explicitly request an opener relationship using rel="opener" on their <a> elements that use target="_blank" to open the link into a new window or tab. See {{bug(1503681)}} for more details.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Release channelVersion addedEnabled by default?
Nightly65Yes
Developer Edition65Yes
Beta65Yes
Release65No
Preference namedom.targetBlankNoOpener.enabled
- -

FTP support disabled

- -

For security reasons, Mozilla intends to remove support for {{Glossary("FTP")}} from Firefox in 2010, effective in Firefox 82. See {{bug(1622409)}} for implementation progress. The network.ftp.enabled preference must be enabled (set to true) to allow FTP to be used.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Release channelVersion addedEnabled by default?
Nightly77Yes
Developer Edition77No
Beta77No
Release77No
Preference namenetwork.ftp.enabled
- -

Developer tools

- -

Mozilla's developer tools are constantly evolving. We experiment with new ideas, add new features, and test them on the Nightly and Developer Edition channels before letting them go through to beta and release. The features below are the current crop of experimental developer tool features.

- -

Color scheme simulation

- -

Adds an option to simulate different color schemes allowing to test {{cssxref("@media/prefers-color-scheme", "@prefers-color-scheme")}} media queries. Using this media query lets your style sheet specify whether it prefers a light or dark user interface. This feature lets you test your code without having to change settings in your browser (or operating system, if the browser follows a system-wide color scheme setting).

- -

See {{bug(1550804)}} and {{bug(1137699)}} for more details.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Release channelVersion addedEnabled by default?
Nightly72No
Developer Edition72No
Beta72No
Release72No
Preference namedevtools.inspector.color-scheme-simulation.enabled
- -

Execution context selector

- -

This feature displays a button on the console's command line that lets you change the context in which the expression you enter will be executed. See {{bug(1605154)}} and {{bug(1605153)}} for more details.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Release channelVersion addedEnabled by default?
Nightly75No
Developer Edition75No
Beta75No
Release75No
Preference namedevtools.webconsole.input.context
- -

Mobile gesture support in Responsive Design Mode

- -

Mouse gestures are used to simulate mobile gestures like swiping/scrolling, double-tap and pinch-zooming and long-press to select/open the context menu. See {{bug(1621781)}}, {{bug(1245183)}}, and {{bug(1401304)}} for more details.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Release channelVersion addedEnabled by default?
Nightly76[1]Yes
Developer Edition76[1]Yes
Beta76[1]Yes
Release76[1]No
Preference namen/a
- -

[1] Support for zooming using the double-tap gesture was added in Firefox 76. The other gestures were added for Firefox 79.

- -

Compatibility panel

- -

A side panel for the Page Inspector that shows you information detailing your app's cross-browser compatibility status. See {{bug(1584464)}} for more details.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Release channelVersion addedEnabled by default?
Nightly71Yes
Developer Edition71Yes
Beta71No
Release71No
Preference namedevtools.inspector.compatibility.enabled
- -

UI

- -

Desktop zooming

- -

This feature lets you enable smooth pinch zooming on desktop computers without requiring layout reflows, just like mobile devices do. See {{bug(1245183)}} for further details.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Release channelVersion addedEnabled by default?
Nightly42No
Developer Edition42No
Beta42No
Release42No
Preference nameapz.allow_zooming and (on Windows) apz.windows.use_direct_manipulation
- -

See also

- - diff --git a/files/it/mozilla/firefox/releases/1.5/adapting_xul_applications_for_firefox_1.5/index.html b/files/it/mozilla/firefox/releases/1.5/adapting_xul_applications_for_firefox_1.5/index.html new file mode 100644 index 0000000000..7062b6a3ae --- /dev/null +++ b/files/it/mozilla/firefox/releases/1.5/adapting_xul_applications_for_firefox_1.5/index.html @@ -0,0 +1,34 @@ +--- +title: Adattare le applicazioni XUL a Firefox 1.5 +slug: Adattare_le_applicazioni_XUL_a_Firefox_1.5 +tags: + - Estensioni + - Tutte_le_categorie + - XUL +translation_of: Mozilla/Firefox/Releases/1.5/Adapting_XUL_Applications_for_Firefox_1.5 +--- +
{{FirefoxSidebar}}

 

+ +

Questa pagina contiene un elenco di modifiche in Firefox 1.5, che coinvolgono gli sviluppatori XUL.

+ +

Cambiamenti specifici

+ + + +

Altre informazioni

+ + + +

{{ languages( { "fr": "fr/Adaptation_des_applications_XUL_pour_Firefox_1.5", "en": "en/Adapting_XUL_Applications_for_Firefox_1.5" } ) }}

diff --git a/files/it/mozilla/firefox/releases/1.5/index.html b/files/it/mozilla/firefox/releases/1.5/index.html new file mode 100644 index 0000000000..6c47af6552 --- /dev/null +++ b/files/it/mozilla/firefox/releases/1.5/index.html @@ -0,0 +1,165 @@ +--- +title: Firefox 1.5 per Sviluppatori +slug: Firefox_1.5_per_Sviluppatori +tags: + - Da_unire + - Sviluppo_Web + - Tutte_le_categorie +translation_of: Mozilla/Firefox/Releases/1.5 +--- +
{{FirefoxSidebar}}

Firefox 1.5

+ +

Firefox 1.5 è stato rilasciato ed è disponibile per il download. Basato sul motore Gecko 1.8, questa ultima versione del browser migliora il supporto agli standard e fornisce nuove possibilità per implementare applicazioni web di ultima generazione. Le funzionalità di Firefox 1.5 comprendono un supporto più esteso ai CSS livello 2 e 3, API per applicazioni grafiche vettoriali 2D tramite SVG 1.1 e l'elemento <canvas>, eventi XForms e XML, oltre a miglioramenti per DHTML, JavaScript e DOM.

+ +

Firefox 1.5 è disponibile per il download a questo indirizzo: http://www.mozilla.com/firefox/

+ +

Strumenti di sviluppo

+ +

Esistono diversi strumenti ed estensioni che possono essere d'aiuto agli sviluppatori per supportare Firefox 1.5.

+ + + +

Nota: alcune estensioni potrebbero non supportare ancora Firefox 1.5 e potrebbero essere automaticamente disabilitate.

+ +

Nota: non tutte le estensioni hanno una traduzione in italiano.

+ +

Panoramica

+ +

Alcune nuove funzionalità di Firefox 1.5.

+ +

Sviluppatori di siti e applicazioni web

+ +
+
Introduzione a SVG in HTML
+
impara a utilizzare JavaScript e i CSS per manipolare le immagini nello stesso modo in cui manipoleresti un normale documento XHTML. Vedi anche SVG in Firefox 1.5 per conoscere lo stato e i problemi conosciuti dell'implementazione di SVG in Firefox 1.5.
+
+ +
+
Disegnare grafici con le Canvas
+
come utilizzare il nuovo tag <canvas> per disegnare grafici e altri oggetti.
+
+ +
+
Le colonne CSS3
+
Il supporto per il testo multicolonna introdotto da CSS3.
+
+ +
+
Usare la cache di Firefox 1.5
+
Come bfcache velocizza la navigazione coi tasti Indietro e Avanti
+
+ +

Sviluppatori XUL e sviluppatori di estensioni

+ +
+
Creare un'estensione
+
Questo tutorial spiega tutti i passi necessari per creare una semplicissima estensione per Firefox. Si veda anche another tutorial on MozillaZine knowledge base (EN), che illustra le nuove funzionalità dell'Extension Manager nell'1.5 e spiega come creare una nuova estensione ancora più facile.
+
+ +
+
XPCNativeWrapper
+
XPCNativeWrapper è un modo per far sì che un oggetto sia accessibile in maniera sicura dal DOM. Si può utilizzare in tutte le versioni di Firefox, sebbene il suo comportamento sia leggermente cambiato in Firefox 1.5.
+
+ +
+
Sistema di Preferenze
+
Illustra i nuovi widget che permettono di creare finestre di opzioni in maniera molto semplice e utilizzando poco codice JavaScript.
+
+ +
+
Caratteri internazionali nel JavaScript di XUL
+
i file JavaScript delle applicazioni XUL ora possono contenere caratteri non ASCII.
+
+ +
+
Cambiementi nell'API di Tree
+
Le interfacce per accedere all'elemento XUL <tree> sono cambiate.
+
+ +
+
Modifiche a XUL in Firefox 1.5
+
Un sommario dei cambiamenti di XUL. Si veda anche Adattare le applicazioni XUL per Firefox 1.5.
+
+ +
+
Modifiche relative al networking
+
 
+
+ + + +

Nuove funzionalità per gli utenti finali

+ +

Esperienza utente

+ + + +

Sicurezza e Privacy

+ + + +

Supporto agli standard

+ +

Firefox offre un supporto coerente multipiattaforma per i seguenti standard del web:

+ + + +

Firefox 1.5 supporta anche:

+ + + +

Cambiamenti da Firefox 1.0

+ +

Sono stati introdotti diversi cambiamenti in Firefox dalla sua prima release il 9 novembre 2004. Questo browser ha visto molti progressi, molte nuove funzionalità e sono stati corretti molti bug. Lerelease notes sono un'eccellente fonte di informazioni sulle modifiche che sono state apportate:

+ + + +

Nota: le note di rilascio qui linkate sono tutte in inglese.

+ +

{{ languages( { "en": "en/Firefox_1.5_for_Developers", "es": "es/Firefox_1.5_para_Desarrolladores", "fr": "fr/Firefox_1.5_pour_les_d\u00e9veloppeurs", "ja": "ja/Firefox_1.5_for_Developers", "nl": "nl/Firefox_1.5_voor_ontwikkelaars", "pl": "pl/Firefox_1.5_dla_programist\u00f3w", "pt": "pt/Firefox_1.5_para_Desenvolvedores" } ) }}

diff --git a/files/it/mozilla/firefox/releases/18/index.html b/files/it/mozilla/firefox/releases/18/index.html new file mode 100644 index 0000000000..41af59d3c9 --- /dev/null +++ b/files/it/mozilla/firefox/releases/18/index.html @@ -0,0 +1,109 @@ +--- +title: Firefox 18 per sviluppatori +slug: Firefox_18_for_developers +tags: + - Firefox + - Firefox 18 +translation_of: Mozilla/Firefox/Releases/18 +--- +
{{FirefoxSidebar}}

{{ draft() }}

+ +

Firefox 18 è stato pubblicato l'8 gennaio 2013. In questo articolo sono elencate le modifiche principali che sono utili non solo per gli sviluppatori web, ma anche gli sviluppatori di Firefox e Gecko così come add-on per gli sviluppatori.
+
+ Vuoi aiutare la documentazione di Firefox 18? lista dei bug su cui bisogna scrivere (Vedi l'elenco dei bug )

+ +

Modifiche per gli sviluppatori Web

+ +

HTML

+ + + +

CSS

+ + + +

 DOM

+ + + +

JavaScript

+ + + +

WebGL

+ +

SVG

+ +

MathML

+ +

XUL

+ +

Network

+ + + +

Strumenti di sviluppo

+ +

Novità per add-on e sviluppatori Mozilla

+ +

Novità dell'Interfaccia

+ +
+
{{ interface("nsIStreamListener") }}
+
The 4th parameter (aOffset) of onDataAvailable() method changes to unsigned long long. ({{bug("784912")}})
+
{{ interface("nsIUploadChannel") }}
+
setUploadStream() supports over 2GB content-length ({{bug("790617")}})
+
{{ interface("nsIEditor") }}
+
addEditorObserver() has been removed, use setEditorObserver() instead, removeEditorObserver() no longer takes a {{ interface("nsIEditorObserver") }} parameter ({{bug("785091")}})
+
+ +
+
{{ interface("nsIHttpProtocolHandler") }}
+
http-on-modify-request observers are no longer guaranteed to be called synchronously during
+ nsIChannel.asyncOpen(). For observers that need to be called during asyncOpen(), the new http-on-opening-request observer topic has been added.  See ({{bug("800799")}})
+
+ +

New interfaces

+ +

Removed interfaces

+ +

The following interfaces have been removed.

+ + + +

See also

+ + + +

Older versions

+ +

{{Firefox_for_developers('17')}}

diff --git a/files/it/mozilla/firefox/releases/2/index.html b/files/it/mozilla/firefox/releases/2/index.html new file mode 100644 index 0000000000..4f8d46f2cf --- /dev/null +++ b/files/it/mozilla/firefox/releases/2/index.html @@ -0,0 +1,117 @@ +--- +title: Firefox 2.0 per Sviluppatori +slug: Firefox_2.0_per_Sviluppatori +tags: + - Sviluppo_Web + - Tutte_le_categorie +translation_of: Mozilla/Firefox/Releases/2 +--- +
{{FirefoxSidebar}}

Nuove funzionalità per sviluppatori in Firefox 2

+ +

Firefox 2 introduce una vasta gamma di nuove funzionalità. Questo articolo fornisce i link alle rispettive pagine.

+ +

Per gli sviluppatori di siti web e di applicazioni

+ +
+
Microsummaries (EN)
+
I microsommari sono informazioni importanti regolarmente aggiornate e succinte riguardo alle pagine web. Sia un sito che degli sviluppatori esterni possono fornirle e gli utenti possono scegliere di visualizzare i microsommari invece dei titoli statici nei bookmark.
+
+ +
+
Creare un Microsommario
+
Un tutorial che insegna a creare un generatore di microsommari.
+
+ +
+
Creare Plugin MozSearch
+
Firefox 2 supporta MozSearch, un formato per i plugin di ricerca basato su OpenSearch.
+
+ +
+
Supportare i suggerimenti nei plugin di ricerca
+
Come permettere ai plugin in MozSearch di supportare i suggerimenti di ricerca, che appaiono in una casella popup mentre di scrive nella barra di ricerca.
+
+ +
+
Novità in JavaScript 1.7
+
Firefox 2 supporta JavaScript 1.7, che comprende nuove funzionalità come let, assegnamento destrutturato, generatori e iteratori.
+
+ +
+
WHATWG Client-side session and persistent storage (EN)
+
La persistenza dei dati permette alle applicazioni web di immagazzinare dati strutturati nel browser.
+
+ +
+
SVG in Firefox
+
Firefox 2 migliora il supporto a Scalable Vector Graphics (SVG), implementando l'elemento <textPath> e aggiungendo il supporto ad alcuni attributi precedentemente ignorati.
+
+ +

Per gli sviluppatori di applicazioni XUL e di estensioni

+ +
+
Session restore API
+
Aiuta a salvare e recuperare successivamente i dati di sessione in sessione.
+
+ +
+
Feed content access API
+
Questa API è ancora in stato di revisione; la documentazione verrà pubblicata in futuro.
+
+ +
+
Supporto a SAX
+
API di un parser XML basata sugli eventi.
+
+ +
+
Installare plugin di ricerca dalle pagine web
+
E' possibile installare in Firefox un nuovo motore di ricerca tramite JavaScript. Il plugin di ricerca può essere scritto utilizzando anche OpenSearch o il formato Sherlock.
+
+ +
+
Aggiungere fornitori di dati anti-phishing
+
E' possibile migliorare la protezione anti-phishing aggiungendo alcuni fornitori di fati per la navigazione sicura.
+
+ +
+
mozStorage
+
Firefox 2 introduce mozStorage, un'architettura di database basata su SqlLite.
+
+ +
+
Le pratiche migliori per il versioning delle estensioni
+
Come utilizzare i numeri di versione.
+
+ +

Nuove funzionalità per gli utenti finali

+ +

Firefox 2 offre una versione migliorata dell'interfaccia utente impiegata nelle versioni precedenti, a cui sono state aggiunte varie caratteristiche di sicurezza finalizzate a rendere la vostra navigazione più semplice e piacevole di prima.

+ +

Esperienza utente

+ + + +

Sicurezza e Privacy

+ + + +

Argomenti correlati

+ + + +

{{ languages( { "en": "en/Firefox_2_for_developers", "fr": "fr/Firefox_2_pour_les_d\u00e9veloppeurs", "ja": "ja/Firefox_2_for_developers", "pt": "pt/Firefox_2_para_desenvolvedores" } ) }}

diff --git a/files/it/orphaned/learn/how_to_contribute/index.html b/files/it/orphaned/learn/how_to_contribute/index.html new file mode 100644 index 0000000000..bd3d90966a --- /dev/null +++ b/files/it/orphaned/learn/how_to_contribute/index.html @@ -0,0 +1,88 @@ +--- +title: Come contribuire nell'area di MDN dedicata all'apprendimento +slug: Learn/Come_contribuire +tags: + - Apprendimento + - Articolo + - Contribuire + - Didattica + - Glossário + - Guida + - Materiale + - Principiante + - insegnante + - sviluppatore +translation_of: Learn/How_to_contribute +--- +

{{LearnSidebar}}

+ +

Se sei qui per la prima volta o dopo un'approfondita ricerca, probabilmente ti interessa contribuire all'area di MDN dedicata all'apprendimento. Questa è una grande notizia!

+ +

In questa pagina, troverai tutto ciò che ti occorre per iniziare a migliorare i contenuti dedicati all'apprendimento in MDN. Ci sono molte cose che puoi fare, a seconda del tempo a tua disposizione e se sei un principiante, uno sviluppatore web o un insegnante.

+ +
+

Nota: Puoi trovare una guida per scrivere un nuovo articolo nell'area dedicata all'apprendimento su Come scrivere un nuovo articolo per aiutare gli utenti a conoscere il Web.

+
+ +

Trova un compito specifico

+ +

I contributori stanno utilizzando una bacheca Trello per organizzare i propri compiti. In questo modo puoi trovare dei compiti specifici da fare nel progetto. Per essere coinvolto, basta creare un account Trello e avvisare Chris Mills per ricevere i permessi di scrittura sulla bacheca.

+ +

Contribuire è il modo migliore per divertirsi, imparando nuove cose. Se ti senti perso o hai domande, non esitare a raggiungerci nella nostra lista email o canale IRC (dettagli a fine pagina). Chris Mills guida gli argomenti per l'area apprendimento — Puoi anche contattarlo direttamente.

+ +

La seguente sezione fornisce delle idee generali di compiti che puoi fare.

+ +

Sono un principiante

+ +

Questo è meraviglioso! I principianti sono molto importanti e preziosi per creare materiale didattico e raccogliere feedback su di esso. In quanto diretto destinatario di questo materiale, riesci a restituire una prospettiva unica su di esso e ciò ti rende un elemento fondamentale del nostro team. Invece, se stai utilizzando i nostri articoli per imparare qualcosa ma ti trovi in difficoltà o trovi un articolo caotico, puoi sia correggerlo oppure farci sapere del problema affinché possiamo provvedere noi a correggerlo.

+ +

Di seguito sono riportati i modi in cui puoi contribuire:

+ +
+
Aggiungi tags ai nostri articoli (5 min)
+
Aggiungere dei tag ai contenuti di MDN è uno dei modi più semplici di dare il tuo contributo. Poichè molte delle nostre sezioni utilizzano i tags per aiutare a fornire le giuste informazioni, contribuire a definire i tags stessi è senz'altro un contributo molto prezioso. Da' un'occhiata alla lista dei lemmi del glossario e agli articoli didattici ancora privi di tags per iniziare a contribuire.
+
Leggi e correggi le voci del glossario (5 min)
+
In qualità di principiante, noi abbiamo bisogno della freschezza del tuo sguardo. Se una voce del glossario ti sembra difficile da comprendere, ciò significa che occorre migliorarla. Sentiti libero di operare qualunque cambiamento ritieni necessario. Se non ti sembra di essere in grado tu stesso di apportare eventuali correzioni, puoi comunque segnalarcelo alla nostra mailing list.
+
Scrivi una nuova voce del glossario (20 min)
+
Ecco il modo più efficace per imparare qualcosa di nuovo. Scegli un concetto che vorresti capire meglio e, mentre impari, scrivi la nuova voce del glossario che gli pertiene. Provare a spiegare qualcosa agli altri è un modo efficace di "fissare" quanto stai imparando nel tuo cervello e di elaborare tu stesso il significato delle cose. Tutto ciò, mentre stai cercando di aiutare qualcun altro: si vince tutti!
+
Leggi e controlla un articolo didattico (2 ore)
+
Compito molto simile al precedente (v. sopra); solo richiede maggior tempo, perchè questi articoli in genere sono più lunghi.
+
+ +

Sono uno sviluppatore

+ +

Fantastico! Le tue competenze tecniche sono proprio quello che ci serve per offrire ai principianti dei contenuti tecnicamente accurati. Poichè questa sezione di MDN è dedicata all'apprendimento del Web, fa in modo che le tue spiegazioni siano il più semplice possibile, ma non così semplici da risultare inutili. E' preferibile essere compresi piuttosto che esageratamente precisi.

+ +
+
Leggi e correggi le voci del glossario (5 min)
+
In quanto sviluppatore, vorremmo essere sicuri che farai in modo di rendere i nostri contenuti in maniera tecnicamente accurata ma non pedante. Sentiti libero di apportare tutte le correzioni del caso. Se vuoi confrontarti sui contenuti prima di intervenire, contattaci via mailing list o IRC channel.
+
Scrivi una nuova voce del glossario (20 min)
+
Rendere più chiaro il linguaggio tecnico è un ottimo metodo per imparare e, allo stesso tempo, per essere tecnicamente precisi. I principianti te ne saranno grati. Ci sono molti termini da definire che richiedono la tua attenzione. Scégline uno e sei pronto per cominciare.
+
Leggi e correggi un articolo didattico (2 ore)
+
Stessa cosa del controllare una voce del glossario (v. sopra); richiede solo un po' più di tempo perchè questi articoli sono generalmente più lunghi.
+
Scrivi un nuovo articolo didattico (4 ore o più)
+
In MDN mancano ancora semplici chiari articoli  dedicati all'utilizzo delle tecnologie per il Web (HTML, CSS, JavaScript, ecc). Ci sono anche contenuti ormai obsoleti che avrebbero bisogno di essere controllati e riorganizzati. Mettiti alla prova e contribuisci a rendere le tecnologie per il Web accessibili anche per i principianti.
+
Crea strumenti didattici interattivi , esempi di codice o esercizi  (? ore)
+
Ciascuno dei nostri articoli didattici prevede quello che chiamiamo materiale di "apprendimento attivo", perchè le persone imparano meglio se fanno loro stessi. Tale materiale è costituito da esercizi o contenuti interattivi, che consentono all'utente di applicare e manipolare i concetti espressi nell'articolo. Esistono diversi modi di creare contenuti didattici per l'apprendimento attivo, dal creare esempi di codice con JSFiddle o simili, alla composizione di contenuti interattivi e del tutto modificabili con Thimble. Scatena la tua fantasia!
+
+ +

Sono un insegnante

+ +

MDN ha una lunga storia di eccellenza tecnica, ma siamo ancora agli inizi per ciò che riguarda gli strumenti didattici migliori per insegnare ai principianti. Ecco dove il tuo aiuto è prezioso, come insegnante o facilitatore: puoi aiutarci a far sì che il nostro materiale fornisca un percorso didattico efficace e pratico per i nostri lettori.

+ +
+
Leggi e correggi una voce del glossario (15 min)
+
Controlla un lemma del glossario e séntiti libero di apportare tutte le correzioni del caso. Se vuoi confrontarti sul contenuto prima di modificarlo, puoi contattarci tramite la nostra mailing list o IRC channel.
+
Scrivi una nuova voce del glossario (1 ora)
+
Definizioni dei termini chiare e semplici e supervisione dei concetti di base del glossario sono elementi fondamentali per aiutare i principianti. La tua esperienza come educatore può essere molto utile per creare delle voci del glossario efficaci; ci sono molti termini da definire che richiedono la tua attenzione. Scégline uno e datti da fare.
+
Aggiungi illustrazioni e/o schemi agli articoli (1 ora)
+
Come saprai, le illustrazioni sono una parte inestimabile di qualunque contenuto didattico. Ecco una cosa che spesso ci manca qui in MDN e la tua abilità può far la differenza in questa sezione. Scorri gli articoli privi di illustrazioni e scégline uno cui vuoi aggiungere la parte grafica.
+
Leggi e correggi un articolo didattico (2 ore)
+
Compito simile alla correzione delle voci del glossario (v. sopra), ma richiede maggior tempo dal momento che gli articoli sono generalmente più lunghi.
+
Scivi un nuovo articolo didattico (4 ore)
+
Ci servono articoli chiari e semplici sull'ecosistema Web e sugli argomenti inerenti di tipo funzionale. Dal momento che questi articoli didattici hanno lo scopo di essere soprattutto educativi e non di coprire letteralmente tutto quello che c'è da sapere, la tua esperienza riguardo cosa e come sia effettivamente da trattare sarà di grande aiuto.
+
Inventa esercizi, questionari o strumenti didattici interattivi (? ore)
+
Tutti i nostri articoli didattici prevedono materiale di "apprendimento attivo". Tale materiale consiste in contenuti interattivi o esercizi, che aiuteranno gli utenti ad apprendere come utilizzare ed espandere i concetti espressi nell'articolo in questione. Ci sono molti modi in cui tu puoi contribuire qui, dal creare quiz al comporre nuovi contenuti interattivi e modificabili su Thimble. Scatena la tua fantasia!
+
Crea percorsi didattici (? ore)
+
Al fine di fornire tutorials di facile comprensione e nella corretta progressione, ci occorre organizzare i contenuti in percorsi didattici: è un modo di raccogliere contenuti preesistenti e individuare ciò che ancora manca, così da proporre gli argomenti per nuovi articoli didattici ancora da scrivere.
+
diff --git a/files/it/orphaned/learn/html/forms/html5_updates/index.html b/files/it/orphaned/learn/html/forms/html5_updates/index.html new file mode 100644 index 0000000000..509b0a278f --- /dev/null +++ b/files/it/orphaned/learn/html/forms/html5_updates/index.html @@ -0,0 +1,83 @@ +--- +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")}}.

+ +

L'elemento {{HTMLElement("input")}} ha anche nuovi attributi:

+ +

L'elemento <form>

+

L'elemento {{HTMLElement("form")}} ha un nuovo attributo:

+ +

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.

+ +

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:

+ +

Vedi anche

+ diff --git a/files/it/orphaned/mdn/community/index.html b/files/it/orphaned/mdn/community/index.html new file mode 100644 index 0000000000..14a121baca --- /dev/null +++ b/files/it/orphaned/mdn/community/index.html @@ -0,0 +1,49 @@ +--- +title: Join the MDN community +slug: MDN/Community +translation_of: MDN/Community +--- +
{{MDNSidebar}}
+ +

{{IncludeSubnav("/it-IT/docs/MDN")}}

+ +
+

MDN (l'abbreviazione sta per Mozilla Developer Network) è più di un wiki: è una comunità di sviluppatore che lavorano insieme per rendere MDN una risorsa eccezionale per gli sviluppatori che usano le tecnologie web di tipo open.

+
+ +

Ci fa piacere se contribuisci a MDN, ma ci piacerebbe ancora di più se tu partecipassi alla community di MDN. Ecco come puoi connetterti, in tre facili passi:

+ +
    +
  1. Crea un account MDN.
    2. +
  2. Unisciti a una conversazione.
    3. +
  3. Segui ciò che avviene.
    4. +
+ +

Come lavora la community

+ +

Quelli che seguono sono articoli aggiuntivi per descrivere la community di MDN.

+ +
+
+
+
Regole della Community
+
Ci sono alcuni ruoli nella community di MDN che hanno specifiche responsabilità.
+
Sprint di documentazione
+
Questa è una guida per organizzare uno sprint documentale. Contiene consigli e trucchi forniti da chi ne ha organizzati, per fare in modo che anche tu ne possa organizzarne uno.
+
Segui cosa succede
+
MDN ti viene proposto dalla community del Mozilla Developer Network. Questi sono alcuni modi che utilizziamo per condividere le informazioni circa ciò che facciamo.
+
+ +
+
+
+ +
+
+
Conversazioni nella community di MDN
+
Il "lavoro" di MDN avviene sul sito MDN, ma la "community" appare anche in discussioni (di tipo asincrono) e chat e meeting (di tipo sincrono).
+
Lavorare nella community
+
Una parte interessante nel contribuire alla documentazione di MDN a qualsiasi livello  è capire come lavorare come parte della community di MDN. Questo articolo offre consigli per aiutarti a gestire la maggior parte delle interazioni sia con altri autori che con team di sviluppo.
+
+
+
diff --git a/files/it/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html b/files/it/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html new file mode 100644 index 0000000000..c6759dc479 --- /dev/null +++ b/files/it/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html @@ -0,0 +1,49 @@ +--- +title: Come creare un account su MDN +slug: MDN/Contribute/Howto/Create_an_MDN_account +tags: + - Documentazione + - Guide + - MDN + - Principianti + - Sviluppatori +translation_of: MDN/Contribute/Howto/Create_an_MDN_account +--- +
{{MDNSidebar}}
+ +

Per apportare qualsiasi modifica ai contenuti di MDN hai bisogno di un profilo MDN. Tranquillo, non hai bisogno di un profilo MDN se vuoi solo leggere e cercare in MDN! Questa semplice guida ti aiuta a creare un profilo MDN.

+ +
+
+

Perché MDN ha bisogno del mio indirizzo email?
+
+ Il tuo indirizzo email serve per recuperare l'account, oppure se gli amministratori di MDN hanno la necessità di contattarti in merito al tuo account o alla tua attività sul sito.
+
+ Inoltre hai la possibilità di registrarti per ricevere le notifiche (come quando una certa pagina è cambiata) e messaggi (ad esempio, se decidici di unirti al nostro gruppo di beta testing, potresti ricevere email in merito alle nuove funzionalità che hanno bisogno di essere controllate).
+
+ Il tuo indirizzo email non verrà mai visualizzato su MDN e sarà usato solo in accordo alla nostra informativa sulla privacy.

+ +
Se fai login tramite Github ed usi un indirizzo email "noreply" su Github, non riceverai i messaggi da MDN (comprese le notifiche quando ti registri alle pagine.)
+
+
+ +
    +
  1. In cima ad ogni pagina su MDN trovi un pulsante con etichetta Accedi. Muovi il mouse sul pulsante (o fai tap sullo stesso se usi un dispositivo mobile) per visualizzare una lista dei servizi di autenticazione che usiamo per accedere a MDN.
    2. +
  2. +

    Seleziona il servizio che vuoi usare per accedere. Attualmente è disponibile solo GitHub. Nota che se usi GitHub, un link al tuo profilo GitHub verrà incluso nella tua pagina pubblica del profilo MDN.

    +
    3. +
  3. +

    Segui le richieste di GitHub per collegare il tuo account a MDN.

    +
    4. +
  4. Quando il servizio di autenticazione ti riporta su MDN, ti verrà chiesto da MDN di inserire un nome utente ed un indirizzo email. Il tuo nome utente sarà visualizzato pubblicamente per identificare il lavoro che hai svolto. Non usare il tuo indirizzo email come nome utente.
    5. +
  5. Fai click su Crea nuovo profilo.
    6. +
  6. Se l'indirizzo email che hai indicato al punto 4 non è lo stesso che usi con il servizio di autenticazione, controlla la tua email e fai click sul link nell'email di conferma che ti abbiamo inviato.
    7. +
+ +

Fatto! Ora hai un account MDN e puoi immediatamente modificare le pagine!

+ +

Puoi fare click sul tuo nome in cima ad ogni pagina MDN per vedere il tuo profilo pubblico. Da lì puoi fare click su Modifica per fare modifiche od aggiunte al tuo profilo.

+ +
+

I nuovi nomi utenti non possono contenere spazi o il carattere "@". Ricordati che il tuo nome utente sarà visualizzato pubblicamente per identificare il lavoro che hai svolto!

+
diff --git a/files/it/orphaned/mdn/contribute/howto/delete_my_profile/index.html b/files/it/orphaned/mdn/contribute/howto/delete_my_profile/index.html new file mode 100644 index 0000000000..182bc6a241 --- /dev/null +++ b/files/it/orphaned/mdn/contribute/howto/delete_my_profile/index.html @@ -0,0 +1,24 @@ +--- +title: Come rimuovere il mio profilo +slug: MDN/Contribute/Howto/Delete_my_profile +translation_of: MDN/Contribute/Howto/Delete_my_profile +--- +
{{MDNSidebar}}
+ +

Nel caso decidessi di non voler più far parte di MDN, puoi richiedere la cancellazione del tuo profilo. Ciò nonostante, non possiamo cancellare alcuna tua revisione (modifiche alle pagine), e la nostra licenza del contenuto prevede che le tue modifiche abbiano una fonte. Se hai fatto delle modifiche, dovrai decidere di volerle attribuire al tuo nome utente, o ri-attribuirle ad "Anonimo".

+ +
    +
  1. Dopo aver eseguito l'accesso su MDN, clicca sul tuo profilo nella barra di navigazione in alto visibile in qualsiasi pagina. Si aprirà la tua pagina di profilo, mostrando tutte le informazioni su ciò a cui hai contribuito. Annota se le revisioni sono elencate in Attività Documenti Recenti.
    2. +
  2. Clicca su Modifica. Si apirà il modulo Modifica il tuo profilo.
    3. +
  3. Scorri fino alla fine del modulo e fai clic sul link "Elimina il tuo account". Si aprirà il modulo "Elimina il tuo profilo".
    4. +
  4. Seleziona una delle seguenti opzioni: +
      +
    • Non ho fatto alcuna modifica, cancella il mio account. Scegli questa opzione se non c'era alcun elemento in Attività Documenti Recenti.
      • +
    • Mantieni il mio nome utente come fonte per le mie modifiche, cancella il mio indirizzo email e sospendi il mio account, in modo che non possa più eseguire l'accesso.  Se scegli questa opzione, il tuo profilo verrà associato con le tue modifiche, ma non sarai più in grado di accedere a MDN. La tua pagina del profilo continuerà ad esistere, ma le informazioni personali verranno rimosse.
      • +
    • Cambia la fonte delle mie modifiche in "Anonimo", e cancella il mio account. Se scegli questa opzione, tutte le modifiche da te eseguite verranno attribuite ad "Anonimo". Il tuo account e pagina del profilo verranno rimosse. Non ci sarà più alcuna associazione tra te e le tue modifiche.
      • +
    +
    5. +
  5. Fai clic su Segnala un Bug per Chiudere il tuo Account. Questa azione creerà un nuovo caso nel sistema di tracciamento dei problemi Bugzilla per la tua richiesta di cancellazione dell'account, con i campi Riepilogo e Descrizione precompilati in base al tuo nome utente e all'opzione che hai scelto. Questo passaggio è necessario perché un essere umano esaminerà la tua richiesta ed eseguirà le azioni necessarie.
    6. +
  6. Devi accedere a Bugzilla per inviare la richiesta. Se non hai un account Bugzilla, dovrai crearne uno.
    7. +
  7. Fare clic su Invia bug per inviare la richiesta. Quando la tua richiesta è stata gestita, riceverai una notifica da Bugzilla all'indirizzo email che hai utilizzato per accedere a Bugzilla.
    8. +
diff --git a/files/it/orphaned/mdn/contribute/howto/do_a_technical_review/index.html b/files/it/orphaned/mdn/contribute/howto/do_a_technical_review/index.html new file mode 100644 index 0000000000..31f0885a09 --- /dev/null +++ b/files/it/orphaned/mdn/contribute/howto/do_a_technical_review/index.html @@ -0,0 +1,50 @@ +--- +title: Come effettuare una revisione tecnica +slug: MDN/Contribute/Howto/Do_a_technical_review +translation_of: MDN/Contribute/Howto/Do_a_technical_review +--- +
{{MDNSidebar}}

La revisione tecnica consiste nel controllo dell'accuratezza tecnica e della completezza di un articolo e, se necessario, nella sua correzione. Se chi scrive un articolo desidera che qualcun altro verifichi il contenuto tecnico di un articolo, può segnalarlo attivando l'opzione "Revisione tecnica" durante la modifica di una pagina. A volte chi scrive contatta un ingegnere specifico affinché effettui la revisione tecnica, ma chiunque abbia esperienza tecnica può farlo.

+

Questo articolo spiega come effettuare una revisione tecnica, permettendo così di mantenere corretto il contenuto di MDN.

+ + + + + + + + + + + + + + + + + + + +
In cosa consiste?Revisionare e correggere gli articoli per assicurarsi che siano tecnicamente corretti e completi
Dove è necessaria?In articoli specifici che sono contrassegnati per essere sottoposti a una revisione tecnica.
Cosa hai bisogno di sapere per completare l'operazione? +
    +
  • Conoscenza da esperto sull'argomento dell'articolo che stai revisionando.
    • +
  • Capacità di modificare un articolo wiki su MDN.
    • +
+
Quali sono i passi necessari? +
    +
  1. Scegli un articolo da revisionare +
      +
    1. Visita l'elenco delle pagine che necessitano di revisioni tecniche. Questo contiene tutte le pagine per le quali è stata richiesta una revisione tecnica.
      2. +
    2. Scegli una pagina che tratta di un argomento con cui hai familiarità.
      3. +
    3. Fai clic sul link dell'articolo per caricare la pagina.
      4. +
    +
    2. +
  2. Al termine del caricamento della pagina, fai clic sul pulsante MODIFICA in alto a sinistra; verrà aperto l'editor di MDN. Non esitare a cambiare pagina se la prima che hai scelto non ti è congeniale.
    3. +
  3. Man mano che leggi l'articolo, sistema qualsiasi informazione errata e aggiungi le parti importanti mancanti.
    4. +
  4. Inserisci un Commento per la revisione nell'apposito campo in fondo alla pagina, ad esempio 'Revisione tecnica completata'. Se hai corretto qualche informazione, includi le modifiche effettuate nel commento, ad esempio 'Revisione tecnica: corrette le descrizioni dei parametri'.
    5. +
  5. Fai clic sul pulsante SALVA MODIFICHE.
    6. +
  6. Alla chiusura dell'editor, quando l'articolo a cui sono state apportate le correzioni verrà visualizzato sullo schermo, spunta la voce Tecnica a lato (nel riquadro Sono state richieste le seguenti revisioni) e fai clic su CARICA REVISIONE.
    7. +
  7. Congratulazioni! Hai concluso la revisione!
    8. +
+
+


+  

diff --git a/files/it/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html b/files/it/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html new file mode 100644 index 0000000000..7bfc4bf759 --- /dev/null +++ b/files/it/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html @@ -0,0 +1,46 @@ +--- +title: Come effettuare una revisione editoriale +slug: MDN/Contribute/Howto/Do_an_editorial_review +translation_of: MDN/Contribute/Howto/Do_an_editorial_review +--- +
{{MDNSidebar}}

Una revisione editoriale consiste nel sistemare errori di digitazione, grammatica, utilizzo, ortografia in un articolo. Non tutti i collaboratori sono traduttori esperti, ma data la loro conoscenza hanno scritto articoli estremamente utili, che necessitano di revisioni e correzioni; questo è lo scopo della revisione editoriale.

+

Questo articolo descrive come eseguire una revisione editoriale, così da accertarsi che il contenuto di MDN sia accurato.

+ + + + + + + + + + + + + + + + + + + +
In che cosa consiste?In una revisione e correzione di articoli per i quali è richiesta una revisione editoriale.
Quando è necessaria?In articoli specifici che sono contrassegnati per essere sottoposti a una revisione editoriale.
Cosa hai bisogno di sapere per completare l'operazione?Ti serve avere una buona conoscenza della grammatica e del lessico della lingua in questione.
Quali sono i passi necessari? +
    +
  1. Scegli un articolo da revisionare: +
      +
    1. Visita l'elenco delle pagine che necessitano di revisione editoriale. Questo contiene tutte le pagine per le quali è stata richiesta una revisione editoriale.
      2. +
    2. Scegli una pagina che possiede un titolo nella lingua in questione e il cui indirizzo non inizia con Template:.
      3. +
    3. Fai clic sul collegamento per caricare la pagina.
      4. +
    +
    2. +
  2. Al termine del caricamento della pagina, fai clic sul pulsante MODIFICA in alto a sinistra; verrà aperto l'editor di MDN. Non esitare a cambiare pagina se la prima che hai scelto non ti è congeniale.
    3. +
  3. Correggi tutti gli errori di digitazione, grammatica, utilizzo che trovi.
    4. +
  4. Inserisci un Commento per la revisione nell'apposito campo in fondo alla pagina, ad esempio 'Revisione editoriale completata: sistemati errori digitazione, grammatica e ortografia'.
    5. +
  5. Fai clic sul pulsante SALVA MODIFICHE.
    6. +
  6. Alla chiusura dell'editor, quando l'articolo a cui sono state apportate le correzioni verrà visualizzato sullo schermo, spunta la voce Editoriale a lato (nel riquadro Sono state richieste le seguenti revisioni) e fai clic su CARICA REVISIONE.
    7. +
  7. +

    Congratulazioni! Hai concluso la revisione!

    +
    8. +
+
+

 

diff --git a/files/it/orphaned/mdn/contribute/howto/set_the_summary_for_a_page/index.html b/files/it/orphaned/mdn/contribute/howto/set_the_summary_for_a_page/index.html new file mode 100644 index 0000000000..ba8df38979 --- /dev/null +++ b/files/it/orphaned/mdn/contribute/howto/set_the_summary_for_a_page/index.html @@ -0,0 +1,57 @@ +--- +title: Come impostare il riassunto di una pagina +slug: MDN/Contribute/Howto/impostare_il_riassunto_di_una_pagina +tags: + - Community + - Documentazione + - Guida + - MDN + - Riassunto Pagina +translation_of: MDN/Contribute/Howto/Set_the_summary_for_a_page +--- +
{{MDNSidebar}}

Il riassunto di una pagina di MDN è definito in modo da essere utilizzabile in vari ambiti, tra cui i risultati dei motori di ricerca, in altre pagine di MDN, come ad esempio nelle landing pages relative a diversi argomenti, e nei tooltips. Deve essere quindi un testo che conservi il proprio significato sia nel contesto della propria pagina, sia quando si trova in contesti differenti, privato dei contenuti della pagina di origine.

+

Un riassunto può essere identificato esplicitamente all'interno della pagina. In caso contrario, si utilizza in genere la prima frase, il che non sempre si rivela la scelta più adatta per raggiungere lo scopo prefissato.

+ + + + + + + + + + + + + + + + + + + +
Qual è il tuo compito?Evidenziare la parte di testo all' interno della pagina che, a tuo parere, dovrebbe essere utilizzata come riassunto della pagina nei vari contesti; questo compito richiede talvolta la scrittura di un testo appropriato, là dove ve ne sia necessità.
Dove c'è bisogno del tuo intervento?In quelle pagine che non hanno riassunto o ne presentano uno di scarsa qualità.
Di cosa hai bisogno per portare a termine la tua missione?Conoscenza dell' editor testi di MDN; buone capacità di scrittura in lingua inglese; sufficiente familiarità con l'argomento della pagina in questione, al fine di poterne scrivere un valido riassunto.
Le tappe del tuo lavoro: +
    +
  1. Scegli una pagina di cui fare il riassunto: +
      +
    1. Nella pagina MDN documentation status, sotto Sections, seleziona l'argomento che meglio conosci (ad esempio HTML):
      +
      2. +
    2. Nella pagina dello stato di documentazione dell'argomento scelto, clicca sulla casella Pages della tabella Summary. Si aprirà un indice di tutte le pagine di quell'argomento; nella colonna di sinistra troverai i links delle pagine, in quella di destra i tags e i riassunti:
      +
      3. +
    3. Scegli una pagina senza riassunto o con un riassunto mediocre:
      +
      4. +
    4. Clicca il link per aprire quella pagina.
      5. +
    +
    2. +
  2. Clicca su Edit per aprire la pagina nell'editor testi di MDN.
    3. +
  3. Cerca una o due frasi adatte per un riassunto, o, all'occorrenza, creane di nuove o modificane di esistenti allo scopo di creare un buon riassunto.
    4. +
  4. Seleziona il testo da utilizzare come riassunto
    5. +
  5. Nello Styles widget della barra degli strumenti di editor, seleziona SEO Summary. (Si crea così un elemento {{HTMLElement("span")}} nella page source con class="seoSummary" attorno al testo prescelto.) +

    +
    6. +
  6. Salva le modifiche con un commento di revisione del tipo "riassunto pagina".
    7. +
+
+

 

+

 

+

 

diff --git a/files/it/orphaned/mdn/editor/index.html b/files/it/orphaned/mdn/editor/index.html new file mode 100644 index 0000000000..856ef1fc2d --- /dev/null +++ b/files/it/orphaned/mdn/editor/index.html @@ -0,0 +1,9 @@ +--- +title: Guida all'editor di MDN +slug: MDN/Editor +translation_of: MDN/Editor +--- +
{{MDNSidebar}}

L'editor WYSIWYG (what-you-see-is-what-you-get, ciò che vedi è ciò che ottieni) messo a disposizione dal wiki del Mozilla Developer Network semplifica la creazione di nuovi contenuti. La guida all'editor di MDN fornisce alcune informazioni sull'utilizzo dell'editor e su alcune caratteristiche utili che possono migliorare la tua produttività.

+

La guida di stile di MDN fornisce alcune informazioni sulla formattazione e lo stile da applicare ai contenuti, comprese le regole di grammatica che preferiamo vengano utilizzate.

+

{{LandingPageListSubpages}}

+

{{EditorGuideQuicklinks}}

diff --git a/files/it/orphaned/tools/add-ons/dom_inspector/index.html b/files/it/orphaned/tools/add-ons/dom_inspector/index.html new file mode 100644 index 0000000000..d6566854ca --- /dev/null +++ b/files/it/orphaned/tools/add-ons/dom_inspector/index.html @@ -0,0 +1,24 @@ +--- +title: DOM Inspector +slug: DOM_Inspector +tags: + - 'DOM:Strumenti' + - Estensioni + - 'Estensioni:Strumenti' + - Strumenti + - Sviluppo_Web + - 'Sviluppo_Web:Strumenti' + - 'Temi:Strumenti' + - Tutte_le_categorie + - XUL + - 'XUL:Strumenti' +translation_of: Tools/Add-ons/DOM_Inspector +--- +

+

Il DOM Inspector (conosciuto anche con l'acronimo DOMi) è un tool di Mozilla usato per ispezionare, visualizzare, modificare il Modello a Oggetti di un Documento (DOM - Document Object Model), normalmente una pagina web o una finestra XUL. +

Per ulteriore informazioni sul DOMi, visitare la pagina del DOM Inspector su MozillaZine. +

Per utilizzare DOMi con Thunderbird 2.0 o superiore, occorre installare Thunderbird con le seguenti opzioni: +

+
ac_add_options --enable-extensions="default inspector"
+ac_add_options --enable-inspector-apis
+{{ languages( { "en": "en/DOM_Inspector", "fr": "fr/Inspecteur_DOM", "ja": "ja/DOM_Inspector", "pl": "pl/Inspektor_DOM", "ko": "ko/DOM_Inspector" } ) }} diff --git a/files/it/orphaned/tools/add-ons/index.html b/files/it/orphaned/tools/add-ons/index.html new file mode 100644 index 0000000000..53b7924169 --- /dev/null +++ b/files/it/orphaned/tools/add-ons/index.html @@ -0,0 +1,17 @@ +--- +title: Add-ons +slug: Tools/Add-ons +tags: + - NeedsTranslation + - TopicStub + - Web Development + - 'Web Development:Tools' +translation_of: Tools/Add-ons +--- +

Developer tools that are not built into Firefox, but ship as separate add-ons.

+ +
+
WebSocket Monitor
+
Examine the data exchanged in a WebSocket connection.
+
 
+
diff --git a/files/it/orphaned/web/javascript/reference/global_objects/array/prototype/index.html b/files/it/orphaned/web/javascript/reference/global_objects/array/prototype/index.html new file mode 100644 index 0000000000..d4989792a8 --- /dev/null +++ b/files/it/orphaned/web/javascript/reference/global_objects/array/prototype/index.html @@ -0,0 +1,203 @@ +--- +title: Array.prototype +slug: Web/JavaScript/Reference/Global_Objects/Array/prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Array/prototype +--- +
{{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

+ + diff --git a/files/it/plug-in/index.html b/files/it/plug-in/index.html deleted file mode 100644 index b6c23742d2..0000000000 --- a/files/it/plug-in/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -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/python/index.html b/files/it/python/index.html deleted file mode 100644 index 071e75d582..0000000000 --- a/files/it/python/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: Python -slug: Python -translation_of: Learn/Server-side/Django -translation_of_original: Python ---- -

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

- -

Imparare Python

- -

Libri digitali (gratuiti)

- -

Dive Into Python è considerata una delle migliori introduzioni a Python disponibili, anche se è aggiornato al 2004. Ciò nonostante, fornisce una buona trattazione delle basi del linguaggio e dei compiti più comuni per cui è usato il linguaggio come le richieste web o le operazioni sui file. Per gli argomenti più complessi, Text Processing In Python è un eccellente tutorial (o reference).

- -

Ci sono poi altri tutorial e risorse gratuite, disponibili:

- - - -

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

- -

Corsi Online (gratuiti)

- - - -

Python nelle applicazioni Mozilla

- -

XPCOM di per sè supporta solamente la comunicazione tra C++ e JavaScript. Il modulo Python XPCOM (chiamato anche PyXPCOM) è uno strato di basso-livello che mette insieme Python e Mozilla, permettendo ai componenti XPCOM scritti in C++ o JavaScript di comunicare con Python, o viceversa. PyXPCOM non è incluso di default in Firefox, quindi si dovrebbe usare una versione di terze-parti che include il modulo. Un esempio di utilizzatori di PyXPCOM sono la famiglia di prodotti Komodo.

- -

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

- -

Strumenti scritti in Python

- -

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

- -

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

- -

L'uso di Python in Mozilla

- -

Mozilla ha diverse infrastrutture basate su Python:

- - - -

Python in Mozilla-Central

- -

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

- -

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

- - - -

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

- -

Pacchetti Python

- -

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

- -

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

- -
easy_install PyYAML
-
- -

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

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

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

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

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

- -

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

- -

Vedi anche:

- - diff --git a/files/it/svg/index.html b/files/it/svg/index.html deleted file mode 100644 index 4fcdc7a78d..0000000000 --- a/files/it/svg/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -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/sviluppo_web/index.html b/files/it/sviluppo_web/index.html deleted file mode 100644 index 955b27f5d9..0000000000 --- a/files/it/sviluppo_web/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: Sviluppo Web -slug: Sviluppo_Web -tags: - - Sviluppo_Web - - Tutte_le_categorie -translation_of: Web/Guide -translation_of_original: Web_Development ---- -

-

-
Lo sviluppo Web comprende tutti gli aspetti di sviluppo di un sito web o di una applicazione web.
- - -
-

Documentazione

-
Migrare applicazioni da Internet Explorer a Mozilla -
Doron Rosenberg vi dice come assicurarvi che le vostre applicazioni web sia con IE che con Mozilla. -
-
Usare valori URL per la proprietà cursor -
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. -
-
Usare il caching di Firefox 1.5 -
Firefox 1.5 memorizza intere pagine web, incluso il loro stato JavaScript, in memoria. La navigazione in avanti ed indietro tra le pagine visitate non richiede caricamento di pagina e lo stato del JavaScript è preservato. Questa carateristica permette una navigazione delle pagine molto veloce. -
-

Vedi tutti... -

-		 -

Community

-
  • Visita i forum Mozilla... -
-

{{ DiscussionList("dev-web-development", "mozilla.dev.web-development") }} -

- -

Strumenti

- -

Vedi tutti... -

-

Argomenti correlati

-
AJAX, CSS, HTML, JavaScript, Standard Web, XHTML, XML -
-
-

Categories -

Interwiki Language Links -


-

{{ languages( { "en": "en/Web_Development", "de": "de/Webentwicklung", "es": "es/Desarrollo_Web", "fr": "fr/D\u00e9veloppement_Web", "ja": "ja/Web_Development", "pl": "pl/Programowanie_WWW" } ) }} diff --git a/files/it/tools/add-ons/index.html b/files/it/tools/add-ons/index.html deleted file mode 100644 index 53b7924169..0000000000 --- a/files/it/tools/add-ons/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: Add-ons -slug: Tools/Add-ons -tags: - - NeedsTranslation - - TopicStub - - Web Development - - 'Web Development:Tools' -translation_of: Tools/Add-ons ---- -

Developer tools that are not built into Firefox, but ship as separate add-ons.

- -
-
WebSocket Monitor
-
Examine the data exchanged in a WebSocket connection.
-
 
-
diff --git a/files/it/tools/performance/index.html b/files/it/tools/performance/index.html new file mode 100644 index 0000000000..30117d7c02 --- /dev/null +++ b/files/it/tools/performance/index.html @@ -0,0 +1,91 @@ +--- +title: Prestazioni +slug: Tools/Prestazioni +translation_of: Tools/Performance +--- +

Lo strumento per l'analisi delle prestazioni ti fornisce una panoramica della risposta generale del tuo sito, della prestazione del layout e del Javascript. Con lo strumento per l'analisi delle prestazioni crei una registrazione, o tracci un profilo, del tuo sito in un periodo di tempo. Lo strumento ti mostra poi un resoconto delle cose che il tuo browser stava facendo al fine di rappresentare il tuo sito nel profilo, ed un grafico del frame rate nel profilo.

+ +

Hai a disposizione tre sotto-strumenti per esaminare gli aspetti del profilo più dettagliatamente:

+ + + +

{{EmbedYouTube("WBmttwfA_k8")}}

+ +
+

Per cominciare

+ +
+
+
+
UI Tour
+
+

Per orientarti nell' uso dello strumento d'analisi delle prestazioni, ecco un breve tour della UI.

+
+
+
+ +
+
+
How to
+
Operazioni basilari: apri lo strumetno, crea, salva, carica e configura le registrazioni
+
+
+
+ +
+

Componenti dello strumento per l' analisi delle prestazioni

+ +
+
+
+
Frame rate
+
Comprendi la risposta generale del tuo sito
+
Albero delle chiamate
+
Trova gli intoppi nel Javascript del tuo sito.
+
+
+ +
+
+
Cascata
+
Comprendi il lavoro che sta svolgendo il browser quando l' utente interagisce con il tuo sito.
+
Grafico a fiamma
+
Controlla quali funzioni Javascript sono in esecuzione ed in che momento, durante la registrazione.
+
 
+
+
+
+ +
+

Scenari

+ +
+
+
+
Animazione delle proprietà CSS
+
Usa la cascata per capire in che modo il browser aggiorna una pagina e come l' animazione di differenti proprietà CSS può intaccare le prestazioni.
+
 
+
+
+ +
+
+
Javascript intensivo
+
Usa gli strumenti Frame rate e Cascata  per evidenziare problemi di prestazione dovuti ad un Javascript particolarmente pesante e come l'utilizzo dei worker può essere d' aiuto.
+
+
+
+ +

 

+ +
+
+
 
+
+
+ +

 

diff --git a/files/it/tools/prestazioni/index.html b/files/it/tools/prestazioni/index.html deleted file mode 100644 index 30117d7c02..0000000000 --- a/files/it/tools/prestazioni/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: Prestazioni -slug: Tools/Prestazioni -translation_of: Tools/Performance ---- -

Lo strumento per l'analisi delle prestazioni ti fornisce una panoramica della risposta generale del tuo sito, della prestazione del layout e del Javascript. Con lo strumento per l'analisi delle prestazioni crei una registrazione, o tracci un profilo, del tuo sito in un periodo di tempo. Lo strumento ti mostra poi un resoconto delle cose che il tuo browser stava facendo al fine di rappresentare il tuo sito nel profilo, ed un grafico del frame rate nel profilo.

- -

Hai a disposizione tre sotto-strumenti per esaminare gli aspetti del profilo più dettagliatamente:

- - - -

{{EmbedYouTube("WBmttwfA_k8")}}

- -
-

Per cominciare

- -
-
-
-
UI Tour
-
-

Per orientarti nell' uso dello strumento d'analisi delle prestazioni, ecco un breve tour della UI.

-
-
-
- -
-
-
How to
-
Operazioni basilari: apri lo strumetno, crea, salva, carica e configura le registrazioni
-
-
-
- -
-

Componenti dello strumento per l' analisi delle prestazioni

- -
-
-
-
Frame rate
-
Comprendi la risposta generale del tuo sito
-
Albero delle chiamate
-
Trova gli intoppi nel Javascript del tuo sito.
-
-
- -
-
-
Cascata
-
Comprendi il lavoro che sta svolgendo il browser quando l' utente interagisce con il tuo sito.
-
Grafico a fiamma
-
Controlla quali funzioni Javascript sono in esecuzione ed in che momento, durante la registrazione.
-
 
-
-
-
- -
-

Scenari

- -
-
-
-
Animazione delle proprietà CSS
-
Usa la cascata per capire in che modo il browser aggiorna una pagina e come l' animazione di differenti proprietà CSS può intaccare le prestazioni.
-
 
-
-
- -
-
-
Javascript intensivo
-
Usa gli strumenti Frame rate e Cascata  per evidenziare problemi di prestazione dovuti ad un Javascript particolarmente pesante e come l'utilizzo dei worker può essere d' aiuto.
-
-
-
- -

 

- -
-
-
 
-
-
- -

 

diff --git a/files/it/tools/responsive_design_mode/index.html b/files/it/tools/responsive_design_mode/index.html new file mode 100644 index 0000000000..09fd2cb08c --- /dev/null +++ b/files/it/tools/responsive_design_mode/index.html @@ -0,0 +1,79 @@ +--- +title: Visualizzazione Flessibile +slug: Tools/Visualizzazione_Flessibile +tags: + - Design + - Firefox + - Guida + - Mobile + - Strumenti + - Sviluppo + - Sviluppo Web + - responsive +translation_of: Tools/Responsive_Design_Mode +--- +

Le interfacce web responsive si adattano a diverse dimensioni di schermo permettendo una presentazione fruibile su dispositivi di tipo diverso, come smartphone o tablet. La Visualizzazione Flessibile permette di visionare facilmente come il proprio sito o applicazione web risulterà su schermi di diverse dimensioni.

+ +

La schermata seguente mostra il contenuto di una pagina Wikipedia in versione mobile simulando uno schermo della dimensione di 320x480 pixel.

+ +

+ +

La Visualizzazione flessibile risulta conveniente perché permette di ridimensionare l'area del contenuto velocemente e con precisione.

+ +

Naturalmente potrebbe essere sufficiente soltanto ridimensionare la finestra del browser ma questo comporterebbe il ridimensionamento in piccolo anche delle altre schede in fase di navigazione, rendendo il browser più difficile da usare.

+ +

Mentre è attiva la Visualizzazione flessibile su una particolare scheda, è comunque possibile continuare a navigare normalmente i contenuti delle altre schede.

+ +

Attivazione e disattivazione

+ +

Ci sono tre modi per attivare la Visualizzazione flessibile:

+ + + +

e ci sono anche tre modi per disattivare la Visualizzazione flessibile:

+ + + +

Ridimensionamento

+ +

Si può ridimensionare l'area del contenuto in due modi:

+ + + +

Decidendo di ridimensionare tramite click e trascina, tenendo premuto il tasto CTRL (Command su OSX) è possibile rallentare la velocità di ridimensionamento al fine aumentare la precisione per scegliere la dimensione giusta.

+ +
+

Controlli della modalità Visualizzazione flessibile

+ +

+ +

Lungo la parte alta della finestra in modalità "Visualizzazione flessibile" ci sono cinque controlli:

+ +
+
Chiudi
+
Termina la modalità "Visualizzazione flessibile" e ritorna alla navigazione normale.
+
Selezione dimensione
+
Permette di scegliere un numero preimpostato di combinazioni larghezza x altezza, oppure di definirne una personalizzata.
+
Orientamento
+
Alterna l'orientamento verticale ed orizzontale simulando il cambio di orientamento del dispositivo.
+
Simula gli eventi touch
+
Attiva/disattiva la simulazione degli eventi touch: quando la simulazione è attivata, gli eventi del mouse vengono tradotti in eventi touch.
+
Screenshot
+
Cattura la schermata dell'area. Il salvataggio avviene nella posizione in cui vengono salvati anche gli altri Download.
+
User Agent personalizzato
+
Novità da Firefox 47. Immettere una stringa che corrisponde al nome di un User Agent. L'area risulta evidenziata e le richieste verranno effettuate utilizzando la stringa User Agent impostata. Questo è utile quando i siti restituiscono diversi contenuti in base al riconoscimento per mezzo di UA sniffing. Per tornare alla normalità è sufficiente svuotare il campo di testo.
+
+
+ +

 

diff --git a/files/it/tools/visualizzazione_flessibile/index.html b/files/it/tools/visualizzazione_flessibile/index.html deleted file mode 100644 index 09fd2cb08c..0000000000 --- a/files/it/tools/visualizzazione_flessibile/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: Visualizzazione Flessibile -slug: Tools/Visualizzazione_Flessibile -tags: - - Design - - Firefox - - Guida - - Mobile - - Strumenti - - Sviluppo - - Sviluppo Web - - responsive -translation_of: Tools/Responsive_Design_Mode ---- -

Le interfacce web responsive si adattano a diverse dimensioni di schermo permettendo una presentazione fruibile su dispositivi di tipo diverso, come smartphone o tablet. La Visualizzazione Flessibile permette di visionare facilmente come il proprio sito o applicazione web risulterà su schermi di diverse dimensioni.

- -

La schermata seguente mostra il contenuto di una pagina Wikipedia in versione mobile simulando uno schermo della dimensione di 320x480 pixel.

- -

- -

La Visualizzazione flessibile risulta conveniente perché permette di ridimensionare l'area del contenuto velocemente e con precisione.

- -

Naturalmente potrebbe essere sufficiente soltanto ridimensionare la finestra del browser ma questo comporterebbe il ridimensionamento in piccolo anche delle altre schede in fase di navigazione, rendendo il browser più difficile da usare.

- -

Mentre è attiva la Visualizzazione flessibile su una particolare scheda, è comunque possibile continuare a navigare normalmente i contenuti delle altre schede.

- -

Attivazione e disattivazione

- -

Ci sono tre modi per attivare la Visualizzazione flessibile:

- - - -

e ci sono anche tre modi per disattivare la Visualizzazione flessibile:

- - - -

Ridimensionamento

- -

Si può ridimensionare l'area del contenuto in due modi:

- - - -

Decidendo di ridimensionare tramite click e trascina, tenendo premuto il tasto CTRL (Command su OSX) è possibile rallentare la velocità di ridimensionamento al fine aumentare la precisione per scegliere la dimensione giusta.

- -
-

Controlli della modalità Visualizzazione flessibile

- -

- -

Lungo la parte alta della finestra in modalità "Visualizzazione flessibile" ci sono cinque controlli:

- -
-
Chiudi
-
Termina la modalità "Visualizzazione flessibile" e ritorna alla navigazione normale.
-
Selezione dimensione
-
Permette di scegliere un numero preimpostato di combinazioni larghezza x altezza, oppure di definirne una personalizzata.
-
Orientamento
-
Alterna l'orientamento verticale ed orizzontale simulando il cambio di orientamento del dispositivo.
-
Simula gli eventi touch
-
Attiva/disattiva la simulazione degli eventi touch: quando la simulazione è attivata, gli eventi del mouse vengono tradotti in eventi touch.
-
Screenshot
-
Cattura la schermata dell'area. Il salvataggio avviene nella posizione in cui vengono salvati anche gli altri Download.
-
User Agent personalizzato
-
Novità da Firefox 47. Immettere una stringa che corrisponde al nome di un User Agent. L'area risulta evidenziata e le richieste verranno effettuate utilizzando la stringa User Agent impostata. Questo è utile quando i siti restituiscono diversi contenuti in base al riconoscimento per mezzo di UA sniffing. Per tornare alla normalità è sufficiente svuotare il campo di testo.
-
-
- -

 

diff --git a/files/it/tutorial_sulle_canvas/index.html b/files/it/tutorial_sulle_canvas/index.html deleted file mode 100644 index 577a620cb7..0000000000 --- a/files/it/tutorial_sulle_canvas/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -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/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.

diff --git a/files/it/web_development/mobile/design_sensibile/index.html b/files/it/web_development/mobile/design_sensibile/index.html deleted file mode 100644 index d7c931fec6..0000000000 --- a/files/it/web_development/mobile/design_sensibile/index.html +++ /dev/null @@ -1,50 +0,0 @@ ---- -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_development/mobile/index.html b/files/it/web_development/mobile/index.html deleted file mode 100644 index cc288a9c45..0000000000 --- a/files/it/web_development/mobile/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -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/websockets/index.html b/files/it/websockets/index.html deleted file mode 100644 index c09953a49e..0000000000 --- a/files/it/websockets/index.html +++ /dev/null @@ -1,179 +0,0 @@ ---- -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/websockets/writing_websocket_client_applications/index.html b/files/it/websockets/writing_websocket_client_applications/index.html deleted file mode 100644 index a146730537..0000000000 --- a/files/it/websockets/writing_websocket_client_applications/index.html +++ /dev/null @@ -1,184 +0,0 @@ ---- -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:

- -
    -
  • Login handshake
    • -
  • Messaggio di testo
    • -
  • Aggiornamenti lista utenti
    • -
- -

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/window.find/index.html b/files/it/window.find/index.html deleted file mode 100644 index ebebfa374d..0000000000 --- a/files/it/window.find/index.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -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);
-
-
    -
  • aString: La stringa di testo da cercare.
    • -
  • aCaseSensitive: Booleano. Se true, imposta la ricerca a case-sensitive.
    • -
  • aBackwards: Booleano. Se true, imposta la ricerca al contrario.
    • -
  • aWrapAround: Booleano. If true, specifies a wrap around search.
    • -
  • aWholeWord: Boolean. Se true, imposta la ricerca solo su parole intere.
    • -
  • aSearchInFrames: Booleano. Se true, attiva la ricerca nei frames.
    • -
  • aShowDialog: Boolean. Se true, mostra una finestra di dialogo per la ricerca.
    • -
-

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/xhtml/index.html b/files/it/xhtml/index.html deleted file mode 100644 index ea600cce7c..0000000000 --- a/files/it/xhtml/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: XHTML -slug: XHTML -tags: - - Tutte_le_categorie - - XHTML -translation_of: Glossary/XHTML ---- -

-

XHTML sta a XML come HTML sta a SGML. Questo significa che XHTML è un linguaggio a markup simile a HTML, ma con una sintassi più rigida. Le due versioni di XHTML definite dal W3C sono: -

-
  • XHTML 1.0 - un HTML4 riscritto come applicazione XML, in certi casi retrocompatibile. -
  • XHTML 1.1 - una versione modulare di XHTML assolutamente non retrocompatibile. -
-

Una terza versione, XHTML 2, che comprende modifiche significative al vocabolario degli elementi, è attualmente in sviluppo. -

Per ulteriori informazioni si veda: -

- -

Strumenti

- -{{ languages( { "en": "en/XHTML", "es": "es/XHTML", "fr": "fr/XHTML", "pt": "pt/XHTML" } ) }} -- cgit v1.2.3-54-g00ecf